2023年2月23日木曜日

［遊ぶ］機能のご紹介　その１、普通に遊ぶ

みなさんこんにちは！e-Journey開発担当です。

そして、とても今更ですがあけましておめでとうございます！

今、2月下旬ですけどね！

さて今回からe-Journeyの［遊ぶ］側の機能紹介をしたいと思います。

まず最初は、公開されているツアーを普通に遊んでみるところから解説していきます。

まぁ、遊ぶ側の機能はぶっちゃけ見れば解る程度のUIにしておりますので、大して細かい説明も出来ないのですが。

1.ログイン～ツアー一覧

何はともあれログインしましょう。

e-Journeyにログインするとポータル画面に遷移します。

ログインIDとパスワードを入力して．．．、あ、そう言えばですが。

現状のアカウント情報はログインIDとメールアドレスで登録するオーソドックスなものですが、将来的にはGoogleアカウントだったり、Facebook等のSNSアカウントでも登録できるようにするつもりです！

ポータル画面に入ったら一番上の「遊んでみる」を選択。

すると「ツアー一覧」画面に入ります。

ここでは「地域」「ツーリズムID」「作者」「ツアータイトル」「日程」で表示するツアーを絞り込むことができます。

ここからはちょっと画面構造が長いので、いくつかに分けてご説明しますね。

2.お気に入りツアー

ツアー一覧の最初には「お気に入り登録したツアー」が表示されます。

ここからツアーに参加したりすることも、もちろん可能です。

お気に入り登録のやり方は次で説明します。

「参加する」を選択するとそのツアーに参加するため、ツアー詳細画面に遷移します。

既に参加済みのツアーには「最初から」が表示されます。これを選択すると、ツアーの進捗を巻き戻して最初からツアーをプレイすることができます。もう一度最初からやり直したい場合にご利用ください。

開催期間に含まれていない場合は「開催期間外」が表示されており、そのツアーには参加することができません。

ちなみに、ツアータイトルを選択すると以下のようにポップアップでツアーの概要が表示されます。

3.公開ツアー

お気に入りツアー一覧の次には「公開ツアー」が表示されます。

ここに表示されているのは、ツアー作成時に「Public/Private」を「Public」に設定したツアーです。誰でも参加することができるツアーですね。

基本的な表示は「お気に入りツアー」と同じなので、若干異なる点がございますので、その点について説明します。

まず「地域/作者」の下に「(n名)」と表示されています。これは、そのツアーの延べ参加人数です。この数字が大きいほど参加者数が多い＝人気があるツアー、とも言えますね。

もう一つ、さらにその下にサムアップの画像が有ります。これを選択すると「お気に入り登録」されます。もう一度選択するとお気に入りから解除です。ここで選択されたツアーが、前出の「お気に入りツアー」として表示されます。

現在参加中のツアーや、それこそ気に入ったツアーは、わざわざ探さなくてもお気に入り登録しておくと便利です。

4.プライベートツアー

公開ツアーの次には「プライベートツアー」が表示されます。

表示内容は同じです。ツアー作成時に「Public/Private」を「Private」に設定したツアーが表示されます。

5.ツアーに参加する

さてツアーに参加してみましょう。せっかくなので［作る］側の説明で使っていた「博多周辺ツアー」に参加してみましょう。

該当のツアーの「>> 参加する」を選択します。

※ツアーの期間指定を変更して参加できる状態にしました

ツアー詳細画面に遷移します。内容を確認して「遊ぶ >>」を選択しましょう。

なお、プライベートツアーの場合はここでパスワードの入力が求められます。

6.ツアーを遊ぶ

さていよいよツアーの始まりです。ツアー作成時に作ったツアーが、イベント順に進んで行きます。

これは「画像」のアクションですね。画像とテキストが対になって表示されます。

画面上部に「進捗状況」が表示されています。これは「イベント」の進み具合と思ってください。全６イベント中の１つめ、と言う事ですね。

「次へ進む」を選択するとアクションが進んでいきます。

