OmniAICreator/Qiita-1.07M huggingface dataset:
逆FizzBuzz

[逆FizzBuzz](https://www.google.com/#q=%E9%80%86fizzbuzz)をScalaで。

```scala
object ReverseFizzBuzz extends App {
  def fb(n:Int):Stream[Option[(Int, String)]] = {
      if(n%15 == 0) Some((n,"FizzBuzz"))
      else if(n%3==0) Some((n,"Fizz"))
      else if(n%5==0) Some((n,"Buzz"))
      else None
  }#::fb(n+1)

  def find(input:Array[String]):String = {
    val list = fb(1).take(15*(1+scala.math.ceil(input.length/7).toInt)).collect{case Some(a) => a}
    (0 until list.length).flatMap { i =>
      val sub = list.slice(i, i + input.length)
      if(sub.map(_._2).corresponds(input){(a,b) => a==b}) Some(sub.map(_._1)) else None
    }.foldLeft("NotFound"){(z,l) =>
      if(l.last-l.head < z.last-z.head) l.mkString(",") else z
    }
  }
  println(find(io.StdIn.readLine.split(",").map(_.trim)).mkString)
}
```
flex space-between で折り返した要素をcssだけで左並びにする

# flex space-between で折り返した要素をcssだけで左並びにする

css3 flexbox のjustify-contentを使うと簡単に様子を並べたり、均等に配置することができます。
その中で、「space-between」というプロパティを使えば両端に要素を配置し均等に隙間を開けることができます。

ただこの「space-between」には問題があって折り返し時に要素が両端に配置されるため真ん中が空いてしまうのです。

調べたところ同じように悩んでいる方もおり、参考にさせて頂きました。
ありがとうございます。

「参考記事」
[Flexboxのjustify-contentで最後の行を左寄せにする方法](http://blog.webcreativepark.net/2016/08/15-125202.html)
[Flexbox で全体を中央に配置しつつ最後の行を左揃えにする](http://qiita.com/QUANON/items/e14949abab3711ca8646)


ただ、ここで扱われていたのはjavascriptで要素を末尾に追加し隙間を埋めるという対応でした。
出来れば、css オンリーで出来ないかと考えたのでやってみました。

## 問題の space-between

```html:html
<ul class="list_container">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
```

```css:css
.list_container {
	list-style: none;
	display: flex;
	flex-flow: wrap;
	width: 600px;
	justify-content: space-between;

}
.list_container li {
	border: solid;
	box-sizing: border-box;
	width: 180px;
}
````

この状態だとこんな感じになります

<img width="630" alt="スクリーンショット 2016-12-26 18.59.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/8ff59dba-8e2c-b574-259b-656a75351ed2.png">


## 改良版

下記を追加

```css:css
.list_container li:nth-child(3n+2):last-child {
	margin-left: auto;
	margin-right: 35%;
}
```

<img width="643" alt="スクリーンショット 2016-12-26 19.09.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/a6f832ea-e588-3760-1aa7-6a184201b803.png">

イメージした通りの形になりましたね
要素を追加しても減らしても、左寄せのまま変化しています

`margin-left:35%;` という数字は li の幅である親コンテナーの30%と隙間のの空白の幅5%を足した数字です
ここは%じゃなくてもお好みで固定pxに変えて頂いても大丈夫です！


`li:nth-child(3n+2):last-child` この書き方は下記のサイトを参考にさせて頂きました。
[CSSセレクタで最後の要素が奇数だったときを指定する](http://mkasumi.com/memo/selecting-last-element-of-odd-item-by-using-css-selector.html)
説明は参考サイトの内容が詳しいのでそちらを御覧ください。

とりあえず、以上になります。

追記
--------
code pen の方にも投稿したので実際に確認したい方はこちらからどうぞ
https://codepen.io/HidetoNagamatsu/pen/mOZOjK

<p data-height="265" data-theme-id="0" data-slug-hash="mOZOjK" data-default-tab="css,result" data-user="HidetoNagamatsu" data-embed-version="2" data-pen-title="flex space-between  Left row" class="codepen">See the Pen <a href="https://codepen.io/HidetoNagamatsu/pen/mOZOjK/">flex space-between  Left row</a> by Hideto (<a href="https://codepen.io/HidetoNagamatsu">@HidetoNagamatsu</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
rails runnerでエラー内容表示

rails runnerをたたくと、
> Please specify a valid ruby command or the path of a script to run.
Run 'bin/rails runner -h' for help.

なメッセージが。何度試行錯誤しても同じエラーメッセージが出てくるだけ、、、
そして気付いたのが、エラーが起こるとつねに上のメッセージが出てくるのでは？ということ。これでは肝心のエラー内容がわからない、、
そこで、exceptionを捕捉して明示的にloggerでエラー内容を出力することにした。見事解決。

```
    logger = Logger.new(Rails.root.join('log', "#{Rails.env}.log"))

    begin
      logger.info("Start")
    rescue => e
      logger.error("Unhandled exception! #{e} : #{e.backtrace.inject(result = "") { |result, stack| result += "from:#{stack}\n" }}")
    ensure
      logger.info("Finish")
    end
```

rails runnerは色々ちょっと使いづらい気がする。バッチ処理をするのに、もっと良い方法はないのかなー？
ぬくぬくReact学習記(4)

ようやくチュートリアルも終わり。reactの特徴的な部分が少しずつつかめてきた感じ。次はReduxのチュートリアルをやってみる。
(1) http://qiita.com/zutcho/items/a66245d4d365f5d75103
(2) http://qiita.com/zutcho/items/1cf09405dbe0243b79cb
(3) http://qiita.com/zutcho/items/0b7d1cc1a7caf85b9032

## 本文で触っていない箇所
ソースコードの後ろの方に本文中で触っていない箇所があったので、少し見てみる。

- `ReactDOM.render`で、Gameコンポーネントをdev#container内にrenderしている。
- winnerを計算するcalculateWinner関数は、マスの状況からwinnerを得るロジック部分。Reactの動きとは直接関係ない。

## 練習問題
以下のような練習問題が本文の最後についているので、やってみる。
> go back in time then click in the board to create a new entry

ゲームを過去の時点にさかのぼって再開できるようにしなさい、ということだと思う。だいぶ英語は怪しいのだが、、

上の解釈が正しいとすると、GameコンポーネントのjumpToメソッドを以下のように変えれば良い。選択されたステップ以降のhistoryをsliceで削除している。

```
  jumpTo(step) {
    const history = this.state.history;
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) ? false : true,
      history: history.slice(0, step + 1),
    });
  }
```
【まとめ】顔認証の製品ポイント

[dots.女子部 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/dots_girls) の24日目を担当です。
顔認識や顔認証について、まとめてみました。
##顔認識と顔認証
・デジタル画像から、顔の様々な特徴をを自動的に識別すること。
　- 人数の把握
　- 年齢、性別、表情（喜怒哀楽）、視線 etc...
　- 個人の特定
##今年取り扱った製品
![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/91552/e249b275-4239-f9d5-9c9f-868d3eb28e47.png)
・選定ポイントは、有名どころをひととおりといったゆるい感じです。
・ベンチマークを取ってサービス化/製品化で有用なモノを選抜していく予定です。

##顔認証エンジン NeoFace  [NEC]　
・機能：顔認証（顔検出、顔照合）
・世界No.1の精度・速度を誇る。
・評価版、製品版ともに問い合わせが必要（評価期間1ヶ月）
・サンプルソースが提供されるので問い合わせ後の評価導入は簡単
・問い合わせの回答スピードは遅め（1週間くらい）
・価格的に法人向き
　[NeoFace 製品詳細](http://jpn.nec.com/biometrics/face/product/neoface.html)

##性別・年齢自動推定システム FieldAnalyst  [NEC]
・機能：人数の計測、年齢推定、性別推定、笑顔認識、人物検出、動体検知
・評価版、製品版ともに問い合わせが必要（評価期間1ヶ月）
・サンプルソースが提供されるので問い合わせ後の評価導入は簡単
・価格的に法人向き
　[FieldAnalyst 製品詳細](http://www.nec-solutioninnovators.co.jp/sl/fieldanalyst/)

##顔認識ミドルウェア FSE（Face Sensing Engine） [OKI]
・機能：顔認証（顔検出、顔照合）、顔特徴点抽出
・評価版、製品版ともに問い合わせが必要（評価期間要相談）
・サンプルソースが提供されるので問い合わせ後の評価導入は簡単
・問い合わせの回答スピードは早め（簡単な質問は即日）
・価格的に法人向き
　[FSE 製品詳細](https://www.oki.com/jp/fse/function/)

##RESCAT（Response Categorizer） [OKI]
・機能：人数の計測、年齢推定、性別推定、笑顔認識、人物検出、動体検知
・評価版、製品版ともに問い合わせが必要（評価期間要相談）
・サンプルソースが提供されるので問い合わせ後の評価導入は簡単
・価格的に法人向き
　[RESCAT 製品詳細](https://www.oki.com/jp/rescat/function/)
　
##顔認識ソフトウェア FaceU [PUX]
・機能：顔認証（顔検出、顔照合）、年齢推定、性別推定、笑顔認識、視線推定、人物検出
・評価版WebAPIで試せることが豊富。
・開発者支援サイトから情報収集可能。[PUX Developers Site](https://pds.polestars.jp/)
・質問はフォーラムから可能
・フォーラムの最終投稿 2016/6/28
・ランニングコストが数万円かかるので法人向き
　[FaceU 製品詳細](https://www.pux.co.jp/%E8%A3%BD%E5%93%81%E6%83%85%E5%A0%B1/%E7%94%BB%E5%83%8F%E8%AA%8D%E8%AD%98/%E9%A1%94%E8%AA%8D%E8%AD%98/)
　
##OKAO Vison [OMRON]
・機能：顔認証、年齢推定、性別推定、表情推定、視線推定、人物検知、ペット検知
・話題の[RoBoHoN](https://robohon.com/product/robohon.php)に搭載されている顔認識はこちら。
・開発者支援サイトから情報収集可能。  [SensingEggメンバーサイト](https://plus-sensing.omron.co.jp/egg-project/developer/)
・支援サイトでサンプルソースが開示されているので評価導入は簡単
・質問はフォーラムから可能
・フォーラムの最終投稿 2016/12/26
・個人導入が簡単　[家族目線](https://plus-sensing.omron.co.jp/kazoku-mesen/)
・家族目線は「家庭向け」なので認証セキュリティなど使用レベルに注意が必要
　[OKAO Vison 製品詳細](http://plus-sensing.omron.co.jp/)
##まとめ
![hikaku1.PNG](https://qiita-image-store.s3.amazonaws.com/0/91552/a505dd7b-d616-d8da-fd24-0227782dbdbe.png)

##これから
![hikaku.PNG](https://qiita-image-store.s3.amazonaws.com/0/91552/359f0558-d2e7-cec7-71ac-94ae3baaf535.png)
製品ライブラリを使うからといって簡単に精度高いものが導入できるわけではないです。
まだまだ「顔認識の技術」×「撮影環境の整備」×「利用者の協力」の３者が好条件でそろうことが必要です。
また、顔写真から個人を特定する手段もいろいろあるので、規約やセキュリティ対策といった顔認識技術そのもの以外の課題も対応中です。

##dots.女子部について
いろんなバックグラウンドをもった女子が集まるdots.女子部！
わたしたちと一緒にもくもくしたい女子の入部をお待ちしています(｀・ω・´)
[新春もくもく会やります♪](https://eventdots.jp/event/606743)
[Twitterやってます♪](https://twitter.com/dotsgirls)
[Facebookもやってます♪](https://www.facebook.com/dots%E5%A5%B3%E5%AD%90%E9%83%A8-457992851057604/)
LINQでエラトステネスの篩の素朴な実装

# LINQでエラトステネスの篩の素朴な実装 #

[エラトステネスの篩の実装メモ](http://qiita.com/remonsama/items/4e0a4eec998ff83e9f9b)

という記事があって、エラトステネスの篩はLINQが遅延評価だということを実感することができる良い教材だなぁ
と思ったのでLINQを使って素朴な実装をしてみます。

みんな知ってると思うけど知らない人はこちら
[エラトステネスの篩](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%A9%E3%83%88%E3%82%B9%E3%83%86%E3%83%8D%E3%82%B9%E3%81%AE%E7%AF%A9)

# コード #

```csharp:エラトステネスの篩
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Hurui
{
    class Program
    {

        static void Main(string[] args)
        {
            foreach (var prime in Primes())
            {
                Console.WriteLine(prime);
            }
        }

        /// <summary>
        /// エラトステネスの篩のとても素直な実装
        /// </summary>
        /// <returns></returns>
        static IEnumerable<int> Primes()
        {
            //素数候補リスト
            var ps = Ns(); //自然数列があります

            while (true)
            {
                var prime = ps.First(); //リストの一番最初は素数です
                ps = ps.Where(i => i % prime != 0); //一番最初で割り切れるものを落としたものが新たな素数候補です
                yield return prime; //リストの一番最初返します
            }

        }

        /// <summary>
        /// 二以上の自然数の無限列(実際はInt32.MaxValueまでだけど)
        /// </summary>
        /// <returns></returns>
        static IEnumerable<int> Ns()
        {
            int i = 2;
            while (true) yield return i++;
        }
    }
}

```

# 解説 #

## Ns()について ##
Nsは二以上の自然数の無限列(実際はInt32.MaxValueまで)を返すメソッドです。
このメソッドはもちろん読めば分かる通り無限ループになっています。
が、Ns()を呼び出しただけではプログラムは問題なく終了します。

```csharp:終了するコードの例
Ns();
Console.WriteLine("終了"); //一瞬でここに到達します。
```

```csharp:終了するコードの例
Ns().ToArray();//ここですべての要素を計算して配列化しようとするのでOutOfMemoryになります
Console.WriteLine("終了"); //ここに到達できません
```

これはNs()は列挙の仕方を定義しているだけで実際にはまだ列挙していないからです。
だからNs()の中身をすべて出力するようなプログラムは終了しませんが一方で呼び出しただけだと計算をしていないためすぐにこのメソッドは終了することになります。


またNs().Take(2)のように先頭の方で処理を打ち切るようなメソッドを挟めば値を取り出すことができます。
Ns().Take(2).ToArray()とすれば先頭の方のみの配列を作ることができます。

この用に必要になるまで値を評価しないことを遅延評価と言います。

ちなみにBigIntegerじゃないのは十分素数のメソッドが遅かったからです。

# Primesについて #

これは無限列が作れるのでエラトステネスの篩の本質部分をそのままメソッド化しただけです。
psは素数候補のリストになります。（つまりまだ今までの素数で割り切れていない数字の列）
ループの中身は

1. 素数候補の先頭は素数確定なので素数primeをとっておきます
2. 素数候補からprimeで割り切れた素数候補でなくなったものを省きます
    * ここでも、やはりWhereは遅延評価なのですぐに終わります。
3. primeをリストの要素として返却します

というふうになっています。
もちろんこのメソッドも無限列なので終了しません。
が、今回は別に終了しなくて良いのでそのまま出力しています。Ctrl+Cで止まります。

ちなみにですが、このpsは素数の数pnが増えていくに従ってWhereメソッドがpn個連続しているような状態になります。ですので、Firstで先頭要素を取得するタイミングで時間がかかることになります。もちろん空間計算量もO(1)に見えたりしますがそんなことはなくO(n)です。

今回はLINQは遅延評価だよというのを確かめたかったのでこんな感じにしましたがもし使うことがあればこのコードを使うことは絶対におすすめしません。
無駄いっぱいあるのですよ

Nsはintにしたんだから結局はRangeメソッドで良かった気がした
Azure Bot Serviceを使って完全Web上でBot開発する

# Azure Bot Service超便利
11月にリリースされたAzureのサービスで、Bot as a Service(BaaS)というカテゴリで提供しているらしい。
従来のBot Frameworkを使用した開発ではローカルで開発してからWeb Appにデプロイする方式だったようだが、このBot ServiceはAzureポータルの中にWeb IDEがあってローカルに環境を用意しなくても開発できるようになった。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/149212/0021b96a-472e-9611-a19b-10cb99bc0625.png)

# が、しかし
このAzureポータル内のIDEではファイルの追加ができない。簡単なBotならいいが、関数とかファイルごとに分けたいときには結局ローカルでやるしかないのかと思い、いろいろやった結果の妥協案。

#ファイルやディレクトリをWeb IDEから作る方法
![2.png](https://qiita-image-store.s3.amazonaws.com/0/149212/de7ed977-b969-c81b-8825-6a7bebc68c47.png)
[Setting]タブ内の[Advanced settings]を[Open]

![3.png](https://qiita-image-store.s3.amazonaws.com/0/149212/cc262fc0-5bc7-a3e7-1869-56f0d495632e.png)
App Serviceのブレードが開くはず

![4.png](https://qiita-image-store.s3.amazonaws.com/0/149212/d7813f3b-ebc7-3f7e-fe18-29f8c260ccf2.png)
ブレードの右側にあるメニュー一覧を下へスクロールしていくと[App Service Editor]があるのでそれをクリック

![5.png](https://qiita-image-store.s3.amazonaws.com/0/149212/c8fe6d47-bb6b-60ed-ff4a-2ed4ed9fede1.png)
クリックして表示された画面内の[移動]をクリック

![6.png](https://qiita-image-store.s3.amazonaws.com/0/149212/7a7ee68c-6ae6-7bbe-595b-641f9cab1e09.png)
こんな画面が開く。このエディタならファイルの作成やディレクトリが作成できる。
ちなみにこのエディターとBot ServiceのIDEをタブでどちらも開いておけばIDEの方でリアルタイムデバッグできる。

#最後に
この問題、ググってもなかなか出てこず、調べ方が下手なのか、英語が下手なのか、みんな当たり前の情報なのか、そもそもWebで開発しようとする人がいないのか・・・。
この記事の執筆時点ではBot ServiceとApp Service Editorどちらもプレビューなので参考は自己責任でお願いします。
Amazon AuroraのフェイルオーバーとRailsのコネクションプーリング


ちょっと先日事故ったのでメモを兼ねて。

# Auroraのフェイルオーバーの挙動
まずは、Auroraのフェイルオーバーの挙動。
従来のRDSではマスターデータベースをAZ構成にしておいてレプリカをぶら下げる構成だったが、Auroraからはデフォルトでクラスタになっている。
## 使用出来るエンドポイント
クラスタの真前を`failover-aurora`、インスタンス名を`failover-aurora-instance` という名前でauroraのクラスタを作ると以下の様なエンドポイントが得られる。
### Cluster Endpoint
クラスターに対して書き込みをする用のエンドポイント。
こんな感じ。

```
failover-aurora.cluster-xxxx.ap-northeast-1.rds.amazonaws.com
```
### Reader Endpoint
クラスターに対して読み込みをする用のエンドポイント。レプリカのどれかに紐づく様になっていて、書き込みをするとエラーになる。`-ro`というsuffixが付く。

```
failover-aurora.cluster-ro-xxxx.ap-northeast-1.rds.amazonaws.com
```
### 各インスタンスのEndpoint
インスタンス毎にもエンドポイントが存在する。
#### マスター
```
failover-aurora-instance.xxxx.ap-northeast-1.rds.amazonaws.com
```
#### レプリカ (AZの名前がつくらしい)
```
failover-aurora-instance-ap-northeast-1a.xxxx.ap-northeast-1.rds.amazonaws.com
```
## IPをひいてみると
実際のDNSレコードがどういう構成なのかIPを問い合わせてみる。

### Cluster Endpoint
```
failover-aurora.cluster-xxxx.ap-northeast-1.rds.amazonaws.com. 5 IN CNAME failover-aurora-instance.xxxx.ap-northeast-1.rds.amazonaws.com.
failover-aurora-instance.xxxx.ap-northeast-1.rds.amazonaws.com. 5 IN A 172.30.25.134
```

### Reader Endpoint
```
failover-aurora.cluster-ro-xxxx.ap-northeast-1.rds.amazonaws.com. 1 IN CNAME failover-aurora-instance-ap-northeast-1a.xxxx.ap-northeast-1.rds.amazonaws.com.
failover-aurora-instance-ap-northeast-1a.xxxx.ap-northeast-1.rds.amazonaws.com. 5 IN A 172.30.3.157
```

Cluster Endpointは、マスターデータベースを指すエンドポイントのCNAMEになっていて、Reader Endpointはレプリカを指すエンドポイントのCNAMEになっている事が分かる。

## フィエルオーバー後のIP
実際にフェイルオーバーを起こした後に、IPがどう変化するかを確認する。

#### Cluster Endpoint
```
failover-aurora.cluster-xxxx.ap-northeast-1.rds.amazonaws.com. 1 IN CNAME failover-aurora-instance-ap-northeast-1a.xxxx.ap-northeast-1.rds.amazonaws.com.
failover-aurora-instance-ap-northeast-1a.xxxx.ap-northeast-1.rds.amazonaws.com. 5 IN A 172.30.3.157
```
#### Reader Endpoint
```
failover-aurora.cluster-ro-xxxx.ap-northeast-1.rds.amazonaws.com. 1 IN CNAME failover-aurora-instance.xxxx.ap-northeast-1.rds.amazonaws.com.
failover-aurora-instance.xxxx.ap-northeast-1.rds.amazonaws.com. 3 IN A 172.30.25.134
```

各インスタンスのIPに変化は無く、CNAMEの切り換えだけが行われている事が分かる。
ちなみに、興味深かったのはReader側のCNAMEのTTLが1秒でCluster側が5秒担っていた事。
昇格側はさっさと切り替わる方が障害時間が短くなるためか、slaveは複数台連なるので負荷分散の為の想定かそんなところだろうか。

# Railがconnection poolingしている場合
で、本題のRailsのコネクションプーリングについて。

この辺りの記事が詳しい(むしろこれで話は終わりという感じ)。
http://blog.livedoor.jp/sonots/archives/38797925.html

マスターをAZ構成にしていた場合には、旧マスターは接続不可となるのでrailsは接続出来ないエラー共に再起動され、(設定によるが)ワーカーが再起動して新しいIPをひくので問題なかったが、
Auroraの用に、マスターがスレーブに降格する様な場合には、引き続きrailsは旧マスターに接続し続けられる為に、コネクションをプーリングし続けてしまい書き込みだけが出来ない様な状態になる。
エラーとしては以下の様なものが出力される。

```
Mysql2::Error: The MySQL server is running with the --read-only option so it cannot execute this statement
```

# 都度接続にする
解決策としては、コネクションプーリングをやめて都度接続にする事が手っ取り早い。以下の様なgemもあるためかなり簡単に設定出来る。
https://github.com/sonots/activerecord-refresh_connection

## マスター切替以外でも
スレーブが複数台いる場合に、コネクションプーリングだとスレーブへのアクセスがかなり偏る可能性がある。
特に台数が少ないうちはかなり偏るはず。

# まとめ
都度接続のコストが高くない限り、コネクションプーリングはやめたほうがいんじゃないかなと思いました。
Windows Subsystem for Linux

# Windows Subsystem for Linux (WSL) とは
Windows10でLinux(Ubuntu)コマンドを使える環境。
※ Bash on Ubuntu on Windows とも言う。

Windows10標準搭載。

https://ja.wikipedia.org/wiki/Windows_Subsystem_for_Linux

# インストール
https://msdn.microsoft.com/ja-jp/commandline/wsl/install_guide
http://ascii.jp/elem/000/001/148/1148878/
最初の Web API

Windows IoT Core からインターネットに簡単にアクセスできることが分かったので、もうちょっ突っ込んで Twitter API を呼んでみましょう。Twitter API の呼び出しは、認証やらあれこれがあって自前で組むと結構大変ですが、Windows の .NET が使えるので、NuGet から CoreTweet を使って Twitter API をアクセスすることができます。

[NuGet Gallery | CoreTweet 0.7.2.352](https://www.nuget.org/packages/CoreTweet/ "NuGet Gallery | CoreTweet 0.7.2.352")

これは、Windows IoT Core が UWP アプリだからできることで、これは生の Raspberry Pi で Rasbian を使ったときよりも有利な点です（まあ、apt-get してあれこれやればいいんですけどね。Python を使えばそれほど難しくない）。

# サンプルを動かしてみよう

[moonmile/winiot-samples: Windows IoT Core samples](https://github.com/moonmile/winiot-samples "moonmile/winiot-samples: Windows IoT Core samples")

ここの RPiFavo をダウンロードすると簡単ですが Twitter のファボを利用できます。API キー等は、頑張って Twitter のデベロッパーのサイトから取得してください


```csharp
const string ApiKey = "API_KEY";
const string ApiSecret = "API_SECRET";
const string AccessToken = "ACCESS_TOKEN";
const string AccessTokenSecret = "ACCESS_TOKEN_SECRET";
```

# 画面を作る

![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/32488/958f916f-b6b6-f012-d1bb-33b762b8899c.jpeg)

XAML を使ってデザインしていきます。

# コードを書く

ファボ（現いいね）を取得するところは、普通の UWP アプリと変わりません。GET ボタンをクリックするとファボの一覧を取ってきて、ListView に表示させています。

```csharp
/// <summary>
/// ファボを取得
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private async void Button_Click(object sender, RoutedEventArgs e)
{
    var tokens = CoreTweet.Tokens.Create(ApiKey, ApiSecret, AccessToken, AccessTokenSecret);
    var favs = await tokens.Favorites.ListAsync();


    var items = new List<Status>();
    foreach (var it in favs)
    {
        items.Add(it);
    }

    lv.ItemsSource = items;
    text1.Text = $"Count: {items.Count}";
    return;

}
```

これだと、いちいち画面でマウスをクリックしなければいけないので、外部のボタンと連携させるといいですよね。そのあたりは、<a href="http://qiita.com/moonmile/items/92d1d91bf107ef674ed1">最初のボタン - Qiita</a> と組み合わせると、物理的なボタンを押したらファボを取ってくるような Raspberry Pi ができるわけです。

# 動作させてみる

実機で動かすとこんな感じになります。

![002.jpg](https://qiita-image-store.s3.amazonaws.com/0/32488/757448f4-ac82-2a3b-8c36-68033c069ecd.jpeg)

モニタがあればそれに出力していもいいし、ネットワークを通じて別の PC に送信してもいいし、色々できると思うので試してみてください。
scikit-learnのMLPClassifierで得た結果を他のサービス（言語）で利用するために



はじめに
---

最近、機械学習を触り始めて３ヶ月程度の初心者です。

tensorFlowを使いたいけどまだ敷居が高いと感じているので、現在私は機械学習に必要なものが揃っている「scikit-learn」を使っています。（今後はtensorFlowにシフトしていきたいですが。）

ここでは、作成したモデルを他の言語でどのように扱うかを個人的なメモとして残しておきます。

間違っていれば指摘していただけると嬉しいです。

用意したデータ
---

サンプルとして、以下を対象としています。

* サンプル数は約５００程度
* 説明変数の次元数は５０程度
* 目的変数は0or1
* トレーニングデータ、テストデータの割合は95%:5%です。


どのアルゴリズムを使って分類器を作るか
---

当初私は、以下のアルゴリズムを選択しました。

* サポートベクターマシン（SVM）

用意したデータを見る限り、線形分離できないと感じたため非線形に対応したSVMで学習させました。
利用しているカーネルはガウスカーネルです。

トレーニングデータのconfusion matrixを見ると、正解率は99%くらいありました。

しかし、テストデータのconfusion matrixを見ると全て0もしくは1を予測してしまう状況を作ってしまっていました。いわゆる過学習が発生していました。（用意したサンプル数と次元数の関係を考えるとover fittingするのは納得がいきます。ハイパーパラメータを調整すれば、ある程度対応はできるかもしれませんが）

そこで、つい最近scikit-learnでニューラルネットワーク対応クラスが実装されたのでそれを利用してみました。

利用したクラス：MLPClassifier
公式ページ：http://scikit-learn.org/stable/modules/generated/sklearn.neural_network.MLPClassifier.html

結果としては、ちゃんと学習し非線形SVMよりも汎化性能が高い結果となりました。



MLPClassifierの結果を他の言語で利用する。
---

結論から言うと「重み」「バイアス」がわかればほぼゴールです。

MLPClassifierからどのように取得するかは、下記のコードとなります。

```
重み
MLPClassifier#coefs_
バイアス
MLPClassifier#intercepts_
```

メソッドが複数形で終わっている通り、ニューラルネットワークの層が複数あれば、その層の分だけの重みとバイアスが取得できます。

入力層（１００次元）→隠れ層その１（２００次元）→隠れ層その２（３００次元）→出力層というニューラルネットワークであった場合に

`MLPClassifier#coefs_`で取得できる行列は、入力層（１００次元）→隠れ層その１（２００次元）のネットワークであれば、100x200の大きさの行列になっているはずです。

つまり、この行列を他の言語で読み込めるこめればおkです。

実際に筆者はRailsに組み込みたいと考えているので、Matrix、Vectorクラスを使って行列計算を行っています。

```
# 層の回数だけ同じような読み込みが発生する

file_path = File.expand_path('app/models/hogehoge.csv', ENV['RAILS_ROOT'])
csv_data = CSV.read(file_path, headers: false)
matrix = Matrix.rows(csv_data, true)

# 一行目、一列目はheaderに当たるものなので、それ以外を抜いて・・・
matrix = matrix.first_minor(0, 0).map(&:to_f)
```

やってみて
---

現在対応している分類器がそこまで次元数がない&層が深くなくても分類できる問題でした。
しかし、今後次元数が万を超える、層がものすごいある場合はこの対応方法でいいのか疑問が残ります。
Sierraのapacheにmod_wsgiを入れる

Sierraにあげたらローカルのapacheのmod_wsgi消えてるー

ということで、忘備録。


面倒だからpipで入れようとする
----
```
pip3 install mod_wsgi
```
華麗に失敗。



まずはコマンドラインツールを入れる
----

```bash
xcode-select install
```

それすら入ってなかったんかーい、的な。

APR、APr-Utilをダウンロードしてきて入れる
----

ちょい前からコマンドラインツールに含まれなくなったようなので、手動で入れる。

https://apr.apache.org/download.cgi

```bash
cd apr-1.5.2
./configure
make
sudo make install

cd ~/Download/apr-util-1.5.4
./configure --with-apr=/usr/local/apr
make
sudo make install
```

これでaprとapuがインストールされたっぽい。

が、これだけだと
`'/Applications/Xcode.app/Contents/Developer/Toolchains/OSX10.12.xctoolchain/usr/local/bin/apr-1-config'`を参照してFileNotFoundとかエラーってくれるので、そんなとこにあるわけないじゃんーと

symbolicを張る
----

```bash
sudo ln -s /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain /Applications/Xcode.app/Contents/Developer/Toolchains/OSX10.12.xctoolchain
sudo mkdir /Applications/Xcode.app/Contents/Developer/Toolchains/OSX10.12.xctoolchain/usr/local
sudo mkdir /Applications/Xcode.app/Contents/Developer/Toolchains/OSX10.12.xctoolchain/usr/local/bin
sudo ln -s /usr/local/apr/bin/apu-1-config /Applications/Xcode.app/Contents/Developer/Toolchains/OSX10.12.xctoolchain/usr/local/bin/apu-1-config
```

参照できればいいんだ。細かいことは気にしない。

改めて、pipで入れる
----

```bash
pip3 install mod_wsgi
```

成功。

入れるだけでは読み込まれないの…？
---
なんか読み込まれないので、どこに入ったんだ？と探しに行く。

探したら、
`/Library/Frameworks/Python.framework/Versions/3.3/lib/python3.3/site-packages/mod_wsgi/server/mod_wsgi-py33.so`
に.soがいた。

ので、apacheの設定に書く

```apache
LoadModule wsgi_module /Library/Frameworks/Python.framework/Versions/3.3/lib/python3.3/site-packages/mod_wsgi/server/mod_wsgi-py33.so
```

確認して

```bash
sudo apachectl configtest
```

再起動させて

```bash
sudo apachectl restart
```


終わり。
【備忘録】VirtualBox × Ubuntu で sshd 

## 前提
Windows7
VirtualBox
Ubuntu 16.10 64bit
openssh-server
## インストール
1.VirtualBox上でホストオンリーアダプタ設定
2.VirtualBox上でubuntu用イメージを作成
3.作成したイメージのネットワーク設定で「アダプター2」を追加
　　割り当てを「ホストオンリー」にする。
4.DLしてきたUbuntuイメージを仮想ディスクにセットしてインストール 
　※openssh-server にチェックしてプリインストール

4.プライマリNICはデフォルトのものを選択
5.インストール完了したら NIC を探して設定する
 　→再起動

```
# lshw -short -class network
H/W path        Device      Class       Description
===================================================
/0/100/3        enp0s3      network     82540EM Gigabit Ethernet Controller
/0/100/8        enp0s8      network     82540EM Gigabit Ethernet Controller
```

```
# vim /etc/network/interfaces
```

```bash
# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

source /etc/network/interfaces.d/*

# The loopback network interface
auto lo
iface lo inet loopback

# The primary network interface
auto enp0s3
iface enp0s3 inet dhcp
        hostname ubuntu

# secondory
auto enp0s8
iface enp0s8 inet dhcp
```
```
# shutdonw -r now
```
```
# ifconfig
<ここにenp0s8のNICがあれば完了>
```

6.デフォルトでsshサービスは動いているはず

```
# service ssh status
● ssh.service - OpenBSD Secure Shell server
   Active: active (running) since 月 2016-12-26 17:04:21 JST; 36min ago
```
7.sshで疎通確認しておｋ

以上
centos7にsoftetherをインストール（AES−NI対応）

# vpn proxyとしての構築方法です

## 前準備

ansibleを使っているのでansibleをインストールします

```
yum install -y epel-release
yum install -y git ansible
```

## 自動ビルドを実行します

```:bash
git clone https://github.com/you21979-storage/ansible-infra
cd ansible-infra/build
vi hosts
```

```:hosts
[all]
127.0.0.1
```

```:bash
ansible-playbook ./softether_aesni.yml -i ./hosts --connection local
```

## 起動

```
/etc/init.d/vpnserver start
```

## 終了

```
/etc/init.d/vpnserver stop
```

## 自動起動設定

```
ln -s /etc/init.d/vpnserver /etc/rc5.d/S99vpnserver
```

## 自動ビルドの内容

```
---
- hosts: all
  user: root

  vars:
    tmpdir: /tmp/softether
  tasks:
    - name: yum install
      yum: name={{item}} state=latest
      with_items:
        - git
        - gcc
        - unzip
        - readline-devel
        - ncurses-devel
        - openssl-devel
        - libselinux-python
    - name: git download softether
      git: repo=https://github.com/SoftEtherVPN/SoftEtherVPN.git dest={{tmpdir}}/softether
    - name: download intel aes-ni
      get_url: url=http://software.intel.com/sites/default/files/article/181731/intel-aesni-sample-library-v1.2.zip dest={{tmpdir}} mode=0440
    - name: unzip
      command: unzip -xo {{tmpdir}}/intel-aesni-sample-library-v1.2.zip chdir={{tmpdir}}
    - name: make
      command: ./mk_lnx64_all.sh chdir={{tmpdir}}/Intel_AESNI_Sample_Library_v1.2
    - name: prepare
      command: cp intel_aes_lib/lib/x64/intel_aes64.a {{tmpdir}}/softether chdir={{tmpdir}}/Intel_AESNI_Sample_Library_v1.2
    - name: configure
      copy: src=templates/softether_aesni/Makefile dest={{tmpdir}}/softether
    - name: make
      command: make chdir={{tmpdir}}/softether
    - name: install
      command: make install chdir={{tmpdir}}/softether
    - name: init script copy
      template: src=templates/softether_aesni/init.j2 dest=/etc/init.d/{{item}} mode=0755
      with_items:
        - vpnserver
        - vpnbridge
        - vpnclient
```
【GameplayKit】iOSゲームアプリにおけるStateパターン実践 Part_6

#前回の記事
[【GameplayKit】iOSゲームアプリにおけるStateパターン実践 Part_5](http://qiita.com/chino_tweet/items/75745930649285efe0c8)では、ステートマシンによるステート遷移に分岐構造を実装しました。

#この記事について
今回は、ステートパターンとはあまり関係がなくなってしまうかもしれませんが、`SpriteKit`のレンダリング概念について実践しながら理解していきます。
ここまでの記事で、「給水機は満タン > 給水 > タンク水量が減少 > カラ状態」までをステート遷移できるようになりました。さらに、それぞれのアニメーションはスプライトノードのアクション機能を使用して実現しました。
この記事では、給水機がカラ状態`EmptyState`になった後に補給（リフィル）されて、タンク水量が増加していく様をレンダリングします。

#手順
大まかな流れは以下のようになります。
給水機の表示ランプを点滅させる


##給水機の表示ランプを点滅させる
タンクが空になったら、表示ランプをチカチカ点滅させます。

```ruby:EmptyState
class EmptyState: DispenserState {

    var flashTimeCounter: TimeInterval = 0
    static let flashingInterval: TimeInterval = 0.6
    
    var lightOn = true {
        didSet {
            let color = (lightOn ? SKColor.red : SKColor.black)
            changeIndicatorLightToColor(color)
        }
    }

    ...
    
    override func update(deltaTime seconds: TimeInterval) {
        flashTimeCounter += seconds
        
        if flashTimeCounter > EmptyState.flashingInterval {
            lightOn = !lightOn
            flashTimeCounter = 0
        }
    }
    
}
```

`flashTimeCounter`プロパティは経過時間を計測します。
`flashingInterval`プロパティは点滅させる間隔です。
`lightOn`プロパティは計算プロパティです。
`update(deltaTime)`メソッドは、ゲームシーンのフレームが描画されるたびに実行されます。

###ゲームシーンのレンダリング
シーンの`update`メソッドで、ステートマシンの`update(deltaTime)`メソッドを呼び出します。

```ruby:GameScene.swift
class GameScene: SKScene {
    
    var stateMachine: GKStateMachine!
    var previousUpdateTime: TimeInterval = 0
    
    override func didMove(to view: SKView) {
        ...
    }
    
    override func update(_ currentTime: TimeInterval) {
        let timeSincePreviousUpdate = currentTime - previousUpdateTime
        
        stateMachine.update(deltaTime: timeSincePreviousUpdate)
        previousUpdateTime = currentTime
    }

    ...

}
```

`update`メソッドでは、最後に描画更新した日時と現在日時の差分（どれくらい時間が経ったか）を引数にしてステートマシンに渡しています。

###ビルド
シミュレータでビルドします。
`EmptyState`になるまで給水をして、タンクを空にします。
給水機の表示ランプが0.6秒ごとに点滅することが確認できます。

#次回
[【GameplayKit】iOSゲームアプリにおけるStateパターン実践 Final](http://qiita.com/chino_tweet/items/e63e5b8a26dee513f819)では、ステートマシンの挙動を完成させます。
TensorFlowのチュートリアル -MNIST For ML Beginners

#MNISTとは
まず、はじめに今回しようするMNISTについて簡単に説明する
MNISTとは手書き数字(0~9)の画像データセットの名称である。
今回使用するMNISTデータセットの中身は
　　・train :55000枚
　　・validationm :5000枚 
　　・test :  10000枚
の計70000枚で構成されており、手書き数字画像と正解用ラベルのセットとなる。

trainは学習で、validationはハイパーパラメータの学習で、testは作成したモデルの精度を確認する際に使用し、今回のコードでは検証用データは用いていない。

##画像情報
画像一枚は28*28のグレー画像(=1チャンネル)となる　　　
 ![Untitled Diagram (1).png](https://qiita-image-store.s3.amazonaws.com/0/156854/6b0552f5-29bc-43f6-5845-a9831a4d70d3.png)

#作成モデル
今回作成したモデルは以下になる

<img src=https://qiita-image-store.s3.amazonaws.com/0/156854/ed3b5d1e-ff90-5ec7-279a-3b39901b077d.png Height=400px>

層の深さは、入力層と出力層の2層のみのシンプルなモデルである。
入力層のニューロン数はMNISTの画像を一次元の配列に変換した際に縦×横×チャンネル数(28*28*1)の784となり、出力は0~9の計10個となる
この一次元の配列に変換する方法は隣接するピクセル情報の関係や形状を無視しているが今回はこの方法を用いる。
次回にCNNを用いた方法で推定を行いたいと思う。

#ソースコード

```py3:mnist_for_ml_beginners
#TensorFlowのインポート
import tensorflow as tf
#数値計算用ライブラリのNumpuのインポート
import numpy as np
#tensorflow.contrib.learn.python.learn.datasets.mnist.pyの関数read_data_setsをインポート
from tensorflow.contrib.learn.python.learn.datasets.mnist import read_data_sets

#MNISTデータの読み込み
mnist = read_data_sets("MNIST_data/", one_hot=True)

#入力用変数(データ数:Nne 入力データ:784個)
x = tf.placeholder("float", [None, 784])

#重み用変数(0で初期化)
W = tf.Variable(tf.zeros([784, 10]))
#バイアス用変数(0で初期化)

b = tf.Variable(tf.zeros([10]))

#出力(xとWの内積を計算後にバイアスを足した後にソフトマックス回帰を実行)
#ソフトマックス関数を用いることで出力の合計値が1になる(=確率として表せる)
y = tf.nn.softmax(tf.matmul(x, W) + b)

#正解ラベル用の変数(10個のうち１つの値が1で残りが0)
y_ = tf.placeholder("float", [None, 10])

#交差エントロピー誤差を計算(正解ラベルに対応するyの値が大きいほど0に近くなる)
cross_entropy = -tf.reduce_sum(y_ * tf.log(y))

#勾配降下法を用いて交差エントロピー誤差を最小化
#学習率は0.001(ハイパーパラメータ)
train_step = tf.train.GradientDescentOptimizer(0.01).minimize(cross_entropy)

#セッションで作成したモデルを開始
sess = tf.Session()
#初期化
#tf.initialize_all_variables() ->  tf.global_variables_initializer()
sess.run(tf.global_variables_initializer())

#1000回の学習開始
for i in range(1000):
    #バッチ処理(trainから100個をランダムに取得)
    batch_xs, batch_ys = mnist.train.next_batch(100)
    #feet_dictではxとy_のplaceholderに値を置き換え
    sess.run(train_step, feed_dict={x: batch_xs, y_: batch_ys})


#モデルを評価
#argmax(y,1) : yの中で一番大きな値のインデックスを計算
#tf.equal(,) : 値が一致していればTrue、していなければFalse
correct_prediction = tf.equal(tf.argmax(y, 1), tf.argmax(y_, 1))

#tf.cast() : bool型をfloat型にキャスト(True =1, False =0)
#tf.reduce_mean() : 平均値を計算
accuracy = tf.reduce_mean(tf.cast(correct_prediction, "float"))

#精度計算(=MnistのTestを用いる)
print (sess.run(accuracy, feed_dict={x: mnist.test.images, y_: mnist.test.labels}))
```

実行結果の精度は約92%となった

#おわりに
 今回わかったことは、
　　・入力xや正解ラベルy_などはplaceholder
　　・重みWやバイアスbはVariable
を用いるということ。 

そして、このコードを実装すればGPUを用いての計算もしてくれるので、簡単に機械学習を試せるライブラリであることがわかったので今後もTensorFlowを使って色々ためしていきたい

#参考にさせていただいたサイト
1. [TensorFlow MNIST For ML Beginners チュートリアルの実施](http://qiita.com/uramonk/items/c207c948ccb6cd0a1346)
2. [TensorFlow : ML 初心者向けの MNIST （コード解説）](http://tensorflow.classcat.com/2016/03/09/tensorflow-cc-mnist-for-ml-beginners/)
mockitoを使用したログメッセージの検証

Mockitoを利用してUnitテストでログメッセージを検証する方法を記載します。

### 環境

主なライブラリは以下

|ライブラリ|バージョン|
|---|---|
|Junit|4.12|
|mockito|1.10.19|
|log4j|2.6.2|

Mavenを利用しています。詳細なバージョンなどは以下のリンク先を参照してください。
[pom.xml](https://github.com/hiroyuki-kaneko/testforlog/blob/master/pom.xml)

### テスト対象

テスト対象のクラスは以下の通りです。sayHelloメソッドを呼び出すと、ログにメッセージをINFOレベルで出力します。ログ出力はlog4jを利用しています。

```java:HelloWorld.java
class HelloWorld {
    private Logger logger = LogManager.getLogger(this);

    void sayHello(String name) {
        logger.info("Hello " + name);
    }
}
```

### テストコード

ログメッセージを取得するためにAppenderのMockオブジェクトが必要となります。また、Mockオブジェクトから引数の値を取得するためのArgumentCaptorも準備します。

```java:HelloWorldTest.java
    @Mock
    private Appender mockAppender;

    @Captor
    private ArgumentCaptor<LogEvent> logCaptor;
```

上記で準備したAppenderオブジェクトをlog4jに設定します。このとき、mockAppenderオブジェクトがlog4jから呼び出された際にAppenderとして動作するようにMockitoで返却する値を指定しておきます。

```java:HelloWorldTest.java
        Mockito.reset(mockAppender);
        // Appenderの名前を設定
        Mockito.when(mockAppender.getName()).thenReturn("MockAppender");
        // Appenderとして利用できる準備ができていることを設定（下2行）
        Mockito.when(mockAppender.isStarted()).thenReturn(true);
        Mockito.when(mockAppender.isStopped()).thenReturn(false);

        // ROOTロガーを取り出し、Appenderの設定を行う。
        LoggerContext ctx = (LoggerContext) LogManager.getContext(false);
        Configuration config = ctx.getConfiguration();

        LoggerConfig loggerConfig = config.getLoggerConfig(LogManager.ROOT_LOGGER_NAME);

        loggerConfig.setLevel(Level.INFO);
        loggerConfig.addAppender(mockAppender, Level.INFO, null);
        ctx.updateLoggers();
```

実際のテストコードは以下となります。Appenderのappendメソッドからメッセージを取り出します。呼び出し回数もチェックできます。今回は明らかに1回のため1と指定しています。

```java:HelloWorldTest.java
    @Test
    public void outputLogMessage() {
        String name = "World";

        HelloWorld helloWorld = new HelloWorld();
        helloWorld.sayHello(name);

        Mockito.verify(mockAppender, Mockito.times(1)).append(logCaptor.capture());

        String message = logCaptor.getValue().getMessage().getFormattedMessage();
        Level level = logCaptor.getValue().getLevel();
        assertThat(message, is("Hello " + name));
        assertThat(level, is(Level.INFO));
    }
```

### まとめ

Mockitoを利用してAppenderのappendオブジェクトの引数を取得することで、ログメッセージの検証を行う方法を記載しました。これにより、メッセージだけでなく、ログレベルの検証も可能となります。

この方法を知る前は、ログファイルに出力された文字列を解析していたため、とても苦労しました。
もうそんな苦労とはおさらばです。

### コード一式

以下にソースコードを公開しています。試しに動かしたい方は参照してみてください。

https://github.com/hiroyuki-kaneko/testforlog
CSS3 transition をテーブルでまとめてみた

#### 検証・対応ブラウザ

|機器|ブラウザ・バージョン|
|:-----------|:------------|
|windows|IE9以上、Chrome最新、Firefox最新|
|mac|Safari最新、Chrome最新、Firefox最新|
|スマホ|iOS7以上、Android4.1以上|

## transition …… transition効果（時間的変化）をまとめて指定する

|transitionプロパティ|transition-property|transition-duration|transition-timing-function|transition-delay|
|:-----------------|:------------------:|:------------------:|:------------------:|:------------------:|
|プロパティ|CSSプロパティ名|変化に掛かる時間を指定|変化のタイミング・進行割合を指定|変化がいつ始まるか|
|初期値|all|0|ease|0|

#### ・transition-property

|transition-property|CSSプロパティ名|
|:-----------------|:-----------------|
|値|background-color, width, height など|

#### ・transition-duration

|transition-duration|変化に掛かる時間を指定|
|:-----------------|:-----------------|
|値|0.5s, 1s, 5s など|

#### ・transition-timing-function

|transition-timing-function|変化のタイミング・進行割合を指定|
|:-----------------|:-----------------|
|ease|開始と完了を滑らかにする|
|linear|一定|
|ease-in|ゆっくり始まる|
|ease-out|ゆっくり終わる|
|ease-in-out|ゆっくり始まってゆっくり終わる|
|cubic-bezier(数値, 数値, 数値, 数値)|3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定|


#### ・transition-delay

|transition-delay|変化がいつ始まるか|
|:-----------------|:-----------------|
|値|0.5s, 1s, 5s など|

### 使用例

```html
<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<style>
.sample {
  width:200px;
  height:50px;
  background: red;
  transition: width 1s ease 0.1s;/*←transitionの使用例*/
}
.sample:hover {
  width:400px;
  height:100px;
}
</style>
<body>
<div class="sample">transitionの使用例</div> 
</body>
</html>
```

### 使用例（ベンダープレフィックスを付けた場合）

```html
<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<style>
.sample {
  width:200px;
  height:50px;
  background: red;
  -webkit-transition: width 1s ease 0.1s;
  transition: width 1s ease 0.1s;/*←transitionの使用例*/
}
.sample:hover {
  width:400px;
  height:100px;
}
</style>
<body>
<div class="sample">transitionの使用例</div> 
</body>
</html>
```

### 使用例（複数付けた場合）

```html
<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<style>
.sample {
  width:200px;
  height:50px;
  background: red;
  transition:  background 1s ease 0.1s, width 1s ease 0.1s, height 1s ease 0.1s, color 1s ease 0.1s ;/*←transitionの使用例*/
}
.sample:hover {
  background: blue;
  width:400px;
  height: 150px;
  color: #fff;
}
</style>
<body>
<div class="sample">transitionの使用例</div> 
</body>
</html>
```

各ブラウザ：ベンダープレフィックス検証
http://caniuse.com/#search=transition

参考元URL
http://www.htmq.com/css3/transition.shtml
http://www.css-lecture.com/log/css3/css3-transition.html
http://scene-live.com/page.php?page=76
http://11neko.com/css3-transition/
iOS向けコンバージョントラッキングの適用メモ


# 前置き
以下のページに沿ってiOS向けに、 AdWords Conversion Tracking SDKを導入しようとした。
https://developers.google.com/app-conversion-tracking/ios/?hl=ja

# 対応
基本的にはドキュメント通りに導入できた。

# ツまったトコ Part1
## SDKのパス
Xcodeプロジェクトの
[Build Settings > Search Paths > Library Search Paths]
以下2件追加
**$(PROJECT_DIR)/GoogleConversionTrackingSDK-iOS-3.4.0**
**\"$(SRCROOT)/Libraries\"**

※2つ目を指定しないとなぜか下のエラーが出た……入っているのに……

```
ld: library not found for -liPhone-lib
clang: error: linker command failed with exit code 1 (use -v to see invocation)
```
参考ページ：http://kan-kikuchi.hatenablog.com/entry/2013/11/12/070553

# UnityのPostProcessBuildを使って自動化
[UnityでARC設定を編集する方法](http://qiita.com/nir_takemi/items/d4d845282ebfe049230c)でXcodeプロジェクトを編集して、基本的には対応。

# ツまったトコ Part2
リンカーフラグ「-ObjC」の追加で、「Other Linker Flags」の設定パラメータが「OTHER_LDFLAGS」であった。。
http://answers.unity3d.com/questions/982417/how-to-specify-objc-in-other-linker-flag-in-xcode.html
Live2Dキャラにボイスに合わせて口パクさせたい（CRIでの実装メモ）


# 環境
・Unity5.3.4p1
・CRI Atom Craft 2.17.03
・CRIWARE Unity Plug-in for Smartphone 2.77
・Live2D Cubism SDK2　Unity 2.0

# 前置き
・Live2Dをボイスに合わせてリップシンクしたいと思った。
・Live2Dさん側で、事前にリップシンク用のモーションを出力する[ツール](https://sites.google.com/a/cybernoids.jp/cubism2/tools/lipsync/-2)がある。
　けど、全ボイスに対してそんなんできない……
・Unityの[オーディオ機能の波形の振幅](http://tips.hecomi.com/entry/2014/11/11/021147)使えばできそう……！
・でもCRIでは……
　
# CRIで音の大きさ(振幅)を取得
CRI Atom Craftのバスセンドを利用すればできそう
## CRI Atom Craft側
①バスの追加
　![SS_Cri1.PNG](https://qiita-image-store.s3.amazonaws.com/0/87713/1ac5afae-f805-eca1-57d9-7bf3fd52e449.png)

②バスセンド設定(キューに対して)
　![SS_Cri2.PNG](https://qiita-image-store.s3.amazonaws.com/0/87713/2a1bd44e-e36d-5c9b-7b6d-0c8e464189bc.png)

## Unity側(バス情報の取得)
①CriAtom(スクリプト)コンポーネントのDSPBusSettingで、CRI Atom Craftで設定したバス設定名をInspector上で設定する

②スクリプトで

```csharp:SoundManager.cs
public const string	DspBusSettingName	= "DspBusSetting_0";
public const int	SendBusVoiceIndex		= 3;　//★3＝バスのIndex(例だとBUS_Voice)

public void Start()
{
	//バス解析器の設定
	CriAtomEx.AttachDspBusSetting(DspBusSettingName);
	CriAtom.SetBusAnalyzer(true);
}

public float GetVoicePeakLevel()
{
	return CriAtom.GetBusAnalyzerInfo(SendBusVoiceIndex).peakLevels[0];
}
```

# Live2Dのお口の制御
Live2Dのサンプル「SampleApp1」がベース。
L2DBaseModel.setLipSyncValueを用いることで、リップシンク制御が可能。

```csharp:抜粋コード
//★それぞれLAppModelの基底クラス「L2DBaseModel」のメソッド
live2dModel.setLipSync(true);
live2dModel.setLipSyncValue(SoundManager.GetInstance().GetVoicePeakLevel());　　//★_live2dModelはL2DBaseModelのサブクラスのオブジェクト
```


#参考
・[Unity のオーディオの再生・エフェクト・解析周りについてまとめてみた](http://tips.hecomi.com/entry/2014/11/11/021147)
・[サウンド助け合い所 @ ウィキ](http://www53.atwiki.jp/soundtasukeai/pages/22.html#id_3be6e009)
世界（開発環境）は混沌としているだがそれがいい

備忘用 あとで時間があったら埋めてく

# Java/Scala

## mvn

```
mvn archetype:generate -DgroupId=my.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart \
   -DarchetypeVersion=1.4 -DinteractiveMode=false
```


## gradle

```
# create project
mkdir prj && cd prj
gradle init -type java-application
```


## sbt

```
sbt new scala/scala-seed.g8
cd <prj dir>
sbt new clean compile
sbt run
```

# Python

## poetry

```
poetry init

poetry add

poetry install

poetry run
```

## pyenv

```
pyenv install v2.7.10
pyenv virtualenv v2.7.10 <env-name>
pyenv activate <env-name>
pyenv deactive
```
## pipenv

```sh
# install
sudo pip install --upgrade pip
pip3 install pipenv

# setup
pipenv install -three
pipenv install <package>

# setup by requirements.txt
pipenv install --three -r requirements.txt

# activate
pipenv shell

# exit
deactive
exit
```


## Jupyter

```
# start
jupyter notebook

# show list
jupyter notebook list

```

# JS

## npm

```
# setup (initialize)
npm init

# install
npm install

# run script
npm run xxxx

# version check
npm outdated

# ci
npm ci

## if use webpack
npm install -D npx
npm install -D webpack webpack-cli
```

## webpack

```
# setup (initialize)
npx webpack init

# run
npx webpack --config webpack.config.js

# configuration package.json
vi package.json
scripts: { "build": "webpack" }
npm run build
```


## rollup

# C++

## gyp

## make


## cmake


```
cmake -Gninja
```

# golang

## linter

```shell
curl -sfL https://raw.githubusercontent.com/golangci/golangci-lint/master/install.sh| sh -s -- -b $(go env GOPATH)/bin v1.20.0
```


## go mod

```shell
go mod init github.com/myrepo/package

# dependency
go mod download

# vedoring
go mod vendor
```

## configuration, develop tools

```
sudo apt install direnv

go get github.com/oxequa/realize
```

## glide deprecated

```
glide install
glide get <package name>
```
## dep deprecated

```
dep init
dep ensure
dep ensure -add <package name>
dep status
```

# Haskell

## setup platform

```
sudo apt install haskell-platform
             # `.
             #  |- ghc
             #  |- cabal
             #  |- stack
             #  `- and more
sudo apt install haskell-stack
```

see https://www.haskell.org/platform/


## stack

## cabal


# Others

## Emacs

### C++

* [Emacs で C/C++ の開発環境をめちゃガチャパワーアップしたまとめ](http://futurismo.biz/archives/3071)
* [code guide](https://google.github.io/styleguide/cppguide.html)

## VSCode

## lang in

* [Golang](https://code.visualstudio.com/docs/languages/go)


### Optout

* 設定＞ Search "telemetry.enabledTelemetry" > ユーザー設定 "telemetry.enabledTelemetry": false


## Vagrant

```
# add box

$ vagrant box add {title} {url}
$ vagrant init {title}
$ vagrant up

```

# Configuration Management

## Ansible

```
EXT_VAR1="" EXT_VAR2=0.1 ansible-playbook -i hosts investory_file.yml --extra-vars="show_debug=on"
```

## Terraform

```
$ terrafrom init
$ terraform plan
$ terraform apply
$ terraform destroy
```



## My Links

* [gcloud](https://qiita.com/YooWaan/items/c5d0f1228bc3b7ff1adf)
Rubyを2.4に上げたら4.2系列のRailsが stack level too deep で死ぬ時の対処法

Ruby2.4 が出たので軽率にアップデートするとこんなエラーが出ました。

```.sh
/Users/ironsand/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-4.2.7.1/lib/active_support/core_ext/numeric/conversions.rb:121: warning: constant ::Fixnum is deprecated
/Users/ironsand/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-4.2.7.1/lib/active_support/core_ext/numeric/conversions.rb:121: warning: constant ::Bignum is deprecated
/Users/ironsand/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/business_time-0.7.6/lib/business_time/core_ext/fixnum.rb:6: warning: constant ::Fixnum is deprecated
/Users/ironsand/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-4.2.7.1/lib/active_support/core_ext/numeric/conversions.rb:124:in `block (2 levels) in <class:Numeric>': stack level too deep (SystemStackError)
```

いくつかの警告と`stack level too deep`エラーが`active_support`の`numeric`で出てますね。

### 対策

Railsの4.2系の最新の`4.2.7.1`でもまだ対応できてないようなので、githubから最新の安定版ブランチをとってきましょう。

```.rb:Gemfile
gem 'rails', github: 'rails/rails', branch: '4-2-stable'
```

### 参考

https://github.com/rails/rails/pull/25161
Pepperからの連絡を受け取る手段を試してみた

たとえば、Pepperが受付係として活躍する場があったとしたら来客者が訪れたことをどのように伝えたらいいのだろう。
一般に有人の受付の場合には、受付の人が内線電話で担当者に連絡し呼び出してくれる。Pepperに同様のことをやらせることはまだまだハードルが高いので、すぐにPepperができそうな手段を調べてみた。すると、下記の２つの記事が目に留まり試してみることにした。

記事１：[キノコならわかる！ Pepperからgmailを送信](http://qiita.com/h2m_kinoko/items/4792518db7ed8356631c)

記事２：[slack - ロボットライブラリ](https://robo-lib.com/projects/tag_search/query:slack)

一つは「メール送信」で、もう一つは「slackによるメッセージ送信」である。


#メール送信

（概要）
Choregrapheのボックスライブラリの中にある［Send E-mail］ボックスを使ってPepperからメールを送信する。


実装方法については、記事１の内容で十分に理解できたので重複での記載はしません。
ただし、実装するにあたって気になったことについて私なりに書き留めることにします。

###気になったこと

***Choregrapheの［Send E-mail］ボックスのみの設定ではメール送信できなかったこと***

>「gmail側のアカウント設定を変更する必要がある」
何の変更をするかと言うと、”「安全性の低いアプリの許可」という項目を有効にする”必要があった。
>>これはセキュリティを甘くしろ、と言っているようなもので実運用にはお薦めできない。
また、社内のメール設定ではこの設定すら変更できないようになっている。


今回は動作テストということでPepperからメールが送信できることを優先して確認を行ったため、記事の記述通りに設定を変更して確認した。
使用したメールアドレスは、当初Pepperの導入時にあらかじめPepperのセットアップ用にgmailアドレスを作成したものがあったため、それを利用した。

【参考１】Pepperからの受診メール
![pepper-mail.png](https://qiita-image-store.s3.amazonaws.com/0/76385/a6755118-cd39-e5ea-dd27-4b9ef9c0e786.png)


###課題
実際に運用を含めた実装の場合には送信に使用するメールアドレス（メールサーバー）によって、このあたりの内容の改善が必要となる。



#slackによるメッセージ送信

たまたま部門内で**slack**も使用していたため、Pepperからのメッセージ送信の確認をしてみた。
（概要）
記事２のロボットライブラリで公開されていた[SlackLogger]ボックスにてPepperとslackの連携を確認した。
[SlackLogger]ボックス自体はChoregrapheのダイアログウィンドウのようにPepperが聞いたり、話したりしている会話をslackにメッセージとして送るものだった。

【参考２】[SlackLogger]ボックスを使ったSlack画面
![slacktest.png](https://qiita-image-store.s3.amazonaws.com/0/76385/40eec305-b8ab-4e85-de24-9fe49998fc4d.png)


ここでは、以前試した顔認証アプリを利用して部屋に入ってきた人をPepperが認識したら侵入者通知としてSlackに通知する。と言うようなことを試してみた。

###気になったこと

ライブラリ提供されていた[SlackLogger]ボックスがとても役に立ち、思ったよりも簡単に実装することができた。
ただし、運用を考えたときにSlack側の仕様をあまり理解していなかったため、**特定の人にメッセージを送る方法**に戸惑った。

【参考３】部屋に入ってきた人を認識してSlackへメッセージを送信
![Slacktest2.png](https://qiita-image-store.s3.amazonaws.com/0/76385/07df4b7f-b580-7fe8-1b45-71e94d2bf410.png)



#まとめ
メール送信、SlackともにPepperからメッセージを送信すること、仕組みの中でPepperから連絡を受ける手段としての機能は満たせた。
しかし、これらを現実の運用として実装するには、メールサーバとの接続要件の見直しや、Slack自身の導入要件をしっかりと定めた上でPepperの役割を決める必要があると思います。
また、これら以外にも直接PBXと連携してみたり、他の手段でのコミュニケーションの取り方など今後も技術情報へのアンテナを張り最善のソリューションが構築できるようにしていきたいと考えます。
uGUIでテキスト量に合わせた領域サイズを取得する


# 前提
・テキストの量からダイアログを可変にしたい状況
・テキストの表示領域サイズを求められれば、ダイアログのサイズも決定できそう！

# テキスト領域サイズの取得について
①TextコンポーネントのあるGameObjectへ***ContentSizeFitter***コンポーネントを追加する
![b8f2c183-88f1-f5c8-ae6b-af470c5160fd.png](https://qiita-image-store.s3.amazonaws.com/0/87713/798a1fa9-f781-ed87-d13d-c0927fdf1994.png)
と、テキスト量によってサイズが決まるようになる。

# 入力を変えてみる
![cf0dddd4-c484-3fed-7d5a-e88978ab77b9.png](https://qiita-image-store.s3.amazonaws.com/0/87713/ffe8da9d-aec4-8f8e-e6a8-6689d720988c.png)

これでダイアログからテキストがはみ出さないようにできそう。


# 参考
Unity ContentSizeFitterコンポーネントの使い方例
 http://qiita.com/cchocor/items/2e401fd286d0576c25d1
uGUIでのスクロール位置をスクリプトから設定したいメモ


# 前置き
・女の子の一覧とか、アイコンを動的にズラーッと並べたい状況が出来た
・ズラーッと並べた後に、スクロールの表示位置を変更したくなった
　※スクロールビューのサイズを動的に設定してGameObject(アイコン等)を子にすると、デフォルトのスクロール位置が変な位置になった

# 対応１（ダメなやり方）
・ScrollRect.Contentの位置(RectTransform.localPosition)を計算して設定する
　 → 計算処理が無駄＋微妙にズレる

# 対応２（多分ベストなやり方）
・以下の属性で設定する
　　↑／↓：　ScrollRect.verticalNormalizedPosition (0.0f ～ 1.0f)
　　←／→：　ScrollRect.horizontalNormalizedPosition(0.0f ～ 1.0f)


# 参考
[Unity Document－ScrollRect](https://docs.unity3d.com/jp/current/ScriptReference/UI.ScrollRect.html)
1行でTwitter投稿を実装する with Unity

ネットでググるとiOSではobjc,androidではJavaとかでネイティブインテントを呼び出す解説などが見つかりますが、実はtwitterのWeb Intent URLを使うとその必要はないです。

```csharp

Application.OpenURL("https://twitter.com/intent/tweet?text=hello&hashtags=way");

```

これを1行書くだけで、PCならブラウザが起動し、iOS, AndroidならTwitterアプリの投稿画面が起動します。注意が必要なのは、URLなので日本語文字などはWWW.EscapeURLなどをしてあげる必要があるという点です。


以上。
uGUIのスクロールビューにボタンを並べるとボタンが反応しにくくなる際の対応


# 前置き
XperiaZ3で「スクロールビュー上にあるボタンが押し辛い」という事象に出会う（他の端末では特段気にならないので端末依存？）

# 環境
Unity：5.0.1

# 問題
Unity(uGUI)のUIイベントシステム(EventSystem)の設定にて、***Drag Threshold(ドラッグ検知閾値)***とういうものがある。
ただしデフォルトが***5 (5px指がずれたらドラッグ判定)***となっている。
そのため、ちょっと触れたらスクロール状態になってしまい、ボタンが押せないという状態となってしまった。

# 解決方法
[EventSystem](http://tips.hecomi.com/entry/2014/09/25/233823)の「Drag Threshold」を***「15」***に設定。
![c8ab6432-4e36-240c-9d83-1567fd21b68d.png](https://qiita-image-store.s3.amazonaws.com/0/87713/c974e63f-7ee0-0b94-146a-fe95bcd51cfb.png)



# 参考
・【宴】スマホ上でのボタンの反応について
http://madnesslabo.net/utage/?dwqa-question=%E3%82%B9%E3%83%9E%E3%83%9B%E4%B8%8A%E3%81%A7%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E5%8F%8D%E5%BF%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

・Unity 4.6 から利用できる UI での EventSystem をカスタムする方法について調べてみた（EventSystemについての記事）
http://tips.hecomi.com/entry/2014/09/25/233823
Ruby で Proc を即時実行する代わりに begin 式で代入する

以前は、例えば、下のようなコードを書くことが度々ありました。

```ruby:lambdaパターン
@logger ||= -> {
  logger = MyLogger.new
  logger.level = Logger::DEBUG
  logger
}.call
```

これは Proc オブジェクトを作って、その場で実行しています。
他の言語でいうところの「無名即時関数」のような使い方です。

が、引数を取らないなら、 `begin .. end` でいいですよ、と教えてもらいました。

```ruby:begin-endパターン
@logger ||= begin
  logger = MyLogger.new
  logger.level = Logger::DEBUG
  logger
end
```

## ベンチマーク

折角なので、ベンチマークを取ってみました。

```ruby:bench-block-assignment.rb
#!/usr/bin/env ruby

require 'benchmark'

n = 1_000_000

Benchmark.bm(7) do |x|
  tn = x.report('lambda:') do
    n.times do
      foo = -> {
        :foo
      }.call
    end
  end
  tm = x.report('begin:') do
    n.times do
      foo = begin
        :foo
      end
    end
  end
end
```

実行結果は下の通り。
概ね10倍弱ほど実行効率が違います。

```bash
% ruby bench-block-assignment.rb
              user     system      total        real
lambda:   0.390000   0.000000   0.390000 (  0.397704)
begin:    0.050000   0.000000   0.050000 (  0.049975)
```

詳しくは追ってませんが、lambda を使うケースでは、Procを作るコストや関数呼び出しのオーバーヘッドが掛かるのかな、と想像しています。

## (追記) 別解: tap を使う

今回のコード例だと、tap を使った方が好ましそう、と[コメント](#comment-70ebc429529c7bf87206)で教えてもらいました。

```ruby:tapパターン
@logger ||= MyLogger.new.tap do |logger|
  logger.level = Logger::DEBUG
end
```

## 参考

- https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#begin
digdagのtd_wait_table>とtd_wait>を使ってみた

digdag（正確にはTreasureData Workflow）の`td_wait_table>`, `td_wait>`を使ってみたのでそのメモです。

# ジョブフロー

こんなフローで試してみました。

１. `td_wait_table>`で「wf_wait_target」というテーブルができるのを待つ
２. 「wf_wait_target」にクエリなげる
3. `td_wait>`で「wf_check」テーブルに100レコード以上のデータがストアされるのを待つ
4. 「wf_check」テーブルの内容を「export_wf_check」にエクスポート

digファイル、SQLは以下になります。

## digファイル

```yaml:td_wait.dig
timezone: Asia/Tokyo

schedule:
  daily>: 09:00:00

_export:
  td:
    database: test

+task_wait_table:
  td_wait_table>: wf_wait_target

+task1:
  td>: queries/count_wf_wait_target.sql

+task_wait:
  td_wait>: queries/check_record.sql

+task2:
  td>: queries/export_wf_check.sql
  create_table: export_wf_check

```

## SQL

```sql:count_wf_wait_target.sql
SELECT
	count(1) as cnt
FROM
	wf_wait_target

```

```sql:check_record.sql
SELECT
	count(1) > 100
FROM
	wf_check

```

```sql:export_wf_check.sql
SELECT
	*
FROM
	wf_check

```

# ジョブを実行してみる

作成したdig,SQLをTreasureData WorkflowにPushしてさっそく実行してみます。

```bash
td wf push wf_sample
td wf start wf_sample td_wait --session now
```

ここからはTreasureData Workflowのコンソールで確認していきます。

## td_wait_table

「wf_wait_target」というテーブルができるのを待っています。
30秒に1度テーブルの存在をチェックしているのがわかります。

![tdwait11.png](https://qiita-image-store.s3.amazonaws.com/0/48307/3ead4585-3b40-4b0c-3f39-4d917ee62d12.png)

## td_wait（レコード数）チェック

「wf_wait_target」テーブルを作成すると次に進んで、check_record.sqlを実行し、100行以上になっているかチェックしています。
Timelineも進んでいますね。

![tdwait12.png](https://qiita-image-store.s3.amazonaws.com/0/48307/b541304a-4b3c-9db5-5391-b7a10040c1ef.png)

## 実行完了

「wf_check」テーブルに10,000行をInsertすると、最後のエクスポートまで無事完了しました。

![tdwait13.png](https://qiita-image-store.s3.amazonaws.com/0/48307/dd0b94ca-f091-eca0-f5c8-6e56f1305a18.png)

# さいごに

digdagのドキュメントにも記載されていますが、td_wait_tableは単純なテーブル有無だけではなくレコード数も条件に入れられるので非常に使い勝手がよさそうに思えます。
また、td_waitはtrueを返すまで待つので、単純な件数以外でも使えるのがいいですね。

ドキュメントには書いてないですが、このwaitにタイムアウトはあるのだろうか？

（digdagドキュメント）
* [td_wait_table](http://docs.digdag.io/operators.html#td-wait-table-waits-for-data-arriving-at-treasure-data-table)
* [td_wait](http://docs.digdag.io/operators.html#td-wait-waits-for-data-arriving-at-treasure-data-table)