キャンバスレイアウトデザイナーの概要

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

1. このページの内容

Creator の Canvas レイアウトビルダーを使用して、法人の要件に応じた詳細ビューのレイアウトをデザインする方法について説明します。

2. 提供状況

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

3. 概要

レイアウトとは、テキストや画像などの視覚要素およびその他のコンポーネントを、デザイン全体の中でどのように配置するかという構造のことです。組織によっては、自社のデザインポリシーが、利用しているソフトウェアの既定のデザインやテンプレートと合わない場合があります。レイアウトビルダーを使用すると、ページ上で必要な要素をどこに、どのように配置・整理するかを自由に決めたカスタムレイアウトを作成できます。これにより、見た目が美しく整理された、ユーザーにとって使いやすいインターフェイスを構築できます。

3。1 Creator における Canvas

Creator では、レイアウトとはレポートに割り当てて、見やすく整理された状態で表示するための構造を指します。レポートの詳細ビューには、データの整理方法をある程度カスタマイズできるあらかじめ定義されたレイアウトがいくつか用意されています。従来の表形式でデータを表示する方法も一定の機能性はありますが、データ量が多い場合、必要な情報をすぐに見つけるのに時間がかかることがあります。また、既存のレイアウトだけでは満たせない法人独自の要件がある場合もあります。

Canvas を使用すると、データの詳細ビューの見た目を柔軟にカスタマイズできます。レポート内のデータインサイトを、思い描いたとおりの形で表示できるようになります。テンプレートギャラリーから任意の事前デザイン済みテンプレートを選択して要件に合わせてカスタマイズすることも、レイアウトビルダーを使って一から独自のカスタムレイアウトを作成することもできます。必要な項目を各レコードにドラッグ＆ドロップで追加し、セクションごとに配置したり、デザインやサイズを変更したりして、組織のニーズに最適な独自の詳細ビューのレイアウトを作成できます。

テンプレートギャラリーから事前デザイン済みテンプレートを選択すると、実際のアプリケーションデータが反映され、電話番号やメールアドレスなどの強調表示されたテキストはアプリケーションテーマの色で表示されます。

Canvas では、すべてまたは選択したレコードに対して条件付き書式を適用することもできます。これにより、定義した条件に基づいてレポート内の特定のテキストを強調表示できます。条件が満たされると、選択したテキストはカスタマイズした書式で表示され、特定のレコードに注意を向けたり、他のデータとの差別化を図ったりできます。

また、レコードコメント、Blueprint のステージ、カスタム処理も Canvas レイアウトビルダー上にドラッグ＆ドロップして、色やその他のプロパティをカスタマイズできます。Canvas レイアウトビルダー内の自動整列機能により簡単にレイアウトを調整でき、スタイルのコピー機能を使うと、キャンバス上の他の要素に同じスタイルを簡単に適用できます。このように、レコードの詳細ビューにおける Canvas の操作性は動的かつ高いコンテキスト性を備えています。

メモ:

レポートのカスタマイズ - Web のレイアウトセクションで既定レイアウトを選択すれば、いつでも元のレイアウトに切り替えられます。
作成したカスタムレイアウトは、既定の詳細ビューのレイアウトと並んで一覧に表示されます。
モバイルおよびタブレット端末のレポートのカスタマイズタブでは、カスタムレイアウトビルダーは利用できません。データの詳細ビュー用カスタムレイアウトは、引き続き Web ブラウザー向けにデザインできます。

3。2 Canvas レイアウトビルダーを使用するメリット

レコード内のデータを自由にカスタマイズ・再配置し、ユーザーにとってより見やすい表示を提供できます。
業務用の詳細ビューを、デザイン性の高い魅力的なレイアウトに変換できます。
必要なデータコンポーネントや要素だけを追加できます。これにより、ユーザーが必要な情報を一目で確認できるようにできます。
豊富なアイコンから選択して視覚的に分かりやすく表現し、詳細ビューのレイアウト全体を再デザインできます。
データタブおよび要素タブでコンポーネントに適用したスタイルを再利用できます。詳しい手順はこちら
カスタムレイアウトを動的にリサイズして、ユーザーの画面全体にフィットさせることができます。詳しい手順はこちら
カスタマイズしたレイアウトを JSON 形式でエクスポートし、同一アカウント内の他のアプリケーションにインポートできます。

カスタムレイアウトに特定の項目を追加していない場合、その項目はそのレコードの詳細ビューに表示しないことを意味します。レコードの閲覧権限を持つユーザーであっても、追加していない項目は表示できません。ただし、レコード編集時にはこれらの項目にアクセスでき、必要な権限を持つユーザーは値を入力できます。

Info: カスタムレイアウトをデザインする際に必要な項目を漏れなく追加できるよう、事前にレコードの詳細ビューに表示したいすべての項目のリストを準備しておいてください。

4. Canvas のタブ

Canvas レイアウトビルダーでは、レコードの詳細ビューの UI について、次の内容をカスタマイズできます。

上記のほぼすべてのタブで共通して実行できる操作を以下に示します。

Data タブ左上の検索バーを使用して、関連するレコードデータを検索します。
画面上部の元に戻すアイコンとやり直しアイコンをクリックして、それぞれ変更を元に戻したり、やり直したりできます。
ダウンロードアイコンをクリックして、レイアウトを .json 形式でエクスポートします。
画面上部の全画面表示アイコンをクリックして、レイアウトビルダーを画面全体に表示します。
画面上部の入力欄に、レイアウトの名前を入力します。
レイアウトに加えた変更は自動保存されないため、保存ボタンをクリックして保存します。

4。1 Data

このタブでは、レコード内のデータを視覚的に確認し、再配置できます。次の操作を実行できます。詳しくはこちらをご覧ください。

メモ: Data タブ内の各セクションは、「+」アイコンと「-」アイコンをクリックして展開・折りたたみできます。

項目: 項目（フォーム項目とシステム項目の両方）をレイアウトビルダー上にドラッグ＆ドロップします。
カスタム処理: すでにレポートでカスタム操作を設定している場合は、必要なカスタム操作タイルをドラッグ＆ドロップします。未設定の場合は、新しい操作を追加をクリックして設定します。
カスタム機能:

コメント: レコードコメントのタイルをビルダー上にドラッグ＆ドロップします。Canvas ビルダーでは、列の境界にカーソルを合わせたときに表示されるリサイズアイコンをドラッグすることで、列幅を調整できます。
Blueprints: Blueprint のタイルをビルダー上にドラッグ＆ドロップします。現在のステージが表示されます。

関連ブロック:

差出人 Related Blocks: 既存のサブフォームや、他のフォームのデータを参照するルックアップ項目をビルダー上にドラッグ＆ドロップできます。
To Related Blocks: 現在（選択中）のフォームから他のフォームのデータを参照しているルックアップ項目がここに一覧表示されます。

4。2 要素

カスタムレイアウトに要素を追加する方法については、こちらのセクションを参照してください。

このタブには、特定のレコードに関連するデータを表現するためのさまざまな要素が含まれます。主な要素は次のとおりです。

Section: Section 要素を使用すると、独立したセクションを作成し、項目、レコードコメント、Blueprint など関連するコンテンツをグループ化できます。
タブ: データを複数の切り替え可能なタブに再構成できます。これにより、ユーザーにとって整理された表示を提供できます。例えば、下図では、商品 Managementというタブが Workitem タブ内に配置されており、その中に Design、Development、Testing の 3 つのタブが、1 つのセクション内にまとめて配置されています。
Table: データ値を表形式で表示するために使用します。この形式では、行と列から成るテーブル構造でデータを表示するため、詳細ビューのスペースを節約できます。例えば、下図では、商品名、説明、商品 ID といったフォーム項目が、行と列として表示されています。
Text: Text 要素を挿入して、詳細ビュー内に必要なテキストコンテンツを入力できます。例えば、セクションの前に見出しを表示したり、メモや免責事項を追加したりする用途に使用できます。
Icon: Icon 要素を使用すると、セクション、タブ、テーブルなどの中で、従来のテキストラベルの代わりにアイコンで項目を表現できます。例えば、下図では、商品名と価格がテキストではなくアイコンで表示されています。
区切り線: 区切り線要素を使用すると、コンテンツを区切る水平線を挿入したり、コンテンツの切り替わりを示したりできます。つまり、コンテンツ間のテーマ上の区切りを表現するために使用します。例えば、レイアウト内の 2 つのセクションの間に区切り線要素を挿入できます。

