Zenn
Open47

PartsSync開発日誌

masamasa

S3とCloudinaryどっちにしたらいいのかわからないけど、必要要件としては以下の通り。
・画像の自動リサイズ
・CDNで読み込みを早く表示させたい
・ウォーターマークすぐではないけど入れたいかも
・当面は25GB（Cloudinaryの無料枠）以内の利用となりそう

メリット デメリット
Clourinary ・短期中期的に導入工数が少なそう ・月25GBを超える容量の場合は$99/月必要
・その場合は、S3へ移行必要?
S3 ・コストが安そう
（公式計算ツールによると
写真10万枚で1000円以下の見積もり）		 ・各要件満たすために別々に機能の導入が必要

という感じなので、導入しやすさを優先してCloudinaryで実装してみる

https://zenn.dev/atelier_mirai/articles/755c626f04737c

こちらを参考にしながら、手を動かしつつCloudinaryを無事に実装できそうか検証してみる。1-2日かかるかな。

masamasa

大変そうだな。。1週間は沼るかもしれない。初期スコープではそもそも必要ない機能ではあるし、MVPリリースからは外すべき。ざっくりの難易度を把握できただけでも収穫としよう。

使いたいオプションメモ
・プレビュー機能
・複数枚同時アップロード

masamasa

SourceryとDeviseどちらを認証に使うか

→将来的にユーザー権限管理をしたいので、punditと組み合わせの良いdevise一択

masamasa

Rubocupが覚えがないのに入ってて、なぜかと思ったけどRails7系から自動的にgem追加されているらしい。あと、CI用のファイルも自動的に追加。Railsなんて便利なんだ。

masamasa

https://note.com/io_73/n/n4fbaab3526cf
画像遷移図は上記を参考に作成してみることとする。この流れが一番スムーズにいけるかも。

v0で自然言語でフロントモック作成
↓
ローカルでNext.jsプロジェクトの立ち上げ
↓
V0.devから生成したUIをインストール
↓
localhost:3000をhtml.to.designでスクショ
↓
Figmaでhtml.to.designプラグインを使用して、h2dファイルをインポート
↓
微調整

masamasa

ローカルでNext.jsプロジェクトの立ち上げ

こちら挫折したので、代替案としてbolt.newかGPT-Engineerでモックを作成→デプロイだとうまくいった！

masamasa

メモ
画面遷移図にLPを加える。

masamasa

daisyUIでほしいモーダル無い、、、TailwindUIならあると思ったがdaisyUIのモーダルコンポーネントに別のコンポーネント差し込むことで解決しそう。

daisyUIの良さがあまりわかってなかったが、TailwindUIしかり、Tailwindのユーティリティを詰め込む方式で提供されているUIライブラリもあるらしい。

masamasa

カオスな情報を整理したBefore/Afterの提示のために、スプレッドシートのスクショをモザイクかけて、単月で1000品以上販売されているシートを示せるといいかも。

masamasa

windframeを用いて、tailwindベースの開発にすることにした。それにともない、daisyUIが不要ということで、sprocketsやcssbuilding-rails, jsbuilding-rails等のGem、Node.jsが不要となり、importmap-railsでモジュール管理をして、tailwindcss-railsがあれば開発できることに気づく。

そこで、新しく環境構築からやり直したくなって、rails newしたけどカレントディレクトリに生成されたはずのファイルが表示されなくて、findコマンドとかでも見つからなくて、沼。

結局、新たにディレクトリ作成してそこでdockerfile, docker-compose.yml, gemfile, gemfile.lockを作成して進めたところ無事に解決した。
1から進める際には以下の記事を参考にファイルの中身はコピペした
https://zenn.dev/hs7/articles/2cc4d67650ba69

masamasa

docker compose up時に必要なgemがインストールされていないというエラー発生。

docker compose run web bundle installとしても、docker compose run web bashからbundle installしても改善しない。

