ここではウェブサイト上で動作するプログラム「CGI」の取り扱いについて解説します。
今回の演習は、やや挑戦的な内容になっています。そのため、オンライン授業の形式ではサポートが難しいところもあります。そのため今回の演習は全て達成できなくても良いとするやや甘めの評価で行います。
ウェブページ制作上の知識を身につける目的で、この演習内容を参考にしてください。
この演習は、ウェブサーバーを必要とします。
ウェブサーバーについては第3回 サーバーと色と画像の利用の冒頭部分に解説がありますので、事前に資料を確認し、ウェブサーバーが使用できる状態にしておいてください(WindowsであればMicroapacheが起動できる状態にしておいてください)。
まずは、CGIとは何かについて解説をしましょう。しばらくは基礎知識を身につけるための座学が続きます。
CGI (しーじーあい Common Gateway Interface)とは、ページ閲覧者によるアクセスに対応して、ウェブサーバー上でプログラムを起動する仕組みです。さらにそこから転じてプログラム自体のこともCGIと呼びます。
要するにCGIはサーバー上で動かせるプログラムということです。
通常のHTMLページの場合はWebサーバー上のHTMLファイルを単純に表示するだけですが、CGIを使うと、プログラムの実行結果を画面に表示するので、より柔軟なページを作成できます。
ここでは実際にCGIを動かす演習を行います。
まずはCGIを扱う上での基礎知識について解説をしましょう。
CGIには以下のような特徴があります。
この特徴を利用して、例えば以下のような様々なページを実現できます。
このように状況によって表示が変化する「動的コンテンツ」を実現できるのがCGIの特徴です。
CGIファイルの正体は、プログラミング言語が記述されたテキストファイルです。 単純なテキストファイルなので、テキストエディタアプリで簡単に編集ができます。
上の図は、簡単なCGIをテキストエディタで開いたものです。HTMLなどと書かれている内容は異なりますが、ある決まりで文字を書き込んでいるという点で、一緒であることが分かるかと思います。つまりプログラムと言っても単に文字を書き込んだだけのファイルであり、特別なファイルではないというわけです。😁
なのでもしCGIプログラムを作りたくなったら、テキストエディタさえあれば他に特殊なアプリケーションなどは不要です。プログラム作りは、元手いらずですぐに始められるのです。
CGIプログラムを実行するには、CGIファイルをウェブサーバー上にアップロードしておく必要があります。(関連ファイルがある場合は、あわせてアップロードが必要です。) その後、ブラウザからURLにアクセスすると、プログラムの動作結果が画面に表示されます。
注意してください。CGIプログラムはサーバー上で動作させるものであり、特別な準備をしない限り、通常のパソコン上では動作しません。つまり、あなたのパソコン上でCGIファイルを単にダブルクリックしても動作しません。
このようにCGIプログラムはサーバー上でプログラムとして処理され、動作します。あなたのパソコンにはその実行結果が表示されているだけなのです。処理するためにサーバーには負担がかかりますが、あなたのパソコンは結果を表示するだけなので、楽ちんです。(がんばれ、サーバー!)
しかし普通のパソコンでも特別な準備をして、プログラム実行環境を作り上げれば、CGIを動作させられるようにできます。なんと今回はこの方法にチャレンジします!
ウェブページを、ある決まりに従って記述するとウェブサーバーにCGIプログラムの起動を依頼することができます。
この時CGIプログラムには、さまざまな値を引き渡すことができます。
たとえばページの閲覧者が、入力欄に記入した値や、チェックボックス☑のクリック状況、どのボタンをクリックしたか、メニューのどの項目を選択したか などです。
例えばオンラインショップ Amaz○n の場合なら、あなたがページ上でクリックした商品と、入力された必要個数をCGIが受け取って、計算した料金を画面に表示し、「注文確定」ボタンが押されたら発送手続きをすすめる、という具合です。
こういった入力パーツを「フォーム(form)」と言い、HTMLで特別な書き方をすれば表現できます。残念ながらこの授業では、時間の都合でフォームは取り扱いませんが、興味のある人は「HTML フォーム」といったキーワードでウェブ検索して調べてみましょう。
ラジオボタン チェックボックス テキストボックス パスワード入力欄(仮)
CGIは、上記のようなさまざまなフォームに入力された値を受け取れるのです。
話を戻しましょう。
あなたがページ上にある各種フォームに書き込みを行い、ボタンをクリックすると、それに呼応してサーバー上のCGIが起動し、入力情報を受け取ります。
起動されたCGIプログラムは、入力値を受け取り、サーバー上でプログラム処理をし、その処理結果を画面に出力します。(なお出力結果を普通のウェブページのように見せるためには、CGIにHTML形式を出力させる必要があります)
つまりCGIは、閲覧者が入力した情報を受け取って処理し、HTMLを使ってウェブページを作り上げるプログラムと言えます。
普通のHTMLだけで作られたホームページは、閲覧者に一方的に情報を見せるだけですが、CGIは定められたプログラムを実行するだけでなく、閲覧者から情報を受け取れるのが最大の特徴で、インタラクティブ(双方向)な情報のやり取りができるという点が大きな特徴です。
CGIで使えるプログラミング言語は、いくつかの条件を満たしていれば割と自由に選べます。
昨今CGIによく使われるプログラミング言語としては、現在 Perl (ぱーる) または PHP (ぴーえいちぴー) と呼ばれるものがあります。
これらは違うプログラミング言語ですが、よく似た書き方をします。
例えるなら命令の文章を英語で書くか、フランス語で書くかというイメージで考えてもらうと分かると思います。
まれに Perl や PHP 以外のプログラミング言語で記載されたCGIも存在します。例えば Ruby や Python といった別のプログラミング言語が使用される場合もあります。プログラムにもいろいろな書き方があるのです。1)
とりあえず、CGIはいろいろな種類のプログラムを使って作れるというわけです。
ここではCGIで使われる代表的なプログラミング言語「Perl」と「PHP」について、ごく簡単に解説します。
Perl(ぱーる)は、古くからCGIなどで使われるプログラミング言語です。
他のプログラミング言語の優れた機能を取り入れて作られた言語で、Windows や UNIX などさまざまな環境で動作します。 古くから存在するため、Perlで記述されたプログラムは広く普及しています。
しかし、Perlで日本語を取り扱う際には少し工夫が必要であったり、サーバー上にPerl製のCGIファイルをアップロードする際は、ファイルの「権限」(パーミッション)を正しく設定する必要があったりするなど、正しくCGIを動作させるために特殊な操作が必要になります。
PHP(ぴーえいちぴー) は、Perlよりも後に作られたプログラミング言語です。
Webページを作成することを目的に開発された言語で、比較的平易な文法でできているため、初心者でも習得しやすく扱いやすいプログラミング言語です。 Webページでの利用をサポートする機能も多く、全角文字などの扱いも簡単であるためCGIプログラムとして徐々に使われはじめています。
しかし普及度ではPerlに劣るため、一部のCGIはPHPに対応しておらず、Perlなど他の言語で書かれている場合があります。
簡単に言うと、PerlとPHPはそれぞれ以下のような特徴を持っています。
言語 | Perl | PHP |
---|---|---|
歴史 | 古い | 新しい |
言語の難しさ | 難しい | 簡単 |
CGIファイルの取り扱い | 難しい | 簡単 |
CGIでできることはPerlとCGIであまり差はありません。どちらも一通りのアクションをプログラムできます。また、動作速度もあまり差はありません2)。
PHPは素直で扱いやすいです。初心者が学ぶのにもおすすめです。
しかし古くからある有名なCGIは、Perlで書かれていることもあります。
CGIファイルは Perl や PHP といったプログラミング言語で書かれたファイルであることは説明しましたが、ファイル名に一定のルールがあるので、ファイル名を見ただけで、どんなプログラミング言語で書かれたCGIファイルなのか、ある程度分かります。
書かれているプログラミング言語によって、動作させるための扱いが若干異なるので、見た目で区別できるようになっておきましょう。
.cgi
になっているのが通例です。mail.cgi
diary.cgi
など.php
になっているのが通例です。calendar.php
main_include.php
などこのようにファイル末尾の拡張子を見て、CGIの種類を判別できます。(もし拡張子が表示されていない場合は、拡張子を表示させる設定を行っておきましょう)
CGIをサーバーで動作させる場合に、Perl製CGIかPHP製CGIかによって、ファイルの扱いが若干異なります。詳しくは後述します。
CGIファイルは、設定を変更する際など、場合によってはファイルの中身を修正する必要があります。 しかし、日本語等の全角文字が混じっている時は注意が必要です。
日本語には複数の「文字コード」が存在します。文字コードとは、文字を表示するための規格のようなものです。代表的な日本語の文字コードには「JIS」、「Shift JIS」、「EUC」、「Unicode」といったものがあり、編集する際にアプリがこれらを正しく取り扱える必要があります。
アプリが文字コードの取り扱いを間違ってしまうと、文字化けが発生したり、プログラムが誤動作したりすることがあります。 そのため、文字コードを正しく取り扱える編集アプリ(テキストエディタ)を使う必要があります。
「サクラエディタ」はさまざまな日本語文字コードを正しく取り扱え、相互変換なども行えるので、CGIファイルの編集の際に便利です。(ただしWindows専用です)
サクラエディタ https://sakura-editor.github.io/
VSCodeも少々処理は重いですが、CGIファイルを正しく取り扱えるテキストエディタです。
VSCode https://azure.microsoft.com/ja-jp/products/visual-studio-code/
(WindowsでもMacでも使用できます)
一方、Windowsに標準でインストールされている「メモ帳」アプリは、文字コードを正しく処理できないため「文字化け」が発生する場合があるので、CGIファイルの編集にはあまり適していません。
CGIの編集をする場合はサクラエディタやVSCodeなどのテキストエディタアプリを使うのがおすすめです。
なお文字コードや文字化けに関して詳しく知りたい場合は、コンピュータ基礎実習サイトの補足資料コーナーにある「文字化けについて」の資料を参考にしてください。
CGIを編集するには、HTMLと同じように、CGIファイルをテキストエディタのウインドウにドラッグして入れるだけで開けます(もし他のテキストエディタを使用している場合も、だいたい同じです)。
たいていのテキストエディタで通用する方法なので、ぜひ活用してみてください。
CGIファイルを取り扱う際は、いくつか注意点があります。
Perlで記述されたCGIを動作させるには、多くの場合サーバー上で「権限(パーミッション)」を正しく設定する必要があります。適切な権限の設定はCGIによって異なるので、CGIに付属の説明書などを確認する必要があります。なお一般的なアップロード用アプリには、サーバー上で権限を設定する機能も付属しています。通常はアップロードした後に、そのまま権限の設定をする流れになるでしょう3)。
この授業では時間の関係上「権限」の詳細については触れません。興味のある人は「CGI 権限 とは」といったキーワードでウェブ検索して調べてみましょう。
一方、PHPで記述されたCGIファイルは、ほとんどの場合「権限」の設定をしなくても動作します。サーバーにアップロードするだけで問題なく動き出すので簡単です。
つまり、Perl製CGIを動作させるには特殊な権限設定の手続きが必要ですが、PHP製CGIであればその必要が無いので扱いやすいということです。
今回は入門編として、簡単なPHPの取り扱いを実践します。
それでは、基礎知識を踏まえた上で、いよいよ作業の時間です。
実際に CGI プログラムをサーバーに設置してみましょう。今回は取り扱いが簡単なPHP製のCGIを試します。
ウェブサーバーが稼働している状態にしてください。
くわしい設定方法は第3回 サーバーと色と画像の利用の記事を参考にしてください。
WindowsであればMicroapacheを実行し、Macであれば所定のコマンドを実行して、サーバーを稼働状態にします。
Microapacheであれば、htdocs
フォルダ内が作業フォルダとなります。これから行う編集作業のためにhtdocs
フォルダを開いている状態にしましょう。
サーバーの準備はできましたか? それでは実際にCGIファイルを実行させてみましょう。
まず簡単なCGIとして「アクセスカウンタ」CGIを設置します。
アクセスカウンタは、ページが表示された回数をカウントするためのシンプルなプログラムです。 通常は、CGIを配布しているサイトなどからCGIプログラムをダウンロードして手に入れ、インストール作業を行いますが、ここでは簡単にダウンロードできるようにします。
以下の手順でインストールを行ってください。
count.php
と count.txt
という2つのファイルを取り出します。count.php
と count.txt
を両方ともアップロードします。Microapacheを使用している場合は「htdocs」フォルダ内にファイルを2つともコピーします。count.php
にアクセスします。F5
キーを1回押す)と、数字が1ずつ増えていきます。
このように、count.php
というCGIが、ページが表示された回数を数えて、サーバー上で記憶し、そしてその数字を画面に表示しているのです。
このCGIは、count.php
と同じ場所にある count.txt
にアクセス数を記録する単純な仕組みになっています。例えばcount.txt
の中身をテキストエディタで確認すると、現在のアクセス数が「3」のように数字で書かれている様子がわかります。ちなみに数字を書き換えればアクセスした人数を改変できるので、テキストエディタで編集して実際よりも多い数字に水増ししたりもできるでしょう。😵
CGIにアクセスすると、ブラウザに以下のようなエラーが出る場合があります。
これは、Microapacheを設置した場所が良くない場合に発生するエラーです。
Microapacheの仕様で、日本語など全角文字を含むフォルダ内にMicroapacheを配置すると、CGIが正しく動作しません。 Microapacheより上位の階層のどこかに全角文字が含まれているだけでダメです。上の例では「てすと」というフォルダの中に収めたせいでエラーが発生しました。たとえば大学の環境では「デスクトップ」なども全角のフォルダ名を含んでいるので、正しく動作しないことでしょう。
そのため、Microapacheは、USBメモリの最上位階層(D:\)などにコピーして動作させるのがおすすめです。
単にアクセス回数の数値が表示されるだけのCGIプログラムでは、役に立たないと思うかもしれません。
はっきりいって地味ですし……🤣
しかし少し設定すれば、CGIを好きなページに読み込ませて動作させられます。あなたが作成したHTMLページ内に、アクセスカウンタの数字を表示させることもできるわけです。さまざまなページでアクセス回数を表示できるので、応用の幅が広がります。
ここでは、index.html
の中にアクセス数を表示させるものとします。
index.html
は、今までの課題で作成したjikosyokai.html
をコピーして作ると良いでしょう(Ctrl
+C
→ Ctrl
+V
)。
あるいは、基本HTMLページに掲載されているindex.html
をダウンロードして、新たに作ってもOKです。
以下の手順で作業して、index.html
内でcount.php
を動かしてみましょう。
htdocs
フォルダ内に、カウンターを表示させたいページindex.html
とcount.php
とcount.txt
が配置されていることを確認します。htdocs
フォルダ内の様子index.html
のファイル名を index.php
に変更します。「右クリック」→「名前の変更」で名前変更できます。Macの場合はindex.html
を選択し、Return
キーを押せば名前変更できます。拡張子を.php
に変えれば、サーバーはそのファイルでPHPプログラムを作動できるようになります。index.php
の内容を編集するために、テキストエディタで開きます。(中身はHTMLで書かれたページのはずです)あなたは <?php include("count.php"); ?> 人目の訪問者です。
」と記入します4)。書き間違いを防ぐために、コピーと貼り付けを使って入力するのがおすすめです。<h1>自己紹介</h1> あなたは <?php include("count.php"); ?> 人目の訪問者です。<br> <p>はじめまして、清水です。滋賀県から通っています……
「あなたは~人目の訪問者です」のメッセージ部分は好きな言葉に変えても構いません。また、書き込んだ部分以外は通常のHTMLと全く同じように画面に表示されます。
index.php
にアクセスします。Microapacheの場合、index.php
というファイル名はアドレスを書く際に省略できるので、http://localhost:8800/ にアクセスします。F5
キーを押して画面を更新(リロード)するたびに数字が1ずつ増え、「6人目」「7人目」のように変化するはずです。アクセスカウンタが機能していることがわかります。
これで、index.php
のページ内でアクセスカウンタを動作させることができました。
今回の例では、include()
というPHPの命令を使って、count.php
を丸ごと読み込んで動作させる仕組みになっています。
なお index.php
の部分を他のファイルに置き換えれば、同様に別のページでもアクセスカウンターが動作します。
アクセス人数が表示されるとはいえ、いささか地味な実行結果ですね。😂
試しに、もっと違う情報も表示してみましょう。
たとえば、現在の日時を表示させてみます。
index.php
をテキストエディタで開いている状態にします。index.php
にプログラムを追記します。Enter
キーを押すなどして空行をいくつか挿入し、「ここから」~「ここまで」の範囲に書かれたプログラムを追記し、保存してください。<h1>自己紹介</h1> あなたは <?php include("count.php"); ?> 人目の訪問者です。<br> <!-- ↓↓↓ ここから ↓↓↓ --> <?php date_default_timezone_set('Asia/Tokyo'); // タイムゾーンを日本標準時に設定 $t=time(); $h=(int)date('H',$t); $mes=''; // 現在時刻を取得 echo '<p>現在日時は、'.date('Y/m/d H:i',$t).' です。<br>'; // 日時を表示 // 時間に応じて変わるメッセージを準備 if($h < 6){ $mes='こんばんは。こんな遅い時間までお疲れさまです。'; } // 0~5時 else if($h >=18){ $mes='こんばんは。遅くまでお疲れさまです。'; } // 18時以降 else if($h < 12){ $mes='おはようございます。今日も一日頑張りましょう。'; } // 6~11時 else{ $mes='こんにちは。午後の優雅なひとときをお過ごしください。'; } // 12~17時 echo $mes."</p>\r\n"; // メッセージを画面に表示 ?> <!-- ↑↑↑ ここまで ↑↑↑ --> <p>はじめまして、清水です。滋賀県から通っています……
index.php
にアクセスし、画面を更新(リロード)すると、ページ上に現在時刻とメッセージが表示されるようになります。
時刻はページを更新(リロード)したときの時間が表示されます。
また、時間帯に応じて「こんばんは」「こんにちは」のようにメッセージが変化するでしょう。
このようにCGIを使えば、状況に応じて異なる表示を行えるわけです。
まとめると、PHPで書かれたプログラムを動作させるには、以下の設定を行えば良いでしょう。
.php
にしておく必要があります。<?php
から ?>
までの間に書いた内容がプログラムとして解釈され、実行されます。htdocs
フォルダの中です。http://localhost:8800/ファイル名.php
のようなアドレスで目的のPHPファイルにアクセスするとプログラムが動作します。他にもさまざまなCGIがあります。余裕があれば試してみましょう。
掲示板CGI(p++BBS)の修正版 pppbbs4_2018_1119.zip
カレンダーCGI calendar_2019_0604.zip
同様に上のリンクからダウンロードし、圧縮フォルダを展開後、サーバーにアップロードし、アクセスしてみてください。
詳しくは以下の手順で作業を行うと良いでしょう。
このCGIは「p++BBS」と名付けられており、好きなテキストを入力して、サーバー上に掲載できる、いわゆる掲示板を実現するためのものです。やることリストのような個人的メモなどにも使えます。
ブログやニュースサイトなどのコメント欄にも、このCGIと似た仕組みが使われています。
bbs
フォルダが入っています。このbbs
フォルダをhtdocs
フォルダ内に入れてください。使い方は簡単で、入力欄に好きな名前とメッセージを入力してから「submit」ボタンを押せば、掲示板に文字が書き込まれます。各投稿に返信もできます。
pppbbs.php
ファイルを編集すれば設定を変更できます。余裕があればpppbbs.php
をテキストエディタで編集し、設定を変更してみましょう。pppbbs.php
をindex.php
という名前に変えれば、ファイル名を省略して、http://localhost:8800/bbs/ でアクセスできるようになります。より簡単にアクセスできるようになるでしょう。参考にしてください。この項の内容は参考資料です。
掲示板CGI(p++BBS)は、レッツPHPで公開されているCGIですが、作者がプログラムを記述する際に、いくつかの手続きを省略して記述しています。
プログラム自体は間違っていないのですが、チェックが厳格なウェブサーバーでこのCGIの実行をすると、プログラムに必要な手続きが省略されている旨の警告メッセージが表示されてしまいます。 そこで、プログラムを少し修正して、警告メッセージが出ないようにしています。
このページに掲載されている「掲示板CGI(p++BBS)修正版」を使うのであれば、下に書いてあるような修正作業はあらかじめ行ってあるので不要ですが、参考までにどのような修正作業をしたかを記載しておきます。
みなさんがもし自力でレッツPHPからCGIをダウンロードして動作させる場合に、ウェブサーバーがエラーを出すようであれば以下を参考に修正を行うと良いでしょう。
error_reporting(0); header("Content-Type: text/html;charset=Shift_JIS");
参考までに上記の設定は、「エラーを画面に表示させない」「CGIに使用している文字コードはShift JIS形式である(=画面上での文字化けを防ぐ)」という意味合いのプログラムです。
レッツPHPで公開されているCGIをチェックが厳格な環境で動作させるためには、おおむねこの修正を行えば良いので、参考にしてください。
上記で紹介したもう一つのCGI「カレンダーCGI」について解説をします。
以下のリンクからダウンロードしてCGIを入手できます。
カレンダーCGI calendar_2019_0604.zip
calendar
フォルダが入っています。このcalendar
フォルダをhtdocs
フォルダ内に入れてください。カレンダーCGIは、清水が自作したスケジュール管理用のPHP製CGIです。以下のような特徴があります。
とにかく簡単にすばやく予定を編集することを目標に作られています。
予定を書き込むには、日付をクリックし、開いた画面に好きな内容を書き込んで「OK」ボタンを押すだけです。
予定を削除したい場合は、予定の内容を全て消去し「OK」ボタンを押します。
各ボタンの機能などは、マウスカーソルをボタンに重ねるとヘルプメッセージが出現するので、そちらで確認してください。
設定ファイルを直接編集することで、カレンダーCGIのいくつかの設定を変えられます。設定の記述方法など詳細は、各設定ファイル内の説明コメントを確認してください。
calendar.ini
holiday.dat
holiday.dat
内に書かれたコメントを参照してください。schedule.dat
このようにCGIを使うと、掲示板や予定表のような動的コンテンツを作ることができます。
CGIプログラムを作ることは難しくとも、ネット上で開されているCGIを設置するのであれば、プログラムの知識が無くとも比較的簡単に行えるかと思います。
興味がある場合は、さまざまなCGIにチャレンジしてみましょう。(紹介したカレンダーCGIなどは割と便利かと思いますので、もしよければ日常で使用してもらってもOKです)
今回の演習は、やや挑戦的な内容でした。
ですので今回の課題は「締め切りまでにmoodleで『YES』のスイッチをクリックして出席を確認する」という簡易的なものにします。
回答期限は、本日いっぱいまでとします。期限が短いので注意してください。
学習支援システム moodle
https://cclms.kyoto-su.ac.jp/
以上で今回の作業は終了です。ウェブページ制作上の知識の一つとして役立てて頂ければ幸いです。おつかれさまでした。
もし京都産業大学のサーバー上にウェブページを作ってみたい場合は、以下の資料が参考になるでしょう。
動的コンテンツ利用の手引き(京都産業大学)
PHPに興味がわきましたか? もしPHPでプログラミングをしてみたい場合は、解説サイトを検索して紹介されているコードを真似してみたり、初心者向けの解説本を書店で買い求めると良いでしょう。PHP製のCGIを配布しているサイトも参考になると思います。
PHPの詳しい書き方については、公式が提供するオンラインマニュアルがよくできているので、参考にすると良いでしょう。具体的なサンプルコードなども多数掲載されていて、とても分かりやすいです。
公式PHPマニュアル
次回は、ホームページをデザインする最新の規格「CSS(スタイルシート)」について解説します。
あなたのページのデザインをよりパワーアップさせます!
少し内容が多いかと思いますので、できれば事前に次回の資料に目を通して予習しておくことをおすすめします……😂
資料は毎週だいたい月曜日に更新です!
include()
は、現在の位置に別のファイルを読み込んで実行させるという意味の命令です。ここではcount.php
を読み込ませています。