ウェブサイト開発に便利なmacアプリケーションの紹介 

株式会社じげんのkkosukeです。
UI作成などのフロントエンドを担当しています。

ウェブサイトを開発する上で、効率的な開発環境をつくるのは欠かせないですよね！
今回は、そんな開発環境に欠かせない便利なmacのアプリケーションをまとめてみました。

無料のものもあるので、気になるものは気軽にダウンロードをしてみてください。


## エディター系
### Visual Studio Code
![visualstudio-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/9eec130a-11ee-b695-9d49-7d69cf019acf.png)

通称VSCodeとして広く使われているエディターです。Microsoft社が開発したテキストエディタです。
補助機能が強力なのが特徴です。

https://code.visualstudio.com/

https://qiita.com/watamura/items/51c70fbb848e5f956fd6


### sublime text
![sublimetext-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/16c4513e-4c60-4f8f-be01-a4ad4edc7906.png)

シンプル、軽量、サクサク、検索や置換がしやすい！そんなエディターが好きなかたは、このsublime textをオススメします！

https://www.sublimetext.com/

### MacDown
![MacDown-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/7df53de8-abbb-04d3-5ad5-831bf29f4a5a.png)

メモを取る時など、文章を考える時など文章を書きたい時に重宝するのがMarkdown。
Markdownエディターにも有料、無料のもの数多くありますが、このエディターを使っている方が多かったです。

https://macdown.uranusjr.com/

https://yuu.1000quu.com/recommended_free_mac_app_macdown


## データベース系
### DBeaver
![DBeaver-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/99b775d2-f70c-111a-2cdc-16648d79ef47.png)

DBeaverは、SQLクライアントアプリです。MySQLだけではなく、PostgreSQLをはじめ、ほとんどのDBに繋げられることができるし、機能も豊富！

https://dbeaver.io/download/

### Sequel Pro、Sequel Ace
![sequelpro-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/56b4429c-e341-e4e9-80db-f9b469f27906.png)

Mac用のMySQLのデータをGUI操作で管理するためのアプリケーションです。無料で使えるので、多くの人が使っていました。
Sequel AceというSequel Proの後継アプリもおすすめです。

https://www.sequelpro.com/

https://sequel-ace.com/

https://qiita.com/ucan-lab/items/b1304eee2157dbef7774

### Cyberduck
![cyberduck-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/6706c0fb-87e5-c08f-8abd-fffaf41509f9.png)

Cyberduckは、FTPクライアントアプリです。黄色いアヒルのアイコンがかわいいのも特徴の1つです。

https://tab-log.com/mac-cyberduck

### CloudMounter
![cloudmounter-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/d4607b49-0721-908d-02d4-5b288ab33fcd.png)

クラウドサービス上に保存しているファイルにFinder経由で直接アクセスできるようになるアプリです。
ローカルにファイルを保持しないのもメリットの1つです。

http://itea40.jp/application/mac-productivity/cloudmounter/

## ターミナル系
### iterm2
![iterm2-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/e9e7a8a4-66e0-7c83-8a18-4cf8a3cbf6be.png)

iterm2はコマンドラインアプリです。macにもターミナルというコマンドラインツールがありますが、このiterm2は、画面分割ができるなど多機能なため、使われているようです。

http://vdeep.net/iterm2

### Source tree
![sourcetree-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/6018c1fc-69cd-75dc-739e-dbf748990ee5.png)

Source treeは、Gitを視覚的に操作できるアプリです。コマンドラインツールをしようしなくても操作ができるのが特徴です。

https://ja.atlassian.com/software/sourcetree


# ショートカット系
### Alfred
![alfredapp-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/b5200d28-2717-b940-a976-e3ddae8c3914.png)

Macに標準でついているSpotlightのようなランチャーアプリです。見た目がかっこいい、計算も検索もしやすいため、インストールしている人が多いようでした。

https://apps.apple.com/jp/app/alfred/id405843582

https://qiita.com/jackchuka/items/ccd3f66f6dd00481b98b

### hammerspoon
![hammerspoon-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/d1b2c698-1928-d7e9-054a-e76ed118ffce.png)

ショートカットキーのカスタマイズを行えるアプリです。
Command+Qや、任意のキーを長押しするといった操作のときに、特定の挙動を行うといった設定が可能です。

https://www.hammerspoon.org/

### BetterTouchTool
![BetterTouchTool-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/3fb38abe-540e-a83a-e1e8-4294dc5f88a9.png)

ラックパッドやらマジックマウスのジェスチャーと機能を変えられるアプリです。
ChromeやSafariなどのアプリケーションごとに設定ができるため、自分好みにmacを操作したい方にはオススメのアプリです。

https://folivora.ai/

https://qiita.com/rorensu2236/items/e3bea2a808bf7cdb3ece#bettertouchtool%E3%81%A7%E8%B6%85%E7%B5%B6%E6%93%8D%E4%BD%9C

### TotalSpaces2
![TotalSpaces2-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/f4ac7e8f-99a3-3c9c-7f8e-25285e05b4ea.png)

Macのミッションコントロールをさらに使いやすくしてくれるアプリです。
macのデスクトップを縦横に並べることができるので、複数の環境の切り替えが楽にできます。

https://qiita.com/saboyutaka/items/d6cfd2a2b60f1a374d60

### Magnet
![magnet-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/af942ce4-fada-13eb-b1f9-330b570a0e3e.png)

