カテゴリー : jQuery

jQuery JSONを受取る際のContent-Typeはapplication/json

$.postを使ってサーバーからデータを受け取るときオブジェクト(JSON)で受取りたい場合は、PHPで次のように出力すると良い。

public function ret_json($var=array()) {
  header("Content-Type: application/json; charset=utf-8");
  echo json_encode($var);
  exit();
}

このContent-Typeを調べたとき、最初にヒットした記事が「text/javascript」となっていたためそのまま使った。

ところがjQueryで取り込もうとしても一向に上手くいかない。こういうところでハマって時間を失うんですね。

分かります… orz

 

jQuery selectやradioで選択された項目の取得

選択された項目の取得の仕方を、すぐ忘れてしまうのでその備忘録です。

select要素内で選択されたoptionの文字列取得

$("#id option:selected").text();
または
$("#id").find(":selected").text();

option value の値取得は
$("#id").val();

マルチの場合どうなるか試していないので機会があれば確認。

同じnameを持つラジオボタンの選択された値取得

$('[name="data-name"]:checked').val()

チェックボックスの状態の確認

$(".checkbox").change(function() {
    alert($(this).attr("checked"));
    alert($(this).get(0).checked);
});

として実行してみると、それぞれチェックされたときは「checked」、「true」、チェックが外れたときは「undefined」、「false」が表示された。

また何かあれば追加しよう。

jQuery 座標等取得メモ

ウィンドウのクライアント領域サイズの取得

幅:$(window).width()
高さ:$(window).height()

マウスクリック、移動時のハンドラ内で取得するマウス位置

$(selector).mousemove(function(e) {
    x = e.pageX;
    y = e.pageY;
}

リンク画像のサイズ

imgobj = new Image();
imgobj.src = "http://xxx.com/abc.jpg";
alert(imgobj.width + ' * ' + imgobj.height);

 

jQuery で HTML5 FilesAPI ファイルオブジェクトのプロパティにアクセスするには

今頃 HTML5 の緒に就いたところで恥ずかしいのだが、早速つまずいた。古籏氏の「File APIでブラウザーからローカルファイルを操作」という記事で、jQuery で試そうとした結果、半日つぶしてしまった。が、一つ賢くなった、と自分を慰めている。

お題は選択されたファイルのファイル名、サイズ、ファイル種別(MIME Type)を表示する JavaScript プログラムである。

<h1>ファイル情報を表示する</h1>
<form action="./test.cgi" method="get">
	<input type="file" id="myFile" />
	<input type="button" id="fileInfo" value="ファイル情報を表示" />
</form>
<div id="result"></div>
<script>
	document.getElementById("fileInfo").addEventListener("click", function(){
		var fileData = document.getElementById("myFile").files[0];
		var txt = "ファイルの名前 :"+fileData.name+"<br />";  // ファイル名
		txt += "ファイルのサイズ:"+fileData.size+"<br />";   // サイズ(Bytes)
		txt += "ファイルの種類 :"+fileData.type+"<br />";   // 種類(MIME Type)
		document.getElementById("result").innerHTML = txt;
	}, true);
</script>

FilesAPI では input 要素で file タイプを指定し、加えて「multiple」をアトリビュートに加えると、何とファイル選択で複数ファイルを選択する事ができるようになった。これで JavaScript などの力を借りなくても、一括転送できるようになった訳だ。

さて上のプログラムを jQuery に書き直してみる。

$(document).ready(function() {
	$("#fileInfo").click(function() {
		var fileData = document.getElementById("myFile").files[0];
		var txt = "ファイルの名前 :"+fileData.name+"<br />";  // ファイル名
		txt += "ファイルのサイズ:"+fileData.size+"<br />";   // サイズ(Bytes)
		txt += "ファイルの種類 :"+fileData.type+"<br />";   // 種類(MIME Type)
		$("#result").html(txt);
	});
});
</script>

で OK なのだが、「document.getElementById(“myFile”).files[0]」が気に入らない。ここは「$(“#myFile”)」と指定して、ファイルオブジェクトのプロパティにアクセスしたい訳だ。

さんざん調べて分かったのだが、「prop()」メソッドを利用してファイルオブジェクトの「files」プロパティにアクセスできた。

	var fileData = $("#myFile").prop('files')[0];

オソマツサマでした。

JavaScript のソース圧縮

カテゴリの jQuery とは直接かかわりがない内容です。JavaScript プログラムのソース圧縮ツールについてです。

Webサイトが少しでも華やかになるようにフラッシュが多用されることが多いですが、Google や jQuery のお陰で JavaScript が見直され、また JavaScript を使った開発の習熟度も上がり、頻繁に利用されるようになってきた感じを受けます(自分もその口ですが)。

ところで他人のブログを拝見していると、ロードする JavaScript のソースがあまりにも多く、読込みに時間が掛かっているのではないかと思われるようなサイトに、たまに出くわします。例えば WordPress のプラグインは、実際に使用しない場合でも JavaScript ソースを読み込むようになっているものもあります。

そんな訳で、オープンソースの JavaScript プログラムを利用させてもらうにしろ自分で作ったものにしろ、読込み時間を少しでも短縮したいと思い、JavaScript のソースを圧縮してくれるソフトを探して見ました。

ここでいう圧縮とは、zip や jpg のように、コード変換を伴うものではなく、空白やコメントなどを取り去ってサイズを小さくする機能を持ったものです。上図は左が圧縮前、右が圧縮処理後の例です。

変換はオンラインで圧縮できるサイトもありますが、ここでは自分の PC で動作するものにしました。

Microsoft Ajax Minifier 1.1 がそれです。

ダウンロードではソースコードが配布されているようですが、操作するだけですのでインストーラ付きの実行プログラムのものだけを利用するようにしました。

使い方ですが、Windows で動作させるソフトにしては珍しく、コマンド実行するタイプです。メニューから「Microsoft Ajax Minifier Command Prompt」を実行すると、下のようなコマンドプロンプト画面が表示されます。

実行は、

>ajaxmin ソースファイル名 /o 圧縮ファイル名

とすればOK。デスクトップにファイルを置いてある場合は、カレントディレクトリを変更してから実行すると指定が楽です。ajaxmin.exe への実行パスが環境に設定されているので、カレントを変更しても問題なく実行できます。

>pushd ¥users¥ログイン名¥desktop
>ajaxmin md5.js /o md5min.js

オプションに「/h」(hypercrunch mode)というのがあったので試してみたところ、サイズが半分ぐらいになりました。

サイボーズ光成さんの「md5.js」をお借りして試したところ、

ソースプログラム 35,778
通常の圧縮 22,563
/h を付けて圧縮 18,829

結果は上のようになりました。

ヘルプドキュメントをちらっと見たところ(英文なのでちらっとしか見れない orz)、使い方としてその他、統合開発環境の Visual Studio を使ってWebアプリケーションを構築する際、このモジュールを追加して自動で圧縮ソースを出力させたり、ajaxmin.dll を組み込んで他のアプリで利用できるようになっているようです。自分は Windows アプリケーションの開発からすっかり離れてしまったので、使う機会はないと思いますが。