Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cloudflare Meetup Nagano Vol.3
Search
Toro_Unit (Hiroshi Urabe)
January 18, 2025
Technology
1
94
Cloudflare Meetup Nagano Vol.3
Cloudflare Meetup Nagano Vol.3 登壇資料です。
Toro_Unit (Hiroshi Urabe)
January 18, 2025
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
210
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
410
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.3k
Other Decks in Technology
See All in Technology
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
810
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
230
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.1k
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
120
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
240
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
160
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
110
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
4.9k
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
290
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
8.1k
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for Performance
lara
610
69k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Language of Interfaces
destraynor
158
25k
Git: the NoSQL Database
bkeepers
PRO
431
65k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
プログラミング初心者が Cloudflare でLINE BOTを作るまで。 Toro_Unit / 2025.01.18 @ Cloudflare Meetup
Nagano Vol.3 1
$ whoami Toro_Unit / 占部 紘 Frontend & WordPress Engineer
Github: @torounit / Twitter: @Toro_Unit WordPress / Gutenberg Team Shinshu WordPress Meetup 2
友人達が立ち上げたとある会社がありまして。 WEBサイトの制作・管理を担当してたり、IT/DX関係の相談に乗ったりしてるんです。 3
12月1日 4
友人:「会社のLINE公式アカウントつくりたい」 俺: 「ええやん、なんかあったら聞いてやー」 5
3日後 6
友人:「Messaging APIつかいたい」 俺:「????????????????」 友人:「Slackにも通知させたい」 俺:「????????????????」 7
ノーコードでは難しそう。 。 。 。 8
友人:「プログラミングおしえて」 9
10
heroku だと Git でのデプロイになる。 コードを書く前に Git とか教えるのも微妙。 サーバーを常時起動しておくのは管理のコストがかかる。 「とりあえずやってみよう」フェーズで課金とか考えるの面倒くさい。 express
とか BOT 以外の部分の話のほうが多くなる。 VSCode, Terminal, Node.js...etc とただでさえ周辺の話が多いので、とにかく最 小限にしたい。 11
とにかくまずはサクッと動くものを作らせたい。 12
Cloudflare Workers でよいのでは? Cloudflare Workersでコピペだけで作れるLINE Botとかあるなぁ。 13
なんとかなりそう! 14
Cloudflare Workers の導入まで。 亀田さんの記事を参考に。 Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実 行まで
Cloudflare Workers と KV でTodoListアプリを作る 15
VSCode の導入 <- わりとなんとかなった。 Wrangler の導入 <- なんとかなった。 Hello World!
<- なんとかなった。 TodoListアプリ <- なんとかならなかった 16
つまづいた理由 17
18
19
前提知識: HTMLおよびCSS の基礎を理解していること !!!! 20
20分で始めるRubyみたいなのがない!!! 世の中の JavaScript のチュートリアルは、ブラウザ上でちょっとしたアプリを作 るモノがほとんど。 サーバーサイドをいきなりやりたい初心者向けのチュートリアルはない!!! そんな初心者はいない!!! 21
とりあえず、Todolist のアプリの部分はガン無視して、KV の説明とか JSON の説明と かだけやって、LINE BOT のチュートリアルに進むこと。 22
LINE Bot のチュートリアル Cloudflare Workersでコピペだけで作 れるLINE Bot 70行程度のコードで npm パッケージ
も特に使わずに オウム返し Bot が作 れる。 23
手元でのデバッグが難しい。トンネリングツールとかを導入するのも初心者にはハー ドルが高いし、ブラウザで毎回ログを頑張って見るのも面倒。 --> wrangler tail で良い感じにやれるやん。 24
一通りチュートリアルも終えたので、開発に進むことに。 @line/bot-sdk とか、wrangler.toml に compatibility_flags = ["nodejs_compat"] 書くだけでふつーに動く。 Line の
Messaging API と格闘しつつ、Cloudflare とはほとんど格闘せず、だいたい 40時間程度でそれなりに動くものができた。 25
教えてみての感想 Hello World をするまでがとにかくサクッといけるので、とっかかりやすい。 必要なのは、Cloudflareのアカウント、Node.js、多少のターミナルの知識、や る気、根気、興味関心。 「なんかうごいた!」までがはやいのは教える上で重要。 LINE 等本人が親しんだツールで動くのは楽しいっぽい。 wrangler
tail でデバッグなどもしやすい。 Chatbot習作としてはわりと良さそう。 実際のところ、JavaScript の中級者向けとは感じる。 26
作ってみないと教えられないので、自分でも作ってみた https://github.com/torounit/cf-line-bot Hono / D1 / Workers AI を用いて BOT
をこさえてみた。 ちょっとしたことを試すぶんにはとても気軽に出来る。 27
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
感想 Cloudflare に一通りの道具が揃ってるのでとにかく楽。 wrangler tail とか、 Binding 簡単にできるとか。 Github からデプロイもできるようになっていたので便利。
29
余談 async/await: Promise の説明を抜きにこれを正しく説明できなくてめっちゃ大変だ った。 await で止まる(ほんとは止まってない)とか。 文脈によって意味が変わる {} ,
() とか。 30
おわり 31