OmniAICreator/Qiita-1.07M huggingface dataset:
サロンブックアプリの使っているライブラリ大公開

この記事は [- スピカ Advent Calendar 2015 -](http://qiita.com/advent-calendar/2015/spika) 21日目の記事です。

弊社のサービス [サロンブック](https://itunes.apple.com/jp/app/id994869271) で利用しているおすすめライブラリを紹介したいと思います！
アプリをインストールされている方は `設定.app` 内のサロンブック項目からより詳細に確認することもできます！

# ライブラリ一覧

## [Realm](https://realm.io)

![](https://connpass-tokyo.s3.amazonaws.com/thumbs/73/55/73558b6dc49323f215e0d6fb90dcd07a.png)

+ アプリ内のデータのキャッシュ用途で利用

## [Fabric](https://fabric.io)

![Fabric_-_Twitter_s_Mobile_Development_Platform.png](https://qiita-image-store.s3.amazonaws.com/0/8508/e9bd36b7-026a-2521-cc32-3d238da56265.png)


+ Crashlytics 等の管理用のフレームワーク

## [Crashlytics](https://fabric.io/kits/ios/crashlytics)

![](https://pbs.twimg.com/profile_images/438136190760284160/Q3LJPRGx.png)

+ 定番のクラッシュレポートサービス
+ 開発中のアプリ配布にも利用

## [SDWebImage](https://github.com/rs/SDWebImage)

+ 定番の画像ダウンローダ


## [NMRangeSlider](https://github.com/muZZkat/NMRangeSlider)

+ 範囲を選択できるようにカスタマイズされたスライダーUI

## [TLYShyNavBar](https://github.com/telly/TLYShyNavBar)

![](https://camo.githubusercontent.com/406a703bdbfc0720520cee912615bf95319d82ea/687474703a2f2f696d6775722e636f6d2f5556784a4c78752e706e67)

+ スクロールでナビゲーションバーを隠すことのできるライブラリ
+ [AMScrollingNavbar](https://github.com/andreamazz/AMScrollingNavbar) より使い勝手が良かったのでこちらに変更

## [SlackTextViewController](https://github.com/slackhq/SlackTextViewController)

![Demo Gif](https://raw.githubusercontent.com/slackhq/SlackTextViewController/master/Screenshots/slacktextviewcontroller_demo.gif)

+ アプリ内のチャット画面で利用
+ [JSQMessagesViewController](https://github.com/jessesquires/JSQMessagesViewController) と比べて最低限の機能の提供なので、使いやすく独自ビューでカスタマイズできる

## [Repro](https://repro.io/)

+ アプリの利用分析に使用

## [GoogleAnalytics](https://www.google.com/analytics/)

+ アプリの利用分析に使用

## [GADI](https://github.com/MO-AI/GADI)

+ [Google Analytics](https://www.google.com/analytics/) のイベントを `plist` で設定されたメソッドとイベント名で送信できるライブラリ


## [Appirater](https://github.com/arashpayan/appirater)

+ こちらも定番のレビュー依頼ライブラリ


# おわりに

このような素晴らしいライブラリを作成・公開されている方々に感謝です
naming > グラフから余分なデータを取り除くクラスの名前 > utilGraph_trimData.cpp

グラフから余分なデータを取り除くユーティリティクラスの実装。

機能

- 使用することはない古いデータを適宜取り除く

名前候補

- UtilGraph_countKeeper.cpp
  - countをkeepするという意味
  - keepの意味(データ数を抑えるという意味にしたい)がわからなくなりそう。keep:保持？ 
- UtilGraph_removeOutOfRangePlot.cpp
  - 長い
- UtilGraph_removeUnusedPlot.cpp
  - まだ長い. 意味はわかりやすい
- UtilGraph_trimData.cpp
  - 画像のトリミングのイメージから分かりやすいかも


UtilGraph_trimData.cpp で実装開始する。

3年後にこのファイルを見て、すぐに意味がわかるかどうか。
古いGitリポジトリで日本語名ファイルのstatusがおかしい場合の対処


2013年以前からの古いリポジトリにMacで作った日本語ファイルが含まれていると、clone/checkoutしたときにファイルのstatusが変な状態になってしまいました。

```sh
% git clone oldman oldman2     # <- 古いリポジトリをclone
Cloning into 'oldman2'...
done.
% cd oldman2                   # <- 新しいリポジトリに入る
% git status                   # <- statusを見ると、cloneしたばっかりなのにコミットされていないファイルがあるとか
On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

	ほげ.txt

nothing added to commit but untracked files present (use "git add" to track)
% git ls-files                 # <- そのファイルはリポジトリ内のファイルなんだけど、、、？？
ほげ.txt
%
```

原因は、utf-8-macのファイル名でコミットされたファイルがあると、現在のデフォルトであるcore.precomposeunicode=trueの状態では比較が取れないことのようです。

core.precomposeunicodeはファイル名の文字コード問題を解決するためのオプションですが、1.7.12で導入され、1.8.5でデフォルトtrueになったようなので、それ以前からあるリポジトリを現在の環境に持ってくると問題が起きる場合があるようです。


# 対処

## 対処1.core.precomposeunicode=falseにする

新しくコミットすることは無かったり、今だけなんとかなればよいのであれば、現状の設定を変更することで問題は見えなくなります。

```sh
% git config core.precomposeunicode false
% git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working directory clean
%
```

## 対処2.文字コードを変更する

今後も更新の予定があったり、別の人もcloneする可能性がある場合は文字コードを変更してコミットしておいた方がよいでしょう。

1. core.precomposeunicodeをfalseにして対象ファイルを一旦削除(git remove)して、
2. core.precomposeunicodeをtrueにして対象ファイルを追加(git add)する。
3. 変更をコミットする

```sh
% git rm ほけ<3099>.txt                                       # 対象ファイルを削除する
rm 'ほげ.txt'
% git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	deleted:    ほげ.txt

% cp ../oldman/ほけ<3099>.txt ./                              # 同じファイルを持ってくる
% git config --unset core.precomposeunicode                   # core.precomposeunicodeをデフォルト(=true)に戻す
% git add ほげ.txt                                            # ファイルをindexに追加
% git status                                                  # statusを確認すると、リネームとして認識してくれている
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	renamed:    ほげ.txt -> ほげ.txt

% git commit -m "convert filename (utf-8-mac -> utf8(NFC))"   # 変更をコミット
[master 8b77f78] convert filename (utf-8-mac -> utf8(NFC))
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename ほげ.txt => ほげ.txt (100%)
% git status                                                  # statusを確認
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)
nothing to commit, working directory clean

```

# 注意点

このような文字コードの変更コミットをmerge/pullしようとするとエラーになってしまう場合があります。
ローカルリポジトリへは次のような方法で反映することができます。

方法1

- 対象ファイルを作業コピーから一旦削除してから、merge/pullを実行


方法2

- ローカルのブランチを一旦破棄して、変換後のブランチを新たにチェックアウトしなおす。

複数人で開発している場合は、ほかのメンバーにこのような作業をお願いする可能性があるため、事前にタイミングを相談しておくとよいでしょう。

# 疑問点

- Mac以外のプラットフォームではどのように見えているのか

ご存知の方が居ましたら教えてください。
display: table;が便利！ 子要素を整列しつつフロートしたい時。

display:table が便利なのでメモです！
ie8以上対応だし。


普段はフロートしてるけど
アイコンなど子要素を上下や左右中央揃えなど
整列しつつフロートしたい時などに重宝します。


# 1,基本形

![スクリーンショット 2015-12-21 16.23.01.png](https://qiita-image-store.s3.amazonaws.com/0/76843/32808929-0623-b990-6236-51e3900d175e.png)



親にdisplay: table;
子(セル)にdisplay: table-cell;
が基本です！


vertical-align: middle; /* この指定で上下中央揃え */

```html:hoge
<div class="table">
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
</div>
<style>
.table{
    width: 500px;
    display: table;
    /* 隣接するセルのボーダーを重ねて表示します。*/
    border-collapse: collapse; 
}
.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;     /* この指定で左右中央揃え */
    vertical-align: middle; /* この指定で上下中央 */
}
</style>
```


# 2、特定のセルのサイズ固定したい

完成図

![スクリーンショット 2015-12-21 17.16.53.png](https://qiita-image-store.s3.amazonaws.com/0/76843/16973704-f076-ac9b-a0e8-24b62a42f9b4.png)


親の500pxに対して
最初のセルだけ250pxと指定すると
そこは確保され、あとは均等に配分されます。

```html:hoge
<div class="table">
    <p class="cell first_cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
</div>
<style>
.table{
    width: 500px;
    display: table;
    border-collapse: collapse;
}
.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;     /* この指定で左右中央揃え */
    vertical-align: middle; /* この指定で上下中央 */
}
.first_cell{
    width: 250px;
}
</style>
```


# 3、子要素の内容が違えど、幅を揃えたい

![スクリーンショット 2015-12-21 17.18.39.png](https://qiita-image-store.s3.amazonaws.com/0/76843/89840c91-dc4d-d57d-21ae-da914e8424b8.png)

display: table;を設定した親に、
table-layout:fixed; を指定
でいけました。


```html:hoge
<div class="table">
    <p class="cell">
        <img src="img1.png"><br>
        あああああああああああああああああああああ
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
</div>
<style>
.table{
    width: 500px;
    display: table;
    border-collapse: collapse;
    table-layout:fixed; /* これが肝 */
}
.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;     /* この指定で左右中央揃え */
    vertical-align: middle; /* この指定で上下中央 */
}
</style>
```

[参考 [CSS] display:tableを学ぶ](http://www.yoheim.net/blog.php?q=20150102)
http://www.yoheim.net/blog.php?q=20150102
vimで電卓貸して

それvimでできるよ。

インサートモードで

```
<C-r>=
```
してから式を書いて、ターン！

```
661 + 161 + 162 + 178 + 160 + 71 + 17 + 18 + 17 + 19 + 775 + 200 + 188 + 173 + 181 + 33 + 83 + 21 + 19 + 18 + 20 + 4
```

3179セッション。そんなにないあるよ。
UITextFieldDelegateのtextFieldShouldBeginEditingとtextFieldShouldEndEditing

## UITextFieldDelegateのtextFieldShouldBeginEditingとtextFieldShouldEndEditing

textFieldAが編集中の際、
textFieldBにフォーカスを移すと、

textFieldBのtextFieldShouldBeginEditing

　↓

textFieldAのtextFieldShouldEndEditing

の順で実行されるようです。

今まで気にせず逆だと思っていました。。。
transactionでreturnしたらrollbackされない

## 何してたの
transaction内でreturnを書てました。

## rollbackされない
```ruby:user.rb
def update_name(user_id, name)
  user = User.where(id: user_id).first
  user.name = name
  User.transaction do
    user.save!
    return
  end
end
```

## rollbackする
```ruby:user.rb
def update_name(user_id, name)
  user = User.where(id: user_id).first
  user.name = name
  User.transaction do
    user.save!
    raise ActiveRecord::Rollback
  end
end
```

ちゃんとraiseしないとrollbackしませんよと。
考えてみると当たり前なのだけど、引っかかってしまったのでメモ。

## 参考資料
http://d.hatena.ne.jp/senggonghaza/20130722/1374491144
jQueryである2つの要素をswapする方法。

#はじめに
僕はあまりJavaScriptやjQueryに関して詳しくないので、これが正しい方法であるかはわかりかねます。ご了承ください。

#コード
えっと、何がしたかったのかというと

```html
<div id="A">
     A
</div>
<div id="B">
     B
</div>
<div id="C">
     C
</div>
```

これを

```html
<div id="C">
     C
</div>
<div id="B">
     B
</div>
<div id="A">
     A
</div>
```

としたかったのです

それで、それを実現するコードが以下

```js
function swapItem(from, to) {
  var $from = $(from);
  var $to = $(to);

  $from.replaceWith('<div id="REPLACE_TEMP_DIV"></div>');
  $to.replaceWith($from);
  $("#REPLACE_TEMP_DIV").replaceWith($to);
}
```

これで

```js
swapItem("#A", "#C");
```

とすることで、先ほどの操作が実現できます。

もしかすると、`before`, `after`で実現出来るのではないかと考える方がいらっしゃるかもしれませんが
それはswapの対象となる2つの要素が隣接している場合は単純にそれでも構いませんが
任意の2つの要素をswapしようとすると中々面倒なことになってしまいます。
したがって、上記のコードに示したような方法をとりました。

しかし、1つ問題があって
この方法では`div#REPLACE_TEMP_DIV`というダミーの`div`をswapするために用いているので、万が一すでに`div#REPLACE_TEMP_DIV`が存在していた(使われていた)場合、その`div`が複数回のswapの途中に消滅します。
そのため、あまり褒められた方法ではないなぁとおもうので、これを解決する方法をご存じの方がおられましたら、コメントして教えていただけると嬉しいです。
ScrollView内に設置したView(TableViewのCellなど)がはみだした時の対処法


ScrollViewのAutoresize SubviewsをOffにすると直る場合があります。

![スクリーンショット-2015-12-21-18.09.33.jpg](https://qiita-image-store.s3.amazonaws.com/0/27793/fe288c0f-7932-b708-8a2b-3ef4f284d04e.jpeg "スクリーンショット-2015-12-21-18.09.33.jpg")
fluent-plugin-s3 の hex_random プレースホルダー

Advent Calendar に書くネタを作ろうと思っていたのですが、風邪を引いて週末なにもできなかったので、ちょっと前に fluent-plugin-s3 に入れたオプションについて書いてお茶を濁します ^^;


fluent-plugin-s3 v0.6.0 に hex_random というプレースホルダーが追加されています。

## リクエスト率およびリクエストパフォーマンスに関する留意事項

Amazon S3 に [リクエスト率およびリクエストパフォーマンスに関する留意事項](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/request-rate-perf-considerations.html) というページがあります。

それによると、

```
examplebucket/2013-26-05-15-00-00/cust1234234/photo1.jpg
examplebucket/2013-26-05-15-00-00/cust3857422/photo2.jpg
examplebucket/2013-26-05-15-00-00/cust1248473/photo2.jpg
examplebucket/2013-26-05-15-00-00/cust8474937/photo2.jpg
examplebucket/2013-26-05-15-00-00/cust1248473/photo3.jpg
...
examplebucket/2013-26-05-15-00-01/cust1248473/photo4.jpg
examplebucket/2013-26-05-15-00-01/cust1248473/photo5.jpg
examplebucket/2013-26-05-15-00-01/cust1248473/photo6.jpg
examplebucket/2013-26-05-15-00-01/cust1248473/photo7.jpg    
...
```

のように、キー名を連続するパターンにすると、パフォーマンス上の問題が発生します。とあります。

この問題を避けるには、例えば 16 進のハッシュプレフィックスをキー名に追加すると良いと述べています。

```
examplebucket/232a-2013-26-05-15-00-00/cust1234234/photo1.jpg
examplebucket/7b54-2013-26-05-15-00-00/cust3857422/photo2.jpg
examplebucket/921c-2013-26-05-15-00-00/cust1248473/photo2.jpg
examplebucket/ba65-2013-26-05-15-00-00/cust8474937/photo2.jpg
examplebucket/8761-2013-26-05-15-00-00/cust1248473/photo3.jpg
examplebucket/2e4f-2013-26-05-15-00-01/cust1248473/photo4.jpg
examplebucket/9810-2013-26-05-15-00-01/cust1248473/photo5.jpg
examplebucket/7e34-2013-26-05-15-00-01/cust1248473/photo6.jpg
examplebucket/c34a-2013-26-05-15-00-01/cust1248473/photo7.jpg    
...
```

より詳しくは、リンク先を参照してください。

## hex_random プレースホルダ

fluent-plugin-s3 の hex_random プレースホルダを使う事で、16進のハッシュプレフィックスをキー名に追加することができます。例えばこんな感じ。


```apache
   s3_bucket examplebucket
   s3_object_key_format %{hex_random}-%{path}.jsonl.gz
   path %Y-%m-%d-%H-%M
   hex_random_length 4
```

こうすることで[リクエスト率およびリクエストパフォーマンスに関する留意事項](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/request-rate-perf-considerations.html)に書いてある方法を利用することができ、パフォーマンスを改善できます。

## file buffer chunk の unique id として使う

実はその他の使い方もあります。

retry しても値が変わらないように hex_random の値は file buffer の tsuffix から取り出しています。file buffer に16進数の文字列がついているのをみたことがあるでしょうか？あれです。

```
buffer/foo.bar.baz.test.b50b56bd280da5547.log
```

この tsuffix の値を reverse したものから、先頭 hex_random_length (デフォルト4) 文字取り出したものを hex_random として利用しています。なぜ、reverse しているのかというと、tsuffix の値は `(time_sec, time_usec, rand)` のように生成されており、4文字取り出すような処理をする場合、後ろから取り出したほうがランダム性が高いからです。

さて、`hex_random_length 16` とすると tsuffix 全体を取り出せるので(正確には reverse していますが)、file buffer chunk の unique id として使うことができます。

間違った retry が発生しても、同じ file buffer chunk ならば値が変わらないので、重複チェックに利用できます。

なお、uuid_flush というプレースホルダもありますが、あちらは、flush の度に値が変わるので、retry されると値が変わってしまい、冪等性を保てません。

## おわりに

unique id として使う場合は、hex_random という名前がそぐわないのですが、すでに hex_random として実装したものを再利用しているだけなので、そのままにしています。そんな使い方もできますよ、という話でした。
円周率の公式を作ってみよう(Arctan関係式)

2016/8/2: 未完のまま放置してすいません。役にたたない記事なので削除します(^_^;


この記事は[Qiita 数学 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/math)の19日目の記事です.

1.はじめに
円周率，

```math
\pi = 3.141592653589.... (無限に続く！)
```

小学校の3-4年生でならう、小数点以下が無限に続く定数ですが，実際に高精度で求めようとすると数学者達が発見した数式に頼るしかありません．

今まで発見した数式は次のホームページなどで紹介されています．

> [http://円周率.jp/](http://xn--w6q13e505b.jp/)
> https://ja.wikipedia.org/wiki/%E5%86%86%E5%91%A8%E7%8E%87


凡人には新しい円周率の公式を見つけるのは無理だと思われてる方も多いのではと思いますが，実はそうではありません．凡人にも新しい円周率の公式をみつける事が出来ます．

その名は「arctan関係式」！

(以下削除)
テモナがやっている開発合宿！

こんにちは。渋谷にある[テモナ株式会社](http://temona.co.jp/)でテクニカルをやっているものです。本日はテモナの制度の一つの開発合宿について少し紹介をさせていただきます！

#テモナ開発合宿とは
三ヶ月に一度、人里離れたバンガローのようなところで一泊二日(または二泊三日)の間缶詰となり、チームに分かれてただひたすらコードを書き、合宿最終日に成果を発表するというものです。

優勝チームの景品は弊社[CTO(ちょっとたのしいおじさん)](http://qiita.com/devopsCoordinator)に褒めてもらうことが出来ます！

![IMG_1302.jpg](https://qiita-image-store.s3.amazonaws.com/0/104356/3ded80a4-de8d-1dbe-cd5e-49bdfb528b5a.jpeg)
↑第一回合宿の風景

#これまでの開催場所
- 第一回
2015-7-10~2015-7-10@[まるも](http://marumo.net/)/宿：[古民家ゲストハウス  しへえどん](http://www.shihedon.com/)
- 第二回
2015-11-14~2015-11-15 @[鎌倉 Co-Minka Studio](http://www.co-minka.jp/)/宿：[月の宿](http://tsukinoyado.com/)
<br>※第二回目の場所探しには[スペースマーケット](https://spacemarket.com/)さんを利用させていただきました！

![開発合宿_作業写真3.jpg](https://qiita-image-store.s3.amazonaws.com/0/104356/58b8e6ba-3165-f67d-016c-4929891c090e.jpeg)
↑第二回合宿風景

#これまでの合宿の成果物
- WordPressでサイトを構築してみる。
- ボタンを押すと弊社サービスの[たまごリピート](http://tamago.temonalab.com/)に受注が入るAPI機能の開発をしてみる。
- [たまごリピート](http://tamago.temonalab.com/)と[ヒキアゲール](https://info.conversion-up.net/pr/)のデータ連携機能を開発してみる。
- mecabを用いて形態素分析をしてみる。
- 次期サービスの企画・立案をしてみる。
<br>e.t.c...

#合宿をやってみて
- 開発に集中してやってみると、たった一日二日でも、ここまでのものが作り上げられるのか、、という感動をえることが出来ました。自分もテクニカル配属から、半年ほどで初参加をしましたが、チームで協力して形態素分析のロジック部分とDBの書込み部分の作成やDBの構成を考えたりしました。
モチベーションアップに繋がることは間違いないです。
- 合宿という非日常環境でやることで、業務から少し離れた突飛なことに挑戦できるのが非常に良い刺激になると感じました。
<br>
<br>
<br>
いかがでしたでしょうか？この記事を読んでくださった技術者の方で、自分の会社にまだ開発合宿という制度がなかったら、是非企画して一回やってみてください！楽しさが実感できるかと思います。
またテモナの次回の開発合宿は来年２月ころにやろうかと思っているので、もし一緒にやってみたいなどありましたらQiitaにコメントいただければと思います！
チケットキャンプでA/Bテストが浸透しなかった話

mixiグループアドベントカレンダー22日目の記事です。

2ヶ月くらい前にA/Bテストで改善しようとしたけどうまく行かなかった話を書きます。
失敗談から学ぶこともきっとあるかと思い、自ら恥を晒してみます。

## 経緯

チケットキャンプはこれまで創業者のセンスと思いで作り上げてきました。
創業者の頭のなかにあったものをゼロから形にしていたので、主に定性的な視点から改善を繰り返してきた訳ですが、ここから更に成長するためにも、違うアプローチをとってみようというのが今回の目的でした。

## プランニング

### まず、A/Bテストで改善するKPIを定める

A/Bテストを行う前に、何を持って成功とするかを定義する必要があります。

もちろん、サービスを成長させるためにA/Bテストを行うのですから、成功＝「サービスが成長している」となり、さらに深掘りして何を持ってサービスが成長しているかを定義します。
当たり前のことのように思いますが、意外と当初の目的を見失ってしまい、細かい改善を繰り返して見た目上の数字は良くなったけど、サービスの成長には結びついていなかったということがたまにあります。

チケットキャンプにおいては、もちろんチケットの取引がより多く成立することがサービスの成長だと考えているので、ここではDAUに対する決済数を決済率として、それを上げていくことを目標として定めました。

ちなみにこの決済率はここで初めて監視を始めたものではなく、常にモニタリングしている指標の一つです。

### KPIを計測できるようにする

GoogleAnalyticsには、[拡張eコマース](https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce?hl=ja)という機能があり、それを用いることで、ショッピング行動のどこでユーザーが離脱しているかを見ることができます。

拡張eコマースについての詳しい説明と、実装方法については下記の記事が詳しいので割愛します。
[Google アナリティクスで強化された「拡張eコマース」機能がサクッとわかる6つの特徴 | 単発記事 | Web担当者Forum](http://web-tan.forum.impressrd.jp/e/2014/08/08/17970)

これをチケットキャンプに応用して、購入に至るまでのプロセスを可視化しました。
ユーザーがサイトに訪問してから決済に至るまでのトランザクション毎の数値がわかるようになったので、ボトルネックになっている箇所に対して施策を行い、これらの離脱しているポイントを改善していこうと考えました。

加えて、A/Bテストなので、A/Bパターンそれぞれ独立して計測できるようにする必要があります。
これはカスタムディメンションを用いて、ユーザーごとにランダムにA/Bを決めれば、簡単に計測可能となりました。

カスタムディメンションについては、下記の記事で詳しく説明されています。
http://qiita.com/ssaita/items/007d743fab5bf8739309

## 実行

### 実際に施策を打つ

ボタンの位置を変える、文字の大きさを変えるなど、見た目の変更だけなら、[Optimizely](http://www.optimizely.jp/)や[Kaizen platform](https://kaizenplatform.com/)などのJavascriptを埋め込むだけのサービスで簡単にできますが、これらの導入は見送りました。
これらのサービスでは、コードの変更を行わずに自由にページのレイアウトを変更できるというところが特徴ですが、ユーザーの状態などサーバサイドで取得が必要なものに関しては、結局コードの修正が必要になるため、できることに制限があるだろうという判断でした。

上記2つの比較は下記が非常に参考になります。
http://blog.s-en.jp/optimizely-vs-planbcd-235.html

## 反省

### なぜ浸透しなかったのか？

さて、準備もできて実際にA/Bテストが始まりました。。が、浸透せずにすぐに方針転換となりました。
理由は大きく3つありました。

1. 開発が入るため改善施策を行うために時間が思ったよりもかかっていた
2. 何件か施策を打った結果、殆ど改善が見られなかった。
3. わかりやすくユーザーの満足度に繋がるような改善案がまだまだあった
（例えば、決済方法にケータイ払いの追加など）

結局のところ、費用対効果が悪いということで、仕組みは出来ましたが殆ど使われていません。
特に、2つ目のところで、既に2年間運営されてきたサイトを改善するので、納得感はある施策を打ったつもりではありますが、効果が目に見えて良くならないということが続きました。
しかも、その一つ一つにエンジニアのコストもかかっています。

3つ目のところについても、よくA/Bテストで○%改善！と謳っている記事がありますが、よく見ると「そりゃ改善するでしょ」という施策も多く、それはわざわざ追加のコストをかけてA/Bテストで比較する必要もないのかもしれません。

## どうすればよかったか？

### 施策を行うためにかかるコストを最小限に抑えるべき

一つ一つの施策による微々たるものでも、2%改善を36回繰り返せば倍になります。
しかし36回の施策が全て改善に繋がるわけでもないし、その度にエンジニアのコストをかけることになるので、それを考えるとディレクターのみで行えるツールを導入するほうが結果的に良かったのかもしれません。

## 最後に

明日はmrmt大先生が「サンタさんとネットセキュリティ」について書いてくれる予定です。
おたのしみに！
TypeScriptのビルド設定をES5からES6に変えた時にエラーが発生した時の解決

Node.jsで使用していたTypeScriptのプロジェクトをES5からES6に変えたら見慣れぬエラーが発生した。

```index.ts
/// <reference path="typings/es6-promise/es6-promise.d.ts" />
"use strict";

new Promise((resolve: Function) => {

	setTimeout(() => {
		console.log("3秒経ったよ!");
		resolve();
	}, 3);
});
```

```tsconfig.json
{
	"compilerOptions": {
		"module": "commonjs",
		"noImplicitAny": true,
		"removeComments": false,
		"preserveConstEnums": true,
		"out": "index.js",
		"sourceMap": false,
		"target": "es6"
	},
	"files": [
		"index.ts"
	]
}
```

```console.sh
$ tsc -p . 

/Users/username/.nodebrew/node/v5.1.0/lib/node_modules/typescript/lib/lib.es6.d.ts(5074,11): error TS2300: Duplicate identifier 'Promise'.
/Users/username/.nodebrew/node/v5.1.0/lib/node_modules/typescript/lib/lib.es6.d.ts(5155,13): error TS2300: Duplicate identifier 'Promise'.
typings/es6-promise/es6-promise.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
typings/es6-promise/es6-promise.d.ts(42,16): error TS2300: Duplicate identifier 'Promise'.

```

もともとNode.jsのPromiseを使うために、https://github.com/DefinitelyTyped/DefinitelyTyped の__es6-promise__を使用していたのだけれども、PromiseはES6から標準になるため、d.tsファイルがあると重複して定義が存在することになってしまうようだ。
__そのためes6-promise.d.tsファイルへのリファレンスを消してしまえば、上記のエラーは発生しなくなった。__

以上。
配列をカンマ区切りにしてSQLのIN() に入れたい時に便利なquoteInto()

こんなときは、　ZendFramework の　quoteInto()が便利です。

<pre>
$id = array(5, 7, 12, 18);
</pre>
上記IDのIDの情報を取得したいときは、
<pre>
$include = $db->quoteInto('AND id IN (?)', $id));
$old = 10;
$query = "
         SELECT
            *
         FROM user 
         WHERE old >= ?
               {$include}
         ";

$user = $db->fetchAll($query, array($old));
</pre>
c++ builder > Testing > コンポーネントを増やさずにデバッグ情報を追加 > ShowHint = true; / Hint = FloatToStr(debug_getValue());

```txt:動作確認
C++ Builder XE4
```

希望

- デバッグモードでデバッグ情報を表示したい
- デバッグ情報表示用のコンポーネントは別途配置したくない

思いついたのは、Hintプロパティを使うこと


```Unit1.cpp
...
// 設定(1回だけ実行)
if (m_debugMode) {
  E_xxx->ShowHint = true;
  E_xxx->Color = clMoneyGreen;
}
...
// 随時変化する部分の実装
if (m_debugMode) {
  E_xxx->Hint = L"someValue:" + FloatToStr(debug_getValue());
}
```

- debug_getValue() : 自作の関数。デバッグ用値を取得
- FloatToStr() : Float型をString型に変換するビルトイン関数


上記のように実装すると、プロダクトコードで見せておくコンポーネントをデバッグ情報表示に使える。

clMoneyGreenの色に変更しているのは、デバッグ情報を表示できるコンポーネントがわかるように。


Hintプロパティを普段使わない場合に有効。
var_dump() の出力を文字列として取得する

var_dump() の内容をHTTP出力ではなく例えばロギング関数に渡したいことがある。

## 解

```php
ob_start(); var_dump($someVar); my_logger(ob_get_clean());
```

## 参考

[How can I capture the result of var_dump to a string?](http://stackoverflow.com/questions/139474/how-can-i-capture-the-result-of-var-dump-to-a-string)
AngularJSとWP REST APIを使ったWordPressへの投稿、投稿取得をやってみた



独自のユーザー投稿画面をWordPressで作りたいと思い、そのためにREST　API経由の投稿を試してみた。




#使うライブラリ・プラグイン

jQueryでもできるのですが、とりあえずAngularJSを使えるかどうか試しました。

AngularJS for wordpress
http://roysivan.com/angularjs-for-wordpress/
https://github.com/royboy789/angularjs-for-wordpress

WP REST API (v2)　バージョン２

バージョン１は古いようなので、セキュリティ的に安心度が高そうなバージョン２でやりました。

https://ja.wordpress.org/plugins/rest-api/


* APIの使い方
プラグインを入れると使えるようになる

投稿に関係する動作の場合
(ホームのURL)/wp-json/wp/v2/posts

投稿取得
GET  /wp-json/wp/v2/posts

投稿
POST /wp-json/wp/v2/posts

## ハマったところ
　そのままサイトのURLに/wp-json/wp/v2/posts
をつけてもデータが取得できない。投稿もできなかった。

### 解決策
結局全部ドキュメントとかいろいろなサイトに書いてあったのですが

あらかじめWordPress側に書いておくのが必要なコード

認証に必要なnonceというのを生成

```
<?php

wp_localize_script( 'wp-api', 'WP_API_Settings', array( 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ) ) );

?>
```

リクエスト側のHTTPヘッダーにnonceを足さないといけない。

```jQueryの場合
//ヘッダーの設定
options.beforeSend = function(xhr) {
    xhr.setRequestHeader('X-WP-Nonce', WP_API_Settings.nonce); //ここでnonceを設定している。

    if (beforeSend) {
        return beforeSend.apply(this, arguments);
    }
};

//POSTリクエストで投稿
$.ajax( {
    url: WP_API_Settings.root + 'wp/v2/posts/1',
    method: 'POST',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce );
    },
    data:{
        'title' : 'Hello Moon'
    }
} ).done( function ( response ) {
    console.log( response );
} );
```


私はAngularJS(1.3）で同じようなのを書きました。

AngularJSのコード

```main.js
var app= angular.module('mainModule',['ngResource']);

//ヘッダー設定部
app.config(function($httpProvider) {
  $httpProvider.defaults.headers.common = {
    'X-WP-Nonce': wpAngularVars.nonce　//nonce設定
  };
});

//取得、投稿をする部分
app.controller('homeController', function($scope, wpPostResource) {

//投稿取得
  function fetchPosts() {
    wpPostResource.query(function(data) {
      $scope.posts = data;
    });
  }

  fetchPosts();

//投稿する
  $scope.addPost = function(title, message) {
    if (!message || !title) return;
    wpPostResource.save({
      title: title,　//投稿のタイトル
      content: message, 　//本文
      status: 'publish'　//投稿後すぐに公開する
    }, function(result) {
      $scope.title = '';
      $scope.message='';
      fetchPosts();
      console.log(result);
    });
  };

//エンドポイントURLの設定
app.factory('wpPostResource', function($resource) {
  return $resource('http://192.168.33.10/wp-json/wp/v2/posts'); //ローカルPC上のWordPressのエンドポイント
});

```

これで投稿取得・投稿という基本的な動作はできました。
速度は遅いので、チューニングすればいいのか、そもそも限界なのか不明です。
mysql起動で「The server quit without updating PID file」

brew再セットアップしていたらmysqlが起動しなくなった・・・orz

```
$sudo mysql.server start
Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/xxxxx.local.pid).
```

権限がなくて落ちているらしい情報を見つけたので、権限を正しく直す。
以下参考サイト。感謝
[参考](http://tech-outlines.hateblo.jp/entry/2015/03/24/180940)

```
$sudo chown -R _mysql:_mysql /usr/local/var/mysql
```

そして起動

```
$sudo mysql.server start
Starting MySQL
. SUCCESS! 
```

起動できた！

### 修正
 2016/05/16 sudo 追加
多言語サイトでフォント指定の注意点

多言語サイトを作成する際、アクセス元の地域に合わせたフォントを指定するとユーザーにとって違和感なくサイトを使うことができます。
（海外のサイトで日本語対応してるサイトがあっても変なフォントの場合とかテンション下がりますよね！）

そこでIPアドレスから地域を判別してその地域のフォントに合わせればいいかというとそれだけではうまくいきません。

必要なのは2つです。

- htmlのlang属性を指定する
- font-familyに最適なフォントを指定する

僕はこの中の2つ目しか対応しておらず

「font-familyを指定してるのになんでfont変わんないの？dev toolsで見ても普通に指定されてるし。むむむ。。。」

という状態が続いていましたorz

 

それでは1つずつ解説します。

まず、今回の例では

```yml:lang
日本圏の場合: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","DroidSerif",sans-serif
英語圏の場合: sans-serif
繁体中文圏の場合：'PMingLiU'
簡体中文圏の場合：'宋体-简'
```

この4つの言語に対応してみたいとします。

##1.htmlのlang属性を指定する
html5に対応しているwebサイトであればwebページの書き出しは

```html:index.html
<!DOCTYPE html>
<html lang="ja">
```
で始まります。

これの

```html:index.html
lang="ja"
```

この部分のlang属性の値を変えます。
今回の例で言うとこうなります。

```yml:
日本語圏：'jp'
英語圏: 'en'
繁体中文圏: 'zh-tw'
簡体中文圏: 'zh'
```

つまり繁体中文圏に対応したい場合は

```html
<!DOCTYPE html>
<html lang="zh">
```

この用に指定しましょう！

##2.font-familyに最適なフォントを指定する
※「最適なフォント」と見出しに記述してありますが、各々のサービスで最適なフォントを選んで下さい。

```css
.font--ja: {font-family: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","DroidSerif",sans-serif}
.font--en: {font-family: sans-serif;}
.font--zh_tw: {font-family: 'PMingLiU';}
.font--zh: {font-family: '宋体-简';}
```
というふうに各言語ごとにfont-familyを指定してあげましょう。

##まとめ
この2つの方法で各地域ごとに正しいフォントを指定することができます。

僕はfont-familyしか変えていなかったので正しい挙動が起きずぐぬぬっとなっていました。

グローバルなサービスを作る際には必ず必要な処理だと思うので何かの役に立てれば光栄です。
c++ builder XE4, 10.2 Tokyo > 実行時引数 > 子フォームをデバッグモードにする > 子フォーム側でも実行時引数は見えている

```txt:動作確認
C++ Builder XE4
Rad Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

## やりたいこと

- 親フォームのボタン押下で子フォームを作成する
- 子フォームを実行時引数の指定によりデバッグモードにする

わからなかったこと

- 実行時引数はアプリ実行開始直後に開かれるフォーム以外も読み取れるのか?


## 実装

- Unit1 : 親フォーム
- Unit2 : 子フォーム

子フォームは、プロジェクト > オプション > フォーム において「自動生成フォーム」からはずして「使用可能フォーム」にしておく。


### 親フォーム

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

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
#include "Unit2.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormShow(TObject *Sender)
{
	for(int idx=0; idx <= ParamCount(); idx++) {
		String str = LowerCase(ParamStr(idx));
		if (LowerCase(ParamStr(idx)) == L"/child") {
			ShowMessage(L"Parent > /child");
		}
	}
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TchildForm *childPtr = new TchildForm(this);

	childPtr->Show();

	for(int loop=0; loop<5;	loop++) {
		String msg = IntToStr(loop);
		OutputDebugString(msg.c_str());
		Sleep(1000);
	}

	childPtr->Close();
	childPtr->Free();
}
//---------------------------------------------------------------------------
```

### 子フォーム

```Unit2.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit2.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TchildForm *childForm;
//---------------------------------------------------------------------------
__fastcall TchildForm::TchildForm(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TchildForm::FormShow(TObject *Sender)
{
	for(int idx=0; idx <= ParamCount(); idx++) {
		String str = LowerCase(ParamStr(idx));
		if (LowerCase(ParamStr(idx)) == L"/child") {
			ShowMessage(L"Child > /child");
		}
	}
}
//---------------------------------------------------------------------------
```

### 実行時引数

`/child`

## 結果

親フォーム、子フォーム、両者において実行時引数を認識できた。

### 親フォームOnShow

![qiita1.png](https://qiita-image-store.s3.amazonaws.com/0/32870/dcef6fa6-caab-7638-49c5-e4789cefa47e.png)

### 子フォームOnShow

![qiita2.png](https://qiita-image-store.s3.amazonaws.com/0/32870/22ecba08-4fe6-c99e-1a7b-e95ae80b39c3.png)


## 検討事項

親フォームが実行時引数を読み取って、それを子フォームに伝えるという方法も取れるが、そうするためには以下のいずれかが必要

1. 親フォームにて IsChildDebugMode()を用意
  - 子フォームにて親フォームのヘッダincludeが必要になる
2. 子フォームにてSetChildDebugMode()を用意
  - 親フォームが子フォームを開いた後に、この関数を呼ぶ必要あり
Dockerってそろそろ使いたいね

Dockerって話題ですよね。
でも、何に使って良いのやら、クラウドと何が違うのやら、分かりにくいので
我流で調べてみました。

# Dockerは仮想サーバではない

ここらへんがよく分からない箇所。

クラウドで良くある、仮想サーバ（KVMやVMwareなど）ではなく、
Dockerは、PaaS的なサービス用途毎のサービス提供の一種。

まあ、もっと端的に言うと、ApacheなどのWebサーバが使えるコンテナという単位で
細かくサーバをシェアするサービス。

大元の母艦は実サーバで、その上に仮想サーバを立てて、
Linuxなどの仮想サーバの根底部分は共通で使うので、各コンテナからカスタマイズするのではなく、
コンテナを用途ごとに細かく分けて、コンテナにアプリケーションをデプロイする。

従って、仮想サーバの大元（CoreOSとか呼ばれているやつ）は、Linuxのコアしか動いておらず、
その上に乗っけるコンテナ部分でサーバアプリケーションを動作させる。
サーバ丸ごと１台をコンテナが使うのではなく、コンテナを複数台共有してサーバを１台動かす。

みたいな感じ。

# 素朴な疑問

・スケールするとき大丈夫？
・メモリやCPUのリソースは足りる？
・ストレージは足りるの？
・DBみたいなリソース食いのサーバアプリは動くの？
・１台のコンテナにLAMPは構築できる？

のがすごい素朴な疑問。
機会があれば、後日Qiitaで実験結果のレポ乗せます。

# 結論

・開発用途向け？
・本番用途に耐えられる？

そんな疑問点が残りましたとさ。

Windows AzureのWeb Paasサービスもこんな感じだった。
サーバマシン１台ではなくて、必要な環境を利用する感じ。


新しい技術、確かに開発用途で複数台のサーバは要らないけど、他人と共有して干渉されるのは
いやなので、別々の環境として欲しいときには役立つかも。
Azureで仮想マシンが起動しない場合

Azureで動かしていた仮想マシンがとある理由で停止させられたことが発端となり、しばらくサービスが止まるという惨劇があったのでメモ。


## 結論
経緯説明が長いので、結論を先に書いてしまうと以下の通り。

### 仮想マシンの起動操作をしてもエラーになる場合
* 仮想マシンの構成(プラン)を一時的に変えてみる
* バックアップ(vhd)から別の仮想マシンを立てる
* クラウドサービスの停止と開始を行う


## 先月のこと
Azure内で起動していた仮想マシンがすべて停止してしまいました。原因はクレジット切れによる停止処置。管理者アカウントの方で制限を解除することができるようなので対応してもらいました。
まだサービス開始前の準備段階だということもあって大きなトラブルになることもなく、これで制限解除したから安心だなーとか思ってました。


## 再び全サーバ停止
そんなこともすっかり忘れた頃、気がつけば全仮想マシン停止という悪夢がやってまいりました。「前回解除してもらったはずでは？」と思いつつも、とりあえず同じ手順で復旧しようということで管理者に制限解除のお願いをしました。


## 何故か起動しないサーバ達
制限解除の手続きも終わり、Azureポータルでの操作も受け付けるようになったので仮想マシンの開始操作を行いました。一刻も早く開始しなければ！という思いから次々に仮想マシンで開始ボタンを押していったのですが、どうしたことかいくつかのサーバが起動していません。


## 起動に失敗するサーバ達
これは後から分かったことですが、起動しないサーバには以下のような特徴がありました。

* 特定のクラウドサービス内の仮想マシンのみエラーになる
* 1台だけ「停止済み」残りは「停止済み（割当解除済み）」である
* 新ポータルでは開始ボタンが無効になっている
* 旧ポータルでは開始ボタンを押すとエラーになる
	* 「この展開に対して、排他的アクセスが必要な、x-ms-requestid が xxxxxxx の操作を実行しています」


## 対応策
これは自分ではどうにもならないと考え、サポートに問い合わせを行いました。経緯を簡単に説明したところ、エラーメッセージから察するに何らかの仮想マシンの操作が完了せずに残っているせいで操作ができなくなっているのではないかということでした。
そこで次のようなことを試すことになりました。

### 仮想マシンの構成（プラン）を変更してみる
これにより、別の物理マシンに展開されることを期待するということでした。ですが、開始操作と同様のエラーが出てしまったため解決にはならず。

### 仮想マシンのバックアップを行って別の仮想マシンを立て直す
ダッシュボードから取り込みボタンを押せばvhdをバックアップできるので、それを使って新しく仮想マシンを作りなおすという方法を提示されました。
これも同様のエラーが出たために失敗に終わりました。

### クラウドサービスの停止
今まで仮想マシンの方で開始と停止を行っていたのですが、クラウドサービスにも開始と停止があります。そこで停止を行って原因となっている操作を強制的に破棄させるという方法でした。
試してみたところ、こちらは今までと違ってエラーは出ずに正常に終了しました。

この後、クラウドサービスを停止したまま仮想マシンの開始を行うとエラーにはならないものの開始してくれないという状態になっていたのですが、クラウドサービスの開始を行うと配下の仮想マシンも一緒に起動してくれました。

### それでもダメな場合
今回はポータル内での操作で解決したのですが、どうしてもダメな場合はデータセンターに直接依頼して原因となっている操作を取り消す必要があるとのこと。


## 複数の仮想マシンを立ち上げる場合は1台ずつ
結局のところ、今回のようなエラーが出るようになってしまった原因は分からずじまいでした。ですが、仮想マシンを起動する際には「実行中」になるまで次の操作しない方が良いだろうとは言われました。
通常はこんなことは起きないらしいのですが、念のためにお願いしますとのことでした。


## 制限解除の謎
そもそも何故すべて停止してしまったのかという疑問もありますが、これは前回行った制限解除が「当月だけ解除する」という選択をしてしまった可能性があるそうです。
WordPressあるある　プラグインがインストールできない・・・２段階の対応

# 概要
mac上に仮想サーバを用意し、その中でwordpressを動かして・・・ということをやっていますが、ダッシュボードからプラグインをインストールしようとしてつまづく。

解決するにあたり、全く異なる２つの対応が必要だった。

#１つめ。直接ダウンロードするように設定する

よく言われている、wp-config.phpに下記の記述を追加
`define('FS_METHOD', 'direct');`

この記述をすることによってファイルをダウンロードするときに強制的にダイレクトメソッドを選択させるようにするようです。

## FTP接続情報は聞かれなかったが、ディレクトリが作成できない

これでプラグインがインストールできる・・・と思ったら
「ディレクトリを作成できませんでした　インストール失敗」とのこと。

ダウンロードができても、インストールができなければゴールじゃありません。


#２つめ。ディレクトリ所有者を変更する

「ディレクトリを作成できませんでした」系の問題に関しては

1. ディレクトリのパーミッションを 777とか707 とか、その他のユーザでも書き込みできるように設定するとOK
2. ディレクトリの所有者をapache（HTTPサーバ）に変更すればOK

の２通りの対応が散見されます。

ここでは、後者を優先します（その他のユーザでも書き込み可能は、あまりやりたくない）

## 前提条件
- 対象のwordpress一式は /var/www/html/wp_dir である
- デフォルトの所有者は 'user'　である

## 実施するコマンド

`$ chown -R apache:apache wp_dir`

wordpressのデータをすべて、所有者とグループを apacheに変更する。
要は、Webサーバが管理しているものと設定したことになる。

これで、晴れてインストール成功！

参考：WordPressのパーミッション設定とFS_METHOD
http://qiita.com/unarist/items/2186839e1c63453b9b96
terraform で 各 Iaas の仮想インスタンスを作成 (CloudStack/IDCFクラウド)

# 概要
terraform で各 IaaS ベンダーの仮想マシンを作成する

今回は IDCFクラウド のベースとなる tf ファイルを作成

対象ベンダー
- [Microsoft Azure](http://qiita.com/quickguard/items/e6a740baa0de0f35d877)
- Google Cloud
- DigitalOsean
- CloudStack

※AWSは今更なので割愛


#事前準備
- まずは[サインアップ](https://console.idcfcloud.com/signup/)
- 左メニューの [API] リンクより、以下の情報を取得  
    - エンドポイントURL  
    - API Key  
    - Secret Key  


#手順
tf ファイルを作成

```:provider.tf
provider "cloudstack" {
  api_url    = "${var.api_url}"
  api_key    = "${var.api_key}"
  secret_key = "${var.secret_key}"
  http_get_only = true
}

※http_get_only = true 必須
```

```:ipaddress.tf
resource "cloudstack_ipaddress" "default" {
  network = "${var.network}"
}
```

```:incetance.tf
resource "cloudstack_instance" "default" {
  name = "${var.instance_name}"
  display_name = "${var.instance_name}"
  zone = "${var.zone}"
  service_offering = "${var.default_service_offering}"
  network = "${var.network}"
  template = "${var.template}"
  keypair = "${var.keypair}"
  ipaddress = "${var.default_ipaddress}"

  provisioner "local-exec" {
    command = "./kick_api.sh command=enableStaticNat ipaddressid=${cloudstack_ipaddress.default.id} virtualmachineid=${cloudstack_instance.default.id}"
  }
}

```
※terraform に Static NAT 機能が実装されていないため、[bash script for CloudStack API](http://www.creationline.com/lab/2375) を使用

```:disk.tf
resource "cloudstack_disk" "default" {
  name             = "${cloudstack_instance.default.name}-DATA"
  disk_offering    = "Custom Disk"
  size             = "${var.default_disk_size}"
  attach           = true
  virtual_machine  = "${cloudstack_instance.default.name}"
  zone             = "${cloudstack_instance.default.zone}"
}
```

```:firewall.tf
resource "cloudstack_firewall" "default" {
  ipaddress = "${cloudstack_ipaddress.default.ipaddress}"

  rule {
    source_cidr = "0.0.0.0/0"
    protocol = "tcp"
    ports = ["22"]
  }
}
```

```variables.tf
variable "api_url" {}
variable "api_key" {}
variable "secret_key" {}
variable "zone" {
  default = "pascal"
}
variable "default_service_offering" {}
variable "template" {}
variable "default_disk_size" {}
variable "keypair" {}
variable "network" {
  default = "paskal-network1"
}
variable "instance_name" {}
variable "default_ipaddress" {}
```

tfvars は以下の通り

```:terraform.tfvars
## credential
api_url = "https://compute.jp-east.idcfcloud.com/client/api"
api_key = "*********************"
secret_key = "*********************"

## zone
zone = "joule"

## machine type
default_service_offering = "light.S1"

## image
template = "CentOS 6.6 64-bit"

## volume
default_disk_size = "10"

## ssh key
keypair = "ssh-key"

## network interface
network = "joule-network1"

## incetance
instance_name = "************"

## private ip address
default_ipaddress = "10.15.0.10"
```

#結果
```
$ terraform apply
```

**作成されたリソース**

```
$ terraform graph | dot -Tpng > graph.png
```

![graph.png](https://qiita-image-store.s3.amazonaws.com/0/105824/bbab3a9d-bc55-a72d-e788-db741e8bcaa2.png)

アカウントに登録されたメールアドレスにrootパスワードのメールが送信されるので確認
c++ builder XE4, 10.2 Tokyo > TeeChart > データが追加され続けるグラフで指定個数のデータのみ保持し続ける実装


```txt:動作環境
C++ builder XE4
    TeeChart Lite v2013.08.130414
RAD Studio 10.2 Tokyo Update 2 (追記 2018/01/10)
    TeeChart v2016.17.160129 32bit VCL
```

適宜データが追加されるグラフに対して、時間的に古いデータを自動的に取り除く方法を検討している。

## 取り除き方

- 先頭から指定の数を取り除く
- 取り除く処理のトリガーは、ある指定個数を超えた時

以下の変数をどう設定するか

- 取り除かれる数
- 取り除いた直後の残り数

以下のAとBのどちらがいいかは、その時々の状況で変わる。

### A. 取り除いた後の数を150とする考え
![](http://yuml.me/diagram/class/[10(取り除かれる数)|150(残る数)])

### B. 取り除かれる直前の数を150とする考え
![](http://yuml.me/diagram/class/[10(取り除かれる数)|140(残る数)])


## 実装

```txt:動作確認
C++ Builder XE4
```

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

#include <vcl.h>
#pragma hdrstop

#include <DateUtils.hpp>
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{

	Chart1->Series[0]->XValues->DateTime = true;
	Chart1->BottomAxis->DateTimeFormat = L"nn:ss";

	TDateTime dt;

	dt = Now();
	double dval;
	for (int idx=0; idx < 100; idx++) {
		dval = (double)random(60);
		Series1->AddXY(dt, dval, L"", clRed);
		dt = IncSecond(dt, 1);
	}

}
//---------------------------------------------------------------------------

static const int kNumberToKeep = 150;

void __fastcall TForm1::B_addClick(TObject *Sender)
{
	TDateTime lastDt = Series1->XValues->Last();

	TDateTime workDt = IncSecond(lastDt, 1);
	double dval;
	for (int idx=0; idx < 10; idx++) {
		dval = (double)random(60);
		Series1->AddXY(workDt, dval, L"", clRed);
		workDt = IncSecond(workDt, 1);
	}

	int removeCnt = Series1->Count() - kNumberToKeep;
	for (int loop=0; loop < removeCnt; loop++) {
		Series1->Delete(0);
	}

}
//---------------------------------------------------------------------------
```

ボタンが押される度に10データずつ追加される。

150を超えた時に超えた分だけ取り除かれる (上記のAの実装)。


## 画像

少しずつプロットが左に移動するようになった。

![qiita1.png](https://qiita-image-store.s3.amazonaws.com/0/32870/95a2fe0d-8611-1214-185f-4f171d2a1c7b.png)

![qiita2.png](https://qiita-image-store.s3.amazonaws.com/0/32870/66475766-4486-f4dd-1d12-a22bec906ebd.png)

![qiita3.png](https://qiita-image-store.s3.amazonaws.com/0/32870/1dd684c5-0454-a68b-3386-03f24aa8ae6e.png)


　
## 補足

図の作成にYUMLを使ってみた。

本当は上下でなく、左右のボックスにしたかったが、書き方がわからなかった。

YUMLのサービスが終わったとき、図がxマークになり、後からみたとき何が記載されていたかわからなくなるかも。そういう心配をする場合は画像貼り付けの方がいいのだろう。

一方で、YUMLの良い点は後からの編集が可能ということ。画像貼り付けの場合は変更する必要が出たときに画像を作成した元データをたどって、ツールを立ち上げて修正し、エクスポートしてこちらに持ってくる、という手順を踏まないといけない。
fullcalendarの使い方


##1. Gemfileにfullcalendar-railsとmomentjs-railsをを追加

```Gemfile
...

gem 'therubyracer',  platforms: :ruby

gem 'fullcalendar-rails'
gem 'momentjs-rails'

# Use jquery as the JavaScript library
gem 'jquery-rails'

...
```

```bash:ターミナル
$ bundle install
```

##2. カレンダーの表示

コントローラーとアクションを追加

```bash:ターミナル
$ bundle exec rails g controller calendar index
create  app/controllers/calendar_controller.rb
       route  get 'calendar/index'
      invoke  erb
      create    app/views/calendar
      create    app/views/calendar/index.html.erb
      invoke  test_unit
      create    test/controllers/calendar_controller_test.rb
      invoke  helper
      create    app/helpers/calendar_helper.rb
      invoke    test_unit
      create      test/helpers/calendar_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/calendar.js.coffee
      invoke    scss
      create      app/assets/stylesheets/calendar.css.scss
```

viewに表示領域を作成

```html:app/views/calendar.index.html.erb
<div id="calendar"></div>
```

jqueryでfullcalenderを呼び出し

```coffeescript:app/assets/javascript/calendar.js.coffee
$ ->
    $('#calendar').fullCalendar()
```

app/assets/javascript/application.jsのrequire_tree .の前に以下の二行を追加

```javascript:app/assets/javascript/application.js
//= require moment
//= require fullcalendar
```

app/assets/stylesheets/application.cssのrequire_tree .の前に以下の一行を追加

```css:app/assets/stylesheets/application.css
*= require fullcalendar
```

##イベントクリックの際の表示をhtmlにする

json.urlのevent_urlの引数からformat: :jsonを外す

```json:app/views/events/index.json.jbuilder
json.array!(@events) do |event|
   json.extract! event, :id, :title, :start, :end, :color, :allDay
-  json.url event_url(event, format: :json)
+  json.url event_url(event)
 end
```

##参考
http://qiita.com/siguremon/items/73651af19babd22fe012
RailsコンソールでModelの出力結果を表形式で表示するgem


```ryby:Gemfile
group :development, :test do
  gem 'hirb'         # モデルの出力結果を表形式で表示するGem
  gem 'hirb-unicode' # 日本語などマルチバイト文字の出力時の出力結果のずれに対応
  
  gem 'pry-rails'  # rails console(もしくは、rails c)でirbの代わりにpryを使われる
  gem 'pry-doc'    # methodを表示
  gem 'pry-byebug' # デバッグを実施
end
```

```bash:ターミナル
$ bundle install
```

Railsプロジェクトのルートディレクトリ(Gemfileと同じ場所)に.pryrcを作成し、次の内容を記載

```ruby:.pryrc
begin
  require 'hirb'
rescue LoadError
  # Missing goodies, bummer
end

if defined? Hirb
  # Slightly dirty hack to fully support in-session Hirb.disable/enable toggling
  Hirb::View.instance_eval do
    def enable_output_method
      @output_method = true
      @old_print = Pry.config.print
      Pry.config.print = proc do |*args|
        Hirb::View.view_or_page_output(args[1]) || @old_print.call(*args)
      end
    end

    def disable_output_method
      Pry.config.print = @old_print
      @output_method = nil
    end
  end

  Hirb.enable
end
```

##参考
http://ruby-rails.hatenadiary.com/entry/20141024/1414160189
iOSアプリのビルド時 duplicate symbol _OBJC_CLASS_ が大量に出て焦った時

cocoa pods を更新後、ビルドした時リンカエラーが出た。
メッセージを見てみると、`duplicate symbol _OBJC_CLASS_$...` が大量に出て、ビルドに失敗した。

→ プロジェクトの Build Settings → Other Linker Flags を見てみる。

```bash
-ObjC
-l"Pods-AFNetworking"
-l"Pods-MBProgressHUD"
-l"Pods-SDWebImage"
...
-all_load
```

となっているが、この `-l"Pods-ライブラリ名"` を全削除する

```bash
-ObjC
-all_load
...
```

こうなる。

ビルドする。→ OK
deviseでemailとusernameのどちらでもログインできるようにする


##テーブルにusernameカラムを追加する

###usernameカラムを追加

```bash:ターミナル
$ rails generate migration add_username_to_users username:string:uniq
$ rake db:migrate
```

###フォームから送られたパラメーター許可の設定

```ruby:app/controllers/application_controller.rb
# deviseコントローラーにconfigure_permitted_parametersメソッドを追加
  before_filter :configure_permitted_parameters, if: :devise_controller?
  
...
  
  private
    def configure_permitted_parameters
      devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:username, :email, :password, :password_confirmation, :remember_me) }
      devise_parameter_sanitizer.for(:sign_in) { |u| u.permit(:login, :username, :email, :password, :remember_me) }
      devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:username, :email, :password, :password_confirmation, :current_password) }
    end
```

##ログイン用のパラメータlogin(=emailまたはusername)をモデルに設定する

###loginパラメータのアクセサを設定

```ruby:app/models/user.rb
attr_accessor :login
```

###ログイン認証用キーをloginに設定

```ruby:app/models/user.rb
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, 
         :validatable, :authentication_keys => [:login]
```

###ログイン認証条件を書き換え(find_first_by_auth_conditionsをオーバーライド)

```ruby:app/models/user.rb
  def self.find_first_by_auth_conditions(warden_conditions)
    conditions = warden_conditions.dup
    if login = conditions.delete(:login)
      where(conditions).where(["username = :value OR lower(email) = lower(:value)", { :value => login }]).first
    else
      where(conditions).first
    end
  end
```

###usernameのバリデーションを設定

```ruby:app/models/user.rb
validates :username,
  :uniqueness => {
    :case_sensitive => false
  },
  :format => { ... } # etc.
```

##Viewの書き換え

###Viewファイル一覧を生成(オーバーライドするため)

```bash:ターミナル
$ rails g devise:views
```

###Viewファイルの書き換え

```html:app/views/devise/sessions/new.html.erb
<p><%= f.label :email %><br />
<%= f.email_field :email %></p>

↓↓↓書き換え

<p><%= f.label :login %><br />
<%= f.text_field :login %></p>
```

```html:app/views/devise/registrations/new.html.erb
以下を追加
<p><%= f.label :username %><br />
<%= f.text_field :username %></p>
```

```html:app/views/devise/registrations/edit.html.erb
以下を追加
<p><%= f.label :username %><br />
<%= f.text_field :username %></p>
```

##参考
http://qiita.com/HamaTech/items/8a4694fa40414aa029ea
フォームで配列を扱う方法


###フォーム

```html:form
<%= form_tag :action => :edit_tag, :id => @id do %>
  Tag1 : <%= text_field_tag 'tags[]' %><br />
  Tag2 : <%= text_field_tag 'tags[]' %><br />
  Tag3 : <%= text_field_tag 'tags[]' %><br />
  Tag4 : <%= text_field_tag 'tags[]' %><br />
<%= submit_tag %>
<% end %>
```

送信すると以下のように格納される

```
params = { :tags => ['tag1', 'tag2', 'tag3', 'tag4'] }
```

###ハッシュ

```html:form
<% form_tag :action => :create do -%>
  <%= text_field_tag 'post[title]' %><br />
  <%= text_area_tag  'post[body]' %><br />
  <%= submit_tag %>
<% end -%>
```

送信すると以下のように格納される

```
params = {
  :post => {
    :title => "タイトル",
    :body => "本文"
  }
}
```
複数の子レコードを作成、更新する


##1対1の時

###MemberモデルはAbatarモデルに１対１の関連を持っている

```ruby:app/assets/models/member.rb
class Member < ActiveRecord::Base
  has_one :avatar
  accepts_nested_attributes_for :avatar, allow_destroy: true
end
```

```ruby:app/assets/controllers/members_controller.rb
def create
  params = { member: { name: 'Jack', avatar_attributes: { icon: 'smiling' } } }
  member = Member.create(params[:member])
  member.avatar.id # => 2
  member.avatar.icon # => 'smiling'
end

def update
  params = { member: { avatar_attributes: { id: '2', icon: 'sad' } } }
  member.update params[:member]
  member.avatar.icon # => 'sad'
end

def destroy
  member.avatar_attributes = { id: '2', _destroy: '1' }
  member.avatar.marked_for_destruction? # => true
  member.save
  member.reload.avatar # => nil
end
```

##1対多の時

###MemberモデルはPostモデルに１対多の関連を持っている

```ruby:app/assets/models/member.rb
class Member < ActiveRecord::Base
  has_many :posts
  accepts_nested_attributes_for :posts, allow_destroy: true
end
```

```ruby:app/assets/controllers/members_controller.rb
def create
  params = { member: {
  name: 'joe', posts_attributes: [
    { title: 'Kari, the awesome Ruby documentation browser!' },
    { title: 'The egalitarian assumption of the modern citizen' },
    { title: '', _destroy: '1' } # this will be ignored
  ]
}}

member = Member.create(params[:member])
member.posts.length # => 2
member.posts.first.title # => 'Kari, the awesome Ruby documentation browser!'
member.posts.second.title # => 'The egalitarian assumption of the modern citizen'
end

def update
  member.attributes = {
  name: 'Joe',
  posts_attributes: [
    { id: 1, title: '[UPDATED] An, as of yet, undisclosed awesome Ruby documentation browser!' },
    { id: 2, title: '[UPDATED] other post' }
  ]
}

member.posts.first.title # => '[UPDATED] An, as of yet, undisclosed awesome Ruby documentation browser!'
member.posts.second.title # => '[UPDATED] other post'
end

def destroy
  params = { member: {
  posts_attributes: [{ id: '2', _destroy: '1' }]
}}

member.attributes = params[:member]
member.posts.detect { |p| p.id == 2 }.marked_for_destruction? # => true
member.posts.length # => 2
member.save
member.reload.posts.length # => 1
end
```

###reject_if

パラメータが指定した条件に合致した場合、子要素を作成しない.
procとmethodのシンボルで指定可能

proc

```ruby:app/assets/models/member.rb
class Member < ActiveRecord::Base
  has_many :posts
  accepts_nested_attributes_for :posts, reject_if: proc { |attributes| attributes['title'].blank? }
end
```

method

```ruby:app/assets/models/member.rb
class Member < ActiveRecord::Base
  has_many :posts
  accepts_nested_attributes_for :posts, reject_if: :reject_posts

  def reject_posts(attributed)
    attributed['title'].blank?
  end
end
```

##参考
複数の子レコードを作成・更新する. accepts_nested_attributes_for
http://qiita.com/hmuronaka/items/818c421dc632e3efb7a6#3-1
`<input type="file">`のデザインを変える方法


`<input type="file">`のstyleを`display:none;`にする
ラベル側でデザインを指定

例

```_form.html.erb
<%= f.label :image, class: "btn btn-default" %>
<%= f.file_field :image, class: "fileInput",style: "display:none;" %>
```