17
Inside of SocialCount.info @ku_suke 第第第第第第第第第

Inside of social count

Embed Size (px)

DESCRIPTION

socialcount.infoを作ってみた

Citation preview

Page 1: Inside of social count

Inside of SocialCount.info@ku_suke

第一回このこん応募作品

Page 2: Inside of social count

What is Social Count ?ブログ記事などのソーシャルアクション数(はてぶ、faceboook 、 twitter 、 Google+ 、 Pocket )を合算することで、エントリに対するつながりを可視化するサービス。人気記事がわかるブログパーツもある。

Page 3: Inside of social count

Overviewフロントサーバ

静的コンテンツ・ブログパーツ

API サーバ集計済みデータの返却

バッチサーバ各ソーシャルデータの集計

Front server (共用鯖 + ストレージ)

API/Batch server  ( VPS )

image www widget

Node.js / express

Node.js batch

MyS

QL

5.5

(Perc

on

a)HandlerSocket

Plugin (NoSQL)

SQL query

Web APIs(Fb/Tw/G+..)

Page 4: Inside of social count

Service coreURL を受け取る     ↓各ソーシャルサービスに

件数を問い合わせる     ↓合算して保存     ↓返 却 !

SocialCount.info

URL

Page 5: Inside of social count

Why social count?技術ブログとアメブロを2つ書いてみて、はてぶ

と facebook の Like 、 Twitter への広がりが異なることに気づいた。

自分が掲載しているソーシャルボタン以外のアクション数には意外と気づきにくい。

ソーシャル上での盛り上がりを可視化することで、もっと読者と    ことができる。

Page 6: Inside of social count

技術的な話 -1Node.js を選んだ理由

HelloWorld くらいしか経験がなかったから遊んで見たかった。 (express/ejs/async… etc)

複数の外部 API への問い合わせを並列にリクエストできるから。(直列だと単純に5倍近くかかる)

API 提供を考えていたのでパフォーマンスが出そうだったから。

Page 7: Inside of social count

技術的な話 -2MySQL+HandlerSocket plugin にした理由

MySQL の扱いが楽+ SQL パーサを通さない高速動作

5.6+innoDB memcached plugin にしようとしたところ、namespace 利用時の挙動が安定しなかった 。

HandlerSocket が用意されている Percona 5.5 が楽ちんだった。

もちろん Node 用の npm もあった。

Page 8: Inside of social count

スケール案 -1スケールアップさせる。

(コンビニワインコース→ドンペリコース)

データがメモリに載る間はこれで問題なさそう。

Page 9: Inside of social count

スケール案 -2バッチサーバを分けるフロントの read は負荷が低いので

まずはこれでのりきる。Node.js

MySQL

Node.js Node.js

Page 10: Inside of social count

スケール案 -3フロントも厳しければ分離。

Node.js Node.js

MySQL SlaveMySQL Master

MySQL Slave

Node.js Node.js Node.js Node.js

Replicationなので簡単

Page 11: Inside of social count

その他サポートする技術

Git でデプロイNewrelic で監視Percona のツールでメンテ台数が増えたら Chef 化

Node.js

MySQL

Page 12: Inside of social count

ブログパーツ取得した URL をバッチで抽出し、記事のメタデータを取得しておいてブログパーツ化。

記事にアイキャッチ画像がある場合は表示するなどブロガーにはうれしい仕様。

Page 13: Inside of social count

ブログパーツのロードタイミングブログパーツの方式は大きく分けて2つ。 Iframe

型か、 document.write など直接書き込むタイプ。

Script の非同期ロードなど、ブログの表示速度を遅くしないことが重要。

今回は動作が安定している iframe 版を採用。( Twitter とか facebook も iframe だったので、 マネしとけば大丈夫だろうという考え。)

Page 14: Inside of social count

記事のタイトル・画像抽出最初正規表現で頑張ろうとした。

<title> タグにブログ名が入る問題。「 SocialCount を作った – ku-suke のブログ」

<og:image> タグが必ずしも入っていない問題。

さんざん悩んだ挙句、 ReadabilityAPI を利用。

https://www.readability.com/developers/api

Page 15: Inside of social count

サムネイル画像の配信そのままだとくそでかいので、いったんストレー

ジに保管+ nginx+ngx_small_light で動的縮小配信

元サイト AmazonS3互換ストレージ

ConoHa VPS

nginx +small_light

Page 16: Inside of social count

ぜひ使ってみてね!http://socialcount.info

Page 17: Inside of social count

おまけ: VPS の移行

Node.js

MySQL

Node.js

MySQL

せっかくなので、 ConoHa 契約してみた。別サービス間とはいえ国内なので、SSH でポートフォワーディングを張ったうえで、MySQL のレプリケーションはるだけ!

SSHTunnel