はじめに
LINE の Messaging API を使ってBotを作っていると、リッチメニュー や Flex message だけではカバーしきれないなーというパターンが出てきます。
例えば特定の入力フォームが欲しいようなとき、Flex message はユーザー入力を受け付けるコントロールを持っていませんし、通常のメッセージイベントだと、複数のメッセージを繋げるために、どこかしらで状態を管理しないといけません。
こんな面倒さを緩和してくれそうなのが 今回扱う LIFF アプリです。
LIFF アプリはLINEのトーク画面上で動くWebアプリです。ユーザーのLINEアカウント情報などを取得できるため、会員証など、ユーザーに合わせたコンテンツを提供できたり、Botに整形されたメッセージを返すことも可能です。
どうやって作ろう?
よく目にするのは、Herokuにアプリをデプロイしたり、AWS Amplify でアプリを構築するようなケースです。
いずれにしても環境作らないといけなそう・・・。面倒だ・・・。となって遠ざかっていました。
しかしよく見てみると、単にLIFFアプリのエンドポイントとして登録されたURLを開いているだけに見えます。
ということは、とりあえずリクエストに応じてHTMLを返せばよさそう。これなら Logic Apps/Power Automate でできるのでは??というのがきっかけです。
LIFFを作る際の LINE側の設定は 公式のドキュメントがさっぱりしていてわかりやすいかと。
Hello world の「ハ」
まずは何の変哲もないHTMLを返すフローを作ります。
ポイントは、トリガーのメソッドを「GET」にしているのと、レスポンスアクション (最後の) で、Content-type : text/html;charset=utf-8
にしていることくらいです。
ただ文字が表示されるだけのHTMLはこちら。
<!DOCTYPE html> <html> <head> <style> div {font-size:5.3em;} </style> </head> <body> <div>Hello <span id="name">world</span>.</div> </body> </html>
このフローのURLにアクセスしてみると、でかでかと文字が表示されます。
あとはLIFFのエンドポイントにこのフローのURLを設定するだけです。
トーク画面でURLを貼り付けて、タップしてみると
このようにでかでかと Hello worldが表示されます。
Hello world の 「ロ」
HTMLを色々変えてもいいですが、せっかくLIFFなので、SDKを使ってユーザーの情報を取得してみます。
LIFFのSDKを利用するためには、HTMLのヘッダー部分でSDKを読み込んでおきます。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <title>Automate LIFF</title> <meta charset="UTF-8"> <style> div {font-size:5.3em;} </style> </head> <body> <div>Hello <span id="name">world</span>.</div> </body> <script> // LIFFの初期化を行う liff.init({ // 自分のLIFF ID liffId: "ここにLIFF ID" }).then(() => { //ここから初期化後の処理を書いていく // ログインユーザーのLINEアカウントのプロフィールを取得 liff.getProfile().then( function(profile) { // ログインユーザーのプロフィール名 const name = profile.displayName // HTMLのworld部分を名前で書き換え document.querySelector("#name").innerText = name }) }); //ボタンを押したときの処理などを書く </script> </html>
加えて、body下のスクリプトタグで囲まれた部分で初期化処理を行っています。liff.init()
部分。
初期化処理のところでは、LIFF の ID が必要になります。Developers consoleからコピーしておきましょう。
初期化が終わったら、ユーザーのプロフィールを取得して、HTMLの "world" 部分を名前で置き換えています。
この初期化処理がすごく大事なので、わすれずに。先ほど同じURLにトーク画面からアクセスしてみると、今度は Hello "ユーザー名" と表示されることが分かります。
Hello World の 「オ」
折角 Logic Apps なので、HTMLをリクエスト事に変えられるという特性を活用してみます。
MSN Weather のアクションで今日の天気予報を取得して、サマリーを表示させてみます。
はい、これで毎日その日の天気を教えてくれる LIFF になりました。
さらに進めるために・・・
この後は入力フォームを作ったり、もっとWebサイトっぽくしていく作業です。
通常のサイト (表側) の作成と特に変わらないので、やりたいことに応じて調べて、スクリプトを書くなり、Logic Apps 上でHTMLを加工するなりの処理が必要になります。
おわり
今回はサーバーレスに Logic Apps だけで LIFF アプリを作ってみました。 まだ Hello worldとスターターキットを試しただけですが、HTMLを整形して返すだけなので非常に簡単です。
サーバー構築ムズカシソウ と思っていたあなたも、まずフローを作ってみてはいかがでしょうか?