事例162

情報システム日常的に利用も、仕組みの理解は希薄

教員研修用教材、Web APIとモジュール開発を紹介

そこで、この授業では、目標として、Web APIやモジュール開発の基本的な考え方を理解させること。具体的には、アプリが複数の機能から構成されていること、サーバと連携しシステムとして動作していることを理解させる授業にはどのようなものがあるか。以下では、その試行錯誤の結果について順を追って、お話しいたします。

教員研修資料にみるWeb APIとモジュール分割

身近なスマホアプリを開発者の視点から考える

まず、背景となった、教員研修資料と学習の意義について見てみます。教員研修資料「情報Ⅰ」第３章コンピュータとプログラミングでは、Web APIの概要と活用すると外部サービスやビッグデータが使用可能となり、さまざまなシステム開発で活用されていること。第４章情報通信ネットワークとデータの活用では、（３）Web APIによるデータの取得の項で、Web APIでXML形式やJSON形式でデータを提供しているサイトが多いことなどが紹介されています。

※クリックすると拡大します。

「情報Ⅱ」第４章情報システムとプログラミングでは、情報システムはどう作られるか、モジュールに分割して効率よく開発が進められていることが紹介されています。具体的な事例として、Web APIを利用した図書検索用プログラムについて、Python言語のプログラム例が示されています。

※クリックすると拡大します。

一方で、生徒はどう情報システムを理解しているのか。まとめたのがこちらです。高校生にとって、スマートフォンは世界の情報のほぼすべてで、その先に人々やSNSのさまざまなやり取りがあるという意識はあるでしょう。しかし、その中間に情報システム、つまりネットワークやサーバ、データベースがあり、さまざまなプログラムが動作し、またWeb APIやモジュール分割により開発されているという意識は、生徒にはほとんどないと思います。

このうち、この授業ではWeb APIとモジュール分割を扱います。Web APIは、生徒がスマートフォンアプリなど利用する際に画面に頻繁に登場しますし、モジュール分割は、利用者の視点ではなく開発者の視点に立って物事を見ることになります。生徒がそうしたことを考えていない前提では、学習させる意義は非常に大きいと思います。

ただ、Web APIやモジュール分割は、ネットワーク技術から始まるいくつもの概念を経たものなので、事前にネットワークやサーバ、データベースとは何か、生徒にある程度理解してもらってからでないと、今回の学習内容までは進めないことが、この授業に取り組む上での大きなポイントになりました。

この授業では、オンラインのプログラミング学習環境「Bit Arrow」を利用しました。これは３つの大学で共同開発されたもので、C言語やJavaScript、Python、ドリトル、DNCL、Tonyuなど複数のプログラミング言語を、手軽にかつ気軽に学ぶことができます。今回、その開発者の方から、教員研修資料にあった内容のWeb APIを利用した図書検索システムのプログラムをご提供いただき、それを利用して実習しようと考えたのです。

２年生「情報の科学」

授業実践（授業動画１本＋対面授業4コマ）

次に、どのような授業を行ったのか。今回の報告では、新型コロナウイルス感染症拡大による臨時休校の際に配信した「情報通信ネットワーク」の授業動画１本と、学校再開後に取り組んだ対面授業４コマについてお話しいたします。

授業の流れがこちらです。授業動画については、生徒があまり意識していない「データの流れ」「サーバとクライアントの役割」を中心に理解させるよう、学習の動機付けを目的とし、作成しました。次に、学校再開後の対面授業１コマ目は、情報関係の用語・略語など言葉を理解することが重要と考え、例えばLANやURLなどの意味をどこまで知っているかを扱う授業を行ない、２・３コマ目はIPアドレスの計算などを含むミニ実習を通して、ネットワークやデータベースなどの基本的な考え方を理解させる授業を行ないました。そして４コマ目に、アプリの動作原理を理解させようと、Web APIやモジュール分割について扱いました。

本校では、「情報の科学」を必修科目として設置し、２単位分の授業を１年生１単位、２年生１単位という形で分割履修する、変則的な編成になっています。今回実践した授業の対象は２年生のため、すでに１年生で「情報の科学」を履修し、ドリトルやPythonによるプログラミング経験のある生徒ということになります。スマートフォンの所有率は100%で、持っていない生徒はいません。今回の研究では、生徒はアプリの動作原理、つまりアプリは複数の機能で構成され、サーバと連携して動作することを理解できるか明らかにしようと考え、取り組みました。

