WebAR スタンプラリー開発支援システムの提案

{広瀬研究室 4 年 \atop C1191150 佐藤文哉} 2023 年 1 月 10 日

\underline{2}

概要

AR とは，「Augmented Reality」の略であり「拡張現実」のことを指す。現実世界を主体に新たな画像・テキスト・ 3D モデルなどの情報を付け加えることができる。そのため，機材を設置する必要がないなどの利点があり，様々な事業で取り入れられている技術である。日本は，この AR 技術を観光立国推進のために活用しようと考えており，観光アプリケーションをはじめとする，観光領域での AR の活用を推し進めている。特に AR とスタンプラリーの組み合わせは，観光者の体験価値の向上やイベント会場の周遊・回遊率の向上などの利点が存在する。そのため，近年では地方自治体や観光協会などで， AR スタンプラリーを活用したイベント数が増加傾向にある。しかし， AR スタンプラリーの作成には専門的な知識が必要であり，情報通信技術に精通していない人やプログラミングの知識がない人が作成するには困難である。

そこで，本研究では， AR スタンプラリーの作成に必要な技術を補助し，簡単な操作のみで AR スタンプラリーを作成することができる Web サービスの開発，提案を行う。そして，実際に利用することを想定した実験を行い，利便性およびサービスとしての実用性について評価と考察を行った。 (523 文字)

目次

第 1 章はじめに 5 1.1 背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.2 研究目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.3 スタンプラリーの効果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

第 2 章先行研究と類似サービス 9

2.1 関連研究 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.1.1 AR コンテンツにおけるユーザ満足度 . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.1.2 画像認識型 AR を用いた観光情報の提供 . . . . . . . . . . . . . . . . . . . . . . . . 9 2.1.3 スタンプラリーにおけるページ構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.1.4 3D モデルの作成における学習難易度 . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2 類似サービス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.2.1 ARTO QUESTO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.2.2 Rally . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.2.3 類似サービスの課題点と改善案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

第 3 章提案 15 3.1 要件定義 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 3.2 システムの概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 3.3 作成されるスタンプラリー . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

第 4 章システム設計 19 4.1 本システムの全体構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.2 開発環境 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.3 スタンプラリーの全体設計と詳細情報の管理機能 . . . . . . . . . . . . . . . . . . . . . . . . 20 4.4 屋内と屋外へ対応 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.5 3D キャラクターのテンプレートの用意 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.6 WebAR スタンプラリーの全体設計 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.7 WebAR スタンプラリーで使用する JavaScript ライブラリ . . . . . . . . . . . . . . . . . . 22 4.8 使用する AR 技術 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

第 5 章システム開発 25 5.1 スタンプラリーの基本設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 \underline{4 目次}

5.2 各スポットの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.2.1 位置呼応マップ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5.3 AR パートの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.4 公開機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

第 6 章実験 33 6.1 実験手順 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 6.2 実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

6.2.1 正常に動作するか . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 6.3 考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.4 作成システムの課題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

第 7 章結論 37 7.1 今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

参考文献 39

第 1 章

はじめに

本章では研究の背景と目的について説明する。

1.1 背景

現代の日本において地方の過疎化や人口減少は大きな社会問題となっている (図 1.1)。総務省統計局の「人口推計結果の要約 (2018 年)」によると，日本の人口は 2008 年をピークに，低下の一途をたどっている [1]。それに伴う少子高齢化，労働人口数の低下は，どの企業や自治体においても無視できない緊急課題となってきており，地域活性化の方法は様々な技術で模索されている。その中の一つに観光事業における AR 技術の活用がある。日本は，観光立国推進のために AR 観光アプリケーションをはじめ，低コストでわかりやすい情報提供ができる AR 技術の活用を推奨 [2] している。また近年，インターネットや 5G ^{*1}による携帯電話通信網の発展により，観光地でのモバイル機器を用いたサービスにも変化がある。 AR では，映像や 3DCG などのコンテンツがサービスとして提供されるため，高速かつ大容量な通信量が求めらる。従来の通信規格では， AR 技術の活用は難しかったが， 5G によってこれらの問題は解消された。インターネットが高速化と Web サービスの遅延の低減の実現により仮想空間と現実世界に対してより没入感が得られる環境が整い，観光領域での AR 技術の活用はより一層進んでいる。特に， AR とスタンプラリーの組み合わせは相性がよいとされており，スタンプラリーの効果である滞在時間の増加や回遊率の向上に加え， AR コンテンツは現実空間に演出を付け加えることができるため，新しい体験価値の付与や幅広いイベントに対応可能である。このような理由から， AR スタンプラリーは地域活性化のツールの一つとして，多くの自治体や観光協会で導入されている。

