■目的 フォームの修正などで、テストフォームから本番フォームへアップロードする際などに使用します。 ■セット所要時間 ５分 ■セットの流れ （１）テストフォームをダウンロード オリジナルフォームのダウンロード方法はこちら＞ ⇓ （２）本番フォームへアップロード ※本番フォームへアップロードする前に、本番フォームのバックアップを必ずダウンロードしておいてください。 (1)でダウンロードしたZIPファイルをそのままアップロードします。 アップロードの方法はこちら＞ ⇓ （３）送信テストはLIFF-URLを使用し、スマホにて行ってください。 オリジナルフォームのテスト送信方法はこちら＞オリジナルフォーム切り替え中の送信について
ユーザーがオリジナルフォームの入力中に、管理画面からフォームの内容が更新された場合、 入力中のフォームは更新前の内容で送信されます。LIFFのZIPファイルが20MBを上回っていてアップロードできない時の回避方法
■目的 アップロードしたいZIPファイルが20MBを超えているとアップロードできないので、その時の回避方法の説明します。 アップロードの方法はこちら＞ ■セット所要時間 5分 ■セットの流れ まず方法ですが、ZIPファイルが20MBを超えない重さにする必要があります。 LIFFをアップロードする際の仕様の話ですが、アップロードする際に古いファイルは削除されず新しいファイルが上書きされる仕様となります。 そのためすでにアップロードがされている画像ファイルをに関してはアップロードしなくても問題ありません。 LIFFファイルをZIPにする前に、既存の画像データに関しては一旦削除いただき、ZIPファイル全体が20MB以下になるように調整をお願いします。 アップロード後は画像がちゃんと表示されているかのご確認をお願いします。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。「###ID###」のあるURLを使用した際に、「###ID###」のID部分を表示させない方法
■目的 「###ID###」のあるURLを使用した際に、「###ID###」のID部分をユーザー側に表示させないようにします。 例）https://lp2.ecai.jp/?ecai_id=###ID### ■セット所要時間 5分 ■セットの流れ （１） 「###ID###」付きのURLを短縮URLにします。その際に必ず「LINEログイン認証を行う」にチェックしてください。
↓ （２） 短縮URLを挿入して、その短縮URLをコピーする
↓ （３） LIFFの外部サイトにコピーした短縮URLを設定する LIFFの外部サイトの設定につきましてはこちら＞ ↓ （４） LIFFの外部サイトに設定したLIFF-URLを使用することで、IDの表示を回避することができます。
■目的 既存のオリジナルフォーム（LIFF）を誰でも簡単にPCのメモ帳を使って修正する方法になります。 ※HTML編集ソフト不要 ■セット所要時間 １０分 ■セットの流れ （１）コンテンツ ＞ LIFF ＞ フォーム編集 左のメニューのLIFFを選択し、修正したいフォームをダウンロード
↓↓↓
↓↓↓ （２）ダウンロードしたファイルをメモ帳 ダウンロードしたZIPファイルを解凍せず編集する方法＞ ↓↓↓ （３）編集したファイルを対象のフォームへアップロード アップロードについてはこちら＞ ↓↓↓ （４）スマホよりテスト送信を行い、意図した挙動になっているかご確認下さい。 フォームのテスト送信方法＞
ZIPファイルを一度解凍してから編集を行う場合は、下記を参照してください。 フォームの内容を大幅に変更したい場合はこちらの方法で行ってください。 オリジナルフォームの編集方法＞【オリジナルフォーム】マイスピー連携
■目的 オリジナルフォームで取得した情報をフォーム送信時にマイスピーにも送信することができます。 LINEで垢バンしてしまった時の保険としても活用できます。 ■セット所要時間 2時間 ■セットの流れ
（１）マイスピーでシナリオ設定（新規作成） ↓ （２）ECAIで取得したい情報をオリジナルフォームで作成 ↓ （３）オリジナルフォームの完了ページにマイスピーに送信する処理を実装する
今回は姓名、メールアドレスをマイスピーに送信するサンプルとなります。 他の情報を取得したい場合は、マイスピー側の取得情報にECAI側のオリジナルフォームを合わせる必要があります。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
（１）マイスピーでシナリオ設定
①マイスピーでシナリオを新規で作成 デフォルトで姓、名、メールアドレスの３項目を取得できるフォームが作成できます。 内容を変更される場合は、マイスピーのマニュアルに沿って変更をお願いします。
↓ ②登録フォーム設定 登録フォーム設定の確認画面の設定はスキップにして下さい
（２）ECAIで取得したい情報をオリジナルフォームで作成
①オリジナルフォームで作成 サンプルをダウンロードし、index.htmlを編集してオリジナルフォームの入力項目をマイスピーに合わせてください。 デフォルトでは姓、名、メールアドレスを取得するフォームとなっております。 オリジナルフォームの編集方法はこちら＞
↓ ②送信時に入力内容をローカルストレージに格納
（３）オリジナルフォームの完了ページにマイスピーに送信する処理を実装する
先ほどローカルストレージに格納した情報を使って、それを完了ページでは自動でマイスピーに送信を行う処理を実装していきます。 ユーザー側には実際の入力内容は見えず、ローディング画像が表示されている間に裏側で送信処理が行われます。 ①マイスピーの送信先URLを設定 A. 登録ページのURLをコピーします
↓ B. complete.htmlのformタグのアクション部分に設定します
↓ ②送信項目の設定 マイスピーに送る情報をデフォルトから変更している場合は、formタグ内に項目を追加してください。 A. 登録フォームデザインの本文内の入力部分のソースをコピーします
↓ B.complete.htmlのformタグ内に貼り付け デフォルトでは姓、名、メールアドレスを取得するフォームになっていますが、送信項目が同じ場合はそのままでも大丈夫です。
↓ ③ローカルストレージの情報を自動でマイスピーに送信 ローカルストレージの情報を②のvalueに格納し、自動でマイスピーに送信する処理を追加します。 こちらも同様にデフォルトから変更した場合は、送信内容を手動で変更してください。
↓ ④送信テスト 最後にスマホのLINEアプリより送信テストを行って、マイスピーに入力内容が反映されるかご確認ください。 送信テストの方法はこちら＞
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。ホーム画面の「その他、未完了のフォーム申請」のカウント対象
LIFF設定のフォームの種類で、「その他フォーム」を選択したフォームの申請が未対応だった場合に表示されます。
★ただしLIFF名に「本人確認」という名前を使用した場合はホーム画面の「その他、未完了のフォーム申請」には反映されませんのでご注意下さい。
■目的 変更した箇所のソースコードを確認することで、その後に編集する際に参考にすることができます。 ■セット所要時間 5分 ■セットの流れ （１） まず差分を確認したいファイルの変更前、変更後それぞれを用意してください。 ↓ （２） それぞれのファイルをテキストエディターで開きます。 ※お使いのエディターで問題ありません。 ↓ （３） difffというオンラインで差分を確認できるサイトを使用しますので、下記サイトを開いて下さい。 difff＞ ↓ （４） ①、②のサンプルテキストは削除し、テキストエディターから変更前のファイルのソースコードをコピーして①にそれぞれ貼り付け下さい。 変更後のファイルのソースコードは②に貼り付け下さい。 その後③をクリック
↓ （５） ピンクのマーカー部分が差分（変更箇所）になります。
■目的 通常はname属性を2つに分ければ良いのですが、何らかの理由で2つの質問の回答を1つにまとめる必要があるときに使用します。 実装にはJavascriptの知識が必要となります。 ■セット所要時間 10分 ■セットの流れ サンプルページをベースに説明しますので下記ファイルをダウンロードしてください。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１） サンプルページではname属性のcol_1に2つの回答を持たせる処理を実装します。 name属性の記載ルールにつきましてはこちら＞ ①col_1(連番は任意)のタイトルと回答をtype="hidden"にする。回答の方には任意のid属性を振る（今回はid="col_1"） ②１つ目の回答に任意のid属性を振る（今回はid="q1"） ③１つ目の回答に任意のname属性を振る（今回はname="q1"） ④２つ目の回答に任意のid属性を振る（今回はid="q2"） ⑤２つ目の回答に任意のname属性を振る（今回はname="q2"）
<section class="person-form">
<dl>
<input type="hidden" name="col_1_title" value="設問１、設問２">
<input type="hidden" id="col_1" name="col_1" value="">
<dt>設問１<span>*</span></dt>
<dd><input id="q1" type="text" name="q1" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
<dt>設問２<span>*</span></dt>
<dd><input id="q2" type="text" name="q2" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
</dl>
</section>↓ （２） 設問が回答されたタイミングで２つの設問の回答をname属性のcol_1にまとめる
<script>
$('#q1, #q2').on('change', function () {
let q1 = $('#q1').val();
let q2 = $('#q2').val();
if (q1 !== '' && q2 !== '') {
$('#col_1').val(q1 + ',' + q2);
}
});
</script>■目的 何かしらの予約などをする際に、日時を取得したい時などに使用します。 テキストで入力してもらうことも可能ですが、カレンダーやラジオボタンを使用することでスムーズに日時の取得をすることができます。 ■セット所要時間 30分 ■セットの流れ サンプルページをダウンロードしてご希望のLIFFへアップロードすることですぐにご使用いただけます。 ただしデフォルトから変更が必要な場合は、要件に合わせてご変更をお願いします。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U オリジナルフォームの編集やアップロードにつきましては下記ガイドを参照ください。 オリジナルフォームの編集方法＞ （１）デフォルトの設定について ①カレンダー部分 ・初期表示は当日 ・土日祝日は選択付加 ・当日から１か月後まで選択可 ②時間帯 ・チェックボックス or プルダウン選択（第二希望まで） （２）土日祝日の制御について ①2025年以降の祝日や、特定の日付を指定する場合はこちらのリストに追加してください。
②土日祝日を選べるようにするには303～318行目のbeforeShowDayを下記のようにコメントアウトとするか削除してください。
（３）表示期間を制限ついて 表示期間を制限するには下記部分を変更してください。デフォルトは１か月の表示になります。 制限をかけない場合は該当箇所をコメントアウトとするか削除してください。
また当日を入れない場合は、minDateの値を「today」から「1」に変更してください。 例）
minDate : 1,（４）時間帯について
時間帯の入力につきましてはチェックボックス or プルダウン選択が用意されています。 どちらか使用されない方をコメントアウトとするか削除してご使用ください。
ガイドの内容はあくまでもサンプルになります。 ご希望の要件にあわせて編集をお願いします。 またデザイン変更や入力制限などの設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：5,000円(税別)～