【神拡張】どんなサイトもワンクリックで横に置ける！？「Side Window」

こんにちは、まじんです。

今回は私の相方「やまじん」が作ったツールのご紹介なのですが、
これ、やまじんの最高傑作なんじゃないかと感じてます。

記事もやまじんが書いてくれましたが、
ちょっとその前に動画で解説させてください‥！

こんにちは、「チームまじん」の やまじん です。

いつも記事にスキをいただき、ものすごく励みになっております！本当にありがとうございます🙏✨

さて今回も、自分が個人的に 「これなしではもう仕事ができない…」 と思っているツールを紹介させてください。

「GoogleKeepを見ながらサイト横断での作業をしたい…」
「一時的に２つのサイトを表示しながら作業したい…」
「GoogleChatを常に表示しながら作業したい…」

パソコンで作業をしていると、「あるサイトを片手に表示しながら、メイン画面ではタブを切り替えて効率よく作業したい」という強烈なニーズがありますよね。

でも、実際にやろうとすると、ウィンドウをわざわざ2つに分離して、それぞれマウスでチマチマとサイズを調整して、綺麗に並べて…と、とにかく面倒くさい。しかも少し別のアプリを開いただけで、せっかく並べたウィンドウが背後に隠れてしまってイライラ…。

この「ブラウザの画面分割のめんどくささ」を極限までなくし、さらにChrome標準機能の限界を突破するために、「Side Window」 という拡張機能を作りました！

今回は、このツールの便利な使い方から、「なぜ作ったのか？」という開発の裏側、そして今後の拡張機能開発の幅を広げる技術的な面白さまで、たっぷりと語りたいと思います。

この機能拡張も、普段のガッツリと作りこんでいるツールとは少し異なり、面白い技術の共有（Tips）的な側面が強いので、今回もチームまじんのツールに詳しい「マジクラメンバー」の皆様に向けて情報発信させていただきます！

開発の背景と、既存機能の「イライラする限界」

「画面の横にサイトを置きたい」。

これを実現するために、最初はChromeに元から備わっている機能や仕組みを色々と試しました。しかし、どれも私のやりたいこと（ユーザーの要望）を完璧には満たしてくれませんでした。

① Chrome標準「サイドパネル」の悲しい弱点

Chromeには拡張機能用のサイドパネルがあります。ここに外部のサイトを表示しようとすると、システム的には「別のサイトの画面をパコッとはめ込む（iframeという仕組み）」必要があります。
しかし、ここには致命的な弱点がありました。

Gmail、Googleドライブ、GoogleKeepなど、セキュリティが堅いサイトは「うちのサイトを勝手にはめ込むな！」とエラーになって表示できない のです。

一番横に置きたい「メール」や「ファイル管理」「メモ」が見られない。これでは「どんなサイトでも横に開いて作業したい」という一番の要望が叶いません。

② 普通に「タブ分割で2つ並べる」ことの限界

では、普通にブラウザのタブ分割機能で、ページを2つ並べればいいのでは？と思うかもしれません。
ですが、これも実際にやってみると不便なことだらけです。例えば「右側に資料を固定したまま、左側のメイン画面だけを色々なタブに切り替えて使う」といった、柔軟な運用がどうしてもうまくできません。サイズをいちいち合わせるのもストレスです。

これらの「かゆいところ」をすべて解決するために行き着いたのが、「ウィンドウを完全に独立させつつも、まるでメインウィンドウと一体のグループであるかのようにコントロールする」 という独自のアプローチでした。

「Side Window」の凄さ：まるでメイン画面の一部のような「圧倒的一体感」

Side Windowは、システム的にはメイン画面とは「別の独立したウィンドウ」として横に切り出されています。しかし、使っている感覚は 「あたかもメインウィンドウの端っこに直接くっついているサイドバー」 であるかのように錯覚するはずです。

様々な技術的実験を経て、以下のような「圧倒的な一体感」を実現しました。

• ワンタッチで最適な幅へシュッと展開
  ボタン一つ（またはショートカットキー）を押すだけで、現在見ているタブが切り離され、ちょうどいい幅のサイドウィンドウとして画面の横にスッと開きます。

• 好みの幅を「自動記憶」＆「自動復元」
  「もうちょっと横幅が欲しいな」とドラッグして微調整した場合、Side Windowはその幅を賢く自動記憶します。次回開いたときも、あなたが決めた「同じ幅」でピンポイントに開いてくれます。

• 使い終わったら、メイン画面のサイズも自動で元通り
  サイドウィンドウでの用事が終わって「閉じる」ボタンを押せば、縮んでいたメインウィンドウの幅が、瞬時に元の広いサイズに自動で戻ります。

