Railsで開発した3つのアプリを振り返る

Railsで開発した3つのアプリを振り返る

October 3, 2020

前置き #

このブログで7月頭にプログラミング習得に取り組む旨の記事を投稿して以来、学習を進めてきました。その中で Rails でのアプリ開発を行っていたのですが、今回で Rails の学習は一時休憩にします。そのため、ここで一区切りとしてこれまでに開発したアプリを振り返ります。

プログラミング学習開始初期 #

7月に学習を始めた時点では、Rails はおろかプログラミング自体初心者でしたので、まずは初歩の初歩からのスタートでした。その後 Rails の学習に入り、誰もが取り組んだことがあるであろう、Twitter 風アプリの作成を行いました。ここまでで大体1ヶ月間かかりました。

オリジナルアプリの開発 #

その後、オリジナルアプリの開発を行いました。以降で3つのアプリを紹介しますが、はじめにそれらのアプリをまとめたポータルサイトへのリンクを貼っておきます。

https://supunic.jp/ (後日追記:削除しました!)

1作目:Departure #

記念すべきオリジナルアプリ1作目です。問題集のアプリで、パイロットや航空整備士に必要な資格の勉強ができます。(専門的な分野のため、使う人はかなり限られるとは思いますが…。)

開発期間は3〜4週間ほどでした。

最初のオリジナルアプリ開発であり、あらゆることが初体験でしたので全てにおいて苦戦しました。単純なところでは、Rails で Bootstrap を使えるようにするまでに苦労するといったこともありました。過去の記事で「Rails6 に jQuery と Bootstrap を導入する手順」という旨の記事を書いていたりしますが、これはその時の苦労の結晶であり、二度と同じ轍を踏んでなるものかという憤りの結晶でもあります笑

このアプリ開発を通して特に勉強になったのは DB・テーブル周りでした。最終的には合計 10 個ほどのテーブルになったのですが、どのようにテーブルを分け、関連づけるかといった設計から、どのようにクエリを作れば必要なデータを取得できるかといったところで苦労した記憶があります。

機能的に見ると、アプリ自体は単純な CRUD 処理を行うだけのものですので、特筆すべきポイントはそれほどないのかな、といったところですかね。

まだまだ課題はあると思いますが、最低限利用できるアプリにはなっていると思うので、パイロットや航空整備士を目指す方はぜひ使ってみてください。

2作目:Pollnow #

オリジナルアプリ2作目、投票アプリです。1日1回投票ができて、投票結果を翌日 Twitter でツイートするといったものになっています。

1画面しかなく、1作目(もシンプルでしたが)と比較して極めてシンプルなものになっています。2回目の開発ということもあり、開発期間は短く1週間半ほどでした。

このアプリで新たに取り組んだのは、Rails の Action Cable(WebSocket)機能の使用、Gem の Whenever を用いたスケジューリング、Twitter API の使用でした。

アプリには Action Cable を使用しているため、誰かが投票すると、その時に画面を開いている他のユーザの画面もリアルタイム更新されます。計画段階では、Action Cable を用いて実装するのは苦労しそうだなーと戦々恐々としていたのですが、実際にやってみると意外と簡単でした。

逆に苦労したのは Twitter API を使用する部分でした。このブログでは特に記事を作成してはいないですが、Twitter API の実装については調べると色々出てきますので参照ください。そうはいっても、すんなり一発で機能するってことはなかなかないんですけどね…。

とはいえ、まあ何事もそうですが、API の使用を一度でも経験しておけば、二回目以降に必要な苦労はだいぶ軽減されると思います(…と信じています)ので、初回の苦労がいつか報われることを祈ります。

なお、グラフの描画には Chart.js という Gem を利用しています。ただ、グラフ描画については少々心残りがあります。1つ目は、Action Cable と Chart.js の相性が悪いのか、時々、投票されたとしてもリアルタイム更新がされない時があることです。2つ目は、Chart.js の棒グラフの描画が失敗することがある点です。Chart.js には配列を渡してその中身を描画させているのですが、うまく描画されずになぜか歯抜けのように飛び飛びで描画されることがあります(しかも、わりと)。本番環境でコンソールから追ってみても、Chart.js に配列自体はちゃんと渡せているようなので、Chart.js 側のバグかなと片付けて、自己責任の放棄を試みています。看過できないようであれば、別の Gem に変えてもいいかなというところです。

番外:VPS へのデプロイ #

3作目のアプリの前に、これまで開発したアプリを VPS へデプロイしました。それまでは Heroku で運用していたのですが、まがいなりにも公開するのであれば VPS なりに乗せておきたいよなと思い、取り組みました。

…予想に難くないですが、それはそれは苦戦しました。本番でアプリがちゃんと動くようになるまで最終的に1週間ほど要しました笑

その時の血と涙の結晶は本ブログでもまとめていて、非常に苦労した分かなり丁寧に作った自信作の記事でもあります。

3作目:Caption Fetcher #

オリジナルアプリ3作目、YouTube の字幕を取得してきて動画と一緒に表示するというアプリです。動画の字幕を記事のように読みたいという時にも使えますし、シャドーイングをはじめとした英語の学習にも使えます。面白い使い方としては、字幕設定がされているミュージックビデオを用いて、カラオケのように使うというのもありかもしれません。

私は、プログラミング学習に専念する前は英語を学習していたのですが、その時にこんなのがあったらいいのになーと思っていたのがこんなアプリでした。だから自分で作ったという感じですね。

開発期間は意外と短く、1週間ほどです。

新しく取り組んだこととしては、YouTube Player API(IFrame Player API)の使用と、CSS フレームワークに Bootstrap ではなく UIkit を使用したことです。あとは、これまでのアプリと比較すると、Javascript を使って結構処理を書いたことですかね(まあそれでも元がシンプルなアプリなので、処理はわずかですが)。

もちろん開発中はところどころ引っかかる部分はありましたが、それでも大幅に時間を取られるということはなく、引っかかった内容は基本的に当日中または長引いても翌日中には解決できていました。

これは私が少しは成長したのか、または運が良かったのかは神のみぞ知るところですが、比較的すんなりと開発できて良かったです。

このアプリ、個人的には非常に良いできなんじゃないかと思っています。結構実用的だと思うので、ぜひ使ってもらえると開発者冥利に尽きます。

今後 #

7月頭の記事にも書いた通り、10 月からは G’s ACADEMY というプログラミングスクールに通います。

G’s ACADEMY では、ベースとして PHP/Laravel を使って学ぶことになると思われるので、Ruby/Ruby on Rails とはしばしお別れです。

スクールに通っている最中もこうして記事を投稿しようと考えていますし、アプリを開発した際にはまた紹介できればと思いますので、今後ともぜひよろしくお願いいたします。