jyokyu2021:j09

第9回 CGIの利用

戻る

ここではウェブサイト上で動作するプログラム「CGI」の取り扱いについて解説します。

今回の演習は、やや挑戦的な内容になっています。そのため、オンライン授業の形式ではサポートが難しいところもあります。そのため今回の演習は全て達成できなくても良いとするやや甘めの評価で行います。
ウェブページ制作上の知識を身につける目的で、この演習内容を参考にしてください。

この演習は、ウェブサーバーを必要とします。

ウェブサーバーについては第3回 サーバーと色と画像の利用の冒頭部分に解説がありますので、事前に資料を確認し、ウェブサーバーが使用できる状態にしておいてください(WindowsであればMicroapacheが起動できる状態にしておいてください)。

まずは、CGIとは何かについて解説をしましょう。しばらくは基礎知識を身につけるための座学が続きます。

CGIとは

CGI (しーじーあい Common Gateway Interface)とは、ページ閲覧者によるアクセスに対応して、ウェブサーバー上でプログラムを起動する仕組みです。さらにそこから転じてプログラム自体のこともCGIと呼びます。

要するにCGIはサーバー上で動かせるプログラムということです。

通常のHTMLページの場合はWebサーバー上のHTMLファイルを単純に表示するだけですが、CGIを使うと、プログラムの実行結果を画面に表示するので、より柔軟なページを作成できます。

ここでは実際にCGIを動かす演習を行います。

CGIの用途

まずはCGIを扱う上での基礎知識について解説をしましょう。

CGIには以下のような特徴があります。j09_01.jpg

  • サイト上に入力された情報をサーバーに記録しておけます。
  • プログラム処理を行って、動的に変化するページを作れます。

この特徴を利用して、例えば以下のような様々なページを実現できます。

  • アクセスカウンタ:サーバーに記録した訪問回数を表示する処理を行います。
  • 掲示板やブログ:利用者の書き込み記事を記録し、ページに表示する処理を行います。
  • ゲーム:利用者のキー操作などを元にゲーム画面表示、スコアなどを記録する処理を行います。
  • ショッピングカート:入力された情報を記憶、金額計算、メール送信、発注情報の管理などを行います。

このように状況によって表示が変化する「動的コンテンツ」を実現できるのがCGIの特徴です。

CGIファイルについて

CGIファイルの正体は、プログラミング言語が記述されたテキストファイルです。 単純なテキストファイルなので、テキストエディタアプリで簡単に編集ができます。

j09_19.jpg

上の図は、簡単なCGIをテキストエディタで開いたものです。HTMLなどと書かれている内容は異なりますが、ある決まりで文字を書き込んでいるという点で、一緒であることが分かるかと思います。つまりプログラムと言っても単に文字を書き込んだだけのファイルであり、特別なファイルではないというわけです。😁

なのでもしCGIプログラムを作りたくなったら、テキストエディタさえあれば他に特殊なアプリケーションなどは不要です。プログラム作りは、元手いらずですぐに始められるのです。

CGIを動かす

CGIプログラムを実行するには、CGIファイルウェブサーバー上にアップロードしておく必要があります。(関連ファイルがある場合は、あわせてアップロードが必要です。) その後、ブラウザからURLにアクセスすると、プログラムの動作結果が画面に表示されます。

j09_02.jpg

注意してください。CGIプログラムはサーバー上で動作させるものであり、特別な準備をしない限り、通常のパソコン上では動作しません。つまり、あなたのパソコン上でCGIファイルを単にダブルクリックしても動作しません。

このようにCGIプログラムはサーバー上でプログラムとして処理され、動作します。あなたのパソコンにはその実行結果が表示されているだけなのです。処理するためにサーバーには負担がかかりますが、あなたのパソコンは結果を表示するだけなので、楽ちんです。(がんばれ、サーバー!)

