宮城教育大学 環境教育研究紀要

第 14 巻 (2012)

リフレッシャー教育システムにおける環境教育用屋外 AR 教材掲示システムの構築－ AR ブラウザ junaio を利用したコンテンツの作成方法－
鵜川義弘*・齋藤有季*・村松隆*・溝田浩二*・栗木直也**

Making of the Outdoor AR Teaching Materials for Environmental Educations
Yoshihiro UGAWA, Yuki SAITOU, Takashi MURAMATSU, Koji MIZOTA and Naoya KURIKI

要旨 : 環境教育用 AR 教材で使用する AR ブラウザの選定と，サーバ構築，コンテンツ作成方法を説明する．更に表計算ソフトに入力したデータでコンテンツを作成するシステムを構築した．
キーワード：AR（拡張現実），スマートフォン，屋外教材，位置情報

２． AR ブラウザの選定

１． リフレッシャー教育システム
リフレッシャー教育システム（村松ほか，2011）は，本研究の教材作成ではドイツ metaio 社が提供する

宮城教育大学キャンパスと青葉山周辺から構成される

iPhone，iPad，Android で動作する AR ブラウザ junaio

キャンパスミュージアムを舞台として，体験型教育のを使用することを決定した．

指導力向上を図るためのシステムであり様々な屋外教選定理由としては，検討していたほかの AR ブラウ材・施設を設置し，可動している．これらの屋外教材ザと比べてより教育目的の利用に適していると判断しは，学習のために見るべき所が狭い等の理由で多人数たからである．具体的には，junaio は素材となる画像を対象とした授業，見学等では詳しい説明を行うことや音声，テキストがあれば PC からコンテンツを作成が難しい．また，解説方法も担当者に頼るか，看板等することができるため，多量のコンテンツを作成するを利用するなど，いつでも誰でも，現状に即した学習ことが比較的容易である．また，講義や教材園毎に必ができるとは言いづらい．このような従来では効果的要な情報のみを教材作成者が選んで表示する事ができな学習の実現が難しかった教材を，位置情報や音声ガる一種のフィルター機能である Channel という単位でイドを利用した，より効果的に学習できる屋外教材掲コンテンツの作成が可能である．そのため講義や教材示システムを環境教育実践研究センターにおいて，研園毎に必要な情報のみを表示したり，季節ごとに表示究・開発中である（鵜川ほか，2011）．2010 年度まで内容を切り替えることができ，刻々と変化する屋外教の研究では，最適な AR（拡張現実）ブラウザを模索・材に適していると言える（図１，図２）．また，画像検討中であった．

を認識して情報を表示することができる GLUE とい本論文では，AR を利用し教員にとって管理・指導う機能を利用し，既存の看板等を活用してコンテンツがしやすく，かつ児童・生徒・学生にとって興味深く，を作成することができる．これらの機能は，全て無料わかりやすい屋外教材掲示システムとなるようサーバで利用可能であり，metaio 社に支払うランニングコその他の環境について検討した．

ストが無い点も教育目的の利用に適していると言える．
ただ，コンテンツを置くためのサーバを自分で構築*

宮城教育大学環境教育実践研究センター，** 宮城教育大学教育学部－1－

リフレッシャー教育システムにおける環境教育用屋外 AR 教材掲示システムの構築

したり，PHP という動的な Web ページを作成するた３． junaio のコンテンツ作成方法

めに使われるプログラミング言語の知識が必要である．

3.1 junaio のアカウント作成

そこで本論文では，コンテンツを作成する際，最初にjunaio のアカウントを作成する方法を以下に説明す

行うアカウント作成・サーバ構築と，コンテンツを作る．http://dev.junaio.com/index/signup/user/new にアク成する場合に随時行うソースファイル作成・Channel

セスし，必要事項を入力したあと，「Sign Up」をクリッ作成の方法とコンテンツをより簡単に更新するために，クする（図３）．登録が完了すると，登録完了のメー

Excel を利用したソースファイル作成方法を説明する．

ルが届くので，確認を行う．

図１． 情報が混在している AR ブラウザ

図３． アカウント作成画面

