GWハッカソンでMeetAppという趣味アプリ開発者のためのサービス作りました


最近Gun○sy スーパーGoエンジニアの@kyokomiさんとせっせとMeetAppというサービスを作っています。

(2015/5/19追記: kyokomiさんのblogでGoについての記事「GWにGo言語で作ったMeetAppというサービスの開発記録」が紹介されています。)

とりあえずプレビュー版も大体乗り越え少し安定してきたので、MeetAppのサービスの紹介+開発の概要について、ご紹介させていただきます!趣味アプリ開発の代表例としても良いものができたんじゃないかと思っています。

MeetApp – 開発アイデアを実現する仲間を探そう
https://meetapp.tokyo

スクリーンショット 2015-05-14 8.29.10

どんなサービス?

趣味で開発したいなぁ、と思っているデザイナーさんやエンジニアさんと、

開発のアイデアがあるんだけど誰か作ってくれないかなぁ、という企画さん

とのマッチングを行うサービスです!

MeetAppは元々は自分が毎週主催しているconnpassで公募している朝活の中で生まれたアイデアです。

趣味で開発朝活@渋谷
http://devmorning.connpass.com/

趣味の開発者たちが集まる朝活でよくあるのが、「アイデアが出たときにメンバーをゆる募して、興味をしてしてくれた人とプロジェクトを開始する。」っという流れです。

この「趣味で何か作りたいんだけど、一緒にやってくれる人誰かいないかな〜?」という要望と、「何か趣味で作ってみたいなぁ〜」と考える方とのマッチング結構他にも需要がありそうだと思って開発を開始しました。

アイデアを登録すると以下のように説明文や趣味アプリ開発者募集中のポジションなどがみれます。

スクリーンショット 2015-05-19 18.37.43

MeetApp上のMeetAppのページ

他にもメンバーの情報や、メンバーとの会話のやり取りができます。その開発アイデアに興味があれば、気軽な会話からjoinすることができます!

開発の流れ

Kick-off

4月始めに行われた1泊2日の開発でkickoff
合宿の様子についてはこちらの記事で。

devmorning合宿ハッカソンを12人で開催しました!

ここでフロントエンドベースデザインの構築やサーバーサイド環境構築、など下地を作りました。

ゴールデンウイークハッカソン

ゴールデンウイーク前にこつこつ進めつつ、うちの部屋を使ってハッカソンスタイルで一気に2日間くらいで作り上げてv0.1をリリースしました。ざっくりv0.1リリースまでの作業時間はちょうど1週間分だったでしょうか。

ハッカソン前日の様子。

githubのcommitグラフが 5/3 らへんが明らかに飛び出てますねw

スクリーンショット 2015-05-14 9.08.33

Slackの活用

コミュニケーションは基本的にSlackで行いました。
元々朝活用に使っているSlack上で #MeetApp チャンネルを作っています。

プラン管理について

今のところTrelloの活用でうまく回っています。

Trello – MeetApp
https://trello.com/b/XXGpLA1d/meetapp

スクリーンショット 2015-05-14 8.02.28

Issue管理について

issueはgithubのissueです。さっそく利用してくれた方から何件か報告をいただいたので随時対応したりします。

MeetAppのアーキテクチャ

ざっくりとですが、以下のtechnologyを用いて動いています。

認証 Facebook Auth
サーバー Heroku
画像サーバー Cloudinary
DB mongo
認証情報管理 Redis
Error管理 Airbrake
Log管理 Papertrail

本当は図にしようかと思ったのですが、面倒だったので割愛

デプロイプロセスについて

CircleCI

masterへmerge -> githubと連携したビルド自動化 -> ビルドステータスをSlack通知

Papertrail

masterへmerge -> ログ管理 -> デプロイログをSlack通知

CircleCIのおかげでmasterブランチにmergeされると自動的にコンパイル+テストから、heroku deployまでやってくれます。いずれもSlackとも連携していて、通知してくれます。

スクリーンショット 2015-05-14 8.16.33

ソースコードについて

Githubで管理しております。
https://github.com/shumipro/meetapp

Backend

Go言語: KamiというWebフレームワークを使っています。
https://github.com/guregu/kami

元々はじめのプロトタイプはnodeで作っていたのですが、kyokomiさんがgoで全部書き直してくれましたw

自分は今回初めてGo使いましたが結構良いと思いました。例えば、クライアントから渡すjsonをサーバー側で定義している型付きのstructに変換できます。