しかし， AR 技術を活用したシステム構築は専門的な知識が必要であり，情報通信技術に精通していない人やプログラミングの知識がない人にとっては難易度が高い。また， AR の演出に利用する 3D モデルも専門的な知識とツールの使い方を知らねければ作成することが出来ないのが問題である。そこで，本研究では， Web 上で動作する AR スタンプラリー (以下「WebAR スタンプラリー」とする) の作成に必要な技術を補助し，簡単な操作のみで WebAR スタンプラリーを作成することができる Web サービスの開発，提案を行う。これにより，誰でも簡単に AR スタンプラリーの作成ができるようになり，観光地の集客の増加や観光地での新たな体験を生み出すことで，地域活性化の一助になるではないかと考えた。

*1 5G とは「5th Generation」の略称でり，携帯電話などに用いられる次世代通信規格の 5 世代目のこと。

\underline{6 第 1 章はじめに}

図 1.1 日本の人口推移 [3]

1.2 研究目的

本研究は，簡単な操作のみで WebAR スタンプラリーシステムを作成できるシステムを作成する。そして，このシステムを利用することで，観光客の観光地へのと集客と観光地での体験が誘発することを目的としている。また， WebAR スタンプラリー作成システムとして実際に利用することを想定し実用性，および保守性を考慮しながら提案する。 \underline{1.3 スタンプラリーの効果 7}

1.3 スタンプラリーの効果

「大須商店街」で実施されたスタンプラリーの実証実験 [4] を元にスタンプラリーの利点と傾向について述べる。図 1.2 と図 1.3 によると，スタンプラリーを実施することで回遊率と滞在時間が増加することがわかる。さらに，スポットの数が多いとより滞在時間が長くなる。

図 1.2 「大須商店街」で実施された回遊率の実証実験の結果

\underline{8 第 1 章はじめに}

図 1.3 「大須商店街」で実施された滞在時間の実証実験の結果

第 2 章

先行研究と類似サービス

本章では，現状と課題点を探るために，観光と AR に関する関連研究と本サービスの類似サービスについて調査した。 2.1 では， AR と観光の可能性や AR スタンプラリーに関する研究と AR の演出に必要とする 3D モデリングに関する研究を取り上げる。 2.2 では，スタンプラリー作成補助サービスについて取り上げている。

2.1 関連研究

AR と観光を組み合わせたシステムの研究事例とスタンプラリーにおけるスタンプラリーにおける位置情報の活用事例について紹介する。

2.1.1 AR コンテンツにおけるユーザ満足度

越後，小林らの研究 [5] では，聖地巡礼地を舞台とした AR スタンプラリーシステムの開発を行っている。聖地巡礼は， 2016 年に新語・流行語大賞トップ 10 に入賞しており，日本で注目が集まっている。越後，小林らは，この聖地巡礼を活用した AR スタンプラリーの開発を行い，単にスタンプを集めたり，アニメのキャラクターや道具などが AR で表示されたりするだけではなく，地元の人と聖地巡礼者が話すきっかけとなるようなシステムの開発を目的としている。このシステムはマップなどはなく，例えば，聖地で登場した食べ物や家電などを CG モデルとして表示さし，聖地巡礼者はそれをヒントに地域の人に話しかけ目的地を目指すように誘導している。実証実験のアンケートでは，紙媒体のスタンプラリーに比べ，話すきっかけになったと感じている人が多かった。また，課題として音楽やアニメーション，エフェクトがあると「もっと楽しいと感じる」という意見があった。

2.1.2 画像認識型 AR を用いた観光情報の提供

\underline{10 第 2 章先行研究と類似サービス}

近年，観光地と観光者を結びつける観光情報の提供は，インターネットや携帯電話などのモバイル機器の活用が期待されている。しかし，携帯電話では，操作習熟の困難さ等から効率的な情報提供手段とならない場合や紙媒体の長所， IT 機器の長所を活かし切れていない，といった課題が指摘されている。それに対し AR は，現実を増強，拡張しようとする技術で, 仮想世界と現実世界を関係づけ, 人間の現実世界での活動を支援する情報提供手法のひとつとして注目されている。この研究では AR を活用し，よりスムーズな観光情報の提供を実現を目的としている [6] 。システムの内容は，紙地図に印刷した観光スポットなどの写真画像をスマートフォンの内蔵カメラで撮影し，その画面上の写真画像に対して，詳細な内容を説明する映像コンテンツを自動的に表示させることできるものとなっている。 AR を技術を利用することにより，情報提供の幅が広がり， AR と観光を組み合わせたサービスには魅力性と有効性があるとしている。 JR 小樽駅での実験では，あらかじめ AR アプリケーションをインストールしたスマートフォンを用意し，実際に使ってもらった人たちに操作性，快適性，認知性，有効性，魅力生に関するアンケートを行い, 操作性や魅力性については良好な評価を得ているが，画像認識精度が低い点や屋外環境に適していないなどの課題があげられている。