3.2 サーバの構築
今回 junaio を利用するために以下のようにサーバを構築した．
・VMware を利用
VMware を利用することにより，サーバ専用のPC を用意する必要がなく，バックアップも簡単に行えるため，設定を変更して試行錯誤をするには最適な環境を用意することができる．また，すでに稼動しているサーバのファイルを利用することにより，新しい環境の IP アドレスを取得・設定するだけでサーバの構築が完了するというメリットもある．
・Ubuntu Server をインストール
Ubuntu Server は LAMP と呼ばれる動的なウェブコンテンツを含むウェブサイトの構築に適した，オープンソースのソフトウェア群が標準で搭載されており，簡単に junaio に必要な環境を用意すること

図２． 情報が整理された AR ブラウザ （junaio）－2－

宮城教育大学 環境教育研究紀要

第 14 巻 (2012)

が提供しているサンプルファイルに筆者らが手を加えができる．
・Zend Framework Minimal Package をインストールたサンプルファイルを用意した．それをダウンロード

Zend Framework は PHP 言語で Web アプリケーし，一部を書き換えることにより，比較的簡単にコンションを開発するための環境で junaio を使用するたテンツを作成できる．以下に手順を説明する．

めに必要な要件なのでインストールを行う．

１．http://ugawalab.miyakyo-u.ac.jp/junaio/ からsamplefiles.zip をダンロードする．

・ネットワークを static にする
Ubuntu の初期設定では DHCP サーバを利用して動的 IP を取得するが，固定 IP を設定する．

２．ダウンロードした samplefiles.zip を解凍する．
３．samplefiles/sample/config/config.php を任意のテキ
ストエディタで開く．

・junaio を使用するディレクトリを作成する
今回は，/var/ にソースファイルやライブラリを，

４．'Your_API_KEY_HERE' に 3.1 で作成したアカウ/var/www/ に画像等の素材を置くためのディレクトントの API Key を入力する．API Key は junaio のリ“sample”を作成した．

マイページから確認することができる．
５．samplefiles/sample/src/serch.php を任意のテキス

3.3 素材作成

トエディタで開く．

junaio ではコンテンツに使用する，音声・映像・画像ファイルはそれぞれ適切な形式にしなくてはならな

６．すでに記入されている，サンプルとパラメータ説明を基にソースを書き換える．

い．それぞれについて，junaio で指定している適切な
3.5 素材 ・ ソースファイルの移動

形式を以下に説明する．

コンテンツを表示するために，素材とソースファイ・音声ファイル
MP3（MPEG-1 Audio Layer 3）形式

ルをサーバに移動する．

48kHz

画像などの素材は，/var/www/sample に移動する．

stereo audio

ソースファイルは，samplefiles/sample/ 以下のディレ・映像ファイル

クトリを /var/sample/ に移動する．samplefiles/www/sample/ 以下のディレクトリを /var/www/sample/ に移H.264 Baseline Profile Level 3.0 Video
640x480 以下動する．

30fps (The Baseline profile does not support
3.6 Channel 作成

B frames.)

junaio には講義や教材園ごとに管理できる一種のMPEG-4 Part 2 video (Simple Profile)

フィルター機能である Channel という単位でコンテン・画像ファイル
png 形式又は jpeg 形式

ツを作成する．その Channel を作成する手順を以下に

サムネイル：250x250px 以下説明する．

アイコン：150x150px 以下

１．http://dev.junaio.com/ にアクセスしログインを行う．
２．
“New Channel”をクリックする（図４）．

3.4 ソースファイル作成

３．必須項目を記入後，“Create”をクリックする．

junaio は PHP を利用してコンテンツを生成するため，PHP のソースファイルを作成する．今回は junaio－3－

４．My Channel のページに新しい Channel が作成されたことを確認する．

リフレッシャー教育システムにおける環境教育用屋外 AR 教材掲示システムの構築

3.8 コンテンツ確認
有効処理したコンテンツが，実際に見ることが出来るかどうか確認する．PC 上から確認する方法と，携帯端末から確認する方法がある．
PC から確認する場合は，Valldate 完了ページの下部“Show on Map”からコンテンツを確認することができる（図６）．

図４． New Channel 作成

3.7 Channel 有効処理
作成した Channel を有効処理（Validate）する．手図６． Show on Map

順を以下に示す．
１．My Channel のページの該当 Channel の“Validate”
をクリックする（図５）．
２．エラーが出ず，終了すれば有効処理完了．

携帯端末から確認する場合は，junaio を起動し，お気に入りから該当 Channel を選択することにより，コンテンツが表示される（図７）．

