SQLの窓

2010年01月31日


Greasemonkey でSeesaa の記事投稿のテキストエリアの右上に保存ボタンと記事一覧画面の一括編集ボタン

2010/01/31 : 更新しました
Install

▼ Greasemonkey のインストールページ
Greasemonkey :: Add-ons for Firefox

Seesaa_listmtn

以前からブックマークレットとして作ってあったものを移植しました。

twilogGreasemonkey というのを知って、Firefox の拡張を使いやすくしたもの
だと言う事が解り、早速、ブックマークレットで作ってもあまり需要のなさそうな
Seesaa の記事用の保存ボタンをテキストエリアの側に追加するというのを作って
みました。

Gm

マニュアル読んでみると、Firefox 拡張を作った時に知った XPCNativeWrapper
というのが出てきましたが、これは、行き過ぎたアクセスを防ぐ為に参照されているもので、
通常参照されている現在ブラウザが表示している window オブジェクトの実体のはずです
▼参照したオブジェクトを表示すると以下のようになります
[object XPCNativeWrapper [object HTMLTextAreaElement]]

それに反して、unsafeWindow は、フルアクセスの為に用意されているようです。確かに、
XPCNativeWrapper だと、ここぞというときに面倒な事になる場合がありますが、通常
少し画面をいじる程度なら必要ありません。

以下は、最初に作ったバージョンで、送信用のボタン(type=submit)を追加しています。
とりあえずこれだと簡単なので実装してみましたが、実際は送信ボタンだと、サーバー
へ送信されるデータが変わってしまうので良くありません。ですから、それを回避する
為に、保存用のボタンを通常ボタンに変更して本来のボタンを呼び出すようにしたもの
をもう一つのサンプルとして作成しました。

2010/01/29 現在の Install はこのバージョンです。
▼ 以下は初期のソースコードです
// ==UserScript==
// @name           Seesaa Entry
// @namespace      http://winofsql.jp
// @description    Seesaa Entry Extentions
// @include        http://blog.seesaa.jp/pages/my/blog/article/regist/input*
// @include        http://blog.seesaa.jp/pages/my/blog/article/edit/input*
// ==/UserScript==

var i;

// この前に挿入( 入力テキストエリア )
var tag = document.getElementById("article__body");
var parentTarget = tag.parentNode;

// 入力エレメントを作成
var obj = document.createElement("INPUT");
// 送信ボタン
obj.setAttribute( "type", "submit" );
// 保存する( unicode )
obj.setAttribute( "value", "\u4fdd\u5b58\u3059\u308b" );

// 挿入
parentTarget.insertBefore( obj, tag )

// 位置調整
obj.style.marginLeft = "460px";

ソースコード解説(バージョン2)
※ 配布ページは、フレームでない必要があるようです。
※ ユーザースクリプトは、"任意の名前.user.js" という形式である必要があります


posted by lightbox at 2010-01-31 22:57 | TrackBack(0) | Firefox | このブログの読者になる | 更新情報をチェックする

Flex3 カテゴリ内のメニュー






タグ:Flex3
posted by lightbox at 2010-01-31 18:57 | 記録 | このブログの読者になる | 更新情報をチェックする

Oracle カテゴリ内のメニュー



タグ:Oracle
posted by lightbox at 2010-01-31 18:27 | 記録 | このブログの読者になる | 更新情報をチェックする

2010年01月29日


Greasemonkey : YouTube にダウンロードリンクを付加

Greasemonkey は、Firefox 用の拡張で、特定のページに対して特定の加工がされて表示できるようにしたものです。(Google Chrome 用にも同様の、the Tampermonkey extension という拡張があって、全くおなじダウンロードリンクが作成されます。)

▼ インストールページ
Download YouTube Videos as MP4

▼ Greasemonkey のインストールページ
Greasemonkey :: Add-ons for Firefox

▼ こんなふうにダウンロード用のリンクが作成されます




posted by lightbox at 2010-01-29 12:02 | Firefox | このブログの読者になる | 更新情報をチェックする

2010年01月28日


JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く

もともと、parentNode でやってた処理なのですが、Google Chrome だけが offsetParent でしか動かないのでテストしてみると、皆一様に offsetParent で動いたのでコードを整理しました

Window 用の DIV の位置は、BODY の直後が望ましいです。

<script type="text/javascript">
function setWin(target,x,y,w,h) {
	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName == 'BODY' ) {
			break;
		}
	}
	document.getElementById("win_base").style.top = (numY+y) + "px";
	document.getElementById("win_base").style.left = (numX+x) + "px";
	document.getElementById("win_base").style.width = w + "px";
	document.getElementById("win_base").style.height = h + "px";
	document.getElementById("win_base").style.display = "";
}
</script>
<div
	id="win_base"
	style='
		position: absolute;
		display: none;
		color: black;
		background-color: #E0E0E0;
		border-style: solid;
		border-color: #303030;
		border-width:1px;
		width:0px;
		height:0px;
		z-index:100;
	'>
	<input
		type="image"
		src="http://winofsql.jp/image/mcancel.png"
		style='float:right'
		onClick='this.parentNode.style.display = "none";'
	>
	<div id=win_box style='padding:2px;'></div>
</div>
<pre>

ウインドウを重ねて <input type="button" value="開く" onClick='setWin(this,50,-15,200,50)' style='width:200px;'>


</pre>

ウインドウを重ねて 



関連する記事

