記事の詳細

最近、BLISKというブラウザが話題になっているのをご存知でしょうか?

WEBサイトを閲覧するための一般的なブラウザ(Edge、Firefox、Chrome、Safariなど)というよりも、WEB制作をする開発者にとって便利なブラウザであることを目指して作られたブラウザです。

インストールして使ってみましたので報告したいと思います!

まずは「BLISK」をダウンロードして、インストール!

BLISKをブラウザで開きます。以下のようなサイトが開きますので、右上の「DOWNLOAD」をクリックしてください。

BLISK

BLISKを使用するOSを選択する画面になります。今回はWindowsを選択しています。(Mac版、Linux版もあります。)

2016-08-20_22h52_06

ダウンロードしたファイルをクリックしてインストールをします。

BLISKのインストールファイル

「インストールしますか?」的な質問は全くないのはβ版だからでしょうか?インストールが終わると勝手にBLISKが開きます。
※最初はインストールしないタイプのアプリケーションかと勘違いしてしまいました。。。

最初はチュートリアルが開きますので、NEXTをポチポチ数回押すと、設定画面が開きます。特に設定しなくてOKです。

2016-08-20_22h53_17

Windowsのスタート画面にもしっかり登録されてますので、インストールが完了したらスタート画面から起動させればOKです。

2016-08-20_23h10_26

WEBサイトを表示するとスマホとパソコンの両方が同時表示

ここまでで無事にインストールが完了したと思いますので、BLISKでWEBサイトを開いてみましょう。

新しいタブを開いて、URLを書いてみてください。とりあえず弊社のURLを入れてみました。

2016-08-21_00h00_48

URLを入力して、ENTERキーを押すと・・・

なんということでしょう!スマホで見た時の画面とパソコンで見た時の画面が同時に表示されてるではありませんか!!

2016-08-20_23h12_09

しかも、スマホ側でも、パソコン側でもどちらかを選んでスクロールさせると、スマホの画面とパソコンの画面が同時にスクロールしていきます。

2016-08-20_23h24_43

最近のWEB制作はレスポンシブWEBデザインが主流ということもあり、常にパソコンの画面とスマホの画面とを行き来しながら開発を進めていくわけですが、パソコンだけにCSSを適用した時にスマホの画面ではデザインが崩れてたりすることがあったりするので、常に両方の確認をしていたのですが、これが1つの画面で同時に完了するというのは相当な効率化です。

デベロッパーツールももちろん使えます

BLISKはChromeと同じBlinkエンジンを利用しているということもあり、デベロッパーツールもChromeを使っている方なら見たことある画面で何ら問題なく使うことができます。

2016-08-20_23h27_38

Chromeのデベロッパーツールの使い方に関してはこんな記事も書いてます。

モバイルデバイスの種類も豊富

レスポンシブWEBデザインでよく問題になるのが、iPhone5だと問題ないのに、iPhone6だとデザインが崩れていたりすることです。iPhoneの種類だけに留まらず、他のAndroidだったり、タブレットだったりと画面サイズが異なるモバイルデバイスを切り替えながら表示確認していかないと思わぬところで表示崩れが出てしまうこともしばしば・・。

Chromeのデベロッパーツールもいくつかの機種がプリセットされていて便利なのですが、BLINKも同様にデバイスのプリセットがあるので便利です!

一番左側のスマホ一覧から選ぶだけで表示が変わります。(左がiPhone4、右がiPhone6)

2016-08-20_23h25_00 2016-08-20_23h25_11

横にした時の表示にも対応しています。

このボタンを押すと・・・

2016-08-20_23h26_29

横画面表示になります!

2016-08-20_23h26_41

この他にも便利な機能が

この他にも便利な機能があります。(詳細はBLINKの公式WEBサイトをご覧ください。

  • Auto Refresh
    ローカルで開発している場合、プロジェクトフォルダを指定しておけば変更した瞬間にBLINKの画面も更新されます。つまり、F5を押してCSSを読み込み直す必要がないということです。
  • Screen Shot(現在未実装)
    現在表示されいてる画面のスクリーンショットを撮ることができます。
  • Web page Analytics(現在未実装)
    JavaScriptのエラー、表示速度のチェック、クロスブラウザ対応などが行えます。

WEBサイトの制作の効率化には間違いなくオススメ

今回、BLISKを使ってみて便利だと思ったことをまとめます。

  • 1画面でスマホとパソコンの表示を確認することができる
  • モバイルデバイスの切り替えが素早くできる
  • デベロッパーツールもChromeと同様に使える

この3つが画面の切替などを必要とすることなくできる点は相当な効率化になると思います!現在はβ版ですが、現在未実装の機能であるScreen ShotやWeb page Analyticsが実装されるなど今後の開発に期待大です。

WEB制作現場の方にオススメの開発用ブラウザ「BLISK」です。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る