動画配信サービスGYAO!において、Next.jsを用いて機能追加や改善を行いました。

インターン / webフロントエンド

Yahoo Japan

スマホ向けゲームプロジェクトにクライアントエンジニアとして参加しました。
リリース前のため詳細は記載できません。

業務としては主にC#によるゲームロジックの実装、シェーダによるエフェクト・演出の実装を行いました。

インターン / ゲームクライアント開発

CyberAgent, Inc.

2022年4月に情報理工学位プログラムに入学。現在M1で在籍しています。

学部時代に引き続き同じ研究室で音響信号処理の研究を行っています。

研究室のサーバーや計算機、ネットワーク機器の保守管理も行っており、ネットワークやLinux周辺の知識を生かして仕事もしています。
またメンバーの役に立つと思ったソフトウェアについても、運用・管理を行っています。（例：GitLab、ClearML（機械学習実験管理）、Growi（wikiシステム）等）

# 対外発表
## 2022/6/17~18 音学シンポジウム2022（第134回音楽情報科学・第142回音声言語情報処理合同研究発表会）
[音響シーン識別のための注目すべき音を自動検出するニューラルビームフォーマの検討
　ポスターセッション（音声研究会学生ポスター賞）](https://www.sie.tsukuba.ac.jp/news_award/2022/10/31/8839)

## 2022/11/6~10 APSIPA ASC 2022
[Neural Beamformer With Automatic Detection of Notable Sounds for Acoustic Scene Classification](https://ieeexplore.ieee.org/document/9980351)

マルチメディア研究室 / 音響処理に関する研究

筑波大学大学院

業務委託契約でvstプラグインの開発や音楽制作ソフトウェアの開発をしています。
主な開発プラットフォームはiOS、macOSで、信号処理に加えデバイス間通信をはじめとしたネットワークレイヤーの設計・実装を行っています。

自分が携わった製品はまだ一つしか公開されていませんが、公開され次第追記予定です。（下部の関連を参照ください）

業務委託 / オーディオプラグインの開発や音楽制作ソフトウェアの開発

MAGNETICA Studio

インターン・アルバイトとして1年間「pixiv FACTORY」のフロント・バックエンド開発を行いました。

# きっかけ
もともとPixivが提供する多くのサービスを利用しており興味がありました。
さらに様々なクリエイターを支えるプラットフォームでもあるので、自分の理念と重なる部分が多かったことも挙げられます。
また、今回お世話になったFACTORYは非常に凝ったグッズ編集画面をWebで実装しており、
編集画面などの複雑なUIを組むことが好きな自分には非常に魅力的でした。

# やったこと
1年を通して新機能の開発やCM向けの管理ツールの開発を行いました。
予め決まったユーザー向けの機能の実装を始め、
日々遂行されるCM業務の中で不便な点などをヒアリングしてそれを改善する機能の実装などを行いました。

一番苦労した点はドメイン知識の不足と、長期運用からくる巨大なコードベースの把握でした。
FACTORYは様々なグッズ製造に対応しておりそれぞれの製造に関する知識や、
様々な工場や印刷所とのやり取り方法を把握する必要がありました。
また長期運用により古い技術と現在の技術が共存しており、ロジックそのものも巨大で把握に時間がかかりました。既に存在するコードを効率よく把握する能力が鍛えられたと思います。

# 感想
クリエイターとの距離がとても近い現場で、仕事をしていて充実が得られました。
また、長期運用からくる新旧の技術の共存方法など、
息の長いサービスならではの技術的な工夫が非常に勉強になりました。

ありがとうございました。

アルバイト / あなたのアイデアをカタチに「pixiv FACTORY」 フロント・バックエンド開発

Pixiv Inc.

大学3年次の秋～冬にミクシィでインターンを行いました。

# 参加した経緯
ある逆求人イベントに参加した際、ミクシィの人事の方に声をかけていただきました。
生放送を扱うサービスで、モダンなフロントエンドの開発ができることに惹かれ、
夏休みからその年の年末までインターンとして参加させていただきました。

# やったこと
競輪エンタメ「Tipstar」Web版のフロントエンド開発を行いました。
開発はReactで、業務内容は新機能の実装やバグの修正などが中心でした。
モンストをはじめとした人気ゲームを開発しているミクシィさんらしく
ゲームのような質感のUIが非常に特徴的で、
普段webで実装しないようなコンポーネントが多く存在しており、非常に刺激的でした。
苦労した点としては競輪という公営ギャンブルのドメイン知識が不足していたことです。

# 感想
サービス自体が若く、これから更に発展していくフェーズで参加させていただいたことで、
大企業におけるサービスの成長速度や現場の温度感を感じることが出来ました。
また初めてQAエンジニアの方と一緒に仕事をさせていただき、
サービスの品質を担保するという視点を持つことが出来て非常に勉強になりました。

ありがとうございました。

インターン / 競輪エンタメ「Tipstar」フロントエンド

Mixi Inc.

大学3年次の夏にDMMの動画配信事業部でインターンを行いました。

# 参加したきっかけ
ある逆求人イベントに参加した際、DMMの動画配信事業部の方に声をかけていただきました。
もともとマルチメディアを扱うことに興味があり、また趣味で動画編集ソフトやキャプチャソフトを開発していました。ライブ配信に憧れのようなものを抱いていたこともあり、就業型インターンとして1ヶ月間参加させていただける事になりました。

# やったこと
## 概要
（※書けない内容は伏せているためわかりにくい表現が含まれるかもしれません）

ライブ配信を管理・監視するアプリケーションがFlashに依存しており今後使えなくなることから、新規ツールのリプレイスを一人で行いました。

## 使用技術
RTMPはFlashと併用されることが多いストリーミング用のメディアコンテナです。
そのためFlash無しでブラウザで取り扱うことが出来ません。（因みにWebRTCが扱えるプロトコルはRTPです）
よってネイティブアプリケーションとして実装する必要があります。
Windowsアプリケーションが要件だったため。WPFを採用しました。映像のデコードはFFmpegを使用することになるので制約の強いUWPは候補から外しました。

## 結果と感想
1ヶ月という短い時間ではありましたが運用までたどり着くことが出来ました。
一つの配信で同時接続10万人を捌いたDMMの配信システムを直に触ったことで、
実運用されている配信システムの技術を知れて非常に勉強になりました。
さらにその一部となるコンポーネントを開発できたことを非常に嬉しく思いました。

ありがとうございました。

インターン / ライブ配信監視ツールのリプレイス

DMM.com

バックエンド・インフラ系インターンを行いました。
期間は数日であるがCookpadの内部と同じ構造のモックプロジェクトを使用して
Ruby on Rails等の開発を体験しました。

インターン / バックエンド・インフラ系（数日）

Cookpad

2018年4月にに筑波大学、情報学群情報科学類に入学。2022年3月に卒業しました。

# サークル・有志活動
## ゲーム制作サークル
ゲームを制作するサークルに所属していました。
活動内容はゲーム開発以外にサークル内LTやゲームエンジン開発など多岐に渡ります。
開発したゲームはコミケで頒布しました。

## 学園祭実行委員会
学園祭実行委員会に所属し、情報システム局で各種システムの開発・運用を行いました。
最高学年ではwebサービスに関する責任者として、開発・運用の管理を行いました。

## Twin:te
筑波大学生による筑波大学生に向けた時間割・履修管理アプリを開発する有志団体を立ち上げました。
現在も所属しており開発・運用を続けています。

# 研究活動等
## 情報特別演習
情報科学類には本来4年次に配属される研究室に、
1年の段階から参加できる制度が複数あります。
情報特別演習はそのうちの一つであり、興味のある分野の教授から1年間指導を受けることができます。自らテーマを定めて進捗報告を行い最終発表会で発表を行います。
自分は現在もお世話になっている教授の下で2年間2のテーマで演習を行いました。

## COJT
3年次に取ることができる授業で、チームでプロダクトを作る実践型の形式が特徴です。
1年で2テーマ（Web・IoT）に沿ったプロダクトをそれぞれ提案から開発・発表まで行います。
自分はどちらもプロダクトの発起人として開発を主導し両方最優秀賞を受賞できました。

## 卒業研究
情報特別演習でお世話になり、大学院でもお世話になっている研究室でビームフォーマに関する研究を行いました。学部時代には目立った発表は行いませんでしたが、大学院で成果を発表予定です。

筑波大学

技術書展11に友人と合同誌を書きました

普段何気なく扱う音声ファイルの中身について深く書いています。
最後まで読むと .ogg ファイルを自力で生成できるようになります。


技術書展で友人と合同誌を出しました

技術書展11合同誌

大学の研究室でClearMLを導入して実験記録やデータセットの管理を自動化した話です

大学の研究室でClearMLをホストして研究を効率化する

iOS Safariでcss filterを掛けると表示が壊れるときの対処法

M5StickCで振って遊べるMIDIコントローラを作る

現在のポートフォリオサイト

![portfolio3-top](//images.ctfassets.net/27i46hewzrkc/1GwFaqjOmDrDQNqwjs1dzp/2b939c676b75ec51f952f944c011bc23/ogp.png)

# 技術スタック
JAM Stack構成を採用しました。

- Next.js
- tailwind.css
- contentful

# 制作の経緯
2代目のポートフォリオサイトについて3つ問題点を感じたため、
その解決を図るため制作を開始しました。

## 情報の可読性
2代目のポートフォリオはデザイン性を重視したあまり、過度な装飾が含まれ
可読性が低下していました。
また、モバイルデバイスの画面画面で情報の一覧性が低い問題がありました。

## 情報量の不足
自分の成果物に対して簡易的な説明と1つの関連リンクしか載せることが出来ず、
より詳しい説明が掲載できませんでした。

## コンテンツの更新コスト
ポートフォリオの内容は、同じレポジトリ内にあるjsonファイルによって管理されています。
よってコンテンツの追加/更新にはエディタを立ち上げてjsonを編集する必要がありました。
またjsonで複雑なデータ構造を表現するには手間がかかり、人の手で編集するのは現実的ではありませんでした。よって情報量を増やすのに限界がありました。

# こだわりポイント
上記の問題を解消しつつこだわったポイント

## デザインと導線
2代目ポートフォリオサイトはデザイン性に重きをおいていました。
しかしエンジニアのポートフォリオサイトの役割を考えたときに、
可読性を始め閲覧者が欲しい情報にたどり着ける導線の確保に重きを置くべきだと判断しました。
そこで、デザインは装飾は最小限に余白を意識したシンプルなデザインを心がけました。

またサイトマップの役割を果たすメニューは廃止し、トップページを上から見ていくと必要な情報にアクセスできるように導線を確保しました。
これにより、メニューを探す→欲しい情報がどのページにあるかを推測するというステップが不要になりストレス無く情報にたどり着けるようになると判断しました。

## 情報量の強化
一つの成果物に対して1つの「記事」を割り当てることで、柔軟に情報を伝えることができるようになりました。
また、関連記事と言ったコンテンツ間のリンクを挿入できるようになりました。
これにより閲覧者が興味のあるコンテンツにアクセスしやすくなったと考えます。

## コンテンツ更新のコスト削減
ポートフォリオの情報はすべてheadless CMSであるcontentfulで管理できるようにしました。
これによりエディタを開かずともweb上で簡単に情報の追加、修正が可能になりました。
さらに手動管理されたjsonでは管理が難しかったコンテンツ間リンクもUI上でシンプルに作成可能になり、実装することができました。

ポートフォリオ

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

筑波大学生向け時間割アプリ。有志で集まりチームで開発・運用されています。
自分はバックエンドの開発と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アプリとして公開しました。

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

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

Kotlinで開発したクロスプラットフォームな動画編集ソフト。
現在は開発を凍結しています。

![citrus-sc1](//images.ctfassets.net/27i46hewzrkc/7dmQJ0Y3gfGLKeMDVl5EZw/1ce8b7e243565fd67841fa6a2df36000/image.png)

# 技術スタック
UIにJavaFX、動画のレンダリングにはOpenGL、動画のエンコード・デコードにはJavaCVを使用しています。
JavaFXはJavaの中ではモダンなUIフレームワークで、XMLとCSSライクな環境でUIを記述できます。
ハードウェアアクセラレーションが効くためパフォーマンスが良いです。
文字を重ねたり等、動画の表示・レンダリングにはOpenGLを使用しています。
動画そのもののエンコード・デコードにはJavaCVというOpenCVやFFmpegをラップしたライブラリを使用しました。（開発当時、JavaCVのFFmpeg関連でバグを発見・修正を行ったことがあり一応Contributerです。）

# こだわりポイント
このアプリはAviutl・Blender・Premiere Pro・AfterEffectsを参考に開発していました。
自分が使いやすいと感じた機能やUIを詰め込んでおり、拡張性を考慮してプラグインシステムを簡単に導入できるよう設計していました。


Kotlinで開発したクロスプラットフォームな動画編集ソフト

動画編集ソフト Citrus

鼻歌を楽譜に起こし、DAWに入力できるアプリ。

![humming-score-thumb](//images.ctfassets.net/27i46hewzrkc/70iS2yRoOFyzKpZgNM1Jk7/c239323168eed587ec366d957ef60f9a/___________________5pre.png)
![hummingscore-sc2](//images.ctfassets.net/27i46hewzrkc/3oLcE18hXyfHzIZKRj05ar/869ba9a4b2324b6f44bf347def742874/image.png)

鼻歌を歌うことで、カラオケの採点システムのようにリアルタイムで音程を表示してくれます。
録音後はPCに接続することでMIDI出力が行えます。
PlayStoreからダウンロード可能です。

鼻歌を楽譜に起こし、DAWに入力できるアプリ。

HummingScore

クリエイター向け左手デバイス。
デバイスを傾けることで使用するユニークな操作方法でDAWとUnityの操作が行えます。
筑波大学のCOJTの一環として自分が発案し、友人と開発を行いました。

最優秀賞受賞を受賞しました。

# 紹介動画
<iframe width="100%" src="https://www.youtube.com/embed/3Dj3xcKl2-Q?start=382" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

クリエイター向け左手デバイス

Chef

M5Stick単体で完結するBluetoothMIDIコントローラの実装です。
電源を入れた後PCとBluetoothでペアリングするとMIDIコントローラとして使用できます。

```tweet
1340563782850867201
```

```tweet
1341296207197401088
```

関連記事で詳しく解説しています。

M5Stick単体で完結するBluetoothMIDIコントローラの実装

BluetoothMIDIコントローラ

頭部伝達関数(HRTF)を畳み込んで立体音響を再現するアプリケーション

HRTFSimulator

VST/AU/AAX に対応した、音の広がりをコントロールするプラグイン。
信号処理の実装を担当しました。

音の広がりをコントロールするプラグイン

AmbienceEnhancer

過去にBlenderで作った壁紙。

![oreo v1](//images.ctfassets.net/27i46hewzrkc/2zeVTJ1C3aeAFljfPzu1dz/7bd7554f04e8fe30f666bee6f7975c0a/oreo_v1.png)

![Pie](//images.ctfassets.net/27i46hewzrkc/zOIkU343UQEyi9vmCHIN9/4d559213216f0d2a41b4f8e063bcca10/810-2.png)

![Nougat](//images.ctfassets.net/27i46hewzrkc/4Anjof4AQVdngN5JwQ24wL/1593a5cebebeeb394af819e32516acbb/Nougat2-4k.png)

3DCG

趣味でキャラクターイラストを描きます。
創作活動の名義は分けているため、ポートフォリオ用に描いた画像のみ掲載します。

### キャッチ画像
![portfolio3_catch](//images.ctfassets.net/27i46hewzrkc/6XtHYJSnKikbgZDiHm1EHp/fc148b839d665b59aa48f621a04ea5a4/portfolio31-42.png)

### 404
![404_illust](//images.ctfassets.net/27i46hewzrkc/3p5ghR1LY682BcOxeYjeps/34696ace2cf813f6d9ede18dfa90d796/localhost_3000_404.png)

### no-image
![no-image](//images.ctfassets.net/27i46hewzrkc/5jAmTzAZZ1XbMcueBQxQaC/a5a41f8e6ae0e70e116e5f4fb9aa4565/portfolio3-noimage.png)

趣味でキャラクターイラストを描きます

Sota's Portfolio

Sota Ichikawa

Timeline

Works

# Webフロントエンド

ポートフォリオ

雙峰祭HP/WebMap

# Webバックエンド

Twin:te

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

# ネイティブアプリケーション

動画編集ソフト Citrus

HummingScore

# IoT

Chef

BluetoothMIDIコントローラ

# 音響系

HRTFSimulator

AmbienceEnhancer

# 創作

3DCG

イラスト制作

Articles

技術書展11合同誌

大学の研究室でClearMLをホストして研究を効率化する

iOS Safariでcss filterを掛けると表示が壊れるときの対処法

M5StickCで振って遊べるMIDIコントローラを作る

Contact