Research0208

拡張現実(AR)を使った

教材提示システムに関する研究

宮城教育大学

初等教育教員養成課程 情報・ものづくりコース

̶ 論文要旨 ̶

拡張現実（AR）を使った教材提示システムに関する研究

栗木直也

1. はじめに 本研究では携帯電話及びタブレット型 PC を使用して,子ども達が興味を持ちやすい授業 環境の整備を試みている.さらに本研究では Nintendo3DS 内蔵ソフト「AR ゲームズ」等か ら子ども達にとって身近になりつつある「AR（Augmented Reality）」技術を利用して教材 提供できないかを検討している. 現在 AR マーカー・QR コード（二次元バーコード）を利用して３D モデルを表示させる, また音声ガイドを行うなどの教材の開発が行われている.これらのマーカーを利用した新し い教材提示を検討すると共に,AR マーカー・QR コードがなくてもカメラを覗けば AR を利 用して学習ができる環境を作ることを目的とした. 2. 「junaio」環境の用意 本研究では,AR ブラウザ「junaio」を利用して様々な教材を提供する.「junaio」では自 前のサーバを持つことで,様々な教材を提示することができる.「junaio」を利用するために は LAMP（Linux・Apache・MySQL・PHP/Perl/Python）サーバが必要である.そのため 本研究ではインストール完了後すぐにサーバとして利用することができる LinuxOS 「Ubuntu server」を使用した.また,マシン環境がファイルとして簡単に扱え,何かに失敗し ても直前の環境に戻れることから,仮想化用ソフトウェアである VMware を用いてサーバの 構築を行った.そして「junaio」を使用するために必要な要件である Zend Framework のイ ンストールも行った. 3. “3 つ”の教材提示方法 3.1. 位置情報に基づく教材提示 「junaio」には特定の場所にタグを浮かばせ,GPS 等から得られる位置情報を使用してカ メラ越しにタグを表示させる機能がある.この機能を用いて,教室外での学習時に利用でき ないか検討をした.本教材は環境研前にあるバタフライガーデンにタグ付けし,音声ガイド として利用できるコンテンツにした.また,このタグには植物の詳細が書かれている URL も 貼りつけており,より詳しい内容を知りたい場合にすぐに調べることが出来るように工夫し ている.環境教育教材等の屋外学習においては実物を見る,触れることが大切であるので,コ ンテンツを対象物の目の前で使用することで学習をより深めることができると考える.また,

3.2. LLA マーカーを使う教材提示 GPS の電波が届かない室内では正確な位置情報を取得することが出来ないため,位置情報 を使用した教材は屋外のみでしか使用できないと考えられてきた.しかし, 「junaio」では緯 度・経度・高度を付与したマーカー（LLA マーカー）を利用可能なため,カメラでマーカー を読み取り,得られた位置に強制的に位置情報を置き換えることができる.また,同様に周辺 のタグも置き換えられ，カメラに表示されるようになる． 本来この機能は屋内での案内システムとして期待されているが,本研究ではこの機能を教 育に活かせないかと検討し教材を開発した.本教材は位置情報の強制置換を利用して,社会 科 5 年上「野菜作りの盛んな宮崎県」を題材に作成を行った.この単元では,宮崎県に多くの ビニールハウスがあることを予想し理解する場面がある.本教材では実際に宮崎県のビニー ルハウスがある場所にタグ付を行っており,LLA マーカーにより宮崎県の様子を知ることが 出来ると考えた.この教材はビニールハウスが多く存在することを印象づけることを目的と している.だが,タグのみであると子ども達は位置情報の変化により場所が変わったことを 意識しづらいのではないかと考えた.そこで,本教材を利用するには Google ストリートビュ ー等と一緒に使うなど子どもがイメージすることができる環境を考える必要があると思わ れる. 3.3. 画像に基づく教材 現在 AR を用いるときは AR マーカーを使用して色々なコンテンツを表示させるのが主流 である.しかし,この方法は AR を利用する都度,マーカーを準備する必要がある.子ども一人 一人にマーカーを配布することは効率の良い方法であるとは言えない.そこで本研究では, 誰もが持っている教科書の中の写真・絵・画像を AR マーカー化する「junaioGLUE」とい う機能を用いて,一種のマーカーレス化を図ることにした.本教材は国語科 2 年上「お手紙」 を題材とし,朗読してくれるコンテンツを作成した.教科書のイラストをカメラで読み込む ことでコンテンツを表示させることができ,AR 教材として使用できる.これにより,携帯端末 と教科書があれば子どもは,時間・場所に関係なく AR を使用して学習をすることができる ようになり,また教員も授業の補助教材,家庭での宿題や e ラーニング等に利用することも可 能であると考えている. マーカー画像の認識について,似た模様が羅列している,はっきりとした色・形をしていな いもの以外はマーカーとして認識され,機能することがわかっている.光の加減により認識 されにくいこともあるが使用に問題ない程度だと考えている.

4. マニュアルの作成 筆者が得られた知識・経験から教員が新たにコンテンツを作成する際の参考となるよう に「junaio」コンテンツ作成のマニュアルを作成した.「junaio」は日本でまだ利用してい る人が少なく,活用事例がほぼない.また,サーバが必要であること,動画等コンテンツの選択 やサーバへの置き場所等を指定したソースファイルを作成する,端末上での作業等など,一 般的に馴染みがない作業が多く,簡単に手を出しにくいコンテンツであるといえる.そのた め,本研究で作成したマニュアルを基にコンテンツ作成を行うことで,比較的作業が楽にな り,敷居を下げることにつながるものと考える. 5.まとめ 本研究で,「junaio」という,多機能であり,カスタマイズすることで,どの科目にも汎用性 のある使い方が可能なプラットフォームを見つけ,設定し,紹介することができた.また, 「junaio」を使用して 3 つの教材提示方法から複数の教材を作成することができた.今回の 研究で作成した教材は試験的で,授業等に活用できなかったことが大きな課題であり,活用 した効果については検証されたものではない.しかし,新しい授業形態として学校現場で活 用すれば,子どもの学習に対する興味,関心を高めることができると考えている.この考えを 実証する,また現場での意見をもとに教材の改良等を行うため,今後大学院に進学した後, 作 成した教材を教育現場等で活用できる機会を設ける予定でいる. また,マニュアルの作成により,興味を持った人や教員が気軽にコンテンツを作成するこ とが可能になったと考えられる.なお,今回は自前でサーバを準備することができる人を対 象としてマニュアルを作成している.自前でサーバを用意することが困難な人に対しては, レンタルサーバでの運用も可能であることが確認されている.

目次 1. 序論 ... 6 1.1. 研究背景 ... 6 1.2. ３年次の研究 ... 11 1.2.1. ARブラウザを利用した教材開発例 ... 11 1.3. 研究目的 ... 17 2. AR教材の作成 ... 18 2.1. 環境構築 ... 18 2.1.1. Ubuntu server ... 19 2.1.2. VMware ... 20 2.1.3. ZendFramework ... 22 2.1.4. 「junaio」準備事項 ... 23 2.2. Location-based AR 教材(位置情報に基づく AR 教材) ... 40 2.2.1. 概要 ... 40 2.2.2. 作成した教材 ... 41 2.2.3. 作成手順 ... 42 2.2.4. 現場における教材活用案 ... 66 2.2.5. 期待できる効果 ... 66 2.3. GLUE(image-based) AR 教材(画像に基づく AR 教材) ... 67 2.3.1. 概要 ... 67 2.3.2. 作成した教材 ... 67 2.3.3. 作成手順 ... 68 2.3.4. 現場における教材活用案 ... 75 2.3.5. 期待される効果 ... 75 3. 考察 ... 76 4. 参考文献 ... 81 5. 謝辞 ... 83 6. 付録 ... 84 6.1. 付録 1 「junaio」 共通作業マニュアル ... 84 6.1.1. 「junaio」準備事項 ... 84 6.2. 付録 2 Location-based AR 教材マニュアル ... 101 6.2.1. 作成手順 ... 101 6.3. 付録 3 GLUE(image-based) AR 作成マニュアル ... 125 6.3.1. 作成手順 ... 125

