もふもふ技術部

IT技術系mofmofメディア

【React Native】React Queryを使ってReact Navigationの親画面のstateを更新する

やりたいこと React Nativeのアプリで 画面遷移はReact Navigationを利用しており ノートアプリのように、一覧画面と詳細画面があるようなアプリで 詳細画面(子画面)で行った変更に合わせて一覧画面(親画面)の情報(state)を書き換えたい これがReact Nav…

mofmofオフィスのVRChat World作成したので公開してみた

mofmofオフィスをVRChatで作成したので公開してみました。 その時の手順を記載します。 準備 UnityHub, Unity, VRChatアカウント等はすでに用意してある前提です Unityでアップロード可能な権限を持つアカウントでVRChatにログインする ビルド 公開対象のシ…

mofmofメンバーに聞いてみた!より良いコミット・コミットメッセージとは?

git

背景 こんにちは!mofmofのエンジニアの齊藤です。この度、弊社のホームページ内にmofmofへの応募を考えてくださっている人のためのコンテンツ、「もふもふ診断」をリリースしました。 「技術診断」「相性診断」の2つの診断を用意していて、それぞれ技術面/…

ActionMailboxでRSpecのテストを書く

この記事の内容 ActionMailboxは、Railsアプリでメールを受け取ることができる機能です。 それを応用して、 Railsアプリにメールを送ることで投稿を作成することもできます。 先日ActionMailboxを利用した機能開発中、RSpecで ActionMailboxのテストを書くこ…

React Native(Expo)とFirebaseでカップル向けアプリを作った - Qiita

この記事の背景と目的 最近、業務で「社内のPOと一緒に二ヶ月間でMVPとなるアプリを一つ作ってリリースする」という貴重な機会があった。 実際の開発は自分一人だったため、使ってみたい技術を自由に試してみることができ、非エンジニア職からの出戻りの自分…

Pay.jpで定期課金を実行する

前回の記事でPayjpを用いた単発決済の実装方法を解説した。 そこで今回は、Payjpで定期課金機能を実装してみたいと思う。 想定 有料会員登録としてカード登録をしないと、主要なサービスが使えないWebアプリを想定する。 以下のような仕様であるとする。 定…

Payjpを導入したアプリのテストを書いていく

前回の記事ではPayjpを使った定期購入の実装について解説した。そこで今回は、Payjpを使った実装のテストについて書いてみたいと思う。 Payjpは外部APIなので、API呼び出し部分のモックを作ってテストを記述した方が良い。 対象となるアプリ 2つ前の記事で作…

RailsアプリケーションとKintoneを連携する

CMS(顧客管理システム)で一番有名なのはセールスフォースですが、国内製品だとサイボウズが提供する Kintone が有名です。 操作性もよく、個人的にはセールスフォースよりずっと使いやすいんじゃないかと思ってます。 今回は、業務で Rails アプリケーショ…

Pay.jpで単発決済機能を実装する

Railsで決済機能を実装する際、決済サービスの候補としてあがるのはだいたいStripeかPay.jpだと思う。 業務で定期講読する商品を扱うことになりPay.jpを使って実装を行なったが、Payjpの定期購入について解説した記事が少なかったので解説してみたいと思う。…

Railsでモデル層からバリデーションを切り出して共通のバリデーションルールを定義する ActiveModel::EachValidator編

アプリケーションを開発していると、電話番号やURL、カナなど複数のモデルで同じバリデーションを定義していることがある。 上記の例くらいなら、同じバリデーションルールを複数箇所で書いても良さそうだが、変更が生じた時やもう少し複雑なバリデーション…

Railsでモデル層からバリデーションを切り出して共通のバリデーションルールを定義する ActiveModel::Validator編

前回の記事では1つの属性に関するバリデーションルールを共通化出来るActiveModel::EachValidatorについて解説した。 そこで今回は、Railsのバリデーションを定義するためのもう一つの基底クラスである、ActiveModel::Validatorについて解説したいと思う。 A…

create済みのモデルのIDをUUIDに変更してみた

Railsアプリへのuuidの適用方法 postgresqlのuuid拡張機能を有効化 initializers内でprimary keyのデフォルト値をuuid化 バージョン スキーマ users events event_participants マイグレーション まとめ Railsアプリへのuuidの適用方法 Railsアプリへのuuid…

