iOSのブラウザスクリーンショットは、mixtureとRollPaperを組み合わせるとラクだった件

最近はmixture を使って組み上げることが多いのですが、使っている理由の一つにライブリロードがあります。

正直ライブリロードだけなら珍しいことはないのですが、ブラウザに拡張機能などを入れることなく1つのブラウザを操作するだけで、mixtureのビルドインサーバーに接続しているすべてのブラウザ(デバイスを問わず)のページ移動を同期するため、快適な確認作業とスクリーンショット撮りができるのです。(逆に、各ブラウザで別々のページを確認できないのですが)

スマートフォンやタブレットはもちろん、3DSやPSVITAまで同期していることが分かります。

で、制作途中でページ全体のスクリーンショットを撮る場合、PCはPhamtom.jsとCasper.jsでサクッと撮れるわけですが、iOSはちまちまと各ブラウザを操作してスクリーンショットを撮って…と、とても面倒な作業になります。これが同期機能とアプリを組み合わせることで、少しラクができますよという話です。

ちなみに私が使っているアプリは、岡山を中心にいろいろと活躍されている、ニイハチヨンサン 大月さん作の「RollPaper」です(なのでタイトルに入れました)。RollPaperでmixtureのビルトインサーバーに接続しておけば、PCのブラウザを操作すればRollPaper側も勝手に移動しますので、ページロードが終わったらスクリーンショットを撮るためのボタンを押すだけです。

同期機能については、他ツール(Prepros・CodeKit・Hammer)にはないですし、Adobe Edge Inspectは同期しますが、ページ全体のスクリーンショットを撮ることができないため、mixtureとRollPaper(とか他のアプリ)の組み合わせは、覚えておいて損はないのではと思います。(今回は実機でのレンダリング結果が必要という場合なので、とりあえずならメディアクエリを仕込んでscreenshot.jsで処理した方が絶対的に早いですが)

ちなみに、同期される側(リモート)の読み込みが終わる前にメインで操作しているブラウザ(ホスト)で移動してしまうと、リモート側の読み込み完了がトリガーになって、ホスト側が移動してしまうので注意が必要です。

願わくば、ページロードが終わったら勝手にスクリーンショットを撮るオプションがあるとうれしいです>大月さん

tags