優々自適

つくったことや読んだことをまとめる場所

マイクロブログCMSを3日でたててみた話

3日でというのは何もミサワ感を出したかったわけではない。
赤ん坊片手に作業するのは3日が限界で、それ以上かかるようならやめようと思っていた。

模倣したサービスはママツイという、ママに特化したTwitter。クローズを嘆くユーザがたくさんいたので、簡単にできるようなら逃げ場を作ろうかなと思った。ベースはTwitterなわけだからきっとCMSぐらいいっぱいあるだろうと。そしたら案外さくっと立てられるのでは？と。
もちろんそんな簡単な話ではないのだけど、何かを作ることに飢えていた私は期限を設けてやってみることにした。
※簡単に、ママツイとは…”いいね”の代わりに”応援する”、”ありがとう”返しがある、ユーザ層に特化した柔らかなUIのTwitterで、Amebaサービスのひとつ

結果、機能はするけどプロダクトレベルには程遠いクオリティのサイトが完成した。

ママツイクローン

まま、何事も無駄なことはないわけで、せっかく弄ったのでやってみたことの記録です。

やったこと

マイクロブログCMS検討

調べてみたら、いっぱいあった。選択基準としてはやはり情報量。
StatusNetというオープンソースソフトウェアがこの中ではポピュラーっぽかった。
たいしてニーズがないのか、言うほどの情報量はなかったんだけども。

AWSでの環境構築

こちらはだいぶ慣れてきたよ。Docker触ってみたけど結局使わない気がしたので今回は最初からEC2インスタンス上で作業。
Route53でドメイン登録できるようになったらしいので初挑戦。
Hosted ZoneとかあんまりよくわかってないけどワンストップでブラウズできるようになってSUGEEEってなった。

CMS展開

大学生以来のLAMP環境構築。
0208:[ユーティリティ/ポータル]Statusnetをインストールしてみよう！を参考にインストール。
とても簡単だった。PHPのすぐ動くっぷりにびっくり。

# インストール
$ sudo yum install -y httpd.x86_64 php.x86_64 mysql-server emacs php-mysql php-gd php-xml php-mbstring
$ emacs /etc/my.cnf
$ emacs /var/www/html/info.php
$ wget http://status.net/statusnet-1.1.1.tar.gz .
$ tar zxfv statusnet-1.1.1.tar.gz
$ sudo chown -R apache:apache /var/www/html

# DB設定
mysql> create database statusnet;
mysql> grant all privileges on statusnet.* to statusnetuser@localhost identified by 'statusnetpass';

# 日本語化
$ sudo yum install gettext
$ sudo make

文言、日本語修正

立ち上がって見てみてびっくり、日本語が酷い。
”画像”は「アバター」と表現するし、「デフォルトタイムゾーン; 通常UTC。」とか平気で書いてある。まあ直訳なわけです。なので日本語を直してみる。
国際化対応ファイルを弄るだけかと思いきや、そう簡単ではなかった。
locale/ja/配下には.poといったファイルや.moといったバイナリファイルがあった。どうやらStatusNetではgettextというライブラリを使っているよう。.poに日本語を発見したのだが直接編集ができなかった。これを編集するにはPoEditなどのGUIエディタで編集するのが一般的だとか。
リモートのAmazonLinux上で直接触ってたのでちょっとこれは面倒だ。
ということで迷った挙句、grep findで直接phpファイルを編集するという荒業にでた。複数ファイル弄った時点でカオスってきて、もうこの時点でメンテナンス性なんてものは諦めた。どうせ作りっぱなしで数カ月後にインスタンス落とすんだし、いいや。

html、css修正

起動直後はこんな感じの見てくれでした。

http://ec2-54-65-67-193.ap-northeast-1.compute.amazonaws.com

ママツイもどきというぐらいなのでもうちょい似せたいところ。と思いきやどこを探してもHTMLらしきものが記述してあるファイルがないじゃない。探してびっくり、テンプレートエンジン的なものは使っておらず、なんと全てのHTML構造がコード中に記述してあった。 例えばこんな感じ。

{
        $this->elementStart('div', array('id' => 'content', 'class' => 'hentry'));
        $this->showPageTitle();
        $this->showPageNoticeBlock();
        $this->elementStart('div', array('id' => 'content_inner', 'class' => 'entry-content'));
        // show the actual content (forms, lists, whatever)
        $this->showContent();
        $this->elementEnd('div');
        $this->elementEnd('div');
    }

このOSS自体が古臭いにおいは最初からしていたが、衝撃だった。というかどうやってテストしているのだ？表示確認は？逆にやりづらいだろこれ。
と疑問は多く残るものの、しょうがないのでclassやid名からgrep findして該当箇所の見当をつけ、CSSを編集していった。

そんな感じで何となく作ったんだけど、これ以上はどうにもならない問題もあった。

問題点

StatusNet、開発もだいぶ前っぽいし最近メンテされてる感じもなく、とにかくモダンじゃない。

スマホ最適化ができない

1番のポイント。Bootstrapを無理矢理組み込んでみたんだけど、前述のとおりHTMLがPHPコード中にガチガチに組み込まれており、class="container"を1個つけるにも一苦労。今の私のマークアップ力ではデスクトップサイト用に作りこまれたものをスマホ表示最適化するには至らなかった。

認証がモダンじゃない

デフォの登録フォームはこんな感じ。 http://ec2-54-65-67-193.ap-northeast-1.compute.amazonaws.com/index.php/main/register

タイムゾーンとか選ばないといけない仕様。 協力してくれる人が数名いたのだけど、何よりメアドを登録させる（つまり手元に知らん人のメアドがある）時点で個人管理のサイトとしては恐ろしい。このご時世認証はOAuthにしたいものだ。

ということで結論、TwitterクローンのCMS、デフォのサイトをイントラネットなどで使う分には良いだろうけど、今のところ一般ユーザ向けではなさそうです。というお話。