AizuHack LINEBot勉強会 Extra
資料一覧
LINEBotとは
AizuHack LINEBot勉強会 Vol.1
AizuHack LINEBot勉強会 Vol.2
AizuHack LINEBot勉強会 Extra（本記事）
はじめに
こんにちは、会津大学学部一年のしんぶんぶんです。
本記事はAizuHackのLINEBot勉強会 Extraの資料になります。
今回は、より高度なBotが作れるようになる技術を学びます。
今回やる技術を全て習得すれば、理論上はだいたいどんなBotでも作れるようになります。
具体的には以下の技術について学びます。
axiosを使った外部APIとの通信
SheetDBを使った簡易データベース
LINE Front-end Framework（LIFF）の使い方
eslintについて
外部APIとの通信
第2回まではLINE Messaging API内で完結することだけをやってきましたが、外部のAPIと連携することで作れるものの幅が圧倒的に広がります。
今回は、ちょっとまえ話題になった気象庁のAPIを使用して天気予報を取得してみます。
今回使用するAPIのレスポンスはこちらから確認できます。
APIでよく使うメソッドとしてGET, POST, PUT, DELETEの4つがあります。
GETはデータを取得する時、POSTはデータを送信する時、PUTはデータを更新・追加するとき、DELETEはデータを削除するときに使用します。
今回はデータを取得するため、GETを使います。
HTTPメソッドに関する解説はこちらの記事などがわかりやすいかと思います。
Botのソースコードのディレクトリに移動して、npm i axiosを実行する
message.jsの一番上の行にconst axios = require('axios');と追記
textEvent関数のswitch文に以下のcaseを追加
npx vercel deploy --prodでコードをサーバーにデプロイ
// 天気予報というメッセージが送られてきた時
case '天気予報': {
// axiosを使ってAPIにGETリクエストを送り、レスポンスのdataを変数resに格納
const res = (await axios.get('https://www.jma.go.jp/bosai/forecast/data/forecast/070000.json')).data;
// 返信するメッセージを作成
message = {
type: 'text',
text: `【天気予報】
${res[0].timeSeries[0].timeDefines[0]}: ${res[0].timeSeries[0].areas[2].weathers[0]}
${res[0].timeSeries[0].timeDefines[1]}: ${res[0].timeSeries[0].areas[2].weathers[1]}
${res[0].timeSeries[0].timeDefines[2]}: ${res[0].timeSeries[0].areas[2].weathers[2]}
`,
};
break;
}
これで完成です！Botに天気予報と送ったら天気予報が返ってくるはずです。
SheetDBの使い方
Botの会話にコンテキスト（文脈）を持たせたり、データを保持するにはデータベースを使う必要があります。
今回はGoogleスプレッドシートを簡易的なデータベースとして使える、SheetDBの使い方を解説します。
詳しい使い方は公式ドキュメントに掲載されているので、興味ある方はぜひご覧ください。
※無料枠は2APIまでで月500アクセスしか使用できません。もっとヘビーに使用したい際は、Google Apps Scriptを使ってAPIを自作してあげる必要があります。
使ってみよう
では実際に使ってみましょう。以下のようなシステムを作ります。
メモ開始と送ったらデータ保存モードになる
データ保存モード中に送ったメッセージがDBに保存される
メモと送ったらメモが表示される
Googleスプレッドシートにアクセスして、新しいスプレッドシートを作成します
スプレッドシート名を適当なものに変更します
SheetDBにアクセスしてGoogleアカウントでログインします
ホーム画面が表示されるので、CREATE NEWを選択します
先ほど作成したスプレッドシートのURLをコピーしてGoogle Spreadsheet URLに貼り付けます
Column namesに、userId, context, messageと入力してADD COLUMN NAMESを押します
API情報が表示されるので、スプレッドシートのURLのしたに表示されているエンドポイントURL（https://sheetdb.io/api/v1/XXXXXXXXXX）をコピーしておきます
message.jsのconst axios = require('axios');の下にconst dbAPI = 'sheetDBのエンドポイント';と追記します（sheetDBのエンドポイントは先ほどコピーしたものに変更してください）
textEvent関数内の一番上の行に以下のコードを追記します
// ユーザーIDを取得
const { userId } = event.source;
// DBからユーザーのデータを取得
const data = (await axios.get(`${dbAPI}/search?userId=${userId}`)).data[0];
// もしそのユーザーのデータが存在する場合
if (data) {
// もしcontextがmemoModeだったら
if (data.context === 'memoMode') {
// DBへメッセージのデータを追加してcontextを空にする
await axios.put(`${dbAPI}/userId/${userId}`, { data: [{ message: event.message.text, context: '' }] });
// index関数に返信するメッセージを返す
return {
type: 'text',
text: `"${event.message.text}"というメッセージをdbに追加しました`,
};
}
}
10.textEventのswitch文に以下のコードを追加
// 'メモ'というメッセージが送られてきた時
case 'メモ': {
// ユーザーのデータがDBに存在する時
if (data) {
// 返信するメッセージを作成
message = {
type: 'text',
text: `メモには以下のメッセージが保存されています\n\n${data.message}`,
};
} else {
// 返信するメッセージを作成
message = {
type: 'text',
text: 'メモが存在しません',
};
}
break;
}
// 'メモ開始'というメッセージが送られてきた時
case 'メモ開始': {
if (data) {
await axios.put(`${dbAPI}/userId/${userId}`, { data: [{ context: 'memoMode' }] });
} else {
await axios.post(dbAPI, { data: [{ userId, context: 'memoMode' }] });
}
// 返信するメッセージを作成
message = {
type: 'text',
text: 'メモモードを開始しました',
};
break;
}
npx vercel deploy --prodをしてデプロイしたら完成です！
LINE Front-end Framework（LIFF）について
LIFFとは、LINEBotと連携したWebアプリケーションが簡単に作れるものです。
Webアプリ上でユーザーのプロフィールを取得したり、トークルームにメッセージを送ったりできます。
LIFFに関する詳細は公式ドキュメントから確認できます。
今回はWebアプリをこちらで用意しているので、それを使っていきましょう。
LINEログインのチャネルを作成しよう
LINE Developersのコンソールにアクセス
プロバイダーを選択
新規チャネル作成を選択
LINEログインを選択
チャネル名、チャネル説明は適当なものを入力し、アプリタイプはWebアプリを選択
利用規約に同意して、チャネルを作成
Webアプリのファイルをローカルにダウンロードしよう
ソースコードのディレクトリに移動
git cloneでファイルを落とした人はgit pull、zipでダウンロードした人は再びリポジトリからcodeをzipでダウンロードする
git pullは一度commitしないとできないため、先にgit add .、git commit -m 'some fix'を実行してcommitしてください
zipでダウンロードした人は、元のコードのvercel.jsonを今ダウンロードしたものに置き換えて、liffフォルダを追加
npx vercel deploy --prodでデプロイする
LIFFを作成しよう
先ほど作成したチャネルのページに移動する
LIFFタブを開いてLIFFアプリを追加する
LIFFアプリ名は適当な物を入力し、サイズはfull、エンドポイントURLはVercelのデプロイ先URLに/liffを追加したもの、Scopeはprofileとopenidとchat_message.writeにチェックを入れ、ボットリンク機能はオフ、Scan QRはオンにして追加ボタンを押す
シェアターゲットピッカーをオンにする
LIFF IDをコピーして、liffディレクトリのindex.htmlのLIFFIDを自分のLIFF IDに書き換える
npx vercel deploy --prodでデプロイする
チャネルの画面からLIFF URLをコピーする
LIFF URLをBotとのトーク画面に送って、そこからリンクを開く
自分のプロフィールなどが表示されれば成功！
使える機能の解説
liff.sendMessages()
Botとのトーク画面にメッセージを送信できます
liff.shareTargetPicker()
任意のトーク画面（例えば他の友達やグループ）にメッセージを送信できます
liff.getProfile()
ユーザーのuserId、displayName（LINEのアカウント名）、pictureUrl（プロフィール画像のURL）、statusMessage（一言コメント）を取得できる
liff.getOS()
ユーザーが使っているOSが取得できる
liff.getLanguage()
ユーザーが使っている言語が取得できる
liff.getVersion()
LIFFのバージョンが取得できる
liff.getLineVersion()
ユーザーが使っているLINEのバージョンが取得できる
liff.isInClient()
LIFFをLINEのアプリ内から実行しているかどうか取得できる
liff.isLoggedIn()
ユーザーがログインしているかどうか取得できる
liff.getContext()
LIFFアプリが起動された画面（1対1のトーク、グループ、トークルーム、または外部ブラウザ）に関する情報が取得できる
liff.getFriendship()
ボットリンクをオンにすると、リンクしたbotとの友達関係が取得できる
liff.scanCode()
LINEのQRコードリーダを起動できる
iOSでは使えない
liff.closeWindow()
liffを閉じる
eslintについて
JavaScriptには、eslintというlinterが存在します。
簡単に言うと、構文ミスを見つけてくれたり、コードをきれいに整形してくれたりするやつです。
本当はnpm i -g eslintを実行してグローバルにインストールし、.eslintrcという設定ファイルをワーキングディレクトリに作らないといけないのですが、今回はローカルインストールした上で設定ファイルもすでに用意してあるため、Botのソースコードがあるディレクトリでnpx eslint --fix .と実行すればコードを自動整形できます。
ちなみに、npm i -g eslintでグローバルインストールした上でVS Codeのeslint拡張機能を入れれば、VS Code上で構文ミスや書き方が汚いところを全て指摘してくれるようになります。
VS Codeの設定ファイルをうまく書けば、VS Code上でファイルを保存するだけで自動整形してくれるようになるので、興味がある方はぜひ試してみてください。
Bot事例紹介
自分や友達が作ったいろいろなBotの事例を紹介していきます。
自分が作ったBot
絞り込みボタンを押して、選択解除してからLINEBotを選択すればLINEBotだけがみれます
トラべる！
広島県のレッドハッカソンで友達と作ったやつ
おわりに
これでAizuHack LINEBotコースの全ての勉強会が終わりました。皆さん本当にお疲れ様でした。
ここまでに学んだ技術を使えば、もうたいていのBotは作れます。
ぜひ面白いBotをたくさん作ってみてください。
また、本記事で使用しているサンプルコードは複数のコントリビュータのサポートにより完成したものです。
この場を借りて心より御礼申し上げます。
↧