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

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

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

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

Tomokazu Kiyohara

December 08, 2012
Tweet

More Decks by Tomokazu Kiyohara

Other Decks in Technology

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