2026年3月の近況

最近

ChatGPT音声入力会話モードで資格勉強

  • シラバスを食べさせた状態で、テキストを読み上げて、それに相槌と解説を返してもらってる。
  • 朝会前にやると目が覚めて喉が開ける。
  • 俺様系イケメン御曹司とか性格をつけるとおもしろい。

買ってよかったもの

シルク手袋

[BiURU] ナイトグローブ シルク手袋 絹 手荒れ uvカット ハンドケア (ブラック22FW, M)

  • 手指が乾燥やらで荒れるので寝る時に保湿してこれを着用。
  • サイズが小さいのと、黒で汚れ目立たないのと、手首長めで外れにくくていいです。
  • 何日か続けたら結構よくなる。

難消化性デキストリン

LOHAStyle(ロハスタイル) 難消化性デキストリン 顆粒 400g 約40日分 水溶性食物繊維 サラッと溶ける フランス産 無添加 とうもろこし由来 ファイバー

  • 食後の眠気対策に血糖値の上下を抑えたくて。
  • ぬるま湯に溶かしたときはいまいちだったが、めがぶに混ぜてみたら違和感なく摂取できた。
  • 正直よく分からないが悪くない気がするので続けてみる。

ニス

和信ペイント(Washi Paint) 水性ウレタンニス 屋内木部用 ウレタン樹脂配合 低臭・速乾 透明クリヤー 130ml

  • お気に入りの防水加工されてない紙とか木製の箱にこれを塗ったら水を弾いていい感じになった。

カニスクイーズ

youtu.be

  • ふわっふわのロールパンの手触りで最高です。
  • 机に置いといて考え事しながらむにむにしたり。

読んだもの見たもの聞いたもの遊んだもの

のんのんの日常チャンネル

のんのんの日常チャンネル 1 (Seasons)

ハイスペイケメンと幼馴染に愛されちゃってどうしようなのにずっと不穏〜。これは綺麗に終わるんだろうか。

ファミレスいこ

ファミレス行こ。 上 (ビームコミックス)

もう文学なのでは。おそらく長年狂児を心に住まわせた作者さんは相当な激重感情をもとに筆を走らせているはず。

入居条件:隣に住んでる友人と必ず仲良くしてください

入居条件:隣に住んでる友人と必ず仲良くしてください

夏目友人帳とか親しみやすい感じのホラーだけど怖いところはちゃんと怖くてよかった。読み上げもあっててオーディブル版おすすめです。

近畿地方のとある場所について

近畿地方のある場所について

白石監督の映画でよく出てくるやつが見れます。

ドラマ版ゴールデンカムイ

www.netflix.com

二階堂がすごい二階堂だったり配役がすばらしい。

Stardew Valley

www.youtube.com

ずっとできる。前世ではシェーンと結婚してストーリー最高だったけど今世はどうしよう。みんなと結婚したい。

2026年2月の近況

最近

AI健康相談がいいぞ

情報

  • ChatGPTにいろんな情報を詰め込んで、自分に合った健康アドバイスがもらえるのがすごく良い。
  • 入れた情報はこんなかんじ。
    • 身長、体重、年齢など
    • 食生活や運動習慣
    • 理想の状態
  • 入れといた情報をもとに回答くれるので、自分に合ったアドバイスっぽいのが出てくる。
  • アドバイスが上手くいかなくても、やってみた結果を伝えると調節した案もすぐ出してくれるので改善のサイクルが回しやすい。
  • ジムで何のマシン使えばいいのかとか、睡眠品質向上のために中途覚醒防ぐにはとか、食後の眠気を抑えるにはとか何でも聞いてる。

バイブコーディングで爆速自作サービスできた

  • えらすぎのAI活用版みたいなのをClaudeCodeで作ってみた。
  • やったことを伝えるとDJがあなたが主役のパーティを開催するサービス。
  • 数時間でほぼ完成してすごい〜。
  • サービス内のAIはGeminiの無料枠を利用したが、思っていたより全然簡単にできてしまった。
  • まだ課題がちょっとあるでお知らせとかしてないが4月くらいにちゃんと公開したい。
  • アイデアはあっても大変そうで後回しにしていたことがAIのおかげでハードルが下がってよい。

