JAWS-UG三都物語2013にて発表したときの資料です。AWSのS3を使ってSencha Touchアプリを動かしてみるという取り組みです。Sencha Touch的にはJSONP Proxyの使い方みたいな感じになってしまいました。

1. Sencha Touch
working with AWS
株式会社ゼノフィ 中村久司
13年3月9日土曜日

2. Sencha Touchとは
Sencha Touch 2 は、HTML5 を使用したモバイルアプリケ
ーション開発用の高性能フレームワークであり、 Sencha
HTML5 プラットフォームの土台となるものです。
13年3月9日土曜日

3. そもそもSenchaとは
カリフォルニア州レッドウッドにあるJavaScriptによるフレ
ームワーク／開発ツールを作っている会社
Sencha Ext JS / Sencha GXT / Sencha Touch
/ Sencha Architect / Sencha Animator /Sencha Desktop
Packager など
13年3月9日土曜日

4. Sencha Ext JS
YUIのエクステンションから始まったRIAフレームワーク
現在のバージョンは4.1
フルJavaScriptでRIAを構築できる
デスクトップ向け
13年3月9日土曜日

5. Sencha Touchの特徴
13年3月9日土曜日

6. 独自のクラスシステム
JavaScriptにクラスはない（プロトタイプ型のオブジェクト
指向）
そこにクラスの概念を持ち込む。
クラスを継承を利用して、既存コンポーネントから独自のコ
ンポーネントを簡単に作成できる。
13年3月9日土曜日

7. 動的ローディングシステム
1ファイル = 1クラスでクラス定義
requiresで依存関係指定。
Ext.Loaderが依存関係を解決ロードしてくれる。
Require.jsはいらない。
13年3月9日土曜日

8. クライアントサイドMVC
Ext.Loaderの機能を使い。クライアントサイドアプリケ
ーションでのMVCアーキテクチャーを実現。
Backborn.jsはいらない。
13年3月9日土曜日

9. データハンドリング
モデルとストアが担当する。
サーバー／クライアントから取得したデータを格納する。
ビューとバインドすれば自動更新。
複数のビューにバインドしていたら、それらすべてを更新。
13年3月9日土曜日

10. デバイスプロファイル
ユーザーが使うデバイスによって処理を切り替える。
スマホ？タブレット？
それぞれに最適な画面を設計。
共通部分のコードは共用。
13年3月9日土曜日

11. クロスブラウザ対応
Webkitだけでいいじゃん。
は、終わりました。Forefox Tizen Ubuntu....Windows8!
デスクトップブラウザでのJS開発と同じように、互換性地
獄が.....
Sencha Touchなら大丈夫。
13年3月9日土曜日

12. クロスブラウザ対応
Blackbellyは元々対応済み。
Windows8に対応を表明。
最新ベータ版でFirefoxに対応。
ひょっとしたら、TizenやUbuntuにも？
13年3月9日土曜日

13. ネイティブ対応
Sencha内部のIONというプロジェクトによって、Sencha
Touchで書いたプログラムをネイティブにパッケージングで
きます。
ネィティブ化にはSencha Cmdというツールを使います。
13年3月9日土曜日

14. では、本題へ
13年3月9日土曜日

15. AWSでの利用
Sencha TouchはWebアプリケーションなので、AWSと組み
合わせるのは簡単
EC2にデプロイすれば、どんなものでも動かせます。
今回は、S3で使ってみる。
13年3月9日土曜日

16. 今回はS3
S3にアップロードしたファイルは、そのままWebサイトと
して公開できる。
Route53を使うと独自ドメインでの公開も。
13年3月9日土曜日

17. S3は静的コンテンツのみ
サーバーサイドでスクリプトを動かせない。
では、他人のふんどしで相撲を取ります。
13年3月9日土曜日

18. JSONPの利用
JSONPを使ったサービスが沢山あります。
今回はその中からサントリーさんのAPIを利用します。
http://webapi.suntory.co.jp/barnavidocs/api.html
13年3月9日土曜日

19. アプリの仕様
サントリーのAPIに県番号／最寄り駅／予算などの条件を入
れて検索。
合致したバーがリスト表示。
リストを選択すると詳細表示。
地図ボタンで地図表示
13年3月9日土曜日

20. Form
条件を入力するフォーム
Ext.form.Panelクラス。
入力フィールドを追加できる。
多彩な入力フィールド
13年3月9日土曜日

21. ModelとProxy
Sencha Touchではデータを格納するレコードを
Ext.data.Modelクラスのインスタンスとして生成します。
その集合がExt.data.Storeです。
どこからデータを取ってくるのかを知っているのが
Ext.data.Proxyです。
13年3月9日土曜日

22. JSONP
ProxyにExt.data.proxy.JsonPを使う。
APIの仕様に合わせてコンフィグを書いてやる
loadメソッドでデータをロードすると目的のデータをストア
に格納してくれる
13年3月9日土曜日

23. List
Ext.dataview.Listコンポーネント
ストアの一覧を表示
ページングにも簡単に対応
13年3月9日土曜日

24. XTemplate
テンプレートを使ってデータを表示。
{name}のようにプレースホルダを指定
Sencha Touchの関数や独自関数も利用可能。
setDataメソッドでデータをセット
13年3月9日土曜日

25. テーマ
アプリケーションのテーマを変更可能
SASS/Compassを使っている
基準色($BaseColor)などの変数を変えるだけでも大きく変わ
る
13年3月9日土曜日

26. Map
標準でExt.Mapコンポーネント
がある。
必要なコンフィグをセットして
コールするだけ。
13年3月9日土曜日

27. S3にアップロード
出来上がったアプリをSencha CmdでミニファイしてS3にア
ップロードします。
（今回はちょっとした修正をしましたが）
静的データしか置けないところでもアプリとして機能してま
す（よね？）
13年3月9日土曜日

28. 今回のアプリ
ソース
https://github.com/sunvisor/bar
実際の動作（AWS S3上）
http://s3-ap-northeast-1.amazonaws.com/s3.sunvisor.net/
index.html
13年3月9日土曜日

29. 結論
HTML5は時期尚早なわけじゃない。
適したところに使えばそれで充分役に立つ。
Sencha Touchを使えば互換性への配慮が最小限で済む。
学習コストが高いと言われるが、JQuery Backborn.js
Requre.js and more.... を覚えるよりも...
13年3月9日土曜日

30. Sencha Touch 2実践開発ガイド
13年3月9日土曜日

31. Sencha UG
Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/
4月12日に大阪で勉強会を開催します。
13年3月9日土曜日