jQueryモバイル

jQueryモバイル
開発者	jQuery チーム
初回リリース	2010年10月16日
安定リリース	1.4.5 / 2014年10月31日
プレビューリリース	1.5.0-rc1 / 2018年9月10日
リポジトリ	github.com/jquery/jquery-mobile ;
書かれた	JavaScript
プラットフォーム	モバイルブラウザのサポートを参照してください
サイズ	351 KB / 142 KB (縮小) / 40 KB (縮小、gzip 圧縮)
タイプ	モバイルアプリケーションフレームワーク
ライセンス	マサチューセッツ工科大学
Webサイト	jquerymobile.com

jQuery Mobileは、 jQueryプロジェクトチームによって開発された、タッチ操作に最適化されたWebフレームワーク（モバイルフレームワークとも呼ばれる）であり、具体的にはJavaScriptライブラリです。開発は、成長しつつも多種多様なタブレットとスマートフォンの市場によって必要とされた、多くのスマートフォンやタブレットコンピューターと互換性のあるフレームワークの作成に重点を置いています。[ 3 ] jQuery ^Mobile^フレームワークは、他のモバイルアプリフレームワーク^[5]や、PhoneGap、Worklight、^[6]などのプラットフォームと一致しています。

2021年10月7日現在、jQuery Mobileは非推奨となっています。^[7]

特徴

Android、iOS、Windows Phone、Blackberry、WebOS、Symbianなど、すべての主要なデスクトップブラウザーおよびすべての主要なモバイルプラットフォームと互換性があります。
jQueryコア上に構築されているため、jQuery 構文にすでに精通している人にとっては学習曲線が最小限に抑えられます。
カスタムテーマの作成を可能にするテーマフレームワーク。
依存関係が制限され、軽量なので速度が最適化されます。
同じ基礎コードベースが、どの画面にも自動的に拡張されます。
最小限のスクリプトでページをレイアウトするための HTML5 駆動型構成。
AJAXを利用したナビゲーションとアニメーション化されたページ遷移により、pushState を通じてセマンティック URLを作成する機能が提供されます。
タッチに最適化され、プラットフォームに依存しない UI ウィジェット。

（出典：jQuery Mobileウェブサイトより）^[3]

使用例

$ ( 'div' ). on ( 'tap' , function ( event ){ alert ( '要素がタップされました ' ); });

$ ( document ). ready ( function (){ 
$ ( '.myList li' ). on ( 'click touchstart' , function () { $ ( '.myDiv' ). slideDown ( '500' ); }); });

基本的な例

以下は、HTML5 セマンティック要素を利用した基本的な jQuery Mobile プロジェクトです。jQuery および jQuery Mobile JavaScript ライブラリ、およびスタイルシートにリンクすることが重要です (ファイルはダウンロードしてローカルにホストできますが、jQuery CDNでホストされているファイルにリンクすることをお勧めします)。

プロジェクトの画面は、の HTML5 要素とによって定義されます。sectionはHTML5属性の例であり、この場合は jQuery Mobile によって定義されることに注意してください。ページには、とのを持つ要素と要素が含まれる場合があります。その間には、のとのを持つ要素が含まれる場合があります。最後に、のを持つ要素が存在する場合があります。 data-rolepagedata-roledataheaderfooterdata-roleheaderfooterarticlerolemainclassui-contentnavdata-rolenavbar

1 つの HTML ドキュメントには複数のsection要素を含めることができ、したがって1 画面以上のコンテンツをhref="#second"含めることができます。この方法では、複数ページのコンテンツを含む 1 つのファイルを読み込むだけで済みます。1 つのページは、ページの id 属性 (例) を参照することにより、同じファイル内の別のページにリンクできます。

以下の例では、他の 2 つの data- 属性が使用されています。data-theme属性は、ブラウザにレンダリングするテーマを指示します。data-add-back-btn属性をに設定すると、ページに戻るボタンが追加されますtrue。

最後に、属性を介して要素にアイコンを追加できますdata-icon。jQuery Mobile には、よく使用される 50 個のアイコンが組み込まれています。

この例で使用されているデータ属性の簡単な説明:

data-role – ヘッダー、コンテンツ、フッターなど、要素の役割を指定します。

data-theme – コンテナー内の要素に使用するデザインテーマを指定します。a または b に設定できます。

data-position – 要素を固定するかどうかを指定します。固定する場合は、上部 (ヘッダーの場合) または下部 (フッターの場合) にレンダリングされます。

data-transition – 新しいページを読み込むときに使用する 10 個の組み込みアニメーションの 1 つを指定します。

data-icon – 要素に追加できる 50 個の組み込みアイコンの 1 つを指定します。

