インテル® XDK
スマートフォン
タブレット
Android
HTML
iOS

インテルが提供するモバイル・アプリケーション開発向け HTML5 ツール

同カテゴリーの次の記事

インテル® IPP を使用して Android* NDK アプリケーションをビルドする

この記事は、インテル® デベロッパー・ゾーンに掲載されている「Intel® HTML5 Tools for developing mobile applications」 (http://software.intel.com/en-us/articles/intel-html5-tools-for-developing-mobile-applications) の日本語参考訳です。

ダウンロード

iOS ソースコード [ZIP 86KB] HTML5 ツールにより生成されたソースコード (https://software.intel.com/sites/default/files/managed/95/a0/html5-tools-result.zip) [ZIP 168KB]

HTML5 は新しい HTML 規格です。インテルはモバイル・アプリケーション開発向けの HTML5 ツールをリリースしました。この記事では、これらのツールを使って Apple* iOS* 加速度計アプリを HTML5 に移植する方法を紹介します。

注: インテル® XDK により自動生成されるコードには、この記事の付録 A に記載されているライセンスの下で提供されるコードが含まれています。アプリケーションで使用できるライブラリーについては、インテル® XDK の出力を参照してください。

インテル® HTML5 App Porter Tool

最初に、iOS 加速度計アプリの Objective-C* ソースコードを HTML5 に変換します。インテル® HTML5 App Porter Tool と、[iOS_source.zip] のソースコードを使用します (IOS_source サンプルコードは、付録 B のインテル・サンプル・ソース・コード使用許諾契約書の下で提供されています)。 インテル® HTML5 App Porter Tool は、http://software.intel.com/en-us/html5 (英語) の Tools タブからダウンロードできます (訳者注: ベータ版は 2013 年12 月で終了)。

ツールをインストールし、インテル® HTML5 App Porter Tool でサンプルコードを変換すると、HTML5 ソースコードが生成されます。

インテル® XDK

HTML5 コードは任意の IDE で開けます。インテルは、HTML5 アプリケーションの開発に役立つクロスプラットフォーム開発キット、インテル® XDK (http://html5dev-software.intel.com/) を提供しています。インテル® XDK を利用することで、単一のコードをさまざまなデバイスに展開することができます。このツールが特に優れているのは、コンピューターにインストールする必要がないことです。Google Chrome* の拡張としてインストールされます。別のブラウザーを使用している場合は、JavaScript* ファイルをダウンロードして実行してください。場合によっては、Java* をアップデートしなければならないことがあります。

インストール完了後、インテル® XDK を起動すると、次のようなメインウィンドウが表示されます。

既存のコードを移行する場合は、[Start new] ボタンをクリックします。

新しいプロジェクトを作成する場合は、次の画面のように、[Project Name] を入力し [Create your own from scratch] をオンにします。

[Use a blank project] をオンにします。その後、[Application Created Successfully!] メッセージが表示されます。

[Open project folder] をクリックします。

フォルダーからすべてのファイルを削除し、移行したファイルをコピーします。この時点では、まだ加速度計アプリの移行は終わっていません。インターフェイスを記述する必要があります。インテル® HTML5 App Porter ツールによって作成されたフックは削除できます。次のファイルを削除してください。

  • todo_api_application__uiaccelerometerdelegate.js
  • todo_api_application_uiacceleration.js
  • todo_api_application_uiaccelerometer.js
  • todo_api_js_c_global.js

インテル® XDK でプロジェクトを更新するには、Windows エミュレーターのエディターウィンドウを表示します。

index.html ファイルを開き、インクルード・ファイルから残りの行を削除します。

todo_api_application_appdelegate.js ファイルを開き、デリゲートのマップされていない“window” プロパティーを実装します。

application.AppDelegate.prototype.setWindow = function(arg1) {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: [*js.APT.View]
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.setWindow";
    //}
this._window = arg1;
};

application.AppDelegate.prototype.window = function() {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.window";
    //}
return this._window;
};

viewcontroller.js ファイルを開きます。iOS アプリの加速度計で使用されていた関数をすべて削除します。最終ファイルの内容は次のようになります。

APT.createNamespace("application");

document.addEventListener("appMobi.device.ready",onDeviceReady,false);

APT.ViewController = Class.$define("APT.ViewController");

application.ViewController = Class.$define("application.ViewController", APT.ViewController, {
    __init__: function() {
        this.$super();
    };>});

ViewController_View_774585933.css ファイルで、要素の色を黒から白へ変更して黒い背景色で読めるようにします。次のように、color: rgba(0,0,0,1); から color: rgba(256,256,256,1); へ変更します。

div#Label_590244915
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 320px;
	top: 0px;
	opacity: 1;
}
div#Label_781338720
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 29px;
	opacity: 1;
}
div#Label_463949782
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 51px;
	opacity: 1;
}
div#Label_817497855
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 74px;
	opacity: 1;
}
div#Label_705687206
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 29px;
	opacity: 1;
}
div#Label_782673145
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 51px;
	opacity: 1;
}
div#Label_1067317462
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 74px;
	opacity: 1;
}
div#View_774585933
{
	left: 0px;
	height: 548px;
	position: absolute;
	width: 320px;
	top: 20px;
	opacity: 1;
}

エミュレーター・ウィンドウを更新すると、次のように表示されます。

加速度計関数をコーディングするには、appMobi JavaScript Library を使用する必要があります。このライブラリーのドキュメントは https://appmobi.com/ にあります。インテル® XDK と一緒にインストールされます。

index.html ファイルを開き、スクリプトのリストに次の行を追加します。

ViewController_View_774585933.html ファイルを開きます。フィールド名をより論理的な名前に変更します。
変更前:

0


0


0

変更後:

0


0


0

ViewController_View_774585933.css ファイルのスタイル名でも同様の変更を行います。

viewcontroller.js ファイルを開き、加速度計に必要ないくつかの関数を記述します。

function suc(a) {
    document.getElementById('accel_x').innerHTML = a.x;
    document.getElementById('accel_y').innerHTML = a.y;
    document.getElementById('accel_z').innerHTML = a.z;
}

var watchAccel = function () {
    var opt = {};
    opt.frequency = 5;
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
}

function onDeviceReady() {
    watchAccel();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

プロジェクトを更新して、エミュレーター・ウィンドウで変更箇所を確認できます。

インテル® XDK で [ACCELEROMETER] パネルを使って加速度計の動作を確認できます。

アプリケーションの表示は以下のようになります。

このサンプル・アプリケーションの完全なソースコードは https://software.intel.com/en-us/file/html5-tools-resultzip から入手できます。

付録 A: インテル® XDK コード使用許諾契約書 (http://software.intel.com/en-us/articles/appendix-a-licenses-for-generated-code)

付録 B: インテル・サンプル・ソース・コード使用許諾契約書 (英語)

Intel、インテル、Intel ロゴは、アメリカ合衆国および / またはその他の国における Intel Corporation の商標です。
© 2013 Intel Corporation. 無断での引用、転載を禁じます。
* その他の社名、製品名などは、一般に各社の表示、商標または登録商標です。

添付ファイル サイズ
html5-tools-result.zip
https://software.intel.com/sites/default/files/managed/95/a0/html5-tools-result.zip		 168.74KB
ios-source.zip 86.05KB

コンパイラーの最適化に関する詳細は、最適化に関する注意事項を参照してください。

関連記事