メモ

要素をタイルで並べておいて、フィルタをかけたりソートしたりできる、便利なjQueryプラグイン「MixItUp.js」。 これを使ったところ、アニメーションがおかしくなるという現象が起こりました。 発生するのはこんな感じ。 １．フィルタを設定してあるボタンをクリック ２．条件に応じて要素の表示が切り替わり、移動のアニメーション開始 ３．一度移動が終了 ４．要素が再びおかしな位置にワープし、アニメーションがもう一度発生 要するに、ちらつくといいますか、一回終わったのにまたパパっと２回目のアニーションが始まってしまうのですね。 で、これ、原因は簡単でして、CSSのtransitionが指定してあると発生します。 transitionはCSSの設定が変わったときに、一瞬で切り替わるのではなく、アニメーションしながら切り替わるようにする設定です。 MixItUpの場合は、移動はjQueryで制御しているのに、CSSのtransitionも入っていると両方が動作してしまうということですね。 transitionを設定するときはめんどくさいのでallとしてしまうことが多いと思いますが、jQueryのアニメーションと競合しがちなので最低限の要素に設定したほうが安全です。 また、もちろん不要なら削除しましょう。

スライドが簡単に実装できるjQueryプラグインslick.js。 この間使っていたら「 TypeError: _.$slides is null」というエラーが表示されてしまいまして、一瞬ハマりました。 しかし原因は簡単なこと。 同じ要素にslickを2重に実行しているというものでした。 スクリプトを整理していて、書く場所を変えたときに、元のを消していなかったのでした。 教訓：一つの要素にslickは一回。

