役立つかも! 画像加工シリーズ (画面キャプチャ)

f:id:ruruthian:20191102183944p:plain

全然思うようにいかず、開始までもう少しかかりそうですがあまりに空くのも寂しいので、1記事投稿しておきます。

今回のテーマは次の通りで、Google Chrome・Windows10ユーザーに特化した話になります。ご了承ください。

テーマ

Google Chrome拡張機能の危険性って?

拡張機能を使わないでキャプチャしたい!

スマホの画面をPC上でキャプチャしたい!

利便性の裏に潜む危険性

ここは前提の話なので読み飛ばしてOKです!(画面キャプチャ手法へ!)

始まりは画像キャプチャツールとして頻繁に使っていた拡張機能のアップデート通知からです。「連携するネイティブアプリケーションとの通信」を新たに権限として求めてきました。

f:id:ruruthian:20191102150529p:plain

これの意味する所の説明は省きますが、セキュリティ上大きな危険を含んだ権限となります。Chrome内の動作に留まらず、PC全体に影響が及ぶ権限です。この拡張機能を使い続けるわけには行かなくなってしまいました・・・

それにしても本当に便利ですよね、拡張機能・・・ただし拡張機能が求めてくる様々な権限。これに対して特に意識せず「OK」を押してませんでしょうか!「OK」を押さなくては魅力的な機能の使用も諦めなければいけません。「まぁ大丈夫かな?」という感じで・・・しかし許可した権限次第でセキュリティは完全に崩壊します。パスワードは盗まれ、パソコンは乗っ取られてしまうでしょう・・・。信頼できるベンダーが提供しているから、公式サイトに載っているから、とはいえ安心ではありません。例えばこんなケースがあります。

実例ケース(譲渡)

個人で作成し広く普及された拡張機能の作者にお金を積み、権利が譲渡される事があります。その譲渡先がマルウェアを含ませるケースが過去いくつも発生しています。以下は売り渡された拡張機能に広告機能が付与された話です。また仮想通貨マイニングを仕込まれるなども有名です。

japan.cnet.com

実例ケース(ハッキング)

信頼できる企業が作成しており歴史もある拡張機能、Googleストアで提供、レビューもたくさん、評価も高い。このような拡張機能だからといって安全とは言えません。会社自体がハッキングされコードを書き換えられる場合があります。すでに信頼して権限を与えている拡張機能の場合は自動アップデートにより全く異質のソフトウェアにされたとしてもユーザーに気づく術はありません。また権限は受け継ぎます。新たに権限を求めるメッセージも出ません。

拡張機能に対する考え方

上記2ケースを踏まえた可能性を考えると、現状の仕組みにおいて拡張機能に一定以上の権限は与えてはいけないということになってしまいます。与えても良い権限は非常に限られてきます。以下は与えてはいけない権限と考えます。

  1. Chrome公式ヘルプにある「危険度高~低」
  2. なぜか乗っていない「連携するネイティブアプリケーションとの通信

support.google.com

もし自分の環境が気になった方はアドレス入力バーに「chrome://extensions/」と打ち込むとインストールしてある拡張機能の一覧が確認できます。詳細ボタンを押す事で「権限」と権限が及ぶ「サイト」の設定が確認できます。一度見直してみてはいかがでしょうか!

画面キャプチャ手法

・・・ということで本題の拡張機能は使わずに画面キャプチャする方法のご紹介となります。Windows10標準アプリケーションの「Snipping Tool」とChrome標準アプリケーションの「デベロッパーツール」を使います。

部分キャプチャ

「Snipping Tool」を使いますが、実際に起動する必要はありません。以下の手順を前準備として行います。

  1. Winキー+「I」もしくはスタートメニューの設定(ネジマーク)でWindowsの設定を開く
  2. 簡易操作⇒キーボードの画面で、「PrtScnボタンを使用して画面領域切り取りを開く」 の設定を 「オン」にする
  3. Windowsの設定画面を閉じる

これで準備は整いました。あとはプリントスクリーンボタンを押してください。画面が暗転しディスプレイの上部にメニューが表示されます。キャプチャの範囲はブラウザだけに留まらず全画面に及びます。また従来のアクティブウインドウのコピー(Ctrl+PrintScreen)もサポートしています。

使い方は4通り、下記図を見ればすぐ分かると思います!また起動時には前回選択した機能が青く選択されておりメニューを毎回クリックせずにそのまま使えます。

f:id:ruruthian:20191102171141p:plain

使用後はクリップボードにコピーされますので任意の場所(ペイントソフト等)に張り付けてください。

サイト全体コピー

続いて1画面に表示しきれないサイトのスクリーンショットです。「デベロッパーツール」を使います。以下の手順となります。

1.キャプチャーしたいサイトでF12を押すと画面が2分割されデベロッパーツールが起動します。さらに以下のツールバーを表示させるボタンを押下してください。

f:id:ruruthian:20191102173218p:plain

2.新たに表示されたツールバーのメニューを開き、Capture fullボタンを押せば完了です。全画面のキャプチャ画像がpngファイルでダウンロードされます。(注:サイト内の読み込まれていない部分はキャプチャしません。一度最下部まで移動してから実施してください)

 

f:id:ruruthian:20191102175504p:plain

3.スマホの画面をPC上で表示しそれを撮影することも可能です。以下の図に従い、Responsiveからスマホ表示のモードに変更してください。ここにない機種で正確に見たい場合はカスタムサイズに直接入力すれば任意の画面サイズにできます。あとは前手順のCapture fullボタンで撮影できます。

f:id:ruruthian:20191102181829p:plain

まとめ

拡張機能が危ないので代替えを検討していたところ元々使っていた方法より便利な方法が見つかりました。また拡張機能に限らずスマホのアプリなどが求める権限についても意識を向けていかないとなー!と思った今日この頃です。

それと、今回の件で殆どの拡張機能を消したので大変苦労しました(慣れました)その辺も後々書いていきたいです。