レスポンシブデザインの開発を加速する開発者向けブラウザBlisk

a browser for developers - Blisk

a browser for developers – Blisk

みなさんこんにちは。ひげです。

今日は、最近話題の開発者向けブラウザ「Blisk」をご紹介します。

https://blisk.io/

Bliskのキャッチコピーはずばり「a browser for developers」です。私たち開発者のためを考えて作られています。

Free. Secure. Time-saving.

Free. Secure. Time-saving.

そしてもう一つのキャッチコピーは「Free. Secure. Time-saving.」です。志しめっちゃ高いBliskは、開発者なら誰もが一度は経験したことのある、UserAgentを切り替えてスマホ表示とPC表示をチェックしたり、JavascriptのエラーをチェックしたりといったWebサイト制作者にとってピンポイントな機能が満載です。

私は仕事柄、CakePHPを使ってレスポンシブなサイトを構築することが多いのですが、まさにぴったりなブラウザです。今回は導入として、Bliskでできることを紹介したいと思います。

Bliskはこんなところおさえています!

Bliskが使えるシーン

プロトタイプ制作やHTML,CSS,JSコーディング

プロトタイプ制作やHTML,CSS,JSコーディング

テストやバグFIXなどにどうぞ!

テストやバグFIXなどにどうぞ!

Bliskには最初から対応スマホがたくさん!

Preinstalled phones and tablets

Preinstalled phones and tablets

左側からニョキッとスマホとタブレットの一覧が出てくるので、選択して切り替えることができます。スマホやタブレットを縦横にするのも右上のくるくるボタン(回転切替ボタン)で対応できます。

表示したいサイトを一発表示、もちろんスクロールも連動!

URL and scroll sync

URL and scroll sync

URLを入れればスマホとPCの両方の表示が切り替わります。また、スクロールすると、スマホもPCも同時に同じ場所がスクロールされます。(表示している部分の頭が揃っているというのが正しいのかな)

これによってレスポンシブデザイン的な回り込みとか表示/非表示のチェックがすぐにできます!!

CSSやHTMLのコーディングを自動でリフレッシュしてくれる!

Page Auto-refresh on sources change

Page Auto-refresh on sources change

HTMLやCSSのコーディングやっているとき、何回Command+R(WindowsならF5ですよね)を押しますかね…Bliskなら、自動でリフレッシュしてくれるので、更新しなくてもいいんです!!!!!これが画期的だと思います!!

画面のスクショと画面の動画作成が可能

Screenshots and screen recording

Screenshots and screen recording

地味な機能なんです。MacならCommand+$でもいいんじゃないのかとか、Kapなどのアプリ使えばいいんじゃないかとかそういうことじゃありません。画面全体のスクショや動画撮影、「あ、やりたいなー」と思ったときにある!というのが素晴らしい。

Javascriptのエラーをリアルタイムに表示する

Real-time notifications

Real-time notifications

ChromeとかのDevelopertoolsにもあるんだけど、BliskはAuto-Refreshからのエラー表示になります。notificationsは見やすくピコーンと表示されるので、エラーにすぐ対応できます。

インスペクタ見やすい

Inspector

Inspector

ChromeとかのDevelopertoolsのインスペクタ見にくいなーって思っていた人向けにインスペクタ見やすくしてくれてます。マウスオーバーした箇所のインスペクタは、マウスの上下左右のどっかの適度な位置に表示されます。

しっかりコーディングできているか、表示スピードなどのAnalytics機能

Web page Analytics

Web page Analytics

一歩踏み込んだ開発をされている人向けの機能かも。内部チェック担当者、あるいはテスターの人向けの機能かもしれません。まずは機械的に、自分の力が及んでいないことを知ることができるのはいいことです。特に、初心者はコーディングを無意識のうちに失敗してしまうことがありますが、Blisk先生はきちんと指摘してくれます。また、Bliskが先生をしてくれている時間は、上司は彼・彼女たちのことを気にかける時間が削減されるのです。

地味だけど、見やすいというだけで恩恵はいくつも与えられます。

Jenkinsとかと連携

Integrations

Integrations

JenkinsやRedmineに連動できるよう….だけどちょっと情報不足なので、情報出てきたら追記していきたいと思います。

個人的には会社にRedmineとJenkinsを使ってもらっているので、なんらかしらちょっとでも連動できたら非常にうれしいです。

まとめ

いかがだったでしょうか。Blisk、とっても素晴らしいブラウザです。

Bliskを使うことによって、いままでいちいち切り替えてチェックしていたBootstrapの”hidden-md”とかも切り替えなくても消えていることをチェックできるようになります!素晴らしいです!!

猫ちゃんみたいに、打鍵しまくりです(^o^)

追記 2017.4.19 使うのやめました

BLISKは恐ろしく商用であり、フリーではありませんでした。

このブラウザが提案してくる過度な有料化メッセージが嫌になりましたので、1ヶ月くらいで使うのをやめました。

とっても素敵なものでしたが、やはりいいものにはお金がかかるものです…

スポンサーリンク
hige1
hige1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
hige1