Azure API Management 開発者ポータルをテンプレートを使用してカスタマイズする方法

2019-11-04

Azure API Management で開発者ポータルをカスタマイズする基本的な方法は 3 つあります。

テンプレートは、システムで生成された開発者ポータルページのコンテンツ (API ドキュメント、製品、ユーザー認証など) をカスタマイズするために使用します。 DotLiquid 構文と、ローカライズされた文字列リソース、アイコン、ページコントロールのセットを使用すると、ページのコンテンツを必要に応じて柔軟に構成できます。

注

以下のドキュメントの内容は、非推奨の開発者ポータルに関するものです。 2023 年 10 月に廃止され、すべての API Management サービスから削除されるまで、通常どおりに引き続き使用できます。非推奨のポータルでは、重要なセキュリティ更新プログラムのみを受信します。詳細については、次の記事を参照してください。

適用対象: 開発者 |基本 |標準 |プレミアム

開発者ポータルテンプレートの概要

テンプレートの編集は、管理者としてログインしている間に 開発者ポータル から行われます。最初に Azure portal を開き、API Management インスタンスのサービスツールバーから [開発者ポータル ] をクリックします。

開発者ポータルテンプレートにアクセスするには、左側のカスタマイズアイコンをクリックしてカスタマイズメニューを表示し、[ テンプレート] をクリックします。

テンプレートの一覧には、開発者ポータルのさまざまなページをカバーするテンプレートのカテゴリが表示されます。各テンプレートは異なりますが、それらを編集して変更を発行する手順は同じです。テンプレートを編集するには、テンプレートの名前をクリックします。

テンプレートをクリックすると、そのテンプレートによってカスタマイズできる開発者ポータルのページが表示されます。この例では、 製品リスト テンプレートが表示されます。 製品リスト テンプレートは、赤い四角形で示される画面の領域を制御します。

製品リストテンプレート

一部のテンプレート ( ユーザープロファイル テンプレートなど) は、同じページのさまざまな部分をカスタマイズします。

各開発者ポータルテンプレート用のエディターでは、ページの下部に 2 つのセクションが表示されます。左側にはテンプレートの編集ウィンドウが表示され、右側にはテンプレートのデータモデルが表示されます。

テンプレート編集ウィンドウには、開発者ポータルの対応するページの外観と動作を制御するマークアップが含まれています。テンプレートのマークアップでは、 DotLiquid 構文が使用されます。 DotLiquid の一般的なエディターの 1 つは、デザイナー向けの DotLiquid です。編集中にテンプレートに加えられた変更は、ブラウザーにリアルタイムで表示されますが、テンプレートを保存して発行するまで顧客には表示されません。

テンプレートマークアップ

[テンプレートデータ] ペインには、特定のテンプレートで使用できるエンティティのデータモデルのガイドが表示されます。このガイドは、開発者ポータルに現在表示されているライブデータを表示することによって提供されます。テンプレートデータペインの右上隅にある四角形をクリックすると、 テンプレート ペインを展開できます。

テンプレートデータモデル

前の例では、次の例に示すように、[ テンプレートデータ ] ウィンドウに表示されるデータから取得された 2 つの製品が開発者ポータルに表示されています。

{
    "Paging": {
        "Page": 1,
        "PageSize": 10,
        "TotalItemCount": 2,
        "ShowAll": false,
        "PageCount": 1
    },
    "Filtering": {
        "Pattern": null,
        "Placeholder": "Search products"
    },
    "Products": [
        {
            "Id": "56ec64c380ed850042060001",
            "Title": "Starter",
            "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",
            "Terms": "",
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        },
        {
            "Id": "56ec64c380ed850042060002",
            "Title": "Unlimited",
            "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
            "Terms": null,
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        }
    ]
}

製品リスト テンプレートのマークアップは、情報と各製品へのリンクを表示する製品のコレクションを反復処理することによって、データを処理して目的の出力を提供します。マークアップの <search-control> 要素と <page-control> 要素に注目してください。これらは、ページでの検索コントロールとページングコントロールの表示を制御します。 ProductsStrings|PageTitleProducts は、ページの h2 ヘッダーテキストを含むローカライズされた文字列参照です。開発者ポータルテンプレートで使用できる文字列リソース、ページコントロール、アイコンの一覧については、 API Management 開発者ポータルテンプレートリファレンスを参照してください。

<search-control></search-control>
<div class="row">
    <div class="col-md-9">
        <h2>{% localized "ProductsStrings|PageTitleProducts" %}</h2>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
    {% if products.size > 0 %}
    <ul class="list-unstyled">
    {% for product in products %}
        <li>
            <h3><a href="/products/{{product.id}}">{{product.title}}</a></h3>
            {{product.description}}
        </li>
    {% endfor %}
    </ul>
    <paging-control></paging-control>
    {% else %}
    {% localized "CommonResources|NoItemsToDisplay" %}
    {% endif %}
    </div>
</div>