2012年02月12日


Google Chrome 拡張機能 『Awesome Screenshot』: (ページを画像化) の日本語化が中途半端なので修正しました

インストールページ

アイコンからポップアップで、メニューが三つ表示されて、いずれも英語なので
以下の手順で変更します。

1) 拡張機能ページを開く( chrome://settings/extensions )
2) デベロッパーモードをチェック
3) 詳細を表示
4) id をメモまたはコピーして保存しておく
5) Google Chrome の環境フォルダ をダウンロード
6) ダウンロードしたスクリプトを実行して、Extensions フォルダに移動
7) id と一致するフォルダに入り、最終的に『_locales\ja\messages.json』を開く
8) 61行目と250行目を日本語に変更してUTF8N で保存

メニューは3つ項目があるのですが、この messages.json にエントリが無い上に
この機能そのものが動いていないようなので、popup.html よりメニューを削除
します。( この機能は他の機能で代替えされています )





最後に画像を保存するページも日本語化されておらず、ここは直接 HTML
を変更する必要があるのですが、head 要素の中の先頭に以下の meta 要素
を挿入します( edit.html )
<meta charset="UTF-8">

あとは、267 行付近の記述を日本語に変更して、UTF8N で保存します



この拡張機能そのものはいろいろ便利なもので、キャプチャ直後に赤く四角で
強調したり、矢印を引いたり、テキストを書き込んだり、ぼかしを入れたり、
必要なものは一通りそろっています。





posted by at 2012-02-12 20:27 | Google | このブログの読者になる | 更新情報をチェックする

2012年02月01日


Twitter用埋め込みコードを取得する Google Chrome 拡張

▼ Google Chrome で以下をクリックして下さい(ダウンロードして、Chrome にドラッグ&ドロップでも OK )
https://winofsql.jp/download/twitter_get_embed.crx



IE と Firefox で作ったものとほぼ同等の機能を Chrome の 拡張で実装しました。
IE と Firefox はかなり作り込んだ経験を持ってますが、Chrome の拡張は手強か
ったです。特に、直接 WEB ページ上のオブシェクトを操作できないので、Flex の
ようなイベントの連鎖で作業を書いていかないといけないので大変でした。

でも、おかげでいろいろノウハウも手に入ったので解説するのが楽しみです。

ダウンロードして、拡張子を .zip に変更して解凍してサンプルとして見た
ほうが早いとは思いますが、さすがにソースコードだけでは理解不能な部分
が多いです。Google のドキュメントを見ながらですらやっとの思いで完成
させましたし( 実際バグっぽい部分の対症療法も残っていますし )

この処理に特に必要は無かったのですが、サンプルとして使いたかったので、
WEBページと拡張の対話のバリエーションも組み込んであります。マニフェス
トファイルの内容が重要になるので、ドキュメントの参照は必要です。

機能実装の必要から、別ドメイン間のデータ交換テクニックである、メッセ
ージのポストと、ローカルストレージの利用はおすすめです。

1) 右クリックのポップアップメニュー( リンクのみのメニュー )
2) メニューから一旦 WEB 上に組み込んだ関数を呼び出す(強制呼び出し)
3) WEB ページの情報を取得して、再び拡張を呼び返す(送信)
4) 受信してからモーダルダイアログ(実際はモーダルにはならない)を開く
5) XMLHttpRequest で Twitter API を呼び出してデータを取得
6) クリップボードにコピー
7) 別ドメインのページをデータ交換してから呼び出す




関連する記事

Twitter用埋め込みコードを取得する IE拡張
Twitter用埋め込みコードを取得する Firefox アドオン



posted by at 2012-02-01 00:26 | ツール | このブログの読者になる | 更新情報をチェックする

2012年01月28日


Twitter用埋め込みコードを取得する Firefox アドオン

▼ Firefox で以下をクリックして下さい(ダウンロードして、Firefox にドラッグ&ドロップでも OK )
http://winofsql.jp/download/twitter_embed.xpi





IE で作ったものとほぼ同等の機能を Firefox の アドオンで実装しました。
Firefox の拡張は今回久しぶりに作ってみて、昔とかなり開発環境に変化が
ありました。いい事も悪い事もあったのですが、悪い事の代替えの為に、雛型
として使えるように考慮して作成しました。

ダウンロードして、拡張子を .zip に変更して解凍すると MKEditor のプロ
ジェクトが同梱されています。機能としては、以下のようなものが主になりま
す。

1) 右クリックのポップアップメニュー
2) そのページが特定のページ以外では表示しない
3) 右クリックした場所のオブジェクトの処理
4) ダイアログを表示する
5) クリップボード
6) タブを開く処理
7) xmlhttprequest による Twitter API 呼び出し

画面イメージはインストール後にアドレスバーに
chrome://sk1/content/sk1_app.xul と入力すると確認できます。
さらに、Firebug で中を見ると実行時の表記が解りやすいと思います。
var targetWindow;
// *********************************************************
// ウインドウの初期処理
// *********************************************************
function onLoad() {
	targetWindow = window.arguments[0];

	// *************************************************
	// 右クリックした場所のデータ
	// *************************************************
	var str = "";
	var tag = targetWindow.document.activeElement.tagName;

	switch( tag ) {
		case "A" :
			str = targetWindow.document.activeElement.href;
			break;
		default:
			str = targetWindow.document.activeElement.innerHTML;
			break;
	}

	// *************************************************
	// ID を含むリンクである事をチェック
	// *************************************************
	if ( str.search("\/status\/") < 0 ) {
		document.getElementById("text").value = "対象リンクがありません";
		return;
	}

	// *************************************************
	// ID を取得
	// *************************************************
	var arr = str.split("/");

	str = arr[arr.length-1];

	// *************************************************
	// API で埋め込みコードを取得
	// *************************************************
	var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance();
	req.open('GET', "https://api.twitter.com/1/statuses/oembed.xml?maxwidth=550&align=left&id=" + str, false);
	req.send();

	var resultXML = req.responseXML;
	str = resultXML.getElementsByTagName("html")[0].firstChild.nodeValue;
	document.getElementById("text").value = str;

	if ( document.getElementById("text").value == '' ) {
		document.getElementById("text").value = "★ データの取得に失敗しました。再試行して下さい"
	}

}

// *********************************************************
// ユーザが OK をクリックした時だけに一度実行される
// *********************************************************
function onOK() {
	close();
}

