常連

注目の的

社会貢献

回答者

ベストアンサー

拍手喝采

自己紹介

###商品登録データベースを作成したいと思っております。
商品画像データをデーターベースに登録したいと思い、
初心者ながらgoogleで色々調べてみたところ、
データ型を「mediumblob」にすると画像を保存できるという記事を見かけましたが、
基本的にデーターベースには画像を保存しないほうがいいというご意見もありました。
普通は画像のパスをデーターベースに保存する、という意見でした。

基本的にはどちらが良いのでしょうか？
（データーベースに負荷を与えない画像保存？）

皆様のご意見をお聞かせください。

宜しくお願い致します。

データベースに画像を保存するのはありでしょうか？

配列をhtmlに表示させることはできたのですが、表示させた項目が多いので、ページネーションをさせてユーザビリティをよくしたいです。

###html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script type="text/javascript" src="js.js"></script>
<title></title>
<style type="text/css">
	div.listArea {
		width: 630px;
	}
	div.list {
		overflow: hidden;
	}
	div.list div {
		width: 200px;
		float: left;
		background-color: #ccc;
		margin-top: 10px;
		margin-left: 10px;
		box-sizing: border-box;
	}
</style>
</head>
<body>
<div class="listArea">
    <div class="list"></ul>    
</div>
</body>
</html>
```

###js(ファイル名：js.js)
```javascript
$(function() {
var allList = [
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"},
{name:"名前",adress:"住所",adress2:"住所2"}
]; 
    function init() { 
        refleshHtml(allList);
    }
    function refleshHtml(list) {
        var outputHtml = '';
        if (list.length > 0) {
            _.each(list, function(line, i) {
                outputHtml += '<div>';
                outputHtml += '<p>'+line.name+'</p>';
                outputHtml += '<p>'+line.adress+'</p>';
                outputHtml += '<p>'+line.adress2+'</p>';  
                outputHtml += '</div>';             
            });
        } 
        $('.list').html(outputHtml); 
    }
    init();
});
```

今後のためにもプラグインは使用しないでやってみたいと思います。
分かる方いたらご教授お願いします。

【Jquery】【Underscore】で書いた配列に対してページネーションをしたい！

以下のような形で書いた場合にaaaの右側、縦線の上の部分と下の部分を削りたい（線の長さを変えたい）のですが、
どのようにすれば実現できるでしょうか？beforeやafterを使いますか。

<ul style="list-style:none;">
<li style="float:left;width:50px;border-right:1px solid;">aaa</li>
<li style="float:left;width:50px;">bbb</li>
</ul>

縦線の上と下の部分を削りたい

###前提・実現したいこと
・カルーセル表示には[slick.js](http://kenwheeler.github.io/slick/)を使用している
・SPレイアウト（639px以下）ではアコーディオンパネルの中でカレンダーをカルーセル表示で見せる
・PCではアコーディオンなし／カルーセル表示なし
・ブラウザをリサイズしても上記表示を正常に切り替える

###発生している問題・エラーメッセージ
・ブラウザをリサイズした後アコーディオンを開くと、エラーが出てslick.jsの初期化が正しく行われない
![エラー時のコンソール](34c886f0821ae0aef85a54cc3b0ee960.png)

###該当のソースコード
```HTML
<div class="js-accordion">
	<div class="js-acrTitle">アコーディオン開閉ボタン</div>
	<div class="item js-acrBody">
		<div class="jy-calendar" data-month="9">
			<div class="cal">
				<table>省略</table>
			</div>
		</div>
	</div>
</div>
```

```JavaScript
//load
$(window).on('load', function(){
	accordionPanel01(); //アコーディオン開閉（※slick初期化含む）
});

//resize
var timer = false;
$(window).resize(function() {
	if (timer !== false) {
		clearTimeout(timer);
	}
	timer = setTimeout(function() {
		resetAccordionPane01(); //アコーディオン表示リセット
		initCalendar(); //カレンダー初期化（※slick初期化含む）
	}, 200);
});

/* カレンダー初期化処理
-------------------------------------------------- */
function initCalendar(){
	var $cal = $(".jy-calendar");
	var d = new Date(); //日時情報を取得
	var month = String(d.getMonth()+1); //当月を取得して文字列に変換
	var w = $(window).width();
	var size = 639;
	
	$cal.each(function(){
		var calMonthText = $(this).data("month"); //掲載月データを取得
		var calArray = String(calMonthText).split(","); //掲載月データを配列に変換
		var num = $.inArray(month, calArray); //当月が何番目にあるかを取得
		if(num < 0){
			num = 0; //当月が無かったら最初の月
		}
		if (w <= size) {
			$(this).slick({ //slick初期化
				initialSlide: num //当月をスライドの1番目に設定
			});			
		} else {
			$(this).unslick(); //slickを解除	
		}		
	});	
}

/* アコーディオン開閉処理
-------------------------------------------------- */
function accordionPanel01() {
	$(".js-acrTitle").each(function(){
		$(this).click(function(){

		var $eventTarget = $(this);
		
		if($(this).hasClass("op")){ //既にアコーディオンが開いている時の処理
			$(this).removeClass("op");
			$(this).next().stop().slideUp(400, function () {
				return;
			});
		}else{ //アコーディオンが閉じている時の処理
			$(this).addClass("op");
			 if($eventTarget.next().has(".jy-calendar")){ //アコーディオンの中にカレンダーがあったら
				$eventTarget.next().find(".jy-calendar").slickSetOption(null, null, true); //slickの表示をリフレッシュ★ここでエラーが出る
				}
     	 	});
		}
			
		});
	});
}

/* リサイズされた場合のアコーディオン表示処理
-------------------------------------------------- */
function resetAccordionPane01() {
	var w = $(window).width();
	var size = 639;
	
	$(".js-accordion").each(function(){
		if (w <= size) { //SPの時
			var display = $(this).find(".js-acrBody").css("display");
			if(display == "block"){//アコーディオンが開いていたら
				$(this).find(".js-acrTitle").addClass("op"); //開閉アイコンの状態を設定
			}
		} else { //PCの時
			//強制的にパネルを開く
			$(this).find(".js-acrBody").show(); 
			$(this).find(".js-acrTitle").removeClass("op"); 
		}		
	});
}	

