Web 2
ウェブに関するテクニック2

注意事項

毎回の授業の最初に出席メールを提出せよ.

前回までの出席記録課題と提出状況 を確認せよ.

7 章 ウェブに関するテクニックつづき

7.4.5 固定フォーム復習

select タイプの入力フィールドでデフォルトの値を指定したい 場合はデフォルトにしたい値の option 要素に selected="selected" という 記述を追加する.下記は例 18 の選択項目の並びのまま,olange をデフォルトに 指定した例である.

例 19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <title>Sample of select</title>
  </head>

  <body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="GET">
      Select: <select name="data">
               <option value="apple">りんご</option>
               <option value="olange" selected="selected">みかん</option>
               <option value="banana">バナナ</option>
               <option value="pinapple">パイナップル</option>
              </select>       
      <input type="submit" />
    </form>
<?php
 if(isset($_GET['data'])){
      $s = $_GET['data'];
      echo "Selected: $s";
    }
?>
  </body>
</html>

7.4.8

例 20 はファイルのアップロードを行う例である. 動作実験を行え.転送されたファイルの確認は WinSCP で行うことができる. 転送できるファイルサイズに制限を設定しているのでサイズの小さなファイルで実験せよ.

例 20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <title>Sample of upload</title>
  </head>

  <body>
    <form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>"
      method="POST">
      <input type="hidden" name="MAX_FILE_SIZE" value="10240" />
      ファイルを選択: <input name ="toProcess" type="file" /><br />
      保存するファイル名: <input name ="fname" type="txt" />
      <input type="submit" value="アップロード" />
    </form>
<?php
 if (isset($_FILES['toProcess']) 
   && is_uploaded_file($_FILES['toProcess']['tmp_name'])){
    $filename = $_POST['fname'];
    move_uploaded_file($_FILES['toProcess']['tmp_name'], "../uploads/$filename");
    echo "アップロードに成功しました";
 } 
?>
  </body>
</html>

本サイト例 20 はアップロードスクリプトの練習用であり,だれでもアップロードできる 設定になっている.不正なファイルや大量のファイルをアップロードしないように注意せよ. uploads ディレクトリの内容は予告無しに消去する場合がある.

本サイト例 20 の input 要素のうち type="hiddedn" であるものはブラウザに入力欄が 表示されない.隠しパラメータというよりも,ユーザに入力させるのではなく, スクリプト側で設定してしまうパラメータだと解釈するとよい. クリックした後の処理へパラメータの値を渡す為に使われる.

7.4.9

ユーザの入力した値をチェックすることは重要である.教科書 p.191 例 7-9 は フォームの必要要素にデータが設定されているかどうかだけをチェックするものである.

数値を入力する欄に実際に数値が入力されているかを正規表現でチェックすることができる, メールアドレス入力欄にメールアドレスが入力されているかは厳密な意味ではチェックできない. 簡単なチェックを行ったり,2 度入力させてタイプミスを検出することはできる.

レスポンスヘッダの設定

header() 関数を使ってレスポンスヘッダ出力を指定することができる. ヘッダには文字コード,コンテンツタイプ,リダイレクション,有効期限等の情報 等を含ませることができる.

header() は本文の出力より前に使用しなければならない.具体的には <html lang="ja"> の出力より前である必要がある.

認証もリクエストヘッダとレスポンスヘッダで行われる.basic 認証等の パスワード認証ページに最初にアクセスすると,以下の順で認証が行われる.

  1. ブラウザはヘッダにパスワード等が含まれないリクエストをサーバに送る.
  2. サーバは 401 Unauthorized というレスポンスと,認証の名前(認証レルム)を返す.
  3. ブラウザは上記認証レルムをタイトルとしたダイアログを開き,ID とパスワードを ユーザに入力させる.
  4. ユーザの入力が完了すると,ブラウザは得た ID, パスワード等の認証情報を ヘッダに含めて改めてリクエストを行う.
  5. サーバはヘッダの認証情報にて認証を行い,アクセス許可の判断を行う.

