常連

注目の的

社会貢献

質問力

セレクトボックス内選択肢には設定可能な最大文字数があるのか？

railsの学習中です。

CSSをCDNで読み込みたいと思ったのですが、
``app/views/layouts/application.html.erb``
に直接記述する方法しかわかりませんでした。

**CSSのCDNを一括管理したいです。**
``app/assets/stylesheets/application.css``
とかに記述するとか、管理手法はありませんか？

Ruby on RailsでCSSやjsのファイルをCDNで本家から自サイトに反映させるにはどうすればいいですか？

bundle installをしてもmysql2がインストールできません。

```
ec2-user:~/environment/message-board $ bundle update
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 12.3.2
Using concurrent-ruby 1.1.4
Using i18n 1.6.0
Using minitest 5.11.3
Using thread_safe 0.3.6
Using tzinfo 1.2.5
Using activesupport 5.0.7.1
Using builder 3.2.3
Using erubis 2.7.0
Using mini_portile2 2.4.0
Using nokogiri 1.10.1
Using rails-dom-testing 2.0.3
Using crass 1.0.4
Using loofah 2.2.3
Using rails-html-sanitizer 1.0.4
Using actionview 5.0.7.1
Using rack 2.0.6
Using rack-test 0.6.3
Using actionpack 5.0.7.1
Using nio4r 2.3.1
Using websocket-extensions 0.1.3
Using websocket-driver 0.6.5
Using actioncable 5.0.7.1
Using globalid 0.4.2
Using activejob 5.0.7.1
Using mini_mime 1.0.1
Using mail 2.7.1
Using actionmailer 5.0.7.1
Using activemodel 5.0.7.1
Using arel 7.1.4
Using activerecord 5.0.7.1
Using bindex 0.5.0
Using bundler 1.17.2
Using byebug 11.0.0
Using coffee-script-source 1.12.2
Using execjs 2.7.0
Using coffee-script 2.4.1
Using method_source 0.9.2
Using thor 0.20.3
Using railties 5.0.7.1
Using coffee-rails 4.2.2
Using ffi 1.10.0
Using multi_json 1.13.1
Using jbuilder 2.8.0
Using jquery-rails 4.3.3
Using rb-fsevent 0.10.3
Using rb-inotify 0.10.0
Using listen 3.0.8
Fetching mysql2 0.4.10
Installing mysql2 0.4.10 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /home/ec2-user/.rvm/gems/ruby-2.6.0/gems/mysql2-0.4.10/ext/mysql2
/home/ec2-user/.rvm/rubies/ruby-2.6.0/bin/ruby -I /home/ec2-user/.rvm/rubies/ruby-2.6.0/lib/ruby/2.6.0 -r
./siteconf20190304-18223-ftpqbo.rb extconf.rb
checking for rb_absint_size()... yes
checking for rb_absint_singlebit_p()... yes
checking for ruby/thread.h... yes
checking for rb_thread_call_without_gvl() in ruby/thread.h... yes
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... yes
checking for rb_hash_dup()... yes
checking for rb_intern3()... yes
checking for rb_big_cmp()... yes
checking for mysql_query() in -lmysqlclient... no
-----
mysql client is missing. You may need to 'apt-get install libmysqlclient-dev' or 'yum install mysql-devel', and try again.
-----
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/home/ec2-user/.rvm/rubies/ruby-2.6.0/bin/$(RUBY_BASE_NAME)
        --with-mysql-dir
        --without-mysql-dir
        --with-mysql-include
        --without-mysql-include=${mysql-dir}/include
        --with-mysql-lib
        --without-mysql-lib=${mysql-dir}/lib
        --with-mysql-config
        --without-mysql-config
        --with-mysql-dir
        --without-mysql-dir
        --with-mysql-include
        --without-mysql-include=${mysql-dir}/include
        --with-mysql-lib
        --without-mysql-lib=${mysql-dir}/lib
        --with-mysqlclientlib
        --without-mysqlclientlib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /home/ec2-user/.rvm/gems/ruby-2.6.0/extensions/x86_64-linux/2.6.0/mysql2-0.4.10/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /home/ec2-user/.rvm/gems/ruby-2.6.0/gems/mysql2-0.4.10 for inspection.
Results logged to /home/ec2-user/.rvm/gems/ruby-2.6.0/extensions/x86_64-linux/2.6.0/mysql2-0.4.10/gem_make.out

An error occurred while installing mysql2 (0.4.10), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.4.10' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  mysql2

```

