常連

注目の的

社会貢献

質問力

```JavaScript

$(function() {
  $('#outputBtn').click(
    function(){
      setDownloadBox();
    });
function setDownloadBox(){
  $.ajax({
      type:'POST',
      url :'getCSV.php',
      data:{key:'value'}
  }).fail(function(){
      alert('error');
  }).done(function(buf){
     result = JSON.parse(buf);
     for(var value of result){
       $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`);
     }
  });
}
})

```

ajaxを使った処理を含む関数をボタンのクリックイベントで発火させようとしているコードになります。

setDownloadBox()の動作,クリックイベントの挙動はそれぞれ単体で正常に動いていることは確認しているのですがボタンをクリックしても何も動作しません。
コンソールでのエラー、等も出ていない模様です。
記述箇所はbodyタグの直前になります。
どなたかご教授お願いいたします

```JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>beaconLog</title>
</head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#outputBtn').click(
    function(){
      setDownloadBox();
    });
function setDownloadBox(){
  $.ajax({
      type:'POST',
      url :'getCSV.php',
      data:{key:'value'}
  }).fail(function(){
      alert('error');
  }).done(function(buf){
     result = JSON.parse(buf);
     for(var value of result){
       $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`);
     }
  });
}
})
</script>

<body>
<?php
  $env = [.....];
  $envSelectBox = "<select name=\"selectedEnv\">\n";
  for ($i = 0; $i < count($env); $i++) {
    $envSelectBox .= "\t<option value=\"{$env[$i]}\">{$env[$i]}</option>\n";
  }
  $envSelectBox .= "</select>\n";

  date_default_timezone_set("Asia/Tokyo");
  $defaultFirstDate = date("Y年m月d日H時", strtotime("-1 hour"))."0分0秒";
  $defaultLastDate  = date("Y年m月d日H時")."59分59秒";

  $refineItemList = [.....];
  $refineItemBox = "";
  foreach ($refineItemList as $key => $value) {
    $refineItemBox .= "{$value}<br>\n<input type=\"text\" name=\"{$key}\"><br>\n";

    // 末尾のアンダーバーで初期値チェックを判断
    $outPutItemList = [.....];
    $outputItemBox = "";
    $i = 1;
    foreach($outPutItemList as $key => $value) {
      $outputItemBox .= "<input type=\"checkbox\" name=\"outputItem[]\" value=\"{$key}\"";
      $pattern = "/_/";

     if(preg_match($pattern, $value)){
        $result = preg_replace($pattern, "", $value);
        $outputItemBox .= "checked >{$result}\n";
      }
      else{
        $outputItemBox .= ">{$value}\n";
      }

      // 4項目ごとに改行
      if($i % 4 == 0){$outputItemBox .= "<br>\n";}
      $i ++;
    }
?>

<h2>入力項目</h2>

<form action="<?php echo $_SERVER["PHP_SELF"]?>" method="post">

環境<br>
<?php echo "{$envSelectBox}<br>";?>

From 年月日時分秒<br>
<input type="text" size="30" value=<?php echo $defaultFirstDate;?> name="FirstDate"><br>

To 年月日時分秒<br>
<input type="text" size="30" value=<?php echo $defaultLastDate;?> name="LastDate"><br>

<?php echo "<h2>絞り込み項目</h2>";
      echo $refineItemBox;
      echo "<input type=\"submit\" id=\"outputBtn\" value=\"出力\" />";
      echo "<h2>出力項目</h2>";
      echo $outputItemBox;

      $reqList = [.....];
      $reqOutputItem  = $_POST["outputItem"];
      $reqList = array_merge($reqList, $reqOutputItem);
      $command = ......;
      foreach($reqList as $index => $value) {
        $command.= " \"{$value}\"";
      }
      exec($command);
?>
<div id="downloadBox">
</div>

</form>

</body>

</html>

```

変数の内容は事情により省略していますがこれがソースコードの全文になります。
下記コードのコメントアウト部分でそれぞれ処理の流れを追いましたが特に止まっている個所はなく処理が進んでいるようでした....
またbuf,resultをコンソールログで確認したところ正常に値が入ってはいるのですがなぜか一瞬で表示が消えてしましました。
```JavaScript
function setDownloadBox(){
  //alert('check');
  $.ajax({
      type:'POST',
      url :'getCSV.php',
      data:{key:'value'}
  }).fail(function(){
      alert('error');
  }).done(function(buf){
     //alert('check');
     result = JSON.parse(buf);
     for(var value of result){
       $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`);
     }
    //alert('check');
  });
}
```

クリックイベントにajaxを使った処理の関数を登録すると発火しない

### 前提・実現したいこと

ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。

### 試したこと

もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(function(){
	// #で始まるリンクをクリックしたら実行されます
	$('a[href^="#"]').click(function(){
		// スクロールの速度
		var speed = 800; // ミリ秒で記述
		// アンカーの値取得
		var href= $(this).attr("href");
		// 移動先を取得
		var target = $(href == "#" || href == "" ? 'html' : href);
		// 移動先を数値で取得
		var position = target.offset().top;
		// スムーススクロール
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

```
```js
// ラジオボタン2段階で表示
document.addEventListener('change',function(e){
	  var t=e.target;
	  if(t.name=="move"){
	    Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){
	      if(x.id==t.value){
	        x.style.display="block";
	        Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){
	          y.checked=false;
	        });
	      }else{
	        x.style.display="none";
	      }
	    });
	  }
	  if(t.name=="grade"){
	    Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){
	      x.style.display=(x.id==t.value)?"block":"none";
	    });
	  }
	});

```
```html
<div class="radio_button_box">
<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>
</div>


<div class="second" id="radio_button_1">
<div class="radio_button_box">
<label><input type="radio" name="grade" value="e">あああ</label><br />
<label><input type="radio" name="grade" value="b-2">いいい</label>
</div>
</div>

```

