OmniAICreator/Qiita-1.07M huggingface dataset:
長いリストを任意のフォーマットで出力するための columnize gem を試す #ruby

## :gem: 概要
長いリストを任意のフォーマットで出力するための columnize gem を試しました

## <i class="fa fa-cloud-download" style="font-size:1em;"></i> インストール

~~~bash
$ gem install columnize
~~~

## <i class="fa fa-flask" style="font-size:1em;"></i> サンプル
### サンプルコード

~~~ruby
require "columnize"
require "prime"
require "pp"

# lorem ipsum 取得のために利用
# https://github.com/sevenwire/forgery
require "forgery"

def print_hr
  puts "-----------------------------------------"
end

puts "* オプションキー"
attrs = Columnize::Columnizer::ATTRS
pp attrs
print_hr

numbers = Prime.take(10).to_a
puts "* 数値 columnize"
p numbers.columnize
print_hr

texts = Forgery(:lorem_ipsum).words(10).split(' ')
puts "* 文字列 columnize"
p texts.columnize
print_hr

puts "* 配列フォーマット, 幅 25。 :arrange_array => true, :displaywidth => 25"
puts texts.columnize :arrange_array => true, :displaywidth => 25
print_hr

puts "* 配列フォーマット, 幅 50。 :arrange_array => true, :displaywidth => 50"
puts texts.columnize :arrange_array => true, :displaywidth => 50
print_hr

puts "* パイプ区切り, 幅 50。 :displaywidth => 50, :colsep => ' | '"
puts texts.columnize :displaywidth => 50, :colsep => ' | '
print_hr
~~~

* 出力確認

~~~bash
* オプションキー
[:arrange_vertical,
 :array_prefix,
 :array_suffix,
 :line_prefix,
 :line_suffix,
 :colfmt,
 :colsep,
 :displaywidth,
 :ljust]
-----------------------------------------
* 数値 columnize
"2  3  5  7  11  13  17  19  23  29"
-----------------------------------------
* 文字列 columnize
"lorem  ipsum  dolor  sit  amet  consectetuer  adipiscing  elit  proin  risus"
-----------------------------------------
* 配列フォーマット, 幅 25。 :arrange_array => true, :displaywidth => 25
[lorem     , ipsum       ,
 dolor     , sit         ,
 amet      , consectetuer,
 adipiscing, elit        ,
 proin     , risus       ]
-----------------------------------------
* 配列フォーマット, 幅 50。 :arrange_array => true, :displaywidth => 50
[lorem       , ipsum     , dolor, sit  , amet ,
 consectetuer, adipiscing, elit , proin, risus]
-----------------------------------------
* パイプ区切り, 幅 50。 :displaywidth => 50, :colsep => ' | '
lorem | dolor | amet         | adipiscing | proin
ipsum | sit   | consectetuer | elit       | risus
-----------------------------------------
~~~

