管理画面機能質問

実現したいこと

bootstrapを管理画面でも使いたい

実現するために自分が選んだ手段とその理由 application.scssのファイルでcssファイルをプレコンパイルしていく簡単に実装できそうだったため

該当のソースコード

その手段を使って実装するために参考にした公式ドキュメントや技術記事 https://school.runteq.jp/v3/curriculums/rails_basic/chapters/21

参考にしたものと自分の実装で違う箇所・もしくは違う箇所はなくまったく同じ実装方法をしている(どういう実装をすれば実現できるのかを理解しているのかどうか)

app/javascript/admin.js import "@hotwired/turbo-rails" import * as bootstrap from "bootstrap/dist/js/bootstrap"

import "admin_teq/assets/dist/js/dashboard"

storyshare/config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "admin/application.scss" => "admin/application.css"

"admin/application.scss" => "admin/application.css",
"admin/login.scss" => "admin/login.css" }

エラーが出ているのかエラーが出ていないのか、エラーが出ているのであればどんなエラーが出ているのか

/Users/okmurokouki/workspace/storyshare/app/views/admin/layouts/application.html.erb where line#9 raised:Error: File to import not found or unreadable: bootstrap/scss/bootstrap. on line 1:1 of app/assets/stylesheets/application.bootstrap.scss from line 1:1 of app/assets/stylesheets/admin/application.scss >> @import 'bootstrap/scss/bootstrap'; ^

<%= csp_meta_tag %>
<%= stylesheet_link_tag "admin/application" %>
<%= javascript_include_tag "admin", "data-turbo-track": "reload", defer: true %>

実現するために自分が選んだ手段とその理由

application.scssのファイルでcssファイルをプレコンパイルしていく簡単に実装できそうだったため

application.scssのファイルでcssファイルをプレコンパイルしていくとbootstrapを管理画面でも使えるようになると判断した理由も記載してくださいまた、簡単に実装できそうだと思ったが簡単に実装できていないのであれば別の手段も検討しましょう

app/javascript/admin.js import "@hotwired/turbo-rails" import * as bootstrap from "bootstrap/dist/js/bootstrap"

import "admin_teq/assets/dist/js/dashboard" storyshare/config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "admin/application.scss" => "admin/application.css"

"admin/application.scss" => "admin/application.css", "admin/login.scss" => "admin/login.css" }

どこが同じでどこが違うのかこの記述だとわかりませんので整理してくださいまた、コードの記載の違いだけでなく環境の違いも記載してください例えばカリキュラムではdartsassを使っていますが、このアプリではそもそも使用していたのか、また、どのような設定を行えばBootstrapの導入を行えると理解しているのかも合わせて記載してください

エラーが出ているのかエラーが出ていないのか、エラーが出ているのであればどんなエラーが出ているのか

https://github.com/import 'bootstrap/scss/bootstrap'; ^

<%= csp_meta_tag %> <%= stylesheet_link_tag "admin/application" %> <%= javascript_include_tag "admin", "data-turbo-track": "reload", defer: true %>

storyshare/app/assets/stylesheets/admin/application.scss https://github.com/import '../../node_modules/bootstrap/scss/bootstrap'; https://github.com/import "admin"; の場合のエラーは no implicit conversion of nil into Stringとエラーが出ている stylesheet_link_tag "admin/application"

そのエラーの内容から推測したエラーの原因

(/storyshare/app/views/layouts/application.html.erb)ではエラーがでないためadmin/applicationのファイル自体が問題だと推測している

/bootstrapのファイルを読み込めていないのが原因だと思われる

bootstrapのファイルを読み込めていないのは何が原因だと考えられるかも記載してください

エラーの原因を解決するために自分で調べた記事

storyshare/app/assets/stylesheets/admin/application.scssに https://github.com/import "admin";と admin.scssというファイルを入れてみてエラーが起こらなかったためbootstrapのファイルのみエラーが出ていることがわかった

https://qiita.com/nm7279/items/53b38a2543df97df751d

2014年08月06日の記事ですがこの記事を参照するのは妥当でしょうか？自分の環境差異を認識したうえで参考にしてますか？

対処を行った際にわかったことや推測できたこと

/Users/okmurokouki/workspace/storyshare/app/assets/config/manifest.jsのファイルに下のものを記述した //= link admin/application.css

