9日間で学生がspoonのlive配信の読み上げWEBアプリを作った話。

はりまる

　20文字で要約すると、Webアプリ作りましたっていう自慢です。

作った経緯

　事の発端は10日前、spoonというラジオ配信アプリを潜りながら聞く事が多かったので、個人的にあったら便利じゃね？と思いChrome拡張機能で読み上げ機能を実装し、公開しました。

　twitterで共有したところ、かなりの数のいいねやRTを頂きました。いいねが3桁...生まれて初めて...皆さんありがとうございます。そんな中、広報した当日から何名かに使っていただきまして、使い心地や質問に答えていた時によく言われたのが、
「これ、パソコンないとできないの？」でした。
そうですよね。普通パソコン開きながらspoonの配信してる人は珍しいでしょう。

　あーwebサイトとして作ればできちゃいそう....。まぁ乗りかかった船だし、ちっちゃくてもWebアプリの一個くらい作ってみたかったし。なければ作るの精神で作るか…といった具合でこの物語は始まりました。

　...とはいったものの、初めてこんな大掛かりなもの作るので、3日本気で作って見通しが立たなければおじゃんにしよう。色々作る中で得る知識もあるだろし、ダメでも勉強だと思おう。ということで、基本的には色々調べながら、必要になる機能から作っていくといったのが基本方針でした。

以下記録です。半分備忘録で、ですます調じゃないですがご愛嬌ってことでお願いします。

11/4 Spoonの調査とコメントの取得
　作り始めることを決意。それに伴って、spoonのlive配信はどんな形式で通信が行われているのか調査。なんとなく通信方法がわかったので、手元に作成したページで何度か試し、配信中の枠に流れるコメントを自作のページで表示していくことに成功

11/5 PC(chrome)で読み上げ確認
　Chromeの拡張機能から音声に関する機能を移植し、コメントを読みあげることを確認。
短縮されたリンクをリダイレクトする事に悪戦苦闘。色々試した結果サーバーサイドを作る羽目に。
apiとか作るの大変そうだったので純粋なPHPでやっつけで実装。


11/6 サイトをサーバーへアップロード。
　読み上げたページにクエリを送るランディングページを作る。せっかくなのでレスポンシブなテンプレートをベースに改良。
文面は適当だけど、なんとなくこんな感じのページというベースを作ってherokuを使ってサイトを公開
iPhone7でページを見たところ、コメントが表示されても音が流れなかった。

10/7 Androidでの読み上げ確認
　Webは動くのになぜかiOSで動かないということで、別のテキストを読み上げるサイトをいくつか確認。別のサイトではしっかり読み上げているので、ブラウザが悪いわけではなさそう。
　一旦、androidで試したところなんの問題もなく動作を確認。Spoonのアプリと同時に立ち上げても問題なく動いたため、テスターに公開。


10/8 iOSでの読み上げ確認。
　オーディオ再生制限のせいで音声が出ないのは盲点だった。使っている機能は違うけど、ここに気づかなければ、完成しなかったと言っても過言でない。ちゃちゃっとプログラムを変更してiOSでの動作を確認

10/9 読み上げページの作り込み
　前日まではcssのない、ただのログが出てくるページだったので、ページの構成を考え、表示内容の精査、見た目を調整などを行う。手書きのモックアップは5分位でできたのに、スクロールもしないたった1ページをコーディングするのに1日かかってしまった。というかbootstrapとかで、適当なテーマ選んでぺッと作れば早かったのかも。その代わりと言ってはなんだけど、今まではその場に合うスニペットを探してコピーして、ちょっとパラメータいじるくらいしかしてなかったけど、デザインありきで、純粋なcssをちゃんと理解してかくのはいい経験だった。 これをお仕事でやってる人すごい。

10/10 SEO対策
　あれ?せっかく作ったのに検索で表示されないぞ?ということでgoogle serach console のガイドラインを読みながら、できるだけ対応していく。(気をつけなきゃいけないこと多かった...)

　それに伴って検索で引っ掛けたいキーワードなんかを念頭にランディングページのタイトル、概要、文面なんかを変更。ホームページがGoogleの検索結果の上位に表示されるように調整できてると信じて、クローラに探索するよう要求して寝る。

10/11 HowTo動画、PR準備
　ツイッターカードや使い方動画など公開に向けた準備をする。どれだけ役立つかはわからないけども、この開発記録も広報の1つになるといいなーという願いでgitのPushしたログをみながらまとめた。

10/12　リリース、PR開始

　公開。コメント読み上げなんて長ったらしいので短い愛称を決めたくて、Forkにしました。

配信するのはスプーン、コメント読みあげるのはフォーク

とセットで使っていただければ嬉しい限り。

　今後もちょくちょくバグ直しはする予定。せっかくSEOも頑張ったし、広告でたまにビスコでも買えるくらいの収入になってくんないかなーと模索中。なんかいい広告プロバイダー知ってたら教えてください。

作ってみて

　バーッとつくった割にはいいものが作れて満足でした。全部1人で作ったので、SEO周りとかあまり関わってこなかった分野も経験できたし、色々改善点はあるけど、これ以上は妥協点が難しい上に、ちょうど一区切りついたのでこれで公開しました。

　セキュリティ面とか、デザインとかまだまだ経験も知識も足りない分野が多く感じました。教えてやんよ。とかこの本おすすめ！とかあったら教えてください。もうちょっと強くなりたいです。

　まあ、そうは言ってもphpやjsがちょっと書けるバックグラウンドがあるように、壁にぶつかった時に自力で解決できる分野をちょっとずつ大きくできたんんじゃないかな

ということで僕とForkの9日間これにておしまい。

この記事が気に入ったらサポートをしてみませんか？