UI ビルダークイックスタート

リリースバージョン: Yokohama

更新日 2025年01月30日

所要時間：8分

このクイックスタートでは、UI ビルダーで最初のページを作成する手順を説明します。最初のページを作成することは、ワークスペースまたはカスタムポータルエクスペリエンスのユーザーインターフェイスページをビルドする方法を理解するための、最初のステップとなります。

始める前に

必要なロール：ui_builder_admin

この UI ビルダークイックスタートでは、UI ビルダーで最初のページをビルドするために次のタスクを実行します。

UI ビルダーを起動します。
ワークスペースまたはカスタムポータルエクスペリエンスのページを作成します。ページの作成の詳細については、「UI ビルダーでのページの作成」を参照してください。
コンポーネントを追加してページをビルドします。コンポーネントの詳細ついては、「コンポーネントを使用した UI ビルダーページのカスタマイズ」を参照してください。
ページを保存します。
ページをプレビューして、ブラウザーでどのように表示されるかを確認します。

手順

次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.

図 : 1. UI ビルダーの起動
UI ビルダーホームページから、作業するエクスペリエンスを選択します。
作業対象のエクスペリエンスが一覧表示されない場合は、アドミニストレーターに連絡してエクスペリエンスへのアクセス権を取得するか、エクスペリエンスを作成します。詳細については、「UI ビルダーでユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
ページを作成します。
1. [ページとバリアント] セクションで [+] アイコンを選択します。
2. [新規ページの作成] を選択します。
3. [代わりに最初から作成します] を選択します。
  
  ページテンプレートを使用してページを作成することもできます。詳細については、「テンプレートからのページの作成」を参照してください。
4. [名前] フィールドに、ページの一意の名前として [開始ページ] を入力します。
5. [URL パス] フィールドにページのパスを指定します。UI ビルダーは、最後のステップで指定した名前に基づいてデフォルトのパスを生成します。
  
  デフォルトのパスは、ページ名に基づいて追加されます。独自のパスを作成することもできます。パスは必須で、一意になっている必要があります。パスには数字 (0 ～ 9)、文字 (A ～ Z、a ～ z)、およびいくつかの特殊文字 (「-」、「.」、「_」、「~」) を含めることができ、語の間はスラッシュまたはハイフンで区切られます。[URL プレビュー] にはページのパスが表示されます。
  
  注:
  アプリケーションスコープのデフォルトは、ユーザーが Now Platform® 内で現在存在しているスコープです。アプリケーションスコープの詳細については、「セキュリティとロールについて学習する」を参照してください。
6. [続行] を選択します。
7. オプション: [+ 追加] を選択して、パラメーターをページ URL に追加します。
  詳細については、「UI ビルダーページとページのバリアントを管理」を参照してください。
8. [よさそうです]を選択します。
9. ページバリアントの名前として「Manager Start Page」と入力します。
10. オプション: このページの対象者を 1 人以上追加します。
  必要な対象者がリストにない場合は、[プラットフォームで対象者を開く] リンクを選択して作成できます。
11. オプション: ページまたはタブを表示するタイミングの条件を追加します。
12. [続行] を選択します。
13. 次の画面で、[レスポンシブをビルド (Build responsive)] を選択します。
14. [作成] を選択して空白のページを作成します。
おめでとうございます! 最初のページが作成されました。このページにはコンテンツがありません。ページにコンポーネントを追加して機能をビルドします。コンポーネントはページの構成要素です。UI ビルダーには、ページに追加できる多くのコンポーネントが用意されています。コンポーネントは、ヘッダーのようにシンプルにすることも、リストのように複雑にすることもできます。
[エディター] を選択してページのカスタマイズを開始します。
ページにコンテナコンポーネントを追加します。
コンテナはコンポーネントを保持するためのものです。コンテナは、情報、画像、または機能 (コンポーネント) を追加するページの領域と考えてください。ページには必要な数のコンテナを、コンテナ内には必要な数のコンテナを、さらにコンテナ内には必要な数のコンポーネントを配置することができます。
1. コンテンツツリーで [+ コンテンツを追加] を選択します。
2. ツールボックスで [単一列] レイアウトを選択します。
3. コンテンツツリーで [列レイアウト 1 (Column layout 1)] を選択して、コンテナをハイライト表示します。
4. 構成パネルでコンポーネント名を選択します。
5. [コンポーネントラベル] フィールドに、「見出し用のコンテナ」と入力します。
6. [コンポーネント ID] フィールドに、「container_for_heading」と入力します。
7. [適用] を選択します。
  
  コンテンツツリーで列レイアウト名が [見出し用のコンテナ (Container for heading)] に変更されていることを確認します。コンテンツツリーは重要な概念です。コンテンツツリーは、ページの構造化されたレイアウトを表示する簡単な方法です。コンテンツツリーは、ページ上に複数のコンポーネントがある場合に特に重要です。コンテンツツリーでコンポーネントを選択してページ上のコンポーネントをハイライト表示すると、ページを簡単にビルドできます。コンポーネントのテキスト検索を実行できます。
  
  コンポーネント ID の詳細ついては、「コンポーネント ID」を参照してください。