2.1.3 スタンプラリーにおけるページ構成

こちらの研究 [7] では，観光者に対して観光スポット間の移動動機を付与することを目的とし，フォトラリー^{*1}による観光支援から観光者の観光体験の生み出すシステムの作成を行っている。スタンプラリーを行うためには，スタンプの獲得機能と情報を表示する機能，それらで扱う情報を管理する機能が必要としている。特に，どこにスポットが存在しているか示す機能が重要だと考えており，地図ベースの情報提供を行っている。スポットの位置情報と観光者の位置情報の表示をすることで，観光スポットが存在する位置情報を観光者が直感的に分かるとしている。

2.1.4 3D モデルの作成における学習難易度

河田，竹之内らの研究 [8] では， 3D モデルリングの学習は初学者にとって困難とする原因があると指摘している。一般的な 3D モデリングの工程は手順が多く， 3D モデリングの習熟者による授業での演習や学習テキストでは，アプリケーションソフトウェアの操作に関する説明が多くなる。そのため，操作になれていないが学習者は指導者の操作を追うことで手一杯になり，結果として操作に重点においた演習になるとしている。

2.2 類似サービス

スタンプラリー作成補助システムは，地方自治体や観光協会などで利用されており，アニメの聖地巡礼，音楽イベントなど様々な用途で活用することができる。近年では， AR スタンプラリーの作成補助を行っているシステムは少なくない。そこで，本研究で作成するスタンプラリー作成補助サービスの類似サービスについて調査し，サービスとしての課題点を探る。

2.2.1 ARTO QUESTO

ARTO QUEST は誰でも簡単に AR スタンプラリーが作成できるサービスである [9]。運営者/参加者ともに専用のアプリをインストールせずに，スマートフォンのカメラ機能を使って簡単に AR 体験ができる。 AR は，マーカー型 AR ^{*2}を利用しておりアニミーションや効果音があることが特徴である。また，スタンプラリーの公開手順も SNS と連携することで簡単にできる。しかしどこに行けばスタンプが獲得できるかなどの情報提示の不十分により，事前にスポットを知る日必要が有り AR スポットをアプリ内で見つけられないことが課題点である。 \underline{2.2 類似サービス 11}

*1 スタンプラリーの仕組みを応用し，スタンプを写真で代替したフォトラリーのこと [7]。

*2 画像や写真などをマーカとして登録し，カメラでそのマーカーを解析することで，それに準じた AR を表示される技術のこと。

図 2.1 ARTO-QUEST の画面

2.2.2 Rally

RALLY は，株式会社 RALLY が運営しているスマホで遊べるスタンプラリーが作成できるサービスである [10]。 Rally は， AR スタンプラリーではないがスタンプラリーに必要な情報を詳細に登録ができたり，ページデザインをオリジナルデザインに変更できたり，拡張性が高いのが特徴である。作成されたスタンプラリーはすぐに公開が可能で， QR コードや URL を用いた告知が行える。一方で，様々な機能があることにより，運営のサポートが必要な場合があったり，対応ブラウザが限られるなどの課題点がある。

図 2.2 RALLY の画面

2.2.3 類似サービスの課題点と改善案

一つ目は，スタンプの獲得できる場所の情報提示が不十分な点である。どこにスポットが存在しているか示す機能がないとユーザはあらかじめスポットの位置情報を把握しておく必要性がでてくる。そうなると，ユーザがスムーズにスタンプラリーを進めることは出来きなくなるため，スポットの位置情報を観光者が直感的に分かるようにする必要がある。

二つ目は， AR 表示のトリガーとなるマーカーや QR コードを印刷した紙の設置が必要な点である。 AR の表示やスタンプの獲得には， QR コードを印刷した紙を観光スポットに設置する必要があるため，場所が限られてしまったり，屋外でのイベントでは天候に左右される。可能性がある。また， 2020 年より新型コロナウイルス感染症は世界的に感染を拡大し，人同士の接触やドアノブや手するなどの間接的な接触による感染拡大が \underline{2.2 類似サービス 13} 問題となっている。そうした状況で，物理的な設置を使うことにより人同士の接触が多くなるという課題点がある。

