Download pdf - Tour of Sencha

© Canon IT Solutions Inc. 2014

HTML5 App Development

Frameworks and Tools

Tour of Sencha

キヤノンITソリューションズ株式会社

CNB推進部

川野忍


外部サイトのご利用について

- キヤノンITソリューションズ株式会社（以下キヤノンITソリューションズ）は、外部サイトに情報を掲載する際には万全を期していますが、それらの情報が正確であるか、完全であるか、最新であるか、またお客さまにとって有用であるかなどについて、一切保証致しません。

- キヤノンITソリューションズは、お客さまが外部サイトをご利用になったことにより生じたいかなる損害についても責任を負いません。

- キヤノンITソリューションズは、外部サイトで公開されている情報の変更、削除などは、原則としてお客さまへの予告なしに行います。また、止むを得ない事由により、外部サイトの公開を中断あるいは中止させていただくことがあります。

- キヤノンITソリューションズは、外部サイトの情報の変更、削除、公開の中断、中止により、お客さまに生じたいかなる損害についても責任を負いません。

著作権・商標などについて

- 外部サイトに掲載されているコンテンツ（文書、映像、音声、プログラムなど）は、各国の著作権法、知的財産権に関する法令で保護されています。

- これらのコンテンツの全部または一部を、権利者の許可なく複製、公開、送信、頒布、譲渡、翻案、転用などする事は、法令で禁止されています。


近年、エンタープライズ領域のシステム開発に様々な変化が生じています

クラウド・コンピューティング

スマートデバイスの業務利用

BYOD (Bring Your Own Device)

高いユーザビリティの要求

エンタープライズシステムの HTML5 化


HTML5 とは？

HTML の 5回目の改訂版

文書＋アプリケーションとしての Web に

WebStorage、File API、Canvas、etc..

実用段階へ（今年後半、正式勧告予定）


多様化するデバイス、プラットフォーム

デバイスデスクトップPC、スマートフォン、

タブレット、スマートTV・家電、

Google Glass、etc ..

プラットフォーム Windows、Mac OS X、Linux、

iOS、Android、BlackBerry、

Tizen、FireFox OS、etc ..


それに伴う対応コストの増大…

メンテナンス体制確立

技術・ツールの習得

要員の育成

配布の管理アプリ承認

バッドノウハウテスト


クロスプラットフォームを実現する HTML5

開発者に優しい - ネイティブアプリよりも開発が簡単

-大規模で活発な開発者コミュニティ

利用者に優しい - インストール不要

- アップデート不要

必要十分なパフォーマンス - 一般的な要件であれば十分対応可能

- 日進月歩で改善されるウェブブラウザ


企業向けモバイルアプリの大半は HTML5 に！

Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid http://www.gartner.com/newsroom/id/2324917


開発者の願い

=> よいアプリケーションを作りたい！！

使い勝手のよいものを作りたい

品質のよいものを作りたい

効率よく作りたい


スクラッチ（ゼロからの開発）ではなく、ライブラリ（外部のソースコード）を利用する


HTML5 アプリケーションを作るためのライブラリはオープンソースのものがほとんど


オープンソースのライブラリ

ある目的に特化した単機能のソースコード

将来性

ドキュメント




効果的に組み合わせるのは職人芸の世界

将来性

ドキュメント





将来性

メンテナンスが放置されることもある

ドキュメント





将来性

メンテナンスが放置されることもある

ドキュメント

ソースコードが仕様、ということも


生存期間の短いアプリなら、それでもよかった

期間限定サイト

趣味のアプリ

etc..


エンタープライズでは、それでは困る！


企業のシステム担当者の責任

業務を改善する責任

トラブルを起こさない責任

長期のメンテナンスをする責任

しっかりと説明する責任

etc 責任、責任、責任…


エンタープライズシステム開発の特徴

大規模開発

品質の管理

長期のメンテナンス

要員の育成

etc…


そこに、Sencha 製品の存在理由があります！


フルスタック（全部込み）の開発ツール

豊富な UI コンポーネント

クラスシステム

MVC アーキテクチャ

データパッケージ

ユーティリティ関数

依存性管理

チャート

テーマシステム

ビルドツール

IDE（統合開発環境）

etc…


開発ベンダーによる強力なサポート

API ドキュメント

チュートリアル

ビデオ

サンプルプログラム

フォーラム

トレーニング

コンサルティング

etc ..


メンテナンスやカスタマイズしやすい設計

クラスベースのオブジェクト指向プログラミング