Macの画面を分割したり、並べて表示を行うことができるアプリです。

https://apps.apple.com/jp/app/magnet-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88/id441258766?mt=12

### Spectacle
![spectacleapp-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/c0c703f7-74c1-7f51-e35d-bbc1956058bf.png)

こちらもMacの画面を分割したり、並べて表示を行うことができるアプリです。
※ macOS v10.11以降の方は、Rectangleをオススメします。


https://pikawaka.com/tips/spectacle

https://rectangleapp.com/

https://softantenna.com/blog/rectangle/


### HyperSwitch
![hyperswitch-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/fc1ceb8a-9a3c-8a9f-d271-2d0bd76ec99c.png)

Mac で Windows のようなウィンドウ単位の切り替えを実現してくれるアプリです。
Chromeやfinderを複数のウィンドウで立ち上げていた場合でも、切り替えがしやすくなるので、オススメです！

https://pc-karuma.net/mac-app-hyperswitch/


### HyperDock
![hyperdock-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/a36f6138-1357-1a63-4f50-36dc16d31d33.png)

こちらはmacのdockアプリをサムネイルプレビューしてくれるアプリです。
ウィンドウをドラッグで、特定のサイズに拡大、リサイズされる機能もあります。

https://hep.eiz.jp/hyperdock/

### MonthlyCal
![monthlycal-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/fe019e93-ede7-41ab-d0b9-0d234cc83069.png)

タッチパッドをスワイプすると出てくる通知センターにカレンダーを表示してくれるアプリです。
スケジュールの確認に一役買っています。

https://pc-karuma.net/mac-app-monthlycal/

### Dozer
![Dozer-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/a6d0e06c-1993-9f78-8753-1416ae0bf1dc.png)

Macのメニューバーに表示されているアイコンを一時的に隠すことができるアプリです。
macのメニューバーをすこしでもスッキリさせたい方にオススメです。

https://applech2.com/archives/20190306-dozer-hide-menu-bar-icons-on-macos.html

### Yoink
![yoink-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/cada6b54-b593-af92-5293-6aac3339b4b3.png)

ドラッグ＆ドロップの操作を快適にしてくれるアプリです。finderをウィンドウが重ならないように並べるとった地味な作業もなくせるので、必須といってもいいくらいのアプリです。

https://softantenna.com/blog/yoink/

### CopyClip
![CopyClip-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/9f420cd5-af85-b0eb-ef22-6d7ff1ca1c0a.png)

CopyClipはクリップボード管理アプリです。

https://pc-karuma.net/mac-app-copyclip/

### Clipy
![clipy-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/51ce7801-0e6d-f91e-002a-e13928ca03c6.png)

こちらも、クリップボード管理アプリです。

https://leo-pcblog.com/clipy/

## 画像系
### jpegmini
![jpegmini-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/1adf90b5-7f36-de89-d068-cbec14d9c0fe.png)

JPEG画像を画質を落とさずに圧縮してくれるアプリです。

https://www.jpegmini.com/

https://www.jtm.gr.jp/technote/app/jpegmini/

### Crunch
![crunch-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/ca153ded-4ac4-688d-840d-09ed79534133.png)

PNG画像を画質を落とさずに圧縮してくれるアプリです。

https://coliss.com/articles/build-websites/operation/work/png-images-optimization-crunch.html

## Chrome拡張機能系

### FireShot
![FireShot-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/9d926a00-43f4-bad5-1e54-0994443f0a8a.png)

ウェブページ全体をスクリーンショットしたり、指定部分を画像として保存するときに使っています。
シンプルで使いやすいので、まだ入れていない方は是非！

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

### Vimium
![Vimium-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/7a900671-faa4-7591-1c57-e29948b24c14.png)

vimキーバインドでGoogle Chromeを使えるようにできるプラグインです。キーボードから手を離したくない！そんな方は、1度使ってみてはいかがでしょうか？

https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb

https://qiita.com/satoshi03/items/9fdfcd0e46e095ec68c1

### EditThisCookie
![EditThisCookie-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/77820aa7-43ee-4711-98ef-33d12f627775.png)

サイトのCookieを管理できる拡張機能です。Cookieを追加、削除、などをかんたんに行うことができます。
お菓子の「クッキー」のアイコンもわかりやすくてかわいい！

https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja

## その他
### 1password
![1password-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/d4d22394-5d73-d90a-6d12-b0f17fdfa032.png)

パスワードの一元管理ができるアプリです。

https://1password.com/

### nearlock
![NearLock-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/229305fe-f260-89c2-ffcd-84e958a04805.png)

Macの画面ロックをiPhoneの距離で自動解除してくれるアプリです。

https://number333.org/2018/06/18/mac-nearlock/

### Libre Office
![libreoffice-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/b6e64105-5feb-f448-e75d-03bc1ea04768.png)

Mac向けのマイクロソフト・オフィス（以降MSオフィス）互換の無料ソフトです。

https://ja.libreoffice.org/

### duet
![duetdisplay-crunch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106666/2c30c311-a4ac-b0c6-3a96-7e8a7e0a0a69.png)

iPadをmacのサブディスプレイにすることができるアプリです。

https://ja.duetdisplay.com/

https://saruwakakun.com/it/app/duet_display

## まとめ
いろんなアプリで、ウェブサイトの開発環境を整えていきましょう！