Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webサイトの新たな 「ページ設計」

Webサイトの新たな 「ページ設計」

WDF Vol.7 の発表資料。シェアポイントとしての URL を設計しようという話。

Cb057b585817007ba2a931a81ef9398f?s=128

Tomokazu Kiyohara

December 08, 2012
Tweet

Transcript

  1. WebαΠτͷ৽ͨͳ ʮϖʔδઃܭʯ 2012/12/08 WDF vol.7

  2. Page

  3. ϖʔδ ຊ΍৽ฉɺҹ࡮෺ͳͲͷߏ੒୯Ґɻ1ຕͷࢴͷ 1ͭͷ໘͕1ϖʔδʹ૬౰ɻ·ͨɺͦͷ൪߸ɻ (via wikipedia) ෺ཧతͳ੍ݶʹΑͬͯ۠੾ΒΕͨʮ୯Ґʯ

  4. Web αΠτͷϖʔδ Web ϒϥ΢βʹҰ౓ʹදࣔ͞ΕΔσʔλͷ· ͱ·Γ (via e-Words) ৘ใͷߏ଄ԽʹΑͬͯ۠੾ΒΕͨʮ୯Ґʯ

  5. Web αΠτͷϖʔδ Web ϒϥ΢βʹҰ౓ʹදࣔ͞ΕΔσʔλͷ· ͱ·Γ (via e-Words) ৘ใͷߏ଄ԽʹΑͬͯ۠੾ΒΕͨʮ୯Ґʯ

  6. Web αΠτͷϖʔδ Web ϒϥ΢βʹҰ౓ʹදࣔ͞ΕΔσʔλͷ· ͱ·Γ (via e-Words) ৘ใͷߏ଄ԽʹΑͬͯ۠੾ΒΕͨʮ୯Ґʯ Information Architecture

    (IA)
  7. Social Network

  8. Pageઃܭ ≒ URLઃܭ

  9. Pageઃܭ ≒ URLઃܭ

  10. Pageઃܭ ≒ URLઃܭ Share

  11. User Interface

  12. ৽ͨͳදݱख๏ Ajax Parallax

  13. Ajax Asynchronous JavaScript + XML ΢Σϒϒϥ΢β಺Ͱඇಉظ௨৴ͱΠϯλʔϑ ΣΠεͷߏஙͳͲΛߦ͏ٕज़ͷ૯শ ը໘ભҠΛ൐Θͳ͍ಈతͳWebΞϓϦέʔγ ϣϯͷ੡࡞͕࣮ݱՄೳʹ

  14. Demo

  15. Parallax ࢹࠩ εΫϩʔϧ଎౓ʹมԽΛ࣋ͨͤΔ͜ͱͰԞߦ ͖Λදݱ͢Δख๏ εΫϩʔϧΛτϦΨʹ༷ͯ͠ʑͳࢹ֮ޮՌΛ දࣔ͢Δख๏

  16. Demo

  17. ՝୊

  18. ՝୊ ୯Ұϖʔδ(URL) ʹେྔͷ৘ใ

  19. ՝୊ ୯Ұϖʔδ(URL) ʹେྔͷ৘ใ γΣΞग़དྷͳ͍ίϯςϯπͷൃੜ

  20. ՝୊ ୯Ұϖʔδ(URL) ʹେྔͷ৘ใ γΣΞग़དྷͳ͍ίϯςϯπͷൃੜ ͓஌ΒͤɾτϐοΫɾ਍ྍ࣌ؒ… ਍ྍ࣌ؒΛγΣΞ͍ͨ͠ͷʹτοϓϖʔδʹ…

  21. ΞϯΧʔλάʁ <a name="tag"> http://abc/xyz.html#tag ಈతϖʔδͰ͸࢖͑ͳ͍ λά෇͖URL͕Θ͔Βͳ͍ (γΣΞͰ͖ͳ͍)

  22. Solution

  23. ղܾࡦ (1) γΣΞϙΠϯτͷઃܭ (2) ಈత URL ૢ࡞

  24. γΣΞϙΠϯτ γΣΞ͢Δը໘ͷঢ়ଶ

  25. γΣΞϙΠϯτ γΣΞ͢Δը໘ͷঢ়ଶ ը໘ “Ґஔ” ͚ͩͰ͸ͳ͍

  26. γΣΞϙΠϯτͷઃܭ ๚໰ऀ͕γΣΞ͍ͨ͠ঢ়ଶ αΠτ͕γΣΞ͍ͤͨ͞ঢ়ଶ

  27. γΣΞϙΠϯτͷઃܭ γΣΞϙΠϯτ ↓ URL

  28. ಈత URL ૢ࡞

  29. ಈత URL ૢ࡞ ಈతʹίϯςϯπΛૢ࡞

  30. ಈత URL ૢ࡞ ಈతʹ URL Λૢ࡞

  31. ಈత URL ૢ࡞ JavaScript history.pushState

  32. URL ͔Βίϯςϯπ JavaScript Ͱੜ੒ (location.href) αʔόʔͰੜ੒ (CGI) ੩తίϯςϯπ

  33. JavaScript framework pjax pushState + ajax = pjax https://github.com/defunkt/jquery-pjax

  34. Caution

  35. ஫ҙ఺ (1) ϒϥ΢βͷରԠঢ়گ history.pushState

  36. ஫ҙ఺ (1) Can I use... http://caniuse.com/#feat=history

  37. ஫ҙ఺ (2) ΞφϥΠζ

  38. ஫ҙ఺ (2) Google Analytics _trackPageview() ΞΫηεϩάղੳ

  39. Conclusion

  40. ·ͱΊ ৽͍͠ UI Ajax/Parallax ৽͍͠ઃܭ γΣΞϙΠϯτ ಈత URL ૢ࡞ (JavaScript)

  41. ઃܭͷஈ֊Ͱ ෯޿͍ݕ౼͕ඞཁ

  42. ·ͱΊ +α σΟϨΫλʔ σβΠφʔ ϓϩάϥϚʔ

  43. ·ͱΊ +α σΟϨΫλʔ σβΠφʔ ϓϩάϥϚʔ ӽڥਫ਼ਆ

  44. Thank you http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara

  45. Example Sites Ajax Sites ҏ౻಺ՊҩӃ ( http://ito-naika.net/ ) দຊΫϦχοΫ (

    http://m-clinic.net/ ) The Mobile Playbook ( http://www.themobileplaybook.com/jp/ ) twitter/bootstrap · GitHub ( http://github.com/twitter/bootstrap ) Parallax Sites cultural solutions uk ( http://www.culturalsolutions.co.uk/ ) ౦ژλϫʔζ ( http://www.takumitaniguchi.com/tokyotowers/ ) MINI CROSSOVER. BIG POINTεϖγϟϧίϯςϯπ ( http://www.mini.jp/event_campaign/big-point/ ) Peugeot HYbrid4 presents : The hybrid graphic novel ( http://graphicnovel-hybrid4.peugeot.com/start.html )
  46. Photo Credit http://www.flickr.com/photos/levinardo/4753547868/ http://www.flickr.com/photos/nnova/6521853465/ http://www.flickr.com/photos/esti/4638056301/ http://www.flickr.com/photos/trilanes/4714198782/