カスタムレイアウトの作成

カスタムレイアウトの作成

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

1. このページの内容

Canvas レイアウトビルダーを使用して、データの詳細ビューに表示される内容が自社の要件に合うようなカスタムレイアウトを設計する方法を説明します。

その前に、Canvas レイアウトビルダーと、その豊富なカスタマイズオプションについての概要も確認できます。

2. 提供状況

  1. このヘルプページは、Creator 5 および 6 をご利用のユーザー向けです。ご利用中のCreator のバージョンを確認してください。
  2. Canvas は Creator の無料プランと有料プランの両方で利用でき、すべてのデータセンターで利用可能です。
  3. スーパー管理者、管理者、開発者のみが Canvas を使用してカスタムレイアウトを設計できます。他のユーザーは、付与された権限に応じて、それらを閲覧・利用できます。
  4. Canvas はWeb ブラウザーでのみサポートされます。つまり、Web ブラウザー上でデータの詳細ビュー用のカスタムレイアウトを設計および表示できます。

3. カスタムレイアウトの設計

3.1 カスタムレイアウト作成の流れ


3.2 設定方法を見る


3.3 詳細ビュー用カスタムレイアウトを作成する手順:

1. レポートの[デザイン]ページに移動します。
2. [詳細ビュー]タブを選択します。
3. [カスタムレイアウト]の下にある[新しいレイアウトを作成]ボタンをクリックします。次のいずれかを選択できます。
  1. [最初から作成]をクリックして、新しいカスタムレイアウトを作成します。
  2. [テンプレートから]をクリックして、あらかじめデザインされたテンプレートを選択して使用します。任意のテンプレートを選択し、[このテンプレートを使用]ボタンをクリックします。
  3. [JSON をインポート]をクリックして、既に作成してエクスポートしておいたカスタムレイアウトをインポートします。
4. Canvas レイアウトビルダーが表示されます。

5. 画面上部のメニューバーから、次の操作を行えます。
  1. 変更の取り消し／やり直し。
  2. 保存前に Canvas をプレビュー。
  3. Canvas を.json形式でエクスポート。
  4. Canvas を全画面表示。
  5. Canvas に名前を付ける。

6. [保存]ボタンをクリックして、レイアウトに加えた変更を保存します。変更は自動では保存されません。

7. データタブと要素タブから、それぞれデータや要素をドラッグ＆ドロップします。
8. カスタムレイアウト内に追加したデータや要素に対して、スタイルを適用します。
9. レイアウトビルダーを保存して閉じます。作成したカスタムレイアウトは、詳細ビューのレイアウトセクションに追加されます。
Info
アプリケーションにアクセスすると、レポートの詳細ビューは、ここで選択したカスタムレイアウトで表示されます。

3.3.1 データタブ


Info
  1. Canvas レイアウトビルダーに項目をドラッグ＆ドロップすると、（プレビューで）その項目の初期値として、レポート内の最初のデータの値が自動入力されます。

  2. レポートにデータが含まれていない場合は、上記のケースでは該当する項目値は「NA」と表示されます。これは、あらかじめデザインされたレイアウトテンプレートにも同様に適用されます。
  1. 左側の[データ]タブで、必要な項目（フォーム項目およびシステム項目）をデザイン領域にドラッグ＆ドロップします。
  2. 必要な項目、カスタムアクション、データコメント、ブループリント、関連ブロックをデザイン領域にドラッグ＆ドロップします。
関連ブロックをドラッグ＆ドロップすると、次のようにさまざまなレイアウトで表示できます。関連ブロックに画像が含まれている場合は、ブロック用にさらに 2 種類のレイアウト（テンプレート 3 と 4）から選択できます。



上記のコンポーネントをドラッグ＆ドロップし、[スタイル]タブをクリックすると、アプリケーションのテーマを適用するか、レイアウトビルダー内で提供されているスタイル設定を使用できます。次の操作が可能です。
  1. ラベル／値を右クリックして、項目の変更、ラベルの非表示、ラベル位置の左／上への変更、コンポーネントの固定／可変の切り替え、スタイルのコピー／他コンポーネントからの貼り付け、項目の削除を行います。

  2. ボタン（カスタムアクション）を右クリックして、アクションの編集、項目の変更、スタイルのコピー／他コンポーネントからの貼り付け、アクションの削除を行います。

  3. データコメントを右クリックして、関連リストの変更、スタイルのコピー／他コンポーネントからの貼り付け、コメントのロックおよび削除を行います。

3.3.2 要素タブ


Info
要素は、[スタイル]内の[奥行き]オプションを使用して前面／背面に移動できます。
左側のメニューから次の要素をデザイン領域にドラッグ＆ドロップします。
  1. セクション
  2. タブ
  3. テーブル
  4. テキスト
  5. アイコン
  6. 線

