2015年04月02日

Tizenアプリ開発事始め (2)

昨日(04/01)から日吉の街は若者達で溢れかえっています。昨日、慶応大学の入学式があったようです。クラスやクラブの仲間同士で親睦会をやっているのでしょう。街中の喫茶店、カフェ、レストラン、ファミレスはどこも新入生らしい若者で一杯で、他の客はいつも以上に入りづらい雰囲気が漂っています。リクルート・スーツの新社会人もそうですが、大学の新入生を見分けるのはすごく簡単です。私服に慣れていない様子で一目で判ってしまいます。特に地方から上京してきたらしい女子学生は、私服がぜんぜん様になっていないので一発でそれだと判ります(いま三くらいアダルティな服装が似合っておらず、私服の着こなしに慣れていないのが丸分かりです)。私は大学へは進学しなかったので当事者としての経験はありませんが、これが学生街特有の春の雰囲気というものなのですね。彼らを観ていると、若さへの羨望が湧き上がってきて複雑な気持ちになります。人生の黄昏時を迎えている私にとっては眩しすぎる光景です。

さて、前記事の続きを書きます。Tizen Developer Guideの掲載されているチュートリアルを読みながら、Tizen(Tizen Mobile)のNative ApplicationモデルのHello Worldアプリを作成してEmulatorで実行できることを確認するのがゴールです。

■ Native Applicationモデル・アプリの作成


最初にやるべきことは、Native Applicationモデルのプロジェクトの作成です。

Tizen IDEの[File] > [New] > [Project]メニューを選択すると、下のようなウィンドウが開きます。
SCShot_150402_0003-Creating_HelloWorld_NativeApp-TizenIDE-525x500.png
このウィンドウの[Tizen] > [Tizen Native Project]という項目を選択して、[Next > ]ボタンを押すと、さらに下のような[New Tizen Native Project]ウィンドウが開きます。
SCShot_150402_0008-Creating_HelloWorld_NativeApp-TizenIDE-910x759
チュートリアルに従って、このウィンドウでは[Template] > [MOBILE-2.3] → [UI Application] > [Basic UI Application]という項目を選択し、[Project name]エディットボックスにプロジェクト名を入力した上で、[Finish]ボタンを押しました。この操作によって、新しいNative Applicationモデルのプロジェクトが作成されます。

作成されたプロジェクトは、Workbenchウィンドウの[Project Explorler]ビュー内にエントリとして追加されます。
SCShot_150402_0010-Creating_HelloWorld_NativeApp-TizenIDE-1024x742
プロジェクトを作成できたので、さっそくこれをビルドしてみました(上のスクリーンショットは、プロジェクトをビルドした後のものです)。ビルドのやり方はWeb Applicationと同じです。

■ EmulatorによるNative Applicationの実行


Native Applicationモデルのプロジェクトが作成できたので、Tizen SDKのEmulatorを使ってこれを実行してみしまた。Emulatorの仮想マシンでプロジェクトを実行する手順は、Web Applicationと同じなので省略します(前記事を参照のこと)。
SCShot_150402_0011-Creating_HelloWorld_NativeApp-TizenIDE-434x452.png
SCShot_150402_0012-Creating_HelloWorld_NativeApp-TizenIDE-434x452.png

■ Native Application Hello Worldチュートリアル


以上でNative Applicationモデル・アプリの作成とEmulatorによる実行は終わりですが、「Creating Your First Tizen Application」チュートリアルには、プロジェクトに変更を加えてEmulatorで実行するまでの手順が書かれています。続きの作業として、このチュートリアルの内容を最後までやってみました。

Tizen IDEの[Project Explorler]内のプロジェクトの構成ファイルからsrc/helloworldnativeapp.c(このソースファイルの名前はプロジェクト名に連動して決まるようです。つまりプロジェクト名によってファイル名が変わります)をダブルクリックすると、下のような[Editor]ビューが開いて、その中にhelloworldnativeapp.cの内容が表示されます。
SCShot_150402_0013-Creating_HelloWorld_NativeApp-TizenIDE-1024x742
helloworldnativeapp.cにはC/C++で書かれたアプリの処理コードが含まれています。

チュートリアルにはNative Applicationプログラムの基本原則とTizen IDEのコード入力支援機能についての概要説明が書かれており、それに続いて、helloworldnativeapp.cに対する改造版サンプル・コードが掲載されています。[Editor]ビュー内のコードを編集して、このサンプル・コードをhelloworldnativeapp.cへ追加してみました。
#include <tizen.h>
#include "helloworldnativeapp.h"

#if 0
typedef struct appdata {
Evas_Object *win;
Evas_Object *conform;
Evas_Object *label;
} appdata_s;
#endif
#if 1
typedef struct appdata
{
// All graphical objects here are pointers to the value of the type Evas_Object.
Evas_Object *win;
Evas_Object *conformant;
Evas_Object *naviframe;
} appdata_s;
#endif

static void
win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
{
ui_app_exit();
}

#if 0
static void
win_back_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
/* Let window go to hide state. */
elm_win_lower(ad->win);
}
#endif
#if 1
static void
clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
{
elm_exit();
}
#endif

#if 0
static void
create_base_gui(appdata_s *ad)
{
/* Window */
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);

