Sencha Touch working with AWS

株式会社ゼノフィ 中村久司

13年3月9日土曜日

Sencha Touchとは

Sencha Touch 2 は、HTML5 を使用したモバイルアプリケーション開発用の高性能フレームワークであり、 Sencha

HTML5 プラットフォームの土台となるものです。

13年3月9日土曜日

そもそもSenchaとはカリフォルニア州レッドウッドにあるJavaScriptによるフレームワーク／開発ツールを作っている会社

Sencha Ext JS / Sencha GXT / Sencha Touch/ Sencha Architect / Sencha Animator /Sencha Desktop Packager など

13年3月9日土曜日

Sencha Ext JS

YUIのエクステンションから始まったRIAフレームワーク

現在のバージョンは4.1

フルJavaScriptでRIAを構築できる

デスクトップ向け

13年3月9日土曜日

Sencha Touchの特徴

13年3月9日土曜日

独自のクラスシステム

JavaScriptにクラスはない（プロトタイプ型のオブジェクト指向）

そこにクラスの概念を持ち込む。

クラスを継承を利用して、既存コンポーネントから独自のコンポーネントを簡単に作成できる。

13年3月9日土曜日

動的ローディングシステム

1ファイル = 1クラスでクラス定義

requiresで依存関係指定。

Ext.Loaderが依存関係を解決ロードしてくれる。

Require.jsはいらない。

13年3月9日土曜日

クライアントサイドMVC

Ext.Loaderの機能を使い。クライアントサイドアプリケ

ーションでのMVCアーキテクチャーを実現。

Backborn.jsはいらない。

13年3月9日土曜日

データハンドリング

モデルとストアが担当する。

サーバー／クライアントから取得したデータを格納する。

ビューとバインドすれば自動更新。

複数のビューにバインドしていたら、それらすべてを更新。

13年3月9日土曜日

デバイスプロファイル

ユーザーが使うデバイスによって処理を切り替える。

スマホ？タブレット？

それぞれに最適な画面を設計。

共通部分のコードは共用。

13年3月9日土曜日

クロスブラウザ対応

Webkitだけでいいじゃん。は、終わりました。Forefox Tizen Ubuntu....Windows8!

デスクトップブラウザでのJS開発と同じように、互換性地

獄が.....

Sencha Touchなら大丈夫。

13年3月9日土曜日

クロスブラウザ対応

Blackbellyは元々対応済み。

Windows8に対応を表明。

最新ベータ版でFirefoxに対応。

ひょっとしたら、TizenやUbuntuにも？

13年3月9日土曜日

ネイティブ対応

Sencha内部のIONというプロジェクトによって、Sencha

Touchで書いたプログラムをネイティブにパッケージングできます。

ネィティブ化にはSencha Cmdというツールを使います。

13年3月9日土曜日

では、本題へ

13年3月9日土曜日

AWSでの利用

Sencha TouchはWebアプリケーションなので、AWSと組み合わせるのは簡単

EC2にデプロイすれば、どんなものでも動かせます。

今回は、S3で使ってみる。

13年3月9日土曜日

今回はS3

S3にアップロードしたファイルは、そのままWebサイトとして公開できる。

Route53を使うと独自ドメインでの公開も。

13年3月9日土曜日

S3は静的コンテンツのみ

サーバーサイドでスクリプトを動かせない。

では、他人のふんどしで相撲を取ります。

13年3月9日土曜日

JSONPの利用

JSONPを使ったサービスが沢山あります。

今回はその中からサントリーさんのAPIを利用します。

http://webapi.suntory.co.jp/barnavidocs/api.html

13年3月9日土曜日

アプリの仕様

サントリーのAPIに県番号／最寄り駅／予算などの条件を入れて検索。

合致したバーがリスト表示。

リストを選択すると詳細表示。

地図ボタンで地図表示

13年3月9日土曜日

Form

条件を入力するフォーム

Ext.form.Panelクラス。

入力フィールドを追加できる。

多彩な入力フィールド

13年3月9日土曜日

ModelとProxy

Sencha Touchではデータを格納するレコードをExt.data.Modelクラスのインスタンスとして生成します。

その集合がExt.data.Storeです。

どこからデータを取ってくるのかを知っているのがExt.data.Proxyです。

13年3月9日土曜日

JSONP

ProxyにExt.data.proxy.JsonPを使う。

APIの仕様に合わせてコンフィグを書いてやる

loadメソッドでデータをロードすると目的のデータをストア

に格納してくれる

13年3月9日土曜日

List

Ext.dataview.Listコンポーネント

ストアの一覧を表示

ページングにも簡単に対応

13年3月9日土曜日

XTemplate

テンプレートを使ってデータを表示。

{name}のようにプレースホルダを指定

Sencha Touchの関数や独自関数も利用可能。

setDataメソッドでデータをセット

13年3月9日土曜日

テーマ

アプリケーションのテーマを変更可能

SASS/Compassを使っている

基準色($BaseColor)などの変数を変えるだけでも大きく変わ

る

13年3月9日土曜日

Map

標準でExt.Mapコンポーネントがある。

必要なコンフィグをセットして

コールするだけ。

13年3月9日土曜日

S3にアップロード

出来上がったアプリをSencha CmdでミニファイしてS3にアップロードします。

（今回はちょっとした修正をしましたが）

静的データしか置けないところでもアプリとして機能してます（よね？）

13年3月9日土曜日

今回のアプリ

ソース

https://github.com/sunvisor/bar

実際の動作（AWS S3上）

http://s3-ap-northeast-1.amazonaws.com/s3.sunvisor.net/index.html

13年3月9日土曜日

結論

HTML5は時期尚早なわけじゃない。

適したところに使えばそれで充分役に立つ。

Sencha Touchを使えば互換性への配慮が最小限で済む。

学習コストが高いと言われるが、JQuery Backborn.js

Requre.js and more.... を覚えるよりも...

13年3月9日土曜日

Sencha Touch 2実践開発ガイド

13年3月9日土曜日

Sencha UG

Japan Sencha User Grouphttp://www.meetup.com/Japan-Sencha-User-Group/

4月12日に大阪で勉強会を開催します。

13年3月9日土曜日