株式会社パンセのスタッフブログです。Web業界の最新トレンド、マーケティング情報、CMS構築などのお役立ち情報を発信しています。

  1. Penseesトップ
  2. パンセのタネ
  3. Mac を使っている Web サイト制作担当者にオススメのアプリたち
便利ツール

Mac を使っている Web サイト制作担当者にオススメのアプリたち

Mac を使っている Web サイト制作担当者にオススメのアプリたち サムネイル画像

うしじまです。こんにちは。Web サイトの制作やアプリケーションを作っているエンジニアの方々はずいぶん Mac を使う方が増えましたね。私も15年ほど Mac で開発をやってきました。そんな私がオススメしたいアプリケーションを紹介します。

エディタ編

Mac ユーザーが増えてくれたおかげで、エディタの話だけでひとつのエントリーが書けそうなほどに多くのエディタが登場しています。メインストリームは Sublime Text または Atom でしょうか。今回はそちらには触れず、私なりの利用方法に沿って紹介いたします。メインで利用するエディタを決めておき、特定の機能がすぐれたものを控えとして用意しておくのが私の利用方法です。

Coda

Web サイト制作用統合アプリケーション。HTMLプレビュー機能を備えたパワフルなエディタをベースに、ファイルマネージャや SSH クライアント、MySQL クライアントなども利用できます。ファイルマネージャについては FTP のみならず SFTP (SCP) や WebDAV、Amazon S3 上のファイルも直接編集できます。さらに簡易的なバージョン管理機能もあり、Subversion と GitHub に対応しています。

Coda.png

個人的には Web サイトへの公開機能がたいへん重宝しています。プロダクション環境への公開には利用しませんが、開発やステージングの環境にボタン一つで差分アップロードしてくれるのが便利です。FTP クライアントで個別にアップロードする作業に比べて格段の効率アップができます。 この記事を書いている時点での価格は 9,800円(税込)となかなかのお値段ですが、試用ができますのでぜひ試してみてください。

CotEditor

「文字」に関する機能が充実したエディタです。正規表現を使った検索・置換に定評があります。また、Web サイトを制作していると時折直面する特殊な文字が表示できない問題にも、文字コード表示機能に助けられることがあります。文字コードでお困りの事件が時々発生するという方は控えとしてインストールしておいてみてはいかがでしょうか。無料で利用できます。

CotEditor.png

mi

Mac OS X 以前からお世話になっているエディタですが、こちらも文字コード絡みで利用することが多いです。他にも矩形(くけい)選択・編集機能が便利で利用します。 Coda にも似た機能があるのですが、使い慣れた mi をそこだけ利用することがあります。現在、無料で利用できます。

mi.png

MacDown

GitHub を導入して以来、Markdown 記法でドキュメントを書く機会が増えてきました。Atom や Coda でも同様の機能はありますが、単機能特化で各書式にショートカットが使えるこちらが便利だと思っています。この記事の下書きもこのエディタで書いています。無料です。

MacDown.png

バージョン管理編

バージョン管理はこれまで Subversion をメインに利用していましたが、GitHub も導入し、プロジェクトごとに徐々に移行しようと検討をすすめているところです。いずれもメインはターミナルのコマンドですが、場合によっては GUI のクライアントを利用することもあります。

Cornerstone

無償で提供されている Mac 用 Subversion クライアントはどれも決め手に欠ける感じで、Versions と比較して選択したのが Cornerstone です。主な決め手は Diff ツールが内蔵されていること(外部のものを利用することも可)。有償で、記事を書いている時点での価格は7,400円となっています。

Cornerstone.png

GitHub for Mac

次に紹介する tig を知ってからは使わなくなってしまいました。GitHub 社が提供しているものですので、いわゆる「黒い画面」に拒否反応を示す方にはオススメです。無料で提供されています。

GitHub.png

tig

こちらは「黒い画面」が苦手ではない方用。これだけで GitHub を使いこなせている気分になること請け合いです。私は主にファイルの追加やコミットしたいファイルを選別する時に利用していますが、コミットログから Diff を表示する機能もたいへん便利です。

Terminal.png

その他編

XScope

The Iconfactory 社から提供されている、便利小物の複合ツールです。機能が多いので一覧での紹介とさせてください。

xScope.png
Mirror
  • 専用のアプリを iOS 機器にインストールすると Mac 上の画像やウィンドウを iOS 機器で表示確認することができます。
Text
  • 各種アプリケーションで選択している文字の情報を確認し、さらに HTML エンティティや URL エンコードに変換することもできます。
Dimensions
  • ディスプレイ上のあらゆる要素の幅や間隔を確認することができます。
Rulers
  • ディスプレイ上に表示できる定規です。XY 方向だけではなく角度を変更することもできます。
Overlay
  • ブラウザ上にグリッドなどの画像を重ねて表示することができる機能です。
Screens
  • いろいろなサイズのディスプレイサイズをシミュレートし、要素のおさまり具合などを確認できます。また視力の弱い方や色覚障がいのある方からどのように見えるのかも確認することができます。
Loupe
  • ディスプレイ上の要素を拡大表示するとともに、カーソル位置の色情報を取得できます。
Guides
  • ディスプレイ上に水平・垂直のガイド線を表示できます。ガイドは複数表示できます。
Frames
  • ディスプレイ上にフレームを表示します。フレームのサイズはプリセットされたものから選択でき、フレーム内にはグリッドを表示することもできます。フレーム内のスクリーンショットを撮影することもできます。
Crosshair
  • ディスプレイ上に交差するラインを表示します。ラインはマウスカーソル位置に合わせて移動し、カーソルの位置も表示してくれます。

私がとくに便利に利用しているのは Dimensions と Loupe です。Crosshair もウェブサイト上の要素が整列できているかを確認する時に便利です。こちらも試用ができます。Mac App Store での価格は 6,000 円となっています。

Transmit

エディタ編で登場した Coda にもファイル転送機能はありますが、プロダクション環境への手動ファイル設置などにはこちらを利用しています。餅は餅屋です。Coda 同様 FTP や SFTP だけではなく、WebDAV や Amazon S3 にも対応しているファイル転送の強い味方。サーバのディスクを疑似的に Mac 上のディスクのようにマウントしてくれる機能も便利です。公式サイトでの価格は 3,400 円となっています。試用可能です。

Transmit.png

Genymotion

Mac では XCode をインストールすると iOS シミュレータが使えるので、スマートフォンサイトの iOS 機器向け検証は非常に容易に実現できます。この Genymotion を利用すると Android 機器用の検証ができるようになります。Mac 用だけではなく VirtualBox が動作する環境であれば利用できるようです。ビジネスで利用する場合は Business 版(有償)を利用する必要があります。

Genymotion.png

Reggy

正規表現確認ツール。利用頻度が高いわけではないですが、あると安心なツールです。複雑なパターンにマッチさせる正規表現をプログラム内に書いてその都度 デバッグするのは効率が悪いので、このツールで検証してから組み込むようにしています。どうも開発がストップしているようですが、今のところ Yosemite でも利用できています。無料で利用できますが、寄付も募っています。

Reggy.png

まとめ

他にも AlfredPixelmator などじっくりご紹介したいものもありますが、あまりにも長い記事になりそうなので次の機会に紹介させてください。ここで紹介したアプリケーションたちがどこかの Web サイト制作担当者様の作業効率アップに貢献できることを祈りつつ筆を置きます。

HubSpotお役立ち情報 コツや使い方をご紹介します!

POST SEARCH

    RECOMMEND

    CATEGORY