Tizen Web UI Frameworkでデザインを組み込んでみた
•
5 likes•1,312 views
Tizen Web UI Frameworkを1日で組み込んでみた感想の発表。わりとすっとできる。
More Related Content
Similar to Tizen Web UI Frameworkでデザインを組み込んでみた
Similar to Tizen Web UI Frameworkでデザインを組み込んでみた (20)
Recently uploaded
Recently uploaded (10)
Tizen Web UI Frameworkでデザインを組み込んでみた
- 1. Tizen Web UI Frameworkで デザインを組み込んでみた @tommmmy 秋葉ちひろ／Baidu Japan
- 2. デザイナー／アートディレクター • Webサイト制作 - 7年ぐらい • HTML歴 約15年 • CSS歴 約10年 • Android XMLレイアウト - 数ヶ月 • Tizen SDK 約1日
- 3. Tizenとの出会い • 関西の村岡さんて人が 「TizenTizen」と連呼していた • 今村さんが勉強会を開催していた • 今村さんがDevPhoneを持っていた
- 4. 目標 • いろいろなデバイスで動くアプリを 全般的に手がける アートディレクター • Webサイト • Androidアプリ、Metroアプリ • Tizen、Firefox OS、etc...
- 5. この勉強会のために Tizen Web UI Framework • jQuery Mobileによく似ているらしい • Tizenのシステムデザインっぽい • 実際に組み込んだらどうなるんだろう
- 8. Header Header Content Content Footer Footer
- 9. Page Page Header Header Content Content Footer Footer
- 10. Header <div data-role="page" id="one"> <div data-role="header" data-position="fixed"> </div><!-- /header --> Content <div data-role="content"> </div><!-- /content --> Footer <div data-role="footer" data-position="fixed"> Header </div><!-- /footer --> </div><!-- /page --> Content Footer
- 11. Header <body> <div data-role="page" id="one"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> Content </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="two"> Footer <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> Header </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> Content </body> <a href= "#two" >2ページめへ</a> Footer
- 13. Widgets > Control Bar
- 14. <div data-role="footer"data-position ="fixed"> <div data-role="controlbar" data-style="toolbar" > <ul> <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> -------------- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> </ul> </div><!-- /controlbar --> </div>
- 15. <div data-role="footer"data-position ="fixed"> <div data-role="controlbar" data-style="toolbar" > <ul> <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> -------------- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> </ul> </div><!-- /controlbar --> </div>
- 16. <div data-role="footer"data-position ="fixed"> <div data-role="controlbar" data-style="toolbar" > <ul> <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> -------------- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> </ul> </div><!-- /controlbar --> </div>
- 19. <div data-role="page" id="timeline"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> <a href="#timeline">Timeline</a> <a href="#tweet">Tweet</a> <a href="#friends">Friends</a> <a href="#profile">Profile</a>
- 20. <div data-role="page" id="timeline"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 21. <div data-role="content"> <ul data-role= "listview" > <li class="ui-li-2line-bigicon1"> <span class="ui-li-text-main"> It’s so fun to styling Tizen! </span> <span class="ui-li-text-sub"> tommmmy </span> <img src="img/tommy.jpg" class="ui-li-bigicon"> </li> </ul> </div><!-- /content -->
- 22. <div data-role="page" id="tweet"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 23. <input type=”text”> <input id="slider5" name="slider5" data- popupenabled='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text- right='99'/> <div data-role="button"> Send Tweet </div>
- 24. <div id="friends" data-role="content" data-scroll="y" data-handler="true"> <ul data-role="listview"> <li data-role="list-divider">A</li> <li><a href="#">Adam Kinkaid</a></li> </ul> </div>
- 25. <div data-role="page" id="friends"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 26. <div data-role="page" id="profile"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 27. この勉強会のために すごい簡単！ • Documentsからコードをコピペする だけ • ほぼ必要なWidgetsはそろっている ような気がする
- 28. ひとつ問題が くろい！
- 31. この勉強会のために デモ • Web Simulator Applicationが立ち 上がらない • 実機もうまくつながらない • エミュレーター遅い
- 32. もっとかわいくしたい
- 41. Tizen Web UI Framework • ありものをごにょごにょして 整形する • 実はけっこうたいへん • 自由度が低い
- 44. Thank you so much!