Canvasレイアウトビルダーを使用して、あなたのデータの詳細表示にふさわしい、法人のニーズに合ったカスタムレイアウトを作成する方法を学びましょう。

続行する前に、カンバスレイアウトビルダーとその広範なカスタマイズ設定について詳細を知ることがあるかもしれません。

2. 適用性

1. このガイドは、Creator 5と6のユーザーを対象としています。あなたのCreatorバージョンを確認してください。
2. カンバスは、Creatorの無料プランと支払い済みプランの両方で利用可能であり、すべてのデータセンターで利用可能です。
3. カンバスを使用してカスタムレイアウトを設計するためには、スーパーアドミン、アドミン、開発者が認証されている必要があります。他のユーザーは、適切な権限があればアクセスし、表示することができます。
4. カンバスはウェブブラウザでのみサポートされています。つまり、ウェブブラウザ内のデータの詳細表示用のカスタムレイアウトを設計し、表示することができます。

1. レポートの設計ページに移動します。

2. 詳細表示タブを選択します。

3. カスタムレイアウトの下にある新しいレイアウトを作成するボタンを押します。次のいずれかを選択できます:

4. そうするとCanvas layout builderが表示されます。

5. 上部のメニューバーから、次の操作を実行できます：

6. レイアウトで行われた変更を保持するために、保存ボタンを押します。変更は自動的に保存されません。

7. Data および 要素 タブからデータと要素をドラッグアンドドロップします。

8. 追加したデータと要素にスタイルを適用します。

9. レイアウトビルダーを保存して閉じます。作成されたカスタムレイアウトは、詳細表示のレイアウトセクションに追加されます。

アプリケーションにアクセスするとき、あなたのレポートの詳細表示はこの選択されたカスタムレイアウトで表示されます。

1. 項目をCanvas layout builderにドラッグアンドドロップすると、初期設定の項目値がレポートの最初のデータの値でプレビューに表示されます。
   
   
2. レポートが何もデータを含んでいない場合、対応する項目値は上記の場合に'NA'と表示されます。同じことがすでに設計されたレイアウトテンプレートにも適用されます。

関連するブロックをドラッグアンドドロップすると、以下のような異なるレイアウトで表示できます。関連ブロックに画像が含まれている場合、ブロックに対して2つの追加的なレイアウト（テンプレート3と4）を選択できます。

上記のコンポーネントをドラッグ＆ドロップし、スタイル タブをクリックすると、アプリケーションに基づくテーマを適用するか、レイアウトビルダー内のスタイル設定を使用するかを選択できます。以下が可能です:

Depth オプションを使用して、要素を前後に移動することができますスタイルオプション下です。

左のメニューから次の要素をデザイン領域にドラッグ＆ドロップします。

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

ここでは、セクション要素で実行できるいくつかの処理を紹介します。

タブはデータを明確なセクションに整理し、ユーザーにとって構造化された表示を提供します。例えば、下の画像では、従業員の詳細タブに位置する教育の詳細というタブがあります。このタブには三つのタブがあります：Dependants、Salaryの詳細、そしてWork Experience、全てはセクションの中です。タブを追加するには+ アイコンをクリックします。

タブ要素で実行できる処理のいくつかをここに示します。

テーブル要素により、データ値を表形式で表示することができ、詳細表示におけるスペースを節約しつつ、構造化された行と列のテーブルでデータを表示します。たとえば、下の画像では、商品名、説明、商品IDが行と列として表示されています。

1. 行や列の上にマウスを合わせ、+または-アイコンをクリックして行や列を追加・削除します。
2. 行上で右クリックをして、項目を変更したり、コンポーネントを固定またはフルイド設定する、スタイルをコピー＆ペーストする、または項目を削除します。
   
   
3. ボーダーにドラッグしてテーブルのサイズを調整します。
   

3.3.2.4 テキスト

1. テキストボックスの境界線をドラッグしてサイズを調整します。
2. 右クリックして複製する、コンポーネントを固定または流動的に設定する、またはテキストボックスを削除します。
   
3. テキスト形式を見出し、強調、または普通に変更し、必要なスタイル設定を適用します。

3.3.2.5 アイコン

1. アイコンバーをスクロールして、多種多様なアイコンを選択します。
   
   
2. アイコンをクリックして複製する、削除する、または変更する。
   
   
3. 境界線をドラッグしてサイズを調整します。
   

3.3.2.6 折れ線グラフ

1. 折れ線グラフを水平または垂直に設定し、その厚み、スタイル、色を調整することができます。
   
2. 折れ線グラフをクリックして複製する、固定コンポーネントに設定する、または削除する。
   

3.3.3 スタイルタブ

1. レイアウトにスタイルを適用する
2. 項目にスタイルを適用する
   
