モバイルアプリ向けのキャンバス表示のテンプレートを複製するには

1. ［設定］→［カスタマイズ］→［キャンバス］の順にクリックします。
   
2. ［詳細表示］タブをクリックし、［モバイル］を選択します。
   
3. 対象のテンプレートにカーソルを重ね、［…］（その他の操作）アイコンをクリックし、［複製する］を選択します。
   
4. ［タブ］と［レイアウト］を選択します。
   
5. ［複製する］をクリックします。
   
6. 必要に応じてテンプレートを編集し、テンプレートの名前を入力して［保存する］をクリックします。
   

モバイルアプリ向けのキャンバス表示のテンプレートを編集するには

1. ［設定］→［カスタマイズ］→［キャンバス］の順にクリックします。
   
2. ［詳細表示］タブをクリックし、［モバイル］を選択します。
   
3. 対象のテンプレートにカーソルを重ね、［…］（その他の操作）アイコンをクリックして［編集する］を選択します。
   

モバイルアプリ向けのキャンバス表示のテンプレートを削除するには

1. ［設定］→［カスタマイズ］→［キャンバス］の順にクリックします。
   
2. ［詳細表示］タブをクリックし、［モバイル］を選択します。
   
3. 対象のテンプレートにカーソルを重ね、［…］（その他の操作）アイコンをクリックし、［削除する］を選択します。
   
4. 表示された確認画面で、［削除する］をクリックします。
   

メモ：特定の権限の標準の表示方法に設定されているテンプレートを削除するには、あらかじめ対象の権限の標準の表示方法を変更しておく必要があります。

権限別に標準の表示方法を設定するには

1. ［設定］→［カスタマイズ］→［キャンバス］の順にクリックします。
   
2. ［詳細表示］タブをクリックし、［モバイル］を選択します。
   
3. ［モバイル向けのキャンバス表示の関連付け］ボタンをクリックします。
   
4. 表示された画面で、［タブ］と［レイアウト］を選択します。
   
   
5. ユーザーの権限ごとに標準の表示方法を選択します（初期設定の表示方法か、作成したいずれかのテンプレートを選択できます）。
   
6. ［保存する］をクリックします。
   

編集画面での操作

編集画面では、キャンバス表示のテンプレートを編集して、モバイルアプリ向けのデータの詳細ページを柔軟にカスタマイズできます。以下では、編集画面の詳細についてご説明します。

編集画面は、以下の3つの部分に分かれています。

1. キャンバス（編集欄）：編集メニューからさまざまな要素を追加し、配置の調整や設定が可能です。
   
2. 編集メニュー：［データ］、［表示要素］、［スタイル］、［再利用する要素］のメニューを利用できます。それぞれのメニューをクリックすると、詳細なメニューが表示されます。
   
3. 上部メニュー：元に戻す、やり直し、画面の拡大、通知、プレビュー、全画面表示、テンプレート名の編集、保存などの操作を実行できます。
   

編集メニューの詳細

編集メニューでは、以下の4種類のメニューを利用できます。

1. データ：データの項目、関連リスト、処理（編集、複製、削除などの操作ボタン）、カスタムボタンをレイアウトに追加し、設定できます。
   
2. 表示要素：セクション、タブ、表、テキスト、画像、アイコン、線をレイアウトに追加し、設定できます。
   
3. スタイル：表示欄や要素に適用するスタイルをカスタマイズできます。たとえば、背景色、枠の色や太さ、角の丸み具合、影などの効果、内側と外側の余白の広さなどを指定可能です。具体的なメニューの内容は、キャンバスで選択中の要素によって異なります。
4. 再利用する要素：スタイルが適用された状態の要素をまとめて（グループ化して）、「再利用する要素」として保存しておくことができます。これにより、他のレイアウトやタブのテンプレートに同じデザインの要素を使い回すことができます。
   

データ

1. 項目：データの項目をレイアウトに追加できます。項目はセクションごとに表示されます。
   
2. 関連リスト：関連リストをレイアウトに追加できます。
   
3. 処理：処理ボタン（編集、複製、削除などの処理を実行するためのボタン）をレイアウトに追加できます。
   
4. ボタン：独自に作成したカスタムボタンや、連携機能のボタンをレイアウトに追加できます。
   

表示要素

1. セクション：セクションをレイアウトに追加すると、複数の要素をセクション内にまとめて表示できます。追加したセクションに対しては、以下の操作を実行できます。
   
   
   
   
1. 要素をセクション内にドラッグ&ドロップして追加できます。
   