```css
/* ラジオボタン */
[name=status_x] {
	display: none;
}
[name=status_x]+div {
	display: none;
}
[name=status_x]:checked+div {
	display: block;
}
.second , .third{
	display: none;
}

/* ラジオボタン用ボックス */
.radio_button_box {
	border: solid 1px #6091d3;
	padding: 10px 15px;
	margin: 5px 0;
}
.second .arrow_down ,
.third .arrow_down {
	margin: 20px 0;
}

/* わく */
.border-box-container2 {
	border: solid 1px #cccccc;
	margin-top: 10px;
	padding: 0 20px 10px;
	border-radius: 5px;
	background-color: #f8f8f8;
}

```


htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。

### 追記

説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。

jqueryを使ってページ内遷移させる（animate）

boxAに入っている値をappendToを使いboxBに移動させました。
boxBの値をボタンクリック後、alertで表示させたいのですがうまくいきません。
コードが下記になります。
教えていただけると助かります。

```html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title></title>

		
		<link href="" rel="stylesheet">
		
		<script src=""></script>
	</head>
	<body>
		<div id = "boxA">
			<div class = "aaa">aaa</div>
			<div class = "bbb">bbb</div>
		</div>
		<div id = "boxB"></div>
		<input type = "submit" id = "button">
		<script type="text/javascript" src=""></script>
  </body>
</html>

```
```javascript
$(function(){
	$(".aaa").click(function(){
		$(".aaa").appendTo("#boxB");
	});
});

$(function(){
	$(".bbb").click(function(){
		$(".bbb").appendTo("#boxB");
	});
});
$(function(){
    $(".aaa").click(function(){
        $(".aaa").appendTo("#boxB");
    });
});

$(function(){
	$("#button").click(function(){
		var delivery = $("#boxB");
		alert(delivery);
	});
});

```
```css
body { text-align: center;
}
#boxA { width: 180px;
  height: 250px;
  border: 1px solid black;
  float: left;
}
#boxB { width: 180px;
  height: 250px;
  border: 1px solid black;
  float: left;
```

appendToで移動させた値をalertで表示したい

ファイルアップロード処理を、Queueで非同期に実行しようとしていますが、

