OmniAICreator/Qiita-1.07M huggingface dataset:
WordPress　仮想環境（MAMP）を設置

##目標
****

1. MAMPインストーラーをダウンロードする。
2. MAMP環境設定。
3. DB構築。
4. WordPressインストール。
5. WordPress環境設定。
6. WordPress、DBをリンク。

##1.MAMPインストーラーをダウンロードする。
http://www.mamp.info/en/
公式サイト
###MAMPとは?
M
A
M
P
Macintosh, Apache, MySQL, PHP を省略した名前。
Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト。
##2.MAMP環境設定
###①スタート/ストップ設定
MAMP起動時にMAMP PRO を確認のチェックは外す。

###②ポート設定
ポートとは？
コンピュータの中で、実際に通信される出入口。
###③PHP設定
5.5.10を選択
###④Apache設定
データの保存場所を指定。
##3.DB構築。
- スタートページを開く。
- phpMyAdminをクリック。
- データベースを作成する。
- wp-01、utf8_general_ci選択。

##4.WordPressインストール。
http://ja.wordpress.org
公式サイト
##5.WordPress環境設定。
- WordPressデータを「MAMP の初期設定」の「Apache」タブで設定したフォルダーに全て移動。
- http://localhost:8888/ に移動。
- 新規ファイル作成。

データベース名
ユーザー名
パスワード
データベースのホスト名
テーブル接頭辞
を設定。

必要情報を入力。
show/hideなどで表示/非表示を繰り返すとき、clickイベントが繰り返した回数分発生する

何を言ってるかよくわからないと思うけれど、なぜこうなるのか、知っている方がいらっしゃったら、ぜひご教示いただきたい！！


クリックしたらモーダルが開いて、そのモーダルの中でもclickイベントを持たせたかった。
ちょっと雑ですが、再現してみました。

```html
<div class="btn" data-target="modal01"><span>モーダルが開くよ</span></div>

<div id="modal01" class="modal">
    <div class="close">閉じる</div>
    <div class="inModal">click me</div>
    <div>clickした回数：<span class="clickCnt"></span></div>  
</div>
```

```css
body{
    background-color: #ccc;
}
.modal{
    display:none;
    position:fixed;
    width: 80%;
    height: 200px;
    background-color: #fff;
    z-index:100;
}
.overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(255,255,255,0.85);
    z-index:50;
}
```

```js
$(function() {
    var body,overlay,modal,w,h,x,y,t,cnt;
    $('div.btn').click(function(){
        body = $('body');
        body.append('<div class="overlay"></div>');
        overlay = $('div.overlay');
        overlay.fadeIn('slow');
        modal = '#' + $(this).attr('data-target');
        modalResize();
        $(modal).fadeIn('slow');
        t = $(window).scrollTop();
        $('div.close').off().click(function(){
            $(modal).fadeOut('slow');
            overlay.fadeOut('slow',function(){
                overlay.remove();
            });
        });
        $(window).on('resize', function(){
            modalResize();
        });
        function modalResize(){
            w = $(window).width();
            h = $(window).height();
            x = (w - $(modal).outerWidth(true)) / 2;
            y = (h - $(modal).outerHeight(true)) / 2;
            $(modal).css({
                'left': x,
                'top': y
            });
        }
        cnt = 0;
        $('.clickCnt').text(cnt);
        $('.inModal').click(function(){
            cnt++;
            $('.clickCnt').text(cnt);
        });
    });
});
```


1回目、モーダルを開いたときには、クリックした回数が1ずつ増えていく。
しかし、閉じて、もう一度モーダルを開き、クリックすると、2ずつ増えていく。
そして、閉じて、もう一度モーダルを開き、クリックすると、3ずつ増えていく・・・

この現象に悩まされています。。。

どなたか、どなたか、ご存知の方、教えてくださいm(__)m
楽天APIでランキングを取得する

inputでカテゴリーIDを入力して楽天ランキング30位までを取得するスクリプト。
今後色々遊んで見るための覚書程度。


```python:rakuapi.py

#!/usr/bin/python2.7
# -*- coding: utf-8 -*-
import requests
import sys, codecs
sys.stdout = codecs.getwriter("utf-8")(sys.stdout)

gen_input = input("catID input here: ")

url = "https://app.rakuten.co.jp/services/api/IchibaItem/Ranking/20120927?"

st_load = {
	"genreId": gen_input,
	"applicationId": [your id],
    }

r = requests.get(url, params=st_load)

res = r.json()

for i in res["Items"]:
	item = i["Item"]
	print u"順位: ",item["rank"],u"位"
	print u"商品名: ",item["itemName"]
	print u"URL: ",item["itemUrl"]
	print u"価格: ",item["itemPrice"], u"円", "\n"
```
Android Studioで特定のクラスをimportできなくなったときは、設定のせい

Android Studio には簡単にクラスを `import` する機能があります。

`import` されておらずエラーが出ている箇所で `Alt + Enter` で
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/44676/5b6f8018-47f7-eee4-81b9-49fffd3b6f9f.jpeg)

このポップアップで `Enter` を押すと
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/44676/8d3eaa40-6f6b-d4e0-2e51-885835630479.jpeg)
この状態で `Enter` で `java.util.Date` を `import` できます。


しかし、万が一、誤って `→` を押下してしまうと
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/44676/fff358f1-72a8-171e-5020-447464696242.jpeg)
と表示されます。
この状態で `Enter`　を押すと、 `import` できません。
それどころか、Android Studioでの開発で、**他のクラスやほかのプロジェクトでも `java.util.Date` を `import` できなくなります。**
上記の画像の例でいえば、今後、 `Date` に関しては `java.sql.Date` しか `import` できなくなります。


`→` キー1つで正反対の意味の操作になるので、うっかり操作ミスをして、困りました。
定型的な操作なので基本 `Enter` 連打しますから、間違えて `→` を押しても気がつきにくいのもはまりやすい理由です。


