Tizen Nativeアプリ開発 入門

みなさま初めまして。
ヘッドウォータースの竹上と申します。

iOS、Androidに変わる新しいスマホ向けOSの

Tizen Native アプリ開発

について綴っていきたいと思います。

開発言語はC++になります。
C++経験者にとってはうれしいですね。

世間一般ではまだまだなじみのないTizenなので、超入門です。

解説の前に。

解説する前に今回出てくる用語を軽く説明しますね。

Form(フォーム):画面用クラス
Control(コントロール):Formに配置するオブジェクトクラス

FormはAndroidでいうActivity
ControlはViewにあたります。

Tizen Native アプリ開発は、Android Nativeアプリ開発に非常に似ているので、
上のような感じでAndroidに置き換えて説明する事も多くなると思いますが、
できる限り、Androidのアプリ開発未経験者でも解るように説明していきたいと思います。

だらだら、説明するのもつまらないと思うので、
早速サンプルつくってみましょう。

環境

公式で提供されているTizenのIDEはEclipseですが、
Eclipseの使用方法とか、C++の基礎的なところは端折っていきます。

開発環境の構築方法は、色んなサイトで紹介されてると思うので、
そちらを参考にしてみてください。

公式サイトでも紹介されています。
[browser-shot width=”657″ url=”https://www.tizen.org/ja”] https://www.tizen.org/ja

サンプルアプリ作成

それでは、早速サンプルアプリを作ってみます。

まず、新規プロジェクトを作りましょう。
“File”->”New”->”Tizen Native Project”
Tizen 新規プロジェクト作成

クリックすると、
変わった感じのウィンドウが出てくると思います。

下記のように、TizenのIDEには既にサンプルやテンプレートがデフォルトで用意されています。
今回は、»Templete»の»Form-based Application»にあるテンプレートを使用します。
SceneManagerって言うのは今回は使わないので、»Without SceneManager»を選択して、プロジェクトを作成してください。

Tizen サンプル テンプレート

名前を入力してFinishをクリックすると、
プロジェクトが追加されます。(ここではHelloWorldとして作成)

試しにこのまま実行してみましょう。(エミュレータは起動しておいて下さい。)
実行時に署名ファイルがないと作成を求められると思いますが、
今回はサンプルなので、適当なものを作成して設定しておいてください。

Tizen サンプルアプリ

そのまま実行すると、こんな感じになります。
シンプルですが、結構いい感じのデザインになります。

基本的に、Tizen NativeアプリはXMLで画面レイアウトを作成し、
中身をc++で実装していくという作り方になります。
この辺は、AndroidのXML+Javaと一緒です。

Tizen Nativeアプリのプロジェクト

次に、プロジェクトのなかを見ていきましょう。

Tizen Nativeアプリのプロジェクトは
リソースを格納するresフォルダと、
ソースとヘッダを格納するincとsrcフォルダがあります。

アプリの情報はプロジェクト直下にある、
manifest.xmlに記載されています。

ここまでも、Androidと何ら変わりません。

ということで、
Androidと同じ要領で、
ボタンを押したら»Hello!!»するアプリを作ります。 

レイアウト

まずレイアウトを作るので、
res/screen-size-normal/IDF_FORM.xml
をダブルクリック!

デフォルトだと、
Tizen Ui Builderが勝手に起動します。

今回はテキストを表示させたいので、Labelを配置します。
画面左のtool boxからLabelをドラッグアンドドロップ

Tizen Ui Builder

このままだと小さいのでフォントサイズを大きくしましょう。

画面右下のPropertiesからText Sizeを60に変更します。
配置したコントロールをマウスで直接ぐりぐりいじる事もできます。

今配置したコントロールのIDは»IDC_LABEL1»なので、
覚えておきましょう。
これ重要です。

ソース(src)

次に、ソースをいじります。

srcから、HelloWorldForm.cppをダブルクリック

Tizen src

上から順に説明していくときりがないので端折りますが、
Tizen Nativeアプリのライフサイクルがあってコンストラクタとデストラクタが、
既に書いてあります。

基本的にはプロパティの設定とかオブジェクトをなんやかんやするときは
OnInitializing()の中で実装をしていきます。
ライフサイクルに関してはリファレンスに書いてあるので、
そちらを参考に。

このサンプルだと既に、
OnActionPerformed()
OnFormBackRequested()

が実装されています。

OnActionPerformed()は
イベント登録されたボタンが押されたときに呼ばれるイベントで

OnFormBackRequested()は
バックボタンが押されたときに呼ばれるイベントです。

このサンプルだとすでにボタンが押されたらログを出力するようになっています。

実装

では、楽しい実装タイムです。
今回は解りやすいように、全部OnActionPerformed()のなかでやっていきます。

手順は下記の通りです。

まず、配置したLabelを取得。

// 配置したLabelを取得
Label* pLabel = static_cast(Form::GetControl(IDC_LABEL1));

つぎに、switch分のcase ID_BUTTON_OKでテキストを設定。

// テキストを設定
pLabel->SetText("Hello!!");

と、まぁこれで動きそうですが、
ところがどっこい動きません。

Labelだけに言える事でなく、
コントロールの見た目が変わるような処理をした場合は、
再描画を行わなければいけません。

// Leblを再描画
pLabel->Invalidate(true);

OnActionPerformed()を全部見るとこんな感じになってます。

void
HelloWorldForm::OnActionPerformed(const Tizen::Ui::Control* source, int actionId)
{
    // 配置したLabelを取得
    Label* pLabel = static_cast(Form::GetControl(IDC_LABEL1));
 
    switch(actionId)
    {
    case ID_BUTTON_OK:  // ボタンが押されたとき
        {
            AppLog("OK Button is clicked!\n");
            // テキストを設定
            pLabel->SetText("Hello!!");
            // Leblを再描画
            pLabel->Invalidate(true);
        }
        break;
    default:
        break;
    }
}

アプリを再度実行してみる

再度実行します。

th_tizen_06

ボタンをおすと、

th_tizen_07

“Label1″というテキストが、”Hello!!”に変わりました。

ほとんどAndroidのアプリ開発と変わりませんが、
再描画をしなければいけないのは
Tizenアプリならではなんで、引っかかりそうなポイントです。

まとめ

Tizenアプリの醍醐味は
フロント側をWebで作成->なかのサービスをNativeで作成という
ハイブリッドアプリなので、次はハイブリッドアプリに挑戦していきたいと思います。

最近はJavaScriptの技術がどこにでも取り入れられていて、
様々なJavaScriptライブラリがあるので、
今後のスマホ業界にTizenのハイブリッドアプリが
どのような影響を与えてくれるのかが楽しみです。

長くなりましたが
以上です。

コメントを残す

メールアドレスが公開されることはありません。