ブログの為のJavaScript http://js4blog.sblo.jp/ ブログをカスタマイズする為のJavaScript テクニック ja http://blogs.law.harvard.edu/tech/rss ブログをカスタマイズする為の JavaScript テクニック blog,ブログ,レンタルスペース,javascript,HTML,CSS,カスタマイズ night w&aacute;lker no http://js4blog.sblo.jp/article/29713150.html AJAX Libraries API の利用 Wed, 10 Jun 2009 09:58:12 +0900 AJAX Libraries API は、有名な JavaScript ライブラリをGoogle がホスティングするバージョンを指定して自由に使えるサービスです。例えば、prototype.js を利用したい場合は以下のように指定します。&lt;script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;&lt;script language.. <![CDATA[
AJAX Libraries API は、有名な JavaScript ライブラリを
Google がホスティングするバージョンを指定して自由に使える
サービスです。

例えば、prototype.js を利用したい場合は以下のように指定します。
<script
	src="http://www.google.com/jsapi"
	type="text/javascript"
	charset="utf-8"
></script>
<script language="javascript" type="text/javascript">

// Google で HOSTINGされているライブラリを使う
google.load("prototype", "1.6");

</script>

※ 利用サンプル( Form(サーバー送信)汎用スケルトン )

prototype.js の他にも、以下のようなライブラリが使用可能です

google.load("jquery", "1.3.1"); google.load("jqueryui", "1.5.3"); google.load("scriptaculous", "1.8.2"); google.load("mootools", "1.2.1"); google.load("dojo", "1.2.3"); google.load("swfobject", "2.1"); google.load("yui", "2.6.0"); jsapi が API キーを必要とするのは、Google MAP系のみです。 他の API の場合は以下のように記述されています
Google AJAX Search API では、JavaScript を使用して各自のウェブページに 
Google 検索を組み込むことができます。この API を使用するためにキーは必要ありません。
アプリケーションやサイトでキーを使用するかどうかは、完全に任意です。
ただし、キーを使用すると便利です。その理由は、キーがあれば、
自身のアプリケーションまたはサイトに関係する問題が検出された場合、Google がそのキーを
使用して連絡できるからです。
キーがなければ、問題が発生したときに連絡する手段がありません。 
上記記述は、Google AJAX Search API の記述で、AJAX Libraries API のページに
そのような記述はありませんが、準拠するものと考えられます。

■ Google AJAX Search API のエントリページGoogle AJAX API のエントリページGoogle AJAX API の全体像( ドキュメント )


]]>
Google AJAX Libraries API night w&aacute;lker
http://js4blog.sblo.jp/article/29641147.html shCore.jsのviewSourceのオーバーライド Sun, 07 Jun 2009 00:47:05 +0900 SyntaxHighlighter 2.0ヘッダー部でshCore.jsを読み込んだ後に処理させます。sh は内部変数ですが、SyntaxHighlighter が sh を return しているので同じものです。※ ここの viewSource は、このコードでオーバーライドしています。( この記事が表示されているページ内は全て対象となります )&lt;script type="text/javascript"&gt;SyntaxHighlighter.toolbar.i.. <![CDATA[
SyntaxHighlighter 2.0

ヘッダー部でshCore.jsを読み込んだ後に処理させます。
sh は内部変数ですが、SyntaxHighlighter が sh を return 
しているので同じものです。

