Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webアプリを利用した
情報科の授業案の提案	
千葉県立柏の葉高等学校
情報理数科 沼崎 拓也
自己紹介	
• 沼崎 拓也(ぬまざき たくや)
•  平成19年度より千葉県の情報科教員
•  現在は柏の葉高校 情報理数科に所属
 専門学科「情報科」の学科である
• 教員免許は高校 情報&理科&数学,元教科「なし」
• Mac好き,ガジェッ...
背景	
• Microsoft Office 365やGoogleのChromebook
• クラウド版アプリケーションが当たり前の環境となる
• これまでに取り組んだWebアプリを利用した
題材を紹介する
• それらで学べることと問題点として...
Webアプリを利用した実践例	
1.  「ペーパープロトタイピング」
2.  「プログラム作成」
3.  「Webシステム構築の学習」
この3つの授業例について紹介する	
第8回 全国高等学校情報教育研究大会(宮崎大会)	
 
4�
1.  ペーパープロトタイピング	
• ペーパープロトタイピングとは
「紙面上で,画面やUIのプロトタイプを作成することで,実際の
画面遷移やデザインを確認していくプロトタイピング」
プログラミングでアプリを作るのは難しいが,アイディアだけな
...
ペーパープロトタイピング授業例	
• スマートフォンアプリのペーパープロトタイピング
• H26年度 学校設定科目「情報心理」 19名
•  「各自が作ってみたいアプリ」のアイディアをプレゼン
• H27年度 専門科目「情報デザイン」 7名
•...
2.  プログラミング	
• 従来の環境では
•  安価に開発環境が揃う前提で言語を決定する傾向に
•  VBA,JavaScript,Visual Studio系
• paiza.io https://paiza.io/
•  24の言語をオ...
プログラミング授業例	
• 学校設定科目「情報数理A」
•  数学的な内容を,プログラミングで解答する
•  「言語は自由」というやり方でアウトプットを評価してみた
 → 提出されたコードをpaiza.ioで実行して確認
