一般社団法人日本産業技術教育学会 第 37 回情報分科会（大阪）研究発表会 講演論文集

発表番号 222022.3.19-20

日本語プログラミング言語なでしこを使ったウェブサービス作成演習○光永 法明（大阪教育大学）
HTML 読み込み時に HTML を提供している IP

１．はじめに日本の初等中等教育においてプログラミン

アドレスの web socket サーバ(shindan.nako3,グ教育が拡充され，それにともなって中学校

shindan.nako3 は web サーバも提供する)に接技術・家庭科 技術分野における内容 D 情報続する。ブラウザで動作している main.js の1)に関する技術の取り扱いが改められている 。

プログラムはサーバからデータを受信すると現在の内容 D では情報通信ネットワークの左の吹き出しに表示する。下段の入力枠に入技術についてプログラミングを通して生徒に力すると右の吹き出しに表示すると共に web学ばせることを求めている。そこで，将来教socket サーバに入力文字列を送る。図１は員となる大学生への講義においてもプログラ

診断メーカーサービスになっており，web

ミングを通してネットワーク技術について学socket サーバは接続時に「名前を教えてね」

べるよう，CGI の仕組みを使ってウェブサーとクライアントに送り，受け取った文字列を2)ビスを提供する演習を実施している例 があ「名前」として“診断結果”を送る。該当部

る。その演習ではプログラミング言語分のプログラム例を図 2 と図 3 に示す。

Python を使っているが，日本語に近い表現

図 3 の部分を書き換えることで自分の診断が出来るプログラミング言語の方がよいのでメーカーサービスを作ることが出来る。

はという指摘もあった。
そこで本研究では日本語プログラミング言
3)

また，クイズを出し正誤を判定するサービス，質問に自動で回答する自動応答サービス，語なでしこ v3 （以下，なでしこ）を使ってまた複数クライアントに同じ応答を返すようウェブサービスを作成するプログラミング演にすることでチャットサービスも実現できる。

習を大学生に対して実施したので報告する。

そこで，診断メーカー，クイズ，自動応答，ブラウザ上の表示をチャットソフト風にし，チャットサービスをプログラム例として準備クライアント(ウェブブラウザ)とサーバ間のしている。

通信には web socket を使う。
２．Web サービスを提供する仕組み

なでしこには静的な HTML や画像等のファイルを提供する Web サーバを簡単に構築できる仕組みがある。また web socket のサーバについても，ソケットに接続，受信等したときのコールバック関数を書く仕組みがある。
そこでチャットソフト風の表示をする CSS4)(fukidashi.css) を使って HTML(index.html)，
ア イ コ ン フ ァ イ ル (icon.png) とJavaScript(main.js)で図 1 のような表示を作る。括弧内はサンプルのファイル名である。

図 1 診断メーカーサービスの例

ファイルを作る）， 第 8 回ブラウザ上の簡易エディタを使って， なでしこでのプログラミングに慣れる演習 （2021/6/8，演習では診断メーカーを作る），第 9 回診断メーカーサービスを作る演習(オンデマンド形式(2021/6/15〜2021/6/21）), 第 10 回各自の作成した診断メーカーサービスを各時の PC で動作させ教室内でお互いにアクセスする発表会，アルゴリズムについて講義，サンプルプ
図 2 サーバプログラムの web socket サーバ起動かログラムを基に web サービスを作成する演習

ら接続時のコールバック部分(2021/6/22),演習の続き (2021/6/29), 第 13回 web サービスの発表会と講義(2021/7/13)，
課題の提出 (2021/7/19〆切)とした。その後アンケートに回答してもらった。
第 9 回では，なでしこを使った web サーバを動かし自分の作成した HTML ファイルにアクセスする演習，web socket を使ったサービスの仕組みの解説を読む，実際に動かすといった内容が含まれている。講義資料は公開している 5)。課題には作成した web サービスのファイル一式の提出，図 3 のコールバック関数部分のフローチャート，異なる場所で 2名に作成した web サービスにアクセスしてもらい感想をもらうことが含まれている。感想をもらう課題の意図は，ネットワーク毎に図 3 サーバプログラムの診断メーカーを実現してIP アドレスが変わることを意識させ，作っいる部分（コールバック関数）た作品をほかの人に見てもらう経験をしてもらうためである。

３．ウェブサービスを作成する演習
3.1 講義の概要

3.2 学生の作品とアンケート結果

本学の技術教育コース 2 回生向けの講義

課題を提出したのは 6 名，アンケートへの「情報基礎 II」でウェブサービス作成演習

回答は 5 名であった。6 名の作ったサービスを実施した。本年度の講義の受講生は 8 名で，は，電気をテーマとするクイズ（図 4），思全員がそれまでに受講した講義で C 言語の簡い浮かべた人物をコンピュータが当てるサー単なプログラムを書いた経験があった。情報

