LANG SELRCT

コードを書く場所についてはこちら

2018年8月31日金曜日

LINE BOTで「LIFF」を使う


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の画面内に表示される