ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

webpackerでA JSON text must at least contain two octets! (JSON::ParserError)と怒られた話

エラー内容

rails crails s をすると以下のエラーが
webpack系のjsonのパースが上手くいっていないよっていうエラーっぽい

Exiting
Traceback (most recent call last):
    51: from bin/rails:4:in `<main>'
  50: from bin/rails:4:in `require'
   49: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands.rb:18:in `<top (required)>'
  48: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/command.rb:46:in `invoke'
    47: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/command/base.rb:65:in `perform'
  46: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/thor-0.19.4/lib/thor.rb:369:in `dispatch'
   45: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/thor-0.19.4/lib/thor/invocation.rb:126:in `invoke_command'
  44: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/thor-0.19.4/lib/thor/command.rb:27:in `run'
    43: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands/server/server_command.rb:142:in `perform'
  42: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands/server/server_command.rb:142:in `tap'
   41: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands/server/server_command.rb:147:in `block in perform'
  40: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands/server/server_command.rb:51:in `start'
    39: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands/server/server_command.rb:89:in `log_to_stdout'
  38: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:354:in `wrapped_app'
   37: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/commands/server/server_command.rb:27:in `app'
  36: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:219:in `app'
    35: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/server.rb:319:in `build_app_and_options_from_config'
  34: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:40:in `parse_file'
   33: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:49:in `new_from_string'
  32: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:49:in `eval'
    31: from config.ru:in `<main>'
  30: from config.ru:in `new'
   29: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:55:in `initialize'
  28: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/rack-2.0.5/lib/rack/builder.rb:55:in `instance_eval'
    27: from config.ru:1:in `block in <main>'
  26: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `require'
   25: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:249:in `load_dependency'
  24: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `block in require'
    23: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `require'
  22: from /share/config/environment.rb:5:in `<top (required)>'
   21: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/application.rb:361:in `initialize!'
  20: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/initializable.rb:60:in `run_initializers'
    19: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:205:in `tsort_each'
  18: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:226:in `tsort_each'
   17: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:347:in `each_strongly_connected_component'
  16: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:347:in `call'
    15: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:347:in `each'
  14: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:349:in `block in each_strongly_connected_component'
   13: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:431:in `each_strongly_connected_component_from'
  12: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:350:in `block (2 levels) in each_strongly_connected_component'
    11: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/2.5.0/tsort.rb:228:in `block in tsort_each'
  10: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/initializable.rb:61:in `block in run_initializers'
    9: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/initializable.rb:32:in `run'
   8: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.0/lib/rails/initializable.rb:32:in `instance_exec'
     7: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/webpacker-3.5.3/lib/webpacker/railtie.rb:79:in `block in <class:Engine>'
   6: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/webpacker-3.5.3/lib/webpacker.rb:26:in `bootstrap'
    5: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/webpacker-3.5.3/lib/webpacker/commands.rb:15:in `bootstrap'
   4: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/webpacker-3.5.3/lib/webpacker/manifest.rb:18:in `refresh'
     3: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/webpacker-3.5.3/lib/webpacker/manifest.rb:70:in `load'
   2: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/bundler/gems/json-7f4cfd853f2c/lib/json/common.rb:155:in `parse'
    1: from /home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/bundler/gems/json-7f4cfd853f2c/lib/json/common.rb:155:in `new'
/home/vagrant/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/bundler/gems/json-7f4cfd853f2c/lib/json/common.rb:155:in `initialize': A JSON text must at least contain two octets! (JSON::ParserError)

対応

public/packs/manifest.json が完全な空ファイルになっていたので空のjsonを入れてあげる

{}

このファイル何も編集していないはずなのになぜ急に…

7月に気になったWebサービス・アプリまとめ(2018)

お分かりかと思いますがGoodpatchさんやつリスペクトです😎 goodpatch.com

ためしがき

日本語のフリーフォントをまとめて試せる神サイト🖋

tameshigaki.jp

メディアにもたくさん取り上げられていました👀

日本語のフリーフォントをまとめて試せる神サイト「ためしがき」爆誕 フォント遊びが捗りそう - ねとらぼ

日本語のフリーフォントを試せる「ためしがき」登場 見栄えを一覧で比較 - ITmedia NEWS

数十種類の無料日本語フォントをブラウザ上で一度に試せて便利な「ためしがき」を使ってみた - GIGAZINE

AIメーカー

人工知能(AI)を誰でも簡単に作ることができるWebサービス🤖

aimaker.io

開発者のQiitaも勉強になります📛

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を作ってみた

メディア掲載もいっぱい👀

「AIメーカー」登場 画像認識AI、誰でも簡単に作れる 「ポケモン判定」「バイクメーカー判定」など続々(ITmedia NEWS) - Yahoo!ニュース

