search
LoginSignup
Help us understand the problem. What are the problem?

This article is a Private article. Only a writer and users who know the URL can access it.

More than 1 year has passed since last update.

posted at

updated at

enPiT個人レポート

この記事は筑波大学 enPiTの個人レポートです。

作ったプロダクト

最終的なリーンキャンバス

顧客

新しい趣味を見つけたい人・広めたい人

問題

noteやYouTube では情報を得るためには自分から検索するか、おすすめに出てくる関連のコンテンツを見るしかなく、全く新しい趣味に出会いにくい。

独自の価値提案

サークルの新歓のように新しい趣味と出会う機会を得ることができる。

ソリューション

繋がりのある趣味が一覧的に可視化されることにより、偶然の出会いをすることができる。

構築したシステムの使い方

大きく分けて 2 つの機能がある。

  • 趣味を探す機能
  • 趣味について書く機能

それぞれについて説明する。

趣味を探す機能

  • 「趣味を探す」トップページ image.png
    • 今見てる趣味タグが正面に表示される。
    • 今見ているタグをクリックすると「記事一覧ページ」へ遷移する。
    • 関連のある趣味は関連度順に周囲に並ぶ。
    • 盛り上がっている趣味は大きく表示される。
    • マイナーな趣味が埋もれてしまわないように、関連がない趣味もランダム(黄色い円)に表示される。
    • 関連趣味タグが少ない場合にはランダム趣味タグが多く表示される。
    • 今見ているタグ以外の趣味タグをクリックするとそのタグを中心とした、「趣味を探す」トップページに遷移する。
    • 利用者の動きによって趣味タグ同士の関連性が変化する。
  • 記事一覧ページ image.png
    • その趣味タグがついている記事が一覧表示される。
  • 記事ページ
    image.png
    image.png

  • 記事本文はマークダウンで表示される。

  • Twitter でシェアすることができる。

  • ついているタグが一覧表示される。

    • タグをクリックすることでそのタグの「趣味を探す」ページへ遷移できる。
  • 「ずぶずぶ」や「コメント」によって投稿者に趣味興味をもったことを伝えることができる。

趣味を書く機能

image.png

  • 趣味についての記事を投稿することができる。
  • 趣味タグは複数件登録・新規作成することができる。
    • 既存のタグについては入力に応じて候補が出てくる。
  • 記事本文はマークダウンを利用することができる。

開発のプロセス

チームで主に採用していた方法

  • LiveShareでのオンラインモブプログラミング
  • メンバーを2つの班に分ける。次回スプリントではメンバーの一部を入れ替える
    • ノウハウの共有
    • 全員が全体を知っている状態に
  • 発言に対する積極的反応。
    • オンラインでも話しやすかった
    • ミームが生まれ雰囲気が良くなる

技術的な話

 フロントエンドはNuxt.js、バックエンドにFirebase(Firestoreのみ)、デプロイにNetlifyを採用した。
この構成はフロントの開発に専念でき、デプロイしたものを触ってもらえやすくenPiTや短期間のハッカソンなどではいいと思う。
 開発を続けながら開発効率を向上させられたのが良かったと思う。個々のフォーマッタが異なるためコードレビューがしにくい問題を解決するためにESLint+Prettierを導入したり、コードレビュー効率化のためにPRの自動デプロイを設定するなど。(これ以上続けるならTypescriptにしたいですね)

秋学期の各スプリントのふりかえり

スプリント 1 10/14

やったこと

  • いまだできていなかったのでプロダクト方針の検討
  • アプリケーションの機能やカスタマージャーニーを伝える紙芝居作成。
  • PBL作成

起きたこと

  • 初めてプロダクトへのフィードバックをもらえた。

学んだこと

スクリーンショット 2021-02-07 14.12.59.png

  • スクショに付箋を貼ると各自のイメージを共有しやすい。
  • Miroタイマーで時間管理を始める。

スプリント 2 10/16

やったこと

他チームと比べた遅れへの焦りもあり、チームを二手に分けた。

  • 実装面
    • 環境構築
    • トップページ作成
    • 記事一覧ページ作成
  • プロダクト方針面
    • アンケート結果をもとにスライドでグラフ作成。

起きたこと

  • 実装が難しくてみんな元気がない。
  • 発表準備ができていなくてぐだぐだだった。

学んだこと

  • 反対側の班の様子がわからない。-> メンバーチェンジモブプログラミングの開始
  • SMがいないのでふわふわしてしまう->SMを毎回ちゃんと決めることに(実際は決まらなかった)

スプリント3 10/21

やったこと

  • 記事詳細ページ作成

起きたこと

  • 時間管理ができていなかった
  • メンテナンスされていないパッケージを使ってしまい、ハマり時間を溶かした。
  • LiveShareのlocalhost共有の読み込みがかなり遅い

学んだこと

  • SMに時間管理タスクを課すようにした。
  • Node.jsのバージョンはバシバシ上がるのでメンテナンスされているパッケージを選ぶ

スプリント4 10/23

やったこと

  • 記事作成画面作成。
    • MD対応
    • グラフページを作成

起きたこと

  • liveshareのバグで特定の行が増殖するなどした。
  • サクサク進捗でテンションは高かった

学んだこと

  • 分担がうまくいくとめっちゃすすむ
  • liveshare
    • localhost共有はあまり当てにせず画面共有を見る。
    • Liveshareで編集中以外のファイルは閉じる

スプリント5 10/28

やったこと

  • ルーティング設定。

起きたこと

  • 未だ実装はレビューがもらえる段階ではなかった。
  • レビューでプロダクトへの意見があまりもらえなかった。
  • SBLが更新されていない。

学んだこと

  • レビューでどういう意見をもらいたいかを意識する。

ロングレビュー 10/30

  • 開発の遅れを感じ非同期開発スタート

スプリント6 11/11

やったこと

  • グラフでの趣味タグの形整形
  • Firestore接続

起きたこと

  • FireStoreのドキュメント調べたりしてると時間が溶ける。
  • そろそろ紙芝居をやめようと言われれる。

学んだこと

  • SBLの粒度が大きすぎるので1人でできるレベルまで砕く。

スプリント 7 11/13

やったこと

  • PBLを見直した 
    • 最終形Hobeeeeee!! の原型
  • 分解したSBLを作成
    • 非同期issue駆動開発の始まり

起きたこと

  • 議論に熱中してしまい時間管理ができていなかった。
    • このスプリントのSMを決めるルール作成。日直システム開始 スクリーンショット 2021-02-07 15.06.08.png

学んだこと

  • 迷走したときはチーム内で同意を取り直して方向性を一致させるの大事
    • これ以後開発加速してる

スプリント8 11/20

やったこと

  • firesotreデータ構造決定
  • グラフをDivからCanvasで実装するように変更

起きたこと

  • モブプログラミングの利点を活かしきれていない気がする。
    • 役割を明確にし、時間で強制メンバーチェンジするように。
  • レビューであまりフィードバックがもらえなかった

学んだこと

  • レビュー
    • 質問したいことを事前に考えておく。
      • 聞きたいとリスト作成
    • プロダクトのみならずプロセスへのフィードバックももらうことにする。

スプリント9 12/2

やったこと

  • 記事をFireStoreからとってくるようにした。
  • 記事をFireStoreに登録できるようになった。
  • 趣味タグをFireStoreからとってくるようにした。

起きたこと

  • 過去のデータ構造のままの部分があったり、昔の構想を前提にした変数名などがあってコードが誰にもよくわからなくなる。
    • リファクタリングの実行
  • マージできるようになるのが遅く多くのコンフリクトが発生。
    • サクッと書いてマージできるサイズまで粒度を小さくする。

学んだこと

  • 日直がいると時間管理がうまくいく

ロングレビュー 12/4

  • デプロイができたので実際に触ってもらえた。
    • いいレビューがもらえる一方で、付けたい機能が多数発生。
      • 優先度をつけ、結果的にはすべて実装することに

スプリント10 12/9

やったこと

  • ドライバー・ナビゲーターを意識した厳密なモブプロ
  • ネックだったグラフの関連度をどう自動設定するかに答えが出る。
  • 記事がマークダウンで表示されるようになった。
  • ユーザーの繊維によってタグの関連度を動的に変化

起きたこと

  • メンバー不足によるリアクションの不足

学んだこと

  • 厳密なモブプロにより、スキル共有が効率的だった。

スプリント11 12/11

やったこと

  • タグの新規作成・記事とタグの自動紐付け

起きたこと

  • issue+PRの流れがチームに馴染んでくる。
    • はじめに非同期でやった分の確認をするように

学んだこと

  • 丁寧なモブプロにより、リアルタイムコードレビューの側面も持つようになった。

スプリント12 12/16

やったこと

  • ずぶずぶ機能実装
  • グラフが動かせるようになった。

起きたこと

  • レビューでユーザーに投稿してもらっているコンテンツが少ないという弱点を指摘された
    • 自分たちで記事を書く。

学んだこと

  • やっぱり触ってもらえると
    • いい反応がもらえて嬉しい。
    • レビューが具体的になる。

スプリント13 12/18

やったこと

  • 記事投稿キャンセル時のバグ解消
  • グローバルナビゲーションなどを実装しUI改善
  • 感謝のアクティビティ

起きたこと

非同期作業でかなりの進捗が!!

スプリント14 1/6

やったこと

  • タグの大きさ修正
  • マウスでの操作性UP
  • 最終発表準備

学んだこと

KPTのTry、プロダクトについてばかりだけどプロセスもあったほうがいい

スプリント 15

やったこと

  • 最終発表スライド作成

起きたこと

  • みんながいないとできないこととそうではないものが自然に切り分けれていた。

学んだこと

  • スライド制作もモブでやれる。

