どうもこんにちは、webデザイナーの平尾です。
先日、ここ大阪は緊急事態宣言解除がされました、が、油断は禁物です。
私も引き続きリモートワークとさせていただいております。
いつもかかっていた通勤時間が浮いた分、優先順位低めだったことに使えるのがうれしいです。
今回はその時間を使って、ひょいひょいひょーいと入れていて煩雑になっていたchrome拡張機能の整理をしたのでその一部を紹介しますよ。
Google 翻訳
まんまです。サクッと翻訳してくれます。
インストールしたら翻訳したい箇所を選択してGoogle翻訳アイコンをクリックするだけて
ページに留まったまま翻訳文を表示してくれます。部分翻訳もページ全体翻訳も可能。
今までの、いちいち翻訳ページ開いて、コピペして、といった手間が省けて便利です。
Awesome Screenshot: キャプチャーと注釈
キャプチャー界の有名どころですね。
ページ全体のキャプチャーはもちろん、範囲選択・画面表示エリアのみなどのキャプチャーが可能です。
使ったことないですが3秒タイマーもあります。
キャプチャー後、もしくはローカルからドロップした画像にテキストを入れたりぼかしを入れたり、簡単な編集もできるのでよく使ってます。
Awesome Screenshot: キャプチャーと注釈（chrome ウェブストア）
Window Resizer
ブラウザのウィンドウサイズを変更する拡張機能。
デフォルトで様々なサイズのプリセットが用意されており、自分で追加もできます。
サイトの表示確認に使用したりするようですが、私はディベロッパーツールでそれはまかなっているので
主にサイトのトレースをする際に、1280pxの『Viewport』に切り替えてキャプチャし、使用してます。
5.6年前ぐらいに「マルウエアを含む恐れがある」とのことでいったんダウンロードできない状態らしかったのですが
今ではダウンロード可能、でも使用の際は自己責任でお願いします。
WhatFont
表示されているフォントの詳細を知りたいときに使用。入れてる人多いんじゃないでしょうか。
WhatFontアイコンをクリックした後知りたいテキストをクリックするとフォントの種類から行間、フォントサイズ、色など展開表示してくれます。
ディベロッパーツール出してスタイルを確認して、という手間が省けて良いです。
気になるフォントはもちろん、游ゴシック使ってるなってサイトのfont-famillyどうしているか確認したくてよく使います。
ColorPick Eyedropper
定番ですね。
サイトで何色使っているか調べたいときにアイコンぽちり、調べたい色の上で再度ぽちり。
16進数のカラーコードとRGB値の両方を表示してくれます。
他に別タブでカラーパレットの生成だったり過去のpicker履歴見れたりしますがあんま使ってないです。
歴史て出てくるのがいつも気になる、いや歴史やけども。。
ColorPick Eyedropper（chrome ウェブストア）
Image Downloader
サイトに使用している画像をダウンロードしたい時に使用。
アイコンをクリックするとその下にダウンロードできる画像をずらっと一覧で表示してくれ、そこからダウンロードしたいものを選択しダウンロードできます。C:\Users\ユーザー名\Downloads以下にフォルダを作成し、その中にまとめてダウンロードもできます。
Image Downloader（chrome ウェブストア）
背景画像を表示
機能名のまま。
インストールすると右クリックメニューに「背景画像を表示」という項目が追加されます。
ほしい背景画像がある時はその画像上で右クリック→「背景画像を表示」をクリック→別タブで表示されるのでそこから画像を取得しています。
ディベロッパーツールでbackground探して、、、という手間が省けるので良いです。
上記の【Image Downloader】で取得できなかった背景画像はこっちでとってきたりしてます。
svg-grabber – get all the svg’s from a site
こちらも上記の【Image Downloader】で取得できなかったsvg画像があった時に使ってます。
取得したいサイトのページでアイコンをクリックすると別タブで使用されているsvg画像が一覧で表示されます。
個別でもしくはまとめてダウンロードできます。
「ミッキさんの手」って勝手に呼んでます。
svg-grabber – get all the svg’s from a site（chrome ウェブストア）
The QR Code Extension
アイコンをクリックすると表示しているページのQRコードを生成してくれます。
”Edit this QR Code”ボタンから進んだページでPNG・SVG・EPS形式で保存できます、が
大体はPCで見ていたサイトをスマホで見たくなった時に色々打つのめんどくさくてQRコードから読み取る、という使い方してます。
The QR Code Extension（chrome ウェブストア）
Responsive Viewer
一覧で様々な画面サイズの表示が確認できる拡張機能です。
デフォルトで様々なデバイスの画面サイズが用意されています。
この画面サイズは自分で追加もでき、表示は縦向き・横向きが切り替えが可能です。
キャプチャもとれるのですが一定間隔で謎の棒が映りこむのであまり使わず。。
一括で表示確認したい時にはとても使えると思います。
ただしローカルファイルは確認できないので、確認したいときはサーバーにあげる必要あり。
Responsive Viewer（chrome ウェブストア）
ブックマークのメモ帳 – AnnoPad
ブックマークしたけどなんでだっけ？ってよくあるんです。あの日の自分に聞きたい、ということがよくあるんです。
例えば「オープニングの動きが・・・！ボタンデザインが・・・！」とか部分的なところを後でじっくり見たいってなった時に一筆その旨どっかにメモっときたいなと思っていました。
この拡張機能はインストールした後にブックマークしたいページでアイコンを押し、『New』ボタンをクリックするとテキスト入力ができるのでなぜブックマークしたかメモっておくことができます。タグ付けもできるので自分でルールを決めておけば検索機能を使うときに楽かなと。
難点としてはあくまでテキストのみのリスト表示になるところでしょうか。見にくいと感じる人もいると思います。
ブックマークのメモ帳 – AnnoPad（chrome ウェブストア）
SimpleExtManager
拡張機能を管理する拡張機能です。
管理はchromeの設定からできるのですが、そこにたどり着くまでの道のりがめんどくさいと思っちゃうんですね。
めんどくさがりなんです。
この機能をインストールするとアイコンをクリックすれば一覧で拡張機能がリストアップされ、そこで有効／無効の切り替えができ、それぞれのオプション設定やアンインストールもできます。
グループを作成してまとめることもできます。私はやってません。
SimpleExtManager（chrome ウェブストア）
番外編
私はネコ派で猫顔に憧れるタヌキ顔の人なのですが、ペット禁止マンションなんでtwitterで猫に邪魔される系動画がとてもうらやましく、食い入るように見てるんですね。
うちのイマジナリーキャットは邪魔してくれない。
そんな私を癒してくれる拡張機能がこちら
catcatcatcaaaaaaaaaaaaat
キャットキャットキャットキャァァァァァァァァァット
便利な機能とかありません。ただひたすら画面を無茶苦茶に荒らします。
ナビゲーションとかひっくり返って落ちてきます。
見えねええええええええくっそ邪魔！！！！ってたまに声に出ちゃいますが、かわいいからもう好きにやってくれって四肢を投げ出すんですね。
うっかりオンにしたまま仕事モードに入った時はファラァァァァァァてなるので
すぐにオンオフ切り替えられるSimpleExtManagerは便利ですよ。
catcatcatcaaaaaaaaaaaaat（chrome ウェブストア）
最後に
catcatcatcaaaaaaaaaaaaatの良さは伝わったでしょうか。他は大体メジャーですのでね、是非catcatcatcaaaaaaaaaaaaatインストールしてください。
タイトル画像用に、猫描いたことないしとりあえず手書きで寝そべる猫描いてみっかあとサクッと描いてみたのがこちら。
呪怨や。これ呪怨にでてくるやつや。
自分の画力に戦慄したのでとてもかわいい猫を描いてらっしゃるillust Recipeさんから素材いただきました。
たまらん可愛いです、ありがとうございます。
