構成可能なアプリテンプレートの作成—ArcGIS Online ヘルプ

コンテンツを作成する権限を持っている場合、Web サーバーでホストされるカスタムアプリテンプレートを作成することができます。カスタムアプリテンプレートが作成され、構成されたら、テンプレートを ArcGIS Online に追加して ArcGIS がアプリを検索できるようにします。その後、アプリを構成可能にしてアプリの外観や動作をカスタマイズ可能にすることもできます。組織サイトがいずれかのギャラリーでテンプレートを取り上げる場合は、テンプレートをアプリテンプレートグループの 1 つで共有します。

Web アプリテンプレートの作成と構成

カスタム Web アプリテンプレートを作成するには、既存の ArcGIS Configurable Apps テンプレートの 1 つをダウンロードして変更するか、既存の Web アプリを更新して、ArcGIS Online のコンテンツを操作するか、GitHub からダウンロードできるスターターアプリのコードを使用して新しい Web アプリを構築します。

どの方法で独自のアプリを作成する場合でも、URL パラメーターとマップを操作します。グループベースのアプリテンプレートを作成している場合はグループを操作します。Bing Maps のベースマップの操作や、パブリックでないマップへのアクセス、およびプロキシや CORS (Cross-Origin Resource Sharing) が必要なリソースの操作については、他の要件を考慮しなければならない場合があります。

アプリテンプレートを作成したら、それを Web サーバーでホストします。

URL パラメーター

テンプレートを使用する場合、webmap または group ID を URL パラメーターとしてテンプレートに含めることで、表示するマップまたはグループを指定します。 Web マップ ID は、webmap パラメーターを使用して指定します。グループコンテンツは、group パラメーターを使用して指定します。カスタムテンプレートで現在の Web マップまたはグループを操作するには、現在の Web マップまたはグループ ID を URL から抽出するコードをアプリに含める必要があります。

たとえば、基本ビューアーテンプレートのヨーロッパベースマップマップを表示できます。

これを行うには、まず基本ビューアーの URL を使用します。

https://www.arcgis.com/apps/View/index.html

ヨーロッパベースマップ URL の webmap= 部分をコピーします。

https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025

これを基本ビューアーの URL の最後に追加します。

https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025

ArcGIS API for JavaScript には、このプロセスを簡素化する esri.urlToObject というヘルパーメソッドがあります。このメソッドは、URL パラメーターをオブジェクトに変換します。

var webmap;
var urlObject = esri.urlToObject(document.location.href);

URL パラメーターをオブジェクトに変換すると、さまざまな入力にアクセスできます。たとえば、Web マップの URL パラメーターの値を webmap_id という変数に割り当てることができます。

var webmap_id = urlObject.query.webmap;

注意:

アプリが構成可能な場合は、構成設定を定義する appid という URL パラメーターも処理する必要があります。

Web マップ

注意:

この機能は Map Viewer Classic でのみサポートされています。

アプリマップテンプレートは、Map Viewer Classic に現在表示されているマップを操作するように設計されています。テンプレートは通常、Web マップの URL パラメーターで指定された Web マップに基づいて、マップを作成します。それぞれの Web API は、Web マップ ID からの情報を使用してマップを作成するヘルパーメソッドを備えています。 Web マップを操作する API の使用方法の詳細については、「ArcGIS API for JavaScript」をご参照ください。

たとえば、ArcGIS API for JavaScript の esri.arcgis.utils.createMap メソッドを使用すると、入力 ID に基づいてマップを作成できます。また、esri.arcgis.utils.createMap への同期リクエストが完了したときに実行されるコールバック関数を含めることもできます。

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});

注意:

Web マップの中に Bing Maps ベースマップが含まれている場合は、createMap メソッドを使用する際に Bing Maps キーを指定する必要があります。他にも、スライダー、ナビゲーション、属性などを表示するかどうかなど、さまざまなマップオプションを指定できます。

callback 関数を使用すると、マップオブジェクトやレイヤーなどへのアクセスを提供する応答オブジェクトにアクセスできます。 Map クラスの詳細については、「ArcGIS API for JavaScript」をご参照ください。

Group

グループテンプレートは、アプリとして指定されたグループからコンテンツを表示します。

ArcGIS REST API は、ArcGIS Online のコンテンツへのアクセスを提供します。これを使用すると、入力グループ ID に基づいてグループコンテンツを取得できます。 ArcGIS REST API の操作についての詳細は、「ArcGIS REST API の概要」をご参照ください。

次の例では、入力 ID でグループを検索するクエリを実行しています。

var portal = new esri.arcgis.Portal('https://www.arcgis.com');
dojo.connect(portal, 'onLoad',function(){
    portal.queryGroup(groupid).then(function(response){
        var group = response.results[0];
     });
});

グループが見つかった場合、そのグループからアイテムを取得するめにクエリを使用できます。