第 3 章

提案

本章では， 1 章， 2 章で挙げた背景，目的，課題点を踏まえたシステムの提案を行う。 2.2 節で挙げた類似サービスの課題点と改善案から本サービスに必要な要件について定める。また，具体的なサービスの提案，スタンプラリーの作成手順と本サービスを使って作成されるスタンプラリーの構成について説明する。

3.1 要件定義

2.2 節で述べた類似サービスの課題点とそれぞれの特徴をもとに本サービスで必要となる要件を以下のように定めた。

• 容易な操作で実行可能にするスタンプラリー作成者が必ずしも情報通信技術に精通しているとは言えないため，容易に情報の入力が行えるようにする。

• 3D キャラクターのテンプレート機能 3D キャラクターの作成は難易度が高いため， 3D キャラクターのテンプレートをいくつか用意し，技術者以外の利用も可能にする。スタンプラリーでは，テーマに応じたキャラクターや設置場所を象ったデザインが利用されることが多いため，管理者自身がデザイン，作成した 3D キャラクターを利用することも可能にする。

• 観光スポットの位置情報を設定した位置呼応マップの作成機能観光スポットが存在する位置情報を観光者が直感的に分かるようにするために必要。

• 屋外と屋内のどちらでも利用可能様々な観光スポットに対応できるように，屋外と屋内のどちらにも対応させる。

• 作成したスタンプラリーの公開機能作成したスタンプラリーの公開は，サーバーサイドの準備などが専門的な知識が必要なため，容易に公開出来る必要がある。

これらの要件を満たすようシステムの設計を行う必要がある。

\underline{16 第 3 章提案}

3.2 システムの概要

本研究で作成するサービスは，ユーザがプログラムのコードを書かずに WebAR スタンプラリーを作成できるものとする。作成した WebAR スタンプラリーの URL が発行され， SNS で手軽に公開することが可能である。また，スタンプラリー名や紹介文の設定， 3D キャラクターや写真のアップロード機能を持たせることで，オリジナルのスタンプラリーの作成ができ，他のスタンプラリーとの差別化を行うことができる（図 3.1）。これらの操作の中で， HTML や CSS, JavaScript などのコードを書く必要はなく,Web 上での作業のみで完結するものとする。

図 3.1 本システムの概要図

\underline{3.3 作成されるスタンプラリー 17}

3.3 作成されるスタンプラリー

本システムで作成されるスタンプラリーは， 2.1.3 節を参考にし，ホーム画面，マップ， AR パート，スタンプ獲得一覧の計 4 ページで構成されるスタンプラリーを作成できるものとする。

• ホーム画面スタンプラリーのタイトルやスポット情報に加え，使い方と注意事項について表示する。

• マップ各スポットの位置情報とユーザの位置情報を表示する。また，ユーザをリアルタイムに追跡する。

• AR パート AR パートでは， AR の表示とスタンプの獲得が行える。

• スタンプ獲得一覧スタンプの獲得状況を確認できる。

マップからユーザの現在地とスポットの位置を確認し，あらかじめスポットに近づくと自動的に AR パートに移動し，カメラを起動する。その後，スタンプ獲得ボタンを押すことででスタンプの獲得を行えるものとする (図 3.2)。 \underline{18 第 3 章提案}

図 3.2 WebAR スタンプラリーの概要

第 4 章

システム設計

本章では 3 章をもとに，システムの設計を行う。 3.1 節で定めた要件を軸に，本システムに必要な機能設計と本システムを利用することで作成される WebAR スタンプラリーの機能を以下に示す。本サービスで作成する WebAR スタンプラリーは図 4.2 の流れで作成されるものであり, 作成されるスタンプラリーの流れは，図 4.3 の通りである。また，設計した機能を実現するために使用する技術やライブラリを以下に示す。

4.1 本システムの全体構成

本システムのフロントエンドアーキテクチャは SPA(シングルページアプリケーション) ^{*1} で作成する。 AR スタンプラリーの作成は， AR の位置調整や情報の更新など編集とテストを繰り返す必要があるため，頻繁に編集ページを行き来すると想定される。そのため，画面遷移のたびにサーバから追加的にコンテンツを読み込む必要ある MPA(マルチーページアプリケーション) ^{*2} よりも，前のページの差分のみの更新と一度ページを読み込んでしまえばネットワークの通信速度に左右されない仕組みにより，ページ遷移にかかる時間が少ない SPA を採用する。

4.2 開発環境

本システムの作成に使用した技術とバージョンを以下に示す。

