先日、以下の記事を読んでBliskというWEB開発者用ブラウザを知りました。
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。
プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。
以下では、そう思うに至った理由について述べたいと思います。
この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。
目次
Blisk（ブリスク）とは
Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。
現在は、WindowsとMacに対応しています。（Linuxは間もなく）
Bliskは、ChromeやOperaと同じBlinkエンジンを利用しています。
そのため、これまでChromeを使ったことがある人なら、難なく使い始めることができると思います。当然これまで、Chromeで利用している拡張なども問題なく利用できます。（※ただし、現在は英語版しかないので英語は苦手な方にはちょっと抵抗があるかも）
Bliskには、WEB制作で動作確認の効率が飛躍的に向上する以下の機能が標準搭載されています。
- 1画面でパソコンとモバイル表示を同時に確認できる
- パソコン・モバイル表示のスクロールが同期する
- 様々なモバイル端末をワンクリックでエミュレート表示できる
- ローカルで編集したファイルを即座にブラウザ上で表示反映してくれる
僕はBliskをインストールして、上記の機能を見た瞬間、「こんな便利なブラウザがあったのか…。今までの動作確認はなんて面倒くさいことをしていたんだ…。」とまで思いました。
ほんと、あまりにも使い勝手のよさに「一目ぼれした」と言ってもいいと思います。
WEB開発がはかどる便利な機能
以下では、それぞれの機能を詳細に見て、惚れた理由を述べたいと思います。
1画面でパソコンとモバイル表示を同時に確認できる
Bliskをインストール後、とりあえず自分のサイトのURLを入力して、表示させて見た瞬間、いきなり以下のような画面が現れて驚きました。
見た瞬間、「えっ！同一画面上でモバイルとパソコン表示が同時に見れる！」と衝撃を受けました。
しかも、モバイル表示は、ちゃんと「スマホのユーザーエージェント」を適用された上で表示されます。
僕はこれまで、Wordpressテーマの開発などで、動作確認をするときは、以下のような手順をとっていました。
- まずは通常表示でパソコンでの表示を動作確認
- 拡張やデベロッパーツールでユーザーエージェントをスマホに変換
- （Firefoxの場合は）レスポンシブデザインビューなどで画面幅の調整
- モバイルでの動作確認
これまで、パソコンとモバイル表示の動作確認をするときは、これだけの手順をかけていたものが、Bliskでは「ページをただ表示させるだけ」と大幅に手間が改善されました。
もちろん、パソコンとモバイル画面それぞれにデベロッパーツールを開いて、それぞれのソースコードなどを確認することもできます。
それぞれ、読み込み直してデベロッパーツールを開く必要がないのでマジ簡単。
パソコン・モバイル表示のスクロールが同期する
しかも、単にパソコンとモバイル表示が同時表示されるだけではありません。
パソコンかモバイルのどちらかの画面をスクロールさせると、スクロールが同期します。
なので「パソコンをスクロールして動作確認したので、次はモバイルでスクロール」なんて手順を踏む必要はありません。
どちらか一方をスクロールさせれば、もう一方もスクロールします。
なので、パソコン表示を動作確認しながらも、モバイルでの不具合を発見なんてこともあり得ます。
様々なモバイル端末をワンクリックでエミュレート表示できる
そして、モバイル端末をエミュレートした動作確認は、以下のようにワンクリックで切り替えて、どんどんテストすることができます。
この記事を書いた時点で、以下のモバイル端末の表示をエミュレートすることができます。
スマホ端末
- iPhone 4
- iPhone 5
- iPhone 6
- iPhone 6 Plus
- Nokia N9
- Samsung Galaxy S3
- Samsung Galaxy S4
- Google Nexus 4
- Google Nexus 6
タブレット端末
- iPad mini
- iPad Air Retina
- Google Nexus 7
- Google Nexus 10
ローカルで編集したファイルを即座にブラウザ上で表示反映してくれる
あと、ローカルサーバーのドメインと、プロジェクトフォルダを登録さえしてしまえば、プロジェクトフォルダ内のファイルが変更された瞬間に、ブラウザがリロードされページが更新されます。
CSSなどを編集した後、「ブラウザのリロードボタンを押す」という、この一手間が地味に面倒くさいんですよね。
Bliskを利用すれば、ファイルに変更が加わったと同時に、モバイルとパソコンの画面が更新されます。
こういった動作は、一応、Chromeなどの拡張使えば、できないこともないです。
けれど、Chrome拡張を使う方法は、デベロッパーツールを開いていなければいけないという制限などもあって、微妙に使いづらいところもあったのですが、Bliskだと監視フォルダを登録しておくだけです。
Bliskで、プロジェクトフォルダを登録する方法は以下。
まとめ
Bliskにはその他にも、嬉しい機能がありますが、僕が一瞬にして惚れてしまった機能は主にこの4つです。
Bliskは、まだベータ版ではありますが、今後以下のような機能も追加予定のようで、今からとても楽しみにしています。
- スクリーンショット機能
- コード解析機能
- バグ・トラッカーとプロジェクト管理システムとの統合機能
追加される解析機能には、クロスブラウザ対応などを見る機能もつくそうで。ありがたや。
とりあえず今のところBliskには、英語版しかありませんが、Chromeを普段、利用できているのであれば、問題なく使用できると思います。
というわけで、Bliskは「パソコンとモバイルそれぞれで動作確認するのが面倒臭い」なんて人には、もってこいのブラウザだと思います。Wordpressカスタマイズの動作確認ブラウザとしても、おすすめ。
サイト Blisk
Blisk新バージョンがでていました!!