買ってよかったもの

昔のMacみたいな置き時計

  • 布団から離した位置に目覚まし置きたくて購入。
  • なんらかの権利大丈夫?な感じするけどとてもかわいい〜。
  • 平日のみのアラームとかかけられていい感じ。

スープカップ

www.yoshiyasukato.com

  • 器と暮らし市に行った時に一目惚れで購入。
  • 電子レンジも食洗機もいける優れもの。
  • 味噌汁でテンション上がるようになったので買ってよかった。

けんもこう言っている。

プロテイン

  • ジムに行き始めてタンパク質を気にし始めたがどうあがいてもプロテインなしだと足りないので購入。
  • なんか身体に良さそうなのでこれにしてみた。甘くない。
  • これにすっきりCa鉄と水(100mlずつ)とバナナでミキサーするといい感じの飲み物になる。もともと牛乳風味なので水をちょっと入れた方がおいしい。

セルフまつげパーマ

  • 不器用でも意外ととそれっぽくなったのでサロン行かなくてもいいかもしれない。
  • 何回かやればもっとコツ掴めそう。

クラフトパンチ

  • 人から貰ったものの包装紙が捨てられない人間なんですがこれでくり抜いてノートに貼ることで残せることに気がついた。

読んだもの見たもの聞いたもの

ひゃくえむ。

www.netflix.com

  • 原作まだ読んでないけど良いアニメ化な気がした。
  • 加速するところの演出とか良い。
  • CGとうまいこと合わさって全体的にいい感じになってた。
  • 仁神が好きです。

超かぐや姫

www.netflix.com

  • 立川がでてきて嬉しい。
  • SAOとかサマーウォーズとかこういう近未来バーチャルで盛り上がってるのはわくわくする。
  • 世代ど真ん中のボカロ曲がいっぱい出てきたのあがった。

サンクチュアリ

www.netflix.com

  • 地面師といいネトフリドラマいいですね。
  • 1話からピエールがまた悪い顔しててうれしくなっちゃった。
  • バイオレンスメインなのかと思ってたけど、意外と王道の成長物語だった。
  • 90年代のジャンプ読んでた世代に刺さりそう。
  • 緊張と緩めるバランスもよい。
  • 人柄を伝える描写が上手い。

CURE

CURE

CURE

  • 役所広司
Amazon

  • 役所広司が若い!
  • 90年代の雰囲気が感じられるの良いです。
  • この時代の人間の精神に興味持ちつつみんなよく分からなくて不安をまぜこぜにしながらエンタメにしているのがおもしろい。
  • あの人の家の壁にあれがあったシーンが静かなのに怖くてとてもよかった。

コンビニ人間

  • ここまで極端ではないにしろ人間のふりする感じは分かる〜となるんじゃないかみんな。
  • 終わり方がよい。オーディブル版の大久保佳代子さんの朗読も合っててよかった。
  • 世界99』も聞き始めたんですが、だいぶしんどくなるので休み休み聴いている(でもおもしろい)

【咳をしても一人】自由律俳句の大家、尾崎放哉の知られてない句が面白すぎる【8ヶ月で3000句量産】

www.youtube.com

  • 数人が集まってなんかする系の動画この世にいっぱいあるけど、最近だとこの企画が飛び抜けて好き。
  • 良すぎて全集買った。
  • しんみり読むよりこの動画の感じで読むのが正解かもしれない。

おでかけ

~パリ発、チョコレートの祭典~ サロン・デュ・ショコラ 2026 www.mistore.jp

  • 毎年恒例行事。
  • 年々かわいい缶を買うイベントと化している。
  • 今年は会場でチョコまぜそば食べました。意外と合う。来年もなんか食べたいね。

麻辣担

tabelog.com

  • 流行りの麻辣担を食べてみた。
  • ホルモンとか香草系とかを入れたら未知の食べ物感すごくてよかった。
  • メイドインアビスのなれ果て村で出てきそう。また食べたい。

ひとこと

毎月内容をアップデートしたく、今月はトピックスを絞るのと、紹介したもののリンクをちゃんと貼ってみました。

2026年1月のふりかえり