<!doctype html> 
< html > 
    < head > 
		< meta  charset = "utf-8" > 
		< title > jQuery Mobile の例</ title > 
		< meta  name = "viewport"  content = "initial-scale=1, user-scalable=no, width=device-width" > 
		< link  rel = "stylesheet"  href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" > 		
    </ head >
 
    < body > 
        < section  data-role = "page"  id = "first"  data-theme = "a" > 
            < header  data-role = "header"  data-position = "fixed" > 
                < h1 >ページ 1 ヘッダー</ h1 > 
            </ header >
 
            < article  role = "main"  class = "ui-content" > 
                < h2 > Hello, world! </ h2 > 
                < a  href = "#second"  data-role = "button"  data-inline = "true"  data-transition = "flow"  data-icon = "carat-r"  data-iconpos = "right" >ページ 2 へ移動</ a > 
            </ article >
 
            < footer  data-role = "footer"  data-position = "fixed" > 
                < h4 >ページ 1 フッター</ h4 > 
            </ footer > 
        </ section >
 
        < section  data-role = "page"  id = "second"  data-theme = "b" > 
            < header  data-role = "header"  data-position = "fixed"   data-add-back-btn = "true" > 
                < h1 >ページ 2 ヘッダー</ h1 > 
            </ header >
 
            < article  role = "main"  class = "ui-content" > 
                < h2 >サンプルページ</ h2 > 
            </ article >
 
            < footer  data-role = "footer"  data-position = "fixed" > 
                < h4 >ページ 2 フッター</ h4 > 
            </ footer > 
        </ section > 
		< script  src = "https://code.jquery.com/jquery-1.11.1.min.js" ></ script > 
		< script  src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></ script > 
    </ body > 
</ html >

テーマ設定

jQuery Mobile は、開発者がカラースキームや UI 機能の特定の CSS 側面をカスタマイズできるテーマ設定フレームワークを提供します。開発者は、jQuery Mobile ThemeRoller ^[8]アプリケーションを使用してこれらの外観をカスタマイズし、ブランド化されたエクスペリエンスを作成できます。ThemeRoller アプリケーションでテーマを開発した後、プログラマーはカスタム CSS ファイルをダウンロードしてプロジェクトに含め、カスタムテーマを使用できます。^[9]

各テーマには最大 26 個の固有のカラー「スウォッチ」を含めることができ、各スウォッチはヘッダーバー、コンテンツ本体、およびボタンの状態で構成されます。開発者は、異なるスウォッチを組み合わせることで、テーマごとに 1 つのスウォッチだけを使用する場合よりも幅広い視覚効果を作成できます。テーマ内で異なるスウォッチを切り替えるのは、HTML 要素に「data-theme」という属性を追加するだけです。

デフォルトの jQuery Mobile テーマには、「a」と「b」という 2 つの異なるカラースウォッチが付属しています。以下は、「b」スウォッチを使用してツールバーを作成する方法の例です。

< div  data-role = "header"  data-theme = "b" >  
	< h1 >ページタイトル</ h1 >  
</ div >

（出典：jQuery Mobileウェブサイトより）^[3]

すでに、サードパーティ組織によって開発およびサポートされているオープンソーススタイルのテーマがいくつかあります。そのようなオープンソーススタイルのテーマの1つは、Microsoft Open Technologies, Inc. によって開発およびリリースされた Metro スタイルのテーマです。^[10] Metro スタイルのテーマは、 Microsoft がモバイルオペレーティングシステムで使用しているMetro (デザイン言語)の UI を模倣することを目的としています。

モバイルブラウザのサポート

鍵：

A - 高品質。少なくともメディアクエリを利用できるブラウザー (jQuery Mobile の要件)。これらのブラウザーは積極的にテストされますが、jQuery Mobile のすべての機能を利用できない可能性があります。
B - 中程度の品質。日々のテストを行うのに十分な市場シェアを持たない、有能なブラウザです。これらのブラウザを支援するために、バグ修正が引き続き適用されます。
C - 低品質。メディアクエリを利用できないブラウザー。jQuery Mobile スクリプトや CSS は提供されません (プレーン HTML とシンプルな CSS にフォールバックします)。
* - 今後リリースされるブラウザ。このブラウザはまだリリースされていませんが、アルファ/ベータテスト中です。

（出典：jQuery Mobileウェブサイトより）^[3]

参照

参考文献