※ ここの viewSource は、このコードでオーバーライドしています。
( この記事が表示されているページ内は全て対象となります )
<script type="text/javascript">
SyntaxHighlighter.toolbar.items.viewSource = 
function(highlighter)
{
	this.create = function()
	{
		return SyntaxHighlighter.config.strings.viewSource;
	};
	
	this.execute = function(sender, event, args)
	{
		var code = SyntaxHighlighter.utils.fixForBlogger(highlighter.originalCode);
		code = code.replace(/</g, '&lt;');

		var wndParam = 'location=0,resizable=1,menubar=0,scrollbars=1';
		wnd = SyntaxHighlighter.utils.popup('','_blank',800, 600,wndParam);

		code = SyntaxHighlighter.utils.unindent(code);

		wnd.document.write('<input type="button" value="ダウンロード"><br>');
		wnd.document.write('<pre>' + code + '</pre>');
		wnd.document.close();
	};
}
</script>

]]>
SyntaxHighlighter night w&aacute;lker
http://js4blog.sblo.jp/article/29640216.html ツールバーのviewSourceで追加機能実装 Sat, 06 Jun 2009 23:38:33 +0900 SyntaxHighlighter 2.0SyntaxHighlighter 2.0 の改造です。最も改造しやすい場所は、shCore.js の、viewSource : function(highlighter) です。元々殆ど機能が無く、JavaScript を知る人であればかなりの拡張ができるようになっています。ただ、ソース側の情報をここで知る必要があるので、以下のようにします&lt;pre name="code0001" class="brush: cpp; down.. <![CDATA[
SyntaxHighlighter 2.0

SyntaxHighlighter 2.0 の改造です。

最も改造しやすい場所は、shCore.js の、viewSource : function(highlighter) です。
元々殆ど機能が無く、JavaScript を知る人であればかなりの
拡張ができるようになっています。ただ、ソース側の情報を
ここで知る必要があるので、以下のようにします
<pre name="code0001" class="brush: cpp; download: lighbox; ext: lzh">

class には、自由にパラメータを追加できる仕様になっていますので、
上記のように設定するだけで、params は以下のようになります。
auto-links true
brush "cpp"
class-name ""
collapse "false"
download "lighbox"
ext "lzh"
first-line "1"
font-size undefined
gutter "true"
highlight undefined
light false
ruler "false"
smart-tabs true
tab-size 4
toolbar "true"
params は、viewSource 内で以下のようにして参照できます。

highlighter.params.download
highlighter.params.ext
]]>
SyntaxHighlighter night w&aacute;lker
http://js4blog.sblo.jp/article/29636841.html shLegacy.jsでOperaのタブが反映されない Sat, 06 Jun 2009 19:59:37 +0900 SyntaxHighlighter 2.0dp.SyntaxHighlighter.HighlightAll を使って、少しでも早くコードの変換しようとしている場合、Opera ではタブが無視されるようです。そこで、shLegacy.js を変更して、Opera の時だけ SyntaxHighlighter.all() を使用するようにしました。複数回呼ばれる事になりますが、特に問題は出ていませんそれと、その場合でも brush:タイプ という新しい書き方でないと反映されない.. <![CDATA[
SyntaxHighlighter 2.0

dp.SyntaxHighlighter.HighlightAll を使って、少しでも早く
コードの変換しようとしている場合、Opera ではタブが無視されるようです。

そこで、shLegacy.js を変更して、Opera の時だけ SyntaxHighlighter.all() を
使用するようにしました。

複数回呼ばれる事になりますが、特に問題は出ていません

