Web技術入門

実験の目的

近年のWebサイトでは、LMSのようにユーザからの入力に応じて表示内容が変化するコンテンツが多数使われている。この実験ではWebサイトへの簡単なデータの受け渡し方法について実践し、理解を深める。

理論

近年のWebページでは、ユーザからの入力やデータベースの内容に応じて表示内容が変化する動的なページがほとんどを占めている。Webページによる情報公開が始まった90年代初頭においては、HTMLは静的なコンテンツのみを扱うことが多かった。しかしながら、掲示板などによるコンテンツ共有や、ユーザ個人に合わせたページのカスタマイズのためには、Webページを掲載している計算機（Webサーバ）上で、プログラムを動かし、表示するためのHTMLを自動的に生成すること必要である。このような動的なWebページの作成は、C言語などの古典的なプログラミング言語を用いたCGIが使われていたこともあるが、近年はperl,PHPなどのスクリプト系言語を用いて作ることが一般的である。

Webページを表示するための通信プロトコルをHTTP（Hyper Text Transfer Protocol）とよび、Webサーバ上の動的なプログラムとの通信にもこのプロトコルが使われている。代表的なメッセージはGETとPOSTであり、どちらもページのリクエストであるがリクエスト時にパラメータとして値を渡すことができる。また、表示用のHTMLが返信される。Webブラウザは返信されたHTMLを描画し、ユーザにとって視覚的に分かりやすいページとして表示している。

一方で、スマートフォンのアプリケーションのように、アプリケーションとデータサーバのみを通信し、アプリケーションが三次元のアニメーションなどを描画するというケースでも、Webサーバは利用されている。この場合は、データベースやコンテンツサーバとしてサーバを利用するため、HTMLではなく単なるデータをサーバから取得する場合も多い。このデータ構造として、近年はJSON（JavaScript Object Notation）というテキスト形式で、単純だが汎用性の高いデータ構造が広く使われている。

JSONなどを使い、Webサーバ上のデータベースを利用したり、Webサイトに登録されたデータを取り出す、もしくはデータを登録する仕組みも確立されてきている。特にWebサーバ経由で自由にデータをやり取りする枠組みを指してWebAPI（Application Programming Interface）と呼ぶこともある。WebAPIはGoogleMapsやLINEなどのサービスもWebAPIを提供しており、自身のWebサイトに組み込んだり、個人で作ったアプリケーションに組み込むこともできるようになっている。

実験の手順

1. WebサイトへのアクセスとURLでの値渡し

実験用サイト１にアクセスします。

gifu-3ejikken2023.japaneast.cloudapp.azure.com/api/get.php

Array ( )

となっています。これはGETのパラメーターになにも渡されていないことを意味しています。

parameterを追加

get.phpの後に?a=5を追加してアクセスしてみましょう。URLとしては次のようになります。

gifu-3ejikken2023.japaneast.cloudapp.azure.com/api/get.php?a=5

Array()の中身が変わりましたか？

確認1

aや5の値を変えて試してみましょう。文字列にしてみたり、限界の長さ（大きさ）を調べてみるとよいでしょう。

課題1

複数の値　a = 5 と b = 7 を渡す方法を調べ、試してみましょう。

考察のヒント

URLに使えない文字や、parameterに使われている文字を渡すにはどうしたらいいのでしょうか？これらの方法を考察してみるとよいでしょう。

2. POSTによる値渡し

実験用サイト２にアクセスします。

gifu-3ejikken2023.japaneast.cloudapp.azure.com/api/post.php

確認2

先ほどと同じように?を付けて値を渡してみましょう。

→値が何も変わらないことが確認できましたか？

このページはPOSTというメソッドでなければ値が渡せません。このページにPOSTするためのページを使ってみましょう。

gifu-3ejikken2023.japaneast.cloudapp.azure.com/api/postinput.php

確認3

適当な値を入力して Send ボタンを押してみましょう。

確認4

input pageのソースコードを確認して、中に書いてあるキーワードと、確認2で表示された内容がどう対応しているかを確認しましょう。

課題2

postinput.phpのコメント欄に <A href="test.html">hello</A> と記入すると、表示されるページにHTMLを埋め込むことができます。試してみましょう。

考察のヒント

掲示板などで書き込み者が自由にHTMLを記入できると問題になる場合があります。問題点を考察してみてください。

3. Postman を使ってみよう

What is Postman?

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

www.postman.comより引用

今回はクライアントアプリを使います。LMSからアプリを配布してありますので、自分のPCにインストールして使ってください。

Note

共有PCを使いたい、Webブラウザで簡単に済ませたい方は、サインアップ（アカウント登録）が必要です。Googleアカウントを使ってサインアップすると簡単に使えるようになります。職業はstudentsを選べばよいと思います。

アプリを起動し、アカウント登録なしで起動するメニューを押します。