DOE HOME > Web技術Tips > ブラウザ > レスポンシブデザインの表示を確認するのに便利なブラウザ『Blisk』

category_15_m

レスポンシブデザインの表示を確認するのに便利なブラウザ『Blisk』

Pocket

blisk-img04

Bliskとは?

ひとつのURLでPCとモバイル端末をいっぺんに表示して確認ができるブラウザです。

 

レスポンシブデザインのサイトを見ているとき、PCでの幅とスマホでの幅をいちいち切り替えて確認するのは正直面倒くさいですが、Bliskを使えばそういう作業がなくなります。

 

このブラウザの優れている点は、PCでの表示はChromeと同じですが、モバイル端末での表示がまるで実機かのように表示され、操作できることです。

 

任意のモバイル端末でエミュレートでき、左のメニューから好きな端末を選んでテストできます。

 

以下のモバイル端末から選択できます。

 

blisk-img03

 

エミュレータ上でもユーザーエージェントはちゃんと切り替わるようです。すごい。

 

ただiPhoneのiOSは8.0と微妙に古いです。

インストール方法 

blisk-img02

 

blisk-img09

 

Download Blisk - a browser for web developers

 

WindowsとMacに対応しています。

 

Linuxのメニューはありますが、ダウンロードボタンがありません。未対応のようです。

 

ダウンロードしたexeファイルを実行すると、いきなりBliskが立ち上がり使えるようになります。

 

blisk-img15

 

Bliskの機能

BlickはURLバー右のメニューに独自の機能が追加されています。

 

名称アイコン説明
Disable emulationblisk-img10モバイル端末の非表示切り替え
Switch Landscape/Portraitblisk-img11モバイル端末を横にする
Blisk setupblisk-img12Bliskのセットアップ画面を表示
Enable auto refreshblisk-img13オートリフレッシュ機能の設定
Manage scroll syncblisk-img14同期スクロールの設定

 

オートリフレッシュ機能と同期スクロールはBlisk独自の機能です。

オートリフレッシュ機能

blisk-img06

 

オートリフレッシュ機能とは、監視するフォルダを登録しておいて、そのフォルダ内のファイルに更新があった場合即座にリロードしてブラウザに反映する機能です。

 

Bracketsのライブプレビューのようなものでしょうか。

 

監視できるフォルダはローカル限定で、リモート操作してる仮想マシン上にフォルダある場合は登録できないようです。

 

blisk-img08

 

監視ファイルを登録するには、[ADD NEW WATCHER] をクリックし、[ADD FOLDER] からファイルを指定するだけOKです。

同期スクロール

blisk-img05

 

PC表示とモバイル表示のスクロールを同期させる機能です。

 

どっちかをスクロールすると、もう一方もスクロールします。

デベロッパーツールを別々に開く

blisk-img16

 

BliskはPC用とモバイル用のデベロッパーツールを別々に開いて操作できます。

 

モバイル用のデベロッパーツールを開くには、モバイル端末上で右クリックして [Inspect] を選ぶようです。

 

デベロッパーツール上で要素を操作したときは同期はしないようです。

まとめ

以上Bliskの紹介でした。

 

サイト制作にあたって何かと使いどころがあるのではないでしょうか。

 

Bliskはまだbeta版で、多言語サイトを見ると英語サイトに飛ばされたり不便なところはありますが、現時点でも十分使えるので正式リリースが待ち遠しいところです。

 

今後追加されるであろう機能は以下のものです。

 

  • スクリーンショット

  • アナリティクス

  • バグトラッカー

 

読んでいただきありがとうございました。

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. 無料で使える明朝体の日本語WEBフォント
  2. Google Mapがエラーで表示されなくなった場合の直し方
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. スマホサイト制作の基礎知識まとめ
  5. カスタムタクソノミー一覧を任意の順番にソートする方法

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。