20260822_make_website

Transcript

1. 2026/08/22 Kyoto.なんか #8 自分の Web サイトを作る: 高速化編 k586
2. 自己紹介 名前: k586 (かづき こはる) Twitter: @k586 GitHub: k586jp https://k586.jp 長いことパソコンなんでも屋 (ヘルプデスク) をしてました 一応 IT 職の人間ではあるが……
3. 宣言通り、会のレベルを下げにきました！ https://x.com/k586/status/1959215902064509131 はてなさん、いつも会場ありがとうございます！
4. ふりかえり 2024 年 失業、無職 なにかするぞ！と思い、
5. ふりかえり 2024 年 失業、無職 なにかするぞ！ --> ドメイン購入 さくらレンタルサーバ契約 Cloudflare アカウント作成 さくらに HTML を置いて Cloudflare DNS でドメイン設定 プロキシ化もする
6. ふりかえり 2025 年 Cloudflare Workers というものがあるらしい TypeScript でサーバーサイドの処理が書けるらしい しかしそもそも、クライアントサイドの経験もほぼ無い ↓ まずはクライアントサイド中心で日記の処理を実装してみる
7. 2025 年 イメージ図 Worker (ルーター) クライアント クライアント (Markdown 処理) さくら API (DB 接続) さくら SQLite
8. ここで問題が……
9. ここで問題が…… 遅い！ カクつく！ (表示まで 1 秒以上)
10. ここで問題が…… Worker (ルーター) さくら API (DB 接続) さくら SQLite クライアント クライアント (Markdown 処理) DB 更新したいけど 認証どうするの？
11. 2026 年 自分の Web サイトを作る: 高速化編 ～ CSR から SSR へ ～
12. 2025 年 イメージ図 (旧) Worker (ルーター) クライアント クライアント (Markdown 処理) さくら API (DB 接続) さくら SQLite
13. 2026 年 イメージ図 (新) Worker (ルーター) Woker (DB 接続) Woker (Markdown 処理) クライアント D1 SQLite
14. 2026 年 イメージ図 (新) Worker (ルーター) Woker (DB 接続) D1 SQLite Woker (Markdown 処理) クライアント 全部 Cloudflare に集約して高速化 外部からアクセスできるのはルーターのみ
15. 高速化 (1) さくらに置いている DB からデータを取得するのに、 0.7 秒前後かかっている。 DB を Cloudflare D1 にし、 Cloudflare Worker から呼び出すことで、 取得時間が短縮できるはず。(多分)
16. 高速化 (2) クライアントサイドでは、 以下の JS を動かしていた。 これを Mermaid.js だけ にする。 • Marked.js • Prism.js • Mermaid.js • DOMPurify
17. 高速化 (2) クライアントサイドでは、 以下の JS を動かしていた。 これを Mermaid.js だけ にする。 Cloudflare Workers で、 以下を動かす。 出力した HTML は、 Cloudflare D1 に保存。 • Marked.js • Prism.js • Mermaid.js • DOMPurify --> Marked.js --> refractor --> エスケープ処理
19. 実際の URL 2026 年版: https://k586.jp 2025 年版: https://workers-20260812-k586jp.k586.workers.dev
20. 高速化まとめ 速くなった！
21. 認証 Worker (ルーター) Woker (DB 接続) D1 SQLite Woker (Markdown 処理) クライアント クライアントから DB を更新する機能を つけたい
22. 認証: 結論 Cloudflare Access を 設定して、 記事編集ページに ログイン認証を追加した。 自力で Google 認証等 を実装すべきかと考えていたが、 今回の用途なら Cloudflare の管理画面をポチポチするだけで 済んだ。
23. (余談) 謎の JS エラーが出る…… Executing inline script violates the following Content Security Policy directive 'script-src 'self' *.cloudflare.com *.cloudflareinsights.com *.jsdelivr.net'. Either the 'unsafeinline' keyword, a hash ('sha256XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked.
24. (余談) 謎の JS エラーが出る…… Executing inline script violates the following Content Security Policy directive 'script-src 'self' *.cloudflare.com *.cloudflareinsights.com *.jsdelivr.net'. Either the 'unsafeinline' keyword, a hash ('sha256XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked. Cloudflare が自動で挿入する JS がブロックされているので、 ヘッダーで nonce を設定して許可してね、とのこと。
25. Hono で nonce の設定 function useSecureHeaders(context: Context, next: Next) { return secureHeaders({ (中略) contentSecurityPolicy: { scriptSrc: [ NONCE, "'self'", "'strict-dynamic'", 'https://*.cloudflare.com', 'https://*.cloudflareinsights.com' ], styleSrc: [ (中略) ], (中略) } })(context, next); }
26. Hono で nonce の設定 nonce はランダムな文字列っぽい。 nonce の文字列が一致した JS だけ許可されるっぽい。 あまり nonce について理解しないまま、 簡単に Hono で設定できてしまった……。 (また勉強したほうがよさそう)
27. おわりに (感想) ここ数年で、15 年ぶりくらいに JS 系の言語を触った。 Hono (& TS) を触ると、モダンな言語の思想みたいなものを 感じる気がする。 自分でサーバーを建てなくても、 Routing や Middleware のようなことができるのか。 さくらレンタルサーバもメール等で使い続ける予定。 ちなみにさくらは Cloudflare Origin CA 証明書が設定できる。 たぶんレンタルサーバーだとめずらしいはず。
28. おわりに (感想) 最後にこちらの本！ とても参考になりました。 D1 関連とか Service bindings とか、 なんとなく存在くらいしか 知らなかったので、 いろんな機能を知れてよかったです。 https://gihyo.jp/book/2026/978-4-297-15438-7