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

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

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

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

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

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

両方の表示を同期してスクロール

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

この記事は2016年10月3日に書いたのですが、
2016年11月1日以降、「Blisk」は30日間のみ無料で使えて、
その後は一ヶ月「9.99」ドルの課金に変更になりました。
https://app.blisk.io/pricing
うーむ、残念ですね。
まあ、向こうも商売だから仕方がないか・・

~ 目次 ~

  • Bliskのインストール
  • Bliskの基本機能
  • 超絶便利なオートリフレッシュ機能
  • デベロッパーツールも使えます
  • Chromeの拡張機能が利用できます
  • 実装予定の機能

 

Bliskのインストール

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

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

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

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

sblog20161003b

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

sblog20161003c

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

Bliskの基本機能

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

sblog20161003d

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

sblog20161003e

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

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

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

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

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

sblog20161003f

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

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

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

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

設定手順は以下。

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

sblog20161003g

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

sblog20161003h

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

sblog20161003i

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

sblog20161003j

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

sblog20161003o

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

sblog20161003p

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

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

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

sblog20161003q

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

sblog20161003r

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

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

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

sblog20161003s

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

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

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

制作系の拡張機能、

ColorZilla(カラーピッカー)
MeasureIt(サイト内のサイズが計れる)

なども使えます。

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

Pocket
Evernote Web Clipper

も普通に使えます。

実装予定の機能

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

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

などがあります。