7.6 状態の管理

HTTP は状態を保持するように設計されていない.しかし状態を 表現する方法はある.

HTTP では毎回新しく接続を行う.しかし,以前の例では 1. フォームへ入力した時と,2. その結果を出力する時,は別の接続 であるにも関わらず,関係した内容を表示している. これは 1. の接続時にパラメータに値を設定し,2. で呼び出すときにその パラメータと値を渡しているからである.

フォームのパラメータを利用し,パラメータに特別な値を設定して 状態として利用することができる.以前の例で「フェーズ」を意識して 表示を変える方法を扱った.フェーズとは状態そのもので, パラメータの設定状況を状態の記憶として利用しているのである.

ユーザに知らせる必要はないが,状態遷移の表現に必要なパラメータは hidden フィールドとして使う.ユーザから隠すのが目的ではなく, 状態遷移を表現するのが目的である.

以下の例は hidden フィールドを使ってクリックされた回数である 状態を パラメータ count に設定して自分自身を呼出し,状態を記憶する 例である.

例 21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <title>Sample of hidden field</title>
  </head>

  <body>
<?php
if(isset($_GET['count'])){
  $s = $_GET['count'] + 1;
} else {
  $s = 1;
}
?>
<p><?php echo "$s <br />"; ?></p>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="GET">
      <input type="hidden" name="count" value="<?php echo $s;?>" />
      <input type="submit" />
    </form>
  </body>
</html>

例題 7

合計値を記憶し,変更してゆくスクリプトを作る. 最初に開いた時の「合計値」の初期値は 0 とする. 毎回,現在の合計値とテキスト入力欄を表示し,テキスト入力欄に 数値を入れて送信ボタンを押すと次回の合計値には前回入力した 値が加算されて表示されるスクリプトを作成せよ.

フォームを利用しなくても,URL埋め込みのパラメータとして付加情報を与えることも できる.

クッキーはブラウザが記憶できるデータである.サーバは 切断前に次回の接続に必要なデータをクッキーとして送信し, ブラウザはそれを記録する.次にそのクッキーと共にサーバに 接続することでサーバはユーザの状態を判断し,続きの処理を 行うことができる.

PHP の組込みのセッション機能は裏側でクッキー,URL を利用した状態記憶法を 駆使し,分りやすいインターフェースをユーザに提供する.

クッキーはブラウザに記憶させる任意の変数名と値の組.setcookie() でブラウザに送るが,レスポンスヘッダを使って送るので全ての出力の前 に実行する必要がある.

ブラウザから送られたクッキーの値をスクリプト内で参照するには連想配列 $_COOKIE を使う.クッキーの値の読み出し,修正,書き込みについては p.199 の例を参照.

セッションは,クッキーの技術を背景に分りやすいインターフェースを実現したものである. 自動的にクッキーの処理を行う.ページを超えてグローバル変数のように利用できるデータ を提供する.教科書例 p.200 例 7-11 では色の設定情報 bg と fg を手動でクッキーに 記録することで書き込みを行い, 例 7-12 で $_COOKIE 変数にアクセスすることで手動で読み出しを行っている. これに対し,教科書例 p.202 例7-13 は bg,fg をセッション機能を使って書き込み, 例 7-14 はセッション機能を使って読み出しを行っている.

変数の状態をサーバで記録することもできる.データを記録するにはシリアライズが必要. 7.6.2.3, 7.6.3 の詳細は省略

SSL

$_SERVER['HTTPS'] の値で ssl 接続であるかどうかがわかる. ssl でない接続でパスワード等を送ると簡単に情報が盗まれてしまう.

第 8 回課題「数字当てゲーム 1」 を提出せよ.


Updated in June 16, 2009, index.html, Yamamoto Hiroshi