// *********************************************************
// クリップボードへのコピー
// *********************************************************
function setData() {

	const gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].
		getService(Components.interfaces.nsIClipboardHelper);
	var text_data = document.getElementById("text").value;
	gClipboardHelper.copyString(text_data);

}

// *********************************************************
// タブを開いて、そこを選択する
// *********************************************************
function openTab() {

	var text_data = document.getElementById("text").value;
	document.getElementById("codeTestIframe").contentWindow.postMessage(text_data,"*");
	window.opener.gBrowser.selectedTab = 
		window.opener.gBrowser.addTab("http://toolbox.winofsql.jp/tool_html_links.php?p=0&ns=1&ht=300#code_test");
	close();

}


関連する記事

Twitter用埋め込みコードを取得する IE拡張





posted by at 2012-01-28 22:56 | ツール | このブログの読者になる | 更新情報をチェックする

2012年01月13日


bit.ly のブックマーレットを開けて見てみると、『tumblr』のを転用してました

解りやすく整形しましたが、元々"tumblrzzz" は、"tumblr" なので、そこは絶対一致
しないように変更されています。というか、そこは必要無いのですが、オリジナルを
崩さずに使えるようにしたみたいです。

結局、w.open で url と 選択した部分をパラメータで渡すという良くできた処理にな
っています。( 失敗すると、l.href=u で表示ページの変更 )

これは、ブックマークレットの雛型として優秀なもので、ページ上で選択した部分を
encodeURIComponent でエンコードして他のページに渡す為の処理です。結局 bit.ly
では、表示しているページの URL を渡していますが、必要に応じてどんな情報でも
GET コマンドで渡す事ができます。

覚えておくとどこかで必ず使えていいと思います。
var d=document;
var w=window;
var enc=encodeURIComponent;
var e=w.getSelection;
var k=d.getSelection;
var x=d.selection;
var s=(e?e():(k)?k():(x?x.createRange().text:0));
var s2=((s.toString()=='')?s:('%22'+enc(s)+'%22'));
var f='http://bit.ly/';
var l=d.location;
var p='?v=3&u='+enc(l.href) +'&s='+enc(d.title)+'%20'+s2;
var u=f+p;
try{
	if(!/^(.*\.)?tumblrzzz[^.]*$/.test(l.host))
		throw(0);
		tstbklt();
}
catch(z){
	a =function(){
		if(!w.open(u))
			l.href=u;
	};
	if(/Firefox/.test(navigator.userAgent))
		setTimeout(a,0);
	else
		a();
}


単純に選択部分を転送するブックマークレット