Unity(C#script)で外部のサーバーとHTTP通信を行う

UnityにおけるHTTP通信 WWW UnityWebRequest HttpWebRequest 通信してみる コルーチン UnityにおけるHTTP通信 内部で完結する簡単なゲームなどであればHTTP通信を行う必要性はあまりないことも多いですが、一定規模のシステムやランキング機能を実装したい場…

HoloLens2&MRTK 環境構築する

動作環境 事前準備 Unity側で環境を整える MRTKを入れる MRTKのインストール Tofuを出す Buildする Visual Studio 前回記事からすぐですが、mofmofにHoloLens2が到着したので早速環境構築していきます。 今回はHololens2のセットアップと、実際に適当なプロ…

Unityのためにさらっと学ぶC#

Unityのためにさらっと学ぶC 変数・定数 演算 リスト 関数 デバッグ方法 Class Unityのためにさらっと学ぶC mofmofはRailsをバックエンドに採用し、高速にMVPを組み立てて事業検証などを行うことを得意としている会社ですが、同時に新しいもの、技術が好きな…

Next.js を使ってみる(TypeScript + firebase + Recoil + vercel) その1

バックエンドはRuby on Railsを主に使っていますがフロントエンドはフレームワークをあまりつかっていないことに気づいたので試してみる 環境構築 TypeScriptを導入する tsconfig.jsonを作成する Firebaseでユーザーをいい感じに認証させる ユーザー認証 Rec…

Gatsby(GraphQL/React)とWordpressでJAMstackなサイトを構築してみる

Wordpressで作成したサイトをもうちょっとお手軽にメンテできないかと思って調べたところ、Gatsbyでできそうだったので試してみました。 やり方 概要 Wordpress Wordpress プラグイン Gatsby作成 Gatsbyページ追加 Deployする ビルドの連携 Netlify Wordpres…

Vue+c3.jsでグラフ描画してみる

実際の案件でインタラクティブな折れ線グラフ描画機能を実装する必要があったため、いくつかライブラリを調べていました。 描画するグラフでは下記のような機能を実装する方針だったので、拡張性の高いライブラリを探していたところ、c3.jsというライブラリ…

Sidekiq実行したらエラーになったので調査して修正したこと

エラー sidkiqで実行した処理 設定確認 ログ確認 推測 対策 参考 エラー Railsでsidekiq使ってるときに以下のエラーが出ました。 could not obtain a database connection within 5.000 seconds これは、使用可能なコネクション数よりも多くの接続を使用しよ…

RailsプロジェクトでSlack通知を実装する

プロジェクトの開発中・リリース直後は想定外のエラーが多発するため、異常はすぐに検知出来た方が開発スピードが上がりますね。 今回はそういったケースでライトにSlackへの通知が出来る、slack-notifierのご紹介です。 gemインストール Gemfileにslack-not…

Pythonでデータ分析をするためにMacにJupyter Notebookの環境構築をする

mofmofではRailsを使った受託開発の他に、My-ope officeやToridersといった自社サービスも開発・運営しています。 これらのサービスではRailsの他に機械学習部分をpythonを用いて実装しているので、自分もpythonを触っておきたいと考えて最近興味のあるデー…

seed-fuを使って開発・テスト・本番それぞれの環境でのシードデータを作成する

Railsではrails db:seedという便利なコマンドがあり、db/seed.rbにシードデータを入れておけばコマンドを叩いたら勝手にシードデータを作成してくれます。 ただ、1度だけ使うシードデータを作成する場合はいいですが、例えばシードデータを編集して再度実行…

【Rails】Form Objectを使ってModelに依存しないFormを作成する

Railsを使って開発をしている時、1つのフォームで複数のモデルを操作したい場合やそのフォーム専用の処理が必要になることがあります。 Railsではフォームはモデルに依存しており、上記のようなケースが発生した場合通常のMVCだけでは処理が複雑になってしま…

【Railsの便利gem】スキーマ情報をModelファイルにコメントで書き出してくれるannotate

annotateとは バージョン 導入手順 gemインストール annotateの設定 annotateの実行 スキーマ情報 ルーティング情報 まとめ annotateとは アプリケーションの各モデルのスキーマ情報やルーティング情報を、ファイルの先頭にコメントで出力してくれるgemです…

モデルのIDにUUIDを使って玄人感を出す

バージョン UUIDとは何か なぜUUIDを使うのか 注意すべきポイント アプリにUUIDを適用してみる 拡張機能を有効化する デフォルトのキーをuuidにする設定を行う。 モデルの作成 おまけ:関連を付けたい場合 まとめ バージョン Ruby 2.6.3 Rails 6.0.3 Postgre…

MiniMagickで画像合成してみた

用意した画像 やったこと 結果 MiniMagickを使って、画像を生成してみました。 用意した画像 ベース画像 ユーザー画像 フォントファイル やったこと アイコン画像を丸く切り抜く Convertメソッドを使い、既存画像を読み込み加工をして出力します。 # ユーザ…

Heroku x Railsで動的にOGP画像生成してみる

Heroku上のRailsアプリケーションで、OGP画像を動的に生成するための方法をまとめました。 準備 ImageMagick MiniMagick CarrierWave 日本語フォントファイル 実装 やること まとめ 準備 ImageMagick 以前はherokuに別途buildpackを追加する必要があったよう…

バックエンドエンジニアでも良いCSSを書くためのBEMという設計手法

プロジェクトに導入してみたらCSSに秩序とストレスフリーな環境をもたらしてくれたBEMという設計パターンがとてもよかったので紹介します。 CSS 良いCSSとは何か 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張性が高いこと BEM Block Element …

【超便利】JavaScript日付ライブラリ・date-fns

JavaScriptを使ってフロントエンドで日付操作をする事って結構あると思いますが、Dateオブジェクトを使うとクセが強すぎて意図しない動きになったりしますよね。 最近会社のプロジェクトで日付操作をDateオブジェクトを使っていて悲鳴をあげてたんですが、da…

Vue+Rails+CarrierWaveでS3へのダイレクトアップロード

概要 Heroku経由でS3にファイルアップロードする際、Herokuのリクエストタイムアウトは30秒に設定されているので、大容量ファイルをアップロードすると時間が足りずタイムアウトエラーとなってしまう。 そのため、Herokuで4MB以上のファイルをアップロードす…