1. Tizen SDK 2.2 の構成

2. Hello World!

3. デバッグの仕方

4. まとめ

2

Agenda

1.Tizen SDK 2.2 の構成Tizen IDE の主な機能を紹介していきます

3

Tizen SDK で作れる２種類のアプリ

Tizen Web アプリケーション

Tizen Native アプリケーション

HTML5 標準仕様(html+css+js) で作るアプリ

ネイティブアプリにパフォーマンスで劣るわけではない！( ｷﾘｯ

Device API を通じて各種デバイス機能にアクセス可能

→ この発表ではこっちの解説をします

C++ で作るアプリ セキュリティ上 Tizen

Store からしか配布できない

画像解析、マルチメディア処理など高度な API

4

IDE Web シミュレータ エミュレータ イベントインジェクタ UI ビルダー ドキュメント サンプル アプリケーション リモートインスペクタ プロジェクトウィザード ローカリゼーションウィザード

5

Tizen SDK 2.2 の構成

6

Tizen IDE （ WebApplicationプロジェクト）レイアウト

Project explorer

Connection explorer

Editor area

Outline/ Event Injector

Property/ HTML/

CSS PreviewProblems/Console/

Pages

◦ Chrome ベースの高速シミュレータ

◦ ビルド不要

◦ 回転やネットワークなど各種デバイス機能のシミュレートが可能

7

Web シミュレータ

エミュレータ◦ デバイススペックの調整可能◦ 実機テストの前に確認可能◦ Intel VT-x （仮想化支援機能）対応で高速動作！

Connection Explorer◦ 接続中の実機と仮想デバイスを一覧◦ デバイス内のファイルを探索

8

エミュレータ

エミュレータに手動でイベントを起こす◦ デバイス状態

◦ 位置情報

◦ NFC

◦ 各種センサー

◦ 電話 / メッセージ

9

イベント インジェクタ

UI レイアウトのコードを GUI から自動生成（ WYSIWYG ）

複数のページの視覚的管理「 Tizen Web UI Builder Project」で新規作成することで利用できる。簡便なアプリ開発モデル

10

UI ビルダー

開発ドキュメントが同梱（ Help>Help Contents ）◦ Getting started◦ プログラミングガイド＆チュートリアル◦ API リファレンス◦ Tizen Platform プログラミング

11

ドキュメント

Tizen を手っ取り早く理解するには最適のサンプル◦ ２５個のサンプルアプリケーションを用意◦ 各種 Device API の使い方◦ ユーティリティーからゲームまで

12

サンプルアプリケーション

２． Hello World実際に IDEを触りながら、プロジェクトを作成してビルド、実行まで行なってみます

13

プロジェクトの新規作成（ Tizen Web Project ）

プロジェクトテンプレートの選択◦今回は「 Tizen Web UI Framework」の「 Single

Page Application」を選びます

14

プロジェクトの新規作成

File -> New ->Tizen Web Project

Write project name

Select project template

Basic◦ HTML アプリが動くプロジェクト

Tizen UI Framework◦ Tizen 標準の UI フレームワークが利用できる標準的なプロジェクト◦ ｊQueryMobileベースなので JQM開発と同じ感覚で開発できる◦ Tizen独自のUIを jQueryMobileウィジェットとして利用可能

jQueryMobile◦ jQueryMobileを利用したプロジェクト◦ Webサイト等他のリソースと完全互換したい場合などに利用

Tizen Web UI Builder◦ UI ビルダーを利用して視覚的に開発するテンプレート◦ ファイル構成は若干特殊になる

いずれのテンプレートもUIまわりが違うのみでDeviceAPIなどの利用は可能

15

プロジェクトテンプレートの種類

Blank template のファイル構成（ライブラリ付きであればこれに js ライブラリなどが加わる）

Tizen Web UI Builder template のファイル構成

プロジェクトのファイル構成

File Description

config.xml アプリ情報全般、アイコン、ライセンス、サイズなどを記述

index.html スタートページicon.png アプリアイコンmain.js メインの javascript ファイルstyle.css CSS ファイル

File Description

page １ページを構成する各種ファイル（ html,css,js ）の集合

app.xml ページやイベントを管理するファイルの集合

tizen-ui-builder-fw UI ビルダーによって自動生成されるフレームワー

クファイル群。 Page の定義やアプリのライフサイクル制御

tizen-web-ui-fw Tizen Web UI Framework ライブラリ 16

動作に必須の機能を選択することで Tizen Storeでのフィルタリング等に使われる

config.xml - Feature

17

ユーザに使用確認を求める必要のある機能を選ぶ

config.xml - Privileges

18

CSP （ Content Security Policy ） new!

◦ w3c で現在ドラフトのアプリのセキュリティ設定仕様◦ スクリプトの実行可能なドメインを細かに設定できる◦ ウィンドウの遷移先 URL のドメイン制限ができる

Access◦ 登録したドメイン（ http,https スキーム付きの URL で

指定）のリソースにアクセスできる（ナビゲーション、スクリプトや画像などの区別はつけられない）

◦ ワイルドカード * で全ドメイン利用可能（リスクを認識して）

◦ CSP と同時に設定すると怒られる（インストールエラー）

config.xml – Policy new!

19

プロジェクト右クリック > Run As > Tizen Web Simulator Application

20

Web シミュレータで動かしてみる

エミュレータの管理のためエミュレータマネージャを起動◦ Connection Explorer の　　ボタンを押して起動する◦ 「 Add New 」で新規作成◦ 設定値はとりあえずデフォルトで。名前だけ入力して

Confirm◦ Launch （▶） で起動する

エミュレータの作成

21

エミュレータや実機にインストールするにはアプリへの開発者署名が必要になります

2.2 から IDE 内で作成が完結するようになりました new!

1. Preferences > Tizen SDK > Security Profiles を開く2. Add ボタンからプロファイルの名前を入力（開発者名やプ

ロジェクト名）して OK3. Generate ボタンから鍵ファイルの必要事項を記入して作成

◦ 出てくるダイアログで OK して Author Certificate として登録する

旧版のキージェネレータはこちら◦ tizen-sdk\tools\certificate-generator\certificate-

generator.bat(mac なら sh)

22

アプリ署名のための鍵の作成

プロジェクト右クリック > Run As> Tizen Web Application

Hello World!

23

エミュレータでのアプリケーション実行

３．デバッグ

24

「コンテンツ・アシスト」機能で and keywords “Jlint” がシンタックスエラーとワーニングを自

動表示

コーディング

25

Console ビューにログを表示◦ console.log("console.log");◦ info(“~”), warn(“~”), error(”~”), debug(“~”)

ログメッセージ

26

Debug As で実行するとリモートインスペクタが起動◦ Chrome のものと同等

リモートインスペクタ

Run ->Debug As -> Tizen Web Application

27

４．まとめ

テストとデバッグ

• エミュレータ & Connection manager

• Web シミュレータ

• イベントインジェクタ

• リモートインスペクタ

コーディン

グ• プロジェクト

ウィザード• UI ビルダー• Jlint & Con-

tents Assist• ローカリゼー

ションウィザード

学習

• 25 のサンプルアプリケーション

• 豊富なドキュメント

28

29

Tizen の最新情報とサポートサイト

Main site : https://www.tizen.org Developer site : https://developer.tizen.org

Source site: https://source.tizen.org Issue-tracking site: https://bugs.tizen.org

Tizen Japan コンソーシアム◦ https://groups.google.com/forum/#!forum/tizen-japan

tizen-cafe.jp （ http://tizen-cafe.jp ）◦ 主に HTML5 開発者向けの技術情報交流サイトにしていきま

す◦ @tizen_cafe_jp

https://twitter.com/tizen_cafe_jp

CodeZine.jp で連載中◦ 「 HTML5 で作る！ 次世代スマートフォン OS 「 Tizen 」

アプリケーション」

30

日本のサイト