お役立ち

2016.12.7 2016.12.12

PCとモバイルを同時表示!? 高性能ブラウザ『Blisk』

タグ:, ,

こんにちは! サビラのPG担当のにっさんです。

昨今、Web開発においてメインとなるブラウザは「Chrome」や「FireFox」などを使用して、表示確認やデバッグ等を行っていると思いますが、今回ご紹介するブラウザは、、、

なんと!!

PCとモバイルを同時に表示し、操作できる優れもの!
Blisk(ブリスク)』です!
※某清涼菓子ではありませんので食べれません!!

どんなブラウザ?

『Blisk』はベースとして「Chrome」と同じオープンソースのウェブブラウザ「Chromium」で出来ています。
つまり「Chrome」に慣れている人なら操作は問題ありません。
ほぼ同じことが出来ますし、もちろんデベロッパーツールもあります。
ただし、この記事の時点でのバージョン「1.0.125.166」では日本語対応していません。英語のみです。

では、何が目玉かというと

  • PC表示とモバイル表示を1画面で表示
  • PC操作とモバイル操作が同期
  • ソース変更を行うと即時に反映

PC、モバイル両方のWeb制作や開発では非常に有用なブラウザになっています。
その他にも有料機能ではありますが、スクリーンショットやコード解析など便利な機能があります。

PC・モバイルを同時に表示!

まず、デフォルトインストールだと、チュートリアルページが表示されますが、無視してGoogleを表示すると他のブラウザと変わらない表示です。
ためしに、このブログを表示してみると・・・・

一番左に、各種デバイスリストが表示され、次にデバイスリストで選択されたデバイスが表示されて、PC表示と続きます。

デバイスリストもiPhoneやGalaxy、iPadなど色々揃っています。
このデバイスリストで確認したいデバイスをクリックすると即座に表示が切り替わります。

1画面で、PCとモバイル両方確認できるのは、すごく便利ですよね!

PC操作とモバイル操作が同期!

画像のように、PC側でスクロールすると、モバイル側でもスクロールされていますね。
逆にモバイル側でも同様に確認できます。
リンクなども行えるので、いい感じですよ!

ただ、フリックイベントとかは試していないので、どうなるのかわかりません・・・

ソース変更で即時に反映!

いわゆるオートリフレッシュ機能です。
ソースを変更して、毎回F5等で更新する手間が省けます。
ただし、ローカル環境でしか有効になりません。
実際にFTP等でアップロードを行っているわけではありませんのでご注意を!

設定方法として、オートリフレッシュを行いたいURLを開いておき

1357_06
上記画像の右上赤枠をクリックして
設定画面を開きます。

1357_07

 

設定画面の
①開いているURLが自動入力されます。
②オートリフレッシュをすべてのタグで行うのか、アクティブタグにするのか選択。
③変更を監視するファイルをここで設定。
④変更監視するフォルダを選択。
⑤設定に問題なければ、クリックして終了。

仕組みとして、④で設定したフォルダ内の③で設定したファイルに変更があれば、自動的にF5してくれる機能です。
なので、ローカル環境以外では有効にならないと思います。
なお、③で設定する拡張子は「php」や「java」等でも変更確認できました。

デザイン確認するときとか、ちょっとした変更を確認して欲しいとか、いくつかのデザインパターンでCSSをファイルごと変更するときとか、そういう状況に便利そうな機能ですね!

今後に期待!

以上、おおまかな紹介ではありますがいかがですか!?
他のブラウザでも出来ない事は無い機能ですが、なにより、1画面で出来るのはすごく便利だと思います。

この『Bllisk』でWeb開発が

Sharpens You Up!

するかもしれません!
今後のバージョンアップに期待です!!

 

ちなみに、平成28年の年の瀬ついでに免許の更新確認しておいて損は無いですよ!!!