平和を好む印象派エンジニア、Tatsuyaです。

今回は、マルチデバイスビューを簡単に検証できるブラウザ、
「Blisk」をご紹介いたします。

What’s “Blisk”?

Blisk（ブリスク）です。Briskではありません。
Blisk本来の意味は

鋳造や機械加工や溶接によって加工されたターボ機械の2つの構成要素を代替した回転円板とブレードによって構成されるエンジンの構成要素の一つである。
-Wikipedia

だそうです。
それはさておき、この由来は関係あるのか、「PCビュー」と「モバイルビュー」の2つを同時に検証できるブラウザなのです。

それではインストールしてみましょう。

How to Install.

https://blisk.io/
公式ページはこちらです。

「DOWNLOAD BLISK」でダウンロードが始まります。

Thank You!!

無事にインストールされると、Google Chromeによく似たブラウザが立ち上がります。

お気づきかもしれませんが、Bliskはまだ日本語に対応しておりません。

では実際にWebサイトを見てみましょう。

こんな感じ。

左ににモバイルビュー、右にPCブラウザビューが表示されます。
そして右端で、主なモバイル端末が切り替えられるようになっています。

Phone

• iPhone4
• iPhone5
• iPhone6
• iPhone6 plus
• iPhone7
• iPhone7 plus
• Nokia N9
• Sumsung Galaxy S3
• Sumsung Galaxy S4
• Sumsung Galaxy S5
• Sumsung Galaxy S6
• Sumsung Galaxy S6 Edge
• Sumsung Galaxy None 5
• LG G3
• Google Nexus 4
• Google Nexus 6

Tablets

• iPad mini
• iPad Air Retina
• Google Nexus 7
• Google Nexus 10

私愛用のSONY Xperiaさんがいないですね・・・。
海外ベースなので仕方ないですが。

PCブラウザビューとモバイルビューの境界をドラッグすることで、
左側の領域はアクティブにレスポンシブビューで確認できます。

その他、使って嬉しい機能を解説しましょう。

インスタントインスペクタ

はい。勝手に名前付けました。
アドレスバーすぐ右のボタン（Click to enable inspector）をクリックすることで、
ブラウザ上の要素をホバーしただけで、タグ名、CSS、ボックスモデルが確認出来ます。
ショートカットは Ctrl + I
もちろんいつものインスペクタも使えます。
ショートカットは Ctrl + Shift + I ですね。

オートリロード

ソースコードに変更があったときに、自動で更新してくれます。
エディタで編集して、Ctrl + S → Alt + Tab → Ctrl + R って結構面倒ですよね。
それがエディタで保存するだけでブラウザに反映してくれます。

まずは自動更新を有効にさせたいページを開きます。
2つの矢印で円をつくっているボタン（Enable to refresh）をクリックします。

New watacherという画面が出てくるので、

「You are about to set up the new watcher for auto refreshing the domain:」
適用させたいページのドメインをプルダウンから選択しましょう。

「Blisk will refresh:」
・All opened tabs　（開いているタブ全て）
・Active tab only　（アクティブページのみ）
を選択します。

「Watch file formats:」
監視するファイルの種類を登録します。
こちらはカンマで区切ることで複数登録できます。

「Watch folders:」
監視対象にしたいローカルフォルダを選択します。

「SAVE AND ENABLE AUTO REFRESH」で登録完了！

こんなページがあったとして・・・。

適当なCSSを書き換えます。
今回は文字を赤くしましょう。

こんな風に書いて、保存するだけで、ブラウザが自動更新されます！

今後に期待。

Bliskはまだベータ版だそうです。
インスペクタの文字が小さかったり、日本語に対応してなかったりと、現時点では惜しい点はありますが、今後の更新に期待しましょう。
Webエンジニア御用達のブラウザになる日も近いかも！

ではまた。