げぇむぷろぐらみんぐ

日々の生活で得た知識、経験を書きます

ReactNativeでミュージックストリーミングサーバーkoelのネイティブアプリ作ってみた

ネタがなかったので、ゲーム関係ないですが、NITMic Advent Calendar 2017 16日目の記事です。
一応うちの部活はゲーム開発を行うだけの部活ではない!(らしい)ので、セーフです。

今までゲームばっかり作ってきていたのですが、最近はあるきっかけから割りとゲーム開発以外もやってみたいなあという思いが一段と強くなり、その流れからReactNativeでネイティブアプリを作ってみました。

今回は、開発環境と、使ったコンポーネントについてだけ書きます。

アプリ開発は初なので温かい目で見て下さい。
完成形はこんな感じです。 個人用なのでUIとか知りません。
iphoneのミュージックアプリを参考に作りました。
とりあえず、目標としていたバックグラウンド再生、シャッフル再生、プレイリストごとの再生はできたので満足です!

f:id:siguma_sig:20171215213921g:plain

ミュージックストリーミングサーバー koel

以前、こちらでも紹介したのですが、OSSな個人用ミュージックストリーミングサーバーを簡単に立てられるのがkoelです。

フロントがVue.js、サーバーサイドがLaravelで書かれており、公式サイトにも書いてありますが割りとモダンな感じです。
OSSなVue.jsのアプリではかなり有名な方らしく、Vue.jsの実装の参考にもされるらしいです。

僕は作業中はずっと音楽を流しているのですが、色んな端末に音源を入れるのが面倒なので使っています。
ですが、公式でiOS/Androidのネイティブアプリが存在しなかったため、今回作ってみようと思いました。

技術選定

サーバーサイドに関しては、API一覧などは存在しないので、頑張ってLaravelの実装を読んでWebアプリで使われているAPIを叩くだけです。

クライアントサイドに関して、初めにSwiftをこの機会に学んでみようかとも思いましたが、直近でReactを使ってSPAな自分用ツールを作っていたので、ReactNativeで行こうと思いました。
また、今回は自分用なのでiOSのみで良いのですが、クロスプラットフォームなところにも惹かれました。

開発環境

初めは、create-react-native-appを用いて開発をはじめました。
Expoというものを利用していて、QRコードで実機での動作確認がすぐできて便利でした。
がしかし、こちらはネイティブプラグインが基本的には利用できず、ネイティブAPIはExpo側で用意されたものだけしか使えません。
音楽再生のネイティブAPIも提供されていたのですが、こちらはバックグラウンド再生ができなかったので泣く泣く諦めました。

結局、react-native-cliからプロジェクトを作り直して開発を行いました。

エディタは、WebStormを使いました。学生のうちに使ってみたかっただけで、基本的にはVSCodeで良さそうでした。
今回は、TypeScriptやFlow、ESlintなどは利用せず開発を行いました。理由は導入が大変そうだったからです。
ただ、このアプリの開発が終わったあとにESlintを入れてみたら大変便利で、非常に後悔しているので、ESlintは少なくとも入れたほうが良さそうです。
Reactのお作法の勉強にもなります。

便利だったコンポーネント紹介

react-native-video
これがなければ作れなかった。
videoとついてるが、audioのみも再生できる。
他にも、サウンド再生系のコンポーネントはいくつかあるが、他はほぼメンテされていなかったりしたのでこれにした。
ボリュームをいじったり、再生時間をいじったりもできる。

redux
言わずもがな
Fluxの概念を拡張して、stateを管理するためのフレームワーク
僕のような素人でも書き方が大体決まっているので、コードがぐっちゃぐちゃにはなりづらかった。

redux-actions
reduxのactionCreatorを決まった形式で簡単に作れる。
実装方法を縛ることで複数人で書くときも書き方が統一されて良さそう。

export const increment = createAction(COUNTER_INCREMENT);

こんな感じで、incrementのactionが作れる。 引数はpayloadに乗っかる感じ。

redux-saga
非同期処理で大変お世話になった。
初めは、redux-thunkを使っていたけど、APIを叩いたりの非同期処理がactionCreator側に有るのがどうにも気持ち悪かったのを同期に相談したら教えてもらった。
redux-sagaで非同期処理と戦うがとっても参考になる。

下のようにAPIを叩いてPromiseを返すメソッドを用意して、

saga側で呼び出して、返ってきた値を用いてactionをdispatchということができる。

導入の際に覚えることがいくつかあるけど、それに見合ったメリットはあると思った。

