Qiita 2-day Hackathon で「Hubstar」を作るまで

By ton1 Comment

2月2日から3日にかけて開催されたQiita 2-day Hackathonに参加してきました。

その時その時の様子はQiita公式のブログにまとめられています。
スペシャルゲストも登場して盛り上がったQiita 2-day Hackathon総まとめ!

自分は1人で行く勇気がなかったので同じ大学の先輩を誘って2人で参加しましたw
自分達以外にも何人か大学生がいたようです。

今後ハッカソンに参加した際に活かせるよう、自分たちが何をどのように作っていったのかまとめてみました。

テーマ:「GitHub APIを使った開発」
+ プログラマの問題を解決するサービス

「GitHub APIを使った開発」というテーマは参加する際に発表されていて、
当日に「プログラマの問題を解決するサービス」という詳細テーマが発表されました。

当日いきなり1からアイディアを考えて作っていくのはちょっと厳しいと思ったので、
ハッカソンの1週間くらい前にブレストを行なっていくつかアイディアを出しておいて、
その中から当日のテーマに合ったものを選ぶorテーマに合うように改変する、
という方向性で行くことにしました。

ブレストで出たアイディアはこんな感じ。(本当はもっと細かいけど)

この中から、「行単位でスターが付けられるサービス」を作ることに決定しました。

実装のレベル分け

行単位でスターが付けられるサービス」を作ることが決定したので、次は

  • サービス名
  • 機能
  • レベル分け

を決めることにしました。

名前は「HubStar
GitHub + Star を合わせただけです、安易でごめんなさいw
名前なんて決めなくていいと思うかもしれないけど、名前って結構重要なんですよ!
名前つけるだけで愛着がわきますからね。

次に機能定義。
なにができるのかを決めていくのですが、怖いのは機能を盛り込みすぎて結局完成しなかった、
ということです。
なので機能を定義しながらその機能の優先順位別にレベルをつけていき、
レベル1が全て実装できればレベル2を実装する、ということにしました。

その時のメモはこんな感じ

作業分担

大体作るものが決まったらさっそく実装、といきたいところですが、自分達は2人です。
どっちが何を作るのかを決めなければいけません。
できるだけ作業を分離して独立で実装できるようにしたかったので、

  • 自分 : サーバーサイド : サービスAPI実装
  • 先輩 : クライアントサイド : サービスサイト実装

という風に分けました。

また、ハッカソン開始時にGitHubのプライベートリポジトリが貰えるのですが、
1つのリポジトリでサーバーサイドとクライアントサイドのコードを管理しないといけません。
そこで以下のように完全にブランチを分けて作業することにしました。
masterブランチはからっぽですw

進捗管理

あとはひたすらコーディング!なのですが、お互いどこまで作ったのか、これから何を作る予定なのか、バグなどの管理のためにGitHubのIssuesやWikiを使いました。

実際のIssuesはこんな感じ

自分はサーバー側で実装したAPIをクライアント側ですぐに使ってもらえるように、wikiにAPI仕様を書いていきました。
API仕様はこんな感じ。(だいぶ適当なとこあるけど許してください)

実装

ひたすら実装・・・・

技術的な話としては、

  • サーバー:さくらVPS
  • webサーバー:Nginx
  • API側のアプリサーバー:gunicorn
  • gunicornのプロセス監視:supervisor
  • API実装:Python製webフレームワークFlask
  • DB:MongoDB

で作りました。

Flaskのプラグインflask-restfulを使うと簡単にRESTfulAPIを実装することができました。

またGitHubAPIはmichaelliao/githubpyというライブラリを使用しました。
とてもミニマムなライブラリですが、今回はこれで十分でした。

完成!

完成!というよりは時間切れ!という感じですがw
動くとこまで作れるか不安だったのですが、
最初にレベル分けしていたレベル2のところまでは実装できたのでよかったです。

実際に作ったサービスを操作しているところを動画におさめたのでよかったら見てください。


動画の補足として
・PublicFeedタブ
では全てのユーザーがHubstarでスターをつけたコード一覧が表示されます。
コード詳細では
Starボタンを押すと他のユーザーがスターをつけたコードを自分もスターをつけることができます。
Open ad GitHubボタンを押すとGitHub上でスターをつけた箇所がハイライトされた状態で見ることができます。

MyPageの
・Starredタブ
では自分がスターをつけたコード一覧が表示されます。
・NewsFeedタブ
では自分がGitHubでフォローしているユーザーがスターをつけた情報が流れてきます。

また、新たにスターをつけるには、GitHub上でスターを付けたいコードを見つけて、右上の「Add Star」ボタンからURLを登録します。
特定の行のみにスターを付けたい場合は、開始行をクリック、終了行をShift+クリックすると範囲選択できるのでその状態でURLを登録します。
(本当はChrome拡張で一発で登録できるようにしたかったんだけど・・・)

サービスの機能としてはこんな感じです。

発表

時間になったらすぐに発表。発表は3分。短い・・・

発表時のスライド。
ほとんど上の動画のようにデモを動かしながら発表したのでスライド自体はすごく短いですが、一応資料としてアップしときます。

他の人達の発表がすごくてがくぶるしながら順番待ちしていました。
自分達の番の少し前に、なんと自分達と全く同じコンセプトのチームがいてびっくりしましたw
(しかもそのチームはChrome拡張まで作ってる・・・)
そのためすごく気まずい思いをしながら発表しました・・・w

おわりに

結果は全く賞にはかすりもしませんでしたが、なんとか動く作品が作れてよかったです。
今回のハッカソンは開発時間が26時間くらい?で、緊張や焦りもあり、ずっと集中してたので後半どっと疲れがきて死にそうでしたw
時間配分大事ですね。
でもみんながひたすらコードを書いてるあの会場の雰囲気は心地よかったですw
今回はハッカソン初体験ということで、戸惑いや準備不足もあってなかなか思うようにいかなかったのですが、とても楽しかったので今回の経験を活かしてまた何かのハッカソンに参加したいですね!

#ハッカソンに付き合っていただいた先輩、ありがとうございました。


Python, 作ってみた, 勉強会

One Comment to “Qiita 2-day Hackathon で「Hubstar」を作るまで”

  1. […] 作ったものはこんな感じです。めんどいのでton君のブログから動画をパクってきました。 […]

Leave your Comment

メールアドレスが公開されることはありません。

Blue Taste Theme created by Jabox