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

2013年03月19日


使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。

https://github.com/dellsala/Combo-Box-jQuery-Plugin

オリジナルの実装では、作成する毎に、jQuery の 名前空間に作った配列に追加していたので、インスタンスに対する処理が対象となるエレメントからの参照では無く不自然だったので、本来の jQuery の使い方に近い実装に変更しました。後、CSS の指定で一つバグがあったので修正しています。
オリジナルでのオプション変更
        $('#option_changer').click(function (e) {
            jQuery.combobox.instances[0].setSelectOptions([
                'Apples',
                'Oranges',
                'Bananas'
            ]);
        });
修正後
        $('#option_changer').click(function (e) {
            $("#input1").comboget().setSelectOptions([
                'Apples',
                'Oranges',
                'Bananas'
            ]);
        });
http://homepage2.nifty.com/lightbox/jquery/combobox/css/jquery.combobox/style.css
http://homepage2.nifty.com/lightbox/jquery/combobox/js/jquery.combobox.js



ソースコードを見ると、他にもメソッドがあるのですが、使いどころがあまりありません。あと、キー操作があって、フォーカスがある時に下矢印でリストが開きます。


<script type="text/javascript">
if ( window['loadjQuery'] !== true ) {
	window['loadjQuery'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></"+"script>");
}
</script>
<link rel="stylesheet" type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/combobox/css/jquery.combobox/style.css">
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/jquery/combobox/js/jquery.combobox.js"></script>

<script type="text/javascript">
$(function () {

	$('#input1').combobox([
		'青森',
		'岩手',
		'秋田',
		'山形',
		'宮城',
		'福島',
		'栃木',
		'群馬',
		'茨城',
		'東京'
	]);

	jQuery('#input2').combobox([
		'切絵字1.0',
		'モフ字1.3',
		'水面字1.1',
		'三次元切絵字1.0',
		'白舟篆書(教育漢字1006字)',
	]);
	
	jQuery('#option_changer1').click(function () {
		$("#input1").comboget().setSelectOptions([
			'三重','和歌山','奈良','滋賀','京都','大阪'
		]);
	});

	jQuery('#option_changer2').click(function () {
		$("#input2").comboget().setSelectOptions([
			'怨霊フォント',
			'下町の恐怖フォント',
			'しねきゃぷしょん',
			'たぬき油性マジック',
			'やさしさゴシックボールド'
		]);
	});

	jQuery('#test_show').click(function () {
		setTimeout( function() {$("#input1").comboget().selector.show();}, 1000 );
	});

	jQuery('#test_select').click(function () {
		setTimeout( function() {
			$("#input1").comboget().selector.show();
			$("#input1").comboget().selector.select(2);
		}, 1000 );
	});

	jQuery('#test_get').click(function () {
		$("#input1").comboget().selector.select(2);
		alert( $("#input1").comboget().selector.getSelectedValue() );
	});

 });
</script>

<div style='width:400px;height:200px'>
<table><tr>
<td><textarea id="input1"></textarea></td>
<td><input id="input2" type="text" value="アームド・バナナ" style='width:100px;'></td>
</tr></table>
<input id="option_changer1" type="button" value="内容変更1" />
<input id="option_changer2" type="button" value="内容変更2" />
<input id="test_show" type="button" value="1秒後表示" />
<input id="test_select" type="button" value="1秒後表示して選択" />
<input id="test_get" type="button" value="3番目の文字列を取得" />
</div>


タグ:javascript jquery
posted by lightbox at 2013-03-19 22:41 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2013年03月16日


jQuery (とDOM) で選択した SELECT 要素( コンボボックス ) の表示されているテキストを取得する

jQuery で取得するのは簡単ですが、場合によってはDOM を使えたほうがいい場面があるかもしれません。(name 属性を持つ要素であれば、document.getElementsByName の [0] を使ってエレメントを特定できます)
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<select name="font">
<option value="ArmedBanana">アームド・バナナ</option>
<option value="kirieji">切絵字1.0</option>
<option value="mofuji">モフ<b style='color:#f00;'>字</b>1.3</option>
<option value="minamoji">水面字1.1</option>
</select>
<input type="button" id="get_text" value="選択されたテキスト" />
<input type="text" id="result_text" />
<script type="text/javascript">

// ボタンのクリックイベント
$("#get_text").click( function() {
	// ************************************************
	// jQuery
	// ************************************************
	// コンボボックスそのもの
	var combo = $('select[name="font"]');
	// 選択されたコンボボックスのオプション
	var combo_option = $('select[name="font"] option:selected');

	// 選択された OPTION のテキスト
	var selected_text = combo_option.text();
	// 入力フィールドに、選択された OPTION のテキストをセット
	$("#result_text").val(selected_text);

	// 選択されたインデックス番号
	var nIndex = combo.prop("selectedIndex");
	console.log(nIndex);

	// 選択されたインデックス番号をエレメントから取得した場合
	var el = combo.get(0);	// jQuery のオブジェクトから DOM( パターン1 )
	console.log(el.selectedIndex);

	el = combo[0];		// jQuery のオブジェクトから DOM( パターン2 )
	console.log(el.selectedIndex);

	el = document.getElementsByName("font")[0];	// DOM
	console.log(el.selectedIndex);

	// 選択されたテキストをエレメントから取得した場合
	var childs = el.getElementsByTagName("option");
	selected_text = childs[nIndex].firstChild.nodeValue;
	console.log(selected_text);

});

</script>




タグ:jquery javascript
posted by lightbox at 2013-03-16 20:15 | jQuery | このブログの読者になる | 更新情報をチェックする

2013年03月15日


ログイン時に、『iPod サービス』を停止してみました

タスクスケジューラのログイン時の処理として登録しました。ただ、いきなり実行するとサービスが停止できなかったので、実行する VBScript の中で、5秒停止してから実行しています。VBScript を使っているのは、net stop を使う時にコマンドプロンプトが出るので、ウインドウを表示しないようにする為です。







▼ login.vbs
Wscript.Sleep(5000)

Set WshShell = WScript.CreateObject("WScript.Shell")
Call WshShell.Run( "net.exe stop ""iPod Service""", 0, True )
Call WshShell.Run( "taskkill /f /im iTunesHelper.exe /t", 0, True )
Call WshShell.Run( "net.exe stop TabletInputService", 0, True )
Call WshShell.Run( "taskkill /f /im armsvc.exe /t", 0, True )
Call WshShell.Run( "taskkill /f /im MSOSYNC.EXE /t", 0, True )

そもそも、iPod なんて持って無いのに勝手に動いてますが、調べたら全く必要無いそうなので(かなり古い情報ですが、逆に言うとそれくらい昔からある邪魔者のようですが)。ここまで作っておけば他のプロセスやサービスをログイン時に止める事できます。

iPod のサービスですが、もともと『手動』になっていて、ログイン時に強制的に起動されるみたいで、こんな回りくどい事になっています。これは、Apple の手段なんでしょうね。『自動』にしたら止められるし、ログインされた時に起動とすれば、一般の人だと対処できないでしょうから。



さらにいろいろインターネットを探索してみると、『iPod サービス』って評判悪いですね。iTunesHelper.exe もいらなさそうなので、いつかきっちり検証してみたいとは思っています。

試しに、iTunes を起動すると、見事に『iPod サービス』が起動されました。持ってるのは iPhone なので、手作業で『iPod サービス』を停止して iPhone を同期してみましたが、特に問題無いようですが・・・。iTunesHelper.exe も止めてみましたが、同期は問題無いようです。やはり不要なプログラムのようです。

iTunes はめったに使わないので、『iPod サービス』が起動されるのは忘れる事にしますが、タスクスケジューラで止めるとなると、『アイドル時』のイベント登録が必要になりそうです。面倒なので、一般的にはやはり iPodService.exe そのものを無効にするしか無さそうです(なにもしないプログラムを iPodService.exe という名前ですり替えてしまうという方法を使った人がインターネットに居られました)。

Apple サポートページの情報

iTunes for Windows:Windows XP、Vista、および 7 にインストールされるバックグラウンドプロセス

追記

iTunesHelper.exe は、レジストリに登録されていて、システム起動と同時に実行されるので、msconfig で無効にするか、レジストリエディタで削除すると起動しなくなるはずです( そうしている記事をみかけました )

▼ ココ
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run

自分は、まだ完全に検証していないので、以下の処理をスクリプトに追加しました

Call WshShell.Run( "taskkill /f /im iTunesHelper.exe /t", 0, True )

それと、iPodService.exe を無効にする方法ですが、たぶん可能だろうと思っていた権限の設定でやってみたという記事もみかけました。( 今日、自分で notepad.exe で試してみました )



プロセスとにらめっこしてると、『mDNSResponder.exe』というのに気がついて、サービスから見て行くと、『Bonjour サービス』というものである事が解り、先のリンク先の記事にもちゃんとありました。これは、単独でちゃんとアンインストールできるようになっていて、確認はできていませんが『iTunes のデータをネットワークで共有する時に使われるプログラム』らしいという事です。名前からしても明らかにネットワーク絡みなので、削除しました。



削除する時に、Google Chrome を動かしていましたが( この記事書いてる )、『アンインストールできないから Chrome 止めて』って言われてしまいました。・・・・何してんの裏で・・・・。

それと、『Apple Software Update』ってものもあると思いますが、これはその名の通りソフトウェアのバージョンアップに使うので、単体のソフトとして認識すればいいと思います。( 自分は、検証の為にブラウザを全部入れてるので、Safari をバージョンアップするのに必要です。)

Apple のサイトの文言によると、単独のインストールはできなくて、iTunes for Windows、QuickTime for Windows、または Safari for Windows のいずれかのインストール時にインストールされるとあります。

一応、インストールを拒否できるようです。
インストールの際は、「インストーラオプション」ウインドウの「iTunesや他のAppleソフトウェア製品を簡単にアップデートするためのApple Software Updateをインストールする。」にチェックマークが入っている (有効になっている) ことを確認してください。
完全に余談 net.exe stop TabletInputService を追加しました。 古いタブレットを Windows7 で動かしてみようと思って 『OptionalFeatures.exe』でタブレット PC コンポーネントを追加したんですが、やはりもともとのドライバも必要でかつ、まともに動かないので現在使ってません。でも、ちかいうちに新しいタブレット買うつもりなので、アンインストールするほどでは無いので停止させます。『手動』にしましたが、見事に勝手に『自動』になるみたいなんです。 更新履歴 2013-01-20 : 初回投稿 2013-03-15 : login.vbs の内容のアップデート。引用表現を変更
posted by lightbox at 2013-03-15 13:19 | Windows7 | このブログの読者になる | 更新情報をチェックする

2013年03月13日


IFRAME が各ブラウザで現在(2013/03/13)どのように振る舞うかのマトリックス

HTML5 で、scrolling 属性が削除されるという記述が良くありますが、実際は動作しています。削除されたのは『仕様』です。実際 iframe は広告・ツール等であちらこちらで利用されている現状で削除する事は簡単ではありません。

そんな中、Google Chrome だけが新しい仕様( seamless と srcdoc )を取り入れているので、ひょっとして最初に scrolling 属性を削除するかもしれないと推測はできますが、現実的では無いと思います。いかに Google と言えども人の作業が介在するので、このあたりは避けたいはずです。

また、Firefox だけが、scrolling がなくなる事を想定して、overflow:hidden が 対応されていますが、現状では css による変更は border:0px のみを考えるという状況に思われます。

iframe の背景透過

background-color の未指定時の透過処理は全てうまくいっていますが、IE8 以前では動作しません。

iframe 内で背景色を指定しない場合のみ、親ページでの背景色指定が有効になります。iframe 内で背景色を設定している場合親ページからの指定は反映されません。ただ、Windows Safari では動作が遅いせいか、親側の背景色が表示された上に後から( iframe がロードされてから )iframe 内の色が反映されるという状況でした。

Google Chrome の seamless の css 的効果

seamless は、Google Chrome だけでしたが、seamless 指定すると display:block となります。以下の例で縦にならんでいるのは、意図的に行っていますが、iframe はなにもしなければ横へ並びます。

スクロールバーが消える事はありませんが、border:0px と同じ効果がありました

現在最新のブラウザでのテスト結果 (2013/03/13)
Chrome
25.0.1364.160
Firefox
19.0.2
IE
10
Opera
12.14
Safari
5.1.7
srcdoc × × × ×
seamless
スクロールバーは
表示される

display:block
となる
× × × ×
overflow:
hidden
× × × ×
scrolling
HTML5 でも
使用できる
border:
0px;
background-color:
transparent
以下は実際の IFRAME


iframe内の記述
<!DOCTYPE html>
<html lang="ja">

<style type="text/css">
b {
	color: #000000;
	background-color: #e0e0e0;
	border-radius: 5px;
	padding: 4px;
}
body {
	background: url(http://leiya.winofsql.jp/d2.png);
}
.tp {
	background-color: #123456;
}
iframe {
	width: 400px;
	height: 60px;
	margin-bottom: 8px;
}
</style>

<body>
<pre>
<b>指定なし</b>
<iframe src="test1.htm"></iframe>
<b>scrolling="no" border:0px</b>
<iframe scrolling="no" style='border:0px;' src="test2.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test1.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test2.htm"></iframe>
<b>overflow:hidden</b>
<iframe style='overflow:hidden;' src="test2.htm"></iframe>
<b>seamless srcdoc</b>
<iframe seamless srcdoc="&lt;b style='color:#fff;'&gt;seamless srcdoc&lt;/b&gt;"></iframe>
</pre>
</body>
</html>

test1.htm
<!DOCTYPE html>
<html lang="ja">

<style type="text/css">
b {
	color: #000000;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 4px;
}
</style>

<body>
<b>背景色なし</b>
</body>
</html>

test2.htm
<!DOCTYPE html>
<html lang="ja">

<style type="text/css">
b {
	color: #000000;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 4px;
}
body {
	background-color: #c0c0c0;
}
</style>

<body>
<b>背景色あり/本来スクロールあり</b>
<pre>





























</pre>
</body>
</html>

Google Chrome のスクリーンショット





posted by lightbox at 2013-03-13 08:34 | HTML5 | このブログの読者になる | 更新情報をチェックする

2013年03月12日


ブログ等に貼りつける為のストリートビューコードの取得ツール


http://toolbox.winofsql.jp/streetview.php

Google MAP API V3 の ストリートビューのイベント処理 で使ったイベント処理で、ブログ等に貼りつける為のストリートビューコードを表示する為の汎用コードを取得します。

デフォルトで表示しているのは、『ブルックリン美術館』ですが、違った場所は以下のようにして取得します

❶ 緯度・経度に Google ストリートビューのリンクの中の cbll の値をセット
( リンク取得から取り出した中から取出します )


❷ 必要ならば位置を移動します
❸ ドラッグで視点を変更します

最終的に設定変更ボタンで決定して、画面下のテキストエリアのコードを使用します。

iPhone と Android の特別な処理

環境によって、通常コードでは表示しないので確実に表示する為に IFRAME を作成してその中に表示しています。所有している iPhone で、Seesaa の スマホ専用ページを表示すると、IFRAME でしか表示されませんでした。

ブログを想定したコード

Google の API の読み込みが一度で済むようなコードを先頭に書いているので、ブログの複数記事が表示されるページでも問題無く表示可能です。


posted by lightbox at 2013-03-12 00:42 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2013年03月11日


Google MAP API V3 の ストリートビューのイベント処理

位置移動や視点移動した場合のパラメータの取得方法です。V2 の時と比べて、どのくらい変わってるか見に行ったら、全く違ってました。V2 やった経験があるのですぐ解りましたが、V3 用の該当するサンプルコードは見つけられませんでした。しかし、ストリートビューの重要なイベントはこの二つですし、他のイベントもこのコードで同様に対応できると思います。

<script type="text/javascript">
// 同一ページで複数実行しても最初のみ処理される
if ( window['loadGmap_v3'] !== true ) {
	window['loadGmap_v3'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false\"></"+"script>");
}
</script>
<input type="text" id="heading" />
<input type="text" id="pitch" />
<input type="text" id="latlng" />
<div id="check_param" style="width: 600px; height: 480px"></div>

<script type="text/javascript">
// 無名関数内で定義しているのは、グローバル変数を使わない為
(function() {
	// ページロード時の実行
	google.maps.event.addDomListener(window, 'load', function () {
		// 緯度・経度 
		var latlng = new google.maps.LatLng(40.671559,-73.962557);  
		var panoramaOptions = {  
			position:latlng, 
			// 住所表示する 
			addressControl: true, 
			// 住所表示の位置 
			addressControlOptions: {  
				position: google.maps.ControlPosition.RIGHT_BOTTOM  
			},  
			pov: {  
				// 向き
				heading: -128,  
				// 上下
				pitch: 10,  
				zoom:1  
			},  
			visible: true  
		};  

		// ストリートビューを表示する DIV	  
		var targetDiv = document.getElementById("check_param");  
		// ストリートビューオブジェクト
		var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); 

		// ストリートビューオブジェクトに対して、視点を変更した時にそのパラメータを表示
		google.maps.event.addListener( myPano, 'pov_changed', function() {
			document.getElementById("heading").value = Math.floor(myPano.getPov().heading * 100)/100;  
			document.getElementById("pitch").value = Math.floor(myPano.getPov().pitch * 100)/100;  

		});
		// ストリートビューオブジェクトに対して、移動した時にその位置を表示
		google.maps.event.addListener( myPano, 'position_changed', function() {
			document.getElementById("latlng").value = myPano.getPosition().toUrlValue(); 

		});

	});
})(); 

</script>



posted by lightbox at 2013-03-11 04:27 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

IE開発者ツール : ユーザーエージェント文字列の変更

ユーザエージェント | サービス・機能 | NTTドコモ

NTT ドコモの情報を元に、例えば「DoCoMo/2.0 F900i(c100;TJ)」を利用する場合、フレンドリ名に指定した文字列が、メニューに表示されます。

IE10 のスクリーンショット



IE9 の時のスクリーンショット



フレンドリ名に自分が判断する為の識別用の名前を入力して、その下にユーザーエージェント文字列をセットして『追加』ボタンをクリックします。






必要な時にこのフレンドリ名を選択して再表示すると、表示されているページに設定したユーザーエージェント文字列が送られて、そのページがそのユーザーエージェント文字列に対応していた場合は表示が変更されます。

Seesaa ブログでは、以下のようになります。
( 携帯仕様 )



もう一度変更するまでは、F12 で閉じても状態は継続されます

更新履歴
2011-11-28 : 最初の記事作成
2013-03-11 : IE10 での開発者ツールのスクリーンショット追加


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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり