株式会社ゼノフィ Xenophy.CO.,LTD

小堤　一弘

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

Enterprise x HTML5 Conference 2014 - エンタープライズIT向けWeb標準技術のソリューション展

自己紹介

こつつみ 　 かずひろ

小堤　一弘 株式会社ゼノフィ 代表取締役 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 実践開発ガイド (監修)

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

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

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

JavaScriptの言語としての知識レベルの差異 可読性・再利用性の高いコードの記述と共有が困難 エンジニアに依存しやすいコード

HTML5アプリケーションや、SPAの開発で起きている問題点

設計段階のビジュアル化されるまでの工数 ユニットテスト/UIテストの難しさ 非同期通信インタフェースの煩雑化とエラー処理

HTML5アプリケーションや、SPAの開発で起きている問題点

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

Senchaとは？

Senchaの会社情報

Sencha社は、開発者がHTML5とJavaScriptを利用して、素晴らしいウェブアプリケーションを構築するために、フレームワーク、ツール、サービスを提供している会社です。

build amazing apps for every device

設立 2007

世界中に 150

以上の社員

2009 2011 2013

成長

http://www.sencha.com/company

世界のSencha開発者たち

25% N America

27% ROW22% BRIC

26% Europe

世界中に200万人の開発者

世界的な存在感

50万人フォーラムのメンバー

2009 2010 2011 2012

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

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

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

Sencha製品とサービス

Sencha製品とサービス

Sencha製品とサービス

設計 開発 デプロイ

Sencha製品とサービス

設計 開発 デプロイ

Sencha Architect

Sencha Ext JS

Sencha Touch

Sencha製品とサービス

設計 開発 デプロイ

Sencha Architect

Sencha Ext JS

Sencha Touch

技術的サポートプロフェッショナルサービストレーニング

Sencha製品とサービス

設計 開発 デプロイ

Sencha Architect

Sencha Ext JS

Sencha Touch

技術的サポートプロフェッショナルサービストレーニング

フレームワーク製品

フレームワーク製品

Sencha GXTGoogle Web Toolkit用のアプリケーションフレームワーク

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

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

Sencha Ext JS

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

豊富なUIコンポーネント

堅牢なクラスシステム

多種ブラウザの互換性

プラグインレスのチャート

MVCアプリケーション

Sencha Ext JS

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

新しい機能 / 改善 タブレット対応 タッチイベントシステム & モーメンタルスクロール (対応されたデバイス上) タッチイベントにマップされたマウスのイベント

グリッドガジェット グリッドセル内のリッチ & インタラクティブなコンポーネント

チャートのパッケージアップグレード WAI-ARIA / 508 サポートの改善

Sencha Touch

ハイパフォーマンス

モバイルHTML5フレームワーク

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

複数のプラットフォームアプリケーションに対応するハイパフォーマンスモバイルHTML5フレームワーク モバイルUIコンポーネントが使用可能

Sencha Touch

ハイパフォーマンス

モバイルHTML5フレームワーク

様々なプラットフォームで動作するアプリケーションを開発する事が可能です。 Android / iOS / BlackBerry / Windows Phone / Tizen

Cordova / PhoneGapを通してネイティブパッケージングが行える TouchGrid タッチデバイス用に作成されたスムーズスクロールや切り替え付きの早いグリッドコンポーネントを提供

Sencha GXT

Google Web Toolkit (GWT)で作るSencha Ext JS

JavaのみでHTML5アプリ開発PureJavaコード記述されたExt JSフレームワーク

Sencha Ext JS同等の豊富なコンポーネントUI既存Javaシステム開発者のシームレスなHTML5開発への移行

開発ツール

開発ツール

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

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

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

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

Sencha Architect

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

生成されるコードは、Sencha社が推奨するベストプラクティスコードですので、ノウハウの宝庫です。

開発を加速するテンプレートからの開発スタート ユーザーエクステンションを取り込める高い再利用性 SASSによるスタイル/テーマの操作が可能、次のOSのテーマがあります。 Android / iOS / Windows / Blackberry / Tizen

コード補完とコードインテリジェンス Sencha Cmdやフレームワークとの統合

Sencha Architect

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

Sencha Animator

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

Sencha Cmd

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

新しいプロジェクトを生成すること可能 レガシーブラウザのためにテーマをスライスする Sencha ExtJSのみ対応

Apache Antを利用してビルドルールに従ったビルドを行うことが可能 ネイティブアプリとしてストアにデプロイすることが可能 Apache Cordova PhoneGap

BYOD

BYOD (Bring your own device、ビーワィオーディ)は、従業員が個人保有の携帯用機器を職場に持ち込み、それを業務に使用することを示す。

http://ja.wikipedia.org/wiki/BYODウィキペディアから

Sencha Space

様々なモバイルデバイスで動作する ビジネスアプリケーション用の管理・保護された環境

対応するストア App Store (iOS) Google play (Android) BlackBerry App World

管理プラットフォーム

Sencha Space

Invoke API Space内のアプリケーションが 相互に対話することを可能とします

データ保護 デバイスには、暗語化されたデータを保管する

様々なモバイルデバイスで動作する ビジネスアプリケーション用の管理・保護された環境

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

基礎知識やセオリーで躓かない、確かな技術者育成

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

サポート

迅速に開発を進めるためのサポートサブスクリプション

メジャーバージョンへのアップグレードが無料 チケット形式の質疑応答が利用可能 プレミアムフォーラムへ書込が可能 サポートのみのバージョンを取得可能

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 Training

トレーニングタイトルは、本日現在のもので変更されることがあります。

Senchaで解決する問題点たち

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

コンポーネント指向開発

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

DIVタグ

DIVタグ

DIVタグ

