Cloudflare WorkersのDurable Objectsでチャットを実装する

っていうコードが公式のリポジトリにあって、なかなか読み応えのあるコードだったので記事に。

GitHub - cloudflare/workers-chat-demo

Cloudflare Workersを軽く試した感想

Cloudflare Workers docs

巷で話題のエッジワーカーというやつ。

お仕事で使えるかもしれないというわけで、Docsを一通り読んでみて、ちょっとしたコードをデプロイしてみたところまでの感想。

慣性ドラッグの慣性のところだけを実装したライブラリ

作った。

いわゆるGoogleMapのようなものを作りたい場合に使えるやつ。

まあだいたいはDOMイベントまわりまで面倒みてくれるライブラリを使う事が多いとは思うけど、そのすべてを自作しないといいけない場合、こういう部品だけがあるのも便利かと思い。

GitHub - leader22/inertia-state

preventDefault()ではなく、touch-actionを使う

• たとえばカルーセルとか
• たとえばcanvasのお絵かきツールとか

ユーザーがページ内の特定の領域をドラッグ操作するなにかを実装するときの話。

それを実装してて誰しもがハマるのが、ユーザーがその領域を触ってるときにページ全体がスクロールされちゃったりするというもの。

で、これを防ぐための方法について。

無音を鳴らして自動再生ポリシーをアンロックする

Safariなどのブラウザには、音の自動再生に制限があって、ロード時にいきなり再生！というのがだいたいできない時代。（この制限にはいろいろ条件があるけども）

そのため、「このサイトでは音が出ます」みたいなモーダルを出して、まずそれをクリックしてもらい、そのタイミングでこの制限を突破するために一手間かけるということが行われてきた。

で、そのひと手間で盛大に音を鳴らすわけにはいかないので、無音を鳴らすという半ばハック的な方法があるのである。

その無音の鳴らし方を毎回思い出すのが大変なので、いい加減メモっておく。