FirefoxのアドオンAuto Reloadは、開いているローカルのHTMLが更新されたら自動リロードします。試しにWindowsとMacの共有フォルダにHTMLを置き、両OSのFirefoxで開いてAuto Reloadを有効にしたら同時リロードでき、共有フォルダ越しに普通に使えると判明。同時リロードしなくとも「編集はWindows、結果表示はMac」みたいな作業にも使えそう。
実行環境
Macの操作・画面確認は、昨日と同様WindowsからTeamViewer経由でしました。FirefoxにAuto Reloadを入れるには、アドオンのタブを開いてAuto Reloadで検索すれば簡単に見つかると思います。設定は両OSとも ↓ こんな感じにしました。デフォルトと違うのは、リロード時の通知非表示と、リロードまでの秒数を縮めて素早くリロードさせる点。 今回、Windows側に共有フォルダを作り、それにMacから接続しました。FinderからConnect to Serverのダイアログを開き、「smb://Windows機のIPアドレス」と入力。Connectを押すと共有フォルダが表示され、フォルダを選んでWindows側のユーザ名とパスワードを入力すれば終わり。Finderでは新しいデバイスとして表示されました。 Windowsに戻って、共有フォルダ下に適当なテスト用HTMLを作成。それを両OSのFirefoxで開き、どちらかのエディタでHTMLを開けば(今回はWindowsのMeryを使用)全ての準備終わりです。
テスト時の動画(WebM形式)
ブラウザで再生できない場合、動画部分の下のリンクからダウンロードして適当なプレーヤ(紹介記事:5月25日)で観て下さい。動画は、テスト用HTMLを徐々に変えて(コメント部分をアンコメントして)上書き保存を何回か行い、そのたび両OSのFirefoxで自動リロードされる様子です。
テスト時のスクリーンショット
動画の主な部分です。最初は ↓ Windows側のFirefoxと共有フォルダ内だけ出ます。Firefoxは既にテスト用HTMLを読み込み済みですが、全文がコメントアウトされているので何も表示されていません。フォルダ内に.DS_Storeファイルがあるとおり、Macから接続中。 次に、TeamViewer経由でMacの画面が出ます。こちらのFirefoxでも既にテスト用HTMLを読み込み済み。アドレスがfile:///Volumes/共有フォルダ名...となってます。 Windows側で編集開始。HTMLをエディタ(Mery)で開き、徐々にコメントを外していきます。 ↓ 編集を終えて上書き保存すると、両OSのFirefoxが自動リロードしてHTMLの表示が変わります。後はこの繰り返し。リロードの際、アクティブウィンドウは変わらずエディタのままです。編集作業を続行するのにフォーカスを戻す必要がなく、とても便利。
補足など
TeamViewer経由でなくMacの実機の画面でも、当然ながら自動リロードされています。動画には入っていませんが、HTMLをMacで編集・保存した時も、同じように両OSで自動リロードされました。あと、Windowsから他のPCの共有フォルダにアクセスする場合は、ドライブレターを割り当てて「ローカルファイルのように見せて」Firefoxで読み込まないと、自動リロードが効かなかったです。 7月1日の記事に書いたとおり、Auto ReloadはHTMLだけでなく画像、PDF、SVGも(Firefoxで開ければ)自動リロードでき、HTMLが読み込むJavaScriptやCSSを変更保存した時もリロードします。どのアプリケーションがファイルを変更したかは関係ないので、作業に使う上で自由度が高い。 このAuto Reloadを共有フォルダ越しに、WindowsとMac両方でシームレスに使えると分かったのが今日の眼目。編集と結果表示を別々のPC(OS)に割り振れるというのは何か役に立ちそう。これに比べると、記事タイトルにした「同時リロード」は実は自分にとって重要ではないです。ただ、タイトルや動画はこの方が分かりやすいかなと考え、そうしました。