« tizenのデベロッパー登録、 開発用実機取り寄せ等 | トップページ | 初めてのTizenアプリを作成② ~エミュレータの作成とアプリの起動~ »

2013年4月15日 (月)

初めてのTizenアプリを作成① ~Hello worldを表示するアプリのプロジェクトを作成する~

今回は、Tizen SDKを使用してアプリのプロジェクトを作成し、

エミュレータに"Hello World"を表示させるところまでをやりたいと思います。

SDKのインストールについてはこちらを参照ください。


1.Tizen SDKでプロジェクトを作成する

まずは、インストールしたTizenのIDEを起動しましょう。

起動したら、

  "プロジェクトエクスプローラー上を右クリックしてメニューを開く

  ⇒"New"を選択

  ⇒"Tizen web project"を選択

の順で操作を行います。

Tizen_proj1



すると、以下のようなプロジェクト作成画面が開きます。

選択肢が色々ありますが、今回は"Templete"⇒"Tizen"⇒"Basic"と選択しました。

選択が終わったら、プロジェクト名を入力し、finishボタンを押してください。

Tizen_proj2



finishボタンを押すと、ついにプロジェクトが作成されます!

次はプロジェクト内のファイルを見てみましょう。


2,プロジェクト内に生成されたファイルを確認しよう

作成したプロジェクトを開くと、次のような構成になっています。

Tizen_proj3

これら各フォルダ及びファイルについては、公式ドキュメントに次のような

説明が掲載されていました。

  ・cssフォルダ:cssファイルを格納するディレクトリ

  ・jsフォルダ:jsファイルを格納するディレクトリ

  ・config.xml:アプリの構成ファイル

  ・icon.png:アプリのアイコン

  ・index.html:アプリのデフォルトhtml

・・・そのまますぎますよね。
config.xmlはどうやらAndroidでいうところのマニュフェストファイルのようです。

index.htmlは、本アプリ起動時に表示される画面となるファイルのようです。

というわけで、今回は"Hello world"を表示させるべく、

index.xmlの内容を以下のように書き換えましょう。


ソースコード

<HEAD>
  <TITLE>Tizen application sample</TITLE>
  <BODY>
    Hello world!
  </BODY>
</HEAD>

index.htmlを開くと、なんだかガッツリ書き込まれていますが、

ここはひとまず、上のソースコードをペタっと貼り付けてみてください。

以上でHello worldを表示するアプリの作成は完了です!

早速起動してみましょう。

起動するには、プロジェクトを右クリックしてメニューを開き、

"Run As"⇒"Tizen Web Application"と、選択すればOKです。

エミュレータが既に作成済みであれば、エミュレータ上でアプリケーションが実行されます。

(※エミュレータ作成手順については、次回記載しますのでここでは割愛させて頂きます)

▼無事に作成したアプリが起動しました!

Tizen_emu_2



そして、めでたく"Hello World"が表示されましたヽ(´▽`)/

次回は、ここでは省略させていただいたエミュレータの作成手順について

記載したいと思います。

« tizenのデベロッパー登録、 開発用実機取り寄せ等 | トップページ | 初めてのTizenアプリを作成② ~エミュレータの作成とアプリの起動~ »

Tizen」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1882306/51222146

この記事へのトラックバック一覧です: 初めてのTizenアプリを作成① ~Hello worldを表示するアプリのプロジェクトを作成する~ :

« tizenのデベロッパー登録、 開発用実機取り寄せ等 | トップページ | 初めてのTizenアプリを作成② ~エミュレータの作成とアプリの起動~ »

購入


無料ブログはココログ