(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
+= ' | '
+ '<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>'
;
}
})();