LINE公式アカウントでカスタマイズされたやり取りを行うLINE Botを作成するには、HTTPSで通信可能なWebhook受信用URLが必要です。また、LINEミニアプリやLIFFアプリを作成する場合は、WebページやWebアプリをホスティングし、そのURLをLINEプラットフォームからアクセス可能な形で提供する必要があります。
enebularのフローエディタは、Node-REDをローカルにインストールした場合と異なり、インターネットでアクセス可能なURLが利用できます。そのため、インフラ環境を構築せずにLINE BotやLINEミニアプリ、LIFFアプリをローコードで実装して手軽に試すことができます。
しかし、フローエディタは連続して4時間しか利用できません。
そこで！enebularのクラウド実行環境を利用する方法を紹介します。
本記事では、enebularやLINEビジネスアカウントを取得済みであることが前提として書いてます。初めての方は、以下の記事を参考にしてください。
enebular
https://docs.enebular.com/ja/getstarted/introduction
LINEビジネスアカウント
https://www.lycbiz.com/jp/manual/OfficialAccountManager/new_account/?list=7171
クラウド実行環境
enebularでは、フローエディタやアセット管理などの開発機能だけではなく、クラウド実行環境というインフラ環境も用意されています。
無料の範囲でも月に24時間の動作時間が利用できるので、個人的に利用する範囲であれば十分にお試しができます。
(この24時間の動作時間というのは、例えばLINE Botの場合は、Webhookで呼び出されてからレスポンス返すまでの時間の合計です。）
クラウド実行環境の詳細は、以下のブログも参照ください
クラウド実行環境を使ったLIFFアプリの例
今回は、クラウド実行環境を使って、LIFFアプリを作る例を紹介します。
LINE Botについては、「花粉のピークは過ぎたかもしれないけど、enebularで花粉bot作ってみた」を参照ください
クラウド実行環境にLIFFアプリ用のWebページを構成し、それをLINEログインでLIFFアプリとして登録して、LINE公式アカウントから呼び出すという感じにします。
構成的には、下図のようになります。
クラウド実行環境の準備
無料のプランでは、プロジェクトごとに2つのクラウド実行環境を作成できます。
作成方法は、プロジェクトのダッシュボードのメニューから「クラウド実行環境」を開き、右下の「＋」ボタンをクリックします。
名称を適当に入力し「OK」をクリックします。
（名称は半角英数で入力可能で、自分で識別するための名称のため、後で認識できればデフォルトのままでもOKです。後から変更することもできます）
1,2分待つと作成が完了します。
今回は、HTTPのエンドポイントとして動作させるので、作成が完了したら、設定タブを開き、「設定を編集する」をクリックして、HTTPトリガーのスイッチをOFFからONにして、パスを入力します。
パスは、enebular全体でユニークでなければ行けないので、登録できない場合は、オリジナルの文字列を入力する等で対応してください。これが、LIFFアプリとして連携するURLとなります。
設定が終わったら、下の方にある「保存」ボタンをクリックします。
保存したらHTTPトリガーの箇所にあるコピーボタンからURLをコピーし、メモしておきます。
LIFFアプリの設定
LINE Developersのサイトでログインし、コンソールから新規もしくは既存のプロバイダーからLINEログインのチャンネルを作成します。
地域やチャンネル名を設定し、作成したらLIFFのタブから「追加」ボタンをクリックします。
LIFFアプリの初期設定として、エンドポイントURLの箇所にコピーしておいたクラウド実行環境のURLを記入します。
残りの必須の項目を入力したら、「追加」ボタンをクリックします。
追加されたLIFFアプリのLIFF IDとLIFF URLをコピーして、メモしておきます。
フローの作成
LIFFアプリの簡単な例として、LINE公式アカウントからLIFFアプリを開き、LINEのユーザー名を表示するページを試してみます。
フローは、次のように作りました。単純なHTMLをtemplateノードに記述してます。（HTMLはChatGPTに作ってもらってます）
HTTPサーバとしてのフローを作成する場合、入口としてhttp inノード、出口としてhttp responseノードを使用しますが、クラウド実行環境の場合は、http inノードの代わりにLCDP-inノード、http responseノードの代わりにLCDP-outノードを使用します。
下記は、フローのJSONです。コピーして読み込めば同じフローが使用できます。
[{"id":"16917b09a46aa393","type":"LCDP-in","z":"d79fac0155463365","name":"","x":270,"y":200,"wires":[["b6038804c90b27a3"]]},{"id":"b6038804c90b27a3","type":"template","z":"d79fac0155463365","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>LINE Display Name</title>\n <script src=\"https://static.line-scdn.net/liff/edge/2/sdk.js\"></script>\n</head>\n<body>\n <h1>ようこそ！</h1>\n <p id=\"greeting\">LINEの表示名を取得中です...</p>\n\n <script>\n // LIFFアプリIDを設定（LINE Developersで取得したLIFF IDを入力）\n const liffId = 'YOUR_LIFF_ID'; // ここに実際のLIFF IDを設定\n\n // LIFF初期化と表示名取得処理\n async function initLiffApp() {\n try {\n await liff.init({ liffId }); // LIFF初期化\n if (!liff.isLoggedIn()) {\n liff.login(); // ログインしていない場合はログインを促す\n } else {\n const profile = await liff.getProfile(); // プロフィール情報を取得\n const displayName = profile.displayName; // 表示名を取得\n document.getElementById('greeting').textContent = `こんにちは、${displayName}さん！`;\n }\n } catch (error) {\n console.error('LIFF初期化中にエラーが発生しました:', error);\n document.getElementById('greeting').textContent = 'エラーが発生しました。再読み込みしてください。';\n }\n }\n\n // ページが読み込まれたらLIFFを初期化\n initLiffApp();\n </script>\n</body>\n</html>\n","output":"str","x":420,"y":200,"wires":[["ff12dcfbaaa04bf1"]]},{"id":"ff12dcfbaaa04bf1","type":"change","z":"d79fac0155463365","name":"","rules":[{"p":"headers","t":"set","pt":"msg","to":"{\"Content-Type\":\"text/html; charset=UTF-8\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":200,"wires":[["933f5b9e1cfe9203"]]},{"id":"933f5b9e1cfe9203","type":"LCDP-out","z":"d79fac0155463365","name":"","x":790,"y":200,"wires":[]}]
enebularのプロジェクトを作成する際にenebular-privatenode-contrib-lcdp-toolkitを登録するチェックを外している場合は、Discover Assetsよりlcdp-toolkitをプロジェクトにインポートしてください。
また、このフローを利用する場合は、templateノードのプロパティを開いて、15行目のYOURE_LIFF_IDの部分をメモしておいたLIFFアプリの IDに書き換えてください。
フローのデプロイ
フローの準備ができたらクラウド実行環境にデプロイします。
作成したクラウド実行環境の概要タブから「デプロイ」ボタンをクリックします。
作成したフローを選択して、「デプロイ」ボタンをクリックします。
デプロイには少し時間がかかるので、先にLINE公式アカウントからLIFFアプリを開けるように設定します。
LINE公式アカウントの設定
LINE公式アカウントの管理画面にサインインして、新規もしくは既存のLINE公式アカウントを開きます。
いくつか方法がありますが、今回はリッチメニューからLIFFアプリを開くように設定します。
メニューから「リッチメニュー」をクリックし、「リッチメニューを作成」ボタンをクリックします。
基本設定とコンテンツ設定を行い、アクションは「タイプ」をリンクにしてから、URLとしてメモしておいたLIFF URLを記載します
設定が終わったら「保存」ボタンをクリックします。
動作確認
一通りの設定が終わったら、設定したLINE公式アカウントのリッチメニューからLIFFアプリを開きます。
LINEの表示ユーザー名が表示されれば、成功です。
LINEアプリから開くことで認証が自動的に行われ、ログイン操作をせずにLINEの表示ユーザー名を取得して表示されたことがわかります。
（認証の画面は初回のみ開きます）
無料プランの場合は、クラウド実行環境のメモリ量に制約があり、初回起動に時間がかかります。連続して開く場合は問題ないですが、時間が空くと開放されます。
そのため、最初や間を開けてLIFFアプリを開く時に10秒ほど時間がかかります。