WDF Vol.7 の発表資料。シェアポイントとしての URL を設計しようという話。
WebαΠτͷ৽ͨͳʮϖʔδઃܭʯ2012/12/08 WDF vol.7
View Slide
Page
ϖʔδຊ৽ฉɺҹͳͲͷߏ୯Ґɻ1ຕͷࢴͷ1ͭͷ໘͕1ϖʔδʹ૬ɻ·ͨɺͦͷ൪߸ɻ(via wikipedia)ཧతͳ੍ݶʹΑͬͯ۠ΒΕͨʮ୯Ґʯ
Web αΠτͷϖʔδWeb ϒϥβʹҰʹදࣔ͞ΕΔσʔλͷ·ͱ·Γ (via e-Words)ใͷߏԽʹΑͬͯ۠ΒΕͨʮ୯Ґʯ
Web αΠτͷϖʔδWeb ϒϥβʹҰʹදࣔ͞ΕΔσʔλͷ·ͱ·Γ (via e-Words)ใͷߏԽʹΑͬͯ۠ΒΕͨʮ୯ҐʯInformation Architecture(IA)
Social Network
Pageઃܭ ≒ URLઃܭ
Pageઃܭ ≒ URLઃܭShare
User Interface
৽ͨͳදݱख๏AjaxParallax
AjaxAsynchronous JavaScript + XMLΣϒϒϥβͰඇಉظ௨৴ͱΠϯλʔϑΣΠεͷߏஙͳͲΛߦ͏ٕज़ͷ૯শը໘ભҠΛΘͳ͍ಈతͳWebΞϓϦέʔγϣϯͷ࡞͕࣮ݱՄೳʹ
Demo
ParallaxࢹࠩεΫϩʔϧʹมԽΛ࣋ͨͤΔ͜ͱͰԞߦ͖Λදݱ͢Δख๏εΫϩʔϧΛτϦΨʹ༷ͯ͠ʑͳࢹ֮ޮՌΛදࣔ͢Δख๏
՝
՝୯Ұϖʔδ(URL) ʹେྔͷใ
՝୯Ұϖʔδ(URL) ʹେྔͷใγΣΞग़དྷͳ͍ίϯςϯπͷൃੜ
՝୯Ұϖʔδ(URL) ʹେྔͷใγΣΞग़དྷͳ͍ίϯςϯπͷൃੜ͓ΒͤɾτϐοΫɾྍ࣌ؒ…ྍ࣌ؒΛγΣΞ͍ͨ͠ͷʹτοϓϖʔδʹ…
ΞϯΧʔλάʁhttp://abc/xyz.html#tagಈతϖʔδͰ͑ͳ͍λά͖URL͕Θ͔Βͳ͍ (γΣΞͰ͖ͳ͍)
Solution
ղܾࡦ(1) γΣΞϙΠϯτͷઃܭ(2) ಈత URL ૢ࡞
γΣΞϙΠϯτγΣΞ͢Δը໘ͷঢ়ଶ
γΣΞϙΠϯτγΣΞ͢Δը໘ͷঢ়ଶը໘ “Ґஔ” ͚ͩͰͳ͍
γΣΞϙΠϯτͷઃܭ๚ऀ͕γΣΞ͍ͨ͠ঢ়ଶαΠτ͕γΣΞ͍ͤͨ͞ঢ়ଶ
γΣΞϙΠϯτͷઃܭγΣΞϙΠϯτ↓URL
ಈత URL ૢ࡞
ಈత URL ૢ࡞ಈతʹίϯςϯπΛૢ࡞
ಈత URL ૢ࡞ಈతʹ URL Λૢ࡞
ಈత URL ૢ࡞JavaScripthistory.pushState
URL ͔ΒίϯςϯπJavaScript Ͱੜ (location.href)αʔόʔͰੜ (CGI)੩తίϯςϯπ
JavaScript frameworkpjaxpushState + ajax = pjaxhttps://github.com/defunkt/jquery-pjax
Caution
ҙ (1)ϒϥβͷରԠঢ়گhistory.pushState
ҙ (1)Can I use...http://caniuse.com/#feat=history
ҙ (2)ΞφϥΠζ
ҙ (2)Google Analytics_trackPageview()ΞΫηεϩάղੳ
Conclusion
·ͱΊ৽͍͠ UIAjax/Parallax৽͍͠ઃܭγΣΞϙΠϯτಈత URL ૢ࡞ (JavaScript)
ઃܭͷஈ֊Ͱ෯͍ݕ౼͕ඞཁ
·ͱΊ +ασΟϨΫλʔσβΠφʔϓϩάϥϚʔ
·ͱΊ +ασΟϨΫλʔσβΠφʔϓϩάϥϚʔӽڥਫ਼ਆ
Thank youhttp://twitter.com/kiyoharahttp://facebook.com/tomokazu.kiyohara
Example SitesAjax 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 Sitescultural 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 )
Photo Credithttp://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/