2013-12-07

Sencha Touch と ExtJS

sencha sencha touch

Sencha Advent Calendar 2013 7日目です。

最近、私が Sencha に詳しいと言うことで、とある仕事で Sencha を使うことになりました。しかし、Sencha でも ExtJS の方。私が得意なのは Touch なんだけど。。。最近の ExtJS は全く知らない（汗

とはいえ、ExtJS4 になって Ext.define とか MVC とか Sencha cmd とか似たような感じっぽい。というよりむしろ Touch の元になったものなので、何とかなるだろうと始めてみました。最初は使うコンポーネントが違うくらいだろうと思ったのですが、使い出していると意外と細かいところで違うものなんだなぁ、と気がつきました。

というわけで、今日のテーマは「ここが違うよ！ExtJS と Sencha Touch」
Sencha Touch と ExtJS の両方をある程度知っている人にしか分からない、細かすぎて伝わらないネタです。

configが違う

Sencha Touchでは、Ext.define で渡すコンフィグオブジェクトに、config という名前のプロパティオブジェクトを付けると、それは特殊なconfigプロパティとして認識されます。例えば、config オブジェクトに name というプロパティをセットすると、自動的に updateName や applyName というメソッドが追加されます。それらをオーバーライドすることで、各プロパティをセットしたときのフックが定義できます。

ExtJSでも config は使えるのですが、各種コンポーネントがこの作りに対応していません。Touchのコンポーネントは基本的にこのconfigを使って作られているため、プロパティのフックが簡単に行えるのですが、ExtJSではできません。そのうち対応してくれると嬉しいなぁ。

コントローラーが違う

ExtJSも4からMVC アーキテクチャが導入され、Controllerクラスが使えます。ただし、これも Touch のController と少し違います。
ExtJSのControllerの定義は次のような感じ。

 Ext.define('MyApp.controller.Users', {
     extend: 'Ext.app.Controller',

     refs: [{
         ref: 'list',
         selector: 'grid'
     }],

     init: function() {
         this.control({
             'button': {
                 click: this.refreshGrid
             }
         });
     },

     refreshGrid: function() {
         this.getList().store.load();
     }
 });

対して、Touchのコントローラーはこんな感じ。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        },

        refs: {
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        //called whenever the Login button is tapped
    },

    doLogout: function() {
        //called whenever any Button with action=logout is tapped
    }
});

refs でコンポーネントをComponentQuery で指定するのはほとんど同じです。しかし、control定義が全然違う。少し驚きですね。また、ExtJS の control定義では、refs で定義した名前が使えない！！これにはやられました。Touchから入った人ははまるポイントではないでしょうか。（ってそんな人いるのか・・？）

bootloaderが違う

Sencha Cmdで、sencha generate app でアプリケーションを作るときに、sdkパスを Touch か ExtJSを切り替えるだけで、どっちのアプリケーションでも簡単に作れます。index.html も作ってくれるのですが、これが読み込む JS がまた違う。

Touch のほうは、microloader というのを読み込んで、それがアプリケーションを読み込んでくれます。この microloader を development か production を切り替えるだけで開発と本番を切り替えられます。次のような index.htmlが作られます。

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <style type="text/css">/* 略 */</style>
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

ExtJSは全然違います。次は ExtJS の index.html です。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <link rel="stylesheet" href="bootstrap.css">
            <script src="ext/ext-dev.js"></script>
            <script src="bootstrap.js"></script>
        <!-- </x-bootstrap> -->
        <script src="app.js"></script>
    <!-- </x-compile> -->
</head>
<body></body>
</html>

bootstrap という似たような物があるのですが、microloaderとはまた別の物。これが結構くせ者で、ビルドする度にパスが変わったりで慣れるまで苦労しました。実は ExtJS のテンプレートの方にも .sencha/app/microloader/ があります。これが使えるのか検証してないですが、使えるようになってくれると嬉しい。

まとめ

総じて、やはりTouchのほうが新しいため、アーキテクチャも洗練されているように感じます。もちろん ExtJS には便利で強力なコンポーネントが山ほどあるのが魅力ですが、既存のコンポーネントを新しくするのは影響も大きく大変なのでしょう。近い将来、どちらも同じように使えるようになることを期待しています。