エラーが出た場合は，説明通りにソースファイルを修正し，もう一度 Validate を行う．

図５． Validate 処理

図７． 携帯端末画面－4－宮城教育大学 環境教育研究紀要

3.9 Channel 申請

第 14 巻 (2012)

けである．詳細な手順を以下に示す．

作 成 し た Channel を 一 般 公 開 す る た め に 申 請(Submit) を行う．手順を以下に説明する．

1. http://ugawalab.miyakyo-u.ac.jp/junaio/ からcsvsample.zip をダンロードする．

１．My Channel のページの該当 Channel の“Submit”

2. csvsample.zip を解凍する
3. パラメータ説明 .xlsx を参考に csvdata.csv にコンをクリックする．
２．Submit するかどうかの確認画面が現れるため，テンツデータを入力する（図 10，図 11）．

よく読んで“OK”をクリックする（図８）．

4. 文字コード変換機能を有したテキストエディタを３．成功画面が現れる（図９）．これから，metaio 社の３営業日以内に申請許可メールがアカウント作
成時に登録したメールアドレスに届く．

用い，csvdata.csv の文字コードを UTF8，改行コー
ドを LF にして保存する．
5. コマンドプロンプトを開き，csvsample ディレク
トリに移動し，“./ csv2junaiosource.pl”と入力し，スクリプトを実行する（図 12）．
6. serch.php が生成される．

図８． Submit 確認画面

図９． Submit 成功画面

3.10 追加 ・ 管理しやすい環境作り
junaio では，屋外における環境教育においては効果

図 10. パラメータ説明的なコンテンツを作成できる良い環境と言えるが，まだまだ一般の教員が簡単にコンテンツ作成できるとは言い難い．特に，PHP を使用したソースファイル作
成は一般的に馴染みがない作業を行うため，教員とって手を付けづらく二の足を踏む原因になると考えられる．たとえ，一度勉強し，コンテンツの立ち上げができたとしても，継続して内容の更新・管理などができないということも予想される．そこで本研究では，コンテンツの追加・管理がしやすい環境を作るため，教員にも比較的操作が容易な Excel ファイルを使用してソースファイルが簡単に生成できるようにした．手順は，Excel でコンテンツデータを入力し，CSV 形式で保存した後，Perl で作成したスクリプトを実行するだ－5－

図 11. Excel 入力例

リフレッシャー教育システムにおける環境教育用屋外 AR 教材掲示システムの構築

Excel ファイルを WEB ブラウザでアップロードすれば自動的にサーバが更新されるなど，より簡単にコンテンツが作成出来る環境を整えていきたい．また，実際に講義などで利用する機会を多くし，更に改善を行い，コンテンツも充実させていく予定である．

参考文献
鵜川義弘・齋藤有季・村松隆・溝田浩二 2011. 屋外教
材提示システムの開発 . 宮城教育大学環境教育研究紀要，13，7-12．

図 12. Serch.php 自動生成

村松隆・鵜川義弘・斉藤千映美・溝田浩二・岡正明・
以上の手順で，junaio でコンテンツ作成する場合に棟方有宗・浅野治志・島野智之・齋藤有季・佐々木

一番手間がかかる，serch.php を簡単に生成すること

久美・尾崎博一・桔梗佑子 2011. フィールドワークができる．この方法ならば，内容の更新・追加などをを基底とするリフレッシャー教育システムの構想．

Excel で行うことが出来，季節ごとに内容を変更した

宮城教育大学環境教育紀要，13,1-5．

い場合も季節ごとの Excel ファイルを用意しておけばスクリプトの実行を行い，ファイルを置き換えるだけ

参考 URLでコンテンツの更新が完了する．

junaio（2012 年 1 月 27 日アクセス）
http://www.junaio.com/

４ 今後の課題

VMware（2012 年 1 月 27 日アクセス）
http://www.vmware.com/jp/

今年度は，junaio の環境構築，コンテンツの管理が比較的容易な環境の整備，携帯端末を利用した講義・

Ubuntu Server（2012 年 1 月 27 日アクセス）

学校紹介の実施・検証を主に行った．しかし，ター

http://www.ubuntulinux.jp/products/WhatIsubuntu/

ミナルを使用する必要があり，ICT に不慣れな教員

serveredition

にとってはまだハードルが高いといえる．今後は，－6－