以前ご紹介した、PC表示とスマートフォン表示を同時に確認できるブラウザBliskですが当時は完全に無料だったのですが今では有料バージョンが出て、機能に制限がかかるようになりました。30分は無料で使えたり、1日1回ぐらいは使えていたのでなんとかしのいできたのですが、スマートフォンの方でコードを確認したいということが出てきたりして、とうとう有料版に切り替えました。有料版に切り替える方法と、Bliskのいろいろな機能についてご紹介します。
PC表示とスマートフォン表示を同時に確認できるブラウザBliskとは？
以前、完全に無料だったときに書いた記事がこちらになります。
ちょうど1年前ぐらいに書いた記事ですが、この頃も「こんなに便利なのに無料？」とは思っていました。数ヶ月して使おうとしたところ、有料版が出て無料のままだと30分とか1日1回（？）かなにかの制限がかかるようになってしまいました。まぁ機能から言えば当然だなぁと思っていたのですが、しばらくはだましだまし使っていました。
こんな感じです。1日1回ぐらいは見られる気がするんですが、そのうちこのようにスマホ表示ができなくなってしまいます。
スマートフォンの表示も日に日に重要になり、ローカルで作成中のWebサイトやお客様に相談されたときにスマートフォンでの表示を確認したり、デベロッパーツールを使ったりしたいという気持ちが高まってきましたので有料版を使おう！ということにしました。
Blisk有料版の料金はいくら？
Blisk有料版の料金は買い切り方式ではなく、月額課金です。
Bliskの画面から、支払いに行くことができます。スマートフォン表示の UPGRADE BLISK をクリックすると料金のページに行きます。
このように 月額9.99ドル、年間一括で払った場合は月額8.49ドル（年額101.88ドル）です。1月あたり1000円ちょっとというかんじでしょうか。
この画面でしばらく悩んだ末、1年分を先に支払う方を選ぶことにしました。Annualy という方の CHOOSE PLAN をクリック。
この画面で 101.88ドル＝12,154円（2017/09/26現在） ということがわかりました。月額1,013円です。
手続きを進めて無料版から有料版にアップグレードする
※ 有料版を購入するにはあらかじめ無料版のBliskをインストールしておきます。無料版のインストール方法は先ほどの「WebサイトをPCとスマートフォン/タブレットの同時表示ができるブラウザ Blisk。導入も簡単！」に書いてあります。
画面中央ぐらいにある
Continue to Billing Informationをクリック
住所などの必須項目を埋めて、、うー英語わかりにくい…と思ったときにふと右上の方にある
言語を選択できるオプションに気づきました。ここで日本語を選ぶとさらに画面がわかりやすくなります。
Continue to Payment Methodをクリックして、
クレジット情報を入力する画面になるので、クレジット情報を入力してから
支払い情報送信をクリック
次に、クレジット会社独自のパスワードを入れる画面が出たりするかもしれません。会社によって違うのでその場合はパスワードを入れて進みます。
この画面になるので注文を確定をクリックします
購入が完了して、使うことのできる機能が一覧されます。
これだけで終わりだと思ったのですが、メールでの確認も必要でした。
このようなメールが来ているので、
Confirm emailをクリックして
I ALREADY HAVE BLISK INSTALLEDをクリックしました。今回はBLISKをインストールしてから有料にしたのでこちらですが、インストールしていない場合は左のボタンをクリックしてインストールできるようですね。
Bliskの機能紹介：スマートフォン表示
改めてBliskの機能を紹介したいと思います。まずはスマートフォン表示です。
有料版にしたのでいつでもPC表示とスマートフォン表示が同時に行えます。レスポンシブ対応のページならばブラウザの幅を狭めればスマートフォンでの表示が確認できますが（それでも完全ではないと思いますが）、PC表示とスマートフォン表示を全く違うデザインで行っているWebサイトの確認はなかなか難しいです。そんなときBliskならば、ブラウザで同時に確認することができます。
Bliskの機能紹介：デベロッパーツールをPCとスマートフォン別々に表示できる
今回どうしても有料版がほしいと思った原因は「スマートフォン表示の時にデベロッパーツールが使いたい！」というものでした。仕事でメンテナンスをしているWebサイトがPC表示とスマートフォン表示のテーマが異なるものでした。そのため、JavaScriptのコードをそれぞれに入れたときに正しく入っているかどうかをPCではデベロッパーツールなどで簡単に確認できますが、スマートフォン表示の確認ができませんでした。
Bliskでデベロッパーツールを利用するには、PCなら
右クリックして、Inspectをクリック
このようにデベロッパーツールが表示されました。
スマートフォンでも同様に、
右クリックして、Inspectをクリック
このようにデベロッパーツールが表示されました。この表示がとても便利でうれしいです！
その他にも
上部にあるこのマーク（Click to disable Inspector）をクリックして、青色の状態にしてからマウスを移動すると、その要素のcssが表示されます。
スマートフォンでも
このようにcssが表示されます。
Bliskの機能紹介：画面のスクリーンショットと動画録画
Bliskでは画面のスクリーンショットと動画の録画ができます。画像や動画はBliskのクラウドストレージに保存されます。
画面上部のカメラのアイコンをクリック
このように3つのボタンが表示されました。スマートフォンのスクリーンショット、PCのスクリーンショット、動画録画の機能があります。
スマートフォンのスクリーンショット
スマートフォンのスクリーンショットを撮る方法です。
Device screenshotをクリックすると
このように別タブでスクリーンショットが表示されます。
Download screenshotをクリックすると、Windowsの場合はデフォルトのダウンロードフォルダに画像が保存されます。
背景が透過されたpngファイルが保存されました。デバイス機器も一緒に保存されるので、ブログで使うときなどに良さそうな画像です。
PCのスクリーンショット
PCのスクリーンショットを撮る方法です。
Desktop screenshotをクリック
このように別タブでスクリーンショットが表示されます。先ほどと同じようにダウンロードもできますが、他にも
Copy link for sharingをクリックするとクリップボードにこの画像へのリンクがコピーされるので
メールなどで画像を見るURLを送ることができます。このURLを試しに↓に貼ってみます。
https://app.blisk.io/screenshots/shared/2c4290fb-2dc1-4be1-a28d-9ea5be0c294b
このように表示することができると思います。Bliskでログインしていない場合、この画像以外は見ることができないようになっていますが、ダウンロードはできるようです。
動画録画
動画録画を撮る方法です。
Screen Captureをクリック
Application Windowタブをクリックして
Bliskの画像をクリックして、
Shareをクリックします。デフォルトのYour Entire ScreenのままだとPC画面全体が動画で撮影されてしまうので、このようにしてBliskの画像だけを動画で保存できるようにしています。
このあと、Bliskの画面上で録画したい動きをしてから
カメラのところに表示されている赤い丸のマークをクリックして停止します。
動画の処理が終わると、画像のキャプチャと同じように、別タブで動画が表示されます。
この動画もダウンロードしたり、クラウドストレージに保存されるのでURLを送って見せることができます。
https://app.blisk.io/screenRecords/shared/7e8d131c-15fc-4847-8cae-800ea2d01c27
こちらに動画のURLを貼ってみましたのでよろしければご覧ください。
※ 確認のため、いろいろなブラウザで見てみたらchromeとFirefoxでは見られましたが、EdgeとIE11では見ることができないようでした。
まとめ：Web制作に関わっている人にとっては便利！まずは無料版で！
Bliskは私のようにWeb制作に関わっている人にとってはとても便利なツールだと思います。また無料で試すこともできるのでまずは試してみることをおすすめします。
月額での購入もできるので数ヶ月だけ使って、また次に使うまでは解約しておくという方法もあるかと思います。解約については
Blisk（ブリスク）の有料版で使う・有料ユーザー契約の解約
えびす商売繁盛マーケティングさんのWebサイトに詳しい方法が掲載されていましたので、参考になるかと思います。えびす商売繁盛マーケティングさんありがとうございます！
コメント