最初の列レイアウトがページに正常に追加されました。
見出しコンポーネントを列レイアウトに追加します。
コンポーネントはさまざまな方法でページに追加できます。コンポーネントをページに追加する方法の詳細については、「コンポーネントの追加と構成」を参照してください。
1. ステップ 5 で作成した列レイアウトの下にあるコンテンツツリーで [+ コンテンツを追加] を選択します。
2. 検索に「見出し」と入力し、見出しコンポーネントを選択します。
3. コンテンツツリーで新しい見出しコンポーネントを選択して、ハイライト表示します。
4. 構成パネルで [なし] を選択します。
5. 構成パネルでコンポーネント名を選択します。
6. [コンポーネントラベル] フィールドに、見出しコンポーネントの一意のラベルとして「カスタム見出し」と入力します。
7. [コンポーネント ID] フィールドに、見出しコンポーネントの一意のラベルとして「custom_heading」と入力します。
8. [適用] をクリックします。
見出しコンポーネントをカスタマイズします。
1. コンテンツツリーで見出しコンポーネントを選択します。
2. 構成パネルで [構成] タブを選択します。
3. [ラベル] フィールドに、「新しいヘッダー」などのヘッダーのテキストを入力します。
4. [スタイル] はヘッダーテキストのサイズを変更します。
  たとえば、[ヘッダー (セカンダリ)] を選択すると、テキストが小さくなります。ヘッダーが 2 つあり、セカンダリのヘッダーをプライマリのヘッダーよりも小さくする場合は、異なるサイズのヘッダーが役に立ちます。コンポーネントの構成の詳細については、「UI ビルダーのコンポーネントの構成」を参照してください。
5. [レベル] は 1 のままにします。
6. [保存] を選択します。
ページに見出しコンポーネントが追加されカスタマイズされました。
ページに 2 番目の列レイアウトを追加します。
1. 前と同様に、コンテンツツリーで [+ コンテンツを追加] を選択します。
2. ツールボックスで [単一列] レイアウトを選択します。
3. コンテンツツリーで [列レイアウト 1 (Column layout 1)] を選択して、コンテナをハイライト表示します。
4. 構成パネルでコンポーネント名を選択します。
5. [コンポーネントラベル] フィールドに、「コンテンツ用のコンテナ」と入力します。
6. [コンポーネント ID] フィールドに、「container_for_content」と入力します。
7. [適用] を選択します。
8. [保存] を選択します。
2 つ目のコンテナコンポーネントがページに正常に追加されました。
ページに画像コンポーネントを追加します。
画像は、ページに視覚要素を追加するのに適した方法です。このクイックスタートでは、UI ビルダーに付属のストック写真を追加します。ただし、利用可能な画像は追加できます。
1. ステップ 8 で作成したコンテナの下にあるコンテンツツリーで [+ コンテンツを追加] を選択します。
2. 検索に「画像」と入力し、画像コンポーネントを選択します。
  デフォルト画像が画像コンポーネントにロードされます。URL を画像に追加することで、独自の画像を追加できます。インターネットでホストされている画像または Now Platform® の画像を使用できます。外部サイトでホストされている画像を使用する場合は、セキュリティのために https プロトコルを使用する必要があります。
3. [コンテンツ] ツリーで [画像 1] コンポーネントを選択して、画像を強調表示します。
4. 構成パネルで [なし] を選択します。
5. 構成パネルでコンポーネント名を選択します。
6. [コンポーネントラベル] フィールドに「My 画像」と入力します。
7. [コンポーネント ID] フィールドに「my_image」と入力します。
8. [適用] を選択します。
9. [保存] を選択します。
ページに画像コンポーネントを追加しました。
UI ビルダーヘッダーで [プレビュー] を選択してページをプレビューします。
おめでとうございます!UI ビルダークイックスタートを完了しました。ページでは、ワークスペースまたはポータルエクスペリエンスでの表示を示すプレビューが生成されます。