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
70
Lightning Talk イベント運営を いいがにやりたい
kiyohara
0
79
首負担皆無!ゼログラビティ プログラミングスタイル
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
290
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
510
Other Decks in Technology
See All in Technology
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
380
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
150
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.6k
DMMの検索システムをSolrからElasticCloudに移行した話
hmaa_ryo
0
140
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.5k
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
400
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
1.7k
書籍『実践 Apache Iceberg』の歩き方
ishikawa_satoru
0
200
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
290
Okta Identity Governanceで実現する最小権限の原則
demaecan
0
180
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Typedesign – Prime Four
hannesfritz
42
2.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Experiences People Love
moore
142
24k
Done Done
chrislema
185
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Speed Design
sergeychernyshev
32
1.2k
Documentation Writing (for coders)
carmenintech
75
5.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
PRO
32
15k
Writing Fast Ruby
sferik
630
62k
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/