SQLの窓

2013年03月26日


Three.js + Shadowbox 飛翔する200人の初音ミク

画像は  です。大きい画像を指定しても強制的にこのサイズで描画します。つまり、大きくするとメモリが無駄になるだけです。

実行は、Google Chrome 推奨ですが、Three.js とは言え、Canvas を使用しているので他のブラウザでも動作はします。速度的に Google Chrome 推奨です。( 今日自分の iPhone で見たら物凄く遅いですが、一応動作していました )
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<script type="text/javascript">
function openThree(your_image_60) {
	Shadowbox.open({ 
		player: 'iframe', 
		content: 'about:blank', 
		options: { 
			onFinish: function(target) {
				setTimeout(  function() {
					var doc = document.getElementById("sb-player").contentWindow.document;
					doc.write("<"+"style> body { background-color:#fff; } </"+"style>");

					doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
					doc.write("<"+"script type=\"text/javascript\">image_url='" + your_image_60 + "';</"+"script>");
					doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
					doc.close();
				},100 );
			}
		} 
	
	}); 
}

</script>
<input type="button" value="飛翔する200人の初音ミク" onclick="openThree('http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png')" />
元の大きな画像はこちらです。左上と右上の部分が座標移動しているだけですが、羽ばたいているように見えると思います。

Three.js のオリジナルはこちらから見る事ができます

ここでは、Three.js の内容では無く、Shadowbox を使って IFRAME 内に動的にページを作成する事が重要です。Three.js では、通常画像の URL を指定する事によってその画像をページ内に大きく表示してくれますが、HTML ページを指定すると IFRAME を使用します。

昨今、他のページを埋め込むのは自分のサイトでもいろいろ難しい問題がありますが、ここでは document.write を使って同一ドメインのページを表示しているのと同等の IFRAME を動的に作成する方法を示しています。

自分で IFRAME を用意してもいいのですが、どうせなので Shadowbox の美しいウインドウを使ってみました。また、表示する内容も Three.js のサンプルを改造して『初音ミク』の画像を飛ばせています。Three.js の部分は全て JavaScript に書き込んで、画像だけを変更可能にしています。

Shadowbox も、自分のサイトにホスティングして、記事毎に動的にロードする方法を示していますが、もしよろしかったらこの部分はご自由にお使い下さい。( ホスティングをそのまま使ってもいいですし、コードを転用なさってもかまいません )


posted by lightbox at 2013-03-26 00:09 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2013年03月22日


JavaScript の function を new したものが、JSON フォーマットで記述した『Object』と同じである事のテスト

function は、他の言語で言うところの『クラス』のようなものですが、実際の扱いはそんなに簡単ではありません。しかし、少なくともこの二つが『インスタンス』である事は間違いなさそうです。

ですから、jQuery の .data メソッドでエレメントに対して『インスタンス』を保存する事ができるという事なので、以下の記事での改造はそれを利用しています。

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
そもそも、jQuery のプラグインは、jQuery の インスタンスに対してのメソッドの実装です。プラグインは、jQuery の機能を借りて、そのメソッドが特有の振る舞いをするような『オブジェクト』を window の中に作りだします。
そして、再度そのオブジェクトを操作する為にそのオブジェクトを参照する必要があるので、どこかに保存しなければなりません。
当然、再度参照するなら jQuery の インスタンスを介して( 実際はセレクタで選択されたもの )再度参照されるべきだと思います。
しかし、このプラグインでは単純に配列を作ってそこへ push していただけなので、『何番目に何が居る』かをプログラマは番号で呼び出すようになっていました。
これでは意味が無いので プラグインが作った『オブジェクト』を .data で 元の要素に保存しました。
( jQuery で console.log(typeof $("#test")); と実行すると object と表示される )
<script type="text/javascript">
function myJson() {
	this.prop = "JSON";
}

j1 = new myJson();
console.log( typeof j1 );
console.dir( j1 );

j2 = { prop: "JSON" };
console.log( typeof j2 );
console.dir( j2 );
</script>


