専属秘書を作ろう！ - #11 予定を作成する② - フォームに対応する

前回は、予定を作成するために "入力フォーム" が必要であり、LIFF という仕組みを使用して入力フォームを作成する、というお話をしました。

LIFF は、外部のシステムと連携するためには必須の機能となりますので、少し難しくはありますが、知っておいて便利な機能ですね。

さて、今回は、作成した入力フォームを LINE に紐づけていきます。

では、始めていきましょう！

⬇️ 過去の note をまだご覧になっていない方はこちら ⬇️

専属秘書みどりこ｜Mr.Green＠ITxマーケティング｜やさしく・ふかく・おもしろく｜note

---

機能を追加する前に

機能を追加していく前に、手順を整理しておきましょう。

1. LINEログイン のチャネルを作成する

2. LIFF アプリを登録する

3. LIFF ID を WEBページの liff.init() 関数の ID として設定する

4. LIFF URL をリッチメニューに設定する

LINE Developers コンソールや Firebase など、いったりきたりすることになるので少し難しいかもしれませんが、ついてきてくださいね。

LIFFアプリの設定

LINEログインのチャネルを作成する

まず、LINE ログインのチャネルについてご説明が必要ですね。

LINE ログインチャネル
LINEログインチャネルは、アプリと LINEプラットフォームを接続するための通信路です。
そのため、LINEログインチャネルには、LIFFアプリ を追加できるようになっています。
勝手にユーザー情報を送受信するわけにはいきませんので、同意画面を表示して同意を得てから動作するように設計されています。

LINEログインのチャネルを作成する方法は、ここでは割愛しますが、過去に Messsaging API チャネルの作成方法についての note がありますので、ご参考までにご覧ください。

作成した LINEログインチャネルは以下です。

LIFFアプリを登録する

LINEログインには、LIFFアプリを登録する箇所があります。
※「LIFF」のタブです。

ここで、LIFFアプリを追加します。

LIFFアプリ名やサイズなどは、自由に決めても問題ありません。

ここでは、"エンドポイントURL" が重要です。

エンドポイントURL には、Firebase Hosting で作成した WEBページの URL を入力します。

どちらかの URL を入力してください。

LIFFアプリが登録できると、以下のように LIFF ID と LIFF URL が生成されます。

LIFF ID を WEBページの liff.init()関数の ID として設定する

作成した WEBページ を LIFFアプリとして機能させるためには、LIFF SDK を使用して動作するようにしなければなりません。

処理方法は、ご提供しているファイルで確認頂きたいので詳細説明は割愛しますが、ここでは liff.init()関数 のみ説明します。

liff.init({
  liffId: 'xxxxx-xxxxxx',
})
.then(() => {
  // 正常時処理
})
.catch((err) => {
  console.log(err);
});

liff.init()関数で初期化を行う際に必要となるのが LIFF ID です。
liffId の "xxxxx-xxxxx" の箇所に LIFF ID を入力してください。

この ID 部分を置き換えれば動作するように作っていますので、安心してくださいね。

動作確認

最終的にはリッチメニューから呼び出し、カレンダーに登録する動きになりますが、まずはここまで出来た段階でチェックしておきましょう。

リンクをクリックしないといけませんので、LINE公式アカウントから URL を送りましょう。

このリンクをクリックすると、フォームが開きます。

前回作成したフォームが LINE ブラウザ上で起動しましたね。
バッチリです👍

サンプルデータを入力してみましょう。

フォームには、LIFF SDK が組み込まれていますので、フォームに入力されたデータを整形して LINE に送信します。

現時点では、どのように処理するか決めていませんので、「予定名」「開始日時」「終了日時」「予定詳細」の順番に送信していますが、きちんと入力データが出力されているようですね。

動作確認としてはこれで OK です。

まとめ

今回は、前回作成した LIFF アプリを LINE 上で動作するようにしました。

いかがでしたでしょうか。

入力フォームを使用してやりとりが出来るようになりましたので、アンケートや必要事項の入力など使い方の幅が広がりますね。

次回は、とうとうカレンダーへの登録になります。
楽しみですね✨

もしわからないことがありましたら、お気軽に LINE公式アカウント でご質問ください。

何でも答えるよ～

今回は、LIFF アプリを LINE 上で動作するようにしただけですので、ご提供ファイルはありません。
次回の note をお待ちください。

⬇️LINE公式アカウントに登録してご連絡ください⬇️

ビジネスが加速するよ～