OmniAICreator/Qiita-1.07M huggingface dataset:
【CSS】上下中央揃いにするCSS一覧


```html

.box {
  border-radius: 4px;
  border: 1px solid #E63E3E;
  width: 300px;
  height: 200px;
}

```

上記のHTMLを記載し、こちらを上下中央揃いにするCSSを記載していく。

##Flexbox

```css

/* Flexbox */
body {
  height: 100%;
}
  
main {
  display: flex;
  justify-content: center;
  align-items: center;
}

```

##Transform

```css

/* transform */
body {
    position: relative;
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
}

```

##絶対配置して上下中央を0 

```css

body {
    height: 100%;
}

main {
    position: relative;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

```

##ネガティブマージン

```css

body {
  height: 100%;
}

main {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

```



##まとめ
ブロック要素を上下中央揃いにするCSSの一覧でした。
[Swift] RealmSwift 使い方編

#目的
[前回:[Swift] RealmSwift 導入編](http://qiita.com/touyu/items/522f869d88ab4bd83cf2)の続き
RealmSwiftの使い方について紹介

#使い方

##マイグレーション
まず最初に、AppDelegate.swiftにマイグレーションについて記述。

```swift
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?)
```
内に記述していきます。

```swift:AppDelegate.swift
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        
    let config = Realm.Configuration(

        // 最初は0が設定されています
        schemaVersion: 0,          
       
        // マイグレーション処理
        migrationBlock: { migration, oldSchemaVersion in
            if (oldSchemaVersion < 1) {
            }
    })
        
    // 新しい設定を適用します
    Realm.Configuration.defaultConfiguration = config
        
    return true
}
```

##スキーマ定義(データベースの構造)
次に、データベースの構造を定義。
以下のようなクラスを作成。

```swift:SaveData.swift
import RealmSwift

class SaveData: Object{
    
    // 数値
    dynamic var id = 0
    
    // 文字列
    dynamic var str = ""
    
    // Image
    dynamic var image = NSData()
    
    //プライマリーキー設定
    override static func primaryKey() -> String? {
        return "id"
    }   
}
```

##データの追加
データベースにデータを追加するための関数を作成

```swift:ViewController.swift
import UIKit
import RealmSwift

class ViewController: UIViewController, UITextFieldDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
         
        addData()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func addData() {
        // インスタンス化
        let saveData = SaveData()
        let realm = try! Realm()
        
        saveData.id = 0
        saveData.str = "first data"
        
        // トランザクションを開始して、オブジェクトをRealmに追加する
        try! realm.write {
            // update true=上書きOK false=上書きNO
            realm.add(saveData, update: true)
        }
    }
}
```

##データを表示
このままでは、追加されたかどうかもわからないのでデータを表示するための関数を作成

後日記述
Bitbucketでチームリポジトリにpushした時に出てくるwarningの対処

Bitbucket のチームリポジトリに `git push` すると以下の様なワーニングが出ててずっとうざかったんだが、原因が分かったのでメモ。

# どんな現象か

以下のように `git push` する度に bitbucket が警告を出してくる。

```shell-session:remoteの部分が赤字で出てくきてうざい
$ git push
ounting objects: 6, done.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (6/6), 668 bytes | 0 bytes/s, done.
Total 6 (delta 3), reused 0 (delta 0)
remote:
remote: Warning!
remote: Your account does not have an email address associated with it.
remote: Please set one by visiting https://bitbucket.org/account/user/<team>/email/
remote:
To git@bitbucket.org:<team>/<repo>.git
   5376f0b..6e707e5  master -> master
```

- あるチームのリポジトリにpushするときだけ出て、他チームや個人リポジトリへのpushでは出ない
- 表示されてるURLを開くと「チームへのメールアドレスの追加はもうサポートされていません」と表示されるのみで解決しない
- 同じリポジトリでも警告が出る時と出ない時がある（これも謎だった）

# 原因判明：チームに設定されたSSHキーのせいだった

どうやらBitbucketユーザではなくチームに紐付けられたSSHキーでpushするとそのキーにはメールアドレスが紐付いていないので怒られるようだ。そしてチームへのメアド追加はもうサポートしなくなったのでエラー見ても解決方法が分からずに悩まされていたわけだ。

対応としては、チームに設定されたSSHキーを削除してアカウントに紐づく鍵でpushしたらワーニングが出なくなった。


で、

> 同じリポジトリでも警告が出る時と出ない時がある（これも謎だった）

の原因も同時に分かった。

個人アカウントについてる自分の鍵とは別に、仕事用に昔作った鍵があってそれがチームの方に設定されていたのだ。
で、キーエージェントに `ssh-add` された順番によって、仕事用の鍵と個人用の鍵がチャレンジされる順番が違う時があって、たまたま個人キーを先にaddしていたときには警告が出ず、仕事用のキーが先にaddされていた時だけ警告が出ていたというオチだった。
第5話 道にカバンが落ちている！

**落し物は、交番まで！**

太郎と次郎が、街はずれを歩いているときに、道端に大きなカバンが落ちているのを見つけました。

さあ、どうするんだ！という状況をコード化しました。

ガチャみたいに一定確率でなんか出てくる仕組みを作るために、確率表を作成します。

```php:init.php
$rankTable = [
	[ "品質ランク" => 1, "個数" => 840 ], // 84.0%
	[ "品質ランク" => 2, "個数" => 100 ], // 10.0%
	[ "品質ランク" => 3, "個数" =>  50 ], //  5.0%
	[ "品質ランク" => 4, "個数" =>   6 ], //  0.6%
	[ "品質ランク" => 5, "個数" =>   3 ], //  0.3%
	[ "品質ランク" => 6, "個数" =>   1 ], //  0.1%
];
```
上のコードで、個数を足すと1000になるので、1000個のくじ引きを配列で作成します。

```php:init.php
$gacha = [];
foreach($rankTable as $rank) {
	for ($loop = 0; $loop < $rank["個数"]; $loop++) {
		$gacha[] = $rank["品質ランク"];
	}
}
shuffle($gacha); // これいらないかもｗ
```
このくじ引きを適当に引けばいいわけで、

```php:gacha.php
echo "太郎は、カバンが落ちているのを見つけた。<br>";
echo "そっと開いてみる...<br>";		
switch ($gacha[mt_rand(0, count($gacha)-1)]) {
	case 1: $treasure = "<font color=gray>折れた枝</font>";   break;
	case 2: $treasure = "<font color=green>竹ぼうき</font>"; break;
	case 3: $treasure = "<font color=green>錆びたノコギリ</font>"; break;
	case 4: $treasure = "<font color=blue>きれいな竹刀</font>"; break;
	case 5: $treasure = "<font color=blue>金属バット</font>"; break;
	case 6: $treasure = "<font color=red>サバイバルナイフ</font>"; break;
}		
echo "太郎は、" . $treasure . "を手に入れた！<br><hr>"; 
```
※銃刀法に反しないようにサバイバルナイフは出にくくなってます（謎）

なんだかなぁ...もっといい方法あります？
Vim って何の略？ 

# 回答

**V**i **IM**proved の略だ。
「Vi の改良版」という意味。

# じゃあVi は何の略?

- Visual
- Visual display 
- Visual editor

など諸説ある模様。
Visual の頭文字であることは間違いないようだ。

# 参照

- https://en.wikipedia.org/wiki/Vi
- http://people.cis.ksu.edu/~bhoward/vi/vi10.html
- [Vim - Wikipedia](https://ja.wikipedia.org/wiki/Vim)
- [Liunxのviは何の略なのでしょうか？](http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1145968566)



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
ghqで複数のリポジトリ管理をスマートに行う

gitコマンドでクローンしていたのですが、便利なghqを教えてもらったので記載しておきます。

#ghqとは
gitを使っているとgithubやgithubEnterpriseなど複数のリポジトリを管理することがよくあるとおもいます。そんなときにソースの置き場とcloneを楽にするツールがghq。下記画像にあるようにcloneするとディレクトリ構造を自動で作成してくれるため、どのドメインのソースをクローンしたのかわかりやすいです。ちなみにcloneに特化しているため、checkoutやpushなどの機能はありません。

![スクリーンショット-2016-02-09-13.55.52.png](https://qiita-image-store.s3.amazonaws.com/0/59560/26ef0d71-4eef-92a1-372b-b2bd3687b28b.png)

#Goをインストール
```
brew install go
echo 'export GOPATH=$HOME' >> ~/.bashrc
echo 'export PATH=$PATH:$GOPATH/bin' >> ~/.bashrc
source ~/.bashrc
```
私はbashrcで管理していますが、他のファイルを利用している方は名前を変えていただければと思います。

#ghqをインストール
```
go get github.com/motemen/ghq
```


#ghqの管理ディレクトリを設定
```
git config --global ghq.root ~/src
```
ghqで管理するrootディレクトリを設定できます。私の場合は~/srcではなく~/Developmentにしました。

#ghqでcloneする
```
ghq get リポジトリパス
```

便利ですね！
Docker Engineを1.9.x(orより古い)から1.10.xにアップグレードするときは、ストレージのマイグレーションをしておく


まるっと破棄して作りなおす場合には問題ないが、更新をする場合は事前にマイグレーションしておいたほうがよいみたい。

> このマイグレーションなしでも、更新後の起動時に自動実行されるようです。ダウンタイムを節約したい場合にこの手順が有効。

インストーラで更新しようとしたら、警告。

```
If you installed the current Docker package using this script and are using it
again to update Docker, we urge you to migrate your image store before upgrading
to v1.10+.

You can find instructions for this here:
https://github.com/docker/docker/wiki/Engine-v1.10.0-content-addressability-migration
```

こちらを参照しろとのことだ。あーそんな感じのこと、ブログで言うてたな。。

https://github.com/docker/docker/wiki/Engine-v1.10.0-content-addressability-migration


マイグレーションツールもDockerで動かせる、更新前に起動中のDocker1.9系を使い、マイグレーションを行なう。

```
docker run --rm -v /var/lib/docker:/var/lib/docker docker/v1.10-migrator
```

その後、1.10系に更新すればOK。
[Swift] RealmSwift 導入編

#目的
RealmSwiftを導入する。

#導入方法
とりあえず、Xcodeで適当なプロジェクトを作成する。

そのプロジェクトまでターミナルで移動し

```
pod init
```
でPodfileを作成
次にPodfileに

```:Podfile
platform :ios, '9.0'

use_frameworks!

pod 'RealmSwift'
```

と記入

```
pod install
```

*****.xcworkspaceが生成されているので、それを開く

#続き
[[Swift] RealmSwift 使い方編](http://qiita.com/touyu/items/c84746d35b6107a9042e)
rbenv を使って Ruby と Ruby on Rails をインストール(OS X)

[Rails チュートリアル](http://railstutorial.jp/chapters/beginning?version=4.2#sec-prerequisites) を進めようと思いRails開発環境を構築しようとおもいましたが一人だとつまりそうだったので[Railsのイベント](http://eventdots.jp/event/578750)で教えてもらいながら進めました。下記そのときの手順になります。

Homebrewはmac osへアプリケーションをインストールするときに用います。一方、rbenvはrubyのバージョン管理ができるものになります。Nde.jsでうnodebrew,nvmと同様のものです。

#前提環境
mac os v10.10.5

#Command line tools をインストール
```
xcode-select --install
```
xcodeある人はこの部分いらないですね。

#Homebrewをインストール

```
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
macは10.10.5はデフォルトでruby2.0が入っているので上記コマンドを実行できます。homebrewも結構入れている人多いのでいらないかも。その場合は次にあるbrew updateは実行してください。

#rbenvをインストール
```
brew update
brew install rbenv
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
echo 'export PATH="$HOME/.rbenv/shims:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
```
私はbash_profileで管理していますが、他のファイルを利用している方は名前を変えていただければと思います。

#rbenvを使ってRubyをインストール
```
rbenv install -l
rbenv install X.X.X
```
X.X.Xはrubyバージョンを入力してください。

そして、2.3.0をインストールしruby -vをしてみたところ何故か2.0.0のまま。。。```echo $PATH```や```which ruby```で確認するも設定はrbenvが手前で読み込まれているので正しい。。。なんで？と思っていたらデフォルト設定していませんでした。笑

#rubyでインストールしたバージョンをデフォルト設定
```
rbenv global X.X.X
```

#railsをインストール
```
gem install rails -v X.X.X
```
X.X.Xはrailsバージョンを入力してください。
Unity Unlit/Transparent でアルファ値を外から設定したいシェーダー

```HLSL:TransparentAlpha.shader
Shader "Unlit/Transparent Alpha" {
Properties {
	_Color ("Main Color", Color) = (1,1,1,1)
	_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
}

SubShader {
	Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
	LOD 100
	
	ZWrite Off
	Blend SrcAlpha OneMinusSrcAlpha 
	
	Pass {  
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata_t {
				float4 vertex : POSITION;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f {
				float4 vertex : SV_POSITION;
				half2 texcoord : TEXCOORD0;
				UNITY_FOG_COORDS(1)
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed4 _Color;
			
			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.texcoord) * _Color;
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
		ENDCG
	}
}

}
```

ビルトインの Unlit/Transparent シェーダーにカラーの設定を追加。マテリアル経由でアルファ値をいじれます。
異なる環境間で private network を構築して接続する

#概要
[Meshbird](http://meshbird.com) - distributed private networking.

異なる環境間で private network を構築できる Go 製のツール Meshbird を試してみる。

クライアント間の peer については、BitTorrent と同じような DHT(分散ハッシュテーブル) ネットワークを使用しているらしい。

#Intro
Meshbird create distributed private networking between servers, containers, virtual machines and any computers in different datacenters, different countries, different cloud providers. All traffic transmit directly to recepient peer without passing any gateways. Meshbird do not require any centralized servers. Meshbird is absolutly decentralized distributed private networking.

For example, user can create private network between DigitalOcean's droplets in each datacenter and link it together by executing one command. All traffic will be encrypted with strong AES-256.


#環境
アカウント別の AWS インスタンス2台を用意

#インストール

各インスタンスでインストール

```
# curl http://meshbird.com/install.sh | sh
```

`/usr/local/bin/meshbird` にインストールされる

#network secret key 作成

どちらかのインスタンスで secret key 作成

```
# meshbird new
[main] 2016/02/09 02:27:50 key: 16a45a9e6fbc5db5c2f4ca7c875faa600a070000ffff0000
```


#private network に join する

各インスタンスで以下コマンド実行

```
# export MESHBIRD_KEY="16a45a9e6fbc5db5c2f4ca7c875faa600a070000ffff0000"
```

```
# meshbird join
```

各インスタンスに `tun0` インターフェイスが作成される

**1台目**

```
$ ifconfig tun0
tun0      Link encap:UNSPEC  HWaddr 00-00-00-00-00-00-00-00-00-00-00-00-00-00-00-00
          inet addr:10.7.145.222  P-t-P:10.7.145.222  Mask:255.255.0.0
          UP POINTOPOINT RUNNING NOARP MULTICAST  MTU:1400  Metric:1
          RX packets:68 errors:0 dropped:0 overruns:0 frame:0
          TX packets:93 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:500
          RX bytes:16082 (15.7 KiB)  TX bytes:19530 (19.0 KiB)
```

**2台目**

```
$ ifconfig tun0
tun0: flags=4305<UP,POINTOPOINT,RUNNING,NOARP,MULTICAST>  mtu 1400
        inet 10.7.9.125  netmask 255.255.0.0  destination 10.7.9.125
        unspec 00-00-00-00-00-00-00-00-00-00-00-00-00-00-00-00  txqueuelen 500  (UNSPEC)
        RX packets 83  bytes 10862 (10.6 KiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 74  bytes 24482 (23.9 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
```

#接続してみる
1台目→2台目に対して接続

```
$ ping 10.7.9.125
PING 10.7.9.125 (10.7.9.125) 56(84) bytes of data.
64 bytes from 10.7.9.125: icmp_seq=1 ttl=64 time=4.79 ms
64 bytes from 10.7.9.125: icmp_seq=2 ttl=64 time=3.74 ms
64 bytes from 10.7.9.125: icmp_seq=3 ttl=64 time=3.71 ms
64 bytes from 10.7.9.125: icmp_seq=4 ttl=64 time=3.67 ms
```

ssh接続も接続出来る

```
$ ssh ******@10.7.9.125
The authenticity of host '10.7.9.125 (10.7.9.125)' can't be established.
ECDSA key fingerprint is 3c:4f:51:d5:76:4c:03:8e:b3:d4:4d:ad:74:7a:42:b2.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added '10.7.9.125' (ECDSA) to the list of known hosts.

$
```

meshbird を停止すれば tun0 も削除される
絶対パスと相対パス


![スクリーンショット 2016-02-09 12.51.04.png](https://qiita-image-store.s3.amazonaws.com/0/95187/4834881d-d68e-b49d-85a9-ba3e5b06963d.png)
![スクリーンショット 2016-02-09 12.57.55.png](https://qiita-image-store.s3.amazonaws.com/0/95187/b42f359b-d139-14bd-c0e5-90e622948e2c.png)


[参考になるお薦めサイト](http://www.shoshinsha.com/hp/1hour/know/pass.html)
[参考になるサイト(こちらのサイトから選抜)](http://wrs.search.yahoo.co.jp/FOR=FGsjWzNV3iiiBxDY3aRzTqzLA51VnkBdiqOVYbW7FVq_MKYZ7HG1ntCufswf9Rh.ePrTrTtwVWpmKEW6GuRQjQPTkmPBAogXgYkp6Wbukm140UmBhA5FulQM7btaJ8GrK8NIbmgKLnnvCpiVT03c6NPgjFp0l466AdgTVFt2DX93iw1Qm9h1Wpit8YBq3mT_g0IOezh0Ss1XKRFaQu_mu708OEXw4si4_9EQd_Y-/_ylt=A2RA0k2XYblWlgQA9JGDTwx.;_ylu=X3oDMTEydGo3aGpyBHBvcwMyBHNlYwNzcgRzbGsDdGl0bGUEdnRpZANqcDAwMjg-/SIG=1201hdmu2/EXP=1455090519/**http%3A//www.chama.ne.jp/download/web/path.htm)
Raspbianのインストール

#raspbianをインストールした際の覚え書き

まずは、イメージファイルを用意。
本家の配布サイト(https://www.raspberrypi.org/downloads/raspbian/) は激遅だったので、国内のミラーサイトからダウンロードした。

ダウンロードしたファイルは、2015-11-21-raspbian-jessie.zip。

これを、microSDに書き込む。
書き込みには「DD for Windows」を使用した。

しかし、microSDをカードリーダーに差しても「対象ディスク」に何も表示されない。
![スクリーンショット 2016-01-30 23.14.52.png](https://qiita-image-store.s3.amazonaws.com/0/96096/04ee6bc5-a944-4efe-2f46-5fe5a25a9102.png)

調べてみると、実行ファイルのプロパティで「管理者としてこのプログラムを実行する」を
選択しないといけないらしい。
![スクリーンショット 2016-01-30 21.37.51.png](https://qiita-image-store.s3.amazonaws.com/0/96096/639d15d3-652d-da41-2c3f-f0d98c3db608.png)

イメージファイルの書き込みを終えて、
RaspbrryPi2にmicroSDを差して電源を入れると、あっさりと起動した。

キーボードとマウスは、無線接続のdiNovo Edge(logicool)を使用し、
キーボードとマウス(トラックパット)ともに、問題なく利用できた。

ネットワークは、無線LAN(EW-7811Un(ΣDiMAX))を使用し、
デスクトップ画面の右上にある設定メニューからプリシェアードキーを入力するとあっさりと使えた。
Swiftで非同期処理／遅延処理をキャンセルする

GCD で dispatch した非同期処理をキャンセルしたいケースというのがよくありまして [^1]、Objective-C の場合はいつも使ってるスニペットがあったのですが、Swiftではどう書くのかなとググったら、[こちら](https://github.com/katleta3000/CancelBlocks/blob/master/CancelBlocks.swift) のコードが見つかりました。

[^1]: 例： watchOS 2 でアニメーション完了時に処理をさせたい場合とか。標準アニメーションメソッドの引数にそういうブロックを渡せないのでGCDで遅延処理をdispatchすることになるが、InterfaceObjectを追加したり消したり隠したりがiOSほど自由じゃないので、場合によってアニメーションを適切にキャンセルしたりする必要がある。


で、命名に違和感があったり、遅延実行キューがメインキュー限定だったり、Swift的でない書き方だったりしたのを修正したものが以下になります。


```swift:CancelableBlock.swift
typealias dispatch_cancelable_block_t = (cancel:Bool) -> (Void)

private func dispatch_after_delay(delay: Double, queue: dispatch_queue_t, block: dispatch_block_t?) -> dispatch_cancelable_block_t? {
    guard let block = block else { return nil }
    var originalBlock: dispatch_block_t? = block
    var cancelableBlock: dispatch_cancelable_block_t? = nil
    let delayBlock: dispatch_cancelable_block_t = {(cancel: Bool) -> Void in
        if let originalBlock = originalBlock where !cancel {
            dispatch_async(queue, originalBlock)
        }
        cancelableBlock = nil
        originalBlock = nil
    }
    cancelableBlock = delayBlock
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(delay * Double(NSEC_PER_SEC))), queue) { () -> Void in
        if let cancelableBlock = cancelableBlock {
            cancelableBlock(cancel: false)
        }
    }
    return cancelableBlock
}

func dispatch_after_delay(delay: Double, block: dispatch_block_t?) -> dispatch_cancelable_block_t? {
    let queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0)
    return dispatch_after_delay(delay, queue: queue, block: block)
}

func dispatch_on_main_queue_after_delay(delay: Double, block: dispatch_block_t?) -> dispatch_cancelable_block_t? {
    return dispatch_after_delay(delay, queue: dispatch_get_main_queue(), block: block)
}

func cancel_block(block: dispatch_cancelable_block_t?) {
    if let block = block {
        block(cancel: true)
    }
}
```


Gist に置いてあります。

https://gist.github.com/shu223/e7e4ab419d1e53061249

##使い方

プロパティを用意しておいて、

```swift
var block: dispatch_cancelable_block_t?
```

遅延処理実行時に次のように書きます。

```swift
block = dispatch_after_delay(delay, block: { [weak self] () -> Void in
    // Something
})
```

（メインキューで処理を実行したい場合）

```swift
block = dispatch_on_main_queue_after_delay(delay, block: { [weak self] () -> Void in
    // Something
})
```

非同期／遅延処理をキャンセルしたい場合は `cancel_block` を呼びます。

```
cancel_block(block)
```

（`block` が `nil` であれば何もしないだけなので、`if let` とかする必要はありません）
Michael Abrash Interview 8

http://qiita.com/7of9/items/80509eb41ee18391ce6a
の続き
Michael Abrash Interview:
https://www.youtube.com/watch?v=a7My8zbDNRI&list=PL_MJualihC5AxdlHgVUROYKbNAaPJ5PE4&index=2)

(3:36-)
So that was definitely challenging and fascinating. Now I absolutely say <font color=red>XXX(it's?)</font> virtual reality. It's solvable, but all <font color=blue>this</font> different aspects needs to be solved. 

(3:44-)
How do you <font color=red>track, head positions</font> and orientations? How do you draw the stuff so that it doesn't <font color=red>smear</font>, doesn't <font color=red>straw</font>. It's a quite fascinating problem.

(3:53-)
[Interviewer] So, what's the course or class you recommend somebody who's interesting being engineering in the gaming industry.

5分のリスニングとタイピング終わり。
赤文字ははっきり聞き取れない部分。
青文字はそのように聞き取れるが、文法的にしっくりいかない部分。


smearはなんとなく意味が通じるかも。
http://eow.alc.co.jp/search?q=smear&ref=sa

strawの方は分からない。
http://eow.alc.co.jp/search?q=straw
strollの方かもしれないが、意味がまだ通じない気がする。
http://eow.alc.co.jp/search?q=stroll&ref=sa
Rails 共通部分を切り出す (View, Controller, Model) メモ

Railsでの共通化をメモ。View、Controller、Model

# View
1. 部分テンプレートとして切り出す（共通パーツ)
2. helperとして切り出す(メソッド)

## 1. 部分テンプレートとして切り出す（共通パーツ)
こちらに以前まとめました。
[Rails 部分テンプレートの使い方](http://qiita.com/shizuma/items/1c655dadd2e04b3990a8)

## 2. helperとして切り出す(メソッド)
viewのモジュール作成。helpersの中に

viewの中にロジックを書くと見通しが悪くなるのでhelperの中にロジックは記述する。
また、繰り返し表示するものをまとめておくとviewをすっきりさせることが出来る。

```rb:app/helpers/application_helper.rb
module ApplicationHelper
  def create_time(created_at)
    created_at.strftime('%m/%d %H:%M')
  end
end
```

```erb:app/view/some.html.erb
...
  <%= create_time created_at %>
...
```

参考: [【Rails】Helperを使ってよりDRYなviewを書こう](http://qiita.com/shunsuke227ono/items/21f5968ca7ca0391b583)

# Controller
1. ApplicationController等親のControllerを継承させる（共通パーツ)
2. concernsの中にまとめる(メソッド)

## 1. ApplicationController等親のControllerを継承させる（共通パーツ)

```rb:app/controllres/top_controller.rb
class TopController < ApplicationController
...
end
```

## 2. concernsの中にまとめる(メソッド)

```rb:app/controllers/concerns/common.rb
module Common
  extend ActiveSupport::Concern

  included do
    # ここにcallback等
  end
  
  # メソッド
  def categories
    ArticleCategory.order(:id).all
  end

  private
  
  # privateメソッド

end
```

```rb:app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
  include Common

  def index
    @categories = categories
  end

end
```

## ActiveSupport::Concernとは何ぞや
[[Rails] ActiveSupport::Concern の存在理由](http://qiita.com/castaneai/items/6dc121ce6ff100614f42)

Module間の依存関係を分かりやすくしてくれます。上記リンク先で十分わかりやすかったです。


# Model
1. 親のModelを継承させる（共通パーツ)
2. concernsの中にまとめる(メソッド)

## 1. 親のModelを継承させる（共通パーツ)
Controllerと同様に他のModelを継承させる

## 2. concernsの中にまとめる(メソッド)

```rb:app/models/concerns/common_module.rb
module CommonModule
  extend ActiveSupport::Concern

  # callback、scope
  included do
    before_initialize :set_default_time
    scope :publised, -> { where(state: "published") }
  end

  def set_default_time
    self.published_start_time = Time.zone.now
  end

  # インスタンスメソッド
  def anonymous?
    user_state == "anonymous"
  end

  # クラスメソッド  
  module ClassMethods
    def say_today
      puts Time.zone.now
    end
  end

end
```

```rb:app/models/article.rb
class Article < ActiveRecord::Base
  include CommonModule

  # 適当です。enum使えばいいんですが。 
  def author_name
    author_name if anonymous?
  end
end
```

## 参考
[【Rails】Helperを使ってよりDRYなviewを書こう](http://qiita.com/shunsuke227ono/items/21f5968ca7ca0391b583)
[ActiveSupport::Concernの使い方とテスト(RSpec)](http://qiita.com/mmyoji/items/110b39e950d0f0dce75a)
[[Rails] ActiveSupport::Concern の存在理由](http://qiita.com/castaneai/items/6dc121ce6ff100614f42)
S3とCloudFrontの設定後にチェックすること

今更だけどメモ

S3やCloudFrontの設定後に確認

```
1. S3Endpointでのアクセス
http://hogehoge.s3-ap-northeast-1.amazon.com/sample.txt

2. CloudFrontEndpointでのアクセス
http://hogehoge.cloudfront.net/sample.txt

3. 設定したDNSでのアクセス
http://hogehoge.com/sample.txt
```

アクセス制限等をかけている場合はその確認もすること
※特定のIAMユーザだけとかcloseでのアクセスとか
Ansible on CentOS7

# 利用背景
 puppet, chef と渡り歩いてきたがいずれも挫折したので、クライアントレスのAnsibleを試してみることにした

# How to Install
　epelリポジトリさえ追加してあれば、yum install でインストールすることが可能。

2016年2月現在、Ansibleは2.0系がリリースされているが、[この記事](http://shin1x1.hatenablog.com/entry/gihyo-devops-ansible2)を見る限り、メジャーバージョンの違い、という解釈をしなくても良さそうなので、敢えて最新版を手で入れることは避けた。
　…というか、最初からパッケージ管理を逸脱してしまうぐらいならばもっとどっぷりと開発サーバとして使う
<pre>
 # yum intall epel-release
 # yum install ansible
 # yum install python-devel
</pre>

他のサイトで、sshpassを入れた方が良い、といった記事もあるが yum install ansibleだけでインストールされるので特に気にしなくて良い

# How to configurate

## 初期ファイルのバックアップ
　色々と手を加える前に、バックアップを取っておく。


# 参考サイト
- http://www.bunkei-programmer.net/entry/2015/02/15/181514
- http://centos.sabakan.red/entry/2015/07/01/140000
redis note


# ElastiCache slave-promote
Measurement script

```bash:
#!/bin/bash

while :
do
  sleep 1
  date
  timeout 2 redis-cli -h <ElastiCache Primary Endpoint> set hoge h-imaoka
done
```
__Result__

|#|score|
|---|---|
|1|10 sec|
|2|3 sec|
|3|10 sec|
|4|1 sec|

Endpoint's ttl = 15 sec, so within it.
But this score does not contail `chancel multi-AZ ops`. 

# Why sentinel can not elect new master?

Erase `/etc/redis-sentinel.conf` part auto generated.
I pass it only `sentinel.conf`, it nothing to do with `redis.conf` .

# What will happen - sentinel -
## `save` at Master-node
Maybe `failover` happen

## `bgsave` at Master-node
No failover

## Can I use unpromoted slave (slave -> slave) as RO immediately?
__No.__

__start__ A: Master, B: Slave, C: Slave
__failover__ A: Failed , B: Master, C: Slave

Of cource, you can use `B` as a `master` immediately, but `C` is not. When failover, `C` `state=wait_bgsave`. In `wait_bgsave`, we can get key-values before failover happend time. 
Untill `C's state=online`, can not get new key-values created after failover (write at new master `B`). 

## Restart master redis-daemon with RDB
No `failover` (@600MB memory size)
But slave status will be `wait_bgsave`

## Restart master redis-daemon without RDB
No `failover`.
Just all data cleanup !

# nutcracker
## performance
redis-raw: 9,2k
nutcracker: 8.2k
elb : 7.1k
Unity 網掛けシェーダー

![image](https://qiita-image-store.s3.amazonaws.com/0/112019/c60f3d0c-0695-b346-d528-87efc1584631.png)

こういう漫画っぽい表現やってみたかったんですよね。

```HLSL:DiffuseDither.shader
Shader "Legacy Shaders/Diffuse Dither" {
Properties {
	_Color ("Main Color", Color) = (1,1,1,1)
	_MainTex ("Base (RGB)", 2D) = "white" {}
}
SubShader {
	Tags { "RenderType"="Opaque" }
	LOD 200

CGPROGRAM
#pragma surface surf Lambert

sampler2D _MainTex;
fixed4 _Color;

struct Input {
	float2 uv_MainTex;
	float4 screenPos;
};

void surf (Input IN, inout SurfaceOutput o) {
	float2 s = IN.screenPos.xy / IN.screenPos.w * 640.0;
	s.y *= _ScreenParams.y / _ScreenParams.x;
	clip(0.5 + (sin(s.x) + sin(s.y)) * 0.25 - (1.0 - _Color.a));
	o.Albedo = _Color.rgb;
	o.Alpha = _Color.a;
}
ENDCG
}

Fallback "Legacy Shaders/Diffuse"
}
```

## 解説

サーフェースシェーダーです。Unity ビルトインの Diffuse シェーダーをベースに、マスク処理を追加してます。他のシェーダーベースでも同じようにやれば出来るかと。

ポイントは `clip()` の呼び出しです。この関数は、与えられた引数が `0` より小さい位場合は、描画を行いません。これを利用してマスク処理を行います。

`surf` の処理を上から見ていきましょう。

```HLSL
float2 s = IN.screenPos.xy / IN.screenPos.w * 640.0;
```

今回は、スクリーンスペースでのエフェクトにしたかったので、`screenPos` を使います。`xy` を `w` で割ることで、(0, 0)〜(1, 1) に正規化された状態で描画先の座標が得られます。`640.0` は調整用の係数です。これを変えると網掛けの大きさの具合が変わります。

```HLSL
s.y *= _ScreenParams.y / _ScreenParams.x;
```

`_ScreenParams` にはレンダリング先の画面の情報が入ってます。`y / x` でアスペクト比が求まります。先ほど求めた `s` は正規化された状態であるため、画面の比率が考慮されていません。縦長だろうが横長だろうが (0, 0)〜(1, 1) になってしまいます。そこで、アスペクト比を掛けておくことで正しい比率になり、この後行う網掛けが楕円ではなく正円で行えるようになります。

```HLSL
clip(0.5 + (sin(s.x) + sin(s.y)) * 0.25 - (1.0 - _Color.a));
```

いよいよクリッピングです。`sin(s.x) + sin(s.y)` で、いい感じにグリッド上に丸が配置された感じの値が -2.0〜+2.0 で求まります。それを `* 0.25` して -0.5〜+0.5 の範囲に収め、`+ 0.5` することで、0.0〜1.0 の値が得られます。

こうして得られた値から、一律で定数を引くと、1.0 に近いピクセル以外はだんだんマイナスの値となり、結果クリップ関数によって消えていくという寸法です。元の値を `sin + sin` で求めているので、この消え方が円状になります。

この例では、`(1.0 - _Color.a)` を引くことで、アルファの値に応じて消え具合を調整できるようにしてあります。アルファが 1.0 の時は完全に描画され、0.0 の時は完全に消えます。このシェーダーを指定したマテリアルを作成して、ベースカラーのアルファの値を弄ると網掛けが変わる様子がわかると思います。

`sin + sin` の部分を別の式にすると別の消え方になったりして面白いので是非カスタマイズしてみてください。
kobitoで画像がアップロード出来ない時の対処法


##結論から言うと、ファイルサイズを小さくしましょう！
ファイルサイズを圧縮してからドラッグアンドドロップすると、普通に投稿できました。


##経緯
今朝iPhone 6s plusで撮影した画像をドラッグアンドドロップして記事に添付しようとした時のことです。
以下の様なエラーが出てしまい、うまく添付できませんでした。

	"![アップロードに失敗しました agenda.jpg: 不明なエラー]()"


他のファイルは添付できたので何でかなーと思ってたらiPhoneで撮影した画像だけファイルサイズが大きいことに気づき、圧縮してみたら添付できました。
エラーメッセージでそう教えてくれればいいのに！
active adminでAdminモデル以外を認証に使う方法

ActiveAdminを利用するときに、
Admin modelを生成せず、
既存のDeviseのModelを管理者用のModelとして使いたかった。

## インストール
Deviseのmodel作成をスキップ
`rails generate active_admin:install --skip-users`

## 設定の変更
http://activeadmin.info/docs/1-general-configuration.html#authentication
によると、認証で使うメソッドは、configで以下で意義されているのでそこを変更してあげると良さそう

モデル名がUserの場合

```rb:config/initializers/active_admin.rb
config.authentication_method = :authenticate_user!
config.current_user_method = :current_user
config.logout_link_path = :destroy_user_path
```

各メソッドは、application_controllerから呼ばれるので、
認証にdeviseを使用していない場合でも、Controller側にメソッドを定義してやれば良さそう。


## 結果
![スクリーンショット 2016-02-09 11.46.37.png](https://qiita-image-store.s3.amazonaws.com/0/66072/faeb406e-4cc7-4ef8-1d2b-a9f2f6b74e62.png)

既存のモデルを使って、認証ができました。
Cordova/Phonegapのカメラカスタム系プラグイン


PhoneGap系の実装では、カメラ周りのカスタムは基本的にはネイティブプラグインを書く必要がある(iOS,Android用にそれぞれObjective-C/Swift, Javaを書く）のだけど、やっぱり面倒くさい！なんとか汎用的な解決策はないものか！とちょっと調べてみた。

***


### CameraPlus Plugin For Cordova
https://github.com/Moonware/cordova-cameraplus



![cordova-cameraplus-testapp](https://camo.githubusercontent.com/732dae8efae622868b41a57f41e07f54649e30b0/68747470733a2f2f73332e65752d63656e7472616c2d312e616d617a6f6e6177732e636f6d2f6d6f6f6e776172652f43616d657261506c75732e706e67)

機能：

* カメラをバックグラウンドで起動。ライブで画像取得
* その画像をlocalStrageに保存したり、Base64でPOST可能（キャスト可能）

ストリーミング配信の他に、取得した画像をcanvasに描くなどしてカスタムUIカメラを作ることも可能。[[サンプル]](https://github.com/Moonware/cordova-cameraplus-testapp)


欠点：

* カメラ取得→jpeg化→base64→canvas、という手段なので、遅い。だいたい0.2-0.4秒くらい遅れる。
* 上記の理由で、リフレッシュレートもだいたい12fpsくらい（感覚値）


### com.wezka.nativecamera
https://github.com/mWater/cordova-plugin-wezka-nativecamera




### phonegap-custom-camera-plugin
https://github.com/performanceactive/phonegap-custom-camera-plugin


機能：

* カメラ画面にカスタムボタンとオーバーレイ画像をのせる
* ネイティブプラグインで、指定の画像をネイティブカメラに乗せているため早い


欠点：

* メンテされてない（最終更新が2014/07)


### CordovaCameraPreview
https://github.com/mbppower/CordovaCameraPreview

![CordovaCameraPreview](https://raw.githubusercontent.com/mbppower/CordovaCameraPreview/master/docs/img/android-1.png)

機能：

* HTMLの上にカメラ画面のポップアップ表示が可能（カメラプレビュー画面の上に、HTMLのカスタムUIが！）
* カスタムUIも可能
* Base64での取得も可能

本命かなぁ。
[[サンプル]](https://github.com/mbppower/CordovaCameraPreviewApp)

欠点：

* 今のところなし
ドロイド君がひっくり返った

電源が入っていない状態で、電源ボタン、音量 ＋ ボタンを長押しで起動。
転がされておなかを開いたドロイド君が出てくる。

選択キー
**音量　＋（上）－（下）**

決定キー
**電源ボタン**

音量ボタンで、「wipe data/factory reset」を選び、
電源ボタンを押す。工場出荷時に初期化されます。
compliteの表示を確認して以下のreboot system nowを
行ってください。

リカバリーモード
「コマンドが指定されていません」の画面で
電源ボタンと音量＋のボタンを押すのですが、
同時に押すのではなく、電源ボタンを押したまま音量＋ボタンをポンと押すみたいな感じにするとメニューが出てくると思います。その後「reboot system now」で再起動出来ます。

再起動でしたら各種設定の質問にこたえてください。
Unity 半透明描画するサーフェースシェーダー

```HLSL:TransparentSurface.shader
Shader "Custom/TransparentSurface" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Tags {
            "Queue" = "Transparent"
            "RenderType" = "Transparent"
        }
        CGPROGRAM
        #pragma surface surf Lambert alpha

        sampler2D _MainTex;
           
        struct Input {
	    float2 uv_MainTex;
        };

        void surf(Input IN, inout SurfaceOutput o) {
            half4 c = tex2D(_MainTex, IN.uv_MainTex);
            o.Albedo = c.rgb;
            o.Alpha  = 0.25;
        }
        ENDCG
    }
}
```

ポイント：

 * `"Queue" = "Transparent"` を指定
 * `"RenderType" = "Transparent"` を指定
 * **`#pragma surface` の指定に `alpha` を追加** (忘れやすい)
 * `SurfaceOutput` の `Alpha` をお好みで指定すればアルファが変えられます
 * 他の部分はお好みで (上の例はテクスチャから色を取ってくる設定)
Unity 頂点カラーを反映するシェーダー

エフェクトとか作ってると頂点単位で色が変えたくなりますよね。

```HLSL:VertexColor.shader
Shader "Custom/VertexColor" {
    SubShader {
        CGPROGRAM
        #pragma surface surf Lambert 
           
        struct Input {
            float4 color : COLOR;
        };

        void surf(Input IN, inout SurfaceOutput o) {
            o.Albedo = IN.color.rgb;
        }
        ENDCG
    }
}

```

ポイント：

 * サーフェースシェーダーを使う
 * `Input` 構造体に `COLOR` を指定すると頂点カラーが渡ってくる
 * あとはお好みで加工して `SurfaceOutput` に渡しましょう
dots.女子部勉強会 vol.6 Railsハンズオン ～ Rails × ピラティス ～に行ってきた

普段はぺちぱーな私ですが、Ruby On Railsの勉強会に同僚の女子と行って参りました。
2016/02/06(土)のこれ。
[dots.女子部勉強会 vol.6 Railsハンズオン ～ Rails × ピラティス ～](http://eventdots.jp/event/578750)

内容としてはRuby on Railsでログイン画面までみんなで作ってその後ピラティスとかいうヨガみたいなやつやる会です。難易度低そうだから申し込んだ。職場に女子少ないから他社のプログラマどんなのかなというのが気になりまして。。
てかピラティスとか何っていう。

みんなでモクモクとRailsでログインフォームやっておりました。

会場の様子
![CagU80TUkAImfGf.jpg](https://qiita-image-store.s3.amazonaws.com/0/110510/00c0947b-f014-c47c-2d71-7c0324791c7d.jpeg)

![CagoWKGUYAEX9RM.jpg](https://qiita-image-store.s3.amazonaws.com/0/110510/e76da9fd-ad2d-5be7-a0c1-4ccd60a7a4e2.jpeg)


私も写ってますね。
みんな結構戸惑ってまして最後まで行けなかった方が多かったのですが私はMySQLとRails接続して投稿処理までいけましたやった(・∀・)

Rails触ってみましてかなりオートマチックなんだなと思ったので初めて触ったWebフレームワークがPHPのCodeIgniterな私にはRailsは初めてに使うフレームワークには良くないなと思いました。

それからのピラティス。
![Cag42L8UUAEbeGP.jpg](https://qiita-image-store.s3.amazonaws.com/0/110510/d742439d-3b23-9f2f-8e28-132bba4c9f3a.jpeg)

![Cag-DVbUYAA0hg1.jpg](https://qiita-image-store.s3.amazonaws.com/0/110510/e4fa0c81-1bb1-cd04-7802-79204e8f8e83.jpeg)


記念撮影

![Cal6ejyUYAAER03w.jpg](https://qiita-image-store.s3.amazonaws.com/0/110510/1a0406ce-019d-e3b0-5a67-07c36299747f.jpeg)


可愛い女の子多いですね行ってよかったです。dots女子部の会員にもなっちゃいました。日々勉強ですね。また女子部参加しよっと。
VirtualBox環境におけるCentOSで日本語入力ができない


# 事象
Windows環境においてVirtualBoxにてCentOSの仮想マシンを作成したところ、日本語入力が出来ないという問題に陥った。

## 実行環境
Windows7 64bit
VirtualBox:バージョン 5.0.14
仮想マシンOS:CentOS 7

# 調査
CentOSのキーボード入力関連を調べてみるとどうやらIbusというパッケージがキーボードの設定を行っているようだ。
そこでIbusの日本語設定に関するページを参照して修正を試みる、がどうも上手くいかない。

# 原因
ふとWikipediaで[CentOSの項目](https://ja.wikipedia.org/wiki/CentOS)を参照するとこう書いてあった。

>CentOS（セントオーエス）は、Red Hat Enterprise Linux（以下「RHEL」と呼ぶ）との完全互換を目指したフリーのLinuxディストリビューションである。

...そういえばVBで仮想マシンを作るとき、CentOSというオプションがなかったので

- タイプ：Linux
- バージョン：Linux / 2.6 / 3.x / 4.x (64-bit)

を選択していた。

「もしかするとこれは仮想マシンの中じゃなくてVB上の問題か？」

ということで

- タイプ：Linux
- バージョン：RedHat (64-bit)

で新規仮想マシンを作成。
再びOSをインストールを完了させ再起動すると正常に日本語入力ができた。

CentOSはRedHatのクローンで、つまりは**RedHat系ディストリビューションに属している。**

詳しくはなんともいえないが、
仮想マシンのオプションを間違えていたことによる
何らかの齟齬が発生していたと考えられる。

# 結論
初めてのVBで「仮想マシン作ろうとしてるけどOS見つかんないから最初のやつ選択しとけばいいや～」などと考えず、自分が今使おうとしているディストリビューションは一体どの系列に属しているのか知っておくこと。
AndroidStudioでVolley導入【一行追加するだけ!!!】

Volleyを利用したくて、いろいろと調べてみると、導入するまで、なにやら手順を踏んでプロジェクトに取り込む必要があるのかなぁと思っていると、・・・なんと一行追加するだけでしたよ！！！

build.gradleのdependenciesに下記を一行追加するだけで、volley使えますYO

```
compile 'com.android.volley:volley:1.+'
```
Today's polymer element [paper-badge]


これから毎日polymerのカタログから一つづつElementを紹介していきます。（紹介できるよう頑張ります）
環境構築やPolymerとはは別の機会に紹介できればと思います。
それでは、手始めに[paper-elements](https://elements.polymer-project.org/browse?package=paper-elements)から一つづつ紹介していこうと思います。

第1回目は **paper-badge** です。

## What is paper-badge

paper-badgeとはステータスや通知を表示するために使います。
文字列やアイコンを表示することができ、適切に使えばユーザに何かイベントが発生していることを知らせることができます。
webサイトやスマホゲームの中でも頻繁に使われている機能ですね。
それではサンプルコードを見てみましょう。

## Example

### サンプルコード
```html:index.html
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/iron-icons/communication-icons.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/iron-icons/social-icons.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/paper-badge/paper-badge.html">
    <style>
       .contents {
           margin-top: 20px;
           display: inline-block;
       }
    </style>
</head>

<body>
<div class="contents">
    <paper-icon-button id="number" icon="communication:email" alt="inbox"></paper-icon-button>
    <paper-badge for="number" label="4"></paper-badge>

    <paper-icon-button id="icon" icon="account-box" alt="person"></paper-icon-button>
    <paper-badge icon="social:mood" for="icon" label="happy"></paper-badge>
</div>
</body>
</html>
```

### サンプル結果
![paper-badge.png](https://qiita-image-store.s3.amazonaws.com/0/112299/c7336285-5f55-45fd-54f2-cc5091f522a8.png "paper-badge.png")

for属性で指定したidの右上にバッジが表示されます。for属性を指定しない場合は親ノードに付くようです。
icon属性に表示したいiconを指定するとiconを表示することもできます。


以上です。
iconと組み合わせていろいろなものを表示できるので面白いですね。
次回はpaper-buttonを紹介しようと思います。
確認なしでログアウトできるアイコン作成

## 参考

* [debian - command to log out of LXDE directly - Unix & Linux Stack Exchange](http://unix.stackexchange.com/questions/170029/command-to-log-out-of-lxde-directly)

## 作成

```bash:logout.desktop 
[Desktop Entry]
Icon=system-shutdown-panel
Exec=pkill -9 -f lxsession
Type=Application
NoDisplay=true
```

![logout.png](https://qiita-image-store.s3.amazonaws.com/0/25728/fa593ad9-0c08-2b7b-98cc-1f7851131988.png)


```bash:コマンドでログアウト
pkill -9 -f lxsession
```
RubyのString#deleteの意外な機能

Stringクラスのインスタンスメソッド、**「delete」**
その名の通り、レシーバの文字列から引数の文字列を消すメソッド。

```rb
a = '12345'
puts a.delete('3')

# => 1245
```

単語単位ではなく、文字で消すのが注意すべきところだが、、、


```rb
a = '12345'
puts a.delete('35')

# => 124
```

ここまではまぁ大丈夫。

しかし、こんな引数の書き方が存在する。


```rb
a = '12345'
puts a.delete('3-5')
```

これを実行すると。。。


```rb
# => 12
```

範囲もかけるらしい。。。


いやいや。いらないいらない。笑


### 20160826更新

こんなのもできた

```rb

# 改行して文字列を作ると、strに¥nと空白が入ってしまう
str = "http://hogehoge.com
        /fuga
        /piyo".delete("¥n| ") # or

```
MNISTの学習用画像を見てみよう！（２）

# GNU Octave のパッケージをインストールしよう
MNISTの画像ファイルは一般的な画像ビューアで見ることができないらしい…。
フリーの数値計算ソフト GNU **Octave** を使うとMNIST画像データを可視化できるんだって！

さっそくパッケージをインストール。
ちなみ僕は**Raspberry Pi 2** に **Ubuntu 15.10(Wily Werewolf)**を走らせて遊んでいます。
***
$ sudo apt-get install octave
***
## GNU Octave でMNIST学習用画像を見てみる
学習用画像ファイルを開く。

```
octave:1> fid = fopen('train-images-idx3-ubyte','r','b')
fid =  4
```
画像ファイルの先頭から16バイトはファイル形式が記述されているので、

```
octave:2> magic_number = fread(fid,1,'int32')
magic_number =  2051
octave:3> number_of_images = fread(fid,1,'int32')
number_of_images =  60000
octave:4> number_of_rows = fread(fid,1,'int32')
number_of_rows =  28
octave:5> number_of_columns = fread(fid,1,'int32')
number_of_columns =  28
```
では、画像を読み出してみよう。
GNU **Octave** では、**fread関数**で取得したデータの出力を2次元配列(行列)にすることができる。
また、**reshape関数**で2次元配列(行列)の各要素を組み替えて与えられた次元となる行列を返す。
返された行列の要素は行要素が連続であるものとしてアクセスされる。

```
octave:6> img = fread(fid, [28*28 60000], 'uint8');
octave:7> size(img)
ans =

     784   60000

octave:8> img = reshape(img,28,28,60000);
octave:9> size(img)
ans =

      28      28   60000
```
先頭から一つずつ画像を表示してみる。
GNU **Octave** では**imshow**コマンドで2次元配列データを簡単に画像表示できる。
1枚目を見てみる。

```
octave:10> val = uint8(img(:,:,1)');
octave:11> imshow(val)
```
![img00001.png](https://qiita-image-store.s3.amazonaws.com/0/105001/7da6c2da-e36c-a214-9f32-e0ee38093767.png)
「5」のようですね笑
次は2枚目を見てみよう。

```
octave:12> val = uint8(img(:,:,2)');
octave:13> imshow(val)
```
![img00002.png](https://qiita-image-store.s3.amazonaws.com/0/105001/865c0905-7c56-3196-74e5-f5b275747130.png)
2枚目は「0」だ！
いっきに飛ばして10000枚目を見よう。

```
octave:14> val = uint8(img(:,:,10000)');
octave:15> imshow(val)
```
![img10000.png](https://qiita-image-store.s3.amazonaws.com/0/105001/78707339-b1fc-2e04-449e-6fddbd59a48a.png)
10000枚目は「7」のようですね。

いちいちコマンドを打つのが面倒くさいのですね。
コマンドをファイルにまとめて実行できる様なので、

```Octave:mnist-train-images.m
fid = fopen('train-images-idx3-ubyte','r','b');

magic_number = fread(fid,1,'int32');
number_of_images = fread(fid,1,'int32');
number_of_rows = fread(fid,1,'int32');
number_of_columns = fread(fid,1,'int32');

img = fread(fid,[number_of_rows*number_of_columns number_of_images],'uint8');
size(img)
img = reshape(img,number_of_rows,number_of_columns,number_of_images);
size(img)

% 学習画像を10枚見てみる
% 1秒間ずつ表示する 
for i=1:1:10
val = uint8(img(:,:,i)');
imshow(val)
sleep(1);
end

fclose(fid);
```
下記で実行できる。
***
$ octave mnist-train-images.m
***


### 参照サイト&文献
> - [(2) MNIST学習画像を見てみる | MNISTやってみる！](http://nnet.dogrow.net/?p=31)
> - [日本語版 GNU Octave マニュアル 2.1.73 [pdf]](http://www.obihiro.ac.jp/~suzukim/masuda/octave/man/octave-20060720.pdf)
nvd3.jsで折れ線グラフを書く（自分用備忘）

KPIを折れ線グラフ化するのに使ったので、使い方を忘れないようにメモっておきます。


# 導入

nvd3のjsとcssをgithubから落としてきて、プロジェクトのディレクトリにコピー。

【github】
https://github.com/novus/nvd3.git

```bash
$ git clone https://github.com/novus/nvd3.git

$ cp ./nvd3/build/nv.d3.min.js /path/to/application/js/dir/

$ cp ./nvd3/build/nv.d3.min.css /path/to/application/css/dir/
```

d3.jsを落としてきて、プロジェクトのディレクトリにコピー

【github】
https://github.com/mbostock/d3/releases/download/v3.5.14/d3.zip

```bash
$ wget https://github.com/mbostock/d3/releases/download/v3.5.14/d3.zip

$ unzip ./d3.zip

$ cp d3.min.js /path/to/application/js/dir/
```

# HTML側

HTMLファイルに以下を追記
（ライブラリのロードと、描画領域の指定）

```html
<head>
  <link media="all" type="text/css" rel="stylesheet" href="https://hogehoge.jp/css/nv.d3.min.css">
</head>

<body>
  <!-- contents -->

  <!-- /contents -->

  <!-- chart/ここがグラフ描画領域 -->
  <div id="chart-container" style="height: 500px;">
    <svg></svg>
  </div>
  <!-- /chart -->

  <script src="https://hogehoge.jp/js/lib/d3.min.js"></script>
  <script src="https://hogehoge.jp/js/lib/nv.d3.min.js"></script>
</body>
```

# javascript側

jQueryのreadyタイミングでグラフを描画させる感じにする。
データはajaxで取得

```js
$(function() {
  $.ajax({
    url: '/chart_data/'
  })
  .done(function(data) {
    // データの内容はこんな感じで返ってくる
    // data = [
    //   {x: 1, y: 0},
    //   {x: 2, y: 1},
    //   {x: 3, y: 1},
    //   {x: 4, y: 2},
    //   {x: 5, y: 3},
    //   {x: 6, y: 0},
    //   {x: 7, y: 0},
    //   {x: 8, y: 0},
    // ];

    nv.addGraph(function() {
      // グラフオブジェクト生成
      var chart = nv.models.lineChart()
                  .useInteractiveGuideline(true)
                  .showLegend(true)
                  .showYAxis(true)
                  .showXAxis(true);

      // x軸のタイトル設定＋フォーマット指定（数値指定）
      chart.xAxis.axisLabel('x-data').tickFormat(d3.format('d'));

      // y軸のタイトル設定＋フォーマット指定（数値指定）
      chart.xAxis.axisLabel('y-data').tickFormat(d3.format('d'));

      // 戻り値データをd3に渡せる形式に整形
      var chartData = [
        {
          values: data,
          key: 'sample data',
          // 必要あれば色も指定可能
          // color: '#cf3cd0',
        },
        // 複数のグラフを表示したければ、上と同じ感じでどんどん追記
      ];

      // 描画先のhtmlオブジェクトを指定して変数登録
      d3.select("#chart-container svg")
        .datum(chartData)
        .transition()
        .duration(300)
        .call(chart);

      // リサイズ時更新設定
      nv.utils.windowResize(chart.update);

      return chart;
    });
  })
  .fail(function(data) {
    // エラー処理があれば
  });
});
```

# 結果

こんな感じで描画される*\(^o^)/*

![スクリーンショット 2016-02-09 9.52.14.png](https://qiita-image-store.s3.amazonaws.com/0/105934/f10d8bfe-be61-e650-d808-c172cfc27ce6.png)
pythonで桁数を揃えて数字をファイルに保存したい

`np.savetxt(ファイル名,変数名)`
で保存すると、ファイルサイズと区切り文字がイメージと違ってビックリします。

`np.savetxt(ファイル名,変数名, fmt="%0.5f",delimiter=",")`

ぐらいをデフォルトにしてほしいと思ったりします。

参考：
https://airtoxin.wordpress.com/2013/02/02/numpy-savetxt%E3%81%A7csv%E5%87%BA%E5%8A%9B%E3%82%92%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
Androidでスクリーンショットを撮影する時ぐらいは、ステータスバーを消そうぜｗ

![device-2015-12-22-101043_png.png](https://qiita-image-store.s3.amazonaws.com/0/99731/cfaa231c-b031-646c-6de3-0a5e9f9a0452.png)

#ステータスバーが写ってしまう。

Google Playのアプリ用スクリーンショットに登録する画像ありますよね。やっとの思いでアプリが完成して、早くリリースしたい気持ちわかります。過去に自分がリリースしたアプリもそうなんですが、ステータスバーが写り込んでいるスクリーンショットを素材に使っているのは私だけでしょうか？ｗ

#環境
Android4.4

#さくっと一発でステータスバーを消す

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (BuildConfig.DEBUG) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
}

```

#まとめ
次回のアプリでスクリーンショットを撮影する時に、ぜひ使ってみてください。
crontab の消失にそなえる

私は何年ものあいだ恐怖とともに crontab を編集してきた。

crontab は `-r` オプションで削除される。`-e` で編集になるが r は e のとなりにあるのでいつも内容の消失におびえてキーボードをたたいた。

いろいろな対策があるが私はこの方法をとる。

```crontab
35 * * * * crontab -l > ~/crontab-backup/`hostname`.`date +\%Y-\%m-\%d-\%H-\%M`.crontab
```

バックアップだ。バックアップしよう。バックアップしよう。バックアップしよう。
ホスト名と時間があるので、いつか困ったときに約にたつかもしれない。
ネストしたルーティングと acceps_nested_attributes_for の違いは？

> 以下は、[Stackoverflowの記事](http://stackoverflow.com/questions/10448945/whats-the-difference-between-using-nested-routes-vs-accepts-nested-attributes) を意訳したものです。

# Q.

ネストしたルーティングと acceps_nested_attributes_for。

このふたつに混乱してるんだけど、フォームはネストしたルーティングをこんなふうに配列の引数で扱えるみたいだ：

```rb
<%= form_for [@project, @task]...
```

それか、親クラスが ```accepts_nested_nested_attributes_for``` を定義してたら、 ```fields_for``` ヘルパを使うんだよね。

このふたつのやりかたの違いとか、トレードオフってなんだろう？

# A.

#### ネストしたルーティング

基本的に、ネストしたルーティングは子モデルを独立したフォームとして表示したいときに便利だ。

たとえば、ブログの Post モデルと、その子モデルの Comment があるとしたら、子モデルのフォームをネストしたルーティングをつかって表示できる。フォームを送信すると、rails が親モデルとの関連をうまいことやってくれる。

#### accepts_nested_nested_attributes_for

accepts_nested_attributes_for をつかったやり方は、ひとつのフォームに見えるように表示してるけど、実際には親子の両方をふくむフォームで、それをひとつの送信ボタンで送信するような場合に適している。

#### まとめ

ネストしたルーティングは親子モデルをそれぞれのフォームで表示したい場合、accepts_nested_nested_attributes_for は親子モデルをひとつのフォームで表示したい場合に使うってこと。

微妙な違いで、初心者には分かりづらいけれど、理解する価値のあることだと思う。
Runtimeでdigする

## はじめに
Runtimeで外部アプリを叩いているだけじゃないか、というご指摘はごもっともです。

事前に準備する外部ライブラリ等はありません。

## 実装例
サンプルでは、動作確認しやすいようにmainメソッドで実行できるようにしてあります。
結果だけを確認したい場合は、この記事の一番下のリンク先で使えるようにしてありますのでご覧ください。

```java:Dig.java
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.nio.charset.Charset;
import java.nio.charset.StandardCharsets;

/**
 *
 * @author tool-taro.com
 */
public class Dig {

	public static void main(String[] args) throws IOException, InterruptedException {

		//検索したいドメイン
		String source = "tool-taro.com";
		//nslookupのパス
		String nslookupPath = "/usr/bin/dig";

		//nslookup処理
		String[] commandArray = new String[3];
		commandArray[0] = nslookupPath;
		commandArray[1] = source;
		commandArray[2] = "ANY";
		Charset charset = StandardCharsets.UTF_8;

		Runtime runtime = Runtime.getRuntime();
		Process process = null;
		StringBuilder logBuilder = new StringBuilder();
		StringBuilder errorBuilder = new StringBuilder();
		int status = 0;

		try {
			process = runtime.exec(commandArray);
			final InputStream in = process.getInputStream();
			final InputStream ein = process.getErrorStream();

			Runnable inputStreamThread = () -> {
				BufferedReader reader = null;
				String line;
				try {
					reader = new BufferedReader(new InputStreamReader(in, charset));
					while (true) {
						line = reader.readLine();
						if (line == null) {
							break;
						}
						logBuilder.append(line).append("\n");
					}
				}
				catch (IOException e) {
				}
				finally {
					if (reader != null) {
						try {
							reader.close();
						}
						catch (IOException e) {
						}
					}
				}
			};
			Runnable errorStreamThread = () -> {
				BufferedReader reader = null;
				String line;
				try {
					reader = new BufferedReader(new InputStreamReader(ein, charset));
					while (true) {
						line = reader.readLine();
						if (line == null) {
							break;
						}
						errorBuilder.append(line).append("\n");
					}
				}
				catch (IOException e) {
				}
				finally {
					if (reader != null) {
						try {
							reader.close();
						}
						catch (IOException e) {
						}
					}
				}
			};

			Thread inThread = new Thread(inputStreamThread);
			Thread errorThread = new Thread(errorStreamThread);

			inThread.start();
			errorThread.start();

			status = process.waitFor();
			inThread.join();
			errorThread.join();
		}
		finally {
			if (process != null) {
				try {
					process.destroy();
				}
				catch (Exception e) {
				}
			}
		}
		//標準出力
		System.out.format("検索結果=%1$s", logBuilder.toString());
	}
}
```
## 動作確認

```
$ javac Dig.java
$ java Dig
$ 検索結果=; <<>> DiG 9.9.4-RedHat-9.9.4-29.el7_2.2 <<>> tool-taro.com ANY
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 36600
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1
...(省略)
```
## 環境
- 開発
	- Windows 10 Pro
	- JDK 1.8.0_112
	- NetBeans IDE 8.2

- 動作検証
	- CentOS Linux release 7.2
	- JDK 1.8.0_112

上記の実装をベースにWebツールも公開しています。
[dig(ドメインサーチ)｜Web便利ツール@ツールタロウ](http://tool-taro.com/dig/)
Ext JS モデルで ASP.NET の日付型を扱う

ASP.NET から出てくる形式は 2015-07-02T10:10:00 という形式ですが、
そのままにしておくと、Sencha 側がなぜか +GMT を足してくれます。
しかし、

```javascript
Ext.define('SomeModel', {
    fields: [{
        name: 'birthday',
        type: 'date',
        dateFormat: 'Y-m-d\\TH:i:s'
    }]
        :
        :
});
```

のように指定すると現象を回避できます。
Yahoo! 知恵袋（q14155643874）

「Yahoo! 知恵袋」の以下の質問をやっつけで解いてみました。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14155643874

```bat:q14155643874.bat
@echo off

set SELF=%~n0
set HELP=usage: %SELF% NUMBER
set TEST=1

setlocal enabledelayedexpansion
  set padding=0000000000
  
  set cwd=%~dp0
  
  set n=%~1
  if "%n%" == "" (
    >&2 echo %HELP%
    exit /b 1
  )
  (echo %n%) | findstr /r "[^0-9]." && (
    >&2 echo %HELP%
    exit /b 1
  )
  
  set number_of_files=100
  call :length "%number_of_files%"
  set digits=%ERRORLEVEL%
  
if %TEST% equ 1 (
  rem make files: file-000
  set /a number_of_files-=1
  for /l %%i in (0, 1, !number_of_files!) do (
    rem n digits with space
    set i=%padding%%%i
    set i=!i:~-%digits%!
    copy NUL "%cwd%\file-!i!.txt" > NUL
  )
)
  
  set i=0
  for /f "tokens=*" %%f in ('dir /b /a-d "%cwd%"') do (
    if "%%~nxf" == "%~nx0" (
      rem NOP: exclude this file
    ) else (
        rem make directories: directory-000
        set /a remainder=!i!%%%n%
        if !remainder! equ 0 (
          set /a quotient=!i!/%n%
          rem n digits with space
          set d=%padding%!quotient!
          set d=directory-!d:~-%digits%!
          if not exist "%cwd%\!d!\" (
            md "%cwd%\!d!" > NUL
          )
        )
        
        move "%cwd%\%%f" "%cwd%\!d!" > NUL
        
        set /a i+=1
    )
  )
  
  tree /f
  
if %TEST% equ 1 (
  rem delete files and directories
  for /f "tokens=*" %%d in ('dir /b /ad "%cwd%"') do (
    rd /s /q "%cwd%\%%d"
  )
)
  
  exit /b 0
endlocal
goto :EOF

:length
setlocal
  set s=%~1
  
  if "%s%" == "" (
    exit /b 0
  )
  
  set i=0
  :BOL
    call set c=%%s:~%i%,1%%
    if "%c%" == "" goto EOL
    set /a i+=1
    goto BOL
  :EOL
  
  exit /b %i%
endlocal
goto :EOF
```

バッチ変数 TEST の値に 1 をセットします。

```
set TEST=1
```

バッチファイルを実行します。

```
C:\sandbox>q14155643874.bat 3
フォルダー パスの一覧
ボリューム シリアル番号は XXXXXXXX XXXX:XXXX です
C:.
│  q14155643874.bat
│
├─directory-000
│      file-000.txt
│      file-001.txt
│      file-002.txt
│
├─directory-001
│      file-003.txt
│      file-004.txt
│      file-005.txt
│
├─directory-002
│      file-006.txt
│      file-007.txt
│      file-008.txt
│
...
│
├─directory-031
│      file-093.txt
│      file-094.txt
│      file-095.txt
│
├─directory-032
│      file-096.txt
│      file-097.txt
│      file-098.txt
│
└─directory-033
        file-099.txt
```

最初に 100 個のファイルを作成し、フォルダーを作成しながら各フォルダーの中にファイルが 3 個ずつ移動することを確認しました。