Tizen Web UI Frameworkでデザインを組み込んでみた

2,671 views

Published on

Tizen Web UI Frameworkを1日で組み込んでみた感想の発表。わりとすっとできる。

Published in: Technology

Tizen Web UI Frameworkでデザインを組み込んでみた

  1. 1. Tizen Web UI Frameworkでデザインを組み込んでみた@tommmmy秋葉ちひろ/Baidu Japan
  2. 2. デザイナー/アートディレクター• Webサイト制作 - 7年ぐらい • HTML歴 約15年 • CSS歴 約10年• Android XMLレイアウト - 数ヶ月• Tizen SDK 約1日
  3. 3. Tizenとの出会い• 関西の村岡さんて人が 「TizenTizen」と連呼していた• 今村さんが勉強会を開催していた• 今村さんがDevPhoneを持っていた
  4. 4. 目標• いろいろなデバイスで動くアプリを 全般的に手がける アートディレクター• Webサイト• Androidアプリ、Metroアプリ• Tizen、Firefox OS、etc...
  5. 5. この勉強会のためにTizen Web UI Framework• jQuery Mobileによく似ているらしい• Tizenのシステムデザインっぽい• 実際に組み込んだらどうなるんだろう
  6. 6. Header HeaderContent ContentFooter Footer
  7. 7. Page PageHeader HeaderContent ContentFooter Footer
  8. 8. 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 -->ContentFooter
  9. 9. 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
  10. 10. https://developer.tizen.org/documentation
  11. 11. Widgets > Control Bar
  12. 12. <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>
  13. 13. <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>
  14. 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. 15. この勉強会のために勝手に架空アプリ!• 架空アプリのUIデザインを考えてみる
  16. 16. <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>
  17. 17. <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 -->
  18. 18. <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 -->
  19. 19. <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 -->
  20. 20. <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>
  21. 21. <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>
  22. 22. <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 -->
  23. 23. <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 -->
  24. 24. この勉強会のためにすごい簡単!• Documentsからコードをコピペする だけ• ほぼ必要なWidgetsはそろっている ような気がする
  25. 25. ひとつ問題がくろい!
  26. 26. この勉強会のためにデモ• Web Simulator Applicationが立ち 上がらない• 実機もうまくつながらない• エミュレーター遅い
  27. 27. もっとかわいくしたい
  28. 28. header_bg.jpgfooter_bg.png
  29. 29. http://www.colorzilla.com/gradient-editor/
  30. 30. http://grad3.ecoloniq.jp/
  31. 31. Tizen Web UI Framework • ありものをごにょごにょして 整形する • 実はけっこうたいへん • 自由度が低い
  32. 32. 次の機会には• 自作のHTMLをぶちこんでみる• どこまでいけるのか?
  33. 33. http://akibahideki.com/blog/html5gtug.html
  34. 34. Thank you so much!

×