```Gemfile
source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.6'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end
```


試したこと

bundle install

bundle update

gem install mysql2 -v '0.4.10'

gem install mysql2

gem 'mysql2', '~>0.4.10'　に書き換える

この５つの方法を試しましたがどれも上手くいきません。

ちなみにCloud9を使っています。


解決方法をぜひ教えてください

mysql2がbundle installできない！！｜An error occurred while installing mysql2 (0.4.10)....

railsで

* webpack
* vue.js
* yarn

という構成で開発をしているのですがrails sをした際に下記のエラーが出ます。

```

========================================
  Your Yarn packages are out of date!
  Please run `yarn install` to update.
========================================


To disable this check, please add `config.webpacker.check_yarn_integrity = false`
to your Rails development config file (config/environments/development.rb).


yarn check v1.3.2
error Lockfile does not contain pattern: "firebase@^4.8.1"
error Lockfile does not contain pattern: "vuefire@^1.4.5"
error Found 2 errors.
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

```

yarnは最新なのでなんでこのエラーがでるの変わらず。。。教えていただけると助かります。

rails sをしようとしてもyarnが古いとエラーが出る

WordPress初心者です。CSSが２回読み込まれる現象について教えて下さい。

子テーマの設置にあたり、functions.phpに書くコードをネットで検索しました。

しかしこれを書くとCSSが２回読み込まれてしまい、開発ツールで変更するときに毎回２つについて変更しなければなりません。
（chromeでしたら２つのうち１つを変更すればもう一方も連動して変更されるのですが、firefoxだと２つについて変更しなければなりません。）

要はこのように読み込まれるのです。
```css
.class {
  color: red;
}
.class {
  color: red;
}

```
これを１回だけにするにはどのようにすればよろしいのでしょうか。
それとも子テーマのCSSとは２回読み込まれる仕様なのでしょうか。

functions.phpの冒頭にはこのように書いております。
```php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}

これ以下にいろいろなPHPを書く

```

CSSはこうです。
```ここに言語を入力
/*
Theme Name: twentyseventeen child
Template: twentyseventeen
*/

これ以下にに色々なCSSを書く
```

CSSが2回読み込まれる現象について

webサイトの背景に動画を使いたく、videoタグを使って

```html
<video autoplay="autoplay" loop="loop" class="video">
  <source src="/assets/movie.mp4">
  <source src="/assets/movie.m4v">
</video>
```

このように記述しているのですが、パソコンだと動画は問題なく表示されるにも関わらず、iPhoneだと真っ白で何も表示されません。何が間違っているのか、どなたかご教示いただけると幸いです。

よろしくお願いいたします。

iPhoneでvideoタグで指定してた動画が表示されない

現在以下のようなコードを書いています。
言葉では伝わりにくいのかもしれませんが、
以下のコードだと、動画の上部だけしか表示されません。
動画の中心を表示領域の中心としたいのですが、どのようにすればよろしいでしょうか。
また、その上で、以下のコードから不要な部分がございましたら同時に指摘をお願いしたいと思います。

```html
<div class="top">
    <video autoplay loop muted poster="sample.jpg">
        <source src="./video/sample.mp4" type="video/mp4">
    </video>
</div>

```

```CSS
video {
    top: 0;
    min-width:100%;
    min-height:100%;
    z-index:-100;
}

.top {
    height: 350px;
}
```

イメージとしては
![イメージ説明](e3deb305302a19ff45871d58f1bb942b.png)
上記の画像がもっと手の下が見えるようにしたいと思っています。

html5のvideoタグで縦幅を指定したときに動画の中心を表示領域の中心にしたい

###前提・実現したいこと
slick.jsのスライダーを内包したタブメニューを作成しています。
レスポンシブで、各タブの要素の高さが可変するのですが、
①タブの切り替えに合わせてコンテンツの高さを取得したいです。
また上下にタブを設置しているので、
②上下のタブのactiveクラスを連動させたいです。
**→②は解決できました。**

