opera:hige

■ 昨日作った付箋User Javascript 09:10

どこかで見たなーっておもってdel.icio.usをほり返して見つけてきた。

この日記の中でも少しだけ言及してるじゃねーか。http://orera.g.hatena.ne.jp/higeorange/20051012

"Sticky-notes" for Opera

たぶんこっちの方が優れている。

■ [UserJs]付箋紙User Javascript制作中 17:58

追記

今後の更新は、http://www14.plala.or.jp/operairc/customize/userjavascript.html#fusen で行っていきます。

使いかた。

ArrayCookie2.js(id:usopion)とdom-drag.jsをUser Javascriptディレクトリに入れる。

で、下のコードを新しいjsファイルとして同じくUser Javascriptディレクトリに入れる。

新しく付箋を作る場合は,

javascript:textbox('hoge','0','0');

をブックマークレットから呼び出す。

現在登録した付箋を削除する機能はありません。消す場合には面倒だけど、Preferences>Advanced>Cookies>Manage Cookiesより"Comments"で検索してクッキーを消してください。

スクリーンショット

コード

document.addEventListener('load',addComment,false);

function addComment() {
	var arrayData = new ArrayCookie2(document.location.pathname);
	var comments = arrayData.getData('comments');
	if(comments) {
		var comment = arrayData.getArrayData('comments',0);
		var top = arrayData.getArrayData('comments',1);
		var left = arrayData.getArrayData('comments',2);
		textbox(comment,top,left);
	}
}

function textbox(c,t,l) {
	var downed = false;
	
	var div = cElement('div');
	div.id = 'cmmntsdiv';
	var dStyle = div.style;
	dStyle.width = '200px';
	dStyle.height = '150px';
	dStyle.position = 'absolute';
	dStyle.margin = '0';
	dStyle.padding = '0 0 5px 0';
	dStyle.zIndex = '100';
	dStyle.top = t;
	dStyle.left = l;
	dStyle.background = '#fff';
	dStyle.border = '1px #000 solid';
	dStyle.textAlign = 'left';

	var titlebar = cElement('p');
	var bStyle = titlebar.style;
	bStyle.margin = '0';
	bStyle.width = '100%';
	bStyle.background = '#333';
	bStyle.textAlign = 'center';
	bStyle.color = '#fff';
	bStyle.fontWeight = 'bold';
	titlebar.appendChild(document.createTextNode('Comments'));
	div.appendChild(titlebar);

	var ta = cElement('textarea');
	ta.id = 'cmmnts';
	ta.value = c;
	var tStyle= ta.style;
	tStyle.background = '#fff';
	tStyle.borderWidth = '0';
	tStyle.width = '198px';
	tStyle.height = '110px';
	tStyle.overflow = 'hidden';
	div.appendChild(ta);

	var br = cElement('br');
	div.appendChild(br);

	var savebtn = cElement('input');
	savebtn.type = 'button';
	savebtn.onclick = save;
	savebtn.value = 'save';
	savebtn.style.margin = '0 5px';
	div.appendChild(savebtn);

	var removebtn = cElement('input');
	removebtn.type = 'button';
	removebtn.onclick = remove;
	removebtn.style.margin = '0 5px'
	removebtn.value = 'remove';
	div.appendChild(removebtn);

	document.body.appendChild(div);
	Drag.init($('cmmntsdiv'));
}

function save() {
	var comments = $('cmmnts').value;
	var top = $('cmmntsdiv').style.top;
	var left = $('cmmntsdiv').style.left;
	var arrayData = new ArrayCookie2(document.location.pathname);
	arrayData.setData('comments',comments,30);
	arrayData.addData('comments',top,30);
	arrayData.addData('comments',left,30);
}

function remove() {
	document.body.removeChild($('cmmntsdiv'));
	var arrayData = new ArrayCookie2(document.location.pathname);
	arrayData.setData('comments','',0);
}

	
function $(id) {
	return document.getElementById(id);
}

function cElement(element) {
	return document.createElement(element);
}

既知の問題/今後の課題

• ドラッグアンドドロップ(付箋の移動)がうまくいかない。これはひどい。 dom-drag.jsを導入することで解決。
• スタイルの見直し。サイトによってはスタイルが崩れる。
• クッキーの削除。Thanx,usopion!
• 既にコメントを付けてる場合の処理。
• 付箋の大きさを変更できるようにする。