`java.util.Date` を `import` できるようにするには、設定を変更する必要があります。
Settings の Editor -> Auto Import の「Exclude from import and Completion」のリストから `import` できなくなったクラスを取り除くことで、再び `import` できるようになります。
![ss.png](https://qiita-image-store.s3.amazonaws.com/0/44676/3a149d69-b432-9d4b-89ff-71688bf15b17.png)
bash > 文字列変数の一部を表示 > echo ${name:0:2}

動作確認

    CentOS 6.5

文字列変数の一部の文字を取得したい時、以下のようにする

```bash:substring-exec
#!/bin/env bash

name=ABCDEFG

echo ${name:0:2}  # AB
echo ${name:2:2}  # CD
```

これを使ったendian変換例が[SO](http://stackoverflow.com/questions/22296839/need-a-shell-script-to-convert-big-endian-to-little-endian)にあった。
IntelliJ IDEA + Go言語開発のミチシルベ (2015/03/19版)


何だかんだ自動補完がきくようになるまで2時間くらいかかっちゃったので、そのときのメモ

## 環境

Mac OS X 10.10.2
Go環境はHomebrewで入れた

## インストール

[ここ](https://www.jetbrains.com/idea/download/)からCommunity Edition（無料）をダウンロードしてインストール

## Goのプラグイン入れる

~~[ここらへんのQiitaの記事](http://qiita.com/kaiinui/items/433eb86c022ffcad0bea)を参考に入れる~~

↑は2015/03/19時点ではうまくいかなかったので、[こちらのdeveloper.ioの記事](http://dev.classmethod.jp/server-side/language/golang-2/)を参考にした

developer.ioの記事に書いてあるように、golang plugin ver0.9.16じゃないと動かないので注意
（この記事を書いてる時点では、自動インストールで入るバージョンは0.9.15）

## その他細々

#### Vim化

[ここらへんのQiitaの記事](http://qiita.com/gd_yasu/items/8494b3d919eb80d79133)を参考に入れる

#### カラースキーマ

Solarized入れた
この[公式GitHubページ](https://github.com/jkaving/intellij-colors-solarized)の指示通りインストール

IntelliJ全体のカラースキーマは、Darculaを使ってる

####  "typo in word"とかいうのが表示されてうざい

Spellcheckingが自動で走ってるっぽいので、オフにする
`File >> Settings >> Editor >> Inspections >> Spelling >> Typo`　から設定

#### Sublime Textみたいに、ショートカットキーでエディタのペイン分けたい

1. `Preference >> Appearnce & Behavior >> Keymap` から"split"で検索する
2. "Split Vertically"と"Unsplit"にそれぞれ好みのキーマップを割り振る
配列の中身を出力（ログとかで見る場合）


ちょっと配列のあたいを見たいときに以外に簡単に出力できる


#**変数の値を出力する場合**#

通常はそのまま変数の値を出せばいい

```php:実行文
 $buf = "test"; 
 print $buf ;
```

```:実行結果
test
```

#**配列の場合**#
「var_export」で出力すると配列を一気に表示してくれる。

```php:実行文
 $bufArr = array("aaaa","bbbb","cccc");
 print var_export($bufArr , true);
```

```:実行結果
array (
  0 => 'aaaa',
  1 => 'bbbb',
  2 => 'cccc',
}
```

で出力される、

#**追記**#

他にも「var_dump」や「print_r」がありました

```php:実行文
$buf = array('No-1'=>'aaa','No-2'=>'21122','No-3'=>'33223','No-4'=>'ggg' );

print "\n------var_export-----------\n";
print var_export($buf , true);

print "\n-----var_dump------------\n";
print var_dump($buf);

print "\n-----print_r------------\n";
print print_r($buf);

```

```:実行結果
------var_export-----------
array (
  'No-1' => 'aaa',
  'No-2' => '21122',
  'No-3' => '33223',
  'No-4' => 'ggg',
)
-----var_dump------------
array(4) {
  ["No-1"]=>
  string(3) "aaa"
  ["No-2"]=>
  string(5) "21122"
  ["No-3"]=>
  string(5) "33223"
  ["No-4"]=>
  string(3) "ggg"
}

-----print_r------------
Array
(
    [No-1] => aaa
    [No-2] => 21122
    [No-3] => 33223
    [No-4] => ggg
)
1

```
今さらだけどweinreを使ったリモートデバッグを復習してみる

ここでやりたいことは

1. ケーブルレスでリモートデバッグ
2. Cordova/PhoneGapなスマホアプリのデバッグ
3. OS、ブラウザの縛りなし

です。

ブラウザがネイティブでサポートしてくれるようになってずいぶんリモートデバッグも楽になってきました。
しかし、iOSにしてもAndroidにしてもケーブルで接続しないといけない。めんどくさい。。ケーブル挿したくないし。
Cordova/PhoneGapを使ったハイブリッドアプリとかは対応してないし。

と考えたところ原点回帰とはいいませんがやはりweinreに行きつくのかな。
weinreが登場する前は自力でsocket使ってjavascript送りつけてたなぁ（遠い記憶

そんなわけで久々にweinreを使ってみました！な覚書です。
覚書するほどでもないですがｗ

weinreって何者？というところはどこか他のところで見てもらえばいいです。
例えば[weinre -Home](http://people.apache.org/~pmuellr/weinre-docs/latest/)とか。
とはいえ簡単に説明しておきましょうかね。

> 一言でいえば「ブラウザ版リモートデバッギングツール」でしょうか。
> リモートでWebインスペクタが使えるってやつです。

デバッガといっても単なるWebインスペクタ。なので、[weinre -Home](http://people.apache.org/~pmuellr/weinre-docs/latest/)にもあるようにケーブル接続すれば

* AndroidでChromeならWindowsやOS XのChrome
* iOSでSafariならOS XのSafari
* 
でデバッグ可能なんです。でもケーブル接続が嫌なんです(｀・ω・´)
そしてCordova/PhoneGapなアプリのデバッグもしたい。。

ではでは、変な前置きが付きましたがやっとweinreの導入に移ります。

# weinreの導入
weinreはnode.js上で動きます。
そのためweinreに先行してnode.jsをインストールしておく必要があります。

## node.jsの導入
[node.jsのオフィシャルサイト](https://nodejs.org/)に行けばインストーラがあります。
それを使ってサクッとインストールしてください。

## weinreの導入
「導入」というと大層な作業が必要そうですが、npmの管理下にあるのでコンソール（Windowsだとコマンドプロンプト）で1コマンド叩けばおわりです。
`npm install weinre`
たったこれだけ。なんてお手軽。

# weinreの起動
導入できたら起動させましょう。
実用的には「--boundHost」（※）とかのパラメータつけないとですが、とりあえず動かしましょうってことでパラメータなんもつけてません。
※ホスト名を設定するパラメータで、設定しない場合「localhost」でのアクセスになります。なので同じネットワークにいる場合でも他の端末からアクセスできません。
　ちゃんとリモートデバッグしたければ「--boundHost (IPアドレスとか)」なオプションつけて起動してください。

```OS_X:OS_X
./node_modules/weinre
```

```Windows:Windows
node_modules\.bin\weinre.cmd
```

# weinreを使ってみる
ブラウザで[http://localhost:8080/](http://localhost:8080)にアクセスしましょう。
下の方にある「Target Bookmarklet」というセクションがあるので、そこに記載されているscriptをコピーします。
あとはデバッグ対象のページを開いているブラウザでブックマークレットを実行するのみ。
ブックマークレットはアドレスバーに貼り付けて実行すると動作する簡易スクリプトです。
ただ、chromeはセキュリティ観点からかそのまま貼り付けてもご丁寧に「javascript:」な部分をカットしてくれます。
なので、事前に「javascript:」を入力してから貼り付けてください。

ここまでできたら[http://localhost:8080/](http://localhost:8080)なページを開いている方に戻って「Access Points」セクションにあるリンクを開きます。
「Targets」にブックマークレットを実行したページがあるはずなので、そのリンクをクリック。
はい、これでリモートデバッグ（リモートでWebインスペクト）できるようになりました。

めでたしめでたし。

補足：止めるのはCtrl + Cな感じで。
Gamepadを一般ユーザで使う

## 参考

* [ゲームパッド - ArchWiki](https://archlinuxjp.kusakata.com/wiki/ゲームパッド)

ubuntu 14.04.2にて確認。

# 認識させる

一般ユーザでGamepadが使えない場合、`/dev/input/js?`に`w`権限がないことが原因。
これは`chmod`で付けても機能しないのでudevでMODE指定する。

## udev

```bash:
udevadm info -a -n /dev/input/js1 | less
```

* /etc/udev/rules.d/85-joystick.rules を作って以下記述

```bash:/etc/udev/rules.d/85-joystick.rules
KERNEL=="event*",ATTRS{name}=="HORI CO.,LTD. Fighting Commander 4", MODE="0666"
```

* `KERNEL=="event*",`を指定しないと2回実行されるので注意！！

```bash:udev再起動
sudo service udev restart
```

## 他の確認方法

* [udev - ArchWiki](https://archlinuxjp.kusakata.com/wiki/Udev)

```bash:
udevadm monitor --environment --udev
```

この状態で抜き差しを行う。

# 接続した時にプログラムを実行する

```bash:/etc/udev/rules.d/85-joystick.rules
KERNEL=="event*",ATTRS{name}=="HORI CO.,LTD. Fighting Commander 4",MODE="0666",RUN="/bin/sh /opt/a.sh"
```

* `RUN="/opt/a.sh"`だけでは実行してくれなかった。`chmod +x`してるのだが・・・

```bash:/opt/a.sh
export DISPLAY=:0

ps -ef | grep xter[m] > /dev/null || \
sudo -u ユーザ名 xterm
```

# wiiコントローラ

## 参考

* [Wiiコントローラ - OpenSim](http://opensimulator.org/wiki/Wii%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9)

```
ATTRS{name}=="Nintendo Wii Remote", MODE="0666"
```

注意点: bluetoothのペアリングを普通にしてはいけない。

```bash:
sudo apt install wminput
cp -a /etc/cwiid/wminput/buttons ~/wmbuttons.conf
```

```bash:~/wmbuttons.conf
# 縦
#Wiimote.Up	= KEY_UP
#Wiimote.Down	= KEY_DOWN
#Wiimote.Left	= KEY_LEFT
#Wiimote.Right	= KEY_RIGHT

# 横
Wiimote.Up	= KEY_LEFT
Wiimote.Down	= KEY_RIGHT
Wiimote.Left	= KEY_DOWN
Wiimote.Right	= KEY_UP

Wiimote.A	= KEY_PAGEDOWN
Wiimote.B	= KEY_SPACE

Wiimote.Minus	= KEY_1
Wiimote.Plus	= KEY_5
Wiimote.Home	= KEY_P

Wiimote.1	= KEY_LEFTCTRL
Wiimote.2	= KEY_LEFTALT
```

```bash:デバイスIDを指定してwminput起動
sudo wminput -c ~/wmbuttons.conf
```
(いまさら)Objective-C 型変換まとめ

## NSInteger → NSString
```objc
NSInteger num = 10;
NSString *str = [NSString stringWithFormat:@"%d", num];
```

## NSString → NSInteger
```objc
NSString *str = @"1500";
NSInteger num = [str intValue];
```

## NSDate → NSString
```objc
NSDateFormatter * fmt = [NSDateFormatter new];
fmt.dateFormat = @"yyyy-MM-dd 'at' HH:mm";
NSDate *date = [NSDate date];
NSString *str = [fmt stringFromDate:date];
```
※きちんとしたNSDateを渡さないと、nilが返る

## NSString → NSDate
```objc
NSDateFormatter *fmt = [NSDateFormatter new];
[fmt setDateFormat:@"yyyy/MM/dd HH:mm:ss"];
NSString *str = @"2000/01/02 03:04:05";
NSDate *date = [fmt dateFromString:str];
```
※(おそらく)フォーマットと文字列がそろっていないと、nilが返る

## NSData → NSString
```objc
NSData *data = // なんらかのデータを代入
NSString *str= [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
```

## NSString → NSData
```objc
NSString *str = @"hoge";
NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];
```

## NSNumber → NSString
```objc
[@10 stringValue];
```

## NSStirng → NSNumber
```objc
[@"hoge" intValue];
```

## NSStirng → char*
```objc
(char *) [str UTF8String]
```

## char* → NSString
```objc
char *cp = "hoge";
NSString *str = [NSString stringWithCString: cp encoding:NSUTF8StringEncoding];
```
C言語の重複コード検出にCPDを使ったらNullPointerException

#きっかけ
うちの会社は組み込み系メインなので、開発手法が何をやっても古い→とりあえずCIの導入からでも・・・
ということで自分のローカル環境でJenkinsを試し始めたところです。
Doxygenで関数仕様書を自動で作るのはできたので次にコード解析にとりかかるかなー
と思って重複コード解析に*CPD*を使い始めたところ、以下のことが起こったのでメモします。
（イマイチ発生理由が分からないまま直ったのでモヤモヤ～っとしたというのもメモの理由）

CPDとは:PMD(以下Wikipedia参照)の中のツール
http://ja.wikipedia.org/wiki/PMD_%28%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%29

#起こった問題
[ここ](http://futurismo.biz/archives/516 "重複コードを撃退！DRY原則をC言語で実践するためのCPDを調べた")の手順のもと、まずはコマンドラインで

```sh:実行したコマンド
c:\hoge\pmd-bin-5.2.3\bin>cpd --minimum-tokens 5 --files C:\fuga\Project\src --language c --format xml>result.xml
```
と実行してみたところ、以下のようにNullPointerExceptionが。
![npe.png](https://qiita-image-store.s3.amazonaws.com/0/59994/03f18999-fbde-f2e8-e8ca-58232d80b302.png)

#解決
これもしかして手詰まりかなぁ（弱気？）とか思いつつ調べて試したりはしたんですけどなかなか解決せず。
そんでちょっと「ん？」となった[これ](http://pmd.sourceforge.net/pmd-4.2.5/cpd.html "Finding duplicate code")（公式のSourceforgeです）の引数の記述に、

```
--format net.sourceforge.pmd.cpd.XMLRenderer
```

といったcpdの中のXML生成クラス？みたいなの使ってるのを見つけたので
今まで--format xmlと書いていたところをそのように置き換えたら・・・
![noerr.png](https://qiita-image-store.s3.amazonaws.com/0/59994/25028e77-89a9-5f68-1216-bca940e6e853.png)
正常に動きました・・・
生成されたxmlも見た感じ正常です。
</br>
---
*余談*
きっかけでも書いたように、弊社のホコリをかぶったような組み込みな開発を改善しようと、現在CI導入から進めています。
Web系やスマートフォン開発でCI導入する資料はいっぱいあるけど組み込み向けのCIな資料が少ない・・・
~~ただでさえエンジニアレベル低い自分には中々難しいけど仕事で楽したいし~~
TRAMPを使ってdockerコンテナ内のファイルを開く

Trampにdocker methodを追加します。
/docker:drunk_bardeen:/etc/passwd
のようなパスで直接編集できるようになります。

```el:docker-tramp-methods.el
;; http://www.emacswiki.org/emacs/TrampAndDocker
(push
 (cons
  "docker"
  '((tramp-login-program "docker")
    (tramp-login-args (("exec" "-it") ("%h") ("/bin/bash")))
    (tramp-remote-shell "/bin/sh")
    (tramp-remote-shell-args ("-i") ("-c"))))
 tramp-methods)

(defadvice tramp-completion-handle-file-name-all-completions
    (around dotemacs-completion-docker activate)
  "(tramp-completion-handle-file-name-all-completions \"\" \"/docker:\" returns                                                                                              
    a list of active Docker container names, followed by colons."
  (if (equal (ad-get-arg 1) "/docker:")
      (let* ((dockernames-raw (shell-command-to-string "docker ps | perl -we 'use strict; $_ = <>; m/^(.*)NAMES/ or die; my $offset = length($1); while(<>) {substr($_, 0, $\
offset, q()); chomp; for(split m/\\W+/) {print qq($_:\n)} }'"))
             (dockernames (cl-remove-if-not
                           #'(lambda (dockerline) (string-match ":$" dockerline))
                           (split-string dockernames-raw "\n"))))
        (setq ad-return-value dockernames))
    ad-do-it))
```
validationの条件にI18nを使いたい

# 本当はこうしたほうがいい
Enumを使って定義したほうがスマートだしそっちに寄せられるなら寄せたほうが良さそうです。
参考：
-[【Rails】Enum - EnumerizeとActiveRecord::Enum](http://izumin.hateblo.jp/entry/2015/01/09/234220)
-[RubyでEnumを使いたかったらenumerize](http://d.hatena.ne.jp/ria10/20131206/1386340066)
-[Enumerizeを数値型カラムで使う](http://qiita.com/umanoda/items/daced48bd5f69caa4ecf)

# でもI18nに定義してあるので
すでに下記のような感じに定義あったのでこれをどうしてもそのまま利用したかった。

```yaml:ja.yml
ja:
  master:
    food_category:
      1: 野菜
      2: お肉
      3: お魚
      4: ご飯もの
　　　 5: 麺類
      99: その他   
```

ここに値のある数値しか保存できないようにvalidationしたい。
その場合は独自validationを定義することになる。

## 1. validatorをつくる
注：ファイル名がvalidator名になってないと怒られたりする。

```rb:lib/validates/food_category_validator.rb

# coding: utf-8
class FoodCategoryValidator < ActiveModel::EachValidator
  def validate_each(record, attribute, value)
    if !I18n.t("master.food_category").key?(value)
      #エラー文も適当にI18nとしたほうが良さそう     
      record.errors[attribute] << '不正な値です'
    end
  end
end

```

## 2. validatorを読み込ませるように設定

```rb:config/application.rb

#色々省略
config.autoload_paths += %W(#{config.root}/lib/validates)

```

## 3. Modelで使う

```rb:app/models/food.rb
class Food < ActiveRecord::Base

  validates :category, food_category: true

  # 失敗1：下記のようにすると、translation missing 扱いになってしまう
  # validates :category, inclusion: { in: I18n.t("master.food_category").keys }

  # 失敗2：これで動くかと思ったけど気のせいだった
  # if: は その条件に合致した場合にvalidationを実施するということ、これでは結局何もしない感じに...。
  # validates :category, if: Proc.new { I18n.t("master.food_category").key?(self.category) }

end
```

## こんな感じで動く
```rb
food = Food.new
# =><Food id: nil, category: nil, name: nil, created_at: nil, updated_at: nil>

food.valid?
# => false

food.errors
=> #<ActiveModel::Errors:0x007fbdc2959b88 @base=#<Food id: nil, category: nil, name: nil, created_at: nil, updated_at: nil>, @messages={:category=>["不正な値です"]}>

food.errors.full_messages
# => ["Category 不正な値です"]
# "Category は不正な値です" って I18n つかったらそれっぽくなると思う
```


# 独自validationについての参考
- [Ruby on Rails3、独自validationを定義する(3) 独自validateファイルの置き場所](http://piyopiyocs.blog115.fc2.com/blog-entry-423.html)
- [Rails 4 でバリデータを自作する(custom validator)](http://qiita.com/n-oshiro/items/4a3188be66dd0e18bae5)
Dockerコンテナ内のディレクトリをsshfsでマウントする

## 経緯

開発環境としてDockerコンテナを使いたいが、コンテナ内のファイルをIDEで管理したいという場合、dockerのvolume機能 + VMのファイル共有機能を使ってローカルから操作できるようにする方法と、sshfsでdocker内のディレクトリをローカルにマウントして使う方法が考えられる。

前者は後者より簡潔に実現できるという利点があるが、dockerコンテナ「が」他のファイルをマウントすることになるので、パーミッションの問題等がつきまとう。

後者はsshdを立ち上げるのが面倒、かつ[いくつかの問題](http://postd.cc/docker-ssh-considered-evil/)が発生するが、dockerコンテナ内のファイル「を」ローカルにマウントするため、前者の問題が発生しない（と思うけどどうでしょうか）。

今回は前者の方法を行う。

## やり方

boot2dockerを使うという前提で話を進める。Vagrantの場合でもだいたい同じだと思う。

### ローカル -> VMのポートフォワーディングの設定

dockerコンテナに対してsshで接続できるようにするため、予めローカルの特定のポートをdockerコンテナの特定のポートに対して転送するようにしておく。

```
$ # VBoxManage controlvm "boot2docker-vm" natpf1 delete ssh 既存の設定がある場合、下のコマンドで上書きすることはできないので、一度削除する
$ VBoxManage controlvm "boot2docker-vm" natpf1 "ssh,tcp,127.0.0.1,8022,,49153" # ポートフォワーディングの設定。'ssh'は任意の文字列でok
```

これでHostの8022がVMの49153に転送される。

### コンテナのビルド

次に、dockerに接続してsshdの入ったコンテナをビルドする。DockerfileはSven Dowideitさん作の以下のものを使うと簡単。（[参照元](https://docs.docker.com/examples/running_ssh_service/)）

```
# sshd
#
# VERSION               0.0.2

FROM ubuntu:14.04
MAINTAINER Sven Dowideit <SvenDowideit@docker.com>

RUN apt-get update && apt-get install -y openssh-server
RUN mkdir /var/run/sshd
RUN echo 'root:screencast' | chpasswd
RUN sed -i 's/PermitRootLogin without-password/PermitRootLogin yes/' /etc/ssh/sshd_config

# SSH login fix. Otherwise user is kicked off after login
RUN sed 's@session\s*required\s*pam_loginuid.so@session optional pam_loginuid.so@g' -i /etc/pam.d/sshd

ENV NOTVISIBLE "in users profile"
RUN echo "export VISIBLE=now" >> /etc/profile

EXPOSE 22
CMD ["/usr/sbin/sshd", "-D"]
```

`boot2docker ssh`でvmに入り、上記のDockerfileを用意したらDockerコンテナを起動する。

```
docker build -t develop .
docker run -d -P develop
```

これで恐らく、VMの49153がdockerコンテナの22にポートフォワードされる（49153とは限らんけど、とりあえずそういう前提で）。

### sshfsでマウントする

これでDockerコンテナにsshを繋いだり、

```
ssh root@localhost -p 8022 # pass: screencast
```

sshfsでディレクトリをマウントすることができるようになる。
```
sshfs root@localhost:/ ./container -p 8022
```
Chrome Push NotificationのサンプルはDropboxでホストした環境では動かない


アプリを使わなくてもPush通知が来る！
http://tech.vasily.jp/android_chrome_push/

この記事を読んで、早速やってみた。記事では github.io を紹介しているが、API キーとか入れたソースを公開するのにためらったので、Dropbox の Public 機能を使うことにした。

で、アクセスしてみたが、

> index.htmlにアクセスすると、問題なければ「Enable Push Messages」ボタンが有効になっており

ここのところが有効にならない。Chrome (Mac)のバージョンは 42.0.2311.50 beta (64-bit) で対応しているはず。オカシイ。

Developer toolを開いてみると、

> DOMException: Failed to register a ServiceWorker: A bad HTTP response code (403) was received when fetching the script.

何やらどこかの処理で 403 が返ってきてるらしい。

chrome://serviceworker-internals/ を開くと ServiceWorker のデバッガを開けるので Open DevTools.. にチェックを入れてみる。

再度 index.html にアクセスしてみると、

> GET https://dl.dropboxusercontent.com/u/xxxxxx/push-messaging-and-notifications/service-worker.js net::ERR_INVALID_RESPONSE

とあり、どうやら service-worker.js を取得できていないらしい。

ところが、これを直接 https で取得してみると、問題なく取得できる。なぜだろう。

といったところで、こんな投稿を見つけた。

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

> When Chrome downloads the ServiceWorker script, it sets "Service-Worker: script" header in the HTTP request.
> dl.dropboxusercontent.com returns 403 Forbidden when this header is set.

**Dropbox は ServiceWorker を取得する際の HTTP リクエストヘッダを通してくれないらしい。**

ということで、結局元記事どおり github.io で試したら、うまくいった、というお話。元記事書いてくれた人に感謝。
(よく考えたら、APIKey 公開が不安だったら無効化すればいいだけの話。)
Box, Flexbox, Flex

```
.flexCont{
  /* Box -----------------------------------------*/
  /* ch4, sf3.1, ios3.2, and2.1, op12.1 */
  display:-webkit-box;
  -webkit-box-orient:horizontal; /* [horizontal | vertical | inline-axis* | block-axis | inherit] */
  -webkit-box-direction:normal; /* [normal* | reverse | inherit] */
  -webkit-box-lines:multiple; /* [single* | multiple] */
  -webkit-box-pack:center; /* [start* | end | center | justify] */
  -webkit-box-align:stretch; /* [start | end | center | baseline | stretch*] */

  /* fx2 */
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-direction:normal;
  -moz-box-lines:multiple;
  -moz-box-pack:center;
  -moz-box-align:stretch;

  /* flexbox -------------------------------------*/
  /* ie10 */
  display:-ms-flexbox;
  -ms-flex-direction:row; /* [row* | row-reverse | column | column-reverse] */
  -ms-flex-wrap:wrap; /* [nowrap* | wrap | wrap-reverse] */
  -ms-flex-pack:center; /* [flex-start* | flex-end | center | space-between | space-around] */
  -ms-flex-align:stretch; /* [start | end | center | baseline | stretch*] */

  /* flex ----------------------------------------*/
  /* ch21, sf6.1+, ios7+, op15 */
  display:-webkit-flex;
  -webkit-flex-direction:row; /* [row* | row-reverse | column | column-reverse ] */
  -webkit-flex-wrap:wrap; /* [nowrap* | wrap | wrap-reverse] */
  -webkit-justify-content:center; /* [flex-start* | flex-end | center | space-between | space-around] */
  -webkit-align-items:stretch; /* [flex-start | flex-end | center | baseline | stretch*] */

  /* ch28+, fx22+, op17+, ie11+ */
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
}

.flexitem{
  /* Box -----------------------------------------*/
  /* ch4, sf3.1, ios3.2, and2.1+, fx2 op12.1 */
  box-flex:1; /* 0.0 */ 
  width:auto;
  /* 埋まらない時に可変する順番
  max-width:200px;
  box-flex-group:2;　/* 1 */
  */

  /* flexbox, flex -------------------------------*/
  /* ch21+, sf6.1+, fx22+, ios7+, op15+, ie11+ */
  flex-basis:auto; /* (=width) */
  flex-grow:1; /* 0 */
  flex-shrink:1; /* 0 */
}
```
Railsでremote:trueの有無でレスポンスの出し分けをしたい


# 利用シーン

```rb
= form_tag "/comments", method: :post, remote: true do
  = text_field_tag "body"
  = submit_tag "送信"

# 処理後、Ajax的動作をしたい（jsでalertとか）
```

```rb
= form_tag "/comments", method: :post do
  = text_field_tag "body"
  = submit_tag "送信"

# 処理後、ページ遷移したい
```

```rb
class OpinionsController < ApplicationController

  def create
    # 処理とかいろいろ

    respond_to do |format|
      format.js
      format.html { redirect_to "/home" }
    end
  end

end

```

remote: true の場合はformat.jsで返せる。

remote: true の時点で気づくべきだったかもだが、すぐに思いつかなかったのでメモ。
slf4j x logback で実行時に appender を取り除く

slf4j 経由で logback 使ってる前提の話です。

例えばこんな感じで定義してある時に

```xml
<root level="ERROR">
    <appender-ref ref="STDOUT" />
    <appender-ref ref="EMAIL" />
</root>
```

テストの時だけは `EMAIL` へのログ出力をしたくない！といったときは、こう書いておけば appender を除去できます。

```java
import ch.qos.logback.classic.LoggerContext;
import org.slf4j.LoggerFactory;

((LoggerContext) LoggerFactory.getILoggerFactory()).getLogger("ROOT").detachAppender("EMAIL");
```
linux > .elfファイルのヘッダー情報表示 > readelf -h [ファイル]

動作確認

    CentOS 6.5

.elf (Executable and Linkable Format)というファイルのヘッダー情報を表示したい。

```
$readelf -h sample.elf
ELF Header:
  Magic:   7f 45 4c 46 01 01 01 00 00 00 00 00 00 00 00 00 
  Class:                             ELF32
  Data:                              2's complement, little endian
  Version:                           1 (current)
  OS/ABI:                            UNIX - System V
  ABI Version:                       0
  Type:                              EXEC (Executable file)
  Machine:                           ARM
  Version:                           0x1
  Entry point address:               0x0
  Start of program headers:          52 (bytes into file)
  Start of section headers:          809060 (bytes into file)
  Flags:                             0x5000000, Version5 EABI
  Size of this header:               52 (bytes)
  Size of program headers:           32 (bytes)
  Number of program headers:         2
  Size of section headers:           40 (bytes)
  Number of section headers:         34
  Section header string table index: 31
```

[参考](http://mylinuxbook.com/readelf-command/)
Macでカラーピッカーが欲しいならデフォルトアプリで十分だった件


Webサイト制作やプレゼン資料作成、Githubのラベルの色を決める時など、見ている画面の特定の部分のカラーコードを知りたいことって結構ありますよね。
ブラウザ上だったらChrome Extension等もありますが、実はMacにデフォルトで入っているDigitalColor Meterというアプリで十分だったので紹介します。

## DigitalColor Meter を使って色をコピー

スポットライトで起動して

![spotlight](https://qiita-image-store.s3.amazonaws.com/0/6664/f7956e94-a574-9a65-6ddb-2625caf0d306.png "スクリーンショット 2015-03-19 12.42.53.png")

こんな感じで色を取得したいところに行って

![digitalcolor meter](https://qiita-image-store.s3.amazonaws.com/0/6664/9fa6bcb8-1c3c-a93d-707e-4db710130c1e.png "スクリーンショット 2015-03-19 12.38.58.png")

おもむろに

***Command + Shift + C***


を押すだけで

```css:clipboard
#5FA123
```

とクリップボードにコピーされます。

***Command + Option + C***

だと

![green.png](https://qiita-image-store.s3.amazonaws.com/0/6664/afec7e35-e315-5260-00fe-f6667f00308b.png "green.png")

というようにイメージでコピーされます。

## 必要な設定

DisigalColor Meterはデフォルトで`#5FA123`の16進数の形式では保存されないので、以下のように設定を変更する必要があります。

### 画面上の表示方法の変更

L*a*bで表示 -> 汎用のRGBで表示

### メニュー上の設定の変更

表示 > 値を表示 >
10進数 -> 16進数
![setting16.png](https://qiita-image-store.s3.amazonaws.com/0/6664/e6969cf4-a957-286e-1f8d-39046deefe64.png "スクリーンショット 2015-03-19 13.13.08.png")
シーンの非同期ロードがしたいゾ！

Unity5になって4まででProじゃないと使えないらしかった”LoadLevelAsync()”。
もしかして使えるのかなーとか思い触ってみました。
途中でシーンが変わってしまうLoadLevelAsyncだと最終結果を見届けられなかったので、
LoadLevelAdditiveAsync()を使ってます。

```csharp:SceneTest.cs
IEnumerator Start () 
{
    AsyncOperation async = Application.LoadLevelAdditiveAsync( "demoadd");
    //async.allowSceneActivation = false;
    do
    {
        Debug.Log( "progress: " + async.progress + "isDone: " + async.isDone );
        yield return new WaitForEndOfFrame();
    }
    while ( async.isDone == false );
	
    Debug.Log( "Loading complete");
    Debug.Log( "final progress: " + async.progress + "isDone: " + async.isDone );	 
    //async.allowSceneActivation = true;
}
```
allowSceneActivationについては、画面の遷移を許可するか？っていう意味かなーという認識です。なので、

●遷移を前もって許可しないでおく
↓
●ロード進捗ＯＫッス！(・ω・).oO(progress >= 1.0f or isDone == true になるんだろ？ぐへへ）
↓
●シーン切り替えに当たっての演出的な何か
↓
●演出終わったし遷移を許可するか(allowSceneActivation = true)
↓
●遷移ﾃﾞｹﾀｰ

っていう感じかなーと思ってました。

英語に自信無いニキなので、公式リファ見てください…
[Unity - Scripting API: AsyncOperation](http://docs.unity3d.com/ScriptReference/AsyncOperation-allowSceneActivation.html)

まぁ、上のような妄想をしてとりあえずallowSceneActivationは触らずやった結果。

[allowSceneActivation:コードOFF]
>progress: 0isDone: False
>progress: 0.9isDone: False
>Loading complete
>final progress: 1isDone: True

結果：シーン追加されたー！やっほい！

では本題。
[allowSceneActivation:コードON]
>progress: 0isDone: False
>progress: 0.9isDone: False
>progress: 0.9isDone: False
>progress: 0.9isDone: False
>progress: 0.9isDone: False
>...

結果：何時まで経ってもロードされねぇ。
**なん…やて…**

Qiita内に以下のエントリがありました。
[C# - Unity3DのLoadLevelAsyncとAsyncOperationで非同期ロードを待ってみる - Qiita](http://qiita.com/nanmo/items/eb3bbf9b547e9893d22e)
0.9でとまるのはそういうもの、ということなんですかね。

APIの説明でも
【Has the operation finished?】
『処理が完了したか？』という意味だと思うのですが、
**処理が完了したか？（ロード可能な時点でtrueになるとは言っていない）**

っていうことなのかなー？

自分の結論としては
progress < 0.9 : 読み込み中
else : ロード完了
という認識になりました。
実際0.9になった後にallowSceneActivation = trueにしてロードしても問題出てないからまぁ・・・？
yak shaving とバケツの穴を歌う

簡単そに見えるのに、やると問題が
どんどん出てきて大変だー。

それは yak shaving っていうのよ。
ヤクの毛刈りは大変よ。

yak shaving なんてはじめて聞いたよ。
ヤクって牛にはなじみない。

[高林哲さんが広めた言葉](http://0xcc.net/blog/archives/000196.html)よ、
IT 業界じゃ常識よー。

yak shaving って言葉は便利だけれど、
プログラマー以外にゃ通じない。

それならば「バケツの穴」はどうかしら、
みんなのうたでも歌われた。

そんな古いの、みんなわからないよ、
YouTube も NHK に消されるよ。

ちょうど、再放送があるみたいよ、
録画すればようさそうね。
* * *
※ NHK 総合 2015-03-20(金) 午前4時05分～「サラマンドラ」「バケツの穴」
※ NHK 総合 2015-03-27(金) 午前4時05分～「サラマンドラ」「バケツの穴」

- NHK みんなのうた - バケツの穴 - 熊倉一雄｜東京放送児童合唱団
http://www2.nhk.or.jp/minna/search/index.cgi?id=MIN196808_05

- 英語…THERE'S A HOLE IN THE BUCKET　バケツの穴
http://www.geocities.jp/ezokashi/english/e_holeinthebucket.html
[CentOS] yumでkernelを更新しようとしたら/bootが少ないと言われた

こんな感じ

```shell-session
# yum update kernel
Loaded plugins: fastestmirror, priorities
Setting up Update Process
Loading mirror speeds from cached hostfile
 * extras: centos.mirror.secureax.com
Resolving Dependencies
--> Running transaction check
---> Package kernel.x86_64 0:2.6.32-504.12.2.el6 will be installed
--> Processing Dependency: kernel-firmware >= 2.6.32-504.12.2.el6 for package: kernel-2.6.32-504.12.2.el6.x86_64
--> Running transaction check
---> Package kernel-firmware.noarch 0:2.6.32-504.8.1.el6 will be updated
---> Package kernel-firmware.noarch 0:2.6.32-504.12.2.el6 will be an update
--> Finished Dependency Resolution

Dependencies Resolved

===================================================================================================================================================================================================================
 Package                                               Arch                                         Version                                                    Repository                                     Size
===================================================================================================================================================================================================================
Installing:
 kernel                                                x86_64                                       2.6.32-504.12.2.el6                                        updates                                        29 M
Updating for dependencies:
 kernel-firmware                                       noarch                                       2.6.32-504.12.2.el6                                        updates                                        14 M

Transaction Summary
===================================================================================================================================================================================================================
Install       1 Package(s)
Upgrade       1 Package(s)

Total size: 44 M
Is this ok [y/N]: y
Downloading Packages:
Running rpm_check_debug
Running Transaction Test


Transaction Check Error:
  installing package kernel-2.6.32-504.12.2.el6.x86_64 needs 2MB on the /boot filesystem

Error Summary
-------------
Disk Requirements:
  At least 2MB more space needed on the /boot filesystem.
```


なので、dfってみた

```shell-session
# df -h
Filesystem            Size  Used Avail Use% Mounted on
/dev/mapper/pdc_efgdjdaaip1
                       93M   62M   27M  71% /boot
```

``/boot`` 少な！

なにも考えずにインストールすれば``250MB``とか``500MB``くらい割り当てられると思ってた。
なんでこんなサイズに？

パーティションサイズ変更するのは結構面倒なので、インストール段階で確認しておきましょう

っていうおち。



### コメントを受けての追記


 * 最新のカーネルを3つだけ残して残りを削除

```
# package-cleanup --oldkernels --count=3
```

参照元 [yum-utilsを使って/bootの不要なカーネルを削除する方法](http://oxynotes.com/?p=7297)
Live2Dで胸揺れ物理演算してみる

Live2Dには、モデリングソフトとモーション付けソフトの他に[Live2D Viewer](https://sites.google.com/a/cybernoids.jp/cubism2/tools/live2d-viewer)というFlash製の動作確認ツールがあります。
Viewerを使うと髪揺れなどの物理演算の値を簡単に編集できます。

#Live2Dのワークフロー
Unityに組み込む時のワークフローとしてはこんな感じです![01.ワークフロー.png](https://qiita-image-store.s3.amazonaws.com/0/15028/a1acd8c2-becb-772d-f781-f52276757404.png)

モーション付けソフトでも作れますが、Unityなどで**インタラクティブな胸揺れする場合**は物理演算を使うと便利かと思います。
ぶっちゃけ言うとモーションファイルや物理演算ファイルは、サンプルモデルから流用してもＯＫです。
サンプルの物理演算ファイルに、胸揺れがなかったのでさせてみました。

#準備するもの
Modelerソフトのメニューからmocを書き出して、mocファイルをViewerにドラッグ＆ドロップします
（moc出力したフォルダでもjsonファイルをドラッグ＆ドロップしてもＯＫです）
　**※　書き出しはModelerの[ファイル]-[mocファイル書き出し]からできます**
　![02.書き出し.png](https://qiita-image-store.s3.amazonaws.com/0/15028/0b9bc95f-b9df-c479-d022-bb81b3490591.png)

#物理演算のやり方（髪揺れ）
まずは髪揺れの物理演算の仕方です。

１）物理演算ファイルを追加します
![03.髪揺れ.png](https://qiita-image-store.s3.amazonaws.com/0/15028/2ee85920-3f08-aec1-112e-edfda5bb6951.png)

２）マウスドラッグすると髪揺れします
![04.髪揺れ動作.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/f73311d6-32a0-72ad-a49f-cec67cd41acb.gif)

３）物理演算ファイルを保存すれば、UnityなどSDKで使えます
![05.保存.png](https://qiita-image-store.s3.amazonaws.com/0/15028/f0aa2181-ee65-49b6-05cd-df69e9bbd7c2.png)

髪揺れの仕組みですが、Viewerで物理演算のファイルを選択すると前髪、横髪、後髪の選択リストが出ます。
![06_リスト.png](https://qiita-image-store.s3.amazonaws.com/0/15028/eb2e8f5b-8ad6-68d9-6b80-b58db500d540.png)
ざっくり言うと入力でセットしたパラメータを動かした時、出力でセットしたパラメータが動きます。
![07_入出力.png](https://qiita-image-store.s3.amazonaws.com/0/15028/b0d5f537-4377-c56b-a4c8-d8eafdaedeab.png)
入力の影響度は、一番下の行から揺れ具合を計算していきます。
一番下の行が1＝100％とし、上の行で0.5を掛ける事により2つのパラメータをそれぞれが50%ずつ影響する計算になっています。
詳しくは[Live2D Manualの01.物理演算の設定](https://sites.google.com/a/cybernoids.jp/cubism2/live2dviewer/phisics/setting
)を見てみて下さい。

#物理演算のやり方（胸揺れ）
では胸揺れをさせていきましょう！

１）胸揺れ用の新しい項目を追加します
![08_項目追加.png](https://qiita-image-store.s3.amazonaws.com/0/15028/2773e1fe-28c9-b8b1-8663-1605de90adf4.png)

２）簡単設定にチェックを入れ、簡単な物理演算設定をします
![09_簡易設定.png](https://qiita-image-store.s3.amazonaws.com/0/15028/d0b078d1-6cb1-aad0-9a13-3e69549d815b.png)
　参考ページ：[Live2D Manualの02.物理演算の簡単設定] (https://sites.google.com/a/cybernoids.jp/cubism2/live2dviewer/phisics/easy-setup)

３）値を修正しつつ、Viewerで動作確認します。値はこんな感じで10分程度でできました
![10_パラメータ.png](https://qiita-image-store.s3.amazonaws.com/0/15028/d80c1782-4337-a386-5129-1ecf9c1887fc.png)

４）Viewerでmocファイルを選択すると、パラメータ操作ができます
![11_確認.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/e41fd2eb-9702-8ecd-c6a5-ddf70d9bca50.gif)

５）あとは物理演算ファイルを保存して、UnityのLive2D SDKサンプルのDemoプロジェクトでファイルを変えれば完成です！
![12.png](https://qiita-image-store.s3.amazonaws.com/0/15028/b0ffeb14-511c-5e40-8499-04000aa9ea69.png)

あとDemoのソースを見るとわかりますが、L2DPhysics.csを参照する事でメインソースでは以下の4行で物理演算が簡単にできます。
`using live2d.framework;`
`private L2DPhysics physics;`
`if (physicsFile != null) physics = L2DPhysics.load(physicsFile.bytes);`
`if (physics != null) physics.updateParam(live2DModel);`

本業じゃないので揺れ具合が甘いですが、とりあえず簡単にできました♪
jsのよく使うホスティングサービス（cdn）まとめ

#jQuery
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
```
#zepto
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
```
#Web Font Loader
```html
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
```
#Backbone.js
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
```
#underscore.js
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
```
#AngularJS
```html
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
```
#react.js
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
```
#vue.js
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script>
```
#riot.js
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/riot/2.0.13/riot.min.js"></script>
```
#require.js
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js"></script>
```


googleとcdnjsに行けば大抵ありますね
(メモ)XAMPP for Windows版 インストール

(メモ)XAMPP for Windows版 インストール

環境:windows7 SP1 32bit

公式画面にアクセス
https://www.apachefriends.org/jp/index.html

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/a1f5cea8-b401-75e6-015d-9230cac1fa7d.png)

「Windows向けXAMPP」を選択する。

ダウンロード

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/dcde2548-651b-c8df-38c1-4d06a8ad6c93.png)

[Next]ボタンを押す。

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/8bfcfc54-0c72-9249-9868-8f7e546fc6a2.png)

[Next]ボタンを押す。

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/fa49e9a7-741a-aaab-868f-89c49a2133a3.png)

[Next]ボタンを押す。

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/f31123fc-787f-bb99-7b5b-4f4bd8825fb5.png)

[Next]ボタンを押す。

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/148f8659-8b71-8359-d5a3-568635f4da84.png)

[Next]ボタンを押す。

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/496dc7a1-2a63-0781-3c95-289244e6c231.png)

インストール中

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/025e7de1-ad87-e6f7-c56c-6061788fe22b.png)

[Finish]ボタンを押す。

完了、コントロールパネルが起動される。

ApacheとMySQLを起動する。

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/e616a89b-a621-3298-432a-5ef9089ffbbe.png)

※他のアプリケーションにport80を使用されていた場合はapacheが起動しない。

以下のURLにアクセス
http://localhost/

以下のような画面が表示されればOK

![image](https://qiita-image-store.s3.amazonaws.com/0/71872/62541cac-0ff8-beb5-108d-54286d9f4b3e.png)

完了
Project Euler 46

問題
---
Christian Goldbachは全ての奇合成数は平方数の2倍と素数の和で表せると予想した.

```
9 = 7 + 2×1**2
15 = 7 + 2×2**2
21 = 3 + 2×3**2
25 = 7 + 2×3**2
27 = 19 + 2×2**2
33 = 31 + 2×1**2
```

後に, この予想は誤りであることが分かった.

平方数の2倍と素数の和で表せない最小の奇合成数はいくつか?
http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%2046

回答
---
合成数につき、平方数の２倍を引いた数が素数となるか否かで判定した。

mymathはこちら。
https://github.com/cof01/ProjectEuler/blob/master/mymath.py

```py
# coding: utf-8
import math
from mymath import get_primes, is_prime

def main():
    MAX=10**6
    pri = get_primes(MAX)
    sq_list = [i*i*2 for i in range(int((MAX**0.5)/2)+1)]
    ans = 0
    for odd in range(9,MAX,2):
        
        if is_prime(odd, pri):
            continue
            
        SumOfPrimeAndTwiceSquare = True
        
        for sq in sq_list:
            if sq >= odd:
                break
            if is_prime(odd - sq, pri):
                SumOfPrimeAndTwiceSquare = False
                break
        
        if SumOfPrimeAndTwiceSquare:
            ans = odd
            break
    
    print ans

main()
```
OpenCV / Pythonでグレースケール画像がカラー画像で表示されてしまう

表示が3チャンネルになっているのが原因です。

```py
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
cv2.merge((gray, gray, gray), frame)
```

---
ブログやっています：http://weed.nagoya
備忘録ChatWork

* [チャットワークAPI記法 - メッセージ記法](http://developer.chatwork.com/ja/messagenotation.html)
    * 大体のタグはここに書いてある
* [投稿に装飾はできますか？](http://support-ja.chatwork.com/hc/ja/articles/203127904-%E6%8A%95%E7%A8%BF%E3%81%AB%E8%A3%85%E9%A3%BE%E3%81%AF%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B-)
    * code のタグが追加されている
* [ChatWorkブログ](http://blog-ja.chatwork.com/)
    * 新規機能が追加されたら告知されるので、フィードリーダに登録しておくとよい
* [chatwork で URL が省略されるのシンドイ](http://qiita.com/kakipo/items/5a3a9a4e1934eea49b72)
    * 省略されると不正なリンクになる
    * 初期設定だと「長いURLを省略して表示する」になっている？
CentOS6.xにMozcをインストール

## はじめに

CentOS6.5にMozcをインストールしたときの備忘録

CentOS6.x系ではyumリポジトリにMozc関連のRPMが無いので手軽にインストールすることができない。
そこでMozcをデフォルトインプットメソッドにしたVine6のリポジトリからRPMをダウンロードしインストールする。

## 実行環境
 * CentOS6.5
 * CentOS6.6
 * GNOME2

## 準備

### wgetをインストール
```
$ sudo yum install wget
```

### EPELリポジトリを追加する

下記コマンドを実行
```
$ wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
$ sudo rpm -ivh epel-release-6-8.noarch.rpm
```
※ x86_64の部分はインストールしているLinuxのアーキテクチャで変わる。

### リポジトリの生存を確認する

下記リンクにアクセスする
[/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS](http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/)
もし404であれば、Vineの他のミラーリポジトリを探す旅に出るか、あきらめる。


## インストール

### protobufインストール

```
$ sudo yum install protobuf
```

### qtインストール
```
$ sudo yum install qt
$ sudo yum install qt-x11
```

以下の作業はスクリプトを使用したインストールかコマンドでモジュールを一つずつインストールする2種類の方法を記載する

###コマンドで手動インストール
順番は合っているハズ
#### zinniaインストール

```
$ wget http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/zinnia-0.06-3vl6.x86_64.rpm
$ sudo rpm -ivh zinnia-0.06-3vl6.x86_64.rpm
```

#### tegaki-zinniaインストール

```
$ wget http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/tegaki-zinnia-japanese-0.3-1vl6.noarch.rpm
$ sudo rpm -ivh tegaki-zinnia-japanese-0.3-1vl6.noarch.rpm
```

#### mozc-serverインストール
```
$ wget http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/mozc-server-1.5.1090.102-1vl6.x86_64.rpm
$ sudo rpm -ivh mozc-server-1.5.1090.102-1vl6.x86_64.rpm
```

#### mozc-utilインストール
```
$ wget http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/mozc-utils-gui-1.5.1090.102-1vl6.x86_64.rpm
$ sudo yum install mozc-utils-gui-1.5.1090.102-1vl6.x86_64.rpm
```

#### ibus-mozcインストール

```
$ wget http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/ibus-mozc-1.5.1090.102-1vl6.x86_64.rpm
$ sudo rpm -ivh ibus-mozc-1.5.1090.102-1vl6.x86_64.rpm
```

#### mozcインストール

```
$ wget http://ftp.kddilabs.jp/pub/Linux/packages/Vine/Vine-6.3/x86_64/Vine/RPMS/mozc-1.5.1090.102-1vl6.x86_64.rpm
$ sudo rpm -ivh mozc-1.5.1090.102-1vl6.x86_64.rpm
```

### スクリプトでインストール

```
$ wget https://raw.githubusercontent.com/Sa2/scripts/master/sh/mozc-installer-for-centos6_x.sh
$ sudo sh mozc-installer-for-centos6_x.sh
```


## 再起動する
Linuxを再起動する

## Mozcを有効化する
1. GNOMEパネルの`システム` -> '設定' -> `入力メソッド`をクリック

1. IM Chooserが立ち上がるので`入力メソッドの個人設定``をクリック

1. `インプットメソッド`タブをクリック

1. `インプットメソッドの選択` -> `日本度` -> `Mozc`の順にクリック

1. インプットメソッド内のリストにある`Anthy`をクリックして選択し、削除ボタンをクリック


以上の操作でMozcが有効化される
linux > .elfファイル情報を表示 > readelf -l [ファイル]

動作確認

    CentOS 6.5

.elf (Executable and Linkable Format)というファイルの情報を表示したい。

readelfというコマンドを使う

```
$readelf -l sample.elf

Elf file type is EXEC (Executable file)
Entry point 0x0
There are 2 program headers, starting at offset 52

Program Headers:
  Type           Offset   VirtAddr   PhysAddr   FileSiz MemSiz  Flg Align
  LOAD           0x008000 0x00000000 0x00000000 0x1532c 0x21000 RWE 0x8000
  LOAD           0x020000 0xffff0000 0xffff0000 0x00000 0x06000 RW  0x8000

 Section to Segment mapping:
  Segment Sections...
   00     .boot .text .text.startup .handoff .mmu_tbl .init .fini .glue_7 .glue_7t .rodata .eh_frame .jcr .init_array .fini_array .data .init_array.00000 .bss .heap 
   01     .stack 
```
Androidのビルド時にライブラリのthemeとコンフリクトしたときの対処法

とあるライブラリを組み込んだとき、ライブラリ側のAndroidManifest.xmlでもandroid:themeが指定されているとき次のようなエラーメッセージが出た。

```
Error:(17, 9) Attribute application@theme value=(@style/HogeHome) from AndroidManifest.xml:17:9
Error:(17, 9) Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : Attribute application@theme value=(@style/AppThemeHome) from AndroidManifest.xml:17:9
  	is also present at com.fugafuga:1.2.3.4:31:9 value=(@style/FugaSdkTheme)
  	Suggestion: add 'tools:replace="android:theme"' to <application> element at AndroidManifest.xml:10:5 to override
```

android:themeがコンフリクトしているなら、ごもっともなエラーメッセージだと思う。
幸い「Suggestion: add 'tools:replace="android:theme"' to <application> element」と出ているので
言われた通りに'tools:replace="android:theme"'を追加した。

しかし動かない。

なんでかな〜と思って[Manifest Mergerのドキュメント](http://tools.android.com/tech-docs/new-build-system/user-guide/manifest-merger)を見ていると、'tools:node=”replace”'を見つけた。
'tools:node=”replace”'と'tools:replace="android:theme"'の両方をapplicationに付加したらやっとビルドが通った。
Sublime Text 3 x Sass

# macにSublimeText3でsassの環境構築手順

macのバージョンは10.10.2
scssと一緒にcompassも導入！

まずは、
**ターミナルを使ってゴニョゴニョ・・・**

1.gemをアップデート
`sudo gem update --system`
*Password入力時に内容は表示されないけど大丈夫

2.次に、Sass本体をインストール
`sudo gem install sass`

3.最後にCompassをインストール
`sudo gem install compass`

一応インストールの再確認
`sass -v`
`compass -v`

**SublimeText3でもろもろをインストール**
SublimeTextを開いて「command + shift + P」でPackage Controlを起動

* Sass
* SCSS
* SCSS Snippets
* Compass

＊Compassでコンパイル（Build）するので、SASS Buildは今回入れていない

以上
他にも色々あるみたいだけどとりあえずって事で・・・

ここまでで準備完了！！
では、実践してみます。

SublimeTextでSassを利用するためには、「config.rb」と言うファイルを含んだフォルダをプロジェクトに追加する
追加方法はいつものように、
Project → Add Folder to Project...で開いたフォルダを Save Project As... で名前をつけてプロジェクトに追加

config.rbファイルの記述についてはコチラで詳しく説明されていましたので参考にさせてもらいました。
[Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG](http://liginc.co.jp/web/html-css/css/53075)


```rb:config.rb
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

```

```scss:style.scss
/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "compass";
$wide:250px;
a
{
    width:$wide;
    overflow:auto;
    @include box-shadow(1px 1px 0 #ccc);
}
```
こんな感じで準備おｋ！！
![スクリーンショット 2015-03-19 11.18.13.png](https://qiita-image-store.s3.amazonaws.com/0/44158/68544108-d493-a249-a2d6-d7635bf6a6dd.png)

これでSCSSファイルをBuildするとCSSフォルダーにcssファイルが・・・

できねーーーーーー

Compass can't find any Sass files to compile.
Is your compass configuration correct?.
If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
って怒られた・・・

なんで怒ってるのかGoogle先生に聞いてみたら、config.rbの記述ミスだったみたいなので書きなおし

`sass_dir = "sass"`→ `sass_dir = "scss"`

```rb:config.rb
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
line_comments = false
```

これで再度scssファイルをBuildするとcssフォルダーにstyle.cssがコンパイルされました。
一件落着(๑´ڡ`๑)
よし、sassの勉強頑張ろう！！
OAuthでアバター画像を取得する

アバターの画像をOAuth認証の結果から取得できないかなーと思い調査。環境はnode.jsとpassportと各種サイト用モジュール(passport-*****)で。
結果、サイトごとにバッラバラでした。そもそもこんなことに使うのが間違ってる？
_jsonは調べた範囲では慣習的に皆用意してたけど、中身バラバラだしdebug用みたいなこと書いてあったし、使わないほうがいいかな？

#github
* 名前
`user.displayName`
* 画像
`user._json.avatar_url`
        
#tumblr
* ユーザ名
`user.username`
* 画像: 
`"https://api.tumblr.com/v2/blog/#{user.username}.tumblr.com/avatar"`

#google+
* 名前
`user._json.displayName`
* 画像
`user.photos[0].value`

#twitter
* 名前
`user.displayName`
* 画像
`user.photos[0].value`

#SoundCloud
* 名前
`user._json.username`
* 画像
`user._json.avatar_url`
LESSでCSSを作ろう

さて今回はLESSについて。LESSとはCSSにコンパイルできる簡易記法です。普通のCSSと同じような記述に加えて、変数やセレクトの入れ子、関数などさまざまな記法を提供してくれます。

 * 英語公式：http://lesscss.org/
 * 日本語：http://less-ja.studiomohawk.com/

lessは専用のJavascriptライブラリなどを使ってコンパイルしてCSSとして利用するようですが、そのままだと環境によってはうまく動かなかったりサーバ側に調整が必要だったりして面倒ですが、lesscというコンパイラを使ってCSSを生成することもできます。

 * LESSC(画面下部のZIPです。exeのみの配布ですのでパスの通ったフォルダに突っ込んでおきましょう)：http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe

# LESSのコンパイル処理を自動的に

さてこんなLESSですが、毎回lesscコマンドを使ったりするのはちょっと面倒です。でも、EclipseやBracketsを使えば「lessファイルを保存したときに自動的にcssを生成する」ということも可能です。

## Bracketsの場合

Bracketsの場合、「LESS AutoCompile」という拡張をインストールします。Bracketsの拡張機能メニューからインストールします。

![image](https://qiita-image-store.s3.amazonaws.com/0/14499/60a12179-c51e-cea4-16f1-feccd4f3f87e.png)

## Eclipse

Eclipseの場合、Eclipseマーケットプレイスより、「Eclipse plugin for LESS」をインストールします（Eclipseマーケットプレイスは拡張のインストールより「Luna - http://download.eclipse.org/releases/luna 」の「一般用ツール＞マーケットプレイス・クライアント」よりインストールできます）。

![image](https://qiita-image-store.s3.amazonaws.com/0/14499/d402177f-8407-eec9-c13a-f71ab8e55665.png)

結構便利。

# さてちょっと書いてみる。

とりあえずまだまだ全然ですが少し書いてみました。

```css:main.less
body {
  background-color: #bfbfbf;
  section{
    border-width: 8px;
    border-style: double;
    border-color: #555;
    height: ~"calc(50% - 16px)";
    float: left;
    width: 50%;
  }
}
```
とまあ、まだ「スコープをネストできるので便利ですよ」くらいしかやれてないのですが、覚え直すことがほとんどないのでCSSをもう知っている人ならすんなり入れるのがいいですね。とりあえず使ってみようかという気になります。

## ちなみに注意点
上のCSSにも書いてありますが、calc()をlessファイル内に直接書いてしまうと、コンパイル時に計算されてしまい、予期したとおりの動作をしません(今回使おうとしているcalcは、CSS3で定義された関数です。実際に描画時に計算を行ってくれる便利な関数です)。

そのような場合、~"なんとかかんとか"と言う風に、前後をダブルクオーテーションかつ、先頭に~を付けます。上の場合`calc(50% - 16px)`という記述になります。
テキストエディタでの便利な正規表現での置換


何かで挟まれた値の中身だけは残して周りの記述を置換したい・・。
だけど値が違ったりしてうまくいっぱつで置換できない・・。

みたいな時ってありますよね。

Codaとかだと標準で簡単に置換できるようにその機能がついていたりするのですが、
intelliJとかSublimeTextだとどうやって書くんだろうと思いしらべてみました。

下記の正規表現を使えばうまく置換できるようです。

それぞれのエディタの置換タブを出すショートカット

* intelliJ: Command + R
* SublimeText: Command + Option + F(検索タブの一番左の「.*」にチェック)

## SCSSの例

「@include プロパティ(値);」を「プロパティ:値;」に置換するための正規表現

	//置換したい文字列
	@include (.*)\((.*)\);

	//置換後の文字列
	$1\: $2\;

### 二重括弧対策
2重で括弧がある場合の対策。ちゃんと使われるであろう文字列を指定します。

	//置換したい文字列
	@include ([\w-]+)\(([\s\w\(\)\,\./%!\$\'\"#\-\+]+)\);

このように置換したい部分を`(.*)`で囲み、置換後の正規表現で`$1`とすることでいけるようです。
`$1`,`$2`と付いているのは`(.*)`で囲った部分の1つ目と2つ目という意味です。

わりと作業しているとこの辺りはちょいちょい出てくるので覚えておくと便利ですね。


## 特定の文字列を除きたい場合
	//置換したい文字列
	@include ((?!notStr).*)\((.*)\);

	//複数指定
	@include ((?!notStr|notStr2).*)\((.*)\);

`(?!notStr)`のように`notStr`部分に除きたい文字列を書きます。
複数指定したい場合には`|`で区切ります。
peer.jsを使ってみた

サーバー経由しないでブラウザ間でやり取りしたいなーって思って前々から興味があったpeer.jsを使ってみました（結構前に）

ホストと複数ゲストでの通信を想定し、そのあたりをライブラリ化してたのでgithubに上げるだけ上げときました
https://github.com/kazusa-qooq/peer-party

なんかpeer.jsの使い方について書きたいことあった気がしますけど忘れましたね・・・
ライブラリが参考になればいいですけど

これからは記事書きながら開発していきたい所存