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
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/116028842

この記事へのトラックバック