モバイル学会

原著論文

HTML5 を体感的に学習できるコンテンツ GOSEICHO （5 成長）
伊藤 一成 1)1)

青山学院大学社会情報学部“GOSEICHO” (5 SEICHO)- HTML5 content which can be learned with bodily sensation Kazunari ITO1)
1)

School of Social Informatics, Aoyama Gakuin University

Abstract: This paper explains about a system named GOSEICHO (This Japanese means “thank you for yourattention”) that is a learning material to learn HTML5 with bodily sensation. GOSEICHO adopts 3 characteristics:
1. The difference of understanding GOSEICHO slide for every academic community. 2. Cognitive dissonance thatgenerates from the meaning of the word GOSEICHO. 3. Using human shaped pictogram, which has an effect toproject real human because of its high degree of abstraction. The characteristics of HTML5 are hardware accesswith consciousness of device diversity, enhancement of graphical function, control and playback of movie andaudio, accessing local storage, real-time bi-directional communication and so on. GOSEICHO is suitable forlearning HTML5 effectively because it includes these new HTML5 functions in single file and file size is not large
relatively.

Keywords: HTML5, mobile information literacy, mobile device, pictogram
キーワード: HTML5, モバイル情報リテラシ，モバイル，ピクトグラム

このような情報機器リテラシの教育は，それ自体を目的化し

1. はじめにすぎると，知識注入型の啓蒙教育や，禁止や抑制による強制HTML5[1]が，W3C から 2014 年 10 月に勧告された．従来の Web システムは，PC で動作する Web ブラウザでの閲覧を前提に設計されてきたが，多端末時代の到来や，動画音声配信やマルチメディアコンテンツを駆使して表現力を向上させた
いというニーズを意識せざる得なくなっている．実際 HTML5
で新たに追加された仕様には，スマートフォンやタブレットなど，的方策が主に取り入れられてしまうことがある．しかしモバイルネット社会がすでに浸透した現在，日常利用の中で不意な操作や行動に対して気づきを与えつつ，個々人が自律的に情報機器や SNS との関わり方を考えていく社会が望ましいだろう．
そこで，HTML と情報機器利用リテラシを相補的かつ暗黙的に学習できるコンテンツの開発を続けている．

多様な端末への対応を意識したものも多い．アプリケーション
プラットフォームとしてのブラウザの役割に一層拍車がかかるであろう．

以後 2 章では開発してきた，情報機器利用リテラシを醸成するためのコンテンツ「GOSEICHO」[3][4]について簡潔に説明する．3 章ではそのコンテンツが HTML5 の新機能を網羅しまたスマートデバイスやタブレットの関連技術の進化と相まていることを例示し，4 章では，今回追加した機能及び実際のって，その急速な普及に伴い，情報機器との関わり方に関す利用のプロセスを提示し，5 章で関連研究，6 章でまとめる．

るリテラシが注目されている．スマートフォン自体の可搬性に

2. GOSEICHO について加え，プッシュ通知アプリケーションの増加や SNS の普及ともGOSEICHO1は，以下の 3 要素を取り入れた単一の Web ペ相まって，不意に別の作業に移行してしまったり，スマートフォンの過度な使用が健全な生活活動自体を脅かしうるといったージである．
1. 発表スライドの最終に提示されることがある「ご清聴あり社会問題が発生しており議論が盛んになっている[2]．

がとうございます」とだけ書かれたスライド（通称，ご清聴スライ
2015 年 2 月 11 日受理．（2015 年 3 月 12-13 日シンポジウム「モバイル'15」にて発表）

ド）に対する学術コミュニティ毎の考え方の差異をテーマにしている．
1

モバイル学会誌, Vol.5 (1), pp.21-26 (2015)

http://goseicho.com , http://goseicho.info , http://goseicho.net
21伊藤一成: HTML5 を体感的に学習できるコンテンツ GOSEICHO （5 成長）

2. 「ご清聴ありがとうございます」という言葉の意味から発生を育成する事を目的としている．

する認知的不協和を利用する．

