FirefoxのアドオンAuto Reloadは、開いているローカルのHTMLが更新されたら自動リロードします。試しにWindowsとMacの共有フォルダにHTMLを置き、両OSのFirefoxで開いてAuto Reloadを有効にしたら同時リロードでき、共有フォルダ越しに普通に使えると判明。同時リロードしなくとも「編集はWindows、結果表示はMac」みたいな作業にも使えそう。
Contents


実行環境

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で自動リロードされる様子です。
≫ Link : autoreload_win_mac.webm


テスト時のスクリーンショット
動画の主な部分です。最初は ↓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）に割り振れるというのは何か役に立ちそう。これに比べると、記事タイトルにした「同時リロード」は実は自分にとって重要ではないです。ただ、タイトルや動画はこの方が分かりやすいかなと考え、そうしました。