オリジナルフォームの編集方法
既存のオリジナルフォーム(LIFF)の修正方法になります。


(1)コンテンツ > LIFF > フォーム編集
メニューのLIFFより修正したいフォームをダウンロード
ダウンロード方法はこちら>

↓↓↓

(2)ダウンロードしたファイルを解凍し、テキストエディターで編集
お使いのテキストエディターがない場合は、下記ガイドよりインストールして編集してください。
テキストエディターの操作方法>

※デフォルトでインストールされているテキストエディターでも編集可能です。
Windows:「メモ帳」
Mac:「テキストエディット」


〈フォームの詳細について〉
【フォーム】ZIPファイルの構造説明>

本人確認フォームのHTMLファイル内容説明>

【解約・休止・サイクル変更・スキップ】申請フォームのHTMLファイル内容説明>
↓↓↓


(3)編集したファイル一式を圧縮
フォームの圧縮方法について>

↓↓↓


(4)圧縮したファイルを該当フォームへアップロード
アップロードについてはこちら>

↓↓↓


(5)スマホよりテスト送信を行い、意図した挙動になっているかご確認下さい。
フォームのテスト送信方法>

ZIPファイルを解凍せず編集する方法
■目的
オリジナルフォームをアップロードするにはZIPファイルにする必要があるのですが、解凍を行わないことで再度圧縮する手間が省けます。

■セット所要時間
5分

■セットの流れ
※説明はWindowsになります。Macで行う場合はファイルを解凍してから編集を行なってください。
解凍後のファイルをアップロードするには圧縮が必要です。

(1)
①ZIPファイル上で右クリック
②プログラムから開く
③エクスプローラー
(2)
編集したいファイルをドラック&ドロップで、デスクトップなどにコピーします。
(3)
コピーしたファイルをメモ帳などで開きます。
※Macの場合はデフォルトで使用できる「テキストエディット」を使用してください。
編集後、ファイルを保存します。(保存しないと変更されません)
(4)
デスクトップの編集したファイルを、ZIPファイルの中へドラック&ドロップで戻します。
その際にアラートが出ますが上書きを選択してください。
(※元ファイルが必要な場合はバックアップを別に保管しておいてください)
(5)
ECAIのLIFFへアップロードして編集内容が反映されているかご確認ください。


お使いの端末、環境によってできないこともありますので、その場合は一度解凍してから編集をお願いします。
オリジナルフォームの編集方法>

動作確認済み:Windows10

設定してある「タグトリガーステップメッセージ」の編集方法

① メッセージ 

② ステップメッセージ


③ 編集したい、シナリオの「編集」ボタンをクリック

④ 編集画面で編集したい部分を編集
┗4-1: タグが付与されてからメッセージが送信される時間を変更できます。

┗4-2: テキスト、画像、動画、音声、その他(カルーセル、画像カルーセル、ボタン、選択ボタン、リッチメッセージ、クイックリプライ)の選択変更箇所です。

┗4-3: メッセージ編集フィールドです。

┗4-4: 絵文字、定型文の差し込みが可能です。

┗4-5: 同時刻に、「画像+メッセージ」を送りたい、「メッセージが長くなったので分けたい」など同時刻に一緒にメッセージを送りたい際はメッセージ追加を押してメッセージフィールドを追加してください。同時配信は最大5つまで可能です。

┗4-6: ステップメッセージを追加したい際はシナリオ追加をおしてシナリオを追加してください。最大100シナリオまで追加可能です。


⑤ 編集が終わったら「保存」ボタンを押して完了です。

オリジナルフォーム生成アプリの使い方
■目的
こちらのアプリは入力項目にテキストを打ち込むだけでオリジナルフォームを生成することができます。
これにより作業効率をアップさせることができるのと、HTMLの知識がない方でも誰でもオリジナルフォームを生成することができるようになります。

オリジナルフォーム生成アプリはこちら>


■セット所要時間
15分(※作成するコンテンツ量によります)


■セットの流れ
まず完成形としては、下記のようなフォームが簡単に作成できます。
サンプルフォーム>


