opera:hige このページをアンテナに追加

 | 

2006-04-29

昨日作った付箋User Javascript 09:10 昨日作った付箋User Javascript - opera:hige を含むブックマーク はてなブックマーク - 昨日作った付箋User Javascript - opera:hige

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

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

"Sticky-notes" for Opera

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

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060429

2006-04-28

[]付箋紙User Javascript制作中 17:58 付箋紙User Javascript制作中 - opera:hige を含むブックマーク はてなブックマーク - 付箋紙User Javascript制作中 - opera:hige

追記

今後の更新は、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"で検索してクッキーを消してください。


スクリーンショット

f:id:higeorange:20060428180457p:image

コード

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!
  • 既にコメントを付けてる場合の処理。
  • 付箋の大きさを変更できるようにする。

usopionusopion2006/04/29 13:05//クッキーの削除
function remove()
{
document.body.removeChild($('cmmntsdiv'));
var arrayData = new ArrayCookie2(document.location.pathname);
arrayData.setData('comments','',0);
}

higeorangehigeorange2006/04/29 13:08ありがとうございます。有効期限を0にすれば言い訳ですね。

usopionusopion2006/04/29 13:24function 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);
}
}
//元のままだとコメントに「,」が含まれると正しく動作しないよ。

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060428

2006-04-22

[]Post Beta Weekly 01:09 Post Beta Weekly - opera:hige を含むブックマーク はてなブックマーク - Post Beta Weekly - opera:hige

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060422

2006-04-20

[]祭開催中 05:40 祭開催中 - opera:hige を含むブックマーク はてなブックマーク - 祭開催中 - opera:hige

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

[]9 Beta 17:40 9 Beta - opera:hige を含むブックマーク はてなブックマーク - 9 Beta - opera:hige

ついにきましたよ。

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


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

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060420

2006-04-19

[]Beta リリース候補 06:42 Beta リリース候補 - opera:hige を含むブックマーク はてなブックマーク - Beta リリース候補 - opera:hige

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

Win Build:8371

Unix/Linux Build:240

Beta RC

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060419

2006-04-17

[]UserJavascriptのデバッグ 07:52 UserJavascriptのデバッグ - opera:hige を含むブックマーク はてなブックマーク - UserJavascriptのデバッグ - opera:hige

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

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

使いかた

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

追記

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

で修正。

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060417

2006-04-15

あしか 01:42 あしか - opera:hige を含むブックマーク はてなブックマーク - あしか - opera:hige

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

[]はてなBookmarkに追加するボタンの問題 04:44 はてなBookmarkに追加するボタンの問題 - opera:hige を含むブックマーク はてなブックマーク - はてなBookmarkに追加するボタンの問題 - opera:hige

はてな独特の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さんありがとうございました。

*1:#を%23等

KurumaKuruma2006/04/15 16:25もしアイデアを出されるのであれば http://car.s35.xrea.com/diary/200603.php#D23-04 で便乗させて下さい(何。

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060415

2006-04-13

[]del.icio.usに一発ブックマークするサーチボックスを作る奴(Opera用) 05:46 del.icio.usに一発ブックマークするサーチボックスを作る奴(Opera用) - opera:hige を含むブックマーク はてなブックマーク - del.icio.usに一発ブックマークするサーチボックスを作る奴(Opera用) - opera:hige

最速インターフェース研究会 :: 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

hideblohideblo2006/04/13 10:06はじめまして
僕もはてブの一発ブックマークつくろうと思っていたところ。はてブは難しいのか。困ったな。

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060413

2006-04-12

[]Pre-Easter-Mid-Weekly 03:09 Pre-Easter-Mid-Weekly - opera:hige を含むブックマーク はてなブックマーク - Pre-Easter-Mid-Weekly - opera:hige

Windows build:8367

Linux/Unix build:236


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


Opera Desktop Team's blog


[]operaプロトコルをごにょごにょ 04:15 operaプロトコルをごにょごにょ - opera:hige を含むブックマーク はてなブックマーク - operaプロトコルをごにょごにょ - opera:hige

設定を解説する際に非常に便利な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

takeftakef2006/04/13 00:02ユーザーエージェントで判別せずにwindow.operaの有無を調べるようにしたらどうでしょう?

higeorangehigeorange2006/04/13 00:10今、それをIRCで教えてもらったところです。書き直しときます。ありがとうございます。

nanashinanashi2006/04/14 10:22Firefoxの拡張NoScript等でスクリプトがoffの場合、OperaとFirefoxで同じ表示になります。

higeorangehigeorange2006/04/14 15:37書き忘れていましたが、javascriptで書かれているのでjavascriptオフにした場合動きません

nanashinanashi2006/04/14 17:02opera:config test pageに書いてあるスクリプトだとa要素が残ってしまい、ユーザースタイルでa要素に表示の設定をしてある場合、「リンクはあるけどどうなってんの?どこにも飛ばないよ。」という状態になり、閲覧者が混乱すると思います。
span要素で置き換えたほうが、リンクがなくなって閲覧者の混乱はさけられると思います。

higeorangehigeorange2006/04/14 22:26hrefを取り除いただけの状態だと、ユーザースタイルを適用しない限りリンクとして表示されないと思いますのでこのままで大丈夫だと思います。

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060412

2006-04-11

[][]ツールチップを表示する 04:53 ツールチップを表示する - opera:hige を含むブックマーク はてなブックマーク - ツールチップを表示する - opera:hige

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

f:id:higeorange:20060709100717p:image


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

Thanks, usopion.

追記 0:55

修正。

usopionusopion2006/04/11 11:08えっとー・・・・ windows だと、[画面のプロパティ]→[デザイン]→[ヒント]で変更できるのでわ~

higeorangehigeorange2006/04/11 11:16やっぱりできたましたか。ちなみにLinuxだとopera:configから変更できます。またしても無意味なスクリプトか。。。まぁ勉強のためにもう少しいじってみます。

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060411

2006-04-08

[]mailto:リンクをGmail02:31 mailto:リンクをGmailで - opera:hige を含むブックマーク はてなブックマーク - mailto:リンクをGmailで - opera:hige

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改善計画)

[]Weekly(Easter egg/bug hunting edition) 02:37 Weekly(Easter egg/bug hunting edition) - opera:hige を含むブックマーク はてなブックマーク - Weekly(Easter egg/bug hunting edition) - opera:hige

Windows:8359

Unix/Linux:229

Opera Desktop Team's blog


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

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060408

2006-04-06

[]Pre Beta RC 02:37 Pre Beta RC - opera:hige を含むブックマーク はてなブックマーク - Pre Beta RC - opera:hige

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

Opera Desktop Team's blog


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

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060406

2006-04-05

[]8.54 19:22 8.54 - opera:hige を含むブックマーク はてなブックマーク - 8.54 - opera:hige

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060405

2006-04-01

[]Weekly 09:49 Weekly - opera:hige を含むブックマーク はてなブックマーク - Weekly - opera:hige

Unix/Linux Build:206

Windows Build:8333


mplayerplug-inが使えるようになったということなので,Home | Opera forumsを参考にしてごにょごにょ。

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


$ opera -debugplugin

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

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20060401
 |