作成したアクションが順に表示されていきます。純粋な道案内系のアクションは、画像とテキストでなるべく親切に表現してあげると良いですね。

逆にミステリー系、謎解き系のツアーならあまり新設過ぎない方が良い...のかな？？

ちなみに「戻る」を選択すると、アクションを1つ前に戻すことができます。

１つめの目的地に到着したときのアクションです。名所巡りでは、建物や入口の写真などを掲載して解りやすくしたいですね。

さて、このツアーでは各所でARのキャラを表示させるようにしていました。どのように表示されるのでしょうか？

こんな感じですね。

［作る］側の解説でも説明しましたが（したっけ？）、ARの表示オブジェクト（テキストや画像）には向きがあります。基本的に南方向を向いていますので、最初表示した際に見え辛かったり、画像が真横向いていてほぼ見えなかったり、裏側から見てひっくり返っていたりします。（←それはそれで面白い(笑)

そのような場合にはARオブジェクトを回転させることで見えやすくなります。

↑の画面も、最初はかなり斜めを向いていて、何か表示されてはいるけど、それが何なのか解らない状態でした。

「再表示」を選択すると、自身の位置（正確にはスマホ等の端末の位置）とARオブジェクトの位置関係から方角を割り出し、ARオブジェクトを自身の方を向くように回転させます。

ただし、端末機器のGPS精度の問題で綺麗に正面を向いてくれるとは限りません。細かい調整は「←回転」「回転→」を使って少しずつ回転させましょう。左右共に30°ずつ回転させることができます。

基本的にはアクションやイベントの数分だけ、この動きを繰り返すものになります。

そして、全てのアクション／イベントを実行するとゴールにたどり着きます。

さて、今回は「遊ぶ」の基本的な部分について解説しました。

次回はゴール後の「応募」や「ナゾトキ」「発生位置指定」など、特殊な機能やアクションの動きについて解説したいと思います。

と、ここで重大？ニュース。

しばらく「研究開発中」とか言っていた我らがe-Journeyでございますが。

ただいま、ベータ版公開に向けて鋭意準備中です。

ベータ版では特に機能制限を設けることなく公開する予定です。時期はまだ未定ですが、そう遠くないうちに公開する予定です。もちろん、ベータ公開は全部無料です。

公開が決定しましたら、またこちらでアナウンスしたいと思います。

それでは、また！

2022年12月16日金曜日

［作る］機能のご紹介　－その３：ゴール、イベント、ツアーを作る－

みなさん、こんにちは！　［e-Journey］開発担当です。

さて、前回はアクションを作る部分の解説をしました。アクションを作るのが一番面倒、と言うか説明する部分が多く、長くなってしまいました。

今回はそのあと、ゴールを作り、イベントを作り、ツアーとして組み立てる部分を説明していきます。

[ゴール]を作る

ゴールと言うのは、そのツアーの最終ポイント、言い換えると最後のアクションです。

と言うことで作り方もアクションと似通っています。

まずは「作る」メニューから「ゴールを作ってみる」画面に移りましょう。

そして「新規作成」を選択します。

ゴールの作成画面はこんな感じです。

基本的に各項目の説明は前回の記事をご参照ください。アクションの作成と同じです。

アクションと異なる点は、

テキストと画像のみです
謎解きはありません
発生位置指定はできません
エントリー有無が有ります

です。

さて、ゴールにだけ存在する「エントリー有無」について解説します。

［エントリー有無］

ツアー完了後に何かプレゼントを渡したい、あるいはアンケート等を収集したい、などの場合に「有り」にします。ツアー参加者はゴール後に、指定の画面で氏名や住所等を入力することになります。

ツアー完了⇒そのまま何もなく終了の場合は「無し」にします。

さて「有り」にすると以下のフィールドが表示されます。

エントリーの種類として「通常フォーム」と「ユーザー独自フォーム」が有ります。

［通常フォーム］

e-Journeyに組込まれている機能を使って、応募者情報を入力してもらいます。

まだこの記事書いている段階では開発中なのですが（笑）

元々組み込まれている機能ですので、収集する情報を増やしたり、減らしたり、独自の項目を加えたりなど、融通は効きません。

と言うことで準備しておいて何ですが、あまりオススメしません（笑）

※あまり価値を見出せなかったら将来的に無くすかも知れません。

［ユーザー独自フォーム］

通常はこちらをオススメします。こちらを選択した場合、ツアー作成者が別途準備したフォーム（Microsoft FormsやGoogle Formsで作成したもの）へのURLを登録したいただくことになります。従って、ツアー作成者の収集したい情報に絞ってエントリーを受け付けることができるので、こちらの方が使い勝手が良いとも言えます。

色々自虐的なこと書いてますが、実際問題そうだと思います...

おそらくツアー参加者の個人情報を取り扱うことになるでしょうから、セキュリティの観点から見ても、ユーザー独自フォームを利用していただく方がよろしいかと思われます。

ゴールの設定ができたら「保存」して終了しましょう。

実際にツアー参加者側に表示されるゴール画面はこんな感じになります。私が作った、博多ツアーのゴール画面です。ここでは「エントリー有無」は「無し」にしております。

［イベント］を作る

さてここまで来たら次は「イベント」です。「イベント」とは「アクション」の集まりを現します。

複数の（１つでも良い）アクションを束ねて、１つの「イベント」とします。

博多ツアーを例にすると、「５か所巡って、博多駅に帰ってくる」ツアーでしたので、５か所＋博多駅に帰る、と言うことで６つのイベントを作っております。

早速画面を見てみましょう。例によって「作るメニュー」から「イベントを作ってみる」をクリックしてください。

次にイベントの一覧画面から「新規作成」をクリックします。すると、イベントの新規作成画面に遷移します。

上半分は［アクション］とほぼ同じですので説明は割愛します。

下の方に「アクション追加」と言うボタンが有ります。これをクリックすると、このイベントに追加するアクションを選択する画面が表示されます。

こんな感じで、自分が作ったアクションと、公開されて自由に使えるアクションが表示されます。この中から、今回のイベントに含めるアクションを選択しましょう、と言う事ですね。

一覧上のアクションIDをクリックすると、アクション追加の確認画面が表示されますので、追加するときは「はい」、やめる場合は「いいえ」を押しましょう。

ちなみに、博多ツアーの最初のイベント（博多駅⇒東長寺）の部分はこのような感じになっております。

全部で４つのアクションが含まれています。最初の２つが博多⇒東長寺への道案内、３つ目は画像による東長寺の紹介、４つ目はARのアクションですね。

左側の「No」欄の数字を入れ替えて「順序入替」ボタンをクリックすることで、アクションの順番を入れ替えることもできます。間違えた時もそうですが、途中に別のアクションを差し込みたい場合にも活用できます。

このようにして、必要な数分のイベントを作りましょう。

上記の博多ツアーの最初のイベントの場合、ツアー参加者側では次の通りにアクションが遷移することになります。

［ツアー］を作る

さて大詰めです。これまで作ってきた［イベント］［ゴール］をつなぎ合わせて、１つのツアーとします。

例によって「作るメニュー」⇒「ツアーを作ってみる」⇒「新規作成」です。

※もう画像いらないですよね？

ツアーID

ツアーを一意に識別するIDです。自分が管理しやすい名前を付けましょう。

地域

どの地域のツアーかを選択します。地域指定することでツアー参加者が探しやすくなります。特に指定しなくても問題は有りません。

タイトル

解りやすいタイトルを付けましょう。参加者がツアーを探す際に最初に目にする部分です。

ツアー概要

ツアーの概要を登録します。ざっくりとどんなツアーなのかを記載しましょう。

説明本文

ツアーの細かい内容を記載します。ツアー参加直前に参加者が確認する文章です。

ツアー中、各アクションの上部にも表示されます。

期間（開始～終了）

ツアーの開催期間を指定します。ここで指定した日時以外では、ツアーに参加することはできません。

