「Enterprise x HTML5 Conference 2014 - エンタープライズIT向けWeb標準技術のソリューション展」にて使用したスライドです。 http://conference.html5biz.org/2014spring/ ※ 一部企業ロゴなどは、削除しています。

1. HTML5を活用した効果の高いリッチアプリ開発体制構築と
コンサルティングの実現方法
Enterprise x HTML5 Conference 2014 - エンタープライズIT向けWeb標準技術のソリューション展
小堤 一弘
株式会社ゼノフィ
Xenophy.CO.,LTD

2. 自己紹介
こつつみ かずひろ
小堤 一弘
株式会社ゼノフィ 代表取締役
Sencha 公式トレーニング認定トレーナー
Japan Sencha User Group 主宰
html5jエンタープライズ部
!
Twitter
@kotsutsumi
!
Facebook
https://www.facebook.com/kotsutsumi
Books
Ext JS Data-Driven Application Design
Sencha Ext JS 4 実践開発ガイド
Sencha Ext JS 4 実践開発ガイド 2
Sencha Touch 2 実践開発ガイド (監修)

3. HTML5アプリケーションや、SPA(Single Page
Application)の開発において発生している問題点

4. 既に、様々な開発者が取り組んでいる中での、
多様な問題があります。

5. 今日は、そんな中からいくつかの問題点をピックアップ
します。

6. HTML5アプリケーションや、SPAの開発で起きている問題点
JavaScriptの言語としての知識レベルの差異
可読性・再利用性の高いコードの記述と共有が困難
エンジニアに依存しやすいコード

7. HTML5アプリケーションや、SPAの開発で起きている問題点
設計段階のビジュアル化されるまでの工数
ユニットテスト/UIテストの難しさ
非同期通信インタフェースの煩雑化とエラー処理

8. まだまだ、いろいろな問題があるかもしれませんが、
今日は、これらの問題をSenchaプラットフォームを利
用してどのように解決できるか？
について、お話させて頂きます。

9. Senchaとは？

10. Senchaの会社情報
http://www.sencha.com/company
build amazing apps for every device
Sencha社は、開発者がHTML5とJavaScriptを利用して、素晴らしいウェブアプリケーショ
ンを構築するために、フレームワーク、ツール、サービスを提供している会社です。
設立
成長
世界中に
150
2007
以上の社員
2009 2011 2013

11. 世界のSencha開発者たち
ユーザーコミュニティの急増
世界的な存在感
25% N America
26% Europe
22% BRIC
27% ROW
2009
世界中に200万人の開発者
2010
2011
2012
50万人フォーラムのメンバー

12. HTML5マルチデバイス開発環境の提供
複数のプラットフォーム開発環境の提供
高品質なユーザーエクスペリエンスの提供
開発者の生産力向上
モバイル、タブレット、デスクトップへの対応

13. Sencha製品とサービス

14. Sencha製品とサービス

15. Sencha製品とサービス
設計
開発
デプロイ

16. Sencha製品とサービス
設計
開発
Sencha Ext JS
Sencha Architect
Sencha Touch
デプロイ

17. Sencha製品とサービス
設計
開発
デプロイ
Sencha Ext JS
Sencha Architect
トレーニング
Sencha Touch
プロフェッショナルサービス
技術的サポート

18. Sencha製品とサービス
設計
開発
デプロイ
Sencha Ext JS
Sencha Architect
トレーニング
Sencha Touch
プロフェッショナルサービス
技術的サポート

19. フレームワーク製品

20. フレームワーク製品
Sencha Ext JS
全てのブラウザでリッチなアプリを作成するためのJavaScriptフレームワーク
Sencha Touch
モバイルJavaScriptフレームワーク
Sencha GXT
Google Web Toolkit用のアプリケーションフレームワーク

21. Sencha Ext JS
全てのブラウザでリッチなアプリを作成するための
JavaScriptフレームワーク
豊富なUIコンポーネント
堅牢なクラスシステム
多種ブラウザの互換性
プラグインレスのチャート
MVCアプリケーション

22. Sencha Ext JS
全てのブラウザでリッチなアプリを作成するための
JavaScriptフレームワーク
新しい機能 / 改善
タブレット対応
タッチイベントシステム & モーメンタルスクロール (対応されたデバイス上)
タッチイベントにマップされたマウスのイベント
グリッドガジェット
グリッドセル内のリッチ & インタラクティブなコンポーネント
チャートのパッケージアップグレード
WAI-ARIA / 508 サポートの改善