■ [Release]Post Beta Weekly 01:09

■ [IRC]祭開催中 05:40

ここ数日やけにいろんな人がくるなぁ。どうしたんだろうか?

■ [Release]9 Beta 17:40

ついにきましたよ。

ん？opera-9.0-20060411.1-static-qt.i386-en.rpm??って今使ってるやつじゃねーか???

Opera press releases - Widgets, BitTorrent, content blocking: Introducing Opera 9 Beta

■ [Release]Beta リリース候補 06:42

Betaは今週中かな?先週のWeeklyより安定度が増しているとのこと。

Win Build:8371

Unix/Linux Build:240

Beta RC

■ [UserJS]UserJavascriptのデバッグ 07:52

alert()にしろopera.postError()にしろ変数ごとに表示するのはめんどくさいというかうっとうしいので複数の変数の値をまとめてjavascriptコンソールに吐き出す用なのを作ってみた。

function dbggr() {
	var res;
	var dbary = dbggr.arguments;
	res = dbary.join(',');
	opera.postError(res);
}

使いかた

dbggr(変数1,変数2,・・・・);

追記

あほだ。。。なんで配列に入れ直す必要があるんだ。もとから配列じゃねーか。

で修正。

■ あしか 01:42

あしかを何かに使いたいなぁ。これから作る/作りたいものをタスクとして追加するとかかなぁ。んーでも共同でなんか作るってことないなぁ。。。

■ [Customize]はてなBookmarkに追加するボタンの問題 04:44

はてな独特のURLに#が入るとそれ以降認識されないで

はてBが本来のURLと違う所ブックマークしてしまっていたのです。

はてBのスプリクトが一部上手く動作しない・・

どうもURLに#(つまりページ内アンカー)が含まれる場合#以降が呼んでくれないっぽい。

んーこれは困った。なんで気づかなかったんだろ。

このボタンの仕組みを説明しとくと

Go to page,"http://b.hatena.ne.jp/add?mode=confirm&url=%u"

というアクションとなっていて、%uっていうのは現在表示してるページのURL。でGo to pageでダブルコーテーションで囲まれているURLに移動という風になっている。

問題なのは、ブックマークレット - はてなにあるブックマークに追加するBookmarkletを見てもらうとわかると思うがescape()に渡したURL*1を"url="以降に付け足さないといけないらしい。んーjavascript無しでは出来ない。。。

はてな側でどうにかしてもらわないとどうにもならないな。

javascript無しで動くってのがいいのになぁ。Bookmarkletなら問題なく動くのでそっちを使わざるをえないな。

d:id:gaopikoさん,id:takefさんご報告ありがとうございます

追記 4/17 22:22

URIの構文について書かれているRFC3986(の邦訳)見ると#はフラグメント識別子(フラグメント(id属性やname属性で名前をつけられた箇所)を指定するためのもの)の区切り子なので、それ以降はフラグメント識別子として識別されてクエリには含まれないらしい。

はてなブックマークで#の入ったURIを渡すと#以降が切り捨てられる？という話

なるほど、#以降が切り捨てられるのは普通の動作なんですね。

ということで,ブックマークレット推奨ということか。

quaaさんありがとうございました。

■ [Customize]del.icio.usに一発ブックマークするサーチボックスを作る奴(Opera用) 05:46

最速インターフェース研究会 :: del.icio.usに特定のタグを付けて一発ブックマークするブックマークレットを作る奴をみてそういえば昔そんなのを作ったなぁってことでma.laさんのBookmarkletを参考に少しOpera用に手直して作りなおしてみた。

http://www14.plala.or.jp/operairc/misc/post_to_delicious.html

Opera9から採用された右クリックからsearch.iniに追加できる奴用にサーチボックスも作れるようにしようと思ったけどめんどくさかったのでやめた。

追記 4/14 5:12

サーチボタン、Opera9から採用された右クリックからsearch.iniに追加できる奴用にインプットフィールドを作成できるオプションを付けた。

追記 8/30 10:30

Del.icio.usの仕様が変わったため動かなくなったみたい。

http://groups.yahoo.com/group/ydn-delicious/message/296

■ [Release]Pre-Easter-Mid-Weekly 03:09

Windows build:8367

Linux/Unix build:236

夕方入れ替えたばかりだったのだが、入れ替え。

