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

株式会社ゼノ...
自己紹介

こつつみ   かずひろ

小堤 一弘
株式会社ゼノフィ 代表取締役
Sencha 公式トレーニング認定トレーナー
Japan Sencha User Group 主宰
html5jエンタープライズ部
!
Twitter
@kotsu...
HTML5アプリケーションや、SPA(Single Page
Application)の開発において発生している問題点
既に、様々な開発者が取り組んでいる中での、
多様な問題があります。
今日は、そんな中からいくつかの問題点をピックアップ
します。
HTML5アプリケーションや、SPAの開発で起きている問題点

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

設計段階のビジュアル化されるまでの工数
ユニットテスト/UIテストの難しさ
非同期通信インタフェースの煩雑化とエラー処理
まだまだ、いろいろな問題があるかもしれませんが、
今日は、これらの問題をSenchaプラットフォームを利
用してどのように解決できるか?
について、お話させて頂きます。
Senchaとは?
Senchaの会社情報
http://www.sencha.com/company

build amazing apps for every device

Sencha社は、開発者がHTML5とJavaScriptを利用して、素晴らしいウェ...
世界のSencha開発者たち

ユーザーコミュニティの急増

世界的な存在感

25% N America

26% Europe
22% BRIC
27% ROW

2009

世界中に200万人の開発者

2010

2011

2012
...
HTML5マルチデバイス開発環境の提供

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

設計

開発

デプロイ
Sencha製品とサービス

設計

開発

Sencha Ext JS

Sencha Architect

Sencha Touch

デプロイ
Sencha製品とサービス

設計

開発

デプロイ

Sencha Ext JS

Sencha Architect

トレーニング

Sencha Touch

プロフェッショナルサービス

技術的サポート
Sencha製品とサービス

設計

開発

デプロイ

Sencha Ext JS

Sencha Architect

トレーニング

Sencha Touch

プロフェッショナルサービス

技術的サポート
フレームワーク製品
フレームワーク製品

Sencha Ext JS
全てのブラウザでリッチなアプリを作成するためのJavaScriptフレームワーク

Sencha Touch
モバイルJavaScriptフレームワーク

Sencha GXT
Google W...
Sencha Ext JS
全てのブラウザでリッチなアプリを作成するための
JavaScriptフレームワーク
豊富なUIコンポーネント
堅牢なクラスシステム
多種ブラウザの互換性
プラグインレスのチャート
MVCアプリケーション
Sencha Ext JS
全てのブラウザでリッチなアプリを作成するための
JavaScriptフレームワーク
新しい機能 / 改善
タブレット対応
タッチイベントシステム & モーメンタルスクロール (対応されたデバイス上)
タッチイベントに...
Sencha Touch
ハイパフォーマンス


モバイルHTML5フレームワーク
HTML5の機能をより便利に、そして異なるデバイスでの差異を柔軟に吸収し、
パフォーマンスを最大限に引き出すJavaScriptのノウハウを提供します。

複数...
Sencha Touch
ハイパフォーマンス


モバイルHTML5フレームワーク
様々なプラットフォームで動作するアプリケーションを開発する事が可能です。
Android / iOS / BlackBerry / Windows Phone ...
Sencha GXT

Google Web Toolkit (GWT)で作るSencha Ext JS
JavaのみでHTML5アプリ開発

PureJavaコード記述されたExt JSフレームワーク

Sencha Ext JS同等の豊富な...
開発ツール
開発ツール

Sencha Architect
HTML5 ビジュアルアプリケーション開発環境

Sencha Animator
CSS3 アニメーションオーサリングツール

Sencha Cmd
複数プラットフォームのコマンドラインツール
Sencha Architect



HTML5 ビジュアルアプリケーション開発環境
Sencha Ext JS / Sencha Touch向けアプリケーション開発ツール

ビジュアル開発
コード編集
モバイルネイティブパッケージング

生...
Sencha Architect



