技術を磨くだいぱんまん

散歩とインターネットが大好きなシステムエンジニア。暮らし、おでかけ、テクノロジーについて書いています。

星占いLINE BotをGoogle Apps Scriptを使って簡単サーバレス開発してみた

f:id:donchan922:20170916135226j:plain

こんにちは、だいぱんまん(@donchan922)です。

以前作ったRaspberry Pi星占いについて、先日妻から追加要望が出てきました。

LINEで星座を入力したら占い結果が返ってくるようにして

いわゆるチャットボットの仕組みを実現しろということですね。はい、やってみます。

LINEのチャットボット機能について調べてみると、Google Apps Scriptを使うとサーバレスで簡単に開発できるみたいなのでさっそくやってみました。

完成形がこちら

f:id:donchan922:20170916134714g:plain
LINEで星座を入力するとその日の星占い結果を返信してくれます。興味のある方はこのBotをLINEで友達登録して実際に試してみてください。


友だち追加

以下の記事のおかげで1時間程度で実装できました。とても参考になりました。ありがとうございます!

LINE Botをサーバーレスで開発!Google Apps ScriptとLINE Messaging APIを使ってチャットボットを作ってみた - pixiv inside

仕組みについて

f:id:donchan922:20170916133148j:plain
使用したサービスは以下の3つです。

LINE Messaging APIは、LINEのBotを開発できるサービスです。

Google Apps Scriptは、ブラウザ上で操作できるWebサーバのようなものです。LINE Messaging APIから送られるテキストを受け、その内容をもとに星占いAPIを呼び出し、その結果をLINE側に返します。両サービスの橋渡し役を担っています。自前でサーバを用意しなくていいのが良いですね。

星占いAPIはその名の通り、占い結果を取得できるサービスです。

実装方法

LINE Messaging APIの利用登録

  • LINE Businessアカウントの作成
  • Messaging API Developer Trialに登録
  • LINE@MANAGERの設定

LINE Messaging APIの利用登録(上記事項)は以下記事が参考になりました。Channel Access Tokenはあとで使うのでメモしておきます。Webhook URLには後でGoogle Apps Script(サーバ)のURLを設定します。

LINE BOTの作り方を世界一わかりやすく解説(1)【アカウント準備編】 - Qiita

Google Apps Scriptの実装

Googleドライブにアクセスし、「新規」⇒「Google Apps Script」を選択します(選択肢に「Google Apps Script」がない場合は、「その他」⇒「アプリを追加」から「Google Apps Script」を追加します)。


f:id:donchan922:20170916175427p:plain
これがGoogle Apps Scriptの画面です。ここにプログラムを書いていきます。言語はjavaScriptです。以下コードをそのままコピペしてください。YOUR_CHANNEL_ACCESS_TOKENは、先ほどメモしたChannel Access Tokenの値と置き換えてください。

var CHANNEL_ACCESS_TOKEN = 'YOUR_CHANNEL_ACCESS_TOKEN';

function doPost(e) {
  // LINEに返信する際のトークン
  var reply_token= JSON.parse(e.postData.contents).events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }
  // LINEから受け取ったメッセージ
  var user_message = JSON.parse(e.postData.contents).events[0].message.text;
  // LINEに返信する際のメッセージ
  var reply_messages = '星座は漢字で入力してね';

  // 本日日付取得
  var date = new Date();
  var year = date.getFullYear();
  var month = ('0' + date.getMonth()).slice(-2);
  var day = ('0' + date.getDate()).slice(-2);  
  var today = year + '/' + month + '/' + day;

  // 占いAPIのエンドポイント
  var url = 'http://api.jugemkey.jp/api/horoscope/free/' + today;

  // 占いAPIを実行
  var response = UrlFetchApp.fetch(url);
  var json = JSON.parse(response);
  var horoscope = json['horoscope'][today];

  // 占いメッセージ生成
  for (var i in horoscope) {
    if (horoscope[i]['sign'] == user_message) {
      var reply_messages = '今日の' + horoscope[i]['sign'] + 'の運勢は' + horoscope[i]['rank'] + '位です。'
        + horoscope[i]['content']
        + 'ラッキーアイテムは' + horoscope[i]['item'] + '、'
        + 'ラッキーカラーは' + horoscope[i]['color'] + 'です。';
    }
  }

  // LINEにメッセージを返却する
  var url = 'https://api.line.me/v2/bot/message/reply';
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': [{
        'type': 'text',
        'text': reply_messages,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

あとはこれをWebサーバとして公開します。メニューの「公開」⇒「ウェブアプリケーションとして導入」を選択し、以下設定で公開します。

  • 現在のウェブ アプリケーションの URL:そのまま
  • プロジェクト バージョン:新規作成
  • 次のユーザーとしてアプリケーションを実行:自分
  • アプリケーションにアクセスできるユーザー:全員(匿名ユーザーを含む)

f:id:donchan922:20170916183555p:plain
最後に「現在のウェブ アプリケーションの URL」をLINE Messaging APIのWebhook URLに設定します。これでLINE Messaging APIとGoogle Apps Scriptの連携は完了です。あとはBotとの会話で星座を入力すると、その日の星占い結果が返ってきます。

まとめ

LINEのチャットボット、驚くほど簡単に実装できてしまいました(先人の方々のおかげです!)。サーバレスで作れるのでアイデア次第で誰でも面白そうなものがつくれそうですね。天気予報のAPIや全自動会話のAPIを使ってみるのも良さそうです。

妻とあーだこーだいいながら開発するの楽しかったです。