```

###試したこと
最初はどういう状態だとうまく表示されないのか分からなかったので、エラーが再現されるタイミングを特定するためにコンソールの状態を確かめながらいろいろ試しました。  

・初期表示の状態で開閉 →問題なし
・アコーディオンを開いた状態でリサイズ後、開閉 →問題なし
・アコーディオンを閉じた状態でリサイズ後、開閉 →エラーでslickが正しく表示されない
・おかしくなった状態で再読み込みした後、開閉 →問題なし

というところまでは突き止めました。
リサイズ後、アコーディオンを開こうとすると、

`Uncaught TypeError: Cannot read property 'removeClass' of null`

というエラーが出て、slickのリフレッシュをしている箇所のコードがコケるようです。

`if($eventTarget.next().has(".jy-calendar")){...}`のif文を取ってみても変わりません。

カレンダー入りのアコーディオンはページ内に複数ありますが、1つにしてみても変化なしです。

ここからどうやってバグの原因を突き止めたら良いのか分からず、完全に行き詰まってしまいました。。。
どこかロジックがおかしいところや、エラーの原因になりそうなところが無いか、どなたかお助けいただけますと助かります。。。m(_ _)m


###補足情報
MacのChromeとFirefoxでは確認していますがどちらも同じです。
その他不足情報等ありましたらご連絡ください。

アコーディオンの中のslick.jsが正常に初期化されない

以下のような連想配列がありますが、date とidが同じ個所のhours を加算するにはどう記述しればいいでしょう。ご教示お願いします。

```
    var data ={

        "data1":{
        	"date":"2016-09-01",
        	"id": "ID1",
        	"hours":"1", 
        },
        "data2":{
        	"date":"2016-09-01",
        	"id": "ID1",
        	"hours":"2", 
        },
        "data3":{
        	"date":"2016-09-01",
        	"id": "ID2",
        	"hours":"3", 
        },
        "data4":{
        	"date":"2016-09-01",
        	"id": "ID2",
        	"hours":"4", 
        },
        "data5":{
        	"date":"2016-09-02",
        	"id": "ID1",
        	"hours":"5", 
        },
        "data6":{
        	"date":"2016-09-02",
        	"id": "ID2",
        	"hours":"6", 
        },

    };

