Trueflowの手引きWebにはてなブックマーク被Users表示をつける改良案と、User JavaScript

Tweet

（2008-3-30 23.23追記）

大日本スクリーン様のサイトの方で、このエントリと同等の改善がなされていました。下記を参照してください。

出力の手引きWeb はてなブックマーク対応：大日本スクリーン製造株式会社 メディアアンドプレシジョンテクノロジーカンパニー

つきましては、本エントリで示した User JavaScriptはもう使用しなくていいので、外してください。

※大日本スクリーン様へ：このblogで掲載させていただいているスクリーンショットは、貴社のページを書き換える改造ではなくて、ブラウザ側で書き換える拡張を使い、実現しています。

---

ちまた（どこのちまただ）では、オンラインブックマークが一般ユーザに普及していないことが話題になっていますが、一般ユーザ向け以前に企業のページにも使われていないので、積極的に企業のページに組み込まれているといいと思いました。

特に、2月9日に公開された「Trueflowの手引きWeb [www.screen.co.jp] 」には、付いていた方がいいと思い、勝手に改良案を出してみます。

---

まず、改変前のページ。

▲できたてほやほやの「Trueflowの手引きWeb」（クリックで拡大）

このページは、blogシステムで構築されていて、記事の最後に、[固定リンク]という、この記事を指し示すURLが用意されているので、オンラインブックマークでブックマークしやすい構造になっています。

また、その横に、[この記事を共有] なるリンクがあり、ここをクリックすると、この記事のアドレスを他の人にメールで送信できる仕組みになっており、情報の共有と拡散を意図しているものと考えられます。

ここで、僕はオンラインブックマークとして、大日本スクリーンがある京都が創設の地で、このたび本社が京都に移設される株式会社はてなの「はてなブックマーク」を組み込んでみようと思います。

もうすでに組み込んだものがありますので、こちらをご覧下さい。

▲「Trueflowの手引きWeb」はてなブックマーク組込み案（クリックで拡大）

詳しく見ていきますと、「Trueflowの手引きWeb」とタイトルになっているところに、赤い文字で「」と書いてありますが、これが、「Trueflowの手引きWeb」トップページをブックマークしてくれた人たちの人数です。

次に、記事のタイトルの、「2008年02月20日 ｜ 特色への透明効果」の横が「」となっていますが、これが、この記事をブックマークしてくれたユーザ数になります。

最後に、記事のフッタに、「この記事をブックマーク（はてな）」というリンクができており、これをクリックすると、この記事をはてなブックマークでブックマークすることができます（はてなへの登録が必要）。

では、記事のタイトル脇の「」をクリックしてみましょう。

▲被ブックマーク数表示「」をクリックしてみます。

クリックすると、はてなブックマークのページが表示され、もとのページに対し、はてなブックマークのサービスで付加された情報が表示されます。

▲はてなブックマークでの「2008年02月20日 ｜ 特色への透明効果」記事のブックマーク状況（クリックで実際のページへ）

はてなブックマークのページの下部には、公開設定でブックマークした人のID（ニックネームのようなもの）、コメントがあればコメントが書かれています。

▲C_Lさんがコメントを書いてくれています

---

はてなブックマークでブックマークされることは、ただ単にはてながつながれば自分のブックマークをどこでも見られる、ということ以上の意味があります。

はてなブックマークのブックマーク内容は、ブックマークした人が公開設定にしていれば、公開され、情報が共有されていますので、他の人が同様にブックマークしたものも、見ることができます。

例えば、Trueflowに関心のある人がブックマークしたと思われるブックマーク一覧も見ることができます。下記アドレスをクリックして、実際にご覧下さい。

はてなブックマーク - タグ trueflow:「trueflow」を含む注目エントリー
http://b.hatena.ne.jp/t/trueflow

はてなブックマーク - タグ trueflow:タグ「trueflow」を含む新着エントリー
http://b.hatena.ne.jp/t/trueflow?sort=eid

これは、ブックマークしたときに、「タグ」として「trueflow」という文字列を設定した人のブックマークを集計したものです。このような手法は、フォークソノミーと呼ばれていて、情報の分類・整理が共同作業で行われる新しい形として注目されています。

フォークソノミー - Wikipedia [ja.wikipedia.org]

---

