Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sencha いろはの「い」
Search
Tanaka Yuuya
February 20, 2014
Technology
0
800
Sencha いろはの「い」
Sencha いろはの「い」で利用したスライドです
Tanaka Yuuya
February 20, 2014
Tweet
Share
More Decks by Tanaka Yuuya
See All by Tanaka Yuuya
第9回SenchaUG@札幌「Senchaが創造するRIA開発プラットフォームとサービス」
tnker
1
120
第9回SenchaUG@札幌「Sencha Learning Place No.2」
tnker
0
130
第9回SenchaUG@札幌「Siestaで中の人に頑張ってもらう」
tnker
0
97
第8回SenchaUG@東京
tnker
0
120
第3回SenchaUG@東京
tnker
0
130
第2回SenchaUG@東京
tnker
1
200
第1回SenchaUG@東京
tnker
0
400
Other Decks in Technology
See All in Technology
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
ECS モニタリング手法大整理
yendoooo
1
120
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
560
夢の印税生活 / Life on Royalties
tmtms
0
280
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
640
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
360
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
320
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
160
Claude Code x Androidアプリ 開発
kgmyshin
1
560
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
580
広島発!スタートアップ開発の裏側
tsankyo
0
230
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
120
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Code Reviewing Like a Champion
maltzj
525
40k
A designer walks into a library…
pauljervisheath
207
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Raft: Consensus for Rubyists
vanstee
140
7.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
Sencha いろはの「い」 ~はじめての Sencha Touch 編~ Sencha いろはの「い」
Sencha いろはの「い」 自己紹介
Sencha いろはの「い」 田中裕也(たなかゆうや) Sencha UG co-Organizer Senchaオフィシャルトレーナー Twitter:@tnker Website:http://tnker.com 自己紹介
Sencha いろはの「い」 Senchaって?
Sencha いろはの「い」 ちょっと話が逸れますが 現時点で、MVCというデザインパターンが取り入れられている JavaScriptフレームワークがどのくらいあるか知ってますか?
Sencha いろはの「い」 たくさんあります 他にもたくさん十種類以上!!
Sencha いろはの「い」 たくさんあります 他にもたくさん十種類以上!!
Sencha いろはの「い」 Senchaもこの中の1つ?
Sencha いろはの「い」 半分正解です!
Sencha いろはの「い」 Senchaとは? HTML5でWebアプリケーションを構築するために必要な フレームワーク そして、それらを利用して開発を行う際の手助けとなるツール フレームワークなどのサポートなどを行うサービス を提供している、Sencha社という会社であり Sencha ExtJS
や Sencha Touch は、Sencha製品の中の1つなのです。
Sencha いろはの「い」 Senchaとは? Sencha Ext JS Sencha Touch Sencha GXT
Sencha Architect Sencha Cmd Sencha Animator Support Training Sencha Space フレームワーク層 ツール層 サービス層
Sencha いろはの「い」 何がいいのか?
Sencha いろはの「い」 何がいいのか? 標準で数百種類という標準コンポーネ ントが用意されているため、作りた い物を素早く作ることが可能
Sencha いろはの「い」 何がいいのか? レゴブロックみたい!
Sencha いろはの「い」 Sencha ExtJS
Sencha いろはの「い」 Sencha ExtJS 全てのブラウザでリッチなアプリを作成するための JavaScriptフレームワーク
Sencha いろはの「い」 Sencha ExtJS 全てのブラウザでリッチなアプリを作成するための JavaScriptフレームワーク 豊富なUIコンポーネント 堅牢なクラスシステム クロスブラウザ対応 プラグインレスのチャート
MVCアプリケーション
Sencha いろはの「い」 Sencha Touch
Sencha いろはの「い」 Sencha Touch HTML5の機能をより便利に、異なるデバイスでの差違を柔軟に吸収し、 最大限のパフォーマンスを引き出してくれるJavaScriptフレームワーク
Sencha いろはの「い」 Sencha Touch HTML5の機能をより便利に、異なるデバイスでの差違を柔軟に吸収し、 最大限のパフォーマンスを引き出してくれるJavaScriptフレームワーク 複数のプラットフォームに対応す るハイパフォーマンスHTML5フレー ムワーク モバイルUIコンポーネントが利用
可能
Sencha いろはの「い」 Sencha Touch HTML5の機能をより便利に、異なるデバイスでの差違を柔軟に吸収し、 最大限のパフォーマンスを引き出してくれるJavaScriptフレームワーク 様々なプラットフォームへの対応 Cordovaと連携したネイティブパッ ケージング TouchGrid
タッチデバイス用に最適化された、 グリッドコンポーネント
Sencha いろはの「い」 Sencha GXT
Sencha いろはの「い」 Sencha GXT Google Web Toolkit (GWT) で作る Sencha
ExtJS
Sencha いろはの「い」 Sencha GXT Google Web Toolkit (GWT) で作る Sencha
ExtJS JavaのみでHTML5アプリ開発 PureJavaコードで記述されたExtJSフレームワーク Sencha ExtJS同等の豊富なコンポーネントUI 既存Javaシステム開発者のシームレスなHTML5開発への移行
Sencha いろはの「い」 普通のJSフレームワーク とちょっと違う
Sencha いろはの「い」 サポートがある
Sencha いろはの「い」 サポートがある SDKの潜在的なバグのサポート 技術サポート オフシャルトレーニング コンサルティング
Sencha いろはの「い」 CLIツール提供してる
Sencha いろはの「い」 Sencha Cmd Senchaから提供されているCLIツー ルであるSencha Cmdを利用する ことで スケルトンプロジェクト生成 アプリケーションの最適化等
が行えるようになります!
Sencha いろはの「い」 GUIツールまである
Sencha いろはの「い」 Sencha Architect Sencha Ext JS および Sencha Touch
に対応した、GUIツール 画面上からコンポーネントをドラッ グ&ドロップで配置していくことに より、アプリケーションを組み立て ていく また、テーマなどの見た目のカスタ マイズにも対応している
Sencha いろはの「い」 さらにはプラットフォー ムまで
Sencha いろはの「い」 Sencha Space 先日Sencha社から新たに公開された、 BYOD環境用のプラットフォーム Senchaフレームワークで実装したア プリケーションを効率的に各プラット フォームにデプロイするためのもの 現在対応しているストア
App Store - iOS Google Play - Android Black Berry App World
Sencha いろはの「い」 以上です
Sencha いろはの「い」 続いて、ハンズオンに入っ ていきます!
Sencha いろはの「い」 どうやってアプリができ るのか?
Sencha いろはの「い」 どうやってアプリができるのか? 既存のコンポーネントを使って組み立てる 自分で新しくコンポーネントを作る
Sencha いろはの「い」 どうやってアプリができるのか? 既存のコンポーネントを使って組み立てる 自分で新しくコンポーネントを作る
Sencha いろはの「い」 どうやってアプリができるのか? 既存のコンポーネントを使って組み立てる 自分で新しくコンポーネントを作る 既存のコンポーネントを組み合わせて、自分で新たなコ ンポーネント(画面)を作っていく
Sencha いろはの「い」 基本機能として用意され ている多彩な部品
Sencha いろはの「い」 多彩なコンポーネント 標準で用意されている数百種類の多彩なコンポー ネント群 これらのコンポーネントだけでも、かなりのバ リエーションのため、大抵のものは組み合わせ るだけで出来ちゃいます また、標準コンポーネントのカスタマイズもも ちろん出来ます。
Sencha いろはの「い」 コンポーネントを組み合 わせる
Sencha いろはの「い」 コンポーネントの組み合わせ ビューに始まり、ツールバーやボタ ンなどのコンポーネントは、もちろ ん用意されています。 画面を作成する場合は、それらのコ ンポーネントを右の図のように組み 合わせるだけです。 view
toolbar button List
Sencha いろはの「い」 何でも作れるの?
Sencha いろはの「い」 何でも作れるの? 比較的何でも作れる - 画面構成には要注意(情報量≒DOM量) List/Detail系はとても楽 エンタメ系コンテンツは苦手 - 作れないことはないけど、Canvas等を使
い始めるとSenchaの意味が無くなってくる
Sencha いろはの「い」 今回作るアプリ
Sencha いろはの「い」 今回作るアプリ ド定番のメモ帳です。 プロジェクトを作成するところから、デ プロイを行うところまで一通りやってい きます。 ※時間が余ったらローカルストレージ対 応やテーマ切り替えをちょこっとやって みたいと思ってます
Sencha いろはの「い」 プロジェクトを作る SDKPath - ダウンロードして解凍したSencha Touch SDKフォルダのパス AppName -
JavaScriptのコードを記述する際に、アプリケーションの名前と して設定される文字列 AppDirPath - Sencha Touchのプロジェクトを出力するフォルダ ※指定したフォルダがない場合は生成されます sencha -sdk [SDKPath] generate app [AppName] [AppDirPath]
Sencha いろはの「い」 Webサーバーを起動する portNumber - Webサーバーのポートを指定 (例:8080を指定した場合は、http://localhost:8080) mapDir - Webサーバーへアクセスした際に表示させるディレクトリ
(例:現在のディレクトリを指定する場合は「./」など) sencha web -port [portNumber] start -map [mapDir]
Sencha いろはの「い」 コンポーネントを置いてみる スケルトンプロジェクトの中の app/view/Main.js を編集して、中にコンポーネントを 置く練習をしてみましょう! Main.js items xtype:
toolbar xtype: button xtype: button xtype: panel
Sencha いろはの「い」 モデルとストア モデル - 1レコードのデータ ストア - 複数のレコード(モデル)をま とめて扱うための入れ物
Note Store Note Model Note Model Note Model Note Model Note Model id Field text Field update Field
Sencha いろはの「い」 ComponentQuery Ext.ComponentQuery.query - アプリケーション全体から query式で検索を行う downメソッド - 自身を起点に自身より下の階層
の検索を行う upメソッド - 自身を起点に自身より上の階 層の検索を行う xtype: form xtype: container xtype: toolbar xtype: button CSSセレクターのような形式でコン ポーネントの検索を行う機構 xtype: panel xtype: textfield