↑docker compose buildができていないために起こった現象だった。
その後、database.ymlに追加の記述を行って（理由はわかってない）、docker compose run web rails db:createしてからdocker compose upしたらrailsサーバーが立ち上がった。

default: &default
  adapter: postgresql
  encoding: unicode
  host: db #追記
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: postgres #追記
  password: password #追記
masamasa

windframeの出力するhtmlがクセが有ることがわかってきた。コンポーネント単位をGUIでつなぎ合わせるまでは良いが、コードを出力するときには全体の構成は考慮されておらず、レイアウト崩れが容易に発生するので自分で整えないといけない。

masamasa

deviseは何の苦労もなく導入まではできた。カスタマイズしようとしてGitHub覗きに行き始めたら沼るのかもしれない。けど、それでもCursor使ってるからか、開発速度は使わないのと比べて雲泥の差のような気がする。

ログアウト機能を作成するためにも、ルートのページを売上管理画面（仮）作成して、そこからログアウトフォームを作って、ルーティング、コントローラー、ビューの設定をする。企画初期にUI作成とエディタの選定に力入れたらから開発効率たぶん良くてスムーズで嬉しい。

masamasa

基本的には1テーブルにつき1つが推奨されるようなので、24個もモデル作ることになりそう。何かしらの構造化が必要なのでは？と思わざるを得ない。例）Rails応用カリキュラムにあったポリモーフィックなど。技術面談使おう。

masamasa

deviseのログアウトボタンを設置して、ログアウトしようと思ったらHTTPメゾットがgetでブラウザから送られてしまってルーティングエラーが発生中。原因分析に20分くらい沼っている。

masamasa

どうやらrails-ujsが正しく読み込まれていないっぽいぞ

masamasa

rails-ujsは使えるようになったのに、まだroutingエラーが続く...

masamasa

コントローラーの記述見直したら5秒で治った

masamasa

gpt-o1-miniがGitHubのトークンが外部に漏れてる可能性があるから、今すぐにトークンを更新するように警告してきた。とはいえ、環境変数のファイルはgitignoreに追加済だし、エディタ側のPrivacymodeもonにしてるから問題はなさそう。

masamasa

エディタ内で実装の手引を細かく聞いて、それを基に実装する場合はもうこれは実質issueとして十分な情報量なので、これをGitHubCLIを用いて自動化したい。

AIに細かに聞いた実装手順を要約してマークダウンでチェックボックス化→GitHubCLIにてissue化を自動化したい。

masamasa

ひとまず、GitHubCLIでテスト投稿できるとこまではすぐできたけど、issue化したり、リポジトリに割当て等のオプションがなかなかできない。

masamasa

最初からgh item-createでissue化ができない
↓
gh issue create してから、gh item-addを検討
↓
gh item-addするためにissueのURLが必要だが、URLの取得に詰まる（いまここ）

masamasa
ISSUE_URL=$(gh issue create --title "GitHub CLI チェックリスト" --body-file checklist.md --assignee masaengineer --label "タスク" --json url --jq '.url')

gh project item-add 2 --url "$ISSUE_URL"

これでいけた！

masamasa

できた！シェルを実行すれば指定ファイルにまとまった内容をMarkdown形式で自動でissue化できる

masamasa

まぁ、次回からこの機能使うようにはするけど本来ならコマンド一つ打てば自動でissue用に要約が始まって、Pushするまでやってほしい。現状だと、要約の指示と専用のmdファイルへのコピペは行う必要がある。実現するには、シェルでCursorのAPIを叩く必要がありそう。今の技術力だとちと時間かかりすぎるので、また宿題としよう。

masamasa

GitHubのプロジェクトで「ストーリーポイント」というフィールドに数値を追加するためには、GitHub CLIを使ってGraphQL APIを呼び出す必要があります。以下のように、gh api graphqlコマンドを使用して、指定したフィールドに数値を設定します。