• 魔法のような「最前面への自動ストーキング（画面前後関係連動）」
  これが一番苦労したポイントです！ Excelや他のアプリで作業していて、ブラウザ全体が他の画面の裏に隠れてしまうことがありますよね？
  そんな時、メインウィンドウの端っこをクリックして手前に持ってくるだけで…なんと独立しているはずのサイドウィンドウも、「おっと、ご主人様（メイン画面）が前に出たぞ！俺もいかなきゃ！」と連動して、自動的に「メイン画面のすぐ手前」まで引き上げられるのです！
  サイド画面だけが裏に取り残されて探し回る、あの強烈なストレスが一切ありません。

💡 シチュエーション別の「作業を絶対に止めない」使い方

実際の使い勝手も、皆さんの集中力や作業フローを一切止めないように設計しています。

1. ショートカット「Alt+S」で一瞬で横へ

一番よく使うのがこれです。横に置きたいページで「Alt+S」を押すだけ。
ここがポイントなのですが、タブがサイドへ切り出された後、元のメイン画面は「一つ前に見ていたタブ」に自動で戻ります（復帰します）。 つまり、わざわざ自分でタブを戻す手間なく、作業を全く中断せずに資料を横に置くことができます。

2. メインとサイドを「一瞬で入れ替え（神スワップ）」

「サイドに置いてたページ、細かい文字を読みたいからやっぱりメインの大きい画面で見たい！」
そんな時は、サイド画面の端に浮かぶ小さなツールバーの「スワップボタン」を押すか、メイン画面で「Alt+S」を押すだけ。一瞬で、メイン画面とサイド画面の中身（タブ）が入れ替わります。画面サイズをマウスで調整し直す必要はありません。

3. 気になるリンクを「直接」サイドで開く

ブラウザで検索結果を見ているときに「この記事、とりあえず横に置いておきたいな」と思ったら、リンクを右クリックして『サイドウィンドウで開く』を選択。今の画面はそのままに、リンク先だけが横にパッと表示されるので、情報収集のスピードがめちゃくちゃ加速します。

【開発・マジクラメンバー向け】ウィンドウ制御が切り開く、新しいブラウジングの可能性

さて、ここからは少し「つくる側」の少しマニアックな話になります。このツールが、なぜただの便利ツールではなく「面白い共有Tips」なのかというお話しです。

この「Side Window」、今回は画面を分割するために使っていますが、要素技術として非常に面白い可能性を秘めています。
このアプリのキモは、「拡張機能を使って、複数のバラバラのウィンドウを、まるで一つの統合されたアプリのようにグループとしてコントロールする」 という点にあります。これを使うことで、今後のChrome拡張機能の開発の幅は劇的に広がるはずです。

可能性1：ウィジェット的なアプローチによる、複数ウィンドウの展開

例えば、スマホのウィジェットのように、カレンダーやタスクリスト、チャットなどを「複数の小さなポップアップウィンドウ」として画面の端に散りばめて表示する。そして、拡張機能がそれらの位置やレイアウトを自動で記憶し、コントロールする。
メインウィンドウを前面に出した時に、それらのウィジェット群も一体となってスッと現れたり隠れたりするような仕組みが作れます。これを使えば、巨大なディスプレイの業務効率を極限まで高める「統合アプリケーション」がブラウザ上だけで実現できるでしょう。

可能性2：対象のサイトに、拡張機能のUIを直接「注入」する

今回、サイドウィンドウとして切り出されたどんなサイトでも、その左下にはスワップや幅調整ができる「専用の画面内ツールバー」が常に浮かんでいます。
これは、プログラムを使って、表示しているサイト自体の画面設計に、拡張機能側から無理やりUI（ボタンなど）を「注入（改造）」しているからです。
iframe（はめ込み枠）という制限された空間ではなく、完全に独立したタブとして開いているからこそ、どんなセキュリティの堅いサイトであっても制限を突破しつつ、「何でも自由に操作できる」状態を作り出しているのです。

最後に：ソースコードの公開と販売について

今回開発した「Side Window」ですが、もちろんマジクラのメンバーには無料で公開をさせていただきます！

しかし、過去のマジクラメンバー向けの記事に対して「会員にはならないけれど、自身の勉強のための技術的な参考に単発の記事として購入して継続してコードを見れるようにしてほしい」というご要望を多数いただきました。

そこで今回、非会員の方でも単発で購入できる 【買い切り（5,000円）】 の設定も追加でしております。技術的に興味がある方で、非会員の方は買い切りでの購入もできるようにいたしましたので、ご活用ください。

ご自身の究極の業務効率化ツールとしてそのまま業務に使っていただくのはもちろん、新しい拡張機能を開発するための技術ベース・要素技術の参考として、ぜひご活用ください！

👇 ソースコードのダウンロードはこちらから！