OmniAICreator/Qiita-1.07M huggingface dataset:
Windows 10 64-bit で Sublime Text 3 を使うためのTips

Windows 10 で Sublime Text 3 を使った際にはまった点をメモします。

*  Windows 10 64-bit
*  Sublime Text 3 Build 3126

パッケージは導入済みとします。

## IMEがずれる問題（未解決）
デフォルトだとIMEがずれて表示されるので、IMESupport を導入します。
しかしどうもうまくいかないようです。
Windows 8では問題なかったのですが、Windows 10では、ずれます。

MS-IMEと、Google 日本語入力で試しましたが、特にSideBarを表示したり、Menubarを非表示だとずれが大きくなります。
https://nj-clucker.com/adjast-ime-position-on-sublime-text/
https://github.com/chikatoike/IMESupport/issues/19
もう少し調べてみたいと思います。

## Markdownのプレビュー（解決）
OmnimarkupPreviewer のパッケージを導入しています。
markdown を Ctrl + Alt +O でレンダリングしたHTMLが表示されリアルタイムで追従するのでとても便利です。
しかし、下記のようなエラーが出ました。
<img width="432" alt="sublime-text-3-markdown-error.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/1982/5f3415d3-5386-fa10-4a2a-134a23d15e5b.png">

https://github.com/timonwong/OmniMarkupPreviewer/issues/85
http://qiita.com/tanaike/items/816d3096cb7978e3452d

```python
def makeExtension(*args, **kwargs):
    return StrikeoutExtension(*args, **kwargs)
```
参考にmakeExtensionをFixすることで解決しました。
機械エンジニアが、素人VBAでWordとパワポとAccessとOutlookとAutoCADの生産性を上げたい日々

#まずはVBA比較
##その１「拡張子」
No.|項目|Excel|Word|PowerPoint|Access|Outlook|AutoCAD
:-:|---|:-:|:-:|:-:|:-:|:-:|:-:|:-:
1|Image<br>Color|緑🟩|青🟦|橙🟧|赤🟥|水色|赤黒？
2|通常|.xlsx|.docx|.pptx|.accdb|.OTM|？
3|マクロ|.xlsm|.docm|.pptm|同上|.OTM|.dvb
4|アドイン|.xlam|無|.ppam|.accda|.OTM|？
5|ﾏｸﾛ有効<br>ﾃﾝﾌﾟﾚｰﾄ|.xltm|.dotm|.potm|.accdt|？|？
※Office2010時点
※Wordのアドイン(?)方法はNo.5のテンプレートを使用。
※Accessの「実行のみ」の拡張子は「.accde」
※Outlookは、「VbaProject.OTM」のファイルデータで統一している。VbaProjectは変更可能。

##その２「This系とActive系の比較」
No.|項目|Excel|Word|PowerPoint|Access|Outlook|AutoCAD
:-:|---|:-:|:-:|:-:|:-:|:-:|:-:|:-:
1|This系|ThisWorkbook|ThisDocument|ThisPresentation|?|?|Thisdrawing
2|Active系|ActiveWorkbook<br>ActiveSheet|Activedocument|ActiveWindow<br>ActivePresentation|Screen.ActiveControl|ActiveInspector<br>ActiveExplorer<br>ActiveInlineResponse<br>ActiveInlineResponseWordEditor|


##その３「選択文章をメッセージボックスで表示」の例文
###Excel
```vb:test01.xlsm
    Sub selectionTest()
    	MsgBox Selection
    End Sub
```
###word
```vb:test01.docm
    Sub selectionTest()
    	MsgBox Selection
    End Sub
```
###PowerPint
```vb:test01.pptm
    Sub selectionTest()
         MsgBox ActiveWindow.Selection.TextRange
    End Sub
```
###Access
```vb:test01.access
    Sub selectionTest()
        MsgBox Screen.ActiveControl
    End Sub
```

###Outlook その1

メールエディタを起動してない場合（編集中ではない）

```vb
    Sub selectionTest()
        MsgBox ActiveExplorer.Selection(1).GetInspector.WordEditor.Application.Selection
    End Sub
```

###Outlook その2

メールエディタを起動中の場合（編集中）

```vb
    Sub selectionTest()
        MsgBox ActiveInspector.WordEditor.Application.Selection
    End Sub
```

###AutoCAD
```vb
Sub selectionset()
  Dim sset As Acadselectionset
  Dim objEntity As AcadObject

  Set sset = Thisdrawing.SelectionSets.Add("NewSS")
  
  Call sset.SelectOnScreen
  
  For Each objEntity In sset
    MsgBox objEntity.textString    
  Next
  
sset.Delete
End Sub
```
注）AutoCADのVBAには`Selection`が無いです。`SelectionSetS`と`SelectOnScreen`を合わせて同様な機能が可能なようです。


# 参考にしているVBA書籍（2017年4月時点）
+ Word向け  
　→★最速攻略 Word マクロ / VBA徹底入門 土屋 和  
　→★作って簡単・超便利! Wordのマクロ実践サンプル集 西上原 裕明  
　→★Wordによる編集レイアウトの基本とDTP実践テクニック 西上原 裕明  
+ AutoCAD向け  
　→★AutoCAD 2000 VBA入門 (CAD press)　大浦誠著：図書館で借りました。  
　→★「AutoCAD Platform Customization: VBA」：Amazonで買った洋書です。約3000円  
　→★「AutoCAD VBA二次开发教程」：ネット検索で引っかかる中国語の本です。結構役立ちます。

# マイナー向けVBAの情報収集方法
+ PowerPointとOutLookとAutoCADのVBA書籍が日本に皆無。時間のある時に本から情報を得たい性格なので辛い。
+ Access向けVBA書籍はありますが、現状は仕事で使わないので興味なし。
+ ネット検索すれば、ちらほら情報がありますが、特に「AutoCAD VBA」はやや難解で、勉強に一苦労。痒いところに手が届かず、かつ最終更新が１０～２０年前で絶滅危惧種。明日には無くなるのでは！？と要らぬ心配をして、心穏やかに安心して見ていられない。一方で、AutoCADは、AutoLISP関連の解説本が、根強く発売している。謎だ。他のAutoCADのプログラム本といえば、VB.NET（最速攻略AutoCAD VB.NETマクロサンプル大全集、落合重紀）があります。時代はやっぱり.NETみたい。
+ Amazon.co.jpや、Amazon.comで中華書籍や洋書が存在します。また、内容は中国語や英語ですが、ネット上で中を読むことが出来ます。2016年にも最新図書が発売されている様子
+ 和書のAutoCAD・VBA本は「AutoCAD 2000 VBA入門 (CAD press)　大浦誠著」が唯一ですが、発売日が西暦2000年です。古すぎます。東京、千葉、兵庫の大店舗の古本屋も数店行きましたが見つかりませんでした。Amazonで中古本もありますが20000円と高すぎ。
Amazon Dash Button から低遅延で鍵を開ける