## :books: 外部資料
* <i class="fa fa-external-link" style="font-size:1em;"></i> [columnize GitHub](https://github.com/rocky/columnize)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [columnize RubyGems](https://rubygems.org/gems/columnize)
TopCoder環境整備の最新事情

はい、といってもいろんな参考記事へのリンク集ですが…

##Greed 2.0を使う
僕が以前TopCoderをバリバリやっていた頃はプラグインを三つぐらい入れてそれでテンプレートくんだり、ファイル作ってもらったりみたいなことしていたんですが、最近はGreedというプラグイン一個で出来るようです。
* [TopCoder の強欲プラグイン、Greed を使う！ / ororogさん](http://qiita.com/ororog/items/42a9032f20bd9d239f95)
* [Customizing the TopCoder greed plugin / vexorian's blog](http://www.vexorian.com/2013/09/customizing-topcoder-greed-plugin.html)
上が日本語でのQiitaに載っている参考記事で下がその著者さんが参考にした英語のブログです。
基本的には日本語記事の通りに設定すれば大丈夫だと思います。~~しかしtester.cppがこの記事には載ってないので、デフォルトをひぱってくるか、英語のサイトにはカスタマイズされたものがあるのでそれを使うのがいいと思います。~~(※tester.cppを英語版からそのままコピペしたところコンパイルエラーになりました。ご注意ください。)
記事途中にGitHubへのリンクがあるので日本語のほう使ったほうが無難みたいです。

##超便利ヘッダーをつかう
長らく競技プログラミングというかプログラミング自体から受験関係で離れていたのでびっくりしたのですが、今はbits/stdc++.hという一発で標準ライブラリすべてをインクルードしてくれる便利ヘッダーがあるらしいですね。
今はMacbookをメインに使っているのでとりあえずつかってみたのですが、ここでXCode付属gccだとインクルードできないことが発覚したのでググってここを参考に入れ直しました
[homebrewでgcc4.9を入れたお話 / ぱーぽーのぷろぐらみんぐ記](http://purple-jwl.hatenablog.com/entry/20140706/1404655974)
gccの最新バージョンは5.1(2015/4/22現在)のようですが多分homebrewではここまでは対応していません。5.1を使いたい方は個人で調べていただけたらと思います。4.9でとりあえずの目標は達成されるので僕はhomebrewで4.9を入れました。

ちなみに時間がかかるとこの記事には書かれていますが僕の最新Macbook Pro13インチではすぐに終わりました。

以上です。今後どのくらいガチでやっていくかは割と悩みどころ（レート落ちるのがこわくて参加できてない）ですが、快適になったのでとりあえずちょこちょこ過去問とかもこなしていきたいと思っています。
特定のCSSプロパティが ::after や ::before などの擬似要素に適用されない場合の解決策

::after や ::before などの擬似要素に対してスタイルを指定する際、上位のセレクタで指定した特定のプロパティが期待通りに適用されない場合があります。

## 擬似要素にスタイルが適用されない例

下の例では、全称セレクタ（*）で "box-sizing" プロパティと "color" プロパティを指定していますが、#sample_02 の ::after擬似要素には "color: red" の指定のみが適用されていることがわかります。

~~~html:HTML
<div id="sample_01"></div>
<div id="sample_02"></div>
~~~

~~~css:CSS
* {
	box-sizing: border-box; /* 擬似要素には適用されない */
	color: red;
}

#sample_01 {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 20px solid blue;
}

#sample_02::after {
	content: 'after';
	display: block;
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 20px solid blue;
}
~~~
![sample_css_after.png](https://qiita-image-store.s3.amazonaws.com/0/25032/6b050056-271f-99e8-74a5-36015c621c93.png)

## 継承プロパティと非継承プロパティ

上位のセレクタで指定したプロパティが擬似要素に適用されるかどうかは、そのプロパティが【継承プロパティ】か【非継承プロパティ】かに依ります。

【非継承プロパティ】である "box-sizing" はそのままでは擬似要素に適用されないため、以下のようにCSSを調整する必要があります。

~~~css:CSS
* {
	box-sizing: border-box;
	color: red;
}

*::before,
*::after {
	box-sizing: border-box; /* 擬似要素にも同様のプロパティを指定 */
}
~~~

プロパティ値を inherit とすることで明示的に「継承」させることも可能です。

~~~css:CSS
* {
	box-sizing: border-box;
	color: red;
}

*::before,
*::after {
	box-sizing: inherit; /* 継承 */
}
~~~

全称セレクタ（*）は、一般的には「すべての要素にマッチし一括でスタイルを適用できる」と説明されますが、::after や ::before などの擬似要素と組み合わせて使用する際には注意が必要です。
（全称セレクタを使用することの是非については本記事では触れません。）

なお、CSSプロパティの「継承（inheritance）」の概念についてはMDNの記事が参考になります。
[inheritance - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/inheritance)
MongoDBのストレージエンジンをWiredTigerに移行する


ディスク使用量を減らせると聞いて。
MongoDBの3以降をHomebrewなりで入れてる前提です。

# 1. DBのファイルをバックアップしとく
`cp -r /usr/local/var/mongodb .`
必須ではないけど念のため。

# 2. 既存のDBをダンプする
`mongodump --out mongodb_dump`

# 3. サービスを止める
`launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist`

# 4. DBのファイルを削除
`rm -rf /usr/local/var/mongodb/*`

# 5. mongod.confを書き換える
engineをwiredTigerに。今回はよりディスク容量を抑えたかったのでjournalをfalse。

```
$ cat /usr/local/etc/mongod.conf
storage:
  dbPath: /usr/local/var/mongodb
  engine: wiredTiger
  journal:
    enabled: false

systemLog:
  destination: file
  path: /usr/local/var/log/mongodb/mongo.log
  logAppend: true

net:
  bindIp: 127.0.0.1
```


# 6. サービスを起こす
`launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist`

# 7. DBを書き戻す
`mongorestore mongodb_dump`

以上で完了。ディスク使用量が当社比95%減くらいになったので満足。

参考：http://docs.mongodb.org/manual/release-notes/3.0-upgrade/
はじめてのMMDAgent

#スクリプトきほんのき
MMDAgentのスクリプトは、
`1　31　RECOG_EVENT_STOP|こんにちは　SYNTH_START|mei|mei_voice_normal|こんにちは。` 
のように、
数字1　数字2　ほげほげ1(イベント)　ほげほげ2(アクション)　
となっています。ざっくり言うと、
数字1の状態のときにほげほげ1というイベントが起こったら、数字2と同じ数字のところに遷移してね！
んでもってほげほげ2も実行しといてちょーだいな。
って感じです。

#メイちゃんとおしゃべり(きほん)

```
1　31　RECOG_EVENT_STOP|こんにちは　SYNTH_START|mei|mei_voice_normal|こんにちは。
31　2　SYNTH_EVENT_STOP|mei　　　  <eps>
```

きほんのおしゃべりはこんな感じ。

まず、1行目と2行目の最初の1という数字
これは、音声認識待機状態みたいなものです(たぶん)

メイちゃんが待機している状態の時に、「こんにちは(わ)」を認識すると、認識が終了します。
`RECOG_EVENT_STOP|こんにちは(わ)` 
というイベントが起こったら、31に遷移してね。
`SYNTH_START|mei|mei_voice_normal|こんにちは。` 
をやってね！と書いてあるわけです。

さて、31に遷移しました。
`SYNTH_EVENT_STOP|mei` 
合成が終了したら、2に遷移してね。
4項目目(ほげほげ2に当たる部分)の\<eps\>は、**何もしない**ということです。
2に遷移すると、fstの上の部分に書かれているのですが、
音声認識、タイマーイベントなどがスタートし(つまるところ待機状態が再開)
状態1に遷移、喋りかけられるの待つことになります。

#メイちゃんとおしゃべり(モーションがついたよ！)
fstにサンプルとして書かれている「こんにちは」を例にします。

```
1　31　RECOG_EVENT_STOP|こんにちは　SYNTH_START|mei|mei_voice_normal|こんにちは。
1　31　RECOG_EVENT_STOP|こんにちわ　SYNTH_START|mei|mei_voice_normal|こんにちは。
31 32　<eps>　　　　　　　　　　　　　MOTION_ADD|mei|action|モーションファイル|PART|ONCE
32　2　SYNTH_EVENT_STOP|mei　　　　<eps>
```

音声を認識が終了し、31に遷移するところまではさっきと一緒。
31に遷移すると、おや、3項目目(ほげほげ1)には\<eps\>と書かれています。
遷移条件を指定したくない場合は3項目目を\<eps\>にします。
そうすると

```
SYNTH_START|mei|mei_voice_normal|こんにちは。
MOTION_ADD|mei|action|モーションファイル|PART|ONCE
```

の2つのアクションが同時に起こります。
そこからはさっきと同じ。
こんにちはを認識し、認識終了したところで、32に遷移することになるので、
音声合成が終了したら、2に遷移、待機状態に戻ります。

##Tips
`1 31 イベント　アクション` 
という行が二行ありますよね。
これは、「こんにちは」か「こんにちわ」を認識したら、31に遷移してね。ということです。

```
1　31　RECOG_EVENT_STOP|こんにちは　SYNTH_START|mei|mei_voice_normal|こんにちは。
31　32　<eps>                     MOTION_ADD|mei|action|モーションファイル|PART|ONCE
```

```
1　41　RECOG_EVENT_STOP|こんにちわ　SYNTH_START|mei|mei_voice_normal|こんにちは。
41　42　<eps>   　 　　 　　　　　　　MOTION_ADD|mei|action|モーションファイル|PART|ONCE
```

の様にわけて書いてもいいんだろうけど、
どうせ遷移先で同じアクションを行うんだから、まとめたほうがスマートだよね。
makeで "all warnings being treated as errors" を避ける

./configure で warning も error として扱われる場合の対処法。

```
$ ./configure
$ make

...

cc1: all warnings being treated as errors
make[1]: *** [libarchive/archive_cryptor.lo] Error 1
make[1]: Leaving directory `/home/ubuntu/libarchive'
make: *** [all] Error 2
```

./configure の前に、警告を無視するための環境変数を CFLAGS / CXXFLAGS にセットしておく。
(CFLAGS は C コンパイラ用、CXXFLAGS は C++ コンパイラ用の環境変数。)

```
$ export CFLAGS="-Wno-error"
$ export CXXFLAGS="-Wno-error"
$ ./configure
$ make
$ sudo make install
```

参考: http://stackoverflow.com/questions/8132594/disable-werror-ini-configure-file
DoExpressCheckoutPayment 呼び出し時のエラーについて

PayPalのエクスプレスチェックアウトの処理時に以下2つのエラーが返ってきました。

L_ERRORCODE0: 10422
L_SHORTMESSAGE0: Customer must choose new funding sources.
L_LONGMESSAGE0: The customer must return to PayPal to select new funding sources.
L_SEVERITYCODE0: 空

L_ERRORCODE0: 10486
L_SHORTMESSAGE0: This transaction couldn't be completed.
L_LONGMESSAGE0: This transaction couldn't be completed. Please redirect your customer to PayPal.
L_SEVERITYCODE0: 空

これはどんなエラーかわかるかたいますか？エラー原因に合わせて注文者にメッセージを出そうかと思っているのでよろしくお願いいたします。
開発効率を数倍アップ！hifive開発者ツールを使いこなそう

システム開発は順当に行くだけとは限りません。むしろ開発よりもデバッグやテストの方が使っている時間が多かったりもします。そのため、効率的なデバッグ環境があるというのは大きな利点になるでしょう。

hifiveではそのためのhifive開発者ツールを用意しています。複雑になりがちなJavaScript開発もhifive開発者ツールを使えばすっきり見通しの良い開発が続けられるはずです。

## デバッグツールの設定

まずは設定からです。といってもとても簡単で、

```
<script src="//code.htmlhifive.com/h5-dev-tool.js"></script>
```

を読み込むだけです。または[こちらからダウンロード](http://www.htmlhifive.com/conts/web/download/download/WebHome/hifive_devtool-1.0.1.zip)したZipファイルを解凍して、同じフォルだ内に入れて読み込んでください。

注意点としては、 **h5.dev.js** を読み込んだ後に **h5-dev-tool.js** を読み込むようにしてください。

## hifive開発者ツールを起動

JavaScriptファイルを読み込む記述をしたら、HTMLファイルをブラウザから開きます。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-devtool-01.png?w=400)

Google Chromeなどポップアップウィンドウをデフォルト禁止しているブラウザではこのような注意アラートが出るかも知れません。ポップアップブロックを解除して再読み込みしてください。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-devtool-02.png?w=400)

こちらがhifive開発者ツールが開いた状態になります。左下にあるウィンドウはWebアプリケーション、右上にあるのがhifive開発者ツールです。

## hifive開発者ツールの主な機能

では主な機能を順番に見ていきます。まずメソッドの内容が分かります。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-devtool-03.png?w=400)

あるコントローラーのあるロジックにおけるメソッドが分かるようになっています。0と表示されているのはメソッドがコールされた回数です。

次にトレースです。トレースではメソッドの呼び出しと終了がリストになって表示されます。これでどういった処理が行われたかが一目で分かるようになります。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-devtool-04.png?w=400)

さらにトレースでは右クリックで該当関数に飛べるようになっています。

コントローラレベルではイベントハンドラを見ることもできます。例えば下の頭の場合、 **#calc click** に対してイベントがついているのが分かります。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-devtool-05.png?w=400)

ちょっとこの画像では分かりづらいのですが、 **#calc click** をマウスオーバーすると、左側の **=** ボタンがハイライトされます。つまりイベントハンドラと結びついたDOMをハイライトしてくれます。これはどのイベントがどのDOMと関連しているかが一目で分かるので開発効率があがるはずです。

さらにコントローラ自身を選んだ場合、そのコンテナがハイライトされます。これでコントローラがどのDOMを監視しているかが一目で分かります。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-devtool-06.png?w=400)

## 便利なところ

hifiveはMVCフレームワークなので、ファイル名の命名規則や配置を決めておくことで誰でも開発に加わりやすいです。とはいえ、大型なWebアプリケーションのある一部を修正してほしいと言われてもとっかかりがないと始めることすらできないと思います。

そこでhifive開発者ツールを使うと画面を見つつ、該当する画面中の該当するメソッドがどこにあるのかすぐに突き止められるようになります。さらにトレースを見ながら処理を追いかけていくことで、どこを修正すべきかと言ったあたりをつけるのも簡単になるでしょう。

デバッグ時においてもロガーやトレースを組み合わせることで開発効率はぐっとアップするはずです。JavaScriptのMVCフレームワークはいくつかありますが、hifiveはこういった業務の中で求められるであろう機能が充実しているのが大きな特徴になります。ぜひご利用ください！

今回のコードは[GitHub](https://github.com/moongift/hifive-examples)上にアップしてあります（calc.html）。こちらもあわせてご覧ください。

[hifive - HTML5とスマートフォンのための開発プラットフォーム - hifive](http://www.htmlhifive.com/conts/web/view/Main/WebHome)
hifiveが提供する多彩なUIコンポーネントを紹介（ボックス区切り）

業務用Webアプリを開発する際にはプログラマーの方でも簡単に使えるUIコンポーネントの存在が必須です。特にカスタマイズ性の高さやフレームワークとの親和性が大事になります。

hifiveはフレームワークはもちろん、UIコンポーネントも合わせて提供しています。業務アプリで良くありがちなUIもhifiveを使うことで素早く実装ができるはずです。今回はまずボックス区切りを紹介します。

## ボックス区切りとは

まずは画像で見てもらった方が早いでしょう。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-html5-box2.png?w=400)

各ボックスにある区切りはマウスでドラッグして移動できます。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-html5-box3.png?w=400)

こちらが実際にブラウザで試しているところです。マウス操作でスムーズに幅を変更できます。

https://www.youtube.com/watch?v=RKmgbEv0ZOM

## よくあるニーズ

業務アプリを作る際には必要に応じて左右の幅を自分で変更したいと言ったニーズが出るかと思います。また、情報を動的に隠したり、その逆で表示したいと考える場合も多いでしょう。そんなときに使ってみてください。

## 使い方

では実際の使い方です。HTMLは次のようになります。

```
<div class="dividedBox horizontal">
  <div class="box fill"></div>
  <div class="box fill autoSize"></div>
  <div class="box fill "></div>
</div>
```

そしてJavaScriptは次のようになります。

```
$(function(){
  $('.dividedBox').each(function(){
    h5.core.controller(this, h5.ui.container.DividedBox);
  });
});
```

**h5.core.controller** に **h5.ui.container.DividedBox** として登録していくだけで使えます。

## 縦方向にも

クラスに horizontal を指定すると横方向に、vertical を指定すると縦方向にボックスが並びます。

```
<div class="dividedBox vertical">
  <div class="box fill"></div>
  <div class="box fill"></div>
  <div class="box fill"></div>
</div>
```

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-html5-box4.png?w=400)

区切りは上下に動くようになります。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-html5-box5.png?w=400)

ボックスの幅は個別に指定できます。幅が足りない分は、親要素である dividedBox の内容が表示されます。

## スマートフォンにも対応

HTML5ということもあり、スマートフォンでの表示、操作にも対応しています。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-html5-box8.png?w=400)

タッチ操作で区切りを起動できます。

![](https://htmlhifive.files.wordpress.com/2014/06/hifive-html5-box9.png?w=400)

こちらはiPhoneで試したところです。

https://www.youtube.com/watch?v=3HROJjx7Ld8

## その他

変更した区切りを元の位置に戻す場合は dividedBoxController.refresh() のようにrefresh メソッドを使います。

```
dividedBoxController.refresh();
```

区切りを動的に追加する場合は insert メソッドを使います。

```
this.dividedBoxController.insert(1,	'<div class="box"></div>');
```

ボックスを追加することもできます。

```
dividedBox.append(addDiv)
```

[こちらにデモ](http://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/dividedBox/index.html)がありますので実際に触れてみてください。

----

[ボックス区切り移動](http://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/dividedBox/index.html)

[ボックス区切り移動サンプル(ボックス追加機能、リセット機能あり)](http://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/dividedBox/sample/index.html)
php で 整数かチェックする（数値型文字列含む）

is_int()は数値型文字列をfalseで返す。
is_numeric()は数値型文字列もtrueで返す。

てことで、こんなふうに書いてみた。

static function is_error_int(\$value){
  //データが存在するとき、数値（数値型文字列含む）、int変換した時と同じ（端数がない）
  return isset(\$value) && ( ! is_numeric(\$value) || $value - intval(\$value) > 0 );
}

追記：
filter_var による方法を教えて頂きました。
これは便利ですね。

```php
echo is_decimal(10);		//true
echo is_decimal(10.01);		//false
echo is_decimal("10");		//true
echo is_decimal("10.01");	//false
echo is_decimal("ABC");		//false
echo is_decimal(0x10);		//true
echo is_decimal("0x10");	//false


function is_decimal($value) {
	return filter_var($value, FILTER_VALIDATE_INT) !== false;
}
```
その他にもたくさんのフィルターがあります。
http://php.net/manual/ja/filter.filters.validate.php
【CakePHP】他のアクションを実行

コントローラー内で他のアクション（ビューのレンダリング込み）を実行。
ただし、setAction()後に残りのコードも実行される仕様なので注意。

共通のアクションとビューを使用したい場合に使用する。

###書式

```php
$this->setAction($action,$arg,...);
```
\$action:実行するアクション
\$arg:アクションに対する引数

###サンプル

```php
function foo($id){

}

function bar(){
  $this->setAction('foo',10);
}
```
Python 3.4.3のインストール

# Python3.4.3のインストール

## ダウンロード

- 以下のサイトからダウンロードするバージョンを探す
    - https://www.python.org/
    - Linuxなら『Gzipped source tarball』でよいだろう

```shell
$ wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz
```

## インストール

-  事前に必要となるパッケージをインストール

```shell
$ yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel
```

- Pythonをインストール
    - prefixでインストールするディレクトリを指定

```shell
$ tar zxvf Python-3.4.3.tgz
$ cd Python-3.4.3
$ ./configure --prefix=/usr/local/python
$ make && make install
```

- シンボリックリンクを作成
    - pipはpythonのパッケージマネージャ

```
$ ln -s /usr/local/python/bin/python3 /usr/local/bin/python
$ ln -s /usr/local/python/bin/pip3.4 /usr/local/bin/pip
```

- バージョンを確認
    - 変わっていなかったらログインし直すと変わる

```
$ python --version
$ pip --version
```
【jQuery】select2プラグイン


セレクトボックスに装飾を加えるプラグイン。フィルタ付きセレクトボックスや、タグ付きセレクトボックスや、画像付きセレクトボックスなどが作れる。

サイト
https://select2.github.io/

CDN

```html
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
```

#フィルタ付きセレクトボックス

```html:html
<select>
  <option>サッカー</option>
  <option>野球</option>
  <option>バスケ</option>
</select>
```

```js:jQuery

$('select').select2({
  width:"300px",  //サイズ
  placeholder: "スポーツを選択してください", //プレースフォルダ
  allowClear: true //
})
//セレクトボックス変更時
.on('change',function(){
  
})

```

参考
[Events in select2 [jQuery]](http://runnable.com/UmuP-67-dQlIAAFU/events-in-select2-for-jquery)
[select2.jsを使用してみる](http://hoge1231.blog67.fc2.com/blog-entry-135.html)
[[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2](http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-select2.html)

#bootstrap2のモーダルと併用して動かなかった件

モーダルにtabindex="-1"を書くと動かないので注意。

参考：[Select2 doesn't work when embedded in a bootstrap modal](http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal)
Selenium WebDriver用にエレメント指定文をコピーしてくれるFirefoxアドオン

ブラウザ上で右クリックすると、その要素を特定する
driver.find_element(:xpath, "xxxx")
のような形式の文字列をクリップボードにコピーしてくれるアドオン。

C# Python Ruby Javaに対応してます（設定画面で言語を選べます）。

![スクリーンショット 2015-04-22 20.33.13.png](https://qiita-image-store.s3.amazonaws.com/0/76324/891a681f-bd71-9301-e489-52841af440a4.png)

WebDriver Element Locator（ダウンロードページ）
https://addons.mozilla.org/ja/firefox/addon/element-locator-for-webdriv/

シンプルですがけっこう便利なツールです。
CodeIQやってみた


## 「コード・トライアスロン」数学の問題

　CodeIQで[面白そうな問題](https://codeiq.jp/q/1383)があったのでチャレンジ。素数列に関連した関数の定義を与えられてそれを実装する問題。実行時間制限のある問題だったがメモ化再帰したら通った。実行時間4.66秒と何とか及第点の結果だがもう少し高速化できそう。以下は提出コード。


```ruby:my_code.rb
require 'prime'


@cache_f = { 0 => 3, 1 => 0, 2 => 2 }
def f(n)
  @cache_f[n] ||= f(n - 2) + f(n - 3)
end


@cache_p = []
def get_p(n)
  raise unless n > 0
  until @cache_p[n - 1]
    i = @cache_p.last || (2 - 1)
    begin
      i += 1
    end until f(i) % i == 0
    @cache_p << i
  end
  f(@cache_p[n - 1])
end


def g(n)
  Prime.prime_division(n).map{|a| a[0] }.max
end


def h(n)
  raise unless n > 0
  prime_cache = []
  prime_prime = []
  Prime.each.with_index do |p, i|
    break if p > n
    prime_cache << p
    prime_prime << p if prime_cache.include?(i + 1)
  end
  prime_prime.inject(0){|s,i| s + i }
end




P = get_p(30)
Q = g(P)
R = h(Q)

puts "P: #{P}, Q: #{Q}, R: #{R}"
```
ActiveAndroidで複合インデックスを構築させる方法

通常のindexは以下の通り`index = true`って書いておけば簡単に作れる。

```java:宣言（カラム部分のみ）
@Column(name = "score", index = true)
public int score;
```

```shell-session:生成されるクエリ（一部）
CREATE INDEX index_XXX_score on XXX(score);
```

これを複合indexにする場合、組み合わせたいカラム同士で同じ名前をindexGroupsに追加することで複合indexが構築される。

```java:宣言（カラム部分のみ）
@Column(name = "category_id", indexGroups = {"category_score"})
public int categoryId;
@Column(name = "score", indexGroups = {"category_score"})
public int score;
```

```shell-session:生成されるクエリ（一部）
CREATE INDEX index_XXX_category_score on XXX(category_id, score);
```

Groups、という名前からお察しの通り、あるカラムを複数のindexに絡めることも可能。例えば、A-BとB-Cの二つの複合indexを使うとか。

例えばこうやってcategoryとscoreで複合indexを設定しておけば、きっと「category = 1をscoreで昇順」みたいなリクエストが爆速になってくれるはず。id取得ばかりがクエリじゃない。ORMはSQLを理解してこそ真の力を発揮できるはず。
本番PayPalアカウントでIPNの警告メール

PayPalアカウントに「PayPal IPN URLに通知できなかった」旨の警告メールが来ました。
しかし、該当URLは普通にアクセスできます。なぜこのメールが届いたのかわかりません…。考えられる点としては、IPNで何らかのエラーが発生したときにHTTPステータスを404として返すようにしていました。これが原因なのかわかる方はいますでしょうか。
【Rails初心者が抑えたい】settings.ymlを使いこなせるか

# settings.ymlをなぜ使うのか
マジカルな定数が出てきてしまうときに、コードにあんまりそいつを登場させたくない。なぜなら、定数が変化したときに変えなきゃいけない箇所が多くなるから。もしくは、その定数自体が何も意味を暗示していない場合、非常にコードが読みにくくなるので、登場させたくないですね。
そういう場合にsettings.ymlで定数をまとめて、扱いやすくしちゃいましょう。

# どう使うのか

```config/settings.yml

# 定数を一箇所にまとめることで一括変更しやすく。
reply_templates:
  reply_email: "お世話になっております。"
  reply_phone_call: "もしもし太郎です。"

# => 外から 
# Settings.reply_templates.reply_email
# のようにアクセスできる


# それ自体意味のない数字を生徒名からアクセスできるように。
students:
  id:
    taro: 1
    hanako: 2
    kenta: 3

# => 外から 
# Settings.students.id.taro
# のようにアクセスできる

```

てな感じで使えるわけですね。

コードに入れたくないなぁっていう定数が入ってしまう場合は、settings.ymlを使いましょう。

# gem追加と初期設定に関しては
このqiitaによくまとめられているので参照してください
-> http://qiita.com/hilotter/items/45616c83704a15532987
Chrome42以降で-webkit-canvasを使った背景更新に不具合？

Android端末向けなどで背景にcanvasを利用したい場合にCSSの背景に-webkit-canvasを使っている方もいらっしゃるかと思いますがChrome42以降でcanvasの更新を行っても、更新内容が反映されない場合があるようです。

https://code.google.com/p/chromium/issues/detail?id=477830

ゲームなどで-webkit-canvasを使うケースは多いかもしれないので使っている場合には注意が必要そうです。
※PC版、Android版で再現を確認

※2015/6/2追記
PC版・スマホ版とも修正されて直っています。
Railsでの404、500、その他エラーへのベストプラクティスについてまとめてみる。

まず、ここのコメントでかなり議論している方がいます。
[Railsの404,500エラーページをカスタマイズ](http://qiita.com/mr-myself/items/c2f4fb2e5dcee6a336f3)
以下でも同じ人がコメントしてる。
[Railsで404/500エラーの処理](http://qiita.com/ytr_i/items/fb1ea251197003deec12)
[[Rails 4.x] エラーページの作り方](http://qiita.com/tsumekoara/items/88815b94f63608a801a8)

で、まぁ海外の記事も参考にしようかなと。
ここらへん？
[Redirecting to Custom 404 and 500 Pages in Rails](http://easyactiverecord.com/blog/2014/08/19/redirecting-to-custom-404-and-500-pages-in-rails/)

localeはこれか。
[Rails で 404, 500 などエラーページを国際化対応](http://easyramble.com/i18n-for-http-status-errors.html)

結果、上のコメントしてる人のも合わせて、海外の記事が一番シンプルでよさげだなー。
【Rails】Layoutのnamespaceを使いこなす【DRY】

# layoutとは
view内に繰り替え時登場する"layout"が存在する場合、そいつをそれぞれのhtmlに繰り返し書くことを避けるために、まとめられるよっていうもの。
layout内の```<%= yield %>```にそれぞれのrenderされるviewが入る。

# Layoutのnamespaceルール
So simple. 基本的にはactionが呼ばれてるcontrollerのnamespaceと同じところにある、layoutを見に行く。なければ上にさかのぼる。

```
admin/hogeparent/hogechild_controller.rb
```
のcontrollerから先に呼ばれるのは

```
layout/admin/hogeparent/hogechild.html.erb
```
でこいつがいなければ

```
layout/admin/hogeparent.html.erb
```
が見られて...って感じで上にさかのぼって参照される。

# namespaceに逆らいたいこともある
ある特定のアクションから、その周辺のlayoutとは異なるものを利用したい場合、
その特定のcontrollerのアクションから

```
render layout "path/to/layout"
```

でrender時に使用したいlayoutを指定できる。```render template```との併用も可。
【DB設計/オブジェクト指向】一対一テーブルを作った方が良いケース【Rails】

# 一対一関係のテーブル
データベース設計のセオリーとしては、一対一のデータは一つのテーブルにまとめるもの。でも必ずしも、一対一のテーブルを作ってはいけないという訳ではない。どういうケースなら一対一のテーブルが作られるべきなのか。

# 一対一関係のテーブルが必要な3ケース

## 1. フィールド数が制限の255を超えてしまうケース
正規化されたテーブルが制限数を超えることは考えにくいですが、ありえないとは言えません。その時は、やむなし。わけるしかない。

## 2. データ管理の都合上分ける必要があるケース
例えば、同じUserに関する情報でも、機密度合いが高い情報に関しては、他の比較的機密でない情報と一緒に管理するのではなく、わけてアクセス権を絞るなりして管理の仕方を変える。

## 3.【注目】オブジェクト指向的に扱いやすいケース
これまでの二つのケースは、DB設計上一般的なケースだが、今回伝えたいのはこれ。Rails等でDB設計に基づいたクラスを持つアプリケーションを構築する場合に想定すべきケースが、オブジェクト指向的に扱いやすいかどうか。
わかりやすい例を考えよう。
Boy視点のゲームを考える。Boyオブジェクトに、一対一でGirlFriendが存在するとする。
一対一だしtableまとめて、

```
Boyオブジェクト
height: "" 
weight: ""
career: ""
girlfriend_name: ""
girlfriend_personality: ""
...
```
みたいに、BoyオブジェクトにDB設計的には、GirlFriend持たせることはできるけど、これ明らかにオブジェクト指向的にイケてないよね。

- いやGirlFriend変わるときにいちいち全部書き換えるのめんどいし
- というか、Boyクラスをmodelで作成したときに、そこにGirlに関するフラグも含まれてるの変だし

Girlに関する情報はGirlオブジェクトに任せて管理したいよね。ということで、Tableをわけることで、Modelクラス自体をわけよう、となる。

わけた際のBoyとGirlのつながりに関しては、絶対に1対1だと仮定するなら、どちらかに相手のid持たせればいい。(もしそもそも1対1以外の関係もあり得ると主張するなら、今回の場合だと中間テーブル作ればよい。それは今回の前提と違うけど。)

1対1関係でもオブジェクト指向的にわけた方が良い(意味的に複数のオブジェクトにわけた方が扱いやすい)場合は、1対1テーブルに分けましょうという話でした。

***
#### 参考
[1:1テーブル] http://hatenachips.blog34.fc2.com/blog-entry-29.html
[オブジェクト指向] http://tdak.hateblo.jp/entry/20140406/1396773476
通常用と論文用の句読点入力スタイルを一発で切り替える

# まえがき

 `、。` と `，．` を一発で切り替えられるAppleScript。全国の理系大学生Macerに需要あるんじゃないかな？と思って書いてみました。ただAppleScriptは今まで全く書いたことが無い者なので、改良点などありましたら是非ご報告ください。


# 本編

Yosemite標準のJapaneseIM用です。

## ソースコード

```applescript
tell application "System Preferences"
    set current pane to pane "com.apple.preference.keyboard"
    reveal anchor "InputSources" of pane "com.apple.preference.keyboard"
end tell
tell application "System Events"
    if not UI elements enabled then
        set UI element enableld to true
    end if
    tell tab group 1 of window 1 of application process "System Preferences"
        tell table 1 of scroll area 1
            select item 1 of (every row whose (name of UI element 1 is "日本語"))
        end tell
        tell pop up button 4 of scroll area 2
            click
            tell menu 1
                if selected of menu item 1 then
                    click menu item 4
                else
                    click menu item 1
                end if
            end tell
        end tell
    end tell
end tell

-- 1回ごとにシステム環境設定を終了したい場合はコメントアウトを解除
-- (但し次回の実行に時間がかかる)
-- if application "System Preferences" is running then
--     tell application "System Preferences" to quit
-- end if
```

## 使い方

上記を拡張子 `.applescript` で任意のディレクトリに保存し、ショートカットキー等を用いて呼び出せるようにしておきます。ここでは `~/.switch_punct_style.applescript` として保存したと仮定します。

## [BetterTouchTool](http://www.bettertouchtool.net/)を使用する例

Globalに対して重複しないようなショートカットキーを割り振り、動作として `Execute Terminal Command` を選択します。

![Step1](https://qiita-image-store.s3.amazonaws.com/0/25060/4fa97c55-2ee6-8f1c-9bfb-1fd416037acf.png)

そして現れたテキストボックスに以下のコマンドを入力します。

```bash
osascript ~/.switch_punct_style.applescript
```

あとは設定したショートカットキーを押せば…

# 追記

- JapaneseIMはChromeと相性が悪い (コピペ操作でフリーズ・勝手に日本語入力不能に)
- GoogleIMEはSublimeText3と相性が悪い (日本語のインライン入力時にショートカットキーが競合)
- GoogleIMEの句読点切り替えのための設定画面をAppleScriptから操作出来ない

こういった事情からGoogleIMEとJapaneseIMを両方使っていくことにしたので、両者をいい感じに切り替えてくれるスクリプトを自分用にメモしておきます。主にUSキーボードで**「前の入力ソースを選択」**を利用している人向けです。

```applescript
tell application "System Events"
    if not UI elements enabled then
        set UI element enableld to true
    end if
    tell menu bar 1 of application process "SystemUIServer"
        tell item 1 of (every menu bar item whose description is "text input")
            if value is "英数 (Google)" or value is "ひらがな (Google)" then
                set modes to {"ひらがな", "英字"}
            else
                set modes to {"ひらがな (Google)", "英数 (Google)"}
            end if
            repeat with mode in modes
                click
                tell menu 1
                    click item 1 of (every menu item whose name is contents of mode)
                end tell
            end repeat
        end tell
    end tell
end tell
```

個人的に落ち着きそうな使い方

- 普段はGoogleIMEを利用する。句読点は常に`、。`にする。
- スクリプトやTeXを書くときはJapaneseIMを利用する。句読点は常に`，．`にする。
アプリ開発する時に捗るマテリアルデザインアイコンまとめ

個人でアプリ作る時には、公開されてるマテリアルアイコン使うと捗ります。
自分が参考にしてるものをまとめます。と言っても3つしかないですが。。

#google/material-design-icons

![Material_Icons_Index.png](https://qiita-image-store.s3.amazonaws.com/0/15267/85160604-5473-2dfa-6f1f-9b64b4349988.png "Material_Icons_Index.png")

https://github.com/google/material-design-icons

Googleが公開してるアイコンです。700個以上あります。太っ腹です。
プレビューは[こちら](http://google.github.io/material-design-icons/)


# Templarian/MaterialDesign
![Templarian_MaterialDesign.png](https://qiita-image-store.s3.amazonaws.com/0/15267/1f6eb1ed-eabe-f699-6838-2b9fbbf37e77.png "Templarian_MaterialDesign.png")

https://github.com/Templarian/MaterialDesign

個人で作ってるマテリアルデザインアイコンです。
Googleでないやつはここから取ってきたりします。

# Material Design Icons
![Material_Design_Icons.png](https://qiita-image-store.s3.amazonaws.com/0/15267/b1cc8eba-532e-f9f9-0434-cc871af55efd.png "Material_Design_Icons.png")

http://materialdesignicons.com/

色変えたり、タグで検索できたりして超便利です。


# その他
* ランチャーアイコンはAndroidAssetStudioで作ってます。
http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html


* GoogleのアイコンをAndroidStudioでプロジェクトに配置するなら、プラグイン使うと便利ですョ（ステマ）
https://github.com/konifar/android-material-design-icon-generator-plugin
途中でシンボリックリンクが使われているようなパス文字列を絶対パスに直す

パスの途中にシンボリックリンクが挟まっているようなディレクトリ指定があったときに、絶対パスにするスクリプト。

# コード

```py:followlnk.py
#!/usr/bin/env python
import os
import sys
import os.path

def follow_link(path):
    path = os.path.abspath(path)
    path_fragments = []
    current = ""
    while True:
        path, child = os.path.split(path)
        if child == '':
            current = path # /
            break
        path_fragments.insert(0, child)
    while path_fragments:
        current = follow_child(current, path_fragments[0])
        path_fragments = path_fragments[1:]
    print(current)

def follow_child(current, child):
    result = os.path.join(current, child)
    if not os.path.islink(result):
        return result 
    link = os.readlink(result)
    if os.path.isabs(link):
        return link
    return os.path.abspath(os.path.join(current, link))

if __name__ == "__main__":
    if len(sys.argv) > 1:
        follow_link(sys.argv[1])
    else:
        print("%s [directory]" % sys.argv[0])
        sys.exit(1)
```

書捨てたスクリプトなので適当ですが、パスをまず分解しまくって、上から順番にsymlinkかどうか確認しながらディレクトリを降りていくだけです。エラーチェックしてないので途中で存在しないディレクトリとか出てくると死ぬかも。

# 使い方

```bash
$ followlink.py ./test/symdir/subdir  #symdirは同じ場所のrealdirへのシンボリックリンク
/Users/home/shibukawa/develop/test/realdir/subdir
```
IE8でHTML5タグを認識させる

参考:
http://blog.g-fellows.com/web/css/593/

HTMLの先頭部分に

```
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
```

CSSに以下を定義する

```
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
  display:block;
}
```

HTML5タグを使用してコーディング後、この変更でIE8でもOKになったため、
便利と判断し適用しています。
X11 Forwarding設定

Linux上でJavaのアプリなどを導入しようと思ったのだがクラウド上の鯖でGUIログイン出来ないのでVNC等のやり方ではなくX11 Forwardingでやりたいと思った。
こいつが出来るようになるといろいろと捗ると思われる。

## 鯖側設定
### sshd_config設定
1. /etc/ssh/sshd_configを編集

```shell:/etc/ssh/sshd_config
$ vi /etc/ssh/sshd_config
  # X11Forwarding no
  X11Forwarding yes
```


2. sshdを再起動

```
# service sshd restart
```



## Mac
### X11(XQuartz)
1. 以前のmacだと標準でX11が入っていたが最近のは[XQuartz](http://xquartz.macosforge.org/landing/)←こいつをダウンロードして導入。
2. X11という名前でユーティリティの中に導入されてるので起動しておく。
3. macのsshdの設定変更
 * /etc/ssh_configの2箇所の設定変更
 「Host」の方は自分の環境はそのままでOKだった。

```shell:/etc/ssh_config
$ vi /etc/ssh_config
  #  Host *
  Host *
  #  ForwardX11 no
  ForwardX11 yes
```

4. sshのXCオプションでアクセス

```
$ ssh -XC user@[ip or host] -p port
```

5. Xアプリを起動


## Windows
### Teraterm + Xming
昔はcygwin入れないと出来なかった記憶があるが、いいものが出てたのね。

1. Teratermの[設定]-[SSH転送]にて「SSHポート転送」というウィンドウが表示されるので、その中の「Xクライアントアプリケーションの転送」にチェックを入れる。
2. Teratermの設定の保存(Teraterm.ini上書き)
3. Xming導入し起動しておく
4. Teratermで鯖にアクセス
5. Xアプリを起動


<途中>
Node.js の デバッグ方法と live-edit でのファイル保存とバージョン管理、自分めも、その３

# デバッグ方法
なんだかプログラムするより環境整備に目が行ってしまうわたし、そして横道それまくりなのです。が、本にも掲載されている Node.js の デバッグ方法 ですが気になった点があったので、自分メモがてらに書いておきます。

[Node.jsの開発時に必要な情報](http://qiita.com/mima_ita/items/1cc6b2fb938d5a1fc3aa#1-2)

## node-inspector によるデバッグ
Node.js の 一般的デバッグ方法は、[node-inspector](https://github.com/node-inspector/node-inspector) で行うらしいのでまずインスコします（環境によって sudo つける必要がありますw）。

```
$ npm install -g node-inspector
```

公式サイトみるとサンプルの config file イメージがあるので同じようにファイルを作成します（場所は、用途によって色々な場所に設置できるみたい）。

web-host は、null 指定だと 127.0.0.1 になりますが、いつものようにVagrant環境で動かしているので ip を指定します。

```text:~/.node-inspectorrc
{
  "web-port": 8088,
  "web-host": "192.168.11.212",
  "debug-port": 5858,
  "save-live-edit": true,
  "preload": false,
  "nodejs": ["--harmony"]
}
```

ターミナルを２つ開いて

```
$ node --debug sample_api4.js
debugger listening on port 5858
```

```
$ node-inspector 
Node Inspector v0.9.2
Visit http://192.168.11.212:8088/debug?port=5858 to start debugging.
```

と表示されれば、ok。

## Chromeによるデバッグ
node-inspector は、Chrome のDeveloperモードを経由してデバッグを行うので、IE や FireFox ではデバッグできないよｗ。

![image](https://qiita-image-store.s3.amazonaws.com/0/44540/4829df55-fc2c-fe98-feff-0089a8746641.png)

## live-edit 上の変更と保存
```"save-live-edit": true``` で定義している場合は、編集モードで変更・追加した内容が直接ファイルに保存されます。false を指定した場合には、Warnig コンソールに以下の内容が表示されます。利便性を考えると true だけど、安全性を求めるなら false なのかな？

```
Saving of live-edit changes back to source files is disabled by configuration.
Change the option "saveLiveEdit" in config.json to enable this feature.
```

# バージョンが古いって言われたｗ
yum で Node.js をインストールすると v0.10.33(2015/04/22現在) なので最新版とくらべるとちょっと古い。なので nvm を導入します。
※ついでに node-inspector からも ```Update Node to 0.11.13 or newer to get full support.``` と表示されてるしね。

```
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
```

インストールされている Node.js のバージョンとインストール可能なバージョンの確認

```
$ nvm ls
$ nvm ls-remote
```

最新の Node.js をインストールして切り替えてみる。

```
$ nvm install 0.12.2
######################################################################## 100.0%
Now using node v0.12.2 (npm v2.7.4)
$ nvm use 0.12.2
Now using node v0.12.2 (npm v2.7.4)
$ node -v
v0.12.2
```

.bashrc に、```source ~/.nvm/nvm.sh``` を追加します。

あと use コマンドで利用しているバージョンを指定しても、再起動の度にインストールされている中で最新のバージョンがデフォルトで利用される？ので、そのデフォルト設定をしておきます。
system の文字列は、yum でいれた版になります。

```
$ nvm alias default 0.12.2
default -> 0.12.2 (-> v0.12.2)
$ nvm alias default system
default -> system
```

最新にして、node-inspector を再起動。。。これで下記のメッセージがでなくなりましたよねｗ（キャッシュが残ってるときもあるのでF5ねｗ）

```
Your Node version (undefined) has a partial support of profiler.
The stack frames tree doesn't show all stack frames due to low sampling rate.
The profiling data is incomplete and may show misleading results.
Update Node to 0.11.13 or newer to get full support.
```
2015-04-22 c++ builder XE4, 10.2 Tokyo > エラーメッセージの英語表記

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

ビルドした時に出るE2247などのエラーについて、Stackoverflowなど英語サイトで聞くとき、日本語に対応する英語表記をエラー番号をもとにgoogleでいちいち検索していた。

IDE下の方の「C++クラスエクスプローラ」をクリックしたら、こちらに英語表記があった。偶然見つけた。

<hr>
(2015/11/03追記)

「C++クラスエクスプローラ」はIDE起動直後は表示されていないようだ。

C++クラスブラウザを開いて(Ctrl+"-")、$(Project)の読込み処理が完了すると「C++クラスブラウザ」がIDEの下部に表示されるようになる。


### Tokyo 10.2.2
(追記 2017/12/26)

```txt:動作環境
Rad Studio 10.2 Tokyo Update 2
```

Tokyoでも上記と同じ手順で英語のエラーメッセージが表示されることを確認した。

```
[C++ クラス エクスプローラ] Unit1.cpp(20): E2451 Undefined symbol 'k'
[C++ クラス エクスプローラ] Full parser context
[C++ クラス エクスプローラ] Unit1.cpp(18): parsing: void _fastcall TForm1::Button1Click(TObject *)
[C++ クラス エクスプローラ] Unit1.cpp(20): E2379 Statement missing ;```
Webアプリのスケルトンを作る(sinatra編)

Webアプリを作るときに以下の機能と環境をサッと使えるようにするためのスケルトンを作りました。
*サーバーサイド*
	sinatra / slim / activerecord / sqlite3 / rspec 
*フロントエンド*
	sass / coffeescript / jquery /  bootstrap3

ゴールとしては、コマンド一発でWebサーバーを起動してフロントエンド周りをビルドして、
js、css、rubyのファイル更新時にライブリロードさせることです。ビルドツールはgulpを使います。
とりあえずgemファイルから。

```rb:Gemfile
source 'https://rubygems.org'  
gem 'sinatra' 
gem 'slim' 
gem 'sqlite3'
 gem 'sinatra-activerecord' 
gem 'rake'  

group :development, :test do   
  gem 'shotgun' # ローカルサーバー   
  gem 'foreman' # コマンドの一括実行   
  gem 'rspec'
 end
```

アプリケーションの起動にはforemanというgemを使います。
foremanはProcfileに書いたコマンドを一括で実行してくれます。

```bash
bundle exec foreman start
```

これでサーバーを起動してビルドを走らせたいのでProcfileを次のように書きます。

```bash:Procfile
application: bundle exec shotgun -p 8000 
gulp: gulp
```

foremanではshotgunというgemを実行します。
shotgunを使うことでファイル編集時にサーバー再起動する必要がなくなるので、
sinatraアプリ側にsinatra/reloaderを記述せずにすみます。
ホストを指定したい場合はoオプションで指定します。ポートを指定しない場合は9393が使われます。
shotgunはrackアプリケーションなので、config.ruを読み込んで実行します。

```rb:config.ru
require './app' 
run App
```

ここではsinatraのapp.rbをロードして実行しています。
これで、sinatra -> shotgun -> foreman の流れができました。
あとはapp.rbです。

```rb:app.rb
# encoding: utf-8
 require 'bundler'
 Bundler.require 
set :database, { :adapter => 'sqlite3', :database => 'db/app.db' }

 class App < Sinatra::Base    
  get '/' do     
    slim :index   
  end
  end
```

Bundler.requireで手持ちのgemを呼び出しておいて、sinatra-activerecordを使ってDB接続します。
アプリから使うにはこれでいいのですがマイグレーションもしたいので、rakeを実行できるようにRakefileも作ります。

```rb:Rakefile
require 'sinatra/activerecord/rake'
  namespace :db do
   task :load_config do   
    require './app'   
  end
 end
```

これでrake db:createやrake db:migrateができるようになります。
サーバーサイドはここまでにして、次はフロントエンドの方やっていきます。
現在のp-r (branch) で変更したテストだけ実行

```zsh
changed_tests=`git diff --name-only master | grep -E '\.t$'`
for_prove=()

for i in ${changed_tests[@]}; do
    if [ -e $i ]; then
        echo $i
        for_prove+=($i)
    fi
done

prove -lrv ${for_prove[*]}
```
自分のGithubの集団開発用の.gitconfigのalias

メモ

## マージ済みのブランチを全部削除

```
[alias]
delete-merged-branches = !git branch --merged | grep -v \\* | xargs -I % git branch -d %
```

```
$ git delete-merged-branches
```

## origin/masterを基準にした新しいブランチの作成

```
[alias]
prbr = !git fetch origin master && git checkout -t origin/master -b
```

```
$ git prbr new-feature
```
ShinobiLayer: サーバーの課金状況を確認する方法

#はじめに
よく聞かれる課金の確認方法についてまとめてみました。

* 今月使っているあのサーバーって、いまいくらぐらいかかっているんだっけ？
* もうキャンセルしてしまったけど、今月使っていたあのサーバーは何時間分課金されてたんだろう？

というのを知りたい人には役立つと思います。なお、この出力情報の真偽については当方は責任をもてませんので、もし課金内容が想定と違う場合は、SoftLayerのサポートに**Ticket**でお問い合わせ下さい。Subjectは**「Accounting Request」**にしておくと良いでしょう。

なお、こちらの記事も併せてご確認いただくと、時間課金か月額課金かも簡単に区別できると思います。
[SoftLayerで時間課金サーバーか月額課金サーバーか見分ける方法](http://qiita.com/kkitase/items/670c00ade76c08dec0e3)

#確認方法

1. Customer portalからAccount -> Billing -> Invoicesを選択

2. Next Recurring Invoiceを選択
 ![NextRecurringInvoice01.jpg](https://qiita-image-store.s3.amazonaws.com/0/62127/1392dcbe-9dfc-0d36-ae61-c8029b19e95f.jpeg)

3. 各サーバーを確認する。以下のようになっていたら、223時間分の課金がされたことが分かる。xxx hrsと時間が表示されているということで、hourlyのサーバーだという想像も容易に付く。 
![NextRecurringInvoice02.jpg](https://qiita-image-store.s3.amazonaws.com/0/62127/18ade3fd-614e-15d9-c7fb-50bbc0137bfa.jpeg)
c++ builder XE4 > indy > ブロードキャストcode sample

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

ブロードキャストでコマンドを送って、すべての応答を受け取るサンプル。

```sample.cpp
static const unsigned short kPort = 31415;
String cmd = L"hello";

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	unsigned short port = kPort;

	IdUDPClient1->Host = L"";
	IdUDPClient1->Port = port;
	IdUDPClient1->Active = true;

	while (!(IdUDPClient1->ReceiveString(50).IsEmpty()))
			;
	IdUDPClient1->Broadcast(cmd, port, L"");

	std::unique_ptr<TStringList> rcvList(new TStringList);
	std::unique_ptr<TStringList> ipList(new TStringList);
	String res;
	String ipadr;

	while (1) {
		try {
			res = IdUDPClient1->ReceiveString(ipadr, port, 200 );
			res = res.TrimRight();

			if (res.IsEmpty()) {
				break;
			}
			ipList->Add(ipadr);
			rcvList->Add(res);
		}
		catch (Exception &e) {
			break;
		}
	}

	int count = ipList->Count;

	//
	int nop=1; // for breakpoint
}
```

int nop=1;の行において、以下が格納されていることを確認できる。
- ipList : 応答のあったip
- rcvList : コマンドの応答文字


BroadCast()送信した後は、ReceiveString(ipadr, port, ...)を実行するごとにipadrが更新されていくようだ。
YouTube Data API v3.0 + JavaScriptで動画検索

# まずはGoogle Developers ConsoleでAPIをONにする
[Google Developers Console](https://console.developers.google.com/)

サイドバー[API·と認証] ＞ YouTube Data API v3 を検索、ONにする
参考：[プロジェクトを作成して API サービスを選択する](https://developers.google.com/youtube/registering_an_application?hl=ja)

### APIキーを作成
サイドバー[認証情報] ＞ 公開APIへのアクセス ＞ 新しいキーを作成 ＞ ブラウザキー で新規作成
リファラーには設置するページのURLを記述

![スクリーンショット-2015-04-22-15.46.41.png](https://qiita-image-store.s3.amazonaws.com/0/22688/1e57df02-31b2-b8b3-d0c1-f94f26349cc2.png)


# JavaScriptで動画を検索する

今回はあるチャンネルの動画一覧を最新順で取得する

パラメータ

* part: snippet
* channelId: チャンネルのID（www.youtube.com/channel/****** の部分）
* order: date（日付順）

`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=(チャンネルID)&order=date&key=(APIキー)`

ドキュメントのどれを見ていいかわかりづらいけどここからAPIを試すと楽
参考：[Search: list](https://developers.google.com/youtube/v3/docs/search/list?hl=ja)

こんな感じのJSONがゲットできる

```json
{
 "kind": "youtube#searchListResponse",
 "etag": "\"IHLB7Mi__JPvvG2zLQWAg8l36UU/B7HTIgYFvqFP1W51kJxRs_VPTEs\"",
 "pageInfo": {
  "totalResults": 2,
  "resultsPerPage": 5
 },
 "items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"IHLB7Mi__JPvvG2zLQWAg8l36UU/9Q6jCT_HeHFfR4LxWgkefRtExOk\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "J9VsVp7n6mg"
   },
   "snippet": {
    "publishedAt": "2009-08-05T10:45:24.000Z",
    "channelId": "UCnUSZE-pn6_g2DQu_d78fyw",
    "title": "ミニチュア風動画 - 福岡市中央区赤坂",
    "description": "http://akihiro.jugem.jp/?eid=259.",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/J9VsVp7n6mg/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/J9VsVp7n6mg/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/J9VsVp7n6mg/hqdefault.jpg"
     }
    },
    "channelTitle": "1977akihiro",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"IHLB7Mi__JPvvG2zLQWAg8l36UU/DeJNCRcU3l63qnGglawM3fqrD-A\"",
   "id": {
    "kind": "youtube#channel",
    "channelId": "UCnUSZE-pn6_g2DQu_d78fyw"
   },
   "snippet": {
    "publishedAt": "2009-08-05T10:42:18.000Z",
    "channelId": "UCnUSZE-pn6_g2DQu_d78fyw",
    "title": "Akihiro Koyanagi",
    "description": "",
    "thumbnails": {
     "default": {
      "url": "https://lh6.googleusercontent.com/-SY0gvXNZffo/AAAAAAAAAAI/AAAAAAAAAAA/YnViDwJiSzY/photo.jpg"
     },
     "medium": {
      "url": "https://lh6.googleusercontent.com/-SY0gvXNZffo/AAAAAAAAAAI/AAAAAAAAAAA/YnViDwJiSzY/photo.jpg"
     },
     "high": {
      "url": "https://lh6.googleusercontent.com/-SY0gvXNZffo/AAAAAAAAAAI/AAAAAAAAAAA/YnViDwJiSzY/photo.jpg"
     }
    },
    "channelTitle": "1977akihiro",
    "liveBroadcastContent": "none"
   }
  }
 ]
}
```

itemsを回して `items->id->kind==="youtube#video"` であれば
`items->id->videoId` が動画のID。

```JavaScript
$.getJSON(
	apiUrl,
	{},
	function(json) {
		if (!json.items) return;
		for(var i in json.items){
			if (json.items[i].id.videoId && json.items[i].id.kind=="youtube#video"){
				listVideo.push(json.items[i].id.videoId);
			}
		}
	}
);
```
AWS CLIでS3を操作する

AWSのコンソール画面でS3のファイルを見たりアップロードしたり操作できますが、ファイルが大量にあったりするとスクロールして動的に読み込まれるので時間がかかるしイラッとしますよね…。
というわけで、AWS CLIを導入してコマンドラインで操作できるようにします。(もちろんS3以外のことも色々できます。)

#インストール#

pip(Pythonのパッケージ管理システムらしい)でインストールします。([AWS コマンドラインインターフェイス](http://aws.amazon.com/jp/cli/))

```
pip install awscli
```

pipが入っていない場合は、まずpipをインストールします。
get-pip.pyをダウンロードして以下を実行します。([pip installation](https://pip.pypa.io/en/latest/installing.html))

```
python get-pip.py
```

pythonが入っていない場合はpythonをインストールします。
pipはPython2.7.9以降、Python3.4以降からデフォルトで付属してるそうなので、そのあたりのPythonを入れればpipも付いてくるはず。
ちなみにPythonをソースコンパイルでインストールする場合はopenssl-develが入ってないとダメみたいなので、その場合はopenssl-develも入れておきます。

#設定#

configureコマンドで自分のAccess Key IDとSecret Access Keyを設定します。

```
$ aws configure
Access Key ID: (自分のを入力)
Secret Access Key: (自分のを入力)
region: ap-northeast-1(適切なものを入力)
```

Access Key IDとSecret Access Keyは[IAM(Identity and Access Management)](https://console.aws.amazon.com/iam/)のユーザー管理のアクセス認証情報で作成できます。
ここで設定したユーザーでAWSにアクセスできるようになります。

#S3操作#

`aws s3 cp`でアップロードしたり`aws s3 rm`で削除したりできます。
詳しくはリファレンス([s3 available commands](http://docs.aws.amazon.com/cli/latest/reference/s3/index.html#available-commands))を見てください。
`--dryrun`を付けると何が実行されるかが前もってわかります。
以下、いくつか例をあげます。

##bucketを一覧表示##

```
aws s3 ls
```

##jpgファイルをまとめてアップロード##
cache-control等のメタデータも付けられます。

```
aws s3 cp img_dir s3://my-bucket-name/img_dir/ --recursive --include "*.jpg" --cache-control "max-age=6000"
```

##まとめて削除##

```
aws s3 rm s3://my-bucket-name/img_dir/ --recursive
```

##ローカルディレクトリをS3のディレクトリに同期##

```
aws s3 sync img_dir/ s3://my-bucket-name/img_dir/ --delete
```

いやー便利ですね。
C++builderでTStringGridからCSVを書き出す

セル内にカンマが有る場合の処理のため、ダブルクォーテーションで全体を囲むか、カンマを「\\,」に変換しておく。
行数によってはメモリ不足に注意。

```cpp:FireMonkey.h
///std::unique_ptr用(C++11対応の環境用)
#include <memory>
///引数double_quotationの初期値をfalseにしておくと、デフォルトでは¥,になる。
void __fastcall FunctionSaveCSV(const UnicodeString &var_filepath,TStringGrid *var_string_grid, const bool &double_quotation = false) ;
```

```cpp:FireMonkey.cpp
void __fastcall TForm1::FunctionSaveCSV(const UnicodeString &var_filepath,TStringGrid *var_string_grid, const bool &double_quotation) {
	std::unique_ptr<TStringList>var_list(new TStringList); // csv書き出し用
	for (int i = 0; i < var_string_grid->RowCount; i++) {
		UnicodeString var; // 1行にまとめるときに使う。
		for (int i2 = 0; i2 < var_string_grid->ColumnCount; i2++) {
			UnicodeString tmp_c; // 1セルの一時保存
			tmp_c = var_string_grid->Cells[i2][i];
			if (double_quotation == true) {
				// セルをダブルクォーテーションで囲む
				tmp_c = L"\"" + tmp_c + L"\"";
			}
			else {
				// セルをダブルクォーテーションで囲わない場合、文字列中のカンマは全て\,に変換する
				tmp_c = StringReplace(tmp_c, L"\\,", L",",
					TReplaceFlags() << rfReplaceAll << rfIgnoreCase);
				tmp_c = StringReplace(tmp_c, L",", L"\\,",
					TReplaceFlags() << rfReplaceAll << rfIgnoreCase);
			}
			// 改行は別の文字に変換するか、削除する。
			tmp_c = StringReplace(tmp_c, L"\n", L"",
				TReplaceFlags() << rfReplaceAll << rfIgnoreCase);
			if (i2 < var_string_grid->ColumnCount) {
				tmp_c += L",";
			}
			else {
				tmp_c += L"\n";
			}
			var += tmp_c;
		}
		var_list->Add(var);
	}
	var_list->SaveToFile(var_filepath);
}
```

読み込みはこちら
[C++builderでCSVを読み込んでTStringGridに表示](http://qiita.com/mm_sys/items/1f0f9e5c1b794b1ac1ed)
rails管理画面gem：upmin触ってみた

以前[管理画面系gemの比較](http://qiita.com/baban@github/items/f751fb05c4d2367878aa)を書きましたが、どうも最近[upmin](https://github.com/upmin/upmin-admin-ruby)なる新規管理画面系gemを登場したらしいので、どんなものかと思って触ってみました。

https://github.com/upmin/upmin-admin-ruby

現在の管理画面系３大gemである

* [rails_admin](https://github.com/sferik/rails_admin)
* [activeadmin](https://github.com/activeadmin/activeadmin)
* [typus](https://github.com/typus/typus)

このgemは同じ管理画面生成gemでも、導入しやすさ、カスタマイズ性に関してそれぞれ特色を持っていて、用途によって住み分けされているのですが、これと比較すると、rails_adminに一番近いタイプのgemですね。

つまり、特徴を挙げると、インストールするだけで全てやってくれる。
その代り、カスタマイズしようとすると、幅が狭くて、色々と面倒がついてくるタイプのgemです。
ただ、rails_adminよりはカスタマイズ性は若干高いです。
これがこのgemの特徴でしょう。

それよりもまだまだ新参のgemなので、機能的に追いついていないところもあるので、総合的にはまだrails_admin
に追いついていないので、総合的には、今すぐにその地位を脅かすものではないかな、と思います。

具体的には

* dashboardがまだ未実装
* I18nへの対応
* 画像アップロードへの対応

あたりが簡単に触ってみた感じ、対応していなかったです。
これが残念な所で、今後の進展に期待ですね。

## 実際の使い方紹介

総評は先に書いてしまったので、ここからは簡単に使い方だけ解説しておきましょう。

実際の使われ方は、upminのサイトに[デモ](https://github.com/upmin/store_demo)が公開されているのでコレをインストールして使ってみるのが分かりやすいです。

![スクリーンショット 2015-04-17 22.25.23.png](https://qiita-image-store.s3.amazonaws.com/0/10715/28b4a1bc-10af-e91f-b531-c279a41b9e0d.png)

* has_many, belongs_toの関連はモデルから自動認識してくれます

カスタマイズはapp/upmin/models/以下に、Upmin::Modelクラスを継承したモデルを作成することでできます。このあたりがrails_adminよりも柔軟なところですね。
stylusのmixinでプレースホルダーセレクタを使った場合のようにCSSを出力する

mixinの中で`+cache`という関数を使うと、プレースホルダーセレクタを使った場合のようにCSSを出力してくれるっぽい
## 普通にmixin

```:hoge.styl
mixin()
  margin-left 10%
  margin-right 10%

