常連

注目の的

社会貢献

質問力

Vue.js と Laravel と YouTube API を用いてポートフォリオを作成しています。
現在、 Vue側から axios で YouTube Data API Search を叩き、動画を検索する機能を実装しようとしているのですが、CORSのエラーに引っかかってしまったのでお力添えをお願いしたいです。

こちらのサイト（ https://qiita.com/nonkapibara/items/d12d1aae0710bb6e748a ）を参考に実装しているのですが、検索フォームにワードを入れて検索ボタンを入れたところ、コンソールに以下のようなエラーが出てしまいました。

> Access to XMLHttpRequest at 'https://www.googleapis.com/youtube/v3/search?q=aaa&part=snippet&type=video&maxResults=20&key='*******************' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

### 試してみたこと

① 参考サイトにあった axios.get の部分にHeadersを追加

```js
axios
        .get("https://www.googleapis.com/youtube/v3/search", {
          params: this.params,
          headers: {
            'Access-Control-Allow-Origin': 'http://127.0.0.1:8000/',
            'Access-Control-Allow-Headers': 'Content-type',
            'Access-Control-Allow-Methods' : 'GET, POST, PUT, DELETE, OPTIONS',
          },
        })
```

② 先程のHeaders を data に記述

```js
data: function() {
    return {
      results: null,
      keyword: "",
      order: "viewCount", // リソースを再生回数の多い順に並べます。
      params: {
        q: "", // 検索クエリを指定します。
        part: "snippet",
        type: "video",
        maxResults: "20", // 最大検索数
        key: "*********************",
        headers: {
            'Access-Control-Allow-Origin': 'http://127.0.0.1:8000/',
            'Access-Control-Allow-Headers': 'Content-type',
            'Access-Control-Allow-Methods' : 'GET, POST, PUT, DELETE, OPTIONS',
        },
      },
    };
  },
```

③ 外部ファイルを作成し、そこから headers を設定する

参考 : https://qiita.com/inatatsu_csg/items/15f63be00096ec21535e

上記3点試してみましたが、全てエラーの内容は同じものになってしまいます。

### 現状確認できていること

① 検索結果はJSONで返されている

ディベロッパーツールのNetwork にあるURL（スクショの赤字部分）をクリックすると検索結果はJSONで返されています。
![Newwork](5fb6d6535157e3ca022eef1da71bbf15.png)

返されたJSONのスクショ : https://gyazo.com/5be531b8e0356beb6edc384fc76912bc


② 先程設定した headers は Newwork をみる限りリクエストはできている（先程のNetworkのスクショ参照）

外部APIを叩くのが初の試みなので、見落としている点などあると思いますが、どなたかお力添えしていただけると幸いです。

よろしくお願いいたします。

Vue.js から axios を用いて YouTube API を叩こうとしたところCORSに引っかかった

Ajaxを使用してpostしたデータをPHPで表示させるまでのやり方がわからないのでご教授願います。

<common.js>
```javascript
$(function() {
  $('input[name=hoge]').click(function() {
	  var param = {sendData  : $(this).val()};
	  $.ajax( {
		  url : "index.php",
		  cache : false,
		  type:"POST",
		  data : {sendData  : $(this).val()},
		  success: function(data){
			 $('sendData').html(param)
		  },
		  error: function(XMLHttpRequest, textStatus, errorThrown) {
		  },
	  });
  });
});
```
<index.php>
```PHP
<?php
//ConfigDataの参照
require_once (dirname(__FILE__) . '/templates/config.php');
//Templateになるheader.phpをリクワイア
require_once (dirname(__FILE__) . '/templates/header.php');

require_once (dirname(__FILE__) . '/templates/body.php');



var_dump($_POST['sendData']);

if (isset($_POST['sendData']))
{
    //ここに何かしらの処理を書く（DB登録やファイルへの書き込みなど）
    echo "OK";
}
else
{
    echo 'The parameter of "request" is not found.';
}
?>
```

<body.php>
```php
<?php
?>
<h2>ajaxテストプロジェクト</h2>
<form method="POST">
	<input type="button" name="hoge" value="viewA">
	<input type="button" name="hoge" value="viewB">
</form>
```

---
common.jsに記載している "$('sendData').html(param)" の
(param)を(data)に変更したのですがpostによる結果の表示までいたりませんでした。

43185より
>
その場合、data に Response 内容が格納されているので、それを表示させます。
中身は console.log(data); で確認ができるので、それを表示したい内容の加工するだけです。

とご教授をいただいておりますが、表示まで至っておりません。
極力ページのリロードを行わないようにしたいです。