if (elm_win_wm_rotation_supported_get(ad->win)) {
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}

evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

/* Conformant */
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);

/* Label*/
ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "Hello EFL");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, ad->label);
evas_object_show(ad->label);

/* Show window after base gui is set up */
evas_object_show(ad->win);
}
#endif

#if 1
static void
create_gui(appdata_s *ad)
{
// Create the window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_conformant_set(ad->win, EINA_TRUE);

// Advertise which rotations are supported by the application; the
// device_orientation callback is used to do the actual rotation when
// the system detects the device's orientation has changed
if (elm_win_wm_rotation_supported_get(ad->win)) {
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}

// Add a callback on the "delete,request" event; it is emitted when
// the system closes the window
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);

// Alternatively, elm_win_autodel_set() can be used to close
// the window (not the application) automatically
// with the Back button, for example
// elm_win_autodel_set(ad->win, EINA_TRUE);

// Create the conformant
ad->conformant = elm_conformant_add(ad->win);

// Set the conformant use as much horizontal and vertical space as
// possible, that is, expand in both directions
evas_object_size_hint_weight_set(ad->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

// Set the conformant as the resize object for the window:
// the window and the conformant grow together
// in proportion to each other
elm_win_resize_object_add(ad->win, ad->conformant);

// Show the conformant since all widgets are hidden by default
evas_object_show(ad->conformant);

// Create the naviframe
ad->naviframe = elm_naviframe_add(ad->conformant);
elm_object_content_set(ad->conformant, ad->naviframe);

// Show the box
evas_object_show(ad->conformant);

// Create the box
Evas_Object *box = elm_box_add(ad->naviframe);

// Set the box vertical
elm_box_horizontal_set(box, EINA_FALSE);

// The box expands when its contents need more space
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

// The box fills the available space
evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);

// Add the box in the naviframe container
elm_naviframe_item_push(ad->naviframe, "Hello World", NULL, NULL, box, NULL);

// Show the box
evas_object_show(box);

// Create the label
Evas_Object *label = elm_label_add(box);
// The label expands when its contents need more space
evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
// The box fills the available space on the horizontal axis and is
// centered on the vertical axis (placed at 0.5 vertically, that is, in the
// middle)
evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);

// Set the text for the label and set formatting through the HTML tags:
// - "Hello World!" centered on the first line
// - skip a line
// - Add a longer text that does not fit on a single line but wraps at
// the word boundaries
elm_object_text_set(label,
"<align=center>Hello World!</align>< br >"
"< br >"
"<wrap = word>Clicking on the button below closes the application.</wrap>");

// Add the label at the end of the box
elm_box_pack_end(box, label);

// Show the label
evas_object_show(label);

// Create the button
Evas_Object *button = elm_button_add(box);

// The box expands when its contents need more space
evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

// The button fills the available space on the horizontal axis and is
// placed at the bottom of the vertical axis (1 is the end of the axis,
// the coordinates start at (0, 0) on the top-left corner
evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);

// Set the text for the button
elm_object_text_set(button, "Close!");

// Add a callback on the button for the "clicked" event; implementation of
// the callback is below
evas_object_smart_callback_add(button, "clicked", clicked_cb, NULL);

// Add the widget at the end of the box; since the axis starts in the top left
// corner and the box is vertical, the end of the box is below the label
elm_box_pack_end(box, button);

// Show the button
evas_object_show(button);

// Show window after the GUI is set up
evas_object_show(ad->win);
}
#endif

static bool
app_create(void *data)
{
/* Hook to take necessary actions before main event loop starts
Initialize UI resources and application's data
If this function returns true, the main loop of application starts
If this function returns false, the application is terminated */
appdata_s *ad = data;

#if 0
create_base_gui(ad);
#endif
#if 1
create_gui(ad);
#endif
return true;
}

static void
app_control(app_control_h app_control, void *data)
{
/* Handle the launch request. */
}

static void
app_pause(void *data)
{
/* Take necessary actions when application becomes invisible. */
}

static void
app_resume(void *data)
{
/* Take necessary actions when application becomes visible. */
}

static void
app_terminate(void *data)
{
/* Release all resources. */
}

static void
ui_app_lang_changed(app_event_info_h event_info, void *user_data)
{
/*APP_EVENT_LANGUAGE_CHANGED*/
char *locale = NULL;
system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &locale);
elm_language_set(locale);
free(locale);
return;
}

static void
ui_app_orient_changed(app_event_info_h event_info, void *user_data)
{
/*APP_EVENT_DEVICE_ORIENTATION_CHANGED*/
return;
}

static void
ui_app_region_changed(app_event_info_h event_info, void *user_data)
{
/*APP_EVENT_REGION_FORMAT_CHANGED*/
}

static void
ui_app_low_battery(app_event_info_h event_info, void *user_data)
{
/*APP_EVENT_LOW_BATTERY*/
}

static void
ui_app_low_memory(app_event_info_h event_info, void *user_data)
{
/*APP_EVENT_LOW_MEMORY*/
}

