やってみたろぐ

Line Messaging API で画像を送る場合、現在の仕様的に直リンクされたurlを指定しないとできないみたいだが、プライベートなものなどを誰でもアクセスできる場所にアップロードするのは気が引ける。

一方、Line Notifyでは画像アップロード機能が実装されたので、自前で何処かにアップロードする必要がなくなった。

Line Notifyは一方的に通知することしかできなさそうだけど、こちらからのメッセージにReplyさせることが出来れば便利そうな気がする。

Line Messaging APIとLine Notifyのアカウントを組み合わせることで、実現することができた。

順序としては

Line Messaging APIのアカウントを作成する。これはこちらからのメッセージを検知するためだけに使用する。
作成したLine Messaging APIのアカウントを含めたグループを作成する。
Line Notify で作成したグループに対するアクセストークンを取得する。
作成したグループにLine Notifyのアカウントを招待する。

３と４の順番を間違えるとエラーになったっぽい。

Google apps scriptでの実装はこちら

// LINE Notify の Access Tokenを設定 
var notify_access_token = "xxxxxxxxxxxxxxxxxxxxxxx";


// LINEから呼ばれる関数 
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if(event.type == "message"){
      lineNotify(event);
    }
 });
}
// LINE Notify での返信
function lineNotify(e) {
  var postData = {
    "message" : ((e.message.type=="text")? e.message.text : "Text以外")
  };
  var options = {
    "method" : "post",
    "headers" : {
      "Authorization" : "Bearer " + notify_access_token
    },
    "payload" : postData
  };

  UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}

エディタから公開→ウェブアプリケーションの導入をクリックし、

プロジェクトバージョン：新規作成（更新したいときも「新規作成」を選択）

次のユーザーとしてアプリケーションを実行:自分

アプリケーションにアクセスできるユーザー：全員（匿名ユーザーを含む）

を選択して出てきた現在のウェブアプリケーションの URLをコピーする。

その後、準備したLine Messaging API アカウントのLine DevelopersのEditを押してWebhook URLに貼り付け、verifyをクリックしSuccessと表示されることを確認する。

これでLine Notifyで返信することができた。

お正月といえば初詣。

初詣といえばおみくじ。

一度使ってみたかったLine messaging apiでおみくじを作成してみた。

Line messaging apiの設定

Lineのトークルームやグループで自動返信を行う、いわゆるbotを作ることができるツール。

プログラムに沿って特定の言葉に反応させたりすることができる。

Line messaging apiを使用するためにはビシネスアカウントを用意する必要があるため、Line Business Centerにアクセスしてログインする。

business.line.me

多分普段使っているアカウントで問題ない。

ログインしたあとはサービスのMessaging APIを選び、 Messaging APIを始めるをクリック。

事業者名は個人ならば本名でもなんでもいいのかな。

その後アカウント名に作成するbotの名前と画像をつける。

「おみくじくん」とつけた。

業種は個人を選択。

アカウントの作成ができたら、Line@Managerに行きアカウント設定のbot設定をクリック。

botの設定はWebhook送信を利用するにチェックする。

複数人のトークでも利用できるようにするため、Botのグループトーク参加も利用するにチェックする。

自動応答メッセージはbot利用しない。

友だち追加時あいさつはどっちでも良い。

Webhook送信が重要なようで、ここに設定したurlにプログラムを置くことでbotを作ることができるみたい。

Google apps scriptにbotのプログラムを作成

www.google.com

bot の作成にはサーバーを立てたりする必要があるのかと思いきや、Google apps scriptを使うことで簡単にプログラムが書ける。

Google apps scriptとはGoogle drive上で実装できるJavascriptの一種で、グーグルの各種サービスと連携できる。

Javascript触るの初めてだけど、このページを見ながらやってみた。

Googleアカウントだけで始めるLINEbot(Google Apps Script編) - Qiita

