pg14

テーマネットワークとプログラムサーバ編

２０１８年度用メモ：見送り → PHPのファイルは新イントラサーバ上の各受講生の領域に設置して演習。

前回作成した webページやロゴのsvgファイルを再利用する場合は、前回と同じ場所に着席してください。

サーバサイドのプログラムについて

プログラム言語 PHP を今回扱う。

通常のＷｅｂコンテンツ同様に、PHPのファイルはWebサーバのドキュメントルート以下に配置する。

WebブラウザがWebサーバのPHPを含むファイルのアドレスにアクセスすると、サーバはアクセスされたファイルのPHPを実行する。

サーバ側で動作するプログラムを、サーバサイドプログラムと呼ぶ。

PHPにバグやセキュリティ上の問題があれば、サーバに意図しない影響（セキュリティの問題やクラッシュして止まるなど）が発生する。

サーバサイドプログラミング PHP

プログラム言語 PHP(Hypertext Preprocesser) は、HTML文書（Ｗｅｂページ）をプログラムで自動生成するための言語です。

PHPのポイント：

・WebサーバがPHPスクリプトを処理する

・PHPのコードでHTML文書を作成する

・PHPによるHTML文書はWebサーバからのデータとしてブラウザに送信する

・ブラウザは受信したHTMLをＷｅｂページとして表示（レンダリング）する

・PHPで作成するHTMLにはさらにJavaScriptを埋め込むことができる

JavaScriptとの比較：

・JavaScriptのコードはＨＴＭＬに埋め込まれている。ブラウザがJavaScriptのスクリプトを読み込み、実行し、実行結果が表示される。

→クライアントサイドプログラミング

・ＰＨＰは、サーバサイドプログラミングです。

↑の解説（旧科目応用プログラミング２の資料から）

参照： HTMLにPHPを埋め込む方法

準備

■ステップ１ a b c d

a・XAMPPコントロールで Apache Webサーバを起動(Start)する。

b・VS Code で htdocs の自分の学籍番号フォルダを開く。

自分の学籍番号が見つからない場合について：

前回出席していて同じPCを使用している受講生はフォルダーが設定済み。そのまま自分の学籍番号フォルダを開く

前回と違うPCを使用している受講生は自分の学籍番号でフォルダを新規作成して開く

前回欠席している受講生はファイル → フォルダーを開くから、

ボリューム（D:）の XAMPPフォルダ内の htdocs をフォルダーを設定する。

c・学籍番号フォルダを選択する。

d・フォルダ php1 を作成する。

演習１

内容：セッション管理を利用したWebページの製作

セッションのたとえ話。

電話をかけて相手を呼び出し用事を伝えるセッション：

友人Aの固定電話の電話番号を入力 → 相手が出る → 【セッション開始】「もしもし、●●です。友人Aさんのお宅ですか？」 → 家族A「はい」 → 「友人Aさんをお願いします」 → （交代） → 友人A「××です」 → （対話継続） → 「さようなら」 → 【セッション終了】電話を切る

自分と友人Aの通話の開始後に通話を乗っ取る。 → 「セッションジャック」という攻撃

例えば、電話を切らずに放置 → 他人が成りすまして通話

不正アクセス（パスワードを入手して悪用）・個人情報を入手して成りすます →オレオレ詐欺

これはセッションの開始時点から第三者がセキュリティを破っている状態。セッションジャックではない。

PHPのセッション管理：

１ページ目のPHPのファイルAで処理したデータを変数$Xに格納して、

２ページ目のPHPのファイルBの変数$Xから取り出して処理しようとしてもデータは受け渡されない。

なぜなら、

ファイルAのPHPの実行が終了してクライアント側にWebコンテンツを送信した時点で、ファイルAへのセッションは終了して変数も記録内容も消えて残らないためである。

ファイルBのPHPを実行して変数$Xを使用してもファイルAの変数と同じ名前$Xであっても全く無関係の状態でお互いに影響をあたることもない。

ファイルAのセッションとファイルBのセッションは異なるセッションといえる。

