jQuery Mobile 1.4.0ではフラットデザインが採用
jQuery Mobile 1.4.0ではフラットデザインが採用 jQuery Mobileの新しいバージョン、jQuery Mobile 1.4.0のAlpha版がリリースされました。 SVGアイコンの採用や、jQuery UIからいくつかのウィジェットが採用されるなど大幅にパワーアップされていますが、一番の大きな改善はテーマの一新です。 これまで、5種類のスマホライクなテーマがデフォルトで提供されていましたが、jQuery Mobile 1.4.0ではフラットデザインが採用されたlight と dark の2種類のテーマのみになります。 jQuery Mobile 1.4 lightテーマ 実際のサンプル jQuery Mobile 1.4 darkテーマ 実際のサンプル 今までのテーマと比較すると少しシンプルで単調な気がしますね。その分、カスタマイズが容易になるみたいです。 iOS7
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
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 これを踏まえた上で次からが動かないコ
Android4.0とiframe
Android4.0とiframe iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。 弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。 a要素に display:block を指定しても、必ずインラインになる position:fixed で配置した要素そのものがタップできない document.body.scrollTop が取得できない -webkit-tap-hightlight-color の指定が効かない ページ内のアンカーリンクが効かない ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう js等で要素を位置移動しても、要
Compassでスプライト画象を高速に書き出す方法
Compassでスプライト画象を高速に書き出す方法 CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。 以下のままですとすごく時間がかかるのですが、 $sprites: sprite-map("sprites/*.png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)) / 2; width: image-width(sprite-file($sprites, $name)) / 2; $ypos: round(nth(sprite-position($spri
Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する
Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する 作業環境をMac OS X 10.6 Snow LeopardからMac OS X 10.7 Lionにアップデートしたので、Xcodeのバージョンも3.2.6から4.2にアップデートしました。ちなみにXcode 4.2からまた無料でインストールできるようになっています。（続:Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用するも参考にしてください。） Xcode4.2のiOSシミュレータを立ち上げた所、バージョンの切り替えがiOS5のみで他のバージョンを選択できません。 古いバージョンのiOSシミュレータを立ち上げようと色々探しているとHDに「Developer-3.2.6」というフォルダが！ 以下の箇所にiPhone4.3以下のiOSシミュレータが格納されており、立ち上げること
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件 jQuery1.8でjQueryのanimateメソッドが刷新されましたが、その影響で一部のAndroid端末(P01-Dとか)のブラウザでanimate()メソッドの処理でブラウザが落ちてしまう現象が発生します。 対応策としては jQuery 1.7.2に差し替える animate()をCSS3アニメーションに変更する なんかが考えられます。 追記 jQuery1.8.3で解決されました。発生していた端末はAndorid2.3.5のようです。 関連エントリー AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ iOS6でtransitionアニメーションが少し遅れて開始する問題 スマートフォンとposition:fixedのバグ Android4.0とiframe Androidと
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:
Re:jQueryでセレクタを再指定する方法
Re:jQueryでセレクタを再指定する方法 ネタ元：jQueryでセレクタを再指定する方法: 小粋空間 なんとなく呼ばれた感じがしたので添削というか、私ならこう書くかなというところで。 ※2011/11/10 $(foos)って間違ってない?という指摘を受けて訂正、jQueryオブジェクトを再評価する必要ないですね。 ※2011/11/11 aをクリックした際にも変化するよと指摘を受けて修正、eqメソッドがjQuery1.4からマイナスにも対応してたんですね。 (function($){ $(document).on("change","input.foo",function(){ var foos = $("input.foo"); var index = foos.index(this) if(index>0){ var prevInput = foos.eq(index-1); i
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Androidの「target-densitydpi」でviewportの調整
Androidの「target-densitydpi」でviewportの調整 どうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。 「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます。 <meta name="viewport" content="width=device-width;target-densitydpi=device-dpi"> device-dpiを指定すると画面解像度とディスプレイ表示が同じサイズになります。これでかなり直感的でわかりやすくなると思いますが、画像が多いデザインだととファイルサイズが気になるところです。 キーワード指定では「low-dpi(120dpi)」、
はじめてのGoogle Chrome Extension
はじめてのGoogle Chrome Extension Google Chrome Extensionを作成したので、Google Chrome Extensionの作成方法について解説したいと思います。 今回作成したのは、ページがRSSを配信している場合はアドレスバーの右側にRSSアイコンを表示して、アイコンをクリックするとFastladderの登録ページに移動するというもの。ちょっとしたカスタマイズでお使いのRSSリーダー用に改造できる思います。 非常にざっくりとした解説ですが、一連のフローはわかると思います。また、Chromeの各種APIはChrome Extensions API リファレンスを参考にしてください。 最初の準備 まずは、Google Chrome のメニューにあるレンチアイコン→Tools→拡張機能 から拡張機能管理を開きます。 拡張機能管理の右上にある『デベロッ
Androidにおけるコンテンツフィットと「overflow:hidden」
Androidにおけるコンテンツフィットと「overflow:hidden」 ネタ元：スマホサイトの作り方で、あんまり書かれてないことを書いてみた - iPhone・Android・WEB・音楽制作｜Kaleidoscope ネタ元ではスマートフォン向けに「overflow:hidden」を指定して横スクロールが表示されないようにするテクニックが紹介されています。しかし、「Androidの場合は完全じゃありません。」の一言が！これはおそらくAndroidのコンテンツフィット機能に関する問題だと思うのでそこらえへんを詳しく解説してみたいと思います。 次のようなHTMLをAndroidとiPhoneで表示したとします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横スクロール</title> <style> #cona
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
iPhone用CSSをメディアクエリで分岐する問題点
iPhone用CSSをメディアクエリで分岐する問題点 これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。 追記(2010/07/09) 本エントリーはiPhone 4の発売前に書いたものです。 iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。 参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。 <link media="only screen and (max-device
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
jQueryのコードを良くする5つのTIPS
jQueryのコードを良くする5つのTIPS 5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selector').attr('alt'); 「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。 $('selector').data('meaningfllname', 'this is the data I am storing'); // then later getting the data with
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」