ページの遷移比較ができるように追記掲載します

以下現行のページ表示状態
```html
	</head>
	<body>
	<h1>テストプロジェクト</h1>
	</body>
</html><h2>ajaxテストプロジェクト</h2>
<form method="POST">
	<input type="button" name="hoge" value="viewA">
	<input type="button" name="hoge" value="viewB">
</form><pre class='xdebug-var-dump' dir='ltr'><font color='#3465a4'>null</font>
</pre>The parameter of "request" is not found.
```
現行の表示されているページイメージ
---
![![現行の表示結果イメージ](e92f65b86d348b513297eb88bea73c3c.png)](70e20e3da2e272055d64e7a26dd11113.png)



以下、期待する遷移後のページ結果
```html
<!DOCTYPE html>
<html>
	<head>

～～～～～略～～～～
	</head>
	<body>
	<h1>テストプロジェクト</h1>
	</body>
</html><h2>ajaxテストプロジェクト</h2>
<form method="POST">
	<input type="button" name="hoge" value="viewA">
	<input type="button" name="hoge" value="viewB">
</form><pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>'viewA'</font> <i>(length=5)</i>
</pre>OK
```

結果イメージ
---
![期待するページ結果](21a6e2f83c97eafb8bdc22ca9325a55c.png)

ajaxでpostした際に吐き出されるdataに格納されているResponseの内容を表示するには

RailsでWebサービスを作成していたんですがbundle installをしたらmysql２でエラーがでました。

下記エラー文です。

やったこと
・gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'
・/usr/local/opt/mysql@5.7/libへパスを通す

わかる方がいればご教示いただければ幸いです。

```ここに言語を入力
Fetching mysql2 0.5.3
Installing mysql2 0.5.3 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /Users/ユーザ名/Desktop/PF2/recogour/vendor/bundle/ruby/2.7.0/gems/mysql2-0.5.3/ext/mysql2
/Users/ユーザ名/.rbenv/versions/2.7.0/bin/ruby -I /Users/ユーザ名/.rbenv/versions/2.7.0/lib/ruby/2.7.0 -r
./siteconf20200719-13940-1j9sgjx.rb extconf.rb
checking for rb_absint_size()... yes
checking for rb_absint_singlebit_p()... yes
checking for rb_wait_for_single_fd()... yes
-----
Using mysql_config at /usr/local/opt/mysql@5.7/bin/mysql_config
-----
checking for mysql.h... yes
checking for errmsg.h... yes
checking for SSL_MODE_DISABLED in mysql.h... yes
checking for SSL_MODE_PREFERRED in mysql.h... yes
checking for SSL_MODE_REQUIRED in mysql.h... yes
checking for SSL_MODE_VERIFY_CA in mysql.h... yes
checking for SSL_MODE_VERIFY_IDENTITY in mysql.h... yes
checking for MYSQL.net.vio in mysql.h... yes
checking for MYSQL.net.pvio in mysql.h... no
checking for MYSQL_ENABLE_CLEARTEXT_PLUGIN in mysql.h... yes
checking for SERVER_QUERY_NO_GOOD_INDEX_USED in mysql.h... yes
checking for SERVER_QUERY_NO_INDEX_USED in mysql.h... yes
checking for SERVER_QUERY_WAS_SLOW in mysql.h... yes
checking for MYSQL_OPTION_MULTI_STATEMENTS_ON in mysql.h... yes
checking for MYSQL_OPTION_MULTI_STATEMENTS_OFF in mysql.h... yes
checking for my_bool in mysql.h... yes
-----
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load
-----
-----
Setting libpath to /usr/local/opt/mysql@5.7/lib
-----
creating Makefile

current directory: /Users/ユーザ名/Desktop/PF2/recogour/vendor/bundle/ruby/2.7.0/gems/mysql2-0.5.3/ext/mysql2
make "DESTDIR=" clean

current directory: /Users/ユーザ名/Desktop/PF2/recogour/vendor/bundle/ruby/2.7.0/gems/mysql2-0.5.3/ext/mysql2
make "DESTDIR="
compiling client.c
client.c:787:14: warning: incompatible pointer types passing 'VALUE (void *)' (aka 'unsigned long (void *)') to
parameter of type 'VALUE (*)(VALUE)' (aka 'unsigned long (*)(unsigned long)') [-Wincompatible-pointer-types]
  rb_rescue2(do_send_query, (VALUE)&args, disconnect_and_raise, self, rb_eException, (VALUE)0);
             ^~~~~~~~~~~~~
/Users/ユーザ名/.rbenv/versions/2.7.0/include/ruby-2.7.0/ruby/ruby.h:1988:25: note: passing argument to parameter
here
VALUE rb_rescue2(VALUE(*)(VALUE),VALUE,VALUE(*)(VALUE,VALUE),VALUE,...);
                        ^
client.c:795:16: warning: incompatible pointer types passing 'VALUE (void *)' (aka 'unsigned long (void *)') to
parameter of type 'VALUE (*)(VALUE)' (aka 'unsigned long (*)(unsigned long)') [-Wincompatible-pointer-types]
    rb_rescue2(do_query, (VALUE)&async_args, disconnect_and_raise, self, rb_eException, (VALUE)0);
               ^~~~~~~~
/Users/ユーザ名/.rbenv/versions/2.7.0/include/ruby-2.7.0/ruby/ruby.h:1988:25: note: passing argument to parameter
here
VALUE rb_rescue2(VALUE(*)(VALUE),VALUE,VALUE(*)(VALUE,VALUE),VALUE,...);
                        ^
2 warnings generated.
compiling infile.c
compiling mysql2_ext.c
compiling result.c
compiling statement.c
linking shared-object mysql2/mysql2.bundle
ld: library not found for -lssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1

make failed, exit code 2

Gem files will remain installed in /Users/ユーザ名/Desktop/PF2/recogour/vendor/bundle/ruby/2.7.0/gems/mysql2-0.5.3
for inspection.
Results logged to
/Users/ユーザ名/Desktop/PF2/recogour/vendor/bundle/ruby/2.7.0/extensions/x86_64-darwin-19/2.7.0/mysql2-0.5.3/gem_make.out

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  mysql2
```