int
main(int argc, char *argv[])
{
appdata_s ad = {0,};
int ret = 0;

ui_app_lifecycle_callback_s event_callback = {0,};
app_event_handler_h handlers[5] = {NULL, };

event_callback.create = app_create;
event_callback.terminate = app_terminate;
event_callback.pause = app_pause;
event_callback.resume = app_resume;
event_callback.app_control = app_control;

ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);

ret = ui_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "app_main() is failed. err = %d", ret);
}

return ret;
}

※「#if 0 〜 #endif」で挟まれた行はオリジナルのコードを無効化した部分、「#if 1 〜 #endif」で挟まれた行が追加したコードです。また、160行目と161行目に“< br >”という文字列が存在しますが、これは“<br>”が正しいです。“<br>”だとHTMLの改行タグと解釈されてしまうため、わざと“< br >”に変えています。上のソースコードをコピペして利用する場合は、この2箇所を修正してください。

上のhelloworldnativeapp.cの処理コードの詳細はまだ理解できていません。これからTizenのアプリ開発を続けていけば、自然に理解できるようになるでしょう。

上記の操作が終わった後、プロジェクトを再ビルドした上で、Emulator Managerの仮想マシンでプロジェクトを再度実行してみました。すると、アプリの起動画面は下のような表示に変わりました。
SCShot_150402_0014-Creating_HelloWorld_NativeApp-TizenIDE-434x452.png
チュートリアルに掲載されているスクリーンショットと若干の相違がありますが、ほぼ同じアプリの起動画面が表示されたので、これでゴール到達とします。

Web ApplicationとNative Applicationを比較すると、前者のプログラミング言語はHTML5とJavaScriptなのに対して後者はC/C++になります。プログラミングの手軽さではやはりWeb Applicationの方に軍配を上げざるをえません。モバイル・アプリ開発ではフットワークの軽さはすごく重要だと思います。C/C++だと単機能な軽いアプリでも最低丸一日かかりますが、HTML5 + JavaScriptだと数時間で出来てしまうじゃないかという気がします(もちろんOS側のフレームワークやAPIに精通していることは条件になりますが)。TizenやFirefox OSでHTML5 + JavaScriptでアプリが書けることは、iOSやAndroidと比較して大きな利点だと思います(iOSやAndroidにもHTML5 + JavaScriptでアプリ開発ができるフレームワークやツールは存在します)。HTML5 + JavaScriptの有利さを知って、益々Tizenへの興味が膨らんできました。HTML5とJavaScriptを本格的に勉強してみたかったので、TizenやFirefox OSのアプリ開発は良い素材になりそうです。組込み、モバイル、Webプログラミングが融合した研究テーマであることに気づかされました。

以上で、TizenのHello Worldアプリの作成とEmlator/Web Simulatorによる動作確認は終了です。記事を書きながら作業を進めたので2日かかってしまいましたが、全体でも1〜2時間でできる作業だと思います。03/27の記事と合わせて、Tizenへの取り組みを始めるプログラマ達の役に立てば幸いです。

私がTizenの研究を始めた理由は、組込みLinuxとモバイル・アプリ開発の両方に取り組めるテーマだからです。JavaのフレームワークでLinuxを覆い隠しているAndroidよりは、システム側をいじくり回す機会が多いんじゃないかと思っています(私がAndroidを嫌っている大きな理由がこれです。個人研究のプログラミングでJavaは使いたくないです)。Yocto Linuxの記事へのアクセス数があまりに少ないので、もう少しメジャーな研究テーマへシフトしたかったことも理由の一つです(Tizenはまだまだメジャーではないですが、Yocto Linuxよりは検索する人が多いんじゃないかと思います)。Yocto Linuxのネタはまだたくさん有るのですが、こちらはサブのテーマに格下げして、これからはTizenの方をメインの研究テーマとして取り組んでいきます。他にも挑戦してみたい研究テーマもいくつかあるのですが、当面はTizenメインでやっていきます。

やはり実機ターゲットが無いと意欲が湧いてこないので、近いうちにTizenが動くターゲットを一台入手しようと目論んでいます。現在はまだ情報収集中ですが、Androidスマホ(Samsung製限定?)かx86 Atom Bay Trail シリーズを搭載したタブレット辺りでTizenを動かすことに挑戦してみようと計画しています。Firefox OSより情報は少ないですが、ググるといくつかの情報がヒットするので、すでに色々やっている人はいるようです。この計画の実作業を始めたら、その内容も記事に書きたいと思っています。

【参考ページ】

  1. [Tizen]ネイティブアプリを作成しエミュレータ上で実行してみる | GCG研究所
  2. GClue blog: Tizen のNative アプリを実行してみる
posted by とみやん at 09:59| Comment(0) | TrackBack(0) | モバイルOS研究 > Tizen

2015年04月01日

Tizenアプリ開発事始め (1)

今週に入って横浜はさらに暖かくなってきました。こちらでは近所の桜が7分咲き位で、もう少しで満開になりそうです。今週末と来週末は各地は花見客で賑わうことでしょう。去年の丁度同じ時期に横浜の蒔田という所に滞在していましたが、そのときも大岡川岸の桜が満開でした。今シーズンの桜前線は例年通りのペースで移動しているようですね。私は日吉から移動する準備で忙しくて、とても花見どころではありません。ただ、蒔田と合わせて10ヶ月も滞在していた横浜を離れるのは名残惜しいので、思い出づくりのために一人寂しく何処かで花見でもしようかなぁという気持ちもあります。気が向いたら、近場の桜の名所にでも出かけようかと思っています。