PHPのコードでセッション開始を宣言すると、セッションを終了するまで（またはブラウザを閉じるまで）有効な同一セッションとして

ファイルAとファイルBで共通のセッション変数を利用できるようになる。

セッション変数の書式 $_SESSION['変数名']

Webページが切り替わって別のページになっても、セッション変数を利用して、ページ間のプログラムでセッションに必要な情報を受け渡すことができる。

つまり

Webページ１と Webページ２の異なる PHPコードで共通で利用可能な変数がセッション変数である。

例）

閲覧にパスワード入力が必要なＷｅｂページの制作

・正しいキーワードを入力しないと、次のページに進ませないＰＨＰスクリプトをＷｅｂページに埋め込む。（ログイン管理なども同様）

・次のページのＵＲＬをブラウザに直接入力して表示させようとしても、ＰＨＰスクリプトで正しいキーワードが入力済みかチェックして適切に処理する

プログラムの動作概要図：

■ステップ２

ファイル名 index.php を作成（拡張子の .php もファイル名の一部として入力。フォルダ php1 の中に配置。）

・キーワード入力用のＷｅｂ画面。1ページ目の画面です。

<!DOCTYPE html>

<html>

<head>

<title>PHPセッション</title>

</head>

<body>

<h1>セッションスタート</h1>

<p>キーワードを入力して送信ボタンを押す。</p>

<form action = "index.php" method = "post">

<input type = "text" name ="data" size="40" placeholder="キーワードを書いてね"><br>

<br>

<input type = "submit" value ="送信">

</form>

<?php

// メッセージが送信されてきているかチェック

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//メッセージがあるかチェック

if(isset($_POST['data'])) {

$data = $_POST['data'];

session_start(); // セッションの開始を通知。

if(isset($_SESSION['count'])){

$count = $_SESSION["count"]; // セッション変数 count の読み込み

}else{

$count = 0;

}

$count++; // 送信回数を1増加

$_SESSION["count"] = $count; // セッション変数 count を更新

<p>キーワード: <?=$data?> を受信した</p>

<p>送信回数: <?=$count?> 回</p>

<?php

}

//キーワードチェック

if($data == "あかさたな") {

echo "キーワード確認OK<br>";

$_SESSION["stage1"]=1; // ステージ1を1にする

echo '<a href="index2.php">ステージ２へ</a>';

} else {

echo "正しいキーワードを送信してください。<br>";

$_SESSION["stage1"]=0; // ステージ1を0にする

}

</body>

</html>

※ PHP のコードは HTML の部分と PHP の部分を混在して記述できる。 <?PHP から ?> までの間の部分が PHPのプログラム。

※ 斜体のコードが Webとしてブラウザに表示されるHTMLコード

※ PHPの変数は $変数名のように先頭に$マークが付く。（シジル (sigil) と呼ばれる記号）

■ステップ３

ファイル名 index2.php を作成（ファイル名に注意。フォルダ php1 の中に配置。）

Webのファイル名について：

1ページ目のindex.phpに、2ページ目へのリンクの行き先として

<a href="index2.php">ステージ２へ</a>

とファイル名でリンク先を指定しています。

HTMLではアンカータグ(a)を使用して、別のＷｅｂページへのリンクを作成できます。

この演習では2ページ目のリンク先URLを指定する代わりにファイル名 index2.php を指定しています。

ファイル名は index2.php 以外を使用しても構いません。

index2.phpのURLは、

http://localhost/学籍番号/php1/index2.php

です。index2.phpの部分は省略できません。

URLで省略可能なファイル名は、 index.html と index.php がＷｅｂサーバに設定されています。

・キーワード入力用のＷｅｂ画面その２２つめのキーワードを入力する2ページ目のＰＨＰコードです。

<!DOCTYPE html>

<html>

<head>

<title>PHPセッション</title>

</head>

<body>

<?php

session_start();

// ステージ１でキーワードが正しく入力されていない場合

