ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。プログラム&ロボット大好きなポンコツが日々の記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

お金をかけずにLINEのMessaging APIの投稿(push)と返信(replay)を試してみる。

無料で使えるLINEのボット、これを今回は無料で扱えるGoogleのサービスを利用して、誰でもお金を全くかけずに簡単にボットを作れるので、今回はこれについて紹介したいと思います。

この記事を最後まで読めば、きっと誰でも簡単にボットが作れるようになるはずです。

今回使用するものはこちら

  • Messaging API・・・LINE BotのAPIの種類で、こちらを利用することで投稿・返信を行うことができる
  • Google Apps Script・・・Googleアカウントを持っている人であれば誰でも簡単に利用できるサーバのようなもの。はじめての人にはピンと来ないかもしれないが、この記事で使い方をちゃんと書いてあります。GASと略します。

 

LINE Botのドキュメントはこちらになります↓ここのMessaging APIを利用します。

https://developers.line.me/ja/docs/

 

 

ボットのアカウントを作成する

Messaging APIのページにアクセス

こちらのページにアクセスする

https://developers.line.me/ja/services/messaging-api/

そして、今すぐはじめようをクリックする

 

新規channel作成

プロバイダの選択

プロバイダー選択で自分のLINEアカウントを選択して次のページをクリック。

 

アプリの情報の入力

アプリ名などを入力します。

今回は以下のように入力しました。

アプリ名:パッチール

アプリ説明:ぷちパンダポケモン

プラン:Developer Trial

大業種:個人

小業種:個人(IT・コンピュータ)

メールアドレス:秘密

 

入力が終わるといろいろな確認画面が出るので、しっかり確認して次に進んでいきましょう。

作成が完了すると以下のようにボットが作成できます。

上の画像でいう「→」のボタンをクリックしてみましょう。

作成したChannel(ボット)の設定画面が開かれると思います。

 

テキトーにアイコンを設定しておくと愛着が湧くかと思いますので、設定しておきましょう。

 

メッセージ送受信設定のところが以下のようになっていると思いますので、アクセストークンを再発行してください。

再発行をクリックするとアクセストークンが発行されるので、それをメモしておきましょう。

また、Botのグループトーク参加を利用するに設定しておくと、グループトークでも利用できるようになるので、設定しておくことをおすすめしておきます。

Webhookの設定は後で設定するので今はそのままにしておきましょう。

 

設定画面の一番下にLINEアプリへのQRコードがあるので、そのQRコードを利用してLINEアプリから友達登録をしてみましょう

友達登録ができるとこのように表示されるかと思います。

 

 

※この設定画面はこの後も使うので開いたままにしておいてください。

 

GAS(Google Apps Script)でスクリプトを書く

GoogleドライブからGASのプロジェクトを作成する

Googleドライブ上で右クリックしてGoogle Apps Scriptを選択します。

が、きっとはじめての方は表示されないと思うので、その下の「+アプリを追加」を選択してGoogle Apps Scriptを追加しましょう。

 

// line developersに書いてあるChannel Access Token
var access_token = "*****"
// pushしたいときに送る先のuser_id or group_idを指定する
var to = "***********"
// postされたログを残すスプレッドシートのid
var spreadsheet_id = "*****"

/**
 * 指定のuser_idにpushをする
 */
