f:id:mofumofu_dance:20210525161112p:plain

はじめに

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側の設定は公式のドキュメントがさっぱりしていてわかりやすいかと。

developers.line.biz

Hello world の「ハ」

まずは何の変哲もないHTMLを返すフローを作ります。

ポイントは、トリガーのメソッドを「GET」にしているのと、レスポンスアクション (最後の) で、Content-type : text/html;charset=utf-8にしていることくらいです。

f:id:mofumofu_dance:20210525153220p:plain

ただ文字が表示されるだけの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にアクセスしてみると、でかでかと文字が表示されます。

f:id:mofumofu_dance:20210525153625p:plain

あとはLIFFのエンドポイントにこのフローのURLを設定するだけです。

f:id:mofumofu_dance:20210525154108p:plain

トーク画面でURLを貼り付けて、タップしてみると

f:id:mofumofu_dance:20210525160624p:plain

このようにでかでかと 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>