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

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

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/