読者です 読者をやめる 読者になる 読者になる

アールテクニカ地下ガレージ

アールテクニカ株式会社の製品開発・研究開発・日々の活動です

jQuery Mobileの概要

jQuery jQuery Mobile HTML

Author

中村@アールテクニカ

アールテクニカの中村です。
最近案件でスマホがメインターゲットのWebアプリを開発することになったため、jQuery Mobileというライブラリを使用しました。なかなか使えるライブラリだと思いますのでjQuery Mobileの概要について簡単に説明したいと思います。

jQuery Mobileとは?

jQueryプロジェクトチームによって開発された、タッチ操作に最適化したウェブ開発のためのフレームワークです。
HTMLの記述だけでもスマホアプリの様なUIが実現出来ます。

おもな機能

jQuery Mobileには多くの機能がありますが、ここでは通常のHTML+CSSだけでは実現できないネイティブアプリライクな機能をいくつか紹介します。
以下の機能は、jQueryおよびjQuery Mobileを読み込んでいれば後はHTMLの記述だけで実現出来ます。

ツールバー

ツールバーは、ヘッダーおよびヘッダー実現する機能です。
data-role属性に、"header"または"footer"を指定します。

data-position="fixed"を設定することで、画面上下にヘッダー・フッターが固定されます。
また、コンテンツ部分をタップすることでヘッダー・フッターの表示・非表示が切り替えられます。

jQuery Mobielの公式サイトにはデモページがあり実際に動作を確認したりサンプルコードを見ることも出来ます。
Toolbar - jQuery Mobile Demos
Fixed Toolbars - jQuery Mobile Framework

f:id:artteknika_nakamura:20160831210223p:plain

パネル

画面横からスライドインしてくるパネルを実現する機能です。
スワイプまたはパネル外のタップでパネルを閉じることが可能です。

パネルとなるdivタグの属性にdata-role="panel"とdata-display="overlay"を記述し、あとはaタグのhrefにパネルdivのIDを指定するだけでパネルを開くことが出来ます。

Panel - jQuery Mobile Demos

f:id:artteknika_nakamura:20160831210254p:plain

トランジション

aタグのdata-transition属性に"fade"や"slide"を指定することでリンク先ページにトランジションエフェクト付きで遷移出来ます。
ただし、トランジションが有効なのは同一ドメインのページであることと、通常のページ遷移とは違いAJAXでページを読み込み現在のページのDOMに挿入して表示しているため注意が必要です。

Transitions - jQuery Mobile Demos

f:id:artteknika_nakamura:20160831210325p:plain


jQuery Mobileは、簡単にスマホGUIが実現できる一方、ページ遷移などは独自の処理を行っているため意図した挙動になならないこともあります。
次回は、jQuery Mobileのページ遷移について詳しく解説したいと思います。

Author

中村@アールテクニカ

アールテクニカのSE兼プログラマ。Web系のサーバサイド・フロントエンドからスマホ・PCのネイティブアプリまでソフトウェア開発全般が守備範囲。最近はハードウェア開発にも興味あり。

スポンサーリンク