SQLの窓

2013年02月28日

Three.js の点線表示の詳細( 特に Windows で WebGL では線の太さは実装なし )

このコードは、WebGL と Canvas とを同じコードで同時に表示する為のものです。ですから、Chrome と Firefox では以下のように表示されますが、WebGL が動作しないブラウザでは、右側だけが表示されます



LineDashedMaterial と LineBasicMaterial

前者が新しいマテリアルですが、大きく違うのは geometry の computeLineDistances メソッドで、これを実行しないと点線になりません。何故そのような仕様なのかは解りませんが、実装されたばかりの仕様であるせいかもしれません。

参考

Drawing the coordinate axes | soledad penadés

また、Canvas か WebGL かでも結果は大きく違い、LineDashedMaterial において以下のようなデフォルト値になっているにもかかわらず、WebGL では(少し大きめに描画?)正確では無いようです。
this.dashSize = 3;
this.gapSize = 1;
linewidth が WebGL で無視される これは、LineDashedMaterial よりかなり前の LineBasicMaterial からの仕様のようで、そもそも Windows では動作しないという事が言われています。 参考 LineBasicMaterial.linewidth is ignored when using WebGLRenderer ・ Issue #269 ・ mrdoob/three.js ・ GitHub javascript - Thickness of lines using THREE.LineBasicMaterial - Stack Overflow 現状では、他の方法で表現するしか無いとは思いますが Canvas では動作するので、グラフ表示等では Canvas を使うのがもともと現実的かと思います。 clearColor と clearAlpha について これらは、WebGL で利用できるものですが、実行画像を見てもらえれば一目瞭然です。clearColor は背景色で、clearAlpha はその背景色をどの程度透過するかのパラメータです。( 1 で不透過 ) Line オブジェクトのデフォルトは THREE.LineStrip ここでは、THREE.LinePieces が使用されていますが、THREE.LineStrip で点座標を連続してつないで線が描画(ひとふでがき)されます。しかし、THREE.LinePieces では、2つづつのペアで線が引かれるので、座標が並んでいるとしたら点線になります。
<style type="text/css">
body {
  background: url(https://lh4.googleusercontent.com/-qGsOjUoCvyw/T-VZ62iPMSI/AAAAAAAAG5Y/O0NhvMUvm9U/s200/_img.png);
  font-size: 30px;
}

span {
    color: #ffffff;
    font-weight:bold;
}
</style>
<div id="container"></div>

<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min56.js"></script>
<script type="text/javascript">
var webgl_flg = true;
if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
    webgl_flg = false;
}


var scene, camera;
var object;

// WebGLRenderer
var renderer

// CanvasRenderer
var renderer2;


var WIDTH = 250,
    HEIGHT = 250;

init();
animate();

function init() {
    
    camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
    camera.position.z = 150;
    
    scene = new THREE.Scene();
    
    var geometryCube = cube( 50 );

    // LineDashedMaterial で必要
    geometryCube.computeLineDistances();
    
    object = new THREE.Line( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 5  } ), THREE.LinePieces );
    
    scene.add( object );

    if ( webgl_flg ) {    
	    renderer = new THREE.WebGLRenderer( { clearColor: 0x111111, clearAlpha: 0.8, antialias: true } );
	    renderer.setSize( WIDTH, HEIGHT );
    }

    renderer2 = new THREE.CanvasRenderer( );
    renderer2.setSize( WIDTH, HEIGHT );
    
    var container = document.getElementById( 'container' );
    if ( webgl_flg ) {    
        container.appendChild( renderer.domElement );
    }
    container.appendChild( renderer2.domElement );
    
    
}

