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でいいとこどり開発 ~ピグトーク~
of 43

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

テックヒルズ #2(http://atnd.org/events/25630)の内容です。
Published on: Mar 3, 2016
Published in: Technology      
Source: www.slideshare.net


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

  • 1. Native x Webでいいとこどり開発 ∼ ピグトーク ∼ 2012年4月13日 テックヒルズ #2 株式会社サイバーエージェント 原 一成
  • 2. 問題です
  • 3. 問題ですNative? Web?
  • 4. 問題ですNative? Web?
  • 5. 問題ですNative? Web?
  • 6. 問題ですNative? Web?
  • 7. 原です@herablog
  • 8. 担当したものアメーバブログ アメーバピグ
  • 9. HTML5, CSS3を舐めまわす会
  • 10. アプリコンテスト
  • 11. アプリコンテスト
  • 12. アプリコンテストhttp://heehee.info/
  • 13. へぇ∼・ node.js・ AWS・ Web Font・ Audio・ Local Storage
  • 14. スマートフォン対応にあたって 要件「動かして欲しい」
  • 15. 方法
  • 16. 方法
  • 17. 方法
  • 18. その1 服を着せる
  • 19. その1 服を着せるデータ化{ "itemlist": [ { "itemname": "VネックTシャツ・ネイビー", "image": [ { "position": {"x": -67,"y": -14}, "origin": {"x": 1,"y": 2}, "data": "data:image/png;base64,iVBORw0..." } ] } ]}
  • 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. その2 アクションさせる
  • 22. その2 アクションさせるデータ化(ActionScriptでも使用)0000640000000000640000FE50010064000000000064000CFEDC020064000000000064FFE4FE58030063000BFFF50063FF8FFEB1040063000BFFF50063FF5EFEF70500640000000000640032FE5B060061FFEA001600610089FEB307005DFFDE0022005D00D0FEFF080064000000000064FFCDFF3A0900640000000000640048FF410A0064000000000064000000000B0064000000000064000000000C0064000000000063000000000D006400000000006400000000FF000064000000000064FFFBFE580100640000000000640007FEE302FFF7FF9DFF9D0009FFDFFE5F03FFE2FFA2FFA2001EFF8CFEBE0400610017FFE90061FF53FEFE05FFFA006300630006002DFE6306FFD9005B005B00270081FEC407FFE1005E005E001F00B9FF13FF000063000
  • 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. その2 アクションさせるGPUを効かせる-webkit-transform: translate3d(0, 0, 0);-webkit-transform-style: preserve-3d;▼iOS Simulatorで確認 [Debug]→[Color Blended Layers]
  • 25. その2 アクションさせる できた!! DEMO
  • 26. 要件追加 要件追加「こんなこともしたいんだけど」
  • 27. 要件追加
  • 28. Native 速い デバイスアクセス Store
  • 29. Web 多デバイス 容易 変更しやすい
  • 30. 方針アプリとして出す以上スムーズさが大事
  • 31. 問題ですNative? Web?
  • 32. Native x WebWeb 表示に専念Native 処理、トランジッション
  • 33. 問題ですNative? Web?
  • 34. Native x WebDEMO
  • 35. 最後にいくつか Tips
  • 36. Tipsbackground-size: cover;
  • 37. background-size: cover; ひとつの画像で多くの 画面サイズに対応
  • 38. TipsOffline Application Cache
  • 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. 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. 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. Native x WebWeb 表示に専念Native 処理、トランジッション

Related Documents