参加条件・特記事項

このツアーに参加するための条件や特記事項が有れば、ここに記載します。

Public/Private

このツアーを「誰でも参加できる公開型のツアー」にするなら「Public」を、「指定した特定の人物のみ参加できるツアー」にするなら「Private」を選択します。

「Private」にすると以下の部分が表示され、参加するためのパスワードとツアーに参加できる人（アカウントID）を指定できるようになります。

仲間内でのグループ旅行や、社員旅行などで活用できますね。

「Private」を指定したツアーには、ここで指定したアカウントを持ち、かつツアー参加時に正しいパスワードを入力しないと参加できません。パスワードは別途SNSやメールなどで共有すると良いでしょう。

保存設定

「非公開」にすると他のユーザーの画面には表示されません。「公開」にすると他のユーザーの画面にも表示されます。ツアーが全て完成するまでは「非公開」にしておくことをオススメします。

イベント設定

このツアーにイベントを追加します。操作方法は、「イベント」に「アクション」を追加していったのと同じ方法です。

博多ツアーの場合は以下の通りになっています。

全部で６つのイベントが有りますね。もちろん、順序入替もできます。

ゴール設定

このツアーの「ゴール」を指定します。「アクション」や「イベント」を選択したときと同じように選択できます。

さて、ここまでやると、いよいよツアー本体の完成です！

動作確認してみる

ツアーを公開する前に、自分で動作を確認したい場合があると思います。

一応、［e-Journey］には動作確認モードも存在します。

「作るメニュー」⇒「ツアーを作ってみる」と遷移して、ツアーの一覧画面を表示すると、自分で作ったツアーが上図のように表示されます。

それぞれのツアーに「編集」「動作確認」「削除」が有ります。

「編集」「削除」は読んで字のごとくで、作成したツアーの内容を修正したり、ツアー自体を削除する（*1）ことができます。

*1　ツアーを削除しても、内包されるゴール・イベント・アクションは削除されません。
　　同様に、イベントを削除しても内包されるアクションは削除されません。

ここで「動作確認」をクリックすると動作確認モードで、このツアーをプレイすることが可能です。

動作確認モードでは「発生位置指定」や「ARのGPS起動」が無効になります。

従って、東京にいながら博多観光ツアーを作り、東京にいながら動作確認できる、と言うことになります。

ただし、ARの表示については、実際のツアー時とは若干表示が違って見える（サイズ、向きなど）可能性がございますのでご注意ください。

実際のツアーと全く同じ条件にする場合は、Private指定をして自分のアカウントだけを追加して、ご自身で現地まで行くのが一番正しい確認ができます。

ツアーを公開しよう

動作確認まで出来ればすべての作業は完了です！お疲れさまでした！

ツアー編集から、公開設定を「公開」にしましょう。

これで、晴れて他のユーザーも参加可能なツアーが完成されます。

このように文章で説明すると、ツアーを作るのは大変そうに思えるかもしれません。

実際、それなりのボリューム感のツアーを作ろうと思うと大変なのは否定しませんが（例に出した博多ツアーは半日くらいかかったかな？）、やはり一番大変な部分はツアーの全体像を決めるところ、そしてツアー用のコンテンツの準備（文章だったり、画像だったり）です。

それさえ準備出来てしまえばあとは［e-Journey］で組み立てるだけ！

組み立ても最初は操作に戸惑うかもしれませんが、ほとんど慣れです。慣れてしまえば割とサクサクアクションとイベント作れてしまうでしょう。

２～３個のアクション・イベントを作れば、操作にも慣れると思います。

さて、ここまでで「作る」機能のご紹介をしてきました。

作り手のイマジネーションで、色々な形のツアーが考えられるでしょう。是非、自分ならではのオリジナルツアーを作ってみてください。

※都内ラーメン屋巡りとか有ったら参加してみたい...ｗ

次回は「遊ぶ」側の機能紹介をしてみますね！

それでは、また！

2022年12月1日木曜日

