別冊はてな話 このページをアンテナに追加 RSSフィード

 | 

2007-05-03

はてブは「時系列まとめ」能力が惜しい

「もうちょっとこのアウトプットが簡単になればなあ〜」って言うのははてなダイアリーの時からさんざん書いているので、あんまり採用されないというのは分かっているのですが、Firefoxのツールなどで可能にしてくれる人が現れたりすることも期待しつつ……。

今年の1月、去年のスタッフ話をまとめた記事を書こうかなあと思って自分のはてブの「stuff」タグ(原文ママ)を掘り返してみたんですけども(別冊はてな話 - 去年「stuff」タグをつけた記事参照)。

もうそれをリストにするのに5時間ぐらいかかってしまって、そこからネタを見つけようとか、流れが出るように編集しようという気力が無くなってしまったのです(そのときにこの記事を書こうと決めたのですが、4ヶ月ダラダラしていました)。技術者の方ならもっといい方法があるかもしれませんけども、はてブの画面から手作業で記事のリストを作ろうとするとなかなか骨なんですね。

はてブは自分の過去ブックマークタグ別・ドメイン別・キーワード検索で、時系列に、簡単に「取り出す」ことができる便利さがあるわけですが、その結果アウトプットして見せる形にする機能は特にないんですよ。取り出した結果には固定URLがあるわけじゃないからリンクを張りにくいし*1、私のようなブクマ非公開ユーザーはもちろん公開できません。ちょっともったいない

「取り出した結果」を単純なリストにしてくれたり、はてなリスト記法に変換してくれる機能があるだけで、はてブはもっと時系列まとめを作成するツールとして重宝されるんではないかと思います。

今でもニュースサイトの人ははてブ注目エントリータグ検索したりして記事を集めてると思いますけども、記事作成がちょっとでも楽になるのは歓迎のはず。アクセス数を稼ぐ人たちがはてブをひいきにしてくれるのははてブにもいいことだと思うんですよねえ。というわけで

ちょっと飛躍した話をしますと、Wikiサービスと組み合わせれば「時系列まとめ」に特化できて売りになるでしょう。拙案ですが別冊はてな話 - パラレルWiki構想パラレルWikiができれば、時系列まとめの人によって違う編集をされたバージョン派生していったりして面白いかも。

追記:Greasemonkeyを書いていただきました

ありがとうございます! 試した所、

のように出力されて改行になりません。Macだからでしょうか。あまりユーザスクリプトを保存したことがなく、ユーザスクリプトコマンドも使っていなかったので導入でなにか間違えているのかもしれませんが……。

あとはてブ全体(の特にhttp://b.hatena.ne.jp/entrylist?下のページ)で同様のもの(bookmarkクラスの所がbookmark focusedクラスになっている)が可能でしたらそのバージョンがあるとありがたいです! 本当に、勉強してこのくらい書き換えられたらいいですねえ。

追記:使えました

コメントで教えていただいて使えるようになりました。お手間おかけしました。

最近のstaffタグブックマークエントリ

おおお、一発です。これは楽。(次の日さらに利用してみました)

追記:個人のページ以外に対応していただきました。

ありがとうございます! 感謝に堪えません!

一応、私と同じ環境MacOSXFirefox)の人のために導入手順を書きますと、

  1. グリースモンキー自体の導入方法ははてなグリースモンキー - グリースモンキーの使い方の「Greasemonkeyインストール」をどうぞ。ただし今回のようにページ上にユーザースクリプトファイルへのリンクが用意されていない場合は「ユーザースクリプトを追加する」以降の手順が違います。
  2. MORIYAMA Hiroshi's Diary - idea:15089を即席實裝のページで「ツール > Greasemonkey > 新規ユーザスクリプト」を選択。ポップアップが出るのでName欄を「hatenabookmark2text」、Namespace欄を「http://d.hatena.ne.jp/mhrs/」、後の欄を空白にして「OK」。
  3. Finderで、「Macintosh HD > ユーザーフォルダ > ライブラリ > Application Support > Firefox > Profiles > なんちゃら.default > gm_scripts」に「hatenabookmark2text.user.js」というファイルが出来ている。見つかりにくければ検索で探す。
  4. そのファイルを何かのテキストエディタで開く。それまでの内容は消して、MORIYAMA Hiroshi's Diary - idea:15089を即席實裝にある「// ==UserScript==〜」以下のコードを全部コピペする。
  5. コピペしたら保存する。ただし、Macバックスラッシュ問題というのがあって、バックスラッシュ(0x5C)がバックスラッシュ(0x80)に変換されない設定でなければならない。「テキストエディット」の場合は、環境設定で保存形式を一時的に「自動」でなく欧米(MacOS Roman)形式やUnicodeUTF-8)形式に変えてから保存する。
  6. セットアップ完了。はてブの新着エントリー人気エントリー、自分のブックマークページなどに行って「ツール > Greasemonkey > ユーザスクリプトコマンド > hatenabookmark2text」を選ぶと、ページの下の方にテキストエリアが現れてリスト記法が書き出される。

Windowsのほうは分かりませんけど、Greasemonkeyインストールと「新規ユーザスクリプト〜OK」までは同じで、その後「ツール > Greasemonkey > ユーザスクリプトの管理」で「hatenabookmark2text」を「編集」し、MORIYAMA Hiroshi's Diary - idea:15089を即席實裝コードコピペして閉じて、OKという流れで使えるようになるんじゃないかと思います。

