読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

ホットエントリーを画面いっぱいに散りばめるChrome拡張をつくった

作品 tech

『HotWords』をリリースしました.

f:id:daiiz:20160304001448p:plain:w400

つくったもの

はてなブックマークのホットエントリーにランクインしている記事をRSSから取得して,記事のタイトルを単語っぽい区切りでバラバラにした後,ワードクラウドとして散りばめたもの.

非公式のChrome拡張機能です. chrome.google.com

単語をクリックすると,アプリヘッダのところに記事タイトルのリンクが表示され,それをクリックするとその記事へ遷移します.開発開始時は単語をクリックするだけで遷移させようとしていたのですが,あまり好ましくないと思えてきたのでタイトルを表示させてワンクッション置きました.

開発メモ

  • 単語を様々な大きさで散りばめる「ワードクラウド」の見せ方が魅力的だったので試してみたかったというのがきっかけ.
  • ワードクラウドを実現するにはd3.jsのd3.layout.cloud()を使用した.使い方はこちらのサンプルを参考にした.大変分かりやすい.
  • d3.scale.category20()を指定してやると,予めd3.js側で用意された20色の配色を使うことができるので便利.
  • 最初はkuromoji.jsで記事タイトルを形態素解析することに挑戦した.Javaで使った時と同様に,JSでも簡単に実行できて感激した.辞書関連の読み込み処理やファイルサイズが少し重かったので今回リリースしたバージョンではまだ使用していない.
  • 代わりに,分かち書きを行ってくれるTinySegmenterを使用した.品詞分類が行えないため「が」「を」「、」のようなものも出てきてしまうので,雑だけど,一文字なものは除外ということにした.
  • 文字の大きさはランダム(はてブ数などに依らないで完全にランダム)
  • 仕上げとして,カテゴリ「総合」だけでなく普段よく見るはてなブックマークカテゴリを選択できるよう,右上にセレクトボタンを置いた.

おもしろさ

  • 単語から記事を探す新体験
  • 気になる単語をクリックしてみると,ほとんどのケースで予想しているタイトルと異なるタイトルが出てきておもしろい
f:id:daiiz:20160304003321p:plain:w64
30分かけて描きました.かわいい