まだ見ぬ楽曲と出会わせることを目的として、集合知型音楽キュレーションサービス「[mureQ（みゅーりっく）](https://mureq.com/)」を作成しました！

![mureQ(ミューリック)には様々な楽曲リクエストが投稿されている](//images.ctfassets.net/wn7vo213onfn/327gOpZK1btTZv2SvqthDR/6dc63837405ee4d3a530c31e859ffe0b/mureq.com_requests_gIWNyOlN4p.png)

## mureQって何？

Yahoo!知恵袋のように、どんな楽曲がほしいかをリクエストとして投稿すると、そのリクエストに応えられるユーザが楽曲を紹介していって、最終的に10曲分のプレイリストが出来上がるといったサービスです。

具体的な使用方法は次のような感じです。追いコンのスライドショーのため、しんみりしてしまうような楽曲を探していたのですが、普段激しめの楽曲ばかり聴いているので、3、4曲ほどしか知っておらず、困り果てていました。
そんなとき、こちらのサービスで「追いコンのスライドショー用に先輩たちをしんみりさせるような楽曲がほしいです」というリクエストを投稿すると、それに合った楽曲（ex. 奏・放たれる・サーチライト etc.）が回答として投稿されます。

## 開発に関するお話

### 使用技術

#### フロントエンド

- HTML / CSS
- React
  - firebase（Twitterログイン認証に使用）
  - redux
  - songle-widget

#### バックエンド

- Apache
- PHP
  - Slim3
- MySQL
- [YouTube Data API](https://developers.google.com/youtube/v3/getting-started?hl=ja "youtube data api")
- ニコニコ動画 動画情報取得API

### 振り返り

2018年8月から始動し、一度はα版のリリースをしましたが、そこから幾多のアップデートを経て今に至ったサービスです。開発始めたての頃はjQueryを駆使することしかできず、Spotifyのように音楽を再生したままページを横断できるといったサービス形態にするのは不可能だと思っていましたが、CAの長期インターンや独学を経て、最終的にはReact + reduxを駆使して理想通りのサービスを実現することができ、WebフロントのスキルはmureQと共に向上させてきたなとしみじみ。

Songle Widget APIを使用したとはいえ、動画の扱い方がとても難しくて本サービスの実装で１番苦しめられました（結局ベストアンサーがわからず、力技で動作させるような形をとってしまった..）。

## 宣伝

以下のURLで閲覧可能なので、お時間がある方はぜひ体験してみてください（動画を扱っているのでWi-Fi環境、PCでの閲覧を推奨します）。

> [mureQ あなたが知らない良い歌をきっと誰かが知っている。 | https://mureq.com](https://mureq.com)


mureq thumbnail

mureQ

自己紹介をしつつ、これまでの制作物や研究成果、趣味の旅行の記録を掲載していくホームページを作成しました。モチベーションとしては、CMSを導入したホームページを持っていなかったことと、冬の長期インターンから今までインプットしてきたWebフロントの知識・スキルをアウトプットする場が欲しかったことがあげられます。


## 開発のお話

せっかくホームページ作るなら未だに習得していない技術を盛り盛りに盛り込んでしまおうと思い、ホームページ作成を通じて習得したい技術を洗い出しました。

- webpack関連：これまでcreate-react-appを乱用していたため、中で起きていることがよくわかっていなかった。
- TypeScript：冬のインターン以来書く機会がなかったので、書ける環境をつくる所から体験してみたかった。
- Lint：研究室内チーム開発中、メンバーによって異なる書き方が1番気になってました。

また、個人のホームページにあまりお金はかけたくなかったので、サーバーは借りず、CMSにContentfulの無料枠、ホスティングサービスにNetlifyを利用しました（ドメイン取得したので年間1000円くらい？）。

### 使用技術

#### フロントエンド

- HTML/CSS
- TypeScript
- webpack
- React
  - marked
  - react-router
  - react-helmet
  - styled-components

#### その他

- Contentful
- Netlify

### 振り返り

- @fortawesome丸ごと突っ込んだらパフォーマンスが激落ちした
  - `webpack-bundle-analyzer`の存在を知り、パフォーマンス低下の原因を突き止められた
- API KEYやAccess Tokenを秘匿化したかった件
  - [ソースコード](https://github.com/junkisai/homepage)をpublicにしたくて`.env`で管理して`dotenv-webpack`を使えばいけると思ったら、Netlify側でビルドエラーが起きた
  - Netlify側の設定もきちんとしてるのにどうして！と思ったら、インスタンス生成時に`systemvars`のプロパティを`true`にする必要があった。
- TypeScriptの所感
  - 型チェックつえー
  - 入力補完マジ便利！
  - `Interface`のおかげでコンポーネントにどんな`props`がいるのか見返すのが楽になった！しゅごい！
  - 品質やチーム開発が上がりそうだなと思った反面、開発速度が落ちてしまった（tsconfigの設定方法の理解に時間がかかった・型定義ファイルがないときの対処 etc.）んで個人で書く分にはそこまで必要性を感じないなというのが正直な感想です（単にTypeScriptに慣れていないせいか..）
- Contentful
  - 無料枠ではGraphQLを利用できないことに気づくのに丸1日かかった。書いてみたかったなGraphQL。
  - でも無料枠は5000レコード（4画像添付した記事を1000記事投稿可能）もあり、課金するまでもないのでGraphQLは別の機会に使ってみます。
- デザイン
  - コンポーネントを作成する度にデザイン志向が変わってしまい、全体の一貫性が取れていないような仕上がりになってしまった。
  - デザイナーは偉大な存在


また時間ができたら、この辺を実装していきたいです。

1. ページ遷移時にページトップにスクロールさせる
2. パンくずリストコンポーネントの追加
3. データ読み込み時のロード画面の挿入

homepage hero

ホームページ

以前作成した図書管理システムのコードが非常に管理しづらいものになっていたので、この1年間で培ってきた技術力を総動員してリニューアルしてやろうと思ったのがきっかけです。


## 内容説明

研究室の本を管理（貸出返却・新規本の登録）をしてくれるサービスです。
入力の手間をできるだけ減らすために、本はISBNコードで管理し、本棚の近くにバーコードリーダーを接続したタブレットPCを設置しています。


### 機能

1. 書籍検索
2. 貸出処理
3. 返却処理
4. 本の登録

### ページ

#### 1. トップページ

新刊情報と書籍検索結果が表示されるようになっています。

![トップページでは新刊情報と書籍検索結果を表示](//images.ctfassets.net/wn7vo213onfn/4qXIxZu08RgBmAO96Qnsbg/d25ee2deb6105e47189478508d91f395/2019-04-13_23.56.45.png)


#### 2. レンタルページ

借りる本のバーコードを読み取り（複数冊レンタル対応）、操作しているユーザのアイコンをタップすると、レンタルできるようになります。



#### 3. 貸出一覧ページ

誰がどの本をいつから借りているか一覧で見ることができます。返却手続きもこの画面で行います



#### 4. 新規本登録ページ

研究室に新たな本が導入された際は、このページから登録手続きを行ってもらいます。

![新規本を登録している様子](//images.ctfassets.net/wn7vo213onfn/eAIrR8dQtRTjGujzmy2LW/4a478227ceb1af994477755766e94921/library_add_book.png)

## 開発のお話

リニューアルポイントは以下の3点です。主に私が卒業した際、次にコード管理を任された人間が理解しやすく、アプデが容易なコードを書くということがポイントです。

1. APIのREST化（以前は貸出リストの取得は~~~.phpにアクセスみたいなことしてて非常に汚かった）
2. システムのSPA化（久しぶりにコードみたら、jQueryで一生懸命カキカキした形跡があったが、まあ汚かった）
3. レンタルユーザのバーコードでの管理を廃止（バーコードリーダーでピッピするのが楽しくて、本の読み取りのみならずユーザもそれぞれにバーコードを発行し、それを読み取ってもらうことでユーザ識別をしていた）

また、こちらの開発と同時に[mureQ](https://junkisaito.com/#/products/2cAcJrNeXBClUsjaOiwW1L "mureQへのリンク")と自身の[ホームページ](https://junkisaito.com/#/products/41yPR9ojY0E8OKZULxEEXD)の開発を抱えていたので、開発に時間をかけたくないという私情が入りこんだ結果、以下のような技術を選定しました。

### 使用技術

#### フロントエンド

- HTML/CSS
- JavaScript
- React（今回はスピード重視だったのでcreate-react-appを使用）
  - axios
  - react-router
  - react-helmet（titleタグの変更だけですが）
  - styled-components

#### バックエンド

- Apache
- MySQL
- PHP
  - Slim3 （REST APIさえ作れればよかったのでとにかくシンプルで開発コストがかからなそうという理由で）

### 振り返り

開発はトータル25時間ほどで終了しました。フロントエンド・バックエンド部分は15時間ほどで終了したのですが、その後`.htaccess`と`react-router`に振り回されました...

`saito.nkmr.io/XXX`直下にapiフォルダとフロントのビルドしたファイルたち（html, css, js）を置くとき、`saito.nkmr.io/XXX/api/xxxx`にアクセスする際は`saito.nkmr.io/XXX/api/index.php`に、その他のアクセスはすべて`saito.nkmr.io/XXX/index.html`にリダイレクトさせる方法と、サブディレクトリをルートとして扱うとき、`react-router`の`basename`を設定する必要があることを覚えました。

> [How to deploy a React app to a subdirectory | https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1](https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1)


2019-04-13 23.56.45

研究室図書管理システム

おとにわは音楽キュレーション型ゲームです。他の人のにわに行って自分の知らない曲や気に入った曲を集めましょう！

集めた曲はタネとしてあなたのものとなり、あなたのにわに植えることができます。

植えたタネはハナとなって、あなたのにわで音楽を奏でてくれます。たくさんのタネを植えていろんな音楽でいっぱいにしましょう！

音楽の情報（音程、ピッチ等）によって、咲くハナの種類は異なります。私たちがずかんを用意したので、そのずかんにたくさんのハナの情報を載せてください！（ずかんを埋めるといいことがあるかも...？）



otoniwa_hero

おとにわ

2017年に開催されたLINE BOT AWARDSに応募した作品です。ご好評をいただいており、友だち数590人を突破しました（2018年3月）。登録TDL・TDSのアトラクションの待ち時間・レストランの情報・現在地から最も近いトイレおよびポップコーンの場所などをみることができるLINEbotをつくりました。クリックすると弊作品の詳細を見ることができます。

詳細は[こちらのページ](https://saito.nkmr.io/disneynavi/)をご覧ください。

Product

mureQ

ホームページ

研究室図書管理システム

おとにわ

東京ディズニーリゾートご案内bot