Instagram Cloneを作っております。
教材をみながらRuby on railsを学習している初心者です。
今度こそ、一つ作品をまとめるぞ!
と意気込んで始めましたが、また転けてしまい3日程ジタバタもたもたしてて
一人で解決が難しそうで、、どなたかご助言をいただけないでしょうか。
表題の通りtopページのヘッダーをNavbarを導入し作りました。
導入してすぐはうまく反映されていることを確認しましたが
画像アップロードするためにcarrierwaveとMiniMagickの導入してから
表示されなくなりました。
キャッシュ、履歴削除、再起動などは試してみました。
セキュリティソフトもオフにしてみました。
検証を確認すると
・Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at showNeg.js:241
at XMLHttpRequest.onDefaultReadyStateChangeHandler (showNeg.js:311)
・DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map
とエラーメッセージがあります。
エラーメッセージを調べて見ると
JSON.parse()で発生したエラー。
原因として多いのは()などの閉じ忘れだが、今回はJSON.parse()の記述に問題があった。
修正前 JSON.parse(data)
修正後 JSON.parse(data || "null")
空文字があると上記のエラーが発生するそうです。
しかし当プロジェクトフォルダーにjsonファイルはありません。
import をしているかと予測はしておりますが、呼び出し方を調べてみても初心者である私が理解できるような記事は
なかなかありませんでした、、、
(もしかしたら全然違うどころをフォークしているかもですが、、)
どなたかご指針をいただけないでしょうか。
よろしくお願いいたします。
Gemfile
1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '2.6.3' 5 6# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 7gem 'rails', '~> 5.2.3' 8# Use sqlite3 as the database for Active Record 9gem 'sqlite3' 10# Use Puma as the app server 11gem 'puma', '~> 3.11' 12# Use SCSS for stylesheets 13gem 'sass-rails', '~> 5.0' 14# Use Uglifier as compressor for JavaScript assets 15gem 'uglifier', '>= 1.3.0' 16# See https://github.com/rails/execjs#readme for more supported runtimes 17# gem 'mini_racer', platforms: :ruby 18 19# Use CoffeeScript for .coffee assets and views 20gem 'coffee-rails', '~> 4.2' 21# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 22gem 'turbolinks', '~> 5' 23# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 24gem 'jbuilder', '~> 2.5' 25# Use Redis adapter to run Action Cable in production 26# gem 'redis', '~> 4.0' 27# Use ActiveModel has_secure_password 28# gem 'bcrypt', '~> 3.1.7' 29 30# Use ActiveStorage variant 31# gem 'mini_magick', '~> 4.8' 32 33# Use Capistrano for deployment 34# gem 'capistrano-rails', group: :development 35 36# Reduces boot times through caching; required in config/boot.rb 37gem 'bootsnap', '>= 1.1.0', require: false 38 39group :development, :test do 40 # Call 'byebug' anywhere in the code to stop execution and get a debugger console 41 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 42end 43 44group :development do 45 # Access an interactive console on exception pages or by calling 'console' anywhere in the code. 46 gem 'web-console', '>= 3.3.0' 47 gem 'listen', '>= 3.0.5', '< 3.2' 48 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 49 gem 'spring' 50 gem 'spring-watcher-listen', '~> 2.0.0' 51end 52 53group :test do 54 # Adds support for Capybara system testing and selenium driver 55 gem 'capybara', '>= 2.15' 56 gem 'selenium-webdriver' 57 # Easy installation and use of chromedriver to run system tests with Chrome 58 gem 'chromedriver-helper' 59end 60 61# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 62gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 63 64gem 'bootstrap', '~> 4.4.1' 65gem 'jquery-rails' 66gem 'devise', '~> 4.6.1' 67gem 'carrierwave', '~> 1.0' 68gem "mini_magick"
css
1 @import "bootstrap"; 2 @import "layouts/navbar"; 3 @import "common"; 4 @import "users/devise"; 5 @import "users/show"; 6 @import "users/edit"; 7
js
1app>assets>javascripts>application.js 2 3// This is a manifest file that'll be compiled into application.js, which will include all the files 4// listed below. 5// 6// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 7// vendor/assets/javascripts directory can be referenced here using a relative path. 8// 9// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 10// compiled file. JavaScript code in this file should be added after the last require_* statement. 11// 12// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 13// about supported directives. 14// 15//= require rails-ujs 16//= require activestorage 17//= require turbolinks 18//= require jquery3 19//= require popper 20//= require bootstrap-sprockets 21//= require_tree .
html
1app>views>layouts>appilcation.html.erb 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <title>Techpitgram</title> 7 <%= csrf_meta_tags %> 8 <%= csp_meta_tag %> 9 10 <meta name="viewport" content="width=device-width, initial-scale=1"> 11 12 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 13 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 14 </head> 15 16 <body> 17 <div id="wrapper"> 18 <%= render 'partial/navbar' if current_user %> 19 20 <% if flash[:notice] %> 21 <div class="alert alert-info"> 22 <%= flash[:notice] %> 23 </div> 24 <% end %> 25 <% if flash[:alert] %> 26 <div class="alert alert-danger"> 27 <%= flash[:alert] %> 28 </div> 29 <% end %> 30 31 <div class="container"> 32 <%= yield %> 33 </div> 34 35 <%= render 'partial/footer' %> 36 </div> 37 </body> 38</html>
css
1app>assets>layouts>navbar.scss 2 3.navbar { 4 background-color: #fff; 5 border-bottom: 1px solid rgba(0, 0, 0, .0975); 6 height: 77px; 7 &__brand { 8 height: 35px; 9 width: 176px; 10 background-size: 114px; 11 } 12 &__mainLogo { 13 background-repeat: no-repeat; 14 background-image: image-url("logo.png"); 15 } 16 &-nav { 17 & > li { 18 margin-left: 20px; 19 &:first-child { 20 margin-left: 0; 21 } 22 .commonNavIcon { 23 height: 24px; 24 width: 24px; 25 background-size: 22px !important; 26 background-repeat: no-repeat; 27 } 28 .profile-icon { 29 background-image: image-url("parts3.png"); 30 } 31 } 32 } 33} 34
html
1app>views>partial>_navbar.html 2 3<nav class="navbar navbar-expand-lg navbar-light"> 4 <div class="container"> 5 <%= link_to "", root_path, class: "navbar__brand navbar__mainLogo" %> 6 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 7 <span class="navbar-toggler-icon"></span> 8 </button> 9 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 10 <ul class="navbar-nav ml-md-auto align-items-center"> 11 <li> 12 <%= link_to "投稿", "#", class: "btn btn-primary" %> 13 </li> 14 <li> 15 <%= link_to "", user_path(current_user), class: "nav-link commonNavIcon profile-icon" %> 16 </li> 17 </ul> 18 </div> 19 </div> 20</nav> 21
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/09 04:38