© 2014 IBM Corporation

【13-C-2】iOS/Android/Windowsストア・アプリの ハイブリッド開発における限界と可能性

#devsumiC

日本アイ・ビー・エム株式会社!ソフトウェア事業 WebSphere事業部!佐々木 志門!

スピーカー紹介業務

• JavaEE～フロントエンド開発者（受託開発プロジェクト）

• ソフトウェア・テクニカル・　セールス IBM Worklight

キーワード

• モバイル開発 / クラウド

• 東北復興関連プロジェクト

http://ibm.co/1ktZ9Dx 2011

20122013

Story !

いま、ハイブリッド開発基盤 　に関する相談が増加してます。

• 大手取引先の２社が、自社が提供するサービスをタブレット対応してほしいと言ってきた。A社はAndroidタブレットで、B社はiPadを要件としている。

• iPhoneアプリで大成功した。Android対応したいが、個人情報を保存するのでセキュリティーに不安である。最近はハイブリッド開発というアプローチがあることを知り検討中。

• 既に多くのiPhone/Androidアプリをリリースした。重複する機能が多く、共通化や標準化を図っている。

• iPadとMicrosoft Windows 8タブレットを、業務利用に比較検討している。

• 社内用iPadアプリケーションを開発したが、アプリ運用管理・バージョン管理が煩雑で、アプリはもう止めようかと思ってる。

• セキュリティーの不安が払拭できないので、アプリは止めてHTML5のWebアプリだけを検討している。

• ドライバーの個人所有スマホを、BYODとして活用したい。

• 既存PDA業務をスマホに置き換えたい、機種は未定。

ITマネージャーHTML5開発者 ネイティブ開発者

ユーザー部門 企画部

Action !

フロントエンド開発の課題 ・マルチO S /マルチスクリーン対応

We b V i e w / U I We b V i e wクラスの存在マルチO S対応のキーとなる技術要素 ( 1 / 3 )

WebView WebView WebView

アプリ内のブラウザWebブラウザ

HTTPHTTP

ここに着目

アプリ内フォルダにWe bリソースを保存マルチO S対応のキーとなる技術要素 ( 2 / 3 )

HTML/JavaScript/CSS

HTML/JavaScript/CSS HTML/JavaScript/CSS HTML/JavaScript/CSS

②事前に保存して ビルド

①オフライン時 利用不可？

ここに着目

O S a n d N a t i v e - J a v a S c r i p t B r i d g eマルチO S対応のキーとなる技術要素 ( 3 / 3 )

①WebとJavaScriptに限定？既存コード・画面の再利用性は？

ここに着目

R e s p o n s i v e We b D e s i g n ( R W D )複数スクリーンサイズ対応

480px 768px 1024px ~

C S S 3 M e d i a Q u e r y

• 解像度のしきい値でCSSを切り替える

• Fluid Grid / Fluid Image

• フレームワーク：Twitter

Bootstrap / Foundation

• CSS3選任者のアサイン

• デバイス情報に基づくCSS切り替えが別途必要

例 : I B M Wo r k l i g h t S t u d i oでの開発風景

Android Studio

Xcode

Visual Studio

O S S L i b r a r yについて

( m o d e r n J a v a S c r i p t )

• jQuery API (2.0)

• Apache Cordova API (3.1)

• jQuery mobile / Dojo mobile / Sencha Touch

• (AngularJS / Backbone.js / Lo-Dash)

• Rhino JavaScript コンテナ　　　(サーバーサイド)

Must UI

MVC RWDNative SDK

今後、フロントエンド開発者に求められるスキル

IBM Worklight Client API

IBM Worklight Server API

MBaaSRESTful Services

(JAX-RS)

M i x e d H y b r i d A p p l i c a t i o n

• HTML5のみで、がんばろうとしない

• Cordova APIとWorklight APIで、　　足りない機能は、カスタム開発で補う

• 既存のコード(Objevtive-C,Java等)やOSSライブラリーや画面は再利用

• WebViewはOSデフォルトブラウザとは異なる

• Android 4.4が境界線 Chrome(Blink)へ

