これは楽しい！スマフォからPCサイトを操作する方法 ｜ iPhoneデザインボックス
たまにキャンペーンやプロモーションサイトでスマフォとPCが連携してスマフォから操作するとPCサイトで何か変化が起きるWebサイトをみてこれやってみたいと思い簡単な連携をやってみた。 連携のデモはこちら(iPhoneしか確かめてないです) スマフォ(iPhoneしか確かめてないです)でQRを読み込むと専用ページが表示されるので端末を傾けるとパンダが動きます。そして、その状態でPCサイトを見るとPCサイト側のパンダも一緒に動きます。 PCサイトとスマフォを紐付けるためにPCサイトを表示したときに専用のコードを発行してQRコードを作ります。そのQRコードをスマフォで読み取ると現在開いているPCサイトと紐付けることができます。 スマフォ側ではそのコードを使って操作情報をサーバーに送信します。この時Ajaxを使って非同期でサーバーに送りDBに保存します。 PC側では、非同期で定期的にDBへ情報を取得
iPhoneのclickイベントの挙動
iPhoneのclickイベントの挙動 本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。 iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。 <p class="target">ターゲット</p> このようなHTMLにclickイベントをバインドしていきます。 まずは次のようなコード。 $(".target").click(function(){ $(this).css("background","red"); }); sample これはちゃんと動きます。 次のコード。 $(".target").on("click",function(){ $(this).css("background","red"); }); これもちゃんと動きます。 sample これを踏まえた上で次からが動かないコ
iPhone風のあのスクロールをPCでも実現できる「jQuery.flickable」:phpspot開発日誌
jQuery.flickable - Demo iPhone風のあのスクロールをPCでも実現できる「jQuery.flickable」 スクロールしすぎると元に戻るスマホのスクロールをPCのブラウザで実現できます。 ドラッグ＆ドロップしてタッチ操作っぽくスクロールすることも可能で、素早く操作すればその分素早く移動したり、スマホでの動作そっくり。スマホでもそのまんま動くという優れもの スライダーっぽいものも作れて、iPhoneのホーム画面っぽいものも作れます 国産というところもいいですね。 これがOS標準で搭載されたらいいのにってぐらいによいライブラリでした。 関連エントリ スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 使うときだ
iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」:phpspot開発日誌
jQuery Toggles - Simon Tabor iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」 次のようなiPhoneっぽいデザインは勿論、独自デザインでも同じようなスイッチを実装できます。 実装コードは以下のように簡単に実装できます。 $('.toggle').toggles({click:$('.clickme')}); こういうデザインもアップル発という気がしますが、UI におけるアップルの影響はいつも高いなぁと思ってしまいますね 関連エントリ iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート 立体感がリアルなON・OFFスイッチ実装jQueryデモ
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
jQueryでMobile Safariの$(window).height()の正しい値を得る方法 - memo.yomukaku.net
2011-12-19 00:55 jQueryでは$(window).height()でブラウザーの表示可能領域の高さを知ることができます。ところが、iPadやiPhoneのMobile Safariがクライアントの場合に$(window).height()で値を得ると、実際よりもかなり小さな値が返ってきます（例えば、本来1024pxであるはずの高さが864pxとして得られる等）。 このため、困ったことになります。 例えば、下の図1はjavascriptで作成したpdf viewerです。jquery uiのdialogを使ってブラウザのviewportいっぱいに全画面表示しようとしており、表示可能領域の高さを得るために$(window).height()を実行したところ、864pxという値が返ってきて、その値を使用してビューワーのdialogの高さを設定したために上下に奇妙な空白ができ
[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina
Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retina Plugin jQuery Retina -GitHub [ad#ad-2] jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加える。 画像のファイル名に「-2x」を加える。 コールバック関数を使ってファイル名を指定する。 表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。 デモページ [ad#ad-2] jQuery Retinaの使い方 jQuery Retinaの使い方は簡単です。
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
jQuery Mobile でスマートフォンサイトを作ってみた
これだけ世間が「スマートフォン」「スマートフォン」といっているとやはりスマートフォンサイトは無視できないということもあり、jQuery Mobile を使って作ってみることにしました。 今ごろスマートフォンサイトを作っているのでは遅いくらいかもしれませんけど… といってもスマートフォンを持っていないので確認ができない 🙂 もちろんブラウザーの User Agent を変えれば、おおまかな確認はできる。 iPhoney というシミュレータを使う方法もあるし、Xcode and iOS SDK の iPhone Simulator.app や Android SDK を使えば問題なく確認はできると思います。 ただ、私の環境では諸事情があり iOS SDK も Android SDK もインストールしていません。 iPhoney は手軽でいいのですけど、”It’s the perfect 32
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
jQuery Mobileで作成したページをPC向けに表示するためのライブラリ『 jQuery Mobile for PC 』を公開しました | 諸葛亮孔明もびっくりですわ のブログ
2011/04/11 2011/04/11 08:00 jQuery Mobileで作成したページをPC向けに表示するためのライブラリ『 jQuery Mobile for PC 』を公開しました 過去数回に渡って jQuery Mobile の手軽さ・自由度の高さを紹介してきました。 過去のjQuery Mobile関連のエントリ : jQuery Mobileのススメ - 商用利用に耐えうる3つの理由 jQuery Mobile - 標準テーマでらくらくデザイン jQuery Mobile - data-transition属性でアニメーション指定 jQuery Mobile - APIの利用でより細かなカスタマイズ しかしjQuery Mobileは、実は大きな問題を抱えています。 jQuery Mobileの問題点 jQuery Mobileはスマートフォンに最適化されたサイトを作
[jQuery Mobile] ヘッダーにボタンをつける | H2O Blog.
jQuery Mobileのヘッダには、左右にボタンを付加することができます。こうすることで、iPhoneの設定画面などでよくある「戻る」ボタンや「保存」ボタンなどを画面上部に配置できます。 data-role属性が「header」となっているエリアに、次のように組み込みます。 [xml] <div data-role="header"> <a href="index.html" data-icon="delete">キャンセル</a> <h1>ツールバー</h1> <a href="index.html" data-icon="check">OK</a> </div> [/xml] 「data-icon」属性の中は、次のような種類があり、それぞれのアイコンが表示されます。 alert arrow-d arrow-l arrow-r arrow-u back check del
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
jQuery Mobile [基礎編]
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公海555000kk线路检测—首页（欢迎您）
jQuery Toggles | Simon Tabor
iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート:phpspot開発日誌
Home - Mgallery-JQ