はてなブログはjQueryが使えるらしいので使ってみた

jQueryが使える?!

あの忌まわしいprototype汚染から逃れることが可能で、しかもクロスブラウザ対応にもできちゃうという魔法のフレームワークjQueryがはてなブログでは使えるの!?はたしてその真相はいかに!?

というわけでためしてみた

<script type="text/javascript">
$(document).ready(function(){
var hoge = $("<button>これはボタンです</button>"); hoge.click(function(){ alert("ボタンがあったらクリックしたくなるのが人間というものです。"); }); $(".entry-content:first").append(hoge);
});
</script>

Javascriptでウィンドウを縮小させる。(Firefox編)

Javascriptと正確にはCSSを使って、ウィンドウをスクリプト側から縮小させる方法です。
Firefoxは、IEやChromeにはある「zoom: 1.0;」のようなCSSがなく、独自に「.MozTransform=”scale(0.1)”;」があります。しかしこれ、ちょっとやっかいで縮小するとウィンドウが中央に配置されて、画面のまわりが余白だらけになってしまいます。これをどうにか左寄せしようと思います。

そのまえに問題です

xが0.1のとき
13000
xが0.2のとき
5800
xが0.5のとき
1440

このxの数式がなんなのか当ててみましょう。

私は・・わかりませんでした・・・orz
これはワイド画面のディスプレイでとあるページで画面の左上寄せに必要だった余白部分のサイズの数値です。

しょうがないので、Firefoxの縮小の挙動を考えてみることにしました。

ウィンドウの横の長さが980だったとしたら、それを0.8倍にしたら、784。
つまり、もともとのウィンドウのサイズ980-784で196だけ小さくなった。
この196というのは余白分。画面は中央に表示されているので、左と右の2つの幅ということになる。
なので、これを2で割ると、その半分の余白のサイズが求められます。

そしてらできた

var htmlElm = document.getElementsByTagName("html")[0];
htmlElm.style.MozTransform="scale(1)";
var sx = document.body.clientWidth * 1.0;
var sy = document.body.clientHeight * 1.0;
var a = 0.5;
htmlElm.style.position = "absolute";
htmlElm.style.left = "-"+((sx-sx*a)/2.0)+"px";
htmlElm.style.top = "-"+((sy-sy*a)/1.98)+"px";
htmlElm.style.MozTransform="scale("+a+")";

フレームページの場合はこうする。

var sx = document.getElementById("iframe").contentDocument.body.scrollWidth * 1.0;
var sy = document.getElementById("iframe").contentDocument.body.scrollHeight * 1.0;

連想配列とオブジェクトの違い

一瞬頭がこんがらがった。記述の仕方は同じなのに、結果が出てこないし、JSONオブジェクトにも変換できない。どうしてなんだろうと思ったら、自分が記述していたのは連想配列のほうだった。

連想配列

var a = [];
a["hoge"] = 1; //a.hoge = 1;
console.log(a);
//結果:[]

オブジェクト

var a = {};
a["hoge"] = 1; //a.hoge = 1;
console.log(a);
//結果:Object > hoge: 1, __proto__: Object >

var a = [];は var a = Array();
var a = {}; は var a = Object();

記述は同じだけど、中身の扱いが全く違う別物なので、初歩的ミスながら気づくのにちょっと時間がかかってしまった。

Javascriptで連想配列 hoge[“map”] が使えない理由

連想配列を作ろうと思い hoge[“map”] = 1 と代入しようとしたらエラーが発生した。
なぜなんだろうと思い調べたら、下記の記載を見つけた。

JavaScriptの配列ってmapとかfilterとかあったんだ – phithonの日記

[“map”]は .mapとしても使えるので、予め配列にはmapメソッドが定義されていたらしい。mapは全ての配列の値に対して計算を行い配列を返すメソッドらしい。こんな便利なものがあったとは知らなかった。

.filterというのは、ifのような条件式のようだ。これを使うと絞込みをできる。.sortは名前の通りソート。こんな簡単にソートができたなんて驚き。よって、hoge[“filter”]にも代入できない。

PHPで画面推移なしでファイルをアップロードしてその情報を親ウィンドウの変数に代入する

Javascript側

function uploadFile() { $("#form").submit(); //jQuery return false;
}
window.hoge = [];
<form id="form" action="/upload" method="post" enctype="multipart/form-data" target="iframe">
<input name="upload" type="file" onchange="uploadFile();">
</form>
<iframe name="iframe"></iframe>

PHP側

$upload_dir = "/www/var/html/public/"; //ディレクトリはあらかじめ作っておく。Windowsの場合C:\から
move_uploaded_file($_FILES['upload']['tmp_name'], $upload_dir . $_FILES['upload']['name']);
chmod($upload_dir . $_FILES['upload']['name'], 0666);
parent.window.formdata[0] = "<?php print($_FILES['upload']['name']); ?>";

テストはしてないので間違いがあるかもしれません。window.formdataのプロパティとしてグローバル配列変数を作成し、その結果を代入します。ただ、セキュリティの観点からなのかイベントの発火は何度やってもだめでした。親ウィンドウの変数に代入するくらいしかできないようです。

jQuery UI のモーダルダイアログで二番目のボタンにフォーカスを与える方法

このようにすると良いようです。

$("#dialog-modal-1").dialog({ modal : true, autoOpen : false, open : function() { var buttonelm = document.getElementById("dialog-modal-1").parentNode.getElementsByTagName("button"); buttonelm[buttonelm.length-1].focus(); }, buttons : { 戻る : function() { $(this).dialog("close"); }, 次へ : function() { $(this).dialog("close"); } }, focus : 1
});

Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !

[crayon lang=”php”] your code [/crayon]