それと、その場合でも brush:タイプ という新しい書き方でないと
反映されないので注意して下さい。
HighlightAll: function(
					name, 
					showGutter /* optional */, 
					showControls /* optional */, 
					collapseAll /* optional */, 
					firstLine /* optional */, 
					showColumns /* optional */
					)
{
	function findValue()
	{
		var a = arguments;
		
		for (var i = 0; i < a.length; i++) 
		{
			if (a[i] === null) 
				continue;
			
			if (typeof(a[i]) == 'string' && a[i] != '') 
				return a[i] + '';
			
			if (typeof(a[i]) == 'object' && a[i].value != '') 
				return a[i].value + '';
		}
		
		return null;
	};

	function findTagsByName(list, name, tagName)
	{
		var tags = document.getElementsByTagName(tagName);
		
		for (var i = 0; i < tags.length; i++) 
			if (tags[i].getAttribute('name') == name) 
				list.push(tags[i]);
	}

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("opera") > -1) {
		SyntaxHighlighter.all();
		return;
	}

	var elements = [],
		highlighter = null,
		registered = {},
		propertyName = 'innerHTML'
		;
	
	// for some reason IE doesn't find <pre/> by name, however it does see them just fine by tag name... 
	findTagsByName(elements, name, 'pre');
	findTagsByName(elements, name, 'textarea');

	if (elements.length === 0)
		return;
	
	for (var i = 0; i < elements.length; i++)
	{
		var element = elements[i],
			params = findValue(
				element.attributes['class'], element.className, 
				element.attributes['language'], element.language
				),
			language = ''
			;
		
		if (params === null) 
			continue;

		params = dp.SyntaxHighlighter.parseParams(
			params,
			showGutter, 
			showControls, 
			collapseAll, 
			firstLine, 
			showColumns
			);

		SyntaxHighlighter.highlight(params, element);
	}
}

]]>
SyntaxHighlighter night w&aacute;lker
http://js4blog.sblo.jp/article/29349479.html テキストエリアの右端で折り返さない Sun, 24 May 2009 17:56:23 +0900 どうも、Firefox がスクリプトで変更すると言う事を聞かないので、innerHTML で総替えです。&lt;script type="text/javascript"&gt;function change_wraptype(obj) { var svdata; if (window.navigator.appName.toLowerCase().indexOf("microsoft") &gt; -1) { if(obj.checked){ document.get.. <![CDATA[
どうも、Firefox がスクリプトで変更すると言う事を聞かないので、
innerHTML で総替えです。
<script type="text/javascript">
function change_wraptype(obj) {

	var svdata;

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		if(obj.checked){
			document.getElementById("text_unit").wrap = "off";
		}
		else{
			document.getElementById("text_unit").wrap = "soft";
		}
	}
	else {
		svdata = document.getElementById("text_unit").value;

		if(obj.checked){
			str = str="<textarea id=\"text_unit\" cols=80 rows=20 wrap=\"off\"></textarea>";
		}
		else{
			str = str="<textarea id=\"text_unit\" cols=80 rows=20 wrap=\"soft\"></textarea>";
		}
		document.getElementById("control_unit").innerHTML = str;
		document.getElementById("text_unit").value = svdata;
	}
}
</script>

折り返さない <input
	type="checkbox"
	onClick='change_wraptype(this)'
>
<div id=control_unit>
<script type="text/javascript">
document.write("<textarea id=\"text_unit\" cols=80 rows=20 wrap=\"soft\"></textarea>");
</script>
</div>

折り返さない
]]>
クロスブラウジング night w&aacute;lker
http://js4blog.sblo.jp/article/29347907.html JS : ページの最後へスクロール Sun, 24 May 2009 16:14:45 +0900 type="button" value="スクロール" onClick='window.scroll(0,document.body.scrollHeight)'&gt;&lt;input type="button" value="スクロール" onClick='window.scroll(0,document.body.scrollHeight)'&gt;■ MicrosoftへのリンクscrollscrollHeight <![CDATA[
<input
	type="button"
	value="スクロール"
	onClick='window.scroll(0,document.body.scrollHeight)'
>


■ Microsoftへのリンク
scroll
scrollHeight
]]>
JavaScript night w&aacute;lker
http://js4blog.sblo.jp/article/29332943.html JS : 10進数 &lt;-&gt; 16進数 Sun, 24 May 2009 01:07:08 +0900 &lt;script type="text/javascript"&gt;document.write( 0x123456 );document.write( "&lt;br&gt;" );document.write( parseInt("0x" + 123456) );document.write( "&lt;br&gt;" );document.write( eval("0x" + 123456) );document.write( "&lt;br&gt;" );doc.. <![CDATA[
<script type="text/javascript">

document.write( 0x123456 );
document.write( "<br>" );

document.write( parseInt("0x" + 123456) );
document.write( "<br>" );

