Posted 2012年8月25日 by 井上 & filed under いろいろ.

昨日、Agile渋谷のEmacs勉強会で話をしてきました。参加者に若者が目立ちました。みんなが積極的にLTするのが印象的でした。下手すると会場で最年長だったかもしれません。怖いので確認していませんが。

プレゼン資料はCRITICAL WORKSに公開しています。公開記事は「Agile渋谷のEmacs勉強会で話した講演資料を公開します」です。

しばらく、ありえるえりあを離れてCRITICAL WORKSでブログを書く予定です。別にありえるえりあが嫌になったわけではありません。気分転換です。たぶん1年後にありえるえりあに戻ってきます。ただCRITICAL WORKSの黒い背景色が気持ち悪いので、これがいつまでも変わらなかったらもっと早く戻ってくるかもしれません。ついでに書くとCRITICAL WORKSというタイトルもあまり気に入っていませんが、良い代案がないので、こっちは特に変更を希望していません。

追記:
誤解されると困るので追記します。アリエルのCTOはやめていません。

Hello, World!

Sublime Text のプラグイン開発を始めるのは、とっても簡単です。メニューバーの Tools > New Plugin.. を選択して下さい。雛形となるプラグインのコードが記述されたバッファを作ってくれます。Sublime Text のプラグインは、Python を使って書いていきます。

import sublime, sublime_plugin class ExampleCommand(sublime_plugin.TextCommand): def run(self, edit): self.view.insert(edit, 0, "Hello, World!")

このプラグインは、バッファの一番最初に、「Hello, World!」という文字を挿入するだけの単純なものです。ファイルを保存して、実際に試してみましょう。

# 保存先のダイアログを開くと、User パッケージのディレクトリが選ばれた状態になっています。この場所に保存しても動作しますが、Packages ディレクトリに任意のフォルダを作って、そこに保存する方が望ましいです。

