常連

注目の的

社会貢献

質問力

自己紹介

Node.jsを用いてMicrosoft SQL Serverに接続する方法を探しております。

###### 実現したいこと
Node.jsからlocalhostのデータベース「database_1」のテーブル「table_1」のレコードを全て取得し、コンソールに出力する。

###### 試したこと
以下、内容を実行してみました。
```JavaScript
const tedious = require("../node_modules/tedious");
const connection = new tedious.Connection({
    server: "localhost",
    authentication: {
        type: "default",
        options: {
            userName: "AGadget",
            password: "0123456789"
        },
        database: "database_1"
      }
});
connection.on("connect", (err) => {
    console.log("接続されました!");
    const request = new tedious.Request("SELECT * FROM table_1;", (err, rowCount) => {
        if (err) {
            console.log(err);
        } else {
            console.log(rowCount);
        }
        connection.close();
    });
    request.on("row", (columns) => {
        for (const column of columns) {
            if (column.value === null) {
                console.log("NULL");
            } else {
                console.log(column.value);
            }
        }
    });
    request.on("done", (rowCount) => {
        console.log(rowCount);
    });
});
```

###### 試した結果
「接続されました!」とだけ表示されます。それ以外は一切何も(もちろん、エラーメッセージも)表示されず処理が終了します。

###### 考えていること
「接続されました!」と表示される――つまり、connection.on("connect"); 内の処理が走っているということは、ひとまず接続自体には成功しているということでしょうか?

長くなりましたが、ご回答のほど、よろしくお願いします。

Node.jsでMicrosoft SQL Serverに接続したい

お世話になっております。