簡単にAIが作成できる「AIメーカー」で画像判別AIを作成してみた - GIGAZINE

「AIメーカー」登場 画像認識AI、誰でも簡単に作れる 「ポケモン判定」「バイクメーカー判定」など続々 - ITmedia NEWS

ウェブ表彰

Web上で表彰状を作り、SNSなどで簡単に送れるサービス🏆

hyou.show

開発者のnoteがめっちゃエモいです🦀

ウェブサービスで世界を変えることなんて出来ないと思っていた|ampersand_xyz|note

メディア掲載にもエモが目立ちます💡

想定以上の反響!誰かを気軽に褒め称えられる「ウェブ表彰」で世界はちょっと優しくなる?(FNN PRIME) - Yahoo!ニュース

気軽に誰かをたたえよう「ウェブ表彰」、想定以上の反響 6000枚以上の表彰状が贈られる - ITmedia NEWS

気軽にあらゆるものを讃える表彰状が作成できる「ウェブ表彰」 - GIGAZINE

motton

プロフィールをたくさん書くためのサービス
前略プロフ(使ったこと無いけど)懐かしいですね😇
最近になって10年前くらいに流行ったサービスのリバイバルが増えてきてるのでアイディア探すには過去の流行り調査しほうが良いかもですね👀

motton.co

54字の物語

9×6の54文字で超短編小説を書くサービス

ujiqn.github.io

色んな人が作る作品が秀逸

9×6の54文字の超短編小説「54字の物語」の投稿がTwitterで盛り上がる どれもすごい! - ねとらぼ

#54字の物語 hashtag on Twitter

平成生まれで繋がるSNSアイコン作成ジェネレーター

(これが名前で合ってる?🤔)
アイコンに生まれた年を入れられるサービス
平成最後の夏っていうのがエモい
平成生まれしか使えないので使えてないのが悲しい😭

talking-tshirts.com

やるぞ宣言

やりたいことを宣言してSNSにシェアしたり人から褒めてもらえたりするサービス📛
褒めるという設計が好きです❤️

yaruzo.me

LoveChain(ラブ・チェーン)

ラブ・チェーンはブロックチェーン上に2人だけのメッセージを永遠に残すサービスです。

ぜんっぜんわからないけどなんか面白いということだけは分かります😇

lovechain.ooo

HTML名刺

Web上の名刺をツイッター連携で簡単に作れるサービス
こういうシンプルなのいいですよね👀

html.co.jp

GA-YA-CHA(ガヤチャ)

Twitterで電話ができる無料通話アプリ
(通話できる友達がいなくて試せてない😇

www.gayacha.com

自薦・他薦枠

Lancepod

フリーランスのコミュニティサイト
mixiのコズミカだったりと最近こういったサービス増えましたね👀

lancepod.com

CSSについての社内勉強会を行いました

6月25日に社内でマークアップの勉強会を開催しました🎉

www.slideshare.net

内容としては

  • BEMの基礎
  • CSSを組む際に気をつけたい点

+アルファでデザイン意図を汲んだマークアップ

デザイン意図を汲んだマークアップに関してはスライド用意しておらずその場でサンプル出して話してました。

内容的には
「このテキストは伸びた場合はどうなる?左側が基準?中央そろえ?」
「このボタンは高さが大事?それとも余白?」 みたいな話をデザインを見ながら1つ1つ解説していきました。

このあたりちゃんとした資料にして再度勉強会を行いたい…

できれば社外の方にも来ていただいて知見共有できればと思ってるので参加したい方はお声がけくださいー🙏

スクロールに応じてヘッダーが順次固定されているJsを組んだ

iTunesか何かのようなスクロールにお応じてヘッダーが切り替わる挙動を組みました。
(言葉で説明するのが難しい…↓を見てくださいな)
仕様変更によりお蔵入りになったのでブログで供養します。

See the Pen MultiFixedHeader by あっきー💪😎💪 (@kuronekopunk) on CodePen.

Rails selectタグにクラスを付ける

f.select :foo, { a: 1, b: 2 }, class: 'bar'
=> <select name="model[foo]"> # あれ?classが居ない

時々ど忘れしてドキュメントを読みに行くやつ。

この様に定義されています。

def select(method, choices = nil, options = {}, html_options = {}, &block)

ref: rails/form_options_helper.rb at 71c7fd101324046995d8f7e51e78475c0e37ec1a · rails/rails · GitHub

optionsとhtml_optionsが違う👀
というわけで分けて書いてあげましょう

f.select :foo, { a: 1, b: 2 }, {}, class: 'bar'
=> <select name="model[foo]" class="bar">

ヤッタネ🎉