R e m o t e D e b u g g i n g ( i O S 6～ : S a f a r i / A n d ro i d 4 . 4～ : C h ro m e )

実機デバッグ

デバッグ・ツール

• 例：電源残量。Androidか総デバイスではTelnet操作、iOS

シミュレーターは未対応

★Cordova用イベントを起こせるデバッガー

★マルチ開発環境対応のロガー(Xcode console, Android LogCat標準出力)が必要、特にAndroid ~4.3、iOS~5

★クラッシュログの収集

例 : Wo r k l i g h t S t u d i oでのC o rd o v aデバッグ

Cordova関連の仮想イベント 同時スクリーン確認

Nexus 7Galaxy S3

例 :マルチ開発対応のロガー

Worklight API(JavaScript)でOSコンソール出力

WL.Logger.info() WL.Logger.warm() WL.Logger.error() WL.Logger.log()

例 :サーバーへのクラッシュログ送信

問題判別やエラー機器の早期発見

– J a v a E E系開発者 Aさん

“毎回、アプリビルドするのって、面倒ですね。ソース保存しただけで、反映しないんですか？”

/*** まるでWeb開発かのように* すばやくアプリをビルドする* デモ実施**/

モバイルテスト自動化

（実機も、W e bアプリも）

/*** モバイル操作をテストケースとして* 記録し、再テストを自動実行する* しかもエビエンスまで取れてる* デモ実施**/

バックエンド開発の課題

・M B a a S

( m o b i l e B a c k e n d a s a S e r v i c e )

M B a a S

• ユーザー認証管理

• データ(ファイル)ストア(RESTful Webサービス)

• プッシュ通知

★クラッシュログ収集

★デバイス毎のサービス停止

★アップデート管理

セキュリティーの課題 ・アプリ改ざん対策 ・オフラインデータ暗号化 ・デバイス紛失時のサービス停止

/*** アプリを改ざん* 紛失したアプリを遠隔停止する* デモ実施**/

C o rd o v a ( P h o n e G a p )と I B M Wo r k l i g h t

まとめ

1. H T M L 5 ( J a v a S c r i p t )中心のクライアントサイド開発に移行したことにより、J a v a E E等サーバーサイド開発での常識だったフレームワーク等が担う機能が置き去りにされ、リセットされた。C o r d o v a ( P h o n e G a p )の中心的な機能は、 J a v a S c r i p t

とO b j e c t i v e - CやA n d r o i d S D Kとの相互通信ブリッジにすぎない。H T M L 5 /

C S S 3 / J a v a S c r i p tに関して、ブリッジ以外の様々な機能やフレームワークは、独自に開発するか、他者が開発したものを採用する必要がある。

2. フロントエンド開発に目が行きがちだが、バックエンド開発やセキュリティー、アップデート管理の必要性などモバイル開発・運用のライフサイクル全般に広く視野を向ける。モバイル分野でリーダーシップを占めている企業は、長い年月をかけて、このような仕組み ( M E A P )を既に自社で開発・構築している。グローバルではM E A Pを採用する動きが活発化してきている。

3. ハイブリッドアプリ開発は、再利用性が高いため、対象のプラットフォームが増えるに連れて、市場へのアプリ・リリースのスピードが上がり、他社との差別化や投資対効果が高まる。既存の i O S / A n d r o i dだけではなく、W i n d o w s 8やC h r o m e

O Sなどを採用している企業は現実に増えている。ハイブリッドの内訳であるH T M L 5は標準ではあるものの、最先端のセンサーや、そのS D Kは多くの場合、成熟したネイティブO SのA P Iとして提供される。何をH T M L 5で開発し、何をネイティブO S開発言語で開発するのか、アプリ内の配合のバランスが重要である。

2 0 2 0年まで、あと6年

ハイブリッド開発で Action !

I B M Wo r k l i g h t S t u d i o D e v e l o p e r E d i t i o nは無期限で無料

eclipse 4.3.1の

ヘルプ

-> Eclipse Marketplace ※本番利用時には別途サーバーライセンスが必要です。

J a z z H u b - E c l i p s e O r i o n （ソースコード管理 - クラウド I D E）

詳しい情報は I B M d e v e l o p e r Wo r k s