1. 序論

1.1.

研究背景

平成 23 年度実施の小学校における新学習指導要領解説では，すべての教科において ICT(=Information and Communication Technology = 情報通信技術)を活用することにつ いて記されている.また,ICT を活用した学習指導は子どもによる ICT 活用と、教師による ICT活用に分けられる. 子どもによる ICT を活用した学習指導は,コンピュータや情報通信ネットワークなどの情 報手段の活用に慣れ親しむことから始め,情報手段を適切に活用できるようにするための学 習活動を充実すること,また授業内容をより深く理解することを促すことである. 教師による ICT を活用した学習指導は,主に教科の学習目標を達成するためであり,授業 中における ICT 活用である.授業中における ICT 活用とは,教師が授業の中で ICT を活用し, 学習課題を明確に把握する・子どもの興味・関心を高める・子どもにわかりやすく伝える ための指導方法である.その際,最も多く提示されるのはプロジェクターや実物投影機等を 使用した映像や音声の情報である.これらの情報を提示することは全ての教科指導の数多く の指導場面で実施可能であると考えられ,学習目標の達成を促す効果が期待される. また,小学校学習指導要領解説「総則編」1)_{においても,} ①. 教師がコンピュータや情報通信ネットワークなどの情報手段や視聴覚教材,教育機器な どの教材・教具を適切に活用することが重要である. ②. 各教科等の指導にあたっては,教師がこれらの情報手段に加え,視聴覚教材や教育機器な どの教材・教具の適切な活用を図ることも重要である.これらの教材・教具を有効,適切 に活用するためには,教師はそれぞれの情報手段の操作に習熟するだけではなく,それぞ れの情報手段の特性を理解し,指導の効果を高める方法について絶えず研究することが 求められる. と記述されており,ICT を活用した学習指導が極めて重要であるといえる. ICT 活用による効果については,平成 18,19 年度に実施された「ICT を活用した授業の効 果等の調査2)_{」から明らかになっている.この調査では,ICT の活用効果について授業を行っ} た教員の 93.3%が,教員が ICT を活用することで子どもの学力が向上すると回答した.ま た,91.0%が,子どもが ICT を活用することで学力が向上すると回答した.さらに ICT 活用に

よりも各教科の得点が高いことがわかる. 図 1-1 ICT 活用後に行った客観テストの成績結果 さらに,ICT を活用した授業後に,延べ 2,543 人の子どもに質問をした結果,ICT を活用しない 授業と比べて「知識・理解」,「関心・意欲」,「思考力・判断力」の向上が見られた(図 1-2). 図 1-2 「知識/理解」,「意欲/関心」,「思考力/判断力」に関する質問結果 以上のように,ICT を活用して学習指導することは,教師のみならず,子どもに対しても学 力向上に高い効果があることが明らかとなっており,ICT を活用した効果的な学習形態の確 立が期待される. さらに,近年は ICT を活用する授業形態だけでなく,誰が ICT を活用するのかということに も注目が集まっている.以前は電子黒板等を使用するなど,教員が ICT を活用して子どもに 授業を行う形態が多く見られた.しかし,最近は子どもが ICT を活用する場面,例えばデジタ

ル教科書1_{を使用するなどの授業形態に移行していくのではないかと考えられる(図 1-3).} 図 1-3 デジタル教科書の例 左上は啓林館,右上は東京書籍,中央下は光村図書から発売されている. その背景にあるのが近年のスマートフォン2_{やタブレット PC}3_{等の急速な普及である(図} 1-4). 図 1-4 スマートフォン,タブレット PC の代表例.左から Apple 社のタブレット PC「iPad」,同社スマートフォン「iPhone」,サムスン社スマートフォン「Galaxy」 1 _{「デジタル教科書」 従来の教科書をデジタルデータに置き換えたもの.}

(IT用語辞典 BINARY http://e-words.jp/)

2 _{「スマートフォン」 個人用の携帯コンピュータの機能を併せ持った携帯電話. 従来の携}

これらの ICT 機器を教育現場に導入し,子ども自身が ICT 機器を使用する場面が見られるよ うになった.特に iPad を代表としたタブレット PC は,教育に関するアプリケーションが豊 富であり,今後デジタル教科書として普及されていくことが期待されている(図 1-5). 図 1-5 iPad を授業で使用している場面(日経トレンディネットよりニュース「iPad で情報活用能力が高まる？千葉県袖ヶ浦高校が授業を公開」3)_{から引用)} そして,iPad 利用の教科書は紙の教科書より教育効果が高いという調査結果も発表され ている 4)_{.また,コンテンツを見るだけでなく現実の空間に重ねあわせて見ることができる} AR技術を教育現場に導入しようとする動きも見られるようになった5)_. スマートフォン等の普及により現在 AR4_{技術を手軽に利用できるようになった.AR 技術} は古くから研究されてきた技術であったが,使用するには高価な機材が必要であったため一 部 の 研 究 者 し か 扱 え な か っ た .し か し ,ス マ ー ト フ ォ ン 等 は 処 理 速 度 が 高 い こ と に 加 え,Wi-Fi5_{やカメラ,GPS}6_{タッチパネル型ディスプレイなど,AR を実用的に使うための機能} が全て揃っているものが多い.そのため,現在 AR 技術をスマートフォンで利用できる「AR 4 _{「AR(Augmented Reality(拡張現実))」 現実の環境から知覚に与えられる情報に,コンピ} ュータが作り出した情報を重ね合わせ,補足的な情報を与える技術

