Web制作者向けのWebブラウザ「Blisk(ブリスク)」の簡単な使い方

Web制作の現場には必ず必要なのは使い勝手のよいWebブラウザ。Google ChromeやFirefoxなどがあげられますが、Web制作者向けのWebブラウザ「Blisk(ブリスク)」があることをご存知でしょうか。

このWebブラウザは2016年頃に登場したのですが、開発者に特価したブラウザになります。
BliskはWindows版とMac版と両方あります。

もちろん、スマホ、ダブレット端末、ラップトップPC、デスクトップモニターと表示の確認や検証が可能です。

私もちょこちょこ利用していましたが、バージョンもどんどん上がりだんだん使いやすくなっている印象です。

 
あまり知らない方のために、Bliskの簡単な使い方をご紹介します。

 

Bliskの簡単な使い方

まずはオフィシャルサイトからBliskをダウンロードしてきます。

BLISK
https://blisk.io/

トップページからダウンロードのボタンをクリックして、Mac・Windows・Linuxと選択できますので現在お使いのPCのOSにあったものをダウンロードしてください。

Bliskの簡単な使い方01

 
実際にブラウザを立ち上げてWebサイトにアクセスするとこんな感じです。

Bliskの簡単な使い方02

 
左側のDevice listから確認したいスマホを選択できます。
対応デバイスはiOS、AndroidといったOSが。
ベンダーはApple、Google、LG、Samsungあたりです。
あとはOrientationで横向きにしたりと。

 
デスクトップなどの高解像度ディスプレイも確認できます。

Bliskの簡単な使い方03

 
Apple TVやPlayStation、AmazonのFire TV StickなどでもWebブラウザでネットサーフィン等できますので、大きい画面でも確認しておきたいところです。

 
ブラウザの表示ですが、デフォルトでは左側にスマホ、右側にPCの表示となっています。
Layout settingsのアイコンからスマホだけ(Devic only)やPCだけ(Desktop only)と表示を切り替えることができます。

Bliskの簡単な使い方04

 
DevToolsのアイコンからはデベロッパーツールを出すことができます。
Devic DevToolsとDesktop DevToolsと両方出すことが可能です。
(無料版は少し前までデスクトップのみでした)

Bliskの簡単な使い方05
Bliskの簡単な使い方06

 
上の切り離されている方が左側のスマホのデベロッパーツールです。
スマホとPCと両方同時に作業ができるという。
なんともまぁ。

BliskはChromiumをベースに開発したWebブラウザなので、デベロッパーツールもGoogle Chromeとほぼ変わりはありません。

 

そのお隣りのinspector(インスペクター )アイコンでは、マウスを置くと要素の情報が簡単に確認することができます。

Bliskの簡単な使い方07

 
デベロッパーツールを出しても確認できますが、ちょっとだけでツールを出すまでもないという場合はササッと。

 
Error notifierでは、ページ内のエラーを通知してくれます。
エラーがあれば赤いアイコンになります。
クリックすればエラーの詳細へ。

Bliskの簡単な使い方08

 

その他、Webページのスクリーンショットは有料プランでないと使えないので、そこはGoogle ChromeやFirefoxなどを使うと良いでしょう。
Google ChromeやFirefoxでのスクリーンショットはこちらでご紹介しています。
webページ全体を撮る方法です。

【拡張機能は不要】Google Chromeでwebページ全体のスクリーンショットを撮る方法
Firefoxで拡張機能を使わずwebページ全体のスクリーンショットを撮る方法

 

まとめ

Bliskは無料でも使えますが、使える機能に制限があります。
上記で説明した機能で十分であれば良いですが。

無料版は一度に30分利用でき、30分後は利用できなくなり12時間待てば再度使うことが可能です。
Bliskを長い間使いたい場合は有償版にアップグレードするしかないですね。

 
まぁ30分間で確認することやテストすることをあらかじめ決めておけばいいんじゃないかな。

 
俺、私、30分あれば十分という方は是非お使いください。

健闘を祈ります。