OmniAICreator/Qiita-1.07M huggingface dataset:
DockerでRubyを使用する

DockerコンテナにRubyをインストールしてみます。

# 確認したいこと

* DockerコンテナにRubyをインストールして、最低限の動作確認としてコンソールに文字列を表示すること。

# 前提条件

* VirtualBox
    * Windows、またはOS Xの場合。
    * `cinst virtualbox`(Windowsの場合)、`brew install virtualbox`(OS Xの場合)などでインストール可能です。
* Docker Machine
    * Windows、またはOS Xの場合。LinuxはDockerホスト環境が必要ないため、不要。
    * `cinst docker-machine`(Windowsの場合)、`brew install docker-machine`(OS Xの場合)などでインストール可能です。
* Docker Client
    * Linuxの場合。

# 確認手順

Windowsを前提に説明しますが、Docker Machineが使えるならどのOSでも大差ないはずです。

## Dockerホストを構築

Dockerホストを構築して、sshログインします。

```
$ docker-machine create --driver virtualbox default
$ docker-machine ssh
```

## Rubyコンテナーを構築、起動

Rubyをインストールしたコンテナーを構築、起動します。このコンテナーは、Ruby 2.3をインストールし、Rubyバージョン情報を表示します。

Dockerfileは作成済みなので、`git clone`します。

```
$ git clone https://github.com/u6k/ruby-docker.git
```

Dockerイメージを構築します。

```
$ cd ruby-docker/src/
$ docker build -t u6k/ruby-docker .
```

構築したDockerイメージをコンテナ起動します。Rubyバージョン情報が表示されます。

```
$ docker run u6k/ruby-docker
```

# GitHub

