もふもふ技術部

https://tech.mof-mof.co.jp

IT技術系mofmofメディア

フィード

記事のアイキャッチ画像
もふもふ技術部まとめ2024
もふもふ技術部
こんにちは。出口です。 2024年もそろそろ終わりということで、今年もふもふ技術部に投稿した記事をまとめようと思います。 2024年に投稿された記事は以下のとおりです。全部で47件でした。 www.mof-mof.co.jp 2024年投稿技術記事、表示回数TOP10 2024年に投稿された記事の中から表示回数の上位10記事は以下のとおりです。 ※表示回数は、Google Analyticsの値を参照しています。 1. 既存プロジェクトでPrettier・ESLintをBiomeに移行してみた www.mof-mof.co.jp 1位は、Biomeの記事でした。 ちょうど世間的にもBiomeへ…
9日前
記事のアイキャッチ画像
テックトーク管理用Slack Botでテックトーク運営を自動化した
もふもふ技術部
こんにちは。出口です。 先日紹介したテックトーク用のSlack Botを作りました。 テックトークについては以下の記事を参照してください。 www.mof-mof.co.jp Slack Botのアーキテクチャは以下の通りです。 メインはGoogle Apps Script(GAS)です。 テックトークはNotionのデータベースで管理しています。 GASを使ってNotionのDBを読み取り、Slackに通知するものです。 TSで書いたものをVite + RollupでJSにトランスパイルしてclaspを使ってGASに反映する形にしました。 Vitestでテストも書いてます。 vite.con…
15日前
記事のアイキャッチ画像
React Router v7、Prisma、Vitestでテストを書き始める準備
もふもふ技術部
Remixを触ってみたいと思っていたら、React Router v7に統合されてしまいました。 そんなReact Routerでプロジェクトを作成し、PrismaとVitestを導入してテストを書き始める準備について書きました。 React Routerでプロジェクト作成 docker composeでDBを用意 Prisma導入 スキーマ定義 開発用とテスト用のDBをそれぞれ作成 Seeding Vitest導入 vite.config.tsの設定 tsconfig.jsonの設定 テストを書いてみる さいごに React Routerでプロジェクト作成 プロジェクトの作成は以下を実行しま…
20日前
記事のアイキャッチ画像
mofmof式テックトークでエンジニアの成長・コミュニケーションを活性化する
もふもふ技術部
こんにちは。出口です。 今回は、mofmofで毎週開催している「テックトーク」という取り組みについてです。 エンジニアが気になっている技術的なトピックについて気軽に話し合える場として、大切にしている取り組みの1つです。 コロナ禍以前はオンサイトで実施していましたが、コロナ禍以降フルリモートになってからはオンラインで開催しています。 mofmof式テックトークとは? なぜテックトークを始めたのか mofmof式テックトークの特徴的な運営方式 柔軟な参加形態 聞き専での参加もOK 実況スレッドを活用して後から内容が分かる仕組み テーマ設定の工夫 毎月のネタ出し会で、みんなで話したい内容を決める 定…
22日前
記事のアイキャッチ画像
Unityで重力を設定した球体の惑星の上を歩き回る
もふもふ技術部
地球上に立っている人が剛速球を投げて、地球を1回転して戻って来て自分でキャッチするための条件を確かめるためにUnityの物理エンジンでシミュレーションしようと思ったので、まずは自由に動き回れる惑星を実装してみた。ドラゴンボールの界王星みたいな感じ。 オブジェクトの配置 まず適当なプロジェクトを作り、直径30mほどの球を配置する。 Hierarchy - 3D Object - Sphere Positionは全て0 Rotationは全て0 Scale X: 30, Y:30, Z:30 オブジェクトにPlanetという名前をつけておく。 目印用に適当にCubeをおいておく。 Hierarch…
1ヶ月前
記事のアイキャッチ画像
【Rails】Gemを使わないFinderオブジェクトを使った検索
もふもふ技術部
Railsで検索を実装するとき、どのように実装しますか? ransack などのGemを使っていますか? 今回は、Gemを使わずにFinderオブジェクトを使って検索を実装してみます。 Finderオブジェクトを使うと、モデルとコントローラーから検索のロジックを切り離すことができます。 事前準備 1. モデルを作る $ rails g model post 20241117000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create_table :posts do |t| t.referen…
1ヶ月前
記事のアイキャッチ画像
【Rails/GitHub】お問い合わせフォームからの問い合わせ内容を自動でissue化!
もふもふ技術部
HPでもWebサービスでもお問い合わせフォームは必須な機能だと思います。 今回はお問い合わせフォームからのお問い合わせ内容をGitHubのissueにする方法を紹介します。 事前準備 Gemをインストールする Gemfile gem 'octokit' GitHubでアクセストークンを作成する github.com ここからアクセストークンを作成します。 Issues の項目だけ、 Read and write を許可します。 作成したアクセストークンは1度しか表示されないので、忘れずコピーしましょう アクセストークンをcredentialsに追加する rails credentials:ed…
2ヶ月前
記事のアイキャッチ画像
【Rails】ActiveHashでマスターデータを管理する
もふもふ技術部
DBに保存するほどでもないマスターデータをどのように管理するか悩んだことはありませんか? 今回は、そんな時に便利かも!?な ActiveHash を使ってモデルライクにマスターデータを管理します。 github.com 事前準備 Gemをインストールする Gemfile gem 'active_hash' マスターデータを用意する 今回はカテゴリーを管理します。 ID カテゴリー名 1 野菜 2 果物 3 お肉 4 穀物 ActiveHash のモデルに直書きする場合 app/models/category.rb class Category < ActiveHash::Base self.d…
2ヶ月前
記事のアイキャッチ画像
【Rails I18n】localeのYAMLファイルで式展開する
もふもふ技術部
Railsで多言語化する時、yamlファイルに日本語訳や英語訳を追加していくと思います。 そのyamlファイルに追加した訳文で式展開ができることをご存知ですか? 事前準備 config/application.rb に以下の設定を追加します。 config.i18n.default_locale = :ja config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s] 使ってみる 1.yamlファイルを追加する config/locales/views/ja.yml ja:…
2ヶ月前
記事のアイキャッチ画像
【Rails I18n】URLで言語切り替えする
もふもふ技術部
アクセスしたURLによってlocaleを切り替える機能を意外と実装したことがなかったので、今回は3つの方法でlocaleを切り替えてみたいと思います。 事前準備 複数の言語を使用できるように設定する config/application.rb に以下の設定を追加します。 config.i18n.available_locales = %i(ja en) config.i18n.enforce_available_locales = true config.i18n.default_locale = :ja config.i18n.load_path += Dir[Rails.root.join…
2ヶ月前
記事のアイキャッチ画像
ECSコンテナの立ち上げをやってみた
もふもふ技術部
はじめに 今回は、Railsの基本スタックのインフラ構築をAWSで行うことに挑戦しました。アプリをAWS上でデプロイするにあたり、ECS(Elastic Container Service)を初めて利用してみました。Railsの基本スタックをAWSで簡単に構築すること、特にDockerとECSを用いたコンテナ化、SidekiqやElastiCacheの導入も含めて実践しました。この記事では、その過程や得られた学びを共有します。 デプロイの目的 Railsの基本スタックをAWSで構築 AWS上で、Railsアプリの本番環境を簡単にセットアップできるようになりたい。 Sidekiqの本番利用を経験…
2ヶ月前
記事のアイキャッチ画像
IBM Qiskitでベル状態の量子回路を作る
もふもふ技術部
どうも、量子の人を目指して頑張ってます原田です。 普段は量子の理論の方を学習しているので、コードを書くのは初だったのですが、予想以上に難しかった。というか、コードを書く=アプリケーションを開発するという認識しかなかったので、ビットを直接いじるというのはなかなか新鮮だった。 今回は以下ベル状態と呼ばれる4つの回路を作ってみます。 今のところまだベル状態が意味するものはいまいち分かっていないけど、2つの量子ビットがもつれている基底ベクトルというような理解。 環境 Google Colaboratoryで動かすとローカルで環境を構築しなくていいのでとても楽。 colab.research.googl…
3ヶ月前
記事のアイキャッチ画像
【Rails】よく使う・知っていると便利なmigrateコマンド
もふもふ技術部
今回はよく使う・知っていると便利なmigrateコマンドを紹介します! マイグレートする rails db:migrate 特定の環境のみマイグレートする 開発環境の場合(デフォルトなので明示的に指定することはあまりないと思います) rails db:migrate RAILS_ENV=development テスト環境の場合 rails db:migrate RAILS_ENV=test 本番環境の場合 rails db:migrate RAILS_ENV=production マイグレーションの状態を確認する rails db:migrate:status 以下のように出力されます。 St…
3ヶ月前
記事のアイキャッチ画像
はてなブログのSEO効果を高めるために各記事に著者プロフィールとJSON-LDへの情報追加をやってみた
もふもふ技術部
こんにちは。出口です。 今回は、はてなブログのSEO効果を高めるための施策を行ったので、その辺りの話です。 大きく分けて2つの対応を行いました。 記事下への著者情報の追加 JSON-LDへの著者情報等の追加 どちらもJavaScriptでの対応になります。 記事下への著者情報の追加 まず1つ目、記事下への著者情報の追加です。 はてなブログには、元々著者情報が表示されています。 これは、はてなプロフィールをベースにしているので、はてなID、表示名, はてなプロフィールへのリンクぐらいしか表示されません。 これを次のように改善しました。 画像のようなものが記事の一番下に表示されているはずです。 こ…
3ヶ月前
記事のアイキャッチ画像
【Rails】I18nを使った日本語化
もふもふ技術部
Railsで日本語化をするとき、「あれどうやるんだっけ」と意外と忘れてしまうこともあると思います。 今回はそんな日本語化の話をしたいと思います! 事前準備 config/application.rb に以下の設定を追加します。 config.i18n.default_locale = :ja config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s] ファイルを設置する 雛形ファイルを持ってくる 日本語の雛形ファイルは以下を使うのがおおすすめです。 バリデーションエラーな…
3ヶ月前
記事のアイキャッチ画像
【日本語対応あり】Railsでenumを使う
もふもふ技術部
ユーザーの権限を管理する際などに、enumを使うことがあると思います。 今回はenumの使い方をまとめてみます。 下準備 1. Gemをインストールする 日本語対応のためのGemです。 gem "enum_help" 2. モデルを作る $ rails g model user 202401001000000_users.rb class CreateUsers < ActiveRecord::Migration[7.1] def change create_table :users do |t| t.string :name t.integer :role, default: 1 t.tim…
3ヶ月前
記事のアイキャッチ画像
Rails7 に Bootstrap を導入する
もふもふ技術部
以前Rails7でTailwind CSSの導入をしましたが、今回はBootstrapを導入してみます。 esbuildを使用します。 プロジェクト作成時に導入する場合 1. rails new mofmof -j esbuild --css bootstrap でプロジェクトを作成する 2. 以下を package.json に追加する "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/ass…
3ヶ月前
記事のアイキャッチ画像
【Rails】Stripeで決済したサブスクを解約する
もふもふ技術部
Stripe決済第四弾です。 今回はいままで実装したサブスクの解約を実装します。 サブスクの実装は以下の記事を参考にしてみてください。 www.mof-mof.co.jp 実装 ルーティングを追加します。 config/routes.rb resources :cancel, only: [:create] viewsに追記します。 app/viewa/plans/index.html.erb <%= button_to cancel_index_path, data: { turbo: false } do %> 解約 <% end %> コントローラーを作成します。 app/control…
3ヶ月前
記事のアイキャッチ画像
【Rails】Stripe決済で複数のユーザープランを実装する
もふもふ技術部
Stripe決済第三弾です。 今回は前々回実装したサブスクと、前回実装した買い切りを組み合わせて複数のプランをユーザーが選択できるようにしてみます。 下準備は以下の記事を参考にしてみてください。 www.mof-mof.co.jp 決済を実装する 今回用意するプラン スタンダードプラン ¥100/月 ¥800/買い切り プレミアムプラン ¥1,000/月 ¥8,000/買い切り 料金を作成する こちら で料金を作成します。 前回までの記事を参考に商品と料金を作成します。 www.mof-mof.co.jp 商品カタログページを見て、以下のようになっていればOKです。 商品カタログページ プラン…
4ヶ月前
記事のアイキャッチ画像
【Rails】Stripe決済で買い切りプレミアムプランを実装する
もふもふ技術部
Stripe決済第二弾です。 今回は前回サブスクで実装したプレミアムプランを買い切りで実装してみます。 下準備は前回の記事を参考にしてみてください。 www.mof-mof.co.jp 決済を実装する 料金を作成する こちら で料金を作成します。 前回作成したプレミアムプランに料金を追加します。 前回作成したプレミアムプラン 「料金」の右側にある「+」を押し、以下の画像のように入力して登録します。 料金追加画面 料金を追加することができました。 先ほど作成した「¥1,000」を選択します。 画面右上にある 「price_~~~」は後で使用するのでコピーしておきましょう。 料金の詳細 プレミアム…
4ヶ月前
記事のアイキャッチ画像
【Rails】Stripeでサブスク決済
もふもふ技術部
近年、サブスクのサービスが増えましたね。 今回はユーザーの上位プランをサブスクで決済できるようにしたいと思います。 プレミアム会員を月額100円で実装してみます! 下準備 Gemをインストールします。 Gemfile gem "stripe" Stripeのアカウントを作成します。 stripe.com 開発環境で動作確認するだけであれば、アカウントを作成するだけですぐに使えます! 環境変数を追加します。 https://dashboard.stripe.com/test/apikeys からAPIキーを持ってきます。 credentials に保存しましょう。 $ rails credent…
4ヶ月前
記事のアイキャッチ画像
スクラムを改めて基本から理解するためにPSM Ⅰを取得しました
もふもふ技術部
PSMとは なぜ受験しようと思ったか よかったこと スクラムの基本が身につけられた スクラムガイド最新版のキャッチアップができた 複数スクラムチームの運用について知ることができた PSM Ⅱに向けて 最後に PSMとは PSM (Professional Scrum Master)は、Scrum.orgによって提供される認定資格です。 この資格は、スクラムのフレームワークを理解し、実践するために必要な基礎知識を持つことを証明するものです。 他にもスクラム認定資格といえばCSM、LSMがありますが、研修が必須であり、受講料も高額です。 PSMは他のスクラム認定資格と比べて受験費用が安く、研修も必…
4ヶ月前
記事のアイキャッチ画像
dockerのRuby環境をHerokuと同じUbuntuで動くものにする
もふもふ技術部
Dockerの公式が出しているRubyのdocker imageではdebianやapline linuxが使用されています。mofmofではHerokuで本番環境を作っているアプリも多いのですが、HerokuではUbuntuが使われています。 そのため、ローカルで使用しているdockerでもUbuntuを使ってHerokuと環境を合わせたいねという話が開発チームの中で出ました。 開発しているアプリでHeroku-20のstackからHeroku-22にアップグレード対応するものがあったため、このタイミングでDockerのRubyをUbuntu上で動くものにしてみました。 rubylang/r…
4ヶ月前
記事のアイキャッチ画像
【Rails7】JS不要!Hotwireで無限スクロールを実装する
もふもふ技術部
Hotwireを使ってみる第三弾です! 今回はJSを使わずに、Hotwireで無限スクロールを実装してみます。 下準備 1. Gemをインストールする gem "kaminari" 2. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create_table :posts do |t| t.string :name t.timestamps end end end 実装する 1. ルーティングを設定する config/…
5ヶ月前
記事のアイキャッチ画像
【Rails7】Hotwireで検索を実装する
もふもふ技術部
Hotwireを使ってみる第二弾です! 今回は、検索結果をHotwireで表示するようにしてみます。 画面の全てを再描画する必要がないので、速度が上がるかもしれませんね! 下準備 1. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create_table :posts do |t| t.string :name t.timestamps end end end 2. Gemをインストールする(ページネーションを使う場…
5ヶ月前
記事のアイキャッチ画像
【Rails7】JS不要!Hotwireで「もっと見る」を実装する
もふもふ技術部
Rails6までは「もっと見る」などの動的な機能を実装する場合はJSが必須でした。 しかし、Rails7から標準搭載されたHotwire(Turbo)を使用すると、JSを使わずに「もっと見る」を実装することができます。 今回はHotwireを使った「もっと見る」の実装方法を紹介します。 下準備 1. Gemをインストールする gem "kaminari" 2. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Migration[7.1] def change create…
5ヶ月前
記事のアイキャッチ画像
【Rails】deviseを使わない自前のユーザー認証 -パスワードリセット編
もふもふ技術部
deviseを使わない自前のユーザー認証 の続きで、今回はパスワードリセット機能を実装します。 下準備 1. カラムを追加します $ rails g migration add_password_reset_to_users 20240726000000_add_password_reset_to_users.rb class CreateUsers < ActiveRecord::Migration[7.1] def change add_column :users, :password_reset_sent_at, :datetime add_column :users, :passwor…
5ヶ月前
記事のアイキャッチ画像
【Rails】deviseを使わない自前のユーザー認証
もふもふ技術部
deviseを使ったユーザー認証はとても便利ですが、カスタマイズをしたいときや、APIモードで使う時には不便なことがあります。 そこで今回は、deviseを使わない自前のユーザー認証を実装します。 下準備 1. Gemfileに使用するGemを追加します (Gemfileの中でコメントアウトしてあるかと思います。) gem "bcrypt", "~> 3.1.7" 2. bundle install します 3. Userモデルを作成します $ rails g model user 20240712000000_create_users.rb class CreateUsers < Activ…
6ヶ月前
記事のアイキャッチ画像
AWS Cloud Practitioner を取得してみた話
もふもふ技術部
目標・目的 インフラ(今回はAWS)について学ぶことで今後の開発での視野を広げることが今回の目的です。 まずはその第一歩としてCloud Practitionerの取得を目標としました。 学習方法 主にAWS Skill Builderでの学習を主体とし、試験対策として無料の過去問サービスを利用しました。 Skill Builderを使った理由 資格取得のための学習講座に加え、仮試験を受けることもできるというAWS Skill Builderを利用することに決めました。 (仮試験については有料コースで、学習講座は一部有料コースで無料コースのみでも問題なさそうに思いました。) 資格取得に関連した…
6ヶ月前
記事のアイキャッチ画像
Expoでブランクアプリケーションを生成してEASビルドを試す
もふもふ技術部
個人開発しているアプリのExpoバージョンを上げていったらビルドが通らなくなった。そこで、比較的新しいバージョンのExpoではビルドがどういう感じになっているのかキャッチアップしたい。 ひとまずブランクアプリケーションが起動するまで まずはブランクアプリケーションを生成する。 $ expo init ExpoBlank ┌───────────────────────────────────────────────────────────────────────────┐ │ │ │ The global expo-cli package has been deprecated. │ │ │ …
6ヶ月前