function push(text) {
  var url = "https://api.line.me/v2/bot/message/push";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var postData = {
    "to" : to,
    "messages" : [
      {
        'type':'text',
        'text':text,
      }
    ]
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  return UrlFetchApp.fetch(url, options);
}

/**
 * reply_tokenを使ってreplyする
 */
function reply(data) {
  var url = "https://api.line.me/v2/bot/message/reply";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var postData = {
    "replyToken" : data.events[0].replyToken,
    "messages" : [
      {
        'type':'text',
        'text':data.events[0].message.text + 'ぱち',
      }
    ]
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  return UrlFetchApp.fetch(url, options);
}

/**
 * postされたときの処理
 */
function doPost(e) {
  var json = JSON.parse(e.postData.contents);
  var data = SpreadsheetApp.openById(spreadsheet_id).getSheetByName('log').getRange(1, 1).setValue(json.events);

  reply(json);
}

/**
 * pushをしてみる
 */
function test() {
  push('ぱちぱち');
}

上のスクリプトを貼り付けてあげます。

2行目のaccess_tokenの*****のところに、先程メモしたアクセストークンを貼り付けます。

 

ログ出力先用のスプレッドシートの作成

GASのログの出力先として、自分はよくスプレッドシートを使うことが多いです。なので、今回もスプレッドシートを使うことにします。

Googleドライブからスプレッドシートを新たに作成します。

スプレッドシートを開くとデフォルトでシート名が「シート1」になっていると思うので、わかりやすく「log」というシート名に変更しましょう。

↓シート1をlogにリネーム

スプレッドシートのidをメモする

スプレッドシートのIDをメモしましょう。

IDはスプレッドシートを開いているURLに書いてありますので、そのままURLを確認してみましょう。

https://docs.google.com/spreadsheets/d/[スプレッドシートのID]/edit#gid=0

ここの[スプレッドシートのID]と書かれているところの文字列をコピーしましょう。

スプレッドシートのidをスクリプトに貼り付ける

先程のGASのスクリプトの6行目の*****のところにidを貼り付けます。

 

GASをウェブアプリケーションとして公開する

上のメニューから「ウェブアプリケーションとして導入...」をクリック

以下のように入力して導入をクリックします。

ここで気をつけるのが、

  • 次のユーザとしてアプリケーションを実行自分にする
  • アプリケーションにアクセスできるユーザ全員(匿名ユーザーを含む)にする

導入をクリックすると、初回は以下のような承認の許可の画面が表示されるので許可を確認をクリックします。

すると以下のような「このアプリは確認されていません」というアラートっぽい画面が表示されます。

このアプリは、Googleによる確認が済んでいません。よく知っている信頼できるデベロッパーの場合に限り実行してください。 デベロッパーの場合は、この画面が表示されないようにするには確認リクエストを送信してください。ヘルプ

と出るので、下の方の詳細をクリックします。

すると、以下のように詳細の下に表示されるので、無題のプロジェクト(安全ではないページ)に移動をクリックします。

すると以下のような画面が表示されると思うので、許可をクリックしてあげます。

すると、やっとウェブアプリケーションとして導入が完了して、以下のような画面が表示されると思います。

この画面の現在のウェブアプリケーションのURLをコピーしましょう。

 

LINE BotのWebhookの設定をする。

またLINEの設定画面に戻り、メッセージ送受信設定の項目にいきます。

先程入力していなかった項目をここで設定しましょう。

  • Webhookの送信利用するに設定する
  • Webhook URLに先程ウェブアプリケーションの導入時にコピーしたURLを貼り付けます。このとき、https://は既に右側にかかれているので、その部分を取り除き入力する必要があります。

 

LINE Botの返信(reply)を試してみよう

ここまでの手順で実は既に返信ができるようになりました。

なので、ボットに対してメッセージを送ってみましょう。

 

今回作成したスクリプトは上の画像のようなオウム返しをするものになっています。

が、なんか不要なメッセージを投稿していますね。

メッセージありがとうございます􀄃􀄄きゅん� 申し訳ございませんが、このアカウントでは個別のご返信ができないのです􀄃􀄑うーん� 次の配信をお楽しみに􀄃􀄭きらきら�

これを直すために、LINE@機能の利用の項目を修正してあげます。

自動応答メッセージ利用しないに設定してあげましょう。

これでもう一度メッセージを送ってみましょう。

このように、綺麗に投稿されるようになりましたね。

今回のスクリプトで語尾に「ぱち」とつけていますが、スクリプトの52行目にその文字が書いてあるのでここを修正してあげると修正できます。

 

LINE Botの投稿(push)を試してみよう

次に投稿(push)をしてみましょう。投稿というのは、ユーザの投稿タイミングに関係なくボットのタイミングで投稿することができます。

ただ、そのときに投稿先を指定する必要があるため、その投稿先のidを知る必要があります。

先程作成したスプレッドシートを開いてみましょう。

A1になにやら変な文字列が書かれているかと思います。これはLINEからWebhookを叩かれるときにpostされるデータが書かれていますので、前回の投稿などのアクションのデータが書かれています。

 {replyToken=ef30099e65894d5db903c7048a7a78aa, source={type=user, userId=U*************}, type=message, message={id=8058786310807, text=こんにちは, type=text}, timestamp=1.528010487851E12} 

ここのuserId=U*************を見てみましょう。

こちらが、先程こんにちはを投稿したチャットのIDになりますので、こちらのIDを指定して投稿先を指定してあげましょう。

これをコピーして、スクリプトの4行目の*******に貼り付けてあげます。

 

実行するメソッドをtestにしてあげます。このメソッドが投稿する処理を実行してくれます。

そして実行ボタン(三角のボタン)を押します。

すると、以下のようにボットからメッセージが届きます。

このように、投稿もすることができるようになりました888888

今回指定したidはグループチャットのidも指定することができるので、それを設定してみてください。グループチャットでボットが騒いでくれます。まるでポケモンのパッチールがさわぐという技を使っているような感じですね。

 

最後に

今回はユーザが投稿した文字に対して返信を行う(オウム返しの語尾にぱちをつける)replayのapiも使えるようになったし、ボットのタイミングで投稿できるpushのapiも使えるようになりました。

この2つを使いこなせると、いろんなボットが作れるようになるし、応用するとさまざまなボットが作れるようになるので、いろんなボットを作ってみましょう。

自分の場合は、例えばEvernoteにメモを残すボットを作ったりもしました。https://blog.pnkts.net/2018/05/03/line-evernote-image-memo-bot/

ぜひ、みなさんもいろんなボットを作ってより生活が楽になるようにしてみましょう。