学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.0 | 動画学習サイトを作成| 05 | ナビゲーションバー(Bulma)

[04]MacOSXでのスタートアップ << [ホームに戻る] >> [06]デバイス(devise)


ナビゲーションバーを使えるようにBulmaの設定をします。
bulma.io


GemFileに以下の記述を追加します。


記述追加 GemFile(57行目)

  1. gem 'bulma-rails', '~> 0.7.4'
  2. gem 'bulma-extensions-rails', '~> 1.0.30'



GemFile

  1. source 'https://rubygems.org'
  2. git_source(:github) { |repo| "https://github.com/#{repo}.git" }
  3. ruby '2.6.3'
  4. # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
  5. gem 'rails', '~> 6.0.3', '>= 6.0.3.1'
  6. # Use postgresql as the database for Active Record
  7. gem 'pg', '>= 0.18', '< 2.0'
  8. # Use Puma as the app server
  9. gem 'puma', '~> 4.1'
  10. # Use SCSS for stylesheets
  11. gem 'sass-rails', '>= 6'
  12. # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
  13. gem 'webpacker', '~> 4.0'
  14. # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
  15. gem 'turbolinks', '~> 5'
  16. # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
  17. gem 'jbuilder', '~> 2.7'
  18. # Use Redis adapter to run Action Cable in production
  19. # gem 'redis', '~> 4.0'
  20. # Use Active Model has_secure_password
  21. # gem 'bcrypt', '~> 3.1.7'
  22. # Use Active Storage variant
  23. # gem 'image_processing', '~> 1.2'
  24. # Reduces boot times through caching; required in config/boot.rb
  25. gem 'bootsnap', '>= 1.4.2', require: false
  26. group :development, :test do
  27. # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  28. gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  29. end
  30. group :development do
  31. # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  32. gem 'web-console', '>= 3.3.0'
  33. gem 'listen', '~> 3.2'
  34. # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  35. gem 'spring'
  36. gem 'spring-watcher-listen', '~> 2.0.0'
  37. end
  38. group :test do
  39. # Adds support for Capybara system testing and selenium driver
  40. gem 'capybara', '>= 2.15'
  41. gem 'selenium-webdriver'
  42. # Easy installation and use of web drivers to run system tests with browsers
  43. gem 'webdrivers'
  44. end
  45. # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
  46. gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  47. # Bulma
  48. gem 'bulma-rails', '~> 0.7.4'
  49. gem 'bulma-extensions-rails', '~> 1.0.30'



bundleを使ってインストールします。


コマンド
bundle


「app\assets\stylesheets」フォルダにある「application.css」ファイルを「application.scss」にリネームします。
拡張子に「s」つけて「scss」にしています。



リネームした「application.scss」ファイルに以下の記述を追加します。


記述追加 app\assets\stylesheets\application.scss(17行目)

  1. @import 'bulma';
  2. @import 'bulma-extensions';



app\assets\stylesheets\application.scss(リネームしたファイル)

  1. /*
  2. * This is a manifest file that'll be compiled into application.css, which will include all the files
  3. * listed below.
  4. *
  5. * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
  6. * vendor/assets/stylesheets directory can be referenced here using a relative path.
  7. *
  8. * You're free to add application-wide styles to this file and they'll appear at the bottom of the
  9. * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
  10. * files in this directory. Styles in this file should be added after the last require_* statement.
  11. * It is generally better to create a new file per style scope.
  12. *
  13. *= require_tree .
  14. *= require_self
  15. */
  16. @import 'bulma';
  17. @import 'bulma-extensions';



bulmを動かすにはjQueryが必要です。
jQueryはyarnを使ってインストールします。


コマンド
yarn add jquery@3.6.0


Webpackの設定をします。
「config\webpack\environment.js」ファイルに以下の記述を追加します。


記述追加 config\webpack\environment.js(5行目)

  1. const webpack = require('webpack')
  2. environment.plugins.append('Provide',
  3. new webpack.ProvidePlugin({
  4. $: 'jquery/src/jquery',
  5. jQuery: 'jquery/src/jquery',
  6. Popper: ['popper.js', 'default']
  7. })
  8. )



config\webpack\environment.js

  1. const { environment } = require('@rails/webpacker')
  2. module.exports = environment
  3. const webpack = require('webpack')
  4. environment.plugins.append('Provide',
  5. new webpack.ProvidePlugin({
  6. $: 'jquery/src/jquery',
  7. jQuery: 'jquery/src/jquery',
  8. Popper: ['popper.js', 'default']
  9. })
  10. )



一度サーバを起動します。


コマンド
rails s


サーバが起動したらブラウザで「http://localhost:3000/」にアクセスします。

ブラウザ確認
ブラウザ確認



ホームページのコントローラを作成しておきます。


コマンド
rails g controller Pages home


ナビゲーションバーを作成していきます。


「app\views」フォルダに「shared」フォルダを新規作成してください。
作成した「shared」フォルダに「_navbar.html.erb」ファイルを新規作成して下さい。



app\views\shared\_navbar.html.erb(新規作成したファイル)

  1. <nav class="navbar is-link" role="navigation" aria-label="main navigation">
  2. <div class="navbar-brand">
  3. <a class="navbar-item" href="/">
  4. <h1>テストサイトGakushuu6</h1>
  5. </a>
  6. <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
  7. <span aria-hidden="true"></span>
  8. <span aria-hidden="true"></span>
  9. <span aria-hidden="true"></span>
  10. </a>
  11. </div>
  12. <div id="navbarBasicExample" class="navbar-menu">
  13. <div class="navbar-end">
  14. <a class="navbar-item"></a>
  15. <a class="navbar-item"></a>
  16. <div class="navbar-item">
  17. <div class="buttons">
  18. <a class="button is-info"><strong>新規ユーザ登録</strong></a>
  19. <a class="button is-light">ログイン</a>
  20. </div>
  21. </div>
  22. <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;">
  23. <a class="navbar-item"></a>
  24. <div class="navbar-dropdown">
  25. <a href="" class="navbar-item"></a>
  26. <a href="" class="navbar-item"></a>
  27. <hr class="navbar-divider">
  28. <a href="" class="navbar-item">ログアウト</a>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </nav>
  34. <script>
  35. $(document).ready(function() {
  36. // navbar burgerアイコンでクリックイベントを確認する
  37. $(".navbar-burger").click(function() {
  38. // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える
  39. $(".navbar-burger").toggleClass("is-active");
  40. $(".navbar-menu").toggleClass("is-active");
  41. });
  42. });
  43. </script>



「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。


記述追加 app\views\layouts\application.html.erb(14行目)

  1. <%= render "shared/navbar" %>



app\views\layouts\application.html.erb

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Gakushuu6</title>
  5. <%= csrf_meta_tags %>
  6. <%= csp_meta_tag %>
  7. <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  8. <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  9. </head>
  10. <body>
  11. <%= render "shared/navbar" %>
  12. <%= yield %>
  13. </body>
  14. </html>



ブラウザ確認
http://localhost:3000/pages/home

ナビゲーションバー確認
ナビゲーションバー確認



ブラウザを縮小してスマートフォンでの表示を確認します。
右上にバーガーメニューがでます。

バーガーメニュー
バーガーメニュー



メニューを開いてみます。

メニューを開く
メニューを開く



↓↓クリックして頂けると励みになります。


[04]MacOSXでのスタートアップ << [ホームに戻る] >> [06]デバイス(devise)

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)