Sencha いろはの「い」

Sencha いろはの「い」で利用したスライドです

Transcript

1. Sencha いろはの「い」 ~はじめての Sencha Touch 編~ Sencha いろはの「い」
2. Sencha いろはの「い」 自己紹介
3. Sencha いろはの「い」 田中裕也（たなかゆうや） Sencha UG co-Organizer Senchaオフィシャルトレーナー Twitter：@tnker Website：http://tnker.com 自己紹介
4. Sencha いろはの「い」 Senchaって？
5. Sencha いろはの「い」 ちょっと話が逸れますが 現時点で、MVCというデザインパターンが取り入れられている JavaScriptフレームワークがどのくらいあるか知ってますか？
6. Sencha いろはの「い」 たくさんあります 他にもたくさん十種類以上！！
7. Sencha いろはの「い」 たくさんあります 他にもたくさん十種類以上！！
8. Sencha いろはの「い」 Senchaもこの中の1つ？
9. Sencha いろはの「い」 半分正解です！
10. Sencha いろはの「い」 Senchaとは？ HTML5でWebアプリケーションを構築するために必要な
 フレームワーク
 そして、それらを利用して開発を行う際の手助けとなるツール
 フレームワークなどのサポートなどを行うサービス を提供している、Sencha社という会社であり Sencha ExtJS や Sencha Touch は、Sencha製品の中の1つなのです。
11. Sencha いろはの「い」 Senchaとは？ Sencha Ext JS Sencha Touch Sencha GXT Sencha Architect Sencha Cmd Sencha Animator Support Training Sencha Space フレームワーク層 ツール層 サービス層
12. Sencha いろはの「い」 何がいいのか？
13. Sencha いろはの「い」 何がいいのか？ 標準で数百種類という標準コンポーネ ントが用意されているため、作りた い物を素早く作ることが可能
14. Sencha いろはの「い」 何がいいのか？ レゴブロックみたい！
15. Sencha いろはの「い」 Sencha ExtJS
16. Sencha いろはの「い」 Sencha ExtJS 全てのブラウザでリッチなアプリを作成するための
 JavaScriptフレームワーク
17. Sencha いろはの「い」 Sencha ExtJS 全てのブラウザでリッチなアプリを作成するための
 JavaScriptフレームワーク 豊富なUIコンポーネント 堅牢なクラスシステム クロスブラウザ対応 プラグインレスのチャート MVCアプリケーション
18. Sencha いろはの「い」 Sencha Touch
19. Sencha いろはの「い」 Sencha Touch HTML5の機能をより便利に、異なるデバイスでの差違を柔軟に吸収し、 最大限のパフォーマンスを引き出してくれるJavaScriptフレームワーク
20. Sencha いろはの「い」 Sencha Touch HTML5の機能をより便利に、異なるデバイスでの差違を柔軟に吸収し、 最大限のパフォーマンスを引き出してくれるJavaScriptフレームワーク 複数のプラットフォームに対応す るハイパフォーマンスHTML5フレー ムワーク モバイルUIコンポーネントが利用 可能
21. Sencha いろはの「い」 Sencha Touch HTML5の機能をより便利に、異なるデバイスでの差違を柔軟に吸収し、 最大限のパフォーマンスを引き出してくれるJavaScriptフレームワーク 様々なプラットフォームへの対応 Cordovaと連携したネイティブパッ ケージング TouchGrid
 タッチデバイス用に最適化された、 グリッドコンポーネント
22. Sencha いろはの「い」 Sencha GXT
23. Sencha いろはの「い」 Sencha GXT Google Web Toolkit (GWT) で作る Sencha ExtJS
24. Sencha いろはの「い」 Sencha GXT Google Web Toolkit (GWT) で作る Sencha ExtJS JavaのみでHTML5アプリ開発
 PureJavaコードで記述されたExtJSフレームワーク Sencha ExtJS同等の豊富なコンポーネントUI
 既存Javaシステム開発者のシームレスなHTML5開発への移行
25. Sencha いろはの「い」 普通のJSフレームワーク とちょっと違う
26. Sencha いろはの「い」 サポートがある
27. Sencha いろはの「い」 サポートがある SDKの潜在的なバグのサポート 技術サポート オフシャルトレーニング コンサルティング
28. Sencha いろはの「い」 CLIツール提供してる
29. Sencha いろはの「い」 Sencha Cmd Senchaから提供されているCLIツー ルであるSencha Cmdを利用する ことで スケルトンプロジェクト生成 アプリケーションの最適化等 が行えるようになります！
30. Sencha いろはの「い」 GUIツールまである
31. Sencha いろはの「い」 Sencha Architect Sencha Ext JS および Sencha Touch に対応した、GUIツール 画面上からコンポーネントをドラッ グ＆ドロップで配置していくことに より、アプリケーションを組み立て ていく また、テーマなどの見た目のカスタ マイズにも対応している
32. Sencha いろはの「い」 さらにはプラットフォー ムまで
33. Sencha いろはの「い」 Sencha Space 先日Sencha社から新たに公開された、 BYOD環境用のプラットフォーム Senchaフレームワークで実装したア プリケーションを効率的に各プラット フォームにデプロイするためのもの 現在対応しているストア
 App Store - iOS
 Google Play - Android
 Black Berry App World
