皆さんこんにちは、FascodeNetworkのブログスケジュール管理などを行っているなおこです。
今回はウェブサイトのパーツごとにスクリーンショットを撮影することができるGyazo拡張機能をご紹介したいと思います。
Gyazo拡張機能とは
Gyazoとは手軽にスクリーンキャプチャをインターネット上にアップし画像や映像を見ることができるURLを発行できるサービスです。
そのサービスを使いやすくするためのツールが今回紹介するGyazo拡張機能です。
この拡張機能はブラウザで動作しGyazo公式がリリースしているかつ2014年から公開されているためある程度信頼できる拡張機能ですね。
拡張機能の詳しい情報については過去の公式ブログなどをご覧ください。
Gyazo公式サイト
Gyazoブログ
Gyazo Firefox向け記事
今回使うPCスペックや実行環境
- OS : Alter Linux(実質Arch Linux)とWindows10Proデュアルブート
- MB : B450M Steel Legend
- CPU : AMD Ryzen 5 5600x
- GPU : NVIDIA GTX 960
- RAM : 32GB
- HDD : 4TB
- SSD : 256GB m.2 (２０２２/９/１５以降のブログには搭載)
上記の環境にGoogle Chromeをインストールし拡張機能を導入していきます。
Gyazo拡張機能をインストールしてみる
Gyazoついて紹介していくのにインストールしたほうがわかりやすいと思うのでインストールしていきたいと思います。
軽く調べてたところ、Google ChromeやMicrosoft Edge、OperaやBraveはほぼほぼ同じ方法でインストールすることができます。
Firefoxだけ独自のストアでインストールすることができます。
Google Chrome、Microsoft Edge、Opera、Braveの場合
上記のURLに飛び、右上にある水色のchrome に追加するというボタンを押します。
その後権限の許可が求められるので拡張機能の追加をクリックすることで拡張機能のインストールを行うことができます。
Firefoxの場合
Firefoxの場合は上記のURL飛びAdd to Firefoxをクリックし出てきたポップアップのAddをクリックしてインストールします。
Gyazo拡張機能を使ってみる
無事Gyazo拡張機能をインストールできたので実際にGyazo拡張機能を使っていきたいと思います。
部品を撮影
この拡張機能の神機能である特殊なレイアウトじゃない限りはデザインが崩れることなく要素ごとに撮影することができる機能です。
まずは拡張機能アイコンをクリックしポップアップを表示させます。
アイコンをクリックすると複数選択しが現れるのでその中の部品をクリックします。
クリックすると部品を選択するモードになります。ページの中で撮影したい要素の箇所でマウスをホバーさせると若干水色になります。そこでクリックすると水色になった範囲を撮影します。
上記の選択で撮影すると下記のようなスクリーンショットを撮ることができます。
選択範囲を撮影
次に選択範囲を撮影する方法をご紹介します。先ほどと同様にアイコンをクリックします。
そこで表示されたポップアップの範囲選択をクリックします。
クリックすると✛アイコンがカーソルになるので撮影する範囲を指定します。指定の仕方は撮影したい範囲の角から角にクリックしながらスライドすることで指定することができます。
撮影失敗したバージョンですが下記のように選択範囲を指定します。
うまく撮影できると下記のようなスクリーンショットが撮影できます。
ページを撮影
ページを撮影コレは、スクロールをせずに移っている画面をスクリーンショットすることができます。
先ほどと同様にアイコンをクリックします。
そこで表示されたポップアップのページをクリックします。
そうすると自動で今見ている画面のスクリーンショットが撮影されアップロードされます。
実際に撮影したスクリーンショットが下記になります。
ページ全体を撮影
スクロールして撮影してくれるようですがスクロールが多いサイトだとサイズがでかすぎるせいか安定して動作しません。
ページ全体をスクロールして撮影する場合は【GoFullPage】などの別拡張機能を利用したほうが良いです。
Gyazo拡張機能のメリットやデメリット
Gyazo拡張機能を数ヶ月使って感じた現時点（2022-03-20）のメリットやデメリットをまとめたいと思います。
メリット
- 手軽に撮影することができる
- ソフトウェア版のGyazoを導入しなくてもブラウザ単体で動作する。
- 範囲選択の撮影することができる
- 比較的デザインが崩れることなく要素の撮影が可能
デメリット
- Gifの撮影することができない。
- ページ全体の撮影を安定して行うことができない。
現時点で感じたことは上記の感じです、Gif撮影を行うことやページ全体を安定してできないことを除きかなり使いやすい拡張機能だと思います。
この拡張機能の一番のうりになるであろう要素の撮影をすることができる点です。
個人的にはウェブサイト複数人で作っていた際にパーツを撮影し、個々の部分おかしいなど問題点を報告する時に使うことができるので便利ですね。
複数の要素が絡む場合の報告の場合は範囲選択を使い撮影することも多いので範囲選択機能もべんりですね。
ソフトのインストールが必要ない点を考えるとグーグルアカウントなどで同期していれば違うパソコンに移動した際もスムーズに作業が行うことができます。
最後に
今回はGyazo拡張機能を紹介しました、なかなか便利な拡張機能なのでGyazoを普段から使う人にはぜひおすすめしたい拡張機能です。
それでは次のブログでお会いしましょう。ちなみに次回はときえのきさんが書いてくれるそうです。お楽しみに～
コメント