記事の詳細
スマホとパソコンを同時に確認!便利すぎるブラウザ「BLISK」でWEB制作効率UP!
最近、BLISKというブラウザが話題になっているのをご存知でしょうか?
WEBサイトを閲覧するための一般的なブラウザ(Edge、Firefox、Chrome、Safariなど)というよりも、WEB制作をする開発者にとって便利なブラウザであることを目指して作られたブラウザです。
インストールして使ってみましたので報告したいと思います!
今回のブログの見出しはコチラです!
まずは「BLISK」をダウンロードして、インストール!
BLISKをブラウザで開きます。以下のようなサイトが開きますので、右上の「DOWNLOAD」をクリックしてください。
BLISKを使用するOSを選択する画面になります。今回はWindowsを選択しています。(Mac版、Linux版もあります。)
ダウンロードしたファイルをクリックしてインストールをします。
「インストールしますか?」的な質問は全くないのはβ版だからでしょうか?インストールが終わると勝手にBLISKが開きます。
※最初はインストールしないタイプのアプリケーションかと勘違いしてしまいました。。。
最初はチュートリアルが開きますので、NEXTをポチポチ数回押すと、設定画面が開きます。特に設定しなくてOKです。
Windowsのスタート画面にもしっかり登録されてますので、インストールが完了したらスタート画面から起動させればOKです。
WEBサイトを表示するとスマホとパソコンの両方が同時表示
ここまでで無事にインストールが完了したと思いますので、BLISKでWEBサイトを開いてみましょう。
新しいタブを開いて、URLを書いてみてください。とりあえず弊社のURLを入れてみました。
URLを入力して、ENTERキーを押すと・・・
なんということでしょう!スマホで見た時の画面とパソコンで見た時の画面が同時に表示されてるではありませんか!!
しかも、スマホ側でも、パソコン側でもどちらかを選んでスクロールさせると、スマホの画面とパソコンの画面が同時にスクロールしていきます。
最近のWEB制作はレスポンシブWEBデザインが主流ということもあり、常にパソコンの画面とスマホの画面とを行き来しながら開発を進めていくわけですが、パソコンだけにCSSを適用した時にスマホの画面ではデザインが崩れてたりすることがあったりするので、常に両方の確認をしていたのですが、これが1つの画面で同時に完了するというのは相当な効率化です。
デベロッパーツールももちろん使えます
BLISKはChromeと同じBlinkエンジンを利用しているということもあり、デベロッパーツールもChromeを使っている方なら見たことある画面で何ら問題なく使うことができます。
Chromeのデベロッパーツールの使い方に関してはこんな記事も書いてます。
- 【WEBサイトの色(カラーコード)が知りたい!】えっ!?拡張アプリは使わないの?
- Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法
- Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法②
モバイルデバイスの種類も豊富
レスポンシブWEBデザインでよく問題になるのが、iPhone5だと問題ないのに、iPhone6だとデザインが崩れていたりすることです。iPhoneの種類だけに留まらず、他のAndroidだったり、タブレットだったりと画面サイズが異なるモバイルデバイスを切り替えながら表示確認していかないと思わぬところで表示崩れが出てしまうこともしばしば・・。
Chromeのデベロッパーツールもいくつかの機種がプリセットされていて便利なのですが、BLINKも同様にデバイスのプリセットがあるので便利です!
一番左側のスマホ一覧から選ぶだけで表示が変わります。(左がiPhone4、右がiPhone6)
横にした時の表示にも対応しています。
このボタンを押すと・・・
横画面表示になります!
この他にも便利な機能が
この他にも便利な機能があります。(詳細は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」です。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。