キャンバスを使用した詳細ページのカスタマイズで設定可能な項目

1. 要素：レイアウト内に表示する要素。セクション、タブ、表、テキスト、画像、アイコン、線、ボタンなど。
   
2. データ：レイアウト内に表示するデータやメニュー。項目、関連リスト、操作メニュー（編集、送信、次へなどのボタンやリンク）など。
   
3. スタイル：レイアウトの表示要素に適用するスタイル。フォントの種類、フォントのサイズ、背景色、枠線、影、角丸め、余白（内側／外側）、背景画像など。スタイルは、キャンバス編集画面で対象の要素を選択して設定できます。設定できる内容は、選択した要素によって異なります。なお、適用したスタイルを設定集に登録して、後で再利用することもできます。
   
4. 再利用する要素：キャンバスを使用したデータ詳細ページの作成時に設定した要素やデータと、そのスタイル設定は、再利用する要素として保存しておくことができます。これにより、保存した要素を複数のタブで共通的に利用することが可能です。
   
   

データの詳細ページのカスタマイズ

1. ［設定］→［カスタマイズ］→［キャンバス］の順にクリックします。 
   
2. 画面右上にある［新しい詳細ページを作成する］をクリックします。
   
3. 詳細ページの作成画面で、一覧から対象のタブとレイアウトを選択します。
   
4. ［作成する］をクリックします。
   
   
     
5. キャンバスの編集画面で、左側のメニューから［要素］をクリックします。
   詳細は、要素と設定可能な項目をご参照ください。
6. セクション、タブ、表、テキスト、画像、アイコン、線、ボタンから必要な要素を、ドラッグ＆ドロップでキャンバスに追加します。
   
7. 必要に応じて、スタイルを追加します。
   詳細は、要素へのスタイルの適用をご参照ください。
8. 上部のメニューでは、次の操作を実行できます：
   
1. 変更を元に戻す／やり直す
   
2. 保存前にプレビューする
   
3. 全画面で表示する
   
4. 名前を付ける
   
   
   

設定可能な項目の概要

1. セクション： セクションとは、詳細ページに表示する項目をまとめるための枠（ブロック）です。
   
1. セクションには、項目や画像、メッセージを表示することが可能です。
   
2. 枠線をドラッグすると、セクションのサイズを変更できます。
   
3. アイコンをクリックすると、セクションを複製できます。
   
4. セクションを右クリックすると、項目の追加、要素の固定化／流動化、スタイルのコピー／貼り付け、セクションの削除などができます。
   
5. また、スタイル設定を追加することも可能です（スタイルについての詳細は、関連情報をご参照ください）。
   
   
   
   
2. タブ： タブを使用すると、項目と関連リストを複数の画面に分けて整理できます。表示内容が多い場合に、カテゴリーや手順ごとに内容を分割して各画面に配置し、簡単に切り替えながら表示することが可能です。たとえば、次の画像は、商品データの詳細ページに追加した、［関連情報］（Related Info）という名前のタブ要素の例です。タブ内には、さらに3つのタブ（メモ、添付ファイル、問い合わせ）が表示されています。［+］アイコンをクリックすると、項目または関連リストをタブとしてさらに追加できます。
     
   
   
   
1. 左側の設定画面では、タブ名を入力できます。
   
2. タブを削除するには、対象のタブにカーソルを合わせて、［×］アイコンをクリックします。
   
3. タブの外枠にカーソルを合わせ、両側矢印が表示されたら、枠をクリックしてドラッグ＆ドロップすることで位置を変更できます。
   
4. タブ内を右クリックすると、関連リストの変更、要素の固定化／流動化、関連リストのスタイルのコピー／貼り付け、タブのロックや削除ができます。 
   
   
   
   

1. また、画像や背景色などのスタイルを適用することも可能です。
     
   
1. 表： 表を使用すると、データを表形式で表示できます。たとえば、次の画像は、商品名、説明、保管場所といった情報を表形式で表示した例です。表を使用することで、限られたスペースで必要なデータを簡潔に表示することが可能です。
   
1. 行や列にカーソルを合わせて、［+］または［-］アイコンをクリックすると、行や列を追加または削除できます。
   
   
   
   
2. 行を右クリックすると、項目の変更、要素の固定化／流動化、スタイルのコピーや貼り付け、項目の削除などが可能です。
   
   
   
   
3. 枠線をドラッグすると、表のサイズを変更できます。
   
