ページエディタを使用してポータル コンテンツを開発する

このページの内容は Apigee と Apigee ハイブリッドに該当します。

Apigee Edge のドキュメントを表示する。

ページエディタで、Markdown または HTML を使用してポータル コンテンツを定義します。

ページエディタを確認する

ポータルのページを管理するの説明に従って、ページのリストが表示されたときにページの名前をクリックして、ページエディタにアクセスします。

ページエディタ

前の図でハイライト表示されているように、ページエディタでは次の操作を行うことができます。

ページエディタでコンテンツを編集する

Markdown は、読み取りと書き込みが簡単な書式なしテキスト マークアップを使用するシンプルなフォーマット言語です。構文は句読点文字を使用して指定します。Markdown は、ブラウザでレンダリングする前に HTML に変換されます。

ページエディタの上部にあるクイック編集ツールバーには、書式設定を適用（太字、斜体など）したり、Markdown タグ（リスト、画像、リンクなど）を挿入したりするためのショートカットがあります。Markdown 構文の概要については、クイック編集ツールバーの Markdown アイコン をクリックして、Markdown 構文のクイック リファレンスをご覧ください。

直前の編集を元に戻すには Command + Z を、やり直すには Command + Shift + Z を押します。

書式設定ワークフローをシンプルにする場合は、Markdown をおすすめします。ただし、HTML を置き換えるものではありません。Markdown ではできないさまざまな書式設定を HTML では行うことができます。たとえば、HTML では要素に CSS クラスを指定できます。これは、Markdown では行えません。

   <p class="class1">

HTML タグを入力するだけで、コンテンツ本文の任意の場所に HTML を挿入できます。

HTML タグについては、HTML5 仕様をご覧ください。

Angular Material コンポーネントを追加する

Angular Material は、最先端の UI コンポーネント ライブラリです。Angular Material コンポーネントを使用すると、最新の設計原則を活用して、一貫性があり、応答性が高く、アクセスしやすいユーザー インターフェースを素早く簡単に構築できます。

使用可能なコンポーネント

このポータル エクスペリエンスは Angular Material を使用して構築され、次の表にまとめられているように、ページでは一部の Angular Material コンポーネントが使用されます。

コンポーネント 例
ボタン 次のコードは、立体感のある長方形のボタンを作成します。
<a mat-raised-button 
   href="quickstart">
   Quick Start
</a>

次のコードは、警告アイコンなどの、透明な背景の円形ボタンを作成します。ボタンの色は、警告カラーパレットを使用して定義します。

<button mat-icon-button
   color="warn">
   <mat-icon aria-label="Example warning">warning</mat-icon>
</button>
カード 次のコードはカードを作成します。カードには、ボタンとアイコン コンポーネント、見出し、本文のテキストが含まれます。ボタンの色は、プライマリ カラーパレットを使用して定義します。

<mat-card 
   href="apis">
   <mat-card-header 
      color="primary">
         <mat-icon>
            class
         </mat-icon>
         <h1>
            APIs
         </h1>
   </mat-card-header>
   <mat-card-content>
      <p class="home-page-card-content-text">
         Learn about and try our APIs.
      </p>
   </mat-card-content>
   <mat-card-actions>
      <button mat-button>
          View APIs
      </button>
   </mat-card-actions>
</mat-card>
アイコン チェックマーク アイコンを作成するコードを以下に示します。サポートされている全アイコンの一覧については、マテリアル デザイン - アイコンをご覧ください。
<mat-icon>
   check_circle
</mat-icon>
ツールバー 次のコードでは、テキストとショッピング カートのアイコンを含むシンプルなツールバーを作成します。 
<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>
   <mat-icon>add_shopping</mat-icon>
</mat-toolbar>

ポータルのページの公開設定を管理する

ポータルのページの公開設定を管理する場合は、次のいずれかへのアクセスを許可します。

ポータルのページの公開設定を管理するには:

  1. ページエディタの右側のペインで、オーディエンスの横にある [Manage] をクリックします。
  2. 公開設定を選択します。オーディエンス機能のベータ版リリースに登録済みの場合、次のいずれかのオプションを選択します。
    • Public (visible to anyone): すべてのユーザーにページの閲覧を許可します。
    • Authenticated users: 登録ユーザーのみにページの閲覧を許可します。
    • Selected audiences: ページを表示できるようにするオーディエンスを選択します。ポータルのオーディエンスを管理するをご覧ください。
      オーディエンスを管理するには、[Create or modify audiences] をクリックします。

    または、次のいずれかを選択します。
    • Anonymous users: すべてのユーザーにページの閲覧を許可します。
    • Registered users: 登録ユーザーのみにページの閲覧を許可します。
  3. [適用] をクリックします。

ポータル コンテンツをプレビューする

ポータル コンテンツをプレビューするには、ページエディタ ツールバーの [プレビュー] をクリックします。ポータル内の他のページを移動し、必要に応じてコンテンツをプレビューします。

ポータル コンテンツを公開する

ポータル コンテンツを公開するには、右ペインで [公開] をクリックします。ポータル コンテンツの公開を停止するには、右側のペインで [公開停止] をクリックします。ポータル コンテンツの公開もご覧ください。

ページを削除する

ポータル エディタからページを削除するには、ページエディタの右側のペインで [削除] をクリックします。削除を確認するよう求められます。