2. 編集メニューでセクションのスタイルを設定できます。
   
3. 枠線をドラッグすると、セクションのサイズを変更できます。
   
4. セクションを右クリックすると、セクションに関するさまざまな操作を実行できます（要素の挿入、要素の固定化／流動化、スタイルのコピー／貼り付け、キャンバスルールの設定、ロック、再利用する要素への追加、設定集への追加、セクションの削除など）。
   
2. タブ：タブをレイアウトに追加すると、データの項目や関連リストを複数のタブ（画面）に整理して表示できます。タブの見出しをクリックして、タブを切り替えることにより、対象のタブ内の項目や関連リストのみを表示することが可能です。追加したタブに対しては、以下の操作を実行できます。
   
   
   
   
1. 編集メニューでタブのスタイルを設定できます。
   
2. タブの見出しの右にある［+］（追加）アイコンをクリックすると、カスタムタブや関連リスト用のタブを追加できます。
   
3. タブの左端にカーソルを重ねて、矢印アイコンをクリックすると、タブをドラッグ&ドロップして並べ替えることができます。
   
4. タブの上にカーソルを重ねて、［x］（削除）アイコンをクリックすると、タブを削除できます。
   
5. カスタムタブをクリックすると、編集メニューの［スタイル］からタブの名前を変更できます。
   
6. タブの見出しを右クリックすると、アイコンを追加できます。アイコンがすでに追加されている場合は、アイコンの変更／削除、テキストの表示／非表示の設定、アイコンの表示位置（上部／左）の設定が可能です。
   
7. タブ内（見出し以外）で空きスペースを右クリックすると、タブに関する操作メニューを選択して実行できます（項目の挿入、要素の固定化／流動化、スタイルのコピー／貼り付け、条件付きスタイル、ロック、再利用する要素への追加、設定集への追加、タブの削除）。なお、右クリックした場合に表示されるメニューの内容は、タブをクリックする位置によって異なりますので、ご注意ください。
   
8. 関連リストのタブの名前は変更できません。
   
3. 表：表を利用すると、データを表形式で表示できます。限られたスペースに必要なデータを簡潔に表示することが可能です。追加した表に対しては、以下の操作を実行できます。
   
   
1. 行にカーソルを重ねて［+］（追加）アイコンをクリックすると、行を追加できます。表の列は、初期設定で2列です（モバイルアプリ向けのテンプレートでは列を追加できません）。表にカーソルを重ね、［-］（削除）アイコンをクリックすると、表を削除できます。
   
2. 表内の空きスペースを右クリックすると、表に関する操作メニューを選択して実行できます（項目の挿入／変更、要素の固定化／流動化、スタイルのコピー／貼り付け、条件付きスタイル、ロック、再利用する要素への追加、設定集への追加、削除）。
   
3. 枠線をドラッグすると、セクションのサイズを変更できます。
   
4. テキスト：詳細ページに、任意のテキストを追加して表示できます。たとえば、見出し、メモ、注意事項などを表示できます。追加したテキストに対しては、以下の操作を実行できます。
   
   
1. 枠線をドラッグすると、テキストの表示欄のサイズを変更できます。
   
2. テキストの表示欄を右クリックすると、テキストに関する操作メニューを選択して実行できます（複製、要素の固定化／流動化、設定集への追加、削除）。
   
5. 画像：詳細ページに、画像を追加できます。追加した画像の要素に対しては、以下の操作を実行できます。
   
   
1. 画像の要素をクリックし、編集メニューで［画像をアップロードする］をクリックすると、画像を追加できます。インターネット上に公開されている画像のURLを入力すると、対象の画像を追加できます。
   
2. 画像の追加後、画像のサイズ変更や、枠線、影、角丸め、内側の余白などのスタイル調整が可能です。
   
3. 画像を右クリックすると、画像の角丸めや削除を実行できます。
   
6. アイコン：アイコンを利用すると、テキストによる情報の補完や代替が可能です。たとえば、項目名の代わりにアイコンを利用できます。追加したアイコンに対しては、以下の操作を実行できます。
   
   
1. アイコンの種類は、アイコンの要素をキャンバスにドラッグして追加した後、一覧から選択できます。
   
2. アイコンを右クリックすると、アイコンの複製、変更、削除を実行できます。
   
7. 線：線を追加すると、ページ内の内容を線で区切ることができます。
   
   

メモ

1. 詳細ページ内の要素はすべて、固定化／流動化できます。
   
