概要
今回はプログラミング経験がほぼ皆無の私でも1ヶ月程度の勉強で、FirebaseとVueを使ってサービスを公開するところまで行けましたので、開発の動機や意識したところ、苦労したところ、勉強法やモチベーションの上げ方についてもサービスの紹介とともにお教えしたいと思います。
サービス紹介
まずはサービスの紹介をさせていただきます。
今回私が作成したサービスは、YouTube同期再生プラットフォーム DJ7です！
初回のアクセスでは音がならないように設定してありますのでご安心ください。
DJ7では、お友達や恋人など複数人の方々と一緒にYouTubeの動画を楽しむことを目的にしています。
もちろん、お一人でもお使いいただけます。(かく言う私も友達が少ないので普段は一人で使ってます😭)
また、DJ7は無料でお使いいただけます！
(Firebaseは無料ではないのでちょっと苦しいですが笑)
ひとえに同期再生と言ってもいろいろな使い方ができます。
好きなYouTuberの動画を一緒に楽しむ、作業するときに同じ音楽をみんなで聞く。
私が知らないだけで、これよりももっと多くの使い方があると思っています。
ぜひ、みなさん好き好きの使い方をしてみてください😚
また、GoogleかTwitterのアカウントを使ってサービスにログインしていただくと、以下の機能が使うことができます。
- 誰かが作成した部屋に移動する
- 部屋の作成
- ログインされている場合、移動先の部屋が存在しない場合は新たに作成されるようになっています。
- 再生履歴の利用
逆に、ログインしない状態ではトップページに表示されている部屋しか利用できません。
自分たちだけの部屋が欲しい場合、ぜひログインお願いします。
現在は機能も少なく、動画サイトもYouTubeのみの対応ですが、今後機能拡充に努めて参りますので、
ぜひDJ7をよろしくおねがいします！！
なにかご意見・ご要望があればTwitter @imataka7または @dj7appまでご連絡お願いします😋
開発動機
さて、前置きが長くなってしまいましたが次は開発の動機について書いていきたいと思います。
私は普段からDiscordでMusic Botを使って知り合いと一緒に通話しながら音楽を聞いたりしていました。
しかし、機能にはずっと不満を持っていました・・・
曲が1つずつしか入れられない、長い曲を入れたときにそれに割り込んで曲を入れられない(割り込んで曲をいれて、その曲が終わったらもと流れていた曲が途中からはじまるみたいなことがしたかった)、そもそも導入がめんどう、音質がわるい、、、など枚挙にいとまがありません。
なら、自分で満足行くものを作ればいいのではないかと思い、今回のアイデアが生まれました。
今年は自分の中の目標として月に一つはアイデアを形にするというものがあり、本当はほかにも色々アイデアがありましたが、以下の理由でDJ7に決めました。
- 数あるアイデアのなかで自分が一番欲しかったから
- 3日程度で簡単なデモを作り、知り合いに見せたところウケがよく、自分以外にも使いたいと感じるユーザの存在を知り、このアイデアに需要があることを確信したから
また、開発に着手する前に競合の調査も行いました。
動画の同期再生ができるサイトは他にもあったのですが、私が本当に欲しかった機能を備えているものはなく、それを実装したいというのも一つのモチベーションになりました。
DJ7で特に欲しかった機能は以下のとおりです。
- Webで使える
- 音楽の同時鑑賞・動画の同時視聴ができる
- ここまでは競合のサイトにもある機能です
- URL直打ち以外にもYouTubeで検索して曲を追加する
- シークバーの状態を共有する
- 再生待ちリストの順番入れ替え
- 割り込み
- 再生履歴
- ダークモード対応
- 最初からダークモードみたいな色にするのではなくてちゃんと切り替えられるように
- PWA (PCやスマホにインストールできてアプリのように振る舞うサイト)
これらを実現したいという思いのもとに今回の開発に着手しました。
技術スタック
今回の構成はこのような感じです。フロントエンドはVueで作り、バックエンドにはFirebaseを採用しました。
それぞれの採用意図を説明します。
Vue
ほかにReactなども候補に上がりましたが、もともとHTMLやCSSを勉強していた私にとってJSXよりもVueのほうが書きやすかったこと、日本語のドキュメントやQiitaの記事も充実しているかつ、初心者にもわかりやすかった、といった点で採用しました。
Firebase
今回のサービスの肝です。Firestoreの通知機能を使って今回の同期再生は実現しています。これがなかったらDJ7は成り立たないと言っても過言ではないです。
TypeScript
TSとclass-style-componentを採用しました。JavaScriptでも良いですが、型による補完機能やコーディングミス防止などの恩恵が受けられたほうが生産性が高まると考えたからです。
SCSS
単純にCSSより便利だからです。
GitHub Actions
今回はGitHubにpushしたときにFirebaseに自動でデプロイするために使っていました。
CSSのフレームワーク
今回は使いませんでした。CSSを自分で書いてもっと機能や使い方を覚えたいと思ったからです。本当に生産性を高めたければ使うべきです。(ただ、フレームワーク使ってるぽさはなくしたいという個人的なエゴはありました笑)
PWA
いまの時代Webアプリを作成するならば、これに対応するのは必須だと勝手に思っています。
Webの技術さえ使えればマルチプラットフォームのアプリが簡単に作成できるのですごいですよね。
ちなみに競合のサイトの中にはPWAに対応しているものはありませんでした 。
開発日程と体制について
今回は1ヶ月で公開まで持っていくということを事前に決めていましたので、公開するためには何が必要で、何がいらないかといったことは常に意識しながら取り組みました。そのために、実際に知り合いに1ユーザとして使ってもらい意見を聞きながら開発をすすめることにより、要不要の線引を自分の中で明確にさせました。
自分一人で作りたいものを作るのも結構ですが、私の場合いろんな人に使ってもらいたいと考えていたので、すぐにユーザの意見を聞ける環境に身を置けたのはとてもありがたかったです。
また、時間の使い方ですが、まず3日目くらいで同期再生の骨組みを作り、簡単に動くデモを作成しました。先程も書きましたが、このとき知り合いに見せてポジティブな意見をもらえたのが本格的に開発を進めていく強いきっかけになりました。
その後、1~2週間でロジックの部分を作りました。具体的に言うと、検索、曲の追加、部屋の作成、履歴など現在DJ7にある基本的な機能の実装をしていました。他にもGitHub Actionsの設定などもやっていました。
また、欲しい機能はここまでに実装すると決めていました。
3~4週目はサイトの見た目を決めていました。逆に言えば最初の2週間はほぼCSSの記述はせずにロジックの実装のみに焦点をあてていました。現在のサイトのレイアウトを作成やダークモード対応、レスポンシブ対応はこの週で行いました。
5週目はトップページの実装やmanifest.jsonの設定、ドメインの取得などロジックと見た目以外にサービスに必要な部分を設定したり、アイコンを作成したりしました。つい先週のことです。
苦労した点
先程も書いたとおり、一番基礎となる部分は最初の3日程度でできていましたので、今回の場合では実装自体に苦労することはあまりありませんでした。
なので、苦労した・悩んだ点としては、実装ではなく何があればサービスとして成り立つのか、どんなUI/UXならば使ってもらえるか、使っていて楽しいかでした。
こればかりは一人で悩んでいても答えは出てこないと感じ、知り合いに使ってもらい、フィードバックをもらうことで少しずつ改善点や必要なことを洗い出していくことによってサービスとして形になっていきました。
何度も何度もPDCAサイクルを回し、改善点については1ヶ月の間で50箇所以上はあったと思います。
とは言え、まだ自分で満足ができるものが作れたとは思っていないです。
まだまだ自分でも使っていて、欲しいと感じる機能がたくさんあります。
これからも開発を続けることによって、自分のサービスを良くしていき少しでも満足ができる出来にしていきたいと思っています。
また、他に悩んだ点としては収益化についてです。これは個人的な意見なんですが、サービスはユーザに対してなにか価値を提供する以外にも、自分自身に対して収益の目処が立っていて初めてサービスと呼べると思っています。それ以外はただのツール止まりか自己満足です。
なので、DJ7もどのように自分のアイデアをサービスに仕立て上げていくか悩みました。サブスクリプションにして利用できる機能に差をつけるか、広告にするか。
結論から言えばDJ7は広告を収益のモデルにしようと考えています。
サブスクリプションを採用しなかった理由ですが、私の実力がまだユーザの方々に課金していただけるにふさわしい機能や体験を提供できるレベルに至っていないことと、すべての機能を無料で使っていただくことによって、より多くの意見をいただきやすくなると考えたからです。
と言いつつも、本当に収益を上げられるかは未知数ですが・・・
勉強法とモチベーションの上げ方
まず勉強法についてですが、基本的なVueやFirebaseなどの機能については公式のドキュメントをひたすら読んでいました。特にFirestoreのドキュメントはじっくり読み込みました。これについてはQiitaなどの2次情報を見るよりも良いと感じました。
もちろん、公式のドキュメントに載ってないようなことについてはQiitaやStack Overflowが役に立ちました。
また、モチベーションの上げ方、というより保ち方ですが、私は自分が作っているものが少しずつサービスとしての体をなしていく過程を見るのがモチベーションになっていました。また、私の場合はすぐ近くに使ってくれるユーザがいたので新しく機能を実装したとき、サービスを良くしたときにリアクションをくれたことや、意見をもらえたときは新しい目標が見つかった気持ちになり、そういったこともモチベーションに繋がりました。
誰かを巻き込むことが一番モチベーションに繋がると思っています。まわりに巻き込める人がいなければSNSなども活用するのも手ではないでしょうか。せっかく始めたことなら一度は完成まで持っていきたいですよね。
もし一度始めたことをやめるのであれば、そのアイデアを私に譲ることを考慮していただけませんか？
SairiLabサロンについて
SairiLabサロンとはプログラミング初心者が集まるDiscordのサーバです。私も本当にモチベーションが落ちてしまったときは私も覗きに行ってました笑
まだ人数は少ないですが、和気あいあいとしていてとても雰囲気の良いサロンです。
新人エンジニア同士で繋がりたければぜひ来ませんか？
https://discord.gg/nTA2CcQ
少し長くなってしまいましたが、最後まで読んでいただきありがとうございました！
最後にもう一度だけサービスの紹介をして終わりたいと思います！
DJ7は、YouTubeの同期再生プラットフォームです！
YouTubeのURLか検索ワードをいれてQueueボタンを押すだけで、みんなで同じ動画が再生されます。
ご意見・ご要望があればTwitter @imataka7または @dj7appまでお願いします！
それでは、失礼します😋