GOSEICHO は PC での表示も想定している．端末自体を裏

3. コンテンツにピクトグラムを取り入れている．その表現の抽象度の高さから，自分自身や本人に関わる人物事物と同一視する効果を狙う．

返し，傾きセンサの値を変化させることで利用不可能状態にするため，デスクトップパソコンやノートパソコンには適用できない． GOSEICHO では PC の場合もスマートデバイスと同様スマートデバイスで利用する場合，液晶画面を地に向けた状態，つまりは机や床などの上に裏返しで置かれている状態に，操作を禁止するのではなく，一連の操作に対して気づきを与える設計指針とした．

（この状態をご清聴状態と呼ぶ）は，一種の使用不可状態になることを利用する．スクリーンショットを図 1 の（１）から（３）に示PC の場合，ディスプレイ画面の一定領域以上を特定のアす．初期状態（この状態をご清聴準備状態と呼ぶ）では図 1 のプリケーションの表示で占めた状態を保持すれば，それ以外（１），その後（２）を表示させ，ユーザに対しスマートデバイスをのアプリケーションを表示していないことになる．そこで，裏返しにするように促す．

GOSEICHO が表示されているブラウザの表示領域を常時監視することでご清聴状態にあるか判定する．
図 1 の(4)にご清聴準備状態のスクリーンショットを示す．「画面を最大化してください」という文字列を表示，画面領域のリサイズを促す．ブラウザ画面をリサイズし，ディスプレイの 95%以上の幅かつ 80%以上の高さに相当するピクセル数以上(ただし，メニューバーなどを除く純粋な Web ページ表示領域)の画面領域になると，「ご清聴ありがとうございます」の音声が再（１）

（２）

（３）

生され，ご清聴開始状態に移行する．ブラウザで表示された
ご清聴ページには，イベントハンドラに関する JavaScript のコードが埋め込まれており，最大化，最小化ボタンの押下によるものも含む画面のリサイズ，タブブラウザでの表示されているタブの変更，アクティブウィンドウであるか否か，ブラウザウィンド
ウの位置移動を常時監視し，イベントが発生した場合は，ご清（４）（５）

図 1 GOSEICHO のスクリーンショット(（１）〜（３）：スマートフォン，（４）〜（５）：PC で表示)

聴準備状態に戻る．
文献[3][4]では，GOSEICHO（ご清聴）に関する開発の動機，設計指針や情報機器利用に関するリテラシー育成の視点からそもそも「ご清聴」は，清らかに聴こえるこという意味である．

論じているが，本論文では詳細は割愛する．本論文では，内なる自分が清らかに聞こえているか～聞こえていないかを

HTML5 を 体 感 的 に 学 習 す る コ ン テ ン ツ の 視 点 か ら ，内省しなければ確認できない．講義中や会話の場において，GOSEICHO(5 成長2)について解説する．

状況を省みず使用している際に「ご清聴ありがとうございます」

3. HTML5 学習コンテンツとしての GOSEICHOという言葉で指摘することは，不意に講義の内容や他者からの会話に目もくれず情報機器に没頭してしまっていたと認識

3.1 概要HTML5 は，主に以下の新機能を標準でサポートするのがした場合は，認知的不協和が発生することになる．この認知的不協和の効果を使った例に，駅や店のトイレに「きれいに使っ大きな特徴である．ていただきありがとうございます」と掲示するというのが有名で

1.

端末の多様化を意識したハードウェアアクセスある．これと同様の効果を狙っており，「ご清聴ありがとうござい2.

グラフィック機能の大幅な強化ます」という表示や音声で利用者に気づきを促す．また，本人

3.

映像，音声の再生およびコントロール

4.

ローカルストレージへのアクセス

5.

リアルタイムな双方向通信

が GOSEICHO を使用して，適切に「ご清聴状態」を堅持したのであれば，「ご清聴状態」終了後の「ご清聴ありがとうございます」の提示は，純粋な感謝の意味で受け取られる．
このように使用禁止による強制的方策ではなく，あくまで使いながら自分のスマートデバイス使用が適切なのか否かの気づきを継続的に与えつつ，スマートデバイス利用の規範意識