[u6k/ruby-docker](https://github.com/u6k/ruby-docker)
技術英語 > Steve, one point to make here. / Let me have my say. / me--have

@ LOE > January 10, 2003
http://loe.org/shows/shows.html?programID=03-P13-00002
> Steve, one point to make here.

意見をいいたい時などに使えそう。

<hr>
関連して思い出したのは

> Let me have my say.

http://ejje.weblio.jp/sentence/content/%22me--have%22

ソースは失念。会議英語の本だったか?

上のリンクは"me--have"というキーワードで検索されるのは面白い。

Let me have my say.がフォーマルな場面で使えるか、同僚との打ち合わせまでなのかは未消化。
ReactDOMをfor文で連結するには、配列にpushしていけば良い



jsxを使用した場合を想定しています。
jsxを使用しない場合は、<Hoge />をHoge()に置き換えてください。

```
    _getHogeDom: function(){
        const HOGE_MAX = 12;
        var hoge_inner = [];
        for(let i = 0; i < HOGE_MAX; i++){
            hoge_inner.push(<Hoge key={i} />);
        }

        return(
            <div className="hoge">
                {hoge_inner}
            </div>
        );
    }
```
iaas paas saas 

# iaas paas saas の違い
## iaas 「Infrastructure as a Service」
「イァース」 と読みます。OSから上を提供
centosが使える的なサービス
## paas  「Software as a Service」
「パース」と読みます。アプリケーション実行基盤を提供
apache,mysqlが使える的なサービス
## saas 「Software as a Service」
「サース」と読みます。アプリケーション提供
wordpress が使える的なサービス

# cloud service provider
![navbar-brand.png](https://qiita-image-store.s3.amazonaws.com/0/54159/8f07556c-7ec8-b386-147d-a2f012a64903.png)

[Conoha](https://www.conoha.jp/)

| 月額 | メモリ | CPU | SSD |
|:-----------|------------:|:------------:|:-------:|
| 900円/月\(1.3円/h\) | 1G | 2コア | 50G    |
| 1,750円/月\(2.5円/h\) | 2G | 3コア | 50G    |
| 49,480円/月\(68.8円/h\) | 64G | 24コア | 50G    |
NAOqi OSのVMを使ってみよう。 Pepper開発でもpipで依存関係解決したい


PepperのOSはNAOqiOSというGentoo LinuxベースのOSになっています。
そのNAOqi OSのVMイメージがアルデバランのディベロッパーサイトで公開されているので使ってみました。
>(情報をくれた河田さん神です)

## ダウンロード

[こちらのサイト](https://community.aldebaran.com/ja/resources/software/7-other-resources)からダウンロードしましょう。ログイン必須なので、ディベロッパー登録をしていない人は登録をしましょう。

![](https://i.gyazo.com/9d7f42d3af236ccabdcedf21a64cff2c.png)

ここでは`OpenNAO OS VirtualBox 2.1.2`をダウンロードしました。

ダウンロードが完了したらVirtualBoxにインポートしましょう。

## 起動

インポートしたら起動させます。

![](https://i.gyazo.com/d1b7c5f79ab73ab683ce4e470e4d2820.gif)

```
ユーザー名: nao
パスワード: nao
```

でログインできます。
**PepperにSHHログインするときと同じ感覚**ですね。

Pepper開発は通常本体が無いと難しいですが、このVMを使えば本体がなくてもPepperにまつわる環境整備などはある程度できるかもしれません。

ちなみに、rootにはなれないっぽいです(?)

## なんとpipが使えます。

今回のメイントピックです。 Pepper(NAOqiOS)にSSHログインしたときはpipは使えませんが、NAOqiOS VMならpipが使えます。

![](https://i.gyazo.com/e64b740b54a356df7bda9c7bd8194371.png)
	
```bash
$ pip install websocket
```

などで追加したいモジュールをインストールしてみましょう。

### インストールしたパッケージ確認

`/usr/lib/python2.7/site-packages/`以下にpip installしたパッケージが追加されています。

```bash
$ ls /usr/lib/python2.7/site-packages/
```

ここの中に新しく追加されたものが依存関係解決でインストールされたモジュールになります。

### 最後は手動でchoregrapheに

これらをzipにまとめてscpなどでホストOSに持って行きましょう。
(zipコマンドは-rオプションをつけて再帰的に圧縮かけましょうね)

ホストOS側では[前回の記事](http://qiita.com/n0bisuke/items/5b782bb758ce5611cc90)のように外部モジュール追加の手順でコレグラフに追加しましょう。

依存関係が解決された状態でモジュールを使うことができます。

## まとめ

NAOqi OSのVMがあることも知らなかったし、pipインストールできることも知らなかったのでだいぶメカラウロコ状態でした笑

外部モジュールをPepper開発で使う際は是非やってみてください。
MacにVisualStudioCodeのシェルコマンドをインストールする


先日アップデートのあった[VisualStudioCode](https://www.visualstudio.com/ja-jp/products/code-vs.aspx)をインストールしてみました。
僕自身はメインはAtomを使っているのですが、それらと同じ要領でVisualStudioCodeをターミナルから起動できるように設定しました。
以前のバージョンではbash_profile等にcodeコマンドのパスを通す必要があったと思うのですが、今回のバージョンから変わったようです。

下に記載した手順で設定をすることで最終的に

```
code .
```

とタイプすることで、カレントディレクトリをワーキングディレクトリとしてVisualStudioCodeが起動するようになります。


## 既に設定済みの場合

余談ですが、パスの設定をしていたマシンで同様にVisualStudioCodeをインストールして起動したところ、bash_profileのパス設定を削除するよう促すメッセージが表示され、指示通りにすると自動的に設定が変更され、codeコマンドが使えるようになりました。
（どの設定ファイルが書き換えられたのかは不明。。。）



## 環境

* MacOS X
* VisualStudioCode Version 0.10.10


## 手順

1. F1キーでコマンドパレットを呼び出す

2. "shell command install" とタイプする（入力補完で絞り込まれるはず）
![Work.png](https://qiita-image-store.s3.amazonaws.com/0/8607/66e981bd-8a43-f271-815d-93640cff80d5.png "Work.png")

3. Enter
![Work.png](https://qiita-image-store.s3.amazonaws.com/0/8607/24a0ab0a-2211-04c4-cb35-229596613866.png "Work.png")
4. ターミナルを再起動



## 参考

https://code.visualstudio.com/docs/editor/setup
hostapd initscript 覚書

``/etc/default/hostapd`` に記載されているコメントの日本語訳。

## hostapd 起動ファイル

hostapd の管理に使用する個々のメソッドについては ``/usr/share/doc/hostapd/README.Debian`` を参照してください。

hostapd 設定ファイルの絶対パスを指定します。
hostapd はシステム起動中に起動されます。
設定ファイルの記述例は ``/usr/share/doc/hostapd/examples/hostapd.conf.gz`` に格納されています。

```
DAEMON_CONF = ""
```

hostapd コマンドに追加する任意のデーモンオプションを指定します。

- ``-d``: 詳細なデバッグメッセージを表示します
  (より詳細に出力したい場合は ``-dd`` を指定してください)
- ``-K``: デバッグメッセージにキーデータを含める。
- ``-t``: いくつかのデバッグメッセージにタイムスタンプを含める

**注意** 
``-B``(デーモンモード)と ``-P``(PID ファイル)オプションは
``init.d`` スクリプトによって自動的に設定されます。
DAEMON_OPTS に追加しないでください。

```
DAEMON_OPTS = ""
```
DynamoDBのためのdinamoという簡易的なORMをかいた

[先日書いた記事](http://qiita.com/namusyaka/items/e805d1098827a4bd6835)の中で触れていたDynamoDBのための簡易的なORMについて、随分前から公開はしているものの、せっかくなので記事を書いて紹介しようと思い立った。

https://github.com/namusyaka/dinamo

位置付けとしては件のメディアストレージ基盤を開発する過程でうまれた副産物的なもの。
名前はDynamoをイタリア語にしただけで、読み方は「ディナモ」。

# 使い方

Ruby界隈でよく見られるORMの振る舞いを踏襲している、というだけでは些か抽象的すぎるので、具体例をいくつか示したい。

## モデルを定義する

```ruby
class User < Dinamo::Model
  hash_key :name, type: :string
  field :ruby, type: :string
end
```

## オブジェクトを生成する/保存する

```ruby
user = User.new(name: 'numb', ruby: 'なんぶ')
user.persisted? #=> false
user.save
user.persisted? #=> true
```

`create`を使っても良い。

```ruby
user = User.create(name: 'numb', ruby: 'なんぶ')
user.persisted? #=> true
```

## オブジェクトを変更する

```ruby
user = User.new(name: 'numb', ruby: 'なんぶ')
user.changed? #=> false
user.name = 'なんぶ'
user.changed? #=> true
user.save
user.changed? #=> false
```

## オブジェクトを取得する

```ruby
user = User.create(name: 'numb', ruby: 'なんぶ')
User.get(name: 'numb') #=> #<User:...>
```

## オブジェクトを削除する

```ruby
user = User.create(name: 'numb', ruby: 'なんぶ') #=> <User:...>
user.destroyed? #=> false
user.destroy
user.destroyed? #=> true
```

## バリデーション

デフォルトでは`validates_presence_of`のみが動作する。
基本的にバリデーターは自分で実装し、`validates_with`を用いて追加する。

```ruby
class NameLengthValidator < Dinamo::Model::Validation::Validator
  def validate(record)
    unless options[:length].include?(record.name.length)
      record.errors.add(:name, I18n.t("models.user.error.length"))
    end
  end
end

class User < Dinamo::Model

  hash_key :id
  field :name, type: :string
  
  validates_with NameLengthValidator, length: 1..30

end
```

コード中にある`Dinamo::Model::Validation::Validator`など(EachValidatorもある)を継承することで容易にバリデータを実装できる。

## 例外機構

`save`・`create`・`update`にはそれぞれ`!`を末尾に加えたメソッドも用意されており、該当するレコードが存在しなかったり、バリデーション違反とされた場合に例外が発生するようになる。


# なぜ作ったか

件のメディアストレージ基盤を開発する段階では、DynamoDB向けのORMは観測範囲においては`dynamoid`くらいしか見つからなかった。
ところが`dynamoid`はaws-sdk v2には対応しておらず、選択肢から除外せざるを得なかったという経緯がある。

観測範囲内に無いものは作るほかないので、ある程度自分からして扱いやすいインターフェースを備えたORMを書いた結果がdinamoだ。

# 所感

DynamoDBは使い勝手がいいが、aws-sdk単体で叩き続けるのはさすがに骨が折れる作業だ。
今回かいたdinamoについては、シンプルにDynamoDBを使う分には便利なgemになったように思う。

アソシエーションやマイグレーションといった機構については実装していない。
そもそも必要性について懐疑的であるし、加えて自分にとっては現状必要なものではなかったのが大きいように思う。

# 追記

という記事をあたためていたら、**dynamoidがaws-sdk v2に対応**したようだ。
リッチに、かつ、より楽にDynamoDBを使いたいRubyエンジニアはdynamoidを使うといいかもしれない。
Windows10からWindows7に戻すと言語バーが消える対策

#目次
１．はじめに
２．言語バーの戻し方

#１．はじめに
この記事は自分のメモ用として残すために記事にさせていただきました
同じようなことで困っている方の助けになればいいとおもいます
ちなみにこの記事は[121ware.com](http://121ware.com/spsearch/public/app/servlet/qadoc?QID=018421)の記事を引用させていただいています

#２．言語バーの戻し方
![スクリーンショット 2016-03-09 01.50.35.png](https://qiita-image-store.s3.amazonaws.com/0/77197/5765be5a-7369-ceac-e78b-55c6bcad7764.png)

1-1.スタートボタンを選択し「プログラムとファイルの検索」に「ctfmon」と入力します

1-2.「ctfmon.exe」を選択し起動します

1-3.起動後に言語バーが表示されたことを確認したら一度PCを再起動します

**再起動後に言語バーが消えていたら次のことを行ってください**

![スクリーンショット 2016-03-09 01.56.55.png](https://qiita-image-store.s3.amazonaws.com/0/77197/a5c0b582-c09e-2bb7-ac6a-bd77fc821e65.png)

2-1.先ほどの1-1と同じことをして「ctfmon.exe」を右クリックし「送る」にカーソルを合わせ「デスクトップ(ショートカットを作成)」を選択します

![スクリーンショット 2016-03-09 01.57.09.png](https://qiita-image-store.s3.amazonaws.com/0/77197/47527e1f-b8c3-09f8-fb64-2830801e7895.png)

2-2.デスクトップにショートカットが作成されたのでそれを右クリックし「切り取り」を選択します

![スクリーンショット 2016-03-09 01.57.20.png](https://qiita-image-store.s3.amazonaws.com/0/77197/a9d6f3c7-6de2-5bc0-b9e2-b4200f3b193a.png)

2-3.スタートボタンを選択し「すべてのプログラム」から「スタートアップ」を右クリックし「開く」を選択します

![スクリーンショット 2016-03-09 01.57.36.png](https://qiita-image-store.s3.amazonaws.com/0/77197/be81cb88-ca19-72b3-d5ef-f1dc055fe704.png)

2-4.スタートアップが表示されるので先ほど切り取りをしたものを右クリックをして「貼り付け」をしましょう

![スクリーンショット 2016-03-09 01.57.50.png](https://qiita-image-store.s3.amazonaws.com/0/77197/d4f0959c-8fe8-3ffb-e772-32cda0055098.png)

2-5.ショートカットがスタートアップに貼り付けが完了したらもう一度再起動しましょう

![スクリーンショット 2016-03-09 02.09.34.png](https://qiita-image-store.s3.amazonaws.com/0/77197/b1678a52-69c8-35f3-4682-c38b269a3249.png)

2-6.再起動後に言語バーがあれば作業は完了となります
開発者向けオプションをコードから開く


# 概要
社内向けのデザイン確認アプリに「開発者向けオプション」を開くボタンを付けたくなったのでメモです。開発者向けオプションが有効かどうかを判定し、有効ならば開発者向けオプションを開きます。

# 開発者向けオプションが有効かの判定
`Settings.Secure.getInt`メソッドを使用します。`Settings.Global.DEVELOPMENT_SETTINGS_ENABLED`フィールドはAPIレベル17以上で有効です。

戻り値が1ならば開発者向けオプションが有効になっています。

```java
boolean isEnable = Settings.Secure.getInt(this.getContentResolver(),
                Settings.Global.DEVELOPMENT_SETTINGS_ENABLED , 0) == 1;
```

# 開発者向けオプションのオープン

以下のようにintentを投げることで開発者向けオプションを開くことができます。

```java
Intent intent = new Intent(android.provider.Settings.ACTION_APPLICATION_DEVELOPMENT_SETTINGS);
startActivity(intent);
```

# 最終的なコード

開発者向けオプションが有効かどうかを判別し、有効ならばintentを投げて開くコードは最終的には以下のようになります。

```java
boolean isEnable = Settings.Secure.getInt(this.getContentResolver(),
                Settings.Global.DEVELOPMENT_SETTINGS_ENABLED , 0) == 1;

if (isEnable) {
    Intent intent = new Intent(android.provider.Settings.ACTION_APPLICATION_DEVELOPMENT_SETTINGS);
    startActivity(intent);
}
```
HTMLを15年書いてる僕が語ってみる vol.1

僕はHTMLを書き始めて約15年。割と年齢は若い方で、いわゆる「ベテラン」という感じではないのですが、
長く付き合ってきたこの言語について、最近思うことが多いので語らせてください。
元W3Cメンバーとして考えていたことなので、
マークアップエンジニア、フロントエンドエンジニアには刺さるかもしれません。

以下が今回のお話です。

# 語りたいこと

1. HTMLの変遷
2. HTMLってそもそも何
3. 僕が書いた15年間

## 1. HTMLの変遷

### 1-1. 僕のマークアップの始まり

約15年前、僕は自分が産まれる前にできたファミコンのスーパーマリオブラザーズが大好きで、
なんとなく勢いで「ホームページ」を作ってみました。
母親がドリームキャストでホームページを作っていたので、「あ、なんかできそう」みたいな感覚で。

### 1-2. テーブルレイアウト

当時はHTMLが主に大文字で書かれていて、ほとんどがtable要素でマークアップされていました。
いわゆる「テーブルレイアウト」です。
それがトレンドだったし、何も間違っていなかったんです。
他には、font要素やcenter要素などもありました。
今ではCSSに任せる部分をHTMLで補っていました。

### 1-3. CSSの登場とFlashの活躍

そのちょっと後ぐらいから、CSSが意識されはじめました。
HTMLは正しいマークアップを、スタイリングはCSSで、という常識が作られ始めたのがそのぐらいの時です。
もしくはFlashのみで構成された「フルFlashサイト」なんかも多用されていました。
ただし、Flashはマークアップとして認められませんでした。
というより、検索エンジンのロボットがクロールしてFlashの中から文章を抜き出すのが難しかったのです。
現在のcanvasも同様ですね。

しかし、テーブルレイアウトやFlashの息は長く、思えば8年ぐらい前までは普通にテーブルレイアウトの
サイトが存在していました。
もちろん忌み嫌う人はいたし、それが間違いと思う人は多かったです。

そしてその名残りで、「tableは悪」と謳う人が出てき始めます。
今ではそのようなことはありません。悪は正しくないマークアップです。

### 1-4. テーブルレイアウトの消滅

次にテーブルレイアウトはなくなってきて、CSSにレイアウトやスタイリングを任せきる時代がやってきます。
HTMLソースはdivだらけ。今では考えられないマークアップです。
しかし、そもそもdiv、p、ul、ol、dl、h{n}ぐらいしかブロック要素がなかったのです。
divにheaderなどのクラスを付けてスタイリングしていました。

### 1-5. HTML5の登場

その後HTML5が登場し、有用なHTML要素が増えました。
header要素、section要素など。

section要素は用途が曖昧な時期があり、divを使ってしまう「div病」が流行りました。
そこでHTMLの価値観や考え方がざっくり分れたのです。

現状はある程度HTML5に対する考え方も統一されましたが、
やはり正しいマークアップをできる人はそこまで多くないように思います。
これからなのでしょう。

---

## 2. HTMLってそもそも何

### 2-1. HTMLの意義

ここからは僕が思うことです。
HTMLはそもそも何か。起源を辿れは文章を効率的に読ませるための言語です。

「ハイパーリンク」、今では普通にリンクと呼ばれていますが、
その画期的な仕組みを利用して、膨大な文章から目的のものを見つけ出し、
読ませることがHTMLのゴールでした。

それを考えると、HTMLは「絵」をきれいに見せるための言語ではないのです。
言葉は時代とともに変化していきますが、
言語の根幹は変わりません。

### 2-2. 正しさの対価

現実、googleは正しく文章としてマークアップされたものを良質なものとして捉えます。
そのことを忘れずHTMLを書いていれば、間違いは今のところありません。

私がHTMLを教える人にはここを一番大事なものとして伝えます。
はき違えると、セマンティックなコードを書けなくなってしまいます。

---

## 3. 僕が書いた15年間

### 3-1. 感じてきたこと

15年間の間に前述のようなHTMLの変遷があり、僕も多種多様な変化を遂げてきました。
変化しないと時代に乗り遅れてしまう = お金が稼げないのです。

とにかく手を動かして、インターネットの物事なので、本ではなくインターネットで調べて
自分で勉強をしてきました。

自分の中でインパクトが大きかったのはやはりHTML5で、
「文章を正しく認識」させるための要素が充実していたのには感動しました。
divにsectionなんてクラスを付けていたのが懐かしいです。

### 3-2. マークアップ学習のコツ

一度HTML5の要素を全て学習してみてください。
「これは使った方が良い」とか、「自分の領分ではこれは使わない」みたいな要素が
無数に見つかるはずです。

自分が作り出したい文章のための取捨選択を妥協せずやってみてください。
きっと良い文章が書けるはずです。

CSSは小手先のテクニックであって、大事なのは文書構造、情報設計です。

---

## 最後に

色々な認識の飛びかうマークアップの世界で生き残るには、
正しいものを正しく選ぶべきだと、自分の経験で学びました。

みなさまの知識の肥やしになれば良いなということで、
不定期ではありますがこんな駄文を書いていこうと思います。

ありがとうございました。

第二弾は別ブログにて投稿しました。ご一読いただければ幸いです。
http://thrbrd.hatenablog.jp/entry/2016/03/13/html-vol2

---

## 追記

同タイトルで勉強会をやることになりました。
ご興味のある方は是非いらっしゃってください！
http://d-cube.connpass.com/event/30511/
hubotを使ってSlack経由からDeployGateにAPKを配布するbotを作った話

# 概要
前々から興味を持っていたが、特に触ってこなかったチャットbotを作った。

主な機能はSlack上で発言すると、発言内容を解釈してDeployGateにAPKをアップロードして動作確認することができる。

今回の成果物は**hubot**を使用しているが、使い勝手や環境構築といった手順は他の記事でいくらでも出てくるので割愛する。

# 経緯
そもそもDeployGateにアップロードすること自体はGradleのコマンド一発で実行できるので、開発者的には特に必要無かった。

ただチームで開発していると、企画・デザイナーの人が開発環境向きのAPKが必要になったり特定のバージョンのAPKを試したくなったりと言ったケースがたまにあったりする。

そういう時にAndroidの開発環境を用意して、さらにコンソールからコマンドを叩くのは敷居が非常に高い。

なので特に環境を用意する必要もなく、手軽に特定バージョンのAPKビルドを実行できる仕組みをSlackを用いて実現することにしてみた。

# 成果物
## レイ
アプリケーション開発支援bot [元ネタ](https://ja.wikipedia.org/wiki/%E8%92%BC%E3%81%8D%E6%B5%81%E6%98%9FSPT%E3%83%AC%E3%82%A4%E3%82%BA%E3%83%8A%E3%83%BC)

- Lay
 - https://github.com/chuross/lay

なぜレイズナーなのかというと、まずサポートコンピューターで劇中でも色々な戦闘支援を行っていたので、今回のような開発を支援するbotの名前としては合いそうだった。

あとは単純に好きな作品だった。

ただ原作と同じような感じでキャラ付けしてしまうと、全部セリフがカタカナになって読みづらくなるのでキャラ崩壊は起こしてる。

#機能
ざっと実装した機能を紹介

詳しくはREADME.md参照
https://github.com/chuross/lay#コマンド一覧

## 設定の初期化
レイに設定している内容を初期化

```
@lay_bot initialize
```

この後対話式で**Y/n**をSlack上で発言すると設定ファイルを初期状態に戻す
設定ファイルはjsonで管理されている

### 初期化項目

|command|description|
|---|---|
|repository_remote_path|レイがリポジトリをcloneしてくるためのオリジナルのリモートパス|
|deploygate_default_flavor|デフォルトで指定するDeployGateのBuildFlavor|

### originリポジトリのclone
上で設定した**repository_remote_path**の値を使ってDeployGateの処理をしたいリポジトリをcloneさせる

```
@lay_bot repository refresh
```

## DeployGateへのアップロード
*※あらかじめbuild.gradleにDeployGateの設定を定義しておく必要がある*

このbotはあくまで`./gradlew uploadDeployGate`にあたるコマンドを整形して実行するだけなので、
リポジトリそのものの設定や準備はセルフサービス

APKの生成コマンドはこんな感じ

リモートパスを追加してやれば自由なブランチやBuildFlavorで生成したAPKをDeployGateにアップロードできる

`origin`の向き先は上の項目で設定した**repository_remote_path**の値

```
# origin masterのuploadDeployGateDebugコマンドを実行
@lay_bot deploygate upload -
```
origin masterのAPKを作るだけだったらこれだけでいける
BuildFalvorは上で設定した**deploygate_default_flavor**が利用される

ハイフンが最後に付いてるのは単純にbotの起動ルールに何らかのオプションもらうようにしてるからで、
気が向いたらオプション無しでも起動できるように修正する。

### 他の人のブランチからDeployGateにアップロードする

```
# レイが管理してるgitに参照先を追加してやる必要がある
@lay_bot repository remote add hoge git@github.com:fuga/piyo.git

# ブランチと向き先をオプションで指定してやる
@lay_bot deploygate upload -remote hoge -branch {:対象のbranch}
```

### BuildFlavorを指定してDeployGateにアップロードする

```
@lay_bot deploygate upload -flavor {:対象のBuilFlavor}
```

### タグを指定してDeployGateにアップロードする

```
@lay_bot deploygate upload -branch tags/refs/{:タグの名前}
```

コマンドは日本語の方が企画やデザイナーさんにとっては楽じゃね！？みたいなのはありそう。

一番の目的である環境構築を企画・デザイナーさんがやらなくて良いとこはクリアできてるのと、
今のチームではこれくらいであれば普通に覚えて使ってもらえるので今回は良かった。

# 結果
APKが簡単に作れるようになったので、必要に応じた動作確認がやりやすくなった。

新規機能を企画やデザイナーの人達にいち早く触ってもらうことで、認識合わせやリリースまでの品質向上に役立てていきたい。

# 今後の予定
## hubot-scriptsで機能を切り出す
今のままだとDeployGateだったり、Android開発に特化してしまっているので幅広い開発に使えるような改修を加えたい。*アプリケーション開発支援botだしね*

なのでDeployGateでのAPKアップロード機能はhubot-scriptsに切りだして、TestFairyが利用されているプロダクトなどの環境の違う場合でも対応できるようにしたい。

# 感想
hubotによるbot開発は思ったより簡単で良かった。あと楽しい。

現状オプションの入力値のチェックなどは厳密ではないので、すべての人は善の人であることを期待して運用しましょう！後々対応するかも。

何か便利そうな機能要望あればissueにて随時検討。
AssetStoreでAsset購入時にトランザクションエラーが出たので対処してもらった話

AssetStoreでAsset購入しようとしたら「トランザクションエラー」という見慣れぬエラーが出て購入できなくなった際の解決記録です。

# トランザクションエラー発生迄の経緯
1. カードが不正利用の疑いがあったので交換しました。
2. AssetStoreでAsset購入に利用していたを忘れてそのまま購入しようとしてエラーが発生　利用していた事を思い出してカード情報を削除。
3. 交換したカードを登録しようとクレジットカードで購入を選択したらトランザクションエラー発生。

# 解決記録
1. 一日待ってみたりキャッシュ消したりしてみましたがエラー発生し続ける。
2. 公式ページのCompany>お問い合わせページからトランザクションエラーが出て購入出来ないことを連絡
3. Unityからカードの不正利用や盗難・紛失などがあった場合、その後のアセットご購入時にカード会社からその旨が通知されて自動的にロックされる。との返答と解除するのでアカウント名とメールアドレスを記述して返信くださいと連絡が来る。
4. アカウント名とメールアドレスを記述して返信　ロック解除手続き開始の返信が来る。
5. ロック解除連絡が来たので購入できる事を確認　確認できた事を連絡。
6. 問題解決ということでUnity側のチケット終了通知が来て終了


以上です。
【Shader Forge】Timer + Lerp 使ってみた

時間経過に応じて色が変わるnodeを組むことができた
http://acegikmo.com/shaderforge/wiki/index.php?title=Time_%26_Pulsating_Lights
を参考にしました。

ポイントは、Lerpで二つの色を補完してること。
LerpのTにTime+Sin+Remapを繋げることで時間経過によって色がかわるように表現してる。
時間で変わる色にTexture2DをMultiplyで掛け合わせて完成。

`Node`
<img width="701" alt="スクリーンショット 2016-03-09 0.18.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/67575/2b0820fe-f522-69ab-f262-9b5a6afb8d8e.png">

![3月-09,-2016-00-17-compressor.gif](https://qiita-image-store.s3.amazonaws.com/0/67575/883a18bc-5198-5a76-f9fc-0f32841adc9f.gif)

あれ・・・gifが再生されない・・・？
=>gifは1MB以内じゃないと再生されないようです・・・
私はswitch文が嫌い

私はswitch文が嫌いである。
###**理由１：同じ変数が入るswitch文があちこちにある場合には問題が多い。**
　同じ変数が入るswitch文が多数ある場合には、「単一責任の原理」を破っている可能性が高い。コードを改変したとき、一方だけ改変して、他方が放置される可能性が生じる。
###**理由２：論理構造とデータが分離されていない。**
　switch文では、データが追加されるとcaseの分岐が増えてしまい、制御構造への変更が生じてしまう。データの追加によって制御構造が変わってしまうのは、case文がbreakを書き忘れしうることから、うれしくない。

###**理由３：整数型しか用いることができない。**
　switch文で記述できるのは、整数値に限られる。そのため、比較先の値がenum型を使われることが多いのだが、enum型の値は、印字したときに整数値にすぎず(注)、「5という値は何を意味していたかなあ」とヘッダファイルからenumの値とその意味を探らなければならなくなる。
　整数型で値の比較で条件わけするのは、確かに速いのだろう。しかし、CPUの性能が上がっているときには文字列との比較をして、文字列を印字させた方が、はるかに意味がわかりやすく、開発時の値の表示の意味がわかりやすい分だけ、開発効率が上昇するように思う。

###**理由４：switch文ではbreak;のありなしの自由度があるのが嫌い。**
　分岐の数が多数あるときに、いちいちswitch-caseの詳細をきちんと読むことをしたくない。どのcaseではbreakがあり、どのcaseにはbreakがないなどの可能性がありのが嫌い。

###**理由5：caseごとに、記述される動作が共通性なく記述できることが嫌い。**
　caseごとに記述できる内容は、脈絡なくどのような内容でも記述可能です。そのため、そのswitch文が何をするのかは、全てを読まないと確認できないのです。

```.c:
switch(dayOfWeek){
case Sunday:
　市場に出かけ;
  break;
case Monday:
　おふろをたいて;
  break;
case Tuesday:
  おふろにはいり;
  break;
case Wednesday:
  ともだちが来て;
  break;
case Thursday:
  送っていった;
  break;
case Friday:
  糸まきもせず;
  break;
case Saturday:
  おしゃべりばかり:
  break
default:
 ;
}
```


##**対策：**
　私は、このような目的にmap型を使っている。
効果１：
　switch文をstd::map型に置き換えることで、そのmap型を参照することで、map型の定義を１回記述するだけで済むので、単一責務の原則を実現しやすい。
効果２：
　論理構造とデータが分離される。データの追加があっても、論理構造が改変されることがない。
効果３：
 std::map<std::string, std::string>などのように条件わけの入力にstd::stringや他のデータ構造を入れることができる。
そのため、enum型よりも表示させたときに意味がわかりやすい。

効果４：
　map型は値の入力に対して値を返すだけなので、breakの有り無しのような自由度が入りようがない。
効果５：
　map型は返される値の型が決まっているので、一定のルールが守られる。
  返される値に関数を入れることもできるので、一貫性のある設計を簡潔に記述することができる。


注：
ブログサイト[enum(列挙型) の使い方](http://homepage2.nifty.com/well/enum.html)
> C++ では、enum(列挙型) の値を例えば printf で表示しようとすると、整数として表示するしか方法がないということです。



追記：
switch文については
[コードの不吉な臭い]
(http://qiita.com/NagaokaKenichi/items/22972e6ba698c7f2978a#10-switch%E6%96%87)
の中にもあげられています。
[「新装版　リファクタリング　既存のコードを安全に改善する」](https://www.amazon.co.jp/dp/B01IGW5MG0/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)


[switchを消すメイキング的な話](https://qiita.com/sasanon/items/3a6ff6dc54b4fd8bafdb)
Alloy CollectionからModelを全て削除する

AlloyでSQL Sync Adapterを使っているときに、CollectionからModelを全て削除する、つまりテーブル内のレコードを全削除する方法です。

### SQL版

Collectionを拡張して全削除用のメソッドを追加、その中で、SQLのDELETE文を発行してレコードを削除します。

その後 `sync` イベントを発生して、データベースの状態とCollectionを同期させておくようです。

```javascript
exports.definition = {
  ...
  extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
      deleteAll : function() {
        var collection = this;
        var sql = 'DELETE FROM ' + collection.config.adapter.collection_name;
        var db = Ti.Database.open(collection.config.adapter.db_name);
        db.execute(sql);
        db.close();

        collection.trigger('sync');
      }
    });

    return Collection;
  }
};
```

### ループ版

参考URLには、以下のようにCollectionが持つModelを順番に `destroy()` していく方法も紹介されていましたが、やはり上記のようにSQLを直接発行する方がパフォーマンス的にも良いようです。

Modelの中身によって削除するかしないかを判別する場合などは、この方法も使えると思います。

```javascript
while(collection.length > 0) {
  collection.at(0).destroy();
}
```

参考
----

* [How do i delete all records out of an Alloy database? | Appcelerator Q&A Archive](https://archive.appcelerator.com/question/148127/how-do-i-delete-all-records-out-of-an-alloy-database)
* [One way to do bulk updates and deletes with Appcelerator Alloy Collections](https://gist.github.com/aaronksaunders/5066608)
[ImageMagick]アイコン画像のマージン部分までアイコンの内容を拡大してマージンを消す方法

複数のフリーアイコンを組み合わせて開発をしようとしたところ、アイコンセットごとに設定されたマージンが異なるために、表示を調整するのが辛いという問題に直面しました。
ならばマージンなんて全部消してしまえばいいじゃない。ということで作ったシェルスクリプトです。ImageMagickが必要です。
画像のサイズは変えず、アイコン自体をマージン部分がなくなるように拡大します。

```bash:pad_icon_margin.sh
#!/bin/bash

image=$1

width=`identify -format '%w' $image`
height=`identify -format '%h' $image`
size=${width}x${height}

mogrify -trim +repage -geometry $size -gravity center -background none -extent $size $image
```

各処理説明：
1. identifyコマンドを使って画像の元サイズを取得しておく。
2. 画像変換(mogrify)
-trim: 余白を削る
+repage: あまりわかってないけどこれがないとGimpで開く時におかしくなるので付けた
-geometry: 縦横比を維持しつつ元のサイズに収まるように画像をリサイズする
-gravity: extentした時の画像の位置を設定する
-background: extentで拡張した部分の色を指定する。noneは透明。
-extent: 画像のサイズを指定サイズに変更する
複数の変数でRのデータフレームを分割する

Rで、SQLのgroup by句のように、データフレームを分割したい。
単一の変数でデータフレームを分割するだけなら、split関数でも出来る。

```r
#mtcarsをcyl変数で分割する
dfs <- split(mtcars, mtcars$cyl)
```
しかし複数の変数で分割したい場合、split関数は使えない。

こういうときは、dplyrのgroup_by関数を使うとよい。
group_by関数が返すオブジェクトにはindices属性がついており、これを使えばデータフレームを分割することができる。（ただしgroup_by関数の結果をそのままsummarise関数とかに流すだけならindices属性で分割する必要はないけど）

```r
require(dplyr)

#mtcarsをcyl変数とgear変数で分割する
grouped_df <- mtcars %>%
  group_by(cyl, gear)

indices <- attr(grouped_df, "indices")

#indicesに入っているインデックスの数値は0オリジンなので、1オリジンになおす
indices <- lapply(indices, function(index) index+1)

dfs <- lapply(indices, function(index) mtcars[index,])
```

##追記
stackoverflowを見ていたらどうやらもっと簡単な方法があるらしく、split関数に変数のlistを渡すだけで複数の変数で分割できるようだ。ただし結果に長さが0行のデータフレームが含まれてしまうので、それを取り除く必要がある。

```r
dfs <- split(mtcars,list(mtcars$cyl,mtcars$gear))

#0行のデータフレームを取り除く
dfs <- Filter(function(df) nrow(df) > 0, dfs)
```


参考

* [Split dataframe using two columns of data and apply common transformation on list of resulting dataframes](http://stackoverflow.com/questions/8942670/split-dataframe-using-two-columns-of-data-and-apply-common-transformation-on-lis)
名前付きで正規表現の結果をキャプチャする

こんな感じで正規表現の結果を参照したかったので作ってみました

```swift
let target = "^/users/(?<user_id>[0-9]+)/items/(?<item_id>[0-9]+)$"
let regex = try! NameCaptureRegex(pattern: target)

if case let .Match(parameter) = regex.match("/users/1/items/100") {
    print(parameter["user_id"]) // "1"
    print(parameter["item_id"]) // "100"
}
```


## 実装

```swift
public final class NameCaptureRegex {
    
    public enum Result {
        case Match([String: String])
        case None
    }
    
    private var _regex: NSRegularExpression!
    private var _capturedKeys: [String] = []
    
    public init(pattern: String) throws {
        
        let regex = try NSRegularExpression(pattern: "\\(\\?<([a-zA-Z_][0-9a-zA-Z_]+)>(.+?)\\)", options: [])
        
        let formattedPattern = regex.stringByReplacingMatchesInString(
            pattern, options: [], range: NSMakeRange(0, pattern.utf16.count), withTemplate: "($2)"
        )
        
        _capturedKeys = regex.matchesInString(pattern, options: [], range: NSMakeRange(0, pattern.utf8.count)).map {
            let range = $0.rangeAtIndex(1)
            let start = pattern.utf16.startIndex.advancedBy(range.location)
            let end = start.advancedBy(range.length)
            return String(pattern.utf16[start..<end])
        }
        
        _regex = try NSRegularExpression(pattern: formattedPattern, options: [])
    }
    
    public func match(target: String) -> Result {
        
        let results = _regex.matchesInString(target, options: [], range: NSMakeRange(0, target.utf16.count))
        
        if results.isEmpty {
            return .None
        }
        var dict: [String: String] = [:]
        for i in 1..<results[0].numberOfRanges {
            let range = results[0].rangeAtIndex(i)
            let start = target.utf16.startIndex.advancedBy(range.location)
            let end = start.advancedBy(range.length)
            
            dict[_capturedKeys[i-1]] = String(target.utf16[start..<end])
        }
        return .Match(dict)
    }
}

```
brewでgitインストール&GitHub設定編

環境

- OS X El capitan v10,11,3
- home-brew導入済み
- あらかじめGitHubアカウントを持っていること。

Macはデフォルトでgitがインストールされているが、新しいものを使いたいためbrewでインストールしてみました。

#brewでgitをインストール

```
brew install git
```

をした後

```
git -V
```

で新しいgitがインストールされていることがわかる。

#gitの設定

```git
git config --global user.name "ユーザー名"
git config --global user.email メールアドレス
```

設定されているかは`git config --list`を実行するか、または'~/.gitconfig'ファイルの中身を見るかで確認できます。

#SSH接続の設定

SSH接続でgitにpushするために鍵を作成
途中で場所とpassphraseについて聞かれますが、カスタマイズしないのでEnterを押します。
下記のような表示(１部分)になります。

```
ebisennet$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/ebisennet/.ssh/id_rsa): 
Created directory '/Users/ebisennet/.ssh'.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /Users/ebisennet/.ssh/id_rsa.
Your public key has been saved in /Users/ebisennet/.ssh/id_rsa.pub.
・・・
[RSA 2048]
```

図形が表示さたら鍵ができています。

#GitHubに公開鍵を登録する

##id_rsa.pubの中身をコピー

```
ebisennet$ cat ~/.ssh/id_rsa.pub
ssh-rsa XXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX.local
```

catで表示された文字列を全てコピーします。

##GitHub側の設定
ログイン後右上のアカウントアイコンをクリックしSettingsをクリック
(画像はSkitchで編集)

<img width="211" alt="スクリーンショット_2016-03-08_22_25_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/57916/bf4080a4-bd49-99c9-c6c7-0730e80915b7.png">

Personal settingsのSSH keysをクリックしNew SSH keyをクリック<img width="1018" alt="スクリーンショット_2016-03-08_22_48_20.png" src="https://qiita-image-store.s3.amazonaws.com/0/57916/0abd0f94-ad76-2bbe-0fb8-6124d43c4049.png">

Titleは自分で任意の名前をつけることができます。今回はMacPCとします。

Keyには先程コピーした公開鍵を貼り付けます。

その後Add SSH keyを押せばGitHub側の設定は完了です。

##最後にSSH接続の時、証明書を指定します。

今後いろんな場面でSSH接続すると思うので整理します。

```
ebisennet$ cd ~/.ssh
ebisennet$ mkdir GitHub
ebisennet$ mv id_rsa id_rsa.pub GitHub
```

configファイルに設定します。

```
vim ~/.ssh/config
```

中身を

```
Host github
  HostName github.com
  IdentityFile ~/.ssh/GitHub/id_rsa
  User git
```

で保存すれば完了です。

ちなみに`ssh github`で接続してみると
正常に接続されましたが、シェルのアクセスは提供してないと怒られ接続が切られます。
Android How to Test

# 対象読者

- Androidのテストをこれから書きたい人
- Androidのテストを書こうとして挫折した人
- Androidのテストフレームワークが乱立していて迷子になった人
- つまり俺

# 単体テスト

- [公式のトレーニング](http://developer.android.com/intl/ja/training/testing/unit-testing/index.html)には、JVMで実行する方法と実機orエミュレータで実行する方法が書いてあるが、微妙。
    - JVMで実行する場合
        - まったくAndroid frameworkに依存しないクラスは問題ない
        - Android frameworkに依存するクラスの場合、Mockitoを使ってAndroid frameworkをモック化する必要があってめんどくさい
    - 実機orエミュレータの場合
        - 実行速度が遅い
- **[Robolectric](http://robolectric.org/)を使って書くのがおすすめ**
    - Android frameworkに依存したテストもJVMで実行できる
        - JVMなので高速
    - 実績多数。現在も開発も活発。
- 他のクラスに依存するクラスのテストの場合は、依存するクラスをモックに差し替えてテストする
    - 例：APIクライアントをモック化して、いつも同じ値を返すようにする
    - [Dagger 2](http://google.github.io/dagger/)など依存性注入フレームワークを入れるておくと、テストのときだけ差し替えやすい


# 結合テスト

- [公式のトレーニング](http://developer.android.com/intl/ja/training/testing/ui-testing/index.html)に従えば良い
    - 自分のアプリのみが対象なら、Espressoを使って書く
        - 基本はこっち
    - 複数のアプリをまたぐ場合は、UI Automatorを使って書く
        - Googleログインとか、システムのモーダルを操作する場合とか
        - Espressoと混ぜて使っても良い
        - UI Automatorはver 2になって色々変わっている。DroidKaigi 2016の講演が詳しいので参考に: http://sumio.hatenablog.com/entry/2016/02/22/235625

# まとめ

- 単体テストはRobolectricを使って書いてJVMで実行する
- 結合テストは基本Espresso、一部UI Automatorを使って実機 or エミュレータで実行する
- サンプルプロジェクトを作った https://github.com/kobakei/Android-HowToTest
RDSへ大量データを入れようとしたらハマった話

RDS(MySQL)で大量データを入れて性能試験を実施する必要があり、そのときに試行錯誤した結果、学んだことを残しておきます。

## 1. ストレージサイズは減らせない

AWSなので大量データを入れる時だけ増やして、終わったら元に戻せばいいやという考えで進めていたのですが、実はRDSはストレージサイズを減らせないことがわかりました。

> 一度割り当てたストレージサイズを縮小することはできません。

これは一時的にもう一つ環境を作るのが楽だと思います。手順はこれだけ。

1. 既存のDBインスタンスのスナップショットをとる
2. スナップショットから復元する
3. アプリケーション側の接続定義を変える

## 2. 新環境に接続できない

これだけといいつつはまってしまいました。大量データとは直接は関係ないのですが、今回はアプリケーション側とVPCピアリングで接続しており、そちらから接続するためのプライベートIPを知る必要がありました。

これがどこに記載があるかわからない。。

かなりいろいろ調べた結果、RDSでもVPCでもなく、EC2のメニューにある「ネットワークインターフェース」で確認取れることがわかりました。（なんでEC2使ってないのにEC2にあるんだろう。。

## 3. 書込み速度に制限がかかる

環境を作ってデータを入れ始めるところまできました。
初めのほうはサクサク入っていきますが、途中で急に遅くなりました。

原因はこれです。
> I/O クレジットおよびバーストパフォーマンス
> 
> 汎用 (SSD) ストレージのパフォーマンスは、ボリュームサイズの影響を受けます。ボリュームサイズによって、ボリュームのベースパフォーマンスレベルや I/O クレジットを取得する速さが決まります。ボリュームサイズが大きいほどベースパフォーマンスレベルが高くなり、I/O クレジットの取得速度も速くなります。I/O クレジットとは、ベースレベルのパフォーマンスでは不十分な場合、大量の I/O をバーストする際に汎用 (SSD) ストレージで使用できる帯域幅を表します。ストレージが I/O に対して保持しているクレジットが多いほど、ベースパフォーマンスレベルを超えたバーストには時間がかかりますが、より高いパフォーマンスが必要な場合はボリュームのパフォーマンスが向上します。
> 
> 汎用 (SSD) ストレージを使用した場合、DB インスタンスは、初期 I/O クレジットバランス（5,400,000 I/O クレジット）を受け取ります。これは、30 分間で 3,000 IOPS という最大バーストパフォーマンスを持続するには十分な数のクレジットです。この初期クレジットバランスは、ブートボリュームでの高速な初期起動サイクル、および他のアプリケーションでの優れたブートストラップエクスペリエンスを実現するために設計されました。ストレージは、ボリュームサイズの 1 GB あたり 3 IOPS というベースパフォーマンスレートで、I/O クレジットを毎秒取得します。たとえば、100 GB の汎用 (SSD) ストレージではベースパフォーマンスは 300 IOPS になります。

どういうことなのか遅くなるまで理解できていなかったのですが、

* ある程度（クレジットの範囲まで）は高いパフォーマンスで動く
* それ以降はベースパフォーマンスに制限される
* ストレージ容量に応じてパフォーマンスは向上する

ということらしいです。
たとえば、100Gのデータを入れるからと言って、100Gの容量を用意しているだけだと入れるのはかなり遅くなります。300Gの容量にしておくと3倍の速さで入れることができます。

これらのパフォーマンスは、マネジメントコンソールからモニタリングビュー「Write Operations (Count/Second)」を見るとよくわかります。


## まとめ

自分でやってみてハマったからこそ身に付くんですよね。いい経験した！
AngularJS+spin.jsでOverlay(前編)

ajaxのように非同期な処理を実行中は、こんな画像(アニメーション)をオーバーレイ表示させて操作を受け付けなくするということをやりたい。
![overlay.png](https://qiita-image-store.s3.amazonaws.com/0/115996/9bf73dce-c135-1dc3-ae6a-307ad4bf295a.png)

jQueryだと割と簡単にできた気もしますが、今回はAngularJSでやりたい。
さらに、ぐるぐる回るアニメーションを表示させるspin.jsを使いたい。

#spin.jsを入れる
まずは[spin.js](http://fgnass.github.io/spin.js)を導入。
リンク先の公式サイトからspin.min.jsを落として来て、配置と読込を済ませる。
spin.jsは依存ライブラリがないので、jQueryを使ったりしていなくても大丈夫。

#angular-spinnerを入れる
次に、AngularJSでspin.jsを使うために[anguler-spinner](https://github.com/urish/angular-spinner)を導入します。
これも、リンク先のGitHubからangular-spinner.min.jsを持ってきて、配置と読込を行えばOK。

#とりあえず試す
spin.jsとangular-spinnerが入れば、とりあえずぐるぐる回るアニメーションは表示できるようになります。
依存モジュールとして、`angularSpinner`、サービス名として`usSpinnerService`を渡すことで、angular-spinnerを使用することができます。

```js
angular.module("App",["angularSpinner"])
	.controller("appController",
			["usSpinnerService",
				function(usSpinnerService){
					usSpinnerService.spin('spinner');
					//usSpinnerService.stop('spinner'); //停止するとき
				}
			]
	);
```
```html
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner"></span>
```
usSpinnerServiceサービスのspinメソッドにspinner-keyを渡すことで、アニメーションが表示されます。
消すときはstopメソッドにspinner-keyを渡します。

これによって、画面にアニメーション表示はできますが、特に操作が制限されるわけではなく、背景もそのままです。
背景を薄暗くして操作をできないようにするやり方についてはまた次回。
Heroku Postgres を PhpStormのDatabaseで確認する

 
## Database接続情報を確認する

````
$ heroku config
=== sampleApp Config Vars
DATABASE_URL:         postgres://{USERNAME}:{PASSWORD}@{HOST}:{PORT}/{DATABASE}
````

メモ帳とかにコピペしておくと良い。
分解するのが面倒ならparse_urlで処理することも出来る。

````
php -r "var_dump(parse_url('postgres://{USERNAME}:{PASSWORD}@{HOST}:{PORT}/{DATABASE}'));"
````

## 設定をPhpStormにねじ込む

データベースの設定情報が確認できたら設定をPhpStormへ

Databaseのパネルの「＋」から「Data Source」->「PostgresSQL」を選択し、

GeneralのタブにてHost User Password Database を入力する。

Advanced のタブを選択して

ssl の欄に **true** を
sslfactory の欄に **org.postgresql.ssl.NonValidatingFactory** をセット

General に戻って Test Connection をクリックし、接続が成功している化確認する。

## public以外のデータベースも見たい

Heroku Connect 使用時など、public以外のデータベースも見たい場合には、Schemasのタブを選択して、

必要なデータベースをにチェックマークを入れると良いです。

## もっと気軽に使いたい

JDBC URL形式に変換すると PHPStormでの取り込みが楽だったりします。

変換用のツールを作りました。

http://codepen.io/mkkn/full/MypNaG/

postgresのURLを一番上のフィールドに追加するとjdbc URLが生成サれるので、

あとはPHPStormのDatabaseから + ボタン -> [Datasource From URL]を選択すればOKです。
CSS > sine curveを作ろうとしたが失敗 > 教えていただきました

CSSというのを試しているうちに、ふとsine curveが作れないかと思った。

```html
<div>
<span>o</span>
</div>
```

```css
div{
  position: relative;
  top: 200px;
  left: 50px;
}

span{
  position: absolute;
  top: 100px;
  left: 100px;

  font-size: 1em;

  animation: anim 3s linear infinite;
}

/* アニメーション */
@keyframes anim{
    0%{ 
      transform: translate(0px, 50px);
      animation-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); /* ease in sine */
      }
    50% {
      transform: translate(50px, 0px);
      animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* ease out sine */
    }
  100%{ 
      transform: translate(100px, 50px);
    }
}
```

できてない。sine curveというより三角波のようだ。
https://jsfiddle.net/v2v70epw/

参考 https://cho45.stfuawsc.com/misc/css3-sine-wave.html
参考 http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
activesupport concern

```rb
require 'active_support/concern'

module Foo
    extend ActiveSupport::Concern
    
    included do
        puts "included"
    end
    
    module ClassMethods
        def bar
            puts "class method"
        end
    end
    

    def baz
        puts "instance method"
    end

end

class Test
    include Foo
end

Test.new.baz
Test.bar
```
親のUIViewにAuto Layoutで上下左右くっつけるextension

# addSubviewした時に親Viewに対して上下左右くっつけたい

単にaddSubviewするだけだと、端末を回転させたりすると崩れたりする。
なので、親のViewに上下左右くっつけるようなやつが欲しい。

## extensionでなんとかしてみた

2019/08/31更新：
iOS9以上だと`NSLayoutAnchor`を使った方がわかりやすいです。

```swift
extension UIView {
    
    func addAndFit(subview:UIView) {

        // Autosizingからの変換を無効にする
        subview.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            subview.leftAnchor.constraint(equalTo: leftAnchor),
            subview.rightAnchor.constraint(equalTo: rightAnchor),
            subview.topAnchor.constraint(equalTo: topAnchor),
            subview.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
}
```

***

ここから以下はiOS9以前の内容です。

```swift
extension UIView {

    func addAndFit(subview:UIView) {

        subview.translatesAutoresizingMaskIntoConstraints = false

        addConstraints([
            NSLayoutConstraint(
                item: subview,
                attribute: .left,
                relatedBy: .equal,
                toItem: self,
                attribute: .left,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: subview,
                attribute: .top,
                relatedBy: .equal,
                toItem: self,
                attribute: .top,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: subview,
                attribute: .right,
                relatedBy: .equal,
                toItem: self,
                attribute: .right,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: subview,
                attribute: .bottom,
                relatedBy: .equal,
                toItem: self,
                attribute: .bottom,
                multiplier: 1.0,
                constant: 0
            )]
        )
    }
}
```

VisualFormatを使うと、より簡単に書けるようです。 ( rizumitaさんよりコメントを頂きました )

```swift
extension UIView {

    func addAndFit(subview:UIView) {

        // Autosizingからの変換を無効にする (trueだとAutoLayoutが正常に設定できない)
        subview.translatesAutoresizingMaskIntoConstraints = false
        
        addConstraints(
            NSLayoutConstraint.constraints(
                withVisualFormat: "V:|[subview]|",
                options: .init(rawValue: 0),
                metrics: nil,
                views: ["subview" : subview]
            )
        )
        addConstraints(
            NSLayoutConstraint.constraints(
                withVisualFormat: "H:|[subview]|",
                options: .init(rawValue: 0),
                metrics: nil,
                views: ["subview" : subview]
            )
        )
    }
}
```

## 関連記事

* [親ViewにAuto Layoutで上下左右くっつけるProtocol Extension](http://qiita.com/kazuhiro-hayashi/items/919bb369896b667c5806)

Protocol Extensionを使って利用制約をかけつつmapを使ってより短く書く方法が書かれています。
また、コメント欄にもautoresizingMaskからAuto Layoutへの変換で実現するやり方もコメントに書かれています。
GitBucketのアップデート

Macで使用していたGitBucketをアップデートした
portを適当に8080にしていたのでついでに修正

## 現時点の情報を確認

Home-brewでインストールしたので

```
brew info gitbucket
```

一応プロセスも確認しておく

```
ps aux | grep gitbucket
```

## GitBucketの停止

```
launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.gitbucket.plist
```

## 新しいバージョンをダウンロードして配置

ダウンロード
https://github.com/gitbucket/gitbucket/releases

配置

```
mv ~/Downloads/gitbucket.war /usr/local/opt/gitbucket/libexec/gitbucket.war 
```

## portの修正

使ってるportの確認

```
lsof -i | grep "LISTEN"
```

修正

```
vi /usr/local/opt/gitbucket/homebrew.mxcl.gitbucket.plist
```

## GitBucketの起動

```
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.gitbucket.plist
```

できた！
El Capitanで bundle install / bundle exec rails consoleがうまく動かない時の対処法

### 環境

```
Mac OS X 10.11.3(El Capitan)  
bundler 1.11.2  
gem 2.4.5
rails 4.2.1
```

### El CapitanにUpgrade後 bundle install / bundle exec rails console が動かない...
僕の場合は以下のgemが大きな原因でした. 

 - libv8
 - spring

```
# Gemとバージョン

# 障害時 
libv8 3.16.14.7
therubyracer 0.12.2
spring 1.3.3
-------------------------
# 修正後 
libv8 3.16.14.13
therubyracer 0.12.2
spring 1.6.4

```

また, libv8のコンパイルに以下のパッケージが必要です. 後にbrewでインストールします. 

 - apple-gcc42  


### bundle install 中にlibv8のインストールに失敗する

```
libv8 : javascriptエンジンのライブラリ
therubyracer : javascriptのrubyラッパ 
```

``bundle install``中に``libv8``で失敗する場合は, 
``libv8``のバージョンが原因です. 

``libv8``は**[OSのバージョンに依存する](http://qiita.com/windhorn/items/394c10dea23d1e829cd1)**ため, 使用するOSのバージョンに合わせてバージョン指定する必要があります(El Capitanはdarwin15).  

El Capitanの場合, ``libv8 '3.16.14.11'``以上にupdateすることで正常に動作します. 
``therubyracer``は``'0.12.2'``を使用してください.

私の場合, ``libv8 '3.16.14.7'``を使用していたため, ``bundler install``が動いていませんでした. 


```
## GemfileとGemfile.lockを変更

--------------------------
# Gemfile

gem libv8, '3.16.14.13'
gem therubyracer, '0.12.2'
--------------------------
# Gemfile.lock

libv8(3.16.14.13)
therubyracer(0.12.2)
--------------------------

## terminal

# libv8のコンパイルに必要なgccを入れる
$ brew install homebrew/dupes/apple-gcc42


# gemのインストール
$ bundle install --path vendor/bundle --jobs=10
```

---

### bundle exec rails consoleに失敗する

[Spring](https://github.com/rails/spring)のバージョンが原因でした.
Springとは, 開発の高速化を目的としたRailsアプリのプリローダです. 

``bundler 1.11.0``に加えられた変更で, springがうまく起動せずコケてしまうようです[(詳細)](http://qiita.com/koshigoe/items/2304ec081a9f036e8941).

springのバージョンを``'1.6.3以上'``に上げることで回避できます. 

```
## GemfileとGemfile.lockを変更
# 16/3/8時点, 1.6.4が最新

# Gemfile
gem 'spring', '1.6.4' 

# Gemfile.lock
spring(1.6.4) 

## terminal
$ bundle install --path vendor/bundle --jobs=10
$ bundle exec rails c
```

もし, うまく動かない場合は``spring``を再起動します. 

```
$ bundle exec spring stop
$ bundle exec rails c
```



参考記事
以下のqiita記事を参考にさせていただきました.
[Yosemiteでlibv8をインストールする．](http://qiita.com/windhorn/items/394c10dea23d1e829cd1)

[OS X El Capitanでlibv8 / therubyracerのbundle installに失敗する問題の解決方法](http://qiita.com/ganta/items/53f616b48e94d989952f)

[bundler 1.11.0 の変更で spring が起動しない件について](http://qiita.com/koshigoe/items/2304ec081a9f036e8941)
webpackで差分ビルドをする

# はじめに
大規模なjavascript開発をする時に便利なwebpackですが、微調整の度にビルドをするのは面倒くさいです。差分を検知してそこだけビルドしてくれる方法はないの？と思いますが実はあります。ポイントは以下の2つです。

* WATCH モード
* casheを有効にする

# WATCHモードを使う
WATCHモードとはビルド対象のファイルに変化があった場合に検知して、自動的に再ビルドしてくれる機能のことです。コマンドラインからwebpackを実行している場合は、以下のようなオプションをつけることでWATCHモードにすることができます。
[参考文献](https://webpack.github.io/docs/tutorials/getting-started/#watch-mode)

```
webpack --watch
```

# cacheを有効にする
cacheを有効にするにはwebpack.config.jsのcacheをtrueに設定します。
[参考文献](https://webpack.github.io/docs/configuration.html#cache)

```js
module.exports = {
   entry: ......
   output: .....

   // これを追加するだけでcacheが有効になる
   cache: true
}
```

# grunt-webpackで上記設定をやるには
趣味で作ってるゲームでは、gruntからwebpackを叩いています。それに使っているのは[grunt-webpack](https://github.com/webpack/grunt-webpack)なのですが、こいつで上記の設定をやるには、以下のようにします。

```js
module.exports = {
   // cache有効化はwebpack.config.jsと同じ
   cache: true,

   // これでwatchモードを有効にする
   // 基本的にkeepalive: trueとセットで指定すること
   // keepaliveはgruntタスクを終了させないという意味で、
   // これを指定しないとgruntタスクが速攻で終了してしまいwatchできない
   watch: true,
   keepalive: true
}
```

# サンプルコードなど
手前味噌ですが、自作ゲームでwebpack差分ビルドを設定したところのコードです。
https://github.com/kaidouji85/gbraver/blob/d1bab0412120531f06d2a55fc5e64cd06e6e381e/grunt/webpack/webpack.watch.config.js

また、プロジェクト全体のコードはこちらです。
https://github.com/kaidouji85/gbraver/tree/d1bab0412120531f06d2a55fc5e64cd06e6e381e
ソフトウェアテストリンク集

# ソフトウェア
### 組合せテスト用テストケース作成ツール
[CIT-BACH](http://www-ise4.ist.osaka-u.ac.jp/~t-tutiya/CIT/)
[PICT (Microsoft純正)](https://github.com/microsoft/pict)
[PictMaster](https://osdn.jp/projects/pictmaster/)

### ソフトウェア適格性確認テスト
[Selenium](http://www.seleniumhq.org/)

### ソフトウェア単体テスト
[JUnit](http://junit.org/)
トラックポイントキーボード の真ん中のボタンクリックを無効にする (Ubuntu 14.04)

レノボ・ジャパン ThinkPad USB トラックポイントキーボード
で、真ん中のボタンでペーストされないようにする設定です。

$ xinput list
⎡ Virtual core pointer                    	id=2	[master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer              	id=4	[slave  pointer  (2)]
⎜   ↳ Lite-On Technology Corp. ThinkPad USB Keyboard with TrackPoint	id=10	[slave  pointer  (2)]
⎣ Virtual core keyboard                   	id=3	[master keyboard (2)]
    ↳ Virtual core XTEST keyboard             	id=5	[slave  keyboard (3)]
    ↳ Power Button                            	id=6	[slave  keyboard (3)]
    ↳ Video Bus                               	id=7	[slave  keyboard (3)]
    ↳ Power Button                            	id=8	[slave  keyboard (3)]
    ↳ Lite-On Technology Corp. ThinkPad USB Keyboard with TrackPoint	id=9	[slave  keyboard (3)]
$ xinput set-button-map 10 1 0 3　（10は、idで、0がミドルボタンを無効にする意味）
Swift プロパティを監視する(willSet、didSet)

プロパティを監視するwillSet、didSetについて記載


標準的な書き方
willSetはプロパティの変更前に、didSetは変更後に呼ばれる

```swift
class Car {
    var type:String = "bike" {
        willSet {
            print("willSet type:" + type); //willSet type:bike
        }
        didSet {
            print("didSet type:" + type);  //didSet type:track
        }
    }
}

var obj:Car = Car()
obj.type = "track"
```

init 呼び出し時の変更では、willSet、didSetは呼ばれない

```swift
class Car {
    init() {
        type = "default"
        self.type = "track"
    }
    var type:String = "bike" {
        willSet {
            print("willSet type:" + type);  //
        }
        didSet {
            print("didSet type:" + type);  //
        }
    }
}
var obj = Car()
```


Dictionaryの中身も監視される（Arrayも）

```swift
//Dictionaryの中身も監視される
class Car {
    var partsStatus:Dictionary<String,String> = ["engine":"v8","tire":"bridgestone"]{
        willSet {
            print("willSet partsStatus"); //willSet partsStatus
        }
        didSet {
            print("didSet partsStatus"); //didSet partsStatus
        }
    }
}
var obj = Car()
obj.partsStatus.updateValue("v8", forKey: "engine")
```

オブジェクトの中身は監視されない

```swift
class Engine {
    var name = "v6"
}

class Car{
    var engine:Engine = Engine(){
        willSet{
            print("willSet engine.name:" + engine.name); //
        }
        didSet{
            print("didSet engine.name:" + engine.name); //
        }
    }
}
var obj = Car()
obj.engine.name = "v8"
```


以上
とりあえず知っておきたい git config ファイルの読み込み順番

例えば、 特定のリポジトリは別の名前やメールアドレスを設定したいといった場合、user.name および、user.email を変えることで、そのリポジトリだけ設定を行うことができます。
そういった git config を読み込むファイルの順番について整理しておきましたのでご活用ください。

# config の読み込み順番
config系のファイルを読み込む順番は以下です。
上から システム、グローバル（ユーザー）、ローカル（リポジトリ内）という順番です。
同じ定義がある場合は、下の方が優先されます。

## Mac OS X / Linux 系
1. `/etc/gitconfig`
* `~/.gitconfig` か `~/.config/git/config`
* `.git/config`  (リポジトリ内)

```git config --system core.editor vim``` 
みたいな感じでコマンドラインからも設定できます。

## Windows 系の場合 (Vista以降)
1. `C:\ProgramData\Git\config`
* `C:\Users\$User\.gitconfig`
* `.git\config`　(リポジトリ内)

なお、 Windowsの場合、システムレベルの config を設定する場合は、下記の手順で行います。
あらかじめ管理者権限を持っている必要があります。その上で、「コマンドプロンプトを管理者」として開きます。
```git config -f C:\ProgramData\Git\config color.ui auto```
 みたいな感じで -f で直接ファイルを指定する必要があります。

# 参考
* https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup
CSS > 線香花火 > 牡丹

http://qiita.com/junya/items/c1f9df299aa3c93793e1
にインスパイアされて（かつコードの大半を拝借して）

[線香花火](http://www.tsutsuitokimasa.jp/issyou.html)
の牡丹を作ろうとしてみた。

```html
<div>
<span>Y</span>
<span>Y</span>
<span>Y</span>
<span>Y</span>

<span>Y</span>
<span>Y</span>
<span>Y</span>
<span>Y</span>

<span>Y</span>
<span>Y</span>
<span>Y</span>
<span>Y</span>
</div>
```

```css
div{
  position: relative;
  top: 200px;
  left: 50px;
}

span{
  position: absolute;
  top: 50%;
  left: 50%;

  font-size: 2em;
  font-family: fantasy;

  animation: anim 3s linear infinite;
}

span:nth-child(even){
  color: #CC9966
}
span:nth-child(odd){
  color: #FF6666
}

/* 円形に配置 */
span:nth-child(1){ transform: translate(-50%,-50%) rotate(30deg)  translateY(-35px);}
span:nth-child(2){ transform: translate(-50%,-50%) rotate(60deg)  translateY(-35px);}
span:nth-child(3){ transform: translate(-50%,-50%) rotate(90deg)  translateY(-35px);}
span:nth-child(4){ transform: translate(-50%,-50%) rotate(120deg) translateY(-35px);}
span:nth-child(5){ transform: translate(-50%,-50%) rotate(150deg) translateY(-35px);}
span:nth-child(6){ transform: translate(-50%,-50%) rotate(180deg) translateY(-35px);}
span:nth-child(7){ transform: translate(-50%,-50%) rotate(210deg) translateY(-35px);}
span:nth-child(8){ transform: translate(-50%,-50%) rotate(240deg) translateY(-35px);}
span:nth-child(9){ transform: translate(-50%,-50%) rotate(270deg) translateY(-35px);}

span:nth-child(10){ transform: translate(-50%,-50%) rotate(300deg) translateY(-35px);}
span:nth-child(11){ transform: translate(-50%,-50%) rotate(330deg) translateY(-35px);}
span:nth-child(12){ transform: translate(-50%,-50%) rotate(360deg) translateY(-35px);}

/* アニメーション */
@keyframes anim{
  0%{
    font-size: 2em;
  }

  100%{
    font-size: 10em;
    color: transparent;
  }
}
```


https://jsfiddle.net/jv7u4mxt/

色々違う。

https://jsfiddle.net/79pzL4y9/1/

まだ違う。
Azure Web AppsでHTTPヘッダの設定をする方法

# ユースケース
- Azure WebAppsでHTTPヘッダの設定をしたい時
- Azure WebAppsでデフォルトで設定されているHTTPヘッダ情報を削除したい時

# 前提
- Linux環境でApache等で制御したいような内容（HTTPヘッダの設定、Rewrite Rule、IP制限など）は、Azure WebAppsにおいては基本的にWeb.configで設定します
- ただし、Azure WebAppsはPaaSであるため制御できる範囲には限りがあります
- Azure WebAppsにおけるWeb.configは独自の設定も多いので、IISでのWeb.configの記述方法と同じ場合も異なる場合もあります
- （自分の知っている限り）公式ドキュメントでは情報が不足しているため、やりたいことと一致しない場合はOpenStackを見たり中の人に聞いてやりくりしています

# 書かないこと
- Web.configのデプロイ方法

# HTTPヘッダの設定方法
- Web.configに以下のように記載するだけです。

```:Web.config
…
<system.webServer>
  <httpProtocol>
    <customHeaders>
      <!-- ここに設定したいHTTPヘッダの情報を記載する -->
      <!-- 追加 -->
      <add name="${HTTPヘッダ名}" value="${Value}"/>
      <!-- 削除 -->
      <remove name="${HTTPヘッダ名}" />
    </customHeaders>
  </httpProtocol>
</system.webServer>
…
```
- 具体例1：「X-XSS-Protection:1; mode=block」を追加したい場合

```:Web.config
<add name="X-XSS-Protection" value="1; mode=block"/>
```

- 具体例2：「X-Powered-By:ASP.NET」を削除したい場合

```:Web.config
<remove name="X-Powered-By" />
```

# Azure WebAppsでデフォルトで設定されているHTTPヘッダ情報を削除したい

WebAppsを構築したばかりの状態では以下の様なHTTPヘッダが返却されます。

<img width="593" alt="WebApps_HTTPHeader_default.png" src="https://qiita-image-store.s3.amazonaws.com/0/43421/71f040e8-f3c7-284d-e5d0-14485379e0e7.png">

X-Powered-ByやServerやX-AspNet-Version（上記には表示されていない）で返却されるHTTPヘッダの情報はなんとなく隠したいですよね。
この場合も同様に以下のようにWeb.configで設定すれば削除できます。

```:Web.config
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <!-- X-Powered-Byの削除 -->
   　   <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>
    <security>
      <!-- Serverの削除 -->
      <requestFiltering removeServerHeader="true" />
    </security>
  </system.webServer>

  <system.web>
    <!-- X-AspNet-Versionの削除 -->
    <httpRuntime enableVersionHeader="false" />
  </system.web>
</configuration>
```

X-Powered-Byはともかく、他の設定は少し書き方が違うので要注意です。

# 最後に
上記でも記載したWebサービスで必要になる設定はいろいろ試行錯誤したノウハウがあるので、少しずつTIPSとして残そうと思っています。お役に立ったら幸いです。
Macの apache2/users/{Username}.confファイルを記述したのに、You don’t have permission to accessと出るとき



Macの仕様で、Username.confをいじってApacheのDocumentRootを変更した場合、

```
/Users/{Username}
```

以下のディレクトリ以外では上記のエラーが出てしまうようです。

上記のディレクトリ以下にDocumentRootを設定した上、

＜Directory＞ 内に、

```
Require all granted
```

を追記すると見られるようになります。