しかし普通のパソコンでも特別な準備をして、プログラム実行環境を作り上げれば、CGIを動作させられるようにできます。なんと今回はこの方法にチャレンジします!

CGIとデータのやりとり

ウェブページを、ある決まりに従って記述するとウェブサーバーにCGIプログラムの起動を依頼することができます。

この時CGIプログラムには、さまざまな値を引き渡すことができます。

たとえばページの閲覧者が、入力欄に記入した値や、チェックボックス☑のクリック状況、どのボタンをクリックしたか、メニューのどの項目を選択したか などです。

例えばオンラインショップ Amaz○n の場合なら、あなたがページ上でクリックした商品と、入力された必要個数をCGIが受け取って、計算した料金を画面に表示し、「注文確定」ボタンが押されたら発送手続きをすすめる、という具合です。

こういった入力パーツを「フォーム(form)」と言い、HTMLで特別な書き方をすれば表現できます。残念ながらこの授業では、時間の都合でフォームは取り扱いませんが、興味のある人は「HTML フォーム」といったキーワードでウェブ検索して調べてみましょう

j09_04.jpg


ラジオボタン   
チェックボックス   
テキストボックス 
パスワード入力欄(仮) 
さまざまな「フォーム」の例
(ここではサンプルなので、入力しても何も起こりません)

CGIは、上記のようなさまざまなフォームに入力された値を受け取れるのです。

話を戻しましょう。

あなたがページ上にある各種フォームに書き込みを行い、ボタンをクリックすると、それに呼応してサーバー上のCGIが起動し、入力情報を受け取ります。

起動されたCGIプログラムは、入力値を受け取り、サーバー上でプログラム処理をし、その処理結果を画面に出力します。(なお出力結果を普通のウェブページのように見せるためには、CGIにHTML形式を出力させる必要があります)

j09_05.jpg

つまりCGIは、閲覧者が入力した情報を受け取って処理し、HTMLを使ってウェブページを作り上げるプログラムと言えます。

普通のHTMLだけで作られたホームページは、閲覧者に一方的に情報を見せるだけですが、CGIは定められたプログラムを実行するだけでなく、閲覧者から情報を受け取れるのが最大の特徴で、インタラクティブ(双方向)な情報のやり取りができるという点が大きな特徴です。

プログラミング言語

CGIで使えるプログラミング言語は、いくつかの条件を満たしていれば割と自由に選べます。

昨今CGIによく使われるプログラミング言語としては、現在 Perl (ぱーる) または PHP (ぴーえいちぴー) と呼ばれるものがあります。

これらは違うプログラミング言語ですが、よく似た書き方をします。

例えるなら命令の文章を英語で書くか、フランス語で書くかというイメージで考えてもらうと分かると思います。

まれに Perl や PHP 以外のプログラミング言語で記載されたCGIも存在します。例えば Ruby や Python といった別のプログラミング言語が使用される場合もあります。プログラムにもいろいろな書き方があるのです。1)

とりあえず、CGIはいろいろな種類のプログラムを使って作れるというわけです。

ここではCGIで使われる代表的なプログラミング言語「Perl」と「PHP」について、ごく簡単に解説します。

Perlとは

Perl(ぱーる)は、古くからCGIなどで使われるプログラミング言語です。

他のプログラミング言語の優れた機能を取り入れて作られた言語で、Windows や UNIX などさまざまな環境で動作します。 古くから存在するため、Perlで記述されたプログラムは広く普及しています。

しかし、Perlで日本語を取り扱う際には少し工夫が必要であったり、サーバー上にPerl製のCGIファイルをアップロードする際は、ファイルの「権限」(パーミッション)を正しく設定する必要があったりするなど、正しくCGIを動作させるために特殊な操作が必要になります。

PHPとは

PHP(ぴーえいちぴー) は、Perlよりも後に作られたプログラミング言語です。