#はじめに
[プロミスキャスモードを用いたESP8266でのAmazon Dash Buttonのイベント取得](http://qiita.com/kat-kai/items/3b1d5c74138d77a27c4d) を拝見したことから始まった応用記事です。


「プロミスキャスモード」とは、ざっくりいうと拾えるものは全部拾うモードです。他機器宛のパケットも拾いますし、WPAで認証されてなくても、SSIDが異なっていても受信します。当然、暗号化された中身は解読できませんが、誰が送ったか（送信元MACアドレスがなんなのか）は分かります。

Amazon Dash Button は AmazonのサーバとHTTPSでしゃべるので、それに先立ち以下のような通信をしていると思われます。

①無線ネゴ→②WPA認証→③DHCP(ARP含む)→④DNS→⑤HTTPS

よくある Amazon Dash Button の検出にはARPを使うものが多いです。これは③番目なので数秒の遅延があります。

一方、プロミスキャスモードを使うと、①の段階で検出できます。感覚としては3倍速い感じです。

**この速さは注目に値します！**
ぜひ、[プロミスキャスモードを用いたESP8266でのAmazon Dash Buttonのイベント取得](http://qiita.com/kat-kai/items/3b1d5c74138d77a27c4d) にいいね！をたくさんして、もっと注目されてほしいと思っています。

#応用例

応用例として、自作電気錠に組み込んで開けてみました。

![MOV_0804.gif](https://qiita-image-store.s3.amazonaws.com/0/104360/9a1704d4-de46-1b14-fae0-e0be9b2a43c7.gif)

この自作電気錠は[第1回みんなのラズパイコンテスト](http://coin.nikkeibp.co.jp/coin/itpro-s/seminar/LIN/rpic15/)で[技術賞をいただいた](http://itpro.nikkeibp.co.jp/atcl/column/15/030400035/030400003/)もの（の後継品）です。


Akerunの中の人(CTO)が作ったモノ http://akerun.hateblo.jp/entry/2016/12/10/094549 と比べると低遅延なことが分かると思います。


尚、このボタンを選んだのは、**ローリングストック法**、あるいは**日常備蓄**をちゃんとやるため、正しくAmazon Dash Button を使っていくためにフルグラを選んでいます。


#セキュリティ

**低遅延な分、セキュリティがガバガバ**です。コード上にSSIDやWAPキーがないのです。第三者にMACアドレスを知られると鍵を開けられてしまいます！

日常的にコレを使っていたらMACアドレスを知られてしまうのは時間の問題でしょう。

というわけで、**応用例としてはダメな例でした。**

しかし、セキュリティが緩くても低遅延であることのほうが重要なケースもあると思います。遅延が気になってた方は再検討してみてください。
Array指定個数分割

Array指定個数分割をしたかったのでひとまずメモ。

```swift

extension Array {
    func chunk(_ chunkSize: Int) -> [[Element]] {
        return stride(from: 0, to: self.count, by: chunkSize).map({ (startIndex) -> [Element] in
            let endIndex = (startIndex.advanced(by: chunkSize) > self.count) ? self.count-startIndex : chunkSize
            return Array(self[startIndex..<startIndex.advanced(by: endIndex)])
        })
    }
}

```
Unity３D　飛行

unityでの飛行をする方法を調べてもあまりしっくりくるものがなかったので、アドバイスを頂きつつも、それっぽいものを作ってみた。
作り方
１．MainCameraをCube内に格納する。CubeにRigidbodyをつける。
２．Edit>ProjectSetting>Inputのところを調整する（後で説明します）
３．ソースコード（C#）をアタッチする。

Inputの設定
![kizi.png](https://qiita-image-store.s3.amazonaws.com/0/150049/7450f5ae-8071-81a3-b2ea-a6cb7fc30b18.png)
重要なのは、このHorizontalとVerticalとPitchで画像のようにする。Yawは演算処理の中に入ってるが、今回はWASDのみで操作することが目標なので、適当にこの四つ以外でキーを割り振ってごまかした（もっといい方法待ってます・・・）


３のソース

```c#:Sample.cs
using UnityEngine;
using System.Collections;
using System;

public class PlaneController : MonoBehaviour {
    public float maxPower;
    public float accel;
    public float toruque;
    [SerializeField]
    private float power;
    private Rigidbody body;
   
    
	// Use this for initialization
	void Start () {
        body = GetComponent<Rigidbody>();
	
	}

    // Update is called once per frame
    void Update()
    {
   
        if (Input.GetKeyDown(KeyCode.Escape)) // 初期位置へスポーン
        {
            transform.position = new Vector3(0, 50f, 0);
            transform.rotation = Quaternion.identity;
            power = 0;
            body.velocity = Vector3.zero;
            body.angularVelocity = Vector3.zero;
        }
        var v = Input.GetAxis("Vertical");
        var h = Input.GetAxis("Horizontal");
        var mouseY = Input.GetAxis("Pitch");
        var mouseX = Input.GetAxis("Yaw");

        // トルクベクトルの計算
        var rotate = (-mouseY * transform.right + mouseX * transform.up + -h * transform.forward).normalized;
        // 与える力の計算（線形補間）
        if (v >= 0) power = Mathf.Lerp(power, maxPower, v * accel * Time.deltaTime);
        else power = Mathf.Lerp(power, 0, -v * accel * Time.deltaTime);

        // 力を与える
        body.AddForce(transform.forward * power);
        body.AddTorque(rotate * toruque);
    }
}
```


このソースの中でMaxPowerなどがアタッチすると出てきますが、上から100,2,0.5,0にしてみるといいです。
Rigidbodyは各自で空気抵抗を調整してみてください。動きをわかりやすくするためにTerrainで地形を作ってみたほうがいいです。
ではさよなら。
Chocolateyでjava8の開発環境をつくってみた

## 環境
OS: Windows10(Pro)
※ VM

## インストール
Windowsのパッケージ管理「Chocolatey」については割愛

以下のXMLをpackeages.configというファイル名で保存

```xml
<?xml version="1.0"?>
<packages>
    <package id="jdk8" />
    <package id="eclipse" />
</packages>
```


以下を管理者権限を与えた状態でコマンドプロンプトを起動し、以下のコマンドを実行

```bat
cinst packeages.config
```

2016/12/30時点では、Eclipse Marsがインストールされました。
パスの設定なども自動で行ってくれます。
Promiseとは4

# 前回まで

resolveの処理を読み終わった。

# reject

最初のrejectはresolverの処理がerrorを投げる場合。

```js
function reject(promise, reason) {
  if (promise._state !== PENDING) { return; }
  promise._state = REJECTED;
  promise._result = reason;

  asap(publishRejection, promise);
}
```

状態と結果が更新されて`publishRejection(promise)`が実行される。

```js
function publishRejection(promise) {
  if (promise._onerror) {
    promise._onerror(promise._result);
  }

  publish(promise);
}
```

ここでは`promise._onerror === undefined`

```js
function publish(promise) {
  let subscribers = promise._subscribers;
  let settled = promise._state;

  if (subscribers.length === 0) { return; }

  let child, callback, detail = promise._result;

  for (let i = 0; i < subscribers.length; i += 3) {
    child = subscribers[i];
    callback = subscribers[i + settled];

    if (child) {
      invokeCallback(settled, child, callback, detail);
    } else {
      callback(detail);
    }
  }

  promise._subscribers.length = 0;
}
```

この時点では`subscribers.length === 0`なので特になにもなく終わる・・・
次のrejectはresolveでerrorが起きた場合。
このときもreasonにerror内容が設定されるだけで、なにもなく終わる・・・
rejectされた結果に対して何かをするにはどうすればいいのか？

# rejectされた結果を受け取る、まさにcatch

それは`catch`

## catch

```js
catch(onRejection) {
  return this.then(null, onRejection);
}
```

reject時のthenは、`callback = onRejection`、`parent._result = reason`として`invokeCallback`が実行される。
onRejectionでerrorを投げなければ、そのまま実行されて実行結果に対してresolveが呼ばれる。
基本的にはreasonとなるerrorを処理するだけ。

# 次回

subscribersが実行されるような状況ってどんなとき？
Backpropagation

以下のような 1 -> 1 -> 2 のネットワークを考える。
<img width="600px" src="https://qiita-image-store.s3.amazonaws.com/0/10671/b6b5155d-bdf4-9b20-73da-f4a0f0a895c6.jpeg">

$J$ はコスト関数。各重み $\theta^l_i$ に対して、$\partial J / \partial \theta^l_i$ を計算したい。

$\delta^l_i = \partial J / \partial a^l_i$ とおく。この値をDPで後ろから計算するのがポイント。

たとえば、

```math
\begin{align}
  \delta^2_1 & = \partial J / \partial a^2_1 \\
             & = \frac{\partial J}{\partial z^2_1}\frac{\partial z^2_1}{\partial a^2_1}
\end{align}
```
となる。$\partial z / \partial a$ は、$a \rightarrow z$ の変換(例：シグモイド関数)の微分から求まり、前半は $J$ は $a^3_1, a^3_2$ の関数と見れることより

```math
\begin{align}
\frac{\partial J}{\partial z^2_1} & = \frac{\partial J}{\partial a^3_1}\frac{\partial a^3_1}{\partial z^2_1} + \frac{\partial J}{\partial a^3_2}\frac{\partial a^3_2}{\partial z^2_1} \\
& = \delta^3_1\theta^2_1 + \delta^3_2\theta^2_2
\end{align}
```
と計算できる。最後の層の $\delta$ は、

```math
\begin{align}
  \delta^3_1 & = \partial J / \partial a^3_1 \\
             & = \frac{\partial J}{\partial z^3_1}\frac{\partial z^3_1}{\partial a^3_1}
\end{align}
```
と計算できる。($J$の微分は計算可能であるとする。二乗和とか。)

$\theta^1_1$ での偏微分について考えると、ほかは全て固定して考えて、$J$ を $a^2_1$ の関数とみれば、

```math
\begin{align}
\partial J / \partial \theta^1_1 & = \frac{\partial J}{\partial a^2_1}\frac{\partial a^2_1}{\partial \theta^1_1} \\
                                 & = \delta^2_1 z^1_1
\end{align}
```
となることがわかる。

一般の場合でも同様に求まる。

# Logistic regression

$z = \sigma(a) = \frac{1}{1 + e^{-a}}$

$J = \sum_k -y_k \log z^L_k + (1-y_k) \log (1 - z^L_k)$

とする。
最終層では
$\delta^L_k = z^L_k - y_k$
途中では

```math
\delta^l_k = z^l_k(1-z^l_k)\sum_i \delta^{l+1}_i\theta_i
```

となる。ただし、$\theta_i$ は $z^l_k$ の寄与を次の層に伝える(縦)ベクトルとする。正確に書くと $\Theta^l_{ik}$。

$k$ から $i$ をつなぐ重みについての勾配は、

```math
\partial J/\partial \Theta^l_{ik} = \delta^{l+1}_i z^l_k
```
となる。

サンプルが複数個ある場合は、真の目的関数は、各々のサンプルに対する $J$ の平均(+ regularization)。微分の線形性より、勾配も全てのサンプルに対しての平均でよい。同様に、regularization 項の勾配は別に計算して足せばよい。
Chainerで画像を読み込む際のTips

# 1, 準備するデータ形式
ChainerのConvolution2Dなどを使う際には、データ形式を対応したものに整備しておく必要がある。しかし、Pythonの画像ライブラリであるPILとの整合性がないため、若干の注意が必要。
## PIL
データは以下のようにして読み込める。

``` Python
import Image
import numpy as np
# load from file
img = Image.open("XXX.jpg")
img.show()

# load from array
# xxx needs to be uint8
img = Image.fromarray(xxx,"RGB")
img.show()
```

また、加工も可能

``` Python
img = img.resize((277,277), Image.ANTIALIAS)
```

PILのデータ形式に関して、次に述べるarray型との注意すべき違いは以下の通り：
- 並び順: (x,y,color)という並び順。32pixel四方の3色であれば、(32,32,3)となる。1000データ分ならんでいたとすると、(1000,32,32,3)
- データ型: 0~255の整数を取る。0~1とすると正しく表示されないため注意が必要


## Chainerへ入れる際の np.array
PILから以下のようにして変換する

``` Python
# img はPILの画像
arrayImg = np.asarray(img).transpose(2,0,1).astype(np.float32)/255.
```

上記からもわかるが、以下の点がポイント
- 並び順: (color,x,y)という並び順。32pixel四方の3色であれば、(3,32,32)となる。
- データ型: 0~1のfloat32型で定義しておかないとChainerがエラーを吐く。

## その他、tips
1. arrayのreshapeに-1を指定すると、適切な数字を計算してもらえるので便利。 `arrayImgList.reshape(-1,3,32,32)` など
2. Chainerで引数に取る画像はfloat32でなくてはいけない一方、ラベルの引数 (softmaxに取る際の値)は、int32であることが必要
3. 上では、`transpose(2,0,1)`によりPIL->np.arrayの変換を行ったが、逆にnp.array->PILを行う場合は、`transpose(1,2,0)`を行う

# 2, イテレータの使い方
``` Python
from chainer.datasets import tuple_dataset
# train_x は、(1000, 3,32,32)のfloat32
# train_y は、(1000, )のint32
train = tuple_dataset.TupleDataset(train_x,train_y)
...
train_iter = chainer.iterators.SerialIterator(train, batch_size=100, repeat=True, shuffle=True)
...
updater = training.StandardUpdater(train_iter, optimizer, device=args.gpu, converter=myConverter)
```
などとして、`train_iter`を作成し、それを`updater`へ引き渡す。itaratorは、train_x、train_yより1つづつの要素をとり、`[(x1,y1), (x2,y2), ..., (x_b,y_b)]` (bはバッチサイズ)のlistを返す。

# 3, 実行時にデータを変換・読み込み
上で `converter=myConverter`と変換関数を指定したが、ここで実行時のデータ変換やデータの読み込みを行うことができる。
AlexNet(227pixelがもともと想定されていた)に対して、CIFARのデータセット (32pixel)を使おうとすると、アップサンプリングの必要が出てくるが、それをあらかじめイテレータに読み込ませようとすると、メモリを使い切ってしまうため、実行時にデータのresizeを行う方が良い。
また、ファイル名をイテレータの中に入れておいて、実行時batchの読み込み段階でディスクから読み込むということで、さらに大きなサイズのファイルを使うこともできる。

``` Python
from chainer.dataset.convert import concat_examples
def myConverter(batch,device=None,padding=None):
	newBatch = []
   	for dat in batch:
   		x = dat[0] # xはint32のPIL画像
    	y = dat[1]
    	img = Image.fromarray(x.transpose(1,2,0),"RGB")
      	img = img.resize((277,277), Image.ANTIALIAS)$
      	imarray = np.asarray(img).transpose(2,0,1).astype(np.float32) / 255.
      	newBatch.append((imarray,index))
      	# concat_examplesで、通常のバッチに対する処理を追加
      	return concat_examples(buf, device=device, padding=padding)

updater = training.StandardUpdater(train_iter, optimizer, device=args.gpu, converter=myConverter)

```
AdWords Script: Quality Score(品質スコア)の詳細項目を取得するスクリプト

AdWordsのキーワード別の品質スコア(1-10)とキーワード診断の結果(吹き出しアイコンに表示される詳細情報)を一覧で取得して、Google Spreadsheetに出力するスクリプト。(スクリプトの終了後にEmailで通知)
##### **項目の説明**
- Quality Score: 品質スコア(1-10)
- Creative Quality Score: 広告の関連性(3段階評価)
- Post Click Quality Score: ランディングページの利便性(3段階評価)
- Search Predict CTR: 推定クリック率(3段階評価)

##### **書き換える箇所**
- `YOUR_EMAIL_HERE`: 利用するEMAILアドレスに書き換え
- `GOOGLE-SPREADSHEET_URL`: 出力先のGoogle SpreadsheetのURLに書き換え
- `SHEETNAME`: 出力先のGoogle SpreadsheetのSheet名を入力
- `LAST_30_DAYS`: 取得したい期間に応じて変更

``` js:QS-detailattributes.gs

  // global variable
  var email = 'YOUR_EMAIL_HERE';
  var spreadsheet_url = 'GOOGLE-SPREADSHEET_URL';
  var formattedDate = Utilities.formatDate(new Date(), "GMT", "yyyy-MM-dd'T'HH:mm:ss'Z'");
  var cid = AdWordsApp.currentAccount().getCustomerId();
  var accountname = AdWordsApp.currentAccount().getName();


  function main() {
      var inputSheet = SpreadsheetApp.openByUrl(spreadsheet_url).getActiveSheet();
      var spreadsheet = setSpreadsheet(spreadsheet_url);
      var rawsheet = spreadsheet.getSheetByName('SHEETNAME');

      // select report data  
      var report = AdWordsApp.report(
          'SELECT CampaignName, AdGroupName, Criteria, Id, QualityScore, CreativeQualityScore, PostClickQualityScore, SearchPredictedCtr ' +
          'FROM   KEYWORDS_PERFORMANCE_REPORT ' +
          'WHERE  Impressions > 0 ' +
          'DURING LAST_30_DAYS');

      // export data
      report.exportToSheet(rawsheet);
      rawsheet.sort(5, false);

      var header = [
          'Campaign',
          'AdGroup',
          'Keyword',
          'Id',
          'Quality Score',
          'Creative Quality Score',
          'Post Click Qlick Score',
          'Search Predict CTR'
      ];

      // recording logs and email setting
      Logger.log('Adwords script for QS detail attributes is complete.\n' +
          spreadsheet.getUrl());
      if (email) {
          MailApp.sendEmail(email,
              'Quality Score detail attributes report is complete.' + ' ' + accountname + ' ' + formattedDate,
              spreadsheet.getUrl());
      }

      function setSpreadsheet(spreadsheetUrl) {
          return SpreadsheetApp.openByUrl(spreadsheetUrl);
      }
  }
```
Materializecss の toast 表示時間を無制限に設定する

materializecss　の toast 設定は下記のようにできます。

```
// Materialize.toast(message, displayLength, className, completeCallback);
Materialize.toast('I am a toast!', 4000);
```

`displayLength` をミリ秒で指定できますが、 string にすればずっと表示することができます。

message 'I am a toast!'
displayLength 'stay'
className 'myToast'

```
  Materialize.toast('I am a toast!', 'stay', 'myToast');
```

非表示は、className に指定した class で fade out します。

```
$('.myToast').fadeOut();
```


参考
http://materializecss.com/dialogs.html
Promiseとは3

# 前回

resolveにvalueが渡される場合の処理は分かった。

# resolve

### 2. valueがobjectまたはfunctionの場合はまた違うメソッドが呼ばれる

呼ばれるメソッドは`handleMaybeThenable(promise, value, getThen(value))`

```js
function handleMaybeThenable(promise, maybeThenable, then) {
  if (maybeThenable.constructor === promise.constructor &&
      then === originalThen &&
      maybeThenable.constructor.resolve === originalResolve) {
    handleOwnThenable(promise, maybeThenable);
  } else {
    if (then === GET_THEN_ERROR) {
      reject(promise, GET_THEN_ERROR.error);
    } else if (then === undefined) {
      fulfill(promise, maybeThenable);
    } else if (isFunction(then)) {
      handleForeignThenable(promise, maybeThenable, then);
    } else {
      fulfill(promise, maybeThenable);
    }
  }
}
```

maybeThenableがこのLibararyのPromiseかつ、thenがこのLibraryのthenであれば`handleOwnThenable`が呼ばれる。
自分の使いどころはただのobjectを渡すことがほとんどなので、else節の方を見ていく。
ここの`then`は以下のような実装。

```js
function getThen(promise) {
  try {
    return promise.then;
  } catch(error) {
    GET_THEN_ERROR.error = error;
    return GET_THEN_ERROR;
  }
}
```

resolveに渡されるobjectまたはfunctionにthenがあればそれを返し、なければundefinedが返る。
thenがあれば`handleForeignThenable`が実行される。これもあまり興味がないので、`then === undefined`を考える。
その場合はfulfillにobjectが渡されるだけ。ここの処理はもう見た。

# 次回

rejectされた時の処理を見ていく
centos6にyumでインストールしたmysqlを5.1から最新版へアップデート

mysql5.6以降で使えるmemcachedプラグインを試してみるために
centos6系にmysqlを最新版（5.7）に更新した際の手順

# yumでmysql-serverのupdateを試す
- 更新前にまずmysqldumpで元々存在するデータをバックアップ、サービスを一旦停止する（手順略）

mysqlは前にyumで入れたからyumで更新すればいいかとupdateを試す

```
yum update mysql-server
```

しかし、更新と設定されたパッケージがありません。
のようなメッセージが出て5.1.73より後のバージョンには更新されない。

# 公式リポジトリの登録
普通のyumからでは最新は入れられないらしいので公式リポジトリを登録。

```
yum install http://dev.mysql.com/get/mysql57-community-release-el6-9.noarch.rpm
```

元のmysql-serverはアンインストール（手順略）した後、インストールし直す

```
yum -y install mysql-community-server
```

これでmysql5.7が入ったのでバージョン確認

```
$ mysql --version
mysql  Ver 14.14 Distrib 5.7.16, for Linux (x86_64) using  EditLine wrapper
```

確認できたのでサービスを再起動してみる。
/etc/init.d/mysqld start（または service mysqld start）

```
/etc/init.d/mysqld start
MySQL Daemon failed to start.
mysqld を起動中:                                           [失敗]
```

なんでや！
エラーログを確認した結果、以下のメッセージ

```
[ERROR] InnoDB: The Auto-extending innodb_system data file './ibdata1' is of a different size 640 pages (rounded down to MB)
```

my.cnf に [mysqld]ブロックに
`innodb_data_file_path = ibdata1:10M:autoextend`
の記述で解決できるもよう
※参考元
http://www.cnblogs.com/vincent4code/p/5870670.html

再度サービス起動を試すと今度は以下のメッセージ

```
[ERROR] InnoDB: Cannot open '/var/lib/mysql/ib_buffer_pool' for reading: No such file or directory
```

権限がないようなのでアクセス権更新

```
chown -R mysql:mysql /var/lib/mysql/
```

再度サービス起動を試すとまたも失敗。今度は

```
[ERROR] Fatal error: mysql.user table is damaged. Please run mysql_upgrade.
```

damagedっていうか元バージョンと互換性が取れないのだろうに。
mysql_upgradeを実行しろというがサービス起動も出来ないのにどう実行しろというのか
調べたところMySQLをセーフモードで起動すれば出来るらしい。

```
mysqld_safe --skip-grant-tables &
mysql_upgrade -u root -p
/etc/init.d/mysqld restart
```
	
これでやっとサービス起動できた。
ログでwarningに出てたtimestampがデフォルトで使えなくなった？件の対応も　my.cnf に入れておく
`explicit_defaults_for_timestamp = true`

# mysqlのrootユーザーのパスワード再設定
ここでrootパスワードが分からない（メモが見れない）環境で作業していたので
パスワードを再設定。もう一回サービス止めて、セーフモードで再起動

```
mysqld_safe --skip-grant-tables &
mysql -u root
```

```
> UPDATE mysql.user SET authentication_string=PASSWORD('hogehoge') WHERE User='root';
> FLUSH PRIVILEGES;
```

PASSWORDを使うとwarningは出るけど取りあえず気にしない（将来廃止）

# memcachedプラグインを利用

```
$ locate innodb_memcached_config.sql
/usr/share/mysql/innodb_memcached_config.sql
```

```
mysql> create database if not exists test;
mysql> source /usr/share/mysql/innodb_memcached_config.sql
mysql> INSTALL PLUGIN daemon_memcached soname "libmemcached.so";
mysql> SHOW PLUGINS;
```

libmemcachedも入れてそちらのクライアントコマンドからアクセス可能にする

```
yum install libmemcached
```

※参考元
http://beyondjapan.com/blog/2016/03/mysql56-memcached-plugin

これでmemcachedプラグインも試せたが、自分の用途には合わなかった。
5.7になったついでにjson型も試してみたいけどそれはまた今度。
Promiseとは2

# 前回のまとめ

subscribersが登録されていないとpromiseには何も起こらない

# いつsubscribersが登録されるのか？

それは`then`

## then

```js
export default function then(onFulfillment, onRejection) {
  const parent = this;

  const child = new this.constructor(noop);

  if (child[PROMISE_ID] === undefined) {
    makePromise(child);
  }

  const { _state } = parent;

  if (_state) {
    const callback = arguments[_state - 1];
    asap(() => invokeCallback(_state, child, callback, parent._result));
  } else {
    subscribe(parent, child, onFulfillment, onRejection);
  }

  return child;
}
```

新しいPromiseが作られる。
呼び出し元から`_state`を取り出し、`_state !== PENDING`かどうかで処理が分かれる。

### この時点で`_state === PENDING`である場合

初期化時にresolverを渡さない場合は`_state`が変化しないのでPENDINGのまま`then`が呼ばれる。
このとき`subscribe(parent, child, onFulfillment, onRejection)`が実行される。

```js
function subscribe(parent, child, onFulfillment, onRejection) {
  let { _subscribers } = parent;
  let { length } = _subscribers;

  parent._onerror = null;

  _subscribers[length] = child;
  _subscribers[length + FULFILLED] = onFulfillment;
  _subscribers[length + REJECTED]  = onRejection;

  if (length === 0 && parent._state) {
    asap(publish, parent);
  }
}
```

ここで`_subscribers`に登録される。
1度のsubscribeで`child`, `fulfill`, `reject`が登録される。
resolverがない場合は`parent._state === PENDING`なので何も実行されない。
ここまででresolverがない状態でPromiseを初期化するのは意味がないことがわかった。
つまり、初期化時は`_subscribers`は登録されないままで良い。

### `_state !== PENDING`である場合

resolverがある場合かつresolveが呼ばれた場合はここで`_state === FULFILLED`なので、`callback = onFulfillment`となり、`asap(() => invokeCallback(_state, child, callback, parent._result))`が実行される。
asapはqueueのスケジューリングなのでここでは無視していく。`invokeCallback`が重要。

```js
function invokeCallback(settled, promise, callback, detail) {
  let hasCallback = isFunction(callback),
      value, error, succeeded, failed;

  if (hasCallback) {
    value = tryCatch(callback, detail);

    if (value === TRY_CATCH_ERROR) {
      failed = true;
      error = value.error;
      value = null;
    } else {
      succeeded = true;
    }

    if (promise === value) {
      reject(promise, cannotReturnOwn());
      return;
    }

  } else {
    value = detail;
    succeeded = true;
  }

  if (promise._state !== PENDING) {
    // noop
  } else if (hasCallback && succeeded) {
    resolve(promise, value);
  } else if (failed) {
    reject(promise, error);
  } else if (settled === FULFILLED) {
    fulfill(promise, value);
  } else if (settled === REJECTED) {
    reject(promise, value);
  }
}
```

`callback`が関数ではない場合は、引き続きchildに対して`fulfill`が呼ばれて無限ループになり何も起こらない・・・
`callback`が関数の場合は、`callback(detail)`がtry-catch内で実行される。
 実行結果がchildのPromiseに渡され処理がつづく。

# 次回

resolveにobjectまたはfunctionを渡す場合の処理を読んでいく
LaravelのfirstOrNewの変更差分について(v5.2.44使用者対象)

## ご挨拶

こんばんにゃ(≧∀≦*)これが間違いなく今年最後のQiitaになると思います。
今年も色々ありましたね、みなさんどうお過ごしでしたでしょうか？
私事で言うと
 - 引越しした(7年近く住んだ池袋を離れた)
 - 9/7付けで退職してフリーに戻った

ということで、フリーに戻ってCakePHP3(1ヶ月)とLaravel5.2を触ってます。
今回は主にというかLaravelのお話ですね。
とりあえず、簡単ではありますが、自分がF/Wを触る上で必要な3ヶ月を費やしてみての所感と、おっと！これはハマるぞ！！という出来事に関してです。

## Laravelのいいところ

- 結果セットが単一レコードであればモデルオブジェクト(entity)
- 結果セットが複数レコードであればコレクション(entityの配列オブジェクト)
- リクエストクラスがいい感じに処理されてくれてバリデーションが楽

## Laravelの悪いところ

- 上記を実現するにはPHPという言語の型問題があまりにもｘｘである。
    - 特に配列の扱いがｘｘだなと再認識した
- せっかくのウリであるDBからの返却値がオブジェクトであることを生かせていない
    - モデルやコレクションの拡張をもっと主張して捗らせるべき
- Model/Collection/QueryBuilderで同名、かつ、同じ動作を伴うメソッドが混乱を招く

## 本題です(正直、Ver問題に見舞われなければ特に害はありません)

- 先日、チームメンバーからModel::firstOrNewの返り値がおかしいというタレコミを受けた。
- 奇しくも自分が共通化したメソッドで使われているメソッドが利用していたものであった。
- 再現性を認められず、本番リリース済みだった
- 問題はORMが発行されるSQLの差異(期待した条件文の有無)ということ
    - これは(美味しそうだから)放ってはおけない！！

## で、調べますよね、
- タレコミ元の情報によると、開発者の環境ではうまくいく
- だが、タレコミ元の環境では期待値を得られない
- composer update してみたらなぜかうまくいった

## いやいや！それってVersion問題ですかね？

- ということで、ラッパーメソッドを作った自分としては放っておけないので調査開始
 - 自分の環境でも、条件文が正しくORMの生成するSQLに反映されていない
 - 対象のメソッドはfirstメソッド(LIMIT 1)が付加されるを利用していた
 - select .. limit 1 でテストしていた結果セットを利用するというずぼらをかましていた
 - これは！！絶対になにかある！！！！

## ということで、調査開始

- まずはタレコミ通りのSQLを発行してみる
    - 面白いことにタレコミ通りの結果となる(開発者の環境ではならない)
- composer updateをかます
    - なんか、Laravelがアップデートされてるぞｗ
- 手元のEmacsのバッファをコピペして、アップデートが終わるのを待つ
- アップデートが終わるを待って、当該クラスを開き直す
    - SQLに差異があるぞ！！！！(元の実装がダメだったことを確認)
- もはや、Versionの差異であることは間違いない。。

## で、実際のソースを見てみる

### v5.2.44

```
    public function firstOrNew(array $attributes)
     {
         $mutatedAttributes = $this->model->newInstance($attributes)->getAttributes();

         if (! is_null($instance = $this->where($mutatedAttributes)->first())) {
             return $instance;
         }

         return $this->model->newInstance($attributes);
     }
```

### v5.2.45

```php
public function firstOrNew(array $attributes)
     {
         if (! is_null($instance = $this->where($attributes)->first())) {
             return $instance;
         }

         return $this->model->newInstance($attributes);
     }
```

## 思いっきり、参照する変数を変えとりますやん！！

- ということで、$mutatedAttributes というか$fillableや$guraredの調査は次に譲るとして、v5.2.44をお使いの方でfirstOrNewとお使いの方はご注意を

本番も v5.2.45 にするのが本来的にはよいと思いますが、いったんモデルの基底クラスで Model::fillable に存在しないフィールドが指定されていた場合は例外を吐かせるようにしました。
※ 年末だし、リリースまで1ヶ月はある機能で、ちゃんと調査する時間を設けたかったので

それでわヾ(｡･ω･｡)
MinecraftModのデコンパイルの仕方

# 自己紹介
皆さん、こんにちは！LiT!のキャンプ歴約2年のまるです。
今まで行ったコースの中で一番はまったマインクラフトについての話題をば…

# デコンパイル！！
皆さん、こんな経験ありませんか？
「あのmodを参考にしたいけどソースが公開されていない…」
さて、ここで問題です。どうするのが正解でしょう？



正解は…

**「デコンパイルする」**でした！

# どうやる？
1. jd_guiのダウンロード
2. modのデコンパイル
3. func_・field_系のエラー直し

↓詳しく説明していきます

## 1.jd_guiのダウンロード
[jd_guiのページ](http://jd.benow.ca/)にアクセスし、少し下のJU_GUIのところのDownloadタブからjd_gui-1.4.0.jarをダウンロードします。（バージョンは変わっているかもしれません。）
![1.png](https://qiita-image-store.s3.amazonaws.com/0/156346/26877e9a-09b4-9efc-30ef-1271de21bc28.png)

## 2.modのデコンパイル
先ほどダウンロードしたjd_guiをダブルクリックで起動します。
そして、デコンパイルしたいmodをjd_guiにドラッグ&ドロップします。
すると、一瞬のうちにデコンパイルされ、ソースコードが表示されます。
（画像には自作のModを使用しています。）
![2.png](https://qiita-image-store.s3.amazonaws.com/0/156346/3d531ead-a565-1480-27c7-88cee7cc0f8e.png)

そして、左上のFile>Save all Sourcesをクリックし、好きなところに保存します。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/156346/6d8e9c59-054b-e404-2a61-70f59b72f93a.png)

そこにzipファイルやらなんやらができたと思います。
それを解凍すると、デコンパイル後のjavaファイルが出てきます。
![c0ccb904-0108-ea63-4058-1dc444e0655b.png](https://qiita-image-store.s3.amazonaws.com/0/156346/6cc258c7-718c-b521-927a-c962222f7607.png)


これでデコンパイル自体は完成ですが、このままでは使えないのでいろいろしていきましょう。

## 3. func_・field_系のエラー直し
とりあえずこれを見てください。

```java:seiti.java
package maru.seititools;
import net.minecraft.entity.player.EntityPlayer;
import net.minecraft.init.Blocks;
import net.minecraft.item.ItemStack;
import net.minecraft.world.World;

public class seiti extends net.minecraft.item.Item {

  private boolean isair;
  
  public seiti()
  {
    func_77637_a(net.minecraft.creativetab.CreativeTabs.field_78040_i);
    func_77655_b("seititools_seiti");
    func_111206_d("seititools:seiti");
  }
  
  public boolean func_77648_a(ItemStack stack, EntityPlayer player, World world, int x, int y, int z, int meta, float wx, float wy, float wz)
  {
    this.isair = true;
    for (int i = -5; i <= 5; i++) {
      for (int j = 1; j <= 10; j++) {
        for (int k = -5; k <= 5; k++) {
          net.minecraft.block.Block block = world.func_147439_a(x + i, y + j, z + k);
          if ((block != Blocks.field_150357_h) && (block != Blocks.field_150378_br)) {
            world.func_147480_a(x + i, y + j, z + k, true);
          }
          if (block != Blocks.field_150350_a) {
            this.isair = false;
          }
        }
      }
    }
    if (this.isair) {
      return true;
    }
    stack.field_77994_a -= 1;
    return true;
  }
}
```
func_77637_aなど、意味わからないものがありますよね？
これは、プログラミングで使用している関数とマインクラフトが使用する関数の名前が違うので、コンパイルするときに直しているからです（たぶん…）。
というわけで修復していきましょう。

"minecraft Mod Corder Pack"で検索すると、MCPのダウンロードページを見つけられると思います。そこから該当バージョンのMCPをダウンロードし、`fields.csv`や`methods.csv`といったファイルを見つけてください。それがfunc,field系と元の変数名・関数名との対照表になっています。

---
また、
>難読化後の名前に関してはMCP Mapping Viewerが便利ですよ。

というコメントをいただきましたが、イマイチ使い方がよくわからなかったので見送らせていただきました。すみません。(確実に私の技量不足)
興味がある方は使ってみてください。

## 完成！
func,field系を直したらデコンパイル完成です！
（ライセンスに違反しない範囲で）煮るなり焼くなりしてスキルアップしましょう！
161222_data_visualization_meetup_2016の報告➀

# 本題に入る前にイベントの紹介です

facebookでオープンデータ界隈の方からイベント告知が流れてきたので行ってきました。自分の記録用だけど、長いんで3分割ぐらいで記載していきます。
詳細はここ→https://data-visualization-japan.connpass.com/event/47246/


注）技術的な話はほとんど書き~~（け）~~ません。


### データビジュアライゼーションとは？
ここのサイトの説明が分かりやすかったです。（長いんで省略）
https://www.synergy-marketing.co.jp/glossary/data-visualization/



たとえばこんな↓コンテンツもビジュアライゼーションによるものだそうです。
青い光は、スマホからのPVが多かった号外らしいです。
本当にとんでもない年だったなぁ...とよくわかります。
**号外ニュースで振り返る2016年**
<http://news.yahoo.co.jp/staffblog/special/lookback2016/>



### こんな方々が登壇していました（2016年カンファレンストーク登壇者）
・池宮伸次さん（ヤフー株式会社）
・矢崎裕一さん（Data Visualization Japan/Code For Tokyo）
・鎌田健一郎さん（日本経済新聞社）
・清水正行さん（GUNMA GIS GEEK）
・阿部博史さん（日本放送協会）

本当はLTで医療VRやナビタイムの中の方など他数人いらっしゃったのですが、LTの途中から気分が悪くなって退出してしまったので、イベント報告ができません。。。本当ごめんなさい...:sweat_drops:




# 本題：こんなカンファレンストークだった
### 熊本地震の検索データをビジュアライズのアプローチで分析した話 by yahoo!池宮さん

~~余談）歌詞分析。アーティストが持っている曲をテキスト解析して、似ている人をツリー化。池宮さんの最近の作品で一番お気に入りらしい。~~

yahoo!検索では、100億種類（≠100億回）の検索がされているそうです。
私が使ってるシステムから考えると、とんでも数すぎます...。

#### 検索分析の王道と東日本大震災分析時の反省
分析の王道には、下記2点があるそうです。
- 検索数ランキング
- 検索数の推移波形

推移波形は平均株価のグラフとかでよく見るやつですが、「熊本地震＋●●」と検索した人の推移波形のピークは、全国と熊本県で1か月ぐらい異なるそうです。これだけでも、ニュースとしての熊本地震と被災者としての熊本地震の重みの差が見える一端じゃないかと。

実は池宮さん、東日本大震災の時も検索キーワードの分析でレポートをまとめたことがあるそうですが、従来のやり方では、検索数が多いものは見つけやすいけど、推移波形におけるロングテール（波形が逓減して、横長い尻尾道みたいになっている）部分について分析ができなかったことを反省としていたそうです。
（具体的には、東日本大震災のときには関東圏でたくさんの帰宅困難者がでましたが、「●●線遅れ」というワードで検索するため、検索ランキング等ではそれぞれの沿線名ごとに分散されてしまう...ということだったらしいです）

#### 熊本地震でやってみた共起ネットワーク分析
そこで熊本地震では、池宮さんが最近マイブームで取り組んでいた共起ネットワークで分析をしてみたとか...。結果、避難所など避難に関する情報や英語の被災者情報のニーズを検知することができた、ということでした。

		-共起ネットワークとは
		特徴語同士の共起関係をネットワーク図（クラスタ化）にするもの。
		隠れていた需要をまとめ上げることで、隠れたニーズを掘り起こしやすい。


#### 共起ネットワークの作り方
KH Coderを使えば簡単にできる（ただしWindowsに限るらしいです）
裏でRで動いているそうですが、Rで同じものを作らせるのは思ったより難しかったそうで（某K大学の授業で教えたら思ったよりできなかったらしいです）、初心者はありものをしっかり使いましょうとのことでした。

クラスタ化のポイントとしては、下記の2点らしいです。
1.欲張らないで、データをきれいにすること
2.解説してあげないと初見で誤解する人がいるので、展開する際には必ず解説を入れること

→ここらへんは、要約と同じかもしれないですね。情報の取捨選択とメッセージ性が大事ってあたり。

ということで、初心者にも使いやすい形態素解析の事例紹介でした。
冒頭の余談にあるとおり、色々ビジュアライゼーションにも取り組んでいらっしゃるのでしょうが、一発目ということもあって優しめのテキストマイニング的なお話をしてくださったように思います。


#### 質疑応答
Q：ロングテール解消のためにワードを拾うときに、なんで共起ネットワークにしたのか。
A：単純にロングテールの分析余力がなかったから。時系列推移が中心にやっていた。自然言語処理についてはこれからもっとやっていきたいと思っている。

Q:KHcoder使わなくても、yahoo!のツールがあるのでは。
A:サクッと出したいときはKHcoderのほうが早いので、ものによって使い分けている。


Q：テキスト解析において言語間の距離に意味はないとのことだが、そうでもないのでは？（形態素解析のときに前後5つまでとかよくやるし...）
A：検索キーワード分析ではあまりそこまで距離を取らないので重要視していない。←言われてみるとたしかに、な質疑応答でした。
AngularJSでコンポーネントを使用する方法を書いてみた（TypeScript版）


UI Routerを使用してコントローラーからコントローラーやコンポーネントに値を渡す方法を書いてみました。
環境はAngular1.5とtypescript2.1です。

### コントローラーに遷移する
以下のコードはコントローラーからコントローラーに遷移するコードです

遷移するロジックは全てtsファイルに記述しており、html側ではng-clickなどを使用して関数（transitToController2）
で遷移するロジックを呼び出しています。

```controller1.ts
namespace sample.controller1 {
  'use strict';

  export class controller1 {
 
    constructor(){}
 
    public static get state(): ng.ui.IState {
      return {
        name: 'controller1',
        url: '/controller1',
        templateUrl: 'controller/controller1.html',
        controller: controller1,
        controllerAs: 'controller1',
      };
    }
   
    //画面遷移用メソッド
    private transitToController2():void {
      $state.go('controller2', {
        parameter: 100
      });
    }
   
  }
 
  angular.module('sample.controller1', [
    'sample.component'
  ])
  .controller('controller1', controller1);
}
```

```controller1.html
<a ng-click="controller1.transitToController2()">画面遷移します</a>
```

```controller2.ts
namespace sample.controller2 {
  'use strict';

  export class controller2 {
 
    constructor(){}

    public static get state(): ng.ui.IState {
      return {
        name: 'controller1',
        url: '/controller1',
        templateUrl: 'controller/controller1.html',
        controller: controller1,
        controllerAs: 'controller1',
        param {
          parameter: null
        }
      };
    }
   
    //受け取ったパラメータの変数
    private parameter: number
  }
 
  angular.module('sample.controller2', [])
  .controller('controller2', controller2);
}
```


### コンポーネントに値を渡す
以下のコードはコントローラーからコンポーネントに遷移するコードです

今度はコントローラー側のtsファイルではロジックをを記述しておらず、html側でパラメータを送っています。
そして受け取り側のコンポーネントではbindingでパラメータを受け取っています。

```controller.ts
namespace sample.controller {
  'use strict';

  export class controller {
 
    constructor(){}
 
    private parameter: string = 'コンポーネント'
   
  }

  angular.module('sample.controller', [
    'sample.component'
  ])
  .controller('controller', controller);
}
```

```controller.html
<component param=controller.parameter></component>
```

```component.ts
namespace sample.component {
  'use strict';

  export class component {
 
    constructor(){}
 
    private param: string;
 
  }

  angular.module('sample.component', [])
  .component('component', {
    controller: component,
    templateUrl: 'component/component.html',
    binding {
      param: '='
    }
  });
}
```

```component.html
<div ng-bind="param"></div>
```
【インスタンスって何??】AWSでよく聞く単語まとめてみた

EC2って何？
インスタンス立てる？

AWSに触ったことがない方が周囲で飛び交うAWS用語をなんとなく理解できるような
用語集を書いてみます。
かくいう私もここ最近AWSの勉強を始めました。
前までは周囲で、「インスタンス」「S3」といった言葉が飛び交っていても
なんのこっちゃ？と思っていましたが、
ちょっとずつ分かってきたので忘備録としてまとめます。
まだまだ初心者なので間違いがあればご指摘願います。。。
※ かなりざっくりとした説明になりますのでイメージだけ掴んでいただければ幸いです。
今回はAWSの詳細な使い方については書きま　せん。
  初心者の方はこちらが大変わかりやすくまとまっているので一読することをお勧めします。
 [世界一丁寧なAWS解説](http://qiita.com/naoki_mochizuki/items/f795fe3e661a3349a7ce)


## EC2(Amazon Elastic Compute Cloud)
いわゆる仮想サーバ
AWSを利用する９割くらいの人がこの機能を使用しているのではないでしょうか？
かくいう私も[AWS = EC2]と思ってました。。。
レンタルサーバとの大きな違いは、従量課金制であるという点です。 
このサーバに作ったアプリケーションを乗せていく感じになります。
私もsshで接続してgitからcloneしてEC2にデプロイして遊んだりしてます。
よく聞く**インスタンス**って言葉は主にEC2から立てられたサーバの一つを指すケースが多いです。
（rdsインスタンスとかあるので絶対ではないです）

AWSを使って見たいという人はまず最初に触ってみるべき機能だと思います。


## S3(Simple Storage Service)
Sが３つでS3ですね。
ストレージサービスです。
ストレージはざっくりいうと保管庫みたいなもの。
一番わかりやすいのはUSBですかね。
あれもストレージの一つで外部ストレージと言います。
プレステでいうメモリーカードですね(笑)

さてS3に話を戻します。
S3にはかっこいい異名がありまして

イレブンナインの耐久性

と言われます。（公式に書いてあります）
要はS3にデータを保存時ておけば理論上は
99.999999999%データが消失することがないらしいです。
ですのでS3の使い方としてS3にデータのバックアップをとるなんてこともできますね。
また保存データ容量に上限がありませんので
「静的ファイルを置いて直接クライアントに配信する」という活用方法がよくある話かと思います。


## AMI(Amazon Machine Image)
EC2で使われるディスクイメージです。
EC2の元となる雛形と言えばわかりやすいかもしれません。
例えば本番用のインスタンスと開発環境用のインスタンスの２つを用意するとします。
この二つは基本的には大きく構成は変わらないはずです。
ですので、まず本番用のインスタンスを作成し、必要なミドルウェアやアプリを配置します。
そのインスタンスのAMIを作成し、それを元に開発環境用のインスタンスを作成すると
手間が大きく省けます。
また、バックアップとしてAMIをとっておくなんてこともあるようです。
こんな感じで、AMIはインスタンスの雛形といった感じですね。


## ELB(Elastic Load Balancing)
ロードバランサー、いわゆる負荷分散です。
トラフィックを複数のインスタンスに分散する機能です。
特徴はいろいろあり、ここでは書ききれない（というより勉強不足）ですが１つに
ELB自体も負荷の増減に応じて自動でスケーラブル設定が可能みたいです。
ELBについてはちゃんと勉強して詳細なまとめを書きたい気持ち。


## RDS　（Amazon Relational Database Service）
読んで字のごとくデータベースです。
Amazonクラウド上で使えるデータベースですね。
ちなみに他にも
・DynamoDB
・Redshift
なんてDBもありますが今回は割愛。
RDSのいいところはなんていっても楽。
MySQL,OracleSQLなど複数のRDBMSから選択できて、
Webで起動できます。
サーバを選定してOSにインストールして・・・といった作業が一切不要です。
また運用しているうちに容量が足りないなーと感じたら
増やすことも可能なので可用性があるのもいいですね。
（確か減らすことはできなかったはずですが。。。）



* * *

以上、ざっくり単語集でした。
AWSにはまだまだ機能がありますし、
初めてやるとインスタンス作るのもよう分からんって場合もあるかもしれませんので
そのうちサーバ構築方法なんかも書きたいなーと思ってます。
Promiseとは1

# 最初に

[DHHのtweet](https://twitter.com/dhh/status/812022205525565440)を見て、基礎的なことを疎かにしていないかと考えたとき、Promiseについて日頃何気なく使っていることに気づいた。
そこで何回かに分けて、Promiseの実装を読んで理解できるように頑張り、基礎力を上げていこうというもの。

# 実装を読む題材

https://github.com/search?o=desc&p=1&q=promise&s=stars&type=Repositories&utf8=%E2%9C%93
色々ありますが、es6で書かれているため読みやすいこちらを読んでいきます。
https://github.com/stefanpenner/es6-promise


# 初期化

```js:
export default function Promise(resolver) {
  this[PROMISE_ID] = nextId();
  this._result = this._state = undefined;
  this._subscribers = [];

  if (noop !== resolver) {
    typeof resolver !== 'function' && needsResolver();
    this instanceof Promise ? initializePromise(this, resolver) : needsNew();
  }
}

const PROMISE_ID = Math.random().toString(36).substring(16);

let id = 0;
function nextId() {
  return id++;
}
```

こちらがPromiseのconstructorになっている箇所。初期化時に呼ばれる。
実際に初期化をしているのは`initializePromise`

```js:

function initializePromise(promise, resolver) {
  try {
    resolver(function resolvePromise(value){
      resolve(promise, value);
    }, function rejectPromise(reason) {
      reject(promise, reason);
    });
  } catch(e) {
    reject(promise, e);
  }
}
```

resolverにresolveとrejectを渡して実行している。
resolverがerrorを投げるタイプの場合はrejectでcatchしている。
まずはresolve

## resolve

```js:resolve
function resolvePromise(value){
  resolve(promise, value);
}
```

resolverからvalueを渡されて内部で定義されているresolveを実行。
resolveの内部実装を見てみる。

```js:resolve-internal
function resolve(promise, value) {
  if (promise === value) {
    reject(promise, selfFulfillment());
  } else if (objectOrFunction(value)) {
    handleMaybeThenable(promise, value, getThen(value));
  } else {
    fulfill(promise, value);
  }
}
```

resolveの処理は以下のような感じ。
1. valueがPromiseの場合はreject
2. valueがobjectまたはfunctionの場合はまた違うメソッドが呼ばれる
3. valueが値の場合はfulfillされる

### 3. valueが値の場合はfulfillされる

1はrejectがわからないとだめなので飛ばす。
2は少し複雑そうだから飛ばす。

```js
const PENDING   = void 0;
const FULFILLED = 1;
const REJECTED  = 2;

function fulfill(promise, value) {
  if (promise._state !== PENDING) { return; }

  promise._result = value;
  promise._state = FULFILLED;

  if (promise._subscribers.length !== 0) {
    asap(publish, promise);
  }
}
```

fulfillは以下のような処理。

* Promiseの状態がPENDINGでなければ何もせず終了(初期化時はPENDINGなのでスルー)
* PENDINGであれば、値と状態を更新する
* subscirbersが登録されていれば`asap(publish, promise)`が実行

ここまでで以下のような処理がわかった。

```js:ここまでの処理
let result = 'SUCCESS';
let p = new Promise((onResolve, onReject) => {
  if (result === 'SUCCESS') {
    onResolve(true);
  } else {
    onReject(new Error('Error!'));
  }
});
// 上の実装と分けるためonをつけて区別した
// p._result = true;
// p._state = FULFILLED;
```

これだと何も起こらない。

# 次回

subscribersがいつ登録されて、Promiseが実際にresolveする様子を調べていく。
zsh の右プロンプトを2行にする

## RPROMPT には改行を入れられない

zsh で右プロンプトに情報を表示するときには `RPROMPT` 環境変数を使います。
しかし、`RPROMPT` には改行を含めることができません。左プロンプトは行けるのに……。

```zsh
# 2行表示される
PROMPT=$'top left\nbottom left %# '
# 何も表示されない
RPROMPT=$'top right \nbottom right'
```

![1.png](https://qiita-image-store.s3.amazonaws.com/0/53798/2f9cd566-6c15-d533-acba-ac7fca473804.png)


## 解決方法

プロンプトを表示する直前に、自分で print してあげればいいです。

```zsh
# プロンプトの表示直前に毎回実行される
precmd() {
  local left="top left"
  local right="top right "
  # $left と $right の間をスペースで埋めて表示
  print -P $left${(r:($COLUMNS-${#left}-${#right}):: :)}$right
}
PROMPT=$'bottom left %# '
RPROMPT=$'bottom right'
```

![2.png](https://qiita-image-store.s3.amazonaws.com/0/53798/66d4ede3-d471-a02c-6f7b-1cd66f2a6714.png)


実際の設定はこのようにしています。

```zsh
autoload -Uz vcs_info
zstyle ':vcs_info:*' formats '[%b]'
zstyle ':vcs_info:*' actionformats '[%b|%a]'
precmd () {
  # 1行あける
  print
  # カレントディレクトリ
  local left=' %{\e[38;5;2m%}(%~)%{\e[m%}'
  # バージョン管理されてた場合、ブランチ名
  vcs_info
  local right="%{\e[38;5;32m%}${vcs_info_msg_0_}%{\e[m%}"
  # スペースの長さを計算
  # テキストを装飾する場合、エスケープシーケンスをカウントしないようにします
  local invisible='%([BSUbfksu]|([FK]|){*})'
  local leftwidth=${#${(S%%)left//$~invisible/}}
  local rightwidth=${#${(S%%)right//$~invisible/}}
  local padwidth=$(($COLUMNS - ($leftwidth + $rightwidth) % $COLUMNS))

  print -P $left${(r:$padwidth:: :)}$right
}
# ユーザ名@ホスト名
PROMPT='%n@%m %# '
# 現在時刻
RPROMPT=$'%{\e[38;5;251m%}%D{%b %d}, %*%{\e[m%}'
TMOUT=1
TRAPALRM() {
  zle reset-prompt
}
```

![3.png](https://qiita-image-store.s3.amazonaws.com/0/53798/3e8203ca-ac85-097b-ec6b-255c792807fa.png)


見やすい✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

## 参考

- [Multiline RPROMPT in zsh](http://superuser.com/questions/974908/multiline-rprompt-in-zsh)
- [水平線を引く](http://qiita.com/k_ui/items/d1505c26f6d16b0721d5)
webpack+pug+riotの組み合わせ

# webpackとpugとriotで作ってみる。

テスト？何それ！状態ですが。

## フォルダ構成

```
+src/
  +js/
    +index.js        # エントリポイント
    +index.html.pug  # エントリポイントに対応するindex.htmlに変換されるpug
    +app.tag.pug     # pugで書いた、riotのタグ
+publish/
  +index.html      # 生成されたhtml
  +js/index.js     # riotのtagやら一式のjs
```

## npm run xxx

- clean :  clean output directory
- dev : 開発用(watch + server)
- rebuild : clean + build
- build : ビルドする。
- server : browsersyncでサーバを起動する。(http://localhost:3000)

詳細は、https://github.com/uk-taniyama/webpack-pug-riot-project-test。

## webpack.config.jsのポイント

### loaderの指定が、文字列じゃないといけないとこがあったり謎。

常に文字列でもいいけど、複雑なのだと大変なので、webpack-stringify-loadersで文字列に変換させる。

### webpack-stringify-loadersがStringまたは、Array。

Objectも大丈夫にパッチを作ってpull-requestをしてみた。
現状、Object->[Object]で渡している。
でも、あまり意識しないように、 webpack-stringify-loadersをかますので、Objectでもいいじゃんと思う。

### pugの結果をriotjsに渡すには、pretty=true,export=false。

prettyがないと、構文が解析できない。
export=falseでhtmlがそのままわたるようにする。

### pug-html-loaderのpluginにpug-plugin-no-yieldを指定。

pugのキーワード「yield」を無視して、riotにわたるようにする。
＃でも、「yield.」を使えばいいので、別にいらない。
＃作った後で動作確認していたら、気づいた......

## おまけ

- いろいろあったけど、ようやく遊べるようになった......まだ、sassとかtestとかあるけど、その辺はたぶんはまらない。
macOSのインストールメディアを作る


ShellScriptの練習も兼ねて。
参考:[Mac OS X で起動可能なインストールディスクを作成する方法 | R WannaBeAdored](http://beadored.com/mac-os-x-installation-disk/)

```shellscript:createInstallmedia.sh
#!/bin/sh
export INSTALLER_NAME='Install macOS Sierra.app'
echo input target volume...
read vol
export TARGET_VOLUME=${vol}

# TODO 勝手にOSイメージを検知できるようにするとうれしいよね
sudo "/Applications/${INSTALLER_NAME}/Contents/Resources/createinstallmedia" --volume "/Volumes/${TARGET_VOLUME}"

echo press any key...
read wait
exit
```

あらかじめフォーマットしたUSBディスクなり突っ込んでボリューム名を入力してください。
末尾にexitコマンド入れれば勝手に閉じるはず。
個人的には成否を確認したいので最後に`read`入れて止めてます。
macOSのパッケージ仕様が変わったら使えなくなるので注意。

2019/10/18 追記
Mojaveからオプション: applicationpathが非推奨となっていたので削除しました。([参考](https://applech2.com/archives/20180621-how-to-make-macos-10-14-mojave-bootable-installer.html))
【Android】Webviewのデバッグ(OS4.4〜) + Web Storage有効化

ある動画配信サービスを利用した、動画再生ページをWebviewで、
再生できない問題にぶつかりました。。

どうしてだろう・・・と途方にくれたので、Webviewをデバッグして原因を探りました。

# 1. Webviewのデバッグ方法

### 1. 下記コードをApplicationクラスかWebviewを使用するクラスに埋め込む

```
//デバッグビルド時
if(BuildConfig.DEBUG){
　　　　//Android OS 4.4以上の端末なら
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    //Google Chromeのウェブインスペクタを有効化する
    WebView.setWebContentsDebuggingEnabled(true);
  }
}
```

### 2. USBケーブルでAndroidとPCを接続して、Chromeを起動する

### 3. アプリケーションを起動し、Webviewを開く

### 4. アドレスバーに、`chrome://inspect/#devices`を入力して、開く

### 5. 画面に、Webview一覧が表示されるので、inspectを押下する


以降、端末を操作するか、ブラウザに表示された端末を操作することで、
デバッグツールと同様の表示することができました。

# 2. Web Storageの有効化

動画が再生されない原因は、Web Storageが有効化されていなかったことでした。

### 1. WebsSettingsインスタンスを取得する

```
WebSetting webSettings = mWebview.getSettings();
```

### 2. WebviewのJavaScriptを有効化する

```
webSettings.setJavaScriptEnabled(true);
```

### ３. WebviewのWeb Storageを有効化する

```
webSettings.setDomStorageEnabled(true);
```

ひとつひとつ細かく設定できるようになっているのは良いことですね。
Webviewのデバッグもできるのも良いですね〜。

ただ、ネイティブAndroidエンジニアとして、あまりWebviewは使いたく(ry
Less.jsの透明度を変更する関数を比較

Less.jsの透明度を変更する関数について、違いがわからなかったので整理。

## 公式リファレンス

1. **fadein** http://lesscss.org/functions/#color-operations-fadein
1. **fadeout** http://lesscss.org/functions/#color-operations-fadeout
1. **fade** http://lesscss.org/functions/#color-operations-fade

## 概要

以下のような色の透明度を変更してみました。

```css
@color: rgba(66, 173, 255, 0.5);
```
![base.png](https://qiita-image-store.s3.amazonaws.com/0/41088/56f30479-716b-87f7-026b-752d9cfbfe5c.png)


## 1.fadein

数字を上げると透明度が**下がる**。

![fadein.png](https://qiita-image-store.s3.amazonaws.com/0/41088/4a24fb87-098e-1ae5-3ae5-7b6119e7ba39.png)

もともとの数値"0.5"から減算。色が濃くなる。
なので、透明度を指定していない色はfadeinさせても**透明度は変わらない**。

## 2.fadeout

数字を上げると透明度も**上がる**。
![fadeout.png](https://qiita-image-store.s3.amazonaws.com/0/41088/c307994d-dfd0-8ad3-7f50-10c55cc59a79.png)

もともとの数値"0.5"に数字を加算するので透明に近づく。

## 3.fade

透明度を指定した数字で**置き換える**。
![fade.png](https://qiita-image-store.s3.amazonaws.com/0/41088/481ab9ac-7aaf-5d7f-3890-9880e06af109.png)

もともとの数値"0.5"は無視される。
amazon dashをIoTボタンとして使う(Windows VirtualBox)


2016年12月、何をトチ狂ったか amazon dash ボタンを大人買いしてしまいました。

![amazon_dash.JPG](https://qiita-image-store.s3.amazonaws.com/0/90217/d8e55d6f-ecb4-b39f-0341-97137f10dddd.jpeg)

さすがに年内にはなんとかしたい……ということで。

「やってみた」でメジャーなサイトが2つあったんですが、私のような中途半端な素人には苦労が多い感じでした。ので、まとめてみます。

用意するもの：
- Windows 10マシン
- VirtualBox
- その中にCentOS6のVM
- amazon dash
- 無線LAN環境

# VMが反応するようにする
CentOS6のVMが反応するように、LANをブリッジアダプタにします。

# dash-buttonモジュールをインストールする

npmをインストールしてみたら、バージョンが大変なことに。

```bash
[root@localhost ~]# cat /etc/redhat-release
CentOS release 6.8 (Final)
[root@localhost ~]# node --version
v0.10.46
[root@localhost ~]# npm --version
1.3.6
```

dash-buttonをインストールするには、npm6以上が必要なのに、なんだこのバージョンの差は……

```bash
# npm install -g n
# n latest
# npm update -g npm
```

http://qiita.com/zoeponta/items/a2e109304729ffa23d81 を参考に
```
[root@localhost ~]# gcc --version
gcc (GCC) 4.4.7 20120313 (Red Hat 4.4.7-17)
　↓
gcc (GCC) 4.8.2 20140120 (Red Hat 4.8.2-15)
```
バージョンを上げました。
> yum install -y libpcap-devel


> npm install --save dash-button

# Chatworkでメッセージを投稿

requestパッケージをインストールします。

> npm install request

```js
const DashButton = require("dash-button");

const PHY_ADDR = "aa:bb:cc:dd:ee:ff";

let button = new DashButton(PHY_ADDR);

console.log("I'm listening'")
let i = 0;

function report() {
  console.log("["+(i++)+"] It works.");
}

function cw() {
  var request = require('request');
  var room_id = '**room_id**';
  var message = 'ボタンが押されました';

  var options = {
      url: 'https://api.chatwork.com/v1/rooms/'+room_id+'/messages',
      headers: {
          'X-ChatWorkToken': '**token**'
      },

      form: { body: message },
      json: true
  };
  request.post(options, function (error, response, body) {
    if (!error && response.statusCode == 200) {
       console.log(body);
    }else{
       console.log('error: '+ response.statusCode);
    }
  });
}

/*
  以下が発火するイベントの指定部。
*/
button.addListener(() => {
  cw();
});

```

上記をapp.jsで保存し、起動して待受状態にする。

> node app.js

ボタンを押すと、しばらくしてChatworkにメッセージが表示される。

無事成功。

参考：
・テストスクリプトまでを参考にさせていただきました
http://qiita.com/takustaqu/items/8539b33780c9675c8657
・npm4以上に上がってから、さらに上げるときに参考にさせていただきました
http://parashuto.com/rriver/tools/updating-node-js-and-npm
・g++ 4.8 に上げるときに参考にさせていただきました
http://qiita.com/zoeponta/items/a2e109304729ffa23d81
・jsでChatworkメッセージの投稿をするのに参考にさせていただきました
https://liginc.co.jp/web/programming/node-js/123719
NNまわり個人的まとめ

自分に要るものだけ わかるひとだけわかる

# 形と目的

* AE : 複数の入力**個体**の情報を圧縮して記憶できる技術。
    * ボンキュッボン x-z-x' 形式のネット、 $(x-x')^2$ を最小化。
    * **欠点** 入力にないデータ点で何が出てきても知らない

* VAE : AEで、zの分布を素性の良い分布に加工する技術。
    * **個体**(点)+**分布**(曲面)を覚える。
    * 理にかなった分布を使えば、入力にない自然な派生画像を生成できる(→"生成モデル")。
    * **欠点** 
        * 対象の分布は素性の良い分布(e.g. 正規分布)に限られる and
        * 実装するために hand-written reparametrization が必要
            * 本質ではない (例:元論文でmeanとsigmaに分けるのは正規分布の都合上)

* GAN : あるネットGの出力を特定の非自明な分布に沿わせるための技術
    * ゴチャい分布でもok
    * **欠点** 遅い、システムがゴチャい
    * DとGの訓練バランスがムズイ(DをGのk倍訓練するなど)

```
(入力)----<加工したいNN G>----(出力) こんなネットがあったとする

今のところ (出力) はやりたい放題な値になっている
このネットワークの(出力)をある [わけわからん分布] に沿わせたい このとき

1. <Discriminator NN D> 
2. ([わけわからん分布]からランダムサンプル出来る生成器)

を使って01判定をおこなう。

Step A. まず

       ((生成器) concat (出力))----<D>----(判定結果)

    上を判定結果が (111..111 000..000) になるよう学習する。 (loss: binary crossentropy)
    11... は(生成器)のデータを1と判定しており、00... は(出力)のデータを0と判定している。


Step B. 次に Discriminator NN D の重みを固定して(学習をオフ)

       (入力)----<G>----(出力)----<D[固定]>----(判定結果)

    (判定結果) を (111..111) になるようGだけ学習する。
    こうするとStep Aの結果が完璧*でなくなるので、Step Aをまた実行する

Step A,Bを繰り返すといろいろあって (出力) の分布が (生成器) の分布と同じになる。
論文ではゴチャい数式が出てくるが E[log D(z)] + E[ log (1-D(G(x))) ] ていうのは
crossentropy の式を binary (01) の項に書き下したら 色々項が消えてそうなっただけ。

* 実際は完璧でなくて良い
```

イメージとしてはダイヤフラムポンプですね。Discriminatorでエラー情報を蓄積して、
こんどはDiscriminatorを固定してGeneratorに修正情報を詰め込む感じ。通じる?

![ダイヤフラムポンプ](https://upload.wikimedia.org/wikipedia/commons/c/c5/Membraanpomp.svg)


* AAE : VAE+GAN.
    * hand-written reparametrization のかわりにGANを使う
    * ふつうのVAEと違い、GANのおかげでゴチャい分布でもok 論文では swiss roll
    * **欠点** GANよりムズイ

```
---①-->
x-->z-->x'
　↘　 \
 ②↘→  +--->d [0,1]
        ⇕ 重みは共有
 n----+--->d [0,1]
ノイズ 
  ---③--->

①, ②+③(x-z固定), ②(z-d固定) を繰り返す
```