アナログ
RSS  

PDFをGoogle docs経由で開くユーザスクリプトの微調整2010/03/22 22:33

アイコンだらけに
よく貼るリンクにアイコンが表示されるようにしたら大変なことにw

これは全部私が悪いわけで、本来アイコンを表示するリンクはクラスを別に設定するべきなのですが、それだと昔の記事のリンクまでクラスを書き加えないといけないのでデフォルトにアイコンを設定してしまいました。

分かっていたとは言えこれは酷いw
というわけで、クラスを設定する以外の手段でなんとかすることにしました。

ここから先はPDFをGoogle docs Viewer経由で開くアイコンを挿入してみた(以下スクリプトの名前を「PDFgd」と略します)を使ってる人にしか関係ない話になります。

最初の画像を少し解説すると、PDFgdで置き換えられたリンクをブログに貼ってブログを表示したら、PDFgdで再度置き換えが発生してアイコンが増えたところに、docs.google.comとadobe.comのfaviconが挿入されてカオス状態になったものですw

それとサイトによっては元のリンクを表すアイコンが変な位置に表示されてしまう
アイコンの位置がおかしい
のでそれも修正してみました。

このスクリプトは、PDF/PPT/TIFのリンクをGoogle docsで開くように書き換え、書き換え前のリンクをPDFアイコンで表示するものです。参考:PDFの表示あれこれ
// ==UserScript==
// @name           PDF/PPT/TIF viewer with Google docs
// @namespace      http://puppet.asablo.jp/blog/2010/03/22/4964699
// @include        http://*
// @exclude        http://docs.google.com/*
// ==/UserScript==
// Based on script by Koonies (http://d.hatena.ne.jp/Koonies/): http://userscripts.org/scripts/show/59557

(function(){
  if (location.href.indexOf("http://docs.google.com/") == -1) {
    var l = document.getElementsByTagName("a");
    var i = l.length;
    while (i--) {
      if ((l[i].href.match(/^[^?]+\.(pdf|ppt|tif)$/))
       && (l[i].href.indexOf("http://b.hatena.ne.jp/entry/") == -1)
       && (l[i].className != 'ujspdflk')) {
	var logo = document.createElement("img");
	logo.src = 'data:image/gif;base64,R0lGODlhEAAQAPMAAACh6P///3BvbtpEQt+Wld5+fNQqJ+PIxu/X1tqwrq49O9doZsfHx6RST4eHh/Dp6SH5BAEAAAAALAAAAAAQABAAAARbEMhJqxQ4a0xF+GDICJMXnsx4nQFSICAJmCFREPF6HgP+ybTQ4JCbsQIGAzEAZCUIhOFDgDCeConAIKkoWEOLxWBBSCgI309hgC3SeANYCJgxKBqOjYwSrVoAEQA7';
	logo.border = 0;
	logo.style.margin = '0';
	logo.style.padding = '0';
	var orgpdf = document.createElement("a");
	orgpdf.href = l[i].href;
	orgpdf.className = 'ujspdflk';
	orgpdf.insertBefore(logo, orgpdf.firstChild);
	l[i].href = 'http://docs.google.com/viewer?url=' + l[i].href;
	l[i].target = '_blank';
	l[i].parentNode.insertBefore(orgpdf, l[i].nextSibling);
      }
    }
  }
})();
10.05.01 Firefox 3.5以降用の高速(querySelector)版もあります。

そもそも元の考え(PDFgdで変換したリンクを貼るということ)が間違っていますので、対処も間違った方法(クラスが「ujspdflk」なら置き換えない)で訂正してます。

あとはブログのCSSで「ujspdflk」のクラスにアイコンを表示しないようにするだけです。
.msg-body a.ujspdflk{background:none;padding:0;}

余計なこと(クラスを指定)するなというなら
      if ((l[i].href.match(/^[^?]+\.(pdf|ppt|tif)$/))
       && (l[i].href.indexOf("http://b.hatena.ne.jp/entry/") == -1)
       && (l[i].className != 'ujspdflk')) {      if ((l[i].href.match(/^[^?]+\.(pdf|ppt|tif)$/))
       && (l[i].href.indexOf("http://b.hatena.ne.jp/entry/") == -1)) {
に修正して
	orgpdf.className = 'ujspdflk';
の行を削除します。

さらにはてなブックマークにPDFが登録されると困ったりの対処が不要なら
      if ((l[i].href.match(/^[^?]+\.(pdf|ppt|tif)$/))
       && (l[i].href.indexOf("http://b.hatena.ne.jp/entry/") == -1)) {      if (l[i].href.match(/^[^?]+\.(pdf|ppt|tif)$/)) {
に修正します。

それと、Google Docsを別タブで開くのが嫌な場合
    l[i].target = '_blank';
を削除します。

ちなみに実際に使ってるソースではブログに貼ることを考えて
logo.src ='http://puppet.asablo.jp/blog/img/2010/03/22/ef6b9.gif';
としています(元から間違ってるのでのでキニシナイw)


余談ですが、アイコンの表示位置がおかしくなる件がCSSのmarginによるもの(念のためpaddingも0にするようにしました)だと気が付くまでにずいぶん試行錯誤してしまいました。orz

おかげでstyleの記述が微妙に違うと知ったので覚書(でも多分もう使わないw)
hoge.style.height = '16px'、.style.marginLeft、.style.backgroundImageとか
orgpdf.appendChild(document.createTextNode("~"));でテキストが挿入できたり知らないことがたくさん。

あと、クラスの指定(上のスクリプト内className)も予約語とかぶるので違ってたりと、知らないと大変だったり。


というわけで間違いだらけの対処法でしたが、最後に一言。

最大の間違いは知りもしないJavaScriptをいじってることですね。

ええ分かってます。私しか使ってないでしょうからこれでいいんです(爆)

コメント

_ G`nome ― 2010/03/22 23:02

お疲れ様です~(楽しんでみています!)
padding使うと「故」IE6 で見たとき大変なことになりますが、キニシナイ(笑)
自分も何か良い方法ないかな~とか考えてはいるのですが、結局、CSSでやるのをあきらめて手動で挿入しています(旧式!)

_ puppet ― 2010/03/22 23:36

いつもお世話になってます。

|padding使うと「故」IE6 で見たとき大変なことになりますが、キニシナイ(笑)

このブログはCSS3も使ってるので『何も』キニシテナイ(笑)です。
そのうち「故」IE6ではまともに読めなくなるかもw しかたないね!


|手動で挿入しています(旧式!)

エエエエェェェェ(゜Д゜;)ェェェェエエエエ
驚愕の事実!(アレどうやってるのだろうと思ってたんです)
エディタのマクロで自動挿入でも厳しいと思ってたのに……これはマネできない。

たかがアイコン画像を用意するだけでダレてます。orz

それとCSSの問題だとわかるまでG`nome様のサイトをいっぱいリロードしてしまいました(爆)
なにか統計の邪魔になったら、ごめんなさい。m(_ _)m

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
スパムがウザイので合い言葉を入れるようにしました。山と言えば川だろJK


コメント:

トラックバック

このエントリのトラックバックURL: http://puppet.asablo.jp/blog/2010/03/22/4964699/tb

※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。