OmniAICreator/Qiita-1.07M huggingface dataset:
ES6なクラスをmocha,chaiでテストする

結論から言うといつものmochaコマンドを

```
mocha --compilers js:babel-core/register
```

とすればトランスパイルが走ってES6をテストできます。

## 例

例えばこのようなクラスがあったとします

```ReceiveParameter.es6

export default class RecieveParameter {
  constructor(e) {
    const req = JSON.parse(e.postData.contents);
    const payload = req.payload;
    this.status = payload.status;
    this.subject = payload.subject;
    this.build_url = payload.build_url;
    this.branch = payload.branch;
    this.reponame = payload.reponame;
    this.username = payload.username;
  }

  returnParams() {
    return {
      status: this.status,
      subject: this.subject,
      build_url: this.build_url,
      branch: this.branch,
      reponame: this.reponame,
      username: this.username,
    };
  }
}

```

このクラスをテストするスクリプトは、以下となります。

```ReceiveParameterSpec.es6

import chai from 'chai';
import ParameterClass from 'ReceiveParameter';
let should = chai.should();
// import {should, expect} from 'chai';

describe('ParameterClass', () => {
  const contents = {
    payload: {
      status: 'fixed',
      subject: '',
      build_url: '',
      branch: '',
      reponame: '',
      username: ''
    }
  };
  const request = {
    postData: {
      contents: JSON.stringify(contents)
    }
  };
  let params;

  beforeEach(() => {
    params = new ReceiveParameter(request);
  });

  context('this is first test script.', () => {
    it('test!', () => {
      const result = params.returnParams();
      result.status.should.equal('fixed');
    });
  });
});

```

テストスクリプトの中でも`import`の様なes6構文が使えます。

あとは`mocha`と`chai`をインストールして

```
mocha --compilers js:babel-core/register
```

コマンドを実行してください。

このコマンドはトランスパイルを実行するので、babelの設定を忘れないでください。

自分の場合、`babel-preset-latest`をインストールしています。

## まとめ

es6によりJavaScriptがよりOOPしやすい言語となり、テスト・振る舞い駆動開発と相性がよくなった印象です。

## 参考文献

