PC表示とスマートフォン表示を同時に確認できるブラウザBlisk有料版の機能

以前ご紹介した、PC表示とスマートフォン表示を同時に確認できるブラウザBliskですが当時は完全に無料だったのですが今では有料バージョンが出て、機能に制限がかかるようになりました。30分は無料で使えたり、1日1回ぐらいは使えていたのでなんとかしのいできたのですが、スマートフォンの方でコードを確認したいということが出てきたりして、とうとう有料版に切り替えました。有料版に切り替える方法と、Bliskのいろいろな機能についてご紹介します。

PC表示とスマートフォン表示を同時に確認できるブラウザBliskとは?

以前、完全に無料だったときに書いた記事がこちらになります。

ブログで読んだり、勉強会で「これ、いいよ!」とオススメされて気になっていたブラウザーがあります。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サイトに詳しい方法が掲載されていましたので、参考になるかと思います。えびす商売繁盛マーケティングさんありがとうございます!

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る