平和を好む印象派エンジニア、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エンジニア御用達のブラウザになる日も近いかも！
ではまた。
