自宅で学べるオンラインのプログラミングスクール TechAcademy
Web開発者向けのブラウザ「Blisk（ブリスク）」を紹介します。
目次
Blisk
Download Blisk – a browser for web developers（公式サイト）
- 対応OS：Mac、Windows、Linux
- 利用料金：無料
Bliskは、Web開発のスピードと品質、生産性を高めることを目的として開発されたブラウザーです。
Bliskの紹介動画
Bliskの特徴
複数のモバイル端末をエミュレート
Bliskは複数のモバイル端末をエミュレートできます。
スマホ端末
- iPhone 4
- iPhone 5
- iPhone 6
- iPhone 6 Plus
- Nokia N9
- Samsung Galaxy S3
- Samsung Galaxy S4
- Google Nexus 4
- Google Nexus 6
タブレット端末
- iPad mini
- iPad Air Retina
- Google Nexus 7
- Google Nexus 10
1画面でパソコンとモバイル表示を同時に表示確認可能
Bliskでは、モバイルの表示の同時確認が簡単にできます。
「Blisk」以外のブラウザでもモバイル表示を確認する方法はあります。
たとえば、以下のやり方です。
- mobile browser emulator(グーグルクローム用プラグイン)
- Google chromeデベロッパー ツールでスマホ表示画面を確認
参考：Google chromeでスマートフォン表示画面(レスポンシブデザイン)を確認する方法
Bliskの場合は、何か操作したり拡張機能を使わなくても、開いた瞬間にモバイルの表示も同時確認が可能です。
パソコンとモバイル表示のスクロールが同期
パソコン表示とモバイル表示のどちらかをスクロールするとその動きに追従して同時に両方とも画面がスクロールします。
パソコンとモバイル表示画面を行ったり来たりすることなく、スクロールして画面チェックができます。
ローカルの編集ファイルをリアルタイムでブラウザに反映
ローカルの編集ファイルを即座にリアルタイムでブラウザに反映することができます。
そのためには、ローカルサーバーのドメインと、プロジェクトフォルダを登録が必要です。
Bliskのインストール方法
Bliskにアクセスし、「DOWNLOAD BLISK（ダウンロード ブリスク）」をクリックします。
Blisk-1
使用環境に合わせて、「Mac」「Windows」「Linux」の中から選択し
「DOWNLOAD BLISK（ダウンロード ブリスク）」をクリックします。
Blisk-2
約70MBの容量があるので、ダウンロードに少し時間がかかる場合があります。
ローカルフォルダにイメージファイルがダウンロードできたら、ダブルクリックして開きます。
BliskInstaller_6.0.168.148.dmg
以下のウィンドウが開いたら、「Blosk」のアイコンをドラッグ&ドロップして、「Applications」フォルダに移動させます。
「Blosk」のアイコンをドラッグ&ドロップして、「Applications」フォルダに移動
コピーされるのを待ちます。
コピーを待つ
コピーが完了したら、Bliskのインストール完了です。
Bliskの使い方
「NEXT」をクリックします。
「NEXT」をクリック
チュートリアルを確認できます。
チュートリアル
ためしてに、Appleのサイトを開いてみました。
以下のようにモバイル端末の表示も同時に確認できます。
Blisk-use-3
エミュレートするモバイル端末の選択
左のメニューから端末をクリックすると、エミュレートができます。
レスポンシンブデザインのチェックに便利です。
Blisk-use-4
モバイル端末エミューレートのオン・オフ
上部メニューのモバイルのアイコンをクリックすると、モバイル端末エミューレートのオン・オフにできます。
デフォルトではオンになっています。
オフにすると、以下のように全画面でPCページが表示されます。
Blisk-use-5
スクリーンショット
上部メニューのカメラのアイコンから画面のスクリーンショットを撮影できます。
- Devie Screenshot（端末スクリーンショット）
- Desktop Screenshot（デスクトップスクリーンショット）
- スクリーンキャプチャ
Blisk-use-6
