OmniAICreator/Qiita-1.07M huggingface dataset:
「ul,ol,liタグ」の使い方とhtml5,slimでの記述方法


![](https://qiita-image-store.s3.amazonaws.com/0/63640/3c15bea4-7567-553d-6fc9-ba1a34e02810.png "logofix.png")


## ulタグ
- ブロック要素
- 入れ子にできるのはliタグだけ
- Unordered List(アンオーダードリスト)の略
- 順番がないリストを表示させたい時に使う
- リストの各項目はliタグで記述する
- 表示されたhtmlは先頭に「・」(黒丸)が付く
- type属性をつけることで黒丸以外に白丸、黒い四角にすることができる

```html
<ul>
	<li>こぶた</li>
	<li>たぬき</li>
	<li>キツネ</li>
</ul>
<ul type="disc">
	<li>ネズミ</li>
	<li>みなしごはっち</li>
	<li>チワワ</li>
</ul>
<ul type="circle">
	<li>ワニ</li>
	<li>ニタリクジラ</li>
	<li>ラマ</li>
</ul>
<ul type="squea">
	<li>マントヒヒ</li>
	<li>ヒツジ</li>
	<li>ジャイアントパンダ</li>
</ul>
```


```RubySlim
ul
	li こぶた
	li たぬき
	li キツネ
ul type="a"
	li
		| ネズミ
	li
		| みなしごはっち
	li
		| チワワ
		| ワニ
		br
		| ニタリクジラ
```

slimでは、
<ol>
	<li>liタグのあとに半角スペースを１つ空けて項目を記述する</li>
	<li>liタグのあとに改行、インデントしてから「|」と半角スペースを一つ空けてから項目を記述する</li>
</ol>
上記の2つの方法で記述することができるが、２行以上になる場合やliタグ内で改行したい場合は後者の記述方法を使う
編集、修正のときの手間と可読性を考えると後者で記述するほうがおすすめ(＾ω＾)



## olタグ
- 入れ子に出来るのはliタグだけ
- ブロック要素
- Ordered List(オーダドリスト)の略
- 順番があるリストを表示させたい時に使う
- リストの各項目はliタグで記述する
- 表示されたhtmlは先頭に「1、2、3...」(算用数字)が付く
- type属性をつけることで算用数字以外にアルファベットの小文字、大文字、ローマ数字の小文字、大文字をつけることができる

```html
<ol>
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>
<ol type="a">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

<ol type="A">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

<ol type="i">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

<ol type="I">
	<li>お問い合わせ</li>
	<li>プランのご提案</li>
	<li>ご注文の確定</li>
</ol>

```

```RubySlim
ol
	li
		| お問い合わせ
	li
		| プランのご提案
	li
		| ご注文の確定
ol type="a"
	li
		| お問い合わせ
	li
		| プランのご提案
	li
		| ご注文の確定
```

## liタグ

- ブロック要素
- どんな要素も入れ子できる
- List Item(リストアイテム)の略
- リストの項目を記述する時に使う
- ulタグとolタグの中でだけ使える


```html
<ul>
	<li>シーズー</li>
	<li>プードル
		<ul>
			<li>スタンダードプードル</li>
			<li>ジャイアントプードル</li>
			<li>トイプードル</li>
			<li>ティーカッププードル</li>
		</ul>
	</li>
	<li>柴犬</li>
</ul>
<ul>
	<li><a href="http://www.animal-planet.jp/dogguide/directory/dir09500.html">マルチーズ</a></li>
	<li><p>ミニチュアシュナウザー</p></li>
	<li><img src="hogehoge.png"></li>
</ul>
```

```RubySlim
ul
	li
		| シーズー
	li
		| プードル
		ul
			li
				| スタンダードプードル
			li
				| ジャイアントプードル
			li
				| トイプードル
			li
				| ティーカッププードル
	li
		| 柴犬
ul
	li
		a href="http://www.animal-planet.jp/dogguide/directory/dir09500.html" マルチーズ
	li
		p
			| ミニチュアシュナウザー
	li
		img src="hogehoge.png"
```
Dockerfile が複数ある環境で同じファイルを ADD しなくて良くなるツール

Docker ネタです。
今回紹介するツールを使うよりも良い方法があれば教えていただけると幸いです。

Dockerfile の ADD(COPY) に指定できるファイルやディレクトリのパスは、
Dockerfile と同じディレクトリからの相対パスでなくてはいけません。
そのため、同じファイルを ADD(COPY) したい場合は、

```
$ tree dockerfiles
dockerfiles
├── mysql
│   ├── Dockerfile
│   └── samefile
└── nginx
    ├── Dockerfile
    └── samefile

2 directories, 4 files
```

のように、同じファイルをそれぞれのディレクトリに配置することになると思います。

ちなみに、symlink をはれば同じファイルを配置しなくて良いかと思いましたが、
ファイルへの symlink だった場合は symlink がそのまま追加され(symlink 先のファイルが置かれるわけではない)、
ディレクトリへの symlink だった場合は、docker build に失敗します。

試行錯誤した結果、
Dockerfile が symlink な場合は動作しましたので、

1. 指定したディレクトリ以下の Dockerfile を探索する
2. カレントディレクトリに Dockerfile の symlink をはる
3. symlink をはった Dockerfile に対して docker build する(カレントディレクトリで docker build .)

するツールを書きました。

https://github.com/tkuchiki/multi-docker-build です。

## install

https://github.com/tkuchiki/multi-docker-build/releases から、
環境に合わせた binary をダウンロードして unzip すればすぐにお試しいただけます。

## 使い方

コマンドのオプションは以下のとおりです。
※ github の README にも後日説明を書きます

```
$ ./multi-docker-build --help
NAME:
   multi-docker-build - execute multiple docker build

USAGE:
   multi-docker-build [options] [arguments...]

VERSION:
   0.0.1

OPTIONS:
   --help, -h		show help
   --options, -o 	docker build options
   --tag, -t 'latest'	docker image tag
   --config, -c 	config file
   --quiet, -q		quiet mode
   --version, -v	print the version

```

オプションは以下のようになります。

- -o : docker build のオプション
- -t : image の tag(デフォルトは "latest")
- -c : image を key, tag を value とした json ファイルへの path
- -q : 標準出力に出力しない

-t はすべての docker build に同じ tag を指定することになるので、
image ごとに tag を変更したい場合は、-c で image を key, tag を value とした json ファイルへの path を指定することになります。
image は Dockerfile が置いてあるディレクトリ名を使います（一番上の tree の構成では、nginx と mysql)。

json の例を挙げると、

```json
{
  "nginx": "1.7",
  "mysql": "5.6"
}
```

とすると、`docker build -t nginx:1.7 .` や `docker build -t mysql:5.6` のように実行されます。
json のキーと Dockerfile が置いてあるディレクトリ名が一致しない場合は、tag が latest になります。

このツールを使うと、同じファイルを ADD したいときに、

```
$ tree .
.
├── dockerfiles
│   ├── mysql
│   │   └── Dockerfile
│   └── nginx
│       └── Dockerfile
└── samefile

3 directories, 3 files
```

のような構成にしておけば、それぞれのディレクトリにファイルを配置する必要はなくなります。
上記の構成で以下のコマンドを実行すると、

```
$ multi-docker-build dockerfiles
```

内部では以下のコマンドが実行されるイメージです。

```
$ ln -s dockerfiles/mysql/Dockerfile .
$ docker build -t mysql:latest .
$ rm Dockerfile
$ ln -s dockerfiles/nginx/Dockerfile .
$ docker build -t nginx:latest .
$ rm Dockerfile
```

## 注意点

Dockerfile ごとに違うファイルやディレクトリを ADD したい場合は、
それぞれのディレクトリに置くことになると思います。
その場合、Dockerfile の位置が変わるため、
ADD に書く相対パスをそれ用に合わせる必要があります。

### 例

```diff
- ADD file /tmp/
+ ADD dockerfiles/nginx/file /tmp/ 
```

## まとめ

複数 Dockerfile がある場合に、同じファイルを用意しなくても良くなる方法を提案しました。
ただ、かなり強引な方法ですので、もっとスマートに出来る方法があればその方法を採用したいです...
第二回 vvvv オフ会レポート

