人工知能学会第二種研究会資料
AIチャレンジ研究会
SIG-Challenge-059-01

電子掲示板とデータベースを利用した Web サイトづくりでネットワークを学ぶ教材の制作
光永 法明 1

飯田 彩楓 2

岩井 俊也 3

Noriaki Mitsunaga1, Sayaka Iida2, Syun’ya Iwai3
1

大阪教育大学
Osaka Kyoiku University2
株式会社ピロート
2
Pilot, Inc.
3
松原市立松原中学校
3
Matsubara Junior High School
1

ステムを作成している。これらではクライアントのプログラムあるいはサーバとクライアントのプログラムを作成する。クライアントのプログラムの作成
では実運用されているウェブサービスへ接続するものがあるが、サーバの作成では普及しているウェブブラウザをクライアントとするサービスを提供することは考えられていないようである。
一方、ウェブサーバで用いられる CGI を作成し、ウェブサービスを作るプログラミング教材が提案されている[6]。プログラミング例としては西暦・和暦変換、じゃんけん、暗号化と復号、掲示版、投票サービスが示されている。この方法ではクライアントには普段利用しているウェブブラウザが利用できるので、自分の PC がサーバになる、インターネットのサービスは自分でも作れるといったことが分かりやすい教材になると考えられる。
そこで本研究では[6]を基にした枠組みにおいて学習や授業の補助となる資料を拡充すると共に、データベースを利用したサービスが提供できるようにしたので報告する。プログラミング言語に Python、プログラミング環境に Spyder、データベースにSQLite、OS に Windows を使用している。

1 はじめに日本の初等中等教育においてプログラミング教育が拡充され、それにともなって中学校 技術・家庭科技術分野における内容 D 情報に関する技術の取り扱いが改められている[1]。現在の内容 D では情報通信ネットワークの技術についてプログラミングを通して学ぶことが求められている。情報通信ネットワークについて学習指導要領・同解説では具体的な名称を挙げていないが、記述からはインターネットを想定していると考えられる。学習指導要領解説によると、そこで作成するプログラムについては、1)
人の操作に応じて表示等が変化するものであり、その「処理の過程にコンピュータ観の情報通信が含まれること」と、2) 文字、音声、静止画、動画などを複合して効果的に利用することを求めている。学習
指導要領解説では学校紹介の Web ページに Q&A 式のクイズを追加する、簡易的なチャットシステムの再現を例として挙げている。プログラミング言語、ネットワーク環境、プロトコル、サーバとクライアントのいずれかなどは指定されていない。
プログラミング例としては、プログラミング言語ドリトルを使ってチャットシステムを作成する授業例が報告されている[2]。また開隆堂出版と東京書籍の教科書[3][4]ではチャット、伝言板、ネット対戦型
タイピング練習、防災地図アプリ、ルート検索アプ
リ、発音チェックアプリ、施設予約、Q&A の自動応答を実習例としてあげている。通信には、プログラ
ミング言語 Scratch やドリトル、Javascript のオブジ
ェクト間通信やライブラリを使っている。また技術分野の教科書を発行している教育図書の資料[5]ではプログラミング言語なでしこを使ってチャットシ

2 HTML と CGI についての学習
2.1 学習指導計画と資料の作成
中学生を想定してHTMLとCGIについて学ぶ学習
指導計画を立てた (表1)。1時限は50分を想定している。まず【Ⅰ】でWebページに使われているHTMLについて知り、自己紹介のHTMLファイルを制作する(1回)。次に【Ⅱ】診断メーカーの制作を通して学ぶ。診断メーカーとは名前を入力すると

1

時

12345

6

表1 HTMLとCGIについて学ぶ学習指導計画
制作物
学習活動・内容【Ⅰ】
自己紹 ① HTML について知る。
介の② HTML ファイルを制作する。
制作③ Python について知り、診断メーカーを作る。
④【Ⅱ】
診断メーカーの制作

表2 電子掲示板作成を通して学ぶ学習指導計画
時
構成
学習活動・内容⑨ 電子掲示板を構想する。
7
8
9
10

ネットワークの構成、情報を伝える仕組みついて知る。

11

⑤
⑥

Web サーバを起動する。
HTML で出力する方法を知る。

12⑦

フォームの作り方を知り、診断メーカーサーバを作る。

13⑧

情報を処理する仕組みについて知る。

14

乱数を使って単語を組み合わせ「診断結果」の文を作成し出力するプログラムである。まず③でPythonについて簡単な説明をし、配列と乱数、print文を使った診断メーカーのサンプルプログ
ラムをエディタに入力し、それを改変して自分の診断メーカーを作成する。そして④ネットワークの構成、情報を伝える仕組みついて知る。⑤ではコマンドプロンプトを開き、Pythonで書かれたWebサーバを起動し、自己紹介のHTMLを教室内でお互いに見る。そして⑥診断メーカーのCGIプログラムを実行し、プログラムでHTMLを動的に作成する方法を知る。⑦でCGIプログラムにパラメータを渡す方法とHTMLフォームを知り、自分の診断メーカーを制作する。そして⑧これまでの学習を振り返りコンピュータを使った情報処理について学ぶ。
これらの各時の学習指導案を準備し、教材として手元資料(A4, 10ページ)と説明に使うスライドとサンプルプログラムを制作した。

【Ⅲ】
電子掲
示板の制作

⑩

電子掲示板の基本形を制作する。

⑪

電子掲示板を工夫する方法を知る。

⑫

電子掲示板の見た目を考える。

⑬

ユニバーサルデザインについて知り、考える。

⑭

情報モラルについて知り、考える。

⑮

電子掲示板を見直し、修正、改善、追加する。

⑯

制作した電子掲示板を評価する。

3 電子掲示板の制作3.1 学習指導計画【Ⅰ】【Ⅱ】に続き、作品として【Ⅲ】電子掲示版の制作をする学習指導計画を立てた（表2）。
まず⑨電子掲示板とそれを応用した学級日誌がどのようなものか触れて、各時の電子掲示板を構想する。そしてテンプレートを基に⑩基本形を制作し、⑪ラジオボタンやチェックボタンなどについて学び、⑫CSSについて知る。そして⑬ユニバー
サルデザイン、⑭情報モラルについて学び、⑮電子掲示板を改良して、⑯制作したものを評価する。
これらを学ぶための各時の学習指導案を準備し、教材として説明資料(A4, 52ページ、【Ⅰ】【Ⅱ】の再掲を含む)とサンプルプログラムを制作した。

3.2 教材の検証方法
HTML の作成、Python プログラミングの経験があり、教育実習での実習経験がある大学生 3 名に対し、作成した資料、電子ファイル一式を渡し、各自のパソコンで Python の開発環境を整えてもらった。1 週間～10 日を目安に電子掲示板の制作を行ってもらった。わからないことがあれば LINE 等で尋ねるよ
うに伝え、学ぶのにかかった時間を測っておくよう頼んだ。電子掲示板が完成した後、完成したファイルを提出してもらい用意した質問紙に答えてもらった。質問紙では、自身のプログラミング経験と理解度（選択肢）、電子掲示板の制作で楽しい、面白いと2.2 教材の検証方法と結果用意した資料や説明スライド、サンプルプログラ
ム等で授業実践が可能か確かめるため、HTML の作成、Python プログラミングの経験がない大学生 1 名
に対し 3 時間の授業実践を行った。
その結果、HTML ファイルの作成、診断メーカーの制作ができ、授業実践のスライド、説明に問題はなかった。英単語のスペルミス、全角半角の間違いがあるものの特につまずくことなく制作し、Pythonでプログラムを書き実行できていた。

2

思った点（自由記述）、電子掲示板の特徴、作成時間、中学校で授業実践すると仮定して、コンピュータ同士を接続する方法、ネットワークの構成など学習指導要領で指導が求められている内容が学べると考えるか（4 件法）、全体を通しての感想・意見（自由記述）を尋ねた。

3.3 大学生の制作した電子掲示板
大学生 3 名は説明資料を使い、オリジナルの掲示版を制作できた。2 名は掲示版サイトを 1 名はトレーニング日誌のサイトを作った。図 1 と図 2 にうち2 名が作成したサイトを示す。図 1 を制作した大学生は制作に 5 時間、図 2 ともう１名の掲示板サイトを作成した大学生はそれぞれ 7 時間かかった。

3.4 質問紙によるアンケート結果
質問紙の「電子掲示板を作っている途中楽しい、おもしろいと思ったところはあったか」の質問に、「自分のイメージしたものが実際に作れるところ」「自由に電子掲示板を設計できるところ」「できない、わからなかったことが解決したとき」という回答を得た。全体を通しての感想、意見には次のような記述があった。
・ プログラムを書く中で必要なタグとその役割について、エラーの内容がどのようなものなのかを学ぶ機会ができ良い体験になった。
・ それぞれの構文についての説明もあり、今何を作っているかを確認しながら作業することができた。
・ 資料以外にも様々なフォームやタグが存在すると思うので、機会があれば使ってみたいと思う。
・ 自分が作りたかったものができたときは、達成感を得ることができた。
・ 機会がないと Web ページ作成は自分からはしないので、とても良い経験ができた。
したがって、用意した説明資料は制作に役立ち、オリジナルの電子掲示板を作ることに興味を持って取り組んでくれたと考える。中学生にもこのような感想が出ることを期待したい。
中学校技術・家庭科技術分野の内容 D の授業実践
で電子掲示板を制作すると仮定して、中学生が学び、あるいは考えることができると思うか 9 つの質問を4 件法で尋ねた。回答は、はい、どちらかといえばはい、どちらかといえばいいえ、いいえの、該当する段階に〇を付けてもらった。各質問と○をつけた人数を表 3 に示す。1)コンピュータ同士を接続する方法、2)情報通信ネットワークの構成、6)Web での情報表現については学べると思うと回答している。7)ユ3

図 1 静的 HTML で書いた電子掲示板の入口ページ(上)と CGI で出力する電子掲示板(下)図 2 静的 HTML で書いたトレーニング日誌の入口ページ(上)と CGI の出力するトレーニング日誌(下)ニバーサルデザイン、8)知的財産権、9)情報モラルについて考えることができると回答している。
しかし、4)ルータの働き、5)パケット通信については、制作している上で実感を持てないようである。
そのため、授業の内容や制作をさらに工夫しなければならないとわかった。3)サーバの働きに関しても学ばせ方に工夫が必要と考える。例えば、サーバが起動していないときに閲覧するとどうなるかについて知ること、自分が作ったもの、他の人が作ったものを見せ合う時間を制作途中に取るなどで学びやすくなると考える。

ますか?
3) サ ー バ の 働 き について学ぶことができると思いますか?

3.5 その他の気づき
大学生であっても慣れない英文字が見にくく、一人で解決できないことがあった。例えば、「name」と入力する部分で「nome」となっていた。つまりプログラミング経験が多少ある大学生であっても、誤字の修正、エラーへの対処についてどこが間違っているのかを自分で見つけられない、見つけにくいことがあった。また、渡された資料を読んでオリジナルの電子掲示板が完成するまでに、5 時間あるいは 7時間かかったことから、中学生の場合にはそれ以上の時間がかかると想定し、短く簡単に入力することができるようにライブラリやサンプルプログラムを改良するといった工夫と、授業時間外で制作できる環境を整える必要があると考える。

質問はい1) コ ン ピ ュ ー タ 同士を接続する方法について学ぶことができると2といえばはいどちらかといえばいいえ114) ル ー タ の 働 き について学ぶことができると思いますか?

125) パ ケ ッ ト 通 信 について学ぶことができると思いますか?

126) Webでの情報表現について学ぶことができると思

7) 電 子 掲 示 板 の 文
字の大きさ、文字の色やフォント、背景の色・画像、レイアウト、入力フォームを考えさせることで、ユニバーサルデザ
インについて考8) 制作を通し、著作権や肖像権などの知的財産権にいついて考えることができると思いますか?

