更新終了

今後はdeadspaceに一本化します。

Greasemonkey: D-Pagerize

D-Pagerize

分散型AutoPagerize。Firefox3+Greasemonkey0.8.20090123.1で動作。

SITEINFOはXMLで記述され、rel-siteinfoを指定した(X)HTMLファイルからインポートされます。

SITEINFOを書く際の注意

XPath式を書く際は

  • text/htmlで配信されているページには名前空間接頭辞を指定せず
  • application/xhtml+xmlで配信されているページにはxhtml接頭辞を指定する

ようにしてください。

インポートされた後について

Greasemonkeyのコマンドメニューから

  • 今見ているページに対応しているSITEINFOファイルのみ削除
  • 全て削除

することができます。また、動いていたはずのサイトで動かなくなったときは「update」を選択することで、作成者が更新していればその変更に追従することができます。

操作について

コンテントエリアのダブルクリックでon/offを切り替えることができます。

「sbmc.user.js」更新

Greasemonkey: sbmc.user.js - mayokara note

細かい修正を行いました。

Bookmarklet: サイト側のCSSをオンオフするBookmarklet

javascript:"toggleCSS",Array.forEach(document.styleSheets,function(v,n){n=v.ownerNode;v.disabled^=!(/(^|\s)alternate(\s|$)/i.test(n.rel)||/(^|\s)alternate\s*=\s*([%22'])yes\2(\s|$)/.test(n.data));});

toggleCSS

代替スタイルシートには触りません。

Bookmarklet: 単純に入力値をHTMLエスケープするだけのBookmarklet

javascript:(function htmlEscape(h){h=function(s){return s.replace(/[&<>"']/g,function(m){return ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[m];});};prompt("output",h(prompt("input","")));})();

htmlEscape

HTML手書き派用。

Bookmarklet: HTMLエスケープするリンク(+引用)生成rev.2

javascript:(function makeLink(h,href,title,sel,r){h=function(s){return s.replace(/[&<>"']/g,function(m){return ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[m];});},href=h(location.href),title=h(document.title),sel=h(String(getSelection())),r='<a href="'+href+'">'+title+'</a>'+(sel?'<blockquote cite="'+href+'" title="'+title+'"><p>'+sel.replace(/(\r\n|\r|\n)+/g,'<br>')+'</p></blockquote>':'');prompt(r,r);})();

makeLink

選択箇所があればblockquoteも生成します。

Bookmarklet: Amazonアフィリエイトタグ生成rev.2

javascript:(function AmazonTag(aId,d,asin,title,r){d=document,asin=d.getElementById("ASIN").value,title=d.title.replace(/[&<>"']/g,function(m){return ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[m];}),r='<a href="http://www.amazon.co.jp/gp/product/'+asin+'?tag='+aId+'"><img src="http://images-jp.amazon.com/images/P/'+asin+'.09.MZZZZZZZ.jpg" alt="'+title+'" title="'+title+'"></a>';prompt(r,r);})("{yourAffiliateId}-22");

AmazonTag

Amazonの個別商品ページで使います。

CSS: emベースでのmax-widthをIE6のexpressionで

/* モダンブラウザ用 */
body {
  width: 95%;
  margin: 20px auto;
  max-width: 75em;
}

/* 最後にWinIE6用トリック(スターハック) */
* html body {
  width: expression(document.documentElement.clientWidth > parseInt(currentStyle["max-width"],10)*parseInt(document.documentElement.currentStyle.fontSize,10)*4/3 ? currentStyle["max-width"] : "inherit");
}

fontSizeはptベースで返ってくるので96dpiと想定して変換してます(*4/3のところ)。

互換モードの場合はdocument.documentElement.clientWidthdocument.body.clientWidthに置き換えます。

サンプルはdeadspaceを見てください。

付記

  • 試してませんが、min-widthも似た感じでできると思います
  • 最初から大きい文字サイズで見たときは95%になりますが、見ている途中で文字サイズを大きくしたり、ウィンドウサイズを小さくすると上手く機能しないという欠点を持ちます。一応リロードすれば直ります。
  • 大きい文字で見たいお年寄りのことも考えたほうがいいと思います

追記

標準モードならこういう書き方もアリです。

  width: expression((function(de,mw){return de.clientWidth > parseInt(mw,10)*parseInt(de.currentStyle.fontSize,10)*4/3 ? mw : "inherit";})(document.documentElement,currentStyle["max-width"]));

IE6でabbr要素を使えるようにする

元ネタはie7-js。JavaScriptを無効にしていると機能しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>ie6-abbr-fix</title>
<!--[if IE 6]>
  <script type="text/javascript">document.createElement("abbr");</script>
<![endif]-->
  <style type="text/css">abbr { background-color: yellow; }</style>
</head>
<body>
<h1>ie6-abbr-fix</h1>
<p>sample: <abbr title="abbreviation">abbr</abbr> element</p>
</body>
</html>

head要素内でdocument.createElement("abbr");を空呼びするだけで正しく認識される。

rb要素などにも応用できそう。

追記

はてなブックマーク - IE6でabbr要素を使えるようにする - mayokara note

ブックマークコメントでの指摘を参考に、conditional commentをIE6のみへのものに変更しました。

HTC: fix-ie-htc

fix-ie-htc

IE6の困ったところを直すHTCを書きました。

fix-ie-abbr.htc

abbr要素を使えるようにします。

fix-ie-lispace.htc

li要素が直後の空白テキストノードを取り入れてしまう問題を解決します。

注意

htc内でIEのバージョンを判定したりはしていないので、CSSトリックなどを利用して適用されるバージョンを絞り込んでください(たとえばIE6のみなら* html E {}のように)。

あと、必ず自分のサイトにアップロードしてご利用ください。