function cube( size ) {
    
    var h = size * 0.5;
    
    var geometry = new THREE.Geometry();
    
    geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
    geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
    
    geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
    geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
    
    geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
    geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
    
    geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
    geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
    
    
    geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
    geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
    geometry.vertices.push( new THREE.Vector3( h, h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( h, h, h ) );
    geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
    geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
    geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
    geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
    geometry.vertices.push( new THREE.Vector3( h, h, h ) );
    
    geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
    geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
    
    return geometry;
    
}


function animate() {
    
    requestAnimationFrame( animate );
    
    render();
    
}

function render() {
    
    var time = Date.now() * 0.001;
    
    object.rotation.x = 0.25 * time;
    object.rotation.y = 0.25 * time;
    
    if ( webgl_flg ) {    
        renderer.render( scene, camera );
    }
    renderer2.render( scene, camera );
    
}</script>
Three.js リファレンス

http://mrdoob.github.com/three.js/docs

関連する記事

Three.js(r53) で追加された LineDashedMaterial のサンプルを簡素化して解りやすくしました



posted by at 2013-02-28 10:00 | Three.js | このブログの読者になる | 更新情報をチェックする

IE拡張メニューで取得したテキストをメールで送る(Basp21版)

※ Basp21 では暗号化ができないので、CDO.Message版 を使用したほうがいいと思います

自分のメールアドレスで使っている SMTP サーバーというもので送信する IE 拡張メニューです。

※ 相当古いソフトですが、VBScript の世界では有名な、Basp21 というオブジェクトをインストールする必要があります( インターネットで調べれば情報はたくさんあると思います )
ダウンロード カーソル下のテキストを basp21 でメール送信 選択した場合は、その文字列ですが、単に右クリックで実行した場合は適当に取得してテキストエリアに転送するので、加工してから送信できます。 http://www.hi-ho.ne.jp/babaq/basp21.html から basp21 をダウンロードしてインストールしている必要があります。 インストール時に以下の情報を入力する必要があります。( 何度でもインストールしなおせます )一度インストールしたら、直接 C:\laylaClass\menuex\send_mail_text_basp21.htm を変更しても同じです
	SMTPServer	= "サーバー.jp:587"
	MailTo		= "メールアドレス"
	MailFrom	= "<メールアドレス>	ユーザ:パスワード"
	MailSubject	= "任意のタイトルメッセージ"


  1) ホスト名(またはIPアドレス)
  2) 宛先
  3) 差出人( 形式はこのような形<メールアドレス>\tユーザー:パスワード )
  4) メールのタイトル

※ \t は実際のタブです。

メール情報の詳細な設定
posted by at 2013-02-28 05:33 | IE | このブログの読者になる | 更新情報をチェックする

2013年02月24日

DAZ3D : ドラゴンの炎



記事としては、『DAZ3D : こないだ手に入れた『無料の』Millennium Dragon 2.0』です。ここでは、GIMP 側からデータを用意していますので、ご自由にお使い下さい。

OneDrive へ移動

dragon_fire.zip

レイヤー10枚
ドラゴン本体 / 1
炎 / 4
背景 / 4
単色(黒) / 1
Glitterato で宇宙空間の背景 SolarCell で光を作成 調整 LunarCell で惑星を作成 ここ一番のポイントなんで、いいブラシが必要です。 回転 + トリミング
タグ:DAZ3D GIMP
posted by at 2013-02-24 10:00 | GIMP | このブログの読者になる | 更新情報をチェックする

2013年02月23日

Three.js でキューブの『テクスチャ面設定』とスケール・X軸回転を jQuery のスライダーでテストする

※ 現時点で既に Three.js(r56:2013/02/15) が出ています。



jsdo.it での実行
jsdo.it のソースコード公開ページ

座標系のテスト

Three.js の座標系の向きを テクスチャを貼りつけたキューブと jQuery のスライダー で確認する

Three.js の全体像はとても把握しずらいので、調整内容を別々に確認したほうが良いので、まず最初に座標系のテストコードを作成しています。

キューブに関する値の変更

厳密に言うと、

1) Geometry ( どのような形状、つまりどのような座標で表現されるか )
2) Material ( 材質、つまりどのような表示特性を持つか )
3) 3Dオブジェクト ( Geometry と Material で、表示対象の実体としての『もの』)

みたいな事になっています。ここで、スケールとX軸回転は、3) に対して行っているので、とても一般的なものであり、見え方としては『カメラ』と同様な意味があります。但し、『カメラ』はシーンに対して動作が反映されるので、対象物が二つ以上の場合には、3Dオブジェクト を動かすのとは違った意味になって来ます。

3Dオブジェクト が一つの場合は、カメラの動作は相対的に考えて似たようなものになります。

材質に対する両面性

.side というプロパティに、0、1、2 をセットする事によって、前面、背面、両面というテクスチャの描画方法が決まります。これは、カメラがその3Dオブジェクトの中に入ってしまった時にとても意味があるのですが、ここではテクスチャ自身に透過PNG を使って効果を解りやすくしています。

通常、テクスチャは透過していなてので、3Dオブジェクトの中は意味が無い場合も多いですが、例えば球状の空を球の裏側に貼りつけて、カメラを中に置く場合もあり、カメラの視点移動が前提で、外側から見る必要がある場合もあるかもしれません。
// side