［作る］機能のご紹介　－その２：アクションを作る－

こんにちは、［e-Journey］開発担当です！

さて、以前の投稿で［作る］機能の前半部分をお伝えしました。

今回は後半部分、［e-Journey］を使ってツアーを組み立てていく部分を解説いたします。
かなり長くなるので、今回は「アクション」を作る部分に絞って解説します。

なお、各画面イメージは開発中のモノです。今後変更が入る可能性が高いこと、ご承知おきください。

[アクション]を作る

前回までのところで、作るツアーの全体ストーリーが出来上がっていると仮定します。

この説明は私が作った博多ツアーを題材に説明しております。前回はツアー作成に使う画像類をたくさん準備した、と言うところで終わっていたかと思います。

と言うわけでその続き。

全体のストーリーが出来上がったら、１つ１つのアクションから作って行くことをオススメします。

ログインして、ポータル画面から「作ってみる」⇒「アクションを作ってみる」へ進みます。

アクションの新規作成に進みます。

何も入力されていないまっさらなアクション作成画面が表示されます。
各項目を解説しましょう。

全てのアクション共通の設定

アクションID
このアクションを一意に決めるIDです。ご自身で覚えやすいIDを指定しましょう。
種別
アクションの種類です。現時点では「テキスト」「画像」「AR」の３種類が選択できます。（今後はもっと増やしたいなー）
動作
「未指定」「移動」「ナゾトキ」が有ります。「未指定」と「移動」は結果的に同じです。「ナゾトキ」を選択すると、問題文と回答を指定できるようになり、実際にプレイした参加者にはクイズが出題されることになります。当然正解しないと先のアクションへは進めません。
アクション概要
このアクションの概要を記載しましょう。この説明は実際のプレイ画面には表示されません。ご自身で管理しやすくするための項目です。
バージョン
アクションのバージョンです。アクションを何度か更新する場合に、何回更新したか解りやすくするための項目です。
価格
現時点では利用しない項目です。将来的な機能拡張のために存在しています。
Public/Private
このアクションを一般公開するかしないかの選択です。「Public」にすると、他のユーザーもこのアクションを使ってツアーを作ることができます。「Private」にすると、自分のみこのアクションを利用できます。
説明用テキスト
実際のプレイ画面に表示される文章です。「種別」で「テキスト」を選択した場合は、ここで入力した文章のみがプレイ画面に表示されます。「画像」や「AR」を選択した場合もこの文章を設定可能です。３項目あるので、自由に使ってください。
発生位置指定
このアクションを特定の位置に入るまで発生させたくないときに利用します。「有り」を選択すると発生位置の座標を入力する項目が表示されます。地図も表示されるので、地図で地点を選択すると、その座標位置が自動的に入力されます。
誤差も設定可能です(10m～100mの範囲)。ピンポイントで指定したい場合は小さく、大雑把に”だいたいこの辺”程度にしたいなら大きな値を指定してください。

種別で「テキスト」を選択した場合

テキストを選択した場合はここまでで完了です。

保存ボタンをクリックして、アクションを保存しましょう。

種別で「画像」を選択した場合

種別で「画像」を選択すると、以下の項目が設定できるようになります。

説明用画像
画像を３つまで登録することができます。
「説明用テキスト」と「説明用画像」はセットで表示されますので、１つ目の画像の説明を説明用テキスト１で、２つ目の画像の説明を説明用テキスト２で、と言うように設定できます。
例えば実際のプレイ画面では以下のように表示されます。

赤でくくった１の部分が、１つ目の画像と説明用テキスト１になります。
青でくくった２の部分が、２つ目の画像と説明用テキスト２になります。
うまく使い分けてみてくださいね。

種別で「AR」を指定した場合

ARはちょっとメンドクサイです（笑）

マーカー起動／GPS起動
その名の通り、ARオブジェクトをどうやって表示するか？の指定です。
「マーカー起動」の場合は、マーカーと呼ばれる特殊な画像をデバイスのカメラが捉えた時に、マーカーの位置にARオブジェクトを表示させます。
マーカーとはこんな↓やつです。