document.write( eval("0x" + 123456) );
document.write( "<br>" );

document.write( parseInt( "123456", 16 ) );
document.write( "<br>" );

document.write( parseInt("#123456".replace(/#/,"0x")) );
document.write( "<br>" );

document.write( (0x123456).toString(16) );
document.write( "<br>" );

</script>

1193046
1193046
1193046
1193046
1193046
123456
]]>
JavaScript night w&aacute;lker
http://js4blog.sblo.jp/article/28873874.html タブキーで一括インデント可能なテキストエリア Mon, 04 May 2009 19:06:38 +0900 複数行を選択してタブキーで一括インデントします※ SHIFT+タブキーで逆一括インデントです以下のようにして貼り付けるだけで実装できます&lt;SCRIPT type="text/javascript" src="http://homepage2.nifty.com/lightbox/tabtextarea.js"&gt;&lt;/SCRIPT&gt;&lt;SCRIPT type="text/javascript"&gt;createTabTextArea("sample.. <![CDATA[
複数行を選択してタブキーで一括インデントします
※ SHIFT+タブキーで逆一括インデントです


以下のようにして貼り付けるだけで実装できます
<SCRIPT 
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/tabtextarea.js">
</SCRIPT>
<SCRIPT type="text/javascript">
createTabTextArea("sample1",60,15,"myclass");
</SCRIPT>

1) name
2) cols
3) rows
4) class

Firefox でスクロール位置が保持されるようにしました
]]>
ライブラリ night w&aacute;lker
http://js4blog.sblo.jp/article/28869837.html SyntaxHighlighter2.0用 貼り付けコード作成 Mon, 04 May 2009 13:31:10 +0900 SyntaxHighlighter 2.0&nbsp;&nbsp; ■ highlight: [n1, n2, n3], ■ SyntaxHighlighter.all();ブラシtext,plainjavascripthtml,xmlcssphpc,cppvbsqljavac#perlpythonrubyscaladelphibash,shelldiffgroovy  確実に幅を固定 &nbsp;TAB幅 ハイライト行 a-b と指定できます※ ,と併用はできませんSyn.. <![CDATA[ SyntaxHighlighter 2.0    ■ highlight: [n1, n2, n3], ■ SyntaxHighlighter.all();
ブラシ     確実に幅を固定   TAB幅
ハイライト行 a-b と指定できます
※ ,と併用はできません
SyntaxHighlighter.all()を使う   単独記事で動作するようにする   ドメイン
※ ブログ等で使用する場合は、「改行を<br/>タグに変換しない」ようにしてください。
※ その場合、通常文章は PRE を書いてその中で記述します
※ 確実に幅を固定は、長さによっては固定できな場合があるので、いろいろ調整して下さい。
※ SyntaxHighlighter.all() に変更すると、どこに書いても全てが変換されます
( 但し、表示にタイムラグが生じる場合があります )
※ 単独記事で動作するようにすると、SyntaxHighlighter.all() を使います
このチェックボックスで、本来ヘッダ部に定義するような内容も全て付加し、
単独の記事でも動作するようにします

★ 1.5 からの使い方( 直後に書くのでタイムラグがありません ) 一つの記事内に複数の SyntaxHighlighter を設置する場合は、 HighlightAll の呼び出しは一度で動作します。但しその場合は、 複数設置された pre の name 属性を一致させて、それをHighlightAll で呼び出すようにして下さい。 1.5からの記述方法で移行する場合の書き方 ( IE6 では表示できません ) ■ SyntaxHighlighterのHosting
]]>
SyntaxHighlighter night w&aacute;lker
http://js4blog.sblo.jp/article/28868927.html JavaScriptの省略引数 Mon, 04 May 2009 12:24:02 +0900 function 内で arguments[n] で参照できますが、arguments.lengthに引数の数が入るので以下のようにする事ができます■引数1つは固定で後はオプションにする。&lt;script type="text/javascript"&gt;function argumentTest(a) { var param2="",param3="",param4=""; document.write( "■" + a + "&lt;br&gt;" ); if ( .. <![CDATA[ function 内で arguments[n] で参照できますが、arguments.length
に引数の数が入るので以下のようにする事ができます