Google Apps Scriptを使ってLINE Messaging APIでオウム返しをする - Qiita

Google drive上で新規→その他→Google Apps Scriptを選択。（初回はアプリ追加からGoogle Apps Scriptを追加する必要があるみたい）

my functionのみがエディタに表示されているので、下記のように書き換える。

// LINE Developers の Channel Access Tokenを設定 
var channel_access_token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; 

// LINEから呼ばれる関数 
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if(event.type == "message"){
      lineReply(event);
    }
 });
}
// LINEへの返信 
function lineReply(e) {
  var repMes = replyMessage(e);
  var postData = {
    "replyToken" : e.replyToken,
    "messages" : repMes
  };
  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);
}
//返信する画像を準備
function replyMessage(e) {
  if(e.message.text=="おみくじ"){
    var rand = Math.floor( Math.random() * 4 ) +1;
    var imageurl;
    switch (rand) {
    case 1:
        //大吉
        imageurl="[image url 1]"
        break;
    case 2:
        //中吉
        imageurl="[image url 2]"
        break;
    case 3:
        //吉
        imageurl="[image url 3]"
        break;
    case 4:
        //凶
        imageurl="[image url 4]"
        break;    
  }  
  var repMes=[
            {
              "type" : "image",
              "originalContentUrl" : imageurl,
              "previewImageUrl" : imageurl              
            }
  ]; 
  return(repMes)
  }
};

必要なことは、

LINE Developers の Channel Access Tokenを設定
Webhook送信の設定
おみくじ画像の設定

である。

1は、Line Business CenterのアカウントリストからLine Developersをクリックし、Channel Access Tokenのissueを押して出てきたurlをコードの最初に貼り付ける。

2は、Google Apps Scriptのエディタから公開→ウェブアプリケーションの導入をクリックし、

プロジェクトバージョン：新規作成（更新したいときも「新規作成」を選択）

次のユーザーとしてアプリケーションを実行:自分

アプリケーションにアクセスできるユーザー：全員（匿名ユーザーを含む）

を選択して出てきた現在のウェブアプリケーションの URLをコピーする。

その後、Line DevelopersのEditを押してWebhook URLに貼り付け、verifyをクリックしSuccessと表示されることを確認する。

これで、LineとGoogle Apps Scriptを連携することができた。

３の画像の設定についてだが、Line messaging apiでは画像を送るために何処かにアップロードしたurlで指定してやる必要がある。

ドキュメントによるとjpeg形式で直接リンクされていて、なおかつurlがhttpではなくhttpsで始まってなければいけないようだ。

googleドライブに保存した画像ではだめなようで良い方法がわからなかったが、dropboxを使えば動かすことができた。

かわいいフリー素材集いらすとや

おみくじの画像はいらすとやのものを使用させてもらった。

一度、画像を保存し、少し縮小してjpgに変換したあとdropboxにアップロードする。

dropboxの共有ボタンをクリックしてリンクをコピーするを押すと

https://www.dropbox.com/s/xxxxxxxxxxxxxxxxx/omikuji_daikichi.jpg?dl=0

のような形式になっている。（xxxはディレクトリ的な英数字）

直接リンクするために

https://dl.dropboxusercontent.com/s/xxxxxxxxxxxxxxxxx/omikuji_daikichi.jpg

のように、書き直して上記のソースコードの[image url 1]に設定する。

大吉以外の画像についても同様に設定する。

完成品

作成したbotのアカウント設定画面に表示されているQRコードから友達になりトークルームやグループに招待したあと、「おみくじ」とつぶやくと、、、

f:id:gilmon:20170104223623p:plain

このように、乱数によって選択された占い結果を返信させることができた！

今回作成したbotのQRコードなので友だちに追加して動かしてみてね。

やってみたろぐ

Line Notify でReplyする方法

おみくじ LINE BOT のレシピ

Line messaging apiの設定

Google apps scriptにbotのプログラムを作成

完成品