• Vue.js - 3.2.37 Vue.js は， Web アプリケーションにおけるユーザーインターフェイスを構築するための，オープンソースの JavaScript フレームワークである。本サービスでは，主に SPA の構築と UI 画面の構築のために使用する。

• Node.js - 18.9.0 Node.ja は， Web ページ作成などの際に使われる JavaScript を、サーバー側で動作させるプラットフォームである [12]。

• Express - 4.18.1 Express は，ネットワークアプリケーションを構築するための JavaScript 環境である Node.js の Web

*1 SPA とは，単一の Web ページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供する Web ア

プリケーションまたは Web サイトである。

*2 MPA とは，複数のページから構成される Web ページであり，コンテンツが変わる度にページのリロードが必要である。

\underline{20 第 4 章システム設計}

アプリケーションフレームワークである [13]。

• sqlite3 - 3.36.0 sqlite は，サーバーとしてではなくアプリケーションに組み込むことができるデータベースである [14]。本システムのデータベースとして利用する。

4.3 スタンプラリーの全体設計と詳細情報の管理機能

スタンプラリーに関する情報は全てデータベースに保存する。スポットに関しては， 1 つのスタンプラリーに対して，複数存在すると考えられるため，テーブルを分けて保存する (図 4.1)。また，本システムはログイン機能をもたせることで第三者がスタンプラリーに勝手に変更を加えられないようにする。

図 4.1 本システムのデータベース

\underline{4.4 屋内と屋外へ対応 21}

4.4 屋内と屋外へ対応

類似サービスでは， AR の表示にマーカーを必要とするためマーカーを印刷して指定の場所に置いておかなくてはならない。しかし，マーカーの設置は場所が限定される上に，天候によって設置出来ないことも考えられる。そのため， AR の表示方法はマーカーに加え，位置情報を用いて行い，マーカーの設置が出来ないような屋外でも使えるようにする。

4.5 3D キャラクターのテンプレートの用意

AR に用いる 3D キャラクターの作成は難易度が高いため， 3D キャラクターのテンプレートを 3 つ用意し，技術者以外の利用も可能にする。本来のスタンプラリーでは，テーマに応じたキャラクターや設置場所を象ったデザインが利用されることが多いため，スタンプラリー作成者自身がデザイン，作成した 3D キャラクターを投稿し利用することも可能にする。

図 4.2 WebAR スタンプラリーのシステムの流れ

4.6 WebAR スタンプラリーの全体設計

本システムで作成される WebAR スタンプラリーの UI は，スマートフォンを使うことを想定したデザインにする。あらかじめ，デザインのテンプレートがあり各設定を行うと，データベースから保存した情報を取得しテンプレートに当てはめていくことで作成されるものとする。

4.7 WebAR スタンプラリーで使用する JavaScript ライブラリ

本システムで作成されるスタンプラリーのマップ機能と AR パートは以下の JavaScript ライブラリを用いて実現する。

• Leaflet JavaScript のライブラリの一種であり， Web 上にタイルベースの地図データを表示することができる。

• A-Frame AR パートの作成には JavaScript の A-Frame ライブラリと AR.js ライブラリを使用し作成した。 A-Frame は VR ^{*3}を構築するための OSS ^{*4}の Web フレームワークの一つであり， CSS のように HTML に読み込ませることで使用できる。 A-Frame を 3D モデルを表示するために使用する。

• AR.js AR.js は WebAR 開発のための代表的な OSS の一つであり， A-Frame と同様に HTML に組み込むことで簡単に実装することができる。 AR.js をその 3D モデルを現実空間と結びつけるために使用する。

4.8 使用する AR 技術

AR.js で利用できる AR 技術は複数あり，本システムでは以下の 2 つを利用する。

• マーカ型（画像認識型，ビジョンベース）画像や写真などをマーカとして登録し，マーカを認識すると AR コンテンツ情報（動画や 3D，マップ）を表示する。

marker-ar.ejs マーカ型 AR の記述例

[figure]

<a-marker preset="hiro"> <!--マーカーの指定-->
 <a-entity
   gltf-model="#3D オブジェクトの ID"
   scale = "1 1 1" <!--大きさ-->
   potion="0 3 0" <!--位置-->
   gltf-model="3D オブジェクトの ID">
 </a-entity>
</a-marker>

[figure]

• GPS 型（位置認識型，ロケーションベース）スマートフォンなどの端末の現在位置を GPS で取得し，付近に設定された AR コンテンツを表示する。 \underline{4.8 使用する AR 技術 23}