■引数1つは固定で後はオプションにする。
<script type="text/javascript">

function argumentTest(a) {

	var param2="",param3="",param4="";

	document.write( "■" + a + "<br>" );

	if ( arguments.length > 1 ) {
		param2 = arguments[1];
		document.write( param2 + "<br>" );
	}
	if ( arguments.length > 2 ) {
		param3 = arguments[2];
		document.write( param3 + "<br>" );
	}
	if ( arguments.length > 3 ) {
		param4 = arguments[3];
		document.write( param4 + "<br>" );
	}

}


argumentTest( "ひとつ" );
argumentTest( "ふたつ", 1 );
argumentTest( "みっつ", "A", "B" );
argumentTest( "よっつ", "x", "y", "z" );

</script>



]]>
JavaScript night w&aacute;lker
http://js4blog.sblo.jp/article/28770407.html SyntaxHighlighterのHosting Wed, 29 Apr 2009 19:29:26 +0900 SyntaxHighlighter 2.0SyntaxHighlighterの2.0では、ライブラリを置く自分の WEB スペースの無い人の為に Hosting してくれていますので、慣れるまではまず以下のコードをヘッダ部分か、記事前でページで一度だけ表示される場所に記述するといいと思います。(動作確認後、ゆっくり入れ替えれば良いです)必要なライブラリは選択する必要がありますが、使用するものは全て記述しておきます。いろいろやってみましたが、それが最も良い方法であると思っていま.. <![CDATA[ SyntaxHighlighter 2.0
SyntaxHighlighterの2.0では、ライブラリを置く自分の WEB スペースの
無い人の為に Hosting してくれていますので、慣れるまではまず
以下のコードをヘッダ部分か、記事前でページで一度だけ表示される場所に
記述するといいと思います。(動作確認後、ゆっくり入れ替えれば良いです)

必要なライブラリは選択する必要がありますが、使用するものは全て
記述しておきます。いろいろやってみましたが、それが最も良い方法
であると思っています。
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"
></script>
<link
	type="text/css"
	rel="stylesheet"
	href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css"/>
<link
	type="text/css"
	rel="stylesheet"
	href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css"/>
<script
	type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =
 '\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000';
SyntaxHighlighter.defaults['auto-links'] = false;
</script>
記事側では以下のように記述して下さい
(SyntaxHighlighter2.0用 貼り付けコード作成 で作成できます)
<pre name="code0904292021" class="brush:js">
&lt;SCRIPT type=&quot;text/javascript&quot;&gt;

function test() {
	alert("ok");
}

&lt;/SCRIPT&gt;


&lt;INPUT
	type=&quot;button&quot;
	value=&quot;test&quot;
	onClick='test();'
&gt;
</pre>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code0904292021");
</script>
また、見栄えを変更したい場合は以下のようなスタイルを追加します
<style type="text/css">
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {
	font-size:12px!important;
	font-family: "MS Pゴシック"!important;
}
.syntaxhighlighter {
	padding:5px!important;
	background-color:#FFFFFF!important; 
	border-style:solid!important;
	border-color:#808080!important;
	border-width:1px!important;
}
</style>


