こんにちは。

りゅーそうです。

タイトルの通りです。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 -v

Firebaseのツールをnpmでインストール

npm i -g firebase-tools

iはinstallの略。　-gはグローバルと言う意味です。

firebaseにログイン

firebase login --no-localhost

firebaseを初期化

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を扱う勉強会も企画されているそうなので、そちらも期待しております。笑

最後まで読んでいただき、ありがとうございました。