常連

注目の的

社会貢献

質問力

回答者

拍手喝采

質問者

情報収集家

模範生

有名人

### 前提・実現したいこと

現在、写真がグリッドで並ぶウェブページをWordPressで製作しています。
画面内に入って来たらふわっと表示するよくみるものを実装したく、作業しています。

以下のコードで、スクロールするとフェードインするところまでは実装できたのですが、最初から画面内にある要素に関しては、最初のタイミングでスクロールせずともフェードインさせたいです。(写真が極端に少ないとスクロールできないため)



### 該当のソースコード 

```php

// Script
<script type="text/javascript">
  jQuery(function(){
    jQuery(window).scroll(function (){
        jQuery('.fadein').each(function(){
            var elemPos = jQuery(this).offset().top;
            var scroll = jQuery(window).scrollTop();
            var windowHeight = jQuery(window).height();
            if (scroll > elemPos - windowHeight + 300){
                jQuery(this).addClass('scrollin');
            }
        });
    });
  });
</script>


// CSS
<style>

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 30px);
    transition : all 500ms;
  }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
  }

</style>

```
よろしくお願いいたします。

スクロールしたらフェードインするやつを最初から画面内であれば表示してしまいたい。

### 前提・実現したいこと
4つ以上のボックスがあります。768px以上では横に3つ並び、残りは非表示にしてslideToggleで表示できるようにします。767px以下では横に2つ並び、残りは非表示にしてslideToggleで表示できるようにします。

slideToggleはread moreボタンを押すことで発動します。

### 発生している問題
768px以上から767px以下にリサイズしたときは問題なく表示されます。しかし767px以下から768px以上にリサイズしたときに、３つ並ぶはずのボックスが２つしか表示されません。つまり、767px以下の条件が残ってしまいます。

767px以下から768px以上にリサイズしたときも、768px以上の条件が反映されるようにしたいです。


### 該当のソースコード

```HTML
<div id="shop_main">
      <div class="shop_main_inner clearfix">
           <div class="shop_box">
               <div class="shop_imag">
                  <a href="#"></a>
               </div>
              <div class="shop_name">
              　　<h2 class="shop_name_title">お店1</h2>
              </div>   
          </div>
          <div class="shop_box">
              <div class="shop_imag">
                 <a href="#"></a>
             </div>
             <div class="shop_name">
                <h2 class="shop_name_title">お店２</h2>
            　</div>   
         </div>
         <div class="shop_box">
             <div class="shop_imag">
               　<a href="#"></a>
             </div>
            <div class="shop_name">
               <h2 class="shop_name_title">お店３</h2>
            </div>   
         </div>
         <div class="shop_box">
            <div class="shop_imag">
               <a href="#"></a>
           </div>
           <div class="shop_name">
              <h2 class="shop_name_title">お店４</h2>
           </div>   
        </div>
     
        </div>
          <div id="shop_button"><span>read more</span></div>  
        </div>
```

``` 
jQuery：ボックスをカウンして非表示

function Shoplist(){
 
 var iwW = $(window).innerWidth();   

   if (iwW > 768) {
    // 768px以上の処理 
     $("#shop_main").each(function () {//.shop_boxの数をカウント
       var num = $(this).find('.shop_box').length;
       if(num > 3){//.shop_boxが3件よりも多かったら
          $('.shop_box:nth-child(n + 4)').hide();//4件目以降は非表示
          $(this).find('#shop_button').css('display','block');
        }
        else {
          $(this).find('#shop_button').css('display','none');
          
        }
      }); 
    }  
    else {
    // 767px以下の処理
     $("#shop_main").each(function () {//.shop_boxの数をカウント
      var num = $(this).find('.shop_box').length;
       if(num > 2){//.shop_boxが2件よりも多かったら
          $('.shop_box:nth-child(n + 3)').hide();//3件目以降は非表示
          $(this).find('#shop_button').css('display','block');
        }
        else {
          $(this).find('#shop_button').css('display','none');   
        }
      });
    }
}

$(window).on('load resize',Shoplist);

```
```
jQuery：slideToggleの定義

function Shoplistdoor(){
    
  var iwW = $(window).innerWidth(); 

    $('#shop_button').on('click','span',function(){
       if (iwW > 768) {
          $('.shop_box:nth-child(n + 4)').slideToggle();
       }
       else {
          $('.shop_box:nth-child(n + 3)').slideToggle();
       }  
   });
}

$(window).on('load',Shoplistdoor);

```

【jquery】画面サイズによってslideToggleするボックスの数を変える。

PHPバージョン5.6 
フレームワーク等は使用しておりません

先日こちらで質問させて頂きました、
https://teratail.com/questions/117724
画像アップローダーについて追加でご質問させて頂きます。

下のソースを見て頂くとわかるのですが、ajaxで送信するフォームは、別のformの入れ子
となっている状態です。この場合だと、ajaxの方のsubmitが出来ますが、外のformでの
submitが出来ないのが現状です。

この画像をアップするフォーム自体が、外のフォームがPOSTする情報の一部となっている為
どうしても、情報を一緒にPOSTしたいと考えております。

もしくは、モダールや別ウィンドウを開かせてそこで入力させて、ajaxの返り値を
addtion.phpの「<p class="imgname">ここに画像ファイル名を入れ込む</p>」の部分
を書き換えるという動きが出来ればと考えております。


**【実現したい動きとして（どちらかが出来れば幸いです）】**

