Tizen Web UI Frameworkでデザインを組み込んでみた
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 2,825 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,825
On Slideshare
2,821
From Embeds
4
Number of Embeds
2

Actions

Shares
Downloads
29
Comments
0
Likes
5

Embeds 4

https://si0.twimg.com 2
https://twitter.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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のシステムデザインっぽい• 実際に組み込んだらどうなるんだろう
  • 6. Header HeaderContent ContentFooter Footer
  • 7. Page PageHeader HeaderContent ContentFooter Footer
  • 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. 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. https://developer.tizen.org/documentation
  • 11. Widgets > Control Bar
  • 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. <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. <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. この勉強会のために勝手に架空アプリ!• 架空アプリのUIデザインを考えてみる
  • 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. <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. <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. <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. <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. <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. <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. <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. この勉強会のためにすごい簡単!• Documentsからコードをコピペする だけ• ほぼ必要なWidgetsはそろっている ような気がする
  • 25. ひとつ問題がくろい!
  • 26. この勉強会のためにデモ• Web Simulator Applicationが立ち 上がらない• 実機もうまくつながらない• エミュレーター遅い
  • 27. もっとかわいくしたい
  • 28. header_bg.jpgfooter_bg.png
  • 29. http://www.colorzilla.com/gradient-editor/
  • 30. http://grad3.ecoloniq.jp/
  • 31. Tizen Web UI Framework • ありものをごにょごにょして 整形する • 実はけっこうたいへん • 自由度が低い
  • 32. 次の機会には• 自作のHTMLをぶちこんでみる• どこまでいけるのか?
  • 33. http://akibahideki.com/blog/html5gtug.html
  • 34. Thank you so much!