今年から毎月ふりかえりを書いていきたいなと思い、せっかくなのでブログで公開します。 日常多めで、生活改善や仕事や学習のこともちょこちょこ書ければと思っています。

やってよかったこと

  • 仕事で提出する半期レポートが締め切り近くに書こうとすると何をしていたか全然思い出せないので、ほぼ毎月レポート書く会していた。前回よりスムーズに書けた気がするので、また今期も継続してやろう。
  • 運動習慣をつけたくて歯磨きしてるときにスクワット。習慣になってきて良い感じ。
  • 仕事はじまりにラジオ体操。肩回りを動かせてこちらも良い感じ。
  • 昼食後の眠気対策に2分だけ動いてみている。あと白米でなくオートミールにしたらちょっと良くなった気がする。
  • Claude Code の Skills を作ってみた。こういうのもっと詳しくなりたい気持ちあり。
  • ハンドクリームとかAirPodsとかに手持ちのセボンスターチャームをつけてみたら可愛すぎて楽しい。
    かわいい

改善したいこと

  • 作りかけた自作サービスをやるやる詐欺したまま放置している。
  • 仕事や勉強関連のKPTをもうちょっとうまいこと回していきたい。

来月の試作

  • RubyKaigi のための体力作りとしてジム通いをはじめたのでなるべく週5で行く。
  • 自習時間に良い感じの時間帯を見つけて習慣化させていきたい。

買ったもの・導入したもの

  • カップウォーマー
    • 姉にもらった。あったかい飲み物が置いてあると水分摂取が捗る。よい。これで熱燗もやってみたい。
  • Stream Deck Neo
    • 島根のRubyworld ConferenceでTOKIUMさんのブースで一等当てていただいたものをようやく使い出した。とりあえずGIF画像並べておくとかわいい。ポモドーロアプリの休憩ショートカットを登録したら便利でよかった。
  • シュシュっぽい Apple Watch バンド
    • 軽くて付けてる感少なくていい感じ。ゴムが伸びないで長持ちしてくれるといいなー。(追記:やはりちょっと伸びてきたが使えないほどではない)
  • 日付スタンプ
    • ノートにメモ取る時に手書きで日付を書いてたけど、スタンプの方が綺麗だし押すのが楽しい。

本・漫画

  • BLEACH
    • 年末年始の全巻無料で中学ぶりに読んだ。浮竹隊長と女児の親戚やりとりが栄養価高かった。30話くらい続けてくれ。
  • みんなで辞めれば怖くない
    • やさしい気持ちになっちゃったよ。けんという存在を知ってから好感度がずっと上がっている。
  • 放浪息子
    • Amazonのセールでワンコインで全巻買えたので。読んでる間、一緒に学生時代を過ごせた気持ちになった。すごく久しぶりに読んだから昔と印象が違うキャラがいたりしておもしろい。お姉ちゃんがお姉ちゃんしてて姉を持つ身としてなんか嬉しい。あと瀬谷くんめちゃめちゃいいやつ…。あと大人が完璧じゃないにしてもかなり大人してるなあって思った。
  • 雑な生活
    • 人とのかかわりでちょっといい方向にいくという感じがよかった。とくにある日々も買っちゃおうかな〜。

      映画・アニメ・ドラマ

  • 呪詛
    • じっとりとした呪いの表現とかヤバい村とか絶望感がよかった。
  • 破墓/パミョ
    • もっとじっとり系かと思ったらわりと爽快。戦国武将の話になってテンションぶち上がる。色んな武将をモデルにして合体させたんだと思うんだけど三成左近要素が強い気がして熱いですね。
  • グノーシア
    • 声がイメージ通りで良いアニメ化。女の子主人公イベントも見れたのよかった。
  • はたらく細胞(実写映画)
    • アニメも結構みていたがいい実写化。体の中でこんなにがんばってくれているなら私もがんばるかってまんまとなった。

      YouTube

  • 稲葉百万鉄のダンガンロンパ2実況
    • 夕飯の時に毎日見れて嬉しい。いきがい。狛枝くんさぁ!

      ゲーム

  • ポケモンZA
    • 楽しい〜〜。

