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

Blisk

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

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

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

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

この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。

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

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

僕はCSSなどの動作確認をするときに、小さく書いてブラウザでチェックします。 こうすると、小さなミスにも気づきやすいですし、問題がどこにあ...

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

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

前回、BliskというWEB開発向けブラウザを使用したら、使い勝手が良すぎたということを書きました。 その、Bliskの使い勝手のよさの...

まとめ

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

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

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

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

Blisk release 0.62.4925.237のバージョンアップにより、プレミアムデバイス機能、スクリーンショット機能、スクリーンレコーダ機能、クラウドストレージ機能は追加されました。ただし、これらの機能を利用するには、月額制の有料ユーザーになる必要があるようです。詳しくは料金ページを参照してください。プレミアム機能を利用しなければ、無料で利用できます。

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

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

サイト Blisk

『WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた』へのコメント

  1. 名前:みき 投稿日:2016/10/21(金) 18:16:27 ID:0be948570

    Blisk新バージョンがでていました!!

  2. アバター画像 名前:わいひら 投稿日:2016/10/22(土) 16:27:15 ID:200d36932

    プレミアムデバイス機能、スクリーンショット機能、スクリーンレコーダ機能、クラウドストレージ機能、デベロッパーツールを使わなくても調査できる機能がついたんですね。
    ただ、プレミアムプランに加入していないと、使えないのか。残念。
    値段は、月額13ドル、もしくは25ドルと、月額制なのがちょっとハードル高いですね。
    Bliskのプレミアムプラン

    ただ、無料版でも十分すぎるくらい便利なので本当にありがたいブラウザです。

    Blisk release 0.62.4925.237

  3. 名前:みき 投稿日:2016/10/23(日) 02:39:54 ID:4df39d55f

    せめて一括にしてほしかったです・・・

  4. 名前:izu 投稿日:2016/11/02(水) 03:37:38 ID:20de98245

    すっすごいですね!!
    知りませんでしたw(゜ー゜;)wッ!!

    でも…。
    まだ私には使えなそう。。。。。。

    でも、素晴らしい情報ありがとうございます。!!

  5. アバター画像 名前:わいひら 投稿日:2016/11/02(水) 12:49:13 ID:859f4cee0

    このブラウザは、プロのWEB制作者向けというよりは、僕も含めた単なるサイト運営者の「動作確認用」などにこそ向いているかもしれません。
    サイトをカスタマイズした後の、表示確認が非常に簡単にできると思います。
    もし、今後サイトをカスタマイズすることがあれば、結構簡単なので是非使ってみてください。

  6. 名前:みき 投稿日:2016/11/06(日) 03:03:49 ID:347eda21d

    わいひらさん!!
    いまBliskをみたら有料じゃなくても使えるようになっていました!!
    (スクリーンショット・スクリーンレコーダーなど)
    あと前までなかったと思うのですが
    NOTIFICATIONS soon
    PAGE ANALYSIS soon
    TEAMWORK soon
    INTEGRATIONS soon
    CODE REVIEW soon
    の項目が追加されていました
    soonなのでまだ実装されていませんが・・・

  7. 名前:みき 投稿日:2016/11/06(日) 03:06:13 ID:347eda21d

    撮ったスクリーンショットはSCREENSHOTSで見れるんですね・・・
    結構便利です!!

  8. アバター画像 名前:わいひら 投稿日:2016/11/06(日) 16:43:28 ID:2436516bf

    えっ!バージョンアップされてから一部機能が有効化されて、以前無料で使えた機能が「時間制限あり」になった仕様が元に戻ったんですか?しかもスクリーンショット機能も無料で。

    実は僕は、β版が取れて以降、Bliskの機能が制限されたと聞いて、「便利な機能が使えなくなっては困る」ということでv0.62.4925.237からあえてアップデートしていませんでした。

    ちょっと、仮想マシンにインストールして動作を確認してみようと思います。

  9. 名前:みき 投稿日:2016/11/06(日) 17:20:54 ID:a9d5f80c2

    アカウントを取ればできるんじゃないですかね
    時間制限がありますけど・・・

    You did not select any plan. Current plan is trial with free 30 minutes daily.

    毎日無料で30分使えるみたいです
    今まで通りエミュレーターとかは完全無料で使えるみたいです
    ※一部機種は完全無料で使えないみたいですたしかiPhone7とか

  10. アバター画像 名前:わいひら 投稿日:2016/11/07(月) 12:19:44 ID:27aebba82

    やっぱり、時間制限はあるんですね。
    料金表に書かれている以下の機能が30分だけになるっぽいのかな。
    BliskのProfessional版の機能と料金
    あ、でも僕の場合、Wordpressのテーマ作成や、カスタマイズの動作確認以外はBliskを使用しないので、30分でも十分と言えば十分かも。

  11. 名前:みき 投稿日:2016/11/12(土) 03:10:54 ID:ba6cc0d95

    えっ・・・
    途中のアプデで追加された機種だけ有料(30分無料)かと思ってたら
    今まであったのも使えなくなっていました・・・
    Bliskの意味・・・

  12. アバター画像 名前:わいひら 投稿日:2016/11/13(日) 16:49:40 ID:dc01ea04f

    そうなんですよ…。
    その30分制限がついたので、僕はまだバージョンアップしてなくて、今後もしばらくはアップデートしないで使おうと思っています。
    とりあえず、まだネットを探せば、旧バージョン(0.62)があったので、バックアップ保存しておきました。

  13. 名前:山田昭 投稿日:2017/10/25(水) 14:00:59 ID:04bd224c5

    先程、問合せしたものです。スマホ画面は左側に隠れていました。無事に解決しました。お騒がせしました。

  14. アバター画像 名前:わいひら 投稿日:2017/10/26(木) 13:18:55 ID:732a2cd04

    了解いたしました。