Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha Touch working with AWS

3,096 views

Published on

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

  • Be the first to comment

Sencha Touch working with AWS

  1. 1. Sencha Touch working with AWS 株式会社ゼノフィ 中村久司13年3月9日土曜日
  2. 2. Sencha Touchとは Sencha Touch 2 は、HTML5 を使用したモバイルアプリケ ーション開発用の高性能フレームワークであり、 Sencha HTML5 プラットフォームの土台となるものです。13年3月9日土曜日
  3. 3. そもそもSenchaとは カリフォルニア州レッドウッドにあるJavaScriptによるフレ ームワーク/開発ツールを作っている会社 Sencha Ext JS / Sencha GXT / Sencha Touch / Sencha Architect / Sencha Animator /Sencha Desktop Packager など13年3月9日土曜日
  4. 4. Sencha Ext JS YUIのエクステンションから始まったRIAフレームワーク 現在のバージョンは4.1 フルJavaScriptでRIAを構築できる デスクトップ向け13年3月9日土曜日
  5. 5. Sencha Touchの特徴13年3月9日土曜日
  6. 6. 独自のクラスシステム JavaScriptにクラスはない(プロトタイプ型のオブジェクト 指向) そこにクラスの概念を持ち込む。 クラスを継承を利用して、既存コンポーネントから独自のコ ンポーネントを簡単に作成できる。13年3月9日土曜日
  7. 7. 動的ローディングシステム 1ファイル = 1クラスでクラス定義 requiresで依存関係指定。 Ext.Loaderが依存関係を解決ロードしてくれる。 Require.jsはいらない。13年3月9日土曜日
  8. 8. クライアントサイドMVC Ext.Loaderの機能を使い。クライアントサイドアプリケ ーションでのMVCアーキテクチャーを実現。 Backborn.jsはいらない。13年3月9日土曜日
  9. 9. データハンドリング モデルとストアが担当する。 サーバー/クライアントから取得したデータを格納する。 ビューとバインドすれば自動更新。 複数のビューにバインドしていたら、それらすべてを更新。13年3月9日土曜日
  10. 10. デバイスプロファイル ユーザーが使うデバイスによって処理を切り替える。 スマホ?タブレット? それぞれに最適な画面を設計。 共通部分のコードは共用。13年3月9日土曜日
  11. 11. クロスブラウザ対応 Webkitだけでいいじゃん。 は、終わりました。Forefox Tizen Ubuntu....Windows8! デスクトップブラウザでのJS開発と同じように、互換性地 獄が..... Sencha Touchなら大丈夫。13年3月9日土曜日
  12. 12. クロスブラウザ対応 Blackbellyは元々対応済み。 Windows8に対応を表明。 最新ベータ版でFirefoxに対応。 ひょっとしたら、TizenやUbuntuにも?13年3月9日土曜日
  13. 13. ネイティブ対応 Sencha内部のIONというプロジェクトによって、Sencha Touchで書いたプログラムをネイティブにパッケージングで きます。 ネィティブ化にはSencha Cmdというツールを使います。13年3月9日土曜日
  14. 14. では、本題へ13年3月9日土曜日
  15. 15. AWSでの利用 Sencha TouchはWebアプリケーションなので、AWSと組み 合わせるのは簡単 EC2にデプロイすれば、どんなものでも動かせます。 今回は、S3で使ってみる。13年3月9日土曜日
  16. 16. 今回はS3 S3にアップロードしたファイルは、そのままWebサイトと して公開できる。 Route53を使うと独自ドメインでの公開も。13年3月9日土曜日
  17. 17. S3は静的コンテンツのみ サーバーサイドでスクリプトを動かせない。 では、他人のふんどしで相撲を取ります。13年3月9日土曜日
  18. 18. JSONPの利用 JSONPを使ったサービスが沢山あります。 今回はその中からサントリーさんのAPIを利用します。 http://webapi.suntory.co.jp/barnavidocs/api.html13年3月9日土曜日
  19. 19. アプリの仕様 サントリーのAPIに県番号/最寄り駅/予算などの条件を入 れて検索。 合致したバーがリスト表示。 リストを選択すると詳細表示。 地図ボタンで地図表示13年3月9日土曜日
  20. 20. Form 条件を入力するフォーム Ext.form.Panelクラス。 入力フィールドを追加できる。 多彩な入力フィールド13年3月9日土曜日
  21. 21. ModelとProxy Sencha Touchではデータを格納するレコードを Ext.data.Modelクラスのインスタンスとして生成します。 その集合がExt.data.Storeです。 どこからデータを取ってくるのかを知っているのが Ext.data.Proxyです。13年3月9日土曜日
  22. 22. JSONP ProxyにExt.data.proxy.JsonPを使う。 APIの仕様に合わせてコンフィグを書いてやる loadメソッドでデータをロードすると目的のデータをストア に格納してくれる13年3月9日土曜日
  23. 23. List Ext.dataview.Listコンポーネント ストアの一覧を表示 ページングにも簡単に対応13年3月9日土曜日
  24. 24. XTemplate テンプレートを使ってデータを表示。 {name}のようにプレースホルダを指定 Sencha Touchの関数や独自関数も利用可能。 setDataメソッドでデータをセット13年3月9日土曜日
  25. 25. テーマ アプリケーションのテーマを変更可能 SASS/Compassを使っている 基準色($BaseColor)などの変数を変えるだけでも大きく変わ る13年3月9日土曜日
  26. 26. Map 標準でExt.Mapコンポーネント がある。 必要なコンフィグをセットして コールするだけ。13年3月9日土曜日
  27. 27. S3にアップロード 出来上がったアプリをSencha CmdでミニファイしてS3にア ップロードします。 (今回はちょっとした修正をしましたが) 静的データしか置けないところでもアプリとして機能してま す(よね?)13年3月9日土曜日
  28. 28. 今回のアプリ ソース https://github.com/sunvisor/bar 実際の動作(AWS S3上) http://s3-ap-northeast-1.amazonaws.com/s3.sunvisor.net/ index.html13年3月9日土曜日
  29. 29. 結論 HTML5は時期尚早なわけじゃない。 適したところに使えばそれで充分役に立つ。 Sencha Touchを使えば互換性への配慮が最小限で済む。 学習コストが高いと言われるが、JQuery Backborn.js Requre.js and more.... を覚えるよりも...13年3月9日土曜日
  30. 30. Sencha Touch 2実践開発ガイド13年3月9日土曜日
  31. 31. Sencha UG Japan Sencha User Group http://www.meetup.com/Japan-Sencha-User-Group/ 4月12日に大阪で勉強会を開催します。13年3月9日土曜日

×