Queueで以下のように設定すると、
  public function handle(Request $request)
    {
      $filename1 = $request->file('file1')->store('public/image');

このエラーが発生します。
Symfony\Component\Debug\Exception\FatalThrowableError: Call to a member function store() on null in C:\xampp\htdocs\rekognition\app\Jobs\QueueTest.php:41
Stack trace:
#0 [internal function]: App\Jobs\QueueTest->handle(Object(Illuminate\Http\Request))

queueを経由しないとアップロードは正常にアップロードされます。

queue経由は、ルートで以下を設定しています。
Route::post('/upload', function (Request $request) {
    $log = (new App\Jobs\QueueTest($request));
    dispatch($log);

参考にですが、viewで以下のように対象ファイルをrequestに設定するようにしています。
{!! Form::open(['url' => '/upload', 'method' => 'post', 'files' => true,'enctype'=>'multipart/form-data']) !!}
<div class="form-group">
  {!! Form::label('file1', '比較画像', ['class' => 'control-label','height' => '200']) !!}
  <input type="file" id="kobetsu" name="file1" ><br><br>

ジョブへのパラメータの渡し方がよくないのでしょうか？

Laravel　Queue　ファイルアップロード

現在、Atomの正規表現機能を使って、以下のようなテキストから ”” 内の文字列のみ!!!!
を選択したいと思っています。どうすればいいんでしょうか。

```
xx.xx.xx.xx.cc.wariate.jp text = "HK"
```

正規表現で""内の文字列を抽出したい

Python をはじめたばかりの初心者です。

Python はプログラミング言語として初心者が始めやすく扱いやすいとして紹介されていました。

プログラミング言語を学ぶうえでも、言語の将来性が高いことやgoogleなどにも採用されている等で、実用性が高いということで魅力的であるといわれているようです。ただ、、

自分の中ではいまだ Python の良さがいまいちわかりません。以下が理由です。
---

（よくあるPythonの紹介）
- Python は対話的にプログラミングができるからいい。
→プログラミングって対話的にやってる人いなくない？？ 

- Python は、いろいろ使えるしライブラリーが豊富、海外でもユーザーが多い。
→ライブラリの使い方がわからない。海外にユーザー多くても英語で読めないので結果使えない。そもそもAPIの説明書を見てもよくわからない。

- Python は、インストールも簡単だから初心者もOK、Linuxを使ってるひとならコマンドで...
→そもそも初心者ってLinux 使ってるのか？ コマンドって黒い画面（コマンドプロンプト）から初心者はやらなくない？？

- Python でTweepyを使うなら、pip から簡単に...
→pip ってなに？

--
わたしがいま直面しているのがこのようなところです。結局pythonをいじり始めて、参考書片手に基礎を進めていますが、いまいち広がりが感じられず、そもそもpythonって初心者に優しいのかが疑問になってきました。紹介されているコードも結構動かなかったりしてるので、何が正しいのかもわからず頓挫しています。


Pythonの良さや、わかりやすい参考書、あるいは初心者がPythonを使いこなせるようになるためにいいサイトなどがあればご教示いただけますでしょうか？

Python の良さを知りたい

AWS にて mysqldump の取得を Lambda で自動化しています。
後述する関数コードで正常に取得できていましたが DB のデータ量が増えてから下記のメッセージが出て取得に失敗するようになってしまいました。
Lambda 関数設定画面よりメモリ設定を 1024MB → 1536MB に変更してみましたが、メッセージ内容は変わらず失敗。(後述のメッセージはメモリ値変更後のもの)

対処方法をご教授頂きたく思います。
環境情報を記載します。(足りない情報ありましたら追記致します)

例えばですが、mysqldump コマンドのオプション「--single-transaction」を指定出来れば…とも考えましたが、Node.js上でコマンドオプションの指定は可能なのでしょうか。

　
[Lambdaログ]
(Cloudwatchログに出力されたもの)
```
START RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a Version: $LATEST
END RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a
REPORT RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a	Duration: 9208.56 ms	Billed Duration: 9300 ms Memory Size: 1536 MB	Max Memory Used: 1536 MB	
RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a Process exited before completing request

START RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a Version: $LATEST
END RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a
REPORT RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a	Duration: 9429.58 ms	Billed Duration: 9500 ms Memory Size: 1536 MB	Max Memory Used: 1536 MB	
RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a Process exited before completing request

START RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a Version: $LATEST
END RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a
REPORT RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a	Duration: 9621.80 ms	Billed Duration: 9700 ms Memory Size: 1536 MB	Max Memory Used: 1536 MB	
RequestId: 19d4d7ed-cd4b-11e7-a42f-a13c00653d3a Process exited before completing request
```
　
[Lambda]
・関数コード設定　(ランタイム：Node.js 4.3)
mqldump コマンドで取得後、S3バケットに配置してます。
```
'use strict';

const AWS = require('aws-sdk');
const mysqlDump = require('mysqldump');
const fs = require('fs');
require('date-utils');

var date = new Date();
var timeStamp = date.toFormat('YYYYMMDDHH24MISS');
// dumpファイルのファイル名
const dumpFileName = 'dump_' + timeStamp + '.sql';
const dumpPath = '/tmp/' + dumpFileName;

// メインの処理
exports.handler = (event, context) => {

      // mysqldumpを実行
      mysqlDump({
        host: process.env.HOST,
        user: process.env.USER,
        password: process.env.PASSWORD,
        database: process.env.DBNAME,
        dest: dumpPath
      }, (err) => {
        // エラーが起こった場合、ログを出力
        if (err) {
          context.fail(err);
          console.log('mysqldump error:' + err);
        } else {
          console.log('mysqldump saved.');
          // mysqldumpの作成が成功した場合、S3へdumpファイルを送信する
          sendS3();
        }
      });

};

// S3へdumpファイルを送信する
function sendS3() {
  const s3 = new AWS.S3();

  var params = {
    Bucket: 'バケット名',
    Key: 'sqlbackup/' + dumpFileName,
    Body: fs.readFileSync(dumpPath)
  };

  // S3にmysqldumpを配置する
  s3.putObject(params, (err) => {
    if (err) {
      console.log('S3 PutObject error:', err);
    } else {
      console.log('mysqldump is uploaded to S3.');
    }
  });
}
```

・基本設定
メモリ　　　：1536MB(MAX)
タイムアウト：2分30秒
　
　
[RDS]
エンジン　：MySQL 5.7.16
タイプ　　：db.m4.2xlarge
ストレージ：30GB

DB 総容量：
```
mysql> select table_schema, sum(data_length+index_length) /1024 /1024 as MB from 
information_schema.tables where table_schema = database();
+--------------+-----------+
| table_schema | MB        |
+--------------+-----------+
| ***          | 15969.765 |   現在 約15GB
+--------------+-----------+
1 row in set (0.03 sec)
```

AWS Lambdaでのmysqldump取得失敗

表題の通りで

Javascript単純に1の処理が終わったら2の処理、2の処理が終わったら3の処理と直列処理をしたいのですが
なかなか期待通りの結果になりません

```ここに言語を入力
$.when(
).done(function(){
});
```

これなどが近いと思うのですが１，２が並列で３が最後の処理しかできず
１→２→３　直列のサンプルがどこにもありませんでした

Javascriptは順番に処理するような直列処理は向いていないのでしょうか
直列処理が必須なアニメーションなどはどうやって作ってるんでしょう？？


分かる方お教えくださいませ

Javascriptで直列で3つ以上の処理を順番に発火させたい

下記コードにて
bodyとimgのformを作成しているのですが
formの中の値を消すのは
```ここに言語を入力
$('#フォーム名')[0].reset();
```
で実装はできています。

ただ
リセットボタンが押された場合、
$.ajaxで作り出したbodyとimgのクラスも含めデータを消すということをしたいのですが実現は可能でしょうか？
可能な場合どのようにすれば実現可能でしょうか？
参考サイト、サンプルコード等あれば教えていただきたいです。

```ここに言語を入力
                     $.ajax({
                                //送信設定 省略

                                }, false);
                            }
                            return xhr;
                        },
                        success: function(imageData, status, xhr) {
                            var res = {};
                            try {
                                res = $.parseJSON(xhr.responseText);
                            }catch (e) {}
                            $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" / >");
                            $('<input>').attr({
                                type: 'textarea',
                                name: "body["+res.img_id+"]",
                                value: "",
                            }).appendTo('form');
                            $('<input>').attr({
                                type: 'hidden',
                                name: "img["+res.img_id+"]",
                                value: res.img_id,
                            }).appendTo('form');
                        },
```

JavaScriptでタグの削除をしたい。

WordpressにてMySQLのデータベースからデータを検索して
取り出す仕組みを作成しています。

二つのカラムに対してそれぞれ検索条件に一致する物を取り出し、
条件指定が無い場合は全て読み出すようにしたいと考えています。
この場合、どのように条件をプレースホルダへ渡せば良いでしょうか。

具体例は次の通りです。

テーブルには三種類のカラムがあります。
 1.車名
 2.メーカ 
 3.タイプ

検索条件(変数)は$makerと$typeの二種類で、
値はセレクトフォームからPOSTで取得する形です。

$maker="トヨタ", $type="セダン"の場合は問題なく該当車名が取り出せます。
$maker="トヨタ"でタイプを問わずに検索する、
$type="セダン"でメーカを問わずに検索する、
またはどちらも問わずに検索する場合の方法についてご教示いただけないでしょうか。

検索部分のコードは次の通りです。
```php
$maker = $_POST['maker']; 
$type = $_POST['type'];

$sth = $wpdb->prepare("SELECT name FROM $wpdb->data WHERE maker = '%s' AND type = '%s'", $maker, $type);
$rows = $wpdb->get_results($sth);
```

MySQLの複数条件検索

問題：GitHubからLinuxサーバーにあるディレクトリーに自動的にリアルタイムでPullできるようにはなっていますがいくつかのディレクトリーに同時にPULLした時にプロセスの処理が次々と実行されてサーバーが落ちしまいます。

質問・実行したいこと：
    どうしたい上記の問題を解決できますか？
    これを先のプロセスが終わってから次の処理が実行できるように変更したいのですが良くわからなくて誰かが教えていただきますか?

こちらのGitバッチ処理です.
```
#!/bin/bash
#指定されたブランチをpullする
export PATH=$PATH:/usr/local/bin

GIT_DIR=.git

# pull対象ブランチ
BRANCH_ARR=("master" "master")

# 更新対象ディレクトリ
DIR=/var/www/vhosts/system
DIR_ARR=("bokemon" "lalago")

# log
LOG=/var/www/vhosts/system/logs/git/gitpull.log

datestr=`date +%Y/%m/%d_%H:%M:%S`
echo "$datestr git pull start." 1>>$LOG 2>&1

for (( i=0; i<${#DIR_ARR[@]}; i++ ))
do
        target_dir=${DIR_ARR[$i]}
        branch=${BRANCH_ARR[$i]}

        # 反映先ディレクトリへ移動する
        cd "${DIR}/${target_dir}"
        echo "${DIR}/${target_dir}" 1>>$LOG 2>&1

        # 反映したいブランチと現在のブランチが同じか確認する
        current=`git rev-parse --abbrev-ref HEAD`
        if [ "$current" != "$branch" ]; then
            # $BRANCHと異なる場合はcheckoutし直す
            `git checkout $BRANCH` 1>>$LOG 2>&1
        fi

        # git fetch後、diffで差分があるか確認する
        fetch=`git fetch`
        diff=`git diff origin/$branch`

        # 更新処理を実施
        if [ ${#diff} != 0 ] ; then
            # 差分がある場合は反映する
            `git reset --hard origin/$branch` 1>>$LOG 2>&1
            echo "git reset --hard origin/${branch}"

        fi
done

# バッチ終了
datestr=`date +%Y/%m/%d_%H:%M:%S`
echo "$datestr git pull finish." 1>>$LOG 2>&1

exit 0
```

GitHubからLinuxサーバーにPULLするバッチ処理について

以下のようなオブジェクトがあり、

Object {69a560179519: { id: 1, time:11:00}, 1b6507a0111a: { id: 2, time:13:00}, 08dda86dc511{ id: 3, time:12:00}}

time順にソートしたいのですが、いろいろ調べても
配列のソートはでてくるのですがオブジェクトについてのっておらず、
ご教示いただけないでしょうか。

※keyについては乱数なのでとくに気にされないでください

javascriptのobjectのソートについて

それをはじめてみたのはPerlの書籍だったでしょうか。
最初は、クロシージャと読み間違え、プロシージャの誤植だと思ったのですが違いました。
その頃は、そんなもの無くてもプログラミング出来てました。(今もやってますが)

時は流れて、JavaScriptが大流行、Java8がリリースされる頃になって
やたら？たまに聞くようになってとっても気になるクロージャですが、
どうもいつまで経ってもわかった気になりません。

もちろん、色々なサイトや書籍で事あるごとに説明を読むのですが、
私の理解では、ざっくり関数内のstatic変数？ くらいの認識までにしか至らずに今まで参りました。

自分のあずかり知らぬところで世の開発者の皆様はクロージャーを日々駆使しているのでは無いかと思うと夜も眠れません。(もちろん嘘ですが)
何かそのせいで、自分のコーディングは日々回り道をしているのではととても気になります。
(Javaのインターフェースが分かった時には、パーン！みたいな感動があったので、もしかしたらそのようなことがあるのではと思ってます)

前置きが長くなりましたが、テラテイルだからこそこのような質問に答えてくれる方がいるに違いないと思い、恥を忍んで質問いたします。

他のサイトや書籍で読める説明的な説明はいりません。
クロージャに関して、以下の様なことを教えて下さい。

- クロージャってひとことで言うと何？ (多少語弊のある表現でも構いません)
- 分かった！って思った瞬間を覚えていたら、その時のことを教えて下さい。
- 結局、どんな時に使いますか？ 短いコードで表せたら知りたいです。
- タグに上げた以外でクロージャを使える言語はありますか？
- もしよろしければ、理解のための例題をくださると嬉しいです。
- 上記以外で、理解のためのに必要なことがあれば、とにかく教えて下さい。

全てでなくてもいいです、答えられることだけで構いません。

お忙しい中めんどくさい質問ですいませんが、よろしくお願い致します。

---
**追記** 2016/07/14 1:00

言語ごとに多少なりとも解釈や用途が違うということがあると思います。
その場合、統括的な解説なのか、言語特有な説明なのか明示して頂けると齟齬もなくなるかと思います。

では、改めてよろしくお願い致します。