introduction sdk
TRANSCRIPT
1. Tizen SDK 2.2 の構成
2. Hello World!
3. デバッグの仕方
4. まとめ
2
Agenda
1.Tizen SDK 2.2 の構成Tizen IDE の主な機能を紹介していきます
3
Tizen SDK で作れる2種類のアプリ
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 を手っ取り早く理解するには最適のサンプル◦ 25個のサンプルアプリケーションを用意◦ 各種 Device API の使い方◦ ユーティリティーからゲームまで
12
サンプルアプリケーション
2. 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 フレームワークが利用できる標準的なプロジェクト◦ jQueryMobileベースなので 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 1ページを構成する各種ファイル( 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
エミュレータでのアプリケーション実行
3.デバッグ
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
4.まとめ
テストとデバッグ
• エミュレータ & 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
日本のサイト