(1)入力ページのヘッダー部分
①ページタイトル:ブラウザのタブ、フォームの最上部
②ヘッダータイトル
③ヘッダーテキスト
(2)送信ボタン、タグコード
①送信ボタンテキスト
②送信時タグコード:ここで設定したタグが送信時に付与されます
(3)質問追加
+質問追加:クリックで下記5種類の質問が追加できます
Radio:ラジオボタン
Checkbox:チェックボックス(※複数選択可)
Select:プルダウン
Text:1行テキスト入力
Textarea:複数行テキスト入力
(4)ラジオボタンの作り方
①必須入力設定
②質問テキスト
③やや小さめのフォントサイズで補足テキスト
④回答の設定
⑤回答追加
⑥削除
(5)チェックボックスの作り方
①必須入力設定
②質問テキスト
③やや小さめのフォントサイズで補足テキスト
④回答の設定
⑤回答追加
⑥削除
(6)セレクトボックスの作り方
①必須入力設定
②質問テキスト
③やや小さめのフォントサイズで補足テキスト
④回答の設定(プルダウンでの選択式)
⑤回答追加
⑥削除
(7)テキスト入力(1行)の作り方
①必須入力設定
②質問テキスト
③やや小さめのフォントサイズで補足テキスト
④入力例の設定(入力すると消えます)
(8)テキスト入力(複数行)の作り方
①必須入力設定
②質問テキスト
③やや小さめのフォントサイズで補足テキスト
④入力例の設定(サンプルは設定なし)
(9)完了ページ
完了ページを表示するには、入力ページを送信することで表示されます。
①ページタイトル:ブラウザのタブ、フォームの最上部
②ヘッダータイトル
③ヘッダーテキスト
④閉じるボタンテキスト
(10)フッターボタンの説明
①保存:入力した内容をブラウザのストレージ(保存ファイル)に保存
②ファイル出力:保存したファイルを出力。途中から作業を再開したり、バックアップファイルになります。
③ファイル読み込み:②のファイルを読み込むとフォームに反映されます。
④リセット:入力内容をすべて削除
⑤プレビュー:ブラウザで完成フォームを見れます。F12でスマホ表示にするのがおすすめです。
⑥LIFFダウンロード:ECAIにアップロードするファイルのダウンロード
【プレビューの補足】
プレビュー後にWindowsの場合、F12で開発ツールが開きます。スマホのマークをクリックするとスマホのプレビューに切り替わります。
(11)LIFFファイルをアップロードする
(10)の⑥でダウンロードしたLIFFファイルをECAIの管理画面からZIPファイルのままアップロードして完成です。

LIFFのアップロード方法はこちら>

オリジナルフォームの新規作成はこちら>


また、ダウンロードしたLIFFファイルをさらに手動で編集することも可能です。

オリジナルフォームの編集方法>
応答メッセージの修正

■テキスト説明
①左サイドメニューのメッセージ>応答メッセージ

「編集」をクリック

③変更したい箇所を修正

「保存」を押して修正完了

■画像付き説明

①左サイドメニューのメッセージ>応答メッセージ

「編集」をクリック

③変更したい箇所を修正
「保存」を押して修正完了

「テストフォーム」を「本番フォーム」に上書きする方法
■目的
フォームの修正などで、テストフォームから本番フォームへアップロードする際などに使用します。


■セット所要時間
5分


■セットの流れ

(1)テストフォームをダウンロード
オリジナルフォームのダウンロード方法はこちら>(2)本番フォームへアップロード
本番フォームへアップロードする前に、本番フォームのバックアップを必ずダウンロードしておいてください。

(1)でダウンロードしたZIPファイルをそのままアップロードします。
アップロードの方法はこちら>(3)送信テストはLIFF-URLを使用し、スマホにて行ってください。
オリジナルフォームのテスト送信方法はこちら>
【誰でも簡単!】PCのメモ帳を使ってオリジナルフォームを編集する方法
■目的 
既存のオリジナルフォーム(LIFF)を誰でも簡単にPCのメモ帳を使って修正する方法になります。
※HTML編集ソフト不要


■セット所要時間 
10分


■セットの流れ

(1)コンテンツ > LIFF > フォーム編集
左のメニューのLIFFを選択し、修正したいフォームをダウンロード
↓↓↓

↓↓↓

(2)ダウンロードしたファイルをメモ帳
ダウンロードしたZIPファイルを解凍せず編集する方法>

↓↓↓


(3)編集したファイルを対象のフォームへアップロード
アップロードについてはこちら>

↓↓↓


(4)スマホよりテスト送信を行い、意図した挙動になっているかご確認下さい。
フォームのテスト送信方法>


ZIPファイルを一度解凍してから編集を行う場合は、下記を参照してください。
フォームの内容を大幅に変更したい場合はこちらの方法で行ってください。
オリジナルフォームの編集方法>
オリジナルフォームのファイルの変更前と変更後でソースコードの差分(違い)を確認する方法
■目的
変更した箇所のソースコードを確認することで、その後に編集する際に参考にすることができます。

■セット所要時間
5分

■セットの流れ


(1)
まず差分を確認したいファイルの変更前、変更後それぞれを用意してください。

↓

(2)
それぞれのファイルをテキストエディターで開きます。
※お使いのエディターで問題ありません。

↓

(3)
difffというオンラインで差分を確認できるサイトを使用しますので、下記サイトを開いて下さい。

difff>(4)
①、②のサンプルテキストは削除し、テキストエディターから変更前のファイルのソースコードをコピーして①にそれぞれ貼り付け下さい。
変更後のファイルのソースコードは②に貼り付け下さい。
その後③をクリック
(5)
ピンクのマーカー部分が差分(変更箇所)になります。