やっぱシェルからissue化しようとしたら、ちょっとまだ自分のスキル感だと自由に扱いづらいな。Reactとバックの通信はGraphQLがよく使われるみたいなので、そのタイミングで再チャレンジするのが学習効率良さそう。

masamasa

なぜGitHubActions公式のCIファイルを使ってるのにエラーが起きるのか。

masamasa

CIファイルの沼から抜け出せない。

ひとまず公式のRubyやgem-pushファイルはRailsプロジェクトには不要ということだけはわかったので削除。

dockerで環境変数を使う辺りで知識不足でAIの提案が何やってるのかわからなくなってコードを補完したり、消したりで沼。一旦飛ばして、時間があるときにUdemyとかで体系的に学習しよう。

masamasa

deviseのconfirmable（新規登録時にメール認証を必須にする）を有効にしたところ、エラーに詰まってしまい2-3時間沼る。

letter_opnerの設定が原因と思われるので以下のデバッグを実行。が、解決しないので一旦confirmableの機能は先送りして別の開発を進める

Devise Confirmableの有効化過程でのエラーと対処方法

エラー1: マイグレーションエラー

エラー内容

add_confirmable_to_usersマイグレーションを実行中にエラーが出た。

対処方法

  • マイグレーションファイルを見直して、confirmableに必要なカラムがちゃんと追加されてるか確認した。
  • db/migrate/20241120080231_add_confirmable_to_users.rbとdb/migrate/20241120080625_add_confirmable_to_users_2.rbの内容をチェックして、重複やミスがないか確認した。

エラー2: メール送信エラー

エラー内容

ユーザー登録時に確認メールが送られない。

対処方法

  • config/initializers/letter_opener.rbを確認して、メール送信の設定が正しいか見た。
  • Gemfileにletter_openerが入ってるか確認して、bundle installを実行した。

エラー3: ルーティングエラー

エラー内容

確認メールのリンクをクリックしたらルーティングエラーが出た。

対処方法

  • config/routes.rbを確認して、devise_for :usersがちゃんと設定されてるか確認した。

エラー4: モデルの設定エラー

エラー内容

Userモデルにconfirmableがちゃんと設定されてない。

対処方法

  • app/models/user.rbにdevise :confirmableが入ってるか確認した。

その他の注意点

  • db/schema.rbが最新の状態か確認して、必要ならrails db:migrateを実行した。
  • Dockerコンテナ内で作業してるなら、docker-compose exec web rails db:migrateとかのコマンドを使うといい。
masamasa

結局、confirmable関係ではなく、recoverbleの実装においても先程のスクショと同じエラーが出る。これ解決できたら、逆にconfirmableもうまくいくかもしれない。

masamasa

config/environments/development.rbに、同じ記述が複数個ある設定がいくつかあったので、これが原因かと思ったが違う様子。

masamasa

解決！エラーの原因は以下の通り

エラーの原因特定

  • エラーメッセージ:

    • NoMethodErrorが出ていて、letter_opener_url=というメソッドが見つからないと表示されている。
    • これは、ActionMailer::Baseにそのメソッドが存在しないことを示している。

  • 設定の不一致:

    • letter_openerやletter_opener_webの公式ドキュメントには、letter_opener_urlという設定は載っていない。
    • だから、誤って追加された設定だと考えられる。

  • 他の設定との整合性:

    • letter_openerやletter_opener_webを使うには、delivery_methodを設定するだけで十分。
    • そのため、letter_opener_urlが不要であることから、エラーの原因と判断した。

解決策

  • config.action_mailer.letter_opener_urlの行を削除する。
  • development.rbの設定を見直して、正しい設定にする。

まとめ

  • letter_openerやletter_opener_webを使うときは、公式ドキュメントを参考にして、不要な設定を避けることが大事。
  • エラーメッセージをよく読み、どの部分が問題かを特定するのがポイント。
masamasa

よし、もともと予定してなかったけどi18n-tasksで国際化されてないロケールを自動的に検出できるようになった！