Webページを作成することを目的に開発された言語で、比較的平易な文法でできているため、初心者でも習得しやすく扱いやすいプログラミング言語です。 Webページでの利用をサポートする機能も多く、全角文字などの扱いも簡単であるためCGIプログラムとして徐々に使われはじめています。

しかし普及度ではPerlに劣るため、一部のCGIはPHPに対応しておらず、Perlなど他の言語で書かれている場合があります。

PerlとPHPの比較

簡単に言うと、PerlとPHPはそれぞれ以下のような特徴を持っています。

言語 Perl PHP
歴史 古い 新しい
言語の難しさ 難しい 簡単
CGIファイルの取り扱い 難しい 簡単

CGIでできることはPerlとCGIであまり差はありません。どちらも一通りのアクションをプログラムできます。また、動作速度もあまり差はありません2)

PHPは素直で扱いやすいです。初心者が学ぶのにもおすすめです。

しかし古くからある有名なCGIは、Perlで書かれていることもあります。

CGIファイルの見た目

CGIファイルは Perl や PHP といったプログラミング言語で書かれたファイルであることは説明しましたが、ファイル名に一定のルールがあるので、ファイル名を見ただけで、どんなプログラミング言語で書かれたCGIファイルなのか、ある程度分かります。j09_03.jpg

書かれているプログラミング言語によって、動作させるための扱いが若干異なるので、見た目で区別できるようになっておきましょう。

  • Perlで書かれたCGIファイルは 拡張子が .cgi になっているのが通例です。
    例:mail.cgi diary.cgi など
  • PHPで書かれたCGIファイルは 拡張子が .php になっているのが通例です。
    例:calendar.php main_include.php など

このようにファイル末尾の拡張子を見て、CGIの種類を判別できます。(もし拡張子が表示されていない場合は、拡張子を表示させる設定を行っておきましょう)

CGIをサーバーで動作させる場合に、Perl製CGIかPHP製CGIかによって、ファイルの扱いが若干異なります。詳しくは後述します。

編集作業

CGIファイルは、設定を変更する際など、場合によってはファイルの中身を修正する必要があります。 しかし、日本語等の全角文字が混じっている時は注意が必要です。

日本語には複数の「文字コード」が存在します。文字コードとは、文字を表示するための規格のようなものです。代表的な日本語の文字コードには「JIS」、「Shift JIS」、「EUC」、「Unicode」といったものがあり、編集する際にアプリがこれらを正しく取り扱える必要があります。

アプリが文字コードの取り扱いを間違ってしまうと、文字化けが発生したり、プログラムが誤動作したりすることがあります。 そのため、文字コードを正しく取り扱える編集アプリ(テキストエディタ)を使う必要があります。

さまざまなテキストエディタ

j09_06.jpg「サクラエディタ」はさまざまな日本語文字コードを正しく取り扱え、相互変換なども行えるので、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ファイルをテキストエディタのウインドウにドラッグして入れるだけで開けます(もし他のテキストエディタを使用している場合も、だいたい同じです)。

j02_02b.jpg

たいていのテキストエディタで通用する方法なので、ぜひ活用してみてください。

CGI使用上の注意

CGIファイルを取り扱う際は、いくつか注意点があります。

「権限」の設定

Perlで記述されたCGIを動作させるには、多くの場合サーバー上で「権限(パーミッション)」を正しく設定する必要があります。適切な権限の設定はCGIによって異なるので、CGIに付属の説明書などを確認する必要があります。なお一般的なアップロード用アプリには、サーバー上で権限を設定する機能も付属しています。通常はアップロードした後に、そのまま権限の設定をする流れになるでしょう3)

この授業では時間の関係上「権限」の詳細については触れません。興味のある人は「CGI 権限 とは」といったキーワードでウェブ検索して調べてみましょう。

一方、PHPで記述されたCGIファイルは、ほとんどの場合「権限」の設定をしなくても動作します。サーバーにアップロードするだけで問題なく動き出すので簡単です。