THREE.FrontSide = 0;
THREE.BackSide = 1;
THREE.DoubleSide = 2;
この両面パラメータは、r55 からかどうかは確認していませんが、つい最近の過去のバージョンから r50 から仕様変更がされています。
[Change log]
Object3D's flipSided and doubleSided properties are now Material's side property
javascript - Three.js: The Surface is One-Sided - Stack Overflow その他にも調整の為の仕様変更 MeshLambertMaterial の Canvas での動作が、MeshBasicMaterial と同様に変更されています。これは以前からの仕様変更に伴う調整がやっと追いついた感じのものですが、以前はキューブそのものに色が付いていたので、それはそれで代替えがあったらと思うのですが、調べるのは困難です。
<link rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three//three.min55.js"></script>

<style type="text/css">
td {
    padding: 5px;
}

#slider1, #slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}

#container_three canvas {
	background: url(https://lh4.googleusercontent.com/-qGsOjUoCvyw/T-VZ62iPMSI/AAAAAAAAG5Y/O0NhvMUvm9U/s200/_img.png);
	border: solid 1px #000000;
}
</style>
<table>
<tr>
<td style='width:120px;'>前面/後面/両面</td>  <td></td><td><div id="slider1"></div></td><td>  </td>
</tr><tr>
<td>スケール</td><td> -</td><td><div id="slider2"></div></td><td> + </td>
</tr><tr>
<td>x 座標を回転</td><td> -</td><td><div id="slider3"></div></td><td> + </td>
</tr>
</table>

<div id="base" style=''>
<div id="container_three"></div>
</div>


<script type="text/javascript">
// *************************************
// 前面 / 後面 / 両面
// *************************************
$(function () {
	$("#slider1").slider({
		range: "min",
		step: 1,
		min: 0,
		max: 2,
		value: 0,
		slide: function (event, ui) {
			material.side = ui.value;
		}
	});
});
// *************************************
// スケール
// *************************************
$(function () {
	$("#slider2").slider({
		range: "min",
		step: 0.01,
		min: -4,
		max: 4,
		value: 1,
		slide: function (event, ui) {
			cube.scale.x = cube.scale.y = cube.scale.z = ui.value;
		}
	});
});

// *************************************
// x 座標を回転
// *************************************
$(function () {
	$("#slider3").slider({
		range: "min",
		step: 0.01,
		min: -1 * Math.PI,
		max: 1 * Math.PI,
		value: 0.6,
		slide: function (event, ui) {
			cube.rotation.x = ui.value;
console.log(ui.value)
		}
	});
});

var v_width = 500;
var v_height = 500;
var v_iamge_url = 'http://toolbox.winofsql.jp/image/basic_elf.png';

var container;
var camera, scene, renderer;
var mesh;
var material,cube

init();
animate();

function init() {
    
    container = document.getElementById( 'container_three' );
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
    camera.position.set( 0, 0, 650 );
    scene.add( camera );
    
    var image = new Image()
    image.onload = function () {
        
        var texture = new THREE.Texture( this );
        texture.needsUpdate = true;
        material = new THREE.MeshLambertMaterial({map: texture });
        material.overdraw = true;
        
        // キューブ
        cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
        cube.rotation.x = 0.6;
        
        scene.add(cube);
    };
    image.src = v_iamge_url;
    
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( v_width, v_height );
    
    container.appendChild( renderer.domElement );
    
}

function animate() {
    
    requestAnimationFrame( animate );
    render();
    
}

function render() {
    
    if ( cube ) {
        cube.rotation.y -= 0.005;
    }
    renderer.render( scene, camera );
    
}

</script>
WebGLRenderer に差し替えて実行する時の注意

Canvas では、Image オブジェクトにに別ドメインを指定しても問題無かったのですが、WebGL ではエラーになっていたので注意して下さい

とりあえずすぐテストしたい場合

http://toolbox.winofsql.jp/tool_html_links.htm



posted by at 2013-02-23 22:55 | Three.js | このブログの読者になる | 更新情報をチェックする

2013年02月22日

Three.js の座標系の向きを テクスチャを貼りつけたキューブと jQuery のスライダー で確認する



http://jsdo.it/sworc/rJym/fullscreen

Three.js で苦労する事

とにかく、Three.js は 3D を扱うので奥が深いです。専門用語も最初はさっぱり解りませんし、3D に関する日本語の解説を探すのも一苦労です。

参考

カメラのレンズの種類

さらに Three.js のアップデートは速度は速く、頻繁に行われるのでいろいろ注意しなければならない事も多いのですが、何より『パラメータ』の多さに頭がクラクラします。

アプリケーションを作っていても、その時は覚えていますが、『カメラの引数の意味はええ・・っと』みたいな事は良くあって、こんな時は実際に動かすのが一番なんですが、準備に結構時間もかかったり。

で、そんな時の為の方法としては、jQuery の スライダーを使うといいと思うのです。

