【GAS】LINE Front-end FrameworkをGASで作ったWebアプリと連携させたらうまくいかなかった話【LIFF】

f:id:makimakimakino:20190114224927p:plain
GASで作ったサーバーレスWebアプリをLIFFから呼び出してみました。結論からいうとうまく動きませんでした。

LIFFとは
アプリへLIFFの実装
アプリをチャットボットに登録
リッチメニューとの紐づけ
動作検証
まとめ

LIFFとは

LIFF(LINE Front-end Framework)はLINEアプリのトークルーム内で動作するウェブアプリの実装を可能にするプラットフォームです。

LIFFって何がいいの？というところは

LIFFのメリット

LINEのアプリ内ブラウザでWebアプリを開くので、いちいちLINEとアプリを切り替える手間が無い。
LINEのコンテキスト(ユーザーIdやグループId、トークルームidなど)がWebアプリで扱えるので、ユーザーに紐付いたサービスが提供できる。
ユーザーの代わりにWebアプリからLINEにメッセージが送れるので、通知やログの連携が簡単。
sdkが用意されているうえに、特別な開発ツールなどを使う必要もないため、実装がめちゃくちゃ簡単。

みたいなところがあって、自分で作ったアプリとLINEの連携がとっても簡単にできるという嬉しいサービスのようです。

アプリへLIFFの実装

早速試してみたいと思います。

まずは、LIFFで呼び出すWebアプリケーションを作ります。

WebアプリはGAS(Google Apps Script)で作ります。

今回作るアプリはシンプルにLIFFに表示されたアプリからテキストを入力して、LINEのトークルームにユーザーidとアプリから入力された内容を投稿する、というものにします。

アプリ作成に必要なものはGoogleアカウントとブラウザのみです。

GASで下記ファイルをそれぞれ編集します。

コードはLINEのチュートリアルを参考にしました。

developers.line.biz

(確かDevelopersサイトを開くにはアカウントを作る必要があったかも？)

GASプロジェクトの作り方は【GAS】Google Apps Scriptとは - だって楽したいじゃんか！を参照してください。

コード.gs

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('index');
  return template.evaluate().setTitle('GAS+LIFF').addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0")
}

エンドポイントにGetでアクセスされたらindex.htmlを生成し、レスポンスとして返します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <input id="msg" type="text" placeholder="送信メッセージを入力してください。"/>
      <button onclick="alertMessage();">送信</button>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

html内にはテキストボックスとボタンを配置します。ボタンが押されたらjs.htmlのalertMessage関数を呼び出します。

js.html

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<script>
var userId="";
window.onload = function (e) {
  alert("onload");
  liff.init(
    data => {
      // Now you can call LIFF API
      alert(data);
      userId = data.context.userId;
      alert(data);
    },
    err => {
      // LIFF initialization failed
      alert(err);
    }
  );
};

function alertMessage(){
    var msg = document.getElementById("msg").value;
    alert(userId + " : " + msg);  
    liff.sendMessages([
      {
        type:'text',
        text:userId + " : " + msg
  　 }
      ]);
}
</script>