タイトルの通り、自分が2020年の現在までよく使っているChromeのアドオンやアプリ、オンラインサービスを紹介します。
駆け出しのエンジニアさんやバリバリ前線で活躍するエンジニアさんに、一つでも多く、良いアプリやサービスに巡り合って貰えれば幸いです。
リモート
Chrome リモートデスクトップ
同じGmailアカウントでログインしているPCをリモートで操作できる。Windowsも可能。
IP制限のかかったサーバーにアクセスしないといけない時などに活用。
ビデオ会議
ビデオ会議の定番。
クライアントによって使うサービスやアプリが異なるため、最低でも下記の3つは接続や動作確認をしっかりしましょう。
画面共有の仕方は周知しておいたほうが良いです。
チャットツール
Slack
メモを共有できるポスト機能が便利です。
slackでポストを使う
是非使いましょう。
後はサイドバーに全未読表示を設定しておくと忙しい方は便利です。
よく使うショートカットは下記
shift+command+9・・・引用
shift+command+C・・・コード
テキスト選択してcommand+B・・・太字
shift+option+command+C ・・・コードブロック
shift+command+X・・・打ち消し線
shift+command+U・・・リンク追加
shift+command+7・・・順序付きリスト
Chrome 便利アドオン
WEB Vitals
GoogleのUX指標「Core Web Vitals（コアウェブバイタル）」を簡易に確認するアドオン。
Check My Links
リンク切れが無いか自動チェック
HTML差分(diff)チェックツール
今開いているページと、外のタブで開いているページの差分を見ることができる。
HTML5 Outliner
HTMLのアウトラインをチェック
ResponsiveViewer
複数のスクリーンサイズを確認
The QR Code Extension
QRコード画面が開く
Pesticide for Chrome
要素のアウトラインを表示してくれる。CSSのレイアウトの崩れを見つける時に役立つ
Alt & Meta viewer
カーソルを当てるとAltが表示。
PerfectPixel by WellDoneCode (pixel perfect)
デザインカンプをブラウザ上で透過させて合わせる。
WhatFont
HATFONT サイトの要素ごとに使われているフォントを見やすく表示するアドオン
Tag Assistant (by Google)
Google アナリティクスのタグの動作確認や、サイトにどのようなタグが使われているのかを確認する
Web Developer
HTMLチェッカーはよく使う。
headingsMap
SettingからHTML5 Outline treeをActivatedにするとツリーマップも表示される。
ColorZilla
「Pick Color From Page」でページ内の色を選択。コピーのフォーマットはoptionで設定可能。
Dimensions
ブラウザ上で要素間の幅などを視覚化できるアドオン
ezLinkPreview
リンク先をホバーしただけで表示するウィンドウを並べる
Vimium
ほぼマウスを使わずにブラウザ操作をできるようになる
Google検索キーボードショートカット
検索窓へ飛ぶショートカットが便利。Google検索結果画面が表示されると1番上の記事に▶︎マークが表示される。↑↓で移動
Localhost OGP チェッカー
【注意】未使用のため安全面は分かりかねます。localhost や Basic 認証下などインターネットからリーチできない環境の HTML ファイルの OGP タグの動作確認を行うためのブラウザ拡張です。
JSONView
JSON をブラウザで見やすくします。
テキストエンコーディング
右クリックのコンテキストメニューからエンコードを選択。
Awesome Screenshot: キャプチャーと注釈
画面キャプチャ、スクリーンレコーダー
META SEO inspector
SEOに対してアラート表示。独自領域なのですべてが正しいわけではない。
HTMLエラーチェッカー
タグの閉じミスなど簡単なエラーチェックに
Google Analytics オプトアウト アドオン (by Google)
Googleアナリティクスで自分を計測させたくないときに
Google Analytics Debugger
Google Analitycsの確認用。
LiveMd
ブラウザ上でMarkdownを使用したメモが、ライブプレビューをしながら手早くとれます。
便利アプリ
画像最適化・リサイズ
iMageTools
画像を一括でリサイズ。
ImageOptim
画像最適化。
動画キャプチャ
Gyaozo Gif
無料版だと最長7秒の動画キャプチャを送れる。動画キャプチャをURLで送れる。
LICEcap
デスクトップをキャプチャーしてアニメーションGIFとして保存
Mac純正動画キャプチャ
shift + command+ 5 で動画をキャプチャ。
音声の有無も可能。容量が大きくなりがち。
iPhone純正動画キャプチャ
スクリーンショット
MAC純正 control + command + shift + 4
クリップボードに画像をコピー
Mac純正 command + shift + 4
データ圧縮
ZIPANG
ZIP圧縮
コピペ、スニペット登録
Clipy
コピー＆ペーストの拡張やスニペットの登録に
Gitクライアントソフト
Source Tree
無料のGUI Gitクライアントソフト。
FTPクライアントソフト
FileZilla
無料のFTPクライアントソフト。踏み台サーバの設定等、
小難しい設定が必要なければFileZillaで事足ります。
画面共有
ApowerMirror
iOS、アンドロイド対応の画面ミラーリングアプリ。
Zoomなどを繋ぎながらスマホの画面共有をしたい時に便利。
RSS
Feedly
通勤時間に気になるサイトを確認する用に。
仮想サーバ
Local
簡単にWordPressサイトをローカル環境に構築できる。
Docker
https://qiita.com/heeroo_ymsw/items/82a6578aa2c150522987
サイトデータの吸い上げ
SiteSucker
URLを入力してサイト一括ダウンロード。（一昔前は無料でした）
オンラインサービス
翻訳したい時
Codic
プラグラミングを日本語から英語に翻訳したい時に。
各テキストエディター（VScodeやSublime等）のAPIあり。
「プログラムを走らせる → run_program」
英語の発音がわからない時
weblio
発音わからない時用。
わからない単語の読み方があればこちらも是非。↓
https://qiita.com/s-kato/items/17bfa45ab0b6df5cea2b
その他
視力回復
視力が落ちてきているあなたに。
kingBox
動画保存/画像保存のファイル管理アプリ。
自分が集中できる曲をダウンロードしてプレイリストを登録。
自分はクラシックやジャズをプレイリストに登録してます。
TimeTree
お互いの仕事予定を共有。
仕事とプライベートのカテゴリも分けられて共有できる。
自分は家族と使ってます。
最後に
以上です。
便利な世の中になりました。
開発していただいているエンジニアさん達に感謝です。
茂吉でした。