Vol.2020-CE-153 No.21
2020/2/16

情報処理学会研究報告
IPSJ SIG Technical Report

CGI による動的なネットワークサービス提供体験ができる
プログラミング教材の提案
光永 法明1,a)

概要：インターネットがインフラとして普及しその仕組みを中学校段階でプログラミングを通して学ぶよう次期学習指導要領で求められている．そのため，その教育に将来携わる中学校 技術・家庭科 技術分野の教員を目指す学生には十分な理解が求められる．そこで CGI プログラムの書き換えを通して動的なサービスを作り，学生が自分の PC でサービスを提供する経験ができる教材を作成したので紹介する．プログラ
ミング言語は Python とし，ウェブサーバには Python の http.server モジュールを利用する．教材は CGIプログラムのサンプルとプログラムを解説するテキストから構成される．大学生向けの講義 (2 回生向け，受講生 11 名) で教材を利用したところ，教材に大きな問題はないと分かった．また受講生全員がプログラ
ムのサンプルを改良し作品を作成する課題を提出できた．

1. はじめに
現在，インターネットがインフラとして普及しその仕組

HTML の記述に従って整形し表示する．
一方でユーザの要求に応じて提供するデータを生成する動的なウェブサービスがある．動的なサービスには，検索みを中学校段階でプログラミングを通して学ぶよう次期学エンジン，ウェブメール，FAQ 検索，電子掲示板，訪問者習指導要領で求められている [1]．そのため，その教育にカウンタ，企業や大学の情報提供やブログなどに使われる将来携わる中学校 技術・家庭科 技術分野の教員を目指す

CMS (contents management system) などがある．動的な学生には十分な理解が求められる．

サービスを提供するにはウェブサーバ側にそのためのプ

インターネットの主な特徴としては IP アドレスを使うログラムが必要となる．古くからある動的なサービスを提こと，ルータによりネットワークを相互接続し，IP アド供する仕組みに CGI(common gateway interface) がある．

レスと FQDN を結びつける DNS があり，分散管理されCGI の仕組みでは，ユーザからのリクエストに応じてウェたネットワークでありインターネットへの接続やインターブサーバが CGI プログラムを呼び出し，CGI プログラム

ネット上のサービス提供などはそれぞれの管理者が許可の出力（HTTP プロトコルヘッダの一部と動的に作成されすれば可能であることが挙げられる．またインターネット

た HTML など）を受け取り，ユーザに返す．CGI プログ

上の様々な情報やサービスが WWW の仕組みを利用してラムはテキスト処理が主体であり，複雑なサービス提供は提供されている．WWW は主に HTTP/HTTPS プロトコ

難しいがプログラムの構造が簡単である．

ル，HTML ドキュメント，URL によるリソースの指定とそこで CGI プログラムの書き換えを通して動的なサー

それらを扱うウェブサーバとウェブブラウザ (クライアン

ビスを作り，学生が自分の PC でサービスを提供する経験ト) で構成される．

ができる教材を作成したので紹介する．プログラミング

更新の少ない情報は静的な (変化しない) HTML ファイ

言語は教育でも実用でも広く使われている Python とし，ルに記述しておき，ファイルをウェブサーバに置く．ウェ

ウェブサーバには Python の http.server モジュールを利用

ブブラウザで URL を開くよう操作すると，ブラウザはする．教材は CGI プログラムのサンプルとプログラムをURL で指定されたサーバにリソースを要求しウェブサー解説するテキストから構成される．なお、本論文は以前にバはファイルを提供する．ブラウザは HTML ファイルの投稿した論文 [2] を加筆修正したものである．

記述に従って必要な画像などのファイルをさらに要求して
1a)

大阪教育大学
Osaka Kyoiku University, Kashiwara, Osaka 582–8582,
Japan
mitunaga ＠ cc.osaka-kyoiku.ac.jp

c 2020 Information Processing Society of Japan⃝

2. CGI プログラムのサンプル
2.1 CGI プログラム
ウェブサーバが特定のリソースにアクセスされると CGI

1

Vol.2020-CE-153 No.21
2020/2/16

情報処理学会研究報告
IPSJ SIG Technical Report#!/usr/bin/env python# -*- coding: utf-8 -*import cgi
import io
import os
import sys#!/usr/bin/env python3# -*- coding: utf-8 -*import cgi
import io
import os
import sys

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, \encoding=’utf-8’)
form = cgi.FieldStorage()sys.stdout = io.TextIOWrapper(sys.stdout.buffer, \encoding=’utf-8’)

print(’Content-type: text/html; charset="UTF-8"’)
print()
print(’<html>’)print(’<head>’)print(’<meta charset="UTF-8">’)print(’</head>’)print(’<body>’)
print(’Hello, World!<br>こんにちは<br>’)print(’</body>’)
print(’</html>’)
図 1