①formが入れ子の現状でも、問題なくそれぞれのformが送信できるようにしたい

②モダールや別ウィンドウを開かせてそこで入力させて、ajaxの返り値を
addtion.phpの「<p class="imgname">ここに画像ファイル名を入れ込む</p>」の部分
を書き換えるという動きが出来ればと考えております。

何卒お力を貸して頂ければと思います。
宜しくお願い致します。


```html
//addtion.php

 <form class="form-horizontal" role="form" action="addition.php" enctype="multipart/form-data" method="post" id="addition_form">

・・・・・・・・・・・・・・・省略
・・・・・・・・・・・・・・・省略

<form action="" method="post" id="imageForm">
    <p class="imgname">ここに画像ファイル名を入れ込む</p> 
    <img src="" id="preview" />
    <canvas id="canvas"></canvas>
    <input type="file" id="imageSelect" onChange="imgDisp();" />
    <input type="button" onClick="imgUpload();" value="アップロード" />
</form>

<button type="submit" name="addition_btn">確認に進む</button> 
</form>
```

```javascript
function imgDisp() {
    var file = $("#imageSelect").prop("files")[0];
                
    //画像ファイルかチェック
    if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") {
        alert("jpgかpngかgifファイルを選択してください");
        $("#imageSelect").val('');
        return false;
    }
                
    var fr = new FileReader();
    fr.onload = function() {
        //選択した画像をimg要素に表示
        $('#preview').attr("src", fr.result);                        
    };
    fr.readAsDataURL(file);
} 

function imgUpload() {
    //加工後の横幅を800pxに設定
    var processingWidth = 800;            
            
    //加工後の容量を100KB以下に設定
    var processingCapacity = 100000;                               

    //ファイル選択済みかチェック
    var fileCheck = $("#imageSelect").val().length;
    if (fileCheck === 0) {
        alert("画像ファイルを選択してください");
        return false;
    }
                
    //imgタグに表示した画像をimageオブジェクトとして取得
    var image = new Image();
    image.src = $("#preview").attr("src");

    var h;
    var w;

    //原寸横幅が加工後横幅より大きければ、縦横比を維持した縮小サイズを取得
    if(processingWidth < image.width) {
        w = processingWidth;
        h = image.height * (processingWidth / image.width);

    //原寸横幅が加工後横幅以下なら、原寸サイズのまま
    } else {
        w = image.width;
        h = image.height;
    }

    //取得したサイズでcanvasに描画
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    $("#canvas").attr("width", w);
    $("#canvas").attr("height", h);
    ctx.drawImage(image, 0, 0, w, h);                          

    //canvasに描画したデータを取得
    var canvasImage = $("#canvas").get(0);

    //オリジナル容量(画質落としてない場合の容量)を取得
    var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化
    var originalBlob = base64ToBlob(originalBinary); //画質落としてないblobデータをアップロード用blobに設定
    console.log(originalBlob["size"]);

    //オリジナル容量blobデータをアップロード用blobに設定
    var uploadBlob = originalBlob;                    

    //オリジナル容量が加工後容量以上かチェック
    if(processingCapacity <= originalBlob["size"]) {
        //加工後容量以下に落とす
        var capacityRatio = processingCapacity / originalBlob["size"];
        var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化
        uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定
        console.log(capacityRatio);                        
        console.log(uploadBlob["size"]);
    }

    //アップロード用blobをformDataに設定
    var form = $("#imageForm").get(0);
    var formData = new FormData(form);                    
    formData.append("selectImage", uploadBlob);

    //formDataをPOSTで送信
    $.ajax({
        async: false,
        type: "POST",
        url: "upload.php",
        data: formData,
        dataType: "text",
        cache: false,
        contentType: false,
        processData: false,
        error: function (XMLHttpRequest) {
            console.log(XMLHttpRequest);
            alert("アップロードに失敗しました");
        },
        success: function (res) {
            if(res !== "OK") {
                console.log(res);
                alert("アップロードに失敗しました");
            } else {
                alert("アップロードに成功しました");
            }
        }
    });
}

// 引数のBase64の文字列をBlob形式にする
function base64ToBlob(base64) {
    var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
          data = window.atob(base64Data), // base64形式の文字列をデコード
          buff = new ArrayBuffer(data.length),
          arr = new Uint8Array(buff),
          blob,
          i,
          dataLen;
    // blobの生成
    for (i = 0, dataLen = data.length; i < dataLen; i++) {
        arr[i] = data.charCodeAt(i);
    }
    blob = new Blob([arr], {type: 'image/jpeg'});
    return blob;
}         
```

```php
【upload.php】

<?php
session_start();

//ランダムな英数字の生成
$str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPUQRSTUVWXYZ';
$ext = substr(
  str_shuffle($str), 0, 10);
$time = date("YmdHis");
$new_filename = sprintf('%s.%s', $time . sha1_file($_FILES['selectImage']['name']), $ext);

$path = TMP_DIR . $new_filename;
$_SESSION["new_filename"] = $new_filename;

try{
    if (!move_uploaded_file($_FILES['selectImage']['tmp_name'], $path)) {
        throw new Exception('画像ファイルアップロードエラー！');
    }
    
    echo 'OK';
} catch (Exception $ex) {
    echo $ex->getMessage();
}

?>

```

ajaxを利用した画像アップローダー

商品の比較に使用するため、同一ページにレーダーチャートを複数設置したいです。
「chart.js」を使用しています。

