GINPRO / SQLの窓と銀プログラマ

http://www.webtoolkit.info/javascript.html



↑英文です。使い方はソース見てね、みたいな感じなので解る人にのみ便利です。

いろいろありますし、使える時に使いましょう。

<?

print hash( "sha256", "123" );

?>

str="";
str+="<style> \n";
str+="body{ \n";
str+=" margin:0; \n";
str+="} \n";
str+="</style> \n";
str+="<input type=button value=\"入力完了\" onClick='setData()'><br> ";
str+="<textarea id=area style=\"width:100%;height:100%;\"></textarea> \n";
str+=" ";
document.write(str);

document.write("<"+"script src=http://winofsql.jp/sh/text2.js><"+"\/script>");

document.getElementById("area").style.fontFamily = 'ＭＳ ゴシック';
document.getElementById("area").style.fontSize = '12px';
document.getElementById("area").value = opener.document.activeElement.innerHTML;

document.close();

function setData() {
	opener.document.activeElement.value = document.getElementById("area").value;
	window.close();
}

if(typeof bookmarklet_focused=='undefined'){
	addEventListener("focus",function(event)
	{
		bookmarklet_focused = event.target;
	}
	,true);
	alert("\u30d5\u30a9\u30fc\u30ab\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u307e\u3057\u305f\u3002\u76ee\u7684\u306e\u5834\u6240\u306b\u79fb\u52d5\u3055\u305b\u3066\u518d\u5ea6\u5b9f\u884c\u3057\u3066\u4e0b\u3055\u3044");
}
else {
	var temp_node = document.createElement("span");
	var parent_node = bookmarklet_focused.parentNode;
	parent_node.insertBefore(temp_node,bookmarklet_focused);
	temp_node.appendChild(bookmarklet_focused);
	alert(temp_node.innerHTML);
}

<a
	href='javascript:if(typeof bookmarklet_focused=="undefined"){addEventListener("focus",function(event){bookmarklet_focused=event.target;},true);alert("\u30d5\u30a9\u30fc\u30ab\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u307e\u3057\u305f\u3002\u76ee\u7684\u306e\u5834\u6240\u306b\u79fb\u52d5\u3055\u305b\u3066\u518d\u5ea6\u5b9f\u884c\u3057\u3066\u4e0b\u3055\u3044");}else{var temp_node=document.createElement("span");var parent_node=bookmarklet_focused.parentNode; parent_node.insertBefore(temp_node,bookmarklet_focused);temp_node.appendChild(bookmarklet_focused); alert(temp_node.innerHTML);}'
	onclick='
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			event.returnValue = false;
		}
		else {
			event.preventDefault();
			var s = window.getSelection();
			var range = document.createRange();
			range.selectNodeContents(document.getElementById("my_src"));
			s.addRange(range);
		}
		alert("【Firefox専用です】右クリックしてポップアップメニューからブックマークして下さい　　　");
	'
>フォーカス位置のHTML定義の取得</a>

これは、Google のアカウントを持っておれば作成できる、オンラインの Excel のような
スプレッドシートからデータを取得して表示しています。

前回から比べると、格段にコードが簡単になっていますし、データのほうを変更して公開
しなおすともちろんこちらの表示も変わります。( 正直 Google DOC の使い方はよく解りませんが )
思ったよりはるかに信頼できるものになってますね。

というか、そもそも Google は Adsense で同様の事以上の事をやっていてめちゃめちゃ
信頼性( なにしろ広告介して大きなお金と信用がかかわつてるので )高いはずです。
例によって技術者向けのサービスはからっきしですけど・・・

とにかく今回は、IE だけ変なので IFRAME で別ページです。
これくらいの問題点は仕方無いですけれど、う・・ん。少し腹が立つ > Microsoft。
( 年間100回くらい )
 
※ソースコードはこちら

前は Google ローダ込みでさらにシンプルにしたスクリプトローダで、Lightbox の実装を行いましたが、 もともと A タグを使う簡単な設計になっています。

で、いろいろな所から呼び出す為に、Lightbox が A 要素に仕込んでいる click イベントを直接呼び出します。prototype では何故かこの native イベントは呼び出せないので、関数を作成して呼び出しています。たぶん、Mozilla の仕様変更に影響されたく無かったのではないかと思いますが・・・・

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/host/js/lightbox/204/lightbox_set.js"></script>
<script type="text/javascript">

function callNativeMouseEvent(obj) {

	if ( window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		obj.click();
	}
	else {
		var event;
		event = document.createEvent("MouseEvent");
		event.initEvent("click", true, true);
		obj.dispatchEvent(event);
	}
}
</script>

<div style='display:none'>
<a id="img1" href="http://lightbox.cocolog-nifty.com/photos/lightbox/1950808_2860106626_2.jpg" rel="lightbox[roadtrip]" title="抜け殻">image #1</a>
<a id="img2" href="http://lightbox.cocolog-nifty.com/photos/lightbox/p1000427.jpg" rel="lightbox[roadtrip]" title="ひと夏の終わり">image #2</a>
</div>

<input type="button" value="画像1" onClick='callNativeMouseEvent($("img1"));'>
<input type="button" value="画像2" onClick='callNativeMouseEvent($("img2"));'>

WEB ページでリンクから他のページへと移動するのは基本的な事ですが、JavaScript でもそれは可能です。しかし、データまで JavaScript の配列等で作成してしまうと、Google 等の検索エンジンからは認識されないデータになってしまいます( たぶん十中八九 )逆に、検索エンジンに認識させたくない「広告」なんかは JavaScript で作成する事になると思いますが、ここでは、既存のデータ( 他のページで作った A タグデータ ) をそのまま使ってクリックしてウインドウを開くボタンを作成します。( このサンプルではAを非表示にしていますが、検索エンジンに認識させるのであれば表示させます )
これは、次の段階で、Google や YUI のテーブルオブジェクトのイベントで使おうと思っているのですが( 特に、Google の Visualization DataTable はあまり融通きかないので )