2. テキスト：詳細ページに、任意のテキストを追加して表示できます。セクションの見出し、メモや注意事項などを表示できます。
   
1. 枠線をドラッグすると、テキストの表示欄のサイズを変更できます。
   
2. テキストの表示欄を右クリックすると、複製、固定化／流動化、削除などが可能です。
   
   
   
   
3. 画像： 詳細ページに、画像を追加できます。たとえば、連絡先の詳細ページに、画像の要素を追加して、各連絡先のプロフィール写真として設定できます。
   
1. 画像の要素を選択して、キャンバスにドラッグして配置します。
   
   
   
   
2. 画像の要素をクリックすると、アップロード画面が表示されます。
   
   
   
   デバイス内の画像ファイルを参照してアップロードするか、事前にアップロードした画像データから選択するか、インターネット上に公開されている画像のURLを入力することで、画像を追加できます。
3. 追加後、画像のサイズ変更や、枠線、影、角丸め、内側の余白などのスタイル調整が可能です。
   
   
4. アイコン： 通常のテキストによるラベルではなく、アイコンを使用して項目を表すことができます。たとえば、次の画像は商品名と価格をテキストではなくアイコンで表示した例です。
     
   
   
   
1. アイコンの種類は、アイコンの要素をキャンバスにドラッグして追加した後、一覧から選択できます。
   
2. アイコンを右クリックすると、種類の変更や、アイコンの複製／削除ができます。
   
3. 枠線をドラッグすると、サイズを拡大／縮小できます。
   
   
   
   

要素の固定化／流動化

要素へのスタイルの適用

ページのスタイル設定

1. 背景
   
2. 余白
   
3. 高さ
   
4. 幅
   
5. 画面に合わせる
   
   
   
   

1. パレットまたは色の一覧から選択して、背景色を設定できます。16進数によるコードで色を設定することも可能です。
   
2. 背景画像を設定する場合は、画像のチェックボックスを選択し、［画像をアップロードする］をクリックします。表示された画面で、デバイスから画像をアップロードするか、事前にアップロードした画像から選択するか、画像のURLを入力することで、画像を背景として使用できます。
   
   
   
   
1. 画像のサイズ：サイズは3つの方法のいずれかで設定できます。
   
1. 同じ縦横比で調整する：縦横比を維持したまま、ページに収まるように画像のサイズを調整します。
   
2. 元のサイズ：画像は元のサイズで保存されます。
   
3. 全体に表示する：縦横比に関係なく、画像をページの縦と横いっぱいに拡大します。
   
2. 画像の繰り返し：背景画像のサイズが小さく、ページ全体をカバーできない場合は、画像を繰り返して配置するように設定できます。同じ画像を複数回繰り返して使用することで、背景を完全に塗りつぶすことができます。繰り返しの種類は、次のいずれかから選択できます：
   
1. 横：画像は横方向に繰り返し表示されます。
   
2. 縦：画像は縦方向に繰り返し表示されます。
   
3. 両方画像はページの横方向と縦方向の両方に繰り返し表示されます。
   
4. 繰り返しなし：画像は繰り返し表示されません。
   
3. ［グラデーション］のチェックボックスを選択すると、背景の色にグラデーション（色の諧調）を設定できます。複数の色を選択して組み合わせたり、分岐点や方向や角度を調整したりすることが可能です。
   

1. 余白の調整：スライダーを右にドラッグすると、余白の幅を変更できます。余白の幅をピクセル単位で指定することも可能です。
   
2. すべての面の内側の余白を同じにする：このチェックボックスを選択すると、設定した余白を上下左右のすべての面の内側の余白に適用できます。チェックボックスの選択を解除すると、各面の内側の余白を個別に設定できます。
   

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

1. 背景：ページの背景設定と同様です。
   
2. 枠線
   
3. 影
   
4. 角丸め
   
5. 余白：ページの余白設定と同様です。
   
6. 高さと幅：ページの高さと幅の設定と同様です。
   
7. 重なり順
   
   
   

1. 太さの変更：スライダーをドラッグすると、枠線の太さを変更できます。太さをピクセル値で入力することも可能です。
   