react-native-router-flux
Webフロントのreact-routerライクに画面遷移が書ける。
初めは、react-navigationを使ってみたが、よくわからなかったので、使いやすそうなこちらにした。
ただ、中ではreact-navigationが動いてるらしい。
react-native-navigationというのもあるらしいが、使わなかった。遷移のアニメーションが豊富らしい?

他には、lodashとかreact-native-vector-iconsとかも使った。

まとめ

初コミットから見ると、約2週間くらいで完成しました。
ネイティブアプリ開発の経験もなく、Reactのアプリ開発経験もほぼほぼないと言っていいくらいだったけどこんな感じなので、割りと取っ付きやすいのかなあと思いました。
とはいえ、パフォーマンスを気にしたりし始めるとまだまだ学ぶことは多そうです。
アプリをリリースするときは、そういうところもきちんとしないといけないと思うし、UI/UXの勉強も必要だなあと思いました。

とはいえ、普段のゲーム開発とは全く違うことをするのも楽しかったです。
こんな感じで就職するまでは、フラフラ色んな技術に浮気しつつ、ゲームも遊びつつ、ゲーム開発の知識も増やしていきたいです。

研究頑張ります…。

コンピュータ倶楽部NITMicの活動

NITMic Advent Calendar 2017 3日目担当のsigumaです。

今年からAdvent CalendarをやってみようとOBで勝手に盛り上がり、勝手に作りました。
1日目のマホウさんも言っていますが、NITMicのエンジニアだけでなく他の役職であるコンポーザー、デザイナーの方々も参加できるように、QiitaではなくAdventerでやっています。

今日はそんなコンピュータ倶楽部NITMicの活動について書こうと思います。

続きを読む

OSSなミュージックストリーミングサーバー、koelの導入と躓いたところ

最近、VPSをKagoyaからVultrにお引越ししました。
そのついでに、ミュージックストリーミングサーバーも変更しようと思いました。
色々調べた結果koelというOSSのミュージックストリーミングサーバーが非常に魅力的だったので、こちらに乗り換えた話と、その際に躓いた点を書きます。

続きを読む

VPSを借りてみてやったこと

先月半ば頃にVPSなるものを借りてみた。

僕はサーバーサイドもインフラの知識もほぼ無いのだが、ずっと前から興味はあった。

だけど、去年の同じくらいの時期に何故かポートフォリオサイトを作り、その際にレンタルサーバーを1年契約で借りていたのと、VPSレンタルサーバーより高いんだぞ〜という情報から月数千円くらいするんだろうなあという勝手な想像で、VPSは借りていなかった。

しかし、先月にレンタルサーバーの契約がそろそろ切れそうだったので、VPSについて調べてみると、思っていたより数倍安いではないか!と気づいた。なんなら、僕が借りていたレンタルサーバーより安いではないか!と。

それで、さらにVPSについて調べていると、レンタルサーバーより色々できて楽しそうだったので、そのまま流れで借りることにした。

で、借りてから半月くらいで色々したので、つらつらと書き残そうと思った。

続きを読む

逆求人のすゝめ

早いもので、もう19卒のインターン申込みが続々と始まりつつあります。

最近、うちの部活の後輩たちもインターンに向けて動き始めていて、逆求人について聞かれることも多いので、まとめておこうかと思います。

僕が去年参加した逆求人イベントは全てサポーターズさんによるものだったので、ここではサポーターズさんに絞って説明しますが、他のイベントでもほぼ同様な結果が得られるとは思います。

それ書いてもらっちゃまずい!みたいなのあったらサポーターズさん、教えてください。

続きを読む

OpenGL(GLSL)のvarying,attribute,in,outについて

OpenGLのストレージ修飾子(inとかoutとか)についてです。

これもあんまりまとまった記事がなさそうだったので自分用メモ

前の記事同様OpenGL学び初めたばかりで、しかもネットの情報のみという浅い知識しか持ち合わせていないので、間違いがあったら教えてもらえるとうれしいです。

続きを読む

OpenGLでテクスチャマッピングをする際の注意点

最近、ふと思い立ってOpenGLを使って簡単なゲーム作れるくらいの知識はつけておきたいな〜と考えて勉強しているのですが、いかんせん日本語の情報が少なく、あったとしてもかなり古いものであり、今とはだいぶ違ったりしていて大変です。

そんな感じでさぐりさぐりやっているわけですが、せっかくなので自分用のメモとしてハマったところをメモっておきます。

 間違っていたら何かしらの方法で教えてもらえるととっても喜びます…!

続きを読む