次の例では、グループにクエリを実行して、タイプが Web Map または Web Mapping Application のアイテムを 5 つ検索しています。

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

その他の注意事項

通常、Web アプリはさまざまな種類のコンテンツを操作できるように設計されているため、Bing Maps ベースマップやパブリックでないコンテンツなどが含まれるマップを処理するために、テンプレートを設定しなければならない場合があります。具体的な注意事項を以下に示します。

Bing Maps キー

表示するマップが Bing Maps ベースマップを使用している場合、アプリに Bing Maps キーを含める必要があります。 Bing Maps キーは、createMap メソッドのパラメーターとして提供されています。

プロキシおよび CORS のサポート

アプリで ArcGIS Online へのドメイン間リクエストを作成するので、CORS を有効にするか、プロキシをアプリに追加する必要があります。

ArcGIS Online へのテンプレートの追加

Web アプリテンプレートを作成し、それを Web サーバーでホストしたら、テンプレートを ArcGIS Online に追加し、アプリが ArcGIS で見つかるようにします。

アプリアイテムとしてのテンプレートの追加

Web アプリアイテムとしてテンプレートを ArcGIS Online に追加し、アプリへの URL を指定します。 [目的] には [構成可能] を選択します。 [API] には、[JavaScript] を選択します。

テンプレートの追加が完了すると、テンプレートアイテムがコンテンツに表示され、その詳細を編集できるようになります。必ず説明的なタイトルとサマリーを入力してください。この情報は、ユーザーが構成可能なアプリギャラリーでアイテムを見たときに表示されます。必要に応じて、アプリファイルを含む .zip ファイルを作成してアイテムに添付し、ダウンロード機能を提供します。

アプリテンプレートの登録

アプリテンプレートをアイテムとして追加した後、アプリを登録する必要があります。アプリを登録すると、一意のアプリ ID が与えられます。使用に関する統計情報を収集する場合や、ユーザーが OAuth 2.0 (標準化された認証フレームワーク) を使用してプラットフォームにサインインできるようにする場合は、アプリ内でアプリケーション ID を使用します。また、アプリ ID によって、アプリは組織に関連付けられたユーザーコンテンツや、他の ArcGIS Online 機能 (ジオコーディング、ルート検索、ジオエンリッチメントなど) と連携することもできるようになります。

Web アプリテンプレートを登録すると、[タイプ] を [ブラウザー] にして、[リダイレクト URI] がテンプレートアプリの URL にポイントするように設定します。

ApplicationBase テンプレートを使用している場合、config/defaults.js ファイル内で構成可能な oauthappid プロパティを設定します。

//sample

 "oauthappid": “h4xZWhfz0an0TvqC"

ApplicationBase テンプレートを使用していない場合、Identity Manager を操作して、登録されたアプリケーション ID を認識させるようにする必要があります。詳細については、「OAuth Basic」および「OAuth Popup」のサンプルをご参照ください。

アプリを構成可能にする

Web アプリの外観と動作をカスタマイズできるようにするには、Web アプリを構成可能にします。たとえば、ユーザー側でアプリの色を変更したり、アプリ内の他の設定をカスタマイズできるようにします。

アプリを構成可能にするには、構成ファイルを作成し、構成ファイルの情報と作成したアプリテンプレートアイテムを関連付ける必要があります。

構成ファイルの作成

アプリ構成ファイルは、アプリテンプレートの構成オプションを定義する JSON ファイルです。たとえば、Basic Viewer アプリの構成ファイルは configurationPanel.js で、Esri Basic Viewer リポジトリのリソースフォルダーに格納されています。構成ファイルの例をご参照ください。

注意:

JSON がエラーのない整形式であることを保証するために、JSONLint などで検証ツールを使用して JSON コードを実行することをお勧めします。

構成ファイルを作成するには、次の手順を実行します。

カテゴリと、セクションごとのフィールドを指定して、1 つ以上のセクションを作成します。
```
{
    "configurationSettings": [
        {
            "category": "",
            "fields": []
        }
    ]
}
```

次の表にリストされているフィールドタイプを使用して、構成オプションを指定します。構成ファイルの作成時に、構成設定の中で fieldName プロパティが一意であることを確認します。


