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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,525
views

Published on

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

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

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,525
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

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!

×