2026/08/22 Kyoto.なんか #8 自分の Web サイトを作る: 高速化編 k586 

自己紹介 名前: k586 (かづき こはる) Twitter: @k586 GitHub: k586jp https://k586.jp 長いことパソコンなんでも屋 (ヘルプデスク) をしてました 一応 IT 職の人間ではあるが…… 

宣言通り、会のレベルを下げにきました！ https://x.com/k586/status/1959215902064509131 はてなさん、いつも会場ありがとうございます！ 

ふりかえり 2024 年 失業、無職 なにかするぞ！と思い、 

ふりかえり 2024 年 失業、無職 なにかするぞ！ --> ドメイン購入 さくらレンタルサーバ契約 Cloudflare アカウント作成 さくらに HTML を置いて Cloudflare DNS でドメイン設定 プロキシ化もする 

ふりかえり 2025 年 Cloudflare Workers というものがあるらしい TypeScript でサーバーサイドの処理が書けるらしい しかしそもそも、クライアントサイドの経験もほぼ無い ↓ まずはクライアントサイド中心で日記の処理を実装してみる 

2025 年 イメージ図 Worker (ルーター) クライアント クライアント (Markdown 処理) さくら API (DB 接続) さくら SQLite 

ここで問題が…… 

ここで問題が…… 遅い！ カクつく！ (表示まで 1 秒以上) 

ここで問題が…… Worker (ルーター) さくら API (DB 接続) さくら SQLite クライアント クライアント (Markdown 処理) DB 更新したいけど 認証どうするの？ 

2026 年 自分の Web サイトを作る: 高速化編 ～ CSR から SSR へ ～ 

2025 年 イメージ図 (旧) Worker (ルーター) クライアント クライアント (Markdown 処理) さくら API (DB 接続) さくら SQLite 

2026 年 イメージ図 (新) Worker (ルーター) Woker (DB 接続) Woker (Markdown 処理) クライアント D1 SQLite 

2026 年 イメージ図 (新) Worker (ルーター) Woker (DB 接続) D1 SQLite Woker (Markdown 処理) クライアント 全部 Cloudflare に集約して高速化 外部からアクセスできるのはルーターのみ 

高速化 (1) さくらに置いている DB からデータを取得するのに、 0.7 秒前後かかっている。 DB を Cloudflare D1 にし、 Cloudflare Worker から呼び出すことで、 取得時間が短縮できるはず。(多分) 

高速化 (2) クライアントサイドでは、 以下の JS を動かしていた。 これを Mermaid.js だけ にする。 • Marked.js • Prism.js • Mermaid.js • DOMPurify 

高速化 (2) クライアントサイドでは、 以下の JS を動かしていた。 これを Mermaid.js だけ にする。 Cloudflare Workers で、 以下を動かす。 出力した HTML は、 Cloudflare D1 に保存。 • Marked.js • Prism.js • Mermaid.js • DOMPurify --> Marked.js --> refractor --> エスケープ処理 

No content

実際の URL 2026 年版: https://k586.jp 2025 年版: https://workers-20260812-k586jp.k586.workers.dev 

高速化まとめ 速くなった！ 

認証 Worker (ルーター) Woker (DB 接続) D1 SQLite Woker (Markdown 処理) クライアント クライアントから DB を更新する機能を つけたい 

認証: 結論 Cloudflare Access を 設定して、 記事編集ページに ログイン認証を追加した。 自力で Google 認証等 を実装すべきかと考えていたが、 今回の用途なら Cloudflare の管理画面をポチポチするだけで 済んだ。 

(余談) 謎の 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. 

(余談) 謎の 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 を設定して許可してね、とのこと。 

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); } 

Hono で nonce の設定 nonce はランダムな文字列っぽい。 nonce の文字列が一致した JS だけ許可されるっぽい。 あまり nonce について理解しないまま、 簡単に Hono で設定できてしまった……。 (また勉強したほうがよさそう) 

おわりに (感想) ここ数年で、15 年ぶりくらいに JS 系の言語を触った。 Hono (& TS) を触ると、モダンな言語の思想みたいなものを 感じる気がする。 自分でサーバーを建てなくても、 Routing や Middleware のようなことができるのか。 さくらレンタルサーバもメール等で使い続ける予定。 ちなみにさくらは Cloudflare Origin CA 証明書が設定できる。 たぶんレンタルサーバーだとめずらしいはず。 

おわりに (感想) 最後にこちらの本！ とても参考になりました。 D1 関連とか Service bindings とか、 なんとなく存在くらいしか 知らなかったので、 いろんな機能を知れてよかったです。 https://gihyo.jp/book/2026/978-4-297-15438-7