コンポーネントの継承

プラグイン機構

組み込み API の拡張

バリデーションの追加

独自テーマの作成

etc ..


長年、エンタープライズ領域で利用されてきた実績！


これなら安心して、業務で利用できる！


お客様も Happy :)

とっても使いやすい HTML5 アプリをあっという間に作ってくれて、ありがとう！快適に操作できるから、仕事がとっても捗るわ！バグ？？そんなの、聞いたことないわよ。


※ Sencha はライブラリからフレームワークへと成長

コンポーネントはコンフィグ（設定）で振る舞いを切り替える

パラメータを指定するだけで機能ができあがる

ルールに則ってプログラムを組み立てる

大人数で開発する場合にメンテナンスしやすい

慣れる程、開発効率があがる


Sencha フレームワークを利用することで

エンタープライズでの利用を想定した

高品質なHTML5アプリケーションを

低コストで効率的に開発できます！

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/


Sencha, Inc.

米シリコンバレーに本社を構える開発ツールのメーカー

設立は 2007 年。世界で 200 万人以上の利用者がいる

従業員は約 150 名


Sencha, Inc.

2010年 Sequoia Capital などから、14M＄を調達

2011年 Jafco Ventures などから、15M＄を調達


yui-ext から Ext JS へ

Yahoo! が公開している Yahoo! User Interface Library (YUI) の

拡張プログラムとして、Jack Slocum 氏が開発したものが始まり。

当時の名称は、yui-ext（ワイユーアイイーエックスティ）

YUI への依存をなくし、独立して動作するように。

ライブラリの名称を Ext JS（イーエックスティジェイエス）に変更

2007 年、Ext JS のライセンス販売を行う Ext .LLC を創業

商用版とオープンソース版のデュアルライセンスに変更


Ext JS から Sencha へ

2010 年、jQTouch の作者と Raphaël の作者が合流。

モバイルアプリ開発フレームワーク Sencha Touch をリリース

社名、ブランド名を Sencha に。VC から多額の資金調達。

2012 年、Sencha Architect をリリース

2013 年、キヤノン IT ソリューションズ株式会社と

プレミアムディストリビュータ契約を締結


フォーチュン 100 社のうちの 50% 以上が利用


海外では高い評価。日本での普及はこれから

ガートナー社

「Visionary 賞」を2年連続（2011年、2012年）で受賞

インフォテックリサーチグループ

IBM や SAP と並び技術分野の市場で「Champion」と評価（2013年）


P. 42

Sencha Ext JS Sencha Touch

Sencha Architect

Sencha Animator

PC用スマートデバイス用

開発ツールアニメーション作成ツール

Sencha 製品ラインナップ


Sencha Touch

Sencha Architect

Sencha Animator

P. 43

Sencha Ext JS

PC用



Sencha Ext JS

デスクトップPC向け

アプリケーション開発

フレームワーク

グリッドやチャートなど

業務アプリケーションの

開発に適したコンポーネント

幅広いブラウザ対応

IE6 から Chrome の最新版まで


Executive Dashboard - A Tablet-Friendly Responsive


Sencha Ext JS

Sencha Architect

Sencha Animator

P. 46

Sencha Touch

スマートデバイス用



Sencha Touch

スマートデバイス向けHTML5

アプリケーション開発

フレームワーク

ネイティブパッケージングにより

ネイティブ（ハイブリッド）

アプリとしても配布可能


Zofari - Brilliant local recommendations, super fast



Sencha Animator

Sencha Architect

P. 49

開発ツール



Sencha Architect

Sencha フレームワークを

利用したビジュアル

アプリケーションビルダー

コンポーネントを

ドラッグ＆ドロップして、

プレビューで確認

アプリケーションを

効率的に開発



Sencha Architect

P. 51

Sencha Animator

アニメーション作成ツール



Sencha Animator

CSS３のアニメーションを

開発するためのツール

Adobe の Flash を使わずに

Web のアニメーションを

作成できる


ライセンス

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 －－－－ ○ －－－－－


ライセンス（キヤノンITソリューションズ付加サービス）

日本語ﾄﾞｷｭﾒﾝﾄ

日本語 E-Mail ｻﾎﾟｰﾄ

Sencha Complete ○ ○

Sencha Touch Bundle ○ ○

Sencha ExtJS ○ ○

Sencha GXT － ○

Sencha Animator ○ －


ライセンス価格

商品名Ｐａｃｋ価格

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

