はこねのはこ

はこねさんの備忘録

じぶんコインの腹筋回数を簡単に記録できるWebアプリを作成しました

はじめに

タイトルの通りです。
うぉぉおぉぉ...できました!!

https://hakohukkin.herokuapp.com/

公開ページ⬇︎ f:id:hakonebox:20181224185603p:plain

管理者ページ⬇︎ f:id:hakonebox:20181224193204p:plain

作った背景とか、技術的なことを メモしておこうと思います。

環境

作成に至った背景

じぶんコインの価値を腹筋に設定した

twitter.com

ひさしさんがリリースしているじぶんコイン。

みなさん楽しそうにじぶんコインを作成して交流していたので、
自分も作成して見たくなりました。

自分にできる価値とは何だろうと考えていたところ、
ふと”腹筋代行”という言葉が浮かんできました。

エンジニアの多くは運動不足(偏見)なので、 運動したいけど、する時間がない、開発が忙しい、仕事が忙しい、ゲームが忙しい...

そんな人たちの代わりに腹筋して代わりに運動不足を解消しようと
コインで手に入る価値に
"コインの数だけ腹筋します"
と設定しました。

f:id:hakonebox:20181224190735p:plain

過去のカウント方法

スマホアプリを使用してカウントしていました。

そういえばいきなり山らさんから1500回きてたんですね....

山ら (@MantleHat) | Twitter

しかしこの場合、誰の文をどれくらいやったかわかりにくかったので、
何か進捗がわかるようなものが欲しいと感じました。

Railsの力でなんとかする

ProgateのRailsを一通り終わらせて、 何かオリジナルで作成して見たいと考えていたので、
腹筋回数を簡単に記録できるWebアプリを作成しようと考えました。

取り入れたRails要素

Progateの復習もあったので、 以下のような要素を取り入れました。

  • 管理者ログイン/ログアウト機能
  • 管理者のみアクセスできるページ
  • データベースの新規追加
  • データベースの編集
  • データベースの削除

プロトタイプ⬇︎

Bulmaの力でなんとかする

Webサービスを作っていると、デザインの壁にぶち当たりました。

デザインわからんってなりました。

そんなことをキョロさんとはなしていたら、Bulmaというフレームワークを紹介してもらいました。

キョロ (@kyoro_net) | Twitter

モダンな色使いが簡単に設定できるので
Bulmaの力でデザインはなんとかしようと考えました。

データベースの確認方法

データベースの確認にはDB Browser for SQLiteを使用しました。

Progateみたいにデータベースを確認したかったとき カワカミヒロトさんに教えていただきました。

カワカミ ヒロト (@hiroto04181996) | Twitter

herokuでのデータベースの編集方法

ある程度できてから、Herokuに展開したのですが、
Heroku上のデータベースの編集の仕方がわからないということがありました
(当時は管理者ページを作成できていなかったので...)

naichiさんに教えていただきました。

naichi (@naichilab) | Twitter

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

おわりに

なんとか見せられる程度まではできましたが、
肝心の腹筋は全くできていないんですよ。

今日から再開するので許してください。