blogopolisの裏側
TRANSCRIPT
![Page 1: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/1.jpg)
logopolisの裏側
浜本 階生
![Page 2: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/2.jpg)
自己紹介• 浜本 階生(はまもと かいせい)
• http://d.hatena.ne.jp/kaiseh/
• S2Swingのコミッタ
• 共訳『実用 Subversion 第2版』(オライリー・ジャパン)
![Page 3: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/3.jpg)
Blogopolisとは?
アルゴリズム
インフラ
テーマ
![Page 4: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/4.jpg)
Blogopolisとは?
![Page 5: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/5.jpg)
動機
![Page 6: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/6.jpg)
特定分野に的を定めてPageRankでは得られない新たな価値を提供する
情報検索システムを作りたい
ブログ
![Page 7: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/7.jpg)
ブログとソーシャルデータ
記事のテーマ
ブログのオーソリティ
記事の反響度
ブログ
記事
ブックマーク
タグ
RSS購読者
*
*
*
*1
1
1
1
この構造を活用したブログ検索システムが
存在しない
![Page 8: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/8.jpg)
情報のトレードオフ
概略化
詳細化
今日の多くのUIがカバーできていない領域
![Page 9: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/9.jpg)
情報粒度の断絶を解く「流れるようなUI」を作りたい
![Page 10: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/10.jpg)
http://blogopolis.jp/
![Page 11: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/11.jpg)
運用状況
![Page 12: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/12.jpg)
mod_proxy_balancer
サーバ構成
全文検索
SolrRAM: 1.5GB
APサーバ
TomcatRAM: 3.2GB
DBサーバ
MySQLRAM: 4GB
Webサーバ
ApacheRAM: 512MB
APサーバ
TomcatRAM: 3.2GB
Xen Server (4 CPUs)OSはすべてCentOS 5.3
![Page 13: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/13.jpg)
コード規模
2009/9/8 現在
クラス数 ステップ数
Java 359 30,000
AS3 73 6,000
計 432 36,000
* TopHatenarを含む
*
![Page 14: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/14.jpg)
データ規模ブログ数 23万
記事数 30万
頂点数 430万
多角形数 105万
データベースサイズ 9GB (dump)
2009/9/8 現在
![Page 15: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/15.jpg)
アルゴリズム
![Page 16: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/16.jpg)
処理の流れ
1. ブログコンテンツとソーシャルデータの収集
2. ブックマークタグに基づくブログのクラスタリング
3. クラスタリング結果の2次元平面へのマッピング
今日のトピック
![Page 17: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/17.jpg)
クラスタリング
![Page 18: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/18.jpg)
はてなブックマーク
ブックマークタグ
![Page 19: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/19.jpg)
タグの集計
IT business 仕事 ...
id:higayasuo 333 302 386
id:fromdusktildawn 1301 68 2077
id:kawango 634 266 18
![Page 20: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/20.jpg)
K-means法
• 非階層的なクラスタリング手法
• あらかじめクラスタの個数を決めてデータを分類
• 高速に計算可能
![Page 21: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/21.jpg)
階層的クラスタリング
• 位置の近いクラスタ同士を再帰的に統合
• クラスタ階層のツリー(デンドログラム)が生成される
• 計算量が大きい
![Page 22: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/22.jpg)
K-means法の適用• 各ブログをデータ点とし、タグの出現頻度をその成分とする
IT business 仕事 ...
id:higayasuo 333 302 386
id:fromdusktildawn 1301 68 2077
id:kawango 634 266 18
p0
p1
p2
![Page 23: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/23.jpg)
階層的クラスタリングの適用
• K-means法の実行結果として得られたブログクラスタの集合を入力とする
社会 経済IT business 仕事
![Page 24: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/24.jpg)
ボロノイ図
![Page 25: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/25.jpg)
ボロノイ図
![Page 26: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/26.jpg)
ボロノイ図の性質
ボロノイ辺は母点の垂直二等分線
![Page 27: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/27.jpg)
ボロノイ図の一般化• 通常のボロノイ図
• Additively Weighted Voronoi Diagram
• Additively Weighted Power Voronoi Diagram
![Page 28: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/28.jpg)
Centroidal Voronoi Tessellationwith Additively Weighted Power Voronoi Diagram
http://www.vimeo.com/6551478にアップしました
![Page 29: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/29.jpg)
Voronoi Treemap
![Page 30: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/30.jpg)
Voronoi Treemap
![Page 31: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/31.jpg)
Voronoi Treemap
![Page 32: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/32.jpg)
Voronoi Treemap
![Page 33: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/33.jpg)
Voronoi Treemap
![Page 34: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/34.jpg)
Voronoi Treemap
![Page 35: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/35.jpg)
計算幾何• 多角形の包含判定、面積計算、重心計算、切断など
• java.awt.geomだけでは対応できない
• サーバサイドとFlashの両方で必要
• 幾何ライブラリを自作
![Page 36: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/36.jpg)
3D
![Page 37: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/37.jpg)
Papervision3D
• AS3で書かれたFlash用3Dエンジン
• 高速に動作(要チューニング)
• QuadTreeレンダラをサポート
‣ ポリゴンの前後関係を正確に描画可能
http://code.google.com/p/papervision3d/
![Page 38: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/38.jpg)
3D化にあたって
• 「いかにも3D」な無機質の雰囲気は避けたい
• ブログは人が書いているものだから「人の温もり」を出したい
![Page 39: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/39.jpg)
トゥーンレンダリング
• 色調の単純化
• 輪郭線
(Wikipediaより)
![Page 40: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/40.jpg)
シェーディング (1)
WireframeMaterial
![Page 41: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/41.jpg)
シェーディング (2)
PhongMaterial
![Page 42: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/42.jpg)
シェーディング (3)
PhongMaterial + 地表
![Page 43: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/43.jpg)
シェーディング (4)
自作マテリアル(トゥーンレンダリング風)
![Page 44: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/44.jpg)
シェーディング (5)
完成形
![Page 45: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/45.jpg)
インフラ
![Page 46: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/46.jpg)
データの扱い
![Page 47: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/47.jpg)
グリッドシステム
地表 + 幾何
地表
地表 + 幾何 + 3D
(0, 0)
![Page 48: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/48.jpg)
ポリゴンインデックス
• 全ポリゴンのID, 外接長方形座標, 面積等をメモリに保持 → 100MB程度
• クエリ(座標範囲)に適合する全ポリゴンIDを返す
• クエリに応じて最適な二分探索を選択 (座標ベース/面積ベース)
![Page 49: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/49.jpg)
GNU Trove
• プリミティブコレクションライブラリ‣ ex. TIntArrayList, TIntHashSet,
TIntDoubleHashMap
• オープンアドレス法• あらゆる場面で大活躍
http://trove4j.sourceforge.net/
プリミティブ型の全組み合わせに対応!
![Page 50: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/50.jpg)
ベンチマーク
Memory (MB)
0 20 40 60 80
java.util.HashMap<Integer, Integer>gnu.trove.TIntIntHashMap
Speed (ms)
0 200 400 600 800 1,000 1,200
100万個のエントリーをput
![Page 51: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/51.jpg)
Ehcache
• 汎用キャッシュエンジン• JCache (JSR 107)の実装としても利用可能
• Blogopolisでの動作状況‣ キャッシュヒット率: 66%程度(TopHatenarは90%程度)
http://ehcache.org/
![Page 52: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/52.jpg)
Adobe Flex S2Flex2の採用
![Page 53: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/53.jpg)
S2Flex2
• AMF3を独自実装
• Flex 3以降でも使える
• JavaとAS3でPOJOを用意してServiceをコールするだけ!
• BlazeDSと違って設定不要
![Page 54: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/54.jpg)
ByteArray (Flex)
• プリミティブ値や文字列をバイト列にシリアライズ/デシリアライズ
• さらにZLIB圧縮可能
• 座標値など、肥大化しやすいデータの送受信にフル活用
![Page 55: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/55.jpg)
WebフレームワークCubbyの採用
![Page 56: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/56.jpg)
Cubby
• 軽量、簡潔、ハマりがない• 多様なレスポンスを奇麗に書ける
標準装備 Forward, Redirect, JSON, etc
+自作 Plain Text, Image, Permanent Redirect
jQuery Autocompleteテクスチャ画像
SEO
![Page 57: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/57.jpg)
http://d.hatena.ne.jp/higayasuo/20080106/1199620097
『Strutsにこだわりのない方なら、Cubby
はすごくお勧めです。Struts抜きで自由にWebフレームワークを作ってもいいといわれたら、Cubbyみたいなやつを作りたかった気がする。』
ひがさんの言及
![Page 58: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/58.jpg)
データベースS2JDBCの採用
![Page 59: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/59.jpg)
jdbcManager.from(RegionImage.class)
.where(”zoom = ? and x = ? and y = ?”,
zoom, x, y)
.getSingleResult();
タイプセーフ
可変長引数
S2JDBC
![Page 60: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/60.jpg)
S2JDBC
• メリット‣「1回限り」のSQLを気軽に組める
• デメリット‣ SQLが散逸しやすい
![Page 61: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/61.jpg)
全文検索Apache Solrの採用
![Page 62: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/62.jpg)
Apache Solr
• Javaの全文検索サーバ
• Apache Luceneがベース
• HTTPのAPI
• 言語を問わず利用可能http://lucene.apache.org/solr/
![Page 63: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/63.jpg)
Solrの使用• マルチコア(マルチスキーマ)を利用‣ ブログタイトル用スキーマ‣ 記事本文用スキーマ
• CJKAnalyzer(bi-gram)を使用
• URL検索用のトークナイザを自作
• 元データはMySQLに保存
![Page 64: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/64.jpg)
稼働状況
• インデックスサイズ‣ ブログタイトル: 63MB
‣ 記事本文: 1.6GB
• 応答時間: 数百ms以内
![Page 65: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/65.jpg)
Solr雑感
• Luceneの単独使用に比べて圧倒的に簡単、便利!
• スキーマの設計によってはパフォーマンスが大きく低下するので注意が必要
![Page 66: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/66.jpg)
まとめ
![Page 67: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/67.jpg)
まとめ
• ソーシャルデータを活用したブログ検索システム
• 情報粒度の壁を打ち破るUIの追求
• S2Flex2, Cubby, S2JDBC, Apache Solr
![Page 68: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/68.jpg)
今後の課題
• 現状は「検索」よりも「探索」に近い
→ 検索の実用性を向上
• 時系列やカンバセーションの視覚化
• コミュニティの醸成
![Page 69: Blogopolisの裏側](https://reader033.vdocuments.pub/reader033/viewer/2022052411/5565f7e7d8b42a2a4d8b47c1/html5/thumbnails/69.jpg)
最後に
Blogopolisの開発の支えとなっている
OSSとコミュニティの皆様に
心から感謝します