作成手順

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

◯プログラム概要

  「junaio」では,設置するタグに様々な情報を付与することが可能であ る.この項目ではタグに主な機能である「テキスト」「動画」「音声」「３D モデル」のコンテンツを付与する作成方法を説明する.また,「カスタマイ ズ」ではその他の情報の付与方法について説明する.なお,タグにコンテン ツを付与する前段階として共通の作業があるので,前準備として説明をす る.

◯前準備

  スーパーユーザーになる.その後,「cd」コマンドで「/var/research/src」に移動する.その 後,「gedit search.php」を実行する(図 6-30).

図 6-30 コマンドを入力している端末の画面

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

図 6-31 search.php の初期画面

<poi id>を書き換える.

\”[poi_id:string]\”を\”1\”にする.これはタグを見分けるための番号であるので,複数個の タグを作成する場合は数字が被らないように気をつける.上から 1,2,3,‥のように番号付け していくと間違いがなくなる.

  <interactionfeedback>を書き換える.

\”(none|click)\”を\”none\”にする.

<name>ではタグの名前を記入する.書き方は,<![CDATA[名前]]>である.ここでは,「宮城教 育大学」と書き換える.

<description>ではタグの説明を記入する.書き方は,<![CDATA[説明文]]>である.ここでは, 宮城教育大学ホームページより「学校教育を中心とした教育実践の向上と教育研究を推進 する「教職員のための大学」,研究教育の体制を整え活発な交流で社会全体に門戸を開く「開 かれた大学」として,優れた教員の養成に全力を注いでいます⁽⁾

」を引用し,書き換える.

<date>[~]</date>は不必要なため削除する(図 6-32).

図 6-32 変更前のコード

書き換えると以下の図のようになる(図 6-33).

図 6-33 変更後のコード

<l>ではタグを表示させたい場所の位置情報を記入する.「latitude=緯度」「longitude=経度」

「altitude=高度」であるので,予め調べておいた位置情報を記入していく.ここでは「宮城教 育大学」に設置するためその位置情報を記入する.書き方は<l>38.2,140.0,159.75</l>である.

<o>ではタグの角度を変更することができる.ここでは,変更する必要が無いのでどの値も 0

と記入する.書き方は<o>0,0,0</o>である(図 6-34).

図 6-34 変更前のコード

書き換えると以下の図のようになる(図 6-35).

図 6-35 変更後のコード

<thumbnail>はタグに画像を表示するときに使用する.表示させたい画像は”maron”ディレ クトリ内に置く.なお,<thumbnail>の書き方は<thumbnail>http://~/maron/~.jpg</thum

bnail>(最初の~=自身の URL,次の~=画像の名前)である.注意事項として,対応する形式

は,”jpg”,”png”であり,150 150以下の画素数でないと設定できない.

設定したタグの位置関係などを確認する際は,地図上に表示させて確認をする.その際,地図 上に表示されるタグに画像を設定するときに,<icon>を使用する.書き方は<thumbnail>と 同様である.また注意事項として,対応する形式は,”jpg”,”png”であり,40 40以下の画素数で ないと設定できない.

図 6-36 変更前のコード

書き換えると以下のようになる.

図 6-37 変更後のコード

ここまでの内容を書き換えると以下の図のようになる(図 6-38).

図 6-38 変更後の全体のコード

◯コンテンツ内容 VI. テキスト

＜概要＞

タグをポスト・イットのようなテキストとしてのみ使用する場合に作成する.作成したタグ は以下の図のようになる(図 6-39).

＜作成方法＞

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

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

<mainresource>は,テキストの場合どの URL を表記しても大丈夫であるので,ここでは

「junaio」のホームページのURLを表記しておく.書き方は<mainresource>http://junaio.c om</mainresource>である(図 6-40).

図 6-40 変更前のコード

書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消去 する(図 6-41).

図 6-41 変更後のコード

以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

VII. 動画

＜概要＞

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

図 6-42 コンテンツ内容を動画にしているタグ

＜作成方法＞

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

<mime-type>には付与したい情報について記入をする.今回は動画なので,<mime-type>

video/mp4</mime-type>または<mime-type>video/quicktime</mime-type>と書く.

<mainresource>は,表示させたい動画のコンテンツが置かれている場所を書く.コンテンツ は”maron”ディレクトリ内に置くので,書き方は<mainresource> http://~/maron/~.mp4

