SQLの窓 イラストAC フリー素材

2009年04月15日

JavaScriptでSHA256



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

↑英文です。使い方はソース見てね、みたいな感じなので解る人にのみ便利です。
いろいろありますし、使える時に使いましょう。

もともと、Flex3 の SHA256 を再度確認する為に実行してみると、まだ一致しないです。
PHP と 上記 JavaScript の結果は同じですが、一致しない以上システムには使えません。
ここには JavaScript 以外に ActionScript の SHA256 もあるので、以前使ったライブラリより
システム的にコストパフォーマンスが良いです。

↓PHP は、こんな感じ
<?

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

?>


↓Flex3 の SHA256 クラスを使ったシステムでは使え無いサンプル。
http://winofsql.jp/download/flex3_web_pass1.lzh



■ 関連記事
型定義の無いActionScriptのビルド
posted by at 2009-04-15 18:42 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年04月05日

単純なテキストエリアの内容を転送して入力するブックマークレット

IE 専用です。フレームはまだ対応していませんが、
本来 IE 拡張メニューか、Firefox 拡張機能でやるべき内容なので、深く追求しません。
それより、JavaScript で自分の作業をらくちんにする為のヒントです。

テキストエリア入力支援(フレーム未対応版)


まず、このブックマークレットは新しいウインドウを開いて、その中に スクリプトを書き込んで
全ての作業はそのスクリプトに任せて終わります。

そのスクリプトは自分のサイトに置いて、自由にカスタマイズします。
今回、二つのスクリプトを使って、一つめから二つ目を書き出すという Google がよくやるテクニック
を使っています。( どちらも unicode で書かれています )

text1.js
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>");


text2.js
document.getElementById("area").style.fontFamily = 'MS ゴシック';
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();
}

この次に使うスクリプトタグを document.write で書き出しているスクリプトを、
私は勝手に「スクリプトローダ」と呼んでいますが、Google の API のあちこちで
使われている信頼性の高いテクニックです。

これを元にいろいろ都合のいい処理を行える全く素晴らしいものです。


posted by at 2009-04-05 23:34 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年03月27日

Firefox専用ブックマークレット−フォーカス位置のHTML定義の取得



Firefox 専用ですが、最初に一度だけイベント登録の実行が必要です。
ブックマークを実行すると、メッセージボックスでその旨が表示されて、
その後、右クリックでフォーカス取得して実行します。

フォーカスが無い場合は、残念ながらエラーになります。( エラー処理するほどの機能でもないので )
また、IE の outerHTML と同じ事をする為に、フォーカスのエレメントを新たに作成した
SPAN エレメントで挟み込んでいます。たいへんなので削除はしていませんので SPAN は残っていきます。
でも、ページの調査が目的なのそれはそれで良いと思っています。

以下の alert では、文字列を unicode で表現しています。これは、こうやっておかないと、
化けたりするものなのです

Firefox のメッセージボックスは、HTML で作られたものと同じなので、
表示されている文字列は、選択してクリップボードへコピーできます。

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);
}
フォーカス位置のHTML定義の取得
<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>




posted by at 2009-03-27 13:10 | JavaScript | このブログの読者になる | 更新情報をチェックする

IE専用ブックマークレット−フォーカス位置のHTML定義の取得

IE限定にしてしまうと、簡単にできる事は結構あります。
この機能を Firefox で・・・となると大変なので、というか Firebug 使ったほうがいいです。
一応、次のアーティクルで、Firefox 用の innerHTML または value を取得するブックマークレット
を紹介するつもりですが、さて、役に立つかどうか・・・。

Firefox で動いたのが Opera にいたっては、動かなかったし、
Google Chrome なんて、今日知ったですけど、ブックマーク登録そのものができなかったです。

とにかく、IE ですと、BODY でも取得するので、その場合は時間かかるので
注意して下さい。でかい メッセージボックスが出て、ボタンが画面の下に隠れたり
しますが、ESC または ENTER で終われます。
( コピーできる文字列量は限界があります )

メッセージボックスの中の文字列取得は、普通に CTRL+C でクリップボードコピーされます。
リンクのフォーカスは、右クリックで取得して下さい。

フォーカス位置のHTML定義の取得
<a
	href='javascript:alert(document.activeElement.outerHTML);'
	onclick='
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			event.returnValue = false;
			var s = document.selection;
			var range = s.createRange( );
			range.moveToElementText(document.getElementById("my_src"))
			range.select();
		}
		else {
			event.preventDefault();
		}
		alert("【IE専用です】右クリックしてポップアップメニューからお気に入りに追加して下さい   ");
	'
>フォーカス位置のHTML定義の取得</a>



posted by at 2009-03-27 10:33 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年03月15日

GoogleVisualizationAPIのテーブルのデータをGoogleドキュメントのスプレッドシートより取得する

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

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

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

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




posted by at 2009-03-15 23:38 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年03月14日

lightbox.jsの画像ポップアップ呼び出しをアンカーではなくボタンで呼び出す










前は 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"));'>



posted by at 2009-03-14 19:26 | JavaScript | このブログの読者になる | 更新情報をチェックする

アンカーデータでウインドウを開く

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")'>






posted by at 2009-03-14 17:46 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年03月13日

不安な場合は囲んでおきましょう−try〜catchステートメント

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


posted by at 2009-03-13 15:07 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年03月12日

GoogleAJAXLibrariesAPI経由のYUIメニュー(2)−HTMLではなくJavaScriptでメニューユニットを作成します

前回は、動作確認の意味が大きかったので、他サイトからの 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 でも )、幅の指定はしておくべきです。


posted by at 2009-03-12 13:44 | JavaScript | このブログの読者になる | 更新情報をチェックする

2009年03月10日

スクリプトローダ(lightbox_set.js)を作って短く使えるようにしました

<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>


同じページで同じライブラリをロードできるようには工夫して無いので、単独ページで実装しています。


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

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

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

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

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


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

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

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

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

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