OmniAICreator/Qiita-1.07M huggingface dataset:
機械学習論文読みメモ_49


[FireCaffe: near-linear acceleration of deep neural network training on compute clusters](https://aspire.eecs.berkeley.edu/wp/wp-content/uploads/2016/02/FireCaffe.pdf)
Deep learningの学習コストの高さは問題である。
本論で提案するFireCaffeはマルチGPUクラスタに対して良くスケールするツールである。
また加えて効率化を行うためのいくつかのbest practicesを提案する。
分散処理を行うにあたり、クラスタ間通信コストがボトルネックとなる。
FireCaffeではdeep learning学習性能を下げる事なく通信コストを低減させる。
これを実現するために、従来のparameter server approachではなく、reduction tree approachに基づくアルゴリズムを提案する。

[SqueezeNet: AlexNet-level accuracy with 50x fewer parameters](https://arxiv.org/pdf/1602.07360.pdf)
CNNでは、同程度の性能を維持したまま様々なネットワーク構造を取る事が可能である。
中でもできる限り小さなネットワーク構造を持つ事は計算量や分散処理における通信コストの観点から有用である。
本論で提案するsqueeze netはalexnet相当の性能を維持しつつパラメータ数を５０分の１にする事が可能である。

[Using FastWeights to Attend to the Recent Past](https://arxiv.org/pdf/1610.06258.pdf), NIPS2016
従来のニューラルネットワーク構造は、現在、あるいは今までの入力と、それらに適用する重みを変数としてのみ扱ってきた。
しかし実際においては変数をこれらに限定する必要はない。
本論で提案するネットワークでは、重みは通常よりも変化しやすく、しかし入力そのものよりは遅くなるようにしたものを利用する。
このようなfast weightは直近に関する一時的なメモリとして働き、自然な形で過去に関するattention機構として働く。
この機構はsequence-to-sequence learningを行う上で有用となる。
try! Swift Tokyo 2017 - Swift on Android(1)

# try! Swift Tokyo 2017
3月2日〜3日の二日間、東京で開催された `try! Swift` というカンファレンスに参加してきました。

[try! Swift Tokyo](https://www.tryswift.co/tokyo/jp)

世界中の Swift エンジニアと交流できる貴重な機会で、できれば二日間がっつりと参加したかったのですが、仕事の都合により両日とも半日ずつの参加となりました。3月4日(土)にはハッカソンやハンズオンも開催されたようですが、こちらもプライベートな事情で参加できず残念でした。

try! Swift の中でも、個人的に興味深かったテーマについて紹介していきたいと思います。


# ￼Swift on Android

まず1つ目は SwiftによるAndroidアプリに関するセッションです。

私はこれまで iOSアプリとAndroidアプリの両アプリを開発してきましが、ここ2,3年は Androidアプリ開発をメインで行っており、モダンな言語 Swift を使って、どの程度 Androidアプリが開発できるのか、大変興味深いテーマでした。

## Eric Wing さん

発表者の Eric Wing ([Twitter](https://twitter.com/ewingfighter)) さんは、クロスプラットフォームでのゲーム開発を専門とされる方です。
`￼Beginning iPhone Games Development` という書籍も執筆されたり、CMake などいくつかのOpenSourceプロジェクトにも参加されています。
このため、単に Swift で Android アプリを開発する、というテーマではなく、Swift でマルチプラットフォームなアプリ開発を行う、という大きな壮大なテーマの一部として Androidアプリの開発を取り上げた、という感じでした。

## ￼Ouroboros

セッション中、`Ouroboros` と呼ばれる、蛇が自分の尻尾を食べるイラストが何度か出てきました。 `What’s old is new again` という意味で、このセッションの中に新しいことはなく、古い概念を適用するだけ、ということでした。

- コンパイラとネイティブコード
- C言語とアプリケーションバイナリインターフェス(ABI)
- Unix / Linux / Android

## C言語最強

C言語は最強というお話。
- C言語は互換性が高く、全てのプラットフォームでコンパイラが用意されている
- C ABI は安定しており全てがその上に構築されている
- 多くの言語がCとのインターフェースを持っている
- 何十年も昔から存在するソフトウェアで今もなお使われている


## 言語とライブラリの切り分け
開発言語とライブラリについての切り分けが重要というお話。

#### Native iOS App の場合
swiftCore
↓
Swift C library , Darwin
↓
libdispatch, Foundation
↓
UIKit, CoreAudio

#### Native Android App の場合
swiftCore
↓
Swift C library , Bionic
↓
Android SDK, OpenSL ES

### ross-platform Game
swiftCore
↓
SDL, Open AL


## Getting Started with Swift on Android ?
AppleがGitHubで [Getting Started with Swift on Android](https://github.com/apple/swift/blob/master/docs/Android.md) というドキュメントを公開しており、このタイトルからは 「Swift でAndroid アプリが開発できるんだ！！」 と期待してしまうのですが....

### 手順1
[1. Downloading (or building) the Swift Android stdlib dependencies](https://github.com/apple/swift/blob/master/docs/Android.md#1-downloading-or-building-the-swift-android-stdlib-dependencies)

_Swift stdlib をダウンロードしろ_

→ わかる

### 手順2
[2. Building the Swift stdlib for Android](https://github.com/apple/swift/blob/master/docs/Android.md#2-building-the-swift-stdlib-for-android)

_Swift stdlib をビルドしろ_

→ わかる

### 手順3
[3.Compiling hello.swift to run on an Android device](https://github.com/apple/swift/blob/master/docs/Android.md#3-compiling-helloswift-to-run-on-an-android-device)

_hello.swift をコンパイルしてAndroidデバイスで実行しろ_

- hello.swift : `print("Hello, Android")`
- 実行 : `adb shell ...`
- 出力 : `Hello, Android` (コンソール上に)

→ Why ?!

UIをもつアプリを開発したいのに、コレジャナイ...

（続く）
Shadertoy はじめました week #3

![gemclock.png](https://qiita-image-store.s3.amazonaws.com/0/2585/f524c04b-72db-68a6-2edd-9ccd479376a8.png)
https://www.shadertoy.com/view/MsXcWr

# Week #3
[前回、割とまともな屈折ができた](http://qiita.com/keim_at_si/items/c741f57aa42e589ac057)ので、やっぱりダイヤモンドをやってみたいということで、Brilliant-cut の距離関数の導出に挑戦しました。

```brilliant-cut.glsl
float dfBC (in vec3 p, float r) {
  float angleStep = P2/8.;
  float crownAngle = radians(33.0);
  float pavilionAngle = radians(41.0);
  float tableArea = 0.58;
  float starArea  = 0.5;
  float starAngle = crownAngle * 0.640;
  float bezlAngle = crownAngle;
  float ugrdAngle = crownAngle * 1.209;
  float pavlAngle = pavilionAngle;
  float lgrdAngle = pavilionAngle * 1.049;

  vec3 vHlfStep = vec3(cos(angleStep/2.), 0, sin(angleStep/2.));
  vec3 vQrtStep = vec3(cos(angleStep/4.), 0, sin(angleStep/4.));

  float a = floor(atan(p.z,p.x)/angleStep+.5)*angleStep, c=cos(a), s=sin(a);
  mat3  m = mat3(c,0,s,  0,1,0,  -s,0,c) * r;
  vec3  q = inverse(m) * p;
  q.z = abs(q.z);

  vec3 nmlBezel = vec3(sin(bezlAngle), cos(bezlAngle),0);
  float fcBezel = dot(q, nmlBezel) -  sin(bezlAngle);
 
  vec3 nmlUGird = normalize(vec3(vQrtStep.x*sin(ugrdAngle),  cos(ugrdAngle)*vQrtStep.x, vQrtStep.z*sin(ugrdAngle)));
  vec3 nmlLGird = normalize(vec3(vQrtStep.x*sin(lgrdAngle), -cos(lgrdAngle)*vQrtStep.x, vQrtStep.z*sin(lgrdAngle)));
  float fcUGird = dot(q, nmlUGird) -  dot(nmlUGird, vQrtStep*vQrtStep.x);
  float fcLGird = dot(q, nmlLGird) -  dot(nmlLGird, vQrtStep*vQrtStep.x);

  vec3 nmlStar  = vec3(sin(starAngle)*vHlfStep.x,cos(starAngle),sin(starAngle)*vHlfStep.z);
  float starDst = (1.-tableArea) * (1.-starArea) * (tan(ugrdAngle)/tan(starAngle)-1.) + 1.;
  float fcStar  = dot(q, nmlStar) -  starDst * sin(starAngle);

  vec3 nmlPMain = vec3(sin(pavlAngle), -cos(pavlAngle),0);
  float fcPMain = dot(q, nmlPMain) -  sin(pavlAngle);

  float fcTable = q.y -  (1.-tableArea) * tan(bezlAngle);
  float fcCulet = - q.y -  tan(pavlAngle) * .96;
  float fcGirdl = length(q.xz) - .975;

  return max(fcGirdl, max(fcCulet, max(fcTable, max(fcBezel, max(fcStar, max(fcUGird, max(fcPMain,fcLGird)))))));
}
```

もてる数学知識を総動員して挑んだものの、最後は力業でねじ伏せました（```starAngle```、```ugrdAngle```、```lgrdAngle```の謎係数が手動調整値）。手動調整では、傾斜が0.1度違うだけでも、きれいな三角形にならないというシビアな職人世界を経験でき、宝石職人スゲーって思いました（小並感）。

一応どうにか Brilliant-cut の距離関数を導出できたので、見せ方を考えた結果、繰り返しによって等間隔に無限にばらまくと、すごくチープに見えることが分かったため、計算負荷はほとんど変わりませんが、表示12個に限定することにしました。
また、着色や巨大化もおもちゃ感がでてこれまたチープに見えてしまうので、あまりやりたくなかったのですが、無着色、小粒ダイヤモンドの絵ずらがあまりにも地味だったので、今の形に落ち着きました。
宝石の表現って正確なレンダリング以上に、配置による心理的効果が重要だなと感じました。面白い。

# Tips #3
成果物3つ目です。
[GEM Clock](https://www.shadertoy.com/view/MsXcWr)
先日、Tipsもようやく[一つ目を書いてみた](http://qiita.com/keim_at_si/items/74592439e76052c4f99f)のですが、思った以上に難しく非常に時間がかかりました。これ全部かけるのかな...
- オリジナル形状（Brilliant-cut）の距離関数の導出
- レンダリングパスの設計による計算負荷の調整
- 時計の表現
- 円周配置
- バウンドモーション関数
[Unityで学ぶC#] 12 static

## staticとは
インスタンスごとではなく，　クラスが直接持っている，1つしかない値です．

まずはスコア等1つしかないものをこれを使って実装してみましょう。

---
## サンプル
まずはScoreクラスを作りましょう．
<img width="500" alt="スクリーンショット 2017-03-05 3.03.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/2943c3d1-74c2-3c8f-f992-e62b9fc7cd2c.png">

---
## サンプル
別の適当なクラスを作ります．
<img width="500" alt="スクリーンショット 2017-03-05 3.07.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/a03c8a54-f80c-c9ec-454f-f9aca50c5f49.png">

---
## staticのここがすごい
`クラス名.変数名`でどこからでもアクセスすることができる．

Unityだと通常他のスクリプトと連携するためにはpublic や GetComponentで取得する必要があるが，
それがいらない．

---
関数も同様に使うことができる．

```
public static void AddScore(int point){
	score += point;
}
```

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Example12 : MonoBehaviour {

	void Start () {
		Score.score = 10;
		Score.AddScore (12);
		Debug.Log (Score.score);
	}
}
```

---
# おわり
Slack APIのTokenの取得・場所（Legacy tokens）

# 追記部分
こちらの記事はレガシーなトークンを使っていますので、
[Slack API レガシーじゃないほうのTokenについて](http://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21)に新しい記事を書きました。
こちらの記事のトークンは「Slackのほぼすべての機能を使えるToken」で、
ここのTokenが流出すればチャンネルの削除とか好き放題できると思います。
リンク先は「必要な機能にしかアクセス権を与えないToken」になります。

必要な方を選んでお使いください。

# Slack API - Tokenの場所と取得
作成済みの場合どこにあるかわからなくて
20分くらい迷ったので同じく迷う方いたらと思って、投稿しておきます。

## token作成済
> https://api.slack.com >> Custom integrations >> legacy-tokens
つまりここ >> https://api.slack.com/custom-integrations/legacy-tokens

チーム名とTokenは隠してますが、ここから再発行とチームすべてのTokenを確認することができます。


<img width="1040" alt="スクリーンショット 2017-03-05 2.18.47.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/112929/b84926e6-1e45-9c3b-9884-3c642e4e29a6.jpeg">


## token未作成
> https://api.slack.com/web >> WebAPI >> Authentication
ここ >> https://api.slack.com/web

ここに未作成の場合は [ Create Token ]と出て来るはずなので、作成してみてください。

<img width="1031" alt="スクリーンショット 2017-03-05 2.19.19.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/112929/109c5430-7fec-c4f8-af1c-803228c1e824.jpeg">
[Unityで学ぶC#] 10 関数

## 関数とは
一言でいうと， 命令です．

データを使って，処理を行います．

---
## 目次
- 数学の関数を実装してみる
- 関数
- 引数のある関数

---
## 数学の関数
数学でおなじみの関数といえば
`y = 2x`とかです．

プログラミングでこれを実装してみましょう．

---
## サンプル
```
public class Example10 : MonoBehaviour {

	void Start () {
		float y = Func1 (2); // xに2が入る場合
		Debug.Log (y);

		y = Func1 (50); // xに50が入る場合
		Debug.Log (y);
	}

	// 2倍された数が返される関数
	float Func1(float x){
		return 2 * x;
	}

}
```

---
## 実行結果
2倍された数が表示されていますね

<img width="500" alt="スクリーンショット 2017-03-05 2.11.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/cf5fc6e5-706e-a2ce-0e27-9e69ca13da25.png">

---
関数の書き方

```
// 2倍された数が返される関数
float Func1(float x){
	return 2 * x;
}
```

返り値は関数を使用した結果のようなもので，　上では2倍した結果が返されています．
渡されるパラメータ x にあたるものを引数と呼びます．
私はひきすうと読んでいます．

```
返り値の型 関数名(パラメータの型 変数名){
	処理
	return 返り値;
}
```

---
## サンプル２ おつかい
引数も戻り値もない関数はこう書くことができます．
![otsukai.gif](https://qiita-image-store.s3.amazonaws.com/0/113504/c276542e-c2c9-cbda-1271-8781b9de9156.gif)

---
## サンプル２ おつかい
書く場所に注意です．

<img width="700" alt="Assembly-CSharp - 10 Func_Example10.cs - MonoDevelop-Unity.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/113504/8cda5797-004d-7dd3-5f47-88cc008c0635.jpeg">

---
## 引数のない関数の呼び方
`関数名();`です
<img width="646" alt="スクリーンショット 2017-03-05 2.21.39.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/113504/793dbb90-c790-7755-48bd-b44e65dd5bb7.jpeg">

---
## 引数を使うと便利
使い回すことができます．
<img width="500" alt="スクリーンショット 2017-03-05 2.29.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/2789a2c2-97c6-2665-0710-4ab1b95187d6.png">

---
<img width="249" alt="スクリーンショット 2017-03-05 2.28.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/82263986-39ff-0e0f-807c-f70fa736efca.png">

---
# おわり
Composerで古いバージョンのLaravelをインストールする


## 環境
* mac:OSX El Capitan
* php:7.0.15
* composer:1.3.2


## コマンド
2017-03-05現在、バージョン指定しないとlaravelの5.4がインストールされる。以下の設定でインストールしたい場合のコマンド

* プロジェクト名：test_project
* laravel ver：5.3

```
composer create-project --prefer-dist laravel/laravel test_project 5.3
```

## 補足
composerのcreate-projectのヘルプ

```
$ composer help create-project
Usage:
  create-project [options] [--] [<package>] [<directory>] [<version>]

Arguments:
  package                              Package name to be installed
  directory                            Directory where the files should be created
  version                              Version, will default to latest
...
```
Node.jsでひらがな化APIを使って漢字からひらがな/カタカナ変換をする


ちょっととある開発で使ったのでメモです。

## ひらがな化API

Gooラボのプロダクトみたいです。

https://labs.goo.ne.jp/api/jp/hiragana-translation/

**日本語文字列を入れるとひらがなもしくはカタカナに変換してくれるAPIです**

![](https://i.gyazo.com/76ee5b9d6a04821ef2fc3d2067255a6b.png)

### 利用登録

[こちら](https://labs.goo.ne.jp/jp/apiregister/)から登録してAPIキーを取得して開発をしましょう。

## Node.jsからAPIを叩いてみる

axiosを使って作ります。Node.jsはv7.6.0です。

```bash
mkdir myapp && cd myapp
npm init --yes
npm i --save axios
```

xxxxxxxxxxxのAPIキーを入れる部分は適宜読み替えて下さい。

```app.js
'use strict'

const axios = require(`axios`);
const APIKEY = `xxxxxxxxxxxxx`; //API KEY
const BASE_URL = `https://labs.goo.ne.jp/api/hiragana`;
const SENTECE = process.argv[2];
const OUTPU_TYPE = `katakana`; //or `hiragana`

const options = {
    method: 'post',
    url: BASE_URL,
    headers: {
        'Content-Type': `application/x-www-form-urlencoded`,
        'Content-Type': `application/json`
    },
    data: {
        app_id: APIKEY,
        sentence: SENTECE,
        output_type: OUTPU_TYPE
    }
};

axios(options)
.then((res) => {
    console.log(res.data);
})
.catch((err) => {
    console.log(err);
});
```

実行は`node app <変換したい文字列>`という形式です。

```bash
node app 最近は花粉症がやばい
```

```
{ request_id: 'labs.goo.ne.jp\t1488647970\t0',
  output_type: 'katakana',
  converted: 'サイキンハ カフンショウガ ヤバイ' }
```

ちゃんと変換されましたね！
ひらがな化APIすごいです。
[メモ]リスト操作で調べたこと

## 特定のコンストラクタを持つ要素のみ抽出する
` haskell
data Token =
    Identifier String
  | Definition String
  deriving (Eq, Show)
let a = [Identifier "key", Definition "=", Identifier "value"]
[v | Identifier v <- a]
`
>["key","value"]


## リストを探索してマッチした要素の次から分割する
` haskell
breakingnext::([a], [a]) -> ([a], [a])
breakingnext (x, y) =
  case null y of
    True -> (x, y)
    False -> (x ++ [head y], tail y)
braekingnext $ break (== (Definition "=")) a
`
> ([Identifier "key",Definition "="],[Identifier "value"])
Makefileでdocker network createする

せっかくMakefileでやるなら冪等性も担保したい。ということで書いてみました。
(ここでいう冪等性は、ないなら作る、あるなら何もしない、の意)

```
docker-network-foo:
        @if docker network inspect foo >/dev/null 2>/dev/null ; then echo network foo exists; else docker network create foo; fi
```

# ポイント

`docker network inspect foo` と叩くと、存在しなければ非ゼロでexitするので、それを利用する。
EclipseからIntelliJへの移行メモ

## 動機

- 普段はJavaを書くのにEclipseを使っていた
- Androidで遊ぶようになったのでAndroid Studioの併用もはじめていた
- ところどころ使い勝手やキーバインドの違いに困惑していた
- 最近Kotlinを使い始めた
- EclipseにKotlinプラグインを入れたら少し使い勝手が変化した
- 嫌気が差してIntelliJへの統合を決意した

## 参考にしたサイト

- [EclipseからIntelliJへの移行で準備したこと/困ったこと/良かったこと](http://qiita.com/EichiSanden/items/ec8b6be72447e564d440)
- [IntelliJ の設定変更メモ](http://xyk.hatenablog.com/entry/2014/04/11/155009)
- [忙しい人のためのIntelliJ IDEAショートカット集（´-`）](http://qiita.com/yoppe/items/f7cbeb825c071691d3f2)

## やったこと

### intelliJをインストールした

- IntelliJ IDEA Version 2016.3.4

特に困ったことはなかった。
フリー版のCommunityを入れた。

### Android Studioと設定を同期した

- Configure -> Setting Repository
- 同期用のGitリポジトリURLとトークンを入力

Eclipseを卒業しようと思った要因に設定の同期が面倒だったことがある。
この同期設定をしておくと起動時等に勝手に同期してくれる。
便利。

同期設定は以下のURLを参考にした。

- [IntelliJの設定を端末間で共有する](http://qiita.com/sotetsuk/items/39622a0219e93052c8dc)

### 新規プロジェクトを作成した

- New Project -> Java -> Kotlin (Java)

いろいろ試しにプログラムを書きつつ下記の設定の変更を行った。

### 設定を変更した

- スペースや行番号の表示
    - Settings -> Editor -> General -> Appearance -> Show ...
- 行末のスペースやタブの削除
    - Settings -> Editor -> General -> Ensure line feed at file end on Save
- インポートの設定
    - Settings -> Editor -> Code Style -> Java -> Imports
    - アスタリスクでまとめないように数値を大きくする（2ヶ所）
    - 内部クラスもimportするように設定
- クラス作成時の自動挿入コメントをOFFにする
    - Settings -> Editor -> File and Code Templates
    - File Headerを消す
dict型のプロパティをread-onlyにするには

作成したクラスに`dict`型のプロパティがある場合、プロパティの要素をユーザーに勝手に変更されたくない場合に、MappingProxyTypeを用いてプロパティの要素の変更をできないようにする方法を説明します。

例えば次のようなコードを想定しています。

```py:
class Foo:
    
    def __init__(self):
        self._bar = {'a': 1, 'b': 2}

    @property
    def bar(self):
        return self._bar

    def add_item(self, key, value):
    # ユーザーにはこのメソッドを通してのみ要素を追加してほしい
        self._bar[key] = value
```

このコードでは、Fooクラスのプロパティ`bar`には`setter`が定義されいないので、ユーザーは`bar` を別のオブジェクトに変更することはできません。次のように、`bar`に別の値をセットしようとしてもエラーになります。

```pycon:
>>> foo = Foo()
>>> foo.bar
{'b': 2, 'a': 1}
>>> foo.bar = 1
Traceback (most recent call last):
  File "<pyshell#15>", line 1, in <module>
    foo.bar = 1
AttributeError: can't set attribute
```
ですが、`foo.bar` 自体はdictなので要素の追加ができてしまいます。

```pycon:
>>> foo.bar['c'] = 3
>>> foo.bar
{'b': 2, 'a': 1, 'c': 3}
```

このようなクラスの作り手の意図しない変更を防ぐために、Python Ver 3.3 以降では`types`ライブラリの`MappingProxyType`型を使う手があります。MappingProxyTypeのコンストラクタを用いて、返す辞書をmapping proxyオブジェクトにして返すとユーザーは返されたオブジェクトを変更できなくなります。 先ほどサンプルを変更するとこうなります。

```py:
from types import MappingProxyType

class Foo:
    
    def __init__(self):
        self._bar = {'a': 1, 'b': 2}

    @property
    def bar(self):
        return MappingProxyType(self._bar)

    def add_item(self, key, value):
        self._bar[key] = value
```
次のようにユーザがbarに要素を追加しようとしても、エラーとなります。

```py:
>>> foo = Foo()
>>> foo.bar
mappingproxy({'a': 1, 'b': 2})
>>> foo.bar['c'] = 3 # 要素を追加しようとしてもエラーとなる。
Traceback (most recent call last):
  File "<pyshell#29>", line 1, in <module>
    foo.bar['c'] = 3
TypeError: 'mappingproxy' object does not support item assignment
>>> foo.add_item('c', 3) # ユーザーはメソッドを使って要素を追加する。
>>> foo.bar
mappingproxy({'a': 1, 'c': 3, 'b': 2})
```
`mappingproxy`は、要素の取得は`dict`と同じようにできるため、`read-only`の辞書として利用できます。
積むけど消えない


過去最短の問題文！

```rb:tyama_henae12.rb
#!/usr/bin/env ruby
#http://mtsmfm.github.io/2017/03/04/doukaku-e12.html
#http://qiita.com/mtsmfm/items/d307c7b884cd86621262

T={
	'I'=>[[0],[4]],
	'L'=>[[0,0],[3,1]],
	'O'=>[[0,0],[2,2]],
	'S'=>[[0,0,1],[1,2,2]],
	'T'=>[[1,0,1],[2,2,2]],
}
while gets
	h=Hash.new 0
	$_.scan(/(\d+)([ILOST])/).each{|x,y|
		x=x.to_i
		y=T[y]
		base=y[0].size.times.map{|i|
			h[x+i]-y[0][i]
		}.max
		y[0].size.times{|i|
			h[x+i]=base+y[1][i]
		}
	}
	p h.values.max
	STDOUT.flush
end
```
普通の Android 端末で Hexagon + Tensorflow を使いたい(今はできない)

漢なら Snapdragon 820+(Hexagon DSP 680+) 搭載の普通の Android 端末(市販のスマホ)で Hexagon DSP 使って Tensorflow 動かして MNIST とか CIFER10 認識やりたいですよね!

2016 年秋ころ, SD820(Snapdragon 820) 搭載で, 日本で使える技適のあるもので最も安かった AU Xperia X performance 中古を調達し(4 万円ほど), tensorflow + Hexagon を動かすためにワクテカして待ち続けました.

しかし, Hexagon DSP にアクセスするには root 権限が必要なので普通のスマホで動かないことが判明しました. 悲しいですね.

https://developer.qualcomm.com/forum/qdn-forums/mobile-technologies/multimedia-optimization-hexagon-sdk/hardware-support/27238

https://github.com/tensorflow/tensorflow/tree/master/tensorflow/contrib/hvx
(adb root はできないし, `/system/lib/rfsa/adsp` が read only になっているので書き込めない)

現時点では, Tensorflow + Hexagon は SD820 搭載車載コンピュータとか開発ボード(Dragonboard 820)用っぽいですね.

root を取ればスマホでもいけるかもしれませんが, Google Play とかで APK 配布して, non-root な環境で tensorflow + Hexagon なアプリを動かしたいという用途では使えないのですね.
どうも linux カーネルでの修正がいるっぽいので, Android 8 とか 9 になるとなんか Android 側で Hexagon DSP API のユーザランド解放とかあるかもしれませんね.

## TODO

* 普通のスマホで Hexagon が動かせるようになることで, 優秀な Hexagon DSP 若人が, 日々切磋琢磨し機械学習を極めてくれるスキームを確立したい.
[Unityで学ぶC#] 9 クラス

## クラスとは
一言でいうと<font color = "red">設計図</font>です．

クラスは主に2つの要素でできています．
1. クラスの保持するデータ
2. データを処理するコード

---
## 一旦説明

後ほど「実践」で一からクラスの作り方を示すので序盤は流し読みしてください．


モンスターのクラスを作ります．

モンスターは名前を持っています．


---
## クラスのサンプル
このように作ることができます．

```csharp
public class Monster
{
	public string name;
	public Monster(string name){
		this.name = name;
	}
}
```

---
## サンプルの解説
```csharp
public class Monster
{
    // クラスの中身
}
```

`class`という単語がある行の次にある{}がクラスの範囲を示しています．

```csharp
public class クラス名
{
    // クラスの中身
}
```

---
## サンプルの解説
```csharp
public string name; // クラスが保持するデータ

public Monster(string name){　// クラスの初期化処理
	this.name = name;
}
```
上の`name`はモンスターの持つデータであり，名前を示す部分です．

下の部分はコンストラクタといい，データを初期化するために使います．

```csharp
public Monster(string name){
	this.name = name;
}
```

コンストラクタの書き方は関数の`帰り値なし、名前がクラス名と同じバージョン`いうと少しわかりやすいでしょうか..?

---
## コンストラクタ

```csharp
public クラス名()
{
}
```
初期化するパラメータがないときはこのように中には何も書きません．省略も可能です。

---
## コンストラクタ
```csharp
public クラス名(型　変数名)
{
    初期化処理
}
```
初期化するためのパラメータをわたしたいときはこのようにします．詳しくは後で説明します．

---
# 実践

---
## まずはクラスを作る

![class1.gif](https://qiita-image-store.s3.amazonaws.com/0/113504/76f1f68f-df6c-f0c9-ba76-659d5dae62e5.gif)

---
## まずはクラスを作る

```csharp
public class Monster
{
	
}

public class Example9 : MonoBehaviour {

	void Start () {
	}
}
```

---
## データとコンストラクタを書く
```csharp
public class Monster
{
	public string name;
	public Monster(string name){
		this.name = name;
	}
}

public class Example9 : MonoBehaviour {

	void Start () {
	}
}
```

---
## nameがややこしい
<img width="552" alt="Assembly-CSharp - 9 Class_Example9.cs - MonoDevelop-Unity.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/113504/4282196d-91c2-7c33-5a3e-ef56e4cc9e2e.jpeg">
色のついた部分が対応しています．
`this.name`がMonsterクラスのデータ．
青いnameが渡されたパラメータです．

これらは同じ名前である必要がなく，むしろ普通は別の名前にすると思いますが，
僕は名前をつけるのが面倒なので，同じ名前にしてしまっています．

```csharp
public string name;
public Monster(string n){
    name = n; // これでも問題無し
}
```

---
## 設計図から実体を作る
new演算子を使うことで，実体を作ることができます．
インスタンスともいいます．
<img width="500" alt="スクリーンショット 2017-03-05 0.31.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/24ae0bba-c5a9-09e7-b2a6-aea4108d4ebb.png">

---
## とりあえず再生してみよう
`Debug.Log(monster.name)`で
<img width="500" alt="スクリーンショット 2017-03-05 0.34.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/383cd93e-4d16-929e-6e1b-bbecb2d1f88e.png">
スライムと表示されました．

## 何をしたのか？
まず「Monsterとはnameというパラメータを持っているものである」という定義をしました(クラスを作る)
その後、新しくスライムを生成しました。(new Monster("スライム"))
スライムに「君はMonsterだからあだ名monsterな！」とあだ名をつけました `Monster monster = new Monster("スライム")`　(理解しやすいように無理やりこじつけています)
最後にmonsterの名前をLogに出力しました。

---
## データの流れ
<img width="776" alt="スクリーンショット 2017-03-05 0.31.46.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/113504/dd186e5e-0e53-b16a-2b8e-153c8a3d0baf.jpeg">

---
## .(ドット)の意味
<img width="776" alt="スクリーンショット 2017-03-05 0.31.46-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/113504/6ff7acc6-d734-cbf3-eac0-c3768b68c537.jpeg">

---
## 参考

http://ufcpp.net/study/csharp/oo_class.html

## 備考
Unityでスクリプトを作成すると、クラス名の横に`: MonoBehaviour`とついたスクリプトができます。
これがついたクラスではコンストラクタは使いません。
なぜならMonoBehavourのついたスクリプトはnewを使って生成しないからです。

---
# おわり
Azure LoadBalancerでエラーページを表示

# 前書き
AWSのELBには、ぶら下がってるWEBサーバがすべてOut Of Serviceの時、エラーページを表示するための設定があります。
Azureはどうなんでしょうか？

# Azure LoadBalancer設定画面
![ALB04.png](https://qiita-image-store.s3.amazonaws.com/0/109620/f808a0d7-67fc-e085-0c83-567655ec73b8.png)


残念ながらエラーページを設定するような箇所はありませんでした。
さて・・・どうする。。。。。
もしや、PowerShellやクラッシックポータルであれば設定できるか？！


# MSさんに聞いてみた
MS「残念ながら、そのような設定はありません。」
自分「:sob:ガーーーーーーーーーーーーン:sob:」
MS「『マラソンランナーのITブログ』でこんな記事が紹介されてます。参考にしてください。」
自分：「なるほど:dizzy_face:」

お金はかかりますが、できなくはないですね。
![image](https://qiita-image-store.s3.amazonaws.com/0/109620/221a0699-8af8-7903-0a92-0c048ed83f19.png)
(画像：マラソンランナーのITブログ)

TrafficManagerを利用したエラーページの表示は別途掲載します。


# 参考
[マラソンランナーのITブログ](http://enjoymylife.hatenablog.com/entry/2016/10/30/225912)
AngularのComponentをnpm packageとして公開する

社内で無限スクロールの実装したいって話があり、そのぐらいならライブラリ化しちゃっていいのでは。と軽い気持ちでやったら結構ハマったのでまとめておきます。


# 作ったもの
https://github.com/sisisin/ng-infinite-scroll

# ComponentをAoT対応させつつjsファイルとして出力するまで

## 必要なパッケージをインストールする

```bash
$ yarn add -D @angular/{compiler-cli,compiler,common,core} rxjs typescript
```

画面確認するならもっと色々必要ですが、ライブラリとしてComponent作るだけの最低限ならこれでOKです

## トランスパイルの設定
以下のようなtsconfig.jsonを用意する

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "sourceMap": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": true,
    "outDir": "dist",
    "lib": [
      "dom", "es2015"
    ]
  },
  "include": [
    "src/index.ts"
  ],
 "angularCompilerOptions": {
    "genDir": "aot"
  }
}
```

ポイントは以下

- module: es2015にして、トランスパイル結果でもimport/exportが利用されている状態にする
- declarationをtrueにしてd.tsファイルを出力させる
- includeで自分のライブラリのみをトランスパイル対象とする
    - node_modules/内のものが混ざってくると困るので
- `@angular/compiler-cli`用のオプションで、AoTコンパイル結果の出力フォルダを指定

以上の設定で、型定義ファイルとともに、AoT用のmetadata.jsonを持った状態で`dist`ディレクトリに結果が吐き出されます


## Componentの書き方

こんな感じ。

```TypeScript:hoge.package.ts
import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'app-hoge',
  template: `<div>hello npm package</div>`,
})
export class HogeComponent {}

@NgModule({
  declarations: [HogeComponent],
  exports: [HogeComponent]
})
export class HogeModule { }

```

`@NgModule`の`exports`でライブラリとして公開したいComponentを指定するのがポイント。
ライブラリとしてじゃなくても、自前でModule単位で分けたい場合もこういう書き方になりますね。
利用側は`HogeModule`を`@NgModule`の`import`に指定してあげればOKです。

## AoTコンパイルを実施する

```bash
$ $(npm bin)/ngc
```

これで成果物がtsconfig.jsonの`outDir`で指定したディレクトリに吐き出されます（今回の設定の場合は`dist/`)


# 動作確認用のexample作成

あんまり余計な事はせず、最低限だけで済ませたいですね。
こんな感じのパッケージ構成になると思います

```json:package.json
{
  ...略
  "devDependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@sisisin/ng-infinite-scroll": "file:../",
    "core-js": "^2.4.1",
    "lite-server": "^2.2.2",
    "rxjs": "5.0.1",
    "ts-loader": "^2.0.1",
    "typescript": "^2.2",
    "webpack": "^2.2.1",
    "zone.js": "^0.7.4"
  }
}
```

exampleはプロジェクトのルートにexample/ディレクトリを置いて作成を想定しています
以下ポイント。

- npmではfile system上のnpm packageを指定する事が可能です.
    - `"@sisisin/ng-infinite-scroll": "file:../"`がそれ。
    - ちなみに、[npmのdocument](https://docs.npmjs.com/cli/install)のとおりに `npm install -D ../`とすると、フルパスが入ってきてしまうので注意が必要です
    - さらに注意が必要な点として、yarnを利用すると`.npmignore`の指定を無視して対象のディレクトリをまるっと持ってきやがります
        - そのせいで余計なtsファイルが混ざってコンパイル通らなくなったりします
- このくらい軽い感じなら、といってsystemjsに手を出さない
    - 情報も少ないし普段触らないのでまじハマって辛かった
    - （用途的にはこういうので使うのが一番よさそうと思ったんですけどね。。。


# publishする

package.jsonのprepublishにビルドスクリプトを定義しておいて、`npm publish --access=public`!


# さいごに

大枠こんな流れで公開まで漕ぎ着けられました。
Component書く時間より環境構築に時間がひたすらかかったのはザ・Angularって感じでしたね！
Unity ボタンの中にimageを追加したがクリックした時の色が気に入らない...

###ボタンの中に追加した画像の色がクリック時に変わらない
Unityでボタンの中に image を追加したが、ボタンを押した時に、追加した image の色が変わらない...。
なんか画像が浮いてる...。
![image_2-3.gif](https://qiita-image-store.s3.amazonaws.com/0/9142/2cd1feac-9633-7a72-d15b-57a39070b362.gif)

これは困った...と、ググってみたら...。

UGUI; Multi image button transition
http://answers.unity3d.com/questions/820311/ugui-multi-image-button-transition.html

なるほど、これは良さげだなと...今回、組み込んでみた内容を記録してみました。


###MultiImageButton.csを作成
まず、MultiImageButton.csを作成しましたが、自分は`Graphics`プロパティで`m_graphics`へ代入する式を変更しました(ボタン自身の子供を指定)。

```csharp:MultiImageButton.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UnityEngine.UI;
using UnityEngine.EventSystems;


/**
 * 参考にした URL
 * http://answers.unity3d.com/questions/820311/ugui-multi-image-button-transition.html
 */
public class MultiImageButton : Button
{
	private Graphic[] m_graphics;
	protected Graphic[] Graphics
	{
		get
		{
			if (this.m_graphics == null)
			{
				//変更点 ボタンオブジェクト以下の子オブジェクトを対象としました。
				this.m_graphics = targetGraphic.transform.GetComponentsInChildren<Graphic>();
			}

			return this.m_graphics;
		}
	}


	protected override void DoStateTransition (SelectionState state, bool instant)
	{
		Color color;
		switch (state)
		{
			case (Selectable.SelectionState.Normal):
				color = this.colors.normalColor;
				break;

			case (Selectable.SelectionState.Highlighted):
				color = this.colors.highlightedColor;
				break;

			case (Selectable.SelectionState.Pressed):
				color = this.colors.pressedColor;
				break;

			case (Selectable.SelectionState.Disabled):
				color = this.colors.disabledColor;
				break;

			default:
				color = Color.black;
				break;
		}

		if (base.gameObject.activeInHierarchy)
		{
			switch (this.transition)
			{
				case (Selectable.Transition.ColorTint):
					this.ColorTween(color * this.colors.colorMultiplier, instant);
					break;

				default:
					throw new System.NotSupportedException();
			}
		}
	}


	private void ColorTween(Color targetColor, bool instant)
	{
		if (this.targetGraphic == null)
		{
			return;
		}

		foreach (var g in this.Graphics)
		{
			g.CrossFadeColor(targetColor, (!instant) ? this.colors.fadeDuration : 0f, true, true);
		}
	}
}
```


### ボタンのスクリプトを差し替え
ボタンの「Button (Script)」を「MultiButton (Script)」に差し替えます。

いったんボタンから「Button (Script)」コンポーネントを削除し...
![image_5_edit.png](https://qiita-image-store.s3.amazonaws.com/0/9142/e37c3256-c423-c6ba-16d8-2f53f491ca37.png)

ボタンの[Add Component]から「Multi Image Button (Script)」コンポーネントを追加しました。
![image_7_edit.png](https://qiita-image-store.s3.amazonaws.com/0/9142/6756fd06-e15c-042e-f688-5a1a9ed35e0e.png)

追加した「Multi Image Button (Script)」の設定は以前と同じように設定可能みたいです。
![image_8.png](https://qiita-image-store.s3.amazonaws.com/0/9142/0c11c5cf-35d2-7a1a-49f0-0cf2bd798b35.png)


### 動作確認
デバッグしてみると、押したときの違和感がなくなりました。
(例だとわかりづらいですが...)
![image_9-10.gif](https://qiita-image-store.s3.amazonaws.com/0/9142/97e1e6a4-a2da-054e-1765-997f8c60bddd.gif)
OpenCv3.2の謎な不具合

#OpenCv3.2.0へアップグレードしないほうが良い

先日、オープンCVのバージョンアップがリリースされたので、早速インストールしてみた。しかし、3.1.0で利用できたコードがバグで動かない。

例えば機械学習で使うmlというライブラリを使用するときに3.1だと普通に動くが、3.2だとエラーがでる。

リファレンス通りにコードを作成しても受け付けてくれないのだ。Opencvのインクルードファイルが関係しているのか定かではない。謎のまま。

他のユーザーからも不具合が報告されているので、よほど自信のある人は別として使用は止めといたほうがよいだろう。

もし3.2にする場合は、下のような基本的な変更が必要だ。

```C++:OpenCv3.1to3.2
opencv_world310.dll to opencv_world320.dll//release
opencv_world310d.dll to opencv_world320d.dll//debug
//include,libフォルダーの設定変更などが必要
```

興味を引く大きな変更もないので、今後も3.1.0を利用したほうが得策だと感じる。OpenCvを始める人はOpencCv 3.1.0をダウンロードすることを薦める。
robocopyコマンドでwindows端末のデータをバックアップする方法

# はじめに
仕事柄、Windows端末のデータをバックアップすることがよくあるのだけど、今まではコマンドプロンプトでxcopyコマンドを使い、データのコピーを取っていました。

例えばCドライブにある自分のデスクトップ上のファイルを、全て別のドライブにバックアップしておきたいときなどは、xcopyコマンドでディレクトリごとコピーができます。

``` xcopy.bat
xcopy C:\Users\himrox\Desktop E:\Backup /E /C /H
```

オプションなど詳しくは http://www.k-tanaka.net/cmd/xcopy.php を見てください。

しかし、xcopyには致命的な欠点があって、コピー元のファイルの中に255バイトを超えるパスがあると、「メモリが足りません」とエラーが出てコピーできないというのだ。

>[xcopyで「メモリが足りません」](http://jomura.net/blog/index.php?p=1563)

なにかxcopyに替わるいい方法はないかと探していたところ、robocopyコマンドが使えそうだとわかってきました。

# robocopyコマンドの使い方

robocopyコマンドの基本的な使い方はシンプルで、以下のようなコマンドでディレクトリごとコピーがされます。

``` robpcopy.bat
robocopy (コピー元のディレクトリ) (コピー先のディレクトリ) (オプション)
```

robocopyで先程xcopyで実行したコマンドを書き直すと、こんな感じです。

``` robpcopy.bat
robocopy C:\Users\himrox\Desktop E:\Backup /E /R:0 /W:0 /XJD /XJF /LOG:backup.log
```

robocopyコマンドは、xcopyと違い、パスのサイズに制限はなく、詳細なログも出力されます！
また、`robocopy /?` でコマンドの使い方を知ることができます。

主に使うオプションを詳しく見ていきたいと思います。

# robocopyコマンドのオプション
### コピーオプション
- /S サブディレクトリをコピーしますが、空のディレクトリはコピーしません。
- /E 空のディレクトリを含むサブディレクトリをコピーします。
- /MIR ディレクトリ ツリーをミラー化します。

/Sや/Eのオプションでは、コピー元のファイルを削除してから、もう一度実行してもコピー先のファイルは残ります。
それに対して/MIRオプションでは、コピー元で削除されたデータはコピー先でも削除されるので、注意が必要です。

### 再試行オプション
- /R:n 失敗したコピーに対する再試行数: 既定値は 1,000,000。
- /W:n 再試行と再試行の間の待機時間: 既定値は、30 秒です。

このあたりはやたら規定値が大きく設定されているので、特に理由がなければ/R:0と/W:0をオプションに指定しておいたほうがよいでしょう。

### ファイル選択オプション
- /XJD フォルダの接合ポイントを除外します。
- /XJF ファイルの接合ポイントを除外します。

ジャンクションという特殊ファイルをコピー対象から外します。こちらも特に理由がなければ指定しておきます。

### ログオプション
- /LOG:ファイル ログファイルに状態を出力します (既存のログを上書きします)。
- /LOG+:ファイル ログファイルに状態を出力します (既存のログ ファイルに追加します)。

ログファイルの出力先を設定できます。ログはコマンドプロンプトにも表示されますが、定期的にバックアップを取るときなどは、ログファイルに出力しておくといいでしょう。

この他にも様々なオプションがありますが、よく使うオプションはこんなところです。

# 参考

[Windowsのrobocopyコマンドでフォルダーをバックアップ／同期させる](http://www.atmarkit.co.jp/ait/articles/0704/20/news130.html)
[パソコンのファイルをrobocopyで手堅くバックアップする方法](http://amaotolog.com/backup/entry187.html)
Atom で JSX の閉じタグを自動入力する

いちいち閉じタグ入力がめんどくさいんじゃーー！というとき。かつ react プラグインを使わないとき。

- https://atom.io/packages/autoclose-html

の autoclose-html を入れる。

標準設定だと html にしか効果がないので、jsx の時にも有効になるよう、keybindings の設定をする。

```
'atom-text-editor[data-grammar~="jsx"]':
  '>': 'autoclose-html:close-and-complete'
```

これで jsx 編集中 `<View>` と入力すると `<View></View>` になるように。

また `vim-mode-plus` を使っているなら、insert-mode だけで有効になるように

```
'atom-text-editor[data-grammar~="jsx"].vim-mode-plus.insert-mode':
  '>': 'autoclose-html:close-and-complete'
```

のようにする。
RspecでViewのテストを書く


```Gemfile
group :test do
  gem 'rspec-rails'
  gem 'factory_girl_rails'
  gem 'capybara'
end
```

`@user` などのインスタンス変数は `assign` メソッドが用意されている。
`current_user` などのヘルパーメソッドは自前で定義しないといけないっぽい。ここが悩んだ

```spec/views/xxx/yyy.html.erb_spec.rb
RSpec.describe "xxx/yyy", type: :view do
  let(:user) { create :user }
  let(:helper_methods) {
    {
      current_user: user
    }
  }
  before { assign(:user, user) }

  it 'works' do
    define_helper_methods(view, helper_methods)
    render

    expect(rendered).to have_css('h1', text: 'Title')
  end
end
```

```spec/support/test_helpers.rb
module TestHelpers
  def define_helper_methods(view, methods)
    methods.each do |name, value|
      view.define_singleton_method(name){ value }
    end
  end
end
```


```spec/rails_helper.rb
Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

RSpec.configure do |config|
  config.include FactoryGirl::Syntax::Methods
  config.include Devise::Test::IntegrationHelpers, type: :request
  config.include TestHelpers
end
```
ES6オブジェクトリテラルの拡張


## プロパティ省略記法
オブジェクトのプロパティのキー名と値の変数名が等しい場合、ES6では省略記法が使える。

```javascript:省略記法
// ES5
var foo = 0, bar = 1;

var obj = {foo: foo, bar: bar};
console.log(obj.foo, obj.bar);
// 0, 1

// ES6
var obj = {foo, bar};
```

http://es6-features.org/#PropertyShorthand

## コンピューテッドプロパティ
従来はプロパティのキー名が入った文字列であるとき、一度オブジェクトを生成する必要があったが、ES6ではキーを`[]`で囲むことで直接変数や式を指定できるようになった。

```javascript:コンピューテッドプロパティ
var key = "foo";

// ES5
var obj = {};
obj[key] = 0;
obj[key + "_bar"] = 1;
console.log(obj.foo, obj.foo_bar);
// 0, 1

// ES6
var obj = {
　[key]: 0,
　[key + "_bar"]: 1,
}
```

http://es6-features.org/#ComputedPropertyNames

## メソッド定義
オブジェクトのメソッドを`function`キーワードを使わずに短く定義できるメソッド定義（method definition）  

```javascript:メソッド定義
// ES5
var counter = {
  count: 0,
  increment: function() {
    this.count++;
  }
};
counter.increment();

// ES6
var counter = {
  count: 0,
  increment() {
    this.count++;
  }
};
```

**ここでアロー関数を使ってしまうと、`this`の補足によって`increment`メソッド内の`this`が`counter`オブジェクトではなくなってしまう。**
このようなケースでは`this`を束縛しないメソッド定義記法を使う。


http://es6-features.org/#MethodProperties

### 参考
[WEB+DB PRESS vol.87 ECMAScript6特集](http://gihyo.jp/magazine/wdpress/archive/2015/vol87)
[JAWS-UG 磐田] IAMロールの作成

# ◆[JAWS-UG 磐田] ハンズオンの補足資料 IAM編 #2
### EC2用のIAMロールを作成します。
　※SYSTEMS MANAGER SERVICESとS3を操作するために、EC2への権限付与で使用します。
**コンソールを使用してIAMロールを作成するには**
**１．**[IAMコンソール](https://console.aws.amazon.com/iam)を開きます。
- - -
**２．**ナビゲーションペインで[ロール]を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/cb98232a-365d-179d-32bb-6696c0287ed2.png)
- - -
**３．**[新しいロールの作成]をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/82139363-8cc7-1584-c6a3-852c4849db29.png)
- - -
**４．**ロールの作成ウイザードの[**ロール名**]に作成する名前を入力し、[次のステップ]をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/4738fa68-ac5c-013d-65de-ac02f89cc136.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/4463a664-7b39-c781-a8d4-5c6633323c7f.png)
　※ブラウザ画面の右下にあります。
- - -
**５．**ロールタイプの選択で[Amazon EC2]を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/018e0a04-9fbc-aed3-2553-2198f9d102c7.png)
- - -
**６．**ポリシーのアタッチから下記ポリシーを選択して、[次のステップ]をクリックします。
　※フィルターに[SSM S3]を入力すると一覧から絞ることができます。

- [x] AmazonEC2RoleforSSM
- [x] AmazonS3FullAccess

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/830fbdde-8809-83cc-2407-c053a35c6262.png)
- - -
**７．**内容を確認して、[ロールの作成]をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/bd7b8886-dbbb-3c2f-1fae-182e22318c0e.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/168665/82ed1d41-fe76-3901-743b-9036e74fd1b7.png)
　※ブラウザ画面の右下にあります。
- - -
**※公式マニュアルから抜粋**
http://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_create_for-user.html
LINE Creators Marketの売上総額をソッコー確認する方法

LINE Creatos　スタンプを作っている方はわかるとおもいますが、日々の売上を確認するためのグラフは、デフォルトで最新5つのスタンプしか有効になっていません。全てのアイテムの売上総額を確認するためには、チェックボックスをポチポチ押す必要があります。

![スクリーンショット 2017-03-04 23.05.07.png](https://qiita-image-store.s3.amazonaws.com/0/22648/97b29e7a-0087-c0c3-fc8a-2dd751c6f2cc.png)

このチェックボックスをコンソールからクリックしましょう。

※例えばChromeだとoption+command+i

```js
var cb = document.getElementsByTagName("input");
for( var i = 5; i < cb.length; ++i ){
    cb[i].click();
}
```

これで、全部チェックがついてグラフに総額が反映されるようになります。

ちなみに、ブックマークレット用のソースコードは下記です。

```js
JavaScript:Object.keys(document.getElementsByTagName("input")).forEach(function (i) {if( document.getElementsByTagName("input")[i].checked===false) document.getElementsByTagName("input")[i].click();});
```


##　追記
どうせなら、今月分の売上見れた方がいいんじゃない？
って思ったので、作りました（ブックマークレット用）。

```js
var cb = document.getElementsByTagName("input");for( var i = 5; i < cb.length; ++i ){cb[i].click();}var tableHtml = document.querySelector(".mdCMN18Tbl").innerHTML;var earnings = tableHtml.match(/\s\d*,?\d+/g);var sum = 0;for(var i = 0; i < earnings.length; ++i ){var num = earnings[i].replace(/,/g,"");sum += Number(num);}document.querySelector(".mdCMN01Heading").innerHTML += ": \\" + sum;
```

売上一覧の横に表示されます。
プログラマブルレンダラーでもofxSyphonを使う

**アップデートにより、4.1にも対応しました。ここでの内容は非推奨です。**
https://github.com/astellato/ofxSyphon


---

　OpenGL2.1だと問題ないのですが、3.X系に上げた瞬間死にます。（真っ黒）それを解決しようぜ!!!というHackをここに書いておきます。



# アドオンをカスタマイズ
　アドオンに以下の関数を追加。もちろんヘッダーファイルにもプロトタイプ宣言を忘れずに。

```:ofxsypthonserver.mm
void ofxSyphonServer::publishFBO(ofFbo* inputFbo){
    // If we are setup, and our input texture
    if(inputFbo->isAllocated())
    {
        NSAutoreleasePool* pool = [[NSAutoreleasePool alloc] init];
        
        if (!mSyphon)
        {
            mSyphon = [[SyphonServer alloc] initWithName:@"Untitled" context:CGLGetCurrentContext() options:nil];
        }
        SyphonServer *ss = static_cast<SyphonServer*>(mSyphon);
        CGLLockContext(ss.context);
        CGLSetCurrentContext(ss.context);
        NSSize size;
        size.width = inputFbo->getWidth();
        size.height = inputFbo->getHeight();
        [ss bindToDrawFrameOfSize:size];
        GLint syFBO;
        glGetIntegerv(GL_FRAMEBUFFER_BINDING, &syFBO);
        glBindFramebuffer(GL_READ_FRAMEBUFFER, inputFbo->getFbo());
        glBindFramebuffer(GL_DRAW_FRAMEBUFFER, syFBO);
        
        glBlitFramebuffer(0, 0, size.width, size.height,
                          0, 0, size.width, size.height,
                          GL_COLOR_BUFFER_BIT, GL_LINEAR);
        [ss unbindAndPublish];
        CGLUnlockContext(ss.context);
        
        [pool drain];
    }
    else
    {
        cout<<"ofxSyphonServer FBO is not properly backed.  Cannot draw.\n";
    }
}
```


## 使い方
　そのままVDMXとかに出すと垂直方向に反転した画がでるので、出力用ofFboのY座標を反転させる。（Y座標反転はたしかOpenGLのFBOの仕様だったかな?）


```:ofApp.cpp
ofFbo fbo;

void setup()
{
    fbo.allocate(ofGetWidth(), ofGEtHeight());
    fbo.getTexture().getTextureData().bFlipTexture = true;
}


void draw()
{
    fbo.begin();
    ofClear(0);
    //draw some stuff
    fbo.end();

    fbo.draw(0, 0);
    
    mainOutputSyphonServer.publishFBO(&fbo);
}

```



これで、OpenGL3.X系以上のプロジェクトもSyphonで渡せます。

乾杯!!!🍺
vimの初期設定を行う


## 参考にするvim設定

`rails`でプロジェクト開発する予定なので、Rails使いのvimrcを真似する。

[脱初心者を目指すVimmerにオススメしたいVimプラグインや.vimrcの設定](http://qiita.com/jnchito/items/5141b3b01bced9f7f48f)

他にも参考にした：[自分のvimでやってきたことのまとめ](http://qiita.com/ykyk1218/items/ab1c89c4eb6a2f90333a)

## .vimrcをgitで管理する

PC環境が変わった際にgitの`.vimrc`をクローンするだけでvimの設定ができるように、dotfiles(.で始まるファイルの総称)をgitで管理する。下記記事を参考にした。

[そろそろしっかりvimを使う。dotfilesのgithub管理とvundleの導入。](http://holypp.hatenablog.com/entry/20110515/1305443997)

## プラグインをneovundleで管理する
vimのカスタマイズはプラグインで行う。`vundle`はプラグイン管理の為のプラグイン。rubyで言う`bundle`らしい。

最近だと[dein.vim](http://qiita.com/kawaz/items/ee725f6214f91337b42b)という同作者制作のプラグイン管理ツールを用いるらしい（今回は使用していない）。

dotfilesと合わせてneovundleを導入する場合は[この記事](http://nwpct1.hatenablog.com/entry/2014/01/14/214128)がわかりやすい。

詳細な書き方・設定方法を知りたい場合は[こちら](http://qiita.com/kazu0620/items/819679ef006d973c6c22)。


## 注意点
dotfilesディレクトリに .vimrcへのシンボリックリンク貼っているので、dotfiles/内のファイルでパスを指定する場合は絶対パスを指定する。

書き込み権限が無くプラグインインストールできなかったので、パーミッションを許可する。

dotfiles/.vimrcを立ち上げると自動でプラグインをinstallしてくれる。
Ansible 2.2 から加わった json_query フィルターが便利

# [Ansible::json_query](http://docs.ansible.com/ansible/playbooks_filters.html#json-query-filter)
複雑なディクショナリデータを json データとみなして、jq コマンド風にフィルターをかけ、
特定のデータのみ抽出することができます。

# ケーススタディ
１つの例として pip インストールするケースです
pip install xxxxx したときに、python-devel がないとか言われたことありますよねー。
pip パッケージ名とそれに依存する yum/deb パッケージ名の依存関係を記述して、一気にインストールする例です。

# Ansible コード

```roles/xxxxxxx/default/main.yml
airflow_pip_packages:
  - name: 'pip==9.0.1'
    require_packages_yum:
      - 'gcc'
      - 'python-pip'
      - 'python-devel'
  - name: "airflow=={{ airflow_version }}"
  - name: "airflow[hive]=={{ airflow_version }}"
  - name: 'cryptography'
    require_packages_yum:
      - 'openssl-devel'
```
```roles/xxxxxxx/tasks/main.yml
  - name: '[python/pip] install require packages'
    become: true
    package:
      name: "{{ item }}"
    with_flattened:
      - "{{ airflow_pip_packages | json_query('[*].require_packages_' + ansible_pkg_mgr) }}"

  - name: '[python/pip] install'
    become: true
    pip:
      name: "{{ item }}"
    with_flattened:
      - "{{ airflow_pip_packages | json_query('[*].name') }}"
```

ある pip パッケージをインストールするのに、yum/deb パッケージが必要だったりなかったりします。
この'あったりなかったり'を ansible で表現するのはいままで一筋縄でいかなかった
※ python_pip_packages | map(attribute='ごにょごにょ' | list ) と書いてなおかつ
※ 'なかったり'の場合は、require_package_yum: [] をわざわざ記述しなくてはいけない (undefined がリストされてしまう)
のですが、json_query を使うことによって、undefined 値を除外して、必要なデータのみを取得できます。
値は実際に [ ["gcc", "python-pip", "python-devel" ], [ "openssl-devel" ] ] で返ってきますので、
with_flattened でリストを平らにしてループ処理をします。

# なかなかスッキリしたコードですよね
json_query + with_flattened コンビでいろいろと応用が利きそうですね。

それでは、良い 自動インフラ ライフを。
webpack2.2.1にriotjs-loader4.0.0を追加して実行したらエラーが出る

riot.jsをいじってみようとwebpackを設定してた時に出たエラー

## 実行した環境
- webpack2.2.1
- riotjs-loader4.0.0

webpack.configは公式を参考に
[riotjs-loader公式](https://github.com/esnunes/riotjs-loader)

設定したらwebpack実行するとエラーが出た。

## 出たエラー

```
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

 - configuration[0].module has an unknown property 'preLoaders'. These properties are valid:

   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }

   Options affecting the normal modules (`NormalModuleFactory`).

 - configuration[0].resolve.extensions[0] should not be empty.

```

### エラー1個目
preLoadersってなんぞ？って言ってるっぽいのでとりあえず検索

[Webpack config has an unknown property 'preLoaders'](http://stackoverflow.com/questions/42476185/webpack-config-has-an-unknown-property-preloaders)

エラー出る前

```
preLoaders: [
    {
        test: /\.tag$/,
        exclude: /node_modules/,
        loader: 'riotjs-loader'
    }
],
```

参考に（というかそのまんま）修正

```
rules: [
    {
        test: /\.tag$/,
        exclude: /node_modules/,
        enforce: "pre",
        loader: 'riotjs-loader',
        query: {
          type: 'babel'
        }
   }
],
```
### エラー2個目

```
configuration.resolve.extensions[0] should not be empty.
```
これを元に検索
[After upgrade to Webpack beta 23 I can no longer use blank extesnions](http://stackoverflow.com/questions/39633754/after-upgrade-to-webpack-beta-23-i-can-no-longer-use-blank-extesnions)

エラー前

```
resolve: {
    extensions: ['', '.js', '.tag']
},
```

修正

```
resolve: {
    extensions: ['*', '.js', '.tag']
},
```

これで無事にwebpackが実行できました！
【Laravelメモ⑥】コントローラからビューに値を渡す


# Controller

compactメソッドを使うのが一般的らしい

```php
    public function result(){
    	$post_data = "book";
	return view('result', compact("post_data"));
    }
```

# View

{{}}で表示

```
{{$post_data}}
```
自分があらかじめやっているCSS指定

本業でも個人でもサイト制作のスタイルを追加する前に指定しているものを書く。やっておくと後々の調整作業がちょっと減る。

### 画像がウィンドウサイズからはみ出ないようにする

最大幅を指定する。

```css
img {
  max-width: 100%;
  height: auto;
}
```

基本は原寸表示をして、ウィンドウ幅が狭くなったときはそれに合わせて小さくなる。 `width: 100%;` だと小さいときは拡大されて画像が荒くなってしまうので、 `max-width` 。

### フォントサイズを指定するとき

行間も合わせて指定する。

```css
.title {
  font-size: 24px;
  line-height: 1.3;
}
```

見出しタイトルみたいに本文よりサイズを大きくする場合に、行間はちょっと詰めると見た目が良さそう。

### リンクテキストの余白をつけるとき

ブロック要素にする。

```css
.primary-button {
  /* ブロック要素と余白の指定 */
  display: block;
  padding: 10px;
  text-align: center;
  /* 表示テスト用スタイル */
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  color: #06c;
  background: #fff;
  border:  3px #06c solid;
  transition: all 0.1s;
}
```

[Codepen サンプル](http://codepen.io/becolomochi/pen/LWyRwY/)
ボタンみたいなスタイルにするとき。

参考： https://developer.mozilla.org/ja/docs/Web/CSS/display

### 要素の中で位置を固定させたいとき

親要素に `position: relative;` を指定しておく。

```css
.parent-box {
  /* 位置指定のための position プロパティ */
  position: relative;
  /* 表示テスト用スタイル */
  width: 400px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  background: #ffffdd;
  color: #666;
}
.child-item {
  /* 位置指定のための position プロパティ */
  position: absolute;
  bottom: 10px;
  right: 10px;
  /* 表示テスト用スタイル */
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height:32px;
  background: #ddeecc;
  font-weight: bold;
}
```

[CodePen サンプル](http://codepen.io/becolomochi/pen/evWdbL/)

本当はあまり使いたくないのだけど、レスポンシブ表示で限定的に位置を固定させたいときに使いがち。

参考： https://developer.mozilla.org/ja/docs/Web/CSS/position


（思い出したらまた更新。
0から任意の数までにマッチする正規表現

[ここ](http://qiita.com/khsk/items/f1c05d298893913c1652)で紹介されていた[これ](https://stuncloud.wordpress.com/2010/09/24/0%E3%81%8B%E3%82%89%E4%BB%BB%E6%84%8F%E3%81%AE%E6%95%B0%E3%81%BE%E3%81%A7%E3%81%AB%E3%83%9E%E3%83%83%E3%83%81%E3%81%99%E3%82%8B%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/)をGroovyに移植したものです。
ソースコードは[ここ](https://gist.github.com/nao20010128nao/e26116e13ea68edb8715ea3464a81f11)にあります。
`file.groovy`はそのまま忠実に移植したもので、`shorterRegex.groovy`は`(...|...)`で少し短縮したものを出力するものです。
入力はstdinにして下さい。
# 改善できそうな所
## 文字列のそれぞれの文字を`int`としてバラす
```groovy
...
def l=num.length()-1
def n=new int[l+1]

for(def i=0;i<=l;i++){
    n[i]=new Integer("${num.charAt(i)}")//ここでバラしている
    ...
}
```
もうちょっと綺麗にできそうですが...

## 出力
`1234567890`をこれに入力すると
`^\d{1,9}$|^1[0-1]\d{8}$|^12[0-2]\d{7}$|^123[0-3]\d{6}$|^1234[0-4]\d{5}$|^12345[0-5]\d{4}$|^123456[0-6]\d{3}$|^1234567[0-7]\d{2}$|^12345678[0-8]\d$|^1234567890$`
を出力するのですが、これも`(...|...)`でまとめられそうな気がします。<strike>でも面倒くさい</strike>
転送時間計算方法

# はじめに
インフラエンジニアにとって、ネットワーク帯域の計算をすることは大事ですよね。ネットワーク帯域の計算ができないと、基盤の構成を考えることができません。ちょうど物理サーバーを導入する案件に携わる機会があり、構成を考える上で必要になった計算方法を備忘録的にまとめたいと思います。

# やること
データを転送するのに、どのくらいの時間がかかるのか計算する。　

# 必要情報
- 通信でやり取りするデータ容量
- 利用する回線速度
- 伝送効率

# 前提
- 通信でやり取りするデータ量：　300kb（写真一枚） × 120（利用ユーザー数） = 36000kb ≒ 36mb
- 利用する回線速度：　1Gbps
- 伝送効率：　70%

# 計算式
**データ容量 ÷ 回線速度 × 伝送効率 = 転送にかかる秒数**

# 計算手順
1.　データ容量をビット数に変換
>　36mb × 1024 × 1024 × 8bit = 301,989,888bit

2.　回線速度をビット数に変換
>　１Gbps × 1000 × 1000 × 1000 = 1,000,000,000bit

3.　転送にかかる秒数の計算
>　301,989,888bit ÷ {1,000,000,000bit × 0.7(70%)} ≒ 0.4秒

4.　結果
１Gbpsの回線速度で、36mbのデータ量を転送する時間は約0.4秒


# おわりに
インフラの構成を考える際は、なぜその構成にするのかの根拠が必要です。　
その一つの方法として、データ転送時間を求める計算方法を今回記載しました。　
提供するアプリ、サービスで許される時間なのかどうかを判断するのに、転送時間の計算は必要です。　
このくらいの転送時間がかかるから、利用する回線速度を上げないといけない等の判断も可能です。　
クラウドでの構築ばかりだと考慮しないことが多いですが、この辺の知識はインフラエンジニアとして押さえておいて損はないと思います。

# 追記
###伝送効率に関して
**TCP/IPを使う場合、specの7割程度が最大転送速度になるようです。**　
今回はこれを想定して伝送効率を70%に設定しています。
この辺はあまり詳しくないので、機会があればまとめていきたいと思います。
[Unityで学ぶC#] 8 switch

## switch文とは
複数の選択肢から1つを選ぶときに使います．

---
## 例: 敵の状態によって行動を選択


- 自由に移動
- 追いかける
- 攻撃する

という3つの状態を持つ敵がいたとします．


---
## 例: 敵の状態によって行動を選択


- 自由に移動 => 0
- 追いかける => 1
- 攻撃する  => 2

まずはこれらに番号付けします．

---
## 例: 敵の状態によって行動を選択

番号は整数なので，int型の変数で表現することができます．

`int state = 0; // 状態0 自由に移動`

state // 状態

---
## サンプル
switch文を使って書くとこうかけます．　
長いので，書き方を説明します．
<img width="500" alt="スクリーンショット 2017-03-04 21.53.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/2f00e83b-79b4-42ed-c64c-f10086862ee2.png">

---
## 1. 状態を宣言

```csharp
public class Example8 : MonoBehaviour {

	public int state = 0;

	void Start () {
		
	}
}
```

![state.gif](https://qiita-image-store.s3.amazonaws.com/0/113504/086c06c9-cadc-971e-116d-f16ce9c4dfe2.gif)

---
## 2. switch文1
```csharp
public class Example8 : MonoBehaviour {

	public int state = 0;

	void Start () {
		switch (state) {
		default:
			break;
		}
	}
}
```

![switch2.gif](https://qiita-image-store.s3.amazonaws.com/0/113504/04c4b668-5fdb-63cd-55e8-a5e1afce0fe3.gif)

1. まずswi くらいで，予測変換で`switch`が出るのでEnterを押す．
2. tabキーを押すと自動で書いてくれる
3. stateと入力

---
## 3. switch文2
```csharp
public class Example8 : MonoBehaviour {

	public int state = 0;

	void Start () {
		switch (state) {
		case 0:
			Debug.Log ("自由に移動する");
			break;
		default:
			break;
		}
	}
}
```

![switch3.gif](https://qiita-image-store.s3.amazonaws.com/0/113504/a4e4d04f-6c65-b962-7bdd-759314f20b22.gif)

case 0: と入力することで， stateが0だったときの処理を記述することができる．
break;をつけることを忘れずに

caseの右端はセミコロン;ではなく:コロンなので注意しましょう．

---
## 4. switch文3
あとはcaseを増やすだけ

<img width="500" alt="スクリーンショット 2017-03-04 21.53.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/2f7b7b1a-8cf6-1896-519c-41c57130bd8a.png">

---
## 実行
Stateによって行動が変わるようになりました．
<img width="500" alt="スクリーンショット 2017-03-04 22.12.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/619fae29-646b-ff47-efdb-9e3d90dcf7e6.png">

<img width="500" alt="スクリーンショット 2017-03-04 22.12.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/113504/1f87f0c6-22b4-5069-423f-e750c025fdfa.png">

---
## まとめ
```csharp
switch(変数)
{
  case 値1:
    いくつかの文1 // 変数の値 == 値1 のとき実行される
    break;
  case 値2:
    いくつかの文2 // 変数の値 == 値2 のとき実行される
    break;
      ・
      ・
      ・
  default:
    いくつかの文 // 変数の値がどの値とも異なるとき実行される
    break;
}
```

参考
http://ufcpp.net/study/csharp/st_branch.html#switch

---
# おわり