その他

  • 初めて実家の近くの除夜の鐘を叩く。年明けた感があって良かった。
  • 阿佐ヶ谷神明宮に初詣。新年に行くとなんだか良い気持ち。
  • ピアスを高校生ぶり二度目のチャレンジ。前回は気がついたら塞がってた。強めに輪ゴム弾かれたみたいな感じでぜんぜん痛くなかった。イヤリングは常に落とす不安を抱えていたのでそれが軽減されるのがうれしい。手持ちのイヤリングもピアスに改造したい。

RubyWold Conference 2024 に行ってきた

初めての島根、初めてのRWC

目次

RWC発表の特色

  • 今年の10月にKaigi on Railsに行ったのが初めてのカンファレンス参加だったのですが、それと比較してRWCの発表では教育&育成に関するものが多かったです。
  • 炬燵さんの発表にあったように、島根県ではRuby合宿などのイベントを開催したり、県を上げてIT企業の支援や人材育成に取り組まれているとのこと。会場に制服姿の学生さんがいるのが印象的でした。

    学習コンテンツ

    Ruby楽しいけど、プログラミングを全く知らない人や特に小中学生向けに楽しさを伝えるのって難しいだろうな〜と思っていたのですがそこに触れた発表がいくつかありました。

    クリエイティブコーディングとRuby学習

    speakerdeck.com プログラミングでビジュアルアートが作れるProcessingの存在は知っていたのですが、Rubyでも書けるとは! これなら成果物が分かりやすく魅力的で初学者の方にも勧めやすくていいなと思いました。

    生成AIを使ってRubyの学習教材を作る

    Scratchのようにコードをブロックで組み立てられるSmalruby(スモウルビー)これも初めて知りました! ソースコードの改造したり新しいブロックを作ったりもRubyならやりやそうでとてもいい。教材作りにAIを活かすのも作業速度アップしそうでいいなと思いました。GeminiはChatGPTにくらべて出展を示してくれるというのも教材作りに向いていてなるほど。

    発表聞いていて思ったこと

    過去に小中高生向けプログラミング教室で働いてこともあり、自分で開発を楽しみつつ、その合間に教育関係にも関わりたいなと思っており、今回のRWCに参加してその想いが強くなりました。人との出会いや交流も生まれるし、自分が楽しんでいることを伝えて一緒に楽しめると嬉しいんだよな〜。たしか職場がCoderDojoの開催地として登録されているらしいという話を小耳に挟んだので、その辺りから関われるといいのかもしれない。

まつもとゆきひろさんに挨拶できた

弊社の櫻井さんにご提案いただき会場にてMatzことまつもとゆきひろさんに初対面できました。 画面の中でお見かけしたことなくて内心「わあ実在したー!」とめちゃめちゃ緊張しましたが、気さくにお話ししてくださいました。大学時代の言語作りの経験がRubyに影響しているというお話しを聞けたり、改めてRubyって人間が作ってるんだなーと感じたというか、一つ一つの仕様に考えとか経験とか影響とかが詰まっているんだよなーとか思ったりしました。こういう作った人や発表した人と双方向でコミュニケーション取れるのがカンファレンスに参加するいいとこなのかも。

おまけ

  • 会場でいただいたネームストラップに秘密結社鷹の爪団の吉田くんがいてびっくりした。しまねsuper大使らしい。現地入りしたがなかなか知っている人に会えず心細い気持ちの中、遠方で偶然知り合いに会った気分でほっこりした。
  • 一日目のお昼は櫻井さんにお蕎麦やさんに連れて行ってもらった。島根のお蕎麦は麺がしっかりしていて、噛むと旨みと香りがでてきておいしい! 昔、お蕎麦屋さんでバイトしてたときにこれでもかってほどお蕎麦食べて以来、やや避けていたが再びブーム予感。レセプションときもおかわりした。
  • レセプションで日本酒いろんな種類いただいて最高だった。月山がフルーティで飲みやすくて好きです。東京帰ってからも飲んだ。
  • 松江駅前のおしゃれなカレー屋さんもよかった。カレーもおいしいがからあげがスパイシーな風味でとにかくよい。お酒にも合う。
  • しまねっこ可愛かった。また島根行きたい!
    しまねっこ

Kaigi on Rails 2024 現地参加レポート

はじめに