*3 VR （バーチャルリアリティ）とは現実と変わらない体験を人工的に実現させることを目指す技術のこと [15]。 *4 OSS とは，ソースコードの改変や再配布が自由に認められている無償のソフトウェアである [16]。

location-ar.ejsGPS 型 AR の記述例

[figure]

<a-entity
gps-entity-place="latitude:緯度; longitude:経度;"
look-at="[gps-camera]"
scale = "1 1 1" <!--大きさ-->
potion="0 3 0" <!--位置-->
gltf-model="#3D オブジェクトの ID">
</a-entity>

[figure]

図 4.3 スタンプラリーの流れ

第 5 章

システム開発

4 章を元にシステム開発を行う。 AR の実現や位置呼応マップの作成には JavaScript を用いる。本システムは，設定したい情報を入力や選択をした後に保存ボタンをクリックすることでデータベースに情報が送信され保存されるものである。

5.1 スタンプラリーの基本設定

図 5.1 はタイトルと紹介文，作成されるスタンプラリーのメインビジュアルとなる画像を設定し，保存するページである。入力フォームではユーザ自身がテキストの入力を行う。画像ファイルの投稿フォームには HTML から accept 属性で jpg, jpeg, png, svg 形式を指定することで，投稿できる画像の種類を限定している。設定した内容は図 5.2 のように反映される。

5.2 各スポットの設定

図 5.3，図 5.4 は，スポットの名前，場所を示す緯度と経度，スポットの画像を設定ることができるページである。スポットの名前は入力フォームではユーザ自身がテキストの入力を行う。画像ファイルは，投稿フォームに画像ファイルをドラックアンドドロップするかファイル選択から投稿することが可能である。場所の設定は， JavaScript ライブラリの Leaflet.js を使用し，マップの表示とマップ上で設定したい場所をクリックした時にその緯度と経度の取得が可能である。各設定をした後保存ボタンをクリックすることでデータベースに反映される。

\underline{26 第 5 章システム開発}

図 5.1 基本設定ページ

spot.vue マップの表示とクリックした時に位置情報の取得

[figure]

onMounted(() => {
let map = L.map('map').fitWorld()
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1,
}).addTo(map)
map.setView([38.575, 136.984], 5) //マップの中心位置
console.log(state.spot.lng)
let marker = L.marker({
lat: state.spot.lat,
lng: state.spot.lng,
}).addTo(map)
map.on('click', function (e) {
if (marker) map.removeLayer(marker) //マーカー削除
marker = L.marker(e.latlng).addTo(map) //マーカー追加
marker.bindPopup(' 緯度:' + e.latlng.lat + '<br>経度:' + e.latlng.lng).openPopup()
state.spot.lat = e.latlng.lat
state.spot.lng = e.latlng.lng
})
})

[figure]

\underline{5.2 各スポットの設定 27}

図 5.2 ホーム画面

5.2.1 位置呼応マップ

利用者が，実際に現地に行きスポットとの距離に応じて画面を展開するのが位置呼応マップである。これには， HTML の GeoLocationAPI と， Leaflet.js を利用し，現在地点に連動して地図を表示させる機能を実装した。 GPS センサを装備しているモバイルデバイスでマップパートの Web ページにアクセスすることでデバイスの位置情報が送信され，その都度地図上に利用者の現在位置が反映される。また，取得した位置情報とスポットの距離を算出しあらかじめ定めた閾値以下になった場合に自動的に画面が遷移し， AR パートに移動する。その他に，スポットの位置を確認できるようにスポとの検索機能を実装した。スポットの名前を入力または選択しマップ上部にある検索ボタンを押すとマップの中心位置がそのスポットに設定される（図 5.5）。

map.ejs 位置情報の取得

[figure]

// 位置情報取得できなかったときの処理

    function onLocationError(e) {
      alert(e.message);
    }

// 位置情報を持ってくる関数

    function watchFound(e) {
      onLocationFound({
        latlng: L.latLng([e.coords.latitude， e.coords.longitude])，
        accuracy: e.coords.accuracy});
    }

[figure]

図 5.3 スポット名と画像の設定

5.3 AR パートの設定

図 5.6 は， 3 種類の AR キャラクターを表示しそれらから選択，また，ユーザが所持している AR キャラクターの投稿，保存できるページである。キャラクターには，スタンプ獲得時のアニメーションを付与してある。 3 種類のキャラクターの画像をスライドで表示し，画像の下にある選択ボタンをクリックすることで選択が可能である。 AR キャラクターは， 1 種類のみ選択可能であるため選択ボタンは HTML の radio 属性にすることで複数選択できないようにしている。オリジナルの AR キャラクターを使用する場合は，ファイルの投稿フォームにドラックアンドドロップするかファイル選択から使用したい AR キャラクターを投稿するこどで使 \underline{5.3 AR パートの設定 29}