222

HTML5 を学習しつつ成長するという視点から GOSEICHOを HTML5 の「5」と「成長」という 2 単語を連結し，「5 成長」と名付け，あえて「ご清聴」と区別し表記することとした．
Vol.5(1), pp.21-26(2015), J. Mobile Interactions

モバイル学会

GOSEICHO はわずか数百行ほどの単一の HTML ファイルに関する仕様である[5]．モバイルデバイスの普及による液晶（以下 GOSEICHO ファイルと呼ぶ）に，HTML5 で勧告されたの高解像度化，また地図情報に代表されるようにインタラクテ

上記 5 種類の様々な項目を凝縮することを実装の際の指針とィブな図形の形状変化や画面拡大や縮小を伴う操作が一般している．近年では SPA(Simple Page Application)と呼ばれる的になったため，ベクタデータの重要性が増している．

全ての処理を単一のページで完結させるアプリケーションア

HTML5 では，グラフィックス描画に関する機能も大幅に強化ーキテクチャーが普及している．この方式は，コードリーディンされている． HTML 内にインラインで SVG(Scalable Vector

グ学習の効率化と扱いやすさに重点を置く学習コンテンツのGraphics)を記述できるようになっている．

作成においても親和性が高い．以下 3.2 節から 3.6 節ではこれら 5 種類の要素が GOSEICHO ファイル内でどのように含まGOSEICHO ファイルでは，SVG の以下の要素をコンパクトに記述している．

れているかについて解説する．

3.2 ハードウェアアクセス
モバイル端末の多くは，傾き，加速度，位置，ジャイロなどのセンサが内蔵されている．例えば，傾きセンサは XYZ 軸の 3軸 を 認 識し ， 現 在 の 端 末 の姿 勢 を 認 識 でき る ． そ の 値 はJavaScript で取得可能である．このように HTML5 では，多種のセンサが内包するデバイスを想定した，ハードウェアアクセスのための API も整備されているのが特長である．

1． プリミティブ図形の描画（circle タグでピクトグラムの頭を,path タグで体を表現）
2． アニメーション
3． 文字情報の表示と変更
4． 図形要素に対するイベントハンドラ
ベクタデータはテキストデータなので，一般的に複雑な

HTML5 では JavaScript を使って，センサ情報を利用したプ図形の SVG を HTML 上にインライン展開するとデータ量がログラムが簡潔に記述可能である．GOSEICHO では，以下の膨大となる．GOSEICHO では，単純な人型ピクトグラムを使端末の姿勢検知のサンプルプログラムを提示している．

用して，コードサンプルを提示する．図 3 に実際のコードを

図 2 では，JavaScript の window オブジェクトにイベントリスナ例示するを追加登録している． JavaScript のイベントドリブンの一般的<svg>

記法について学習できる．

<path fill="#666666"
d="M33.63,23.847c0‐4.833‐5.153‐7.063‐8.385‐7.063H8.483C4.35,16.784,0,20.099,0,24.187c0,0.341,0,28.276,0,28.276c‐0.003,1.257,1.414,2.
497,3.105,2.501c1.691,0.002,3.063‐1.354,3.06
5‐2.61v‐24.66l1.756‐0.37L7.774,95.087c0,1.88
5,1.705,3.412,3.808,3.412c2.103,0,3.808‐1.52
7,3.808‐3.412v‐32.79l2.721,0.007v32.915c0,1.
884,1.704,3.412,3.807,3.412c2.104,0,3.809‐1.
528,3.809‐3.412L25.66,27.491l1.822,0.191v24.
66c‐0.003,1.257,1.365,2.618,3.057,2.622c1.69
1,0.002,3.064‐1.354,3.065‐2.61L33.63,23.847z" />window.addEventListener('deviceorientation',function(e) {if (Math.abs(e.gamma) > 170) {//スマートデバイスが裏返しの状態の時の処理}});図 2 ハードウェアアクセスに関するソースコード<circle fill="#666666" cx="17.127" cy="8.05"
r="8.05"/></svg>

