2011年7月にリリースした、Twitter分析サイト「whotwi」を10月20日に4年ぶりにリニューアルしました。
リニューアル結果
リリース前後でエゴサーチしていましたが、以下のようなツイートが見られていて、リニューアルは大体成功したようです。
ちょいひさびさに見たら、whotwiページが劇的にデザイン見やすくなって綺麗になってた。
— しおのみち (@MSaminoe) October 21, 2015whotwiもう更新されないものだと思ってたけど今見てきたらデザイン更新されてて感動した
— くろっしい/Sou (@sh_crown) October 21, 2015ちなみに僕も、もう更新しないんじゃないかと思っていましたｗ
このリニューアルでPVなども1-2割上がったようです。 ちなみに2013年ころのピーク時は、月間700万PVくらいありましたが、今はだいぶ落ちました。この水準に戻って欲しい。。
というわけで、今回はwhotwiの変わった点・技術的な変更点について少し書いてみます。
変更点
AWSに完全移行
仕事でAWSを使ってからAWSが便利すぎてはまったので、ちょっと高くなりますが、AWSに移行しました。
AWSだからこれ、っていうのは使っていませんが。RDSのMySQLが動いているのと、ElastiCacheでRedisが動いているくらいです。 今はやっていませんが、今後ツイートの保存をやるときがきたら、DynamoDBを使うつもりです。
ちなみにもとはさくらVPSでした。さくらVPSのいいところはとにかく安い！というのと、日本語サポートがあって、なんかあったときの対応がしっかりしている、あたりですかねー。さくらのクラウド気になるな。
クラウドじゃないので単純比較はできないですが、サーバー1台あればいいというだけなら、やっぱりさくらVPSの方がいいですね。AWSは基本なんでも揃ってて、エンジニアとして使っていて気持ちいいけど、とにかく高い。
デザインの大幅変更
リニューアル前：
リニューアル後
リニューアル前は、なぜかコルクの背景にログが木目調という、とてもあたたかみのある（？）雰囲気だったのですが、個人的に古臭いなーと思っていたので、今回はこれはやめて、ライトブルーを貴重としたすっきりとした雰囲気にしてみました。
色合いについては、pixivをインスパイア参考にしました。
レイアウトは似ていますが、今回ゼロから書き直しました。書き直しながら、自分の書き方が汚いとか、 border-radius非対応端末はもうないか！と思ったりして、4年の時を感じました。
開発的なところでは、cssにSASS(scss)入れたり、SP版を作るのが面倒だったので、レスポンシブデザインにしたり、ボタンなどの要素を流用すべくTwitter Bootstrapを入れたりしました。
いやー本当に便利ですね、Twitter Bootstrap。そういえばこれ、名前がただのBootstrapになるらしいですね。ググラビリティが下がって微妙な気が。
バージョン管理など
またバージョン管理もなく、リリースもscpでやっていたので（ftpではないよ！ｗ）、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
これを書いた当時の僕はエンジニアのインターンをはじめたばかりで、コードが綺麗とかは頭になくて、とにかく動けばよかったんです（これは今でもそういう傾向があるかもｗ）。当時の判断はそれはそれで正しかったとは思います。ゴミはゴミですが。
今回、一大決心をし（笑）、その汚くて触りたくないゴミのようなソースコードをすべて投げ捨て、ゼロから書き直したという次第です。
今後の展望
今後ですが、ツイートの保存や、さらなる分析機能の強化など、進めていこうと考えています。 もしご意見ご感想がありましたら、このブログのコメントか、Twitter @whotwi までお気軽にどうぞ！
これからも、whotwi グラフィカルTwitter分析をよろしくお願いします！！