2. 要素を固定化すると、要素のサイズは固定され、画面サイズに応じて変更されません。
   
3. 要素を流動化すると、画面サイズに応じて要素のサイズが変更されます。
   

スタイル

1. 背景：色は、色の一覧から選択するか、16進コードを入力して設定できます。
   
   
   
   
2. 画像：背景画像を設定する場合は、［画像］のチェックボックスを選択し、以下の操作を実行します。
   
1. 画像の追加：［画像をアップロードする］をクリックします。
   
2. インターネット上に公開されている画像のURLを入力し、［挿入する］をクリックします。
   
   
3. 画像のサイズ：［同じ縦横比で調整する］（縦横比を維持したまま、要素のサイズに合わせて画像のサイズを調整する）、［元のサイズ］、［全体に表示する］（縦横比を無視して、要素のサイズに合わせて画像を引き伸ばす）のいずれかを選択できます。
   
   
4. 画像の繰り返し：背景画像のサイズが小さく、ページ全体をカバーできない場合は、画像を繰り返して配置するように設定できます。繰り返す場合は、繰り返しの方向として、［横］、［縦］、［両方］のいずれかを選択できます。［繰り返しなし］を選択すると、画像が1枚のみ表示されます。
   
3. グラデーション：背景色にグラデーションを適用する場合は、［グラデーション］のチェックボックスを選択します。方向を変更するには、半径をドラッグして回転させます。グラデーションの分岐点を変更するには、スライダー上のボタンを左右にドラッグします。また、グラデーションの開始色や終了色を変更するには、スライダー上のボタンをクリックし、色を指定します。
   
   
   
   
4. 内側の余白：内側の余白とは、枠線の内側の空白部分です。内側の余白を設定するには、［内側の余白］のチェックボックスを選択し、スライダーを左右にドラッグするか、ピクセル値を指定します。また、以下の設定が可能です。
   
   
1. ［すべての面の内側の余白を同じにする］を選択すると、設定した余白を上下左右すべてに適用できます。
   
2. ［すべての面の内側の余白を同じにする］の選択を解除すると、上下左右の余白をピクセル値により個別に設定できます。
   
5. 高さと幅：要素の高さや幅をピクセル値により指定できます。一部の要素では、画面に合わせて高さや幅を自動で調整する設定を選択できます。
   
   
   メモ：［縦横比の制限］をチェックすると、縦横比を維持したまま、高さや幅を変更できます。
   
6. 枠線：［枠線］のチェックボックスを選択すると、枠線の色、スタイル、太さなど設定できます。色は、色の一覧から選択するか、16進コードを入力して設定できます。太さは、スライダーを左右にドラッグするか、ピクセル値を入力することにより指定できます。
   
   
7. 影：［影］のチェックボックスを選択すると、以下の設定を行うことができます。
   
   
1. 影の位置（横、縦）：［横］を選択すると、要素の左右に影を追加できます。プラスの値を指定すると右側に、マイナスの値を指定すると左側に追加されます。［縦］を選択すると、要素の上下に影を追加できます。プラスの値を指定すると上部に、マイナスの値を指定すると下部に追加されます。
   
2. ぼかし：影の鮮明度を設定できます。ぼかしの値を0にすると、影は鮮明になります。ぼかしの値を大きくすると、影は不鮮明になります。
   
3. 色：影の色を選択できます。
   
8. 角丸め：［角丸め］のチェックボックスを選択すると、要素の角の丸み具合を設定できます。スライダーを左右にドラッグするか、角丸の半径（パーセント値）を入力することにより指定できます。
   
   
9. 外側の余白：外側の余白とは、枠線の外側の空白部分です。設定することにより、詳細ページ内における要素の位置を調整できます。外側の余白を設定するには、［外側の余白］のチェックボックスを選択し、スライダーを左右にドラッグするか、ピクセル値を指定します。また、以下の設定が可能です。
   
   
1. ［すべての面の外側の余白を同じにする］を選択すると、設定した余白を上下左右すべてに適用できます。
   
2. ［すべての面の外側の余白を同じにする］の選択を解除すると、上下左右の余白をピクセル値により個別に設定できます。
   
10. 表示設定：要素を表示するか、隠すかを選択できます。
    
    
11. 重なり順：対象の要素を、他の要素の前面または背面に移動できます。
    
    
12. テキスト：フォントのサイズ、種類、色、大文字／小文字、配置（左揃え／中央揃え／右揃え）などを設定できます。
    
    
13. 線：線の方向を水平または垂直に設定したり、太さや色を調整したりできます。
    
    

