はじめに
フィヨルドブートキャンプで学習しています、もとひろです！
今回は、Rails7.2で起こるGoogleChromeの開発者ツール（以下devツール）でのエラーについて書きたいと思います。
フィヨルドブートキャンプで実施しているAdventCalendarの記事です。
「フィヨルドブートキャンプ Advent Calendar 2024 Part2」の8日目を担当しています。
Part1→フィヨルドブートキャンプ Part 1 Advent Calendar 2024 - Adventar
昨日はkyokucho1989さんの「時間とたたかうフィヨルドブートキャンプ 」でした。
Part2→フィヨルドブートキャンプ Part 2 Advent Calendar 2024 - Adventar
昨日はsugiweさんの「bootcampアプリにissueを立てるのが楽しい話」でした。
概要
Chrome のdevツールでデバイスモードを変更して操作しようとすると406エラーが出ます。
Rails7.2でデフォルトで設定されているallow_browser versions: :modernによるものです。
環境
Rails：7.2.2
Ruby：3.3.5
Chrome：131.0.6778.108
詳細
状況
Rails7.2で$ rails newしたアプリケーションを起動します。
（rails new、scaffold、migrateのみ実行し、作成されたコードをそのままサンプルとしています）
通常のChromeの画面では問題なく操作できています。
devツールでデバイスモードを設定します。
今回の動画では、iPhone14 Pro Maxに設定しました。
この状態で操作しようとすると、406エラーが表示されます。
リロードしてもエラーが変わりません。
原因
Rails7.2で$ rails newを実行すると、デフォルトでブラウザのバージョン保護機能が追加されています。
Ruby on Rails 7.2 リリースノート - Railsガイド
# app/controllers/application_controller.rb class ApplicationController < ActionController::Base # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has. allow_browser versions: :modern ←これです end
allow_browser versions:で設定されているバージョン未満のブラウザでサービスにアクセスした場合、406エラーを返すようになっています。
406エラーに関してはこちらを参考にしてください↓
406 Not Acceptable - HTTP | MDN
:modernで設定されるバージョンは以下のとおりです。
ActionController::AllowBrowser::ClassMethods
Chromeのdevツールでデバイスを変更してサービスを表示すると、例えばiPhoneであればSafariでアクセスすることになります。
Chromeのdevツール内のSafariやChromeのバージョンは低いです。
現時点でのChromeのdevツールで確認できる代表的なデバイスでバージョンを調べました。
devツールのコンソールでconsole.log(navigator.userAgent);と入力すると調べることができます。
（2024/12/7 Chrome： 131.0.6778.108）
iPhone14 Pro Max：Safari 16.6
Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
iPhoneSE：Safari 16.6
Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
Pixel 7：Chrome 116.0.0.0
Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36
Samsung Galaxy S20 Ultra：Chrome 116.0.0.0
Mozilla/5.0 (Linux; Android 13; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36
:mordenの基準に達していないのでサービス対象外となり、操作時に406エラーが表示されていました。
$ rails newした時点でデフォルトで406エラーページが作成されています↓
/public/406-unsupported-browser.html
406-unsupported-browser.htmlを削除していると500エラーでページが表示されます。
ちなみに、細かい調査はしていませんが、
FireFoxでもdevツールでデバイスを変更し操作すると同じように406エラーが表示されます。
私が行った対応
今回私がこのエラーに遭遇したのは、FBCのプラクティスにある自作サービスを作成している際だったので、メンターさんと相談し、開発作業中は一旦allow_browser versions: :modernをコメントアウトし、リリース前にコメントアウトを外して設定をONにする、という対応をすることになりました。
allow_browser versions: :modernをコメントアウトすると、devツールでデバイスを変えて操作できるようになります。
そのプロジェクトごとに開発・本番環境が異なると思いますので、それに合わせた対応が必要かと思われます。
参考リンク
余談
Rails8.0でもデフォルトで同じ設定が含まれるので406エラーが出ます。
ですが、406エラーページのレイアウトが違いました。
おわりに
間違い・ご意見等ありましたらコメントいただけたら幸いです。
アドカレこのあとも楽しみにしています！
