マップ ツアー テンプレートの構成

カリフォルニア州のパーム スプリングス市は、観光客向けのガイド ツアーの役割を果たすモバイル アプリの作成をあなたに依頼しました。このアプリは、人気の高い場所をマップ上に表示し、ユーザーからの距離でそれらを並べ替えます。このアプリは、iOS デバイスおよび Android デバイス上で実行され、インターネット接続ありまたはなしで動作する必要があります。

この市は、人気の高い場所に関する情報を含むパーム スプリングス ストーリー マップ ツアーに加えて、必要なすべてのデータを含むモバイル マップ パッケージを提供しました。AppStudio for ArcGIS マップ ツアー テンプレートを使用して、このツアーをクロスプラットフォームのモバイル アプリに変換します。

マップ ツアー テンプレートは、場所に関連する注釈を帯状に配置して、画像、オーディオ、またはビデオを紹介することができます。注釈内にある各ストーリー ポイントは、マップ上に配置されます。ユーザーは、注釈を順番にクリックしたり、マップを対話的に操作して参照したり、オプションのサムネイル カルーセルを使用したりすることができます。

備考:

マップ ツアー テンプレートは、ストーリー マップ ツアー アプリ テンプレートに基づいています。モバイル アプリを作成する前に、ストーリー マップをすでに作成していることをお勧めします。Learn ArcGIS のレッスン「はじめてのストーリー マップ」を試し、ストーリー マップ ツアーの作成方法を学習してください。

アプリの作成

まず、AppStudio for ArcGIS をダウンロードしてインストールします。次に、マップ ツアー テンプレートを使用してアプリを作成します。

  1. AppStudio for ArcGIS Desktop Edition を開きます。
    備考:

    AppStudio for ArcGIS Desktop Edition がない場合は、AppStudio for ArcGIS ドキュメント ページから無料でダウンロードできます。ダウンロードしたファイルを実行して、インストール ウィザードを開きます。ウィザードの指示に従って、プログラムをインストールします。

  2. [サイン イン] をクリックして、[サイン イン] を選択します。

    サイン イン オプション

  3. ライセンスされた ArcGIS アカウントを使用してサイン インします。
    備考:

    ArcGIS の組織アカウントがない場合、ArcGIS の無料トライアルにサイン アップできます。AppStudio for ArcGIS のライセンスが ArcGIS アカウントに付与されていない場合は、アカウントへのライセンス付与について組織の管理者に問い合わせてください。

  4. [新しいアプリ] をクリックします。

    [新しいアプリ] ウィンドウが表示されます。複数のアプリ テンプレートおよびスタイルがリスト表示されます。

  5. [テンプレート] タブをクリックして、[マップ ツアー] テンプレートを選択します。

    マップ ツアー テンプレート

    選択したテンプレートのサマリーおよび説明が表示されます。

  6. [Create] をクリックします。

    [マップ ツアー] テンプレートを使用して新しいアプリが作成され、他のアプリと共にリスト表示されます。初めて AppStudio for ArcGIS を使用する場合は、新しいアプリのみが表示されます。サイド ウィンドウに、名前などのアプリに関する詳細な情報が表示されます。

  7. アプリのリストで、新しいアプリが選択されていることを確認します。サイド ウィンドウで、[タイトルの編集] ボタンをクリックします。

    [タイトルの編集] ボタン

  8. タイトルを「パーム スプリングス マップ ツアー」に変更し、[変更を保存] ボタンをクリックします。

アプリのカスタマイズ

アプリのデザインは、組織またはアプリの機能を表す必要があります。アプリの視覚的魅力および情報価値を高めるために、画像、説明、アイコン、およびフォントを追加します。

  1. アプリのリストで、アプリが選択されていることを確認します。サイド ウィンドウで、[設定] ボタンをクリックします。

    [設定] ボタン

    [AppStudio 設定] ウィンドウが表示されます。最初に、サムネイルを更新します。

  2. サムネイル画像の例をコンピューターに保存します。
  3. [AppStudio 設定] ウィンドウの [詳細] タブで、デフォルトのサムネイルをクリックします。

    デフォルトのサムネイル

    [開く] ウィンドウが表示されます。

  4. [thumbnail-palm] 画像を参照してダブルクリックします。

    メッセージが表示され、現在のサムネイルがこの画像のコピーに差し替えられるということを説明します。

  5. [はい] をクリックします。

    サムネイルが更新されます。

  6. [サマリー] で、デフォルトのサマリーを「この砂漠の観光都市内の行くべき 21 の場所」に置き換えます。
  7. [説明] で、デフォルトの説明を「カリフォルニア州のパーム スプリングス市は、絶え間ない太陽、再発見された 20 世紀中期の建築、楽しいリラックスした雰囲気がある、独特の砂漠環境内のアメリカの理想郷です」に置き換えます。

    次に、アプリを表すアイコンをスマートフォンおよびその他のデバイスに追加します。

  8. アイコンの例をコンピューターに保存します。
  9. [AppStudio 設定] ウィンドウで、[リソース] タブをクリックします。[アプリ アイコン] で、デフォルトのアイコンをクリックします。

    デフォルトのアプリ アイコン

  10. [画像の選択] ウィンドウで、[icon-palm] 画像を参照してダブルクリックします。

    新しいアイコンが追加されます。背景画像およびカスタムのテキスト フォント ファイルも追加します。

  11. 背景画像の例およびテキスト フォント ファイルの例をコンピューターに保存します。
  12. [AppStudio 設定] ウィンドウで、[プロパティ] タブをクリックします。[開始画面] タブの [背景画像] で、参照ボタンをクリックします。

    [背景画像] パラメーターの参照ボタン

  13. [開く] ウィンドウで、[background-palm] 画像を参照してダブルクリックします。
  14. 画像をアプリのフォルダーにコピーするかどうか尋ねるメッセージが表示された場合は、[はい] をクリックします。

    背景画像が追加されます。

  15. [タイトル フォント ファイル] で、参照ボタンをクリックします。[CaviarDreams] テキスト ファイルを参照してダブルクリックします。画像をコピーするかどうか尋ねるメッセージが表示された場合は、[はい] をクリックします。
  16. [テキスト フォント ファイル] で、[assets] フォルダーにコピーされた [CaviarDreams] テキスト ファイルを参照してダブルクリックします。
    備考:

    ダウンロードした元のテキスト ファイルを選択した場合、同じファイルを同じフォルダーに 2 回コピーすることができないため、続行できなくなります。

位置データの追加

次に、パーム スプリングス市が提供したパーム スプリングス ストーリー マップおよびモバイル マップ パッケージを使用して、人気の高い場所に関するデータをアプリに追加します。各 ArcGIS Online ID を指定することによって、ストーリー マップおよびモバイル マップ パッケージを追加できます。すべての ArcGIS Online アイテムの ID は、数字および文字の文字列を含んでおり、次の画像に示されているように、詳細ページの URL の末尾にあります。

パーム スプリングス モバイル マップ パッケージ アイテムの ID

  1. [AppStudio 設定] ウィンドウの [プロパティ] タブで、[ギャラリー] タブをクリックします。
  2. [既存のマップ ツアー スタイル ストーリー マップ Web アプリケーションの選択] で、パーム スプリングス ストーリー マップの ID (b34ffabf64b04ce480fb453d25be5b4c) をコピーして貼り付けます。

    ストーリー マップ ID

    パーム スプリングス市は、このモバイル アプリを、オンラインおよびオフラインでサポートしたいと考えています。ストーリー マップはオンラインでホストされるため、オフラインで動作するモバイル アプリの場合、ストーリー マップと同じ位置データが格納されているモバイル マップ パッケージにも接続する必要があります。パーム スプリングス市は、この目的のため、モバイル マップ パッケージも提供しました。

  3. [オフライン マップ用のモバイル マップ パッケージ (mmpk) のアイテム ID] で、パーム スプリングス モバイル マップ パッケージの ID (5fe4934158104de3802965d5dddff4a3) をコピーして貼り付けます。

    このアプリのもう 1 つの仕様は、ユーザーからの距離で場所を並べ替えることです。

  4. [並べ替えタイプ] パラメーターまで下にスクロールします。デフォルトのテキストを「距離」に置き換えます。

    [並べ替えタイプ] パラメーター

    テキストの背景色を変更して、アプリのカスタマイズに対して最終的な調整を行います。アプリのサムネイルおよびアイコンの緑色に一致する背景色を選択します。

  5. [プロパティ] タブで、[ツアー] タブをクリックします。[テキストの背景色] で、デフォルト色を「#7C9B3E」に置き換え、Enter キーを押します。

    [テキストの背景色] オプション

  6. [適用] をクリックします。

    設定が適用されます。

    ArcGIS Runtime のライセンスも設定します。アプリのライセンスが付与されなければ、ウォーターマークがマップ上に表示されます。無料で使用できる Lite ライセンスを設定します。

  7. [ライセンス] タブをクリックします。[ArcGIS Runtime ライセンス] で、[Lite ライセンスの設定] をクリックします。

    [Lite ライセンスの設定] ボタン

    [ライセンス キー] ボックスに、Lite ライセンス キーが入力されます。

  8. [適用] をクリックします。[AppStudio 設定] ウィンドウを閉じます。

