Skip To Content

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

コンテンツを作成する権限を持っている場合、カスタム アプリ テンプレートを作成することができます。カスタム アプリ テンプレートが作成され、構成されると、テンプレートをポータルに追加して 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 アプリケーション テンプレート ファイルは変更しないでください。これらのファイルはポータルによって管理されているため、ファイルに対して行った変更がすべて、ポータルによって上書きされる可能性があります。テンプレートをカスタマイズするには、次の手順を実行します。

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

Web マップ

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

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

グループ化

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

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. カテゴリと、セクションごとのフィールドを指定して、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."
    }

    String

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

    {      "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"

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

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

    備考:

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