コーディング不要の 311 アプリの作成

次の手順は、構成可能なテンプレートからアプリを作成する方法について概要説明しています。このレッスンでは、テンプレートを使用してカスタマイズし、Cilantro 市用の 311 アプリを作成します。

テンプレートを選択する。
設定の変更
デバイスでのテスト
インストールファイルの生成
利用するストアへの公開

注意:

311 は緊急でない電話番号で、米国とカナダの多くのコミュニティで利用できます。市民はこの番号に電話をして、市のさまざまなサービスを利用したり、苦情を言ったり、コミュニティの緊急でない問題 (遺棄された車両、落書き、道路の損傷など) を報告したりできます。世界中で、自治体が同様のサービスを市民に提供していますが、多くの場合、電話番号が異なります。

アプリの作成

Cilantro 市は、ポイントを含むフィーチャレイヤーと、Cilantro 311 シティサービスを表すポリラインレイヤーを提供しています。 AppStudio クイックレポートテンプレートを使用して、クロスプラットフォームのモバイルアプリを作成します。

注意:

クイックレポートテンプレートは、データ収集アプリの作成に最適です。このテンプレートにより、観測情報を入力してオンラインレイヤーに送信できます。アイコン、色、スプラッシュ画面の画像で、ブランド化することもできます。多くの都市では、クイックレポートテンプレートをベースとして、311 モバイルアプリを作成しています。

必要に応じて、最初に、AppStudio および Cilantro 市のロゴとアイコンをいくつかダウンロードしてインストールします。次に、クイックレポートテンプレートを使用してアプリを作成します。

Cilantro-City-Branding zip ファイルをダウンロードします。
[Cilantro-City-Branding.zip] のコンテンツを選択した場所 (例: C:\Cilantro-City) に展開します。
AppStudio を開きます。
注意:
AppStudio がない場合は、ArcGIS AppStudio のリソースページから無料でダウンロードできます。ダウンロードしたら、ファイルをクリックしてインストールウィザードを開始します。ウィザードの指示に従って、アプリケーションをインストールします。
AppStudio アプリケーションリボンで、[サインイン] をクリックします。
[サインイン] ウィンドウで、[サインイン] を選択します。
「ArcGIS の組織アカウント」または ArcGIS Enterprise 指定ユーザーアカウントを使用してサインインします。
注意:
組織アカウントがない場合は、ソフトウェアアクセスのオプションをご参照ください。
AppStudio アプリケーションで [新しいアプリ] をクリックします。
[新しいアプリ] ウィンドウが開き、そのまま使用できるさまざまなアプリテンプレートがリボンのタブの下に表示されます。
[新しいアプリ] ウィンドウで、[テンプレート] タブをクリックし、[クイックレポート] テンプレートを選択します。
注意:
テンプレート名は、名前の一部としてバージョン番号を表示することができます。さらに、テンプレートを選択すると、使用例とテンプレートについて記述する要約と説明が、ウィンドウの右側に表示されます。
サイドウィンドウで、[作成] ボタンをクリックします。
新しいクイックレポートが、テンプレートを使用して作成されます。利用可能なアプリのリストに追加されます。組織の他のメンバーが作成したアプリが表示されることもあります。ただし、初めて AppStudio を使用する場合は、自分のアプリのみが表示されます。新しいアプリを選択して、サイドウィンドウを確認します。ウィンドウにはアプリに関する追加情報が表示されます。
アプリのリストで、必要に応じて、新しいクイックレポートアプリをクリックして選択します。サイドウィンドウで、[タイトルの編集] ボタンをクリックします。
[タイトル] に「Cilantro 311」と入力し、[変更を保存] ボタンをクリックしてアプリタイトルを更新します。

アプリのカスタマイズ

Cilantro 311 アプリのデザインは、組織、アプリの使用と機能を明確に表すものである必要があります。アプリの視覚的効果と情報価値を向上するために、説明、市の色、ロゴ、ブランディングを追加して、外観を変更します。

アプリのリストで、Cilantro 311 アプリが選択されていることを確認し、サイドウィンドウの [設定] ボタンをクリックします。
[AppStudio 設定] ウィンドウが表示されます。必要に応じてウィンドウの位置を変えます。親 AppStudio アプリケーションウィンドウを閉じないでください。

