Coda 2かSublime Text 2か。あなたはどちらのエディタ派？：UXClip（13）

「Coda 2かSublime Text 2か」で、Web制作の開発環境でよく利用されるエディタについて話し合われた「CSS Nite After Dark」をレポートする

» 2012年12月12日 18時05分公開

　2012年11月9日、KDDIウェブコミュニケーションズセミナールームで「CSS Nite After Dark（5）」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「Coda 2 VS Sublime Text 2」で、Web制作でよく利用されるエディタについての内容でした。

優雅に行こう！　Coda 2で次世代のコーディングへ

　エイチツーオー・スペースのたにぐちまことさんから、「優雅に行こう！　Coda 2で次世代のコーディングへ」というタイトルでCoda 2が紹介されました。

　Coda 2はMac専用のソフトウェアで、エディタや統合開発環境として利用できます。また、有償ですが7日間は試用できます。

Coda 2

　たにぐちさんのセッション資料や動画は、以下のページで公開されています。ライブコーディングのデモ動画も見られます。

CSS Nite「After Dark」（5）フォローアップ：たにぐちまことさんのセッション | CSS Nite公式サイト

　最初に、Coda 2の魅力として「多機能」「軽い」「美しい」という3点が挙げられました。

　Coda 2には、ターミナルの機能、リファレンスの参照機能、MySQLのクライアント機能などがあります。しかし起動はとても速いそうです。またMac専用のソフトウェアであるため、見た目がMacの標準に沿っていて、OSに対して最適化されているということです。

　Coda 2のショートカットキーはMacのFinderのショートカットキーと同じような操作ができるようになっているため、Finderと同じような操作感で利用できます。

　ライブコーディングではWordPressのサイト構築のデモが行われました。Coda 2にはサイト定義という設定があり、サイト名、FTPの情報、データベースの接続情報などを登録し、複数のサイトを管理できるそうです。これらの情報はiCloudと連携し、複数のマシンで同期できます。

　WordPressのzipを解凍後、Coda 2にドラッグアンドドロップし、WordPressのサイト構築を行います。

　Coda 2のプレビューでは、HTMLやWebページを確認できます。プレビューは通常のWebブラウザと同じため、WordPressの初期セットアップはプレビューで行えます。MySQLの設定もCoda2から行えるため、phpMyAdminなどのクライアントアプリケーションなしで操作できます。

　テンプレートなどのファイルを修正して保存すると、プレビューが自動的にリロードされ、修正内容をすぐに確認できます。プレビューにWebインスペクタの機能があり、プレビューでHTMLやJavaScriptのデバッグが行えます。

　Coda 2はGUIからさまざまな操作ができます。スライダーでPaddingの量を調整して、プレビューでリロードせずに表示されます。またborder-radius（角丸）の設定も、マウスの操作で調整できます。

　Coda 2ではエディタの関連付けをSublimet Text 2など他のアプリケーションに設定できます。Coda 2にはさまざまな機能があり、エディタとして使う必要はなく、他のアプリケーションと併せて使っていくこともできるそうです。

緊急指令！噂のSublime Text 2をマスターせよ

　こもりまさあきさんから、「緊急指令！噂のSublime Text 2をマスターせよ」というタイトルでSublime Text 2が紹介されました。

　Sublime Text 2はWindows、Mac、Linuxに対応したエディタです。Sublime Text 2は有償のソフトウェアです。継続して利用するにはライセンスを購入する必要がありますが、ダウンロードして試用できます。試用期間は特に定められていません。

Sublime Text 2

　こもりさんのセッションの資料や動画は以下のページで公開されています。こもりさんのセッションでもWordPressを構築するデモが行われました。

CSS Nite「After Dark」（5）フォローアップ：こもりまさあきさんのセッション | CSS Nite公式サイト

　Sublime Text 2の特徴として「文字列の選択、操作が柔軟にできる」「パッケージを入れてカスタマイズできる」「コマンドパレットからさまざまな操作ができる」などが挙げられました。

　Sublime Text 2では「⌘(Ctrl) + D」で単語を選択でき、これを繰り返すことで同じ単語を複数選択できます。そして選択した複数の単語を一度に編集できます。

　この他にも複数行を一度に編集するショートカットキーなどもあり、ショートカットキーを覚えると効率的に作業ができるそうです。

　コマンドパレットではコマンドを実行できます。コマンドにはファイルのシンタックスを変更するものや、インストールしたパッケージによっても追加されるコマンドなどがあるということです。

　Sublime Text 2 のパッケージとは、拡張機能のようなものです。パッケージ管理を行うSublime Package Controlというパッケージがあります。パッケージのインストールは手動でファイルをコピーする必要がありますが、Sublime Package Controlをインストールするとパッケージのインストール、アップデート、有効化、無効化をコマンドパレットから実行できます。

　パッケージは数多く公開されており、例えば以下のようなパッケージがあるそうです。

サイドバーを拡張するパッケージ
ZenCodingのパッケージ
SFTPを行うためのパッケージ
SASSやLESSをビルドするパッケージ
Gitを利用するためのパッケージ
Node.jsの補完を行うパッケージ

　Sublime Text 2は、初期設定ファイルがJSON形式のテキストファイルであり、またユーザーインターフェイスが英語のため、とっつきにくいところもありますが、基本的にはシンプルなエディタだということです。ショートカットキーやパッケージは数多くありますが、必要なものを覚えて、必要なものから追加していくとよいそうです。