つまり、Perl製CGIを動作させるには特殊な権限設定の手続きが必要ですが、PHP製CGIであればその必要が無いので扱いやすいということです。

今回は入門編として、簡単なPHPの取り扱いを実践します。

実際にCGIをサイト内に設置する

それでは、基礎知識を踏まえた上で、いよいよ作業の時間です。

実際に CGI プログラムをサーバーに設置してみましょう。今回は取り扱いが簡単なPHP製のCGIを試します。

サーバーを準備する

ウェブサーバーが稼働している状態にしてください。
くわしい設定方法は第3回 サーバーと色と画像の利用の記事を参考にしてください。

WindowsであればMicroapacheを実行し、Macであれば所定のコマンドを実行して、サーバーを稼働状態にします。

Microapacheであれば、htdocsフォルダ内が作業フォルダとなります。これから行う編集作業のためにhtdocsフォルダを開いている状態にしましょう。

アクセスカウンタを設置する

サーバーの準備はできましたか? それでは実際にCGIファイルを実行させてみましょう。

まず簡単なCGIとして「アクセスカウンタ」CGIを設置します。

アクセスカウンタは、ページが表示された回数をカウントするためのシンプルなプログラムです。 通常は、CGIを配布しているサイトなどからCGIプログラムをダウンロードして手に入れ、インストール作業を行いますが、ここでは簡単にダウンロードできるようにします。

以下の手順でインストールを行ってください。

インストール手順

  1. ここからCGIファイルをダウンロードします。
    アクセスカウンタ count.zip
    (このアクセスカウンタは、CGI配布サイトレッツPHPで配布されているCGIを元に、一部修正を施したものです)
  2. 圧縮フォルダの中身を展開して、count.phpcount.txt という2つのファイルを取り出します。
  3. サーバーの公開用フォルダ内に、count.phpcount.txt を両方ともアップロードします。Microapacheを使用している場合は「htdocs」フォルダ内にファイルを2つともコピーします。
  4. ブラウザを起動し、count.php にアクセスします。
    Microapacheの場合は http://localhost:8800/count.php にアクセスします。
    画面上に「1」と表示されれば成功です。ページが表示された回数は「1回」というわけです。
  5. 画面を更新する(キーボードのF5キーを1回押す)と、数字が1ずつ増えていきます。

このように、count.phpというCGIが、ページが表示された回数を数えて、サーバー上で記憶し、そしてその数字を画面に表示しているのです。

このCGIは、count.php と同じ場所にある count.txt にアクセス数を記録する単純な仕組みになっています。例えばcount.txtの中身をテキストエディタで確認すると、現在のアクセス数が「3」のように数字で書かれている様子がわかります。ちなみに数字を書き換えればアクセスした人数を改変できるので、テキストエディタで編集して実際よりも多い数字に水増ししたりもできるでしょう。😵

MicroapacheでPHPが動かない場合

CGIにアクセスすると、ブラウザに以下のようなエラーが出る場合があります。

Warning: Unknown: failed to open stream: No such file or directory in Unknown on line 0

Fatal error: Unknown: Failed opening required 'E:/てすと/htdocs/count.php' (include_path='.;C:\php\pear') in Unknown on line 0

これは、Microapacheを設置した場所が良くない場合に発生するエラーです。

Microapacheの仕様で、日本語など全角文字を含むフォルダ内にMicroapacheを配置すると、CGIが正しく動作しません。 Microapacheより上位の階層のどこかに全角文字が含まれているだけでダメです。上の例では「てすと」というフォルダの中に収めたせいでエラーが発生しました。たとえば大学の環境では「デスクトップ」なども全角のフォルダ名を含んでいるので、正しく動作しないことでしょう。

そのため、Microapacheは、USBメモリの最上位階層(D:\)などにコピーして動作させるのがおすすめです。

他のページでもCGIを使う

単にアクセス回数の数値が表示されるだけのCGIプログラムでは、役に立たないと思うかもしれません。