設定済みの翻訳が未設定と誤検出されるのでもうういいかな、、と一瞬思ったが公式リポジトリを見に行ったら解決した。パスの設定以外にも、専用のファイルをconfigに作らないといけなかったみたい。公式見るのは大事だわ〜

masamasa

知らぬ間にAIのハレーションを信じて、deviseのコントローラーをカスタマイズする方針を採用してしまっていたので、関連のコントローラーすべてとルーティングの設定を標準に戻した。（無事に動作確認OK）

ただし、まだフラッシュメッセージは出てくれないので明日に引き続きデバッグする。

masamasa

そういえば、

#バリデーションエラーの表示
  <%= render "devise/shared/error_messages", resource: resource %>

って入れ込みはあったけど、これはそもそもflashオブジェクトを呼び出しているのか？否。

layout/application.html.erbに以下の記述を入れればflash_messageはブラウザに表示されるようになった。

 <body>
    <main class="relative min-h-screen">
      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>
      <%= yield %>
    </main>

参考
https://arc.net/l/quote/ethvxwgk

masamasa

claude曰く、turboとrails-ujsが競合している...? Rails7ではrails-ujsは不要?
rails-ujsがなんだったか忘れていてさっぱりなので、調べまくらないと消して良いのか判断できない

あと、気になる点としてHotwire導入してるのにログにas TurboStreamではなく、as HTMLとなっている。Turboうまく使えてない？

masamasa

あまり良くわかってないけど、rails-ujsおよび関連記述（app/assets/config/manifest.js, config/importmap.rb）を消してみたけど開発環境では特にエラー出なかったからこのままでいこう

しかしながら、依然としてas TurboStreamとはなっていない。

masamasa

サーバー再起動したらTurbo読み込まれるようになった！

masamasa

Deviseでビューファイルがデフォルトでは味気ない素のHTMLのみだったように、フラッシュメッセージに関する記述もカスタマイズして使う必要がある？
↓
公式をみていたところ、DeviseとHotwireを統合するための処理が書かれていたが、これはすでにできていて問題なさそう。
https://arc.net/l/quote/qakyjjru

Railsガイド曰く

flashはセッションの特殊な部分であり、リクエストごとにクリアされます。つまり、flashは「直後のリクエスト」でのみ参照可能になるという特徴があり、エラーメッセージをビューに渡したりするのに便利です。flashにアクセスするにはflashメソッドを使います。flashは、セッションと同様にハッシュで表わされます。

だそうなので、特に設定していないけどdeviseの内部的な処理によってflashオブジェクトにはアクセスできていて、かつビューファイルへは表示できている。

というか、devise関係なしにRails自体のフラッシュメッセージってどうやって設定してたっけ。
↓
app/assets/stylesheets/application.cssにフラッシュメッセージのCSSを記述しよう的な記事をいくつか見つけたけど、tailwind前提でも同じ...?
→tailwindで上記ファイル編集してみたけどフラッシュメッセージは変わらない。

masamasa

検証ツールのコンソールでは上記のエラーがでるが、バリデーションエラーが起きているということなので、意図している動きではある。フラッシュメッセージの装飾とは関係なさそう。

masamasa

そうか、daisyUIみたいなコンポーネントライブラリを使ってないし、RailsはCSSライブラリなしではデザインまではよしなにやってくれないのか。Tailwind単体でやっていく場合は、フラッシュメッセージも自分でstylesheets/application.cssに記述していく必要があるのね。。

これまで最初からBootstrapがあたってるカリキュラムやdaisyUIの自作アプリしか作ってこなかったから勝手にフラッシュメッセージにデザインあたってて学ぶ機会を逃してた。

masamasa

フラッシュメッセージ自動で消えるようにするためにはTurbo（drive, frames, streams）だけでは実装できなくて、Turboで表示させてからStimirusで自動的に消えるようにすることが必要な模様。