Tender Surrender

皆さんはコーディングの際、どのエディタを使っていますか？僕はもっぱらTerminalでvimゴリゴリ派だったのですが、人によってはEmacsだったり、MacのアプリだとCodaとかTextMateが人気でしょうか。最近だとWebStormとかKomodo Edit辺りも人気あると聞きます。手に馴染んだエディタがあると、なかなか変える気にならないですよね。そんな中で僕が最近本気で使い始めているのが、最近海外のフロント系エンジニアの間で人気が高まっている Sublime Text 2 というエディタです。今日はこの Sublime Text 2 ( 以下 ST2 ) を紹介してみます。

Sublime Text 2 の魅力

僕の場合、vimがすっかり手に馴染んでしまっていたので、乗り換える必要性を強くは感じていなかったのですが、やはりプロジェクト単位で作業する場合は、左側にプロジェクトのファイル一覧が表示されてたりすると便利ですよね ( NERD tree は試したのですが、なかなか使い方が覚えられず、断念してしまいました。) 。タブでファイルを複数開いておくとか、日本語も十分対応してくれてる必要があります。何よりもvimと同じ操作で使えることも、僕にとっては超重要でした。そんな条件でいくつか試していた中で、たまたま同僚がまとめて購入するからというので使い始めたのが、ST2 です。

ST2 のサイトに書いてあるウリはこんな感じ：

シンプルで高速なインターフェース
ミニマップで全体像を把握
テキストのマルチセレクトが可能
マクロを使った操作の自動化が可能

しかしながら、ぶっちゃけどれも僕には響きませんでした。そもそもウリの魅力が理解できないだけでなく、GUIで設定の変更もできないし、正直なところ何が人気の秘密なのかすぐには分からず、vimモードで使えてるからまあいいかー程度で使っていました。しかし Sublime Package Control を入れてから、段々これにハマり始めています。

Package Control を入れてできるようになったことは、例えば

LESSのコンパイル (？) がショートカットキーひとつでできるようになる (からやっと LESS を使い始めた)
git コマンドがエディタ内から打てるようになった
HTMLタグの補完をしてくれるようになった
CDNのURLを簡単に入力できるようになった

など。これだけで魅力的に感じる人もいるかもしれません。Package Control はエディタ内でレポジトリからプラグインを手軽にインストールできるプラグインで、TextMate 互換、かつ Python で書くことができます。

ST2 に魅力を感じた人は、早速インストールしてみましょう。お試しはもちろん無料で出来ますし ( 時間制限付き？ )、購入する場合は $59 です。

Sublime Text 2 の便利な使い方

英語ですが、既に素敵なまとめ記事がありますので、そこから拝借 + ちょっと味付けして、僕がグッときた Tips をいくつか紹介しましょう。

コマンドパレット (Command Pallet) を使う

TextMate と同様、ST2 では Command + Shift + p でコマンドパレットを開くことができます。コマンドパレット上でタイプすると絞りこまれていくので、必要なコマンドを選択して実行できます。

Package Control をインストールする

何はともあれこれ。これを入れることで ST2 は比較にならないくらいパワーアップします。インストールするには Control + `、日本語キーボードの場合 Control + Shift + @ を押すと、画面下にコンソールが開きますので、下記のコマンドをコピペして入力します。

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

実行後再起動すれば、Package Controlが使えるようになります。コマンドパレットを開き、install と入力すると、レポジトリからパッケージのリストが読みこまれ、好きなものをインストールできるようになります。

Vimモードを有効にする

メニューの Preferences から Settings - Default を選択すると Preferences.sublime-settings というファイルが開きますので、一番下の "ignored_packages": [“Vintage”] の部分を "ignored_packages": [] に変更して保存します。これでVim互換モードが利用できるようになります (あくまで互換なので、完璧ではないです。徐々に改善している模様) 。

スニペットを活用する

まだ自分でどうやって作るかなどまで掘り下げられてないですが、必要に応じて各種 Snippet のパッケージをインストールすることで、手軽に定型の文字列を入力することができるようになります。例えば li と入力してタブキーを押せば、

li

と表示されて、タブを押すごとに必要な属性値を補完していくことができます。利用できるスニペットはコマンドパレットで snippet と入力することで確認できます。

コミュニティ

最後にこの ST2 ですが、日本ではまだまだユーザーが少ないようで、日本語の情報はあまり多くありません。Chrome の Google API Expert である @yoshikawa_t さんが Google Group を作ってくれていますので、興味のある方はぜひそちらで情報交換をしましょう。他にもいくつか有益なリンクを載せておきます。

※この記事は 2012年5月2日に公開されたものを一部アップデートしたものです。

HTML5Rocks というサイトをご存知ですか？HTML5Rocks は、世界でも有数の HTML5 関連情報が集まったサイトで、チュートリアルやサンプル、スライド、動画などで構成されています。このサイトは Google の Chrome Developer Relations チームが中心になって作っているのですが、英語のみだったサイトが、2012 年 5 月に i18n ( internationalization = 国際化 ) を果たし 9 ヶ国語に対応、日本語のコンテンツも追加し始めました。

まだまだ量は多くありませんが、これまで英語を読むことに抵抗のあったディベロッパーの皆さんにも、まとまった情報源として利用して頂けるようになったのではないかと考えています。既に翻訳されている記事からいくつかご紹介しましょう。

JavaScript で File API を使用してファイルを読み取る

File / FileList / FileReader API を使用し、JavaScript でバイナリファイルの処理と読み取りを行うためのスタートガイドです。

ネイティブ HTML5 ドラッグ＆ドロップ

ドラッグ＆ドロップも HTML5 の主要機能の 1 つです。この記事では、ネイティブドラッグ＆ドロップ機能を追加してウェブアプリケーションを強化する方法について説明します。

File System API について知る

File System API により、アプリケーションでは、ユーザーのローカルパソコン上の保護されサンドボックス化されたファイルシステムに対してファイルやディレクトリの読み取り/書き込みを行うことができます。

Contribution 受付中！

この HTML5Rocks ですが、実はサイト自体がオープンソースで開発されているということをご存知でしたか？レポジトリは以下になります。

https://github.com/html5rocks/www.html5rocks.com

そして実は(ここからが本題なのですが) HTML5Rocks では記事の日本語訳を募集しています。多言語に翻訳されるドキュメントでは一般的に言われることですが、翻訳を常に最新の状態に保つのは、非常に難しいのが現実です。そこで HTML5Rocks では、オープンソースであるという利点を生かし、皆さんの翻訳を受け付けています。既に @kuuさん、@ukyoさん、@Layzieさん、@pikoteaさん、@iizukakさんといった方々から contribution 頂いていますが、新し目の記事に関してはまだまだ手が付けられていません。

少しでもご興味を持たれた方は、まずは Style Guide をお読み頂き、もし実際に翻訳をされた場合は、Pull Request を送って頂ければと思います。また、最近デザインが変わり、翻訳者のクレジットも入れられるようになりました。Style Guide の Translations の項を参考に、ご自分の名前を入れて下さい。

以前「他の人の翻訳とかぶってしまう可能性を考えると、翻訳していいものか迷ってしまう」という問い合わせがあったのですが、現在は github に移行しておりますので、翻訳を始めた段階で Issue を立てて頂ければ、Pull Request の受付はその順番を考慮させて頂きます。

何か質問などありましたら、Google+ や Twitter で気軽に話しかけて下さい。みなさんからの contribution をお待ちしております！