[AppStudio 設定] ウィンドウで、アプリケーションのサムネイルを変更および更新します。
[詳細] ウィンドウで、アプリのサムネイル画像を表すアイコンをクリックします。
ブラウザーウィンドウが表示されます。
ブラウザーウィンドウで、抽出した Cilantro-City-Branding コンテンツを含むフォルダーを参照します。 [thumbnail-cilantro311] 画像をダブルクリックします。
ダイアログボックスが表示され、現在のサムネイルがこの画像のコピーに差し替えられるということを説明します。 [はい] をクリックして差し替えを許可します。
[詳細] ウィンドウは、市のロゴの付いた Cilantro 311 アプリのサムネイルを更新します。
[詳細] ウィンドウの [サマリー] に、「Report issues to the city easily and quickly」と入力します。
[説明] で「このアプリは、落書きの除去、街灯の修理、樹木のメンテナンスなど、緊急性のないコミュニティ 311 サービスを、市民が簡単かつ迅速に Cilantro 市にリクエストすることができます。」と入力します。
次に、アプリを特定してブランド化するアイコンを、アプリを展開する可能性のあるスマートフォンおよびその他のデバイスに追加します。
[AppStudio 設定] ウィンドウで、[リソース] タブをクリックします。
[リソース] ウィンドウで、[アプリアイコン] アイコンの画像をクリックします。
ブラウザーウィンドウで、抽出した Cilantro-City-Branding コンテンツを含むフォルダーを見つけます。 [Icon-cilantro311] 画像をダブルクリックします。
メッセージウィンドウで、[はい] をクリックして、画像ファイルをアプリプロジェクトフォルダーにコピーします。
アイコンが更新されます。次に、背景画像を追加します。
[AppStudio 設定] ウィンドウで、[プロパティ] タブをクリックします。
[QuickReport プロパティ] ウィンドウが表示されます。
ウィンドウで、[開始画面]、[フォーム]、[色]、および [その他のプロパティ] タブを見つけて確認します。
[開始画面] タブの [背景画像] で、デフォルトの背景画像 (Forest Fire) をクリックします。
ブラウザーウィンドウで、抽出した Cilantro-City-Branding コンテンツを含むフォルダーを見つけます。 [background-cilantro311] 画像をダブルクリックします。
画像をアプリのフォルダーにコピーするかどうかたずねるメッセージが表示された場合は、[はい] をクリックします。
[QuickReport プロパティ] ウィンドウで、開始画面の背景画像が、cilantro 311 アプリ更新後のブランディングを反映した内容に更新されます。
[開始画面] タブをスクロールして、[ロゴの表示] プロパティを見つけ、[ロゴの表示] ボタンをクリックしてロゴをオフにします。
各自で、フッターのリンクを更新して、電話番号、Web サイト詳細、その他の問い合わせ先 (電子メールアドレスなど) を追加することもあります。
[AppStudio 設定] ウィンドウの下部にある [適用] をクリックして、変更内容を保存します。
緑のメッセージボックスは、設定が適用されたことを示します。
Cilantro 市は、ポイントを含むフィーチャレイヤーと、Cilantro 311 シティサービスを表すポリラインレイヤーを提供しています。次に、アプリにフィーチャレイヤーを追加します。

データの追加

Cilantro 市から、情報収集のための 311 モバイルアプリで使用されるフィーチャレイヤーが提供されているため、新しいフィーチャレイヤーを作成する必要はありません。フィーチャレイヤー (より具体的にはフィーチャレイヤーのデザインと作成で使用するテンプレート) は、クイックレポートアプリで使用されるため、重要です。これにより、市民が緊急でないコミュニティ 311 リクエストをレポートして送信する際に使用される選択肢が構築されます。

