ブログランキング・にほんブログ村へ


iPhone/iPad用潜水艦ゲームアプリ ソナーエコー iTunesにて公開中

2013年06月19日

[JavaScript jQuery mobile]アイコンが表示されない & pageLoading

jquery mobileで、アイコンが表示されない。



こんなふうになってしまう。しかもどういうわけか、パソコンでは大丈夫でiPhoneでダメ。Andoroidはわかんない。

この件で引くといろいろ書いてあるのに当たるけど、たいていはjquery mobile用cssの下のimagesがないってことなんだけど、自分の場合はパソコンでは出てるんでもちろん違うし、cssの読み込み順とかそれ以外のどれでもなかった。

原因は、アイコンのバージョンらしい。
具体的には
cssと同じとこのimages/の下にあるicons-18-black.pngとかいう4つのファイル。この仕様がjquery mobile1.2以降とそれ以前でなんだか違ってるようだ。
icons-18-black.pngを比較してみたのが下図。

上が1.2.0以前、下が1.2.0用。短くなってる。

何故か、jquery mobileをzipで落としてくると、images/ってのとimages-1.2.0/って2つのフォルダがあるのだけど(たしか)、それをそのまんま使ってたのをこのimages-1.2.0/ってほうをimages/にリネームすればいい。

これで直った。なまじパソコンで表示されるんでかえって原因を探すのにてこずってしまった。

不思議なことにネットのjquery mobileの記述は1.1ベースが多いので、そのへんがややこしくさせてる。でもポップアップないとすごく困るので1.2以降を使わざるを得ない。

================

jquery mobileでもう1つ。

$.mobile.pageLoading ( flag );

ってやつ。
読み込み中ポップアップを$.mobile.pageLoading();で表示、$.mobile.pageLoading(true);で消す…という記述がやたらとヒットするんで試すとエラーになるんだけど、これ、もう無い。

かわりは

$.mobile.showPageLoadingMsg();

$.mobile.hidePageLoadingMsg();

注意。
posted by みこあいさ at 10:56| JavaScript

2013年03月08日

HTML5 ImageDataの拡大表示

HTML5でもImageDataというのを使うと結構なスピードでピクセル処理できる。
PCはもちろんだが、スマホでも案外速い。

でもさすがに全画面の半分くらいのピクセルを関数処理してputImageDataするとちょっとリアルタイムというには辛くなってくる。

それなら小さめに作って拡大描画すればいいんじゃないかと思うわけだが drawImageみたく
context.putImageData( imageData,x,y,w,h );
という構文がない。
scaleもputImageDataには無効。
かといってimageDataをImageに変換する方法も(トリッキーな方法以外は)見当たらなかった。

でも方法はあった。

canvasはそのまんまdrawImageのソースイメージとして使えるのだ。

だから、いったん別のcanvasにputImageDataしといて

context.drawImage( tempCanvas,x,y,w,h );

で拡大表示される。

tempCanvasは styleで display:none;
してあっても問題なかった。
posted by みこあいさ at 17:44| JavaScript

2013年03月06日

バイナリデータをDataURLにエンコード

いつからだかしらないけど、イメージとか音声とかのバイナリデータをインラインでHTMLに組み込む仕組みが出来てた。

<img src="data:image/gif;base64,R0lGODlhKAAoALMAAAAAA〜中略〜3ZPyPa2S/fFREAOw==" />

こんな感じで使える。

ちっこいアイコンとかを別ファイルにしないで済んでポータビリティとかがとてもよくなってスッキリしてとっても便利。

だけどこれを生成するの、どうしよう…ということで、例によってJavaScriptで自作した。


http://www.ankohouse.com/blog/BinDataURL.html
posted by みこあいさ at 16:39| JavaScript