Webでのリサーチやドキュメントの比較、コードのレビューなどをしているとき、「2つの画面をきれいに並べて、同時にスクロールして見比べたい！」と思ったことはありませんか？
今回は、そんな作業を圧倒的に効率化するChrome拡張機能を開発し、無事にリリースしましたのでご紹介します。
僕自身、過去の仕事でデザインのモックアップと実際のコーディング画面を見比べたり、仕様書と成果物を突き合わせたりする機会が非常に多くありました。その際、毎回手動でウィンドウを2つにちぎって、左右に「よっこらしょ」と並べ、片方をスクロールしてはもう片方も同じ位置までスクロールする……という作業を繰り返していました。これが本当に面倒で、地味にストレスだったんですよね。
世の中にある既存の拡張機能も調べてみたのですが、「画面を分割するだけ」のものや、「スクロールを同期するだけ」のものが多く、僕が理想とする「タブを2つ選んだら、一発で綺麗に分割配置されて、その瞬間にスクロールも同期する」という、ワンストップで動くツールが見当たりませんでした。「ないなら自分で作ってしまえ！」ということで、欲しい機能を詰め込んで実装したのが今回のツールです。
このツールの便利なポイント
この拡張機能の主な強みは以下の3点です。
- 直感的な2タブ選択と自動2分割 ポップアップ画面から、今開いているタブの一覧から並べたい2つをチェックするだけ。ボタン一つで、ディスプレイの解像度に合わせてぴったり50%ずつのサイズ（左右分割、または上下分割のオプションあり）で新しいウィンドウとして配置されます。
- スムーズなスクロール同期 片方のタブをスクロールすると、もう片方も寸分の狂いもなく同時にスクロールします。データの照合や、長文の比較が驚くほど楽になります。
- 「Escキー」でスマートに同期終了 作業が終わったあと、わざわざ拡張機能のボタンをもう一度押しに行くのは面倒ですよね。どちらかの画面で「Escキー」をポンと押すだけで、即座に同期モードが解除されるようにしました。
過去に苦労した「無限ループ」の実装と解決策
実は、この「スクロール同期」という機能、単純にJavaScriptで実装しようとすると高確率で罠にハマります。 片方のスクロールを検知してもう片方を動かすと、今度は動かされた側が「スクロールされた！」と検知して、元の画面を動かし返してしまう……という「無限ループ（お互いに引っ張り合ってガタガタ震える現象）」が起きてしまうのです。
この課題を解決するために、今回はフラグ（制御用の変数）を用いて、プログラムによって強制的にスクロールされた場合は同期処理を一時的にスキップする、といったロジックを仕込みました。また、Escキーでの解除時には、仕込んだイベントリスナーを removeEventListener で綺麗にクリーンアップするようにして、ブラウザのメモリに負荷をかけない設計にしています。（実機で何度もテスト済みです……！）
利用時の注意点など
なお、一般的なウェブサイト（スクロールに応じて要素がふわっと動くようなアニメーションが多用されているサイトなど）では、双方の高さが異なったり、同期がズレて見えたりすることがあります。基本的には、テキストベースのドキュメントや、ソースコード、管理画面の比較などでの利用に留めるべきです。僕の仕事では、仕様書の最終チェックや、新旧サイトのレイアウト崩れの確認で大活躍しています。
よっぽどの事情がない限り、手動で並べる力技でも耐えられる部分ではありますが、一度この「一発分割＆同期」の快適さを知ってしまうと、もう元には戻れません。作業効率を少しでも上げたい方は、ぜひ使ってみてください。
WindowSync — Dual Tab Scroll Sync（Chrome Web Store）