jsdo.it のメリット

何と言っても、他人のコードを試してみたい時に『フォーク』すれば、直ぐに開発環境が整うところです。自分にしても、自分のサイトで環境を作るより手軽に公開できて、自分で再確認もできます。

自分のサイトだと、安心しきっちゃってコードが間違っていても、気が付かない事も多いですが、jsdo.it に貼ったとたんいろいろ気になってチェックもしますし、一石三鳥 ぐらいの効果もあります。

jsdo.it では、フルスクリーンの実行画面でソースコードを見れば全体像がわかるし、公開ページでは JavaScript と HTML と CSS を分けて書くようになっているので分析もしやすいです。

唯一・・・ちょっと重いので、埋め込みコードは使わないほうがいいです。例えば、埋め込みコードをブログに貼ると、そこが固まるせいでブログがそこ以降表示されなかったりします。
<link rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three//three.min55.js"></script>

<style type="text/css">
td {
    padding: 5px;
}

#slider1, #slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}

#container_three canvas {
	background-color:#e0e0e0;
	border: solid 1px #000000;
}
</style>

<table>
<tr>
<td style='width:50px;'>x 座標</td><td> -</td><td><div id="slider1"></div></td><td> + </td>
</tr><tr>
<td>y 座標</td><td> -</td><td><div id="slider2"></div></td><td> + </td>
</tr><tr>
<td>z 座標</td><td> -</td><td><div id="slider3"></div></td><td> + </td>
</tr>
</table>

<div id="base" style=''>
<div id="container_three"></div>
</div>

<script type="text/javascript">

// *************************************
// x 座標
// *************************************
$(function () {
	$("#slider1").slider({
		range: "min",
		step: 1,
		min: -200,
		max: 200,
		value: 0,
		slide: function (event, ui) {
			cube.position.x = ui.value;
		}
	});
});
// *************************************
// y 座標
// *************************************
$(function () {
	$("#slider2").slider({
		range: "min",
		step: 1,
		min: -200,
		max: 200,
		value: 0,
		slide: function (event, ui) {
			cube.position.y = ui.value;
		}
	});
});

// *************************************
// z 座標
// *************************************
$(function () {
	$("#slider3").slider({
		range: "min",
		step: 1,
		min: -450,
		max: 450,
		value: 0,
		slide: function (event, ui) {
			cube.position.z = ui.value;
		}
	});
});
</script>

<script type="text/javascript">

	var v_width = 500;
	var v_height = 500;
	var v_iamge_url = 'https://lh5.googleusercontent.com/-tpwrnApVF0Q/UJZ7JFriUeI/AAAAAAAALAY/sTLRuOhyX1U/s640/basic_elf.png';

	var container;
	var camera, scene, renderer;
	var mesh;
        var material,cube

	init();
	animate();

	function init() {

		container = document.getElementById( 'container_three' );

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
		camera.position.set( 0, -100, 650 );
		scene.add( camera );

		var image = new Image()
		image.onload = function () {

			var texture = new THREE.Texture( this );
			texture.needsUpdate = true;
			material = new THREE.MeshLambertMaterial({map: texture});
			material.overdraw = true;

			// キューブ
			cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
			cube.rotation.x = 0.6;

			scene.add(cube);
		};
		image.src = v_iamge_url;

		renderer = new THREE.CanvasRenderer();
		renderer.setSize( v_width, v_height );

		container.appendChild( renderer.domElement );

	}

	function animate() {

		requestAnimationFrame( animate );
		render();

	}

	function render() {

		if ( cube ) {
			cube.rotation.y -= 0.005;
		}
		renderer.render( scene, camera );

	}


</script>
関連する記事

THREE.PerspectiveCamera ( 透視法射影カメラ ) の引数

MeshLambertMaterial について

全てを確認したわけではありませんが、知ってる範囲において MeshLambertMaterial は、ライト効果を対応しているのですが、Canvas では意味を持ちません。以前作者さんが Canvas でも対応しようとしていた時期もありましたが、いろいろ問題があって、Canvas では MeshBasicMaterial と同等かな・・・とだいたいの感覚で思っていました。

Canvas 環境で、少し古いバージョンでは、 MeshLambertMaterial で、透過 png を使ってもキューブが透過されなかったのですが、( MeshBasicMaterial では透過されていた ) この 55 バージョンでは透過されるようです。

いずれにしても、本来の表現力は WebGL 使って初めて発揮されます。
( WebGL は画像(Imageオブジェクト)が同一ドメインでないと使えないようですが )


posted by at 2013-02-22 21:19 | Three.js | このブログの読者になる | 更新情報をチェックする