ハンズオンセミナー（無料）も実施してます。

Action !

© 2014 IBM Corporation28

© 2014 IBM Corporation38

!ワークショップ、セッション、および資料は、IBMまたはセッション発表者によって準備され、それぞれ独自の見解を反映したものです。それらは情報提供の目的のみで提供されており、いかなる参加者に対しても法律的またはその他の指導や助言を意図したものではなく、またそのような結果を生むものでもありません。本講演資料に含まれている情報については、完全性と正確性を期するよう努力しましたが、「現状のまま」提供され、明示または暗示にかかわらずいかなる保証も伴わないものとします。本講演資料またはその他の資料の使用によって、あるいはその他の関連によって、いかなる損害が生じた場合も、IBMは責任を負わないものとします。 本講演資料に含まれている内容は、IBMまたはそのサプライヤーやライセンス交付者からいかなる保証または表明を引きだすことを意図したものでも、IBMソフトウェアの使用を規定する適用ライセンス契約の条項を変更することを意図したものでもなく、またそのような結果を生むものでもありません。!!本講演資料でIBM製品、プログラム、またはサービスに言及していても、IBMが営業活動を行っているすべての国でそれらが使用可能であることを暗示するものではありません。本講演資料で言及している製品リリース日付や製品機能は、市場機会またはその他の要因に基づいてIBM独自の決定権をもっていつでも変更できるものとし、いかなる方法においても将来の製品または機能が使用可能になると確約することを意図したものではありません。本講演資料に含まれている内容は、参加者が開始する活動によって特定の販売、売上高の向上、またはその他の結果が生じると述べる、または暗示することを意図したものでも、またそのような結果を生むものでもありません。 パフォーマンスは、管理された環境において標準的なIBMベンチマークを使用した測定と予測に基づいています。ユーザーが経験する実際のスループットやパフォーマンスは、ユーザーのジョブ・ストリームにおけるマルチプログラミングの量、入出力構成、ストレージ構成、および処理されるワークロードなどの考慮事項を含む、数多くの要因に応じて変化します。したがって、個々のユーザーがここで述べられているものと同様の結果を得られると確約するものではありません。!!記述されているすべてのお客様事例は、それらのお客様がどのようにIBM製品を使用したか、またそれらのお客様が達成した結果の実例として示されたものです。実際の環境コストおよびパフォーマンス特性は、お客様ごとに異なる場合があります。!!IBM、IBM ロゴ、ibm.com、 WebSphere、Worklightは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。!他の製品名およびサービス名等は、それぞれIBMまたは各社の商標である場合があります。!現時点での IBM の商標リストについては、www.ibm.com/legal/copytrade.shtmlをご覧ください。 !!Adobe, Adobeロゴ, PostScript, PostScriptロゴは、Adobe Systems Incorporatedの米国およびその他の国における登録商標または商標です。!IT Infrastructure Libraryは英国Office of Government Commerceの一部であるthe Central Computer and Telecommunications Agencyの登録商標です。!インテル, Intel, Intelロゴ, Intel Inside, Intel Insideロゴ, Intel Centrino, Intel Centrinoロゴ, Celeron, Intel Xeon, Intel SpeedStep, Itanium, およびPentium は Intel Corporationまたは子会社の米国およびその他の国における商標または登録商標です。!Linuxは、Linus Torvaldsの米国およびその他の国における登録商標です。!Microsoft, Windows, Windows NT および Windowsロゴは Microsoft Corporationの米国およびその他の国における商標です。!ITILは英国The Minister for the Cabinet Officeの登録商標および共同体登録商標であって、米国特許商標庁にて登録されています。!UNIXはThe Open Groupの米国およびその他の国における登録商標です。!Cell Broadband Engineは、Sony Computer Entertainment, Inc.の米国およびその他の国における商標であり、同社の許諾を受けて使用しています。!JavaおよびすべてのJava関連の商標およびロゴは Oracleやその関連会社の米国およびその他の国における商標または登録商標です。!Linear Tape-Open, LTO, LTOロゴ, UltriumおよびUltriumロゴは、HP, IBM Corp.およびQuantumの米国およびその他の国における商標です。