2024年10月25〜26日に開催されたKaigi on Rails 2024に現地参加してきました! この記事では個人的に特に印象に残った発表やその他現地の感想などをレポートしていきます。

発表の感想

Day1

推し活としてのrails new

speakerdeck.com

  • めちゃめちゃ面白かったし、オタクの自分にはとても刺さる発表でした。
  • 自分の技術で推しの役に立てるのかっこいい。憧れる。
  • 着手から5日でリリースすごい。個人開発の場合、熱意が強いうちにスピード感を持ってリリースしていくのとても大事だと思いました。
  • 自分も好きなゲーム関係のサービス案があり、完璧でなくてもとにかく使える状態でリリースしたらええんや!とやる気をいただいた。

デプロイを任されたので、教わった通りにデプロイしたら障害になった件 〜俺のやらかしを越えてゆけ〜

speakerdeck.com

  • トークに笑いを挟むのがとても上手くて、終始夢中で聞いちゃいました。
  • デプロイ中にDBは更新されているが、コードはアプリに反映されていないタイミングがあるの学びになりました。
  • 障害の原因を詳しく調べて発表にまで繋げているのが素晴らしい。見習う。

Hotwire or React? 〜Reactの録画機能をHotwireに置き換えて得られた知見〜

speakerdeck.com

  • HotwireやStimulusをどのように使うと有効的なのか、実際の状況を背景に具体的に語られている発表でした。
  • 2日目の大場さんの発表とリンクする部分が多く、どちらの発表も聞くとHotwireやStimulusへの理解が深まるように感じました。

Day2

約9000個の自動テストの時間を50分から10分に短縮、偽陽性率(Flakyテスト)を1%以下に抑えるまでの道のり

speakerdeck.com

  • テスト時間を短縮する具体的な手法を紹介されてる発表でした。
  • 落ちたテストのログとスクショの確認を自動化されていてすごい〜マネしたい〜となりました。
  • 他にも自動でテストを再実行する仕組みなど取り入れられそうな部分が沢山あり、またテストに悩んだ際に見返したいです。

Hotwire光の道とStimulus

speakerdeck.com

  • 弊社の大場さん発表。
  • Stimulusの役割をRailsやTurboとどう分けるのか、Stimulusで担当した方がいい部分としない方がいい部分、具体的な実装なども含む発表でした。
  • 社内で事前に発表のリハ的なものを聞いていたのですが、1日目のHarunaさんの発表などを聞いたおかげか、今回の方が理解できる部分が多いように感じれました。
  • 以前自作サービスでStimulusを使ったが、この発表の内容を踏まえたらより良い設計にできそう。また細部まで理解できるように何度も発表を見直そう!

その他

  • フィヨルドブートキャンプの方が大勢参加されていた。挨拶できて嬉しかった & 色んな方に就職おめでとう言っていただいて感謝!
  • スポンサーブース、知っている会社さんが沢山あってRailsなんだー!と驚き。グッズいただいてほくほく。文化祭みたいな雰囲気で楽しかった。
  • お弁当が4種類から選べて嬉しい&美味しい。休憩中にいただいたogijunさんのコーヒーもとても好きな味でよかった。
  • わいわい部屋ともくもく部屋という自由に使える部屋があって、いつでも利用できるのありがたかった。
  • 今回は体力が尽きていたので2日目は直帰したけど、次回はアフターパーティなども参加してみたい。

おわりに

初めてのカンファレンス参加 & 業務経験1ヶ月未満で話が分かるのかどきどきでしたが想像以上に楽しかったです🙌 当日はお話ししてくださった皆様ありがとうございました!

発表全体を通して、やはり一度でも触れたことのある技術の話は理解しやすくて、触れたことのないこと(大規模なモデル設計や、Sidekiqの話など)は今後もっと理解できるようになりたいと思いました。現地で見れなかった発表もアーカイブが公開されたらチェックしたい!

来年の東京駅での開催も今から楽しみにしつつ、もっと発表を理解できるように日々成長していきたいです💪

おまけ

ノベルティのトートバッグがとてもお気に入りなので大事にいっぱい使っていきたいです😊

気軽に褒めたり褒められたりできるサービス「えらすぎ」をリリースしました!