for(key in data){
	document.write(key+":<br>");
	document.write("================<br>");
	for (key2 in data[key]){

 	 document.write(key2 + ":" + data[key][key2] + "<br>");

	}
	document.write("================<br>);


}
```

JavaScript 連想配列 一部加算

お世話になっております。
[この質問](https://teratail.com/questions/16032)と関連する内容になるのですが、
JqueryUIのdatepickerを使って祝日を表示した上で、
複数選択ができるようにしたいと思っています。
複数選択のサンプルを拡張して、祝日の表示を試みているのですが、
どなたかよい実装方法をご教授願えませんでしょうか。
```
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
<style>
/* カレンダーのstyleを整える*/
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;
}
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month {
    width: auto;
}
.ui-datepicker select.ui-datepicker-month {
    margin-left: 1em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://g.0-oo.net/gcalendar-holidays.js"></script>
<script>
var current_year = null; // 表示されている年
var current_month = null; // 表示されている月
var selected_date = []; // 選択した年月日
var holidays;
$(function(){
	GCalHolidays.get(show, undefined, undefined);
	
});
function show(holidays) {
	datepick(holidays);
}
function datepick(holidays){
	var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    $('#datepicker').datepicker({
    	beforeShowDay: function(date){
    			
    			for ( j in holidays) {
    				if(date.getFullYear == holidays[j].year && date.getMonth == holidays[j].month && date.getDate==holidays[j].date){
                		
                		return [false, '', ''];
                	}else{
                		
                	}
                }
                return [true, '', ''];
		},
	prevText: '前月',
    nextText: '次月',
	yearSuffix: "年",
	monthNames: months,
    monthNamesShort: months,
	showMonthAfterYear: true,
	dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
	dateFormat: 'yy-mm-dd',
	onSelect: function( select_date ){
            // selected_dateに入ってない場合は入れる。入ってる場合は削除。
            var index=$.inArray(select_date,selected_date)
            if ( index == -1 ) {
                selected_date.push(select_date)
            }
            else {
                delete selected_date[index];
            }
 
            setTimeout( function(){
                for ( i in selected_date) {
                    var data = selected_date[i].split('-');
                    var year = data[0];
                    // 年が違う
                    if ( year != current_year ){ continue }
                    var month = data[1];
                    // 月が違う
                    if ( month != current_month ) { continue }
                    var day = data[2] * 1;
 
                    // 日を探して色をつける
                    $('.ui-datepicker-calendar a').each(function(){
                        var $this = $(this);
                        if ( $this.text() == day ) {
                            $this.parent('td').css('background-color','#F00');
                        }
                    });
                }
            }, 100);
        },
        onChangeMonthYear: function( year, month ) {
            current_year = year;
            current_month = month;
 
            setTimeout( function(){
                for ( i in selected_date ) {
                    var data = i.split('-');
                    var year = data[0];
                    if ( year != current_year ){ continue }
                    var month = data[1];
                    if ( month != current_month ) { continue }
                    var day = data[2] * 1;
 
                    $('.ui-datepicker-calendar a').each(function(){
                        var $this = $(this);
                        if ( $this.text() == day ) {
                            $this.parent('td').css('background-color','#F00');
                        }
                    });
                }
            }, 100);
        }
    });
 
    // current_year,current_monthを初期化
    var current = $.datepicker.formatDate('yy-mm-dd', $('#datepicker').datepicker('getDate') );
    if ( !current_year ) {
       var data = current.split('-');
        current_year = data[0];
        current_month = data[1] * 1;
    }
}
</script>
</head>
<body>
<div id="datepicker"></div><br/>


</body>
</html>
```

追記：
カレンダーを表示するところまでは戻りましたが、”beforeShowDay:”を追加したことによって土日の色まで灰色に戻ってしまいました。
<div id="datepicker">をinputタグに変えると祝日は表示されますが複数選択の
表示(裏で配列には入っています)が死に、divタグだと複数選択は生きますが祝日表示が死ぬというジレンマに陥っています。
http://g.0-oo.net/gcalendar-holidays.jsの中身をdivタグでも動くように書き換えた方がいいのか、方針から決め直さないといけないようです…。

datepickerで祝日を表示し、複数選択できるようにしたい

###前提・実現したいこと
前提
jQueryで簡易なスライダーを作りました。

実現したいこと
より単純で短いコードへ添削をお願いしたいです。
関数の使い方など間違っていればご指摘おねがします。


###該当のソースコード
```javascript
$(function(){
    //変数
    var duration = 300;
    var ease = "easeInQuad"
    var itemLength = $(".item").length;
    //関数
    function init(){
        $("#prevBtn").on("click",prevhundler);
        $("#nextBtn").on("click",nexthundler);
    }
    function nexthundler(){
        next();
    };
    function prevhundler(){
        prev();
    };

function next(){
  $(".item").each(function(i){
  var $obj = $(this);
      if( i === itemLength - 1){
      $obj.stop().animate({left:"-=100%"},duration,ease,function(){
          $(".item:first-child").css({left:"400%"});
          $(".items").append($(".item:first-child"));
      });
      }else{
      $obj.stop().animate({left:"-=100%"},duration,ease);
      }
  });
};

function prev(){
    $(".item:last-child").css({left:"-100%"});
    $(".items").prepend($(".item:last-child"));
    $(".item").each(function(){
  var $obj = $(this);
    $obj.stop().animate({left:"+=100%"},duration,ease);
  });
};
    //関数 実行
init();

});

```
```html
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
	<meta name="Author" content=""/>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
	<script src="script.js"></script>
	
</head>
<body>

<div class="items">
    <div class="item1 item"></div>
    <div class="item2 item"></div>
    <div class="item3 item"></div>
    <div class="item4 item"></div>
    <div class="item5 item"></div>
</div>

<div id="prevBtn">prev</div>
<div id="nextBtn">next</div>

</body>
</html>
```
```css
*{
    margin: 0;
    padding: 0;
}

html,body{
    overflow: hidden;ß
}
.item{
    width: 100%;
    height: 300px;
    position: absolute;
}

.item1{
    background-color: #ff0000;
    
}
.item2{
    background-color: #0000ff;
    left: 100%;
}
.item3{
    background-color: #00ff00;
    left: 200%;
}
.item4{
    background-color: #ffff00;
    left: 300%;
}
.item5{
    background-color: #00ffff;
    left: 400%;
}

#prevBtn{
    position: absolute;
    top: 300px;
    left: 200px;
}
#nextBtn{
    position: absolute;
    top: 300px;
    left: 400px;
}
```

jQuery　スライダー　コードを簡潔に

二次元配列で、中の配列の特定keyに対するvalueが重複していた時に
そのvalueを持つもの全てを削除したいです。

少しコード直してみて、動くには動いたのですが
とても無駄が多いように思っているので良い方法が知りたいです。



###実現したいこと
普通の配列だとこんなイメージ。
[1,2,2,3,4,4,4] → [1,3]
// 2と4は複数あるので全部削除

今回やりたいのは、二次元かつ連想配列でこんなイメージです。
[{a:1,b:"h"},{a:1,b:"e"},{a:2,b:"l"},{a:3,b:"l"},{a:1,b:"o"}]
 → [{a:1,b:"h"},{a:1,b:"e"},{a:1,b:"o"}]
// bが"l"のものだけ削除
 

単純な重複削除であればfilterを使えばできるのですが
そもそも全部消したいとなると、一度重複するものを抽出して更に突合させないといけなくて
しかもそれが二次元配列かつ連想配列だと...と混乱してきてしまいました。。

↓↓一応これでできたけど、無駄がすごく多いきがする...
```JavaScript
var arr = [{a:1,b:"h"},{a:1,b:"e"},{a:2,b:"l"},{a:3,b:"l"},{a:1,b:"o"}] 

// 一度bだけ取り出して、重複しているものを探す
var check = [];
for(i=0; i<arr.length; i++){
	check.push(arr[i]["b"]);
}
var dubble = check.filter(function(x, i, arr){
	// check中のものが配列の中で最初にhitして、別でもhitする場合だけ抽出
	return arr.indexOf(x) === i && i !== arr.lastIndexOf(x);
});

var compArr = [];
for(i=0; i<arr.length; i++){
	var flg = false;
	for(j=0; j<dubble.length; j++){
		if(arr[i]["b"] == dubble[j]){
			flg = true;
		}
	}
	if(!flg) compArr.push(arr[i]);
}
```

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryなどが使えないので、素の状態で書きたいです。

二次元配列で、特定Keyに対するValueが重複しているものを、1つ残して重複を無くすのではなく全部削除したい

特定のClass名を軸に、要素内に割り振られたキーワード同士を紐付け、それらを開閉させる動きを作っています。おおよそのブラウザで想定通りの動きをしているのですが、IE10のみエラーが表示されてしまい動作しません。

どなたか分かる方いらっしゃいましたら、問題点と解決法を教えていただきたく存じます。

【 動きの説明 】
［ lcSwitch ］というClass内にて［ lcSwitchCause ］というClass名を拾い、同じ要素にある独自data属性の値と紐付け、対象となる［ lcSwitchEffect ］を開閉しています。

また、対象があった場合に初期状態を非表示にさせています。

```html
<div class="lcSwitch">
	<div class="lcSwitchCause" data-lcSwitch="1"> … </div>
	<div class="lcSwitchCause" data-lcSwitch="2"> … </div>
	<div class="lcSwitchCause" data-lcSwitch="3"> … </div>

	<div class="lcSwitchEffect1"> … </div>
	<div class="lcSwitchEffect2"> … </div>
	<div class="lcSwitchEffect3"> … </div>
