UNIORGはSAPビジネスソリューションのフルサービスプロバイダーで、SAP AGの認定パートナーです。この30年間、通常のSAPコンサルティングを提供してきた他、ビジネス情報管理システムの開発とデプロイに対する製品とサービスを利用して、我々のお客様を支えて来ました。現在でも、我々のお客様が今後のビジネスを整えるために新しいSAPの提供するものを開発しています。最近SAP HANAのUNIORG OrderTrackingを開発しました。

UNIORG OrderTrackingは異なる動的な条件に基づいて、SAP ERPシステムでお客様の注文のリアルタイムのモニタリングを提供するモバイルアプリケーションです。我々のアプリケーションは外部のパートナー、営業スタッフ、内部のスタッフに現在と過去の注文を早く、効率的に見れるようにしたいSAPのお客様にとってとても便利です。アプリケーションはリアルタイムのステータス、注文の価格、内訳の特徴を提供して、ネイティブのSAP ERPシステムでは不可能となるSAP HANA(インメモリー技術)の上に分析関数を提供します。

Sencha Touch、Ext JS、Architectを選択した理由

どのデバイスでも実行できる、タッチ対応のモダンなHTML 5を基にしたWeb UIを作成したかったので、Sencha Touchはそれに完璧にフィットしました。競合するソリューションであるJQueryに基づいたSAPとSAP HTML5フレームワークは現在ベータ版で、我々の求めるハイパフォーマンスのモバイルソルーションのニーズを満たしませんでした。

Sencha TouchのAPIはExt JSのAPIと似ているので、我々が今まで貯めてきたExt JSに対する深い知識と経験をうまく利用できました。モバイルアプリケーションのデザインにSencha Architectを利用しましたので、そのArchitectとSencha Cmdの組み合わせは、SAPのモバイルアプリケーション開発に必要なツールは全て揃っていて、とても高い生産力を持っています。

Balsamic MockupsやMockingbirdのような模擬・ワイヤーフレーミングツールで生成した、機能しないレイアウトを見るより、Sencha ArchitectとCmdを利用して、お客様にハンズオンのデモを提供するために素早く模擬で機能が動作するプロトタイプを作成できます。異なるSencha Architectプロジェクトの間をインポートとエクスポートしながら、デザインとカスタムウィジェットを再利用できて、Compass/SASSとSencha Cmdのおかげで、お客様の会社のデザインを反影するカスタムテーマを簡単に利用できます。このため、L-Shapeをデザインし（周辺ポータル・アプリケーションナビゲーションと異なるアプリケーションと入れ替えできる情報レイアウト）、一覧が利用する模擬データとデータウィジェットの他に静的なプレースホルダーのHTMLを追加しました。もしクライアントがソリューションを実装する事に決めたら、CSSを利用して、追加のデザインを加えて、目標のSAPシステム内にビジネスロジックを開発します。

Sencha Touchを利用して、拡張性がありレスポンスが良いプラットフォームを作成しました。Google Mapsパネルウィジェットを含めて、Google Maps APIを利用していくつかの追加の機能を加えました（住所を座標にする、マーカーを動的に追加する、その他）。

Senchaのオブジェクト指向クラスアプローチのお陰で、SAP HANAデータサービスにアクセスするために、カスタムoDataプロキシを開発できました。デフォルトのAjaxプロキシを利用することに決めて、対向のソースをsdk srcフォルダーでカスタマイズしました。このやり方で実現すると、我々自身のAjaxプロキシ実装を含むアプリケーションの生成とコンパイルに、標準の作成処理を利用できました。追加のプログラミング作業なしで、デザインされたフォームフィルターウィジェットは、必要なデータをリモートでフィルターできるために、直接プロキシ内にローカルとリモートストアの間のストアフィルター機能を実装しました。フィルター、ページング、並べ替えを対向のSAP HANA oDataフォーマットに変化して、拡張されたSAP HANAプロキシはAjaxの要求をoData要求に翻訳できます。

