OmniAICreator/Qiita-1.07M huggingface dataset:
PeerJSのBroker IDを短くする

## PeerJSのデフォルトBroker IDは長くて，手打ちが大変．
IDを指定せずに使うと英数字混在で16文字のIDが返ってくる．

```js
var peer = new Peer([id], [options]);

peer.on('open', function(id) {
    log.i(id); // =>計16文字のBroker ID
});
```

毎回手打ちするのも大変なので，短い文字列で済むようにしたい．

しかし，リロードなどで同一のBroker IDを連続して取得しようとすると一定時間？IDを受け付けない様子．

そこで，短い文字列で十分ランダムな文字列を生成して，Broker IDとして指定できるようにした．

## 短縮版Broker IDのサンプル
```javascript:
// ランダムな文字列を生成する．
// @return  文字列 英字3文字＋秒(1−2桁)の組み合わせ
function getRandomString() {
  // ランダムな文字列を生成する元の文字列
  var BaseString ='abcdefghijklmnopqrstuvwxyz';

  var  randomString = "";

  for(var i =0; i<3; i++) {
    randomString += BaseString[Math.floor(Math.random() * BaseString.length)];
  }

  randomString += new Date().getSeconds();
  return randomString;
}

var peer = new Peer( getRandomString(), {key: apikey, debug : DEBUG});

peer.on('open', function(id) {
    log.i(id); // =>英字3文字＋秒(1−2桁)の短縮版Broker ID
});

```

これで十分覚えられる範囲になりました．
良いWebRTCライフを！
qiita / git / trello / slack 他にも沢山使える絵文字技


素敵な絵文字サイト発見。絵文字クリックするとコピーされる。
[EMOJI CHEAT SHEET](http://www.emoji-cheat-sheet.com/)


たまには絵文字も使って現場を楽しくしてみよう。
trello や github で活躍しそうな絵文字達。
〜 厳選抜粋中。お試しあれ。〜

以下、絵文字にできるツール( EMOJI CHEAT SHEET より )

> Emoji emoticons listed on this page are supported on Campfire, GitHub, Basecamp, Redbooth, Trac, Flowdock, Sprint.ly, Kandan, Textbox.io, Kippt, Redmine, JabbR, Trello, Hall, plug.dj, Qiita, Zendesk, Ruby China, Grove, Idobata, NodeBB Forums, Slack, Streamup, OrganisedMinds, Hackpad, Cryptbin, Kato, Reportedly, Cheerful Ghost, IRCCloud, Dashcube, MyVideoGameList, Subrosa, Sococo, Quip, And Bang, Bonusly, Discourse, Ello, Twemoji Awesome, and Got Chosen.


基本
--

* 単語の前後は `:` でくくる

### にこ
:smile: `:smile:`
:blush: `:blush:`

### 困る
:persevere: `:persevere:`
:disappointed_relieved: `:disappointed_relieved:`

### 泣く
:sob: `:sob:`
:cry: `:cry:`

### がーん
:scream: `:scream:`
:fearful: `:fearful:`

### はあと
:heart: `:heart:`
:two_hearts: `:two_hearts:`

### きらきら
:sparkles: `:sparkles:`

### ないす
:+1: `:+1:`

### よろしくです
:pray:`:pray:`
:bow:`:bow:`

### とけい
:clock3: `:clock3: `おやつの時間
:clock330: `:clock330:`

### 拍手！！
:clap: `:clap:`


へんてこ系
---
たまには遊んでみる

### 見ざる
:see_no_evil: `:see_no_evil:`

### 聞かざる
:hear_no_evil: `:hear_no_evil:`

### 言わざる
:speak_no_evil: `:speak_no_evil:`

### 骸骨
:skull: `:skull:`

### モアイ像
:moyai: `:moyai:`

### へんなおじさん
:rage1: `:rage1:`
:rage2: `:rage2:`
:rage3: `:rage3:`
:rage4: `:rage4:`
異常検知でGo！

# 異常検知でGo！

こんにちは。ちょびえです。4日めですがいかがお過ごしでしょうか？
今日はGoで異常検知を試してみましたのでレポートしてみたいと思います。

## 異常検知の世界

ふつうのWebプログラマーの私が[データマイニングによる異常検知](http://www.amazon.co.jp/dp/4320018826)読んで、機械学習ってなんて便利なんだろう！？と驚いたと共に機械学習の魅力に引き込まれていきました。

https://github.com/chobie/go-anomalydetector/blob/master/anomalydetector.go

https://github.com/muddydixon/fluent-plugin-anomalydetect のSDAR部分を再実装したものです。私は高校をドロップアウトしてるので線形代数周りの理解・実装でだいぶ難儀しましたが、良き実装があればなんとかなるもんだなぁ、、、とｗ

anomalydetectorはChangeFinder部分のスムージングなどの実装は含んでいないのでこんな感じで作ってみてください。

```go
package main

import (
	"fmt"
	"bufio"
	"strconv"
	"os"
	"strings"
	anomalydetector "github.com/chobie/go-anomalydetector"
)

type ChangeFinder struct {
	O         *anomalydetector.AnomalyDetector
	S         *anomalydetector.AnomalyDetector
	Smooth    int
	Last      float64
	LastScore float64
	Buffer    []float64
	Buffer2   []float64
}

func sum(array *[]float64) float64 {
	sum := 0.0
	for _, value := range *array {
		sum += value
	}
	return sum
}

func (finder *ChangeFinder) Update(v float64) float64 {
	var score float64 = 0.0

	if v == finder.Last && finder.LastScore < 3.0 {
		score = finder.LastScore
	} else {
		r := finder.O.Update(v)
		finder.Buffer = append(finder.Buffer, r)

		if len(finder.Buffer) > finder.Smooth {
			finder.Buffer = finder.Buffer[1:]
		}

		score = finder.S.Update(sum(&finder.Buffer) / float64(len(finder.Buffer)))
	}

	finder.Last = v
	finder.LastScore = score

	return finder.LastScore
}

func NewChangePoint(outlier_term int, outlier_discount float64, score_term int, score_discount float64, smooth_term int) *ChangeFinder {
	v := ChangeFinder{}
	v.O = anomalydetector.NewAnomalyDetector(outlier_term, outlier_discount)
	v.S = anomalydetector.NewAnomalyDetector(score_term, score_discount)
	v.Smooth = smooth_term

	return &v
}

func main() {
	p, err := os.Open("go.tsv")
	if err != nil {
		panic(err)
	}
	defer p.Close()

	cp := NewChangePoint(12, 0.0275, 6, 0.1, 12)
	scanner := bufio.NewScanner(p)
	for scanner.Scan() {
		args := strings.Split(scanner.Text(), "\t")
		result, err := strconv.ParseFloat(args[1], 64)
		if err != nil {
			panic(err)
		}
	    score := cp.Update(result)
	    fmt.Printf("%s\t%f\t%f\n", args[0], result, score)
	}
}
```

Google TrendでGolangを検索した結果を下記にはりつけておきます。ダウンロードしてgo.tsvで保存して置いてください。
https://gist.github.com/chobie/16b15c35f8452ed8d59f


それでは実行結果をExcelでPlotしてみたいと思います。スコアはそのままだと小さくて読みづらいのでなんとなく自乗しときました。

![Screenshot_11_30_14__22_54.png](https://qiita-image-store.s3.amazonaws.com/0/24324/379e0689-a410-f3d8-0f59-684bade8e945.png)

2008/9は記憶にありませんが、2009/11といえばコレですね

https://www.youtube.com/watch?v=rKnDgT73v8s#t=8m53

それじゃ、Happy Hacking
Git のデータ構造を図で整理

Git のデータ構造について図でまとめてみます。

大雑把にいうと、Git はオブジェクトと呼ばれるデータを保存する Key-Value ストアと、そのキーのラベルである参照の 2 つで構成されています。

# オブジェクト

.git/objects が前述したオブジェクトを保存する Key-Value ストアです。

オブジェクトはヘッダとコンテンツの 2 つで構成されています。
ヘッダにはオブジェクトの型とサイズが格納されています。
コンテンツの内容は型によって異なります。

このヘッダとコンテンツをあわせたバイナリをハッシュしたものが Key-Value ストアのキーとなります。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/10443/57ac9e26-d737-bfc8-f7bb-d556d5194c65.png)


オブジェクトは以下の 3 つの型などに分類されます。(※1)

* blob
* tree
* commit

それぞれについて説明していきます。

## blob

ファイルを表現します。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/10443/c69d187a-cf92-3ce4-185d-5fe796660de4.png)

コンテンツにはファイルの実データが格納されています。

## tree

ディレクトリを表現します。
tree オブジェクトはコンテンツに tree オブジェクト、または、blob オブジェクトの情報のリストを保持します。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/10443/73fcb0f9-898d-5d7e-fadc-45a156b98693.png)

