筑波大学生向け時間割アプリ。有志で集まりチームで開発・運用されています。
自分はバックエンドの開発とAndroidの開発を担当しています。

![twinte-sc1](//images.ctfassets.net/27i46hewzrkc/64cbmfK6ZWWiCdxri0gvCW/0ed317a79073fb3d90a98217819279aa/pixel4-1__1_.png)

# Twin:teのバージョン遷移
Twin:teは過去に何度か大型アップデートを行っており、そのたびに大きく構成が変わっています。

- v1：初期バージョンで自分は開発に参加していませんでした
- v2：フロントにVue(2.x)・バックエンドにnode.js/express
- v3（現在）：フロントにVue(3.x)・バックエンドにnode.js/express/gRPCマイクロサービス

# 現在のバックエンド
v3では機能毎に細かくサービスを分割して協調して動作するマイクロサービスとなっています。
基本的にフロントエンドが得意なメンバーにも開発ができるように言語はTypescriptを使用していますが、一部はgoで動いています。
サービス間はgRPCで通信しており、フロントエンドとはapi-gatewayというサービスを介してhttpsで通信しています。
全てのサービスはlinodeのk8s上で動作しており、CI/CDはGitHubActionで整備されています。

# マイクロサービスを選んだ理由
v2までは一つのバックエンドサービスがすべての機能を実装する一般的なものでした。
しかしv3では機能毎に細かくサービスを分割して協調して動作するマイクロサービスとなっています。
マイクロサービスに切り替えた理由として以下が挙げられます。

## 新サービス実装の心理的負担を減らす
Twin:teは筑波大学生が便利に使えるサービスを開発したいというメンバーが集っています。
よって新しいサービスや機能は思いついたらすぐ実装して公開できる仕組みが必要だと考えました。
仮に全バックエンドが一つのサービスで成り立っていた場合、まず全体のコードの把握が必要になります。また、得意としない言語やフレームワークの場合学習コストがかかります。
こういった新機能を開発したいという気持ちを削いでしまう要因をできるだけ減らすために、また各々が挑戦したいことを既存のコードで制限したくないという思いもありました。マイクロサービスであれば使いたい言語でgRPCが利用できればそれ以外の制約はありません。

## コード把握のコスト削減
v1から始まったTwin:teのサービスは大きくなり、時間割以外の機能も多く実装するようになりました。例えばTwin:teはユーザーから寄付金を募っており決済の実装も行っています。
このようにメイン機能ではない性質の異なる機能を一つのバックエンドとして開発する必要がで出てきました。これにより特に新メンバーがコードを把握することが難しくなりました。
例えば特定の機能を修正したい場合に全体のコードをある程度把握する必要がありますが、サービスレベルで完全に分割されていれば対象サービスを把握するだけで修正ができます。

## コードの流動性
各々が異なる言語・異なる設計でサービスを開発すると将来的に技術的な負債になりえます。しかし、負債になったら新しく書き直すくらいの流動性があるべきだと思っています。
Twin:teは学生によって構成されるためメンバーに流動性もあります。そのため一つのコードベースを長期的に保持することは難しいのです。
マイクロサービスなら小さい単位から新しく書き直すことが可能になります。

# Androidアプリ
Twin:teはチームの規模の観点から、フロントエンドはweb技術で統一しています。
そのためiOS/AndroidアプリのメインUIはWebViewになっています。
ただし、通知機能やウィジェット機能はネイティブで実装する必要があります。

Twin:te AndroidアプリはKotlinで書かれています。
Android12でウィジェット周りのAPIがアップデートされたため利用できないか模索している段階です。

# chrome拡張
大学が使用している学習支援システムManabaで提供される授業の課題情報をGoogleCalendarに転送する拡張機能です。UIはReactで書かれています。

Twin:te

![sos](//images.ctfassets.net/27i46hewzrkc/1KfYf1UPM6Pau0nhZIXHhv/749b188dc9caaad7aade94d024d9b663/_____________2019-12-08_031604.png)

筑波大学学園祭実行委員が企画者との連絡を取るためのシステムを開発・運用しました。
もともと紙で行っていた業務をデジタル化し、業務を効率化することを目的としています。

学園祭に出展したい団体の代表者は本システムに登録後、
実行委員会側が発行するアンケートに答えながら手続きを進めていきます。

次のような機能があります

- ユーザーごとの権限管理（個人情報の可視性のコントロール
- GoogleFormのような直感的な操作でアンケートを作成する機能
- 委員会側の調整結果（場所の割り振りなど）を一括で公開できる機能

質問の回答に応じて別の質問が変化する機能や、調整結果を一括配布する機能が好評でした。
また、前年度まで紙で配布していた調整結果をシステム上で配布できるようになり、大量の紙を印刷する必要がなくなりました。
さらに企画の情報も収集し、来場者向けにGoogleMapライクなWebアプリとして公開しました。

筑波大学学園祭実行委員で企画者との連絡を取るためのシステム

雙峰祭オンラインシステム

web担当長として開発を主導した2019年度学園祭のHP。

基本情報をまとめた一般的なページに加えて、GoogleMapライクなUIで現在位置や企画を検索できるWebアプリを実装しました。

## 操作動画
現在は見ることは出来ないので、当時にキャプチャした動画を貼っておきます。

<iframe width="100%" src="https://www.youtube.com/embed/DZGMpVc_b18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## LT
学生LTで発表しました。

<iframe width="100%" src="https://www.youtube.com/embed/cX13Wwa0Mds?start=6228" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

詳細はLT動画や関連のqiita記事をご覧ください。

筑波大学学園祭のホームページ、WebMapシステムの開発。

雙峰祭HP/WebMap

みんなで同じ曲を聞きながらチャット！音楽で新しいコミュニケーションを。（サービス終了しました）

![myuu-sc1](//images.ctfassets.net/27i46hewzrkc/4lH84lJudBVJknEMyX3xYv/37a0ba85825350be64f6558d5d72e0a8/image.png)

フロント・バックともにすべて自分で開発しました。
SpotifyのAPIを活用してユーザーの再生状況を自動で同期、チャットルームで好きな曲を流すことが出来ます。

みんなで同じ曲を聞きながらチャット！

Myuu

web上で簡単に音楽を作れるアプリです。
筑波大学のCOJTの一環として自分が発案し、友人と開発を行いました。
春季最優秀賞を受賞しました。

# 発表動画
<iframe width="100%" src="https://www.youtube.com/embed/c-l7xawEoDs?start=2530" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# こだわりポイント
## 音再生技術
サウンドフォントと呼ばれるファイルのフォーマットの一種にsfz形式があります。
これは音程ごとの楽器の音が含まれており、これを鳴らすことでPC上で任意の楽器を演奏することあできます。
本来は作曲ソフト等で使用するものですが、形式を解析しsfzをWebAudioAPIで再生できるように実装しました。

## ピアノロール
メロディブロックをクリックするとピアノロールが開きます。
直感的に入力できるDAWレベルの操作性を実現しました。


web上で簡単に音楽を作れるアプリ

MusicSharp

大学1年次に初めて制作したポートフォリオサイト

![portfolio-2018-top](//images.ctfassets.net/27i46hewzrkc/UpbTuiiL2hdDccDLfGUPi/31885bad57fc7ead585481f34730081f/localhost_8080_index.html.png)

# 技術スタック
- Nuxt.js (2)
- sass

# 制作の経緯
初めてホームページを作成した経験は中学時代にさかのぼります。
ところが当時はHTML4が主流で昔ながらの方法でホームページを作成していました。

大学に進学し、HTML5を前提としたモダンなjsフレームワークに触れる機会があったことから、
リッチなポートフォリオサイトを開発したいと思い立ちました。

# こだわりポイント
- ページデザイン
  - 自作の3DCGを活用しておしゃれなデザインを心がけた
- アニメーション
  - cssを活用してページ遷移時に背景の形状が変化させることで探索する楽しさを感じてもらえるようにした


初めて制作したポートフォリオサイト

初代ポートフォリオ

大学2年で作成した2代目となるポートフォリオサイト

![portfolio2_thumb](//images.ctfassets.net/27i46hewzrkc/3xEZWqfth3shLxTijWk0v0/3d320531d8959909c9723991647f72c6/thumb.jpg)

# 技術スタック
- Nuxt.js (2)
- sass

# 制作の経緯
初代のポートフォリオサイトのアニメーション演出に非常に満足していましたが、
よりインタラクティブな要素を取り入れたページを作成したいと思うようになりました。

そこで当時流行っていた流線形のデザインとドロップシャドウを取り入れつつ、
初めて訪問した人たちの目を引くポートフォリオを開発しようと思い立ちました。

# こだわりポイント
- サイドメニュー型のフロー
  - キャッチーなサイドメニューでサイトに何があるか一目でわかるように
- トップ画面のインタラクティブコンテンツ
  - マウスでホバーしたりクリックすると背景に色がつく演出

# 活用場所
大学3年次に参加したインターンの選考過程でポートフォリオが大いに役立ちました。
自分の力量や興味分野をわかりやすく伝える事ができたことにより、
相手と円滑なコミュニケーションを取ることが出来ました。

2代目ポートフォリオ

昔Androidでよく見かけたスライド出来るパネルをVueで再実装しました。
学園祭向けマップアプリで使用しています。

Androidでよく見かけるスライド出来るパネルをVueで再実装

VueSlidingPanel

NekoHackerの曲をスマホでDJできる公式Webアプリ！音の制御を担当。

```tweet
1232636430331064322
```


NekoHackerの曲をスマホでDJできる公式Webアプリ！

NekoDJ

遭難者を救うために学内Mapを作った話

ブラウザ上で音楽編集ができるソフトをNuxt.js+WebAudioAPIで作った話

Works

#Vue