どなたか分かる方がいらっしゃいましたら、ご教授よろしくお願いします。
###発生している問題・エラーメッセージ
①タブを切り替えても、最初に表示されているタブコンテンツの高さが保持されてしまう。
②色々試したものの、結局できませんでした。orz
**→②は解決できました。**


###該当のソースコード
```HTML
<div class="standardMenu">
	<ul id="tabMenu" class="cf">
		<li><a class="tabActive" href="#page01">tab01</a></li>
		<li><a href="#page02">tab02</a></li>
		<li><a href="#page03">tab03</a></li>
		<li><a href="#page04">tab04</a></li>
	</ul>
</div>

<div id="tabContent">
	<div id="page01" class="mainBodyBox tabBox">
		<h4>ここはtab01コンテンツです。</h4>
		<h5 id="page01_1">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_01">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_01">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
	</div>
	<div id="page02" class="mainBodyBox tabBox">
		<h4>ここはtab02コンテンツです。</h4>
		<h5 id="page02_1">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_02">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_02">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
		<h5 id="page02_2">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_03">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_03">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
		</div>
	</div>
	
</div>

<div id="tabMenu_bottom" class="standardMenu">
	<ul id="tabMenu" class="cf">
		<li><a class="tabActive" href="#page01">tab01</a></li>
		<li><a href="#page02">tab02</a></li>
		<li><a href="#page03">tab03</a></li>
		<li><a href="#page04">tab04</a></li>
	</ul>
</div>

```
```javascript
//タブ
$(function(){
	$(window).on('load resize', function(){

		var w = window.innerWidth ? window.innerWidth: $(window).width();
		var x = 767;
		var tabContent_01 = $("#tabContent #page01").outerHeight();
		var tabContent_02 = $("#tabContent #page02").outerHeight();
		var tabContent_03 = $("#tabContent #page03").outerHeight();
		var tabContent_04 = $("#tabContent #page04").outerHeight();
		var tabContent = $("#tabContent .tabBox:visible").outerHeight();

		if (w <= x) {//ウィンドウサイズが767px以下の場合（SP）
			$("#tabContent #page01").css("height", tabContent_01);
			$("#tabContent #page02").css("height", tabContent_02);
			$("#tabContent #page03").css("height", tabContent_03);
			$("#tabContent #page04").css("height", tabContent_04);
			$("#tabContent").css("height", tabContent);//■1

			$(function() {
				$('#tabMenu li a').on('click',function(){
				$("#tabMenu li a").removeClass("tabActive");
				$(this).addClass("tabActive");
				$(".tabBox").css("visibility", "hidden");//■2
				$(".tabBox").css("height", "0px");
				$($(this).attr("href")).css("visibility", "visible");
				$($(this).attr("href")).css("height", "auto");
				$("#tabContent").css("height", tabContent);//■3
					return false;
				});
			})
		}
	});
});

//スライダーslick.js
$('.slide_01').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	fade: true,
	asNavFor: '.thum_01'
});
$('.thum_01').slick({
	slidesToShow: 4,
	slidesToScroll: 1,
	dots: false,
	focusOnSelect: true,
	asNavFor: '.slide_01'
});
//以下、スライダーが複数続きます。
```
```CSS
/*タブ*/
#tabMenu { position: relative; width: 100%; overflow: hidden; height: 40px;}
#tabMenu li { position: absolute; bottom: 0; float: left; width: 25%;}
#tabMenu li a { display: block; height: 30px; color: #fff; font-size: 11px; text-align: center; line-height: 30px; background-color: rgba(153,119,38,0.5); border-right: 1px solid #fff;}
#tabMenu li:last-child a { border-right: none;}
#tabMenu li:first-child { left: 0;}
#tabMenu li:nth-child(2) { left: 25%;}
#tabMenu li:nth-child(3) { right: 25%;}
#tabMenu li:last-child { right: 0;}
#tabMenu li .tabActive { height: 40px; color: #997726; line-height: 40px; background-color: #fff; border: 1px solid #997726; border-right: 1px solid #997726 !important; border-bottom: none;}
#tabMenu_bottom ul { height: 30px;}
#tabMenu_bottom ul li { height: 30px;}
#tabMenu_bottom ul li a { height: 30px;}
#tabMenu_bottom ul li .tabActive { height: 30px; line-height: 30px; border: 1px solid #997726; border-bottom: 1px solid #997726 !important;}
/*tabContent*/
#tabContent { position: relative; width: 100%;}
#tabContent .tabBox { position: absolute; top: 0; width: 100%;}

```
###試したこと
タブコンテンツの中にスライダーが入っているので、
通常のhideやdisplay:noneでのタブが実装できない。
（そうするとタブを切り替えた時にスライダーが表示されない）
なので、なんとかスライダーの高さを維持したまま、visibilityで処理している。（■2）
■1で#tabContentの初期の高さを取得しているのを、
■3で切り替わったコンテンツの高さに合わせて高さを更新したいつもり。
が、まったく動いていないのでずっと初期の高さが保持されてしまっている状態です。