休校中の授業動画「スマートフォンの向こう側」

イメージを持たせることが大事

まず、休校中の授業動画について。「スマートフォンの向こう側」と題した20分程度の動画で、校歌をBGMで流し、「あなたはスマートフォンの向こう側を考えたことはあるか」と問いかけから始めます。そして、理解する鍵はサーバとクライアントだと【イメージ】を示し、生徒の自主学習を中心に据えて、説明します。ここで大事なのが【イメージ】で、ネットワークなど実物は見られないものを捉えることは難しいものです。そこで、このスライドのように、サーバを中心に動作している、サーバを介してクライアント同士でデータを共有しているイメージを持とうというわけです。

そして、【具体例】として、学校のホームページなどのWebページ、教育用のクラウドサービスClassiで先生と生徒がどう情報共有をしているか、Twitterなどの仕組みを説明。その後、【模擬実習】として、実際にコンピュータを利用したように、４人１組でドリトルのチャットを利用したデータ共有ができることを説明しました。

※クリックすると拡大します。

授業１コマ目「用語・略語の理解」

元の意味はあまり理解していない生徒

学校再開後の対面授業１コマ目は、最初に情報関係の用語リストを生徒に配布し、それぞれの元の意味を英語で書けるのかを聞きました。LANやIP、QR（コード）、著作権の©など、いくつか生徒の回答を見てみると、ほとんどできていないというのが実態です。例えば、スライド左の生徒の回答は、LAN（Local Area Network）だけ、右の生徒はWWW（World Wide Web）だけはできていますが、ほかは全滅。生徒たちはこうした言葉を知っており使っていますが、その元の意味については、ほとんど理解できていなかったということが明らかになりました。

※クリックすると拡大します。

授業２・３コマ目「ミニ実習いろいろ」

体験的な実習を通じてネットワークを説明

授業２・３コマ目は、いくつかのミニ実習に取り組みました。例えば、お絵かき実習では、「スプートニク」「ARPANET」（Advanced Research Projects Agency NETwork、高等研究計画局ネットワーク）や、「パケット交換」のイメージを描く。計算実習では、IPアドレスの計算や10進数に変換する。意味調べ実習では、WWWサーバやメールサーバなどの意味を教科書で調べるなどしました。

よくある実習として、コンピュータを使って自分のIPアドレスを調べる、DNSを確認するため、例えば首相官邸のホームページにアクセスする際に、ドメイン名でなくIPアドレスを使ってみるなど、体験的な実習を通じてネットワークの説明をしました。

授業４コマ目「Web API、モジュール化」

架空の新サービス開発を一例に説明する

授業４コマ目は、「Web APIとモジュール化」について、Classiを一例に説明しました。というのも、教員はWebブラウザでさまざまなデータを入力し利用する一方、生徒たちはスマートフォンアプリを利用しており、「アプリ」の一種という共通認識を持っているためです。

そこで授業では、開発者の視点に立ち、Classiの架空の新サービスとして、新型コロナウイルス感染症に関する情報を生徒たちに配信するものを想定したとき、どうそのデータを収集すればよいだろうかという問いかけから始めました。実は、COVID-19 Japan Web APIというデータ提供サイトがあって、Classiの開発者は自らデータを収集するのは大変だが、こうしたサイト提供のデータを利用すれば生徒たちに新型コロナウイルスの情報を配信できるという流れで、Web APIとは何かと授業を進めていきます。

※クリックすると拡大します。

Web API（Application Program Interface）とは、教員研修資料「情報Ⅰ」にある通り、一般的にシステム開発のプログラムは大規模で開発に時間がかかるため、多くのシステムで処理やデータが共通化されています。それをAPIとして提供されたものとして利用することで開発期間の短縮に繋がることから、世の中で広く使われているものになります。

モジュール分割について説明したスライドがこちらです。今回のソフトウェアは、生徒はスマートフォンでよく利用するインターフェースだと思います。図書情報でその図書データを表示する、入力したキーワードに合致する図書を検索する、自分で図書データを登録するなど、こうしたアプリを想定するときに、どのような仕組みになっているかを考えるという前提で実習に取り組みました。