はじめに

気軽に褒めたり褒められたりできるサービス「えらすぎ」をリリースしました!

えらすぎの画面

はるまき(@harumaki_monya)と申します。 フィヨルドブートキャンプ(以下FBC)で学習を終え、この度自作サービスをリリースいたしました。

目次

作ったきっかけ

「えらすぎ」というサービスは「みんなもっと気軽に自分を褒めれるようになったらいいな〜」という考えから生まれました。

見てほしいところ

「使いやすく気軽で楽しいサービス」を目指しました!

使いやすさ

①1画面1投稿1ボタン

リアクションの様子

対象(投稿文)と行動(ボタンを押す)が分かりやすいように、1画面につき1投稿と1ボタンになるようにしました。

②スワイプで直感的に操作

スクロールの様子

Swiper.jsというライブラリを使用してスワイプで次々に投稿が切り替わるようにしました。

以下のような点で良かったのではないかと思います。

  • 直感的に操作できる。
  • 1投稿あたりが丸ごと1画面に表示されるようになっているので、通常のスクロールで徐々に表示されるよりもスワイプで一気に切り替えられた方が楽で見やすい。
  • 投稿文の長さに関わらずボタンが定位置になっていることでスマホからの操作感が良くなった。

③使いやすい編集画面

自分の投稿一覧

自分の投稿一覧画面では投稿が一覧で見れるのと、一覧を表示したまま編集・削除できるようにしました。 Hotwireを使うことで画面の一部分だけ置き換えしてSPAのような動きを実現しています。

気軽さ

①匿名

誰が反応くれたかとかくれないとか気にならないように、1人で100回ボタンを押しても、100人が1回ずつボタンを押しても分からないような表示方法になっています。

押された具体的なリアクション数もあえて表示せずに数字に捉われないような工夫をしました。

②1つのボタンを押すだけ

既存サービスとの差別化や、意図しない使い方を防止するためにあえてメッセージ機能などは取り入れませんでした。

リアクションのためのボタンは最初は複数個用意する予定でしたが、操作性のために減らしたところ、1つだけの方がサービスのコンセプトにもあっていたためそちらを採用しました。

楽しい

①ボタンのデザイン

ボタン
押したくなるように立体的でいかにもボタンっぽいデザインにしました。ちゃんと凹むところもお気に入りです。

②えらいのシャワー

えらいのシャワー

表示にはKonva.jsというライブラリを使用しています。

投稿に押されたリアクションは再度同じ投稿を表示したときに背景に表示されます。

たくさんのリアクションを表示しつつ画面に圧迫感が出ないように花火のように一瞬で消えるデザインにしました。

その他

リリース後もなるべく長く運用したいという考えから、Render + supabaseという組み合わせを使うことで無料での公開を実現しました。

デプロイの詳細については以下記事にまとめています。 monyatto.hatenablog.com

技術スタック

開発を通して学んだこと

新しい技術に触れるときはドキュメントを隅から隅まで読む

以前は困ったときはそれっぽい記事を探してコード部分をコピペして、なんか動いたけどよく分からないーというのがありがちでした。

仕組みを理解していないまま動かすと、エラーが出たときにどこを原因があるのか検討もつかないんですよね。

それで悩んでいたところ、新しい技術に触るときは一度ドキュメントを隅から隅まで読んでみるというのを勧めてもらいました。

やってみたら欲しかった情報や分からなかったことの解説が全部書いてあるじゃん!!と衝撃でした。

使い方を分からせるためのドキュメントなので、使うにあたって大事な情報が書いてあるのは当たり前なのですが、公式ドキュメントって長いし難しいし、読むのに時間がかかるからとついつい後回してピンポイントな情報がまとまっている記事などを探してしまいがちでした。

しかしドキュメントを読んで全体像を掴んだ方が、当てずっぽうに動かして時間を消費するよりも、逆に近道になると実感してからは、時間をかけてでも公式の情報はちゃんと読むようになりました。

テストがあると開発効率が爆上がり

開発の後半になってから以下のような基準でテストを書きました。

  • modelとhelper 自分で作ったメソッドに最低一つ(正常系)書く。

  • sytem test CRUDそれぞれに対して最低一つ(正常系)書く。

