第1章 3scale 管理の API 用デベロッパーポータル作成の概要

3scale デベロッパーポータルは、API 利用者が使用する Web サイトです。

  • お客様の 3scale 管理のアップストリーム API にアクセスするためにサインアップする
  • お客様のアップストリーム API の使用方法に関するドキュメントを参照する

3scale が提供するデベロッパーポータルのサンプルには、ほとんどの API プロバイダーがデベロッパーポータルに実装する必要のある機能が含まれます。このネイティブデベロッパーポータルでは、サンプルの Echo API を使用して、一般的なデベロッパーポータルの構造を実証します。ネイティブデベロッパーポータルの確認後、ポータルを変更するための手順が記載されているので、独自のデベロッパーポータルの作成方法を理解することができます。

ネイティブデベロッパーポータルの確認および変更の前提条件はありません。ただし、ネイティブのデベロッパーポータルを変更して独自のデベロッパーポータルを作成したら、デベロッパーポータルを API 利用者に公開する前に、サインインワークフローおよび認証も実装する必要があります。

1.1. デベロッパーポータル作成用の 3scale 編集環境の確認

デベロッパーポータルの作成を開始する前に、3scale で提供されるサンプルの Echo API デベロッパーポータルを確認してください。Echo API デベロッパーポータルは、専用のデベロッパーポータルを作成するための開始点となります。デベロッパーポータルはゼロから作成しません。代わりに、ネイティブの Echo API デベロッパーポータルを変更して、希望のルックアンドフィールのデベロッパーポータルを作成します。

手順

  1. 3scale 管理ポータルで、上部のコンテキストセレクターを展開し、Audience をクリックします。
  2. 左側のナビゲーションツリーで Developer Portal を展開し、Content をクリックします。これにより、デベロッパーポータルを作成するためのメインの編集環境が表示されます。

    Developer Portal main editing environment

    3scale では、Root に、デベロッパーポータルのリソース階層が表示されます。

    1. DocumentationHomepage、および Show は、デベロッパーポータルの基盤ページです。各ページでスクロールダウンし、ページコンテンツを定義する HTML を表示します。
    2. これらのページより下のフォルダーには、3scale リソースをデベロッパーポータルにプルするページが含まれます。たとえば、Account フォルダーには、3scale 管理者が管理ポータルで作成した 3scale アカウントを表示および編集するページが含まれます。これらのページを開始点として使用し、必要に応じて変更します。
    3. 右上の New Page ドロップダウンでは、ページ、レイアウト、パーシャル、セクション、ファイル、またはポートレットを追加できます。それぞれの項目を選択して、作成するために指定する情報を表示します。
  3. Developer Portal > Content を選択し、Layoutsが表示されるまでリソースの階層をほぼ最下部までスクロールし、Main layout をクリックします。
  4. Layout ‘Main Layout" の見出しが表示されるように、上方向にスクロールします。

    内部タイトルとシステム名の後に、Liquid が有効になっていることを確認できます。Liquid は、3scale が 3scale システムからのほとんどのデータを表示および処理するのに使用するフレームワークです。ページコンテンツを定義するコードには、Liquid マークアップと HTML が含まれます。これは Draft タブに表示されます。これには、デベロッパーポータルページのメインレイアウトのコードが含まれています。

  5. 左側のナビゲーションツリーで、Developer Portal > Content の下にある各サブカテゴリーを順番にクリックして確認します (DraftsRedirectsGroupsLogoFeature Visibility、および ActiveDocs)。
  6. 左側のナビゲーションツリーで、Developer Portalの下にある Visit Portal (最後のエントリー) をクリックします。

    新しいブラウザータブに、3scale が提供する Echo API デベロッパーポータルの開発バージョンの Web サイトが表示されます。この開発バージョンを使用して、3scale ネイティブデベロッパーポータルを表示します。その後、ネイティブデベロッパーポータルのカスタマイズを繰り返し、加えた変更を表示して、独自のデベロッパーポータルを作成することができます。

    最上部にDraft|Publishedと書かれた濃いグレーのパネルが右側にあるので、これがデベロッパーポータルの開発バージョンであることが確認できます。Draft ビューは、反復/差分の改善をサポートします。Draft バージョンの見栄えおよび動作が希望どおりになったら、公開できます。

    右側のパネルには、現在のページのコンテンツを提供する要素が一覧表示されます。

    1. Page Homepage
    2. Layout Main layout
    3. Partial Submenu
    4. Partial analytics
  7. Page Homepage をクリックします。新しいブラウザータブに、編集するために Page 'Homepage' が開いているデベロッパーポータルの編集環境が表示されます。
  8. Echo API デベロッパーポータルの開発バージョンに戻り、右上の SIGN IN をクリックすると、API 利用者がデベロッパーポータルにサインインするために使用する SIGN IN ページが表示されます。

    右側のグレーのパネルのテンプレートリストの下に、ユーザー名およびパスワードがあります。これを使用して、デベロッパーポータルへのサインインをシミュレーションできます。

    1. SIGN IN ページの USERNAME OR EMAIL フィールドに John を入力します。これは、右側のグレーパネルに一覧表示されるユーザー名です。
    2. PASSWORD フィールドに、グレーのパネルに一覧表示されるパスワードである 123456 を入力します。
    3. Sign In をクリックし、API 利用者に表示されるデベロッパーポータルを表示します。

次のステップ

引き続き、十分にネイティブデベロッパーポータルを確認してください。編集環境や、Echo API デベロッパーポータルの開発バージョンの操作に慣れたら、3scale ネイティブデベロッパーポータルの変更 の手順に従います。