OmniAICreator/Qiita-1.07M huggingface dataset:
Angular2 Quickstartを動かす

【追記】「2.0.0-alpha.14」で2015/4下旬にしか起きなかったっぽい。
今は、@Templateではなく@Viewを使うとのコメントをいただいたので、
下の対処は必要ないみたいです。

-- 以下、備忘メモ --
AngularJS 2を触ってみようかと思い、Quickstartを始めてみたけど動かない…。
色々試行錯誤の末に動くようになったのでメモ。

で、動くようになったものの、MacのChromeとFirefoxでは動く。Safariでは動かない。
ChromeとFirefoxは、どちらもDeveloper toolでキャッシュを無効にしないと動かない。

## 修正ポイント
* @Viewだと動かない。
* @Templateのinlineにする

## 参考
[Angular 2 を試してみた感想とハマりどころ](http://qiita.com/shuhei/items/9764df592f8aeede75bf)
ChromeのDeveloper ToolsでSassのデバッグ


ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。

CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。

### 環境

- OSX 10.9.5
- Google Chrome 42
- Sass 3.4.13
- Compass 1.0.3


# sourcemapの生成

Sassのコンパイル時にsourcemapを生成させる。

`config.rb`に`sourcemap = true`を追加するだけ。

`sass_options = {:sourcemap => true}`とか`sass_options = {:debug_info => true}`は不要。

環境設定によって振り分けて、以下のように編集する。

```ruby:config.rb
sourcemap = (environment == :production) ? false : true
```

これでSassのコンパイル時にCSSのディレクトリと同階層に`*.css.map`が生成される。


# Chromeの設定変更

Developer Toolsの開いて、右上の歯車マークをクリック。

Settings>General>Sourcesの「Enable CSS source maps」と「Auto-reload generated CSS」をチェックする。

※ [chrome://flags/](chrome://flags/)から設定を変更したりする必要はなし。
※ 「デベロッパー ツールのテストを有効にする」等の設定をしても現在のバージョンにはSettings>Experimentsに「Support for Sass」などの項目はない


# ChromeのDeveloper Toolsからデバッグ

以上でDeveloper Toolsを開くとSassファイルの場所が示されるようになる。


# その他

WordPressのテーマを作成する際、`style.css`をテーマディレクトリ直下に置かなくてはいけないため、これだけ他のCSSファイルと階層が異なり困った（コンパイル後の`style.css`、`style.css.map`の出力先の階層が異なってしまう。）また、移動させても`style.css.map`内の`sources`がずれてしまう。結局、シンボリックリンクを貼りまくることでごまかしたが、何かいい方法はないものか。
Rubyのご機嫌を伺いたくないから、NodeだけでCompassっぽいことをやってみたい。

## 変なこだわり

- フロントエンド開発で、gulp周りにRuby入れたくない。
- なぜなら、gemとかrbenvとかrubyのパスとかハマることが多かったため。
- ローカルの環境依存な点もありがち。
- そもそも、Yosemiteにデフォで入ってるRubyとrbenvで入れるrubyとでパスがごっちゃになるのっらぃ。（そこらへん整理しろって話かもしれない）

ということで。
## `sass` は `node-sass` でコンパイル

[libsass](https://github.com/sass/libsass)であなたもRubyから開放されよう！
[sass.js](https://github.com/medialize/sass.js)ってのもあった。

node-sassがlibsassをラップしてくれてるので、rubyのことは気にせずにいけるのです。

``` gulpfile.coffee
sass = require 'gulp-sass'
gulp.task 'sass', ->
  gulp.src './src/styles/sass/**/*.sass'
    .pipe sass()
    .pipe gulp.dest './build/assets/css'
```

## Mixinは必要なやつだけ

・[探せばあるもんですね](https://github.com/Igosuki/compass-mixins)
・必要なやつだけコピペすればいいんじゃないっすかね。
・あ、LICENCEがAll right Reservedだったので気をつけましょう。

## 問題のSprite

```
@import "hoge-*.png"

.hoge-* { /* 色々*/ }

```

こんなお手軽なスプライトマシーンnodeにもありますか？やっぱないですよね？
いや！どっこいあるんですよ！

みんな大好き[Spritesmith](https://github.com/twolfson/gulp.spritesmith)で脱CompassSprite

普通にCompassでスプライトつくるより、高機能で強力です

```gulpfile.coffee
spritesmith = require 'gulp.spritesmith'
imagemin = require 'gulp-imagemin'

gulp.task 'sprite', ->
    spriteData = gulp.src "src/styles/sass/sprite/*.png"
      .pipe spritesmith
        imgName: "sprite.png"
        cssName: "sprite.css"
        imgPath: "../img/sprite/sprite.png"
        cssFormat: 'css' #保存するスタイルのフォーマット
        padding: 4 #スプライト間の隙間
        cssOpts: #接頭語を変更する
          cssSelector: (sprite)->
            return ".sprite-"+sprite.name
    spriteData.img
      .pipe imagemin()
      .pipe gulp.dest 'build/assets/img/sprite'
    spriteData.css
      .pipe gulp.dest 'build/assets/css'

```

これで何とかなります。


## ツッコミ

> まとめるとCompassってすごいってことで

この３つの機能をまとめてくれるCompassはやっぱり出来る子。
だけど、使っていくうちに機能はINDEPENDENTの方が取り回しが良いと気づき始める
個人的には分けられてスッキリ。
node.jsで子プロセスを起動しまくってエラーにならないようにするモジュール

* https://github.com/shibukawa/spawn-limit
* https://www.npmjs.com/package/spawn-limit

`spawn-limit` というモジュールを作りました。node.jsのchild_process.spawn()の薄いラッパーで、通常のspawnはChildProcessオブジェクトを返して、そいつに色々イベント登録して・・・という使い方をするんですが、プロセスを起動したらthenが呼ばれるPromiseを返すモジュールです。

ブラウザでサーバ間通信のコールバックの管理をPromiseでやるのは問題になることはないと思います。ネイティブのレイヤーで同時通信数を絞ってくれるので、アプリレイヤーで細かいことを考える必要はないでしょう。

今回はnode.jsで外部プロセスを起動しまくるコードを書いたら、プロセス数制限に引っかかって死という状況で、コードをちまちま直すのも辛かったし、呼び出し個所も複数にわたっていて、一箇所で制限するのもできなかったので、spawnそのものの数を絞るという方向でライブラリを作りました。方向性としては↓これのプロセス版ですね。プロセス数の制限数以上にspawnしようとすると、起動中のプロセス数が減るまでは起動を遅延させます。

<blockquote class="twitter-tweet" lang="en"><p lang="ja" dir="ltr"><a href="https://twitter.com/shibu_jp">@shibu_jp</a> <a href="http://t.co/rDnMg8zRoH">http://t.co/rDnMg8zRoH</a> 自分は公開apiをプロミス使うときに困ったので作りました。</p>&mdash; ゆあ☆ミ (@you21979) <a href="https://twitter.com/you21979/status/597733468328501249">May 11, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

基本的にPromiseが帰る以外は一緒です。引数もそのまま `child_process.spawn()` に渡しているだけなので100%互換です。

```js
var spawn = require("spawn-limit").spawn;

var promise = spawn("ls", ["-la"], {cwd: "~"});
promise.then(function (ls) {
    ls.stdout.on("data", function (data) {
        console.log(data.toString());
    });
    ls.on("close", function (code) {
        console.log("code:", code);
    });
});
```

決まった並列数までは増やすので、 `child_process.spawnSync()` を使うよりは効率は良いと思います。内部でPromise使っているんですが、Promiseクラスがなくても、bluebirdかnodegit-promiseがあれば代わりに使います。0.10.xでも安心ですね！

最後にムカつく会長のツイートも張っておきますね☆

<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="ja" dir="ltr"><a href="https://twitter.com/shibu_jp">@shibu_jp</a> まだそんな世界線にいるんですか?? こっちはio.jsですよ。あとそういう人のために execsyncsっていうやつがあります。 <a href="http://t.co/Ogr4uWNZkm">http://t.co/Ogr4uWNZkm</a></p>&mdash; Yosuke FURUKAWA (@yosuke_furukawa) <a href="https://twitter.com/yosuke_furukawa/status/597738027486609408">May 11, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

execsyncsは使ってないけど、spawn-syncってモジュールを使おうとしたらダメでした。
learnyounode AYNCジャグリング


初windows kobito投稿

learnyounodeよりお題

learnyounode: https://github.com/workshopper/learnyounode

#ASYNCジャグリング

引数で与えた、3つのurlをgetして順番に表示する
それぞれのページの応答時間はまちまちで、指定した順に応答があるとは限らない。
非同期処理でそれぞれページを取得し、最後に表示をする。

async.jsを使えば非同期処理は簡単にできるが、それは使うなという縛り

##まず自分で書いたパターン

satatusオブジェクトで、url文字列をキーに取得値を管理。
コンテンツが取得し終わったら、statusに格納し、checkをよぶ。
checkでは、すべてのキーに対してデータが格納されれば、表示をする。

```js
var http = require('http')

var status = {}
  status[process.argv[2]]=""
  status[process.argv[3]]=""
  status[process.argv[4]]=""

Object.keys(status).forEach(function(key){
    http.get(key,function(response){
    var buf = ""

    response.on('data',function(data){
      buf += data.toString()
    })

    response.on('end',function(){
      status[key] = buf
      check(status)
    })
  })
})

function check(status){
 var count = 0
 Object.keys(status).forEach(function(key){
   if(status[key])
     count++
 })
 if(count==3){
   Object.keys(status).forEach(function(key){
     console.log(status[key])
   })
 }
}

```

最初、ページをゲットする処理で

```js
for(var i =2; i<4; i++){
    http.get(process.argv[i],function(response){
    var buf = ""
    var name = preocess.argv[i]
    response.on('data',function(data){
      buf += data.toString()
    })

    response.on('end',function(){
      status[name] = buf
      check(status)
    })
  })
}
```

って書いてしまっていたけどこの場合、nameがループごとに上書きされてしまって思うように動かなかった。
関数内でvarで定義しているのだから、イメージとしてはhttp.getの処理毎にスコープが別で作られると思ったのだけど違った。Object.keys(status).forEachだとイメージ通りの動作になった。
ここら辺はまだ正直自分の中で整理できていない。




回答例はこちら

```js
    var http = require('http')
    var bl = require('bl')
    var results = []
    var count = 0

    function printResults () {
      for (var i = 0; i < 3; i++)
        console.log(results[i])
    }

    function httpGet (index) {
      http.get(process.argv[2 + index], function (response) {
        response.pipe(bl(function (err, data) {
          if (err)
            return console.error(err)

          results[index] = data.toString()
          count++

          if (count == 3)
            printResults()
        }))
      })
    }

    for (var i = 0; i < 3; i++)
      httpGet(i)



```
添付ファイルをコマンドラインで送信

## 参考

* [mailコマンドで添付ファイルを送信する｜FreeBSD｜@OMAKASE](http://www.omakase.org/freebsd/mail_attach.html)

## コマンド

```bash:
uuencode ファイル ファイル名 | mail -s "件名" hoge@hoge.com
```

```bash:画像送信例
uuencode /srv/motion/a.jpg a.jpg | mail -s "件名" hoge@hoge.com
```

## kindleに送る例

```bash:sendtokindle.sh
#!/bin/sh
set -eu
SEND_TO_KINDLE_EMAIL="xxxxxxxx@kindle.com"

is_allowed_ext(){
  EXTENSION=$1
  case $EXTENSION in
    "doc" | "docx" | "rtf") echo 0;;
    "htm" | "html" | "txt") echo 0;;
    "zip") echo 0;;
    "jpg" | "bmp" | "png") echo 0;;
    "pdf") echo 0;;
    *) echo 1;
  esac
}

if [ ! $# -eq 1 ];then
    echo "ファイルを指定してください。"
    exit 1
fi
FILE=$1
if [ ! -e $FILE ];then
    echo "$FILEは存在しません。"
    exit 1
fi
BASENAME=`basename $FILE`
EXTENSION=${BASENAME##*.}
CHECKED_RESULT=`is_allowed_ext $EXTENSION`

if [ ! $CHECKED_RESULT -eq 0 ];then
    echo "その拡張子のファイルは送信できません。"
    exit 1
fi

uuencode $FILE $BASENAME | mail -s "sendtokindle" $SEND_TO_KINDLE_EMAIL
```
字幕ファイル .srt の仕様調査メモ


### 承前
プレミアでQuickTime出力しても字幕トラックを無視してないかい…？

### 調査

SubRipというところのフォーマット？
http://en.wikipedia.org/wiki/SubRip#SubRip_.28.srt.29_structure_examples

字幕工房で出力したサンプル
http://www.tranquillitybase.jp/SubtitleFactory/SubtitleFactory.html

hours:minutes:seconds,milliseconds
hh:mm:ss,mmm --> hh:mm:ss,mmm 

```
1
00:00:00,000 --> 00:00:09,419
新規字幕トラック - 日本語 のサンプル

2
00:00:09,419 --> 00:00:19,358
テスト字幕

3
00:00:19,358 --> 00:00:41,041
テスト字幕 00:00:19.10732
```

http://www29.atwiki.jp/dicaption/pages/26.html
GCEのzone:asia-east1-aに構築するのはよくない。

GCE上にVM構築する際にzoneを`asia-east1-a`に指定して構築すると

```
ERROR: (gcloud.compute.instances.create) Some requests did not succeed:
 - The zone 'projects/[project_id]/zones/asia-east1-a' does not have enough resources available to fulfill the request.  Try a different zone, or try again later.
```

なんて出ることが稀によくある。
これは契約しているprojectのQuotaが足りないのではなく
GCE上にVMが掘れない現象。
（推測だが、データセンターの物理リソースが足りなくなっている可能性）
しばらく時間をおけばERRORは発生せず正常にVM構築処理が完了する。
時間に余裕があるときはいいが、緊急時には致命的となり得る現象である。
おまけにこちら側では対応すべきコントロールが一切できない。

解決策として、他のzone(`asia-east1-b`や`asia-east1-c`)に掘れば
すんなり構築できるのだが、いかんせんzone跨ぎの通信はInternal_IPでの
通信だとしても通信費用が発生する(0.01$/GB 2015年5月12日現在)ので
同一Network内では極力zoneを揃えるべく
最初から`asia-east1-a`以外を利用してこう。
Vagrant CentOS上のlocalhost:3000がホストから開けない

#環境
* Vagrant 1.7.2
* CentOS release 6.6 (Final)
* ruby 2.2.0p0
* Rails 4.2.1

#症状
ローカル開発環境上の[http://localhost:3000](http://localhost:3000)がホストマシンから開けない

#やったこと
1. iptablesの設定
2. Vagrantfileの設定
3. rails severのオプション変更

###1. iptablesの設定
/etc/sysconfig/iptables に以下を加える。
```iptables
-A INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
```
保存して
```
service iptables save
```
を実行。

###2. Vagrantfileの設定
テキストエディタでVagrantfileを開き、以下を加える。
```Vagrant file
config.vm.network :forwarded_port, guest: 3000, host: 3000
```



google上で見つかる記事のほとんどがこれやって解決してたんだけどどうもうまくいかなくて、さらに検索した結果こんな記事が
[Vagrant で Ruby on Rails 4 の環境構築](http://qiita.com/Salinger/items/20f466ffe7cc0c04b010)

>3.3 rails serverのデフォルトホスト
Rackの変更 により、rails serverコマンドを実行した際のデフォルトのホストが0.0.0.0からlocalhostに変更されました。この変更は標準的なローカルでの開発ワークフローにほとんど影響を与えないはずです。http://127.0.0.1:3000 および http://localhost:3000 の動作はどちらも以前と同じであるからです。
ただし、今回の変更により、別のPCからRailsサーバーへのアクセスは以前と同じようにはできなくなります。たとえば、development環境が仮想マシン上にあり、ホストマシンからこのdevelopment環境にアクセスする場合などがこれに該当します。 このような場合、サーバーを起動する際にrails server -b 0.0.0.0とすることで、以前と同じ動作を再現できます。
以前の動作に戻す場合は、必ずファイアウォールを適切に設定し、自社ネットワーク内の信頼できるPCだけが開発用サーバーにアクセスできるようにしてください。

とのこと
###3. rails severのオプション変更
```
$ bundle exec rails server -b 0.0.0.0
```
として以前のバージョンと同じ動作を再現。
これで仮想マシンのローカルホストにホストからアクセスできるはず。

#参考
[Vagrantの仮想環境でrails serverで動いているアプリケーションにMacのブラウザからアクセスしてみる](http://fuzz-jpn.com/blog/vagrant_rails_server_browser/)
[Vagrant で Ruby on Rails 4 の環境構築](http://qiita.com/Salinger/items/20f466ffe7cc0c04b010)
[swift] pathForResourceでnilが返ってくるとき

プロジェクト内にファイル（例.mp4など）があるのにpathForResourceでnilが返ってくるとき

```
var myMoviePath = NSURL.fileURLWithPath(NSBundle.mainBundle().pathForResource("sample", ofType: "mov")!)
```
最初にプロジェクトに追加する際に「Add to targets:」の欄でプロジェクト名のところにチェックを入れたらnilになりません。
capybara で複数マッチする要素の最初のフォーム要素にアクションする

# 前提

capybara ではDSLを使いフォームとやりとりすることが出来ます。

```rb
fill_in 'タイトル', with: '響け！ユーフォニアム'
```

[fill_inメソッド](http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Actions#fill_in-instance_method) によって、フォーム要素のname, もしくは id, もしくはラベルに、「タイトル」 とあるテキストフィールドを埋めることが出来ます。

# 問題

フィールドが1つならよいのですが、例えば1対Nの関連だったりして、同じ名前の複数のインプットが有る場合、以下のようなエラーとなります。

     Capybara::Ambiguous:
       Ambiguous match, found 2 elements matching field "タグ"

[firstメソッド](http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Finders#first-instance_method) を用いて、

```rb
first(:fillable_field, 'タグ').set('春アニメ')
```

することも出来るのですが、せっかくですので DSL っぽく書きたい。

# 解決法

そんなときには、

```rb
fill_in 'タグ', with: '春アニメ', match: :first
```

とすることによって、findメソッド由来のオプションを付加することが出来ます。

# 補足

[capybaraドキュメントのMatching節](https://github.com/jnicklas/capybara#matching) では、exact, match の二つのオプションが使えるようです。

同様に内部でfindを使っている click_link, click_button などのアクションに対しても有効だと思われます。
使いやすいナビゲーション@2015/5/12

Amazon
---

![2015-05-12 15.16.22.png](https://qiita-image-store.s3.amazonaws.com/0/20933/1da378f9-25ba-1e11-aab3-79e12088a279.png)

Facebook
---

![2015-05-12 15.21.48.png](https://qiita-image-store.s3.amazonaws.com/0/20933/4f555ac6-a8b8-bcb4-6e3b-3823d1af8bd4.png)

グノシー
---

![2015-05-12 15.22.11.png](https://qiita-image-store.s3.amazonaws.com/0/20933/c1da0d0e-635b-e8b0-eec4-d26fbd67c259.png)

Pilot
---

![2015-05-12 15.22.34.png](https://qiita-image-store.s3.amazonaws.com/0/20933/2e0515da-18e8-f446-639c-1da8c1481ed4.png)

Line News
---

![2015-05-12 15.23.44.png](https://qiita-image-store.s3.amazonaws.com/0/20933/8cd72cfc-57c4-3de5-da14-8f75210924d1.png)

Yahoo News
---

![2015-05-12 15.24.47.png](https://qiita-image-store.s3.amazonaws.com/0/20933/6db1b9db-4a09-74f7-4782-96a37e8ed34a.png)

Smart News
---

![2015-05-12 15.22.24.png](https://qiita-image-store.s3.amazonaws.com/0/20933/66cca680-e351-d339-99dd-0f2dfcbf8605.png)

Antenna
---

![2015-05-12 15.23.00.png](https://qiita-image-store.s3.amazonaws.com/0/20933/eaea4a39-64ce-d0e4-032b-1683050a84b5.png)

News Pick
---

![2015-05-12 15.23.55.png](https://qiita-image-store.s3.amazonaws.com/0/20933/df04085c-9c29-e8be-2021-9052ddb5df59.png)

iemo
---

![2015-05-12 15.25.00.png](https://qiita-image-store.s3.amazonaws.com/0/20933/3274c2b2-6f2f-fccf-2ec7-4d2127a448ba.png)

Vingow
---

![2015-05-12 15.25.25.png](https://qiita-image-store.s3.amazonaws.com/0/20933/0009feb1-5077-6f3c-2955-923b6efb70ef.png)
motionでwebカメラを活用する

参考: [linux-motion-webcamでライブ監視カメラを設置する](http://damelog.com/computer/linux/linux-motion-webcam%E3%81%A7%E3%83%A9%E3%82%A4%E3%83%96%E7%9B%A3%E8%A6%96%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B/)

## install

* webカメラが認識されていること。
  * /dev/video0 ができていれば良い。

```bash:
pacman -Sy motion
```

## 設定

```diff:/etc/motion/motion.conf
- target_dir /usr/local/apache2/htdocs/cam1
+ target_dir /srv/motion
```

```bash:
sudo mkdir /srv/motion
sudo chmod 777 /srv/motion
```

## 起動

```bash:
systemctl start motion
```

## 確認

```bash:
ls -l /srv/motion
```

jpgとaviができている。

```bash:
cd /srv/motion
python -m http.server
```

* http://ipaddr:8000 にアクセス
* aviファイルはvlcで再生できる。
  * jpgを連結したもの。

## その他

### ストリーミングで見たい場合

```diff:/etc/motion/motion.conf
- webcam_localhost on
+ webcam_localhost off
```

vlc で http://ipaddr:8081 を指定すると見れる。

もしくは[raspberry pi に webカメラを繋いでみる](http://mrdosukoi.blogspot.jp/2014/02/raspberry-pi-web.html)を参考に

```html:
<html>
<body>
<img src="http://192.168.0.8:8081">
</body>
</html>
```

### 設定をwebから変更

```diff:/etc/motion/motion.conf
- control_localhost off
+ control_localhost on
```

webブラウザで http://ipaddr:8080 にアクセスするとmotionの設定が変更できる。


### 解像度変更

```diff:/etc/motion/motion.conf
- width 320
- height 240
+ width 640
+ height 480
```

### 画像を保存しない

```diff:
output_normal off
```

## 画像をメール送信

大量のメールが来るようになるので、別方法をとったほうが良い。

```bash:uuencode,uudecodeをインストール
pacman -Sy sharutils
```

```diff:
on_picture_save uuencode %f %f | mail -s "from:motion" hoge@hoge.com
```
generator-react-webpackってのを見つけたので使うてみた

## はじめに ##
React流行ってるみたいだけど
なにから手を付けていいかよく分からないひと(＝完全に自分)向け

[newtriks/generator-react-webpack](https://github.com/newtriks/generator-react-webpack)なるものを見つけたので
readmeなど見ながら調べ調べやっていきます。

## 導入 ##
何も考えずに下記を実行
`npm install -g generator-react-webpack`

## アプリケーションの作成 ##
何も考えずに下記を実行
`yo react-webpack sample`

react-routerrを含むか聞かれる

![820a42ecbecf0c434b51e35e5d51db0c.png](https://qiita-image-store.s3.amazonaws.com/0/21202/23eb5121-6fa4-5f20-58c8-45150adf4211.png)

アーキテクチャの有無を聞かれるので分からないままFluxを選択

![85f8afe1c49d20f2091d37a01a27e649.png](https://qiita-image-store.s3.amazonaws.com/0/21202/06837f12-06fa-ce5e-23ef-970b3f223dd4.png)

その後スタイルの形式(SCSS、LESSなど)を聞かれる

色々あってアプリが吐き出される

******************************
>├─node_modules
│　　　 reactはじめいろいろ
├─src
│  ├─components
│　│　 main.js
│　│　 SampleApp.js  ←デフォルトのコンポーネントファイル
│  ├─dispatcher
│　│　 SampleAppDispatcher.js
│  ├─images
│  └─styles
│　　　favicon.ico
│　　　index.html
└─test
    ├─helpers
    │  └─react
    └─spec
        └─components
       　   SampleApp.js
 .editorconfig
 .gitignore
 .jshintrc
 .yo-rc.json
 Gruntfile.js
 karma.conf.js
 package.json
 webpack.config.js
 webpack.dist.config.js

******************************

## Componentの追加 ##
何も考えずにｒｙ
`yo react-webpack:component menu`

>styles/Component
   　create src\components\Menu.js
   　create test\spec\components\Menu.js
   　create src\styles\Menu.scss

テストとスタイルも作ってくれる
これがコンポーネントベースの開発というものか、、、

## ビルド ##
webpackのビルドタスクがGruntにバンドルされているので下記を実行
`grunt build`

するとdistという公開層のディレクトリが生成され、
src以下のすべてのファイルがバンドルされる

>│  favicon.ico
│  index.html
│
├─assets
│      42092f929161dae9c08a21bfb46ece4d.png
│      main.js
│
└─images
        yeoman.png

## まとめ ##
actionやstoreもジェネレータがあるので、
とりあえず公式見ながら探り探りやってくと雰囲気はつかめてくるんじゃないかと思います(たぶん)

案の定ごく簡単な紹介にとどまってしまいましたが
私もこれで何か作ってみようと思います(＾＾；
乾燥機を分解して部品を交換する際のTIPS

モデル名: WED9200SW2 (いわゆるwhirlpool)
だいたいはこの動画(https://www.youtube.com/watch?v=APlWrIcP94g )の通りなのだが、いくつか引っかかった点と重要なTIPSがあったので、メモ書きとして残しておく。

・まずは裏に回ってコンセントを外し、裏面上部のネジ3個を外し、上面パネルを外す。
・フロント下部のパネルを外す時は下を持ち上げる必要がある
![WP_20150511_20_51_13_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/fa7de66d-097c-51fc-216b-fc5855e3ffb9.jpeg)
・フロント上部のコンパネ部は上に引き上げると外れる
![WP_20150511_19_48_44_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/4a1a8e28-4442-7fda-ab64-96df0e5ba439.jpeg)
・フロントパネル(上)を外すとき、先に上のネジを緩めて(完全には外さない)おいてから、下のネジ2個を外す。その後上のネジを外す
![WP_20150511_19_49_42_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/8875b6db-1a83-a644-cbf4-29cd2c701458.jpeg)
・パネルを外す前にコントローラにつながっているハーネスを外す(上下2か所)。これがとても固い。細いマイナスドライバーを隙間に突っ込んでぐりぐりするのを両側からやる。じゃないと外れない。
![WP_20150511_19_45_48_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/64b06f35-ea13-8820-5706-24774e23daf7.jpeg)
・フロント下のファンカバーは外さなくてもいけるのかちょっと分からない。今回は先に外してしまっていたけどもっと楽なやり方があるかも。
・フロントパネルから本体下部にGND接続させているケーブルがあるので、それも外しておく。これでようやくフロントパネルが外せる。
・フロントパネルを外したあとにドラムを外すのだが、プーリーに巻いてあるベルトを外す必要がある。ドラムの下側から両手を突っ込んで、下の写真に見える白いプーリーを左上に押し上げる。するとベルトが緩んでバチンと外れる。あとはベルトを使うか外すかしてドラムを取り出す。
![WP_20150511_19_58_11_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/a79ed0cc-9cfd-d55a-8f7c-ae2f67c019f8.jpeg)
・ドラムを取り出すには左右パネルを少し広げる必要があるので、そのスペースを確保すること。
・ドラムを外した後の状態。ここまでくれば内部の部品の交換は用意。というよりここまでやらないと部品の故障チェックすら不可能
![WP_20150511_19_59_21_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/6b56f567-dc25-d093-46cc-5f3052aa007c.jpeg)
・チェック対象の部品は合計4点。左下のヒューズ、中央の赤いリード線がつながっている部品2点(thermal cut-off)、あと金属の四角い筒の中にあるコイル。今回は結局コイルが断線していたので、筒の上蓋を留めているネジを4つとも外して中のコイルを取り出して交換。
![WP_20150511_19_59_30_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/38f4a03a-5539-9a0b-b215-3131fb57f729.jpeg)
・さらに乾燥機の中は埃だらけのひどい状態だったので、掃除機で埃の塊を全部綺麗に吸い取り。電熱コイルがあったり導線が端子むき出しであるのに埃だらけとか怖すぎる。
![WP_20150511_20_17_17_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/ce57f59e-232f-2719-b481-68a91a14b774.jpeg)
・組み立てるときは、ベルトをプーリーに巻く必要がある。この図のようにベルトを巻き付けること。
![乾燥機モーター接続.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/6a75fbc3-4b2c-79e5-6494-fef112eb7fbe.jpeg)
・完成図
![WP_20150511_21_24_51_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/32767/60b7b4c8-0914-971f-452e-dab6784dcbf5.jpeg)
Kobito for Windowsを使ってみた


# Qiitaへの連携

Kobito for Windows からQiitaへの連携の試験。

チーム「Inbox」で書いた物をアップする場合は、

* クリップボードにコピー
* チーム「Qiita」で新規に記事を作って貼り付け
* アップロード

でいいのかな。記事をチーム間で共有とか移動はないのか？
Knockout.jsで任意の引数とイベント発生タグの情報使用を同時に行いたい

Knockout.jsで任意の引数とイベント発生タグの値を同時に使用したい場合、下記のようにワンクッション入れてやると引数としてイベントハンドラを渡せます。


data-bindの設定（抜粋）

```haml
.js_select_purchase(target="#terminal_purchase" data-bind="click: function(data, event){ data.func_1(event,'hoge') }")
```

viewmodelの定義

```coffeescript
class ViewModel
  func_1: (event,arg)=>
    me = $(event.currentTarget)
    # 任意の引数をアラートで表示
    alert(arg)
    # イベントが発生しているタグのvalueを表示
    alert(me.attr('value'))

```
convert コマンドでラベルに日本語を含むsvgをPDFに変換

ImageMagic の convert コマンドを用い，
ラベルに日本語を含むようなsvgファイルをPDFなどに変換するとき，
何も考えずに以下のようにしてしまうと文字化けする．
`convert input.svg output.pdf` <- 文字化け！

以下のようにフォントを指定することで回避できる．
`convert -font "/System/Library/Fonts/ヒラギノ角ゴ ProN W3.otf" input.svg output.pdf`

（多分，convertコマンドはsvgファイルのFontFamilyを見てはいないということ．）
UIScrollViewで指定座標より上（下左右）にスクロールさせない



調べても見つからなかったのと，やってみたら一応できたので．

```sample.h
@import UIKit;
```


スクロール禁止部分が出来るとその部分はバウンドしないので全体的にバウンドを使用しない方が良いと思う

同じく，スクロールバーも禁止領域部分にスクロールバーが出てしまうと違和感あるので非表示にする

```sample.m
- (void)viewDidLoad {
	[super viewDidLoad];
    // ScrollViewをデリゲート
    self.scrollView.delegate = self;

    // スクロールバウンド禁止
    self.ScrollView.bounces = NO;
    // スクロールバー非表示
    self.ScrollView.showsVerticalScrollIndicator = NO;
}


- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGPoint p = scrollView.contentOffset
    // 縦方向（Y軸）で，Y:100より上へのスクロールを禁止する
    if (p.y <= 100) {
        p.y = 100;
    }
    scrollView.contentOffset = p;
}
```

スクロール処理中に毎回呼ばれるのでそれなりに負荷は掛かると思う．
もっと良い方法ないのかなぁ…
Solarisでwheneverでcrontabを編集する際に失敗する問題の回避


solaris環境に対し、wheneverでcrontabを設定する際、

```
crontab: can't open your crontab file.
[fail] Couldn't write crontab; try running `whenever' with no options to ensure your schedule file is valid.
```

とエラーが出てしまい、crontabの更新に成功しなかった
原因は、Whenever::CommandLineのwrite_crontab内で

```bash
crontab -
```

と指定しているが、この指定方法だと、solarisで更新ができなかった(-が余計らしい)
なので、#{Rails.root}/bin/wheneverに、wheneverコマンドをコピーして持ってきて

```ruby

module Whenever
    class CommandLine
        def write_crontab(contents)
            command = ['crontab']
            command << "-u #{@options[:user]}" if @options[:user]
            #       command << "-"
            puts command

            IO.popen(command.join(' '), 'r+') do |crontab|
                crontab.write(contents)
                crontab.close_write
            end 

            success = $?.exitstatus.zero?

            if success
                action = 'written' if @options[:write]
                action = 'updated' if @options[:update]
                puts "[write] crontab file #{action}"
                exit(0)
            else
                warn "[fail] Couldn't write crontab; try running `whenever' with no options to ensure your schedule file is valid."
                exit(1)
                end 
        end 
    end 
end
```

というモンキーパッチをあてることで問題を回避した
amd64(64bit)なUbuntuのdocker上でi686(32bit)なDebianを動かす

背景
----

Docker Repositoryには32bitなLinuxが無いようなので、自分で作る必要がでてきた、ということです

やり方
------

debootstrap使って32bitなDebianを仕立てあげた後、tarで固めてdocker importすればいいらしいです

その一連の作業をやってくれるのが、下記スクリプト

https://github.com/docker-32bit/debian/blob/i386/build-image.sh

### 使い方 ###

```
$ git clone https://github.com/docker-32bit/debian.git 32bit-debian
$ cd $_
$ sudo ./build-image.sh wheezy
```

* `build-image.sh`の引数は、指定しなければ _jessie_ になります
* get.docker.io から _lxc-docker_ をインストールしている場合は、途中で削除されて _docker.io_ がインストールされてしまいます。apt-get あたりを調整して逃げてください（`apt-get remove docker.io ; apt-get install lxc-docker` と入れなおせばいいのですけど)

すんなり終われば、このようにimageが出来上がります

```
$ docker images
REPOSITORY                                          TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
32bit/debian                                        wheezy              ee060727f4d6        7 minutes ago       200.1 MB
```

### 立つ鳥跡を濁さず ###

```
$ cd ..
$ sudo rm -rf 32bit-debian/ /var/chroot/wheezy/
```

あとがき
-------

つぎのGWはいつでしょうか
JasperReportのsubreport注意点


* subreportの差し込みでは、Class#getResourceAs()等で、jar/war内からの読み込みを設定する必要がある。
* またこの場合、subreportは*.jrxml形式では読み込めない。*.jasper形式にて読み込みの必要がある。

## TODO
* JasperReportのコンパイル方法のまとめ
* subreportへのDataSourceの渡し方
新しいwebサービスを立ち上げるときにやったこと


アプリファーストの企業が多い中、今更ですが新しいwebサービスを立ち上げました。
[horti[ホルティ]｜生活を彩ろう。花、植物、ガーデニング情報をお届け](https://horti.jp/)
今回はそのwebサイトを立ち上げるにあたって、サービスコンセプトが決まってから、webサイトが公開されるまで"エンジニアとして何をしたか？"をまとめてみました。
これもやっといた方がいいんじゃない？ということがあれば突っ込んでください。

## webアプリケーション開発前
### 1. サービスコンセプトを考える - 2weeks
自分達の強み、弱みなどを考えて、大体の費用や収益化の目処などを決めます。僕は、MTGに呼ばれてもないのに勝手に参加して、データ構造を考えて、テーブルを設計してました。

### 2. サービス名を考える - 1day
slack上で冗談みたいな名前も含め、数十〜数百の名前をあげまくりました。ドメインが空いているか？などもチェックしながら、最終的にはプロジェクトオーナーの意向により、hortiに決まりました。hortiは「庭」などを意味する言葉です。
エンジニアとしては何もしてません。

### 3. ドメインを取得 - 0.1day
horti.jpのドメインを取得しました。

### 4. awsのアカウント取得 - 0day
既に取ってたので、それを使いました。

## webアプリケーションの開発　〜 リリース
### 1. 開発環境構築 - 1days
ansibleは以前作ったものを流用（最初作ったときは5日くらいかかった。それを1日で修正した感じ）

1. vagrantを用意
2. ansibleを調整して、vagrantで建てた仮想環境にミドルウェアなどをインストール
(フレームワークの初期画面が表示される)
3. githubのプライベートリポジトリを作成
4. webアプリケーションに関わるコードをgitの管理下に置いてgithubにpush

### 2. ひたすら開発 - 8days
・plugin導入したり
・sass, compass, gulpの勉強をちょろっとしたり
・デザイン調整したり
・初期データ、テストデータ作ったり

かかった時間の半分以上はデザイン当てでした。cssなんてあんまり触らない上に、compassなど導入したので、勉強しながらやってちょっと時間かかりました。

### 3. 本番環境構築 - 2days
1. AWSでインスタンスを立ち上げて、EC2, RDS, Route53, S3, CloudFrontなどを設定。（ELBは固定費がかかるのでやめた）
2. ansibleでEC2にミドルウェアなどインストール&デプロイ
3. 不具合を見つけるたびにコードをちょいちょい修正

## リリース後、各種サービスの登録・設定 - 2days
実働時間はかからないけど、画像選んだり、時に作ってもらったり、googleに認証されるの待ったり、忘れてたりで時間がかかりました。

### 1. メアド作成
1. 問い合わせ用のメアドを作成するために、google appsにhorti.jpドメインを登録する
2. メアドのグループを作成する（twitterアカウントやsslの設定で使う）

### 2. Facebook, Twitterページ作成
1. Facebookページを作る
http://smmlab.jp/?p=28438

1. twitterアカウントを作る
https://twitter.com/

### 3. Googleさんのツール達を設定
1. Google Web Master Tool設定
https://www.google.com/webmasters/tools/home?hl=ja
（サイトマップの送信は忘れがち）

1. Google Adsense設定
http://www.google.com/adsense/start/
（サイトを追加。初回は銀行口座の確認などがあるので、数週間かかることも。）

1. Google Analytics設定
https://www.google.com/intl/ja_jp/analytics/
（Google Web Master Tool、Google Adsenseと連携しておく）

1. Google Tag Manager設定
https://www.google.co.jp/tagmanager/
（ユニバーサルアナリティクスがあればとりあえずOKだが、リンククリック、クリックリスナーは設定しておくと後が楽）

## リリース後の確認、調整 - 3days
1. [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)で設定の確認＆調整
2. [SEO Previewer](https://chrome.google.com/webstore/detail/seo-previewer/ehddoakgfehpkahfcnknofmimkhcomln)でメタタグなど確認＆調整
3. [Open Graph Object Debugger](https://developers.facebook.com/tools/debug/og/object/)でogタグ確認＆調整
2. sslを導入して、[SSL Server Test](https://www.ssllabs.com/ssltest/analyze.html)で確認＆調整
2. デザイン調整
3. Adsense追加

## 結果
結果として、[horti[ホルティ]｜生活を彩ろう。花、植物、ガーデニング情報をお届け](https://horti.jp/)は思い立ってから1ヶ月、開発に着手してから2週間で世に出ることになりました。
勉強しながらだったので、比較的時間がかかってしまいましたが、無事リリースできました。
MSYS2をどのスクリプトから起動するべきか

##【はじめに】
MSYS2(64bit版)には３つの起動スクリプトが存在します。

* msys2_shell.bat
* mingw64_shell.bat
* mingw32_shell.bat

これらの中からどのスクリプトからshellを起動するべきかをまとめておきます。

##【基本事項】
*PACMAN* でインストールできるパッケージは *msys / mingw32 / mingw64* の３つのグループにカテゴライズされており、それぞれインストールされるアプリケーション（ライブラリ）の内容やインストール先が異なります。

|グループ名|インストール先|インストールされるアプリケーション（ライブラリ）|
|:---|:---|:---|
|**msys**|/user|MSYS2に依存した(64bit/32bit)アプリケーション（ライブラリ）郡（以下MSYS2アプリ）|
|**mingw64**|/mingw64|64bitのWindowsネイティブアプリケーション（ライブラリ）郡（以下64bitネイティブアプリ）|
|**mingw32**|/mingw32|32bitのWindowsネイティブアプリケーション（ライブラリ）郡（以下32bitネイティブアプリ）|

> **混ぜるな危険**
> MSYS2アプリとネイティブアプリは同じ環境で動作しているように見えますが**別もの**です。*/mingw64(32)* 以下の実行ファイルやライブラリを */user* 以下にコピーや移動をすることは行わないようにしましょう。

### 【各起動スクリプトの動作】

* msys2_shell.bat
実行環境として、MSYS2アプリが利用可能
開発環境として、MSYS2アプリを作成するためのコンパイル環境(gcc)を提供

* mingw64_shell.bat
実行環境として、64bitネイティブアプリとMSYS2アプリが利用可能
(優先度は 64bitネイティブアプリ > MSYS2アプリ)
開発環境として、64bitネイティブアプリを作成するためのコンパイル環境(mingw64)を提供

* mingw32_shell.bat
実行環境として、32bitネイティブアプリとMSYS2アプリが利用可能
(優先度は 32bitネイティブアプリ > MSYS2アプリ)
開発環境として、32bitネイティブアプリを作成するためのコンパイル環境(mingw32)を提供

> 上記のように動作する為の環境変数の設定処理は */etc/profile* にて行われています。


##【結論】

**＊** 開発環境(gcc)が必要な場合は開発するターゲットに応じて起動スクリプトを選択。

* MSYS2上で動作するアプリを作成する場合は*msys2_shell.bat*で起動
* 64bitネイティブアプリを作成する場合は*mingw64_shell.bat*で起動
* 32bitネイティブアプリを作成する場合は*mingw32_shell.bat*で起動
* 特にターゲットを設定せずに、単にC/C++言語の勉強がしたいなどの場合は*msys2_shell.bat*で十分かも・・

**＊** 単にWindows上で動作するSHELL環境がほしい場合は基本的に*mingw64(32)_shell.bat*で起動。　
こうすることで、あまり気環境を気にすることなくMSYS2アプリとネイティブアプリの両方が使用可能となります。
ただし
**>** 特にMSYS2から提供されているネイティブアプリのパッケージを使う予定が無い
**>** MSYS2のパッケージだけで十分
**>** shell+git環境があれば十分
**>** フォルダ構成をシンプルに保ちたい
等な場合は*msys2_shell.bat*で起動でよいと思います。
Macでjdkのバージョンを切り替える関数を作った(zsh限定)


## やりたいこと
複数のバージョンのjdkをインストールしているMacで、jdkのバージョンを気軽に切り替えたい。

## つくったもの

```:setjdk.zsh
function setjdk() {
  export JAVA_HOME=$(/usr/libexec/java_home -v $1)
}
```


このファイルを`~/.zsh.d`に置いて、.zshrcに

```
source ~/.zsh.d/setjdk.zsh
```

と追記してから、.zshrcを読み直せば使用準備OKです。

## 使い方

下記のような感じで実行します。

```REPL
$ setjdk 1.7    # JDK1.7系にバージョンが切り替わる
```

## なんで作った？

毎回下記コマンドを叩くのが面倒なので。

```bash
export JAVA_HOME=$(/usr/libexec/java_home -v 1.7)
```
capistrano でサーバ上の cache-copy を綺麗にするタスク

ブランチを整理して、さてデプロイ、と思ったら、サーバ上のキャッシュコピーも整理し直す必要があった。

```
DEBUG [a87c2117]        Fetching origin
DEBUG [a87c2117]
DEBUG [a87c2117]        error: there are still refs under 'refs/heads/release'
DEBUG [a87c2117]
DEBUG [a87c2117]        From github.com:
DEBUG [a87c2117]
DEBUG [a87c2117]         ! [new branch]      release    -> release  (unable to update local ref)
DEBUG [a87c2117]
DEBUG [a87c2117]        error: Could not fetch origin
DEBUG [a87c2117]
```

`git prune`をするタスクがあったけど、capistrano3 では動かなかったので、修正した版
https://gist.github.com/wpeterson/4733888

```rb
namespace :git do
  desc "Prune remote git cached copy (fixes errors with deleted branches)"
  task prune: :'git:clone' do
    on release_roles :all do
      within repo_path do
        with fetch(:git_environmental_variables) do
          strategy.git :remote, :prune, :origin
        end
      end
    end
  end
 
  desc "Clear Capistrano Git cached-copy"
  task :clear_cache do
    on release_roles :all do
      execute "rm -rf #{repo_path}"
    end
  end
end
```
Ubuntuにtesseract-ocrをインストール

次のパーケッジをインストールします。

```
sudo apt-get install autoconf automake libtool
sudo apt-get install libpng12-dev
sudo apt-get install libjpeg62-dev
sudo apt-get install libtiff4-dev
sudo apt-get install zlib1g-dev
sudo apt-get install libicu-dev      
sudo apt-get install libpango1.0-dev 
sudo apt-get install libcairo2-dev   
sudo apt-get install libleptonica-dev
```

次に、tesseract-ocrをダウンロードします。

```
sudo apt-get install tesseract-ocr
```

次に、ダウンロードリストにて
https://code.google.com/p/tesseract-ocr/downloads/list

日本語と英語のtraindataをダウンロードしましょう。

```
tesseract-ocr-3.02.eng.tar.gz
tesseract-ocr-3.02.jpn.tar.gz
```

ダウンロードしたものを解凍し、jpn.traineddataとeng.traineddataを/usr/local/share/tessdata/tessdataに移動します。

そして、`TESSDATA_PREFIX`変数をセットします。

```
export TESSDATA_PREFIX=/usr/local/share/tessdata
```

最後に、実行しましょう。

```
tesseract t.png out -l jpn
```

上記のコマンドでt.pngを読み込んでlオプションで日本語として処理を行い、最後にout.txtとして出力されます。
CentOS6系でLAMP環境構築

#Yumリポジトリの追加
* epel
`rpm -Uvh http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm`

* remi
`rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm`

* mysql
`yum install -y http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpm`

#Yumアップデート
`yum -y update`

#Apacheのインストール
####1.インストール
`yum -y install httpd`
***
####2.設定
`vi /etc/httpd/conf/httpd.conf`
***

* サーバー情報表示の制御

```
ServerTokens OS
↓
ServerTokens Prod
```

* エラーページでサーバー情報を表示しない

```
ServerSignature On
↓
ServerSignature Off
```

***

####3.テストページ削除
```
rm -f /etc/httpd/conf.d/welcome.conf
rm -f /var/www/error/noindex.html
```

***

####4.httpd起動
```
/etc/rc.d/init.d/httpd start
(または apachectl start)
```

***

####5.httpd自動起動設定
```
chkconfig httpd on
```

#MySQL5.6をインストール
####1.MySQLのインストール
`yum install -y mysql-community-server`

***

####2.起動＆自動起動ON
```
service mysqld start
chkconfig mysqld on
```

***

####3.rootパスワード設定
```
mysql -uroot -p
※パスワードは空でEnter
SET PASSWORD FOR root@localhost=PASSWORD('[指定するパスワード]');
exit
```

***

####4.初期設定
```
mysql_secure_installation
(rootパスワード入力)
# root ユーザーのパスワードを変更するか？
Change the root password? [Y/n] n
# 匿名ユーザーを削除するか？
Remove anonymous users? [Y/n] Y
# リモートから root ユーザーのログインを禁止するか？
Disallow root login remotely? [Y/n] Y
# test データベースを削除するか？
Remove test database and access to it? [Y/n] Y
# 権限テーブルをリロードするか？
Reload privilege tables now? [Y/n] Y
```

***

####5.my.cnf編集
`vi /etc/my.cnf`

```
[client]
default-character-set=utf8

[mysqld]
skip-character-set-client-handshake
character-set-server = utf8
collation-server = utf8_general_ci
init-connect = SET NAMES utf8

[mysqldump]
default-character-set=utf8

[mysql]
default-character-set=utf8
```

####6.再起動
`/etc/init.d/mysqld restart`


#PHP5.5をインストール
####1.PHPのインストール
* PHP本体
`yum --enablerepo=remi,remi-php55 -y install php php-common php-cli php-devel`

* よく使うモジュール
`yum --enablerepo=remi,remi-php55 -y install php-gd php-mbstring php-mcrypt php-xml php-pear`

* DB関連モジュール
`yum --enablerepo=remi,remi-php55 -y install php-pdo php-mysqlnd php-pgsql`

***

####2.初期設定
`vi /etc/php.ini`

```
;date.timezone =
↓
date.timezone = 'Asia/Tokyo'
```
```
;mbstring.language = Japanese
↓
mbstring.language = Japanese
```
```
;mbstring.internal_encoding = UTF-8
↓
mbstring.internal_encoding = UTF-8
```
```
;mbstring.http_input = UTF-8
↓
mbstring.http_input = UTF-8
```
[Python] return A [or / and] B

# return A or B ?
先日、こんなコードを見かけて混乱しました。

```py:
def hoge:(self)
    return A or B
```
return構文内でのorやandは初めて見たので、調べてみます。

# なに？
公式ドキュメントからの引用
> The expression x and y first evaluates x; if x is false, its value is returned; otherwise, y is evaluated and the resulting value is returned.
The expression x or y first evaluates x; if x is true, its value is returned; otherwise, y is evaluated and the resulting value is returned.

書かないと分からぬ。

```py3:or_and_in_return.py
def and_in_return1():
    return 1 == 1 and 1 == 1

def and_in_return2():
    return 1 == 0 and 1 == 1

def and_in_return3():
    return 1 == 1 and 1 == 0

print(and_in_return1()) # True
print(and_in_return2()) # False
print(and_in_return3()) # False

def or_in_return1():
    return 1 == 1 or 1 == 1

def or_in_return2():
    return 1 == 0 or 1 == 0

def or_in_return3():
    return 1 == 1 or 1 == 0

print(or_in_return1()) # True
print(or_in_return2()) # False
print(or_in_return3()) # True
```

if内で使われている作用と変わりませんでしたね…

# 参考にさせて頂いたページ
* http://stackoverflow.com/questions/4477850/python-and-or-operators-return-value
* https://docs.python.org/release/2.7.3/library/stdtypes.html#boolean-operations-and-or-not
Chrome/42.0.2311.111 でサーバへのアクセスがとても遅くなった問題

今回は本当に誰の役に立つのかわかりません。。

# 問題
あるHTMLの静的ページにアクセスすると、リクエストからサーバへ到達するまでの時間が1.5分程度かかってしまう

**環境**

* Android Chrome/42.0.2311.111
* Xperia Z3

# 解決
アプリをダウングレードした後、再度アップグレードしたら直りました。直ってしまいました（再現できなくなった）

# 考察
* ほかのサイトへのアクセスでは同じ問題が起こらなかったので、サーバ（DNSかhttpdか･･･）の設定と思いました。
* が、そちら側には疎いので、とりあえずChromeの [Remote Debug](https://developer.chrome.com/devtools/docs/remote-debugging) でNetworkを観察してみました。
    * 結果、"Stalled"前に1.5分くらい謎の空白状態がありました。
* サーバのアクセスログを`tail -f`で観察すると、アクセスが到達するまでに大きな時間がかかっていました。
    * （だからといってこれ以上できることが思い浮かばなかった）
* よくわからないのでとりあえずシークレットモードで再アクセスしてみました。
    * 結果、おなじ問題は再現せず、短時間でレスポンスが返ってきました。
    * UserAgentによるとシークレットモードのバージョンは古く（Chrome/34.0.0.0）、バージョンが原因なのではと思いました

想定では、古いバージョンで動き、最新では動かない、となるはずだったのですが。。
結局アップデートになにか問題があったのか？とか、内部の設定をどこかで変えてしまったのか？というぼんやりとした考察です。（後者の理由だったらタイトルは不適切かもしれません。）
シークレットモードだとバージョンが違うというのが今回の知見ですかね。
カーディナリティについてまとめてみた



## カーディナリティとは
テーブルにカラムがあるとして、カラムに格納されているデータの種類がどのくらいあるのか(カラムの値の種類の絶対値)を、カーディナリティという。

## 具体例

### カーディナリティが低い場合
例えば性別なら、男と女の二種類である。
カラムのデータの種類が、テーブルのレコード数に比べて二種類と少ない。このことを **カーディナリティが低い** という。

### カーディナリティが高い場合
一方顧客番号ならたくさんの種類(番号)が存在することになる。
カラムのデータの種類が、テーブルのレコード数に比べて多い場合、 **カーディナリティが高い** という。

## カーディナリティを踏まえたインデックスの張り方
基本的に、 **カーディナリティの高い列に作成する** 必要がある。

はじめに、カーディナリティは **カラムの値の種類の絶対値**と書いたが、先程の例で言うと性別のカーディナリティは2になる。他にも例えば１年間の日付なら1〜365なのでカーディナリティは365になる。カーディナリティが高いのは日付ということになる。

インデックスを作る時の目安は特定のカラム値を指定した時に、全体の **5%**程度に絞り込めるだけのカーディナリティがあることである。例えば先ほどの日付の例だと、365日のうちの1日を指定するselect文を考えるとする。
この場合 1 / 365 ≒ 0.27%となるので、インデックスを作成する意味はあるといえるだろう。
反対に、性別の場合男女どちらを選んでも 1 / 2 = 50%となるので、インデックスを作成する意味はないし、むしろマイナスになるだろう。


複合インデックスを貼る時は、 **カーディナリティの高い順**に貼っていくのが大事で、適当な順番にしてはいけない。これは直感的にも顧客番号のほうが明らかに検索する回数が多そうだから先に絞ってしまおうという考えになるだろう。

## 参考
- http://promamo.com/?p=2207
- http://www.shift-the-oracle.com/words/cardinality.html
LINQで2つの文字列を先頭から結合

言語処理100本ノック2015の下記問題を解いてみました。

「パトカー」＋「タクシー」＝「パタトクカシーー」
「パトカー」＋「タクシー」の文字を先頭から交互に連結して文字列「パタトクカシーー」を得よ．

```
	var text1 = "パトカー";
	var text2 = "タクシー";
	var count = 0;
	var dicText1 = text1.ToDictionary(x => count++, x => x);
	count = 0;
	var dicText2 = text2.ToDictionary(x => count++, x => x);
    var result = string.Concat(dicText1.Concat(dicText2).Dump().OrderBy(x => x.Key).Dump().Select(x => x.Value)).Dump();
```

ソートが多少怪しいですが、まぁ動きます。
LINQを用いた文字列結合、どう書くのが良いのか難しいです。
zfsに対応したDocker

Dockerが、従来のaufsドライバーに加え、zfsに対応したそう。
先ほどマージされました。

> zfs-utils based zfs graph driver #9411
> <i class="fa fa-github"></i> https://github.com/docker/docker/pull/9411
> Merge pull request #9411 from Mic92/features/zfs-rebased
> <i class="fa fa-github"></i> https://github.com/docker/docker/commit/e7568ed227908c3470b6a341ed24c05ca486368d

かれこれ半年ほどをかけ、[@Mic92](https://github.com/Mic92)氏を中心に実装されたようです。
[@Mic92](https://github.com/Mic92)氏は[python-mpd2](https://github.com/Mic92/python-mpd2)の作者でもあります。使ったことはありませんが。


Dockerのコアコミッタも喜んでいるようです。
<i class="fa fa-twitter-square"></i>
<blockquote class="twitter-tweet" lang="ja"><p lang="en" dir="ltr">boom baby <a href="http://t.co/qcORqXCwRg">pic.twitter.com/qcORqXCwRg</a></p>&mdash; jessie frazelle (@frazelledazzell) <a href="https://twitter.com/frazelledazzell/status/597928542081458177">2015, 5月 12</a></blockquote>
<blockquote class="twitter-tweet" lang="ja"><p lang="en" dir="ltr">ZFS support for <a href="https://twitter.com/docker">@docker</a> merged! <a href="https://t.co/6L0kRImw0F">https://t.co/6L0kRImw0F</a> Thx so much <a href="https://twitter.com/Mic_92">@Mic_92</a> ! Also thx to <a href="https://twitter.com/frazelledazzell">@frazelledazzell</a> who already added ZFS to our CI!</p>&mdash; Tibor Vass (@tiborvass) <a href="https://twitter.com/tiborvass/status/597930324257951744">2015, 5月 12</a></blockquote>
~~frazelledazzellさん綺麗。~~
~~tiborvass氏は日本の芸能人の誰かにに似ています。~~

実に楽しそうである。
<i class="fa fa-twitter-square"></i>
<blockquote class="twitter-tweet" lang="ja"><p lang="tl" dir="ltr"><a href="https://twitter.com/tianon">@tianon</a> hahahahaha</p>&mdash; jessie frazelle (@frazelledazzell) <a href="https://twitter.com/frazelledazzell/status/597956792031707136">2015, 5月 12</a></blockquote>

また、aufsは死んだとも。
<blockquote class="twitter-tweet" lang="ja"><p lang="en" dir="ltr"><a href="https://twitter.com/frazelledazzell">@frazelledazzell</a> Zomg.&#10;&#10;I’ve been wanting this forever.&#10;&#10;Die, AUFS.</p>&mdash; Miss Witch (@evilgaywitch) <a href="https://twitter.com/evilgaywitch/status/597913311305400320">2015, 5月 11</a></blockquote>
<i class="fa fa-font"></i> [Zomg - urbandictionary](http://ja.urbandictionary.com/define.php?term=zomg)

# Release
Docker 1.7のマイルストーンにもなっていますので、他機能とともに後日リリースされることと思います。

# ZFS

肝心のZFSに関しては、以下が詳しい。

- [ZFS - Wikipedia](http://ja.wikipedia.org/wiki/ZFS)
- [ZFSがあればGitなんか要らない？ - POSTD](http://postd.cc/who-needs-git-when-you-got-zfs/)
- [岩舘電気の中の人が ZFS の dedup を使ってバックアップサーバを構築してみた - Qiita](http://qiita.com/iwadatedenki/items/dcee94ee8b08e658fede)
redisでmake testができない

redisで`make`後、`make test`で下記のエラーが出た場合の対処です。

```lang:
$ make test
You need tcl 8.5 or newer in order to run the Redis test
make: *** [test] エラー 1
```

メッセージ通りに`tcl`をインストールします。
インストール前に、本当にtclがないか確認(ある場合は、8.5以上にアップデートしてください)

```lang:
$ rpm -qa | grep tcl
$
やっぱりない。
# yum install tcl
：
Setting up Install Process
Resolving Dependencies
--> Running transaction check
---> Package tcl.x86_64 1:8.5.7-6.el6 will be installed
--> Finished Dependency Resolution

Dependencies Resolved

=======================================================================================================
 Package            Arch                  Version                      Repository                 Size
=======================================================================================================
Installing:
 tcl                x86_64                1:8.5.7-6.el6                intra-repo                1.9 M

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

インストール完了。
再度`make test`を実施。

```lang:
$ make test
Cleanup: may take some time... OK
Starting test server at port 11111
[ready]: 18792
Testing unit/printver
[ready]: 18790
：
\o/ All test passed without errors!

Cleanup: may take some time... OK
```
highlightの ERBなXMLのための プラグイン

[highlight](http://www.andre-simon.de/doku/highlight/en/highlight.php) というアプリで erbなXML/HTMLをハイライトするためのプラグイン。

文字列中の埋め込みrubyコード (<% ... %> で囲まれた部分) をハイライトする。HTMLの場合はjspコードとして誤解釈されないようにしている。

ただし属性値の埋め込み部分はハイライトできない (「<a href="#effect">効果</a>」参照)。これは Stringsとして定義された部分 (HTML/XMLではダブルクォートで囲まれた部分) の処理が優先されるというHighlightの仕様によるもの。


```lua:xml_erb.lua
--[[
USAGE: highlight -I main.cpp --plug-in=xml_erb.lua
]]

Description="Add ERB blocks to XML keywords"

-- function to update language definition with ERB
-- optional parameter: syntax description
function syntaxUpdate(desc)
  if desc=="HTML" or desc=="XML" then
    -- insert <%...%> for Ruby
    table.insert( Keywords,
                  { Id=5, Regex=[[<\%.+?\%>]]
                   } )

    Strings={
       Delimiter=[["|']],
    }

    if desc=="HTML" then
       NestedSections = {
          { Lang="php", Delimiter= { [[<\?php]], [[\?>]] } },
          -- { Lang="jsp", Delimiter= { [[<\%[@!\=]?]], [[.*(%>).*]] } },
          { Lang="css", Delimiter= { [[<style\s+type\=[\'\"]text\/css[\'\"]>]], [[<\/style>]] } },
          { Lang="js", Delimiter= { [[<script>]], [[<\/script>]] } },
          { Lang="js", Delimiter= { [[<script\s+language\=\"[jJ]ava[sS]cript\"(?:\s+type\=\"text\/javascript\")?>]], [[<\/script>]] } },
          { Lang="js", Delimiter= { [[<script\s+language=[\"\'][jJ]ava[sS]cript[\"\'](?:\s+type=[\"\']text/javascript[\"\'])?[^>]*>]], [[<\/script>]] } },
          { Lang="js", Delimiter= { [[<script(?:\s+type=[\"\']text/javascript[\"\'])\s+language=[\"\'][jJ]ava[sS]cript[\"\']?[^>]*>]], [[<\/script>]] } },
          { Lang="js", Delimiter= { [[<script(?:\s+type=[\"\']text/javascript[\"\'])>]], [[<\/script>]] } },
       }       
    end
  end
end


-- function to update theme definition
-- optional parameter: theme description
function themeUpdate(desc)
  --add 5th keyword style for <%..%> defined in  syntaxUpdate()
   if #Keywords==4 then
     table.insert(Keywords, { Colour="#660000", Italic=true })
   end
end


--The Plugins array assigns code chunks to themes or language definitions.
--The chunks are interpreted after the theme or lang file were parsed,
--so you can refer to elements of these files

Plugins={

  { Type="theme", Chunk=themeUpdate },
  { Type="lang", Chunk=syntaxUpdate },

}

```
### 使用法
![capture_highlight_tabs.JPG](https://qiita-image-store.s3.amazonaws.com/0/37708/72ca183a-5cdb-9ded-0bab-74da11453869.jpeg)

1. Highlight を起動。
2. Plug-insタブの "Add plug-in to pool" にて上記の xml_erb.lua を選択。
3. FilesタブもしくはClipboardタブからハイライトしたいソースコードを選択もしくはペースト
4. Plug-insタブのpoolにて、 xml_erb.lua にチェックすればハイライトが適用される。

<a name="effect" />
### 効果
###### 使用前

![capture_before.JPG](https://qiita-image-store.s3.amazonaws.com/0/37708/74d42d8e-fbfd-a5a7-508e-78de4c39c52f.jpeg)

###### 使用後

![capture_after.JPG](https://qiita-image-store.s3.amazonaws.com/0/37708/204cbad7-734f-525e-ca99-68ac38d0bf48.jpeg)
docker のコンテナ内から ホストの docker を操作する

# 1. TCP 経由でホストに接続する

docker デーモンの起動オプションの ```-H``` オプションで外部からの接続用のポートを追加してあげます。Ubuntu であれば、/etc/default/docker ファイルの DOCKER_OPTS を編集します。

```
DOCKER_OPTS="-H tcp://172.17.42.1:4243 -H unix:///var/run/docker.sock"
```

docker デーモンを再起動後、コンテナ内から ```docker -H 172.17.42.1:4243``` で接続できると思います（ネットワークをいじっている場合は IP を変える必要があるかもしれません）。

ちなみに boot2docker だと手順が変わります。0.0.0.0:2376 をリッスンしているので DOCKER_OPTS の変更は不要ですが、tlsverify が指定されていると思うので、cert もってきて tls を使って接続する必要があります。要するに docker-machine がやってくれることをコンテナ内でもやれば OK というだけです。

# 2. docker.sock を共有する

オススメしていいのか分からないけど、たまに見かけるのが /var/run/docker.sock をコンテナに Volume で渡してあげるやり方です。コンテナに docker がインストールされていない場合は /usr/bin/docker コマンドも一緒に渡してあげればいいです。

```bash
$ docker run --rm -it -v /var/run/docker.sock:/var/run/docker.sock -v /usr/bin/docker:/usr/bin/docker ubuntu /bin/bash

root@9ba2bef70d02:/# docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
9ba2bef70d02        ubuntu:latest       "/bin/bash"         2 minutes ago       Up 2 minutes                            backstabbing_shockley  
```
注意としては、コンテナ内のユーザーは root か sudo で docker コマンドを叩く必要があります。
親子のActiveModelをformに適用する

ActiveModelを使用し、子要素もモデル化したい場合、下記のように記述するとpostパラメータとして引き回しできます。


Modelの定義


```ruby:parent_model.rb
# 親Model
class ParentModel
  # 子モデルの保持領域
  attr_accessor :child_models

  # ActiveRecordのaccepts_nested_attributes_for 相当の処理
  def child_models_attributes=(attributes)
    @child_models ||= []
    attributes.each do |_, params|
      @child_models.push(ChildModel.new(params))
    end
  end
end
```

```ruby:child_model.rb
# 子Model
class ChildModel
  attr_accessor :field
end
```

コントローラーの定義
※StrongParameterの定義に少々癖があります。

```ruby:sample_controller.rb
class SampleController < ApplicationController
  def input
    @parent_model = ParentModel.new(
          child_models:[ChildModel.new,ChildModel.new]
      )
  end
  def save
    parent_model = ParentModel.new(post_params)
  end

  private
  # strongparamの定義
  def post_params
    params.require(:parent_model).permit(
        child_models_attributes: [
            :field
        ]
    )
  end
end
```

Viewの定義

```ruby:sample.html.haml
.main
  .section
    = form_for @parent_model,  url: {action: 'save'} do |f|
      - @parent_model.child_models.each_with_index do |form, index|
        = f.fields_for :child_models, form do |fields|
          = fields.hidden_field :field
          %br
          %h2 #{1 + index}人目

```

設定に誤りがなければ下記のように配列としてtagが展開されます。

<input id="child_models_attributes_0_field" name="parent_model[child_models_attributes][0][field]" type="hidden">
n秒後にツイートするスクリプト

n秒後に自動的にTwitterへポストするスクリプト。
ターミナルで起動するなら起動させっぱなしにしないといけません。
POSTすると終了します。

```python:twittimer.py

#!/user/bin/env python
# -*- coding: utf-8 -*-
from requests_oauthlib import OAuth1Session
import sys, codecs
import threading

C_KEY = "***************************"
C_SECRET = "***************************"
A_KEY = "***************************"
A_SECRET = "***************************"


def Post_msg():
	url = "https://api.twitter.com/1.1/statuses/update.json"
	params = {
		"status": u"タイマーのテスト from Pytimer",
		"lang": "ja"
			}
	tw = OAuth1Session(C_KEY,C_SECRET,A_KEY,A_SECRET)
	req = tw.post(url, params = params)
	if req.status_code == 200:
		print "Success! Your Tweet"
	else:
		print req.status_code
	return Post_msg

t=threading.Timer(5,Post_msg)
t.start()

```

この場合は5秒後（だいたいです）にPost_msgを実行。
ポスト後はSuccess! Your Tweetとプリントされ、終了します。
ElectronでGyazoっぽいUIを実現する

https://github.com/uiureo/electron-crop-rect

[Electron](https://github.com/atom/electron) (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。
APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。

たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。

[![Gyazo](https://i.gyazo.com/9b035ef02d2f2d36d71d26af14eccafd.gif)](https://gyazo.com/9b035ef02d2f2d36d71d26af14eccafd)

## 実装方法
画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。
https://github.com/uiureo/electron-crop-rect/blob/master/main.js

```js
app.on('ready', function () {
  const Screen = require('screen')

  const size = Screen.getPrimaryDisplay().size

  mainWindow = new BrowserWindow({
    left: 0,
    top: 0,
    width: size.width,
    height: size.height,
    frame: false,
    show: true,
    transparent: true,
    resizable: false,
    'always-on-top': true
  })

  mainWindow.maximize()

  // ...
})
```

あとは普段のWebアプリ開発と同じように、Reactやら何やらを使ってDOM要素を描画してCSSでうまい感じに見せるだけである。
https://github.com/uiureo/electron-crop-rect/blob/master/app.js

たとえばこのUIをWindowsで実装しようとすると、千行近いコードをCか何かで書かなければならずその苦痛は拷問にも等しい。

### 課題
Macだとただ上のメニューバーを非表示にできないなどの制約があって、細かい部分の制御がむずかしいこともある。開発コストとあわせて考えると妥協できる点もあるとは思う。

## Electronで案外色々できる
透明なウィンドウを使うとか工夫をすると、Electronで案外色々なUIを実現できる。

たとえば、menubarというモジュールを使うとDropboxなどで見られるようなメニューバーをElectronでつくれる。
https://github.com/maxogden/menubar
![](https://github.com/maxogden/menubar/raw/master/screenshot.png)

ほかにも様々な面白い例がawesome-electronにある。
https://github.com/sindresorhus/awesome-electron

PCアプリ開発者はWeb技術を見くびらないほうがいい、あなたの仕事は今にも失われつつある。
ツールバーのLayersを操作する

![00000.png](https://qiita-image-store.s3.amazonaws.com/0/21705/af0d3d9c-d1df-950d-4cb5-8ae48fe16476.png)
#Lock操作
##特定レイヤーのみ編集可能 or 全編集可能のトグル切り替え
```csharp
var isolateIndex = ~(1 << LayerMask.NameToLayer("LayerName"));
Tools.lockedLayers = Tools.lockedLayers == isolateIndex ? 0 : isolateIndex;
```