(IT用語辞典 BINARY http://e-words.jp/)

5 _{「Wi-Fi」 無線 LAN 機器が標準規格である IEEE 802.11 シリーズに準拠していること}

を示すブランド名

(IT用語辞典 BINARY http://e-words.jp/)

6 _{「GPS」 人工衛星を利用して自分が地球上のどこにいるのかを正確に割り出すシステム}

ブラウザ」の開発が進んでいる. 「AR ブラウザ」はスマートフォン等を用いるので,PC と比べてキーボードを必要としな い.そのため,直感的な操作性に優れており,子どもにも使用が容易である.現在は子どもの遊 びにも取り入れられているほど「AR」は身近な技術になってきている. 以上を踏まえて,本研究においては,スマートフォン等と AR 技術「AR ブラウザ」を組み 合わせ,授業で活用することができる方法及びどのような学習形態があるのか明らかにした い.

1.2.

３年次の研究

研究を進めるにあたり３年次に自分自身で作成した AR ブラウザを利用した教材を紹介 する.これらの教材は本研究同様,スマートフォン等と AR 技術を使用して教材の作成を行な った.

1.2.1. AR ブラウザを利用した教材開発例

現在 AR ブラウザが開発され,多くのユーザが使用している. しかし,AR ブラウザを利用した教材の存在は極めて少ない.そのため,筆者の過去の研究を事 例として見ていく.

1

セカイカメラ

6) 「セカイカメラ」は頓智ドット社が無償で提供している AR ブラウザである. 以下の図は 3 年次にセカイカメラのテストを兼ね,バタフライガーデンに教材として 作成したものである.音声ガイドとして利用できる教材を作成した(図 1-6). これはエノキというニレ科の植 物です。エノキは日本の国蝶オ オムラサキやゴマダラチョウ、テ ングチョウといった蝶の食草に なっています。 図 1-6 セカイカメラのエアタグ選択画面 1) 必要な機材 セカイカメラ／スマートフォン等 (ただし,全てのスマートフォン等が使用可能ではなく,以下の条件を満たす場 合に限る. ・ AR 技術を使用できる OS

・ 位置情報を把握するための GPS ・ 方角を取得するための地磁気センサー7

・ 風景を写すための背面カメラ ・ 情報を取得するための通信機能

これらの条件をみたすものとして,現在発売されているスマートフォンは適し たものが多くある.参考として iPhone はこれらの条件を満たすが,iPod touch に は GPS と 地 磁 気 セ ン サ ー が ,iPad に は そ れ に 加 え て 背 面 カ メ ラ が,iPad2(wifi モデル)には GPS が搭載されていないので,使用できない.) 2) 効果 「セカイカメラ」は位置情報を基にして,場所・対象物にエアタグ8_と呼ばれ る付加情報を,現実世界と重ねてカメラに表示することが出来る. 教材は本学キャンパス内にある「バタフライガーデン」に生息する植物にタ グ付されており,音声ガイドとして利用が可能である.これにより学習者がカメ ラで草木を見るだけで,学習できる環境が提供できると考えられる.また,QR コ ード9_{等が貼られた教材を野外で探すことは時間がかかってしまうが,作成した} 教材は発見が容易であるため迷うことなくコンテンツを利用することが出来 る. 「セカイカメラ」の良い点は 2 つある. 1 つ目は,インストール,エアタグの制作が無料であるので,誰もが簡単に使用 することができる. 2 つ目は,スマートフォンがあればエアタグを作成できるので,機材を準備す る必要がなく,タッチパネルでの作成のためわかりやすい. 3) 留意点 この教材を使用することでスマートフォン等があれば自分の好きな時間に 音声ガイドによる学習が可能である.さらに大勢の人数が一度に押しかけてき ても個別に説明がいらず,皆が同じ説明を平等に聞くことができるようになっ ている.そのため,本学のオープンキャンパスでも使用できた. しかし,作成した教材には以下の 3 つの問題点が考えられた. 7 _{「地磁気センサ」 磁界の大きさ・方向を計測することを目的としたセンサ.} (weblio辞書 http://www.weblio.jp/) 8 _{「エアタグ」 頓知ドットが開発した「セカイカメラ」で用いられる,カメラを通じて風} 景に仮想的に添付できる情報のこと.

イ) GPS 等の位置情報のズレが大きく,目標とする対象物から大きく離れた位 置にエアタグが浮かぶ ロ) 作成した教材とは関係のない別のエアタグが表示され,選別するためのフ ィルタリングが出来ない 現在街の至る所にエアタグが作成されており,セカイカメラを起動す ると教育に関係のないものも含めてカメラに表示される.授業等に使用 する場合,使用したい教材のみが表示される状態でないと実用的でない. そのため,フィルタリングが必要になる. ハ) エアタグの作成するに手間がかかる エアタグは設置したい場所でスマートフォンを用いて手入力で作成す る.そのため,大量のエアタグを複数箇所で作成するには手間がかかって しまう.また,タッチパネルでの手入力のため打ち間違えが起こることや, 音声データが置かれている URL を表記するにも時間がかかることが考 えられる. しかし,学校教育でスマートフォン等を使用して教材を提示しようとした 場合には問題点が生じる.それは,携帯回線(３G 回線10_{)を利用すると,利用端} 末の台数分の通信費がかかり,なおかつ使わない月にも月額利用料を支払わ なくてはならず,学校で人数分の携帯回線を維持し続けるには負担が大きい ことである. その解決策として,無線 LAN 機能が搭載されたスマートフォン等を選択す ることがあげられる.無線 LAN 環境を整え,無線 LAN 機能が搭載されたスマ ートフォン等を利用することにより,携帯回線(３G 回線)を利用する必要が なくなり通信費のコストを下げることができる.また,スマートフォンの SIM カード11_{を抜いても使用が可能であるものを利用することが必要である.こ} れにより端末の月額の使用料を抑えることが出来る. なお,最新の OS を維持し,脆弱性を随時修正し守るために１回線分だけ確 保しておけば安全で快適に使用でき,人数分の携帯回線を維持するより,はる かに安価に運用できることがわかっている. 10 _{「3G 回線」 第 3 世代(3G)携帯電話の通信ネットワークのこと.}

(IT用語辞典 BINARY http://e-words.jp/)

11 _{「SIM カード」 携帯電話会社が発行する,契約者情報を記録した IC カードのこと.}

2 Layar

7) 「Layar」は Layar 社が無償で提供している AR ブラウザである.このブラウザはタグ の閲覧専用であるため,ユーザがタグ付を行うことが出来る「みんなの Layar」という コンテンツを利用して教材の作成が行っている. 以下の図は 3 年次に「みんなの Layar」のテストを兼ね,バタフライガーデンに教材 として作成したものである.音声ガイドとして利用できる教材が作成できた(図 1-7). これはエノキというニレ科の植 物です。エノキは日本の国蝶オ オムラサキやゴマダラチョウ、テ ングチョウといった蝶の食草に なっています。 図 1-7 Layar のタグ選択画面 1) 必要な機材 Layar／スマートフォン等(選定するにあたりセカイカメラでの条件と同様の 条件が必要になる.)／PC 2) 効果 「Layar」は位置情報を基にして,タグと呼ばれる付加情報を,現実世界と重ねて カメラに表示することが出来る. 教材は本学キャンパス内にある「バタフライガーデン」に生息する植物にタ グ付されており,音声ガイドとして利用できる.これにより学習者がカメラで草 木を見るだけで,学習できる環境が提供できると考えられる.

2 つ目は,PC 上でタグの作成を行うので,スマートフォン等で作成するセカイ カメラに比べ,大量にタグを作成する場合でも作業ミスが少なくなる. 3 つ目は,PHP12_{等がインストールされたサーバを使用しタグの作成を行うこ} とでフィルタリングが可能である. 3) 留意点 この教材を使用することでスマートフォン等があれば自分の好きな時間に音 声ガイドによる学習が可能である. しかし,作成した教材には以下の問題点が考えられた. ・GPS 等の精度により位置情報のズレが大きく,端末の種類にもよるが,最大で 10m近くのズレが生じる 12 _{「PHP」 動的に Web ページを生成する Web サーバの拡張機能の一つ.また,そこで使} われるスクリプト言語.

3 AR

ブラウザを活用に関する共通の留意点

関連研究では AR ブラウザ「セカイカメラ」「Layar」を用いて教材作成が行った.2 つの AR ブラウザの違いは以下の表にまとめてある(図 1-8).