Opera Desktop Team - Pre-Easter-Mid-Weekly Release

■ [javascript]operaプロトコルをごにょごにょ 04:15

設定を解説する際に非常に便利なopera:config。リンクを張れば直に設定項目が現れてしまいますからね。Operaユーザーの強い味方である事は確かです。

しかしOperaユーザー以外にとって、これは邪魔な事この上ないリンク。Operaユーザーの占める割合を考えると全体のUsabilityを下げているのは間違いないでしょう。……というわけで、operaプロトコルへのリンクをOperaブラウザ以外で無効化する為の管理者用JavaScriptを作ると良いんじゃないかな、と思うのです。

operaプロトコル

てことで早速作ってみたよ。

opera:config test page

このページを,operaでアクセスしたときとIE,Firefoxでアクセスしてみたときとを比べてみてください。たぶん、opera:configとUse Thumbnails in Tab Tooltipsという文字がFirefox,IEだとリンクにならないはず。

ページに埋め込んであるスクリプトは、

window.onload = function () {
	if(!window.opera) {
		if(document.body)
			searchKeyword(document.getElementsByTagName('body')[0]);
	}
}
function searchKeyword(n){
	if(n.nodeType == 1 && n.tagName.toUpperCase() == 'A' && (n.href.match(/^opera:/))) {
		var r = document.createElement('SPAN');
		r.className = 'opera_config';
		for(var j = 0; j < n.childNodes.length; j++)
			r.appendChild(n.childNodes[j].cloneNode(true));
		n.parentNode.replaceChild(r, n);
	} else if(n.hasChildNodes()) {
		for(var i = 0; i < n.childNodes.length; i++)
			searchKeyword(n.childNodes[i]);
	}
	return;
}

。大部分がtemp_hさんが作られた,disableHatenaKey.jsで出来ています。Thanks, temp_h.

ついでにopera:で始まるリンクを全て無効に。対象となるのは、opera:/button,opera:/edit/Searchなど。

んーあとはユーザーエージェントの部分だな。これだとMark as {Mozilla,IE}だとリンクにならないからね。どうにかできるのかな。

追記 4/13 0:25

ユーザーエージェントで判断じゃなくて、window.operaで判断するのに変更。

で、もっとシンプルなスクリプトでいけるということなので

window.onload = function () {
	if(!window.opera) {
		if(document.body)
			removeHref();
	}
}
function removeHref(){
	var anc = document.getElementsByTagName('a');
	for(var i=0;i<anc.length;i++) {
		if(anc[i].href.match(/^opera:/i)) {
			anc[i].removeAttribute('href');
		}
	}
}

こっちを使うことにする。

Thanks, usopion, Kuruma and takef

■ [customize][Userjs]ツールチップを表示する 04:53

Operaのデフォルトでは背景色が黄色のツールチップが表示されると思う。できたっけ？

それを違う色で表示するようなUserJavascriptを書いてみた。

もちろん背景色以外にも色々変えることができる。

document.addEventListener('load', showTooltip, false);

function showTooltip() {
	var ancs = document.links;
	for(var i=0,len=ancs.length;i<len;i++) {
		ancs[i].onmouseover = popups;
		ancs[i].onmouseout = popdowns;
	}
}

function popups(e) {
	url = this.href;
	title = this.title;
	chk = false;
	if(!this.title) {
		content = 'URL: '+ url;		
	} else {
		content = 'Title: ' + title + '<br />URL : '+ url;
	}
	defx = e.clientX + document.body.scrollLeft + 10;
	defy = e.clientY + document.body.scrollTop - 35;
	tID = setTimeout("tipShow()",1000); // ツールチップを表示するまでの時間。
}

function tipShow() {
	tltp = document.createElement('div');
	tltp.id = 'ppps'
	with(tltp.style) {
		visibility = 'visible';
		position = 'absolute';
		minWidth = '200px';
		top = defy;
		padding = '2px';
		background = '#000' //ツールチップの背景の色
		color = '#fff'; //ツールチップの文字の色
		textAlign = 'left';
		fontSize = '12px'; //ツールチップの文字の大きさ
		border = '1px solid #fff';
	}
	if(innerWidth < (250 + defx)) {
		tltp.style.left = innerWidth - 230;
	} else {
		tltp.style.left = defx;
	}
	if (url.match(/^.*\.(jpe?g|bmp|gif|png)$/i)) {
		tltp.innerHTML = '<img src=\"' + url + '" style=\"max-width:396px;\"alt=\"\" /><br />' + content;
	} else {
		tltp.innerHTML = content;
	}
	document.body.appendChild(tltp);
}