###前提・実現したいこと
他のjQueyも読み込んだページにて、
[Minigrid](http://minigrid.js.org/)を使用したパネル状のレイアウトを使用したデザインを作成したいです。

###発生している問題・エラーメッセージ

作成するページにて、[Minigrid](http://minigrid.js.org/)と、
いくつかのjQueryプラグイン（[photoswipe](http://photoswipe.com/)等）を使用するつもりです。

ところが、そのために
`<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">`
を読み込んだところ、Minigridが動作しなくなってしまいました。

-----

```
Uncaught ReferenceError: Velocity is not defined
```
コンソールを叩くと上記のエラーが出る様になります。
jQueryの記述をする前はありませんでした。

-----

↓こちらの記事を参考にしております。
[【JavaScript】カード型レイアウトを簡単に実装できる［Minigrid］の使い方](http://on-ze.com/archives/5234)

下記リンクは、上記リンクのDEMOのコードをそのまま流用したものと、
その流用したコードにjQueryの記述を追加したものです。

[動作するコード](http://codepen.io/mmm-mimo/pen/WpLxVy)

[jQueryの記述を追加したコード](http://codepen.io/mmm-mimo/pen/KWbMOG)

-----


【Velocity.js】を使うのが初めてなので調査不足かもしれませんが、
そもそも【Velocity.js】がjQueryとバッティングを起こしてしまうjsなのでしょうか？

それとも他に原因があるのでしょうか？

【Velocity.js】jQueryを一緒に読み込むとエラーになる

wordpressのプラグインである「mw wp form」を利用しています。

そこで、ログイン中のユーザの情報を取得したいと思い、functions.phpで「mwform_value_mw-wp-form-xxx」でフックしているのですが、できれば複数のフォームで利用出来たらと考えています。

方法としては、フォームのID（フォーム識別子のkey）を取得し、動的に「xxx」の部分を変更できたら良いな、と思っているのですが、できないのでしょうか？

バージョン等は、以下の通りです。
PHP：7.3
WP：5.3
mw wp form：4.2.0

ご存知の方いらっしゃれば、ご教示ください。よろしくお願いいたします。

wordpressのmw wp formでフォーム識別子を動的に取得したい

### 実現したいことと発生している問題
ワードプレスにて会員コンテンツを含むサイトを構築しております。

会員コンテンツの部分となるカスタム投稿タイプブログに対して、
非ログイン状態でアクセスしようとすると、
ログイン画面に移行する仕様を意図しておりますが
ブログ一覧画面と記事詳細画面が普通にアクセスできてしまいます。

今回利用しているプラグインが「WP-Members」というものですが
こちらのプラグインが通常カスタム投稿タイプでは
通常うまく利用できないと記事を見つけ、その改善策も実行してみましたが
それでもうまくいきません。
参照ブログ）
https://raisez.com/blog/wp-members

プログラムがぶつかり合ってうまく機能していないのか
そもそも設定が間違っているのか
原因の調査方法もわからず、お詳しい方にお力をお借りできればと考えております。

### 開発環境
【サーバー】さくらのVPS
【OS】CentOS Linux release 7.5.1804 (Core)
【Apache】Apache/2.4.6 (CentOS)
【php】PHP Version 7.1.20
テンプレート「Llorix One Lite」をベースにカスタマイズして構築しております。

その他利用しているプラグイン
All In One SEO Pack
Content Aware Sidebars
Llorix One Companion
PS Taxonomy Expander
MW WP Form
Custom Post Type Permalinks
Custom Post Type Widgets
PS Auto Sitemap
Redirection
Shortcodes Ultimate
zipaddr-jp


### 設定状況
「WP-Members」の設定画面
![イメージ説明](c1b7f5ceecad1b92be6c5aef85069d26.png)

function.phpの「カスタム投稿タイプ」の情報

```ここに言語を入力
// ===========================
// = カスタム投稿 =
// ===========================
//カスタム投稿タイプの追加
add_action( 'init', 'create_post_type' );
function create_post_type() {
//会員ブログ
register_post_type( 'memberblog',
array(
'label' => '会員ブログ',  // 管理画面の左メニューに表示されるテキスト
'public' => true,  // 投稿タイプをパブリックにするか否か
'has_archive' => true,  // アーカイブを有効にするか否か
'menu_position' => 5,  // 管理画面上でどこに配置するか今回の場合は「投稿」の下に配置
'supports' => array('title','editor','comments'),  // 投稿画面でどのmoduleを使うか的な設定
'rewrite' => array(
'single' => 'menu',
'with_front' => false
)
)
);
//会員イベント
register_post_type( 'memberevent',
array(
'label' => '会員向けセミナー',
'public' => true,
'has_archive' => true,
'menu_position' => 6,
'supports' => $EditorStyle,
'rewrite' => array(
'single' => 'menu',
'with_front' => false
)
)  
);
//会員ブログ-カテゴリ
register_taxonomy(
'memberblog-cat',  // 追加するタクソノミー名（英小文字とアンダースコアのみ）
'memberblog',  // どのカスタム投稿タイプに追加するか
array(
'label' => 'カテゴリー',  // 管理画面上に表示される名前（投稿で言うカテゴリー）
'labels' => array(
'all_items' => 'カテゴリ一覧',  // 投稿画面の右カラムに表示されるテキスト（投稿で言うカテゴリー一覧）
'add_new_item' => 'カテゴリの追加'  // 投稿画面の右カラムに表示されるカテゴリ追加リンク
),
'hierarchical' => true,  // タクソノミーを階層化するか否か（子カテゴリを作れるか否か）
'rewrite' => array(
'single' => 'menu/category',
'with_front' => false
),
'public' => true,
'show_ui' => true
)
);
//会員ブログ-タグ
register_taxonomy(
'memberblog-tag',
'memberblog',
array(
'hierarchical' => false,
'update_count_callback' => '_update_post_term_count',
'label' => 'タグ',
'singular_label' => 'タグ',
'public' => true,
'show_ui' => true
)
);
//会員向けセミナー-カテゴリ
register_taxonomy(
'memberevent-cat',
'memberevent',
array(
'label' => 'カテゴリー',
'labels' => array(
'all_items' => 'カテゴリ一覧',
'add_new_item' => 'カテゴリの追加'
),
'hierarchical' => true,
'rewrite' => array(
'single' => 'menu/category',
'with_front' => false
),
'public' => true,
'show_ui' => true
)
);
//会員向けセミナー-タグ
register_taxonomy(
'memberevent-tag',
'memberevent',
array(
'hierarchical' => false,
'update_count_callback' => '_update_post_term_count',
'label' => 'タグ',
'singular_label' => 'タグ',
'public' => true,
'show_ui' => true
)
);
}
```
function.phpの「カスタム投稿タイプのWP-Members」の情報

```ここに言語を入力
/**
 * Identify your custom post types here.
 */
function my_custom_post_types() {
    $settings = array(
        'memberblog'  => 'block',
        'memberevent' => 'block',
    );
    return $settings;
}
 
// You do not need to change anything after this.
 
add_filter( 'wpmem_block', 'block_custom_post_types' );
function block_custom_post_types( $block ) {
 
    global $post;
    $post_type = get_post_type( $post );
    $my_cpts = my_custom_post_types();
 
    // If this is a single post and it is a defined custom post type.
    if ( is_single() && ( array_key_exists( $post_type, $my_cpts ) ) ) {
 
        // Get the custom post type block definition.
        $cpt_block = ( $my_cpts[ $post_type ] == 'block' ) ? true : false;
 
        // Check for meta overrides.
        $meta = get_post_meta( get_the_ID(), '_wpmem_block', true );
        if( $cpt_block ) { 
            if ( isset( $meta ) && $meta == 0 ) {
                $block = false;
            }
        } else {
            if ( isset( $meta ) && $meta == 1 ) {
                $block = true;
            }
        }
    }
    // Return block value.
    return $block;
}


```
### 【追記】固定ページ一覧のブロック設定
![イメージ説明](0ef71611dc9f0c79e58c85307950fbd0.png)

### 【追記】カスタム投稿記事のブロック設定
![イメージ説明](7b6404110bb6f94da46657ad6774a2cf.png)
![イメージ説明](3b1aa3231f5d1a887c6f3c971d3f74d7.png)

カスタム投稿タイプをWP-Membersで鍵付きにできない。

### 概要

Nuxtのプロジェクト内で以下画像のような画面を作成しています。
ひとまず動作するようにしようと思い、以下コードのように記述したのですが、繰り返しも多くかなりダメなコードになってしまっていると思います。
以下を実現させるために、よりよい書き方等あればと思い質問させていただきました。
どなたかアドバイスいただけますでしょうか。

不足点は以降発見次第追記させていただきます。
どうぞ、よろしくお願いいたします。

### 実現したいこと
**前提条件**
- 各カード(li要素)、コンポーネントにはjsonからIDを取得し、そのIDに応じた要素を表示させる。
- IDの数は増減する可能性がある。

**期待している挙動**
- 各カードをクリックすると、対応したコンポーネント（モーダル）を表示。
- コンポーネントのボタンをクリックすると、コンポーネントを閉じる（非表示）
- コンポーネントのAgreeボタンをクリックすると対応するカードの状態をtrueに変更（それに伴うスタイルの付与）
- 全てのカードの状態がtrueになると、画面下部のボタンをactivate

### サンプル画面
以下実装中のサンプル画面です。
- 各カードをクリックすると、それに対応する子コンポーネントがモーダルとして表示されます。
- モーダル内のボタンをクリックすると、またそれに対応したカードの状態（data）をtrueに変更し、v-ifによる文章の変更及びstyleの付与を行っております。
- 全てのカードの状態がtrueになるとボタンがアクティベートされクリック可能になります（この部分は現在実装している下記コードではid数の増減に対応できていません）

![イメージ説明](b5b68970d043e56b5960719d6e507b70.png)


### 該当のソースコード
各コード、style等不要と思われる部分は消しています。

**親コンポーネント**
以下コードで、特に繰り返しになってしまっている記述についてどうにか省略できないか考えております。
現在はjsonから取得するidを3つに設定しているため、少しすっきりして見えますが、idを10個など取得すると、かなり可読性の悪いコードになってしまっています。

**追記**
だんだん短くなってきました...!
```vue
<template>
  <section class="container">

    
    <agree-document v-if="isShow.id01" @doAgree="closeModal"></agree-document>
    <agree-document2 v-if="isShow.id02" @doAgree="closeModal"></agree-document2>
    <agree-document3 v-if="isShow.id03" @doAgree="closeModal"></agree-document3>

    <div class="wrapper">
        <ul>
　　　　　 
          <li v-for="id in ids" :key="id">

　　　　　　 
            <div v-if="id == id" @click="openModal(id)" class="list__item-link"></div>

　　　　　　 
            <p v-if="id == 'id01'">カード1</p>
            <p v-if="id == 'id02'">カード2</p>
            <p v-if="id == 'id03'">カード3</p>

            <div v-if="id == id">
              <p v-if="!isAgreed[id]">Not agree</p>
              <p v-if="isAgreed[id]" class="isAgreed">Agreed</p>
            </div>

          </li>
        </ul>

        
        <button
          :class="{ isActive: completed }"
        >
          <span>次へ</span>
        </button>
    </div>
  </section>
</template>

<script>
import { request } from "~/data/index"; // 別ファイルで定義したrequest関数を取得

// コンポーネントの読み込み
import AegreDocument from "~/components/AgreeDocument.vue";
import AegreDocument2 from "~/components/AgreeDocument2.vue";
import AegreDocument3 from "~/components/AgreeDocument3.vue";

export default {
  components: {
    AgreeDocument,
    AgreeDocument2,
    AgreeDocument3
  },
  data() {
    return {
      ids: [],
      isShow: {
        id01: false,
        id02: false,
        id03: false
      },
      isAgreed: {
        id01: false,
        id02: false,
        id03: false
      }
    };
  },
  computed: {
    // ここもハードで処理を書いているため、
    completed() {
      return (
        this.isAgreed.id01 &&
        this.isAgreed.id02 &&
        this.isAgreed.id03
      );
    }
  },
  mounted() {
    // 別のjsファイルで作成した関数を使用し、jsonからresponseを取得
    this.$nextTick(() => {
      const params = {};
      request(this.$axios, this.$store, params, this.$router)
        .then(response => {
          this.ids = response.data.ids;
        })
    });
  },
  methods: {
    openModal(id) {
      Object.keys(this.isShow).forEach(key => {
        if (key === id) {
          this.isAgreed[key] = true;
          this.isShow[key] = !this.isShow[key];
        }
      });
    },
    closeModal() {
      Object.keys(this.isShow).forEach(key => {
        if (this.isShow[key] === true) this.isShow[key] = false;
      });
    }
  }
};
</script>

<style scoped>
.list__item-link {
  background-color: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ボタン通常時 */
.btn {
  pointer-events: none;
}
/* ボタンactive時 */
.isActive {
  color: #fff;
  background: blue;
  cursor: pointer;
  pointer-events: auto;
}
/* コンポーネントで同意後にtextの色をactiveにする */
.isAgreed {
  color: red;
}
</style>

```
**取得するjsonファイル**
```json
{
  "data": {
    "ids": [
      "id01",
      "id02",
      "id03"
    ]
  }
}
```
**モーダルとして表示する子コンポーネント**
以下コンポーネントはjsonから取得するidの数だけ作成してあります。
```vue
<template>
  <section>

    <div v-if="id[index] == 'id01'">
      <h1>ID1のタイトル</h1>
    </div>
    <button type="button" class="btn btn-next" @click="doAgree">
      <span class="btn-text">Agree</span>
    </button>

  </section>
</template>

<script>
import { request } from "~/data/index"; // 別ファイルで定義したrequest関数を取得

export default {
  data() {
    return {
      ids: [],
      index: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      const params = {};
      request(this.$axios, this.$store, params, this.$router)
        .then(response => {
          this.ids = response.data.ids})
    });
  },
  methods: {
    // ボタンクリック時に、親コンポーネントのイベントを発火
    doAgree() {
      this.$emit("doAgree");
    }
  }
};
</script>
```

### 補足情報（ツールのバージョン）

"nuxt": "^2.4.2",

Nuxt, Vueで実現したい挙動のコードがかなり冗長になってしまい、アドバイスいただきたいです。

v-forが実行される前にslickが実行されているせいか、カルーセルの要素としてにんしきされておりません。
v-forが完了後にslickが実行される方法はありますでしょうか？

```html
<template>
	<div id="page">
		<div id="contents">
			<slick ref="slick" :options="slickOptions">
				<div class="card-carousel--card" v-for="item in items">
					
					<router-link v-if="listname!='eventers'" v-bind:to="EVENT_DETAIL_PATH+item.url">
						<img :src="item.img">
						<div class="card-carousel--card--footer" style="width:200px">
							<p>{{ item.title }}</p>
						</div>
					</router-link>
					<router-link v-if="listname=='eventers'"  @click="getEventListByOrgnizerId(item.url)" v-bind:to="EVENT_PATH+'?orgnizerId='+item.url">
						<img :src="item.img">
						<div class="card-carousel--card--footer" style="width:200px">
							<p>{{ item.title }}</p>
						</div>
					</router-link>
				</div>
			</slick>
		</div>
		<input type="hidden" id="refresh" value="no">
	</div>
	
</template>
```

```vue
<script>
import Slick from 'vue-slick';

export default {
	props:['listname'],
	components: { Slick },
	data() {
		return {
			slickOptions: {
			slidesToShow: 4,
		},
		currentOffset: 0,
		windowSize: 3,
		paginationFactor: 220,
		items: [

		],
	};
},
  
computed: {
	atEndOfList() {
		return (
			this.currentOffset <=
			this.paginationFactor * -1 * (this.items.length - this.windowSize)
		);
	},
	atHeadOfList() {
		return this.currentOffset === 0;
	}
},
created:function(){
},
mounted:function(){
	console.log(this.listname);
	this.getList(this.listname);
},
methods: {
	getEventListByOrgnizerId(oId) {
		fetch("static/data/EventList.json"+"?orgnizerId="+oId).then(function(response) {
			return response.json();
		}).then(myJson => {
			console.log(myJson);
			// localStorage.events = Object.assign([], JSON.stringify(myJson.events));
			// console.log(JSON.stringify(myJson.events));
			localStorage.setItem('events',JSON.stringify(myJson.events))
			localStorage.setItem('pages',JSON.stringify(myJson.pages))
			this.events = myJson.events;
			this.pages = Number(myJson.pages); 
			// console.log(this.events);
		});
	},
	moveCarousel(direction) {
		// Find a more elegant way to express the :style. consider using props to make it truly generic
		if (direction === 1 && !this.atEndOfList) {
			this.currentOffset -= this.paginationFactor;
		} else if (direction === -1 && !this.atHeadOfList) {
			this.currentOffset += this.paginationFactor;
		}
    },
    
	getList(listname) {
		if(listname=='new'){
			//あなたへのおすすめ
			fetch("static/data/TopEventList.1.json").then(function(response) {
				return response.json();
			}).then(myJson => {
				this.items = myJson.events;
			});
		}else if(listname=='usersNew'){
			//エリアの新着
			fetch("static/data/TopEventList.2.json").then(function(response) {
				return response.json();
			}).then(myJson => {
				this.items = myJson.events;
			});
		}else if(listname=='eventers'){
			//過去参加した主催者のイベント
			fetch("static/data/TopEventList.3.json").then(function(response) {
				return response.json();
			}).then(myJson => {
				this.items = myJson.events;
			});
		}else{
			fetch("static/data/TopEventList.json").then(function(response) {
				return response.json();
			})
			.then(myJson => {
				this.items = myJson.events;
			});
    	}
	},
	next() {
		this.$refs.slick.next();
	},
	prev() {
		this.$refs.slick.prev();
	},
	reInit() {
		// Helpful if you have to deal with v-for to update dynamic lists
		this.$nextTick(() => {
			this.$refs.slick.reSlick();
		});
	},
}
  
};
</script>
```

v-forが完了後にslickを実行したい

```
//検知
  computed: {
    template() {
      return this.template
    }
  },
```

```
//データ
  data() {
    return {
      template: {
        id: 1,
        width: 400,
        height: 500,
        layers: [
          {id: 1, value: "doragon"},
          {id: 2, value: "neko"},
          {id: 3, value: "inu"},
          {id: 4, value: "usagi"},
        ],
      },
    }
  },
```

この様な処理の時に例えば別の関数で

```
setLayers(layer) {
 this.template.layers.push(layer)
}
```
`template`の中の`layers`の中で変更が起きてもこの書き方の`computed`では変更が起きません。
どうすればオブジェクトの中の値変更まで`computed`で検知してくれる様な処理にできますか？

#追記
自分の実装載せます。
```
//親コンポーネント
<template>
  <div class="create">
    <Preview :tmp_template="template"/>
    <image :tmp_template="template" v-model="template" @setTmpTemplate="setTemplate"/>
  </div>
</template>

<script>
export default {
  components: {
    Preview: () => import('@/components/preview.vue'),
    Image: () => import('@/components/image.vue'),
  },
  data() {
    return {
      template: {
        id: "",
        width: 0,
        height: 0,
        layers: [],
      },
    }
  },
  methods: {
    setTemplate(template) {
      this.template = template
    },
  },
}
</script>

```
親コンポーネントで`computed`で検知するデータを作成しています。
```
//子コンポーネント
//Image.vue
<template>
  <div>
    <div v-for="image in layer">
        <el-input v-model="image.value"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tmp_template'],
  computed: {
    layer() {
      return this.tmp_template.layers.filter(function (layer) {
        if(layer.type === 'image') {
          console.log(layer)
          return layer
        }
      })
    }
  },
}
</script>
```
`image.vue`で`Object`の一番下のネストの値を変更しています。

```
//子コンポーネント
//preview.vue
<script>
export default {
  props: ['tmp_template'],
  mounted() {
    this.ctx = this.$el.firstChild.firstElementChild.getContext('2d')
    this.drawCreative()
  },
  computed: {
    template() {
      return this.tmp_template
    }
  },
  watch: {
    template(val) {
      this.drawCreative()
    }
  },
  methods: {
    drawCreative() {
      this.ctx.canvas.width = this.tmp_template.width
      this.ctx.canvas.height = this.tmp_template.height
      this.tmp_template.layers.forEach(layer => {
        this.ctx.fillText(layer.value, layer.x_position, layer.y_position - -10)
      });
    },
  },
}
</script>
```
別の子コンポーネントで`image.vue`で入力して値変更された`tmp_template`を監視しているのですが、検知されません。

【Nuxt.js】computedでオブジェクトの中身まで検知してほしい【vue.js】

## 開発環境
laravel ver5.5
ローカル開発環境 + MariaDB(xampp)

## 実現したいこと
ユーザーフォームから情報を受け付けて既存のデータベースに追加する簡単な名簿アプリをlaravelで作ったので
さらに画像アップロード機能を付ける。

フォームから名前、クラス、所属、アイコン画像をDB登録し、一覧表示できるような仕組みが作りたい。
例：
｜　なんたら　｜　３年生　｜バレーボール　｜　☺　｜

## MVCファイル詳細

**モデル：member.php**
```php
namespace App;
use Illuminate\Database\Eloquent\Model;

class member extends Model
{
    protected $table = 'members';
}
```
**ルーティング：web.php**
```php
Route::get('create', 'PostController@create');
Route::post('create','PostController@Instore');
```
コントローラ：PostController.php
```php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\member;
use App\Http\Requests\PostRequest;
use Illuminate\Support\Facades\Storage;

    public function create()
    {
        return view('create');
    }
    public function Instore(PostRequest $request)
{
        $member = new Member;     
        $member->name = $request->name;
        $member->class = $request->class;
        $member->unit = $request->unit; 
        $member->save();
        return view('store');//store.blade.phpは「投稿が完了しました」を出力するだけ
    }
```
**ビュー：ブレード create.blade.php**
```html
<form method="post" action="create">
      {{ csrf_field() }}
      <div class="form-group">
        <label for="nameInput">名前</label>
        <input type="text" class="form-control" id="nameInput" name="name">
        @if($errors->has('name'))
        <p class="text-danger">{{  $errors->first('name') }}</p>@endif

        <label for="classInput">クラス</label>
        <select name="class" class="form-control" id="classInput">
            <option value="3">3年生</option>
            <option value="2">2年生</option>
            <option value="1">1年生</option>
        </select>

        <label for="unitInput">所属クラブ（あれば）</label>
        <input type="text" class="form-control" id="unitInput" name="unit">
        @if($errors->has('unit'))
        <p class="text-danger">{{  $errors->first('unit') }}</p>@endif
      </div>

        <label for="imageInput">画像</label>
        <input type="file" enctype="multipart/form-data" class="form-control" id="imageInput" name="images">        

    <button type="submit" class="btn btn-primary" role="modal" data-target="#CreateModal">新規追加</button>
    </form>
```

**マイグレーションファイル：DBテーブル**
```php
    public function up()
    {
        Schema::create('members', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('class');
            $table->string('unit');
            $table->timestamps();
            $table->string('image');
        });
    }
```
### 試してみたこと

公式ドキュメントによるとファイルアップロードされた画像を保存するにはstoreメソッドを呼び出すと書かれていたので
PostController.phpに以下を記述してみました。
```php
$request->file('image')ｰ>store('images');
```
ところが、submitボタンを押すと
**Call to a member function store() on null**
とエラーが返されました。これデータが何も入っていないのに呼び出そうとしたから怒られた？

### 終わりに
フォームから画像ファイルをアップロードし、保存するにはどのような仕組みで実現しているのでしょうか？
laravel始めたばかりなのでお手柔らかにお願いします。

laravelでファイルアップロード機能を作りたい

### 前提・実現したいこと
Macにbrew installしたmysql Version5.7 rootパスワードが分からないので[リンク内容](https://qiita.com/bohebohechan/items/bc24c6cb5ea7c8a4b255)を参考に
MySQLプロセス終了
```
$ mysql.server stop

Shutting down MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/xxxxxxxMacBook-Pro.local.pid).
```
権限がなくて落ちているらしい情報を見つけたので
```ここに言語を入力
$ sudo chown -R _mysql:_mysql /usr/local/var/mysql
```

＄sudo mysql.server startで確認
Starting MySQL
 SUCCESS!
2018-03-21T02:03:20.6NZ mysqld_safe A mysqld process already exists（既に存在してる？？）
SUCCESS!したので上記のMySQLプロセス終了からやり直し



### 発生している問題・エラーメッセージ

```
$ mysql.server stop

touch: /usr/local/var/mysql/xxxxxxxMacBook-Pro.local.pid.shutdown: Permission denied
cat: /usr/local/var/mysql/xxxxxxxMacBook-Pro.local.pid: Permission denied
 ERROR! MySQL server process # is not running!
override rw-r-----  _mysql/_mysql for /usr/local/var/mysql/xxxxxxxxMacBook-Pro.local.pid?

Telemetry Consent
10 files14 updates

```
これはyで進めていいんでしょうか？
宜しくお願いします。





### 補足情報（FW/ツールのバージョンなど）
homebrew のインストール

MySQL のインストール
brew install mysql
brew tap homebrew/services
brew services start mysql

rbenv のインストール
ruby 2.4.1 のインストール

MySQLの root ユーザーのパスワード設定したい

私はWordpressもphpも初心者で練習中です。
今は練習でサイトを作っています。

実装したいのは、
「キーワード、カテゴリ、タグ１、タグ２の３つの条件にAND条件でヒットする記事を表示する」
ためのsearchform.phpです。

初心者向けのサイトを見ながら、searchform.phpを以下のように記述しました。

```php
<form method="get" action="<?php bloginfo( 'url' ); ?>">
	<input name="s" id="s" type="text" placeholder="キーワードを入力"/><br /><br />

	<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=▽カテゴリーを選択&include=3,122'); ?>

	<?php $tags = get_tags('include=6,7,8,9,10,11,12,13,20'); if ( $tags ) : ?>
 	<input type="hidden" name="and-or" value="AND"> / * ◆追加◆ * /
	<select name='tag[]' id='tag1'> / * ◆変更◆ * /
	<option value="" selected="selected">▽タグ１を選択</option>
	<?php foreach ( $tags as $tag ): ?>
	<option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
	<?php endforeach; ?>
	</select>
	<?php endif; ?>	

	<?php $tags = get_tags('exclude=6,7,8,9,10,11,12,13,20'); if ( $tags ) : ?>
        <input type="hidden" name="and-or" value="AND"> / * ◆追加◆ * /
	<select name='tag[]' id='tag2'> / * ◆変更◆ * /
	<option value="" selected="selected">▽タグ２を選択</option>
	<?php foreach ( $tags as $tag ): ?>
	<option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
	<?php endforeach; ?>
	</select>
	<?php endif; ?><br />	
	
	<input id="submit" type="submit" value="検索" />	

</form>
```

上記の記述でできた検索フォームですと、タグ１が検索結果に反映されません。
検索結果画面のURLを見ると、
> ～～/?s=&cat=0&tag=tag1&tag=tag2

のようになっており、カテゴリIDが0でタグにtag2を持つ記事が一覧表示されます。
期待しているのは、カテゴリIDが0、タグにtag1とtag2を持つ記事の一覧表示です。

末尾が tag=tag1+tag2 になれば私が求める結果が得られると考えていますが、実装方法がわかりません。

ご教授いただけますと幸いです。
宜しくお願い致します。

Wordpress でphpを使って複数タグのand検索の実装

表題の通り、Vuejsの親→子Componentへのprop渡しをオブジェクトで渡す方法を知りたいです。
多くのサンプルは"parantMsg"などの簡易的なメッセージしかなく困っております。
また公式マニュアルを見ても十分理解できなかったため、何卒ご教示頂ければ幸いです。

※parentObjを1.child.vueへ渡す方法と2.child.vueで受け取る方法が知りたいです。(今回は仮にfather_idとmother_idがあると仮定します)

parant.vue
```
<template>
  <div class="parent">
    <parent v-for="parent in parentObj" :fatherId="parent.father_id"></parent>
  </div>
</template>

<script>
import child from './child.vue';

export default {
    name: 'children',
    components: {
       child
    },
    data: function() {
        return {
            parentObj : [],
        }
    },
    created: function() {
      axios.get('/api/parent/')
      .
      .
      .
    }
}
</script>
```
child.vue
```
<template>
  <div class="child">
    {{fatherId}}
  </div>
</template>

<script>

export default {
    props: ['userId']
}
</script>

```

vuejsの親→子へのprop渡しをオブジェクトで行う方法が知りたいです

毎度お世話になっています。
jqueryを勉強中に気になったことがあったのと、検索をかけても満足を得るほどの回答がなかったので質問させていただきたいです。

jqueryで、たとえばtabのコンテンツを作っている時に、ブラウザの動作を止める際に

JqueryObject.click(function(e){
 
       e.preventDefault();
}
とする、というのは分かりました。
しかし、まずこのeとはなにか。急にどこから出てきたのか、と思い、検索をかけたところこれが色々なデータを有したjqueryのオブジェクト型のデータである、ということは分かりました。

ただ、クリックした要素であるのならば$(this)のようなものや、それの子孫などの要素ならばそこからfindメソッドを使えば見つけることはできるのでは、と頭をよぎり出して、この二つはどういう違いがあるのか！？と分からなくなりました。console.logでしらべると同じ値で出てきたのでますます分かっていない状態です。 どなたか教えていただけると助かります。

イベントハンドラの引数eと、$(this)の違いについて。

newsサイトを作っています。
記事の更新しやすさを考慮して、外部のjsonファイルでデータを管理したいです。

下記のJSONファイルを用意しましたが、
javascript/jqueryを使い、どのようにしてHTMLを生成するかが分かりません。

```JSON
[
 {    "href": "/news/01.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月10日",
      "title": "タイトルが入ります①タイトルが入ります①タイトルが入ります①",
      "copy": "キャッチコピーが入ります①キャッチコピーが入ります①",
      "source": "出典①"
    },
    { "href": "/news/02.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月20日",
      "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②",
      "copy": "キャッチコピーが入ります②キャッチコピーが入ります②",
      "source": "出典②"
    },
    { "href": "/news/03.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月30日",
      "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②",
      "copy": "キャッチコピーが入ります③キャッチコピーが入ります③",
      "source": "出典③"
    }
]
```
下記のようにHTMLを生成したいです。
```HTML
<div id="headline_contents" class="headline_contents">
<ul>

<li>
<a href="/news/01.html">
<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
<div class="data">
<p class="date">2017年09月10日</p>
<p class="title">タイトルが入ります①タイトルが入ります①タイトルが入ります①</p>
<p class="copy">キャッチコピーが入ります①キャッチコピーが入ります①</p>
<p class="source">出典①</p>
</div>
</a>
</li>

<li>
<a href="/news/02.html" target="_blank">
<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
<div class="data">
<p class="date">2017年09月20日</p>
<p class="title">タイトルが入ります②タイトルが入ります②タイトルが入ります②</p>
<p class="copy">キャッチコピーが入ります②キャッチコピーが入ります②</p>
<p class="source">出典②</p>
</div>
</a>
</li>

<li>
<a href="/news/03.html">
<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
<div class="data">
<p class="date">2017年09月30日</p>
<p class="title">タイトルが入ります③タイトルが入ります③タイトルが入ります③</p>
<p class="copy">キャッチコピーが入ります③キャッチコピーが入ります③</p>
<p class="source">出典③</p>
</div>
</a>
</li>

</ul>
</div>
```
下記のjsを書いて<a>タグのリンクのみ取得できないかテストで試しておりますが、
jsonからデータを取得できず、特にエラーも出ず、対処法がわからず困っております。
解決方法をご教授いただければと思います。
よろしくお願いいたします。

```js
$(document).ready(function () {
    $.getJSON("news.json", function(data){
        for(var i in data){
        $("#headline_contents").append("<ul>").append('<li><a href="' + data[i].href + '">')
        }
    });
});
```

JSONファイルからHTML生成したい

###前提・実現したいこと
CakePHP3でUpload Plugin 3.0を使って画像もしくは動画をアップロードしたいと思っています。
下の公式ドキュメントを参照しながら作っています。
http://cakephp-upload.readthedocs.io/en/latest/

Basic Exampleのように、既存テーブルにphoto,photo_dirのカラムを追加して、
画像ファイルをアップロードしたいです。
http://cakephp-upload.readthedocs.io/en/latest/examples.html#basic-example

###発生している問題・エラーメッセージ
プラグインのロードはできています。
ビヘイビアを登録したコントローラや、addアクションを実行してもエラーメッセージなどは表示されず、
保存されたというメッセージは出力されます。

しかし、実際に作成されたエンティティのphoto,photo_dirフィールドはnullのままで、ルートを設定したディレクトリにもファイルがアップロードされていません。

【追記】
StoreArticlesController.php
```
    public function add()
    {
        $storeArticle = $this->StoreArticles->newEntity();
        if ($this->request->is('post')) {
            $storeArticle = $this->StoreArticles->patchEntity($storeArticle, $this->request->data);
            if ($this->StoreArticles->save($storeArticle)) {
                $this->Flash->success(__($this->request->data));
                return $this->redirect(['action' => 'index']);
            }
            $this->Flash->error(__('The store article could not be saved. Please, try again.'));
        }
        $this->set(compact('storeArticle'));
        $this->set('_serialize', ['storeArticle']);
    }
```
StoreArticlesTable.php
```
    public function initialize(array $config)
    {
        parent::initialize($config);

        $this->table('store_articles');
        $this->displayField('title');
        $this->primaryKey('id');
        $this->addBehavior('Josegonzalez/Upload.Upload', [
          'photo' => [
            'path' => WWW_ROOT.'files{DS}{model}{DS}{field}{DS}',
            'fields' => [
              'dir' => 'photo_dir'
            ]
          ]
        ]);
    }
```
add.ctp
```
    <?= $this->Form->create($storeArticle) ?>
    <fieldset>
        <legend><?= __('新規投稿') ?></legend>
        <?php
            echo $this->Form->input('start', ['empty' => true, 'label' => '掲載開始時間']);
            echo $this->Form->input('title', ['label' => 'タイトル']);
            echo $this->Form->input('body', ['label' => '本文']);
            echo $this->Form->input('photo', ['type' => 'file', 'label' => '画像']);
            echo $this->Form->input('photo_dir', ['type' => 'hidden']);
        ?>
            <script>
                CKEDITOR.replace( 'body' );
            </script>
    </fieldset>
    <?= $this->Form->button(__('投稿')) ?>
    <?= $this->Form->end() ?>
```
DBテーブル
```
CREATE TABLE store_articles (
  id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  start DATETIME,
  title VARCHAR(64) NOT NULL,
  photo varchar(255),
  photo_dir varchar(255),
  body TEXT NOT NULL
);
```

期待する保存先ディレクトリ
webroot/files/StoreArticle/photo/以下

手順は公式ドキュメント通りに踏んでいます。
apacheの作成権限も与えてあり、問題になる部分がわからない次第です。
原因になりそうな部分がありましたら教えていただきたいです。

必要な追加情報あればよろしくお願いいたします。

【追記】
保存されない原因のこころあたりとして、もうひとつ、store_articlesのテーブル構造をmysqlのコマンドライン上でALTER TABLEを用いてphotoとphoto_dirのフィールドを追加しました。
これに伴ってdebug_kitのchacheの部分からキャッシュを削除しましたが、テーブル構造の変更がUpload Plugin 3.0の認識されていない可能性があるのかも？と思います。そのようなケースはありますか？


###補足情報(言語/FW/ツール等のバージョンなど)
Upload Plugin 3.0はPackagistの最新版
composer require josegonzalez/cakephp-upload
```
PHP 5.6.30 (cli) (built: Jan 19 2017 08:09:42) 
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies
    with Xdebug v2.5.0, Copyright (c) 2002-2016, by Derick Rethans
```
```
mysql  Ver 14.14 Distrib 5.6.35, for Linux (x86_64) using  EditLine wrapper
```
CakePHP 3.3.12
Vagrant、Apache(httpd)上で起動

CakePHP3でUpload Plugin 3.0を使ってファイルがアップロードできない

このようなテーブル構成だった時の
メディアごとのpriceの合計を取りたいのですが、階層が深くなるのを改善したいです。

テーブル定義
-- Media -- 
id 1,2
name メディアA,メディアB

-- Client --
id 1,2,3,4
media_id 1,2,1,2
name A会社,B会社,C会社,D会社
price 100,200,300,400

MediaはhasManyでClientとつながっています
ClientはbelongsToでMediaとつながっています

最終的に取りたい形は
{
 id 1
 name メディアA
 total_price 400
},
{
 id 2
 name メディアB
 total_price 600
},

メディアごとのpriceを取得しようとしているのですが、
total_priceがものすごく階層が深い場所にあり使いにくいです。

$medias = $this->Medias->find()->contain([
                'Clients'=> function ($q) {
                    $sum = $q->func()->sum('price');
                    return $q
                        ->select(['Clients.id','Clients.media_id', 'total_price' => $sum])
                        ->group('Clients.media_id');
                }]);

結果は、
medias {
	id
	name
	clients {
		id,
		media_id,
		total_price xxxx
	}
}

total_priceを階層トップにして取得したいのですが出来ません。

Cakephp3のcontainで子を取得する時階層が深くなる

例えば一般的なブログのシステムを想像していただければわかりやすいかと思いますが、
個々の記事には複数のコメントがついておりこのコメントを投稿順や新着順、評価順などでソートしたいと考えています。
記事に対してコメントをアソシエーションでJOINさせた上でコメントをソートする方法を教えていただきたいと思っております。

参考ページ
https://book.cakephp.org/3.0/ja/controllers/components/pagination.html#join

CakePHP3でページネーションのやり方がわかりません

開発環境(xamppなど)でのみ行いたい処理があります。



###試したこと
「$_SERVER['SERVER_NAME']がlocalhostであれば」
という条件で試しましたが、xamppのデフォルト設定以外の環境で動作しないため没にしました。



###補足情報
php5.2以降で動作させたいです


###追記
たくさんのご回答ありがとうございました
以下の処理にて解決しました！
```php
$S_AD = $_SERVER['SERVER_ADDR'];
$R_AD = $_SERVER['REMOTE_ADDR'];

//ローカルじゃなかったら
if(substr($S_AD,0,mb_strrpos($S_AD,'.')) != substr($R_AD,0,mb_strrpos($R_AD,'.')))
exit('
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>このサーバーではご利用できません</title>
</head>
<body>
	<h1>このサーバーではご利用できません</h1>
</body>
</html>
');
```

PHPでローカルサーバーかを判定する

jQueryを主に使ってWebサイトの動きをごにょごにょしているのですが、
レスポンシブデザインでスマホ、タブレット、pcで用いるjQueryを切りたいと考えています！
今回の場合は、pcではlightbox(featherlight.js)で表示していた要素を、スマホではタブ切り替え(生jQueryもしくは何かプラグイン)で表示できるようにしようと思っています。

この際の、**jsを切り替えるベストな方法を教えてくださると助かります。**

ちなみに自分なりに調べたものとしては
- $(window).on('load resize')でwindowのwidthによって切り替える。
- window.matchMediaをつかってwidthによって切り替える。
- window.userAgent.indexOf('iPhone')をつかってユーザーエージェントによって切り替える
などがありました。

$(window).on('load resize')で過去に切り替えたことがあるのですが、
ぎこちなかったり、すこし挙動が出たりして
(#追記：確実にこれのせいとは言えませんが、画面サイズ変更時に2重に読み込まれるのかも。)

どの方法がいいのか迷っております。

もちろん状況に応じて変わるとも思いますし、
$(window).on('load resize')は画面サイズ変更ごとにjsが動いてしまう。iphoneを横に使用した場合の対応。
matchMediaはIE9以下未対応、
useAgentは対応する個体数が多くなるにつれて大変などあるかと思いますが、
**これがおすすめ。これ使うならこうしたほうがいいよ。他にもっといい方法があるよ。や、気をつけるべき点などがあれば教えていただけると助かります。**

レスポンシブにおけるjs(jQuery)の切り替えについて

#環境
・CakePHP3
・MySQL
・開発環境（Mac）

#知りたい事
・アップロードした画像を指定したフォルダに移動
・画像のファイル名をデータベースに追加

#プログラムの内容
```PHP
#add.ctp
echo $this->Form->file('hogeimg');
```
```PHP
#HogesController.php
$fileName = $this->request->data['hogeimg']["tmp_name"];
move_uploaded_file($fileName['tmp_name'],'../webroot/hogeimg/'.$fileName['name']);
```
#エラー文
Illegal string offset 'tmp_name' [APP/Controller/HogesController.php, line 59
Illegal string offset 'name' [APP/Controller/HogesController.php, line 59
#補足
アップロードした画像は送れているようです。
debug($this->request->data);とすると、画像情報は以下で受け取れているようです。
```PHP
'hogeimg' => [
		'name' => 'snoohnoghoeu.png',
		'type' => 'image/png',
		'tmp_name' => '/private/var/tmp/phpeTjpiQ',
		'error' => (int) 0,
		'size' => (int) 166127
	]
```
どうしたら、../webroot/hogeimg/のフォルダの中に画像を移動できますか？
パーミッションは変更済みです。

CakePHPでアップロードした画像を指定したフォルダに移動＆データベースにファイル名を保存したい

###前提・実現したいこと
[このサイト](http://coolwebwindow.com/jquery-lab/archives/494)のようなことを実装したいと思い、
HTMLやjavascriptを用いて実装を行いました。
ページAにlistを並べ、それぞれ#aaa,#bbb,#cccのアンカーを設定しました。
ページAのlistが押されるとページBのアコーディオンメニューが開かれるようになっています。
別ページからアコーディオンメニューが開かれたときに表示位置はwindowのトップ位置になっているのですが、少し下にずらして表示をさせたく思っております。
下記にソースコードを記載しておりますので、ご助力をいただければと思います。

###発生している問題・エラーメッセージ
javascriptの知識が浅く、scrollTopを用いればできるのではないかと思っているのですが、動作がうまくいかず、表示位置もwindowのトップ位置のままとなっております。
トップから80px程下にずらしたいため
$('html,body').scrollTop($(location.hash).offset().top) - 80;をjavascriptに記入しておりますが、動作しておりません。

###該当のソースコード
↓ページA
```html
<div id="listarray">
    <ul id="listbox">
		<li><a href="B.html#aaa"><img src="/images/aaa.jpg"></a></li>
		<li><a href="B.html#bbb"><img src="/images/bbb.jpg"></a></li>
		<li><a href="B.html#ccc"><img src="/images/ccc.jpg"></a></li>
	</ul>
</div>
```
↓ページB
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script>	
$(function(){
    // 別ページから開閉パネルを開く
    $(location.hash).children('.subInner').slideToggle();
    $('html,body').scrollTop($(location.hash).offset().top) - 80;

  // アコーディオンの表示位置をwindowのトップから80px下にずらしたい
    $(location.hash).find('h4 span').toggleClass('open');

    // #で始まるアンカーをクリックした場合に処理
    $('.menu a[href^=#]').on('click', function() {
        // スムーススクロール
        var speed = 400;// ミリ秒
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - 80;
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        // 開閉パネルが閉じていたら
        if($(href).children('.subInner').css('display') == 'none'){
            // 同時に開閉イベントを実行
            $(href).children('h4').trigger('click');
        }
        return false;
    });
});
</script>
<style>
.wrap {
    width:800px;
    margin:0 auto;
}

.menu {
    margin:0;
    padding:0;
}

.menu li {
    float:left;
    margin-right:10px;
    list-style:none;
}

.menu li a {
    display:block;
    padding:10px 20px;
    color:#fff;
    background:#000;
    cursor:pointer;
}

.subInner {
    display:none;
    padding:10px;
    background:#f19c75;
}

.subContent h4 {
    margin:10px 0;
    padding:10px;
    line-height:20px;
    color:#fff;
    background:#000;
    cursor:pointer;
}

.subContent h4 span {
    display: block;
    background:url('images/arrow.png') 100% 0% no-repeat;
}

.subContent h4 span.open {
    background:url('images/arrow.png') 100% 100% no-repeat;
}
</style>
<title>HTML5サンプル</title>
</head>
<body>
<div class="wrap">
    <ul class="menu">
        <li><a href="#sub01">ボタン1</a></li>
        <li><a href="#sub02">ボタン2</a></li>
        <li><a href="#sub03">ボタン3</a></li>
        <li><a href="#sub04">ボタン4</a></li>
    </ul>

    <br>・・・

    <div id="aaa" class="subContent">
        <h4><span>項目1</span></h4>
        <div class="subInner">
            内容内容内容<br><br><br><br><br><br><br>
        </div>
    </div>

    <div id="bbb" class="subContent">
        <h4><span>項目2</span></h4>
        <div class="subInner">
            内容内容内容<br><br><br><br><br><br><br>
        </div>
    </div>

    <div id="ccc" class="subContent">
        <h4><span>項目3</span></h4>
        <div class="subInner">
            内容内容内容<br><br><br><br><br><br><br>
        </div>
    </div>
</div>
</body>
</html>
```