セカイカメラ

_!"#"$

位置

_%

測定

_%

技術



&'(%

地磁気センサ

_%

無線

_!)*%

情報

_%

入力

_%

方法

セカイカメラ対応端末を

_%

携帯し、

_%

入力したいデータがあ

るその場で入力を行う。

%

「みんなの

_{!"#"$」を利用し、}

+,-ブラウザ上から%

入力を行う。

_%

または、

'.'等が%

インストールされた

%

サーバを用意し

_%

'/で情報入力を行う。%

フィルタ

リング

利用不可

サーバを用意し、

_%

'/で入力を行う場合のみ%

利用可能

図 1-8 セカイカメラと Layar の比較表 2 つの教材はスマートフォン等を持っていくだけで学習ができる環境を提供できるこ とから,GPS 等を用いた教材の有用性は高いと考えられる.だが,現時点でこれらを教材 として使用するには検討の余地がある.まず,GPS 等精度の向上次第によりタグの出現位 置が改善され教材として活用できることが可能になると考えられるが,まだ時間のかか ることであると考えられる.次に,作成した教材は植物という小さな生物を対象としてい たことが問題であり,建物など大きなものを対象とすれば教材として成り立つのではな いかとも考えられる.最後に,これらの教材は GPS 等位置情報しか使用できないので汎 用性が低いとも考えられる.

1.3.

研究目的

前述を踏まえ,本研究では以下の４つを目的とした. ① どの教科にも利用できる汎用性の高い教材開発の環境を提供する これまでの研究ではスマートフォン上の AR ブラウザを使用することで,子ども達が楽し め,興味を持ちやすい教材の開発ができた.しかし,これらの教材は位置情報を使用して作成 をするので,どの教科にも教材を利用できる環境ではなかったと考えられる. そこで,本研究では,過去に作成した教材から,どの教科にも利用できる汎用性の高い教材 開発の環境を提供することを目的にした.具体的には,AR ブラウザ「junaio8)_{」を使用して,} 教材を利用できる環境が提供できないか検討する. ② 「junaio」を使用できる環境の構築を行う. 「junaio」はこれまでの AR ブラウザ同様,位置情報を使用した教材の作成ができる.さら に,カメラで画像を認識することでコンテンツを表示させる教材の作成も可能である.しか し,これらの教材を作成・提示するには,自前のサーバを持つことが必要である.そのため, 「junaio」を使用できる環境の構築を行うことを目的にした. ③ 魅力的な教材を提供できる「junaio」のプラットフォームを紹介する 日本では自分でサーバを入れてコンテンツを作成した人は殆ど見られない.そのため, 「junaio」にはどのような機能があり,何が出来るのかがまだ知られていないと考えられる. そこで,「junaio」の機能・可能性を紹介することを目的とした. ④ 教材を作成するまでの過程をマニュアル化する これまで「junaio」でコンテンツを作成した人が殆ど見られなかったのは,次の２つ原因 があると考えられる. １） 日本語で表記されているホームページがない 「junaio」のホームページは日本語に対応していない.そのため,ホームページの内容を閲 覧することに抵抗がある,取っ付きにくい等が原因となりコンテンツの作成が行われなかっ たと考えられる. ２） プログラムが難解 「junaio」でコンテンツを作成するには PHP 等ソースファイルを作成必要がある.そのた め,プログラムを書くことができずにコンテンツを作成することが出来なかったと考えられ る.そこで,ホームページ画面の閲覧をしない,プログラムの知識がない状態でもコンテンツ の作成が行えるように,作成までの課程をマニュアル化することを目的とした.

2. AR

教材の作成

本研究では既存の AR ブラウザ「junaio」を利用して様々な教材を提供する.「junaio」 を使用する理由は 4 つある. 1 つ目は,無料で使用できることである. 「junaio」は無料の AR ブラウザであり,開発者登録・コンテンツ作成・コンテンツ維持等 のサービスもすべて無料で利用ができる.しかし,これらのサービスを利用するには自前の サーバを持つことが必要になってくる. 2 つ目は,PC 上で作業を行うので,スマートフォン等でコンテンツを作成することに比べ, 作業ミスが少なくなる. 3 つ目は,多機能であり様々な教材提示が可能であることである. 「junaio」には位置情報を使用してコンテンツを表示させること以外にも画像を認識する ことでコンテンツを表示させる機能がある.また,これらの表示方法に加え,表示できるコン テンツの内容も充実している.そのため,用途にあった使い方が可能であると考えた.また自 分で自由にカスタマイズして作成できる AR ブラウザは「junaio」以外には見られなかった. 4 つ目は,使用するコンテンツごとにフィルタリングが可能であることである. 開発者登録により自分の「Channel」を作成することが出来るようになる.これはテレビ 放送におけるチャンネルと同じように,自局の「Channel」を作成したコンテンツ毎に割り 当てることができる.使用時に必要な「Channel」を選択すればその「Channel」の内容だ けを見ることが出来る.

2.1.

環境構築

＜概要＞ 「junaio」を使用するには自前のサーバが必要になってくる.これは,下図が示すように 「junaio」を管理している metaio 社がバックエンドとなって,サーバの情報を「junaio」を 利用するユーザに見せる役目をしているからである(図 2-1).そのため,自前のサーバで,ユー ザへのコンテンツの見せ方及びコンテンツ内容を管理しなければならない.

図 2-1 「junaio」利用形態

2.1.1. Ubuntu server

9) 使用した OS「Ubuntu Server 11.10」

本研究では「LAMP サーバ」の構築を行った.LAMP とは,「Linux13_{」＋「Apache}14_」＋

「MySQL15_{」＋「PHP」の頭文字を取った言葉である.WEB サービスを提供する際のプラ}

ットフォームとして現在この組み合わせでの構築実績も多く,安定して稼働している. また,いくつかのサーバ用 Linux ディストリビューションにおいては,LAMP がセットに なって配布される.本研究では,LAMP がセットになって配布されるという理由から使用す るサーバ OS を「Ubuntu server」にし,LAMP サーバの構築を行っている.サーバ OS を 「Ubuntu sever」にした理由は LAMP の他にも,使いやすさとソフトウェアの豊富さを併 せ持ったディストリビューション,Debian16_{をベースにしている点があげられる.また}

Debian は堅牢なサーバとしての定評もあり,インストール直後にポートが開いていない状 態になるように設定されているため,セキュリティの面で安心できる.

さらに「Ubuntu server」は幾つかの共有設定をサポートし,一般的な Linux サーバの配 置プロセスを単純化している.これにより,Web,DNS17_{,データベース等一般的なインターネ}

13 _{「Linux」 UNIX 互換の OS のこと.}

(IT用語辞典 BINARY http://e-words.jp/)

14 _{「Apache」 Web サーバソフトウェアの一つ.}

(IT用語辞典 BINARY http://e-words.jp/)

15 _{「MySQL」 オープンソースのリレーショナルデータベース管理システム.}

(IT用語辞典 BINARY http://e-words.jp/)

16 _{「Debian」 Debian Project の Linux ディストリビューション(配布パッケージ)}

(IT用語辞典 BINARY http://e-words.jp/)

17 _{「DNS(Domain Name Server)」 インターネット上でのコンピュータの名前にあた}

るドメイン名を,住所にあたる IP アドレスと呼ばれる 4 つの数字の列に変換するコンピュー タ.

ットサービスをうまくまとめたプラットフォームを,早く簡単に新しいサーバにセットアッ プすることが可能である.また「Ubuntu server」のインストールは約 15 分以内で終了し, 完了後 LAMP サーバが起動して利用可能な状態にできる.

LAMP オプションにより,LAMP を１つのセットにすることで,OS のインストール時に LAMPの多くの設定・関連付けを自動的に行うことができる. そのため,LAMP の各コンポーネントを別々にインストールして設定する必要がなくなり, 各アプリケーションのインストール及び設定方法を知っている方が数時間かかる作業を,自 動的に行うことができる.LAMP オプションを使えば,十分なセキュリティ,インストール時 間の削減,設定ミスリスクの軽減を実現することが出来る.

2.1.2. VMware

10) 使用したソフト「VMware Fusion 3.1.2」 サーバ OS「Ubuntu server」を用いて,LAMP サーバの構築を行ったが,そこには問題点 があった.それは,開発段階では複数の動作環境を整えて確かめる必要があるため,Linux 環 境が複数必要になってくることである.しかし,複数の Linux 環境を準備するには PC を何台 も使用するため現実的でない.また,動作環境に失敗したからといって,最初から環境を構築 しなおすには時間がかかりすぎる.そこで本研究では,これらの問題点を解消すべく,仮想化 用ソフトウェアである VMware を使用して環境の構築を行っている. VMware はホスト OS 上で仮想的に PC のハードウェアをエミュレート18_{して,その上で} 別の OS を動かすことのできる仮想化用ソフトウェアである. VMware の特徴は 2 つある. 1 つ目は,OS をファイルとして簡単に扱えるという点.これにより,1 台の PC で複数の OS を同時に動作させることが可能となる(図 2-2).そのため,何台も PC を用意する必要がなく なる. 2 つ目は,失敗をしても直前の環境に戻れる点.これは,OS をファイルとして扱えるため,コ ピーによるバックアップが可能であり,ある程度まで進めた段階でコピーしておけば,失敗 をしても直前の状態で再び始めることが可能となる.そのため,最初から構築をし直す必要 もなくなり,また積極的に設定を変更して試行錯誤することが可能になった.

以上の２つの特徴から前述の問題点が解消されると考え,本研究では VMware を用いてサ ーバの環境構築を行った.

2.1.3. ZendFramework

11) 「junaio」を使用するにあたり,PHP フレームワークである「ZendFramework」のイン ストールが必要である. 「ubuntu server」内の端末からインストール・解凍を行う. まず,スーパーユーザーになる必要があるため「sudo -s」コマンドを実行する.パスワードを 入力することで管理者である root になることができる. 次に「cd」コマンドで”/usr/lib/php5”ディレクトリに移動する.「wget」コマンドに続いて 「ZendFramework」のインストールページの URL「http://framework.zend.com/releases /ZendFramework-1.11.1/ZendFramework-1.11.1.tar.gz」を入力し実行する.圧縮された 「ZendFramework」がインストールされるので,解凍をする.「tar zxvf」コマンドに続いて 「ZendFramework-1.11.1.tar.gz」を入力し実行する(図 2-3). 図 2-3 ZendFramework のインストールを行なっている端末の画面

ファイルが解凍されたので,圧縮されたファイルの削除を行う.「rm -f」コマンドのあとに 「ZendFramework-1.11.1.ta.gz」を入力し実行する.「junaio」で教材を作成する際に 「ZendFramework」を使用するのでファイル名を変更して短くする.「mv」コマンドのあ とに「ZendFramework-1.11.1」を入力する.さらにその後に,変更したい名前を入力する.今 回は「ZendFramework」とした. 作業完了後「exit」コマンドを実行し,作業を終了する 図 2-4 作業終了時の端末の画面

2.1.4. 「junaio」準備事項

2.1.4.1. 概要 Location-based AR 教材(位置情報に基づく AR 教材),GLUE(image-based) AR 教材(画像 に基づく AR 教材)の作成には共通する作業が多い.AR 教材を作成するまでに必要となる準 備を手順通りに説明する. 2.1.4.2. 共通作業 《共通作業の流れ》 ①. 開発者登録を行う

②. Getting Started with PHP Package をダウンロードする

③. ダウンロードしたディレクトリ・ファイルを任意の場所に移動させる. ④. ファイルの作成・ソースファイルの書き換えを行う

①開発者登録

「junaio」の HP にいき,開発者登録を行う.はじめの画面の「Develop」をクリックし,次 の画面に移動する(図 2-5).

図 2-5「 junaio」ホームページ画面

Free Developer Signup をクリックすると,開発登録者の画面に移る.

図 2-7「 junaio」開発者ログイン画面

必要事項を記入し開発者登録を済ませる(図 2-8).すぐに承認のメールが届くので確 認をする.

図 2-8 開発者登録フォーム

開発者登録完了後,後々ソースファイルの書き換えの際に「API19_{キー」が必要になる}

ため,予め取得しておく.「Show My API Key」をクリックすると自分の API キーを取 得することができる(図 2-9).その後,Getting Started with PHP Package をダウンロー ドするため「Docs」をクリックし,画面を移動しておく.

図 2-9 ログイン後の自分のプロフィール画像

②Getting Started with PHP Package をダウンロード

Getting Started with PHP Package をダウンロードする.「Docs」の画面に移動後,右辺 リストに「Helper Libraries」があるのでクリックし,次の画面に移動する(図 2-10).

図 2-10 Docs の画面

「Helper Libraries」移動後,ページ中央付近に「Getting Started with PHP Package」 があるのでクリックし,ダウンロードを行う.

ダウンロードした「Getting Started with PHP Package」を展開(図 2-12)し,図のディレ クトリがあることを確認する.

③ディレクトリとファイルの移動 展 開 し た デ ィ レ ク ト リ を Readme.pdf の 通 り に サ ー バ に 置 い て い く . 以 下 の 図 は Readme.pdf をモデル化した図である(図 2-13).図のようにディレクトリ・ファイルを作 成・移動する. !"#$! $%&%#$'( ))) *(+#''%&& ,-.%/*0(0 123453 6789589: ';-<= &$' ';-<=*0(0 &%#$'(*0(0 >,?$#$@ A%-.（シンボ リックリンク） BC-#,;*'>#&&*0(0 '>,%-+*0(0 D#$;- 図 2-13 Readme.pdf をモデル化した図

ディレクトリ・ファイルの作成・移動はすべて端末上で行なっていく.以下の端末の図を 順におって説明していく. まず,スーパーユーザーになる必要があるため「sudo -s」コマンドを実行する.パスワード を入力することで root になることができる. 次に www 以下に「maron」ディレクトリを作成する.「cd」コマンドで,/var/www/ に移動する.そこで「mkdir」コマンドを入力し,その後ディレクトリ名を記入する.実行する ことでディレクトリを作成することができる.同様に,「cd」コマンドで/var/に移動する.そ こで「mkdir」を実行し,「Research」ディレクトリを作成する. 作業完了後「exit」コマンドを実行し,作業を終了する(図 2-14). 図 2-14 コマンドを入力している端末の画面

ディレクトリの作成が完了後,「Getting Started with PHP Package」のディレクトリ・ ファイルをモデルのように移動していく.なお,ここでは今後も同様の手順で教材を作成で きるように,直接移動するのではなく,任意の場所にコピーをしている.

まず,先程と同様の手順でスーパーユーザーになる.次に「cd」コマンドで「Getting Started with PHP Package」を展開した場所に移動する(ここでは Downloads 内にある).「ls」コマ ンドで中身を確認し,「cp -r」コマンドを入力し,ディレクトリ名「config/ library/ src/」続 けてコピーを行うディレクトリである「/var/research/」を入力し実行する.これで,「resarch」 ディレクトリ内に「config,library,src」のディレクトリがコピーされた. 同様の手順で「cp」コマンドを入力し,「html/」に移動し,「cp」コマンドで「index.php」 を「/var/www/maron」内にコピーを行う. ディレクトリ・ファイルのコピーが完了したのだが,ここで確認を行う.まず,「cd」コマン ドで「/var/research/」に移動する.そこで「tree」コマンドを実行する.すると,「resarch」 内のファイル・ディレクトリを階層で確認することができる.同様に.「cd」コマンドで 「/var/www/maron/」に移動し,「tree」コマンドを実行してファイルがコピーされたこと を確認する. 作業完了後,「exit」コマンドを実行し作業を終了する(図 2-15). 図 2-15 コマンドを入力している端末の画面

以下のモデルにおいて,ディレクトリ・ファイルの移動が完了した(図 2-16).次は,ソースフ ァイルの書き換え及びファイルの作成を行う. !"#$! $%&%#$'( ))) *(+#''%&& ,-.%/*0(0 123453 6789589: ';-<= &$' ';-<=*0(0 &%#$'(*0(0 >,?$#$@ A%-.（シンボ リックリンク） BC-#,;*'>#&&*0(0 '>,%-+*0(0 D#$;- 図 2-16 赤枠を作成し,青枠を移動させた

④ファイルの作成・ソースファイルの書き換え 「.htaccess20_」の作成 スーパーユーザーになるため「sudo -s」コマンドを実行する.「.htaccess」は「maron」 ディレクトリ内に作成するファイルなので,「cd」コマンドで「/var/www/maron/」に移動 する.次に,「gedit」コマンドを書き,続けて「.htaccess」のファイル名を書いて実行する(図 2-17). 図 2-17 コマンドを入力している端末の画面 「.htaccess」は Web サーバの動作をディレクトリ単位で制御するためのファイルである. ここでは下図の通りに書き込む(図 2-18). 下図の通りに書き込めたら,保存を押し閉じる. 図 2-18 .htaccess 作成時の画面

20 _{「.htaccess」 Apache などの Web サーバで使用できる,Web サーバの動作をディレク}

トリ単位で制御するためのファイル.

閉じた後,「.htaccess」ファイルが作成されているかを確認する.「ls -a」コマンドを実行す る.ファイルを確認後,「exit」コマンドを実行し作業を終了する(図 2-19). 図 2-19 コマンドを入力している端末の画面 「index.php」書き換え はじめにスーパーユーザーになる.その後「/var/www/maron/」ディレクトリに移動する. 「gedit」コマンドを書き,続けて「index.php」ファイル名を書いて実行する(図 2-20). 図 2-20 コマンドを入力している端末の画面

下図のファイルが開かれることを確認する(図 2-21). 図 2-21 変更前の index.php は じ め に ,8,9 行 目 を 書 き 換 え て い く . 下 図 の 「 require_once 」 に 「 config.php 」 「 junaio.class.php 」 の フ ァ イ ル 置 い て い る 場 所 を 記 入 す る ( 図 2-22).( 今 回 は 「/var/research」にファイルを置いている) 図 2-22 書き換える前のコード 下図が書き換えを行ったプログラムである(図 2-23). 図 2-23 書き換えた後のコード

次に下図のように「index.php」ファイルの 40 45 行目途中までを消去する.これは本マ ニュアルでは使用しないファイル情報のためである.また下図 47 行目の「include」を変更 していく.先程と同様に「search.php」が置かれているディレクトリ名を書き加える(図 2-24). 図 2-24 変更前のコード 変更後が下図のようになる(図 2-25). 図 2-25 変更後のコード 最後に 60 行目に「?>」を記入し,保存するを押して,「index.php」を閉じる(図 2-26).端末 に移動後,「exit」コマンドを実行し作業を終了する. 図 2-26 index.php 最終列に記入する

「シンボリックリンク21_」の作成 はじめにスーパーユーザーになる.その後,「cd」コマンドで「/var/research/library」に 移動する.そのとき「ls」コマンドを実行し,ディレクトリ内のファイルを確認する. 確認後,「ln -s」コマンドを書き,続けて「ZendFramework」が置いてある場所を書く.最 後に「Zend」を名前の付け,実行する. 最後に,先程と同様に「ls」コマンドを実行する.「Zend」という名前でシンボリックリン クが作成されていることを確認できる. その後,「exit」コマンドを実行し,作業を終了する(図 2-27). 図 2-27 シンボリックリンク作成時の端末の画面 「config.php」の書き換え はじめにスーパーユーザーになる.その後「cd」コマンドで「/var/research/config/」に移 動する.「gedit」コマンドを書き,続けて「config.php」と書いて実行する(図 2-28). 図 2-28 コマンドを入力している端末の画面 21 _{「シンボリックリンク」 あるファイルやディレクトリに別の名前を与え,ユーザやアプ} リケーションがその名前をファイル本体と同様に扱えるようにする仕組み

11 行目の「YOUR_API_KEY_HERE」の箇所に 開発者登録 を行ったときに取得した APIキーを書き込む(図 2-29). 図 2-29 API キーを書き込む 12 行目に「?>」を書き加え,保存して閉じる(図 2-30).端末の画面に戻るので「exit」コマ ンドを実行して作業を終了する. 図 2-30 最終列に書き加える

⑤Channel 作成

「Channel」の作成を行う.「junaio」のホームページ「My Channels」から「Create a New Channel」をクリックする(図 2-31).

図 2-31 「junaio」ホームページ内 My Channels 画面 下図の登録画面になるので必要事項を記入していく.

赤点線枠には「Channel Type」を選択する.選択欄には「Location Based Channel」 (Location-based AR 教材)と「junaio GLUE Channel」(GLUE AR 教材)の二種類がある. 作成する AR 教材によって選択をする.

赤枠には「Callback URL」を記入する.これは扱っているサーバの URL を指定する.また, このとき URL の最後に「/?=path」を忘れずに記入する.

青点枠線には「Channel Visibility」を選択する.選択欄には「public」と「private」の二 種類がある.外部公開するなら「public」を選択し,それ以外なら「private」を選択する.下部 にある緑色をした「Create」をクリックすると「Channel」が作成される(図 2-32).

2.2. Location-based AR

教材(位置情報に基づく AR 教材)

2.2.1. 概要

GPS・地磁気センサー・加速度センサーから得られる位置情報を利用して自分の周辺に あるタグをスマートフォン等に表示することができる教材を作成した.この教材は,目的の 場所に行き,端末の画面に浮いているタグに触わることで表示される動画等のコンテンツを 使用する学習教材である(図 2-34).これは,タグを目的の場所に行くための手段として利用 することもできる.そのため,屋外学習において幅広い使い方が可能であると予想される. この教材は PHP で作成するソースファイルによって指定された場所にタグを表示させ, コンテンツの内容を指定している.コンテンツの内容は,テキスト・動画・音声・3D モデル が主であり,コードの書き換え等により「GoogleMap」との連携等をタグに付け加えること, またコンテンツの表示方法の変更もできる.これらを組み合わせることで汎用性のある使い 方が可能であると期待される.

また LLA(Latitude Longitude Altitude)マーカーを使用することもできる.このマーカーを カメラで読み取ることでスマートフォン等の位置情報をマーカーの位置情報に強制的に置 き換えることができる(図 2-33).位置情報が変わるため周囲のタグの状況も変わり,マーカ ーで取得した位置情報周辺のタグがカメラに表示されるようになる.そのため,GPS 等が届 かないために位置情報を取得出来なかった屋内等の場所にも教材を作成し,使用することが できる.また,本研究では LLA マーカーを単に室内のみで使用するだけでなく,別の方法で教 材として利用できないかの検討も行う.例えば,修学旅行先の位置情報をマーカーに付与す ることで自分の周辺に,修学旅行先にセットしてあるタグを表示できることから,バーチャ ル修学旅行等に利用できないか検討する.

2.2.2. 作成した教材

教材は本学の環境研前にあるバタフライガーデンを題材として作成した. 植物等がある場所にタグ付をし,カメラをかざすとタグが表示される(図 2-34). タグをタップすると植物の音声ガイドとして利用できるコンテンツを作成した.またタグに は植物の詳細が書かれている URL を貼りつけおり,Web ページを閲覧することもできる. 現在バタフライガーデンには 15 個のタグを作成している. 本教材の作成手順は以下のように進める. 図 2-34 バタフライガーデンに浮かぶタグ

2.2.3. 作成手順

以下は AR 教材を作成した手順である. 《Location-based AR 教材作成の流れ》 ①. 共通作業を終わらせる ②. 位置情報を調べる ③. ソースファイル(search.php)の書き換えを行う ④. LLA マーカーを作成する ⑤. Channel Validate を行い,プログラムにバグがないか確認をする ⑥. Channel の外部公開を行う

①共通作業を終わらせる

共通の作業を終わらせる.

②位置情報を調べる

使用した Web サイト Google Maps 標高(V3 API)

「http://wisteriahill.sakura.ne.jp/GMAP/GMAP_ALTITUDE_II/index.php」

「Location-based AR 教材」で位置情報を使用するため,事前にタグを設置する場所の位置 情報を調べておく必要がある.

本研究では,上記の Web サイト「Google Maps 標高(V3API)」を使用して位置情報を検索し た(図 2-35).

③ソースファイル(search.php)の書き換え

⃝プログラム概要 「junaio」では,設置するタグに様々な情報を付与することが可能であ る.この項目ではタグに主な機能である「テキスト」「動画」「音声」「３D モデル」のコンテンツを付与する作成方法を説明する.また,「カスタマイ ズ」ではその他の情報の付与方法について説明する.なお,タグにコンテン ツを付与する前段階として共通の作業があるので,前準備として説明をす る. ⃝前準備 スーパーユーザーになる.その後,「cd」コマンドで「/var/research/src」に移動する.その 後,「gedit search.php」を実行する(図 2-36). 図 2-36 コマンドを入力している端末の画面

以下のテキストが表示されるので順を追ってプログラムの書き換えを行う(図 2-37).

図 2-37 search.php の初期画面

<poi id>を書き換える. \”[poi_id:string]\”を\”1\”にする.これはタグを見分けるための番号であるので,複数個の タグを作成する場合は数字が被らないように気をつける.上から 1,2,3,‥のように番号付け していくと間違いがなくなる. <interactionfeedback>を書き換える. \”(none|click)\”を\”none\”にする. <name>ではタグの名前を記入する.書き方は,<![CDATA[名前]]>である.ここでは,「宮城教 育大学」と書き換える. <description>ではタグの説明を記入する.書き方は,<![CDATA[説明文]]>である.ここでは, 宮城教育大学ホームページより「学校教育を中心とした教育実践の向上と教育研究を推進 する「教職員のための大学」,研究教育の体制を整え活発な交流で社会全体に門戸を開く「開 かれた大学」として,優れた教員の養成に全力を注いでいます() 」を引用し,書き換える. <date>[~]</date>は不必要なため削除する(図 2-38). 図 2-38 変更前のコード 書き換えると以下の図のようになる(図 2-39). 図 2-39 変更後のコード

<l>ではタグを表示させたい場所の位置情報を記入する.「latitude=緯度」「longitude=経度」 「altitude=高度」であるので,予め調べておいた位置情報を記入していく.ここでは「宮城教 育大学」に設置するためその位置情報を記入する.書き方は<l>38.2,140.0,159.75</l>である. <o>ではタグの角度を変更することができる.ここでは,変更する必要が無いのでどの値も 0 と記入する.書き方は<o>0,0,0</o>である(図 2-40). 図 2-40 変更前のコード 書き換えると以下の図のようになる(図 2-41). 図 2-41 変更後のコード <thumbnail>はタグに画像を表示するときに使用する.表示させたい画像は”maron”ディレ クトリ内に置く.なお,<thumbnail>の書き方は<thumbnail>http://~/maron/~.jpg</thum bnail>(最初の =自身の URL,次の =画像の名前)である.注意事項として,対応する形式 は,”jpg”,”png”であり,150 150 以下の画素数でないと設定できない. 設定したタグの位置関係などを確認する際は,地図上に表示させて確認をする.その際,地図 上に表示されるタグに画像を設定するときに,<icon>を使用する.書き方は<thumbnail>と 同様である.また注意事項として,対応する形式は,”jpg”,”png”であり,40 40 以下の画素数で ないと設定できない. 図 2-42 変更前のコード 書き換えると以下のようになる. 図 2-43 変更後のコード

ここまでの内容を書き換えると以下の図のようになる(図 2-44). 図 2-44 変更後の全体のコード ⃝コンテンツ内容 I. テキスト ＜概要＞ タグをポスト・イットのようなテキストとしてのみ使用する場合に作成する.作成したタグ は以下の図のようになる(図 2-45). 図 2-45 コンテンツ内容をテキストにしているタグ

＜作成方法＞

以下は,前段階からの続きである.

<mime-type>に は 付 与 し た い 情 報 に つ い て 記 入 を す る . 今 回 は テ キ ス ト な の で,<mime-type>text/plain</mime-type>と書く.

<mainresource>は,テキストの場合どの URL を表記しても大丈夫であるので,ここでは 「junaio」のホームページの URL を表記しておく.書き方は<mainresource>http://junaio.c om</mainresource>である(図 2-46). 図 2-46 変更前のコード 書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消去 する(図 2-47). 図 2-47 変更後のコード 以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

II. 動画 ＜概要＞

タグに動画の情報を付与する場合に作成する.作成したタグは以下の図のようになる(図 2-48).

＜作成方法＞ 以下は,前段階からの続きである. <mime-type>に は 付 与 し た い 情 報 に つ い て 記 入 を す る . 今 回 は 動 画 な の で,<mime-type>video/mp4</mime-type>または<mime-type>video/quicktime</mime-typ e>と書く. <mainresource>は,表示させたい動画のコンテンツが置かれている場所を書く.コンテンツ は”maron”ディレクトリ内に置くので,書き方は<mainresource> http://~/maron/~.mp4 </mainresource>(最初の =自身の URL,次の =動画の名前)である. なお,注意事項として対応する動画の形式は”mp4”のみである(図 2-49). 図 2-49 変更前のコード 書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消去 する(図 2-50). 図 2-50 変更後のコード 以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

III. 音声 ＜概要＞

タグに音声の情報を付与する場合に作成する.作成したタグは以下の図のようになる(図 2-51).

＜作成方法＞ 以下は,前段階からの続きである. <mime-type>に は 付 与 し た い 情 報 に つ い て 記 入 を す る . 今 回 は 音 声 な の で,<mime-type>audio/mp3</mime-type>と書く. <mainresource>は,表示させたい音声のコンテンツが置かれている場所を書く.コンテンツ は”maron”ディレクトリ内に置くので,書き方は<mainresource> http://~/maron/~.mp3 </mainresource>(最初の =自身の URL,次の =動画の名前)である. なお,注意事項として対応する音声の形式は”mp3”のみである(図 2-52). 図 2-52 変更前のコード 書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消去 する(図 2-53). 図 2-53 変更後のコード 以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

IV. 3Ｄモデル ＜概要＞ タグに音声の情報を付与する場合に作成する.作成したタグは以下の図のようになる. ＜作成方法＞ 以下は,前段階からの続きである. <mime-type> に は 付 与 し た い 情 報 に つ い て 記 入 を す る . 今 回 は 3 Ｄ モ デ ル な の で,<mime-type>model/md2</mime-type>と書く. <mainresource>は,表示させたい 3Ｄモデルが置かれている場所を書く.コンテンツ は”maron”ディレクトリ内に置くので,書き方は<mainresource> http://~/maron/~.md2_en c</mainresource>(最初の =自身の URL,次の =3Ｄモデルの名前)である.なお,注意事項 として対応する形式は”md2”のみである. また,3Ｄモデルを表示させる時,<resource>のコードが必要であるため書き加える. 書き方は,<resource>http://~/maron/~.png</resource>(最初の =自身の URL,次の =3Ｄ モデルの名前)である. また<s>のコードで,3D モデルの大きさを変更することができる.ここで大きさを 1 に指 定する.書き方は<s>1</s>である(図 2-54). 図 2-54 変更前のコード 書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消 去する(図 2-55). 図 2-55 変更後のコード 以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行し て作業を終了する.

V. カスタマイズ ＜概要＞ 上記にある動画等の情報以外にも表示することもできる情報がある.また,タグをタップ した時の表示方法を変更することができる.ここでは主となる機能以外のコードの書き方を 解説する. ＜作成方法 1＞ 以下は,上記に書いた情報以外の内容を表示させる. そのため,<mime-type>,<mainresource>(<resource>)の設定は完了している. ・ ⃝<homepage> 以下の図のようにタグにホームページの URL を記載することができる (図 2-56). 図 2-56 コンテンツ内容を Web ページにアクセスするようにしている 書き方は <homepage>http://~</homepage>である. 今回は,宮城教育大学の Web ページにアクセスするようにしている.以下 の図が作成したコードである(図 2-57).

・ ⃝ <route> 以下の図のように現在地からタグがある場所までのルートを表示させることができる.こ れは”GoogleMap”と連携をしているので,スマートフォン等に”GoogleMapApp”がインスト ールされている必要がある.また,”GoogleMapApp”にはナビゲーション機能が搭載されてい るので,目的地まで案内をしてくれる(図 2-58). 図 2-58 コンテンツ内容を地図表示にしている ルートを選択すると以下の図のように GoogleMap が表示される(図 2-59).現在地は宮城 教育大学であり,目的地が仙台駅となっている. 図 2-59 GoogleMap が表示される

コードの書き方は,<route>true</route>である.以下の図のようになる(図 2-60). 図 2-60 コードの作成 なお,これらのコードは一つのタグにすべて加えることができるので,以下の図のような タグを作ることが出来る(図 2-61). 図 2-61 一つのタグで地図・動画・ホームページ・テキストを見ることが出来る 以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行し て作業を終了する.

＜作成方法 2＞ カスタマイズすることで,タグをタップするだけで動画等の情報を表示することができ る. 以下の図は通常時のタグを選択したときに移行する画面の様子である.タグを選択し,詳 細が表示され,コンテンツを選ぶことで Web ページが開かれる(図 2-62). 図 2-62 通常時のタグを選択した時の画面の様子 一方で,下図はカスタマイズ時のタグを選択したときに移行する画面の様子である.タグ を選択した時点で Web ページが開かれる(図 2-63). 図 2-63 カスタマイズ時のタグを選択した時の様子

コードの書き方について,以下のコードを使用する(図 2-64). 図 2-64 コードを変更前 <name>で,名前を決めるがこの名前はタグに表示されないのでここでは「homepage」と する. <type>には表示したいコンテンツ名を書く.内容は選べる内容は「動画(video)」,「音声 (sound),Webページ(url)」の 3 種類である. <node_id>は「click」を書く.「On TargetDetect」はこの教材では使用できない. <value>は表示したいコンテンツを自分のサーバ上に置く.「url」を選んでいる場合は, リンク先の URL を書く.書き換えると下の図になる(図 2-65). 図 2-65 コード変更後 以上の工程が終了後,保存して閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

④LLA マーカー

LLAマーカー作成方法

「junaio」のホームページから,下図の上赤枠の「Tools」に移動し,右にある「LLA Marker Creator」に移動する(図 2-66).

図 2-66 junaio ホームページより Tools に移動し LLAMarkerCreator に移動する

下図の画面に移動する.この画面で,LLA マーカーの位置情報を指定する.赤枠左には場所 を,赤枠右には位置情報を記入する.今回は左枠の場所を指定してマーカーを作成する(図 2-67).

場所を「宮城教育大学」に指定し,「Go」をクリックする.下図のように宮城教育大学が表 示される(図 2-68). 図 2-68 地図上で宮城教育大学に移動する 指定したい位置の上でクリックすると,下図のように表示される(図 2-69).地図を拡大す ることで,細かい位置まで指定することができる. 図 2-69 マーカーに付与する位置情報の場所を決める

上記の作業で,マーカーは作成される.画面に右枠の表示が追加されているので,クリック してマーカーを確認する(図 2-71).

図 2-71 マーカーが作成されたか確認をする

作成されたマーカーを下図のようになる(図 2-72).

⑤Channel Validate(コンテンツの動作確認)

作成した教材の動作確認を行う.「junaio」のホームページにいき,下図の上部分「My Channels」から作成したチャンネルの画面を表示する.作成したチャンネルの右部分に 「Validate」があるのでクリックして,動作確認を行う(図 2-73).

Test1~Test8 まで確認事項がある.Test 結果は緑,黄,赤で色分けされており,すべての項目 が緑であることが望ましい.しかし,Test4,8 は黄でも運用に問題はない.なお,結果に赤があ るとその問題点が解消されるまで先の Test に進むことができない(図 2-74)(図 2-75).

⑥Channel 外部公開

動作確認が終わると最後は,「Channel」の外部公開を行う.先ほどの画面,下図から右側 の「Submit」のボタンを押す(図 2-76).公開が可能になったらその旨のメールが 2~3 日後 に届き,Channel の外部公開が完了となる. チャンネル外部公開で気をつけるポイントとして, ・test/テストの言葉を使用しない

・validate を Clear すること(４，８は Warning でも問題ない.) ・icon/thumbnail 等もらさず設定する

・ChannelVisibility で public を選択する があげられる.