Web制作に欠かせないツールの一つとして、ブラウザがあげられます。ご存じの通り、ブラウザにもさまざまな種類があります。機能やカスタマイズ性も異なるので、自分の使い方に合うブラウザを使っていきたいところです。
さて、数あるブラウザの中でBliskというブラウザがいま注目を集めています。一般ユーザー向けのブラウザではなく、WebデザインやWeb制作に特化した専門的なブラウザの一つです。
本記事ではBliskの特徴から基本的な使い方までをまとめています。Web制作の業務を効率化したり、より便利に進めていける機能が備わっています。WebデザイナーやWebエンジニアの方にぜひ参考にしていただければ幸いです。
Bliskとは？
» Download Blisk – a browser for web developers
Bliskとは、ChromeのベースにもなっているChromiumをベースに開発されたブラウザです。無料で利用することができ、Windows版とMac版がリリースされています。Linux版も近いうちに提供される予定があるようです。
Bliskの最大の特徴は、Web開発に特化して作られているところでしょう。そのため、Webデザインやコーディング、プロトタイピング、テストなど、Web開発に役立つ機能が豊富に盛り込まれているのです。
もちろん、ChromeやFirefoxなどのブラウザでもWeb開発を行うことは可能です。しかしWeb制作に特化していることもあり、Bliskはよりシンプルで効率的な作りになっています。Web制作に携わる方であれば、ぜひ一度試されてみることをオススメします。
Bliskの使い方
それでは、実際にBliskをインストールして使っていきましょう！
インストールする
まずはBliskをインストールします。下のリンクからBliskの公式ページを開いて、右側の「DOWNLOAD BLISK」ボタンをクリックしてください。ダウンロード用のダイアログが開くので、OSを選択してダウンロードを行います。
» Download Blisk – a browser for web developers
インストールについては、特に難しい操作などはありません。通常のアプリケーションと同様の手順でOKです。
なお、記事執筆時点での最新バージョンは、1.0.125.166となっています。
Webサイトを見る
インストールしたBliskを使ってWebサイトを見てみましょう。Bliskを起動すると、下のようにウェルカムページが表示されます。
上にある入力欄にURLを入力して任意のページを表示してみましょう。ここではAppleの公式サイトを開いています。
左側にスマホ/タブレット向けのページが、右側にはPC向けのページが表示がされていることがわかります。Bliskではこのように、異なるデバイスでの表示を同時に確認することができるレイアウトになっています。いちいち表示を切り替える手間が必要ないので、楽ちんですね。
左側のスマホ/タブレット表示では、下記のデバイスから選択することができます。
| スマホ（Phones） | iPhone 4 |
|---|---|
| iPhone 5 | |
| iPhone 6 | |
| iPhone 6 Plus | |
| iPhone 7 | |
| iPhone 7 Plus | |
| Nokia N9 | |
| Samsung Galaxy S3 | |
| Samsung Galaxy S4 | |
| Samsung Galaxy S5 | |
| Samsung Galaxy S6 | |
| Samsung Galaxy S6 Edge | |
| Samsung Galaxy Note 5 | |
| LG G3 | |
| Google Nexus 4 | |
| Google Nexus 6 | |
| タブレット（Tablets） | iPad mini |
| iPad Air Retina | |
| Google Nexus 7 | |
| Google Nexus 10 |
ページをスクロールしてみると、片方の動きに追従してもう片方も自動でスクロールされます。これはScroll syncというもので、Bliskならではの機能の一つです。PC版と比較してスマホページは縦に長くなるので、ユーザビリティなどのチェックにも役だってくれるでしょう。
右上の「Switch Landscape/Portrait」をクリックすることで、スマホ/タブレット表示をポートレート/ランドスケープ間で自由に切り替えることも可能です。
スクリーンショットを撮る
Bliskではワンクリックでスクリーンショットを撮ることができます。Web開発ではスクリーンショットを必要とする場面が多いので、簡単にスクリーンショットが撮れるのは嬉しいポイントです。
スクリーンショットを撮るには、画面右上の「Screenshots and screen recorder」をクリックします。
ボタンの名前にあるようにスクリーンショットだけではなく、スクリーンでの操作を録画することも可能です。
Inspectorを使う
Chromeなどのブラウザでもお馴染みの、Developer ToolsやJavaScript Consoleを使うこともできます。さらに便利なのが、Inspector機能です。
画面上をホバーすることで、任意の要素のInspectorを自在に閲覧、操作することができます。Inspector機能は、右上の「Click to enable Inspector」をクリックすることでON/OFFが切り替えられます。
また右上の「Errors Notifier」から、ページのエラーを素早くチェックすることも可能です。
自動リフレッシュをONにする
Web開発では、頻繁にコードを編集するかと思います。そのため、コードを編集したらブラウザでページを更新する手間が必要になります。Bliskには自動リフレッシュ機能が備わっているので、コードを書きかえたら自動でページがリロードされるようになっています。
自動リフレッシュをONにするには、ページ右上の「Enable auto refresh」を押せばOKです。
外部サービスと連携する
Bliskでは、Web制作系の外部サービスとの連携も可能です。JenkinsやJIRAなどのテストツールやバグトラッカーのほか、RedmineやTrelloなどのプロジェクト管理系のツールにも対応しています。
使い慣れたツールがあれば、Bliskと連携させてWeb制作を効率化していきましょう。
あとがき
Web開発専用のブラウザ、Bliskの特徴や基本的な使い方についてご紹介しました。
Web開発をスピードアップすることを目標に開発されているだけあって、開発業務を効率化してくれる便利な機能がいくつも備わっています。
専門的なツールとは言っても、記事でご紹介したように操作は難しくはないでしょう。日ごろの開発業務に、活用してみてはいかがでしょうか？