Introduction sdk

342 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
342
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction sdk

  1. 1. 1. Tizen SDK 2.2の構成 2. Hello World! 3. デバッグの仕方 4. まとめ 2
  2. 2. Tizen IDEの主な機能を紹介して いきます 3
  3. 3.    HTML5標準仕様 (html+css+js) で作るアプ リ ネイティブアプリにパ フォーマンスで劣るわけで はない!(キリッ Device APIを通じて各種デ バイス機能にアクセス可能 →この発表ではこっちの解説 をします Tizen Web アプリケーショ ン    C++で作るアプリ セキュリティ上Tizen Storeからしか配布できな い 画像解析、マルチメディア 処理など高度なAPI Tizen Native アプリケー ション 4
  4. 4.           IDE Webシミュレータ エミュレータ イベントインジェクタ UIビルダー ドキュメント サンプル アプリケーション リモートインスペクタ プロジェクトウィザード ローカリゼーションウィザード 5
  5. 5. Outline/ Event Injector Project explorer Editor area Connection explorer Problems/ Console/ Pages Property/ HTML/ CSS Preview 6
  6. 6. ◦ Chromeベースの高速シミュ レータ ◦ ビルド不要 ◦ 回転やネットワークなど各種 デバイス機能のシミュレート が可能 7
  7. 7.  エミュレータ ◦ デバイススペックの調整可能 ◦ 実機テストの前に確認可能 ◦ Intel VT-x(仮想化支援機能)対応で高速動作!  Connection Explorer ◦ 接続中の実機と仮想デバイスを一覧 ◦ デバイス内のファイルを探索 8
  8. 8.  エミュレータに手動でイベ ントを起こす ◦ デバイス状態 ◦ 位置情報 ◦ NFC ◦ 各種センサー ◦ 電話/メッセージ 9
  9. 9.    UI レイアウトのコードをGUIから自動生成 (WYSIWYG) 複数のページの視覚的管理 「Tizen Web UI Builder Project」で新規作成する ことで利用できる。簡便なアプリ開発モデル 10
  10. 10.  開発ドキュメントが同梱(Help>Help Contents) ◦ ◦ ◦ ◦ Getting started プログラミングガイド&チュートリアル APIリファレンス Tizen Platform プログラミング 11
  11. 11.  Tizenを手っ取り早く理解するには最適のサンプ ル ◦ 25個のサンプルアプリケーションを用意 ◦ 各種Device APIの使い方 ◦ ユーティリティーからゲームまで 12
  12. 12. 実際にIDEを触りながら、 プロジェクトを作成してビルド、 実行まで行なってみます 13
  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. 14.  Basic ◦ HTMLアプリが動くプロジェクト  Tizen UI Framework ◦ Tizen標準のUIフレームワークが利用できる標準的なプロジェクト ◦ jQueryMobileベースなのでJQM開発と同じ感覚で開発できる ◦ Tizen独自のUIをjQueryMobileウィジェットとして利用可能  jQueryMobile ◦ jQueryMobileを利用したプロジェクト ◦ Webサイト等他のリソースと完全互換したい場合などに利用  Tizen Web UI Builder ◦ UI ビルダーを利用して視覚的に開発するテンプレート ◦ ファイル構成は若干特殊になる  いずれのテンプレートもUIまわりが違うのみでDeviceAPIなどの利用は 可能 15
  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 1ページを構成する各種ファイル(html,css,js)の 集合 app.xml ページやイベントを管理するファイルの集合 tizen-uibuilder-fw UIビルダーによって自動生成されるフレームワー クファイル群。Pageの定義やアプリのライフサイ クル制御 tizen-web-uifw Tizen Web UI Framework ライブラリ 16
  16. 16.  動作に必須の機能を選択することでTizen Store でのフィルタリング等に使われる 17
  17. 17.  ユーザに使用確認を求める必要のある機能を選ぶ 18
  18. 18.  CSP(Content Security Policy)new! ◦ w3cで現在ドラフトのアプリのセキュリティ設定仕様 ◦ スクリプトの実行可能なドメインを細かに設定できる ◦ ウィンドウの遷移先URLのドメイン制限ができる  Access ◦ 登録したドメイン(http,httpsスキーム付きのURLで指 定)のリソースにアクセスできる(ナビゲーション、ス クリプトや画像などの区別はつけられない) ◦ ワイルドカード * で全ドメイン利用可能(リスクを認識 して) ◦ CSPと同時に設定すると怒られる(インストールエ ラー) 19
  19. 19.  プロジェクト右クリック > Run As > Tizen Web Simulator Application 20
  20. 20.  エミュレータの管理のためエミュレータマネー ジャを起動 ◦ Connection Explorerの ボタンを押して起動する ◦ 「Add New」で新規作成 ◦ 設定値はとりあえずデフォルトで。名前だけ入力して Confirm ◦ Launch(▶) で起動する 21
  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. 22.   プロジェクト右クリック> Run As> Tizen Web Application Hello World! 23
  23. 23. 24
  24. 24.   「コンテンツ・アシスト」機能でand keywords “Jlint” がシンタックスエラーとワーニングを自動 表示 25
  25. 25.  Consoleビューにログを表示 ◦ console.log("console.log"); ◦ info(“~”), warn(“~”), error(”~”), debug(“~”) 26
  26. 26.  Debug Asで実行するとリモートインスペクタが 起動 ◦ Chromeのものと同等 Run ->Debug As -> Tizen Web Application 27
  27. 27. 28
  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. 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

×