ブロガー・Web関係者必見！モバイルとPC同時に閲覧できる超便利ブラウザ「Blisk」の存在を君はまだ知らない

レスポンシブデザインが流行してきているとはいえ、こんなことをしているはてなブロガーさんやWebデザイナーさんは後を絶たない。

PCでいちいちブラウザの幅を変えながらデザインを確認している
わざわざUserAgent Switcherでユーザーエージェントを切り替えて表示を変えている
横にiPhoneやAndroidの実機を置いて表示を確認している
そもそもモバイルを意識していない(論外)

そんなWebデザインにかかわるすべてのひとに紹介したいのが、「Blisk」という超絶便利なニューカマー・ブラウザだ。いままで「え？こういうブラウザっていままでなかったの？」と不思議に思ってしまうくらい、発想はシンプルだが革新的なブラウザだ。まだベータ版であることやこれまでWindowsでしか公開されていなかったので紹介するのを戸惑っていたけれど、いよいよMac版もリリースしたので、堂々紹介していきたい*1。

もちろんこのあたりに詳しくないはてなブロガーさんであっても、PC版とモバイル版を同時に表示して確認するのは結構役に立つと思うので、インストールしておいて損はない。

Briskって何？食えるのか？

既存のブラウザは基本的にウェブサイトを閲覧したり、何かを検索したり、情報を探したりするために使われる。

一方、Bliskは「Web開発のために作られたブラウザ(browser for web development)」だ。Bliskを使えばPC版表示とモバイル版の表示を同時に確認することができるし、デバッグを確認したりモダンブラウザでの表示を比較することもできる。最近では、ブラウザはレスポンシブやクロスブラウザー、クロスデバイスでの制作が進められているけれども、Bliskがあれば同時に複数のデバイスで表示を確認することが可能だ。

プロモーション・ビデオを見てみよう

今回も例に漏れず百聞は一見にしかず、まずは見ていただくことにしよう。

わずか1分19秒という短時間の中に、Bliskのよさがぎゅっと詰まっているのを感じていただけただろう。ナレーションの人の声が爽やかｗ

インストールまでの3ステップ

ここからは入手の仕方からダウンロード、インストールまでの手順を紹介していく。とはいっても極めて簡単なので、ざっと確認していこう。

ステップ１：Bliskアカウントを作成

Bliskをダウンロードするまえに、こちらでBliskアカウントを作成しておこう。アカウントがなくてもBliskを使用することは可能だけれど、ログインするとWebページのアナリティクス機能やスクリーンショット機能、ほかのツールとの統合などの機能が使えるようになる。もちろんサインアップは無料だ。

ステップ2：ダウンロード

ブラウザごとにリンクを用意したので、こちらからダウンロードしよう。

ステップ3：インストール

まだ日本語対応はしていないため、インストラクションは英語で書かれているけれど、とっても簡単だ。とりあえずそのまま進めてインストールすればOK。ここまでが3分くらい。インストールできたら早速Bliskを起動してみよう！

君は知っているか！これがBliskだ！

f:id:x93mg:20160707011411g:plain

モバイルとデスクトップの両方を同時に見ることができるBlisk。それだけでなく、さまざまな機能が搭載されているので、まずは基本機能から確認していくことにしよう。

Blisk device

Devices

Bliskでは先述したようにさまざまなデバイスを複数同時に表示することが可能だ。Bliskではこの機能のことを「Blisk device」と呼んでいる。Blisk deviceはBliskブラウザに標準装備されていて、もちろんインターネット環境だけでなくローカル開発環境でも使用することができる。

ほかのブラウザと違って、Bliskでは複数のデバイスを「同時に」操作することが可能だ。これによって開発者は通常のPC版サイトに加えてモバイル版サイトをひとつの画面で一緒に確認することができる。

Blisk deviceの機能

Bliskではレスポンシブなデザインをチェックするために単にViewportのサイズを変更するのではなく、次のようなシミュレーションをサポートしている。

スクリーンの解像度：モバイルからタブレット、ラップトップや大画面のデスクトップまで対応
デバイスのピクセル比：Bliskでは通常のディスプレイはもちろん、なんとRetinaのような高解像度ディスプレイの表示まで対応している
ユーザーエージェント：デバイス間の違いだけでなく、バージョンやOSの指定までできる
タッチイベントシミュレーション：タッチスクリーンでの動作などのUXを確認できる

どんな表示環境でも正しく表示されているかを確認することは、やはり結構骨の折れる作業。そうしたところも、Bliskならかゆいところに手が届く。

Device list

Device List

Blisk deviceの切り替えはBliskブラウザ上の左側のパネルで操作することができる。このリストの中からサイトの表示をシミュレーションすることが可能。このDevice Listを使うと、他のデバイスへの切り替え、Blisk deviceの表示・非表示、複数のBlisk deviceの並べ替えなどができる。

デバイスの向きを変える

Rotation

パソコンだと向きを変えることはまずないとは思うけれど、スマートフォンやタブレットではデバイスの向きを変えて使うことがあるし、現場では実際縦型での表示しか確認しないこともある。ところがBliskを使えば簡単にデバイスの向き(縦・横)をワンクリックで変えることができる。アドレスバーのすぐ右のボタンが回転ボタンだ。便利ですなー。

ズームイン・ズームアウト

Zoom

スマートフォンでサイトを見るときには、デバイスの画面が小さいのでピンチして画面をズームして、見たい情報を拡大したり縮小したりすることがある。もちろんこうした操作もBliskならカンタンだ。デバイスのズームは次のように操作する。

スマホ・タブレットのほうのスクリーンの中にカーソルを合わせる
シフトを押すとカーソルが変わるのでドラッグする

上にドラッグするとズームイン、下にドラッグするとズームアウトになる。なによこの便利機能。

Bliskをもうちょっと使いこなす

Bliskの基本的な機能は以上だが、Bliskにできることはこれだけではない。もともと「Web開発のために作られたブラウザ(browser for web development)」がコンセプトゆえに、さまざまなデベロッパーツールも用意されている。しかもデバッグモードなどはBlisk deviceとPC版の両方でつかうことができる。いままでFire Bugなどのツールを使っていたひとも、本気で乗り換えを検討してほしいほどの便利さだ。

デベロッパーツールを有効化するには、使いたいほうのデバイスで右クリックをして「Inspect element」を選択するか、モバイルデバイス上でクリックして「F12」を押すか「Ctrl＋Shift＋I」を押せばOK。