複数のレーダーチャートを設置するため、現在以下のようなコードになっております。
```html
<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="Chart.js"></script>
    <script>
    $(function(){
        var ctx = document.getElementById("myChart01").getContext('2d');
        var myChart01 = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ["価格", "品質", "セキュリティ", "デザイン", "ブランド力", "アフターサービス"],
                datasets: [{
                    data: [1, 2, 3, 4, 3, 2],
                    backgroundColor: 'rgba(3,169,244,0.3)',
                    borderColor: 'rgba(3,169,244,1.0)',
                    pointBackgroundColor: 'rgba(3,169,244,0.8)',
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false
                 },
                 scale: {
                    ticks: {
                        stepSize: 1,
                        max: 5,
                        beginAtZero: true,
                    }
                 }
            }
        });

        var ctx = document.getElementById("myChart02").getContext('2d');
        var myChart02 = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ["価格", "品質", "セキュリティ", "デザイン", "ブランド力", "アフターサービス"],
                datasets: [{
                    data: [3, 3, 3, 3, 3, 2],
                    backgroundColor: 'rgba(3,169,244,0.3)',
                    borderColor: 'rgba(3,169,244,1.0)',
                    pointBackgroundColor: 'rgba(3,169,244,0.8)',
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false
                 },
                 scale: {
                    ticks: {
                        stepSize: 1,
                        max: 5,
                        beginAtZero: true,
                    }
                 }
            }
        });
    });
    </script>
</head>

<body>

    <section class="clearfix">
        <h1>商品1</h1>
        <article class="artImg"><img src="sample01.jpg" alt="商品画像"></article>
        <article class="artTxt">商品1説明</article>
        <article class="artGrp">
                <canvas id="myChart01" width="100%" height="100%"></canvas>
        </article>
    </section>

    <section class="clearfix">
        <h1>商品2</h1>
        <article class="artImg"><img src="sample02.jpg" alt="商品画像"></article>
        <article class="artTxt">商品2説明</article>
        <article class="artGrp">
                <canvas id="myChart02" width="100%" height="100%"></canvas>
        </article>
    </section>
</body>

</html>
```

これ以降もレーダーチャートが増えるため、コードが長くなってしまいます。
少しでもコードを短く、見やすくするためにオプションを纏めて設定する事は可能でしょうか？

やりたい事は全部で３つあります。
①レーダーチャートのデザインは統一のため、オプションをまとめて設定したい。
②「アフターサービス」が長いので「アフター<br>サービス」のように改行して表示したい。
③レーダーチャートのラベルの線の色、太さを変更したい。
　※「backgroundColor」や「borderColor」で設定出来るボーダーではなく、その後ろの六角形の線の部分です。

