jsPinch — ピンチ操作を1日だけ自力実装した話

2017年6月9日。コミットログを見ると、このツールは1日で書いています。

コードはGitHubにあります: 42tahara/jsPinch

スマホWebで画像をピンチズームしたい、という要件は昔からよくあります。ところが当時、シンプルに使えるピンチのライブラリが意外と無かったんです。正確に言うと、例は山ほどある。多すぎるくらいある。でも、どれもクオリティが低かった。特に、拡大・縮小でコンテンツがステージ（表示領域）からはみ出したときにどう戻すか、という境界処理をちゃんと書いてあるものが見つからない。あったのかもしれませんが、探すのが面倒になって、touchstart / touchmove / gesturestart / gesturechange を全部自分で受けて、素のJavaScript（+jQuery）で書きました。

やってみて分かったこと

• 1本指はドラッグ、2本指はピンチ、と指の本数でモードが切り替わるので、状態管理が本題になる
• 拡大の中心を2本指の中点に合わせないと「思った場所」が拡大されない
• そして本丸は境界処理。ズームアウトでステージの外が見えた、ズームインで端が切れた、をどう自然に戻すか

いま振り返ると

勉強のためでもありましたが、「探すより書いたほうが早い」ことは実際にあります。一度自分で書いたおかげで、以後ピンチ系の不具合は中で何が起きているか想像がつくようになりました。触って理解した技術は、忘れません。