3.3.2.1 セクション

セクション要素を使用すると、独立したセクションを作成し、項目、データコメント、ブループリントなどの関連コンテンツをグループ化できます。たとえば、[データ]タブからセクション内に項目を挿入したり、場所やロケーションの画像を挿入したり、メッセージを表示するバナーとして使用したりできます。

セクション要素に対して、次の操作を行えます。
  1. 枠線をドラッグしてセクションボックスのサイズを変更します。
  2. We were unable to process some of the images. アイコンをクリックしてセクションを複製します。
  3. セクションを右クリックし、[挿入] をクリックして項目を追加したり、コンポーネントを固定／可変に切り替えたり、スタイルのコピー／貼り付け、削除を行えます。
  4. 要素に必要なスタイルを追加します。

3.3.2.2 タブ

タブ要素を使用すると、データを複数のタブに整理できます。これにより、ユーザーにとって見やすく整理された表示を提供できます。たとえば、下図では、[学歴の詳細]タブが[従業員の詳細]タブ内に配置されており、その中に「扶養家族」「給与の詳細」「職務経歴」という 3 つのタブが、1 つのセクション内にまとめられています。[+] アイコンをクリックすると、さらにタブを追加できます。




タブ要素に対して、次の操作を行えます。
  1. タブに名前を付けるには、対象のタブをクリックし、左側パネルのStyleタブを開いて、適切な名前を入力します。

  2. +アイコンをクリックして、タブを追加できます。
  3. タブをクリックし、テキストボックスにタブ名を入力して名前を付けます。
  4. タブにカーソルを合わせて閉じるアイコンをクリックすると、タブを削除できます。
  5. タブにカーソルを合わせて両矢印アイコンが表示されたら、ドラッグ＆ドロップしてタブの位置を変更します。
  6. 右クリックでタブ内を操作し、項目の挿入、コンポーネントの固定／可変の切り替え、スタイルのコピー＆貼り付け、ロック、削除などを行えます。
  7. タブをアイコンで表現することもできます。その場合は、タブ名を右クリックし、アイコンを表示をクリックして、表示されたアイコンから選択します。
  8. アイコンを追加した後は、右クリックしてアイコンを非表示にしたり変更したりし、タブ名を非表示にできます。

  9. 画像や背景色などのスタイルコンポーネントも適用できます。操作方法はこちら

3。3。2。3 Table

テーブル要素を使用すると、データ値を表形式で表示できます。この形式を使用すると、行と列で構成されたテーブル構造でデータを表示することで、詳細ビュー内のスペースを節約できます。たとえば、下図では、商品名、説明、商品IDといったフォーム項目が行と列で表示されています。

We were unable to process some of the images.
テーブル要素では、次の操作を行えます。
  1. 行や列にカーソルを合わせ、+または-アイコンをクリックして、行や列を追加または削除します。
  2. 行を右クリックして項目を変更したり、コンポーネントを固定／可変にしたり、スタイルをコピー＆貼り付けしたり、項目を削除したりできます。

  3. 境界線をドラッグしてテーブルのサイズを変更します。

3。3。2。4 Text

詳細ビュー内で必要なコンテンツを入力するために、テキストボックス要素を挿入できます。たとえば、テキスト要素を使用して、セクションの前に見出しを表示したり、メモや免責事項を追加したりできます。

  1. 境界線をドラッグしてテキストボックスのサイズを変更します。
  2. 右クリックしてテキストボックスを複製したり、コンポーネントを固定／可変にしたり、テキストボックスを削除したりできます。
    We were unable to process some of the images.
  3. テキストの形式を見出し、太字、標準に変更し、必要なスタイル設定を適用できます。

3。3。2。5 Icon

アイコン要素を使用すると、セクション、タブ、テーブルなどの内部で、通常のテキストラベルの代わりに項目をアイコンで表現できます。たとえば、下図では、商品名と価格がテキストではなくアイコンで表示されています。

We were unable to process some of the images.

アイコン要素では、次の操作を行えます。
  1. アイコンパネルをスクロールして上下に移動し、豊富なアイコンの中から選択します。

  2. アイコンをクリックして、複製、削除、変更を行います。

  3. 境界線をドラッグして、サイズを拡大または縮小します。

3。3。2。6 折れ線グラフ

折れ線グラフ要素を使用すると、コンテンツを区切ったり、変化を示したりするための水平線を挿入できます。この要素は、コンテンツ間の区切り（テーマの切り替え）を表すために使用されます。たとえば、レイアウト内の2つのセクションの間に折れ線グラフ要素を挿入できます。
  1. 線を横向きまたは縦向きに設定し、太さ、スタイル、色を調整できます。
  2. 線をクリックして複製したり、固定コンポーネントとして設定したり、削除したりできます。
    We were unable to process some of the images.