•  「素数を判定する...
3.  Webシステム構築	
• Koding https://koding.com
•  いわゆるLAMP環境をすぐに利用可能
•  HTML,CSS,PHP等の言語,
•  Linuxのターミナル,サーバの設定まで
9�
第8回 全国高等学...
Webシステム構築 授業例	
• 専門科目「ネットワークシステム」 3単位
•  H26年度 履修者2名での開講
•  LAMP環境について
•  実際に組立PCにOSからインストール
•  WindowsPC上でVirtualBox+Vagr...
問題点 その1	
• 利用するWebアプリの規約の問題
•  日本語以外の利用規約
•  取得される個人情報
•  登録した情報が利用される範囲
• ネットワーク負荷や同一のIPアドレスからの接続制限
•  多くのPC教室は,プロキシサーバやN...
問題点 その2	
• 作成物の公開範囲,利用期間
•  アカウントを作らなくても利用できるパターン
•  Paiza.io
•  利用後に,作成物を削除できるパターン
•  Prott
•  Koding
第8回 全国高等学校情報教育研究大会(...
まとめ	
• Webアプリを活用することにより,通常のPC教室の
環境だけでは学習しにくい内容も扱うことができた
• しかし,それぞれのWebアプリの提供者や利用規約
に注意が必要
• 理想的には授業のために作製する
同等のWebサーバを校内に...
本日のスライドの公開場所	
•  http://www.slideshare.net/takuyanumazaki/150810
• ご意見,ご感想をお願いいたします。
https://www.facebook.com/takuya.numaz...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
タイピング練習のすゝめ
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Webアプリを利用した情報科の授業案の提案

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Webアプリを利用した情報科の授業案の提案

  1. 1. Webアプリを利用した 情報科の授業案の提案 千葉県立柏の葉高等学校 情報理数科 沼崎 拓也
  2. 2. 自己紹介 • 沼崎 拓也(ぬまざき たくや) •  平成19年度より千葉県の情報科教員 •  現在は柏の葉高校 情報理数科に所属  専門学科「情報科」の学科である • 教員免許は高校 情報&理科&数学,元教科「なし」 • Mac好き,ガジェット好き,Web大好き • パソコン通信時代よりネット歴22年 第8回 全国高等学校情報教育研究大会(宮崎大会) 2�
  3. 3. 背景 • Microsoft Office 365やGoogleのChromebook • クラウド版アプリケーションが当たり前の環境となる • これまでに取り組んだWebアプリを利用した 題材を紹介する • それらで学べることと問題点として何があげられるか (*)ここでは「Webアプリ」という用語は広義のものとする 3� 第8回 全国高等学校情報教育研究大会(宮崎大会)
  4. 4. Webアプリを利用した実践例 1.  「ペーパープロトタイピング」 2.  「プログラム作成」 3.  「Webシステム構築の学習」 この3つの授業例について紹介する 第8回 全国高等学校情報教育研究大会(宮崎大会) 4�
  5. 5. 1.  ペーパープロトタイピング • ペーパープロトタイピングとは 「紙面上で,画面やUIのプロトタイプを作成することで,実際の 画面遷移やデザインを確認していくプロトタイピング」 プログラミングでアプリを作るのは難しいが,アイディアだけな ら…というケースにも • Prott https://prottapp.com/ja/ 5� 第8回 全国高等学校情報教育研究大会(宮崎大会)
  6. 6. ペーパープロトタイピング授業例 • スマートフォンアプリのペーパープロトタイピング • H26年度 学校設定科目「情報心理」 19名 •  「各自が作ってみたいアプリ」のアイディアをプレゼン • H27年度 専門科目「情報デザイン」 7名 •  統一の題材で「メモ帳アプリ」のUIを考える 6� 第8回 全国高等学校情報教育研究大会(宮崎大会)
  7. 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. 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… これらの数が1つ与えられたとき、2が含まれているか、3が含まれているか、… というように素因数のうちわけを判別する。(Yes/Noで,または含まれる個数で) 8� 第8回 全国高等学校情報教育研究大会(宮崎大会)
  9. 9. 3.  Webシステム構築 • Koding https://koding.com •  いわゆるLAMP環境をすぐに利用可能 •  HTML,CSS,PHP等の言語, •  Linuxのターミナル,サーバの設定まで 9� 第8回 全国高等学校情報教育研究大会(宮崎大会)
  10. 10. Webシステム構築 授業例 • 専門科目「ネットワークシステム」 3単位 •  H26年度 履修者2名での開講 •  LAMP環境について •  実際に組立PCにOSからインストール •  WindowsPC上でVirtualBox+Vagrantで仮想マシンを作成 •  Kodingで出来合いの仮想マシンのVMを操作 •  など行い,それぞれを比較する内容 •  phpinfo()や簡単なスクリプトが実行できるまでの構築 第8回 全国高等学校情報教育研究大会(宮崎大会) 10�
  11. 11. 問題点 その1 • 利用するWebアプリの規約の問題 •  日本語以外の利用規約 •  取得される個人情報 •  登録した情報が利用される範囲 • ネットワーク負荷や同一のIPアドレスからの接続制限 •  多くのPC教室は,プロキシサーバやNATを利用して 外部からは一つのグローバルIPアドレスと見える 11� 第8回 全国高等学校情報教育研究大会(宮崎大会) 登録するメールアドレスは学校独自ドメインとした
  12. 12. 問題点 その2 • 作成物の公開範囲,利用期間 •  アカウントを作らなくても利用できるパターン •  Paiza.io •  利用後に,作成物を削除できるパターン •  Prott •  Koding 第8回 全国高等学校情報教育研究大会(宮崎大会) 12� 通常は無償版は非公開にできないものが多い ed.jpメールアドレスのアカデミック特典で 非公開にできるものも
  13. 13. まとめ • Webアプリを活用することにより,通常のPC教室の 環境だけでは学習しにくい内容も扱うことができた • しかし,それぞれのWebアプリの提供者や利用規約 に注意が必要 • 理想的には授業のために作製する 同等のWebサーバを校内に設置するのが望ましい 第8回 全国高等学校情報教育研究大会(宮崎大会) 13�
  14. 14. 本日のスライドの公開場所 •  http://www.slideshare.net/takuyanumazaki/150810 • ご意見,ご感想をお願いいたします。 https://www.facebook.com/takuya.numazaki 14� 第8回 全国高等学校情報教育研究大会(宮崎大会)

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

Views

Total views

555

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×