今回の実習では「Bit Arrow」を利用しました。Bit Arrowでは、教員が生徒のユーザ情報を登録して、生徒はユーザ名とパスワードを入力して利用します。利用するメリットは、教員側は生徒の学習履歴を把握でき、またソフトウェアのインストールが不要のため、生徒は自宅でも学習することができます。本校では、まず授業ビデオでBit Arrowのログイン方法などを説明したうえで、プログラミング未経験の１年生から導入としてドリトル、そしてPythonに発展させるという流れで実習を行っています。

次に「regist」ファイルを実行し、長谷部誠『心を整える。』（幻冬舎、2011年）の図書データを登録してみます。そうすると、実行画面ダイアログに「登録が完了しました」と表示されますので、もう一度「all」ファイルを実行してみると、「regist」で実行した長谷部誠の図書が登録されたことがわかります。

最後に「search」ファイルを実行し「長谷部」という名前の付いた図書が検索されるか実行してみると、実行画面ダイアログに長谷部誠の図書が表示されるというように、こうした実習が可能です。

このような実習に取り組み、生徒たちにはさまざまなことを考えさせるよう促しました。例えば、プログラムの記述を見てみると「API」が記述されていること、スマートフォン画面とプログラムをそれぞれ実行したことにどんな関係がありそうかなどを考えさせ、まとめさせたりしました。

※クリックすると拡大します。

実践結果：授業とフィードバック

知らなかったことの自覚と理解の重要性が多数

次に、このような授業実践について、生徒は何を感じ、考えたのか。ここでは、授業動画の感想、授業３コマ目の実習の感想、同じく４コマ目の実習の感想についてご紹介いたします。

こちらが授業動画（導入）の感想についてのスライドです。まとめてみると、まず赤字で示した部分が「知らなかったことの自覚」に関する記述で、非常に多かったです。ほとんどの生徒が今まで使っていたが全然知らなかったとコメントしています。また、青字で示した部分が無知であることや仕組みの理解が大切という「理解することの重要性」に関する記述。意外なのが緑字で示した部分で、「セキュリティ意識の向上」に関して記述する生徒が多く、印象的でした。

次に、授業１～３コマ目（用語の理解、ミニ実習）の感想について。こちらも授業動画の感想と同様、「知らなかったことの自覚」をした生徒が多く、また「理解することの重要性」に気づいたというコメントがとても多くありました。

また、授業４コマ目終了時「使っているアプリをひとつ選び、どのような機能（モジュール）があるか、できるだけ多く書きなさい」として記述させてみると、生徒はさまざまなアプリを選びました。例えば、学習管理、ゲーム、LINE、乗換案内などのアプリを取り上げ、それぞれのアプリでどんな機能があるか。生徒たちはそれらを少しずつ細かく分けていく様子が見られました。

授業４コマ目（Web APIとモジュール分割の実習の感想については、Web APIの存在を知ったなど「Web APIの理解」に関するコメントが多いほか、モジュール分割により開発が効率的になることが理解できたなど「モジュール分割の理解」、「体験的な実習を行ったことのメリット」として理解が深まった、身近に感じられたなどの内容もありました。

考察：アプリの動作原理の理解に一定の効果

特にBit Arrowによる体験的実習は効果的

ここまでを考察としてまとめてみます。もともとの検証内容は、アプリの動作原理を理解できるかで、具体的には、アプリが複数の機能から構成されていること、サーバと連携しながらシステムとして動作していることが理解できるかとし、実験的な授業実践に取り組みました。その結果、一定の効果はあったことが確認できたと考えます。その理由は、「ビデオ＆対面授業」で繰り返し生徒たちに話していたこと、「体験的な実習」に取り組んだことが、一定の効果に繋がったものとみています。とくに、Bit Arrowによる「データの共有」の体験的実習は、大変効果的であったと思います。

最後にまとめてみると、今回は情報Ⅰ・Ⅱの教員研修資料で紹介されている、「Web APIとモジュール分割」について扱う授業について報告いたしました。この授業は、生徒が意識することがなかった「スマートフォンの向こう側」を理解させる授業になったのではないかと思います。特に、Bit ArrowによるWeb APIの実習は非常に手軽で、また生徒自身でアプリの動作原理を学び取る授業になったと思います。

第13回全国高等学校情報教育研究会全国大会（オンライン大会）　講演より