じぶんコインの腹筋回数を簡単に記録できるWebアプリを作成しました
はじめに
タイトルの通りです。
うぉぉおぉぉ...できました!!
https://hakohukkin.herokuapp.com/
公開ページ⬇︎
管理者ページ⬇︎
作った背景とか、技術的なことを メモしておこうと思います。
環境
作成に至った背景
じぶんコインの価値を腹筋に設定した
ひさしさんがリリースしているじぶんコイン。
みなさん楽しそうにじぶんコインを作成して交流していたので、
自分も作成して見たくなりました。
自分にできる価値とは何だろうと考えていたところ、
ふと”腹筋代行”という言葉が浮かんできました。
エンジニアの多くは運動不足(偏見)なので、 運動したいけど、する時間がない、開発が忙しい、仕事が忙しい、ゲームが忙しい...
そんな人たちの代わりに腹筋して代わりに運動不足を解消しようと
コインで手に入る価値に
"コインの数だけ腹筋します"
と設定しました。
「はこねコイン」で入手できる予定の、お金で買えない価値はこちら#じぶんコイン https://t.co/5FzXiZRmQb
— はこね (@hakone_san) 2018年10月14日
コインの数だけ腹筋します
過去のカウント方法
スマホアプリを使用してカウントしていました。
あわわわわ。
— はこね (@hakone_san) 2018年10月15日
このアプリでカウントします! pic.twitter.com/RwLdDfJ9Gh
そういえばいきなり山らさんから1500回きてたんですね....
しかしこの場合、誰の文をどれくらいやったかわかりにくかったので、
何か進捗がわかるようなものが欲しいと感じました。
Railsの力でなんとかする
ProgateのRailsを一通り終わらせて、
何かオリジナルで作成して見たいと考えていたので、
腹筋回数を簡単に記録できるWebアプリを作成しようと考えました。
腹筋の残りカウントをするの地味に面倒なので早急に何か楽するツールを作らねば..
— はこね (@hakone_san) 2018年10月17日
取り入れたRails要素
Progateの復習もあったので、 以下のような要素を取り入れました。
- 管理者ログイン/ログアウト機能
- 管理者のみアクセスできるページ
- データベースの新規追加
- データベースの編集
- データベースの削除
プロトタイプ⬇︎
Railsの力でなんとかする。 pic.twitter.com/e7QPTUic63
— はこね (@hakone_san) 2018年10月17日
Bulmaの力でなんとかする
Webサービスを作っていると、デザインの壁にぶち当たりました。
デザインわからんってなりました。
そんなことをキョロさんとはなしていたら、Bulmaというフレームワークを紹介してもらいました。
モダンな色使いが簡単に設定できるので
Bulmaの力でデザインはなんとかしようと考えました。
Bulmaの配色パターン仮配置して見たら、
— はこね (@hakone_san) 2018年10月22日
残念CSSだった雰囲気がガラッと変わった気がします。 pic.twitter.com/epwwqj7eBm
CSSわからんで進捗悪いです。
— はこね (@hakone_san) 2018年10月24日
デザイン面はここらで一旦止めてRails打ち込んでいきます。 pic.twitter.com/5nV2KPLbFT
データベースの確認方法
データベースの確認にはDB Browser for SQLiteを使用しました。
Progateみたいにデータベースを確認したかったとき カワカミヒロトさんに教えていただきました。
カワカミ ヒロト (@hiroto04181996) | Twitter
その気持ち分かります!多分こういうものを求めているんじゃないでしょうか?https://t.co/4V5oSKigeo
— カワカミ ヒロト (@hiroto04181996) 2018年10月27日
herokuでのデータベースの編集方法
ある程度できてから、Herokuに展開したのですが、
Heroku上のデータベースの編集の仕方がわからないということがありました
(当時は管理者ページを作成できていなかったので...)
naichiさんに教えていただきました。
herokuへのアクセス
heroku run rails c RAILS_ENV=production -a [HEROKU-NAME]
データベース変更時の注意
※データベースに反映させていない状態でアクセスするとエラーになります
heroku run rake db:migrate
Railsのメモ
表の作成
@logs.each do |log|でごりごり表示させています。
app/views/home/top.html.erb
<section class="section"> <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"> <thead> <tr class="is-selected"> <th>日付</th> <th>名前(敬称略)</th> <th>回数(進捗ゲージ)</th> <th>済?</th> <th>補足</th> </tr> </thead> <% @logs.each do |log| %> <tbody> <tr> <td><%= log.day %></td> <td><%= log.name %></td> <% case log.Supplement %> <% when "-" %> <td><%= log.trycnt %>/<%= log.reqcnt %><progress class="progress is-danger" value="<%= log.trycnt %>" max="<%= log.reqcnt %>"></progress></td> <% when "逆腹筋"%> <td><%= log.trycnt %>/<%= log.reqcnt %><progress class="progress is-warning" value="<%= log.trycnt %>" max="<%= log.reqcnt %>"></progress></td> <% when "背筋"%> <td><%= log.trycnt %>/<%= log.reqcnt %><progress class="progress is-primary" value="<%= log.trycnt %>" max="<%= log.reqcnt %>"></progress></td> <% when "腕立て"%> <td><%= log.trycnt %>/<%= log.reqcnt %><progress class="progress is-info" value="<%= log.trycnt %>" max="<%= log.reqcnt %>"></progress></td> <% when "スクワット"%> <td><%= log.trycnt %>/<%= log.reqcnt %><progress class="progress is-link" value="<%= log.trycnt %>" max="<%= log.reqcnt %>"></progress></td> <% end %> <td> <% if log.end %> <span class="tag is-success">Done</span> <% end %> </td> <td><%= log.Supplement %></td> </tr> </tbody> <% end %> </table> </section>
新規追加ボタン
複数のデータを一緒に追加したかったのですが、texareaにnameを設定することで渡すことができました。
app/views/home/setting.html.erb
<tr> <%= form_tag("/create") do %> <th><textarea name = "formday">2018-10-15 19:14:00</textarea> </th> <th><textarea name = "formname">はこね</textarea></th> <th><textarea name = "formcnt">100</textarea></th> <th><textarea name = "formsub">-</textarea></th> <th><input type="submit" class="button is-info" value="新規追加"></th> <% end %> </tr>
config/routes.rb
post "create" => "home#create"
app/controllers/home_controller.rb
def create @logs = Log.new(day:params[:formday],name:params[:formname],trycnt:0,reqcnt:params[:formcnt],end:false,Supplement:params[:formsub]) @logs.save redirect_to("/setting") end
削除
destroyで削除できます。
Progareの削除ボタンを参考にしました。
app/views/home/setting.html.erb
<%= link_to("削除", "/#{log.id}/destroy",{method:"post",class:"button is-danger"}) %>
config/routes.rb
post "/:id/destroy" => "home#destroy"
app/controllers/home_controller.rb
def destroy @logs = Log.find_by(id: params[:id]) @logs.destroy redirect_to("/setting") end
編集
編集方法には悩んだのですが管理者ページの編集したい箇所をtextareaにして、
編集後、"編集"ボタンを押すことで更新できるようにしました。
app/views/home/setting.html.erb
<%= form_tag("/#{log.id}/editupdate") do %> <td><%= log.id %></td> <td><textarea name = "formdayedit"><%= log.day %></textarea></td> <td><textarea name = "formnameedit"><%= log.name %></textarea></td> <td> <%= link_to("-10", "/#{log.id}/subtractioncnt",{method:"post",class:"button is-link is-small"}) %> <%= log.trycnt %> <%= link_to("+10", "/#{log.id}/addcnt",{method:"post",class:"button is-danger is-small"}) %> / <textarea name = "formreqcntedit"><%= log.reqcnt %></textarea> </td> <td><%= log.end %></td> <td><textarea name = "formsubedit"><%= log.Supplement %></textarea></td> <td><input type="submit" class="button is-warning" value="編集"></td> <% end %>
config/routes.rb
post "/:id/editupdate" => "home#editupdate"
app/controllers/home_controller.rb
def editupdate @logs = Log.find_by(id: params[:id]) @logs.day = params[:formdayedit] @logs.name = params[:formnameedit] @logs.reqcnt = params[:formreqcntedit] @logs.Supplement = params[:formsubedit] @logs.save redirect_to("/setting") end
おわりに
なんとか見せられる程度まではできましたが、
肝心の腹筋は全くできていないんですよ。
今日から再開するので許してください。