さて、前記事にTizen SDKをMacへインストールした際の作業記録を書きましたが、これに引き続いて、Tizen SDKを使ってHello Worldアプリを作成してみました。Tizenには2種類のアプリケーション・モデルが在ります。Web ApplicationとNative Applicationがそれで、前者はHTML5とJavaScriptでプログラムを書き、後者はC/C++で書きます。さらに、この2つを組み合わせたHybrid Applicationを作成することも可能なので、正確にはTizenには3種類のアプリケーション・モデルが存在することになります。

この辺の情報は、Tizen Developersサイト上のDeveloper Guideというオンライン・ドキュメントに詳しく書かれています。

 Tizen Web Application Model | Tizen Developers
 Tizen Native Application Model | Tizen Developers

両方のモデルのHello Worldアプリを作成する手順が書かれたチュートリアルも、同サイトに掲載されています。

 Creating Your First Tizen Application | Tizen Developers

Tizen(Tizen Mobile)アプリ開発の事始めとして、上記のチュートリアルを読みながら、両方のモデルのHello Worldアプリを作成してみました。また、Tizen SDKにはEmulatorとWeb Simulatorという2種類のエミュレータ・ツールが含まれており、これらを使ってアプリの実行やデバッグを行うこともできます。チュートリアルに従って作成したアプリを、これらのエミュレータ・ツールを使って実行することも試してみました。本記事にその作業の記録を書いていきます。

なお、Tizen SDKのEmulatorはQEMU上で動作し、Web SimulatorはGoogle Chrome上で動作します。QEMUはTizen SDKに含まれていますが、Google Chromeは含まれていません。Web Simulatorを利用する場合は、あらかじめGoogle Chromeをインストールしておく必要があります。また、Web ApplicationモデルのアプリはEmulatorとWeb Simulatorの両方で実行できますが、Native ApplicationはEmulatorでしか実行することはできません。

■ 開発者証明書の作成と登録


Tizen SDKのEmulatorとWeb Simulatorの使うためには前提条件があります。あらかじめAuthor Certificate(開発者証明書)というものを作成して、それをTizen IDEに登録しておかなくてはなりません。開発者証明書が登録されていない状態では、EmulatorやWeb Simulatorの仮想マシンへアプリをダウンロードできないようになっています(iOSでは実機の場合だけ、Androidではエミュレータと実機の両方で証明書が必要でした。TizenにはAndroidと同様のアプリ認証の仕組みが組み込まれているのでしょう)。以下に、Tizen IDEで開発者証明書を作成して登録する手順を記します。

  1. Tizen IDEの[Tizen IDE] > [Preferences]メニューを選択すると、[Preferences]ウィンドウが開ます。

  2. [Preferences]ウィンドウの左側のリストから[Tizen SDK] > [Security Profiles]という項目を選択すると、右側が下のように表示に変わります。
    SCShot_150401_0059-Registering_Auther_Certificate-TizenIDE-728x566
    このウィンドウ内で、セキュリティ・プロファイルと開発者証明書の作成と登録を行うことができます。

  3. 最初に[Profiles]エリアの[Add]ボタンを押します。すると、下のようなウィンドウが開いて、新しいセキュリティ・プロファイルの名前を問われます。
    SCShot_150401_0060-Registering_Auther_Certificate-TizenIDE-472x155.png
    適当な名前を入力して[OK]ボタンを押せば、セキュリティ・プロファイルが作成されます。
    SCShot_150401_0061-Registering_Auther_Certificate-TizenIDE-728x566

  4. 続いて、開発者証明書を作成するために[Author Certificates]エリアの[Generate]ボタンを押します。すると、下のようなウィンドウが開きます。
    SCShot_150401_0064-Registering_Auther_Certificate-TizenIDE-400x507.png
    このウィンドウの各エディットボックスに適当な値を入力して(「*」印は必須、それ以外は任意の項目です。名無しの開発者というのは嫌だったので、任意の項目のうち[Name]だけは入力しました)、[OK]ボタンを押すと、開発者証明書が作成されて下のようなウィンドウが表示されます。
    SCShot_150401_0065-Registering_Auther_Certificate-TizenIDE-516x142.png
    このウィンドウの[Yes]ボタンを押すと、作成された開発者証明書がセキュリティ・プロファイルの中へ登録されます。
    SCShot_150401_0066-Registering_Auther_Certificate-TizenIDE-728x566

上記の手順によって作成した開発者証明書は、/Users/LOGINUSER/tizen-sdk-data/keystore/authorというディレクトリに格納されます。他のPCでもTizen IDEを使っている場合は、このファイルをコピーして利用できます。

■ Web Applicationモデル・アプリの作成


開発者証明書の準備が整ったので、いよいよWeb Applicationモデルのアプリケーション・プロジェクトを作成しました。

