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.");
        }
    }

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);
        });
    }

Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法

IE9 は未確認で、来週まで確認できません。

Google Chrome と Firefox では、XMLHttpRequest オブジェクトに定数が
定義されていて、r48 からその定数を使ってステータスチェックしているの
で Opera では全く動きません。

ですから、以下のような記述を JSONLoader が使われる前に記述して下さい。

<script type="text/javascript">
if( !XMLHttpRequest.DONE ) {
	console.log("setting");
	XMLHttpRequest.prototype.DONE = 4
	XMLHttpRequest.prototype.HEADERS_RECEIVED = 2
	XMLHttpRequest.prototype.LOADING = 3
	XMLHttpRequest.prototype.OPENED = 1
	XMLHttpRequest.prototype.UNSENT = 0
}
</script>

r47 では数字で条件書いておられるのでこれがなくても動作します。

r48 の Three.js の該当部分を直接変更する方法もありますが、どうもこの作者さんは
 WebKit 以外に興味無いようなので、今後も良く起こりそうです。外部から変更したほうが、
多くの人にとって使いやすいものになると思います。

Three.js で、Blender から出力したデータ(Three.jsフォーマット)の境界線を消す overdraw の適用のさせかた

サンプルやソースを見る限り、オリジナルには実装されていないようなのですが、
メソッドとして material の一覧を取得する事ができるのは内部コードで解った
ので、実装してみました。

もちろん、もともと持っている機能ですが、単純な形状でしか表からは使えない
ようでした。それに、そもそも CanvasRenderer 専用ですし、オリジナルでは
Google Chrome と Safari 以外ではテクスチャがまともに貼られ無いので需要が
全くなかったので必要無いと言えば無いのですが、Win8 で Metro(JS) で動作さ
せる為の確認事項です

適用前

適用後

<div style='margin-left:100px;'>
<input type="button" value="境界線" onclick='toggle_overdraw();'>
<input type="button" value="回転" onclick='toggle_rotation();'>
</div>
<div id="container_three"></div>

<script src="http://winofsql.jp/js/load_three.js"></script>

<script type="text/javascript">
	// ***********************************************************
	// 回転切り替え
	// ***********************************************************
	function toggle_rotation() {

		rt = !rt;

	}
	// ***********************************************************
	// CanvasRenderer : JSONLoader 用 overdraw 切り替え
	// ***********************************************************
	function toggle_overdraw() {

		od = !od;

		var _projector = new THREE.Projector();
		var _renderData = _projector.projectScene( scene, camera, true );
		var _elements = _renderData.elements;
		for ( var e = 0, el = _elements.length; e < el; e++ ) {

			element = _elements[ e ];
			material_x = element.material;
			if ( material_x instanceof THREE.MeshFaceMaterial ) {
				material_x = element.faceMaterial;	
				material_x.overdraw = od;
			}
		}

	}

	var od = false;
	var rt = false;

	var container, stats;
	var camera, scene, renderer;
	var mesh;
	var mouseX = 0, mouseY = 0;
	var material;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	init();
	animate();

	// ***********************************************************
	// 初期処理
	// ***********************************************************
	function init() {

		container = document.getElementById( 'container_three' );

		scene = new THREE.Scene();
		scene.position.y = 150;

		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set( 0, 200, 650 );
		scene.add( camera );

		loader = new THREE.JSONLoader();
		loader.load('http://winofsql.jp/js/three/data/eyes.js', function ( geometry ) {

			material = new THREE.MeshFaceMaterial();
			mesh = new THREE.Mesh( geometry, material );

			mesh.scale.x = 100;
			mesh.scale.y = 100;
			mesh.scale.z = 100;
			scene.add( mesh );

		}, '../js/three/data' );

		renderer = new THREE.CanvasRenderer( );
		renderer.setSize( 700, 500 );

		container.appendChild( renderer.domElement );

		document.addEventListener( 'mousemove', onDocumentMouseMove, false );

	}

	// ***********************************************************
	// マウス位置( カメラ位置として利用 )
	// ***********************************************************
	function onDocumentMouseMove( event ) {

		mouseX = ( event.clientX - windowHalfX );
		mouseY = ( event.clientY - windowHalfY );

	}

	// ***********************************************************
	// 一定期間の実行の繰り返し
	// ***********************************************************
	function animate() {

		requestAnimationFrame( animate );

		render();

	}

	// ***********************************************************
	// 移動データの設定と描画
	// ***********************************************************
	function render() {

		camera.position.x += ( mouseX - camera.position.x ) * 0.05+15;
		camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
		camera.lookAt( scene.position );
		

		if ( mesh ) {
			if ( rt ) {
				mesh.rotation.y -= 0.005;
			}
		}

		renderer.render( scene, camera );

	}


