This domain name registration has expired and renewal or deletion are pending. If you are the registrant and want to renew the domain name, please contact your registration service provider.
jQuery Mobile とは jQuery Mobileはモバイルアプリケーション用のJavaScriptライブラリです。 jQuery Mobileを用いることにより、全てのスマートフォンOSに対応する統一されたUIや画面遷移などの機能を簡単に実装することができます。 PhoneGapにおけるアプリ開発において、jQuery MobileはUI面をPhoneGapが機能面をそれぞれ実装することで、さらにネイティブに近いアプリを作ることができるようになります。 jQuery Mobileを使用するにはjQuey Mobileのcssファイルとjsファイル、さらにjQueryのjsファイルをそれぞれページにロードする必要があります。 jQuery Mobileのダウンロードはこちら >> jQueryのダウンロードはこちら >> ページのレイアウト >> jQuery Mobil
jQuery Mobileのマークアップ用チートシートに続いて、ページ関連イベントのチートシートをつくりました。 » jQuery Mobile Page Event Cheat-sheet ページ遷移時のイベントは数も多く、「どの順番で呼ばれるんだっけ?」と忘れてしまうことがよくあるので、パッと見られる形であると便利かなと。 実はこのシートは、拙著「」(今日発売のハズ)に掲載した図の、体裁を整えたものです。各イベントの内容についても解説されていますので、よろしければお手元に(宣伝)。本家ドキュメントの意訳的なものは日本語リファレンスに載せていますが、書籍の方はもう少し噛み砕いたものになっています。 ちなみに、jQuery使いの人は習い性になってるだろう document.ready は、ランディング時には一度発生する(書いていませんが、mobileinitの後)ものの、ページ遷移時には一
2011/03/26 2011/03/26 10:30 jQuery Mobile - APIの利用でより細かなカスタマイズ 他と差別化できるjQuery Mobile jQuery Mobileに対して、楽に実装できる反面自由度に欠けるのではないか、という印象をお持ちの方も少ないかと思います。 私の過去のエントリでも、jQuery MobileがいかにHTML完結でサイト構築できるかに焦点を当てて紹介してきました。 過去のエントリ : jQuery Mobileのススメ - 商用利用に耐えうる3つの理由 jQuery Mobile - 標準テーマでらくらくデザイン jQuery Mobile - data-transition属性でアニメーション指定 ところがどっこい、jQuery Mobileは独自にJavascript・CSSを記述して、独自に拡張可能なように設計されています。 他の
このページはjQuery Mobileの用例/サンプルを扱っています。ここではjQuery Mobile 1.0を使用しています。 *勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい/間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。 【要注意】SONY Tablet S (SGPT11/OSバージョンが3.1の場合。購入時のまま) はデフォルトの状態ではjQuery Mobileは動作しません。これはSONY Tabletのブラウザがデフォルトではクイックビューモードの設定になっているためです。この設定になっていると通常のページも正しく動作しないことがあります。このクイックビューモードの設定を解除するには、ブラウザを起動した後、画面右上の設定ボタンをタップし「設定」を選択します。高度な設定のカテゴリを選
前回は「ツールバー」について紹介しました。 ボタンとは jQuery Mobileのボタンはモバイル端末上でボタンとして認識されやすいようなスタイル、また使いやすいよう最適化されています。 ボタンの指定 jQuery Mobileのボタンには大きく分けて2つの指定方法があります。指定方法が違うというだけで見た目は同じです。 リンクボタン フォームボタン リンクボタン リンクボタンはアンカーリンクに「data-role="button"」を指定することでボタンとして整形されます。 <a href="#" data-role="button">リンクボタン</a> リンクボタンを開く(このサンプルはChromeブラウザでの閲覧をおすすめします。) フォームボタン フォームボタンはbutton要素、input要素のsubmit,reset,button,imageのいずれかが指定されていればボタ
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
jQuery mobile で作ったスマフォ向けサイトにGoogle Maps APIを埋め込む 2011 年 6 月 28 日 – 4:22 PM category Webサイト開発・運営 tags Google Maps API, jQuery mobile Comments: 0 Trackbacks: 0 jQuery mobileでスマートフォン向けサイトを制作していたのですが、そういえばGoogle Maps APIを使った地図はどうやって埋め込むのが良いのだろうと思って、ググッていました。 そこで下記サイトが参考になったので、早速導入してみました。 半人前ウェブディレクターの奮闘記 – jquery mobileでgoogle mapを表示をするサンプル DEMO3が結論のようですので、そのソースを参考にしました。 1.headタグ内にGoogle Maps APIのJa
HOME>WEBプログラム覚書>[jQuery Mobile]初期化イベントメモ [jQuery Mobile]初期化イベントメモ jQuery Mobileは読み込まれてから mobileinit -> pagebeforecreate -> pagecreate -> pageinit の順番でイベントが発生する。 mobileinit jQuery Mobileがロードされた時に真っ先に発生するイベント。jQuery Mobileを読み込む前に記述しておくか読み込む。 主にjQuery Mobileの各種設定を変更したりする場所。 jQuery.ready()よりも前なのでDOMの操作はおこなえないっぽい。
jQuery Mobile初のメジャーバージョンアップとなる1.1.0が公開されました。 幾つかの大きな変更が加えられたバージョン1.1ですが、特に重要なポイントとして、固定ツールバーの変更、ページ切り替え効果の完全再開発、フォーム要素の洗練などが挙げられます。 また、当面は1.0と1.1が併用されることを想定し、それぞれのバージョン向けのテーマローラーが使えるようになっています。1.0で作られたテーマは、簡単に1.1へ変換できるようです。 更に、長い間リリースされると伝えられてきたダウンロードビルダーは、今週中にはアルファ版がリリースされる見込みだということです。 主な変更点は、次の通り。 固定ツールバーの抜本的書き換え 以前から問題がありつつも、ブラウザの対応状況などが原因でスクリプトによる仮想的な固定ツールバーを実装していましたが、今回 position:fixed の対応状況が一定
jQuery UIを利用した例として、もう1つ「タブパネル」を作ってみましょう。タブパネルは、タブをクリックして表示を切り替えるGUIですね。スマートフォンでも同様の働きをするGUIはあります。タブパネルが画面に表示されても、それほど違和感はないでしょう。 下のリスト欄に、簡単なサンプルをあげておきます。アクセスすると、「No,1」「No,2」という2つのタブを持ったパネルが表示されます。もちろん、タブをクリックすれば表示を切り替えることができます。 タブパネルの表示は、ちょっと面倒です。あらかじめ指定された形式に従ってタグを用意して置かなければいけません。整理すると以下のような形になります。 <div id="タブパネルのID"> <ul> <li><a href="#1つ目の表示">1つ目のタブ</a></li> <li><a href="#2つ目の表示"2つ目のタブ</a></li>
iPhoneやAndroid(アンドロイド)向けのスマートフォンサイトを制作する際、 各キャリアの縦向き、横向きを考慮した画面設計やHTML構成を考えて制作しなければなりません。 それぞれ端末ごとに細かな設定の変更が必要な場合など OSの判別をする必要になってきますが、 そんな際に使える、jQueryを使って簡単にOSを判別し、それぞれCSSクラスを追加し 画面の縦/横それぞれ切り替わった際にも別々のクラスを追加するスクリプトの紹介。 jQuery SmartPhone SWITCH アクセスされたOSと画面の向きを判別して それぞれ<body>タグにCSSクラスを追加します。 追加するCSSクラスは以下の通り。 —————————————————– iPhoneには「body class=”iphone”」追加 iPadには「body class=”ipad”」追加 Androidには「
jQuery Mobile はデフォルトでページ遷移を Ajax で処理してくれます。ただ、CakePHP はデフォルトで Ajax を勝手に判断して Ajax のレイアウトを返してくれるように設計されています。そのため、いくら jQuery Mobile に対応させたモバイル用のテーマを作成したとしても、それが読み込まれないため、以下のように Undefined 表示されてしまいます。 だからといって jQuery Mobile の Ajax 機能を完全に停止してしまうのではなく、モバイルアクセス時のみ Ajax でレイアウトが変更されないように、CakePHP 側をなんとかして設定するのが良いのかなと思います。 ただ、現状 CakePHP の Ajax 時の強制的に ajax.ctp が使われるのを防ぐ方法が分からず、コアファイルも弄るのも微妙だったので Layout/ajax.ctp
if($this->RequestHandler->isMobile()) { echo 'mobile website!'; } ただし、RequestHandlerComponent::is_Mobile() では日本の携帯全てに対応しているわけではないため、日本の携帯にもある程度対応している Ktai Library for CakePHP というものを使用すると良いそうですが、今回は iPhone と Android にスマホ用ページを表示できれば良いので、デフォルトの判定で実装していきます。 CakePHP でモバイルテーマを作成する AppController にて以下の記述をすることで、モバイルでアクセスした場合にテーマ Mobile を宣言します。
Fireworks CS6には、jQuery Mobileのテーマを作成する機能が追加されました。CS5/CS5.1向けに同様の機能を提供する拡張機能「Fireworks CSS3 Mobile Pack」がAdobe Labsにて提供されていますが、CS6では日本語化されているなどの違いがあります。 アイコンの変更 早速、jQuery Mobileのテーマを作成してみましょう。メニューから[コマンド]→[jQuery Mobileテーマ]→[新規テーマを作成]を選択すると、jQuery Mobileテーマ作成用の画面が表示されます。jQuery Mobileのデフォルトテーマには5つのスウォッチ(カラーバリエーションなもの)が用意されており、Fireworksでも初期状態では5つのスウォッチがページとして定義されています。さらに、スウォッチで共通に利用するアイコンなどを設定するページ、テ
Publickeyのコンテンツをモバイル向けに最適化した「Publickey Smart Edition」をバージョンアップしました。今回はjQuery Mobile 1.1を使い、モバイル対応の機能を以前よりも活用したものになりました。 jQuery Mobile自身、以前のバージョンより動きがスムーズになったことに加え、今回からjQuery Mobileの標準機能をそのまま使うことでページのロード時間も短くなりました。 画面遷移ではアニメーションを使い、画面をスワイプすると前記事、次記事へ移動するようにしたので、よりモバイルらしいWebアプリケーションになったと思います。 画面サイズや機種などに依存しないように作ったつもりなので、iPhone/iPod touch/Android/Windows Phoneなど主要なスマートフォンで参照できるはずです(手許にあるiPod Touch/i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く