1. 1.
Tizen SDK 2.2の構成
2.
Hello World!
3.
デバッグの仕方
4.
まとめ
2

2. Tizen IDEの主な機能を紹介して
いきます
3

3. 


HTML5標準仕様
(html+css+js) で作るアプ
リ
ネイティブアプリにパ
フォーマンスで劣るわけで
はない！(ｷﾘｯ
Device APIを通じて各種デ
バイス機能にアクセス可能
→この発表ではこっちの解説
をします
Tizen Web アプリケーショ
ン



C++で作るアプリ
セキュリティ上Tizen
Storeからしか配布できな
い
画像解析、マルチメディア
処理など高度なAPI
Tizen Native アプリケー
ション
4

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

5. Outline/
Event Injector
Project explorer
Editor area
Connection
explorer
Problems/
Console/
Pages
Property/
HTML/
CSS Preview
6

6. ◦ Chromeベースの高速シミュ
レータ
◦ ビルド不要
◦ 回転やネットワークなど各種
デバイス機能のシミュレート
が可能
7

7. 
エミュレータ
◦ デバイススペックの調整可能
◦ 実機テストの前に確認可能
◦ Intel VT-x（仮想化支援機能）対応で高速動作！

Connection Explorer
◦ 接続中の実機と仮想デバイスを一覧
◦ デバイス内のファイルを探索
8

8. 
エミュレータに手動でイベ
ントを起こす
◦ デバイス状態
◦ 位置情報
◦ NFC
◦ 各種センサー
◦ 電話/メッセージ
9

9. 


UI レイアウトのコードをGUIから自動生成
（WYSIWYG）
複数のページの視覚的管理
「Tizen Web UI Builder Project」で新規作成する
ことで利用できる。簡便なアプリ開発モデル
10

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

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

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

13. 
プロジェクトの新規作成（Tizen Web Project）
File -> New ->Tizen Web Project

プロジェクトテンプレートの選択
◦ 今回は「Tizen Web UI Framework」の「Single Page
Application」を選びます
Select project template
Write project name
14

14. 
Basic
◦ HTMLアプリが動くプロジェクト

Tizen UI Framework
◦ Tizen標準のUIフレームワークが利用できる標準的なプロジェクト
◦ ｊQueryMobileベースなのでJQM開発と同じ感覚で開発できる
◦ Tizen独自のUIをjQueryMobileウィジェットとして利用可能

jQueryMobile
◦ jQueryMobileを利用したプロジェクト
◦ Webサイト等他のリソースと完全互換したい場合などに利用

Tizen Web UI Builder
◦ UI ビルダーを利用して視覚的に開発するテンプレート
◦ ファイル構成は若干特殊になる

いずれのテンプレートもUIまわりが違うのみでDeviceAPIなどの利用は
可能
15

15. 
Blank templateのファイル構成
（ライブラリ付きであればこれにjsライブラリなどが加わる）
File
config.xml
アプリ情報全般、アイコン、ライセンス、サイズ
などを記述
index.html
スタートページ
icon.png
アプリアイコン
main.js
メインのjavascriptファイル
style.css

Description
CSSファイル
Tizen Web UI Builder templateのファイル構成
File
Description
page
１ページを構成する各種ファイル（html,css,js）の
集合
app.xml
ページやイベントを管理するファイルの集合
tizen-uibuilder-fw
UIビルダーによって自動生成されるフレームワー
クファイル群。Pageの定義やアプリのライフサイ
クル制御
tizen-web-uifw
Tizen Web UI Framework ライブラリ
16

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

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

18. 
CSP（Content Security Policy）new!
◦ w3cで現在ドラフトのアプリのセキュリティ設定仕様
◦ スクリプトの実行可能なドメインを細かに設定できる
◦ ウィンドウの遷移先URLのドメイン制限ができる

Access
◦ 登録したドメイン（http,httpsスキーム付きのURLで指
定）のリソースにアクセスできる（ナビゲーション、ス
クリプトや画像などの区別はつけられない）
◦ ワイルドカード * で全ドメイン利用可能（リスクを認識
して）
◦ CSPと同時に設定すると怒られる（インストールエ
ラー）
19

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

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

21. 

1.
2.
3.
エミュレータや実機にインストールするにはアプリへの開
発者署名が必要になります
2.2からIDE内で作成が完結するようになりましたnew!
Preferences > Tizen SDK > Security Profilesを開く
Addボタンからプロファイルの名前を入力（開発者名や
プロジェクト名）してOK
Generateボタンから鍵ファイルの必要事項を記入して作
成
◦ 出てくるダイアログでOKしてAuthor Certificateとして登録する

旧版のキージェネレータはこちら
◦ tizen-sdktoolscertificate-generatorcertificategenerator.bat(macならsh)
22

22. 

プロジェクト右クリック> Run As> Tizen Web
Application
Hello World!
23

23. 24

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

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

26. 
Debug Asで実行するとリモートインスペクタが
起動
◦ Chromeのものと同等
Run ->Debug As -> Tizen Web Application
27

27. 28

28. 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
29

29. 
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