さらに、new でインスタンスが作成された時に、プロパティとして持っているものは function 内で this で定義する事になっていますが、これは、function の名前に対する prototype に インスタンスをセットしてもいい事になっているので、こんな書き方ができる事になります。
<script type="text/javascript">
function myJson1() {
}
function myJson2() {
	this.prop = "JSON";
}

myJson1.prototype = new myJson2();

j1 = new myJson1();	  // 本体にプロパティは無い
console.dir( j1 );        // プロトタイプに prop があります
console.log( j1.prop );   // JSON と表示される
</script>
さらに、ほんの少し書き方が違いますが、以下のようにしても同じ結果を得る事ができます。

call メソッドは、他の『クラス』の実際に記述されているプロパティに対して効果があるので、継承したいプロパティは function 内に書いておく必要があります。

つまり、結果が同じようでいて、JSON フォーマットの記述である『オブジェクト』ではできない事が function で書くと可能になるという事です。
<script type="text/javascript">
function myJson1() {
	myJson2.call( this );
}
function myJson2() {
	this.prop = "JSON";
}

j1 = new myJson1();	  // 本体にプロパティは無い
console.dir( j1 );        // 本体に prop があります
console.log( j1.prop );   // JSON と表示される
</script>


タグ:javascript JSON
posted by lightbox at 2013-03-22 01:10 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

ブラウザ毎の「開発者ツール」の起動と知っておくべき要点

重要な要点
IE 以外では、右クリックから「要素の調査」というような同様の意味のメニューで起動できます
IE と Google Chrome と Firfox では、F12 で起動できます。
IE のみ ツール内で dir( document ) と言った直接記述ができません。他のブラウザは可能です。
※ 参考
Chrome : Command Line API Reference / Chrome : Console API Reference
Google Chrome のコンソールのクリアは、エリアの端を右クリックすると必ず表示されます
Windows Safari は、Canvas でアニメーションしていると、ツール内が全く動きません( 使えません )
Google Chrome と Firefox と Safari では、copy(document.body.innerHTML) というようなクリップボードへコピーするコマンドがあります
IE にはカラーピッカーが付属し、JavaScript整形が可能です。また、『cd() - 現在のウィンドウを出力します。cd(myframe) - 式の評価を id = "myframe" のサンプル フレームに切り替えます。』というような、フレーム移動コマンドがあります
Google Chrome ではリストからフレームを選択してカレントのウインドウにする事ができます

IE8、IE9、IE10 / (開発者ツール)

起動は F12 です

画像は IE10 ですが、IE では、F12 で起動します。
IE8、IE9では、開発者ツールを起動しないと、console.log 等の専用コマンドを実行するとエラーになるので ページの JavaScript で console.log 等のコマンドを実行する時は、try {} catch(e){} で実行する必要があります。IE10 ではその問題は修正されたようです




Firefox ( Firebug )

起動は F12 です

IE 以外では、右クリックから「要素の調査」というような同様の意味のメニューで各プラウザは起動できるようになっています



当然ですが、Firefox では Firebug です。ですから、アドオンとしてインストールが必要になります。Firebug の console.dir が一番結果を解析しやすく、使いやすいです。( IE は IE9 以降で使えます )




Google Chrome ( デベロッパーツール )

起動は F12 または CTRL + SHIFT + I です

IE 以外では、右クリックから「要素の調査」というような同様の意味のメニューで各プラウザは起動できるようになっています






Opera ( ドラゴンフライ )

起動は CTRL + SHIFT + I です

IE 以外では、右クリックから「要素の調査」というような同様の意味のメニューで各プラウザは起動できるようになっています






Safari ( WEB インスペクタ )

起動は CTRL + ALT + I です

IE 以外では、右クリックから「要素の調査」というような同様の意味のメニューで各プラウザは起動できるようになっています



メニューから実行したい場合は、設定で「開発メニュー」を表示するようにします






更新履歴
2011-07-27 : 初回投稿
2013-03-16 : IE10 リリースに伴う変更
2013-03-22 : 重要な要点 ❽ ( Chrome のフレーム選択機能 ) を追加



posted by lightbox at 2013-03-22 00:32 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする
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 終わり