はっきりいって地味ですし……🤣

しかし少し設定すれば、CGIを好きなページに読み込ませて動作させられます。あなたが作成したHTMLページ内に、アクセスカウンタの数字を表示させることもできるわけです。さまざまなページでアクセス回数を表示できるので、応用の幅が広がります。

ここでは、index.htmlの中にアクセス数を表示させるものとします。

index.htmlは、今までの課題で作成したjikosyokai.htmlをコピーして作ると良いでしょう(Ctrl+CCtrl+V)。

あるいは、基本HTMLページに掲載されているindex.htmlをダウンロードして、新たに作ってもOKです。

以下の手順で作業して、index.html内でcount.phpを動かしてみましょう。

  1. htdocsフォルダ内に、カウンターを表示させたいページindex.htmlcount.phpcount.txtが配置されていることを確認します。
    j09_14.jpg
    htdocsフォルダ内の様子
  2. ページ内でPHPプログラムを動作させるには、そのファイルの拡張子が「.php」である必要があります。
    そこでindex.html のファイル名を index.php に変更します。「右クリック」→「名前の変更」で名前変更できます。Macの場合はindex.htmlを選択し、Returnキーを押せば名前変更できます。拡張子を.phpに変えれば、サーバーはそのファイルでPHPプログラムを作動できるようになります。
    j09_15.jpg
    indexの拡張子を変更
  3. index.phpの内容を編集するために、テキストエディタで開きます。(中身はHTMLで書かれたページのはずです)
    そしてページ上の好きな位置に「あなたは <?php include("count.php"); ?> 人目の訪問者です。」と記入します4)。書き間違いを防ぐために、コピーと貼り付けを使って入力するのがおすすめです。
    <h1>自己紹介</h1>
    あなたは <?php include("count.php"); ?> 人目の訪問者です。<br>
     
    <p>はじめまして、清水です。滋賀県から通っています……

    「あなたは~人目の訪問者です」のメッセージ部分は好きな言葉に変えても構いません。また、書き込んだ部分以外は通常のHTMLと全く同じように画面に表示されます。

  4. ブラウザからindex.phpにアクセスします。Microapacheの場合、index.phpというファイル名はアドレスを書く際に省略できるので、http://localhost:8800/ にアクセスします。
  5. メッセージを記入した場所に「あなたは5人目の訪問者です。」などと表示されていたら成功です。
  6. F5キーを押して画面を更新(リロード)するたびに数字が1ずつ増え、「6人目」「7人目」のように変化するはずです。アクセスカウンタが機能していることがわかります。

これで、index.phpのページ内でアクセスカウンタを動作させることができました。

今回の例では、include()というPHPの命令を使って、count.phpを丸ごと読み込んで動作させる仕組みになっています。

なお index.phpの部分を他のファイルに置き換えれば、同様に別のページでもアクセスカウンターが動作します。

さらなる改造

アクセス人数が表示されるとはいえ、いささか地味な実行結果ですね。😂
試しに、もっと違う情報も表示してみましょう。

たとえば、現在の日時を表示させてみます。

  1. index.phpをテキストエディタで開いている状態にします。
  2. 以下のように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>はじめまして、清水です。滋賀県から通っています……
  3. 再びブラウザからindex.phpにアクセスし、画面を更新(リロード)すると、ページ上に現在時刻とメッセージが表示されるようになります。
実行例

時刻はページを更新(リロード)したときの時間が表示されます。
また、時間帯に応じて「こんばんは」「こんにちは」のようにメッセージが変化するでしょう。

このようにCGIを使えば、状況に応じて異なる表示を行えるわけです。

CGIの動かし方

