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
130
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.2k
How much we have to study English?
tyanagida
0
120
Functional Programming Applied in JS
tyanagida
0
96
PowerShell for LL Users
tyanagida
0
1.2k
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
820
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.3k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
110
ゲームの物理
fadis
5
1.5k
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
コンテキストエンジニアリング Cursor編
kinopeee
1
650
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
170
decksh - a little language for decks
ajstarks
4
21k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
480
ワープロって実は計算機で
pepepper
2
1.4k
令和最新版手のひらコンピュータ
koba789
14
7.9k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Optimizing for Happiness
mojombo
379
70k
Faster Mobile Websites
deanohume
309
31k
A designer walks into a library…
pauljervisheath
207
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
The Cult of Friendly URLs
andyhume
79
6.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Thoughts on Productivity
jonyablonski
69
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Navigating Team Friction
lara
188
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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/