Tour of Sencha HTML5 App Development Frameworks and Tools キヤノンITソリューションズ株式会社 CNB推進部 川野 忍 © Canon IT Solutions Inc. 2014 エンタープライズ 領域の システム開発に 変化 が生じている © Canon IT Solutions Inc. 2014 クラウド・コンピューティング スマートデバイスの業務利用 BYOD (Bring Your Own Device) 高いユーザビリティの要求 Windows XP のサポート終了 © Canon IT Solutions Inc. 2014 エンタープライズシステム の HTML5 化 HTML5 とは？ HTML の 5回目の改訂版 ページ から アプリケーション としての Web に 実用段階へ（今年、正式勧告予定） © 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/newsro om/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 そこに、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 アプリケーションを 低コスト で開発できます！ © Canon IT Solutions Inc. 2014 Agenda Sencha 製品概要 利用事例 開発準備 デモンストレーション © Canon IT Solutions Inc. 2014 Sencha 製品概要 “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, Inc. に。ベンチャーキャピタルから資金調達。 モバイルアプリ開発フレームワーク Sencha Touch をリリース 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 製品ラインナップ PC用 スマートデバイス用 Sencha Ext JS Sencha Touch Sencha Architect 開発ツール アニメーション作成ツール Sencha Animator © Canon IT Solutions Inc. 2014 P. 43 Sencha 製品ラインナップ PC用 Sencha Ext JS Sencha Touch Sencha Architect Sencha Animator © Canon IT Solutions Inc. 2014 Sencha Ext JS デスクトップPC向け アプリケーション開発 フレームワーク グリッドやチャートなど 業務アプリケーションの 開発に適したコンポーネント 幅広いブラウザ対応 IE6 から Chrome の最新版まで © Canon IT Solutions Inc. 2014 P. 45 Sencha 製品ラインナップ スマートデバイス用 Sencha Ext JS Sencha Touch Sencha Architect Sencha Animator © Canon IT Solutions Inc. 2014 Sencha Touch スマートデバイス向けHTML5 アプリケーション開発 フレームワーク ネイティブパッケージングにより ネイティブアプリとしても配布可能 © Canon IT Solutions Inc. 2014 P. 47 Sencha 製品ラインナップ PC用 Sencha GXT Sencha Touch Sencha Architect Sencha Animator © Canon IT Solutions Inc. 2014 Sencha GXT Java で Web フロントエンドを 開発するためのフレームワーク Google が開発・公開している Google Web Toolkit がベース Java の開発ツールや経験が 利用できる （JavaScript を書かなくてもよい） © Canon IT Solutions Inc. 2014 P. 49 Sencha 製品ラインナップ Sencha Ext JS Sencha Touch Sencha Architect 開発ツール Sencha Animator © Canon IT Solutions Inc. 2014 Sencha Architect Sencha フレームワークを 利用したビジュアル アプリケーションビルダー コンポーネントを ドラッグ＆ドロップして、 プレビューで確認 アプリケーションを 効率的に開発 © Canon IT Solutions Inc. 2014 P. 51 Sencha 製品ラインナップ Sencha Ext JS Sencha Touch Sencha Architect アニメーション作成ツール Sencha Animator © Canon IT Solutions Inc. 2014 Sencha Animator CSS３のアニメーションを 開発するためのツール Adobe の Flash を使わずに Web のアニメーションを 作成できる © Canon IT Solutions Inc. 2014 Sencha シリーズで一貫した開発を デスクトップとスマートデバイスで多くのコードを共通化 異なるのは、MVC の View の部分 Sencha Ext JS Sencha Touch MVC は、プログラムを モデル、ビュー、コントローラの 役割毎に分割する設計パターン Sencha Data Package Server © Canon IT Solutions Inc. 2014 ライセンス Sench a Suppor t Packag e Sencha Architec t Sencha Touch Sencha ExtJS Sencha Gxt Sencha Animato r Sench a Touch Charts Sench a Eclipse Plugin Sencha Mobile Packaging Enterpris e Data Connecto rs ○ ○ ○ － － ○ ○ ○ ○ ○ Sencha Touch Bundle ○ ○ － － － ○ ○ ○ － ○ Sencha ExtJS － － ○ － － － － － － － － － － ○ － － － － － － － － － － ○ － － － － － Sencha Complete Sencha GXT Sencha Animator © Canon IT Solutions Inc. 2014 ライセンス（キヤノンITソリューションズ付加サービス） Sencha Complete Sencha Touch Bundle Sencha ExtJS 日本語 ﾄﾞｷｭﾒﾝﾄ 日本語 E-Mail ｻﾎﾟｰﾄ ○ ○ ○ ○ ○ ○ － ○ ○ － Sencha GXT Sencha Animator © Canon IT Solutions Inc. 2014 ライセンス価格 商品名 Ｐａｃｋ 価格 1 Developer Pack Sencha Conplete 5 Developer Pack 20 Developer Pack 1 Developer Pack Sencha Touch Bundle Sencha ExtJS 5 Developer Pack 詳細はキヤノンITソリューションズに 20 Developer Pack 1 Developerお問い合わせください。 Pack http://www.canon-its.co.jp/tools/sencha/s_price.html 5 Developer Pack 20 Developer Pack 1 Developer Pack Sencha Animator 5 Developer Pack 20 Developer Pack ※ 開発者ライセンス （開発者１：ライセンス１） © 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 米スマイルブランズ 歯科医向け業務管理プラットフォーム Ext JS を利用することで 美しいインターフェイスを実現 MVC アーキテクチャ により 効率的に サーバーサイドプログラムとの連携部分を開発 できた © Canon IT Solutions Inc. 2014 米 ADP の営業支援システム © Canon IT Solutions Inc. 2014 イスラエルの Office 365 クライアント © 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/forumdispl ay.php?35-Japanese-Sencha-Forum © Canon IT Solutions Inc. 2014 Sencha フレームワークを、ぜひご利用下さい！ © Canon IT Solutions Inc. 2014 ● ● ● ● 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, http://www.flickr.com/photos/cannedtuna/8573329797, http://www.flickr.com/photos/kartooner/9520954, http://www.flickr.com/photos/create_joy/4291306755, http://www.flickr.com/photos/msittig/7268114390/, http://www.flickr.com/photos/benmillett/306074038, http://www.flickr.com/photos/jstar/409405305
© Copyright 2025 ExpyDoc
