サービスポータル デザイナーを使用したページの作成と編集

ページを作成または編集し、レイアウトを使用してウィジェットを格納する列を整理します。

始める前に

必要なロール：sp_admin または admin

このタスクについて

これらの手順は、コーディング経験がほとんどまたはまったくないユーザーを対象としています。サービスポータル デザイナーには、ページ上の特定の構成に単にウィジェットを追加することから、CSS クラスを追加することまで、いくつかのレイヤーのカスタマイズが含まれています。

手順

1. 移動先 すべて > サービスポータル > Service Portal の構成.
2. [デザイナー] を選択します。
3. ヘッダーでポータル名を選択して、ページを設計するポータルに切り替えます。
   
4. サービスポータル Designer から、カスタマイズするページを選択するか、[新しいページを追加] を選択します。
5. [レイアウト] で、[コンテナー] を選択し、それをページにドラッグします。
6. 他のレイアウトの 1 つをドラッグしてコンテナーにドロップします。
   このレイアウトは、ページの構造とウィジェットをドロップできるスペースを定義します。レイアウトの構造は、ブートストラップ グリッド テンプレートに従い、常に最大で 12 まで追加します。
7. フィルターを使用してウィジェットを検索し、ウィジェットをレイアウトにドラッグします。

   図 : 1. コンテナー、レイアウト、ウィジェットをページにドラッグ

   

   デフォルトで情報を含まないウィジェットの場合、ポータル ページに表示するには、ウィジェット インスタンスのオプションを構成する必要があります。ウィジェットインスタンスオプションの構成の詳細については、「 ウィジェットインスタンスを構成する」を参照してください。

8. オプション: ページのプロパティを編集します。
   1. [ ページプロパティの編集] を選択します。
      ページテーブル [sp_page] のページ レコードが開きます。
   2. フォームを編集します。

      表 : 1. ページ フィールド

      フィールド	説明
      タイトル	ページの内部名です。タイトルを使用して、サービス ポータル デザイナーでページを検索します。
      ID	ページの一意の ID です。ID は、ページをポータルに割り当てるために使用するものです。また、ページの URL を決定します。例：https://instance name.service-now.com/doc_portal/?id=doc_page (ここでdoc_page はページ ID です)。
      アプリケーション	アプリケーション スコープです。
      公開	認証を必要とせずにページにアクセスできるようにします。[公開] が選択されている場合、リストされているロールに関係なく、すべてのユーザーがページを表示できます。
      Draft (ドラフト)	ページをドラフトとしてマークして、作成中のページを表示できるユーザーを制限します。管理者ロールを持つユーザーのみがドラフトのページを表示でき、他のすべてのユーザーには 404 ページが表示されます。
      ロール	ロールによりページへのユーザー アクセスを制限します。
      簡単な説明	ポータル ページについて説明します。このフィールドは公開されていません。
      ページ固有の CSS	ページにページ固有の CSS がない限り、ページはテーマと自社用カスタム設定から CSS を継承します。ページが異なって見えるようにする必要がある場合は、ページ固有の CSS がテーマと自社用カスタム設定の継承を上書きします。
      動的ページ タイトル	ページに読み込まれるコンテンツに応じて、わかりやすいタイトルを生成するための変数を作成します。 詳細については、「動的タイトルをページに追加する」を参照してください。
      ページのクローンを作成	変更可能なページのコピーを作成できます。ベース システム ページのクローンを作成すると、ページ上のウィジェットごとに新しいウィジェット インスタンスが作成されます。
      SEO スクリプトを使用	正規 URL の SEO タグと hreflang タグを追加するスクリプトインクルードを有効にするオプション。 詳細については、「SEO の有効化によるローカライズバージョンのポータルページ の検出」を参照してください。
      SEO スクリプト	ページに適用するスクリプトインクルード。デフォルトでは、システムは SPSEOHeaderTags スクリプトインクルードを使用します。これには、正規 URL のデフォルト実装と サービスポータルアナリティクス ページの hreflang タグが含まれています。
      人間が判読できる URL 構造	人間が判読できるキーワードをページ URL に追加して、公開ページの検索エンジン最適化 (SEO) とクリックスルー率を向上させます。人間が判読できる URL は、公開ページと非公開ページのページで想定される内容をユーザーが理解するのにも役立ちます。例: https://<instance>/kb/en/faq/what-is-a-cookie?id=kb_article_view&sysparm_article=KB0000007。 詳細については、「ページ URL への人間が判読できるキーワードの追加」を参照してください。

