Native x Webでいいとこどり開発 ∼ ピグトーク ∼                2012年4月13日                テックヒルズ #2                株式会社サイバーエージェント          ...
問題です
問題ですNative? Web?
問題ですNative? Web?
問題ですNative? Web?
問題ですNative? Web?
原です@herablog
担当したものアメーバブログ            アメーバピグ
HTML5, CSS3を舐めまわす会
アプリコンテスト
アプリコンテスト
アプリコンテストhttp://heehee.info/
へぇ∼・ node.js・ AWS・ Web Font・ Audio・ Local Storage
スマートフォン対応にあたって   要件「動かして欲しい」
方法
方法
方法
その1 服を着せる
その1 服を着せるデータ化{    "itemlist": [       {         "itemname": "VネックTシャツ・ネイビー",         "image": [            {              ...
その1 服を着せるDOM追加<div data-parts=”f_body” data-action=”f_body_mot”>  <img src=” data:image/png;base64,iVBORw0...”  style=”-we...
その2 アクションさせる
その2 アクションさせるデータ化(ActionScriptでも使用)0000640000000000640000FE50010064000000000064000CFEDC020064000000000064FFE4FE58030063000B...
その2 アクションさせる-webkit-transform▼Frame 1<div data-parts=”f_body” data-action=”f_body_mot”style=”-webkit-transform: matrix(0.1...
その2 アクションさせるGPUを効かせる-webkit-transform: translate3d(0, 0, 0);-webkit-transform-style: preserve-3d;▼iOS Simulatorで確認 [Debug]...
その2 アクションさせる できた!! DEMO
要件追加     要件追加「こんなこともしたいんだけど」
要件追加
Native  速い  デバイスアクセス  Store
Web 多デバイス 容易 変更しやすい
方針アプリとして出す以上スムーズさが大事
問題ですNative? Web?
Native x WebWeb 表示に専念Native 処理、トランジッション
問題ですNative? Web?
Native x WebDEMO
最後にいくつか Tips
Tipsbackground-size: cover;
background-size: cover;          ひとつの画像で多くの          画面サイズに対応
TipsOffline Application Cache
Offline Application CacheCACHE MANIFEST# Version 0.0.88                 指定したファイルをデCACHE:# JavaScript                     バ...
Offline Application CacheCACHE MANIFEST# Version 0.0.88                 2回目以降サーバへアCACHE:# JavaScript                     ク...
Offline Application CacheCACHE MANIFEST# Version 0.0.88                 ※注意点※CACHE:# JavaScript                     ファイル自体...
Native x WebWeb 表示に専念Native 処理、トランジッション
Native x Webでいいとこどり開発 ~ピグトーク~
Upcoming SlideShare
Loading in …5
×

Native x Webでいいとこどり開発 ~ピグトーク~

1,863 views

Published on

テックヒルズ #2(http://atnd.org/events/25630)の内容です。

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,863
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
16
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Native x Webでいいとこどり開発 ~ピグトーク~

  1. 1. Native x Webでいいとこどり開発 ∼ ピグトーク ∼ 2012年4月13日 テックヒルズ #2 株式会社サイバーエージェント 原 一成
  2. 2. 問題です
  3. 3. 問題ですNative? Web?
  4. 4. 問題ですNative? Web?
  5. 5. 問題ですNative? Web?
  6. 6. 問題ですNative? Web?
  7. 7. 原です@herablog
  8. 8. 担当したものアメーバブログ アメーバピグ
  9. 9. HTML5, CSS3を舐めまわす会
  10. 10. アプリコンテスト
  11. 11. アプリコンテスト
  12. 12. アプリコンテストhttp://heehee.info/
  13. 13. へぇ∼・ node.js・ AWS・ Web Font・ Audio・ Local Storage
  14. 14. スマートフォン対応にあたって 要件「動かして欲しい」
  15. 15. 方法
  16. 16. 方法
  17. 17. 方法
  18. 18. その1 服を着せる
  19. 19. その1 服を着せるデータ化{ "itemlist": [ { "itemname": "VネックTシャツ・ネイビー", "image": [ { "position": {"x": -67,"y": -14}, "origin": {"x": 1,"y": 2}, "data": "data:image/png;base64,iVBORw0..." } ] } ]}
  20. 20. その1 服を着せるDOM追加<div data-parts=”f_body” data-action=”f_body_mot”> <img src=” data:image/png;base64,iVBORw0...” style=”-webkit-transform: translate(-67px, 14px); ” > <img src=” data:image/png;base64,iVBORw0...” style=”-webkit-transform: translate(-1px, 9px); ” ></div><div data-parts=”f_head” data-action=”f_head_mot”> <img src=” data:image/png;base64,iVBORw0...” style=”-webkit-transform: translate(-1px, 9px); ” ></div>
  21. 21. その2 アクションさせる
  22. 22. その2 アクションさせるデータ化(ActionScriptでも使用)0000640000000000640000FE50010064000000000064000CFEDC020064000000000064FFE4FE58030063000BFFF50063FF8FFEB1040063000BFFF50063FF5EFEF70500640000000000640032FE5B060061FFEA001600610089FEB307005DFFDE0022005D00D0FEFF080064000000000064FFCDFF3A0900640000000000640048FF410A0064000000000064000000000B0064000000000064000000000C0064000000000063000000000D006400000000006400000000FF000064000000000064FFFBFE580100640000000000640007FEE302FFF7FF9DFF9D0009FFDFFE5F03FFE2FFA2FFA2001EFF8CFEBE0400610017FFE90061FF53FEFE05FFFA006300630006002DFE6306FFD9005B005B00270081FEC407FFE1005E005E001F00B9FF13FF000063000
  23. 23. その2 アクションさせる-webkit-transform▼Frame 1<div data-parts=”f_body” data-action=”f_body_mot”style=”-webkit-transform: matrix(0.1, 0, 0, 0.1, 1.8,-43.7); ”></div>▼Frame 2<div data-parts=”f_body” data-action=”f_body_mot”style=”-webkit-transform: matrix(0.99, 0, 0, 0.99,0.75, -40.5); ”></div>▼Frame 3▼Frame 4  ・  ・
  24. 24. その2 アクションさせるGPUを効かせる-webkit-transform: translate3d(0, 0, 0);-webkit-transform-style: preserve-3d;▼iOS Simulatorで確認 [Debug]→[Color Blended Layers]
  25. 25. その2 アクションさせる できた!! DEMO
  26. 26. 要件追加 要件追加「こんなこともしたいんだけど」
  27. 27. 要件追加
  28. 28. Native 速い デバイスアクセス Store
  29. 29. Web 多デバイス 容易 変更しやすい
  30. 30. 方針アプリとして出す以上スムーズさが大事
  31. 31. 問題ですNative? Web?
  32. 32. Native x WebWeb 表示に専念Native 処理、トランジッション
  33. 33. 問題ですNative? Web?
  34. 34. Native x WebDEMO
  35. 35. 最後にいくつか Tips
  36. 36. Tipsbackground-size: cover;
  37. 37. background-size: cover; ひとつの画像で多くの 画面サイズに対応
  38. 38. TipsOffline Application Cache
  39. 39. Offline Application CacheCACHE MANIFEST# Version 0.0.88 指定したファイルをデCACHE:# JavaScript バイスにキャッシュ../js/myroom.min.js# Stylesheet../css/common/common.css../css/common/avatar.css# Image../img/room/bg_001_evening.png../img/room/bg_001_night.png
  40. 40. Offline Application CacheCACHE MANIFEST# Version 0.0.88 2回目以降サーバへアCACHE:# JavaScript クセスしないので../js/myroom.min.js# Stylesheet 表示がはやい../css/common/common.css../css/common/avatar.css# Image../img/room/bg_001_evening.png../img/room/bg_001_night.png
  41. 41. Offline Application CacheCACHE MANIFEST# Version 0.0.88 ※注意点※CACHE:# JavaScript ファイル自体をキャッ../js/myroom.min.js# Stylesheet シュしない../css/common/common.css../css/common/avatar.css Android Webviewは# Image../img/room/bg_001_evening.png デフォルトオフ../img/room/bg_001_night.png
  42. 42. Native x WebWeb 表示に専念Native 処理、トランジッション

×