Upload
sencha-
View
470
Download
1
Embed Size (px)
DESCRIPTION
Introduction of Sencha framework by Canon IT Solutions, Inc.
Citation preview
© Canon IT Solutions Inc. 2014
HTML5 App Development
Frameworks and Tools
Tour of Sencha
キヤノンITソリューションズ株式会社
CNB推進部
川野 忍
© Canon IT Solutions Inc. 2014
外部サイトのご利用について
- キヤノンITソリューションズ株式会社(以下キヤノンITソリューションズ)は、外部サイトに情報を掲載する際には万全を期していますが、それらの情報が正確であるか、完全であるか、最新であるか、またお客さまにとって有用であるかなどについて、一切保証致しません。
- キヤノンITソリューションズは、お客さまが外部サイトをご利用になったことにより生じたいかなる損害についても責任を負いません。
- キヤノンITソリューションズは、外部サイトで公開されている情報の変更、削除などは、原則としてお客さまへの予告なしに行います。また、止むを得ない事由により、外部サイトの公開を中断あるいは中止させていただくことがあります。
- キヤノンITソリューションズは、外部サイトの情報の変更、削除、公開の中断、中止により、お客さまに生じたいかなる損害についても責任を負いません。
著作権・商標などについて
- 外部サイトに掲載されているコンテンツ(文書、映像、音声、プログラムなど)は、各国の著作権法、知的財産権に関する法令で保護されています。
- これらのコンテンツの全部または一部を、権利者の許可なく複製、公開、送信、頒布、譲渡、翻案、転用などする事は、法令で禁止されています。
© Canon IT Solutions Inc. 2014
近年、エンタープライズ 領域の システム開発に 様々な変化 が生じています
クラウド・コンピューティング
スマートデバイスの業務利用
BYOD (Bring Your Own Device)
高いユーザビリティの要求
エンタープライズシステム の HTML5 化
© Canon IT Solutions Inc. 2014
HTML5 とは?
HTML の 5回目の改訂版
文書 + アプリケーション としての Web に
WebStorage、File API、Canvas、etc..
実用段階へ(今年後半、正式勧告予定)
© Canon IT Solutions Inc. 2014
多様化 するデバイス、プラットフォーム
デバイス デスクトップPC、スマートフォン、
タブレット、スマートTV・家電、
Google Glass、etc ..
プラットフォーム Windows、Mac OS X、Linux、
iOS、Android、BlackBerry、
Tizen、FireFox OS、etc ..
© Canon IT Solutions Inc. 2014
それに伴う 対応コストの増大…
メンテナンス 体制確立
技術・ツールの習得
要員の育成
配布の管理 アプリ承認
バッドノウハウ テスト
© Canon IT Solutions Inc. 2014
クロスプラットフォーム を実現する HTML5
開発者に優しい - ネイティブアプリよりも開発が簡単
-大規模で活発な開発者コミュニティ
利用者に優しい - インストール不要
- アップデート不要
必要十分なパフォーマンス - 一般的な要件であれば十分対応可能
- 日進月歩で改善されるウェブブラウザ
© Canon IT Solutions Inc. 2014
企業向けモバイルアプリの大半は HTML5 に!
Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid http://www.gartner.com/newsroom/id/2324917
© Canon IT Solutions Inc. 2014
開発者の願い
=> よいアプリケーション を作りたい!!
使い勝手のよい ものを作りたい
品質のよい ものを作りたい
効率よく 作りたい
© Canon IT Solutions Inc. 2014
スクラッチ(ゼロからの開発)ではなく、 ライブラリ(外部のソースコード)を利用する
© Canon IT Solutions Inc. 2014
HTML5 アプリケーションを作るための ライブラリは オープンソース のものがほとんど
© Canon IT Solutions Inc. 2014
オープンソースのライブラリ
ある目的に特化した単機能のソースコード
将来性
ドキュメント
© Canon IT Solutions Inc. 2014
オープンソースのライブラリ
ある目的に特化した単機能のソースコード
効果的に組み合わせるのは職人芸の世界
将来性
ドキュメント
© Canon IT Solutions Inc. 2014
オープンソースのライブラリ
ある目的に特化した単機能のソースコード
効果的に組み合わせるのは職人芸の世界
将来性
メンテナンスが放置されることもある
ドキュメント
© Canon IT Solutions Inc. 2014
オープンソースのライブラリ
ある目的に特化した単機能のソースコード
効果的に組み合わせるのは職人芸の世界
将来性
メンテナンスが放置されることもある
ドキュメント
ソースコードが仕様、ということも
© Canon IT Solutions Inc. 2014
生存期間の短いアプリなら、それでもよかった
期間限定サイト
趣味のアプリ
etc..
© Canon IT Solutions Inc. 2014
エンタープライズでは、それでは困る!
© Canon IT Solutions Inc. 2014
企業のシステム担当者の 責任
業務を改善する責任
トラブルを起こさない責任
長期のメンテナンスをする責任
しっかりと説明する責任
etc 責任、責任、責任…
© Canon IT Solutions Inc. 2014
エンタープライズシステム開発の 特徴
大規模開発
品質の管理
長期のメンテナンス
要員の育成
etc…
© Canon IT Solutions Inc. 2014
そこに、Sencha 製品の 存在理由 があります!
© Canon IT Solutions Inc. 2014
フルスタック(全部込み)の開発ツール
豊富な UI コンポーネント
クラスシステム
MVC アーキテクチャ
データパッケージ
ユーティリティ関数
依存性管理
チャート
テーマシステム
ビルドツール
IDE(統合開発環境)
etc…
© Canon IT Solutions Inc. 2014
開発ベンダーによる強力な サポート
API ドキュメント
チュートリアル
ビデオ
サンプルプログラム
フォーラム
トレーニング
コンサルティング
etc ..
© Canon IT Solutions Inc. 2014
メンテナンス や カスタマイズ しやすい設計
クラスベースのオブジェクト指向プログラミング
コンポーネントの継承
プラグイン機構
組み込み API の拡張
バリデーションの追加
独自テーマの作成
etc ..
© Canon IT Solutions Inc. 2014
長年、エンタープライズ領域で利用されてきた 実績!
© Canon IT Solutions Inc. 2014
これなら安心して、業務で利用できる!
© Canon IT Solutions Inc. 2014
お客様も Happy :)
とっても使いやすい HTML5 アプリを あっという間に作って くれて、ありがとう! 快適に操作できるから、仕事がとっても捗るわ! バグ??そんなの、 聞いたことないわよ。
© Canon IT Solutions Inc. 2014
※ Sencha は ライブラリ から フレームワーク へと成長
コンポーネントはコンフィグ(設定)で振る舞いを切り替える
パラメータを指定するだけで機能ができあがる
ルールに則ってプログラムを組み立てる
大人数で開発する場合にメンテナンスしやすい
慣れる程、開発効率があがる
© Canon IT Solutions Inc. 2014
Sencha フレームワークを利用することで
エンタープライズ での利用を想定した
高品質なHTML5アプリケーション を
低コストで効率的に開発できます!
Sencha 製品概要
© Canon IT Solutions Inc. 2014
“We're choosing Sencha as our name because it evokes next-generation software development and it's easy to remember, spell and pronounce.
Sencha -- the name of a popular Japanese green tea -- is in the tradition of Java, and represents a new level of development.”
Ext JS + jQTouch + Raphaël = Sencha
http://www.sencha.com/blog/ext-js-jqtouch-raphael-sencha/
© Canon IT Solutions Inc. 2014
Sencha, Inc.
米シリコンバレーに本社を構える開発ツールのメーカー
設立は 2007 年。世界で 200 万人以上の利用者がいる
従業員は約 150 名
© Canon IT Solutions Inc. 2014
Sencha, Inc.
2010年 Sequoia Capital などから、14M$を調達
2011年 Jafco Ventures などから、15M$を調達
© Canon IT Solutions Inc. 2014
yui-ext から Ext JS へ
Yahoo! が公開している Yahoo! User Interface Library (YUI) の
拡張プログラムとして、Jack Slocum 氏が開発したものが始まり。
当時の名称は、yui-ext(ワイユーアイ イーエックスティ)
YUI への依存をなくし、独立して動作するように。
ライブラリの名称を Ext JS(イーエックスティ ジェイエス)に変更
2007 年、Ext JS のライセンス販売を行う Ext .LLC を創業
商用版とオープンソース版の デュアルライセンス に変更
© Canon IT Solutions Inc. 2014
Ext JS から Sencha へ
2010 年、jQTouch の作者と Raphaël の作者が合流。
モバイルアプリ開発フレームワーク Sencha Touch をリリース
社名、ブランド名を Sencha に。VC から多額の資金調達。
2012 年、Sencha Architect をリリース
2013 年、キヤノン IT ソリューションズ株式会社と
プレミアムディストリビュータ契約 を締結
© Canon IT Solutions Inc. 2014
フォーチュン 100 社のうちの 50% 以上が利用
© Canon IT Solutions Inc. 2014
海外では高い評価。日本での普及はこれから
ガートナー社
「Visionary 賞」を2年連続(2011年、2012年)で受賞
インフォテック リサーチグループ
IBM や SAP と並び技術分野の市場で「Champion」と評価(2013年)
© Canon IT Solutions Inc. 2014
P. 42
Sencha Ext JS Sencha Touch
Sencha Architect
Sencha Animator
PC用 スマートデバイス用
開発ツール アニメーション作成ツール
Sencha 製品ラインナップ
© Canon IT Solutions Inc. 2014
Sencha Touch
Sencha Architect
Sencha Animator
P. 43
Sencha Ext JS
PC用
Sencha 製品ラインナップ
© Canon IT Solutions Inc. 2014
Sencha Ext JS
デスクトップPC向け
アプリケーション開発
フレームワーク
グリッドやチャートなど
業務アプリケーションの
開発に適したコンポーネント
幅広いブラウザ対応
IE6 から Chrome の最新版まで
© Canon IT Solutions Inc. 2014
Executive Dashboard - A Tablet-Friendly Responsive
© Canon IT Solutions Inc. 2014
Sencha Ext JS
Sencha Architect
Sencha Animator
P. 46
Sencha Touch
スマートデバイス用
Sencha 製品ラインナップ
© Canon IT Solutions Inc. 2014
Sencha Touch
スマートデバイス向けHTML5
アプリケーション開発
フレームワーク
ネイティブパッケージングにより
ネイティブ(ハイブリッド)
アプリとしても配布可能
© Canon IT Solutions Inc. 2014
Zofari - Brilliant local recommendations, super fast
© Canon IT Solutions Inc. 2014
Sencha Ext JS Sencha Touch
Sencha Animator
Sencha Architect
P. 49
開発ツール
Sencha 製品ラインナップ
© Canon IT Solutions Inc. 2014
Sencha Architect
Sencha フレームワークを
利用した ビジュアル
アプリケーションビルダー
コンポーネントを
ドラッグ&ドロップして、
プレビューで確認
アプリケーションを
効率的に開発
© Canon IT Solutions Inc. 2014
Sencha Ext JS Sencha Touch
Sencha Architect
P. 51
Sencha Animator
アニメーション作成ツール
Sencha 製品ラインナップ
© Canon IT Solutions Inc. 2014
Sencha Animator
CSS3のアニメーションを
開発するためのツール
Adobe の Flash を使わずに
Web のアニメーションを
作成できる
© Canon IT Solutions Inc. 2014
ライセンス
Sencha Architec
t
Sencha Touch
Sencha ExtJS
Sencha Gxt
Sencha Animato
r
Sencha
Touch Charts
Sencha
Eclipse Plugin
Sencha Mobile
Packaging
Enterprise
Data Connecto
rs
Sencha
Support
Package
Sencha Complete
○ ○ ○ - - ○ ○ ○ ○ ○
Sencha Touch Bundle ○ ○ - - - ○ ○ ○ - ○
Sencha ExtJS - - ○ - - - - - - -
Sencha GXT - - - ○ - - - - - -
Sencha Animator - - - - ○ - - - - -
© Canon IT Solutions Inc. 2014
ライセンス(キヤノンITソリューションズ付加サービス)
日本語 ドキュメント
日本語 E-Mail サポート
Sencha Complete ○ ○
Sencha Touch Bundle ○ ○
Sencha ExtJS ○ ○
Sencha GXT - ○
Sencha Animator ○ -
© Canon IT Solutions Inc. 2014
ライセンス価格
商品名 Pack 価格
Sencha Conplete
1 Developer Pack
5 Developer Pack
20 Developer Pack
Sencha Touch Bundle
1 Developer Pack
5 Developer Pack
20 Developer Pack
Sencha ExtJS
1 Developer Pack
5 Developer Pack
20 Developer Pack
Sencha Animator
1 Developer Pack
5 Developer Pack
20 Developer Pack
※ 開発者ライセンス
(開発者1:ライセンス1)
ランタイム毎のライセンスは不要
詳細はキヤノンITソリューションズに お問い合わせください。
http://www.canon-its.co.jp/tools/sencha/s_price.html
利用事例
© Canon IT Solutions Inc. 2014
モンテネグロの Hipotekarna 銀行
© Canon IT Solutions Inc. 2014
モンテネグロの Hipotekarna 銀行
ネットバンキングのアプリ
ネイティブアプリのように操作 できるが
実態は HTML5 アプリ。インストール不要
ひとつのプログラムで様々なデバイスで動く
© Canon IT Solutions Inc. 2014
米ユナイテッドヘリテージ生命保険
© Canon IT Solutions Inc. 2014
米ユナイテッドヘリテージ生命保険
外交員が利用する保険見積アプリ(基幹システム接続)
Sencha を利用することで 低コストで簡単に開発 できた
ネイティブアプリにパッケージング して配布
ひとつのプログラムで iPhone、Andriod に対応
© Canon IT Solutions Inc. 2014
ハードロックホテルの注文受付アプリ
© Canon IT Solutions Inc. 2014
北欧の写真加工 Web サービス
© Canon IT Solutions Inc. 2014
セールスフォース・ドットコム
開発準備
© Canon IT Solutions Inc. 2014
Sencha Ext JS
Sencha 公式サイトから Ext JS SDK をダウンロード
http://www.sencha.com/products/extjs/download/
展開し、任意のフォルダに配置します
Sencha 公式サイトから Sencha Cmd をダウンロード
http://www.sencha.com/products/sencha-cmd/download/
インストーラーを起動し、インストールします
© Canon IT Solutions Inc. 2014
Sencha Ext JS
Sencha Cmd を使ってアプリケーションの雛形を生成します
$ sencha –s extjs generate app MyApp myapp
Sencha Cmd を使って Web サーバーを起動します(※)
$ sencha fs web start
ブラウザから Web アプリケーションにアクセスします
(※)Sencha Cmd 以外の Web サーバー(Apache HTTP Server, IIS, etc)を
利用頂いても構いません。
© Canon IT Solutions Inc. 2014
Sencha Ext JS
JavaScript でインターフェイスを組み立てます
HTML タグは記述しません
© Canon IT Solutions Inc. 2014
Sencha Ext JS
クラスベース のオブジェクト指向プログラミングが可能です
クラスを定義し、そのクラスを 継承したクラスを定義し、利用
© Canon IT Solutions Inc. 2014
Sencha Ext JS
MVC パターン に則って、プログラムを構築します
モデル … アプリケーションのデータを管理 ビュー … データの表示とユーザー操作の受付 コントローラ … モデルとビューを制御
© Canon IT Solutions Inc. 2014
Sencha ドキュメンテーション
Sencha フレームワークには 充実したドキュメント が用意されています
http://docs.sencha.com/
© Canon IT Solutions Inc. 2014
Sencha ドキュメンテーション
Sencha フレームワークには 充実したドキュメント が用意されています
http://docs.sencha.com/
キヤノンITソリューションズからライセンスを ご購入頂いたお客様には
日本語版のドキュメントをご提供しています http://www.canon-its.co.jp/tools/sencha/s_price.html#pr02
© Canon IT Solutions Inc. 2014
Sencha Touch
Sencha 公式サイトから Sencha Touch SDK をダウンロード
http://www.sencha.com/products/touch/download/
展開し、任意のフォルダに配置します
Sencha 公式サイトから Sencha Cmd をダウンロード
http://www.sencha.com/products/sencha-cmd/download/
インストーラーを起動し、インストールします
© Canon IT Solutions Inc. 2014
Sencha Touch
Sencha Cmd を使ってアプリケーションの雛形を生成します
$ sencha –s touch generate app TouchApp touchapp
Sencha Cmd を使って Web サーバーを起動します(※)
$ sencha fs web start
ブラウザから Web アプリケーションにアクセスします
(※)Sencha Cmd 以外の Web サーバー(Apache HTTP Server, IIS, etc)を
利用頂いても構いません。
© Canon IT Solutions Inc. 2014
Sencha Touch
テーマ を変更する
scss ファイルの更新
Sencha Cmd を実行
$ sencha compass compile resources/sass/
© Canon IT Solutions Inc. 2014
Sencha Touch
ネイティブアプリ(ハイブリットアプリ)にパッケージングする
(Sencha ネイティブパッケージャーを利用)
設定ファイル(packager.json)の記述
Sencha Cmd を実行
$ sencha app build native
© Canon IT Solutions Inc. 2014
Sencha Touch
ネイティブアプリ(ハイブリットアプリ)にパッケージングする
(Cordova / PhoneGap を利用)
Sencha Cmd で Cordova の利用を有効化する
$ sencha cordova init [AppID]
設定ファイル(cordova.local.properties )の記述
Sencha Cmd を実行
$ sencha app build native
© Canon IT Solutions Inc. 2014
Sencha Touch
プロダクションビルド時には、モバイル環境で快適に表示できるよう
最適化が自動で行われます
Application Cache や Local Storage を利用
© Canon IT Solutions Inc. 2014
Sencha GXT
Sencha 公式サイトから Sencha GXT SDK をダウンロード
http://www.sencha.com/products/gxt/download/
展開し、任意のフォルダに配置します
Eclipse(or Intellij IDEA)のインストール
Eclipse
https://www.eclipse.org/
IntelliJ IDEA
http://www.jetbrains.com/idea/
© Canon IT Solutions Inc. 2014
Sencha GXT
GWT(Google Web Toolkit)プラグインのインストール
Chrome GWT developer plugin のインストール
GWT プロジェクトの作成
gxt-3.x.x.jar を外部ライブラリとして追加
GWT XML module の定義
© Canon IT Solutions Inc. 2014
Sencha GXT
© Canon IT Solutions Inc. 2014
Sencha Architect
Sencha Architect をダウンロード
http://www.sencha.com/products/architect/download
インストーラーを起動し、インストールします
© Canon IT Solutions Inc. 2014
Sencha Architect
ドラッグ&ドロップで コンポーネントを配置
コンポーネントの コンフィグを指定
© Canon IT Solutions Inc. 2014
Sencha Architect
対応するソースコードが生成されます
© Canon IT Solutions Inc. 2014
Sencha Animator
Sencha Animator をダウンロード
https://www.sencha.com/products/animator/download/
インストーラーを起動し、インストールします
© Canon IT Solutions Inc. 2014
Sencha Animator
Flash の作成と似たフローで CSS3 アニメーションを
作成できます
© Canon IT Solutions Inc. 2014
Sencha Animator
作成したアニメーションは Web ページとして出力します
デモンストレーション
© Canon IT Solutions Inc. 2014
付録: 学習リソース
Sencha Touch でつくる HTML5 モバイルアプリ(翔泳社)
http://books.shoeisha.co.jp/book/b157266.html
Sencha Touch パーフェクトガイド(アスキーメディアワークス)
http://ascii.asciimw.jp/books/books/detail/978-4-04-886956-0.shtml
Ext JS 実践開発ガイド(パレード)
http://www.amazon.co.jp/dp/4939061493
Ext JS in Action(Manning)※洋書
http://www.manning.com/garcia3/
© Canon IT Solutions Inc. 2014
付録: Japanese Sencha Forum
昨年12月にリニューアルしました
https://www.sencha.com/forum/forumdisplay.php?35-Japanese-Sencha-Forum
© Canon IT Solutions Inc. 2014
エンタープライズ 向け HTML5 アプリなら Sencha!
● Senchaは、Sencha Inc.の登録商標です。 ● Microsoft、Windows、Internet Explorerは、米国Microsoft Corporationの米国、日本およびその他の国における登録商標または商標です。 ● Mac は、米国およびその他の国で登録されているApple Inc.の商標です。その他記載された社名、製品名等は、それぞれ各社の登録商標または商標です。 ● Photo Credit http://www.flickr.com/photos/nirak/644335254, http://www.flickr.com/photos/smemon/7118761213, http://www.flickr.com/photos/technamyte/11024299844, https://www.flickr.com/photos/36363318, http://www.flickr.com/photos/kartooner/9520954, http://www.flickr.com/photos/trombone65/11731436463, http://www.flickr.com/photos/msittig/7268114390/, http://www.flickr.com/photos/74576085, http://www.flickr.com/photos/jstar/409405305, http://www.flickr.com/photos/jeffreyww/13726596053