OmniAICreator/Qiita-1.07M huggingface dataset:
ソーシャルメディアAPIを使った開発で活用しているサイト/ツールまとめ

## Twitter

- [dev.twitter.com](http://dev.twitter.com) (デベロッパーサイト)
	+ [REST API v1.1 Resources](https://dev.twitter.com/docs/api/1.1)
	+ [REST API v1.1 Limits](https://dev.twitter.com/docs/rate-limiting/1.1/limits)
	+ [Developer Display Requirements](https://dev.twitter.com/terms/display-requirements)
	+ [API Status](https://dev.twitter.com/status)
	+ [API Issues](https://dev.twitter.com/issues)

- [Twitter4J](http://twitter4j.org/ja/) (Javaライブラリ)

- [twitter/twitter-text-js](https://github.com/twitter/twitter-text-js) (Javascriptライブラリ)

## Facebook

- [developers.facebook.com](https://developers.facebook.com) (デベロッパーサイト)
	+ [Graph API Reference](https://developers.facebook.com/docs/graph-api)
	+ [Graph API Explorer](https://developers.facebook.com/tools/explorer/)
	+ [FQL](https://developers.facebook.com/docs/reference/fql)
	+ [Error Codes & Responses](https://developers.facebook.com/docs/graph-api/using-graph-api/v2.0#errors)

- [revetkn/restfb](https://github.com/revetkn/restfb) (Javaライブラリ)

## Google

- [developers.google.com](https://developers.google.com/products/?hl=ja) (デベロッパーサイト)
	+ [Google+ API](https://developers.google.com/+/api/latest/?hl=ja)
	+ [Youtube Data API](https://developers.google.com/youtube/v3/?hl=ja)

## Instagram

- [instagram.com/developer/](http://instagram.com/developer/) (デベロッパーサイト)

- [Instagram for Developers](http://developers.instagram.com/) (開発者ブログ)

- [sachin-handiekar/jInstagram](https://github.com/sachin-handiekar/jInstagram) (Javaライブラリ)

## LinkedIn

- [developer.linkedin.com](http://developer.linkedin.com/) (デベロッパーサイト)
	- [REST APIs](https://developer.linkedin.com/rest)
	  + [Throttle Limits](https://developer.linkedin.com/documents/throttle-limits)
	+ [API Keys & Status](https://www.linkedin.com/secure/developer)

- [linkedin-j](https://code.google.com/p/linkedin-j/) (Javaライブラリ)
※開発が止まっているので、けっこう手を入れて使っている。。。

## その他

- [apigee](https://apigee.com/console/twitter) (APIコンソール)

実はこれが一番キモで、色々なソーシャルメディアのAPIを簡単に試せるのでめっちゃ重宝している。

  ![スクリーンショット_071514_055713_PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/3899/e8159f14-2b18-31f2-dffb-c7d48996395b.jpeg)
Xcodeで並列ビルドを行う方法


Xcodeはデフォルトではシングルタスクでビルドします。
cocos2d-xなど、大量のC++ファイルが含まれているプロジェクトでは完全ビルドに10分以上費やしたりします。

## IDEで並列ビルド

以下のコマンドを叩きます。

```
defaults write com.apple.dt.Xcode IDEBuildOperationMaxNumberOfConcurrentCompileTasks <並列数>
```

コマンドを叩いた後はXcodeを再起動する必要がありますが、効果は永続します。

## CLIで並列ビルド

以下のようにビルドします。

```
xcodebuild -IDEBuildOperationMaxNumberOfConcurrentCompileTasks=<並列数> ...
```

## 追記
Xcode5で確認していますが、Xcode4以下については未確認です。
HTML自分用メモ


#基本構造

``` 文章の構造
<html></html>: この中がHTMLとして処理される
<head></head>: ヘッド
	<title></title>: タイトル
<body></body>: 本文
<h1></h1>: 省
<p></p>: Paragraph、段落の始まり</p>は省略しないほうがベター
```

``` 文章の装飾
<b></b>: 太字
<i></i>: 斜体
```

``` その他
<br>: 改行

<ul>: Unordered List
<li>あいうえお</li>: List item
<li>あいうえお</li>: List item
<li>あいうえお</li>: List item
</ul>

<ol>: Ordered List
<li>かきくけこ</li>: List item
<li>かきくけこ</li>: List item
<li>かきくけこ</li>: List item
<li>かきくけこ</li>: List item
</ol>


<span></span>: 一部にだけ装飾を行いたいときに用いる、改行を伴わない
<div></div>: 一部にだけ装飾を行いたいときに用いる、改行を伴わない
```
rubyのhashは順序を保存する

ruby-list MLを見ていたら「RubyのHashは順序を保存するので～」との一文が。
てっきり順不同だと思ってたので意外でしたが、試してみたらこんな感じ。
ちゃんと保存されてました。へーへーへー。

```ruby:sample.rb
hash1 = {}
hash1[:key1] = :val1
hash1[:key2] = :val2
hash1[:key3] = :val3
p hash1 # {:key1=>:val1, :key2=>:val2, :key3=>:val3}

hash2 = {}
hash2[:key3] = :val3
hash2[:key2] = :val2
hash2[:key1] = :val1
p hash2 # {:key3=>:val3, :key2=>:val2, :key1=>:val1}

p hash1.keys # [:key1, :key2, :key3]
p hash2.keys # [:key3, :key2, :key1]

p hash1 == hash2 # true
```
ggplot2でdata.tableから二次元の集計表を作成してヒートマップとして表示

## はじめに
メモです。
data.tableから[こういうの](http://stackoverflow.com/questions/14290364/heatmap-with-values-ggplot2)を作りたかったのです。
data.frameだったら、reshape2でやればいいのですが、data.tableのままでやるには以下のようにします。


## やってみた

```r:ライブラリの読み込み
library(data.table)
library(ggplot2)
library(reshape2)
```

```r:表の読み込み
d <- fread(filename)
```

```r:Var1とVar2の組み合わせをカウント
dat <- dcast.data.table(d, Var1 ~ Var2, fun=length)
dat2 <- melt(dat, id.vars = "Var1")
```

```r:描画
g <- ggplot(dat2, aes(as.factor(Var1), variable, group=variable)) +
    geom_tile(aes(fill = value)) + 
    geom_text(aes(fill = dat2$value, label = round(dat2$value, 1)), size=2) +
    scale_fill_gradient(low = "white", high = "red")

print(g)
```

`d`, `dat`, `dat2`はいずれもdata.tableオブジェクトです。

## 参考
- http://stackoverflow.com/questions/6902087/proper-fastest-way-to-reshape-a-data-table
Zabbix Proxy（2.2.4）をAWS EC2に導入する

#Zabbix Proxyのインストール

以下の手順はAWSのAmazon Linux AMI上に実施した手順となります。
（2014/7/15時点）

１．yumリポジトリを登録
`sudo rpm -ivh http://repo.zabbix.com/zabbix/2.2/rhel/6/x86_64/zabbix-release-2.2-1.el6.noarch.rpm`

２．Zabbix Proxyパッケージをインストール
　　途中のメッセージには「y」を入力
`sudo yum install zabbix zabbix-proxy zabbix-proxy-mysql`

３．zabbixサーバ側から監視したりしたいので、agentを導入
`sudo yum install zabbix-agent`

４．mySQLのインストール
`sudo yum install mysql-server`

５．MySQLの起動
`sudo /etc/init.d/mysqld start`

６．Zabbixデータベースの作成及び権限付与
`mysql -uroot
mysql> create database zabbix character set utf8 collate utf8_bin;
mysql> grant all privileges on zabbix.* to zabbix@localhost identified by 'zabbixのDBパスワード';
mysql> flush privileges;
mysql> exit
`

７．Zabbixデータベースのスキーマ作成
`cd /usr/share/doc/zabbix-proxy-mysql-2.2.4/create
mysql -uroot zabbix < schema.sql`

８．Zabbix Proxyの設定
`sudo vi /etc/zabbix/zabbix_proxy.conf`

ファイルの変更箇所のみ記述しています。
```proxy.conf
Server=[Zabbixサーバのホスト名orIPアドレス］
Hostname=［ZabbixProxyサーバのホスト名］
DBHost=localhost
DBName=zabbix
DBUser=zabbix
DBPassword=［Zabbixデータベース作成時のパスワード］
```

９．サービスの起動
`sudo service zabbix-proxy start`

１０．実行中の確認
`sudo service zabbix-proxy status`

以下のようになれば起動しているようです。
`zabbix_proxy (pid 5732 5731 5730 5729 5728 5727 5726 5725 5724 5723 5722 5721 5720 5719 5718 5717 5716 5715 5714 5713 5712 5711 5710 5707) is running...`

１１．サービスの自動起動設定
`sudo chkconfig zabbix-proxy on`

１２．サービスの自動起動設定の確認
`sudo chkconfig --list zabbix-proxy`

実行結果
`zabbix-proxy    0:off   1:off   2:on    3:on    4:on    5:on    6:off`

#AWSセキュリティグループの設定

セキュリティグループやホスト定義などをいじくった結果、下記画像のようであることが分かった。（間違ってたら是非指摘を・・・・）

画像のように各セキュリティグループを許可してください。

![ZabbixProxy1.jpg](https://qiita-image-store.s3.amazonaws.com/0/47012/1257ddc5-7bf6-6b78-f880-a888537375b2.jpeg)

#Zabbixサーバの設定

１．Zabbix管理コンソールを開き、「管理」→「分散監視」を選択します。
　　下記画面が表示されるので、「プロキシの作成」をクリックします。

![zabbixServer1.jpg](https://qiita-image-store.s3.amazonaws.com/0/47012/871fab83-9d02-503a-41ac-8c3afebbc86f.jpeg)


２．「プロキシ名」にZabbixProxyインストール時のHOSTNAME（zabbix_proxy.conf）を入力します。

![ZabbixServer2.jpg](https://qiita-image-store.s3.amazonaws.com/0/47012/6ea9e83f-23c4-6832-8c63-85eb038eef52.jpeg)

手動でZabbixAgentを設定する場合は、上記でその他ホストのところから追加します。
または、ホストの設定画面で「プロキシによる監視」にZabbixProxyを選択します。

#Zabbix Agentの設定

インストール等は省略します。

Agentの定義ファイルを修正します。
`sudo vi /etc/zabbix/zabbix_agentd.conf`

変更箇所のみ記述します。（自動登録時の定義です）
```zabbix_agent.conf
Server = ZabbixProxyのIPアドレス
ServerActive = ZabbixProxyのIPアドレス
HostnameItem=system.hostname
HostMetadata=自動登録の判定に使用する値を入力
```

#経路確認
◆行きの確認
①ZabbixServer→ZabbixProxy
条件１：以下コマンドを実行してバージョンが返ってくること
`zabbix_get -s ZabbixProxyのIP -k agent.version`

②ZabbixProxy→ZabbixAgent
条件１：以下コマンドを実行してバージョンが返ってくること
`zabbix_get -s ZabbixAgentのIP -k agent.version`

◆帰りの確認
①zabbixAgent→ZabbixProxy
条件１：以下コマンドを実行して空白が返ってくること
条件２：タイムアウトしないこと
`zabbix_get -s ZabbixProxyのIP -k agent.version`

②zabbixProxy→ZabbixServer
条件１：以下コマンドを実行して空白が返ってくること（Zabbix-Agentを導入している場合）　
　　　　　　　　　　　　　　　　　　　or
　　　　Connection refusedエラーが返ってくること（Zabbix-Agentを未導入の場合）

条件２：タイムアウトしないこと
`zabbix_get -s ZabbixServerのIP -k agent.version`


しばらく待ってるとZabbixコンソールにZabbixAgentが表示されるはずです！！
Apache + node-http-proxy(v1.0)でwebsocket対応のリバースプロキシを作る

簡易版です。https://gist.github.com/novi/1830085
を参考にさせていただきました。

``` lang:httpd.conf
Listen 8081

NameVirtualHost *:8081

<VirtualHost *:8081> 
  DocumentRoot /path/
  ServerName www.example1.com
  ServerAlias example1.com *.example1.com
</VirtualHost>

<VirtualHost *:8081>
  DocumentRoot /path/
  ServerName www.example2.com
  ServerAlias example2.com *.example2.com
</VirtualHost> 
```

``` lang:http-proxy.js
var http = require('http');
var httpProxy = require('http-proxy');

var normalProxy = new httpProxy.createProxyServer({
	target: {
	host: 'localhost',
	port: 8081
}});
 
var webSocketProxy = new httpProxy.createProxyServer({
	target: {
	host: 'localhost',
	port: 3000
}});
	
var server = http.createServer(function ( req, res ) {
	if (req.headers.host == 'example1.com') {
		normalProxy.web( req, res );
	} else if (req.headers.host == 'example2.com') {
		webSocketProxy.web( req, res );
	} else {
		res.writeHead(404);
		res.end();
	}
});

server.on( 'upgrade', function( req, socket, head ) {
	webSocketProxy.ws( req, socket, head );
});
server.listen(80);
console.log('It Works!');
```
android studio 8.2 でlibsにjarを入れたときのread only エラーについて


# 問題
android studioでファイルをフォルダからドラッグ&ドロップで移動しようとするとread onlyとエラーが表示されてしまう

# 解決方法
ファイルをコピーして、libsでペーストするとファイルを移動できます。
http://stackoverflow.com/questions/24069522/why-does-it-keep-say-refactoring-cannot-be-performed-when-i-copy-a-jar-file-in
GithubにあるLaravel関連のプロジェクトをちょびっとまとめてみた

Githubに上がっているLaravel関連のプロジェクトをStar数の多いものを中心にまとめてみました！

# Laravel-4-Generators

モデル、ビュー、コントローラなどの作成の手助けになるパッケージです。

例えば以下の様なコードを打つと名前に合ったmigrationファイルを作成してくれたりします。

    php artisan generate:migration create_post_table

この場合はpostテーブルを作成してくれます。

ちなみにLaravel関連のプロジェクトではLaravel本体の次にStar数が多い2083になりますので、
注目度の高いパッケージですね！

https://github.com/JeffreyWay/Laravel-4-Generators


# Laravel-4-Bootstrap-Starter-Site

Laravelのサイト作りのテンプレートを提供しているパッケージです。

サイト作りに必要なものはまるっと入っていて、単純に起動させてみると以下の様なサイトが表示されます。


![20140712024354.png](https://qiita-image-store.s3.amazonaws.com/0/39382/1a1de32d-6441-531e-3f86-1f7819819f32.png)



Boostrapを使ったサイトになっていて、Confideを使ったユーザ登録、ログイン機能が入っている他、
Entrustを使ったパーミッション管理、バリデーションにはArdentを使っていたりしますので
ちょろっとLaravel触ってみたい！って感じにはうってつけのパッケージです！

https://github.com/andrewelkins/Laravel-4-Bootstrap-Starter-Site


# Laravel-Administrator

ECサイトなどによくある管理画面が提供されているパッケージです。

イメージとしては以下な感じ。

![20140714003231.png](https://qiita-image-store.s3.amazonaws.com/0/39382/a42bc1d5-1680-de5a-44f4-b9a12ea40810.png)


導入までの手順が結構あるのですが、それを差し引いてもとても便利なパッケージです！

https://github.com/FrozenNode/Laravel-Administrator


# former

デザインが簡単に作成出来るパッケージです。

デザインを手掛ける際にTwitterBootStrapを使ってCSSゴニョゴニョとかやりますが、
このformerを使えばそれが凄くスッキリデザインできます。

作者のAnahkiasenさんによる分かりやすい例が以下になります

    // Laravel
    <div class="control-group">
      {{ Form::label('input01', __('validation.attributes.input01'), array('class' => 'control-label') )}}
      <div class="controls">
        <div class="input-prepend input-append">
          <span class="add-on">@</span>
          {{ Form::text('input01', 'myname', (Input::get('input01', Input::old('input01')), array('class' => 'input-xlarge')) }}
          <span class="add-on">$</span>
        </div>
        <p class="help-block">This is an help text</p>
      </div>
    </div>

    // Bootstrapper
    echo Form::prepend_append(
      Form::control_group(
        Form::label('input01', __('validation.attributes.input01')),
        Form::xlarge_text('input01'),
        (Input::get('input01', Input::old('input01', 'myname'))),
        $validation->errors->get('input01'),
        Form::block_help('This is an help text')
      ),
      '@', '$'
    );

    // Former
    Former::xlarge_text('input01', 'Text input')
      ->blockHelp('This is an help text')
      ->prepend('@')->append('$')
      ->value('myname')


このように、今までがっちり書いてたものがこのFormerを使えば数行で済むよ！ということです。
素晴らしいですね！

Former側で覚えないといけないこともありますが、使いこなせるようになれば楽に済みそうですね！


https://github.com/Anahkiasen/former


# Laravel-Excel

Excelを出力しよう！ってなパッケージです。

使い方は簡単で空のExcelを出力する場合は単純に以下のようにすればOK。

    Excel::create('Laravel Excel', function($excel) {

        $excel->sheet('Excel sheet', function($sheet) {

            $sheet->setOrientation('landscape');

        });

    })->export('xls');


これだけでExcelが出力されます。
セルの操作もほぼほぼ全ての操作が出来たり、インポート機能とかもあったりするので、
Excelを使わなければいけない人はこのパッケージ使ってみるのはどうでしょう？

https://github.com/Maatwebsite/Laravel-Excel





というわけで凄くザクッと説明しましたが、まだまだ色々と面白いパッケージがあったりするので、
是非githubでlaravelを検索してみてください！
2点間の距離と角度と座標の求め方

#２点間の距離と角度と座標の求め方

位置情報の座標の求め方は[こっちを合わせて参照](http://qiita.com/Hoshi_7/items/f9122b6158376ab0afa7)すれば緯度経度も出せるんじゃないでしょうか

一年の以上の時を経て変数渡しのミスがとれました！
デバイス・言語に限らずデフォルトのWidgetから自由になりたいとおもったら、
sin、cos、tanから逃げられないと25くらいで気がついて、
慌てて三角関数の本を買ったけど結局、読んでない無学なプログラマは僕だけはないと思う。

なぜ高校の授業中にこち亀を読んでしまったのかとか、
授業をすっぽかして、近所のファミブ(FamilyBookという大型レンタルビデオ・本・ゲーム等を扱う北関東とかにあるチェーン店)にいってしまったのかと嘆いてもしかたがない、親や先生の言う事は聞くべきですね。

ブログ等に昔メモったが、プログラミングで使うたびにQiitaに移していく。

Javaで記載しますので他言語は適時読み替えください。
Mathに当たるライブラリは一般的に商用でつかうような言語なら、まずありますので心配はいらないかと。

念のため直交座標ABの概念図を載せておきます。
![Untitled (1).png](https://qiita-image-store.s3.amazonaws.com/0/43688/a5f88781-8ae6-6026-9714-a7484be063e7.png)

##２点間の距離
理屈はいい公式がわかれば。
いやいや理屈は他の優秀なブログ等に譲る。

```lang:直交座標A(x,y)とB(x2,y2)の間の距離を求める関数

protected int getDistance(double x, double y, double x2, double y2) {
    double distance = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y));

    return (int) distance;
}
```

##２点間の角度
```lang:ABの角度を求める関数
protected double getRadian(double x, double y, double x2, double y2) {
    double radian = Math.atan2(y2 - y,x2 - x);
    return radian;
}
//radianをdegreeに変換
double degree = arcLineMargineRadian * 180d / Math.PI;
```

##角度(θ)と距離が分かっている場合に座標Bを求める方法
```lang:θと距離から座標を求める処理
/*
  θ(degree)にMath.PI / 180を掛けているのはdegreeをradianに変換している
  radiusは半径である、距離とは半径を求めているのと同じ
*/
double  radian = degree * Math.PI / 180;
y2 = Math.sin(radian) * radius;
x2 = Math.cos(radian) * radius;
```

#番外
##起点までの距離がわかっている座標Aから、特定の角度(alpha)へ等距離で回転した場合の座標Bを求める方法

```lang:起点の距離がわかっている座標A(x1,x2)から、特定の角度(alpha)へ回転した場合の座標B(x2,y2)を求める
x2 = x1 * Math.cos(alpha) - y1 * Math.sin(alpha)
y2 = x1 * Math.sin(alpha) + y1 * Math.cos(alpha)
【http://www.kodama-lab.com/seminar/javalang/ex02/rotate2.html】
```
##最後に
たぶんあってる。間違っていたら編集リクエストくらはいm(__)m
hipchat-cliでHipChat API v2を使ってみる

https://www.hipchat.com/docs/apiv2
Pythonなんて入ってないしかもしれないし、PerlにしたってLWP入れないとだし、不思議なことにcurlは入ってたので、[hipchat-cli](https://github.com/hipchat/hipchat-cli)を使うことになり、これをAPI v2に対応させたので使ってみようと思った。

```
$ hipchat_room_message -h
Usage: hipchat_room_message -t <token> -r <room id> -f <from name>

This script will read from stdin and send the contents to the given room as
a system message.

OPTIONS:
   -h             Show this message
   -t <token>     API token
   -r <room id>   Room ID
   -f <from name> From name
   -c <color>     Message color (yellow, red, green, purple or random - default: yellow)
   -m <format>    Message format (html or text - default: html)
   -i <input>     Message to send to room, allows you to specify input via command line instead of stdin
   -l <level>     Nagios message level (critical, warning, unknown, ok, down, up). Will override color.
   -n             Trigger notification for people in the room (default: 0)
   -o             API host (api.hipchat.com)
   -v <version>   API version (default: v1)
```

https://github.com/hipchat/hipchat-cli/pull/16
かれしに「”A"とかｗｗｗなんでｗｗｗ」っていゎれた…
ゎたしわvってverboseかversionぢゃんって思ったの…
Express から NPM をフロントエンドに expose する


browserify とか導入するのが面倒な時に。

バックエンド側:

```javascript
var fs = require('fs');
var path = require('path');
var express = require('express');

app = express();

app.get('/node_modules/:name', function (req, res) {
  var dir = path.resolve('node_modules', req.params.name);
  fs.readFile(path.join(dir, 'package.json'), { encoding: 'utf8' }, function (err, data) {
    if (err) throw err;
    var pkg = global.JSON.parse(data);
    fs.readFile(path.join(dir, pkg.main), { encoding: 'utf8' }, function (err, data) {
      if (err) throw err;
      res.setHeader('Content-Type', 'text/javascript; charset=UTF-8');
      res.send(data);
    });
  });
});

app.listen();
```

フロントエンド側 HTML:

```html
<script src="/node_modules/d3" charset="UTF-8"></script>
<script>
  console.log(d3.version);
  // -> 3.4.8
<script>
```
おみくじプログラムの改造の自分バージョン


ぼくと同じ、JavaScriptを勉強し始めの@cervomansanさんに感化され、自分バージョンの「おみくじプログラム」を作った。

ベースは[ドットインストール](http://dotinstall.com/lessons/omikuji_js)のもの。

以下の改造をしてみた。

- ドットインストールでの改造は組み込み済み
- 外部jsファイル化した（onclickが学べた）
- 外部ファイルにしたので、asyncとdeferを指定して非同期読み込みをかけた
- 結果を画像として出力するようにした
- 乱数で結果を出し、画像ファイル名にそのまま当てた
- jsとCSSのセレクタ一貫性を理解して、キャメルケースでIDを指定した

日本版StackOverFlowと名高いQiitaで、フィードバックを頂きたくて書きました！

````html:html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>おみくじ</title>
</head>

<body>
  <h1>おみくじ</h1>
  <input type="button" value="あなたの運勢は？" id="jsButtom">
  <p>あなたの運勢は...
    <img id="jsResult"></img>
  </p>
  <script src="js/omikuji.js" async defer></script>
</body>

</html>
````

````JavaScript:JavaScript
var jsButtom = document.getElementById('jsButtom'); //ボタンをIDでgetしてキャッシュ
jsButtom.onclick = function() { //ボタンがonclickされた時に起きる処理
  var omikuji = ["daikichi", "chukichi", "shokichi", "suekichi", "kyo"];
  var result = Math.floor(Math.random() * omikuji.length);
  var imgFolder = "img/"; //フォルダパスをキャッシュ
  var fileExtension = ".png"; //ファイル拡張子をキャッシュ
  document.getElementById('jsResult').src = imgFolder + omikuji[result] + fileExtension;
};

````

````Image:Image
img/daikichi.png
img/chukichi.png
img/shochiki.png
img/suekichi.png
img/kyo.png
````

## 問題点
- 乱数で配列から結果を取り出し、画像名にそのまま当てたのは、スマートなのか？
- 応用性がでるように、imgFolderとfileExtensionという変数で画像の場所と拡張子を指定できるようにしたが、スマートなのか？
- `jsButtom.onclick`の`onclick`が`onClick`では動かなかった謎

## セレクタのはなし
- jsでは変数にハイフンは使えない
- jsが触るID・Classにはプレフィックスを付けてわかりやすくしたい
- jsの変数記述などでセレクタと変数をあわせたい

以上の理由からキャメルケース使用に着地したのだが、良いのでしょうか？

# まとめ
@cervomansanさんを見習い、Qiitaに自分の勉強過程を書いてみたが、すごく良い！
とりあえず動いたので、自分のこのコードがもっとスマートに書ける方法が知りたい。諸先輩方、なにかありませんか？
いまだ変数・関数・オブジェクトの単語の使い分けが分からない。。。

@cervomansanさんと共にJavaScriptを覚えていきたいです！

# その後
【あなたの運勢は？】ボタンを押しまくってひとりで楽しんでる。
こんな気持ちは小学校以来？

他のカスタム予定としては、

- 結果に対するラッキーアイテムを表示したい（if/elseif/elseなのかwitch/caseどっちが正しいの。。。）
- クッキーを使って前の日にちのおみくじの結果を出したい
- あわせてカレンダーを出してみて、今日の日付を強調しつつ前の日付へのリンクを付けたい
- どうせなら結んでみたい（canvasで）
単位変換系ライブラリ


| ライブラリ | ライセンス |
|:-:|:-:|
| [UnitsKit](https://github.com/stevemoser/UnitsKit) |MIT |
| [DDUnitConverter](https://github.com/davedelong/DDUnitConverter) | MIT |
| [MKUnits](https://github.com/michalkonturek/MKUnits) | MIT |
| [HHUnitConverter](https://github.com/HiveHicks/HHUnitConverter) | MIT |
Windows7&CygwinでRictyフォント生成

Ubuntu環境と同じようにWindows7のCygwin環境でRictyフォントを生成したら
日本語の文字間が開きすぎて変なフォントになってしまた。
でもちゃんと解決策があったので手順を覚え書き。

# 各種データダウンロード

[Rictyホームページ](http://save.sys.t.u-tokyo.ac.jp/~yusa/fonts/ricty.html) に掲載されている手順を参考に
各サイトから必要データをダウンロードする。
ライセンスの関係で自分でフォントを合成せねばならぬのだ！

## Ricty 合成スクリプト取得

[Rictyサイト](http://save.sys.t.u-tokyo.ac.jp/~yusa/fonts/ricty.html) に掲載されている Current Version をダウンロード。
この時点では GitHub.com に公開されていたので、GitHub の DownloadZip ボタンから取得。

## Inconsolata フォント取得 

[Inconsolata公式サイト](http://levien.com/type/myfonts/inconsolata.html "Inconsolate") からTrueTypeフォントをダウンロードします。

## Migu 1M フォント取得

[M+とIPAの合成フォント](http://mix-mplus-ipa.sourceforge.jp/ "Migu 1M") から Migu 1M をダウンロードします。
Zipファイルなので解凍しておく。

## fontforgeインストール

Cygwin上で ``apt-cyg install fontforge`` を実行。
apt-cygコマンドに慣れきってしまたので、他の方法では知らん。


# 合成

解凍したRictyのディレクトリにInconsolata.otfファイルとmigu-1m-regular.ttf, migu-1m-bold.ttfをコピーする。
CygwinでRictyを解凍したディレクトリに移動して下のコマンドを実行。

```bash
$ ./ricty_generator.sh Inconsolata.otf migu-1m-regular.ttf migu-1m-bold.ttf
```

時間かかるのでお茶でもすすって待つ (　ﾟДﾟ)⊃旦 ﾁｬﾉﾒﾔ
出来上がったフォントそのままだと文字間が広すぎて使えないので次のコマンドを実行することでフォントか修正される。

```bash
$ misc/os2version_reviser.sh Ricty-*.ttf RictyDiscord-*.ttf
```

変更前のフォントが.bak拡張子ファイルとして残されている。
.ttfフォントをダブルクリックして開いたフォントビューワーからインストールすれば完了だ。


#番外編 powerline

せっかくなので、vimとかtmuxとか見た目がかっこいい感じになるpowerline各種に対応させるためにパッチを当てよう。
まぁこの段階ですでにfontpatcherは入手済みである事が多いと思うけど、まだって時の為に単独で入手してパッチを当てる。

```bash
$ git clone https://github.com/Lokaltog/powerline-fontpatcher.git
$ fontforge -lang=py -script /path/to/powerline-fontpatcher/scripts/powerline-fontpatcher /path/to/Ricty-Regular.ttf
```

格パス(/path/toの部分)は実行環境に合わせて変えておくれ。
元のフォントと同じディレクトリにRicty Regular for Powerline.ttfが生成される。
このフォントをインストールしてvimなりPuTTYのようなターミナルソフトのフォントに設定すればおk。
ただ、Windowsのレンダリングエンジンはきれいにフォントを出力できないので、
PuTTYのアンチエイリアス設定じゃないときれいに表示してくれないのが欠点。
余裕があればMacType(だっけ？)とかのレンダリングエンジンを別途入れた方がいいね。


#Cygwin(Mintty)にフォント反映できない

ここまでやったなら、当然CygwinにもRicty powerlineフォント設定したいでしょ？
でも設定画面からフォント選択すると・・・
「その名前のフォントはありません。
フォント一覧からフォントを選んでください。」
とか出るの。
あのー・・・一覧から選択したんですがーーー！！！
と文句を言っても解決しないので解決方法を。
Cygwinにログインした後、ホームディレクトリ直下にある。.minttyrcファイルを編集。
以下の項目を編集または追加設定する。

```text
Font=Ricty for Powerline
FontHeight=11
```
これで快適ライフを送れるね！

---

参考サイト

- http://save.sys.t.u-tokyo.ac.jp/~yusa/fonts/ricty.html
- http://news.7zz.jp/font/4390.html
トップレベルが配列な JSON を、Jackson で POJO を含む List にデシリアライズする方法

以下の JSON のように **トップレベルの要素がオブジェクトではなく配列** であるケースにおいて、[Jackson](https://github.com/FasterXML/jackson) を用いて POJO を含む List オブジェクトにデシリアライズする方法をメモメモしておきます。

```json
[
  {
    "foo": "ほげ",
    "bar": 1
  },
  {
    "foo": "ふが",
    "bar": 12
  }
]
```

答えは以下のとおり、 ``TypeReference`` を用いれば OK。

```java
import org.codehaus.jackson.map.ObjectMapper;
import org.codehaus.jackson.type.TypeReference;

import java.io.IOException;
import java.util.List;

/**
 * オブジェクトを含んだ配列の JSON を、POJO なオブジェクトを含むリストにデシリアライズするデモ。
 *
 * @author KOMIYA Atsushi
 */
public class ListDeserializationDemo {
    public static class MyPOJO {
        public String foo;
        public int bar;
    }

    public static void main(String[] args) throws IOException {
        String json = "[ {\"foo\": \"ほげ\", \"bar\": 1 }, {\"foo\": \"ふが\", \"bar\": 12 } ]";

        // これだと正しくデシリアライズできない
        // リストの要素にアクセスしようとしたところで ClassCastException が発生してしまう
        List<MyPOJO> pojos1 = new ObjectMapper().readValue(json, List.class);

        // このように、org.codehaus.jackson.type.TypeReference の具体的なクラスを定義してあげる必要がある
        List<MyPOJO> pojos2 = new ObjectMapper().readValue(json, new TypeReference<List<MyPOJO>>() {});
    }
}
```
SVNからGitへ移行した際のタグ付けを行うスクリプト

# SVNからGitへ移行した際のタグ付けを行うスクリプト

## SVNに全然タグが打たれてないじゃない！

Ω ΩΩ< な、なんだってー!!

## wikiに書かれてた

リビジョンとリリースバージョンがwikiに記載されてた

## スクリプトでタグ付けする

### wikiを元に，リビジョンとタグの名前をリスト化

gittags.txtは，リビジョン番号とタグの名前をスペース区切りで記載していく

```text:gittags.txt
1207 v1.4.0
1104 v1.3.9
900 v1.3.8
864 v1.3.7
743 v1.3.6
644 v1.3.5
845 v1.3.4
521 v1.3.3
500 v1.3.2
452 v1.3.1
240 v1.3.0
102 v1.2.8
100 v1.2.7
```

### タグの作成スクリプト

trunk@リビジョン番号 というコミットメッセージを元に，該当のGitハッシュを検索

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

# gittags.txtから読み込んむ
[ -f gittags.txt ] || exit 1
while read line
do 
  # 配列に入れる
  a=($line)

  # gitの対象リビジョンを取得
  hash=`git log --grep "trunk@${a[0]} " | sed -n -e "s/^commit\s\(.\+\)/\1/p"`

  # タグ付け
  git tag ${a[1]} ${hash}
done < gittags.txt
```

### 間違えてタグ付けしてしまったときの全削除スクリプト

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

array=`git tag`
git tag -d $array
```
[SublimeText2] JavaScriptのクラス定義snippet

(Sublime Text 2のインストールフォルダ)/Packages/JavaScriptに以下のファイルを置く

ファイル名: class.sublime-snippet

~~~xml:class.sublime-snippet
<snippet>
    <content><![CDATA[var ${1:className} = function() {
    ${2:superClass}.call(this);
};
${1:className}.prototype = Object.create(${2:superClass}.prototype);
]]></content>
    <tabTrigger>class</tabTrigger>
    <scope>source.js</scope>
    <description>class</description>
</snippet>
~~~

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/30568/282d58c9-a98d-d306-7a9a-b7d206e1377a.png)

![ss1.png](https://qiita-image-store.s3.amazonaws.com/0/30568/f18bf365-90b5-2ad5-071e-9b8366695d2c.png)
自分の bash のプロンプト設定

を公開してみる
=====

```bash
gitps1=":"
if [ -r /usr/local/etc/git/git-prompt.sh ]; then
  . /usr/local/etc/git/git-prompt.sh
  gitps1="__git_ps1"
fi


if [ "${TERM}" = "linux" ]; then
  export PS1='\[\e[32m\]\u@\h \[\e[33m\][\w]\[\e[0m\]\$ '
else
  export PS1='\[\e]0;\w\a\]\[\e[32m\]\u@\h \[\e[33m\][\w]$(${gitps1})\[\e[0m\]\$ '
fi
```

gitps1 の中は最初は「何もしないコマンド ":"」を入れておき、 git-prompt.sh が存在した場合のみ git の branch を表示させる関数に差し替える．

PS1 の中の説明は色を付けるコードがゴチャゴチャしているが、表示する内容にかかわっているのだけに直すと以下のコードとなる．

```bash
PS1='\u@\h [\w] \$'
```

* \u はユーザー名
* \h はホスト名
* \w は自分がいるPathの表示
* \\\$ は自分が一般ユーザーなら \$ を root なら \# を表示する

他の option を知りたければ

```bash
$ man bash
```

の 「PROMPTING」の章に色々と載ってるので参考にしてみてください．

色コードに関してはまた後日
よく使う監視コマンド

よく使う監視コマンド
==========
下記のコマンドは、全て15秒間隔で表示する。

vmstat
------
メモリーやCPUの負荷率や使用状況を確認する。
メモリに注目している。

```
$ vmstat 15
```

iostat
------
ディスク I/Oの利用状況を確認する。
I/Oに注目している。

```
$ iostat 15
```
netstat
------
ホストのネットワーク統計や状態を確認する。
ネットワークに注目している。

```
$ netstat 15
```

top
------
サーバーの稼働状況を確認する。
いろいろ簡単にみれる。

```
$ top -d15
```

sar
------
CPUやネットワーク、メモリ、ディスク等のシステム情報を確認する。
いろいろ細かくみれる。

```
$ sar 15
```
ScalaのコンパイルはVirtualBox環境だと5倍時間がかかる


## 結論 
-> vmwareを使うと速い

## 経緯
私達のチームでは、開発環境と本番環境の差をなるべく無くすために、VagrantとDockerを使って環境を構築しています。Vagrantで動作しているのはUbuntu 14.04 x64です。VirtualBoxにはGuest Additionsがインストールされている状態です。

ある日、同僚からdockerコンテナでScalaのソースをコンパイルすると遅すぎるとの苦情がきたのでどこが遅いか調べてみることにしました。

どのくらい遅いかというと、macでコンパイルすると6秒で完了するものが、Dockerコンテナ内だと30秒かかる。5倍ぐらい時間がかかってます。

## Dockerコンテナが遅いのか? -> 遅くない

まずDockerコンテナが遅いのかどうかを知らべてみることにしました。
そのために同じScalaの環境をゲスト環境(Ubuntu 14.04)にも構築して実行してみると、Dockerコンテナと差はなく30秒ほどかかります。少なくともDockerコンテナが遅いということでは無いということが判明しました。

## VirtualBoxが問題なのか?

ということは、VirtualBoxで走らせてるからここが問題だろうということで、I/O APICをオンオフしたり、VT-xをオンオフしてみたりとVirtualBoxのパラメタを調整してみましたが変化は確認されず、案の定余計遅くなったりしました。割り当てCPU数は2CPUsから4CPUsまで試しましたが、3CPUsでは1〜2秒程早くなるものの抜本的解決には至りませんでした。4CPUsでは逆に遅くなることがありました。mac側の物理コア数が4つなのでこれ以上は試していません。メモリも同様に1G〜2Gと試してみましたが変化なし。


## VirtualBoxが遅かった

これはもうVirtualBoxが遅いんだろう、ということで試しにVMWareの形式にコンバートして実行してみると、Scalaのコンパイルは6秒で完了するではないですか! 仮想化のオーバーヘッドが多少あるだろうと思うのですが、厳密なベンチマークを取得していないので詳細はわからないのですが、少なくとも体感的にはVirtualBoxより断然速いです。

いままでVirtualBoxがそこまで遅いとは思ってなかったけど、コンパイルのような重い処理を実行させると処理速度の遅さが顕著に表われました。


## VagrantのVMWareプロバイダ

Vagrantは、有料のオプション(いまは$79)で[VMWareプロバイダ](http://www.vagrantup.com/vmware)を使うことができます。

ライセンスを購入すると、license.licファイルが送られてくるので、下記コマンドでプラグインとライセンスを認識させます。

```
vagrant plugin install vagrant-vmware-fusion
vagrant plugin license vagrant-vmware-fusion license.lic
```

plugin install vagrant-vmware-fusionは、jsonの拡張をコンパイルするために、command line toolsが必要です。インストールされていない場合は、```xcode-select --install``` としてインストールします。

しかし現在のvagrant 1.6.3ではvagrantcloudから取得したvmwareのboxは、vmware_desktopと認識されてしまうようで、vmware_fusionプロバイダでは実行できないよ、と怒られてしまいます。

```
The box you attempted to add doesn't match the provider you specified.

Provider expected: vmware_fusion
Provider of box: vmware_desktop
```



これは直接box addすることで回避できました。この問題は修正中のようです。
追記: 1.6.5で修正されていました。

```vagrantcloudのboxを直接addする
wget https://vagrantcloud.com/reoring/ubuntu-14.04-with-docker/version/5/provider/vmware_fusion.box
vagrant box add ubuntu vmware_fusion.box
```

## boxファイル

今回VirtualBoxとVMWareに使ったBoxファイルは[vagrantcloud/reoring/ubuntu-14.04-with-docker](https://vagrantcloud.com/reoring/ubuntu-14.04-with-docker)で公開しています。

## packer
このboxファイルは、[packer](http://www.packer.io/)を使ってビルドしています。[github/reoring/packer-ubuntu-14.04-docker](https://github.com/reoring/packer-ubuntu-14.04-docker)

## おまけ

Vagrantfileでvmwareのcpu数とメモリ数を設定する方法

```
config.vm.provider "vmware_fusion" do |v|
  v.vmx["memsize"] = "1024"
  v.vmx["numvcpus"] = "2"
end
```
Docker Registry Hub にイメージをpushしたい


[Add Repository]ページでリポジトリを作成する

Docker Registryにログインする

```console
$ sudo docker login
```

イメージをビルドする。この際`username/image_name` という名前にする。

```console
$ sudo docker build -t suin/apache2 .
```

イメージをプッシュする

```console
$ sudo docker push suin/apache2
```



[Add Repository]: https://registry.hub.docker.com/account/repositories/add/
複数のモデルオブジェクトを同時に更新する方法


#### いろいろ参考にさせてもらいました


 - すごく参考になった記事：
[Railsでネストしたモデルをまとめて受け取って保存する](http://o.inchiki.jp/obbr/81)

#### なにが問題か
関連モデルの情報を更新したいが、実際のアソシエーションは、1対多ではなく、関連テーブルを挟んで多対多になってしまっていて、一般的なやり方だと上手くできない。

```ruby:model.rb
attr_accessible :companies_attributes
belongs_to: companies   # ここが has_many になっている。。
accepts_nested_attributes_for :companies
```


特に困ったのがformの表示について。
#### 問題１：


> ネスト対象のフォームを作成する fields_for で指定するのは
アソシエーション名の シンボルか文字列 であり、例えば @article のように指定してはならない。

上記のルールを守ると、新規登録用に新しいオブジェクトのフォームも用意してくれてしまう。

#### 問題２：
また、関連づくオブジェクトの指定ができない。

### 解決策：
fields_forの第二引数にインスタンスを指定すると新規登録用フォームは表示されない模様。

```ruby:view.rb
<%= f.fields_for :companies, @mf_company.belongs_to_company do |c| %>
```
railsでのjsプラグインの使い方


自分用めもめも。


## javascriptプラグインはどこにおくの？
#### 1.ファイル自体の置き場所

`app/assets` ・・・独自のファイル
`lib/assets` ・・・アプリケーション外で共通のもの　
`vendor/assets` ・・・ プラグインとか　←ココ！



vendor
 |
 |----/assets
　 |
　 |---- /javascripts
　　 　|
　 　　|---- /tablesorter　　←こんなかんじ？？



#### 2.ファイルの読み込みの設定

```application.js
//= require_tree ../../../vendor/assets/javascripts/.

//= require_directory .
```

上の１文を追加。
もちろん、`require_directory`とか`require_tree`の前に呼んでおかないと、プラグインの適用ができない（＞＜）
cssも同じ！

```application.css
*= require_tree ../../../vendor/assets/stylesheets/.
```


## tablesorterを使ってみよう！
まずは__jquery.tablesorterをダウンロードしてそこからjsファイルとthemaディレクトリのblue/greenを取ってくる。


```js
1  $(function(){
2	    $(document).ready(function()
3	        {
4	            $("table#analysis").tablesorter();
5	        }
6	    );
7	})

```

```view
<table id="analysis" class="tablesorter">
```

この２つは必須。
あとはcssのstyle.cssでうまく表示を変更してあげて下さい。
git diff の option 色々

git diff の option を見ていく
=====

Git のコマンドには様々な option が指定できるようになっている．
自分も全部は知らないけれども、ちょくちょく使ってる option をここで色々と紹介していきます．
今回 option を紹介するのは以下のコマンド．

```bash
$ git diff
```

git diff --cached
-----
大体のgitユーザーは一度は目にするであろう --cached option.
git diff を option 無しで使うと ”staging されていないファイルにおける変更” が表示されるが，この --cached option を使うと ”staging されたファイルにおける変更” が表示される．
ちなみに ”staging されているファイル” というのは git add コマンドで追加されたファイルの事．

これは「あれ、今 commit しようとしてるファイルの変更ってそもそもなんだったっけ？」といった時にはもちろん，ある程度変更したファイルが多くなってしまった時に「このファイルとこのファイルの変更だけが見たい」といったような時にも「一旦 git add して git diff --cached で確認する」といった使い方ができたりもします。 「今自分が見たファイルは何だったのか」も git status コマンドで一発で把握できるから以外と便利だったり．

git diff --ignore-space-change
-----
これは知ったら重宝する人が多いんじゃないかな？と思う option．
option の名前からも予想できるようにインデント等の変更による「空白の変更」を無視するもので、複数人で開発していた時にコードの修正ついでに他の人のインデントを直して commit したんだけど、「どこが自分の変更で、どこがただのインデントの変更かが分からなくなった」といった時に効果を発揮します．
自分は普段 vim のインデント補完を使って自分のインデントを直すんだけど、他の人のコードいじるとファイルのインデント全部を修正しちゃって diff の結果が真っ赤になる事があるので結構重宝してます．

git diff --
-----
準備中

暇な時に随時追加していく予定です．
「こんな option もあるよ！」ってものがあればコメントで教えてもらえれば幸いです．
git diff の option も多いよぉ...
バッチ処理でXdebugが動かなくて困った事件


取り急ぎメモ

vagrantの環境で、Xdebugを使いたかった。
エディターはsublime。
いろいろ調べて、これを追加したのに、sublimeでXdebugが動かない。

```/etc/php.d/xdebug.ini
xdebug.idekey = "sublime.xdebug"
```



## 解決策

1 `.bashrc`に下記1行を追加。

```.bashrc
# User specific aliases and functions
export XDEBUG_CONFIG="idekey=sublime.xdebug"
```

2  sublimeTextのメニューから、プロジェクト(ex. プロジェクト名＝pjとする)を作成

- プロジェクト＞プロジェクトを保存 → プロジェクトを開き直す

3 プロジェクト＞プロジェクト設定から、pj.sublime-projectを開いて、下記のとおり編集

```pj.sublime-project
{
  "folders":
  [
    {
      "path": "web"
    }
  ],
  "settings":
  {
    "xdebug": {
      "path_mapping": {
        "/home/apache2/web" : "/Users/USER_NAME/pj/path"
      },
      "url": "https://url.php",
      "super_globals": true,
      "close_on_stop": true
    }
  }
}
```

`pj`はプロジェクト名
`path_mapping`には、プロジェクトの場所を指定
`url`も同様に、pjのURLを。


## ブラウザからデバック実行する場合

1. chromeで「xdebug helper」という拡張機能を入手
- 設定の「IDE key」にて、`other`を選択し、`sublime.xdebug`を入力後、右のアイコンをクリック
- 「Domain filter」に`URL`を入力し、＋ボタンをクリック

## sublimeText上でのXdebug使用方法

1. sublimeText上でデバッグ開始（ `Ctrl+Shift+F9` or `⌘+Shift+F9` or メニューから`Start Debugging`）
- デバッグ実行
 - ブラウザからデバック実行する場合
     - URL欄の虫アイコンをクリックしてxdebugを実行
     - または、URLの最後尾に`?XDEBUG_SESSION_START=sublime.xdebug`を追加して、実行
 - バッチ処理でデバッグ実行する場合
     -  実行コマンドの最初に`XDEBUG_SESSION_START=sublime.xdebug`を追加して、コマンドを叩く

### その他の便利なショートカット

* 次のブレークポイントまで実行（`Ctrl+Shift+F5` or `⌘+Shift+F5`） 
* ステップオーバー(次の行へ)（`Ctrl+Shift+F6` or `⌘+Shift+F6`） 

他にもたくさんあるので、packageで「xdebug」を検索してショートカットを確認してみてください。







この設定をすると、ちゃんと思っているところでデバッグを止めたり、その表示も→マークが表示されてわかりやすくなった！！


素敵な先輩に教えていただきました！ありがとうございます！素敵！！以上！


## 参照

[Debugging with Xdebug and Sublime Text 3](
http://www.sitepoint.com/debugging-xdebug-sublime-text-3/)
[Debug PHP with Sublime Text 2 and Xdebug on Ubuntu](http://digitaldisseny.com/en/blog/134-debug-php-with-sublime-text-and-xdebug-ubuntu)
[Sublime Text 2 + MAMP + Xdebug でPHPデバッグをする方法](
http://www.calmtech.net/2012/12/18/st2-mamp-xdebug/)
ArchLinuxでGlusterFS

USB接続HDDをBackに使っていたがたまに接続が切れるのでGlusterFSを用意した。

# 設定

```bash:インストール
pacman -Sy community/glusterfs
systemctl start glusterd
systemctl enable glusterd
```

```bash:準備
mkfs.xfs /dev/sdc1 -f
mount /dev/sdc1 /mnt/1tb/
mkdir /mnt/1tb/glusterfs/
gluster volume create 1tb 192.168.100.62:/mnt/1tb/glusterfs/
```

```bash:1tbのglusterを稼働
gluster volume start 1tb
```

## proxmoxからマウント

![スクリーンショット 2014-07-15 13.51.18.png](https://qiita-image-store.s3.amazonaws.com/0/25728/8f887cce-e6b4-ef6b-2c76-4f5c7107cbb3.png)


# volumeの管理

## 

```bash:
# gluster volume status
Status of volume: 2tb
Gluster process						Port	Online	Pid
------------------------------------------------------------------------------
Brick 192.168.100.62:/mnt/2tb/glusterfs			49152	Y	679
NFS Server on localhost					N/A	N	N/A

Task Status of Volume 2tb
------------------------------------------------------------------------------
There are no active volume tasks

# gluster volume stop 2tb
Stopping volume will make its data inaccessible. Do you want to continue? (y/n) y
volume stop: 2tb: success
# ls /mnt/2tb/glusterfs
dump
# gluster volume status
Volume 2tb is not started

# gluster volume start 2tb
volume start: 2tb: success
# gluster volume stop 2tb
Stopping volume will make its data inaccessible. Do you want to continue? (y/n) y
volume stop: 2tb: success
# gluster volume status
Volume 2tb is not started

# gluster volume delete 2tb
Deleting volume will erase all information about the volume. Do you want to continue? (y/n) y
volume delete: 2tb: success
# gluster volume status
No volumes present
# ls /mnt/2tb/glusterfs
dump
```
git log の option 色々

git log の option を見ていく
=====

Git のコマンドには様々な option が指定できるようになっている．
自分も全部は知らないけれども、ちょくちょく使ってる option をここで色々と紹介していきます。
今回 option を紹介するのは以下のコマンド．

```bash
$ git log
```

git log --oneline
-----
多分知ってる人も多いんじゃないかと思うコマンドの一つ．
通常の 「git log」だと

    commit {full-commit-id}
    Author: {author-name} <{author-mail}>
    Date:   {date-time-year-timezone}

        {first-line-comment}

        {another-comment}

といった形式でログが表示されるが、「--oneline」を加える事で

    {first-7-chars-of-commit-id} {first-line-comment}

という、上のような1行形式で表示されるようになる．
日付等ではなく、ログの流れを追いたい時等に便利なのと同時に
「git のログを書く時に1行目は超重要」といわれる理由はここにある．

git log --stat
-----
git log に変更したファイルの簡易情報（ファイル名と変更した行数）を表示するもの．

バグが見つかった場合に、直近で編集したコミットがどれかを追うのに使ったりしてる。
あとは簡単にコミットの雰囲気を掴むのにも有効だったり。
(今思ったけどファイルベースでログを見るとかあるんじゃなかろうか...)

git log -p
-----
git diff を同時に見せてくれるオプション。
便利そうに見えて結構長くなって見づらい/探しづらい事も多々あるのであまり使ってなかったり...

git log --graph
-----
git log の出力に commit の軌跡を見せてくれる option．
普通に見ると commit comment とかでやたらと長ったらしくなるので --oneline option と組合せる事が多い．

```bash
$ git log --graph --oneline
* 9b6d743 commit comment
* 9b56b4e comment
*   a49b6aa Merge branch 'master' of /path/to/repo
|\  
| * f123447 remove old file
| * 3fa194a add new file
| * 7b3eb4f remove backups
* | 3309805 I think I did something
|/  
* ddfa3b5 do comment
* fc499de we are comment
```
こんな感じに．
こうしてみると自分の運用が下手糞なのがバレたりするので気をつけて．最近、複数人と開発してる log の graph 見直した時意味不明すぎて泣いた．

```bash
$ git log --graph --oneline
*   e0a0
|\  
| *   e3cf
| |\  
| * | 79bb
* | | f2e4
* | | 7b17
* | | 2560
| |/  
|/|   
* |   ff5e
|\ \  
| |/  
| *   85fd
| |\  
| | *   07a4
| | |\  
| | | * 0406
| | * | 8e5c
| | |/  
| * | 31f0
| |/  
* | b643
|/  
* 87fa
*   e771
|\  
| * 638e
* | a250
|/   
*   fa0e
|\  
| * fabc
| * f585
| * 9cc2
| *   2bb2
| |\  
| * \   fe62
| |\ \  
| * | | d1c6
* | | | 7126
* | | | 5cf7
* | | |   3dc7
|\ \ \ \  
| | |_|/  
| |/| |   
| * | | a86d
| * | |   4e24
| |\ \ \  
| * | | | 1dba
| * | | | 17fc
| * | | | d9cf
| * | | | 96bf
| | |_|/  
| |/| |   
* | | | 4b36
| |/ /  
|/| |   
* | | 9e84
|/ /  
* | ae31
* | 6bef
```
色んな環境から push とか pull とか相互にしまくってるとこんな事なるから運用方法は気をつけて．
ただ、逆にこの graph がある程度見易くなるように勤める事ができればそれは上手く運用できてると言えるのかな？ とも思ったりはする．

git log --decorate
-----
地味に便利だと思う git log の option の一つ．
この option を使うと git log の結果に 「今存在する branch と HEAD の位置」を表示してくれるようになる．

```bash
$ git log --decorate
commit 4095c83619ce58e6c0263c1435d55892b104780b (HEAD, origin/master, master)
Author: da0shi <email@address.com>
Date:   Wed Jul 16 05:33:13 2014 +0900

    compatibility with php5.3. Don't use function return for empty()
    
    empty(func()) was not enabled in php5.3.3.
```

こんな感じに．
今のbranchの状態とかを把握するのに良くて、 --oneline option と組合せるとさらに確認が楽になったりもする．

git log -n \<number\>
-----
git log で表示するログの数を制御するオプション
```
$ git log -<number>
```
でも大丈夫。

ログ全部が一気にズラッと出ると見づらい時にでも。

暇な時に随時追加していく予定です．
「こんな option もあるよ！」ってものがあればコメントで教えてもらえれば幸いです．

ってか改めて git log の option 調べてみたらベラボウにある...
＜AVFoundation＞動画編集の基本的なしくみを理解する


AVFoundationは似たり寄ったりな長い名前のクラスを多数使用するため、取っ付きにくい部分がありますが、仕組みとしてはとてもシンプルです。クラスを勉強する前にiMovieなどの動画編集ソフトで軽く遊んでみると飲み込みが早いように思います。

まずはコードに入る前に基本的なクラスの働きを、動画の構造体と照らし合わせながら見ていきます。

##はじめに
動画を編集するためには、大きく分けるとAVMutableCompositionとAVMutableVideoCompositionInstructionという２つのクラスを使用します。
まず、AVMutableCompositionで編集したい動画を割当て、AVMutableVideoCompositionInstructionで動画に対する編集内容を設定していくイメージです。
そして最終的にAVAssetExportSessionでビデオファイルに変換させます。
これからこの3つのクラスについての基本的な仕組みを説明していきます。

## AVMutableComposition

下記の図は、AVMutableCompositionクラスを用いて動画をどのように保持していくかを示しています。どこか少しだけiMovieで動画編集する時の様子と似ているようにも思えます。

![動画編集の仕組み1.png](https://qiita-image-store.s3.amazonaws.com/0/42112/bd4264fe-c28d-8023-9963-ccc2503f189f.png "動画編集の仕組み1.png")


このAVMutableCompositionクラスは動画全体を扱います。
動画を挿入したり削除したりする場合はこのクラスを使用します。
また、AVAssetの派生クラスでもあるため、AVPlayerにアセットとして与えて動画を再生することもできます。

**AVPlayerでの使用例**
` AVPlayerItem *playerItem = [AVPlayerItem playerItemWithAsset:AVMutableComposition];`
　※AVPlayerでの動画再生方法は[AVFoundationの基礎知識]
(http://qiita.com/Yuchi/items/1f7a4658c1ee396adfa0)をご覧ください。

AVMutableCompositionはAVMutableCompositionTrackをいくつか保持することができます。
（理由は分かりませんが、私がデバックを行った時は15コまで保持する事ができました。）

###AVMutableCompositionTrack
こちらは動画編集ソフトで言うところの「トラック」で、１コ〜複数コのAVAssetTrackが含まれます。
動画の編集内容はこのAVMutableCompositionTrack毎に指定していくので、どのように編集するかによってトラックの個数やAVAssetTrackの挿入位置などを決めていかなければいけません。

AVMutableCompositionTrackはビデオトラックとオーディオトラックが設定できますので、音楽を入れる場合もこのクラスを使用します。

###AVAssetTrack
ここには編集したい元動画を入れていきます。
単純に元動画をクロップして繋ぎ合わせたい場合は、AVMutableCompositionTrackにこのAVAssetTrackをどんどん追加していきましょう。

##AVMutableVideoCompositionInstruction
AVMutableCompositionでは編集したい動画を保持していきましたが、このクラスはトラックの操作（アニメーションの付加等）を設定していきます。

![動画編集の仕組み2.png](https://qiita-image-store.s3.amazonaws.com/0/42112/d588c2f3-6c0f-8336-48ae-3486e2b11328.png "動画編集の仕組み2.png")

そしてこのクラスもまたAVMutableVideoCompositionLayerInstructionというクラスを複数個保持することができます。

###AVMutableVideoCompositionLayerInstruction
実際にトラックの操作（透過、移動、クロップ）を設定するにはこちらのクラスを利用します。もちろん開始時間、継続時間も同時に設定します。
上の図では1つのAVMutableCompositionTrackに対して1つのAVMutableVideoCompositionLayerInstructionを使用しているイメージとなります。
しかし、1つのAVMutableCompositionTrackに対して複数のAVMutableVideoCompositionLayerInstructionを構築することも可能ですので、より複雑な編集も効率よく行えます。

###AVMutableVideoComposition
AVMutableCompositionと名前は似ていますが、こちらのクラスではAVMutableCompositionに対する付加情報を設定していきます。
具体的には、フレームの長さやレンダリングサイズ、そして先ほどでてきたトラックの操作（AVMutableVideoCompositionInstruction）です。
このAVMutableVideoCompositionをAVPlayerやExportのクラスに渡す事でビデオに付加情報がセットされます。

##AVAssetExportSession
最後にエクスポート用のクラスです。
今までに大きく２つのクラスを生成してセットしてきました。
これらの情報をAVAssetExportSessionに代入し、ビデオのクオリティやアウトプット用のパスなどを設定すればビデオファイルの出来上がりです。

![動画編集の仕組み3.png](https://qiita-image-store.s3.amazonaws.com/0/42112/20efee9e-c62e-97eb-6da9-aa6edf639797.png "動画編集の仕組み3.png")
UNIXドメインソケット通信の内容を見たい

UNIX domain socket 通信は同一マシン上のプロセス間通信にしか使えないというデメリットがありますが，tcp 通信よりも圧倒的にパフォーマンスが良いので要求仕様的に使わなければならない局面は多いと思います

今回はフロントに Nginx で proxy して同一マシン上の別プロセスで動いているアプリケーションサーバーに対して UNIX domain socket 通信を行う構成で実際のアプリケーションサーバーに流れている通信を見たい時にどうするか書きます

実際にトラブルが起こった時に実際にどのような通信が流れているのかは tcp 通信なら tcpdump をすれば見れますが，UNIX domain socket 通信の場合は容易に見ることが出来ないので実際のアプリケーションサーバーにどのような通信が流れているのか分かりません

しかしアプリケーションサーバーにどのような通信が流れているのかどうしても見たい局面も多いと思います

そんな UNIX domain socket 通信の内容を見る一番手軽な方法は strace だと思います

strace はシステムコールを trace するツールですが，IO 周りは当然システムコールですので UNIX domain socket 通信の内容も見ることが出来ます

以下の記事が非常に有用でした

[strace コマンドの使い方をまとめてみた - sonots:blog](http://blog.livedoor.jp/sonots/archives/18193659.html)

例えばアプリケーションサーバーをデーモンとして起動していて，かつ単一プロセスの複数スレッドで動作をしていて．かつ通信の内容をできるだけ長く見たい場合は以下のようにオプションを指定します

    strace -s 1024 -f -p [pid]

これで実際に通信を行えば UNIX domain socket でやり取りする様子が見れるのでこれで通信内容を見ることができます
HTMLの読み込みが完了してから実行

```
(window.onload = function() {
    
})();
```

ブラウザは上から順番に実行する。```<script>```タグを見つけたら優先的に実行しようとするので書き方によってはHTMLの要素が作られる前にJavaScriptを実行してしまうのでエラーになる場合がある。そこで```window.onload```と書くことでHTMLの読み込みが完了してから実行される。冒頭の```(```と文末の```)();```は中の関数が他に影響しないようにガッチリ固定させる即時関数。

「今は深く考えず、おまじないとして覚えるべし」ということです。

（追記）
alucky0707さんから今回の書き方だと2回も実行されてしまうため、よろしくないというアドバイスをいただきました。文頭の```(```と```)();```を削除して```window.onload = ```だけを使用するほうがが良いそうです。

```
window.onload = function () {
  // ここに読み込み完了時に実行してほしい内容を書く。
};
```

新しい方法だとjQueryを利用した

```
$(function () {
  // ここに処理を書く
});
```

という書き方もあるそうです。
カードの中でテキストを縦横中央揃え

```lang:html
<div class="card">
   <p class="card_content">カードのテキスト</p>
</div>
```
```lang:CSS
.card{
   border:1px solid #ccc;
   background-color:#fff;
}
.card .card_content{
   width: 240px;
   height:100px;
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
        
```
vertical-align:middle;はdivタグやpタグには効かないので、
display:table-cellとheight:指定が必要。
aptコマンド(14.04以降。apt-get,apt-cache代替)

14.04以降は最初から入っています。
それより前だと`apt-get install -y apt`で入ると思う。

`apt tag:ubuntu`で検索して書いている人いなさそうだったので。

```bash:
# apt
apt 1.0.1ubuntu2 for amd64 コンパイル日時: Apr 10 2014 13:03:39
使用法: apt [オプション] コマンド

apt 用コマンドラインインターフェイス
基本コマンド:
 list   - パッケージ名を基にパッケージの一覧を表示
 search - パッケージの説明を検索
 show   - パッケージの詳細を表示

 update - 利用可能パッケージの一覧を更新

 install - パッケージをインストール
 remove  - パッケージを削除

 upgrade - パッケージをインストール/更新してシステムをアップグレード
 full-upgrade - パッケージを削除/インストール/更新してシステムをアップグレード

 edit-sources - ソース情報ファイルを編集
```

```bash:
# apt list
一覧表示...
0ad/trusty 0.0.15+dfsg-3 amd64
0ad-data/trusty 0.0.15-1 all
0ad-data-common/trusty 0.0.15-1 all
0ad-dbg/trusty 0.0.15+dfsg-3 amd64
0xffff/trusty 0.6~git20130406-1 amd64
2ping/trusty 2.0-1 all
2vcard/trusty 0.5-3 all
3270-common/trusty 3.3.10ga4-2build2 amd64
389-admin/trusty 1.1.35-0ubuntu1 amd64
...
```

```bash:
# apt update
無視 http://jp.archive.ubuntu.com trusty InRelease
無視 http://jp.archive.ubuntu.com trusty-updates InRelease
無視 http://jp.archive.ubuntu.com trusty-backports InRelease
無視 http://security.ubuntu.com trusty-security InRelease
ヒット http://jp.archive.ubuntu.com trusty Release.gpg
取得:1 http://jp.archive.ubuntu.com trusty-updates Release.gpg [933 B]
取得:2 http://jp.archive.ubuntu.com trusty-backports Release.gpg [933 B]
ヒット http://jp.archive.ubuntu.com trusty Release
ヒット http://security.ubuntu.com trusty-security Release.gpg
...
```

```bash:
# apt remove vim-tiny
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
以下のパッケージは「削除」されます:
  ubuntu-minimal vim-tiny
アップグレード: 0 個、新規インストール: 0 個、削除: 2 個、保留: 176 個。
この操作後に 1,015 kB のディスク容量が解放されます。
続行しますか? [Y/n]
```
JavaのstaticメソッドをSpockとjMockitでモック化する


テストコードを Groovy と Spock で生産性よく書いていますが、
プロダクトコードは政治的な都合により Java で書いています。

プロダクトコードが Java、テストコードが Groovy だと大体の場合は
Groovy や Spock のお作法で問題なくテストコードをかけますが、
static メソッドだけはうまくいきません。

## 前提事項の整理

Groovy には metaClass という便利なものがありますが、
Java で実装されたクラスに対しては metaClass を使ってふるまいを変更できません。
また、Spock の Mock は static メソッドには使えません。

一方で、実際の開発ではユーティリティという名の static メソッドが
あふれかえっているため、テストコードを書こうとすると結構苦労します。
（static メソッドの中で DB アクセスとか平気で実行されて…むむむ）

## jMockit を使えば…？

Groovy の公式サイトには Java クラスの static メソッドに対しては
jMockit 使えばモック化できるみたいなことを書いています。

http://groovy.codehaus.org/Mocking+Static+Methods+using+Groovy
http://groovy.codehaus.org/Using+JMockit+with+Groovy

mockit.Mockit クラスの redefineMethods メソッドを使うサンプルが紹介されています。

が・・・ Mockit クラスには redefineMethods メソッドが存在しません。
ver 0.999 と ver 1.8 で見てみましたが存在しませんでした。ver 1.8 は Mockit クラス自体いない状態です。

## mockit.MockUp クラスを使うと、うまくいきました

### サンプルコード①：static メソッドのある、モック化対象クラス



```java:JavaSampleClass.java
package sample;

public class JavaSampleClass {

    public static String staticMethod1(String value1, int value2) {

        return value1 + staticMethod2(value2);
    }

    public static int staticMethod2(int value3) {
        return value3 * 2;
    }
}
```

### サンプルコード②：Spock テストコードで MockUp クラスを使う

```groovy:SpockSampleSpec.groovy
package sample

import mockit.Mock
import mockit.MockUp
import spock.lang.Specification

class SpockSampleSpec extends Specification {

    def "staticMethod1は「第1引数の文字列」と「staticMethod2メソッドに第2引数を渡した結果」を結合した文字列を返す"() {
        given:
        new MockUp<JavaSampleClass>() {
            @Mock
            int staticMethod2(int value3) {
                return value3
            }
        }

        expect:
        JavaSampleClass.staticMethod1("abc", 1) == "abc1"
    }
}
```

## 補足

jMockit モック化するメソッドの期待値を実装する Expectations や NonStrictExpectations を
Spock で使おうとすると実行時エラーになります。

```groovy
new Expectations() {{
    JavaSampleClass.staticMethod1("abc", 1); result = "abc1";
}};
```
バックスタックの活用

#バックスタックの活用でバックキーで戻る等を実装する

##想定事例
![Wireframe.png](https://qiita-image-store.s3.amazonaws.com/0/43688/9e1e0db4-049b-286a-738b-716a13831f7c.png)

こんなActivityがあったとします。

途中のPopUpのパネルと上部に表示されている、画像を最大化させたImageViewと背景をグレーの半透明で敷いているViewはフラグメントをAddして実装しています。

DialogFragmentをフルカスタマイズして使えばいい事例ですが、
なにかの都合や普通のカスタムフラグメントを使用してActivity上にフロートしているUIを作ったり、閉じるのではなく開いたり閉じたりするようなフラグメントを作る場合もあると思います。

そんな場合にバックスタック活用で状態を管理するやり方。

##仕様
フロートしてくる二つのFragmentはバックキーで自分を閉じる。
ActivityはFragmentが表示されていない場合にバックキーを押した場合かつtabが１番でないときは1番のタブに戻る。

##Activityの実装
###onBackPressedをオーバーライド

```
@Override
public void onBackPressed() {
     //バックスタックの登録数をチェックして0であればPopUpは存在しない
     if (0 == mFragmentManager.getBackStackEntryCount())『
        if(mTabClickNo != 0){
            //１番のタブに戻すような処理をここで実装するここではchangeTabというメソッドがあるという想定
            changeTab(1);
            return;
        }
     }
     super.onBackPressed();
}
```

###PopUpFragmentをバックスタックに登録
FragmentTransactionでAdd等する際にaddToBackStackする。

```
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.setCustomAnimations(R.anim.abc_fade_in, R.anim.abc_fade_out);
//mPopUpFragmentにフラグメントのインスタンスを格納しているとする
fragmentTransaction.add(R.id.root_layout, mPopUpFragment);
//addToBackStackしておくこれでBackStackに登録される
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
```

##Fragment側の処理
PopupFragmentも画像拡大表示Fragmentも同じです。
事例でいくとPopupFragment側は画像拡大表示FragmentをImageViewタップ時に呼び出す処理があると思いますので、その際も先ほどのaddToBackStackをお忘れなく。

###OnKeyListenerの設定

ここではOnCreateViewでLayouXMLをinflateしたあとView全体に匿名関数をセットしています。
またDialogFragmentではない想定なので、ClickEventを取得して下のActivityのオブジェクトがクリックされないようにします。

```
View rootView = inflater.inflate(R.layout.fragment_popup, container, false);
rootView.setOnKeyListener(new View.OnKeyListener() {
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
            if (event.getAction() == KeyEvent.ACTION_UP) {
                getFragmentManager().popBackStack();
                return true;
            } else {
                return true;
            }
        }
        return false;
    }
});

rootView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        return;
    }
});
```

以上の流れでバックキーを使ってFragmentの戻る動作をそこそこ楽に実装できます。
MongoDBで集計（Aggregate）

# ![churippu_s.png](https://qiita-image-store.s3.amazonaws.com/0/36751/8157fb95-559a-856d-af0d-e4f75f0c40f6.png)Aggregation

MongoDBでは集計のために Aggregation という仕組みが用意されているのですよ。すわ！便利。

例として、WebShopsコレクション（≒テーブル）に各Web店舗のアクセス数が日単位で記録されているものとし、ここ一週間のアクセスランキングを取得してみます。

PHPでのサンプルコードは下記のようになります。

```php:PHP
// MongoDBへ接続
$mongo = new Mongo();
// MyDBデータベース
$db = $mongo->selectDB('mydb');
// WebShopsコレクション（≒テーブル）
$collShops = $db->selectCollection("webshops");
// ここ一週間でのWebアクセスが多い順に店舗を取得
$docs = $collShops->aggregate(
    array(
        // $match は WHERE句に相当
        array(
            '$match' => array(
                'chiiki_id' => $chiiki_id,
                'date' => array('$gt' => date('Ymd', strtotime("-7 days")))
            )
        ),
        // $group は GROUP BY句に相当
        array(
            '$group' => array(
                '_id' => '$shopid',
                'count' => array('$sum' => '$access')
            )
        ),
        // $sort は ORDER BY句に相当
        array(
            '$sort' => array(
                'count' => -1
            )
        ),
        // $limit は LIMIT句に相当
        array(
            '$limit' => 10
        )
    )
);
// 店舗格納用配列
$ShopList = array();
// 取得成功なら配列に格納していく
if($docs['ok'] == 1) {
    foreach ($docs['result'] as $id => $obj) {
        $ShopList[] = $obj;
    }
}
// 表示
print_r($ShopList);
```

詳細については参考URLで知見を深めて下さい。。。

# ![churippu_s.png](https://qiita-image-store.s3.amazonaws.com/0/36751/8157fb95-559a-856d-af0d-e4f75f0c40f6.png)参考URL

▼第10回　MongoDBでの集計処理｜MongoDBでゆるふわDB体験
http://gihyo.jp/dev/serial/01/mongodb/0010

▼mongoDBの集計にはMapReduceよりaggregateが簡単で楽な件
http://chobi.hatenablog.jp/entry/2013/06/16/201152

▼MongoDBに触れる (3) 集計処理 (Aggregationフレームワーク)
http://blog.zdrv.com/archives/457

▼SQL to Aggregation Mapping Chart
http://docs.mongodb.org/manual/reference/sql-aggregation-comparison/

以上です。