GiHub Codespaces で今回の LINE BOT の仕組みをはじめてみる
大事なこと
- Chrome ブラウザのなるべく最新版でアクセスしましょう
GitHub Codespaces とは
GitHub Codespaces は、クラウド上に開発環境を提供することで環境設定の手間を省き、どこからでも安全に開発を行うことができる便利なツールです。
今回は LINE BOT サーバー側の仕組みはなるべく手軽に立ち上げられるように GitHub Codespaces を採用しています。
- GitHub Codespaces の概要
個人アカウントの無料枠や使用量の確認
- GitHub Codespaces の使用状況の表示 - GitHub Docs
- GitHub Codespaces の請求について - GitHub Docs
- https://docs.github.com/ja/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#monthly-included-storage-and-core-hours-for-personal-accounts
- 2024/8 現在、個人アカウントでは 1 ヵ月 120 時間使えます。
- 授業で 40-50 時間使うとしても十分残っているはず
今回作る仕組み
まず、シンプルに GiHub Codespaces で LINE BOT のサーバーを立てることで、ユーザーから見た LINE BOT でオウム返しができています。
使う Git リポジトリ
すでに、今回の LINE BOT をはじめる環境は作ってあります。
https://github.com/1ft-seabass/dhw-ppB-m5stack-linebot-codespace-2024
こちらを使います。
GiHub Codespaces で構築開始
https://github.com/1ft-seabass/dhw-ppB-m5stack-linebot-codespace-2024 に Chrome ブラウザでアクセスします。
Codespaces は、それ以外のブラウザだと、うまく動作しない可能性があるので Chrome で動かしましょう。
Code ボタンをクリックします。
Codespaces タブをクリックします。Create codespace on main をクリックします。
Setting up your codespace という画面が出て構築されます。
ブラウザ上で Visual Studio Code が起動し、今回の仕組みを反映した環境が起動しました。
環境構築時に npm install で自動インストールされている
package.json に、すでに今回使う express や @line/bot-sdk ライブラリについて登録されていますが、環境構築時に npm install で自動インストールされています。
Visual Studio Code 操作画面の紹介
- 参考 : Visual Studio Code User Interface
VS Code には、フォルダーまたはプロジェクトの完全なコンテキストを参照してアクセスするための十分なスペースを確保しながら、エディターに提供されるスペースを最大化する、シンプルで直感的なレイアウトが付属しています。UI は 5 つの主要な領域に分かれています。
- アクティビティバー
- 左側の端にあり、ビューを切り替えることができ、Git が有効になっている場合の発信変更の数など、追加のコンテキスト固有のインジケーターが表示されます。
- プライマリ サイド バー
- プロジェクトでの作業を支援するエクスプローラーなどのさまざまなビューが含まれています。
- エディタ
- ファイルを編集するためのメイン領域です。エディタは好きなだけ縦横に並べて開くことができます。
- パネル
- エディター領域の下にあるビュー用の追加スペース。デフォルトでは、出力、デバッグ情報、エラーと警告、および統合ターミナルが格納されます。パネルを左右に移動して、垂直方向のスペースを増やすこともできます。
- ステータス バー
- 開いているプロジェクトと編集するファイルに関する情報。
✅ポイント
- 機能を全部覚える必要はありません。気になる人がいたら、英語ですが https://code.visualstudio.com/docs でいろいろ使い方を調べて試してみましょう
- テーマをダークにしたい人は多いかもなので https://code.visualstudio.com/docs/getstarted/themes を見てダークテーマに変更してみてもよいでしょう
- 今回は、エクスプローラでファイルを選択し→エディタで編集＆保存→パネルでターミナルから実行という流れで行います
プログラムは Node.js という仕組みで動いている
エクスプローラを見てみましょう。今回のプログラム群は Node.js で作られています。
Node.js は、普段はブラウザで活用されていて、ネット上で文献の多い JavaScript 言語で、Unity でデータのやり取りをするサーバー側、つまりサーバーサイドのプログラムが作成することができます。
- Node.js® とは
また、Node.js と一緒にインストールされる npm は、Node.jsのパッケージ管理ツールです。npmを使うことで、パッケージの依存関係や競合関係を管理してくれるので、パッケージを追加、更新する際は基本的に npm 経由で行うことになります。
また、npm には、Node.js と一緒に入ってすぐ使える便利なライブラリがたくさん登録されています。今回は Express https://expressjs.com/ という便利なサーバー構築ライブラリがインストールされています。公式のドキュメントもわかりやすいですが、とほほのExpress入門 https://www.tohoho-web.com/ex/express.html も日本語でとっつきやすいので、もしカスタマイズしくなった方は参考にするとよいでしょう。
すぐに新しいブラウザがもうひとつ開いて、今回起動したサーバーのルートアドレスが表示されます。
作成したBOTのチャンネルシークレットとチャンネルアクセストークンを反映
// 作成したBOTのチャンネルシークレットとチャンネルアクセストークン
const config = {
channelSecret: '作成したBOTのチャンネルシークレット',
channelAccessToken: '作成したBOTのチャンネルアクセストークン'
};
LINE BOT 作成手順 で、作成したBOTのチャンネルシークレットとチャンネルアクセストークンを、それぞれ反映します。
わりと編集中にシングルクォーテーション消してしまったり、channelSecretとchannelAccessTokenを、逆に書いたりしてハマるので気をつけましょう。
M5Stack から来るプッシュ通知の送り先のユーザーIDを反映
まず、プッシュ通知の送り先であるこの BOT のユーザーIDを LINE Developers から取得します。
https://developers.line.biz/ja/
こちらからログインしましょう。
今回使っている BOT のチャネル設定に移動します。
下にスクロールしていくと あなたのユーザーID という項目があるので、これをメモしておきます。
// プッシュメッセージで受け取る宛先となる作成したBOTのユーザーID'
const userId = '作成したBOTのユーザーID';
作成したBOTのユーザーID の部分を先ほどメモしたユーザーIDで書き換えます。
ここまで設定出来たらファイルを保存します。
app.js を起動してみる
これで準備完了です。
node app.js
ターミナルに移動して、こちらのコマンドで app.js を起動してみます。
動作確認
このように起動します。
ポートタブをクリックします。
いま app.js で開いている LINE BOT サーバーの状態が表示されます。
ローカルアドレス項目の、こちらのアイコンをクリックすると別のタブが開いて、サーバーから応答されて動作確認ができます。
このように表示されます。
サーバー URL の公開
表示範囲が Private のままだと、自分の GitHub アカウントでログインした状態でないと見ることができるないので LIBE BOT サーバーが外部から動かせないので、公開します。
表示範囲のところで右クリックして ポートの表示範囲 > Public とクリックします。
表示範囲が Public になっていることを確認します。
今回のサーバー URL をメモ
ポートのローカルアドレス項目のこちらのボタンをクリックすると URL がコピーできます。
ブラウザのアドレスを見て今回のサーバー URL をコピーしておきましょう。
Webhook URL の更新
LINE Developer コンソールの自分の LINE BOT 設定に戻ります。
今回使っている BOT の Messaging API 設定に移動します。
Webhook URL の項目に移動して以下の手順を行います。（大事な設定なので、一息タイミングを置いています）
さきほどの URL に /webhook をつけて反映
さきほどの URL https://**********.github.dev に /webhook をつけて Webhook URL の項目に入力して更新ボタンをクリックします。
同時に Webhook の利用がオンになっていることも確認しましょう。
BOT にオウム返しが来るか確認しましょう
一旦ここでちゃんと動いているかオウム返しを確認してみましょう。
こちらで設定は出来ました。
LINE BOT のプレゼンテーション時に便利なPC版アプリ
LINE BOT のプレゼンテーション時に便利なPC版アプリを紹介します。画面共有時にも状況が見せやすくなるのでおススメです。
- パソコンでLINEを利用する｜LINEみんなの使い方ガイド
こちらをみつつ、インストールしていきましょう。
QR コードログインがおススメです。
次にすすみましょう
左のナビゲーションから「M5Stack + LINE BOT 連携」にすすみましょう。