OmniAICreator/Qiita-1.07M huggingface dataset:
p5.jsで矩形をドラッグする

# p5.jsとは
Processingっぽい事ができるJavaScriptライブラリです。Web上でグラフィカルな表現をしたい時に使えます。
公式のリファレンス読めばとりあえず動かせます。
[公式サイト](https://p5js.org/)


# キャンバスに描画したオブジェクトをドラッグで動かす
サンプルは[こちら](http://runstant.com/de-teiu/projects/3a90a3f6)(Runstantに飛びます)

##ざっくり解説
p5.jsに搭載されているmousePressed、mouseDragged、mouseReleased関数をそれっぽく組み合わせて実現します。

###マウスクリックした瞬間に呼ばれるイベント(mousePressed)
```js:
function mousePressed(){
  for(var i=objList.length-1;i>=0;i--){
    if(objList[i].pressed()){
      break;
    }
  }
}

```
画面に描画するオブジェクトに対してクリック判定の処理を呼び出します。
クリックされたオブジェクトが１つ見つかった時点で終了します。
オブジェクトごとのクリック判定処理の順番は、オブジェクトを描画する順番とは逆にしておきます。
(より前面に描画されたオブジェクトを優先的にドラッグできるようにするため)

オブジェクトのpressed関数の中身はこんな感じです。
マウスの位置が矩形の範囲内にあるかどうかを判定してます。
ドラッグを開始する際はオブジェクトのクリック座標を保存しておきます。

```js:
DragObject.prototype.pressed = function(){
  
  if(this.x <= mouseX && mouseX <= this.x + this.wid &&
    this.y <= mouseY && mouseY <= this.y + this.hei){
      this.pressedX = this.x - mouseX;
      this.pressedY = this.y - mouseY;
      this.draggedFlg = true;
  }
  return this.draggedFlg;
}
```


###マウスドラッグ中に呼ばれるイベント(mouseDragged)
```js:
function mouseDragged() {
  for(var obj of objList){
    obj.drag();
  }
}
```
オブジェクトのドラッグイベントを呼び出します。
オブジェクトの位置を更新してます。

```js:
DragObject.prototype.drag = function(){
  if(this.draggedFlg){
    this.x = mouseX + this.pressedX;
    this.y = mouseY + this.pressedY;
  }
}
```


###ドラッグ終了時のイベント(mouseReleased)
```js:
function mouseReleased(){
  for(var obj of objList){
    obj.release();
  }
}
```

オブジェクトのドラッグ終了イベントを呼び出します。

```js:
DragObject.prototype.release = function(){
  this.draggedFlg = false;
}
```


もっと良い書き方たくさんありそうですが、とりあえず動いたので現場からは以上です。
[Angular2]複数httpリクエスト

Angular1ではPromiseを使っていましたが、
Angular2ではObservableを使用するようになったようです。
忘れそうなのでメモ・・・

```typescript
import { Injectable } from '@angular/core';
import { Http } from '@angular/http'
import { Observable } from 'rxjs'

@Injectable()
export class HogeService {

  constructor(private http: Http) { }
　// 並列に実行してすべて完了したら結果をlogを出力するサンプル
  sample1() {
    let urls = [
      "http://itunes.apple.com/jp/rss/newapplications/limit=10/json",
      "http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json",
      "http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json",
    ];
    var requests = [];
    for (var url of urls) {
        requests.push(this.http.get(url).map(result => result.json()))
    }
    Observable.forkJoin(requests).subscribe( res => { console.log(res) })
  }
  // 直列（順次）に実行して処理すべて完了したら結果をlogに出力するサンプル
  sample2() {
    let urls = [
      "http://itunes.apple.com/jp/rss/newapplications/limit=10/json",
      "http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json",
      "http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json",
    ];
    var results = [];
    this.http.get(urls[0]).map(res => { results.push(res)})
    .flatMap(res => this.http.get(urls[1])).map(res => { results.push(res)})
    .flatMap(res => this.http.get(urls[2])).map(res => { results.push(res)})
    .subscribe( res => { console.log(results) })
  }

  // sample2と同じだけど、ぱっとみきれい？
  sample3() {
    let urls = [
      "http://itunes.apple.com/jp/rss/newapplications/limit=10/json",
      "http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json",
      "http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json",
    ];
    var results = [];
    this.http.get(urls[0])
    .map(res => { results.push(res); return this.http.get(urls[1])})
    .map(res => { results.push(res); return this.http.get(urls[2])})
    .map(res => results.push(res))
    .subscribe( res => { console.log(results) })
  }

}

```

ちなみに`toPromise()`でPromise化もできる。(`import 'rxjs/add/operator/toPromise'`)

もっときれいな書き方あったら教えてください
JSON Web Tokens Introduction 和訳要約版

## 始めに
本記事は、本家[JSON Web Tokens Introduction](https://jwt.io/introduction/)の和訳要約版です。その為、詳細にはまとめていない点はご了承ください。

## JWTとは何か
* JSON Web Tokens(JWT)は
  * [RFC7519](https://tools.ietf.org/html/rfc7519)で定義されたオープンな仕様である。
  * 情報を安全かつコンパクトに格納してJSONオブジェクトとして送信することができる

## いつJSON Web Tokensを利用すべきか

### 認証
ユーザーがログインしたら、各リクエスト毎にJWTを要求し、トークンを利用することで、サービス、リソースにアクセスすることが許可される。異なるドメイン間でも使用できるため、今日では幅広く利用されている機能である。

### 情報交換
JWTは、当事者間で安全に情報交換が出来る方法である。JWTは、ヘッダーとペイロードを利用して署名が追加され、改ざんされていないか認証することができる。

## JSON Web Tokensの構造

SON Web Tokens はドットで区切られた以下の３つの部品から成る。

* ヘッダー
* ペイロード
* 署名

それを結合して、 このように`xxxxx.yyyyy.zzzzz` なっている。
各部分毎に説明する。

### ヘッダー
ヘッダーは主に２つの部品からなる。

* typ: トークンの種別。
* alg:HMAC SHA256 や RSAなどの暗号化に使用したアルゴリズム

```json
{
  "alg": "HS256",
  "typ": "JWT"
}
```

これは `Base64Url` でエンコードされ、JWTの最初の部分となる。

### ペイロード
トークンの２番目の部分であるペイロードでは、メタデータなどの情報のクレームを含むことができる。クレームには、予約済みクレーム、公開クレーム、プライベートクレームの３つがある。

#### 予約済みクレーム
予約済みのクレームで、情報交換時に便利な機能を提供する。

詳しくは後日。

#### 公開クレーム
自由に定義できるが、名前が衝突しないように注意が必要。

#### プライベートクレーム

情報交換する際に当事者間の承諾のもとに作成するカスタムクレーム。


#### ペイロードの例

```json
{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}
```

このペイロードも `Base64Url` でエンコードされ、JSON Web Tokenの２番目の部分となる。

### 署名

HMACSHA256を利用した署名の作り方は以下となる。この署名は、送信されてきたJWTが改ざんされていないかの認証用に使用される。またこの文字列はJWTの３番目の部分となる。

```shell-session
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
```

## JSON Web Tokensはどのようにして利用するのか？
ユーザー認証時にログインに成功したら、JSON Web Tokensを返し、セッションなどサーバーを利用せず、各デザイのローカル内（local storageやクッキーなど）に保存する。

保護されたリソースにアクセスしたい場合、ユーザーは`Authorization`ヘッダーに、以下のようなBearerスキーマを送信する。

`Authorization: Bearer <token>`

これにより、サーバーに何も保存せずステートレスにAPIとやり取りが出来る。また異なるドメイン間でも通信ができ、CORSの心配もない。

## 参考
* [JSON Web Tokens \- jwt\.io](https://jwt.io/)
* [JWTについて簡単にまとめてみた \- hiyosi's blog](https://hiyosi.tumblr.com/post/70073770678/jwt%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%B0%A1%E5%8D%98%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%81%BF%E3%81%9F)
Visual Studio 2017でC#7を使えるようにする方法

Visual Studio 2017って、C#7対応じゃなかったの？
それともOSがWindows7だから？
入れてみたけどC#7が使えなかったので、調べた結果を備忘録として。

[How to enable C# 7 in Visual Studio 2017 – benjamin perkins](https://blogs.msdn.microsoft.com/benjaminperkins/2017/03/23/how-to-enable-c-7-in-visual-studio-2017/)


以下でパッケージを入れたらC#7が使えるようになったよ。

```
Install-Package Microsoft.Net.Compilers
```


タプルで必要

```
Install-Package System.ValueTuple
```
上記サイトでは綴りが間違っているので、こちらを。
SublimeText3の設定をGitで管理する

# 前提
1. Gitがインストールされていること
2. GitHub等のGitホスティングサービスのアカウントを持っていること

# 手順
1. 既にSublimeTextを使用中の場合は、C:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\Userの中身を別のディレクトリへ退避し、SublimeTextをアンインストールする
2. SublimeTextをインストールする
3. C:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\Userで以下のコマンドを実行し、ローカルリポジトリを作成。

    ```git:
    git init
    ```

4. ローカルリポジトリに最初のcommit(空commitにする)
参考: [Gitの最初のコミットは空コミットにしよう - Qiita](http://qiita.com/NorsteinBekkler/items/b2418cd5e14a52189d19)

    ```git:
    git commit --allow-empty -m "first commit"
    ```

5. .gitignoreファイルの作成
参考: [Windowsエクスプローラーでドットファイルを作成する - Qiita](http://qiita.com/sgur/items/745e0ee02c69b50bf9e5)

    ```gitignore:作成例
    *.errors.log
    1self.sublime-settings
    encoding_cache.json
    oscrypto-ca-bundle.crt
    Package Control.last-run
    Package Control.merged-ca-bundle
    Package Control.system-ca-bundle
    Package Control.user-ca-bundle
    c2u_tmp/
    ColorPicker/
    Color Highlighter/themes/
    Package Control.cache/
    ```

6. ローカルリポジトリにcommit

    ```git:
    git add .
    git commit -m "second commit"
    ```

7. Gitホスティングサービス上でリモートリポジトリを作成
8. リモートリポジトリを登録

    ```git:githubの場合
    git remote add origin git@github.com:username/reponame.git
    ```


    ```git:Bitbucketの場合
    git remote add origin https://username@bitbucket.org/username/reponame.git
    ```

9. ローカルリポジトリからリモートリポジトリへpush

    ```git:
    git push -u origin master
    ```

10. 1で退避したファイルを、C:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\Userに上書きする

# バージョン管理の対象ファイル

## Default (Windows).sublime-keymap
Preferences > Key Bindings から開ける、キーバインドの設定ファイル

## Package Control.sublime-settings
Package ControlからインストールしたPackageの一覧が記録されるファイル
SublimeTextは、起動時にこのファイルを読み込み、最新バージョンのPackageをダウンロードするようになっています

## Preferences.sublime-settings
Preferences > Settings から開ける、SublimeText全体の設定ファイル

## {Package名}.sublime-settings
Preferences > Package Settings から開ける、Packageごとの設定ファイル

## {言語名}.sublime-settings
Preferences > Syntax Specific から開ける、言語ごとの設定ファイル

## その他ファイル
- *.sublime-build (自作のbuild設定)
- *.sublime-snippetsnippet (自作のsnippet)
- *.tmTheme (カラースキーム)
- *.sublime-macro (自作のマクロ)
- その他自作のファイル

#リンク
[Syncing - Package Control](https://packagecontrol.io/docs/syncing)
[mokmokjp/sublime_settings - GitHub](https://github.com/mokmokjp/sublime_settings)
Laravel 5.4でiso-2022-jpエンコードのメールを送信する

とりあえず動きますが、やっつけ感が否めないです。もっと綺麗に書けそうです。

```php:app/Providers/AppServiceProvider.php
<?php

namespace App\Providers;

...

use Swift;
use Swift_DependencyContainer;
use Swift_Preferences;

class AppServiceProvider extends ServiceProvider
{
    ...

    public function register()
    {
        ...

        // ここを追加
        Swift::init(function () {
            Swift_DependencyContainer::getInstance()
                ->register('mime.qpheaderencoder')
                ->asAliasOf('mime.base64headerencoder');
            Swift_Preferences::getInstance()->setCharset('iso-2022-jp');
        });
    }
}
```

```php:app/Mail/OrderShipped.php
<?php

namespace App\Mail;

...

use Swift_Mime_ContentEncoder_PlainContentEncoder;

class OrderShipped extends Mailable
{
    ...

    public function build()
    {
        return $this->from('example@example.jp')
                    ->subject('日本語サブジェクト')
                    ->text('emails.order_shipped')
                    ->withSwiftMessage(function ($message) {
                        $message->setCharset('iso-2022-jp')
                                ->setEncoder(new Swift_Mime_ContentEncoder_PlainContentEncoder('7bit'));
                    });
    }
}
```

## 参考

* [SwiftMailerでJIS(iso-2022-jp)のメールを送る件](http://uzulla.hateblo.jp/entry/2015/03/20/235252)
VPN接続したときに、所定のIPをVPN経由で接続するようにする


社内からのみ接続できるサーバがある。自宅で作業するときに、今までは自宅のMacからVPNで会社のMacにsshでログインし、そこからサーバに接続していた。

ただ、会社のMacを立ち上げた状態にしておかなければならないなど少々不便に感じたので、社内からのみ接続できるサーバは、自宅のMacからVPN経由で直接接続できるようにした。

以下は例として、192.168.10.0/24へのアクセスをVPN経由になるようにする方法について。

VPNを接続するときは`/etc/ppp/ip-up`を、解除するときは`/etc/ppp/ip-down`を実行するので、`route`コマンドを使って所定のIPを追加、削除するスクリプトを作る。

```
cat <<'EOT' | sudo tee /etc/ppp/ip-up > /dev/null
#!/bin/sh
set -eu

if [ "$1" = "ppp0" ]; then
    /sbin/route add -net 192.168.10.0/24 -interface ppp0
fi
EOT
```

```
cat <<'EOT' | sudo tee /etc/ppp/ip-down > /dev/null
#!/bin/sh
set -eu

if [ "$1" = "ppp0" ]; then
    /sbin/route delete -net 192.168.10.0/24
fi
EOT
```

そして、作成したスクリプトを実行可能にする。

```
sudo chmod 755 /etc/ppp/ip-up /etc/ppp/ip-down
```

実行可能にしたらVPN接続をしてルートが追加されていることを確認する。それが確認できたら接続解除して、ルートが削除されていることを確認する。確認には`netstat`コマンドを使用する。

```sh
$ netstat -rn
Routing tables

Internet:
Destination        Gateway            Flags        Refs      Use   Netif Expire
...
192.168.10         ppp0               USc             1        0    ppp0
...

Internet6:
Destination                             Gateway                         Flags         Netif Expire
...
```

あとは、`ssh`コマンドで実際に接続できることを確認する。

## 参考

- [\[mac\] 特定の接続先のみVPN経由で接続する : アララグループの技術者ブログ](https://www.arara.com/staffblog/tech/2013/07/29/1035/)
- [Macでルートの追加、ルーティングテーブルの確認 - Disce gaudere. 楽しむ事を学べ。](http://d.hatena.ne.jp/keroring/20120326/1332739760)
Unit値がコンパイラによって挿入される

# コンパイルエラーにならなかった

あら、通るの。

```scala
def foo(): Future[Unit] = Future.successful(100)
```

# 型階層の確認

http://www.scala-lang.org/api/2.12.1/scala/concurrent/Future.html

Future型は `Future[+T]` で型パラメータは共変指定。
上記のコードがコンパイルが通るということはInt型はUnit型のサブクラスじゃないといけないわけだが

```scala
scala> 100.isInstanceOf[Unit]
res0: Boolean = false
```

ふむ。

なお、Unit型はAnyValを継承してfinalが付けられている。

http://www.scala-lang.org/api/2.12.1/scala/Unit.html

# コンパイルの様子を見る

```
❯❯❯❯ scala -Xprint:typer -e 'def foo(): scala.concurrent.Future[Unit] = scala.concurrent.Future.successful(100)'                                                                                                       
```

出力内容を抜粋して、

```
....

private def foo(): scala.concurrent.Future[Unit] = scala.concurrent.Future.successful[Unit]({
  100;
  ()
})

....
```

なるほどー。
そういうわけかー。

その他にも、

```scala
val x: Unit = "hello, world!"
```

これもコンパイルは通る。もう予想はつくが -Xprintして 抜粋して、、、

```
....

private[this] val x: Unit = {
  "hello, world!";
  ()
};

....
```
Visual Studio 2017からPHPでツイートするアプリ開発(twitteroauth)

Visual Studio 2017でTwitterにツイートするアプリをPHPで開発してみました。

PHPでツイートする手順はこちらを参考にさせていただきました。
http://qiita.com/tsunet111/items/9309801cd3e3bcf6e32a

#環境
Windows 7 Professional SP1 64bit
Visual Studio 2017 Community
PHP Tools for Visual Studio v1.23.9750

環境構築やPHPプロジェクトの作成はこちらを参考にしてください。
http://qiita.com/akabei/items/70fafaef7b86afb5a7ec

#プロジェクト作成
新しいプロジェクトで「PHP Console Project」を作成します。

![aa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/f908dae9-6a6e-243f-e833-665cc8c2186d.png)

#twitteroauthパッケージインストール
プロジェクトのReferencesを右クリックして「Install New Composer Packages...」を選択します。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/a5805fee-362c-06d8-06fd-8687675d4ac2.png)

ダイアログが表示されたら左上のテキストボックスに「twitteroauth」を入力するとリストに「abraham/twitteroauth」が表示されるので、それを選択してInstall Packageを押します。

![bbb.png](https://qiita-image-store.s3.amazonaws.com/0/112075/acefe3e3-8031-c34c-72e0-8f5843621a7a.png)

しばらく待まって「Installed locally」と表示されたらインストール完了です。

![ccc.png](https://qiita-image-store.s3.amazonaws.com/0/112075/982daa03-4fa1-fb7d-7454-db6ecb0bac4a.png)

ダイアログを閉じるとプロジェクトのReferencesにabraham/twitteroauthが追加されています。

![ddd.png](https://qiita-image-store.s3.amazonaws.com/0/112075/99715b24-0531-bca3-fd3c-f2b1e7be20a0.png)

#ツイート
index.phpを以下のように書き換えます。

```PHP:index.php
<?php
require_once 'vendor/autoload.php';
use Abraham\TwitterOAuth\TwitterOAuth;

$consumerKey = 'xxxxxx';
$consumerSecret = 'xxxxxx';
$oauthToken = 'xxxxxx';
$oauthTokenSecret = 'xxxxxx';

$to = new TwitterOAuth($consumerKey, $consumerSecret, $oauthToken, $oauthTokenSecret);
$res = $to->post('statuses/update', ['status' => 'ついーとなう']);

var_dump($res);
?>
```

実行してちゃんとツイートされたか確認してください。

文字化けした場合はこちらを参考にファイルの文字コードをUnicodeにします。
http://qiita.com/akabei/items/70fafaef7b86afb5a7ec
【メモ】表示速度を改善するためにjpeg画像を最適化するためにjpegoptimをmacにインストールした方法

①homebrewをインストールして、
(参考)
http://qiita.com/_daisuke/items/d3b2477d15ed2611a058
https://brew.sh/index_ja.html
②jpegoptimをインストール
(参考)
http://qiita.com/4486/items/f83d9d340a9889177748
[Unity] Coroutineに渡したIEnumaratorは再利用できない

#概要
IEnumeratorにはResetメソッドがある。
Coroutineに渡すIEnumeratorを再利用することができるのかという実験。
忘備録です。

#環境
Unity5.5.2p4

#結果
できません:smirk:
まぁ察しの通り。

#内容
以下のコードをGameObjectにアタッチ。
uGUIのボタンのイベントにメソッドOnPressedButtonを関連付ける。

```csharp
using UnityEngine;
using System.Collections;

public class Test2Coroutine : MonoBehaviour
{
    IEnumerator _iEnumerator;
    Coroutine _coroutine;

    private void Awake()
    {
        _iEnumerator = Loop();
    }

    IEnumerator Loop()
    {
        Debug.LogFormat("[LOOP] Start()");
        int i = 0;

        while(true)
        {
            i++;
            Debug.LogFormat("[LOOP] i:{0}", i);
            yield return null;
        }
    }

    public void OnPressedButton()
    {
        Debug.LogFormat("Pressed button.");
        _iEnumerator.Reset();

        if (_coroutine != null)
            StopCoroutine(_coroutine);

        _coroutine = StartCoroutine(_iEnumerator);
    }
}
```

ログの内容
```
Pressed button.
NotSupportedException: Operation is not supported.
  at My.Test2Coroutine+<Loop>c__Iterator0.Reset () [0x00000]
  at My.Test2Coroutine.OnPressedButton () [0x00017]
  at UnityEngine.Events.InvokableCall.Invoke (System.Object[] args) [0x00017]
  at UnityEngine.Events.InvokableCallList.Invoke (System.Object[] parameters) [0x00056]
  at UnityEngine.Events.UnityEventBase.Invoke (System.Object[] parameters) [0x0000e]
  at UnityEngine.Events.UnityEvent.Invoke () [0x00008]
  at UnityEngine.UI.Button.Press () [0x00022]
  at UnityEngine.UI.Button.OnPointerClick (UnityEngine.EventSystems.PointerEventData eventData) [0x00012]
  at UnityEngine.EventSystems.ExecuteEvents.Execute (IPointerClickHandler handler, UnityEngine.EventSystems.BaseEventData eventData) [0x00008]
  at UnityEngine.EventSystems.ExecuteEvents.Execute[IPointerClickHandler] (UnityEngine.GameObject target, UnityEngine.EventSystems.BaseEventData eventData, UnityEngine.EventSystems.EventFunction`1 functor) [0x00073]
```


ListなどのコレクションのIEnumeratorならできるかもしれないですね。
まぁ予想通り。
標準入力の文字列操作のエイリアスをたくさん作ったら便利になった

Fishに限らずだが、ちょっとした文字列操作の関数をたくさん作ったら便利になった。

今まで、 `perl -pe s/hoge/fuga/g` みたいにやってたのがもっと速くできるようになった。

```bash:~/.config/fish/config.fish
function sub
    perl -pe "s#$argv[1]#$argv[2]#"
end

function gsub
    perl -pe "s#$argv[1]#$argv[2]#g"
end

function insert
    perl -pe "s#^#$argv[1]#g"
end

function append
    perl -pe "s#\$#$argv[1]#"
end

function delete
    perl -pe "s#$argv[1]##g"
end
```

都道府県から配列を作る時はこんな感じ
最近 `paste` と `psub` コマンドに可能性を大いに感じている。

```bash
paste (seq 10 | insert "['id' => " | psub) \
      (cat pref.txt | insert  ", 'name' => '" | append "']," | psub ) \
| sub '\t' ''  

['id' => 1, 'name' => '北海道'],
['id' => 2, 'name' => '青森県'],
['id' => 3, 'name' => '岩手県'],
['id' => 4, 'name' => '宮城県'],
['id' => 5, 'name' => '秋田県'],
['id' => 6, 'name' => '山形県'],
['id' => 7, 'name' => '福島県'],
['id' => 8, 'name' => '群馬県'],
['id' => 9, 'name' => '栃木県'],
['id' => 10, 'name' => '茨城県'],
```
MacにCaffeをインストール

MacにCaffeをインストールしようとして非常に手こずったのでメモとして残しておきます。
環境：OSX 10.11.1(El Captain) MacBook Pro 13inch, Early 2011(<-そろそろ買い換えないと。。)
CPUモードでのインストールのみです。

以下の記事を参考にさせていただきました。
① http://qiita.com/Kajiyu/items/e8ad0ccd878328a21e8a
② http://d.hatena.ne.jp/shu223/20160103/1452000295

上の記事を参考にインストールを進めました。
`$ make runtest`
までは問題なく進みましたが、
`$ import caffe`
でSegmentation fault: 11となりました。

記事②を参考に、Makefile.configを見直したが、直らず。
PYTHON_INCLUDE := /usr/local/Cellar/python/2.7.11/Frameworks/Python.framework/Versions/2.7/include/python2.7 \
    /usr/local/lib/python2.7/site-packages/numpy/core/include/
PYTHON_LIB := /usr/local/Cellar/python/2.7.11/Frameworks/Python.framework/Versions/2.7/lib

`$ cmake .`
のログを見ると、
-- Python:
--   Interpreter       :   /usr/local/bin/python2.7 (ver. 2.7.11)
--   Libraries         :   /usr/lib/libpython2.7.dylib (ver 2.7.10)
となり、Makefile.configの設定が反映されていませんでした。

`$ cmake . -DPYTHON_LIBRARY=/usr/local/Cellar/python/2.7.11/Frameworks/Python.framework/Versions/2.7/lib/libpython2.7.dylib`
とし、直接pathを指定することで、無事
`$ import caffe`
できるようになりました。
Fusion 360でレーザーカッター用のデータを作成する方法


Fusion360で作成したモデルのスケッチをAdobe Illustratorに取り込んで、レーザーカッター用データを作成する方法です。

# 使用ソフト
- Fusion 360
- Adobe Illustrator CC

Illustratorは体験版でも作成可能です。


# Fusion 360のモデルをDXF形式で書き出す

1. Fusion 360で作成した3Dモデルから書き出したいボディを選択する。
2. [スケッチ]メニューから[投影/含める]-[プロジェクト]を選択する。
![1_Fusion_投影.png](https://qiita-image-store.s3.amazonaws.com/0/16957/ad40311d-2b53-63db-8731-35dbda36b211.png "1_Fusion_投影.png")


3. 選択したボディを基にした平面のスケッチが作成される。
4. [プラウザ]から作成されたスケッチを右クリックし、[DXF形式で保存]を選択して名前を付けて保存する。
![2_Fusion_DXF.png](https://qiita-image-store.s3.amazonaws.com/0/16957/52050903-9502-e9b0-0a39-2ffd10363c28.png "2_Fusion_DXF.png")



# DXFファイルをIllustratorに取り込む

1. Illustratorで新規ドキュメントをカラーモードRGBで作成する。縦横のサイズはレーザーカッターのマニュアルに従う。
2. [ファイル]から[配置...]を選択して、書き出しておいたDXFファイルを選択する。このときファイル選択画面の左下にある[オプション]ボタンを押すとオプションが表示されるので、[読み込みオプションを表示]をチェックして[配置]ボタンを押す。
![3_AI_import.png](https://qiita-image-store.s3.amazonaws.com/0/16957/beb60e95-faa4-1aaf-3574-4c7d130d1a70.png "3_AI_import.png")


3. DXF/DWGオプション画面が開くので、[アートワークの倍率]で**[元のサイズ]**を選択すること。これを選択しないとFusion 360で設計した通りの寸法で取り込まれません。
![4_AI_inport_option.png](https://qiita-image-store.s3.amazonaws.com/0/16957/9de08ce4-6880-4586-5222-f6ff25c8b630.png "4_AI_inport_option.png")


4. ドキュメント上の配置したい場所をクリックして配置する。
 
***
ここから先はレーザーカッターの機種によって違うかも知れないので、レーザーカッターのマニュアルに従う。

# レーザーカッター出力用に修正
- Illustratorに取り込んだデータをレーザーカッターのマニュアルに指定されている条件に修正します。例えば、レーザーカッターで切断する部分は線(パス)の色を赤(R=255,G=0,B=0)に、太さを0.01ptに変更する。
![5_AI_Path.png](https://qiita-image-store.s3.amazonaws.com/0/16957/d84b987d-b684-be44-6517-66201c77bbb3.png "5_AI_Path.png")


# 指定のファイル形式で保存
- 私の使用したレーザーカッターの場合はCS5以下バージョンが指定されていたので、保存画面の次に表示される[Illustrator オプション]画面でバージョンを[Illustrator CS5]に変更して保存しました。
![6_AI_SaveAs_CS5.png](https://qiita-image-store.s3.amazonaws.com/0/16957/5305c8d1-47be-2fee-597a-041131c455fb.png "6_AI_SaveAs_CS5.png")


- 保存したIllustrator(.ai)ファイルをUSBメモリなどに入れてレーザーカッター出力用PCにコピーし、出力配置用ソフト（私の場合はCorelDRAWでした）を起動してIllustrator(.ai)ファイルをインポートします。

***
以上で手順は終了です。作業のポイントは、
- Fusion360でスケッチを**DXF形式**で書き出す。
- Illustratorでアートワークの倍率を**元のサイズ**で取り込む。
です。
Sassについて

Sass(Syntactically Awesome StyleSheetの略)とはCSSの機能を拡張した言語。Sassを利用することで、CSSを効率的に書けるようになる。SassはCSSに非常に似ているが異なる言語。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができる。
![Kobito.x4JFLI.png](https://qiita-image-store.s3.amazonaws.com/0/169530/5ed696ab-559a-c2cb-e8cf-4352e6333720.png "Kobito.x4JFLI.png")

SassはそのままではWebブラウザーに認識されない。Sassのファイルである.scssファイル（.sassファイルもある）をコンパイラーに通すことで.cssファイルを生成することになる。

Sass（SASS記法、SCSS記法）とCSSのコードの違いは以下の通り

```.sass
body
  color: #000
```

```.scss
body{
	color:#000;
}
```

##SassとScssの違い##
これをコンパイラーに通すと、下記変換となる。

```.css
body {
  color:#000;
}
```

SCSS記法とSASS記法の違いをまとめると、以下の表の通り
![1.png](https://qiita-image-store.s3.amazonaws.com/0/169530/d83ac454-31d8-8101-ec42-cfabe7518dbe.png "1.png")

##Sassのメリット##
Sassには以下のようなメリットがある。

・記述の簡略化
・プログラムのような処理
・複数のCSSファイルを1つにまとめる
・同じ値を使い回す

####Sassにおける変数
Sassでは、変数を使用することが可能。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができる。変数を定義するには、$変数名: 値;のように記述する。

```Sassにおける変数
$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}
```
####パーシャル
パーシャルとは、分割したSassファイル。ファイルを分割することで、機能や内容ごとに管理ができるようになる。一つのファイルに全てのスタイルを書くと膨大な記述になり、可読性が悪くなる。一定のルールでファイルを分割して開発することで変更・修正がしやすくなる。

パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始める。パーシャルファイルを読み込むには、@import ファイル名と記述。
以下は、_reset.scssと_header.scssを読み込む例。
以下は例のため、sample.scssファイルを追加したり、実際に記述する必要はない。

```sample.scss
@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */
```

####同じ値を使い回す

CSSでは、複数の要素に同じスタイルを適用させる場合、何度も同じスタイルを書かなければいけない。しかし、Sassでは変数を使うことによって、同じ値を使い回すことができる。
また、mixinという機能を使用することで、同じスタイルをまとめることも可能。


#####変数
Sassでは、変数が使用できる。
何度も使用する値を変数を定義することで、変数名で何度も使用することができる。
変数を定義するには、$変数名: 値;のように記述。
以下は変数を定義するファイル、_variable.scssを使用して変数を定義する例。

```_variable.scss
$mainYellowColor: #FFEC00; 
 /* #FFEC00という色をmainYellowColorという変数名で定義する */
```

##### mixin

mixinとは、まとまったスタイルを定義することができる機能。
変数は値を定義するものだが、mixinはスタイルを定義するもの。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなる。
mixinを定義するには、@mixin mixin名() {}のように記述する。
ElectronのWebViewで遊ぶ

ElectronのWebviewで、特定のwebコンテンツを扱いたい。専ブラっぽいものの原型を調べる。

# webview

- electronの[標準ライブラリ](https://electron.atom.io/docs/api/webview-tag/)
- ちょっと`iframe`っぽい
  - jsの実行空間がElectronレンダラーと別（あたりまえか）
  - iframeは`window.parent.document.hoge`などでやり取りができるけど、`webview`はプロセス間通信が必要（後述）
  - プロセス間通信は`webworker`っぽい感じ。arg/returnではなく、メッセージのやり取りでオブジェクトを運ぶ。
- Cookieが使えたり色々便利

# 使い方

## 基本
- htmlで`<webview>`を書くだけ。

```index.html
<webview
	id="wv"
	src="https://electron.atom.io/">
</webview>
```

これだけ。

## webview内のdocumentでjsを実行
- ChromeExtensionなどのようにロードしたドキュメント上でJSが実行できる。
- 外からJSをできるので、ちょっとXSSっぽい感じがする

`preload`属性に実行したいjsを渡しておくと、

```index.html
<webview
	id="wv"
	preload="inject.js"
	src="https://electron.atom.io/">
</webview>
```

実行される。

```inject.js
var body = document.querySelector(body);
console.log(body);
```

これで`index.html`のconsoleを開いてみると、なにも出力されていないはず。これは`main > window > webview`の階層で別プロセス（別のJS空間）だから。index.htmlに以下を追記するとwebviewの中のdeveloperToolが開いて、console.logがへの出力が観察できます。

```index.html
<script>
  var webview = document.getElementById('wv');
  webview.openDevTools();
</script>
```

## webview内とelectronのwindowでやりとりする

上の例だとjsを埋め込んだだけになってしまうので、webViewから情報を取得してwindowに渡してみる。webviewの素晴らしいところは、埋め込んだjs`inject.js`でnode_moduleが使えるところ。Electronの[ipcRenderer](https://electron.atom.io/docs/api/ipc-renderer/)というメッセージAPIを使うことで、windowとwebviewでお話ができます。このへんのメッセージ授受方式がwebworkerっぽい。細かいことはソースに。


window側にメッセージを送るjsを用意します

```index.html
<script src="ipc-host.js"></script>
<webview
	id="wv"
	preload="inject.js"
	src="https://electron.atom.io/">
</webview>
```

```ipc-host.js

var webview = document.getElementById('wv');

// ipcメッセージのイベントがwebviewにある
webview.addEventListener('ipc-message', function(event) {
 switch(event.channel){
   case "getContent":
    console.log(event.arg[0]);  // content.innerTextが出力される
     });
     break;
 }
});

// webviewのロード完了イベント。onloadみたいな感じ。
webview.addEventListener("did-finish-load", function(){
  webview.send("getContent");
});
```

webview側でメッセージオブジェクトを用意して、`on('channel_name', function)`で受信時の動作を書きます。この中で`sendToHost`を呼び出すことで、返信ができます。

```inject.js
// node api
const {ipcRenderer} = require('electron')

ipcRenderer.on('getContent', function(){
  var content = document.getElementsById("content");
  ipcRenderer.sendToHost('getContent', content.innerText);
});
```


# 便利なところ、工夫が必要なところ
- webviewでアクセスしたサイトのクッキーを維持できる。Electronを閉じてもログイン状態などが保持された。
- webview自体のAPIが豊富なのでiframeなどよりも楽に作れる。痒いところにも手が届きやすい感じ
- 画面遷移時に一瞬だけ画面が空白になる。
  - クライアントアプリっぽさを出すには通信時のUIは必須
  - iOS　appはロード時にインジケータやローディングのUIを表示することをアプリ審査の基準としてほぼ義務化している

# まだ調べていないこと、よくわからないこと
- `webview`のUAやリファラを指定する属性について。
  - UAを指定していない場合はChromeのUA？
  - リファラを指定していない場合に画面遷移したらリファラはつく？
- webviewに`preload`で渡したjsはDOM操作できない？
  - HTMLを足したり消したりしようとしてみたがうまくいかず。
  - XSS対策のため、許されていない？
  - `webworker`だとwindowオブジェクトに触れないという制約があるので、似たような機構があるのかも
  - もしくはreadonly？
Go言語を使用して簡単なLineBotを作る

2017.03.22に[Woman Who Go#10](https://womenwhogo-tokyo.connpass.com/event/52154/)でやった内容です。

こちらがトークした内容をオウム返しに返すBotを作ります :blush: 

## Line Developperに登録する
　1. Line Business Centerに登録する。https://business.line.me/ja/
  Messaging APIを選択。
 
 2.LINE @MANAGERにログインする。　https://admin-official.line.me/
　　ここでアカウント情報を入力する。

 3.Line developpersから登録したアカウントを編集する。
　　　　webhook URLを [ngrok](https://ngrok.com/download)を公式またはbrewでインストールし、 `ngrok http 8080`　の結果で帰ってくる、Forwarding元のURL `https://xxxxxxxx.ngrok.io` を登録する。
　`Channel Secret` と　`Channel Access Token`は後ほど利用する。

↑↑↑ここまで準備↑↑↑

4.[line sdkのgithub](https://github.com/line/line-bot-sdk-go)に移動
5. 上のリポジトリをgo getします。
6. `line-bot-sdk-go/examples/echo_bot/server.go` の内容を編集します。
7. 27、２８行目をそれぞれ上のアクセストークンとシークレットに書き換えします。

 ```
bot, err := linebot.New(
        "461~~~~69c03dd",
        "AN6KWhu~~~~~~~DnyilFU=",
	)
```
58行目のポートをngrokでforwardしているポートと同じ番号にします。

```
	if err := http.ListenAndServe(":8080", nil);
```

8. `go run server.go` をします。
9. スマホでBotに話しかけてみましょう。

こんな感じで帰ってくれば成功です :thumbsup: 
![image1.PNG](https://qiita-image-store.s3.amazonaws.com/0/100546/b4e97b09-ac75-1f91-056e-3639ab3e0f0f.png)
Gradle と Gradle Plugin のバージョンについて


# はじめに

AndroidStudioを立ち上げるとGradleのバージョンアップ通知が届いていました。
AndroidStudioのバージョンアップは入れた結果エラーが頻発する場合もあるので正直怖いのですが、メジャーバージョンが上がっていたので試しに入れてみました。
導入後は問題も無くビルドが大幅に早くなり快適になりました。

で入れてみてふと思いました。
「Gradleのバージョンってどこで確認出来るの？」と。

なのでちょっとだけ知らべてみました。

# 確認場所

Gradle のバージョンはプロジェクトの`File -> Project Structure -> Project`を見ればわかります。

![ProjectStructure.png](https://qiita-image-store.s3.amazonaws.com/0/112253/bdfd909c-867c-a7e7-9002-f1925b9bf3d8.png)

# GradleとGradle Plugin

これで完結なのですが、何でこんな内容をわざわざエントリーしたのかと言うと top-level build.gradle にある一文が気になったからです。

```gradle
buildscript {
  ...
  dependencies {
    classpath 'com.android.tools.build:gradle:2.3.1'
  }
}
```
gradleのバージョンを3.3まで上げたのに2.3のままって何なんだよ！！？って思ったからなんですね。


調べた結果、これはgradleって書いていますがAndroid plugin for Gradle(人によっては Gradle Plugin)と呼ばれているものでGradleそのものではありません。
簡単に言えば_GraldeをAndroid Studioで使用するためのプラグイン_です。

これもPluginのバージョンに対して必須となるGradleが決まっています。
[公式からの引用(画像キャプ)です][1]が以下の様になっています。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112253/82374701-5543-ce15-dc45-cc43933a8a8d.png)



Gradle 3.3を使うためにはGradle Pluginは2.3を指定する必要があると言う事です。


# Update Gradle

最後にGradleのアップデートは以下の2通りで出来ます。

AndroidStudioのメニューから`Tool-> Android -> Sync Project with Gradle Files`を押す。

![update1.png](https://qiita-image-store.s3.amazonaws.com/0/112253/7c11cbd9-a810-5198-9b36-6a40e1376349.png)


あるいはGradleの`gradle/wrapper/gradle-wrapper.properties`を直接編集する。
![update2.png](https://qiita-image-store.s3.amazonaws.com/0/112253/440a6bda-1039-6a75-f1d8-45f865fe4b9d.png)







`https://services.gradle.org/distributions/`を見たら一覧が見れるはずです。
現時点(2017-04-05)では`gradle-3.5-rc-1all.zip`まではバージョンが上げられそうです(3.5はRC1なんでおすすめはしませんが)



新しくプロジェクト立ち上げたりすればAndroid StudioがしつこくGradleのアップデートを聞いてきますが、万が一ダイアログを閉じて出てこなくなった場合は上記の対応でアップデートしてください。


参考：[Android Plugin for Gradle Release Notes][1]


[1]: https://developer.android.com/studio/releases/gradle-plugin.html
BINDからRoute53に乗換えた後の運用費用を見積もってみた


- BIND使ってるけどRoute53安いらしいし使いやすそう、なによりbind脆弱性対応から開放されたい、、、
- ただ従量課金て聞くし実際いくらかかるのか怖い、、、
- という事で費用見積の仕方をまとめてみた。

## Route53とは
- Amazonが提供するDNSサービス(ドメインとIPアドレスの対応表)
- Port53を使用する事が由来。国道53号線は無関係

## Route53の特徴
- 高可用性
    - 高い。全世界に分散配置されたネームサーバ4台に登録。
    - SLA100%(停止した場合に使用量を払い戻し。違約金等は無し？)
        - https://goo.gl/qcRzMV
- 高速
    - 分散配置されたDNSサーバの内、ユーザーから最も論理的に近いサーバを自動選択
- コスト
    - 従量課金
- 操作性
    - GUIコンソール提供
    - API提供有り
- 保守運用
    - bind脆弱性対応に関してはAmazonにおまかせ

## 課金体系
- ホストゾーン数課金＋クエリ数課金で計算。クエリ数が金額の大部分を占める。
    - ホストゾーン課金
        - 0.50 USD/月,1ホストゾーン (ホストゾーン数<=25の場合)
        - 0.10 USD/月,1ホストゾーン (25<ホストゾーン数の場合)
    - クエリ数課金
        - 0.40 USD/100万クエリ (月の総クエリ数<=10億クエリの場合)
        - 0.20 USD/100万クエリ (10億クエリ<月の総クエリ数の場合)

## 費用の求め方
### ホストゾーン数の求め方
- bindのzoneファイル数をカウント

### クエリ数の求め方
- named.confのloggingタグに以下を追記(以下設定だと10Mずつ30世代保管)
    ```
    logging{
    ・・・
      channel query_log {
        file "/var/log/named/nsquery.log" versions 30 size 10m;
        severity info;
        print-category yes;
        print-severity yes;
        print-time yes;
    };
    category queries { query_log; };
    ・・・
    }
    ```
- BIND再起動
- /var/log/named/nsquery.log.xxxという形でクエリログファイルが作成される。
- 指定したログディレクトリの開始、終了時間、リクエストログの行数を元に単位時間あたりのクエリ数を求める。
    - 収集時間
        - nsquery.logの最も新しいもの、古いもののクエリログの時間を確認
    - 収集時間帯のクエリ数
        - cat /var/log/named/nsquery.log* | wc -l

## 参考
- 5分でわかる　Route53
    - https://recipe.kc-cloud.jp/archives/7581
- Amazon Route53 使ってみた
    - https://www.slideshare.net/mikiT1/2011127-amazon-route53-m1
PythonでPlink

PythonでPLINKのデータファイル(.bed, .fam, .map)などを利用したい。pyplinkというモジュールがある。

####インストール

pipでインストールできる

```:shell
pip install pyplink
```

###使い方
カレントディレクトリに foo.bed foo.fam foo.bim などの一連のファイルが存在するとすると

```py3:python3
from pyplink import PyPlink
pyp = PyPlink("foo")
```

これでpypというオブジェクトができる。これは.bed, .fam, .bimファイルを統合したオブジェクトである。各種メンバ関数でそれぞれの情報にアクセスできる。

```py3:python3
pyp.get_fam()
pyp.get_nb_samples()
pyp.get_bim()
pyp.get_nb_markers()
```

```py3:python3
markerNames = pyp.get_bim().iloc[:,5]
```

マーカー名を指定してジェノタイプを得る。acgtにすると塩基情報を得ることができる。

```py3:python3
pyp.get_geno_marker(markerNames[0])
pyp.get_acgt_geno_marker(markerNames[0])
```

イテレータとしてマーカーID, ジェノタイプを得ることもできる。

```py3:python3
markers = ["rs7092431", "rs9943770", "rs1578483"]
for marker_id, genoypes in pyp.iter_geno_marker(markers):
  print(marker_id)
  print(genotypes, end="\n\n")
```

##サンプルスクリプト
23染色体上のマーカーについて男性サンプルのジェノタイプをすべて得る

```py3:python3
for marker_ID, genotypes in pyp.iter_geno_marker(y_markers):
    male_genotypes = genotypes[males]
    print("{:d} total genotypes".format(len(genotypes)))
    print("{:d} genotypes for {:,d} males ({} on chr{} and position {:,d})".format(
        len(male_genotypes),
        males.sum(),
        marker_ID,
        all_markers.loc[marker_ID, "chrom"],
        all_markers.loc[marker_ID, "pos"],
    ))
    break
```

指定したマーカーのMinor allele frequencyとジェノタイプを得る

```py3:python3
founders = (all_samples.father == "0") & (all_samples.mother == "0")
markers = ["rs7092431", "rs9943770", "rs1587483"]

for marker_ID, genotypes in pyp.iter_geno_marker(markers):
    valid_genotypes = genotypes[founders.values & (genotypes != -1)]
    maf = valid_genotypes.sum()/(len(valid_genotypes)*2)
    print(marker_ID, round(maf, 6), sep="\t")
    print(genotypes)
```
Python3のcgiスクリプトで、２バイト文字が使えなくてハマった話 on RaspberryPi3

#事の始まり

[この本](https://www.amazon.co.jp/Python%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0-%E9%96%8B%E7%99%BA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-BeautifulSoup-scikit-learn-TensorFlow%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/dp/4802610793)のある章で、Python3を使ったcgiスクリプトを扱います。
せっかくなので研究室のラズパイ３上にWebサーバを建てて、本の通りPython3で書いたcgiスクリプトを動かすことにしてみました。
書籍の中ではPythonコードでhttpサーバを建てていたのですが、あえてApacheを使いたかったので、ちょっと違う方法で挑戦してみることに。
しかし、スクリプトを実行しても画面が真っ白のまま何も映らない。。。５００エラーも返って来ませんでした。**(ちなみにPyhon2で書いたコードは動く。。。)**

#エラーログを見てみる
```/var/log/apache2/error.log
......
[WWW MMM DD HH:MM:SS.SSSSSS YYYY] [cgi:error] [pid ****] [client 10.26.200.***:57137] AH01215: UnicodeEncodeError: 'ascii' codec can't encode characters in position 369-381: ordinal not in range(128)
```
どうやら文字エンコーディングの部分で怒られてるっぽい。
デフォルトでutf-8使うんじゃないのか？と思いつつ、とりあえずshebang行にutf-8宣言を追加しました。

```test.py
# !/usr/bin/python3
# -*- coding: utf-8 -*-
.......

```
が、現状は変わらず。

#解決法
Apache2のコンフィグに、以下の一行を追加すると動きました。
どうやらPython2系と3系で、エンコードする文字コードの設定を読む場所が違うらしいです。

```/etc/apache2/apache2.conf
......
<Directory /var/www/>
        ......
        SetEnv PYTHONIOENCODING utf-8
        ......
</Directory>
......
```

#参考
[[Python] Python3.0 で マルチバイト文字を print したらエラーになった](http://d.hatena.ne.jp/heavenshell/20090219/1235057228)

[私がPython3でUnicodeEncodeErrorなのはどう考えてもデフォルト文字コードが悪い！](http://lab.knightstyle.info/%E7%A7%81%E3%81%8Cpython3%E3%81%A7unicodeencodeerror%E3%81%AA%E3%81%AE%E3%81%AF%E3%81%A9%E3%81%86%E8%80%83%E3%81%88%E3%81%A6%E3%82%82%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E6%96%87%E5%AD%97/)
【Tips】MTAppJSONTableでテーブルを初期状態で表作る方法（改良版）


以前[【Tips】MTAppJSONTableのテーブルを初期状態で表作る方法](http://qiita.com/redamoon/items/2fa3845a773d5248c315)という方法を教えてもらい書いたのですが、必須の時にエラーなどを出すとカスタムフィールドに設定したJSONがいるテーブルが消えてしまうことに気づき、別の方法を教えてもらったのでメモとしてのこしておきます。

結論としては、JSの中にオブジェクトを変数にセットしておきそれをテーブル予定のカスタムフィールドのtextareaに渡すという方法になります。

## パターン1：文字列として定義し置換してvalで代入

* textareaが空のときにだけ実行するように分岐させておく
* MTAppJSONTableで使用するJSONを文字列として変数にセットしておく
* `"` を `\"` を置換する
* textareaに置換した変数を代入
* 代入後、MTAppJSONTableを初期化

``` javascript
// MTAppJSONTableを実行する前に入れる
// textareaが空のときだけにする（ID名はカスタムフィールド名）
if(!$('#customfield_jsontable').val()){
  // 初期値用の値をセットする
  var json_table = '{"items":[{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""}]}';
  var str_table = json_table.replace(/"/g,'\"');  // var json_tableの 
  // textareaに変換した値を代入する
  $('#customfield_jsontable').val(str_table);
}
// MTAppJSONTable を初期化
$('#customfield_jsontable').MTAppJSONTable({
  // 処理
});
```

## パターン2：JSON.stringifyを使ってvalで代入

* textareaが空のときにだけ実行するように分岐させておく
* オブジェクトとして変数にセットしておく
* JSON.stringifyでオブジェクトをJSONに変換させる
* `\"` を `"`、`\[` を `[`、`]"` を `]` に置換する
* textareaに置換した変数を代入
* 代入後、MTAppJSONTableを初期化

``` javascript
// MTAppJSONTableを実行する前に入れる
// textareaが空のときだけにする（ID名はカスタムフィールド名）
if(!$('#customfield_jsontable').val()){
  // 初期値用の値をセットする
  // 通常のオブジェクトとして変数に定義
  var json_table = {"items":[{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""},{"table_item":""}]};
  // stringifyでオブジェクトをJSONに変換する
  var str_table = JSON.stringify(json_table);
  str_table = str_table.replace(/\\"/g,'"').replace(/"\[/g,'[').replace(/\]"/g,']');
  // textareaに変換した値を代入する
  $('#customfield_jsontable').val(str_table);
}
// MTAppJSONTable を初期化
$('#customfield_jsontable').MTAppJSONTable({
  // 処理
});
```

やり方を教えてくれた[@tinybeans](https://twitter.com/tinybeans)さん、[@bun](https://twitter.com/bun)さん ありがとうございました。m(_ _)m
Amazon Linux上にインストールしたGitLab CEにLet's Encryptを適用する方法

# 対象環境
GitLab Community Edition 9.0.4
certbot 0.13.0（Let's EncryptのCLIクライアント）

# 原理
Let's Encryptの「webroot」モードを利用する。
webrootモードはサーバに ```.well-known``` ディレクトリが置かれていることを認証基準としてSSL証明書を発行する。
GitLabのログインを回避して ```.well-known``` をLet's Encryptに発見させ、SSL証明書を発行するのが本記事の目的である。

# 手順
**※ GitLabはインストールが完了しており、既に稼働しているものとする。**

## 1. GitLabが利用しているNginxの設定を変更する
GitLabのログインを回避して ```.well-known``` の存在を確認させるためにNginxのリダイレクト設定を変更する。
まずは設定ファイルを新規作成。

```
$ sudo vim /etc/gitlab/custom_gitlab_server_config.conf
```

```bash:/etc/gitlab/custom_gitlab_server_config.conf
location ^~ /.well-known {
    alias /var/letsencrypt/.well-known;
}
```

その後、設定ファイルを適用。

```
$ sudo vim /etc/gitlab/gitlab.rb
```

```rb:/etc/gitlab/gitlab.rb
nginx['custom_gitlab_server_config'] = "include /etc/gitlab/custom_gitlab_server_config.conf;"
```

最後に、Let's Encryptに発見させる用のディレクトリを作成しておく。
```.well-known``` は作成しなくてよい。

```
$ sudo mkdir /var/letsencrypt
```

## 2. GitLabに設定を適用して再起動
```
$ sudo mkdir /var/letsencrypt
```

## 3. Let's Encryptをインストール
絶対に最後の ```--debug``` を忘れないように。
Amazon Linux限定の手法なので他のOSの場合は不要。

```
$ sudo mkdir /usr/local/letsencrypt
$ sudo chown `whoami` /usr/local/letsencrypt
$ cd /usr/local/letsencrypt
$ git clone https://github.com/letsencrypt/letsencrypt .
$ sudo ./letsencrypt-auto --debug
```

## 4. SSL証明書を取得
```[gitlab.example.com]``` の部分はGitLabに適用しているドメインを指定する。

```
$ sudo ./letsencrypt-auto certonly --webroot --webroot-path /var/letsencrypt -d [gitlab.example.com]
```

### エラーが出た場合
エラーの場合はこんな表示が出る。

```
IMPORTANT NOTES:
 - The following errors were reported by the server:

   Domain: gitlab.example.com
   Type:   unauthorized
   Detail: Invalid response from
```

Typeが __unauthorized__ の場合

* ログインが回避できていないので、1の手順が正しく完了しているか確認する

Typeが __unconnected__ の場合

* AWSのセキュリティグループを確認し、80番と443番のポートを開ける
* 勢い余って ```/etc/gitlab/gitlab.rb``` の ```external_url ``` をhttpsにしていないか確認する（証明書取得まで禁止！）

## 5. SSL証明書が自動更新されるよう設定
```
$ sudo crontab -u root -e
```

```
00 05 01 * * /path/to/letsencrypt/letsencrypt-auto renew --force-renew && gitlab-ctl restart
```

## 5. SSL証明書をGitLabに適用
```external_url``` をHTTPSに変更する。
```[gitlab.example.com]``` の部分はGitLabに適用しているドメインを指定する。

```redirect_http_to_https``` をtrueにしておくと、HTTPでアクセスされてもHTTPSにリダイレクトされる。
証明書の再発行の際はHTTPによる ```.well-known``` の確認が走らないので、HTTP接続を潰してしまってよい。
同じくAWSのセキュリティグループレベルでも80番ポートを潰してしまってよい。

```
$ sudo vim /etc/gitlab/gitlab.rb
```

```rb:/etc/gitlab/gitlab.rb
nginx['external_url']                = "https://[gitlab.example.com]"
nginx['redirect_http_to_https']      = true
nginx['ssl_certificate']             = "/etc/letsencrypt/live/[gitlab.example.com]/fullchain.pem"
nginx['ssl_certificate_key']         = "/etc/letsencrypt/live/[gitlab.example.com]/privkey.pem"
```

## 6. GitLabを再起動
```
$ sudo gitlab-ctl reconfigure
```

# 参考文献
GitLab Omnibus package の SSL 証明書を Let's Encrypt で取得する
http://qiita.com/yuuAn/items/09a434d3f6cffa31101e

アクセス制限のかかったGitLabをLet's Encryptをつかってhttps化する
https://gist.github.com/mamemomonga/a36a194f8a80ce5fa49bf950e092c604
CSS Grid Layoutについて調べてみた〜Part 4: 実際にGrid Layoutを使ってみる

何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

Part 1: [Grid Layoutの概要](http://qiita.com/k_tada/items/bfd6dfa64e0d0b683834)
Part 2: [使い方（Grid Layoutの用語と基本）](http://qiita.com/k_tada/items/e53de899235a9c3e7642)
Part 3: [使い方（グリッドコンテナ、アイテムの作り方）](http://qiita.com/k_tada/items/5203c9582cca3cff6639)
Part 4: **実際にGrid Layoutを使ってみる**（イマココ）
Part 5: [レスポンシブデザイン対応してみる](http://qiita.com/k_tada/items/8759ba93dfcd1fd9c76a)

# 実際に使ってみる
試しにこういう画面を作ってみる。聖杯レイアウトっていうんだっけ？

<img width="619" alt="スクリーンショット 2017-04-05 21.40.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/5af59975-8c80-d41f-aeec-dbefd16a9b09.png">

DOM構成はこんな感じ

```html
<div id="main">
  <div id="header">Header</div>
  <div id="menu">Menu</div>
  <div id="right-menu">Right Menu</div>
  <div id="contents">Contents</div>
  <div id="footer">Footer</div>
</div>
```

## 分割方法を決める
<img width="605" alt="スクリーンショット 2017-04-05 22.25.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/c6e8ffa1-620f-9bd0-26b0-af9c36ce9094.png">
こんな感じで分割する。

## ラインを指定して作ってみる
### コンテナを定義する
```css
/* Gridコンテナ */
#main {
  display: grid;
  grid-template-rows: 80px 1fr 80px;
  grid-template-columns: 120px 3fr 1fr;
}
```

### 各アイテムを定義する
```css
#header {
  /* grid-area: 1 / 1 / 2 / 4; でもOK */
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}
#menu {
  /* grid-area: 2 / 1 / 3 / 2; でもOK */
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
#contents {
  /* grid-area: 2 / 2 / 3 / 3; でもOK */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#right-menu {
  /* grid-area: 2 / 3 / 3 / 4; でもOK */
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}
#footer {
  /* grid-area: 3 / 1 / 4 / 4; でもOK */
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}
```
デモ：https://jsfiddle.net/6Leuh2a6/

## エリアを指定して作ってみる
### コンテナを定義する
```css
/* Gridコンテナ */
#main {
  display: grid;
  grid-template-rows: 80px 1fr 80px;
  grid-template-columns: 120px 3fr 1fr;
  grid-template-areas:
    "header header   header"
    "menu   contents right-menu"
    "footer footer   footer";
}
```

### 各アイテムを定義する
```css
#header {
  grid-area: header;
}
#menu {
  grid-area: menu;
}
#contents {
  grid-area: contents;
}
#right-menu {
  grid-area: right-menu;
}
#footer {
  grid-area: footer;
}
```
デモ：https://jsfiddle.net/dbhs7usb/1/

次回：[レスポンシブデザイン対応してみる](http://qiita.com/k_tada/items/8759ba93dfcd1fd9c76a)
CSS Grid Layoutについて調べてみた〜Part 3: 使い方（グリッドコンテナ、アイテムの作り方）

何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

Part 1: [Grid Layoutの概要](http://qiita.com/k_tada/items/bfd6dfa64e0d0b683834)
Part 2: [使い方（Grid Layoutの用語と基本）](http://qiita.com/k_tada/items/e53de899235a9c3e7642)
Part 3: **使い方（グリッドコンテナ、アイテムの作り方）**（イマココ）
Part 4: [実際にGrid Layoutを使ってみる](http://qiita.com/k_tada/items/973b348ba640c3cee73c)
Part 5: [レスポンシブデザイン対応してみる](http://qiita.com/k_tada/items/8759ba93dfcd1fd9c76a)

# グリッドコンテナの定義

CSSで任意の要素に`display: grid;`を指定すると、その要素がグリッドコンテナとなる。

グリッドコンテナでは、以下の項目を定義する。

- グリッド分割（分割数、それぞれのサイズ）
- エリアの設定（エリアの配置内容、名前）
- グリッドの各種設定（グリッドの間隔、自動配置の順序（縦or横）、etc...）

## グリッド分割の定義
### grid-template-columns
縦方向の分割方法の設定

```css
grid-template-columns: 100px 1fr 2fr;
```
上記例では、それぞれ`100px`, `1fr`, `2fr`のサイズで縦方向に3分割する。
`fr`については後述。

### grid-template-rows
横方向の分割方法の設定

```css
grid-template-rows: 100px 1fr;
```
上記例では、それぞれ`100px`, `1fr`のサイズで横方向に2分割する。

## エリア設定の定義
### grid-template-areas
エリアの設定

```css
grid-template-areas:
  "header header   header"
  "menu   contents ads"
  "footer footer   footer";
```
上記例では、縦横3つずつ分割されたグリッドに対して、

* 1行目の1〜3列が**header**
* ２行目が左から**menu**, **contents**, **ads**
* ３行目の1〜3列が**footer**

という名前でエリアを定義している。

#### ※ `fr`について
Flexboxの `flex-grow`と同様に、**配置可能なスペースを割り当てる比率**で指定出来る。
例として `grid-template-columns: 100px 1fr 2fr 1fr;`と指定された場合、

* 一番左の列は100px固定で配置
* 残りのスペースを、1:2:1の割合で配置
といったルールでグリッドが定義される。

## グリッドの各種設定
### grid-gap-row、grid-gap-column、grid-gap
グリッド間隔の設定

```css
/*　行間5px, 列間10px */
grid-gap-row: 5px;
grid-gap-column: 10px;
/* 上と同じ */
grid-gap: 5px 10px;
```

### grid-auto-flow
空きセルに自動で配置する際の方向の設定
`row`で横方向に、`column`で縦方向に順次配置される。デフォルトは`row`。

### justify-content、align-items
Flexboxの同名プロパティと同様。`justify-*`が横方向、`align-*`が縦方向。



# グリッドアイテムの定義
グリッドコンテナの直下にある要素に対して、自身の要素をグリッドコンテナで定義されたグリッドにどのように配置するかを定義する。  

## グリッドアイテムの配置の定義
前回説明したとおり、グリッドアイテムの配置には以下の定義方法がある。  

* 空いているセルに自動で配置
* `grid-template-areas`で定義したエリア名を指定して配置
* 行、列のラインを指定して配置

### 空いているセルに自動で配置
グリッドアイテムに後述のいずれかの配置指定が無い場合、空きセルに自動的に配置される。
もしくは、明示的に`grid-area: auto;`を指定しても自動的に配置される。

### エリア名を指定して配置
`grid-area: <エリア名>;`を指定することで、`grid-template-areas`で定義した同名のエリアに配置される。

### 行、列のラインを指定して配置
前回説明したとおり、行、列のラインの`start`、`end or span`を指定して配置する。

#### grid-row-start、grid-row-end、grid-column-start、grid-column-end
それぞれ、行、列の開始、終了ライン番号を指定する。

```css
grid-row-start: <行の開始ライン>;
grid-row-end: <行の終了ライン> もしくは span <行のセル幅>;
grid-column-start: <列の開始ライン>;
grid-column-end: <列の終了ライン> もしくは span <列のセル幅>;
```

#### grid-row、grid-column
`start`と`end`を合わせて指定するショートハンド。

```css
grid-row: <行の開始ライン> / <行の終了ライン> もしくは span <行のセル幅>;
grid-column: <列の開始ライン> / <列の終了ライン> もしくは span <列のセル幅>;
```

#### grid-area
`grid-row-*`、`grid-column-*`をまとめて指定するショートハンド。
順番は`grid-row-start / grid-column-start / grid-row-end / grid-column-end`。

```css
grid-area: <行の開始ライン> / <列の開始ライン> / <行の終了ライン> もしくは span <行のセル幅> / <列の終了ライン> もしくは span <列のセル幅>;
```

## グリッドアイテムのその他プロパティ
### justify-self、align-self
Flexboxの同名プロパティと同様。`justify-*`が横方向、`align-*`が縦方向。

次回：[実際にGrid Layoutを使ってみる](http://qiita.com/k_tada/items/973b348ba640c3cee73c)
【連載】Amazon CloudSearchのCLI入門編 ＃2 （ドキュメントの登録）

# １．概要
担当システムのAWS化に合わせて、提供している検索エンジンをCloudSearchに置き換える事になりました。
検証するために、CLI（コマンドラインインターフェイス）経由でCloudSearchを操作したので、
その手順をまとめて残したいと思います。
※ほぼ、既知の内容と思いますが、ご了承下さい。

# ２．前回の記事
　[【連載】Amazon CloudSearchのCLI入門編 ＃1 （検索ドメインの作成）](http://qiita.com/koutaku921/items/ee2e2af1fe05ab5ca6c4)

# ３．前提条件（再掲）

クライアントは、Windows環境です。CLIのコマンドは同じなので、他のコマンドは、環境に合わせて、
適宜読みかえて下さい。あと、アクセスキーとシークレットキーを発行してCloudSearchへ接続します。
今回、準備する検索ドメインは、以下の通りとなります。

|フィールド名|型|
|:--:|:--:|
|id|literal|
|artist_name_li|literal|
|album_title_li|literal|
|artist_name_te|text|
|album_title_te|text|
※ 検証内容がliteral型とtext型のscore値の確認だったため、それぞれの検索フィードを定義しました。
※ その他、使える型は、以下のURLを参考にして下さい。
　 参考URL：[公式：Amazon CloudSearch ドメインのインデックスフィールドの設定](https://docs.aws.amazon.com/ja_jp/cloudsearch/latest/developerguide/configuring-index-fields.html)

# ４．ドキュメントの準備
検索ドメインの型定義に合わせて、inputとなるファイルを作成します。
フォーマットは、json形式かxml形式となります。今回はjson形式のフォーマットで準備しました。

```
[
 {"type": "add",
  "id":   "6",
  "fields": {
    "artist_name_li": "アーティスト001",
    "artist_name_te": "アーティスト001",
    "album_title_li":"君繋ぎファイブM",
    "album_title_te":"君繋ぎファイブM"
  }
 },
  {"type": "add",
  "id":   "7",
  "fields": {
    "artist_name_li": "アーティスト001",
    "artist_name_te": "アーティスト001",
    "album_title_li":"ソルファ",
    "album_title_te":"ソルファ"
  }
 }
]
```

　参考URL：[公式：Amazon CloudSearch 用にデータを準備](http://docs.aws.amazon.com/ja_jp/cloudsearch/latest/developerguide/uploading-data.html)

# ５．ドキュメントの登録

以下のコマンドを実行して、ドキュメントを登録します。

```
aws cloudsearchdomain upload-documents^
 --endpoint-url https://search-search-score-test-yamamoto-aaaaaaaaaaaaaaaaaaaaaaaaaa.ap-northeast-1.cloudsearch.amazonaws.com^
 --content-type application/json^
 --documents input.json

{
    "status": "success",
    "adds": 2,
    "deletes": 0
}

```

|オプション|説明|
|:--:|:--:|
|upload-documents|ドキュメント登録用のコマンドとなります。|
|--endpoint-url|検索ドメインの接続先を指定します。|
|--content-type |ファイルのフォーマットを指定します。|
|--documents|作成したファイル名を指定します。|

　参考URL：[公式：Amazon CloudSearch ドメインにデータをアップロード](http://docs.aws.amazon.com/ja_jp/cloudsearch/latest/developerguide/uploading-data.html)

# ６．最後に
次は、ドキュメントの検索を実施します。
CSS Grid Layoutについて調べてみた〜Part 2: 使い方（Grid Layoutの用語と基本）

何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

Part 1: [Grid Layoutの概要](http://qiita.com/k_tada/items/bfd6dfa64e0d0b683834)
Part 2: **使い方（Grid Layoutの用語と基本）**（イマココ）
Part 3: [使い方（グリッドコンテナ、アイテムの作り方）](http://qiita.com/k_tada/items/5203c9582cca3cff6639)
Part 4: [実際にGrid Layoutを使ってみる](http://qiita.com/k_tada/items/973b348ba640c3cee73c)
Part 5: [レスポンシブデザイン対応してみる](http://qiita.com/k_tada/items/8759ba93dfcd1fd9c76a)

# 用語
Grid Layoutでよく出てくる用語をまとめる。

## グリッドコンテナ
分割の対象となる要素。FlexboxのFlexコンテナと同様。  
CSSで`display: grid;`を指定した要素がグリッドコンテナとなる。

## グリッドアイテム
グリッドコンテナに配置される各要素。FlexboxのFlexアイテムと同様。  
グリッドコンテナ直下の要素は基本的に全てグリッドアイテム（レイアウト対象）となる。

## グリッドの構成要素
### ライン
グリッドを構成する縦横の線（下図参照）  
最外にも存在し、上→下、左→右の順に、1〜nまで番号が振られる。

### セル
ラインによって分割された各ブロック（下図参照）

### エリア
複数のセルによって構成される長方形（下図参照）

<img width="459" alt="スクリーンショット 2017-04-06 16.30.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/66b3536d-b064-bf39-870a-baf5ad17c356.png">

# Grid Layoutの作り方の基本

## 構成
Grid Layoutは基本的に1つのグリッドコンテナと複数のグリッドアイテムによって構成される。

グリッドコンテナで分割方法とエリアを設定し、各グリッドアイテムでどのエリアに配置されるかを指定することで全体のレイアウトを構築する。  
グリッドコンテナで定義したグリッドの各ライン、及びエリアには任意に名前を割り当てることが出来る。
※ 具体的な定義方法は次回に詳しく説明する。

## 配置方法
グリッドアイテムを配置する方法は以下の3つ。

1. 空きセルに自動的に配置
2. エリア名を指定して配置
3. 行、列のラインの`start`,`end or span`を指定して配置

例として、グリッドコンテナで以下のようなグリッドを定義したとする（行：ライン1〜5、列：ライン1〜4、エリア：a, b）

<img width="370" alt="スクリーンショット 2017-04-06 20.34.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/595b7b67-55bf-aeea-3caf-246fb4dc340e.png">

ここで任意のグリッドアイテムをエリアa, bに配置する場合、エリア名a, bを直接指定して配置するか、  

- エリアa：`行：2〜3、列：1〜2`
- エリアb：`行：3〜5、列：2〜4` or `行：3から2つ分、列：2から2つ分`

のように、行、列のラインのstart, endを指定して配置することが出来る。

この際、配置方法を指定されない（もしくは明示的に`自動配置`を指定された）グリッドアイテムは自動的に左上→右下に向かって空きセルに配置される。自動配置の方法（行→列 or 列→行）はグリッドコンテナにて指定することが出来る。

次回：[使い方（グリッドコンテナ、アイテムの作り方）](http://qiita.com/k_tada/items/5203c9582cca3cff6639)