※ オブジェクト参照は、超簡単になるので prototype を Google 経由で参照しています。

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("prototype", "1.6.0.3");

// ***********************************************************************
// この関数の target 引数が優先されますが、省略した時は定義の中の target を使用します
// ***********************************************************************
function openLink( id, target ) {
	if ( typeof( target ) == 'undefined' ) {
		alert("引数 target なし");
		if ( $(id).target == '' ) {
			alert("A に定義 target なし");
			window.open($(id).href );
		}
		else {
			window.open($(id).href, $(id).target );
		}
	}
	else {
		alert(target);
		window.open($(id).href, target );
	}

}
</script>
<!-- この DIV 内の リンクは表示されません -->
<div style='display:none'>
<A id="link1" href="http://winofsql.jp/php/cnvtext/frame.htm"></A> 
<A id="link2" href="http://lightbox.on.coocan.jp/html/fontImage.php"></A> 
<A id="link3" href="http://winofsql.jp/FCKeditor/edit2.php" target="_self"></A> 
</div>

<!-- ボタンでリンクを開きますが、データは A をそのまま利用します -->
<INPUT
 type="button"
 value="アンカーデータでウインドウを開く(1)"
 onClick='openLink("link1","_blank")'>

<INPUT
 type="button"
 value="アンカーデータでウインドウを開く(2)"
 onClick='openLink("link2")'>

<INPUT
 type="button"
 value="アンカーデータでウインドウを開く(3)"
 onClick='openLink("link3")'>

スクリプト中の任意の行でエラーが起こるかもしれない場合は、その行( または複数の行範囲 ) を 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( 英文 ) リファレンス

前回は、動作確認の意味が大きかったので、他サイトからの IFRAME で表示していました。また、メニューの内容の作成は HTML で行っていました。しかし、それではメニューが他の要素に重なる場合、Z-INDEX を使用しても正しく動作しない場合があるので( 複雑なページの場合 )、それを確実にする為に JavaScript を使ってまずメニューを挿入する DIV を BODY の最後に作成して、メニューそのものも YUI の API で作成しました。

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var gg_yui = '2.7.0';
var gg_loader;
google.load('yui', gg_yui);
function Google_yui_init_catlist() {
   gg_loader = new YAHOO.util.YUILoader({
      require: ["menu"],
      base: "http://ajax.googleapis.com/ajax/libs/yui/"+gg_yui+"/build/",
      onSuccess: function() {
         yui_menu_catlist();
      }
   });
   gg_loader.insert();
}
google.setOnLoadCallback(Google_yui_init_catlist);
function yui_menu_catlist() {

   // メニュー埋め込み用のユニットを作成
   var newUnit = document.createElement("DIV");
   // YUI 用のクラスとする
   newUnit.className = "yui-skin-sam";
   // 他の要素の上に重ねられるように BODY の最後に追加
   (document.getElementsByTagName("body")[0]).appendChild(newUnit)


   // メニューオブジェクト作成( id=mymneu_unit、ブラウザ中央表示、幅400 )
   var oMenu = new YAHOO.widget.Menu("mymneu_unit", { fixedcenter: true, width: 400  });
   // リンク作成
   oMenu.addItems([

      { 
         text: "テキスト変換サービス",
         url: "http://winofsql.jp/php/cnvtext/frame.htm",
         target: "_blank" 
      },
      { 
         text: "フリーフォントで簡単ロゴ作成",
         url: "http://lightbox.on.coocan.jp/html/fontImage.php",
         target: "_blank" 
      },
      { 
         text: "logical  error",
         url: "http://logicalerror.seesaa.net/",
         target: "_blank" 
      },
      { 
         text: "DAZ3D : 作品ギャラリー",
         url: "http://galleria.emotionflow.com/21985/",
         target: "_blank" 
      }

   ]);

   // 新規に作成した BODY 最後の DIV 内にメニューを作成
   oMenu.render(newUnit);
   // 呼び出し用のイベントを作成
   YAHOO.util.Event.addListener("call_mymneu_unit", "click", oMenu.show, null, oMenu);
   document.getElementById("call_mymneu_unit").disabled = false;

}
</script>
<input id="call_mymneu_unit" type="button" value="スクリプトで作成した YUI メニュー" /> 

※ このメニューはホイールスクロールするとついて来ます。結局、画面の中央にポップアップさせたい場合、この方法が最も良い方法になります。正直、いろいろな方法を IE6 と Firefox と Opera で 6時間くらい検証しましたのでまず間違いありません。

HTML で書く時はいろいろ注意事項もあります。Firefox  と Opera では PRE 内で書いてしまうと、メニューに余計な改行がついてしまいますし、親要素の属性のせいで表示が見えなかったり( 例えば、親要素の幅がメニューを表示するには小さすぎる )

いずれにしても( HTML でも JavaScript でも )、幅の指定はしておくべきです。

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script
 type="text/javascript"
 src="http://lightbox.on.coocan.jp/host/js/lightbox/204/lightbox_set.js"
></script>

<a
 href="http://lightbox.cocolog-nifty.com/photos/lightbox/1950808_2860106626_2.jpg"
 rel="lightbox[roadtrip2]"
 title="抜け殻"
>image #1</a>
<br>
<a
 href="http://lightbox.cocolog-nifty.com/photos/lightbox/p1000427.jpg"
 rel="lightbox[roadtrip2]"
 title="ひと夏の終わり"
>image #2</a>