Bliskのオートリフレッシュ機能の設定方法。ローカルファイルの編集でブラウザを自動更新。

前回、BliskというWEB開発向けブラウザを使用したら、使い勝手が良すぎたということを書きました。

WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
先日、以下の記事を読んでBliskというWEB開発者用ブラウザを知りました。 それで、「そんなにいいのかな?」と半信半疑でインストールし...

その、Bliskの使い勝手のよさの一翼を担っているのが「プロジェクトファイルの編集を監視して変更があったらブラウザを自動で更新してくれる機能」です。

動作イメージとしてはこんな感じ。

ローカルファイルを編集したら自動でリフレッシュ

以下では、その設定方法の一例として、「Wordpressのテーマファイルフォルダを監視して、ローカルサーバー上で表示させているページを自動更新する方法」について紹介したいと思います。

Mac版も出ていますが、今回はWindows版の方法です。Macも似たような設定方法かと思います。
スポンサーリンク
レクタングル(大)広告

主な手順

Bliskのオートリフレッシュ機能を利用する一例として、Instant WordPressというローカル環境構築ツールを使用した自動更新方法について紹介です。

主な手順は以下です。

  1. Instant WordPressのインストール
  2. Bliskで動作確認サイトを開く
  3. Bliskでオートリフレッシュ機能の設定

もう既に、ローカル環境が用意してある場合は、それを利用すれば良いので、設定はとても簡単です。

Instant WordPressのインストール

まずは、Wordpress開発用のローカル環境を手軽に構築できる、Instant WordPressをインストールします。

インストール方法は、以下のページの手順で行ってください。

Instant Wordpressで超簡単にワードプレスローカル環境を構築する方法
今回は、Windowsに、これ以上無いくらいに簡単にWordpressローカル環境を構築する方法の紹介です。 僕は2台のWin...
既に別のローカル環境が用意してある場合は、それでもOKです。XAMPPとか、MAMPとか、その他でもOK。

Bliskで動作確認サイトを開く

次に、Bliskを起動して、ローカルWordpress URLを開きます。

Instant WordPressを利用している場合は、起動画面の以下の部分に表示されています。

Instant WordPressのローカルWordpress URL

デフォルトのままだと、以下のようなURLです。

http://127.0.0.1:4001/wordpress/

この、ローカルWordpress URLをBliskのアドレスバーに入力して開きます。

ローカルWordpress URLをアドレスバーに入力して開く

すると、Blisk上でローカルサーバで動作しているWordpressが表示されます。

Instant WordPressのURLを開いたBliskの状態

このとき、Wordpress管理画面から、カスタマイズしたいテーマや、プラグインなどは利用できる状態にしておいてください。

Bliskでオートリフレッシュ機能の設定

あとは、Blisk側で設定するだけです。

Bliskのツールバーにあるオートリフレッシュボタン(オートリフレッシュボタン)をクリックしてください。

Bliskのオートリフレッシュボタン

すると、「Auto-refresh」設定画面が表示されるので「ADD NEW WATCHER」ボタンをクリックしてください。

ウォッチファイルの追加

すると以下のような「NEW WATCHER」ダイアログが表示されるので、これに設定を書き加えることになります。

ニューウオッチャーダイアログ

個々の設定は、以下のように行います。

ニューウオッチャーダイアログ設定後

  1. リフレッシュする対象ドメインを選択ボックスから選択。
  2. Blisk will refresh:「全ての表示タブ」を自動更新するには「All opened tabs」を、「アクティブタブだけ」を更新するには「Active tab only」を選択。
  3. Watch file formats:監視するファイルの拡張子をカンマ区切りで選択します。デフォルトは「html,css,js」。例えば、PHPファイルも監視対象に含めるには「html,css,js,php」のように編集します。
  4. Watch folders:「ADD FOLDER」ボタンをクリックしてダイアログから監視対象をフォルダを選択。
  5. 最後に「SAVE AND ENABLE AUTO REFRESH」ボタンを押して設定完了。
「SHOW ADVANCED SETTINGS」ボタンは特に設定する必要ないかと思います。設定できる内容は、「ブラウザキャッシュの有効/無効(デフォルトは無効)」と「更新の遅延時間(秒)(デフォルトは0)」のみです。これは、デフォルトの設定で問題ないと思います。

動作確認

あとは、監視フォルダ内のファイル(例えばCSSファイル)を、編集して保存した瞬間、Bliskの表示画面が自動更新されます。

Bliskのオートリフレッシュ機能の動作確認

エディター上で保存しただけで、即座にブラウザ上で反映されます。

まとめ

これでコードを書き終えた後に、ブラウザのリフレッシュボタンを押す面倒さから解放されました。

リロードボタンを押してから、実際に表示されるまで、わずか数秒ではありますが、この時間が地味にまだるっこしかったりするので、勝手に更新されるのは助かります。

そんなわけで、一旦Bliskでの動作確認を体験したら、ちょっと通常のブラウザでの動作確認には戻れないかもしれません。

サイト Blisk