2013年02月01日

Tumblr のバックアップについて

Apple はツールが作成されているようですが、



(Mac OS X, requires 10.5 or higher)

このページの最後に API について書かれているので、こんど作成してみようと思います。

この程度なら、誰かが作っていそうなものですが、それらしいものが一つありました。これ単純に API 使ってるだけだと思いますが、日本人向けはなさそうですね。

で。

ここまで書いてからあらためて API みてみたら、とんでもなく簡単なのでわざわざ作るようなものでも無い事に気がつきました。ま、でも、やり方はいろいろあるのでネタにはなりそうですが、アプリとしては日本のブログにインポートできる形式にコンバートくらいしておかないと意味なさそうです。

それより画像を一括ダウンロードするアプリなら、わりと簡単に作れます。

あと、これってバックアップというより、他のアカウントのログを無制限に取り出せる API です。

ちなみに、JSON として JavaScript で読み込めるにようになっていて( この場合よくできていて、ドメインの制限を受けない )、ページの最後で使用方法が書いてありますが、間違ってます( たぶん仕様変更して変更してない )

▼ 正解はこちら
<script type="text/javascript" src="http://staff.tumblr.com/api/read/json"></script>

<script type="text/javascript">
    // The variable "tumblr_api_read" is now set.
    document.write(
        '<a href="' + tumblr_api_read['posts'][0]['url'] + 
        '">Most recent Tumblr post</a>'
    );
</script>
staff でやってますが、自分のサブドメインと書き換えて下さい
※ このサンプルだけなら、http://staff.tumblr.com/api/read/json?num=1 とするのが正解です。( 一件だけ取得する )



posted by at 2013-02-01 18:33 | Tumblr | このブログの読者になる | 更新情報をチェックする

Tumblr の記事内でJavaScriptを書く時の攻略方法



一回目の投稿では、理由があってうまく行く事がありますが、更新すると動かなくなります。いくつか要点があって、これを知らないとことごとく失敗するので注意して下さい。結論から言うと、頑張れば、たいていはなんとかなると思います。

スクリプト要素は DIV 要素内に書く

これをやっておかないと、Tumblr では スクリプトタグそのものをふつうの文字列と判断して、スクリプト要素内の改行に BR 要素を付加してしまうので全く動作しなくなってしまいます。全ての改行を取り除く方法もありますが、後からの変更が大変なので、DIV 要素内に入れて下さい。

要素に使えない拡張属性は消されてしまう

これは仕方の無い事ですが、ものによってはそれが無いと動かないスクリプトや貼り付けコードがあります。例えば、pixiv の画像の貼り付けコードは以下のようになっていて、本来存在しない属性( data-id 等 )があります。
<script src="http://source.pixiv.net/source/embed.js" data-id="32781938_1209156501636af5f39fc475b19caf1e" data-size="medium" data-border="off" charset="utf-8"></script><noscript><p><a href="http://www.pixiv.net/member_illust.php?mode=medium&amp;illust_id=32781938" target="_blank">魔法の湖</a> by <a href="http://www.pixiv.net/member.php?id=624362" target="_blank">night w&#225;lker</a> on <a href="http://www.pixiv.net/" target="_blank">pixiv</a></p></noscript>
これを使えるようにするには、結構な努力が必要になります。まず、全てを文字列に変換して、document.write で書きだすようにします。

文字列の変換は、こちらの JavaScript ボタンを使って下さい。

但し、これだけだと文字列中の > と < が &gt; と &lt; に変換されてしまうので、String.fromCharCode(0x3c) と String.fromCharCode(0x3e) を使って以下のように書き換える必要があります。
<div>
<script type="text/javascript">
str="";
str+=String.fromCharCode(0x3c)+"script src=\"http://source.pixiv.net/source/embed.js\" data-id=\"32781938_1209156501636af5f39fc475b19caf1e\" data-size=\"medium\" data-border=\"off\" charset=\"utf-8\""+String.fromCharCode(0x3e)+String.fromCharCode(0x3c)+"/"+"script"+String.fromCharCode(0x3e);
document.write(str);
</script>
</div>

これでやっと使えるようになるのですが、なかなか大変です。実際埋め込んでみたのがこちらになります。

pixiv の埋め込みコードの場合、ここまでして使う理由はありませんが、JavaScript を使った埋め込みツールは使えるにこした事はありません。日本の HTML を書き込めるブログでこういう事はまずありませんが、複数のブログを気軽に使える Tumblr のような存在は貴重なので、攻略方法は知っておいたほうが良いと思います。


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

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

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

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

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


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

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

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

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

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


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX