作成手順

  以下は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).

図 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).

図 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」コマンドを実行し て作業を終了する.