HTML5 の動画をクロスプラットフォームで再生するハイブリッド・アプリケーションを IBM Worklight を使用して開発する

PC のみならずモバイル・デバイスからもアプリケーションにアクセスできるようにしようと企業が急ぐ中で、HTML5 のクロスプラットフォーム機能を活用したモバイル・ハイブリッド・アプリケーションが使用されています。残念なことに、クロスプラットフォームで動画を再生しようとする場合、特に Android オペレーティング・システム上で実行されるハイブリッド・アプリケーションの場合には、HTML5 をサポートするだけでは十分ではありません。この記事では、この問題に対して IBM Worklight のモバイル・ハイブリッド機能を利用して対処し、動画を再生できるようにする方法について説明します。この記事の内容は IBM WebSphere 開発者向け技術ジャーナルから引用したものです。

Bill Paris, Software Developer, IBM

Bill Paris はIBM Software Services for WebSphere グループでコンサルティングを行うソフトウェア開発者です。彼の専門は通信業界向けのモバイル・アプリケーションやサーバー・ミドルウェアの開発です。



Sreeni Pamidala , Senior Certified IT Architect , IBM

Sreeni Pamidala はシニア認定 IT アーキテクトであり、現在は AIM Software グループ ISSW Mobile Services のリード・アキテクトとして働いています。彼はこの業務の中で、あらゆる業界にわたる顧客とともに、エンタープライズ・インフラストラクチャーおよびミドルウェアと統合される IBM Mobile Foundation 技術を使用したモバイル・ソリューションの開発と実現に大半の時間を費やしています。この業務に就く前は ComSector クライアントの業務に 15 年間従事し、何件かのプロジェクトを指揮して成功に導きました。これらのプロジェクトはクラス最高のソリューションを目指して IBM のクロスブランド・スタック・ソフトウェア製品やハードウェア製品、サードパーティー・ベンダーの統合製品を使用し、モバイル・サービス・プロバイダーやレガシー電話サービス・プロバイダーのためのネットワーク・ベースでキャリヤ・グレードのモバイル・ソリューションという複雑な Web を開発、デプロイするものでした。



Raghunandan K Harithas, Consulting IT Specialist, IBM

Raghunandan Harithas は米メリーランド州の IBM Annapolis オフィスに勤務する IT スペシャリストです。彼は WebSphere 製品スタックを使用したいくつかの通信プロジェクトで技術リーダーを努めてきました。現在は IBM Worklight ベースの IBM Mobile Foundation ソフトウェアを使用したモバイル・アプリケーションの開発に従事しています。



2012年 9月 20日

はじめに

モバイル・ハイブリッド・アプリケーションはネイティブ・オペレーティング・システムの機能を Web 技術と組み合わせています。通常、ハイブリッド・アプリケーションは組み込みの Web ブラウザーにコンテンツを表示しますが、これはクロスプラットフォーム機能を強化する手法です。なぜなら、コードの大半を HTML5 技術を使用して作成できる一方、必要に応じてデバイス・ネイティブの機能を利用できるからです。IBM Worklight はクロスプラットフォームのハイブリッド・アプリケーションを開発するためのモバイル・アプリケーション・プラットフォームであり、Web ビューとネイティブ・ビューの間をナビゲートするためのメカニズムを備え、ハイブリッド・アプリケーションを「一度作成すればどこでも実行可能」という目標に大幅に近づける開発環境とランタイム環境を提供します。

アプリケーションの中での動画再生は、クロスプラットフォームの機能を実現するのが困難になる可能性のある領域の 1 つです。HTML5 の video タグはクロスプラットフォームの動画再生のためのものですが、このタグの機能に対するサポートの状況はブラウザーによって異なるため、このタグの目標は実現されていません。

この記事では、クロスプラットフォームの HTML5 ハイブリッド・アプリケーションにおける動画再生機能の開発に焦点を当てるとともに、ある特定のプラットフォームで HTML5 の動画機能をサポートできないという問題に対処する上で、IBM Worklight 開発プラットフォームがどのように役立つかを説明します。


動画を再生する上での難題

動画を扱う開発には複雑な技術や用語を理解する必要があるため、コンピューターやモバイル・デバイスでの動画再生は長い間、開発者にとっての難題となってきました。詳細な説明に入る前に、少し用語を整理しておきましょう。