</div>
```

```javascript
jQuery('.lcSwitch').each(function() {
	var lcSwitch = jQuery(this);

	jQuery(this).find('.lcSwitchCause').each(function() {
		var lcSwitchN = jQuery(this).attr('data-lcSwitch');
		var lcSwitchEffectN = 'lcSwitchEffect' + lcSwitchN;

		jQuery(lcSwitch).find('.' + lcSwitchEffectN).each(function() {
			if(jQuery(this).show()) {
				jQuery('[class*=lcSwitchEffect]').hide();
			} else {
				jQuery('[class*=lcSwitchEffect]').show();
			}
		});

		jQuery(this).on('click', function() {
			jQuery(lcSwitch).find('.' + lcSwitchEffectN).toggle();
	
			return false;
		});

	});
});
```

私的に検証した結果では、下記部分にてエラーが生じているようです。
each前で取得しているものが、IE10と、その他ブラウザで異なっているようなのですが、解決方法が分かりません。。

```javascript

jQuery(lcSwitch).find('.' + lcSwitchEffectN).each(function() {
	if(jQuery(this).show()) {
		jQuery('[class*=lcSwitchEffect]').hide();
	} else {
		jQuery('[class*=lcSwitchEffect]').show();
	}
});
```

どうぞ、宜しくお願い致します。

【 jQuery 】ie10にて、特定の要素内に含まれるオブジェクトの取り方が異なる問題について。

お世話におります。jQuery初心者です。
前日にスライドショーをteratailで教えていただきました。
スライドが紙芝居式になっていて、スライドが表示されてる時間までバーが伸び、スライドされると
スライドに合わせてバーが縮む仕組みを作りましたが、どうしてもスライドとバーのdurationにズレが
生じてしまいます。
なぜズレが生じてしまうのでしょうか。また、このズレを解消する方法があれば、ご教授の方よろしくお願いします。

html
```ここに言語を入力
		<div class="slider">
            <div id="rect"> </div>  
			<ul class="slider_road">
				<li class="slide"><img src="1.png" class="img1"></li>
                <li class="slide"><img src="2.png" class="img2"></li>
                <li class="slide"><img src="3.png" class="img3"></li>
            </ul>
</div>
```

css
```ここに言語を入力
.slider {
	max-width: 640px;
	width: 96%;
	margin: 15px 2%;
	height: 500px;
	clear:both;
	overflow: hidden;
	position: relative;
	background-color: #C9E6FD;
}

#rect {
	position: absolute;
	top: 15px;
	left: 0;
	background: #87d3ff;
	width:0px;
	height: 3px;
	text-align: center;
	color: #fff;
	z-index: 3;
}

slider_road {
    position: relative;
    height: auto;
	top:30px;
	margin: 0;
    padding: 0;
    list-style: none;
}
.slide {
	list-style: none;
    width: 100%;
    height:auto;
    top: 30px;
    left: 0;
    float: left;
    position: absolute;
}

```

js
```ここに言語を入力
$(function () {
    setTimeout('rect()'); //アニメーションを実行
});

function rect() {
	$("#rect").animate({width: '100%'},3000).animate({width:'0%'},{ duration:1000});
	setTimeout("rect()");
}