まとめると、PHPで書かれたプログラムを動作させるには、以下の設定を行えば良いでしょう。

  • プログラムを動作させるファイルの拡張子は .php にしておく必要があります。
  • PHPファイルの内容を編集するには、テキストエディタで開けばOKです(HTMLファイルと同じ扱い)。
  • HTMLが書き込まれている場合は、通常通りブラウザに表示されます。
  • <?php から ?> までの間に書いた内容がプログラムとして解釈され、実行されます。
  • プログラムの実行結果を確認するには、サーバー(Microapacheなど)を経由してアクセスする必要があります。
    • 必要なファイルはすべてサーバー内の所定の場所に集めておきましょう。Microapacheならhtdocsフォルダの中です。
    • PHPファイルを単にダブルクリックしてもプログラムは動作しません。
    • ブラウザから http://localhost:8800/ファイル名.php のようなアドレスで目的のPHPファイルにアクセスするとプログラムが動作します。

CGI設置のコツ

  • プログラム本体以外に、関連ファイルがある場合、全てアップロードしましょう。
  • 設置方法や取り扱い方は、サイトの説明文などをよく読みましょう。
  • CGIを編集するときはCGI編集に適したテキストエディタを使いましょう。
  • それでも動作しないならあきらめも肝心。別のCGIを探しましょう。

他のCGIも設置する

他にもさまざまなCGIがあります。余裕があれば試してみましょう。

掲示板CGI(p++BBS)の修正版 pppbbs4_2018_1119.zip
j09_12.jpg

カレンダーCGI calendar_2019_0604.zip
j09_13.jpg

同様に上のリンクからダウンロードし、圧縮フォルダを展開後、サーバーにアップロードし、アクセスしてみてください。
詳しくは以下の手順で作業を行うと良いでしょう。

掲示板CGIについて

このCGIは「p++BBS」と名付けられており、好きなテキストを入力して、サーバー上に掲載できる、いわゆる掲示板を実現するためのものです。やることリストのような個人的メモなどにも使えます。

ブログやニュースサイトなどのコメント欄にも、このCGIと似た仕組みが使われています。

  1. ダウンロードした圧縮フォルダを展開すると、bbsフォルダが入っています。このbbsフォルダをhtdocsフォルダ内に入れてください。
  2. CGIの本体はbbsフォルダ内のpppbbs.phpです。よって http://localhost:8800/bbs/pppbbs.php でアクセスできます。

使い方は簡単で、入力欄に好きな名前とメッセージを入力してから「submit」ボタンを押せば、掲示板に文字が書き込まれます。各投稿に返信もできます。

  • 掲示板CGI(p++BBS)は、pppbbs.phpファイルを編集すれば設定を変更できます。余裕があればpppbbs.phpをテキストエディタで編集し、設定を変更してみましょう。
  • このp++BBSの場合は、phpファイルの名前を変えても問題なく動作するので、pppbbs.phpindex.phpという名前に変えれば、ファイル名を省略して、http://localhost:8800/bbs/ でアクセスできるようになります。より簡単にアクセスできるようになるでしょう。参考にしてください。

参考:p++BBSの修正箇所

この項の内容は参考資料です。

掲示板CGI(p++BBS)は、レッツPHPで公開されているCGIですが、作者がプログラムを記述する際に、いくつかの手続きを省略して記述しています。

プログラム自体は間違っていないのですが、チェックが厳格なウェブサーバーでこのCGIの実行をすると、プログラムに必要な手続きが省略されている旨の警告メッセージが表示されてしまいます。 そこで、プログラムを少し修正して、警告メッセージが出ないようにしています。

このページに掲載されている「掲示板CGI(p++BBS)修正版」を使うのであれば、下に書いてあるような修正作業はあらかじめ行ってあるので不要ですが、参考までにどのような修正作業をしたかを記載しておきます。

みなさんがもし自力でレッツPHPからCGIをダウンロードして動作させる場合に、ウェブサーバーがエラーを出すようであれば以下を参考に修正を行うと良いでしょう。