(追記)about:configを利用したカスタマイズの説明追加

私でもわかるような、出力結果をカスタマイズする説明を追加してくださいました。詳しくはMORIYAMA Hiroshi's Diary - idea:15089を即席實裝の下の方をどうぞ。

(利用例)CSSでusers数部分のリンクの色を変える例

出力されたテキストテキストディタの検索置換機能などで「<a title="%ENTRY_PAGE_TITLE_HTMLIFIED%"」の部分が「<a class="focused" title="%ENTRY_PAGE_TITLE_HTMLIFIED%"」となるように変換。

ブログのスタイルシートに

a.focused {
  background-color: #ffcccc;
  font-weight: bold;
  font-style: normal;
  display: inline;
  color: red;
}

などのように記述すると、25 users のように。

*1:例えば昨日のDigg祭りタグ「digg」を含む注目エントリーからけっこう追えるけれどドンドン流れてしまうし、記事量が増えると単純リストアップも骨になってくる

sasadasasada2007/05/03 14:00これは、例えばはてブの設定画面からダウンロードできるatomフィードから指定したタグのデータだけ抜き出してリスト形式に直すスクリプトをPerlで書くとか、そんな話ですか? バリエーションとして、Atomフィードをブラウザで全読みできるくらいのマシンスペックを前提にグリースモンキーでリスト作れば良いのでしょうか?

sugiosugio2007/05/03 14:18ご質問ありがとうございます。できるかどうか分からないのですが、使い勝手としましては「今見ているはてブのページ」のリストを作成できるのが良いと思います。全体の新着エントリーや人気エントリーでも利用できますから。

sugiosugio2007/05/03 14:28CSSセレクタを交えて書きますとdiv.entry-bodyの中はいろいろ情報量が多いので、a.bookmark又はa.bookmark focused、strong a、年月日のところだけ抜き出して(リストはどういう書式が汎用性が高いのか悩みどころですが)、できれば過去のものが上に来るように並び替えて出力できれば、時系列まとめが簡単にできると思うのです。

sugiosugio2007/05/03 14:39↓こんなかんじの記事の作成を意識しています。

「涼宮ハルヒの憂鬱 オフィシャルサイト」における、消失ネタを巡る大まかな流れ(2) :Syu's quiz blog
http://www.syu-ta.com/blog/2006/12/19/212723.shtml

はてブを見て記事探索→速攻でまとめ記事作成→自ブログに貼付け→アクセスUPウマー という展開を……

sasadasasada2007/05/03 15:34なるほどなるほど。ふつーにグリースモンキーすれば良いと。
はてな様が対応してくれなければ、作っちゃおうかな。ってゆーか、作ってみませんか?(笑)

sugiosugio2007/05/03 16:14はー、そんなに簡単そうなものですか。JavaScriptですか。うーん、HTMLやCSS入門のときの自分の習得能力を考えちゃうと手が出ません……。

sasadasasada2007/05/03 17:41あー、先に作られちゃったー。ひそかに作りかけてたのに(笑)
でも、mhrsさんの方がかっこいいから結果オーライということで。f(^^;

改行は、listItemsToHatenaListMarkupWithHtmlAnchorTag関数の"\n"がだめなのかも。MacだしTextNodeだし。直すとすれば、"\r\n"だったか"\n\r"だったか。なんかそんな感じだと思います。
しかし、イマドキは皆$X()使うんですねー。確かに便利です。

mhrsmhrs2007/05/03 18:02もしかすると、コピー&ペーストか保存の際に、バックスラッシュが変換されて円記号になったのかも。30、51、53行目でバックスラッシュを使って居ますので、もし円記号(0xA5)になって居れば、すべてバックスラッシュ(0x5C)に直して保存してみてください(※Macの円記号問題については「mac バックスラッシュ 円記号」あたりで検索すると色々でてきます)。もしこれで駄目だったら、申しわけないですが私にはちょっと分らないです。

sugiosugio2007/05/03 18:23そうか、うちの環境で円記号に見える方が正しいわけですね。テキストエディットだとバックスラッシュに変換されてしまうようなのでmiで円記号に見える(0x5C)まま保存したらできました。ありがとうございます!

sugiosugio2007/05/03 18:26sasadaさん、陰の制作ありがとうございます!

sasadasasada2007/05/03 21:21いえいえ、お役に立てませんで。私の方こそ勉強させていただき、ありがとうございました(^^)

mhrsmhrs2007/05/04 09:58「全体の新着エントリーや人気エントリー」に対応しました。

sugiosugio2007/05/04 13:04ありがとうございます!

mhrsmhrs2007/05/05 18:18書式を指定して保存(一つだけですが)できる様にしました。詳しくは http://d.hatena.ne.jp/mhrs/20070503/p2 に書きましたのでそちらを。

sugiosugio2007/05/05 22:33おお、わかりやすいご説明。こんなに応用ができるとは。早速変更してみました。こちらの記事のCSSでカスタマイズする方法のほうも書き換えました。どうもありがとうございます!

 | 
日記内検索
カレンダー
<< 2007/05 >>
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Error : RSSが取得できませんでした。
画像置き場