構成可能なアプリテンプレートの作成—Portal for ArcGIS

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

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

カスタム Web アプリテンプレートを作成するには、既存の構成可能なアプリテンプレートの 1 つをダウンロードして変更するか、既存の Web アプリを更新して、ポータルのコンテンツを操作するか、ArcGIS Web API を使用して新しい Web アプリを構築します。

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

ArcGIS Enterprise ポータルには、ArcGIS API 3.15 for JavaScript が含まれています。独自の API をホストし、新規に作成されたアプリテンプレートに合わせてポータルをそのローカルバージョンに紐づける必要はありません。Web アプリテンプレートは、インストールされた API を自動的に参照します。通常、ローカルにインストールされる API は https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi で使用できます。

注意:

ArcGIS Enterprise に付属している Web アプリケーションテンプレートファイルは変更しないでください。これらのファイルはポータルによって管理されているため、ファイルに対して行った変更がすべて、ポータルによって上書きされる可能性があります。テンプレートをカスタマイズするには、次の手順を実行します。

カスタマイズする既存のテンプレートファイルのコピーを作成します。
コピーをディスク上の別の場所に配置します。
テンプレートのコピーをカスタマイズします。
カスタマイズしたコピーを新しいテンプレートとしてポータルに追加します。

Web マップ

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

たとえば、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 関数を使用すると、マップオブジェクトやレイヤーなどへのアクセスを提供する応答オブジェクトにアクセスできます。

グループ化

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

ArcGIS REST API は、ポータルのコンテンツへのアクセスを提供します。これを使用すると、入力グループ ID に基づいてグループコンテンツを取得できます。

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

var portal = new esri.arcgis.Portal('https://webadaptorhost.domain.com/webadaptorname/');
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 のサポート

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

ポータルへのテンプレートの追加

Web アプリテンプレートを作成したら、テンプレートをポータルに追加して、アプリが ArcGIS で見つかるようにします。

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

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

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

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

アプリテンプレートをアイテムとして追加した後、アプリを登録する必要があります。開発する OAuth 2.0 ベースのアプリを登録することができます。アプリをポータルに登録すると、アプリケーション ID が提供されます。このアプリ ID は、アプリの配布および使用状況レポートの取得にも使用されます。

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

Identity Manager を操作して、登録されたアプリ ID を認識させるようにします。詳細については、ArcGIS API for JavaScipt に付属する「OAuth Basic」および「OAuth Popup」のサンプルをご参照ください。

アプリを構成可能にする

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

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

構成ファイルの作成

アプリ構成ファイルは、アプリテンプレートの構成オプションを定義する JSON ファイルです。構成ファイルの例をご参照ください。

備考:

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." }`
String	テキストの入力を受け入れます。画面上に表示されるテキストボックスのタイプを指定する 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"`
ブール型	true または false の値を指定するためのチェックボックスを作成します。指定された機能がマップに含まれているかどうかを確認するには、condition を使用します。マップがこの条件を満たしていない場合、チェックボックスとラベルは構成パネルに表示されません。 `{ "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" }` 出力のサンプル `tool_bookmarks:false`
数値	数値を受け入れるフィールドを作成します。フィールドが特定範囲の値だけを受け入れる場合は、constraints 設定を使用して、入力を特定範囲の値に制限したり、入力値の形式を設定したりできます。 `{ "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" }` 出力のサンプル `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"] }] }`
ラジオ	一度に 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    }
}

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

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

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