クライアントサイドプログラム

クライアントからサーバへのデータ渡し

これまで作成したサーバサイドプログラムは，単にサーバからクライアントに一方的にデータを返すだけのものであった。しかし，実際に有用なWebアプリケーションを開発するには，ブラウザ上で入力したデータ（例えば，検索キーワードなど）をサーバで受け取り，それに応じた処理（例えば，検索キーワードに合致する書籍をデータベース上で探すなど）をサーバ上で行って結果をブラウザに返すことが必要となる。

ブラウザ上でデータを入力可能にするには，HTMLフォームと呼ばれる<form>タグを用いる。また，サーバ上でブラウザからのデータを受け取るには，Pythonのcgiモジュールで提供されているFieldStorageクラスを用いる。

HTMLフォーム

HTMLフォームとは，例えば以下のようなものである。 

<form name="form1" action="/cgi-bin/formtest.py" method="POST">
  文字を入力して下さい
  <input type="text" name="param1" />
  <button type="submit" name="submit">送信</button>
</form>

これにより，以下のようなWebページがブラウザ上に表示される。

<form>タグのactionは，このフォームによりサーバ上で起動するPythonプログラムなどのURLを指定する(この場合は，WEBDIR/cgi-bin/formtest.pyが起動される)。method="POST"は，フォーム上で入力されたデータがサーバ側へ送られることを示している。

<input>タグは，フォームに含まれる入力項目を指定する。typeをtextとするとテキスト入力領域，checkboxとするとチェックボックスが表示される。<input>タグにはname属性を指定することができ，入力された値をPythonプログラム側で読み出す場合に用いる。

<button>タグはボタンを表示するためのものであり，typeをsubmitとすると，このボタンが押されたときにactionで指定されたサーバ側のプログラムへ要求が送られる。

FieldStorageクラス

ブラウザ上のHTMLフォームで入力され，サーバ側へ送られたデータは，Pythonプログラム上のFieldStorageクラスを利用して読み出すことができる。クライアント側でフォームに入力された値を読み出すには，getvalue()関数を用いる。例えば，HTMLフォームで， 

<input type="text" name="param1" />
と指定されたテキスト領域に入力された文字列を読み出すには，Pythonプログラムでは， 
import cgi

form = cgi.FieldStorage()
param_str = form.getvalue('param1','')
となる（<input>タグのname属性で指定した名前param1を第1引数に指定し，第2引数には値が入力されなかった場合のデフォルト値を指定する）。

演習課題4（→提出先）

上記のHTMLフォームのテキスト領域に入力された文字列を表示するサーバサイドプログラムformtest.pyを作成し，動作を確認せよ（動作例を下図に示す）。

JavaScript

Webブラウザ上でのプログラムの実行

これまで構築してきたPythonプログラムによるWebアプリケーションにおいては，プログラム自体の実行はサーバ上で行い，クライアント（Webブラウザ）はサーバ上で生成されたHTML文書を表示するだけである。

より本格的なアプリケーションを作成することを考えた場合，サーバ側のみでプログラムを実行することは非効率になることも多い。例えば，フォームに入力された値が正当なものかどうか(空欄が許されるか，日付として「13月32日」のようなあり得ない値が入力されていないかなど)のチェックは，クライアントからサーバへデータを送る前にクライアント側でチェックできるほうが望ましい。

Webブラウザは，JavaScriptと呼ばれる言語の処理系を内蔵しており，このような入力値のチェックに加え，様々な処理がクライアント側で行えるようになっている。JavaScriptは，インタプリタ方式のスクリプト言語であり，Javaに似た文法を持つ言語ではあるが，Javaそのものとは全く別物である（Javaとは言語の方式自体が異なっており，JavaScriptは「プロトタイプベース」のオブジェクト指向型言語である）。

主に，HTML文書の中に埋め込まれてブラウザ上で実行され，HTMLフォームへの入力値チェックやHTML文書の動的書き換えなどに用いられる。ここでは，フォームへの入力値が正当なものであるかどうかをチェックする機能を，JavaScriptにより実現する。

フォームへの入力値チェックにおける利用

HTML文書中にJavaScriptプログラムを埋め込むには， 

<script language="javascript">...</script>
のように<script>タグで囲んで記述するか，別ファイル（例えばscript.js）にJavaScriptプログラムを記述し， 
<script type="text/javascript" src="script.js"></script>
のように読み込み指定を行う。

例えば，上記のHTMLフォームにおいて，テキスト領域に入力された文字列が空でないか，あるいは，数字のみから成るかをチェックし，そうでない場合には警告を表示する関数check()は以下のようになる。 

function check() {
  var param = document.form1.param1.value;
  if(param == '') {
    alert("値を入力してください。");
    return false;
  } else if(param.match( /[^0-9]+/ )) {
    alert("数字のみを入力してください。");
    return false;
  }
  return true;
}

この関数check()を呼び出すには，ボタンに対応する<button>タグ中に，onclick属性を指定する。 

<button type="submit" name="submit" onclick="return check();">送信</button>
onclickの返り値としてfalseを返すと，サーバに要求は送られない（フォームに対応付けられたactionは呼び出されない）。

また，入力値のチェックとは別に，ボタンが押されたときに，本当に実行してもよいか（サーバに要求を送っても良いか）を確認するような処理にも用いることができる。このような処理を実現するには，JavaScriptの標準関数confirm()を用いて以下のようにすれば良い。 

<button type="submit" name="submit" onclick="return confirm('実行しても良いですか?');">送信</button>

AJAX

最近の多くのWebページは，AJAX(Asynchronous JavaScript + XML)と呼ばれる技術を用いた対話型Webページとして構築されている。これは，Webブラウザ上で単にサーバから送られてきたHTML文書を表示するだけでなく，JavaScriptプログラムを動作させ，そのプログラムが用いるデータをXML(eXtensible Markup Language)形式でサーバとやり取りし，動的にWebページの内容を書き換えるものである。

これにより，例えばGoogle Mapのように地図をスクロールさせたりできるなど，対話性に優れたWebアプリケーションを構築することが可能となる。

本演習ではAJAXの詳細には触れないが，独自機能を実現する際に取り入れてみて欲しい。

演習課題5（→提出先）

演習課題4のHTMLファイルに上記のJavaScriptプログラムを追加し，ブラウザ上でフォームへの入力値チェックが行えることを確認せよ。

Copyright © 2018-2020 Hideyuki Takada