以上、Sencha Touch から見た ExtJS の違いでした。

2013-07-14

jQuery Mobile & Sencha Touch ハンズオンやりました

sencha touch jquery mobile javascript

昨日、こちらのハンズオンイベントで講師させて頂きました。

AITC第2回勉強会「jQuery MobileとSencha TouchでWebアプリを作ってみよう！」～ 2大スマホ向けWebアプリフレームワークを使いながら比較～

猛暑の中、30名近い参加者にお越し頂き、ありがとうございました。

IT関連ではない会社や、マーケティング部などの非エンジニアの方々や、遠方よりこのために参加頂いた方々、学生さんなどなど、多種多様な方に参加頂きました。

資料のまとめは前回のエントリで。
jQuery Mobile & Sencha Touch ハンズオン資料まとめ

ある程度予想はしていましたが、やはり環境構築が鬼門でした。今回、node.js＋express や、ruby ＋ compass など非エンジニアの方には馴染みが無いツールを使う演習のため、本質的では無いところで時間がかかってしまったのがやや残念です。

とりあえず勉強会として、良かった点、改善すべき点などをまとめてみます。

良かった点

jQuery Mobile と Sencha Touch を同時に扱うというテーマはなかなか面白かった

同時に見比べられるので、非常に違いが分かりやすいと好評を得ました。1回で両方できるお得感はあったので申し込んだ、欲張りすぎるｗｗなどの声も頂きました。

実は、当初は3つにするとか、もっとオープンデータを使うだとか、かなり要望は膨らんでいましたｗ
なんとかコンパクトにして、あのボリュームでした^^;

どちらも一通りの流れを、順を追ってできた

段々機能を追加していき、完成度を高めていくようなサンプルが良かった、という声も。
当初は完成形だけ用意して、部分コピペで進めていこうかと思ったのですが、初心者が多そうだという事前情報から、前日に段階的にできるサンプルに作り替えました。進める側からも、これはやっておいて良かった。あの状況だと部分コピペで進めるのはかなり厳しかったでしょう。。。

コピペでもとりあえず手元で動かせた

なんとか全員環境を構築できたので、手元で動かせる環境が作れて良かったです。
とりあえずは演習資料をそのままコピーでも、動かせる環境が手に入った、というの大きかったのでは、と思います。これできたので、あとはサンプルをちょこちょこいじりながら自分で勉強することもできます。あと、エディタも今回初めて Sublime Text を使ってみたけど良かった、という方も。

反省・見直しが必要な点

環境構築はアナウンスとかやりかたをもっと考える必要あり

今回演習の中でそれぞれ環境準備を20〜30分ほど予定を入れていたのですが、全然足りませんでした。演習の中に、特に最初に入れてしまうと、全体の進行が止まってしまうため、あまりうまい方法ではなかったですね。

インストールできてない方は早めにきてセットアップしてもらうとか、出来ている人は演習を進められるような流れにすれば良かった、という反省があります。そうすれば、進められる人は自分でコードをカスタマイズしたりして理解をもっと深められたかなぁ、とも思いました。

また、事前インストールの件があまり告知しきれてなかった問題もあります。イベント告知や申込が色々と分散されたのも情報共有漏れが起きる原因の一端ですね。この辺りは運営側の事前準備不足でご迷惑をおかけしました。

全体的にやはり詰め込みすぎ

環境構築もさることながら、演習内容もかなり詰め込み過ぎた感はあります。特に後半は早すぎて理解が追いつかない、とか自分でコードを書く暇が無かった、ということに。もっと自由にコードを書いてもらう時間を作りたかったですね。。

2つ同時にやるというテーマ自体は評価されたのですが、ハンズオンとするとどこまで踏み込むか悩ましいところです。コピーしてなんとなく動いた、というだけじゃ面白くないですし、どこまで解説するか難しい。

Sencha Touchが難しい印象を与えてしまったかも。。

