2009年06月10日

AJAX Libraries API の利用

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 の全体像( ドキュメント )


posted by night wálker at 09:58| Google AJAX Libraries API

2009年06月07日

shCore.jsのviewSourceのオーバーライド

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>

posted by night wálker at 00:47| SyntaxHighlighter

2009年06月06日

ツールバーのviewSourceで追加機能実装

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
posted by night wálker at 23:38| SyntaxHighlighter

shLegacy.jsでOperaのタブが反映されない

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

posted by night wálker at 19:59| SyntaxHighlighter

2009年05月24日

テキストエリアの右端で折り返さない

どうも、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>

折り返さない
posted by night wálker at 17:56| クロスブラウジング
JavaScript ベーシック
SyntaxHighlighter
クロスブラウジング
その他
Highslide JS
思いの他綺麗に撮れた花
ブログを彩るには、JavaScript が必ず必要です。
特に、Google の存在は大きく、Google MAP をはじめとする
いろいろな先進の技術を簡単に利用できます。
結構知られていないものもあり、少し JavaScript を勉強すれば使えるようになって
自分のブログにいろいろな花を添える事ができるようになると思います。
※ この花は Highslide JS と言って Google とは関係ありません。



Admin