34. Sencha いろはの「い」 以上です
35. Sencha いろはの「い」 続いて、ハンズオンに入っ ていきます！
36. Sencha いろはの「い」 どうやってアプリができ るのか？
37. Sencha いろはの「い」 どうやってアプリができるのか？ 既存のコンポーネントを使って組み立てる 自分で新しくコンポーネントを作る
38. Sencha いろはの「い」 どうやってアプリができるのか？ 既存のコンポーネントを使って組み立てる 自分で新しくコンポーネントを作る
39. Sencha いろはの「い」 どうやってアプリができるのか？ 既存のコンポーネントを使って組み立てる 自分で新しくコンポーネントを作る 既存のコンポーネントを組み合わせて、自分で新たなコ ンポーネント（画面）を作っていく
40. Sencha いろはの「い」 基本機能として用意され ている多彩な部品
41. Sencha いろはの「い」 多彩なコンポーネント 標準で用意されている数百種類の多彩なコンポー ネント群 これらのコンポーネントだけでも、かなりのバ リエーションのため、大抵のものは組み合わせ るだけで出来ちゃいます また、標準コンポーネントのカスタマイズもも ちろん出来ます。
42. Sencha いろはの「い」 コンポーネントを組み合 わせる
43. Sencha いろはの「い」 コンポーネントの組み合わせ ビューに始まり、ツールバーやボタ ンなどのコンポーネントは、もちろ ん用意されています。 画面を作成する場合は、それらのコ ンポーネントを右の図のように組み 合わせるだけです。 view toolbar button List
44. Sencha いろはの「い」 何でも作れるの？
45. Sencha いろはの「い」 何でも作れるの？ 比較的何でも作れる
 - 画面構成には要注意（情報量≒DOM量） List/Detail系はとても楽 エンタメ系コンテンツは苦手
 - 作れないことはないけど、Canvas等を使 い始めるとSenchaの意味が無くなってくる
46. Sencha いろはの「い」 今回作るアプリ
47. Sencha いろはの「い」 今回作るアプリ ド定番のメモ帳です。 プロジェクトを作成するところから、デ プロイを行うところまで一通りやってい きます。 ※時間が余ったらローカルストレージ対 応やテーマ切り替えをちょこっとやって みたいと思ってます
48. Sencha いろはの「い」 プロジェクトを作る SDKPath
 - ダウンロードして解凍したSencha Touch SDKフォルダのパス AppName
 - JavaScriptのコードを記述する際に、アプリケーションの名前と して設定される文字列 AppDirPath
 - Sencha Touchのプロジェクトを出力するフォルダ
 ※指定したフォルダがない場合は生成されます sencha -sdk [SDKPath] generate app [AppName] [AppDirPath]
49. Sencha いろはの「い」 Webサーバーを起動する portNumber
 - Webサーバーのポートを指定
 （例：8080を指定した場合は、http://localhost:8080） mapDir
 - Webサーバーへアクセスした際に表示させるディレクトリ
 （例：現在のディレクトリを指定する場合は「./」など） sencha web -port [portNumber] start -map [mapDir]
50. Sencha いろはの「い」 コンポーネントを置いてみる スケルトンプロジェクトの中の app/view/Main.js を編集して、中にコンポーネントを 置く練習をしてみましょう！ Main.js
 items xtype: toolbar xtype: button xtype: button xtype: panel
51. Sencha いろはの「い」 モデルとストア モデル
 - 1レコードのデータ
 ストア
 - 複数のレコード（モデル）をま とめて扱うための入れ物 Note Store Note Model Note Model Note Model Note Model Note Model id Field text Field update Field
52. Sencha いろはの「い」 ComponentQuery Ext.ComponentQuery.query
 - アプリケーション全体から query式で検索を行う downメソッド
 - 自身を起点に自身より下の階層 の検索を行う upメソッド
 - 自身を起点に自身より上の階 層の検索を行う xtype: form xtype: container xtype: toolbar xtype: button CSSセレクターのような形式でコン ポーネントの検索を行う機構 xtype: panel xtype: textfield