Tour of Sencha
Upcoming SlideShare
Loading in...5
×
 

Tour of Sencha

on

  • 439 views

Introduction of Sencha framework by Canon IT Solutions, Inc.

Introduction of Sencha framework by Canon IT Solutions, Inc.

Statistics

Views

Total Views
439
Views on SlideShare
432
Embed Views
7

Actions

Likes
1
Downloads
8
Comments
0

2 Embeds 7

http://s.deeeki.com 6
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tour of Sencha Tour of Sencha Presentation Transcript

  • © 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/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 エンタープライズシステム開発の 特徴  大規模開発  品質の管理  長期のメンテナンス  要員の育成 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 - ATablet-FriendlyResponsive
  • © 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 Sench a Touch Charts Sench a Eclipse Plugin Sencha Mobile Packaging Enterpris e Data Connecto rs Sench a Suppor t Packag e 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/forumdispl ay.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