構成可能なアプリ テンプレートの作成

コンテンツを作成する権限を持っている場合、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 に現在表示されているマップを操作するように設計されています。テンプレートは通常、Web マップの URL パラメーターで指定された Web マップに基づいて、マップを作成します。それぞれの Web API は、Web マップ ID からの情報を使用してマップを作成するヘルパー メソッドを備えています。Web マップを操作する API の使用方法の詳細については、「ArcGIS API for JavaScript の概要」をご参照ください。

たとえば、ArcGIS API for JavaScriptesri.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」をご参照ください。

グループ

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

ArcGIS REST APIArcGIS 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 テンプレートを使用している場合、oauthappid ファイル内で構成可能な config/defaults.js プロパティを設定します。

//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. カテゴリと、セクションごとのフィールドを指定して、1 つ以上のセクションを作成します。
    {
        "configurationSettings": [        {
                "category": "",            "fields": []        }
        ]
    }
  2. 次の表にリストされているフィールド タイプを使用して、構成オプションを指定します。構成ファイルの作成時に、構成設定の中で fieldName プロパティが一意であることを確認します。

    フィールド タイプ説明

    段落

    構成ダイアログ ボックスに説明文を表示します。

    {
           "type": "paragraph",       "value": "* These menu items will appear in the application when the web map has layers that require them."
    }

    文字列

    テキストの入力を受け入れます。画面上に表示されるテキスト ボックスのタイプを指定する stringFieldOption プロパティを含めます。値は textboxtextarea、および 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 設定を使用して、入力を特定範囲の値に制限したり、入力値の形式を設定したりできます。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"

    複数のレイヤーとフィールドのセレクター

    マップ内に、サポートされるタイプとジオメトリ タイプに一致するレイヤーとフィールドのツリー ビューが表示されます。 アプリのエンド ユーザーは、複数のレイヤーと各レイヤーで複数のフィールドを選択できます。

    メモ:

    editOnlytrue に設定すると、フィールド リストに編集可能なフィールドだけが表示されます。

    {  
                   "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 つ以上のフィールド セレクターを指定することもできます。

    メモ:

    editOnlytrue に設定すると、フィールド リストに編集可能なフィールドだけが表示されます。

    {  
                   "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 構成ファイルとアプリ テンプレートを関連付け、構成可能にします。

  1. アプリ テンプレートのアイテム ページで、[設定] タブをクリックし、上部の [Web マッピング アプリケーション] リンクをクリックします。
  2. [構成パラメーター] ボックスで、構成ファイルの JSON コードを貼り付けます。
    メモ:

    [構成パラメーター] ボックス内の JSON は有効である必要があります。JSON がエラーのない整形式であることを保証するために、JSONLint などで検証ツールを使用して JSON を実行することをお勧めします。

  3. 設定を保存します。

構成ファイルの例

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

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