function popdowns() {
	clearTimeout(tID);
	tltp.style.visibility = 'hidden';
}

Operaのデフォルトのツールチップを表示しない設定にしておくこと。

既知の問題

リンクのある場所によってはツールチップがはみだして表示されてしまう。

リンクにマウスポインタが乗るとすぐにツールチップが表示されるのでかなりうざい。

Linux版だとツールチップを表示しない設定にできないのか？Preferences>Advanced>Browsing>Show tooltipsにチェックを入れても次に設定画面を開くとチェックがはずれている。外れているにもかかわらず、ツールチップを表示してしまう。わけわからん。

さて、改造するかな。。。

usopionさんがコメントにかかれているようにWindowsでも背景色フォント等を変えられるみたい。んーそれだったらこれ以上いじる必要ないかもと思ったが、知識を深めるためにもう少しいじってみる。

リンクがウィンドウの右端付近にあればツールチップがはみでてしまうのでその問題を解決しようと,innerWidthを使ってウインドウのサイズを取得し、ごにょごにょしてみる。が、スラッシュで区切られたURLだとちゃんと折り返してくれてウィンドウ内に収まってくれるが、はてなキーワードなURLだと折り返してくれない。。。

追記

表示するまでの時間を設定できるようになった。

ツールチップの位置、幅に関しては見直しの必要あり。

デフォルトのツールチップの色を変えることができるんだから、このスクリプト版はもっと派手なツールチップにしたほうが意味がでるのかもな。

追記 22:40

背景を透過画像にしたら見にくくなった。んー存在価値を見出すために付け足すとしたらリンク先が画像の場合ついでに表示とかかな。Ajax勉強しなきゃ。

追記 0:15

リンク先が画像の場合、画像もついでに表示するようにしてみた。Ajaxいらなかったや。勉強不足。

Thanks, usopion.

追記 0:55

修正。

■ [Customize]mailto:リンクをGmailで 02:31

Gmail with Opera - opera:hige - チーム俺等の発展。

menu.iniの[Mailto Link Popup Menu]に以下を追加。

 Item, "Mail with Gmail"=Go to page,"javascript:a='%l';location.href='https://mail.google.com/gmail?view=cm&fs=1&tearoff=1&cmid=5&to='+a.replace(/^mailto:/,'');"

これでmailtoリンクの右クリックからGmailのメール作成画面へ飛べるようになる。

ブックマーク de Gmail拡張！と組みあわせれば色々できそう。

追記

上のUserJavascript版。mailtoリンクをGmailのメール作成画面へのリンクに置換。

document.addEventListener('load',mGmail,false);

function mGmail() {
	var anc = document.links;
	for(var i=0,len=anc.length;i<len;i++) {
		if(anc[i].href.match(/^mailto:/))
			anc[i].setAttribute('href','https://mail.google.com/gmail?view=cm&fs=1&tearoff=1&cmid=5&to='+anc[i].href.replace(/^mailto:/,''));
	}
}

再追記　6/19 19:00

OperaでmailtoプロトコルをWebメールに関連づける方法(駄的HTML改善計画)

■ [Release]Weekly(Easter egg/bug hunting edition) 02:37

Windows:8359

Unix/Linux:229

Opera Desktop Team - Easter egg/bug hunting edition

そろそろ追いかけるのがしんどくなってきた。

■ [Release]Pre Beta RC 02:37

BetaのRCなのかなんなかわからん。

Opera Desktop Team - Mid Weekly/Pre Beta RC

ただいまLinux版のフォントに関するバグのテスト中。

■ [Release]8.54 19:22

■ [Release]Weekly 09:49

Unix/Linux Build:206

Windows Build:8333

mplayerplug-inが使えるようになったということなので，[plug-ins] netscape plug-in API 0.16 - Opera for *nix - Linux/FreeBSD - Opera Communityを参考にしてごにょごにょ。

"--enable-x"としているためコントロールはできないが無事見られるようになった。最初コンパイルできなかったのはなんだったんだろうか。。。

$ opera -debugplugin

で起動すればプラグインを認識できているか、エラーの状況がわかって便利。