こんにちは、oribeです。
この記事は2019/06/22に行われたハッカソンの参加記です。
はじめに
今回のテーマは「あい」と「わ」でした。
「Twitterで愛(いいね)以上の気持ちを伝え、交流の和をもっと広げよう！」ということで、ツイートに対しスタンプでも反応できるTwitterクライアントを制作しました。
メンバー
クライアントサイド
- 60(17B)
- Esehata(18B)
- idaten(18B)
- TM(18B)
サーバーサイド
- SoLA(16B)
- oribe(18B)
開発環境
クライアントサイド
前日までに、Figmaを使ってUIデザインを決めておきました。開発は Vue.js で行い、CSSライブラリとして Bulma を使いました。絵文字の画像は twemoji から取得しています。デプロイは Showcase (部内向けPaaS基盤) で行いました。
サーバーサイド
前日までに、Swagger を使ってAPIの設計を行いました。サーバーサイドは Go で実装し、 Heroku でデプロイしました。データベースは Heroku Postgres を使用しました。TwitterAPIを利用する際のライブラリには anaconda を採用しました。
事前準備
クライアントサイド
- UIデザインの作成
- twemojiの技術検証
- コンポーネントの構成決め
- Vue.jsの仕様の確認
サーバーサイド
- API、DBの設計
- TwitterAPIの技術検証
- Goの仕様の確認
当日
クライアントサイド
コンポーネントごとに担当者決めて開発。
実装するAPIをSwaggerでまとめてあったので、サーバーサイドが完成するまではSwaggerHubでモックサーバーを立てて実装しました。
サーバーサイド
事前準備で設計した通りにエンドポイントやDBまわりを実装。
デプロイした際にDBに接続できないバグが解消できず、スタンプ情報をDBに保存できない状態でデモを行ないました。
制作物
機能
- Twitterの連携認証
- ホームタイムラインの取得
- スタンプを押す・外す
- ツイート
感想
SoLA
- サーバーサイドを二人で担当したが知識や技術力の差が思った以上にあったので前日までの準備は入念にするべき
- conflictを起こしたときに焦ってしまった
- Gormの扱いにもう少し慣れていればよかった
- 色々あったけど純粋にチーム開発は楽しかった、班員の方々には感謝しています
60
- 事前に頑張ってFigmaできっちりUIを決めておいたけれど、そこに時間をかけるより環境構築の確認をしたりライブラリを導入して使ってみる練習をしたりしたほうが良かったなと思った
- コンポーネント構成を事前に決めてプロジェクトの雛形を作っておいたこと、絵文字画像の取得を事前に練習しておいたことは良かった
- フロントを初めて書く人が多かったけれど、最後の頃には皆ガンガンVueを書けるようになってて強いなと思った
- 最後はなんとか形になったので良かった
- 反省点はたくさんあるけれど落ち込むというより次はこう改善したいという思いが強い
- 楽しかったです
Esehata
- 初めてのチーム開発でしたがガチプロの皆様のおかげでなんとかある程度形にはなったかなと思う
- 開発する上で参考にすると良い資料などを提示してもらったので最低限ではあるが事前にある程度準備できたのはありがたかった
- †CSSは闇†
- 本当に自分の担当する場所以外であまり貢献できなかったのが心残り
- チーム開発とハッカソンの楽しさを知ることができた
- 機会があったら、今度はサーバサイドも触ってみたい
idaten
- フロントエンドを担当したが始める以前で詰まってしまって自分の準備不足を感じた
- 一回目のmergeで各個人で担当していた部分が合わさって動いて感動した
- 数々のプロのおかげで動くものができた
- ありがとうございました
- gitに助けられたと同時にgitに苦しめられた
- チーム開発を経験したことがなかったので、いい経験になった
oribe
- 最低限の機能は実装できたのでよかった
- 事前にTwitter APIの技術検証をしておいたので、本番にそのあたりで苦労せずにすんだ
- デプロイしたときにデータベースに接続できないバグを解消できなかったのが悔しかった（後日あっさり解決できた）
- gitでコンフリクトを起こしたときの対応に焦った
- チームでの開発は初めてだったが、楽しかった
TM
- HTMLやJava Scriptは初めて触るレベルだったので、とても難しかった
- HTMLは、自分が書くとすぐに反映されて見た目でわかるので、とてもやりがいがあった
- Git難しい(難しい)
- Vue.js難しい(難しい)