実行は、コンソールから行います。コンソールは、ctrl+` キーもしくは View > Show Console を選択して表示します。このコンソールは、組み込みの Python インタープリタ（バージョンは 2.6系）で、Sublime Text の API にアクセスできるようになっています。

サンプルのプラグインを実行するために、コンソールに以下のコマンドを入力して下さい。

ファイルの先頭に、「Hello, World!」の文字が挿入されたでしょうか？これでひとまず、プラグインを作ることができましたね。

# ソースコードの行頭に挿入されたテキストは、保存前に消しておくことを忘れずに :)

More detail..

Sublime Text には最初から、いくつかのプラグインが含まれています。メニューバーの Preferences > Browse Packages で Packages ディレクトリを開いてみて下さい。ここに、プログラミング言語別のプラグインと標準機能のプラグイン（Default）、標準機能のプラグインをカスタマイズするためのプラグイン（User）などが入っています。Sublime Text を使っている方は、何かしらのプラグインをもう既にインストール済みかと思います。それらもこのディレクトリにフォルダが作られていますので、眺めてみて下さい。

プラグインは、公式の API ドキュメントを参照しながら作っていきますが、一番頼りになるのは、ここにある実際のプラグインのソースコードだったりします。特に、Default のプラグインは、サンプル例となることを意識して作られているようなので、参考になります。

また、プラグインから組み込みのコマンドを呼ぶことができるのですが、どのようなコマンドがあるかを調べるには、キーバインディングの定義が参考になります。メニューの Preferences > Key Bindings – Default で keymap のファイルを開き、バインドしているキーからコマンド名を逆引きするのが効率のよいやり方です。

というわけで、私も早速、簡単なものを作ってみました。選択範囲に対して、任意の文字で囲むプラグインです。Vim の Surround.vim を意識してはいるのですが。。

囲みたい範囲を選択して、Ctrl-s, Ctrl-s とキーを打つと、下段に入力窓が現れます。

入力窓に、囲みたい文字を入力。選択領域の前後が、入力した文字で囲まれました。

インストールは、コマンドパレットで「Package Control: Add Repository」を選択し、以下の URL のリポジトリを追加して下さい。

sublime_surround:
https://github.com/kawanoshinobu/sublime_surround

上記は、このプラグインのソースコードを置いている GitHub のリポジトリです。その後、同じくコマンドパレットから「Package Control: Install Package」を選択して、「surround」と入力頂くと、追加した sublime_surround というパッケージ名が出てくるはずです。それを選択すれば、インストールは完了です。

このプラグインのソースコードは、以下になります。全然機能が足りてないので、Pull リクエストしてくれる方がいらっしゃれば大歓迎です。

Could not embed GitHub Gist 3327480: Not Found

まとめ

Sublime Text のプラグインを使った経験がある方はご存知かと思いますが、 Sublime Text は、かなり自由に拡張機能を作れるようになっています。Sublime Text はデフォルトでもかなり便利なエディタですが、それでも使っているうちに、不満な部分に遭遇することはあるかと思います。その時に諦めるのではなく、拡張機能を書いて問題を解決するのもまた楽しいと思います。ただ、エディタの拡張は中毒性があるので、のめり込んでしまった場合、私は責任を取れませんので、ご了承願います… ^^;

さて、Sublime Text をきっかけに、Python に興味が出てきた方に Python Conference Japan 2012 （略して PyCon JP 2012）のお知らせです。9月の15日（土）・16日（日）・17日（月祝）の3日間、品川の産業技術大学院大学を会場に Python のカンファレンスが開催されます。プログラムはこちら。
実は縁があって、私も、Sublime Text をテーマに少しお話させて頂くことになっています。セッションでは、今回の記事よりもう少し突っ込んだ内容のお話をさせて頂こうと思っています。面白そうなセッションがたくさんありますので、9月の連休は Python にどっぷり浸かってみるのはいかがでしょうか。

というわけで、Sublime Text のプラグイン開発について、簡単にご紹介させて頂きました。

カスタムコンポーネントを作るためにおさえておきたい 10 のステップ

第三回目のテーマは「コンポーネント」です。ただ、Sencha Touch のコンポーネントについて、ドキュメントに書いてあるようなことを解説するだけだとつまらないので、何かよい切り口はないか考えていました。そんな訳で、今回の発表は、カスタムコンポーネントを作るステップを紹介する過程（＆デモ）で、コンポーネントについての理解を得てもらえるような内容にさせて頂きました。

# 残念ながら、Ustream 中継の録画ができていませんでした。。詳細はスライドから察して頂ければ幸いです。

ABOUT SENCHA ARCHITECT

次に、@basara669 さんから、先日 Sencha がリリースしたアプリケーション開発ツール Sencha Architect についてご紹介頂きました。発表資料は以下の URL で公開されています。

ABOUT SENCHA ARCHITECT：
http://basara669.com/presentation/0727

Sencha Architect は以前から知っていたのですが、@basara669 さんの流暢なデモを見ていると、とてもよいツールのように思えてきて、また触ってみたくなりました。Sencha Architect は、まだ用途が限られそうな印象ですが、今後が楽しみな製品だったりします。

Ustream 中継の録画があるので、興味のある方は、ぜひそちらもご覧下さい。
http://www.ustream.tv/recorded/24277252

HTML5 x Touch UI の UXを考える

最後に @dsuket さんから、開発された Inkpod Web の事例を交えながら、HTML5 x Touch UI の UX についてお話して頂きました。

発表資料は以下になります。

UX on HTML5 x Touch UI from dsuke Takaoka

@dsuket さんがブログに補足記事を書かれていますので、そちらもぜひご覧下さい。タッチデバイスの WEB アプリ全般についての内容ですが、Sencha Touch アプリの開発にも活かせるアイデアがいっぱいで、とても勉強になりました。

まとめ

今回はメインテーマ（Sencha Touch のコンポーネント）以外にも、いろいろな話があって、非常に密度の濃い内容でした。次回以降も、この密度の濃さを維持していきたいと気持ちを新たにしています。

さて、Sencha Touch の勉強会ですが、あと数回、開催を予定しています。次回の開催日が決まり次第、また告知致しますので、ぜひぜひお気軽に遊びに来て下さい！また、発表して頂ける方も随時募集しておりますので、どうぞよろしくお願いします _o_

Problem:

- モバイル環境で快適に利用できるようにアプリケーションを最適化したい
- アプリケーションを最適化する具体的なノウハウや経験に乏しい

1 2	- モバイル環境で快適に利用できるようにアプリケーションを最適化したい - アプリケーションを最適化する具体的なノウハウや経験に乏しい

Solution:

Sencha SDK Tools は Sencha Touch アプリの開発を簡単にしてくれるコマンドラインツールです。このツールを使うことで、Sencha 社が考案した最適化のノウハウをアプリに適用することができます。

Sencha SDK Tools を使って作られたプロジェクトであれば、以下のコマンドでアプリケーションの最適化が完了します。

sencha app build production

1	sencha app build production

– ローカルキャッシュを行い、リクエストの回数を最小限にする

以下は、このコマンドを使ってデプロイされたアプリの通信状況です。1回目と2回目で、リクエスト数が大幅に少なくなっていることが分かるかと思います。もちろん1回目も2回目もアプリの動作は全く変わりません。

（1回目のリクエスト）

（2回目のリクエスト）

これは、JavaScript・CSS ファイルのコードを端末にキャッシュさせることで実現しています。コード文字列を、localStorage に格納して、起動時に解析して実行します。

（4つの静的ファイルのコード文字列が localStorage に格納されています）

また、サーバー側でファイルの変更があった場合、端末のキャッシュを適切に更新する機能も備わります。これは Delta-update Mechanism と呼ばれるもので、変更があったファイル「だけ」を再読み込みします。HTML5 Application Cache のように、更新する場合に全てのファイルを再読み込みする、といった動作はしません。

（変更があった場合、再読み込みを促すアラートが表示されます）

– ファイルのサイズを最小限にする

Sencha コマンドのビルドプロセスで生成される JavaScript ファイルは、依存関係が考慮されたものです。つまり、不要なコードが含まれていない必要最小限のサイズになっています。依存関係は、アプリケーションのコードで宣言している requires から算出されます（※例外あり）。また、Google Closure Compiler を使った強力な圧縮が施されています。

ローディング画面を表示して、ユーザーを安心させる

準備が整うまでの間、ローディング画面を表示する機能も備わります。ローディングのアニメーションは HTML ファイル内に記述されている CSS を使って表現しているため、HTML ファイルさえダウンロードされればローディング画面を表示させることができます。

Discussion:

Sencha SDK Tools は以下のページからダウンロードできます。Windows、Mac、Linux それぞれのプラットフォームに対応しています。

http://www.sencha.com/products/sdk-tools/download/

ツールのコードは JavaScript で書かれていて、Node.js を使って実行します。Node.js の他に、PhantomJS, Open-vcdiff, Closure Compiler, YUICompressor, などが必要ですが、それぞれを個別にインストールする必要はなく、Sencha SDK Tools に全て同梱されています。

Sencha SDK Tools を使った、プロジェクト作成からデプロイ用アプリの出力までの一連のサイクルは、以下の動画がとても分かり易いです。

Getting Started with Sencha Touch 2

プロジェクトを作成すると、app.json という設定ファイルが生成されます。このファイルが、以後のビルドプロセスで、非常に重要な役割を果たします。まず第一に、コマンド実行時にディレクトリ構成を伝える役割を担います。具体的には、JavaScript や CSS 、ライブラリのある場所、また生成したファイルの出力先を定義します。その他、ビルドのオプションを定義します。

第二に、micro-loader というファイル読み込み機能を動作させるために利用されます。HTML ファイルが端末にダウンロードされた後、app.json ファイルがダウンロードされ、その情報を元に JavaScript や CSS ファイルを非同期でダウンロードします（そのため、HTML ファイルに、script タグや link タグで、具体的な JavaScript ファイルや CSS ファイルのパスは記述しません）。製品用ビルドの場合は、その際に差分チェックを行い、キャッシュしているデータを利用するか、再読み込みを促すアラートを表示するかの判定を行います。

その他、HTML5 Application Cache の定義も行います。上述したように独自のキャッシュシステムがあるのですが、これは JavaScript や CSS といったテキストデータのキャッシュを行うもので、画像などのバイナリデータは対応していません。そのため、バイナリデータは、HTML5 Application Cache を使うことになります。Sencha Touch 独自のキャッシュシステムと HTML5 Application Cache を組み合わせることで、さらに強力なローカルキャッシュが実現できる、という寸法です。

このように Sencha SDK Tools を使うことで、効果的なアプリケーションの最適化を行うことができます。ただ、このツールはまだβ版で、動作に不安定な点が多々あります。最新のバージョン（Beta3）だと、app.json ファイルのビルドオプション logger の値を no から false に変更しなければ、動作する JavaScript ファイルが作られませんでした。。また、想定されたプロジェクト構成を前提にしているので、イレギュラーな構成の対応が難しかったりと、融通が利かない点もあります。

とはいえ、いくつかの問題点はあるものの、Sencha SDK Tools は、Sencha 社が検証したベストプラクティスを活用できる、非常に便利なツールだと思います。Sencha Touch をおすすめできる理由が、また一つ増えたように感じています :)

追記
64bit 版の ubuntu で実験したところ、$SENCHA_HOME/bin/jsdbが 32bit 版の libstdc++ に依存しているようで、エラーで動きませんでした。「/opt/SenchaSDKTools-2.0.0-beta3/bin/jsdb: error while loading shared libraries: libstdc++.so.6: cannot open shared object file: No such file or directory」といったエラーが出ます。apt-get で ia32-libs を入れたら直りましたので、共有しておきます。