javascript:var%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:(enc(s))),f='http://winofsql.jp/sel.php',l=d.location,p='?s='+s2,u=f+p;try{if(!/^(.*\.)?tumblrzzz[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a%20=function(){if(!w.open(u))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)


posted by at 2012-01-13 23:19 | JavaScript | このブログの読者になる | 更新情報をチェックする

bitly の URL 短縮結果のカスタマイズ

bitly では、アカウントを持っていると、以下のような 1xfQZVR 部分を簡単にカスタマイズして他の人がまだ使って無い文字列に変更する事ができますが、自分でドメインを所有していて、その管理ができる場合は、短縮 URL のドメイン部分もカスタマイズする事ができます

q.winofsql.jp/1xfQZVR



Settings ページには以下のようなセクションがあり、最初は『追加』ができるようになっていて、一つ追加すると、編集のみが可能になっています。追加直後、デフォルトの短縮 URL のドメインとなりますが、bit.ly に戻してもいいし、他の bitly.comj.mp を使っても同じ結果となります。



本来は、もっと短いドメインを取得して使うのだと思いますが、とりあえず自分のドメインを使っておくと、あらゆる URL は自分のサブドメインとして表現できる事になるので、いろいろな宣伝にも使えると言ったところだと思います。

ちなみに、アマゾンのページを短縮すると、amzn.to/MOVIEsuper8 のようになります


ランダム部分もカスタマイズする

このアマゾンの URL のように、1xfQZVR 部分も変更できるので実行してみましょう。



q.winofsql.jp/CustomMyShortDomain


カスタマイズ文字列は早いもの勝ち

大文字小文字が区別されるので、同じ意味でいくつもトライできます。さすがに例えば Heart なんてのは取れませんが、q.winofsql.jp/HEARt なら取れたりしますし、長い文字列だと結構取れたりもします。

また、案外こういうのも取れたりします => q.winofsql.jp//MOVIE1


削除はできないけれど

同じ URL に違う文字列を設定できます。つまり、最初のランダム文字列も生きています。そうなると、解らなくなるので少なくとも最初は アーカイブに移動して管理するといいと思います。
(できればどこかに登録しておくといいとは思います。)
パーソナルリンク : PC に保存されるリンクリストです



bit.ly/winofsql
bitly.com/winofsql
j.mp/winofsql
q.winofsql.jp/winofsql



posted by at 2012-01-13 21:42 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2011年12月29日


行の最後に画像を配置する為の HTML 記述

想定しているのは、いろいろ文章を書いた後の感情を表現する
顔文字を画像で綺麗に配置しようというものです

これは、PRE 内で使っています

いろいろたくさん記述していますが、ブラウザによって
違う部分を吸収しているものもありますし、画像が透過
ならば、『はんこ』のような使い方も想定しています   
これは、『にこっ』と笑っているつもりです
<pre>
想定しているのは、いろいろ文章を書いた後の感情を表現する
顔文字を画像で綺麗に配置しようというものです

これは、PRE 内で使っています

いろいろたくさん記述していますが、ブラウザによって
違う部分を吸収しているものもありますし、画像が透過
ならば、『はんこ』のような使い方も想定しています   <div style='display:inline;position:relative;vertical-align:top;'><img src="https://lh4.googleusercontent.com/-ZPa1qc-n16o/ToVXVz7nWuI/AAAAAAAADbM/5NqxuDbVAXc/s80/freefont_hanko_ArmedBanana.png" style='position:absolute;left:0px;top:-25px;border:0px' /></div>




これは、『にこっ』と笑っているつもりです<div style='display:inline;position:relative;vertical-align:top;'><img src="https://lh6.googleusercontent.com/-5nb2DVZzHqY/TvvvISq5LEI/AAAAAAAAEIU/bvo9fqq9jnw/s60/_img.png" style='position:absolute;left:20px;top:0px;border:0px' /></div>
</pre>


posted by at 2011-12-29 15:50 | テクニック | このブログの読者になる | 更新情報をチェックする

2011年12月13日


Seesaa ブログの記事一覧の一括編集時に一括設定できるようにする Greasemonkey

Install

Seesaa_listmtn

変更できるのは、コメントとトラックバックとアフィリエイトの状態です。
Seesaa のほうの機能で、100件表示をにしておくと、一括ですぐ編集可能です。

その他にも、記事投稿(編集)ページで、テキストエリアの右上に保存ボタン
を追加しています。


※ このブログのコメントを全て『承認制』に変更してテストしました


posted by at 2011-12-13 14:51 | Seesaa | このブログの読者になる | 更新情報をチェックする

2011年12月08日


prototype.js による onload イベントの登録

Google のライブラリ API でホスティングされているファイルを使ってテストしています

ここをクリックすると以下のコードをテストできます
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
" type="text/javascript"></script>
<div id="message" style='height:100px'></div>
<script type="text/javascript">  
Event.observe(window, 'load', function(){  
	var str="";
	str+="<img src=\"http://lh3.googleusercontent.com/-50LAkJyptvE/TuDBNQcFdtI/AAAAAAAAD8I/QSDzGMrYa_g/s335/_img.png\" /> ";
	document.getElementById("message").innerHTML = str;
});
</script>


posted by at 2011-12-08 23:57 | JavaScript | このブログの読者になる | 更新情報をチェックする

jQuery の bind メソッドで一般的な onload イベントを実装

jQuery では、ready メソッドで登録するのが一般的となっていますが、
ready メソッドで実装されるのは、onload イベントでは無く、画像が
ロードされる前に実行されるとても都合の良いものです。

bind では、onload イベントに直接実装されるので他との比較であれば
こちらが正しい実装となります。Google の PlayGround では bind が
使われていました。環境によってはこちらのほうが想定通りの実装になる
と思われます。

jQuery そのものは、Google のライブラリ API を使用しました。
これは、以下の PATH を直接使用しても同じ事になります
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

ここをクリックすると以下のコードをテストできます
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
<div id="message" style='height:100px'></div>
<script type="text/javascript">  
$(window).bind('load', function() {
	var str="";
	str+="<img src=\"http://lh3.googleusercontent.com/-50LAkJyptvE/TuDBNQcFdtI/AAAAAAAAD8I/QSDzGMrYa_g/s335/_img.png\" /> ";
	document.getElementById("message").innerHTML = str;
});
</script>


posted by at 2011-12-08 23:47 | JavaScript | このブログの読者になる | 更新情報をチェックする

Google の一般API( jsapi ) を使って onload イベントを実行する

Google MAP API V3 の addDomListener でページロード時のイベントを登録する
上記リンク先では、Google MAP API V3 を使いましたが、JavaScript の一般 API
である jsapi にはもっと簡単なメソッドがあります。通常この API は、API キーを
記述するという事になっているのですが、無くても動作するので以下では省略しています。

API キーが無い場合の影響が将来的に不安な場合は、Google MAP API V3 を使うと
良いと思います

ここをクリックすると以下のコードをテストできます
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<div id="message" style='height:100px'></div>
<script type="text/javascript">  
google.setOnLoadCallback(function () {
	var str="";
	str+="<img src=\"http://lh3.googleusercontent.com/-50LAkJyptvE/TuDBNQcFdtI/AAAAAAAAD8I/QSDzGMrYa_g/s335/_img.png\" /> ";
	document.getElementById("message").innerHTML = str;
});  
</script>




posted by at 2011-12-08 23:07 | Google | このブログの読者になる | 更新情報をチェックする

2011年11月27日


Google MAP API V3 の addDomListener でページロード時のイベントを登録する

自分で全てのコードを書くと、IE8 と それより前の Internet Explorer の為に
煩雑なコードを書く事が必要となります。

JS : 自分用名前空間を使ってページのロードイベントを登録

Google MAP API V3 は、API キーがいらなくなったので、気軽に読み込んで使用
したら良いと思います。二重のロードにも対応しているはずですし、いろいろな
ライブラリにも同様の機能はありますが、オーソドックスな仕様でもありますの
で一度試してみる価値はあります。
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>  
<script type="text/javascript">  
google.maps.event.addDomListener(window, 'load', function () {
	alert('ページがロードされました');
});  
</script> 


posted by at 2011-11-27 12:40 | Google | このブログの読者になる | 更新情報をチェックする

2011年02月21日


2011/2/21時点、Firefox のみバグのある word-wrap: break-word

何故か Firefox のみ table 要素の中で word-wrap: break-word を使うと、
全く動作しなくなります。対象の幅が固定の場合は問題無く動くと思います
が、ブラウザの表示部分によってそれぞれのセル表示位置の変わるような
複雑な処理に対応できていないような気がします。

おそらく、空白を含む場合は問題無いかもしれませんが、だからこそ致命的
で、デザイナが意図せぬ画面の崩れを予想できない可能性があります。

2011/2/22

今日、ブログの本文で PRE 内に適用しようとしたが、Firefox のみダメでした。
日本語で幅しているにも関わらずです。
Microsoft : wordWrap Property (A, ABBR, ACRONYM, ...) word-wrap - MDC Doc Center
<style type="text/css">
.WordWrap3 {
	word-wrap: break-word;
	float: right;
	width: 33%;
}
</style>
<table><tr><td>
<div class="WordWrap3" style='background-color:#777'>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
</div>
<div class="WordWrap3" style='background-color:#999'>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
</div> 
<div class="WordWrap3" style='background-color:#bbb'>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
</div> 
</td></tr></table>


----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
posted by at 2011-02-21 19:41 | 小ネタ | このブログの読者になる | 更新情報をチェックする

2011年02月07日


Favicon の動的変更の裏側

Favicon の動的変更( IE8、Firefox、Chrome、Opera、Safari )

ここに至る前は、単純に href を書き換えていたのですが、それで変更されるのは、
Firefox と、Opera でした。IE8 と Google Chrome ではどうもダメなようので、一度
link 要素を削除してみると、IE8 でうまく変更されました。Firefox と Opera でも
試したのですが、うまく行っていました。

しかし、Google Chrome と Safari は変更されないので、英文の Google で検索すると、
以下のサイトがヒットし、試してみるとうまく変更されます。

Dynamic Favicons

いったい何が違うのだろうとコードを見てみると、type="image/x-icon" のセットでした。
ここのコードは大げさなので、自分のコードでやってみるとうまく変更されました。


ここのページも変更しておきます


posted by at 2011-02-07 13:21 | ブラウザ | このブログの読者になる | 更新情報をチェックする

2011年02月05日


ブラウザ別、localStorage の削除に関わる所作

Microsoft では、DOM ストレージの概要 の最後で以下のように書かれています。

記憶域のクリア

データを参照する最後のウィンドウが閉じられた時点で、セッション状態が解除されます。
 ただし、Internet Explorer で [ツール] メニューの [閲覧履歴の削除] をクリックし、
[Cookie] チェック ボックスをオンにして [削除] をクリックすることで、いつでも記憶
域をクリアできます。 これにより、[お気に入り] フォルダー以外のすべてのドメインに
ついて、セッション記憶域およびローカル記憶域がクリアされ、レジストリ内のストレー
ジ クォータがリセットされます。 ソースにかかわらず、すべての記憶域を削除するには、
[お気に入り Web サイト データの保持] チェック ボックスをオフにします。
IE を普段使っているので、実際に試したわけではありませんが、明記されている以上削除 されると思います。実際、仕様なのだろうと、Firefox や Google Chrome で試してみたら 削除されました。しかし、Safari では一括でストレージを削除する方法は無く、開発者ツ ールで個別に削除するしか無かったので、この場合はアドレスバーまたは開発者ツールで ドメイン単位に以下のコマンドを入力します。 アドレスバーの場合 javascript:void(localStorage.clear()) 開発者ツールの場合 localStorage.clear() これは、全てのブラウザで使えるはずなので、ドメイン単位で削除したい場合に利用でき ます。 Opera も、クッキーとストレージは連動しておらず、そもそもクッキーの一括削除の機能 が一般設定では無く、開発者ツールの Dragonfly から削除するようになっています。 localStorage を使用したパーソナルリンクサービス IE8 設定または、CTRL+SHIFT+DEL で表示されるダイアログでクッキーを削除するチェックボッ クスにチェックして( さらに先頭のお気に入りを残すチェックを外す )削除すると、 localStorage は全て削除されると思われます。保存場所は Cookie フォルダには無く、実 際の保存場所は発見できませんでした。 IEのクッキーフォルダを開くスクリプト 開発者ツールにも、localStorage に対する処理メニューは無く、ドメインでクッキーを削 除(キャッシュメニュー)してみましたが、影響しませんでした。 Firefox 設定ダイアログから、Cookie を個別に参照して個別に削除可能ですが、そのダイアログで クッキーを全て削除する機能があるので実行すると、localStorage も削除されます。これ は Firefox の仕様で、ドメインのくくりで クッキーとlocalStorage がツリー内で管理さ れている為で、このダイアログからドメイン単位の localStorage を削除する事も可能で す。 Google Chrome Firefox と同様、クッキーとlocalStorage をドメイン単位で管理している為、クッキーを 全て削除すると localStorage も削除されます。ここで、ドメイン単位の localStorage を削除できますが、開発者ツールを使うと、データ単位で表示して削除する事ができます。 Google Chrome の Local Storage フォルダを開くスクリプト Opera Opera では、クッキー管理で localStorage は扱われておらず、開発者ツールである Dragonfly で表示、データ個別削除、ページ単位の削除が可能です。 Safari Safari でも、クッキー管理で localStorage は扱われておらず 開発者ツールでデータ 表示は可能ですが、データ単位の削除しか無いので、コマンドでドメイン単位の削除を 行う方法を使う必要があります。 Safari の LocalStorage フォルダを開くスクリプト
posted by at 2011-02-05 08:15 | ブラウザ | このブログの読者になる | 更新情報をチェックする

2011年02月03日


クロスドメインで、showModalDialog を使用する

toolbox.winofsql.jp にある、modalDialog.htm を showModalDialog で呼び出して
データ交換を行います。IFRAME として、modalDialogServer.htm を組み込む必要が
あります。データは、toolbox.winofsql.jp 用の localStorage を使用して保存され
ますが、一時的な中間データとして扱います。
Opera は showModalDialog を使用できないので、同等の処理を行うにはそれ相当の工夫と努力が必要になります。


modalDialogServer.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=euc-jp" http-equiv="Content-Type">
<title>モーダルダイアログサーバー</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:700px;
	height:400px;
}
</style>
<script type=text/javascript>

var text;

if ( window.attachEvent ) {
	window.attachEvent('onmessage',function(e) {
		text = e.data;
		// 先頭コマンド 'A' で、ローカル保存
		if ( text.substr(0,1) == 'A' ) {
			if ( text.substr(1) == '' ) {
				localStorage['serverText'] = new String("");
			}
			else {
				localStorage['serverText'] = text.substr(1);
			}
		}
		// 先頭コマンド 'B' で、ローカル保存されていたデータを親ウインドウに POST
		if ( text.substr(0,1) == 'B' ) {
			parent.postMessage(localStorage['serverText'], "*");
		}
	});
}
else {
	window.addEventListener('message',function(e) {
		text = e.data;
		// 先頭コマンド 'A' で、ローカル保存
		if ( text.substr(0,1) == 'A' ) {
			if ( text.substr(1) == '' ) {
				localStorage['serverText'] = new String("");
			}
			else {
				localStorage['serverText'] = text.substr(1);
			}
		}
		// 先頭コマンド 'B' で、ローカル保存されていたデータを親ウインドウに POST
		if ( text.substr(0,1) == 'B' ) {
			parent.postMessage(localStorage['serverText'], "*");
		}
	}, false);
}

</script>
</head>
<body>
</body>
</html>


ダイアログと呼び出し側のコード

関連する記事

showModalDialog の使い方と使う場所


posted by at 2011-02-03 14:16 | クロスドメイン | このブログの読者になる | 更新情報をチェックする

2011年01月24日


prototype.js を クロスドメイン対応にするパッチ

google.load で実装される prototype.js でテストしています。

prototype.js でクロスドメインの Ajax の読み込みテスト
では、prototype.js そのものを変更しましたが、変更できない場合の対応
方法です。リンク先に書いていますが、サーバー側が適正なヘッダを返す
事が必要となり、ブラウザ側ではヘッダを変更しない事が必要になります。

Opera は動作しませんが、php 等が動くサイトを持っていて、かつ postMessage
を使えば、IFRAME 経由でクロスドメインデータを取得できると思います。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("prototype", "1.7.0.0");
</script>

<script type="text/javascript">
// *********************************************************
// バッチその1
//
// XDomainRequest を使えるようにするのが目的です
// *********************************************************
Ajax.getTransport = function() {
    return Try.these(
      function() {return new window.XDomainRequest()},
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    ) || false;
}

// *********************************************************
// バッチその2
//
// XDomainRequest 用の処理を追加します
// ※ onComplete のみ使えるように( 実際は onload )
// *********************************************************
Ajax.Request.prototype.request = function(url) {
    this.url = url;
    this.method = this.options.method;
    var params = Object.isString(this.options.parameters) ?
          this.options.parameters :
          Object.toQueryString(this.options.parameters);

    if (!['get', 'post'].include(this.method)) {
      params += (params ? '&' : '') + "_method=" + this.method;
      this.method = 'post';
    }

    if (params && this.method === 'get') {
      this.url += (this.url.include('?') ? '&' : '?') + params;
    }

    this.parameters = params.toQueryParams();

    try {
      var response = new Ajax.Response(this);
      if (this.options.onCreate) this.options.onCreate(response);
      Ajax.Responders.dispatch('onCreate', this, response);

      this.transport.open(this.method.toUpperCase(), this.url,
        this.options.asynchronous);

      if (this.options.asynchronous) this.respondToReadyState.bind(this).defer(1);

      // ここから : 変更した部分
      if ( Prototype.Browser.IE ) {
          var ieparam1 = this.options.onComplete;
          var ieparam2 = this.transport;
          this.transport.onload = function() { ieparam1(ieparam2) };
      }
      else {
          this.transport.onreadystatechange = this.onStateChange.bind(this);
      }
      // ここまで : 変更した部分
      this.setRequestHeaders();

      this.body = this.method == 'post' ? (this.options.postBody || params) : null;
      this.transport.send(this.body);

      /* Force Firefox to handle ready state 4 for synchronous requests */
      if (!this.options.asynchronous && this.transport.overrideMimeType)
        this.onStateChange();

    }
    catch (e) {
      this.dispatchException(e);
    }
}

// *********************************************************
// バッチその3
//
// とりあえず、処理を空にしていますが、パッチ2のほうで変更
// する事もできます
// *********************************************************
Ajax.Request.prototype.setRequestHeaders = function() {}

</script>

<input
	type="text"
	value="http://lightbox.on.coocan.jp/ver.php"
	id="xurl"
	style='width:400px;'
>
<input type="button" value="実行" onclick='testCall();'>
<script type="text/javascript">
function testCall() {
	new Ajax.Request($("xurl").value, {
		method: "get",
		asynchronous: true,
		onComplete: function(response) {
			alert(response.responseText);
		}
	});
}
</script>



posted by at 2011-01-24 18:33 | クロスドメイン | このブログの読者になる | 更新情報をチェックする

JavaScript : Safari for Windows 5.0.3 の困ったバグとその対処方法 : alert、confirm でフォーカスがセットされていない。

Windows XP だけで起きていたり、環境によって違うかもしれませんが、
結構致命的で、Safari の為だけにコードを書かないといけないので困ります。
これは操作するほうが注意しないといけない内容ですが、対応したい場合は
setTimeout を使います。

10 ミリセカンド後でいいので、alert や confirm の処理を含んだ function
を setTimeout で呼び出す事で正しく動作します。これをしないと、表示している
メッセージボックスは、クリックしても一度目は反応しません。それでころか、1
度目にボタンをクリックすると、その後ろ側にある HTML に対して反応してしまい
ます。

かなり、致命的です

HTML のインラインで書く場合は、無名 function を使い、イベント用の文字列
はシングルクォートで表現するといいです。そうすると、プログラム出現率の高
い、ダブルクォートを心おきなく使えます。

※ シングルクォートが必要な場合は、&#39; を使えます。
<input type="button" value="action" onclick='alert("I can&#39;t fly.")'>

<input type="button" value="action" onclick='

	setTimeout(function(){
		alert("I can&#39;t fly.")
	},10);

'>



posted by at 2011-01-24 15:28 | JavaScript | このブログの読者になる | 更新情報をチェックする

2011年01月22日


JavaScript : 別ドメイン間のデータ転送



こちら側のコード
<script type="text/javascript">

	if ( window.attachEvent ) {
		window.attachEvent('onmessage',function(e) {
			document.getElementById("msg").value = e.data;
			document.getElementById("origin").value = e.origin;
		});
	}
	else {
		window.addEventListener('message',function(e) {
			document.getElementById("msg").value = e.data;
			document.getElementById("origin").value = e.origin;
		}, false);
	}

</script>
<input type="text" id="msg">
<input type="text" id="origin" style='width:400px;'>
<br><br>
<iframe
	src="http://lightbox.on.coocan.jp/message.htm"
	name="myframe"
	frameborder="1"
	scrolling="yes"
	width="500"
	height="100"
></iframe>

別ドメインの IFRAME 内のコード

parent で直接 HTML 内のオブジェクトにはアクセスできませんが、
parent の postMessage で、そのウインドウにメッセージを post
可能です。これは、逆でも同じで、こちらがわから IFRAME に対して
post するには、IFRAME のオブジェクトの contentWindow.postMessage
を実行します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
</head>
<body>

<input
	type="text"
	id="message"
	style='width:200px;'
	value="日本語表示"
>
<input
	type="button"
	value="post"
	onclick='parent.postMessage(document.getElementById("message").value, "*")'
>

</body>
</html>



posted by at 2011-01-22 04:27 | クロスドメイン | このブログの読者になる | 更新情報をチェックする

2011年01月19日


land.to でも結構簡単に PHP で ImageMagick が使えるようになります

いくつかコマンドを実行しますので、サーバーに負荷をかけないように
一つ一つ実行します。テストしたのは、sp サーバーです。

まず public_html の下で以下のコマンドを実行します。
(.cgi は、755 に変更しました。)
t01.cgi
#!/bin/sh
echo "Content-Type: text/plain"
echo
echo "<pre>"
echo
pecl bundle imagick-3.0.1
echo
echo "</pre>"

実行すると、imagick ディレクトリが作成されるので、中に入って
前回と同様にして、3回に分けて以下のコマンドを実行します。

1) phpize
2) ./configure
3) make

