見出し画像

ふつうの学生が始める Web アプリ開発

kaisugi
こちらは N予備校講師陣および関係者 Advent Calendar 2020 カレンダー 22 日目の記事になります。

自己紹介

教育事業本部でアルバイトをしている大学4年の杉本と申します(2020年12月現在)。普段はプログラミング教材開発などの仕事をさせていただいております。
8日目の @labeneko さんの記事 がとてもに参考になり、刺激を受けたので、この記事では私が今年作った個人サイトについて紹介してみようと思います。私自身は 2018 年の夏頃からアルバイトをしていますが、入社当初は Web 開発の知識がほぼ全くなく、アルバイトをしながら知識を身につけていきました。なので、この記事は labeneko さんの記事よりも受講生に近い立場で読めるのではないか、と思っています。

作ったアプリ

まず先に、自分が作ったアプリの紹介をします。
Spotify WordCloud というアプリを作りました。文字通り、Spotify でよく聴いているアーティスト名のデータから WordCloud（ワードクラウド）を作成するというものです。Web アプリを一から自分で考えて作るのは、自分の中ではこれが初めてです。

一応 Spotify とワードクラウドをご存知ない方のために、それぞれ説明しておきます。

Spotify は世界最大級の音楽ストリーミングサービスで、使っている方も結構多いのではないでしょうか。特に学生だと学割が利くので比較的安く（2020年12月現在:月額￥480）おすすめのサービスです。また、開発者の目線で言うと、Web API が整備されているという点で他のストリーミングサービスよりも使いやすいです。そもそも、Spotify は独自のレコメンドシステムで人気を獲得していったテック企業でもあります。


ワードクラウドとは、テキストデータを可視化する技術の一つです。頻度が高い単語ほどフォントサイズが大きくなるという特徴があります。

画像1


私の作った Spotify WordCloud では、Spotify API からよく聴いたアーティストを頻度順に取得し、そのデータをもとにワードクラウドを作成します。それに加えて、作成した画像をツイートする機能や画像をデータベースに保存して後で鑑賞できる機能も用意しています。これにより、自分の音楽の趣味の変遷を確認することができます。

なぜ作ろうと思ったのか？

labeneko さんの記事にもある通り、「Web サイトを作ろうと思っても何を作ればいいのか分からない」という人も多いと思います（私もそうでした）。なので、Web 開発を始めようというモチベーションが重要です。自分の場合、以下で述べるような複数の理由が組み合わさっていたと思います。

音楽を聴くことは趣味だが、説明するのは難しい。もっとうまい説明方法はないだろうか？ という不満を持っていた

自己紹介で「音楽を聴くのが好きです」というようなことを言うと、決まって「何のジャンルを聴きますか？」「どんなアーティストが好きなんですか？」と尋ねられます。
特定のジャンルやアーティストをよく聴く人なら即答できると思うのですが、私はそうではありません。何となく「良さそうな」音楽なら JPOP でも洋楽でもアニソンでも EDM でもアンビエントでも、何でも聴きます。これは、ストリーミングサービスで音楽を聴く人ならあるあるの現象だと思います。そういう人にとって、この手の質問に答えるのは難しくなってしまいます。
特定のジャンルやアーティスト名を言うのではなく、よく聴くさまざまなアーティストを視覚的に一枚の図にまとめあげられれば、自己紹介でも便利だろうと思っていました。
このように、Web 開発のきっかけは日常生活のちょっとした不満から始まることが多いのではないでしょうか。

似たようなサービスを前から知っていた

もう一つ重要な点としては、既に同種のサービスがあるのを知っていたということです。
例えば私の場合は、ツイートからワードクラウドを作るサービス「クロクモ」を使ったことがあって、面白いなあと思っていました。

https://kumo.lightnet328.com/

ツイートでワードクラウドを作ることができるなら、同じように API が用意されている Spotify でもワードクラウドを作れるだろう、というのは自然な発想です。
このように、Web 開発のもう一つの糸口としては、有名な Web アプリだけでなく個人開発アプリも含めて、色々なアプリを触ってみてアレンジできないか考えてみるというのが良いのではないでしょうか。有名なエンジニアは大抵自分が作った作品をポートフォリオサイトに載せていますから、そういうのを興味本位で触ってみると良いと思います。

どのように作ったのか？

Spotify WordCloud の技術的な細かい部分は、昔 Qiita に書いた記事に説明を譲ります。

一応簡単に述べておくと、バックエンドは Flask という Python のフレームワークで書きました。というのも、自分が使いたかったワードクラウド画像作成ライブラリが Python で書かれていたので、わざわざ別言語に分ける必要性を感じなかったからです。ただ、Flask はいわゆる「軽量なフレームワーク」で、認証やデータベースの部分は自分でよしなに追加する必要があったので、そういうのが事前に用意されている Django の方がよかったかもしれませんね。