ビス(図 5)，番号を入れるとアイドルグルー

基礎 II ではインターネットの歴史やパケップのシングル盤のタイトルと画像を返すサー

ト通信，TCP/IP などの基礎的な知識を学ぶ。

ビス，自分（作成した学生）に関する質問を基礎知識を学んだ後，第７回から HTML につすると回答するサービス，雑学クイズ（2 名）いての講義・演習 （2021/6/1，演習では自であった。

己紹介あるいは好きなものを紹介する HTML図 4 電気に関するクイズを出すサービス

アンケートで「作品を作って楽しい，おもしろいと思ったところ」があると答えた 4 名の自由記述の内容を表 1 に示す。自分の PCがサーバになり他の PC 等からアクセスできること，日本語プログラミング言語のメリットが挙げられている。「ネットワーク，HTML，プログラミング言語の理解で深まったと思うこと」には表 2 の回答が 5 名からあった。講義の狙いは実現されたと考える。
日本語プログラミング言語の方がよいか確

図 5 思い浮かべた人物をコンピュータが当てるサービス

かめるため尋ねた「『なでしこ』と今まで経験したプログラミング言語，エディタ，実行はとっつきやすく」，「コードから結果が想像方法などを比較してよいところと悪いところしやすかった」という回答があった。これらを教えてください。
」という質問には，「英語よりは，プログラムを読む上でのメリットである。しかし，「一つの動作のためのコード

表 2 「ネットワーク，HTML，プログラミング言語の文が長くなりがち」（長いために）「入力ミス理解で深まったと思うこと」への回答が発生」「『ここまで』が分かりにくく感じた」

新しいプログラム言語を用いてプログラムして，同じ wifi に繋がっているコンピュータからアクセスして楽しむことができ，コマンドプロンプトで入力された内容が見るなどの体験を通して，ネットワー
ク，HTML，プログラミング言語の理解が深まったと思います。

「コード自体はぱっと見で分かりやすいかもしれないがエラーが出たときにどこをどう直すべきかわかりづらい。
」という回答があった。困った点を尋ねる質問の回答には「わけのわからない誤作動を起こしたり，エラー文がどこなのかがわかりにくかったりと苦戦しました。
」とあった。
「日本語」であっても，プログラムを「書く」上で間違えやすい点や分かりにくい点について早めに解決できるサポートが必要である。
４．おわりに

本論文ではなでしこを使ってウェブサービスを作成するプログラミング演習を大学生に対して実施し，その結果，学生のネットワー
クサービスについての理解を深めることができたと考える。日本語プログラミング言語の今まで自分が見ていたサイトなどがどうやって表示されているのかを知れて良かった。
HTML の知識，サーバーやネットワークの仕組みを試
行錯誤を繰り返すことで実体験を通じて学び感じることが出来た。
同じ Wi-Fi 環境ならネットワークをインターネットを通じてサイトを動かしたり，HTML を使ってウェブサイトを作ることは難しいということを学びました。
さまざまなサイトの作りがどのようになっているかがわかり，普段サイトを見るときに自分でコードを見てみたりが増えてきて世の中がいかにプログラミングでできているかがよく理解できた。

参考文献

1)

成 29 年告示）解説 技術・家庭編, 開隆

採用については，プログラムを読みやすい点が学生から挙げられたが，プログラムを書く上でのサポートは必要であった。今後はこの文部科学省: 中学校学習指導要領（平堂出版株式会社, (2018)2)

光永法明: CGI による動的なネットワー
クサービス提供体験ができるプログラ

点の充実が必要であると考える。

ミング教材の提案, 情報処理学会 コン
ピュータと教育研究会 153 回研究発表

表 1 「楽しい，おもしろいと思ったところ」に関す会, 情報処理学会研究報告, Vol.2020-

る回答
クイズをプログラミングで作ったことがなかったので，好きなことのクイズ作ることができて楽しかったです。そして，日本語プログラム言語なのに，=と日本語を混ぜた数式を作っても（〜は，〜。の形でなくても）動いたので，おもしろいと思いました。
実際に他の pc でうごかせるところ自身のコードや他人のコードを見返したときに，コードから実行時の動きが予測しやすく，工夫しやすく見やすいため面白く感じた。
サーバーを用いてリンクを用い，他人の PC で自身の書いたプログラムが動いているのを見るのが非常に楽しく感じた。
自分流の自由なものを作り，それを動かすことが楽しいと思いました。

CE-153, No.21, pp.1-4, (2020)
3)

クジラ飛行机: 日本語プログラム言語な で し こ , https://nadesi.com/top/(2022/02/24 閲覧)

4)セイさん: HTML と CSS で作る会話風フキダシ

３選,

https://jisuijisan.com/speech-bubble/(2022/2/24 閲覧)
5)

光永法明: 情報基礎 II 2021/6/19(土)講義(オンデマンド)講義資料,
https://n.mtng.org/2021j2/