前回は、LIFF アプリとして作成した入力フォームを LINE 上で動作確認するところまで実施しました。

入力データが受け取れるようになったことで、様々なデータを特定のフォーマット(形式)で処理できるようになりました。

さて、今回は実際に動くようにしていきましょう。

予定作成も大詰めです👍

楽しんでいきましょう✨

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

機能を追加する前に

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

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

2. LIFF アプリを登録する(済)

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

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

前回の "#11 予定を作成する② - フォームに対応する" で、1～3 まで完了していますので、4 の対応になります。

スプレッドシートを変更する

機能(D列)にURIアクションを追加

リッチメニューのアクションの一つに "URIアクション" があります。

このアクションを使うと、LINE内のブラウザで URI プロパティの URI が開く、という動作をしますが、ここでは WEBアプリしか使用しませんので、いったん D列 の名前は聞き覚えのある "URL" としています。

これは、スプレッドシートの機能ですので詳細は割愛しますが、ここで URL を選択できるようにします。

ここで、URL は聞いたことあるけど、URI ってなに？？
という疑問が出てきそうですね。

"URI" と "URL" は似ていますが、実は少し違います。
そこで、本筋からは少しズレますが、URI と URL について説明しておきましょう。

URL の L は Locator＝場所 のことを指します。
名前を表す URN というものもあり、URL を含めて URI と呼びます。
つまり、URI は URL の上位概念ということになります。

では、WEBページのアドレスはどうか？

厳密には URL ですが、URI の一部でもありますので、どちらの表記でも問題なし、ということになります。

では、なぜ URIアクション と呼ばれているかというと、URIアクションでは は WEBページを開くだけではなく、電話もできるためです。

つまり、使用するのが URL (=場所を示す) だけではないということですね。

念のため、説明しましたが、
難しかったら、このパートは飛ばしてくださいね💦

話を戻して、どちらにしても同じ意味を持つならなじみのある URL にしておこう、ということです。

また、WEBページのURL (ここでは、LIFFアプリの URL) は、ユーザーが登録できるようにしなければなりません。

そこで、K列 の "データ" を "データ/URL" として使用するようにします。

プログラムに URIアクション対応を追加

機能によって設定項目を切り替えている箇所に "URIアクション" を追加します。

action = {
  "type": "uri",
  "label": "URLを開く",
  "uri": allValues[i+j][RICHMENU_DATA]
};

uriアクションでは、指定した URI を開きます。
ここに、K列 に記載した URL を登録します。

これでエリアをタップすると、作成した入力フォームが表示されるようになります。

正式な設定内容に変更する

実際に使用できるように正しい内容に変更しましょう。

リッチメニュー画像の変更

リッチメニューA の画像内容を以下に変更します。

スプレッドシートの設定内容の変更

スプレッドシートの内容を以下のように変更します。

すでにプログラムは作成していますので、内容を変更してメニューから設定すれば LINE に反映されます。

"予定を登録する" をタップすると、LIFFアプリが開きます。

ちゃんと開きましたね。
では、データも入れてみましょう。

"登録する" ボタンをタップすると・・・

うん、うん。
バッチリですね。
ちゃんとデータが送れています👍

スプレッドシート側も正常に受信できていますね。

まとめ

今回は、前回作成した LIFFアプリを LINE上で動作するところまで実施しました。

必要な情報は取得できましたので、いよいよ次回はカレンダーへの登録です。
"予定登録" の最終回になりますね。

楽しみにおまちください。

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

今回のご提供ファイルのキーワードは【専属秘書みどりこV8】です。

LINE公式アカウントにご登録の上、キーワードを送信してくださいね。

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