複数のタグを１つのユーザーインタフェースとして扱うことになる。

コンポーネント指向開発

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

DIVタグDIVタグ

DIVタグ

DIVタグ

しかし、プログラミングするときの UI操作単位は、DOMとDOM APIによる制御となるため、UI操作か？DOM操作か？が混ざってしまう。

コンポーネント指向開発

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

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

コンポーネント指向開発

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

Senchaで解決する問題点たち

エンジニアに依存しやすいコードSencha クラスシステム

Sencha クラスシステム

純粋なJavaScirptで構築された独自のクラスシステムを提供 コンパイルしてJavaScriptを生成するような作業はありません。

クラスの作成・継承 mixinによる多重継承 動的ローディングへの対応 デプロイ時用の利用クラス判別

Sencha クラスシステム

動的ローディングとビルドシステムがスタンバイ 開発時は、動的ローディング、最終的には利用しているファイルのみのコードを利用

Development Ver Release Ver

app.js

Application.js

Panel.js

Window.js利用しているクラスファイルたちをクラスファイルの定義から判定して動的に読み込む

app.js

クラス定義から、フレームワーク内で利用しているクラスファイルのみを抽出して、１つにまとめることができます。

Sencha Cmdが解析・ビルドを行います。

Senchaで解決する問題点たち

設計段階のビジュアル化されるまでの工数Sencha Architectを利用したビジュアル設計

Sencha Architectを利用したビジュアル設計

プログラマー・SE

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

Sencha Architect

ビジュアル的な設計と生成されたコードを利用して、効率的にアプリケーション開発を進める。

Sencha Architectを利用したビジュアル設計

プログラマー・SE

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

Sencha Architect

ビジュアル画面の設計に集中し、生成されたコードをプログラマー・SEと連携して円滑なプロジェクト進行を実現

設計者・ディレクター

Sencha テーマシステム

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

Sassでコンパイルする高機能テーマシステム。 カラー変数を変更するだけで全体の調整を自動計算！ またSassの操作はSencha Architectからも可能。

Senchaで解決する問題点たち

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

Bryntum Siestaを利用したUIユニットテスト

各クラスメソッドのユニットテストは、もちろん。 Sencha Ext JS、Sencha Touchのコンポーネントに対するUIテストの自動化までを実現します。 また、jQueryやprototype、nodejsのユニットテストにも対応する、ユニットテストツールです。 !

Lite版は、無料で利用することができます。

Senchaで解決する問題点たち

非同期通信インタフェースの煩雑化とエラー処理Ext Direct

Ext Direct

getGrid.php

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

getCompanyData.php

getSales.php

Ext Direct

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

roter.php

擬似RPC

Ext Direct

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

サーバー側がコンポーネントに対応するデータを返すことで、クライアント側でデータを受信した後データ加工なども必要なく実装が完了する。

Ext Direct

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

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

コンポーネントに対応したエラーの 返し方をするだけで、エラー表示を 自動的に行わせることができる。

Senchaを利用したHTML5開発体制

プログラマー・SE設計者・ディレクター デザイナー

Senchaを利用したHTML5開発体制

プログラマー・SE設計者・ディレクター デザイナー

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

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

株式会社ゼノフィでのSenchaサポート体制

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

Sencha認定トレーナー

営業窓口

Sencha開発技術スタッフ、およびゼノフィSenchaアンバサダー

Sencha社認定トレーナー紹介

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

こつつみ 　 かずひろ

中村　久司関西事業所長 関西エリア担当

なかむら 　 ひさし

田中　裕也システム開発部部長 関東エリア担当

たなか 　 ゆうや

後藤　恭智札幌事業所長 北海道エリア担当

ごとう 　 やすとも

NTTコミュニケーションズ様の実例

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

１月 ２月 ３月 ４月 ５月 ６月 ７月 ８月 ９月 10月

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

開発期間

20 Developer PackSencha Complete + Premium Support

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

NTTコミュニケーションズ様の実例

Senchaコンサルティングサービスで何をしたのか？

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

GitHub上でのオンラインサポート

定期的なミーティングによるサポート

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

テーマ構築のアウトソース

NTTコミュニケーションズ様の実例

Senchaコンサルティングサービスの与えた影響

１月 ２月 ３月 ４月 ５月 ６月 ７月 ８月 ９月 10月

aopプロジェクト

他プロジェクト

同じSenchaを利用した開発体制が社内で効率的かつ美しいUIが評判を呼び、別プロジェクトへも適用開始

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

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

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

アウトソース

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

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

効果的に利用

コンポーネントアーキテクチャによる積み上げ

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

業務に特化したコンポーネントを開発し、複数のプロジェクト内で共有することは、もちろん。

微妙に異なる要件にも、コンポーネントを継承して保守性の高いコンポーネントを作成することが可能です。

コンポーネントアーキテクチャによる積み上げ

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

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

ガントチャートや、スケジューラーなどは特に人気のコンポーネントで、ビジネスアプリケーションで、よく求められる機能です。

リアルデバイスでの検証を軽減

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

つまり、最初から多数のデバイスで検証されたナレッジの集大成を即座に使い始めることができるということです。 自社で、多数のデバイスを買いそろえ、自社テストするところから始めますか？

Sencha Touch多数のリアルデバイス動作検証済みフレームワーク

リアルデバイスでの検証を軽減

Sencha Architect上の開発コードをリアルデバイスへ、 リアルデバイスもクラウド化

リアルデバイスの検証をデスクトップ上で

Sencha 導入シチュエーション

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

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

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

1～3名 4～20名 大規模

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

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

1～3名 4～20名 大規模

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

是非、エンタープライズにおける

HTML5統合開発プラットフォームに

Senchaをご検討ください。

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

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