SQLの窓

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月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#) | このブログの読者になる | 更新情報をチェックする

2012年04月17日


Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います

デベロッパーの時のサンプルと、コンシューマーの時のサンプルとでは若干仕様変更
があったような気がしますが、それでも画面変更は基本的にこんな感じで行うようです。
( そういえば、MessageDialog のスタイル(色)が変わっていました )

今日調べたサンプルは、以下のような画面でゲームそのものは単純ですが表示ページ
がたくさんありました。



メインページ(default.html)画面入れ替え用の DIV が一つあるだけで、画面は他の HTML
より動的に作成されます。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Game</title>

    <!-- WinJS references -->
    <link rel="stylesheet" href="//Microsoft.WinJS.0.6/css/ui-dark.css" />
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- App references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/assetManager.js"></script>
    <script src="/js/movingAverage.js"></script>
    <script src="/js/frameTimer.js"></script>
    <script src="/js/touchPanel.js"></script>
    <script src="/js/scores.js"></script>
    <script src="/js/gameState.js"></script>
    <script src="/js/game.js"></script>
    <script src="/js/navigator.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/homePage.js"></script>
    <script src="/js/creditsPage.js"></script>
    <script src="/js/rulesPage.js"></script>
    <script src="/js/gamePage.js"></script>
    <script src="/js/scoresPage.js"></script>
</head>
<body>
    <!-- Fragment host -->
    <div id="contentHost" data-win-control="GameManager.PageControlNavigator" data-win-options="{home: '/html/homePage.html'}"></div>

    <!-- App bar -->
    <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{
        commands:[
            {id:'home', label:'Menu', icon:'&#xE10F;', section: 'global', onclick: GameManager.navigateHome},
            {id:'play', label:'Game', icon:'&#xE102;', section: 'global', onclick: GameManager.navigateGame},
            {id:'rules', label:'Rules', icon:'&#xE104;', section: 'global', onclick: GameManager.navigateRules},
            {id:'scores', label:'Scores', icon:'&#xE113;', section: 'global', onclick: GameManager.navigateScores},
            {id:'credits', label:'Credits', icon:'&#xE10C;', section: 'global', onclick: GameManager.navigateCredits},
            {id:'newgame', label:'New', icon:'&#xE10E;', section: 'selection', onclick: GameManager.game.newGame},
            {id:'pause', label:'Pause', icon:'&#xE103;', section: 'selection', onclick: GameManager.game.togglePause}
        ]}"></div>
</body>
</html>

パっと見は、contentHost に勝手にページがロードされるように読めるのですが、すべて
カスタムの作業となっており、その時に利用されるのが、WinJS.Navigation Namespace と
いう名前空間です。

ここに navigate と言う function が存在するのですが、それを実行したからといって
何かが起こるのでは無く、navigated というイベントが発生するだけで、そこで実際の
実装を行うようですが、他にもこの作業を行うのにいろいろガイドラインが存在するよ
うです。

これは、無理に読み解かずに『ありもの』を利用するのが良いと思われます



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

2012年03月27日


Win8 Metro(JS) : 印刷処理



印刷機能そのものは単純で、printManager をgetForCurrentView()で取りだして、
onprinttaskinitializing に印刷開始処理を登録するだけのようです。

onprinttaskinitializing が null かそうでないかで画面を印刷できるかど
うかが設定され、設定されていると Charms bar から Devices を選んだ時に
画像のような状態になって印刷アイコンがあらわれます。



それよりも注意すべきは、サンプルでは印刷範囲として CSS を利用しており、
print.css という印刷時のみ有効な media="print" 属性で読み込んで、印刷
したく無いものはその中で display: none を指定してありました。

ここでは、PrimoPDF を登録してテストしましたが無事 PDF が作成されました。
PrimoPDF は、http://www.primopdf.com/download.aspx よりダウンロード
してインストールしていますが、事前に Windows の機能の有効化、無効化で
Framework3.51 を有効にしています( Win8 は 64bit )

    function onPrintTaskInitializing(event) {
        var printContent = document.getHTMLPrintDocument();
        event.request.initializePrintTask(printContent, "Print Sample");
    }

    function scenario1PrintContract() {    
        if (isPrintContractRegistered) {
            scenarioReset();
            sdkSample.displayStatus("Print Contract unregistered.");
        } else {
            var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
            printManager.onprinttaskinitializing = onPrintTaskInitializing;
            isPrintContractRegistered = true;
            document.getElementById("scenario1Open").textContent = "Unregister";
            sdkSample.displayStatus("Print Contract registered, Use the Charms bar to print.");
        }
    }




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

2012年03月26日


Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)

内容は、XMLHttpRequest を普通に工夫されていますが、特徴として Metro(JS) の then メソッド
で結果の処理を行う事になっています。then メソッドは、Promise オブジェクトのメソッドで(実際
の所在もはもう少し奥で複雑ですが) complete, error, progress の callback が登録されるように
なっています。

そして、それらは XMLHttpRequest では、req.readyState === 4 で req.status が 200〜300 で
正常終了扱いで、それら以外は error が実行されます。引数には、いずれも XMLHttpRequest オブ
ジェクトが渡されています。( 300 は含まない )

オプションは、以下の通りです。
1) options.type // "GET" または "POST" ( 省略は "GET" )
2) options.url
3) options.user
4) options.password
5) options.responseType : いくつかあるようですが、まだ不確定
( ここでは "" : 空文字 )
6) options.headers : JSON
7) options.data : send で送るデータ

※ ソースから解りますが、に非同期のみです。
(function () {

    WinJS.Namespace.define("WinJS", {
        xhr: function (options) {
            var req;
            return new WinJS.Promise(
                function (c, e, p) {
                    req = new XMLHttpRequest();
                    req.onreadystatechange = function () {
                        if (req.readyState === 4) {
                            if (req.status >= 200 && req.status < 300) {
                                c(req);
                            } else {
                                e(req);
                            }
                            req.onreadystatechange = function () { };
                        } else {
                            p(req);
                        }
                    };

                    req.open(
                        options.type || "GET",
                        options.url,
                        // Promise based XHR does not support sync.
                        //
                        true,
                        options.user,
                        options.password
                    );
                    req.responseType = options.responseType || "";

                    Object.keys(options.headers || {}).forEach(function (k) {
                        req.setRequestHeader(k, options.headers[k]);
                    });

                    req.send(options.data);
                },
                function () {
                    req.abort();
                }
            );
        }
    });

})();
サンプルではこんなふうに使っていました
    function makeXhrCall(url, callback) {
        sdkSample.displayError("");
        document.getElementById("scenario3Output").innerHTML = "";

        WinJS.xhr({ url: url }).then(
            function (result) {
            callback(result.responseXML, result.status);
        },
            function (result) {
            callback(null, result.status);
        });
    }



posted by lightbox at 2012-03-26 17:43 | 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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり