✎LINE-BOTに関するToDo

Last updated at 2024-09-08Posted at 2024-09-08

✎LINE-BOTに関するToDo

Vivaldiのmarkdownメモでつけていた、マジガチの自分用メモなんでめちゃくちゃです。

LINE Developersに登録していることは前提

LINE Developersでしておくこと

LINEアカウントの作成
Messaging APIを用いて権限を承認する
その後、LINE Official Account ManagerのMessaging APIタブの、Channel Sercretを確認する
LINE DevelopersからChannel Access Tokenを発行しておく

ネットワークとのインターフェース

世界獲れるくらい雑な説明
nginx（エンジンエックス）はウェブサイトをインターネットで公開する際に使うソフトウェア
ngrok（エヌグロック）はローカルのサーバをインターネット上に公開するためのトンネルを作成し、一時的なURLを提供してくれる。らしい。セキュリティ的にはどうなの？
nginxセットアップ
- https://nginx.org/en/download.html
- Windowsタブからインストール
- Cドライブ直下に解凍
- nginxコマンドを実行して起動確認
- で、多分これはexeから直で実行しないとなんか上手く起動しない
  - 訂正
  - 管理者権限周りがうまくできていなそうホントはnginx start で動いてほしいんですけどね

⚠nginxが起動しない！

クリーンな状態か確認
まずはnginxが起動していないことを確認：コマンドは asklist | findstr nginx
localhostが専有されていないことを確認：コマンドはcurl localhost

ngrokセットアップ
- まずアカウント登録をしなければならない
- https://dashboard.ngrok.com/user/signup
- そして次にダウンロードしてC直下とかに解凍する
- https://ngrok.com/download
nginx × ngrok の起動確認を行う
1. https://dashboard.ngrok.com/get-started/your-authtoken ページにあるCommand Lineを実行する
2. nginxを起動
3. ngrok http {nginxのポート番号} をコマンドラインに入力してトンネルをつなげる
4. Forwardingに表示されているURLにアクセスすることができれば、localhostを公開することができたと確認できる
お片付けを行う
1. ngrokはctrl+Cで停止
2. ngnixは本来はcdをnginxの直下に移動してからnginx -s stopで強制停止だが、
3. nginx.pidにポッドのIDを記載されていない不具合が生じている場合は強制的にタスクキルを行う。taskkill /f /im nginx.exe　で実行
4. curl localhostでお片付けが終わったことを確認

参考

以上でnginxとngrokによるバックエンドのためのセットアップは終了。あとで色々いじったりするかもだけど、一旦自分のローカルなパソコンが世界と接続できるようになりました。

スモールbotを作る

TypeScript入りの開発ディレクトリ構成を作る

プロジェクトを用意する
1. 好きにフォルダを作る
2. npm init -y でプロジェクトを初期化する
3. ライブラリをインストールする npm install --save-dev typescript eslint @types/node express ts-node ts-dotenv @types/express
  - 註
  - --save-devはシンプルに言うとグローバルでなくローカルにインストールするためのオプション
  - typescriptはTypeScript。
  - eslintはみんな大好きな怒ってくれる人
  - @types/nodeを入れておくと、nodeのデフォルトのモジュールで型の補完がきくようになる
  - ts-nodeはTypeScriptファイルをJavaScriptにコンパイルし、Node.js上で動くようにするためのファイル
  - Expressは、Node.js上でウェブアプリやAPIを素早くシンプルに作るための軽量フレームワーク。他のサーバー（例: Apacheやnginx）は主に静的ファイルの配信やリバースプロキシとして使われますが、Expressは動的なリクエスト処理やルーティング、ミドルウェアを使った拡張が容易な点が特徴。
  - ↑じゃあnginxいらなくない！？とパニックになっているが、一旦、一旦置いておく。だって要るって言ってたひとがいたんだもん！！！！！！
  - ts-dotenvは環境変数を扱うやつ。
4. 本丸のSDKを入れる。 npm install @line\bot-sdk
5. LINE Developersで確認したChannel Access TokenとChannel Sercretを.envファイルに書き込む。
  - YOUR_CHANNEL_SECRETとYOUR_CHANNEL_ACCESS_TOKENみたいにね。
6. あとはPORT番号としてPORT=なんとか、っていうように、環境変数を入れたら一旦おしまい。

PingPongコードを実際に書いてみよう

今回めちゃくちゃGo-Tech Blogさんを参考にしていただいたというかほとんどパクったようなものなので一旦そっちを当たってほしい。
https://go-tech.blog/nodejs/line-chat-bot/

色々書いていくんだけど、必須部分について.
dotenvでloadする。
```
import { load } from 'ts-dotenv';
const env = load({
  CHANNEL_ACCESS_TOKEN: String,
  CHANNEL_SECRET: String,
  PORT: Number,
});
```
また、環境変数からこれらPORT番号やアクセストークンなどを取り出して変数に代入しておく。
import する際の注意点として、参考記事ではClientがimportされているが、これは現在では非推奨となっているので、MessageAPIClientに置き換えておく。
https://github.com/line/line-bot-sdk-nodejs　がソース、なはず、
参考コードの中のtextEventHandlerはWebhookEventを聴取してくれている。event.messageとかで中身を取り出す（WebhookEventのタイプがMessageだったらできるにょ）
このmessageの内容がpingであればpongと返したいが、返すときはTextMessageオブジェクトを返還する
```
const pongMsg: TextMessage = {
  type: 'text',
  text: 'pong'
}
```
こんな感じで。
あとは参考コードを参考にしてください。本当にカミサマです。ありがとうございます。
nginxを起動し、さらにngrok http {PORT番号}でポートを起動する。ここでngrokから生成されたURLをLINE DevelopersのWebhookのURLに設定しておくこと。
完成したら「npx ts-node index.ts」でいつも通りビルドしてスタートする。実際にpingと送ってpongと帰ってこればOK

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up