平成27年8月10日・11日に行われた第8回全国高等学校情報教育研究大会（宮崎大会）でのポスター発表です。

1. Webアプリを利用した
情報科の授業案の提案
千葉県立柏の葉高等学校
情報理数科 沼崎 拓也

2. 自己紹介
• 沼崎 拓也（ぬまざき たくや）
• 平成19年度より千葉県の情報科教員
• 現在は柏の葉高校 情報理数科に所属
専門学科「情報科」の学科である
• 教員免許は高校 情報＆理科＆数学，元教科「なし」
• Mac好き，ガジェット好き，Web大好き
• パソコン通信時代よりネット歴22年
第8回 全国高等学校情報教育研究大会（宮崎大会）
2�

3. 背景
• Microsoft Office 365やGoogleのChromebook
• クラウド版アプリケーションが当たり前の環境となる
• これまでに取り組んだWebアプリを利用した
題材を紹介する
• それらで学べることと問題点として何があげられるか
（＊）ここでは「Webアプリ」という用語は広義のものとする
3�
第8回 全国高等学校情報教育研究大会（宮崎大会）

4. Webアプリを利用した実践例
1. 「ペーパープロトタイピング」
2. 「プログラム作成」
3. 「Webシステム構築の学習」
この３つの授業例について紹介する
第8回 全国高等学校情報教育研究大会（宮崎大会）
4�

5. 1. ペーパープロトタイピング
• ペーパープロトタイピングとは
「紙面上で，画面やUIのプロトタイプを作成することで，実際の
画面遷移やデザインを確認していくプロトタイピング」
プログラミングでアプリを作るのは難しいが，アイディアだけな
ら…というケースにも
• Prott
https://prottapp.com/ja/
5�
第8回 全国高等学校情報教育研究大会（宮崎大会）

6. ペーパープロトタイピング授業例
• スマートフォンアプリのペーパープロトタイピング
• H26年度 学校設定科目「情報心理」 19名
• 「各自が作ってみたいアプリ」のアイディアをプレゼン
• H27年度 専門科目「情報デザイン」 7名
• 統一の題材で「メモ帳アプリ」のUIを考える
6�
第8回 全国高等学校情報教育研究大会（宮崎大会）

7. 2. プログラミング
• 従来の環境では
• 安価に開発環境が揃う前提で言語を決定する傾向に
• VBA，JavaScript，Visual Studio系
• paiza.io https://paiza.io/
• 24の言語をオンラインで実行可能な環境
• C，C++，Java，PHP，Ruby，Python2，Python3，JavaScript，
Scala，Haskel，C#，R，…
7�
第8回 全国高等学校情報教育研究大会（宮崎大会）

8. プログラミング授業例
• 学校設定科目「情報数理A」
• 数学的な内容を，プログラミングで解答する
• 「言語は自由」というやり方でアウトプットを評価してみた
→ 提出されたコードをpaiza.ioで実行して確認
• 「素数を判定する」
• 「2の指数の計算」
2^nの数が与えられたとき（nは10以下の自然数とする）、そのnを求める。
128が与えられる → 2の「7」乗である → 7を答えとして出力
1024が与えられる → 2の「10」乗である → 10を答えとして出力
• 「素因数を調べる」
2と3と5と7だけを素因数としてもつ数を考える。例）6、10、15、21、30、70…
これらの数が１つ与えられたとき、2が含まれているか、3が含まれているか、…
というように素因数のうちわけを判別する。（Yes/Noで，または含まれる個数で）
8�
第8回 全国高等学校情報教育研究大会（宮崎大会）

9. 3. Webシステム構築
• Koding https://koding.com
• いわゆるLAMP環境をすぐに利用可能
• HTML，CSS，PHP等の言語，
• Linuxのターミナル，サーバの設定まで
9�
第8回 全国高等学校情報教育研究大会（宮崎大会）

10. Webシステム構築 授業例
• 専門科目「ネットワークシステム」 3単位
• H26年度 履修者2名での開講
• LAMP環境について
• 実際に組立PCにOSからインストール
• WindowsPC上でVirtualBox＋Vagrantで仮想マシンを作成
• Kodingで出来合いの仮想マシンのVMを操作
• など行い，それぞれを比較する内容
• phpinfo()や簡単なスクリプトが実行できるまでの構築
第8回 全国高等学校情報教育研究大会（宮崎大会）
10�

11. 問題点 その１
• 利用するWebアプリの規約の問題
• 日本語以外の利用規約
• 取得される個人情報
• 登録した情報が利用される範囲
• ネットワーク負荷や同一のIPアドレスからの接続制限
• 多くのPC教室は，プロキシサーバやNATを利用して
外部からは一つのグローバルIPアドレスと見える
11�
第8回 全国高等学校情報教育研究大会（宮崎大会）
登録するメールアドレスは学校独自ドメインとした

12. 問題点 その２
• 作成物の公開範囲，利用期間
• アカウントを作らなくても利用できるパターン
• Paiza.io
• 利用後に,作成物を削除できるパターン
• Prott
• Koding
第8回 全国高等学校情報教育研究大会（宮崎大会）
12�
通常は無償版は非公開にできないものが多い
ed.jpメールアドレスのアカデミック特典で
非公開にできるものも

13. まとめ
• Webアプリを活用することにより，通常のPC教室の
環境だけでは学習しにくい内容も扱うことができた
• しかし，それぞれのWebアプリの提供者や利用規約
に注意が必要
• 理想的には授業のために作製する
同等のWebサーバを校内に設置するのが望ましい
第8回 全国高等学校情報教育研究大会（宮崎大会）
13�

14. 本日のスライドの公開場所
• http://www.slideshare.net/takuyanumazaki/150810
• ご意見，ご感想をお願いいたします。
https://www.facebook.com/takuya.numazaki
14�
第8回 全国高等学校情報教育研究大会（宮崎大会）