ぽんぽこバレー勉強会 Javaアプリケーションサーバー最新動向 ／ハイブリッド・モバイル・アプリケーション

2012年 4月 27日

日本アイ・ビー・エム株式会社

ソフトウェア事業 WebSphere事業部

須江 信洋(nsue@jp.ibm.com)

自己紹介

須江 信洋（すえ のぶひろ） –日本IBMにてミドルウェアのテクニカルセールスを担当

• 2000年頃からJavaEE関連の仕事

• 今年からモバイル関連製品も担当

–Twitter: @nobusue

–http://www.facebook.com/profile.php?id=732337788

コミュニティ活動 –Groovyコミュニティ(JGGUG)サポートスタッフ

• 「プログラミングGROOVY」執筆チーム

• 「Groovy イン・アクション」翻訳チーム

–日本Javaユーザーグループ(JJUG)幹事

–その他 • SCM BootCamp

• 「継続的デリバリー」読書会

2

Agenda

Javaアプリケーションサーバー最新動向 –Java EE6でのアップデート

–OSSと商用製品の使い分けのポイント

ハイブリッド・モバイル・アプリケーション

–モバイルWeb

–PhoneGap / Apache Cordova

–IBM Worklight

3

4

Java APサーバー 最新動向

5

Enterprise Javaの歴史

EJB 1.0 Servlet 2.1

1999/12

J2EE 1.2 • EJB 1.1 • Servlet 2.2 • JSP 1.1 • JMS • JavaMail

J2EE 1.3 • EJB 2.0 ローカルEJB abs. CMP MDB • Servlet 2.3 イベント フィルター • JSP 1.2 XML • JAXP • Connectors • JAAS

2001/9

J2EE 1.4 • EJB 2.1 タイマー EJB-QL拡張 • Servlet 2.4 • JSP 2.0 • Webサービス JAX-RPC • JMX Mgmt • J2EE Deployment • JACC

2003/11 BPEL

Portlets

SDO

SCA Hibernate

Spring

2006/3

Java EE 5 • EJB 3 / JPA POJO • Servlet 2.5 • JSP 2.1 Unified EL • JSF 1.2 • JSTL 1.2 • Webサービス JAX-WS POJO JAXB StAX MTOM • アノテーション IoC(制御の反転)

開発容易性

Seasar2 2009/12

Java EE 6 • Profile Web Profile • EJB 3.1 Interceptors • JPA 2.0 JPQLの拡張 • Web Beans 1.0 • Bean Validation 1.0 • Common Annotation • Servlet 3.0 • JSP 2.2 / EL 2.2 • JSF 2.0 • JSTL 1.2 • Webサービス JAX-RS

軽量化

拡張性

開発容易性

Struts

Ajax

6

Java EE 6仕様

EJB 3.1

Servlet 3.0

JSP 2.2

EL 2.2

JMS 1.1

JTA 1.1

JavaMail 1.4

Connector 1.6

Web Services 1.3

JAX-RPC 1.1

JAX-RS 1.1

JAXR 1.0

JAX-WS 2.2

JAXB 2.2

Java EE Management 1.1

Java EE Deployment 1.2

JACC 1.3

JASPIC 1.0

JSP Debugging 1.0

JSTL 1.2

Web Services Metadata 2.0

JSF 2.0

Common Annotations 1.1

Java Persistence 2.0

Bean Validation 1.0

Managed Beans 1.0

Interceptors 1.1

DI(JSR-330) 1.0

CDI(JSR-299) 1.0

Java IDL

JDBC 4.0

RMI-IIOP

JNDI

JAXP 1.3

StAX 1.0

JAAS

JMX 2.0

JAF 1.1

SAAJ 1.3

Common Annotations 1.1

Java EE 6 Java SE

New and Update Technology

Pruning Target

Java EE 6 の注目すべき機能

Rightsizing （Java EE仕様のボリュームの軽減） • 「Webプロファイル」

さらなるEase of Development（開発を簡単に） • EJBにつづきServletもアノテーションベースに • CDI （Contexts and Dependency Injection）

Web Container（プレゼンテーション層）の強化 • Servlet 3.0，JSF 2.0 • Commet/Web Messaging対応，Ajax対応

永続化の機能強化 • JPA 2.0

Java EE

Web

8

Servlet 3.0 メジャー・バージョンアップ！ （Version 2.5 → 3.0）

新機能も盛りだくさん

– 構成のためのアノテーション大量追加 （web.xmlはオプション）

– 非同期処理のサポート

– 複数構成ファイル（web-fragment.xml）の導入 • サード・パーティーのフレームワークとweb.xml定義を分離可能

– HTTPServletRequestにログインとログアウト処理を実現する機能の追加

– Servletおよびフィルタを動的に追加するメソッドの登場 • ServletContext#addFilter

• ServletContext#addServlet

– multipart/form-data形式のリクエストに対応（Partクラスの追加）

@WebServlet("/HelloServlet")

public class HelloServlet extends HttpServlet {

protected void doGet(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

resp.getWriter().println("Hello Servlet 3.0 !");

}}

9

Servlet 3.0 ～ログイン・ログアウト 新しい認証方式

– フォーム認証の実現

– <form action=“j_security_check” method=“post”>の機能をServletで実現