ダウンロード
  1. レッツPHPのページ右上にある「スクリプト一覧」をクリックし、ダウンロードページに移動します。
  2. 「掲示板」コーナーの中にある「p++BBS」をクリックします。
  3. 「■ サンプル、ダウンロード」と書かれているコーナーの右にある「ダウンロード」リンクをクリックしてダウンロードします。
  4. 圧縮フォルダとして「pppbbs4.zip」という名前のファイルが保存されます。
  5. ダブルクリックするなどして「展開」すると、「pppbbs4」という名前のフォルダが出来上がります。
  6. フォルダ名が長いので、「右クリック」→「名前の変更」などでフォルダ名を「bbs」に変更します。
ファイルの修正
  1. 「bbs」フォルダの中見を確認します。「pppbbs.php」という名前のファイルがあるはずです。これが、掲示板プログラムの本体です。
  2. 警告メッセージが表示されないようpppbbs.php を修正します。テキストエディタでpppbbs.phpを開き、2行目に空行を作成し、以下のように追記します。
    error_reporting(0);
    header("Content-Type: text/html;charset=Shift_JIS");
  3. 追記したら、「上書き保存」で保存します。

参考までに上記の設定は、「エラーを画面に表示させない」「CGIに使用している文字コードはShift JIS形式である(=画面上での文字化けを防ぐ)」という意味合いのプログラムです。

レッツPHPで公開されているCGIをチェックが厳格な環境で動作させるためには、おおむねこの修正を行えば良いので、参考にしてください。

カレンダーCGIについて

上記で紹介したもう一つのCGI「カレンダーCGI」について解説をします。

以下のリンクからダウンロードしてCGIを入手できます。

カレンダーCGI calendar_2019_0604.zip
j09_13.jpg

  1. ダウンロードした圧縮フォルダを展開すると、calendarフォルダが入っています。このcalendarフォルダをhtdocsフォルダ内に入れてください。
  2. CGIの本体はcalendarフォルダ内のindex.phpです。よって http://localhost:8800/calendar/ でアクセスできます。

特徴

カレンダーCGIは、清水が自作したスケジュール管理用のPHP製CGIです。以下のような特徴があります。

  1. クリックして予定を記入するだけの簡単操作
  2. 祝日などの表示に対応
  3. 画面の読み込み回数を減らした軽快な動作
  4. スマホなどでも扱いやすい画面レイアウト

とにかく簡単にすばやく予定を編集することを目標に作られています。

使い方

予定を書き込むには、日付をクリックし、開いた画面に好きな内容を書き込んで「OK」ボタンを押すだけです。
予定を削除したい場合は、予定の内容を全て消去し「OK」ボタンを押します。

j09_16.jpg

各ボタンの機能などは、マウスカーソルをボタンに重ねるとヘルプメッセージが出現するので、そちらで確認してください。

j09_17.jpg

j09_18.jpg

設定の変更方法

設定ファイルを直接編集することで、カレンダー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(スタイルシート)」について解説します。
あなたのページのデザインをよりパワーアップさせます!

少し内容が多いかと思いますので、できれば事前に次回の資料に目を通して予習しておくことをおすすめします……😂

資料は毎週だいたい月曜日に更新です!

戻る

1)
なおウェブで使われるプログラミング言語として Javascript もありますが、こちらはサーバーではなくブラウザ側、つまりあなたのパソコン上で動作します。よって厳密にはCGIではありません。
2)
CGIの動作速度は、PHPのほうが速いと言われていたり、逆にPerlのほうが速くなったりと、抜きつ抜かれつの関係にあります。
3)
権限を設定するにはアップロードアプリを使って、サーバー上のファイルを「右クリック」→「権限(パーミッション)」といった項目を選択して設定できる場合が多いです。
4)
include()は、現在の位置に別のファイルを読み込んで実行させるという意味の命令です。ここではcount.phpを読み込ませています。
jyokyu2021/j09.txt · 最終更新: 2022/03/08 17:43 by 127.0.0.1