OmniAICreator/Qiita-1.07M huggingface dataset:
Arukasハンズオン資料 - 事前準備編

# はじめに

この記事は、

Arukasハンズオン受講希望者の方を対象とした、**事前準備に関する説明**です！

目標：**Arukasハンズオンの準備と予習！**
難易度：**初級**
所要時間：**10分！**

**この記事に書かれている内容を一通り実行することで、**

**Arukasハンズオンを受講するための準備を完了することができます！**

# What's Arukas?

![Arukas_intro_and_infra_JTF_private.001.png](https://qiita-image-store.s3.amazonaws.com/0/123644/30da00ec-723e-a9b1-7086-708b571c5cb0.png)

**Docker Hub (https://hub.docker.com/) に保管されているDockerイメージを、**
**Dockerに最適化されているArukasのインフラ環境上で稼働させることができるサービス**です。

**Arukasについて、もっと詳しく知りたい方は・・・**

以下のスライドをチェック！

* **[Arukas紹介スライド（簡単な紹介）](http://www.slideshare.net/sakura_pr/arukas-for-kintone-caf-vol-4?qid=b6fa29ba-3a95-40ab-93b8-6bb5dbcc318c&v=&b=&from_search=1)**
* **[Arukas紹介スライド（エンジニア向け）](http://www.slideshare.net/sakura_pr/20160427arukascloudisdocker-machine?qid=8bcfd854-13c6-4a42-a473-8d9f15329c9f&v=&b=&from_search=2)**

## 用語説明

ハンズオン中は、**以下の用語が頻出します！**

* **サインアップ：** 『アカウント登録作業』のこと。
* **コントロールパネル：** Webブラウザからアクセスできる管理画面。WebUI。コンパネとも呼ぶ。
* **Arukas：** [さくらインターネット](https://www.sakura.ad.jp/)のDockerコンテナホスティングサービス。(https://arukas.io/)
* **Dockerコンテナホスティング：** Dockerコンテナをホスティングするサービス。Docker版レンタルサーバ（雑
* **Docker, Inc.：** Dockerの開発元。(https://www.docker.com/)
* **Docker Hub：** 米Docker, Inc.公式 Dockerイメージ保管サービス。(https://hub.docker.com/)
* **Dockerfile**： Dockerイメージ化したいアプリケーション環境の構成を定義するファイル。
* **Dockerイメージ：** Dockerfileの定義にしたがってイメージファイル化されたアプリケーション環境。
* **SSHクライアント：** SSH接続ソフト。自分のPCから他のサーバへのSSH接続ができること。
* **API**： *Application Program Interface* の略。APIを利用すると、プログラムから各種機能を呼び出せる。


# ハンズオン準備の流れ

**準備（ステップ１～ステップ２）を忘れず実行しよう！**

ステップ１．**Arukasにサインアップ**
ステップ２．**当日会場に各自PC１台（無線LAN接続機能付き）をお持ち込み** ※ Windows、Macなどを推奨。

## １．Arukasにサインアップ

* Arukasアカウントをご登録ください！（**[手順はこちら](http://qiita.com/uzyexe/items/e9e938f18a8779871c44)**）

## ２．当日会場に各自PC１台をお持ち込み

ハンズオン当日は、**各自PC１台（無線LAN接続機能付き）を必ず忘れずに！**

* 会場事情によっては、**人数分の電源を保証できません！事前に充電はたっぷりしておこう！**

# 以上で、ハンズオンの受講準備は完了です！

* **[ハンズオンに進む（Arukasハンズオン資料 - 基本操作編）](http://qiita.com/uzyexe/items/57a699416af2e2e19c2c)**
v-forとv-ifでリストレンダリング制御したいと思っていた俺がアホだった。

どもっす。チッスチッス。


いきなりなんすけど、Vue.jsつかっててこうしたいときあるじゃないすか

```html
<tr v-for="object in objects" v-if="object.visible">
  <td>{{ object.name }}</td>
</tr>
```

これやりたかったんすよ。マジで。各行の変更を検知して行の表示/非表示きりかえたかったんすよね。
だからVueのコンポーネントで

```js
Vue.extend({
  data: function() {
    return {
      object: {}
    }
  },
  methods: {
    hoge: function () {
      this.object = this.getNewObject()
    }
  }
})
```

みたいなことして `object` を更新しようとしたらなんかインタラクティブにぃ？バインドされないんだけどぉ？ってなってぇ~


# 結果

ちゃんとドキュメント読んだら書いてあった。

```
フィルタ/ソートされた結果の表示

時どき、私達は実際に変更するかまたは元のデータをリセットせずに配列フィルタリングやソートされたバージョンの配列を表示する必要があります。
これを達成するに2つのオプションがあります:

フィルタまたはソートされた配列を返す算出プロパティを作成する
組み込み filterBy そして orderBy されたフィルタを使用する
それは完全な JavaScript であるため、算出プロパティはあなたにより細かい制御と柔軟性を与えますが、
フィルタは共通ユースケースに対してより便利にすることができます。
配列フィルタの詳細な使用方法については、それらのドキュメントをチェックしてください。
```

[それらのドキュメント](https://jp.vuejs.org/api/#filterBy) をチェックしたところ `パフォーマンス向上のために、常に検索スコープを制限するのはいいアイデアです。` って書いてあった。やったね。

というわけで...

```html
<input type="text" v-model="search_word">
<tr v-for="object in objects | filterBy search_word in 'name'">
  <td>{{ object.name }}</td>
</tr>
```

ってやってあげたらいけた。

最高。


ちゃんとドキュメント嫁って話でした。
sqlite3でCSVへエクスポート

# 目的
SQLite3のデータをCSVで出力したい

# 方法
1. `.mode csv`
2. `.output example.csv`
3. `select * from example`

# 補足
`.output exmaple.csv`をしてしまうとそれ以降の出力がCSVファイルへの書き込みになってしまう。実は`.show`で見るとわかるようにファイルに書き込む前は`output stdout`になっている。

よって`.output stdout`で元に戻る
sublimeで複数文字検索

例えば、string1とstring2という単語どちらも検索したいときは、

ctrl+shift+F（複数ファイル内検索）または
ctrl+F(ページ内検索)でFind:の部分に以下を入れる。

```
string1|string2
```

※`.*`（正規表現）をONにしておくの忘れずに

### 使い方例
複数のファイルたちから、複数のIDたちを検索かけて
どのIDがそのフォルダ内のHTMLで使われているかとかリスト化できたり。
WordPressのセットアップを終えてこれからやること


* Qiita記事の移管

* プラグイン調査

* サイトの見栄え的に最低限やっておくダッシュボードでの設定をリスト化
    * favicon設定
    * パーマリンク設定
* 人気ブロガーのレイアウトや構成を調べる
    * はてブやlivedorrブログでできなくて、WordPressでできることはなにか
    * というかわくわくするブログってなんだ？
    * JIONが3ヶ月で月間100万PV

* 足りていないWordPress自体のセットアップ
    * ドメイン設定
    * komax.clubでサイトトップが表示されるようにする
    * git導入
    * Chef(シェフ)を入れる理由

* テーマの選択基準を明文化し、テーマ選択
    * 現状のテーマは[WordPress無料公式テーマ「LIQUID」](http://ocadweb.com/web/wp_liquid)

* ダッシュボード設定/プラグイン/テーマ/CSSコーディング/PHPプログラムどれでなにが変えられるのか把握
    * おすすめ記事、アクセスランキングはどうやって表示するのか
    * 記事ページレコメンドはどうやって表示するのか
    * SNSシェアボタンはどうやって出すのか
* 最低限やっておく外部連携把握
    * GA
    * サーチコンソール
    * アフィリエイト登録
    * アドネットワーク登録
* CSSコーディングの手法調査
* PHPプログラムの手法調査

* デザイン
    * ロゴ
    * favicon
    * サイトトンマナ

# 方針
* ユーザプールはどうするか
    * twitter、facebookに集約
    * イケハヤはLINEアカウントに誘導している
* 記事の方向性
    * ストック型/フロー型にわける
    * SEO型/SNS垂れ流し型/SNSバズ型にわけて記事作成







---------------------
テーマを選ぶべき基準は？
WPに絶対に入れておくべきものは？
チフってなんのために入れるのか？
今後ユーザを増やしていくためにどういう戦略を取るのが良いか
Macでcronを使う＆ログファイルをリアルタイムチェックする

**cronとは** … スクリプトを定期的に自動実行するサーバー側の仕組み。

Mac の場合、vim のバックアップファイルが悪さして cron がうまく動かないみたいなので、 .vimrc に設定が必要です。

## .vimrc の設定  
まず .vimrc を開きます。

```bash
$ vim .vimrc
```

以下の設定を行います。

```vim
set backupskip=/tmp/*,/private/tmp/*	
```

## crontab の編集を行う 
crontab の編集は以下のコマンドにて行います。

```bash
$ crontab -e
```
```bash
​# 設定ファイルのルール
​分 時 日 月 曜日 コマンド
​
​# （例）１分ごとに hoge.sh を実行する場合
​*/1 *​ * * * hoge.sh
​
​​# （例）２時間ごとに hoge.sh を実行する場合
​* */2​ * * * hoge.sh
​
​# （例）設定を無効にしたい場合は"#"を先頭に付けます
​​​#*/1 * * * * hoge.sh
```

設定が完了したら下記コマンドで確認できます。

```bash
$ crontab -l
```

## ログファイルをリアルタイムに監視する  
ログファイルのパスは**baserCMS**を例にして示しています。

```bash
$ cd プロジェクト名/htdocs/app/tmp/logs/
$ tail -f ログファイル名
```

これで cron のログファイルをリアルタイムにチェックできるようになったと思います！

tail コマンドは「control + C」で抜けることができます。


**参考サイト** :  

* http://www.atmarkit.co.jp/ait/articles/0405/15/news017.html
* http://kirin.hatenadiary.jp/entry/2015/01/16/061622
速度：Pythonの配列の末尾に要素追加


# 1.　はじめに

　Pythonの配列の末尾に要素を追加する方法は，いくつかあり，list型やnumpyのndarray型のどちらを使うかで方法は異なる．
　これらの方法で，実行速度にどれだけ違いがでるのか疑問に思ったので，かるーくだが調べてみたら，[list型に対するappendの比較](http://nonbiri-tereka.hatenablog.com/entry/2014/10/20/110304)のみ見つかった（リサーチ不足だったらごめんなさい）．
 　そこで，次節に示す3つの配列に対する要素追加の方法の実行速度を簡単な実験で調べてみる．要素を追加する回数は，10万回とし，時間計測には，timeモジュールを使用した．実験に使用したコードは，いちばん最後にのせておく．

# 2.　配列に対する要素追加の方法

## 2.1　list型に対する方法

list.appendを使用する方法．
これは，Pythonに標準で組み込まれる方法で，Pythonの初心者でもよく使う方法のはず．

```py
x = []
for i in range( 10 ):
    x.append( i )
```

## 2.2　ndarrayに対する方法１

numpy.appendを使用する方法．

```py
import numpy as np
x = np.array( [] )
for i in range( 10 ):
    x = np.append( x, i )
```

## 2.3 ndarrayに対する方法２
numpy.hstackを使用する方法．

```py
import numpy as np
x = np.array( [] )
for i in range( 10 ):
    x = np.hstack( (x,i) )
```

# 3　結果

|                         | 実行時間（秒）     |
|:----------------|-------------------:|
| list.append       | 0.0149400234222 |
| numpy.append | 4.47969698906     |
| numpy.hstack  | 4.75327301025     |

若干予想はしていたが，list.appendが圧倒的に早い．
そして，numpy.appendとnumpy.hstackは速度差が出ていない．
やはり，予め必要な配列の大きさが分かっているのなら，ndarrayを，そうでなければlistを使うというのが正解でよいみたい．

# 4　実験に使用したコード

```py
import numpy as np

def stdAppend(n):
    x = []
    for i in range(n):
        x.append(i)
    return

def npAppend(n):
    x = np.array( [] )
    for i in range(n):
        x = np.append(x,i)
    return

def npHstack(n):
    x = np.array( [] )
    for i in range(n):
        x = np.hstack( (x,i) )
    return

if __name__ == '__main__':
    import time

    n = 100000
    
    start = time.time()
    stdAppend(n)
    ttime = time.time() - start
    print( "stdAppend: %s" % ttime )

    start = time.time()
    npAppend(n)
    ttime = time.time() - start
    print( "npAppend : %s" % ttime )

    start = time.time()
    npHstack(n)
    ttime = time.time() - start
    print( "npHstack : %s" % ttime )
```
c++ builder (win32api?) > named pipe > connect

```txt:動作環境
C++ Builder XE4
```

関連 http://qiita.com/7of9/items/2159bbba0dce8bd8add4

vmwareのゲストOSとホストOS間の通信について調査中。

https://msdn.microsoft.com/ja-jp/library/windows/desktop/aa365592.aspx
においてNamed Pipe Clientの実装例が見つかった。

コードはおそらくwin32apiなのかと思う(よく分かっていない)。

C++ Builder XE4上でconnectまで実装してみた。

## code

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include <windows.h>
//#include <conio.h>
#include <tchar.h>

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------

#define BUFSIZE (512)


__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	HANDLE hPipe;
	LPTSTR lpvMessage=TEXT("Default message from client.");
	TCHAR  chBuf[BUFSIZE];
	BOOL   fSuccess = FALSE;
	DWORD  cbRead, cbToWrite, cbWritten, dwMode;
	LPTSTR lpszPipename = TEXT("\\\\.\\pipe\\com_1");

	while(1)
	{
      hPipe = CreateFile(
         lpszPipename,   // pipe name
         GENERIC_READ |  // read and write access
         GENERIC_WRITE,
		 0,              // no sharing
         NULL,           // default security attributes
         OPEN_EXISTING,  // opens existing pipe
         0,              // default attributes
         NULL);          // no template file

		// Break if the pipe handle is valid.
		if (hPipe != INVALID_HANDLE_VALUE) {
			break;
		}

		if (GetLastError() != ERROR_PIPE_BUSY) {
			String msg = String().sprintf(L"Could not open pipe. GLE=%d\n", GetLastError());
			Memo1->Lines->Add(msg);
			return; // error
		}

		if (! WaitNamedPipe(lpszPipename, 20000)) {
			Memo1->Lines->Add(L"Could not open pipe: 20 second wait timed out.");
			return; // error
		}
	}

	Memo1->Lines->Add(L"Connected");
}
//---------------------------------------------------------------------------
```

## 実行

vmwareのゲストOSを起動。 named pipeサーバーとしている。
named pipeは"\\\\.\\pipe\\com_1"。

ホストOS上にて上記をビルドしたソフトを実行し、Memo1に"Connected"が表示されることを確認した。
jQuery イベントについてのまとめ


## イベントの設定

`on`で設定

````
$(".link").on("click",(e)=>{
	...
})
````

動的に生成される要素への予約的なバインドは、docuemnt へのonで処理する。

````
$(document).on('click', '.link',  (e) => {
	....
});
````

クリックなどのイベントはカーソル操作等で自動的に呼び出されるほか、`trigger`を使って呼び出す事も出来る。

````
$(".link").trigger("click");
// $(".link").click() と書くことも出来る。
````

trigger には第二匹数以降でパラメータを渡す事が出来る。これは`on`側で`e`以降の引数として取得できる。

````
$(".link").trigger("click","hoge","fuga");
````

## イベントオブジェクト

イベント系関数から取得できるイベントオブジェクト `e` の仕様は以下に

https://api.jquery.com/category/events/event-object/

よく使うものを紹介

### event.currentTarget 

バブリングフェーズにおける現在のDOM。要は `this` 的なモノ

### preventDefault()

DOMのデフォルトの挙動をストップさせる。

フォームの送信ボタンや`a`要素等でよく利用する。
 
### stopPropagation()

下層のDOMにイベントが伝搬するのを防ぐことが出来る。


## イベント名前空間

jQueryではイベントに名前空間をセット出来る。

````
$('.link').on('click.myevent', (e) => { 
	....
});
````

コレは click -> myevent と階層的に解釈されるのでなく、HTMLのクラスのような複合的な解釈がされる。

なので例えばoffなどを用いてバインドを解除する場合、以下の様な記述が使える。

````
$(".link").off("click.myevent")
$(".link").off(".myevent")
````

１行めが`click.myevent`を削除するのに対し2行目は`.myevent`全てを削除する形で動作する。

Triggerで使う場合は以下の様な感じ。ちょっと挙動を理解してないと辛いかも。

````
$(".link").on("click.hoge.piyo",function(e){
	....
})

$(".link").on("click.hoge",function(e){
	....
})

$(".link1").on("click",function(e){
    $(".link").trigger(".hoge"); // not fire!
    $(".link").trigger("click.hoge"); // fire both!
    $(".link").trigger("click.hoge.piyo"); // fire only first one!
})
````


## カスタムイベント

clickやmouseenterのようなユーザイベントとは別に内部処理用のカスタムイベントを定義する事も可能。

````
$(window).on('myEvent', function(e,data) {
    ....
});
````

実行は普通に`trigger`でOK

````
$(window).trigger('myEvent',{});
````

サイト全体に大きな影響を及ぼすような変更などはカスタムイベントで実行させると便利。

- APIで定期的にセッションチェックを行い,セッションアウト時に様々な処理を行いたい場合
- 時報的に00分などで画面上様々な箇所で処理を行いたい場合
日本だけ配布するアプリが、App Storeで言語が英語になっている問題の対処方法

# iTunes Connectで日本語設定しているのに言語が英語になっているのナンデヤネン？

iTunes Connect上の言語設定は日本語に設定しているにもかかわらず、言語が英語と表記される。

iTunes Connectの設定は下記のように日本語。

![image](https://qiita-image-store.s3.amazonaws.com/0/103647/a202bf0b-abfd-f5bc-1397-dcbf29457a96.png)

なのにAppStore上は英語・・・。（日本しか配布しないのになぁ・・）
![image](https://qiita-image-store.s3.amazonaws.com/0/103647/d640b610-5985-e785-f723-4fcec2c3f000.png)


# Xcode上の言語設定をJapanに設定すると良い

Localization native development regionの値をJapanに設定する。

![image](https://qiita-image-store.s3.amazonaws.com/0/103647/637a64f0-e23a-4405-ac6c-f291d201f035.png)

ちなみにJapanに設定するとWebViewのDoneが完了に変わりました。

![image](https://qiita-image-store.s3.amazonaws.com/0/103647/f6ace8d8-9a4d-71dd-a8bd-a2dc4543b9a0.png)
白黒画像に着色してくれるSiggraph2016 Colorizationがすごい

白黒画像を入力すると、着色してカラー画像として出力してくれる素敵なソフト。
オープンソースで、GitHubから入手可能。

# 概要
Siggraph2016 Colorizationは、早稲田大学の「ディープネットワークを用いた大域特徴と局所特徴の学習による
白黒写真の自動色付け」という研究の成果として、GitHub上に公開されているソフトウェア。
簡単に言うと、**白黒画像をあーだこーだしてカラー画像に変換**してくれます。
[詳細は研究サイトの論文等](http://hi.cs.waseda.ac.jp/~iizuka/projects/colorization/ja/)にも書かれていますが、ディープネットワーク（ディープラーニング）を駆使した処理が行われており、それぞれ「低レベル特徴ネットワーク」「中レベル特徴ネットワーク」「大域特徴ネットワーク」「色付けネットワーク」のそれぞれのネットワークで処理された結果を一つに結合する事によって自然な着色を実現しているとの事。
なんとなく、イメージ出来るような出来ないような・・。
現在、[ウェブサービスとしても公開](http://colorize.dev.kaisou.misosi.ru/)されているようなので、手軽に試してみたい方はサイトから試してみるのもありです。

# 実際の結果
実際にこのソフトを使用して出力された画像です。
上から「元画像（カラー）」「元画像（グレースケール変換後）」「出力画像」
の３種類です。
## 元画像（カラー）
![s_base.jpg](https://qiita-image-store.s3.amazonaws.com/0/131348/14bd817f-fde4-437b-74ee-e7995e201738.jpeg)
## 元画像（グレースケール変換後）
![s_base_bw.jpg](https://qiita-image-store.s3.amazonaws.com/0/131348/9a3126fc-d31d-0d34-44c6-36737255742f.jpeg)
## 出力画像
![s_out.jpg](https://qiita-image-store.s3.amazonaws.com/0/131348/c88b96d7-9d05-0fd9-ff3d-5418fe885d4a.jpeg)

# Siggraph2016 Colorizationの実行手順
物は試しで、早速使ってたいという方のための実行手順。
今回は「とりあえず使ってみる」ということで、VirtualBox上のCentOS7で動作させてみました。

## Torchのインストール
Siggraph2016 Colorizationの動作には、[Torch](http://torch.ch/)の導入が必要です。
こいつもGitHub上に公開されているので、クローンしてインストールしましょう。

```
$ git clone https://github.com/torch/distro.git ~/torch --recursive
$ cd ~/torch; bash install-deps;
$ ./install.sh
$ source ~/.bashrc
```
入りましたか？

```
$ th
```
と入力して、Torchが起動すれば成功です。

## 起動準備
こちらは、単純に落としてくれば終わりですが、ちょっとした準備が必要です。
まず、任意のディレクトリにクローンして

```
git clone https://github.com/satoshiiizuka/siggraph2016_colorization.git
```
クローンしたファイルの中にあるdownload_model.shを実行します。

```
$ ./download_model.sh
```

着色に使用するモデルデータの取得ですね。

## 着色処理の実行
準備が出来たら、早速ためしてみましょう。
入力ファイルはPhotoshop等でグレースケールに変換したファイルでも良いですし、モノクロで撮影した画像でもかまいません。
Siggraph2016をクローンしたディレクトリにSCPなどで入力ファイルを配置し、以下のコマンドを実行。

```
$ th colorize.lua <input_image> <output_image>
例）
$ th colorize.lua input.jpg out.jpg
```

ファイルサイズにもよりますが、処理時間は大体10～20秒ほどでしょうか。
何枚か試してみましたが、気持ち悪くなるほどの精度で出力してくれます。
今までPhotoshopで苦労しながら色を付けていたのは何だったのか・・。
人工知能、予想以上でした。
Ionic tuetotialに　HTMLのすべてのコードが入っている。　どう抜けばいいかわからない。

scriptタブを抜いた状態で、新しいHTMLファイルを作成し、保存する。
※templatesフォルダに保存すること

    <script id="templates/facts2.html" type="text/ng-template">
      <ion-view view-title="Also Factual">
        <ion-content class="padding">
          <p>101 Dalmatians, Peter Pa</p>
       </ion-content>
      </ion-view>
    </script>

↓これだけ貼ればOK
``
<ion-view view-title="Also Factual">
  <ion-content class="padding">
    <p>101 Dalmatians, Peter Pa</p>
  </ion-content>
</ion-view>
``
Gravatarの画像変更がSourcetreeに反映されない。


Gravatarでアイコンを変更したけど、Sourcetreeに反映されない。
業務に支障があるわけではないけど、モチベーションに影響する(!?)ため、キャッシュの場所を調べてみた。

- Windows版

```
C:\Users\{ユーザー}\AppData\Local\Atlassian\SourceTree\cache\img
```

上記のフォルダにあるファイルを削除して、Sourcetreeを再起動すればOK

Mac版は調べてないので不明。。。

***
参考サイト

* [How to set up your avatar in SourceTree.app](http://stackoverflow.com/questions/18454273/how-to-set-up-your-avatar-in-sourcetree-app)
プロジェクトの作り方

Git Bush(ない方インストール)を開く
http://ionicframework.com/docs/guide/installation.html
ここから指示に従いプラットホーム、Ionicをインストールし、
$ cd Desktop　　　//デスクトップへ移動
$ ionic start ●プロジェクト名● blank　　//プロジェクト作成
最後にこれを入力すれば完了！
WANTEDLY TECH BOOKを読んだ振り返り


以下の記事が話題になっていたので、さっそく買って読んだ。
[Wantedlyを支える技術をギュッと１冊の本にして技術書典に出展しました](https://www.wantedly.com/companies/wantedly/post_articles/29422)

で、ちょうど最近自分で、[マイクロサービスの開発フローを整えた](http://qiita.com/tomoyamachi@github/items/0f049c87bfdef4aa6ad9)ところなので、反省した点を書いていく。

## PUSHからDEPLOYまでのフローについて
### wantedlyのフロー
![wantedly_delivery.png](https://qiita-image-store.s3.amazonaws.com/0/14275/dc3c45d2-8058-9c97-1966-d677727e1138.png "wantedly_delivery.png")
出展 [WANTEDLY TECH BOOK](http://tatsu-zine.com/books/wantedly-tech-book)

### 自分が構成した現在のフロー
![tomoya_delivery.png](https://qiita-image-store.s3.amazonaws.com/0/14275/8b09fcaa-3b35-e590-c7a0-10f3becd1624.png "tomoya_delivery.png")

### 反省した点

#### dockerの導入について

Wantedlyのように、dockerを使ってテストや本番にリリースしたいとは当初思っていたが、以下の理由で諦めた。

1.  AmazonLinux用のAnsibleから環境構築していた
2. CircleCIを会社で利用していた
3. CircleCIでAWSネットワークが利用できない
4. AmazonLinuxのDockerimageを導入してもyum installができない
5. Ansibleを書きなおすか、Dockerを諦めるか → Dockerを諦めるを選択

本書を読んで、やはりDockerを導入するメリットは大きいと判断したので、あらためてDockerを利用するフローに変更してみたいと思った。

利用するサービスすべてがCoreOSというようになるのも魅力的。

ただ全てのパッケージをdockerfileから構成しようとすると大変そうなので、既存のAnsibleファイルも活用できるところは活用していきたい。


#### deployのフローについて
古い感覚なのかもしれないが、いくらテストを突破しても、マージが完了したら自動で本番にリリースするのは怖い。

ステージ環境までは自動でリリースして、ステージ環境で軽く触ってみて問題ないかを確認する手順は続けていくだろう。

本番環境へは手動リリースというフローにすると思う。手動といっても、別にコマンドではなくchat opsでも何でもいい。

※ @awakiaさん(wantedlyの中の人)からコメントいただきました。本番環境への自動デプロイは勘違いみたいです。コメント参照。

### その他

deploy後にエラーが起こった時にGithub issueに登録するというのもやりたい。

現状のシステムではエラーの通知だけしかできていないが、たしかにストックされるべき情報なので、Github issueなり、backlogの課題なりに自動的に登録されていいと感じた。


## 検索について
### 学んだ点
まだ今回開発したものに対して、検索機能の必要性はないが、利用するのであれば、Apache Solrなどを利用しようと考えていた。

ただ今回、Elasticsearchを利用すると、ある程度重み付けをした検索結果を得られ、導入時の敷居も低いことがわかったので、そちらを利用するのもありだと思った。

## データ解析とか
現状、うまくデータ解析までできていない。
ログは残すようにしているが、それを元にして何を集計するか、というのを決める人がいない状況。

GoogleAnalyticsと、GoogleBigQueryを使っており、
データが増えてきたらTreasureDataを使いたいという依頼は数ヶ月前から行っているので、参考になりそうなことが多かった。


## まとめ
123ページと技術書にしてはかなり薄い。
たぶん電子書籍で読むよりも、紙媒体で同人誌的に読んだほうが楽しめたろうな、と感じた。

他社で実際に運用されているインフラまわりの情報が、ここまで分かることはあまりないので、とても参考になった。

あと、すくなくともインフラチームが持っている理念はすごく共感できる。普通にwantedlyで働くの楽しそうだと思った。
cloud-init利用してAWS LinuxでDockerコンテナ自動起動

#環境

・AWS Linux
・Unicornコンテナを立ててRailsアプリケーション起動
・RAILSの中でRAILS_ENVとかDB接続設定を環境変数化してる
・docker-composeを利用してコンテナ起動
・docker build時にbundle installしてない。コンテナを立ち上げながらbusyboxをボリュームしてbundle installしてる


#手順

##改めてcloud-init自動起動ON

```
chkconfig cloud-init on
```

##/var/lib/cloud/scripts/per-boot下にスクリプト作成

vim /var/lib/cloud/scripts/per-boot/start_container.sh
※start_container.shではなくてもよい。拡張子だけ.shにする

```
#!/bin/sh
. /etc/profile
cd $RAILS_ROOT;/usr/local/bin/docker-compose up -d &
```

※事前にdocker-composeのパスを```which docker-compose```で確認しておく


##環境変数設定

Rails起動時に必要な環境変数を
/etc/profile.d/docker.shに定義しておく

vim /etc/profile.d/docker.sh

```
export RAILS_ENV='production'
export DB_HOST='xxx'
epxort DB_PASSWORD='xxx'
```

```
chmod 744 /etc/profile.d/docker.sh
chown root:root /etc/profile.d/docker.sh
```

rootユーザーが実行できるように権限与えた(cloud-initはrootユーザーで実行される）

##サーバ再起動＆動作確認

```shutdown -r now```でサーバ再起動してから```docker ps```で指定したコンテナが立ち上がらって且つ正常に動いてることを確認すればオッケー




#ハマったこと

##環境変数が適用されなかった

```/etc/profile``` に環境変数を定義しておいてもcloud-initが```/var/lib/cloud/scripts/per-boot```下のスクリプトを実行するタイミングが先みたいで環境変数が適用されずDBに接続されないとかのエラーでrailsが起動しなかった


以下のように記述しても環境変数が適用されない（sourceコマンドは見つからないし、/bin/shだと ```sh: 0: Can't open /etc/profile.d/docker.sh```と出てる。なんでだろう。実行権限あげたのに！！）

```
vim /var/lib/cloud/scripts/per-boot/start_container.sh
source /etc/profile.d/docker.sh
/bin/sh /etc/profile.d/docker.sh
```



exportで直接書くと解消されたが、そのため環境変数が二か所に分けるのはださい。などでハマってましたが、なんと。。```. /etc/profile```にしたらうまく適用された！


docker-composeコマンドのパスも/etc/profileに定義したPATHが適用される前にcloud-initが動くので適用されない。面倒くさいからフルパスで記載しておくことで解決しました。


##cloud-initの実行挙動

cloud-initの実行挙動については[こちら](https://blog.cloudpack.jp/2013/01/11/aws-news-cloud-init-scripts/)を参考しました。
paiza　恋するハッカソン　cute衣装取得のために初心者が気合で書いたコード ruby

```ruby:cute衣装.rb
n , m = gets.split.map(&:to_i)
# nはスタッフの人数
# m はパックに入っているアメ玉の数
num = m % n
if num == 0
  puts "ok"
else
  puts "ng"
end
```
soxを用いてディレクトリ内のファイルの変換

soxでまとまったファイルを変換したいといった状況に見舞われたので、
自分用のメモに軽く記しておこうかと……


数字の連番のファイルだったので（*000.au,*001.au,……)なので
適当なシェルスクリプトで行けるかなと思ったけど、シェルスクリプトにあまり触れてこなかったので書けなかった…（多分書くことは可能だと思います）

というわけで
http://naoh16.seesaa.net/article/26138081.html
こちらを参考にちょろっと書きなおしてみた


希望のディレクトリに移動したあとで
```find  *.au -exec sox {} {}.wav \;```

流れとしては`find`を用いてauという拡張子を持つファイルを走査、
`-exec`オプションで発見したファイル名に対しての操作を行うことが出来る。
あとはsoxコマンドを用いて変換するだけであり、{ }で検索結果を表すので
上記の操作では`*.au`から`*.wav`へと変換できる。
laravelの数値のバリデーション

laravelのバリデーションでは入力値に応じてチェック方法が動的に変わるバリデーションルールがある。
例えば *size* とか *between* なんかがそう。
自分が使っているのはlaravel4だけど、laravel5でもそれほど違いはないはず。

> ## laravel4（ http://readouble.com/laravel/4/2/0/ja/validation.html ）より
> between
> フィールドが指定された最小値と最大値の間のサイズであることをバリデートします。sizeルールと同様の判定方法で、文字列、数値、ファイルは評価されます。

> size
> フィールドは指定された値と同じサイズであることをバリデートします。文字列の場合、値は文字長です。数値項目の場合、値は整数値です。ファイルの場合、値はキロバイトのサイズです。


これを見る限り対象のデータが数字(数値)なら値の範囲、文字列なら文字数をチェックしてくれるものだと思っていた。
つまり、
「3」という値に対して「 *between:1,2* 」とかいうルールを充てるとバリデーションエラーとなるものだと思っていた。
が、エラーにはならない。。。
laravelのバグだと思っていたのだけれども、コードを見ていると評価対象が数値かどうかは同時に充てられているルールを見て決めているらしい。
なので *between* と同時に *numeric* や *integer* を同時に設定すると期待通り動作しました。
phpは型に対してすごくゆるゆるなのでこう判定せざるを得ないという事かな。
ファイルの権限の見方のコマンドと権限の変更

#ファイルの権限の見方

`$ ls -l 権限が見たいファイルのpath`


#権限の変更の仕方
`chown -R 新しい権限のユーザー名 変えたい権限のファイルのpath`


もしできなければ、sudoで変更
`$ sudo chown -R 新しい権限のユーザー名　変えたい権限のファイルのpath`

例：
`$ chown -R user_name /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-14/2.0.0/`

2.０．０以下のファイルの権限がuser_nameに変更できる。


また、親のディレクトリの権限を変更すればその親以下の権限はすべて変更できる。
`$ chown -R user_name /Library`

Library以下のファイルの権限がuser_nameに変更できる。
MacにpkgでインストールしたNode.jsをアンインストールする手順

#はじめに
nodebrewで管理しようと思い、パッケージでインストールしたNode.jsをアンインストールする必要が出てきたので、一瞬うまくいかなかったので備忘録。

# コマンドでアンインストール

いろんなサイトで書かれている以下のコマンドを実行してみると、/var/db/receipts/にorg.nodejs.pkg.bomなんかないぞっ！！って怒られた。

```
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*
```

で、実際/var/db/receipts/を覗いてみると、org.nodejs.node.pkg.bomっつーのがあったので、以下に変更してみたところうまくアンインストールできた。

```
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*
```

ちなみに、上記コマンドは1行づつコピーしてenterしてください。
　↑コマンドよくわかってない方向け
　↑行末に\が書かれている行を実行すると>がでますが、焦らないで、次の行を>につづけてペーストしてenterを押してください。(←聞かれたので、これも分からない人向け)

これで、インストーラーでインストールしたNode.jsがアンイストールできます。

#NPMの削除

```
sudo rm -rf ~/.npm
```

これでnpmも削除され、Node.js関連ファイルが全て削除されました。

あとは、nodebrewやHomebrewでインストールしましょう。
Raspbianで最適化フラグを渡すと std::thread 動かない

少々ハマったので情報共有します。

C++11 のスレッドコードを、ラズパイ２でビルドしたら、動きませんでした。
原因は、ラズパイ２向けのコンパイルフラグ -march=armv7-a （-mcpu=cortex-a7 も同じ）。

OS は 2016/5/27 リリースの [Raspbian](https://www.raspberrypi.org/downloads/raspbian/) を使ってます。 OS ／基本ライブラリ系のバグなのかなぁ。


# サンプルコード
問題点を含んだサンプルコード。なるべく最小にしてます。

```cpp:test.cpp
#include <iostream>
#include <thread>
#include <chrono>


void thread_main(void)
{
    std::this_thread::sleep_for(std::chrono::seconds(5));
}


int main (void)
{
    std::thread t(thread_main);

    std::cout << "main waiting thread_main to finish" << std::endl;

    if (t.joinable()) {
        t.join();
        std::cout << "thread_main finished" << std::endl;
    }

    return 0;
}
```

# 動く場合

```
$ g++ -std=c++11 -pthread test.cpp
```

実行してみると、こんな感じに（ソースコードのまんま）。

```
$ ./a.out
main waiting thread_main to finish
thread_main finished
```

# 動かない場合

```
$ g++ -march=armv7-a -std=c++11 -pthread test.cpp
```

実行してみると・・・

```
$ ./a.out
pure virtual method called
terminate called without an active exception
Aborted
```

！！ **pure virtual method called** ！！

そういう訳で、スレッド使いたいときは、-march=armv7-a を渡すのは止めましょう。
以上です。


## 参考情報
ラズパイ２，３に最適なコンパイルフラグ
- https://www.raspberrypi.org/forums/viewtopic.php?f=33&t=144115

同じ問題に直面していそうな StackOverflow の記事：
- http://stackoverflow.com/questions/35929416/c-application-with-threads
paiza　恋するハッカソン　つり目取得のために初心者が気合で書いたコード ruby

今回は簡単だったので一瞬でできましたが、一応貼っておきます（自分がやってきたことをまとめるため）

```ruby:filename.rb
p = gets.to_i
num = p / 100
if num < 10
  puts num
else
  num = num + 10
  puts num
end
```
Redisコマンドまとめ

redis-cliでよく使うコマンドをまとめる

基本は[redis-cli コマンド操作まとめ](http://qiita.com/rubytomato@github/items/d66d932959d596876ab5)を見れば、大丈夫

足りてないところを追記

### 1.アイテムの総数を確認したい
```
$ dbsize
```

### 2.メモリ使用量確認したい
```
$ info

# Memory
used_memory:3861975728
used_memory_human:3.60G
used_memory_rss:4020875264
used_memory_peak:3862466864
used_memory_peak_human:3.60G
used_memory_lua:36864
mem_fragmentation_ratio:1.04
mem_allocator:libc
```

### 3.dbの一覧出したい
```
$ info keyspace
db0:keys=13333067,expires=13333066,avg_ttl=5823077226
db1:keys=29,expires=1,avg_ttl=57199
```

### 4. namespaceつけてるアイテムのnamespace一覧出したい

```
$ redis-cli KEYS "*" > keys
$ grep "\:" --color=never keys |  cut -d':' -f1 | uniq
```
axiosからRailsで作ったJSON API（XHR）にアクセスする方法

下記コードのようにHTMLとJSON両方に対応しているようなリソースにアクセスする場合は、`X-Requested-With` をヘッダーに付与しておく必要がある。

```rb
respond_to do |format|
  format.html
  format.json { render json: @user }
end
```

axiosのデフォルトに設定しておくと毎回書かなくて良いので楽。

```js
const axios = require('axios');

axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
axios.get('/users/1').then((response) => {
  console.log(response.data);
});
```
CodeDeployとCircleCIで挙動がおかしい時のチェック箇所


## CodeDeployのエラー確認方法

### 1.CodeDeploy agentログ 

EC2にSCPかSSHで入って以下のログをチェック
/var/log/aws/codedeploy-agent/codedeploy-agent.log

### 2.scriptの実行ログ 

EC2にSCPかSSHで入って以下のログをチェック
/opt/codedeploy-agent/deployment-root/(deployment-group-ID)/d-HU7MZ2XTF/logs/scripts.log

### 3.コマンドラインから

EC2にSCPかSSHで入って以下のコマンドを打ってみる。これでEC2インスタンスにインストールしたCodeDeployのエージェントがちゃんとインストールされているかの確認が可能。

``` bash
$sudo yum info codedeploy-agent
読み込んだプラグイン:priorities, update-motd, upgrade-helper
インストール済みパッケージ
名前                : codedeploy-agent
アーキテクチャー    : noarch
バージョン          : 1.0
リリース            : 1.998
容量                : 9.4 M
リポジトリー        : installed
提供元リポジトリー  : /codedeploy-agent-1.0-1.998.noarch.tmp-20160707-6938-1uuvmmo
要約                : Provides the required files for CodeDeploy agent to run in
                    : EC2 instances
ライセンス          : Amazon.com Internal
説明                : CodeDeploy instance agent is responsible for doing the
                    : actual work of deploying software on an EC2 instance.

$sudo service codedeploy-agent status
The AWS CodeDeploy agent is running as PID 6982
```

### ４．コンソールから
![AWS CodeDeploy Management 3 .png](https://qiita-image-store.s3.amazonaws.com/0/1593/235ef26d-6527-8e53-2b24-20ee31bf7e2e.png)


#### CircleCIのエラー確認方法

![CircleCI 3 .png](https://qiita-image-store.s3.amazonaws.com/0/1593/582c9356-131d-90c8-c437-5496a14cd862.png)


#### S3の状態確認方法

![S3 Management Console 3 .png](https://qiita-image-store.s3.amazonaws.com/0/1593/b4a2117d-006b-829b-0ac6-eb2e637b1483.png)
Circular Progress Bar in Android

Refer to 2nd answer of http://stackoverflow.com/questions/27213381/how-to-create-circular-progressbar-in-android

also one comment

	
Just one clarification for those who may encounter the same problem that I had: in ObjectAnimator.ofInt(yourId, "progress", 1, 500); you have to substitute "yourId" with your view, not the id of your view. So "findViewById(R.id.yourId)", not only "R.id.yourId". Hope it may help!

other good lib

https://github.com/dmytrodanylyk/circular-progress-button
https://github.com/dmytrodanylyk/circular-progress-button/wiki/User-Guide
https://github.com/JorgeCastilloPrz/FABProgressCircle

explanation of drawable

http://www.vogella.com/tutorials/AndroidDrawables/article.html
NVD3.jsを使ってみる

#はじめに
グラフを描いたりできる。

サイトはこちら
http://nvd3.org/index.html

#使うよ
コードはこんなの

```html:index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet" type="text/css">
<body>
    <div id="chart">
        <svg style="height:500px;" />
    </div>

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
    <script type="text/javascript">

    nv.addGraph(function() {
        //var chart = nv.models.historicalBarChart();
        //var chart = nv.models.lineWithFocusChart();
        var chart = nv.models.lineChart();

        chart.xAxis.tickFormat(d3.format(',f'));
        chart.yAxis.tickFormat(d3.format(',.2f'));

        d3.select('#chart svg')
            .datum(testData())
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

    function testData() {
        return [{color:'red',
                 key:'hoge',
                 values: [{x:1,y:100},
                          {x:2,y:130},
                          {x:3,y:90},]},
                {color:'blue',
                 key:'hage',
                 values: [{x:1,y:70},
                          {x:2,y:60},
                          {x:3,y:80},
                          {x:4,y:90}]}];
    }
    </script>
</body>
```

#グラフ
こんなのが出る

![image](https://qiita-image-store.s3.amazonaws.com/0/117557/55cc8b05-4541-9577-4436-10873f8b9de1.png)
TIPS: Marker Outputの中身を見る


# 環境
* openassets-ruby 0.4.9
* bitcoin-ruby 0.0.8
* bitcoin 0.12.1

# 対象

以下のような"marker output"（0番目のvout）を持つOpenAssetsのトランザクションがあったとする。

```rb 
 "out"=>
  [{"value"=>"0.00000000", "scriptPubKey"=>"OP_RETURN 4f410100020c1900"},
   {"value"=>"0.00000600",
    "scriptPubKey"=>
     "OP_DUP OP_HASH160 da9f81f0f7b0ff4a301106d5706556509131620f OP_EQUALVERIFY OP_CHECKSIG"},
   {"value"=>"0.00000600",
    "scriptPubKey"=>
     "OP_DUP OP_HASH160 a86c9fd47c7609cf60e9c811a42ac8c699842afa OP_EQUALVERIFY OP_CHECKSIG"},
   {"value"=>"0.99978799",
    "scriptPubKey"=>
     "OP_DUP OP_HASH160 aeb742caf08d3174d8616fdc97289eaad785ab29 OP_EQUALVERIFY OP_CHECKSIG"}]
```

# やりたいこと

OP_RETURNのあとにある「4f410100020c1900」の中身を知りたい

# MarkerOutputの中身を表示

```rb
OpenAssets::Protocol::MarkerOutput.deserialize_payload('4f410100020c1900')
# => #<OpenAssets::Protocol::MarkerOutput:0x007fd66b91e6e8 @asset_quantities=[12, 25], @metadata=""> 
```
12と25の配列であること確認できる。

# 参考
OpenAssets入門
http://qiita.com/osada/items/50fc76959e6730603417

OpenAssetsSpecification
https://github.com/OpenAssets/open-assets-protocol

OpenAssetsSpecification（日本語訳）
http://techmedia-think.hatenablog.com/entry/2015/05/03/190805
cocos2d-x .c3b .c3t読み出しの仕様

####・テクスチャ読み出しdirectory
　.c3b、.c3tファイルの存在するdirectoryから相対

####・テクスチャの拡張子
　無視してファイルの中身からフォーマットを推測する

####・固有テクスチャの判別
　_modelPath + texturePathをキーにキャッシュされる
cocos2d-x v3のテクスチャ読み込み

cocos2d-xのテクスチャ読み込み

http://www.cocos2d-x.org/wiki/Texture_Formats_Supported_by_Cocos2d-x
がv2のものなので修正。

###PVRv2: support mipmaps
RGBA4444,RGBA5551,RGBA8888,RGB565,RGB888,I8,AI88,A8 // まんま読める
PVRTC2BPP_RGBA,PVRTC4BPP_RGBA // GLESのサポートがない場合RGB888などのフォーマットに変換
BGRA8888 // GLESのサポートがある場合
###PVRv3: support mipmaps
RGBA4444,RGBA5551,RGBA8888,RGB565,RGB888,L8,AL88　 // まんま読める
PVRTC2BPP_RGB,PVRTC2BPP_RGBA,PVRTC4BPP_RGB,PVRTC4BPP_RGBA,ETC1 // GLESのサポートがない場合RGB888などのフォーマットに変換
BGRA8888 // GLESのサポートがある場合
###ETC:
ETC1

なお、あくまでGLESでのサポートなので、GPU上でどういった形式で格納されているのかは神のみぞ知る、、
cocos2d-xの3D優先順位

##初期状態で画面は3D

```cpp:
/// Sets a 3D projection with a fovy=60, znear=0.5f and zfar=1500.
director->setProjection(Director::Projection::_3D);
```

##描画順:
node->setGlobalZOrder(float);
　値が小さいものから描画する。
　Zソート表示物に関しては表示はZソート順でおこなわれ、GlobalZOrderは強制的に0.0fとなる。
　Zソート表示物とは半透明シェーダーのようなZバッファーでは正しく前後関係が処理できないにもかかわらず3D表示をしたいもの。
・BillBoard
・Particle
・Sprite3D(半透明なメッシュ)
このように、3D表示物はZソート表示物として扱われる可能性があるため、setGlobalZOrder()は0.0fのほうが無難。
　また3D表示物でも、非透明なオブジェクトに関してはsetGlobalZOrder()は0.0fでZソートはおこなわれずに半透明なオブジェクトの前に描画される。

###全体的な描画順は以下で固定
```cpp:
/**GlobalZOrderは0.0f未満(GlobalZOrderでZソート)*/
GLOBALZ_NEG = 0,
/**不透明な3D objectsかつGlobalZOrderは0.0f*/
OPAQUE_3D = 1,
/**半透明な3D objectsかつGlobalZOrderは0.0f(オブジェクトのZ値でZソート)*/
TRANSPARENT_3D = 2,
/**2D objectsかつGlobalZOrderは0.0f*/
GLOBALZ_ZERO = 3,
/**GlobalZOrderは0.0fより大きい(GlobalZOrderでZソート)*/
GLOBALZ_POS = 4,
```

なおsetGlobalZOrder()はnodeのchildには影響を与えないため

```cpp:
void _setGlobalZOrder(Node* parent, float zOrder){
    parent->setGlobalZOrder(zOrder);
    for (int i=0; i<parent->getChildrenCount(); i++) {
        _setGlobalZOrder(parent->getChildren().at(i), zOrder);
    }
}
```
のようなノードを辿っての更新処理が必要

##描画:
Spriteは初期状態はZを不参照、非更新で描画

```cpp:
    director->setDepthTest(true);
```
でZを参照、更新で描画

```cpp:
glClearDepth(1.0f);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);
```
githubでREADME.mdにCircleCIのバッジを表示する


ちょっと迷ったのでメモ。


## CircleCIのバッヂってなんぞ

![スクリーンショット 2016-07-08 15.05.52.png](https://qiita-image-store.s3.amazonaws.com/0/70758/0572fea8-e6e7-1855-5bb4-8b2f59c8a905.png "スクリーンショット 2016-07-08 15.05.52.png")

↑こんなの。
CircleCIのテストが通っているかどうかを確認できる素敵なもの。
これが表示されてるリポジトリってちょっとかっこ良く見えませんか？

CircleCI以外にもバッヂは色々あるが、ここでは紹介しない。


## 早速バッヂを作ってみる

パブリックリポジトリかプライベートリポジトリかでやることが異なる。

### 1. CircleCI のダッシュボードから、バッヂを表示したいリポジトリの設定を開く

![CircleCI.png](https://qiita-image-store.s3.amazonaws.com/0/70758/bfb4291d-a3b8-54cd-dcd3-58165a165022.png "CircleCI.png")


### 2. PROJECT SETTINGS 内の Status Badges を開く

![Project_settings.png](https://qiita-image-store.s3.amazonaws.com/0/70758/74a44a4f-c409-7745-9ac8-9c7835e4083f.png "Project_settings.png")


### 3. バッヂ作成

#### 3.1. パブリックリポジトリの場合

Branch: ステータスを表示したいブランチを選択(通常はmaster)
Embed Code: バッヂ表示用のコードの種類(github用ならMarkdown)

![スクリーンショット 2016-07-08 15.12.22.png](https://qiita-image-store.s3.amazonaws.com/0/70758/11fe37b2-7ede-1e53-20d1-b91d6cc5688e.png "スクリーンショット 2016-07-08 15.12.22.png")


#### 3.2. バッヂ作成：プライベートリポジトリの場合

Branch: ステータスを表示したいブランチを選択(通常はmaster)
API Token: プライベートリポジトリのCI状態を取得するために必要なCircleCI用のトークン
Embed Code: バッヂ表示用のコードの種類(github用ならMarkdown)

![スクリーンショット 2016-07-08 15.17.25.png](https://qiita-image-store.s3.amazonaws.com/0/70758/d9ff7224-e97e-7fd5-4707-4e716b02df9d.png "スクリーンショット 2016-07-08 15.17.25.png")

"add one with status scope"をクリックして、APIトークン生成画面に飛ぶ。

![スクリーンショット 2016-07-08 15.18.47.png](https://qiita-image-store.s3.amazonaws.com/0/70758/de8e7a03-b771-725d-0779-07d972dfe288.png "スクリーンショット 2016-07-08 15.18.47.png")

Statusのところはセレクトボックスになっているが、バッヂ表示用トークンはStatusのままでよい。
名前は適当で。"token for status badge"とか。

トークンを作ったらバッヂ作成画面に戻り、API Token 欄で作成したトークンを選択する。
トークンを選択すると、バッヂ表示用コード内に選択した API Token が埋め込まれる。


### 4. バッヂ表示用コードをREADME.mdに追加する

README.md内のバッヂを表示したいところに、3.で作成したバッヂの表示コードを入れる。


## 補足

今回の例では、プライベートリポジトリのバッヂ表示用コード内にAPI Tokenが埋め込まれている。
基本的にCircleCIのステータスを読む権限しか持たないTokenなので、流出したからといって
重大な問題になるようなTokenではない。はずである。（個々のプロダクトの事情による）

私はTokenが埋め込まれている！やばい！と反射的に思ってしまったが、実際は特に問題がなかった。
myThingsのIDCFチャンネルサーバを簡単につくる


# 背景
myThingsでIDCFチャンネルをつかう場合は、[こちらの手順](http://qiita.com/masato/items/f9be4a15216fe29de7fb)に沿ってIDCFクラウド上で仮想マシンの作成やNWの設定をしたり、Dockerイメージを展開したりする必要がありました。
サーバが得意な人はよいですが、そうでない人やハンズオンなど時間がかぎられた環境では大変だったところ、[masatoさん](https://github.com/masato)が簡単にサーバやNWの設定とプログラムのインストールしてくれる[プログラム](https://github.com/IDCFChannel/docker-idcf-cloud-api)を作られました。

内容についてはgithubのreadmeを見ていただくことして、ここではハンズオンなどでサーバを立てる人むけの使いかたを案内します。

自分で構築したい人ばかりではないと思うので、[こちら](https://getmythings.space/?/key)で利用できるようにしました。もしよかったら、あくまで自己責任で使ってみてください。

# 設定内容
- 指定のインスタンスへのIDCFチャンネルのインストール
- 外部通信のためのパブリックIPアドレスを1つ払い出しとNAT設定
- SSHやHTTP, HTTPS, MQTTなどを外部から通信をあけます　（必要がなければ閉じてください）
- 入力したAPI KEYやSECRET KEYはブラウザ上で処理され、システム側では保管していません。

# 手順
### 1. IDCFクラウドのKEYの取得

IDCFクラウドサービスにログイン後、メインメニューから使いたいエリアを選択します。 その後「コンピューティング」を選択します。
左メニュー下部の「API」をクリックします。 表示される「エンドポイント」、「API key」、「Secret Key」の3つが必要な情報になります。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/51786/76b4d15f-901b-ce29-d84e-7d0ac15d6128.png)


### 2. IDCFチャンネルサーバの作成

[IDCF Channel Install](https://getmythings.space/?/key#)にアクセスしてください。
先程確認したAPIキーなどを入力しましょう。「次へ」をクリックすると仮想マシンの詳細記入画面になります。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/51786/9027b373-6496-b027-f807-0cfe7d8fd4e7.png)

- ZONES : サーバー構築するゾーンの選択です。
- OFFERING : サーバーの種類です。「light.S1」でも動きますが、個人的には「light.S2」がインストールもはやくオススメです。
- NAME : サーバーの名称です。自由に分かりやすい物を付けましょう。
- EMAIL : サーバー設定の完了後連絡が来るメールアドレスになります。自身の確認できるメールアドレスを記入してください。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/51786/5c67c77b-7566-3636-9000-ac6df0f02d84.png)

「作成」をクリックすると、サーバの構築、ネットワークの設定、各種インストールや設定が順次行われます。なお画面は異常時にログを見たいので閉じずに放置してください。

最初にIDCFクラウドから仮想サーバ作成完了のメールが来ます。
その後、10分～20分でセットアップ完了のメールが届きます。
（時間差があります。）

2通目のメールは、myThingsの連携で必要なUUIDやTokenの情報がはいっており廃棄しないでください。2通目のメールを受領したらインストール完了です。


#注意

なんらかの理由でエラーとなったときは、作成された仮想サーバとIPアドレスを削除して、再度トライしてみてください。
Table 'performance_schema.session_variables' doesn't exist エラー

## エラー
railsで[バルクインサート](https://github.com/zdennis/activerecord-import)しようとしたらエラー出た

```bash:error.log
ActiveRecord::StatementInvalid:
       Mysql2::Error: Table 'performance_schema.session_variables' doesn't exist: SHOW VARIABLES like 'max_allowed_packet';
```

## 対応
mysql_updateをかけて再起動

```bash:
$ mysql_upgrade -u root -p --force
$ mysql.server restart
```

## 参考
https://dev.mysql.com/doc/refman/5.6/ja/mysql-upgrade.html
http://stackoverflow.com/questions/31967527/table-performance-schema-session-variables-doesnt-exist
http://sweep3092.hatenablog.com/entry/2015/11/28/180103
とにかくすばやくEC2環境を作るメモ


前提
-----

 - `AWS` 管理コンソールで `Amazon Linux` の `EC2` インスタンスを作成済
 - `SSH` 接続用の `pem` ファイルを取得済

pemファイルを使えるように
-----

```
chmod 400 XXX.pem
```




SSHログイン
-----

```
ssh -i /path/tp/pem/XXX.pem ec2-user@xx.xxx.xxx.xxx
```

ユーザーを作成する
-----

```
sudo useradd newuser
sudo passwd newuser
```

新しいユーザーが`sudo`できるように
-----

```
sudo visudo
```

以下を追加

```
newuser    ALL=(ALL)       ALL
```

pemなしでアクセスできるように公開鍵を登録
-----

###ローカル

```
cat ~/.ssh/id_rsa.pub
```

でてきた内容をコピー。公開鍵がない場合は `ssh-keygen -t rsa` で作ってから。

###EC2

```
su - newuser
vim ~/.ssh/authorized_keys
```

ローカルでコピーした公開鍵の内容を貼り付けて保存。複数人が使うなら改行して複数貼り付ける。
続けてパーミッションの設定。

```
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys
```

ローカルから

```
ssh newuser@XX.XXX.XXX.XXX
``` 

でアクセスできれば成功。

すばやく何かに使える環境ができました。

以上。
ASP.NETでWebAPIを作成した際のメモ書き

Visual Studioを使ってASP.NET WebAPI2を作成した際のメモ書き。

# **ASP.NET** #
「ASP.NET」とは、「Webフォーム」、「Webページ」、「シングルページアプリ」、「MVC」といった"サイト"を作成するフレームワークや、「WebAPI」や「SignalR」（WebSocketによる独自の通信方式）といった"サービス"を作成するフレームワークを提供してくれるものである。

# **WebAPIとは** #
「Web API」とは、ブラウザやデスクトップ・アプリケーションから、タブレットや携帯電話などのモバイル・デバイスまで、さまざまなクライアントにHTTPサービスを提供するためのフレームワークである。
Web APIの最大の特徴は、**RESTful**なWebサービスを構築できる点にある。RESTfulなWebサービスとは、**REST(Representational State Transfer)**という原則に基づいたWebサービスのことで、以下のような特徴をもつ。

* リソースの場所はURLで表す
* リソースに対する操作はHTTPメソッドで表す
* リソースに対する操作の結果はHTTPステータスコードで表す

RESTfulなWebサービスが使用するデータ形式に特に指定はないが、JSON形式のデータを返すのが一般的である。

# **ASP.NETでのWebAPIの実装方法** #
実装方法は、http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api にとても明快に説明されている。当初は実装方法を説明しようと思っていたが、ただの上記サイトの和訳になりそうであったので、ここでは説明を省略する（汗）。

また、http://www.asp.net/web-api/overview/advanced/sending-html-form-data-part-1 を参考に、HTMLのformから値を取得するPOSTメソッドを実装してみたので、メモしておく。
formから値を受けとるようなPOSTメソッドを作成するには、下記のような適当なModelを用意し、Modelで用意した変数名とformで宣言するnameを揃えておく。

```csharp
public enum TimeZone { Morning, Afternoon, Evening };

public class Greeting
{
    public TimeZone TimeZone { get; set; }
}
```

そして、任意のControllerでPOSTメソッドを作成し、引数には先ほどのModelを設定しておく。

```csharp
public class GreetingController : ApiController
{
    // POST: api/greeting
    [HttpPost]
    public IHttpActionResult Post([FromBody]Greeting greeting)
    {
    }
}
```

このようにして、formから受け取った値をPOSTメソッドに受け渡すことができる。
GET、PUT、DELETEと明示的に区別するには、POSTメソッドに属性[HttpPost]を付加すればよい。また、POSTメソッドの引数に属性[FromBody]を付加していないと、formから値を取得できないので注意すること。
gatlingによる負荷試験で、負荷をかける側にしたチューニング

# 前提条件
- gatlingで、他サーバーで動いているwebアプリケーションに負荷をかける
    - http://gatling.io/#/
    - バージョンは2.2.2を使用
- webアプリケーション側はきちんとチューニングされている

# 発生したエラーとその対処
### j.n.ConnectException: 要求アドレスに割り当てられません

- これが出た場合、socketが枯渇している可能性がある
- time_waitになっているsocketの再利用を許可する

```
/etc/sysctl.conf

net.ipv4.tcp_tw_recycle = 1
net.ipv4.tcp_tw_reuse = 1
```

### j.u.c.TimeoutException: Request timeout to not-connected after 60000ms
- ファイルディスクリプタ数が限度オーバーした可能性がある
- `ulimit -n`を叩いて確認。デフォルト値1024だったりするので、これを引き上げる必要がある
- gatling実行中、`ps aux | grep gatling`でプロセスIDを確認
- `cat /proc/<PID>/limits` でMax open filesを確認
- gatling実行でエラーが出たタイミングで、`ls /proc/<PID>/fd | wc -l`し、上記で確認したlimitsを超えそうならビンゴ
- /etc/security/limits.confで上限を増やす
   
```
/etc/security/limits.conf

* soft nofile 65536
* hard nofile 65536
```
Rakeタスクの中でRakeタスクをループするtips

Rakeタスクの中でループして他のRakeタスクを呼びたくなっちゃう時ありますよね。
その時にはRake::Task#reenableを使います。

```rb

  task :task_something do |t, args|
    (1..10).each_with_index do |num, i|
      if i == 0
        Rake::Task["batch:task_something_2"].invoke(num)
      else
        Rake::Task["batch:task_something_2"].reenable
        Rake::Task["batch:task_something_2"].invoke(num)
      end
    end
  end

```

ここまで書いて面倒くさいなと調べたらexecuteでいけました

```rb

  task :task_something do |t, args|
    (1..10).each_with_index do |num, i|
      if i == 0
        Rake::Task["batch:task_something_2"].execute(number: num)
      end
    end
  end

```

ただし、batch:task_something_2でActiveRecordのexecuteメソッドを使ってるとこのままでは動きません。

```rb

  task task_something: :environment do |t, args|
    (1..10).each_with_index do |num, i|
      if i == 0
        Rake::Task["batch:task_something_2"].execute(number: num)
      end
    end
  end

```

environmentが無いとDB接続出来ないですね・・ハマりましたorz

http://qiita.com/snaka/items/200cdacdc2c88c87405a
rails 写自己的generator

http://railscasts.com/episodes/218-making-generators-in-rails-3

https://github.com/erikhuda/thor/issues/47

https://github.com/ankane/blazer/blob/master/lib/generators/blazer/install_generator.rb

https://github.com/plataformatec/devise/blob/master/lib/generators/devise/devise_generator.rb

https://github.com/rails/rails/blob/master/railties/lib/rails/commands/commands_tasks.rb#L59-L65

https://github.com/rails/rails/blob/master/railties/lib/rails/commands/commands_tasks.rb#L141-L146

https://github.com/rails/rails/blob/master/railties/lib/rails/commands/commands_tasks.rb#L137-L139

https://github.com/rails/rails/blob/master/railties/lib/rails/commands/destroy.rb

https://github.com/rails/rails/blob/master/railties/lib/rails/commands/generate.rb

https://github.com/erikhuda/thor/blob/master/lib/thor/actions.rb#L74-L96

https://github.com/rails/rails/blob/master/railties/lib/rails/generators/actions/create_migration.rb#L21-L27
Unityでテキストを少しずつ透明にする

#はじめに
Unityでテキストを少しずつ透明にしていく方法を紹介します。

#手順
1,表示したいテキストを用意する
2,透明にするスクリプトを作成する
3,テキストにスクリプトを関連付ける

#1,表示したいテキストを用意する
　今回は以下のようにテキストを配置します。また、テキストが見やすいように後ろにCubeを配置しました。透明にしたいテキストがゲーム画面で見える状態になっていればOKです

![2016-07-08.png](https://qiita-image-store.s3.amazonaws.com/0/132851/5ac31078-5b0e-46c5-6a36-a63a815d4959.png)

#2,透明にするスクリプトを作成する
新しくスクリプトを作成します。
今回はクリックするとテキストが透明になるようなスクリプトを作成します。

```csharp:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class DeleteScript : MonoBehaviour {

	public Text Qtext;
	bool a_flag;
	float a_color;
	// Use this for initialization
	void Start () {
		a_flag = false;
		a_color = 0;
	}
	
	// Update is called once per frame
	void Update () {
		//左クリックでa_flagをTrueにする
		if (Input.GetMouseButtonDown (0)) {
			a_flag = true;
			a_color = 1;
		}
　　　　　　//a_flagがtrueの間実行する
		if (a_flag) {
			//テキストの透明度を変更する
			Qtext.color = new Color (0, 0, 0, a_color);
			a_color -=  Time.deltaTime;
			//透明度が0になったら終了する。
			if (a_color < 0) {
				a_color = 0;
				a_flag = false;
			}
		}
	}
}

```
new Color = (R, G, B, α); と対応しています。今回はテキストが黒なのでRGBは0とし透明度を操作するα値を変数とおきます。

#3,テキストにスクリプトを関連付ける
テキストにスクリプトを関連づけます。まず今回はスクリプトをCanvasに紐づけます。DeleteScriptをCanvasにドラック＆ドロップします。


![2016-07-081.png](https://qiita-image-store.s3.amazonaws.com/0/132851/2d0391a5-c37d-ba66-2d60-89caad5ba798.png)

するとCanvasのInspecterにDeleteScriptが表示されるようになります。DeleteScriptにあるQtextの部分へ透明にしたいテキストをドラック＆ドロップします。

![2016-07-08 (1).png](https://qiita-image-store.s3.amazonaws.com/0/132851/a87c3ac2-36d7-5724-792f-82df5d2d98cd.png)

これで完成です。再生するとクリックでテキストが透明になっていきます。

![bandicam 2016-07-08 13-45-14-679.gif](https://qiita-image-store.s3.amazonaws.com/0/132851/7bf2f034-0d35-7f7e-df1a-0b415f7c9e2b.gif)

#おまけ
透明にするだけでなく、透明から出現させることも可能なので以下のようにスクリプトを変更するとゆるやかな点滅をさせることもできます。

```csharp:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class DeleteScript : MonoBehaviour {
	public Text Qtext;
	float a_color;
	bool flag_G;
	// Use this for initialization
	void Start () {
		a_color = 0;
	}
	// Update is called once per frame
	void Update () {
			//テキストの透明度を変更する
			Qtext.color = new Color (0, 0, 0, a_color);
			if (flag_G)
				a_color -= Time.deltaTime;
			else
				a_color += Time.deltaTime;
			if (a_color < 0) {
				a_color = 0;
				flag_G = false;
			}else if(a_color > 1){
				a_color = 1;
				flag_G = true;
			}
	}
}
```
#参考サイト
http://d.hatena.ne.jp/uny_33/20150105/1420407788
Unityで作成のアプリにWebSocketを用いる

ここでは、Unityで作成のアプリにの処理中に、WebSocketを使ったメッセージの送受信を行う実装方法を紹介する。UnityのアプリはC#で開発しているものとする。また、WebSocket自体の実装については省略する。
本記事では、**WebSocket-Sharp**(http://sta.github.io/websocket-sharp/) を用いる。Unityが対応しているWebSocketは数少なく、WebSocket-Sharpはその対応しているうちの一つであるからである。

### **メッセージを送信する処理の実装** ###
WebSocketを用いるためには、WebSocket-Sharpで定義されているWebSocketクラスのオブジェクトを生成する必要がある。コンストラクタの引数には、WebSocketが実装されているサーバのURLを指定する。

```csharp
var socket = new WebSocket($"WebSocketが実装されているサーバのURL")
```

次に、WebSocketのコネクションを確立する。WebSocketのオブジェクトにクッキーなどの設定をする必要がある場合は、socket.Connect()を実行するよりも前に設定する。

```csharp
socket.Connect();
```

そして、Send()により、クライアントに送信したいメッセージを送信することができる。

```csharp
socket.Send("送信したい文字列");
```

### **メッセージを受信する処理の実装** ###
WebSocketでメッセージを受信する際にも、WebSocketクラスのオブジェクトを生成する必要がある。コンストラクタの引数には、メッセージ送信側で指定しているWebSocketのサーバのURLと同じものを指定する。

```csharp
var socket = new WebSocket($"WebSocketが実装されているサーバのURL")
```

次に、WebSocketからのメッセージを受信するために、WebSocketオブジェクトに対してイベントハンドラを登録する。イベントハンドラの登録とは、そのオブジェクトの特定のイベントが発生したことを検知して、そのタイミングで何かしらの処理を実行することである。イベントハンドラの登録は、以下のように記述できる。

```csharp
// WebSocketの接続が確立されたときのイベントハンドラ
socket.OnOpen += (sender, e) => {[このときに実行したい処理を記述する]};

// WebSocketからメッセージが送信されたときのイベントハンドラ
socket.OnMessage += {[このときに実行したい処理を記述する]};

// WebSocketとの接続にエラーが発生したときのイベントハンドラ
socket.OnError += (sender, e) => {[このときに実行したい処理を記述する]};

// WebSocketとの接続が終了したときのイベントハンドラ
socket.OnClose += (sender, e) => {[このときに実行したい処理を記述する]};
```

イベントハンドラの登録後には、WebSocketのコネクションを確立すること。

```csharp
socket.Connect();
```
GitlabでForbiddenが表示された場合の対処方法

# GitLabサーバをAWSで立ち上げた際に起こったこと。

社内でGitLabの勉強会を開こうとする。
Test projectを作り、それをみんなにcloneしてもらうと、突如として接続出来なくなった。
画面上に「Forbidden」がちょろっと表示されているだけ、勉強会は後日となりました。。。。

調査のためサーバに入り、とりあえずやったこと。
## 1 gitlabの再起動
sudo gitlab-ctl restart
実行しても状況は変わらず、nginxのエラーログも特に出ていない。

## 2 VPNで接続してみる
あまりにもつながらないので、もしかしたらとVPN経由ではいると繋がる。
このとこから、どうやらIPが問題なのではと思い始める。


## 3 それっぽい設定を探す。
Rack Attackを防ぐためのセキュリティーまわりが怪しいので、

```rb:
gitlab_rails['rack_attack_git_basic_auth']
```

のコメントを外し、ip_whitelistに固定IPを追加。

```rb:
gitlab_rails['rack_attack_git_basic_auth'] = {
  'enabled' => true,
  'ip_whitelist' => ["127.0.0.1",'固定IP'],
  'maxretry' => 60,
  'findtime' => 60,
  'bantime' => 3600
}
```

## 4 設定を反映

```shell-session
sudo gitlab-ctl reconfigure
```

とりあえず、Forbiddenは減った気がする。
URLschemeのiOS9対応で今更ハマる


#1つめの落とし穴
LSApplicationQueriesSchemesの設定名には「://」はつけない

間違い
hogehoge://

正解
hogehoge

「://」をつけずに「LSApplicationQueriesSchemes」に登録しましょう。

#２つ目の落とし穴
UIApplication.sharedApplication().canOpenURLには「://」をつける

###間違い
```Swift
@IBAction func ButtonAction(sender: AnyObject) {
        let url = NSURL(string: "hogehoge")!
        if (UIApplication.sharedApplication().canOpenURL(url)) {		
            //openURLはパラメーターなど含めて別途生成すること
            let prm = String ("hogehoge// ~パラメーターなど~")
            let openUrl = NSURL(string:prm)
           UIApplication.sharedApplication().openURL(openUrl)
        }
    }
```

###正解
```Swift
@IBAction func ButtonAction(sender: AnyObject) {
        let url = NSURL(string: "hogehoge://")!
        if (UIApplication.sharedApplication().canOpenURL(url)) {			 
            let prm = String ("hogehoge// ~パラメーターなど~")
            let openUrl = NSURL(string:prm)
            UIApplication.sharedApplication().openURL(openUrl)
        }
    }
```

#3つ目の落とし穴

LSApplicationQueriesSchemesの設定は、呼び出しアプリ側！
（地味にこれでハマった....