3。3。3 Style タブ

背景色、余白（padding）、項目ラベルの配置、枠線、マージンなど、さまざまな設定からスタイルを適用し、データおよび要素タブ内のすべてのコンポーネントに反映できます。また、利用可能なスタイル設定を使用して、レイアウトの背景をカスタマイズすることもできます。

既存の色設定に加えて、アプリケーション全体で使用しているテーマカラーをレイアウトやその要素に適用することもできます。その場合は、カラーピッカーでテーマカラーオプションを選択し、必要に応じてテーマカラーのバリエーションを選びます。


既定では、ゼロからカスタムレイアウトを作成した場合、アプリケーションのテーマカラーは電話番号項目、メール項目、タブ名、URLなどに適用されます。

Notes
メモ:
  1. 一部のスタイル設定は、特定の要素専用です。
  2. Dataおよび要素タブ内のコンポーネントに適用したスタイルは再利用できます。たとえば、カスタム操作ボタンのスタイルをコピーするオプションは、右クリックメニューにあります。[スタイルをコピー] を選択し、対象要素を右クリックして [スタイルを貼り付け] を選択すると適用できます。
  3. ユーザーの画面解像度に応じて、カスタムレイアウトのサイズを動的に変更できます。その場合は、コンポーネントを選択し、高さと幅のオプションの横にある [自動] チェックボックスをオンにします。
  1. レイアウトにスタイルを適用する
  2. 項目にスタイルを適用する
  3. カスタム機能にスタイルを適用する
  4. セクションにスタイルを適用する
  5. タブにスタイルを適用する
  6. テーブル、テキスト、アイコン、線にスタイルを適用する

3。3。3。1 レイアウトのスタイル設定

カスタムレイアウトでは、次の項目をカスタマイズできます。
  1. 背景
  2. 余白（Padding）
  3. 高さ
  4. 幅
  5. 画面に合わせる

Background

  1. 背景色は、色のHEXコードを指定するか、カラーピッカーから選択します。アプリのテーマカラーがカラーピッカーに含まれている場合は、そのバリエーションから選択することもできます。
  2. 画像チェックボックスをオンにし、追加したい画像のURLを入力します。

    1. 画像サイズ - 画像サイズは次の3つの設定から指定できます。
      1. Contain - ページ内に収まるように画像サイズを調整し、アスペクト比は維持します。
      2. 元の内容 - 画像を元のサイズのまま保持します。
      3. Cover - アスペクト比に関係なく、レイアウトページの縦横いっぱいに画像を引き伸ばします。
    2. 画像の繰り返し - 背景画像のサイズが小さく、ページ全体をカバーできない場合は、画像の繰り返しオプションを使用します。画像を複数回繰り返して背景を完全に埋めることができます。次の繰り返しタイプから選択できます。
      1. X - 画像をX軸方向に繰り返します。
      2. Y - 画像をY軸方向に繰り返します。
      3. 両方 - レイアウトページのX軸とY軸の両方に画像を繰り返します。
      4. 繰り返しなし - 画像を繰り返さないようにします。
  3. グラデーションチェックボックスをオンにして、背景に複数の色が滑らかに変化するグラデーションを作成します。直線上に複数の色を設定した場合は、位置を調整してすべての色が自然に混ざり合うようにできます。

Padding

Padding（内側の余白）は、マージン／枠線内のコンテンツの周囲のスペースを指します。Padding を変更するには、要素を選択し、Paddingチェックボックスをクリックします。
  1. Padding を増やす: スライダーを右にドラッグして余白を増やします。ピクセル単位で値を指定することもできます。
  2. 四辺を同じ余白にする: 要素の四辺すべてに同じ余白を適用します。このチェックボックスをオフにすると、四辺それぞれに異なる余白を設定できます。

Height and width

レイアウトの高さと幅は、ピクセル値を入力して調整するか、自動オプションをオンにして、画面サイズに応じて自動調整させることができます。

Fit to screen

レイアウトは、ユーザーの画面の縦横サイズに合わせて拡大・調整されます。

3。3。3。2 項目ラベルと値のスタイル設定

スタイル設定やタブ内の各種オプションを使用して、項目のラベルと値の両方をカスタマイズできます。下図は「日付 of joining」項目のスタイル設定を示しています。「08-May-2023」という値のスタイルも同様にカスタマイズできます。
  1. テキスト、見出し、標準、太字、斜体などのテーマを変更します。
  2. フォント、フォントサイズ、色、大小文字、取り消し線を変更したり、テキストの配置を左揃え・中央揃え・右揃えに設定します。
  3. ラベルの配置を左、上、右、下に設定します。
  4. 背景色、枠線、角丸（半径）、余白（パディング、マージン）を変更します。

3。3。3。3 カスタム機能およびカスタムアクションのスタイル設定

