前回、BliskというWEB開発向けブラウザを使用したら、使い勝手が良すぎたということを書きました。
その、Bliskの使い勝手のよさの一翼を担っているのが「プロジェクトファイルの編集を監視して変更があったらブラウザを自動で更新してくれる機能」です。
動作イメージとしてはこんな感じ。
以下では、その設定方法の一例として、「Wordpressのテーマファイルフォルダを監視して、ローカルサーバー上で表示させているページを自動更新する方法」について紹介したいと思います。
目次
主な手順
Bliskのオートリフレッシュ機能を利用する一例として、Instant WordPressというローカル環境構築ツールを使用した自動更新方法について紹介です。
主な手順は以下です。
- Instant WordPressのインストール
- Bliskで動作確認サイトを開く
- Bliskでオートリフレッシュ機能の設定
もう既に、ローカル環境が用意してある場合は、それを利用すれば良いので、設定はとても簡単です。
Instant WordPressのインストール
まずは、Wordpress開発用のローカル環境を手軽に構築できる、Instant WordPressをインストールします。
インストール方法は、以下のページの手順で行ってください。
Bliskで動作確認サイトを開く
次に、Bliskを起動して、ローカルWordpress URLを開きます。
Instant WordPressを利用している場合は、起動画面の以下の部分に表示されています。
デフォルトのままだと、以下のようなURLです。
この、ローカルWordpress URLをBliskのアドレスバーに入力して開きます。
すると、Blisk上でローカルサーバで動作しているWordpressが表示されます。
Bliskでオートリフレッシュ機能の設定
あとは、Blisk側で設定するだけです。
Bliskのツールバーにあるオートリフレッシュボタン()をクリックしてください。
すると、「Auto-refresh」設定画面が表示されるので「ADD NEW WATCHER」ボタンをクリックしてください。
すると以下のような「NEW WATCHER」ダイアログが表示されるので、これに設定を書き加えることになります。
個々の設定は、以下のように行います。
- リフレッシュする対象ドメインを選択ボックスから選択。
- Blisk will refresh:「全ての表示タブ」を自動更新するには「All opened tabs」を、「アクティブタブだけ」を更新するには「Active tab only」を選択。
- Watch file formats:監視するファイルの拡張子をカンマ区切りで選択します。デフォルトは「html,css,js」。例えば、PHPファイルも監視対象に含めるには「html,css,js,php」のように編集します。
- Watch folders:「ADD FOLDER」ボタンをクリックしてダイアログから監視対象をフォルダを選択。
- 最後に「SAVE AND ENABLE AUTO REFRESH」ボタンを押して設定完了。
動作確認
あとは、監視フォルダ内のファイル(例えばCSSファイル)を、編集して保存した瞬間、Bliskの表示画面が自動更新されます。
エディター上で保存しただけで、即座にブラウザ上で反映されます。
まとめ
これでコードを書き終えた後に、ブラウザのリフレッシュボタンを押す面倒さから解放されました。
リロードボタンを押してから、実際に表示されるまで、わずか数秒ではありますが、この時間が地味にまだるっこしかったりするので、勝手に更新されるのは助かります。
そんなわけで、一旦Bliskでの動作確認を体験したら、ちょっと通常のブラウザでの動作確認には戻れないかもしれません。
サイト Blisk