OmniAICreator/Qiita-1.07M huggingface dataset:
Observable（JavaScript版Jupyterみたいなやつ）を使ってみた

[d3](https://d3js.org/)の開発者であるMike Bostockが[Observable](https://beta.observablehq.com/)というウェブサービスを開発中であるらしい。現時点ではベータ版が利用可能である。
早速Observableを使ってみた。

* [日本における県毎の人口推移を可視化](https://beta.observablehq.com/@suzuito/japanese-population-per-prefecture)

# 感想

[Introduction](https://beta.observablehq.com/collection/introduction)を一通りやれば使えるようになります。学習はとても簡単。

ご存知の通り、インターフェースはPythonのJupyterに似ている。
しかしながら、このウェブサービスは何に分類されるのだろうか？と考えたとき、データサイエンティスト関連のツールというよりはむしろ、JS FiddleやCode Penのようなオンラインコードエディタに分類されるのではないだろうか。

オンラインで良い感じにJavaScriptが動かせる、かつ、MarkdownやHTMLを用いて文章を埋め込むことができる。
つまり、データサイエンティスト向けのツールというよりは、データジャーナリズム向けのツールなのである。
Mike Bostock氏自身、データを用いたジャーナリスト的な活動をしている。

このツール、データサイエンティスト向けのツールと思って利用した場合、結構苦労すると思う。なぜなら、うまい具合に統計値を計算してくれる関数が無いからである。さらに、分析結果を可視化するときでさえ、独自で可視化用ライブラリを探してくる必要がある。基本的に、全て自分で用意する、或いは、サードパーティのライブラリを利用する必要がある。

ちなみに、d3の利用が必須かどうか？というと必須では無い。

ちょっと軽くデータ可視化して、世の中に言いたいことがある！みたいな場合に使えるのかな・・・。データジャーナリズム的な感じで・・・ね。
【Vue】v-onで複数の関数を呼び出す方法

### イベントハンドラ

- メソッドイベントハンドラ

その名の通り `v-on` は呼び出したいメソッドの名前を指定する

```vue
<div @click="method"></div>
```

- インラインメソッドハンドラ

メソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定する

```vue
<div @click="method('Hello')"></div>
```

```javascript
var vm = new Vue({
  // ・・・
  methods: {
    method: function (message) {
      alert(message)
    }
  }
})
```

### 単一の`v-on`イベントで複数の関数を呼び出す方法

#### 単一の関数を分割して呼び出し

```vue
<div @click="firstMethod(); secondMethod()"></div>
```
```javascript
var vm = new Vue({
  // ・・・
  methods: {
    firstMethod: function () {
      // ・・・
    }
    secondMethod: function () {
      // ・・・
    }
  }
})
```

#### 複数の関数を実行するラッパー関数を実行

```vue
<div @click="multipleHandler()"></div>
```

```javascript
var vm = new Vue({
  // ・・・
  methods: {
    multipleHandler: function () {
      this.firstMethod()
      this.secondMethod()
    }
    firstMethod: function () {
      // ・・・
    }
    secondMethod: function () {
      // ・・・
    }
  }
})
```

### まとめ

>多くのイベントハンドラのロジックはより複雑になっていくので、v-on 属性の値に JavaScript 式を記述し続けるのは現実的ではありません。

ドキュメントにあるように、複数の処理を行う必要がある場合は、
両方を含むラッパー（複合関数）を実行する方が良いかもしれません😷

メソッドイベントハンドラのロジックとして単一の関数呼び出しのみを行う方が、Vue的にはベストプラクティスなのでしょうか？😪


### 参考
https://stackoverflow.com/questions/38744932/how-to-call-multiple-function-with-v-onclick
MacのTerminalからFTPが叩けなかった話

# はじまり

ホームページのアクセスを解析するために、Google Analyticsを導入。（よくある話）
ホームページリリース前からちゃんと動いていたんだけれど・・・

ある日、週間レポートを受け取って見てみると・・・閲覧ユーザー激減。
いくら何でもおかしいだろうと考えてみたら、WordPressのテーマを何の気なしに更新していたことを思い出した。

つまり・・・こういうこと。

1. WordPressのテーマを更新した
2. header.phpが新しいものに置き換わった（書き換えられた）
3. Google Analyticsのグローバルサイトタグが消えてしまった
4. アクセス解析できなくなった

まぁ、よくある話。（だと思いたい）


# WordPressの「テーマの編集」がうまくいかない

対応は、header.phpにグローバルサイトタグを埋め込むだけなので、そんな大した話では無い。
なので、WordPress管理画面 -> 外観 -> テーマの編集 -> テーマファイル -> テーマヘッダー（header.php）を開いて、ブラウザ上でチョチョイと編集して、「ファイルを更新」して、はい終了。

・・・とはいかなかった。

「ファイルの更新」を押すと更新が失敗し、ファイルが上書きされない。
何度やっても結果は同じ。
仕方がないので、header.phpをダウンロードして、編集した後、アップロードすることにした。


# MacのTerminalでFTPが叩けない

MacのTerminalを開いて、FTPを叩くと・・・

```
-bash: FTP: command not found
```

調べてみると、MacのTerminalはHigh SierraからFTPが廃止されたみたいですね。
ショックですがSFTPはサポートされているみたいなので、SFTPを叩く。

・・・WordPressを乗せているStarServerがSFTPに対応していないようです。

ちょっと焦る。


# WindowsのcmdでFTPを叩く

仕方がないので、WindowsからFTPを叩きました。
こっちは半年くらい前に実績ありなので問題なし。

数日後確認したところ、無事にアクセス解析できていることを確認できました。
オレンジの枠が囲んである期間が、グローバルサイトタグが消えていた期間ですね。

![Analyticsが働いていなかったとき](https://lh3.googleusercontent.com/GA4Ofb_SV4ccxzQBYx-5jg64NpHtCKVG0zMYt1STMtg2TkWbJD4JJgpvX-cVsb_Doi882XikGYEIEMMzDmHA1NtKrjNmFN_3Ga6c8iUPGxBm9EWIKb6io2thNbhIWhUQq-WxvXExlO-tVpanjNURhPOj2tsQUzXWuAWGhs61JK1PqqHLUYAYIGppQ_5BudGkaPU4L_FmNKZOkOT0GV3U19SMkmozN_JLtYf7Xtsps8AU4RMLQb_FYMiukhiS8kIjSXHHXOgittd9TY9PObT2WtS11w46iAfsgDLC3uvZt4opbcMwrdn5opVR1PDl0nyoAwX9CtDyeKHXyof_rWsNA5MrwAvyoXEp0la7wrui7fIT76VQct73Zb9tZN9A9pnl_2r9CPtoNuYgizbypjr4eDfKqxxzY_RMAIt7temcElir388Eg99kOqbUhuq5qbOMW7p1-0nAXEIBZd-UWiNoaMzHFlbm1TZ5gz6_Rsp06txx-VgABJtjybuxj-Gr9IK1Aw6c3hFJdweUiTiidZh_kglfrECBy6ctJoRfXiDdaFMc3sko1FcAMaVx89F_c4PGbr0hBBOLsCE-VHEikWkMlTSx9sQh8AV8YKZNP_L1Frp96JzjBcDmJw-7wyYEL0hveksQJG6Z6ki-7amr4MDG3Jj6tBVGfd4g=w997-h670-no "Analyticsが働いていなかったとき")


# アクセスの解析について + α

いちいちサイトまでアクセスの状況を見に行くのは面倒なので、以下の方式を採っています。

- [Statsbot](https://statsbot.co)で毎週月曜日に前週の情報を[Slack](https://slack.com/intl/ja-jp)に連携
- Google Analyticsでカスタムレポートを作成し、月初にメール

Statsbotは便利ですね。
月曜日に一週間を見返すことで、先週どういう投稿をしたからアクセス数が伸びたのか、とか色々考えられるので。

[Slack](https://slack.com/intl/ja-jp)は結構スタンダードだと思っているんだけれど、周りで使っている人があまり居ない。
会社でもIT関係なのに「知らない」っていう人も多いし。（いいのか、それで）
私は一人ワークスペースとか作ったりして、複数のワークスペースを切り替えて使っています。
情報集約できるし、共有早いし、使いやすいし、使わないのが勿体無い。


# 参考

- [MacのターミナルでFTPが廃止、High SierraからはSFTPで。](http://mac-iphone-ipad.com/899)
Visual Studio Code の統合ターミナルと Git を Windows Subsystem for Linux のものに指定する

# 概要

Windows 10 環境において、Visual Studio Code の統合ターミナルを WSL (Windows Subsystem for Linux) の Bash を使うようにし、Git も WSL 上にインストールされた Git を使うようにするための設定方法です。

# 方法

## 手順

1. WSL（今回は Ubuntu）をインストールします。
2. [WSLGit](https://github.com/andy-5/wslgit) の releases ページから最新バージョンの `wslgit.exe` をダウンロードします。
3. Visual Studio Code の設定ファイルに以下の内容を記述します（ユーザー設定・ワークスペースの設定のどちらか）。
4. Visual Studio Code を再起動して完了です。

```json
{
    "git.path": "C:\\path\\to\\wslgit.exe",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\bash.exe",
    "terminal.integrated.shellArgs.windows": [
        "~",
        "--login"
    ]
}
```

## 設定項目について

### `git.path`

`wslgit.exe` のパスを指定します。

### `terminal.integrated.shell.windows`

統合ターミナルに何を使うかを指定します。

今回は WSL 上の Bash を使うために `bash.exe` を指定します。

### `terminal.integrated.shellArgs.windows`

ターミナルを起動するときの引数を配列で指定します。

- `~`: ターミナル起動時にホームディレクトリを開きます。
- `--login`: ターミナル起動時に`~/.bash_profile` と `~/.bashrc` を読み込みます。

以上です。おつかれさまでした。
Javascriptを記述する場所

#Javascriptってどこに書くの？
書く場所は以下の２つあります。

##①HTML内部に埋め込む
HTML内の***scriptタグ***内に記述する方法。
この方法は、タグに一つとしてHTML内に埋め込んで記述します。
HTMLを記述するのと同じ感覚で、JavaScriptも記述します。

```html
<script>
 //ここに記述するコード
</script>
```


##②ファイルに記述して読み込む
画面を構成するHTMLと何らかの処理をするJavaScriptでは、目的が違います。
このため、両者は分離して管理することもできます。

その場合は、JavaScriptを記述したファイルをHTMLのscriptタグで呼び出します。
HTMLには呼び出しの部分だけを記述します。
Javascriptのメンテナンスが容易なため、***実際システム開発でよく使われる方法***です。

```html
<script src="ファイル名"></script>
```

基本的に後者の***ファイルに記述して読み込む***パターンを意識しましょう。

***呼び出し方として以下のように「javascript_include_tag」を使った書き方もあります。***

```erb
<%= javascript_include_tag "hoge.js" %>
```
Amazon Echoから家電を制御 0 ~RMmini3 + python-broadlinkで学習~

# リモコンを学習
[以前の投稿](https://qiita.com/tstkkmd/items/2c6dfde68ebbc90b0bb1)と重複しますが、

```bash
$ ./broadlink_cli --device @ROOM.device --learnfile ファイル名
```

必要なボタンの学習をします。
使わないだろうボタンは、この先も使わないと思います。

```bash
$ ./broadlink_cli --device @ROOM.device —send @(さっき学習させた)ファイル名
```

で送信テストをしてみます。
正常に送出できたら、長いのでシェルスクリプトを作ります。

```bash
$ cd
$ vi room.sh
```

に

```
#!/bin/sh
cd /home/hoge/python-broadlink/cli
./broadlink_cli --device @ROOM.device --send @$1
```

を書いて、保存して終了。

```bash
$ ./room.sh ファイル名
```


# RMmini3+python-broadlinkで学習させたファイルたち
`~/python-broadlink/`の下に`./AIRCON`、`./LIGHT`、`./TV`の各ディレクトリに学習させて出来上がったファイルを家電毎に置いています。
学習させた時点では人間が判別しやすいように、ローマ字表記でファイルを作成していますが、switchノードとmsg.payloadで扱いやすいように数字のファイル名でシンボリックリンクを作成しました。いや、プロパティの扱いがよくわかんないだけなんですけどね。

alexaに「alexa、テレビを92にして」と言うと、HDMI2に切り替えてくれます。
もちろん、「alexa、テレビを6にして」と言うとTBSがみれます。
シーリングライトに至っては、「alexa、シーリングライトを10にして」と言うと常夜灯を点灯します。もはや意味がわかりません。


```bash
~/python-broadlink/cli/
├── AIRCON
│   ├── 22 -> cool22
│   ├── 25 -> warm25
│   ├── auto
│   ├── cool22
│   ├── off -> stop
│   ├── on -> auto
│   ├── stop
│   └── warm25
├── LIGHT
│   ├── 10 -> LIGHT.night
│   ├── 100 -> LIGHT.full
│   ├── LIGHT.full
│   ├── LIGHT.night
│   ├── LIGHT.off
│   ├── LIGHT.on
│   ├── off -> LIGHT.off
│   └── on -> LIGHT.on
├── ROOM.device
├── TV
│   ├── CH
│   │   ├── 1
│   │   ├── 10
│   │   ├── 11
│   │   ├── 12
│   │   ├── 2
│   │   ├── 20 -> ../twinview
│   │   ├── 3
│   │   ├── 4
│   │   ├── 5
│   │   ├── 6
│   │   ├── 7
│   │   ├── 8
│   │   ├── 9
│   │   ├── 90 -> ../chidegi
│   │   ├── 91 -> ../hdmi1
│   │   ├── 92 -> ../hdmi2
│   │   ├── 99 -> ../epg
│   │   ├── down
│   │   └── up
│   ├── back
│   ├── bs
│   ├── chidegi
│   ├── data
│   ├── epg
│   ├── hdmi1
│   ├── hdmi2
│   ├── input
│   ├── mute
│   ├── off -> poweroff
│   ├── ok
│   ├── on -> poweron
│   ├── power
│   ├── poweroff
│   ├── poweron
│   ├── rec
│   ├── tvsleep
│   ├── twinview
│   ├── v1down
│   ├── v1up
│   ├── voldown
│   └── volup
├── air.sh
├── broadlink_cli
├── broadlink_discovery
├── ch.sh
├── light.sh
├── room.sh
└── tv.sh
```

`air.sh`も`ch.sh`も`light.sh`も`tv.sh`も中身は一緒です。
全部`room.sh`と同じで、シェルスクリプトに渡す変数の前にディレクトリ名を入れてあるだけです。ものぐさなので可能な限りタイプする文字数を減らすためです。

```bash:tv.sh
#!/bin/bash
cd /home/hoge/python-broadlink/cli
./broadlink_cli --device @ROOM.device --send @TV/$1
```

こんな感じに。


# Amazon Echoで遊ぼう
### 前提環境
[大凡1.5ｈで構築するraspberry pi + node-red + samba](https://qiita.com/tstkkmd/items/2c6dfde68ebbc90b0bb1)
### Amazon Echoから家電を制御シリーズ
[Amazon Echoから家電を制御 0 ~RMmini3 + python-broadlinkで学習~](https://qiita.com/tstkkmd/items/71db748dc75127a84fe8)
[Amazon Echoから家電を制御 1 ~node-red-contrib-alexa-local~](https://qiita.com/tstkkmd/items/10fb586be83de96bfe24)
[Amazon Echoから家電を制御 1.25 ~node-red-contrib-alexa-localの日本語の情報が少ないのでもう少し調べてみる~](https://qiita.com/tstkkmd/items/6884e38dd6a4f9965e42)
[Amazon Echoから家電を制御 2 ~テレビを我が手中に収めてやった 基本操作編~](https://qiita.com/tstkkmd/items/75771caeac9f00f3b668)
[Amazon Echoから家電を制御 3 ~テレビを我が手中に収めてやった ch操作編~](https://qiita.com/tstkkmd/items/a8c7a5ab001d6e299366)
[node-red-dashboardでwebリモコンを作ってみた](https://qiita.com/tstkkmd/items/5d205c8aacf32b9e3ecf)
Ransackを使って検索機能の実装


Ransack使ってみるかーってことでWebで情報収集しつつ書いていきます。
リアルタイムで更新していきます


##1.gemの追加

```gemfile
gem 'ransack'
```
bundle install実行
Ransackを使う準備OK

##2.コントローラーとモデルを作って動作確認

適当にProductモデルとコントローラーを作成して
@searchにProductのデータを検索するよーという命令を入れ込んで
@productsに検索結果を出すよーという命令を代入

```products_controller
  def index
    #検索オブジェクト
    @search = Product.ransack(params[:q])

    #検索結果
    @products = @search.result
  end
```

Ransackを使う場合は結構、コントローラーはこんな感じの記述になるみたいなので、これがデフォルトってイメージで良さそう。

##3.ビューを作っていく

ビューでどれだけ上手く作るかがポイントになる
yukicon-196 行列のできるフィボナッチ数列道場 (2)

[問題URL](https://yukicoder.me/problems/no/720)

この問題文中の数列 $F_i$ はその定義よりフィボナッチ数列です。
フィボナッチ数列の $k$ 項を求めるには次の有名な方法があります。
　$A = \begin{pmatrix} 1 &amp; 1 \\\ 1 &amp; 0 \end{pmatrix}$ とおいたとき、 $F_k = $ 行列 $A^k$ の左下の数
よって、この問題で求めるものは
　$\biggl(\displaystyle \sum_{i=1}^nA^{im}\biggr)$ の左下の数
となります。ここで、
　$S_k = \displaystyle \sum_{i=1}^kA^{im}$
とおきます。この問題で求めるものは $S_n$ の左下の数ですが、これを普通に求めると $O(n)$ かかってしまいます。
この $S_k$ に関して次の式が成り立ちます。
　$S_0 = \begin{pmatrix} 0 &amp; 0 \\\ 0 &amp; 0 \end{pmatrix}$
　$S_{2k + 1} = S_{2k} + A^{(2k + 1)m}$
　$S_{2k} = S_k + S_k \times A^{km}$
これらから、$S_n$ は繰り返し二乗法を使うことで高速に求められることがわかります。
$A^k$ を求めるのは繰り返し二乗法を使うことで $O(\log k)$ で計算できるので、 $S_n$ を求めるのにかかる時間は $O(\log^2n\times\log m)$ となります。

[ソースコード](https://yukicoder.me/submissions/275280)
Qiita(26)最近反応遅くないですか

最近、自分のPCのハードディスクの空き容量が減ってきた（空き容量40GB)ためか、ブラウザの反応が遅いことがある。

使用している機材は６台(１台以外の他の機材の詳細は後日)
1 macOS High Sierra 10.13.6, 2.6G intel Core i5, 16GB, 空き容量40GB, Safari
2 mac OS 10.12, 16GB, 空き容量200GB, Safari 11.1.2
3 Windows 7
4 Windows 7
5 Debian
6 Raspbian

最近、反応が遅いのがQiita。

20180731追記
この記事を読もうとしたり、編集しようとすると、保守中という記事がでるようになった。

現象を記録する。

「投稿」などQiitaの画面内で、画面が切り替わる操作をしても、次の画面になかなか移行しない。

結局あきらめて、ブラウザで別のタグを開いても、同じ状態のことがある。

接続はして表示ははじめるが、文字を表示して図が遅れることがある。

# 原因
## 1 ハードディスクの空き容量
ハードディスクの空き容量が少なくなると、いつもより多めにアプリを起動していると、PCの動作そのものが遅くなる。ブラウザによっては、的面。

## 2 アプリを起動しすぎ
２年くらい前には、chromeが、メモリを食い過ぎて、使うのをSafariに変えた。

アクティビティモニタで10分ほど確認したところ
システム 2%-10%
ユーザ 4% -15%
アイドル状態 80% - 92%

### 2.1 メモリが小さい
DebianとRaspbianをうごかしている機材はメモリが少ない。

## 3 通信が滞っている
### 3.1 gateway
仕事場ではgatewayの設定が変わるたびに、どこかへ接続する処理が遅くなる。
### 3.2 回線
この間、携帯電話で利用容量越えで、ほとんど繋がらなくなったことがある。回線の種類によって、上りが遅かったり、下りが遅かったりする。
また、同じ回線利用者が、大量の動画をダウンロードしていたり、テレビ会議をしていると、的面。
### 3.3 ネットの設定
複数経路を選択できる状況であったり、USB接続、無線接続など選べれる状態で、自動判定機能がないと、遅い方を選択したままになっている。
### 3.4 Qiita側付近
googleで設定誤りで通信が滞ったことがあるように、Qiita側に近い方のネットで、通信が渋滞していると、反応が遅くなる。
# Qiitaの処理
Qiitaの利用者、データ量はどんどん増えていることが推測できる。amazonでもしばしばあったが、ある容量をこえると、急に反応が遅くなることがあった。PCの増設や、システムの設定変更、ソフトウェアのバージョンアップなどの処理中は、遅くなることがあった。

Qiitaまでの経路、Qiitaの処理速度などを推定する測定は可能かもしれないが、測定行為そのものが、処理を遅らせる可能性がある。ひとまず、様子をみながら、次の策を考える。

# Wiresharkでの測定
自分がQiitaを利用している時の、自分のパケットの状況は、Wiresharkで測定できる。

機密事項が含まれているといけないので、データは晒さないが、分析してわかったことがあったら報告する。

# 別の現象
今朝、Qiitaで起きた奇異な現象を聞いてください。
https://qiita.com/kaizen_nagoya/items/23a85a1f90827df56325

Qiita(0)Qiita関連記事一覧（自分）
https://qiita.com/kaizen_nagoya/items/58db5fbf036b28e9dfa6

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.
# 文書履歴
ver. 0.10 初稿 20180730
ver. 0.11 保守中追記 20180801
ver. 0.12 「今朝、Qiitaで起きた奇異な現象を聞いてください。」URL追記　201808010　
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
【2018年7月版】Scala on PlayFrameworkをHerokuで動かすまで


久々にPlayプロジェクトをHerokuにデプロイしようとしたらハマったので、
2018年時点でのデプロイ方法をまとめておきます。

```
# Playプロジェクト作成
sbt new playframework/play-scala-seed.g8
# play-miscという名前で作成した
cd play-misc
sbt run
```

下記URLにアクセスして動作確認。

http://localhost:9000

Git管理しておきましょう。

```
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git init
git add .
git commit -m "init"
```

Herokuで動かすためにAPPLICATION_SECRETを設定する

```
sbt playGenerateSecret
  [info] Generated new secret: 7k9[E6（略）
heroku config:add APPLICATION_SECRET="7k9[E6（略）"
```

application.confにHostのフィルタ設定を追記

```application.conf
play.filters.hosts {
  allowed = ["."]
}
```


heroku用に下記内容のProcfileを作成してPush

```Procfile
web: target/universal/stage/bin/play-misc -Dhttp.port=${PORT} -Dplay.crypto.secret=${APPLICATION_SECRET}
```

HerokuにPush

```
git remote add origin git@github.com:your_name/your_repository.git
git push -u origin master
```

HerokuのURLにアクセスして動作確認。
【メモ】NetlifyでサクッとGithub上のAngularアプリを自動デプロイ

### **Netlify**

[Github](https://github.com)でリポジトリ管理してある[Angular](https://angular.io)アプリケーションを[Netlify](https://www.netlify.com/)によって自動デプロイするまでをメモ。

簡単にステージング環境を作成したい方や、デプロイをサクッとやりたい方向け。

[Netlify](https://www.netlify.com/)はホスティングサービス。
Web Projectsのビルドからデプロイ、管理まで色々やってくれるサービスで、Github(のほかGitLabやBitbucket)でリポジトリ管理しているのを自動デプロイしてくれたりとても便利。

## 前提

- Angularアプリを**Githubで管理済み**(最新版をcommit,remote add,push等してある状態と仮定)
- Angularは**バージョン2以降**で**angular-cli**を導入済


## Netlifyでデプロイ

1. GithubアカウントでNetlifyにsign up
 https://www.netlify.com/ のSign upからGithubアカウントでsign up（2回目以降ならSign in）


2. リポジトリ選択
  - 「New site from Git」ボタンを押す
  - Continuous DeploymentでGitHubを選択
  - デプロイしたいGithubのリポジトリを選択
    -> organizationアカウントのリポジトリが表示されない場合は[こちら](https://qiita.com/nt_tn/items/e222820cfc98d49b0f9b#github%E3%81%AEorganizations%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%AE%E5%A0%B4%E5%90%88)

3. リポジトリ設定
  - Build command: ng build --prod
  - Publish directory: dist/
  - Production branch: master
  
以上の設定をし、Deploy siteボタンを押す。package.jsonがあれば自動でinstall,buildなどが始まりデプロイされる。


これだけで簡単にデプロイ終了。
Githubのリポジトリと連携するのがとても手軽にできますね。


## Githubのorganizationsでデプロイの場合

**Githubのorganizationsアカウント**の場合、注意が必要。

##### [Github側](https://github.com)
「organization settings」の「Third-party access」タブにある
「Third-party application access policy」が「No restrictions」
になっていないと連携できない！！

**なっていない場合はそのrestrictionをremove**すると、organizationsアカウントのリポジトリも[Netlify側](https://www.netlify.com/)で表示されるようになる
【Vee-Validate】子コンポーネントのバリデーションエラーを検出する方法（依存性の注入）

公式ドキュメントの内容はこちら
[Component Injections](https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator)

### 親のバリデータスコープを注入する

各コンポーネントには**独自のバリデータスコープ**があり、
あるコンポーネントのフィールドに別のコンポーネントからのアクセスを許可しないため、
コンポーネント間でフィールドを共有してエラーを通知したり、UIの状態を表示させる必要があります。


```javascript
export default {
  inject: ['$validator'],
  // ...
}

// or

export default {
  inject: {
    $validator: '$validator'
  },
  // ...
}

```

上記により、コンポーネントは親のバリデータスコープを継承し、すべてのエラーと検証状態を共有します。
つまり、子コンポーネントが親のバリデータを使用できるので、すべてのエラーが1つの場所にあることを意味しており、
同じエラーやフィールドにもアクセスすることが可能になります😇

> If the direct parent isn't able to provide a validator scope, the API will traverse the tree upwards looking for a parent that can.

直属の親がバリデータスコープを提供できない場合は、Inject APIはツリーを上向きに移動して、提供できる親を探します。


### 自動注入を無効にする

すべての自動注入を停止して、プラグインのメモリ占有量を減らすこともできます✌️

```javascript
import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate, { inject: false })
```

上記により、プラグインはルートインスタンスを除いて、各コンポーネントインスタンスの新しいバリデータスコープをインスタンス化しなくなります。
しかし、コンポーネントがバリデータインスタンスを必要に応じて取得する方法を管理する必要が出てきます。
したがって、親からそれを注入したり、独立したバリデータスコープを要求したりと管理しなくてはいけません。


また、Inject API を使用して親バリデータを非表示にすると、自動注入状態に関係なく同じ動作するようになります。
コンポーネントは常に、バリデータスコープを提供できる最初の親からバリデータインスタンスを取得します。

### 新しいバリデータスコープのリクエスト

コンポーネントの`VeeValidate`コンストラクタオプションでバリデータプロパティを設定すると、
以下のようになります。

```javascript
export default {
  $_veeValidate: {
    validator: 'new' // 新しいバリデータスコープ
  },
  // ...
};
```

通常、コンポーネントはさまざまな理由で新しいバリデータスコープを必要とします。
新しいバリデータスコープを要求すると、コンポーネントはその子コンポーネントに対するバリデータインスタンスの唯一のプロバイダになります。


### Nuxt.jsで使用する場合の注意点

Nuxt.jsのようなSSRフレームワークでは、自動注入を無効にすることが推奨されています。
これは、すべてのコンポーネントに対して作成されるすべてのバリデータインスタンスがメモリリークを引き起こす可能性あるからです😷

### 参考
https://github.com/baianat/vee-validate/issues/677
Jquery初心者メモ

jqueryを覚える必要性が出てきたので基本的な事のメモ

##セレクタとメソット
```jquery.js

$(function(){
	$("#main").css("color", "blue")
});

```
例えばこういう記述のコードがあったとしたら、$("#main")の部分がセレクタ
一般的にセレクタには、html要素や、class,idを入れて使う。（他の場合もある）

```
> // 〜の直下
```

メソッドは.css("color","red")の部分です。



##フィルタ

文字通りフィルターをかけることができる。
例えば下記のようなフィルター要素がある

```js

:eq() #イコールという意味
:gt() #グレターザン 〜よりも大きいものをフィルタリング
:lt() #レスザン ~よりも小さいものをフィルタリング
:even #イーブン
:odd  #オッド
:containts() #中身のテキストを指定
:first 
:last
```
下記htmlを元にjqueryを書いていきます

```html
  <body>
    <p>Jqueryの学習</p>
    <ul id="main">
      <li>0</li>
      <li class="item">1</li>
      <li class="item">2</li>
      <li>
          3
          <ul id="sub">
            <li>3-0</li>
            <li>3-1</li>
            <li class="item">3-2</li>
            <li class="item">3-3</li>
            <li>3-4</li>
          </ul>
      </li>
    </ul>
```
###eq()

```
#上記htmlに対してeqを使ってみる
$(function)(){
  $("#sub > li:eq(2)").css('color', 'red');
 });
```
 これで#sub直下(>)のli要素の2番目(上から0,1,2番目)を赤色に変更という命令が実行された

###gt() と lt()

```

$(function(){
  $("#sub > li:gt(3)").css('color', 'red');
});
```
これは、#sub直下(>)のli要素に対して３番目以降は赤色に変更という命令
よって３−４が赤になる

lt()は逆に〜より小さいものをフィルタリングする。

##メソッドを使ったDOM要素の指定

###メソッドの種類
parent(), children() //parentで親要素　childrenで子要素を指定
next(), prev() //nextで要素の前を、 prevで要素の後ろを指定
siblings() - 兄弟要素

```書き方はこんな感じ
      $(function(){
        // $("#sub").children().css('color', 'red');
        $("#sub > li:eq(2)").siblings().css('color', 'red');
      });
```
Macでスクリーンキャプチャの保存先を変更する

## 概要

標準だとデスクトップに保存されるので、気がつけばデスクトップがキャプチャー画像で溢れてしまうので、どうにかしておかないととんでもないことになります。

## 手順

保存先パスはそれぞれのお好みで。

```sh
> mkdir ~/screenshots
> defaults write com.apple.screencapture location ~/screenshots/
> killall SystemUIServer
```

元に戻すときは以下

```sh
> defaults delete com.apple.screencapture location
> killall SystemUIServer
```

## 参考

Mac - スクリーンショットで撮影した画像の保存場所を変更
https://pc-karuma.net/mac-customize-screencapture-location/
例外処理　begin〜resque〜end文について

#例外処理とは
プログラムの実行にエラー（例外）はつきもの。
例外が発生すると、プログラムの実行は一時中断し、***例外処理***を探します。
***例外処理***記述されていれば、それを実行します。

Rubyにはエラー処理をサポートするための***例外***という仕組みが備わっているので、
楽にエラー処理を記述できます。


#rescue文
例外処理には***begin~resque~end***文を使用します。

```rb
begin
　例外を発生させるかもしれない処理
rescue
　例外が起きた時の処理
end
```

また、Rubyでは例外に関する情報もオブジェクトとして扱われます。
resqueに続けて変数を指定することで、例外オブジェクトを得ることができます。下記の感じ。

```rb
begin
　例外を発生させるかもしれない処理
rescue　=> e     ⇦例外オブジェクトが代入される変数（eじゃなくてもいいです。）
　例外が起きた時の処理
end
```

例外オブジェクトはメソッドを持っていて、
下記のようなものがあります。


|メソッド名|意味|
|:---|:---|
|class|例外の種類|
|message|例外のメッセージ|
|backtrace|例外の発生した位置に関する情報

下記のように書くと、例外で発生したエラー文のメッセージが出力されます。
例外オブジェクトの、メッセージを取り出している感じ。

```rb
resque =>e
 puts e.message
```
上記は```puts e.class```にすると、例外の種類が出力されます。


#必ず発生させたい処理
例外が起きても起きなくても必ず発生させたい処理を書く場合は下記のようになります。

```rb
begin
例外が発生する可能性のある処理
resque
例外が起こった場合の処理
ensure　
例外の有無に関わらず実行される処理
end
```
ensure節に書かれた処理は、begin~endで囲まれた部分から抜ける時には必ず実行されます。
工場でもRaspberry PI ＆　名古屋のIoTは名古屋のOSで

工場でRaspberry PIを利用するにあたって、セキュリティ、サイバセキュリティ対策について検討してきた。

ある展示会で、いくつかの出展者の方々と、議論した内容を整理する。

<この項は書きかけです。順次追記します。>
This article is not completed. I will add some words in order.

# １　コンパイラとOSのドライバ
「gcc, llvmが使えるからいいじゃないか」という意見がある。
その一方で、「オープンソースは素人や新人には難しいとい」という意見がある。

## オープンソースの課題

ウェブサーバは、今では圧倒的な市場占有率でオープンソースが使われている。この分野では、オープンソースの方が圧倒的に、「素人や新人に優しい」。

それに対して、クロスコンパイラや、リアルタイムOSは、利用するのにコンパイルが必要だったり、コンパイルエラー情報が少なく、「素人や新人には難しい」

両極端がある。

Linuxのコンパイルも、クロスコンパイルもdockerが登場して圧倒的に便利にはなった。残る課題は、デバイスドライバの質が揃っていない場合があること。

１５年くらい前に、ある装置のLinuxの移植の相談があった。ネットワークICが、まだLinuxで正式配布されておらず、SUSE Linuxでアルファ版が配布開始した程度だった。ICの製造元(chip vendor)との情報交換の仕組みがあれば、着手してもよかったが、知らない会社だったので、手が出せなかった。SUSE Linuxより先にいかなくてはらなず、納期までに間に合う見込みがたたないため。

コンパイラベンダが、Linux対応して、既存のデバイスドライバや、新規のデバイスドライバなどをICの製造元とかけあって、一定の質を確保してもらえれば、すごく嬉しい。Linuxをコンパイルするコンパイラも、コンパイラの試験を経た版を利用できればなおのこと嬉しい。

# 2 筐体と周辺装置
工場向けにRaspberry PIを出荷している会社と議論した。
Revolution Pi
https://github.com/RevolutionPi

10種類を汎用性または確認する順番に並べてみた

RevolutionPi/linux
https://github.com/RevolutionPi/linux
 Linux Kernel Linux 4.9.76

RevolutionPi/linux-raspberrypi
https://github.com/RevolutionPi/linux-raspberrypi
Kernel source tree for Raspberry Pi Foundation

RevolutionPi/kernelbakery
https://github.com/RevolutionPi/kernelbakery
 custom kernel packages for Revolution Pi, 

RevolutionPi/imagebakery
https://github.com/RevolutionPi/imagebakery

 Customize for Revolution Pi

raspberrypi-sys-mods
https://github.com/RevolutionPi

RevolutionPi/cryptoauth-openssl-engine
https://github.com/RevolutionPi/cryptoauth-openssl-engine
OpenSSL Engine implementation using ATECC508

RevolutionPi/piControl
https://github.com/RevolutionPi/piControl

RevPi I/O-Modules and Gateways

RevolutionPi/IODeviceExample
https://github.com/RevolutionPi/IODeviceExample
the code for a RevPi DIO module

RevolutionPi/snap7-debian
https://github.com/RevolutionPi/snap7-debian

RevolutionPi/python-snap7
https://github.com/RevolutionPi/python-snap7







https://revolution.kunbus.com/?noredirect=en_US
http://www.harting.co.jp/page_3799/page_18703/revolution-pi_18705/

# 3 セキュリティ対策
## 3.1 無線
工場によって、無線の利用を禁止していたり、安全装置だけは無線の利用を許可していたり、状況はいろいろである。その工場の無線の状況を把握して、既存の無線の妨げになったり、工場敷地外へ無線電波が漏れるような状況は好ましくない。

### 提案１
これらの確認のために、Raspberry PIを使って測定しようというのが提案の一つ。 Raspberry PIとwiresharkを使って。

# 3.2 ネットワーク
IDやパスワードの設定をせずに、ネットワークに接続するのは危険だ。ID、パスワードをよく知られたままで使っては、いつ、誰が、踏み台にするかわからない。

また、セキュリティの弱そうなソフトウェアをけずったり、よく知られたポートを閉じたりする作業も必要だろう。

## 提案2
ネットワークの監視、記録にRaspberry PIの利用を提案中。

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.


 
最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
Go言語  — go文を書かなくても goroutine は走っている


# 例

`go func` の前に goroutine の数を出力すると `1` が返る。
(既にgoroutineが走っている)


```go
package main

import "fmt"
import "runtime"
import "time"

func main() {
	// Print goroutine num
	fmt.Println(runtime.NumGoroutine()) // 1

	// run goroutine
	go func() {}()

	fmt.Println(runtime.NumGoroutine()) // 2

	time.Sleep(time.Second)
}
```

# 理解

- goroutine とは元々 main の処理にも使われているものであり、必ず1個は走っている。
- `go` 文で別の goroutine を走らせることが出来る。

ということだと思う。

# きっかけ

[A Tour of Go](https://tour.golang.org/concurrency/1) のこの文が気になって調べた。

>The evaluation of f, x, y, and z happens in the current goroutine and the execution of f happens in the new goroutine.



# 環境

- go version go1.10.3 darwin/amd64

# Gist

- [Golang | 1 goroutine always running without go func](https://gist.github.com/YumaInaura/6ff1a8e5b57c9d9d0ce95add3a9f1116)

# 参考

- [Go の並行処理 - Block Rockin’ Codes](http://jxck.hatenablog.com/entry/20130414/1365960707)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【Vee-Validate】個々のエラーだけをリセットする方法


### エラーオブジェクト （vueインスタンス内） にアクセスするには？

入力が変更されるたびに、バリデーターは検証のリストを順番に実行し、
入力内容が検証に失敗した場合エラーオブジェクトに格納します。

エラーオブジェクトには以下でアクセスできます✅

```javascript
this.$validator.errorBag
// or
this.errors
```

### エラーをリセットする方法

エラーをリセットする場合、以下のように`reset()`を呼び出します。

```javascript
this.$validator.reset()
```
※ドキュメントによると`$validator.clean（）`は推奨されていません


しかし、`$validator.reset()`は全てのフィールドがリセットされてしまいます😂
個々のフィールドだけをリセットする場合は、個々に対してエラーを取り除く必要があります。


### 個々のエラーだけをリセット

現在のところ(v2.0.0)では、個々のエラーをリセットするサポートはありません😢

回避策としてFieldクラスのインスタンスである`$validator.fields.items`をループして
対象のフィールドで`reset()`を呼び出す？😧

```javascript
this.$validator.fields.items.forEach(each => {
  if (each.el.name === '対象のフィールド') {
    each.reset()
  }
})
```

しかし、上記では`reset（）`を呼び出すと、フラグとクラスはリセットされますが、
エラーオブジェクトにあるエラー自体は取り除かれません😷💦


```javascript

const matchOptions = {
  id: any, // if you have the id, otherwise its optional
  name: string, // optional
  scope: string // optional
}

const field = this.$validator.fields.find(matchOptions)
field.reset()
this.$validator.errors.remove(field.name, field.scope)
```

エラー自体を取り除く場合、`$validator.errors.remove`を使用する必要があります✋
もっとスマートなやり方としては、上記のように対象のフィールドを検索して、
その対象フィールドに`reset()`と`errors.remove()`を実行する方法です✌️

### 参考

https://github.com/baianat/vee-validate/issues/1031



> I know its not in the docs, We will fix that with the new docs. I just pushed an enhancement for this issue, should be up with the next release soon.

今後のリリースには、この機能が追加がされるみたいですね🙏


ドキュメントはこちら
[VeeValidate](http://vee-validate.logaretm.com/)


### 参考

https://github.com/baianat/vee-validate/issues/1031
Rustで構造体とか配列をprintln!で一発で出す方法

# Rustで構造体とか配列をprintln!で一発で出す方法

##環境
rustc 1.27.1 
Zorin OS 12.3

##概要
Rustで構造体とか配列をprintln!で一発で出す方法を書きます。

### 配列を一発で出す
下の例では、初期値0でサイズ10の配列をlistに生み出し、それをprintln!で出力しようとしています。
しかし、エラーが出て動きません。

```rust
fn main(){
  let list = vec![0; 10];
  println!("{}", list);
}
```
```console:出力
エラーメッセージは省略...
```
println!の中の{ }に変更を加えることで、この問題は解決できます。

```rust

fn main(){
  let list = vec![0; 10];
  println!("{:?}", list);
}
```
```console:出力
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
```

### 構造体を一発で出す
配列で出来たのであれば、構造体でも可能なのでしょうか。
以下の例では、TestStruct構造体を作成して先ほど紹介した方法で見ようとしていますが
残念ながらエラーが出力されています。

```rust
fn main(){
  struct TestStruct {
    x: f64,
    y: f64,
    side: f64,
  };

  let t = TestStruct{x: 2.0, y:3.0, side: 5.0};
  println!("{:?}", t);
}
```
```console:出力
エラーメッセージは省略...
```

加える変更はたった一つです。
structの上に#[derive(Debug)]を付けてあげましょう。

```rust
fn main(){
  #[derive(Debug)]
  struct TestStruct {
    x: f64,
    y: f64,
    side: f64,
  };

  let t = TestStruct{x: 2.0, y:3.0, side: 5.0};
  println!("{:?}", t);
}
```
```console:出力
TestStruct { x: 2.0, y: 3.0, side: 5.0 }
```

素晴らしい！構造体の中身がストレス無く確認する事ができました！
LabVIEW 2018 PythonNodeを試す

# LabVIEW 2018から追加されたPython Nodeを試す
とりあえずWindows版を試してみた。今回はWindows7SP1 64bitで試しました。

## Pythonは別途インストール
 LabVIEW 2018から、pythonスクリプトを実行できるVI(関数)が標準に追加されているが、python そのものはついてこないので、別途、インストールする必要がある。

色々便利そうだったので、anaconda でインストールしてみたが、うまくいかなかったので、
Pythonのサイトから Windows 32bit pythonのインストーラをダウンロードしてインストールしたら、ようやく動くようになった。
インストール時にPATHに追加するチェックを忘れないように設定。
LabVIEWが32bit版を使っているので、Pythonも32bit版入れています。

LabVIEWのサンプルについてくるPython のサンプルを実行してみたところ。
![LabVIEW_python_node_example.png](https://qiita-image-store.s3.amazonaws.com/0/43526/e8017d34-b406-62da-ddf9-184661e9d1f5.png)

Python用関数パレットはこれ。３つしかない。
![LabVIEW_python_node_pallete.png](https://qiita-image-store.s3.amazonaws.com/0/43526/513e54c4-4a97-e934-4e58-9cf154678155.png)

Python Node Help
![LabVIEW_python_node_help.png](https://qiita-image-store.s3.amazonaws.com/0/43526/8a817dbf-dbee-a809-d9be-e70491d7a507.png)
Pythonノードの使い方
「モジュールパス」は、実行したいpythonスクリプトファイルの絶対パス「関数名」は、pythonスクリプトファイルに定義されたpython関数の名前入力パラメータは、配線されたデータの型に合わせて変わる。python関数の引数の型に合うものを配線してあげればよいらしい。
python関数からの戻り値があれば配線する。なければ配線しなくても実行できないエラーにならない。

ちなみに、Helpを見ると、
「Pythonノードは、Real-TimeまたはFPGAターゲットではサポートされません。」となっている。オーマイガッ。cRIO/cDAQ用のNI RT Linuxはサポートしてほしかった。
NIのcRIO用opkgリポジトリにはpython関係はそれなりに登録されているのに。。。
(PythonをインストールしてSystemExecを使って呼び出せばいいだけではあるが。。）
dockerでBundler::GemNotFoundが出るときの対処法

# 環境
* windows 10
* WSL(Windows Subsystem for Linux)
* Docker Toolbox

以下のような画像投稿アプリを勉強がてら作ったことあるんですが、Sinatraのバージョンが2.0.1で古いまま放置されていました。これを2.0.3にアップデートしようとした時にハマったのでメモがてら投稿です
[GitHub - koyo-miyamura/latestgram](https://github.com/koyo-miyamura/latestgram/)

```dockerfile:Dockerfile

FROM ruby:2.5.1

WORKDIR /app

ADD Gemfile /app/Gemfile
ADD Gemfile.lock /app/Gemfile.lock

RUN bundle install

EXPOSE 4567
```

```yaml:docker-compose
version: "3"

services:
  web:
    build: . 
    volumes: 
      - .:/app
    ports: 
      - "4567:4567"
    depends_on:
      - db
    command: bundle exec ruby myapp.rb -o 0.0.0.0
    environment:
      - "TZ=Asia/Tokyo"

  nginx:
    image: nginx:latest
    volumes: 
      - ./conf/nginx.conf:/etc/nginx/nginx.conf
      - ./public:/var/www/html
    ports:
      - "8080:8080"
    depends_on:
      - web

  db:
    build: ./sql
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "true"
      MYSQL_DATABASE: "latestgram"
      MYSQL_USER: "root"
      TZ: "Asia/Tokyo"
    volumes:
      - ./sql:/docker-entrypoint-initdb.d
    ports:
      - "3306:3306"
```


# エラー内容

`Gemfile`を書き換えて以下のコマンドを実行

```bash
sudo bundle install
docker-compose up
```

すると以下のエラーが発生しました

```bash
/usr/local/lib/ruby/gems/2.5.0/gems/bundler-1.16.1/lib/bundler/spec_set.rb:88:in `block in materialize': 
Could not find rack-protection-2.0.3 in any of the sources (Bundler::GemNotFound)
```

これ、よ～く考えると当たり前なんですが、聡明な皆さんはおわかりいただけたでしょうか・・・？（心霊特番風）

・・・
・・・
・・・

そうだね `docker-compose build` してないね！（パッション屋良風）

Dockerfileをbuildする段階で`bundle install`されているので、そりゃGemNotFoundなりますわ・・・。

# 結論
Gemfileを更新したら`docker-compose up`する必要があるか確かめよう！（そもそもDockerfileで`bundle install`しない構成もありそうですが）
simple_form の select ボックスで data 属性を設定する書き方を調べてみた

<a href="https://github.com/plataformatec/simple_form" target="_blank" rel="nofollow noopener">simple_form</a> は ```form_for``` 以下のコードをすっきりさせるのによく使われると思います。
simple_form で data 属性ありの select ボックスの書き方がぱっと調べても出てこなかったので、メモしておきます。

### 動作確認したバージョン

* rails 5.1.5
* ruby 2.4.4
* simple_form 3.5.0

### ```f.select``` で書く場合

simple_form を使わず通常の ```form_for``` で書く場合、```options_for_select``` を使ってこのような形で書けます。

```rb
= f.select :name, options_for_select([ ['田中太郎', 1, data: {age: 20}], ['鈴木一郎', 2, data: {age: 30}] ])
```

生成される option の形はこのようになります。

```html
<option data-age="20" value="1">田中太郎</option>
<option data-age="30" value="2">鈴木一郎</option>
```

### simple_formの場合

色々試行錯誤したところ、この形でOKでした。```collection: ``` に ```options_for_select``` メソッドで指定していた引数をそのまま渡せばいいだけです。

```rb
= f.input :name, as: :select, collection: [ ['田中太郎', 1, data: {age: 20}], ['鈴木一郎', 2, data: {age: 30}] ]
```

### 少しコードを追って確認

後学のため、simple_form を ```f.input :name as: :select``` のような形で使う場合、なぜ ```collection``` の引数を ```options_for_select``` の引数と同じ形にできるのか、simple_form のコードをすこし追ってみます。

まずsimple_form で ```f.input :name as: :select```　という形で select ボックスを生成する時、rails の ```ActionView::Helpers::FormOptionsHelper``` モジュールの ```collection_select``` メソッドを呼んでいます。

https://github.com/plataformatec/simple_form/blob/3a99d65b082c4422e2f761b1a01e35dee9bd69ae/lib/simple_form/inputs/collection_select_input.rb#L10-L13

このメソッドの引数の ```collection``` に ```[ ['田中太郎', 1, data: {age: 20}], ['鈴木一郎', 2, data: {age: 30}] ]``` が渡る形になります。

```collection_select``` メソッドでは、 rails の ```ActionView::Helpers::Tags::CollectionSelect``` オブジェクトの ```render``` メソッドを呼んでいます。

https://github.com/rails/rails/blob/45903be1344992b1f0156cd88c351067bdc93726/actionview/lib/action_view/helpers/form_options_helper.rb#L203-L205

```render``` メソッドでは、```ActionView::Helpers::FormOptionsHelper``` モジュールの ```options_from_collection_for_select``` メソッドを呼んでいます。

https://github.com/rails/rails/blob/45903be1344992b1f0156cd88c351067bdc93726/actionview/lib/action_view/helpers/tags/collection_select.rb#L16-L26

```options_from_collection_for_select``` メソッドでは、```ActionView::Helpers::FormOptionsHelper``` モジュールの ```options_for_select``` メソッドを呼んでいます。

https://github.com/rails/rails/blob/45903be1344992b1f0156cd88c351067bdc93726/actionview/lib/action_view/helpers/form_options_helper.rb#L400-L411

このように一通り追ってみると、simple_form からも結局 ```options_for_select``` メソッドを呼んでいるので、```options_for_select``` メソッドの引数の形で ```collection``` に指定しても動くということなのかなという理解をしました。

### 参考サイト

* <a href="https://api.rubyonrails.org/" target="_blank" rel="nofollow noopener">Ruby on Rails API</a>
* <a href="https://stackoverflow.com/questions/17554748/how-do-i-add-html-attributes-to-select-options-with-simple-form-rails" target="_blank" rel="nofollow noopener">How do I add HTML attributes to select options with Simple Form Rails? - Stack Overflow</a>
Oracle Cloud初期設定


# 概要
Oracle Cloud 初期設定
# 前提
管理機能をもったユーザでコンソールからログイン

# 手順

## Oracle Database 作成
ダッシュボード＝＞インスタンスの作成

インスタンスの作成

Database

Enterprise Edition => create

確認ダイアログでは
Downloadクリックでzipファイルを保存
(DownloadおさないとCreate押せない)

zipを展開してフォルダごとデスクトップへ移動

そのあとさきほどの"確認"ダイアログでCreate

データベースのIDらしきものクリック


IPアドレス=xxx.xxx.xxx.xxx
が確認できる

puttygenを起動。
File => Load Private Keyから
さきほど保存したzipの中の"privateKey"を開く
そのままFile => Save Private Keyで保存(Passphraseなしでいい)

このキーを使って
puttyから接続 IPはさきほど保存しあもの
ユーザはopc(パスワードなし)

## サーバ初期設定
$ strings /usr/share/zoneinfo/Asia/Tokyo
TZif2
        JCST
TZif2
JCST
JST-9
$ strings /etc/localtime
TZif2
TZif2
UTC0

$ sudo cp /etc/localtime /etc/localtime.org
$ sudo ln -sf  /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

## Webツール利用開始
アクセスルールで適当なポート通す

https://xxxx.xxx.xxx.xxx/dbaas_monitor/login
証明書の警告は無視
ログインID/PW=
dbaas_monitor/(キーをダウンロードしたときに入っているtextにあるパスワード)
google-home-notifierをsystemdで常駐させる


## 前提

| 項目     | 内容                             |
|----------|----------------------------------|
| OS       | Raspbian GNU/Linux 9.4 (stretch) |
| ホスト名 | raspberrypi.local                |
| ユーザー | pi                               |
| nvm      | 0.33.11                          |
| Node.js  | v10.6.0                          |

## Unitファイルのサンプル

```ini:/etc/systemd/system/google-home-notifier.service
[Unit]
Description=Google Home Notifier
After=syslog.target network-online.target

[Service]
Type=simple
Restart=on-failure
RestartSec=10
KillMode=control-group
Environment=NODE_VERSION=10
User=pi
WorkingDirectory=/home/pi/app/google-home-notifier
ExecStart=/home/pi/.nvm/nvm-exec node example.js

[Install]
WantedBy=multi-user.target
```

## 使用方法
有効化(enable)すると、OS起動時に起動されるようになる。

| 目的 | コマンド |
|----------------|-------------------------------------------------------|
| 有効化 | `sudo systemctl enable google-home-notifier.service` |
| 無効化 | `sudo systemctl disable google-home-notifier.service` |
| 起動 | `sudo systemctl start google-home-notifier.service` |
| 停止 | `sudo systemctl stop google-home-notifier.service` |
| 再起動 | `sudo systemctl restart google-home-notifier.service` |
| ステータス確認 | `sudo systemctl status google-home-notifier.service` |

## 補足

### `nvm-exec`
環境変数 `NODE_VERSION` を指定して、`nvm-exec` 経由で実行する。

### `KillMode=control-group`
付属の `example.js` は内部で ngrok を使用している。`KillMode=process` だと stop したときに `ngrok` のプロセスが残ってしまう。
起動されているプロセスは `sudo systemctl status google-home-notifier.service` で確認できる。
![google-home-notifier-status.png](https://qiita-image-store.s3.amazonaws.com/0/27531/fbc07479-2151-7cc4-7aa1-aabe2b446878.png)
aws ec2からoracleへの接続

# 概要
aws側からsqlplus, phpなどでoracleに接続できるようになるまで

# 前提
AWS=> Oracle Cloudへport=1521が通るように設定済

# 手順
AWSコンソールから
Oracle client入ったEC2を起動


ec2-userでこのEC2にログイン

 cd $ORACLE_HOME
 cd network/admin
 sudo vi tnsnames.ora

oracleコンソールから取得した接続文字列を

tnsnames.oraに追記
cloud =
(DESCRIPTION=
  (ADDRESS=(PROTOCOL=tcp)
      (HOST=129.154.80.216)
      (PORT=1521))
  (CONNECT_DATA=(SERVICE_NAME=PDB1.xxxxxxxxx))
)

接続確認
 sqlplus rent/rent@cloud
Juliusの最初の一歩

ちょっとわけあってJuliusをFreeBSDで試してみました。

FreeBSD 10.4Rでとりあえずgithubの[Juliusのブランチ](https://github.com/julius-speech/julius)をcloneしてconfigureしてmakeしたら、ビルドが通りません。

一つはdevnameという名前をシステムヘッダーが使うようになってエラーになるようになったことと、一つはFreeBSD用のコードでの変数名のミスでした。これらは修正して[プルリク](https://github.com/julius-speech/julius/pull/83)出しておきました。もうFreeBSDでなんか誰もビルドしてないのかもしれませんね。

あとgmakeじゃないと通らないようですが、これはプロジェクトの方針かもしれないので、素直にgmakeを使うことにします。

ビルドが通るとjulius/juliusという実行ファイルができます。

```
% ./julius/julius 
Julius rev.4.4.2.1 - based on 
JuliusLib rev.4.4.2.1 (fast)  built for x86_64-unknown-freebsd10.4

Copyright (c) 1991-2016 Kawahara Lab., Kyoto University
Copyright (c) 1997-2000 Information-technology Promotion Agency, Japan
Copyright (c) 2000-2005 Shikano Lab., Nara Institute of Science and Technology
Copyright (c) 2005-2016 Julius project team, Nagoya Institute of Technology

Try '-setting' for built-in engine configuration.
Try '-help' for run time options.
```

FreeBSD上ではデフォルトでシステムのサウンドデバイスを認識しますが、ボリュームを調子しておく必要があります。

```
% mixer mic 80:80
Setting the mixer mic from 0:0 to 80:80.
```

実際認識させるためには[dictation-kit](http://julius.osdn.jp/index.php?q=dictation-kit.html)というファイルが必要で、これもダウンロードします。これに入っている設定ファイルでjuliusを起動してみます。

```
% cd dictation-kit-v4.4
% ~/julius/julius/julius -C main.jconf -C am-gmm.jconf
```

起動するとログが流れて以下の行がでて認識を開始します。

```
<<< please speak >>>
```

micのボリュームが大きすぎてノイズのレベルが高いとこの表示がされないようなので、mixerコマンドでボリュームを下げます。

話してみます。

```
Stat: adin_freebsd: device name = /dev/dsp (application default)
STAT: AD-in thread created
pass1_best:  台風 が き ます 。
pass1_best_wordseq: 
 台風+名詞 が+助詞 き+動詞 ます+助動詞 

pass1_best_phonemeseq: silB | t a i f u: | g a | k i | m a s u | silE
pass1_best_score: -5068.315918
### Recognition: 2nd pass (RL heuristic best-first)
STAT: 00 _default: 24732 generated, 2380 pushed, 322 nodes popped in 205
sentence1:  台風 が 来 ます 。
wseq1: 
 台風+名詞 が+助詞 来+動詞 ます+助動詞 

phseq1: silB | t a i f u: | g a | k i | m a s u | silE
cmscore1: 0.504 0.486 0.768 0.125 0.795 1.000
score1: -5068.802734


```

認識できました。

認識率はあまり良くないです。背後にセミの鳴き声などが入ってしまうと認識しなくなるようです。

オーディオデバイスはたくさん持っているのですが、消費税が5%だった頃にHardOffで105円で買ってきたSkype用の電話型USBモジュールを使ってみました。このモジュールはC-MEDIAという会社のCM109というチップを使っているのですが、結構良いような気がします。客室乗務員ぽくもってテストしてみました。参考：[客室乗務員ぽく電話をもちたい - デイリーポータルZ](http://portal.nifty.com/kiji/170426199447_1.htm)

![写真（2018-07-28 15.15） #3.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/59d2a044-5aef-d854-1c40-34f40ba51f94.jpeg)

いろいろ試していて気がついたのですが、このデバイスのマイクは音声用にコンプレッサーが入っているのような気がします。Juliusを使う場合マイクの特性もかなり影響があると思われます。

なにをたくらんでいるかはないしょです。:)
SourceTree起動時に前回開いていたウィンドウが自動で開かないようにする

## やりたいこと

SourceTreeで最初にアイコンを押して起動させたときに、前回開いていたウィンドウが大量に開かれてしまって困ることがあります。それを解決する自動で開かれないようにする設定の方法です。

## 解決法

SourceTreeのPreferencesを開く
(ショートカット：<kbd>⌘</kbd> + <kbd>,</kbd>)

<img width="315" alt="Screen Shot 2018-07-28 at 9.50.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/3efd35c7-91a0-9b45-3323-5eb03b26fe5c.png">

GeneralタブのWindow restorationで、[Don't restore windows on startup]を選択する

<img width="763" alt="Screen Shot 2018-07-28 at 9.47.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/e74f0c6c-9b29-4018-3fde-3ed3018e94c2.png">

これで完了です。

## SourceTreeのバージョン

設定したときのバージョンは以下のバージョンです。

![Screen Shot 2018-07-28 at 9.54.59.png](https://qiita-image-store.s3.amazonaws.com/0/84451/1329a0d1-8468-041a-7799-fd61a85d9581.png)
TypeScript+webpackでスプレッドシートを読み込んでjsonに変換しGoogleDriveに保存する

TypeScript+webpackでGoogleSpreadSheetを読み込んで任意のGDriveフォルダに
中身をjsonで保存するやり方を紹介します。

**今回のコード -** [https://github.com/OdaDaisuke/typescript-gas](https://github.com/OdaDaisuke/typescript-gas)

## とりあえず使ってみたい人向け

```shell
$ git clone https://github.com/OdaDaisuke/typescript-gas.git &  cd typescript-gas
$ yarn
$ # /src/sample.tsにSSIDとDIR_IDを設定
$ yarn build
$ # .tsファイルの変更が監視される
$ # /dist/sample.jsをスプレッドシートのスクリプトエディタにコピペし、「run」メソッドを起動。
```

## Webpack

`awesome-typescript-loader`と[`gas-webpack-plugin`](https://github.com/fossamagna/gas-webpack-plugin#readme)を使ってTypeScriptを
GASでも動くように、よしなにトランスパイルしてます。

## メインのコード

「Sample」という名前で、行の始まりが2行目で終わりのカラムが3つまりCになっている
シートからデータを引っ張ってきています。

```sample.ts
import {
  ISheetConfig, // シート設定のインターフェース
  Sheet, // シート操作のクライアント
  SSLoader, // シートローダー
  JSONExporter // JSONエクスポーターのクライアント
} from './utils'

declare var global: {
    save(): void
}

const SSID = "任意のスプレッドシートのID"
const DIR_ID = "任意のGDriveフォルダのID"

// このconfigを使って
// getLastRow/getLastColumnと組み合わせてシートの全ての情報を取ってくることができる
namespace SheetConfigs {
    export const SampleSheet: ISheetConfig = {
        name: 'Sample', // シート名
        dataStartRow: 2, // シートの始点の行
        dataEndCol: 3, // シートの終点のカラム
    }
}

export class SSheetExporter {
    sampleSheet: Sheet;
    jsonExporter: JSONExporter

    constructor(ssId: string, dirId:string) {
        const sheet = new SSLoader().load(ssId)
        this.sampleSheet = new Sheet(sheet, SheetConfigs.SampleSheet)
        this.jsonExporter = new JSONExporter(dirId)
    }

    export() {
        const questionRows = this.sampleSheet.getCell("C3:C5")
        this.jsonExporter.export(
            "json-file", // ファイル名
            questionRows, // エクスポートするデータ(内部でjsonに変換される)
        )
    }
}

global.save = () => new SSheetExporter(SSID, DIR_ID).export()
```

## フォルダ構成

```shell
/src
  - /sample.ts
  - /utils
      - index.ts
      - json_exporter.ts # jsonエクスポーターのクライアント
      - sheet.ts # シート操作のクラス
/typings # 型定義ファイル
.gitignore
README.md
package.json
tsconfig.json
webpack.config.js # webpack.config.tsがビルドされたやつ
webpack.config.ts
yarn.lock
```

## まとめ

GASの開発ってあまり形式化しておらず開発手法の定石みたいなものがないように感じます。
ネットに落ちている記事はどれもレガシーな技術のものが多く、
モダンな感じでGASを開発するならやっぱりwebpackは外せませんよね。
今回は結構モダンなスタイルの開発手法を提案できたかなと思うので
参考にしてみてください。
Kaggle初めてみました

AIやデータサイエンスが注目を浴びているので、データ解析の技術の力を高めるためKaggle に挑戦しました。

Kaggleには初心者向けの問題がありそれがタイタニック号の生存者の問題です。
https://www.codexa.net/kaggle-titanic-beginner/
こちらのサイトを見ながら解いて見ました。


```python

import pandas as pd
import numpy as np

# scikit-learnのインポートをします
from sklearn import tree

train = pd.read_csv("all/train.csv")
test = pd.read_csv("all/test.csv")

def kesson_table(df): 
        null_val = df.isnull().sum()
        percent = 100 * df.isnull().sum()/len(df)
        kesson_table = pd.concat([null_val, percent], axis=1)
        kesson_table_ren_columns = kesson_table.rename(
        columns = {0 : '欠損数', 1 : '%'})
        return kesson_table_ren_columns
 

kesson_table(train)
kesson_table(test)

train["Age"] = train["Age"].fillna(train["Age"].median())
train["Embarked"] = train["Embarked"].fillna("S")
kesson_table(train)

train["Sex"][train["Sex"] == "male"] = 0
train["Sex"][train["Sex"] == "female"] = 1
train["Embarked"][train["Embarked"] == "S" ] = 0
train["Embarked"][train["Embarked"] == "C" ] = 1
train["Embarked"][train["Embarked"] == "Q"] = 2
train.head(10)

test["Age"] = test["Age"].fillna(test["Age"].median())
test["Sex"][test["Sex"] == "male"] = 0
test["Sex"][test["Sex"] == "female"] = 1
test["Embarked"][test["Embarked"] == "S"] = 0
test["Embarked"][test["Embarked"] == "C"] = 1
test["Embarked"][test["Embarked"] == "Q"] = 2
test.Fare[152] = test.Fare.median()
test.head(10)

# 「train」の目的変数と説明変数の値を取得
target = train["Survived"].values
features_one = train[["Pclass", "Sex", "Age", "Fare"]].values
# 決定木の作成
my_tree_one = tree.DecisionTreeClassifier()
my_tree_one = my_tree_one.fit(features_one, target)
# 「test」の説明変数の値を取得
test_features = test[["Pclass", "Sex", "Age", "Fare"]].values
# 「test」の説明変数を使って「my_tree_one」のモデルで予測
my_prediction = my_tree_one.predict(test_features)

# 予測データのサイズを確認
my_prediction.shape

# PassengerIdを取得
PassengerId = np.array(test["PassengerId"]).astype(int)
# my_prediction(予測データ）とPassengerIdをデータフレームへ落とし込む
my_solution = pd.DataFrame(my_prediction, PassengerId, columns = ["Survived"])
# my_tree_one.csvとして書き出し
my_solution.to_csv("my_tree_one.csv", index_label = ["PassengerId"])


```

結果は0.76555となりました。次の機会はもう少し正解率を高くしたいですね
[自分用メモ][mac] Pythonの環境構築

[Udemy](https://www.udemy.com)で機械学習向けのコースの学習を開始したのでPythonの環境構築について備忘録を残しておきます。

環境構築方法については情報過多でベストプラクティスにたどり着くのが難しい状況です。
Anacondaを使用した環境構築が簡単そうだったのですが、非推奨の情報もちらほらと見かけるようになったので、あえてAnacondaを使用しない形で環境構築を行いました。

# 手順
1. Home-brewのインストール
1. pyenvのインストール
1. pipenvのインストール
1. パッケージの追加

# Home-brewのインストール方法
> macユーザー向けのパッケージ管理システム、後述するpyenvとpipenvをインストールするために必要なもの

『[プログラミング入門者のための「Homebrew」インストール](https://qiita.com/Naggi-Goishi/items/391b374305bc41b0d9f3)』にスクリーンショット付きで、わかりやすくまとめられているので参照してください。

# pyenvのインストール
> Python2系/3系だけではなく細かなバージョン(3.6/3.6.5/3.7...など)切り替えを管理できる
後述するpipenvで仮想環境を作成する際に使用する
個人で開発する限り3系の最新版を使用することになるのでpyenvの必要性はあまりありませんが、私の場合は最新版のPythonでTensorFlowを実行するとエラーが発生したため、やむなく一つ前のバージョンのPythonが必要になり導入しました

```shell-session
// インストール
$ brew install pyenv

// .bashrcに設定を追加する
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile 
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
```

# pipenvのインストール
> 仮想環境の作成とパッケージの管理を統合的に扱うツール
>
```shell-session
// インストール
$ brew install pipenv
>
// .bashrcに設定を追加する
// 仮想環境を作成したフォルダの直下に.venv(仮想環境の実体)を作成するようになる
$ echo 'export PIPENV_VENV_IN_PROJECT=true' >> ~/.bash_profile
```

# ライブラリの追加
```shell-session

// hogeフォルダを作る
$ mkdir hoge

// hogeフォルダに移動
$ cd hoge

// 仮想環境を作成する
~/hoge$ pipenv install

// Pythonのバージョン指定する場合
~/hoge$ pipenv install --python 3.6.5

// 仮想環境にパッケージ(機械学習関連)をインストールする
~/hoge$ pipenv install jupyter 
~/hoge$ pipenv install numpy
~/hoge$ pipenv install scipy
~/hoge$ pipenv install scikit-learn
~/hoge$ pipenv install pandas
~/hoge$ pipenv install keras
~/hoge$ pipenv install tensorflow
```

上記の仮想環境をPyCharmで使用する場合は『[PyCharmの実行環境にvenvの環境を設定する方法](https://codelab.website/pycharm-project-interpreter/)』を参考に設定することで使用できます。
一番簡単なVueのeslintのチェックをVS Code上で行う方法

# Vuejs x ESLint
Vueーcliなどを用いて開発を始めるとプロジェクトファイルにeslintが標準で組み込まれます。


# VS Code
Visual Studio Code
最近JavaScript界隈で人気のエディターです。
TypeScriptによる影響が多いと思いますが、Electron製なのに動作が軽い気がしていて最近採用しました。

# Vue x VS Code
今回はVSコードでVue.jsの開発をする際にEditor上でESLlintのチェックをリアルタイムに行う方法です！

# 準備
### ESLintプラグインのインストール
- 画面から
-> 拡張機能(Cntrl+Shift+x)
eslint と入力

検索にヒットしたESLintをインストール

・コマンドから
[Cntrl + p]から「ext install dbaeumer.vscode-eslint」

# 設定
設定ファイルを開きます[Cntrl+,]

下記を設定

```json:UserSettings
"eslint.autoFixOnSave": true,
"files.associations": {
    "*.vue": "vue"
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
    "language": "vue",
    "autoFix": true
    }
],
```

eslint.autoFixOnSave
→ 保存時に自動で校正をチェックしてコードを修正します

files.associations
→ 拡張子などでファイルの種類を定義

eslint.validate
→ バリデート対象とオプション設定

**設定が完了したらVS Codeを再起動します**

まずは**.js**ファイルで挙動を確認、エディター上でeslintが動きましたか？
動いたら同様には**.vue**ファイルで挙動を確認
※vueファイルを対象とする設定を誤っていると「eslint is not validating any files yet」というメッセージが出てVueファイルを開いているのにeslintが効いてない状態になってると思います。

# 感想
設定できましたか？
エディタ上でESLintエラーのチェックと保存時に自動構成を組み合わせて使っていますが、開発速度が格段に向上しました。
またチーム開発においてもコード規約を強制する事ができるので、校正忘れなども減るんじゃないかと思います。

これからも楽しい開発環境をつくっていきましょう！
transduce FAQ

transduce に関連する FAQ。 Ramda/transducers-js の実装に引きづられているかも。

# transduce と map の違いは？
map は transduce の一種。filter も takeWhile もreduce も transduce の一種。このように transduce は、イテレーション可能なコレクション（典型的にはArray）に対する操作を統一的に理解するための操作。

# transduce は何をするの？
入力(典型的にはArray)、(transformerに特徴付けられた)transducer、出力用初期値、出力用reducerを使い、以下の操作をする。

- 出力 acc を出力用初期値で初期化
- 入力から要素をひとつずつ取り出して以下を実施
    - 要素 x を transformer で変換し、 x2 にする
    - 出力用reducer(acc, x2) で acc を更新
- acc を出力

# transducer って何？
複数の transformer を直列化するための関数。

transducer は、transformer を受け取って transformer を返す関数。このようなシグネチャなのでtransducer は composable である。任意の個数の transducer を compose できる。

```js
// 二つの transducer td1 と td2 を compose して新たな transducer td をつくることができる
const td = xf => td1(td2(xf))
// Ramda の compose を使うほうがいいかも
// const td = R.compose(td1, td2)
```

また、一つ一つのtransducer は transformer で特徴づけられている。transducer を compose することと、 transformer を直列化することは、実装上密接につながっている。

# transformer protocol とは？
プログラマが実装する transformer を、transduce の実行過程でどのように利用されるかのインターフェース。具体的には transformer は `@@transduce/init`、`@@transduce/step`、`@@transduce/result` の三つのメソッドを持つ必要がある。

とはいえ、プログラマはこれらのメソッドを実装する必要はない。Ramda や transducers-js などのライブラリを使うと簡単に transformer を作ることができる。いや正確には、 transformer で特徴付けられる transducer を作ることができる。

```1を足すという操作に対応するtransducerを作る.js
const R = require('ramda');
const xf = R.map(x => x +1); // returns transducer
```

# 実際のプログラミングの流れは？

- 入力が反復可能オブジェクトであることを確認する
- 出力用の初期値と、 reducer を定義する
- 以下の手順で transducer を構築する
    - やりたい処理を分解する: op1, op2, op3, ... opN 
    - 各処理に対する transducerを作る: xf1, xf2, xf3, ... xfN
    - transducer を compose する: compose(xf1, xf2, ... , xfN)
    - この compose された transducer を使う

# transduce は lazy なの？
lazy ではない。 lazy な入力は扱える。

# Immutable.js の Seq と似てない？
中間配列が不要という点では、Seq に類似しているが、transduce の方が高機能。transduce の特徴は、むしろ、関心の分離（変形と格納の分離）とそれに付随する再利用性の向上にある。