動画は 1 つの動画 (または画像) ストリームと 1 つ以上の音声ストリームの組み合わせであり、これらがすべて 1 つのアーカイブに詰め込まれています。動画に関する一般的な用語を以下に挙げます。

  • 動画コンテナー」は音声ファイルと動画ファイルを 1 つのファイルのアーカイブにまとめたものです。動画コンテナーのフォーマットには膨大な種類があり、よく使用されるフォーマットには、MPEG4、Flash Video、Ogg、WebM、Audio Video Interleave などがあります。コンテナーのフォーマットはファイル拡張子で表現されます (例えば mp4、flv、ogv、webm、avi など)。
  • ビデオ・コーデック」は動画ストリームをエンコード、デコード (圧縮、解凍) するためのソフトウェア・アルゴリズムを指しています。動画プレーヤーが動画ストリームをデコードして再生するためには、どのコーデックが使用されたのかを動画プレーヤーが認識する必要があります
  • オーディオ・コーデックはビデオ・コーデックと似ていますが、音声ストリームに関するものです。

HTML5 への移行

動画再生の難しさの主な原因は、PC やモバイル・デバイスでの動画再生メカニズムが進化することによるものです。HTML5 仕様が登場する前は、ブラウザーで動画を再生するための標準的な方法はなく、ほとんどの場合、動画はサードパーティーのプラグインで再生されていました (RealPlayer、Apple QuickTime、Adobe Flash など)。HTML5 の動画再生機能が登場した 1 つの理由は、YouTube での動画再生が人気となり、その結果 PC 上での動画再生は Flash がデファクト・スタンダードとなっているにもかかわらず、動画再生をプラグインに依存していることに対応するためでした。Apple が iOS デバイスでの動画再生に HTML5 を採用して Flash を拒否したことにより、Flash を使用したクロスドメインの動画再生は不可能となり、開発者達は HTML5 を使用して動画を再生する Web サイトの構築にフォーカスし始めました。

HTML5 では、Web ページに動画コンテンツを直接埋め込むための新しい video タグが追加され、プラグインを使用せずに動画を再生することができます。リスト 1 は video タグを使用してブラウザー・ウィンドウで mp4 の動画を再生する例を示しています。この video タグは、幅と高さ (ブラウザー・ウィンドウに埋め込まれた動画プレーヤーへの割り当てスペース) を指定し、ユーザー・アクションなしで動画の再生が開始されるように自動再生を有効にし、オンスクリーンの動画コントロール (再生、一時停止、音量) を有効にしています。そして、最も重要なこととして、再生対象の動画のソース・アーカイブを指定しています。

リスト 1. HTML5 の video タグによって Web ページに動画を埋め込む
<video width="320px" height="480px" autoplay="autoplay" controls="controls">
	<source src="dir/video.mp4" type="video/mp4"/>
</video>

HTML5 で video タグが採用されたことは心強いことです。HTML5 のドラフト仕様が作成された当初、HTML5 の動画をサポートするブラウザーは Safari のみでした。しかし現在では、最新のブラウザーはすべて HTML5 の動画をサポートしています。HTML5 仕様はまだドラフト段階であり、完成は 2014年の見込みですが、Web での動画ストリーミングは Flash プラグインから HTML5 標準への急速な移行の真っ只中にあります。

HTML5 の動画再生では不十分な場合

残念ながら、ブラウザーで HTML5 の video タグをサポートしても、それは必要なことの一部にすぎません。動画再生には単なるタグのサポート以上のことが必要だからです。どのブラウザーでも Web ページが正しく表示されるためには、動画コンテナー・フォーマットのサポート、ビデオ・コーデックやオーディオ・コーデックのサポート、ストリーミング・プロトコルのサポートのすべてが重要です。例えば、H.264 や WebM などのコーデックに対するブラウザー側のサポートはバラバラであり、一部のブラウザーは一方をサポートしても他方をサポートしない、という状況でした。HTML5 はコーデックを規定していませんが、それは標準化グループが 1 つの標準に合意できていないためです。これはつまり、HTML5 の動画を使用することを検討している Web 開発者はブラウザーの互換性の問題を考慮する必要がある、ということです。

もう 1 つの難題はモバイル・デバイスでの動画再生です。モバイル・デバイスには非常にさまざまな種類があり、画面の解像度やプロセッサーも異なるからです。例えば、モバイル市場には Android のバリエーションが何百種類もあり、そのすべてが動画と音声の再生を必要としています。