^ jQuery Foundation - jquerymobile.com (2010-10-16). 「jQuery Mobile Alpha 1 がリリースされました」。blog.jquerymobile.com 。2014-05-22閲覧。
^ jQuery Foundation - jquery.org (2012-09-10). 「jQuery ライセンスの変更」。Blog.jquery.com。2013-10-09に取得。
^ abcd 「モバイル段階的ブラウザサポート」。
^ 「スマートフォンの世界的台頭」。2018年6月17日時点のオリジナルよりアーカイブ。2011年4月27日閲覧。
^ 「jQuery Mobile がモバイル Web アプリ開発に適している理由」
^ 「IBM Worklight - 米国」。Worklight.com 。 2013年10月9日閲覧。
^ 「jQuery のメンテナーは、jQuery Mobile の廃止とともに近代化イニシアチブを継続」。jQuery ブログ。2022年12 月 6 日閲覧。
^ 「ThemeRoller」。
^ 「JQuery Mobile テーマの概要」。
^ 「MS Open Tech からのさらなるニュース: jQuery Mobile 向けオープンソース Metro スタイルテーマの発表」。2014 年 8 月 16 日時点のオリジナルよりアーカイブ。

さらに読む

Doyle, Matt (2014 年 3 月 18 日)。jQuery Mobile でモバイル Web アプリをマスター (第 4 版)。Elated Books。p. 567。ISBN 978-0-9873115-3-5。
ペレティエ、ジェフ（2013 年 4 月 25 日）。モバイルアプリマニュアル: ブループリント（第 1 版）。Withinsight Publishing。p. 96。ISBN 978-0989072106。
マン、ジュリオ (2011 年 6 月 23 日)。jQuery Mobile First Look (第 1 版)。Packt Publishing。p . 216。ISBN 1-84951-590-5。
Reid, Jon (2011 年 7 月 7 日)。jQuery Mobile (第 1 版)。O'Reilly Media。p . 130。ISBN 1-4493-0668-3。
David, Matthew (2011 年 9 月 21 日)。HTML5 モバイルウェブサイト: jQuery Mobile、Sencha Touch、その他のフレームワークによる HTML5 の高速化 (第 1 版)。Focal Press。p . 250。ISBN 0-240-81813-X。
Broulik, Brad (2011 年 11 月 30 日). Pro jQuery Mobile (第 1 版). Apress . p. 350. ISBN 1-4302-3966-2。
Holzner, Steven E. (2012 年 1 月 2 日)。Sams 著「10 分で学ぶ jQuery Mobile」(第 1 版)。Sams . p. 240。ISBN 0-672-33557-3。
Firtman, Maximiliano (2012 年 1 月 31 日)。jQuery Mobile: Up and Running (第 1 版)。O'Reilly Media。p . 250。ISBN 1-4493-9765-4。
Duttson, Phill (2012 年 7 月 13 日)。Sams 著「24 時間で jQuery Mobile を独学で学ぶ」(第 1 版)。Sams . p. 475。ISBN 0-672-33594-8。
de Jonge, Adriaan, Dutson, Phillip (2012 年 11 月 2 日)。jQuery、jQuery UI、jQuery Mobile: レシピと例 (第 1 版)。Addison -Wesley Professional。p . 400。ISBN 978-0-321-82208-6。{{cite book}}: CS1 maint: 複数の名前: 著者リスト (リンク)

外部リンク

公式サイト
jQuery プロジェクト
jQuery Mobile のドキュメントとデモ
jQuery Mobile フレームワーク: 少ないコードでより多くのことを実現
jQuery Mobile C# ASP.NET Matthew David Elgert 著 2014-07-05 にWayback Machineでアーカイブ
PropertyCross、クロスプラットフォームのモバイルフレームワークの選択を支援: jQuery Mobile

[1] Query Foundation - jquerymobile.com (2010-10-16). 「jQuery Mobile Alpha 1 がリリースされました」。blog.jquerymobile.com 。2014-05-22閲覧。

[2] Query Foundation - jquery.org (2012-09-10). 「jQuery ライセンスの変更」。Blog.jquery.com。2013-10-09に取得。

[supportable-3] 「モバイル段階的ブラウザサポート」。

[The_Global_Rise_of_the_Smartphone-4] 「スマートフォンの世界的台頭」。2018年6月17日時点のオリジナルよりアーカイブ。2011年4月27日閲覧。

[5] 「jQuery Mobile がモバイル Web アプリ開発に適している理由」

[6] 「IBM Worklight - 米国」。Worklight.com 。 2013年10月9日閲覧。

[7] 「jQuery のメンテナーは、jQuery Mobile の廃止とともに近代化イニシアチブを継続」。jQuery ブログ。2022年12 月 6 日閲覧。

[ThemeRoller-8] 「ThemeRoller」。

[Theming_overview-9] 「JQuery Mobile テーマの概要」。

[More_news_from_MS_Open_Tech:_announcing_the_open_source_Metro_style_theme_for_jQuery_Mobile-10] 「MS Open Tech からのさらなるニュース: jQuery Mobile 向けオープンソース Metro スタイルテーマの発表」。2014 年 8 月 16 日時点のオリジナルよりアーカイブ。