Web制作

フロントエンドエンジニアがMacでコーディングするための準備

Macでコーディングするための準備や必要なものをまとめました。Windowsでコーディングしていた人がMacに移行するときの参考になるかもしれません。

Finderのタイトルバーをフルパスで表示する

アプリケーション→ユーティリティ→ターミナルを起動する。

defaults write com.apple.finder _FXShowPosixPathInTitle -boolean true

と叩いてリターン。さらに

killall Finder

と叩いてリターン。するとFinderが再起動し、タイトルバーがパスに変わる。

非表示ファイルを表示させる

デフォルトだと.htaccessなどが表示されない。なのでターミナルで

defaults write com.apple.finder AppleShowAllFiles -boolean true

と叩いてリターンし、さらに

killall Finder

でFinderを再起動させる。
戻すには

defaults delete com.apple.finder AppleShowAllFiles
killall Finder

エディターを入れる

これはお好みで。
Sublime Text3やAtom、Coda。
Adobe CCユーザーならDreamweaverがあるし、Bracketsもある。

FTPクライアントソフトを入れる

FileZillaを使っている。

ローカル開発環境

gulpを使ったローカル開発環境を作る。
このへんを参考に。

ローカルでWordPress

MAMPを使う。
インストールや使い方はこちらを参考に。

ブラウザー

GoogleChrome, Firefox, Safari。この3つでじゅうぶん。

IEの表示確認

Windowsマシンがあるならそれで確認すれば良い。
ない場合は次のいずれかの方法で確認する。

BootCampでMacにWindowsをインストールする

Windowsマシンがないけどインストールメディアやディスクイメージ(ISO)がある場合は、BootCampを使う。
ただし、BootCampだとMacかWindowsどちらか片方だけ起動した状態になるので、都度修正→確認が面倒。

仮想OS

Oracle VM VirtualBoxや、Parallels Desktopを使い、MacのひとつのアプリケーションとしてWindowsを動かす。
BootCampと違い、修正→確認が楽。
これらにインストールするWindowsはMicrosoftがWindowsとIEをセットで無償配布しているのでこれを使う。
Free Virtual Machines from IE8 to MS Edge – Microsoft Edge Developmentからダウンロードできる。

スマホの表示確認

実機があればそれを使う。
ない場合、iOSはXcodeに付属しているiOS Simulatorを使う。XcodeはApp Storeで無料でダウンロード・インストールできる。
XcodeをMac App Storeでダウンロード
iOS SimulatorはFinderから、「アプリケーション」→「Xcode右クリック」→「パッケージの内容を表示」→「Contents」→「Developer」→「Applications」→「Simulator.app」にある。
Androidは前項の「仮想OS」に書いたOracle VM VirtualBoxにGENYMOTIONをインストールして確認する。アカウント作成が必要。
もしくはParallels Desktopであれば初めからインストールするOSの候補にAndroidがあるのでそれで確認するのもアリ。

Chromeの拡張機能

コーディング時の助けになる便利なChromeの拡張機能。

拡張機能名 どんな機能があるか
PerfectPixel デザインのjpgを半透過で重ねてデザインとのズレ等をチェックする。
The QR Code Extension 今見ているページのQRコードを生成する。
User-Agent Switcher for Chrome ユーザーエージェントを変更する。
Page Ruler 定規を表示してサイズを測ることができる。
Awesome Screenshot スクリーンショットを撮る。

便利アプリ・サービス

アプリ・サービス名 概要
ImageOptim 画像の圧縮
OpenOffice 無料のオフィスソフトウェア
MacWinZipper zipファイルを作成。Macの標準機能でzipを作成すると余計なファイルが混入したり、ファイルが文字化けしたりするのを防ぐ。
BOOSTNOTE スニペット・ノート管理ツール。Dropbox等に対応しているので、各種デバイスで同期が可能。
Skype もはや説明不要?の無料通話・チャットアプリ。
Dropbox オンラインストレージ。ファイルの共有。