本記事では、b→dashで「アプリ接客コンテンツ」をGUI編集モードで作成する方法について紹介しています。
作成手順は、大きく下記の3つです。

　1. テンプレートを選択する
　2. アプリ接客の内容を編集する
　3. プレビューで確認する

各手順の詳細は、以下をご参照ください。

1. テンプレートを選択する

1.「web接客」>「web接客を作成する」>「新規作成」をクリックします
2.「アプリ」を選択し、「適用」をクリックします
3. 作成したいアプリ接客のイメージに近い「使用するテンプレート」をクリックします
4.「GUI編集モードでコンテンツを作成」を選択し、「適用」をクリックします
5. エディター画面にテンプレートが表示され、アプリ接客を編集できます

2. アプリ接客の内容を編集する

テンプレートを使ってアプリ接客コンテンツを編集します。以下では、各機能の操作手順を説明します。

サイズを変更する

1.「コンテンツサイズの編集」をクリックします
2.「サイズ」を入力します(例: 横幅「80VW」→「90VW」)
3. 入力したサイズに変更されます
4.「画像」を選択し、横に広げてコンテンツサイズに合わせます

※ 画像の枠についている青い点をクリックしたまま動かすことで、個別要素のサイズを変更できます

テキストを編集する

1.「テキスト」をクリックします
2. テキストを選択し、「フォント」「太字」「斜体」「アンダーバー」「斜線」「文字色」「ハイライト」「文字サイズ」「行間」「背景色」「文字位置」を必要に応じて変更します
3. テキストを入力/変更します

※ 文字サイズはプルダウンの選択肢の中から選択するほか、任意の文字サイズを直接入力することで指定することも可能です

透明度を変更する

1.「透明度」をクリックします
2.「値」を選択し、「閉じる」をクリックします
3. 透明度が変更されます

※ テキストだけでなく、画像の透明度も変更できます

画像を変更する

1.「画像」をクリックします
2.「画像」を選択し、「適用」をクリックします
3. 画像が反映されます(サイズと位置を変更可能)

※ コンテンツボックスにアップロードしている動画ファイルを差し込むことも可能です

画像に丸角を付ける

1.「画像」を選択し、「角丸」をクリックします
2.「px」を入力し、「閉じる」をクリックします
3. 画像の角が変更されます

画像に枠線を付ける

1.「画像」を選択し、「枠線」をクリックします
2.「枠線の種類」「枠線の太さ」「枠線の色」を入力し、「閉じる」をクリックします
3. 画像の枠線が変更されます

境界線を差し込む

1.「境界線」をクリックします
2. 追加された「境界線」を移動させ、任意の長さに変更します
3.「境界線の種類」「境界線の太さ」「境界線の色」を任意で設定します
4. 境界線に反映されます

影を差し込む

1.「ボタン」を選択し、「シャドウ」をクリックします
2.「影のサイズ」「影の色」を入力し、「閉じる」をクリックします
3. ボタンに影が差し込まれます

※ 画像などにも影を付けることができます

リンクを差し込む

リンクの挿入先として選択できる箇所は「テキスト」「画像」「ボタン」です。

1.「リンクを挿入する」をクリックします
2. リンクの遷移先を選択します
3.「挿入したいリンク」を入力し、「適用」をクリックします
4. リンクが挿入されます

※ 画像の一部分にリンク挿入はできませんので、ご注意ください

※ テキストを選択してリンクを挿入した場合は、リンク挿入したテキストに下線がつきます。テキストボックスを選択してリンクを挿入した場合は、テキストに下線がつきません

値を差し込む

アプリ接客にデータ挿入を行います。以下では「氏名」カラムの値を差し込む手順を例に説明します。

1. 差し込みたい箇所にカーソルを合わせ、「データ挿入」をクリックします
2.「データファイル」を選択し、「適用」をクリックします
3.「差し込みたいカラム」を選択し、「適用」をクリックします
4. 選択したカラムの値が差し込まれます

3. プレビューで確認する

1.「プレビュー」をクリックします
2. プレビューが表示されるので、差し込みなどが表示されているか確認します
3. 確認ができたら「保存」をクリックします
4.「名前」を入力し、「保存」をクリックします
5. web接客一覧に表示されます