.hoge
  mixin()
  background #ccc

.fuga
  mixin()
  background #eee
  border solid 1px #333
```

出力結果（重複した記述を纏めてくれない）

```:hoge.css
.hoge {
  margin-left: 10%;
  margin-right: 10%;
  background: #ccc;
}

.fuga {
  margin-left: 10%;
  margin-right: 10%;
  background: #eee;
  border: solid 1px #333;
}
```


## プレースホルダーセレクタでextend

```:hoge.styl
$placeholder
  margin-left 10%
  margin-right 10%

.hoge
  @extend $placeholder
  background #ccc

.fuga
  @extend $placeholder
  background #eee
  border solid 1px #333
```

出力結果（重複した記述を纏めてくれる）

```:hoge.css
.hoge,
.fuga {
  margin-left: 10%;
  margin-right: 10%;
}

.hoge {
  background: #ccc;
}

.fuga {
  background: #eee;
  border: solid 1px #333;
}
```


## mixinの中で`+cache`関数を使う

```:hoge.styl
mixin()
  +cache()
    margin-left 10%
    margin-right 10%

.hoge
  mixin()
  background #ccc

.fuga
  mixin()
  background #eee
  border solid 1px #333
```

出力結果（重複した記述を纏めてくれる）

```:hoge.css
.hoge {
  background: #ccc;
}