$(function(){
    setInterval(function() {
        var slide = $('.slide');
        slide.first().stop().animate({marginLeft:0});
        slide.last().stop().animate({marginLeft:'-100%'},1000,function(){slide.last().prependTo(slide.parent())});
		
    }, 3000);    //setInterval() 
});
```

jQueryのanimate速度が微妙にずれてしまう

運営側への質問です。
コードブロックで使える言語の一覧はどこかにありますか？ちょっと見当たらないようです。
さっき、VBA を書こうとして困りました。vbnetで代用ですかね。
Windowsのバッチスクリプトは試行錯誤で見つけましたが、BATでもCMDでもなく何故かDOS。懐かしい単語ですが、DOSバッチと、現在のWindowsのバッチは別物です。CMDが望ましいでしょう。

#追記: 2018-08-08
現時点では↓のようです。
```plain
1c:"1C"
abnf
accesslog
actionscript:"ActionScript", as
ada
apache:"Apache", apacheconf
applescript:"AppleScript", osascript
arduino:"Arduino"
armasm, arm
asciidoc:"AsciiDoc", adoc
aspectj
autohotkey:"AutoHotkey"
autoit
avrasm:"AVR Assembler"
awk
axapta:"Axapta"
bash:"Bash", sh, zsh
basic
bnf
brainfuck:"Brainfuck", bf
cal
capnproto, capnp
ceylon
clean, clean, icl, dcl
clojure-repl
clojure:"Clojure", clj
cmake:"CMake", cmake.in
coffeescript:"CoffeeScript", coffee, cson, iced
coq
cos, cos, cls
cpp:"C++", c:"C", cc, h, c++:"C++", h++, hpp
crmsh, crm, pcmk
crystal, cr
cs, csharp:"C#", c#:"C#"
csp
css:"CSS"
d:"D"
dart
delphi:"Delphi", dpr, dfm, pas, pascal, freepascal, lazarus, lpr, lfm
diff:"Diff", patch
django:"Django", jinja
dns, bind, zone
dockerfile, docker
dos:"DOS.bat", bat, cmd
dsconfig
dts
dust, dst
ebnf
elixir:"Elixir"
elm
erb
erlang-repl:"Erlang REPL"
erlang:"Erlang", erl
excel, xlsx, xls
fix:"FIX"
flix
fortran, f90, f95
fsharp:"F#", fs, f#:"F#"
gams, gms
gauss, gss
gcode
gherkin:"Gherkin", feature
glsl:"GLSL"
go:"Go", golang
golo
gradle:"Gradle"
groovy
haml:"Haml"
handlebars:"Handlebars", hbs, html.hbs, html.handlebars
haskell:"Haskell", hs
haxe:"Haxe", hx
hsp
htmlbars
http:"HTTP", https
hy, hylang
inform7, i7
ini:"Ini", toml
irpf90
java:"Java", jsp
javascript:"JavaScript", js:"JavaScript", jsx
json:"JSON"
julia
kotlin
lasso:"Lasso", ls, lassoscript
ldif
leaf
less
lisp:"Lisp"
livecodeserver
livescript, ls
llvm
lsl
lua:"Lua"
makefile:"Makefile", mk, mak
markdown:"Markdown", md, mkdown, mkd
mathematica, mma
matlab:"Matlab"
maxima
mel:"MEL"
mercury, m, moo
mipsasm, mips
mizar:"Mizar"
mojolicious
monkey
moonscript, moon
n1ql
nginx:"Nginx", nginxconf
nimrod:"Nimrod", nim
nix:"Nix", nixos
nsis:"NSIS"
objectivec:"Objective C", mm, objc, obj-c
ocaml:"OCaml", ml
openscad
oxygene:"Oxygene"
parser3:"Parser3"
perl:"Perl", pl, pm
pf, pf.conf
php:"PHP", php3, php4, php5, php6
plain:"Plain text"
pony
powershell, ps
processing
profile
prolog
protobuf
puppet, pp
purebasic, pb, pbi
python:"Python", py, gyp
q
qml, qt
r:"R"
rib:"RenderMan RIB(RIB)"
roboconf, graph, instances
rsl:"RenderMan RSL(RSL)"
ruby:"Ruby", rb, gemspec, podspec, thor, irb
ruleslanguage
rust:"Rust", rs
scala:"Scala"
scheme
scilab:"Scilab", sci
scss:"SCSS"
smali, smali
smalltalk:"Smalltalk", st
sml, ml
sqf, sqf
sql:"SQL"
stan
stata, do, ado
step21, p21, step, stp
stylus, styl
subunit
swift:"Swift"
taggerscript
tap
tcl, tk
tex:"TeX"
text:"Plain text"
thrift:"Thrift"
tp
twig, craftcms
typescript:"TypeScript", ts
vala:"Vala"
vba:"VBA"
vbnet:"VB.NET", vb
vbscript-html
vbscript:"VBScript", vbs
verilog, v, sv, svh
vhdl:"VHDL"
vim:"Vim Script(Vim)"
x86asm:"Intel x86 Assembly"
xl, tao
xml:"XML", html:"HTML", xhtml, rss, atom, xjb, xsd, xsl, plist
xquery, xpath, xq
yaml, yml, YAML, yaml
zephir, zep
```

このサイトのMarkdown記法のコードブロックで使える言語一覧

ハンバーバーボタンを押すと、くるっと回って、
不透明な背景がふわっと出て。もう一度押すとくるっと回って、不透明な背景がふわっと消えるようにしたいのですが、下記のようにうまくいきません。
どこに問題があると思われますか？

https://jsfiddle.net/80od313c/20/

jQueryで作ったドロワーメニューがうまくいかない。

Javascriptで整数部3桁、少数部2桁の入力チェックをしようと思っています。

100     入力OK
10      入力OK
0       入力OK
0.0     入力OK
0.00    入力OK
1000    入力NG
100.000 入力NG

のような正規表現を作成したいと思っています。
/^[1-9][0-9]{0,2}(\.[0-9]{1,2})?$/
ようなものを作ったのですが、上手くいきません。
よろしくお願いいたします。

正規表現で整数部3桁、少数部2桁を表現する

jqueryでふんわり画像がフェードイン・フェードアウトで切り替わる処理をつけ、レスポンシブデザインにしたくてページの幅変えたら大きさ変わるように処理しました。
画像はうまくいったのですが、
その画像の下から色々文章を入れていきたいのですが表示されずどうやら画像の裏にいってしまっているようです。
どうしたら良いでしょうか？


```HTML
     <!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>サンプル作成</title>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
            <link rel="stylesheet" type="text/css" href="style.css">
            

            <script type="text/javascript">
                function slideSwitch() {
                    var $active = $('#slideshow img.active');

                    if ( $active.length == 0 ) $active = $('#slideshow img:last');

                    var $next =  $active.next().length ? $active.next()
                    : $('#slideshow img:first');

                    $active.addClass('last-active');

                    $next.css({opacity: 0.0})
                        .addClass('active')
                        .animate({opacity: 1.0}, 1000, function() {
                        $active.removeClass('active last-active');
                    });
                }

                $(function() {
                    setInterval( "slideSwitch()", 4000 );
                });
            </script>

        </head>

        <body>

           <div id="slideshow">
                <img src="image/1.jpg" alt="画像1" class="active">
                <img src="image/2.jpg" alt="画像2">
                <img src="image/3.jpg" alt="画像3">
           </div>


            <div id="main" class="container">
                   
                    <div id="posts" >
                        <div class="post">
                            <div class="post-header">

                                <div class="post-mata">
                                    20130403 カテゴリ
                                </div>
                            </div>
                            <div class="post-content">
                                <div class="post-image">
                                    <img src="image/noimage.png" width="100"  height="100">
                                </div>
                                <div class="post-body">
                                    <p>
                                        本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。
                                    </p>
                                </div>
                            </div>
                        </div>

〜〜〜省略〜〜〜

</body>
```

```css
/*トップページのスライドショー
---------------------------------------------------------------------------*/
#slideshow {
    position: relative;
    width:  100%; /* 画像の横幅に合わせて記述 */
    height: 100%; /* 画像の高さに合わせて記述 */

}
#slideshow img {
    position: absolute;
    top: 0;
    left:0;
    z-index: 8;
    opacity: 0.0;
    width:  100%; /* 画像の横幅に合わせて記述 */
    height: auto; /* 画像の高さに合わせて記述 */
}
#slideshow img.active {
    z-index: 10;
    opacity: 1.0;
}
#slideshow img.last-active {
    z-index: 9;
}
/*トップページのスライドショー
---------------------------------------------------------------------------*/

body {
    font-size: 14px;
    font-family: Arial, Verdana;
}

a {
    text-decoration: none;
}