この投稿は[「VVVV Advent Calendar 2014」](http://qiita.com/advent-calendar/2014/vvvv)の２０日目の記事です。

***

## 第二回 vvvv オフ会
![logo](https://qiita-image-store.s3.amazonaws.com/0/59912/bc407ac7-924e-c25b-4653-1b138b802ec6.jpeg)

こんにちは。
今日は [第二回 vvvv オフ会](https://atnd.org/events/59754) が行われました。
場所は [A4A](http://a4a.jp/) さんのオフィスにて。代官山です。

今回は年末という事もあり、ある程度 vvvv を触った事のある人たちで情報交換、交流的な事をメインテーマとしたオフ会です。
参加者は８名、京都から（@takumatnさん）や、長野から（@hurafulaさん）も参加してくれてありがたい限りです。

基本的にゆるい感じで進行していきました。

自己紹介や各自やってる事の話とか。

![sDSC04746.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/95844fb7-4f8d-58dd-2fac-6980ce1763d1.jpeg)

人が集まったいい機会なので [Boygrouping](http://vvvv.org/documentation/boygrouping-basics) で遊んだりとか。
（リアルタイムでサーバ側の変更がクライアント側に伝搬されるので面白いです。）

![gif](http://i.gyazo.com/57436f60c891c18cdc3b5ba77a5130b3.gif)


今回のオフ会には京都からタクマさん([@takumatn](https://twitter.com/takumatn)さん) も来てくれました。
タクマさんはこの記事で有名です。
[「インタラクティヴ映像」の新時代を切り拓く、24歳のアーティスト](http://wired.jp/2013/11/14/takuma-nakata-hp/)

で、タクマさんによる、vvvv を使った作品紹介や、

![sDSC04786.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/79fc688a-56f1-f36e-4917-f7f8e393d99a.jpeg)

脳波を使って遊んだ事例とか、話していただきました。

![sDSC04809.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/881248b5-33a7-6066-d9c0-bc5eff45d396.jpeg)

他には・・・

ロクロを回すイケメンや、

![sDSC04781.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/210f7ea7-0776-a61d-9270-96bb8a4b6851.jpeg)

女性陣も参加してくれました。

![sDSC04812.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/77e61cc0-974b-6b40-5419-568c2953690b.jpeg)

##告知
２月に vvvv ユーザとダンサーを組んで、ちょっと何かイベントをしようとしています。
vvvv を使った作品を公開する場所を求めている人、vvvv 使って遊びたい人、に楽しんでもらえるイベントなのではと思います。
詳細は追って詰めていくので、[@Junky_Inc](https://twitter.com/Junky_Inc) さんのツイートとかをチェックしましょう。

![10865742_637052443069882_316222804196990060_o.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/203446cb-7871-0e7c-ed4d-80513605d244.jpeg)


##個人的な感想
色々な視点から vvvv を使っている人が、東京を中心に各地から集まりとても楽しく交流出来ました。盛り上がりました。
雨の中でしたが参加してくれた皆さんありがとうございます。
場所を提供してくれた A4A さんにも感謝です。

最近、日本の vvvv 文化は確実に成長してきていると感じているので、引き続き楽しく布教活動を続けていければなあと思います。

vvvv オフ会は今回で二回目ですが、「vvvv を使っている人を集める回」と、「vvvv 入門者向けの勉強会的な回」を織り交ぜながらこれからも月１ペースくらいでやっていければと思います。

あとはさっき画像編集していて人に目線入れるの楽しいなあと思いました。

##おしまい

![sDSC04823.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/a9f6d2aa-3627-cfcd-db3e-6ee4efdda82b.jpeg)

ばいばーい。
UE4 変なマテリアル入門 2（動くマテリアル）

# index
[第1回（準備と簡単な例）](http://qiita.com/nkdtr/items/ca418529a1992ed5ab08)
[(イマココ)第2回（動くマテリアル）](http://qiita.com/nkdtr/items/81dca14e37a34fe32cb0)
[第3回（形を作る）](http://qiita.com/nkdtr/items/e6cf18160a5f3ff2fd18)
[第4回（形を動かす）](http://qiita.com/nkdtr/items/309274646d291ef676fd)
[第5回（テクスチャサンプリング*N）](http://qiita.com/nkdtr/items/6e09446659512c09e4bc)

興が乗ったので早くも２回目・・・！
今回は「動くマテリアル」です。

# 動かす
Time（毎フレーム、秒単位の時間を返す）を使うと動くマテリアルが作れます。
動くってことは・・・画像を貼っても伝わらないという面倒くささが記事的にあるんですけど。

## 一定速度のスクロール
これは実に簡単で、TexCoordにTime*何かを足すとスクロールします。
注意点としては、テクスチャの設定でAddressingModeをWrapにしていないと、自前でそれに相当する処理を書かねばなりません。TextureSample直前にFracを挟むだけですが。
http://youtu.be/-2VUHZNIbes
![scroll.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/a02dd542-d23f-8454-4369-4a97844902f2.png)


## なめらかに振動させる
時間から振動への変換には三角関数の正弦及び余弦を使います。
トラウマな人もいるかもしれませんが、これを機に仲良くなりましょうo(^-^)o
数学や普通のシェーダーでは sin, cos と表記しますが、
UE4のマテリアルエディタではSine, Cosineと正式な綴りになっております。
環境に依存するかもしれませんが、私の手元だとプレビューでは変な動きをします・・・
プレビュー中は時間当たりの振動数が少なくなるよう調整する（Periodの値を大きくする）等の措置が必要かもしれません。
ゲームとして再生すれば正常に動くようですが、ちょっと不便です。
これらの出力は-1,1の間となるので、用途によって適当な範囲に収まるように計算を追加します。
http://youtu.be/gjrFBddyquE
![scale.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/93475f95-47e7-9acf-f56b-982886e84736.png)


## 回転
本来は少し面倒な計算が必要ですが、勝手にやってくれるノードがあります。
CustomRotatorを使います。
これはMaterialFunctionとして実装されているので、ダブルクリックで中身を見ることができます。
http://youtu.be/gmX8LgMUZCg
![rotate.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/2973a234-091b-bbd2-f460-ac3d815a6a1d.png)


あれ。今回も地味でした。
次こそは変なのを・・・( ˘ω˘)
計画力と実行力と確実性

プログラマーの基礎能力として必要なこと。

##①計画力
おおよそ、その仕事をやれそうな２倍くらいの時間を取る。
で、期限までの進捗の測り方なんだけど。

**「期限の２０％の時間で　総量の３０％を終わらせる」**
→スタートが巧くきれているかをチェック

**「期限の５０％の時間で　総量の６０％を終わらせる」**
→うまく運べているかをチェック
　
**「期限の８０％の時間で　総量の１００％を終わらせる」**
→期限に余裕を持てるかをチェック

と、３段階のチェックを入れる感じにしたほうがいい。

##②計画力２
計画を立てる場合、１月、週ごと、１日～３日ごと　と３階層くらいで計画を立てる人が多いと思う。

「今月これだけ仕事する」　「今週こんだけしごとする」ってのは、決めるのは簡単だと思う。

で、ここに加えて、
「１月あとのことを６０％決めておく」とか、「１週間後を６０％決めておく」ってことをしたほうがいい。
っていうのも、先の予定を決め忘れることがよくあって、そういう時に、『予定の無い状態』が発生してしまう。

だけど、**６０％だけでも予定を立てておくと多少のイレギュラーでも状態を立て直すのが簡単**になる。

##③実行力
おおよそ、物事は**３周**繰り返した方がいい。
なんかの資料を作るってなったら、

**　「１周目は６０％の量を６０％の精度で作る」
　「２周目は８０％の量を８０％の精度で作る」
　「３回目は１００％の量を９５％の精度で作る」**

　ってしたほうがいい。
　　
　なんかの試験勉強をするなら

**「１周目は６０％の量を６０％の精度でやる」**
**「２周目は最初やった６０％を８０％の精度まで上げる＋１周目でやりのこした４０％をやる」**
**「３周目は最初やった６０％を９５％の精度まで上げる＋２周目でやり残した４０％を８０％の精度まで上げる＋残りの４０％を９５％の精度に上げる」**
　　
なぜこんなことをするかというと、いろいろメリットがあるんだけど。

『完璧主義から逃れられるので、一週目を気軽に音楽でも聞きながらやれる』
『一番時間がかかるのは１周目で、一番効果が高いのは３周目なのだからサッサと３周目に入りたい』
『２周目でどの程度身に付くかがわかるから１周目でのやり方が工夫される』
『１周目と２周目は使う脳みそが違うから、同じ作業でも脳みそをリフレッシュして使える、飽きにくい』
『１，２，３周目でやることを変えたりといった工夫を考え付くので、３段階やる前提でやることを工夫して計画などにも組み込みやすくなる』
　　
恥ずかしながら、私はゴミ捨てや片づけすら難しい。そのくらい能力が低い。なので、これらも３段階で６０％ずつ片づけてやっとできる感じである。

##④確実性
これは本当に、人生損したと思っている。
気づいたのが遅かったのだけれど、

**『人間は２つのことをいっぺんにやるとミスが多くなる』**
**『人間が読むときは想像以上に見落としが多い』**
**『図を見ながら文章を書いたり、文章を見ながら図を描くのは想像以上に難しい』**

ということだった。

たとえば、３ｘ＋４×１２＝３×６÷（３＋２）みたいなのがあったとして、計算途中に何個かいっぺんに計算してしまうってのは、ミスが多い。なので、１つずつ手順を確認しつつ、１個ずつやるのが必勝法になる。　ようするに、「手順が多いものは手順数を確認してからこなす」というのが大事になる。

『人間が読むとき想像以上に見落としが多い』というのは少し理解しにくいかもしれないが。複雑な文章だとか、１読で理解できているつもりでも見落としってのはかなりある。普段の生活ならいいけど、仕事の資料の場合はどうするか？もちろん、マーカーを引いたりするのも有効なんだけど。「手で隠しながら１行ずつ読む」ってのが使える。ホント見落としが少なくなる。さらに、「声に出しながら読む」ってのもかなり効く。

『図を見ながら文章をかいたり～～～』ってのは、これは本当に難しい。難しいので、かなり正確な確認が要求される。図を文章に起こしたり、文章を図に起こすときには、対応する文と図を、☆や◎や！で対応させて描くとミスが少なくなる。資料をもらったら、文章にラインを引いて☆で、図の対応したところに☆みたいに書き込むとかなり視認性が上がる。


***
最後に一つ有名なお言葉を。
>プログラムは思った通りに動かない。書いた通りに動くのだ。

以上。
dockerでWordPressを稼働する

WordPressをdockerのコンテナで稼働する手順を記載します。

稼働するWordPressは家族・友人での情報共有に使うブログであり、一般には公開しないため以下とします。

* Webのポート番号は80でなく1224とする。
* Webの全ページにてBasic認証をかける。ただし、アカウントは１つで共有して利用する。

コンテナで稼働する主な製品は以下です。

* OS:CentOS 6.6
* Webサーバ:Apache
* DBサーバ:MySQL

コンテナを稼働させるホストOSにはCentOS 6.5を使います。

## dockerをインストール

```bash
sudo rpm --import http://dl.fedoraproject.org/pub/epel/RPM-GPG-KEY-EPEL-6
sudo yum -y install http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
sudo yum -y install docker-io
```

## dockerを開始

```bash
sudo service docker start
sudo chkconfig docker on
```

## Dockerfileファイルを作成
Dockerfileというファイルを作成し、以下の内容を記載し保存します。ただし、「USER1 PASS1」はBasic認証時のユーザ名とパスワードですので、他に変えた方が良いです。

```
FROM centos:centos6
RUN /bin/cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
RUN yum -y install httpd php php-mysql mysql-server tar wget php-gd
WORKDIR /tmp/
RUN wget https://ja.wordpress.org/latest-ja.tar.gz
RUN tar xvfz ./latest-ja.tar.gz
RUN rm -f ./latest-ja.tar.gz
RUN mv wordpress/* /var/www/html/
RUN cp /var/www/html/wp-config-sample.php /var/www/html/wp-config.php
RUN sed -i -e 's/database_name_here/wordpress/g' -e 's/username_here/wordpress/g' -e 's/password_here/wppass/g' /var/www/html/wp-config.php
RUN sed -i -e 's/AllowOverride\ None/AllowOverride\ AuthConfig/g' /etc/httpd/conf/httpd.conf
RUN echo -e "AuthUserFile /.htpasswd\nAuthName Himitsu\nAuthType Basic\nrequire valid-user" > /var/www/html/.htaccess
RUN htpasswd -cb /.htpasswd USER1 PASS1
RUN chown -R apache.apache /var/www/html/
RUN service mysqld start && mysql -u root -e "CREATE DATABASE wordpress; GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpress'@'localhost' IDENTIFIED BY 'wppass'; FLUSH PRIVILEGES;" &&  service mysqld stop
RUN echo -e "service mysqld start\nservice httpd start\n/bin/bash" > /startService.sh
RUN chmod o+x /startService.sh
EXPOSE 80
CMD /startService.sh
```

## コンテナイメージを作成
Dockerfileファイルがあるディレクトリで以下を実行します。

```bash
sudo docker build --rm -t mywordpress .
```

## コンテナを稼働

```bash
sudo docker run -i -t -d -p 1224:80 -v /share/WordPress1:/share/WordPress1 --name WordPress1 mywordpress
```

## WordPressをセットアップ
ブラウザで以下にアクセスします。するとBasic認証のダイアログが表示されるので、ユーザ名とパスワード(デフォルトだとUSER1,PASS1)を入力してください。次に、指示に従いWordPressをセットアップします。
http://<ホストOSのIPアドレス>:1224/wp-admin/install.php

これでWordPressを利用できるようになりました。

## メンテナンス作業
### コンソールで作業

```bash
sudo docker exec -i -t WordPress1 bash
```

このexecサブコマンドがサポートされたのはdockerバージョン1.3です。
### ファイルをやり取り

コンテナとホストOS間でファイルをやり取りするには`/share/WordPress1/`が使えます。コンテナとホストOSで同じディレクトリが見えます。
Rocket で aobench を動かす.


アプリケーションコンテナイメージ&実行環境である Rocket を使って, どこでも aobench を動かしたいですね!
さっそくやってみましょう. 
(本稿は rocket v0.1.1 を使っています)

rocket 化した aobench コードはこちら.

https://github.com/syoyo/aobench-rocket

## actool をビルドする.

パッケージャ(?)である actool をビルドします.

```
$ git clone https://github.com/appc/spec
$ cd spec
$ ./build
```

bin/actool が出来ているのを確認します. actool を使ってパッケージ(aci)を作ります.

spec のページを参考にバイナリやらをレイアウトします. 今回はカレントディレクトリに img/ をつくり, そこに一式入れました.

また, 現状 dynamic link 形式のバイナリはそのままでは実行できないので注意が必要です. 可能であれば static link にしておきます.

https://github.com/coreos/rocket/issues/286


```
$ actool build img aobench.aci
```


rkt は http or https しかサポートしていないため, .aci を適当な web サーバに上げて http(s) 経由で取得できるようにします.

```
$ ./rtk run https://github.com/syoyo/aobench-rocket/blob/master/aobench.aci?raw=true
Timezone UTC does not exist in container, not updating container timezone.
Output ao.ppm
Sending SIGTERM to remaining processes...
Sending SIGKILL to remaining processes...
Unmounting file systems.
Unmounting /proc/sys/kernel/random/boot_id.
All filesystems unmounted.
Halting system.
```

Cool!

(rtk は実行時に systemd を使っているので, systemd な環境でないと動きません. 今回 rkt 実行側は CoreOS を使いました).

## TODO

* dynamic link 形式のアプリも動かせるようにする(C/C++ だとこちらのほうが通常の形式)
* URL が同じだとデータがキャッシングされてしまうので, イメージをアップデートしたら別の URL にするか, キャッシュを削除するしくみが必要(rkt には削除コマンドはまだない?)
Silex の Phar アーカイブを簡単に作成する方法

## Pharアーカイブとは

PharアーカイブとはJAVAでいうjarです。
参照:[Phar アーカイブの使用法: 導入](http://php.net/manual/ja/phar.using.intro.php)

Pharアーカイブであれば、1ファイルで管理できるというメリットがあります。もちろんパフォーマンス面などのデメリットもあります。

たとえば、PHPUnitをインストールする方法としても、composer でがんばらなくても [PHPUnitのPharアーカイブでインストールする方法](https://phpunit.de/manual/3.8/ja/installation.html)があります。1ファイルだけあれば良いのでインストールも1ファイルのダウンロードだけで手っ取り早いですし、管理も簡単です。

自分のプロジェクトである [Dbup](http://brtriver.github.io/dbup/ja/) でも dbup.phar でライブラリを提供しています。

## Phar を作るのは辛いので Box を利用する

便利な Phar なんですが、自前で Phar を作ろうとするとビルドのためのスクリプトなど色々準備が必要で大変です。

コマンド1つで出来たらなぁと思っていたところ、[Box](http://box-project.org/) というライブラリがあることを発見。簡単にいうと、Pharアーカイブのビルドを json ファイルに定義書くだけでよしなにビルドしてくれます。

実績でいうと、[PHP Cording Standards Fixer](http://cs.sensiolabs.org/) の Phar ファイルはこの Box でビルドされています。

## Silex の Phar ファイルを作成するための手順

[Silex](http://silex.sensiolabs.org/) はいわゆるマイクロフレームワークな書き方ができる Webアプリケーションフレームワークです。

では、さっそく Box を使って silex.phar ファイルを作ってみましょう

ちなみに、簡単に作成するために[silex-phar](https://github.com/brtriver/silex-phar) を用意したのでとりあえず silex.phar を作りたい人はこちらのリポジトリからどうぞ。

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

Phar を作るために Silexのコード一式を composer で取得します

```lang:install-silex.sh
$ php -r "eval('?>'.file_get_contents('https://getcomposer.org/installer'));"
$ php composer.phar require silex/silex "~1.2"
```

これで `vendor` 以下にコードがインストールされます

### box.phar をインストール

```lang:install-box.sh
$ curl -LSs https://box-project.github.io/box2/installer.php | php
```

これで `box.phar` が作成されます。


### box.json を用意する

だいたい何してるかは見ればわかると思います。

```lang:box.json
{
    "finder": [
        {
            "name": ["*.php"],
            "exclude": ["Tests", "tests"],
            "in": ["vendor"]
        }
    ],
    "output": "silex.phar",
    "stub": false
}
```

### silex.phar を作成する

```lang:build-silex.sh
$ php box.phar build
Building...
```

終われば無事 `silex.phar` ができているはずです。

### silex.phar を使ったアプリケーションコードサンプル

あとは作成した `silex.phar` の `autoload.php` を利用すればOKです。
本家にあるサンプルコードだと、requireすべきファイルがpharの中になるので、パスが変わります。こんな感じ。

```lang:index.php
<?php

require_once 'phar://silex.phar/vendor/autoload.php';

$app = new Silex\Application(); 

$app->get('/hello/{name}', function($name) use($app) { 
    return 'Hello '.$app->escape($name); 
}); 

$app->run();
```

動作確認するためだけなら、組込みサーバーでさくっと動かせば

```lang:run.sh
$ php -S localhost:8888 -t ./
```

ブラウザから `http://localhost:8888/hello/brtriver` みたいな感じで確認できるはず。


### まとめ

たったこれだけの手順で silex の Pharアーカイブ ができました。
composerで頑張ってインストールしなければならないものは、それでいいですし、もっと楽できるところは Phar を使って楽できるといいんじゃないでしょうか

### おまけ

Slimのpharを作りたい場合は、[wikiにあるサンプル](https://github.com/box-project/box2/wiki/Slim) でできるみたい
JavaScriptでforEach, filter, map, reduceとか


IE8もそろそろ死んでくれそうで、最近は使うことが多いのでメモ。

# 参考URL

ここをみると、全部のってる。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

# forEach

連想配列(object)だと使えないので、eachはjQueryの`$.each(collection, callback)`の方が使い勝手がいいかも。

```js
[2, 5, 9].forEach(function(element, index, array) {
	console.log(index + ":" + element);
	/**
	 * 0:2
	 * 1:5
	 * 2:9
	 */
});
```

# filter

条件にあうものだけを抽出。
arrayは元の配列。index, arrayは省略可能。

```js
var filtered = [12, 5, 8, 130, 44].filter(function(element, index, array) {
    return (element >= 10);
});

console.log(filtered); // [ 12, 130, 44 ]
```

# map

処理をして新しい配列を作る（写像ですね）。
arrayは元の配列。index, arrayは省略可能。

```js
var square = [1, 2, 3, 4, 5].map(function(element, index, array) {
    return element * element;
});

console.log(square); // [ 1, 4, 9, 16, 25 ]
```

# reduce, reduceRight

処理をして1つの値を取得。
previousValueは前の値というより、それまでの結果と考えるとわかりやすい。
arrayは元の配列。index, arrayは省略可能。

```js
var total = [0, 1, 2, 3].reduce(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});

console.log(total); // 6
```

reduceRightは右から処理する。

```js
var total = [0, 1, 2, 3].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});

console.log(total); // 6
```

# every, some

everyは条件を全ての値が満たすか、someは条件を満たすものがあるかの判定。
結果はboolean。
arrayは元の配列。index, arrayは省略可能。

```js
var passed = [12, 54, 18, 130, 44].every(function(element, index, array) {
    return (element >= 10);
});

console.log(passed); // true
```

```js
passed = [2, 5, 8, 1, 4].some(function(element, index, array) {
    return (element >= 10);
});

console.log(passed); // false
```
非もっと非Prolog的Prologプログラミング

* 22 Dec. '14 -- fib_cps/3 中のカットの間違いを修正．

[昨日](http://qiita.com/m0h1can/items/7b041c91f56ca3026cea) は [非Prolog的Prologプログラミング](http://qiita.com/mandel59/items/0111154e5dbeb537ec32) について言及しました．[mandel59](http://twitter.com/mandel59) さんの記事には，私だけでなく [suharahiromichi](https://twitter.com/suharahiromichi) さんが既に [もっと非Prolog的Prologプログラミング](http://qiita.com/suharahiromichi/items/0f51f589d7550dff5760) として言及されていましたので，今回はそちらの継続渡しについて考えます．

#もっと非Prolog的Prologプログラミング

まずコードの引用です．

```prolog
fib_cps(1, K, R) :- !,
        call(K, 1, R).
fib_cps(2, K, R) :- !,
        call(K, 1, R).
fib_cps(N, K, R) :-
        N1 is N - 1,
        fib_cps(N1, q1(K, N), R).

q1(K, N, V, R) :-
        N2 is N - 2,
        fib_cps(N2, q2(K, V), R).
q2(K, N, V, R) :-
        V1 is N + V,
        call(K, V1, R).

fib_cps(N, R) :-
        fib_cps(N, id, R).
id(A, A).
```

動作の詳細は元記事に譲るとして今回のコードも `?- fib_cps(N, 55).` が通りませんから，これを解決したいと思います．

昨日の記事の中で私は Prolog 処理系が変数の決定に困らないために，述語の定義は well-defined に与えましょうと述べました．しかしながら今回のコードにおいて call/3 の部分は well-defined になりようがありません．そこで call/3 が扱うよりもずっと小さいクラスの集合を定義してやる必要があります．

# 非もっと非Prolog的Prologプログラミング

継続を評価する（ことに相当する）述語 call/3 を次のように改めることで，非常に小さい集合を定義します．

```prolog
cont(id, X, Y) :- id(X, Y).
cont(q1(K, N), X, Y) :- q1(K, N, X, Y).
cont(q2(K, N), X, Y) :- q2(K, N, X, Y).
```

少し説明を添えると，継続に限らず Prolog で処理の流れを柔軟にしようと思ったときに call/3 を使うことは自然なものだと思うのですが，それは同時に不確かさをもたらすことに繋がります．そこでプロダクションコードなどでは上のようにして，カスタマイズポイントを設けて分岐を記述させるアプローチを取る場合があります．

さてここでちょっと殺まらないといけないんですが，昨日の自然数の定義はあまり良くありませんでした．継続渡し形式の利点は，処理の流れを明確に記述することにあるわけですが，これを Prolog で素直にやってしまうと choice ポイントを余計に増やしてしまい，望ましくないバックトラックを行なわせてしまう恐れがあります．そのため，昨日の定義を流用するとハマってしまいます．今回は次のように書き直してください．

```prolog
nat(0).
nat(N) :- var(N), nat(N0), succ(N0, N).
nat(N) :- 0 < N, succ(_N, N).
```

これで準備が出来ました．各述語の中では（変数の宣言を除けば）基本的に一度に一つの処理だけ記述していることに注目してください．このお陰で，各処理が双方向的になっていれば，継続渡し形式で書いた Prolog コードは自然と各変数を双方向に求めることが出来ます．

```prolog
fib_cps(1, K, R) :- cont(K, 1, R).
fib_cps(2, K, R) :- cont(K, 1, R), !.
fib_cps(N, K, R) :-
    nat(N), 2 < N,
    N1 is N - 1,
    fib_cps(N1, q1(K, N), R), !.

q1(K, N, V, R) :-
    N2 is N - 2,
    fib_cps(N2, q2(K, V), R).
q2(K, N, V, R) :-
    plus(N, V, V1),
    cont(K, V1, R).
id(A, A).
```

これで知りたい変数は全て Prolog が見つけてくれます．

```prolog
?- fib_cps(10, id, X).
X = 55.
?- fib_cps(N, id, 55).
N = 10.
?- fib_cps(10, K, 55).
K = id.
```

#Prolog的とは

2日に渡って**Prolog的**という妄念に関して，Prolog的で無いということは無い，という考え方で書いたつもりです．実はこういうスタイルこそ個人的に Prolog っぽいなと思うことがあります．というのは Prolog では任意要素の評価を行なう場合に，

```prolog
forall(A, B) :-
    \+ ( call(A),
         \+ call(B)
       ).
```

という感じで否定述語をよく用いるためです．まぁ個人的な**気持ち**の問題ですが…
Ruby | Enumerable#if_else_map #ruby

# Ruby | Enumerable#if_else_map #ruby
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
Enumerable#if_else_map を妄想したら @cielavenir さんが秒速( 与沢級 )で作ってくれた
## <i class="fa fa-history" style="font-size:1em;"></i> 経緯
map 内で条件に合わせて二種類の変換をしたい場合。
こんな感じで、 map のブロック内で三項演算子を使ったり if を使ったりすると思う。

~~~ruby
require 'pp'

pp [*1..4].map { |e| e.odd? ? 'odd' : 'even' }

class String
  def vowel?
    !!(self =~ /[aiueo]/)
  end
end
pp [*?a..?z].map { |e| e.vowel? ? "#{e} is vowel" : "#{e} is not vowel" }
~~~

* 出力

~~~
["odd", "even", "odd", "even"]
["a is vowel",
 "b is not vowel",
 "c is not vowel",
 "d is not vowel",
 "e is vowel",
 "f is not vowel",
 "g is not vowel",
 "h is not vowel",
 "i is vowel",
 "j is not vowel",
 "k is not vowel",
 "l is not vowel",
 "m is not vowel",
 "n is not vowel",
 "o is vowel",
 "p is not vowel",
 "q is not vowel",
 "r is not vowel",
 "s is not vowel",
 "t is not vowel",
 "u is vowel",
 "v is not vowel",
 "w is not vowel",
 "x is not vowel",
 "y is not vowel",
 "z is not vowel"]
~~~

しかし、コレクションパイプラインの操作イメージからするとなんとなくしっくりこなかったり。
「こんな感じのがあったほうがしっくりするかな？」、と下記のようなインターフェースをツイートしたところ、

~~~ruby
[*1..10].if_else_map(&:odd,->{|odd|'奇数'},->{|even|偶数"})
~~~

@cielavenir さんが秒速で実装してくれました。

※ 我ながら if_else_map という名前が微妙だけど、とりあえず話題を進める上で伝わりやすいのでそのまま話をすすめた

## <i class="fa fa-code" style="font-size:1em;"></i> Enumerable#if_else_map
私が色んな文法を試してる **実用的ではない 遊び場的な Utility** 'tbpgr_utils' にプルリクをいただいた。
<i class="fa fa-github-square" style="font-size:1em;"></i> [if_else_map pull request](https://github.com/tbpgr/tbpgr_utils/pull/2)

### if_else_map のコード

~~~ruby
module Enumerable
  def if_else_map(predicate,proc_t,proc_f)
    map{|e|predicate.call(e) ? proc_t.call(e) : proc_f.call(e)}
  end
end
~~~

### if_else_map を使ってみる

* 分岐条件
* if の時の変換ルール
* else の時の変換ルール

が分割されてなんとなく気分が良くなった。

~~~ruby
require 'tbpgr_utils'
require 'pp'

pp [*1..4].if_else_map(
        :odd?.to_proc,
        ->(odd){'odd'},
        ->(even){'even'}
      )

puts

class String
  def vowel?
    !!(self =~ /[aiueo]/)
  end
end

pp [*?a..?z].if_else_map(
        :vowel?.to_proc,
        ->(alph){ "#{alph} is vowel" },
        ->(alph){ "#{alph} is not vowel" }
      )
~~~

* 出力

~~~
["odd", "even", "odd", "even"]

["a is vowel",
 "b is not vowel",
 "c is not vowel",
 "d is not vowel",
 "e is vowel",
 "f is not vowel",
 "g is not vowel",
 "h is not vowel",
 "i is vowel",
 "j is not vowel",
 "k is not vowel",
 "l is not vowel",
 "m is not vowel",
 "n is not vowel",
 "o is vowel",
 "p is not vowel",
 "q is not vowel",
 "r is not vowel",
 "s is not vowel",
 "t is not vowel",
 "u is vowel",
 "v is not vowel",
 "w is not vowel",
 "x is not vowel",
 "y is not vowel",
 "z is not vowel"]
~~~

## <i class="fa fa-graduation-cap" style="font-size:1em;"></i> Wrap up
* 特にこの記法を押していくつもりもない。試してみたかっただけ
* case 版、とかも面白いかも
* @cielavenir さん、ありがとうございます

## <i class="fa fa-arrow-right" style="font-size:1em;"></i> 参照
* <i class="fa fa-github-square" style="font-size:1em;"></i> [tbpgr_utils](https://github.com/tbpgr)
UE4 変なマテリアル入門 1（準備と簡単な例）

# index
[(イマココ)第1回（準備と簡単な例）](http://qiita.com/nkdtr/items/ca418529a1992ed5ab08)
[第2回（動くマテリアル）](http://qiita.com/nkdtr/items/81dca14e37a34fe32cb0)
[第3回（形を作る）](http://qiita.com/nkdtr/items/e6cf18160a5f3ff2fd18)
[第4回（形を動かす）](http://qiita.com/nkdtr/items/309274646d291ef676fd)
[第5回（テクスチャサンプリング*N）](http://qiita.com/nkdtr/items/6e09446659512c09e4bc)

# これなに
このシリーズでは、「質感を表現する」という普通の役割を逸脱したマテリアルの使い方について扱います。
なお、UE4の持ち味としている物理ベースシェーダーだとか、その他の高度な機能に触れるつもりは今のところありません。
どちらかというと数学ベースでの絵作りを楽しむというコンセプトです。すぐに綺麗なエフェクトを作りたいんじゃい！って人には向いていないかもしれないので悪しからず・・・！

UE4以外の環境でシェーダーを扱おうとしている方にも応用できる内容になっていくと思います。
特に、ShaderForge（Unity有料アセット）環境では、ノード名や左右の逆を除いてはほぼそのまま写せるはずです。

とはいえ初回なので、UE4でマテリアルを作成する手順とごく単純なマテリアルの例を紹介するに留めます。


# 下準備
## とりあえず何かテクスチャを入れる
最終的にはテクスチャなんかなくてもシェーダーで絵を作ったるわい！
ってレベルになるべきですが（そうでもない）、
とりあえず何か分かりやすい画像をインポートしておくとよいでしょう。
ホラー画像でも萌え絵でもよいです。
記事ではこの画像を使っておきますね。プロ生ちゃんです。
![hige01.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/45dd28b8-db29-cc6d-39cc-4b5bb121e555.png)

## マテリアルを作る
ContentBrowserで右クリック、Materialを選択。
![material.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/92965fe3-a4e7-37f7-83ad-94f32282fefe.png)

## マテリアルを編集する。
それをダブルクリック。

## Unlitにする
作ったコードをダイレクトに表示に反映することになるため、
学習にはこれが最も良いです。
![unlit.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/f47d751f-30dd-e7bb-5160-cc6b44beb5e9.png)

## TextureSampleノードを置いてEmissiveにつなぐ
そのままです。
![initial.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/b09fa485-13f6-6ebc-ded8-265cab9418e7.png)
これでテクスチャをそのまま出力するマテリアルができあがりです。
ここからカスタマイズしていきます。


# 基礎
マテリアルでできることを大雑把に二分しました。

## 変形
ここで扱うマテリアルは、多くの場合「変形」を伴います。
頂点を動かしてしまうことも可能ですが、
さしあたってはUV（TextureCoord）を書き換えることによる疑似変形を扱います。
少し試せば分かることですが、
この操作はピクセルのサンプル先を変更するものなので、
絵の動きはUVに対して行った操作と逆のような感じになります。

Uを +0.3 -> 左に 0.3 動く
![u_offset.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/21759f90-65a2-98e5-91e3-5df3566aecbf.png)

UVを x2 -> 0.5倍のサイズになる
![multiply.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/2f7dda04-4b98-38c1-d4ed-5d3fb656ccea.png)

尚、絵が繰り返しで表示されているのはテクスチャのAddressing設定がWrapになっているからです。


## 変色
TextureSampleで拾った値をゴニョゴニョして別の色に変更してしまいます。
ベタなものとしてはネガ反転やグレースケール変換等があります。

ネガ反転
![negate.PNG](https://qiita-image-store.s3.amazonaws.com/0/61553/a023fe96-71cf-bb5d-f19c-9a533c5960ad.png)


文章を書くのに疲れてきたので今回はここで終わりとさせていただきます。
Light TableでLeiningenのコマンドを実行するショートカットを作る

Light TableではSyntaxがClojureであれば任意のClojureコードを実行できるショートカットが作れるので、それを利用してLeiningenのコマンドを実行できるショートカットが作れます。

以下はWindowsでの設定例です。また、コマンドがあるディレクトリにPATHが通っていることが前提です。

```user.keymap
 [:editor "ctrl-shift-l" (:eval.custom "(clojure.java.shell/with-sh-dir \"E:/research/clojure/workspace\"
                                       (apply clojure.java.shell/sh \"lein.bat\" (map str '[__SELECTION__])))")]

```

エディタ上で`new sandbox-project`を選択してショートカットキーを実行すると、ちゃんとプロジェクトが作られて以下の表示がされました。

```:clj
{:exit 0, :out "Generating a project called sandbox-project based on the 'default' template.\r\nTo see other templates (app, lein plugin, etc), try `lein help new`.\r\n", :err ""}
```
milkcocoaでサインイン・ログイン

ちょっと気になっていたBaaS「milkcocoa」を使ってみた。
簡単にサインイン・ログインできる画面を作った。サインイン・ログインインって結構作るの面倒なのでこういうところを肩代わりしてくれるのはすごく役に立つ。
本当はチャットとかリアルタイムでコラボレーションできるサービスとかが作れればよかったのだけど、いかんせん時間がなかったので簡単にサインイン・ログインのページで勘弁していただきたい。

![スクリーンショット 2014-12-21 00.15.14.png](https://qiita-image-store.s3.amazonaws.com/0/11510/2dcc0996-d664-8810-17ad-6977360ebeba.png)

```html:index.html
<html>
<head>
	<script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="javascripts/Index.js"></script>
</head>
<body>
<h1>Test</h1>
<div>
	<h2>Log In</h2>
	<p>
		E-Mail:<input type="email" class="login-id"><br>
		PASS:<input type="password" class="login-pass"><br>
		<button onClick="logIn()">送信</button>
	</p>
</div>
<div>
	<h2>Sign In</h2>
	<p>
		E-Mail:<input type="email" class="signin-id"><br>
		PASS:<input type="password" class="signin-pass-1"><br>
		もう一度:<input type="password" class="signin-pass-2"><br>
		<button onClick="signIn()">送信</button>
	</p>
</div>
</body>
</html>
```

```js:Index.js

var milkcocoa = new MilkCocoa("https://appID.mlkcca.com:443");

function logIn(){
	var id = $('.login-id').val();
	var pass = $('.login-pass').val();

	if(id != undefined && pass != undefined){
		milkcocoa.login(id,pass,function(err,user){
			if(err === null){
				alert('ログインが完了しました');
			} else {
				if(err === MilkCocoa.Error.Login.FormatError){
					alert('メールアドレスが無効の形式です');
				}

				if(err === MilkCocoa.Error.Login.LoginError){
					alert('パスワードが無効です');
				}

				if(err === MilkCocoa.Error.Login.EmailNotVerificated){
					alert('メールアドレスが認証されていません');
				}
			}
		})
	} else {
		if(id === undefined){
			alert('メールアドレスを入力してください');
		}

		if(pass === undefined){
			alert('パスワードを入力してください');
		}
	}
}

function signIn(){
	var id = $('.signin-id').val();
	var pass_1 = $('.signin-pass-1').val();
	var pass_2 = $('.signin-pass-2').val();

	if(id != undefined){
		if(pass_1 == pass_2){
			milkcocoa.addAccount(id,pass_1,null,function(err,user){
				if(err == null){
					alert(user.email + 'のユーザ登録が完了しました');
				} else {
					if(err === MilkCocoa.Error.AddAccount.FormatError){
						alert('無効な書式のメールアドレスです');
					}

					if(err === MilkCocoa.Error.AddAccount.AlreadyExist){
						alert('すでに追加されているメールアドレスです');
					}
				}
			})
		} else {
			alert('パスワードが間違ってます');
		}
	} else {
		alert('メールアドレスを入力してください');
	}
}
```

サインインしたらメールが飛んで、そのメール中のURLをクリックすることでアクティベーションが完了しログインが可能になる。アクティベーションまでやってくれのには驚いた。

``` var milkcocoa = new MilkCocoa("https://appID.mlkcca.com:443"); ```　
のところは適宜書き換える。

milkcocoa公式のページでは:443はなかったが、ないと ```net::ERR_CONNECTION_TIMED_OUT```がでてしまう。

サーバーにあげて同じことが起こるかは確認していないが、ローカルで試すときはでてしまうので、後ろにポート番号:443をつける。

milkcocoa独自のコードは```new MilkCocoa```でインスタンス作るところと、``` addAccount ```でアカウントを作るところ、```login ```でログインするところとエラー処理ぐらいしかない。
これだけでサインイン・ログインができるページが作れてしまう。かなりお手軽で良い。

みたところまだ退会とかパスワードを変更する関数はないみたいだが、まだベータ版だしこれからなんだろう。これから機能が増えてくるのが楽しみだ。
イベント発生元要素の取得方法について

[Salesforce ハックチャレンジ 2014](http://jp.force.com/devzone2014/hackchallenge)で[LightningMessage](http://jphack2014.challengepost.com/submissions/30753-lightningmessage)を実装したとき、少しハマったのでLightningイベントとDOMイベントでコントローラアクションを呼び出したときにイベント発生元要素の情報を取得する方法についてまとめておきます。

## LightningイベントとDOMイベント
まずLightningイベントとDOM要素イベントについて説明します。
Lightningイベントとは、Lightningコンポーネントを操作した時に発生するイベントで、DOM要素イベントはブラウザのDOM要素イベントです。

Lightningイベントは自動的にコントローラ(<componentName>Controller.js)に定義したコントローラアクションと紐付けることができます。同様にonで始まるブラウザのDOM要素イベントてもコントローラ(<componentName>Controller.js)に定義したコントローラアクションと紐付けることができます。

## イベント発生元要素の取得
イベント発生元となる要素の取得方法が異なりますので注意が必要です。

### Lightningコンポーネントの場合
event.getSourceが定義されており、event.getSource()でLightningコンポーネントが取得できます。LightningコンポーネントのDOM要素は、event.getSource().getElement()で取得できます。DOM要素まで取得できれば、あとは属性を取得するだけですが、Lightningコンポーネントの場合記述できない属性もあります。
### DOM要素の場合
event.getSourceが定義されていません。event.targetでDOM要素を取得することができます。
ボタンの場合はそのまま取得できますが、&lt;div&gt;にリンクをつけている場合などは、イベント発生元要素が&lt;div&gt;のほうになります。&lt;a&gt;にidなどのつけている場合は、parentNodeを辿っていく必要があります。

## サンプルコード

```java:SampleCmp.app
<aura:application>
    <!-- Lightningイベント -->
    <div>
        <ui:button label="Framework Button" press="{!c.handleClick}"/>
    </div>
    <!-- DOMイベント -->
    <div>
        <input type="button" value="Html Button" onclick="{!c.handleClick}"/>
    </div>
    <div>
    <a id="link1" onclick="{!c.handleClick}">
        <div>Click me!</div>
    </a>
    </div>
</aura:application>
```

```js:SampleCmpController.js
({
    handleClick : function(component, event, helper) {
        if(event.getSource) {
            console.log("event.getSource()");
            console.log(event.getSource());
            console.log("event.getSource().getElement()");
            console.log(event.getSource().getElement());
        } else {
            console.log("target");
            console.log(event.target);
            console.log("target.parentNode");
            console.log(event.target.parentNode);
            console.log("target.parentNode.id");
            console.log(event.target.parentNode.id);
        }
    }
})
```

## まとめ
LightningイベントとDOM要素イベントでイベント発生元要素の取得方法が異なってきますので、LightningコンポーネントかDOM要素か注意して書き分ける必要があります。

Bootstrapなどを利用すると一覧表示して一覧の中から１つの要素をクリックするような動作は&lt;div&gt;と&lt;a&gt;で記述し、行ごとにidなどを指定して画面遷移先に表示するデータを切り替えます。そのため、実際に処理を記述するとDOM要素イベントを扱うことも多くなってきます。

現在は、ボタンやテキストボックスなど明示的に見える要素のみ組み込みのコンポーネントが準備してありますが、アクションを記述することが多い&lt;a&gt;にもコンポーネントを用意してあるとよりシンプルに書けるようになって嬉しいなぁと思いました(パラメータ付きのイベントやアクションになってほしい)。
Ubunts環境のSublime Text3で日本語入力を可能にする

はじめに
----------
Sublime TextはMac, Windows, Linuxに対応していますが、このうちWindowsとLinuxに関しては
デフォルトでは日本語入力に対応していません。

特にLinuxにおいては、パッケージ追加のみで対応できる内容になっていません。

ここではLinuxにおける対応方法について解説します。

ここで解説しているディストリビューションはUbuntsです。

以前、CentOSでも試したことがありますが、mozcとemacs-mozcが標準リポジトリや拡張リポジトリ(epel)に
含まれておらず、他のディストリビューションのrpmファイルを持ってきて`rpm`コマンドでインストールする
ことになります。

mozcのインストールは`rpm`コマンドでのインストールでもなんとかなりますが、emacs-mozcのインストールは
依存関係地獄になり、あきらめました。

なお、[こちら](http://yasuyuky.github.io/SublimeMozcInput/)には、CentOSにmozcとemacs-mozcをインストール
する場合に、`http://download.opensuse.org/repositories/home:/sawaa/`というリポジトリを追加して`yum install`が
できることが書かれていますが、2014年11月に確認した時には、このリポジトリは存在していませんでした。


環境説明
----------

* OS: Ubuntu 14.04.1 LTS

* Sublime Text: Sublime Text3
  * Sublime Text2では調査していません。


日本語入力対応方法
----------------------

mozcとemacs-mozcをインストールする

```bash
$ apt-get install ibus-mozc emacs-mozc
```

Sublime Textにてコマンドパレットを開き、`Package Control:Add Repository`を選択し、`https://github.com/yasuyuky/SublimeMozcInput`
と入力してリポジトリを追加

コマンドパレットから`Package Control:Install Package`で`SublimeMozcInput`を選択してインストール


キーバインド設定変更
-----------------------
日本語入力の切り替えは、`半角/全角`キーではなく、デフォルトでは`ctrl+\`です。

例えばキーバインドを`ctrl+space`に変更するには、`Preferences -> Key Bindings - User`を開き

```
{ "keys": ["ctrl+space"], "command": "toggle_mozc" },
```

の設定を追加します
Sublime Textから素早くiTermを開く

はじめに
---------
Sublime Textを使っていると、記述したスクリプトをターミナル上ですぐに実行したい
場合が多々あると思います。

Sublime Textの拡張パッケージである`MacTerminal`を使うと、Sublime Textで開いている
ファイルのディレクトリをカレンとディレクトリとしてターミナルが立ち上がるので
めちゃめちゃ便利です。

ちなみに、これに似たパッケージに`Terminal`をいうものがありますが、`MacTerminal`は
複数ターミナルを開くと、iTermのタブで開かれるのに対し、`Terminal`は新規にiTermを
立ち上げてしまうので、`MacTerminal`の方が便利だと思います。

インストール手順
------------------
Package Controlで`MacTerminal`を検索して、インストール

設定手順
---------
デフォルト設定だと、Macデフォルトのターミナルが開いてしまうので
設定設定変更する必要があります。

Sublime Textから`Preferences` -> `Package Settings` -> `MacTerminal` -> `Settings-User`を開く

下記の設定を入れる

```bash
{
  "directory_mode" : "project",
  "terminal"   :  "iterm"
}
```

Sublime Textを再起動する

利用手順
--------

ファイルを新規作成するか、既存ファイルの編集を行う

ショートカットキー`ctrl + command + t'を押すと、iTermが開く
Themeのカラースキームを編集する

はじめに
----------

Sublime Textでは有志の方が公開しているThemeに変更することが
できます。
Themeを変更したものの、カーソルの色などを変更したいなど
カラースキームを調整したくなることもあると思います。

ここでは、`Theme – itg.flat`を例に、Themeのカラースキームを
調整するための準備について説明します。

環境
------
* OS: Mac
* Sublime Text: バージョン3
* Theme: Theme - itg.flat

カスタマイズ用のファイルを準備する
------------------------------------

Theme - itg.flatのパッケージを適当なところにコピーする。
拡張子は`.zip`にする

```bash
cp ~/Library/Application\ Support/Sublime\ Text\ 3/Installed\ Packages/Theme\ -\ itg.flat.sublime-package /tmp/Theme\ -\ itg.flat.sublime-package.zip
```

解凍する

```bash
unzip /tmp/Theme\ -\ itg.flat.sublime-package.zip
```

必要なファイルをコピーする

**ここではitgのカラースキームにitg.darkを使用するものとします**

```bash
cp itg.dark.tmTheme ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/
```

以下の手順でSublime Textのカラースキームを変更する

`Preferences -> Color Scheme -> User -> itg.dark`の順で選択する
Sublime Text 3のカーソルを変更する手順

はじめに
----------
Sublime Textのカーソルはブロックになっていないため、見失いやすかったり
検索した時に、HITした場所がわかりづらかったりします。

ここではSublime Text 3のカーソルを変更する手順を説明します。


環境
-------
OS: Mac
Sublime Text: バージョン3
Theme: itg

手順
-------

1. コマンドパレットを開く

1. `Package Control: Add Repository`コマンドを叩く

1. `https://github.com/jlangston/BlockCursorEverywhere.git`をリポジトリとして追加する

1. コマンドパレットを開く

1. `Package Control: install Package`コマンドを叩く

1. `BlockCursorEverywhere`をインストールする

1. 下記を`~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/itg.dark.tmTheme`に追加する

```html
<dict>
  <key>name</key>
  <string>Block Cursor</string>
  <key>scope</key>
  <string>block_cursor</string>
  <key>settings</key>
  <dict>
    <key>foreground</key>
    <string>#000000</string>
    <key>background</key>
    <string>#0df505</string> <--ここを好きな色にするとカーソルに色が変わる
  </dict>
</dict>
```
sublimeText3でVimライクな操作を可能にさせる

Sublime TextのPackage Controlから`Vintageous`をインストールする。
   
   これを入れると、%sでの置換なども出来るようになります。

sublime Textのユーザ設定ファイルを下記のとおり変更する。(preferences -> Settings -User)

``` bash
"ignored_packages":["Vintage"],
↓
"ignored_packages":[],
```

ignored_packagesに登録されているパッケージは無視されるパッケージです。

デフォルトの設定だと、vimライクな操作を可能にする`Vintage`が無視された無視された状態に
なっているので、これを解除する必要があります。

Sublime Textのユーザ設定ファイルに下記を追記する。(preferences -> Settings -User)

```bash
"vintage_ctrl_keys": true,
"vintage_start_in_command_mode": true
```

* `"vintage_ctrl_keys": true`は、ctrl キーを使用する vim のショートカットが使えるようにする設定

* `"vintage_start_in_command_mode": true`は、ファイルを開いた時にコマンドモードで始まるようにする設定
berks install時のエラー

`bundle exec berks install --path ./cookbooks`を実行したら下記のように
怒られました。

```bash
$ bundle exec berks install --path ./cookbooks
DEPRECATED: `berks install --path [PATH}` has been replaced by `berks vendor`.
DEPRECATED: Re-run your command as `berks vendor [PATH]` or see `berks help vendor`.
```

Berkshelfのバージョンを調べたところ

```bash
$ berks -v
3.1.5
```

現在のバージョンでは下記のように書くらしいです。

```bash
$ bundle exec berks vendor cookbooks
```

気をとりなおして、`bunlde exec berks vendor cookbooks`を実行するとまたも怒られました。

```bash
$ bundle exec berks vendor cookbooks
DEPRECATED: Your Berksfile contains a site location pointing to the Opscode Community Site (site :opscode). Site locations have been replaced by the source location. Change this to: 'source "https://supermarket.getchef.com"' to remove this warning. For more information visit https://github.com/berkshelf/berkshelf/wiki/deprecated-locations
Resolving cookbooks dependencies...
Fetching 'nginx' from source at site-cookbooks/nginx
Fetching cookbooks index from https://supermarket.getchef.com...
Using nginx (0.1.0) from source at site-cookbooks/nginx
Using yum (3.3.2)
Using yum-epel (0.5.1)
Vendoring nginx (0.1.0) to /home/dev/study/chef/6/cookbooks/nginx
Vendoring yum (3.3.2) to /home/dev/study/chef/6/cookbooks/yum
Vendoring yum-epel (0.5.1) to /home/dev/study/chef/6/cookbooks/yum-epel
```

一応クックブックは作ってくれたようですが、Berkshelfの2系以降はBerksfileの1行目は
`site :opscode`ではなく`source "https://supermarket.getchef.com"`と書くようです。
ダンボールで自作HMDを作って遊ぼう！をして遊んだ話


#この投稿は スマフォスロットイン系HMD Advent Calendar 2014 の 21日目の記事です。
昨日は kakocom さんの "8インチタブレットで自作HMD" http://www.kako.com/blog/?p=3228 でした！

#概要
2014年7月5日 札幌市で、自作のスマフォスロットインHMDをつくる小さなワークショップをチームで開催しました。楽しかったです（小波）
講師は にくきう @ shiftsphere 先生です！

ダンボールを切り出して、HMDを生成している我々の様子。
![nikukyu.jpg](https://qiita-image-store.s3.amazonaws.com/0/26030/63594439-f1e9-5e16-e9b1-45a66760418e.jpeg)

#反省点
1.用意したダンボールが堅かった。
→柔らかいダンボールを選択すべき！

2.ゆえに時間内に完成しない方多数！

参加者の皆様には大変お手数をおかけしました！すみませんでした！
ご協力ありがとうございました！


##ワークショップに集まった自作HMDとそれっぽいやつ達
![1521588_759903930726376_923793818340365825_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/26030/597a85e2-438c-55b2-7580-eea83f781f20.jpeg)



##開催のきっかけ
開催のきっかけは"にくきう @ shiftsphere "先生が、自作のスマフォスロットインのHMDを作っていらしたことでした。

当時はOculusRiftのアプリを作成するのにUnityProが必須でした。
OculusとUnityProで20万円かかるのはハードルがあります。
スマフォならば多くの人が持っているし、アンドロイドならアプリ作成も無料でゴシゴシいける！となり、結論として"というか、自分が欲しいけど売ってないから開催"となりました。


#開催時の状況
企画当時はCardboradが発表されていませんでしたので、
スマフォスロットインHMDで遊ぶにはDurovis Diveか、
自作で作っていらっしゃる方々のものかーという状況でした。


##板書の様子
ダンボールの曲げ方等、とても勉強になりました。
#![10487473_759903990726370_7126523630656596909_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/26030/c3488f3a-cf53-fe64-5ff6-fa4eefc84657.jpeg)

#その後もなんかヤヴァいアプリが作られる。
3Dモデル提供 和牛先生 @ 3dcganimation 氏
#![BtCkyq9CMAAKxGv.jpg](https://qiita-image-store.s3.amazonaws.com/0/26030/6e7f18d7-5857-da94-83e9-dc49855655eb.jpeg)


#せっかく作った自作HMD！ゲームを遊ぼう！
イベント前からすでに自作HMDを多数作成されていた @divideby_zero 氏。
自作HMDで遊べるゲームをGooglePlayに上げて下さってます！
一度是非遊んでみて下さい！特に自作HMD系アプリの開発者の方！
かなり良いです！

DiveInGame
https://play.google.com/store/apps/details?id=jp.co.divide.by.zero.diveingame&hl=ja

![141220-0001.png](https://qiita-image-store.s3.amazonaws.com/0/26030/7c8bc244-a870-1489-5ca4-a63d7f43924c.png)

今はカードボードクローンを買った方が色々早いですね。
でもワークショップ is 楽しい✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
以上です！
bundleコマンドのパスを通す方法

はじめに
---------

bundlerをインストール後にGemfileを書いて、必要なライブラリをインストールするために`bundle`コマンドを
実行する必要がありますが、`bundle`コマンドのPATHが通っていない場合があります。
ここではその対処法をメモしています。

bundleコマンドのPATHを通す方法
--------------------------------

bundlerをインストールする:

```bash
gem install bundler
```

EXECUTABLE DIRECTORYのPATHを確認する

```bash
$ gem environment
RubyGems Environment:
  - RUBYGEMS VERSION: 2.0.14
  - RUBY VERSION: 2.0.0 (2013-11-22 patchlevel 353) [x86_64-linux]
  - INSTALLATION DIRECTORY: /home/dev/.rbenv/versions/2.0.0-p353/lib/ruby/gems/2.0.0
  - RUBY EXECUTABLE: /home/dev/.rbenv/versions/2.0.0-p353/bin/ruby
  - EXECUTABLE DIRECTORY: /home/dev/.rbenv/versions/2.0.0-p353/bin <-ここ
  - RUBYGEMS PLATFORMS:
    - ruby
    - x86_64-linux
  - GEM PATHS:
     - /home/dev/.rbenv/versions/2.0.0-p353/lib/ruby/gems/2.0.0
     - /home/dev/.gem/ruby/2.0.0
  - GEM CONFIGURATION:
     - :update_sources => true
     - :verbose => true
     - :backtrace => false
     - :bulk_threshold => 1000
  - REMOTE SOURCES:
     - https://rubygems.org/
```

PATHを通す
-----------

```bash
$ echo $HOME
/home/dev

$ echo 'export PATH="$HOME/.rbenv/versions/2.0.0-p353/bin:$PATH"' >> ~/.bash_profile 

$ source ~/.bash_profile 

$ bundle -v
Bundler version 1.7.3
```
UE4のShading Modelで独自の描画機能を実装してみたよ！（Shading Model応用編）




みなさんすみません！ m( _ _)m

# 進捗ダメです・・・。

個人的にちょっとばたばたしていてまだ完成していません。
取り急ぎ明日のnanoさんへのリンクをしておきたいと思います。


明日12/21の担当はnanoさん（[@nano06126728](https://twitter.com/nano06126728 "nanoさん")）で、
タイトルは「スプラインの最近点探索を作ってみた」です！nanoさんよろしくお願いします。
ChefのAttributeの優先順位

ChefにはAttributeの値を定義できる場所が複数あります。
同名のAttributeを定義した場合、優先度の高いAttributeの値が
最終的に利用されることになります。

下の表では、下から上に優先度が高くなっています。

また、リポジトリのディレクトリを例として`/tmp/chef_repo`、クックブックの
ディレクトリを`/tmp/chef_repo/site-cookbooks/test_cookbook`としています。

優先度 | 定義場所 | ディレクトリフルパス
:----:|:----|:----
1 | Nodeオブジェクト | /tmp/chef_repo/nodes/node01.json
2 | ロール | /tmp/chef_repo/web.json
3 | Environments | /tmp/chef_repo/environments/development.json
4 | レシピの中で定義されたAttribute | /tmp/chef_repo/site-cookbooks/test_cookbook/recipes/default.rb
5 | クックブック内のAttributeファイル | /tmp/chef_repo/site-cookbooks/test_cookbook/attributes/defautl.rb
redisをソースコードからインストール＋ちょっと使う

redisをソースコードからCentOSにインストール＋ちょっとだけ使う方法を紹介します。
# 入手+解凍
下記URLの右にある「Download」ボタンをクリックし、tarballを入手します。
http://redis.io/download
wgetを使う場合は、
`$ wget http://download.redis.io/releases/redis-2.8.19.tar.gz`

tarballを解凍
`$ tar zxf redis-2.8.19.tar.gz`

# ビルド
redisにはconfigureスクリプトはないので、redisのトップディレクトリにてmakeをします。

```lang:
$ cd redis-2.8.19
$ make
$ su -
# make install
```

# 使ってみる
## サーバ起動
redis-serverコマンドでredisを起動します。
`$ redis-server`
下記が出れば起動成功です。デフォルトは6379ポートで動きます。

```lang:
[26047] 20 Dec 23:47:33.766 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
[26047] 20 Dec 23:47:33.768 * Increased maximum number of open files to 10032 (it was originally set to 4864).
                _._
           _.-``__ ''-._
      _.-``    `.  `_.  ''-._           Redis 2.8.19 (00000000/0) 64 bit
  .-`` .-```.  ```\/    _.,_ ''-._
 (    '      ,       .-`  | `,    )     Running in stand alone mode
 |`-._`-...-` __...-.``-._|'` _.-'|     Port: 6379
 |    `-._   `._    /     _.-'    |     PID: 26047
  `-._    `-._  `-./  _.-'    _.-'
 |`-._`-._    `-.__.-'    _.-'_.-'|
 |    `-._`-._        _.-'_.-'    |           http://redis.io
  `-._    `-._`-.__.-'_.-'    _.-'
 |`-._`-._    `-.__.-'    _.-'_.-'|
 |    `-._`-._        _.-'_.-'    |
  `-._    `-._`-.__.-'_.-'    _.-'
      `-._    `-.__.-'    _.-'
          `-._        _.-'
              `-.__.-'

[26047] 20 Dec 23:47:33.770 # Server started, Redis version 2.8.19
[26047] 20 Dec 23:47:33.779 * DB loaded from disk: 0.009 seconds
[26047] 20 Dec 23:47:33.779 * The server is now ready to accept connections on port 6379
```

## クライアント接続
実際に`set`, `get`をしてみます。redis-serverに繋ぐときは、redis-cliです。

```lang:
$ redis-cli
127.0.0.1:6379> set hoge 123
OK
127.0.0.1:6379> get hoge
"123"
```
javaアクセス制御一覧

クラスとインタフェースに対するアクセス制御
---------------------------------------------

なし | public
:----|:----
同じパッケージからのみ使える | 他のパッケージから使える

* 覚えるポイント:
  * アクセス制御は`なし`か`public`の2種類

クラスのメソッドとフィールドに対するアクセス制御
-------------------------------------------------

 | publicなしクラス | publicありクラス
:----|:----|:----
private | クラス内でのみ使える | クラス内でのみ使える
なし | 同じパッケージからのみ使える | 同じパッケージからのみ使える
protected | 同じパッケージからのみ使える | 同じパッケージとサブクラスからのみ使える
public | 同じパッケージからのみ使える | 他のパッケージから使える

* 覚えるポイント:
  * クラスのアクセス制御　と　メソッド(フィールド)のアクセス制御のうち、制約が厳しい方が優先させる
  * 制約の厳しさ比較
    * public < protected < なし < private

インタフェースのメソッドとフィールドに対するアクセス制御
----------------------------------------------------------

 | publicなしインタフェース | publicありインタフェース
:----|:----|:----
なし | 同じパッケージからのみ使える | 他のパッケージから使える
public | 同じパッケージからのみ使える | 他のパッケージから使える

* 覚えるポイント:
  * アクセス制御は`なし`か`public`の2種類
  * インタフェースのアクセス制御　と　メソッド(フィールド)のアクセス制御のうち、インタフェースの
    アクセス制御が優先される
    * publicなしインタフェースのメソッド(フィールド): `同じパッケージからのみ使える`パターンのみ
    * publicありインタフェースのメソッド(フィールド): `他のパッケージから使える`パターンのみ
バブルソート、選択ソート、挿入ソート

『[基礎から学ぶデータ構造とアルゴリズム](http://www.amazon.co.jp/dp/4320122437/chintara-22)』「4.1 単純な整列アルゴリズム」の勉強メモです。自分なりに咀嚼したソート手順とサンプルコード（Ruby）をまとめています。

# バブルソート

1. 配列の末尾から先頭に向かって隣り合う要素を比較する
2. 後ろの要素が前の要素よりも小さければ交換する
3. 1, 2を繰り返す

```rb
def bubble_sort(a)
  n = a.size
  0.upto(n - 2) do |i|
    (n - 1).downto(i + 1) do |j|
      if a[j] < a[j - 1]
        a[j], a[j - 1] = a[j - 1], a[j]
        p a
      end
    end
  end
end

bubble_sort [2, 5, 3, 1, 4, 6]
```

```
[2, 5, 1, 3, 4, 6]
[2, 1, 5, 3, 4, 6]
[1, 2, 5, 3, 4, 6]
[1, 2, 3, 5, 4, 6]
[1, 2, 3, 4, 5, 6]
```


# 選択ソート

1. i = 0, 1, ..., n - 2 について、a[i + 1] ～ a[n - 1] のうち最小の要素を探し、a[i] と交換する

```rb
def selection_sort(a)
  n = a.size
  0.upto(n - 2) do |i|
    min = i
    (i + 1).upto(n - 1) do |j|
      min = j if a[j] < a[min]
    end
    if i != min
      a[i], a[min] = a[min], a[i]
      p a
    end
  end
end

selection_sort [2, 5, 3, 1, 4, 6]
```

```
[1, 5, 3, 2, 4, 6]
[1, 2, 3, 5, 4, 6]
[1, 2, 3, 4, 5, 6]
```

# 挿入ソート

1. 先頭の要素を整列済みとする
2. 整列済み要素の次の要素を、整列済みの部分の適切な位置に挿入する
3. 要素がなくなるまで、2 を繰り返す

```rb
def insertion_sort(a)
  n = a.size
  1.upto(n - 1) do |j|
    temp = a[j]
    i = j
    while i > 0 && a[i - 1] > temp
      a[i] = a[i - 1]
      i -= 1
    end
    if a[i] != temp
      a[i] = temp
      p a
    end
  end
end

insertion_sort [2, 5, 3, 1, 4, 6]
```

```
[2, 3, 5, 1, 4, 6]
[1, 2, 3, 5, 4, 6]
[1, 2, 3, 4, 5, 6]
```

# リンク

* [シェルソート](http://qiita.com/iwamot/items/5414ee54ad4c53d0529f)
* [クイックソート](http://qiita.com/iwamot/items/a13e4e1a73960ff0c4e7)
* [マージソート](http://qiita.com/iwamot/items/7f83e6c7f368839a3429)
Ruby | 暗黙的で簡潔なイディオムを明示的なコードに置き換えてみる #ruby

# 暗黙的で簡潔なイディオムを明示的なコードに置き換えてみる #ruby
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
暗黙的で簡潔なイディオムを明示的なコードに置き換えてみます
## <i class="fa fa-question-circle" style="font-size:1em;"></i> 暗黙的で簡潔なイディオムって？
Ruby の定石として簡潔に書けるけど、記法自体を知らないと一瞬戸惑うような物を指す。

* ||= によるデフォルト値の代入

~~~ruby
['hoge', nil].each do |text|
  text ||= 'default'
  puts text
end
__END__
hoge
default
~~~

* !! による真偽値への変換

~~~ruby
!!(nil)            # => false
!!(false)          # => false
!!(true)           # => true
!!("other object") # => true
~~~

他にも色々あると思う。

知ってて慣れてるけど違和感がないけど、知らない人から見るとある種の呪文。
短く書けることの価値をとるのか、わかりやすさをとるのか、みたいな話。

## <i class="fa fa-exclamation-circle" style="font-size:1em;"></i> 明示的なコード 
別にこの方がいい！とかっていう話でもなくとりあえず書いてみた、程度の話です。

* ||= によるデフォルト値の代入 を明示的なコードに変更してみる

~~~ruby
module Kernel
  def set_default_if_falsy(value, default)
    value ||= default
  end
end

['hoge', nil].each do |text|
  text = set_default_if_falsy(text, 'default')
  puts text
end
__END__
hoge
default
~~~

名前がちょっと長いけど。

* !! による真偽値への変換 を明示的なコードに変更してみる

~~~ruby
class Object
  def to_bool; !!(self) ;end
end

nil.to_bool            # => false
false.to_bool          # => false
true.to_bool           # => true
"other object".to_bool # => true
~~~