Webエンジニア向けブラウザ「Blisk」を使ってみた

944 view

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

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

What’s “Blisk”?

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

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

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

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

How to Install.

blisk01

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

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

blisk02Thank You!!

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

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

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

blisk04
こんな感じ。

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

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

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

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

オートリロード

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

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

blisk07
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」で登録完了!

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

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

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

blisk09

今後に期待。

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

ではまた。

\ SNSでシェア /

WRITER

Tatsuya KAWAHARA

制作部 / Web Director , Web Coder Tatsuya KAWAHARA

1988年8月生まれ。 社内少数派のAB型・理系。

大学卒業後、飲食店店長、自動車販売営業を経て、未経験で入社する。

制作部配属後、新オフィスの制作、オフィスチェアの制作、デスクの制作を任される。

最近、Web制作とWebディレクターを始める。

TAGS