OmniAICreator/Qiita-1.07M huggingface dataset:
ExpressでPOSTを処理するメモ

## やりたいこと

node.js - express でformを生成して、受け取った値を表示する
ググりながらやっていたら結構ハマったので多分初歩的なことですがメモとして残しておきます。

## 手順

jadeファイルでformを作る

```jade:index.jade
form(method="POST", target="./")
            input(type="text", name="word" value="")
            input(type="hidden", name="mode" value="input")
            input(type="submit", value="送信")
```

メインのapp.jsファイル(一部抜粋)

```js:app.js
app.post('/', function(req, res) {
    console.log(req.body);
    res.render('index', { title: 'Express Sample Posted ver 0.0.1', word: req.body.word});
});
```

実行すると以下のようにundefinedに・・・

`console.log(req.body);// undefined`

body-parserっていうのがいるらしい・・・

入れてみる。

`npm install --save body-parser`

```js:app.js
var bodyParser = require('body-parser');
app.use(bodyParser());
```

実行！！

`body-parser deprecated bodyParser: use individual json/urlencoded middlewares app.js:9:9
body-parser deprecated urlencoded: explicitly specify "extended: true" for extended parsing node_modules/body-parser/index.js:74:29
{ word: 'post', mode: 'input' } ←console.log(req.body)の結果
`

POSTの取得は出来たがdeprecated が出たため、訂正
urlencodedまたはjsonを使わなければいけないらしい。更にextended: trueを指定とのこと。

```js:app.js
app.use(bodyParser.urlencoded({extended: true}));
```

deprecated もなくなったのであとは表示のみ
jadeファイルの変数は#{}で囲む

```jade:index.jade
p #{word}
```

無事にやりたいことが出来ましたー。
[Ruby]ブロック引数への代入方法

2016/09/21　`2.4.0`で入ったif文の条件式での多重代入について追記

ブロック引数への代入方法
====
Rubyでは配列をグルグル回すときにメソッド+ブロックをつけて色々処理することが多いですが、そのブロック引数の扱いで
結構しられていない(？)多重代入のルールを知ってると簡単に書けたりすることがあります。

こういうパターンはよく見ます。

```rb
ary = [
 [1, 2],
 [3, 4]
]
ary.each do |a, b|
  p [a, b]
end

#=>
#[1, 2]
#[3, 4]
```

eachでブロックに渡されるのは、例えば最初の要素なら`[1, 2]`という配列だったりするのですが、それがa, bに分解されてブロック引数にセットされるパターンですね。
でも、なぜか

```rb
ary = [
  [[1, 2], :a],
  [[3, 4], :b]
]
```

というようなパターンだと、こういうコードをよく見かけます。

```rb
ary.each do |e, s|
  p [e[0], e[1], s]
end
#=>
#[1, 2, :a]
#[3, 4, :b]

```

`e`に`[1, 2]`が代入されて、`s`に`:a`が代入されるケースですね。
でも、これはブロック引数に括弧をつけると、こう書けます

```rb
ary.each do |(a, b), c|
  p [a, b, c]
end
#=>
#[1, 2, :a]
#[3, 4, :b]
```

これは配列がもっとネストしてても大丈夫で、例えば

```rb
ary = [
  [[1, [2, [3, 4]]], :a],
  [[5, [6, [7, 8]]], :b]
]
```

という配列があったとしたら、

```rb
ary.each do |(a, (b, (c, d))), e|
  p [a, b, c, d, e]
end
#=>
#[1, 2, 3, 4, :a]
#[5, 6, 7, 8, :b]

```