ダウンロードおよび利用方法が書かれたサイト(英文)
※ IE6.0 で正しく表示されません。 ]]>
SyntaxHighlighter night w&aacute;lker
http://js4blog.sblo.jp/article/28716162.html SyntaxHighlighter 2.0 Mon, 27 Apr 2009 01:45:35 +0900 SyntaxHighlighter 2.02.0 では、SyntaxHighlighter.all(); をヘッド部に書くだけで、全ての対象部分を変換してくれますが、ページ全てがロードされないと実行されないので正しい表示変換までタイムラグが生じます。ですから、1.5 互換処理用の shLegacy.js を使用しておいて、ソースコードの直後に dp.SyntaxHighlighter.HighlightAll を実行すると時間差無く変換されます。( name 属性が必要です .. <![CDATA[ SyntaxHighlighter 2.0
2.0 では、SyntaxHighlighter.all(); をヘッド部に書くだけで、
全ての対象部分を変換してくれますが、ページ全てがロードされないと
実行されないので正しい表示変換までタイムラグが生じます。

ですから、1.5 互換処理用の shLegacy.js を使用しておいて、
ソースコードの直後に dp.SyntaxHighlighter.HighlightAll を実行
すると時間差無く変換されます。( name 属性が必要です )

それでも、class 内で指定する 新しいプロパティ設定は可能です。
デフォルトでは url 変換が有効になっていますので、少しでもストレス無く
表示させるには、ヘッド部で無効にしておくといいと思います。
/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
 *
 * @version
 * 2.0.296 (March 01 2009)
 * 
 * @copyright
 * Copyright (C) 2004-2009 Alex Gorbatchev.
 *
 * @license
 * This file is part of SyntaxHighlighter.
 * 
 * SyntaxHighlighter is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * SyntaxHighlighter is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with SyntaxHighlighter.  If not, see <http://www.gnu.org/licenses/>.
 */
SyntaxHighlighter.brushes.Plain = function()
{
};

SyntaxHighlighter.brushes.Plain.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Plain.aliases = ['text', 'plain'];


■ 関連する記事
SyntaxHighlighter 2.0 のすすめ
SyntaxHighlighterのHosting
SyntaxHighlighter2.0用 貼り付けコード作成
]]>
SyntaxHighlighter night w&aacute;lker
http://js4blog.sblo.jp/article/27559300.html 【エラー処理】try~catch ステートメント Fri, 13 Mar 2009 13:07:42 +0900 スクリプト中の任意の行でエラーが起こるかもしれない場合は、その行( または複数の行範囲 ) を try ~ catch を使って囲む事によって、エラーを無視させる事ができます &uarr;のボタンをクリックすると、&darr;のコードと同じものが実行され、最初はエラーに対して特定の処理を実行していますが、二つ目は全くエラーを無視しています。&nbsp;&lt;SCRIPT type=&quot;text/javascript&quot;&gt;function test() .. <![CDATA[

スクリプト中の任意の行でエラーが起こるかもしれない場合は、
その行( または複数の行範囲 ) を try ~ catch を使って囲む事によって、
エラーを無視させる事ができます



↑のボタンをクリックすると、↓のコードと同じものが実行され、最初はエラーに対して
特定の処理を実行していますが、二つ目は全くエラーを無視しています。 

<SCRIPT type="text/javascript">

function test() {

	// エラーが発生したら、catch 内のステートメントを実行
	try {
		alert( document.getElementById("abc").value );
	}
	catch(e) {
		alert( e.description );
	}

	// エラーが発生したら、なにもしない
	try {
		alert( document.getElementById("abc").value );
	}
	catch(e){}
}

</SCRIPT>


<INPUT
	type="button"
	value="try~catch"
	onClick='test();'
>


Microsoft のリファレンス

Mozillad( 英文 ) リファレンス


 

]]>
JavaScript night w&aacute;lker
http://js4blog.sblo.jp/article/27478502.html Google ストリートビューのパノラマを自分のブログに設置する方法 Mon, 09 Mar 2009 22:23:13 +0900 東京タワーを見上げる状態でパノラマを設置しました。&lt;div name=&quot;pano&quot; id=&quot;pano&quot; style=&quot;width: 500px; height: 300px&quot;&gt;&lt;/div&gt;&lt;script charset=&quot;utf-8&quot; src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=f.. <![CDATA[ 東京タワーを見上げる状態でパノラマを設置しました。