</script>

動的に typeface.js フォントを適用させる

元のコードでは、ページ全体の適用を renderDocument で一度だけ設定する
ようになっていますが、もう一度 renderDocument を実行すると、既に適用
された要素も対象となるようなので、よろしく無いと思います。

というか、個別の適用はいたって簡単なコードで済みますので狙い撃ちでい
いと思います。但し適用前にかならず対象要素の innerHTML を変更しておく
必要があります( 中に canvas が作成されているので )

※ vml も動作しますが、dummyShape が適用毎に作成されてしまいます

<script src="http://winofsql.jp/js/load_typeface.js"></script>
<script type="text/javascript">
if (_typeface_js && _typeface_js.loadFace)    _typeface_js.loadFace({"glyphs":{"お":{"x_min":198.03125,"x_max":1182.734375,"ha":1389,"o":"m 359 -75 l 238 -18 l 198 122 q 424 489 257 335 l 416 641 l 254 684 l 246 752 l 410 823 q 546 1030 429 971 q 595 839 573 935 l 733 826 l 744 755 l 598 668 l 598 541 q 1076 419 850 533 q 1171 207 1128 316 q 1104 32 1142 116 q 929 -32 1015 -2 l 774 16 l 717 111 l 774 149 q 939 62 847 81 l 1034 105 l 1071 223 q 988 364 1032 297 l 793 427 l 598 359 q 492 -21 568 164 l 359 -75 m 378 27 q 448 166 419 94 l 435 302 l 427 302 l 341 253 q 287 111 311 185 l 306 37 l 375 24 l 378 27 m 1125 668 l 961 809 l 1018 857 l 1182 714 l 1125 668 "},"え":{"x_min":287.546875,"x_max":1142.03125,"ha":1389,"o":"m 915 -37 l 750 89 q 717 240 741 169 l 649 286 q 298 29 454 196 l 287 116 l 576 508 q 373 592 470 546 l 394 660 q 893 722 641 701 l 899 622 l 725 421 q 845 127 861 307 q 1142 40 969 29 l 1142 32 l 1133 -32 l 915 -37 m 766 884 l 486 906 l 486 976 l 519 976 l 801 952 l 801 884 l 766 884 "},"い":{"x_min":203.140625,"x_max":1188.15625,"ha":1389,"o":"m 408 16 l 249 155 l 203 527 q 284 884 198 736 l 317 900 l 333 798 l 311 497 q 410 146 298 297 l 421 143 q 573 294 514 204 l 627 234 l 557 84 l 408 16 m 1101 354 l 1101 356 l 931 728 l 1007 758 l 1188 375 l 1101 354 "},"う":{"x_min":364.859375,"x_max":1029.453125,"ha":1389,"o":"m 627 -67 l 576 8 q 910 389 826 127 l 866 535 l 706 571 l 413 527 l 364 603 q 801 701 576 684 l 958 625 l 1029 386 l 896 81 l 627 -67 m 834 878 q 522 938 674 906 l 541 1011 l 560 1011 l 863 957 l 863 941 l 850 878 l 834 878 "},"あ":{"x_min":211.59375,"x_max":1212.5625,"ha":1389,"o":"m 885 -75 l 842 -8 l 1029 92 l 1098 256 l 1037 413 l 1010 416 l 866 408 q 687 54 747 245 q 375 -56 535 -8 l 257 -10 l 211 161 q 438 636 309 413 l 435 698 l 290 741 l 282 815 l 440 878 l 505 1028 l 581 1055 q 660 878 614 965 l 942 862 l 945 790 l 649 720 l 598 611 l 636 611 q 820 674 744 603 l 874 665 q 1125 473 980 543 l 1212 245 q 1114 18 1166 130 l 885 -75 m 386 46 q 495 174 448 105 l 470 373 l 465 373 l 378 337 l 301 143 l 320 51 l 383 43 l 386 46 m 646 313 l 646 321 l 701 454 l 690 454 l 611 446 l 611 435 l 638 313 l 646 313 "}},"cssFontWeight":"normal","ascender":1194,"underlinePosition":-96,"cssFontStyle":"normal","boundingBox":{"yMin":-165.46875,"xMin":0,"yMax":1120,"xMax":1318.359375},"resolution":1000,"original_font_information":{"postscript_name":"kirieji_1331984570687","version_string":"Version 1.00","vendor_url":"","full_font_name":"kirieji_1331984570687","font_family_name":"kirieji_1331984570687","copyright":"fub","description":"","trademark":"kirieji_1331984570687","designer":"","designer_url":"","unique_font_identifier":"kirieji_1331984570687","license_url":"","license_description":"","manufacturer_name":"","font_sub_family_name":"Regular"},"descender":-196,"familyName":"kirieji_1331984570687","lineHeight":1389,"underlineThickness":48,"loaded":true});