[QuickReport プロパティ] ウィンドウで、[フォーム] タブを見つけてクリックします。
注意:
フィーチャサービス (より一般的にはフィーチャレイヤー) を使用すると、組織は、インターネット経由でフィーチャを提供し、さらにこれらのフィーチャを表示するときに使用するシンボルを提供することができます。また、編集体験の向上に役立つテンプレートが提供されています。これにより、ユーザーは、クエリを実行して、既存のフィーチャを探して更新し、新しいフィーチャを追加することができます。すべての更新はサーバーに適用され、フィーチャレイヤーのユーザーが利用できます。
[フォーム] ウィンドウで、[フィーチャサービスのアドレス] プロパティを探して確認します。
注意:
クイックレポートアプリは、フィーチャレイヤーとそのレイヤーおよび設定を、アプリのレポート詳細の構築用テンプレートとして使用します。たとえば、近隣の道路標識の情報収集に使用する道路フィーチャレイヤーがある場合があります。各道路標識 (既存のもの、取得した新しいもの、レイヤーに保存されているもの) には属性が含まれています。これにより、標識の状況を更新して取得し、標識の写真を入れて、標識に関連する苦情をレポートすることができます。
[フィーチャサービスのアドレス] プロパティで、デフォルトのアドレスを次の URL に置き換えます。
```
https://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/Cilantro/FeatureServer
```
注意:
ホストフィーチャサービスアドレスを見つけるには、ArcGIS Online または ArcGIS Enterprise でホストフィーチャレイヤーアイテムを開きます。 [URL] セクションを下にスクロールして、[コピー] ボタンをクリックしてアドレスをコピーします。
[フィーチャサービスのレイヤー ID] に「0,1」と入力します。
Cilantro 市のフィーチャレイヤー ID は以下を特定します。
- 0: 落書き、街灯、ごみ箱、標識の問題を取集するポイントフィーチャ
- 1: 道路と歩道の問題を収集するポリライン
フィーチャサービスまたはフィーチャレイヤーは、サービスを形成する複数のレイヤーから構成されることがあります。アプリの特定のレイヤーを参照する場合、アプリがアクセスして使用するレイヤーを特定するレイヤー ID を入力する必要があります。レイヤー ID の番号は 0 から開始されます。そのため、フィーチャレイヤーが 5 つのレイヤーから構成され、3 つのレイヤーを使用する場合、レイヤー ID リストは、サービスの 1、4、5 番目のレイヤーを参照していることを示す、0,3,4 となります。
注意:
フィーチャサービスレイヤー ID を、レイヤー名とフィーチャタイプ (ポイント、ポリライン、ポリゴン) と一緒に、ArcGIS REST Services Directory で確認して特定することができます。

次に、インストールファイルを生成する前に、アプリのブランディングを最終化します。

ブランディングの色の追加

311 モバイルアプリのロゴとアイコンで使用する色に合わせて、アプリの色を変更して更新します。

[QuickReport プロパティ] ウィンドウで、[色] タブをクリックします。
[ヘッダーの背景色] に「#f15a24」と入力して Enter キーを押します。 [ボタンの色] で色の 16 進数コードとして、「#f15a24」と入力し、Enter キーを押します。
[AppStudio 設定] ウィンドウの下部にある [適用] をクリックします。
緑のメッセージボックスは、設定が適用されたことを示します。
次に、ArcGIS Runtime のライセンスを設定します。ライセンスのないアプリの場合、ウォーターマークのあるマップが表示されます。このアプリでは、無料の Lite ライセンスを選択します。
[AppStudio 設定] ウィンドウの左側ウィンドウで、[ライセンス] タブを探して選択します。
[ライセンス] ウィンドウの [ArcGIS Runtime ライセンス] の下にある [ライセンスキー] で、[Lite ライセンスの設定] をクリックします。
[ライセンスキー] ダイアログボックスでは、有効なライセンスキートークンが更新され表示されます。
[AppStudio 設定] ウィンドウの下部にある [適用] をクリックしてから、ウィンドウを閉じます。

アプリのテスト

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

AppStudio ウィンドウで、[Cilantro 311] アプリが選択されていることを確認します。
サイドウィンドウで [実行] をクリックします。
Cilantro 311 アプリが新しいウィンドウで開きます。
各自で、[Cilantro 311] アプリの機能をテストします。
- [新規] をクリックして、放置された車両、新しい落書き、道路の損傷に関する新しいレポートを生成します。
- [次へ] ボタンを使用して、さまざまなアプリオプションを試します。
- [ロケーションの追加] ウィンドウで、マップを移動してレポートする場所を絞り込みます。
- 作業が済んだら、アプリを閉じます。
次に、アプリをアップロードしてコミュニティと共有します。
AppStudio ウィンドウで、[Cilantro 311] アプリが選択されていることを確認して、[アップロード] ボタンをクリックします。
[AppStudio アップロード] ウィンドウの [共有] オプションで、[組織] をクリックし、[+ アップロード] ボタンをクリックします。
アプリが正常にアップロードされ、コミュニティのメンバーがダウンロードしてインストールできるようになると、緑色の [アップロードに成功しました] メッセージが表示されます。
[AppStudio アップロード] ウィンドウを閉じます。
次に、AppStudio Player をモバイルデバイスにインストールしたり、AppStudio Player のデスクトップバージョンをインストールして、デスクトップでアプリをテストしたりすることができます。次の手順は、モバイルデバイスのオプションの手順と、続いてテスクトップのインストールについて説明します。
注意:
AppStudio Player がデスクトップにインストールされていない場合は、ArcGIS AppStudio のリソースページからダウンロードできます。ダウンロードしたら、ファイルをクリックしてインストールウィザードを開始します。ウィザードの指示に従って、アプリケーションをインストールします。
モバイルデバイスに AppStudio Player をインストールするには、Microsoft Store、Google Play、または App Store から無料でダウンロードします。モバイルデバイスで、指示に従ってインストールを完了します。
デスクトップまたはモバイルデバイスで AppStudio Player を起動します。 [サインイン] をクリックして ArcGIS アカウントにサインインし、[Cilantro 311] アプリを選択します。
注意:
AppStudio Player では、ArcGIS Online または ArcGIS Enterprise アカウントのいずれかでサインインできます。
AppStudio Player で、アプリをダウンロードして、新しいレポートを追加し、レポートの場所を特定するポイントまたはラインを収集して、アプリをテストします。