と、括弧をネストするとそれぞれ分解して代入してくれます。
lispの[destructuring-bind](http://www.asahi-net.or.jp/~kc7k-nd/onlispjhtml/destructuring.html)みたいな感じですね。

で、よくあるパターンだと、例えば各人の教科別の点数を配列で持っていて、その各要素が
`[名前, [教科, 点数]]`
というような持ち方で、

```rb
ary = [
  [:taro,   [:math,     10]],
  [:taro,   [:japanese, 20]],
  [:jiro,   [:math,     30]],
  [:jiro,   [:japanese, 40]],
  [:saburo, [:math,     50]]
]
```

ってなってるようなケースで、教科関係なくすべてのテストの合計点を求めたい時に、
`inject`でグルグルまわすとき、

```rb
total = ary.inject(0){|acc, (_, (_, score))|
  acc + score
}
puts total #=> 150
```

というように、injectのアキュームレータ(`acc`)に続けて、配列の構造に合わせて括弧をネストさせることで`[]`を使わず欲しい値だけが取得できたりします。(`_`は変数としては要るけど処理としては使わない時に「使わないよ」という意味の時に使います)

多重代入
====
ブロック引数への代入方法は多重代入の方法と同じそうです。
なので、多重代入でもこういったネストの構造を代入することができます。

```rb
name, (subject, score) = [:taro, [:math, 100]]
p [name, subject, score] #=> [:taro, :math, 100]
```

2016/09/21追記
====

`2.4.0preview2`　が出ましたね！
ブロック引数ではないですが、多重代入に関して記載していたので、追記です。

`2.4.0`からif文の条件式部分でも多重代入が出来るようになったそうで試してみました。

```rb
def m(flag)
  if flag
    [1, [2, 3], 4]
  end
end

# nilが返された場合
if (a, (b, c), d = m(false))
  p [a, b, c, d]
else
  p :result_is_nil
end
# => result_is_nil

# ネストした配列を返す関数から値を受け取る
if (a, (b, c), d = m(true))
  p [a, b, c, d]
else
  p :result_is_nil
end
# => [1, 2, 3, 4]

p [a, b, c, d]
# => [1, 2, 3, 4]
```

条件式自体は括弧で括る必要があるみたいですね。
で一番下の `p [a, b, c, d]` の結果から,(rubyならまぁ当然といえば当然かもしれませんが) if文が終わった後もそのスコープは続いてるんですね。
[Go言語]structにinterfaceを埋め込んで，動的に入れ替えるパターン


正直，何に使えるのよくわかりませんが，以下のようにすると動的に`interface`の実装方法を変更できることに気づきました．

`struct`の匿名フィールド（埋め込み）として，`interface`を設定すると，その`struct`も埋め込んだ`interface`を実装していることになります．埋め込んだ`interface`は匿名フィールドなので，型名でアクセスして入れ替えることができます．

以下の例では，`fmt.Stringer`インタフェースの実装を動的に変更しています．

* [Go Playgroundで実行する](http://play.golang.org/p/11dB5GrT8m)

```
package main

import (
	"fmt"
	"strings"
)

type StringerFunc func() string

func (sf StringerFunc) String() string {
	return sf()
}

type Person struct {
	fmt.Stringer
	FirstName string
	LastName  string
	Age       int
}

func NewPerson(firstName, lastName string, age int) (p *Person) {
	p = &Person{
		nil,
		firstName,
		lastName,
		age,
	}

	p.Stringer = StringerFunc(func() string {
		return fmt.Sprintf("%s %s (%d)", p.FirstName, p.LastName, p.Age)
	})

	return
}

func (p *Person) SetStringer(sf func(p *Person) string) {
	p.Stringer = StringerFunc(func() string {
		return sf(p)
	})
}

func main() {
	p := NewPerson("Taro", "Yamada", 20)
	fmt.Println(p)
	p.SetStringer(func(p *Person) string {
		return fmt.Sprintf("%s, %s (%d)", strings.ToUpper(p.LastName), p.FirstName, p.Age)
	})
	fmt.Println(p)
}

```

上記のプログラムを実行すると，以下のような結果になります．

```
Taro Yamada (20)
YAMADA, Taro (20)
```

なんか面白いことに使えそうですが，今のところ思いつきませんでした．
なにか思いついた方はぜひ教えて下さい．
Elastic Beanstalkのdeploy時にswaponを有効にする

EC2インスタンスはデフォルトではswaponが無効でt1.microだとdeployスクリプトの実行時oomで落ちることがあったのでswaponを組み込んでみることにした。
.ebextensions/01_swapon.configにswapon設定を書く。

```yaml
commands:
  01_swapon:
    command: |
      SWAPFILENAME=/swap.img
      test -e $SWAPFILENAME && exit 0
      MEMSIZE=`cat /proc/meminfo | grep MemTotal | awk '{print $2}'`
      if [ $MEMSIZE -lt 2097152 ]; then
        SIZE=$((MEMSIZE * 2))k
      elif [ $MEMSIZE -lt 8388608 ]; then
        SIZE=${MEMSIZE}k
      elif [ $MEMSIZE -lt 67108864 ]; then
        SIZE=$((MEMSIZE / 2))k
      else
        SIZE=4194304k
      fi
      fallocate -l $SIZE $SWAPFILENAME && mkswap $SWAPFILENAME && chmod 0600 $SWAPFILENAME && swapon $SWAPFILENAME
```
Ionic Frameworkの導入

Cordova + Angularを組み合わせたフレームワーク[ionic](http://ionicframework.com/)を触ってみました。
私が無学だからかもしれませんが、　[yeoman](http://yeoman.io/)を使ってAngular用のテンプレートを作った後、Cordovaの環境を組み合わせて実行するのは、そこそこ面倒な作業でしたが、　ionicがあれば、一瞬で環境が構築できてしまいます。
ヘルプの通りですが導入方法です。

* npmが必要なのでnodeを入れます。まだなら　nodebrewなどがいいのかな。最近だと。
* npm install します。

```shell-session:
$ npm install -g cordova ionic
```

* テンプレートを作ります。blank, tabs, sidemenuが選べますが、経験的には、tabsかsidemenuがいいと思います。blankだとionicのプログラミング作法がわかりにくいです。ここではtabsにしてみます。
以下のコマンドでmyAppの下にソースコードが展開されます。

```shell-session:
$ ionic start myApp tabs 
```

* www/index.htmlをブラウザで実行するとアプリが動きます。

* androidやiosで動かしたい場合はビルドが必要です。cordovaと同じですが、コマンドがionicに変わっています。内部的にはscss等の
ionic独自のリソースなどを一緒にビルドしてくれるのだと思います。

```shell-session:Android
$ ionic platform add android
$ ionic build android
```

* 公式サイトでは、androidの場合この後、
ionic emulate android
することになっていますが、止めることを強くお勧めします。
是非、[Genymotion](http://www.genymotion.com/)等のVMを使いましょう。インストールと環境準備は簡単ですので、ググってください。AndroidSDKとtoolsのインストールが必要です。

* Android VMを起動すると、deviceとして認識されますので、

```shell-session:Android
$ ionic run android
```
で終了です。

準備はとても簡単です。個人的には、ionicコマンドとcordobaコマンドの使い分けをする局面が出てくると、ちょっと気持ち悪かったですが、なれると平気になりました。
また、公式サイトの[example](http://ionicframework.com/examples/)からリンクが貼られているsampleは、どれも古いバージョンのionicで作られているようで、上記のテンプレートと照らし合わせると混乱します。現状にアップデートしてもらえると、導入が持った簡単になるなと思いました。
MySQLインストール時にやること（DBとユーザーの作成等）

WordPress用にMySQLを使いたくなったので、初期設定をやってみました。

# 対象
* MySQLのインストールが完了している事
* MySQLをこれから使い始める方

# rootパスワードの変更

## 簡単な方法（CentOSで確認済み）
* mysqladminでrootパスワードの変更する
* rootでログインできるかどうか確認する

```bash
$ mysqladmin -u root password your_password
$ mysql -u root -p
```

## 他の方法（XAMPP for Windowsで確認済み）
* mysqladminを使わずにrootパスワードを変更する

```bash
$ mysql -u root -p
```

```sql

USE mysql;
-- Hostを無視して更新したい場合はhost='localhost' は消しておけばよさそう
UPDATE user SET password=PASSWORD('your_password')  WHERE host='localhost' AND user='root';
FLUSH PRIVILEGES;
```

# データベースと専用ユーザーを一つずつ作成

* mysqlコマンドで操作を開始する

```bash
$ mysql -u root -p
```

```sql
-- 新しくデータベースを作成する（下に2パターンを記載）
-- （A）デフォルトの設定で作成
CREATE DATABASE database_name;
-- （B）Database Character SetとCollationを指定して作成 ※https://dev.mysql.com/doc/refman/8.0/en/charset-database.html
CREATE DATABASE database_name DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

-- 新しくユーザーを作成する
CREATE USER 'your_name'@'localhost' IDENTIFIED BY 'your_password';

-- 作成したユーザーに作成したデータベースの操作権限を付与する
GRANT ALL PRIVILEGES ON database_name.* TO 'your_name'@'localhost';

-- 設定を反映する
FLUSH PRIVILEGES;
```

# MySQLの状態確認に使用するコマンド

```bash
$ mysql -u root -p
```

```sql
-- データベース一覧を表示する
SHOW DATABASES;

-- ユーザー一覧を表示する
SELECT host, user, password FROM mysql.user;
```

# MySQLの自動起動をONにする

`chkconfig --list mysqld`で設定を確認、`sudo chkconfig mysqld on`でMySQLの自動起動を有効にする。

以下、実行結果（私の場合）

```bash
$ chkconfig --list mysqld
mysqld         	0:off	1:off	2:off	3:off	4:off	5:off	6:off
$ sudo chkconfig mysqld on
$ chkconfig --list mysqld
mysqld         	0:off	1:off	2:on	3:on	4:on	5:on	6:off
```

# MySQLを起動（CentOSの場合）

```bash
/sbin/service mysqld start
```

# 参考URL

 * [Installing MySQL Server on CentOS](http://www.rackspace.com/knowledge_center/article/installing-mysql-server-on-centos)

# 終わりに

MySQLの初期設定はここを見ればOK！というページにしたいと思うので、以降も勉強しながら更新してしていきたいと思います。ご指摘等あればコメントいただけると幸いです！
RSpecでテストDBに突っ込んだデータを消したい

[RailsTutorial](http://railstutorial.jp/)に従ってRSpecを使って
`authenticate(@user.password)`
を試そうとしたところ、突っ込んだ前のデータと合わずにテスト失敗。。。

Database Cleanerを使えばいいらしいっす。
(追加するとテストを実行する度にテストデータが消去される。)


下記のように各ファイルを編集。

```lang:Gemfile
group :development,:test do
  gem 'database_cleaner'
end
```

```spec/spec_helper.rb
require 'database_cleaner'
   
RSpec.configure do |config|
  
  # 中略 
  config.before(:suite) do
    DatabaseCleaner.strategy = :truncation
  end
 
  config.before(:each) do
    DatabaseCleaner.start
  end
 
  config.after(:each) do
    DatabaseCleaner.clean
  end
end
```

これで前のテストでのデータが消去されて、テストが通りました。
めでたしめでたし。

※各テストのbefore(:each)で作成したテストデータは消去されるが、before(:all)で作成したテストデータは消去されないらしい。

参照：http://dev.classmethod.jp/server-side/ruby-on-rails/ruby-on-rails_database-cleaner_data_erase/
Chromeで、タブをまとめる拡張機能 OneTab が超絶便利だった件

# タブが沢山でござる
調べ物関係で気が付くとタブが沢山ってなりますよね。あと気になった記事とかあるけど、ブックマークマークに入れる手間位ではないといったページなど、ページを閉じてしまってから「あー、ページを二度と探せない」という悪夢になることありません？ｗ
つか、わたしは常に↓↓↓っ感じで、常にタブが３～４０個開いていたりするのでたまに悪夢をみます。
![onetab_1.png](https://qiita-image-store.s3.amazonaws.com/0/44540/06dec9f2-e4b8-b830-fbec-3e691117d897.png)

そして Chrome がクラッシュしたりして二度と探せないという罠ｗ
※細かく言うと履歴から探し出せますけどね。

# OneTab って？
で、まあ OneTab 使うとなにが便利なのかというと「Chrome ウインドウに表示されているタブ全部」を一時保存してくれるのです。これだけなのですが便利でしょう？便利でしょう？あれ私だけ？
でも [OneTab](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall) を入れましょう。絶対に便利です。

とりあえず OneTab をインストール、OneTab を使う契機は「電源を落とすから」「区切りがいいから」などそういうタイミングで使えばいいと思います。そして OneTab を使うと下記のように一時保存されます。
![onetab_2.png](https://qiita-image-store.s3.amazonaws.com/0/44540/ab344c78-f223-b972-0bd5-a86dfd9eeddc.png)

> [開きまくったタブをまとめるChrome拡張機能『OneTab』で調べ物はずっと効率良くなる](http://www.lifehacker.jp/2013/10/131027chrome_onetab.html)

# 簡単な使い方
英語のメニューですが使い方は簡単です。

| メニュー | 使用方法 |
:-----------:+:-------------
|Restore all|OneTabで保存したタブ情報を展開します（lock してないと 展開した時点でタブが消えます）。
|Share as web page|OneTabで保存したタブ情報をシェアします。
|Lock this tab group|タブ情報をロックします。
|Name This tab group|タブ情報を編集します。

# 便利に使う
私の使い方としては、OneTab で一時保存後に、「Name This tab group」でタブ情報を編集、「Lock this tab group」でタブ情報をロックし「Share as web page」で作成された情報を Evernote で管理する。といった使い方をしています。
結果的なイメージ。ちなみに[シェア](http://www.one-tab.com/page/ZNYt8E53SjKHna8yayvaJw)するとこんな感じです。

![onetab_3.png](https://qiita-image-store.s3.amazonaws.com/0/44540/dbd621f4-3354-e152-e6ca-be41ee306d48.png)

# 便利だけどセキュリティに気つけること
社内で使用する場合は、OneTabで保存したタブ情報をシェアするときにページ情報（URLだけだけど）が外部サイトに通知されてしまうのでセキュリティ的によろしくありません。
※ハッシュ化されるので外部から見つけ出されることは無いと思うけどｗ

# とはいっても便利！
これは便利でした。是非インストールしてみることをお勧めします～
Aipo(7.0.2)のインストール方法


#Aipoのインストール方法

##環境

OS: CentOS 6.5 64bit版 (Minimal)
Aipo Version: 7.0.2

##必要パッケージのインストール

```
yum install make gcc readline-devel zlib-devel nmap wget
```

##Aipoのダウンロードと解凍

```
cd /usr/local/src

wget https://aipo.googlecode.com/files/aipo7020ja_linux64.tar.gz

tar -zxvf aipo7020ja_linux64.tar.gz
tar -zxvf aipo7020ja_linux/aipo7020.tar.gz
```

##インストールスクリプトを実行

```
cd /usr/local/src/aipo/bin
sh installer.sh
```

##起動

```
cd /usr/local/src/aipo/bin
./startup.sh
```

##停止

```
cd /usr/local/src/aipo/bin
./shutdown.sh
```

##Aipoへのアクセス

ブラウザで「http://172.16.97.130/aipo/」へアクセスします。

> 172.16.97.130 の部分はご自身の環境に読み替えて下さい。
> また、DNSでドメインに割り当てている場合はドメイン名でアクセスしてください。
> 例）http://sample.com/aipo/

##ログイン

管理者ID: admin （デフォルト）
管理者パスワード: admin （デフォルト）

でログインします。
Chromeをvimライクに使えるようにするvimium

# vimiumとは

http://vimium.github.io/

vimキーバインドでGoogle Chromeを使えるようにできるプラグイン
具体的には，以下のような処理をvimキーバインドでできちゃう！

- ページ操作
    - ページのスクロール（上下）
    - リンクのクリック
    - ページを戻る/進む
    - 文字列検索
- タブ操作
    - 新規タブ追加
    - タブの削除
    - タブの移動
- その他の操作
    - ブックマーク検索

# vimiumのインストール

chrome web storeのvimiumのページへ行きインストールを選択する．

https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb

# vimiumの設定

プラグインをインストールすると，早速vimiumが使用可能になるが，デフォルトのキーマッピングをかえて使いやすくする．

インストール後，検索窓の右隣に以下のようなボタンが追加されている．
ボタンを押すと以下のようなメニューが表示されるので，Optionsをクリックする．

![スクリーンショット 2014-08-02 19.16.30.png](https://qiita-image-store.s3.amazonaws.com/0/43202/26289963-84b1-ee95-2521-bb3de3b4ebad.png)

すると，vimium optionsを編集できるページに移動する．キーのマッピングの編集のため，"Show advanced options"を選択する．

![スクリーンショット 2014-08-02 19.19.01.png](https://qiita-image-store.s3.amazonaws.com/0/43202/5875be96-8780-4725-8d02-18d4a3d1ccab.png)

Custome key mappingの入力ボックスに以下のように設定する．


![スクリーンショット 2014-08-02 19.22.29.png](https://qiita-image-store.s3.amazonaws.com/0/43202/c0f244d5-a303-8d90-85e2-903730ada09e.png)

コピペ用

```
map h goBack
map l goForward
map H previousTab
map L nextTab
map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab
```

設定が完了したらページの最下部にある"Save Options"をクリックする．

![スクリーンショット 2014-08-02 19.28.15.png](https://qiita-image-store.s3.amazonaws.com/0/43202/7f4e00bf-a38e-36ea-d4fe-4415abe91d4c.png)

# vimiumを使ってみる

設定が完了したら早速使ってみましょう！
任意のページ上で，"i"と入力してみます．（上の設定を行っていなければ"F"などでもOK）

下のようにリンクに文字がマッピングされます．行きたいリンクの上に表示されている文字を入力すると，リンク先に移動できます！
![スクリーンショット 2014-08-02 19.36.56.png](https://qiita-image-store.s3.amazonaws.com/0/43202/22b67c3e-f566-6c3d-6d30-9df3b10a9123.png)

その他，"k"でスクロール(上)，"j"でスクロール(下)などのvimおなじみの動作もできますし，"b"でブックマーク検索などもできます！

vimiumでできる操作とキーのマッピング（設定編集後）

|操作           |キー            |
|:-------------|---------------:|
|ページのスクロール(上) | k|
|ページのスクロール(下) | j|
|ページを戻る| h|
|ページを進む| l|
|リンクの検索/クリック| i|
|リンクの検索/クリック(新規タブ) | I, F|
|新規タブ追加| t|
|タブ削除| x|
|タブの移動(左) | H|
|タブの移動(右) | L|
|ブックマーク検索|b|


# 参考にしたサイト
http://vimium.github.io/
幅やマージンが比率指定されている要素の操作

今回も WordPress プラグイン開発からの JavaScript ネタです。

## 問題の所在

レスポンシブ Web デザインを採用しているページの CSS を確認すると以下のように width や margin がパーセント表示で比率指定されている要素を見つけることができます。

```css:CSSファイル
.content-sidebar {
  margin-left: -29.04761904%;
  width: 29.04761904%;
}
```

私はある要素をスクロール時に固定する (position = fixed とする) 効果を実装しようとしていました。ここで一つ問題となったのが、width が %指定のままで position = fixed にして位置を固定すると比率の基準となる要素が変わるため幅が変化してしまうことです。position = static であれば親要素に対しての比率として計算されますが、fixed に変えると document に対しての比率となってしまうのです。

## 値を固定してみる

これを避けるには一度取得した値を再度設定しピクセル値で固定することです。

```js
var w = $('#sidebvar').width();
$('#sidebar').width(w);
```

これで position = fixed の場合もレイアウトが崩れなくてすみます。ブラウザがリサイズされるまでは...。リサイズ後の幅はどうやって計算すればよいのでしょう？

## リサイズ後の適切な幅を得るには

リサイズ後の値を得るためには計算し直しが必要です。しかし、width() が返すのはピクセル値で、調べた限りでは CSS ファイルに記述された比率を簡単に取得する方法はなさそうです。私は安易に CSS ファイルに書かれた比率をパラメータとしてユーザーに入力させて保持していましたが、ある日そんなことをしなくても処理できる方法を見つけました！

わかってしまえば簡単なのですが、下のコードのように一旦 width をクリアすることで解決します。すると CSS ファイルに記述された %値に従って幅が計算されるのです。[jQuery API リファレンス](http://api.jquery.com/css/#css2)をよく読むと書いてあるのですが、空文字列を渡すとこれまでに API 経由で設定したスタイル指定をクリアし CSS ファイルの記述通りに振る舞うようになります。

```js
$('#sidebar').css('width', '');
```

まとめて書くとリサイズ時のハンドラでは以下の様に width 一旦クリアし再度取得したピクセル値で設定することになります。

```js
$('#sidebar').css('width', '');
w = $('#sidebvar').width();
$('#sidebar').width(w);
```

きちんとコメントを残さないと何をやっているかわからなくなりそうです。

## いつもの宣伝！

というわけでこれは [Standard Widget Extension](http://hetarena.com/standard-widget-extensions) という WordPress プラグインを書くときに使ったテクニックです。ブログの方には[その他の細々した JavaScript/jQuery テクニックも合わせてまとめておきましたので、興味があればどうぞ。](http://hetarena.com/archives/2609)

本件については以下の記事を参考とさせていただきました。

* [JavaScriptで追加したスタイル指定を削除して元のCSSの指定に戻す方法](http://sutara79.hatenablog.com/entry/2014/07/08/000609)
第24回オフラインリアルタイムどう書くの問題をRubyで解く

問題はこちら
http://nabetani.sakura.ne.jp/hena/ord24eliseq/

```rb
MAX = 2000
def solve(q)
  ss = (1..MAX).map{|e| e**2}
  cs = (1..MAX).map{|e| e**3}
  ns = (1..MAX).to_a
  q.chars.each{|c|
    case c
    when ('2'..'9')
      n = c.to_i
      i = ns.size - 1
      while i > 0
        ns.delete_at(i) if (i + 1) % n == 0
        i-=1
      end
    when 'h'
      ns = ns.drop(100)
    else
      to_del = []
      ns.each_with_index{|e, i|
        case c
        when 's'
          to_del << ns[i-1] if ss.include?(e)
        when 'S'
          to_del << ns[i+1] if ss.include?(e)
        when 'c'
          to_del << ns[i-1] if cs.include?(e)
        when 'C'
          to_del << ns[i+1] if cs.include?(e)
        end
      }
      ns = ns.select{|e| !to_del.include?(e)}
    end
  }
  ns.take(10)*','
end

DATA.readlines.each do |line|
  no,q,a = line.chop.split(/\s+/)
  ans = solve(q)
  print no + "\t" + ans
  puts ans == a ? ' o' : ' x'
end
__END__
0	ss6cc24S	1,9,21,30,33,37,42,44,49,56
1	h	101,102,103,104,105,106,107,108,109,110
2	hh	201,202,203,204,205,206,207,208,209,210
3	hhh	301,302,303,304,305,306,307,308,309,310
4	2	1,3,5,7,9,11,13,15,17,19
5	22	1,5,9,13,17,21,25,29,33,37
6	222	1,9,17,25,33,41,49,57,65,73
7	3	1,2,4,5,7,8,10,11,13,14
8	33	1,2,5,7,10,11,14,16,19,20
9	333	1,2,7,10,14,16,20,23,28,29
10	s	1,2,4,5,6,7,9,10,11,12
11	ss	1,4,5,6,9,10,11,12,13,16
12	sss	4,5,9,10,11,12,16,17,18,19
13	S	1,3,4,6,7,8,9,11,12,13
14	SS	1,4,7,8,9,12,13,14,15,16
15	SSS	1,8,9,13,14,15,16,20,21,22
16	c	1,2,3,4,5,6,8,9,10,11
17	cc	1,2,3,4,5,8,9,10,11,12
18	ccc	1,2,3,4,8,9,10,11,12,13
19	C	1,3,4,5,6,7,8,10,11,12
20	CC	1,4,5,6,7,8,11,12,13,14
21	CCC	1,5,6,7,8,12,13,14,15,16
22	23	1,3,7,9,13,15,19,21,25,27
23	32	1,4,7,10,13,16,19,22,25,28
24	2h	201,203,205,207,209,211,213,215,217,219
25	h2	101,103,105,107,109,111,113,115,117,119
26	sC	1,4,5,6,7,9,10,11,12,13
27	Cs	1,4,5,6,7,8,10,11,12,13
28	s468	1,2,4,6,7,11,12,16,17,20
29	S468	1,3,4,7,8,12,13,16,18,21
30	cc579	1,2,3,4,8,9,11,13,15,16
31	CC579	1,4,5,6,8,11,13,15,17,18
32	85	1,2,3,4,6,7,9,10,12,13
33	sh	110,111,112,113,114,115,116,117,118,119
34	94h	150,151,154,155,156,158,159,160,163,164
35	h9c8	101,102,103,104,105,106,107,110,111,112
36	Cc3s	1,3,5,6,10,11,13,16,17,19
37	cs4h6	149,150,152,153,154,157,158,160,161,162
38	84523c	1,3,11,15,23,26,34,38,46,49
39	54C78hS	228,231,232,233,236,241,242,243,246,247
40	65h7ccs	151,152,153,154,157,158,160,163,164,165
41	c95hSc2C	145,147,151,153,156,159,162,164,168,171
42	c5h3Ss794	130,131,133,137,138,142,148,150,152,157
43	7ShscC846	129,130,131,134,135,139,141,142,146,148
44	cshSCCS7ch	253,254,256,259,260,261,263,264,265,266
45	hhC7849Ss6C	201,202,203,205,206,211,212,216,220,225
46	hhsc3C987Ccs	201,202,204,205,207,208,214,217,218,220
47	SC7S8hc59ss2	162,169,174,178,182,185,188,194,199,203
48	s7S6c35C9CShc	367,371,377,379,380,385,387,388,392,395
49	4scC3hh982Cc5s	422,426,430,434,447,451,459,463,471,479
50	23h465Ssc9CchC	1027,1033,1045,1047,1057,1069,1071,1075,1081,1093
```
UILabel の textColor をアニメーションさせる

UILabel とかのテキストの色 `textColor` をアニメーションでふわっと代えたい場合、`transitionWithView:duration:options:animations:` を使うのが簡単。

```
[UIView transitionWithView:self.myLabel
                  duration:0.5
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    self.myLabel.textColor = [UIColor whiteColor];
                } completion:^(BOOL finished) {
                }];
```

すごい今更感あるTipsですが、ググると

http://stackoverflow.com/questions/3944416/ipad-animate-uilabels-color-changing

こういうのが出てきて、上記のシンプルな方法がすぐに見つからなかったので備忘録として。
PHPで手っ取り早くパスワードを自動生成する方法

いちいちモジュールを入れたりするの面倒なので、手っ取り早い方法。

```php:mkpasswd.php
<?php
function genPasswd($intLength = 8)
{
	if (8 > $intLength) {
		$intLength = 8;
	}
	$strCommand = "mkpasswd";
	$strCommand .= " -l {$intLength}";
	$strCommand .= " -d 1";
	$strCommand .= " -c 1";
	$strCommand .= " -C 1";
	$strCommand .= " -s 1";
	return exec(escapeshellcmd($strCommand));
}
?>
```

expectモジュールが必須です。
`yum -y install expect`
rspec すると `require': cannot load such file -- teamcity/spec/runner/formatter/teamcity/formatter 

ターミナルなどRubymine外でspringサーバを起動していると失敗するそうです。
jetbrainsのチームウェア製品との連携モジュールを読み込もうとするも、
IDEが干渉しないところでspringサーバを起動させているとファイルが指定されないからとのこと。
springサーバを止めてからrspecするといいそうです。

```shell-session
$ spring stop
```

しかし、stopしようとしても、ときどき `spring is not running.` と表示される場合があります。
その場合は

```shell-session
$ bin/spring stop
```

とすると、目的のspringサーバを停止することができます。
第24回オフラインリアルタイムどう書くの問題


オフラインでリアルタイムに「どう書く」をやるイベント( http://yhpg.doorkeeper.jp/events/13159 )を行っています。

問題は「多段階選抜」という名前で、詳細は
http://nabetani.sakura.ne.jp/hena/ord24eliseq/
です。

出題者の気分としては、問題を読み始めてから解けるまで1時間ぐらいあれば足りるかな、と思ってますが、ひとそれぞれで。

実装ができた方はこちらのコメント欄からリンクを張っていただくと見つけやすくて助かります。

似たような問題をもっと解きたいという方は、
https://nabetani.hatenadiary.com/entry/yhpg_list
に過去問リンク集がありますので、そちらをご覧になると良いと思います。

【宣伝】
CodeIQ でも問題出しています。
https://codeiq.jp/ace/nabetani_takenori/q1012
こちらもよろしく。
よくあるコンポーネントの設計・実装パターン - ボタン編

## ボタン
button 要素でも、a 要素でも、div 要素でも、ボタンのコンポーネントとしての形を持たせることが出来るので、CSS のセレクタに要素を含め無いようにしましょう！

```css
/* 好ましくない例 */
a.button,
button.button {
	display: inline-block;
	border: 1px solid #000;
	padding: 0.3em 1em;
	background-color: #eee;
	cursor: pointer;
}
```

### button 要素
ブラウザ毎でデフォルトでスタイルを持っているものについては、`reset.css` や `normalize.css` を当てても初期化しません。

1つの方法として、プロジェクト毎の冒頭、もしくは SMACSS で言うところの  **Base カテゴリ** として、button 要素のデフォルトのスタイルを初期化します！

button 要素のセレクタに対して初期化を行うとユーザーエージェント独自のスタイルが使えなくなってしまうなど影響範囲が広いので、 **ボタンコンポーネントに対してスタイルの初期化を行う記述を追加する方法** をとります！

```css
/* button 要素そのものには何もしない */
button {}

/* ボタンコンポーネントに対してスタイルの初期化を行う */
.button {
	-webkit-appearance: none; /* 追加 */
	   -moz-appearance: none; /* 追加 */
	        appearance: none; /* 追加 */
	display: inline-block;
	border: 1px solid #000;
	margin: 0; /* 追加 */
	padding: 0.3em 1em;
	background-color: #eee;
	font-size: inherit; /* 追加 */
	cursor: pointer;
}
```

### a 要素
デフォルトで下線やリンク色が設定されているので、デフォルトのスタイルを初期化します！
botton 要素同様、a 要素のセレクタに対して初期化を行うと様々なところで要素が使われている場合に影響範囲が広いので、上記スタイルの記述と合わせて **ボタンコンポーネントに対してスタイルの初期化を行う** 記述を追加します。

```css
/* ボタンコンポーネントに対してスタイルの初期化を行う */
.button {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	display: inline-block;
	border: 1px solid #000;
	margin: 0;
	padding: 0.3em 1em;
	background-color: #eee;
	text-decoration: none; /* 追加 */
	font-size: inherit;
	color: inherit; /* 追加 */
	cursor: pointer;
}
```

### 固定の幅を持たせない
ボーダーや背景色、`padding` の値はベースとなるスタイルを持てますが、幅については状況によって異なるため定義はしません。

例では、文字数によって幅が変わるようにしていますが **デザイン設計上必ず固有の幅や最低限の幅を持つ** ということであればベースとなるスタイルに含めてもよいかもしれません。

ボタンに固有の幅を持たせることが必要な状況だとしたら、対応方法の1つとして **コンポーネントの Modifier を使って拡張する方法** があります。

```css
.btn {
 …
}
.btn--short {
	width: 200px;
}
.btn--long {
	width: 480px;
}
.btn--full {
	width: 100%;
}
```

しかしこれらは、バリエーションが増えた場合に命名に悩み続けることになります。この場合、 **BEM でいうところの Block の Element として持たせるという方法** をとることが出来ます！

``` html
<div class="form">
	<div class="form__body">…</div>
	<div class="form__footer">
		<button class="btn button--full">ログイン</button>
	</div>
</div>

<div class="comment">
	<div class="comment__body">…</div>
	<div class="comment__footer">
		<button class="btn button--full">返信する</button>
	</div>
</div>
```

```css
.form {
 …
}
.form__footer {
	margin-left: auto;
	margin-right: auto;
	width: 200px; /* フォームにおけるボタンの幅 */
}

.comment {
	position: relative;
}
.comment__footer {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 120px;
	font-size: 14px;
}
```
vagrantでcentos7を入れてdockerを使ってみた。


## 準備(事前インストールが必要)

* vagrant
* vartual box

## Vagrantでcentos7環境構築
1. vagrantファイル配置用ディレクトリの作成と移動

    e. g. `mkdir ~/vagrant/docker_test && cd ~/vagrant/docker_test`

1. vagrantのinitを行う。boxはvagrant cloudに上がっているcentos7のboxイメージをお借りしました

    e. g. `vagrant init hfm4/centos7`

1. boxイメージの起動

    e. g. `vagrant up`

1. 起動確認とネットワークの接続確認

    e. g. `vagrant ssh`してから `ping 8.8.8.8`
         pingの結果として `64 bytes from 8.8.8.8: icmp_seq=1 ttl=63 time=49.5 ms`とか帰ってくればネットワークが外部と繋がっている(成功)

## dockerのインストール
1. 既にインストールされていないか確認 `# which docker`
     -> 無ければ `/usr/bin/which: no docker in (/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/sbin:/usr/sbin:/home/vagrant/bin)` こんな感じ
     -> 有れば `{path}`が返却される e. g. `/usr/bin/docker` 

1. 無ければ入れる。yumでのinstallを行いたい。

    1. 検索 `$ yum search docker`で `docker.x86_64`が見つかればOK

    1. install `$sudo yum install docker`

    1. インストールされた事の確認
`# which docker` で `/usr/bin/docker`が返却されればOK(pathが返却されればOK)

## dockerを使ってみる
1. versionの確認
    `# docker version`でバージョン情報を取得出来る
1. イメージの検索
    `# docker search {検索文字}` で検索出来る
     e. g. `#docker search centos7`

1. イメージの取得
    `# docker pull {イメージ名}`
    上の`# docker search {検索文字}`で取得した検索結果からお望みのイメージ名を入れればOK
    e. g. `# docker pull polinux/nginx`
1. イメージの起動
    `# docker run {イメージ名}`
    e. g. `# docker run polinux/nginx`

    起動時にオプションをつけなければそのターミナルで操作が出来なくなるので注意。
    起動後にも操作をしたい場合には
    `# docker run -i -t {イメージ名}`とする。
    e. g. `# docker run -i -t polinux/nginx`とすると起動後に`Exit shell with Ctrl-D. Detach with Ctrl-P + Ctrl-Q.`と表示され操作を続行する事が出来る(既に起動したイメージのターミナルが表示されている)
1. 起動中のdockerイメージを確認する
    `# docker ps`
    e. g.
    `CONTAINER ID        IMAGE                  COMMAND                CREATED             STATUS              PORTS               NAMES
194c7b4a6ff1        polinux/nginx:latest   /install/bootstrap.s   8 minutes ago       Up 8 minutes        443/tcp, 80/tcp     angry_davinci5`

1. dockerのイメージを終了する
    `# docker stop {イメージ名}`
    ここでのイメージ名は `# docker ps`コマンドで取得出来たNAMESを指定する必要が有るので注意
    e. g. `# docker stop angry_davinci5`

---- 
とりあえずココマデ。
Noto Sans Japanese をウェブフォントとして使うときに非デザイナが調べたこと

ウェブフォント (web font) についてあれこれ調べた備忘録です．私は，ディレクションをすることはありますが，デザイナではありません．デザイナにとっては常識の範囲だと想像します．

------ 

## Google Fonts

+ Google Fonts がウェブフォントとして提供しているのは欧文フォントのみ
  - Noto Sans Japanese は当然欧文フォントではない
  
→ Noto Sans Japanese を自前のサーバに置く必要あり


## ブラウザ間の非互換

ウェブフォントの形式は一つではなく，ブラウザごとに採用している形式が異なる．すなわち，フォント形式については非互換で，複数ブラウザをサポートしようとすると，複数のフォント形式でファイルを用意する必要があり面倒なことこの上ない．最近のほとんどのブラウザは WOFF (Web Open Font Format) をサポートしているので、これが使えればよいのだが、一部のブラウザはサポートしていない。


+ IE8 が悪い
  - EOT を用意してあげないと
+ Android (4.4 を除く) が悪い
  - 勘弁してください


## 保守的な @font-face

ブラウザ間の非互換に対応するために，WOFF を基本としながらも，IE 用に EOT を使うことで妥協した `@font-face` の例．このパターンはあまり見かけないので一般的ではないのかもしれない。

```css
@font-face {
    font-family: 'Noto Sans Japanese';
    src: local('Noto Sans Japanese'), url('http://www.example.com/NotoSansJp.woff'), url('http://www.example.com/NotoSansJp.eot');
}
```

実運用上の @font-face は weight 毎にファイルを分けているので，もうちょっと複雑なのだが，EOT/OTF 使い分けのイメージはこれで伝わるかと．

## おわりに

ひとつのお願い:

+ IE8 が早く消えて無くなりますように

Android は無かったことにする．
簡易的なキーコンフィグ機能


こちらにキーコンフィグの作り方があったので、参考にさせていただきました。
http://ch.nicovideo.jp/isemito/blomaga/ar427493

### やりたいこと
- 押したパッドの値が返ってくるようにしたい
- 連続で押していったら押した順番に返って来てほしい

なのでボタンが押されたときにコールバックするような仕組みにしたら簡単そう。

```csharp
using System;
using UnityEngine;
using System.Collections;

public class KeyConfigure : MonoBehaviour
{
    private event Action<KeyCode> keyDown;

    public void StartKeyConfigure (Action<KeyCode> onKeyDownDelgate)
    {
        keyDown += onKeyDownDelgate;
        StartCoroutine ("CheckAllKeyDown");
    }

    public void StopKeyConfigure ()
    {
        StopCoroutine ("CheckAllKeyDown");
        keyDown = null;
    }

    IEnumerator CheckAllKeyDown ()
    {
        while (true) {
            while (!Input.anyKeyDown) yield return new WaitForSeconds (0.01F);

            foreach (KeyCode code in Enum.GetValues(typeof(KeyCode))) {
                if (Input.GetKeyDown (code)) { keyDown (code); break; }
            }

            yield return new WaitForSeconds (0.01F);
        }
    }
}
```

使うときは例えばこんな感じで

```csharp
using UnityEngine;
using System.Collections;
using System.Linq;

public class GamePadManager : MonoBehaviour
{
    public KeyCode[] codes;
    private int count;

    public KeyConfigure confidure;
    // Use this for initialization
    void Start ()
    {
        confidure.StartKeyConfigure (OnKeyDown);
    }

    // Update is called once per frame
    void Update ()
    {

    }

    void OnKeyDown (KeyCode code)
    {
        if (codes.Contains (code)) {
            print ("already exists");
            return;
        }

        codes [count++] = code;
        print (code);
        if (count >= codes.Length) confidure.StopKeyConfigure ();
    }
}
```

上記のGamePadManagerを実行すると、以下のような流れになります

-  `confidure.StartKeyConfigure (OnKeyDown);` でキー入力を受け付ける状態になる
- キーを押すと `OnKeyDown (KeyCode code)` が呼ばれて、codesに押したキーが入っていく(重複したら入れない)
- キーの数が配列の長さを超えたら `confidure.StopKeyConfigure ();` でキー入力の受付を終了する

![](http://gifzo.net/BV7xsRxD8tR.gif)

これでゲームでよくある「上から順番にキーを設定していく」画面は作れそう。

### 課題
`KeyCode` 列挙体にはスティックの値は設定されていない。
つまりゲームパッドの十字キーとかスティックの入力はこの実装では取ることができない。
こちらは `Input.GetAxis` でしか取れないっぽいので、InputManagerであらかじめ用意しておくとかそんなんしかなさそう。
いい方法ご存知のから教えてください。
TypeScript で Chrome Extension を開発する際の環境準備


## IDE・エディタ
手慣れたエディタか、TypeScript をサポートしている WebStorm が便利。


## TypeScript をインストールする

```
npm install -g typescript
```

## tsd と、必要となる d.ts をインストールする

TypeScript の開発で外部ライブラリを利用する場合、型定義ファイル (d.ts) が必要となる。
型定義ファイルは https://github.com/DefinitelyTyped/tsd で管理されているが、
1つずつ落としてくるのも面倒なので、管理ツールである tsd をインストールする。

```
npm install -g tsd
```

Chrome Extension 関連の d.ts は chrome という名称で登録されている。
以下のコマンドでインストール可能。

```
tsd query chrome --resolve --overwrite --save --action install
```

インストールに成功すると、

- tsd.json (tsd 設定ファイル)
- typings (d.ts 配置ディレクトリ)

が作成される。

その他、開発時に必要なものが出てきたら都度インストールしていけば良い。

## Bower をインストールする

Bower を利用することで、Extension で利用するCSS/JSライブラリを簡単にインストール・配置することが出来る。
開発に必須ではないが、使ったほうが楽。

```
npm install -g bower
```

bower init で設定ファイルを生成し、必要なライブラリをインストールしていけば良い。

```
$ bower init
[?] name: hoge
[?] version: 0.0.0
[?] description:
[?] main file:
...
```

bower install で配置されるディレクトリ変更したい場合は、.bowerrc を作成しておく。

```
{
  "directory": "src/bower_components"
}
```

## Grunt をインストールする

TypeScript のコンパイル、crx ファイルのビルドのため、Grunt をインストールする。

```
npm install -g grunt-cli
```

package.json を用意して、npm install する。

```
{
  "name": "xxx",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "node": ">=0.10.8"
  },
  "dependencies": {},
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-crx": "^0.3.3",
    "grunt-typescript": "^0.3.8"
  }
}
```

Gruntfile.js を用意する。
開発時は grunt debug、ビルド時は grunt を実行する。

```
module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    manifest: grunt.file.readJSON('src/manifest.json'),
    watch: {
      scripts: {
        files: ['src/**/*.ts', 'src/**/*.html'],
        tasks: ['typescript']
      }
    },
    typescript: {
      base: {
        src: ['src/scripts/**.ts'],
        dest: 'src/scripts/',
        options: {
          module: 'commonjs',
          target: 'es5',
          basePath: 'src/scripts'
        }
      }
    },
    crx: {
      production: {
        'src': 'src/',
        'dest': '<%= pkg.name %>.crx',
        'privateKey': '<%= pkg.name %>.pem'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-typescript');
  grunt.loadNpmTasks('grunt-crx');

  grunt.registerTask('default', [
    'typescript',
    'crx'
  ]);

  grunt.registerTask('debug', [
    'typescript',
    'watch'
  ]);

};

```

## ディレクトリ構成例

本投稿に記載されているサンプルは、以下のディレクトリ構成を前提とした設定例となっている。

```
├── src
│   ├── _locales/...
│   ├── bower_components/...
│   ├── css/...
│   ├── images/...
│   ├── scripts/...
│   ├── manifest.json
│   └── xxx.html
│
├── typings/...
├── .bowerrc
├── bower.json
├── Gruntfile.js
├── package.json
└── tsd.json
```
rbenvでrubyのバージョンを複数インストールした場合のglobal設定

```
rbenv install (ruby ver)
```

で新しいrubyのバージョンをインストールした場合、複数rubyのバージョンがあるので、どのバージョンを利用するのか選択する必要があるので

```
rbenv global (ruby ver)
```

でどのバージョンをグローバルで利用するのか設定できる。
DHT11 + Raspberry Pi + Node.jsで温湿度センサーを試す


温湿度センサーを試したくて300円で買えるDHT11を使ってみた。

node-dht-sensorというライブラリがあったのでこれを使ってみる。
https://github.com/momenso/node-dht-sensor

その前にbcm2835というライブラリが必要とのこと。
手順はREADMEの通りだ。
http://www.airspayce.com/mikem/bcm2835/

まずはこいつをraspbianにインストール。このときのバージョンは1.36。

```shell
curl -O http://www.airspayce.com/mikem/bcm2835/bcm2835-1.36.tar.gz
tar zxvf bcm2835-1.36.tar.gz
cd bcm2835-1.36
./configure
make
sudo make check
sudo make install
```

そしたらnode-dht-sensorをインストール

```shell
npm install node-dht-sensor
```


ネットで探した情報を元にRaspberry PiとDHT11を接続してみる。
こんな感じでいいのかな？？なにぶん初心者なもので。。
3.3v。抵抗は10kΩを使用。
![IMG_0793.jpg](https://qiita-image-store.s3.amazonaws.com/0/45065/d437cd75-ec23-e47f-646f-d86bed7670b1.jpeg "IMG_0793.jpg")

ソースはサンプルをコピペ。
今回使用したのはDHT22ではなくDHT11なのでセンサータイプを11に変更。
GPIOピンは４番を使ったのでそのまま。

```javascript
var sensorLib = require('node-dht-sensor');

var sensor = {
  initialize: function() {
    return sensorLib.initialize(11, 4);
  },
  read: function() {
    var readout = sensorLib.read();
    console.log('Temperature: '+readout.temperature.toFixed(2)+'C, humidity: '+readout.humidity.toFixed(2)+'%');
    setTimeout(function() {
      sensor.read();
    }, 1500);
  }
};

if (sensor.initialize()) {
  sensor.read();
} else {
  console.warn('Failed to initialize sensor');
}
```

アドミン権限で実行。結果は以下の通り。
時々取りこぼしがあるな。。

```
Temperature: 31.00C, humidity: 42.00%
Temperature: 31.00C, humidity: 42.00%
Temperature: 0.00C, humidity: 0.00%
Temperature: 31.00C, humidity: 42.00%
Temperature: 0.00C, humidity: 0.00%
Temperature: 31.00C, humidity: 40.00%
Temperature: 31.00C, humidity: 42.00%
Temperature: 31.00C, humidity: 41.00%
```

ウチの温室時計とはちょっとずれてるかな。。
温度28度、湿度54%

ま、安く手軽に作れたから良しとしよう！
boot2docker memo


Boot2docker memo

# 参考

http://qiita.com/jacoyutorius/items/75a1a0995989969925e2
https://ochronus.com/docker-primer-django/
https://docs.docker.com/reference/commandline/cli/


# IP Network

画像を作るのがだるいと思ってAAでやったら余計だるかったでござる、の巻

```aa

+- Network +
| *        |
+----------+
      ^
      |
      V
+- Machine -----------------+
| 192.168..                 |
| +--- VM Net --+           |
| | 10.0.2.2    |           |
| +-------------+           |
|     ^                     |
|     |                     |
|     V                     |
| +-- Boot2Docker Machine + |
| | 172.17.42.1           | |
| +-----------------------+ |
|     ^                     |
|     |                     |
|     V                     |
| +- Docker Container +     |
| | 172.17.0.16/16    |     |
| +-------------------+     |
|                           |
+---------------------------+ 

```

# Mac/Windows run docker

using http://boot2docker.io


インストールして、はじめにする事

```shell
> boot2docker init
> boot2docker up 
```

慣れてる CentOS でやるのでこんな感じに。

```shell
> docker pull centos
```

なお `boot2docker up` は VM を立ち上げてるので、マシン再起動したらコマンドの実行が必要になる。

# Mac で docker コマンドを動かすには？

`boot2docker ssh` で入らなくてすむ方法。

1. bash/zsh とかのファイルに一行、Docker の環境変数を入れる

  `export DOCKER_HOST='tcp://localhost:2375/'`
7章ユーザ登録まで

http://railstutorial.jp/chapters/sign-up?version=4.0#sec-signup_failure
ここをやっている


http://localhost:3000/users
にアクセス
`The action 'index' could not be found for UsersController`
と表示された

controlerにindexがないってこと？
controllers/users_controller.rb
に、
`def index
  end　`
を追加

再度http://localhost:3000/users　
にアクセス

`undefined local variable or method `index' for UsersController:Class


![スクリーンショット 2014-08-02 16.21.19.png](https://qiita-image-store.s3.amazonaws.com/0/41987/6df93256-23e2-1b24-6a13-fc74975fddc1.png)


そのまま、成功するverをつくってみようとしたけど、やっぱりRouting errorがでた

`$ bundle exec rspec spec/requests/user_pages_spec.rb \
> -e "signup with valid information"
No DRb server is running. Running in local process instead ...
Run options: include {:full_description=>/signup\ with\ valid\ information/}
F

Failures:

  1) User pages signup with valid information should create a user
     Failure/Error: before { visit signup_path }
     ActionController::RoutingError:
       undefined local variable or method `index' for UsersController:Class
     # ./app/controllers/users_controller.rb:3:in `<class:UsersController>'
     # ./app/controllers/users_controller.rb:1:in `<top (required)>'
     # ./spec/requests/user_pages_spec.rb:24:in `block (3 levels) in <top (required)>'

Finished in 0.01528 seconds
1 example, 1 failure

Failed examples:

rspec ./spec/requests/user_pages_spec.rb:42 # User pages signup with valid information should create a user

Randomized with seed 11922

ganshou-no-MacBook-Air:sample_app02 takako$ `
スマートフォンでvideoタグの動画をフルスクリーンにして再生する

iPhoneとかiPod touchだと、videoタグはフルスクリーンにして表示してくれるのだけど、Android系の一部端末とかだと、フルスクリーンにしてくれたり、してくれなかったりする。

してくれない場合はvideoタグに対してフルスクリーンAPIを使うと良いみたい。

```html
<video onclick="this.play()">
  <source>
    ...
  </source>
</video>
```

`this.play()`を書いているのはAndroid系の一部の端末でタップしても動画を再生してくれないので、それの対策。

```js
$('video').on('click', function(event) {
  (!!this.webkitEnterFullscreen) && this.webkitEnterFullscreen();
});
```

これでクリックしたときにフルスクリーンになる。`webkitEnterFullscreen`を持っていれば。

[フルスクリーン API の利用](https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Using_full_screen_mode)を見ると`requestFullScreen`を呼ぶように書いてあるので、以下のように書き換えた方が良いのかも。

```
$('video').on('click', function(event) {
  if (!!this.requestFullScreen) {
    this.requestFullScreen();
  } else if (!!this.webkitRequestFullScreen) {
    this.webkitRequestFullScreen();
  } else if (!!this.webkitEnterFullscreen) {
    this.webkitEnterFullscreen();
  }
});
```

フルスクリーンから普通の状態に戻したときに一時停止する場合は`fullscreenchange`や`webkitfullscreenchange`イベントにコードを追加する。

```js
$('video').on('fullscreenchange webkitfullscreenchange', function(event) {
  var isFullScreen = true;

  if (typeof document.fullscreenEnabled !== 'undefined') {
    isFullScreen = document.fullscreenEnabled;
  } else if (typeof document.webkitIsFullScreen !== 'undefined') {
    isFullScreen = document.webkitIsFullScreen;
  }

  (!isFullScreen) && this.pause();
});
```

---

……などと書いたのだけど、数ヶ月前に書いたコードなので合っているのか覚えてない。

あと[Can I use Full Screen API?](http://caniuse.com/fullscreen)を見るとAndroid BrowserもFullscreenAPIぜんぜん対応してないみたいなんだけど、なんで動作したんだろう。Chromeで確認したのかな。ちゃんと動作していたのは覚えてるのだけど……
Amazon s3 で静的ファイルを Web ホスティングするためにやったこと


静的ファイルを Amazon s3 で Web ホスティングしてみました。

## 環境

* Mac OS X
* ファイル転送には Transmit を使用

## バケット作成

適当にバケットを作ったら Properties → Static Website Hosting と進んで、 Enable website hosting にしましょう。 Index Document には index.html と入力しました。

## IAM ユーザ作成

最近は s3 への権限の設定は IAM 経由で行うようです。 IAM の管理画面から Create New Users してユーザを作成します。そして転送に使うので Access Key ID と Secret Access Key を控えておきます。そのユーザを選択し、 Permissions から Manage Policy → Custom Policy と進んで下記を貼り付けます。 `{{bucket_name}}` は適宜変更してください。これはユーザに s3 の特定バケットの権限を与える定義らしいです。

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::{{bucket_name}}",
                "arn:aws:s3:::{{bucket_name}}/*"
            ]
        }
    ]
}
```

## バケットポリシーの設定

s3 ではファイルごとに公開設定をもっているらしく、この状態でファイルを転送しても Web からは見えません。そのため、ファイルを選択して Make Public してやる必要があります。ただ、ファイルを更新するたびに実施するのは大変なので、バケットを選択して Properties → Permissions → Edit bucket policy と進み[下記のように入力するとよいそうです](http://be-hase.com/aws/424/)。

```json
{
	"Version": "2008-10-17",
	"Statement": [
		{
			"Sid": "AddPerm",
			"Effect": "Allow",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::{{bucket_name}}/*"
		}
	]
}
```

## Transmit 転送設定

転送するにあたり、上記の権限の IAM ではバケット一覧を表示する権限がありません。なので、リモートパスを空欄にして接続しようとすると失敗します。リモートパスにバケット名を入力すると、初期値でそのパスを表示するようになるため、このバケットには権限をつけたのでエラーは出なくなります。

いよいよ転送したものの、私の環境では CSS がうまく動きませんでした。 s3 上にある CSS ファイルを見てみると、 `Content-Type: application/octet-stream` となっていました。これも s3 上でファイルごとに属性をもっていて、ファイルいっこいっこ選択してMetadata から Content-Type を変更することもできますが、 Transmit のデフォルト設定をしておくと拡張子を見て Metadata をセットしてくれるようになります。 Transmit の環境設定 → クラウドと進み、拡張子 css に対して `Content-type` `text/css` と設定してやれば OK でした。
CentOSのElasticsearchで「not enough memory」が出たら

CentOSでElasticsearchを動かす際に、Javaのパッケージ関連でハマったのでメモ。

- CentOS 6.5 x86_64
- Elasticsearch 1.2.3 (rpm)

## Elasticsearchインストール＆起動→失敗
rpmから。

```
$ sudo yum install elastic search
```

起動を試みる。

```
$ sudo service elasticsearch start
Starting elasticsearch:                                    [  OK  ]
Can't start up: not enough memory
```

`not enough memory`と出て落ちるが、メモリ以外の原因もあるそうで、今回は下記の通りJavaが合ってなかったようでした。

## Javaパッケージ確認と変更

```
$ rpm -qa | grep java
java-1.5.0-gcj-1.5.0.0-29.1.el6.x86_64

$ java -version
java version "1.5.0"
gij (GNU libgcj) version 4.4.7 20120313 (Red Hat 4.4.7-4)

Copyright (C) 2007 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
```

このように、GNU製Javaが原因だったもよう。
Oracle謹製のJava(jre)じゃないとダメだというリソースもあるが、openjdkでも大丈夫なようです。

```
$ sudo yum install java-1.7.0-openjdk

$ java -version
java version "1.7.0_65"
OpenJDK Runtime Environment (rhel-2.5.1.2.el6_5-x86_64 u65-b17)
OpenJDK 64-Bit Server VM (build 24.65-b04, mixed mode)
```


## Elasticsearch起動→成功
再度Elasticsearch起動を試みる。

```
$ sudo service elasticsearch start
Starting elasticsearch:                                    [  OK  ]
```

接続確認。

```
$ curl -X GET http://localhost:9200/
{
  "status" : 200,
  "name" : "Elias Bogan",
  "version" : {
    "number" : "1.2.3",
    "build_hash" : "4596e81285d3c1a1609c8382b1e804115ef610fb",
    "build_timestamp" : "2014-07-23T13:16:05Z",
    "build_snapshot" : false,
    "lucene_version" : "4.8"
  },
  "tagline" : "You Know, for Search"
}
```

無事動作しました。
phpspecで対象にshouldで始まるメソッドがあるとき

callOnWrappedObjectを使うそうです。

[Methods starting with 'should[...DoSomething]` cause error in PhpSpec · Issue #361 · phpspec/phpspec](https://github.com/phpspec/phpspec/issues/361)

```php
$this->callOnWrappedObject('shouldPropogate');
```
スクリプトタグの中にサーバサイドで生成したコード書くのやめてください＞＜

最近、`片手間に書くjavascript`なるワードが流行っているような気がしています。
サーバサイドのエンジニアがフロントエンドのシステム（javascript）も兼業で書くのは無理があるよ的な意味で私は捉えております。

実際問題、無理があったとしても書かないという選択肢を選ぶことはなかなか難しくやっぱり片手間にjavascriptを書き続けるわけなのですが、それでも最低限気をつけたいことってあると思うのです。

私が出会った片手間のjavascriptの中でも最もやめて欲しかったのが、今回の投稿のタイトルに書いた__スクリプトタグの中にサーバサイドで生成したコードが書かれていること__です。

#  スクリプトタグの中にサーバサイドで生成したコードが埋め込まれている例

PHPを例に件のコード例を記載します。

```html+php
<script>
var msg = <?=$msg?>
alert(msg);
</script>
```

## フロントエンドのプログラムがサーバサイドのプログラムに依存する問題

先に例であげたプログラムはサーバサイドのプログラムを通さないと動作させることが出来ません。
テストを書いて実行しようものなら、わざわざサーバサイドプログラムの実行環境を用意しないといけません。
また、共通で利用出来るようなコードパターンが生まれた時に、サーバサイドのプログラムに依存しているため共通化出来ない（出来ないわけではないが、サーバサイドの依存が常につきまとう）という点も問題です。

## セキュリティに関する問題

先の例のコードでは、変数に悪意のあるコードが設定された場`script insertion`の攻撃が成立します。

```html+php
<?php
$msg = '"hello world"; location.href = "http://example.com";'
?>

<script>
var msg = <?=$msg?>
alert(msg);
</script>
```

`<script>`タグ内で展開されるサーバサイドの変数は直接javascriptのコードとして扱えるため、通常のエスケープ（`<`や`>`を置き換えるやつ）では対処することが出来ません。
対処するためには、かなり面倒なエスケープ処理が必要になります。
（めんどくさい処理については割愛…）

# 解決策

サーバサイドで生成されたデータはデータ提供用のタグに保存し、javascript側はそのタグを通してデータを取得するようにする。

```html+php
<div id="server-data-provider"
     data-msg="<?=htmlspecialchars($msg, ENT_QUOTES, 'UTF-8')?>"></div>

<script>
var server_data = document.getElementById('server-data-provider').dataset;
if (server_data && server_data.msg) {
  alert(server_data.msg);
}
</script>
```

## クライアントのコードとサーバサイドのコードの分離

クライアント側のコードはHTMLのデータを格納しているタグさえ知っていればコードが実行出来るようになります。
サーバサイドのプログラムと分離することで、クライアントのプログラムは単体のファイルとして存在することが可能になります。
単体のファイルとして切り出せるため以下のメリットを受けることが出来るようになります。

* ローカルブラウザでもテストが容易に実行出来るようになる
* 共通の処理として再利用出来るようになる

## セキュリティ問題の解決が容易

HTMLのタグから取得したデータは文字列として扱われるため、通常のエスケープさえ行っていればセキュリティホールが発生することはありません。

# 最後に…

片手間だから可能な限りやらない方向でシステム開発を行うのは悪い選択ではないと思います。
それでも、もし必要になったらどうするか？という時のための知識は準備しておいても損は無いと思うのです。（自戒の念もこめて…）
GoでMySQLに接続する

Go言語にはデフォルトでSQLやSQLライクなデータベースに接続するための
インターフェースがデフォルトで用意されている。

http://golang.org/pkg/database/sql/

それに各DB用のドライバーを追加して、データベースに接続する

## go-sql-driver/mysql のインストール

```bash
$ go get github.com/go-sql-driver/mysql
```

# コード

```go:main.go
package main

import (
  "database/sql"
  "fmt"

  _ "github.com/go-sql-driver/mysql"
)

func main() {
  db, err := sql.Open("mysql", "root:@/my_database")
  if err != nil {
    panic(err.Error())
  }
  defer db.Close() // 関数がリターンする直前に呼び出される

  rows, err := db.Query("SELECT * FROM users") // 
  if err != nil {
    panic(err.Error())
  }

  columns, err := rows.Columns() // カラム名を取得
  if err != nil {
    panic(err.Error())
  }

  values := make([]sql.RawBytes, len(columns))

  //  rows.Scan は引数に `[]interface{}`が必要.

  scanArgs := make([]interface{}, len(values))
  for i := range values {
    scanArgs[i] = &values[i]
  }

  for rows.Next() {
    err = rows.Scan(scanArgs...)
    if err != nil {
      panic(err.Error())
    }

    var value string
    for i, col := range values {
      // Here we can check if the value is nil (NULL value)
      if col == nil {
        value = "NULL"
      } else {
        value = string(col)
      }
      fmt.Println(columns[i], ": ", value)
    }
    fmt.Println("-----------------------------------")
  }
}
```

# メモ

## import の `_`

importの書式については
http://qiita.com/taizo/items/56f8639260eb2a0fa999 参照

## sqlドライバ

https://code.google.com/p/go-wiki/wiki/SQLDrivers にリンクがある。

```go
  db, err := sql.Open("mysql", "root:@/my_database")
```

## []interface{} の準備

本来ならば、

```go
sliceData := sliceFunc() 
var scanArgs []interface{} = values
```

みたいなのを用意したいが、型がそもそも違うのでこれだとエラーになる。
なので、一旦、空のinterfaceを持つスライスを
sliceDataと同じ数だけ作ってから、一つ一つ埋めていく。

```go:
  sliceData := sliceFunc()
  scanArgs := make([]interface{}, len(sliceData))
  for i := range sliceData {
    scanArgs[i] = sliceData[i]
  }

  fmt.Println(scanArgs)
```

詳しくは http://code.google.com/p/go-wiki/wiki/InterfaceSlice 参照

ちなみにスライスじゃなければ代入できる

```go
var num int = 3
var a interface{} = num

fmt.Println(a) // 3
```
実装ついでに【ポップアップ ヘルプ】をつけとく_(・・_*)


あとから、「仕様なんだっけ？」と思いそうなところや、
「ユーザーが分かりにくそう」というところには、なるべく実装のついでに
ポップアップヘルプを残しておけばあとあと楽・・なハズ☆


![ポップアップメッセ.png](https://qiita-image-store.s3.amazonaws.com/0/6714/0b416063-49cc-acaa-d143-30f7b4f53762.png "ポップアップメッセ.png")


```
<script src="/app/webroot/js/bootstrap.js"></script>
$(function() {
   $('[rel=popover]').popover();
});

<i class="icon-question-sign popover-test" role="" rel="popover" data-html="true"  data-content="ヘルプメッセージ" data-placement="right"></i>
```

　
##ヘルプアイコン
Twitterbootstrap の`icon-question-sign`　　※バージョンによって指定名が変わるので注意
&nbsp;↓　
![icon-question-sign.png](https://qiita-image-store.s3.amazonaws.com/0/6714/362c23e7-21ec-21bb-f276-5a7ba361e5a9.png "icon-question-sign.png")

参考 :http://php-fan.org/sample_code_demo/bootstrap.html


　
##ポップアップメッセージの出し方

基本オプション
・`data-content="メッセ"`表示したいメッセージをこれにあてる。

・`data-html="true"` をいれると、`data-content` のなかで`<br>`がきくようなる。

・`data-placement="right"`ポップアップ吹き出しをどの方向に出すか


他オプション参考：http://www.matomater.com/441/
Ruby のあまり知られていない？機能(初心者向け)

## はじめに
Ruby を勉強していく過程で私が学んだ、あまり知られていないだろう機能等を紹介する記事です。
使用した Ruby のバージョンは `2.1.1p76` 、 pry のバージョンは `0.10.0 on Ruby 2.1.1` 。
「他にもこんな書き方あるよ」などありましたら、教えていただけると嬉しいです。

## nonzero? の戻り値
`zero?` は `true / false` を返すが、`nonzero?` は `self / nil` を返すみたい。~~true / false を返した方が分かりやすいと思うのだが。。。~~

```rb
[1] pry(main)> 1.nonzero?
=> 1
[2] pry(main)> 0.nonzero?
=> nil
```

## Array → Hash
Array を Hash に変換する方法。いろいろとやり方があるみたい。

まずはよく使う方法。

```rb
[1] pry(main)> array = [["a", 1], ["b", 2], ["c", 3]]
=> [["a", 1], ["b", 2], ["c", 3]]
[2] pry(main)> hash = Hash[array]
=> {"a"=>1, "b"=>2, "c"=>3}
```

続いて `zip` を使う方法。

```rb
[3] pry(main)> keys = %w(a b c)
=> ["a", "b", "c"]
[4] pry(main)> values = [ 1, 2, 3 ]
=> [1, 2, 3]
[5] pry(main)> keys.zip(values).to_h
=> {"a"=>1, "b"=>2, "c"=>3}
```

最後に `transpose` を使う方法。

```
[6] pry(main)> [ keys, values ].transpose.to_h
=> {"a"=>1, "b"=>2, "c"=>3}
```

`zip` と `transpose` を使った方法の違いは、 **`zip` は配列(今回のサンプルでは `keys` と `values` )の要素数が違った場合でも動作するが、 `transpose` はエラーとなる** 点。他にも違いがあるのかもしれないが、よくわからない。

```rb
[7] pry(main)> keys = %w(a b)
=> ["a", "b"]
[8] pry(main)> keys.zip(values).to_h
=> {"a"=>1, "b"=>2}
[9] pry(main)> [ keys, values ].transpose.to_h
IndexError: element size differs (3 should be 2)
from (pry):7:in `transpose'
```

## symbol → proc

ブロックの使用を避ける方法。
あまり見たことがない書き方だが、実際に使用するシーンはあるのだろうか。

```rb
[1] pry(main)> (1..5).each { |x| puts x }
1
2
3
4
5
=> 1..5
[2] pry(main)> (1..5).each &method(:puts)
1
2
3
4
5
=> 1..5
```

## 配列要素の結合
`join` を使うのが一般的だと思うけど、 `join` を使わない方法もあるみたい。

```rb
[1] pry(main)> a = %w(This is a sample code)
=> ["This", "is", "a", "sample", "code"]
[2] pry(main)> a.join(', ')
=> "This, is, a, sample, code"
[3] pry(main)> a * ', '
=> "This, is, a, sample, code"
```

`Array#*` の使用はおすすめではない模様。