例えば、開発アイデアのmongo modelに対応したstructを以下のように定義して、右側に記述しているjsonの値を受け取って、json.Unmarshal を行えば一発で json -> Go struct に変換されます。

json変換させるGo Structの例

type AppInfo struct {
    ID            string               `bson:"_id" json:"id"`                 // アプリID
    Name          string               `           json:"name"`               // アプリ名
    Description   string               `           json:"description"`        // アプリ詳細
    Category      CategoryType         `           json:"category"`           // カテゴリ
    Platform      PlatformType         `           json:"platform"`           // プラットフォーム
    Language      LanguageType         `           json:"pLang"`              // プログラミング言語
    Keywords      string               `           json:"keywords"`           // フリーキーワード
    MainImage     string               `           json:"mainImageUrl"`       // メイン画像
    ImageURLs     []URLInfo            `           json:"images"`             // 紹介画像URLたち
    Area          AreaType             `           json:"meetingArea"`        // 場所
    StartDate     string               `           json:"projectStartDate"`   // 開始日
    ReleaseDate   string               `           json:"projectReleaseDate"` // リリース予定日
    GitHubURL     string               `           json:"githubUrl"`          // GitHubのURL
    DemoURL       string               `           json:"demoUrl"`            // デモURL
    Frequency     MeetingFrequencyType `           json:"meetingFrequency"`   // 頻度
    StarCount     int                  `           json:"starCount"`          // スター数
    Members       []Member             `           json:"currentMembers"`     // メンバー
    RecruitMember []RecruitInfo        `           json:"recruitMembers"`     // 募集メンバー
    Discussions   []DiscussionInfo     `           json:"discussions"`        // 「聞いてみる」の内容
    StarUsers     []string             `           json:"starUsers"`          // 「聞いてみる」の内容
    CreateAt      time.Time            `           json:"-"`
    UpdateAt      time.Time            `           json:"-"`
}

IntellJ GoプラグインなどIDE使うとやはり型付き言語は安心してプログラムかけます笑
nodeよりいいかもなぁーと思いました。パフォーマンスも良いし。

Front-end

ES6 + stylus + gulp + webpackを使った爆速開発してます。

基本的にMeetAppはサーバーで生成したページを表示するのが主なので、今のところ特に目新しいことはしていません。今後開発アイデアのプロジェクト管理周りで少しRichなUIを作ることになったらReactでも使いましょうかね〜。

meetapp.toykoドメインについて

v0.1公開となったのがゴールデンウィークの最終日。公開前には趣味とは言えど、ドメインはとります。

お名前.com

まずはドメインを取ります。meetapp.comとか取られていたので、たまたまセール中だった.tokyoとりました。確か年額900円くらいです。

取得したドメインをDNSのcnameでherokuのURLに割り当てるだけです。

CloudFlare

お名前.comでwww.meetapp.tokyoは取れたわけですが、www無しのmeetapp.tokyoで取得したいと思い調べてみたらCloudFlareというサービスを使うと良いみたいです。

https://www.cloudflare.com/

さっそくURLを指定して、cnameにmeetapp.tokyoを指定します。

スクリーンショット 2015-05-14 8.52.48

しばらく待つとアクセスできるようになりました!

ただし、CloudFlareを使うとstaticファイルをキャッシュしてくれる便利機能があるのですが、開発時は要注意です。結構強力なキャッシュなので、herokuに変更が反映されないなーっと思ってたら、原因はherokuではなくCloudFlareのnginxでキャッシュされたものでした。

CloudFlareのcachingのセクションでcache levelの調整ができます。開発中でキャッシュしたくなかったらとりあえずDevelopment ModeをOnにしておけば良いと思います。

まとめ

MeetAppは趣味開発ということで色々な技術に触れたりして非常に楽しく開発できました。

特にkyokomiさんの開発スピードはとても早いのであっという間に出来上がりました。まだまだ改善項目・
機能拡張していくので宜しくお願いします!

そして是非興味のあってMeetApp開発を手伝ってくれる方はMeetAppで教えて下さい。

MeetApp上のMeetAppのページ
http://meetapp.tokyo/app/detail/ebdf283b-3c69-414a-8085-cfcc35b849dd

また、アイデアなどがありましたら是非登録してみてください。楽しい趣味アプリ開発ができますよ(>o<)b