3. カスタム機能にスタイルを適用する
4. セクションにスタイルを適用する
5. タブにスタイルを適用する
6. テーブル、テキスト、アイコン、折れ線グラフにスタイルを適用する

3.3.3.1 レイアウトのスタイル設定

1. 背景
2. パディング
3. 高さ
4. 幅
5. 画面に合わせる
   

背景

1. HEX コードを指定して背景色を選択するか、カラーピッカーを使用します。アプリケーションのテーマ色がカラーピッカーに含まれている場合、変化も選択できます。
2. 画像のチェックボックスを選択し、追加したい画像のURLを入力します。
   
   
1. 画像サイズ：画像サイズは以下の三つの設定で定義できます：
   
1. Contain：ページに合うように画像のサイズを調整し、アスペクト比を維持します。
   
2. 元の内容：画像をその元のサイズで保持します。
   
3. Cover：レイアウトページの長さと幅を埋めるように画像を伸ばし、アスペクト比を無視します。
   
2. 画像の繰り返し：背景画像がページ全体をカバーするには小さすぎる場合、画像の繰り返しオプションを使用できます。これにより、画像を複数回繰り返し、背景を完全に埋めることができます。以下の種類の繰り返しを選択できます：
   
1. X：画像はX軸に沿って繰り返されます。
   
2. Y：画像はY軸に沿って繰り返されます。
   
3. 両方：画像はレイアウトページのX軸とY軸の両方に沿って繰り返されます。
   
4. いいえ 繰り返し：これは画像が繰り返されるのを防ぎます。
   
3. Gradientのチェックボックスを選択して、背景の複数の色間で滑らかな遷移を作成します。直線の折れ線グラフで複数の色を選択すると、位置を調整して全ての色が完全に混ざるようにすることができます。
   

パディング

1. パディングの増加：スライダーを右にドラッグしてパディングを増やすことができます。また、ピクセル単位でパディングを指定することも可能です。
2. すべての辺で同じパディング：これは要素のすべての辺にパディングを適用します。このチェックボックスを解除して、要素の各辺に別々のパディングを定義することができます。

高さと幅

画面に合わせる

3.3.3.2 フィールドラベルと値のスタイル設定

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. すべての辺に同じ境界線：このオプションにチェックを入れると、セクションの四辺全てに境界線の設定が適用されます。チェックを外してそれぞれの辺に対して幅、スタイル、色を定義することもできます。

影

1. X - 値に基づき、影は水平方向（左または右）に移動します。プラスの'X' 値で元素の右側に影が配置され、マイナスの値で影が左に移動します。
2. Y - 値に基づき、影は縦方向（上または下）に移動します。プラスの'Y' 値で上部に影が配置され、マイナスの値で影を下部に押し出します。
3. ブラー - 影のシャープさを定義します。ブラーが+10、-10の場合、影は鮮明になります。値が大きいほど、影の鮮明さは低下します。
4. 拡散 - 影の大きさを調整します。プラスの拡散値で影が増加し、マイナスの拡散値で影が減少します。
5. 色 - 境界線の色は、色選択器から選択することができます。
   

半径

1. 半径を増加させる：スライダーをドラッグして半径を増加させるか、値を箱に入力します。
2. すべての辺に同じ半径: すべての四辺に対し同じ半径の値を適用する場合は、このオプションにチェックを入れます。また、各辺ごとに異なる半径の値を定義することもできます。
   

深度

3.3.3.5 タブに対するスタイル設定

1. 都道府県
2. 背景
3. 境界線
4. 半径
5. パディング
6. マージン

都道府県

1. 有効 - タブが選択されているとき。
2. ホバー - タブ名の上にマウスを置いたとき。
3. 一般 - タブが有効またはホバーされていないときです。
   
   

1. また、上記の各状況について、フォント、フォントのサイズ、色、ケース、取り消し線の変更、またはテキストの左揃え、中央揃え、右揃えの設定を変更することもできます。

3.3.3.6 テーブル、テキスト、アイコン、折れ線グラフのスタイル設定

1. ボーダー
2. シャドウ
3. 半径
4. パディング
5. デプス

1. テキスト: フォント、フォントのサイズ、色、ケース、取り消し線の変更、またはテキストの左揃え、中央揃え、右揃えの設定を変更することもできます。
   
   
2. アイコン: アイコンの色、背景色、背景画像、境界線、影、表示設定をカスタマイズできます。
   
   
3. 折れ線グラフ: 折れ線グラフを水平または垂直に設定し、厚さ、スタイル、色を調整できます。
   
   

4. 制限事項

1. このページはスプレッドシートレポートを除くすべてのレポートに関連しています。

関連トピック

1. キャンバスのレイアウトデザイナーを理解する
2. カスタムレイアウトの管理を行う
3. キャンバスレイアウトをデフォルトオプションとして設定する