カテゴリー別アーカイブ: javascript

HTMLに貼りつけた画像のサイズが実際のサイズと異なっていたら赤枠を付けてconsole.logに書くブックマークレット


どうもお久しぶりです。

FlashDeveloperだったんですが、最近はHTMLも書くようになりました。

HTMLを作ってると、細かいところで面倒だなぁーと思うことが多いです。慣れてないだけかもしれませんが…。

変数が使えないというのが一番大きな問題で、ヘッダフッタを変更しようものなら全部変更というのがね…。慣れない。うまいやり方を見つけたいです。

それはさておきとして、表題の件です。imgのサイズはやはり指定したほうが良い、ということなので、全部指定しているのですが、コピペしたり、変更があったり、間違って入力してたりで、実際のサイズとは違うサイズがimgタグのwidth/heightに入ってたりします。大きい画像で少ないpixelであればそんなに目立ちませんが、やはりデザイン通りに配置しないと、ということで。

で、これを何とかできないかと思って、ブックマークレットを作ってみました。FirefoxでFirebugを使ってる前提の作りになっていますが、他の環境でもconsole.logを確認できれば使えると思います。

追加するには、適当にどこかのページをブックマークした上で、タイトルをわかり易い名前に変更し、以下のリンクのURLをコピーしてください。そのまま下のリンクをブックマークにドラッグ&ドロップでも大丈夫なブラウザもあるかもしれません。

画像サイズチェック

使い方:

  1. 調査したいページを開く
  2. FirebugのJavaScriptコンソールなど、console.logを見れる画面を開く
  3. ブックマークレットを実行
  4. 画像サイズが実際のサイズと異なるものがあれば、赤く枠がつき、コンソールに現在の画像サイズと、実際の画像サイズが表示されます。(now:現在の表示サイズ, real:実際の画像のサイズ)

ブラウザによっては動作しないかもしれませんが、Win7+Firefox16,Mac10.6+Firefox17では動作してくれました。

jQueryを使うために1秒待つ、ということをしています。読み込み完了が検知できればもっといいんですが…。このあたりは機能向上も含めて考えてみようと思います。

HTMLをやり始めるに当たって環境を整えたりしたので、次回はそれについて何か書こうとおもいます。

TitaniumMobile勉強中


最近はFlashもやってはいるんですが、スマートフォンアプリの方に興味が移りつつあります。もちろん、Flashでも作れるんですが、Flashだったらまあ何とか今までの知識を使えるだろうということで、そうではない方法を試しています。今のところやってるのは、JavaとTitaniumMobileです。

JavaはAndroidの方だけなんですが、TitaniumMobileではiOSでもAndroidでも両方書き出せます。また、開発言語がJavaScriptなので、Web系プログラマには取っ付きやすい感じになってると思います。

ただ、このTitaniumMobile、結構癖があるみたいで、同じソースでAndroidアプリもiPhoneアプリもどっちもさくさく作れるぜーとは行かない様子。

というわけで、まだ完成したアプリなど1つもないのですが、詰まった(ている)ところを少しばかりまとめてみる。

試したのはTitaniumMobile1.6.2+TitaniumStudio(Preview)です。

続きを読む TitaniumMobile勉強中

JSONP + PHP


 えらく久しぶりになってしまったなぁ。

 JSONPを勉強して、DSでAjaxっぽい通信ができないものかと考えていたのですが、JSONPの解説された本というのはないらしくWeb上の記事で何とかするしかなかった。しかしどれを見てもピンと来ませんでした。

 TAGGYのサンプルが一番役に立った気がします。とりあえず打ち込む前に印刷して読んでいたら何となく雰囲気はつかめました。が、別のことをやっていてかなり放置していました。今日実際に打ち込んで改変してみたら動作はあっさり分かりました。やっぱりサンプルがあるといいですね。以下自分の作ってみたもの。

 クライアント

<script type="text/javascript">
function jsonptest(data){
alert(data.p);
}
function test() {
scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "./jsonp.php?p=1&id=123";
document.getElementById('abc').appendChild(scriptTag);
}
</script>
<input type="button" value="実行" onclick="test()">
<div id="abc">
</div>

 サーバ

<?php
$p = htmlspecialchars($_GET['p']);
$id = htmlspecialchars($_GET['id']);
echo <<<JSONP
jsonptest({
"p" : "$p",
"id" : "$id"
});
JSONP;
?>

 こんなんでいいのかな?と思いながら動かしたんですが普通にOKでした。これでPHPでの処理を加えればデータの送信もできそう。まだローカルで実験しただけですが、サーバ間通信もできると思います。多分。

 ・・・本当はこれすんなり動いたわけではなくて、まずTAGGYのサンプルを見ずに作って、これで大丈夫だろう!というのが動かず、TAGGYにサンプルあったなぁというのを思い出し、それをコピーしてみて動作を確認して、それを改変したら動きました。しかし、元のサンプルを見ずに作ったものがマネしようと何しようとどうやっても動かず、「何が問題なんだーーー!!」と思っていたら、

 「script」が「srcipt」になってました。

 ああ、何という時間の無駄。

document.documentElement.clientHeightの挙動


 まあ、メモ代わりに。

 javascriptはブラウザによって挙動が異なるものだから困る。こないだはKonquerorというブラウザだけうまく動作しないと思ったら、KonquerorさんはJavaScriptを外部scriptにした場合、必ずUTF-8として読み込むらしく、Shift_JISで書いたらうまく動作しなかった。もちろん日本語含んでなければ動作するんでしょうけど。結局それは全てをUTF-8にしたらうまくいきました。

 今回はSafariでの謎。Macは普段は使わない(持ってない)ので動作確認の時に使うくらいなんですが、あまり熱心に確認してなかったため、気づかない問題があった。それがdocument.documentElement.clientHeightの挙動。

 window.innerHeightとほぼ同じ値をとるか、あるいはundefinedかと思っていたんですが、両方alertしてみたらwindow.innerHeightはちゃんと高さが表示されるものの、document.documentElement.clientHeightはなぜか中途半端な数値がでてきました。

 これを使って条件わけしていたので謎の挙動をしていたわけで、条件文を変えたらあっさり直りました。widthのほうはどちらも同じ値になってたんですが、なぜheightだけそうなるんでしょう。

参考:http://www.revulo.com/blog/20070628.html