質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

652閲覧

BootstrapのNavbarで導入しているナビゲーションヘッダーが消えた(Ruby on rails)

kim.soonhyang

総合スコア14

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/04/08 13:08

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

検証に出ているエラー

Navbarが正常に導入されている画面

自分のtop画面

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

・Uncaught SyntaxError: Unexpected end of JSON input

上記のエラーに関してはChromeの拡張機能のエラーのようなのでRailsとは関係なさそうですね

<%= render 'partial/navbar' if current_user %>でcurrent_userがないとNavBarを表示しないようになっているので、「ログインが出来ていない」のが原因ではないでしょうか?
一旦<%= render 'partial/navbar' %>に書き換えてユーザーのログイン状態にかかわらずNavBarを表示して確認してみてください

投稿2020/04/08 21:45

mottox2

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kim.soonhyang

2020/04/09 04:38

ご助言ありがとうございます! おっしゃる通りcurrent_userがいるとNavBarを表示するということですので users/sign_inから入り、ログインをするとNavBarと再会できました。 本当に嬉しいです!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問