各情報は「型」、「オブジェクトの Key」、「ファイル名またはディレクトリ名」で構成されます。
「型」には以下のようなものがあります。

| 型         | 解説             |
|:-----------|:-----------------|
| 100644     | ファイル         |
| 100755     | 実行可能ファイル |
| 040000     | ディレクトリ     |

blob オブジェクトと tree オブジェクトをあわせることでファイル構造を表現することができます。
(下図参照)

![4.png](https://qiita-image-store.s3.amazonaws.com/0/10443/686c0827-3f9b-3b7c-0357-789b82253afb.png)

## commit

プロジェクトのスナップショットを表現します。

![5.png](https://qiita-image-store.s3.amazonaws.com/0/10443/c2164670-a451-7e2d-b115-533620f3cd02.png)

commit オブジェクトは以下のものを保持します。

* スナップショットのルートディレクトリを指す tree オブジェクトのキー
* 親の commit オブジェクトのキー
* 作者
* 記録者
* コメント

親の commit オブジェクトとは、直前のスナップショットを指します。
commit オブジェクトが複数あることで履歴を表現できます。

![6.png](https://qiita-image-store.s3.amazonaws.com/0/10443/0b591b51-ed1a-5a1f-acfd-fa906345cf45.png)

# 参照

参照とはオブジェクトのキーのラベルです。
ブランチ、タグはこの参照であり、commit オブジェクトなどのキーのラベルです。(※1)

![7.png](https://qiita-image-store.s3.amazonaws.com/0/10443/5a55c969-dd6b-1248-ce1b-cb06c474cc81.png)

参照は .git/refs に保存されており、ファイル名がラベル名を、実データにオブジェクトのキーを格納しています。

# 参考資料

この記事は以下の資料を参考にしています。
詳細に知りたい方はこれらの資料を確認してください。

* [入門Git](http://www.amazon.co.jp/dp/4798023809)
* [9.2 Gitの内側 - Gitオブジェクト](http://git-scm.com/book/ja/v1/Git%E3%81%AE%E5%86%85%E5%81%B4-Git%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88)
* [9.3 Gitの内側 - Gitの参照](http://git-scm.com/book/ja/v1/Git%E3%81%AE%E5%86%85%E5%81%B4-Git%E3%81%AE%E5%8F%82%E7%85%A7)

## 注釈

※1  この記事では紹介していないコメント付きのタグを表現するオブジェクトの型が存在します。まだこの型については勉強不足なのでこの記事には書けませんでした。
jQuery BgCarousel Plugin書いた

![logo.png](https://qiita-image-store.s3.amazonaws.com/0/2846/5bf6f342-3125-c2f8-802f-a468191fae22.png)


とある案件で作っていた背景全画面カルーセルが必要無くなったのでjQueryプラグインとして公開します。

[jQuery.BgCarousel.Plugin(Github)](https://github.com/fromkk/jQuery.BgCarousel.Plugin)

## 使い方
```js
<link rel="stylesheet" href="css/jquery.bgcarousel.css" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.bgcarousel.js" type="text/javascript"></script>
$(function()
{
    $('#bg_carousel').BgCarousel({
        left: '#left-button',    //左ボタンのセレクター
        right: '#right-button',  //右ボタンのセレクター
        children:'li',           //背景画像コンテンツのセレクター
        contents:'img,video',    //有効コンテンツ
        duration: 500,           //アニメーションのスピード
        interval:3000,           //アニメーションが動作する間の時間 
        direction:'left',        //タイマーで動作するアニメーションの方向
        easing:'linear',         //jquery.easing.1.3.jsのイージングが有効
        timer:true,              //true or false
        keyboard:true            //true or false
    });
});
```

サンプルはこちらにアップしておきました。

[自動再生](http://fromkk.me/bgcarousel/autoplay.html)
[キーボードコントール](http://fromkk.me/bgcarousel/keyboard.html)
[イージング](http://fromkk.me/bgcarousel/easing.html)

バグがあれば叱咤激励と共に頂ければ嬉しいです。
感想や実際に使ってみたサイト等あれば教えて下さい。
Ionic/CordovaアプリでFacebookログイン

CordovaアプリでFacebookログインを実現するためにしたことメモ。ionicを使ったが、cordova系ならだいたい同じかと思う

## 1. Facebookでアプリ登録

Facebook Developersにてアプリを新規で登録する

https://developers.facebook.com/apps/


## 2. phonegap-facebook pluginをセットアップ

`plugin`ディレクトリにプラグインをcloneする

```
$ cd {APP_ROOT}/plugin
$ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git
```

## 3. プラットフォーム毎の設定

### Android

#### key hashを生成しFacebook developerに登録

下記コマンドでkey hashを生成する

```
$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
```
パスワードは`android`を入力する。(じゃないとうまいいかなかった)

生成したkey hashをfacebook developerにて登録する

#### プラグインにアプリIDとアプリ名をセットする

```
$ cordova -d plugin add  plugins/phonegap-facebook-plugin --variable APP_ID=1234567890 --variable APP_NAME="your-app-name"
```

### iOS


プラグインにアプリIDとアプリ名をセットする。（もしやandoridでやっておけばいらないかも)

```
$ cordova -d plugin add  plugins/phonegap-facebook-plugin --variable APP_ID="1234567890" --variable APP_NAME="your-app-name”
```

### Web

ionicの場合はplugin内のjsファイルを下記のようにコピーする。(じゃないとうまくいかなかった)

```
$ cp plugins/phonegap-facebook-plugin/www/js/facebookConnectPlugin.js www/js/
```

www/index.htmlのbodyすぐ下に下記タグを記入する

```html
<div id="fb-root"></div>
<script src="js/facebookConnectPlugin.js"></script>
```
#### AppIDのセット

```javascript
angular.module('yourApp',['ionic','ngCordova'])
.config(function($cordovaFacebookProvider){
    $cordovaFacebookProvider.setAppID(1234567890);
})
;
```

#### Tips: facebookでのドメイン設定

`localhost`で動かす場合はfacebook developersにてSite URLを`http://localhost:8100/`のようにlocalhostを含むURLを指定した後、ドメインをlocalhostとして設定する


## 4. 実装

使い方は下記のような感じ。こう書くことで全てのデバイスで同じように動く

```javascript
anglar.module('myConrollers',[])
.controller('loginController', function( $scope, $cordovaFacebook ){
  $scope.login = function(){
    $cordovaFacebook.login(["public_profile", "email"])
    .then(function(success) {
        console.log("facebook id:" + success.authResponse.userID );
    });
  };
});
```
gitでmasterへのpushを禁止する

![スクリーンショット 2014-11-30 23.32.23.png](https://qiita-image-store.s3.amazonaws.com/0/61095/324b2e06-8451-9ae8-b7da-8c2c8b4020f8.png)

やることは同じなのでこちらのソースをほぼそのまま使っています。
<a href="http://blog.kazu634.com/2013/03/16/do-not-commit-on-master-branch/">マスターブランチでのコミットを禁止するpre-commitスクリプト</a>


## なぜ必要か

機動的な運用のためwrite権限を持って開発するフローを導入した時

gitに慣れない人が
`git push -f origin master`
な〜んてコマンドをググってきて打ってしまう
↑困るから禁止

PRからでないとmasterを改変できなくする

## 導入

`cd {githome}/.git/hooks/`
`vi pre-push`
`chmod 775 pre-push`

```bash

#!/bin/sh
 
# if the branch is master, then fail.
  
branch="$(git symbolic-ref HEAD 2>/dev/null)" || \
       "$(git describe --contains --all HEAD)"
          
if [ "${branch##refs/heads/}" = "master" ]; then
    echo "masterへのpushはダメ〜〜〜〜！！"
    exit 1
fi
```


## 問題なとこ

各個人のローカルに設定するので、漏れができる可能性はある。運用をしっかり

----

追記: 現在はgithubにprotected branchの機能が追加されたのでそちらを使うほうが個人ごとの設定に依存しないで済むので好ましいです
API設計での開発でのジレンマと、フロントエンジニアのサーバー側を実装について


##はじめに
 API設計での開発を友人の @otukutun としていたときの話です。
 
 予め言っておきますが、 **今回の話は割と主観な部分が多いです**

![](http://i.gyazo.com/b9c35d38a788e14cdaae1769fe0da6c6.png)http://qiita.com/otukutun ←岩手県立大学出身

`(このアドベントカレンダー続くと良いですね笑)`

## API設計時のジレンマ

API設計にしておくと
* HTMLのコーディングデータのサーバーへの組み込みが発生しない
* フロント側とサーバー側の作業範囲が明確に分類されるためタスク割り振りが行いやすい
* 自分の実装範囲が明確になるので遠隔作業がしやすい

などのメリットがあると個人的には感じています。
(ただ、フロント側の実装量は一気に跳ね上がるイメージもあります苦笑)

今回は、私がフロント開発(Angular.js)、@otukutunがサーバー側開発(Rails)という分担になり、API設計で開発をすることにしました。 接続部分のHTTPRequestが上手くいかず、かなり苦戦しました。というのもお互い使う言語やフレームワークにまだ慣れてなく、勉強しつつやっていたので **上手くいかないとお互いに自分の実装を見直す、** ということをしていました。

このときに`フロント側でAPIリクエストの処理を変えた` -> `サーバー側で確認してくれ!`という感じで確認する必要がありました。

お互いに不安のある感じの実装だと、どちらに原因があるのか特定しにくいですよね汗

## フロントエンジニアだけでAPIレスポンス確認

結局↑のようなやり取りをずっとやる分けには行かないので、localhostでサーバーを立ち上げてそこでレスポンス確認をするっていうのが手っ取り早い感じがしました。

[apiary](http://apiary.io/)なんかがけっこう有名みたいですけど、個人的にはJavacriptを書ける人ならNode.jsでサーバー立ち上げてテストするのが早いかなぁと思っています。

モダンなフロント開発をしている方々はNode.jsの環境は通常ではNode.jsでサーバー立ち上げてリクエスト確認すると良いかもしれません。

以下がカンタンにリクエストを確認するサーバーです。

```http.js
var sys = require ('sys'),
    url = require('url'),
    http = require('http'),
    qs = require('querystring');

http.createServer(function (req, res) {

    console.log('method:', req.method); //←メソッドの確認

    if(req.method=='POST' || req.method=='OPTIONS') {
        var body='';
        req.on('data', function (data) {
            body +=data;
        });
        req.on('end',function(){
            var POST = qs.parse(body);
            console.log('post:',POST,typeof(POST)); //←POST送信されたデータと型の確認
        });
    }
    else if(req.method=='GET') {
        var url_parts = url.parse(req.url,true);
        console.log(url_parts.query); //←GET送信されたデータの確認
    }

}).listen(1337, "127.0.0.1");
```

このコードを保存して

```
$ node http
```

でサーバー起動して **http://localhot:1337** にリクエストを投げれば、ちゃんとリクエストが送れているか分かると憶います。

```
method: POST
post: { 'email': 'iwate@gmail.com',
  'name': 'n0bisuke',
  'password': 'lig' } object
```

こうしたほうがストレスフリーで生きれる気がしました笑
結局のところ、遠隔での作業の場合はフロント側はAPIレスポンスを、サーバー側はAPIリクエストをお互いにモックアップを組みながらやる必要はありそうだと改めて感じました。
(頭では分かってましたが実感した気がします笑)

##さいごに

今回ハマっていた箇所でPOSTリクエストを送っているつもりがそもそもPOSTが送れていなかった...ということがあったので、詰まったらこんなかんじで進めるのもありだと思います。
GitHub から MQTT PUBLISH されたメッセージを受信して、POST リクエストで送信する

[LAN 内に GitHub WebHooks の HTTP リクエストを届ける - Qiita](http://qiita.com/Hexa/items/c44001485488bd89cdaf) の MQTT 版です

GitHub WebHooks の代わりに MQTT publish を使用して、git push 時に GitHub から直接 [MQTT as a Service sango](https://sango.shiguredo.jp/) に メッセージを送信させてみました

WebHooks の場合との違いは、[LAN 内に GitHub WebHooks の HTTP リクエストを届ける - Qiita](http://qiita.com/Hexa/items/c44001485488bd89cdaf) の EC2 インスタンスが不要になる点と、
``X-GitHub-Event`` 等の WebHooks では取得できた HTTP ヘッダによる情報が取得できない点です

## 構成

![drone 2.png](https://qiita-image-store.s3.amazonaws.com/0/36202/06557479-d72c-014b-ac46-b5d666319943.png)


## GitHub Services

``Webhooks & Services`` の Services から ``MQTT`` を選択して設定します

![スクリーンショット 2014-11-30 20.24.37.png](https://qiita-image-store.s3.amazonaws.com/0/36202/25242151-0b7b-2991-34ac-82408b7d827e.png)


### Topic

PUBLISH する Topic は {{ sango の username }}/github/{{ POST リクエスト送信時のパス }} を指定しておきます

``POST リクエスト送信時のパス`` は、Subscriber が POST リクエストを作成する際に使用します


## MQTT Subscriber

SUBSCRIBE 時の Topic に Multi-level wildcard で指定しておき、
GitHub で指定した Topic から POST リクエストの送信先のパスを取得して、Drone に POST を送信します

```rb
require 'mqtt'
require 'net/http'

username = ''
password = ''
sango_host = ''
sango_port = 1883
drone_host = ''
drone_port = 80
Topic = [username, 'github', '#'].join('/')

client = MQTT::Client.connect(
  :host => sango_host,
  :port => sango_port,
  :ssl => false,
  :username => username,
  :password => password
)

client.get(Topic) do |topic, msg|
  path = topic.split([username, 'github'].join('/'))[1]

  uri = URI.parse("http://#{drone_host}:#{drone_port}#{path}")
  request = Net::HTTP::Post.new(
    uri,
    initheader = {
      'Host' => "#{uri.host}:#{uri.port}",
      'Accept' => "*/*",
      'Content-Type' => 'application/json',
      'Content-Length' => "#{msg.length}"})
  request.body = msg

  Net::HTTP.start(uri.host, uri.port) do |http|
    http.request(request)
  end
end
```
std::bindのメタ関数バージョン

なんか電波を受信したので書いてみました。
高階メタ関数の引数を束縛して新しいメタ関数を作ります。

```
// 第一引数にメタ関数
// それ以降に束縛する引数
template <
  template < class ... > class meta_function,
  class... Args1
>
struct meta_bind
{
  template < class... Args2 >
  using type = meta_function < Args1..., Args2... >;
};

template < class Ty >
using is_int = typename meta_bind < std::is_same, int >::template type < Ty >;


void printbool( bool b )
{
  printf( "%s\n", b ? "true" : "false" ); 
}
int main()
{
  printbool < is_int < void >::value >();
  printbool < is_int < int >::vaue >();
}

```

問題があるとすればいまいち使い道が思いつかないところとか、
`typename meta_bind < std::is_same, int >::template type < Ty >`　がメタ関数慣れしてないひとにはキモすぎることかも。
placeholdersみたいなものもつくってないですが、named templateイディオムでどうにかなりそう。
ポケットWifi(EMOBILE GL06P) の受信データ量合計を取得するシェル


誰得って感じだし、会員ページ見ればわかるんだけど、
いちいちブラウザ操作するのも面倒なので、スクレイピング的なことをしてみました。

# 今月どれくらい使ってるんだっけ

```wifilog.sh
#!/bin/bash
URL="http://pocketwifi.home/api/monitoring/traffic-statistics"
downloadByte=`curl $URL 2> /dev/null \
  | grep TotalDownload \
  | sed -e "s/<TotalDownload>//g" -e "s~</TotalDownload>~~g"`
downloadGigaByte=`expr $downloadByte / 1024 / 1024 / 1024` #切り捨て御免
echo "["`date "+%Y/%m/%d %H:%M:%S"`"]:" $downloadGigaByte "GB"
```

## 使用例

```
$ ./wifilog.sh
[2014/11/30 20:59:36]: 308 GB
```

今月というか累計が出る。
つまりクーロンで定期的に実行してログを溜めておかないと、
あとどれくらいで今月の使用上限をオーバーするのかがわからない。（つまりクソ

```
00 * * * * ~/Settings/bin/wifilog.sh >> ~/Settings/log/wifi.log
```

# ポイント
 - URL はtcpdump コマンドでパケット監視して取得した。
 - 頑張れば過去の履歴から今月の使用量を割り出せそうだけども。
python lambda式

##今更のlambda式
『lambda式』を知ってはいたが、「無名関数を定義できる」としか理解しておらず、
(他の人も言っておりますが)使いどころが良くわからないのもあって
実際に使ったことがなかったのです。

ですが前回書いたCheckiOにてlambda式で書いているものが
ちょっとかっこよく見えたので使ってみようかなと。

##書いてみる

とりあえず基本から・・・

```python:test.py

hoge = lambda x : print x*2

hoge(5)

```

実行すると

```
File "test.py", line 2
    hoge = (lambda x : print x*2)

```

失敗するとは思ってなかった。。。

## で!
調べてみると↓
> lambda式のボディ部分も「式」
return しなくても演算結果が返ってくる。
ステートメントを書くことは出来ない(return,print,if~else~)が、工夫すれば同様のことは出来る。

なるほど。知らなかったよ。

## 修正
```python:test.py

hoge = lambda x : x*2

print hoge(5)

```

実行すると

```
10
```

成功。よかった。

## まとめ・・・の前に
なんでステートメントが書けないのか気になったので調べてみた。
http://docs.python.jp/2/faq/design.html#id6

あくまで「関数の速記法」としての位置付けなので、
式だけ書ければ役割としては十分ということなのですね。

最初に書いた「使いどころが良くわからない」ってことと合わせて
いろいろ納得できました。

## まとめ

やっぱ使ってみるって大事ですね。
他に「知ってるけど使ったことないや」ってのがないか探してみようと思います。

### 引用元
http://d.hatena.ne.jp/kobakoba0723/20100930/1285849859

http://docs.python.jp/2/faq/design.html#id6
ターミナルで画像をBase64化する方法（速度改善）

小さなアイコン類をテキストにすることで、
リクエスト本数を減らし、全体的な速度向上につなげることができます。


## 作り方

実はターミナル上で１行コマンドを打つだけ。

```zsh
$ base64 icon.png
iVBORw0KGgoAAAANSUhEUgAAAB4AAA … AgCI= // Base64化された画像の文字列が出力される（凄く長い）
```

これだけ。超簡単。
変換サイトをよく見かけるけど、使わなくても実はできるというびっくり。
Macにはデフォルトで入ってました。

Base64化する前に、画像圧縮ソフトで圧縮してから変換すると、さらに小さくなります。



## 使い方

出力された文字列をこのまま貼っても使えません。

```html
<img src="data:image/png;base64,(Base64化した文字列)">
```

()の代わりに出力された文字列をコピペ。
pngを適宜拡張子に合わせて書き換えます。
めんどくさいのでDashでスニペット登録しています。


## つかいどき

Base64化することで却って重くなってしまうこともありますし、
文字列にすることで管理しづらくなることもあるので、使いどきは見定めないといけません。

うちのプロジェクトでは

* 1KB未満である（アイコンなど）
* webfontにしたけど１回しか使っていないもの
* spriteには適さない（１個単体で使われる可能性が高い）
* 変更が少ない（頻繁にアップデートがかかる場合は手間になってしまう）

という基準を設けています。

## 効率化のために

### 元画像も必ず保存しておく

何かのきっかけでBase64をやめたいこともあるので、必ず残しておきます。
この画像なんだっけ？とか、どの画像をBase64化していたっけ？という記録用にもなります。

うちではbase64ディレクトリを作っておき、そのディレクトリ内はデプロイしないようにしています。


### Base64化したテキストの使い方
意味のない文字列は、運用時にかなり邪魔になってしまいます。

#### 1. CSSのクラスの背景に使う  
アイコンであれば余計なDOMがなくなって、むしろSEO的にも良い感じ。なきがする。

```css
.icn-new:before {
  content: "";
  background: url(data:image/png;base64,(Base64化した文字列)) center center no-repeat;
  background-size: 15px 16px;
  width: 15px;
  height: 16px;
  display: inline-block;
}
```
```html
<h2><img src="icn.png">新着一覧</h2>  // 画像
<h2 class="icn-new">新着一覧</h2>     // Base64化して背景に
```

#### 2. helperに登録しておく  
Railsではhelper、Handlebarsではpartialや自作helperなどを用いて、簡単に呼び出せるようにしておくと便利です。（他の言語にもそういうのありそう）

Handlebars自作ヘルパーの例：

```javascript:helper.js
module.exports.register = function (Handlebars, options) {

  /**
   * spacer.gifのBASE64パスを返す
   * @return {String} BASE64 path for 'spacer.gif'
   * 
   * ```
   * {{spacer}}
   * ```
   */
  Handlebars.registerHelper('spacer', function() {
    return 'data:image/gif;base64, (文字列)';
  });

};

```


## その他

```zsh:helpを見てみる
$ base64 -h
Version DEBUG
Usage:	base64 [-dhvD] [-b num] [-i in_file] [-o out_file]
  -h, --help     display this message
  -v, --version  display version info
  -d, --debug    enables additional output to stderr
  -D, --decode   decodes input
  -b, --break    break encoded string into num character lines
  -i, --input    input file (default: "-" for stdin)
  -o, --output   output file (default: "-" for stdout)
```

txtファイルに書き出したりすることもできます。
デコードもできるそうです。
アップロードされたファイルをそのままAmazonS3に転送する

PHPでブラウザからアップロードされたファイルをサーバ内に保存する場合、普通なら [move_uploaded_file](http://php.net/manual/ja/function.move-uploaded-file.php) 関数を使うと思います。

では受け取ったファイルをサーバ内ではなくAmazonS3に保存したい場合はどうすればよいでしょうか？

AWS SDK for PHPを使えば簡単にできます。

```php
$result = $s3client->putObject([
    'Bucket'     => $bucket,
    'Key'        => 'dir/to/picture.jpg',
    'SourceFile' => $_FILES['picture']['tmp_name'],
    'Metadata'   => [
        'Foo' => 'abc',
        'Baz' => '123'
    ]
]);
```

`move_uploaded_file`する代わりに、pubObject()の`SourceFile`パラメータに `$_FILES[フォーム項目名]['tmp_name']`を指定するのがポイントです。

http://docs.aws.amazon.com/aws-sdk-php/v3/api/api-s3-2006-03-01.html#putobject

http://php.net/manual/ja/features.file-upload.post-method.php
PHP Treasure Data REST API


そんなこんなで6日目です。今日は弊社のとあるゲームからTDへのクエリに使っているライブラリについて簡単にご紹介したいと思います。

## PHP TreasureData Api Client

sotarokがが作った[php-treasure-data](https://github.com/crocos/php-treasure-data)というTD APIがあるのは知っていたのですがやんごとなき事情+Proxy周りのサポートとかを入れたりするのでつくったのが下記ライブラリです

https://github.com/chobie/treasuredata-api-client


実装が去年なので今の最新の機能はそんなに無かったりすると思うんですが、必要な機能はだいたい揃っているはず。

KEEP IN MINDの所をを見返すとメモリ利用率でチョット効率的なはず、とかなるべく小さな配列使うようにしてるので比較的安定してるよーってのをオシてたみたいなのですが、実測してないしまぁ、とりあえず書いてみたくらいのものだったと思うんでとりあえず横に置いておきましょう。

# Treasure Data API

http://docs.treasuredata.com/articles/rest-api

TDのAPIについては上記URLに詳細な記載があります、が[ソース](https://github.com/treasure-data/td)みたほうが色々と面白いと個人的に思っています。

基本的にほとんどすべての操作がREST API経由で行えるのもTDのメリットですね。

## 実行例

オールドスタイルなPHPライブラリなので同梱のautoloaderを使うかComposer経由で利用出来ます。

composerの場合は下記をrequireに追加してください。

```
{
   "require": {
       "chobie/treasuredata-api-client": "dev-master"
    }
}
```

[https://github.com/chobie/treasuredata-api-client/blob/master/examples/issue\_query.php]

それではQuery実行から取得するまで待つ実装の例を見てみましょう。

```php
<?php
require_once join(DIRECTORY_SEPARATOR, array(dirname(dirname(__FILE__)), "src", "TreasureData", "Autoloader.php"));
date_default_timezone_set("UTC");
TreasureData_Autoloader::register();

$api = TreasureData_APIFactory::createClient(array(
    "api_key" => "<PUT YOUR API KEY HERE(see ~/.td/td.conf)>",
));

$message = $api->issueHiveQuery("testdb", "select v['code'] as code, count(1) as cnt from www_access group by v['code']", 0)
                ->getResult();

/* @var TreasureData_API_Message_IssueJob $message */

printf("# Issuing job_id %s successful\n", $message->getJobId());
printf("# polling job status. this will 30 over seconds...\n");

while (true) {
    printf("# Issuing job status api. we wait 10 seconds after issuing api.\n");

    $st = $api->getJobStatus($message->getJobId())->getResult();
    /* @var TreasureData_API_Message_JobStatus $status */
    if ($st->isSuccess()) {
        $result = $api->getJobResult($message->getJobId())->getResult();
        break;
    } else if ($st->isError()) {
        throw new RuntimeException(sprintf("job_id %s returns error", $message->getJobId()));
    } else {
        printf(".");
        var_dump($st);
        sleep(10);
    }
}

var_dump($result);
```

ruby等の場合は公式のライブラリを使えばいいんですが、PHPだとデファクトスタンダードがないので状況に併せて好きなのを使うといいと思います。

たぶん後の方でこれを使ったアプリケーション側視点での記事をなんか書くと思うのでご期待！
個人的によく使う、RubyMineのショートカットいくつか


ここ2ヶ月くらいRubyMineを使ってみて、よく使うと思ったショートカットをいくつかメモっていきます。
![rubymine](https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTkCCepbigk72D_5Ni1JLPRBpk32f-WOpdq9DKTdF9NK-dz1Yqnug)

|キーバインド|内容|
|------------|--------------|
|⌘ + Shift + o|ファイル検索|
|⌘ + Ctl + l|コードフォーマット|
|⌘ + Shift + f|テキスト検索|
|⌘ + Ctl + Up| 対応するviewやTest、Modelにジャンプ。存在しない場合作成もしてくれるので便利。<BR>![スクリーンショット 2014-11-30 19.19.14.png](https://qiita-image-store.s3.amazonaws.com/0/7410/3c8b060a-dd71-8db4-819f-8372084922ea.png "スクリーンショット 2014-11-30 19.19.14.png")|
|⌘ + Shift + .|ERB式を出力<BR>![スクリーンショット 2014-11-30 19.33.44.png](https://qiita-image-store.s3.amazonaws.com/0/7410/78636a13-c33b-128c-ddd6-a4f6ab9c0787.png "スクリーンショット 2014-11-30 19.33.44.png")|
| Shift + # | 式展開に変換<BR>![literal2.gif](https://qiita-image-store.s3.amazonaws.com/0/7410/02c2fdb7-79a2-1934-4db7-3df9de498c5d.gif "literal2.gif")|
| Tab + Space|HTMLのコーディングを補完してくれる。<BR>![html.gif](https://qiita-image-store.s3.amazonaws.com/0/7410/df9ca677-f18e-74dc-39f9-a64a08ab6f0c.gif "html.gif")|
| ⌘ + 6 |TODOの一覧表示<BR>![スクリーンショット 2014-11-30 19.39.20.png](https://qiita-image-store.s3.amazonaws.com/0/7410/14518d93-ee64-973d-05c8-7c2e387d54ff.png "スクリーンショット 2014-11-30 19.39.20.png")|
| ⌘ + Shift + v | コピー履歴を表示<BR> ![スクリーンショット 2014-11-30 19.31.53.png](https://qiita-image-store.s3.amazonaws.com/0/7410/23e13b24-ed2c-bb9e-bdd1-02e7491b9694.png "スクリーンショット 2014-11-30 19.31.53.png")|
| ⌘ + Shift + [ | 右のタブへ移動 |
| ⌘ + Shift + @ | 左のタブへ移動 |
| Shift + option | 行を移動<BR> ![rep.gif](https://qiita-image-store.s3.amazonaws.com/0/7410/66497052-43c1-ba17-d6db-92f4a2338b09.gif "rep.gif")|
| Shift + alt 押しながらドラッグ | 複数行選択 |
| alt + F7 | ソース内で他に使ってるところを検索してくれる |


※今後アップデートしていきます。
RubyMineのTipsはこのブログとかが有益そう
http://pivotallabs.com/productive-rails-view-development-in-rubymine/
Dockerコンテナの上で流れるパケットをキャプチャ方法

Dockerコンテナ上でどんなキャプチャが流れてるかを確認したくて調べたのでメモ。
最初は、普通にコンテナ上にtcpdumpを入れてdocker execでbash経由でログインして確認してたのですが、
結構めんどくさい。また、Volumeとか切ってないと、tcpdumpの結果を取り出すのも一苦労。

そこで他の方法を探していたところ、Dockerのネットワークはホスト側のコンテナ接続用の仮想ブリッジ「docker0」を常に経由しているようです。

なので、
```$ sudo tcpdump -i docker0
```
とすることで簡単にすべてのコンテナのパケットを取得することが出来ます。
docker0が仮想ブリッジになってるという事実をもうちょっと良く考えるべきでした。orz

単純に標準出力で取り出すだけだと解析がツライので、Wiresharkで解析したり、ヘッダ以外の情報も取れるようにしたりで、最終的には下記の様な形に。

```
$ sudo tcpdump -i docker0 -X -s 0 -w /tmp/mysql.cap 
```

これをWiresharkとかで開くと下記のように見れます。

![ss001.jpg](https://qiita-image-store.s3.amazonaws.com/0/54904/7334cb93-00a1-2fd6-8b2b-3ebe457f47d7.jpeg)

### 参考

- [Dockerのネットワーク管理とnetnsの関係](http://d.hatena.ne.jp/enakai00/20140424/1398321672)
【Swiftで】Social.frameworkを使ったTwitter投稿画面【初心者でもできる】

iOSアプリ使っているとよく見るあの画面の作り方です。
![kobito.1417343105.200291.png](https://qiita-image-store.s3.amazonaws.com/0/20371/6e08ad53-8520-d399-52c7-2506db991fff.png "kobito.1417343105.200291.png")
↑あの画面

やったことなかったけどこんなに簡単だとは思わなかったのでご紹介。
#手順
##①フレームワークのインポート
![スクリーンショット_2014-11-30_19.26.14.png](https://qiita-image-store.s3.amazonaws.com/0/20371/9b42c3fc-42d1-5d93-f2f9-91c3bd5ec307.png "スクリーンショット_2014-11-30_19.26.14.png")
＋をクリックして「Social.framework」を選択して追加
##②フレームワークのインポート
```swift:ViewController.swift
import UIKit
import Social //この行を追加
```
##③投稿画面を表示するコードを書く
```swift:ViewController.swift
//投稿画面を作る
let twitterPostView:SLComposeViewController = SLComposeViewController(forServiceType: SLServiceTypeTwitter)!

self.presentViewController(twitterPostView, animated: true, completion: nil)
```
これで表示はされます。
最初から文字を入れておきたい場合などは

```swift
twitterPostView.setInitialText(string)
```
としてあげればOK
### ちなみに
投稿画面を作るときのforservicetypeを` SLServiceTypeFaceBook `とかにしてやればFacebookへの投稿画面を出すこともできます…。
iOSでアプリケーションの状態を判定するメソッド

```objc
if (UIApplicationStateActive == [[UIApplication sharedApplication] applicationState]) {
    NSLog(@"Active");
} else if (UIApplicationStateInactive == [[UIApplication sharedApplication] applicationState])  {
    NSLog(@"Inactive");
} else if (UIApplicationStateBackground == [[UIApplication sharedApplication] applicationState])  {
    NSLog(@"Background");
}
```
スプレッドシートからIssueを簡単につくる

課題管理表から簡単にマークダウンののtodoリストを作ります
google apps script で記述しました。

## こんな感じで使う

#### スプレッドシート

|No. | 担当者 | 記載日 | 優先度 | 内容 |
|----|--------|-------|--------|---------|
| 101 | ryoichi | 12/1 | 高い | デザイン崩れている |
| 102 | ryoichi | 12/1 | 低い | なおしたい |
| 103 | ryoichi | 12/1 | 高い | A機能が使えない |

#### No.指定する
![スクリーンショット 2014-11-30 19.22.55.png](https://qiita-image-store.s3.amazonaws.com/0/61095/a833aa16-70ca-441b-d058-b18ae47a5a38.png)

↓↓↓↓↓↓↓↓↓↓↓↓

#### 出力

```
## TODO

- [ ] 101 デザイン崩れている 
- [ ] 103 A機能が使えない
```
 
## TODO

- [ ] 101 デザイン崩れている 
- [ ] 103 A機能が使えない





## 利用時に指定するところ(太文字）

var sheet = spreadsheet.getSheetByName("**課題管理表**");
var numColumn = sheet.getRange("**A:A**");
var issueColumn = sheet.getRange("**E:E**");

## google apps script側の記述

```js
// 共通で使う変数
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getSheetByName("課題管理表");
var numColumn = sheet.getRange("A:A");
var issueColumn = sheet.getRange("E:E");
var outputIssue = '## TODO\\n\\n';

function createTemplate() {
  var selectNums = Browser.inputBox('課題番号を半角スペース区切りで入力してください').split(' ');
  var nums = numColumn.getValues();
  nums.forEach(function(numValue, numKey){
    selectNums.forEach(function (selectNum, selectKey) {
      if (numValue == selectNum) {
        outputIssue += '- [ ] ' + selectNum + ' ' + __getTaskIssue(numKey + 1) + '\\n';
      }
    });
  });
  Browser.msgBox(outputIssue);
}

function __getTaskIssue(row) {
  var issueCell = issueColumn.getCell(row,1);
  var taskIssue = issueCell.getValue();
  return taskIssue;
}
```


または、

ライブラリ化したものを利用

`プロジェクトID：MQx0pAC-UJO9GDDq-rDgAC3DYwt5342Wb`
インポートして、**課題管理表**、**A**、**E**の部分を指定して実行


```js
function makePullRequestTemplate() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("課題管理表"); 
  common.createTemplate(sheet, 'A', 'E');
}
```
AndroidのActionMenuViewを使う

Material DesignでActionbar以外のところでもPopupMenuを出すメニューが使われているなと思い調べてみると、API 21からActionMenuViewというのが追加されていました。
AppCompatにも追加されているようで、v7以上で使用できるようです。

![Rectangle 1.png](https://qiita-image-store.s3.amazonaws.com/0/8932/588b2abf-fb50-8ab0-4411-c6a7f521aa81.png "Rectangle 1.png")
（↑みたいなCardViewの要素に置かれてたりしてますね）

## 使い方
通常のViewのようにxmlで定義することが出来ます。

```xml
<android.support.v7.widget.ActionMenuView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/action_menu">
</android.support.v7.widget.ActionMenuView>
```

setPopupThemeで表示されるメニューのテーマをセットできます。

```java
mActionMenuView.setPopupTheme(R.style.ActionMenuViewStyle);
mActionMenuView.getMenu().add(Menu.NONE, 1, Menu.NONE, "メニュー1");
mActionMenuView.getMenu().add(Menu.NONE, 2, Menu.NONE, "メニュー2");
mActionMenuView.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
	@Override
	public boolean onMenuItemClick(MenuItem menuItem) {
		int itemId = menuItem.getItemId();
		switch (itemId) {
			case 1:
				// 処理内容
				break;
			case 2:
				// 処理内容
				break;
		}
		return false;
	}
});
```


下のように中の要素の色を変えたい場合どうしたらいいんだろうと悩んでいたのですが、
android:textColorSecondaryをスタイルに設定したら変更できました。
![actionmenuview.png](https://qiita-image-store.s3.amazonaws.com/0/8932/f2572738-e6fa-6ec5-c394-a74eeb5c739e.png "actionmenuview.png")

動的に色を変更したい場合ってどうしたらいいんだろう。。。
内部的にはPopupMenuを呼んでるだけみたいなので、自分で作るしかないのかな。。。

## 参考文献
Android: Changing the Toolbar’s text color and overflow icon color
http://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
Tweetings for Android and Material Design
http://www.tweetings.net/site/2014/10/tweetings-android-material-design/
Akkaを使ってみる。

Akkaを使って、非同期処理を行ってみる。

# 全容

https://github.com/FScoward/hide-and-seek

# 抜粋

## 使われる側
Actorを継承したクラスを作成。
senderで非同期で結果を返却する。

```scala
class TwitterActor extends Actor {
  def receive = {
    case x: Int => {
      Thread.sleep(10000)
      sender ! "Success"
    }
    case _ =>
  }
}
```

## 使う側
? と onComplete で非同期に処理結果を受け取れる。
成功時は Success に 失敗時は Failure に流れる。

```scala
      (actor ? 1).onComplete {
        case Success(s) => stack.push(new Tweet("test", 1920, 20))
        case Failure(_) => println("failure")
      }
```

# 注意
`implicit val timeout = Timeout(1000 seconds)`
とか
`import scala.concurrent.ExecutionContext.Implicits.global`
を書かないとエラー出ちゃう=͟͟͞͞⊂( ’ω’ )=͟͟͞͞⊃ ﾎﾞﾎﾞｯ
Micropolisのctyファイルをブラウザ上でJSONに変換して扱えるライブラリを作成しました

Cty2JSON: https://github.com/tom-konda/cty2json

## これは何？
Micropolisのcty形式のファイルをJavaScriptを使用し、JSONに変換します。

##対応ブラウザ
* Firefox、Chromiumで動作確認
* IE 10.0+、Google Chrome、Opera、Safari はおそらく動作するはず

##使い方
WebWorkerで外部から呼び出されることを想定して作成しています。
呼び出し方は以下のようになります。

```js
//Worker生成
var worker = new Worker('//path.to/cty2json.js');

worker.addEventListener(
    'message', 
    function(e) {
        // 変換されたJSONの処理
    },
    false
);
worker.addEventListener(
    'error', 
    function() {
        // エラー処理
    },
    false
);

worker.postMessage(cityBinData);
```

もし、Web Workerを使わない場合は以下の呼び出し方になります。

```js
Cty2JSON.analyzeData(cityBinData);
```

##データ構造
<pre>
root
├ fileSize
├ historyDatas
├ miscDatas 
└ tileDatas
</pre>
##デモ
[ctyファイルを読み込んで都市データの表示](http://jsdo.it/tom-konda/cty2json_demo)

##よくありそうな質問
**ctyファイルはどうやって作成するの？**

[Micropolis](http://code.google.com/p/micropolis/) で都市を新規作成し、保存すればctyファイルが作成されます

##謝辞
オープンソースの都市開発シミュレーションゲームであるMicropolisを作成したDon Hopkins氏およびにMicropolisのベースとなった都市開発シミュレーションゲームを作成したWill Wright氏に多大な感謝をいたします。

##ライセンス
ライセンスはGPLv3になります。
CATextLayerの上下中央揃え


**CATextLayer** の上下中央揃えにはまっていましたが、なんとかうまい具合に行きそうなのでちょっと書いてみます。CATextLayerの左右中央揃えはメソッドも用意されていてすぐできるんですが、上下中央は情報も少なく（あってもちょっとトリッキー）、そこまで完璧を求めていなかったのでシンプルに出来る方法を探りました。

## 前提

- CAShapeLayerで作成した **shapeLayer** があります。そして、そのframeは **bodyRect** という変数で宣言しています。
- bodyRectのサイズは常に変わるので、textLayerのサイズを固定にすることはできません。
- shapeLayerの上に上下左右中心に揃えたテキストを置きたいと思っていました。

## どんなことをやったか

textの表示領域を取得して、CATextLayerのサイズをその領域に書きだすことで上下中央に配置する。

## 説明付きコード

```swift
// とりあえず、fontと表示したいテキストを用意
let font = UIFont.systemFontOfSize(20.0)
let text = "T"

// 上記で用意したfontを利用した場合のテキストのサイズを取得
var attributes = [NSObject: AnyObject]()
attributes[NSFontAttributeName] = font
let size = text.sizeWithAttributes(attributes)

// テキストのサイズから表示するframeを作成
let x = CGRectGetMinX(bodyRect) + (CGRectGetWidth(bodyRect) - size.width) / 2
let y = CGRectGetMinY(bodyRect) + (CGRectGetHeight(bodyRect) - size.height) / 2
let height = size.height
let width = size.width
let frame = CGRectMake(x, y, width, height)

// CATextLayerを作っていきます。
let textLayer = CATextLayer()
textLayer.string = text
textLayer.font = font
// 解説1
textLayer.fontSize = font.pointSize
textLayer.foregroundColor = UIColor.whiteColor().CGColor
textLayer.frame = frame
// 左右中央揃えです
textLayer.alignmentMode = kCAAlignmentCenter
// スケールの調整
textLayer.contentsScale = UIScreen.mainScreen().scale
shapeLayer.addSublayer(textLayer)
return shapeLayer
```

## 解説1

`textLayer.font = font`でフォントを指定しているのでサイズもセットしているのかなと思っていたら、ちゃんとtextLayer.fontSizeで指定しないと反映されませんでした汗　これが原因で1.5時間ははまった〜。

## 全体を通して

とりあえずの方法です。でも、助かる人もいるかなと思ってコミュニティにシェアしました。もっとしっかりfontのbaselineの調整などもやったほうが正確かもしれませんが。
Ubuntu設定

Ubuntu設定メモです。

#Package System(apt-get)
##パッケージシステムから、「名前」を検索
aptitude search　名前
インストールしたいツール類の名前の検索とか...

### ツール更新とか
sudo apt-get update 
sudo apt-get upgrade

#Font
##プログラマ向けフォントinconsolataをインストール

~~sudo add-apt-repository ppa:myunity/ppa~~
~~sudo apt-get update~~
~~sudo apt-get install myunity~~
~~sudo apt-get install fonts-inconsolata~~
get http://levien.com/type/myfonts/Inconsolata.otf
cp Inconsolata.otf ~/.fonts

#Virtual Window設定
##仮想ウインドウを有効設定
「システム設定」ー「外観」ー「挙動」タブ
　　＝＝＞「ワークスペースを有効にする」にチェック

##仮想ウインドウの縦横の数を設定
(Memo) **compizconfig-settings-managerの導入が必要**

インストール
sudo apt-get install compizconfig-settings-manager

起動方法
サーチ画面で、「CompizConfig Settings Manager」を呼び出す

「一般」ー「一般オプション」ー「デスクトップサイズ」

#OneDrive(旧SkyDrive)
##OneDrive
(Memo)**Ubuntu 14.10で確認**
下記からダウンロード
Sync With OneDrive in Ubuntu Via OneDrive-D (Unofficial Client)
http://ubuntuhandbook.org/index.php/2014/06/sync-with-onedrive-in-ubuntu-via-onedrive-d-unofficial-client/

sudo ./inst install
（このあとGUIが立ち上がって、OneDrive設定画面が出るのでMicorosoftアカウント入力）
![Screenshot from 2014-11-24 14:56:21.png](https://qiita-image-store.s3.amazonaws.com/0/42377/b2da1635-94f2-1c02-dd4e-138ae12f98f1.png)

手動で同期を取る
sudo onedrive-d

GUI設定ツールを起動
onedrive-prefs

確認
(Memo) **gitからのダウンンロードではうまく動かなかった**
git  clone  https://github.com/xybu92/onedrive-d.git　
./setup.py install?

#Emacs Setting
## 日本語入力「Mozc」を使う
### インストール
sudo apt-get install emacs-mozc emacs-mozc-bin 
### macs設定ファイルのMozc設定の追記
「~/emacs.d/.init.el」，「~/.emacs」等に
下記を追加
(require 'mozc)
;; or (load-file "/path/to/mozc.el")
(set-language-environment "Japanese")
(setq default-input-method "japanese-mozc")

##Emacs の「Mark+Set(Ctrl-Space)」と Mozcの「日本語入力モード切替え」のアサインが衝突する問題
Mozcの入力メソッド設定画面
「全体の設定」タブー「入力メソッドのオンオフ」を

 Zenhakuhankaku...[全角／半角]キーに割当てに(Alt＋kanjiでもお好きに設定)、変更

(Memo)**.Xdefaults, .Xresourcesなどの設定に、下記を記載しておいて、
”xrdb ~/.Xresources”実行で設定反映する方法はうまく行かなかった**
 「Emacs*UseXIM: false」

# Programming
##boost
Package Systemに入っているので、そのままインストール
sudo apt-get install libboost-all-dev 

# etc...
##Telnetサーバー
1)inetutilsとtelnetdをインストール
  sudo apt-get install inetutils-inetd
  sudo apt-get install telnetd
2)接続を許可するホストまたはネットワークを設定する。
   sudo gedit /etc/hosts.allow
　 最下行に次の行を追加する。

  「in.telnetd: 192.168.6.」...192.168.6.**系の場合

3)サービスを起動する。
  sudo /etc/init.d/inetutils-inetd start
  または
  sudo /etc/init.d/inetutils-inetd restart
Androidで画像に合ういい感じの色を見つけてくれるPalette Libraryを使う


新しくSupport Libraryに追加されたPalette Libraryを使ってみました。
Palette LibraryはBitmapを渡すと、その画像に合う背景色、タイトルカラー、テキストカラーを返してくれます。
![スクリーンショット 2014-11-30 18.31.38.png](https://qiita-image-store.s3.amazonaws.com/0/8932/fde9779f-3a6b-f174-5d51-98ad1fe3783b.png "スクリーンショット 2014-11-30 18.31.38.png")


## 導入
Gradleを使っている場合はbuild.gradleにPalette Libraryに追加します。

```
compile 'com.android.support:palette-v7:21.0.0'
```

## 使用方法
Palette.generateとPalette.generateAsyncの2種類がありますが、適している方を使います。

```java
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
	public void onGenerated(Palette palette) {
		if  (palette != null) {
			Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
			if (vibrantSwatch != null) {
				mVibrantContaienr.setBackgroundColor(vibrantSwatch.getRgb());
				mVibrantTitleView.setTextColor(vibrantSwatch.getTitleTextColor());
				mVibrantText.setTextColor(vibrantSwatch.getBodyTextColor());
			}
		}
	}
});
```

本当に渡すだけでいい感じの色を選んでくれます。
SwatchはVibrant(鮮やか)とMuted（落ち着いた）、さらにそれぞれのLightとDarkがあります。
デザインに合うものを選べばいいと思います。
また、色情報が見つからない場合、Swatchにnullが返ってくるので、返ってこなかった場合のことも考えておく必要はありそうです。

内容がないクソみたいなサンプルも作ってあるので、よかったら見てみてください。
https://github.com/kazutoyo/PaletteSample

APKのバイナリもつくってあるので実機で試せます。
[APK]
![](https://github.com/kazutoyo/PaletteSample/raw/master/qrcode.png)
メモ: AtomicHost, Ceph, OpenStackググってみた

# AtomicHost

* [tsunokawaのはてなダイアリー](http://tsunokawa.hatenablog.com/category/Docker)が詳しい。

## 実際に動かしてみた

* [Index of /rolling/7](http://buildlogs.centos.org/rolling/7/)から`CentOS-7-x86_64-AtomicHost-20141029_02.qcow2.gz`をダウンロード、解凍して起動。

![スクリーンショット 2014-11-30 18.03.47.png](https://qiita-image-store.s3.amazonaws.com/0/25728/70ed769e-c34f-077c-5f61-5dcdd836e3c6.png)

激しくエラーが出るが、cloud-initを使用していないためだと予想。

[Atomic HostのCentOSイメージをVirtualBoxで動かしてみる - tsunokawaのはてなダイアリー](http://tsunokawa.hatenablog.com/entry/2014/11/18/181047)を参考にinit.isoを作成、マウントして起動。

# Ceph

* [Ceph Server - Proxmox VE](http://pve.proxmox.com/wiki/Ceph_Server#Recommended_hardware)によると、10Gbpsのネットワークがないと辛い様子。全部ネットワーク経由でデータの出し入れするなら納得。
  * 10Gbpsなど持っていないので断念。
  * 最低3台構成。

* [High Availability Virtualization using Proxmox VE and Ceph - Jacksonville Linux Users Group](http://www.jaxlug.net/wiki/2014/07/16)

# OpenStack

* 完全仮想化
* 今までHAの自動構成は無かった。
  * [Suse Cloud 4](https://www.suse.com/ja-jp/products/suse-cloud/how-to-buy/)が初の対応のようですが、有料・・・。

# GlusterFS

* ISOイメージを共有する程度に使う。
Python と ruby のスライス memo


Python と ruby を行ったり来たりすると、混乱するのでメモ

* ruby

配列のインデックス番号

```ruby
irb(main):014:0> a = [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
irb(main):024:0> a[0..3]
=> [1, 2, 3, 4]
irb(main):018:0> a[1..3]
=> [2, 3, 4]
```

* python

ポインターの指す場所

```python
In [3]: a
Out[3]: [1, 2, 3, 4, 5, 6, 7, 8, 9]

In [4]: a[0:3]
Out[4]: [1, 2, 3]

In [5]: a[1:3]
Out[5]: [2, 3]
```
デザイナを使用してEclipseでJavaFX8開発をする

##概要
JavaFX8を使用したアプリケーションを、デザインはScene Builder 2.0、コードはEclipseを使用して作成するため、各種インストール・設定を実施する。([参考のソース](https://github.com/xaatw0/Calculator))
##ファイルのダウンロードとインストール
・Eclipse
JDK8が入っているもの(4.4以上？)

・Scene Builder 2.0(JavaFX8のデザインをGUIで作成する)
http://www.oracle.com/technetwork/java/javase/downloads/sb2download-2177776.html
msiをクリック(ソースからコンパイル)

http://gluonhq.com/open-source/scene-builder/
から実行ファイルをダウンロードできる。

・e(fx)clipse(EclipseとScene Builderを関連付ける)
メインサイト
http://www.eclipse.org/efxclipse/install.html

新規ソフトウェアのインストールで指定するURI
http://download.eclipse.org/efxclipse/updates-released/1.0.0/site

##EclipseでScene Builderの設定をする
・「ウィンドウ→設定→JavaFX」のScenBuilder executableを（デフォルトから変更してなければ）「C:\Program Files (x86)\Oracle\JavaFX Scene Builder 2.0\JavaFX Scene Builder 2.0.exe」と設定する

##EclipseでJavaFXのアプリケーションを作成する
・「ファイル→新規→その他」の新規ウィザードより、「JavaFX→JavaFX Project」。
・プロジェクト名を入れて、次へ、次へ
・Application type: 言語:FXML Desktop Root-type: javafx.scene.layout.BorderPane

・Main.javaを「右クリック→実行→Javaアプリケーション」で空のアプリケーションが起動される

・Sample.fxmlを「右クリック→Open with SecenBuilder」でレイアウトを編集する

##簡単なアプリケーションの流れ
・SecenBuilderにて外観を作成する
「Containers→Pane」上には、自由にコントロールを配置できるので、便利です。
(以前のJavaはVisual Studioみたいにはコントロールを配置できませんでしたが、ついに追いついたという感じがします。
ウィンドウのサイズ変更が謎の挙動ですが、、、)

・SampleController.javaにprivate変数でコントロールの名前を定義する。

```java:SampleController.java
	@FXML private Button btn0;
	@FXML private TextField text;
```
などと書く。

・SampleController.javaにイベントを定義する。

```java:SampleController.java
    @FXML
    public void onbtnNumberClicked(ActionEvent event) {

    	Object obj = event.getSource();
    	Button btn = (Button)obj;

    	String str = text.getText();
    	text.setText(str + btn.getText());
    }
```

イベントはだいたい「public void methodName(ActionEvent event)」の型で定義するようです。

・SecenBuilderでコントロールの名前とイベントを設定する
コントロールをクリックし、「Code→fx:id」の右をクリックする。使用する名前を選択する。
コントロールをクリックし、「Code→On Action」の右をクリックする。使用するイベントを選択する
「File→Save」で保存する

・Main.javaを「右クリック→実行→Javaアプリケーション」で実行する。

##Visual Studio系との比較(現時点での私見)

・コントロールとコーディングの順番が逆
Visual Studioの場合、デザインをし、ボタンをダブルクリックして、ボタン用のコーディングを開始する。Scene Builderの場合、コーディングしてから、デザイナのボタンのイベントと結びつける。

・JavaFX8の方が、MVCを分けやすい
Visual Studioはボタンとそれに関する処理を一つのソースに納めがち。
Scene Builderの場合、ボタンの処理をJavaで書き、それの動作をFXMLに書くので、分けやすい気がする。

*デザイナがEclipseと別になっているので、デザイン時に軽い(ような気がする。大きなプログラムは作ってないので、不明)

*Visual Studioの方がデザイナーとして、使いやすい。JavaFX初心者なので、ウィンドウのサイズ変更がよくわからない。


##まとめ
ようやく？公式のJavaでVisualStudioのデザイナのような開発方法ができるようになりました。Javaのクライアントが採用されていくことと、Scene Builderでデザインしやすくなっていくことを期待します。
bl.ocks.org に記事を投稿する

D3.js の作者 Mike Bostock 氏の最新サンプルが多数見られる bl.ocks.org ですが、GitHub アカウントを持っているユーザならば誰でも投稿が可能です。
`http://bl.ocks.org/<GitHub id>` にアクセスすれば、過去に自分の書いた gist を自動的に取ってきて表示されると思います。

自分も時々投稿しています。
http://bl.ocks.org/osoken

![osokensblocks.png](https://qiita-image-store.s3.amazonaws.com/0/51853/5b326c3c-0116-c808-6bcc-38d863a7c79f.png)

# 手順

1. public gist を新規に書く
  * ファイルは何でもいいけど、`index.html` が良さそうです
  * [Gist description] は記事のタイトルとして扱われます。blocks一覧に表示されるのと、blocksのタイトルとして使われます。
2. gist を `clone` します
3. `readme.md` と `index.html` と `thumbnail.png` をリポジトリ内に作って `push` します
  * `readme.md` は blocks の `iframe` のすぐ下に説明文として表示されます
  * `index.html` は blocks の `iframe` 内に展開されます。解像度は `960px*500px` です（固定？）
  * `thumbnail.png` は blocks 一覧の表示に使われます。解像度は `230px*120px` です
  * 同じ gist 内であれば、相対パスでアクセスできます。データを gist に一緒に置くことが多い
  * 異なる gist のリソースにアクセスするには `/<GitHub id>/raw/<gist id>/<リソース名>` でできます

# Tips

## ローカルで blocks に似たディレクトリ構成を再現する

ローカル環境に bl.ocks.org と同じディレクトリ構成を作って localhost を立てるとデバグやサムネイルの生成が楽です。自分は `gist/<GitHub id>/raw/` に gist を `clone` しています。自分の今のディレクトリ構成はこんな感じ。

```
gist/
  └ osoken/
      └ raw/
         ├ 8fd61d9bf581691a794a/
         |   ├ data.json
         |   ├ index.html
         |   ├ readme.md
         |   └ thumbnail.png
         ├ 9e5ec69346e972c54884/
         |   └ ...
         └ ...
```

そしてgistディレクトリが`/`になるようにlocalhostを立てています。

```
[osoken@somewhere gist]$ python -m SimpleHTTPServer
```

こうしておくと、他の gist のリソースのURLがblocks上でのURL, `/<GitHub id>/raw/<gist id>/<リソース名>` と一致します。例えば `8fd61d9bf581691a794a` で使った`data.json`を他のgistでも使いたいときは `/osoken/raw/8fd61d9bf581691a794a/data.json` で利用できる、という感じです。

## サムネイルの生成
[`phantomjs`コマンド](http://phantomjs.org/) が便利です。Web ページのスクリーンショットを撮ってくれる [`rasterize.js`](https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js) というスクリプトが同梱されているので、それを使って`960px*500px`で作ってから`imagemagick`の`mogrify`コマンドで`230px*120px`に縮小しています。

```
[osoken@somewhere gist]$ phantomjs rasterize.js http://localhost:8000/osoken/raw/8fd61d9bf581691a794a/ osoken/raw/8fd61d9bf581691a794a/thumbail.png  960px*500px
[osoken@somewhere gist]$ mogrify -resize 230x120 osoken/raw/8fd61d9bf581691a794a/thumbnail.png
```
jsをインクルードするだけでシェアボタンが追加できるShareButton

http://sharebutton.net/

導入はとっても簡単。

```
<script src="//sharebutton.net/plugin/sharebutton.vertical.js"></script>
```

もしくは

```
<script src="//sharebutton.net/plugin/sharebutton.horizontal.js"></script>
```

をhtmlに追加するだけ。
AWSで独自ドメインを設定したい。

# はじめに

「これは、素人がAWSを使ってWebサービスを生み出す過程の、自分用メモでございます。」

今の僕の状態は、以下の通り。

* AWSアカウント開設
* EC2インスタンスをローンチ
* SSH接続をできるようにして
* セキュリティグループに「Tyep:HTTP/PortRange:80」を追加
* SSH接続後に、LAMPインストール完了で、Public IPをブラウザで叩いてアクセスできるようになった。

今回やりたいのは、

**独自ドメイン（お名前.comで取得済み）と、IPアドレスに紐づける！**

です。

# まずは「Elastic IP」を設定する。

最初は、Public IP（PIP）が設定されていて、Elastic IP（EIP）は設定されていません。

PIPは時間が経つと変わっちゃうみたいで、EIPを設定しておかないと独自ドメイン設定できないっぽい（詳細しりませんが。。）ので、これを設定します。イージーです。

## EIP設定方法

* EC2ダッシュボードのサイドメニュー「Elastic IPs」クリック
* 「Allocate New Address」をクリック。そうするとEIPが取得できます。
* 「Associate Address」をクリックして、作ったインスタンスを選択すれば完了！

超イージーです。

# つづいて「Route 53」の設定

これはDNSらしいので、これで、取得しているドメインとEIPを紐づければイケそうです。

設定方法はコチラ下。
http://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/MigratingDNS.html
http://blog.higemegane.com/2014/01/wp_with_aws2/
http://recipe.kc-cloud.jp/archives/447

これもとても簡単です。ボタンポチポチして、取得してあるドメイン名とEIPを指定の場所に入力したら終わりです。

（いざ反映される時間がクソ長いなぁとか思って調べてみると「TTL」とかの設定が潜んでいて、やっぱり難しいと感じている。。）

# さて、いざ、独自ドメインにアクセス！

「。。。まだ反映されていない。。」

ちょっと時間かかるようです。しばらく待ってみたいと思います。

しばしお待ちください。


# Route 53 のネガティブキャッシュについて！

いやはや、危ないところでした。上記設定で、あとは少しすれば、独自ドメインでアクセス可能かと思いきや。。。ですよ。

### 僕がやりたかったこと

* もともとサクラのレンサバで「rumcode.net」（独自ドメイン）を使用していて
* 今回Route53へ移行

### 問題

* なかなか独自ドメイン「rumcode.net」にアクセスして反映されないこと

### 原因＆解決策

![スクリーンショット 2014-11-30 17.21.09.png](https://qiita-image-store.s3.amazonaws.com/0/45822/864542bf-9688-085a-4abb-e2fae212e6d7.png)

Route53ダッシュボードで、「Go to Record sets」をクリックすると、上のようにレコードセットの情報が見れます。

この**TTL**が、キャッシュする時間らしいのです。でもともとの設定だと48時間とかになっていたりします。（そうすると全然、DNSの設定が反映されません。。）

なので、やることは、Type[A]と[SOA]（これらの意味は知りませんけど（涙））のレコードでTTLを300（秒）とかにしてやります。そうすると5分待てば、反映されます！


### iTermからの調べ方メモ

まずは、そもそも独自ドメインrumcode.netにEIPが紐づけられているのか知りたかったので、

```zsh:ドメインからIPを調べる
nslookup rumcode.net

# Server:		192.168.1.1
# Address:	192.168.1.1#53

# Non-authoritative answer:
# Name:	rumcode.net
# Address: 54.64.192.149
```

五分後には、上のようにEIPに紐づけられましたが、その前はAddressが昔のsakuraのものでした。orz。

それから、ネームサーバーの情報を調べるコマンド。
（AWSのダッシュボードからも見れますけど。。黒い画面から見ると無駄にテンションあがるので！）

```zsh:
dig -t soa rumcode.net
```

そうすると長い情報が帰ってくるのですが、中腹に下記のような記載があります。これで、TTLが300になっていることが確認できます。

```zsh
# rumcode.net.        300 IN  SOA ns-300.awsdns-37.com. awsdns-hostmaster.amazon.com. 1 7200 900 1209600 86400
```

**「SOAってなんですか？？」**

http://www5e.biglobe.ne.jp/%257eaji/3min/64.html

上記のサイトにとても分かりやすく説明が載っていそうだ。。。！神だ！！

しかし、む、難しい。。DNSのリソースレコードタイプについては、別途勉強を致します。

本日はここまで。有り難うございました。