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 と入力することで確認できます。

    おすすめパッケージ

    僕が気に入って使ってるパッケージは以下の通り
    • LESS-build (要node.jsですが、Command + b だけで.lessのファイルを.cssにコンパイルしてくれます)
    • HTML5
    • Git
    • cdnjs
    • SFTP
    • Tag
    • SublimeCodeIntel
    • Nuttuts+Fetch (自分で作ったプロジェクトテンプレートセットをさくっと組み込んでコーディングが開始できます)
    • Terminal (今のディレクトリで Terminal を開いてくれます)
    他にもたくさんパッケージがあるので、チェックしてみてください。

    コミュニティ

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

    Read on...

    長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かってたつもりだけど、実際にアプリを作ってみて、具体的にそれを感じることができたので、ちょっと長いですがどういうことなのか説明してみます。

    Read on...

    先日Google+でAddy Osmani氏が紹介していたオンラインツールが便利そうだったので紹介します。

    DocHub.io


    CSS, HTML, JavaScript, DOM, jQuery, PHP, PythonのAPIリファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。

    Dillinger.io


    最近GitHub関連で使われるようになって流行り始めたMarkdown記法を、視覚的に確認しながら入力できるツール。DropboxやGitHubのアカウントで繋ぐと、アップロードできるようです。Mac用デスクトップアプリのMouというのも合わせて紹介されていました。

    HTML5Please


    今から使えるHTML5機能のリストとブラウザの対応状況に応じたアドバイス、そしてPollyfill(未対応ブラウザ向けに機能を補完するJSライブラリ)などを教えてくれる便利サイト。

    そしてそのAPI。ここで作ったウィジェットを自分のサイトに埋め込むことで、未対応の機能がある場合に教えてあげるUIを簡単に作れます。ブラウザの対応状況は caniuse.com を使うことで常に最新の状態だとか。

    CSS3Please


    このページに表示されているCSSをインラインで編集することで、表示内容を確認しつつコピペできる便利サイト。

    CSS3 Playground


    表示内容を確認しながらCSS3のプロパティをいじることができるプレイグラウンド。グラデーション、テキストプロパティ、トランスフォームなどに対応しています。

    Responsive


    ワンソースでスマートフォンからデスクトップまで幅広い閲覧環境に対応するレスポンシブウェブデザインというコンセプト。そんなレスポンシブウェブデザインを使って作られたサイトの表示内容をまとめて確認できるツール。

    CanIUse.com


    既にご存じの方も多いと思いますが、HTML5のブラウザごとの対応状況を調べるサイトといえばここです。

    HTML5 Readiness


    こちらもHTML5の対応状況を知るには有名なサイトですが、個別のAPIについて調べるためというよりも、HTML5の実装が進行していることをビジュアルで実感できることに主眼が置かれています。

    Browserstack


    新旧各種ブラウザのテストができる有料サービス。

    Grunt

    JavaScriptプロジェクト向けのコマンドラインビルドツール。ファイルの連結からバリデート、圧縮(難読化)、ユニットテストまでできます。まだベータ版だけどとてもパワフル。

    jsPerf


    様々なJavaScriptのテストケースを作成・共有できるサイト。既存のテストケースだけでも参考になります。Browserscope.orgを使ったブラウザごとの比較も。

    jsconsole


    JavaScriptコンソール兼デバッガのウェブアプリ。Adobe Shadowのようなツールが出てきた今どの程度役に立つのかは不明ですが、iOSやAndroidのブラウザに接続して使えるデバッガ機能が素敵です。

    Chrome DevTools AutoSave

    http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/
    Chrome DevToolsの変更履歴管理機能と保存機能は便利ですが、この拡張機能を使うと自動で保存してくれるようになり、実質的にChrome DevTools上で開発を進めることが可能になります。Addy Osmaniがスクリーンキャストで分かりやすく説明してくれています。

    Codiqa


    jQuery Mobileサイトをビジュアルで構築できるウェブアプリ。

    Read on...

    Let me introduce the “HTML5 Soda Can” demo I made for ThinkMobile2011 a while ago.

    The original request was to come up with some ideas of HTML5 ads for audience at the event. It isn’t that hard just to create ads using HTML5, but since the purpose was to show off to the audience, I needed to inject “wow” feeling as well as to put clear sign that it’s made of HTML5.

    Concept

    Though there’s still a lot of things which native apps can do while web apps cannot do, it’s an interesting challenge to make HTML5 apps work like native apps. On the contrary, it’s advantage of web apps that you can see the app without installing.

    So, here’s the demo I have come up with: “Wow” enough HTML5-ish, instantly experience-able and easily imagine-able of actual advertisement.

    Demo

    Soda Can: Please access using iPhone or iPad (you can view on Chrome but don’t break your MacBookPro!)

    1. When loaded, you’ll see a can “Google Soda”. (It was originally Coke but for some reason, I asked Jerome Senaillat to make it up as “Google Soda”.)
    2. Try tilting your iPhone / iPad. You can find the can actually tilts inside your browser.
    3. You know what soda is like? Try shake your device. Guess what???

    When the background turns red enough, try touching tab of the can. (sorry if browser crashes…)

    How was that? Doesn’t this look interesting when you see it after clicking banner ad of some kind of soda drinks?

    Technical Tricks

    Could you guess how I did it? I assume you wondered how I did:

    • 3D
    • Detect device tilt
    • Detect device shake
    • That performance on smartphone

    There’s roughly 3 tricks:

    • Cylinder is made of long and narrow DOM elements
    • CSS3 3D Transform enables it three dimensional and fast enough (using GPU)
    • Device Orientation detects tilt and gravity

    The side of can is made of many (180) long and narrow divs with each background images slightly shifted. Adding top and bottom of the can completes the shape. GPU rendering doesn’t make you feel like it’s actually moving more than 180 DOM elements when Device Orientation API detects device tilt and style changes.

    I don’t bother writing any more details since it’s much easier reading the source code. This is roughly the tricks.

    Summary

    Asking users to install native app which is actually ad via ad sounds ridiculous but what if that app is made of HTML5? It may directly lead to conversion.

    I’m hoping to see interesting ideas of ads using HTML5 soon.

    Read on...

    HTML5を使ってメトロノームを作ってみたのでご紹介します。

    http://demo.agektmr.com/metronome/

    動作確認はChrome12、Firefox4、Safari5、Opera10で行いました。iOS4のSafari、Android2.3の標準ブラウザでも音は出ないけど動くことは確認しています。

    使ったHTML5関連テクノロジーは

    • Application Cache
    • CSS3 transform, transition, box-shadow
    • Web Audio API
    • Audioエレメント
    • Drag
    • WebFonts

    といったところでしょうか。画像は一切使っていません。Chrome12の場合、Omnibox(URLの欄)にabout:flagsと入力してWeb Audio APIを有効にすることで、割と安定した動作をするはずです。無効な場合はAudioエレメントを使うようフォールバックしますが、Chromeだと不安定なようです。

    トリックは単純で、transformとtransitionを組み合わせてメトロノームの棒を左右に揺らすアニメーションを一定間隔で繰り返しているだけです。反転するタイミングでWeb Audio APIまたはAudioエレメントを使ってクリック音を鳴らしています。

    ボタンをクリックまたはスペースキーでメトロノームをスタート・ストップできます。重石を上下に動かせば、スピードを調節できます。

    Enjoy!

    Read on...