フィールドタイプ	説明
段落	構成ダイアログボックスに説明文を表示します。 `{ "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }`
文字列	テキストの入力を受け入れます。画面上に表示されるテキストボックスのタイプを指定する stringFieldOption プロパティを含めます。値は textbox、textarea、および richtext です。デフォルトは textbox オプションで、1 行のテキストボックスです。 textarea オプションは、データを入力するための大きなテキストボックスです。 richtext オプションは、太字や斜体のフォントをテキストに設定するなど、ユーザーが書式を適用できるリッチテキストエディターです。 `{ "type": "string", "fieldName": "description", "label": "Description", "tooltip": "", "stringFieldOption": richtext \|\| textarea \|\| textbox, "placeHolder": "Text that appears in the text box to provide a hint to users on text to enter" }` 出力のサンプル `description:"Bike Accidents"`
Boolean	true または false の値を指定するためのチェックボックスを作成します。指定された機能がマップに含まれているかどうかを確認するには、condition を使用します。マップがこの条件を満たしていない場合、チェックボックスとラベルは構成パネルに表示されません。 `{ "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" }` 出力のサンプル `tool_bookmarks:false`
数値	数値を受け入れるフィールドを作成します。フィールドが特定範囲の値だけを受け入れる場合は、constraints 設定を使用して、入力を特定範囲の値に制限したり、入力値の形式を設定したりできます。 Dojo Number TextBox を使用した制約の作成の詳細については、「Dojo のドキュメント」をご参照ください。 `{ "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }` 出力のサンプル `range:0.5`
日時	選択した日付で日付選択を作成します。 `{ "type":"date", "fieldName" : "startDate", "label" : "Start Date" }` 選択した時刻で時刻選択を作成します。 `{ "type": "time", "fieldName": "startTime", "label": "Start Time" }` 日時の出力のサンプル (ISO-8601 形式) `Start Date and Time: 1970-01-01T21:30:00.000Z`
オプション	複数の選択肢を持つドロップダウンリストを作成します。 `{ "type": "options", "fieldName": "theme", "tooltip": "Color theme to use", "label": "Color Scheme:", "options": [{ "label": "Blue", "value": "blue" }, { "label": "Green", "value": "green" }, { "label": "Orange", "value": "orange" }] }` 出力のサンプル `theme:"blue"`
カラーパレット	パレットから色を選択したり、hex、rgb、または hsv 値を指定することができるカラーパレットを表示します。透過表示スライダーおよび色なしオプションも提供します。 `{ "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor", "transparency" : true, "noColor" : true }` 出力のサンプル `selectionColor:"#829254"`
Web マップダイアログ	アプリ内に表示する新しいマップを参照または検索するダイアログボックスを表示します。必要に応じて、マップをテストするための条件を指定できます。指定された条件が満たされない場合は、マップが必要条件を満たしていないことを確認する整合チェックメッセージが構成パネルに表示されます。有効な条件の文字列は次のとおりです。 time - マップが時間対応である edit - アプリに編集可能なレイヤーが 1 つ以上含まれる featurelayer - マップにフィーチャレイヤーが 1 つ以上含まれる filter - マップに対話式フィルターが定義されている 4x - マップにバージョン 4x の ArcGIS API for JavaScript でサポートされていないコンテンツが含まれる `{ “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] }` 出力のサンプル `webmap:"739ef0cf75de432995c77dd44ec8f652"`
Web シーンダイアログ	アプリ内に表示する新しい Web シーンを参照または検索するダイアログボックスを表示します。 `{ "type": "webscene" }` 出力のサンプル `webscene:"ab41c86a588748128e6f5d80990a2395"`
グループダイアログ	アプリ内に表示する新しいグループを参照または検索するダイアログボックスを表示します。 `{ "type": "group" }` 出力のサンプル `group:"449d00a4478d4849bbb65612355d6cd1"`
複数のレイヤーとフィールドのセレクター	マップ内に、サポートされるタイプとジオメトリタイプに一致するレイヤーとフィールドのツリービューが表示されます。アプリのエンドユーザーは、複数のレイヤーと各レイヤーで複数のフィールドを選択できます。注意: editOnly を true に設定すると、フィールドリストに編集可能なフィールドだけが表示されます。 `{ "label":"Select search layers and fields", "fieldName":"searchLayers", "type":"multilayerandfieldselector", "editOnly":true, "tooltip":"Select layer and fields to search", "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolyline", "esriGeometryPolygon" ] }, "fieldOptions":{ "supportedTypes":[ "esriFieldTypeString" ] } }` 出力のサンプル `searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]`
レイヤーとフィールドのセレクター	マップ内に、リストされたタイプとジオメトリでフィルターされたレイヤーのドロップダウンリストが表示されます。ユーザーが 1 つのレイヤーと複数のフィールドを選択できるように、1 つ以上のフィールドセレクターを指定することもできます。注意: editOnly を true に設定すると、フィールドリストに編集可能なフィールドだけが表示されます。 { "type":"layerAndFieldSelector", "fieldName":"tableLayer", "label":"Layer to display in table", "tooltip":"Layer to display in table", "fields":[ { "multipleSelection":true, "editOnly":true, "fieldName":"hiddenFields", "label":"Hide the selected fields", "tooltip":"Fields to hide in table", "supportedTypes":[ "esriFieldTypeSmallInteger", "esriFieldTypeInteger", "esriFieldTypeSingle", "esriFieldTypeDouble", "esriFieldTypeString" ] } ], "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolygon" ] } } 出力のサンプル `tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }`
Radio	一度に 1 つのオプションを選択できるラジオボタンを作成します。選択されたオプションは True に設定されます。 `{ "type": "radio", "fieldName": "layout", "tooltip": "Custom Layout", "label": "Custom Layout:", "items": [{ "label": "Sidebar", "value": "sidebarmenu" }, { "label": "FullWidth", "value": "fullwidth" }, { "label": "default", "value": "Default", "checked": true }] }` 出力のサンプル `customLayout:"fullmap"`
ベースマップ	すべての名前付き Esri ベースマップのドロップダウンリストを表示します。 `{ “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }` 出力のサンプル `my_basemap:"satellite"`
条件付き	true または false 条件に基づいてコンテンツを表示または非表示にします。たとえば、[レイヤーリストの表示] チェックボックスがオフの場合、レイヤーリストとすべての関連オプション (たとえば、[レイヤーリスト内のサブレイヤーを含める]) は非表示になります。 `{ "type":"conditional", "condition": false, "fieldName":"showtitle", "label":"Display Map Title", "items":[ { "placeHolder":"Defaults to web map title", "label":"Title:", "fieldName":"title", "type":"string", "tooltip":"Defaults to web map title" },{ "type":"paragraph", "value":"Enter a value to override the default title font size " }, { "type":"string", "label":"Title font size", "tooltip":"Specify title font size", "fieldName":"titlefontsize", "placeHolder":"20px" } ] } }`
検索	ロケーターを使ってフィーチャレイヤー内のフィーチャや住所を検索するウィンドウを設定します。フィーチャの検索を設定する場合は、ユーザーはフィーチャレイヤーを選択してフィールドを検索することができます。 `{ “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” }` 出力のサンプル `searchConfig: { sources: [{ locator: { url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", _url: { path: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", query: null }, normalization: true }, url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", name: "ArcGIS World Geocoding Service", enableSuggestions: true, singleLineFieldName: "SingleLine", enable: true, id: "dojoUnique3" }], activeSourceIndex: 0, enableSearchingAll: false }`
縮尺リスト	ユーザーが選択できる事前定義された縮尺レベルの一覧が表示されます。たとえば、国、州、郡、首都圏、市区町村、地区などです。 `{ “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” }` 出力のサンプル `“customUrlLayerZoomScale”: 12000`
ExtentMap	マップの中心とズームレベルのオプションを持つセレクターを作成します。 `{ "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" }` 出力のサンプル `mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }`

