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

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

Transcript

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

   View Slide

2. Page
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Social Network
   

   View Slide

8. Pageઃܭ ≒ URLઃܭ
   

   View Slide

9. Pageઃܭ ≒ URLઃܭ
   

   View Slide

10. Pageઃܭ ≒ URLઃܭ
    Share
    

    View Slide

11. User Interface
    

    View Slide

12. ৽ͨͳදݱख๏
    Ajax
    Parallax
    

    View Slide

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

    View Slide

14. Demo
    

    View Slide

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

    View Slide

16. Demo
    

    View Slide

17. ՝୊
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Solution
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. ಈత URL ૢ࡞
    

    View Slide

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

    View Slide

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

    View Slide

31. ಈత URL ૢ࡞
    JavaScript
    history.pushState
    

    View Slide

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

    View Slide

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

    View Slide

34. Caution
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. Conclusion
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 )
    

    View Slide

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/
    

    View Slide