CGI の”hello world”プログラム

プログラムが呼び出される．呼び出された CGI プログラムが標準出力に HTTP ヘッダの一部（コンテンツのメタデータ）とコンテンツを出すと，それをウェブサーバはウェブクライアントへ返す．つまり最も簡単な CGI プログラム

form = cgi.FieldStorage()
if form.getvalue("year"):year = int(form.getvalue("year"))else:
year = 1989
hyear = year + 12 - 2000
conv = ’ 平成 ’ + str(hyear)
html="""Content-type: text/html; charset="UTF-8"’<html><head><meta charset="UTF-8"></head><body>
西暦 YEAR 年 = CONV 年</body></html>"""は print 文だけで構成できる (図 1)．図 1 のプログラムの場合はシェバンと Python スクリプトの文字コード指定，html = html.replace(’YEAR’, str(year))
html = html.replace(’CONV’, conv)

ライブラリの読み込み (省略できるものを含む），標準出力の文字コードの指定，CGI のパラメータ受け渡し (フォーム) の準備，HTTP ヘッダを出力する print 文，ヘッダとprint(html)
図 2 西暦を和暦に変換して結果を表示する CGI プログラム

コンテンツの境界を示す空行を出力する print 文，コンテとすればよい．int() で変換しない場合は文字列扱いとな<html><head><meta charset="UTF-8"></head><body><form>
西暦: <input name="year"> 年<button type="submit" formaction="cgi-bin/year.py"
formmethod="post">変換</button></form></body>る．year がウェブサーバから渡されないときにも正常動作

図 3

ンツの HTML を出力する print 文から成り立っている．

Python の cgi ライブラリを使い，ウェブサーバから CGIプログラムへ渡されるパラメータを受け取るには次のようにする．パラメータの名前が year で値が整数の場合はform = cgi.FieldStorage()
で FieldStorage クラスのインスタンスを取得してyear = int(form.getvalue("year"))year.py にパラメータを渡して呼び出すフォームを含む HTMLするためにはif form.getvalue("year"):year = int(form.getvalue("year"))else:
year = 1989

をブラウザで開けばよい．この方法ではパラメータに何を引き渡せばよいかをあらかじめ知らないと開けないため，CGI プログラムを呼び出すフォームを含む HTML ファイ
ルを用意することが多い．たとえば，図 3 の HTML を用とすればよい．これを使って西暦から和暦へ変換するプロ

意し，ブラウザで開くと図 4 が表示され，空欄に数値をグラムは図 2 と書ける．

いれ，変換ボタンをクリックすると year パラメータの値

HTTP の GET 要求で localhost のポート 8000 番で接として数値が設定されサーバに渡される．また POST 要

続を待つサーバの cgi-bin/year.py の CGI プログラムを求にすることで，URL にパラメータが含まれない．GET,year パラメータの値 2000 として実行するにはPOST 要求のいずれを使うかは用途によるが，パラメータ

http://localhost:8000/cgi-bin/year.py?year=2000

c 2020 Information Processing Society of Japan⃝を見せない方がセキュリティ上よいと考えられる場合など

2Vol.2020-CE-153 No.21
2020/2/16

情報処理学会研究報告
IPSJ SIG Technical Report

図 4

西暦を和暦に変換するプログラムを呼び出すための HTML のブラウザでの表示
図 8

暗号プログラムの出力．「おおきなふるどけい」を換字暗号で暗号化した．

図 5

西暦を和暦に変換するプログラムの出力

図 6

診断メーカプログラムの出力
図 9 クイズプログラムの出力

図 7

じゃんけんプログラムの出力に POST 要求が使われる．

2.2 サンプルプログラム対象とする学生はプログラミングについての経験がそれ

図 10

掲示版プログラムの出力．これ以外に画像を投稿できるものも用意した．

ほどないと考え，CGI プログラムと呼び出すフォームのサンプルとして以下を用意することにした．それぞれで重要となる主なプログラミング要素とサンプルの出力例を図に示している．

• Hello world：print 文• 西暦・和暦変換：整数の計算, 数値で判別する if 文，文字の置換 (図 5)• 診断メーカー（ランダムな文章を作成するプログラム）：乱数，リスト（配列）(図 6)• じゃんけん：乱数，リスト，文字列で判別する if 文

図 11

投票プログラムの出力(図 7)• 換字暗号：リスト，文字列の置換 (図 8)• クイズ：リスト，隠しパラメータの受け渡し (図 9)• 掲示版：ファイルへの出力，ファイルからの読み込み(図 10)• 投票：ファイルからの数値の読み込み，ファイルへの出力 (図 11)

3. 授業での活用例と学生の制作例
2019 年 7 月に本学の学部 2 回生向け講義 (必修科目，受講生 11 名，講義時間は 1 コマ 90 分を 2 コマ) で教材を用いた講義を実施した．受講学生 (1 名除く) は 1 回生時にプログラミングの入門科目（選択科目）を受講していた．

これらのサンプルを順に解説 (クイズまで) し，開発環境

HTML については該当の 2 回生向け講義で説明し，HTMLのインストール，サーバの起動についても書いたテキストファイルの作成課題を済ませていた．本学では BYOD が(A4, 34 ページ) を学生が自分のペースで学習を進められる進められているため，プログラムの作成等には学生所有のよう用意した．

PC を使うことにした．そこで Anaconda をインストール

c 2020 Information Processing Society of Japan⃝

3Vol.2020-CE-153 No.21
2020/2/16

情報処理学会研究報告
IPSJ SIG Technical Report

して Python を利用出来る環境を準備させ，エディタ (開発環境) として Spyder を利用させることにした．サンプ
ルプログラムと資料はあらかじめデータで配付し，クイズと投票についてはプログラムリストを印刷して配付した．
講義では次のような順で説明・指示した．

( 1 ) 学生の PC への固定 IP アドレスの割り当て (ホワイトボードに割り当て一覧を書く) と設定( 2 ) Anaconda プ ロ ン プ ト を 開 き ウ ェ ブ サ ー バ を 起 動(Python スクリプトを配布)
図 12( 3 ) http:/localhost:8000/ をブラウザで開く

学生の投票を基にした改良例( 4 ) ローカルのファイルシステム上のファイルの位置関係と URL の関係を確かめる( 5 ) HTTP プロトコルの簡単な説明 (テキストベース，GET/POST/PUT)( 6 ) telnet (Python の telnet ライブラリ使用) で localhostへつなぎ，GET 要求を送る( 7 ) サーバからクライアントへの応答がヘッダとボディからなることを確認( 8 ) 適当な画像ファイルを見れるよう test.html を改変( 9 ) ほかの人に自分のサーバにアクセスしてもらう (http://図 13

各 PC の IP アドレス:8000/を開く)( 10 )動的な応答のために CGI の仕組みがあることを説明( 11 )Spyder で Hello world プログラム (test.py) を開き，実行してヘッダの一部と本文を出力することを確認( 12 )http://localhost:8000/cgi-bin/test.py を開き動作することを確認( 13 )http://localhost:8000/cgi-bin/year.py?year=2018 を開き西暦・和暦変換のプログラムの結果を見る( 14 )フォームの説明( 15 )西暦・和暦変換プログラムを改良する課題 (昭和対応，令和対応，昭和/平成/令和対応)( 16 )診断メーカ/じゃんけんサーバを改良する課題 (適切な画像をフォーム/CGI の出力に表示する)( 17 )クイズと投票の解説 (クイズの正解数をグラフにする方法の説明を含む)( 18 )クイズと投票の改良課題 (適切な画像を表示，クイズの数/投票先の数を増やす，工夫する，2 人以上から感想をもらう)
講義の進行に大きな問題はなかった．講義中に終わらなかった課題については宿題とし後日メールで提出させた．
すべての学生が課題を提出した．提出されたものを確認す

掲示版を基にした栽培日誌の入力フォーム

ログラムのサンプルを基に制作した (他の学生は別のプログラム例を基にすることを選択した)．その学生がサンプルの掲示版を応用して作成した栽培日誌の入力フォーム部分を図 10 に示す．ラジオボタンやチェックボックスを使うことで UI を改善していた．

4. まとめ本稿では CGI プログラムの書き換えを通して動的なサービスを作り，学生が自分の PC でサービスを提供する経験ができる教材を作成し紹介した．また教材を用いた学部 2回生向けに講義をしたところ教材に大きな問題はないとわかり，受講生全員が講義の課題を提出できた．また講義を通して学生が作成した作品を紹介した．
参考文献
[1]
[2]

文部科学省：中学校学習指導要領（平成 29 年告示）解説
技術・家庭編, 開隆堂出版株式会社 (2018).
光永法明：動的なネットワークサービス提供体験ができるプログラミング教材の提案. 日本産業技術教育学会 近畿支部 第 36 回研究発表会講演論文集, A-7 (2019).

ると，じゃんけんの画像の選択やクイズの問題に個性/工夫が見られた．なかに 1 名の学生は図 12 のように投票数をグラフで見せるように改良していた．
また大学院生対象講義 (演習科目, 複数教員で担当の科目で担当学生は 3 名) においてネットワークサービスについて理解するためになんらかのサービスを作成してみるという課題を与えた．そのとき 3 名のうち 1 名がこの CGI プ

c 2020 Information Processing Society of Japan⃝4