認証のための新しいメソッド – HttpServletRequest#authenticate(HttpServletResponse response)

– HttpServletRequest#login(String username, String password)

– HttpServletRequest#logout()

アノテーションも追加 – @ServletSecurity

– 「R1」ロールをもったユーザーからGETアクセスを制限

@ServletSecurity (value=@HttpConstraint(rolesAllowed="R1"), httpMethodConstraints=@HttpMethodConstraint("GET")) public class SecurityServlet extends HttpServlet{ …（略） }

10

Servlet 3.0 ～非同期処理 非同期リクエスト処理用のモデルを提供

Servletの実行スレッドを早期解放

非同期処理を行うスレッドはリクエストの情報を保有し、レスポンスを返す

startAsync(req,resp) + start()

doGet()

response

Servlet 別スレッド

時間の かかる 処理

doGet() Servlet

response

時間の かかる 処理

Servlet 3.0

11

JAX-RS（Java API for RESTful Web Services）

Java EE 6 新規追加仕様 – WAS V7.0(Java EE 5)でも、Feature Packとして追加可能

RESTful Webサービスを実現するAPIのJava EE 標準 – サーブレットを使わないWebアプリケーションも可能

@Path("repository")

public class TestRepositoryService {

@Path("version")

@GET

@Produces("text/plain; charset=UTF-8")

public String getVersion() {

return "Test Service version 1.0";

}

@Path("user/{userID}")

@GET

@Produces("text/plain; charset=UTF-8")

public String getUserName(@PathParam("userID") String id) {

return UserRepository.getUserName(id);

}

/repository/version で呼び出し

/repository/user/E12345 などで呼び出し

12 12 WAS V7 最新動向WorkShop 12

JSF 2.0

<h:panelGrid columns="2">

#{cc.attrs.namePrompt}

<h:panelGroup>

<h:inputText id="name" value="#{cc.attrs.managedBean.name}"

valueChangeListener="#{cc.attrs.managedBean.validateName}">

<f:ajax event="blur" render="nameError"/>

</h:inputText>

<h:outputText id="nameError"

value="#{cc.attrs.managedBean.nameError}" style="color: red;font-style:

italic;"/>

</h:panelGroup>

...

</h:panelGrid>

メジャー・バージョンアップ！ （Version 1.2 → 2.0）

Facelets

– JSP+JSFタグからXHTML+JSF属性に、テンプレート化が容易

Ajaxサポート

– <f:ajax>タグによりJavaScriptを動的に生成

アノテーション対応

– Managed BeanがPOJO＋アノテーションだけで作成可能

Bean Validation

– コンテナ全体で値検証を共通化

13

JPA 2.0の新機能 エンティティーの構造とテーブルのマッピングの柔軟性向上

–derived(派生) ID • 主キー列として、外部キーや外部キーとの複合キーを簡単に定義可能に

–リレーションにおけるMapオブジェクトのサポート強化 • ユニークな属性だけでなく、属性の複合や組み込み型、エンティティーをMapのキーに指定可能

–組み込み(Embeddable)クラスのネストのサポート –コレクション・マッピングの強化

• プリミティブ型と組み込みクラスのコレクションもフィールド指定可能

ベンダー依存プロパティーに優先する標準プロパティーの追加 –悲観的ロックのサポート –キャッシュ仕様の追加

Criteria APIの追加 –タイプ・セーフなJPQLクエリーを作成

Bean Validation(JSR-303)の統合 –フィールド値の妥当性検査 –例： @NotNull、@Max, @Pattern

JPA 2.0はJPA 1.0を拡張し、より柔軟なORマッピングが可能に

社員テーブル

ID myoji namae

126 たなか よしお

743 すずき はなこ

301 さとう たろう

ID: 126

myoji: たなか

namae: よしお

ID: 743

myoji: すずき

namae: はなこ

14

JPA 2.0 ～ペシミスティック・ロックのサポート

オプティミスティック・ロック – 他からのアクセスがないことを前提

– 更新対象が他のトランザクションによって書き換えられていないかをJPAエンジンがチェック

– バージョン番号、最終更新時間によるチェック

ペシミスティック・ロック – 他からアクセスされる可能性を考慮したロック

– 更新対象に排他ロックをかけ、更新が終わるまで他のトランザクションによる更新を禁止

– JPA2.0から正式にサポート

– lockメソッドの実行時に引数として指定 • LockModeType.PESSIMISTIC_WRITE

entityManager.lock(person, LockModeType.PESSIMISTIC_WRITE)；

データ読み取り データ読み取り

データ更新

データ更新

データ読み取り

Lock!

データ読み取り データ読み取り

データ更新 データ更新

OptimisticLock Exception!

15

EJB 3.1 ～EJB Liteとパッケージの簡略化

EJB Lite – Web Profileで利用 – 簡略化されたEJB

パッケージの簡略化 – Webモジュールのみ。Jarは不要 – インターフェイスも不要 – JavaEE 5同様のパッケージングも可能

Local Session Beans

Annotations / ejb-jar.xml

CMT / BMT

Declarative Security

Interceptors

JPA 2.0

JTA 1.1

Message Driven Beans EJB Component Web Service Endpoints RMI-IIOP Interoperability 2.x/3.x Remote View 2.x Local View Timer Service CMP / BMP

EJB Lite

EJB完全版

WEB-INF/classes/ com/ise/EJBSampleServlet.class com/ise/EJBSampleBean.class

EJBSample.war WEB-INF/web.xml WEB-INF/classes/

com/ise/EJBSampleServlet.class

com/ise/EJBSampleBean.class com/ise/EJBSample.class

EJBSample_web.war

EJBSample_ejb.jar

EJB 3.1

EJB 3.0 EJB 3.1

16

EJB 3.1 ～組み込み可能なEJBコンテナー

EJBはEJBコンテナーが必要なため、単体テストは困難だった

EJB 3.1からはJavaSEにEJBコンテナーを組み込んで使用可能 – JUnitなどを用いて単体テストが可能 – 開発向けの機能

public void testSayHello() { Map map = new HashMap(); map.put(“EJBContainer.PROVIDER”, ”com.ibm.websphere.ejbcontainerEmbeddableContainerProvider”); EJBContainer container = EJBContainer.createEJBContainer(map); try｛ Hello hello = (Hello)container.getContext().lookup(“java:global/hello/HelloBean”); System.out.println(hello.sayHello()); catch(Exception e){ e.printStackTrace(); ｝ ｝

EJBContainerクラスのContextよりEJBをlookup

17

CDI （Contexts and Dependency Injection）

ServletでのDI

EJBでのDI

WebサービスでのDI

ユーザー定義のDI

DIの機能を個別APIから分離

→ コンポーネント横断的なDIが利用可能

ビジネスロジック層とプレゼンテーション層の連携が容易に

CDI Context

and

Dependency

Injection

DIの仕様を

統合

18

CDIの使用例

package org.example;

import javax.inject.Named;

@Named

public class HelloService {

public void sayHello() {

System.out.println("Hello!");

}

}

import org.example.HelloService;

@WebServlet(name = "HelloWorld", urlPatterns = { "/HelloWorld" })

public class HelloWorld extends HttpServlet {

@Inject

HelloService helloService;

19

CDI 1.0 ～スコープ

スコープもアノテーションで表現 –@RequestScoped

–@SessionScoped

–@ApplicationScoped

@WebServlet(name="CounterServlet", urlPatterns={"/CounterServlet"}) public class CounterServlet extends HttpServlet { @Inject private test.cdi.Counter c; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { … out.println("<p>" + c.getCount() + "人目のアクセス</p>");

@SessionScoped public class Counter implements Serializable { private int count = 0; @PostConstruct private void init(){ System.out.println(“Init"); } @PreDestroy private void destroy(){ System.out.println(“Destroy"); } public int getCount(){ return ++count; } }

Inject !

@SessionScoped セッション内でデータ共有

20

Bean Validation 1.0 ～アノテーションで実現するバリデーション

アノテーションを利用してバリデーションを実現 –Hiberbate Validatorなどが実現していた機能 –Bean、フィールド、プロパティに制限 –nullチェック、数値の範囲のチェックなどが容易に実現可能

javax.validation.constraintsに定義されたアノテーション –@AssertFalse、@AssertTrue –@DecimalMax、@DecimalMin、@Max、@Min –@Digits –@Future、@Past (Date、Calenderクラスで示される時間のチェック) –@Null、@NotNull –@Pattern (正規表現によるチェック) –@Size (文字列の長さや配列の数)

21

JavaEEのカバレッジとアプリケーション移植性

JavaEE 5 準拠 APサーバー

O/R Map (JPA)

MVC (JSP)

EJB3

User Application

Spring Framework等

標準

追

加

JavaEE 6 準拠 APサーバー

O/R Map (JPA2.0)

MVC (JSF2.0)

EJB3.1

User Application

標準

CDI 1.0

Java EE 6採用のメリット

業界標準仕様であるためポータビリティが高い –Java EE 6準拠のAPサーバーであれば稼働可能

• WAS V8.0 / WebLogic11c / GlassFish3.0 / JBoss7.0 / TomEE1.0など選択可

–将来のバージョンアップに対する互換性

Java EE 5で不足していた機能の大幅拡充 –従来Spring Framework等で補っていた機能のかなりの部分が標準機能として

取り込まれている • CDI(Context and Dependency Injection)など

–APIの大幅強化 • JSF2.0 / JPA2.0 / Bean Validationなど

開発生産性向上 –組み込みEJBコンテナによる単体テスト –EJB3.1Lite(EJBをwarに含められる)

モジュール化への対応の容易さ –アノテーションベース開発 –Webフラグメントなど

22

Java EE 6対応 APサーバー (2012/4/27)

23

http://www.oracle.com/technetwork/java/javaee/overview/compatibility-jsp-136984.html

Full Profile Web Profile

TomEEとは

http://openejb.apache.org/index.html

Java EE 6 Web Profile をTomcatベースで実装 –CDI: Apache OpenWebBeans

–EJB: Apache OpenEJB

–JPA: Apache OpenJPA

–JSF: Apache MyFaces

–JTA: Apache Geronimo Transaction

–Bean Validation: Apache Bean Validation

上位エディションとして TomEE+ もあり –JAX-RS: Apache CXF

–JAX-WS: Apache CXF

–JMS: Apache ActiveMQ

–Connector: Apache Geronimo Connector

24

25

Java EE (Java Enterprise Edition)とは？ エンタープライズ・システムをJavaで構築するために必要となる一

連の機能を規定した仕様 –アプリケーション・サーバーの標準機能セットを定義する業界標準

–最低限の基準(API)を規定することで、複数のAPサーバ間でのアプリケーションの互換性や、スキルの共通化を実現するのが目的

Java EE = Java SE + エンタープライズ向け機能 –コンポーネント仕様（アプリケーション）

• Servlet/JSP： 画面

• EJB： ビジネスロジック

• Adapter： レガシー/パッケージ連携

–コンテナ・サービス（インフラ） • JNDI： リソース管理

• JDBC： データベース接続

• JMS： 非同期メッセージング

• JTA： トランザクション管理

• セキュリティ

25

Web+DBのシステムではあまり使われていない

次のようなケースは要注意

非同期処理 –オンラインで処理を受け付けておいて、バックグラウンドで処理を実行する

場合など

–特に不揮発メッセージ(永続メッセージ)を扱う場合は注意

2フェーズコミット(XAトランザクション) –2つ以上のDBにまたがってトランザクション処理を行う

–DBとメッセージングシステム(MQなど)にまたがってトランザクション処理を行う

非機能要件が厳しい –高負荷下での無停止運用

–アプリケーションが大容量ヒープメモリを要求

–障害発生時の厳密な原因究明

26

[WAS] パフォーマンス・モニタリングと問題判別機能

パフォーマンス状況を詳細にモニター可能 –パフォーマンス・ビューワー

• パフォーマンスの結果を管理コンソールに表示

• 必要なコンポーネントに対し、12段階で取得レベル設定可能。

• グラフ表示や表形式での表示、ロギングも可能

–パフォーマンス・アドバイザー • パフォーマンス状況をモニターした結果、リソースの構成についてアドバイスしてくれる機能

• 管理コンソール上に推奨設定を表示

• スレッドプールやコネクションプールサイズの値をアドバイス

–要求メトリック • Webサーバー、Webコンテナー、EJBコンテナーの各コンポーネントでの処理時間を記録し、ボトルネックを判断する

問題判別のための機能強化 –様々なログ・トレース機能

• JVMログ、プロセスログ、Thread Dump、Heap Dump、HTTPトランスポートログ、JDBCトレース、プラグインログ etc

–ハング・スレッドの検出機能

–メモリー・リークの検出機能

–クラスローダー・ビュワー

–問題判別に便利なツールの無償提供

データベース

リクエスト

IPやURLによる

フィルタリング

Web

コンテナー

Web

サーバー EJB

コンテナー

詳細なログやトレース、様々なツールの提供により、早期の問題解決をサポート

各コンポーネントにおける経過時間を把握可能

[WAS] High Performance Extensible Logging（HPEL）

問題判別のためのトレース取得負荷を大幅に軽減 –V7.0にくらべログ記録機能が6倍高速化

–V7.0にくらべトレース記録機能が3.8倍高速化

柔軟なログ・トレースデータの取り扱い –コマンドラインのフィルター・整形ツールを提供

–管理コンソールのGUI画面からフィルター・整形が可能

–プログラムからアクセスするAPIを提供

既存のログ機能と共存する形で利用可能

例：

アプリケーションに対する警告レベル以上のメッセージを抽出：

# logViewer,sh -minLevel warning -includeLoggers “com.acme.app1.*”

2010/07/11以降で0x0000000cスレッドでSEC文字列から始まるメッセージを抽出：

# logViewer,sh –startDate 2010/07/11 –message “SEC*” –thread 0c

29

ハイ・パフォーマンスな64bit JavaVM(J9)の提供

64bit JavaVM： 巨大なヒープが確保できるが、64bit化オーバーヘッドが大 – 同じアプリケーションを32bit JavaVMで稼働させた場合に比べ、ヒープ利用量が数十％増加

– それに伴い、GCのオーバーヘッドが増加し、スループットに悪影響

IBM® SDK for Java 6 の64bit版では、オブジェクトのポインターを圧縮して ヒープ利用量を削減する技術を投入

– ヒープ利用量とGCオーバヘッドを削減し、32bit JavaVMと遜色ないパフォーマンスを実現

ヒープサイズが約25GB程度まで適用可能 – 注）IBM JavaVMの固有機能であるため、Solaris/HP-UX版のWASでは未対応

64bit JavaVMのヒープ利用量削減率 (IBM Java5との比較)

64bit JavaVMのスループット改善率 (IBM Java5との比較)

IBM Health Center

オーバーヘッドが少なく、本番環境でも利用可能なJavaモニタリング・ツール

– WAS V6.1(IBM Java 5 SR8以上)とWAS V7.0/V8.0(IBM Java 6 SR1以上)で利用可能

– ISAから起動可能 • http://www.ibm.com/developerworks/jp/java/library/j-ibmtools5/

機能 – パフォーマンス

• メソッド・プロファイル

• ロック分析

• GC状況の可視化と推奨オプション

– メモリー • メモリーリーク検出

• ヒープサイズのガイド

– 環境 • システム・プロパティ-

• 環境変数

– クラスロード情報 • いつロードされたか

• キャッシュされたかどうか

JavaVMのリアルタイム・モニタリングと可視化を実現

無償提供

AP仮想化ソリューション：WebSphere Virtual Enterprise

WebSphere Application Server 他社Java EEサーバー Apache，PHP

オンデマンド・ルーター

優先度高

優先度低

購入処理

商品閲覧

買い物中

クライアント

流量少

流量多

キュー

キュー

L3

L2

L1 1秒 最高

5秒

3秒

目標平均 応答時間

低

高

優先度 リクエスト AppEdition2

Java VMリソースの動的配置 サービスポリシーによる優先制御

ヘルスポリシーによる自動回復処理

ルーティングポリシーによる条件ルーティング

AppEdition1

仮想化による サーバー資源の

有効利用

リクエストの Queuingによる 過負荷防止

回復処理の 自動化

アプリケーション エディション コントロール

設定されたサービスポリシーに 従ってリクエストを優先付け アクセス集中時にも 重要な処理を確実に実行

ヘルスモニタリング機能が 応答時間やCPU，メモリを監視 異常発生時に自動的に 切り離し・再起動などを実行

アプリケーションの複数のバージョンを サーバー上で同時実行 テストユーザーのみを新バージョンに割振り 本番環境でのテストも可能に

動的アプリケーション配置により 負荷に応じてJava VM数を動的に変更 サーバーの剰余能力を最適利用

AP仮想化によるリソース有効活用と業務の優先度に応じたサービスレベル管理

WAS V8.5 Liberty Profile

「手軽に使える」ことを目指した新しいWAS – 開発環境でもプロダクション環境でも利用可能 – Mac OS X対応

インストールが簡単 – zipファイルを展開するだけ – アプリケーションのデプロイも，ファイルをコピーするだけ

スモール・フットプリント – 必要ディスク容量: 50MB程度 – 必要メモリ容量: 数十MB程度 – 高速起動: わずか数秒で起動

コンフィグレーションが簡単 – コンフィグレーションファイル(server.xml)で

必要なフィーチャー(Servlet,JPA,JSF等)を指定するだけ – 内部的には必要なOSGiバンドルのみを組み合わせて実行

最新情報は http://wasdev.net から発信中！！

とにかく起動が早いです。ぜひお試しを！

詳細はInformation Center(beta)をご参照ください – http://www14.software.ibm.com/webapp/wsbroker/redirect?version=p

hil&product=was-nd-dist&topic=cw4d_about

– http://www14.software.ibm.com/webapp/wsbroker/redirect?version=p

hil&product=was-nd-dist&topic=tw4d_setup

34

ハイブリッド・モバイル・ アプリケーション

Source: Wells Fargo Securities, January 23, 2012

“Fostering the People: The Shift to Engagement Apps”

2020年までには、世界で100億台

のモバイル機器が使用される

急成長するモバイル市場 インターネットに接続するデバイスの増加

台数

(百

万)

600

1200

0 2010 2011 2012 2013 2014 2015

WW ノートPC

WW タブレット

WW スマートフォン

WW PC

モバイルは新しいＩＴの波

インターネットによってWebやeビジネス

の波が押し寄せたように、現在、モバイルによる新しい波が起きている

→全業種においてビジネス・チャンスに

35

モバイル・アプリケーションの特徴と課題

様々な機種が混在

セキュリティ

開発生産性

アプリケーション管理

企業システムとの連携

スマートフォンやタブレット等多様なデバイス

- 異なる画面サイズ

- デバイス固有機能の提供

様々なOSが混在

iOS, Android, Blackberry, Windows Phone 等の複数プラットフォームが存在

• OSごとに異なる開発言語が必要

• デバイス固有機能に対するスキル

• デバイス毎にテストする負荷が高い

• 暗号化や認証の仕組み

• デバイスの紛失や盗難への対応

• アプリケーションが最新かどうか

• リモートからアプリケーションを無効化できるか

• エンタープライズ・システムとの統合

• マルチチャネル対応アプリケーションの構築

特徴 課題

端末管理

• デバイスの監視、管理

• デバイス上のソフトウェア更新、データ配布

モバイル・エンタープライズ・アプリケーション・

プラットフォーム (MEAP)

ソリューション

モバイル端末管理 (MDM)

36

モバイルとHTML5

PC（特に業務系）ではまだ採用の敷居が高い – IEを標準ブラウザとしている企業が多数

– IE8以前では、HTML5のほとんどの機能に未対応

モバイルでは主要プラットフォームがHTML5 Ready – iPhone/iPad

–Android

–(Windows8)

ただし、モバイル特有の事情を考慮する必要あり –対応している仕様の偏り

–Video/Audioの非互換など

37

多くの端末がサポートしているHTML5仕様

Application Cache

Web Storage

Geolocation

Canvas

Viewport definition

XMLHttpRequest 2.0

38

http://mobilehtml5.org/

Application Cache Webアプリをオフラインで利用するために、リソースをクライアント側でキャッシュするためのしくみ

–HTML,CSS,JavaScript,イメージなどURL指定できる全リソースが対象

–フォールバックやイベント処理が可能

キャッシュ対象リソースはマニフェストファイルで指定 –更新チェックはマニフェストファイルのみを確認

39

http://dev.w3.org/html5/spec/offline.html

CACHE MANIFEST

# This is comment line

clock.html

clock.css

clock.js

<!DOCTYPE HTML>

<html manifest="clock.manifest">

<head>

<title>Clock</title>

<script src="clock.js"></script>

<link rel="stylesheet" href="clock.css">

</head>

<body>

<p>The time is: <output id="clock"></output></p>

</body>

</html>

[clock.manifest]

[clock.html]

Web Storage クライアント側でデータを永続化しておくためのストレージ

–シンプルなKey-Valueストレージ

–手軽に利用できる

–複雑・大量データを扱うのには不向き

Cookieとの違い –JavaScriptオブジェクトがそのまま格納できる

–自動的にサーバーに送信されない

–(仕様上は)サイズ制限がない

–有効期限という概念がない

用途によって2種類を使い分ける – localStorage

• Webサイトのオリジンごとに分離

• 永続期間は無制限

–sessionStorage • window(ブラウジングコンテキスト)と同じスコープを持ち、オリジンごとに分離

• windowが閉じられると削除される

40

http://dev.w3.org/html5/webstorage/

Geolocation API デバイスの位置情報を取得するためのAPI

–緯度、経度、標高およびその精度

–デバイスの進行方向／進行速度

–位置情報取得時刻

シンプルなAPI –現在位置を一度だけ取得

• getCurrentPosition(successCallback, errorCallback, options)

–位置情報を継続して監視 • watchPosition(successCallback, errorCallback, options)

• clearWatch(watchId)

–具体的な取得方法などは隠蔽されている(高レベルAPI)

41

http://dev.w3.org/geo/api/spec-source.html

function showMap(position) {

// (position.coords.latitude, position.coords.longitude)を中心にMap表示

}

// One-shot position request.

navigator.geolocation.getCurrentPosition(showMap);

Canvas

ブラウザ上でグラフィックスを自由に描画できる領域 –四角形、直線、円弧、ベジェ曲線

–画像

–グラデーション、影付け、重ね合わせ

–テキスト

–グラフィックス変形

–ピクセル操作による描画

描画コンテキストの保存／復元

画像データをURLとして取得 – toDataURL()によりbase64文字列に変換可能

42

http://dev.w3.org/html5/spec/the-canvas-element.html

Canvasサンプル

43

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Hello Canvas</title>

<script>//<![CDATA[

function draw() {

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.fillRect(20, 20, 80, 40); // 四角(塗りつぶしあり)

ctx.strokeRect(120, 20, 80, 40); // 四角(塗りつぶしなし)

ctx.arc(70, 150, 60, 0, Math.PI*2, false); // 円

var message = '文字も書けます';

ctx.font = "bold 18px 'MS P Gothic'";

var textWidth = ctx.measureText(message).width;

ctx.fillStyle = "black";

ctx.textBaseline = "top";

ctx.fillText(message, 0, 220);

ctx.stroke();

}

//]]></script>

</head>

<body onload="draw()">

<canvas id="canvas" width="300" height="300"></canvas>

</body>

</html>

Canvas: 参考情報

HTML5 Canvasのサンプル –http://sites.google.com/site/gorogoronyan/Home/html5-iroiro/javascript

–実用的な使い方のヒントとして

Ball Pool –http://mrdoob.com/projects/chromeexperiments/ball_pool/

–モバイルでも動作するインタラクティブな使い方のサンプルとして

44

Viewport definition

ブラウザの表示サイズを制御 –コンテンツの横幅／縦幅

–初期倍率／最少倍率／最大倍率

–拡大縮小の可否

<meta name=“viewport” …>で指定 –コンテンツ内容に合わせてviewportを最適化

• http://www.mdn.co.jp/di/articles/2434/?page=8

viewport以外のiOS系固有のチューニングについてはこちら – iPhone 3G DevWiki -画面表示関係

• http://wiki.sohaya.com/index.php/%E7%94%BB%E9%9D%A2%E8%A1%A8%E7%A

4%BA%E9%96%A2%E4%BF%82

45

http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-element

XMLHttpRequest 2.0 クロスオリジンのリクエスト送信が可能に

–送信先サーバーの許可が必要 • Cross-Origin Resource Sharingに準拠

• http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html

文字列以外も送信可能に –Blob / Document / FormData

進捗状況がモニター可能に –uploadプロパティが追加された

–ダウンロード・アップロードの両方で進捗状況に応じたイベントが捕捉可能 • 進捗があるたびにonpregressイベントハンドラがコールバックされる

46

http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-element

var xhrObj = new XMLHttpRequest();

xhrObj.upload.addEventListener("progress", progressFunction, false);

function progressFunction(evt){

var percentageDiv = document.getElementById("percentageCalc");

percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

}

リモート・デバッグ: Weinre

モバイルWeb開発(特に実機デバッグ)を効率的に行うためのツール

リモートから、FirebugやGoogle Dev Toolのような操作が可能 –DOM/CSSインスペクタとオンザフライ編集

–JavaScriptコンソール

–ブレークポイント設定とステップ実行

PhoneGap(改めApache Cordova)のサブプロジェクト –ドキュメントとバイナリ

• http://people.apache.org/~pmuellr/weinre/

–ソース • https://github.com/apache/incubator-cordova-weinre

使い方など –スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！

• http://css-eblog.com/tools/weinre.html

–スマートフォンサイト構築のためのリモートデバッグ環境その1 – weinre • http://blog.alt-scape.com/archives/423

47

Weinre実行例: コンソール

48

Weinre実行例: デバッグ

49

モバイル・アプリケーションのトレンド

ネイティブ・ アプリケーション

Web アプリケーション

ハイブリッド・ アプリケーション

コードの大部分を再利用可能なWeb技術を使って開発。 デバイス依存の機能はネイティブ・コードで補完。

デバイス固有の機能を活用できるが、開発・テストの負荷が高い。

オープンな技術(HTML5, CSS, JavaScript)を使用。 開発生産性やポータビリティは高いが、デバイス特有の機能は使えない。

ユーザビリティ

セキュリティ

クロス・プラットフォーム 開発コスト

50

ハイブリッド・アプリケーションとは

Application

Stores File System

(on mobile

device)

Native Container

HTML, CSS, JavaScript

Mobile Operating System

Webアプリケーションと

ネイティブ・アプリケーションの組み合わせ 基本的にはHTML5、CSS、 JavaScriptを使用するが、

デバイスの機能にもアクセス可能

App StoreやAndroid Marketなどから アプリケーションをダウンロードし、モバイル・デバイス上にアプリケーションを保管する。

51

PhoneGap (Apache Cordova)

ハイブリッド・アプリケーションのプラットフォーム –http://phonegap.com/

–http://incubator.apache.org/cordova/

Webブラウザ＋プラグイン –Webコード(HTML/CSS/JS)はWebブラウザコンポーネント上で実行

• トランスコードソリューションではなく、実行時もWebコードのまま

–WebコードからJavaScript経由でネィティブコードを実行可能(プラグイン)

–標準プラグインが豊富に存在し、独自拡張も可能

歴史的経緯 –PhoneGapを開発していたNitobiがAdobeに買収される

–PhoneGapのコアをApache Callbackプロジェクトに移管

–Apache CallbackプロジェクトがApache Cordovaプロジェクトに改名 • Apache CordovaにはAdobe以外にもIBM/RIM/Microsoftなどが協力

• PhoneGapはApache Cordovaの1ディストリビューションという位置づけに

• http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-

name/

52

PhoneGap: 幅広いプラットフォームに対応

53

PhoneGap: プラグインの利用例

ネットワークの回線種別を判定

54 http://docs.phonegap.com/en/1.6.1/cordova_connection_connection.md.html#Connection

IBM Worklight : モバイル・アプリケーション・プラットフォーム

Build once. Run anywhere. – Android, iOS, Blackberry, Microsoft – スマートフォンとタブレット

標準ベース、エンタープライズ対応 – PhoneGap, Java – アプリケーション配布 – エンタープライズとの統合 – セキュリティー – スケーラビリティ – 管理

Build it today. Change it tomorrow. – アプリケーション・ライフサイクル管理 – 保守とアップデート

HTML5、ハイブリッド、ネイティブ・アプリケーションのための、オープンかつ先進的なモバイル・アプリケーション・プラットフォーム

55

Worklight Server 統合通知、ランタイム・スキニング、バージョン管理、セキュリティー、統合、配布

Worklight Console リアルタイム分析、および、モバイル・アプリケーションとインフラ管理のためのWebベースのコンソール

Worklight Studio コード再利用の最大化とデバイス毎の最適化を実現する包括的で拡張性に優れた開発環境

Worklight のコンポーネント

Worklight Runtime Components ネイティブのデバイス機能と連携可能な豊富なライブラリーとクライアントAPI ←

Tomcat or WAS 上で稼働

Eclipse ベース

56

サポートする環境(Environment)

様々なタイプのプラットフォームに対応

モバイル – iPhone – iPad – Android – BlackBerry – Windows Phone – Mobile web app

デスクトップ – Windows 7 and Vista(ガジェット) – Adobe AIR – Mac OS Dashboard

Web アプリケーション – Facebook – iGoogle – Embedded web page

57

Build and Deploy

すべてのコードをビルドしてデプロイ

ネィティブSDK用のプロジェクトを生成

アプリケーション(Webコード)をWorklight Serverへデプロイ 58

基本部分はcommonに、 差分を個別環境のフォルダへ

Worklightのアプリケーション・タイプ ネィティブアプリ

プラットフォーム固有。固有のスキルを必要とし、開発にはコストと時間がかかる。高いレベルのユーザーエクスペリエンスを実現できる。

Native

Application

Device APIs

1001010101011101001010010010101110100100110101010101001001001011110010011001010101001010101010010101010101010101010111111000001010101010101001001010101010101000111101010001111010100111010101111100101101111010001011001110

ハイブリッド(Mixed)

ユーザー固有のニーズを実現するネィティブコードでWebを拡張し、ユーザーエクスペリエンスを最大化。

Worklight Runtime

Web

Native

Device APIs

<!DOCTYPE html PUBLIC created 2003-12 </p> </body> </html>

10010101010111010010101010101010010010010111100100110010

ハイブリッド(Web)

ソースコードはWebとWorklightのライブラリを含み、ネィティブのシェル内で実行される。

Worklight Runtime

Web Code <!DOCTYPE html

PUBLIC

<html>

<! - - created 2003-12-1

<head><title>XYZ</title

</head>

</body>

</html>

Device APIs

Webアプリ

HTML5, JavaScript ,

CSS3で記述。高速かつローコストで開発可能だが、機能性はネィティブよりも劣る。

Mobile Browser

Web Code <!DOCTYPE html

PUBLIC

<html>

<! - - created 2003-12-

12 - -

<head><title>XYZ</title

>

</head>

<body>

</p>

</body>

</html>

59

ハイブリッド(Mixed)の利用イメージ

ハイブリッド(Mixed)

ユーザー固有のニーズを実現するネィティブコードでWebを拡張し、ユーザーエクスペリエンスを最大化。

Worklight Runtime

Web Native

Device APIs

<!DOCTYPE html PUBLIC created 2003-12 </p> </body> </html>

10010101010111010010101010101010010010010111100100110010

プラグイン(ドライバ) による拡張

Webとネィティブの 画面混在 Web

画面

ネィティブ

画面

Web 画面

共通のユーザーセッションとデータ

Web 画面

Worklight Client Runtime

Worklight Client Runtime

Worklight 標準

プラグイン

ユーザー 独自

プラグイン

ネィティブ機能の 呼出し

60

主要なライブラリ/ツールとの統合

Worklightは主要なHTML5ライブラリ/ツールと統合可能:

61

Worklightのランタイム・アーキテクチャ

Worklight Server

Authentication

JSON Translation

Server-side Application Code

Adapter Library

Client-side App Resources

Direct Update

Mobile Web Apps

Unified Push Notifications

Sta

ts A

gg

reg

ation

Device Runtime

Ap

plic

atio

n C

od

e

• Cross Platform Technology

• Security and Authentication

• Back-end Data Integration

• Post-deployment control and Diagnostics

62

サーバーサイド・アダプター

• Worklight Platformはアダプターを利用して様々なバックエンド・システムへの接続を実現

• アダプターの用途 •情報の取得

•アクション(ロジック)実行

• 標準提供アダプター •SQL Adapter

•HTTP Adapter (RESTとSOAPに対応)

Query

Update data

Data/Result

as JSON

Invoke adapter

procedure

SQL WS

Worklight

HTTP

Response

1

2 3

4

63

柔軟なプッシュ通知のフレームワーク

同じアプケーションへの複数ユーザーログイン

同じバックエンドからの複数イベント・ソース

イベント・ソースとアプリケーション間での Many-to-many リレーションシップ

1つのアプリケーションで、複数のデバイスに対応

iOSとAndroidに共通のAPI

64

モバイル・アプリケーションのセキュリティ

アプリケーション・セキュリティ 堅固な認証・認可

企業のセキュリティ・プロセスの効率化

デバイス上のデータの保護

認証統合

フレームワーク

データ保護 レルム

デバイスidを併用

組織のサンドボックスとしてのシェル

コードの 難読化

SSLによる

サーバーの検証

実証済みのプラット

フォーム・セキュリティ

Jailbreak and malware detection

App authenticity

testing

Encrypted offline cache

Offline authentication

Secure challenge-

response on startup

Encrypted offline cache

Offline authentication

Secure challenge-

response on startup

Encrypted offline cache

Offline authentication

Jailbreak and malware detection

Secure challenge-

response on startup

Encrypted offline cache

Offline authentication

アプリケーションの真正

性テスト

Jailbreakおよ

びマルウェアの検出

起動時の セキュア

チャレンジ-レスポンス

暗号化されたオフラインキャッシュ

オフライン 認証

強制セキュリティ・アップデート

リモート 無効化

直接 アップデート

65

Direct Update: Worklight Serverから更新版を直接配布

Worklight

Server

Worklight Runtime

パッケージされたリソース

1 ダウンロード

4 Webリソースを更新

App Store

Web

リソース

キャッシュされたリソース

1.初期のオフライン実行を可能にするため、Webリソースがア

プリケーション内にパッケージングされている

2.Webリソースはアプリケーショ

ンのキャッシュストレージに転送される

3.アプリケーションは更新を確認する • 起動時

• フォアグラウンドになった時

4.必要であればWebリソースをダウンロードして更新する

2 転送

3 更新を確認

66

PhoneGap(Cordova)とIBM Worklightの比較

PhoneGap Worklight

ネィティブ連携 PhoneGapプラグイン PhoneGapプラグイン

+Worklightプラグイン

PhoneGapスキル 必要 通常は不要

プラグイン開発時のみ必要

クロスプラットフォーム対応 プラットフォーム毎にソースを管理

アプリ単位で複数プラットフォームのソース管理を共通化

セキュリティ機能 なし

改ざん・覗き見防止

暗号化ストレージ

認証フレームワーク

バックエンド連携 XMLHttpRequestなどを利用して独自に開発

アダプター

アプリケーション更新 再インストール Direct Update

(Webコードの部分のみ更新)

監視・分析 なし 管理コンソール

商用サポート なし あり 67

まとめ

Javaアプリケーションサーバー最新動向 –Java EE 6は実用フェーズに

–APサーバー選択はケースバイケースで • そろそろTomcat以外も見ておいた方がよいです

ハイブリッド・モバイル・アプリケーション –モバイル・デバイスは急成長中のプラットフォーム

–HTML5の活用はモバイルWebから

–モバイル・アプリケーションの課題解決にはハイブリッド・アプリケーションによるアプローチが有効

68