個人開発「Imemo」の進捗

2024年1月25日2024年1月26日

目次 [ close ]

2024/1/23 ホーム・新規登録画面のレイアウト作成

今日の進捗

今日は、個人で開発している「Imemo」というWebサービスの、新規登録とHome画面のレイアウトを整えてみました。

上の画像のように、新規画面・ログイン画面・ホーム画面しかできていないので、3つの画面のレイアウトを整えました。まだデザインや配色が決まっていないので早くFigmaなどを使って考えていきたい。

フロント側は、html css bootstrap バックエンドは Rails を使用しています。

ホーム画面のレイアウト

今までは、ログインをしないとマンダラート機能が使えなかったのですが、ログインしていなくてもお試し程度に使ってみたい方向けに、ホーム画面にマンダラートを設置しました。

「エンジニアはコードで語る」というので、下にコードを載せておきます。

index.html.erb (ホーム画面のマンダラートのコード)

<h3 class="mb-3">マンダラート機能</h3>
  <div class="container-fluid center-block" style="max-width: 1000px;">
    <div class="row">
      <% range = 1..9 %>
      <% range.each do |i| %>
        <div class="col-sm-4 p-1">
          <div class="container-fluid">
            <div class="row">
              <% range.each do |j| %>
                <div class="col-4 p-0">
                  <input type="text" class="cell" name="body<%= i %><%= j %>" style="width:100%; height:60px;">
                </div>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>

application.scss


@import "bootstrap";
@import "font-awesome";

body {
  margin: 0 auto;
  text-align: center;
  padding:0 1rem;
}

全体的に中央ぞろえにしたかったので、このような設定にしました。また、ホーム画面とログイン画面などで、個別にSCSSを適応したかったので、app/assets/stylesheetsに、それそれの画面のＳＣＳＳのファイルを作り、読み込めるようにしました。

詳しくは、以下のコミットに書いてあります。

https://github.com/iwatanabee/Idea-memory/commit/49a0f5f5f40a5161d226f4416606905087be0cb6

2024/1/24 テストコード・CI/CDを作成

今日の進捗

今日は、テストコードとやらを書いた。　明日が期末テストなので、少ししかコードが書けなかった。

システム開発において、テストコードとCI/CDは必ず使うので、ここいらで試しに使用してみようと考えた。

テストコードは、rspecとfactory_botで作成し、試しにdeviseの認証ができているかを確認するコードを書いてみた。

CI/CDは色々考えた結果、GitHub Actions を導入することにした。Circle CIの方がビルドが早いらしいが、Github Actions の方が管理がしやすいと理由から、導入した。

導入方法は、以下のドキュメントを参考にした↓

テストコード：　https://github.com/heartcombo/devise?tab=readme-ov-file#test-helpers

GitHub Actions：https://docs.github.com/ja/actions/quickstart/

とりあえず、rspecのお試しテストコードとActionsが導入できたので、今日は良しとする

docker-compose exec web bundle exec rspec

HomeHelper
  add some examples to (or delete) /myapp/spec/helpers/home_helper_spec.rb (PENDING: Not yet implemented)

User
  User Registration
    name, mail, password, password_confirmation registration

Homes
  GET /
    returns http success

home/index.html.erb
  add some examples to (or delete) /myapp/spec/views/home/index.html.erb_spec.rb (PENDING: Not yet implemented)

Pending: (Failures listed here are expected and do not affect your suite's status)

  1) HomeHelper add some examples to (or delete) /myapp/spec/helpers/home_helper_spec.rb
     # Not yet implemented
     # ./spec/helpers/home_helper_spec.rb:14

  2) home/index.html.erb add some examples to (or delete) /myapp/spec/views/home/index.html.erb_spec.rb
     # Not yet implemented
     # ./spec/views/home/index.html.erb_spec.rb:4


Finished in 5.12 seconds (files took 4.04 seconds to load)
4 examples, 0 failures, 2 pending