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
65
Lightning Talk イベント運営を いいがにやりたい
kiyohara
0
65
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
380
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.7k
Algolia in CAMPFIRE
kiyohara
0
3.7k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
310
Web to macOS native app
kiyohara
0
400
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
280
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
510
Other Decks in Technology
See All in Technology
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
210
夢の印税生活 / Life on Royalties
tmtms
0
170
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
5
2.7k
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
2
160
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
110
React Server ComponentsでAPI不要の開発体験
polidog
PRO
1
350
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
9
510
20250818_KGX・One Hokkaidoコラボイベント
tohgeyukihiro
0
120
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
230
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
210
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
150
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Making Projects Easy
brettharned
117
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Documentation Writing (for coders)
carmenintech
73
5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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/