みんなに言われたのが、Sencha Touchが難しすぎる、と^^;;
これは私の伝え方が良くなかったです。すみません。。言い訳するとちょっと時間がなさ過ぎた。。。ま、参加者の半数くらいは聞いたことない、というので仕方ないところも。しかし、JavaScriptに馴染みが無い人に言われるのは仕方ないですが、JS書く人にも言われたのはややショック。Sencha Touchを簡単に教える方法教えてください・・・・

その他

・アンケート出し忘れた。。参加者の方には後日Webアンケートの案内をお送りします。
・後半、自分がだいぶ息切れして、ちょっとテンション落ちてしまってた^^;
・教室の温度がちょっと暑かったかな

総評

反省すべき点も多々ありますが、一応予定していた内容を全て時間内に終わらせ、参加者の皆さんにも開発環境とコードというお土産を渡せることができたので、まずは良かったんじゃないでしょうか。
私自身も大変勉強になりました。
参加者の皆様、スタッフの皆様、長時間お付き合いいただき、ありがとうございました！お疲れ様でした！

このカリキュラムをもうちょっと改善して、またリベンジしたいですね！ｗ

2013-07-13

jQuery Mobile & Sencha Touch ハンズオン資料まとめ

javascript jquery mobile sencha touch

いよいよ明日に迫ったAITC第2回勉強会「jQuery MobileとSencha TouchでWebアプリを作ってみよう！」

半日でどっちも触ってアプリ作るという無謀な企画です。なんとか資料作成間に合いました。
とりあえず Slideshare に上げたのですが、バラバラとなってしまったので、こちらでまとめます。

最初の資料

jQM & Sencha Touch ハンズオンはじめに from dsuke Takaoka

まずは jQuery Mobile概要から

5分でわかる jQuery Mobile from dsuke Takaoka

jQuery Mobileのハンズオン資料

jQuery Mobile ハンズオン資料 from dsuke Takaoka

続いて、Sencha Touch概要

5分でわかるSencha Touch from dsuke Takaoka

Sencha Touchハンズオン資料

Sencha Touch ハンズオン資料 from dsuke Takaoka

まとめ

jQM & Sencha Touch ハンズオンまとめ from dsuke Takaoka

なお、サンプルコードはこちら。Sencha Touch を含んでいるためGPLとなってます。

https://github.com/dsuket/aitc_handson2

全部合わせると、総ページ数 91枚とかなってた。。
どおりで終わらないわけだｗ

しかし、これどこまでできるのだろうか。。。
戦々恐々です。

2013-02-27

Sencha Touchパーフェクトガイドが出版されました！

sencha sencha touch

年末年始に書いていた本「HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド」が遂に出版されました！

共著で私は主に7章、8章あたりを担当させていただきました。メイン担当はありますが、もちろん他の部分もレビューし、全体的に参加しています。

Sencha Touch 2についての本は意外と少なく（日本語書籍では2冊目）、これだけのボリュームのある書籍は世界でも希です。（現時点では）まさにパーフェクトといえる内容だと自負しています。

特に3部の実践では、実務で役に立つ内容がてんこ盛り！実際に使った人が悩むポイントやはまり所などが詳しく解説されています。私も非常に勉強になりました^^;

しかし、まだまだ書き足りないと思うところがあるのも事実。。特に Ext のユーティリティメソッドに関してはほとんど触れられなかったのが少し残念です。（そのあたりは後述の Sencha Touch 2 Up and Running が詳しい。）また、テストやデバッグについてもあればよかったかも、とも思います。

とはいえ、最初の基本から応用、そして実践までの解説に関しては、今のところ本書が世界で最も詳しく書かれていると思います！

どのくらいボリューミーなのか、ということを他の書籍と客観的に評価してみましょう。

Sencha Touch 関連で出ている書籍で有名なのは大体以下の3つです。

id:nowokay こと、きしださんの日本で最初の Sencha Touch 2 の書籍！すごい表紙が一部で話題に！！

