xhack勉強会「LINE BOT & FIREBASE」に参加してみた
こんにちは。
りゅーそうです。
タイトルの通りです。xhackの勉強会にまたまた参加してきました。
今現在、私はJavaScriptを学んでおりますが、「何かポートフォリオを作りたいなー。」と漠然と考えていました。
そこで知ったのが、「Firebase」
学ぶしかない！
という事で、Firebaseの基本について触れられそうな勉強会に参加してきました。今回はそのレポートになります。
イベントページはこちら ↓↓↓
そもそも、Firebaseとは
Googleが提供しているサービス。
いわゆるサーバーレスのサービスであり、開発者があまりサーバーについて意識しなくても開発できるというのがメリットである。
サーバーレスといっても実際にはサーバーは存在しているわけだが、サーバーの管理をFirebaseに投げられるという意味では、開発の効率をあげることができると言えるだろう。
サービスをアップするときの「デプロイ」がいらないので、とても楽である。（私はHerokuでのデプロイでなんどもつまずき、挫折を繰り返してきた。この苦しみをわかっていただけるだろうか。。。。Railsをやっている人ならきっとわかってくれるよね。）
つまり、Firebase上にプッシュするだけで、Webサービスを公開する事ができる。こんな駆け出しエンジニアにとってありがたい話があるだろうか。使わない手はない。
という事で、今回はそのFirebaseでのサービスの立ち上げ方について学んできました。
勉強会でのゴール
今回はFirebaseに加えて、LINEが提供しているLINE Messaging APIを連携させて、おうむ返しをしてくれるbotをデプロイし、公開するところまで！
以下のようなものを作ります。
基本的なものですが、色々なサービスに応用できそうです。
LINE APIとは
そもそもAPIとはなんなのかという話ですが、以下の記事でまとめているので、ぜひご覧ください。
上記の記事にあるように、基本的にクライアント（今、パソコンをみているあなた）がURLをクリックしたりするとサーバーに命令が飛びます。それをサーバーがプログラムに応じて、HTMLなどのテキストにしてクライアントに見やすい形で、返してくれる仕組みをHTTP通信と言います。
画像引用：（https://www.slideshare.net/HidehiroNagaoka/le-wagon-tokyo-line-bot-101）
そんでもって、これにWebAPIを含めたものをAjax通信と言う事があります。
これによって、効率的にデータを取得する事ができます。また、公開されているWebAPIを使うことによって効率よく開発を行う事ができます。
画像引用：（https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data）
様々な企業がこのWebAPIを提供しており、今回はLINEが提供しているWebAPIを使うという事ですね！
今回は以下のような仕組みになります。
Webhookなどは後ほど出てきます。
画像引用：（https://www.slideshare.net/HidehiroNagaoka/le-wagon-tokyo-line-bot-101）
上の図で言うBOTSERVERのプログラムを自分で書き、Firebaseを使って管理。FIrebaseとLINEAPIを連携させることによって、完成物のようなLINEBOTを作るといったイメージでしょうか。
LINEのような社会的に需要のあるサービスのAPIを使うことによって、集客効果などが高まるので大きなメリットがありますね！
ツールの紹介
Gitpod
GitHubアカウントがあれば使用可能。環境構築が不要の便利ツール。勉強会など、環境を統一させたい時には便利だと思いました。
Firebase
googleアカウントがあれば使用可能。
では、ターミナルでコマンドを入力していきます。npmを使うので、Nodeがインストールされているか確認してください。
node -vFirebaseのツールをnpmでインストール
npm i -g firebase-toolsiはinstallの略。 -gはグローバルと言う意味です。
firebaseにログイン
firebase login --no-localhostfirebaseを初期化
firebase init functions詳しくは公式チュートリアル参照
新しいプロジェクトがターミナル上に作れたら、上記のURLでログインをし、Firebase上にプロジェクトを作成していきます。
1 新しいプロジェクトを作成をクリック
2 適当にプロジェクト名をつける
3 analyticsありに設定する
4 料金プランは従量のBlazeにする。（無料のSparkだと外部APIアクセスができないそうです）
これで、Firebaseの初期設定は終わりました！簡単です！
LINE Messaging API
開発者向けにLINEのAPIが公開されています。登録してログインしましょう。
1 登録が完了したら、左上の写真をクリック → プロバイダー新規作成
2 プロバイダー名をつける（注：プロバイダー名にLINEと入れるとエラーになってしまうそうです！）
3 新規チャネルを作成
今回はMessaging APIを選択しましょう！
→ その後情報を入力し、チャネルの作成は完了です。アプリ名を記入する欄がありますが、LINEという用語は入れないようにしてください！
これで基本的な設定は完了です！
LINE Messaging APIとFirebaseを連携させる
まずはターミナルで、Firebaseの環境変数の設定を行います。
firebase functions:config:set --project <your project ID> line.channel_secret=<your channel secret> line.access_token=<your access token>< >で囲われた部分には自身で取得した値を代入してください。
<your project ID>
FIrebaseの今回作ったプロジェクトのページにいき、歯車をクリック
→ プロジェクトの設定をクリックされると表示されます。
<your channel secret>, <your access token>
LINE Developersアカウントで今回作ったチャネルの基本設定の所に表示されます。
firebase --project <your project ID> functions:config:get ちゃんと設定されているか確認するコマンドです。このコマンドが通れば、デプロイの準備が整いました！
そして、デプロイします！
firebase deploy --project <your project ID> --only functions,hostingこれで、デプロイ完了！なんて簡単。。。
Hosting → より 〜.firebaseapp.comのURLをコピペ
そしたら、先ほどのLINE Developersアカウントのチャネル基本設定にいき
1 Webhook URLを設定
→ 先ほどの取得した 〜./firebaseapp.com の後に /webhookをつけて設定する
2 Webhook送信を利用するに設定
3 自動応答メッセージ (Auto-reply messages)の設定をクリック
応答モード (Response mode)：Bot
あいさつメッセージ (Greeting message)：オン
応答メッセージ (Auto-response)：オフ
Webhook (Webhooks)：オン に設定する
4 一番下に表示されているQR コードを使用してLINEの友達に登録しておく
これで、FirebaseとLINE APIの接続が完了し、デプロイ成功しました！
勉強会の感想
今回は講師の長岡さんがおうむ返しをしてくれる処理が書かれたindex.jsとpackkage.jsonを用意してくださっていたので、以上のような作業するだけで、完成物のようなLINE BOTを公開する事ができました。
僕のような初心者がつまずきがちな環境構築をサポートしていただきながらできたので、とても楽しくできました。
講師の長岡さん、そしてxhackさんありがとうございました！
今後の課題として、
・FirebaseのHosting機能を使えるようになったが、Databaseなどに触れられていない。
・自分自身で、プログラムの処理をかけていない。
というのがあるので、今回のソースコードを参考にしながら、自分でもLINEBOTを作れるように頑張っていこうと思います！
環境構築の手順は完璧なので、なんだかできそうな気がしています。
xhackで、今後FirebaseのDatabaseを扱う勉強会も企画されているそうなので、そちらも期待しております。笑
最後まで読んでいただき、ありがとうございました。
気軽にクリエイターの支援と、記事のオススメができます！
サポートくださると励みになるので、よろしくお願い致します！サポートは全てプログラミングの勉強に使わせていただきます。またアウトプットして還元します^_^