Google Apps Script試行錯誤 Blog: LINE BOTで「LIFF」を使う(LIFF V1)

※LIFF V2は以下の手順とは異なります。

HtmlServiceでviewportを使いたい

で作ったアプリをLINE上に表示してみます

このように

作る手順

HtmlServiceでWebアプリ(画面に表示するページ)を作る [GASアプリ1]
チャネルを作る [LINE チャネル基本設定]
そのチャネルにGASアプリ1を登録してappIdを取得する [コマンドライン]
特定のテキストが投稿されたらappIdを返すアプリを作る [GASアプリ2]
webhookを有効にしてGASアプリ2のURLを設定する [LINE チャネル基本設定]

１．HtmlServiceでWebアプリ(ページ)を作成する

コード.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index")
                    .addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}

意訳

この機能がやること
指定したHTMLファイルを表示する
メタタグのviewportを追加する

index.html

<!DOCTYPE html>
<html>
  <body>
    <button id="bt">button</button>
  <script>
  document.getElementById("bt").onclick = bt_clicked;
  
  function bt_clicked(){
    alert("clicked!");
  }
  </script>
  </body>
</html>

意訳

 


ボタンを配置する

ボタンがクリックされたらbt_clickedを実行する

この機能がやること
clicked!という文字列をアラートに出す

コード.gsを書いて保存する

HTMLファイルを新規作成して

indexという名前にして

htmlを書いて保存する

ウェブアプリケーションとして導入...

バージョンの説明を入力：first version
次のユーザーとしてアプリケーションを実行：自分
アプリケーションにアクセスできるユーザー：全員（匿名ユーザーを含む）

現在のウェブアプリケーションのURLを控えておく

２．チャネルを作成する

LINE Developersコンソールにログインしてチャネルを作成して
チャネルアクセストークンを取得する
https://developers.line.me/ja/docs/liff/getting-started/

LINE BOTの作り方

３．２のチャネルに１で作ったWebアプリを登録する

これはコマンドラインで実行

https://engineering.linecorp.com/ja/blog/detail/299
で書かれているように以下のコマンドをターミナルやiTermなどで実行する

以下のコマンド内で設定する箇所

チャネルアクセストークン
SIZE_OF_LIFF（compact, tall, fullの画面サイズ）
WebアプリのURL

curl -XPOST \
-H "Authorization: Bearer チャネルアクセストークン" \
-H "Content-Type: application/json" \
-d '{
    "view": {
        "type": "SIZE_OF_LIFF",
        "url": "WebアプリのURL"
    }
}' \
https://api.line.me/liff/v1/apps

以下のような形でappIdが返って来たら登録完了
{"liffId":"appId"}

４．特定のテキストが投稿されたらappIdを返すアプリを作る

コード.gs

var CHANNEL_ACCESS_TOKEN = "TOKEN";
var appId = "ID";

function doPost(e) {
  var contents = e.postData.contents;
  var obj = JSON.parse(contents)
  var events = obj["events"];
  for(var i = 0; i < events.length; i++){
    if(events[i].type == "message"){
      reply_message(events[i]);
    }
  }
}

function reply_message(e) {
  if (e.message.type == "text") {
    if (e.message.text == "hello") {
  var postData = {
    "replyToken" : e.replyToken,
    "messages" : [
      {
        "type" : "text",
        "text" : appId
      }
    ]
  };
  }
  var options = {
    "method" : "post",
    "headers" : {
      "Content-Type" : "application/json",
      "Authorization" : "Bearer " + CHANNEL_ACCESS_TOKEN
    },
    "payload" : JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
  }
}

５．webhookを有効にしてGASアプリ2のURLを設定する

LINE BOTの作り方＞１０．「Use webhooks」の「編集ボタン」をクリックします

試してみる

hello と送るとappIdのリンクが返ってくる

リンクをクリックすると作ったHTMLがLINEの画面内に表示される

補足

LIFFで表示したHTML内のボタンを押したときなどにトーク画面へメッセージを返すこともできますが、以下のindex.htmlでは Could not authenticate LIFF app, Error が出てしまいました。

エラー内容でリファレンスを見るとこのように書かれている
ちょっとよくわからない

https://developers.line.biz/ja/reference/liff/

FirebaseのHostingではうまく行ったので、それは別途書こうと思います。

GASのHtmlServiceでエラーが出た index.html
（Developing a LIFF app を参考に開いたときにuserIdを表示して、ボタンを押したときにdisplayNameを返そうと試みた）

index.html

<!DOCTYPE html>
<html>
  <body>
   <button id="bt">button</button>
   
   <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
  
   <script>
     document.getElementById("bt").onclick = bt_clicked;

     liff.init(
       function(data) {
         const userId = data.context.userId;
         alert(userId)
       },
       function(err) {
         alert([err, err.stack])
       }
     );

     function bt_clicked() {
       liff.getProfile()
         .then(function(profile) {

           liff.sendMessages([{
               type: 'text',
               text: 'From:' + profile.displayName
             }])

             .then(function() {
               liff.closeWindow();
             })

             .catch(function(error) {
               window.alert('Error sending message: ' + error.message);
             });

         })
     }

  </script>
  </body>
</html>

参考

LINE Engineering Blog
https://engineering.linecorp.com/ja/blog/detail/299

LINE Developers
https://developers.line.me/ja/

LINE Front-end Framework
https://developers.line.me/ja/docs/liff/

Adding a LIFF app
https://developers.line.me/en/docs/liff/registering-liff-apps/

Getting started with LIFF
https://developers.line.me/en/docs/liff/getting-started/

Developing a LIFF app
https://developers.line.biz/en/docs/liff/developing-liff-apps/

Google Apps Script試行錯誤 Blog

Friday, August 31, 2018

LINE BOTで「LIFF」を使う(LIFF V1)