23. Sencha Touch
ハイパフォーマンス
モバイルHTML5フレームワーク
HTML5の機能をより便利に、そして異なるデバイスでの差異を柔軟に吸収し、
パフォーマンスを最大限に引き出すJavaScriptのノウハウを提供します。
複数のプラットフォームアプリケーションに対応する
ハイパフォーマンスモバイルHTML5フレームワーク
モバイルUIコンポーネントが使用可能

24. Sencha Touch
ハイパフォーマンス
モバイルHTML5フレームワーク
様々なプラットフォームで動作するアプリケーションを開発する事が可能です。
Android / iOS / BlackBerry / Windows Phone / Tizen
Cordova / PhoneGapを通してネイティブパッケージングが行える
TouchGrid
タッチデバイス用に作成されたスムーズスクロールや
切り替え付きの早いグリッドコンポーネントを提供

25. Sencha GXT
Google Web Toolkit (GWT)で作るSencha Ext JS
JavaのみでHTML5アプリ開発
PureJavaコード記述されたExt JSフレームワーク
Sencha Ext JS同等の豊富なコンポーネントUI
既存Javaシステム開発者のシームレスなHTML5開
発への移行

26. 開発ツール

27. 開発ツール
Sencha Architect
HTML5 ビジュアルアプリケーション開発環境
Sencha Animator
CSS3 アニメーションオーサリングツール
Sencha Cmd
複数プラットフォームのコマンドラインツール

28. Sencha Architect
HTML5 ビジュアルアプリケーション開発環境
Sencha Ext JS / Sencha Touch向けアプリケーション開発ツール
ビジュアル開発
コード編集
モバイルネイティブパッケージング
生成されるコードは、Sencha社が推奨するベストプラクティスコード
ですので、ノウハウの宝庫です。

29. Sencha Architect
HTML5 ビジュアルアプリケーション開発環境
Sencha Ext JS / Sencha Touch向けアプリケーション開発ツール
開発を加速するテンプレートからの開発スタート
ユーザーエクステンションを取り込める高い再利用性
SASSによるスタイル/テーマの操作が可能、次のOSのテーマがあります。
Android / iOS / Windows / Blackberry / Tizen
コード補完とコードインテリジェンス
Sencha Cmdやフレームワークとの統合

30. Sencha Animator
CSS3 アニメーションオーサリングツール
HTML5・CSS3化が進み、モバイル広告や、ゲームアプ
リケーション内のアニメーション利用などでよりCSS3
アニメーションの需要が高まりつつある中、手作業でコー
ドを書くより効率的にアニメーションを作成することが
できます。

31. Sencha Cmd
複数プラットフォームのコマンドラインツール
新しいプロジェクトを生成すること可能
レガシーブラウザのためにテーマをスライスする
Sencha ExtJSのみ対応
Apache Antを利用してビルドルールに
従ったビルドを行うことが可能
ネイティブアプリとしてストアにデプロイすることが可能
Apache Cordova
PhoneGap

32. BYOD
BYOD (Bring your own device、ビーワィオーディ)
は、従業員が個人保有の携帯用機器を職場に持ち込み、
それを業務に使用することを示す。
ウィキペディアから
http://ja.wikipedia.org/wiki/BYOD

33. Sencha Space
様々なモバイルデバイスで動作する
ビジネスアプリケーション用の管理・保護された環境
対応するストア
App Store (iOS)
Google play (Android)
BlackBerry App World
管理プラットフォーム

34. Sencha Space
様々なモバイルデバイスで動作する
ビジネスアプリケーション用の管理・保護された環境
Invoke API
Space内のアプリケーションが
相互に対話することを可能とします
データ保護
デバイスには、暗語化されたデータ
を保管する

35. Senchaオフィシャルトレーニング
基礎知識やセオリーで躓かない、確かな技術者育成
株式会社ゼノフィのトレーニングは、米Sencha社のオフィシャルトレー
ナーとして認定された、高度な専門スキルを持つトレーナーが実施いた
します。Sencha Ext JS、Sencha Touchフレームワークの基礎と設計
思想の理解、Sencha Architectを使ったビジュアル開発まで、必要な
知識とセオリーをご提供します。

36. サポート
迅速に開発を進めるためのサポートサブスクリプション
メジャーバージョンへのアップグレードが無料
チケット形式の質疑応答が利用可能
プレミアムフォーラムへ書込が可能
サポートのみのバージョンを取得可能

37. Senchaを利用したHTML5開発体制

38. HTML5(SPA)の開発を行う時の問題点
JavaScriptの言語としての知識レベルの差異

39. Senchaで解決する問題点たち
JavaScriptの言語としての知識レベルの差異
Sencha オフィシャルトレーニング