9. オプション: コンテナー プロパティを編集します。
   1. 編集するコンテナ内を選択するか、ブレッドクラムで [コンテナ ] を選択します。
   2. 編集アイコン [] を選択します。
      コンテナー テーブル [sp_container] のコンテナー レコードが開きます。
   3. フォームを編集します。

      表 : 2. コンテナー フィールド

      フィールド	説明
      名前	コンテナーの内部名です。
      順番	ページにコンテナーが表示される順序です。他のすべてのコンテナーの上にコンテナーを表示するように設定するには、[順番] フィールドでコンテナーに最小数を指定します。
      ページ	ページ コンテナを含む。
      スクリーンリーダータイトル	スクリーン リーダーによって使用されるタイトルです。
      セマンティックタグ	コンテナを含むセマンティック HTML タグ。次のオプションがあります。 なし:ヘッダーとフッターの間のページ上のすべてのコンテンツが <main> タグに含まれます。 メイン: <main> タグには、コンテナーとその内容のみが含まれます。<main> タグは、ページのメインコンテンツを含むセマンティック HTML 要素です。ページに固有のコンテンツに適用し、ページ上の 1 つの要素に対してのみ構成する必要があります。 注: <main> タグは、コンテナー、行、または列に適用できます。詳細については、「ページのメインタグの構成」を参照してください。
      アプリケーション	アプリケーション スコープです。
      幅	コンテナの幅です。次のオプションが含まれます。 固定 流体
      親クラス	コンテナーの親 CSS クラスです。
      CSS クラス	コンテナーの CSS クラスです。ページ固有の CSS を上書きします。
      背景色	コンテナーの背景色です。
      背景画像	コンテナーの背景画像です。
      背景スタイル	背景画像の表示スタイルです。次のオプションが含まれます。 デフォルト カバー 封じ込め 繰り返し
      ブートストラップの代替	このフィールドを選択すると、標準のブートストラップ グリッド クラスが削除され、コンテナー内のブートストラップ グリッド システムが無効になります。選択した場合、次の 適用されません 。 コンテナー レコードの [幅] フィールド。 コンテナー内の行レコードの標準ブートストラップ クラス。 コンテナー内の列レコードの [サイズ - xs]、[サイズ - sm]、[サイズ - md]、および [サイズ - lg] フィールド。 カスタム CSS クラスと CSS をコンテナー、行、および列レコードに提供する予定がある場合にのみ、このフィールドを選択します。
      ヘッダーへ移動	選択すると、コンテナはヘッダーに固定され、スクロールしません。サブヘッダーを作成するには、このオプションを使用します。

10. オプション: 別のページに切り替えるには、左ペインの [ ページ ] タブを選択し、構成する次のページを選択します。
11. オプション: ヘッダーの [プレビュー] ボタンを使用すると、設計時にページを表示できます。
    [プレビュー] を使用して、ヘッダーに表示されているコントロールによって、モバイル モードまたはタブレットモードでページを表示することもできます。

    図 : 2. デザイナーのタブレット ビュー

    

ページにサブヘッダーを追加する

ページ サブヘッダーとして機能するコンテナー レコードを選択します。サブヘッダーはページ ヘッダーに固定され、スクロールしません。

始める前に

必要なロール：admin

手順

1. 移動先 すべて > サービスポータル > Service Portal の構成.
2. [デザイナー] を選択します。
3. ページを選択します。
4. ヘッダーでポータル名を選択して、ページを設計するポータルに切り替えます。
   
5. サブヘッダーとして使用するコンテナを選択するか、ブレッドクラムを使用してコンテナを選択します。
6. 編集アイコン () を選択します。
7. [ヘッダーへ移動] を選択します。

タスクの結果

サブヘッダーとして、コンテナーはヘッダーに固定され、スクロールしません。

ページにフォントアイコンを含める

ページ上のすべてのウィジェットがフォント アイコン セットにアクセスできるように、ページにフォント アイコンを含めます。

始める前に

必要なロール：sp_admin または admin

手順

1. 移動先 すべて > サービスポータル > ページ をクリックし、フォントアイコンを追加するページをクリックします。
2. フォント アイコン ファイルをページ レコードに添付します。
3. ページの [ページ固有の CSS] フィールドに、フォント アイコン定義用の CSS を追加します。
   添付ファイルの sys_id を CSS の src として使用します。例：

   /* fallback */
   @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
   }
   
   .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;
   
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
   
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
   
     /* Support for IE. */
     font-feature-settings: 'liga';
   }

タスクの結果

このページの任意のウィジェットに設定されているアイコンからアイコンを選択できます。たとえば、HTML ウィジェットでは [ ソースコード ] オプションを使用してアイコンを使用できます。例：

<p style="text-align: center;"><em class="material-icons">flight_land</em></p>