その他上記でカバーできない部分や、バグが見つけられなかったりした部分などは後から追加したりしました。

最終的にこんな感じになりました。 github.com

テストが入ってからは大きい変更でもすぐに動作確認ができて、思いもよらない部分にバグが発生しているのをすぐに見つけられたり、テストの便利さを実感しました。

今後取り組みたいこと

最適なものを選べるようになりたい

今回は初めての自作サービスでやりたいことに対して、選んだ技術でどのように実装するかというところで目一杯だったのでした。 しかし、今後は一つ一つの技術に対しての理解を深めるとともに、やりたいことに対して、複数の技術から最適なものを選べるようになりたいです。

さいごに

進捗報告会や相談タイムなどいつも大変お世話になったFBCの駒形さん&町田さん、丁寧なコードレビューをくださったFBCメンターの前田さん、Hotwireについてバグ解決の手助けをしてくださったFBCメンターの伊藤さん、グループコーチングでやる気を高めてくれたよかじさん、niiさん、lefさん、他にもこれまで関わってくださったの皆様のおかげで自作サービスを完成させることができました!ありがとうございます!これからもよろしくお願いします〜!

Rails7+Render.com+Supabaseで無料デプロイ

この記事について

この記事ではRailsで作ったWebサービスを公開したい方のために、Supabaseのデータベースを利用して、Render.comに完全に無料でデプロイする手順をまとめました。

上から実行していくのを想定していますが、必要ない部分は適時飛ばしてください。

なおデプロイのタイミングは、技術構成が複雑になってくるとデプロイ時のエラーの原因が分かりづらくなるので、早めにデプロイしてしまい、都度エラーの検証をしていくのがおすすめします。

公式のドキュメント

以下も一通り目を通すのがおすすめ。

Use Supabase with Ruby on Rails | Supabase Docs

Deploying Ruby on Rails on Render | Render Docs

Railsでアプリを作成

まずはデプロイするRailsアプリを作成します。既に作成済みの方はこの手順は飛ばしてください。

rails new する

rails new アプリ名 -d=postgresqlでDBを postgreSQL に設定してアプリを作成。

scaffold でCRUDを作成

rails g scaffold モデル名 カラム名:データの型CRUDを作成。

Supabaseにデータベースを作成

サインアップ

https://supabase.com/dashboard/projectsにアクセス。

まずはサインアップ。 Githubアカウントを使用するのがよさそう。

サインアップ後の画面でNew Projectをクリック。

organization を作成

Nameを入力後Create organizationをクリック。

個人で無料プランの場合 Type of organization は Personal で Pricing Plan は Free - $0/month(どちらもデフォルト)。

project を作成

Nameにプロジェクトの名前を入力。

Database Password に データベースのパスワード設定。あとで使うので忘れずにどこかに記録!

Region は Northeast Asia (Tokyo)を選択。

全て入力後Create new projectをクリック。

その後1分くらい待つとセッティングが完了します。

データベースを接続する

Connection String を作成

作ったプロジェクトの右上のConnectをクリック。

以下をコピーして、[YOUR-PASSWORD]の部分はプロジェクト作る時に入れたパスワードで置き換え。

パスワードに記号などが含まれる場合、元の文字列をURLエンコードしたものでないとエラーになるので注意。

開発環境(ローカル)からDBを接続

DBを使いたいローカルのターミナルでexport DATABASE_URL= 上記で用意した Connection Stringを実行。

証明書をダウンロード

Enforce SSL on incoming connections をオンにする。

Download CertificateSSL証明書をダウンロード。

ダウンロードした証明書(prod-ca-2021.crt)をアプリのルートディレクトリに移動。

dotenv-rails で開発環境で使う環境変数の準備

ローカルにあるアプリのapp/Gemfileに以下を追記。

group :development, :test do
  // 開発環境でしか使わないのでdevelopment配下に追加
  gem 'dotenv-rails'
end

ターミナルでbundle installを実行して dotenv-rails をインストール。

app/.envを作成して以下を追記。

APP_DATABASE_HOST=ホストを入力
APP_DATABASE_USER=ユーザーを入力
APP_DATABASE_PASSWORD=データベースのパスワードを入力