.hoge,
.fuga {
  margin-left: 10%;
  margin-right: 10%;
}

.fuga {
  background: #eee;
  border: solid 1px #333;
}
```
クラスと説明と使い方（更新中）

クラスの使い方を書いていきます。

まず、簡単な引数と戻り値の話から
ほげほげ

```csharp

using UnityEngine;
using System.Collections;

public class Class : MonoBehaviour {
	void Start () {
		int Num;
		Num = classTest (4,8);
		Debug.Log (Num);
	}
	
	int classTest(int a,int b){
		int input1 = a;
		int input2 = b;
		return input1*input2;
	}

}
```
C# LINQ Distinct を自作クラスのコレクションで使う方法

自作のクラスを保持するコレクションに対し LINQ の Distinct を使う場合、IEquatableインターフェースを実装する必要があるってことで、いろいろハマったのでメモ。

## 自作のクラスがこんな感じだったとする
```csharp

public class MyModel
{
        public string ItemID { get; set; }
        public string ItemName { get; set; }

        public MyModel(string ItemID, string ItemName)
        {
                this.ItemID = ItemID;
                this.ItemName = ItemName;
        }
}

```

## List\<MyModel\> に対し Distinct をしても動かない

```csharp

List<MyModel> myModels = new List<MyModel>();