いえによって、個人情

12) 情 報 通 信 ネ ッ トると思いますか?
239) オ リ ジ ナ ル の 電子掲示板のルールを考えること思いますか?

ついて学ぶことができると思い3えることができると思いますか？

報の保護や情報モラルついて考えることができワークの構成に2いますか?

表 3 アンケートの質問と各質問の選択肢毎の回答者の人数
どちらか

1

1

43

1

表 4 データベースを使用した Web サイト制作の学習指導計画
時
構成
内容

4 データベースを使用した Web サイトの制作

7

4.1 学習指導計画【Ⅰ】【Ⅱ】に続き、作品としてデータベースを使用した Web サイトを制作する学習指導計画を立てた（表 4）。⑰でデータベースについてスマートフォンの連絡帳を例に説明する。次に、データベース(SQLite3)を操作する方法を説明し、⑱成績管理
Web サイトの制作を通して、Python のプログラムからデータベース(SQLite3)を操作する方法を説明する。
【Ⅴ】では、お小遣い帳サイト、インスタグラム風、フリーマーケットサイトの３つのいずれかを基に自分の Web サイトを制作する。
これらの教材として【Ⅳ】【Ⅴ】の説明資料(A4, 70ページ)と⑰⑱を説明するためのスライド、サンプ
ルプログラムを制作した。説明資料ではお小遣い帳サイト、インスタグラム風サイト、フリーマーケッ
トサイトのいずれの説明だけを読んでもよいようにしている。そのため制作例の最初でデータベースの仕組みをどのように使っている Web サイトなのかを説明している。
例えば、お小遣い帳サイト(図 3)の場合は、フォー
ムに日付、収支、金額、内容を入力すると、記録データとしてデータベースに追加し、データベースに追加した記録データを日付で検索して記録データを一覧表示したり、収支金額の合計を計算して表示できることを説明する。そしてプログラムを説明する(図 4)。まず、図 4 の①記録欄と記録一覧表示欄のHTML を出力するプログラムを説明する(図 5)。そして図 4 の②収支金額表示欄、図 4 の③記録データ削除ボタン欄、図 4 の④検索欄と検索結果ページの順に機能を追加していきながら制作する。

89101112131415
16【Ⅳ】
成績管理Web サ イトの制作【Ⅴ】
データベースを利用 し た
Web サ イトの制作⑰ データベースについて知り、SQL 文で SQLite3 操作する。
⑱ Python のプログラムから
SQLite3 を操作する方法について知り、簡単な Web サイトを制作する。
⑲ データベースを使用したWeb サイトの制作例を真似て Web サイトを制作する。
⑳ 制作例を参考にデータベースを使用した Web サイトを構想し制作する。

図 3 お小遣い帳サイト

4.2 教材の検証方法
教材の検証のため大学生３人に協力してもらった。
大学生 A は HTML、Python、B は HTML、C 言語、
C は HTML、C++言語の記述経験がある。データベースについては 3 人とも知らなかった。まず【Ⅰ】【Ⅱ】【Ⅳ】の資料とスライドを使い、大学生 A、B、C 個別に授業形式で説明した。その後【Ⅳ】【Ⅴ】の説明資料とサンプルプログラム等を渡し、１週間を目安に⑲⑳の制作活動を行うよう頼んだ。制作完了
後質問紙で理解や感想を尋ねた。

5

図 4 小遣い帳サイトの各機能

