Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webサイトの新たな 「ページ設計」
Search
Tomokazu Kiyohara
December 08, 2012
Technology
2
340
Webサイトの新たな 「ページ設計」
WDF Vol.7 の発表資料。シェアポイントとしての URL を設計しようという話。
Tomokazu Kiyohara
December 08, 2012
Tweet
Share
More Decks by Tomokazu Kiyohara
See All by Tomokazu Kiyohara
読めるかな?ちょっとレアなRubyの記法
kiyohara
0
67
Lightning Talk イベント運営を いいがにやりたい
kiyohara
0
69
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
390
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.7k
Algolia in CAMPFIRE
kiyohara
0
3.7k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
320
Web to macOS native app
kiyohara
0
410
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
280
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
510
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
370
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
690
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
KotlinConf 2025_イベントレポート
sony
1
110
AWSで推進するデータマネジメント
kawanago
1
1.3k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
680
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Side Projects
sachag
455
43k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Reviewing Like a Champion
maltzj
525
40k
The Cult of Friendly URLs
andyhume
79
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Rails Girls Zürich Keynote
gr2m
95
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
WebαΠτͷ৽ͨͳ ʮϖʔδઃܭʯ 2012/12/08 WDF vol.7
Page
ϖʔδ ຊ৽ฉɺҹͳͲͷߏ୯Ґɻ1ຕͷࢴͷ 1ͭͷ໘͕1ϖʔδʹ૬ɻ·ͨɺͦͷ൪߸ɻ (via wikipedia) ཧతͳ੍ݶʹΑͬͯ۠ΒΕͨʮ୯Ґʯ
Web αΠτͷϖʔδ Web ϒϥβʹҰʹදࣔ͞ΕΔσʔλͷ· ͱ·Γ (via e-Words) ใͷߏԽʹΑͬͯ۠ΒΕͨʮ୯Ґʯ
Web αΠτͷϖʔδ Web ϒϥβʹҰʹදࣔ͞ΕΔσʔλͷ· ͱ·Γ (via e-Words) ใͷߏԽʹΑͬͯ۠ΒΕͨʮ୯Ґʯ
Web αΠτͷϖʔδ Web ϒϥβʹҰʹදࣔ͞ΕΔσʔλͷ· ͱ·Γ (via e-Words) ใͷߏԽʹΑͬͯ۠ΒΕͨʮ୯Ґʯ Information Architecture
(IA)
Social Network
Pageઃܭ ≒ URLઃܭ
Pageઃܭ ≒ URLઃܭ
Pageઃܭ ≒ URLઃܭ Share
User Interface
৽ͨͳදݱख๏ Ajax Parallax
Ajax Asynchronous JavaScript + XML ΣϒϒϥβͰඇಉظ௨৴ͱΠϯλʔϑ ΣΠεͷߏஙͳͲΛߦ͏ٕज़ͷ૯শ ը໘ભҠΛΘͳ͍ಈతͳWebΞϓϦέʔγ ϣϯͷ࡞͕࣮ݱՄೳʹ
Demo
Parallax ࢹࠩ εΫϩʔϧʹมԽΛ࣋ͨͤΔ͜ͱͰԞߦ ͖Λදݱ͢Δख๏ εΫϩʔϧΛτϦΨʹ༷ͯ͠ʑͳࢹ֮ޮՌΛ දࣔ͢Δख๏
Demo
՝
՝ ୯Ұϖʔδ(URL) ʹେྔͷใ
՝ ୯Ұϖʔδ(URL) ʹେྔͷใ γΣΞग़དྷͳ͍ίϯςϯπͷൃੜ
՝ ୯Ұϖʔδ(URL) ʹେྔͷใ γΣΞग़དྷͳ͍ίϯςϯπͷൃੜ ͓ΒͤɾτϐοΫɾྍ࣌ؒ… ྍ࣌ؒΛγΣΞ͍ͨ͠ͷʹτοϓϖʔδʹ…
ΞϯΧʔλάʁ <a name="tag"> http://abc/xyz.html#tag ಈతϖʔδͰ͑ͳ͍ λά͖URL͕Θ͔Βͳ͍ (γΣΞͰ͖ͳ͍)
Solution
ղܾࡦ (1) γΣΞϙΠϯτͷઃܭ (2) ಈత URL ૢ࡞
γΣΞϙΠϯτ γΣΞ͢Δը໘ͷঢ়ଶ
γΣΞϙΠϯτ γΣΞ͢Δը໘ͷঢ়ଶ ը໘ “Ґஔ” ͚ͩͰͳ͍
γΣΞϙΠϯτͷઃܭ ๚ऀ͕γΣΞ͍ͨ͠ঢ়ଶ αΠτ͕γΣΞ͍ͤͨ͞ঢ়ଶ
γΣΞϙΠϯτͷઃܭ γΣΞϙΠϯτ ↓ URL
ಈత URL ૢ࡞
ಈత URL ૢ࡞ ಈతʹίϯςϯπΛૢ࡞
ಈత URL ૢ࡞ ಈతʹ URL Λૢ࡞
ಈత URL ૢ࡞ JavaScript history.pushState
URL ͔Βίϯςϯπ JavaScript Ͱੜ (location.href) αʔόʔͰੜ (CGI) ੩తίϯςϯπ
JavaScript framework pjax pushState + ajax = pjax https://github.com/defunkt/jquery-pjax
Caution
ҙ (1) ϒϥβͷରԠঢ়گ history.pushState
ҙ (1) Can I use... http://caniuse.com/#feat=history
ҙ (2) ΞφϥΠζ
ҙ (2) Google Analytics _trackPageview() ΞΫηεϩάղੳ
Conclusion
·ͱΊ ৽͍͠ UI Ajax/Parallax ৽͍͠ઃܭ γΣΞϙΠϯτ ಈత URL ૢ࡞ (JavaScript)
ઃܭͷஈ֊Ͱ ෯͍ݕ౼͕ඞཁ
·ͱΊ +α σΟϨΫλʔ σβΠφʔ ϓϩάϥϚʔ
·ͱΊ +α σΟϨΫλʔ σβΠφʔ ϓϩάϥϚʔ ӽڥਫ਼ਆ
Thank you http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara
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 )
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/