Tweet
Tweet

Slide 1

Slide 1 text

プログラミング初心者が Cloudflare でLINE BOTを作るまで。 Toro_Unit / 2025.01.18 @ Cloudflare Meetup Nagano Vol.3 1

Slide 2

Slide 2 text

$ whoami Toro_Unit / 占部 紘 Frontend & WordPress Engineer Github: @torounit / Twitter: @Toro_Unit WordPress / Gutenberg Team Shinshu WordPress Meetup 2

Slide 3

Slide 3 text

友人達が立ち上げたとある会社がありまして。 WEBサイトの制作・管理を担当してたり、IT/DX関係の相談に乗ったりしてるんです。 3

Slide 4

Slide 4 text

12月1日 4

Slide 5

Slide 5 text

友人:「会社のLINE公式アカウントつくりたい」 俺： 「ええやん、なんかあったら聞いてやー」 5

Slide 6

Slide 6 text

3日後 6

Slide 7

Slide 7 text

友人:「Messaging APIつかいたい」 俺:「？？？？？？？？？？？？？？？？」 友人:「Slackにも通知させたい」 俺:「？？？？？？？？？？？？？？？？」 7

Slide 8

Slide 8 text

ノーコードでは難しそう。 。 。 。 8

Slide 9

Slide 9 text

友人:「プログラミングおしえて」 9

Slide 10

Slide 10 text

10

Slide 11

Slide 11 text

heroku だと Git でのデプロイになる。 コードを書く前に Git とか教えるのも微妙。 サーバーを常時起動しておくのは管理のコストがかかる。 「とりあえずやってみよう」フェーズで課金とか考えるの面倒くさい。 express とか BOT 以外の部分の話のほうが多くなる。 VSCode, Terminal, Node.js...etc とただでさえ周辺の話が多いので、とにかく最 小限にしたい。 11

Slide 12

Slide 12 text

とにかくまずはサクッと動くものを作らせたい。 12

Slide 13

Slide 13 text

Cloudflare Workers でよいのでは？ Cloudflare Workersでコピペだけで作れるLINE Botとかあるなぁ。 13

Slide 14

Slide 14 text

なんとかなりそう！ 14

Slide 15

Slide 15 text

Cloudflare Workers の導入まで。 亀田さんの記事を参考に。 Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実 行まで Cloudflare Workers と KV でTodoListアプリを作る 15

Slide 16

Slide 16 text

VSCode の導入 <- わりとなんとかなった。 Wrangler の導入 <- なんとかなった。 Hello World! <- なんとかなった。 TodoListアプリ <- なんとかならなかった 16

Slide 17

Slide 17 text

つまづいた理由 17

Slide 18

Slide 18 text

18

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

前提知識: HTMLおよびCSS の基礎を理解していること !!!! 20

Slide 21

Slide 21 text

20分で始めるRubyみたいなのがない!!! 世の中の JavaScript のチュートリアルは、ブラウザ上でちょっとしたアプリを作 るモノがほとんど。 サーバーサイドをいきなりやりたい初心者向けのチュートリアルはない!!! そんな初心者はいない!!! 21

Slide 22

Slide 22 text

とりあえず、Todolist のアプリの部分はガン無視して、KV の説明とか JSON の説明と かだけやって、LINE BOT のチュートリアルに進むこと。 22

Slide 23

Slide 23 text

LINE Bot のチュートリアル Cloudflare Workersでコピペだけで作 れるLINE Bot 70行程度のコードで npm パッケージ も特に使わずに オウム返し Bot が作 れる。 23

Slide 24

Slide 24 text

手元でのデバッグが難しい。トンネリングツールとかを導入するのも初心者にはハー ドルが高いし、ブラウザで毎回ログを頑張って見るのも面倒。 --> wrangler tail で良い感じにやれるやん。 24

Slide 25

Slide 25 text

一通りチュートリアルも終えたので、開発に進むことに。 @line/bot-sdk とか、wrangler.toml に compatibility_flags = ["nodejs_compat"] 書くだけでふつーに動く。 Line の Messaging API と格闘しつつ、Cloudflare とはほとんど格闘せず、だいたい 40時間程度でそれなりに動くものができた。 25

Slide 26

Slide 26 text

教えてみての感想 Hello World をするまでがとにかくサクッといけるので、とっかかりやすい。 必要なのは、Cloudflareのアカウント、Node.js、多少のターミナルの知識、や る気、根気、興味関心。 「なんかうごいた！」までがはやいのは教える上で重要。 LINE 等本人が親しんだツールで動くのは楽しいっぽい。 wrangler tail でデバッグなどもしやすい。 Chatbot習作としてはわりと良さそう。 実際のところ、JavaScript の中級者向けとは感じる。 26

Slide 27

Slide 27 text

作ってみないと教えられないので、自分でも作ってみた https://github.com/torounit/cf-line-bot Hono / D1 / Workers AI を用いて BOT をこさえてみた。 ちょっとしたことを試すぶんにはとても気軽に出来る。 27

Slide 28

Slide 28 text

wrangler.toml に多少書くだけで、色んな機能を呼び出せるのは便利。 [ai] binding = "AI" [[d1_databases]] binding = "DB" database_name = "your-database_name" database_id = "your-database_id" AI のモデルも llama-3.3-70b が使えるようになったりで良くなってきてるっぽい。 28

Slide 29

Slide 29 text

感想 Cloudflare に一通りの道具が揃ってるのでとにかく楽。 wrangler tail とか、 Binding 簡単にできるとか。 Github からデプロイもできるようになっていたので便利。 29

Slide 30

Slide 30 text

余談 async/await: Promise の説明を抜きにこれを正しく説明できなくてめっちゃ大変だ った。 await で止まる(ほんとは止まってない)とか。 文脈によって意味が変わる {} , () とか。 30

Slide 31

Slide 31 text

おわり 31