Sencha Touch、Ext JS、Architectを利用するビジネスバリュー

Sencha Touchを利用して、Apple iPadとSamsung Google Nexusを含む、複数のデバイス上に完璧に動作するマルチプラットフォームのソリューションを取得できました。異なるSDKを利用して、異なるデバイスに同じソリューションを開発する必要はありません。XCodeを少し調べたら、ネイティブのXCodeのアプリケーション内に同じ機能を実現するには、３倍〜４倍の努力が必要だという計算結果がでました。その上、Sencha Touchにはすぐに使えるウィジェットがたくさん提供してくれています。もしXCodeを利用したら、自分で開発必要がありました。XCodeはObjective Cを利用して、Android SDKはJavaを利用するので、Androidにアプリケーションを作成するときにはゼロから再び作成する必要がありました。Sencha Touchは全ての対応するデバイスでネイティブJavaScriptを利用するので、自分の開発者の個別なプラットフォームに対する知識に頼らないで済むため、高いエンジニアリング資源や追加のプロジェクトマネージメントのコストを避けられます。HTML5ベース、クロスプラットフォーム、モバイル開発環境があると、一つのコードベースを書いて、開発コストを削減できるようになります。

“ ネイティブのXCodeのアプリケーション内に同じ機能性を実現するには、３倍〜４倍の努力が必要だという計算結果がでました

Sencha Architectを利用して、素早くモバイルアプリケーションを作成し、リリースできたお陰で、コスト削減ができ、より簡単にアプリケーションのメンテナンスを行えます。Sencha Touchを利用して、我々の開発者の生産力が上がりました。ExtDirectをSAPアプリケーションサーバーABAPに実装しながら、デザインの時点でSAP ERPデータを含む事ができます（ローカルapacheをmodproxyと利用して、Cross-Domain問題にExtDirect SAPサービスをローカルアプリケーションドメインURIに挿入）。現在は全てのデザインプロセスは（コントローラーロジック）はSencha Architect内で行うことができます。Eclipseを利用して、ルックアンドフィールをカスタマイズする為にテーマを利用して、Sencha Cmd Build Toolをトリガーするantタスクを利用してアプリケーションを作成・テーマ付きしました。次の段階は全てのビルドとデプロイプロセスが完全に自動化されるように、WebDavを利用するカスタムantタスクを利用して、目標のSAPシステムに直接アプリケーションを配置することです。プロダクションバージョンはSAP開発システム内に保管されて、ネイティブSAPテクノロジーでデプロイされます。

始めたばかりの開発者へアドバイス

素晴らしいオンラインAPIドキュメンテーション以外、開発者はダウンロードしたSDKのに含まれるSencha Touchのソースコードもご覧になる方がいいでしょう。場合によって、開発者は内部的に何がどう動いているか知る必要があり、そのためにはソースコードを見るのが一番良いと思います。例えば、APIドキュメンテーションの前のバージョンでは、イメージのプロパティ「mode」はリストされてませんでしたが、内部的には利用されていたため、我々はレビューできました。イメージをコンテナの周辺を100％高さと幅を伸ばしたかった。少しコードを見たら、「mode」プロパティがイメージタグの生成やCSSプロパティの利用を管理している事に気づきました。これを頭に入れて、望んでいたことを実現できるように必要なプロパティをセットできました。

おわりに

特に我々はExt JSを経験していたので、Sencha Touchを使い始めるのは簡単でした。基本を学ぶ為に見本とデモに時間かけたら、特にモバイルとデスクトップのクロスプラットフォームのアプリケーションを作成していると、オブジェクト指向の姿勢を愛するようになります。 Sencha ArchitectをUIモデリングツールとして利用すると、手作りのUIの生成より、ユーザー体験と効率に集中できますので、そうするともっと良いアプリケーションを作成できます。その上、Sencha Architectを利用したお陰で我々の生産力が高まって、多くの時間を節約できました。