1. 無効時のスタイルの設定：無効な状態の要素に対して適用するスタイルを設定できます。
   
   たとえば、メールアドレスの項目値が入力されていないデータにおいては、メール送信処理が無効であるため、通常とは異なるスタイルとして、無効時のスタイルを適用できます（例：メール送信ボタンの外側に赤枠を表示し、操作を無効にする）。これにより、ユーザーに対してメール送信の処理が実行できない状態であることや、メールアドレスの入力が必要であることを視覚的に伝えることができます。なお、無効時のスタイルは、一部の処理の要素（通話、メール送信、メッセージ送信、地図の位置情報など）においてのみ設定可能です。これらの要素は、編集画面で［データ］→［処理］に移動することによって、追加できます。
   
   
2. 条件付きスタイル適用タブ：特定のキャンバスルールの条件を満たす要素に対して適用するスタイルを設定できます。なお、1つの要素に対して複数のキャンバスルールを適用し、キャンバスルールごとにスタイルを設定することが可能です。キャンバスルールに基づくスタイル設定を行うには、要素を選択した状態で［スタイル］メニューの［+］アイコンをクリックし、新しいキャンバスルールを作成するか、既存のキャンバスルールを選択して適用します。適用すると、［スタイル］メニューの上部に条件付きスタイル適用タブが追加されます。このタブをクリックすると、キャンバスルールの条件を満たした場合のスタイルを設定できます。
   

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

スタイルを設定集に追加すると、キャンバス内の複数の要素に対して同じスタイルを適用できます。スタイルを設定集に追加するには、以下の手順を実行します。

1. キャンバスで対象の要素に移動し、右クリックします。
   
2. ［設定集に追加する］を選択します。
   

1. キャンバスで対象の要素を選択します。
   
2. 編集メニューの［スタイル］タブに移動し、［設定集］をクリックします。
   
3. ［個別指定］では、独自に追加したスタイルを選択して適用できます。［ギャラリー］では、あらかじめ用意されている中からスタイルを選択して適用できます。
   
   

1. テキスト、ラベル、値
   
2. 項目
   
3. セクション
   
4. タブ
   
5. 表
   
6. ボタン
   

メモ

1. 設定集には、スタイルを25件まで追加できます。
   
2. ［Semi Bold］（やや太字）のフォントは、テキスト、項目、ボタンに対しては適用できません。
   

再利用する要素

また、［ギャラリー］をクリックすると、あらかじめ用意されている中からデザインを選択して、キャンバスに追加できます。

メモ

1. 再利用する要素は、25件まで保存できます。
   
2. 「再利用する要素」は、別のタブのテンプレートにも利用できます。「再利用する要素」を別のタブのテンプレートに追加した場合、要素内の項目名がタブ間で完全に同じでなくても、類似する項目同士が自動で関連付けられます。たとえば、見込み客タブにある［見込み客の担当者］という項目は、商談タブの［商談の担当者］に自動で変換されます。
   
3. タブ間で一致する項目や類似の項目が見つからない場合は、［N/A］（値なし）と表示されます。その場合、該当の項目を右クリックすると、項目を変更できます。
   

モバイルアプリ向けのキャンバス表示のテンプレートをエクスポートするには

作成したテンプレートは、キャンバスのキーとしてエクスポートできます。キャンバスのキーを利用すると、Zoho CRMの他のユーザーのアカウントなどに、テンプレートをインポートできます。エクスポートの操作は、テンプレートの一覧ページまたは編集画面内から行うことができます。エクスポートの手順は、以下のとおりです。

1. ［設定］→［カスタマイズ］→［キャンバス］の順にクリックします。
   
2. ［詳細表示］タブをクリックし、［モバイル］を選択します。
   
3. 対象のテンプレートにカーソルを重ね、［…］（その他の操作）アイコンをクリックし、［キャンバスをエクスポートする］を選択します。
   
   または、［…］（その他の操作）アイコンをクリックし、［編集する］を選択し、編集画面を開きます。続けて、編集画面で［…］（その他の操作）アイコンをクリックし、［テンプレートをエクスポートする］を選択します。
4. 表示された画面で［エクスポートする］をクリックすると、キャンバスのキーが生成されます。
   
5. ［コピーする］をクリックすると、キーをコピーできます。
   
   

キャンバスのキーは、テンプレートごとに専用の英数字です。

メモ：

キャンバスのキーを管理（プレビュー／コピー／削除）するには