※ 開発者ライセンス

（開発者１：ライセンス１）

ランタイム毎のライセンスは不要

詳細はキヤノンITソリューションズにお問い合わせください。

http://www.canon-its.co.jp/tools/sencha/s_price.html




利用事例


モンテネグロの Hipotekarna 銀行


モンテネグロの Hipotekarna 銀行

ネットバンキングのアプリ

ネイティブアプリのように操作できるが

実態は HTML5 アプリ。インストール不要

ひとつのプログラムで様々なデバイスで動く


米ユナイテッドヘリテージ生命保険


米ユナイテッドヘリテージ生命保険

外交員が利用する保険見積アプリ（基幹システム接続）

Sencha を利用することで低コストで簡単に開発できた

ネイティブアプリにパッケージングして配布

ひとつのプログラムで iPhone、Andriod に対応


ハードロックホテルの注文受付アプリ


北欧の写真加工 Web サービス


セールスフォース・ドットコム

開発準備


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/

インストーラーを起動し、インストールします

http://www.sencha.com/products/extjs/download/





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）を

利用頂いても構いません。


Sencha Ext JS

JavaScript でインターフェイスを組み立てます

HTML タグは記述しません


Sencha Ext JS

クラスベースのオブジェクト指向プログラミングが可能です

クラスを定義し、そのクラスを継承したクラスを定義し、利用


Sencha Ext JS

MVC パターンに則って、プログラムを構築します

モデル … アプリケーションのデータを管理ビュー … データの表示とユーザー操作の受付コントローラ … モデルとビューを制御


Sencha ドキュメンテーション

Sencha フレームワークには充実したドキュメントが用意されています

http://docs.sencha.com/



Sencha ドキュメンテーション

Sencha フレームワークには充実したドキュメントが用意されています


キヤノンITソリューションズからライセンスをご購入頂いたお客様には

日本語版のドキュメントをご提供しています http://www.canon-its.co.jp/tools/sencha/s_price.html#pr02






Sencha Touch

Sencha 公式サイトから Sencha Touch SDK をダウンロード

http://www.sencha.com/products/touch/download/


Sencha 公式サイトから Sencha Cmd をダウンロード



http://www.sencha.com/products/touch/download/





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）を

利用頂いても構いません。


Sencha Touch

テーマを変更する

scss ファイルの更新

Sencha Cmd を実行

$ sencha compass compile resources/sass/


Sencha Touch

ネイティブアプリ（ハイブリットアプリ）にパッケージングする

（Sencha ネイティブパッケージャーを利用）

設定ファイル（packager.json）の記述


$ sencha app build native


Sencha Touch

ネイティブアプリ（ハイブリットアプリ）にパッケージングする

（Cordova / PhoneGap を利用）

Sencha Cmd で Cordova の利用を有効化する

$ sencha cordova init [AppID]

設定ファイル（cordova.local.properties ）の記述


$ sencha app build native


Sencha Touch

プロダクションビルド時には、モバイル環境で快適に表示できるよう

最適化が自動で行われます

Application Cache や Local Storage を利用


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/

http://www.sencha.com/products/gxt/download/

https://www.eclipse.org/

http://www.jetbrains.com/idea/


Sencha GXT

GWT（Google Web Toolkit）プラグインのインストール

Chrome GWT developer plugin のインストール

GWT プロジェクトの作成

gxt-3.x.x.jar を外部ライブラリとして追加

GWT XML module の定義


Sencha GXT


Sencha Architect

Sencha Architect をダウンロード

http://www.sencha.com/products/architect/download


http://www.sencha.com/products/architect/download


Sencha Architect

ドラッグ＆ドロップでコンポーネントを配置

コンポーネントのコンフィグを指定


Sencha Architect

対応するソースコードが生成されます


Sencha Animator

Sencha Animator をダウンロード

https://www.sencha.com/products/animator/download/


https://www.sencha.com/products/animator/download/


Sencha Animator

Flash の作成と似たフローで CSS3 アニメーションを

作成できます


Sencha Animator

作成したアニメーションは Web ページとして出力します

デモンストレーション


付録: 学習リソース

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/

http://books.shoeisha.co.jp/book/b157266.html










http://www.amazon.co.jp/dp/4939061493

http://www.manning.com/garcia3/


付録: Japanese Sencha Forum

昨年12月にリニューアルしました

https://www.sencha.com/forum/forumdisplay.php?35-Japanese-Sencha-Forum


エンタープライズ向け 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