
### `.bashrc` と `.bash_profile`

`~/.bashrc` と `~/.bash_profile` は Bash の設定を書くファイル。 Bash を使うとき一番最初に実行される。同じようなファイルに `~/.bash_login` `~/.profile` `/etc/profile` `/etc/bashrc` などがある。

`~/.bashrc` はインタラクティブシェルとして実行された時だけ実行される(べき)ファイル。 `$ bash` のようににすると何度も実行される可能性がある。 `PROMPT_COMMAND` や `PS1` などインタラクティブシェルのための環境変数を設定したり、エイリアスや関数を定義する。

`~/.bash_profile` `~/.bash_login` `~/.profile` はログインした時に1度だけ実行される。 `PATH` の設定などを行う。

`/etc/*` はそのシステム全体の設定なので基本的に触らない。

ついでにログアウトした時に実行される `.bash_logout` というのもある。`$ bash` したあと `$ exit` したときには実行されない。用途は知らない。

しかし、これらのファイルは環境によって読み込まれるタイミングが違う。共通の設定を使うには少し考えて使う必要がある。

以下ログインシェルが `bash` になっている前提。他のシェルを使っている場合はぜんぜん違うはず。

### Ubuntu の場合

Ubuntu では次の手順で処理がされる。

- ログインしたとき
  - `~/.profile` があるか確認して実行
- Bash (ターミナル)を開いた時
  - `~/.bashrc` があれば実行

なにもしないと `~/.bash_profile` `.bash_login` は実行されない。

`~/.profile` を編集しても、もう一度ログアウトとログインをするまで再読み込みはされない。編集後はターミナルを開くたびに `$ exec bash -l` とかする必要がある。

### OS X の場合

OS X では 次の手順で処理がされる。

- Bash (ターミナル) を開いたとき
  - `~/.bash_profile` があるか確認して実行
  - なければ `~/.bash_login` があるか確認して実行
  - 両方なければ `~/.profile` があるか確認して実行

なにもしないと `~/.bashrc` は実行されない。 `~/.bash_profile` で `~/.bashrc` を実行するように書くのが一般的みたいだ。

### Ubuntu と OS X で共通の `~/.bash_profile` `~/.bashrc` を使う

GitHub で dotfiles を管理して使うとき、環境ごとにファイルを分けたりするのは面倒だしイケてない。同じファイルを使えるようにする。

`~/.profile` と `.~/bashrc` をそれぞれ用意して、次の `.bash_profile` を用意する。

```bash
# .bash_profile
source ~/.profile
source ~/.bashrc
```

Ubuntu の場合はログインした時点で `.profile` が実行され、ターミナルを開いたときに `.bashrc` が実行される。

OS X の場合はターミナルを開いたタイミングで `.bash_profile` が実行されて、 その中で `.profile` と `.bashrc` が実行される。

`.profile` はシェルが `bash` 以外の環境でも実行される可能性があるので、そのことを踏まえて書くほうがいいのかもしれない。 Bash しか使わないなら問題になることはなさそう。

Docker を使って軽く確認した限り CentOS でも、この書き方で問題なさそう。

### 参考