p {
    padding-bottom: 14px;
    margin: 0;
    line-height: 1.8;
}
```

jqueryは今日から開始したので知識は全然ありません。よろしくお願いします。

 jQuery ふんわり画像切り替わり実装　その他の裏に回り込みについて　

Webデザインを主にやっていまして、JavaScriptに関してはまだまだ勉強不足な点が多く、進めていく中でわからない箇所が出てきましたので質問させてください。

現在、マルチカラムレイアウトを作っていまして、tableレイアウトやflexboxは使用できない制約下にあります。

使用するのはレガシーブラウザにも対応したfloatを使用したレイアウトになるのですが、ご存知の通り、floatでは中身の要素の高さがそのまま各boxの高さになってしまいますので、下図のようにレイアウトが崩れてしまいます。

![高さが揃っていない状態](bdf6dde0c0dc362022423557442daca4.gif)

そこで、高さ揃えのプラグインなどを用いて調整するわけですが、こちらも制約があり、自作のスクリプトで高さ揃えをしないといけません。

HTMLの構成としては、fixedレイアウトでunorderd list直下にlistが並んでいる状態です。
nカラム構成なのかを取得して、各行ごとの高さを揃えるというスクリプトを、まず以下のように考えました。

```JavaScript
$(function(){
  
  "use strict";
  
  // Get total number of lists
  var numberOfLists = $('li:last-of-type').index() + 1;
  //console.log('numberOfLists:', numberOfLists);
  
  // Get width of parent ul and li
  var widthOfParent = $('li').parent().width(), 
      widthOfLi = $('li').outerWidth();
  //console.log('widthOfLi:', widthOfLi);
  
  // Count how many lists are in one row
  var listsInRow = Math.floor(widthOfParent/widthOfLi);
  //console.log('listsInRow:', listsInRow);
  
  // Count how many lists are in one column
  var listsInColumn = Math.ceil(numberOfLists/listsInRow);
  //console.log('listsInColumn:', listsInColumn);
  
    
  var r = listsInRow, 
      c = listsInColumn;
  
  // Add the same class to lists in one row
  for (var i=1; i<=c; i++) {
    $('li:nth-of-type('+'-n'+(i*r)+')').addClass('equal_height--'+i);
    for (var j=1; j<=c; j++) {
      for (var k=1; k<c; k++) {
        $('.equal_height--'+j).removeClass('equal_height--'+(j+k));
      }
    }
  }  
  
  
  // Give each class the same height
  var biggestHeight_1 = 0, 
      biggestHeight_2 = 0, 
      biggestHeight_3 = 0;  

  $('.equal_height--1').each(function(){  
    if($(this).height() > biggestHeight_1){    
      biggestHeight_1 = $(this).height();  
    }  
  });  
  $('.equal_height--1').height(biggestHeight_1); 
  
  $('.equal_height--2').each(function(){  
    if($(this).height() > biggestHeight_2){    
      biggestHeight_2 = $(this).height();  
    }  
  });  
  $('.equal_height--2').height(biggestHeight_2); 
  
  $('.equal_height--3').each(function(){  
    if($(this).height() > biggestHeight_3){    
      biggestHeight_3 = $(this).height();  
    }  
  });  
  $('.equal_height--3').height(biggestHeight_3); 
  

  // Failed pattern 3
//   var biggestHeights = [], 
//       equal_heights = [];
//   for (var m=1; m<=c; m++) {
//     biggestHeights.push('biggestHeight_'+m);
//     equal_heights.push('.equal_height--'+m);
//   }
//   console.log(biggestHeights,equal_heights);
  
//   $.each($(equal_heights), function(){
//     for (var n=1; n<=c; n++) {
//       if($(this).height() > biggestHeights[n]){
//         biggestHeights[n] = $(this).height();
//       }
//       $(equal_heights).height(biggestHeights[n]);
//     }
//   });  
 
  
  // Failed pattern 2
//   var biggestHeight = 'biggestHeight_', 
//       arr = [], 
//       maxArr = []; 
//   for (var m=0; m<c; m++) {
//     arr = biggestHeight + String(m);
//     //console.log(arr);
//     $('.equal_height--'+(m+1)).height();
//   }
  

  // Failed pattern 1  
//   var biggestHeight = 0, 
//       arr = [], 
//       maxArr = [];
//   for (var m=1; m<=c; m++) {
//     for (var n=1; n<=r; n++) {
//       arr[m-1][m+n-2] = $('.equal_height--'+m+':nth-of-type('+n+')').height();
//       //$('.wrap').append('<p>'+arr[m-1][m+n-2]+'</p>');
//     }
//   }
//   $('.wrap').append('<p>'+arr[0]+'</p>');
//   for (var p=0; p<c; p++) {
//     maxArr[p] = Math.max(arr[p]);
//   }
  
//   for (var q=1; q<=c; q++) {
//     $('.equal_height--'+q).height(maxArr[q]);
//   } 
  
  
});
```

各行ごとに同じクラス名を割り当てて、その中で比較をし、一番高い高さを、同じ行の中の要素全てに適用するという設計で、下図のように上手く揃ってくれたのですが、

![高さが揃っている状態](0e7f71a5c8edf54271e61d9b585d0c9f.gif)

最後の各クラスごとに高さ揃えをするというコード（// Give each class the same heightの下）を上手くまとめることができません。

全体的な設計やコードの書き方も含めて、ご教授いただけると幸いです。

ご参考までに、HTMLとCSSは下記のような感じです。

```HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
	<div class="wrap">
       <ul>
          <li>Lorem ipsum dolor sit amet, no vel aliquid singulis, vix ex paulo choro. Facilisis concludaturque per eu, ad eius dolorem deleniti sed, quas detraxit et vel. At novum platonem sit.</li>
          <li>Lorem ipsum dolor sit amet, no vel aliquid singulis, vix ex paulo choro. Facilisis concludaturque per eu, ad eius dolorem deleniti sed, quas detraxit et vel. At novum platonem sit. Qui eros timeam percipit te, possit mnesarchum ne mel. Et est iisque legendos,</li>
          <li>Doctus phaedrum id est, pro lorem intellegam ut. Dicat deleniti instructior mel ei. Debet oratio tacimates vim ea, te pri rebum choro, scaevola volutpat omittantur ne nec. Natum eirmod facilisis mel in, porro appetere disputationi eu pri.</li>
          <li>Minim ridens duo in, ut his nibh albucius definitionem, id vis essent mollis interesset. Probo graece te cum.</li>
          <li>No sit semper maiorum, nibh nominati ei vim. Pro unum liber conceptam ut. No invidunt perfecto indoctum pri, ex falli mundi duo, esse fugit ea est. Mel ei ipsum aeterno bonorum, solum illud honestatis te nam, viderer intellegat et mea.</li>
          <li>Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li>
          <li>Id quo porro alterum. Ne mea purto case. Quod nonumes corpora et sed, te quod fugit pri. Cu sea quis purto decore, ad iusto tation sed, iriure menandri honestatis te usu.</li>
          <li>Vocent evertitur te has, exerci impetus ullamcorper ut sit. Has nulla mazim at, est harum molestie ei, vim et corpora deleniti consequuntur. Elit atqui nostrum ad nam, ad sententiae adipiscing eum. Electram petentium laboramus his ut, malis inani voluptaria id est. Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li>
          <li>Doctus phaedrum id est, pro lorem intellegam ut. Dicat deleniti instructior mel ei. Debet oratio tacimates vim ea, te pri rebum choro, scaevola volutpat omittantur ne nec. Natum eirmod facilisis mel in, porro appetere disputationi eu pri.</li>
          <li>Minim ridens duo in, ut his nibh albucius definitionem, id vis essent mollis interesset. Probo graece te cum.</li>
          <li>No sit semper maiorum, nibh nominati ei vim. Pro unum liber conceptam ut. No invidunt perfecto indoctum pri, ex falli mundi duo, esse fugit ea est. Mel ei ipsum aeterno bonorum, solum illud honestatis te nam, viderer intellegat et mea. Id quo porro alterum. Ne mea purto case. Quod nonumes corpora et sed, te quod fugit pri. Cu sea quis purto decore, ad iusto tation sed, iriure menandri honestatis te usu.</li>
          <li>Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li>
      </ul>
        
    	
    </div>
