WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた

Blisk

先日、以下の記事を読んでBliskというWEB開発者用ブラウザを知りました。

それで、「そんなにいいのかな?」と半信半疑でインストールして、使ってみた瞬間、惚れました。

プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。

以下では、そう思うに至った理由について述べたいと思います。

スポンサーリンク
レクタングル(大)広告

Blisk(ブリスク)とは

Download Blisk - a browser for web developers

Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。

現在は、WindowsとMacに対応しています。(Linuxは間もなく)

Bliskは、ChromeやOperaと同じBlinkエンジンを利用しています。

そのため、これまでChromeを使ったことがある人なら、難なく使い始めることができると思います。当然これまで、Chromeで利用している拡張なども問題なく利用できます。(※ただし、現在は英語版しかないので英語は苦手な方にはちょっと抵抗があるかも)

Bliskには、WEB制作で動作確認の効率が飛躍的に向上する以下の機能が標準搭載されています。

  • 1画面でパソコンとモバイル表示を同時に確認できる
  • パソコン・モバイル表示のスクロールが同期する
  • 様々なモバイル端末をワンクリックでエミュレート表示できる
  • ローカルで編集したファイルを即座にブラウザ上で表示反映してくれる

僕はBliskをインストールして、上記の機能を見た瞬間、「こんな便利なブラウザがあったのか…。今までの動作確認はなんて面倒くさいことをしていたんだ…。」とまで思いました。

ほんと、あまりにも使い勝手のよさに「一目ぼれした」と言ってもいいと思います。

WEB開発がはかどる便利な機能

以下では、それぞれの機能を詳細に見て、惚れた理由を述べたいと思います。

1画面でパソコンとモバイル表示を同時に確認できる

Bliskをインストール後、とりあえず自分のサイトのURLを入力して、表示させて見た瞬間、いきなり以下のような画面が現れて驚きました。

ブラウザ画面にパソコンとモバイルでの表示が同時に表示される

見た瞬間、「えっ!同一画面上でモバイルとパソコン表示が同時に見れる!」と衝撃を受けました。

しかも、モバイル表示は、ちゃんと「スマホのユーザーエージェント」を適用された上で表示されます。

僕はこれまで、Wordpressテーマの開発などで、動作確認をするときは、以下のような手順をとっていました。

  1. まずは通常表示でパソコンでの表示を動作確認
  2. 拡張やデベロッパーツールでユーザーエージェントをスマホに変換
  3. (Firefoxの場合は)レスポンシブデザインビューなどで画面幅の調整
  4. モバイルでの動作確認

これまで、パソコンとモバイル表示の動作確認をするときは、これだけの手順をかけていたものが、Bliskでは「ページをただ表示させるだけ」と大幅に手間が改善されました。

もちろん、パソコンとモバイル画面それぞれにデベロッパーツールを開いて、それぞれのソースコードなどを確認することもできます。

パソコンとモバイルそれぞれにデベロッパーツールを開くことができる

それぞれ、読み込み直してデベロッパーツールを開く必要がないのでマジ簡単。

パソコン・モバイル表示のスクロールが同期する

しかも、単にパソコンとモバイル表示が同時表示されるだけではありません。

パソコンかモバイルのどちらかの画面をスクロールさせると、スクロールが同期します。

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などの拡張使えば、できないこともないです。

リロード不要!Sublime TextでCSS変更を即座にChromeに反映させる方法
僕はCSSなどの動作確認をするときに、小さく書いてブラウザでチェックします。 こうすると、小さなミスにも気づきやすいですし、問題がどこ...

けれど、Chrome拡張を使う方法は、デベロッパーツールを開いていなければいけないという制限などもあって、微妙に使いづらいところももあったのですが、Bliskだと監視フォルダを登録しておくだけです。

Bliskで、プロジェクトフォルダを登録する方法は以下。

Bliskのオートリフレッシュ機能の設定方法。ローカルファイルの編集でブラウザを自動更新。
前回、BliskというWEB開発向けブラウザを使用したら、使い勝手が良すぎたということを書きました。 その、Bliskの使い勝手の...

まとめ

Bliskにはその他にも、嬉しい機能がありますが、僕が一瞬にして惚れてしまった機能は主にこの4つです。

Bliskは、まだベータ版ではありますが、今後以下のような機能も追加予定のようで、今からとても楽しみにしています。

  • スクリーンショット機能
  • コード解析機能
  • バグ・トラッカーとプロジェクト管理システムとの統合機能

追加される解析機能には、クロスブラウザ対応などを見る機能もつくそうで。ありがたや。

とりあえず今のところBliskには、英語版しかありませんが、Chromeを普段、利用できているのであれば、問題なく使用できると思います。

というわけで、Bliskは「パソコンとモバイルそれぞれで動作確認するのが面倒臭い」なんて人には、もってこいのブラウザだと思います。Wordpressカスタマイズの動作確認ブラウザとしても、おすすめ。

サイト Blisk