3.3 映像音声の再生およびコントロール
HTML5 では，映像，動画は，video 要素，音声は audio 要
素を使うだけで再生，各種コントロールが可能である．

図 3 人型ピクトグラムの SVG 形式による表示

3.5 ローカルストレージGOSEICHO では，スマートフォンのブラウザで Web ページを

HTML5 では，Web Storage と呼ばれるユーザデータをロー開いている状態で，スマートフォンを裏返しの状態にすると，カルストレージに保存する仕組みが追加された．以前からそれを検知して，音声が再生されるようになっている． 裏返し

Cookie という類似する仕組みが存在したが，Cookie ではサー操作が完了すると「ご清聴ありがとうございます」の音声が再びバにアクセスする度に自動送信されサーバで処理されることを再生される．画面上に文章を表示しても(3)ご清聴状態に移行前提としており，またデータ量の上限が 4KB と小さいため，用したか確認できないので，利用者にその旨伝達するため音声途に限界があった．また近年セキュリティの点から個人情報やで知らせる機能を実装している．

ログをサーバ側にではなく，クライアント側の端末で定常時保3.4 グラフィックス描画持し，必要な場合に必要な情報のみ送出する方式も用いられ

SVG とは W3C で標準化されているベクタグラフィックス記述
モバイル学会誌, Vol.5 (1), pp.21-26 (2015)

るようになってきた．HTML5 では必要とするデータを全てロー

23

伊藤一成: HTML5 を体感的に学習できるコンテンツ GOSEICHO （5 成長）

カルに蓄積させたオフラインアプリケーションも実装することがCSS(Cascading Style Sheets)，JavaScript など横断的に幅広くできる．

学習する必要があり，知識注入型の単元学習では，項目数自ユーザが自由に決めた ID をメソッド setID()で保存する
GOSEICHO ファイル中の JavaScript サンプルコードを図４に体が膨大になってしまう．よって単元学習によって体系的に学習を進めるためには，相当の時間と継続的な動機を要する．
そこで体感的に HTML5 の新機能やそれに付随する新機能を示す．

概観できる仕組みを実装した．
var storage = localStorage;function setID() {var value =document.getElementById("id").value;if (value) {storage.setItem("id", value);}}

図 4図 6 に利用想定図を示す．ここで，2 章で示した従来のGOSEICHO（ご清聴）の方法で利用する端末を「操作用端末」，
GOSEICHO ファイルの HTML ソースを表示する端末を「表示用端末」と呼ぶ．
図 6 では，スマートフォンを操作用端末，PC を表示用端末と想定しているが，表示用端末は必ずしも PC である必要はな

LocalStorage のサンプルコード

く，スマートフォンやタブレット端末でも構わない． 表示すべGOSEICHO では，他に，ご清聴状態に移行した日時などのきソースコードの表示用端末の画面がそれほど大きくなくても，履歴を Web Storage で追記保存していく．

単元ごとに該当するソースコード量は多くないからである．

3.6 リアルタイムな双方向通信

4.2 操作用端末と表示用端末の対応付け

HTML5 の策定とともに，リアルタイムな双方向通信を実現する仕組みが実用化している．WebSocket は最終的には
HTML5 から分離し，独立した規格で策定が進められているが，一時期は HTML5 仕様の根幹をなす技術の一つであった．

GOSEICHO ページにアクセスした端末は初期状態では，操作用端末の扱いになっている．操作用端末の表示用端末への切替えは，画面上に表示されている人型ピクトグラムの頭の部分をタップあるいはクリックする．操作用端末と表示用端末

GOSEICHO でも WebSocket を用いて，複数の端末間でメッで連携するための対応付けは，次の順序で行なう．

セージを送受信する． 図 5 に GOSEICHO の WebSocket に関連するソースコード（一部改変）を示す．

端末間のリアルタイム非同期通信は 3.6 節の図 5 で説明した WebSocket を使って実現している． サーバを介さず操作

