さるもすなるぷろぐらむU
CGI making
●PHP−はじめの半歩
■動機
以前、ASPを使ってCGIを作ることを考えたことがありました。
でも、最近(2010年-記)、サンプル籠だとか、マニュアルだとかを注文してもらう用のサイトが使えなくなってしまったので、
急遽、自分で「仕掛け」を用意することにしました。
じゃあCGIってなんだろう:「Common Gateway Interface:ブラウザからサーバに対して、何かプログラムを動作させるように指示して、
その結果をレスポンスしてもらう仕掛け。
レスポンスは、当然ブラウザが受け取って意味をなすHTMLの形式で出力してもらうことが多い。」です。
「さるもすなる ほおむぺえじ」のように、ほとんど写真とそれへのコメントしか無いような内容だと、
それをデータベース化してシンプルに保存しておいて、
「見る」ときに定型化した見た目のフォーマットにはめ込んで見せるのが一般的というか整理しやすいですよね。
なので、今回それ(一部)を少々慌てて作りました。
ブログで経過を説明してたのですが、少し整理してここに記録します。
さて、「はじめの一歩」改め「はじめの半歩」的に。
「これからはじめる」なんて方が、もし、仮に、いらっしゃれば、何かの足しになるかもしれませんので。
■CGI環境の選定
1)CGIを作る言語は色々ありますが、最近はPHPが多いみたいなのでそれを使います。
2)「PHPを使う」と決めたら、次にそれを「動作させてもいいよ」と言ってくれる、ホームページサービスを探します。
お金を掛けたくない方は「無料」を探してください。(2010年現在)それなりにあります。
申し込みを行って、コンテンツ(CGI)アップ方法の説明を待ってください。
3)PHPでプログラム(スクリプト)を作って、テストする環境を準備する必要があります。
最悪、「無し」でエディタさえあれば、できないこともありませんが、さすがに本チャンのサーバ使っては
デバックテストは効率が悪いので、できるだけ開発環境を準備した方がいいでしょう。
さるの場合、Eclipseという統合開発環境(IDE)「Eclipse 3.5 Galileo Pleades All in On」というのが「全部入り」みたいなので、
それをダンロードしました。(http://mergedoc.sourceforge.jp/ ご参考)
以下、その環境を前提に説明します。
■開発環境の入手とインストール
Pleiades(pleiades-e3.5-php-jre_20100226.zip)は、Windows上でPHP開発環境を構築するためのプログラムセットです。
主に以下のものが含まれるようです。
+ Apache 2.2.11
+ MySQL 5.1.33 (Community Server)
+ PHP 5.2.9 + PEAR (PHP 4 wird nicht mehr unterst・zt)
+ XAMPP Control Version 2.5 from www.nat32.com
+ XAMPP CLI Bundle 1.3 from Carsten Wiedmann
+ XAMPP Security 1.0
+ SQLite 2.8.15
+ OpenSSL 0.9.8i
+ phpMyAdmin 3.1.3.1
+ ADOdb 5.06a
+ Mercury Mail Transport System v4.62
+ FileZilla FTP Server 0.9.31
+ Webalizer 2.01-10
+ Zend Optimizer 3.3.0
+ eAccelerator 0.9.5.3 for PHP 5.2.9 (auskommentiert php.ini)
etc
とにかく必要なものが入っていると思っていいかと思います。
さるも、Apacheはhttpdサーバ、MySQLはDB(DBMS)、PHPがCGIスクリプト言語(インタプリタ)くらいの認識しかないですが、
大丈夫みたいです。
前提とするOS環境は、以下だそうです。
+ 64 MB以上のRAM
+ 250 MB以上のディスクの空き容量
+ Windows NT, 2000, 2003, XP , VISTA
+ 32 Bit Systeme (not 64bit)
残念ながら、Windows7は出てきてませんが、使って見た結果としては、特に問題はありまっせんでした。
インストールの手順です。
1)「C:\Pleiades_e35」というフォルダを作って、pleiades-e3.5-php-jre_20100226.zipの中身を全てコピー(解凍)する。
インストール先のフォルダのパスが長過ぎると、次のセットアップで失敗するようです。
2)DOSプロンプトを開いて、「C:\Pleiades_e35\xammp\setup_xammp.bat」を実行する。
3)今度は、エクスプローラから「C:\Pleiades_e35\xammp\xamp_controler.exe」を実行する。
Apacheと書いてある隣の「Start」と書いているボタン押しすと、「Running」と表示されて、動作が開始します。
同じくMySQLも「Start」します。
※Win7だと、動作させる際になんかWindowsのセキュリティ関連のメッセージが出力されますが、「ホームネットワーク」を選択して、許可しました。
4)IEを起動して、「http://localhost/」とアドレスを打ち込んでみます。
「XAMPP」とブラウザに大きく出ます。
5)セキュリティ設定をする必要があるそうです。
「http://localhost/」の画面の「日本語」と書いてあるリンクをクリックします。
→ようこそ画面が出ます。
→左側のメニューから「ステータス」を選択します。
ステータス画面が出ます。SMTPとFTP以外は「開始」になっているはずです。
→左側のメニューから「セキュリティ」を選択。
かなり、危ない状況であることが、別ウィンドウで表示されます。
→その下に「http://localhost/security/xamppsecurity.php 」とリンクされているところをクリックする。
→MySQLのrootのパスワードとXAMMPのユーザ/パスワード登録を実行します。
→xampp_controlで、MySQLのStop-Startを行った後、
前のブラウザの画面の左側のメニューから「セキュリティ」を選択すると、前に「要注意」となっている部分が減っているのが確認できます。
これで、httpdサーバ(ローカルwebサーバ)の設定と起動は終了です。
動作を確認してみます。
6)Eclipse(C:\Pleiaes_e35\eclipse\eclipse.exe)を実行して見ます。
途中、ワークディレクトリをどうするか質問されますが、デフォルトのままでも大丈夫です。
この場合、.htmlや.phpなどを置くフォルダは、「C:\Pleiades_e35\xammp\htdocs\」になります。
※このときまた、Windowsのセキュリティメッセージが表示されたが、再度「ホームネットワーク」を許可としました。
7)Eclipseの「ファイル」−「新規」−「PHPプロジェクト」を選択して、プロジェクトを作成します。
さるは、プロジェクト名「sarumosunaru_cgi」としました。
→次に、「ファイル」−「新規」−「PHPファイル」を選択してPHPスクリプトをエディタできるようにします。
PHPスクリプト名は「sample.php」としてみました。
→ソースは簡単に以下の内容を打ち込んで見ます。
−−−−−−−−−−−−−−
<?php
$honjitu = date("Ymd His");
$message = "はじめてのPHPスクリプト";
?>
<html>
<body>
<?=$message;?>-<?=$honjitu;?>
</body>
</html>
−−−−−−−−−−−−−−
→[F11]キーでデバック開始、[F7]キーで続行とやってみます。
Eclipseのデバッカ内のブラウザに何か出ました。
日本語コードを何にするかmetaタグで指定していないので文字が化けしたが、何かは出ます。
→試しに、IEでアドレスに「http://localhost/sarumosunaru_cgi/sample.php」と打ったらやっぱり出ました。
ブラウザのエンコードをUTF-8に変更したら、「はじめてのPHPスクリプト-20101117・・・・」と出ました。
まずは、これで開発環境の準備は完了です。
インストールしたEclipse/Pleiadesの以下2つのexeのショートカットを作っておくと開発時に便利です。
・(C:\Pleiades_e35\xampp\)xammp_control.exe
・(C:\Pleiades_e35\eclipse\)eclipse.exe
PHPの言語仕様やサンプルに関しては、(2010年現在)http://nyx.pu1.net/(ソフィのPHP入門)などをご参照ください。
■公開用サーバにアップ
作ったPHPスクリプトを利用申請したサーバにアップして動くかどうか試してみます。
その前に前に作ったsample.phpを少し編集して、文字化けしないように、meta-charsetをUTF-8に指定します。
1)作成したショートカットでxammp_controlを起動して、ApacheをStartさせます。
2)同じく作成したショートカットでeclipseを起動します。
前に作成したsample.phpの中身が表示されます。
さるの場合は、以下のように編集しました。
−−−−−−−−−−−−−−
<?php
$honjitu = date("Ymd His");
$message = "はじめてのPHPスクリプトです。";
?>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<title>さるもすなる</title>
</head>
<body BACKGROUND="image/mainback.gif">
<hr>
<h1 align="center">
<img src="image/rolling1.gif" align="middle">
<font COLOR="#004466"> さるもすなるCGIテスト中 </font>
<img src="image/rolling2.gif" align="middle">
</h1>
<hr>
<?=$message;?>-<?=$honjitu;?>
<br><br>
<?php include_once "js_hotwavespace.php"; ?>
</body>
</html>
−−−−−−−−−−−−−−
途中のinlude_onceは、利用させてもらうサーバの利用規定で、入れなければいけないJavaScriptのコードです。
あと、何個か画像の参照があるので、それをワークディレクトリである「sarumosunaru_cgi」の下に準備します。
実際のパスは、「C:\Pleiades_e35\xampp\htdocs\sarumosunaru_cgi」の下になります。
そこにimageフォルダを作成して、mainback.gif、rolling1.gif、rolling2.gifをセットします。
[F11]と[F7]で動作確認して見ます。→動きました。
3)できたスクリプトをアップしましょう。
ffftpを使いました。スペース提供元から頂いたメールの情報でFTPのセットアップを行います。
・・・・・・つながったら、FTPで.phpをアップしてみます。
サーバ側でいくつか制約があるかもしれないので、紹介サイトやメールとかで入手した情報はよく読んでおきましょう。
さるの場合は、sarumosunaru_cgi以下の、sample.php、js_hotwavespace.phpをアップして、
imageフォルダをサーバ上に作成し、.gif三つをアップしました。
ブラウザのアドレスバーに以下のURLを打ち込んで見ます。
「http://sarumosunaru.chobi.net/sample.php」
動きました。
割とすんなり行きました。
ちなみに、<?php echo phpinfo(); ?> と1行入っただけの.phpをサーバ上で
実行するとサーバ環境の各種情報を表示することができます。
■PHPスクリプトの概要
ここで、PHPの特徴をさらーっと説明すると。
▲<?php ・・・・ ?> で囲まれたところがスクリプトとして、サーバ側で処理される部分になります。
▲逆に囲まれていない部分は、HTMLデータとしてクライアント側に送られるデータです。
▲PHPは基本的にC言語に似ている。
(ちなみに、さるがプログラム言語として知っているのはC言語のみ。)
・処理行の終わりは「;」で終わる。
・コメントは「/*・・・*/」「//・・・」
・if-else if-else、while、for、switchなどの書き方は、C言語と一緒。
・ifとかwhileの処理ブロックは「{・・・}」で囲む。
・標準関数的なものもかなりC言語的。数はC言語の比ではない。(と思う。)
▲ちょっと違うかなーというところは、
・変数の先頭には、「$」が付く。
・付かないのは関数名、defineで定義した定数。
・変数の型の宣言は明確ではない。
・配列は、「= array(・・・);」で宣言する。
・オブジェクトは、「= new xxxx();」で確保?する。(C++はnewでしたっけ?)
・メモリ領域の明快な確保/解放はあまり意識しなくてもいい?
普通の変数は「= null;」、配列は「unset(配列名);」で使用終了する。
特にやらなくても、処理が終われば、勝手に解放されるみたい。
・関数の宣言は 「function xxx()」
・defineはプリコンパイルではなく実行時に解釈される。(スクリプトなんで。)
また、C言語とはちょっと違う。
・includeも同じく実行時。なので、include自身もif文で飛ばしたりもできる。
「結構違うじゃん」と思うかもしれませんが、そんなに大したことはない。
コンパイル型の言語に比べれば、かなりいい加減に作ってもそれなりに動く感じ。
楽です。
でも、あくまでも単なる感想なので、正しい知識は、「ソフィのPHP入門」等で学習されることをおススメします。
■サンプルスクリプトの作成
ここ「http://sarumosunaru.chobi.net/ppecosamples.php」
で使っているPHPスクリプトを例に開発手順を説明します。
1)まずは、開発するスクリプトの仕様を考えます。
タブ区切りデータを読み込んで、一覧ページを表示するためのPHPスクリプトです。
入力して表示するデータを列挙すると、
−−−−−−−−−−−−−−−−
・サンプル番号 :テキスト
・籠サンプルの写真 :画像ファイル名
・大きい写真 :画像ファイル名
・名前 :テキスト
・サイズH :数値(cm)
・サイズW :数値(cm)
・サイズD :数値(cm)
・残数 :数値
・作成数 :数値
・材料の提供可/不可 :1=可、0=不可
・不可の場合のコメント :テキスト
・サンプルの値段 :数値(円)
−−−−−−−−−−−−−−−−
これをデータの並び(レコード)に置き換えて、入力すると以下のような感じ。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
S-1 PPkagoS-1.jpg PPkagoS-1B.jpg 籠 20 15 25 1 4 1 色違い可 850
S-5 PPkagoS-5.jpg PPkagoS-5B.jpg 筒 25 25 10 0 1 0 1000
:
:
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
間が空いているところは、タブを入力して区切ります。
このデータをppkago_sample_list.tsvとし、目的にのPHPスクリプトの入力とします。
これを 開発環境のフォルダである、「C:\Pleiades_e35\xampp\htdocs\sarumosunaru_cgi」にセーブします。
2)EclipseでPHPスクリプトを編集します。
まずは、Eclipseを起動します。
▲前に作った「sample.php」が表示されます。
sample.phpのテストを実行した状態で閉じたので、「PHPデバック」の画面構成になってます。
編集中心の「PHP」という画面構成があるので、それに切り替えます。
Eclipseの画面の右上くらいに切り替え用のアイコンボタンがあります。「PHPデバック」と書いてある隣です。
▲新規にPHPスクリプトファイルを開く
「ファイル」−「新規」−「PHPファイル」を選択して、作成するファイル名を「ppecosamples.php」と付けます。
「完了」ボタンをクリックします。エディタとしてのウィンドウ中央に、<?php とだけ書かれた「ppecosamples.php」が表示されます。
さあ、それではコーディングに入りましょう。
▲作りこむ処理は
おおまかな処理シーケンスとしては、以下です。
//****タブ区切りデータファイルをオープンして読み込み
//****1行づつ配列に変換して保持
//****HTMLとして出力
▲一個一個処理を潰していきましょう。
・ファイルのオープンは、fopen()関数
・読み込みは、一行づつ読む fgets()関数
・一行の解析は、explode()関数
※タブ区切りのデータを簡単に配列にしてくれちゃいます。
こんな便利な機能があるとは。感動ものです。
・それと、mb_conbert_encoding()関数
後で気づいたのですが、Windowsなのでデータは単純にはshift-jisとしてデータが作成されます。
なので、それをUTF-8に変換する必要があります。
※shift-jisのままでもEclipseの設定をshift-jisに設定して、htmlにでcharsetをshift-jisに設定してあげればいいだけ
なんですけど、今回はサーバ標準?のUTF-8を使います。
▲こんな感じに・・・・・
■サンプルスクリプトの解説
・4行目 //で始まっているので、コメントです。
//以降は、行末までコメントとみなされます。
ちなみに、/*・・・*/の場合は、「・・・」の部分がコメントで、複数の行を跨ぐこともできます。
・5行目 配列変数の宣言です。ここにデータ(タブ区切りデータ)一行分を格納します。
他の単独の値、文字列を格納するための変数であれば、宣言なしでいきなり使えますが、配列は別っみたいです。
・7〜14行目 データファイルをオープンしてます。
オープンに失敗すると、fopen()はfalseをリターンするので、falseの場合は、tr(行)とtd(カラム)の中に、
エラーメッセージを表示して、tableタグを閉じます。
16行目〜 はオープン成功時の処理。その終わり位置は77行目です。
・19行目 whileループです。75行目がループ処理の終わり位置です。
fgets()で1行づつデータを読み込んで、$slineにセットします。
gets()は、ファイルの最後まで読むとfalseをリターンするので、その時点でループ終了になります。
・22行目 EOF(end of file)とか空白行があった場合、処理しないで次のループ。
strlen()は文字列の長さを求める関数で、この場合、9文字より少なかったら、continueで19行目に戻ります。
・24行目 読み込んだ1行分のデータの中に日本語が含まれているような場合、sift-jisからutf-8に変換して、
元の$slineにセットします。
・26行目 $slineのデータをexplode()関数で、\t(=タブコード)を区切りとして配列に分解します。
rtrim()は文字列の中の空白文字とかを削除する関数です。
これで$item_aryという配列に分解されたデータ(文字)が配置されます。
・29〜37行目 材料の提供可否を入力データとしては、1、0で表しているので、人間が見て理解できる文字に置き換えます。
また、「可」の場合でも「色違いだったらいいよ」とか条件コメントを入れるので、その場合のコメントを別の変数にセットしてます。
・40〜73行目 ここがHTMLデータの中に繰り返し出力される部分です。
途中<?=変数;?> となっている部分は、「指定されている変数にセットされているデータをその箇所に文字列としてセットする」
という意味になります。
htmlspecialchars()は、指定された文字列の中をチェックしてHTMLとしては問題のある文字(<>など)を問題ない形式に変換する関数です。
また、48行目から56行目では、大きい写真のファイル名が指定されていなければ、
「大きい写真」と表示されてリンクされる画像の指定自体をセットしないようにしています。
・76行目 75行目がwhileループの終わりの処理なので、使い終わったデータファイルをクローズする処理です。
以上、PHPスクリプト自体は、80行にも満たない内容です。
■デバッグ
Eclipseの使い方になります。
・現在開いているPHPスクリプトをテスト動作させるためには、まずはApacheを動かす必要があります。
xammp_controlを起動して、表示されるウィンドウでApacheを[Start]させます。
・次にEclipseに戻って、「実行」−「デバックの構成」を選択します。
左側の欄に「PHP Webページ」と表示されたアイコンがあるので、そこでマウスを右クリックします。
表示されるプルダウンメニューから「新規」を選択します。
右側の欄にデバックする対象を指定できるようになるので、「名前」と「ファイル」を指定します。
「名前」は適当な名前をつければよくて、「ファイル」はテストしたいPHPファイルを指定します。
[参照]ボタンで選択ダイアログを使って選んだ方が、パス指定とか悩まなくて済みます。
一番下の「URL」が実際にデバック開始時の対象PHPを指定する部分で、ブラウザのアドレスバーと同じ指定方法です。
通常は「ファイル」指定を元に自動生成でいいでしょう。
[適用]ボタンで保存が行われ、この設定がデバッグを開始したときのデフォルトになります。
[デバッグ]ボタンで、デバック開始です。(2回目以降は、[F11]キーで開始することができます。)
・前のデバック構成の指定で「最初の行でブレーク」が指定されているので、先頭行で動きは一時停止します。
[F7]はGoで、[F6]は一行づつ(ステップ)実行、関数とかに差し掛かったときに
関数の中にステップインする場合は[F5]を押せばいいです。
・例えば、ステップ実行とかで一時停止している状態のときに、スクリプト内の変数とかに、
マウスカーソルを近づけると、その時点でのその変数の内容がポップアップ表示されます。
また、ウインドウ内に「変数」というタグがあれば、そのタグを選択すると、
使用している変数の一覧と内容が表示されます。
・止めたい行で一時停止したい場合は、スクリプトソースの行番号の左側をマウスで右クリックすると、
プルダウンメニューが表示され、その中の「ブレークポイントの切り替え」を選択すれば、
その行にブレークポイントが設定されて、そこを処理する前の状態で一時停止します。
当然、ブレークポイントを設定した行ががif文の中で、テスト時にそこが処理されないようなときは、
一時停止(ブレーク)は起きません。
■サーバにアップ
HTMLから参照している画像ファイル、それと元になるタブ区切りデータをサーバにアップします。
結果は、http://sarumosunaru.chobi.net/ppecosamples.php
でご覧いただけます。
スクリプトのソースはここからダウンロードいただけます。よろしければどうぞ。
■後日作ったPHPによる「なんちゃってアクセスカウンタ」です。