【保存版】2020年現役で使い続けたアプリ達まとめ

タイトルの通り、自分が2020年の現在までよく使っているChromeのアドオンやアプリ、オンラインサービスを紹介します。
駆け出しのエンジニアさんやバリバリ前線で活躍するエンジニアさんに、一つでも多く、良いアプリやサービスに巡り合って貰えれば幸いです。

## リモート
[Chrome リモートデスクトップ](https://remotedesktop.google.com/home)
同じGmailアカウントでログインしているPCをリモートで操作できる。Windowsも可能。
IP制限のかかったサーバーにアクセスしないといけない時などに活用。

## ビデオ会議
ビデオ会議の定番。
クライアントによって使うサービスやアプリが異なるため、最低でも下記の3つは接続や動作確認をしっかりしましょう。
画面共有の仕方は周知しておいたほうが良いです。

[Zoom](https://zoom.us/)

[teams](https://www.microsoft.com/ja-jp/microsoft-365/microsoft-teams/free)

[Google Meet](https://apps.google.com/intl/ja/meet/)

## チャットツール
[Slack](https://slack.com/intl/ja-jp/)
メモを共有できるポスト機能が便利です。
[slackでポストを使う](https://slack.com/intl/ja-jp/help/articles/203950418-Slack-%E3%81%A7%E3%83%9D%E3%82%B9%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86)
是非使いましょう。
後はサイドバーに全未読表示を設定しておくと忙しい方は便利です。
よく使うショートカットは下記

```
shift+command+9・・・引用
shift+command+C・・・コード
テキスト選択してcommand+B・・・太字
shift+option+command+C ・・・コードブロック
shift+command+X・・・打ち消し線
shift+command+U・・・リンク追加
shift+command+7・・・順序付きリスト
```

## Chrome 便利アドオン
[WEB Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)
GoogleのUX指標「Core Web Vitals（コアウェブバイタル）」を簡易に確認するアドオン。


[Check My Links](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf)
リンク切れが無いか自動チェック

[HTML差分(diff)チェックツール](https://chrome.google.com/webstore/detail/html-diff-check-tool/fjbonpakihikkocmockbkndhooihpijo)
今開いているページと、外のタブで開いているページの差分を見ることができる。

[HTML5 Outliner](https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo)
HTMLのアウトラインをチェック

[ResponsiveViewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb)
複数のスクリーンサイズを確認

[The QR Code Extension](https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb)
QRコード画面が開く

[Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh)
要素のアウトラインを表示してくれる。CSSのレイアウトの崩れを見つける時に役立つ

[Alt & Meta viewer](https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl)
カーソルを当てるとAltが表示。

[PerfectPixel by WellDoneCode (pixel perfect)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)
デザインカンプをブラウザ上で透過させて合わせる。

[WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)
HATFONT サイトの要素ごとに使われているフォントを見やすく表示するアドオン

[Tag Assistant (by Google)](https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk)
Google アナリティクスのタグの動作確認や、サイトにどのようなタグが使われているのかを確認する

[Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja)
HTMLチェッカーはよく使う。

[headingsMap](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi)
SettingからHTML5 Outline treeをActivatedにするとツリーマップも表示される。

[ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
「Pick Color From Page」でページ内の色を選択。コピーのフォーマットはoptionで設定可能。

[Dimensions](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj)
ブラウザ上で要素間の幅などを視覚化できるアドオン

[ezLinkPreview](https://chrome.google.com/webstore/detail/ezlinkpreview/nnkcfbiefgdaceeplickkkmifpicbpcc)
リンク先をホバーしただけで表示するウィンドウを並べる

[Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja)
ほぼマウスを使わずにブラウザ操作をできるようになる

[Google検索キーボードショートカット](https://chrome.google.com/webstore/detail/google-search-results-sho/dchaandmcifgjemlhiekookpgjmkcelg?hl=ja)
検索窓へ飛ぶショートカットが便利。Google検索結果画面が表示されると1番上の記事に▶︎マークが表示される。↑↓で移動

[Localhost OGP チェッカー](https://chrome.google.com/webstore/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn)
【注意】未使用のため安全面は分かりかねます。localhost や Basic 認証下などインターネットからリーチできない環境の HTML ファイルの OGP タグの動作確認を行うためのブラウザ拡張です。

[JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc)
JSON をブラウザで見やすくします。

[テキストエンコーディング](https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae)
右クリックのコンテキストメニューからエンコードを選択。

[Awesome Screenshot: キャプチャーと注釈](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj)
画面キャプチャ、スクリーンレコーダー

[META SEO inspector](https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef)
SEOに対してアラート表示。独自領域なのですべてが正しいわけではない。

[HTMLエラーチェッカー](https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf)
タグの閉じミスなど簡単なエラーチェックに

[Google Analytics オプトアウト アドオン (by Google)](https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh?hl=ja)
Googleアナリティクスで自分を計測させたくないときに

[Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna)
Google Analitycsの確認用。

[LiveMd](https://chrome.google.com/webstore/detail/livemd/gdkdfndgjifoabdbagnmodicadpngfko)
ブラウザ上でMarkdownを使用したメモが、ライブプレビューをしながら手早くとれます。

## 便利アプリ

### 画像最適化・リサイズ
[iMageTools](https://apps.apple.com/jp/app/image-tools/id493949693?mt=12)
画像を一括でリサイズ。

[ImageOptim](https://imageoptim.com/mac)
画像最適化。

### 動画キャプチャ
[Gyaozo Gif](https://gyazo.com/download)
無料版だと最長7秒の動画キャプチャを送れる。動画キャプチャをURLで送れる。

[LICEcap](https://www.cockos.com/licecap/)
デスクトップをキャプチャーしてアニメーションGIFとして保存

Mac純正動画キャプチャ
`shift + command+ 5` で動画をキャプチャ。
音声の有無も可能。容量が大きくなりがち。

iPhone純正動画キャプチャ

### スクリーンショット
MAC純正 control + command + shift + 4

クリップボードに画像をコピー
Mac純正 command + shift + 4

### データ圧縮
[ZIPANG](https://apps.apple.com/jp/app/zipang/id882655968?mt=12)
ZIP圧縮

### コピペ、スニペット登録
[Clipy](https://clipy-app.com/)
コピー＆ペーストの拡張やスニペットの登録に

### Gitクライアントソフト
[Source Tree](https://www.sourcetreeapp.com/)
無料のGUI Gitクライアントソフト。

### FTPクライアントソフト
[FileZilla](https://filezilla-project.org/)
無料のFTPクライアントソフト。踏み台サーバの設定等、
小難しい設定が必要なければFileZillaで事足ります。

### 画面共有
[ApowerMirror](https://www.apowersoft.jp/phone-mirror)
iOS、アンドロイド対応の画面ミラーリングアプリ。
Zoomなどを繋ぎながらスマホの画面共有をしたい時に便利。

### RSS
[Feedly](https://feedly.com/i/welcome)
通勤時間に気になるサイトを確認する用に。

### 仮想サーバ
[MAMP](https://www.mamp.info/en/windows/)

[Local](https://localwp.com/)
簡単にWordPressサイトをローカル環境に構築できる。

[Docker](https://www.docker.com/)
https://qiita.com/heeroo_ymsw/items/82a6578aa2c150522987

### サイトデータの吸い上げ
[SiteSucker](https://apps.apple.com/jp/app/sitesucker/id442168834?mt=12)
URLを入力してサイト一括ダウンロード。（一昔前は無料でした）


## オンラインサービス
### 翻訳したい時
[Codic](https://codic.jp/)
プラグラミングを日本語から英語に翻訳したい時に。
各テキストエディター（VScodeやSublime等）のAPIあり。
「プログラムを走らせる → run_program」

### 英語の発音がわからない時
[weblio](https://ejje.weblio.jp/)
発音わからない時用。
わからない単語の読み方があればこちらも是非。↓
https://qiita.com/s-kato/items/17bfa45ab0b6df5cea2b

## その他
[視力回復](https://apps.apple.com/jp/app/%E8%A6%96%E5%8A%9B%E3%81%8C%E3%81%BF%E3%82%8B%E3%81%BF%E3%82%8B%E4%B8%8A%E3%81%8C%E3%82%8B%EF%BC%93d%E8%A6%96%E5%8A%9B%E5%9B%9E%E5%BE%A9%E3%82%A2%E3%83%97%E3%83%AA/id969447060)
視力が落ちてきているあなたに。

[kingBox](https://apps.apple.com/jp/app/kingbox/id1503328513)
動画保存/画像保存のファイル管理アプリ。
自分が集中できる曲をダウンロードしてプレイリストを登録。
自分はクラシックやジャズをプレイリストに登録してます。

[TimeTree](https://timetreeapp.com/intl/ja/)
お互いの仕事予定を共有。
仕事とプライベートのカテゴリも分けられて共有できる。
自分は家族と使ってます。

## 最後に
以上です。
便利な世の中になりました。
開発していただいているエンジニアさん達に感謝です。

茂吉でした。