アプリのテスト

次に、アプリをテストします。最初に、デスクトップ アプリケーションでアプリをテストします。その後、モバイル デバイスでアプリをテストします。

  1. AppStudio for ArcGIS で、[パーム スプリングス マップ ツアー] アプリが選択されていることを確認します。サイド ウィンドウで [実行] をクリックします。

    [実行] ボタン

    [パーム スプリングス マップ ツアー] アプリが、新しいウィンドウに開きます。

    [パーム スプリングス マップ ツアー] アプリ

  2. [開始] をクリックします。オフライン マップをダウンロードするよう求められたら、[後で] をクリックします。
  3. 場所の詳細を参照するために、各画像をクリックして、[リスト][マップ] を切り替えます。問題がなければ、アプリを閉じます。

    アプリは、デスクトップ アプリケーション上で正常に動作します。次に、アプリを ArcGIS アカウントにアップロードし、モバイル デバイスでテストします。

  4. AppStudio for ArcGIS で、[アップロード] をクリックします。

    [アップロード] ボタン

    [AppStudio アップロード] ウィンドウが表示されます。アップロードしたアプリを、組織またはすべてのユーザーと共有できます。まだアプリをテストしているため、今はアプリを共有しません。アプリをアップロードした後に、ArcGIS Online で共有オプションを変更できます。

  5. [更新] をクリックします。

    アップロードが成功したことを確認するメッセージが表示されます。

  6. [AppStudio アップロード] ウィンドウを閉じます。AppStudio for ArcGIS を閉じます。
  7. Android モバイル デバイスまたは iOS モバイル デバイスで、AppStudio Player をダウンロードしてインストールします (App StoreGoogle Play、および Amazon で入手することもできます)。
  8. AppStudio Player を開きます。[サイン イン] をクリックし、ArcGIS アカウントにサイン インします。
    備考:

    ArcGIS Online アカウントまたは ArcGIS Enterprise アカウントのいずれかでサイン インすることができます。

    [ホーム] ページが表示されます。アカウントに関連付けられているすべてのアプリがリスト表示されます。[パーム スプリングス マップ ツアー] アプリがリストに表示されますが、QR コードをスキャンすることによって、このアプリにアクセスすることもできます。

  9. 使用しているコンピューター上で、AppStudio for ArcGIS Desktop Edition を再び開きます。[パーム スプリングス マップ ツアー] アプリが選択されていることを確認し、[QR コード] をクリックします。

    [QR コード] ボタン

    このアプリの QR コードが表示されます。

  10. モバイル デバイス上の AppStudio Player で、自分のプロフィール画像をクリックします。

    サイド メニューが表示されます。

  11. [QR コードをスキャン] をクリックします。

    [QR コードをスキャン] ボタン

  12. QR コードをスキャンします。

    アプリが自動的に起動します。

  13. アプリを実行してテストします。

パーム スプリングス マップ ツアー アプリを構築して実行しました。このアプリはモバイル デバイス上で動作し、組織または一般ユーザーと共有することができます。

任意のストーリー マップ ツアーを使用して、マップ ツアー モバイル アプリを作成できます。必要なのは、パーム スプリングス ストーリー マップの ID の代わりに、そのストーリー マップの ID を使用することだけです (そのストーリー マップをパブリックに共有する必要があります)。モバイル マップ パッケージを作成することもできます。それを行う場合、匿名ユーザーを有効化して ArcGIS Publisher エクステンションを使用することをお勧めします。

その他のレッスンについては、「Learn ArcGIS Lesson ギャラリー」をご参照ください。