Tizen IDEの[File] > [New] > [Project]というメニューを選択すると、下のようなウィンドウが開きます。
SCShot_150401_0003-Creating_HelloWorld_WebApp-TizenIDE-525x500.png
このウィンドウの[Tizen] > [Tizen Web Project]という項目を選択して、[Next > ]ボタンを押すと、さらに下のような[New Tizen Web Project]ウィンドウが開きます。
SCShot_150401_0006-Creating_HelloWorld_WebApp-TizenIDE-917x750
チュートリアルに従って、このウィンドウでは[Template] > [MOBILE-2.3] → [Basic] > [Basic Application]という項目を選択し、[Project name]エディットボックスにプロジェクト名を入力した上で、[Finish]ボタンを押しました。この操作によって、新しいWeb Applicationモデルのプロジェクトが作成されます。

作成されたプロジェクトは、Workbenchウィンドウの[Project Explorler]ビュー内にエントリとして追加されます。
SCShot_150401_0009-Creating_HelloWorld_WebApp-TizenIDE-1024x742
プロジェクトを作成できたので、さっそくこれをビルドしてみました(上のスクリーンショットは、プロジェクトをビルドした後のものです)。Tizen IDEの[Project] > [Build Project]メニューを選択するか、あるいは[Project Explorler]ビュー内のエントリのコンテキストメニュー(右クリックすると開くメニュー)から[Build Project]という項目を選択することでもプロジェクトをビルドできます。

■ EmulatorによるWeb Applicationの実行


Web Applicationモデルのプロジェクトが作成できたので、Tizen SDKのEmulatorを使ってこれを実行してみしまた。

Emulatorを使ってプロジェクトを実行するには、Emulator Managerというツールを使ってあらかじめ仮想マシンを作成しておかなくてはなりません。Workbenchウィンドウの[Connection Manager]ビュー上に存在する[Emulator Manager]アイコンをクリックすると、Tizen IDEからEmulator Managerを起動することができます。
SCShot_150401_0022-Running_HelloWorld_WebApp-TizenIDE-1024x742
下がEmulator Managerのウィンドウです。初めてEmulator Managerを起動すると、仮想マシンはまだ存在しません。
SCShot_150401_0023-Running_HelloWorld_WebApp-TizenIDE-840x504
仮想マシンを作成するには、[Create New]というアイコンをクリックします。この操作によって、Emulator Managerのウィンドウは下のような表示に変わります。
SCShot_150401_0024-Running_HelloWorld_WebApp-TizenIDE-840x504
右側に表示されているのが新しい仮想マシンのプロパティです。必要に応じてこれらのプロパティを変更した上で、[Confirm]というボタンを押せば、仮想マシンが作成されます。
SCShot_150401_0029-Running_HelloWorld_WebApp-TizenIDE-840x504
新しい仮想マシンを作成したら、それを起動しましょう。左側の仮想マシンのアイコン内の[Launch emulator]というボタンをクリックすると、その仮想マシンを起動できます(仮想マシンの起動には少し時間がかかります。私のPCはHaswell Core i5 1.4GHz CPU、8GBメモリのそこそこ高性能な奴ですが、それでもTizenが完全な起動状態になるのに60秒程かかります)。
SCShot_150401_0079-Running_HelloWorld_WebApp-TizenIDE-434x452.png
Emulator Managerで仮想マシンを起動すると、Tizen IDE側の[Connection Manager]ビューにもそのエントリが追加されます。
SCShot_150401_0078-Running_HelloWorld_WebApp-TizenIDE-1024x742
この状態でTizen IDE側の対象プロジェクトを選択し、Workbenchウィンドウのツールバー上に存在する[Run]ボタンを押す(あるいは、[Run] > [Run As] > [Tizen Web Application]というメニューを選択するか、[Project Explorler]ビューの対象プロジェクトのコンテキストメニューから[Run As] > [Tizen Web Application]という項目を選択すると)、そのプロジェクトが仮想マシンへダウンロードされて起動状態になります。
SCShot_150401_0082-Running_HelloWorld_WebApp-TizenIDE-434x452.png
SCShot_150401_0083-Running_HelloWorld_WebApp-TizenIDE-434x452.png
ちなみに、Tizen IDEに開発者証明書を登録していない状態でプロジェクトを実行しようとすると、下のようなエラー・メッセージが表示されます。
SCShot_150401_0035-Registering_Auther_Certificate-TizenIDE-534x133.png
Emulatorの仮想マシンを色々と操作してみましたが、全体的に動作が遅くてレスポンスも悪いです。Android SDKのエミュレータと同じような感じです。デバッグには使えると思いますが、アプリの評価テストは実機ターゲットでないと厳しそうです。


■ Web Application Hello Worldチュートリアル


以上でWeb Applicationモデル・アプリの作成とEmulatorによる実行は終わりですが、「Creating Your First Tizen Application」チュートリアルには、プロジェクトに変更を加えてEmulatorで実行するまでの手順が書かれています。続きの作業として、このチュートリアルの内容を最後までやってみました。

Tizen IDEの[Project Explorler]内のプロジェクトの構成ファイルからindex.htmlを選択して、そのコンテキストメニューの[Open] > [Open With] > [Web Page Editor]という項目を実行します。すると、下のような[Editor]ビューが開いて、その中にindex.htmlの内容が表示されます。
SCShot_150401_0091-Running_HelloWorld_WebApp-TizenIDE-1024x742
index.htmlにはアプリの起動画面のコードが含まれています。Web Applicationモデルのアプリでは、このように画面の定義コードはHTML5形式で書かれています。

