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
62
Lightning Talk イベント運営を いいがにやりたい
kiyohara
0
61
首負担皆無!ゼログラビティ プログラミングスタイル
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
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
390
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
130
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
950
MCPに潜むセキュリティリスクを考えてみる
milix_m
2
950
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
440
[MIRU25] NaiLIA: Multimodal Retrieval of Nail Designs Based on Dense Intent Descriptions
keio_smilab
PRO
1
170
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
160
Kiroから考える AIコーディングツールの潮流
s4yuba
3
570
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
230
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
1.3k
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
280
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Music & Morning Musume
bryan
46
6.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Site-Speed That Sticks
csswizardry
10
730
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Become a Pro
speakerdeck
PRO
29
5.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing for humans not robots
tammielis
253
25k
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/