</mainresource>(最初の~=自身のURL,次の~=動画の名前)である.

なお,注意事項として対応する動画の形式は”mp4”のみである(図 6-43).

図 6-43 変更前のコード

書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消去 する(図 6-44).

図 6-44 変更後のコード

以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

VIII. 音声

＜概要＞

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

図 6-45 コンテンツ内容を音声にしているタグ

＜作成方法＞

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

<mime-type>に は 付 与 し た い 情 報 に つ い て 記 入 を す る. 今 回 は 音 声 な の で,<mime-type>audio/mp3</mime-type>と書く.

<mainresource>は,表示させたい音声のコンテンツが置かれている場所を書く.コンテンツ は”maron”ディレクトリ内に置くので,書き方は<mainresource> http://~/maron/~.mp3

</mainresource>(最初の~=自身のURL,次の~=動画の名前)である.

なお,注意事項として対応する音声の形式は”mp3”のみである(図 6-46).

図 6-46 変更前のコード

書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消去 する(図 6-47).

図 6-47 変更後のコード

以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.

IX. 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>である(図 6-48).

図 6-48 変更前のコード

  書き換えると以下の図のようになる.なお,書き換えていないコードは必要でないため,消 去する(図 6-49).

図 6-49 変更後のコード

  以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行し て作業を終了する.

X. カスタマイズ

＜概要＞

  上記にある動画等の情報以外にも表示することもできる情報がある.また,タグをタップ した時の表示方法を変更することができる.ここでは主となる機能以外のコードの書き方を 解説する.

＜作成方法1＞

  以下は,上記に書いた情報以外の内容を表示させる.

そのため,<mime-type>,<mainresource>(<resource>)の設定は完了している.

・ ◯<homepage>

以下の図のようにタグにホームページの URLを記載することができる (図 6-50).

図 6-50 コンテンツ内容を Webページに飛ぶようにしている

書き方は

<homepage>http://~</homepage>である.

今回は,宮城教育大学のWebページにアクセスするようにしている.以下 の図が作成したコードである(図 6-51).

図 6-51 コードの作成

・ ◯  <route>

  以下の図のように現在地からタグがある場所までのルートを表示させることができる.こ れは”GoogleMap”と連携をしているので,スマートフォン等に”GoogleMapApp”がインスト ールされている必要がある.また,”GoogleMapApp”にはナビゲーション機能が搭載されてい るので,目的地まで案内をしてくれる(図 6-52).

図 6-52 コンテンツ内容を地図表示にしている

  ルートを選択すると以下の図のように GoogleMap が表示される(図 6-53).現在地は宮城 教育大学であり,目的地が仙台駅となっている.

  コードの書き方は,<route>true</route>である.以下の図のようになる(図 6-54).

図 6-54 コードの作成

  なお,これらのコードは一つのタグにすべて加えることができるので,以下の図のような タグを作ることが出来る(図 6-55).

図 6-55 一つのタグで地図・動画・ホームページ・テキストを見ることが出来る

  以上の工程が終了後,保存をして閉じる.端末の画面に戻るので「exit」コマンドを実行し て作業を終了する.

＜作成方法2＞

  カスタマイズすることで,タグをタップするだけで動画等の情報を表示することができ る.

  以下の図は通常時のタグを選択したときに移行する画面の様子である.タグを選択し,詳 細が表示され,コンテンツを選ぶことでWebページが開かれる(図 6-56).

図 6-56 通常時のタグを選択した時の画面の様子

  一方で,下図はカスタマイズ時のタグを選択したときに移行する画面の様子である.タグ を選択した時点でWebページが開かれる(図 6-57).

コードの書き方について,以下のコードを使用する(図 6-58).

図 6-58 コードを変更前

  <name>で,名前を決めるがこの名前はタグに表示されないのでここでは「homepage」と

する.

  <type>には表示したいコンテンツ名を書く.内容は選べる内容は「動画(video)」,「音声

(sound),Webページ(url)」の3種類である.

  <node_id>は「click」を書く.「On TargetDetect」はこの教材では使用できない.

  <value>は表示したいコンテンツを自分のサーバ上に置く.「url」を選んでいる場合は,

リンク先のURLを書く.書き換えると下の図になる(図 6-59).

図 6-59 コード変更後

  以上の工程が終了後,保存して閉じる.端末の画面に戻るので「exit」コマンドを実行して 作業を終了する.