ここで、[Editor]ビュー内の「Application Name」という文字列を「HelloWorld」に書き換えました。
SCShot_150401_0092-Running_HelloWorld_WebApp-TizenIDE-1024x742
上記の操作が終わった後、プロジェクトを再ビルドした上で、Emulator Managerの仮想マシンでプロジェクトを再度実行してみました。すると、プロジェクトへ加えた変更内容が仮想マシンにも反映されていました。
SCShot_150401_0097-Running_HelloWorld_WebApp-TizenIDE-434x452.png
いままでブログ記事をたくさん書いてきたので、私もHTMLにはそこそこ慣れています。WebプログラマもHTMLの書式に慣れている人が多いでしょう。アプリの画面定義をHTMLで書けることは大きなメリットだと言えます。

■ Web SimulatorによるWeb Applicationの実行


EmulatorによってWeb Applicationモデルのプロジェクトを実行できることが確認できたので、続いてWeb Simulatorの方も試してみました。

こちらはEmulatorより簡単で、Tizen IDEの対象プロジェクトを選択している状態で[Run] > [Run As] > [Tizen Web Simulator Application]というメニューを選択すると(あるいは、[Project Explorler]ビューの対象プロジェクトのコンテキストメニューから[Run As] > [Tizen Web Simulator Application]という項目を選択すると)、Google Chrome のウィンドウとしてWeb Simulatorが起動してプロジェクトが実行されます。
SCShot_150401_0098-Running_HelloWorld_WebApp-TizenIDE-820x792

Native Applicationモデルのアプリを作成して、それをEmulatorで実行するところまで書くつもりだったのですが、またしても疲れてしまいました。いつも床についている時間をとっくに過ぎているので(最近は遅くても夜9時には寝ています)、続きは次の記事に書きます。

【参考ページ】

  1. Tizen Tutorial : Setting up Active Security Profile
  2. Tizenの開発環境構築とHello Worldまで | Vitalify Inc. staffblog
  3. GClue blog: Tizen向けWebアプリの作成
  4. Tizen SDK 2.0 Alpha エミュレーターの使い方 (1) | OPTPiX Labs Blog
posted by とみやん at 13:09| Comment(0) | TrackBack(0) | モバイルOS研究 > Tizen

2015年03月27日

Tizenの研究を始めました

Yocto Projectの記事の中でTizenに興味を持っていることを書きましたが、いよいよTizenの研究を本格的に始めることにしました。

Tizenと言えばSamsung社を連想する人が多いようですが、TizenプロジェクトはLinux Foundation(Linuxオペレーティングシステムの普及をサポートする非営利のコンソーシアム)内に存在しており、Samsungは同プロジェクトの参加企業の一つでしかありません。また、Tizenの産業的役割を主導するために組織されたTizen Association という非営利団体が在り、こちらはアメリカのニュージャージー州に本部を置いています。TizenはAndroidに対抗するモバイルOSとして大きな注目を浴びた時期がありましたが、いまは主力分野をウェアラブル・デバイス、Smart TV、IVI(In-Vehicle Infotainment)などにシフトしています。モバイル・デバイスの向けのSDKやディストリビューションも開発が継続されていますが、TizenのUIはiOSやAndroidのようにまだ洗練されていません。

2015年1月にインド向けのSamsung Z1というスマホが発売されましたが(これの前にロシア向けのSamsung Zという機種が発表されましたが、発売延期になっています)、これがTizenを搭載した初めてのスマホです。これに対して、Firefox OSの方はすでに10機種以上が発売されています(そのほとんどは新興国向けの機種のようですが)。AndroidのライバルとなりそうなモバイルOSとしては、Firefox OSの方が一歩も二歩もリードしていると言って良いでしょう。Google検索のヒット数を比較すると、TizenよりFirefox OSの方が10倍も多いです。日本国内に限っても、NTTドコモが計画していたTizen搭載スマホの発売は延期された(Tizenスマホの開発は進めていたようですが、市場動向から大きな販売数は見込めないと判断したようです)のに対して、auからはFx0 LGL25というFirefox OS搭載スマホが2014年12月に発売されています(ただし、Fx0 LGL25の評判はあまり良くないようです)。これほどの差が開いてしまうと、もはやTizen勢が挽回するは難しいでしょう。

この2つのモバイルOSが登場した当初は私もFirefox OSを方に注目していたのですが、いまはどちらかと言うとTizenに対する興味の方が大きくなっています。Firefox OSへの興味も失った訳ではありませんが、Firefox OSがAndroidの資産をかなり流用していることが判ったことで、Firefox OSに対する熱は一気に冷めました。いまも進歩が続いているAndroidの成果を流用できるので現実的な選択であることは理解できますが、「それでは、Androidとどうやって差別化するのか」という疑問が生まれます。私は天邪鬼でマイナーなものにほど惹かれる傾向を持っていて、いまはFirefox OSよりTizenへの関心の方が強いです。

私がTizenに大きな興味を持つようになったもう一つの理由は、Tizenプロジェクトを主導している企業にIntelが含まれていることです。Yocto Projectもそうですが、Intelが主導者的な役割をしているプロジェクトを研究すると技術的に得られるものが大きいです。ただし、Intelが主導者的な役割をしているのはスマホ/タブレット向けのTizen(Tizen Mobile)ではなく、Tizen IVIの方のようです。前者を主導しているのはSamsungのようです。Samsung社はGalaxyシリーズのアクセサリという位置づけでGearシリーズという製品を販売していますが、その中の腕時計型製品にもTizenが搭載されています。こちらはTizen Wearableという名前で、そのSDK(Tizen SDK for Wearable)もTizen Developersのサイトで配布されています(ただし、Samsung Gearシリーズの評判はあまり芳しくないようです)。Intelが主導者的な役割をしているので完全に消滅してしまうことはないと思いますが、Tizenの将来は決して明るいとは言えないでしょう。

■ Tizen SDKのインストール


Tizen研究着手の第一段として、まずはTizen SDKをインストールしてみましました。ウェアラブル・デバイスやIVI用のTizen SDKも配布されていますが、無印のTizen SDKはモバイル・デバイス用の開発環境です。私が一番興味を持っているのはTizen IVIなのですが、アプリの動作環境や開発手法は他のデバイス向けのSDKと大きな差はなんいじゃないかと想像しています。開発者向けのTizen DevelopersというサイトでTizen SDKのMac OS X版が配布されているので(Ubuntu, Windows, Mac OS X版があります)、Tizenの概要を知るために、これをメインPCのMacBook Airへインストールしてみました。

Tizen SDKは、Tizen Developersサイトの以下のベージで配布されています。

 Tizen SDK | Tizen Developers

Tizen SDKを使うにはいくつかの前提条件があります。前提条件に関する詳しい情報は以下のベージに掲載されています。

 Prerequisites for the Tizen SDK | Tizen Developers

PCのスベックとしては、デュアルコア2GHz以上のCPU、3GB以上のメモリとなっていますが、ググって得た情報によると、CPUはCore i5クラス以上、メモリは4GB以上でないと、SDKに含まれているエミュレータが実用的な性能では動かないらしいです。今回Tizen SDKをインストールしたのはMacBook Air 11"(Early 2014)ですが、この条件を十分に満たしています。

Mac OS X版Tizen SDKのソフト環境の要件だけを記載すると、以下のような条件を満たしている必要があるようです。
  • Oracle版のJava 7以降がインストールされていること。
  • Command Line Toolsがインストールされていること。

Tizen SDKにはIDEが含まれていますが、これはEclipseをカスタマイズした物らしいです。EclipseはJavaベースのアプリケーションなので、Javaが必要になります。私の環境にはApple版のJava 6(JDK 1.6)はインストール済みでしたが、Oracle版のJavaはインストールしていませんでした。Tizen SDKのインストールを始める前に、OracleのサイトからJDK 1.7を入手して、Apple版JDK 1.6を残したままインストールしました(参考ページAにApple版とOracle版JDKの共存方法が掲載されていたので、このとおりにしました)。Command Line Toolsの方はXcode 5.1.1のインストール時に追加済みだったので、こちらの作業は必要ありませんでした。

下調べで得た情報によると、Tizen SDKのインストールは上記のベージで配布されている「Install Manager」という名前のインストーラを使って行うようです。このInstall ManagerによってTizen DevelopersのサイトからSDKイメージがダウンロードされるようですが、あらかじめダウンロードしておいたSDKイメージを使うこともできます。インターネット回線の速度に依存しますが、前者の方法だと最低でも数十分以上かかるみたいなので、私は後者の方法を選択しました。ちなみに、今回MacへインストールしたのはTizen 2.3 Rev2 SDK(本記事投稿時点の最新バージョン)です。

前提条件がすべて整っている状態になっていることを確認した後、さっそくTizen SDKのInstall Managerを起動してみました。
SCShot_150327_0003-Installing_Tizen_2.3_Rev2_SDK-MacOSX-452x256.png
Install Managerを起動すると、最初に下のようなウィンドウが表示されます。
SCShot_150327_0007-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
このままインスールを開始すると、SDKイメージはインターネット経由でダウンロードされるようです。ここでは、ローカルなSDKイメージを指定するために[Advanced]というリンクをクリックしました。すると、下のようなウィンドウが開きました。
SCShot_150327_0011-Installing_Tizen_2.3_Rev2_SDK-MacOSX-578x484.png
このウィンドウ内の[Package server]というのがインターネット経由でSDKイメージをダウンロードするオプションで、もう一方の[SDK image]がローカルなSDKイメージを使うオプションのようです。[SDK image]ラジオボタンを選択した上で、右側のフォルダ・アイコンをクリックするとファイル選択ダイアログが開いたので、あらかじめダウンロードしておいたTizen SDKのイメージファイルを指定しました。その上で[OK]ボタンを押すと、最初のウィンドウに戻りました。

SDKイメージの取得方法を選択した後、最初のウィンドウの[Install]アイコンをクリックして、Tizen SDKのインストール処理を開始しました。すると、下のようなウィンドウが表示されました。
SCShot_150327_0013-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
このウィンドウには2種類のインストール・プロファイルが表示されています。このままインストールを開始すると、[Mobile-2.3]というタイプのアプリを開発するための標準的なコンポーネントがインストールされるんだと思います。