if($_SESSION['stage1']==0) {

echo "ステージ１に戻ってください<br>";

echo '<a href="index.php">ステージ１へ</a>';

return; //ステージ２の表示を中断してプログラム実行修了

}

<p>キーワードを入力して送信ボタンを押す。</p>

<br>

</form>

<?php

// メッセージが送信されてきているかチェック

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//メッセージがあるかチェック

if(isset($_POST['data'])) {

$data = $_POST['data'];

if(isset($_SESSION['count'])){

$count = $_SESSION["count"]; // セッション変数 count の読み込み

}else{

$count = 0;

}

$count++; // 送信回数を1増加

$_SESSION["count"] = $count; // セッション変数 count を更新

<p>キーワード: <?=$data?> を受信した</p>

<?php

}

//キーワードチェック

if($data == "あかさたな") {

echo "キーワード確認OK<br>";

$_SESSION["stage2"]=1; // ステージ2を１にする

echo '<a href="index3.php">ステージ３へ</a>';

} else {

echo "正しいキーワードを送信してください。<br>";

$_SESSION["stage2"]=0; // ステージ2を０にする

}

</body>

</html>

■ステップ４

動作確認

1ページ目のアドレス http://localhost/学籍番号/php1/index.php

2ページ目のアドレス http://localhost/学籍番号/php1/index2.php

1ページ目でキーワードを正しく入力できていない場合、2ページ目の内容が表示されないことを確認する。（1ページ目から2ページ目に進んだ場合と比較）

サインアウト用ページ（セッション終了）を用意していないので、ブラウザを閉じないと、キーワード入力に成功された状態は維持される。

※ ３ページ目のファイルは作成していないので、3ページ目に進むリンクをクリックしてもエラーになる。

■ステップ５a

実験：

フォームにタグを埋め込んで、送信してみる。

<font size=+5>おおきくなった！</font>

XSS攻撃

キーワードの入力欄に、JavaScriptを埋め込んで、送信してみる。

※Chrome は POPUP Blocker が機能して、alertによるメッセージが表示されない模様（popupによる攻撃防止）

※例題には、セキュリティホールあり。スクリプトを悪用した攻撃について調べ、自衛のため勉強しておこう。

※今回の様にlocalで稼動している演習用のサーバでなく、実際に運用されているサービスで XSS を試さないこと。

サーバに対する攻撃（不正アクセス）とみなされる場合があります。

■ステップ５b

・演習１の表示される文章を変更して、クイズ用のページに変更してみる。

・演習１で、３ページ目を作成する。2ページ目のスクリプトを新規ファイル index3.php にコピーして調整して利用する。

・CSS スタイルを適用する

例）以下のコードを <head> と </head>の間に挿入する

<style>

p {

border: #ffb6c1 solid 1px;

border-left: #ffb6c1 solid 10px;

padding: 20px;

background: #fff;

}

form {

padding: 20px;

background: #fff;

box-shadow: 0 0 50px #ddd inset;

-moz-box-shadow: 0 0 50px #ddd inset;

-webkit-box-shadow: 0 0 50px #ddd inset;

}

</style>

※ コピペで使えるCSSデザイン枠テンプレート http://wp.myafi.net/css-design-frame/ 例えば、こちらのサイトのように、CSS のコードをネットから検索して利用してみる。

※ p や form などタグの種類ごとに CSSデザインを適用できる。

提出課題

提出先 WebClass

方法 php1 を含む学籍番号フォルダを zip にまとめて、アップロードする。

ZIP圧縮の方法は、前回の第13回の提出方法を参考にしてください。圧縮するフォルダは php1 だけでOKです。

応用例）

上記のPHPコードから、キーワードチェック用のコードを除去してシンプルにした例を示す。

セッション変数で入力データを複数ページで利用している。

夢小説風PHPコードの例）

・1ページ目で主人公の名前などを入力する

・2ページ目以降で表示する主人公の名前をセッション変数 $_SESSION['name']に記録する。

以下のコードを今回の課題の代わりに使用して提出してもOK

index.php

<!DOCTYPE html>

<html>

<head>

