まったりと過ごせるおれたちのインターネット、それがポエム pplog.net #pplog

f:id:naoto5959:20140201120658p:plain

@ken_c_loこと赤塚氏を中心にP氏といぬ氏と愉快な仲間たちでpplog - ゆるふわインターネットにポエムを刻もうをリリースしてました。コンセプトデザインとUIデザインは、@ken_c_lo氏です。@ken_c_lo氏のデザイナーサイドの記事は、 「俺たちのゆるふわインターネット「pplog」 をリリースしました(してました)」です。今回この記事ではプログラマーサイドとして書いてみます。

9月ぐらいから、ポエムのコンセプトを話す機会が何度かあって、issueにポエムのポエムが投稿されていました。昨年の9/27(らしい)に急に私の中のハッカソみが溢れ出てきてp4dハッカソンのノリで夕方から開発を始めました。日が変わる前にはherokuに上がっていたような気がします。ドメイン取ってから公開までが一呼吸で出来たのはherokurailsのおかげかなと思います。

ポエムのissueはこのようにポエム形式で投稿されております。

ポエムのissueポエム

ワークフロー

デザイナー&エンジニアで開発するベストな雰囲気がありました。

  • 生煮えプルリク。。。
  • FIXMEでざっくりデザインからのFIXYOU。。。
  • ( ˘ω˘)。。。
  • github flowぽいナニカ

具体的には Gitを使ったデザイナーとプログラマの協業について話してきた #P4D #phpcon2013のようなワークフローで進めることが出来たのが良かったです。

私はデザインを後でここに当てておいてね!(FIXME!!) という意味でデザインのない状態でpull reqを出しますし、

赤塚氏は機能を後で作ってね!(FIXME!!!) という意味で機能がない状態でpull reqを出します。

そのpull req合戦は、お互いある程度話し合って決めた機能のときもあれば、まだ生煮えアイデアの時もあります。とくに生煮えアイデアを動くものとして見せ合えるのが、Gitを使ったデザイナーとプログラマの協業という意味でマジサイコーと感じるところです。

もらったpull reqに対して、デザインを当ててもらったり(FIXYOU!!!)、機能を実装したり(FIXYOU!!!)します。

もちろん生煮え状態のアイデアなのでクソなアイデアも多く生まれます。そうしたアイデアを捨てることも多いので、作ったものを余裕で捨てられる心の広さというか強さを鍛えられました。例えば、リリース当初複数残せたスター(今のあしあと)を気持ちよく連打しつつサーバー負荷を抑えるためにクライアント側で連打をキューイングしてからサーバーに集約したカタチで送るとか、プログラマーとしては作るのも楽しかったですし、なんかカッコイイ実装でテンション上がったんですが、そもそもスター1つでよくね、みたいな話になってこの機能はリリース後30分ぐらいでrevertしました。

誰かが決めてそれを実装という雰囲気がないので、お客さんとそれを作る人という関係にならない。これはお互いが手を動かせるメリットだと思いました。

始めの画面の様子

始め私がガーッと作った時にはデザインが当たっていませんでした。これは赤塚氏に対していFIXMEしている状態。プログラマーぽさ( ˘ω˘) (データが今のデータで表示しているのでちょっとおかしいけど気にしないでください。)

f:id:naoto5959:20140201121941p:plain

f:id:naoto5959:20140201122055p:plain

今の様子

FIXYOUされて、いろいろあって今の状態。プロダクトに命が吹き込まれた感じがしますね。

f:id:naoto5959:20140201120658p:plain

f:id:naoto5959:20140201120703p:plain

お気づきの方もいるかもしれませんが、ベースはbootstrapです。cssを見ると、bootstrapを深く理解してカスタマイズしているのが分かります。赤塚氏、素晴らしい。

heroku addonの様子

もうちょい開発りの話。herokuのaddonはこんな感じです。ちゃんとherokuにお金払ってます。(@ayumin見てるー?)

f:id:naoto5959:20140201123617p:plain

heroku で工夫したこと

herokuが東京リージョンじゃなくても工夫で良くなりますね。でも東京リージョン待ってます( ˘ω˘)

  • s3はusにして配信時にCDN使う(CloudFront)
  • fragment cacheの活用 => MemCachier
  • メール投稿 => mandrillの Inbound 機能でweb hookを選択して設定
  • DeployHook => HipChatに通知
  • パフォーマンスチェック、1dynoで落とさない => New Relic
  • SSL

補足しておくと、地味に実装されているメール投稿(新規投稿画面に書いてあります)は、mandrillの Inbound 機能を使っています。受け取るメールアドレスを正規表現で定義できるので、以下の様な処理を行うAPIを定義しておいてweb hookとして設定します。

  • 送られたメールの情報がPOSTで来るので
  • メールアドレスのユーザー名をパースして誰の投稿かを確認
  • メールのbodyをポエムの内容として投稿

これ結構便利だと思いました。

他に便利なもの

  • HipChat API
    • github からの通知
    • heroku への deploy 通知
    • bugsnag からの通知
    • twitter のエゴサーチ(@fakestarbaby氏作)
    • サイト内の動向アレコレ
      • 実は「運営」とか「pplog」とか入っていると開発チームに伝わります( ˘ω˘)
    • 開発チームはみんなでHipChatと眺めている( ˘ω˘)
  • CIはwecker使ってる
    • テストpassしたら、herokuのステージングにデプロイとか出来ますが使ってないです。

ゆかいな仲間

https://www.pplog.net/humans.txtに関わったメンバーが書いてあります。実際のコントリビュート率は今のところこんな感じ。えびちゃんの追い上げがすごい。

f:id:naoto5959:20140201123453p:plain

まとめ

言い忘れましたが、pplogには今のところ読み方がありません。言葉に発して呼ぶときには「ポエム(通称)」と呼んでます。しかし、サービスはファンが雰囲気を作るものだと思っているので呼び名も勝手に決まっていくと思っています。

最後に、「プログラマーってのはさ〜、ネクタイ締めて、スーツ来てさ〜、ヒウィゴッってなわけにはいかねーんだよ〜」というのを感じました。サービスに命を吹き込むにはプログラマーの力だけではなくコンセプトをデザインできるデザイナーさんが必要だなあと実感。

自分でいうのもなんだけど、今一番おもしろいインターネットとしてpplogに大変注目しております。このサービスはもはや我々の手を離れ自我を持ちはじめた感じがします。あとはポエムがどう生きていきたいのか耳を傾け、力になっていければなあと思ってます。