OmniAICreator/Qiita-1.07M huggingface dataset:
「オフラインリアルタイムどう書く第8回(ビットボンバーマン)」の問題を解いてみた


[横浜へなちょこプログラミング勉強会](https://yhpg.doorkeeper.jp/)にて過去に出題された[ビットボンバーマン](http://nabetani.sakura.ne.jp/hena/ord8biboma/)を解いてみた。
回答にかかった時間は100分程度と大幅オーバー。

「ビットボンバーマン」と言うからにはきっとビット演算を用いるのだろう...と思ったのだが、いまいち解法が思いつかず力技で解決してしまった。
爆弾の位置を基点として縦軸、横軸それぞれの最も近い壁のインデックスを探し、爆風が届く範囲を求めるようにしている。

```ruby
class Field
  def initialize x, y, input
    @x, @y = x, y
    @wall, @bomb = input.split("/").map{|str|
      ("%032b" % str.to_i(16)).chars.map &:to_i
    }
    @field = Array.new(32){0}
  end

  def fire
    @field.size.times{|i| bomb i}
  end

  def to_s
    "%08x" % @field.map(&:to_s).join.to_i(2)
  end

  private

  def bomb index
    if @bomb[index] === 1
      bomb_line index, @y.times.map{|i| @x * i + (index % @x)}
      bomb_line index, @x.times.map{|i| i + ((index / @x) * @x)}
    end
  end

  def bomb_line index, line
    wall = line.each_with_object([]){|i, r| r << i if @wall[i] == 1}
    min = (line.index(wall.reverse.find{|i| i < index}) || -1) + 1
    max = (line.index(wall.find{|i| i > index}) || line.size) - 1
    (min..max).each{|i| @field[line[i]] = 1}
  end
end

test = <<_TEST
/*0*/ test( "802b1200/01400c20", "53c40cfc" );
/*1*/ test( "28301068/84080504", "d64fef94" );
/*2*/ test( "100a4010/80010004", "e241850c" );
/*3*/ test( "81020400/000000fc", "0e3cfbfc" );
/*4*/ test( "80225020/7e082080", "7fdd24d0" );
/*5*/ test( "01201200/40102008", "fe1861fc" );
/*6*/ test( "00201000/01000200", "43c48f08" );
/*7*/ test( "00891220/81020408", "ff060c1c" );
/*8*/ test( "410033c0/0c300000", "3cf0c000" );
/*9*/ test( "00000000/01400a00", "7bf7bf78" );
/*10*/ test( "00000000/20000a00", "fca2bf28" );
/*11*/ test( "00000000/00000000", "00000000" );
/*12*/ test( "00cafe00/00000000", "00000000" );
/*13*/ test( "aaabaaaa/50000000", "51441040" );
/*14*/ test( "a95a95a8/56a56a54", "56a56a54" );
/*15*/ test( "104fc820/80201010", "ea30345c" );
/*16*/ test( "4a940214/05000008", "05000008" );
/*17*/ test( "00908000/05000200", "ff043f48" );
/*18*/ test( "00c48c00/fe1861fc", "ff3873fc" );
/*19*/ test( "00000004/81020400", "fffffff0" );
/*20*/ test( "111028b0/40021100", "e08fd744" );
/*21*/ test( "6808490c/01959000", "17f7b650" );
/*22*/ test( "30821004/81014040", "c75de5f8" );
/*23*/ test( "0004c810/10003100", "fe4937c4" );
/*24*/ test( "12022020/88200000", "edf08208" );
/*25*/ test( "2aa92098/01160000", "45165964" );
/*26*/ test( "00242940/10010004", "fc43c43c" );
/*27*/ test( "483c2120/11004c00", "33c3de10" );
/*28*/ test( "10140140/44004a04", "eda3fe3c" );
/*29*/ test( "0c901d38/72602200", "f36da280" );
_TEST

require 'minitest/autorun'

describe 'BitBomberman' do
  test.split("\n").each do |line|
    t, n, input, expect = line.match(/^\/\*(\d+)\*\/\s*test\(\s*"([^"]+)",\s*"([^"]+)"\s*\);$/).to_a
    field = Field.new 6, 5, input
    field.fire
    it input do
      assert_equal expect, field.to_s
    end
  end
end
```
Vagrant で SSH の接続ができない：Authentication failure

~~※ 完全に解決してないです~~ →解決したと思われる（[追記2](#追記2)）

環境：Vagrant 1.8.5 + VirtualBox 5.1.4 + CentOS 6.8

SSH のエラーということで鍵まわりを探っていたのですが、特に問題なさそうな雰囲気 ……

仮説：`sudo` しなきゃいけないところがあったのが問題？
対処： `synced_folder` を `/var/www/project_name` に設定していたのですが、 `/var/www` が存在しなかった。

そこで、 `vagrant ssh` して VirtualBox 内で

```zsh
sudo mkdir -p /var/www/project_name
sudo chown -R vagrant /var/www
sudo chmod +x /var/www
exit
```

してみたあと、 `vargant reload --provision` で、動作している様子だった。

ただし、上記の対処が良くて動作したのかどうかの確証はないです ……

## 追記1

* `synced_folder` を削除しみてみる→ダメだった
* `synced_folder` を `/home/vagrant/project_name` にしてみる→ダメだった
* 一旦、VMを削除したあと、上記の対応→ダメだった ……

そこで、 `vagrant ssh` して VirtualBox 内で以下を行った。

```zsh
sudo chown vagrant ~/.ssh/authorized_keys
sudo chmod 0600 ~/.ssh/authorized_keys
exit
```

動いた！

※ `synced_folder` を作る作業と鍵のパーミッションを変更する作業の両方が必要なのかをまだ試してないです。

## 追記2

やはり、 Vagrant1.8.5 のバグ（？）が原因だった様子。
以下の手順で動作しそう。

```zsh
$ vagrant up
default: Warning: Authentication failure. Retrying...
default: Warning: Authentication failure. Retrying...
```

上記の状態になったら、 `Ctr+c` で抜ける。

`vagrant ssh` （パスワードは `vagrant`）

VirtualBox 内で以下を行う。

```zsh
chmod 0600 ~/.ssh/authorized_keys
exit
```

`vagrant reload`

## 追記3

以下を参考に Vagrant へ修正を入れておいたほうが良さそうです。

[Vagrant 1.8.5 でAuthentication failure. Retrying…というエラーが発生するときの対処方法 | Crane & to.](https://www.craneto.co.jp/archives/440/)
iOS 8以下の端末にiTunesでバイナリのインストールに失敗するとき試すこと

iOS 8以下の端末にてなぜかインストールに失敗する。アイコンがグレーアウトしてタップできない。そんなときに試してください。

**バイナリのファイル名に全角文字を使用しない**

一般常識かもしれませんが、恥ずかしくもドハマリしてしまったため忘備録として残します。同じ沼にハマっている方の救いになることだけを祈っています :innocent:
[Linux] グローバルIPを調べる(Webサービス or curl)

調査する機会があったので自分用メモ

# Webサービスを使う

googleで「グローバル ip」などで調べると出てきますが、以下のサーピスなどがあります。

[アクセス情報【使用中のIPアドレス確認】](https://www.cman.jp/network/support/go_access.cgi)


# curl を使う

`inet-ip.info` というドメインでも見ることができます。Go製のWebサービスのようで、ソースも公開されています。
json, yaml, tomlといった形式での取得にも対応しているようです。

```
$ curl inet-ip.info
```

+ [IP address information](http://inet-ip.info/)
+ [masahide/inet-ip.info](https://github.com/masahide/inet-ip.info)


# 参考
[グローバルIPをcurlで確認 - Qiita](http://qiita.com/kanpou_/items/734b947f5a95109e7bb9)
[サーバから外に出ていく時のグローバルIPをコマンドで調べる - Qiita](http://qiita.com/syrinx05p/items/55060ab2e3dead4a370d)
おしゃれな3Dメニュー


デモ：https://mo49.github.io/qiita/20160908/menu.html
（クリックで表示）

```javascript:メニューを作る
const imageFiles = [
  "nav_camera.png",
  "nav_phone.png",
  "nav_mail.png",
  "nav_settings.png"
];

this.menu1 = this.createMenu(imageFiles, 10);
```


```javascript:メニューを表示する
this.showMenu(this.menu1,0,0,0,50,10); // menu, offsetX, offsetY, offsetZ, radius, space
```

全体はこんな感じ

```javascript
createMenu (imageFiles, diameter) {
  this.menus = [];

  for (let [i, src] of imageFiles.entries()) {
    const geom = new THREE.PlaneGeometry(diameter,diameter,20);
    const plane = this.createMesh(geom, src);
    plane.visible = false; // 一旦非表示
    this.scene.add(plane);
    this.menus.push(plane);
  }

  return this.menus;
}

createMesh (geom, imageFile) {
  const PATH = './img/texture/';
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load(PATH + imageFile);
  const mat = new THREE.MeshBasicMaterial({transparent:true});
  mat.map = texture;

  const mesh = new THREE.Mesh(geom, mat);
  return mesh;
}

showMenu(menus, offsetX, offsetY, offsetZ, radius, space) {

  const that = this;
  let degree = 0;
  let loopId;

  update();
  function update() {
    loopId = requestAnimationFrame(update);
    for (let [i, menu] of menus.entries()) {
      menu.visible = true; // 表示
      if (degree > i*space) {
        continue;
      }
      const pos = move(radius, i+1); // radius, index
      menu.position.set(pos['x'] + offsetX, pos['y'] + offsetY,  offsetZ);
    }
    degree++;
    if (degree > menus.length * space) {
      stop();
    }
  }

  function stop() {
    cancelAnimationFrame(loopId);
    console.log("stop");
  }

  function move (radius, index) {
    // speed = speed || 1.0;
    const rad = (degree * Math.PI / 180) * 2;
    const x = radius * Math.sin(rad);
    const y = radius * Math.cos(rad);

    return {'x':x, 'y':y};
  }

}
```
「nth-child()」の便利な使い方

このEntryは、<a href="http://gsacademy.tokyo/" target="_blank" style="text-decoration: none;">G's ACADEMY TOKYO</a>のトレーナー/チューターによる投稿記事です。
授業の中で出たちょっとした質問や疑問、トレーナーが関心のある新技術等を脈絡なく綴っていきます。

![css01.jpg](https://qiita-image-store.s3.amazonaws.com/0/104065/85d4c767-a2a7-4a6a-2156-054c7aa99680.jpeg)


#「nth-child()」の便利な使い方 #

どうも皆さまお初です！
フェイスブックで「あぁぁーあーあーあーあーーあうぁあおあーー」と叫んでいるとある人物です！

今回はCSS３で導入された疑似クラスについて簡単にご紹介しちゃいます！



cssを一つずつ個別に書いてもいいのですが、それだとちょっと効率が悪くなることもあります。
そんなときに「nth-child()」を使いこなすと簡単にスタイルを変化させることができます♪


今回の例で使うマークアップ（html）

```test1.html
<h1>かくだてさんとゆかいな仲間たち</h1>
<ul class="sample">
 <li>栗林怪物</li>
 <li>しんたん</li>
 <li>あやなし</li>
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>
</ul>
```


「nth-child()」の特徴としては細かな設定が色々出来ること♪
具体的には下記のように使えます。


・偶数だけを指定

※わかりやすいように[ul.sample]としていますが[.sample]でもOK！

```test1.css
ul.sample li:nth-child(even) {
    color: #f00;
}
```

この場合だと

```test1.html
<ul class="sample">
 <li>栗林怪物</li>
 <li>しんたん</li>　←偶数番目なのでここの文字色が「赤」に変わる♪
 <li>あやなし</li>
 <li>マドンナともちゃん</li>　←偶数番目なのでここの文字色が「赤」に変わる♪
 <li>いけめん西元隊長</li>
</ul>
```


------------------------


```test1.css
ul.sample li:nth-child(odd) {
    color: #f00;
}
```

```test1.html
<ul class="sample">
 <li>栗林怪物</li> ←奇数番目なのでここの文字色が「赤」に変わる♪
 <li>しんたん</li>　
 <li>あやなし</li> ←奇数番目なのでここの文字色が「赤」に変わる♪
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>　←奇数番目なのでここの文字色が「赤」に変わる♪
</ul>
```

------------------------

そして「:nth-child(数字)」を入れて使うことで個別に指定も可能です。

具体例

```test1.css
ul.sample li:nth-child(3) {
    color: #f00;
}
```

```test1.html
<ul class="sample">
 <li>栗林怪物</li> 
 <li>しんたん</li>　
 <li>あやなし</li> ←３番目なのでここの文字色が「赤」に変わる♪
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>　
</ul>
```



そしてこれ以外にも「:nth-of-type(n)」という便利な疑似クラスも存在しています。
これは現れる要素に対して指定が出来ます。



```test1.html
<div class="kuribayasi_box">
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>
</div>
```


```test1.css
.kuribayasi_box p:nth-of-type(3){
	font-size:50px;
	color:#f00;
}
```

とすると…

```test1.html
<div class="kuribayasi_box">
	<p>栗林</p>
	<p>栗林</p>
	<p>栗林</p>　←この部分がフォントサイズ50px＋文字色が「赤」になる
	<p>栗林</p>
	<p>栗林</p>
</div>
```


■まとめ
ざっくりと紹介しましたが、「nth-child(n)」、「:nth-of-type(n)」を活用すれば、「●番目の要素」「先頭から●番目」、「最後から●番目」、「奇数」、「偶数」、「数字の倍数指定」というような指定ができるようになり、表現の幅が広がります♪

便利な面としてはclassをたくさん使わなくてよくなったり、コードがすっきりしたりという恩恵があります♪

あと、最初のうちは「nth-child(n)」、「:nth-of-type(n)」が混同してしまうかもしれませんが、まずは触ってチャレンジしてみてください♪

余談ですが
[even]　←偶数
[odd]　←奇数
の簡単な覚え方は

[even]が4文字なので偶数
[odd]が3文字なので奇数

と覚えて間違えることも多少は少なくなると思います。

以上、<a href="http://gsacademy.tokyo/" target="_blank" style="text-decoration: none;">G's ACADEMY TOKYO</a>チューター「うわぁぁぁー」によるCSS3の疑似クラスの便利なお話（Trainer's Recipe）でしたとさ♪
Adhocの実機ビルドができない

# 問題

AdhocでBuildすると下記エラーが出て実機でのBuildができない

```
Could not launch <AppName>
process launch failed: failed to get the task for process
```

![image](https://qiita-image-store.s3.amazonaws.com/0/84463/ab33b7c4-da91-54fa-618b-42d2a67110ca.png)

# 解決方法
基本Provisioning Profileを正しく設定すれば問題ないようです。
参考：
 http://makotton.com/2014/06/19/42
 http://stackoverflow.com/questions/3523722/xcode-fails-to-get-the-task-for-process-xxx-how-do-i-solve-this-iphone-sdk-4

が今回はそれでもエラーが出続けたのですが
下記方法で解決しました。

Product > Scheme > EditScheme > Run > DebugExecutable　のチェックを外す
![image](https://qiita-image-store.s3.amazonaws.com/0/84463/0b61958e-cf84-0f54-c034-7ddee1add3f9.png)

ただ↑のチェックを外すとBreakPointが効きません。。。
Vert.x と RxJava を使うときの JDBC 接続メモ

バックエンドのマイクロサービスを叩きまくるような API を作る場合、サーブレットベースのサーバーよりも Vert.x のようなミドルウェアを使ったほうが気楽に作れて良いですよね。勤務先でもちょこちょこ Vert.x が活躍しています。

Vert.x は非同期前提なので、使うときはだいたい RxJava を使うことになると思うのですが、うっかりコネクションがリークしていたことがあったので、最近の JDBC 接続設定をメモしておきます。`Observable.using` が肝です。

```java
public interface JDBCMixin {

    @Nonnull
    default Observable<List<JsonObject>> query(@Nonnull String sql) {
        return query(sql, null);
    }

    @Nonnull
    default Observable<List<JsonObject>> query(@Nonnull String sql, @Nullable Object... args) {
        return query(sql, identity(), args);
    }

    @Nonnull
    default Observable<Optional<JsonObject>> queryOne(@Nonnull String sql, @Nonnull Object... args) {
        return query(sql, rows -> rows.isEmpty() ? Optional.empty() : Optional.of(rows.iterator().next()), args);
    }

    @Nonnull
    default <T> Observable<T> query(@Nonnull String sql, @Nonnull Func1<List<JsonObject>, T> mapper, @Nullable Object... args) {
        return connect(
            conn -> Optional
                .ofNullable(args)
                .map(params -> conn.queryWithParamsObservable(sql, new JsonArray(Arrays.asList(params))))
                .orElse(conn.queryObservable(sql))
                .map(ResultSet::getRows)
                .map(mapper));
    }

    @Nonnull
    default <T> Observable<T> connect(Func1<SQLConnection, Observable<T>> fn) {
        return client().getConnectionObservable().flatMap(connection -> Observable.using(() -> connection, fn, SQLConnection::close));
    }

    @Nonnull
    default <T> Func1<T, T> identity() {
        return v -> v;
    }

    @Nonnull
    JDBCClient client();

}
```

こんな感じで使います。

```java
public class CountryRepositoryImpl implements CountryRepository, JDBCMixin {

    @Override
    @Nonnull
    public Observable<Optional<Country>> get(@Nonnull CountryId countryId) {
        return queryOne("select * from countries where id = ?", countryId.getValue()).map(row -> row.map(this::toCountry));
    }

}
```

ちなみにコネクションリークの検知には Hikari CP の `leakDetectionThreshold` が便利でした（Vert.x でも `io.vertx.ext.jdbc.spi.impl.HikariCPDataSourceProvider` を使えば Hikari CP を使うことが出来ます）。
カスタムUIViewのサンプル

汎用的なUIViewを自作したい時のサンプル

```swift:CustomUIViewSample.swift
import UIKit

class CustomUIView: UIView {

    var nibView: UIView!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    func setup() {
        self.nibView = NSBundle.mainBundle().loadNibNamed("???", owner: self, options: nil).first as! UIView
        self.nibView.frame = self.bounds
        self.nibView.translatesAutoresizingMaskIntoConstraints = true
        self.nibView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        self.addSubview(self.nibView)
    }
}
```
実務でデザイナーがAndroid Studio触ってみた


##なぜAndroid Studio触り始めたか
〜〜2016年7月上旬〜〜
上司：「巷でテクニカルクリエイターって職種ちらほら耳にするからそれになって！」
おれ：「はい！」

ぐらいな勢いでアプリ開発をメインとしてる部署に配属されましたが
タスク管理、作業フロー、部門間の役割分担調整とか全部よろしく！ってぐらい雑にブチ込まれました。
この古民家あげるよ！リノベーションして使ってね。ただ設計書とか道具なんにもないけど。ぐらい雑。

なので「とりあえずコードでも書いてみよ〜」ってぐらいのノリで触り始めました。

##準備
まずエンジニアさんにAndroid Studioを触りたいと旨を伝えました。
その際どこがレイアウト構成されているファイルなのかも聞いておきました。

Gitでデザイン用のブランチを切ってもらい先ほど教えてもらったレイアウトを構成するファイルを記事などを参考に自由に触って感覚をつかんでいきました。

##実作業
エンジニアさんには事前にlayout内にviewのフレームだけ作ってもらい、デザインブランチでlibrary > res配下のxmlを触っていきます。
デザイナーはSketch上で作ったデザインを元にレイアウトを仕上げていきます。

前回書いた『[Sympliを使ってAndroid Studio、Xcode上でデザインを正確かつお手軽に反映する](http://qiita.com/Masaki_Fujimori/items/19c1d0bd5b993e01b371)』のプラグインを使用すると便利です。

Sketch上でMaterial Design、Atomic Designを意識して作ってやるとincludeでパーツをまとめるなどコンポーネント通りに作ることができます。

毎日17:30にデザインブランチをpushして次の日にはエンジニアさんがマージしてくれてるってフローを作りました。
自分は忘れないよう17:30にSlackのリマインダー機能を使って通知してくれるようになってます。

##感想
正直GitもAndroid Studioも全然触ったことなかったのですが足突っ込んだら1ヶ月足らずでできるようになりました。xmlなのでhtml/css触る感覚と似ていたのでハードルは思った以上に低かったです。

デザイナーがスタイルを触ると今までエンジニアさんに渡していたデザイン指示書やデザインデバッグというフローがなくなり工数が減ります。
修正依頼したはずなのに治ってない…またお願いするの気まずい…ってのがなくなりWin-Winです。

今回はlayout内をエンジニアさんにおまかせしましたが、デザイナーがviewを触るってことも全然可能です。

事業部からデザインOKもらったら段階でエンジニアさんにプロジェクトを作ってもらう。
↓
library > res内のフレームからスタイルまで作っていき、その間にエンジニアさんに裏側を作ってってもらう。
↓
デザインができた段階で組み込んでいく。
ってことも可能なのかなって思いました。

長々と書きましたが、ブチ込まれたらできるようになります！以上！

##参照リンク
- [Technical Creator?](https://www.cyberagent.co.jp/technicalcreator/introduction/)
- [Sympliを使ってAndroid Studio、Xcode上でデザインを正確かつお手軽に反映する](http://qiita.com/Masaki_Fujimori/items/19c1d0bd5b993e01b371)
- [Material design](https://material.google.com/)
- [珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで](http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/)
Gulpの実行がうまくいかない時


## Node.jsのアップデートでコンパイルエラーが出る場合

#### node-sass を rebuild

```
$ npm rebuild node-sass
```



## gulp-sassの再インストール

```
Error: Cannot find module 'gulp-sass'
```

再インストール

```
$ npm uninstall --save-dev gulp-sass
$ npm install --save-dev gulp-sass@2
$ npm rebuild node-sass
```


## node-sassの再インストール

```
/Users/****/node_modules/node-sass/lib/extensions.js:158
    throw new Error([
    ^

Error: The `libsass` binding was not found in /Users/****/node_modules/node-sass/vendor/darwin-x64-48/binding.node
This usually happens because your node version has changed.
```

再インストール

```
$ npm uninstall node-sass
$ sudo npm uninstall node-sass
```
ポータルサイト風タブパネル


　jQueryと書かれていた部分をAngularJSに書き換えてやるなどの悪事をはたらきました

``` HTML:index.html

<div id="container">
	<ul class="tab">
		<li ng-click="selectedTab=1" ng-class="{selected : selectedTab==1}">JavaScript</li>
		<li ng-click="selectedTab=2" ng-class="{selected : selectedTab==2}">CSS</li>
		<li ng-click="selectedTab=3" ng-class="{selected : selectedTab==3}">HTML</li>
		<li ng-click="selectedTab=4" ng-class="{selected : selectedTab==4}">AngularJS</li>
		<li ng-click="selectedTab=5" ng-class="{selected : selectedTab==5}">HTML5</li>
	</ul>
	<ul class="panel">
		<li ng-show="selectedTab==1">...</li>
		<li ng-show="selectedTab==2">...</li>
		<li ng-show="selectedTab==3">...</li>
		<li ng-show="selectedTab==4">...</li>
		<li ng-show="selectedTab==5">...</li>
	</ul>
</div>

```

　あとはこれ`<div id="container" ng-init="selectedTab=1">`とかって書き方をしてやるともはやコントローラも必要ないですね。
　実業務だとAPIから文字列受け取りとかになって結局必要にはなりますが(´@ω@｀)

　何を書けばいいんだろう(´@ω@｀)
node.jsとnpmを簡単バージョン管理(メモ）


タスクランナー系の導入でnode.jsやnpmをインストールすることが多いですが、
それに伴い、
``node.jsをアップデートしたらgulpが動かなくなった！``
なんてことがあることもあります。

そんな時にnvmを使えば、node.jsのバージョン切り替えを簡単にできます。


# Linux / nvm

公式Github: [https://github.com/creationix/nvm](https://github.com/creationix/nvm)
## インストール
```
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

## 利用できるバージョンリスト
```
$ nvm ls-remote
```

## バージョンを指定してインストール
```
$ nvm install 4.2.4
```

## 現在のバージョン
```
$ nvm run node --version
```

## インストールしたnodeのバージョン
```
$ nvm ls
         v5.7.0
->       v6.5.0
default -> 5.7.0 (-> v5.7.0)
node -> stable (-> v6.5.0) (default)
stable -> 6.5 (-> v6.5.0) (default)
iojs -> N/A (default)
lts/* -> lts/argon (-> N/A)
lts/argon -> v4.5.0 (-> N/A)
```

## バージョンの切り替え(npmも切り替わる)
```
$ nvm use 5.7.0
Now using node v5.7.0 (npm v3.6.0)
```

## デフォルトバージョンを設定
```
$ nvm alias default 5.3.0
```


## タブで補完

``.bashrc`` or ``.bash_profile``に以下を追記

```
[[ -r $NVM_DIR/bash_completion ]] && . $NVM_DIR/bash_completion
```

### 使い方
```
$ nvm [tab][tab]
alias               current             exec                install             list-remote         ls-remote           run                 uninstall           use                 which
clear-cache         deactivate          help                list                ls                  reinstall-packages  unalias             unload              version
```
多段SSHしたときの経路をプロンプトに出してみる

# 概要
踏み台をつかってSSHしてるときに，どこ経由できてたんだっけ?というのを確認したいときがあったので，プロンプトに出すようにしてみた．

追記：ProxyCommandかいて一気に接続できるようにしてたら何の意味もない．．．つらい

# 環境
```shell-session
uraura@rosemary$ uname -a
Linux ip-10-7-76-44 4.1.17-22.30.amzn1.x86_64 #1 SMP Fri Feb 5 23:44:22 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
```

# サーバ側
環境変数を追加

```ini:/etc/ssh/sshd_config
AcceptEnv SOURCE_SSH_CONNECTION
```

# クライアント側
環境変数を設定．
`SSH_CONNECTION`はSSH接続されたときに設定されるので，そいつを`SOURCE_SSH_CONNECTION`に連結させていく．

```bash:~/.bash_profile
SOURCE_SSH_CONNECTION="$SOURCE_SSH_CONNECTION $SSH_CONNECTION"

export SOURCE_SSH_CONNECTION
```

目当てのサーバへたどりついたときの`SOURCE_SSH_CONNECTION`はこんなかんじ．

```
SOURCE_SSH_CONNECTION= xxx.xxx.xxx.xxx 63011 10.1.68.129 10022 10.1.68.129 51440 10.7.76.44 22
```

自分のグローバルIPからはじまって，目的のサーバのIPまでならぶ．ポート番号はいらないので破棄，重複したIPも破棄してプロンプトをがんばって設定

```bash:~/.bashrc
right_prompt() {
  declare -a ips
  adj=0 # 色を付けるためのエスケープシーケンスをつかうとカラムがズレるので調整用
  set -- $SOURCE_SSH_CONNECTION
  while [ $# -gt 0 ]; do
    ip=$1
    case "$ip" in
      10.1.*) ip="ESC[0;34m${ip}ESC[0m"; adj=$((adj+11));; # 10.1.x.xが踏み台
      10.*)   ip="ESC[0;32m${ip}ESC[0m"; adj=$((adj+11));; # 10.n.x.x(n!=1)が目当てのサーバ
      *)      ip="ESC[0;33m${ip}ESC[0m"; adj=$((adj+11));;
    esac
    [[ $ip = ${ips[0]} ]] && adj=$((adj-11)) || ips=($ip "${ips[@]}")
    shift
    shift
  done

  printf "%*s" $((COLUMNS+adj)) $(IFS='<'; echo "${ips[*]}")
}

export PS1="\[\$(tput sc; right_prompt; tput rc)\]$PS1"
```

# 接続
```shell-session
uraura@rosemary$ ssh -o SendEnv=SOURCE_SSH_CONNECTION ec2-user@foo
```
![image](https://qiita-image-store.s3.amazonaws.com/0/18974/5e02f4eb-c7e0-6fb3-b387-01474c853e7c.png)


以上で自分のグローバルIPから目当てのサーバまでの経路がプロンプトの右側に表示される．

# 参考
https://wiki.voidlinux.eu/Bash/Prompt_customization
https://wiki.archlinuxjp.org/index.php/Bash_%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88
JetBrains Riderから[⌘+p]でUnityをRunする(Macのみ)



## JetBrainsのC#用IDE Rider

RiderはJetBrains製のC#IDEです。いまならEAP版が出ていて無料で使えます。
https://www.jetbrains.com/rider/

JetBrainsの使いやすさそのままで使えて、たいへん健康的にコーディングができる上物でございます。

## 前準備

* Rider EAPに登録して落としてくる
	* ここから登録
	* https://www.jetbrains.com/rider/
* RiderでもUnityが使えるようにする
	* ↓これを`Assets/Plugins/Editor`に入れる
	* https://github.com/JetBrains/Unity3dRider



## 設定方法: RiderのExternal Toolsに Unityを起動してRunするスクリプトを埋める

* Githubからunityを叩き起こす用のスクリプトをcloneしてどこかに置いておきます
	* https://github.com/katapad/unity-runner
* External Toolsの+ボタンを押して新しいのを作ります。
![Kobito.jNGs4Q.png](https://qiita-image-store.s3.amazonaws.com/0/2631/4141c829-a017-e4c7-87ac-6a872bbc0bd9.png "Kobito.jNGs4Q.png")
* 詳細を記述します
![Kobito.eprdzk.png](https://qiita-image-store.s3.amazonaws.com/0/2631/241590ec-a4e8-e930-3f77-34f5d1d6b3a7.png "Kobito.eprdzk.png")
	* ↑ Tool Settingsの[Program]のところに、さっきGithubから落としてきた「unity-runner/run.sh」を指定します


これでファイルメニューから[Tools]-[External Tools]-[run unity]で、Unityのwindowにフォーカスがあたり、cmd + pされます！ヤッター！


### Rider側にショートカットをつける

Keymapで[cmd + p]に設定すると気持ちよいでしょう！

![Kobito.W4wIvX.png](https://qiita-image-store.s3.amazonaws.com/0/2631/4ba99055-fa23-7600-2e28-1d7c529eb733.png "Kobito.W4wIvX.png")
CakePHP3 で BootstrapUIを導入する場合にControllerで指定する方法

BootstrapUIの導入はここを参照
http://qiita.com/milano/items/f244f9ac5514f0e6b213

AppView.phpで指定すると全体に適用されるので、ControllerのActionごとで指定する場合、以下を書く

```
$this->viewBuilder()->layout('BootstrapUI.default');
$this->viewBuilder()->helpers(['BootstrapUI.Html', 'BootstrapUI.Form', 'BootstrapUI.Flash', 'BootstrapUI.Paginator']);
```

例）

```
class SamplesController extends AppController
{
    public function bootstarp(){

        $this->viewBuilder()->layout('BootstrapUI.default');
        $this->viewBuilder()->helpers(['BootstrapUI.Html', 'BootstrapUI.Form', 'BootstrapUI.Flash', 'BootstrapUI.Paginator']);

    }
}
```
Xamarin FormsのWebViewの中からJavaScriptのGeoLocation APIを使うことが出来ない（Android）

[2016-11-19 カスタムレンダラーで解決できたので解決法を追記]

## やりたいこと

`Xamarin.Forms.WebView`にページを表示して、そのページ内のJSでGeoLocation APIを使いたい：

```html
<script>
    navigator.geolocation.getCurrentPosition(function(position) {
        alert("OK");
        console.log(position);
    });
</script>
```

## 問題

iOSでは特に何もしなくても問題なくできたのですが、Androidではこれができない。
`ACCESS_COARSE_LOCATION`, `ACCESS_FINE_LOCATION`の許可をつけてもダメ。
実行時にユーザーに許可を求めるポップアップが出てこない。


## 解決法

カスタムレンダラーを作って位置情報取得を許可する。
具体的には下記のファイルを`.Droid`のプロジェクトに追加するだけでOK。

```CustomWebViewRenderer_Droid.cs
using System;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebView.Droid.CustomWebViewRenderer))]

namespace CustomWebView.Droid
{
	public class CustomWebViewRenderer : Xamarin.Forms.Platform.Android.WebViewRenderer
	{
		protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
		{
			base.OnElementChanged(e);
			// WebViewClientまで上書きしてしまうとNavigatedやNavigatingイベントが発生しなくなってしまう
			// WebChromeClientを上書きするだけでGeoLocation APIは使えるようになる
			//Control.SetWebViewClient(new CustomWebViewClient());
			Control.SetWebChromeClient(new CustomWebChromeClient());
		}
	}

	//class CustomWebViewClient : Android.Webkit.WebViewClient
	//{
	//	public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, string url)
	//	{
	//		return false;
	//	}
	//}


	// Xamarin FormsのデフォルトのWebChromeClientを継承する
	// https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/Renderers/WebViewRenderer.cs
	class CustomWebChromeClient : Xamarin.Forms.Platform.Android.FormsWebChromeClient
	{
		public override void OnGeolocationPermissionsShowPrompt(string origin, Android.Webkit.GeolocationPermissions.ICallback callback)
		{
			callback.Invoke(origin, true, false);
		}
	}
}
```


## 参考
http://android.keicode.com/basics/webview-html5-geolocation.php
この解決法のサンプルプロジェクト：https://github.com/aoyama-val/WebViewTest3
placeholderとautofocusの併用時はIEに注意する

# まとめ

* IE11ではfocus時に未入力でもplaceholderが消えてしまう
* よってplaceholderとautofocusが同時に付いている場合、IEユーザーには一度もplaceholderが目につかない可能性がある。

placeholderには重要なメッセージを書かないことが前提だが、デザインや利便性、保守を考え、placeholderを

* 消えてほしくないのでautofocusしない
* 消えてもいいのでautofocusする
* JSでIEでもfocusかつ未入力時に表示する

を使い分ける必要があることを覚えておく。
Edgeでは他のブラウザ同様、focusでも未入力ならplaceholderが表示された。

# <i class="fa fa-file-text-o"></i> 参考

* [placeholder のブラウザごとの違い＆その対処法など - Qiita]

[placeholder のブラウザごとの違い＆その対処法など - Qiita]:http://qiita.com/38kun/items/54c19077f95f0fc1a19a
coTurnでEC2上にTURNサーバを作ってみた

# 1 概要
サーバ & AWS 初めましてな初心者がAWS上にSTUN/TURNサーバを構築することになりました。
ここでは、coTurnによるTURNサーバ構築をわかりやすい言葉で紹介します。

# 2 前提
## 2.1 TURNサーバって？
TURNサーバ周辺の簡単な説明は[【初心者向け】STUN/TURNサーバをざっくり解説してみた](http://qiita.com/okyk/items/a405f827e23cb9ef3bde)をお読みください。

## 2.2 coTurnって何者？
coTurn：　https://github.com/coturn/coturn
簡単にSTUN兼TURNサーバが構築できるOSS。

# 3 本題
coTurnを使ったTURNサーバ構築方法です。
TURNサーバにフォーカスして記述しますが、同時にSTUNサーバも構築されます。

## 3.1 EC2インスタンスの作成~設定
* Amazon EC2 でubuntuのインスタンスを作成します。　
   * (ubuntuだとcoTurnのインストールが簡単です。)
* 作成したインスタンスにssh接続します。
* sudoコマンドを使えるようにします。

```sh:sh
sudo vi /etc/hosts
# 「127.0.1.1 ip-10-0-0-76」を追加します。（後半はインスタンスのプライベートIPアドレス）
```

## 3.2 coTurnのインストール
```sh:sh
# 依存ライブラリをインストール
sudo apt-get update && sudo apt-get install libssl-dev libevent-dev sqlite3 make -y
 
# coTurnのソースをダウンロード
wget -O turn.tar.gz http://turnserver.open-sys.org/downloads/v4.5.0.3/turnserver-4.5.0.3.tar.gz
 
# 解凍
tar -zxvf turn.tar.gz
 
# ビルド
cd turnserver-4.5.0.3
./configure
make && sudo make install
```
## 3.3 coTurn設定ファイルの編集
```sh:sh
# デフォルトのconfigファイルをコピー
sudo cp /usr/local/etc/turnserver.conf.default /usr/local/etc/turnserver.conf
 
# configファイルの編集
sudo vi /usr/local/etc/turnserver.conf
```
編集内容
（あくまで例です。詳しい説明は[こちら](https://github.com/coturn/coturn/blob/master/examples/etc/turnserver.conf)を参考下さい。）

* コメントアウトを外すもの
   * verbose
   * lt-cred-mech
   * no-tls
   * no-dtls
* コメントアウトを外し、かつ内容も適宜変更するもの
   * userdb=/var/db/turndb
   * user=user1:pass1
   * realm=mycompany.org

## 3.4 coTurnを起動
```sh:sh
# configファイルを読み込んで起動する
sudo turnserver -o -c /usr/local/etc/turnserver.conf -u user1:pass1 -p 3478 -L 10.0.0.76 -X 0.0.0.0/10.0.0.76
```
オプション (詳しい説明は[こちら](https://github.com/coturn/coturn/wiki/turnserver))

* -o: デーモン起動ON
* -c: configファイルの指定
* -u: Long-term credentials user account (configファイルに指定したものと同じ組み合わせを指定する)
* -p: UDPとTCPのリスナーポート
* -L: relayサーバのリスナーIPアドレス。今回はEC2のprivateIPを指定する。
* -X: TURNサーバとprivate, publicのIPアドレスマッピング。サーバがNAT内であれば指定が必要。今回はEC2の<publicIP>/<privateIP>を指定する。

（補足）起動時オプションの多くはconfigファイル内でも指定ができる

# 4 coTurnの動作確認(おまけ)
## 4.1 インスタンスの外から動作確認する時の注意
* セキュリティグループのインバウンドの設定を、動作確認の接続元のIPアドレスをTCP（もしくはUDP）で許可するように変更してください。

## 4.2 coTurnが提供するテストコマンド
同じインスタンス上で以下のテストコマンドを実行。
coTurnをインストールした他の環境からでも、テストコマンドで動作確認が取れるはず。

```sh:sh
turnutils_uclient -t -p 3478 -u 'user1' -w 'pass1' 10.0.0.76
``` 
オプション(詳しい説明は[こちら](https://github.com/coturn/coturn/wiki/turnutils_uclient)）
-t: TURNサーバへの通信にTCPを指定する（デフォルトはUDP）
-p: TURNサーバのポート番号
-u: STUN/TURNのユーザ名
-w: STUN/TURNのパスワード

## 4.3 [Trickle ICE](https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/)
ブラウザ上でSTUN, TURNが最低限の動作(接続ルートの候補としてIPアドレスが検出される)をしているか見ることができる

* 使い方
   * 以下を入力
      * STUN or TURN URI: <インスタンスのグローバルIPアドレス>:3478?transport=tcp
      * TURN username: 設定したSTUN/TURNのユーザ名
      * TURN password: 設定したSTUN/TURNのパスワード
   * Add Serverボタンを押す(ついでにデフォルトのGoogleサーバを消してもOK)
   * Gather Candidatesボタンを押す
   * 指定したIPアドレスでtypeがrelay(TURNサーバ)、server reflexive(STUNサーバ)などが現れればOK

## 5. 参考文献

* coTurnのREADME, Wikiいろいろ
* [壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう](https://html5experts.jp/mganeko/5554/)
* [WebRTC関連の記事等へのリンクまとめ](http://qiita.com/hiroyuki_hon/items/cd433ceae471f41dda62)
【初心者向け】STUN/TURNサーバをざっくり解説してみた

# 1 概要
サーバ & AWS 初めましてな初心者がAWS上にTURNサーバを構築することになりました。
ここでは、一から学んだSTUN/TURNサーバ周りの知識をわかりやすい言葉で解説します。
（ちなみにQiita記事作成も初めてです。それも含めて間違いなど見つけたらご指摘いただけると嬉しいです。）

# 2 STUNサーバ・TURNサーバはなぜ必要なのか？
STUNサーバとTURNサーバはどちらも「NAT越え」を可能にするために必要です。
「NAT越え」はP2PしたいPCが異なるネットワークにある場合に必要になります。
いろんな言葉が出たので、順番に整理します。

## 2.1 NATとは？

NATは対応するプライベートIPアドレスとグローバルIPアドレスを双方向に変換するもの。

![qiita_nat.png](https://qiita-image-store.s3.amazonaws.com/0/140270/29809735-2221-539a-d09e-f3ec46d87ffb.png)

この図だと、NATでは以下のような変換が行われる。
PC1のグローバルIPアドレス(111.111.111.111)　→ プライベートIPアドレス(222.222.222.222)


【プライベートIPアドレスとグローバルIPアドレスの違い】
プライベートIPアドレスはそのネットワーク内のみで使われるIPアドレスで、
グローバルIPアドレスはそのネットワークの外（インターネット）で使われる。

## 2.2 P2Pとは？
PC同士が直接通信すること。または、クライアントがサーバに問い合わせる「クライアント-サーバ方式」ではないもの。
P2Pでは相手のIPアドレスによって相手を特定し接続を確立します。
![qiita_p2p_success.png](https://qiita-image-store.s3.amazonaws.com/0/140270/da4daeaf-ba7a-48b3-d189-e91249b1f7f4.png)


### 2.2.1 体感するのが１番
   * [AppRTC](https://apprtc.appspot.com/)にアクセスしてJOINボタンを押す
   * 画面下のほうに現れる https://apprtc.appspot.com/r/XXXXXXXX のようなリンクを他のタブで開く
   * チャット開始

### 2.2.2 P2Pの課題
①P2P通信には接続相手のIPアドレスが必要なこと
②異なるNAT内のPCがお互いのプライベートIPアドレスを知る術はないこと
①と②を合わせると、NAT内PC同士でP2P通信を行うことは不可能です。
![qiita_p2p_fail.png](https://qiita-image-store.s3.amazonaws.com/0/140270/433f16fa-a6e2-f1c1-0e58-b58e89a7a187.png)


この図ではPC1とPC4は異なるネットワークに属しているため、お互いのIPアドレスがわからず、P2Pできません。

が、「NAT越え」をするとP2Pっぽいものは可能です。
「NAT越え」をすべきかどうかはSTUNサーバを使って判定し、
実際の「NAT越え」作業はTURNサーバで実現します。

# 3 STUNサーバ・TURNサーバは何をするのか？
## 3.1 STUNサーバは何をするのか？

STUNサーバは外部から見た自PCのIPアドレスを返してくれるもの。

NAT付ネットワーク外にいる場合：　自PCの知っているIPアドレス = STUNの返すIPアドレス
NAT付ネットワーク内にいる場合：　自PCの知っているIPアドレス ≠ STUNの返すIPアドレス
になるはずなので、比較によって自PCがNAT付ネットワーク内かどうか判定できます。
自PCがNAT内の場合、「NAT越え」が必要だということがわかります。

![qiita_stun.png](https://qiita-image-store.s3.amazonaws.com/0/140270/4f8a6c46-72ec-e94d-5b75-4dacefe66cab.png)


## 3.2 TURNサーバは何をするのか？
TURNサーバは、P2P通信したいPCの間に立ってデータをリレーするもの。

![qiita_turn.png](https://qiita-image-store.s3.amazonaws.com/0/140270/398671f4-9d88-2caf-d600-72d690981f39.png)

TURNサーバにそれぞれ代理人(PC1', PC4')を立てて、代理人同士がデータのやり取りを行うことで、PC1-PC4間の擬似的な直接通信を行います。

# 4 実際にTURNサーバを構築してみよう
[coTurnでEC2上にTURNサーバを作ってみた](http://qiita.com/okyk/items/2d7db6b148a43bc3b405)をご覧ください。

# 5 参考文献

* [壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう](https://html5experts.jp/mganeko/5554/)
* [WebRTCの裏側](https://gist.github.com/voluntas/975bfa230e513d146965)
gulp-sassでエラーが出て動かない原因 node_modules/gulp-sass/index.js:38


# ※ gulp-sassのv2 以降から errLogToConsole オプションが使えなくなりました。


# :no_entry_sign: gulp-sassで下記のようなエラーが出る場合
```js

node_modules/gulp-sass/index.js:38
    opts.data = file.contents.toString();
              ^

TypeError: Cannot assign to read only property 'data' of /Users/YourName/public/assets/sass/app/app.sass
    at DestroyableTransform._transform (/Users/YourName/node_modules/gulp-sass/index.js:38:15)
    at DestroyableTransform.Transform._read (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
    at writeOrBuffer (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
    at DestroyableTransform.ondata (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
    at emitOne (events.js:90:13)
    at DestroyableTransform.emit (events.js:182:7)
    at readableAddChunk (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:198:18)
```

# :star: 対策

# gulpfile.jsのsassコンパイルタスクを見直す

## gulp-sass v1
```gulpfile.js

var gulp              = require('gulp');
var sass              = require('gulp-sass');
var assets            = __dirname + '/public/assets/';

gulp.task('sass', function() {
  gulp.src(assets + 'sass/**/**.sass')
    .pipe(sass({errLogToConsole: true}))
    .pipe(gulp.dest(assets + 'css/'))
});
```

## gulp-sass v2 以降

gulp-sassではnode-sassを利用で、エラーがコールバックがされるようになりました。

```gulpfile.js

var gulp              = require('gulp');
var sass              = require('gulp-sass');
var assets            = __dirname + '/public/assets/';

gulp.task('sass', function() {
  gulp.src(assets + 'sass/**/**.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(assets + 'css/'))
});
```

この部分を

```gulpfile.js
.pipe(sass({errLogToConsole: true}))
```

以下の記述に変更する

```gulpfile.js
.pipe(sass().on('error', sass.logError))
```
说说 Javascript 里的module 以及 import 和 export 声明



http://www.2ality.com/2014/09/es6-modules-final.html


# 现状
现行的大部分 javascript 版本以及浏览器对于他们来说, 他们有可能不支持这个`module`, 通常当遇到 import 或者 export 就会报语法错误. 当然为了能够解决 js 代码里的各种冲突, 大家也是想出来其他的替代方法实现了` module` 的功能. 现有的比较常见的就有

- CommonJS 典型的实现就是在 nodejs 里具体有下面的一些特征
	- 语法简洁
	- 同步加载
	- 主要用在服务器端
- AMD 也就是异步加载模块, 典型的实现就是 **RequireJS** ,有下面一些特点:
	- 语法相对复杂些,能够避免使用` eval()`
	- 异步加载
	- 浏览器端使用

上面就是大概介绍,有兴趣可以[看这里](http://addyosmani.com/writing-modular-js/)

下面来说说从 es6开始对于 module 的支持以及实现

# ES6模块

ES6试图设计一种模块的格式,它能够同时满足对于 CommonJS 和 AMD 模块的使用习惯:

- 类似 CommonJS 它的语法简洁,单独的 exports就好, 支持循环依赖
- 类似 AMD 的异步加载,模块可配置.

同时还有他们2个没有的一些特性:

- 语法要比 CommonJS 还简洁
- 结构是可以静态分析的(满足静态验证,优化等)
- 比 CommonJS 的循环依赖还要赞.

ES6的模块设计分为大概2部分:

- 声明式语法(通过 import 和 export)
- 可编程加载的 API: 能够配置怎么加载模块还有条件加载)

## ES6模块语法

有2种模块的声明方式:命名声明(多个模块)和默认声明(单个模块)

### 命名式声明

一个模块(An ES6 module is a file containing JS code. There’s no special module keyword;  也就是说,所谓的 es6模块就是一个含有 js 代码的 **文件**, 并没声明特殊的 module字眼) 它能够通过关键字` export` 来定义多个内容.这些定义的模块名就是通过不同的前缀来区别. 这个我们就称之为 **命名式的模块定义.**

看上去就是这样子:

```lib.js
 //------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}
```

```main.js
//------ main.js ------
// 所有的变量名,函数名都是在模块中定义的
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
```

当然定义的它的方法有很多,但是我感觉这个就是最好的方式, 定义一切你不想暴露在外面世界的内容,然后给他一个前缀关键字` export`,就这样它就是一个模块了.

怎么用呢,这样子的:

``` main.js
//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
```

而如果换做CommonJS 来写,其实下面的代码我想了很多方法让它看上去更加简洁一些去掉重复的部分.


```lib.js 


    var sqrt = Math.sqrt;
    function square(x) {
        return x * x;
    }
    function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    // 区别就是这里
    module.exports = {
        sqrt: sqrt,
        square: square,
        diag: diag,
    };
```
   

```main.js

    var square = require('lib').square;
    var diag = require('lib').diag;
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5
```

### 默认声明(每一个模块只有一个)

在 Node 的圈子里通常喜欢一个模块只定义导出一个单个值, 其实通常前端他们也喜欢这样做的.如果在处理对象 model 的时候类和构造函数的时候. 一个对象一个模块. 一个 ES6的模块能够选择一个`默认导出` 最重要的要导出的值.默认导出的值是最容易导入使用的.

下面的例子, 定义了一个单个的函数:


```myFunc.js
    export default function () { ... };
```

        
    
```main1.js
    import myFunc from 'myFunc';
    myFunc();
```

而如果它表示的值是一个类的时候:



```MyClass.js
export default class { ... };

import MyClass from 'MyClass';
let inst = new MyClass();
```

**注意** 默认导出的声明是一个表达式, 它通常没有名字代替的是它通过模块名字来区别.
指定された日付の月曜日から次の月曜日までの日付を返す

```php:getThisWeek.php
	public function getThisWeek($day = null) {

		$day = !empty($day) ? strtotime($day) : strtotime(date('Y-m-d'));
		$monday = strtotime('this monday', $day);
		if ($day == $monday) {
			$from = date('Y-m-d', $monday);
			$to   = date('Y-m-d', strtotime('next monday', $monday));	
		} else {
			$from = date('Y-m-d', strtotime('last monday', $monday));
			$to   = date('Y-m-d', $monday);	
		}
		return array('from'=>$form, 'to'=>$to);
	}
```
html5資格試験に役立つまとめ 2 <html5で変更・廃止された要素>

[前回](http://qiita.com/aikumi/items/6098b7396a44abbd9dcd)に引き続き、html5プロフェッショナル認定資格Level.1で勉強した内容をまとめたいと思います。
前回の追加された要素、今回の変更・廃止された要素、は頻繁に出題される部分で、
覚えておくだけで得点につながるので受験される人は覚えておいた方がいいと思います！

# 変更された要素(1)

## hr要素

* 以前
    * 横けい線を表示させるための要素

* html5
    * コンテンツの内容的に「段落レベルで主題が変わるところ(区切り・変わり目)」を示す

## small要素
* 以前
    * テキストを小さなフォントで表示
* html5
    * 一般に小さな文字で示される付帯情報　（注釈のような付随的情報）。copyrightや帰属、免責事項、警告

## strong要素
* 以前
    * em要素よりも強い強調
* html5
    * 「重要性」「重大性」「緊急性」、テキストの中で重要な部分

## b要素
* 以前
    * 太字(bold)で表示させる要素
* html5
    * 目立たせた方がいいと思われる部分、注目させたい部分
    * 例：製品名、キーワード、リード分

## i要素
* 以前
    * テキストをイタリックで表示
* html5　
    * 学名、専門用語、言語が異なっている部分、普通のテキストとは違う性質の部分

## s要素
* 以前
    * 取り消し線
* html5　
    * すでに正しい情報ではない部分、関係ない情報となってしまった部分

## u要素
* 以前
    * テキストに下線をひいた状態で表示
* html5　
    * 耳で聞いてもわからないが、表示上は明確に示される、テキスト以外で注釈的な表現をする範囲、スペルミスなど

※ del要素 → 同じ取り消し線。文書から削除した部分につかう

# 変更された要素(2)
## 基本構造
* html要素
    * 以前
        * version属性 でキャッシュマニフェストのアドレス指定
    * html5
        * manifest属性 でキャッシュマニフェストのアドレス指定

# 廃止された要素

## 廃止された要素 (よく出るやつ)
* 表示方法を指定するための要素(font, center, basefont, strike, tt)
* 表示方法を指定するための要素(big)
    * 上記のsmallと比較して出てくることが多い！
* acronym(略語のうち頭字後であることを示す)
    * abbr要素と一本化した
* applet
    * ページ内にjavaアプレットを組み込む
* isindex
    * inputをつかうことになった
* アクセシビリティ及びユーザビリティを損なうもの(frameset, frame, noframes)

## 廃止された属性
* alignやbgcolorといった表示指定の属性は基本的にすべて廃止
* 一部を除いてname属性は廃止、idを使うようになった
ninja コマンドなどのビルド完了時に"ベル"を鳴らすなど任意の通知を受けとるらいふはっく

# 仕込み

.zshrc や .bashrc などに以下のように仕込みを入れる（例は `ninja` に仕込み）:

```
function ninja()
{
  env ninja $@
  R=$?
  echo -e '\a'
  return R
}
```

これで `ninja hoge` などすると結果の成否によらず"ベル"が鳴り、ビルド処理が終わった通知を簡単に受けられます。

# 解説

- シェルに関数 ninja を定義するとパスのコマンドよりも優先される
- `ninja $@` はシェル関数に渡されたコマンドライン引数をそのまま `ninja` に渡している
- `ninja` だけシェル関数内に書いたら再帰するので `env ninja` している
    - `env` の代わりに `/usr/bin/ninja` などしてもよい
- `R=@?` で直前のコマンドの実行結果を変数 `R` として保存しておく
- `echo -e '\a'` で "ベル" が鳴る（端末エミュレーターが対応していれば）
    - もちろん `ogg123 notify.ogg&` でも `aplay notify.wav&` でも構わない、対応できるなら
- `return R` で本来の `ninja` の結果を関数の結果として返す
    - これをやらないと `echo -e '\a'` や `ogg123 notify.ogg&` の成否が直前のコマンドの結果として返る事になり、`ninja hoge && bin/hoge` などが狂う事になる

# だそく

- 各種 linux 環境のほか、 msys2 + mingw-w64 の mintty でもこの方法で"ベル"を鳴らせる
- ビルド開始から結果がでるまで時間が数十秒以上かかるプロジェクトを扱う場合におすすめのらいふはっく
    - もっと長くかかるプロジェクトの場合は"ベル"よりもある程度の長さの音楽やメール送信を噛ませてスマフォのバイブレーターで受けるとか応用するといいと思います
半角のスペースを区切り文字としてファイル内の単語数を数える

テキストファイルの単語数を数えたいことがあると思います。
linuxコマンドでは`wc -w`で単語数を数えることができますが、このコマンドは
区切り文字に半角スペースだけでなく全角のスペースなども含まれてしまっています。
次の例では、区切り文字は半角と全角のスペースの両方が使われています。

```bash
$ echo "今日　は　いい 天気 です　。" | wc -w 
6
```

目的によってはこれでいいケースももちろんあると思うのですが、
半角のスペースのみを区切り文字としてファイル内の単語数を数えたい場合があるかもしれません。
私が調べた限りではwcでは区切り文字を指定することはできませんので、`awk`を使うといいでしょう。

```bash
$ echo "今日　は　いい 天気 です　。" | awk -F ' ' '{sum+=NF} END {print sum}'
3
```

この例では単語数の合計を保持する変数`sum`に対して各行のフィールド数`NF`を足しています。
`-F`でフィールドの区切り文字を設定しています。
ちなみに`-F`を省略することもでき、その場合はデフォルトの区切り文字が適用されます。
デフォルトの区切り文字は、半角スペース、タブ、改行文字から成る長さが1以上の文字列です。
ただし、文頭及び文末の区切り文字列は無視されます。
リダイレクト設定

# apacheサーバでのリダイレクト設定

### `.htaccess`について

- 301でリダイレクトするとブラウザでキャッシュされる→302ならキャッシュされないので、デバッグ時は302で良いかも
    - そもそもモバイルリダイレクト向けには302を推奨している
- RewriteCondは直後のRewriteRuleに対してのみ有効
- RewriteCondは否定条件も書ける

```
RewriteCond %{REQUEST_URI} !(^/notredirect/$)
```

- RewriteCondは複数書ける

```
RewriteCond 条件１
RewriteCond 条件２
RewriteCond 条件３
RewriteRule ^(.*)$ /redirect/$1 [R=302,L]  条件１、２、３にマッチしたものがリダイレクト対象になる

RewriteCond 条件4
RewriteRule ^(.*)$ /redirect2/$1 [R=302,L]  条件4にマッチしたものがリダイレクト対象になる
```

- 404の書き方 ErrorDocument 404 /
- オプション
    - R:リダイレクト httpステータスを指定できる`R=301`とか
    - L:以降のRuleを参照しない
        - ただし`.htaccess` では無効になる
    - OR: OR条件
        - デフォルトはAND条件になるのでANDにしたい場合は何もなしでよい。
- 下位ディレクトリに.htaccessがあった場合、そちらの設定が優先される。
    - 差分ではなく、全体の設定ごと優先される

- クエリパラメーターで判定したい
    - `{QUERY_STRING}` つかう
Railsのwith_options

`with_options`という便利メソッドの存在を知る。

Object.with_options`を使うとオプションパラメタをまとめる事ができます。

例えばこういうのを、

```rb
class Account < ActiveRecord::Base
  has_many :customers, dependent: :destroy
  has_many :products,  dependent: :destroy
  has_many :invoices,  dependent: :destroy
  has_many :expenses,  dependent: :destroy
end
```

こう書けます。

```rb
class Account < ActiveRecord::Base
  with_options dependent: :destroy do |assoc|
    assoc.has_many :customers
    assoc.has_many :products
    assoc.has_many :invoices
    assoc.has_many :expenses
  end
end
```

`with_options`の引数に渡した`Hash`のオプションの値がブロック内に適用されます。上の例では`hash_many`の`dependent`オプションを共通化しましたが、他のパターンでも適用できます。例えば、モデルの例では他にも`validates`メソッドのオプションを共通化など使えます。

動作としては、`with_options`に引数として与えた`Hash`を、ブロック内の各メソッドの引数のオプションHashにdeepマージする挙動なのでモデル以外でも使えます。

定義は`activesupport/lib/active_support/core_ext/object/with_options.rb`にある。

ただハマりポイントもあり

* deepマージする挙動なので、`with_options`とブロック内メソッドで同じkeyでオプションを定義すると片方が適用されない
* Rails 4.1 以前ではレシーバオブジェクト経由で本来のメソッドを呼ぶことが必須
  * Rails 4.1では`with_options`からブロックへ渡されるレシーバオブジェクト(上の例の`assoc`)経由で本来のメソッドを呼ぶ必要あり(上の例の`assoc.has_many`。レシーバ省略してメソッドを呼ぶと効かない。
  * Rails 4.2 からはレシーバ省略可能


実際、Rails HEADのドキュメントにはレシーバ無しで呼べると書かれててて、4.1でそう書いたら動かなくてハマりました。


## 参考文献

* [with_optionsを使う際の注意点](http://paranishian.hateblo.jp/entry/2016/03/17/154214)
* 4.1から4.2で変わったレシーバ不要の件
  * [PR](https://github.com/rails/rails/pull/16339)
  * [Ruby on Rails 4.2 Release Notes](http://guides.rubyonrails.org/4_2_release_notes.html#notable-changes)
503 Service UnavailableからのvCenter Inventory Service データベースのリセットによる復旧

計画停電でvCenterを強制Power offせざるを得ず、起動後にvCenterにつながらない状態に...

```
503 Service Unavailable (Failed to connect to endpoint: [N7Vmacore4Http20NamedPipeServiceSpecE:0x7fc6705a4620] _serverNamespace = / _isRedirect = false _pipeName =/var/run/vmware/vpxd-webserver-pipe)
```

ここの手順で再起動を試みるも失敗、
> vCenter Server Appliance サービスの停止、起動または再起動方法 (2092905) | VMware KB
https://kb.vmware.com/selfservice/microsites/search.do?cmd=displayKC&docType=kc&externalId=2092905&sliceId=1&docTypeID=DT_KB_1_1&dialogID=229074054&stateId=0%200%20229076004

どうやら、vCenter Server Appliance 6.0 Inventory Service データベースのリセットが必要そう。

> Inventory Service fails to start in vCenter Server 6.x (2119422) | VMware KB
https://kb.vmware.com/selfservice/search.do?cmd=displayKC&docType=kc&docTypeID=DT_KB_1_1&externalId=2119422


ダウンロードしたスクリプトを実行した。

```
vcsa-01:~ # chmod 700 invreset_kb2119422.sh
vcsa-01:~ # ./invreset_kb2119422.sh
**********************************************************
Copyright 2016 VMware, Inc.  All rights reserved
**********************************************************?

###
# Resetting Inventory Service Database
##

lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk
x      ??                                                                     x
x     ?  ?     You should only ever use this if you cannot use:               x
x    ?    ?    http://kb.vmware.com/kb/2113435                                x
x   ?      ?   Always take a snapshot before running this script!             x
x  ?        ?  You will lose Storage Profiles if you execute this script!     x
x ? WARNING! ?                                                                x
x qqqqqqqqqqqq                                                                x
mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj
Are you sure you want to continue ? (y/N) y
--snip--
vmware-vpxd: Starting vpxd by administrative request.
success
vmware-vpxd: Waiting for vpxd to start listening for requests on 8089
Waiting for vpxd to initialize: .....................................
Broadcast message from root (Tue Sep 13 00:54:01 2016):

The system is going DOWN for reboot in 5 minutes!
.failed
failed
vmware-vpxd: vpxd failed to initialize in time.
vpxd is already starting up. Aborting the request.
FORCEFULLY ABORTING! vCenter Server Service failed to start. Check /var/log/vmwre/vpxd/vpxd.log
vcsa-01:~ #
```

再起動後は正常に接続できました。
Xcode7 で iOS10 の実機デバッグをする



iOS10 の正式リリースを前にリリース済アプリの動作確認をしている方も多いと思います。
そこで「iOS10の時だけUIが崩れる」「けどSwift2.3, Swift3対応はまだ終わってない」みたいな状況でとりあえず対処する方法を見つけたのでメモ。

## 必要なもの

- Xcode7
- Xcode8
- iOS10 をインストールした実機

## 手順

1. Xcode8 に入っている iOS10 のDiskImage(10.0 (14A345)) を Xcode7 にコピーする
	- DiskImage はXcodeの中の→の場所にあります：/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport
2. Xcode7 を起動、iOS10 の実機をつないでデバッグ

これでiOS9 のデバイス等と同様にXcode7でiOS10のデバイス上でデバッグすることができました。

その場しのぎの方法だと思いますが急ぎの方は試してみるといいかもしれません。

## 2017/09/25 追記
Xcode8 で iOS11 の実機デバッグも同じやり方でできました。

必要な方はそれぞれ、
Xcode7 -> Xcode8
Xcode8 -> Xcode9
iOS10 -> iOS11
で読み替えて試して見てください。
Rubyのブロックやメソッドの引数の数

[Proc#arity](http://docs.ruby-lang.org/ja/latest/method/Proc/i/arity.html)を使うとブロックに渡される引数の数を調べれる。

```rb
def test(&block)
  if block.arity.zero?
    puts 'no arguments'
  else
    puts "#{block.arity} argument(s) passed"
  end
end

test { |a| }
test { |a,b| }
test { || }
test {  }
# =>
# 1 argument(s) passed
# 2 argument(s) passed
# no arguments
# no arguments
```

なお、[Method#arity](http://docs.ruby-lang.org/ja/latest/method/Method/i/arity.html)というのもあり、同様にメソッドの引数の個数を調べれる。

```rb
class Test
  def test1(a,b)
  end

  def test2(a,b,c = 1)
  end

  def test3(a,b,c = 1, d = 2)
  end

  def test4(a,b, &blk)
  end

  def test5(a,b, c = 1, d = 2, &blk)
  end
end
t = Test.new
puts t.method(:test1).arity
puts t.method(:test2).arity
puts t.method(:test3).arity
puts t.method(:test4).arity
puts t.method(:test5).arity
# =>
# 2
# -3
# -3
# 2
# -3
```

なお、どちらも、可変長引数を受け付ける場合、負の整数`-(必要とされる引数の数 + 1)`を返却する。
navigationControllerのpushViewControllerで遷移をゆっくりにしたい時　メモ

とある案件でデフォルトの遷移速度だと早くてヽ(,-｀Д´-)ﾔﾀﾞｯと言われたときにゆっくり動かすのに時間がかかってしまったので
次回から時間をかけなくても良いようにメモを残しておく。

```swift

let transition = CATransition()
		transition.duration = 0.6
		transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
		transition.type = kCATransitionPush
		transition.subtype = kCATransitionFromRight
		self.navigationController!.view.layer.addAnimation(transition, forKey: nil)
		self.navigationController?.pushViewController(nextVC, animated: true)
```

* `duration` をいじってやれば速度が変わる

* `kCATransitionFromRight`の部分のRightのところをTopだのLeftに変えると繊維方向が変わる。

* `transition.type`でpopやpushなどが選べる

* 他にも試した結果popToRootViewControllerAnimatedなどにもアニメーションの設定が効いた。
Railsでローカルのdevelopmentモードでもリクエストを並列に受け取って処理するように


容量の大きいファイルアップロードを裏でしながら、他の操作も許容したい。
というような機能をつくるときに、Railsのdevelopmentモードのデフォルト設定だとでリクエストを一つしか扱えないらしいので以下を追記する

```development.rb
config.allow_concurrency = true
```

あとは、controller等に`sleep`メソッド書いて眠らせれば擬似的に重い処理を検証できる
Bashで、ファイルが変更されたら特定のコマンドを実行する

これ、やりたかった。

`Guard`や`Gulp`等で解決できる話だが、それを使うまででもないような作業に重宝する。

```sh:$HOME/bin/exec_on_change
#!/bin/bash

usage(){
    echo "Usage:"
    echo "    exec_on_change file command"
    exit 1
}

die(){
    echo $1
    exit 2
}

[ $# -lt 2 ] && usage
[ -e "$1" ] || die "No such file or directory: $1"

while true; do
    inotifywait "$1" 2>/dev/null || exit
    $2
done
```

最後の4行がミソ。
最近のLinuxならこれで良いはず。導入には`inotify-tools`が必要。

`sudo apt-get install inotify-tools`


# 使い方

ファイル変更検知

```sh
$ exec_on_change /tmp/a 'echo File changed'

# 別シェルで、ファイルを変更
$ date > /tmp/a
# => /tmp/a MODIFY 
# => File changed
```

ディレクトリもいける

```sh
$ exec_on_change /tmp/ 'echo File changed'
```

これで、テスト駆動開発がはかどる。


# 追記

2番めの引数で指定するコマンドで、パイプが使えない・・・

=> `eval`を使って、使えるようにしました。

zshのプラグインにしてみました。

https://github.com/acro5piano/exec_on_change

`antigen`を使うか、`source init.zsh`して下さい。

`antigen bundle acro5piano/exec_on_change`

# 更に追記

Emacsの`flymake`とかでできるんじゃないか説
ES6 module 那些事儿


#nice article:
http://www.2ality.com/2014/09/es6-modules-final.html



read this specifications, but I just couldn't figure out the detailed point,
but this post helped me to understand the routine.

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export





![Kobito.Vr95y8.png](https://qiita-image-store.s3.amazonaws.com/0/56713/c4572440-f206-ef0d-5012-527198ecc4a5.png "Kobito.Vr95y8.png")