Sencha Forum のふざけたアイコン(ｗでもおなじみの Mitchell Simoens も書いている Sencha Touch 2のバイブル的存在。2への対応中で、3月末に正式出版されるらしい。現在プレビュー版を購入できる。（英語）

最近出たオライリーの Sencha Touch 2本。幅広く全体を薄く網羅している感じ。なぜかユーティリティメソッドの説明が充実（英語）

これらの名著たちと、本書のボリュームをページ数と、容積から比較してみます。

タイトル	ページ数	サイズ(cm)	容積(㎠)
Sencha Touch パーフェクトガイド	432	23.4 x 18.2 x 2.8	1192.464
Sencha Touchではじめるモバイルアプリ開発	255	20.8 x 14.8 x 2	615.68
Sencha Touch In Action	375	未定	未定
Sencha Touch 2 Up and Running	230	23.3 x 17.8 x 1.5	622.11

圧倒的ボリューム！！ページ数では2位の15％、3位の約70％増しで、容積にいたっては次点のなんと 90%増でおよそ約2倍！ページ数が~~膨らんだなぁ~~充実したなぁ、と思っていましたがここまで多かったとは。

ということで、この充実っぷり、是非一度お手にとってご確認いただければ幸いです。

充実の目次！

第1部 Sencha Touch の概要

第1章イントロダクション

1.1 ネイティブアプリケーションの終焉

1.2 はじめよう、Sencha Touch

1.3 本書の構成

1.4 ソースコードのダウンロード

第2章開発準備

2.1 開発準備

2.2 Sencha Cmd

2.3 Hello, World アプリケーション

第3章はじめての Sencha Touch

3.1 モデル

3.2 ビュー

3.3 コントローラ

第2部 Sencha Touch の基本構成

第4章クラスシステム

4.1 クラス定義

4.2 コンストラクタ

4.3 コンフィグ

4.4 インスタンス化

4.5 継承

4.6 オーバーライド

4.7 ミックスイン

4.8 シングルトン

4.9 静的メンバ

4.10 別名

4.11 依存性管理

4.12 めとめ

第5章コンポーネント

5.1 コンポーネント概要

5.2 配置

5.3 検索

5.4 生成・描画・破棄

5.5 まとめ

第6章イベントシステム

6.1 イベントシステム概要

6.2 イベントリスナ

6.3 リスナオプション

6.4 独自イベント

6.5 タッチイベント

6.6 まとめ

第7章データパッケージ

7.1 データパッケージ概要

7.2 モデル

7.3 ストア

7.4 プロキシ

7.5 まとめ

第8章リストとテンプレート

8.1 リスト

8.2 テンプレート

8.3 まとめ

第9章アプリケーション

9.1 アプリケーション

9.2 コントローラ

9.3 ルーティング

9.4 プロファイル

9.5 まとめ

第10章 Sencha Touch デザイン概論

10.1 環境の構築

10.2 Sass の基本文法

10.3 Compass について

10.4 Sencha Touch でのデザイン変更について

10.5 まとめ

第11章ネイティブパッケージング

11.1 パッケージング

11.2 ネイティブパッケージングの流れ

11.3 iOS アプリケーションの作成について

11.4 Android アプリケーションの作成

11.5 ネイティブ API

11.6 まとめ

第3部実践 Sencha Touch アプリケーション開発

第12章プロジェクト開始

12.1 開発するアプリケーション

第13章 CRUD

13.1 表示（Read）

13.2 作成（Create）

13.3 更新（Update）

13.4 削除（Delete）

13.5 ルーティングとヒストリー

13.6 URL の変更

第14章カスタムコンポーネント

14.1 カスタムコンポーネントとは

14.2 Sencha マーケット

14.3 カスタムコンポーネントの名前空間

14.4 ファイルパス

14.5 電卓コンポーネント

14.6 Dropbox プロキシ

第15章 Sencha Touch Charts

15.1 Sencah Touch Charts 概要

15.2 図形描画の基礎

15.3 グラフの基礎

15.4 家計簿アプリケーションへの組み込み

第16章アプリケーションの仕上げ

16.1 タブレット用画面の実装

16.2 アプリケーションのリリース

16.3 まとめ

著者紹介

付録A 標準コンポーネントひとめぐり

A.1 コンポーネント

A.2 コンテナ

A.3 リスト

A.4 フィールド

A.5 その他

長い。さすが400ページ超えだけあって、目次も長い。

そして、奇しくも今日は自分の誕生日。
書いた本がそんな日に出版されるなんて、最高の誕生日プレゼントになりました。
ありがとうございます！