図 5.4 スポットの位置情報の設定

用できる。投稿フォームは HTML の accept 属性で gltf, glb ^{*1}形式を指定することで，投稿できるファイルの種類を限定している。

*1 glTF （GL Transmission Format）とは、 3D モデルのファイル形式のひとつで、主に Web ブラウザ上で動作するコンテンツを作る際に用いられるフォーマットである。また、 glTF をバイナリ形式に変換したものが glb である。

図 5.5 マップ画面

5.4 公開機能

作成したスタンプラリーをすぐに公開するためのページである。 URL はテスト用 URL と公開よう URL があり，テスト用 URL は常にレンダリングされており作成したスタンプラリーの状態を確認することができる。公開用 URL は，公開ボタンをクリックすることでデータベースに情報が送信され，条件分岐を用いてサーバーサイドでレンダリングされるようになる。 URL はスタンプラリーの作成時に作成されており， 2 つの URL の区別するためにテスト用 URL には作成された URL に「/prebiew」という文字列を付けている。また， URL は重複しないように生成する。

url の生成

[figure]

    const createUuid = () => {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (a) {
      let r = (new Date().getTime() + Math.random() * 16) % 16 | 0,
        v = a == 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    }

[figure]

\underline{5.4 公開機能 31}

図 5.6 AR キャラクターのテンプレート機能図 5.7 公開機能

第 6 章

実験

本章では作成したシステムを動作させ実験を行い，実験結果からサービスとしての実用性の観点を主に判断する。実験はサンプルのスタンプラリーの名前・キャッチコピー・紹介文・画像を用意し， AR キャラクターは 3 つのテンプレートを使用する。

6.1 実験手順

実験の流れとして実際に本システムを使用し WebAR スタンプラリーの作成を行う。スタンプラリーとして正常に動作するか実験を行う。 WebAR スタンプラリーの作成までの実験の手順を以下に示す。

1. 対象者にシステムの操作方法を説明するあらかじめ使用するスタンプラリーの名前・キャッチコピー・画像などの説明を行う。その後， AR の設定やスポットの設定，各機能について説明を行う。

2. タイトルや紹介文を設定する設定内容に違いがあると正確な時間を計測できないため，あらかじめ用意したタイトルや紹介文を用いて設定を行う。

3. AR キャラクターを設定する AR パートの動作確認のためにテンプレートキャラクターを使用した場合と AR キャラクターをアップロードした場合の 2 つの設定を行う。時間の計測にはテンプレートキャラクターを用いる。

4. スポットを設定するスポットの名前とスポットの位置はあらかじめ用意したものを設定してもらう。

5. スタンプラリーの公開をする公開したスタンプラリーが動作するか確認を行い，テスト用 URL と公開用 URL のスタンプラリーの差異がないか確認する。

作成したスタンプラリーは以下の 4 つの項目の確認を行う。

1. ホーム画面の動作確認テキスト情報・画像が反映されているかを確認する。

2. マップの動作確認スポットの検索機能， GPS の機能に不具合がないか，スポットの場所にずれがないか確認する。 \underline{34 第 6 章実験}

3. AR パートの動作確認スタンプの獲得が正常に行えるか， AR キャラクターの位置や動き，大きさは適切か確認する。

4. スタンプ獲得機能 UI に崩れがないか，獲得したスタンプ情報が反映されているかを確認する。

6.2 実験結果

表 6.1 が作成時間の実験結果である。

表 6.1 作成時間スポット数 1 回目  2 回目  3 回目 5 箇所  7 分 27 秒 5 分 31 秒 6 分 35 秒

6.2.1 正常に動作するか

各ページごとにチェックする項目を設け正常に動作するか実験を行った。

• ホーム画面の動作確認タイトル・キャッチコピー・紹介文・画像による UI にずれが生じないか検証した。テキスト情報は，画面内に収まり読めないところがなという状況にはならなかったが，画像が縦に長いものや横に長いものを使用してしまうと画像がはみ出し，一部見えないなどの問題があった。

• マップの動作確認 GPS 機能・スポットの検索機能・ AR パートへの移動などの機能に不具合がないか検証した。ユーザとスポットの位置情報は問題なく反映されており， GPS 機能が搭載されているモバイルデバイスの追跡も正常に動作した。 AR パートの移動も正常に動いたが，スポット同士の距離が近いと想定とは違うスポットの AR パートに移動してしまうことがあった。

表 6.2 作成時間スポット数 GPS 機能検索機能 AR パートへの移動 5 箇所◯◯◯ 10 箇所◯◯◯ 15 箇所◯◯◯

• AR パートの動作確認テンプレートキャラクターを使用した場合は，表示や動作に問題はなかった。しかしアップロードした AR キャラクターを使用した場合は，大きさ・角度・位置が不安定であった。

• スタンプ一覧画面の動作確認タイトル・キャッチコピー・紹介文・画像による UI にずれが生じないか，スタンプの獲得状況が正しく反映されているか検証した。ホーム画面と同様に画像が縦に長いものや横に長いものを使用すると画像がはみ出し，一部見えないなどの問題があったがスタンプの獲得状況に関してはコンプリートまで問 \underline{6.3 考察 35}

表 6.3 AR パートの動作確認 UI の崩れ表示位置表示角度 テンプレートキャラクターを使用した場合なし◯◯ アップロードしたキャラクターを使用した場合なし△△ 題なく反映されていた。

6.3 考察 6.4 作成システムの課題点

第 7 章

結論

本研究では， WebAR スタンプラリーを作成できるシステムの構築をした。本システムを使用することで，プログラミングや 3D モデリングの技術がない人でも簡単な操作のみで WebAR スタンプラリーを作成することができた。

7.1 今後の展望

参考文献

[1] (株) 富士通総研. “地域・地方の現状と課題”

https://www.soumu.go.jp/main_content/000629037.pdf， (参照 2021-8-18).

[2] 国土交通省総合政策局. “AR による訪日外国人旅行者への案内情報の提供に向けて”

https://www.mlit.go.jp/common/000228861.pdf， (参照 2022-12-11).

[3] 厚生労働省. “我が国社会保障制度の構成と概況”

https://www.mhlw.go.jp/seisakunitsuite/bunya/hokabunya/shakaihoshou/dl/07.pdf， (参照

2022-12-11).