4.3 教材の検証結果
協力してくれた大学生の場合は【Ⅰ】【Ⅱ】の合計で約 1 時間半、【Ⅳ】についても約 1 時間 30 分で授業を進められた。授業内容について理解できたか尋ねると理解できたと全員から返答があった。一方、ファイルを保存するフォルダの位置の間違え、スペルミス、半角全角の間違い、インデントの間違いなどがみられた。
【Ⅴ】の Web サイトの制作には約 5 時間かかった。
大学生が制作した Web サイトを図 6〜図 8 に示す。
3 人とも小遣い帳サイトを基に制作していた。また、
大学生 A はトレーニング検索欄、大学生 C はタイト
ル検索欄を、インスタグラム風サイトの例を参考に工夫している。
理解度と説明のわかりやすさなどについて 4 件法で尋ねた結果を表 5 に質問と共に示す。回答から全体を通して教材に大きな問題は見られなかったとわかる。また自由記述で回答を求めた「Web サイトを制作してみて楽しい、おもしろいと思った事があれば教えて下さい」という質問には・ 自分で書いたプログラムが思うように動いた
とこはおもしろい・ 意外と簡単に検索機能がある Web サイトを制作できて楽しかったという回答があった。
しかし、「Web サイトを制作中に難しかった事、つまづいた事があれば教えて下さい」という質問には・ １字のスペルミスでプログラムが正常に実行されないので、間違えている箇所を探すのが大変だった
・ プログラムの説明は理解できたが、プログラムを真似して書いたつもりがエラーになってしまった・ 英単語の文字が難しくて書き間違えたという回答があった。したがって、英単語のスペルミスを減らす工夫や教材のプログラムの説明を見やすく改良する必要があると考える。

図 5 プログラムとその説明

図 6 大学生 A が制作した筋トレ管理帳サイト

図 7 大学生 B が制作した試合結果記録サイト

5 まとめ
CGI の仕組みを利用した電子掲示板とデータベースを利用した Web サイトを制作するための教材として、学習指導計画を立て、指導案と教材として手元資料、スライドを作成した。大学生に対して、指導計画のうちスライドを作成した部分について講義を実施し、電子掲示板またはデータベースを利用したWeb サイトの制作をしてもらった。その結果、教材が有用であることがわかった。一方で、プログラムの入力ミスが散見され、自分では発見できない場合

図 8 大学生 C が制作したパスワード管理サイト

6

が見られたことから、そういったエラーを少なくなるような工夫が今後の課題である。

参考文献[１] 文部科学省: 中学校学習指導要領（平成 29 年告示）
解説 技術・家庭編, 開隆堂出版株式会社, (2018)[２] 西ヶ谷浩史, 兼宗進, 紅林秀治: 中学校技術科におけるドリトルを利用した通信プログラムの実践, 情報処理学会 コンピュータと教育研究会第 134 回研究発表会,情報処理学会研究報告, vol.2016-CE-134, no.18,pp.1-4, (2016)[３] 竹野英敏ほか: 技術・家庭 [技術分野], 開隆堂出版株
式会社, (2021)[４] 田口浩継ほか: 新しい技術・家庭 技術分野 未来を創る Tehcnology, 東京書籍株式会社, (2021)[５] 尾崎誠, クジラ飛行机(酒徳峰章): 「なでしこ」で安心プログラミング, 教育図書株式会社,
https://www.kyoikutosho.co.jp/questionary/nadeshiko.html (2022 年 2 月 17日閲覧)[６] 光永法明: CGI による動的なネットワークサービス提供体験ができるプログラミング教材の提案, 情報処
理学会 コンピュータと教育研究会 153 回研究発表
会, 情報処理学会研究報告, Vol.2020-CE-153, No.21,

表 5 アンケートの質問と各質問の選択肢毎の回答
者の人数

質問はい1) HTML の 書 き 方 が分かりましたか?

3

どちらかといえばはいどちらかといえばいいえいいえ

2) 簡 単 な Python のプログラムが書けるようになりましたか?

213) デ ー タ ベ ー ス の説明はわかりやすかったですか?

214) デ ー タ ベ ー ス を使用した Web サイトの仕組みを理解できましたか?

215) 制 作 例 の プ ロ グ
ラムの説明はわかりやすかったですか?

3

pp.1-4, (2020)

6) 文 書 の 制 作 例 とそのプログラムの説明はWebサイトを構想するヒントになりまし

3たか?
7) プ ロ グ ラ ム の エ
ラーに自分で気がついて修正できるようになり

2

1ましたか?

7