// *****************************************************************
// 動的に typeface フォントを適用させる
// *****************************************************************
function apply_test(no,str) {

	var e = document.getElementById("unit"+no);
	e.innerHTML = str;

	_typeface_js.replaceText(e);
	e.style.visibility = 'visible';
	if (_typeface_js.vectorBackend == 'vml') {
		var dummyShape = document.createElement('v:shape');
		dummyShape.style.display = 'none';
		document.body.appendChild(dummyShape);
	}
}
</script>
<style type="text/css"> 
.typeface-js { 
	font-family: kirieji_1331984570687;
	font-size: 100px; 
} 
</style> 
<div id="test_unit" style='height:110px'>
<input type="button" value="あ" onclick="apply_test(1,'あ')">
<input type="button" value="い" onclick="apply_test(2,'い')">
<input type="button" value="う" onclick="apply_test(1,'う')">
<input type="button" value="え" onclick="apply_test(2,'え')">
<input type="button" value="お" onclick="apply_test(1,'お')">
<input type="button" value="セットのみ" onclick="document.getElementById('unit1').innerHTML='あい';">
<br />
<span id="unit1" class="typeface-js" style="font-family:kirieji_1331984570687;"></span> 
<span id="unit2" class="typeface-js" style="font-family:kirieji_1331984570687;"></span> 
</div>
 

日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )

ドロップシャドウ適用時にエリアを広げるようにしました
青柳隷書しもを追加しました
プレビューを可能にしました
font-family と ドロップシャドウオプションの入力を追加しました
水面字とモフ字を追加しました

こんな感じで
表示されます

以下の画像をクリックすると、処理ページを開きますが、最初のロードで
オリジナルのフォントファイルがインターネットからロードされる為、か
なり時間( 十数秒 ) かかる場合がありますので注意して下さい。

※ 現在、文字選択の都合で句読点や記号類が動作していません。(データ更新しました)
※ 漢字、かたかな、ひらがなは実装しています
※ 半角英数字類は機能していると思います


※ キャッシュにファイルが読み込まれると次からは高速です

そのまま貼り付けるだけになってはいますが、他の CSS とのかねあいで、
そのページ用に追加 CSS が必要になって来ると思います。

※ ここでは、line-height が必要でした




理屈はいたって簡単なので、だれでもできますが、typeface.js のサイト
へ行って変換は必ず必要になりますし、その時の選択を絞らないとエラー
になるのでそこだけが面倒です。

また、実行は localhost で WEBサーバーを置いて実行するのが望ましい
のでこれまた少し手間が必要です。慣れた方なら特に問題は無いとは思い
ますが、手軽にフリーフォントを WEB フォントライクに使う為に、逐一
動作確認しながらフォントの種類を増やして行く予定です

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<textarea id="my_typeface" style='width:700px;height:600px;' onclick='this.select();'></textarea>
<script type="text/javascript">
var _typeface_js = {

	faces: {},

	loadFace: function(typefaceData) {

		this.faces = typefaceData;

	}
}
</script>
<script type="text/javascript" src="kirieji_regular.typeface.js" charset="utf-8"></script>


<script type="text/javascript">
var target = '愛してます';
var prop;
for( prop in _typeface_js.faces.glyphs ) {

	if ( target.indexOf( prop.toString() ) >= 0 ) {
	}
	else {
		delete _typeface_js.faces.glyphs[prop];
	}

}
document.getElementById("my_typeface").value = 'if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace('+JSON.stringify( _typeface_js.faces )+');';
</script>
</body>
</html>