HTML5 ビジュアルアプリケーション開発環境
Sencha Ext JS / Sencha Touch向けアプリケーション開発ツール

開発を加速するテンプレートからの開発スタート
ユーザーエクステンシ...
Sencha Animator

CSS3 アニメーションオーサリングツール
HTML5・CSS3化が進み、モバイル広告や、ゲームアプ
リケーション内のアニメーション利用などでよりCSS3
アニメーションの需要が高まりつつある中、手作業でコー
...
Sencha Cmd

複数プラットフォームのコマンドラインツール
新しいプロジェクトを生成すること可能
レガシーブラウザのためにテーマをスライスする
Sencha ExtJSのみ対応
Apache Antを利用してビルドルールに

従ったビル...
BYOD

BYOD (Bring your own device、ビーワィオーディ)
は、従業員が個人保有の携帯用機器を職場に持ち込み、
それを業務に使用することを示す。
ウィキペディアから
http://ja.wikipedia.org/w...
Sencha Space
様々なモバイルデバイスで動作する
ビジネスアプリケーション用の管理・保護された環境
対応するストア
App Store (iOS)
Google play (Android)
BlackBerry App World
...
Sencha Space
様々なモバイルデバイスで動作する
ビジネスアプリケーション用の管理・保護された環境
Invoke API
Space内のアプリケーションが

相互に対話することを可能とします
データ保護
デバイスには、暗語化されたデー...
Senchaオフィシャルトレーニング

基礎知識やセオリーで躓かない、確かな技術者育成
株式会社ゼノフィのトレーニングは、米Sencha社のオフィシャルトレー
ナーとして認定された、高度な専門スキルを持つトレーナーが実施いた
します。Sench...
サポート

迅速に開発を進めるためのサポートサブスクリプション
メジャーバージョンへのアップグレードが無料
チケット形式の質疑応答が利用可能
プレミアムフォーラムへ書込が可能
サポートのみのバージョンを取得可能
Senchaを利用したHTML5開発体制
HTML5(SPA)の開発を行う時の問題点

JavaScriptの言語としての知識レベルの差異
Senchaで解決する問題点たち

JavaScriptの言語としての知識レベルの差異
Sencha オフィシャルトレーニング
Sencha オフィシャルトレーニング

Fast Track to Ext JS 4.2 Training

+ Sencha Architect
Fast Track to Sencha Touch
+ Advanced Architect...
Senchaで解決する問題点たち

可読性・再利用性の高いコードの記述と共有が困難
コンポーネント指向開発
コンポーネント指向開発

複雑なアプリーションを構築していくときに、
DOMのことを気にしながら構築していきますか?
DIVタグ
DIVタグ
DIVタグ

複数のタグを1つのユーザーインタフェー
スとして扱うことになる。
コンポーネント指向開発

複雑なアプリーションを構築していくときに、
DOMのことを気にしながら構築していきますか?
DIVタグ
DIVタグ
DIVタグ

しかし、プログラミングするときの
UI操作単位は、DOMとDOM APIによる
制御とな...
コンポーネント指向開発

Senchaのコンポーネント指向開発では、1つ以上のタグ
をコンポーネントという単位で取り扱うことができます。

1つ以上のタグで構成された
ボタンコンポーネントを別なコンテナー
にレイアウトしていくことができます。
コンポーネント指向開発

開発をスタートしたその時から、豊富なUIコンポーネント
を利用することが可能です。
Senchaで解決する問題点たち

エンジニアに依存しやすいコード
Sencha クラスシステム
Sencha クラスシステム
純粋なJavaScirptで構築された独自のクラスシステムを提供
コンパイルしてJavaScriptを生成するような作業はありません。

クラスの作成・継承
mixinによる多重継承
動的ローディングへの対応
デプ...
Sencha クラスシステム
動的ローディングとビルドシステムがスタンバイ
開発時は、動的ローディング、最終的には利用しているファイルのみのコードを利用