期間通した個人的振り返り

 プロダクトの方向性を考えるときのメソッド・考え方を知ることができた。具体的にはリーンキャンバスやカスタマージャーニーマップ、エレベーターピッチのようなフレームワークなど。
 アジャイル開発ではMVP(minimum viable product)という「顧客価値があり、利益を生み出せる最小限のもの」を作成し、それに対する評価をもらうプロダクトの機能を考え直すを繰り返す。例えばHobeeeeee!!では新歓で歩き回る感覚を重視しており、パンくずリスト・ログイン・検索機能は最小限のプロダクトには不要として実装しない判断をしている。これまでも私はユーザー体験やプロダクトの機能を考えることに興味があったが具体的な方法がわからなかった。enPiTでこれらのフレームワークやアジャイル開発の片鱗を見ることができ嬉しく思う。今後もイベントに参加したりenPiTのメンターをしたりして深めていきたい。
 
 enPiTを通してチーム自体を改善していくことを学んだ。スクラム開発ではスプリントプランニング・振り返りの繰り返しによるチーム自体の改善が行われる。これは複数人での開発はもちろん個人での研究や普段の生活など何にでも使えると思う。実際Seeeeee:Dチームではすでに1週間を1スプリントにした各自の生活・開発・研究のプロセス改善を始めている。

 モブプログラミング(モブプロ)は一人のドライバー(コードを書く人)と複数人のナビゲーター(実装を考えたり調べたりする人)で行われる。これによるメリットとして、

  • その箇所の実装に関わった人が増えるので属人性が減る。
  • 実装力がある人がナビゲーターになることできれいなコードを知ることができる。また、リアルタイムでコードレビューしているのでコードの質が上がる。
  • 集合知でリアルタイムにプログラミングできる。

があると思う。モブプロを一年弱続けたりゲスト講義でアドバイスを頂いて、モブプロの恩恵を最大限受けるために

  • ドライバーのほうがコードを書ける場合に書き進めないように気をつける。
  • ドライバーとナビゲーターをなあなあにしないようにする。
  • モブメンバーをスプリントごとに入れ替えることで全員がコードの全容を知れるようにする。

のような工夫がされるようになった。Seeeeee:Dでの経験からプレゼンテーションのスライド作成やプロポーザルの作成においてもモブ手法も有用だと考えている。

私はプレゼンをしたり発表したりすること・文章を書くことが苦手であり、春学期にPOだったときも自身を持って意見することはできていなかった。
enPiTでは毎回のレビューやKibelaなどそれをトレーニングする機会があったはずだけど活かしきれず逃げてしまった。これは反省して以後は機会を逃さないようにしたい。

それを次に何に生かすか

  • プランニングと振り返りでカイゼンしていくのは研究や普段の生活など何にでも使えそう。
    • すでに1週間を1スプリントにした各自の生活・開発・研究のプロセス改善をSeeeeee:Dメンバーで始めている。
  • サークルでの開発でもアジャイル思考を取り入れていきたい。
  • これからは発表機会を逃さずに利用していきたい。まずはAgilePBL祭り!!

期間中の自分の主な役割

明確な役割があったわけではが、Nuxt.js, Firestore の経験があったため、テックリード的な立ち位置を取ることが多かったと思う。ゲスト講義でモブプロの話を再度聞いてからは率先してナビゲーターになるようにしていた。
明確にいないときにはスクラムマスターのような立ち回りもするなど後半は時間管理を意識した。
新しいものに触るのが好きなのでmiroの矢印・タイマー・カンバンボードなどで遊んでみたを導入した

スクリーンショット 2021-02-08 15.42.25.png

チームメンバーについて

  • かつやさん(鈴木さん)
    • コミュ力がつよつよでSeeeeee:Dの潤滑油。
    • Vue は初めてだったのに開発後半にはガッツリかけるようになっていてすごい。
    • 天才コピーライター
    • 天才プレゼンター
  • めいてつさん(楊さん)
    • 勉強会を積極的に立ててくれる。
      • 技術的にもチームの結束にも勉強会はとても役立ったと思う。
    • プロダクトに対してたくさん意見を出してくれる。
    • 全体的に強いので見えてるものが多いなあという印象
  • ばっしー(石橋さん)
    • あまり口数が多いわけではないけどプロダクトに対する客観的な意見が鋭かった。
    • Seeeeee:D癒やし枠
    • Gitわからん状態からの進歩が良さげ。
  • にわくん(丹羽さん)
    • スクラムマスター的な立ち位置をとってくれることが多かった。
    • 学習意欲がすっごい旺盛。
    • さくっと記事投稿機能ロジック作ってた(強い)
    • フルリモート参戦でやりにくさもあっただろうけど、できるだけ話してくれた。
    • しれっと会話のメモを作ってくれたり時間を図ったりしてくれた。
  • ちゃんなな(石島さん)
    • 数多くのミームの生みの親でチームの雰囲気を自然と和やかにしている。
    • 天才ムードメーカー
    • 天才ミームメーカー
    • Vue経験者で技術的にも強い
    • デザイン&CSSスキルで一気に Hobeeeeee!!の印象を良くしてくれた。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Help us understand the problem. What are the problem?