こちらのサイトから誰でも作成できます。⇒　AR.js Marker Training
紙に印刷して現地に貼り付けておくなどして使います。サイネージディスプレイに表示しておくのも良いかも知れませんね！
「GPS起動」にすると座標位置を指定する画面が表示されます。

緯度・経度で位置を指定します。実際にプレイすると、ツアー参加者のデバイスがその座標位置(付近)に来た時にARオブジェクトが表示されることになります。
位置は直接打ち込んでも良いし、図のように地図から選択してもOKです。
認識距離を指定すると、座標位置からどれだけ離れた位置からARオブジェクトを表示するか？を指定できます。値を小さくすると、その場所に近づくまでARオブジェクトは表示されません。値を大きくすると、多少離れていてもARオブジェクトが表示されます(ただし指定した座標位置から離れた分だけ小さく表示されます)。
GPS起動で一点気を付けておくことは、デバイスの性能に左右される、と言う事です。GPSの精度やディスプレイの表示能力、本体の処理能力などによって、ARオブジェクトが表示されやすい／され難いなどの違いが出ます。
テキスト／画像
表示するARオブジェクトの種類を指定します。

「テキスト」を選択すると、「AR表示テキスト」に表示させたい文字を指定できます。現時点では半角英数字のみ指定できます。例えば、”ある特定の場所に行くと秘密のパスワードが表示される”みたいな使い方ができますね。
注意点としては、表示される向きが有ります。ARオブジェクトは初期値では北から南を向いて存在しています。テキストオブジェクトは正面から見ないと表示されません。プレイ画面ではARオブジェクトを回転させる機能も有りますが、テキストは裏からは見えない点をご承知おきください。
「画像」を選択すると、ARオブジェクトとして表示させたい画像を指定できます。

ARを使う場合、こっちの方が利用頻度高いのかな？　マーカーをカメラで捉えたり、ある特定の場所で画像が表示されるなどの演出ができます。
こちらも注意点が有りまして、裏側から見ると画像が反転されて表示されます。まぁ、そりゃそうだ、って話ですが(笑)
さらにもう一点。マーカーを使う場合ですが、基本的にマーカー上のARオブジェクトは上から見ることになります。e-Journeyで扱える画像は２D画像のみです。従って、そのままだと”机に立てた薄っぺらい紙を上から見ている”状態になりますので、そこに画像が有るのか無いのか解らない状態になります。

この場合、後述の「ARオブジェクトの回転(X軸)」を-90°にすると、正面を向いて見える状態になります。奥側へパタンと倒すイメージですね。
ARサイズ
読んで字のごとく、表示するARオブジェクトのサイズを指定します。基本的には初期値のままで良いと思いますが、実際動かしてみて調整してください。
ARオブジェクトの高度
その空間のどの高さに存在させるか？の指定です。正直、あまり変わらないので初期値のままで良いと思います(説明が雑
ARオブジェクトの回転(X軸)
縦回転です。X軸なのに縦？と思うかもしれませんが、そう言うものです。物体に横方向から(X軸)棒を刺して回転させてみてください。縦方向に回転しますよね？　バームクーヘン焼いているイメージです。(ボキャブラリー...)
ARの画像指定で説明したのがコレです。マーカーの場合は-90°固定で良いと思います。GPS起動の場合は、どのような演出をするかによります。普通に正面を向いた状態でテキストや画像を表示したいなら0、上から覗きこませたい(地面を見させる)ならマイナスの数値、逆ならプラスの数値です。お金の画像を準備して、地面を見たらお金が落ちていた！なんて演出もできそうですね。あ、なんかそれ楽しそう(笑)
ARオブジェクトの回転(Y軸)
こっちは横回転です。ケバブ焼いているイメージ...(ボキャブラリーが貧困ですいません
Y軸回転についてはプレイ画面でも回転機能が有りますので、あまりシビアに考えないでも良いかと思います。