function createSocket(id){
if ("WebSocket" in window){
ws = new
WebSocket("ws://goseicho.com:3000/");ws.onmessage = function (evt){
jumpLabel(evt.data);};｝function sendLabel(id){ws.send(id);}用 端 末 と 表 示 用 端 末 を P2P で 通 信 す る WebRTC(WebReal-Time Communication)を用いるのが基本であるが，クライアント側の処理が煩雑になるという欠点が存在する．本件では，この処理を行なうソースコード部分も学習用コンテンツに含まれることになるため，今回は WebSocket で実装している．
図 6 に示す利用想定図に沿って説明する．

function jumpLabel(id){location.href = "#"+id;}

図 5 リアルタイム双方向通信のサンプルコード

4.体感的学習コンテンツとしての GOSEICHO
4.1 概要HTML 言語学習の動機と一概にいっても実に様々な文脈が考えられる．情報科学分野の講義では，データ構造化の一単元として，またデザイン関係では，Web ページ作成技法を学ぶ上で HTML は必須事項であることは言うまでもない．
ま た Web 作 成 技 法 の 習 得 に は ， HTML だ け で な く ，

24

図 6 利用想定図(1) GOSEICHO ページにアクセスするとサーバとの間に，ソケットを確立する．
(2) 端末のローカルストレージに格納されている ID 情報を送信する．

Vol.5(1), pp.21-26(2015), J. Mobile Interactions

モバイル学会(3) いずれか端末に表示されている人型ピクトグラムの頭をタップ/クリックし，表示型端末にモードを変更する．

た，HTML5 の新機能に起因して発生しうるセキュリティ問題が(4) 操作内容に応じてフラグメント識別子の文字列が，操作用端末からサーバに送出される．サーバ側で全てのソケットが集中管理されており， 送出された端末の ID と同じ ID を持つ全ての端末に対して，そのフラグメント識別子の文字列がサーバから送出される．の（変換前）のソースは，図 3 に示した人型ピクトグラムの頭の(5) 表示用端末では，受信したフラグメント識別子の文字列が id 属性値である span 要素に囲まれた領域をハイライトで表示する．例えばスマートデバイスの端末を操作し，ご清聴開始状態に移行した際は，表示用端末で図 2 に示した条件判定箇所のソースコードを表示する．になる．また 2 行目の SVG の circle 要素中のタグや引用符

4.3 実装方式
図 6 中の (1)〜(3)は，3．6 節の図 5 に例示したように，WebSocket のプロトコルを使って実装した JavaScript プログラ
ム を GOSEICHO フ ァ イ ル に 内 包 し た ． 端 末 間 通 信 は ，懸念されている[9][10]．実際の変換列を，図 7 に示す．図 7 中部分に相当する円の SVG 表記である．1 行目と 4 行目にHTML のコメント内に span タグを記述している．変換後は，コメント文字列(<!-- , -->)が削除されるため，span 要素が有効が実体参照に変換されるので，その結果ブラウザ上でソースコードがそのままに表示される．
(変換前)<!‐‐ <span id="Head"> ‐‐><circle onclick="switchMode()" fill="#666666"
cx="17.127" cy="8.05"
r="8.05"/><!‐‐ </span> ‐‐>（変換後）集中管理する．図 6 の(1)で送信する ID は，3.5 節の図 4 で説<span id="Head">&lt;circle onclide=&quot;switchMode()&quot;
fill=&quot;#666666&quot; cx=&quot;17.127&quot;
cy=&quot;8.05&quot; r=&quot;8.05&quot;/&gt;</span>

明したローカルストレージに格納されている ID を使用すること

図 7 一行コメントの付与例およびソースの変換例

Python 言語で書かれた別プログラムをサーバ上でサービスとして起動し，WebSocket による接続要求のあったソケット群をにした．操作用端末と表示用端末は ID の同一性により連携しているので，必ずしも 1 対 1 でなくても良い．つまり PC 教室での多人数講義での利用も想定可能である．教員がスマートフ
ォンで，一連の操作を行ないつつ，学生個々の端末に対応するソースコードが表示されるような適用法も可能である．

GOSEICHO ファイル内の JavaScript 領域および CSS 領域に対しても同様に，一行コメントにより id 属性を持つ span 要素をコメントアウトし，タグが有効になるように変換する． 図 8 に例を示す．
（JavaScript 領域に含まれる場合）

表示用端末化するには，GOSEICHO ファイル自身のソースコードを読み込み，全体をそのまま表示端末の画面上表示する．読み込みは JavaScript を使って，ブラウザ上でサーバとHTTP 通信を行なうための API である，XMLHttpRequest を使う．そもそもソース一式を一度だけ読み込む場合に適している方式である点と，可能な通信方式を WebSocket の他にもソー// <span id="sendLabel">function sendLabel(label){ws.send(label);}// </span>（CSS 領域に含まれる場合）

HTML の動的な変更を伴うが，それは DOM の API を使う事で，/* <span id="CSS1"> */span:hover{ position: relative; }/* </span> */構造化文書の為のプログラミングインタフェースについて学習図 8 JavaScript および CSS 領域内での記述例

ス自体に組み込むことで教材としての網羅性を向上させる．

する機会を与える．

5. 関連研究
ソースコードの特定領域を表示用端末で表示するために，フラグメント識別子を属性値とする span 要素を記述し，HTMLのページ内リンクを使用して実現した，さらに span 要素で囲われた部分をハイライト表示，ユーザがその領域を把握しやすくしている．

HTML5 技術は，教育関連のアプリケーションにも広く用いられている． 特に，ネイティブアプリケーションに比べて実装や運用が容易なため，技術的なバックグラウンドを必ずしも持たない教育関係者でも開発への敷居が低くなった事，またHTML5 の新機能が教育システムで必要とされる要件に比較表示させたい特定領域は，一行コメント形式で記述しておき，的親和性が高いことが挙げられる．

ソースコード全体を読み込み表示する際に，コメントアウトの部分を削除する．表示する際，「&」,「”」，「’」，「<」,「>」の文字を実体参照に変換しながら読み込む．セキュアコーディングでは基本的事項であるサニタイズを意識させるようにする[8]．まモバイル学会誌, Vol.5 (1), pp.21-26 (2015)

教室内でもプラズマディスプレイ，PC タブレットなど多端末化が進められ，それら端末間の画面転送を HTML5 ベースで構築する流れも見受けられる[8][9]．画面転送は Windows リモ

25

伊藤一成: HTML5 を体感的に学習できるコンテンツ GOSEICHO （5 成長）

ートデスクトップや VNC などいくつかの技術が存在したが，OS大学面接授業「ウェブテクノロジー実習」で実施する．今後はに依存したり，環境構築にコストがかかるなどの問題があった．

カリキュラム設計の妥当性検証や学習評価も継続していく予

ブラウザ上で動く Web アプリケーションが主流になったので，定であり，結果は稿を改めてまた報告したい．

HTML5 の WebSocket を用いてブラウザ画面の転送を行なえ

謝辞

ば，デスクトップ画面転送と同等の機能を実現できることにな

本研究は JSPS 科研費 20406812, 25350322, 26330140 の助成を受けたものです．

るからである．
伊 藤 ら は ， HTML5 を 用 い た 情 報 倫 理 教 育 の た め のe-Learning シ ス テ ム の 開 発 [10] の 中 で ， HTML5 のWebStorage を使って学習記録保存機能を実装している．
長谷部らは，HTML5 を用いた幼稚園における保育記録活用システムの開発を行なっている[11]．保育記録をデジタル化する上でのシステムの提案，設計，開発を行なう上で，ドラッグアンドドロップやオーディオ，アニメーション機能を重要視しているのが見受けられる．入出力インタフェースに関する機能向上が採用の理由になっている．
数学教育や理科教育の現場でも利用が広がっている．
HTML5 では，数式表現のための仕様である MathML が SVGと同様に直接 HTML 内でマークアップできるようになり，MathML を利用した研究も進められている[12]．また，図形理解や，物理シミュレーションの学習コンテンツにも HTML5 の図形処理機能をうまく利用したものが存在する．
GOSEICHO は HTML5 自身の学習を一つの目的としており，HTML5 での教育関連システムを構築する際，まずは新機能を概観するのにも適していると考えている．また今回は教育分
野で HTML5 利用の関連研究を紹介したが，言うまでも無く他分野でも HTML5 を用いたコンテンツ作成がますます重要度を増すと考えられる．

6.まとめ
わずか数百行ほどの単一の HTML ファイルに HTML5 の新機能を網羅的に組み込み，また HTML5 の概要把握を体感的な操作によって学習可能な仕組みを構築した．
現状では一連の学習を行うためには，操作用端末側のイベントの恣意的な発生を必要とするため，表示用端末からの教示に基づき操作用端末を操作する機能を追加する予定である．
本稿では，HTML5 の新機能を題材に，効率良く学習することを目的とする側面から GOSEICHO（5 成長）を解説した．本コンテンツは，2015 年度より開講の放送大学 TV 講座「Web のしくみと応用」でも，HTML や多様な情報機器時代におけるWeb コンテンツの作成技法を概観する際に用いている． また，
HTML5 の新機能を題材にしつつ 3.2 節から 3.6 節で挙げた項目について学習する講義を 2015 年度より，90 分×8 コマを使って，筆者所属学部の講義「ウェブテクノロジー」及び放送

26

参考文献
[1]
[2]

http://www.w3.org/TR/html5/
齋藤長行: 青少年のインターネットの利用実態を基にした啓発教育政策の評価と方向性に関する研究,情報処理学会研究会「コンピュータと教育」,
Vol.2013-CE-120, No.7 (2013).
[3] 伊藤一成: スマートフォンやタブレットの不用意な利用を抑制するシステム GOSEICHO の試作，情報処理学会研究会「コンピュータと教育」,
Vol.2013-CE-121, No.16 (2013).
[4] 伊藤一成: PC やスマートデバイスの日常利用に 気づきを与えるシステム GOSEICHO の拡張，情報処理学会研究会「コ ンピュータと教育」,
Vol.2013-CE-126, No.11 (2014) .
[5] http://www.w3.org/Graphics/SVG/[6] 情報処理推進機構: セキュア•プログラミング講座
http://www.ipa.go.jp/security/awareness/vendor/progr
ammingv2/index.html[7] JPCERT/CC： HTML5 を利用した Web アプリケー
ションのセキュリティ問題に関する調査報告書,
https://www.jpcert.or.jp/research/html5.html[8] 和田康宏, 大西克実, 中野秀男：BYOD を活用した授業支援システムの開発と評価，情報学 Vol.11
No.2, pp.1-18 (2014).
[9] 山之上卓，小荒田裕理，小田謙太郎，下園幸一：
HTML5 技術を利用した授業や会議向けデスクトッ
プ画面実時間配信システムとその管理システムの試作." 情報処理学会研究会「インターネットと運用技術」Vol.2014-IOT-26, No.11 (2014).
[10] 伊藤穣： HTML5 とスマートフォンによる情報理論
教育 e-Learning システムの開発.跡見学園女子大学文学部紀要 48, pp.159-171 (2013).
[11] 長谷部珠音，加藤直樹，坂東宏和：幼稚園における保育記録活用を支援するシステムの開発，Vol.2014-CE-124, No.3 (2014).
[12] 山下伸男, 江見圭司：HTML5 時代の数式表示可能な数学のコミュニケーションシステムと e-ラーニングシステムの構築 (2014 年度 第 1 回研究会 eラーニング環境のデザインと組織マネージメント/医療・看護・福祉分野における ICT 利用教育/一般). 教育システム情報学会研究報告,Vol.29, No.1,pp.35-38 (2014).

著者紹介
伊藤 一成（正会員）
2005 年慶應義塾大学大学院理工学研究科後期博士課程修了．博士（工学）．2005 年より青山学院大学，現在に至る．主に，メディア情報処理及びその教育利用に関する研究開発に従事．

Vol.5(1), pp.21-26(2015), J. Mobile Interactions