</body>
</html>
```

```SCSS
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);

$col-4: 960px;
$col-3: 725px;
$col-2: 530px;
$padding-wrap: 20px;

$width-li: 215px;
$padding-li: 10px;

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: lightgray;
}

.wrap {
  width: $col-4;
  padding: $padding-wrap;
  margin: 20px auto;
  background-color: #fff;
  box-shadow: 0 0 1px #ccc;
}

ul {
  overflow: hidden;
  list-style: none;
  & li {
    width: $width-li;
    padding: $padding-li;
    margin-bottom: 20px;
    float: left;
    color: #fff;
    &:not(:nth-of-type(4n)) {
      margin-right: 20px;
    }  // 3col: 3n, 2col: 2n
    &:nth-of-type(8n+1) {
      background-color: tomato;
    }
    &:nth-of-type(8n+2) {
      background-color: orange;
    }
    &:nth-of-type(8n+3) {
      background-color: desaturate(yellow, 30%);
    }
    &:nth-of-type(8n+4) {
      background-color: lighten(green, 10%);
    }
    &:nth-of-type(8n+5) {
      background-color: blue;
    }
    &:nth-of-type(8n+6) {
      background-color: navy;
    }
    &:nth-of-type(8n+7) {
      background-color: purple;
    }
    &:nth-of-type(8n) {
      background-color: gray;
    }
  }
}
```

どうぞよろしくお願いいたします。

フロートの高さ揃えについて

###前提・実現したいこと
Ruby on Railsでアプリを作成しています。
タイトル、タグ、入力本文という3つだけ入力するコントロールを配置している画面があるのですが、3つ目の「入力本文」だけ可変にして、画面いっぱいになるまで常に大きくしておきたいです。
一つのボックスだけ画面の高さ100％にするようなことはできるようになったのですが、上記のやり方が分からず困っております。
現在は70vhを設定することである画面サイズの時は全画面表示できているのですが、画面の高さを大きくしたりすると、下の方の空白が大きくなってしまいます。
ご存じの方いらっしゃいましたら教えていただけますでしょうか。

###画像
OKな画面サイズの時
![OK](240a8c636be6d39ce3eb79b2714143ac.jpeg)

画面の高さを変えた時
![NG](0d59f6219efc0137357f915ef8376a66.jpeg)

###ソースコード
_form.html.haml
```html
<div class="full_display_container">
  <div class="item_form">
    <%= form_for(@item, html: { multipart: true }) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>
      <div class="field">
        <%= f.text_field :title, :placeholder => "タイトル", class: 'form-control' %>
        <ul id="item-tags"></ul>
        <div class="item_detail">
          <div class="left">
            <div class="col-sm-6">
              <%= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control' %>
            </div>
          </div>
          <div class="right">
            <div class="col-sm-6">
              <div id="preview">
                <%= markdown(@item.content) %>
              </div>
            </div>
          </div>
        </div>
      </div>
      <%= f.submit "投稿", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
```

items.sass
``` scss
// Itemフォーム画面
.item_form {
  margin: 0 auto;
  .field {
    .item_detail {
      // .form-control
      h1, h2, h3, h4, h5, h6 {
        border-bottom: 2px solid $list_border_top_color;
        /* 下線 */
        margin: 50px 0 10px 0;
      }
      .left {
        .col-sm-6 {
          padding-left: 0;
        }
      }
      .right {
        .col-sm-6 {
          padding-right: 0;
          height: 70vh;
          overflow-y: auto;
        }
      }
    }
    .col-sm-6 {
      @media (max-width: 767px) {
        padding-left: 0;
        padding-right: 0;
      }
      #item_content {
        height: 70vh !important;
      }
    }
  }
}