各プロパティは確認しましたが六角形のラベルの線の色を変更するプロパティはないようでした。
参考：[https://misc.0o0o.org/chartjs-doc-ja/charts/radar.html](https://misc.0o0o.org/chartjs-doc-ja/charts/radar.html)


また、改行について以下を参考にしましたが、
参考：[https://teratail.com/questions/72208](https://teratail.com/questions/72208)
こちらでベストアンサーに選ばれている方法はコードが変わったのかテキスト出力の部分が検索で出て来ず、試すことが出来ませんでした。

chart.js　グラフの複数設置とラベルの改行、グラフの軸線の色を変更したい。

初めての質問なので、分かりづらい質問かと思いますが至らない点がありましたらご指南、ご指摘ください。


【やりたいこと】
jQueryで自作のlightboxのようなものを作っています。
サムネイル画像をクリックするとクリックした画像が拡大表示されてそこにprevボタン、nextボタン機能で拡大画像から前後の画像を往来できるようにしたいのです。
参考：http://www.s-hoshino.com/web2/shop_005/works.html

jQueryを独学で勉強中のため理解を深めたいので今回はプラグインに頼らず自作にこだわっています。

prev、nextボタンを配置するところまでは自力でできているので解決コードも自作のものに付け加えた形でできるのであればその方向で進められたらと思っております。

//１．拡大表示された画像の要素番号をcurrentNumに格納
var currentNum = $("#small_pics li img").index(this);
//prevをクリックすると
	$(".hoverNav1 .prev").on("click", function(){
//２．要素番号を1つ減らす（=表示されていた画像の1つまえの要素を取得）
		currentNum--;
//２．の部分ができているかを確認してるだけ
		console.log(currentNum);
//３．pic-overlay img　にcurrentNumで取ってきた要素番号の画像のsrcを入れる
$(".pic-overlay img").

３．の部分でつまづいています。.pic-overlay img　に入れる前にcurrentNumの要素番号の画像のsrcを取る処理を書くのでしょうが思いつきません。

### 該当のソースコード

```HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自作でlightbox</title>
	<link href="lightbox.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
		<div id="main">
		<h5>jQueryでlightbox風の画像を自作する</h5>		

		<div id="small_pics">
			<ul>
				<li><img src="images/001.jpg"></li>
				<li><img src="images/002.jpg"></li>
				<li><img src="images/003.jpg"></li>
				<li><img src="images/004.jpg"></li>
				<li><img src="images/005.jpg"></li>
			</ul>

			<div class="hoverNav1">
				<a href="#" class="prev">Prev</a>
			</div>
			<div class="hoverNav2">
				<a href="#" class="next">Next</a>
			</div>

		</div>
		<div id="index" class="index">
			<span class="index_no"></span>/<span class="index_no1"></span>枚
		</div>

<script type="text/javascript" src="lightbox.js"></script>
</body>
</html>
```

```jQuery
$(function(){
	$("#small_pics li img").on("click", function(){
		$("body").append('<div class="pic-overlay"></div>');
		$(".pic-overlay").fadeIn("slow");

		var index1 = $("#small_pics li img").length;
		$("#index .index_no1").fadeIn().text(index1);

		var index = 0;
		var index= $("#small_pics li img").index(this);
		$("#index .index_no").fadeIn().text(index + 1);

	});

	$("#main").on("click", "#small_pics li img", function(){
		var url = $(this).attr("src");

		$(".pic-overlay").empty().append('<img src="'+ url +'" />').fadeIn("slow");
		$("#index").slideDown(500);
		$(".hoverNav1, .hoverNav2").fadeIn();

		centeringModalSyncer();
		$(window).resize(centeringModalSyncer);
	
		centeringModalSyncer2();
		$(window).resize(centeringModalSyncer2);

		centeringModalSyncer3();
		$(window).resize(centeringModalSyncer3);

		centeringModalSyncer4();
		$(window).resize(centeringModalSyncer4);
		
	
		$(".pic-overlay").click(function(){
			$(".pic-overlay img, .pic-overlay, #index, .hoverNav1, .hoverNav2").fadeOut("slow", function(){
				$(".pic-overlay").remove();

			});
		});

		var currentNum = $("#small_pics li img").index(this);
		console.log(currentNum);

		$(".hoverNav1 .prev").on("click", function(){
		currentNum--;
		console.log(currentNum);

		});

	});

	function centeringModalSyncer(){
			var w = $(window).width();
			var h = $(window).height();

			var cw = $(".pic-overlay img").width();
			var ch = $(".pic-overlay img").height();

			var pxleft = ((w - cw) / 2);
			var pxtop = ((h - ch) / 2);

			$(".pic-overlay img").css({"left": pxleft + "px"});
			$(".pic-overlay img").css({"top": pxtop + "px"});

	}

	function centeringModalSyncer2(){
			var w = $(window).width();
			var h = $(window).height();

			var cw = $(".pic-overlay img").width();
			var ch = $(".pic-overlay img").height();

			var pxleft = ((w - cw) / 2 + 30);
			var pxtop = ((h - ch) / 2 + 30);


			$(".hoverNav1").css({"left": pxleft + "px"});
			$(".hoverNav1").css({"top": pxtop + "px"});
	}

	function centeringModalSyncer3(){
			var w = $(window).width();
			var h = $(window).height();

			var cw = $(".pic-overlay img").width();
			var ch = $(".pic-overlay img").height();

			var pxleft = ((w - cw) / 2 + 430);
			var pxtop = ((h - ch) / 2 + 30);


			$(".hoverNav2").css({"left": pxleft + "px"});
			$(".hoverNav2").css({"top": pxtop + "px"});
	}
	
	function centeringModalSyncer4(){
			var w = $(window).width();
			var h = $(window).height();

			var cw = $(".pic-overlay img").width();
			var ch = $(".pic-overlay img").height();

			var pxleft = ((w - cw) / 2);
			var pxtop = ((h - ch) / 2 + 335);


			$("#index").css({"left": pxleft + "px"});
			$("#index").css({"top": pxtop + "px"});
	}

});
```
### 試したこと
【prevボタンに対して】
１．現在拡大表示されている画像の番号を格納する変数（currentNum）を準備する
２．prevボタンが押されるとcurrentNumを減らす→拡大表示されている画像の1つ前の画像要素番号を取得する
まではやってみました。
３．2で取得したcurrentNumの画像のsrcを取得したいができない。そもそもそれができるものなのかも分からないです。

例えばサムネイル画像の2枚目（要素番号は1）をクリック→拡大画像のprevボタンをクリックして要素番号0を取得、その要素番号0の画像のsrcを取得してそれを.pic-overlay img　のscrに入れられたら1つ前の画像が表示されるのかと思っています。

jQueryでサムネイルを拡大表示したときのprevボタン、nextボタンの処理の設定がしたい

###発生している問題・エラーメッセージ
クラスファイルの含まれていないプロジェクトフォルダをターミナルから初めてコンパイルしたときは正常に各javaファイルのクラスファイルが生成されるのですが、2回目以降、コンパイル時にクラスファイルが更新または生成されません。
ただ、全てのファイルではなく、Main.javaなど更新・生成されるファイルもあります。

コマンド：javac Main.java
最初にコンパイルするときは問題なくコンパイル・実行でき、2回目以降もエラーメッセージなどがでないため原因が分かりません。

急にこの現象が起き、解決策も見当たらない状態ですので、少しでも心当たりのある方がいましたら、是非ご教示下さい。
よろしくお願いします。
```
Mac OS X 10.9.5
Sublime Text Build 3126
ターミナル バージョン 2.4
```

2回目以降、コンパイル時にクラスファイルが更新・生成されない

Postgresqlののサーバでpgbenchを実行しています。
その時、cpu使用率が50%程度で、cpu割り込みも発生せず、ioの値も5いくかどうかで推移しています。
メモリ使用率においても20%弱で推移して、swapも使用されていません

このような状態の時、OSはマルチタスクを実行するためにプロセスの切替が間に合っていない状態のようですが、
Load Averageを低減させる手段としてどのような対処方法がありますでしょうか

よろしくお願いします。

CPU使用率には余力があるのにLoad Averageが高くなる時の対処方法

RailsのHelperの使い所について。
現在RubyOnRailsを使ってブログのようなものを作成中です。

よくあるブログをメインに据え、右側には最新の記事の一覧が出るような形で作成しているのですが、レイアウトファイルのapplication.html.erbがごちゃごちゃしてきたので、整理しようとpartialを使いサイドバーに当たる部分を別のファイルに移しました。以下がコードです。
```Ruby
# _sidebar.html.erb
<div class="panel panel-default ">
  <div class="panel-heading">
    <h3 class="panel-title">
      最新の記事10件
    </h3>
  </div>
  <ul class="list-group">
    <% @articles = article.order("created_at desc").limit(10) %>
    <% @articles.each do |article| %>
      <li class="rink-list-item list-group-item padding-list-item" data-url="articleへのPath">
        <strong><%= article.title%></strong><br ><%= article.date.strftime("%Y年%m月%d日 %H時%M分") %><br >
        <%= article.username %><br ><%= raw article.content.truncate(50, omission: '・・・') %>
      </li>
    <% end %>
  </ul>
</div>
```
このようなデータ処理のようなものがビュー側に有るのは望ましくないと思っており、ここがHelperの使い所かな？と考えたのですが実際どのように書くと良いのかわからず迷っています。

皆様のこういったビュー側に処理が入ってしまう場合の対応についてお聞かせ下さい。

追記
もし、皆様の中でRailsのDRYな書き方について詳しく載っている書籍等ご存知の方が居らっしゃいましたらそちらも合わせて教えて頂ければと思います。

Railsでのhelperのつかいどころについて

Time.nowで取得した時刻から120秒前のまでの時刻で設定されているitemを
すべて取得するのは下記のコードであっていますか？

limit_day
```lang-ruby
item = Item.where(limit_day: Time.now..Time.now-120)
```

Rails4 Whereについて

大変お世話になっております。またご質問させていただきます。
###前提・実現したいこと
DBから取って来た値を加工してviewに表示したいです。

例えば、column1[金額1],column2[金額2],column3[フラグ]
というレコードをDBからActiverecordで取得して来た時に、フラグの値によって金額の集計方法を変えて、最終的にViewに表示したいです。

###発生している問題・エラーメッセージ
取得して来たレコードを、再度foreachで回すことで、実現は可能かと思うんですが、それではパフォーマンス的に問題があるので、この値の加工を、他言語で言う所のsetterメソッドのような形で処理させたいのですが、実現方法がわかりません。


###該当のソースコード
//今現在書いているコードです。Modelでのeachが原因で処理速度が落ちています。
```ここに言語を入力
controller
 @data = Model.getmethod
end

Model class
  self.def getmethod
  //何十万行のレコードが入ります。
  modeldata = Model.all
  modeldata.each |data|
  data.display_data = data.flg == 1 ? data.kingaku1 - data.kingaku2 : data.kingaku2 - data.kingaku1
  end  

return modeldata
  end
end
```

//どのように書くのかはわかりませんが、このような感じで、不要なeachを無くしたいです。データベースから値を取得したタイミングで、データの加工も同時にやってしまうようなイメージです。
```ここに言語を入力
controller
  @data = Model.getmethod
end

Model class
  self.def getmethod
    //何十万行のレコードが入ります。
    modeldata = Model.all
  end  

  def display_data_setter_method
    return  data.display_data = data.flg == 1 ? data.kingaku1 - data.kingaku2 : data.kingaku2 - data.kingaku1
  end
return modeldata
  end
end
```

###補足情報(言語/FW/ツール等のバージョンなど)
Ruby on Rails5

ruby on rails DBから取得した値を効率よく加工する方法　setterメソッドの使い方

> やりたいことの説明

現在、練習の一環としてQ&Aサイトを作成しています。これは、少数の専門家であるadviserがuserのquestionに対して答えるというものです。イメージとして、このテラテイルのイメージよりは、弁護士ドットコムのイメージとなります。

---

> 現在の問題点

現在、advierの管理画面を作成しています。adviser専用のログイン機能をdeviseで作成し、ログイン後は、管理画面にURLが飛ぶように設定します。

この管理画面ですが、投稿された、adviserに関連する質問を取得し、それに対して回答を提供できるようにしたいと考えています。

そこで、ルートを作成しましたが、ここに対してご意見を頂戴できればと思います。
一つは、namespaceで作成し、もう一つはネストで作成してみました。
ただ、どのルート設定にすればよいか、明確な判断基準が自分にないという問題があります。
一旦、namespaceで作成してみて、そのまま進めようと思いましたが、やはり違うのではないかと感じている次第です。

---
> 質問
①上記の状況で、以下のどのパターンを使うのが適切か?
②この状況で、namespaceを使うのは適切か?
※admin画面で、namespaceを使うケースがあるという理由で使い始めましたが、明確な根拠の説明はできません。

---
パターンA
```ここに言語を入力
namespace :adviser do
    get '/advisers' => "application#index", as: "advisers_root"
    resources :advisers, only: [:show]
    resources :questions, only: [:index, :show]
    resources :answers, only: [:index, :new, :create, :show, :edit, :update, :destroy]
  end
```


パターンB
```ここに言語を入力
resources :advisers, only: [:show] do
    # get '/advisers' => "application#index", as: "advisers_root"
    resources :questions, only: [:index, :show]
    resources :answers, only: [:index, :new, :create, :show, :edit, :update, :destroy]
  end
```

【rails】ルートの作成:namespaceはどの状況で使うか?

paramsからストロングパラメータを通して値を取得したいのですが、newを行った時に```nil```となってしまい、ネストされた要素の値が取得できません。

商品登録を行う処理で```has_many```で```includes```させた商品カテゴリーテーブルをネストしています。

カテゴリーはプルダウンメニューで選択するのですが、そのvalue（テーブルでいうところのid）が取得できません。
ストロングパラメータの書き方を色々変えてもできず、どのようにしたら、ストロングパラメータを通して取得できるのでしょうか？それとも、別の取得方法をするのでしょうか？
教えていただければ助かります。

テーブルの関係は、
productcategory **1対多** product

paramsの中身
```ここに言語を入力
Parameters: {
  "utf8"=>"✓", 
  "authenticity_token"=>"", 
  "product"=>{
     "product_name"=>"商品名",
     "productcategories"=>{
         "productcategory_id"=>"2"
     }
  },
 "commit"=>"商品を追加する"
}
```
取得できない要素は、カテゴリーテーブルの```productcategory_id```です。

product_controller.rb
```ここに言語を入力
def product_params
      product_params = params.require(:product).permit(:id, :product_name, productcategories: [:productcategory_id])
end
```

### モデル
product.rb
```ここに言語を入力
class Product < ApplicationRecord
  has_many :productcategories
  validates_associated :productcategories
  accepts_nested_attributes_for :productcategories
end

```
productcategory.rb
```ここに言語を入力
class Productcategory < ApplicationRecord
  belongs_to :poduct
  accepts_nested_attributes_for :product
end
```
### コントローラ
```
def new
    @product = Product.new
    @category = Productcategory.new
end

def create
    @product = Product.new(product_params)

    respond_to do |format|
      if @product.save!
        format.html { redirect_to @product, notice: '商品の追加完了' }
        format.json { render :show, status: :created, location: @product }
      else
        format.html { redirect_to new_product_url }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
end

private
def product_params
      product_params = params.require(:product).permit(:productname, productcategories: [:productcategory_id])
end
```

@productをデバッグしてみると
```ここに言語を入力
<Product id: 5, productname: "商品名A", productcategory_id: nil>
```
nilとなって取得できていません。

### view
カテゴリーはプルダウンメニューから選びます。

products/new.html.erb
```ここに言語を入力
<%= form_for @product do |f| %>
    <p><%= f.text_field :productname, placeholder: '商品名を入力', autocomplete: 'off' %></p>

    <%= f.fields_for :productcategories do |c|  %>
        <p><%= c.collection_select :productcategory_id, Productcategory.all, :id, :category, prompt: 'カテゴリーを選択' %></p>
    <% end %>

    <div class="formsubmit"><%= f.submit '商品を追加する' %></div>
<% end %>
```

paramsのネストされた値がストロングパラメータで取得できない

railsのバージョンは5.1です。

実現したいSQL
```
・・・ where users.name like '%hoge%'
```

かきたいイメージ
```
class User < ApplicationRecor
  scope :search_name, ->(name) {
    where(users: {name: "%hoge%"})
  }
end
```

こんなかんじで、テーブル名とカラム名をハッシュ形式で渡して、曖昧検索する方法があれば教えていただけないでしょうか？ テーブル名.カラム名 = ? のような書き方ではない方法で教えていただきたいです。

rails（active record）のlike検索について

こんにちは‼

railsのmodelの中で、以下のようなメソッドを定義しています。
```lang-＜rails＞
  def self.select_id()
    blog_indices=BlogIndex.select(:id ,:title)
    p blog_indices
  end

```

この場合、pで表示される結果は以下のようになります。

```lang-＜rails＞
#<ActiveRecord::Relation [#<BlogIndex id: 3, title: "sample title 2">]>
```

このメソッドを以下のように変更します。
(p blog_indices を p blog_indices.idに変更)
railsのmodelの中で、以下のようなメソッドを定義しています。
```lang-＜rails＞
  def self.select_id()
    blog_indices=BlogIndex.select(:id ,:title)
    p blog_indices.id
  end

```
この場合NoMethodErrorとなってしまいます。
selectは変更せずにidのみを取り出したいのですが、どのように実装すればよいでしょうか?

```lang-＜ここに言語を入力＞
    NoMethodError:
       undefined method `id' for #<ActiveRecord::Relation []>
```

よろしくお願いします‼

ActiveRecordからの値の取り出しについて

現在、Laravel5.1にて、
会員登録時にメールを送信
→登録者が送られてきたメールのリンクをクリックして会員登録完了
という機能を実装しようとしているのですが、うまくいきません。

###環境
OS:windows8.1
エディター:atom
xamppをつかってPHPとMysqlを動かしています。

###エラー内容
メールをLaravel側から送信すると、

**Swift_TransportException with message 'Connection could not be established with host smtp.gmail.com**

というエラーが帰ってきます。

###試したこと
・グーグルアカウントの設定にて安全性の低いアプリからのアクセスを許可
・グーグルのアプリパスワードを使ってログイン
・ポートを587に変更して送信
・MAIL_ENCRYPTIONをsslではなくtlsに変更して送信


###コード
.envファイル
```
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=〇〇〇〇@gmail.com（送信者アドレス）
MAIL_FROM_NAME=送信者名
MAIL_USERNAME=〇〇〇〇@gmail.com（送信者アドレス）
MAIL_PASSWORD=アプリパスワード
MAIL_PRETEND=false
```
mail.phpファイル
```ここに言語を入力
return [
     'driver' => env('MAIL_DRIVER', 'smtp'),
     'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
     'port' => env('MAIL_PORT', 587),

     'from' => [
       'address' => env('MAIL_FROM_ADDRESS', null),
       'name' => env('MAIL_FROM_NAME', null)
     ],

     'encryption' => env('MAIL_ENCRYPTION', 'null'),
     'username' => env('MAIL_USERNAME', null),
     'password' => env('MAIL_PASSWORD', null),
     'sendmail' => '/usr/sbin/sendmail -bs',
     'pretend' => env('MAIL_PRETEND', false),

];

```

###補足
MAIL_PRETENDをtrueにして、実際にはメールを送信せずにテストした際は、問題なくプログラムが走っているようなログが帰ってきたため、ソースコード自体には問題はないのでは…？と思います。
また、一時期問題なく送信できていたのですが、突然こういったエラーがでるようになってしまいました。
これもなにか理由があるのでしょうか…？

ご回答お待ちしております。よろしくお願いいたします。

laravel5.1にて会員登録時にメールにて認証を行いたい

■背景
パスワードリセットの画面を実装したいと考え、bladeを使って実装しています。
①bladeテンプレート
まず、laravelのbladeを使いmaster.blade.php(views/layouts/index.blade.php)というテンプレートを作成しました。
このmaster.blade.phpの中に、以下のように画像を表示するタグを書いています

```HTML
<img class="logo" src="image/logo.jpg" alt="logo">
```

このmaster.blade.phpを、
・index.blade.php(views/index.blade.php)
・email.blade.php(views/auth/password/email.blade.php)
で読み込んでいます。

②image
画像ファイルは以下に格納しています
public/image/logo.jpg
(ルートディレクトリはpublicです)

③route
index.blade.phpを表示する際は、

```PHP
Route::get('/', 'HomeController@index');
```

email.blade.phpを表示する際は、

```PHP
Route::get('password/email', 'Auth\PasswordController@getEmail');
```

です。

■症状
index.blade.phpを表示する際はlogo.jpgがちゃんと表示されるのですが、email.blade.phpを表示する際はlogo.jpgがちゃんと表示されません。
それぞれ画像のURLを見てみると、以下のようになっています。
①index.blade.phpの場合・・/image/logo.jpg
②email.blade.phpの場合・・/password/image/logo.jpg 

画像が格納されているフォルダが/image/logoなので②の場合は表示されていないのだと思うのですが、これはどのように解消すればいいのでしょうか。
ちなみに、検索して{{HTML::image()}}を使う方法等が出てきたのですが、laravel5.2あたりからHTMLが削除されたみたいな話もあり、実際に{{HTML::image()}}を使おうとするとそんなクラスはないよ、と言われてしまいます。

どうかお知恵をお貸し頂けますと幸いです。

宜しくお願い致します。

Laravelのbladeで画像表示したいがページによって表示されたりされなかったりする

###前提・実現したいこと
外部アプリケーションから送られてきたJsonをLaravelで受け取って、それをMysqlに登録する
###発生している問題・エラーメッセージ

```
{ "message": "SQLSTATE[HY000]: General error: 1364 Field 'user_name' doesn't have a default value (SQL: insert into `users` (`account_code`) values (account_code))", "exception": 
```

###該当のソースコード
```ここに言語を入力
public function userRegistration(Request $request){
        $request->all();
        dump($request->all());
        DB::table('users')->insert(
            ['account_code' => 'account_code'],
            ['user_name' => 'user_name']
        );
    }
```
###送られてきているJson
dump($request->all());で見た結果一部割愛していますが、Jsonそのものは取得できていると思います
```ここに言語を入力
  "account_code" => "19384724937"
  "user_id" => "4"
  "user_name" => "テストユーザー"
```

###試したこと
課題に対してアプローチしたことを記載してください
doesn't have a default value というのは、データベースのSQLモードに”STRICT_TRANS_TABLES”が追加されているため起こるそうなので

下記のようになっていたものを
mysql> SHOW GLOBAL VARIABLES LIKE 'sql_mode';
+---------------+---------------------------------------------------------------
| Variable_name | Value
+---------------+---------------------------------------------------------------
| sql_mode      | ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO
+---------------+---------------------------------------------------------------
1 row in set (0.01 sec)

このように変更しました
mysql> SET GLOBAL sql_mode=NO_ENGINE_SUBSTITUTION;
Query OK, 0 rows affected, 1 warning (0.00 sec)

mysql> SHOW GLOBAL VARIABLES LIKE 'sql_mode';
+---------------+------------------------+
| Variable_name | Value                  |
+---------------+------------------------+
| sql_mode      | NO_ENGINE_SUBSTITUTION |
+---------------+------------------------+

しかし結果は変わらずです。
原因はSQLモードに”STRICT_TRANS_TABLES”が設定されているからというわけではないのでしょうか？
問題点としてどのようなことが考えられますか？

###補足情報(言語/FW/ツール等のバージョンなど)
Laravel5.5 
Mysqlバージョン　5.7.20-0ubuntu0.16.04.1 
環境
Vagrant Homestead

laravelで受け取ったJsonをデータベースに保存するには

LarabelのDB速度の向上させたいです。
DBの回答が遅いです。

以下のような書き方をしていますが、以下のような書き方だとLeftjoinを全てのデータで行ってから検索するのでしょうか？
DBを連携して、ここのフィールドを検索して結果を出力したいです。

すみませんが、DB速度向上に向けて、アドバイスをご教授下さい。

```PHP
$listpart = DB::table('tableA')
	->leftJoin('tableB', 'tableA.FieldB', '=', 'tableB.FieldB')
	->leftJoin('tableC', 'tableA.FieldC', '=', 'tableC.FieldC')
if(!empty($s_word)){
	$listpart->where('tableA.FieldName', 'LIKE', "%{$s_word}%")
			->orWhere('tableB.FieldName', 'LIKE', "%{$s_word}%")
			->orWhere('tableC.FieldName', 'LIKE', "%{$s_word}%");
}
$listpart = $listpart->select('FieldA', 'FieldB', 'FieldC',
		DB::raw('AVG(eva_val) as rate_avg'), DB::raw('MAX(name) as name' ) )
	->groupBy('FieldA', 'FieldB', 'FieldC')
	->orderBy('tableA.updated_at', 'desc')
	->take(30)
	->get();
```

LarabelのDB速度の向上させたい

具体的な質問でなくてスイマセン…。
最近トレンドのlaravelのスキルを身に着けたいと思ってドキュメントや参考書を読み込んでみたのですが、
なかなか構築できるまではいっていません。

効率的な勉強法やlaravelを理解する上で構築しやすいコンテンツ等ありましたら教えてください。
よろしくお願いします。

みなさんのlaravelの学習法を聞かせてください

Swift4.0で、位置情報を活用したiOSアプリを作っています。バックグラウンドでも、位置情報を取得しようと思っています。

##
以下二つは、実装済みです。
・Info.plistのInformation background modesにRequired background modesを追加
・Capabilitiesタブ->Background ModesのLocation updatesをチェック
・Info.plistのNSLocationAlwaysAndWhenInUseUsageDescriptionも追加

### iPhone(実機)で起動した時、バックグラウンドで動かない

現在地を取得して、特定の位置から離れたらアラートを表示するという機能を実装したのですが、シュミレーターではバックグラウンドで動いているにも関わらず、実機に落とすと数百メートル歩いても動きません。（アプリを開いてホーム画面に戻った状態で、データが更新されません。locationManager.distanceFilter = 50を入れておりますので、50メートルごとにバックグラウンドでも更新するように記載もしています。）

こちら、記述しているコードを載せておきます。

``` ViewController.swift
import UIKit
import MapKit
import CoreLocation

// 目的地からの距離を計算する関数(緯度)
func calc(latitude:Double, currentLatitude:Double) -> Int{
    let latitudeDistance = (latitude - currentLatitude)
    // 330mより離れていたら (0.001 度ではおよそ 110.9m) 1を返す
    if (latitudeDistance < -0.001 || 0.001 < latitudeDistance) {
        return 1
    }
    return 0
}

// 目的地からの距離を計算する関数(経度)
func calc(longitude:Double, currentLongitude:Double) -> Int{
    let longitudeDistance = longitude - currentLongitude
    // 330mより離れていたら (0.001 度ではおよそ 110.9m) 1を返す
    if (longitudeDistance < -0.001 || 0.001 < longitudeDistance){
        return 1
    }
    return 0
}


// 現在地を取得して自動退席
class ViewController: UIViewController, CLLocationManagerDelegate {
    
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var Map: MKMapView!
    @IBOutlet weak var latitudeDebug: UILabel!
    @IBOutlet weak var longitudeDebug: UILabel!
    
    // NSUserDefaults のインスタンス
    let userDefaults = UserDefaults.standard
    
    // locationManagers
    let locationManager = CLLocationManager()
    
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        
        let location = locations[0]
        
        if let newLocation = locations.last{
            print("((newLocation.coordinate.latitude), (newLocation.coordinate.latitude))")
        }
        
        // 住所 (緯度、経度)
        let lati:Double  = 37.33186, longi:Double = -122.030248
        let currentLatitude  = location.coordinate.latitude  // 現在の緯度(中央値)
        let currentLongitude = location.coordinate.longitude // 現在の経度(中央値)
        let span:MKCoordinateSpan = MKCoordinateSpanMake(0.016, 0.016) // 表示している範囲 (0.001で約110.9m)
        let myLocation:CLLocationCoordinate2D = CLLocationCoordinate2DMake(currentLatitude, currentLongitude)
        let latitudeDistance = calc(latitude:lati, currentLatitude:currentLatitude)      // 緯度が指定の範囲を超えたら1を返す。
        let longitudeDistance = calc(longitude:longi, currentLongitude:currentLongitude) // 経度が指定の範囲を超えたら1を返す。
        
        if (0 != (latitudeDistance + longitudeDistance)){
          // 処理
        }
        
        let region:MKCoordinateRegion = MKCoordinateRegionMake(myLocation, span)
        Map.setRegion(region, animated: true)
        
        print(location.altitude)
        print(location.speed)
        
        self.Map.showsUserLocation = true
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Keyを指定して読み込み
        let rec: String = userDefaults.object(forKey: "Record") as! String
        
        label.text = rec
        print(rec)
        
        locationManager.delegate = self
        locationManager.distanceFilter = 50 // 50m離れたら通知
        locationManager.requestAlwaysAuthorization() // 常に許可
        locationManager.startUpdatingLocation() //位置情報を更新
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

```