試行錯誤、苦難、そして得られたソリューション

私達の SmarterTVApp プロジェクトでは動画再生機能を備えたクロスプラットフォームのモバイル・ハイブリッド・アプリケーションを開発する必要があり、動画再生に HTML5 の video タグを使用することは至極当然のことのように思えました。私達は Eclipse を使用して開発環境を整えました。この開発環境を強化する要素として、Worklight Studio 4.2 Eclipse プラグイン、Red Hat Linux 上で Worklight Server を実行するサーバー・ハードウェア、MPEG4 動画ファイルを追加した動画ストレージ・サーバーがあります。またテスト用として Android 4.0 Ice Cream Sandwich と Apple iOS 5 を実行する何台ものモバイル・デバイスを使用し、これらのデバイスは HLS (HTTP Level Streaming) プロトコルで動画をストリーミングする動画ストレージ・サーバーから動画を受信します。

3 層のハイブリッド・アプリケーション・モデル

Worklight によって開発されるアプリケーションはクロスプラットフォームの 3 層アプリケーション・モデルを使用します (図 1)。一番下の層はネイティブ・オペレーティング・システムの機能で構成され、これらの機能はネイティブ・オペレーティング・システムの API ライブラリーによって提供されます。私達の SmarterTVApp の場合、アプリケーションに組み込まれた Android または iOS オペレーティング・システムの API 呼び出しポイントで、この層が構成されています。

図 1. 3 層アプリケーション・モデル
3 層アプリケーション・モデル

中間の層は Worklight が提供する Worklight コンポーネントと Apache Cordova コンポーネントで構成され、これらのコンポーネントによって HTML5 アプリケーションのコードとデバイスのネイティブ・オペレーティング・システムの機能とが接続されます。Apache Cordova (以前は PhoneGap と呼ばれていました) はハイブリッド・アプリケーションを開発するためのオープンソースのモバイル開発フレームワークであり、JavaScript を使用してネイティブ・オペレーティング・システムの機能にアクセスできるようになっています。この層の Worklight コンポーネントはクライアント・サイドの機能を提供します (デバイスのスキニング、ストレージの暗号化、プッシュ通知、サーバー統合フレームワークなど)。

一番上の層はアプリケーションのコンポーネントで構成されます。SmarterTVApp の場合、この層はカスタム・アプリケーションの JavaScript コードや HTML コード、CSS コードで構成され、さらに、このアプリケーションをサポートするためにインポートしたコンポーネント、IBM Dojo Toolkit リリース 1.7.2、さらには表示やビュー間遷移のためにアプリケーションで使用される IBM issw.mobile アプリケーション・フレームワークで構成されています。

開発環境

Eclipse の中で Worklight プロジェクトが作成されると、Worklight Studio プラグインが最初のディレクトリー構造を作成し、そこにアプリケーションやランタイム環境のための一連のフォルダーが追加されます。SmarterTVApp のディレクトリー構造を図 2 に示します。common フォルダーには、すべてのデバイスのデプロイメント環境に共通の JavaScript ファイルや HTML ファイル、CSS ファイルがあります。一方、android フォルダー、ipad フォルダー、mobilewebapp フォルダーには、デバイス専用に最適化されたファイルがあります。

common フォルダーの下に、アプリケーションで使用する Dojo ファイルを格納するための Dojo 関係のフォルダー (dijit、dojo、dojox) も追加し、また issw.mobile アプリケーション・フレームワークを構成するファイルのための issw フォルダーも追加しました。

図 2. Worklight プロジェクトのフォルダー
Worklight プロジェクトのフォルダー

開発テスト環境を簡単に説明したものが図 3 です。Android デバイス (Android device) と iOS デバイス (iOS device) は Worklight サーバー (Worklight Server) 上で実行されるサーバー・アプリケーションとやり取りし、そのアプリケーションによって動画ストレージ・サーバー (Video Storage Server) からデバイスへの動画ストリーミングが開始されます。

図 3. 開発テスト環境
開発テスト環境

HTML5 の video タグを使用した最初の実装

私達の最初の設計では HTML5 の video タグを使用してクロスプラットフォームの動画再生を実現したため、リスト 2 のように 2 つの source 要素で構成される video 要素を実装しました。ブラウザーは複数の source 要素を検出すると、最初に認識したフォーマットを使用します。そのため私達は、MP4 フォーマットと OGV フォーマットで十分にクロスブラウザー機能を実現できると思っていました。

