コンピュータ基礎実習(上級) 第 9 週 「コンピュータ基礎実習(上級)」第 9 週 CGI について 今回の授業は、サイトに CGI プログラムとして掲示板などを設置するための基本を学びます。 1. CGI とは CGI (しーじーあい Common Gateway Interface)はウェブサーバーが、ページにアクセスする人に対応して プログラムを起動する仕組みです。 通常の HTML ページの場合は Web サーバー上の HTML ファイルを単純に表示するだけですが、 CGI を使うと、プログラムの実行結果を画面に表示するので、より柔軟なページを作成できます。 京都産業大学のウェブサーバーも CGI に対応しているため、ユーザーは CGI を利用したウェブページを作れます。 1.1. CGI が使われているページの例 CGI には以下のような特徴があります。 ユーザーがウェブサイト上に入力した情報をサーバーに記録しておける。 プログラムの実行結果をもとに、動的に変化するページを作れる。 この特徴を利用して、以下のような様々なページを実現できます。 アクセスカウンター サーバーに記録した訪問回数を表示。 電子掲示板、ブログ 利用者の書き込み記事をページに反映。 ブラウザゲーム 利用者の操作をもとにゲーム画面表示。スコアなどを保存。 申し込みフォーム 入力された情報を記憶、メール送信など。 ショッピングカート 利用者が買ったものを記憶、金額計算、集計、メール送信など。 動的に内容が変わる情報 現在日時やスケジュール、アクセスするたびに変わる画像 の表示など。 このような状況によって表示が変化する[動的コンテンツ]を実現できるのが CGI の特徴です。 2. CGI ファイルについて CGI ファイルの内容は、プログラミング言語が記述されたテキストファイルです。 テキストファイルなので、サクラエディタなどで簡単に編集ができます。 CGI を実行するには、まず何かのプログラミング言語で記述された[CGI ファイル]をウェブサーバー上にアップロード しておく必要があります。(プログラム本体以外に関連ファイルがある場合は、あわせてアップロードが必要です。) CGI でよく使われるプログラミング言語としては、現在 Perl (ぱーる) または PHP (ぴーえいちぴー) と呼ばれる ものがあります。 ただし、いくつかの条件を満たしていれば、プログラミング言語は何であっても構わないので、Perl や PHP 以外のプ ログラミング言語で記載された CGI も存在します。 2.1. CGI ファイルのファイル名 Perl で書かれた CGI ファイルは 拡張子が .cgi になっているのが通例です。 (例) mail.cgi PHP で書かれた CGI ファイルは 拡張子が .php になっているのが通例です。 (例) calendar.php 3. CGI 動作のしくみ HTML などで作られているウェブページに、ある工夫をすると、ウェブサーバーに CGI プログラムの起動を依頼す ることができます。 このとき、CGI プログラムにいろいろな値を渡すこともできます。(入力欄に入力された値など。) 入力してください CGI 起動! abc 送信 ウェブサーバー ページ閲覧者 呼び出された CGI プログラムは、その値を受けとり、何らかの処理をして、処理結果をウェブサーバーに伝えます。 ウェブサーバーは受け取った出力を、通常の HTML 形式のページと同様に表示させます。 (つまり CGI は処理結果をウェブページとして表示させるために、HTML タグを出力する必要があります。) -1- コンピュータ基礎実習(上級) 第 9 週 プログラム実行 計算結果 <html> <body> あなたの結果は XX です。 あなたの結果は<br> XX です。<br> ウェブサーバー ページ閲覧者 CGI 出力 4. プログラミング言語について CGI で使われる代表的なプログラミング言語 Perl と PHP について解説します。 4.1. Perl とは Perl (ぱーる) は古くから CGI で使われているプログラミング言語です。 他のプログラミング言語の優れた機能を取り入れて作られた言語で、Windows や UNIX などさまざまな環境で動 作します。 ただし記述方法に難解な部分があったり、日本語など全角文字の扱いに工夫がいるなど、癖がある言語です。 また、サーバー上に Perl の CGI ファイルをアップロードする際は、ファイルの[権限](パーミッション)を正しく設定す る必要があるなど、CGI を正しく動作させるためにやや注意が必要です。 しかし歴史が古いため、Perl で記述されたプログラムは広く普及しています。 4.2. PHP とは PHP(ぴーえいちぴー) は、Perl よりも後に作られたプログラミング言語です。 Web ページを作成することを目的に開発された言語で、比較的平易な文法でできているため初心者でも習得しやす く扱いやすいプログラミング言語です。 Web ページでの利用をサポートする機能も多く、全角文字などの扱いも簡単であるため CGI プログラムとして徐々 に使われはじめています。 Perl と PHP の比較 言語 Perl PHP 歴史 古い 新しい 言語の難しさ やや難解 平易 ファイルの取り扱い ファイルの[権限]に注意 簡単 5. CGI 使用上の注意 CGI ファイルを取り扱う際は、いくつか注意点があります。 5.1. Perl で記述された CGI Perl で記述された CGI を動作させるには、サーバー上で [権限(パーミッション)] を正しく設定する必要があります。 適切な権限の設定は CGI によって異なるので、CGI に付属の説明書などを確認する必要があります。 なお、PHP で書かれた CGI ファイルは、ファイル権限に関係なく動作することが多いので、 権限を設定する必要は ほとんどの場合 ありません。 5.2. CGI ファイルの編集 CGI ファイルは、設定を変更する際などに、ファイルの中身を修正する場合があります。 (例)メール送信先の修正・掲示板の背景色の修正・タイトルロゴの修正 など。 CGI ファイルを編集する際、日本語等の全角文字を記入するときは注意が必要です。 日本語には複数の [文字コード] が存在します。 代表的な日本語の文字コードには[JIS]、[Shift JIS]、[EUC]、[Unicode] といったものがあります。 そのため、同じ文字を表示するために、異なる文字コードで表現するということがありえます。 ※ 例えばメールの文面は JIS を使います。Windows 系では Shift JIS が使われることが多いです。 CGI では ShiftJIS Unicode EUC のどれかが使われることが多いです。 CGI を編集する際、誤った文字コードを書き込んでしまうと、プログラムが誤動作したり、ページ上に文字化けが発生した りすることがあります。 -2- コンピュータ基礎実習(上級) 第 9 週 そのため、文字コードを正しく取り扱える編集ツールを使う必要があります。 [サクラエディタ] は様々な文字コードに対応しているため、CGI ファイルの内容を編集する際は、[サクラエディタ]を使 うのがお勧めです。 ※ Windows に標準備わっている [メモ帳] は、文字コードを正しく処理できない場合があるので、 CGI ファイルの編集には使用しないようにしましょう。 6. 実際に CGI をサイト内に設置する それでは、実際に CGI プログラムをサーバーに設置してみましょう。 6.1. アクセスカウンタを設置する アクセスカウンタは、ページにアクセスした人の人数など情報を表示するものです。 CGI を配布しているサイトから CGI プログラムをダウンロードして手に入れ、インストール作業を行います。 CGI ファイルの配布元 レッツ PHP http://php.s3.to/ 6.1.1. インストール手順 1. レッツ PHP のページ右上にある[スクリプト一覧]をクリックし、ダウンロードページに移動します。 2. [カウンタ]コーナーの中にある[シンプルカウンタ]をクリックします。 3. [■ ダウンロード count.php] と書かれている count.php の部分を[右 クリック]→[対象をファイルに保存] count.php を好きなフォルダ内に保存します。 4. [■ 設置方法] 欄の説明を読んで、準備をします。 5. 空のファイル[count.txt]を作成します。 count.txt の中には、最初にカウ ンタに表示される人数を、半角数字で記入しておきます。 たとえば [1] などです。 数字の後、行末で改行しないようにします。 6. 本体(count.php)といっしょに、count.txt を public_html フォルダ内にアップロードします。 ([権限] の設定は、京産大の場合、不要です。) 7. HTML ファイルを一つ用意します。 (過去の課題で作成したファイルを流用するのがおすすめです。) 8. HTML ファイルの拡張子を、.php に変えておきます。 (例) index.html → index.php 9. 上記の .php ファイルを開き、カウンタを表示したい位置に <?php include("count.php"); ?> と記入します。 10. Internet Explorer で カウンタを設置したページの URL を入力し表示します。 カウンタを設置した位置に数字が表示されていたら成功です。 11. F5 キーを押すと数字が 1 ずつ増えて、アクセスカウンタが動作していることを確認します。 CGI 設置のコツ プログラム本体以外に、関連ファイルがある場合、全てアップロードすること。 サイトの説明や、CGI 付属の説明書をよく読む。 CGI を編集するときは [サクラエディタ]など CGI 編集に適したテキストエディタを使う。 うまく動作しないときは、[権限(パーミッション)]の設定を疑ってみる。 それでも動作しないならあきらめも肝心。別の CGI を探しましょう。 6.2. 掲示板を設置する 同様に、レッツ PHP で公開されている CGI の中から 掲示板 [p++BBS] を設置してみましょう。 6.2.1. 注意点 p++BBS は、作者がプログラムを記述する際に、いくつかの手続きを省略して記述しています。 -3- コンピュータ基礎実習(上級) 第 9 週 動作には支障がないのですが、産業大学の環境で実行すると手続きが省略されている旨の警告メッセージが表示され てしまいます。 そこで、プログラムを少し編集して、警告メッセージが出ないようにします。 6.2.2. インストール手順 1. レッツ PHP のページ右上にある[スクリプト一覧]をクリックし、ダウンロー ドページに移動します。 2. [掲示板]コーナーの中にある[p++BBS]をクリックします。 3. [■ サンプル、ダウンロード] と書かれているコーナーの右にある [ダウンロード]リンクをクリックし、 [デスクトップ]等に[名前をつけて保存]で保存します。 4. 圧縮フォルダとして[pppbbs4.zip]という名前のファイルが保存されます。 ダブルクリックするなどして[展開]すると、 [pppbbs4] という名前のフォルダが出来上がります。 5. フォルダ名がわかりにくいので、[右クリック]→[名前の変更]などでフォルダ名を [bbs]に変更します。 6. [bbs]フォルダの中見を確認します。 [pppbbs.php] という名前のファイルがあるはずです。これが、掲示板プログラムの本体です。 7. 警告メッセージが出ないように、pppbbs.php を修正します。 <?php サクラエディタでpppbbs.phpを開き、 error_reporting(0); if(phpversion()>="4.1.0"){ 2 行目に空行を作成し、以下のように追記します。 extract($_GET); error_reporting(0); * extract($_POST); 追記したら、[上書き保存]で保存します。 extract($_COOKIE); 8. [bbs]フォルダを[public_html]フォルダ内にアップロードしま extract($_SERVER); す。 } 9. Internet Explorer で 掲示板を設置したページの URL を入力し /***************************************** * p++BBS by ToR 表示します。 以下のような URL でアクセスできるはずです。 http://www.cc.kyoto-su.ac.jp/~g000000/bbs/pppbbs.php 改造箇所(2 行目) 10. 掲示板の画面が表示されれば成功です。 試しに記事を投稿してみましょう。 ある程度慣れたら CGI ファイルを改造してみましょう。 p++BBS は php ファイルの名前を変えても動作するので pppbbs.php を index.php という名前に変えれば、 ファイル名を省略して、http://www.cc.kyoto-su.ac.jp/~g000000/bbs/ でアクセスできるはずです。 また、CGI ファイル [pppbbs.php]をサクラエディタなどで開くと、ファイルの先頭に近い部分に掲示板タイト ルなどが記載されている場所があります。こちらを書き換えると、掲示板のタイトルなどが書き換わります。 多くの CGI ではファイルの先頭に近い部分に各種設定項目が集まっているので、 プログラム内の解説文を読みながら、 各自の好みで調整してみましょう。 6.3. 練習:チャット CGI を設置する 上記の掲示板の設置手順を参考に、 レッツ PHP ページの[スクリプト一覧] の中で、 [■チャット]コーナーにある[フレームチャット] を設置してみましょう。 この[フレームチャット]も掲示板と同様に、警告メッセージが表示されてしまうので、 error_reporting(0); を追記することで警告メッセージを消去します。 複数の .php ファイルがありますが、それぞれ追記してください。 追記する箇所は、<? または <?php と書かれている行の次の行に追記してください。 チャットルームが正しく動作すれば成功です。試してみましょう。 ※今回の授業は、提出課題はありません。 以上 * error_reporting(0);は PHP の命令文で、[全てのエラーメッセージを画面に表示しない] という意味があります。 -4-
© Copyright 2024 Paperzz