//
// もろもろ過程を経て、myModel にデータが格納されていると過程して
//

myModels = myModels.Distinct().ToList(); // 重複削除は行われない
```

まー、動かないかなーって思ってたけど（例えば何をもって重複と判断するのか的な）、これを思った通りの動きにする場合、MyModelクラスに IEquatable インターフェースを実装する

## 実装の例

この IEquatable を実装する場合、GetHashCode を override することと、Equals メソッドを実装する必要があるようです（ソースについては後述）

```csharp

public class MyModel : IEquatable<MyModel>
{
        public string ItemID { get; set; }
        public string ItemName { get; set; }

        public MyModel(string ItemID, string ItemName)
        {
                this.ItemID = ItemID;
                this.ItemName = ItemName;
        }

        public override int GetHashCode()
        {
                return this.ItemID.GetHashCode();
        }

        bool IEquatable<MyModel>.Equals(MyModel myModel)
        {
                if( myModel == null )
                        return false;
                return (this.ItemID == myModel.ItemID);
        }
}

```

こうすることで、期待通りの動きになった。

## ソース

[Microsoft Developer Network Enumerable.Distinct<TSource> メソッド ](https://msdn.microsoft.com/ja-jp/library/bb348436%28v=vs.110%29.aspx)

> 既定の等値比較子 Default は、IEquatable<T> ジェネリック インターフェイスを実装している型の値を比較するために使用されます。 カスタム データ型を比較するには、このインターフェイスを実装し、その型の GetHashCode メソッドと Equals メソッドを独自に用意する必要があります。