連載
» 2012年12月12日 18時05分 UPDATE

UXClip(13):Coda 2かSublime Text 2か。あなたはどちらのエディタ派?

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

[ひらいさだあき,html5j.org]

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

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

01.jpg

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

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

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

 最初に、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のデバッグが行えます。

02.jpg

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

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

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

03.jpg

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

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

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

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

04.jpg

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

最適な開発環境とは?

 Coda 2はオールインワンの統合開発環境のようでした。多機能ではありますが、さまざまな機能が使いやすく配置されていて、とても使いやすそうだと感じました。またGUIから操作できることがとても多かったです。

 Sublime Text 2は初期状態では普通のエディタですが、ショートカットキーを覚え、パッケージをインストールしカスタマイズすることで、自分に最適な開発環境が作れます。

 Coda 2、Sublime Text 2以外にも多くの開発環境がありますが、自分に合ったもの選び、使いこなしていきたいと感じました。

hirai.jpg

ひらいさだあき

カカクコム 食べログ本部 エンジニア、HTML5とか勉強会スタッフ

以前はSIerでJavaを、いまはRubyとRailsで開発しています。HTML5やJavaScriptも楽しいです。sadahtechlog


「UX Clip」バックナンバー

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。