xhack勉強会「LINE BOT & FIREBASE」に参加してみた
見出し画像

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

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


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
りゅーそう

サポートくださると励みになるので、よろしくお願い致します!サポートは全てプログラミングの勉強に使わせていただきます。またアウトプットして還元します^_^

ありがとうございます!また読んでください^_^
りゅーそう
現在は以下のサイトにて情報発信を行なっています。 当ページのnoteをみて気になった方はぜひ覗いていただけるとありがたいです https://ryusou.dev/