構成情報とテンプレートアイテムの関連付け

構成ファイルを作成したら、次に JSON 構成ファイルとアプリテンプレートを関連付け、構成可能にします。

アプリテンプレートのアイテムページで、[設定] タブをクリックし、上部の [Web マッピングアプリケーション] リンクをクリックします。
[構成パラメーター] ボックスで、構成ファイルの JSON コードを貼り付けます。
注意:
[構成パラメーター] ボックス内の JSON は有効である必要があります。 JSON がエラーのない整形式であることを保証するために、JSONLint などで検証ツールを使用して JSON を実行することをお勧めします。
設定を保存します。

構成ファイルの例

次に、完全な構成ファイルの例を示します。

{
    "configurationSettings": [
        {
            "category": "General Settings",
            "fields": [
                {
                    "type": "options",
                    "fieldName": "theme",
                    "tooltip": "Color theme to use",
                    "label": "Color Scheme:",
                    "options": [
                        {
                            "label": "Blue",
                            "value": "blue"
                        },
                        {
                            "label": "Green",
                            "value": "green"
                        },
                        {
                            "label": "Orange",
                            "value": "orange"
                        }
                    ]
                },
                {
                    "type": "string",
                    "fieldName": "layer",
                    "label": "Analysis Layer",
                    "tooltip": "Feature Layer with Facilities to search"
                },
                {
                    "type": "string",
                    "fieldName": "orgname",
                    "label": "Organization Name:",
                    "tooltip": "",
                    "stringFieldOption": "richtext",
                    "placeHolder": "Organization Name"
                },
                {
                    "type": "number",
                    "fieldName": "bufferdistance",
                    "label": "Search Distance (miles)",
                    "value": "1"
                }
            ]
        }
    ],
    "values": {
        "theme": "orange",
        "bufferdistance": 1
    }
}

組織のギャラリー内でのテンプレートの推奨

組織サイトの Configurable Apps ギャラリーやグループアプリギャラリーでテンプレートを使用する場合は、そのギャラリーに使用される全ユーザーとグループでアイテムを共有します。組織サイトの管理者は、テンプレートを含んでいるグループを使用できるように、マップを構成したり、グループを構成したりできます。

このトピックへのフィードバック