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

koni blog

東京のウェブエンジニア koni です!ウェブサービスをガシガシ作っていきます!

whotwiをリニューアルしました!そしてAWSに移行しました!

whotwi

2011年7月にリリースした、Twitter分析サイト「whotwi」を10月20日に4年ぶりにリニューアルしました。

当時のブログ記事

リニューアル結果

リリース前後でエゴサーチしていましたが、以下のようなツイートが見られていて、リニューアルは大体成功したようです。

ちなみに僕も、もう更新しないんじゃないかと思っていましたw

このリニューアルでPVなども1-2割上がったようです。 ちなみに2013年ころのピーク時は、月間700万PVくらいありましたが、今はだいぶ落ちました。この水準に戻って欲しい。。

というわけで、今回はwhotwiの変わった点・技術的な変更点について少し書いてみます。

変更点

  • AWSに完全移行
  • デザインの大幅変更
  • グラフにhighchartを導入
  • エラーを極力減らす
  • バージョン管理とかちゃんとする
  • スピードアップ
  • ツイート画面をjsでなく、ページに表示するよう変更

AWSに完全移行

仕事でAWSを使ってからAWSが便利すぎてはまったので、ちょっと高くなりますが、AWSに移行しました。

AWSだからこれ、っていうのは使っていませんが。RDSのMySQLが動いているのと、ElastiCacheでRedisが動いているくらいです。 今はやっていませんが、今後ツイートの保存をやるときがきたら、DynamoDBを使うつもりです。

ちなみにもとはさくらVPSでした。さくらVPSのいいところはとにかく安い!というのと、日本語サポートがあって、なんかあったときの対応がしっかりしている、あたりですかねー。さくらのクラウド気になるな。

クラウドじゃないので単純比較はできないですが、サーバー1台あればいいというだけなら、やっぱりさくらVPSの方がいいですね。AWSは基本なんでも揃ってて、エンジニアとして使っていて気持ちいいけど、とにかく高い。

デザインの大幅変更

リニューアル前: f:id:konisimple:20151125004838p:plain

リニューアル後 f:id:konisimple:20151125004834p:plain

リニューアル前は、なぜかコルクの背景にログが木目調という、とてもあたたかみのある(?)雰囲気だったのですが、個人的に古臭いなーと思っていたので、今回はこれはやめて、ライトブルーを貴重としたすっきりとした雰囲気にしてみました。 色合いについては、pixivインスパイア参考にしました。

レイアウトは似ていますが、今回ゼロから書き直しました。書き直しながら、自分の書き方が汚いとか、 border-radius非対応端末はもうないか!と思ったりして、4年の時を感じました。

開発的なところでは、cssにSASS(scss)入れたり、SP版を作るのが面倒だったので、レスポンシブデザインにしたり、ボタンなどの要素を流用すべくTwitter Bootstrapを入れたりしました。 いやー本当に便利ですね、Twitter Bootstrap。そういえばこれ、名前がただのBootstrapになるらしいですね。ググラビリティが下がって微妙な気が。

バージョン管理など

またバージョン管理もなく、リリースもscpでやっていたので(ftpではないよ!w)、gitを入れたり、ピュアPHPのみ(カオスなオレオレフレームワーク的なもの)から、ちゃんとしたフレームワークPHPのCodeIgniterにしました)使うようにし、負債を一掃しました。

エラーが頻発問題

Twitter APIを叩くときは、Twitter APIからもらえるAccessTokenというのを使うのですが、これが無効になってしまっていたりするとエラーになってしまいます。TwitterのAccessTokenはFacebookなどと違い、有効期限はないので、Facebookよりは管理は楽なのですが、それでも、アカウント削除や、アプリ連携解除などで、徐々に使えなくなっていきます。

かつてのロジックはこの無効だったときのエラーの処理が一切なかったので、時間が経つにつれ、徐々にエラーが増えてしまいました。 Googleに「whotwi 」と入れると、「whotwi エラー」がsuggest されるくらいでした。

今まで200万アカウント以上でログインがあったのですが、1年以上前のものは無効になっているものが多いです。

高速化

以前のサイトでも内容はキャッシュしていたので、同じURLの二度目のアクセスはかなり早かったのですが(しかもフレームワークなどない、ピュアPHPで書かれていたので、オーバーヘッドは全然ない。コードは読めないけどw)、ファイルにキャッシュしていて、そのキャッシュを消す機構があまりちゃんと動いていなくて、ディスクフルになってしまったり、などの問題があって、ちゃんと動いていないことが多々ありました。

今回こちらは、AWSのElastiCache(redis)に移行し、この問題は完全解決しました。

ツイート画面のjsでの表示をやめる

検索結果からの流入も結構多いので、SEO対策の第一歩として、ツイートをjsで出していたのですが、これをHTMLに乗せて配信するように変えました。見た目は同じですが、検索エンジンフレンドリーになりました。 リニューアルから1ヶ月ほど立ちますが、検索流入が1,2割増えているのに、効いていそうです。今後は、ツイートを月別に見られるようにしてテキストとページ増やしたり、各数値ごとのユーザーランキングを出して内部リンク増やしたりと、SEOを意識した施策をうっていくつもりです。

なぜ今リニューアルしたのか(なぜ放置してしまったのか)

上記改善したところは、いままで問題があると認識はしていて、「時間があれば直したいなー」と心のどこかで思っていました。

ただこのサイトは僕が大学4年生のときに、PHPをかじりながら、APIと戯れながら趣味で作ったものなので、ソースコードがもう本当に汚く、僕がエンジニアとして成長していくにつれ、徐々に触りたくないものになってしまいました。 エンジニアたるもの、成長に連れて昔のコードが陳腐に見えて、触りたくない、というのはよくある現象ですよねw

これを書いた当時の僕はエンジニアのインターンをはじめたばかりで、コードが綺麗とかは頭になくて、とにかく動けばよかったんです(これは今でもそういう傾向があるかもw)。当時の判断はそれはそれで正しかったとは思います。ゴミはゴミですが。

今回、一大決心をし(笑)、その汚くて触りたくないゴミのようなソースコードをすべて投げ捨て、ゼロから書き直したという次第です。

今後の展望

今後ですが、ツイートの保存や、さらなる分析機能の強化など、進めていこうと考えています。 もしご意見ご感想がありましたら、このブログのコメントか、Twitter @whotwi までお気軽にどうぞ!

これからも、whotwi グラフィカルTwitter分析をよろしくお願いします!!