いまもっとも注目されているモバイルフレームワーク「jQuery Mobile」。jQuery Mobileの基本的な使い方から、実践的なデザインテクニックまで。iPhone/Androidなどのスマートフォンサイト制作にjQuery Mobileを活用する方法を具体的に解説します。<cj:inc template="792" element_id="673471" />
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」(Web Professional Books)の著者・西畑一馬さんが解説します。(編集部) 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
個人でも商用でも、そしてクライアントのプロジェクトでも無料で利用できる、スマートフォン・タブレット向けのサイトが簡単に作成できるjQuery Mobileを使ったテンプレートを紹介します。 Cooky -Free Mobile Site Template Cookyの特徴とラインセス Cookyのデモ(ページ) Cookyのデモ(エフェクト・テンプレート) Cookyの特徴とライセンス Cookyはスマートフォン・タブレット向けのサイトが簡単につくれるよう、ページやエレメントが一式揃ったテンプレートです。 その名の通り、特に飲食をベースにしたビジネスやブログなどを想定してデザインされています。 ValidなHTML5+CSS3で実装された11ページ。 グリッド、アコーディオン、リスト、ボタンなども用意。 レスポンシブ対応のスライダー。 コンタクトフォーム。 jQuery Mobile, G
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery Mobileとは? jQuery Mobileは、jQueryをベースとした、「スマートフォン向けフレームワーク」です。 もっと簡単に言うと、「スマートフォン向けコンテンツ制作の土台を作ってくれるソフトウェア」です。 スマートフォン向けの直観的かつ使いやすい、ネイティブアプリケーションさながらのページやUI※1が、瞬時にしてできあがります。開発者はわずかなHTMLやJavascriptを書くだけです。 「UI」 ※1ユーザーインターフェースの略。jQuery MobileはわずかなHTMLの記述のみで、リストやボタン、ナビゲーションバーなどのスマホ向けUIを自動構築してくれる。 2010 年10 月にアルファ版がリリースされ、2011 年11 月ついにjQuery Mobile 1.0正式版が公開されました。現在も、jQuery の開発者であるJohn Resig 氏(@je
なかなか良かったので備忘録です。 Twitter Bootstrapのデザインを、 jQuery Mobileのテーマに起用した サンプルソースが公開されていま した。フレームワーク的にも使える かもしれない。 Twitter Bootstrap × jQuery Mobileです。既出ですけど良かったので。 JQMのデザイン変更用リソースです。ThemeRollerでもいいんですけどどうも微妙というか、肌に合わないのです。最初から作った方が早い気がしましたが、こうして変更されたものがあるならこれを元に変えると効率的になりそうです。同じ手法でbootswatchで配布されてるBootstrapテーマを起用しても良さそうですね。 Sample サンプルのQRコードです。↓ 何故かフォームのデザイン変更できなかったけど・・・まぁ自分で作ればいいかなw ご利用は以下よりどうぞ。 jQuery-M
連載:jQuery Mobile入門 第5回 jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ― 山田 祥寛 2012/05/17 前回までの内容で、マークアップだけで賄えるjQuery Mobileの主な機能をおおよそ解説した。jQuery Mobileを利用することで、JavaScriptのコードすら記述することなく、ネイティブ・アプリ・ライクなサイトを作成できることを実感いただけたと思う。 もっとも、jQuery Mobileの魅力は、その手軽さばかりではない。JavaScriptのAPIも充実しており、独自の機能をごく手軽に実装できる。連載第5回となる本稿では、それらJavaScript APIの中でも、「グローバル設定」と「イベント」について解説していく。 ■jQuery Mobileの動作をカスタマイズしよう ― グローバル設定 j
前回の基礎知識や開発環境の準備編で、基本的な勉強や開発環境は揃えましたので、本記事では具体的な制作に入っていきます。 どんな風に作るのか ハイクオリティで広範囲のプラットフォームに対応したスマートフォンサイトを作りあげるにあたって jQuery Mobile を使用していきます。また URL は統一して(スマホサイトを別 URL で作成せず)スマホアクセス時にスマホ用の出力に最適化します。そのため、サイトの構造に変更は加えませんが、全てのページにおいてスマホ用のレイアウトを出力できるように変更を加えていきます。 jQeury Mobile について スマホサイトの作成に jQuery Mobile について学んでいきます。今まで jQuery Mobile を使用したことがありませんので、今回一から全て勉強しました。といっても、基本的なことは全て下記サイトにありますので、jQuery Mo
jQuery Mobile Icon PackはjQuery Mobileで使えるアイコン集です。 jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。 アイコンの一覧です。 実際に使っている例。data-iconで指定するだけで使えます。 多数のアイコンが揃っています。 シンプルで使い勝手が良さそうです。 アイコン画像は全て一つの画像となっており、CSS Spriteで切り出すようになっています。このアイコン群を使う限り読み込みは一度なので高速に表示が可能です。 jQuery Mobile Icon PackはCSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。 MOONGIFTはこう見る 3Gを
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表 HTML5のタグを記述することで容易にモバイル対応のアプリケーションが開発できるフレームワーク「jQuery Mobile」に、マイクロソフトのタッチインターフェイスである「Metroスタイル」に対応したテーマが追加されたことがブログ「More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile」で明らかにされました。 このブログを投稿したAbu Obeida Bakhach氏は、先月マイクロソフトがオープンソースや標準規格などに対応するために設立した企業Microsoft Open Technologies,Incの一員です。 Metroスタイル
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQuery Mobile Autocomplete now available - andy matthews スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン。 スマホではアプリなんかでよく見られるオートコンプリートですが、スマホ用WEBサイトにこれを組み込みたいといった場合にこれが使えそうです。 デザインも良い感じですね 関連エントリ jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」 Android風の日付ピッカー実装用jQueryMobileウィジェット「Mobi Pick」 スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar(固定ツールバー)のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く