mysql2 bundle install時のエラー

### 前提・実現したいこと
『Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた』
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11

このサイトを参考にrailsとvue.jsを使ってTODOアプリを作成しています。
登録されているタスクをv-forで表示していく中で、すでに完了しているタスクは表示させない、というのをv-ifを使ってやっているのですが、上記のサイトにあるコードではエラーになってしまいます。

### 発生している問題・エラーメッセージ

v-ifとv-bind:idの２箇所でエラーが出ています。

```
[vue/no-use-v-if-with-v-for]
The 'tasks' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.
```
こちらのエラーはv-bindでidを作ろうとしている部分でエラーが出ます。
```
[vue/valid-v-bind]
'v-bind' directives require an attribute value.
```

### 該当のソースコード

```ここに言語名を入力
<li v-for="task in tasks" v-bind:key="task.id" v-if="!task.is_done" v-bind:id＝"'row_task_' + task.id" class="collection-item">//この行でエラー
          <input type="checkbox" v-on:change="doneTask(task.id)" v-bind:id="'task_' + task.id" />
          <label v-bind:for="'task_' + task.id">{{ task.name }}</label>
</li>
```

### 試したこと

もともと参考にしたサイトに書いてあったのは
```ここに言語名を入力
<li v-for="task in tasks"　" v-if="!task.is_done" v-bind:id＝"'row_task_' + task.id" class="collection-item">
          <input type="checkbox" v-on:change="doneTask(task.id)" v-bind:id="'task_' + task.id" />
          <label v-bind:for="'task_' + task.id">{{ task.name }}</label>
</li>

```
だったので、v-forがあるのにv-bind:keyがない、と思ったので付け足しました。
そこのエラーは改善されましたが残りの２箇所は改善されませんでした。


Vue.jsを始めたばかりなので自分で解決することができませんでした、、、
よろしくお願いします。

v-forとv-ifを使って条件に当てはまるものだけ表示させる方法

rails5で開発したアプリをherokuへデプロイし
heroku run rails db:migrate　しようとしたところ
恐らくデータ型関連でエラーが起きてしまいました
開発環境ではsqlite　本番環境ではPostgreSQLを使っています

フォームにYouTubeのURlを入力し、その動画が公開された日付を
保存するアプリをYouTubeのAPIを用いて製作中です
取得した日付は"2010-04-16T10:05:24.000Z"のような文字列なので
Time.parseしてからvideosテーブルのpublished_atカラムに保存します
```ruby
>> Time.parse("2010-04-16T10:05:24.000Z")
=> 2010-04-16 08:39:12 UTC
```
初めはpublished_atのデータ型をtimeにしていたのですが
時刻までしか保存できなかったのでdatetimeに変更しました
```ruby
class ChangeDatatypePublishedAtOfVideos < ActiveRecord::Migration[5.1]
  def change
    change_column :videos, :published_at, :datetime
  end
end
```
git push heroku　まではうまくいきました
しかしheroku run rails db:migrateをすると

rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DatatypeMismatch: ERROR:  column "published_at" cannot be cast automatically to type timestamp without time zone
HINT:  You might need to specify "USING published_at::timestamp without time zone".
: ALTER TABLE "videos" ALTER COLUMN "published_at" TYPE timestamp

というエラーコードが出ました

フォームにURL入力⇒公開された日付を保存すると
2000年1月1日 19時5分　という風に時刻だけが保存されて
日付がすべて2000年1月1日になってしまいました
sqliteを使用中のdevelopment環境ではrails db:migrateが問題なく動きますし保存も成功します
PostgreSQLで何かが起きているのはわかりますがDB関連に疎いので何がおきているのか分からないです
どうすればheroku run rails db:migrateがうまくいくのでしょうか

railsのdatetime型がPostgreSQLでDatatypeMismatchを起こす

`heroku run rake db:migrate`をすると、以下のようなエラーが発生します。
カラム`delivery_date`を一度消して、`heroku run rake db:reset`をし、再度`heroku run rake db:migrate`をしたりしたのですが、以下のエラー文が直りません。

どのようにすれば良いでしょうか。
ご教授よろしくお願い致します。

`delivery_date`のデータの型は、`date`です。
herokuには、time zoneを東京で追加しております。
また、config/application.rbへも、`config.time_zone = 'Tokyo'`を追加しております。

```ここに言語を入力
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DatatypeMismatch: ERROR:  column "delivery_date" cannot be cast automatically to type timestamp without time zone
HINT:  You might need to specify "USING delivery_date::timestamp without time zone".

/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/postgresql/database_statements.rb:92:in `exec'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/postgresql/database_statements.rb:92:in `block (2 levels) in execute'
/app/vendor/bundle/ruby/2.6.0/gems/activesupport-6.0.2.1/lib/active_support/dependencies/interlock.rb:48:in `block in permit_concurrent_loads'
/app/vendor/bundle/ruby/2.6.0/gems/activesupport-6.0.2.1/lib/active_support/concurrency/share_lock.rb:187:in `yield_shares'
/app/vendor/bundle/ruby/2.6.0/gems/activesupport-6.0.2.1/lib/active_support/dependencies/interlock.rb:47:in `permit_concurrent_loads'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/postgresql/database_statements.rb:91:in `block in execute'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract_adapter.rb:718:in `block (2 levels) in log'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract_adapter.rb:717:in `block in log'
/app/vendor/bundle/ruby/2.6.0/gems/activesupport-6.0.2.1/lib/active_support/notifications/instrumenter.rb:24:in `instrument'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract_adapter.rb:708:in `log'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/postgresql/database_statements.rb:90:in `execute'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/postgresql/schema_statements.rb:402:in `change_column'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:890:in `block in method_missing'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:858:in `block in say_with_time'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:858:in `say_with_time'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:879:in `method_missing'
/app/db/migrate/20200107111610_change_datatype_delivery_date_of_patterns.rb:3:in `change'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:828:in `exec_migration'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:812:in `block (2 levels) in migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:811:in `block in migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract/connection_pool.rb:473:in `with_connection'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:810:in `migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1001:in `migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1311:in `block in execute_migration_in_transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1362:in `block in ddl_transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract/database_statements.rb:281:in `block in transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract/transaction.rb:280:in `block in within_new_transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract/transaction.rb:278:in `within_new_transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/connection_adapters/abstract/database_statements.rb:281:in `transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/transactions.rb:212:in `transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1362:in `ddl_transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1310:in `execute_migration_in_transaction'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1282:in `block in migrate_without_lock'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1281:in `each'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1281:in `migrate_without_lock'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1229:in `block in migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1382:in `with_advisory_lock'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1229:in `migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1061:in `up'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/migration.rb:1036:in `migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/tasks/database_tasks.rb:238:in `migrate'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/railties/databases.rake:86:in `block (3 levels) in <main>'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/railties/databases.rake:84:in `each'
/app/vendor/bundle/ruby/2.6.0/gems/activerecord-6.0.2.1/lib/active_record/railties/databases.rake:84:in `block (2 levels) in <main>'
/app/vendor/bundle/ruby/2.6.0/gems/rake-13.0.1/exe/rake:27:in `<top (required)>'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/cli/exec.rb:74:in `load'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/cli/exec.rb:74:in `kernel_load'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/cli/exec.rb:28:in `run'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/cli.rb:465:in `exec'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor/command.rb:27:in `run'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor/invocation.rb:126:in `invoke_command'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor.rb:387:in `dispatch'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/cli.rb:27:in `dispatch'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor/base.rb:466:in `start'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/cli.rb:18:in `start'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/exe/bundle:30:in `block in <top (required)>'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/lib/bundler/friendly_errors.rb:124:in `with_friendly_errors'
/app/vendor/bundle/ruby/2.6.0/gems/bundler-2.0.2/exe/bundle:22:in `<top (required)>'
/app/bin/bundle:104:in `load'
/app/bin/bundle:104:in `<main>'
```

heroku run rake db:migrate  でエラー

Railsアプリをデプロイ時に、以下のようなエラーが出ました。

### 前提
Ruby 2.4.5
Rails 4.2.8
mysql(開発環境)
postgresql(本番環境)

以下実行
```command
git push heroku master
```
以下実行後にエラー
```command
heroku run rails db:migrate
```
### エラー

```terminal
（省略）
== 20190123183555 AddColumnToItem: migrated (0.0029s) =========================

  SQL (1.1ms)  INSERT INTO "schema_migrations" ("version") VALUES ($1)  [["version", "20190123183555"]]
   (1.8ms)  COMMIT
Migrating to ChangeDatatypeCheckOfItems (20190203015612)
   (1.4ms)  BEGIN
== 20190203015612 ChangeDatatypeCheckOfItems: migrating =======================
-- change_column(:items, :check, :boolean)
   (1.8ms)  ALTER TABLE "items" ALTER COLUMN "check" TYPE boolean
   (1.4ms)  ROLLBACK
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DatatypeMismatch: ERROR:  column "check" cannot be cast automatically to type boolean
HINT:  You might need to specify "USING "check"::boolean".
: ALTER TABLE "items" ALTER COLUMN "check" TYPE boolean
```

過去のマイグレーションファイルの中で、boolean型がmysqlとpostgreの間でうまく変換できていないものと思われます。

エラー文の、**You might need to specify "USING "check"::boolean"**
から、migrationファイルを作成し、カラムの型変更をしてみましたがどれもうまくいきません。

```Ruby
#うまくいかない
class ChangeColumnToItem < ActiveRecord::Migration
  def change
    change_column :items, :check, "USING check::boolean"
  end
end
#これもうまくいかない
class ChangeColumnToItem < ActiveRecord::Migration
  def change
    change_column :items, :check, "USING "check"::boolean"
  end
end

#これもうまくいかない
class ChangeColumnToItem < ActiveRecord::Migration
  def change
    change_column :items, :check, 'boolean USING CAST(check AS boolean)'
  end
end
```

### 試してみたこと

USINGというのを使って指定する方法が検索してもほとんど出てこなく困っています。
また、postgreの文法だとうまくいかずSQLの文法で書けというエラーがでてしまいます。

また、開発環境と本番環境で違うデータベースを使うこと自体よくないと思うのですが、herokuにクレジットカード登録できないというエラーから、postgreでやるしか選択肢がない状態です。