リスト 2. HTML5 の video タグで動画を複数のフォーマットで規定する
<video width="320px" height="480px" autoplay="autoplay" controls="controls">
	<source src="dir/video.mp4" type="video/mp4/">
	<source src="dir/video.webm" type="video/webm/">
</video>

HTML5 の video タグを使用すれば簡単にクロスプラットフォームの動画再生を実装できる、と高い期待を抱いていたのですが、その期待は最初のプロトタイプのテストを開始したとたんに打ち砕かれました。少し調整するだけで、このアプリケーションを iOS デバイス上で実行して動画を再生することに成功しましたが、Android 上で実行した場合には、そのような幸運は起こりませんでした。そこで、開発における試行錯誤が始まりました。

ソリューションを求めての作業

ここで考慮すべき重要なことは、Cordova によって実装されている Android 用モバイル・ハイブリッド・アプリケーションは、Web ページを表示するために Android の WebView クラスを使用しているということです。Cordova ベースのハイブリッド・アプリケーションは WebView を使用してアプリケーションの HTML5 コンテンツを表示します。私達はテストをする中で、私達の HTML5 動画コンテンツは Android のブラウザーでは正常に再生されるものの、その HTML5 動画コンテンツをハイブリッド・アプリケーションの WebView オブジェクト経由で表示する場合には再生されない、ということに気付きました。

当然ですが、私達は Web で情報を検索し、簡単な 1 つの検索を行った結果、私達が恐れていたことを確認しました。つまりさまざまな技術フォーラムには、私達と同じように WebView を使用して HTML5 の動画を Android 4.0 で再生する場合の問題に直面し、苦労している開発者達からの投稿があふれていたのです。私達はそれらを読む中で得た助言を基に、さまざまな動画フォーマットを試したり、video タグのパラメーターを変更したり、video 要素とその属性を作成するためのさまざまな動的側面 (JavaScript) や静的側面 (HTML) を変更してみましたが、どれも成功しませんでした。

そこで、別の方法に切り換えることにしました。Android 上で実行するアプリケーションをビルドする場合には、HTML5 の video タグを使用したクロスプラットフォームの動画再生をあきらめ、代わりに Android ネイティブの動画再生機能を使用することにしました。iOS 上で実行するアプリケーションをビルドする場合には、アプリケーションは最初の計画どおり HTML5 の動画再生を使用します。

Worklight を使用して開発する 1 つのメリットは、ネイティブ・ページをハイブリッド・アプリケーションに組み込むための単純なメカニズムが Worklight によって提供されることです。Worklight のハイブリッド・コーディング機能により、アプリケーションは Web ページとネイティブ・ページとの間をナビゲートすることができ、また Web ページとネイティブ・ページとの間でデータを共有することができます。この機能を利用すると、私達のハイブリッド・アプリケーションは、動画を再生する際には Android の Java API セットを使用して動画を再生するネイティブ・ページへと切り換わり、動画の再生が完了すると、iOS と Android の両方に共通の JavaScript コードへと戻るようにすることができます。

これを理解した上で、私達はネイティブ・ページの実装に取りかかりました。このページでは、VideoView オブジェクトを使用して動画を再生する Android Activity が作成されます。そしてついに私達は成功し、Android 上でアプリケーションを実行する場合にも動画を再生できるようになりました。


ソリューションの詳細

このソリューションは Android のネイティブ Java コードと JavaScript コードの両方で構成されています。JavaScript コードは Worklight の機能を利用して Android の Java コードを呼び出し、動画を再生します。

Android のネイティブ Java コードで動画を再生する

Java による動画機能を実装するために、私達はまず、Android 専用のプロジェクト構造を作成し、その中に新しい StreamingVideoActivity.java クラスを作成しました (図 4)。Worklight のプロジェクト構造では、デバイス専用に最適化したファイルが別々のフォルダーに分離されるため、私達のソリューションに必要な Android のネイティブ・コードを簡単に追加することができます。

図 4. Android のネイティブ Java コードが含まれている Worklight プロジェクトのフォルダー
Android のネイティブ Java コードが含まれている Worklight プロジェクトのフォルダー

StreamingVideoActivity は Android Activity の拡張機能として実装され、VideoView クラスと MediaController クラスを使用して動画を再生します。この実装の概要をリスト 3 に示します。完全なソリューションとしては、動画終了イベントと完了イベントを処理するコールバックを実装し、Worklight の Web ベースの画面ビューに制御を戻せるようにする必要があります。

