速くなければスマフォじゃない           2012年6月25日           原 一成 @herablog
こんなサイトは嫌だ
こんなサイトは嫌だ
こんなサイトは嫌だ
こんなサイトは嫌だ
フィーチャーフォン
フィーチャーフォン・100KB   ・Inline CSS・GIFアニメ ・Flash Lite・JavaScriptが使えない・回線が不安定
スマートフォン・100KB   ・Inline CSS・GIFアニメ ・Flash Lite・JavaScriptが使えない・回線が不安定
スマートフォン・100KB   ・Inline CSS・GIFアニメ ・Flash Lite・JavaScriptが使えない・回線が不安定
こんなサイトは嫌だ
@herablog@herablog
@herablogHTML/CSS/JavaScript
@herablog「手触りを決める仕事」
@herablog
@herablog
AJAX・Asynchronous JavaScript + XML・XMLHttpRequestを利用・非同期通信で必要なデータのみ取得できる
AJAX・Asynchronous JavaScript + XML・XMLHttpRequestを利用・非同期通信で必要なデータのみ取得できる
JSON・JavaScript Object Notation・{ key : value }・XMLより比較的軽量・JavaScriptとの相性◎
node.js・V8エンジン・非同期I/O・JavaScripterとの相性◎
構成
ライブラリ
ライブラリ自作ライブラリを作ることに
chikuwa.js・軽量・モジュール別開発・ページ遷移しない
軽量40                        31KB3020     5KB      6KB10 0     jqMobi   Chikuwa   jQuery
モジュール別開発メッセージ          サークルmessage.js     circle.jsmessage.css    circle.cssプロフィール         掲示板profile.js      board.jsprofil...
ページ遷移しないHTMLは  だけ。
ページ遷移しない ・hashchange(history API) ・routing(chikuwa)$.routes(circle, {      /:circleId            : {name:circle, circle}, ...
解像度対応・端末により異なる・window.devicePixelRatio・1.0, 1.5, 2.0
CSS3boxbox-sizingborder-radiusbox-shadowtext-shadowbackground-sizeetc...
CSS3Stylus   body          font 12px Helvetica, Arial, sans-serif         a.button          -webkit-border-radius 5px     ...
CodeKithttp://incident57.com/codekit/
画像・node.jsで生成1.0   1.5     2.0
Web Font
Web Font@font-face {    font-family: "AmebaSymbols";    src:url("../font/ameba_symbols.eot");    src:url("../font/ameba_sy...
仕上げ・Minify・gzip転送
完成
ポイント・ひとつひとつはそんなに難しくない・既存の技術の組み合わせ・確実に対応することが大切
速くなければスマフォじゃない
速くなければスマフォじゃない
Upcoming SlideShare
Loading in …5
×

速くなければスマフォじゃない

1,735 views

Published on

こちらのイベント(http://atnd.org/events/29870)の内容です。

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

No Downloads
Views
Total views
1,735
On SlideShare
0
From Embeds
0
Number of Embeds
106
Actions
Shares
0
Downloads
4
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

速くなければスマフォじゃない

  1. 1. 速くなければスマフォじゃない 2012年6月25日 原 一成 @herablog
  2. 2. こんなサイトは嫌だ
  3. 3. こんなサイトは嫌だ
  4. 4. こんなサイトは嫌だ
  5. 5. こんなサイトは嫌だ
  6. 6. フィーチャーフォン
  7. 7. フィーチャーフォン・100KB ・Inline CSS・GIFアニメ ・Flash Lite・JavaScriptが使えない・回線が不安定
  8. 8. スマートフォン・100KB ・Inline CSS・GIFアニメ ・Flash Lite・JavaScriptが使えない・回線が不安定
  9. 9. スマートフォン・100KB ・Inline CSS・GIFアニメ ・Flash Lite・JavaScriptが使えない・回線が不安定
  10. 10. こんなサイトは嫌だ
  11. 11. @herablog@herablog
  12. 12. @herablogHTML/CSS/JavaScript
  13. 13. @herablog「手触りを決める仕事」
  14. 14. @herablog
  15. 15. @herablog
  16. 16. AJAX・Asynchronous JavaScript + XML・XMLHttpRequestを利用・非同期通信で必要なデータのみ取得できる
  17. 17. AJAX・Asynchronous JavaScript + XML・XMLHttpRequestを利用・非同期通信で必要なデータのみ取得できる
  18. 18. JSON・JavaScript Object Notation・{ key : value }・XMLより比較的軽量・JavaScriptとの相性◎
  19. 19. node.js・V8エンジン・非同期I/O・JavaScripterとの相性◎
  20. 20. 構成
  21. 21. ライブラリ
  22. 22. ライブラリ自作ライブラリを作ることに
  23. 23. chikuwa.js・軽量・モジュール別開発・ページ遷移しない
  24. 24. 軽量40 31KB3020 5KB 6KB10 0 jqMobi Chikuwa jQuery
  25. 25. モジュール別開発メッセージ サークルmessage.js circle.jsmessage.css circle.cssプロフィール 掲示板profile.js board.jsprofile.css board.css
  26. 26. ページ遷移しないHTMLは  だけ。
  27. 27. ページ遷移しない ・hashchange(history API) ・routing(chikuwa)$.routes(circle, { /:circleId : {name:circle, circle}, /: circleId/info : {name:info, action:info}, /: circleId/edit : {name:edit, action:edit}, /: circleId/members : {name:members, action:members}, /: circleId/invite : {name:invite, action:invite}});
  28. 28. 解像度対応・端末により異なる・window.devicePixelRatio・1.0, 1.5, 2.0
  29. 29. CSS3boxbox-sizingborder-radiusbox-shadowtext-shadowbackground-sizeetc...
  30. 30. CSS3Stylus body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
  31. 31. CodeKithttp://incident57.com/codekit/
  32. 32. 画像・node.jsで生成1.0 1.5 2.0
  33. 33. Web Font
  34. 34. Web Font@font-face { font-family: "AmebaSymbols"; src:url("../font/ameba_symbols.eot"); src:url("../font/ameba_symbols.woff") format(woff), url("../font/ameba_symbols.ttf") format(truetype), url("../font/ameba_symbols.svg#webfont")format(svg)}.icon { font-family: "AmebaSymbols"; }.icon.M::before { content: "M" }
  35. 35. 仕上げ・Minify・gzip転送
  36. 36. 完成
  37. 37. ポイント・ひとつひとつはそんなに難しくない・既存の技術の組み合わせ・確実に対応することが大切
  38. 38. 速くなければスマフォじゃない

×