ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CrossBrowseは異なるブラウザ間でのボックス移動を行うHTML5のデモ。

CrossBrowseはnode.js/JavaScript製のフリーウェア(ソースコードは公開されている)。HTML5が普及する中で様々な試みがなされている。まだレガシーなブラウザシェアが高いために実験的な要素が大きいが、それゆえに失敗を恐れずチャレンジできるのが今だ。


これでできるはずなのだが…

JavaScriptを使ってWebブラウザ上で指定ブロックをドラッグしたりするデモはある。だが、異なるウィンドウ間を移動してしまうCrossBrowseのようなデモは見たことがあるだろうか。

CrossBrowseは二つのWebブラウザ間でオブジェクトを渡し合えるソフトウェアだ。デモの動画を見るとその動きがよくわかる。ウィンドウが二つ並んでいて、片方のウィンドウにあるブロックをドラッグしてウィンドウの外に持っていく。そうすると別なウィンドウからブロックが出てくるのだ。


サーバ実行中

これは同じブラウザに限らない。HTML5に対応した別なブラウザからも別なブラウザに対してオブジェクトを渡すことができる。Chrome Experimentsで同じようなデモを見たが、それよりもぐっとシンプルで実用的だ。これを使って面白いソフトウェアを作れないだろうか。


MOONGIFTはこう見る

ローカルのソフトウェアの場合、データの受け渡しはコピーアンドペーストの他に、ドラッグアンドドロップでも渡すことができる。ウィンドウという枠を越えて連携させられるのはそれに近いノリだ。実用性は分からないが、とてもユニークなソフトウェアだ。

実現しているのはWeb Socketを使った同期処理だ。オブジェクトがどれくらいはみ出したか計算しつつ、それを別なウィンドウで再現するということだ。タネが分かってしまえばどうということはないかも知れないが、 こういうチャレンジができるのも今だからこそだ。

Moving an element across browsers | hook_preprocess

arshad/CrossBrowse - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2