■目的 何かしらの予約などをする際に、日時を取得したい時などに使用します。 テキストで入力してもらうことも可能ですが、カレンダーやラジオボタンを使用することでスムーズに日時の取得をすることができます。 ■セット所要時間 30分 ■セットの流れ サンプルページをダウンロードしてご希望のLIFFへアップロードすることですぐにご使用いただけます。 ただしデフォルトから変更が必要な場合は、要件に合わせてご変更をお願いします。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U オリジナルフォームの編集やアップロードにつきましては下記ガイドを参照ください。 オリジナルフォームの編集方法＞ （１）デフォルトの設定について ①カレンダー部分 ・初期表示は当日 ・土日祝日は選択付加 ・当日から１か月後まで選択可 ②時間帯 ・チェックボックス or プルダウン選択（第二希望まで） （２）土日祝日の制御について ①2025年以降の祝日や、特定の日付を指定する場合はこちらのリストに追加してください。
②土日祝日を選べるようにするには303～318行目のbeforeShowDayを下記のようにコメントアウトとするか削除してください。
（３）表示期間を制限ついて 表示期間を制限するには下記部分を変更してください。デフォルトは１か月の表示になります。 制限をかけない場合は該当箇所をコメントアウトとするか削除してください。
また当日を入れない場合は、minDateの値を「today」から「1」に変更してください。 例）
minDate : 1,（４）時間帯について
時間帯の入力につきましてはチェックボックス or プルダウン選択が用意されています。 どちらか使用されない方をコメントアウトとするか削除してご使用ください。
ガイドの内容はあくまでもサンプルになります。 ご希望の要件にあわせて編集をお願いします。 またデザイン変更や入力制限などの設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：5,000円(税別)～計測タグに使用しているjqueryが使用できない時の回避策
■目的 広告運用において計測タグに使用しているjqueryが原因で広告の審査に影響が出てしまうことを回避できます ■セット所要時間 10分 ■セットの流れ LP計測の際に設置するトラッキングコードは使用せず、以下のトラッキングコードを使用します。 こちらはjqueryを使用せずに作られたコードになります。 設置方法につきましては下記を参照してください。 広告リストのLPクリック数、LCV（友だち登録数）の設定＞ ★①には管理画面に使用されているURLのサブドメイン部分を指定して下さい。 例）https://demo.ecai.jp/ですとdemoの部分 ★②にはLPからの計測に記載されている友だち登録のURLを指定して下さい。
〈設置するトラッキングコード〉 ※</body>の閉じタグの直上に設置
<script>
var cookiedomain = getDomain(document.domain);
var paramobj = {};
// クエリパラメータから `ecaiad` を取得し、Cookieに設定
if (typeof getParam('ecaiad') !== 'undefined') {
document.cookie = 'ecaiad=' + getParam('ecaiad');
}
// Cookieを配列として取得
var arr = getCookieArray();
document.addEventListener('DOMContentLoaded', function () {
// クエリパラメータのチェックとオブジェクトの作成
if (getParam('ecaiad')) paramobj['ecaiad'] = getParam('ecaiad');
if (getParam('tcd')) paramobj['tcd'] = getParam('tcd');
if (getParam('ccid')) paramobj['ccid'] = getParam('ccid');
if (getParam('coid')) paramobj['coid'] = getParam('coid');
if (getParam('csid')) paramobj['csid'] = getParam('csid');
// HTML要素 #cv の値を取得
var cvElement = document.getElementById('cv');
if (cvElement) {
paramobj['cv'] = cvElement.getAttribute('value');
}
// 現在のURLを取得
if (window.location.href) {
paramobj['url'] = window.location.href;
}
// パラメータオブジェクトが存在する場合、クエリ文字列を作成
if (Object.keys(paramobj).length > 0) {
var query = '?' + Object.entries(paramobj).map(function (e) {
return `${e[0]}=${e[1]}`;
}).join('&');
// 外部スクリプトの読み込み
var script = document.createElement('script');
script.src = "https://★①.ecai.jp/aclog" + query;
document.head.appendChild(script);
}
});
// URLから指定されたクエリパラメータを取得
function getParam(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// ドメイン名を抽出
function getDomain(url) {
var arr_uri = url.match(/^(.*?)([a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})[\:[0-9]*]?([\/].*?)?$/i);
return arr_uri[2];
}
// Cookieを配列形式で取得
function getCookieArray() {
var arr = {};
if (document.cookie !== '') {
var tmp = document.cookie.split('; ');
for (var i = 0; i < tmp.length; i++) {
var data = tmp[i].split('=');
arr[data[0]] = decodeURIComponent(data[1]);
}
}
return arr;
}
// URLSearchParams を使ってクエリパラメータを取得
var params = (new URL(document.location)).searchParams;
var adCode = params.get("ecaiad");
var url = "★②";
// adCode が存在する場合、リンクを更新
if (adCode) {
// 指定された href を持つすべての <a> 要素を取得
var targets = document.querySelectorAll("a[href='" + url + "']");
for (var i = 0; i < targets.length; i++) {
targets[i].href = url + adCode; // href を更新
}
}
</script>■目的 通常の設定ですと１つのLPで１つの広告コードの運用になるのですが、複数の広告コードに対応できるようになります。 広告コードごとにLPを作成する必要がないので運用面での効率が上がります。 ■セット所要時間 30分 ■セットの流れ ページ遷移する際に広告コードをブラウザのストレージで持ちまわすようにします。 下記のサンプルページではLP→確認ページ→完了ページと遷移します。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 今回のガイドでは基本的な設置方法は割愛しておりますので、確認したい方は下記ガイドを参照ください。 商品購入のLPクリック数、CV計測の設定方法＞ （１）LPページ（商品購入ページ）の設定 ※サンプルのindex.htmlファイルです ※LPページにアクセスする際はキャンペーンURL（広告コード付きURL）をご使用ください ①jquery設置 ②トラッキングコードは使用する広告リストで発行されているものを設置してください ③広告コードをブラウザのストレージに格納
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- トラッキングコード -->
<script src="https://★★★★★.ecai.jp/store/js/ecai.js"></script>
<!-- トラッキングコード -->
<script>
var params = (new URL(document.location)).searchParams;
var ecaiAd = params.get("ecaiad");
localStorage.setItem('ecaiAd', ecaiAd);
</script>↓ （２）完了ページの設定 ①jquery設置 ②id属性にcvを設定し、inputタグをhiddenで配置 ③ローカルストレージより広告コードを取得し、②のinputタグに設定 設定後ローカルストレージの広告コードは削除します ④トラッキングコードは使用する広告リストで発行されているものを設置してください
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><input type="hidden" id="cv" value=""><script>
var ecaiAd = localStorage.getItem('ecaiAd');
$('#cv').val(ecaiAd);//コードセット
localStorage.removeItem("ecaiAd");//
</script>↓ （３）計測テスト ①キャンペーンURL（広告コード付きURL）にアクセスするとカウントされます ②完了ページまで表示されるとカウントされます
■目的 オリジナルフォームの完了ページを閉じたときに白紙ページが残ってしまうときの対処方法です。 ケースとしては短縮URLでLIFF-URLを使用した際などになります。 ■セット所要時間 10分 ■セットの流れ オリジナルフォームを編集します。 編集方法に関してはこちら＞ （１）友だち登録URLをコピーします 友だち登録URLの確認方法はこちら＞ （２）complete.htmlの編集 完了ページには概ね閉じるボタンがあると思いますのでそちらを編集します。 ない場合は新たに作成してください。 閉じるボタンのaタグにonclickイベントがある場合は削除します。 そしてhref属性を追加し、先ほどコピペした友だち登録URLをセットしてください。
（３） ファイル編集後、閉じるボタンを押してトーク画面が表示されるか確認をして下さい。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。LPページ内にある質問などの回答によって広告コードを出し分けて設定する方法
■目的 LPページ内にある質問の回答によって広告コードを分けることで、友だち登録時に付与されるタグも分けることができますので、それぞれにステップメッセージなどをセットすることが可能になります。 ■セット所要時間 30分 ■セットの流れ 同時にLPからの計測を行いたい場合はこちらを参照ください。 ただしLCVは動的に変更されてしまいますのでクリックのみの計測となります。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１）広告コードの発行 最初に出し分けるための広告コードを直接計測で2つご用意ください。 （２）LPページ（トップページ）の設定 ラジオボタンで「はい、いいえ」の回答によって広告コードが変わるサンプルコードです。 ①、③に作成した広告コードをそれぞれ設置してください。 ②、④に広告コードが空の状態の友だち追加URLを設置してください。 URLは直接計測のガイドの3-2の部分になります。
<!-- 回答によって広告コードの変更 直接計測で設定を行なう -->
<script>
var adCodeAnswer;
var addFriend = document.querySelectorAll(".add_friend"); //ボタン要素取得
$('.q :radio').on('change', function () {
var val = $('.q :radio:checked').val();
if (val == 'はい') {
adCodeAnswer = '広告コード1';
for (var i = 0; i < addFriend.length; i++) {
addFriend[i].href = "https://demo.ecai.jp/optin/9?ecaiad=" + adCodeAnswer;
}
} else if (val == 'いいえ') {
adCodeAnswer = '広告コード2';
for (var i = 0; i < addFriend.length; i++) {
addFriend[i].href = "https://demo.ecai.jp/optin/9?ecaiad=" + adCodeAnswer;
}
}
});
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。LPページなど生成したキャンペーンURLの広告コードを下層のページに引き継ぐ方法
■目的 友だち登録ページがサイトのトップページではなく下層のページにある場合に広告コードを下層ページに引き継ぐことができます。 ■セット所要時間 30分 ■セットの流れ キャンペーンURLでアクセスしたページでブラウザのローカルストレージに広告コードを格納します。 下層にある友だち登録ページに遷移した際に格納した広告コードを引き継ぎます。 下層ページに広告コードを引き継ぐ必要がない場合はこちら＞ サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１）LPページ（トップページ）の設定 ①jquery設置 ②トラッキングコードの設置（デフォルトのものとは内容が異なります） こちらで広告コードをローカルストレージに格納します ③ECAI管理画面に使われているサブドメインに変更して下さい
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://★★★★★.ecai.jp/store/js/ecai.js"></script>
<script>
var params = (new URL(document.location)).searchParams;
var ecaiAd = params.get("ecaiad");
localStorage.setItem('ecaiAd', ecaiAd);
</script>（２）下層ページ（友だち登録ページ）の設定 ①jquery設置 ②広告設定の友だち登録用のリンクを設定してください https://gyazo.com/4f5d9f0a8227cbe972248e30a28b5e4e ③トラッキングコードの設置（デフォルトのものとは内容が異なります） こちらで広告コードを現在のページに引き継いでます ④ECAI管理画面に使われているサブドメインに変更して下さい ⑤広告設定の友だち登録用のリンクを設定してください ※href=部分は不要 https://gyazo.com/4f5d9f0a8227cbe972248e30a28b5e4e
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://★★★★★.ecai.jp/store/js/ecai.js"></script>
<script>
let ecaiAd = localStorage.getItem('ecaiAd');
var url = "https://★★★★★.ecai.jp/optin/★?ecaiad=";
if(ecaiAd){var target = $("a[href='" + url + "']");
for (var i = 0; i < target.length; i++) {target[i].href = url + ecaiAd;}}
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】マイスピー連携
■目的 オリジナルフォームで取得した情報をフォーム送信時にマイスピーにも送信することができます。 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、チャットワークよりご依頼をお願いします。「###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の表示を回避することができます。
■目的 オリジナルフォームで画像添付する際にカメラ起動かファイル選択を選べるようにします。 ■セット所要時間 10分 ■セットの流れ ポイントはiosデバイスとAndroidデバイスで設定が異なるのでそれを判別して実装します。 ※ブラウザの仕様によるものなので、今後仕様に変更がある場合がございます。 サンプルページをベースに説明しますのでまずは下記ファイルをダウンロードしてください。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１） inputタグは下記のように設定してください。 accept属性、capture属性の設定で挙動が決まります。 ※name属性は適宜設定
<input type="file" name="col_8" accept="image/*" capture="camera">↓ （２） iosでのアクセスの場合、capture属性を削除します。
<script>
// iPhone(ios)
if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0){
$('input[type="file"]').removeAttr('capture');
}
</script>※ヘッダーにjqueryの読み込みがない場合は下記設置をしてください。バージョンの指定はありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>■目的 通常は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>■目的 変更した箇所のソースコードを確認することで、その後に編集する際に参考にすることができます。 ■セット所要時間 5分 ■セットの流れ （１） まず差分を確認したいファイルの変更前、変更後それぞれを用意してください。 ↓ （２） それぞれのファイルをテキストエディターで開きます。 ※お使いのエディターで問題ありません。 ↓ （３） difffというオンラインで差分を確認できるサイトを使用しますので、下記サイトを開いて下さい。 difff＞ ↓ （４） ①、②のサンプルテキストは削除し、テキストエディターから変更前のファイルのソースコードをコピーして①にそれぞれ貼り付け下さい。 変更後のファイルのソースコードは②に貼り付け下さい。 その後③をクリック
↓ （５） ピンクのマーカー部分が差分（変更箇所）になります。
■目的 自社管理のWEBページでLINEの友だち登録前にSMS認証を行い、名前や電話番号などのユーザー情報を取得する方法。 ユーザー情報のほか、設定したアンケートの回答なども取得できます。 取得した情報はECAI管理画面の申し込みリストで確認ができます。 また取得した申し込みリストよりSMS配信を行う場合はこちら＞ ■セット所要時間 ３０分～１時間 （※取得するセット内容のボリュームによって変わります） ■セットの流れ ECAIで公開されているAPIを使用します。下記ガイドの仕様に沿って設定を進めて下さい。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 【APIトークンの発行】 （１）コンテンツ ＞ 外部連携 ＞ ECAI API トークンを発行する
↓ （２）管理名と有効期限を設定する 管理名はわかりやすい任意のものを設定してください。また有効期限は後からの変更ができません。
【発行済みAPIトークンの確認、変更】 （１）発行済みリスト
↓ （２）アクセストークン 発行されたAPIトークンのステータスを「オフ」または削除した場合、設置済みのフォームがその時点より機能しなくなります。 またトークンは外部に流出しないように管理してください。こちらのトークンは後で使用します。
【申込設定の発行】 （１）コンテンツ ＞ 申込設定 ＞ 追加する
↓ （２）各種の項目設定 ①管理名を入れる ※ECAI内で管理するための名称になりますので「2024年1月SMS送信者」など管理しやすい名前にすることを推奨します ②受付期間を設定。必要ない場合は「設定しない」にチェック ③SMSの認証済みのみを受ける場合はチェック ④SMS発信元番号は「共通（0120-002-495）」を選択する ※共通（0120-002-495）はECAI側で取得している番号となります。 ※仮にお客様が0120-002-495に電話発信をした場合は自動音声が流れます（自動音声は固定となり変更不可となります） ※0120-002-495の自動音声を確認する際は0120-002-495に発信しご確認ください ⑤保存する ⑥保存後、申し込みコードが自動で発行されますのでコピーをして下さい。後ほどフォームの作成で使用します。
【入力フォームの設定】 下記サンプルページを元に説明しますので、まだの場合はダウンロードしてください。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■入力フォームの作成 サンプルページは名前、メールアドレス、携帯電話番号を取得するのですが、携帯電話番号を入力するとSMSコードが発行できるようになります。 （１）formタグ内にinputを非表示で設定 id：request_code name：request_code value：申込コード ※【申込設定の発行】(2)-⑥でコピーしたもの
（２）入力項目の設定
①名前：name属性にはnameを設定
②メールアドレス：name属性にはemailを設定
③携帯電話番号：name属性にはtelを設定
④携帯電話番号入力時のonkeyupイベントの設定
⑤質問1ではタイトルのname属性にはcol_1_title、回答のname属性にはcol_1を設定
※ECAIにデータを送信する際に⑤は必須となります
＜送信可能な入力項目のname属性一覧＞ request_code：申込コード※必須 advert_code：広告コード name：名前 nick_name：ニックネーム manager_name：担当者名 reserve_date：予約日時(日付型) tel：携帯電話番号 email：メールアドレス col_1_title：質問タイトル※必須 col_1：回答※必須 col_2_title：質問タイトル col_2：回答 col_3_title：質問タイトル col_3：回答 col_4_title：質問タイトル col_4：回答 col_5_title：質問タイトル col_5：回答 col_6_title：質問タイトル col_6：回答 … 最大100セット ■SMSコード発行 （１）ボタンの設置 ①ボタン全体のタグにclass="codeRequestButton"を指定 ②ボタンにSmsCodeRequest()のクリックイベントを設定
（２）SMSコード発行のクリックイベント ③APIトークンの設置 ④クリックイベント設置 ※【発行済みAPIトークンの確認、変更】（２）アクセストークンで発行されたもの ⑤URLにhttp://[お客様ドメイン]/api/v1/rfm/code-deliveryを指定 ⑥パラメーターのsend_number、request_codeは必須です ⑦Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ⑧モーダル呼び出し
■SMSコード入力用のモーダル設置 ①モーダル本体 ②全体にid="modal-content"を指定 ③認証コードの入力欄にid="code"指定 ④認証コードの入力欄のname属性にname="code"を指定 ⑤閉じるボタンにid="modal-close"を指定
⑥モーダルイベントの設置
■SMSコード確認 ①認証コードの入力チェック ②URLにhttp://[お客様ドメイン]/api/v1/rfm/code-checkを指定 ③パラメーターのsend_number、request_code、codeは必須です ④Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ⑤レスポンスがOKだった場合は送信ボタンを表示させる
■入力フォームの送信 （１）ボタンの設置 ①送信ボタン全体 ②ボタンにid="requestbtn"を指定 ③ボタンにRequestForm()のクリックイベントを設定
（２）送信処理 ①送信処理全体 ②URLにhttp://[お客様ドメイン]/api/v1/rfm/inboxを指定 ③Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ④レスポンスがOKだった場合はcomplete.htmlにリダイレクト
【送信テスト】 作成した入力フォームを任意のサーバーへアップロードし下記の流れで送信テストを行ってください。 送信内容がECAIの申込リストに反映されれば完了となります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。LIFFのZIPファイルが20MBを上回っていてアップロードできない時の回避方法
■目的 アップロードしたいZIPファイルが20MBを超えているとアップロードできないので、その時の回避方法の説明します。 アップロードの方法はこちら＞ ■セット所要時間 5分 ■セットの流れ まず方法ですが、ZIPファイルが20MBを超えない重さにする必要があります。 LIFFをアップロードする際の仕様の話ですが、アップロードする際に古いファイルは削除されず新しいファイルが上書きされる仕様となります。 そのためすでにアップロードがされている画像ファイルをに関してはアップロードしなくても問題ありません。 LIFFファイルをZIPにする前に、既存の画像データに関しては一旦削除いただき、ZIPファイル全体が20MB以下になるように調整をお願いします。 アップロード後は画像がちゃんと表示されているかのご確認をお願いします。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。1つのLPで2つ以上のLINE公式アカウント（BOT）をまたいで広告リストのLPからの計測を行う方法
■目的 １つのLPで2つ以上のLINE公式アカウント（BOT）をまたいで広告リストのLPからの計測を行う方法の説明です。 前提として広告コードによる出し分けが必要となりますので、各コードごとのコーディングも必要となります。 通常のLPからの計測はこちらを参照ください。 広告リストのLPクリック数、LCV（友だち登録数）の設定＞ ■セット所要時間 10分 ■セットの流れ 下記LPページのソースコード参照いただき、御社の環境に合わせて設置をお願いします。 （参考） LPページ：https://help.ecai.jp/form/add_friend_lp3/?ecaiad=aaaaaaa ファイルDL：https://help.ecai.jp/form/add_friend_lp3.zip
コードがないとどのLINE公式アカウント（BOT）に紐づくか判断できないため、その場合はデフォルトで設定したLINE公式アカウントに友達登録されます
〈LPページ〉 ※参照コードは下にあります ①jqueryを設置 ②友達登録ボタンにclass="add_friend"を追加 ③指定のトラッキングコードを設置 ④コードがないときの友達登録URLを設定 ⑤１つ目のアカウントの広告リストの友達登録URL ⑥２つ目のアカウントの広告リストの友達登録URL ⑦１つ目のアカウントの広告コード ⑧２つ目のアカウントの広告コード
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>友だち追加ページ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>友だち追加ページ</div>
<br>
<a class="add_friend" href="">友だち追加する＞</a>
<script src="https://demo.ecai.jp/store/js/ecai.js"></script>
<script>
var params = (new URL(document.location)).searchParams;
var adCode = params.get("ecaiad");
var addFriendUrl = "https://lin.ee/addfriend";//コードなし
var lineAccount1 = "https://demo.ecai.jp/optin/1?ecaiad=";//LINEアカウント１
var lineAccount2 = "https://demo.ecai.jp/optin/2?ecaiad=";//LINEアカウント２
var target = $('.add_friend');
if (adCode == 'aaaaaa') {//LINEアカウント１
for (var i = 0; i < target.length; i++) { target[i].href = lineAccount1 + adCode; }
}
else if (adCode == 'bbbbbb') {//LINEアカウント2
for (var i = 0; i < target.length; i++) { target[i].href = lineAccount2 + adCode; }
}
else{
for (var i = 0; i < target.length; i++) { target[i].href = addFriendUrl; }
}
</script>
</body>
</html>■目的 ステップメッセージの途中で何かしらのアクションがあったユーザーに対してはそのステップメッセージを送信させたくない時に使用します。 ■セット所要時間 ５分 ■セットの流れ 仮にアクションが応答メッセージだった場合は以下の方法となります。 （１） ユーザーから発言があった際に応答メッセージにて自動返信をする この際にタグを付与するようにします。
↓ （２） ステップメッセージの設定で（１）のタグが付与されたユーザーを除くようにする
■目的 既存の入力チェックでは設定ができない内容は、独自のチェックを設定する必要があります。 ■セット所要時間 １０分 ■セットの流れ 対象の回答部分に指定の設定を行います。 サンプルの例は、「いいえ」にチェックが入ることで独自のテキストでバリデーションが入ります。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１）回答部分のinputのclassに独自の関数を呼び出す設定 例）
<input type="radio" name="col_1" class="validate[funcCall[checkComment],required]" value="いいえ">（２）独自関数の内容を設定 こちらでエラーテキストの設定をします 例）
<script>
// 独自関数
function checkComment(field, rules, i, options){
if ($('.q_a :radio:checked').val() == 'いいえ') {
return `いいえの場合、送信できません`;
}
}
</script>
LIFF設定のフォームの種類で、「その他フォーム」を選択したフォームの申請が未対応だった場合に表示されます。
★ただしLIFF名に「本人確認」という名前を使用した場合はホーム画面の「その他、未完了のフォーム申請」には反映されませんのでご注意下さい。
■目的 オリジナルフォームをクリックしたユーザーにタグを付与することができます。 注意点として、すでに指定のタグが付与されている場合は、タグを上書きして再付与することはできません。 ■セット所要時間 １０分 ■セットの流れ 設定方法としては、オリジナルフォームの呼び出しURLを短縮URLに設定し、クリック時にタグが付与される設定を行います。 （１）オリジナルフォームの呼び出しURLを確認 クリックした時にタグ付与させたい、オリジナルフォームの呼び出しURLをコピペしてください。 コンテンツ ＞ LIFF
↓ （２）短縮URLの設定 短縮URLの新規作成方法はこちら＞ 使用したいメッセージや1：1トークで短縮URLを設定します。 ①短縮URLの管理名 ②オリジナルフォームの呼び出しURLを貼り付け ③ログイン認証にチェック ④クリック時に付与したいタグを追加 ⑤短縮URLを挿入
↓ （３）「友だち追加URL」を設定する オリジナルフォームの送信完了ページの「閉じる」ボタンに、「友だち追加URL」を設定します。 こちらの設定を行わないと、「閉じる」ボタンをクリックしても白紙のページが残ってしまいます。 オリジナルフォームの編集方法はこちら＞ 下記ソースはサンプルになります。 リンク先はオリジナルフォームが設定されているLINEの「友だち追加URL」を設定してください。 ※作成されたオリジナルフォームによっては、ソースが異なる場合があります。 ※編集ファイルはcomplete.html
<a href="https://lin.ee/●●●●●●●" class="blue">閉じる</a>■目的 こちらのアプリは入力項目にテキストを打ち込むだけでオリジナルフォームを生成することができます。 これにより作業効率をアップさせることができるのと、HTMLの知識がない方でも誰でもオリジナルフォームを生成することができるようになります。 オリジナルフォーム生成アプリはこちら＞ ■セット所要時間 15分（※作成するコンテンツ量によります） ■セットの流れ まず完成形としては、下記のようなフォームが簡単に作成できます。 サンプルフォーム＞ （１）入力ページのヘッダー部分 ①ページタイトル：ブラウザのタブ、フォームの最上部 ②ヘッダータイトル ③ヘッダーテキスト
↓ （２）送信ボタン、タグコード ①送信ボタンテキスト ②送信時タグコード：ここで設定したタグが送信時に付与されます
↓ （３）質問追加 ＋質問追加：クリックで下記５種類の質問が追加できます Radio：ラジオボタン Checkbox：チェックボックス（※複数選択可） Select：プルダウン Text：1行テキスト入力 Textarea：複数行テキスト入力
↓ （４）ラジオボタンの作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④回答の設定 ⑤回答追加 ⑥削除
↓ （５）チェックボックスの作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④回答の設定 ⑤回答追加 ⑥削除
↓ （６）セレクトボックスの作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④回答の設定（プルダウンでの選択式） ⑤回答追加 ⑥削除
↓ （７）テキスト入力（1行）の作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④入力例の設定（入力すると消えます）
↓ （８）テキスト入力（複数行）の作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④入力例の設定（サンプルは設定なし）
↓
（９）完了ページ
完了ページを表示するには、入力ページを送信することで表示されます。
①ページタイトル：ブラウザのタブ、フォームの最上部
②ヘッダータイトル
③ヘッダーテキスト
④閉じるボタンテキスト
↓ （１０）フッターボタンの説明 ①保存：入力した内容をブラウザのストレージ（保存ファイル）に保存 ②ファイル出力：保存したファイルを出力。途中から作業を再開したり、バックアップファイルになります。 ③ファイル読み込み：②のファイルを読み込むとフォームに反映されます。 ④リセット：入力内容をすべて削除 ⑤プレビュー：ブラウザで完成フォームを見れます。F12でスマホ表示にするのがおすすめです。 ⑥LIFFダウンロード：ECAIにアップロードするファイルのダウンロード
【プレビューの補足】 プレビュー後にWindowsの場合、F12で開発ツールが開きます。スマホのマークをクリックするとスマホのプレビューに切り替わります。
↓ （１１）LIFFファイルをアップロードする (10)の⑥でダウンロードしたLIFFファイルをECAIの管理画面からZIPファイルのままアップロードして完成です。 LIFFのアップロード方法はこちら＞ オリジナルフォームの新規作成はこちら＞ また、ダウンロードしたLIFFファイルをさらに手動で編集することも可能です。 オリジナルフォームの編集方法＞オリジナルフォーム内でLINE名、ECAI IDを表示させる方法
■目的 オリジナルフォーム内で「LINE名」や「ECAI ID」を表示させたいときに使用します。 ■活用事例 （１） LINE名の場合は、オリジナルフォームのテキスト内で呼び出すことができます。 ユーザーへのパーソナルな訴求が可能となります。
（２） ECAI IDに関してはテキスト内で使用することはあまりないのですが、 外部サービスのスプレッドシートなどに回答を送信した時に、ECAI IDを送ることでユーザーを突合（特定）することができます。 オリジナルフォームのスプレッドシート通知＞
■セット所要時間 10分 ■セットの流れ サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■編集ファイル：index.html （１） サンプルページを参照し、LINE名、ECAI IDを取得するコードを</body>の上に追加
<!-- 削除禁止 -->
<script>
//会員チェック
function CheckMemberProc() {
var uid = $("#useridfield").val();
var fid = $("#fid").val();
var botid = $("#bot_id").val();
$.ajax({
type: "POST",
url: "/api/member/info",
dataType: 'json',
data: {
"uid": uid,
"fid": fid,
"bot_id": botid
},
success: function(j_data) {
if (j_data['error_code'] == 500) {
alert("会員は登録されていません。");
}
else {
$("#ecai_id").text(j_data['result']['ecai_id']);
$("#nickname").text(j_data['result']['nickname']);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
},
complete: function() {removeLoading();}
});
}
</script>
<!-- 削除禁止 -->↓ （２） サンプルページを参照し、LIFFの呼び出し部分で（１）の「CheckMemberProc();」を追加
↓ （３） 挿入したい任意の場所に下記を追加 LINE名
<span id="nickname"></span>ECAI ID
<span id="ecai_id"></span>■内部API仕様 【エンドポイント】 /api/member/info 【DataType】 POST：json 【Request】 uid: String 必須 LineUserId fid: Number 必須 フォームID bot_id: Number 必須 BOT_ID 【Response】 error_code 正常な場合は「200」、指定されたBOT、フォーム情報、会員情報が存在しない等の場合は「500」 result error_codeが500の場合は空、会員情報が取得出来た場合は、「ecai_id」「nickname」を返却 ※Requestの必須パラメータが正しく指定されていない場合は、HTTPステータスコードが422で返却される
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。ZIPファイルを解凍せず編集する方法
■目的 オリジナルフォームをアップロードするにはZIPファイルにする必要があるのですが、解凍を行わないことで再度圧縮する手間が省けます。 ■セット所要時間 ５分 ■セットの流れ ※説明はWindowsになります。Macで行う場合はファイルを解凍してから編集を行なってください。 解凍後のファイルをアップロードするには圧縮が必要です。 （１） ①ZIPファイル上で右クリック ②プログラムから開く ③エクスプローラー
↓ （２） 編集したいファイルをドラック＆ドロップで、デスクトップなどにコピーします。
↓
（３）
コピーしたファイルをメモ帳などで開きます。
※Macの場合はデフォルトで使用できる「テキストエディット」を使用してください。
編集後、ファイルを保存します。（保存しないと変更されません）
↓
（４）
デスクトップの編集したファイルを、ZIPファイルの中へドラック＆ドロップで戻します。
その際にアラートが出ますが上書きを選択してください。
（※元ファイルが必要な場合はバックアップを別に保管しておいてください）
↓ （５） ECAIのLIFFへアップロードして編集内容が反映されているかご確認ください。
お使いの端末、環境によってできないこともありますので、その場合は一度解凍してから編集をお願いします。 オリジナルフォームの編集方法＞ 動作確認済み：Windows10ポイント機能の使い方例
【基本機能】 ポイント数に応じてタグを一斉付与する方法＞ ポイント数に応じてタグを一斉削除する方法＞ 自動でポイント付与・削減する方法＞ ユーザー側でポイントを確認する方法＞ ポイント数に応じて自動でタグを付与する方法＞ 【活用事例】 ポイント数に応じてサービスや商品をプレゼントする方法＞新機能#59┃会員リストの絞り込みで、タグ付与日時での絞り込みができるようになりました！
■目的 会員リストの絞り込みで、タグ付与日時での絞り込みができるようになりました。 これにより、より細かいセグメント分けが可能になりますので、配信内容の効果を上げることができます。 ■セット所要時間 ３分 ■セットの流れ （１）会員 ＞ 会員リスト ＞ 条件で絞り込み
↓↓↓ （２）絞り込み ①他の会員情報で絞り込む ②条件タグを設定 ③タグ付与日時を設定 ④絞り込み
■目的 オリジナルフォーム送信後、送信内容をメッセージでリマインド配信することができます。 ■セット所要時間 1分 ■セットの流れ （１）コンテンツ ＞ LIFF ＞ 設定 対象のオリジナルフォームの設定をひらく
↓ （２）「送信内容をメッセージで送る」にチェックを入れて保存
↓ （３）送信テスト LIFF-URLから送信テストを行い、メッセージで送信内容が送られてくれば設定完了です。 オリジナルフォームのテスト送信方法＞
回答内容がすべて配信されるため、設定する前に必ず配信される回答内容を確認してください。 質問で分岐がされている場合、ユーザーの操作によっては内容が重複して送信されることがあります。 そのような場合はオリジナルフォームを修正することで重複を防ぐことができます。
↓ （４）メッセージも同時に送りたい場合 フォーム送信時にタグ付与を行い、タグトリガーステップメッセージを設定してください。 オリジナルフォームで、送信ボタンを押したらタグを付与する方法＞ 「タグトリガーステップメッセージ」の作成方法＞オリジナルフォーム(LIFF)を入力のないLPのように使う方法
■目的 オリジナルフォーム(LIFF)を入力のないLPのように使う方法 ■セット所要時間 5分 ■セットの流れ 【パターン１】 LIFFを外部サイトに設定することで、外部のサイトをLIFFで開くことができます。 外部サイトの設定方法＞ 【パターン２】 LIFFファイルのindex.htmlで静的ページを生成する。 index.htmlを編集し、コンテンツを作成してください。 オリジナルフォームの編集方法＞ LIFFファイル内には「index.html」と「complete.html」を必ずセットで作成する必要があります。 LIFFファイルの構造についてはこちら＞
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】ボタンをランダムで表示させる方法
■目的 ボタンの配置による選択項目の偏りをなくすために、毎回ランダムにボタンを表示させています。 回答に偏りがある場合に、より正確に回答結果を得ることができます。 ■セット所要時間 10分 ■セットの流れ 下記のサンプルページをもとに説明します。 フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U 編集ファイル：index.html （１）htmlの質問部分のにからのulを設置
<ul id="cancel_reason_btn" class="col2"></ul>↓ （２）ボタンとランダム表示させるJavascriptを記述
//シャッフル
const shuffleArray = (array) => {
const cloneArray = [...array]
for (let i = cloneArray.length - 1; i >= 0; i--) {
let rand = Math.floor(Math.random() * (i + 1))
// 配列の要素の順番を入れ替える
let tmpStorage = cloneArray[i]
cloneArray[i] = cloneArray[rand]
cloneArray[rand] = tmpStorage
}
return cloneArray
}
//解約理由ボタンの配列
let arr = [
'<li><label><input type="radio" name="col_6" class="validate[required]" value="効果を感じない" data-prompt-position="topLeft"><span>効果を感じない</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="商品が余っている" data-prompt-position="topLeft"><span>商品が余っている</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="価格が高い" data-prompt-position="topLeft"><span>価格が高い</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="他社商品へ変更" data-prompt-position="topLeft"><span>他社商品へ変更</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="お試しのみ" data-prompt-position="topLeft"><span>お試しのみ</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="改善された" data-prompt-position="topLeft"><span>改善された</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="対応がよくない" data-prompt-position="topLeft"><span>対応がよくない</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="その他" data-prompt-position="topLeft"><span>その他</span></label></li>',
];
cloneArr = shuffleArray(arr);
// innerHTMLを使用して表示
let cancelReasonBtn = document.getElementById("cancel_reason_btn");
cancelReasonBtn.innerHTML = cloneArr.join('');ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。 またチャットワークへの通知設定の設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：10,000円(税別)オリジナルフォームの送信内容をスプレッドシートへ反映させる方法
■目的 オリジナルフォームの送信内容をスプレッドシートへ反映させる方法の説明になります。 （※ECAIにも同時に送信されます） ■セット所要時間 20分 ■セット方法 スプレッドシートへ反映を行うためには、Googleアカウントが必要になります。 無料で作成できますので、まずはアカウントを作成してください。 Googleアカウント作成＞
（１）オリジナルフォームの送信設定
下記のサンプルページをもとに説明します。 フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U オリジナルフォームの編集方法はこちら＞ ①index.htmlにスプレッドシートへの送信設定
【コピペ用】
//★スプレッドシートに送信設定
function OnPost(){
const URL = "スプレッドシートのApps Scriptをデプロイした時のURL";
//質問1，2の回答を取得
const c1 = $('.q1 :radio:checked').val();
const c2 = $('.q2 :radio:checked').val();
let SendDATA = {
"column_1" : c1,
"column_2" : c2,
};
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded",
"body" : JSON.stringify(SendDATA)
};
//スプレッドシートに送信
fetch(URL, postparam);
}↓ ②送信時に「OnPost();」を呼び出す
（２）スプレッドシートの設定
①スプレッドシートの新規作成 ＞ 拡張機能 ＞ Apps Script
↓ ② Apps Script設定 スプレッドシートへ書き込む処理は、それ以降の「doPost()」に設定します。 下記コードをコピペし保存します。 記入されたスプレッドシートの最後の行に追加されます。
【コピペ用】
function doPost(e){
let Sheet = SpreadsheetApp.getActiveSheet();
let JsonDATA = JSON.parse(e.postData.getDataAsString());
let currnetDate = new Date(); //現在の日時
Sheet.appendRow([currnetDate,JsonDATA.column_1,JsonDATA.column_2]);
}
↓
③ Apps Scriptの公開（デプロイ）
デプロイ ＞ 新しいデプロイ ＞ 設定 ＞ ウェブアプリ
↓
説明：任意の管理名
ウェブアプリ：自分
アクセスできるユーザー：全員
↓
承認画面は初回のデプロイ時のみの作業となります。
↓
スプレッドシートを作成したアカウントを選択
↓
Advancedをクリック
（※ボタンが小さいので注意）
↓
Go to 「スプレッドシートのタイトル」リンクをクリック
↓
Allowを選択
↓
デプロイが成功すると、ウェブアプリのURLが発行されますので、これをコピペします。
ここまででスプレッドシートの設定は完了です。
↓
コピペしたURLをオリジナルフォームに設定します。
（１）の①に戻っていただき、index.htmlへURLを設定し保存後、オリジナルフォームをECAIへアップロードして下さい。
（３）送信確認
オリジナルフォームから送信して、スプレッドシートへ反映されましたら設定は完了です。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。 またチャットワークへの通知設定の設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：10,000円(税別)オリジナルフォームのチャットワーク、スプレッドシート通知
■目的 オリジナルフォームで入力された内容をチャットワーク通知する方法の説明になります。 （※ECAIにも同時に送信されます） ■セット所要時間 60分 ■セット方法 チャットワーク通知を行うためには、Googleアカウントとチャットワークアカウントが必要になります。 どちらも無料で作成できますので、まずはアカウントを作成してください。 Googleアカウント作成＞ チャットワークアカウント作成＞ 【チャットワーク通知までの流れ】 ①オリジナルフォーム送信 ↓ ②スプレッドシートへ記入 ↓ ③スプレッドシートが変更されたらチャットワークへ送信 ↓ ④チャットワークに通知される （１）オリジナルフォームの送信設定 下記のサンプルページをもとに説明します。 フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U オリジナルフォームの編集方法はこちら＞ ①index.htmlにスプレッドシートに送信設定 ※画像ファイルを送ることはできません。
【コピペ用】
//★スプレッドシートに送信設定
function OnPost(){
const URL = "スプレッドシートのApps Scriptをデプロイした時のURL";
//質問1，2の回答を取得
const c1 = $('.q1 :radio:checked').val();
const c2 = $('.q2 :radio:checked').val();
let SendDATA = {
"column_1" : c1,
"column_2" : c2,
};
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded",
"body" : JSON.stringify(SendDATA)
};
//スプレッドシートに送信
fetch(URL, postparam);
}②送信時に「OnPost();」を呼び出す
（２）スプレッドシートの設定 ①スプレッドシートの新規作成 ＞ 拡張機能 ＞ Apps Script
↓
②Apps Scriptの設定
ここで一旦チャットワークへログインし、設定から「API Token」と「対象のルームID」を取得します
↓
Apps Scriptに戻り、「API Token」と「ルームID」をコピペします。
チャットワークへの送信処理はそれ以降の「doPost()」に設定します。
送信メッセージ部分は送信内容に合わせてご変更ください。
【コピペ用】
// 【編集対象】Chatwork API Token
const token = 'API Token';
// 【編集対象】登録情報を通知するグループチャットのルームID
const room_id = 'ルームID';
function doPost(e){
let Sheet = SpreadsheetApp.getActiveSheet();
let JsonDATA = JSON.parse(e.postData.getDataAsString());
let currnetDate = new Date(); //現在の日時
Sheet.appendRow([currnetDate,JsonDATA.column_1,JsonDATA.column_2]);
// 送信データを個別に取得
var val1 = JsonDATA.column_1;
var val2 = JsonDATA.column_2;
// チャットワークに送信するメッセージ
var message = '';
message += "[info][title]チャットワーク通知[/title]";
message += "依頼日時: " + currnetDate + "\n";
message += "【STEP１】" + val1 + "\n";
message += "【STEP２】" + val2 + "\n";
message += "[/info]";
// Chatworkへ送信
var client = ChatWorkClient.factory({token: token})
client.sendMessage({room_id: room_id ,body: message});
}↓
編集が終わりましたら保存します
③ライブラリの設定 ライブラリで下記スクリプトIDで検索し、ChatWorkClientを追加
スクリプトID: 1nf253qsOnZ-RcdcFu1Y2v4pGwTuuDxN5EbuvKEZprBWg764tjwA5fLav
④Apps Scriptの公開（デプロイ）
デプロイ ＞ 新しいデプロイ ＞ 設定 ＞ ウェブアプリ
↓
説明：任意の管理名
ウェブアプリ：自分
アクセスできるユーザー：全員
↓
承認画面は初回のデプロイ時のみの作業となります。
↓
スプレッドシートを作成したアカウントを選択
↓
Advancedをクリック
（※ボタンが小さいので注意）
↓
Go to 「スプレッドシートのタイトル」リンクをクリック
↓
Allowを選択
↓
デプロイが成功すると、ウェブアプリのURLが発行されますので、これをコピペします。
ここまででスプレッドシートの設定は完了です。
↓
コピペしたURLをオリジナルフォームに設定します。
（１）の①に戻っていただき、index.htmlへURLを設定し保存後、オリジナルフォームをECAIへアップロードして下さい。
（３）送信確認
オリジナルフォームから送信して、チャットワークへ通知がきましたら設定は完了です。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。 またチャットワークへの通知設定の設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：10,000円(税別)スケルトン状態からオリジナルフォームを作成する方法
■目的 テンプレートを使用せず、オリジナルフォームを作成する方法 ■セット所要時間 30分（※フォームのコンテンツ量によって変わります） ■セットの流れ オリジナルフォームの内容をECAIに送るために、HTML内に記載のルールがあります。 ルールのみを記載した、スケルトン状態のフォームをダウンロードし、 内容をご確認ください。 スケルトンフォーム＞ スケルトンフォームダウンロード＞ ■ファイル説明 ・index.html→入力ページ ・complete.html→送信完了ページ ・images→画像フォルダ ・liff-starter.js→LIFFを動かすプログラム（削除禁止） 編集にはindex.html、complete.html、imagesを使用します。 ■index.htmlについて ・入力フォームを設置するファイル ・<!-- 削除禁止 -->となっている部分はLIFFを動かすプログラムになるので削除しないでください。 ・質問の作り方 1つの質問に対して、inputのname属性「col_1_title」と「col_1」をセットでおきます。 数字は順番に読み込まれるので、連番にする必要があります。詳細はこちら＞
送信ボタンを押すと入力データが送信され、送信完了ページに遷移します。
■complete.htmlについて
・送信後の完了ページ
・送信後のメッセージを設定
・「閉じる」ボタンをクリックするとLIFFが閉じます。
■ファイルのアップロード
完成したファイルを圧縮し、ECAIにアップロードします。
フォームの圧縮方法について＞
オリジナルフォーム（LIFF）のアップロード方法＞
オリジナルフォームのテスト送信方法＞
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。「テストフォーム」を「本番フォーム」に上書きする方法
■目的 フォームの修正などで、テストフォームから本番フォームへアップロードする際などに使用します。 ■セット所要時間 ５分 ■セットの流れ （１）テストフォームをダウンロード オリジナルフォームのダウンロード方法はこちら＞ ⇓ （２）本番フォームへアップロード ※本番フォームへアップロードする前に、本番フォームのバックアップを必ずダウンロードしておいてください。 (1)でダウンロードしたZIPファイルをそのままアップロードします。 アップロードの方法はこちら＞ ⇓ （３）送信テストはLIFF-URLを使用し、スマホにて行ってください。 オリジナルフォームのテスト送信方法はこちら＞