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
330
Webサイトの新たな 「ページ設計」
WDF Vol.7 の発表資料。シェアポイントとしての URL を設計しようという話。
Tomokazu Kiyohara
December 08, 2012
Tweet
Share
More Decks by Tomokazu Kiyohara
See All by Tomokazu Kiyohara
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
310
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.6k
Algolia in CAMPFIRE
kiyohara
0
3.4k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
260
Web to macOS native app
kiyohara
0
340
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
230
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
470
ベッドで技術書を快適に読むただひとつの方法
kiyohara
19
23k
JavaScript で OS X を自動操作
kiyohara
1
470
Other Decks in Technology
See All in Technology
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
640
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
初心者に Vue.js を 教えるには
tsukuha
5
390
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Nix入門パラダイム編
asa1984
2
200
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
730
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
Featured
See All Featured
The Invisible Side of Design
smashingmag
297
50k
Become a Pro
speakerdeck
PRO
24
5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Code Reviewing Like a Champion
maltzj
519
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
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/