activeクラスの上下タブ連動に関しては手付かずの状態です。
**→上下タブ連動は解決できました。**

高さの可変するタブのコンテンツ（スライダー入り）の高さを取得し、即時反映させたい。

Webブラウザにてグラフを作成したいと思い、**Chart.js**(Ver.2)を使っています。

1時間当たりの濃度変化グラフを描いたのですが、次のような表示となり、X軸のラベル間隔を5分間隔で表示したいと考えています（5･10･15分…）。

![イメージ説明](d4d0707f534945660a534a428161dd77.jpeg)

そこで次のURLなどを調べ、chart.jsのドキュメントも読んだのですが、どうにもうまくいかず、質問させていただく次第です。

[http://kimagureneet.hatenablog.com/entry/2016/02/17/012643](http://kimagureneet.hatenablog.com/entry/2016/02/17/012643)

なお下のHTMLにおけるJavaScript内で、n分値のラベルを作成している中、IF分を用いて5つおきにラベルを入れるということはできるのですが、そうするとマウスカーソルを合わせた時にデータ表示がうまくいかず、どうにも解決法がわかりません。

ご存知の方、いらっしゃいましたら具体的にご教授いただけたら幸いです。


```HTML
<html>
    <head>
        <title>TEST</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    </head>
    <body>
        <canvas id="fig1"></canvas>
        <script>
            var x_label = [];
            var i;
            for (i = 0; i < 60; i++) {
                x_label.push((i + 1) + "分");
            };
            var ctx = document.getElementById("fig1");
            var fig1 = new Chart(ctx,
                    {
                        type: 'line',
                        data: {labels: x_label,
                            datasets: [{
                                    label: "濃度",
                                    fill: false,
                                    lineTension: 0,
                                    backgroundColor: "rgba(179,181,198,0.2)",
                                    borderColor: "rgba(179,181,198,1)",
                                    pointBorderColor: "rgba(179,181,198,1)",
                                    pointBackgroundColor: "#fff",
                                    pointRadius: 5,
                                    pointHoverRadius: 8,
                                    pointHoverBackgroundColor: "rgba(179,181,198,1)",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHitRadius: 15, data: [12, 3, 5, 2, 3, 9, 10, 22, 3, 23, NaN, 23, 32, 2, 4, 12, 32, 34, 32, 2, 23, 21, 45, 4, 3, 2, 6, 54, 7, 4, 54, 2, 67, 4, 2, 16, 0, 23]
                                }
                            ]},
                        options: {
                            scales: {
                                yAxes: [{ticks: {
                                            beginAtZero: true,
                                            stepSize: 5,
                                        }
                                    }]},
                            hover: {mode: 'single'},
                        }
                    }
            );
        </script>
    </body>
</html>

```

Chart.jsにおけるX軸の間隔を設定したい

元画像が正方形でない画像を丸く切り抜きたいのですが、どうやっても歪んでしまいます。基本的に`hrml`側で処理を行い、`css`の`background-image:image-url`は使わずに処理したいのですが、可能でしょうか。

理由としては、プロフィールの画像を想定している為、`CSS`側で処理すると対象者が変わるたびに画像を変更することができない為です。

```html
<div class="icon-top"><img src="/uploads/user/user_icon/4/user4.jpg" alt="User4" /></div>
```
```css
icon-top img{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
 }
```
しまう画像
![イメージ説明](f5705282b752a9bd38b1e3d4fbd93587.png)

元画像
![イメージ説明](dcb6f54640b955dc10b6d8fbaee4143a.png)

CSS 元画像が長方形の画像を歪みなく丸く切り抜く方法

###前提・実現したいこと
WPプラグイン「Pods(https://ja.wordpress.org/plugins/pods/)」を使用しています。
出力用の固定ページ・そのテンプレートも作成済みです。
上記を使用し、WordPressのフロントエンドで投稿を可能にしたい。
投稿内容：タイトル・サブタイトル・本文・抜粋・画像・カテゴリ・タグ

###発生している問題・エラーメッセージ
タイトル・サブタイトル・本文・抜粋は問題なく、表示記入が出来ております。
カテゴリ・タグに関してはfunctions.phpにて、投稿（post）と共有化済みです。

カテゴリ：投稿カテゴリと同じ表示がされるが、選択して投稿しても、反映されない
タブ：カテゴリ同様、反映されない
画像：メディアアップロードをクリックしても、URLに#が追加されるだけで、何も変わらず投稿が出来ない

###該当のソースコード
プラグイン「Pods」内の設定にて、
高度なオプション > Built-in Taxonomies > カテゴリー、タグ選択しています

固定ページに対するテンプレートの出力箇所は以下の通りに書いております
```ここに言語を入力
<?php
    $pod_article = pods( 'article' );
    $fields = array(
                    'post_title' => array( 'label' => 'タイトル', 'required' => true),
					'subtitle' => array('label' => 'サブタイトル', 'required' => true),
					'post_content' => array('label' => '本文', 'required' => true),
					'post_excerpt' => array('label' => '抜粋', 'required' => true),
					'category' => array('label' => 'カテゴリー', 'required' => true),
					'tag' => array('label' => 'タグ', 'required' => true),
                    );
    echo $pod_article->form($fields, '更新');
?>
```

###試したこと
・プラグイン「Pods」内のManage FieldsのLabelで、カテゴリ・タグを登録⇒上記同様の結果

###補足情報(言語/FW/ツール等のバージョンなど)
WPにログインし、直接自作テーマのPHPをいじっています。

WPフロントエンドにて投稿を可能にする

```lang-＜ここに言語を入力＞
An error occurred while installing json (1.8.2), and Bundler cannot continue.
Make sure that `gem install json -v '1.8.2'` succeeds before bundling.

```
現在、ネット上のRails入門サイトをみてRailsの学習をしているのですが上記のエラーが出ます。
解決の仕方を教えてください！お願いします！

Rails 　json -v '1.8.2'のインストールについて

wpのテーマを編集しています。
ヘッダーにある画像をランダムに表示するようにしたいのですが、うまくいきません。

編集中のサイトが[こちら](http://garu.but.jp/wp/)
テーマが[こちらです](https://ja.wordpress.org/themes/freesia-empire/)

ヘッダーの背景画像は、固定ページを読み込んでいます。

以下が、ヘッダーの背景画像を読み込んでいる（であろう）phpソースになります。

途中で日本語のコメントアウトがあるので、そこまでは読み飛ばしてください

```php

<?php
/**
 * Custom functions
 *
 * @package Theme Freesia
 * @subpackage Freesia Empire
 * @since Freesia Empire 1.0
 */
/********************* Set Default Value if not set ***********************************/
	if ( !get_theme_mod('freesiaempire_theme_options') ) {
		set_theme_mod( 'freesiaempire_theme_options', freesiaempire_get_option_defaults_values() );
	}/********************* freesiaempire RESPONSIVE AND CUSTOM CSS OPTIONS ***********************************/
function freesiaempire_resp_and_custom_css() {
	$freesiaempire_settings = freesiaempire_get_theme_options();
	if( $freesiaempire_settings['freesiaempire_responsive'] == 'on' ) { ?>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<?php } else{ ?>
	<meta name="viewport" content="width=1070" />
	<?php  }
}
add_filter( 'wp_head', 'freesiaempire_resp_and_custom_css');


/***************** USED CLASS FOR BODY TAGS ******************************/
function freesiaempire_body_class($classes) {
	global $freesiaempire_site_layout, $freesiaempire_content_layout, $post;
	$freesiaempire_settings = freesiaempire_get_theme_options();
	if ($post) {
		$layout = get_post_meta($post->ID, 'freesiaempire_sidebarlayout', true);
	}
	$freesiaempire_site_layout = $freesiaempire_settings['freesiaempire_design_layout'];
	$freesiaempire_blog_layout_temp = $freesiaempire_settings['freesiaempire_blog_layout_temp'];
	$freesiaempire_content_layout = $freesiaempire_settings['freesiaempire_sidebar_layout_options'];
	if (empty($layout) || is_archive() || is_search() || is_home()) {
		$layout = 'default';
	}
	if(!is_page_template('page-templates/freesiaempire-corporate.php')) {
		if ('default' == $layout) {
			$themeoption_layout = $freesiaempire_content_layout;
			if ('left' == $themeoption_layout) {
				$classes[] = 'left-sidebar-layout';
			} elseif ('right' == $themeoption_layout) {
				$classes[] = '';
			} elseif ('fullwidth' == $themeoption_layout) {
				$classes[] = 'full-width-layout';
			} elseif ('nosidebar' == $themeoption_layout) {
				$classes[] = 'no-sidebar-layout';
			}
		} elseif ('left-sidebar' == $layout) {
			$classes[] = 'left-sidebar-layout';
		} elseif ('right-sidebar' == $layout) {
			$classes[] = '';//css blank
		} elseif ('full-width' == $layout) {
			$classes[] = 'full-width-layout';
		} elseif ('no-sidebar' == $layout) {
			$classes[] = 'no-sidebar-layout';
		}
		if($freesiaempire_blog_layout_temp == 'large_image_display'){
			$classes[] = "blog-large";
		}elseif ($freesiaempire_blog_layout_temp == 'medium_image_display'){
			$classes[] = "small_image_blog";
		}
	}
	if (!is_page_template('page-templates/freesiaempire-corporate.php') && !is_page_template('alter-front-page-template.php') ){
		$classes[] = '';
	}elseif (is_page_template('page-templates/freesiaempire-corporate.php')) {
		$classes[] = 'tf-business-template';
		$classes[] = 'page-template-default';
	}
	if (is_page_template('page-templates/page-template-contact.php')) {
			$classes[] = 'contact';
	}
	if ($freesiaempire_site_layout =='boxed-layout') {
		$classes[] = 'boxed-layout';
	}
	if ($freesiaempire_site_layout =='small-boxed-layout') {
		$classes[] = 'boxed-layout-small';
	}
	return $classes;
}
add_filter('body_class', 'freesiaempire_body_class');

/***************************** wp_enqueue_script ********* *******************/
function freesiaempire_jquery_javascript_file($hook) {
	if( $hook != 'widgets.php' )
	return;
	wp_enqueue_script( 'freesiaempire-script', get_template_directory_uri() . '/inc/js/freesia-empire-image-upload.js');
	wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'freesiaempire_jquery_javascript_file' );

/**************************** SOCIAL MENU *********************************************/
function freesiaempire_social_links() {
	if ( has_nav_menu( 'social-link' ) ) : ?>
	<div class="social-links clearfix">
	<?php
		wp_nav_menu( array(
			'container' 	=> '',
			'theme_location' => 'social-link',
			'depth'          => 1,
			'items_wrap'      => '<ul>%3$s</ul>',
			'link_before'    => '<span class="screen-reader-text">',
			'link_after'     => '</span>',
		) );
	?>
	</div>
	<?php endif;
}
add_action ('social_links', 'freesiaempire_social_links');

/******************* DISPLAY BREADCRUMBS ******************************/
function freesiaempire_breadcrumb() {
	if (function_exists('bcn_display')) { ?>
		<div class="breadcrumb home">
			<?php bcn_display(); ?>
		</div> 
	<?php }
}

/*********************** freesiaempire PAGE SLIDERS ***********************************/
function freesiaempire_page_sliders() {
	$freesiaempire_settings = freesiaempire_get_theme_options();
	$excerpt = get_the_excerpt();
	global $freesiaempire_excerpt_length;
	global $post;
	$freesiaempire_page_sliders_display = '';
	$freesiaempire_total_page_no 		= 0;
	$freesiaempire_list_page				= array();
	for( $i = 1; $i <= $freesiaempire_settings['freesiaempire_slider_no']; $i++ ){
		if( isset ( $freesiaempire_settings['freesiaempire_featured_page_slider_' . $i] ) && $freesiaempire_settings['freesiaempire_featured_page_slider_' . $i] > 0 ){
			$freesiaempire_total_page_no++;
			$freesiaempire_list_page	=	array_merge( $freesiaempire_list_page, array( esc_attr($freesiaempire_settings['freesiaempire_featured_page_slider_' . $i] )) );
		}
	}
		if ( !empty( $freesiaempire_list_page ) && $freesiaempire_total_page_no > 0 ) {
			$freesiaempire_page_sliders_display 	.= '<div class="main-slider"> <div class="layer-slider">';
					$get_featured_posts 		= new WP_Query(array( 'posts_per_page'=> $freesiaempire_settings['freesiaempire_slider_no'], 'post_type' => array('page'), 'post__in' => $freesiaempire_list_page, 'orderby' => 'post__in', ));
					$j=1; $i=0;
			while ($get_featured_posts->have_posts()):$get_featured_posts->the_post();



// 多分ここから下のソースで画像を呼び出している
// get_post_thumbnail_idを使って、固定ページのサムネイルを呼び出して
// wp_get_attachment_image_srcを使ってurlにしている


			$attachment_id = get_post_thumbnail_id();
			$image_attributes = wp_get_attachment_image_src($attachment_id,'freesiaempire_slider_image');
						$i++;
						$title_attribute       	 	 = apply_filters('the_title', get_the_title($post->ID));
						$excerpt               	 	 = substr(get_the_excerpt(), 0 , 160);
						if (1 == $i) {$classes   	 = "slides show-display";} else { $classes = "slides hide-display";}
				$freesiaempire_page_sliders_display    	.= '<div class="'.$classes.'">';




        // 多分↓のソースでurlに入れている
				

				if ($image_attributes) {
					$freesiaempire_page_sliders_display 	.= '<div class="image-slider clearfix" title="'.the_title('', '', false).'"' .' style="background-image:url(' ."'" .esc_url($image_attributes[0])."'" .')">';
				}



// やってみた事
// >>shuffle($image_attributes)とかshuffle($attachment_id)してみた
// 配列になっているなら、混ぜとけばいいのでは？と思ったけど失敗


// 予想
// >>get_post_thumbnail_id()では、一つのidしか取ってきていない


// やりたい事
// get_post_thumbnail_id()で取り出す固定ページをランダムにしたい！



ソースコードが終わった後も記述あります！




				if ($title_attribute != '' || $excerpt != '') {
					$freesiaempire_page_sliders_display 	.= '<div class="container">';
					if($j == 1){
					$freesiaempire_page_sliders_display 	.= '<article class="slider-content clearfix freesia-animation fadeInRight">';
					}else{
						$freesiaempire_page_sliders_display 	.= '<article class="slider-content clearfix">';
					}

				$remove_link = $freesiaempire_settings['freesiaempire_slider_link'];
					if($remove_link == 0){
						if ($title_attribute != '') {
							$freesiaempire_page_sliders_display .= '<h2 class="slider-title"><a href="'.get_permalink().'" title="'.the_title('', '', false).'" rel="bookmark">'.get_the_title().'</a></h2>';
						}
					}else{
						$freesiaempire_page_sliders_display .= '<h2 class="slider-title">'.get_the_title().'</h2>';
					}
						$freesiaempire_page_sliders_display 	.='</article> </div>';
				}
				
				$freesiaempire_page_sliders_display 	.='</div>';
				$j++;
			endwhile;
			wp_reset_postdata();
			
		}
				echo $freesiaempire_page_sliders_display;
}

// このコードは文字数の関係上、最後の方をカットしました。

?>

```

固定ページは多くあるのですが

wpデフォルトのカスタマイズで指定したページのサムネイル画像を上から順に選択しています！

![![イメージ説明](eb0fb70deacbb10eb401a8cee951c4a6.png)


大雑把な質問で申し訳ありません。
何か少しでも良いので、こうしてみれば？みたいな助言をいただきたいです。
私ならこうする等でも構いません。

どうかお願いします。