OmniAICreator/Qiita-1.07M huggingface dataset:
プロセス監視ツールのまとめ

Linuxで動作するプロセス監視をまとめてみました。

* monit
 * [公式] http://mmonit.com/monit/
 * プロセス監視系汎用
 * 単位時間ごとにチェックするタイプ
* Supervisor
 * [公式] http://supervisord.org/
 * Python製
 * http://d.hatena.ne.jp/anatoo/20120310/1331321778
* forever
 * [公式] https://github.com/nodejitsu/forever
 * Node製
 * http://kshigeru.blogspot.jp/2011/10/nodejs-forever.html
 * Coffeeで動かす場合 http://blog.feelmy.net/2013/02/03/hubot-irc/
* God
 * [公式] http://godrb.com/
 * Ruby製
* Daemontools
 * [公式] http://cr.yp.to/daemontools.html
 * djb製

### 所感

monitとSupervisorの2つを場合によって使い分ける感じかな。
上記2つはパッケージ化されているのでインストールが楽だと思います。

### todo

* もう少しいろいろ書く
* Windowsについても調べたほうがいいよね
RaspberryPiがどんなネットワークにいようと、raspiのIPアドレスを調べることなくssh接続できるようにする

# RaspberryPiを母艦に

RaspberryPiがどんなネットワークにいようと、raspiのIPアドレスを調べることなくmacbookからssh接続できるようにする。
これで、外出先でノマドしてても家にあるraspiの状態が見れるし、開発もできちゃうぞ
Github：https://github.com/mainyaa/RaspberryPi-Mothership

## 必要なもの

AWS/GCEにmicroやnanoインスタンス。月額300円ぐらい

## 簡単な説明

raspiからssh-tunnelインスタンスに常にssh Portforwardしている状態にします。いわゆるSSH Tunnelです。

### [macbook] <-> [(port:22)ssh-tunnel(port:20022)] <-> [raspi]


## 環境構築

### **raspi**
  - `ssh-keygen`
  - `cat ~/.ssh/id_rsa.pub`
    - ssh公開鍵をコピー

### **ssh-tunnel**

  - ssh-tunnelインスタンスを立ち上げ、タイプはmicroやnano
  - ssh接続し、**pi**ユーザー追加、ssh公開鍵を貼り付け
    - `ssh ssh-tunnel`
    - `useradd -s /bin/zsh -u 10000 -m -d /home/users/pi pi`
    - `sudo su - pi`
    - `mkdir .ssh`
    - `vim .ssh/authorized_keys`
      - ssh公開鍵を張り付け

### **macbook**
  - ~/.ssh/configに以下を追加。[]の部分は適宜書き換え

```lang:~/.ssh/config
Host ssh-tunnel
  StrictHostKeyChecking no
  UserKnownHostsFile /dev/null
  User pi
  Hostname [SSH-TUNNEL IP]
  LogLevel QUIET
  IdentityFile ~/.ssh/google_compute_engine
```

  - 繋がるか確認
    - `ssh ssh-tunnel`

### **raspi**

  - ~/.ssh/configに以下を追加。[]の部分は適宜書き換え

```lang:~/.ssh/config
Host ssh-tunnel
  StrictHostKeyChecking no
  UserKnownHostsFile /dev/null
  User [USERNAME]
  Hostname [SSH-TUNNEL IP]
  LogLevel QUIET
  IdentityFile ~/.ssh/google_compute_engine
```

  - 繋がるか確認
    - `ssh ssh-tunnel`
  -  起動スクリプトを追加。Debianの起動スクリプト用意するのは面倒くさいからGithubにあげておきました
    - `sudo apt-get install -y autossh`
    - `git clone https://github.com/mainyaa/RaspberryPi-Mothership.git`
    - `sudo cp ./RaspberryPi-Mothership/init.d/ssh_tunnel /etc/init.d/`
    - `sudo cp ./RaspberryPi-Mothership/sbin/ssh_tunnel /usr/sbin/`
    - `sudo insserv ssh_tunnel`
    - `sudo reboot`

### **macbook**（実際に繋いで見る）
  - 1度ssh-tunnelに接続。（ssh-tunnelがGCEの場合のみ)
      - `gcloud compute --project "[PROJECT_ID]" ssh --zone "asia-east1-b" "ssh-tunnel"`

## macbookからraspiに接続

### **`ssh -o 'ProxyCommand ssh ssh-tunnel nc %h %p' -p 20022 pi@localhost`**
  - これでRaspberryPiが母艦になりました！どこからでもssh-tunnelごしに繋がる!

## つっこみ大歓迎

間違ってたり、もっと便利な方法があったら教えて下さい！PullReqも歓迎です！

# 勉強会&もくもく会やります