ホストとユーザーは以下を参照。

開発環境用にdatabase.yml編集

config/database.yml

development:
  <<: *default
  host: ENV[APP_DATABASE_HOST"]
  database: postgres
  username: ENV["APP_DATABASE_USER"]
  password: ENV["APP_DATABASE_PASSWORD"]
  sslmode: verify-full
  sslrootcert: prod-ca-2021.crt

その後にbin/rails db:migrateを実行。

これでDBの接続が完了。試しに以下のようにsupabase上からデータ登録し、rails sで起動すると登録したデータが確認できる。

Render.comにデプロイ

ローカルでの準備

本番環境用にdatabase.yml編集

config/database.ymlを編集。環境変数は後ほどRender.com上で設定。

production:
  <<: *default
  host: <%= ENV["APP_DATABASE_HOST"] %>
  username: <%= ENV["APP_DATABASE_USER"] %>
  password: <%= ENV["APP_DATABASE_PASSWORD"] %>

render-build.shを作成

app/bin/render-build.shを作成し、以下の内容にする。

#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
bundle exec rails assets:precompile
bundle exec rails assets:clean
bundle exec rake db:migrate

ターミナルでchmod a+x bin/render-build.shを実行し権限を変更。

ここまでの内容をgitにpush。

Render.comに登録

https://render.com/にアクセス。

GitHubを選択。

右上のメニューから New → Web Service を選択。

Build and deploy from a Git repository を選択。

Github接続をして、以下のように設定を入力

Region

Singapore (Southeast Asia)

Build Command

./bin/render-build.sh

Start Command

./bin/rails server

Instance Type

Free $0/ month

RAILS_MASTER_KEY

config/master.keyの内容を貼り付ける。

master.keyが存在しない場合は以下の記事のように作り直す。

master.keyが見つからない問題 [初見殺し] - はじめてのデプロイで嵌るポイント(Rails 5.2以降) #Rails - Qiita


本番環境(Render.com)からDBを接続

Render.com上で環境変数を設定

Dashboard → Environment から環境変数を設定。

APP_DATABASE_HOSTとAPP_DATABASE_USERとAPP_DATABASE_PASSWORD

supabaseから参照。

DATABASE_URL

これもsupabaseのプロジェクトの右上のConnectをクリック。

これをコピーして、[YOUR-PASSWORD]の部分はプロジェクト作る時に入れたパスワードで置き換え。

RAILS_MASTER_KEY

config/master.keyの内容。

WEB_CONCURRENCY

2

これでデプロイ準備! 以下から手動でもデプロイできる。

デプロイが失敗する場合は以下からエラーメッセージや警告を調べてみる。

Renderのスリープ対策

【2024/05/16追記】 なんかアクセスできるまでに時間がかかるな〜と思ったら、15分間アクセスがないとRenderがスリープしてしまうみたいです。GAS等を使って自動的にアクセスさせると防げます。 参考: Renderで無料デプロイしたアプリをキープアライブする方法

遭遇したエラー

tailwindが反映されない

以下がエラーの内容。

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

原因はrails/tailwindcss-railsのバージョンが古いことだった。

tailwindcss-railsのバージョンを上げたら(2.0.33→2.3.0)エラーがでなくなった。

importmap経由のjsが反映されない

開発環境では動いているimportmap経由のjsのcontroller類(app/javascript/controllers配下のjs)が本番環境だと動かない。

検証ツールで確かめると以下のエラーが出ていた。

Failed to load resource: the server responded with a status of 404 ()

importmap経由の導入方法とJavaScript bundlerで導入方法が違うのに混在させていたのが原因だった。

参考: Stimulus controllerの登録方法の違い #Ruby - Qiita

参考にさせてもらった記事

【※2024年4月より有料化】Rails アプリを公開しよう! Render.com + PlanetScale デプロイ手順

RailsでSupabaseのPostgreSQLを使ってみる #Rails - Qiita

【Rails】 dotenv-railsを使って環境変数を管理しよう | Pikawaka

おわりに

以上がデプロイまでの手順です。この記事がデプロイのお役に立てれば嬉しいです!

間違っている部分やこうした方がいいよという部分があればお知らせいただけると幸いです〜。