```

CSS フォームのうちの一つのコントロールだけを大きくして画面いっぱいにしたい

JSで、カレンダーを作成しております。
カレンダーの日付を選択すると、その値を取得し、以下のような日付の配列を作成してフォームにセットするスクリプトを組んでいます。

その上で、下記のHTMLフォーマットにマッピングをしたいと考えております。
考えられる限り、チャレンジしたのですが、うまくできない状況です。

どのようにデータを回せばいいのか、ご教授いただけないでしょうか？
よろしくお願いいたします。

■データ（クリック時）
2016/1/2

■データ(フォームにセットする値）
[2016/1/2,2016/2/2,2016/2/9,2016/2/10,2016/2/17,2016/3/10,2016/3/22]

■HTML
<table id="table">
<tbody>
<tr>
<td><label>1月</label></td>
<td><label>2</label></td>
<td><label>2月</label></td>
<td><label>2,9,10,17</label></td>
<td><label>3月</label></td>
<td><label>10,22</label></td>
</tr>
</tbody>
</table>

JSでの、日付配列の整形について

javascript学習中の者です。
とあるショッピングカートASPを利用して、学習を進めているのですが、
こういった感じの操作が難しく悩んでいます。
どうかご教授いただけないでしょうか。

【商品一覧出力画面】
<div class="AAA">
<div class="BBB">
<a href=""><img src=""></a>
</div>
商品名<br><span>価格</span>
</div>

このようなhtmlが自動出力されます。
このとき「商品名＋価格」部分にCCCというclassを付けたい。
結果的には
<div class="AAA">
<div class="BBB">
<a href=""><img src=""></a>
</div>
<div class="CCC">商品名<br><span>価格</span></div>
</div>
このようなカタチにしたいと考えております。

ぜひご指導おねがいします。

jqueryでの文字列操作についての質問

###前提・実現したいこと
Railsでアプリを作成しています。
下記画像のように、入力欄が3つある画面を作っています。
teratailの新規質問画面のように、1画面いっぱいに入力画面が広がるように、3つ目の入力欄の
高さを制御したいと考えています。
height:100%のような指定をしても親要素の高さに対して100％になってしまうようで、
うまくいかない状態です。
やり方が分かる方がいらっしゃいましたら教えていただけますでしょうか。よろしくお願いします。

###発生している問題・エラーメッセージ
3つ目の「本文をマークダウンで入力してください・・・」というプレースホルダーが
ある入力欄を画面がいっぱいになるまで高さを大きくしたいです。
![入力画面](78bb6868caedfc2c4837b15936604372.jpeg)

###ソースコード
_form.html.haml
```haml
.item_form
  = form_for(@item, html: { multipart: true }) do |f|
    = render 'shared/error_messages', object: f.object
    .field
      = f.text_field :title, :placeholder => "タイトル", class: 'form-control'
      %ul#item-tags
      .item_detail
        .container-fluid
          .row-fluid
            .left
              .col-sm-6
                = f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control'
            .right
              .col-sm-6
                #preview= markdown(@item.content)
    %br/
    = f.submit "投稿", class: "btn btn-primary"

```

items.sass
```CSS
.item_detail
  h1, h2, h3, h4, h5, h6
    border-bottom: 2px solid $list_border_top_color
    /* 下線
    margin: 50px 0 10px 0
    /* 上下の余白
  .container-fluid
    padding-left: 0
    padding-right: 0
    .left
      .col-sm-6
        padding-left: 0
    .right
      .col-sm-6
        padding-right: 0
    .col-sm-6
      @media (max-width: 767px)
        padding-left: 0
        padding-right: 0
      #item_content
        height: 100%
```

###補足情報(言語/FW/ツール等のバージョンなど)

入力フォームを、画面いっぱいになるまで縦幅を大きくしたい。

下のこーどでpost.phpから

{"num":"4","name":"ゆうひ","res":"no","time":"2016-02-05 23:27:05"}{"num":"3","name":"ゆうひ","res":"ok","time":"2016-02-05 23:26:54"}{"num":"2","name":"ゆうひ","res":"hello","time":"2016-02-05 23:26:46"}{"num":"1","name":"ゆうひ","res":"hello","time":"2016-02-05 23:26:33"}

のようなデータを受け取り、JSON.parseでJavaScriptのオブジェクトに変換したとします。その後、resの値だけを取り出し表示するにはどのようにしたらいいのでしょうか。


$(document).ready(function(){
  //submitした時の処理
  $('#form').submit(function(){
    $.ajax({
      type:'POST',
      //リクエスト先URL
      url:'post.php',
      //受け取るデータ形式
      datatype:'json',
      //渡すデータ
      data:$('#message').serialize(),
      //送信前の処理
      beforeSend:function(){
        //二重送信防止の為submitを無効にし文字列Thanksを表示
        $('#post').attr('hidden',true);
        $('#ok').html('Thanks!',true);
      }
      })

      .done(function(data){
      //成功した時の処理
      //テキストエリアをクリア
        $('#message').val("");
        console.log(data);
   var res =JSON.parse(data);
      })

      .fail(function(){
        //失敗した時の処理
        $('#res').html('er');
      })
      //無効にしたsubmitをsubmit後から三秒後に有効に戻す
      function resreturn(){
          $('#post').attr('hidden',false);
          $('#ok').html('');
        }
        setTimeout(resreturn,1000);
     //submitした時リロードしないようにする
      return false;

  });
});

-post.php-
<?php
session_start();

if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])||
    $_SERVER['HTTP_X_REQUESTED_WITH']!=='XMLHttpRequest') {
  die('error');# code...
}
$db=mysqli_connect("","","","")or die(mysqli_connect_error());
mysqli_set_charset($db,'utf-8');

//ログインしていてなおかつテキストエリアに入力があった場合
if (isset($_POST["message"])&&$_POST["message"]!==""&&isset($_SESSION["id"])) {
  //レスをデータベースに格納
  $sql1=sprintf('INSERT INTO postsb SET member_id=%d,
   message="%s" , created=NOW() ' ,
   mysqli_real_escape_string($db,$_SESSION["id"]),
   mysqli_real_escape_string($db,$_POST["message"])
  );
  mysqli_query($db,$sql1) or die(mysqli_error($db));
  
//レスを取得
  $sql=sprintf('SELECT m.name , p.* FROM membersb m , postsb p
    WHERE m.id=p.member_id ORDER BY p.created DESC ');
  $posts=mysqli_query($db,$sql) or die(mysqli_error($db));

  header(' Content-type;application:json; charset=utf-8 ' );
  header(' X-Content-Type-Option:nosniff ' );  

//レス内容をwhile文で表示
  while ( $post=mysqli_fetch_assoc($posts)) {
    $res=array(
      'num'=>$post['id'],
      'name'=>$post['name'],
      'res'=>$post['message'],
      'time'=>$post['created']
       );
        echo json_encode(
        $res,JSON_HEX_TAG | JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
        );
  }
}
 ?>