リスト 3. StreamingVideoActivity.java の実装
public class StreamingVideoActivity extends Activity {
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    	
	super.onCreate(savedInstanceState);
	Log.d("StreamingVideoActivity", "Entering onCreate");			

	// Extract the URL from the Intent
	String url = getIntent().getStringExtra("urlParam");
		
	Log.d("StreamingVideoActivity", "About to play URL: url");			
	VideoView videoView = new VideoView(this);
	videoView.setVideoPath(url);
		
	MediaController ctlr = new MediaController(this);
	ctlr.setMediaPlayer(videoView);
	videoView.setMediaController(ctlr);
       
	setContentView(videoView);
	videoView.requestFocus();
	Log.d("StreamingVideoActivity", "Leaving onCreate");			
    }
}

Web アプリケーションから Android のコードを呼び出す

Android に関する作業が完了すると、他に必要な作業としては、Worklight の WL.NativePage.show の API 関数を使用して Web ベースの Activity から新しいネイティブの Android Activity に切り換える JavaScript 関数を作成することのみです。この機能を実装する JavaScript ファイル SmarterTVApp.js は、Android 専用のプロジェクト構造の中に配置されます (図 5)。

図 5. Worklight のプロジェクトのフォルダーに含まれている Android 専用の JavaScript ファイル
Worklight のプロジェクトのフォルダーに含まれている Android 専用の JavaScript ファイル

SmarterTVApp.js から抜粋したリスト 4 のコードは、Worklight の WL.NativePage.show 関数を呼び出して StreamingVideoActivity という Activity を実行する openNativePage 関数の実装です。

リスト 4. SmarterTVApp.js のコードの抜粋
/**
 * Plays the specified video in an Android native page
 * @param url  The video URL
 */
function openNativePage (url) {
	WL.Logger.debug("Switching to SmarterTVApp.StreamingVideoActivity to play " +url);

	// Create an object to hold the URL.  The field name, urlParam, must match
	// the name used in the native Android Java code for extracting the URL
	var params = {urlParam : url};

	// Show the Android native page
	WL.NativePage.show('com.SmarterTVApp.StreamingVideoActivity', 
		backFromNativePage, params);
}

/**
 * Invoked as a call-back on return from the Android native page
 * @param data
 */
function backFromNativePage(data) {
	WL.Logger.debug("Back from StreamingVideoActivity");
}

最後に、ハイブリッド・アプリケーションが Android デバイス上で実行されているという条件の場合には、openNativePage を呼び出す必要があり、この場合にも Worklight Studio 開発環境が役立ちました。デバイスのタイプを検出し、それに応じた処理をするために JavaScript の if-then-else ロジックを追加したりしなくても、Worklight のプロジェクト構造はそうした処理を自動的に行ってくれます。私達のアプリケーションでは、動画の再生は StreamingView.js ファイルで実行されます。このファイルの 2 つのバージョンを作成し (図 6)、1 つのファイルは HTML5 の動画を再生する common フォルダーに格納し、もう 1 つのファイルは Worklight の openNativePage 関数を呼び出して Android のネイティブ機能で動画を再生する android フォルダーに格納することにより、Worklight Studio はランタイム環境に合ったファイルを自動的にアプリケーションに含めてくれます。

図 6. 動画のストリーミングを 2 つ実装する
Figure 6. Dual implementations of video streaming

クリックして大きなイメージを見る

図 6. 動画のストリーミングを 2 つ実装する

Figure 6. Dual implementations of video streaming

まとめ

このプロジェクトから、私達はクロスプラットフォームの動画再生は実現が難しいこと、そしてこの問題の解決にはデバイスのネイティブ機能を使用する必要があることを学びました。ネイティブ機能と Web ベースの機能とを組み合わせるための Worklight の機能を使用すると、アプリケーションの開発を単純化することができます。


謝辞

技術的な協力と指導を通じ、このプロジェクトを成功に導いてくださった私達の同僚、Anton Aleksandrov、Raanan Avidor、Karl Bishop、Tom Thacher の各氏に感謝いたします。

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=WebSphere, Mobile development
ArticleID=835264
ArticleTitle=HTML5 の動画をクロスプラットフォームで再生するハイブリッド・アプリケーションを IBM Worklight を使用して開発する
publish-date=09202012