プロジェクトの作成
IDEが起動したら早速プロジェクトを作ってみましょう。基本的にWindowsでのIDEをベースに説明をしていきますが、他OSでもそれほど大きな違いはありません。まず、［File］-［New］-［Project］を選択し、プロジェクトウィザードの中の［Tizen Web Project］を選択します。
次の画面では、プロジェクトテンプレートの選択が可能です。テンプレートには現在、「Basic」「Tizen Web UI Framework」「jQuery Mobile」の3種類に加え、UIビルダーを使った簡便な開発が可能な「Tizen Web UI Builder」が用意されています。
- 「Basic」テンプレート：Tizenのアプリ情報を記載するconfig.xmlとアイコンファイルのほか、index.html、main.js、style.cssというHTML5アプリを作る最小構成が入っています。
- 「Tizen Web UI Framework」テンプレート：Tizen独自のUI指針によってデザインされたTizen UIをjQuery Mobile互換形式で利用できるライブラリが同梱されています。
- 「jQuery Mobile」テンプレート：jQueryとjQuery Mobileがはじめから同梱されており、すぐに利用することができます。
なお、「Tizen Web UI Framework」と「jQuery Mobile」についてですが、開発スタイルは大きく変わりません。Tizen OSらしいUIを選ぶか、純粋なjQuery Mobileで他プラットフォームでの展開と同期をとるかなど、目的に沿った使い方をしてみてください。
また、この画面では現時点で26個もの豊富なサンプルアプリケーションを開くことも可能です。各種Device APIの使い方のお手本や、Canvasを使ったゲームなど、機能に応じたサンプルも用意されています。Tizenのアプリケーションがどのようなものかを知るには、最も手っ取り早い方法でしょう。
今回は最初ということで「Basic」テンプレートを選んでみます。［Basic］-［Blank Application］を選択し、Project Nameに名前を入れて［Finish］を押してください。プロジェクトが作成されます。
Webシミュレータとエミュレータ
スマートフォンアプリの開発上での実行は、実機につないで実機で実行する方法と、PC内でエミュレータを起動しその中で実行する方法の2つが定番となっています。TizenではさらにWebシミュレータという高速に動くシミュレート環境が用意されています。
それでは、早速起動してみましょう。先ほど作成したプロジェクトを右クリックして、［Run As］-［Tizen Web Simulator Application］を選択します。するとGoogle ChromeベースのWebシミュレータが立ち上がります。
HTML5ベースのアプリならではの高速なシミュレータで、レイアウトの確認はもちろん、画面の回転や3G回線やWi-Fiなどネットワーク状況の変更、各種センサー値や位置情報、電話着信やSMS受信などのシミュレートをすることができ、デバッグの時間的負担を大幅に減らしてくれます。さらにChromeベースとなっており、F12を押せば見慣れたWebインスペクタが起動します。デバッグログの確認やDOMの確認など、充実したデバッギングが可能です。
エミュレータを使う場面も、多くなるのではないかと思います。エミュレータはIDE画面左下の「Connection Explorer」の中から「Emulator Manager」を起動して利用します。「Emulator Manager」が立ち上がったら、画面中の<<Create New>>を選択し、［Create］ボタンを押します。最後にエミュレータ名を入力し、［Confirm］ボタンを押すだけで作成完了です。ではさっそく［Launch］ボタンをクリックし、起動してみましょう。
エミュレータが起動したら、プロジェクトをエミュレータ上で実行します。プロジェクトを右クリックして、今度は［Run As］-［Tizen Web Application］を選択します。本来はこれだけで実行されるのですが、初回のみ実機やエミュレータにアプリをインストールする際に必須の、開発者署名を作成するようにダイアログが表示されます。ダイアログ中の［Preferences］-［Secure Profiles］を選択してください。Profilesの［Add］ボタンでProfile名を入力し、Profileを作成します。
次に「Certificate Generator」で署名ファイルを作成します。「Certificate Generator」はWindowsの場合はコマンドプロンプトから、Macの場合はターミナルから実行します。Tizenをインストールしたディレクトリ（デフォルトでWindowsなら「c:\tizen-sdk\」、Macなら「/Users/[username]/tizen-sdk」です）の下の「tools\certificate-generator」ディレクトリに移動し、certificate-generator.bat（Macの場合はcertificate-generator.sh）を実行します。ガイダンスにそって必要事項を入力していきます。
最後にp12ファイルが作成されますので、IDEに戻り、「Certificate Path」でファイルを選択し、「Password」に先ほど入力したパスワードを入力し［OK］を押して完了です。これでエミュレータ、実機へのアプリのインストールができるようになりました。起動したエミュレータに対しては、IDE画面右上の「Event Injector」で、各種デバイス操作が可能となっています。
まとめ
今回は、SDKインストールから初回実行までを駆け足で紹介してきました。機能豊富なIDEが用意されているとはいえ、Tizen WebアプリケーションはWeb標準のフォーマットですから、デザインは使い慣れたDreamweaverなどの外部ソフトを使って作成することも可能です。また、jQuery以外のJavaScriptライブラリもそのまま利用できます。Web標準仕様という点も、開発において大きな強みとして感じる場面が多くなるでしょう。
次回以降は、HTML5の最新仕様やDeviceAPIを使ったハードウェア制御を利用した、具体的なアプリケーション開発を紹介していきます。またその際にも、今回紹介したTizen IDEの充実したデバッグ環境の有用性を、実感していただけるのではないかと思います。