<div name="pano" id="pano" style="width: 500px; height: 300px"></div>
<script
charset="utf-8"
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=自分用のMAPキー"></script> <script type="text/javascript"> function handleNoFlash(errorCode) { if (errorCode == FLASH_UNAVAILABLE) { alert("Error: Flash doesn't appear to be supported by your browser"); return; } } var fenwayPark = new GLatLng(35.658069,139.745016); myPano = new GStreetviewPanorama(document.getElementById("pano")); myPOV = {yaw:35,pitch:-45}; myPano.setLocationAndPOV(fenwayPark, myPOV); GEvent.addListener(myPano, "error", handleNoFlash); if (window.attachEvent){ window.attachEvent('onunload', GUnload); } else { window.addEventListener('unload', GUnload, false); } </script>


Google のサンプル通りではいろいろ問題もあるので、 
ブログ内に確実に埋め込む方法です。
Google のサンプルでは、BODY の onload に初期処理がありますが、
埋め込む場所を先に定義する事によって、その必要がなくなります。

但し、メモリを開放する処理は必要なので、イベントに追加しています。
unload は、テストしました。うまく動いてます。
イベントに追加するには、他のライブラリを使用する方法もありますが、
他のライブラリが影響しないという保証は無いのでこのサンプルでは、
ベタで書いています。

で。

myPOV は、一つ目の引数は、東西南北で北を 0 とした値で、
二つ目の引数は、マイナスで上向きプラスで下向きのカメラ上下角度です。
( -90~90 )

この値は、緯度経度共に、Google の「リンク」取得で知る事ができます。

GLatLng は、通常の MAP API における緯度・経度です。
GLatLng(lat, lng, unbounded?)
緯度と経度の順序に注意します。unbounded フラグが true である場合は、緯度と経度の数値がそのまま使用されます。true でない場合は、緯度は -90度 ~ +90度の範囲に、経度は -180度 ~ +180度の範囲に収まるように修正されます。
( 自分用の MAP キーはサイト毎でご自分で取得して下さい。 ) APIキー取得

]]>
Google AJAX APIs-ストリートビュー night w&aacute;lker
http://js4blog.sblo.jp/article/27127408.html できれば避けて通りたいけれど・・・そうもいかない Mon, 23 Feb 2009 18:40:58 +0900 もちろん、「IE 以外は知らない」というちょいとわがままな選択肢もありますが、少なくとも、Firefox だけは無視できないステキなブラウザです。WEB でコンテンツ作るのであれば、Firefox だけは認識しておく必要があります。で、そうしておけばたいていの他のブラウザで応用ききますし( 厳密にやろうとすると確実にメゲますけど )&nbsp;&lt;SCRIPT type="text/javascript"&gt; var userAgent = window.naviga.. <![CDATA[

もちろん、「IE 以外は知らない」というちょいとわがままな選択肢もありますが、
少なくとも、Firefox だけは無視できないステキなブラウザです。
WEB でコンテンツ作るのであれば、Firefox だけは認識しておく
必要があります。

で、そうしておけばたいていの他のブラウザで応用ききますし
( 厳密にやろうとすると確実にメゲますけど ) 


<SCRIPT type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert("IE6");
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert("IE7");
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert("IE8");
		}
		else {
			alert("Unknown");
		}
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert("Firefox");
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert("Opera");
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert("Google Chrome");
	}
	else if (userAgent.indexOf("safari") > -1) {
		alert("Safari");
	}
	else {
		alert("Unknown");
	}

</SCRIPT>

実際問題このコードはよく使います。いやというほど。
ちなみに以下は、イントラネット用で、IE と それ以外で判断している記述 
<SCRIPT type="text/javascript">

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		// IE 用
	}
	else {
		// IE 以外用
	}

</SCRIPT>

たしか、ASP.NET が自動的に吐いたコードがこんなんだった記憶があります。


 

]]>
クロスブラウジング night w&aacute;lker