Release Ver

Development Ver

app.js
Applica...
Senchaで解決する問題点たち

設計段階のビジュアル化されるまでの工数
Sencha Architectを利用したビジュアル設計
Sencha Architectを利用したビジュアル設計
非プログラマも利用できる設計者が利用するツール
プログラマ・SE以外の設計者・ディレクターなどが画面設計を行えるプロフェッショナルツール

Sencha Architect

プログラマ...
Sencha Architectを利用したビジュアル設計
非プログラマも利用できる設計者が利用するツール
プログラマ・SE以外の設計者・ディレクターなどが画面設計を行えるプロフェッショナルツール

Sencha Architect

設計者・デ...
Sencha テーマシステム
コンポーネントビジュアルをSassで自由自在に変更するた
めの効率的なテーマシステムを提供

Sassでコンパイルする高機能テーマシステム。
カラー変数を変更するだけで全体の調整を自動計算!
またSassの操作はS...
Senchaで解決する問題点たち

ユニットテスト/UIテストの難しさ
Bryntum Siestaを利用したUIユニットテスト
Bryntum Siestaを利用したUIユニットテスト

各クラスメソッドのユニットテストは、もちろん。
Sencha Ext JS、Sencha Touchのコンポーネントに
対するUIテストの自動化までを実現します。
また、jQueryや...
Senchaで解決する問題点たち

非同期通信インタフェースの煩雑化とエラー処理
Ext Direct
Ext Direct
あらゆる箇所から通信を行う仕組みをスッキリ改善
サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする

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

roter.php

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

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

ルーターで通信を一元化するので、
エラー処理も一元管理できる。

コンポーネントに...
Senchaを利用したHTML5開発体制

設計者・ディレクター

プログラマー・SE

デザイナー
Senchaを利用したHTML5開発体制

Sencha Ext JS / Sencha Touch という
共通フレームワーク上でプロジェクトメンバーが活動

設計者・ディレクター

プログラマー・SE

デザイナー
Xenophyコンサルティングサービス
株式会社ゼノフィでのSenchaサポート体制

Sencha事業マネージャー
お客様

営業窓口
Sencha認定トレーナー

Sencha開発技術スタッフ、およびゼノフィSenchaアンバサダー
Sencha社認定トレーナー紹介

こつつみ   かずひろ

たなか  

ゆうや

小堤 一弘

田中 裕也

代表取締役
全エリア担当
国内認定資格付与資格保有

システム開発部部長
関東エリア担当

なかむら  

ひさし

ごとう  
...
NTTコミュニケーションズ様の実例

のプロジェクト体制と履歴

Advanced Operation Portal

1月

2月

3月

4月

5月

6月

開発期間

7月

8月

Senchaコンサルティングサービス

Senc...
NTTコミュニケーションズ様の実例
Senchaコンサルティングサービスで何をしたのか?

Sencha オフィシャルトレーニングの実施

マイグレーションサポート

GitHub上でのオンラインサポート
テーマ構築のアウトソース
定期的なミー...
NTTコミュニケーションズ様の実例
Senchaコンサルティングサービスの与えた影響
同じSenchaを利用した開発体制が社内で効率的かつ美しいUIが評判を呼び、別プロジェクトへも適用開始

1月

2月

3月

4月

5月

6月

7月...
Senchaプラットフォームに
期待できること
進化し続けるHTML5プラットフォームの追跡をアウトソース

日々進化し続けるHTML5を取り巻く環境に対応するために

アウトソース
進化し続けるHTML5プラットフォームの追跡をアウトソース

企業アプリケーションの目的は、HTML5を使うことではない

効果的に利用
コンポーネントアーキテクチャによる積み上げ

業務要件を満たすコンポーネント開発

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

サードパーティー製コンポーネントの導入

コンポーネントは、自分たちで作り上げるだけ
でなく、既製のコンポーネントを購入して、組
み込むことも、カスタマイズすることも可能で
す。
!