インストールするコンポーネントを変更できるかどうかに興味があったので、ここでは[Custom]というボタンを押してみました。すると、ウィンドウは下のような表示に変わりました。
SCShot_150327_0014-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
どうやら、このウィンドウによってインストールするコンポーネントを個別に選択できるようです。下のウィンドウが[Typical]のコンポーネントの選択状態です。
SCShot_150327_0015-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
[Typical]のコンポーネントだけでも問題ないのかもしれませんが、ここでは、すべてのコンポーネントを選択状態にした上で、[Next]ボタンを押しました。
SCShot_150327_0016-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
すると、ライセンス条件への同意を求める下のようなウィンドウが表示されました。
SCShot_150327_0017-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
[I agree]ボタンを押すと、さらに下のようなウィンドウに変わりました。
SCShot_150327_0018-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
このウィンドウの[INSTALL]ボタンを押すると、Tizen SDKのインスール処理が開始されました。
SCShot_150327_0020-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
インストール処理が終了すると、最終的に下のようなウィンドウ表示になりました。
SCShot_150327_0021-Installing_Tizen_2.3_Rev2_SDK-MacOSX-630x490.png
これで、Tizen SDKのインストールは完了のようです。

インストール処理の開始直前のウィンドウに表示されているとおり、デフォルトでは、Tizen SDKは以下の2つのディレクトリへインストールされます(同ウィンドウ内の[Installation Location][Data Location]というリンクをクリックすることで、Tizen SDKのインストール先ディレクトリを変更するこも可能です)。
  • /Users/LOGINUSER/tizen-sdk
  • /Users/LOGINUSER/tizen-sdk-data

Tizen IDEの実行ファイルを探してみると、/Users/LOGINUSER/tizen-sdk/ide/IDE.appがそれのようです。
SCShot_150327_0022-Installing_Tizen_2.3_Rev2_SDK-MacOSX-910x474
インストール完了時のウィンドウに表示されている指示に従って、Macを再起動した後、このIDE.appという実行ファイルを起動してみました。すると、下のようなスプラッシュ・ウィンドウが表示されました。
SCShot_150327_0023-Installing_Tizen_2.3_Rev2_SDK_MacOSX-478x328.png
そして、しばらく待つと、下のようなウィンドウが開きました。Eclipseを使ったことのある人にはお馴染みのワーススペースの保存先ディレクトリを尋ねるウィンドウです。
SCShot_150327_0027-Installing_Tizen_2.3_Rev2_SDK_MacOSX-591x244.png
このウィンドウの[OK]ボタンを押すと、数秒後に下のようなウィンドウが開きました。
SCShot_150327_0030-Installing_Tizen_2.3_Rev2_SDK_MacOSX-1024x746
これが、Tizen IDEのWorkbenchウィンドウのようです。

本当はHello Worldアプリを作成して、それをエミュレータで実行するところまで書くつもりだったのですが、疲れてしまいました。Tizenのアプリ開発事始め的な内容は次の記事に書くことにします。

【2015/03/29 追記】

本記事にはTizen SDK 2.3 Rev2をMacBook Airへインストールした際の作業記録を書きましたが、Mac miniへもTizen SDKをインストールしてみました。こちらへインストールしたのは少し古いバージョンのTizen SDK 2.2.1 です。

この2つのバージョンのInstall MaganerとTizen IDEの画面にはだいぶん差がありました。参考のために、Tizen 2.2.1 SDKのMac OS X版をインストールした際のスクリーンショットを掲載しておきます。
SCShot_150329_0001-Installing_Tizen_2.2.1_SDK-MacOSX-628x478.png
SCShot_150329_0003-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0005-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0006-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0008-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0009-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0010-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0013-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
SCShot_150329_0014-Installing_Tizen_2.2.1_SDK-MacOSX-578x484.png
Tizen 2.2.1 SDKでは、Tizen IDEの実行ファイル名はTizenIDE.appになっていました。
SCShot_150329_0016-Installing_Tizen_2.2.1_SDK-MacOSX-888x558
初めてTizen SDK 2.2.1 のIDEを起動すると、スプラッシュ・ウィンドウとワークスペースの保存先を尋ねるウィンドウに続いて、下のようなWelcomeウィンドウが表示されました。
SCShot_150329_0020-Installing_Tizen_2.2.1_SDK-MacOSX-1024x768
このウィンドウの[Workbench]というアイコンをクリックすると、Tizen IDEのWorkbenchウィンドウが開きました(2回目以降の起動ではWelcomeウィンドウは表示せれず、直接Workbenchウィンドウが開きました)。
SCShot_150329_0022-Installing_Tizen_2.2.1_SDK-MacOSX-1024x768
Workbenchウィンドウの構成も、Tizen SDK 2.2.1と2.3 Rev2では少し違っています。

【参考ページ】

  1. MacにJava(JDK)をインストール - Qiita
  2. Macに「Tizen SDK」をインストール | Tech Cauquet
  3. GClue blog: Tizen SDKのインストール


posted by とみやん at 18:53| Comment(0) | TrackBack(0) | モバイルOS研究 > Tizen