bootstrapのファイルが読み込めていないことが原因のエラーだというところまではわかった

エラーが起きない時は私が作ったファイル(/storyshare/app/views/layouts/application.html.erb)ではエラーがでないためadmin/applicationのファイル自体が問題だと推測している

admin/applicationのファイルの何が問題だと思っているのか記載してください

実現したいこと

bootstrapを管理画面でも使いたい

通常画面でBootstrapが使えている根拠

storyshare/app/views/stories/index.html.erb <%= link_to '物語作成', new_story_path, class: 'btn btn-lg btn-primary' %>

実現するために自分が選んだ手段とその理由

application.scssのファイルでcssファイルをプレコンパイルしていくとbootstrapを管理画面でも使えるようになると判断した理由管理画面トップページの作成の解答例で app/assets/stylesheets/admin/application.scss

@import "application.bootstrap"; @import "admin_teq/assets/dist/css/dashboard"; でbootstrapが間接的に使えているため下は解答例と同じようにしようとしている。

storyshare/app/assets/stylesheets/application.bootstrap.scss

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'custom';

ここではbootstrapが使えている

storyshare/app/assets/stylesheets/admin/application.scss


@import '../../node_modules/bootstrap/scss/bootstrap';
または
@import "application.bootstrap";

@import "admin";

だとbootstrapが使えない

@import "application.bootstrap";だと raised:Error: File to import not found or unreadable: bootstrap/scss/bootstrap. on line 1:1 of app/assets/stylesheets/application.bootstrap.scss というエラーが出る

@import "application.bootstrap";だと no implicit conversion of nil into Stringとエラーが出ている

別の手段だと

Gem "rails-admin"を使う例がある https://zenn.dev/atsushi101011/articles/98daf84f74facd

メリット UIを考えるのが楽拡張が楽

デメリット gemのwikiを読む必要がある細かい修正が大変やりたい機能に対してgemだと多すぎる

UIでエラーが出ているのでメリットとして大きいが、細かい修正が大変なのが大きいためまた拡張する可能性があるためgemを使ってではなく、自力で作成する方針で判断した

該当のソースコード

その手段を使って実装するために参考にした公式ドキュメントや技術記事 https://school.runteq.jp/v3/curriculums/rails_basic/chapters/21

38508_ojfubd_basic_rails_basic/app/javascript/admin.js

import "@hotwired/turbo-rails"
import * as bootstrap from "bootstrap/dist/js/bootstrap"`
import "admin_teq/assets/dist/js/dashboard"

storyshare/app/javascript/admin.js

import "@hotwired/turbo-rails"
import * as bootstrap from "bootstrap/dist/js/bootstrap"

storyshare/app/assets/images/bootstrap-logo.svg

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg>

38508_ojfubd_basic_rails_basic/config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "admin/application.scss" => "admin/application.css" "admin/application.scss" => "admin/application.css", "admin/login.scss" => "admin/login.css" }

storyshare/config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "admin/application.scss" => "admin/application.css" }

38508_ojfubd_basic_rails_basic/package.json

 "admin_teq": "git+https://github.com/runteq/AdminTEQ.git#main",

storyshare/package.json

-(入っていない) "admin_teq": "git+https://github.com/runteq/AdminTEQ.git#main",

環境の違い自分のアプリの環境 ruby "3.1.4" gem "rails", "~> 7.1.3", ">= 7.1.3.3" dartsass-rails

package.json "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3",

学習カリキュラムの環境 ruby "3.1.4" gem "rails", "~> 7.0.3", ">= 7.0.3.1" gem "mysql2", "~> 0.5"

package.json "admin_teq": "git+https://github.com/runteq/AdminTEQ.git#main", "bootstrap": "^5.2.0", "bootstrap-icons": "^1.9.1",

どのような設定を行えばBootstrapの導入を行えると理解しているのか

管理画面用のSCSSファイルにインストールされた1.Bootstrapをインポートする。 2.必要ならJavaScriptもインポートする。 3.アセットパイプラインに管理画面用のファイルを追加する 4.ビューでアセットを読み込む。

エラーが出ているのかエラーが出ていないのか、エラーが出ているのであればどんなエラーが出ているのか

<%= csp_meta_tag %>
<%= stylesheet_link_tag "admin/application" %>
<%= javascript_include_tag "admin", "data-turbo-track": "reload", defer: true %>

ojfubd / storyshare