<title>BUNRIクエスト</title>

</head>

<body>

<h2>主人公の設定</h2>

<p>名前を入力してください</p>

<br>

</form>

<?php

// メッセージが送信されてきているかチェック

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//メッセージがあるかチェック

if(isset($_POST['data'])) {

$data = $_POST['data'];

}

session_start(); // セッションの開始を通知。

$_SESSION["name"] = $data; // セッション変数に名前を記録

$_SESSION["stage1"] = 1; // ステージ1を1にする(チェック済みとして記録)

<p>名前: 「<?=$data?>」でいいですか？<br>

つけなおす場合は、名前を入力しなおしてください。<br>

リンクをクリックしてください。<br>

</p>

<a href="index2.php">冒険を始めよう</a>

<?php

}

</body>

</html>

・１ページ目で入力した主人公の名前をセッション変数 $_SESSION['name'] から読み取って、変数 $name にコピーする。

・小説の本文に <?=$name?> と記述すると主人公の名前を文章に埋め込んで表示することができる。

index2.php

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<?php

session_start();

// １ページ目で名前が送信済みかチェック

if($_SESSION['stage1']==0) {

echo "主人公の名前を付けて下さい<br>";

echo '<a href="index.php">ステージ１へ</a>';

return; //ステージ２の表示を中断してプログラム実行修了

} else {

$name = $_SESSION['name']; // 1ページ目セッションから名前を受け取る

$_SESSION['stage2'] = 1; // 2ページ目にたどり着いたことを記録

}

<p><?=$name?> の冒険は始まったばかりだ（つづく）。</p>

</body>

</html>

時間が余るので

・ PHPのプログラムについて外部の入門サイトを調べて取り組んでみよう（例： PHPでプログラミング）

・第１３回目（前回）にやり残した課題に取り組む。例えば、演習４ Web API を利用した郵便番号から住所検索のコードを先回のＷｅｂページに埋め込む。（少し難しい）

・ http://pictogramming.org/ ピクトグラミング を利用して、ピクトさん（人型）のアニメーションGIFファイルを作成し、 img タグで今回作成した PHP のWebページに表示する。

埋め込み用のコードは <img src="ファイル名.gif" width="300" height="300">

※ 幅と高さの 300 と 300 の部分を適当なサイズに調整する。

・先回作成したアニメーションロゴをphpのコードでも使用する。

画像を埋め込むコード <img src="../js03/logo.svg">

※ 画像ファイルを php1 にコピーして利用する代わりに、相対パス ../js03 を指定している。

相対パスを利用することで、前回作成した画像ファイルに直接アクセスできる。

※ ロゴの縦横のサイズを指定するには、<img src="../js03/logo.svg" width="500" height="200">

・これまでの課題で、未提出のものや、欠席した回の課題に取り組む。

・第１１回で紹介したＣＧソフト Terragen で地形を生成し、画像ファイルに保存する。

保存した画像を img タグで今回作成した PHP のWebページに表示する。

Terragenの使い方は、ページの下の方にリンクを掲載した動画を参照。

制作例）

など

２０１７年度実施見送り

・データベース利用しりとり？

・WebRTC

以下、２０１６年度の内容

サーバサイドプログラミング PHP

プログラム言語 PHP(Hypertext Preprocesser) は、HTML文書（Ｗｅｂページ）をプログラムで自動生成するための言語です。

Webサーバ側でＰＨＰスクリプトは処理され、実行結果としてＨＴＭＬ文書が生成されます。生成されたＨＴＭＬがブラウザに用事されます。

・ＪａｖａＳｃｒｉｐｔは、スクリプトはＨＴＭＬに埋め込まれます。ブラウザでスクリプトを読み込み、実行し、実行結果が表示されます。

→クライアントサイドプログラミング

・ＰＨＰは、サーバサイドプログラミングです。

参考資料：

PHPについて

HTMLにPHPを埋め込む方法

演習１

・XAMPPコントロールでＡｐａｃｈｅＷｅｂサーバを起動しておく。

・VS Code で htdocs の学籍番号フォルダを開く。

