Fusic Tech Blog

Fusicエンジニアによる技術ブログ

#rails

2022/07/07
vite_railsをRailsに導入してReact/Vite環境を構築

## はじめに Rails7になってから[jsbundling-rails](https://github.com/rails/jsbundling-rails/) が使われるようになり、esbuild/rollup/wepackなどJavaScriptをバンドルしてRailsアプリで配信する方法の選択肢は増えました。 これらを使うのも良いですが、より強力なフロントエンドツールであるViteを...

vite_railsをRailsに導入してReact/Vite環境を構築
2022/06/24
react_on_railsにHMRを導入する

## はじめに RailsでRactを導入したい時の選択肢の一つとして[react_on_rails](https://github.com/shakacode/react_on_rails)があると思います。 今回はそのreact_on_railsでのHMR (Hot Module Replacement)を導入する方法をご紹介します。 HMRを有効化することで、Reactコードを変更する...

react_on_railsにHMRを導入する
2021/10/15
[Rails]CSVダウンロード機能を細部まで理解して実装する(2)Windows対応BOM付きUTF-8

この記事は、こちらのQiita記事 [[Rails]CSVダウンロード機能を細部まで理解して実装する(1)](https://qiita.com/kakudaisuke/items/329f6d87591dcd227ba5) の続きです。 「よっしゃー、実装終わったー!」と思って満を持してプルリク出したら、先輩から 「Windowsだと文字化けするよー。BOM付きUTF-8対応よろしくー。」 ...

[Rails]CSVダウンロード機能を細部まで理解して実装する(2)Windows対応BOM付きUTF-8
2021/09/27
駆け出しエンジニアスキルレベルアップ必然!レコードの外部キーの変更履歴を保存するには?(Ruby on Rails)

鬼滅の刃、竈門炭次郎が強い鬼と対峙してどんどん強くなっていくように、エンジニアも手強い課題と対峙していくと必然的にレベルアップしていくものですね。未経験エンジニア転職から9ヶ月、階級:癸(みずのと)、賀来大輔です。 今回はそんな手強く学びの多かった過去の鬼、いや課題を紹介します。 # どんな課題? (課題はデフォルメしてあります) あるお店では、家電製品を販売していて、客とスタッフがいます。...

駆け出しエンジニアスキルレベルアップ必然!レコードの外部キーの変更履歴を保存するには?(Ruby on Rails)
2021/07/16
Next.js + Railsでリニューアルした社内ニコカレシステムの技術スタックを公開します

弊社では社内システムが多く運用されています。そのうちの一つに私が開発・運用している「Nicole」というシステムがあります。 これは、いわゆるニコカレ(ニコニコカレンダー)をWebベースで入力・閲覧できるシステムで、今では社内SNS的な位置付けにもなりつつあります。 ![](/uploads/nicole_v2_dashboard.png) 今回、このシステムをNext.jsとRuby on ...

Next.js + Railsでリニューアルした社内ニコカレシステムの技術スタックを公開します
2021/06/10
Rails6での様々な画像プレビュー

railsでは、5→6にグレードアップした際に active storageの保存のタイミングが変更されました。 そこでrails5では簡単に実装できたプレビュー機能ですが rails6からは少し工夫が必要になったのでここで記事にしたいと思います。 まずはルーティングです。 今回は、ユーザーテーブルとイベントテーブルを用意してユーザーがイベントを持つようにします。 また、一覧、詳細、新規作...

Rails6での様々な画像プレビュー
2021/06/07
[Rails] Deviseでメールアドレスを使わず別プロパティで認証し、パスワードリセットにも対応する

弊社のRailsアプリでログイン機構を実装する場合、[Devise](!https://github.com/heartcombo/devise)をよく使います。 今回は以下のような仕様で実装しました。 ![](/uploads/sample_app_lucidchart.png) - 管理者サイト、生徒サイト、先生サイトが存在する3層構造 - 学校コードによってサイトを切り分け、それぞれの...

[Rails] Deviseでメールアドレスを使わず別プロパティで認証し、パスワードリセットにも対応する
2021/04/20
Railsアプリのユーザ認証をAzureADと連携する

Railsアプリを作るときの認証周りはすっかりdevise頼みとなってしまった今日このごろ。 最近、Azureを使ったシステムを開発しています。他のクラウドサービスでもそうですが、Azureが提供するサービスとの連携が強くなればなるほど、認証周りをAzure ADと連携する必要性が出てきます。 GitHubやTwitter, Facebookと連携したOAuth2認証の方法は調べるとすぐに見つ...

Railsアプリのユーザ認証をAzureADと連携する
2020/11/03
Railsにいいね機能をReactで実装する

こんにちは、岡嵜です。 本記事では「Railsにいいね機能をReactで実装する方法」を解説します。 Railsにいいね機能を実装する記事は既に巷に溢れていますが、Rails+Reactで実装するという記事は少ないです。 SPAとして作るわけではなく、あくまでRailsのViewにReactコンポーネントを埋め込む形で実装します。 このような方式を採用した理由についても言及したいと思います。...

Railsにいいね機能をReactで実装する
2020/01/19
Railsアプリケーションで絵文字コードを使えるようにする方法

岡嵜です。 本記事では、Railsアプリケーションで絵文字コードを使えるようにする方法をまとめます。 ## やりたいこと このように、絵文字コードを入力すると ![](/uploads/rails-emoji1.png) 対応する絵文字を表示できるようにします。 ![](/uploads/rails-emoji2.png) Slack等で浸透している入力方法ですね。 [絵文字とエモ...

Railsアプリケーションで絵文字コードを使えるようにする方法
2020/01/14
IP制限付き社内システム用のSlack App(Slash Commands)を作った

こんにちは。岡嵜です。 昨年、[こちらの記事](https://tech.fusic.co.jp/posts/2019-11-24-nicole/)に書いた「社内ニコニコカレンダーシステムNicole」ですが、ついに社員の半数がアクティブユーザとなりました! 今回、残り半数の社員をアクティブユーザとすべく、Slack Appを作ってみました。 ## 仕様 Slackで `/nicole` ...

IP制限付き社内システム用のSlack App(Slash Commands)を作った
2019/11/24
社員のモチベーションを可視化するため社内ニコニコカレンダーシステムを作ってみた

岡嵜です。 [前回の記事](https://tech.fusic.co.jp/posts/2019-11-12-m5stickc-pir/) とはうってかわって、今回は「社内Webシステム」を作ってみたというお話です。 このような社内ニコニコカレンダーシステム「Nicole」を作ってみたので、社外発信したいと思います。 ![](/uploads/nicole_dash.png) ## 背景 ...

社員のモチベーションを可視化するため社内ニコニコカレンダーシステムを作ってみた
2019/08/24
Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(後編)

Nuxt.jsとGrashQLとRuby on RailsでToDoアプリを作るためのチュートリアルです。 前編・後編を終えるとこのようなToDoアプリが完成する予定です。 ![](/uploads/nuxt-rails-graphql-todoapp.gif) **本記事はチュートリアルの【後編】です。試してみたいという人は先に[【前編】](https://tech.fusic.co.j...

Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(後編)
2019/08/22
Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(前編)

Nuxt.jsとGrashQLとRuby on RailsでToDoアプリを作るためのチュートリアルです。 前編・後編を終えるとこのようなToDoアプリが完成する予定です。 ![](/uploads/nuxt-rails-graphql-todoapp.gif) ソースコードは以下に公開しています。 ...

Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(前編)