ガントチャー...
リアルデバイスでの検証を軽減
Sencha Touch


多数のリアルデバイス動作検証済みフレームワーク
Sencha社での開発において、常に多数のリアルデバイスを用い
て、フレームワークの検証・開発を行っています。
!

つまり、最初から多...
リアルデバイスでの検証を軽減

リアルデバイスの検証をデスクトップ上で
Sencha Architect上の開発コードをリアルデバイスへ、
リアルデバイスもクラウド化
Sencha 導入シチュエーション
プロジェクト規模に応じた導入の流れ

Senchaオフィシャルトレーニング
1∼3名

4∼20名

Senchaオフィシャルトレーニング

大規模
プロジェクト規模に応じた導入の流れ

コンサルティングサービス
1∼3名

4∼20名

コンサルティングサービス

大規模
是非、エンタープライズにおける
HTML5統合開発プラットフォームに
Senchaをご検討ください。
ご清聴ありがとうございました。
Sencha製品のことならゼノフィ
http://www.xenophy.com/
Upcoming SlideShare
Loading in …5
×

HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法

2,470 views

Published on

「Enterprise x HTML5 Conference 2014 - エンタープライズIT向けWeb標準技術のソリューション展」にて使用したスライドです。

http://conference.html5biz.org/2014spring/