2. スタイル：一覧から枠線のスタイルを選択できます。
   
3. 色：パレットから枠線の色を選択するか、色を16進コードで入力することも可能です。
   
4. すべての面の枠線を同じにする：チェックボックスを選択すると、設定した枠線をセクションの上下左右のすべての面の枠線に適用できます。チェックボックスの選択を解除すると、各面の枠線を個別に設定できます。
   
   

1. 横：設定した値に基づいて、影が横方向（左右）に移動します。プラスの値にすると、影が要素の右側に表示されます。マイナスの値にすると、左側に表示されます。
   
2. 縦：設定した値に基づいて、影が縦方向（上下）に移動します。プラスの値にすると、影が要素の上側に表示されます。マイナスの値にすると、下側に表示されます。
   
3. ぼかし：影の鮮明度を設定できます。ぼかしの値を0にすると、影は鮮明になります。ぼかしの値を大きくすると、影は不鮮明になります。
   
4. ぼかし度：影のサイズを変更できます。プラスの値にすると、影が大きくなります。マイナスの値にすると、影が小さくなります。
   
5. 色：枠線の色を選択できます。
   
   

1. 半径の調整：スライダーをドラッグすると、半径を変更できます。半径をパーセント値で入力することも可能です。 
   
2. すべての角の半径を同じにする：このチェックボックスを選択すると、設定した丸め半径をすべての角に適用できます。チェックボックスの選択を解除すると、4つの角の半径を個別に設定できます。
   
   

1. 余白の調整：スライダーを左右にドラッグすると、余白の幅を変更できます。余白をピクセル単位で指定することも可能です。
   
2. すべての面の外側の余白を同じにする：このチェックボックスを選択すると、設定した余白を上下左右のすべての面の外側の余白に適用できます。チェックボックスの選択を解除すると、各面の外側の余白を個別に設定できます。
   

タブのスタイル設定

1. 状態
   
2. 背景
   
3. 枠線
   
4. 角丸め
   
5. 内側の余白
   
6. 外側の余白
   
7. アイコン
   
   
   
   
   
   
   

1. 有効：タブを選択したとき
   
2. カーソルを合わせた時：タブ名にカーソルを合わせたとき
   
3. 通常：タブが無効、またはカーソルを合わせていないとき
   

メモ

1. タブに追加した関連リスト名は、変更できません。
   
2. ［+］アイコンをクリックすると、タブをさらに追加できます。
   
3. タブを右クリックすると、項目の挿入、タブの固定化／流動化、タブの削除ができます。
   
4. 各タブ名にカーソルを合わせると左側に表示される三本の横線（）にカーソルを合わせ、両側矢印が表示されたら、タブを左右にドラッグすることで、表示位置を移動できます。

表、テキスト、アイコン、線のスタイル設定

1. 枠線
   
2. 影
   
3. 角丸め
   
4. 内側の余白
   
5. 重なり順
   

項目のラベルのスタイル設定

1. フォントの種類、フォントのサイズ、色、大文字／小文字、取り消し線の有無を変更したり、テキストの配置を左揃え／中央揃え／右揃えに設定したりすることが可能です。
   
2. 項目のラベルの配置は、上／下／左／右に設定できます。
   
3. また、背景色、角丸め、内側の余白、外側の余白の設定を変更できます。
   
4. 項目のラベルを右クリックすると、項目を変更する、ラベルを隠す、ラベルを左／上に移動する、要素を固定化／流動化する、スタイルをコピーする、項目を削除するなどの操作を実行できます。 
   
   
   
   

スタイルの設定集への登録

キャンバス内の要素を右クリックすると、スタイルを設定集に登録できます。

1. ［設定］→［カスタマイズ］→［キャンバス］をクリックします。
   
2. ［キャンバス］→［キャンバスを割り当てる］をクリックします。
   
3. 一覧からタブとレイアウトを選択し、キャンバスを割り当てます。
   
4. それぞれの権限に対するキャンバスを選択します。
   
5. ［保存する］をクリックします。
     
   

メモ

データの一覧画面（ビュー）で、対象のキャンバスにカーソルを合わせ、［…］（その他）アイコンをクリックすると、キャンバスの編集、複製、名前の変更、プレビュー、削除が可能です。