[4] Shachihata Stamprally. “スタンプラリーの効果”

https://fun.shachihata.co.jp/rally/about/effect.php， (参照 2022-12-13).

[5] 越後宏紀，小林稔. “conectAR: アニメの聖地巡礼のための AR を用いたコミュニケーション支援システムの提案”

https://ipsj.ixsq.nii.ac.jp/ej/?action=repository_uri&item_id=187444&file_id=1&

file_no=1， (参照 2022-5-10).

[6] 深田秀実，船木達也，兒玉松男，宮下直也，大津晶 . 画像認識型 AR 技術を用いた観光情報提供システムの提案”

https://ipsj.ixsq.nii.ac.jp/ej/?action=repository_action_common_download&item_id=
73190&item_no=1&attribute_id=1&file_no=1， ( 参照 2021-11-23).

[7] 長尾聡輝，加藤福己，遠藤守，安田孝美. “地域観光を支援するためのフォトラリーシステムの開発”

https://dl.ndl.go.jp/view/download/digidepo_10487059_po_ART0010410235.pdf?
contentNo=1&alternativeNo=， (参照 2021-11-23)

[8] 河田尚子，竹之内和樹. “初学者の 3D モデリングにおける難点と原因の分析”

graphicscience.jp/journal_data/files/164_file.pdf， (参照 2022-12-13)

[9] 株式会社マイスター・ギルド. “AR スタンプラリー『ARTO QUEST』簡単作成・無料版あり・アプリ不要”

https://artoquest.net/， (参照 2022-5-20).

[10] 株式会社 RALLY. “RALLY - 誰でも簡単！モバイルスタンプラリー”

https://rallyapp.jp/， (参照 2022-5-20).

[11] MDN.” JavaScript” .JavaScript - MDN WebDocs.

https://vuejs.org/guide/introduction.html， (参照 2021-12-10).

[12] OpenJS Foundation and Node.js contributors. “Node.js”

https://nodejs.org/ja/about/， (参照 2022-12-3).

[13] StrongLoop， Inc. “Express - Node.js Web アプリケーション・フレームワーク”

\underline{40 参考文献}

https://expressjs.com/ja/， (参照 2022-12-3).

[14] SQLite.org. Datatypes In SQLite Version3. “SQLite とは?”

https://www.sqlite.org/index.html， (参照 2022-12-3).

[15] 繁桝博昭. “バーチャルリアルティによる知覚研究”

https://psych.or.jp/wp-content/uploads/2019/12/88-9-12.pdf， (参照 2022-12-8).

[16] Open Source Initiative. “The Open Source Definition”

https://opensource.org/osd， (参照 2022-12-9).