Firebaseを使ってLINEBOTを作る方法

概要

LINEの公式アカウントを発展させたLINEBOT こちらの開発をしようとすると何かとややこしかったのでさくっと動作するようにFirebaseのcloud functionsを利用して、さくっとBOTを作る方法です

Firebaseアカウントの準備

firebaseはGoogleアカウントを持っていればそちらのアカウントをそのまま使えるのでアカウント作成方法は割愛します。

こちらのページにログインし、右上の”コンソールへ移動”からfirebaseのプロジェクト一覧に移動します

firebase管理単位
firebaseはアプリをプロジェクト単位で管理しています。

“プロジェクトの追加”から好きなプロジェクト名をつけてください

プロジェクト名
このときのプロジェクト名がアプリを公開したときのwebhookURLになります。名前が誰かとかぶっていると自動的に後ろに記号などが足されてオリジナルな名前になります。記号などをつけたくない場合は誰ともかぶらない名前にしましょう

Googleアナリティクスを設定するか聞かれますが、今回は特に必要が無いのでoffでいいと思います。

ここまで進むとプロジェクトの作成が行われると思います。しばらく待っていてプロジェクトの作成が完了すればとりあえずオッケーです。

LINE Developersへの登録

すでにLINE Developersへ登録している方は飛ばしても構いません。

まずコチラにアクセスし、右上のボタンからLINEログインします。

プロバイダーを作成するようにいろいろと聞かれますが、とりあえずは適当で大丈夫です。

次にチャネルの作成をします。

このように3つの選択肢が出てきますが、今回はMessaging APIを選択します。

次に作成する公式アカウントの名前などの設定をするのですが、後から変更できるので適当で構いません。

これでアカウントの準備は完了です。

cloud functionsの設定

firebaseの機能を使うにはNode.jsが必要になります。

まず、コチラからダウンロードしてインストールしてください。

ダウンロードしたらターミナルなどから以下のコマンドを実行します。さきほどインストールしたバージョンが表示されれば正しくインストールされています。

node --version
v10.16.0

次にfirebaseにターミナルからログインします。以下のコマンドを実行するとブラウザが起動し、firebaseへのログインを要求されるのでログインします。

firebase login

完了したらターミナルに戻ります。

cloud functionsを使えるように設定をします。

まずは作業用のフォルダを作成してください。仮に今回はdocという名前のフォルダを作ったとします。

ターミナルで先ほど作成したdocフォルダに移動し、以下のコマンドを実行します

firebase init

そうするといろいろな質問をされますが、

まず最初の設定する機能を選択する箇所ですが、Functionsにカーソルを合わせてspaceを押すと選択できます。その後Enterを押せばOKです。

どのプロジェクトを使うかを聞かれますが、先ほど作成したプロジェクトを選択してください。

後はデフォルトの設定で大丈夫です。

処理が完了すると先ほど作成した作業フォルダにfuctionsフォルダが作成されていれば成功です。

必要なモジュールのインストール

npmを使って必要なモジュールをインストールします。

今回はLINEのBOTSDKを利用しますので”functionsのフォルダに移動してから”以下のコマンドを実行します。

npm install --save @line/bot-sdk

これでモジュールのインストールは完了です。

index.jsの編集

functionsフォルダ内のindex.jsを以下のように編集します。

このとき、チャネルアクセストークンとチャネルシークレットはLINE Developersから取得することができます。

const functions = require('firebase-functions');
const line = require('@line/bot-sdk');

const client = new line.Client({
    channelAccessToken: "あなたのLINEのチャネルアクセストークン",
    channelSecret: "あなたのLINEのチャネルシークレット",
})

exports.line = functions.https.onRequest((request, response) =>{
    const body = request.body;
    const events = body.events;

    for(let event of events){
        const{
            replyToken,
            type,
            source:{
                userId
            },
            message
        } = event;

        if(type == "message"){
            if(message.type == "text"){
                const tmpMessage = {
                    type: "text",
                    text: message.text
                }
                client.replyMessage(replyToken, tmpMessage).then(()=>{
                    response.status(200).send("OK");
                })
            }
        }
    }
})

今回はメッセージに入力された値をそのままオウム返ししてユーザーに送るサンプルです。tmpMessageのtextの箇所を変更すると送るメッセージを変えることができるのでぜひいじってみてください!

cloud functionsへデプロイ

この変更をFirebaseのサーバへアップロードする必要があります。

以下のコマンドをfunctionsフォルダ内で実行してください

npm run deploy

これでしばらく待っているとアップロードが完了します。functionのURLが表示されるのでこれをコピーします。

Webhook URLを設定

LINE DevelopersのMessaging API設定のタブにあるWebhook URLの項目に先ほど作成したcloud functionsのURLを設定します。

そして下のWebhookの利用の項目をオンにすれば完成です!

動作確認

LINE DevelopersのQRコードを読み、友達登録します。

そこで何かメッセージを送ると、同じメッセージがオウム返しされると成功です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です