SQLの窓

2012年04月28日


$.ajax({}).then( doneCallbacks, failCallbacks ); のテスト

読みだすデータは、shift_jis で書かれた JSON 形式のテキストです。
{
	"version" : "1.01a",
	"name" : "日本語名表示"
}
.then() は、Windows8 Metro(JS) のすべての処理において同じ仕様のものが使われています 成功の場合 1) success が呼ばれる 2) doneCallbacks が呼ばれる 失敗の場合 1) failCallbacks が呼ばれる 2) statusCode 内が呼ばれる JSON.parse を使用しているのは、Windows8 Metro(JS)との互換の為です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
</head>
<body>

<script type="text/javascript" src="http://localhost/json/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$.ajax({
	url: "target.json",
	beforeSend: function ( xhr ) {
		xhr.overrideMimeType("text/plain; charset=shift_jis");
	},
	success: function(data, textStatus, jqXHR) {
		alert(data);
		alert(textStatus);
		alert( JSON.stringify(jqXHR,null,"   ") );
	},
	statusCode: {
		404: function() {
			alert("ページが存在しません");
		}
	}
}).then(
	function(data, textStatus, jqXHR) {
		var obj = JSON.parse( data );
		$("#tx1").val( obj.version );
		$("#tx2").val( obj.name );
	},
	function(data) {
		alert("err\n"+JSON.stringify(data,null,"   "));
		alert("この後、statusCode の処理が実行されます");
	}
);

</script>

<input type="text" id="tx1">
<br />
<input type="text" id="tx2">
</body>
</html>



posted by lightbox at 2012-04-28 21:48 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする

Google ドキュメントを使ってソースコード配布と解説

Google Drive が始まったので、かねてより Google+ ではソースコードだけが共有するの
に面倒だったので、使ってみると思いの外便利です。で、思いもしなかった効果があった
ので、ここで試してみます。

以下のコードは、Three.js で使われていた WebGL のチェックコードで、実行文ですので
処理されて結果が true か false になります。
上の表示は、Google ドキュメントを公開して IFRAME でコードを取得して少し見栄え
を調整して貼り付けていますが、Excel や Word のように『図形』を追加して表現が
簡単にできます。これは Word と同様の『文書』ですが、ソースコードは CTRL+A で
選択されるのでコピーも簡単です。

挿入から図形描画



文書の作成



ソース部分の強調も時間をかければ見やすいものになりますし、変更は Google ドキュ
メントのほうで基本的な内容は行います。
( 表示エリアの調整は IFRAME 側で行う必要があります )

IFRAME 基本コードの取得






posted by lightbox at 2012-04-28 01:24 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月25日


余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移

画面はまたこのゲームサンプル(の一部)を使いました
( 正式タイトルは JavaScript and HTML5 touch game sample )



結局、要素の部分を置き換える為の正式な SDK は存在しました。そのサンプルのタイトルは
『Loading HTML fragments sample』ですが、navigate メソッドはやはり骨格であって、置き
換えは自分で行って検証しました。置き換える為に使われる HTML のヘッダ部分の置き換え後
の影響は厳密では無い事もわかりましたが、確実に説明のつかない結果だったので、不必要な
ものは省いてコードを構成しています。

一つ解ったのは、navigate の骨格を使う事によって、自動的に back メソッド等が使えるよう
になる事です。他のサンプルでも不思議だったのですが、『戻る』アイコンがあるのに、どうも
イベント定義されているふしが無かったのですが、navigate 完了後に一網打尽にされるようで
す。
続きを読む
posted by lightbox at 2012-04-25 22:51 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月24日


querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード

Windows8 Metro(JS) のコードを追っかけていて気になったので、確認しておこうと思い、
簡単な確認用のコードを作成しました。

forEach の引数は二つで、二つ目は省略可能です。オブジェクトを指定した場合、その
オブジェクトを一つ目の引数の関数内で、this として参照できました。関数は、3つの
引数を取る事ができ、それぞれ、配列の要素、その要素のインデックス番号、配列その
もののようです。

※ IE では forEach は IE9(標準モード) である必要があります
<div id="target">
<input class="ent" value="a" />
<input class="ent" value="b" />
<input class="ent" value="c" />
</div>

<script type="text/javascript">
var col = document.querySelectorAll(".ent");
var arr = [];
arr.push( col[0] );
arr.push( col[1] );
arr.push( col[2] );
arr.forEach(
	function( element, index, base ) {
		console.log(element.value);
		console.log(index);
		console.log( base[index].value );
		console.log(this.ref);
	}
	,{ ref: "参照できています" }
);
</script>


posted by lightbox at 2012-04-24 16:44 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月19日


Three.js で行われている整然としたクラス作成

Three.js は、Canvas や WebGL を使った 3D を表現するライブラリですが、中を読むのに
このようなクラス定義が基本なので非常に解りやすいです。
<!doctype html>
<html lang="en">
	<head>
		<title>サンプル</title>
		<meta charset="utf-8">
		<style>
		</style>
	</head>

<body>
<script>
var R101 = {};
R101.Class = function(){
	this.version = "1.01";
	this.colors = [];
	this.flg = false;
};
R101.Class.prototype = {
	constructor: R101.Class,
	method1: function() {
		alert("method1:"+this.version);
	},
	method2: function() {
		alert("method2:"+(this.data||"未定義です"));
	},
	method3: function() {
		alert("method3:"+this.flg);
		this.data = {};
	}
}

var obj = new R101.Class();

</script>

<input type="button" value="method1" onclick="obj.method1();" />
<input type="button" value="method2" onclick="obj.method2();" />
<input type="button" value="method3" onclick="obj.method3();" />
</body>
</html>
まず、R101 と言う名前空間を作成していますが、一般的にライブラリを作成する時に有効で、
変数が他から独立して作成されるようになります。R101 は、一般的な JavaScript のオブジェク
トになります。そこに、R101.Class として、function を定義しています。
( ※ R101.Class では、this で変数を作成して、後に作成されるインスタンスで参照されます。)

R101.Class.prototype に、JavaScript のオブジェクトを設定し、そのメンバとして、コンストラ
クタとメソッドを定義しています。ここで、たとえ prototype の設定をしなくても、コンストラ
クタは R101.Class になり、以下の実行を行うと一致します

if ( R101.Class === obj.constructor ) {
	console.log("一致");
}

しかし、それではメソッドの定義を R101.Class 内でする事になり、記述上コンストラクタとメソ
ッドとプロパティの定義がごちゃ混ぜになってしまいますが、この場合だと見事に3か所に分けて
定義できますし、後から見ても一目瞭然となります。

Windows8 Metro JS SDK でもよく使われていた || の意味

alert("method2:"+(this.data||"未定義です"));

この || は最後に true 扱いになったものを利用すると言う意味で、this.data が
定義されていた場合はその中を表示しますが、未定義の場合は "未定義です" のみを
表示します


posted by lightbox at 2012-04-19 22:11 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2012年04月18日


Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します

サンプルコードにあった記述を簡略して記述して実行テストして試してみました。
ここでは、getter の戻り値が function なので、prop という本来プロパティで
あるはずのものが、メソッドとして( 引数あり )定義されて実行できるようにな
っていました。

※ 最初の function は コンストラクタで、func はメソッドとなります。

var test = WinJS.Class.define(
	function () {
	},
	{
		func: function () { },
		prop: {
			get: function () {
			return
				function (a, b, c) {
					return a + b + c;
				}
			}
		}
	}
);

var inst = new test();

Debug.writeln(inst.prop(1, 2, 3));



posted by lightbox at 2012-04-18 13:18 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり