スマホとPC表示を同時確認・自動更新：超絶便利ブラウザ「Blisk」

「Blisk」はWEB制作者のために作られたブラウザです。
一度使い始めるとやみつきになります。

レスポンシブデザインが主流の現在、WEB制作はパソコン表示とモバイル表示の2つを確認しながら進めて行く必要があります。

「Blisk」では、いちいちユーザーエージェントを切り替えたりする必要無く、PCとモバイル両方の表示を同時に確認できます。

また、両方の表示を同期してスクロールしてくれます。

さらにローカル環境でWEB制作を行う場合、コードの内容を変更すると表示を自動更新します。

Bliskのインストール

「Blisk」はChromiumベースのブラウザで、Chromeと同じBlinkエンジンを搭載しています。

2016年10月現在、Windows版とMac版がベータ版で提供されており、Linux版も公開予定です。

ベータ版と言いつつ、WEB制作に使うには何の不足もありません。
バリバリ実戦で使用できます。

ダウンロードはこちらから。
https://blisk.io/

右上のダウンロードボタンを押して

使用するOSに合わせてインストールファイルをダウンロードします。

Bliskの基本機能

ソフトを立ち上げて、URLを入れると該当サイトが分割表示され、
画面右がPC表示、左がスマホやタブレットなどのモバイル端末での表示となります。

モバイル端末は、シミュレートする機種を左側のサイドバーから選択可能です。

「iPhone」は4以降の各バージョン、iPad mini、GoogleのNexus4と6と7と10、NokiaのN9などがあります。

モバイル表示のシミュレートは、単純に画面幅のサイズを変更するだけではありません。
以下のようなシミュレーションをサポートしています。

◇画面解像度・ピクセル比率
◇ユーザーエージェント
◇タッチスクリーンでの動作確認

なんとRetinaの高解像度ディスプレイの表示確認にまで対応しています。

画面右上の回転アイコンを押せば、モバイル端末を横表示にすることもできます。

超絶便利なオートリフレッシュ機能

Bliskではもう一つ超絶便利な機能があります。

WEBサイトをローカル環境で制作している場合、プロジェクトフォルダを指定するだけで、HTMLやCSS・JSなどのソースを変更すると自動で画面を更新してくれます。

これはとても便利ですね。
いちいちF5押してブラウザを更新する必要がありません。

設定手順は以下。

まず、ローカル環境の該当ページをBliskに表示します。

画面右上の「オートリフレッシュボタン」クリックします。

設定画面が表示されます。

「Watch folders」項目下の「ADD FOLDER」ボタンをクリックします。

プロジェクトフォルダを指定します。

最後に一番下の「SAVE AND ENABLE AUTO REFRESH」ボタンをクリックします

これで設定はOKです。
以後、ローカルでサイトのコードをいじる度に、Bliskの画面が最新表示に自動更新してくれます。

他はデフォルトのままいじる必要は無いと思いますが、一応解説。

「Blisk will refresh」は、自動更新するタブを、全てのタブにするかアクティブタブに限定するかの選択です。

「Watch file formats」は、どのコードが変更になった時に自動更新するかの選択です。
デフォルトでは「html」「CSS」「js」が記入されています。

デベロッパーツールも使えます

BliskはChromeと同じデベロッパーツールを使用できます。

Windowsは「F12キー」、Macは「Command＋Option＋Iキー」で表示されます。

これはChromeと同じBlinkレンダリングエンジンを搭載しているためで、Chromeに慣れてる制作者はすぐに使えると思います。

Chromeの拡張機能が利用できます

同じレンダリングエンジンのため、Chromeの拡張機能もそのまま使えます。

制作系の拡張機能、

◇ColorZilla（カラーピッカー）
◇MeasureIt（サイト内のサイズが計れる）

なども使えます。

また、よく使う便利機能の、

◇Pocket
◇Evernote Web Clipper

も普通に使えます。

実装予定の機能

今後、Bliskに実装予定の機能としては、

◇Screen Shot：スクリーンショット機能
◇Web page Analytics：Webページ分析機能

などがあります。