phpize に関しては、良く知らないですが、参考にしたサイトのサンプルに記述されていたので実行しました。
make が終わると、imagick/modules にモジュールが作成されるので、 ftp のルートにある php.ini のエントリを以下のようにします extension_dir = "/home/httpd/username/public_html/imagick/modules" username は、land.to の登録 id です。このパスは、phpinfo() の php.ini パスで確認できます。 最後に、php.ini の該当場所で、extension=imagick.so とすれば使える ようになります。但し、sp サーバーでは残念な事に、本体の ImageMagick のバージョンが古く、アイコン(.ico) の作成がうまくいきませんでした。 データ部分は正しいようですが、ヘッダが間違っているような気がします。 もし、そうなら自分で書き換えれば使えるようになるかもしれません 参考になりそうなページ GDで作成した画像をICO形式で出力する - 讃容日記 関連する記事 さくらインターネットでは、PHP で extension=imagick.so するだけで ImageMagick が使えます さくらインターネット : Ruby : rubygems-1.3.5 のインストール( + mechanize ) land.to で ruby に mechanize をインストール 以下はテストしたコードです( writeImagesFile は使えませんでした )
<?php

$img = new Imagick();
$img->readImage("in.png");
$img->writeImage ( "out.jpg" );

$img->clear();
$img->destroy(); 