- [.bash_profileとか.bash_loginとか.profileとか.bashrcとか.bash_logoutとか多すぎる - rderaログ](http://d.hatena.ne.jp/rdera/20080806/p1)
- [bashrcの設定の読み込まれる順番 - それマグで！](http://takuya-1st.hatenablog.jp/entry/20110102/1293970212)
- [osx - Why Mac OS X don't source ~/.bashrc - Ask Different](http://apple.stackexchange.com/questions/119711/why-mac-os-x-dont-source-bashrc)
- [Bash Configurations Demystified](http://dghubble.com/blog/posts/.bashprofile-.profile-and-.bashrc-conventions/)


Mac OS X と Ubuntu で共通の .bashrc を使う


### goemon

[goemon](https://github.com/mattn/goemon) は mattn さんが[作った](http://mattn.kaoriya.net/software/lang/go/20150223224545.htm) Web 用の開発ツール。 Go 言語製。

ファイルが更新したタイミングでコマンドを実行して、開発サーバを再起動したり livereload を実行したりできるらしい。

設定が YAML で簡単にいじれたり、特定のビルドシステムとかに依存しない感じがよさそうなので試す。自分が普段使っている Node.js と組み合わせてみる。

### インストール

Go 言語製なので `go get` で入る。もし `GOROOT` を設定していなければ設定する必要がある。最初レポジトリの URL をただ指定したら、コマンドがインストールされなくて1分ぐらいハマった。 README に書かれた URL を指定すればよかった。

```sh
$ go get github.com/mattn/goemon/cmd/goemon
```

`babel` と組み合わせるので、そっちもインストール。

```sh
$ npm install babel
```

### 設定

設定は `goemon.yml` に書くらしい。 `goemon -g` で標準出力にはき出されるので最初はそれを使う。

```sh
$ goemon -g > goemon.yml
```

できた `goemon.yml` を自分の環境に合わせて書き換える。今回はこんな感じ。

```yaml
livereload: :8001
tasks:
- match: './src/*.js'
  commands:
  - node_modules/.bin/babel src --out-dir lib
  - :restart
  - :livereload /
- match: './assets/*.txt'
  commands:
  - :livereload /

```

### サーバ

Express や connect を使った Web サーバの場合、`connect-livereload` を使うと自動でリロードさせることができた。

`connect-livereload` に渡したポートと `goemon.yml` のポートを合わせる。

```sh
import path from 'path';
import livereload from 'connect-livereload';
import express from 'express';

const app = express();

app.use(livereload({ port: 8001 }));

app.get('/', (req, res) => {
    var assetsDir = path.resolve(__dirname, '..', 'assets' + req.url);
    var files = fs.readdirSync(assetsDir);
    res.send(`<html>Hello, World!<br>${ files.join('<br>') }</html>`);
});

app.listen(8000);
```

`src/server.js` として保存。

### 実際に動かす

`goemon ${ 起動コマンド }` で起動できる。

```sh
$ babel src --out-dir lib
$ goemon node lib/server
```

`localhost:8000` にアクセスすると、`Hello, World!` と表示される。 DevTools の Network で見るとちゃんと livereload.js も読み込まれている。

試しに `Hello, World!` の部分を `Hello, Chicken!` に変えて保存すると、ワンテンポおいて画面が更新された。

また `assets` フォルダを作成し、中に拡張子が `.txt` なファイルを作成・削除すると、同じように自動で更新されファイル名が表示される。

### 色々やってみた感想

- コマンドが停止(?)すると自動でもう一度実行してくれる
  - 起動のタイミングで失敗すると何度も再起動し続けて、ちょっと慌てる
- `goemon.yml` を更新すると自動で設定を読み直してくれるっぽい
  - 便利
- `gulp` とかでやる `src/**/*.js` みたいな指定をすると反応してくれない
  - ソースコードを軽く読んだ限りできそう
  - なにかが間違っているのか、バグなのか
- 環境変数を設定できると便利そう
  - `node_modules/.bin` を `PATH` に加えたり
- `goemon.yml` 以外の設定ファイルも読めないのかな
  - Web ブラウザの確認だけじゃなくてテストにも使えそう
  - その場合設定ファイルは分けたほうが良さそう
- 実際に使う場合は `gulp-changed` と組み合わせたりって感じだろうか
- 特定のビルドシステムに依存しないと、やっぱり楽そう
  - `gulp.watch` は `gulp` 外のシステムと組み合わせようとするとかなり辛い


Node.js の Web サイト開発で goemon を試す


### 実装

仕様について[この前](/2014/05/09/es6-iterator/)調べた。

実装がどうなっているかも確認する。

### Chrome

*Chrome* はそのままだとどのバーションでも、イテレータ関係の機能は全く使えない。`chrome://flags/#enable-javascript-harmony`を有効にする必要がある。

*Chrome 35.0.1916.153 stable* だと *V8* が *3.25.28.18* で`array.keys`、`array.values`、`array.entries`が存在する。for-ofは`Iterable`ではなく`Iterator`を渡す場合動く。つまり、`for (var a of [0, 1, 2]) ...`はダメだけど`for (var a of [0, 1, 2].values())`なら期待通り動く。ジェネレータも動いた。

*Chrome 38.0.2086.3 canary* では *V8* が *3.28.19* になってWeakMap、WeakSet以外はfor-ofもジェネレータもひと通り使えるようになっていた。かなりいいかんじ。

### Node

*Node* でも`--harmony`フラグを付けないとイテレータ関係の機能は使えない。

*Node 0.10.29* は *V8* が *3.14.5.9* で、一応`Map`、`Set`、`WeakMap`のコンストラクタが存在する。ただし、イテレータ周りの実装はなくて全く使えない。

*Node 0.11.13* では *V8* は *3.25.30* になって、`Symbol`、`Array.keys`などが実装されfor-ofは`Iterable`じゃなくて`Iterator`を受け取る、*Chrome 35* と同じような動作をする。ジェネレータも動いた。

### Firefox

for-ofと`Array`の`@@iterator`は13の時から使えるらしい[\[参考\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla)。`Map`と`Set`の`@@iterator`は17から使える。ジェネレータも使えた。

*Firefox 30* で確認したら、`Array`、`Map`、`Set`はなぜか`array.values`はないのを除けばメソッドも含めて実装されていて、`WeakMap`のコンストラクタも存在していた。

ただし、`Symbol`が実装されたのは33かららしい[\[参考\]](http://d.hatena.ne.jp/teramako/20140625/p1)。`Iterable`なオブジェクトには、`Symbol.iterator`ではなく`'@@iterator'`という文字列をキーに使っている。

*Firefox 33.0a1 nightly* で確認したら`Symbol`はあったけど、`@@iterator`はまだ`'@@iterator'`という文字列をキーに使っていた。おそらくこれから移行していくんだと思う。このバージョンでも`array.values`はなぜかない。

### Safari/WebKit

*Safari 7.0.5* はイテレータ関係は全くダメ。

*Webkit nightly build 7.0.5 9537.77.4, r170987*で確認したら、`array.values`と`[Symbol.iterator]`を除いて、`Array`、`Map`、`Set`がメソッドも含めて実装されていた。ただし、`array.keys`とかが返すオブジェクトが謎。`next`とかのメソッドは存在しない。for-ofには`array`と`array.keys`などが返すオブジェクトを渡すことができたけど、自分で`Iterable`とか`Iterator`を作って渡すのは無理だった。

なんか1番変な実装だった。Yosemiteで良くなるのかな？わからない。

### IE

知らない

### Transpilers

- [regenerator](http://facebook.github.io/regenerator/)
  - ジェネレータをES5に変換する
  - ジェネレータは`Symbol.iterator`があればそれを、なければ`'@@iterator'`を使うっぽい。[\[参考\]](https://github.com/facebook/regenerator/blob/master/runtime/dev.js)
- [es6-transpiler](https://github.com/termi/es6-transpiler)
  - ES6の構文をES5に変換する
    - ジェネレータは未対応
  - spread、for-of、array comprehensionsで`Iterable`なオブジェクトを使えるっぽい
  - `Symbol.iterator`があればそれを、なければ`'@@iterator'`を使うっぽい[\[参考\]](https://github.com/termi/es6-transpiler/blob/master/transpiler/forOf.js)
- [google/traceur-compiler](https://github.com/google/traceur-compiler)
  - ES nextをES5に変換する
  - `Symbol`も`Map`も`Set`も面倒見てくれる
    - `WeakMap`とかはない
    - 実行環境が中途半端に実装していると、それ以上は面倒見てくれない
  - `Symbol.iterator`を使う

### Polyfills

- [es6-map](https://github.com/medikoo/es6-map)、[es6-set](https://github.com/medikoo/es6-set)
  - それぞれ`Map`と`Set`のpolyfill
  - `Symbol.iterator`があればそれを、なければ`'@@iterator'`を使う
- [es6-shim](https://github.com/paulmillr/es6-shim)
  - いろんなオブジェクトのpolyfill
  - `Symbol.iterator`があればそれを、なければ`'_es6shim_iterator_'`を使う
    - ただし、Firefoxの場合は`'@@iterator'`を使う
    - 少し複雑

### まとめ

- 現状イテレータをそのまま使える処理系はなさそう
  - そもそも実装されていなかったり、フラグが必要だったり
- for-ofとかジェネレータを使う場合transpilerが必要
- 中途半端に実装されている環境を考慮するといろいろつらい
- 自分の作ったライブラリをIterator対応させたい場合`iterator`メソッドを作って、それを`Symbol.iterator`と`'@@iterator'`に入れておくのがいいかもしれない

```javascript
var AwesomeObject = function() {};

AwesomeObject.prototype.iterator = function(){
    // iteratorを返す素晴らしい処理
};

if (typeof Symbol !== 'undefined' && Symbol.iterator)
  AwesomeObject.prototype[Symbol.iterator] = AwesomeObject.prototype.iterator;
AwsomeObject.prototype['@@iterator'] = AwesomeObject.prototype.iterator;
AwsomeObject.prototype['_es6shim_iterator_'] = AwesomeObject.prototype.iterator;
```


イテレータの実装


### イテレータ

JavaScriptを使っているとコレクションの操作が不便で仕方がない。ES5で`forEach()`とか`map()`とかが出てきてだいぶマシにはなったけれど、`Array`以外のオブジェクトは色々ハックしなくちゃいけないから、まだまだ面倒くさい。

いい加減にイテレータを使いたい、からES6のイテレータについて調べた。

### 仕様

[ECMAScript6のドラフト](http://people.mozilla.org/~jorendorff/es6-draft.html)(rev24 2014年4月27日)を読んだ。`Iterable`と`Iterator`という見た目が似ている2つのインターフェイスがあって少し混乱しやすい。

### `Iterable`と`Iterator`

`Iterable`は、呼び出すと`Iterator`を返す`[Symbol.iterator]()`というメソッドを持たなきゃいけない。`Symbol`については[ここ](http://tc39wiki.calculist.org/es6/symbols/)とか[ここ](http://d.hatena.ne.jp/teramako/20130317/p3)で。`Array`とか`Map`とかはこの`Iterable`を実装している。

```javascript
var array = [1, 2, 3];
var iterator = array[Symbol.iterator]();
```

`Iterator`は`next()`というメソッドを持つ。`next()`はイテレーションが終わりかどうかを示す`done`と値`value`を持つオブジェクトを返す。

```javascript
iterator.next(); // => { done: false, value: 1 }
iterator.next(); // => { done: false, value: 2 }
iterator.next(); // => { done: false, value: 3 }
iterator.next(); // => { done: true, value: undefined }
```

### for-of

for-in 構文はオブジェクトのキーをイテレートする。使いづらい。

ES6で新しく追加された for-of 構文は`Iterable`を受け取って`Iterator`を作る。その`Iterator`の`next()`メソッドをループごとに呼び出す。

```javascript
for (var value of array)
    console.log(value);
// 1 2 3
```

ややこしいことに`Array`の返す`Iterator`は`Iterable`でもある。でもそのおかげで、for-of に渡せる。

```javascript
for (var val of array[Symbol.iterator]())
    console.log(val);
// 1 2 3
```

### generator

ジェネレータというのもあって`Iterator`を返す関数を書きやすくしたもの。ジェネレータが返す`Iterator`も`Iterable`を実装している。`function*`と`yield`と`yield*`という構文で定義できる。

```javascript
function* gen() {
    for (;;) {
        yield 1;
        yield* [2, 3];
    }
}

for (var value of gen())
    console.log(value);
// 1 2 3 1 2 3 1 2 3 1 2 3 ...
```

`yield*`に渡すオブジェクトも`Iterable`。

arrow-functionとは組み合わせて使えない。あんまりだ。\[[参考](http://esdiscuss.org/topic/generator-arrow-functions)\]

### comprehension

`Iterable`から`Array`とかを作る構文がある。

```javascript
[for (x of [1, 2, 3]) x * x]; // => [1, 4, 9]

var iterable = (for (x of [1, 2, 3]) if (x % 2 === 1) x);

for (var value of iterable)
    console.log(value);
// 1 3
```

### spread

`Iterable`は`...`をつけて引数に渡すことができる。

```javascript
function f(a, b, c) {
    return [a, b, c];
}

f(1, ...[2, 3, 4]); // => [1, 2, 3]
```

### destructuring

ES6では複数の変数に`Iterable`をまとめて代入ができる。

```javascript
var [a, b, c] = [1, 2, 3];
a; // => 1
b; // => 2
c; // => 3
```

関数の引数も。

```javascript
function add([a, b]) {
    return a + b;
}

add((function*() {
    yield 1;
    yield 1;
}())); // => 2
```

### `Iterable`を受け取るメソッド・コンストラクタ

ES6で増えたメソッド・コンストラクタには`Iterable`を引数として受け取るものがある。

- `Array.from(iterable)`
- `Promise.all(iterable)`
- `Promise.race(iterable)`
- `new Map(iterable)`
- `new Set(iterable)`
- `new WeakMap(iterable)`
- `new WeakSet(iterable)`

### 実装とかPolyfillとか

実装とかPolyfillとかがどうなっているのかもまとめようと思ったけど、なんか思ったより長くなったから次の投稿で。

`throw()`メソッドの話とかもスルーしている。

### 参考

- [The Iterator protocol - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
  - 古いFirefoxの実装とか
- [Iterator current/prev value](http://esdiscuss.org/topic/iterator-current-prev-value)
  - `current`とか`prev`とかのプロパティがない理由
- [Generator * syntax](http://esdiscuss.org/topic/generator-syntax)
  - `yield`がES5だと strict mode 以外では予約語じゃないって話
- [Final iterator spec](http://esdiscuss.org/topic/final-iterator-spec)
  - そのオブジェクトが`Iterable`かどうやって調べるのか、とか


ES6のイテレータについて調べた


### 拡張子とそれ以外

元ネタ : [【JavaScript】ファイル名(拡張子あり)からファイル名(拡張子なし)と拡張子に分割する(正規表現) - Qiita](http://qiita.com/kyoshiro-obj/items/3c59f14b37a0d7b7d59f)

`String#match()`じゃなくて`String#split()`でできるとなんかコードの意味的にもスッキリしそう、っていう思いつきで書いてみた。

```javascript
function splitExt(filename) {
    return filename.split(/\.(?=[^.]+$)/);
}

splitExt('img.jpg');  // => [ 'img',   'jpg'  ]
splitExt('.html');    // => [ '',      'html' ]
splitExt('lib.d.ts'); // => [ 'lib.d', 'ts'   ]
splitExt('abc');      // => [ 'abc'           ]
```

元ネタは`String#match()`を使っているから、拡張子がない場合にnullなるし、そうなるとnullチェックとか必要になって面倒な気がする。こっちの方法だと拡張子無いパターンでも配列が帰ってきてて若干使いやすいかもしれない。

### ドット

ドット含むバージョンも。

```javascript
function splitExt(filename) {
    return filename.split(/(?=\.[^.]+$)/);
}

splitExt('img.jpg');  // => [ 'img',   '.jpg' ]
splitExt('.html');    // => [ '.html'         ]
splitExt('lib.d.ts'); // => [ 'lib.d', '.ts'  ]
splitExt('abc');      // => [ 'abc'           ]
```

ドットで始まる場合に少し挙動が変わっている。

`".gitignore"`とかを拡張子として処理するのは違う気がするので、実際のファイル名を扱うなら、こっちの挙動のほうがいいかもしれない。場合によって使い分ける感じかな。

### Node

Nodeだとpathモジュールの`extname()`っていう関数で拡張子だけ抜き出せる。

```javascript
var path = require('path');

path.extname('img.jpg');  // => '.jpg'
path.extname('.html');    // => ''
path.extname('lib.d.ts'); // => '.ts'
path.extname('abc');      // => ''
```

ブラウザとNodeで共通して使える汎用パス操作ライブラリとかあるといいかもしれない。どれくらい使われるかわかんないけど。


JavaScriptでファイル名を拡張子とそれ以外に分ける


### JavaScriptの引数

元ネタ:[Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html)

JavaScriptでは関数定義の引数の数と呼び出し時の引数の数が違っていても、エラーにならずに実行される。

```javascript
function f(a, b) {
    return [a, b];
}

f();        // => [undefined, undefined]
f(1);       // => [1, undefined]
f(1, 2);    // => [1, 2]
f(1, 2, 3); // => [1, 2]
```

引数が足りなければエラーにしたいことも多いんだけど、ES5までだと割りとごちゃごちゃした感じになっちゃう。そういう問題を、ES6で提案されているdefault parameterを使ってスッキリと解決するTipsが紹介されていた。

```javascript
function throwError() {
    throw Error();
}

function f(a = throwError()) {
    return a;
}

f(1); // => 1
f(); // => エラー!
```

Pythonの似た機能だと関数の定義時に1回評価されるだけだからこういうことはできないけど、ES6のdefault parameterは引数が与えられなかった時だけ評価されるらしい。

### コーヒー

元ネタのコメント欄で指摘されていたけど、CoffeeScriptでも同じことができる。

```coffeescript
throwError = -> throw Error()

f = (a = throwError()) -> a

f 1 # => 1
f() # => エラー!
```

TypeScriptでもできるんじゃないか、と一瞬思ったけど、型チェックがある言語ではできても意味がないか。

### Neat idea

元ネタのコメント欄で「Neat idea!」って言われていた。「neat」の意味は「きちんとした」とか「整理された」とか。

こういうところでこの単語を使うんだ、みたいなのを覚えておくといいんじゃないかと思う。から、ここにメモしておく。


ES6の新機能で引数を必須にする


### esnext

Squareが作ったECMAScript6コンパイラ、[esnext](https://github.com/square/esnext)の名前を最近わりと聞くので試してみた。

READMEによると[broccoli](https://github.com/joliss/broccoli)みたいなビルドツールと一緒に使うのを目指しているらしい。

ES6をES5に変換するnodeモジュールで、npmでインストールできて、`require('esnext')`で使える。

```sh
$ npm install esnext
```

```javascript
var esnext = require('esnext');
```

### 変換してみる

モジュールの`compile()`という関数で変換できる。簡単。

```javascript
var es6 = 'var a = () => 1;';
var es5 = esnext.compile(es6);

es5.code // => "var a = function() {\n  return 1;\n};"
```

`transform()`関数はesprimaで吐き出されたASTを変換する。

`compile()`も`transform()`も第2引数にオプションを指定できる。`{ arrowFunction: false }`を渡せば`(() => 1)`のような関数を変換しなくなる。[他の機能も全部無効にできる](https://github.com/square/esnext/blob/master/lib/index.js)よう作られている。将来機能が実装された時に簡単に無効にできるように、ってことかな。

### SourceMap

オプションにソースの名前とかを渡すとSourceMapを吐いてくれる。

```javascript
var compiled = esnext.compile('(() => 1)', {
    sourceFileName: 'es6.js', // ソースの名前
    sourceMapName: 'es5.js' // 変換後の名前
});

compiled.map; // SourceMapのオブジェクト
```

このままだとただのオブジェクトだから`JSON.stringify()`してファイルに保存するなり、サーバのレスポンスにするなりが必要。Data URLにして埋め込んじゃうのが簡単そう。\[[参考](http://presentboldly.com/imaya/source-map/8)\]

```javascript
var code = compiled.code +
  '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
  new Buffer(JSON.stringify(compiled.map)).toString('base64');

// codeを保存するなり(ry
```

これでDevToolsでブレークポイントとか使える。`Error().stack`はちゃんと取れなかった。自分のやりかたが悪かったのか、そもそもできないのか。

### 他との違い

Googleの[traceur-compiler](https://github.com/google/traceur-compiler)なんかはガチムチな感じで、いろいろやっている。ソースも追いにくくて、どのコードが何をしてるのかわかりづらい。

esnextはソースコードがすごいシンプルで、実際の変換はすべて機能毎に他のモジュールに投げてしまっている。ハックのやりやすさとか、コードの読みやすさが利点かな。対応する機能を増やしたりするのも、こっちのほうがやりやすそう。

弱点としては、まだ対応している機能が限られていたり、ブラウザ上では動かないこととかがあるかも。


ES6をES5に変換するesnextを試してみた


### Cordovaを使ってみる

OS XでCordovaを使ってみた。メモを残しておく。

### インストール

npmでインストールできる。楽ちん。

```sh
npm install -g cordova

# androidをターゲットにする場合、Android SDKとantもインストールしておく必要がある
brew install android-sdk
brew install ant
```

### プロジェクトの作成

ファイルとかいろいろ自動で作ってくれた。

```sh
# いろいろやってくれる
cordova create cordovatest com.chick307.cordovatest CordovaTest

# できたディレクトリに入る
cd cordovatest

# androidを対象のプラットフォームに加える
cordova platform add android
```

### ビルド

最初やった時にエラーになったからAndroid SDKのアップデートをした。

```sh
# Android SDKをアップデートしておく
android update sdk -u

# ビルド
cordova build android
```

`platforms/android/ant-build`ディレクトリの中にapkができる。

### 実行

`cordova`コマンドを使って、エミュレータや実機で実行することができる。

```sh
# エミュレータで実行
cordova emulate android

# 実機で実行
cordova run android
```

### 署名

Google Playに公開するには署名が必要なのでやってみる。

```sh
# キーストアandroid.keystoreを作成
keytool -genkey -v -keystore android.keystore -alias key -keyalg RSA -keysize 2048 -validity 10000
```

`platforms/android/local.properties`に以下の内容を追記する。

```
key.store=path/to/android.keystore
key.alias=key
```

実際に署名されたapkを得るには`--release`フラグを付けてビルドする

```sh
cordova build --release
```

これで署名されたapkが`platforms/android/ant-build`ディレクトリのかなにできる。

### 編集

アプリの中身は`www`ディレクトリの中にある`index.html`を編集すればいいらしい。

### 印象

`cordova`コマンドでだいだい完結してて使いやすい。ビルドも実行もできるし。

ただし限界はあって、プラットフォームごとの知識はなんだかんだで必要そう。全くネイティブアプリを作ったことがない人が急にやるのはおすすめしにくいかも。


Cordovaを試してみた

### figure要素

HTML5 では新たに figure 要素が追加された。画像・映像・プログラムのソースコード・詩歌・アスキーアートなどの、自己完結しているコンテンツに、注釈を付けるために使われる。

figure 要素は、メインコンテンツと関係ある、独立したサブコンテンツにのみ使うことができる。例えば、挿絵や図表とかには使えるけど、画像がそのページのメインである場合にはfigure要素を使ってはいけない。そのコンテンツの有無で、アウトラインに影響があるかで判断できるかも。

### figcaption要素

figcaption要素は注釈や図表の見出しなどを表す。figure要素の最初か最後のどちらかに、ひとつだけfigcaption要素を挿入することができる。

```html

<figure>
    <video src="path/to/video.webm" />
</figure>
```

```html

<figure>
    <figcaption>〇〇の写真</figcaption>
    <img src="path/to/image.jpg" />
</figure>
```

figure要素のなかではh1要素やp要素を使うことができる。figureはセクショニングコンテンツの要素なので、ページ全体のアウトラインは変わらない。

```html

<figure>
    <h1>〇〇の写真</h1>
    <img src="path/to/image.jpg" />
    <figcaption>××</figcaption>
</figure>
```

### 前方互換

スタイルシートをちゃんと指定すれば、一部を除いて古いブラウザでも特に問題なく表示される。IE8以下とFirefox2にはバグがあって、それぞれ対応が必要。

IE8以下では未知の要素にスタイルシートが適用されない。簡単なJavaScriptを書くだけで対策できる。

```javascript
// IE8でfigure要素にスタイルシートが適用されるようにするJavaScript
document.createElement('figure');
document.createElement('figcaption');
```

Firefox2では、未知の要素の中にh1やpなどのブロック要素があるとき、DOMが正しく生成されない。XHTMLとしてHTML5を公開する必要がある。ただし、Firefox2のシェアはほぼ0だから、無視するべきかも。

### 参考

- [4.5.11 The figure element — HTML5](http://www.w3.org/TR/html5/the-figure-element.html#the-figure-element)
- [figure 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP](http://www.html5.jp/tag/elements/figure.html)
- [HTML5 を IE や Firefox 2 でも使えるようにする方法 - html5doctor - HTML5.JP](http://www.html5.jp/html5doctor/how-to-get-html5-working-in-ie-and-firefox-2.html)
- [\[HTML5\]正しいfigure要素の使い方(文脈まで深く考えた) - WEBCRE8.jp](http://webcre8.jp/compare/html5-right-figure.html)
- [『figure要素』 / HTML5新要素一覧　 | HTML5でサイトをつくろう](http://www.html5-memo.com/new-element/figure/)
- [HTML 5での\<figure\>要素の使い方と疑問点(平成22年 4月19日) - 『しらぎくのWWW作成入門』メモ](http://www.memo.marguerite.to/WWW/%E5%B9%B3%E6%88%9022%E5%B9%B4/4%E6%9C%8819%E6%97%A5-HTML_5%E3%81%A7%E3%81%AE%3Cfigure%3E%E8%A6%81%E7%B4%A0%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8%E7%96%91%E5%95%8F%E7%82%B9.html)

HTML5のfigure要素の使い方


### Heartbleed

最近OpenSSLのheartbeatという機能にバグが見つかって、NHKのニュースなんかでも取り上げられるほどの騒ぎになっている。どうやら攻撃者がメモリを覗けてしまうようで、秘密鍵もバレてしまうような深刻なものらしい。

Heartbleed(ダジャレ?)って名前が付けられている。

### Nodeへの影響

「Nodeはどうなんだろう」と思い調べると、基本的に影響はないらしい。Nodeは1年くらい前に別の理由でheartbeat機能を無効にしていたみたいだ。だから普通にコンパイルされたNodeそのものは安全。

ただし、Node以外の層とか使っているモジュールがOpenSSLを利用していた場合は個別に確認が必要だし、Nodeも使うOpenSSLをコンパイルオプションで指定していた場合は危険。

チェックツールがあるから、それ使えばとりあえず大丈夫かわかる。アウトだった時はどこが原因なのか調べないといけないけど。

### 参考

- [Heartbleed Bug](http://heartbleed.com/)
- [OpenSSLの重大バグが発覚。インターネットの大部分に影響の可能性 | TechCrunch Japan](http://jp.techcrunch.com/2014/04/08/20140407massive-security-bug-in-openssl-could-effect-a-huge-chunk-of-the-internet/)
- [StrongLoop | Is Node.js affected by the OpenSSL Heartbleed Vulnerability?](http://strongloop.com/strongblog/heartbleed-openssl-node-js/)
- [openssl: disable HEARTBEAT TLS extension · 28c6e42 · joyent/node](https://github.com/joyent/node/commit/28c6e42e)
- [Test your server for Heartbleed (CVE-2014-0160)](http://filippo.io/Heartbleed/)
  - WebサイトにheartbeatバグがあるかチェックするWebサービス


NodeにHeartbleedバグは影響するか


### NodeでCLIを扱う

まとめ、って言うほどじゃないけど調べたものを残しておく。

- 標準のttyモジュール
- [sindresorhus/chalk](https://github.com/sindresorhus/chalk)
  - 文字の色、背景色、その他の修飾を簡単にするモジュール
- [TooTallNate/keypress](https://github.com/TooTallNate/keypress)
  - 標準入力でkeypressイベント、mousepressイベントが発生するようにできる
- [SBoudrias/readline2](https://github.com/SBoudrias/readline2)


NodeでCLIを扱うモジュールとか


### `+0`と`-0`

JavaScriptでは`+0`と`-0`が区別される。

普通に比較する場合には違いはないが、割り算をした時に結果が変わってくる。

```javascript
console.log(+0 === -0); // true

console.log(1 / +0 === 1 / -0); // false
```

`1 / +0`は`Infinity`に、`1 / -0`は`-Infinity`になる。`0`は`+0`と同じ。

### ECMAScript6

2014年4月7日現在、ECMAScript6で提案されている`Object.is()`でも`+0`と`-0`は区別される予定。

```javascript
Object.is(+0, -0); // false
```

### 参考

- [Sameness in JavaScript - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Sameness)


JavaScriptの+0と-0


### これからは

技術的なことはここに書いていく。

### Hello, World!

こんにちは世界!

```javascript
console.log('Hello, World!');
```
