読者です 読者をやめる 読者になる 読者になる

Brian'z Imagination

ブライアンねこの、頭の中。

Brian'z Imagination

ブロガー・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のよさがぎゅっと詰まっているのを感じていただけただろう。ナレーションの人の声が爽やかw

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

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

ステップ1:Bliskアカウントを作成

Sign Up

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。

Action Sync

この「Action Sync」こそがBliskを超絶便利にさせている機能の核心と言っても過言ではない。この機能には「Scroll Sync」「URL Sync」が含まれている。

Scroll Sync

Scroll Sync

片方のデバイスでスクロールすると、もう一方も同時にスクロールする。これが結構便利で、デザインを同時に見比べたりすることができる。

URL Sync

URL Sync

BliskブラウザのURL窓は1つ。ここにアドレスを打ち込むと、両方のデバイスで同時に同じページを確認できるので、これがまた便利。

Auto-Refresh

コーディングをしながらサイトの表示を確認するときに、いちいち更新ボタンを押すのは意外と面倒だ。ところがBliskを使うと、コードを書きながらその場でレンダリングしてサイトの表示を確認することができる

Auto-Refreshは次のステップで簡単に有効化できる。

  1. 自動でリフレッシュしたいサイトのドメインにアクセスする
  2. オートリフレッシュボタンを押す

たったこれだけ。わお。

ちなみに、「blisk://setup」にアクセスすれば、Auto-Refreshしたいドメインを管理することも可能だ。

まだまだあるぞ!…と言いたいところだが。

そして、極めつけがスクリーンショットアナリティクス機能だ。と言いたいところだが…使おうと思ったらこんな表示が出てきた。

f:id:x93mg:20160707012257p:plain

開発中かよ!まぁここまでMac版で出来るのもぼくとしては満足なので、気長に待つことにしよう。

そういうわけで、今回紹介できるのはここまでになりそうだ。

まとめ

ライターやデザイナーも含めてWebの制作に何らかの形で携わっていると、デスクトップとモバイルの見え方の違いをどうしても意識してしまう。実機で確認するのもいいのだけれど、モバイルを何台も持ち歩くのは面倒だし高くつく。そんな問題を解決してくれる救世主こそがこのBliskだ。

Mac版もまだベータ版としてリリースしたばかりなので、機能としてはまだ至らない点もあるかもしれないし、もっとこうしたほうがいいというところもあるかもしれない。けれどもプロダクトはユーザーがいてはじめて育っていくものなので、まずはぜひ使い込むところまで使い込んでみよう。

今日のつぶやき。

七夕に「もっと輝ける人生を送りたい…。」と書いていたらこんなものに出会いました。

リボルテックダンボーって2000円以下で買えるんだ。詳しくはこちら

ねこのおすすめ。

インスタはじめました。

気長に投稿します。フォロミー!

「ここで思いっきり泳いだ」#ダイブ #海

BRIAN CATさん(@thebriancat)が投稿した写真 -

B! 定期便をご利用ください。

またお会いしましょう!

*1:公式ブログではLinux版(Ubuntu)はまもなくリリースするとのことだ。