* [Problem: Instructions on mocha testing integration no longer correct with babel 6](https://github.com/babel/babel/issues/2685)
* [Babel6でMochaとChaiを使ったテストを書く](http://qiita.com/ymdu/items/9885c9e126648cd8c5e3)
* [Mocha + Chai.js unit testing for ES6 with Istanbul code coverage](https://onsen.io/blog/mocha-chaijs-unit-test-coverage-es6/)
Node.js から API Gateway を簡単に使えるパッケージ作りました

# はじめに
AWS API Gateway は便利なサービスですが、Node.js から使おうとすると、自動で生成される JavaScript のSDKがブラウザ用しか用意されていなかったり、エンドポイントごとにメソッドが自動で生成されていて、APIのエンドポイントを変更するごとにSDKを生成し直さなければならなかったりと不便だったため、Node.js から API Gateway を簡単に使えるパッケージを作りました。

**aws-api-gateway-client**
https://github.com/kndt84/aws-api-gateway-client

参考：
[API Gateway で生成した JavaScript SDK を使用する](
http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-generate-sdk-javascript.html)
[IAM認証(AWS SignatureV4)でAPIGatewayをNode.jsから呼び出す]
(http://qiita.com/toshihirock/items/a92cbda51d5f469bb0ac)

# 事前準備
APIを利用するためには、Cross-Origin Resource Sharing (CORS) を有効にする必要がありますので、下記のページを参考にCORSを有効にします。

[API Gateway リソースの CORS を有効にする]
(http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html)

# インストール
npm コマンドでインストール可能です。

```shell-session
npm install aws-api-gateway-client
```

# SDKの利用

## モジュールのリクエスト

```js
var apigClientFactory = require('aws-api-gateway-client')
```

## クライアントの作成
config に invokeUrl を設定して、クライアントオブジェクトを生成します。ただし、config にはIAMもしくはAPIキーを追加で設定する必要があり、これらは下記で説明します。

```js
config = {invokeUrl:'https://xxxxx.execute-api.us-east-1.amazonaws.com'}
var apigClient = apigClientFactory.newClient(config);
```

##　IAM認証

AWSの認証情報を利用してアクセスする場合は、クライアントオブジェクトを生成する時点で、invokeUrl に加えて、アクセスキー、シークレットキー、セッションキーを下記の通り設定します。

```js

var apigClient = apigClientFactory.newClient({
    accessKey: 'ACCESS_KEY',
    secretKey: 'SECRET_KEY',
    sessionToken: 'SESSION_TOKEN', //OPTIONAL: If you are using temporary credentials you must include the session token
    region: 'eu-west-1' // OPTIONAL: The region where the API is deployed, by default this parameter is set to us-east-1
});
```

##　APIキー認証
APIキーを使う場合は、invokeUrl に加えて、下記の通りキーを設定します。

```js
var apigClient = apigClientFactory.newClient({
    apiKey: 'API_KEY'
});
```

# パラメータの設定

```js
var params = {
    //This is where any header, path, or querystring request params go. The key is the parameter named as defined in the API
    userId: '1234',
};
// Template syntax follows url-template https://www.npmjs.com/package/url-template
var pathTemplate = '/users/{userID}/profile'
var method = 'GET';
var additionalParams = {
    //If there are any unmodeled query parameters or headers that need to be sent with the request you can add them here
    headers: {
        param0: '',
        param1: ''
    },
    queryParams: {
        param0: '',
        param1: ''
    }
};
var body = {
    //This is where you define the body of the request
};
```

# APIのコール
上記で設定したパラメータを下記のように引数にとってAPI をコールします。API はプロミスオブジェクトを返し、成功または失敗のコールバック関数を呼びます。

```
apigClient.invokeApi(params, pathTemplate, method, additionalParams, body)
    .then(function(result){
        //This is where you would put a success callback
    }).catch( function(result){
        //This is where you would put an error callback
    });
```
Bluemix PHPにPDOやMySQLi、FTP、ZipArchiveなどの設定を拡張する

## 経緯
Bluemixでphpを立ち上げたが、デフォルトではftp_connectやfileinfoが利用できなかったので、その設定を記録する。

## 前提
- BluemixのIBM IDをすでに登録済み（トライアルでも可）であること
    - 登録していない人はhttps://console.ng.bluemix.net/registration から登録
- phpアプリを作成済みであること
- Web IDEを起動できること
    - GitHub経由でソースコード編集、もしくはCFコマンドでの操作でも可能

## 内容
1. phpアプリの直下に「.bp-config」フォルダを作成し、その直下に「options.json」ファイルを作成
    <img width="288" alt="スクリーンショット 2017-01-11 00.59.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/ac9ada43-e8e9-3d53-14b2-afb22dd196e5.png">
1. 「options.json」を下記のように記載
    
    ```json:options.json
    {
        "PHP_EXTENSIONS": [ "bz2", "zlib", "curl", "mcrypt", "mbstring", "mysql", "pdo", "pdo_mysql", "fileinfo", "ftp", "zip" ]
    }
    ```
1. アプリをデプロイ

以上。

## 補足
- Web IDEやGitHub経由でアプリをデプロイすると、メモリの容量は**アプリの概要画面で設定したものではなく、manifest.ymlに記載された方が優先となる**ため、従量課金の金額を気にしている人は気を付けること。
- phpのバージョンは5.5.34
指定のフォルダにGoogle Spreadsheetを新規作成し，セルに入力するGoogleAppsScript関数

# Google Spreadsheetを特定のフォルダに新規作成

* Google Drive上に適当なフォルダを作成してそのフォルダを開く。
* URLからIDを確認する。たとえば，「https://drive.google.com/drive/u/1/folders/0B5ucsT8e6********dJM0NpWXM」の「folders/」の後ろの部分が，フォルダのID。
* 次のcreateSpreadsheetInfolderの第一引数「**********」は，そのフォルダIDを指定し，第二引数でSpreadsheetのファイル名を指定する。
* あとはIDをゲットしてオープンして，アクティブシート設定して，アクティブシートをゲットして，setValue, getValueでセルへの書き込みと読み込みができる。

```java:テンプレート
function main(){
  var ssNew = createSpreadsheetInfolder("**********", "test");//フォルダのIDは別途調べておく
  var ssNewID = ssNew.getId();//IDをゲット
  var ssNewFile = SpreadsheetApp.openById(ssNewID);//オープン
  var activeSpreadsheet = SpreadsheetApp.setActiveSpreadsheet(ssNewFile);//アクティブシートに設定，操作が有効なシート
  var masterSheet  = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];//アクティブシートをゲットする
  setValue(masterSheet, 1, 1, "データ");
  ･･･

}

function createSpreadsheetInfolder(folderID, fileName) {
  var folder = DriveApp.getFolderById(folderID);
  var newSS=SpreadsheetApp.create(fileName);
  var originalFile=DriveApp.getFileById(newSS.getId());
  var copiedFile = originalFile.makeCopy(fileName, folder);
  DriveApp.getRootFolder().removeFile(originalFile);
  return copiedFile;
}

function getValue(sheet,row,col) {//spreadsheetからrow行のcal列のデータをもらってくる関数
  var value = sheet.getRange(row, col).getValue();
  return value;
}

function setValue(sheet,row,col,value){//row行のcal列にデータをセットする関数
  var cell = sheet.getRange(row,col);
  cell.setValue(value);
}

```
クライアントに埋め込まれたクエリを簡単にSQLで実行出来るようにする


``` zsh/bash
pbpaste | awk 'match($0, /\"(.+?)\"/) {print substr($0, RSTART, RLENGTH)}' | sed 's/\"//g' | pbcopy
```

例）

```
hoge.append("select");
hoge.append("   id,");  //  hogehoge
hoge.append("   name"); //  piyopiyo
hoge.append("from hoge");
```

よくあるクライアントに埋め込まれたコードです。(VBこんな感じだった気がする)
上記をコピペして、最初のシェルを叩くと

```
select
   id,
   name
from hoge
```

がクリップボードに得られます。

**もちろん where などで動的に何かクライアントから変数入れてる所は、手で修正する必要があります。**

色んなスタイルがあると思うので、全対応は難しい気がする。。
大体はこれでいけると思うので、適時弄ってエイリアスとか付けて使って貰えると、ちょっとだけ幸せになれると思います。（多分

~~余談ですが、最初pythonでxargs使ったワンライナーでやろうと思ったら詰みました~~

<a href="http://tiqav.com/9d" target="_blank"><img alt="9d" src="http://tiqav.com/9d.jpg" /></a>
TypeScript JavaScriptのモジュール関連用語の関係図

# 何
- TypeScript JavaScriptのモジュール関連で、似たような用語がたくさんあり、関係がよくわからないため整理する。

![ts-js.png](https://qiita-image-store.s3.amazonaws.com/0/151200/8652c39f-2dc7-bc34-be68-ae05ffdcf591.png)

# 詳細

## TypeScript
### module
- 外部モジュールと呼ばれていた
- 複数のファイルで(variable, function, class, interface etc)を管理する仕組み

### namespace
- 内部モジュールと呼ばれていた
- 名前空間を定義できるが、ファイルをまたいだ利用には、reference tag(
```
///<reference path="XXX.ts" />
```)が必要

### global (global module)
- moduleを使わない場合をこう書いてみた。global moduleが正しい？
- https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

## JavaScript
### CommonJS/AMD
- モジュール管理の仕様
- TypeScriptからはtscで仕様を選んでコンパイルする
- namespaceのTypeScriptからは、これらのモジュールの世界には入れない
- 他にもUMD/ES6/SystemJSなど、仕様はいろいろある

### global namespace
- moduleを使わない場合にいろんなものはここに保存される

## module loader
### webpack/browserify
- CommonJSの仕様に従ったファイルを(CommonJSの仕様を解釈できない)Browserで利用可能にするためのツール
- webpack/browserifyは、module loaderのくくりで良い？

### RequireJS
- AMDの仕様に従ったファイルをBrowserで利用可能にするためのライブラリ（モジュールローダ）
Raspberry Pi Zero で自律飛行ドローンを作るぞ（第１回：浮上まで）

#概要

[Raspberry Pi で３つのi2cデバイスを同時に動かしてみた](http://qiita.com/shigeru-yokochi/items/ac2138feb74a7ef7ffc6)　で使った
１．距離センサ([VL53L0X](http://www.st.com/ja/imaging-and-photonics-solutions/vl53l0x.html))
２．ジャイロ加速度センサ([MPU-6050](https://www.invensense.com/products/motion-tracking/6-axis/mpu-6050/))
３．PWMドライバ([PCA9685](http://www.nxp.com/ja/products/power-management/lighting-driver-and-controller-ics/i2c-led-display-control/16-channel-12-bit-pwm-fm-plus-ic-bus-led-controller:PCA9685))
を Raspberry Pi Zero で制御して自律飛行ドローン(クワッドコプター)を作ってみようと思いました。
これだけでは自律は難しいですが、改善しながらコツコツ進めていきます。
今回は浮上までの記事です。細かな個所は追って書き加える予定です。

#やったこと
１．距離センサ、ジャイロ加速度センサ、PWMドライバを1つのプログラムから制御できるようにする
２．距離センサ値やジャイロ値によりPWMドライバ0～3ポートのPWM出力電圧をそれぞれ変化させる（ここがドローンのプロペラ回転数になる）
３．実際のドローンフレームにRaspberry Pi Zero、距離センサ、ジャイロ加速度センサ、PWMドライバの実装して配線。更に、ブラシレスモータとESCを実装
４．ブラシレスモータへのPWMパルスを調査して値を決める
５．モータの回転方向を合わせ（隣のモータは逆回転にする）浮上するかテスト

（上面）
![20170109_121933-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/50fdbba3-ecaf-b44d-e305-19f38eae7418.jpeg)

（下面）
![20170109_121943-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/1afc05df-45a7-221d-a777-e6b59dd8e6fe.jpeg)

（中間層）
![20170110_233538.jpg](https://qiita-image-store.s3.amazonaws.com/0/146154/6c66e99f-6190-3697-3d06-a6808936602b.jpeg)



#結果
Lipoバッテリ2cellにてモータを駆動し、コンマ何秒か浮上させることに成功。
動画はこちら(YouTube)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/RusVfd-lE6Q/0.jpg)](https://www.youtube.com/watch?v=RusVfd-lE6Q)
※勢いよく飛び出しそうなので指で押さえてます



この続きは、[Raspberry Pi Zero で自律飛行ドローンを作るぞ（第２回：姿勢制御は簡単にはできないぞ！！）](http://qiita.com/shigeru-yokochi/items/746a520b6c0c00243993)

# コード(GitHub)
https://github.com/shigeru-yokochi/drone
kintone 電子回路シミュレータ デジタル・ストレージ・オシロスコープ

#デジタル・ストレージ・オシロスコープ(DSO)
SimcirJS で、回路を組んでいると入出力波形を確認したくなります。
オシロスコープのライブラリを検索して、SimcirJS に組み込むのは大変だなと思っていたら、SimcirJS に機能がありました。
DSO がデジタル・ストレージ・オシロスコープの略というのも知りませんでしたし、ライブラリが別ファイルになっていたので、５日間も存在に気が付きませんでした。
他にも、Transmitter というのもありました。どちらもありがたいものです。


![2017-01-10_23h51_46.gif](https://qiita-image-store.s3.amazonaws.com/0/100572/2e9b6463-276d-2b6d-64ee-047bd739e740.gif)

#カスタマイズ

DSO の入力数がカスタマイズできるようです。
欲を言えば、回路上に配置してから入力数を増やしたいと思います。

![2017-01-10_23h53_59.png](https://qiita-image-store.s3.amazonaws.com/0/100572/e8c2c15e-96b1-4e2d-8240-9d10b5f3c774.png)

#機能

- Start/Stop
- TimeRange 10s, 5s, 2s, 1s 切替え

![2017-01-11_00h07_32.gif](https://qiita-image-store.s3.amazonaws.com/0/100572/7eb6431b-34d1-acff-9c49-a8b2e7a72554.gif)
Swift3.0対応 CoreGraphicsで円を描く

#はじめに
Swift3.0でCoreGraphicsを使った例が少なかったので、簡単なサンプルを作成しました。
塗りつぶしの円とそれに重なる枠線の円を描画しています。

<img width="180" alt="Simulator Screen Shot 2017.01.10 23.21.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/159175/7ac01e45-9648-7b3d-a48b-05604c22939f.png">


#塗りつぶしの円の描画
```swift:CircleView.swift
private func drawFillCircle(rect: CGRect) {
        // コンテキストの取得(1)
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }
        
        // 色の設定(2)
        context.setFillColor(self.fillColor.cgColor)
        
        // 円を塗りつぶしで描く(3)
        // 円は引数のCGRectに内接する
        context.fillEllipse(in: rect)
    }
```

####(1) コンテキストの取得
コンテキストを取得します。
####(2) 描画色の設定
塗りつぶしの色の設定には"setFillColor"を使用します。
引数にはCGColorを指定します。
サンプルではStoryboardで設定した色を引数に渡しています。
####(3) 塗りつぶしの円の描画
塗りつぶしの円は"fillEllipse"で描画できます。
引数に指定したCGRectに内接する円が描かれます。

#枠線の円の描画
```swift:CircleView.swift
private func drawStrokeCircle(rect: CGRect) {
        // コンテキストの取得(1)
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }
        
        // 色の設定(2)
        context.setStrokeColor(self.strokeColor.cgColor)
        
        // 枠線の幅の設定(3)
        context.setLineWidth(CGFloat(self.strokeWidth))
        
        // 円を線で描く(4)
        // 円は引数のCGRectに内接するが50%がはみ出す
        context.strokeEllipse(in: rect)
    }
```
####(1) コンテキストの取得
コンテキストを取得します。
####(2) 描画色の設定
枠線の色の設定には"setStrokeColor"を使用します。
引数にはCGColorを指定します。
サンプルではStoryboardで設定した色を引数に渡しています。
####(3) 枠線の幅の設定
枠線の幅を指定します。
サンプルではStoryboardで設定した数値を引数に渡しています。
####(4) 枠線の円の描画
枠線の円は"strokeEllipse"で描画できます。
引数に指定したCGRectに内接する円が描かれますが、線の幅の半分が外側にはみ出します。塗りつぶしの円と同じCGRectの値を指定した場合、枠線の円の方が大きくなるので注意が必要です。

#円を重ねて描画
```swift:CircleView.swift
override func draw(_ rect: CGRect) {
        // Viewに内接する円を塗りつぶしで描く(1)
        self.drawFillCircle(rect: rect)
        
        // 線の50%がViewの外に出るので内接するために調整したCGRectを用意する(2)
        let strokeRectSizeAdjustment = CGFloat(self.strokeWidth)
        let strokeRectSize = CGSize(width: rect.width - strokeRectSizeAdjustment, height: rect.height - strokeRectSizeAdjustment)
        let strokeRectPointAdjustment = strokeRectSizeAdjustment/2
        let strokeRectPoint = CGPoint(x: rect.origin.x + strokeRectPointAdjustment, y: rect.origin.y + strokeRectPointAdjustment)
        let strokeRect = CGRect(origin: strokeRectPoint, size: strokeRectSize)
        
        // Viewに内接する円を線で描く(3)
        self.drawStrokeCircle(rect: strokeRect)
    }
```
####(1) 塗りつぶし円の描画
先に描画した図形が下になります。
枠線の円を上にしたいので、塗りつぶしの円を先に描画しています。
####(2) 枠線の円が内接するCGRectを設定
上で説明しました通り、枠線の幅の半分がCGRectに内接した円の外側にはみ出すので、それを考慮して塗りつぶしの円と同じ大きさになるように枠線の円のCGRectを設定しています。
####(3) 枠線の円の描画
(2)で設定したCGRectを渡して、塗りつぶしの円と同じ大きさになる枠線の円を描画しています。

#サンプル
Githubにサンプルとして作成したプロジェクトを置いてあります。
[CircleView](https://github.com/Masataka-Dev/CircleView)
AVFoundation + OpenCVで指定領域を比較するのに詰んだ話

##ハマった点
cv::rect()関数を用いて指定座標を短形切り抜きし、前後比較を行おうとしていた。
EXC_BAD_ACCESSの登場
AppDelegate.swiftでEXC_BAD_ACCESSが発生しているとのこと。どうやっても消せない。デバッグの結果、cv::Mat cut_img(img, cv::Rect())の行を消せば普通に動いていたので、ここが原因みたい。

サイトを見てみたら、この部分でハマってる人が他にもいた。どうやらまだ画像がきていない状態でメモリを見に行ってエラーを吐いてるみたいだ。

http://mslgt.hatenablog.com/entry/2014/09/26/003928

##これ使えばうまくいきそう
http://opencv.jp/sample/initialization.html
端的にいえばただの短形選択。トリミングはしないけど、この部分を部分画像としてみなし処理を行うことができる。これによって、ひとつまえのフレームと現在のフレームとの画像ｎ比較を行うことができる？
とりあえず試してみます。あとでちゃんと結果まとめる…（まとめられたら）
イベント駆動型言語での開発時のコーディング規約指針

#初めに
VB.netでの新規開発の後、OracleFormsでマイグレーションとかをやってたのですが、
レガシーシステムのコードは触るだけでストレスが溜まってしまうので、「せめてこうしろよ」という感じの内容を書きます

#1.イベントハンドラに処理を書くな！

イベントハンドラでは処理を書くのではなく、単にメソッドのコールだけを記載するようにしましょう。
イベントハンドラに処理を書いてしまうと、処理が長くなった時に「放置する（可読性が下がる）」か「複数のイベントハンドラに分割する（実行順序が保証されない）」が発生します。
もちろん、AddHandlerなどを使って制御することはできますが、無駄なコードを書かないようなルールにする方が建設的です。

同じイベントで複数のメソッドを書いてはいけない（どちらから処理が実行されるかという保証がない）

    Private Sub Hogehoge(sender As Object, e As EventArgs) Handles Button1.Click
        処理1
    End Sub

    Private Sub Hogehoge2(sender As Object, e As EventArgs) Handles Button1.Click
        処理2
    End Sub

一つのイベントにダラダラと処理を書いてはいけない。（可読性が低下する）

    Private Sub Hogehoge(sender As Object, e As EventArgs) Handles Button1.Click
        長い処理
    End Sub

イベントハンドラにはメソッドの呼び出しのみ記述する

    Private Sub hogeHoge(sender As Object, e As EventArgs) Handles Button1.Click
        clickProcedure1(0)
        clickProcedure2(0)
    End Sub

    Private Sub clickProcedure1(ByVal hoge As Integer)
        処理1
    End Sub

    Private Sub clickProcedure2(ByVal fuga As Integer)
        処理2
    End Sub

#2.コントロールへの参照は渡さない

これは賛否両論かもしれませんが、私としてはコレをオススメします。
VBで言えば、「Formインスタンスが直接持つメソッド以外はそのフォームの持つコントロールの参照を持てない」とすべきです。
もし、他のFormインスタンスのコントロールを見たい場合、そのコントロールをもつFormのメソッドを経由するようにすべきです。
これは、カプセル化からの要請でもあります。

#3.コントローラーを用意する。
MVCモデルでいう所のコントローラーを用意します。
こんな感じです

    Private Sub hogeHoge(sender As Object, e As EventArgs) Handles Button1.Click
        clickProcedure1(0)　'イベントハンドラではメソッドのコールだけ行います
    End Sub

    Private Sub clickProcedure1(ByVal hoge As Integer)
        Dim Arg As Boolean
        Arg = Controler()　　'処理を行う上で必要な情報をコントローラーを経由して取得します
        clickProcedureNext(Arg)　'コントローラーから取得した情報を元に処理を実行します
    End Sub

    Private Function Controler() As Boolean
        Return Button1.Enabled　　'コントローラーは、情報を集めて返します
    End Function

    Private Sub clickProcedureNext(ByVal Arg1 As Boolean)
        適当な処理　　'実際の処理を行います
    End Sub

このようにすることで、「コントロールへの参照を持つレイヤ」を限定することが出来ます。
これは、2の内容とも共通していることです。
OracleFormsなんかだと、コントロールの名称を文字列として渡すだけでゴチャゴチャっと触れてしまうので、オブジェクト指向脳としては切れそうになるのを何とかこらえている状態です

#おわり
以上、リハビリがてら書いた記事なので、内容は薄いです。
2つの信号間の遅延を推定する

# はじめに
似たような2つの信号について、それらの遅延時間を相互相関関数を計算することによって推定します。
相互相関関数の計算には、PythonのNumpyを用います。

# 信号の作成
例として、正規分布の目的信号に正規分布のノイズに重ねた信号を、遅延の有るものと無いものの2つ作成します。

```py3
import numpy as np

target_sig = np.random.normal(size=1000) * 1.0
delay = 800
sig1 = np.random.normal(size=2000) * 0.2
sig1[delay:delay+1000] += target_sig
sig2 = np.random.normal(size=2000) * 0.2
sig2[:1000] += target_sig
```
![sig12.png](https://qiita-image-store.s3.amazonaws.com/0/61468/6afccdc0-5c2d-056d-d575-13016f1f9b4c.png)

# 相互相関関数の計算
作成した2つの信号の相互相関関数を```np.correlate()```で計算します。相互相関関数の最大となる位置が、遅延時間となります。
ひとつ注意点として、**信号の平均値が0から離れている場合**、相互相関関数の計算に影響を与えるので、
```sig1 = sig1 - sig1.mean()```といったように**平均を0にする**といった処理を加える必要があります。

```py3
import numpy as np

corr = np.correlate(sig1, sig2, "full")
estimated_delay = corr.argmax() - (len(sig2) - 1)
print("estimated delay is " + str(estimated_delay))
```

```
estimated delay is 800
```

# 描画
最後に描画します。相互相関関数の値において、遅延時間を示す部分に大きなピークが立っているのが分かります。

```py3
import matplotlib.pyplot as plt

plt.subplot(4, 1, 1)
plt.ylabel("sig1")
plt.plot(sig1)

plt.subplot(4, 1, 2)
plt.ylabel("sig2")
plt.plot(sig2, color="g")

plt.subplot(4, 1, 3)
plt.ylabel("fit")
plt.plot(np.arange(len(sig1)), sig1)
plt.plot(np.arange(len(sig2)) + estimated_delay, sig2 )
plt.xlim([0, len(sig1)])

plt.subplot(4, 1, 4)
plt.ylabel("corr")
plt.plot(np.arange(len(corr)) - len(sig2) + 1, corr, color="r")
plt.xlim([0, len(sig1)])

plt.show()
```
![res.png](https://qiita-image-store.s3.amazonaws.com/0/61468/c040f756-4d7d-875d-f664-c966d21ef1c7.png)
Bluemix IaaS(旧SoftLayer)の見積もりをAPI経由でPDFに保存する

#内容
すでにポータル上に見積もりとして存在するレコードをAPI経由でPDF保存してみました。

#前提
以下の記事が理解できていることが前提です。
Bluemix Infrastructure (旧SoftLayer) のAPIについて、詳しく解説してあります。
><a href="http://qiita.com/testnin2/items/f04ca0cee9b2f0a8f830" >ShinobiLayer: SoftLayer API 次の一歩: データ型オブジェクト(1) - Qiita</a>

#QuoteIdの取得
見積もりのIDを取得するスクリプトをつくったので、ぜひ使ってください。

##スクリプト
```py:getQuotes.py
#import package
import SoftLayer
import json
from prettytable import PrettyTable

# account info
client = SoftLayer.create_client_from_env()

objectmask = """
    id,
    name,
    status,
    createDate,
    expirationDate,
    order[
        id,
        orderTotalAmount
    ]
"""

# getActiveQuotes
gAQ = client['Account'].getActiveQuotes(mask=objectmask)

# define table
table = PrettyTable([
    'QuoteID',
    'Name',
    'Amount',
    'Status',
    'createDate',
    'expirationDate'
])


for key in range(len(gAQ)):
        table.add_row([
            gAQ[key]['id'],
            gAQ[key]['name'],
            gAQ[key]['order'].get('orderTotalAmount',""),
            gAQ[key]['status'],
            gAQ[key]['createDate'],
            gAQ[key]['expirationDate']
        ])

print len(gAQ)
print table.get_string(sortby="QuoteID")
```

##実行結果の例
```
#実行コマンド
python getQuotes.py 

#結果
5
+---------+-------------+---------+---------+---------------------------+---------------------------+
| QuoteID |     Name    |  Amount |  Status |         createDate        |       expirationDate      |
+---------+-------------+---------+---------+---------------------------+---------------------------+
| 1111111 | BMS_28Cores | 1402.31 | PENDING | 2016-11-16T10:51:51+09:00 | 2017-02-14T10:51:51+09:00 |
...
```

#PDFとして保存
QuoteIdを指定して、PDFとして保存できるスクリプトをつくったので、ぜひ使ってください。

##スクリプト
```py:getPdf.py
# beginning message
print 'Saving the quote as PDF ...'

# import
import SoftLayer
import sys
parm=sys.argv
quoteId=parm[1]

# account info
client = SoftLayer.create_client_from_env()

# getPdf as a binary data
getPdf = client['Billing_Order_Quote'].getPdf(id=quoteId)

# confirm as xmlrpclib.Binary
# print getPdf.__class__

# Save as a PDF
quoteFileName = "Quote_ID_%s.pdf" % quoteId
w = open(quoteFileName, "wb")
w.write(getPdf.data)
w.close()

# finishing message
print 'Completed!'
```
##実行結果の例
```
#実行コマンド
python getPdf.py 1111111

#結果
Saving the quote as PDF ...
Completed!

#「Quote_ID_1111111.pdf」という名前で保存されます
```

#参考にしたサイト
- <a href="http://sldn.softlayer.com/reference/services/softlayer_account/getQuotes">AccountSoftLayer_Account::getQuotes | SoftLayer Development Network</a>
- <a href="http://sldn.softlayer.com/reference/services/SoftLayer_Billing_Order_Quote/getPdf">BillingSoftLayer_Billing_Order_Quote::getPdf | SoftLayer Development Network</a>
【ただのメモ】MacOSX SierraでKeras+TensorFlowが動くまで


## Pythonのインストール

```
$ brew install pyenv
```

下記を追加。

```~/.bash_profile
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
```

インストール可能なPythonのバージョンを確認。

```
$ pyenv install -l
```

`3.6.0` をインストール.

```
$ xcode-select --install
$ pyenv install 3.6.0
```

使用するPythonのバージョンを `3.6.0` にする。

```
$ pyenv global 3.6.0
```

バージョン確認

```
$ python --version
Python 3.6.0
```

## TensorFlowをインストール

今回はめんどうなのでvirtialenvは省略。

```
$ pip install tensorflow
```

## Kerasをインストール

```
$ pip install keras
```

## 動作確認

kerasのレポジトリを `git clone`

```
$ git clone https://github.com/fchollet/keras.git
```

`examples` に移動して

```
$ cd keras/examples
```

`mnist_cnn.py` を実行してみる。

```
$ python mnist_cnn.py 
```

以上。
Unityで画像付きツイートをSocialConnectorを使って投稿する

## はじめに
UnityからTwitterに投稿したい。iOS向けにはSocial.frameworkが使えると使い勝手がよさそうだなー考えていたのですが、それっぽい便利ライブラリは見つけられず、UIActivityを使えるようにできるライブラリのsocial-connectorを使うことにしました。

https://github.com/anchan828/social-connector

## 使い方
使い方はいろいろな方が記事を書いていますので、それを参考にしました。
http://clrmemory.com/unity/socialconnector-pic-error/

## Unityで使っている画像を使う
いろいろとネット情報探したんですが、キャプチャを使ったサンプルはありましたが、Unityで使っている画像をAndroid, iOSで動かせるサンプルが見当たらなかったので、自分が書いたコードを貼っておきます。

```C#
using UnityEngine;
using System.Collections;
public class Sample : MonoBehaviour {
    public void OnShareClick() {
        StartCoroutine(Share("share text", "url", Application.streamingAssetsPath + "srcimage.png"));
    }
	IEnumerator Share(string text, string url, string streamAssetsImagePath) {
		#if UNITY_ANDROID
		WWW www = new WWW(streamAssetsImagePath); // ローカルファイルを読む
		yield return www;

		string imagePath = Application.temporaryCachePath + "/shareimage.png";
		System.IO.File.WriteAllBytes(imagePath, www.bytes);  
		SocialConnector.SocialConnector.Share(text, url, imagePath);
		#else
		// iOSなら直接StreamAssetsが読める
		SocialConnector.SocialConnector.Share(text, url, streamAssetsImagePath);
		yield break;
		#endif
	}
}
```

ポイント：

- Unity上のファイルをそのまま使うにはストリームアセットを使うが、AndroidだとAPKファイルに含まれるため、WWWでアクセスしてコピーする必要がある
 - あらかじめAssets/StreamingAssetsに画像を配置しておきます
 - https://docs.unity3d.com/ja/current/Manual/StreamingAssets.html
- 永続にする必要がないのでtemporaryCachePathを利用した
 - AndroidのPlayerSettingsでWriteAccessをExternalにするのを忘れずに


## 今回のアプリは絶賛配信中です

[![動画](http://img.youtube.com/vi/d84vL9UgOBc/0.jpg)](http://www.youtube.com/watch?v=d84vL9UgOBc)


配信：
iOS: https://itunes.apple.com/jp/app/id1189800250
Android: https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere
jQueryでお手軽に360°パノラマ写真をグリグリする

非常にたどり着きにくかったのにスゴく有能なライブラリだったので、今後迷える人が無き用、記事にしました。

## 結論
https://github.com/akokubo/ThetaViewer
こちらをライブラリとして用いればサクッと導入できた

## 要件
- Ricoh Theta Sで撮った360°パノラマ写真をWEBにアップしてグリグリしたい。
- スマホ対応必須
- 一画面で何枚かの360°写真を切り替えたい
- クライアントは自前の管理画面から画像をアップする(theta360.com にアップして埋め込みコード貼るとかは無し)。

## 調査過程
「JS パノラマ」とかでググるとまず当たるのが下記の記事であろう。
http://qiita.com/kingpanda/items/1c3a47765b40d6d62f46

とりあえずデモが全画面だったこと、切り替えの機能が標準でないなら他のものがありそうだな、と思って導入を見送り再調査。


### jQueryライブラリを探す
日本語でググってもスマホ対応のものは全然出てこない。
英語でググると有料のはあるけど無料のはちょっと探してみたけど見当たらない。

困ったのでGithubならオープンソースで使えそうなのがあるのではないかとググってみる。
上記ライブラリが見つかったので、導入して問題なく動きました。
とてもお手軽でいい感じです。

## このライブラリを使ってみて使い方補足
指定したエレメントDOMの下(ここではサンプル通りに#theta-viewerとする)にパノラマ画像が作られます。
二回目に発動した時もリプレースはされないので、$("#theta-viewer").empty()してから呼び出すようにしましょう。
Android ボタン押下時の動作

#ボタン動作

アプリ開発で一番出番がある、ボタン等を押した際の動作について記載します。
今回は「CHANGE」のボタンを押下した際にテキストを「TextView」→「Change!!」をサンプルとします。

![textview_change.gif](https://qiita-image-store.s3.amazonaws.com/0/15564/5499fad0-bc12-2865-aa3c-ba8fc4a9ae2d.gif)


#実装

[Button][TextView]にID(android:id)とテキスト(android:text)をそれぞれセットしておきます。

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.qiita.qiita.MainActivity">

    <Button
        android:id="@+id/button"
        android:text="change"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textview"
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>
```
Acitvityには下記となります。（説明は下で）

```java:MaincActivity.java
package com.example.qiita.qiita;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ((TextView)findViewById(R.id.textview)).setText("Change!!");
            }
        });
    }

}

```
以下はRayout内のIDが「button」のViewを取得します。
View.OnClickListenerは、クリック時にコールバックで呼ばれる機能となります。
buttonがクリックした際の動作を実装する為、setOnClickListenerでセットしています。

```java:
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
```

以下はOnClickListenerの実装（クリック時の動作）となります。
Rayout内のIDが「textview」のViewを取得して「TextView型」にキャストします。
その後、setTextにて値を書き変えます。

```java:
@Override
public void onClick(View v) {
　　　　　　　　((TextView)findViewById(R.id.textview)).setText("Change!!");
}
```

###Developers
・Viewクラス
https://developer.android.com/reference/android/view/View.html

・View.OnClickListener
https://developer.android.com/reference/android/view/View.OnClickListener.html
Xcodeでコメントアウトのショートカットが効かなくなったときの対応


本来、ショートカット「Command + /」でコメントアウトできるが、突然ショートカットが効かなくなる場合が極稀に起こる。

Terminalを開き、以下のコマンドを実行し Mac を再起動すると解決できる。

```
sudo /usr/libexec/xpccachectl
```


Xcode 8.2.1

## Xcodeショートカット

[Xcodeの基本ショートカットまとめ](http://qiita.com/shi_chicken/items/348bbdfcf099a8f6d315)
CircleCIでLintとTestをParallel実行

CircleCIのビルド時間を5分短くした話と､スクリプト書いている際に詰まったところを紹介します｡

そもそもビルドの長い原因は､LintとTestを1つのコンテナで実行していたため､各6分ずつ時間を要していることでした｡
そのため､複数コンテナで実行してみた､というのが今回のQiitaです｡

## LintとTestの複数コンテナで実行
```yaml:circle.yml
  override:
    - ./scripts/run_test.sh:
        parallel: true
```
```bash:run_test.sh
#!/bin/bash
case $CIRCLE_NODE_INDEX in
  0) ./gradlew -b lint; cp -r ./app/build/outputs $CIRCLE_ARTIFACTS;;
  1) ./gradlew -b testUnitTest -PdisablePreDex;;
esac
```
こんな感じで5分短縮できたので非常に幸せです｡

## parallelでの実行周りで悩んだこと
### must be a mapで失敗する
```bash
  override:
    - ./scripts/run_test.sh:
      parallel: true
```
↓

```bash
  override:
    - ./scripts/run_test.sh:
        parallel: true
```
parallelの前にインデントを1つ増やしましょう｡


### Action failed: Configure the build
```bash
  override:
    - ./scripts/run_test.sh
      parallel: true
```
↓

```bash
  override:
    - ./scripts/run_test.sh:
        parallel: true
```
実行したいコマンドの末尾にコロン(:)を1つ増やしましょう｡

### deploymentでのparallelの実行
https://circleci.com/docs/parallel-manual-setup/
> Please note that since we do not support parallel deployment, specifying ‘parallel:true’ in the deployment phase will cause an error

無理なので諦めましょう｡

https://circleci.com/docs/parameterized-builds/
deploymentで並列化させたい処理は別Jobとして実行すると準並列化のように出来るのでおすすめです｡
Laravel5.1 blade yieldの中身で条件分岐したい

blade、皆さん使ってますか？

特に、WEBサイトでよくあるレイアウトとコンテンツ領域を分離できたりと、
便利ですよね。

ですが、サイト構築をしていくと、`@section` の中身によって分岐したい
ケースが出てきました。
この分岐がきれいなbladeの書き方では見つけられず、
ちょっと無理やり感はありますが、やりたかった事は出来たので、
共有とメモです。

#結論
`$__env->yieldContent('name')` にて`@section`にて定義した内容を取得できる

```php:index.blade.php
<title>
@if ($__env->yieldContent('title') === '')
    未定義の場合はサイト名だけを表示
@else
　　@yield('title') | サイト名
@endif
</title>
```

この`$__env->yieldContent('title')`から取得できることが分かったことにより、
以下のような処理も可能となってきます

```php:index.blade.php
<title>{{ $helper->titleGeneration($__env->yieldContent('title')) }}

//
class helper{
    function titleGeneration($title)
    {
        return $title . '　|　サイト名';
    }
```

#$__envとは何か

```php:index.blade.php
echo get_class($__env); //Illuminate\View\Factory
```

##Illuminate\View\Factory `@yieldContent`
```php:/vendor/laravel/framework/src/Illuminate/View/Factory.php
class Factory implements FactoryContract{
    /**
     * Get the string contents of a section.
     *
     * @param  string  $section
     * @param  string  $default
     * @return string
     */
    public function yieldContent($section, $default = '')
    {
        $sectionContent = $default;

        if (isset($this->sections[$section])) {
            $sectionContent = $this->sections[$section];
        }

        $sectionContent = str_replace('@@parent', '--parent--holder--', $sectionContent);

        return str_replace(
            '--parent--holder--', '@parent', str_replace('@parent', '', $sectionContent)
        );
    }


}
```
プログラマーの時間別学習方法

##はじめに
プログラマーです。
家族やこどもがいてなかなか自分の時間を取れない中、
業務時間外にどうやって技術を学んでいくか試行錯誤しています。

時間を節約するために欠かせないのが、
今や取り掛かるべきことに「迷わない」だと思うので、
当たり前のことが多いですが、時間別にやっている事をまとめてみました。

## 5分

#####・RSSで購読している技術サイトの記事をチェックします。  
  Qiitaの記事もタグのURLに /feed をつければ、RSSで購読できます。

## 15分

- podcastやオーディオブックを聞く
	- podcastは、Rebuild.fmがオススメです。  
	https://rebuild.fm
    
- 読書
  - 主に電子書籍で技術書を読んでます。
  - 「プログラマが知るべき９７のこと」など短時間で一記事を読めるような本がいい感じです。　　
  
  
- コードリーディング
	- タブレットにソースコードを入れて読んでいます。
	  （自分の場合はipad mini)


## 30分
- スクリーンキャスト（動画）で学習
	- Udemy(https://www.udemy.com)
	- ドットインストール（http://dotinstall.com)

## 60分


- コーディング

ほぼこどもが寝てからか、朝起きてくるまでの時間しか使えないないので、
どちらが生産性が高いか試しています。今の所、朝のほうが捗っています。

「Write Code EveryDay」を参考にできるだけ毎日取り組んでいます。
http://ejohn.org/blog/write-code-every-day

[毎日コードを書くこと - snowlongの日記](http://snowlong.hatenablog.com/entry/2014/04/18/%E6%AF%8E%E6%97%A5%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8) 翻訳

#### 朝
#####メリット
- 割り込みが少ない
- 頭がスッキリしていることが多い

#####デメリット
- 絶対に早く起きれるとは限らない。
- 冬は寒すぎる。macがキンキンにつめたい。

#### 夜
#####メリット
・朝と違って寝過ごすことがない。
・日中のインプットの復習に利用できる。

#####デメリット

- 疲れている場合は、眠くなりやすい
- 頭がスッキリしていない
- 割り込みが多い

##おまけ（小ワザ）
- 英語で技術書を読むと、一石二鳥です。
例えば先に紹介したプログラマが知るべき９７のこと」は、
日本語訳と英語ともに無料で公開されているので、訳を確認しながら読めます。
	- [プログラマが知るべき９７のこと](http://xn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com/)
	- [97 Things Every Programmer Should Know](http://programmer.97things.oreilly.com/wiki/index.php/97_Things_Every_Programmer_Should_Know) 英語

- まとまった時間が取れる場合は、ポモドーロテクニックを使用して集中するようにします。
	- [アジャイルな時間管理術 ポモドーロテクニック入門](https://www.amazon.co.jp/%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%81%AA%E6%99%82%E9%96%93%E7%AE%A1%E7%90%86%E8%A1%93-%E3%83%9D%E3%83%A2%E3%83%89%E3%83%BC%E3%83%AD%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%E5%85%A5%E9%96%80-Staffan-Noeteberg/dp/4048689525/ref=cm_rdp_product)

- 働き過ぎない、散歩する、筋トレする
  -　ずっとプログラミングや勉強し続けることはしんどいです。適度な運動や、もうちょっとプログラムしたいというところで止めておくのも重要だと気づきました。 

##さいごに
試行錯誤中なので、随時更新していきたいです。
アドバイスや他によい方法があれば教えてください。
次は、どうやって時間を確保するかを書きたいなと思ってます。
sinatra+vue+webpackで作成したアプリをHerokuで公開する(初心者向け)

# 1. サーバーサイド作成

まずはいつもの感じでディレクトリを作って`bundle init`しましょう。

```
mkdir sample-app
cd sample-app
bundle init
```

`Gemfile`は以下のように。

```rb:Gemfile
source "https://rubygems.org"

ruby '2.3.3'

gem 'sinatra', '~> 1.4'
gem 'sinatra-contrib'
gem 'slim'
```

`vendor/bundle`にインストールします。

```
bundle install --path=vendor/bundle
```

忘れずに`.gitignore`に`/vendor`を追加。

```text:.gitignore
/vendor
```

準備が整ったので早速アプリを作っていきましょう。
といっても以下のファイルを置くだけ。

```rb:app.rb
require 'sinatra'
require 'sinatra/reloader'
require 'rabl'

get '/' do
  slim :app
end
```

```slim:views/app.slim
doctype html
html
  head
    title sample app
    script[type="text/javascript" src="bundle.js" charset="utf-8"]
  body
    h1 HELLO!
    #app
      p[v-text="massege"]
```

`bundle.js`はこのあと作成するファイルです。

この時点で`bundle exec ruby app.rb`してhttp://localhost:4567/ を開けば`HELLO!`と表示されるはずです。

# 2. フロントサイド作成

今回はyarnを使います。
以下のものをインストール。

```
yarn init
yarn add webpack vue coffee-script coffee-loader
```

webpackのversion 4以降を使う場合は別途`webpack-cli`も必要です(Thank you @tamano)。

```
yarn add webpack-cli
```

`webpack.config.js`を作成しましょう。

```js:webpack.config.js
module.exports = {
  entry: './frontend/main.js',
  output: {
    path: 'public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: "coffee-loader" }
    ]
  },
  resolve: {
    extenstions: ['', '.js', '.json', '.html'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
};
```

だいたいこんなことが書いてあります。

- `entry`と`output`:`./frontend/main.js`を`./public/bundle.js`にビルド
- `loaders`: `.coffee`ファイルは`coffee-loader`を使ってコンパイル
- `extenstions`: `require`(後述)するときにこの拡張子は省略できるよ
- `alias`: vueを使うときのおまじない。詳しくは[公式参照](https://jp.vuejs.org/v2/guide/installation.html#スタンドアロン-vs-ランタイム限定ビルド)。

`./frontend/main.js`を作っていきましょう。

```js:frontend/main.js
require('./app.coffee')
```

main.jsというのがビルドしたときのエンドポイントになるので、ここに必要なファイルをどんどん`require`していきます。
今回は`app.coffee`というのを作ります。

```coffeescript:frontend/app.coffee
Vue = require('vue')

window.app = new Vue
  el: '#app'
  data:
    message: "hello vue!"
```

以下のコマンドでビルドします。

```
webpack
```

これで`public/bundle.js`ができているはずです。

ここでhttp://localhost:4567/ を開けば`hello vue`と表示されるはずです。

忘れずに`.gitignore`に`/node_modules`と`/public`を追加します。
`/public`はgitに入れるケースも有るのですが、今回はgitで管理しないことにします。

```text:.gitignore
/vendor
/node_modules
/public
```

ここらでコミットを

```
git add .
git commit -m "Initial commit"
```

# 3. Herokuにアップ!

herokuにappを作成しましょう。
作成部分は省略します。

**ここからが一番言いたかったこと**
Heroku上でwebpackを実行するためにbuildpackにnodejsを追加しましょう。

```
heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby --index 2
```

`--index 2`はnodejsのあとでrubyをビルドするよってことです(なくてもいいかもしれません)。

`package.json`に下記を追加しましよう。

```js:package.json
  "scripts": {
    "heroku-postbuild": "webpack -p"
  }
```

あとはpushするだけ。

```
git push heroku master
```

お疲れ様でした！
matplotlibで枠線を消したグラフをつくる

こんな感じのグラフをmatplotlibでつくる方法。

<img width="591" alt="スクリーンショット 2017-01-30 21.17.49.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/95987/32df68c5-f38f-7708-397a-0987354c1264.jpeg">

# matplotlibのインポート

まずはmatplotlibをpltの名前でインポート。
使ったバージョンはPython3.5とmatplotlib 1.5.3。matplotlib 2.0でも動くはず。

```py3:matplotlibのインポート
import matplotlib.pyplot as plt
```

# 普通にプロット
```py3:とりあえずプロット
plt.plot([0,10,20,30,40,50], [10,20,30,5,25,30])
plt.show()
```
matplotlibのデフォルトデザインである上下左右に枠線がついたグラフが作図される。
<img width="589" alt="スクリーンショット 2017-01-30 21.08.22.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/95987/3b2a530f-36c2-39c3-09d2-b585b3d580cc.jpeg">

# 右と上の枠線を消す
`plt.gca()`から`spines`を呼び出すことで枠線を操作できる。`'right'`，`'left'`，`'top'`，`'bottom'`でそれぞれ対応する枠線を操作できる。操作したい枠線を指定して`set_visible(False)`で枠線を消すことができる。しかし，枠線は消えたが目盛りが消えない。

```py3:右と上の枠線を消す
plt.plot([0,10,20,30,40,50], [10,20,30,5,25,30])
plt.gca().spines['right'].set_visible(False)
plt.gca().spines['top'].set_visible(False)
plt.show()
```
<img width="591" alt="スクリーンショット 2017-01-30 21.10.39.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/95987/bd66fcb9-00eb-deda-61f2-22bf553b2b53.jpeg">

# 右と上の目盛りを消す
同じく`plt.gca()`から`yaxis.set_ticks_position()`で指定した目盛りのみを表示させる。今回は左と下の目盛りを残したいので`'left'`と`'bottom'`を指定。

```py3:右と上の目盛りを消す
plt.plot([0,10,20,30,40,50], [10,20,30,5,25,30])
plt.gca().spines['right'].set_visible(False)
plt.gca().spines['top'].set_visible(False)
plt.gca().yaxis.set_ticks_position('left')
plt.gca().xaxis.set_ticks_position('bottom')
plt.show()
```

<img width="591" alt="スクリーンショット 2017-01-30 21.17.49.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/95987/32df68c5-f38f-7708-397a-0987354c1264.jpeg">


# デフォルトで枠線を消した状態にする

matplotlibrcをいじることで枠線なしのグラフをデフォルトのグラフとして設定することができる。
macの場合は~/.matplotlib/matplotlibrc の設定ファイルを開く。HomebrewでPythonをインストールした場合は，/usr/local/lib/python3.6/site-packages/matplotlib/mpl-data/matplotlibrc にある。

matplotlibrc中にこのような箇所があるので，#を削除してTrueをFalseに書き換える。

```
# axes.spines.left   : True   # display axis spines
# axes.spines.bottom : True
# axes.spines.top    : True
# axes.spines.right  : True
```

今回は上と右の枠線を消したいので，.topと.rightの#を削除してTrueをFalseに書き換える。

```
# axes.spines.left   : True   # display axis spines
# axes.spines.bottom : True
axes.spines.top    : False
axes.spines.right  : False
```

これで右と上の枠線が消えたグラフがデフォルトで出力される。
OAuth 2.0 の解説サイトを漁る前に


Twitter、Facebook、Githubなどのアカウントを使用して別のサービスにサインアップできるの、超便利ですよね。
でも実装したいと思ってOAuthの概要図をGoogle画像検索してみても、どうも頭の中と登場する単語や図が一致しない、という人もきっといると思います。（いますよね？）

私のように今更ながらOAuthのことを理解しようとしている方のために、
様々なOAuth解説を読む前に抑えておくべきポイントを記載します。

> ### OAuth 2.0 (以下, OAuth2)をしっかり理解されている方へ
> 
> この記事では、細かい正確な仕組みを省いています。登場人物や世界観を大まかに把握するための記事ですので、細かいネタバレを含みません。
> また、登場する単語は極力広く認識されている単語を使用しますが、間違いがあればご指摘ください。

というわけで、みなさまのお役に立てば幸いです。

## OAuth2は「認証（Authentication）」の仕組みではなく「認可（Authorization）」の仕組み

OAuth2は「ユーザ／パスワードで本人確認」する仕組みではありません。
正しくは「特定のデータへ特定の操作を許可」する仕組みです。

例えばGithubアカウントを使用したOAuth2であれば、「リポジトリ一覧を読み取り専用でアクセスしてOKです。リポジトリの追加はできません。」を達成することが目的です。
この達成目標のために、結果的に認証も行うため、認証の仕組みとしても広く利用されているというだけです。

## OAuth2の解説はOAuth2を「利用したいアプリケーションからの目線」で記載されている（ことがほとんど）

OAuth2を理解するにあたって、重要なアクターは次の3つです（他にもいくつか中間のアクターがあります）。

- リソースサーバ（取得したいデータのあるサーバ）
- クライアント（データを取得して利用したいアプリケーション）
- エンドユーザ（取得したいデータの所有者）

例えば、QiitaはGithubアカウントを使用したOAuth2で認証可能です。
上記3つのアクターに当てはめると次の通りです。

- リソースサーバ：Githubサーバ
- クライアント：Qiitaアプリケーション
- エンドユーザ：Qiitaアプリケーションにアクセスしているあなた

ここで許可を与えるという言葉を紐解くと、許可を求めているのはクライアントです。

## OAuth2の仕組み大まか概要図

最後に、かなり大まかにOAuth2を図解してみます。
Githubのアカウントを使用したOAuth2を、自分のアプリケーションに実装するイメージです。
以下の文章も、クライアント＝自分のアプリケーションという視点で記述しています。

### 運用開始前

アプリを実装する段階で、事前準備をしておく必要があります。

![OAuth2（準備）.png](https://qiita-image-store.s3.amazonaws.com/0/68978/a368defa-72b4-a7f3-f104-eb718385893a.png)

(0) 事前にリソースサーバから「クライアントID」をもらっておくことが必要です（ここで「ユーザ情報を読み取るだけ」などの権限を指定します）。

### 認証～認可処理

実際に認証～認可処理を行います。

![OAuth2.png](https://qiita-image-store.s3.amazonaws.com/0/68978/f35f2936-105b-ee41-a0cb-731e63384724.png)

※1 本来はリソースサーバ（ユーザ情報など、取得したい情報を持っているサーバ）と認可サーバ（トークンを管理するサーバ）は独立して考えますが、ここでは同一サーバで実現する想定で記載します。

(1) エンドユーザがアクセスしてきましたが、まずはリソースサーバで先に認証を行ってもらいます。
(2) エンドユーザはID/パスワードをリソースサーバに渡して、「認可コード（リソースサーバから認可が下りたことを示すコード）」を得ます。これが、エンドユーザがID/パスワードを入力する一度きりの機会です。
(3) 「認可コード」をクライアントに預けます。
(4) クライアントは自分を示す「クライアントID」と、エンドユーザから預かった「認可コード」をリソースサーバに示します。これでクライアントは”エンドユーザの代わりに、エンドユーザが所有するリソースに対して限られた操作ができる権利”として「アクセストークン」を得ます。

### 認可後

![OAuth2（認可完了後） (1).png](https://qiita-image-store.s3.amazonaws.com/0/68978/33354ed9-96c8-27ae-bfd0-91156c4188b4.png)

ついにクライアントは「アクセストークン」を示すことで、ほしいリソースに繰り返しアクセスすることができるようになります。
※アクセストークンには基本的に有効期限がつきます


## おわりに

とりあえずこの記事を読み終わった段階で、みなさんのアプリケーションにおいてOAuth2を検討するか否かが判断きるようなものになっていれば幸いです。
[Vagrant][Linux] ネットワークのデフォルトゲートウェイの設定

Vagrantで `public_network` 設定時に、デフォルトゲートウェイの設定を追加する方法メモ

公式ドキュメントの `DEFAULT ROUTER` の設定例の通りに設定すれば良かったです。

```rb:Vagrantfile
  config.vm.network "public_network", ip: "192.168.0.17"

  # default router
  config.vm.provision "shell",
    run: "always",
    inline: "route add default gw 192.168.0.1"

  # default router ipv6
  config.vm.provision "shell",
    run: "always",
    inline: "route -A inet6 add default gw fc00::1 eth1"

  # delete default gw on eth0
  config.vm.provision "shell",
    run: "always",
    inline: "eval `route -n | awk '{ if ($8 ==\"eth0\" && $2 != \"0.0.0.0\") print \"route del default gw \" $2; }'`"
```
[Public Networks - Networking - Vagrant by HashiCorp](https://www.vagrantup.com/docs/networking/public_network.html)

上記の例ではデフォルトゲートウェイに `192.168.0.1`, `fc00::1` という設定で追加しています。

注意点としては一番下の `delete default gw on eth0` というところで元々のデフォルトゲートウェイの設定を削除している箇所です。この設定を忘れると旧設定と新設定で２重に設定されてしまうため不正な状態になってしまいます。

内容としては `route` コマンドを起動時に毎回使用しているだけのため、環境に合わせて内容は変更して下さい。
`/etc/network/interfaces` などを変更する方法もあるようですが、vagrantで運用するならこちらのほうがお手軽感はあります。

# 参考
[Public Networks - Networking - Vagrant by HashiCorp](https://www.vagrantup.com/docs/networking/public_network.html)
[一時的にIPアドレス、ゲートウェイアドレスを変える - Humanity](http://tyru.hatenablog.com/entry/20120408/changing_temporarily_ip_gw_hostname)
サーバサイドから返したjsを実行したい

サーバサイドで返したjsを実行したいので調べたメモ。
まぁニッチな使い方なんであまり参考になる人いなさそうですが。

# やりたいこと
下記jsをサーバサイドから取得して


```html
<script type="test/javascript">alert("はっはっは。みろ！人がゴミのようだ！");</script>
```
下記divに差し込んで実行したい。

```html
<div id="id1"></div>
```

下記の参考の通り scriptタグをcreateElementしてappendChiledするんだと、scriptタグごと入れ込んで・・・という物草なことができない。

【参考】動的にJSを実行する方法
http://qiita.com/w650/items/adb108649a0e2a86f334

#どうやるのか
## 案１
blankのiframeを作ってiframeのdocumentに流し込む

```js
var wantToExecJs = '<script type="test/javascript">alert("はっはっは。みろ！人がゴミのようだ！");</script>';
var targetElem = document.getElementById('id1');
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "about:blank");
targetElem.appendChild(iframe);
var ifDoc = iframe.contentWindow.document;
ifDoc.open();
ifDoc.write('<html><head></head><body>' + wantToExecJs + '</body></html>');
ifDoc.close();
```

ifDoc.writeしてるwantToExecJsはどこかのapiから取ってきたものと仮定する。
これでもうまいこと行くんだけど、iframeにいれるとcookieとかreferer(*参考１)とか色々面倒なんで。。。

【参考１】iframeのsrcをabout:blankにして、refererをうまいこと生成する方法
http://d.hatena.ne.jp/yshgt/20111117/1321488709

## 案2
いっそevalしちゃう

```js
var wantToExecJs = '<script type="test/javascript">alert("はっはっは。みろ！人がゴミのようだ！");</script>';
var targetElem = document.getElementById('id1');
targetElem.innerHTML = wantToExecJs;
var scripts = targetElem.getElementsByTagName('script');
for (var index in scripts) {
    eval(scripts[index].innerText);
}
```

これなら、いろんなタグを食えるんだけど、果たしてevalしてセキュリティ的な問題って無いんだろうか。
まぁ実行したいjsの取得元をCORSとかで縛ればいい気がする。

【参考2】How to execute \<script\> code in a javascript append
http://stackoverflow.com/questions/14269587/how-to-execute-script-code-in-a-javascript-append

#まとめ
blank frame だと safari で色々と面倒な事が起こる。
evalのほうが色々と考えなくていいけど、セキュリティ的にどうなのか。と。
ファームウェア、外部信号取り込みの注意点

Arduino、IoTのおかげでファームウェアの活躍の場が増えています。
ファームウェアは時間に対してシビア。モーターの回転パルスを取得して速度検出、タイマー割り込みで一定間隔で発光など。

この外部信号処理の扱いを間違えると、機能追加でプログラムが大きくなった時に「あれ、信号、取得できてなくない？」という、時限爆弾になります。


# パルス数の取得
## 目的
外部からのパルス数を数える(たとえば、モーター回転速度など)

## NG1: メインルーチンで頑張る
割り込みを使わなくてもできる！というモチベーションで行うもの。

```Arduino:Arduino
int pin = 13;
volatile int pin_state = LOW;   // パルス入力ピンの状態保持
unsigned int cnt = 0;  // パルスカウンター

void setup()
{
  pinMode(pin, INPUT);
}
 
void loop()
{
  /*
    色々な処理
  */

  int pin_now;
  pin_now = digitalRead(pin);  // パルス信号入力ピン読み込み

  if ( pin_now != pin_state ){
    // ピンの状態が遷移
    pin_state = pin_now;

    if ( pin_now == HIGH ){
      cnt++;  // ピンがLOWからHIGHになったので、カウントアップ
    }
  }
}
```

### 何が問題か
メインルーチン(上記の loop 関数)で処理を行う場合、**色々な処理** が問題になる可能性があります。
作り始めはちゃんと機能していても、機能追加でメインルーチンはどんどん重くなる方向です。そしてある時、この色々な処理をしているうちに、パルスが立ち上がり、立下がる、という状況が起きます。認識できなくなります。

## NG2: 割り込み内で色々な処理
「xx回に一回はこれをやる」といったとき、割り込み内でやるパターン

```Arduino:C
int pin = 13;
volatile int pin_state = LOW;

void pluse()
{
  cnt++;

  if ( cnt == 10 ){
    /* 
      色々な処理
    */
  }
}

 
void setup()
{
  attachInterrupt(0, pluse, RISING);
}
 
void loop()
{
} 
```

### 何が問題か
これも、**色々な処理** が、次のパルスが来るまでに重くなれば間に合わなくなります。
特に、特にこのパターンは色々形を変えて、入り込んできます。油断すると、処理を書いてしまう場所です。

## おすすめパターン
割り込み処理内はとにかくシンプルに。基本はフラグ処理。必要な変数はglobal変数に格納

```Arduino:C
boolean flag = false;
volatile int pin_state = LOW;

void pluse()
{
  cnt++;

  if ( cnt == 10 ){
    flag = true;
  }
}

 
void setup()
{
  attachInterrupt(0, pluse, RISING);
}
 
void loop()
{
  if ( flag )
  {
    /*
      色々な処理
    */
    flag = false;
  }
}
```

# まとめ
言いたいことは簡単ですが、
「プログラムはメインルーチンで。割り込み処理内は最低限の処理のみ。」
です。
この基本からずれたコードを仕事でも見かけます。後々問題を起こす危険のある時限爆弾は、未然に防ぎたいです。
Could not instantiate class named IBNSLayoutConstraint でクラッシュする場合

```
Could not instantiate class named IBNSLayoutConstraint
```

これが出たらおそらく制約がプレースホルダーとして設定されていて矛盾が生じていると思われるので、`Remove at build time` = true に**なっていないか**を確認した方が良い。IBからインスタンスが作れる際に消失しているので、false にするか適切な制約を補うべきである。
PHPで確実に来月末や来月１日を求める


来月1日を求める場合、こんなコードを書いてたんだけど、これを1月30日に実行すると、2月30日がないので、繰り越して3月になってしまう。

```php
// Today = 2017-01-30
date('Y-m-01', strtotime(date('+1 month')) // 2017-03-01
```

ほしいのは2月1日なので、今月1日から計算をする。

```php
// Today = 2017-01-30
date('Y-m-01', strtotime(date('Y-m-01').'+1 month')) // 2017-02-01
```

## 追記(2017.02.05)
こんな書き方もあるようです。

```php
// Today = 2017-01-30
date('Y-m-d', strtotime('first day of next month', strtotime(date('Y-m-d')))) // 2017-02-01
```

```php
// Today = 2017-01-30
date('Y-m-01', mktime(0, 0, 0, date('n') + 1, 1, date('Y'))) // 2017-02-01
```

## 修正（2017.09.19）
`mktime()`を使った方法を修正しました。

```php
// Today = 2017-09-19

// 誤：日付が0になってるので、今月初日を返してしまう
date('Y-m-01', mktime(0, 0, 0, date('n') + 1, 0, date('Y'))) // 2017-09-01

// 正
date('Y-m-01', mktime(0, 0, 0, date('n') + 1, 1, date('Y'))) // 2017-10-01
```
Oven を使用して CakePHP3 を簡単インストールメモ


前回、[CakePHP3のインストール](http://qiita.com/ina_ryu/items/50d1e458af640aa13fc3)に挑戦してみたけど、今回はさらにインストールが簡単にできる [Oven](https://github.com/CakeDC/oven "Oven") というのが出たらしいので、[こちらの記事](http://qiita.com/chinpei215/items/0d5d731045a68fe9ea5c "Oven を使って CakePHP3 をワンクリックでインストールする")を参考にインストールしてみたいと思います。

## Oven のダウンロード

[CakeDC/oven](https://github.com/CakeDC/oven/releases) から Oven の zip ファイルをダウンロードする。

## CakePHP3 インストール

ダウンロードした zip ファイルを解凍して `oven.php` ファイルをドキュメントルートにアップする。
後はブラウザからアクセスして `Click to install CakePHP` をクリックするだけで簡単にインストールできる。
![スクリーンショット 2017-01-30 19.48.34.png](https://qiita-image-store.s3.amazonaws.com/0/13180/f58b00a6-88f8-e85c-e84c-0b65a78e21be.png "スクリーンショット 2017-01-30 19.48.34.png")
上記のようにサクッとインストールすることができた。
**※ただ現状だとドキュメントルート直下に `app` フォルダが作成されてその中にCakePHP本体等がインストールされてしまい、URLが`http://example.com/app/`みたいになってしまうので注意が必要。インストール自体はものすごく楽になるけど、CakePHP本体等のプログラム群はドキュメントルート外に設置したい方にとっては現状だと素直に `Composer` でインストールでしたほうがその後の設定など楽かもしれない。。**
LÖVEでHello World

こんにちは@xsotaです。LÖVEでHello World!までやってみます。Macです。

# LÖVE
LÖVEはLuaで2Dゲームを作るのに使うことができる、ナウでイケてるフレームワークです。 オープンソースで、Windows、Mac OS X、Linux、Android、iOSで動作します。

## ダウンロード
まず https://love2d.org/ にアクセスしてダウンロードします。
<img width="893" alt="LÖVE_-_Free_2D_Game_Engine.png" src="https://qiita-image-store.s3.amazonaws.com/0/113692/d08ca198-d4ac-74b5-bb10-5496aafe451c.png">

ZIPを展開すると love.app が出現するのでApplicationsにでも突っ込んでおきましょう。

# Hello World!
ゲーム作成用のディレクトリを作成します。

```zsh
$ mkdir -p ~/love2d/helloworld
$ cd  ~/love2d/helloworld
```
`helloworld` ディレクトリの中にmain.luaを作成して以下の内容を記述します。

```main.lua
function love.draw()
  love.graphics.print('Hello World!', 400, 300)
end
```
あとは実行するだけです。

## 実行
以下のコマンドで実行できます。

```zsh
$ /Applications/love.app/Contents/MacOS/love ~/love2d-helloworld
```
実行すると以下のような画面が表示されるはずです。
<img width="800" alt="Untitled.png" src="https://qiita-image-store.s3.amazonaws.com/0/113692/60b7763a-f1a0-a295-edaa-c4b2bce408a7.png">

実行コマンドが長いのでaliasしとくとよいのではないでしょうか。

```zsh
$ alias love="/Applications/love.app/Contents/MacOS/love"
```

# おわり
LÖVEでHello World!やってみました。

せっかくなんでなんかゲームつくりたいですね。

それではさようなら。