?>
OK



posted by at 2011-01-19 11:31 | レンタルサーバー | このブログの読者になる | 更新情報をチェックする

2011年01月18日


さくらインターネットでは、PHP で extension=imagick.so するだけで ImageMagick が使えます



今日調べてて解ったのですが、さくらインターネットで使用可能なPHP5 の各バージョンで、最初から imagick.so が作成されてました。

利用しているのは、デフォルトの 5.2.17 ですが、phpinfo() で表示される、extension_dir に設定しているディレクトリを見に行くと、存在していました(/usr/local/php/5.2.17/lib/php/extensions/no-debug-non-zts-20060613)

(/usr/local/php/5.3.27/lib/php/extensions/no-debug-non-zts-20090626)
(/usr/local/php/5.4.17/lib/php/extensions/no-debug-non-zts-20100525)
2013/11/23 現在、5.2.17、5.3.27、5.4.17 それぞれにあります。
また、oauth.so も存在します

更新日付は、2013/07/23 になっています
テストは以下のコードで行いました。 ※ .gif より .ico への変換です
<?php
$img = new Imagick();
$img->readImageBlob(file_get_contents("heart.gif"));
$img->setImageFormat("ICO");

$handle = fopen("test.ico", "wb");

$img->writeImagesFile( $handle );
?>
OK

