Apps Script公式リファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2018年8月31日金曜日

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


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



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

このように



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



1.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を控えておく


2.チャネルを作成する 


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


LINE BOTの作り方


3.2のチャネルに1で作った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"}

4.特定のテキストが投稿されたら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);
  }
}


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


LINE BOTの作り方>10.「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/

Latest post

Google Apps Scriptの障害時はIssueTrackerを見てみる - Incidents for Apps Script are reported on Issue Tracker

IssueTracker > Apps Script issues https://issuetracker.google.com/savedsearches/566234 Google Apps Scriptの障害時は IssueTracker に課題が上がっていることが...