### 参考記事
[Migration doesn't work on Postgres](https://github.com/samvera/hyrax/issues/1035)

[Rails] herokuデプロイ時, 開発環境mysqlで本番環境postgreでカラムの型エラー

selfの使い方を色々調べてましたが、selfを使った場合と@を使った場合で結果が同じになります。
Qiitaとか色々見たのですがイマイチ理解できずでして。。。
どっちがいいとかございますでしょうか？

```Ruby
# selfメソッドを使った場合
class User
  attr_accessor :name, :station

  def initialize(name, station)
    # self.nameに引数name を代入する
    self.name = name
    self.station = station
  end
  def my_profile
    p "私の名前は#{self.name}で最寄駅は#{self.station}駅です。"
  end

  # クラスメソッド
  def self.description
    # この場合のselfの扱いは、 Userオブジェクトではなく、Userクラス
    puts "#{self}クラス"
  end
end

# Userのオブジェクトを生成し、引数で名前を与える
user = User.new("田中太郎", "白金高輪")
user.my_profile # => "私の名前は田中太郎で最寄駅は白金高輪駅です。"

# クラスメソッドの呼び出し
User.description # => Userクラス
```

```Ruby
# @を使った場合
class User
  attr_accessor :name, :station

  def initialize(name, station)
    # self.name の代わりに@name にする
    @name = name
    @station = station
  end
  def my_profile
    p "私の名前は#{@name}で最寄駅は#{@station}駅です。"
  end

  # クラスメソッド
  def self.description
    # 適当にaaaクラスを記入
    puts "aaaクラス"
  end
end

# Userのオブジェクトを生成し、引数で名前を与える
user = User.new("田中太郎", "白金高輪")
user.my_profile # => "私の名前は田中太郎で最寄駅は白金高輪駅です。"

# クラスメソッドの呼び出し
User.description # => aaaクラス
```

【Rails】selfと@の使い分けはどうすればいいでしょうか？

今、よくあるストロングパラメーターでモデルに保存する処理を書いているのですが、 `param is missing or the value is empty` というエラーが出てしまい困っています。

特に疑問なのが、
```
def create
  Schedule.create(schedule_id: params[:schedule_id], date: params[:date])
end
```
とやると保存できるのに、
```
def create
  Schedule.create(schedule_params)
end

def schedule_params
  params.require(:schedule).permit(:schedule_id, :date)
end
```
とやるとエラーが出るところです。
もし原因がわかる方がいらっしゃいましたら教えていただきたいです。

param is missing or the value is empty エラー

###前提・実現したいこと
railsでユーザーがツイッターのようにタイムラインに投稿できるものを作っています。さらに、ユーザーがグループを作り、そのグループページでメンバーの投稿を表示したいです。
アソシエーションは以下のように組んでいます。
**Groups**
  has_many :user_groups
  has_many :users, through: :user_groups
**Users**
 has_many :reviews
 has_many :user_groups
 has_many :groups, through: :user_groups
**UserGroups**
  belongs_to :user
  belongs_to :group
**Reviews**（投稿）
  belongs_to :user
UsersとGroupsが多対多の関係になっており、中間テーブル（UserGroups）でつないでいます。

 ユーザーが所属しているグループ一覧をこのように表示させています。
例）
__・太郎グループ__ 
__・花子グループ__
そしてグループ名をクリックするとグループページに飛ぶようになっています。

UserGroupsテーブルのカラムは
id ｜ user_id ｜ group_id
の３つです。


####ここに質問したいことを詳細に書いてください
@group = Group.find(params[:id]).id
ここでクリックしたグループのidを取得できていると思います。
仮に1とします。
@users = UserGroup.where(group_id: @group)
そしてここでgroup_idカラムにクリックしたグループのid（ここでは１）を持つレコードを取得
@reviews = @users.user_id.reviews
group_idカラムに１をもったすべてのuser_idを取得し、そのuserがもっているreview（投稿）をとる

こういうつもりでコードを書いているのですがうまくいきません。
つたない説明ですが、回答していただけると幸いです。

 
###発生している問題・エラーメッセージ
```
undefined method `user_id'というエラーメッセージが出ます。
```

###該当のソースコード
```ここに言語を入力
@group = Group.find(params[:id]).id #クリックしたグループのid取得
@users = UserGroup.where(group_id: @group)#クリックしたグループのidを持つレコードを取得
@reviews = @users.user_id.reviews
```

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
ruby 
rails 4.2.6

Rails 中間テーブルを経由してのカラムの値の取得

以下のソースコードがあります。

```
switch($t = $this->list->test_a($this->test['groupid']))
        {// ページ種別の判定
            case '-1':
                $this->group = $this->test_b();
                break;
            case '0':/
                $this->group = $this->test_c();
                break;
        }
```

```this```は何をさしているのでしょうか。

それと、例えば上記の```$this->group = $this->test_b();```の意味なのですが、「$thisは連想配列で、その$thisの中にgroupというキーがあって、そのキーに値として$this->test_b()という関数がreturnで返す結果を格納している」という考え方であっているでしょうか。

PHPのthisと->の意味がわかりません。

progateのPHP学習コース２をやっています。
今やっている課題は、料理注文サイトを作ることを目指しています。
注文したJUICE、COFFEE、CURRY、PASTAの４つの商品の個数と金額をだす、つまり今行なっている作業はformの中でそれらの情報を送信して、値を受け取り小計金額をだす作業です。
今回、理解できない部分のコードがあるので そのコードがなぜいるのかを教えて下さい。
詳細〜
上から２つ目のコードグループにある
```php
コード
public function getTaxIncludedPrice() {
    return floor($this->price * 1.08);
  }
// getTotalPriceメソッドを定義してください
  public function getTotalPrice(){
    return $this->getTaxIncludedPrice()*$this->orderCount;
  }
```
ですが、これは正解のコードです。
自分はこのコードに到るまでにreturn　getTaxIncludedPrice()*$this->orderCount;としていました。
public function getTaxIncludedPrice() {
    の中に＄this->priceが入っているから、改めて＄thisー＞を getTaxIncludedPrice()の頭に入れなくてもいいんでは？と考えています。書かないでやってみるとクリアできませんでした。かくべき理由が分からないので教えて下さい。
```html 
コード
<?php require_once('data.php') ?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Café Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link href='https://fonts.googleapis.com/css?family=Pacifico|Lato' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="menu-wrapper container">
    <h1 class="logo">Café Progate</h1>
    <form method="post" action="confirm.php">
      <div class="menu-items">
        <?php foreach ($menus as $menu): ?>
          <div class="menu-item">
            <img src="<?php echo $menu->getImage() ?>" class="menu-item-image">
            <h3 class="menu-item-name"><?php echo $menu->getName() ?></h3>
            <p class="price">¥<?php echo $menu->getTaxIncludedPrice() ?>（税込）</p>
            <input type="text" value="0" name="<?php echo $menu->getName() ?>">
            <span>個</span>
          </div>
        <?php endforeach ?>
      </div>
      <input type="submit" value="注文する">
    </form>
  </div>
</body>
</html>

```
```php
コード
<?php
class Menu {
  private $name;
  private $price;
  private $image;
  private $orderCount = 0;
  
  public function __construct($name, $price, $image) {
    $this->name = $name;
    $this->price = $price;
    $this->image = $image;
  }
  
  public function hello() {
    echo '私は'.$this->name.'です';
  }
  
  public function getName() {
    return $this->name;
  }
  
  public function getImage() {
    return $this->image;
  }
  
  public function getOrderCount() {
    return $this->orderCount;
  }
  
  public function setOrderCount($orderCount) {
    $this->orderCount = $orderCount;
  }
  
  public function getTaxIncludedPrice() {
    return floor($this->price * 1.08);
  }
  
  // getTotalPriceメソッドを定義してください
  public function getTotalPrice(){
    return $this->getTaxIncludedPrice()*$this->orderCount;
  }
  
}
?>
```
```php
コード
<?php
require_once('menu.php');

$juice = new Menu('JUICE', 600, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/juice.png');
$coffee = new Menu('COFFEE', 500, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/coffee.png');
$curry = new Menu('CURRY', 900, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/curry.png');
$pasta = new Menu('PASTA', 1200, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/pasta.png');

$menus = array($juice, $coffee, $curry, $pasta);

?>
```
```php
コード
<?php require_once('data.php') ?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link href='https://fonts.googleapis.com/css?family=Pacifico|Lato' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="order-wrapper">
    <h2>注文内容確認</h2>
    <?php foreach ($menus as $menu): ?>
      <?php 
        $orderCount = $_POST[$menu->getName()];
        // $menuに対して、$orderCountを引数としてsetOrderCountメソッドを呼び出してください
        $menu->setOrderCount($orderCount);
        
      ?>
      <p class="order-amount">
        <?php echo $menu->getName() ?>
        x
        <?php echo $orderCount ?>
        個
      </p>
      
      <p class="order-price"><?php echo $menu->getTotalPrice() ?>円</p>
    <?php endforeach ?>
  </div>
</body>
</html>
```
![イメージ説明](b9aeb2d906cde3781873a2d0cf4da092.png)
![イメージ説明](75412c41eeb4af0dd6c037564d5f459a.png)

追記
『クラスが持つ情報にアクセスする際には必ず「所属」を明示する必要があります』
『メソッドを呼ぶ場合は、常に$obj->method()の形式で書く必要があります。』
上記２つから、必ず、常に所属クラスを明示する必要があるんだなと分かった。
『所属クラスが明示されていない場合は、既に回答があるように何のクラスにも属していない関数を実行します。』
勉強になった。

php $this->をなぜこのコードに必要なのかが理解できないです。

## LINE botを作ろうとしているのですが、その最初であるオウム返しbotが上手く動きません。

bot初心者です。LINE botを作ってみたいと思い、
https://qiita.com/tetrapod117/items/e7b48485c98f6b88f311
上記の記事を読みながら進めていったのですが、上手く動きません。

原因となりそうなものを教えてくださるか、原因箇所の切り分けの仕方を教えていただけるととても嬉しいです。

## 挙動
LINEで友達になってメッセージを送っても、既読がつくのみで何も返信がこない。

## 概要

botの概要としては、botをGoogleAppsScript上で動かして、MessangerAPIからのPOSTを確認して、そのまま返すだけです。

以下のコードをGAS上にペーストし、アクセストークンを書き換えました。

```
//LINE Developersで取得したアクセストークンを入れる
var CHANNEL_ACCESS_TOKEN = 'YOUR_CHANNEL_ACCESS_TOKEN'; 
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';

//ポストで送られてくるので、送られてきたJSONをパース
function doPost(e) {
  var json = JSON.parse(e.postData.contents);

  //返信するためのトークン取得
  var reply_token= json.events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //送られたメッセージ内容を取得
  var message = json.events[0].message.text;  

  // メッセージを返信    
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': [{
        'type': 'text',
        'text': message,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```

## 詳細
- GAS側でアプリケーションにアクセスするユーザは「全員(匿名ユーザを含む)」になっています
- LINE Developers側でWebhookの接続確認を行うと「✔︎成功しました」となります

POSTがされないのか、doPost()が呼ばれていないのか、返答が遅れていないのか、よくわかりません。Loggerも使ってみましたが何も表示されずよくわからず仕舞いです...

## 追加検証(追記)
console.log()等で原因探しを進めてみましたが、StackdriverLoggingの方には、リクエスト失敗のエラーしか出力されません。
```
function doPost(e) {
  console.info("ここまできた");    //出力されてない
  var json = JSON.parse(e.postData.contents);

  //返信するためのトークン取得
  var reply_token= json.events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //送られたメッセージ内容を取得
  var message = json.events[0].message.text;  

  // メッセージを返信    
  var response = UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + access_token,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': [{
        'type': 'text',
        'text': message,
      }],
    }),
  });
  
  // サンプル
  try {
    var rcode = response.getResponseCode();
    var rbody = response.getContentText();
    if (rcode !== 200) {
      console.log("%d: %s", rcode, rbody); //出力されてない
    }
  } catch(e) {
    console.log(e);  //出力されていない
  }
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```
##### 結果
```
https://api.line.me/v2/bot/message/reply のリクエストに失敗しました（エラー: 401）。サーバー応答の一部: {"message":"Authentication failed due to the following reason: accessToken expired(2). Confirm that the access token in the authorization header is...（応答の全文を見るには muteHttpExceptions オプションを使用してください） at doPost(コード:19)
```
アクセストークンは再発行して最新のものに書き換えたので、問題ないと思いますが、何か手がかりがあれば教えていただけると嬉しいです。

LINE bot でおうむ返しができない【初心者】

### 前提・実現したいこと
headerをページの一番上に固定したい。
ここに質問の内容を詳しく書いてください。

HTML&CSSでheaderを固定するためにposition:fixed;を使い、固定することには成功したのですが、headerの下のmain要素がfloatを使った時と同じようにheaderの下に一部潜り込み被ってしまいます。
### 発生している問題・エラーメッセージ

```
要素同士の重なり
```

### 該当のソースコード

```ここに言語名を入力
HTML&CSS
```

### 試したこと
一度position:fixed;を解除すると被らなくなるので、position:fixed;が原因だと思います。


### 補足情報（FW/ツールのバージョンなど）
HTML5とCSS3です。
![イメージ説明](0769ea46e8a711072d89f388f7263363.png)- ![イメージ説明](c0e5af9175e0fdd31fcf146df12062f0.png)
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
	<header>
		<div class="container">
			<div class="header-left">
				<img src="images/isaralogo.png" alt="isara" class="header-logo">
				<p class="h1">バンコクのノマドエンジニア育成講座</p>
			</div>
			<div class="header-right">
				<a href="#">お問い合わせ / 資料請求はこちら</a>
			</div>
		</div>
	</header>
	<div id="wrap">
		<section class="top">
			<p class="text1">プログラミングで</p>
			<p class="text1">人生の安定を手にいれよう</p>
			<img src="images/isaralogolarge.png" alt="isara">
			<p class="text2">バンコクのノマドエンジニア育成講座</p>
			<p class="text2">iSara[イサラ]</p>
		</section>
		
	</div>
</body>
</html>
```
```CSS
@charset "utf-8";

* {
    box-sizing: border-box;
    text-decoration: none;
}
body {
    margin:0;
}
header {
    height:75px;
    width:100%;
    background-color:white;
    position:fixed;
    top:0px;
}
header:after {
    content:"";
    display:block;
    clear:both;
}
.container {
    width:1170px;
    height:75px;
    margin:0 auto;
}
.header-left {
    float:left;
    width:400px;
    height:75px;
}
.header-logo {
    margin-top:17px;
    width:120px;
    float:left;
}
.header-left .h1 {
    margin: 37px 0 0 0;
    font-size: 14px;
    color: #333333;
    font-weight:600;
    letter-spacing: 2px;
}
.header-right {
    float:right;
    width:320px;
    height:45px;
    margin-top:15px;
    background-color: #da6b64;
    border-radius:25px;
}
.header-right a {
    line-height: 45px;
    font-weight:300;
    font-size: 14px;
    text-align:center;
    color:white;
    letter-spacing: 2px;
    display:block;
}
.header-right:hover {
    background-color:#dc143c;
}
```