関連する記事

land.to でも結構簡単に PHP で ImageMagick が使えるようになります


posted by at 2011-01-18 22:11 | レンタルサーバー | このブログの読者になる | 更新情報をチェックする

2011年01月13日


文字回転CSS ( 含IE9 )

§§§§§§§§§§§§§§§§§§§§

今何時ですか
明日おいしましょう

§§§§§§§§§§§§§§§§§§§§
<style type="text/css">
.rbase {
	font-family: "MS ゴシック";
	font-size:14px;
	line-height: normal;
}
.rotation270 {
	font-family: "MS ゴシック";
	font-size:15px;
	line-height: normal;
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	-ms-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	display: inline-block; 
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.rotation270 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>
<![endif]-->

<pre class="rbase">
<span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span>

今何時ですか<span class="rotation270">?</span>
明日お<span class="rotation270">会</span>いしましょう

<span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span>
</pre>


他の角度は、CSS : 文字の回転と反転 ( matrix )を参照して下さい


posted by at 2011-01-13 14:17 | 小ネタ | このブログの読者になる | 更新情報をチェックする

2011年01月04日


Google ホスティングファイルを使用した jQuery + jQuery ui + datepicker

現場点では、jQuery ui は、Google にあるものが信頼性が高いです。
( jQuery の配布サイトで使用されています )
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<style type="text/css">
.ui-widget {
	font-size:12px;
}
.ui-widget-content .ui-state-default {
	font-weight:bold;
	color:#000;
}
</style>

<script type="text/javascript">
google.load("jquery", "1.4.4");
google.load("jqueryui", "1.8.7"); 
</script>

<div style='height:230px;background-color:#c0c0c0'>
<input type="text" id="datepicker"/>
</div>

<script type="text/javascript">
$( "#datepicker" ).datepicker( {
	closeText: '閉じる',
	prevText: '&#x3c;前',
	nextText: '次&#x3e;',
	currentText: '今日',
	monthNames: ['1月','2月','3月','4月','5月','6月',
	'7月','8月','9月','10月','11月','12月'],
	monthNamesShort: ['1月','2月','3月','4月','5月','6月',
	'7月','8月','9月','10月','11月','12月'],
	dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
	dayNamesShort: ['日','月','火','水','木','金','土'],
	dayNamesMin: ['日','月','火','水','木','金','土'],
	weekHeader: '週',
	dateFormat: 'yy/mm/dd',
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: '年'
} );
</script>

関連する記事

jQuery サイトからダウンロードする ui ライブラリで、スライダーが動きません


posted by at 2011-01-04 21:44 | テクニック | このブログの読者になる | 更新情報をチェックする

2010年12月21日


CSS : 文字の回転と反転 ( matrix )

IE だけ勝手が違います。
そもそも、IE のMatrix は、IE5.5 の時からあるので、
座標系が CSS3系 とは違うようです。でも、IE9 を使えない OS をまだ
当分使わないといけないので、このようになるのは仕方無いと思います。
海を90度回転しています
海を180度回転しています
海を270度回転しています
海を横反転しています
海を横反転して90度回転しています
海を横反転して180度回転しています
海を横反転して270度回転しています
海を45度回転しています
<style type="text/css">
.mtx {
	display:block;
	font-size:16px;
	width:16px;
}
.rotation90 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, 1, 0, 0, 0);
	-o-transform:matrix(0, -1, 1, 0, 0, 0);
	transform:matrix(0, -1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotation180 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, -1, 0, 0);
	-o-transform:matrix(-1, 0, 0, -1, 0, 0);
	transform:matrix(-1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotation270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.mirror {
	/* 横反転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
	-o-transform:matrix(-1, 0, 0, 1, 0, 0);
	transform:matrix(-1, 0, 0, 1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
.mirror90 {
	/* 横反転90 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, 1, 0, 0, 0);
	-o-transform:matrix(0, 1, 1, 0, 0, 0);
	transform:matrix(0, 1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1,mirror=1);
}
.mirror180 {
	/* 横反転180 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(1, 0, 0, -1, 0, 0);
	-o-transform:matrix(1, 0, 0, -1, 0, 0);
	transform:matrix(1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);
}
.mirror270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, -1, 0, 0, 0);
	-o-transform:matrix(0, -1, -1, 0, 0, 0);
	transform:matrix(0, -1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3,mirror=1);
}
.rotation45 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-webkit-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-o-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=0.707,M21=-0.707,M22=0.707,Dx=-2,Dy=8);
}
</style>

<table>
<tr>
<td><span class='mtx rotation90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を90度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を180度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を270度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転しています</td>
</tr>
<tr>
<td><span class='mtx mirror90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して90度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して180度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して270度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation45'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を45度回転しています</td>
</tr>
</table>
文字回転CSS ( 含IE9 ) では、IE9 に対応したSPAN を使った文字列内
の一部分回転を行っています。



posted by at 2010-12-21 15:51 | 小ネタ | このブログの読者になる | 更新情報をチェックする

google.load で円グラフ

API キーに関しては以下のようにあるので、公開時は取得して下さい。
( テスト時には無くても動くので本番サイト以外のキーを取得しなくてもいいです )
Warning: You need your own API key in order to use the Google Loader. 
Without your own key, examples won't work. 
<script src="http://www.google.com/jsapi?key=APIキー" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});
</script>

<div id="chart_div" style="width: 300px; height: 240px;"></div>

<script type="text/javascript">

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(3);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(data, {width: 300, height: 240, is3D: true, title: '円グラフのタイトル'});

</script>



posted by at 2010-12-21 11:08 | 小ネタ | このブログの読者になる | 更新情報をチェックする

2010年12月20日


縦書きCSS

mootools で縦横スライド( core のみ google.load ) を使って
縦書きを横スライドさせています。
( 何故か、縦のスライドは動きませんでした )
IE に関しては、標準モードでないと、「ー」が回転しなかったりしていますので注意です。

まず、縦書き用スタイルシート : 縦書きWebページプロジェクト - freefielder.jp
から css を取得して WEB 上に設置します。

ブログで設置できる事を確認しているものに関してはこちらを参照して下さい。

次に、縦書き変換スクリプト : 縦書きWebページプロジェクト - freefielder.jp
で通常のテキストを変換して DIV に縦と横幅を与えて、その中に変換した 
HTML をセットします。



この内容が縦に消えたり出現したりします
http://mootools.net/more/ でFx.Slide をチクしてラ
イブラリ
をビルドして追加実装して使用します
linear
Quad.easeIn/Quad.easeOut/Quad.easeInOut
Cubic.easeIn
Cubic.easeOut
Cubic.easeInOut
Quart.easeIn
Quart.easeOut
Quart.easeInOut
Quint.easeIn
Quint.easeOut
Quint.easeInOut
Pow
縦と横は必ず非表示したなら表示してから切り替え無いと
動かなくなるようです
以下の効果は不規則な動きをするのでテストしてからで無いと
エラになる可能性もあります
ページ全体を使ったサンプル


<link type="text/css" rel="stylesheet" href="http://lightbox.on.coocan.jp/tate-style.css"/>


posted by at 2010-12-20 22:10 | 小ネタ | このブログの読者になる | 更新情報をチェックする

2010年12月19日


mootools で縦横スライド( core のみ google.load )


horizontal :
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します

linear
Quad.easeIn or Quad.easeOut or Quad.easeInOut.
Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
Quart.easeIn or Quart.easeOut or Quart.easeInOut.
Quint.easeIn or Quint.easeOut or Quint.easeInOut
Pow

縦と横は必ず非表示したなら表示してから切り替え無いと
動かなくなるようです。

以下の効果は、不規則な動きをするのでテストしてからで無いと
エラーになる可能性もあります

Expo.easeIn or Expo.easeOut or Expo.easeInOut.
Circ.easeIn or Circ.easeOut or Circ.easeInOut.
Sine.easeIn or Sine.easeOut or Sine.easeInOut.
Back.easeIn or Back.easeOut or Back.easeInOut.
Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut
<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("mootools", "1.3.0");
</script>
<script src="http://lightbox.on.coocan.jp/js/mootools-fxSlide.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
window.addEvent('domready', function() {

	var myVerticalSlide1 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.linear
	});
	$('v_toggle1').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide1.toggle('horizontal');
		}
		else {
			myVerticalSlide1.toggle();
		}
	});

	var myVerticalSlide2 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeIn
	});
	$('v_toggle2').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide2.toggle('horizontal');
		}
		else {
			myVerticalSlide2.toggle();
		}
	});

	var myVerticalSlide3 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeOut
	});
	$('v_toggle3').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide3.toggle('horizontal');
		}
		else {
			myVerticalSlide3.toggle();
		}
	});

	var myVerticalSlide4 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	$('v_toggle4').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide4.toggle('horizontal');
		}
		else {
			myVerticalSlide4.toggle();
		}
	});

	var myVerticalSlide5 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Pow
	});
	$('v_toggle5').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide5.toggle('horizontal');
		}
		else {
			myVerticalSlide5.toggle();
		}
	});

});
</script>

<input id="v_toggle1" type="button" value="linear">
<input id="v_toggle2" type="button" value="Quad.easeIn">
<input id="v_toggle3" type="button" value="Quad.easeOut">
<input id="v_toggle4" type="button" value="Quad.easeInOut">
<input id="v_toggle5" type="button" value="Pow">
<br>
horizontal : <input id="horizontal" type="checkbox">

<pre id="vertical_slide">
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します
</pre>
jsapi?key=APIキーを書けと Google では書かれていますが、他のサイトのキーを書いても
動いてしまうので( というか書かなくても動きます )。本来この処理でキーを書く事のメ
リットは、「問題が生じた時に Google からの連絡が可能ですよ」という内容です。他の
API では、以前「任意です」と書かれていたものもあったのですが、今は消えています


posted by at 2010-12-19 22:45 | 小ネタ | このブログの読者になる | 更新情報をチェックする

onmouseover で、画像を透過して隠していたメッセージを表示する

画像の後ろに画像でもいいと思います。
こんにちは
<div style='position:relative;height:320px;'>

<div style='position:absolute;padding:20px;font-size:20px;font-weight:bold;'>
こんにちは<br>
</div>

<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;position:absolute;'
	onmouseover='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=30)";
	}
	else {
		this.style.opacity=.3;
	}
	'
	onmouseout='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=100)";
	}
	else {
		this.style.opacity=1;
	}
	'
>

</div>


posted by at 2010-12-19 20:58 | 小ネタ | このブログの読者になる | 更新情報をチェックする

lightbox.js の正しい設置方法

こんな感じですが、オリジナルサイトからダウンロードしたままでは
こうはならないので注意して下さい。

※ lightbox.on.coocan.jp では、rel="ligthbox_1" に変更しています
※ ダウンロードは個別に右クリックで一つづつダウンロードします
Lightbox_js

以下は、設置用のコードサンプルです。
<link rel="stylesheet" href="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.js"></script>

<a 
	href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg"
	rel="lightbox_1"
	title="my caption"
><img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;' 
></a>

まず CSS を変更します。( 追加です )
そうしないと、オリジナルページのように右下の閉じるリンクが美しくなりません
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

kbd{
	color: #555;
	background-color: #ddd;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: inherit;
	font-family: inherit;
	padding: 0 3px 2px 4px;
}

#keyboardMsg a {
	font-weight: bold;
	color: #303030;
	text-decoration: none;
}

あと、当然ですが、.js 内の画像の URL はホスティングしている場所を
http から記述する必要があります。

var loadingImage = 'http://lightbox.on.coocan.jp/js/lightbox_1/loading.gif';
var closeButton = 'http://lightbox.on.coocan.jp/js/lightbox_1/close.gif';

lightbox.js には、バージョン2 があって、そちらはアニメーションする上に
複数の画像をギャラリーとして表示できます。

関連する記事

Facebox v1.3 の正しい設置方法と使用方法


posted by at 2010-12-19 16:32 | 小ネタ | このブログの読者になる | 更新情報をチェックする

Shadowbox.js 3.0.3 の loading.gif の変更

急に、IE で見ている時に、loading.gif が消える際に背景が黒い四角で残るように
なったので、「IE が勝手にバグ発生?」とか思ったのですが、Microsoft に腹を立
てても問題は解決しないので、loading.gif の背景を透過にすれば改善されるはず
だと思って、調べてみると、loading 時の GIF を作成してくれるサイトがありまし
た。

Ajaxload - Ajax loading gif generator



サイズは、24x24 なので、Indicator lite でぴったりです。これを Shdowbox の
loading.gif に置き換えるだけでうまくいきます。


---------------------------------------------------------

「他に無いかな・・・」

と探してみたらなんだかそっくりのがあったのですが、こちらはスピードを指定
できます。そのかわり画像サイズが右クリックで解らないので ダウンロードリン
クがただの画像リンクなのでそちらで見ます。

Web Script Lab ≫ Ajax Loading Gif Generator



posted by at 2010-12-19 12:53 | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年12月17日


google.load + YUI Loader で、カラーピッカーを設置

最初このブログに直接埋め込んだら、どうもいろんな環境が混ざりすぎて
まともに動いたのは Google Chrome だけでした。仕方ないので IFRAME で
埋め込んでいますが、showModalDialog を使うといいと思います。

基本的には、YUI 2 のサンプルのままなのですが、そのままで使えたら苦労しない
のが YUI でして。。。。

まず、結果のコードの取得方法として3つ用意しましたが、そのうちの一つは
サンプル通りの get メソッドで、あとはこちらで追加実装です。そもそも、
テキストフィールドが変更可能なままなので、readonly にする為にプロパティ
から内部 ID を取得して直接アクセスしています。

また、初期処理のイベント(available)は継承元のイベントを使用しています。

chgValue はこちらで追加した新しいプロパティで、変更された値を picker
から直接アクセスできるようにしました。

後、どういうわけかポインタ用の画像は自分で用意する必要があるみたいですが、
サンプルなので、Yahoo のをそのまま使っています。実際に使う時はダウンロード
してどこかに保存して使います。また、IE ではグラデーションが「標準モード」で
ないと動かないので注意して下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body style='margin:0'>

<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
	require: ['colorpicker','fonts'],
	loadOptional: true,
	onSuccess: function() {
		var Event = YAHOO.util.Event;
		Event.onDOMReady(function() {
			picker = new YAHOO.widget.ColorPicker("color_picker", {
				showhsvcontrols: true,
				showhexcontrols: true,
					images: {
						PICKER_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/picker_thumb.png",
						HUE_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/hue_thumb.png"
					}
				});
	
				picker.on("rgbChange", function(o){
						picker.chgValue = o; 
					}
				);
				picker.on("available", function(o){
						// 初期編集不可
						document.getElementById(picker.ID.HEX).setAttribute("readonly","true") 
						document.getElementById(picker.ID.R).setAttribute("readonly","true") 
						document.getElementById(picker.ID.G).setAttribute("readonly","true") 
						document.getElementById(picker.ID.B).setAttribute("readonly","true") 
						document.getElementById(picker.ID.H).setAttribute("readonly","true") 
						document.getElementById(picker.ID.S).setAttribute("readonly","true") 
						document.getElementById(picker.ID.V).setAttribute("readonly","true") 
						picker.chgValue = {};
						picker.chgValue.newValue = [255, 255, 255];
						picker.chgValue.prevValue= [255, 255, 255];
					}
				);
	
				Event.on("reset", "click", function(e) {
					picker.setValue([255, 255, 255], false);
				});
	
				Event.on("gethex1", "click", function(e) {
					alert(picker.get("hex")); 
				});
				Event.on("gethex2", "click", function(e) {
					alert(document.getElementById(picker.ID.HEX).value); 
				});
				Event.on("gethex3", "click", function(e) {
					alert(picker.chgValue.newValue + " : " + picker.chgValue.prevValue); 
				});
		});
	}
}).insert();
</script>

<div class="yui-skin-sam" style='padding:10px;background-color: #eeeeee;width: 420px; height:220px;'>
<div id="color_picker" style='position: relative;'></div>
</div>

<input type="button" id="reset" value="初期値">
<input type="button" id="gethex1" value="RGB表示(1)">
<input type="button" id="gethex2" value="RGB表示(2)">
<input type="button" id="gethex3" value="RGB表示(3)">

</body>
</html>



posted by at 2010-12-17 22:28 | JavaScript | このブログの読者になる | 更新情報をチェックする