4。2。1 固定コンポーネントと可変コンポーネント

頻度要素（セクション、タブ、テキスト、テーブル）には、固定コンポーネントか流動コンポーネントかを設定するオプションがあります。固定コンポーネントを選択すると、ユーザーの画面サイズに応じて要素のサイズが変わらないように制限できます。一方、流動コンポーネントを選択すると、要素はユーザーの画面サイズに応じて自動的にリサイズされます。

例えば、セクションに挿入した背景画像が、特定の画面サイズをはみ出してしまう可能性がある場合は、流動コンポーネントとして設定しておくと、ユーザーの画面サイズに応じて画像サイズが調整されるため最適です。

4。3 スタイル

カスタムレイアウトに要素を追加する方法については、こちらのセクションを参照してください。

このセクションの設定では、フォント、フォントサイズ、背景色、枠線、影、角丸、パディング、マージンの変更や、背景画像の挿入が行えます。これらの設定は、レイアウトビルダー内で任意の要素を選択して適用します。

スタイル設定は、選択した要素によって異なります。

5. 動作を確認する

6. ユースケース

従業員管理：Creator を使用して従業員管理アプリケーションを作成しているとします。従業員データの詳細ビューで、基本情報と連絡先情報に加え、扶養家族や申請内容の詳細も表示する必要があります。また、各従業員の緊急連絡先情報を強調表示したいとします。ここで役立つのが Canvas です。カスタムレイアウトビルダーを使用して、上記のような要件はもちろん、それ以上のことも実現できます。これにより、レコードを開いてカスタマイズされたハイライト部分を一目見るだけで、詳細を細かく確認しなくても、緊急時に誰へ連絡すべきかすぐに把握できます。

教育機関管理：Creator を使用して教育機関管理アプリケーションを作成しているとします。学生およびスタッフのデータ詳細ビューで、それぞれの権限や受講コースの詳細を包括的に表示する必要があります。Canvas レイアウトビルダーを使用して、データの詳細ビューを自由にデザインし、イメージどおりの画面を実現できます。
不動産管理：Creator を使用して不動産管理アプリケーションを作成しているとします。賃貸物件の詳細を、ユーザーが理想の物件を絞り込みやすいように、わかりやすく視覚的に表示したいとします。また、賃貸情報を探している見込み客が、情報量の多さに圧倒されないようにする必要もあります。Canvas を使えば、賃貸物件の情報をひと目で把握できる、すっきりとした魅力的なレイアウトを設計できます。

これらのユースケース以外にも、さまざまな要件が考えられます。Canvas を使用すると、レイアウトビルダー内のさまざまなデータコンポーネントや要素のスタイルや表示設定を自由に指定でき、幅広いコンテキストやシナリオに対応した、非常にリッチで意味のあるダイナミックなユーザーエクスペリエンスを実現できます。

7. Canvas へのアクセスナビゲーションガイド

アプリケーションの編集モードで：

カスタマイズしたい詳細ビューを持つ対象レポートのDesignタブに移動します。
詳細ビュータブを選択し、カスタムレイアウトカードの下にある新しいレイアウトを作成をクリックします。Canvas ビルダーが表示されます。

8. 注意事項

同じアプリケーション内に Canvas レイアウトが存在する場合、アプリケーションのテスト環境を作成することはできません。テスト環境の作成については、こちらを参照してください。
アプリケーション内のデータに対して、カスタムレイアウトを既定の詳細ビューとして設定できます。設定方法はこちら
カスタムレイアウトは .json 形式でエクスポートできます。エクスポート方法はこちら
カスタムレイアウトビルダー内のすべての要素は、矢印キーを使用して移動できます。
Canvas ビルダー内で項目値を選択し、左側パネルのStyleタブにある配置設定を使用することで、項目値の配置を設定できます。