なお、リポジトリは GitHub にも公開していますので、気になる方はぜひ眺めてみてください。

Web 開発初心者が一番重要な部分は API 設計だと思います。自分もその点を重視して、リポジトリの README.md に API 一覧をまとめて、いつでも参照できるようにしていました。

スクリーンショット 2020-12-16 13.58.04

デプロイは Heroku にしており、画像情報の入ったデータベースは Heroku の PostgreSQL を使っています（この辺は N 予備校のアプリと同じですね）。
画像ファイル本体は（Heroku のファイルは永続化できないので）AWS S3 に置いています。実は当初はデプロイ自体を AWS にも行っていたのですが、お金がかかるのが面倒になり止めてしまいました...。この辺は、作った Web アプリの規模感と照らし合わせて考えた方が良いですね。

なお、Heroku は無料枠だと自動スリープ設定があり、せっかく頑張って作ったアプリもしばらくアクセスしないと立ち上がるのが遅くなってしまう！という問題が発生してしまいます。この問題に対しては、無料の cron サービスを使って自動で定期的にアクセスするようにしています。例えば私は UptimeRobot というサービスを使って、5分に1回くらいの頻度で Spotify WordCloud にアクセスしています。GAS を使うのでもいいと思います。これさえあれば、いつでもサクサク起動するようになります（もちろん、最初から AWS でデプロイした方が「圧倒的に」速いのですが...）。

作ってからどうなったか？

しばらくは人が来なかった

Spotify WordCloud は 5月のゴールデンウィークの暇な時間に作ったのですが、しばらくはアクセスはほとんどありませんでした。
そもそも Spotify を使っている人は（Twitter ユーザーなどに比べれば）限られています。それに、ワードクラウドを作る上で前提であった「Spotify でログインする」部分が、ユーザーにとってはネックになっていたところもあったと思います。普通に Spotify のアプリで音楽を聴いているだけでは、ログイン/ログアウトを繰り返したりはしないからです。

私自身も日常生活が忙しくなるにつれ存在自体を忘れていきました。

それから半年後...急に使う人が現れた

さて、時が過ぎ11月、私は Spotify WordCloud の GitHub リポジトリにスターがいきなり2つ増えている のに気づきました。しがない学生である私にとってこれは普通のことではありません。もしや...と思って Twitter 検索をすると、実際にワードクラウドを作ってくれている方を見つけることができました！

画像を作ってくれたのは総人数にしてみると10~20人程度で、決して「バズった」というほどではありません。それでも、自分が一人で初めて作った Web アプリが、自分の知らない人に使われるというのは、なかなか感慨深いものがありました。

使われて初めてわかる問題点もあった

なかには、以下のような画像が作られるケースもありました。

"THE" という文字が大きくなり過ぎてしまっています。これは、"THE" のような定冠詞は複数のアーティスト名に出現するため、頻度が高くなってしまうからです。
ワードクラウドを作成する際はこのような高頻度語はストップワードとして弾いておくのが通例ですが、Spotify WordCloud の画像作成においては「アーティスト名の "THE" にはただの定冠詞だけではない意味もあるだろう」という考えのもと、あえてストップワードを設けていませんでした。しかしながら、その考えが完全に裏目に出た形です。
まだ手をつけられていないのですが、画像生成の際に使う単語の統計量の取り方はもう少し精査が必要そうです....。

他にも、Spotify WordCloud のリポジトリにスターを付けてくれた方のつぶやきを見ると「◯◯の部分が処理が被っているのでリファクタリング出来そう」という内容のツイートをされており、冷や汗をかきながらリファクタリングをしたという経験もしました。これも、個人開発の醍醐味だと思います。

まだまだ改良はしたい

個人開発に限らず何でもそうだと思いますが、作って終わりとはならないところがソフトウェア開発の難しいところでもあり、面白いところでもあると思います。
例えば私は React を多少書き慣れているので、Spotify WordCloud を SPA(Single Page Application) にしたい気持ちが前から強くあります。しかしながら工数が結構かかりそうなので手を出せていません。
他にも「画像一覧ページはページ送りできるようにすべき」だとか「submit ボタンは連打防止すべき」だとか、実用レベルのソフトウェアに比べると足りない部分は結構見つかると思います。そういう部分を自分で見つけた時は、GitHub Issues にまとめて TODO として貯めておく とよいでしょう。いつか時間を見つけて改良したくなったときに必ず役に立ちます。実際、N予備校内のプログラミング教材開発においても、GitHub Issues をベースとした開発体制が整っています。


この記事で Web 開発が少しでも身近なものになれば幸いです。
ここまで読んでくださった方はありがとうございました。

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