・フォルダ php1 を作成する。

例１）

フォームでサーバにメッセージを送信し、ＰＨＰでメッセージを処理・加工してブラウザに送り返して表示する。

ファイル名 index.php を作成（拡張子 .php に注意）

HTMLによるデータ送信用フォーム。送信データは、 index.php で処理される。

<!DOCTYPE html>

<html>

<head>

<title>PHPフォーム</title>

</head>

<body>

<h1>送信・受信兼用ページ</h1>

<p>送信ボタンを押して、テキストボックスに入力したメッセージをサーバへ送る。</p>

<br>

</form>

</body>

</html>

実行確認ＵＲＬの例） http://localhost/3116777/php1/

テキスト処理用の php スクリプトを組み込む。送信データは変数 $data に格納され、<?=$dada?> のコードでHTMLに組み込まれ表示されている。

<?php

// メッセージが送信されてきているかチェック

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//メッセージがあるかチェック

if(isset($_POST['data'])) {

$data = $_POST['data'];

<p>メッセージ: <?=$data?> を受信した</p>

<?php

}

順次、以下の様なテキスト処理のプログラムを組み込んで動作を確認していく。

繰り返し処理：指定した回数、メッセージを繰り返し表示（改行なし）。 echo は PHP の表示コマンド。

<?php

foreach(range(0,20) as $i) {

echo $data;

}

<br>

文字列を1文字ずつ分解し、各文字に記号を付け加えて表示する。

・ preg_split は PHP の正規表現パターンを使用した文字列分解コマンド。 "//u" は先頭と文末を含む全ての文字の切れ目を示すパターン。

<?php

foreach(preg_split("//u", $data) as $c) {

echo $c . "♡";

}

<br>

文字列を1文字ずつ分解し、各文字に改行タグ <br> を付け加えて表示する。

<?php

foreach(preg_split("//u", $data) as $c) {

echo $c . "<br>";

}

<br>

メッセージの先頭から1文字ずつ文字を取り出し、左中央右の3箇所に配置する。表示位置をずらしていく。

・mb_substr で、文字列 $data の$i 番目から1文字取り出している。

・str_repeat は、間を埋める空白文字を文字数を調整しながら生成している。

<pre>

<?php

$len = mb_strlen($data);

foreach(range(0,$len/2-1) as $i) {

echo str_repeat(" ",$i);

echo mb_substr($data,$i,1);

echo str_repeat(" ",$len/2-1-$i);

echo mb_substr($data,$i,1);

echo str_repeat(" ",$len/2-1-$i);

echo mb_substr($data,$i,1);

echo str_repeat(" ",$i);

echo "<br>";

}

echo $data . "<br>";

foreach(range($len/2-1,0) as $i) {

echo str_repeat(" ",$i);

echo mb_substr($data,$len-$i,1);

echo str_repeat(" ",$len/2-1-$i);

echo mb_substr($data,$len-$i,1);

echo str_repeat(" ",$len/2-1-$i);

echo mb_substr($data,$len-$i,1);

echo str_repeat(" ",$i);

echo "<br>";

}

</pre>

<br>

実験：

フォームにタグを埋め込んで、送信してみる。

<font size=+5>おおきくなった！</font>

XSS攻撃

※Chrome は POPUP Blocker が機能して、攻撃を防ぐ模様。

※例題には、セキュリティホールあり。スクリプトを悪用した攻撃について調べ、自衛のため勉強しておこう。

演習２

PHPによるセッション管理の例）

ブラウザで表示するページを切り替えても、セッションを継続して、ページ間のプログラムで情報を共有する。

・フォルダ php2 を作成する。

作業例）

例２）

・正しいキーワードを入力しないと、次のページに進ませないＰＨＰスクリプト

・次のページのＵＲＬをブラウザで直接指定して表示させようとしても、ＰＨＰスクリプトで正しいキーワードが入力済みかチェックして適切に処理する。

ファイル名 index.php を作成（拡張子 .php に注意）

・キーワード入力用ページ

