デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

【Ruby on Rails開発奮闘記】シンプルな家計簿アプリを作る(3)

こんにちは、koheiです。
前回の記事では、収支登録機能を追加しましたので、今回は収支データを確認する機能を作成します。
※前回の記事は、以下です。

スポンサーリンク

1.仕様(今回追加する部分)

今回作成する部分は以下になります。収支確認画面を選択すると、月次収支確認と年間収支確認を選択でき、選択した月や年度に応じて、収支結果が表示されるようにします。なお、年間収支確認画面では、収支結果をグラフで表示するように対応します。

今回作成する部分のMVCモデルは以下のようになります。
モデルは、今回は新規で作成しません。収支結果を計算し、計算結果をビューやjavascriptへ渡すためのコントローラー「balance_confirm」を追加します。
グラフ描画は、javascriptで実現します。

2.月別収支確認を追加

まずは、以下コマンドを入力し、収支結果を計算するためのコントローラー「balance_confirm」を作成します。

$ bin/rails g controller balance_confirm

各アクションへのパスを追加します。今回、topアクションとshowアクションを追加しました。

config/routes.rb

コントローラーにtopアクションとshowアクションを実装します。(※topアクションは特に計算などの処理がないので空です)

ビューから渡されたyear_month情報をもとに、各科目の実績データが入っている「IncomeValue」や「fixedcastValue」、「VariablecastValue」を取得し、収支結果を計算しています。

app/controllers/balance_confirm_controller.rb

収支確認用のtopビューとshowビューを作成します。
topビューでは、コントローラー側にわたす年月情報の入力画面を作成します。
showビューでは、コントローラー側で計算した収支結果を表示する処理を実装します。

app/views/balance_confirm/top.html.erb

app/views/balance_confirm/show.html.erb

家計簿アプリのTOPページに、収支確認へのリンクを追加します。

app/views/top/index.html.erb

3.年間収支確認を追加

続いて、年間の収支確認画面を作成します。
コントローラーに年間収支確認用のアクション「show_year」を追加します。
収入トータル、固定費、変動費のトータルを計算するサブ関数(cal_income_total,cal_fixedcost_total,cal_variablecost_total)を作成し、年間の収支結果を計算します。
(※サブ関数を作成した関係で、showアクションもサブ関数を使うように変更しています。)

app/controllers/balance_confirm_controller.rb

show_yearへのパスを追加します。

config/routes.rb

年間収支確認用の「show_year」ビューを作成します。
コントローラーで計算した結果をテーブルで表示させます。

app/views/balance_confirm/show_year.html.erb

収支確認ページに年間収支へのリンクを追加します。

app/views/balance_confirm/top.html.erb

4.グラフ対応

4-1.Javascriptパッケージマネージャ「Yarn」をインストール

Ruby on Railsでグラフ描画は、Javascriptで行うため、まずJavascriptパッケージマネージャのYarnをインストールします。

$ brew install yarn

4-2.必要なGemをインストール

グラフ描画はchart.jsというグラフ用のライブラリを使います。
Ruby on Railsでchart.jsを使用するには、「chart-js-rails」というGemパッケージを使います。
また、RailsのコントローラーからJavascriptへグラフデータをやり取りするため、「gon」パッケージをインストールします。
Gemfileに以下を追記します。

Gemfile

以下コマンドでインストールします。

$ bundle install

4-3.chart.jsのインストール

package.jsonに以下を追加します。

以下コマンドを入力しchart.jsをインストールします。

$ yarn install

以下を追記し、ライブラリを読み込みます。

4-4.グラフ実装

新規ファイルchart_sample.coffeeを作成し、グラフ実装部を以下のように実装します。

app/assets/javascripts/chart_sample.coffee

gonを使うため、application.html.erbに以下を追加します。

app/views/layouts/application.html.erb

gonを使って、コントローラー側からJavascriptにデータを渡します。

app/controllers/balance_confirm_controller.rb

ビューにグラフ描画のスクリプトを読み込み処理を追加します。

app/views/balance_confirm/show_year.html.erb

以上で実装は完了です。
bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
以下のように、収支確認トップ画面から、月次収支確認画面や年間収支確認画面(グラフ描画)などが確認できれば成功です。

最後に

以上、RubyonRailsを使ってシンプルな家計簿アプリを作成してみました。
これにスタイルシートなどを作成してレイアウトを整えたり、細かい微調整を対応していけばざっくりした家計簿アプリが完成すると思います。
※一応、ここまで作成した家計簿アプリのソースを以下からダウンロードできます。


RubyOnRailsでのアプリ作成の参考になれば幸いです。

それでは!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン