f@ctor
現在Qiitaでは [graphql-rubyアップデートで引っかかった点(1.8->1.12) – Qiita](https://qiita.com/WakameSun/items/eab39302b9580b51b7a2) でも触れた通り、Ruby3.0へのアップデートを進めています。 基本的に自分1人がエイヤエイヤと進めて、ほぼほぼ動く(Rspecは全部通ったが、まだ実際に動かす検証が足りない状態)のものが完成しておりどんなに遅くなっても1月末には出せるだろうという状態です。 そこで、早計ではありますがここに苦労したよという部分を何個か選んで書いてみることにしました。 もしかしたら、今後何かにはまって増えるかもしれません。 ## 1. 破壊的変更に付いていけず放置されたGem対応 若干主旨からは外れそうな気もしますが、一番苦労したのはこれです。 基本的にはDependabotなどにより可能な限り新しい状態を保とうとしていますが、 **破壊的変更多すぎ!今は余裕ないから後で!** 放置されてしまうGemや、そもそもDependabotが作るPR数を絞っているとなかなかPRが作られ
現在Qiitaでは [graphql-rubyアップデートで引っかかった点(1.8->1.12) – Qiita](https://qiita.com/WakameSun/items/eab39302b9580b51b7a2) でも触れた通り、Ruby3.0へのアップデートを進めています。 基本的に自分1人がエイヤエイヤと進めて、ほぼほぼ動く(Rspecは全部通ったが、まだ実際に動かす検証が足りない状態)のものが完成しておりどんなに遅くなっても1月末には出せるだろうという状態です。 そこで、早計ではありますがここに苦労したよという部分を何個か選んで書いてみることにしました。 もしかしたら、今後何かにはまって増えるかもしれません。
## 1. 破壊的変更に付いていけず放置されたGem対応 若干主旨からは外れそうな気もしますが、一番苦労したのはこれです。 基本的にはDependabotなどにより可能な限り新しい状態を保とうとしていますが、 **破壊的変更多すぎ!今は余裕ないから後で!** 放置されてしまうGemや、そもそもDependabotが作るPR数を絞っているとなかなかPRが作られ
# はじめに ransackは検索機能を楽に実装することができるgemです。 https://github.com/activerecord-hackery/ransack スター数は執筆時現在5.3kで、今なお開発が続けられており、人気のgemと言って差し支えないでしょう。 しかし、そのセキュリティ上の問題点についてはあまり注目されていないように感じます。 実際、執筆時現在Googleで「ransack」と検索するとセキュリティについて触れられていない記事が散見されます。 この記事ではransackのセキュリティ上の問題点とその対策について紹介します。 # セキュリティ上の問題点 **デフォルトで任意のカラムに対して検索ができてしまいます。**[^1] 後述の手順によってカラムの中身を特定可能です。 ## 具体例 usersテーブルにはカラムsecret_tokenが存在するとします。 以下のような実装で、後述する対策をしていない場合に情報漏洩が起きます。 “`ruby class UsersController # GET /users def index
# はじめに
ransackは検索機能を楽に実装することができるgemです。 https://github.com/activerecord-hackery/ransack
スター数は執筆時現在5.3kで、今なお開発が続けられており、人気のgemと言って差し支えないでしょう。 しかし、そのセキュリティ上の問題点についてはあまり注目されていないように感じます。 実際、執筆時現在Googleで「ransack」と検索するとセキュリティについて触れられていない記事が散見されます。 この記事ではransackのセキュリティ上の問題点とその対策について紹介します。
# セキュリティ上の問題点
**デフォルトで任意のカラムに対して検索ができてしまいます。**[^1] 後述の手順によってカラムの中身を特定可能です。
## 具体例
usersテーブルにはカラムsecret_tokenが存在するとします。 以下のような実装で、後述する対策をしていない場合に情報漏洩が起きます。
“`ruby class UsersController # GET /users def index
[PONOS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ponos) の20日目の記事です。 昨日は@tequila0725さんの[BitbucketでPR作成時に表示されるコミットメッセージリストをPR説明テンプレート有りでも表示する](https://qiita.com/tequila0725/items/2074958ee693dc58bac6)でした。 # はじめに Cloud Spannerは計画的ダウンタイムがなく、無制限のスケーリングなど、他のデータベースにはない特徴を持ったデータベースです。 https://cloud.google.com/spanner?hl=ja 標準のActiveRecordはSpannerには対応していませんが、Googleからactiverecord-spanner-adapterが提供されていますので、そのGemを使って「Ruby on Rails」 + 「Cloud Spanner」の開発することできます。 この記事では、Cloud Spannerエミ
[PONOS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ponos) の20日目の記事です。 昨日は@tequila0725さんの[BitbucketでPR作成時に表示されるコミットメッセージリストをPR説明テンプレート有りでも表示する](https://qiita.com/tequila0725/items/2074958ee693dc58bac6)でした。
Cloud Spannerは計画的ダウンタイムがなく、無制限のスケーリングなど、他のデータベースにはない特徴を持ったデータベースです。
https://cloud.google.com/spanner?hl=ja
標準のActiveRecordはSpannerには対応していませんが、Googleからactiverecord-spanner-adapterが提供されていますので、そのGemを使って「Ruby on Rails」 + 「Cloud Spanner」の開発することできます。 この記事では、Cloud Spannerエミ
:::note この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。 ::: https://stimulus.hotwired.dev/reference/actions アクションはコントローラーでDOMイベントを処理する方法です。 “`html ActiveRecordを継承しなくたって動的でネストしたフォームオブジェクトを使いたい! この記事は[エムスリーキャリア FY22 AdventCalendar](https://qiita.com/advent-calendar/2022/m3c)20日目の記事です。 # はじめに 突然ですが、RailsエンジニアをしているとActiveRecordモデルを継承しないフォームオブジェクトで一対多、しかも子要素をクライアント上で動的に追加・削除するようなフォームを実装したい時もあるかと思います(あるのかな?) 調べてみた所そのような事例が見当たらなかったので(やっぱりなさそう)、自分が見つけた実装方法を記事に残したいと思います。 # 要件 1. クライアント(ブラウザ上)で子要素となるフォーム部分を動的に追加削除できること。 2. フォームオブジェクトはActiveRecordのモデルを継承しないこと。 3. バリデーションをフォームオブジェクトで実施して、入力値がバリデーションに引っかかった場合は子要素ごとにバリデーションエラーのメッセージが表示できること。(子要素ごとに状態を保持できること) 4. フォームの登録時にコントローラーでストロングパラメーターを使用できる 元記事を表示 【Rails6】formヘルパー内で、submitボタンにCSSをつけたい場合・button_tag要素を使ってtypeにsubmitを指定する場合 # やりたいこと * font awesomeを利用して以下の表示4のようになボタンを設置したい。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/362a96d9-3c83-e8a3-a1d3-4e441e48ad60.png) # 困ったこと * どうもうまく反映されない。以下それぞれすべてやってみたが、どれも正常にCSSが反映されなかったり、ちゃんと送信がされなかったり。 * <% f.submit> * <%=button_tag> * \ “`erb <%= f.submit "表示0", class: 'back-btn-update' %> <%# 送信はできる。font awesomeは使用せず自作CSS。 %> <%= button_tag :type => “submit”, :class =>”btn btn–red btn–radius btn–cubic” do %> 元記事を表示 railsでの曜日の表示 ## はじめに このページの予定表に曜日を表示させるという問題でした。 やっと理解出来たので記録します。 __※下記は完成図なのですでに曜日表示されています。__ ![スクリーンショット 2022-12-19 15.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073294/57e5e3f1-b7f7-8d00-fb7a-0636977c76a4.png) 最終的な記述です。 “`ruby lass CalendarsController < ApplicationController # 1週間のカレンダーと予定が表示されるページ def index get_week @plan = Plan.new end # 予定の保存 def create Plan.create(plan_params) redirect_to action: :index end private def plan_params 元記事を表示 CSPをわかりやすく説明したい ## CSPとは Content Security Policy の略。 CSPを用いることにより、ブラウザが読み込み可能なリソース(JavaScript, CSS, Imgなど)をホワイトリストで制限することができ、XSS攻撃 (Webアプリケーションにスクリプトを保存させ、該当するページを閲覧するたびに不正なスクリプトが実行されるなど) といった脆弱性に対する攻撃のを抑止することができます。 ホワイトリスト:許可リストのこと。逆にブラックリストとは禁止リストのこと。 ## CSP が必要になったきっかけ 別ドメインの Webサイトに iframe として埋め込む際に、CSPの frame-ancestors というディレクティブで、埋め込み先のドメインを指定する必要がありました。 frame-ancestorsを指定しリリースしたもののコンソールに以下のエラーが返されていました。 “`ruby Refused to load the script ‘https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX… bec 元記事を表示 Rails × React でSPA認証をFirebase AuthenticationのTwitter認証で実装してみた ## 始めに ポートフォリオを作成する際にログイン認証を実装すると思いますが、実装方法が色々あり何を選ぼうか悩むことはありませんか? 今回私はFirebase Authenticationを使用してTwitterのログイン認証を実装してみました! そこでなぜFirebase Authenticationを選んでどんなふうに実装していったのかざっくりまとめ見ました! ## 1.Firebase Authentificationとは? Firebase Authenticationはユーザー認証機能を提供し、ユーザ情報をクラウドで保存してくれる、Google運営のサービス。 Firebase Authenticationを使用することでtwitterやfacebook、メールアドレス・パスワード、Googleアカウントなど様々な方法で認証機能の実現を可能にできます。 ## 2.なぜFirebase Authenticationを選んだのか? Firebase Authentificationを選んだ理由を、2点挙げさせていただきます! **①ログイン機能を実装す 元記事を表示 RubyonRailsチュートリアル:実践メモ【第三章】 Ruby on Rails チュートリアル(Webサービス開発が学べる学習サービス)に従って、MVCフレームワークアプリケーションを作成していく。 **使用ツール** : AWS Cloud9 ## コントローラの新規作成 コントローラの新規作成には、generateスクリプトを使用する。 “` $ rails generate controller ControllerName アクション名(省略可) “` ※rails generateはrails gという短縮形でもOK Railsのアクションは、コントローラの中に配置する。 rails generate実行時にキャメルケースで記述を行うと、ファイルのコントローラ名がスネークケースで自動生成で登録される。 ↓↓↓ **StaticPages** → **static_pages_controller.rb** Rubynにはクラス名にキャメルケースを使う慣習と、ファイル名をスネークケースで記述する慣習がある。 参照:RubyonRailsチュートリアル 元記事を表示 devise.rbで記述されている内容について # はじめに deviseを触ることになったのですが、この便利なgemが何をしているのかわからなかったため、設定ファイルの中(英文)を翻訳して何をしているのか書いてみました。 一部日本語におかしな点があると思いますが、これからdeviseを触る方がいましたら設定ファイルを眺めてみるのもよいかもしれません。 早速以下が内容となります。 # devise.rbの内容 このファイルを変更していなくても、各設定オプションはデフォルト値に設定されています。コメントアウトされているものとされていないものがあることに注意してください。コメントアウトされていない行は、アップグレードの際に設定が壊れないようにするためです(Deviseの将来のバージョンがこれらのオプションのデフォルト値を変更した場合) このフックを使って、devise mailer や warden フックなどの設定を行ないます。 これらの設定オプションの多くは、あなたのモデルでそのまま設定することができます。 ## config.secret_key Deviseが使用するシークレットキーです。Deviseはこのキーを使っ 元記事を表示 rails_helper.rb に require ‘capybara/rails’ と require ‘capybara/rspec’ は書かなくていい [capybara](https://github.com/teamcapybara/capybara) gem の README の [Setup](https://github.com/teamcapybara/capybara/blob/5c8674713fa964211de43138180edfab1cc041ce/README.md#setup) と [Using Capybara with RSpec](https://github.com/teamcapybara/capybara/blob/5c8674713fa964211de43138180edfab1cc041ce/README.md#using-capybara-with-rspec) の段落には次のように、`require ‘capybara/rails’` と `require ‘capybara/rspec’` を追記してねと書かれています。 > If the application that you are testing is a Rails app, add this line to your te 元記事を表示 Dockerを使用したWebアプリケーションの開発環境を改善し開発者体験を良くする :::note info [LITALICO Advent Calendar 2022](https://qiita.com/advent-calendar/2022/litalico) 18日目の記事です ::: # 対象読者 – 開発者体験をもっと良くしたいと考えている開発者・マネージャー – 開発環境をもっと早くしたいと考えている方 – 最近RailsやLaravelの起動が遅くて困っている方 – フロントエンドのビルドが遅くてイライラする方 – Mac使用者(Windowsユーザーの方にも参考にできる部分はあると思います) – Docker DesktopやRancher Desktopの遅さにうんざりしている方 # この記事について この記事は「開発環境を改善し開発者体験を良くする」をテーマとしており、 開発環境を遅くしている原因と、それに対する解決策が書いてあります。 想定は以下の通りですが、そうでない場合も有効な案はあると思います。 – バックエンドはRailsやLaravelなどのWebフレームワークを使用している – フロントエンドはVueやReactな 元記事を表示 Wardenのwikiを翻訳してみた Deviseのベースになっているgem “Warden”のwikiを翻訳してみました。(2022/12/18時点) 誤訳のご指摘があれば修正します。 # Warden Warden wikiへようこそ。WardenはRackベースのRubyアプリケーションでの認証メカニズムを提供します。同じRackインスタンス内で複数のアプリケーションを共有することを念頭に作られています。 ここに長いドキュメントがあります。ドキュメントは最新を保つように努めますが、正確な詳細についてはソースコードやソースドキュメントを参照してください ## Overview ### The What WardenはRubyWebアプリケーションの認証メカニズムを提供するために設計されたRackベースのミドルウェアです。Rackの構成要素に合う一般的なメカニズムで、認証用に強力な選択肢を提供します。 Wardenは怠惰に設計されています。つまり、使わないときには何もせず、使うときには突然動き出して、どんなRackベースのアプリケーションでも認証を許可する基本的メカニズムを提供するのです。 ### The Why 元記事を表示 現状のSwaggerスキーマとシリアライザの改善を行なった話 ## はじめに Railsで運用されているAPIサーバーのシリアライザとSwaggerスキーマをリファクタリングした話と、そこで当たった問題(余談)の紹介です。 ## 現状の状態 社内のサービスはAPIサーバーとしてRailsを用いて運用されているのですが、長く運用されているため、手動で作成されるSwaggerスキーマとそれに対応したシリアライザが無秩序な状態にあり、新規APIの実装や修正が入るたびに各人の裁量でスキーマおよびシリアライザを使用・作成していて、運用しづらくなっていました。また、ActiveModel::Serializerなどは使っていなく、独自で実装を行なっています。 実際にどのような構成になっていたかの例を大雑把に。 ### 例 例えば、以下のようなモデルがあったとして “`Ruby class Member < ActiveRecord::Migration def change create_table :members do |t| t.string :user_name t.string 元記事を表示 controllerのインスタンス変数をなんでviewでも使えるの? ## はじめに Railsでは“`controller“`で定義したインスタンス変数を“`view“`側で使うことができますが、最近、ふと「これなんで?」と思ったのでrailsの中身を見てみようと思います。 ## コードリーディング 作成される“`controller“`は“`ApplicationController“`を継承していて、“`ApplicationController“`は“`ActionController::Base“`を継承しているので、“`ActionController::Base“`を見にいきます。 “`actionpack/lib/action_controller/base.rb # == Renders # # Action Controller sends content to the user by using one of five rendering methods. The most versatile and common is the rendering # of a template. In 元記事を表示 Stimulus リファレンス: ライフサイクルコールバック :::note この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。 ::: https://stimulus.hotwired.dev/reference/lifecycle-callbacks ライフサイクルコールバックと呼ばれる特別なメソッドを使用すると、コントローラーまたは特定のターゲットがドキュメントに接続したり、ドキュメントから切断したりするたびに応答できます。 “`javascript import { Controller } from “@hotwired/stimulus” export default class extends Controller { connect() { // … } } “` # メソッド | メソッド | Stimulusによる呼び出し | | :– | :– | | initialize() | コントローラーが最初にインスタンス化されたときに1回 | | [name]TargetConnected(target: Element 元記事を表示 Rails のフロントエンドツールに vite_rails を使う Rails7からフロントエンドで使えるツールのオプションが増えました。jsのデフォルトは`importmap-rails`、モジュールバンドラーを使いたい場合は`jsbundling-rails`で`webpack`, `esbuild`, `rollup`が選べます。 ビルドが早いと言われている`esbuild`を使うのも良いですが、まだ開発中の機能もあります。 開発環境は高速化して、安定して本番ビルドできるツールを探したところ`vite_rails`が良さそうでしたので試してみました。 ## vite_rails とは ビルドツール Vite を Rails に最適化したライブラリです。基本的に Webpacker でできることは網羅しています。 ### 特徴 – エントリーポイントを自動検出 – `app/frontend/entorypoints`以下のファイルを自動で検出してビルドします。 – 高速なHMR(Hot Module Replacement)ができる – 事前ビルドに`esbuild`を使っている – `assets:precompile 元記事を表示 【Rails6】レビューの平均値をレーダーチャートで表示する方法(gon、chartkick、chart.js) # 概要 * Userが5段階評価ができる5つの項目のレビューを行うと、それぞれの平均値がレーダーチャートとなってトップビューに表示される実装を行ったので、その手順を記す。5段階評価機能については、別記事でまとめています。 * [【Rails6】5段階評価の星レビュー機能を実装する手順(raty.js)](https://qiita.com/Ryo-0131/items/63e81b13b9382690bee4) # 前提 * 今回の実装においては、chart.jsとchartkick両方を利用する。利用先は以下の通り。 * トップビュー(/index):chartkickでバーチャート表示 * 詳細ページ(/show):chart.jsでレーダーチャート表示 * JSとrailsの連携は、gem gonを利用する。(chartkickはrails内で完結) * gonとは:controller内でセットした変数をJavascript内で使う事ができるgem。他にもあると思いますが、今回はこちら使用 * テーブルやカラムの関係性については、下記データベ 元記事を表示 同じpage内で同一のStimulus controllerを何度も利用したいとき # 概要 PF用にアプリを個人開発しているRailsしか知らない素人です。親愛なるDHHが提供するHotwireを完全に理解した までも行きついていません。何もかもが霧の中、私はどこにいるのか… その Hotwireに含まれる必要十分なJSパッケージ、 Stimulusのcontrollerを同じページ内で何度も使用する状況の際、なんかうまくいかないなぁ?、ハマったなぁ?、ということがあったのですが、とても単純なことで解決できたので、Stimulusはいいぞ?、もっと流行ってくれというご祈祷として記事を作成します。 ## 環境 この記事作成当時の一番latest releaseのversionを使用してました。 “`Gemfiles.rb # 抜粋です gem ‘stimulus-rails’, ‘~>1.2.1’ “` ## やりたかったこと タイトルの通り、同一page内で同じstimulus controllerを何度も利用したい。 ## 結論 使う場所ごとに個別にcontrollerを宣言してその中でtargetやactionを記載すればうまくいきました。 ## 元記事を表示
:::note この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。 :::
https://stimulus.hotwired.dev/reference/actions
アクションはコントローラーでDOMイベントを処理する方法です。
“`html
この記事は[エムスリーキャリア FY22 AdventCalendar](https://qiita.com/advent-calendar/2022/m3c)20日目の記事です。 # はじめに 突然ですが、RailsエンジニアをしているとActiveRecordモデルを継承しないフォームオブジェクトで一対多、しかも子要素をクライアント上で動的に追加・削除するようなフォームを実装したい時もあるかと思います(あるのかな?) 調べてみた所そのような事例が見当たらなかったので(やっぱりなさそう)、自分が見つけた実装方法を記事に残したいと思います。 # 要件 1. クライアント(ブラウザ上)で子要素となるフォーム部分を動的に追加削除できること。 2. フォームオブジェクトはActiveRecordのモデルを継承しないこと。 3. バリデーションをフォームオブジェクトで実施して、入力値がバリデーションに引っかかった場合は子要素ごとにバリデーションエラーのメッセージが表示できること。(子要素ごとに状態を保持できること) 4. フォームの登録時にコントローラーでストロングパラメーターを使用できる
この記事は[エムスリーキャリア FY22 AdventCalendar](https://qiita.com/advent-calendar/2022/m3c)20日目の記事です。
# はじめに 突然ですが、RailsエンジニアをしているとActiveRecordモデルを継承しないフォームオブジェクトで一対多、しかも子要素をクライアント上で動的に追加・削除するようなフォームを実装したい時もあるかと思います(あるのかな?) 調べてみた所そのような事例が見当たらなかったので(やっぱりなさそう)、自分が見つけた実装方法を記事に残したいと思います。
# 要件 1. クライアント(ブラウザ上)で子要素となるフォーム部分を動的に追加削除できること。 2. フォームオブジェクトはActiveRecordのモデルを継承しないこと。 3. バリデーションをフォームオブジェクトで実施して、入力値がバリデーションに引っかかった場合は子要素ごとにバリデーションエラーのメッセージが表示できること。(子要素ごとに状態を保持できること) 4. フォームの登録時にコントローラーでストロングパラメーターを使用できる
# やりたいこと * font awesomeを利用して以下の表示4のようになボタンを設置したい。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/362a96d9-3c83-e8a3-a1d3-4e441e48ad60.png) # 困ったこと * どうもうまく反映されない。以下それぞれすべてやってみたが、どれも正常にCSSが反映されなかったり、ちゃんと送信がされなかったり。 * <% f.submit> * <%=button_tag> * \ “`erb <%= f.submit "表示0", class: 'back-btn-update' %> <%# 送信はできる。font awesomeは使用せず自作CSS。 %> <%= button_tag :type => “submit”, :class =>”btn btn–red btn–radius btn–cubic” do %>
# やりたいこと * font awesomeを利用して以下の表示4のようになボタンを設置したい。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/362a96d9-3c83-e8a3-a1d3-4e441e48ad60.png)
# 困ったこと * どうもうまく反映されない。以下それぞれすべてやってみたが、どれも正常にCSSが反映されなかったり、ちゃんと送信がされなかったり。 * <% f.submit> * <%=button_tag> * \
“`erb <%= f.submit "表示0", class: 'back-btn-update' %> <%# 送信はできる。font awesomeは使用せず自作CSS。 %>
<%= button_tag :type => “submit”, :class =>”btn btn–red btn–radius btn–cubic” do %>
## はじめに このページの予定表に曜日を表示させるという問題でした。 やっと理解出来たので記録します。 __※下記は完成図なのですでに曜日表示されています。__ ![スクリーンショット 2022-12-19 15.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073294/57e5e3f1-b7f7-8d00-fb7a-0636977c76a4.png) 最終的な記述です。 “`ruby lass CalendarsController < ApplicationController # 1週間のカレンダーと予定が表示されるページ def index get_week @plan = Plan.new end # 予定の保存 def create Plan.create(plan_params) redirect_to action: :index end private def plan_params
## はじめに このページの予定表に曜日を表示させるという問題でした。 やっと理解出来たので記録します。
__※下記は完成図なのですでに曜日表示されています。__ ![スクリーンショット 2022-12-19 15.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073294/57e5e3f1-b7f7-8d00-fb7a-0636977c76a4.png)
最終的な記述です。 “`ruby lass CalendarsController < ApplicationController # 1週間のカレンダーと予定が表示されるページ def index get_week @plan = Plan.new end # 予定の保存 def create Plan.create(plan_params) redirect_to action: :index end private def plan_params
## CSPとは Content Security Policy の略。 CSPを用いることにより、ブラウザが読み込み可能なリソース(JavaScript, CSS, Imgなど)をホワイトリストで制限することができ、XSS攻撃 (Webアプリケーションにスクリプトを保存させ、該当するページを閲覧するたびに不正なスクリプトが実行されるなど) といった脆弱性に対する攻撃のを抑止することができます。 ホワイトリスト:許可リストのこと。逆にブラックリストとは禁止リストのこと。 ## CSP が必要になったきっかけ 別ドメインの Webサイトに iframe として埋め込む際に、CSPの frame-ancestors というディレクティブで、埋め込み先のドメインを指定する必要がありました。 frame-ancestorsを指定しリリースしたもののコンソールに以下のエラーが返されていました。 “`ruby Refused to load the script ‘https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX… bec
## CSPとは
Content Security Policy の略。
CSPを用いることにより、ブラウザが読み込み可能なリソース(JavaScript, CSS, Imgなど)をホワイトリストで制限することができ、XSS攻撃 (Webアプリケーションにスクリプトを保存させ、該当するページを閲覧するたびに不正なスクリプトが実行されるなど) といった脆弱性に対する攻撃のを抑止することができます。
ホワイトリスト:許可リストのこと。逆にブラックリストとは禁止リストのこと。
## CSP が必要になったきっかけ
別ドメインの Webサイトに iframe として埋め込む際に、CSPの frame-ancestors というディレクティブで、埋め込み先のドメインを指定する必要がありました。
frame-ancestorsを指定しリリースしたもののコンソールに以下のエラーが返されていました。
“`ruby Refused to load the script ‘https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX… bec
## 始めに ポートフォリオを作成する際にログイン認証を実装すると思いますが、実装方法が色々あり何を選ぼうか悩むことはありませんか? 今回私はFirebase Authenticationを使用してTwitterのログイン認証を実装してみました! そこでなぜFirebase Authenticationを選んでどんなふうに実装していったのかざっくりまとめ見ました! ## 1.Firebase Authentificationとは? Firebase Authenticationはユーザー認証機能を提供し、ユーザ情報をクラウドで保存してくれる、Google運営のサービス。 Firebase Authenticationを使用することでtwitterやfacebook、メールアドレス・パスワード、Googleアカウントなど様々な方法で認証機能の実現を可能にできます。 ## 2.なぜFirebase Authenticationを選んだのか? Firebase Authentificationを選んだ理由を、2点挙げさせていただきます! **①ログイン機能を実装す
## 始めに
ポートフォリオを作成する際にログイン認証を実装すると思いますが、実装方法が色々あり何を選ぼうか悩むことはありませんか?
今回私はFirebase Authenticationを使用してTwitterのログイン認証を実装してみました!
そこでなぜFirebase Authenticationを選んでどんなふうに実装していったのかざっくりまとめ見ました!
## 1.Firebase Authentificationとは?
Firebase Authenticationはユーザー認証機能を提供し、ユーザ情報をクラウドで保存してくれる、Google運営のサービス。
Firebase Authenticationを使用することでtwitterやfacebook、メールアドレス・パスワード、Googleアカウントなど様々な方法で認証機能の実現を可能にできます。
## 2.なぜFirebase Authenticationを選んだのか?
Firebase Authentificationを選んだ理由を、2点挙げさせていただきます!
**①ログイン機能を実装す
Ruby on Rails チュートリアル(Webサービス開発が学べる学習サービス)に従って、MVCフレームワークアプリケーションを作成していく。 **使用ツール** : AWS Cloud9 ## コントローラの新規作成 コントローラの新規作成には、generateスクリプトを使用する。 “` $ rails generate controller ControllerName アクション名(省略可) “` ※rails generateはrails gという短縮形でもOK Railsのアクションは、コントローラの中に配置する。 rails generate実行時にキャメルケースで記述を行うと、ファイルのコントローラ名がスネークケースで自動生成で登録される。 ↓↓↓ **StaticPages** → **static_pages_controller.rb** Rubynにはクラス名にキャメルケースを使う慣習と、ファイル名をスネークケースで記述する慣習がある。 参照:RubyonRailsチュートリアル
Ruby on Rails チュートリアル(Webサービス開発が学べる学習サービス)に従って、MVCフレームワークアプリケーションを作成していく。
**使用ツール** : AWS Cloud9 ## コントローラの新規作成 コントローラの新規作成には、generateスクリプトを使用する。 “` $ rails generate controller ControllerName アクション名(省略可) “` ※rails generateはrails gという短縮形でもOK
Railsのアクションは、コントローラの中に配置する。
rails generate実行時にキャメルケースで記述を行うと、ファイルのコントローラ名がスネークケースで自動生成で登録される。 ↓↓↓ **StaticPages** → **static_pages_controller.rb**
Rubynにはクラス名にキャメルケースを使う慣習と、ファイル名をスネークケースで記述する慣習がある。
参照:RubyonRailsチュートリアル
# はじめに deviseを触ることになったのですが、この便利なgemが何をしているのかわからなかったため、設定ファイルの中(英文)を翻訳して何をしているのか書いてみました。 一部日本語におかしな点があると思いますが、これからdeviseを触る方がいましたら設定ファイルを眺めてみるのもよいかもしれません。 早速以下が内容となります。 # devise.rbの内容 このファイルを変更していなくても、各設定オプションはデフォルト値に設定されています。コメントアウトされているものとされていないものがあることに注意してください。コメントアウトされていない行は、アップグレードの際に設定が壊れないようにするためです(Deviseの将来のバージョンがこれらのオプションのデフォルト値を変更した場合) このフックを使って、devise mailer や warden フックなどの設定を行ないます。 これらの設定オプションの多くは、あなたのモデルでそのまま設定することができます。 ## config.secret_key Deviseが使用するシークレットキーです。Deviseはこのキーを使っ
deviseを触ることになったのですが、この便利なgemが何をしているのかわからなかったため、設定ファイルの中(英文)を翻訳して何をしているのか書いてみました。 一部日本語におかしな点があると思いますが、これからdeviseを触る方がいましたら設定ファイルを眺めてみるのもよいかもしれません。
早速以下が内容となります。
# devise.rbの内容
このファイルを変更していなくても、各設定オプションはデフォルト値に設定されています。コメントアウトされているものとされていないものがあることに注意してください。コメントアウトされていない行は、アップグレードの際に設定が壊れないようにするためです(Deviseの将来のバージョンがこれらのオプションのデフォルト値を変更した場合)
このフックを使って、devise mailer や warden フックなどの設定を行ないます。 これらの設定オプションの多くは、あなたのモデルでそのまま設定することができます。
## config.secret_key Deviseが使用するシークレットキーです。Deviseはこのキーを使っ
[capybara](https://github.com/teamcapybara/capybara) gem の README の [Setup](https://github.com/teamcapybara/capybara/blob/5c8674713fa964211de43138180edfab1cc041ce/README.md#setup) と [Using Capybara with RSpec](https://github.com/teamcapybara/capybara/blob/5c8674713fa964211de43138180edfab1cc041ce/README.md#using-capybara-with-rspec) の段落には次のように、`require ‘capybara/rails’` と `require ‘capybara/rspec’` を追記してねと書かれています。 > If the application that you are testing is a Rails app, add this line to your te
[capybara](https://github.com/teamcapybara/capybara) gem の README の [Setup](https://github.com/teamcapybara/capybara/blob/5c8674713fa964211de43138180edfab1cc041ce/README.md#setup) と [Using Capybara with RSpec](https://github.com/teamcapybara/capybara/blob/5c8674713fa964211de43138180edfab1cc041ce/README.md#using-capybara-with-rspec) の段落には次のように、`require ‘capybara/rails’` と `require ‘capybara/rspec’` を追記してねと書かれています。
> If the application that you are testing is a Rails app, add this line to your te
:::note info [LITALICO Advent Calendar 2022](https://qiita.com/advent-calendar/2022/litalico) 18日目の記事です ::: # 対象読者 – 開発者体験をもっと良くしたいと考えている開発者・マネージャー – 開発環境をもっと早くしたいと考えている方 – 最近RailsやLaravelの起動が遅くて困っている方 – フロントエンドのビルドが遅くてイライラする方 – Mac使用者(Windowsユーザーの方にも参考にできる部分はあると思います) – Docker DesktopやRancher Desktopの遅さにうんざりしている方 # この記事について この記事は「開発環境を改善し開発者体験を良くする」をテーマとしており、 開発環境を遅くしている原因と、それに対する解決策が書いてあります。 想定は以下の通りですが、そうでない場合も有効な案はあると思います。 – バックエンドはRailsやLaravelなどのWebフレームワークを使用している – フロントエンドはVueやReactな
:::note info [LITALICO Advent Calendar 2022](https://qiita.com/advent-calendar/2022/litalico) 18日目の記事です :::
# 対象読者 – 開発者体験をもっと良くしたいと考えている開発者・マネージャー – 開発環境をもっと早くしたいと考えている方 – 最近RailsやLaravelの起動が遅くて困っている方 – フロントエンドのビルドが遅くてイライラする方 – Mac使用者(Windowsユーザーの方にも参考にできる部分はあると思います) – Docker DesktopやRancher Desktopの遅さにうんざりしている方
# この記事について この記事は「開発環境を改善し開発者体験を良くする」をテーマとしており、 開発環境を遅くしている原因と、それに対する解決策が書いてあります。
想定は以下の通りですが、そうでない場合も有効な案はあると思います。 – バックエンドはRailsやLaravelなどのWebフレームワークを使用している – フロントエンドはVueやReactな
Deviseのベースになっているgem “Warden”のwikiを翻訳してみました。(2022/12/18時点) 誤訳のご指摘があれば修正します。 # Warden Warden wikiへようこそ。WardenはRackベースのRubyアプリケーションでの認証メカニズムを提供します。同じRackインスタンス内で複数のアプリケーションを共有することを念頭に作られています。 ここに長いドキュメントがあります。ドキュメントは最新を保つように努めますが、正確な詳細についてはソースコードやソースドキュメントを参照してください ## Overview ### The What WardenはRubyWebアプリケーションの認証メカニズムを提供するために設計されたRackベースのミドルウェアです。Rackの構成要素に合う一般的なメカニズムで、認証用に強力な選択肢を提供します。 Wardenは怠惰に設計されています。つまり、使わないときには何もせず、使うときには突然動き出して、どんなRackベースのアプリケーションでも認証を許可する基本的メカニズムを提供するのです。 ### The Why
Deviseのベースになっているgem “Warden”のwikiを翻訳してみました。(2022/12/18時点) 誤訳のご指摘があれば修正します。
# Warden Warden wikiへようこそ。WardenはRackベースのRubyアプリケーションでの認証メカニズムを提供します。同じRackインスタンス内で複数のアプリケーションを共有することを念頭に作られています。 ここに長いドキュメントがあります。ドキュメントは最新を保つように努めますが、正確な詳細についてはソースコードやソースドキュメントを参照してください
## Overview ### The What WardenはRubyWebアプリケーションの認証メカニズムを提供するために設計されたRackベースのミドルウェアです。Rackの構成要素に合う一般的なメカニズムで、認証用に強力な選択肢を提供します。 Wardenは怠惰に設計されています。つまり、使わないときには何もせず、使うときには突然動き出して、どんなRackベースのアプリケーションでも認証を許可する基本的メカニズムを提供するのです。
### The Why
## はじめに Railsで運用されているAPIサーバーのシリアライザとSwaggerスキーマをリファクタリングした話と、そこで当たった問題(余談)の紹介です。 ## 現状の状態 社内のサービスはAPIサーバーとしてRailsを用いて運用されているのですが、長く運用されているため、手動で作成されるSwaggerスキーマとそれに対応したシリアライザが無秩序な状態にあり、新規APIの実装や修正が入るたびに各人の裁量でスキーマおよびシリアライザを使用・作成していて、運用しづらくなっていました。また、ActiveModel::Serializerなどは使っていなく、独自で実装を行なっています。 実際にどのような構成になっていたかの例を大雑把に。 ### 例 例えば、以下のようなモデルがあったとして “`Ruby class Member < ActiveRecord::Migration def change create_table :members do |t| t.string :user_name t.string
## はじめに
Railsで運用されているAPIサーバーのシリアライザとSwaggerスキーマをリファクタリングした話と、そこで当たった問題(余談)の紹介です。
## 現状の状態
社内のサービスはAPIサーバーとしてRailsを用いて運用されているのですが、長く運用されているため、手動で作成されるSwaggerスキーマとそれに対応したシリアライザが無秩序な状態にあり、新規APIの実装や修正が入るたびに各人の裁量でスキーマおよびシリアライザを使用・作成していて、運用しづらくなっていました。また、ActiveModel::Serializerなどは使っていなく、独自で実装を行なっています。
実際にどのような構成になっていたかの例を大雑把に。
### 例
例えば、以下のようなモデルがあったとして
“`Ruby class Member < ActiveRecord::Migration def change create_table :members do |t| t.string :user_name t.string
## はじめに Railsでは“`controller“`で定義したインスタンス変数を“`view“`側で使うことができますが、最近、ふと「これなんで?」と思ったのでrailsの中身を見てみようと思います。 ## コードリーディング 作成される“`controller“`は“`ApplicationController“`を継承していて、“`ApplicationController“`は“`ActionController::Base“`を継承しているので、“`ActionController::Base“`を見にいきます。 “`actionpack/lib/action_controller/base.rb # == Renders # # Action Controller sends content to the user by using one of five rendering methods. The most versatile and common is the rendering # of a template. In
## はじめに Railsでは“`controller“`で定義したインスタンス変数を“`view“`側で使うことができますが、最近、ふと「これなんで?」と思ったのでrailsの中身を見てみようと思います。
## コードリーディング 作成される“`controller“`は“`ApplicationController“`を継承していて、“`ApplicationController“`は“`ActionController::Base“`を継承しているので、“`ActionController::Base“`を見にいきます。
“`actionpack/lib/action_controller/base.rb # == Renders # # Action Controller sends content to the user by using one of five rendering methods. The most versatile and common is the rendering # of a template. In
:::note この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。 ::: https://stimulus.hotwired.dev/reference/lifecycle-callbacks ライフサイクルコールバックと呼ばれる特別なメソッドを使用すると、コントローラーまたは特定のターゲットがドキュメントに接続したり、ドキュメントから切断したりするたびに応答できます。 “`javascript import { Controller } from “@hotwired/stimulus” export default class extends Controller { connect() { // … } } “` # メソッド | メソッド | Stimulusによる呼び出し | | :– | :– | | initialize() | コントローラーが最初にインスタンス化されたときに1回 | | [name]TargetConnected(target: Element
https://stimulus.hotwired.dev/reference/lifecycle-callbacks
ライフサイクルコールバックと呼ばれる特別なメソッドを使用すると、コントローラーまたは特定のターゲットがドキュメントに接続したり、ドキュメントから切断したりするたびに応答できます。
“`javascript import { Controller } from “@hotwired/stimulus”
export default class extends Controller { connect() { // … } } “`
# メソッド
| メソッド | Stimulusによる呼び出し | | :– | :– | | initialize() | コントローラーが最初にインスタンス化されたときに1回 | | [name]TargetConnected(target: Element
Rails7からフロントエンドで使えるツールのオプションが増えました。jsのデフォルトは`importmap-rails`、モジュールバンドラーを使いたい場合は`jsbundling-rails`で`webpack`, `esbuild`, `rollup`が選べます。 ビルドが早いと言われている`esbuild`を使うのも良いですが、まだ開発中の機能もあります。 開発環境は高速化して、安定して本番ビルドできるツールを探したところ`vite_rails`が良さそうでしたので試してみました。 ## vite_rails とは ビルドツール Vite を Rails に最適化したライブラリです。基本的に Webpacker でできることは網羅しています。 ### 特徴 – エントリーポイントを自動検出 – `app/frontend/entorypoints`以下のファイルを自動で検出してビルドします。 – 高速なHMR(Hot Module Replacement)ができる – 事前ビルドに`esbuild`を使っている – `assets:precompile
Rails7からフロントエンドで使えるツールのオプションが増えました。jsのデフォルトは`importmap-rails`、モジュールバンドラーを使いたい場合は`jsbundling-rails`で`webpack`, `esbuild`, `rollup`が選べます。
ビルドが早いと言われている`esbuild`を使うのも良いですが、まだ開発中の機能もあります。 開発環境は高速化して、安定して本番ビルドできるツールを探したところ`vite_rails`が良さそうでしたので試してみました。
## vite_rails とは
ビルドツール Vite を Rails に最適化したライブラリです。基本的に Webpacker でできることは網羅しています。
### 特徴
– エントリーポイントを自動検出 – `app/frontend/entorypoints`以下のファイルを自動で検出してビルドします。 – 高速なHMR(Hot Module Replacement)ができる – 事前ビルドに`esbuild`を使っている – `assets:precompile
# 概要 * Userが5段階評価ができる5つの項目のレビューを行うと、それぞれの平均値がレーダーチャートとなってトップビューに表示される実装を行ったので、その手順を記す。5段階評価機能については、別記事でまとめています。 * [【Rails6】5段階評価の星レビュー機能を実装する手順(raty.js)](https://qiita.com/Ryo-0131/items/63e81b13b9382690bee4) # 前提 * 今回の実装においては、chart.jsとchartkick両方を利用する。利用先は以下の通り。 * トップビュー(/index):chartkickでバーチャート表示 * 詳細ページ(/show):chart.jsでレーダーチャート表示 * JSとrailsの連携は、gem gonを利用する。(chartkickはrails内で完結) * gonとは:controller内でセットした変数をJavascript内で使う事ができるgem。他にもあると思いますが、今回はこちら使用 * テーブルやカラムの関係性については、下記データベ
# 概要 * Userが5段階評価ができる5つの項目のレビューを行うと、それぞれの平均値がレーダーチャートとなってトップビューに表示される実装を行ったので、その手順を記す。5段階評価機能については、別記事でまとめています。 * [【Rails6】5段階評価の星レビュー機能を実装する手順(raty.js)](https://qiita.com/Ryo-0131/items/63e81b13b9382690bee4)
# 前提 * 今回の実装においては、chart.jsとchartkick両方を利用する。利用先は以下の通り。 * トップビュー(/index):chartkickでバーチャート表示 * 詳細ページ(/show):chart.jsでレーダーチャート表示 * JSとrailsの連携は、gem gonを利用する。(chartkickはrails内で完結) * gonとは:controller内でセットした変数をJavascript内で使う事ができるgem。他にもあると思いますが、今回はこちら使用 * テーブルやカラムの関係性については、下記データベ
# 概要 PF用にアプリを個人開発しているRailsしか知らない素人です。親愛なるDHHが提供するHotwireを完全に理解した までも行きついていません。何もかもが霧の中、私はどこにいるのか… その Hotwireに含まれる必要十分なJSパッケージ、 Stimulusのcontrollerを同じページ内で何度も使用する状況の際、なんかうまくいかないなぁ?、ハマったなぁ?、ということがあったのですが、とても単純なことで解決できたので、Stimulusはいいぞ?、もっと流行ってくれというご祈祷として記事を作成します。 ## 環境 この記事作成当時の一番latest releaseのversionを使用してました。 “`Gemfiles.rb # 抜粋です gem ‘stimulus-rails’, ‘~>1.2.1’ “` ## やりたかったこと タイトルの通り、同一page内で同じstimulus controllerを何度も利用したい。 ## 結論 使う場所ごとに個別にcontrollerを宣言してその中でtargetやactionを記載すればうまくいきました。 ##
# 概要 PF用にアプリを個人開発しているRailsしか知らない素人です。親愛なるDHHが提供するHotwireを完全に理解した までも行きついていません。何もかもが霧の中、私はどこにいるのか… その Hotwireに含まれる必要十分なJSパッケージ、 Stimulusのcontrollerを同じページ内で何度も使用する状況の際、なんかうまくいかないなぁ?、ハマったなぁ?、ということがあったのですが、とても単純なことで解決できたので、Stimulusはいいぞ?、もっと流行ってくれというご祈祷として記事を作成します。
## 環境 この記事作成当時の一番latest releaseのversionを使用してました。 “`Gemfiles.rb # 抜粋です gem ‘stimulus-rails’, ‘~>1.2.1’ “`
## やりたかったこと タイトルの通り、同一page内で同じstimulus controllerを何度も利用したい。
## 結論 使う場所ごとに個別にcontrollerを宣言してその中でtargetやactionを記載すればうまくいきました。
##