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 の全体像( ドキュメント )
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, '<'); 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 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 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); } }]]>
どうも、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>折り返さない
<input type="button" value="スクロール" onClick='window.scroll(0,document.body.scrollHeight)' >
■ Microsoftへのリンク scroll scrollHeight]]>
<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]]>
複数行を選択してタブキーで一括インデントします ※ 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 でスクロール位置が保持されるようにしました]]>
※ ブログ等で使用する場合は、「改行を<br/>タグに変換しない」ようにしてください。 ※ その場合、通常文章は PRE を書いてその中で記述します ※ 確実に幅を固定は、長さによっては固定できな場合があるので、いろいろ調整して下さい。 ※ SyntaxHighlighter.all() に変更すると、どこに書いても全てが変換されます ( 但し、表示にタイムラグが生じる場合があります ) ※ 単独記事で動作するようにすると、SyntaxHighlighter.all() を使います
このチェックボックスで、本来ヘッダ部に定義するような内容も全て付加し、 単独の記事でも動作するようにします
]]>
★ 1.5 からの使い方( 直後に書くのでタイムラグがありません ) 一つの記事内に複数の SyntaxHighlighter を設置する場合は、 HighlightAll の呼び出しは一度で動作します。但しその場合は、 複数設置された pre の name 属性を一致させて、それをHighlightAll で呼び出すようにして下さい。 1.5からの記述方法で移行する場合の書き方 ( IE6 では表示できません ) ■ SyntaxHighlighterのHosting
<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>
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"> <SCRIPT type="text/javascript"> function test() { alert("ok"); } </SCRIPT> <INPUT type="button" value="test" onClick='test();' > </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>
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用 貼り付けコード作成]]>
スクリプト中の任意の行でエラーが起こるかもしれない場合は、
その行( または複数の行範囲 ) を 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();' >]]>
<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度の範囲に収まるように修正されます。 |
もちろん、「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>
<SCRIPT type="text/javascript"> if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) { // IE 用 } else { // IE 以外用 } </SCRIPT>
たしか、ASP.NET が自動的に吐いたコードがこんなんだった記憶があります。