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

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/