※ 一部企業ロゴなどは、削除しています。

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,470
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法

  1. 1. HTML5を活用した効果の高いリッチアプリ開発体制構築と コンサルティングの実現方法 Enterprise x HTML5 Conference 2014 - エンタープライズIT向けWeb標準技術のソリューション展 小堤 一弘 株式会社ゼノフィ Xenophy.CO.,LTD
  2. 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. 3. HTML5アプリケーションや、SPA(Single Page Application)の開発において発生している問題点
  4. 4. 既に、様々な開発者が取り組んでいる中での、 多様な問題があります。
  5. 5. 今日は、そんな中からいくつかの問題点をピックアップ します。
  6. 6. HTML5アプリケーションや、SPAの開発で起きている問題点 JavaScriptの言語としての知識レベルの差異 可読性・再利用性の高いコードの記述と共有が困難 エンジニアに依存しやすいコード
  7. 7. HTML5アプリケーションや、SPAの開発で起きている問題点 設計段階のビジュアル化されるまでの工数 ユニットテスト/UIテストの難しさ 非同期通信インタフェースの煩雑化とエラー処理
  8. 8. まだまだ、いろいろな問題があるかもしれませんが、 今日は、これらの問題をSenchaプラットフォームを利 用してどのように解決できるか? について、お話させて頂きます。
  9. 9. Senchaとは?
  10. 10. Senchaの会社情報 http://www.sencha.com/company build amazing apps for every device Sencha社は、開発者がHTML5とJavaScriptを利用して、素晴らしいウェブアプリケーショ ンを構築するために、フレームワーク、ツール、サービスを提供している会社です。 設立 成長 世界中に 150 2007 以上の社員 2009 2011 2013
  11. 11. 世界のSencha開発者たち ユーザーコミュニティの急増 世界的な存在感 25% N America 26% Europe 22% BRIC 27% ROW 2009 世界中に200万人の開発者 2010 2011 2012 50万人フォーラムのメンバー
  12. 12. HTML5マルチデバイス開発環境の提供 複数のプラットフォーム開発環境の提供 高品質なユーザーエクスペリエンスの提供 開発者の生産力向上 モバイル、タブレット、デスクトップへの対応
  13. 13. Sencha製品とサービス
  14. 14. Sencha製品とサービス
  15. 15. Sencha製品とサービス 設計 開発 デプロイ
  16. 16. Sencha製品とサービス 設計 開発 Sencha Ext JS Sencha Architect Sencha Touch デプロイ
  17. 17. Sencha製品とサービス 設計 開発 デプロイ Sencha Ext JS Sencha Architect トレーニング Sencha Touch プロフェッショナルサービス 技術的サポート
  18. 18. Sencha製品とサービス 設計 開発 デプロイ Sencha Ext JS Sencha Architect トレーニング Sencha Touch プロフェッショナルサービス 技術的サポート
  19. 19. フレームワーク製品
  20. 20. フレームワーク製品 Sencha Ext JS 全てのブラウザでリッチなアプリを作成するためのJavaScriptフレームワーク Sencha Touch モバイルJavaScriptフレームワーク Sencha GXT Google Web Toolkit用のアプリケーションフレームワーク
  21. 21. Sencha Ext JS 全てのブラウザでリッチなアプリを作成するための JavaScriptフレームワーク 豊富なUIコンポーネント 堅牢なクラスシステム 多種ブラウザの互換性 プラグインレスのチャート MVCアプリケーション
  22. 22. Sencha Ext JS 全てのブラウザでリッチなアプリを作成するための JavaScriptフレームワーク 新しい機能 / 改善 タブレット対応 タッチイベントシステム & モーメンタルスクロール (対応されたデバイス上) タッチイベントにマップされたマウスのイベント グリッドガジェット グリッドセル内のリッチ & インタラクティブなコンポーネント チャートのパッケージアップグレード WAI-ARIA / 508 サポートの改善
  23. 23. Sencha Touch ハイパフォーマンス
 モバイルHTML5フレームワーク HTML5の機能をより便利に、そして異なるデバイスでの差異を柔軟に吸収し、 パフォーマンスを最大限に引き出すJavaScriptのノウハウを提供します。 複数のプラットフォームアプリケーションに対応する
 ハイパフォーマンスモバイルHTML5フレームワーク モバイルUIコンポーネントが使用可能
  24. 24. Sencha Touch ハイパフォーマンス
 モバイルHTML5フレームワーク 様々なプラットフォームで動作するアプリケーションを開発する事が可能です。 Android / iOS / BlackBerry / Windows Phone / Tizen Cordova / PhoneGapを通してネイティブパッケージングが行える TouchGrid タッチデバイス用に作成されたスムーズスクロールや
 切り替え付きの早いグリッドコンポーネントを提供
  25. 25. Sencha GXT Google Web Toolkit (GWT)で作るSencha Ext JS JavaのみでHTML5アプリ開発
 PureJavaコード記述されたExt JSフレームワーク
 Sencha Ext JS同等の豊富なコンポーネントUI
 既存Javaシステム開発者のシームレスなHTML5開 発への移行
  26. 26. 開発ツール
  27. 27. 開発ツール Sencha Architect HTML5 ビジュアルアプリケーション開発環境 Sencha Animator CSS3 アニメーションオーサリングツール Sencha Cmd 複数プラットフォームのコマンドラインツール
  28. 28. Sencha Architect 
 HTML5 ビジュアルアプリケーション開発環境 Sencha Ext JS / Sencha Touch向けアプリケーション開発ツール ビジュアル開発 コード編集 モバイルネイティブパッケージング 生成されるコードは、Sencha社が推奨するベストプラクティスコード ですので、ノウハウの宝庫です。
  29. 29. Sencha Architect 
 HTML5 ビジュアルアプリケーション開発環境 Sencha Ext JS / Sencha Touch向けアプリケーション開発ツール 開発を加速するテンプレートからの開発スタート ユーザーエクステンションを取り込める高い再利用性 SASSによるスタイル/テーマの操作が可能、次のOSのテーマがあります。 Android / iOS / Windows / Blackberry / Tizen コード補完とコードインテリジェンス Sencha Cmdやフレームワークとの統合
  30. 30. Sencha Animator CSS3 アニメーションオーサリングツール HTML5・CSS3化が進み、モバイル広告や、ゲームアプ リケーション内のアニメーション利用などでよりCSS3 アニメーションの需要が高まりつつある中、手作業でコー ドを書くより効率的にアニメーションを作成することが できます。
  31. 31. Sencha Cmd 複数プラットフォームのコマンドラインツール 新しいプロジェクトを生成すること可能 レガシーブラウザのためにテーマをスライスする Sencha ExtJSのみ対応 Apache Antを利用してビルドルールに
 従ったビルドを行うことが可能 ネイティブアプリとしてストアにデプロイすることが可能 Apache Cordova PhoneGap
  32. 32. BYOD BYOD (Bring your own device、ビーワィオーディ) は、従業員が個人保有の携帯用機器を職場に持ち込み、 それを業務に使用することを示す。 ウィキペディアから http://ja.wikipedia.org/wiki/BYOD
  33. 33. Sencha Space 様々なモバイルデバイスで動作する ビジネスアプリケーション用の管理・保護された環境 対応するストア App Store (iOS) Google play (Android) BlackBerry App World 管理プラットフォーム
  34. 34. Sencha Space 様々なモバイルデバイスで動作する ビジネスアプリケーション用の管理・保護された環境 Invoke API Space内のアプリケーションが
 相互に対話することを可能とします データ保護 デバイスには、暗語化されたデータ
 を保管する
  35. 35. Senchaオフィシャルトレーニング 基礎知識やセオリーで躓かない、確かな技術者育成 株式会社ゼノフィのトレーニングは、米Sencha社のオフィシャルトレー ナーとして認定された、高度な専門スキルを持つトレーナーが実施いた します。Sencha Ext JS、Sencha Touchフレームワークの基礎と設計 思想の理解、Sencha Architectを使ったビジュアル開発まで、必要な 知識とセオリーをご提供します。
  36. 36. サポート 迅速に開発を進めるためのサポートサブスクリプション メジャーバージョンへのアップグレードが無料 チケット形式の質疑応答が利用可能 プレミアムフォーラムへ書込が可能 サポートのみのバージョンを取得可能
  37. 37. Senchaを利用したHTML5開発体制
  38. 38. HTML5(SPA)の開発を行う時の問題点 JavaScriptの言語としての知識レベルの差異
  39. 39. Senchaで解決する問題点たち JavaScriptの言語としての知識レベルの差異 Sencha オフィシャルトレーニング
  40. 40. Sencha オフィシャルトレーニング Fast Track to Ext JS 4.2 Training
 + Sencha Architect Fast Track to Sencha Touch + Advanced Architect Training トレーニングタイトルは、本日現在のもので変更されることがあります。
  41. 41. Senchaで解決する問題点たち 可読性・再利用性の高いコードの記述と共有が困難 コンポーネント指向開発
  42. 42. コンポーネント指向開発 複雑なアプリーションを構築していくときに、 DOMのことを気にしながら構築していきますか? DIVタグ DIVタグ DIVタグ 複数のタグを1つのユーザーインタフェー スとして扱うことになる。
  43. 43. コンポーネント指向開発 複雑なアプリーションを構築していくときに、 DOMのことを気にしながら構築していきますか? DIVタグ DIVタグ DIVタグ しかし、プログラミングするときの UI操作単位は、DOMとDOM APIによる 制御となるため、UI操作か?DOM操作か? が混ざってしまう。 DIVタグ
  44. 44. コンポーネント指向開発 Senchaのコンポーネント指向開発では、1つ以上のタグ をコンポーネントという単位で取り扱うことができます。 1つ以上のタグで構成された ボタンコンポーネントを別なコンテナー にレイアウトしていくことができます。
  45. 45. コンポーネント指向開発 開発をスタートしたその時から、豊富なUIコンポーネント を利用することが可能です。
  46. 46. Senchaで解決する問題点たち エンジニアに依存しやすいコード Sencha クラスシステム
  47. 47. Sencha クラスシステム 純粋なJavaScirptで構築された独自のクラスシステムを提供 コンパイルしてJavaScriptを生成するような作業はありません。 クラスの作成・継承 mixinによる多重継承 動的ローディングへの対応 デプロイ時用の利用クラス判別
  48. 48. Sencha クラスシステム 動的ローディングとビルドシステムがスタンバイ 開発時は、動的ローディング、最終的には利用しているファイルのみのコードを利用 Release Ver Development Ver app.js Application.js app.js Panel.js 利用しているクラスファ イルたちをクラスファイ ルの定義から判定して動 的に読み込む Window.js クラス定義から、フレームワーク内で利 用しているクラスファイルのみを抽出して、 1つにまとめることができます。 Sencha Cmdが解析・ビルドを行います。
  49. 49. Senchaで解決する問題点たち 設計段階のビジュアル化されるまでの工数 Sencha Architectを利用したビジュアル設計
  50. 50. Sencha Architectを利用したビジュアル設計 非プログラマも利用できる設計者が利用するツール プログラマ・SE以外の設計者・ディレクターなどが画面設計を行えるプロフェッショナルツール Sencha Architect プログラマー・SE ビジュアル的な設計と生成されたコードを利用 して、効率的にアプリケーション開発を進める。
  51. 51. Sencha Architectを利用したビジュアル設計 非プログラマも利用できる設計者が利用するツール プログラマ・SE以外の設計者・ディレクターなどが画面設計を行えるプロフェッショナルツール Sencha Architect 設計者・ディレクター ビジュアル画面の設計に集中し、生成されたコー ドをプログラマー・SEと連携して円滑なプロ ジェクト進行を実現 プログラマー・SE
  52. 52. Sencha テーマシステム コンポーネントビジュアルをSassで自由自在に変更するた めの効率的なテーマシステムを提供 Sassでコンパイルする高機能テーマシステム。 カラー変数を変更するだけで全体の調整を自動計算! またSassの操作はSencha Architectからも可能。
  53. 53. Senchaで解決する問題点たち ユニットテスト/UIテストの難しさ Bryntum Siestaを利用したUIユニットテスト
  54. 54. Bryntum Siestaを利用したUIユニットテスト 各クラスメソッドのユニットテストは、もちろん。 Sencha Ext JS、Sencha Touchのコンポーネントに 対するUIテストの自動化までを実現します。 また、jQueryやprototype、nodejsのユニットテスト にも対応する、ユニットテストツールです。 ! Lite版は、無料で利用することができます。
  55. 55. Senchaで解決する問題点たち 非同期通信インタフェースの煩雑化とエラー処理 Ext Direct
  56. 56. Ext Direct あらゆる箇所から通信を行う仕組みをスッキリ改善 サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする getSales.php getCompanyData.php getGrid.php
  57. 57. Ext Direct あらゆる箇所から通信を行う仕組みをスッキリ改善 サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする roter.php 擬似RPC
  58. 58. Ext Direct あらゆる箇所から通信を行う仕組みをスッキリ改善 サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする サーバー側がコンポーネントに対応 するデータを返すことで、クライア ント側でデータを受信した後データ 加工なども必要なく実装が完了する。
  59. 59. Ext Direct あらゆる箇所から通信を行う仕組みをスッキリ改善 サーバーサイドへのアクセスポイントが1点になることで、通信インタフェース管理を簡潔にする ルーターで通信を一元化するので、 エラー処理も一元管理できる。 コンポーネントに対応したエラーの 返し方をするだけで、エラー表示を 自動的に行わせることができる。
  60. 60. Senchaを利用したHTML5開発体制 設計者・ディレクター プログラマー・SE デザイナー
  61. 61. Senchaを利用したHTML5開発体制 Sencha Ext JS / Sencha Touch という 共通フレームワーク上でプロジェクトメンバーが活動 設計者・ディレクター プログラマー・SE デザイナー
  62. 62. Xenophyコンサルティングサービス
  63. 63. 株式会社ゼノフィでのSenchaサポート体制 Sencha事業マネージャー お客様 営業窓口 Sencha認定トレーナー Sencha開発技術スタッフ、およびゼノフィSenchaアンバサダー
  64. 64. Sencha社認定トレーナー紹介 こつつみ   かずひろ たなか   ゆうや 小堤 一弘 田中 裕也 代表取締役 全エリア担当 国内認定資格付与資格保有 システム開発部部長 関東エリア担当 なかむら   ひさし ごとう   やすとも 中村 久司 後藤 恭智 関西事業所長 関西エリア担当 札幌事業所長 北海道エリア担当
  65. 65. NTTコミュニケーションズ様の実例 のプロジェクト体制と履歴 Advanced Operation Portal 1月 2月 3月 4月 5月 6月 開発期間 7月 8月 Senchaコンサルティングサービス Sencha オフィシャル トレーニング 20 Developer Pack
 Sencha Complete + Premium Support 9月 10月
  66. 66. NTTコミュニケーションズ様の実例 Senchaコンサルティングサービスで何をしたのか? Sencha オフィシャルトレーニングの実施 マイグレーションサポート GitHub上でのオンラインサポート テーマ構築のアウトソース 定期的なミーティングによるサポート
  67. 67. NTTコミュニケーションズ様の実例 Senchaコンサルティングサービスの与えた影響 同じSenchaを利用した開発体制が社内で効率的かつ美しいUIが評判を呼び、別プロジェクトへも適用開始 1月 2月 3月 4月 5月 6月 7月 8月 9月 aopプロジェクト 他プロジェクト 10月
  68. 68. Senchaプラットフォームに 期待できること
  69. 69. 進化し続けるHTML5プラットフォームの追跡をアウトソース 日々進化し続けるHTML5を取り巻く環境に対応するために アウトソース
  70. 70. 進化し続けるHTML5プラットフォームの追跡をアウトソース 企業アプリケーションの目的は、HTML5を使うことではない 効果的に利用
  71. 71. コンポーネントアーキテクチャによる積み上げ 業務要件を満たすコンポーネント開発 業務に特化したコンポーネントを開発し、複数 のプロジェクト内で共有することは、もちろん。 微妙に異なる要件にも、コンポーネントを継承 して保守性の高いコンポーネントを作成するこ とが可能です。
  72. 72. コンポーネントアーキテクチャによる積み上げ サードパーティー製コンポーネントの導入 コンポーネントは、自分たちで作り上げるだけ でなく、既製のコンポーネントを購入して、組 み込むことも、カスタマイズすることも可能で す。 ! ガントチャートや、スケジューラーなどは特に 人気のコンポーネントで、ビジネスアプリケー ションで、よく求められる機能です。
  73. 73. リアルデバイスでの検証を軽減 Sencha Touch
 多数のリアルデバイス動作検証済みフレームワーク Sencha社での開発において、常に多数のリアルデバイスを用い て、フレームワークの検証・開発を行っています。 ! つまり、最初から多数のデバイスで検証されたナレッジの集大成 を即座に使い始めることができるということです。 自社で、多数のデバイスを買いそろえ、自社テストするところか ら始めますか?
  74. 74. リアルデバイスでの検証を軽減 リアルデバイスの検証をデスクトップ上で Sencha Architect上の開発コードをリアルデバイスへ、 リアルデバイスもクラウド化
  75. 75. Sencha 導入シチュエーション
  76. 76. プロジェクト規模に応じた導入の流れ Senchaオフィシャルトレーニング 1∼3名 4∼20名 Senchaオフィシャルトレーニング 大規模
  77. 77. プロジェクト規模に応じた導入の流れ コンサルティングサービス 1∼3名 4∼20名 コンサルティングサービス 大規模
  78. 78. 是非、エンタープライズにおける HTML5統合開発プラットフォームに Senchaをご検討ください。
  79. 79. ご清聴ありがとうございました。
  80. 80. Sencha製品のことならゼノフィ http://www.xenophy.com/

×