ArcGIS AppStudio Developer Edition を使用して、開発者はアプリのインストールファイルを作成できます。これにより、アプリがストアに公開されます。次のオプションのセクションは、このための手順を説明しています。

アプリのインストールファイルの作成 (オプション)

ArcGIS AppStudio Developer Edition ライセンス (ArcGIS Developer Subscription Builder レベル以上を購入して入手) がある場合は、アプリのインストールファイルを作成できます。このセクションでは、アプリのインストール .apk ファイル (Android 用) と .exe ファイル (Windows 用) を作成します。

注意:

アプリのインストール .ipa ファイル (iOS デバイス用) を作成するには、Apple Developer ライセンスが必要です。

AppStudio のサイドパネルで、[設定] をクリックします。
[AppStudio 設定] ウィンドウで、[プラットフォーム] > [Android] をクリックします。 [パッケージ名] で、「com.companyname.myapp」などの名前を入力します。
注意:
パッケージ名は、組織または会社の名前が標準的なパッケージ名に含まれるという命名規則に従います。
[適用] をクリックします。
[AppStudio 設定] ウィンドウを閉じます。
AppStudio で、アプリが選択されていることを確認し、サイドウィンドウで [Make] をクリックします。
[Make] ウィンドウが表示されます。
[クラウドの Make] で、[選択] をクリックします。
[クラウドの Make の構成] ウィンドウの [ターゲットプラットフォームの選択] にある [Android] カラムで [ARMv8 (64 ビット)] チェックボックスをオンにし、[Windows] カラムで [64 ビット] チェックボックスをオンにします。
[ビルドの分析] をクリックして、[ビルドを要求] をクリックします。
[ビルドの状態] ウィンドウが表示されます。
AppStudio クラウドサービスがアプリのインストールファイルを作成するには、数分かかります。ビルドの要求が完了すると、ダウンロードとインストールの手順が記載された電子メールを受信します。
[ビルドの状態] ウィンドウで、https://appstudio-ota.arcgis.com/ をクリックして、ArcGIS アカウントでサインインします。
注意:
または、https://appstudio.arcgis.com/ のアプリコンソールページからインストールファイルの QR コードをスキャンします。
[インストール] をクリックし、デバイスにアプリをダウンロードしてインストールします。

このレッスンでは、すぐに使用可能な構成可能テンプレートと一緒に ArcGIS AppStudio を使用して、Cilantro 市用のモバイルアプリを作成して展開しました。同市では、落書きの除去、街灯の修理、樹木の手入れなど、市民は緊急でないコミュニティ 311 リクエストを送ることができます。複数のプラットフォームで実行可能なこのアプリの開発では、コードを書く必要はありませんでした。また、アプリは、組織またはパブリックでの共有が可能です。オプションの手順は、さまざまなモバイルプラットフォームへの AppStudio Player のインストール方法と、アプリのインストールファイルの作成方法を説明しています。

詳細については、次をご確認ください。

注意:

アプリの作成

注意:

注意:

注意:

注意:

アプリのカスタマイズ

データの追加

注意:

注意:

注意:

注意:

ブランディングの色の追加

アプリのテスト

注意:

注意:

アプリのインストールファイルの作成 (オプション)

注意:

注意:

注意:

Configuring Apps with ArcGIS AppStudio

ArcGIS AppStudio Basics

Building Native Cross-Platform Apps with ArcGIS AppStudio

要件

Outline

コーディング不要の 311 アプリの作成

注意:

アプリの作成

注意:

注意:

注意:

注意:

アプリのカスタマイズ

データの追加

注意:

注意:

注意:

注意:

ブランディングの色の追加

アプリのテスト

注意:

注意:

アプリのインストール ファイルの作成 (オプション)

注意:

注意:

注意:

フィードバックを送信

このチュートリアルの共有と再利用

詳細​

関連する Esri トレーニング

Configuring Apps with ArcGIS AppStudio

ArcGIS AppStudio Basics

Building Native Cross-Platform Apps with ArcGIS AppStudio

アプリのインストールファイルの作成 (オプション)

詳細