はじめてのあじゃいるかいはつ

筑波大学のenPiT（ビジネスシステムデザイン）の半年の開発をまとめたものです。

目次
・プロダクトについて
・チームについて
・秋学期の軌跡
・個人的振り返り

# 開発したプロダクト
・青い栞（Galileo Galileiの『青い栞』という曲から）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738388/d668202d-031e-0597-798f-7d56ce24e533.png)


# 開発したプロダクトの内容

https://develop--aoi-shiori.netlify.app/

エレベータピッチ

[蒼い栞] は
[旅行計画をゼロから考えるのがめんどくさい]を解決したい
[旅行に行きたいがツアーで縛られたくない、でも自分であちこち調べるのは嫌だというわがままさん(グループ)]向けの
[旅の栞提案アプリ] です。
これは [提案された旅の予定をカスタマイズすること] によって、
[旅行会社のツアーや比較サイト、Visit A City] とは違って
[ゼロから計画を考える負担を減らしつつ、自由度の高い旅行計画の作成]
を実現できます。

## 使い方
[こちら](https://develop--aoi-shiori.netlify.app/)から接続
観光地が表示されるので、それを入れ替えて最高の旅の栞（旅行計画）を作成する。
google mapやじゃらん等を行ったり来たりしながら調べるのは面倒だし、やる気もなくなりますよね。
そこで、画面一つで完結するプロダクトを作成

Point!
1．カード形式で直観的なUIを実装
2．観光地間の距離と移動時間を自動計算
3．地図を配置することで、場所を調べずに栞作成が可能

# チームについて
素晴らしいメンバーでした。
チーム自体は和気あいあいとしており、欠席した後も丁寧に進捗を説明してくれたり、わからないことがあったら時間をかけて教えてくれるなど、みんなの優しさを感じました。

## メンバーについて
・monokemonoke：プロダクトオーナー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738388/7d9ae1eb-bfc3-07ec-56b8-8feddba6419e.png)
最強のPO。神。なんかようわからんうちにTypeScriptとreact.jsとnetrifyなどの環境構築をすべて進めてくれた。MTの時も進んで話を振ってくれた。人格的にも神。見習いたい。

・えふじ：スクラムマスター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738388/2eacc9ba-c7f9-76ea-2e0c-adc4f9f6f619.png)
マメにMiroを管理してくれた。PBLの管理とか、発表時のタイマー設定とかを知らないうちにやってくれたりする。こういう人がいるだけでチーム開発の進み方は変わるなあと思った。

・えびちゃん
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738388/a803aafa-a41f-f364-22ad-d40a01838c8e.png)
秋から参加してくれました。質問力がすごいと思った。いつでもすぐ質問を積極的にしていてすげえと思った。その姿勢見習いたい。

・ぬたひろば([@nutahiroba](https://github.com/nutahiroba))

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738388/d72a984d-c7c0-0c7f-c5bc-7933ab742e61.png)
置物

## 自分の役割
1．ロゴ　ネット上の適当なサイトで見繕いました
2．CSS周り
主にデザインとかそこらへんやってました（ていうかそれしかしてない）

# 秋学期中のproduct・チームの軌跡
困りごととして**「旅行に行きたいけど計画が面倒」**という課題があり、それに取り組んだ。

1．レジャレコの開発
実は、「青い栞」の前に*フラッと遊びに行ける場所を提案する*ための「[レジャレコ](https://leisureco.netlify.app/)」というレジャーレコメンドサービスを開発する予定でした。しかし、
・行先の選定が困難
・「フラッと遊びに行ける場所がない」という困りごとがそこまで本質ではない
・春に作った「メシレコ」の焼き直しになっている
というようないくつかの問題点があり、EVPから見直しをする結果となりました。

2．EVPの見直し
実際に感じている「こまりごと」を最定義するために、１コマ+αをまるまる使って話し合いました。そして
・普段行くようなところは提案されなくても自分で考えた方が早い
・遊びに行く場所を探すのが面倒ではなく、その予定を立てることが面倒なのではないか
というような点から「旅行計画を立てるのが面倒」という困りごとに変更しました。

3．青い栞の開発
旅行計画を自動提案してくれるサイトとして[Visit a City](https://www.visitacity.com/)があり、時間や場所を指定すると、自動で観光地を並べ替えて提案してくれるサービスがありました。
しかし、これは提案のみにとどまっており、これにカスタマイズ性能を加えることで、新たな価値を生み出すことができるのではないかと考えて開発を始めました。

4．カードの入れ替え機能の実装
画面上で直観的に操作できるように、「react-tindercard」というフレームワークを採用しました。春学期の「メシレコ」の際は、このカードを重ねて擬似的にカードをレコメンドしているような見た目を再現したのですが、今回は、横方向に並べることで、入れ替えで切るように配置しました。

5．移動時間の実装
実際に入れ替え機能を実装した後、追加したい機能がいくつかありました。そこで、フィードバックにて、どの機能を最初に実装したいかと聞いた際に、観光地間の移動時間を計算してほしいという声が大きかったので、移動時間を設定しました。
具体的には、jsonファイルの中に緯度と経度を持たせて計算することで距離と時間を計算しています。

6．地図の実装
次に、旅行計画を作成する過程で、最適な経路を考えるために、mapの表示が次の課題であったため、マップの導入に取り組んだ。ただ、google mapsのAPiが有料であるということで、今回はmapのAPIである[leaflet](https://leafletjs.com/)をreactで動かして実装している。

7．実装できなかった機能
時間の関係で実装できなかった機能が多数ある。悔やまれる。
・UI・UX周り
・道筋を示す矢印をマップ上に実装
・APIをつなげて、全国的に対応させる
今後の開発でも期限を考慮した開発には気を付けていきたい。

# 期間を通した個人的振り返り
今回のメンバーの中で私が一番技術的に劣っていたが、その反面で積極的に知識をつけることができ、いい経験をすることができた。
1年間私を成長させてくれたenPITにはとても感謝している。今後もプログラミングや開発についての知識をつけながら、プロダクト開発を進めていきたい。

【備考】春の個人学習
春学期の個人学習で作成したプログラミング日誌を公開するタイミングを逃したので、良ければ見ていってください。（あわよくば来年の参考に、あとでブログにまとめるかも）
https://regal-whippet-94f.notion.site/b2054734dfab4cd7baa6ca31f3f80357