<!DOCTYPE html>

<html>

<head>

<title>PHPセッション</title>

</head>

<body>

<h1>セッションスタート</h1>

<p>キーワードを入力して送信ボタンを押す。</p>

<br>

</form>

<?php

// メッセージが送信されてきているかチェック

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//メッセージがあるかチェック

if(isset($_POST['data'])) {

$data = $_POST['data'];

session_start(); // セッションの開始を通知。

if(isset($_SESSION['count'])){

$count = $_SESSION["count"]; // セッション変数 count の読み込み

}else{

$count = 0;

}

$count++; // 送信回数を1増加

$_SESSION["count"] = $count; // セッション変数 count を更新

<p>キーワード: <?=$data?> を受信した</p>

<?php

}

//キーワードチェック

if($data == "あかさたな") {

echo "キーワード確認OK<br>";

$_SESSION["stage1"]=1; // ステージ1を1にする

echo '<a href="index2.php">ステージ２へ</a>';

} else {

echo "正しいキーワードを送信してください。<br>";

$_SESSION["stage1"]=0; // ステージ1を0にする

}

</body>

</html>

ファイル名 index2.php を作成（ファイル名に注意）

・キーワード入力ページその２２つめのキーワードを入力します。

<!DOCTYPE html>

<html>

<head>

<title>PHPセッション</title>

</head>

<body>

<?php

session_start();

// ステージ１でキーワードが正しく入力されていない場合

if($_SESSION['stage1']==0) {

echo "ステージ１に戻ってください<br>";

echo '<a href="index.php">ステージ１へ</a>';

return; //ステージ２の表示を中断してプログラム実行修了

}

<p>キーワードを入力して送信ボタンを押す。</p>

<br>

</form>

<?php

// メッセージが送信されてきているかチェック

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//メッセージがあるかチェック

if(isset($_POST['data'])) {

$data = $_POST['data'];

if(isset($_SESSION['count'])){

$count = $_SESSION["count"]; // セッション変数 count の読み込み

}else{

$count = 0;

}

$count++; // 送信回数を1増加

$_SESSION["count"] = $count; // セッション変数 count を更新

<p>キーワード: <?=$data?> を受信した</p>

<?php

}

//キーワードチェック

if($data == "あかさたな") {

echo "キーワード確認OK<br>";

$_SESSION["stage2"]=1; // ステージ2を１にする

echo '<a href="index3.php">ステージ３へ</a>';

} else {

echo "正しいキーワードを送信してください。<br>";

$_SESSION["stage2"]=0; // ステージ2を０にする

}

</body>

</html>

動作確認

1ページ目のアドレス http://localhost/3116777/php2/index.php

2ページ目のアドレス http://localhost/3116777/php2/index2.php

サインアウト用ページ（セッション終了）を用意していないので、ブラウザを閉じないと、キーワード入力に成功された状態は維持される。

※ ３ページ目のファイルは作成していないので、3ページ目に進むリンクをクリックしてもエラーになる。

提出課題

・演習１のテキスト処理のプログラムを、修正して、テキスト処理の結果を変えてみる。

・演習２の表示される文章を変更して、クイズ用のページに変更してみる。

・（チャレンジ）演習２で、3ページ目を作成する。2ページ目のスクリプトをコピーして調整して利用する。

提出先 WebClass

方法 php1 と php2 を含む学籍番号フォルダを zip にまとめて、アップロードする。

来週は、iPad/iPhoneのアプリを使用予定 FILTERS をインストールしておいてください。

iOS アプリのカメラアプリ＋ OpenGL GS シェーダー言語「FILTERS」で学ぶ GLSL

WebAPI と SQL の導入は今回は見送り。

参考資料： PHPとデータベース

pg14

テーマ ネットワークとプログラム サーバ編

準備

演習１

動作確認

提出課題

以下、２０１６年度の内容

演習１

順次、以下の様なテキスト処理のプログラムを組み込んで動作を確認していく。

演習２

動作確認

提出課題

テーマネットワークとプログラムサーバ編