ここまでやってきた中で、現在の「Trueflowの手引きWeb」には、はてなブックマークが組み込まれていませんので、「できたらいいなー」という空想論でしかありませんでした。しかし、これをユーザ側で実現する方法があります。

インターネットブラウザFirefoxでは、Greasemonkeyという機能拡張を使い、Greasemonkey scriptというファイルをあてがうことで、既存のWebサイトに機能を追加することができます。また、同じくインターネットブラウザのOperaにも、ユーザーJavaScriptファイルを使用する機能が標準で付いており、同様に機能を追加できるのです。

今回は、Operaで動作確認をしているUser Javascriptを用意いたしました（Firefox + Greasemonkeyがいまなぜか動かないので）。次のリンクを「名前をつけて保存」してください。

「tfweb_addhatebusers.user.js」をダウンロード

// ==UserScript==
// @name           TFWeb_AddHateBUsers
// @namespace      http://blog.dtpwiki.jp/dtp/
// @author         CL
// @include        http://www.screen.co.jp/ga_dtp/dtp/*
// @exclude        http://*http://
// ==/UserScript==
// Version 0.0  2008.02.21 最初のリリース
 
(function() {
  // 大日本スクリーンTrueflow出力の手引きWebのURL
  var rootUrl = 'http://www.screen.co.jp/ga_dtp/dtp/';
  // Users 表示のHTMLを生成する関数
  var hatebHtml = function (href) {
    return ' '
         + '<span style="width: 48px; height:15px;'
         + ' background-color:white;'
         + ' text-align: center; position: relative;'
         + ' font-size: 12px;">'
         + '<a href="http://b.hatena.ne.jp/'
         + 'entry/'
         + href
         + '" target="_blank">'
         + '<img src="http://b.hatena.ne.jp/'
         + 'entry/image/large/'
         + href
         + '" '
         + ' style="vertical-align: top; border: 0;" />'
         + '<span style="position: absolute;'
         + ' z-index:-1; left: 1;">0Users</span>'
         + '</a></span>'
         ;
  }
  // h1の横に出力の手引きWebの被リンク数表示
  var elmH1 = document.getElementsByTagName('h1')[0];
  var str   = hatebHtml(rootUrl) + " ";
  var str2  = elmH1.innerHTML;
  str2 = str2.replace('Web','Web ' + str );
  elmH1.innerHTML =str2;
  
  // h2(エントリタイトル)の横にエントリの被リンク数表示
  var arrayH2s = document.getElementsByTagName('h2');
  var arraySpanDtpnotes = [];
  var arraySpans = document.getElementsByTagName('span');
  for ( var i = 0; i < arraySpans.length; i++) {
    var elm = arraySpans[i];
    if ( elm.getAttribute('class') == 'dtpnote' ) {
      arraySpanDtpnotes.push(elm);
    }
  }
  var arrayAPermalink = [];
  for ( var j = 0; j < arraySpanDtpnotes.length; j++) {
    var arrayAs = arraySpanDtpnotes[j]
                    .getElementsByTagName('a');
    for ( var i = 0; i < arrayAs.length; i++ ) {
      var elm = arrayAs[i];
      if ( encodeURI( elm.innerHTML )
        .match( '%E5%9B%BA%E5%AE%9A%E3%83' 
                + '%AA%E3%83%B3%E3%82%AF') ) {
        arrayAPermalink.push( elm );
      }
    }
  }
  for ( var i = 0; i < arrayH2s.length; i++ ) {
    var permalink = arrayAPermalink[i].getAttribute('href');
    arrayH2s[i].innerHTML += hatebHtml( permalink );
    arraySpanDtpnotes[i].innerHTML
      += ' &#65372; '
        + '<a href="http://b.hatena.ne.jp/append?'
        + permalink
        + '" target="_blank" >'
        + decodeURI('%E3%81%93%E3%81%AE%E8%A8%98%E4'
          + '%BA%8B%E3%82%92%E3%83%96%E3%83%83%E3%82'
          + '%AF%E3%83%9E%E3%83%BC%E3%82%AF%EF%BC%88'
          + '%E3%81%AF%E3%81%A6%E3%81%AA%EF%BC%89')
        + '</a>'
    ;
  }
})();

2008.02.21 15:18 投稿　大野 義貴 [DTP] | 固定リンク |