40. Sencha オフィシャルトレーニング
Fast Track to Ext JS 4.2 Training
+ Sencha Architect
Fast Track to Sencha Touch
+ Advanced Architect Training
トレーニングタイトルは、本日現在のもので変更されることがあります。

41. Senchaで解決する問題点たち
可読性・再利用性の高いコードの記述と共有が困難
コンポーネント指向開発

42. コンポーネント指向開発
複雑なアプリーションを構築していくときに、
DOMのことを気にしながら構築していきますか？
DIVタグ
DIVタグ
DIVタグ
複数のタグを１つのユーザーインタフェー
スとして扱うことになる。

43. コンポーネント指向開発
複雑なアプリーションを構築していくときに、
DOMのことを気にしながら構築していきますか？
DIVタグ
DIVタグ
DIVタグ
しかし、プログラミングするときの
UI操作単位は、DOMとDOM APIによる
制御となるため、UI操作か？DOM操作か？
が混ざってしまう。
DIVタグ

44. コンポーネント指向開発
Senchaのコンポーネント指向開発では、１つ以上のタグ
をコンポーネントという単位で取り扱うことができます。
１つ以上のタグで構成された
ボタンコンポーネントを別なコンテナー
にレイアウトしていくことができます。

45. コンポーネント指向開発
開発をスタートしたその時から、豊富なUIコンポーネント
を利用することが可能です。

46. Senchaで解決する問題点たち
エンジニアに依存しやすいコード
Sencha クラスシステム

47. Sencha クラスシステム
純粋なJavaScirptで構築された独自のクラスシステムを提供
コンパイルしてJavaScriptを生成するような作業はありません。
クラスの作成・継承
mixinによる多重継承
動的ローディングへの対応
デプロイ時用の利用クラス判別

48. Sencha クラスシステム
動的ローディングとビルドシステムがスタンバイ
開発時は、動的ローディング、最終的には利用しているファイルのみのコードを利用
Release Ver
Development Ver
app.js
Application.js
app.js
Panel.js
利用しているクラスファ
イルたちをクラスファイ
ルの定義から判定して動
的に読み込む
Window.js
クラス定義から、フレームワーク内で利
用しているクラスファイルのみを抽出して、
１つにまとめることができます。
Sencha Cmdが解析・ビルドを行います。

49. Senchaで解決する問題点たち
設計段階のビジュアル化されるまでの工数
Sencha Architectを利用したビジュアル設計

50. Sencha Architectを利用したビジュアル設計
非プログラマも利用できる設計者が利用するツール
プログラマ・SE以外の設計者・ディレクターなどが画面設計を行えるプロフェッショナルツール
Sencha Architect
プログラマー・SE
ビジュアル的な設計と生成されたコードを利用
して、効率的にアプリケーション開発を進める。

51. Sencha Architectを利用したビジュアル設計
非プログラマも利用できる設計者が利用するツール
プログラマ・SE以外の設計者・ディレクターなどが画面設計を行えるプロフェッショナルツール
Sencha Architect
設計者・ディレクター
ビジュアル画面の設計に集中し、生成されたコー
ドをプログラマー・SEと連携して円滑なプロ
ジェクト進行を実現
プログラマー・SE

52. Sencha テーマシステム
コンポーネントビジュアルをSassで自由自在に変更するた
めの効率的なテーマシステムを提供
Sassでコンパイルする高機能テーマシステム。
カラー変数を変更するだけで全体の調整を自動計算！
またSassの操作はSencha Architectからも可能。

53. Senchaで解決する問題点たち
ユニットテスト/UIテストの難しさ
Bryntum Siestaを利用したUIユニットテスト

54. Bryntum Siestaを利用したUIユニットテスト
各クラスメソッドのユニットテストは、もちろん。
Sencha Ext JS、Sencha Touchのコンポーネントに
対するUIテストの自動化までを実現します。
また、jQueryやprototype、nodejsのユニットテスト
にも対応する、ユニットテストツールです。
!
Lite版は、無料で利用することができます。

55. Senchaで解決する問題点たち
非同期通信インタフェースの煩雑化とエラー処理
Ext Direct

56. Ext Direct
あらゆる箇所から通信を行う仕組みをスッキリ改善
サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする
getSales.php
getCompanyData.php
getGrid.php

57. Ext Direct
あらゆる箇所から通信を行う仕組みをスッキリ改善
サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする
roter.php
擬似RPC

58. Ext Direct
あらゆる箇所から通信を行う仕組みをスッキリ改善
サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする
サーバー側がコンポーネントに対応
するデータを返すことで、クライア
ント側でデータを受信した後データ
加工なども必要なく実装が完了する。

59. Ext Direct
あらゆる箇所から通信を行う仕組みをスッキリ改善
サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする
ルーターで通信を一元化するので、
エラー処理も一元管理できる。
コンポーネントに対応したエラーの
返し方をするだけで、エラー表示を
自動的に行わせることができる。

60. Senchaを利用したHTML5開発体制
設計者・ディレクター
プログラマー・SE
デザイナー

61. Senchaを利用したHTML5開発体制
Sencha Ext JS / Sencha Touch という
共通フレームワーク上でプロジェクトメンバーが活動
設計者・ディレクター
プログラマー・SE
デザイナー

62. Xenophyコンサルティングサービス

63. 株式会社ゼノフィでのSenchaサポート体制
Sencha事業マネージャー
お客様
営業窓口
Sencha認定トレーナー
Sencha開発技術スタッフ、およびゼノフィSenchaアンバサダー

64. Sencha社認定トレーナー紹介
こつつみ かずひろ
たなか
ゆうや
小堤 一弘
田中 裕也
代表取締役
全エリア担当
国内認定資格付与資格保有
システム開発部部長
関東エリア担当
なかむら
ひさし
ごとう
やすとも
中村 久司
後藤 恭智
関西事業所長
関西エリア担当
札幌事業所長
北海道エリア担当

65. NTTコミュニケーションズ様の実例
のプロジェクト体制と履歴
Advanced Operation Portal
１月
２月
３月
４月
５月
６月
開発期間
７月
８月
Senchaコンサルティングサービス
Sencha
オフィシャル
トレーニング
20 Developer Pack
Sencha Complete + Premium Support
９月
10月

66. NTTコミュニケーションズ様の実例
Senchaコンサルティングサービスで何をしたのか？
Sencha オフィシャルトレーニングの実施
マイグレーションサポート
GitHub上でのオンラインサポート
テーマ構築のアウトソース
定期的なミーティングによるサポート

67. NTTコミュニケーションズ様の実例
Senchaコンサルティングサービスの与えた影響
同じSenchaを利用した開発体制が社内で効率的かつ美しいUIが評判を呼び、別プロジェクトへも適用開始
１月
２月
３月
４月
５月
６月
７月
８月
９月
aopプロジェクト
他プロジェクト
10月

68. Senchaプラットフォームに
期待できること

69. 進化し続けるHTML5プラットフォームの追跡をアウトソース
日々進化し続けるHTML5を取り巻く環境に対応するために
アウトソース

70. 進化し続けるHTML5プラットフォームの追跡をアウトソース
企業アプリケーションの目的は、HTML5を使うことではない
効果的に利用

71. コンポーネントアーキテクチャによる積み上げ
業務要件を満たすコンポーネント開発
業務に特化したコンポーネントを開発し、複数
のプロジェクト内で共有することは、もちろん。
微妙に異なる要件にも、コンポーネントを継承
して保守性の高いコンポーネントを作成するこ
とが可能です。

72. コンポーネントアーキテクチャによる積み上げ
サードパーティー製コンポーネントの導入
コンポーネントは、自分たちで作り上げるだけ
でなく、既製のコンポーネントを購入して、組
み込むことも、カスタマイズすることも可能で
す。
!
ガントチャートや、スケジューラーなどは特に
人気のコンポーネントで、ビジネスアプリケー
ションで、よく求められる機能です。

73. リアルデバイスでの検証を軽減
Sencha Touch
多数のリアルデバイス動作検証済みフレームワーク
Sencha社での開発において、常に多数のリアルデバイスを用い
て、フレームワークの検証・開発を行っています。
!
つまり、最初から多数のデバイスで検証されたナレッジの集大成
を即座に使い始めることができるということです。
自社で、多数のデバイスを買いそろえ、自社テストするところか
ら始めますか？

74. リアルデバイスでの検証を軽減
リアルデバイスの検証をデスクトップ上で
Sencha Architect上の開発コードをリアルデバイスへ、
リアルデバイスもクラウド化

75. Sencha 導入シチュエーション

76. プロジェクト規模に応じた導入の流れ
Senchaオフィシャルトレーニング
1∼3名
4∼20名
Senchaオフィシャルトレーニング
大規模

77. プロジェクト規模に応じた導入の流れ
コンサルティングサービス
1∼3名
4∼20名
コンサルティングサービス
大規模

78. 是非、エンタープライズにおける
HTML5統合開発プラットフォームに
Senchaをご検討ください。

79. ご清聴ありがとうございました。

80. Sencha製品のことならゼノフィ
http://www.xenophy.com/