5/15に[Raspberry Pi勉強会＆もくもく会](http://connpass.com/event/30585/)を開催します。
初心者もそうじゃない方もRaspberry Piで学んで遊ぼうというゆるい会です。**発表者募集中**

勉強会するとRaspberry Piで遊びたくなるよね。じゃあ、勉強会のあとにもくもくしたらいいじゃない！ということで、２部構成にしてみました。
Googleスプレッドシートのアドオンを作る：プロジェクトの作成

# 動機

JavaScriptがある程度書けてChromeとGoogleスプレッドシートを使っているなら、自分用のアドオンを作ればめちゃくちゃ捗るのではないかと思った。

# 概要

Googleスプレッドシートのアドオンのプロジェクト作成手順を説明する。

# プロジェクト作成手順

## 1. ファイルを追加

新しくスプレッドシートを追加する。

## 2. スクリプトエディタを開く
![01.png](https://qiita-image-store.s3.amazonaws.com/0/95607/c66b5b58-14d5-ae74-295c-ea5100924261.png)
![02.png](https://qiita-image-store.s3.amazonaws.com/0/95607/0be86f56-309f-cff8-c258-5d6072689dc0.png)

追加したスプレッドシートを開き、上部メニューから「ツール > スクリプトエディタ」をクリックすると、プロジェクトが作成される。

## 3. プロジェクトを保存する
![03.png](https://qiita-image-store.s3.amazonaws.com/0/95607/bcb9c32e-0130-0374-cd26-8ae7b689e8dc.png)
![04.png](https://qiita-image-store.s3.amazonaws.com/0/95607/19303638-572f-83cd-758c-d97ec79fcab7.png)

「ファイル > 保存」もしくは懐かしのフロッピーディスクアイコンをクリックすると、プロジェクト名を入力するダイアログが表示される。
適当なプロジェクト名を入力してOKをクリックすると、プロジェクトが保存される。

# 参考Webサイト
[Managing Projects | Apps Script | Google Developers](https://developers.google.com/apps-script/managing_projects#creating-a-project-from-google-docs-sheets-or-forms)
rsyncでdumpの同期

rsyncでdumpの同期

* LXCコンテナのバックアップ先にNFSを指定するととんでもなく時間がかかる。
    * 120GBで17〜23時間程。(ローカルでは1時間50分〜2時間10分程)
* これはLXCコンテナ内のファイルを一個ずつNFS先に転送してから圧縮するのが原因。
    * ローカルでバックアップしたものをNFSに転送することにした。

## 準備

* rsyncでミスった時の被害を減らすため、一般ユーザ(user1)を作成して実施する。

```bash:一般ユーザに権限付与
chown -R user1:users /mnt/pve/nfssrv/
```
## cron

```bash:user1にて実施
30 2 * * * (/home/user1/bin/rsync_dump.sh)
```

この時間は、おそらくこのくらいにバックアップ終わってそうだな、という時間を指定した。
(6時間おきとかに実行してもいいかも。)


## バックアップスクリプト

```bash:/home/user1/bin/rsync_dump.sh
#!/bin/sh

# nfssrvをマウントしているか確認
grep nfssrv /proc/mounts > /dev/null
if [ ! $? -eq 0 ];then
    echo "/mnt/pve/nfssrv/dump/ is not mount."
    exit 1
fi

#rsync -a --delete -h --list-only \
rsync -a --delete -h \
  --include='*.lzo' \
  --include='*.log' \
  --exclude='*' \
  /mnt/g1000_1/dump/ /mnt/pve/nfssrv/dump/
```

## 参考

* [rsyncメモ - Qiita](http://qiita.com/tukiyo3/items/97cf163b5efa02305aad)
技術英語 / 電子工作 > Platinum Resistance Thermometers (PRT) / Pt100とPt1000のテーブル

@ Adam Taylor MicroZed Chronicles - Using the Zynq 101 [Kindle Edition]

No. 1282 / 2129

> Platinum Resistance Thermometers (PRT)

PRTという略語を使うというのを初めて知った。

PRTで検索すると以下を見つけた

http://jp.flukecal.com/node/18549
> PRT Temperature vs. Resistance Table

<hr>

PRT (白金測温抵抗体）のPt100とPt1000のテーブル
http://kitchen23.blog85.fc2.com/blog-entry-25.html
新人プログラマがまずは身に付けたいプログラマ脳

早速ですが、以下のmainメソッド内にある変数aと変数bの値を入れ替えてください、と言われたらどうしますか？

```Main.java
public class Main {
	public static void main(String[] args) {
		int a = 10;
		int b = 20;
	}
}
```

すぐに思い付くのは以下のように変数cという一時的な変数を用意して入れ替える形かと思います(話の本質から外れるので扱いませんが、これはXOR交換アルゴリズムを使えば一時的な変数を使わずに実現できます)。

```Main.java
public class Main {
	public static void main(String[] args) {
		int a = 10;
		int b = 20;

		// 入れ替え
		int c = a;
		a = b;
		b = c;
	}
}
```

# プログラマ脳とは
プログラマ脳とは、事象の前後関係の整合性を取りながら簡潔かつ効率的かつ論理的に物事を組み立てる力です。上記の例の場合、以下のようになります。
　1. 一時的な変数cを用意する
　2. cにaを代入する(aをcに一時的に退避させる)
　3. aにbを代入する
　4. bにcを代入する(2で退避していたaを代入する)
プログラマにとって、この順序を自分で組み立てられるかが非常に重要です。こういった力を身に付けないと「[破片プログラマーの悲しみ](http://d.hatena.ne.jp/jflute/20160330/fragramming)」のようになります。なので、まずはこの力を身に付けましょう。
また、この力はプログラミングはもちろんのこと、人に物事を説明をする時、資料を作成する時、等プログラミング以外の業務でも必要な力になってきます。

# どうやって身に付けるか？
本来であれば、業務内で0からプログラムを組み立てて先輩や上司にレビューしてもらいながら身に付けるのが一番だと思いますが、現場によってはそういった業務が割り当てられない場合もあります。
なので、そういった場合は自主的に[アルゴリズム](http://e-words.jp/w/%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0.html)なんかを学習すると良いかと思います。アルゴリズムの中でもソートアルゴリズムなんかは比較的分かりやすいです。
[いろいろなソートアルゴリズム](http://www.ics.kagoshima-u.ac.jp/~fuchida/edu/algorithm/sort-algorithm/)
[初中級エンジニアが【アルゴリズムを優しく学べる】本とサイト16選](http://paiza.hatenablog.com/entry/20141014algorithm)
自分なんかはバブルソートやクイックソートなんかを研修でやった記憶があります(もう10年前くらいですが)。
あとは、常日頃から「調べる前にまずは考える」癖をつけると良いかと思います。

ちなみに冒頭の入れ替え問題について、最近のプロセッサ事情だとXOR交換アルゴリズムの方が遅いそうです。
[XOR 交換アルゴリズムと一時変数を使ったスワップ](http://d.hatena.ne.jp/biwakonbu/20130112/1357956843)
[Survey]Understanding How Image Quality Affects Deep Neural Networks

[Understanding How Image Quality Affects Deep Neural Networks](http://arxiv.org/pdf/1604.04004v1.pdf)


**画像劣化**がDeep Learningを使った画像認識の性能にどの程度影響があるかを調べた論文です。
多くのComputer VisionのApplicationは入力が比較的高画質を期待しているが、**Surveillance**や**Mobile Phone**などではLow Image Qualityも考慮すべき重要な要因です。
論文では、４つの最新deep neural network modelに対し、５つの劣化（**Blur**, **Noise**, **JPEG**, **JPEG2000**, **Contrast**)した画像を入力した時の性能を調査しています。

# Model
1. Caffe Reference Model
2. VGG-CNN-S
3. VGG-16
4. CoogleNet

![image](https://qiita-image-store.s3.amazonaws.com/0/100523/2761a9e5-fba9-c7ea-4028-0da398deaa0b.png)


# Distortion
1. Blur
 Gaussian Blur $\sigma=1~9$, Kernel Size=$4\sigma$
2. Noise
 Gaussian Noise 標準偏差 10~100 10刻み
3. Jpeg
 Picture Quality 2~20 2刻み (20以上は性能劣化があまり大きくない）
4. Jpeg2000
 PSNR 20~40 2刻み
5. Contrast
 Gray imageを原画にBlending ブレンド率 0~1 0.1刻み

**Distortion例**

![image](https://qiita-image-store.s3.amazonaws.com/0/100523/33e21b05-1521-ba7b-b0f7-7649cf3741ac.png)


# Result
結論としては**Blur**と**Noise**が性能劣化が大きく、残りは影響が少ない。
Networkが特定のTextureを使ってClassificationしているからBlurによりTextureがなくなると性能が悪化するのではないかとのこと。
Noiseの場合は、標準偏差が90で性能が20%以下になるが、人間ならまだ認識できるレベルとのこと。

下記は各Distortion毎のAccuracyをグラフにしたもので、横軸は右に行くほど劣化が激しくなる。

![image](https://qiita-image-store.s3.amazonaws.com/0/100523/527b4030-5f64-57fe-330b-9b6d6860b8bc.png)

下記はDistortion毎の画像とAccuracyを列挙したもの

![image](https://qiita-image-store.s3.amazonaws.com/0/100523/ab998120-bbf1-1621-de5e-880c40adb37e.png)

下記はDistortionがBlurとNoiseのVGG16のFirst Convolutional LayerとLast Convolutional Layerを可視化したもの。
Blurの場合は最初のLayerは差が小さいが、最後のLayerになると差が大きくなっている。一方Noiseは、最初のLayerで沢山Filter Responseがあり、それが後段に伝播している。

# 感想
**Image Quality**が性能に与える影響を知っておくのは実応用上は重要な気がします。
Codeｃによる劣化が性能にあまり影響を与えなかったのは、Codecがうまく画像の特徴を残しつつ圧縮しているということなのかなと思います。
ただ各Distortion毎に横軸が異なるので、公平な比較なのかちょっと疑問が残る気がします。
劣化させた画像をつかって学習させればいいのではと思いますが、それだと綺麗な画像の時の性能が落ちるだろうとのことです。（実際にやってはいない）
知見としては有意義なのでは無いかと思います。
日本リージョンが来る前にGoogleCloudPlatformを使える状態にしてみた

GoogleCloudPlatFormは今年後半に日本リージョンが来るらしいので、遅ればせながらとりあえず登録したときのメモ。
AWSをメインに使っているので比較をしつつ。

# GoogleCloudPlatformとは

* Google社が提供するIaaS/PaaSのサービス
* AWSと似たような感じ(なはず)


# 比較
| AWS | GCP |
|:--|:--|
| EC2 | GCE |
| S3 | GoogleCloudStrage |
| ELB | LoadBalancing |
| SecurityGroup | Firewall |
| RDS | CloudSQL |
| RedShift | BigQuery |
| Lambda | CloudFunctions |
* AWSでできることはとりあえずできそう


# 使ってみる
Googleのアカウントを取得

[こちら](https://cloud.google.com)へアクセス

右上の「My console」をクリック
![gcp1.png](https://qiita-image-store.s3.amazonaws.com/0/98887/82e1e8c9-0c21-68c4-875c-a29ee4c6ea17.png)

GoogleApiを使ってるとプロジェクトができてるみたい。
が、とりあえず「プロジェクトを作成」
![gcp2.png](https://qiita-image-store.s3.amazonaws.com/0/98887/40dfc4ba-c8da-fad4-cc96-da58e2d29cf1.png)

プロジェクト名を適当に入力し、「作成」
「詳細設定を表示」でリージョンが選べるみたいです。デフォルトはus-central
![gcp3.png](https://qiita-image-store.s3.amazonaws.com/0/98887/65131c48-2a28-7694-5e98-11dae7147f40.png)

するとプロジェクトができる
![gcp4.png](https://qiita-image-store.s3.amazonaws.com/0/98887/8c4762a0-cfa8-a514-47a6-fdb1427347c3.png)

あとはプロジェクト名をクリックして、使いたいのを選ぶ


# 課金情報を登録する

プロジェクト名をクリックすると、ダッシュボードが表示される。
![gcp5.png](https://qiita-image-store.s3.amazonaws.com/0/98887/b3346fb8-7c88-f399-2018-289fcada2464.png)

「ComputeEngineを試す」と表示されてたので、とりあえずクリック
「ComputeEngineのクイックスタート」を始める。
![gcp6.png](https://qiita-image-store.s3.amazonaws.com/0/98887/29e70d92-35f8-44a7-813b-f383d4da93e3.png)

やはり課金情報の入力が必要。
![gcp8.png](https://qiita-image-store.s3.amazonaws.com/0/98887/821891c6-e8a1-d524-7f16-1beb5c10830e.png)

「請求先アカウントの作成」をクリックし、先へ。

頑張って入力。
![gcp9.png](https://qiita-image-store.s3.amazonaws.com/0/98887/45923c19-2264-2605-ec23-89143434e8f9.png)

入力すると、60日間の無料トライアル、300ドルのクーポンをゲット
本登録するまでは課金はされない？（その代わり、課金のかかる処理を300ドル分以上するときは本登録が必要？）


# 日本リージョン
日本リージョンのベータ版申し込みができそうなので申し込み。
![gcp10.png](https://qiita-image-store.s3.amazonaws.com/0/98887/4ad907e6-1dc1-05a6-882e-c6637cb35774.png)

# まとめ

* Googleアカウントを持ってたので、AWSより取得しやすい
* ただ、課金周りとかまだあやふや
* というか課金情報の登録方法はこれが正なのか・・・
* とりあえず試用期間中、色々触ってみる
RDBについて


railsでもRDBを使っていますが、正確な定義や仕組みについて調べてみました。

##RDBとは
リレーショナルデータベースの略。関係データベースと訳され、データを複数の **表** として管理し、表と表の関係を定義することで、複雑なデータの関連性を扱えるようにしたデータベース管理方式。

##リレーショナルモデルとは
+ 現実世界のデータを **リレーション** と呼ばれる概念を用いて表現するデータモデル。
+ データモデルと言ってもER図等のモデリングツールとは別物。　
+ リレーショナルモデルは設計を目的とするのではなくどのように表現するか。

##リレーションとは
アソシエーションなどからリレーションとは *関連付け* とか *テーブル同士の繋がり* と認識してる方が多いですがこれは誤解です。
正確にはリレーションに相当するもはテーブルであり、見出しと本体のペアです。見出しとは0以上のattributeであり、名前とデータ型のペア。本体はattributeの集合であるタプルです。

##リレーショナルモデルは集合である
前提としてRDBにNULLを入れてはならないとされています。
理由としてRDBは集合であるからであり、NULLがあることで集合としての意味をなさなくなるからですね。

![20140924215431.png](https://qiita-image-store.s3.amazonaws.com/0/108495/5cf62a16-dbb1-f408-cd18-e698b0b4b6f1.png "20140924215431.png")

このベン図によるとAの集合は `1,2,3` 、Bが `2,3,4,5` 、ABが `2,3` になります。
これをRDBに置き換えるとA,BがリレーションでありABはA,Bの導出表なります。attributeは数値でありデータが `1,2,3,4,5` ですね。
この時にNULLが存在するとAにもBにも存在することができなくなりRDBを集合として表現することができなくなります(言い換えるとDBに保存したデータを抜き出すことができなくなる)。
よってRDBにおいてNULL制約は必須なものになります。

##RDBの値は追加、更新、削除はできない
普段railsを使う時にテーブルの値を追加したりすると思いますが本来RDBにおいてこれらの作業はできません。
RDBにおいてリレーションとはテーブルであり、テーブルに保存されるものはデータです。
プログラミングで例えると```a = 1```をした時に```a```は変数であり、```1```が値になります。```a = 2```とすることで、更新したように見えますが実際は```a```という変数を更新したのでありその中にある```1```を```2```に更新したわけではありません(それができると1という値の意味が変わってくる)。

RDBにおいて変数にあたるのがrelvarです(リレーションが保存されるもの)。.createなどで作っているものはテーブルに値を作成しているわけではなく、もともとあるrelvarと.createでできたタプルの和集合であり、その結果をrelvarに代入することでデータの追加をしているように見せかけています。




###要するに
RDBはプログラミングとほとんで似ている(変数という概念がある)。
RDBは集合の理念を用いて作成されている。
SQLはRDB用に作られたものなのでこれらの規約を守れないと真価を発揮できない。

###やってみて
普段使っているDBは論理からやってみるとすごいめんどくさい...
ただrails経由でDBを触っていると勘違いが多くて(追加できなかったりとか)とても勉強になった。
MackerelでDocker Cloudを監視をする(Agent containerをone-button deploy)

# 作った

Repository
https://github.com/Sho2010/docker-mackerel-container

↓これ！！！

[![Deploy to Docker Cloud](https://files.cloud.docker.com/images/deploy-to-dockercloud.svg)](https://cloud.docker.com/stack/deploy/?repo=https://github.com/Sho2010/docker-mackerel-container)

docker cloudにアカウントを持ってる人は押すとこんな画面がでるはず
あとはAPI key書き換えてdeployしたらmackerelで監視が始まる。

<img width="1198" alt="mackerel.png" src="https://qiita-image-store.s3.amazonaws.com/0/24105/763ae8b4-9387-c481-3284-28f83578e5cb.png">

# Deploy button最高

git repositoryのtop directoryに以下のファイルのいずれかがある場合

* `docker-cloud.yml`
* `docker-compose.yml`
* `fig.yml`

下記のようにREADME.mdに書いておくと勝手にボタンができる(herokuのやつと一緒)

~~~
[![Deploy Docker Cloud](https://files.cloud.docker.com/images/deploy-to-dockercloud.svg)](https://cloud.docker.com/stack/deploy/)
~~~

このボタン最高だから自分は単体で動くContainerでも
`docker-compose.yml`を書くようにしてる。

### 参考資料
https://docs.docker.com/docker-cloud/tutorials/deploy-to-cloud/

- - -

# 別に読まなくていい感想

https://mackerel.io/ja/docs/entry/advanced/docker

mackerelのcontainer agentは
仕組み的にはdockerhost(node)の`/sys/fs/cgroup`をvolumeでmountすることによって
container hostのシステム情報を取得してmackerelに送信してるんだろうけど

なるほどなーって仕組みに感心したと同時に
filesystem経由で全てのシステム情報にアクセス可能なlinuxよく考えられてるなーと思った
Python psycopg2 で dict形式で結果を取得する

Python で HerokuアプリケーションのDB(Postgresql) に接続する実装の中、
結果が配列で取得されてしまいキー値が判別できないことがデバッグ上すごく面倒だった。

調べてみたら下記の解答がいい感じ

http://stackoverflow.com/questions/21158033/query-from-postgresql-using-python-as-dictionary

```py:get_dict_resultset.py
#!/var/bin/python 
import psycopg2
import psycopg2.extras

def get_dict_resultset(sql):
    conn = psycopg2.connect("dbname=pem host=localhost user=postgres password=Drupal#1008")
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    cur.execute (sql)
    results = cur.fetchall()
    dict_result = []
    for row in results:
        dict_result.append(dict(row))
    return dict_result

sql = """select * from tablename"""
return get_dict_resultset(sql)
```

この関数を使えば割りと楽に dict 形式のSQL実行結果が取得できる。
チップスターの空き箱でAmazon Echoっぽいものを作ってみる -ハードウェア編-

#はじめに
[チップスター](http://www.yamazaki-nabisco.co.jp/brand_nb/chipstar/)を知らないという方はあまりいらっしゃらないと思うので細かいことはとばしますが、2016年で40周年をむかえるポテトチップの商品名です。

このチップスターの箱ですが、カンパ箱等に活用されているのをたまに見かけます。
この箱をみて、ある日ふと思いました。

これって、[Amazon Echo](http://www.amazon.com/Amazon-SK705DI-Echo/dp/B00X4WHP5E)っぽくないか。（かなり無理矢理）

ならば、作ってみようかと思ってできたものが、これです。

![image](https://qiita-image-store.s3.amazonaws.com/0/51272/b8c32cb0-7348-5282-fdb6-7ad985eeb59e.png)


今回は、これを作成するためのハードウェア構成についてまとめます。

#ハードウェアの選定
音声認識・音声合成を行いたいため、メインとなる基板にはRaspberry piを使用することにしました。※JuliusとOpen JTalkを想定
音声入力および音声再生のために、マイクとスピーカーが必要です。スピーカーですが、直結では音量が小さすぎて聞き取れませんので、アンプが必要となります。
あと、クラウドやスマホとの連携を考えて、WifiとBluetoothも搭載したい。となると、USBハブも必要となります。
このあたりの条件を満たしながら、チップスターの箱に収まるようにハードウェアを選定していきます。

#メインボードの選定
チップスターの箱に納まる大きさとなると、Raspberry piであればA+（写真左）もしくはZero（写真右）となります。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/5763263e-e738-4939-7879-a5e3448b01aa.png)
パッと見ではZeroを選択するのがよさそうですが、ZeroのUSBはマイクロかつOTGケーブルが必要になるため、USBケーブルの取り回しでスペースのメリットが半減してしまいます。
A+でもサイズ的にはいること（下の写真）と、USB電源のポジションが箱の側面とマッチしててよさげなため、A+を採用することにしました。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/2439d051-2232-22d5-ef9a-9dafdce61683.png)

#必要なハードウェア
いろいろ検討した結果、以下のハードウェアで構成することになりました。
汎用品をなるだけ使ったので、一番の苦労はUSBケーブルやオーディオケーブルの取り回しでしょうか。USBハブやUSB変換コネクタとかの組み合わせをいろいろ試して、箱に収まる組み合わせを探しました。

|項目|型番など|
|---|---|
|メインボード|Raspberry pi A+|
|SDカード|8GB|
|USB電源ケーブル|100均|
|USBハブ|[ELECOM U3H-K304BBK](http://www2.elecom.co.jp/cable/usb-hub/u3h-k304b/) ３口でサイドに１口という形状がハウジングに適していたため|
|USBオーディオ変換アダプタ|[PLANEX PL-US35AP](https://www.planex.co.jp/product/usb/pl-us35ap/)|
|フラット型PCマイク| [SANWA SUPPLY MM-MC23](https://www.sanwa.co.jp/product/syohin.asp?code=MM-MC23)|
|アンプとスピーカ|LM386メインアンプ基板 + アンプに必要な部品 + 8Ω 0.5Wスピーカ +ボリューム10KΩ(Aカーブ)+ ミニピン(3.5mm)ジャック + 9V電池スナップケーブル + 9V電池　※メインアンプはこちらの[キット](http://eleshop.jp/shop/g/g400018/)を使う手も|
|ミニプラグケーブル|100均 USBオーディオ変換アダプタとアンプの接続用|
|Wifiドングル|対応していてあまり大きくなければなんでもよい|
|Bluetoothドングル|対応していてあまり大きくなければなんでもよい|

※マイクのゲインが少し低いために音声認識がうまくいかないようですので、マイクは今後別のものにする可能性あり

#スピーカーとアンプの組み立て例
スピーカーとアンプは箱の最下部に配置しますので、スナップケーブルとプラグを箱の上まで引き出せるように配線をしておきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/2a5ab34c-815c-a74a-11d4-3e5a672a5e53.png)
予め、Raspberry piとUSBオーディオ変換アダプタにつないで、ボリュームを調整しておきます。

#~~詰め込み~~組みたて方

1. 最初に、箱の底面にスピーカをおいて、その次にアンプを設置します。スナップケーブルとプラグは後で接続するので、引き出しておいてください。
2. Raspberry pi A+ にUSBハブを接続、各ドングルとUSBオーディオ変換アダプタをつなげます。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/1e4ba892-7032-e954-7eca-d80533703816.png)

3. 繋げたものを折りたたんで、箱に詰めます。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/0df72ec6-54d5-d81a-5a4d-f3409069714e.png)

4. USB電源の部分に穴をあけて、USB電源ケーブルを接続します。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/0b462037-2c62-d60d-9649-ca5478b0918e.png)

5. 箱のふたにを固定して、穴をあけてケーブルを通します。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/292fe5df-11af-b0d2-2b7d-aa62dd96aa2d.png)

6. USBオーディオ変換アダプタに、マイクとアンプ＆スピーカーを接続し、電池を取り付けます。マイクのケーブルが長いので、可能であれば短く加工するのが吉です。
7. 蓋をしめて、完成です。

#最後に
以上で、チップスターの箱に必要なハードウェアを組み込むことに成功しました。
次回では、音声認識・音声合成やクラウド連携のソフトウェアについてまとめようと思います。（というかまだ、ソフトウェアは作成中です）
JavaScriptをStrictモードに書き換える

JavaScriptをStrictモードで書き換える場合、エラーとなった場合をまとめたいと思います。


**Strictモードの記載**

```js
"use strict";
```

**変数の宣言はアクセス修飾子（？）必須**
変数の宣言には、const、let、varが必須です

```js:before.js
"use strict";

test = "";
//Uncaught ReferenceError: test is not defined
for (i = 0; i < length; i++) {}
//Uncaught ReferenceError: i is not defined
```

```js:after.js
"use strict";

const test = "";
for (let i = 0; i < length; i++) {}
```

**イベントリスナの削除**
イベントリスナの削除にはremoveEventListenerを利用しますが、無名変数を利用していて、リスナしているイベントを1度だけ処理したい場合は、第二引数にarguments.calleeを指定していました。Strictモードでは、これができません

```js:before.js
"use strict";

obj.addEventListener( "mousedown" , function (e) {
  var inner = "abc";
  obj.removeEventListener("mousedown", arguments.callee, false);
}, false);
//Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
```

```js:after.js
"use strict";

obj.addEventListener( "mousedown" , function func (e) {
  var inner = "abc";
  obj.removeEventListener("mousedown", func, false);
}, false);
```

HTML5がまだ普及していなかった時代、XHTMLをstrictで書いていました。XHTMLをstrictモードで書く場合、JavaScriptも同様に厳密な解釈となったように記憶しています。想定外の動きを減らすため、strictで書くべきですよね。以上！
Xamarin Android PlayerのVM起動時の「VBoxManage command failed」を対処

# Xamarin Android PlayerのVM起動時の「VBoxManage command failed」を対処

* [似たようなissue](http://stackoverflow.com/questions/31625438/xamarin-android-player-xap-on-mac-vboxmanage-command-failed)

## About

* 環境
  - Windows 10 Home (64bit)
  - Intel Core i3 (CPU)
  - Visual Studio 2015 Community

　Xamarin、流行ってますね。  
C#はいいぞ。

　しかしXamarin.Formsアプリケーションを開発するにあったって、僕のマシンではAndroid SDK付属のAndroidエミュレータでは耐えうる速度ではありませんでした。  
故、XAP(Xamarin Android Player)をインストールすることに。

* 手順は[こちら](http://www.buildinsider.net/mobile/xamarintips/0061)を参考にさせていただきました


## インストール

　[こちら](https://xamarin.com/android-player)からXAPのインストーラを落とし、インストールしていきます。 ( 詳しい手順は参考ページ参照 )  
まずこのWindowsにはVirtualBoxが入っていないので、XAPインストーラに従ってVirtualBoxも同時にインストールしていきました。

　無事XAPも起動しました。  
そしてNexus S (KitKat)のダウンロードも完了しました。

![XAP_Downloaded.png](https://qiita-image-store.s3.amazonaws.com/0/84945/1ec0406f-bb03-789c-ba18-13888671445f.png)



## 問題

　Nexus Sを起動しようとするとエラーが出てきました。  
なんなん？ (じたばたじたばた)

メッセージには  
"VBoxManage command failed, see log for details"

(スクショ撮ってませんでした、誰かください)


## 解決方法

このうち、以下のどちらかが解決方法です。 (どっちだろう？)

### 環境変数VBOX_INSTALL_PATHを設定する

VirtualBoxのインストールされたファイルパスをコピペして環境変数を設定しますー。

![Fix1-Step1.png](https://qiita-image-store.s3.amazonaws.com/0/84945/69beef6b-dcbb-cac9-17a8-85d65c5e6987.png)

![Fix1-Step2.png](https://qiita-image-store.s3.amazonaws.com/0/84945/b1d9651b-9865-1692-aba9-30b10293c7c5.png)

![Fix1-Step3.png](https://qiita-image-store.s3.amazonaws.com/0/84945/dc6167c2-bd95-fc0e-c8a8-128ddb157a34.png)

![Fix1-Step4.png](https://qiita-image-store.s3.amazonaws.com/0/84945/75e83de8-da58-3cff-96f1-08791a6de752.png)


### VirtualBoxの最新バージョンを再インストールする

2016-04-19現在の最新は5.0.17？っぽいので
[ここ](https://www.virtualbox.org/download/testcase/VirtualBox-5.0.17-106344-Win.exe)からインストーラをダウンロード。

インストール。


## できた

　できた！！
速い！！

![dekita.png](https://qiita-image-store.s3.amazonaws.com/0/84945/3d5a42e8-805d-886e-c76f-0b7e47aa3549.png)



- - -

## その他参考ページ

- [Xamarin Android Player error](http://forums.xamarin.com/discussion/comment/85898)
- [Androidエミュレータは遅い！重い！！Intel x86設定で高速化して使うべし](http://saku-java.be-ourselves.jp/2014/05/18/intel-x86-android-emulator-setting/)
Web で顔認識して Live2D のモデルを動かす

# すでにやられているネタで、特に新規性はないのですが

せっかく作ったので一応記事にします。
[clmtrackr](https://github.com/auduno/clmtrackr/) という、 JS で顔認識してくれるライブラリを使い、 Live2D の WebGL 版で Canvas に描画するというもの。

* 成果物: https://nijigenize.herokuapp.com
  * Chrome なら PC でも Android でも動きました。
* ソースコード: https://github.com/kimamula/nijigenize
  * 細かいことは README に書いてありますが、 Live2D の利用規約の関係で Live2D 関連のファイルを gitignore しているので、 `git clone` してすぐ動くようにはなってません。
  * 無駄に (?) React とか使っているせいで、一目で見て分かりやすい感じではないです。コードを見るなら参考資料にも貼ってある[こちら](https://gist.github.com/kazsw/b5fc603078f588e72316)が分かりやすいでしょう。

![epsilon.png](https://qiita-image-store.s3.amazonaws.com/0/86045/f3a24196-c4d0-7bfc-d07b-24c62c243181.png)
モデルは 6 つから選べるようになっているので適当に遊んでいただければ。
左上のメニュー的なものが邪魔な場合は、画面上の何もないところをクリックすると消えます。

# 残念な点

## 重い
* clmtrackr の顔認識部分がボトルネックな感じ。
* clmtrackr で取得した情報を Live2D 用のパラメータに変換するのに Web worker を使ったりしてみたが、そこまで早くならなかった。
* Android/Chrome でも一応動くが、かなり遅い

## まばたき・ウィンクしない
* clmtrackr がまばたきを認識してくれない。
* まばたきすると目の位置が下にずれるような認識をしているので、それを利用してまばたきの判定をしようとがんばってみたが、誤検知も多くてうまくいかなかったので、結局目は開きっぱなしに。
* 美少女にウィンクさせたかったです。。

# 参考資料

## Live2D 公式

* WebGL のチュートリアル的なもの: http://sites.cybernoids.jp/cubism2/sdk_tutorial/platform-setting/webgl/sample
* 各種パラメータの説明: http://sites.cybernoids.jp/cubism2/modeler/parameter/standard-parameters

## clmtrackr
API がシンプルなので README 読めば大体わかります。

## 先人の成果
* https://trap.tokyotech.org/blog/2015/12/i_am_a_girl/
  * ここにリンクの貼ってある [gist](https://gist.github.com/kazsw/b5fc603078f588e72316) がだいぶ参考になりました。
ubuntu14.04にruggedをインストールする

# 環境 
- ubuntu 14.04

# Problem

```
$ sudo gem install rugged -v '0.24.0b12'
Building native extensions.  This could take a while...
ERROR:  Error installing rugged:
	ERROR: Failed to build gem native extension.

    /usr/bin/ruby2.2 -r ./siteconf20160418-27436-1orik58.rb extconf.rb
mkmf.rb can't find header files for ruby at /usr/lib/ruby/include/ruby.h

extconf failed, exit code 1

Gem files will remain installed in /var/lib/gems/2.2.0/gems/rugged-0.24.0b12 for inspection.
Results logged to /var/lib/gems/2.2.0/extensions/x86_64-linux/2.2.0/rugged-0.24.0b12/gem_make.out
```


# Solution

cmakeとruby2.2-devをインストールする(ruby2.1をつかっているならruby2.1-devをインストールするとよいと思う)

```
$ sudo apt-get install cmake
$ sudo apt-get install ruby2.2-dev
```

再度インストール

```
$ sudo gem install rugged -v '0.24.0b12'
Building native extensions.  This could take a while...
Successfully installed rugged-0.24.0b12
Parsing documentation for rugged-0.24.0b12
Installing ri documentation for rugged-0.24.0b12
Done installing documentation for rugged after 2 seconds
1 gem installed
```
svn:needs-lock 属性を新規ファイルに自動付与する(V1.8以降)


Subversion で個別のファイルに needs-lock 属性をつけることはよくありますが、特定のディレクトリ配下のファイルすべてとか、特定のこ拡張子だけに自動的に設定したいっていうことはよくあると思います。

以前の Subversion は ローカルの設定ファイルに enable-auto-props = yes を書くことで可能でしたが、利用者全員の設定ファイルに反映する必要があり利便性が高いとは言えませんでした。V1.8 以降の Subversion にはディレクトリのプロパティに auto-props を設定できるようになったため、ローカル設定なしでチェックアウトするだけで効果を持ちます。

TortoiseSVN を使っている場合は対象のディレクトリを右クリックして「属性」を選び、新規から「その他」を選択、表示されるダイアログで[svn:auto-props]を選択します。

属性の値に
```
*=svn:needs-lock
```
のように記述することで、svn:add されるすべてのファイルに needs-lock を付与できます。サブフォルダに反映することも可能。ワイルドカードと mime type を組み合わせることで、xlsx とか docx のようなドキュメントファイルだけを対象とすることもできます。
Live2D物理演算解析　３

[前回](http://qiita.com/Ganeesya/items/29cce7d319b350b3285f)は各パラメーターを操作したときの違いを調べることによって
主に出力される波形を目的スケールに落とし込む方法を探ってきた。
今回は前回行った実験データを元にモデルの全体像を掴んでいく。

#実験データ
実験に使ったモデルとその結果のデータについては[Live2Dのライブラリ](http://library.live2d.com/libraries/view/000094/Ganeesya)にアップロードしてあります

#入力パラメーターの意味合い
<img width="485" alt="リスト.png" src="https://qiita-image-store.s3.amazonaws.com/0/117475/121642b8-6674-9292-c4a3-2a0b90b2fe6f.png">
入力パラメーター欄のX,Y,Angleという表記を調べていく
まずはAll1のデータがX入力になっているのでYとAngleと切り替えたものを比べて見る
![xya.PNG](https://qiita-image-store.s3.amazonaws.com/0/117475/c481c9d4-d29b-263c-0b91-322c4c52fb03.png)
AngleとYがかぶってよく見えないのでAngle,Yで拡大したものがコチラ
![ya.PNG](https://qiita-image-store.s3.amazonaws.com/0/117475/83603464-fdf0-6594-13d7-2c9983a1567f.png)
Yに関しては全く変化が見られないが、
Angleに関してみてみると0から1へと立ち上がっている
Xのときには大回転現象を起こしてもかならず0に収束していたので大きな違いだ

そこでモデルを修正してスケールを-100～100へと拡張した上でAngleの入力を試してみる。
![x100a.PNG](https://qiita-image-store.s3.amazonaws.com/0/117475/88f9eef0-cae9-7222-8416-35bd270e1603.png)
今度は収束が100になる。
出力が180度で一回転することも考慮すると**Angle入力は-180～180スケールでの角度入力である。**

次にYを見ていく
Xを横揺れ、Angleを角度とするとYは縦揺れと推測できる
動かない理由としては振り子といってもヒモでつり下げるモノではなく絶対にたるまないパイプのようなモノでできた
いわばハンマーのようなモノと考えると
**「真っ直ぐ力が掛かってるので横に動きようがない」**
という説明が付く。
このことを検証するためにXで振動し始めた時にY入力をする実験をする。
![xyset.PNG](https://qiita-image-store.s3.amazonaws.com/0/117475/54d5c4a5-421d-b0e8-eed0-700b663ebbbb.png)
物理演算設定
![xyinput.PNG](https://qiita-image-store.s3.amazonaws.com/0/117475/3785cb7c-bb37-fbd6-f6b7-dc1604b8970f.png)
入力
![xyout.PNG](https://qiita-image-store.s3.amazonaws.com/0/117475/6b339931-cbf1-8409-4fd9-4386932b7c3a.png)

手前でY入力を入れているが動いていない。
これは真下にハンマーがあるからで仮説道理である。
そのあとX入力で振動が始まり、3秒少し手前でY入力がくる
このときに出力は真下よりずれているのでこのときに値が変動している。
このことからハンマーのような垂直に力がかかるときは値が変動しない特性がある。
**このY値は他の値と併用して運用するものだろう。**

#モデルイメージとまとめ
以上の実験をもとにLive2Dで[Live2D物理演算の振り子モデル](http://library.live2d.com/Libraries/view/000093/Ganeesya)を作成してみた
![物理演算モデル.gif](https://qiita-image-store.s3.amazonaws.com/0/117475/b4525b95-b241-98d8-d817-a8ca6c4b1e05.gif)
細部はまだ検証が必要だが概ねこのような振り子の動きを使って
角度での出力で示す演算機である。
出力スケールは-180～180でX,Yの入力はおそらく長さに大きく影響うけるハズ
Angleはモデルごと傾ける入力で出力スケールと同スケール

**以上のことから入力、出力双方のパラメーターのスケールと用法で移動量を調整しなくてはいけない。
このパラメーター設定で揺らしていますというのを真似るときには
もとのパラメーターのスケールに気を配らねばならない。**

次回はすこし飛ばしてモデルイメージを元に
物理演算の使い方の例を考えていきたい。
JavaScriptの関数

#JavaScriptの関数
そこいらの言語と違って色々な書き方がある？javascriptの関数を整理。

* function命令で定義
* Functionコンストラクタ経由で定義
* 関数リテラル表現で定義

## function命令で定義
オーソドックスなやつ。

```
function 関数名(引数){
関数内で実行される処理
}

//example
function sum(x,y) {
    var r = x + y;
    return r;
}

document.writeln('sum:' + sum(3,5));      //8
```

## Functionコンストラクタ経由で定義

```
var 変数名 = new Function(引数,関数本体);

//example
var sum = new Function("x","y","var r = x + y; return r;");

document.writeln('sum:' + sum(3,5));      //8
```
これは何をしているかというと
FunctionオブジェクトというものがJavaScriptの組み込みオブジェクトであるので、
それを利用している。
つまりFunctionオブジェクトのコンストラクタを利用して関数を定義することができる。

## 関数リテラル表現で定義

javascriptでは関数を変数に代入したり、ある関数の引数として渡すことができる。
よって以下のような記述が可能。

```
var 変数名 = function(引数){
関数内で実行される処理
}

//example
var sum = function(x,y){
    return x+y;
};

document.writeln('sum:' + sum(3,5));      //8
```
この場合function(x,y)と名前がない関数を定義しているので
匿名関数、あるいは無名関数と呼ぶ。
ログインする前の画面にIPアドレスを表示させる

新しい仮想マシンを立て、あるいは久し振りに起動して、さてSSHで繋ごうと思ってもIPアドレスがわからずコンソールから一旦ログインしてIPアドレスを調べて、とやるのはもううんざりだ。

というわけでコンソールを見ればログインせずともIPアドレスを知ることができるよう、ログインプロンプトとともにIPアドレスを表示するようにしておく。

なお、デスクトップマネージャは使用しないものとする。
使用していてもAlt+F2などで別の仮想コンソールにすれば見られるが。

# やり方

ログイン前画面の内容を決定するのは/etc/issueである。
このファイルをNICが上がるイベント発生時に書き換えてやれば良い。

とりあえず標準の/etc/issueを退避しておく。

```
# mv /etc/issue /etc/issue.org
```

NICが上がるイベント発生時に実行させるスクリプトを作成する。
以下は例だが行っていることは、退避した/etc/issueをコピーして元に戻し、`hostname -I`で得られるIPアドレスの一覧を/etc/issueに追加するものである。

```
#!/bin/sh

cp /etc/issue.org /etc/issue
echo 'IP addresses:' >> /etc/issue
echo $(hostname -I) >> /etc/issue
echo '' >> /etc/issue
```

このファイルの配置場所はNetworkManagerを使用しているなら /etc/NetworkManager/dispatcher.d/ ディレクトリ内である。
DebianやUbuntuなら/etc/network/if-up.d/ ディレクトリ内、CentOSなら /sbin/ifup-local （これはディレクトリではなくこの名前のファイル）でも良いだろう。

このファイルには実行権限を付ける。ここでは /etc/NetworkManager/dispatcher.d/show-ip-address に配置したとする。

```
# chmod +x /etc/NetworkManager/dispatcher.d/show-ip-address
```

これでログインする前の画面にIPアドレスを表示させることができる。

注意事項としては、systemdが使われているとログインする前の画面がNICが上がる前に表示されるのかIPアドレスが表示されないことがある。
その場合は何度かEnterキーを押してやると良いだろう。多少は手間だがログインしてIPアドレスを知るよりは遥かにましだろう。
Markdown風テキストでダイアグラムが描けるWebツール

#MarkDownDiagram

Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。

こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。

[もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った](http://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42)

特徴としては

 - Webブラウザのみでローカルで動作
 - 配置はマウスでドラッグして編集できる
 - CSSで色や装飾を制御可能

といったあたりです。

![CgOdrJ7UMAAF44Y.png](https://qiita-image-store.s3.amazonaws.com/0/74838/a3c077a7-0fae-6b26-ec8b-9313c8e07952.png)

[github](https://github.com/wakufactory/MarkDownDiagram)からclone/ダウンロードして使えます。
オンラインで試すのは[こちら](http://wakufactory.jp/html5/md/mdg/)でどうぞ。

ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。

Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。

##機能

 - テキストでブロックを記述し、ブロック間を線で繋ぐ描画
 - ブロックをマウスでドラッグして位置を調整
 - ドラッグした位置はテキストに反映される
 - ブロックは複数行のtableとdivの2種類の要素
 - ラインはSVGのpathで描画
 - ブロックやラインは、cssで装飾できる
 - テキストのファイルへのロードセーブ機能
 - 印刷機能 (現状A4横サイズ固定)
 
##スタイルについて

  プリセットcss(css/mdg.css)にいくつか装飾用のスタイルを定義してあります。文字・背景の色、文字サイズ、paddingサイズやボックスの横幅等をクラスで指定できます。詳しくは、mdg.cssを参照してください。

###ロード/セーブについて

編集領域のテキストは、ブラウザのlocalStorageに自動保存されます。
LOAD/SAVEは、テキストをそのままファイルから読み込み、ダウンロードします。拡張子は便宜上.mdgとなっていますが、プレーンテキストなのでなんでも構いません。

###印刷について

ブラウザの印刷機能で、ワークスペース全体がA4横に収まるようになっています。画像への切り出し等はPDFに落としてからできます。

##書式

###ブロックの定義

```
[name] (class) <position>
```
nameはブロックのIDとして/[a-z0-9-_]+/。classはcssのためのクラス名。positionは自動的に設定される。


###ブロックの区切り線

```
---
```
複数行に区切られているとtable要素になる。

###他ブロックへのリンク

```
==>[name]
```
これ自体区切り線としても働く。ブロックの途中にある場合は、その行から線が始まる。

リンクの属性を設定

```
u<=(class)=>d[name]
```
classはリンクのSVG pathに適用されるクラス名。デフォルトのリンクはベジェ曲線だが、"S"を指定すると直線になる。
"<",">"は線の矢印を表す。両端に無くてもよい。
"u","d"の部分は、線の接続位置を表す。左が自ブロック、右が相手ブロックの指定。
"u"はブロックの上部中央、"d"は下部中央。"l"はブロックの左で、"r"は右になる。
相手のブロックの"l","r"の場合は、"l2","r1"のように接続先の行を指定することができる。

###ブロックのタイトル
table要素で有効

```
#title
```

###画像ブロック

```
[name] (image) 
![title](file "caption")
```
プリセットのクラスとして"image"をブロックのクラスに適用すると、枠なし、背景透明に設定できる。

###コメント

```
// comment
```


##カスタマイズ

css/custom.css にカスタムのスタイルを追加して使用できます。

画像はどこにあっても大丈夫ですが、imgの下に入れるとよいでしょう。

##更新履歴

 - 4/25 プリセットcssを整理して追加しました
マイ・オークション表示（出品中）の sort 機能が指定できない？

@ydnjp 

http://developer.yahoo.co.jp/webapi/auctions/auction/v2/mysellinglist.html

のページの sort パラメータの -bids を指定して以下のようなURLでリクエストを発行しましたが、 bids の降順にならず終了時間順にしかならびません。URLエンコードはしております。

https://auctions.yahooapis.jp/AuctionWebService/V2/mySellingList?start=1&sort=%2Dbids

![SS 2016-04-18 23.46.26.jpg](https://qiita-image-store.s3.amazonaws.com/0/122154/37afc490-b1c6-b1a1-0d08-f05831b47743.jpeg)

また以下の New の項目はレスポンス内に存在しないようです。
これら New の項目は まだ実装されていないのでしょうか。

![SS 2016-04-18 23.47.58.jpg](https://qiita-image-store.s3.amazonaws.com/0/122154/626e733a-82d0-ca6d-9c87-cd9dab43b6eb.jpeg)
docker-machine で localhost でポートを公開する

# TL;DR

`docker-machine ssh` は ssh コマンドの引数を受け付けるため、`-L` オプションを使ってポートフォワードする。

```
% docker-machine ssh default -L 8080:localhost:8080
```

# docker-machine で `localhost` でポートを公開する

docker-machine では、boot2docker の VM を作成し、その VM 上で実行されている docker デーモンでコンテナを実行するため、`docker run` でポートを公開しても `localhost` で公開されず、boot2docker の VM の IP で公開される。
これでは、`docker-machine ip` で取得できる IP で公開されているため、`localhost` で公開したいときに困る。

`docker-machine ssh` は、ssh コマンドの引数を受け付けるため、`-L` オプションを使い、ローカルホストにポートフォワードする。

# 動作を確認する

```
% docker-machine ip
192.168.99.100
```

boot2docker の VM は、`192.168.99.100` で実行されている。この環境に nginx コンテナを立ち上げて、コンテナの `80/tcp` を VM の `8080/tcp` で公開する。

```
% docker run -d -p 8080:80 nginx
23f32acfd34ebd03ac2412e7ebf6246aa6a3d3f41cd8867c7806fa2e6e27712a
% curl -I http://$(docker-machine ip):8080/
HTTP/1.1 200 OK
Server: nginx/1.9.14
Date: Mon, 18 Apr 2016 14:36:47 GMT
Content-Type: text/html
Content-Length: 612
Last-Modified: Tue, 05 Apr 2016 15:20:43 GMT
Connection: keep-alive
ETag: "5703d7cb-264"
Accept-Ranges: bytes

% curl -I http://localhost:8080/
curl: (7) Failed to connect to localhost port 8080: Connection refused
```

正しく VM の `8080/tcp` で公開されている。もちろんローカルホストで公開されてはいないので、接続に失敗している。これをローカルホストでアクセスできるようにするために、ローカルホストの `8080/tcp` を boot2docker VM の `8080/tcp` にポートフォワードする。

```
% docker-machine ssh default -L 8080:localhost:8080
                        ##         .
                  ## ## ##        ==
               ## ## ## ## ##    ===
           /"""""""""""""""""\___/ ===
      ~~~ {~~ ~~~~ ~~~ ~~~~ ~~~ ~ /  ===- ~~~
           \______ o           __/
             \    \         __/
              \____\_______/
 _                 _   ____     _            _
| |__   ___   ___ | |_|___ \ __| | ___   ___| | _____ _ __
| '_ \ / _ \ / _ \| __| __) / _` |/ _ \ / __| |/ / _ \ '__|
| |_) | (_) | (_) | |_ / __/ (_| | (_) | (__|   <  __/ |
|_.__/ \___/ \___/ \__|_____\__,_|\___/ \___|_|\_\___|_|
Boot2Docker version 1.11.0, build HEAD : 32ee7e9 - Wed Apr 13 20:06:49 UTC 2016
Docker version 1.11.0, build 4dc5990
```

これで準備が整ったので別のターミナルからアクセスしてみる。

```
% curl -I http://localhost:8080/
HTTP/1.1 200 OK
Server: nginx/1.9.14
Date: Mon, 18 Apr 2016 14:39:18 GMT
Content-Type: text/html
Content-Length: 612
Last-Modified: Tue, 05 Apr 2016 15:20:43 GMT
Connection: keep-alive
ETag: "5703d7cb-264"
Accept-Ranges: bytes

```

期待どおりローカルホストの `8080/tcp` でアクセスすることができた。
XDebugとqcachegrindを使ってPHPアプリのパフォーマンスボトルネックを見つける


PHPアプリのボトルネックをXdebugとqcachegrindを使って簡単に見つける方法です。

### ボトルネックを見つけるための準備
peclなどを使ってXdebugをインストール、有効にしましょう。

```
pecl install xdebug
```

```/etc/php.d/15-xdebug.ini
extension=xdebug.so
xdebug.profiler_enable = 1
xdebug.profiler_output_dir = /tmp
```

php-fpmやApacheをリロードしましょう。

あとは調査したURLにアクセスすれば/tmp以下にプロファイルデータが作成されます。

### プロファイルデータ閲覧
プロファイルデータを閲覧するために **qcachegrind** をインストールしましょう。

Macの場合を想定

```
brew install graphviz qt qcachegrind
```

#### qcachegrindを起動
このコマンドで起動します。

```
qcachegrind
```

先ほど作成したプロファイルデータをインポートするとプロファイルが表示されます。
これで簡単にボトルネックが発見できますね！
![qcachegrind.png](https://qiita-image-store.s3.amazonaws.com/0/3962/c0bce5d3-62f7-3c28-d825-a1a7b25010cd.png)


#### 使い終わったら

```/etc/php.d/15-xdebug.ini
;xdebug.profiler_enable = 1
;xdebug.profiler_output_dir = /tmp
```
設定をコメントアウトしてリロードしましょう。
プロファイルデータのサイズはものすごく大きいので放っておくと大変なことになります。
PHPのオートロード(autoload)


## PHPのオートロードとは

オートロードとは「自動」で「ロード」してくれる仕組みです。

何をロードしてくるのでしょうか。

それはファイルです。

PHPでは通常

```php
require_once "hogehoge.php";
```

のように使用したいファイルを明示的に読み込む必要があります。

これを自動的に読み込んでくれる仕組みがオートロードです。

実際にやってみましょう。オートロードを使用するにはcomposerを使います。

[composerとは](http://qiita.com/atwata/items/d6f1cf95ce96ebe58010)

ディレクトリ構成

```
C:.
│  composer.json
│  sample01.php
│
└─src
    └─japan
        └─tokyo
                Shinjuku.php
```

sample01.phpからShinjuku.phpのクラスを使用したいです。

オートローダを使わない場合は

```php
require_once "src/japan/tokyo/Shinjuku.php"
```
とする必要があります。

オートローダを使う場合は、composerが必要です。

下記のcomposer.jsonを作成し、composer installします。

```composer.json
{
    "autoload": {
        "psr-4": {
            "myapp\\": "src/"
        }
    }
}
```

- PSR-4というルールに従ってオートロードを使用します。
 - PSR-0というルールもありますが今回は割愛。
- 物理ディレクトリsrc配下をmyappから始まる名前空間として使用します。
- 今回はmyappとして1つだけですが、基点となるディレクトリを複数指定することも可能です。

という意味ですが、実際ソースを見たほうがわかりやすいので先へ進みます。

上記のjsonファイルでinstall。

```実行結果
c:\tmp>composer install
You are running composer with xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating autoload files
```

これでvendorディレクトリが作成され、autoload.phpも出来上がります。

ちなみにcomposer.jsonファイルの変更をしたらcomposer updateが必要です。
ただし、autoload部分の変更だけであればdumpautoloadで変更が反映されます。

```
composer dumpautoload
```

これでオートロードを使用できる準備ができたので、
実行対象のファイルと呼び出し先のファイルを作成します。


```sample01.php
<?php
require_once "vendor/autoload.php";

$shinjuku = new myapp\japan\tokyo\Shinjuku();

echo $shinjuku->hello();
```
- vendor/autoload.phpをrequire_onceする。（これだけでOK。ほかのファイルのrequireは不要）
- クラスを使用するには、ディレクトリ構造と対になった名前空間を指定する

```src/japan/tokyo/shinjuku.php
<?php
namespace myapp\japan\tokyo;

class Shinjuku {

	function hello(){
		echo "Hello Shinjuku!";
	}

}
?>
```

- ファイルが配置されているディレクトリと同様の構造の名前空間を指定する
- myappというディレクトリはないが、composer.jsonでsrcディレクトリ配下をmyappで指定する設定にしたためこうなっている
- src配下のファイルはすべてディレクトリ構造と名前空間を合わせればオートロード対象となる
- ファイル名とクラス名を合わせる必要がある（shinjuku.phpとclass Shinjuku）

実際に実行してみましょう。

```:実行結果
c:\tmp>php sample01.php
Hello Shinjuku!
```

以上、PHPのオートロードについてでした。
PHPの名前空間とファイル名

## PHPの名前空間とは

名前空間とはnamespaceのことで、文字通り名前(name)を置く空間(space)のことです。
名前の衝突を回避するために、名前の居場所を明示します。
ここでいう名前とはPHPのクラス名、インターフェース名、関数名、定数名のことです。

同じ名前のクラスをつけないように気をつければよいじゃないか、と思うかもしれません。
それは間違いではありません。。実際名前空間という機能が提供される前のPHPではそうやっていました。クラス名に機能を表す文字をつけたりしてクラス名が長くなったりして。

複数人で開発をしたり、サードパーティのライブラリで使用している名前とかぶってしまったり。

また、不要なファイルをrequireしなければよいじゃないかと思うかもしれません。

実際それも間違いではないのですが、ファイルの読み込みがフレームワークによって自動的に行われていたりrequireしたファイルがさらに別のファイルをrequireしているなど、すべての範囲を見通すのは大変です。
requireを1つ追加するたびに影響範囲の調査をしなくてはなりません。

またそれ以前に同名で違う機能を持つクラスをそれぞれ使いたいことがあるかもしれません。
その場合はクラス名を変えるしかありません。

名前空間を適用すると、そもそもそういうことを気にしないでよくなります。
ルールを決めておけば、「気をつける」必要がなくなるのです。

では実際にソースを見てみます。

```japan\dog.php
<?php
class Dog{

	function bark(){
		echo "wan!";
	}
}
```

```sample01.php
<?php
require_once "japan/dog.php";

$dog = new Dog();
echo $dog->bark();
```

```実行結果
c:\tmp>php sample01.php
wan!
```

これに同名のDogクラスを追加してみます。

```usa\dog.php
<?php
class Dog{

	function bark(){
		echo "bow!";
	}
}
```

そして新しいクラスをrequireします。

```sample01.php(抜粋)
require_once "japan/dog.php";
require_once "usa/dog.php";
```

```実行結果
c:\tmp>php sample01.php

Fatal error: Cannot redeclare class Dog in C:\tmp\usa\dog.php on line 2

Call Stack:
    0.0100     123048   1. {main}() C:\tmp\sample01.php:0
    0.0100     126024   2. require_once('C:\tmp\usa\dog.php') C:\tmp\sample01.php:3
```

Dogが2回宣言されているとエラーが出ました。

1つめをjapan、2つ目をusaとして、namespaceを追加します。

```japan\dog.php
<?php
namespace japan;

class Dog{
～
```

```usa\dog.php
<?php
namespace usa;

class Dog{
～
```

これで実行してみます。

```実行結果
c:\tmp>php sample01.php

Fatal error: Class 'Dog' not found in C:\tmp\sample01.php on line 5

Call Stack:
    0.0050     123048   1. {main}() C:\tmp\sample01.php:0
```

エラーになりました。Dogが見つからないとのことです。
そうです。名前空間を指定したクラスは使用するときに、その名前空間を指定する必要があるのです。

呼び出し側を修正します。

```sample01.php
<?php
require_once "japan/dog.php";
require_once "usa/dog.php";

$dog = new japan\Dog();
echo $dog->bark();
```

```実行結果
c:\tmp>php sample01.php
wan!
```

正常に実行できました。

## ファイル名との関係

名前空間とファイル・ディレクトリ構成には一切関連がありません。

たとえば下記のようにfranceディレクトリのファイルにitalyという名前空間をつけることも可能です。

```france\dog.php
<?php
namespace italy;

class Dog{

	function bark(){
		echo "bau!";
	}
}
```

呼び出すときはこうします。

```sample02.php
<?php
require_once "france/dog.php";

$dog = new italy\Dog();
echo $dog->bark();
```

ちゃんと実行できます。

```実行結果
c:\tmp>php sample02.php
bau!
```

ただし、これはできるというだけで、わかりにくすぎますし、こんなことをする意味はありません。

実際PHPのコーディング規約がPSR-Xという形で標準化されれいるのですが、
そこでは基本的にはディレクトリと名前空間の区切りはあわせることになっています。
Linux初心者がDocker使うときにハマる要因

#Error response from daemon: Cannot start container System error: exec format error
原因は・・・
#そもそも32bitOSだからコンテナが起動しない
そりゃあ32bitイメージじゃなかったらRUNすらもエラーで動いてくれないですよね。
orz
ハイ、お察しの通り私がハマりました。１時間くらい無駄にした。

誰もこんな悲しいオチに遭わないように祈ります。（きっとこんなん私だけ）
Ubuntu で nginx を使ってリバースプロキシ

## 概要
Heroku で公開している Web ページへのアクセスをルートドメインにしたかったので、nginx でやってみた。

## nginx の設定
### nginx インストール
```
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install nginx
```

### config ファイル
Apache と同じように設定していける。

```
$ sudo vim /etc/nginx/site-available/hoge
```

自分のドメインと Heroku で作ったアプリをそれぞれに設定する。

```
server {
    server_name <自分のドメイン>;

    location / {
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host <Heroku で作ったアプリの URL>;
        proxy_pass http://<Heroku で作ったアプリの URL>;
    }
}
```

設定が完了したら、`site-enable` へシンボリックリンクを張る。

```
$ sudo ln -s /etc/nginx/site-available/hoge /etc/nginx/site-enable/
```

reload で設定ファイルを反映させる

```
$ sudo service nginx reload
```

## DNS の設定
A レコードでルートドメインを VPS へ向ける。

## 確認
しばらくしてから、ブラウザや curl で問題ないことを確認する。
ブラウザだとキャッシュを持っていてうまく行ってないように見えたりするので注意。
GomとRevelでアプリを起動する

# Gom
golangのパッケージ管理ツールです。

```
% cat Gomfile                                                                           [22:45:31]
gom 'github.com/agtorre/gocolorize', :commit => 'f42b554bf7f006936130c9bb4f971afd2d87f671'
gom 'github.com/revel/revel', :commit => 'a9a2ff45fae4330ef4116b257bcf9c82e53350c2'
gom 'github.com/robfig/config', :commit => '0f78529c8c7e3e9a25f15876532ecbc07c7d99e6'
gom 'github.com/robfig/pathtree', :commit => '41257a1839e945fce74afd070e02bab2ea2c776a'
gom 'golang.org/x/net', :commit => '7f88271ea9913b72aca44fa7fc8af919eacc17ce'
gom 'gopkg.in/fsnotify.v1', :commit => '8611c35ab31c1c28aa903d33cf8b6e44a399b09e'
gom 'github.com/revel/modules'
gom 'github.com/go-gorp/gorp'
gom 'github.com/mrjones/oauth'
gom 'github.com/mattn/go-sqlite3'
```

こいうのを作っておいて、

```
gom install
```

すると

**_vendor**っていうディレクトリを作ってくれます。ここにパッケージがどんどん入ります。

これを

```
gom run main.go
```

するとvenderを読み込んで実行されます。

# Revel
割と重量級のやつです、rails的なもの

```
revel run {application}
```

で実行できます。

# Revel + Gom
revelは
```
revel run {application}
```

こう実行する。

gomは

```
gom run main.go
```

こう実行。

え？どうすりゃええねん・・・って思ってだけど

```
gom run revel run {application}
```

で実行できます。これはちょっとハマった
html版SICPをkindleで読めるようにしてみた

<img src="https://qiita-image-store.s3.amazonaws.com/0/46637/9d2cd038-b301-b84b-7055-ad8b32d6bca5.jpeg" width="320px">
# 前置きと言う程でもない走り書き
近年、様々な訳の電子書籍版が出回っていますがどれもイマイチなので、和田先生の翻訳を手軽に読めるようにしたいと思いました。
また、電子書籍版と言っておきながらリフローでも無く文字サイズの変更もできないのは片手落ちでしょう、ということで普通に（重要）mobiファイルを出力するようにしてみたのが今回のお話。

# 美しく正しい翻訳による電子書籍を手に入れるために君がすべきたった4つのこと

1. Firefox:Scrapbookで http://sicp.iijlab.net/fulltext/ から全ファイルをDLする（リンク参照解決もしてくれるので）。
2. https://github.com/aki426/SICPjpHtmlToMobi からps1をDLしてコンテンツデータと同じディレクトリに置く（Windows環境前提ですすんません）。
3. kindle_genもインストールしておく。
4. . .\convertToMobi.ps1（kindle_gen.exeのパスについては各位変更ください）

# その他
- （epubにしたければsicp_jp.htmlがあるので）変換して、どうぞ。
- 諸々の権利を侵害しないように各位個人利用の範囲内でお楽しみください。
- 紙の本も買いましょう。(((人類、それは義務です))) http://www.amazon.co.jp//dp/4798135984 
- パワープレイでひたすら置換しまくっているだけなので間違いもあると思います。改善したらプルリクオナシャス。

# 追記

「,.」だと読みにくいので「，．」にしたりとか、小見出しが小さすぎるのを直したりとか、あと問題へのリンクを張ってみるなどした。クッソ便利。

<img src="https://qiita-image-store.s3.amazonaws.com/0/46637/a4791fb8-bdc9-6d1d-668b-0f30d938ee7b.jpeg" width="320px">
[失敗]HTML5とCSS3で履歴書を作ろうとした話

# 「とりあえず物を見せろ」

はい。
[manzyun/personal_history_made_by_html5: Making personal history made by HTML5 and CSS3](https://github.com/manzyun/personal_history_made_by_html5)

# 「なんでやろうと思った？」

+ 自分の勉強のため（主にCSS周り）
+ HTML5で履歴書を提出したらかっこよさそうだから
+ HTML5でちゃんと（？）組んだ履歴書なら、分散バージョン管理も容易そうだから
+ 〃、コンピューターでスクレイピングさせたりしてやれば人事の人が楽になることがもしかしたらありそうだから

## 自分の勉強のため（主にCSS周り）
しばらくHTMLとCSSを触っていなかったのと、もしかしたら今後HTMLとCSSを教える場面が来そうなので予習（復習？）したかった。

## HTML5で履歴書を提出したらかっこよさそうだから
パソコンで打った履歴書を、フォーマットが一致しないからという理由で結局PDFにして提出している昨今がなんだかなあと思ったのと。個人的にワープロソフトで罫線をあれこれするのは非常に嫌なので（テンプレート使っても、行ごとに罫線を引いていて快適に履歴書が書けないものもあったりして）、
「それならHTMLでやればいいじゃん。最近のCSSなら印刷時の制御もできるんだし」
と思った次第。
あと市販の履歴書と比べて、項目を減らしたり増やしたりするのが容易だと思った。

## HTML5でちゃんと（？）組んだ履歴書なら、分散バージョン管理も容易そうだから
特にGitでバージョン管理しようとしたら便利そうに思ったし、そして会社ごとに名前を付けて保存でもいいけど、ブランチを切って編集したらなんかかっこよさそうだったから。

## 〃、コンピューターでスクレイピングさせたりしてやれば人事の人が楽になることがもしかしたらありそうだから

これはHTMLの履歴書のフォーマットが比較的統一されたらの話なのだろうけど、
せっかくのHTMLなどのマークアップ言語の利点である「文章を構造化させる」という点がやっぱりいいので、これを利用して履歴書をスクレイピングして社員情報をDBに登録する。
そして登録した社員情報を元に（またはスクレイピングで）プロジェクト立ち上げ時に最適な社員を検索すると云うこともできるのではないかなと思った次第。

### というより、section要素とかarticle要素をもっと積極的に使ってみたかった

本音はコレ。せっかくHTML5になって導入されたタグで、なかなかとっつきにくいということなので、とりあえず履歴書で、間違っててもいいからsection要素とarticle要素を使った例として履歴書を作ってみた。

# 「既にHTMLで履歴書作るサービス、あるじゃん」
ごもっとも。
[DuckDuckGo](https://duckduckgo.com/)ではそれっぽいのはヒットしなかったが、Googleだとヒットした。

[履歴書作成メニュー(HTML)](http://resume.meieki.com/html_resume.php)

ただし先のサイトではこんな文がある。

> このHTML版履歴書メーカーは旧サービスです。新しいPDF版の履歴書メーカーをご利用ください。

ということなので、
「とりあえず、自分がHTML5の利点を活かした履歴書を作れば、誰か幸せになるんじゃない？」
と勝手に思った。

# 「お前の意思は伝わった。そしてソースもみた。汚い。なってない」
プルリク、イシュー、お待ちしております。
[manzyun/personal_history_made_by_html5: Making personal history made by HTML5 and CSS3](https://github.com/manzyun/personal_history_made_by_html5)

# P.S.
## 別アプローチの紹介
別のアプローチだが、似たことを思った人が既にQiitaにいらっしゃったようです。
[【Photoshop】アルバイトの面接に使える履歴書作成用PSDファイル作った - Qiita](http://qiita.com/yukinoyoshino/items/ae109603891f9f4c0cea)

## 現状
CSSが分からなすぎて辛い。[Stylus](http://stylus-lang.com/)使ってるから余計わからないのかもしれない。
とりあえず縦に罫線で囲まれた項目は作れたので、後は横フォーマットだろうか。
日本の罫線文化というのか表文化、こういう時困るというのが本音。

### ということでプルリク、イシュー、カモン
[manzyun/personal_history_made_by_html5: Making personal history made by HTML5 and CSS3](https://github.com/manzyun/personal_history_made_by_html5)

# 後日談

諸先輩方から
「いや、既にフォームがあるものなのに、マークアップ言語で組むのって、頭悪いんじゃね？（個人的偏見による要約）」
という指摘があったので、心折れかけてたけど、潔く諦めれた。

## 履歴書はそもそもフォームである

よく考えてみれば、履歴書の内容が動的に変わることは殆ど無いのである。
ましてやA4用紙2枚になるべく収めることが必要な書類なのである。

特別な例を上げると、資格や希望が現存の履歴書に収まりきらないのであれば、別紙に似た表を作ってそれを添付すればいい。

ただ、なんて言えばいいのか、直接マークアップ言語を叩くのはクールじゃなかったと思う。

## HTMLとCSSが印刷に向かないわけではない

誤解しないで頂きたいのが、
「なぁーんだ。じゃあHTMLとCSSはやっぱりパソコンのためのものなんだね。だめじゃん」
ということではない。

僕の勉強不足とセンスの無さで、こういったフォーム的な文章をマークアップ言語とかで作ってしまったというだけの話。

だからもっとしっかり構造化されている一般的な文書にはHTMLとCSSは非常にぴったりだと思っている。
普段WordやExcelでいちいちマウスを動かして作っているモノクロの単調な文章が、案外HTMLとCSSに置き換えられるものだと個人的には思っている。

# とりあえず

+ 僕の勉強とセンスが不足していた
  + もっと頑張る
  + 視野を広く持つ

+ 手段が目的にならないように気をつける
  + 今回まさにそれ。
  + 手段が目的にならないようにするためにはどうしたら良いのか？
    + 定期的な自分自身のチェック
    + どこかで「不向き」と感じたら諦める勇気

俺の屍を越えて行きたい人がいたら越えてください越えてください。
Elixir入門（６）

勉強したことをほぼ写経するだけ

# Pipe Operator

`|>`で繋げると、前の返却値が次の関数の第1引数となる。

```
iex> "abc" \
...>   |> String.length
3

# こんな使い方も可能
iex> (1..10) \
...>   |> Enum.map(&(&1 * &1)) \  # &1: 1, 2, 3, ...
...>   |> Enum.filter(&(&1 < 40)) # &1: 1, 4, 9, ...
[1, 4, 9, 16, 25, 36]
```

# Import

```
defmodule
  # Module名を付けて関数呼び出し
  def func1 do
    List.flatten [1, [2, 3], 4]
  end

  # Moduleごとインポートして関数呼び出し（Module名省略）
  def func2 do
    import List
    flatten [1, [2, 3], 4]
  end

  # Moduleの関数を指定してインポートして関数呼び出し（Module名省略）
  def func3 do
    import List, only: [ flatten: 1 ]
    flatten [1, [2, 3], 4]
  end

  # Moduleの関数を除外してインポートして関数呼び出し（Module名省略）
  # エラーになる
  def func4 do
    import List, except: [ flatten: 1 ]
    flatten [1, [2, 3], 4]
  end
end
```

# Alias

```
defmodule Hoge do
  defmodule Fuga do
    defmodule Bar do
      def puts do
        IO.puts "Hello World"
      end
    end
  end

  def hello do
    alias Fuga.Bar, as: Bar
    Bar.puts
  end
end

iex> Hoge.hello
Hello World
```

# Module Attribute

```
defmodule Example do
  @attr "hoge"
  def get_attr do
    @attr
  end
end

iex> Example.get_attr()
"hoge"
```

設定タイミング次第で、意図しない形になることも

```
defmodule Example do
  @attr "hoge"
  def first, do: @attr

  @attr "fuga"
  def second, do: @attr
end

iex> Example.first
"hoge"
iex> Example.second
"fuga"
iex> Example.first
"hoge"
```
du -h などの結果を簡単にソートする


`du -h` とするとサイズが 10M のように表示されて見やすいです。しかし、結果をソートをしたい時に `sort -n` でうまくソートできません。

```sh
$ du --max-depth=1 -h | sort -nr
640K	./.git
128K	./config
116K	./app
 81M	.
 73M	./vendor
 32K	./bin
 16K	./public
4.8M	./tmp
4.0K	./test
4.0K	./db
4.0K	./.bundle
2.7M	./log
  0B	./lib
```

ところが 2009 年にリリースされた GNU coreutils 7.5 以降では、`sort -h` で楽にソートできるようです。ちなみに `-r` は降順です。

```sh
$ du --max-depth=1 -h | sort -hr
 81M	.
 73M	./vendor
4.8M	./tmp
2.7M	./log
640K	./.git
128K	./config
116K	./app
 32K	./bin
 16K	./public
4.0K	./test
4.0K	./db
4.0K	./.bundle
  0B	./lib
```

便利ですね！！！

## Mac

ちなみに Mac では・・・。

```sh
brew install coreutils
du -d 1 -h | gsort -hr
```

## ls

ちなみに `sort -k` を使えば `ls` のようなカラムが複数ある結果もソートできます。

```sh
ls -lh | sort -hr -k 5,5
```

実は `ls -S` でサイズの逆順にソートできるから不要なのですが・・・。

```sh
ls -lhS
```

## 参考

- [linux - How can I sort du -h output by size](http://stackoverflow.com/questions/14562423/is-there-a-way-to-ignore-header-lines-in-a-unix-sort)