IFRAME ウインドウを非表示から開く時の位置調整



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

2010年01月27日


JavaScript : 外部呼出しにおける SCRIPT 内で呼び出し元の charset に依存しない日本語の書き方

いずれも こんにちは という日本語ですが、unicode で記述されています。alert で表示されるもの(要するに JavaScript内の文字列)は、「unicode」ボタンで、HTML上で表示されるものは「HTML数値文字列参照」ボタンで変換できます
(function () {
	var work = {
		show: function() {
			alert("\u3053\u3093\u306b\u3061\u306f");
		}
	}
	window.test = work;
	document.write("&#12371;&#12435;&#12395;&#12385;&#12399;");
})();

関連する記事

JavaScript : 入力文字列を 変数用16進数表現 に変換する
JavaScript : 入力文字列を htmlentity に変換する
JavaScript : 外部呼出しにおける SCRIPT要素の charset 属性


タグ:javascript
posted by lightbox at 2010-01-27 09:11 | JavaScript | このブログの読者になる | 更新情報をチェックする

JavaScript : 外部呼出しにおける SCRIPT要素の charset 属性

以下のコードは、window オブジェクトtest というプロパティを作成して、その中に show というメソッドを実装します。

show メソッドに書かれた日本語は shift_jis で書かれているので、通常では shift_jis 
以外のページから読み込むとIEではエラーになりますが、charset 属性で正しく指定するとエラーにはなりません
(function () {
	var work = {
		show: function() {
			alert("こんにちは");
		}
	}
	window.test = work;
})();


<script
	type="text/javascript"
	src="http://lightbox.on.coocan.jp/js/charset/sjis.js"
	charset="shift_jis"
></script>





posted by lightbox at 2010-01-27 08:41 | JavaScript | このブログの読者になる | 更新情報をチェックする

2010年01月24日


JavaScript のみでプレビューする時の注意事項

DIV 内に innerHTML でプレビューする場合は、インラインで複雑な JavaScript が書かれているとエラーになる場合があります。ですから、そういう場合も対処したい場合は、IFRAME に対して document.write すると回避されます。

しかし、document.write でも、部分的なスクリプト記述であると、当然エラーになってしまいますので、全体のエラーを以下のようにして抑制します。
<script type="text/javascript">
window.onerror = function (e, url, line) {
	console.log(e+" / "+line+" / "+url);
	return true;
}
// 関数未定義
test();
</script>

この記述を document.write で IFRAME に書き込む為に、全体を文字列化する必要がありますので、こちらで JavaScript ボタンをクリックして変換して下さい
str="";
str+="<"+"script type='text/javascript'> \n";
str+="onerror = function() { \n";
str+="	return true; \n";
str+="} \n";
str+="</"+"script> \n";
str+=" ";

IFRAME に対する document.write は、IFRAME の id を preview とすると以下のようになります
//
//
	var target = document.getElementById("preview").contentWindow.document;
	target.open;

	var str="";
str+="<style type=\"text/css\"> \n";
str+="* { \n";
str+="	font-size:12px; \n";
str+="} \n";
str+="</style> ";
	target.write(str);
str="";
str+="<"+"script type=\"text/javascript\"> \n";
str+="window.onerror = function() { \n";
str+="	return true; \n";
str+="} \n";
str+="</"+"script> ";
	target.write(str);

	target.write(document.getElementById("text").value);
	target.close();




タグ:javascript
posted by lightbox at 2010-01-24 21:24 | JavaScript | このブログの読者になる | 更新情報をチェックする

JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する

実際は、右辺にオブジェクトをセットして専用の名前空間で参照できるライブラリのインスタンスとして利用します。

ルートで var で定義する変数と厳密には違うようですが、事実上同じと思っていいと思います。ですから、Fucntion 内でグルーバルな変数を利用したい場合は、window オブジェクトを使用すると良いでしょう
window.変数名 = "lightbox"

または

window["変数名 "] = "lightbox"

例えば、Shadowbox というライブラリを簡単にまとめると以下のような定義のしかたをしています( 以前は var で直接セットしていましたが、最新はこのようになります )
(function(){

    var ua = navigator.userAgent.toLowerCase(),

    S = {

        // いろいろな定義

        },

    // いろいろな定義
    ;

    window['Shadowbox'] = S;

})();


(function(){})(); は、関数を定義して呼び出すのを一度に行う書き方で、無名関数を定義して () で実行しています


posted by lightbox at 2010-01-24 18:46 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2010年01月23日


JavaScript : Numberオブジェクトに16進数文字列に変換して指定した長さで前にゼロを付けるメソッドを追加する

JavaScriptの function の引数の扱いと、prototype の使い方のサンプルです

Number.prototype.toHex = function () {
	var n;
	// デフォルトは長さ2で前にゼロ
	if ( arguments.length == 0 ) {
		n = 2;
	}
	// 以外は引数が長さで前にゼロ
	else {
		n = arguments[0]; 
	}
	// 数値を16進数文字列に変換
	var s_hex = this.toString(16);
	// 長さが引数より長い場合は何もしない
	if ( s_hex.length >= n ) {
		return s_hex;
	}
	// 長さが引数より短い場合は0で長さぶんを補完する
	else {
		return ("0000000000" + s_hex).substr(s_hex.length+10-n,n);
	}
}

alert((0).toHex());
alert((255).toHex());
alert((300).toHex(5));



posted by lightbox at 2010-01-23 02: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 %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり