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
Brief Introduction of jQuery Mobile
Search
Tak Yanagida
November 10, 2013
Programming
0
120
Brief Introduction of jQuery Mobile
jQuery Mobileでモバイル対応してみた
jsCafe16で発表した資料です。お好みダムサーチのモバイル版を開発した際の経験を簡単にまとめました。
Tak Yanagida
November 10, 2013
Tweet
Share
More Decks by Tak Yanagida
See All by Tak Yanagida
Non-mercator Projection with Mapnik
tyanagida
1
1.1k
How much we have to study English?
tyanagida
0
110
Functional Programming Applied in JS
tyanagida
0
92
PowerShell for LL Users
tyanagida
0
1.2k
Other Decks in Programming
See All in Programming
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
530
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
35
14k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.9k
CI改善もDatadogとともに
taumu
0
110
Honoとフロントエンドの 型安全性について
yodaka
5
330
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
Grafana Cloudとソラカメ
devoc
0
140
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.1k
ソフトウェアエンジニアの成長
masuda220
PRO
10
920
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fireside Chat
paigeccino
34
3.2k
Unsuck your backbone
ammeep
669
57k
Statistics for Hackers
jakevdp
797
220k
Music & Morning Musume
bryan
46
6.3k
Gamification - CAS2011
davidbonilla
80
5.1k
Designing Experiences People Love
moore
139
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
jQuery Mobile 紹介 柳田 @tyanagida
ダムの地図公開してます http://maps.ontarget.cc/dams/sp_ja.php
実装の概要 • アプリじゃなくてWebページ • HTMLは1つだけ • jQuery Mobileを利用 • Google
Maps API v3を利用 モバイル対応してます
モバイル版の作り方 1. PC版を見て、画面の分け方を考える
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div> data-xxxx: jQuery Mobile用の属性
<div data-role="navbar"> <ul> <li><a href="#map_page" data-icon="home">地図</a></li> <li><a href="#side_area" data-icon="bars">一覧</a></li> 3.
navbarも追加 画面切替はハッシュ切り替え
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.js"></script>
4. jQuery Mobileを読み込み 簡単!! Maps APIには苦労したけど…
補足: ドキュメント ここまで紹介したように、jQuery Mobileは、通常のjQueryや jQuery UIと違って、API呼出しではなく、HTMLマークアップが標 準的な使い方です。したがって、APIドキュメントよりも、公式サ イトのDEMOページを参考にすることをおすすめします。 http://view.jquerymobile.com/1.3.2/demos/