カスタム機能（データコメントや ブループリントステージ など）では、次の項目をカスタマイズできます。

  1. コメントおよびリンクのテキストテーマを、ライト、標準、セミボールド、太字に変更します。
  2. コメントボタン、リンク、コンテンツの背景色と枠線の色を変更します。
  3. ユーザー権限アイコンの形状を変更します。
カスタムアクションでは、次の項目をカスタマイズできます。

  1. コンテナおよびボタンの背景色と枠線の色を変更します。
  2. ブループリントステージのラベルおよびステージ名の色、サイズ、太さを変更します。

3。3。3。4 セクションのスタイル設定

セクション要素は、次の項目でカスタマイズできます。
  1. 背景 - 設定内容は、レイアウトで利用できるものと同じです。
  2. 枠線
  3. 影
  4. 角丸（半径）
  5. パディング - 設定内容はレイアウトで利用できるものと同じです。
  6. 高さと幅 - 設定内容はレイアウトで利用できるものと同じです。
  7. 奥行き

枠線

枠線のチェックボックスをオンにして、次の操作を行います。
  1. 太さの調整: スライダーをドラッグして枠線の太さを増減します。ピクセル値を直接入力することもできます。
  2. スタイル: ドロップダウンリストから枠線のスタイルを選択します。
  3. 色: カラーパレットから枠線の色を選択するか、色の HEX コードを入力します。
  4. 四辺同一の枠線: このオプションをオンにすると、枠線設定がセクションの4辺すべてに適用されます。チェックを外すと、各辺ごとに幅、スタイル、色を個別に設定できます。

影

影のチェックボックスをオンにして、次の操作を行います。
  1. X - 値に応じて、影を水平方向（左または右）に移動します。X の値が正の場合、影は要素の右側に表示され、負の場合は左側に表示されます。
  2. Y - 値に応じて、影を垂直方向（上または下）に移動します。Y の値が正の場合、影は上側に表示され、負の場合は下側に表示されます。
  3. ぼかし - 影のシャープさを指定します。ぼかしが 0 の場合、影はくっきり表示されます。値が大きいほど、影はよりぼやけます。
  4. 広がり - 影の大きさを調整します。広がりの値が正の場合は影が大きくなり、負の場合は小さくなります。
  5. 色 - カラーピッカーから影の色を選択できます。

角丸（半径）

半径を指定して、セクション要素の角を丸くできます。［角丸（半径）］のチェックボックスをオンにして、次の操作を行います。
  1. 半径を増やす: スライダーをドラッグして半径を増減するか、ボックスに値を直接入力します。
  2. 四辺同一の半径: このオプションをオンにすると、4辺すべてで同じ半径になります。チェックを外すと、各辺ごとに異なる半径を設定できます。

奥行き

セクション要素の前面／背面方向の奥行きを調整できます。

3。3。3。5 タブのスタイル設定

タブのバー、レイアウト、コンテナは、次の項目でカスタマイズできます。
  1. 状態
  2. 背景
  3. 枠線
  4. 角丸（半径）
  5. パディング
  6. マージン
Info
背景、枠線、角丸（半径）、パディング、マージンの設定は、上記のセクションと同じです。


状態

タブは、各状態（標準、アクティブ、ホバー）ごとに見分けやすくカスタマイズできます。例えば、タブがアクティブ状態のときだけ背景色やマージン、背景画像を変えて、他の状態と明確に区別できます。
  1. アクティブ - タブが選択されている状態。
  2. ホバー - タブ名にカーソルを合わせている状態。
  3. 標準 - タブがアクティブでもホバーでもない通常の状態。

  1. また、上記の各状態ごとに、フォント、フォントサイズ、色、大小文字、取り消し線を変更したり、テキストの配置を左揃え・中央揃え・右揃えに設定できます。

3。3。3。6 テーブル、テキスト、アイコン、線のスタイル設定

テーブル、テキスト、アイコン、線に共通のスタイル設定は次のとおりです。
  1. 枠線
  2. 影
  3. 角丸（半径）
  4. パディング
  5. 奥行き
さらに、テキスト、アイコン、線では次のカスタマイズが可能です。
  1. テキスト: フォント、フォントサイズ、色、大小文字、取り消し線を変更したり、テキストの配置を左揃え・中央揃え・右揃えに設定できます。

  2. アイコン: アイコンの色、背景色、背景画像、枠線、影、表示設定をカスタマイズできます。

  3. 線: 線を横向きまたは縦向きに設定し、太さ、スタイル、色を調整できます。

4. 制限事項

  1. このページの内容は、スプレッドシートレポートを除くすべてのレポートに該当します。
  1. キャンバスレイアウトデザイナーについて
  2. カスタムレイアウトを管理する
  3. キャンバスレイアウトをデフォルトに設定する