Firefoxでアンカー付きで別のページに移動したときに、ページが正しくない位置にスクロールするという現象が発生しました。 A.htmlページ内のリンクで、「href="B.html#anc1"」などとなっていて、クリックすると、B.htmlのanc1の箇所が表示されないということです。 この現象、ググってみると、同じような症状の報告が結構古くから有るようです。 Firefoxに以前から存在する問題なのかも。 ただし、古くから報告されている問題が、現在発生している問題と同じものかどうかは分かりません。 現象が同じでも原因が違うことは考えられます。 当然もともと発生しない場合もあるし、「こうするとなおる（かも）よ」というアドバイスはいろいろ出てきます。 しかし、いくつかの方法を試しても今回僕が遭遇した現象は解消しなかったのと、いちいち原因を考えるのもしちめんどくさえので、一気に解決できるJavaScriptを組んでみました。 ■■==スクリプトここから  window.onpageshow = function(){   //ページのURLからアンカー部分を取得   var myhash = $(location).attr('hash');   if ( myhash.length > 1 ) { //アンカーがあった場合     if($(myhash).length){ //アンカーに対応するidの要素があった場合       var nScrolltop = $(window).scrollTop();       var nOffset = $(myhash).offset().top;       //現在のスクロール位置とアンカーに対応するidのY座標（本来有るべき位置）を取得       if( Math.abs(nScrolltop-nOffset) > 5 ) { //2つの位置の差が5以下の場合   ...

レスポンシブサイトでクリッカブルマップを使用すると必ず遭遇する問題、それは画像のサイズが変更になることでクリッカブルなエリアがずれてしまうという不具合。 クリッカブルマップのエリアはピクセルで指定するので、%などで指定し、画面サイズによって画像のサイズが変わってしまうと都合が悪いのですね。 で、ググると良く出てくるのが、jQueryのプラグイン「jquery.rwdImageMaps.js」を使うと簡単に解決できますよ、というもの。 説明を読むと、プラグインを読み込んで適用させれば良いだけっぽくて、なるほどコレなら簡単だ、と思うわけですよ。 しかし、僕はコレを入れたことで解決どころか問題が悪化してしまいました。（笑） 元々位置が合っていた、初期設定のサイズですら、クリッカブルな位置がずれてしまうという。。。 ■原因 この「jquery.rwdImageMaps.js」は、htmlのimgタグにwidth、heightのピクセル数を指定する必要があるようです。 指定するピクセル数は、クリッカブルマップの範囲指定をしたときのサイズ。 要するにこの幅と高さを基準値として、画像のサイズが変わったときにエリアの位置を比率に応じてずらしてくれるという仕組みなようです。 僕はこの設定をしていなかったのですね。 だって、レスポンシブだもん。CSSで設定してあるんだもん。HTMLの方には書かないよ。 まぁ、しかし必須ならば仕方が無いので、記述を追加します。 ■もう一工夫必要 レスポンシブサイトで画像を入れる時って、主に横幅を%で指定して、縦は元の画像の縦横比に任せてしまう（特に指定しない）という事が多くないですか？ しかし、imgタグにheightをピクセル数で指定してあると、縦サイズが固定になってしまい、横が伸び縮みするのに応じて、縦横比が変わってしまうのですね。 コレを解決するためにもう一工夫必要。 CSSではheightをautoに設定します。 これでimgタグに書いたピクセル数での設定はキャンセルされます。 ■まとめ jquery.rwdImageMaps.jsでのクリッカブルマップのレスポンシブ対応をまとめると、 １．jquery.rwdImageMaps.jsを読み込んで、対応したい画像に適用する ２...

簡単に使えて便利なスライド用のjQueryプラグイン「Slick.js」ですが、１つ気に入らない点が。 それは、カルーセルをやって、マウスでつかんでスライド使用とすると、カルーセルの各コマに枠線が表示されてしまうところ。 これは中身をクリックした時点で発生しますので、つかまなくても、「slick-slide」というクラスがついた要素の中身をさわると囲み線が表示されます。 カルーセルからlightboxを表示しようとしている場合などにも問題で、裏で枠線が表示されているというちょっとかっこ悪い感じになってしまいます。 解決法は簡単で、「slick-slide」のクラスに「outline:none;」を指定するだけです。 最初から設定してあると良いのですけどね。

AIR DATEPICKERはjQueryのプラグインで軽量かつきれいな日付選択用のDatePickerが表示できるプラグインです。 ・配布サイト： http://t1m0n.name/air-datepicker/docs/ まぁ、この手のものは選択肢は多いのですがそのまま使ってもみためが良いので使いやすいですね。 さて、AIR DATEPICKERは多言語対応していて、各言語用の設定ファイルは外部ファイルになっていますが、残念ながら日本語がありません。 でも簡単に対応出来ますのでご安心を。 ■１．日本語用の設定ファイルを作成する といっても、イチから作成する必要はありません。 ダウンロードするとついてくる「datepicker.●●.js」というものが言語設定ファイルなので、どれかを適当にコピーして、「datepicker.jp.js」という名前にしましょう。 （名前は何でも良いですけど、日本はjpという気がする） ■２．中身を書き換える テキストエディタで開き、下記の様に書き換えていきます。 ●1行目 $.fn.datepicker.language['en'] →$.fn.datepicker.language['jp'] これは必須ではありませんがやっとかないと分かりにくいので。 これで、「jp」というキーワードで日本語モードにできるようになります。 ●2～8行目 曜日、月、「今日」「クリア」といった言葉をどう表記するかの設定です。 曜日の設定は文字の長さの違いで３つありますが、日本語の場合は「日月火水木金土」でもともと短いので全部同じで良いように思います。 月の表示は迷いますけど、場合によっては英語でもいいかなと思うし、「1月」～「12月」などと変えても良いでしょう。 ●9～10行目 年月日と時間の表示形式です。 日本では「yyyy/mm/dd」が一般的ですね。 ■３．言語設定ファイルを読み込む ２で作成したファイルを読み込んでください。 ■４．日本語を有効にして呼び出す AIR DATEPICKERを使いたいときは、使いたい場所に「datepicker-here」というClassを記述します。（基本的な設定方法は 本家サイト を参照） 同...

jQuery用のlightbox系ライブラリのFeatherlight.jsでちょっとハマりました。 個人的には不具合っていうか、仕様の不備といってもいいんじゃないかなくらいな気持ちですが、どんなことにはまったかというとこんな感じ。 Featherlight.jsで表示したモーダルの中にformを入れる。 　↓ formのchangeイベントでvalueなどを取得し、値を表示。 　↓ なぜか同じ値が2重で出てくる。 （例えばselectで「テスト」という選択肢が選ばれたとして、それを別の個所に表示しようとすると「テストテスト」となる） 分かってみれば原因は簡単で、FeatherlightでHTMLを表示する仕組みは、デフォルトでは、ソース内の対象部分をスクリプトで複製しているので、これが問題でした。 （もともとHTMLに書いて非表示にしてある方を「オリジナル」、Featherlightが複製したほうを「コピー」とします） 要するにモーダルを表示したとき、上記の例で言えば、HTMLのソース上に同じformが2つ存在している状態になります。 なので、formに対して操作をするとき、参照の方法によってはオリジナルとコピーの両方に対して処理してしまうんですね。 これは僕的には不具合に近いものだと思っています。 なぜなら、仮に動作的に問題なかったとしても、オリジナルにidが指定してあれば同じ内容でコピーが作られるわけで、同じIDの要素が複数存在してしまいます。 実用上問題なくても、これはちょっと強引だなと思います。 汎用性が大事なプラグインの配布であまりやって良いこととは思えないですね。 そういう堅いことは言わないようにしたとしても、モーダルの中身に対してスクリプトでなんらか処理を行う場合は、ソース上はオリジナルとコピーで２重化されていることをふまえておかないとうまくいかない可能性があります。 また、モーダルを閉じるとコピーの部分は消去されます。 次にモーダルを開いたときに、その時点のオリジナルを元に再度コピーが作成されますので、コピーになんらかスクリプトで変化を加えていて、それがオリジナルには反映されていない場合は、リセットされた状態になります。 自分的にはちょっと癖があって使いにくい仕様だなと感じました。

bxSliderという、jQueryプラグインを使ってちょっとハマった時の話。 これは写真などのスライドを簡単に実装できるプラグインでよくできているのですが、ちょっと不具合と言っても良さそうなものがいっこありまして。 どういう現象かというと、スライドの下に●印を表示するってよくあるパターンですが、この●印のハイライトが消えなくなるというもの。 例えば写真3枚のスライドの場合、●印が３つ表示されますよね、下のように。 ●○○ 黒丸が今表示しているスライドだと思ってください。 先ほどからハイライトといっているのは、この黒丸のことです。 （bxSliderはactiveというclassを追加して見た目を変化させています） で、アニメーションをオートにしていると、自然に2枚目に切り替わり、印はこう変わります。 ○●○ 当たり前ですね。 ところがこの丸印部分をマウスで触っていると、たまに２個ハイライトされ、そのハイライトが消えなくなってしまうことがあるのです。 スライド2枚目が表示されている状態で、１つめの丸を触ってこの現象が発生するとこうなります。 ●●○ そして、オートで３枚目に移るとこうなります。 ●○● この１つ目の丸印のハイライトが消えなくなってしまうのです。 この現象が発生するきっかけは、丸印にマウスを乗せたままドラッグして、丸印の外でマウスを離す、というものでした。 要するに、本来の操作ではないので、丸印をクリックしたときのようにスライドは移動しません。 原因はというと、「jquery.bxslider.css」にありました。 今回使用した「bxSlider v4.2.12」に同梱されていたcssでは、78行目に「.bx-wrapper .bx-pager.bx-default-pager a:focus」という記述があり、これが原因でした。 つまり、フォーカスが当たっている丸印がハイライトと同じ見た目になっていて、上述の操作を行った場合に、触った丸印からフォーカスが外れなくなる、ということ。 フォーカスが外れれば表示は元に戻るので、どこでもいいのでページの別の場所をクリックするなどすると、表示は戻ります。 なぜこの記述が入っているのかはよく分かりませんね。 キーボード操作も想定し...

lightcaseの不具合じゃないんですけど、きれいな見た目と簡単に使えることで重宝しているjQueryプラグインのlightcase.jsのtransitionがうまくいかないことがありました。 lightcaseはオプションでフェードインだけでなく、上下左右から写真が出てくるパターンや拡大してくるパターンのアニメーションが用意されています。 必要十分ですね。 今回の不具合はこのtransition設定がうまくいかないというもの。 具体的な現象としては、何を設定しても、もしくは何も設定しなくても、写真が右下から斜めに出てくるという。。。 そんなアニメーション効果用意されてないのに、なぜ？ まぁ、原因は単純で、自分で別途用意したcssで、#lightcase-caseという要素にcssのtransitionが設定されてしまっていてバッティングしていました。 なのでホント、自分が悪いです。（苦笑） cssのtransitionはお手軽にちょっとした動きのアクセントを加えることが出来て便利ですが、jQueryとはとにかくバッティングしますね。 jQuery側でなんか対応してもらえないだろうかとも思いますけど。 とりあえずアニメ系で予期したとおりに動かない場合は、不具合探す前にtransitionを疑うようにしています。

bxslider.jsという、写真のスライドをホームページに簡単に作れるjQueryのプラグインがあります。 僕はプラグインってのは、将来的な互換性だったりとか、不具合があった時に直しづらいとか、カスタマイズ性に難がある（自分で作ってないから場合によっては解析に時間がかかる）ので、あまり好みませんが、それでもlightbox系だったりスライド系ではたまに使ってます。 結局、使うのと使わないのとどっちが生産性が高いかって話なんですよね。 で、bxslider.jsというスクリプト、そこそこメジャーなので、まぁ安心して使えるかな～と思っていますが、アニメーション設定をフェードにしたときに、フェードのアニメーションがチラチラすることがあります。 スムーズにフェードイン・フェードアウトせずに、アニメーションの次の写真が一回見えてしまったりとか。 これはまぁ、プラグインの不具合じゃないというか、jQueryの不具合なのかな～。 JavaScriptの不具合なのかな。 というか、仕様なのかな。。。 ともあれ困るのですが、原因は結構簡単で、cssでtransitionが設定されていると発生することがあります。 自分が書いたcssでなくても、cssフレームワークを導入していたりすると、cssでフェードやアニメーション的なことを実現するために、transitionが、広くいろいろなタグに対して設定されている場合があるのですよね。 例えば、「transition:all 0.2s ease-out;」とかね。 こうしておくと、マウスオーバーでボタンの色を変える場合とかに、0.2秒かけてフワッと変わってくれるのでカッコいいんですけど、jQueryのフェードと相性が悪く。。。 対策としては、bxslider.jsでフェードを使いたい場所については、transitionを外す（初期設定に戻すなど）の必要があります。 例えばbxslider.jsの公式サイトでは、「.bxslider」に対してスライドを設定しています。 css的には .bxslider, bxslider * { transition:initial; } 等としておけば安心ではないでしょうか。 まぁ、このスライダーに限らないんですけどね。 jQueryでフェードする...

jQueryでfadeIn、fadeOutのアニメーションをしたときに、ちらつく現象について。 アニメーションはイージングの設定によって見た目が代わりますが、一番基本のlinearでもちらつきます。 「ちらつく」というのがどういう現象かというと、本来は透明から不透明に少しずつ現れていってほしいのですが、透明状態から一瞬濃い状態になり、また薄い半透明になり、それからアニメーションがスタートする感じ。 言ってみれば、フェードインがスタートする前に、ちょっと見えちゃうんですよね、一瞬。 この一瞬見えちゃうってのがすごくカッコ悪い。 っていうか、もうチカチカして、一目見て不具合！って感じ。 で、原因はというと、CSSのtransition設定とぶつかっていたのでした。 transition設定をしている要素に対してfadeIn、fadeOutをすると発生する現象のようです。 いやー、ちょっとハマったわ。 なので、transitionをやめるか、どうしても必要なら、fadeIn・fadeOutのアニメーションが終わった後にjQueryでセットするということになるでしょう。

「どういう時に使うんだよ」というツッコミはさておき、 になっている要素をhiddenに変えたいという事案が発生いたしましてやってみました。 attrで書き換えるのはうまくいかないので、別の方法で。 $(function(){ $("#hoge").get(0).type = 'hidden'; }); これでid="hoge"のinputがhiddenに変わります。

スマホサイト隆盛の現在において、レスポンシブデザインの知識はHTML5のコーダーにとって必須ですね。 レスポンシブデザインというと、まぁ、普通はメディアクエリで画面の横幅基準でブレイクポイントを作り、設定を切り替えるという方法をとるでしょう。 bootstrapもこれですね。 とある仕事で、もうちょっとアプリ的に対応したいという場合がありまして。 つまり、メディアクエリで対応するレスポンシブの場合、ブレイクポイント同士の間は同じCSS設定が反映されるため、全体の見た目が一定ではないのですね。 例えば、横幅320px～374pxで文字サイズを12pxに指定した場合、一行に入る文字数は320pxの場合と360pxの場合では異なります。 その分、行数が減る箇所もあれば、それによってやや余白が出ることもあるでしょう。 そうじゃ無くて、どんな画面サイズでも、（ほぼ）常に一定のレイアウトにしたい、というのがその時の要望。 例えば画像を横幅100%で表示するとすると、その画像はどんなサイズの端末で見ても横一杯に広がって見えます。 横幅に対する画像の中の（画像化された）文字の比率も一緒です。 こういうことを画像じゃなくてテキストでもやりたいと。 で、考えた方法は２種類あります。 （１）cssのvwという単位を使う （２）jQueryで横幅から基本のサイズを割り出し、全体をそれに対する比率で設定する ■（１）について 単位というとpxとか%とかemとかいろいろあります。 cssで数値を%で指定した場合、ボックスの幅なんかは、親要素に対する割合になります。 しかし、文字のサイズ（font-size）を%で設定した場合、親要素のfont-sizeに対する割合になるのですね。 例えば画面の横幅320pxに対して、1行に10文字入れたい場合、文字は32pxにすれば良いのですが、これをfont-size:10%とは書けないのですね。 そこで新しく登場したのがvwという単位。 上記の例で言うと、font-size:10vmと書くことができるのです。 vwは、画面の横幅に対する比率を設定することができる単位で、1vwは「画面の横幅に対する1%」です。 おお、すげー！便利！ と思ったんだけど、落とし穴が。 vwのブラウザ対応を調...

heightLine.jsが効いてはいるのに、高さがうまく揃わないことって最近結構起こっているんじゃないかと思うんですよね。 期待したよりも広がらないって言うか、若干めり込んじゃう感じのやつ。 最近、利用が広がってきている（と思われる）、cssのbox-sizingというのとheightLineがぶつかります。 通常、ボックス要素の幅・高さというのは、padding、borderを抜いた数値です。 が、「box-sizing:border-box」を指定すると、これらを含んだ数値がwidth、heightになるのですね。 具体例で言うと、 height:100px; padding:10px; border:10px #000 solid; とか指定した場合、デフォルトでは高さ100pxのボックスに上下のpaddingとborderの合計40pxが加算され、全体では140pxの高さのオブジェクトができます。 しかし、これに「box-sizing:border-box」を追加した場合は、全体が100pxの高さのオブジェクトになるのです。 ブラウザのデバグツールでみると、計算後の高さは60pxになっています。 （Chromeの場合、「要素を検証」で、「Computed」のタブを参照。 paddingやborderを後から変更しても高さは100pxのままになるので、まずざっと配置を決めてから後で微調整が入る場合には楽。 しかし、heightLineをこれと合わせて使うとpaddingの分だけめり込んじゃうんですね。 ださい解決法ですが、heightLineを使っている箇所は高さが可変になっている（指定していない）はずだし、他に影響与えたくないので、その要素だけ「box-sizing:content-box」として、旧来の表示方法に戻してあげるのがカンタンかな。

いや、まぁばかばかしい話なんですけどね。 jQueryでフェードインのアニメーションを作る時、普通はfadeIn()を使うと思うんですよね。 フェードインしたい要素をdisplay:noneにしておいて、fadeIn()すると。 これに加えて、位置を動かしたり大きさ変えたりしたい時はanimate()を使うことになると思います。 animateだと、元々CSSで設定されている状態から、animateの引数で設定したCSSの状態に徐々に切り替わるというアニメーションになります。 animateでフェードする時はopacityを設定して徐々に透明度を変化するよう設定すると思います。 で、元々見えなかった要素を徐々に表示するアニメーションを作るにあたって、普段fadeIn()を使う感覚で、CSSでdisplay:noneにして置いたんですね。 その要素に対してanimate()を設定し、opacityが1になるようにしたのですが、表示されない。 ホントばかばかしいんですがこんなところで一瞬はまりまして。 よく考えればopacityが0だろうが1だろうが、display:noneである限り見えないに決まってます。 animate()でフェードインするなら、初期設定はdisplay:noneではなく、opacity:0にしておく必要があるんだね、という話。

jQueryで画像の読み込み状態を制御したい場合について。 要するにあれです、重たい画像が読み込まれる間にクルクルローディング中みたいな画像を表示して、読み込みが終わったら実際の画像を表示するとか、そういうときに使います。 jQueryにも$img.load(fn)という書き方があって、 $("img#test1").load(function(){   alert("読み込み完了"); } こんな風に書くと、test1というIDが付いている画像が読み込まれたら、アラートが表示されると言うことになっています。 なっているんですが、どうやらIEではキャッシュの画像を読み込んだ時に読み込み完了のイベントが発生しないらしい、という話が。。。 で、探してみたら見つかったのが、jQueryのプラグイン、imagesLoaded.js。 これは、このプラグインを読み込んでおけば、上述の「load」の部分を「imagesLoaded」に変えることでIEでキャッシュを読み込んだ場合でも、読み込み完了として識別できるという代物。 例えばこんな感じ。 $("img#test1").imagesLoaded(function(){   alert("読み込み完了"); } ところが。 これはこれで問題発生。なんか読み込み終了のイベントは確かに発生しているのですが、画像自体が×になってしまっているということが、たまに起こる。 （再現性がない。頻度は感覚的なもの） まぁ、細かく実験していないので、処理の組み合わせによる現象かもしれず、シンプルな使い方では問題ないのかもしれません。 調べてみると、imagesLoaded.jsはIE9で怪しいらしい。ということはきっとIE10でも怪しいんじゃないか。 後述しますが、jQueryのプラグインはブラウザ対応の信頼性が低いと感じるので、やっぱりこういうものは使わないで解決したい。 そして行き着いたのが、画像をキャッシュさせない、という力業。 基本的には好きじゃない方法です。 画像に頻繁に更新が入るなら別ですが、同じ画像ならキャッシュを読んでもらってすぐに表示された方が良いに決まってるのだから、それをさせないと...

他のブラウザ（IE8以降、FireFox、Chrome、Opera等）でOKなのに、IE7でJavaScriptが期待通りの動作をしない場合のチェック点。 連想配列で、各要素の区切りに入れるカンマを、最後にも入れてしまう。 これ、よくやっちゃうんだよな。。。 ■■■■例 （OKな書き方） var test_array = new Array(); test_array = {   val1 : 1,   val2 : 2,   val3 : 3 } （NGな書き方） var test_array = new Array(); test_array = {   val1 : 1,   val2 : 2,   val3 : 3, } どこが違うって、「val3 : 3」の後のカンマの有無です。 これ、書式的には最後には入れないのが正しいと思うのですが、なぜか大方のブラウザではNG例でも問題なく動作してしまう。 ところがIE7ではこれが厳密なんですね。 （たしかIE6も。最近IE6は動作対象にしてないので忘れた） IE7はNG例だと、「val3 : 3,」のところでエラーが発生し、以降のスクリプトがキャンセルされます。 これは、IE10でも、歯車をクリックして開発ツールを使い、動作モードをIE7にすれば確認できます。 またスクリプトのデバッグモードを使えば、この箇所でエラーが出ているとはっきり分かります。 でもねー、なかなかここに気づかないんですよ。（いや、気づけよ。。。） 以降のスクリプトが全て無視されるというのがミソで、例えば タグをクリックした時の動作のなかでこのエラーがあったとする。 その後ろには のhrefを無視するために「return false;」を書いていたとする。 NG例だと「return false」が実行されないため、hrefで指定されたページへ移動するような動きをしてしまうわけです。 この時点で、IE7での「return false」の使用に問題があるのではないかと、見当違いなところを疑ってしまったりしてね。 （実際、IE7でreturn falseが効かないという現象もあるようですが） まぁ、まずはきちっ...

JavaScript（jQuery）を使うとFacebookのウォールに投稿された内容（フィードなど）を自分のサイトに表示したりすることができます。 （参考記事： Facebook Syndication Error ） ※方法については「facebook getJSON」などでググってみるといろいろ見つかります。 一応書いたスクリプトを載せるとこんな感じ。 $.getJSON( 'http://ajax.googleapis.com/ajax/services/feed/load?callback=?', { q:'http://www.facebook.com/feeds/page.php?id=NNNNNNNNNNNNNNNN&format=rss20', v:'1.0', num:10 }, function (data) { $.each(data.responseData.feed.entries, function(i, item){ $('#info').append(item.title); } ); ※「 NNNNNNNNNNNNNNNN 」は固有のID番号 ※append(item.title);では単純にタイトル部分が文字として入りますが、必要に応じてHTMLタグで修飾します。 ところが上記で、titleが空欄になってしまう投稿があると言う現象が発覚。 原因を調べてみると、どうやら写真をシェアした時に、titleが元々空欄になってしまうようです。 Facebookから取得したJSONの生データをみてみると、該当の投稿は「 」となっており、titleに何も文字が入っていません。 ※本来ならCDATAの後の[ ]の中に文字が入る。 item.title.lengthで文字数を調べると、0と出ます。1文字も入っていない正真正銘のカラ状態ですね。 これでは表示されないのは当たり前です。 仕方ないので力わざで解決。方法は下記の通りです。 ●titleの中身が空欄（文字数が0）なら、その項目は飛ばす。 ●上記のスクリプトでは10件を表示...

jQuery MobileのDateBoxを使ってカレンダーを表示した時に、iPhoneで挙動不審になることがありました。 具体的には、 １．カレンダーを表示させる引き金になるinputをタップする ２．カレンダーがアニメーションして表示される。 ３．一瞬で消えることがある。 なんだかよく分からないのですが、せっかく表示されたカレンダーが一瞬で消えてしまい、日付が勝手に選択された状態になります。 再現性100%でないようで、何が影響しているのかよく分かりません。 私がやっていたときの原因は、カレンダー呼び出し時のオプションで「"focusMode":true」を指定していたことでした。 「"useFoces":true」という記述に変えたら問題は解消しました。 どうやらネットで調べたソースでは、inputにフォーカスしたらカレンダーを表示したい時には 「"focusMode":true」を使うというように書いてあるところが多いのですが、 現在の DateBoxのページには、オプションとして 「"focusMode":true」は掲載されていません。 「"useFoces":true」というのがそれに当たるようで、こちらを使えば動作的に問題なくなりました。 いっそ全く動作しなければもっと分かりやすいのに、中途半端に動作するのではまりました。 jQueryMobile - DateBox

画面の縦幅（天地）サイズによって、各要素の大きさや位置を調整したい場合があります。 これ、いろいろやり方はあるのでしょうが、僕はjQueryの「$(window).height()」で画面サイズを取得して、それに併せて各要素の位置やサイズを計算で設定するようにしています。 この場合、ページ読み込み時に調整用の処理を実行するのはもちろんですが、ウインドウサイズが変更された場合も再調整する必要があります。 「$(window).bind("resize", 関数名);」としてリサイズ時の対応をしていたのですが、これだとiPhone/iPadの縦横向き変更時のイベントがとれていないことが発覚。 iPhone/iPadの向き変更のイベントは「$(window).bind("orientationchange",関数名);」とするようです。 処理が同じなら「$(window).bind("load orientationchange resize ",関数名);」で、読み込み時も含めてOKかと。