Googleマイマップを使う教育用ARアプリの開発
8
0
0
全文
(2) ただ，位置情報型 AR アプリが開発されたとして. /download/）から，開発する OS に対応した SDK を. も，実際のフィールドワークで有効に活用するため. ダウンロードすればよい．Wikitude SDK は，開発. には，フィールドのさまざまな場所に結びつける情. したアプリを公式ストアでリリースする場合にライ. 報，すなわち POI を用意しなければならない．この. センスを購入するアプリライセンスの形態をとっ. POI を用意する作業には，Google マイマップの利用. て い る． 本 研 究 で は， 「Wikitude SDK 5 Lite（iOS/. が有効と考える．Google マイマップでは，利用者. Android）：96,768 円（ 税 込 ） （2016 年 当 時 ）」を 日 本. が Google の提供する Google マップを編集できる上，. の代理店であるグレープシティ社から Android 用，. その利用者だけの地図を作成して，これをオンライ. iOS 用の 2 ライセンス購入し，アプリのリリースを. ンで他の利用者と共有することができる．さらに，. 行った．. Google マイマップでは，緯度・経度の情報を位置. Wikitude SDKには，プログラムのサンプルコード・. 情報型 AR アプリへ渡すことも容易であり，KML. 開発環境・説明資料がキットとしてセットになって. （Keyhole Markup Language）形式で Google マイマッ. いる．サンプルコードには，画像検索 AR，3D モデ ルの表示など多数の機能を持つものが含まれている. プの地図データをやりとりすることができる． 以上を踏まえて，本研究では，Wikitude SDK を. ので，ここではその中から位置情報型 AR サンプル. 用いて，Android と iOS それぞれのスマートフォン. コードを利用して，これに手を加えることでアプリ. 用の位置情報型 AR アプリ“GISAR（ガイザー）”の. 開発を進めた．. 開発を試みた（図 1）．GISAR では，Google マイマッ. Wikitude SDK は，iOS，Android OS のそれぞれに. プで作成した地図を表示することができる．以下で. ついて，ユーザーインターフェイス以外の部分が共. は，その詳細を報告する．. 通となっており，どちらの OS にも対応するアプリ 作成が比較的容易に実現可能である．各 OS のユー ザーインターフェイス部分について，iOS 版の開発 には， 「Visual Studio」を使い，Android 版の開発には， Google が提供している「Android Studio」を使用した． どちらも無償で利用が可能である．. 3． Wikitude SDKサンプルコードからの変更部分 Wikitude SDK を利用することにより，主に，下. 図 1 Wikitude SDK で作成した位置情報型 AR アプリ GISAR の画面. 記の事項を実現できた． 1）Google マ イ マ ッ プ を 共 有 し URL で 直 接 登 録 で. 2． 開発環境. きる．Google マイマップからの地図情報は XML 形. 筆者らは，これまで，Metaio 社の Junaio や Wikitude. 式で渡される．一方の Wikitude SDK には，これを. 社の Wikitude Studio を使った教育用 AR アプリの開. JSON（JavaScript Object Notation）形式で渡す必要が. 発 を 試 み て き た（ 伊 藤 ほ か 2017， 鵜 川 ほ か 2012，. ある．このとき XML 形式から JSON 形式への変換. 2014，2015，2017，秋本ほか 2015，2017） ．これら. が必要となり，その変換は自動で行われる．. の開発経験を踏まえて，ここで報告するアプリ開発. 2）Google マイマップで登録した写真の表示．. では，iOS，Android 共通のソフトウェア開発キット. 3）外部リンク表示（Android 版のみ）．. と し て，Wikitude SDK を 採 用 し た．Wikitude SDK. 4）端末の位置から表示対象地点までの距離に応じ. を利用するには Wikitude 社のホームページ（https://. た POI の絞り込み．. www.wikitude.com/）でアカウントを取得し，Wikitude. 5）高度の表現．端末の高度が POI の高度と同じに. SDKのダウンロードページ （https://www.wikitude.com. なるよう上書きする．. − 102（46）−.
(3) これらを実現するため Wikitude SDK のサンプル. POI の数が多いと，端末から見て同じ方向にある. コードを書き換えた．以下に示す図で，下線部が変. POI 同士が重なりあい，一番手前の POI しか見えな. 更を行った部分である．. くなってしまう．そこで POI を縦長に配置し，多数 の POI を同時に確認できるようにした（図 4）．また， 背面の POI も読み取り可能にするため，表示を半透. 3.1.POI データの参照先変更 サンプルコードでは，端末周辺にランダムにサン. 明にする加工を行った（図 5）．. プル POI が表示されるようになっている．そこで， GISAR で登録または変更した地点の POI が表示され るようにするため，JSON データを読み込むように 修正した（図 2）．これにより，後述する Google マ イマップを使用したデータを読み込み，登録した情 報が表示可能となった．JSON を置くサーバは http で は な く https（Hyper Text Transfer Protocol Secure） に対応している必要がある． POIDATA_SERVER_TOP:"https://ar.miyakyo-u.ac.jp/Wikit ude/myjsondatab.json". 図 2 [nativedetailscreen.js] データ参照先変更. 3.2.高度を現在位置の高さに変更 サンプルコードでは JSON データに高度が記載さ れ，POIに反映される．一方，今回の開発にあたって， JSON データの作成に使用する Google マイマップか ら得られる KML には高度の記載が無く，値が得ら れず，POI の表示に不都合である．そこで常に高度 を端末の現在位置の高さに設定することで，高度に 関わらず POI の表示が行えるようにした（図 3）．. // create an AR.ImageDrawable for the marker in idle state this.markerDrawable_idle = new AR.ImageDrawable(World.markerDrawable_idle, 1.0, { zOrder: 0, opacity: 1.0, //回転 roll: 90, onClick: Marker.prototype.getOnClickTrigger(this) }); // create an AR.ImageDrawable for the marker in selected state this.markerDrawable_selected = new AR.ImageDrawable(World.markerDrawable_selected, 1.0, { zOrder: 0, opacity: 0.0, //回転 roll: 90, onClick: null }); // create an AR.Label for the marker's title this.titleLabel = new AR.Label(poiData.title.trunc(10), 1, { zOrder: 1, offsetY: 0.55, //回転 roll: 90, style: { textColor: '#FFFFFF', fontStyle: AR.CONST.FONT_STYLE.BOLD }});. 図 4 [marker.js]POI の向き変更. // loop through POI-information and create an AR.GeoObject (=Marker) per POIfor (var currentPlaceNr = 0; currentPlaceNr < poiData.length; currentPlaceNr++) { var singlePoi = { "id": poiData[currentPlaceNr].id, "latitude": parseFloat(poiData[currentPlaceNr].latitude), "longitude": parseFloat(poiData[currentPlaceNr].longitude), //user location に固定 "altitude": parseFloat(World.userLocation.altitude), "title": poiData[currentPlaceNr].name, "description": poiData[currentPlaceNr].description}; World.markerList.push(new Marker(singlePoi)); }. 図 3 [nativedetailscreen.js] 高度の固定. 3.3.POI の向きと透明度の変更 サンプルコードでは，横長に POI が配置される． − 103（47）−. 図 5 POI の向きと透明度の変更.
(4) 3.4.POI の内容（タイトルのみ表示） サンプルコードでは，POI に件名だけではなく， 説明文も表示されるようになっている．POI が多い 場合の重なりを少なくするため，タイトルのみ表示 するようにした（図 6）．これは Google マイマップ のタイトルに相当する部分で，説明文はタップする と表示されるようにした．透明度の変更はラベルの バックグラウンドに使われている画像の透明度を変 更することで行った．. <div id ="header-status" data-role="header" data-position="fixed" data-theme="c"> <div class="ui-btn-left"> <a href="javascript: World.showRange();" data-icon="gear" data-role="button" data-inline="true" >Range</a> </div> <div class="ui-btn-right"> <a href="javascript: World.ChangeMap()" data-icon="edit"data-role="button" data-inline="true" data-iconpos="notext"></a> <a href="javascript: World.reloadPlaces()" data-icon="refresh"data-role="button" data-inline="true" >Reload</a> </div> </div>. 図 8 [map.html] メールアドレス入力ボタンの追加 this.markerObject = new AR.GeoObject(markerLocation, { drawables: { //説明文消去 //cam:[this.markerDrawable_idle, this.markerDrawable_selected,this.titleLabel, this.descriptionLabel], cam: [this.markerDrawable_idle, this.markerDrawable_selected, this.titleLabel], indicator: this.directionIndicatorDrawable, radar: this.radardrawables } });. 図 6 [marker.js] 表示内容の変更. 3.5.マイページ（メールアドレス）入力 ３．１． で ar.miyakyo-u.ac.jp か ら POI デ ー タ を 読 み込むようにした．その際，ユーザー毎に JSON デー. //地図データ URL 取得 ChangeMap: function ChangeMap(){ //現状保持 World.currentUrl = World.changeUrl; //入力ダイアログ表示 ＋ 入力内容を World.changeUel に代入 World.changeUrl = window.prompt("Enter E-mail address",""); //入力されなかった場合元に戻す if(World.changeUrl == null || World.changeUrl == ""){ World.changeUrl = World.currentUrl; } //入力された場合リロードして表示 else{ World.reloadPlaces(); }},. 図 9 [nativedetailscreen.js] メールアドレス入力画面表示. タを読み込み POI データが参照可能となるよう， メールアドレスで区別して，表示するように変更を 加えた（図 7，図 8，図 9）.. 4． 地図登録と選択ページ GISAR で は，Google マ イ マ ッ プ の 地 図 ID か ら， KML を 取 得 し，POI の 情 報 を JSON 形 式 に 変 換 し て 用 い て い る． 地 図 ID は，28 文 字 の 英 数 字 と ハ イホン「-」，アンダースコア「_」で構成されてお り，Google マ イ マ ッ プ の 地 図 URL に 含 ま れ て い る．URL には図 10 のようなパターンがある．なお， Google で地名・建物等を検索すると，Google マッ プが表示されるが，これは個人で作成する Google マイマップではないため URL に地図 ID が含まれて おらず，そこから POI を取り出すことができないこ. 図 7 メールアドレス入力画面. とに注意されたい．. − 104（48）−.
(5) 1 https://www.google.com/maps/d/u/0/viewer?mid=1X1I phXan1u3z_gsq1Dl5dS-EC60 2 https://www.google.co.jp/maps/@38.2582629,140.828 2439,17z/data=!3m1!4b1!4m2!6m1!1s1X1IphXan1u3z_gs q1Dl5dS-EC60 3 https://www.google.com/maps/d/edit?hl=ja&authuser =0&mid=1X1IphXan1u3z_gsq1Dl5dS-EC60 4 https://drive.google.com/open?id=1X1IphXan1u3z_gs q1Dl5dS-EC60. 図 10 URL パターンの例. 12），保存情報がある場合は，デフォルトページで はなく，保存情報からデータを読み込みするように 変更した（図 13）． 以上で紹介した工夫をサンプルコードに加えるこ とで，教育のためのフィールドワーク用位置情報型 AR アプリ GISAR を開発した．GISAR アプリのイン ストール，Google マイマップの編集共有，地図登 録までの流れを図 14 にまとめた．. 地図 ID が判明したら，サーバ側で図 11 に示した URL の KML をダウンロードし，JSON に自動変換. https://www.google.com/maps/d/kml?mid=1X1IphXan1u 3z_gsq1Dl5dS-EC60. //地図データ URL 取得 ChangeMap: function ChangeMap(){ //現状保持 World.currentUrl = World.changeUrl; //入力ダイアログ表示 ＋ 入力内容を World.changeUel に代入 World.changeUrl = window.prompt("Enter E-mail address",""); //入力されなかった場合元に戻す if(World.changeUrl == null || World.changeUrl == "") { World.changeUrl = World.currentUrl; } //入力された場合リロードして表示 else{ //入力された値を保存 window.localStorage.setItem('Email', World.changeUrl); World.reloadPlaces(); }},. 図 11 ダウンロード URL の例. 図 12 [nativedetailscreen.js] データの保存. する．端末のアプリは，変換された JSON データを 取得する．アプリで，図 11 のような URL から地図 ID を探して KML データをダウンロードした上で， これを JSON データに変換するという作業を実行す るのは難しい．GISAR では，この作業をサーバ側 で実現している．これによって，PC 上で Google マ イマップを操作して地図を作成した後，その地図を GISAR で共有するということが容易になった．. Google マイマップでの地図を作成する際，作成 直後の共有設定で，作成した地図が個人またはグ ループにしか共有されておらず， “リンクを知って いる全員が閲覧できます”で共有されていないこと がある．この場合には， KMLの取得ができないので， これらの場合はエラーを表示するようにしてある． GISAR の地図選択ページは，開発段階で複数の 地図を切り替えるために作成した．この機能を， フィールドワークなどの出先にいる個人でも利用で きるように，地図選択ページは“マイページ”を持 つことができるようにした．地図選択ページは，マ. //set helper var to avoid requesting places while loading World.isRequestingData = true; World.updateStatusMessage('Requesting places from web-service'); //過去に Email アドレスを入力していたら読みだす var saveUrl = window.localStorage.getItem('Email'); if(saveUrl == null){} else {World.changeUrl = saveUrl;} var serverUrl = ServerInformation.POIDATA_SERVER_TOP + World.changeUrl + "/current.json" + "?" + ServerInformation.POIDATA_SERVER_ARG_LAT + "=" + lat + "&" + ServerInformation.POIDATA_SERVER_ARG_LON + "=" + lon + "&" + ServerInformation.POIDATA_SERVER_ARG_NR_POIS + "=20";. イページの個々人が，電子メールアドレスを入力し てもらうことで区別し，同じものをアプリ内に入力 することで，起動時に個人の地図選択が有効になる ようにした．メールアドレスを一度入力した後，ア プリを再起動した場合にもマイページが表示される ように，メールアドレスの情報を端末に保存し（図 − 105（49）−. 図 13 [nativedetailscreen.js] 保存情報の読み込み.
(6) 図 14 操作方法まとめ. − 106（50）−.
(7) 5． アプリ開発や配布方法の違い. 内に組み込むことが必要である．そこで，GISAR. 5.1.開発環境によるアプリ配布方法の違い. の Android 用アプリにもプライバシーポリシーを組. どちらもスマートフォンのアプリとは言いなが. み込んだ．. ら，iOS と Android では開発から配布方法まで様々. 6． 開発したアプリの評価. な違いがある． 開発者として登録する際，Android では初回の登. GISAR は，2017 年 11 月 に ア プ リ が 公 開 さ れ て，. 録費用のみで良いが，iOS では年会費がかかる．ま. それ以降の 6 ヶ月間の総ダウンロード数は Android. た，開発できる端末は Apple 社の認証を受ける必要. 版では 102，iOS 版では 86 であった．2017 年 11 月 22. があり，Android の方が簡単で費用もかからない．. 日には，早稲田高等学校 1 年生 200 名による東京地. アプリの開発に欠かせないのが試作段階から共. 理研修で実際に利用された．これは初等中等教育諸. 同研究者に使ってもらうことである．Android では，. 学校において AR を本格的に活用した初めての事例. APK（Android Application Package）というファイル. である .. を Web ページに置いたり，メールで送ったりする. 引率した教員に対しての聞き取りでは，多人数の. ことで，試作アプリを離れた場所にいる共同研究者. 生徒の自主研修用に 多数のポイントが用意できる. にインストールしてもらうことができる．一般に流. ことが高く評価され．引率した教員からは , 東京研. 通させる場合でさえ Google Play ストアへの登録の. 修のみならず，2 年次に実施される関西研修旅行（修. 必要がない．ただし，この場合のインストールに際. 学旅行）でも活用すべきであるとの評価を得た．一. しては， 「開発元が Play ストアではないアプリのイ. 方，課題としては , 最も大きなものはスマートフォ. ンストールを許可する」と設定する必要があり，セ. ンを所持していない生徒に対してどのように指導す. キュリティ上の問題はある．一方の iOS の場合は，. るかという点であった．当日は交通安全上の配慮か. iOS 端末に USB ケーブルでインストールすることに. ら，使用する台数をグループで 1 台と指導したので. なる．それ以外の手段として，TestFlight というア. 混乱はなかったが，事後学習等でどのように配慮す. プリを使う方法があり，審査なしでアプリがインス. るかということが指摘された．. トールできるようになるものの，あくまで関係者向. GISAR に限って言えば，使用に関しては特別な. けのテスト用インストールと考えておいた方が良. 意見がなかった．それは，特別な知識や技能を持た. い．TestFlight を利用してインストール可能な端末. ない現場教員であっても容易に扱うことができたと. 数には制限があり，20 人の iTunes Connect に登録済. いうことを意味する．寄せられた意見のほとんどが，. みの関係者一人につき 10 台ずつ，合計 200 台までと. 個々の観察ポイントについての改善提案であった．. なる．. これは，教員同士等で共同コンテンツを作り上げて いくことの可能性を示唆している．. 5.2.マニュアルの挿入（iOS のみ）. また，生徒に対するアンケートからも同様な結果. Apple 社で提供している App Store からアプリを提. が得られた．スマートフォン等の活用した学習には. 供するためには審査を受ける必要がある．その際，. 抵抗感はなく，8 割近い生徒が面白かったもしくは. アプリ内にマニュアルを組み込むことが求められ. やや面白かったと回答，好意的に受け止められたこ. る．そこで，GISAR の iOS 用アプリにもマニュアル. とが分かった．GISAR に関しては , ほぼ半数の生徒. を組み込んだ．. が容易に利用できたと回答，容易ではないが利用で きたを加えると約 85％にもなる．一般的に利用さ. 5.3.プライバシーポリシーの挿入 （Android のみ）. れている GoogleMaps では， “容易に利用できた”と”. Google で提供している Google Play からアプリを. 容易ではないが利用できた”と回答した生徒が約. 提供するためには，プライバシーポリシーをアプリ. 90％であったことを考えると , システム的にはほと. − 107（51）−.
(8) んど問題はないといえる．一方，AR が効果に活用. 参考文献. できたかという点については疑問を上げる生徒もい. 秋本弘章・伊藤悟・鵜川義弘・福地彩・堤純・井. た．つまり，Google Maps だけで十分な観察ポイン. 田仁康（2015）地理教育における AR（拡張現実）. トがあるという意見である．これらは，システムの. 情報システムの活用−フィールドワーク教材の開. 問題ではなく，個々の観察ポイントの設問にかかわ. 発と実践−．「環境共生研究」，8，11-24.. る問題である．詳しくは , 本特集号の秋本らの論文. 秋本弘章・秋本洋子・伊藤悟・鵜川義弘（2017）フィー. 「高等学校地理フィールドワークにおける GISAR と. ルドワークにおけるスマートフォンの活用 -AR （拡張現実）と GIS を用いた教材の開発と実践 -．. Google Maps の活用」を参照いただきたい .. 「環境共生研究」，10，13-25.. 7． おわりに. 伊藤悟・鵜川義弘・齋藤有季・久島裕（2017）地理. 2020 年，高等学校「地理総合」の必修化が予定さ. 教育用 AR（拡張現実）情報システム（6）−新. れている中，GISAR は将来高等学校地理の授業で. たなシステムの活用とその特徴−．「日本地理学. 使用ができる有用なアプリとなる可能性がある．地. 会発表要旨集」，91，207．. 図の読み取りを不得意とする生徒らがフィールド. 鵜川義弘・伊藤悟・山本佳世子・秋本弘章・大西宏. ワークを行う際，AR 技術により，生徒たちへ POI. 冶・井田仁康・齋藤有季（2017）Google マップ. の位置や説明を実際の風景に重ね合わせて教材を提. と Wikitude を用いる位置情報型 AR の試作．「宮. 示できる．また，無料で使える Google マイマップ. 城教育大学環境教育研究紀要」，19，1-3.. を GIS の代替として使い，教員自身が教材を用意す. 鵜川義弘・齋藤有季・村松隆・溝田浩二・栗木直也. ることもできる．現状で Google マイマップの情報. （2012）リフレッシャー教育システムにおける環境. を AR 表示できるアプリは他に存在しないことを考. 教育用屋外 AR 教材掲示システムの構築 −AR ブ. えると，GISAR は貴重なアプリと言って良いであ. ラウザ junaio を利用したコンテンツの作成方法−．. ろう．. 「宮城教育大学環境教育研究紀要」，14，1-6. 鵜川義弘・福地彩（2014）スマートフォンを用いた. 謝辞. 防災教育用 津波 AR アプリの開発 .「 宮城教育大. 本稿は日本学術振興会科学研究費補助金「地理・. 学環境教育研究紀要」，16，7-12.. 環境・防災教育において GIS 利用を拡大する AR 搭. 鵜川義弘・福地彩（2015）Google スプレッドシー. 載システムの開発と活用」 （基盤研究 B，代表 : 伊藤. ト を 用 い た AR 教 材 作 成 環 境 の 試 作．「 宮 城 教. 悟，課題番号 :16H03520）による成果の一部である．. 育大学情報処理センター研究紀要 : COMMUE」，. 最後に，不慣れな分野への投稿に対し貴重なコメ ントをいただいた査読者，編集者に深くお礼を申し 上げる．. 22，35-38. （2018年2月9日原稿受理，2018年10月17日採用決定， 2018 年 12 月 27 日デジタルライブラリ掲載）. − 108（52）−.
(9)
関連したドキュメント
シートの入力方法について シート内の【入力例】に基づいて以下の項目について、入力してください。 ・住宅の名称 ・住宅の所在地
0.1uF のポリプロピレン・コンデンサと 10uF を並列に配置した 100M
機器名称 相 銘板容量（kW） 入力換算 入力容量（kW） 台数 現在の契約電力.
パターン 1 は外航 LNG 受入基地から内航 LNG 船を用いて内航 LNG 受入基地に輸送、その 後ローリー輸送で
パキロビッドパックを処方入力の上、 F8特殊指示 →「(治)」 の列に 「1:する」 を入力して F9更新 を押下してください。.. 備考欄に「治」と登録されます。
( ２ ) 輸入は輸入許可の日（蔵入貨物、移入貨物、総保入貨物及び輸入許可前引取 貨物は、それぞれ当該貨物の蔵入、移入、総保入、輸入許可前引取の承認の日） 。 ( ３ )
(2)
・電源投入直後の MPIO は出力状態に設定されているため全ての S/PDIF 信号を入力する前に MPSEL レジスタで MPIO を入力状態に設定する必要がある。MPSEL
