OmniAICreator/Qiita-1.07M huggingface dataset:
Windows8.1にgulp、bowerをインストールする時の注意点

Windows8.1のノートPCにphpの開発環境を構築しようと思い、gulpとbowerをインストールしようとして結構ハマったので、その時のTIPSをまとめておく。

# Windows 8.1の罠

まず、Windows8.1の罠としか言えないヒドイ仕様なのが、初期インストール時にWindows IDのユーザー名に漢字等のマルチバイト文字を含んでいると、ユーザーディレクトリ `C:\Users\` 直下のディレクトリ名がそのマルチバイト文字で作成されてしまい、後からの変更ができないということだ。私も見事に `C:\Users\名前\` になっていて、この状態だと、node.js をインストールしてもパスが通らず（環境変数を直接編集してもダメだった）、npmのインストールができないのだ。
これを回避するには、ローカルユーザーを追加して、初期インストール時のユーザーを削除し、作成したローカルユーザーにWindows IDを改めて紐づけるという超面倒な作業が必要になる。追加したローカルユーザーを管理者ユーザーに設定しても、システムディレクトリの `C:\` 直下のファイルの所有者が切り替わらないので、そこは手動で所有者変更をしてあげる必要がある。One Driveのファイル移動やら所有者不明でアクセスできなくなったディレクトリやファイルを個別で所有者変更など、まずこのユーザー移管作業に半日以上かかった…orz
Linuxみたいに `chown -R UserName C:\.` とかできれば苦労はしないんだが、ファイルやディレクトリを一つずつGUI側から右クリック→「プロパティ」で変更していくのは苦行でしかないッス（T＿T）

もし、再インストールしても問題ない場合は、マルチバイト文字をユーザー名に含まないローカルユーザーを作成しながらWindows再インストールをしてしまうのが一番である。


# 環境の準備

さて、私のノートPCはCore i7だが、メモリが４GBしか積んでないので、VirtuarlBox+Vargrantの仮想環境だとパフォーマンスが出ないだろうなぁ…と思い、PHP開発環境はxamppにした。というわけで、node.js を入れる環境は xampp になる。さらに、もはや世界の必須アイテム Git は事前にインストールしておく。
xampp の apache では vhost 設定して、Windows側の Hosts にもホスト名を追加して、ブラウザからは localhost ではなく、ドメインURLでアクセスできるようにしておいた。

# node.js のインストール

ようやく、準備ができたので、早速 node.js をインストールする。Windows用の node.js のインストールは簡単で、[公式サイトのnodejs.org](https://nodejs.org/) からインストーラーを落として実行するだけだ。2015/5/16時点の最新バージョンは0.12.3だった。
インストールが終わったら、エクスプローラのパス欄に「powershell」か「cmd」と打ち込むか、「ファイル」メニューからコマンドプロンプトを実行して、

```bash:
> node -v
v0.12.3
```

と表示されればOKだ。もし node コマンドが見つからないと言われたら、環境変数のパスを通す必要がある。コントロールパネルを開いて「すべてのコントロール パネル項目」→「システム」→「システム詳細設定」→「詳細設定」タブの「環境変数」から、「システム環境変数」の「Path」の値を編集する。

```
C:\Program Files\nodejs\
```

上記の実行パスを変数値の最後に追加する。これで node.js が使えるはずだ。

# gulp と bower のインストール

node.js をインストールするとパッケージ管理モジュールのnpmも自動でインストールされるので、npmコマンドを使ってタスクランナーの「gulp」とアセット管理ツール「bower」をインストールする。
コマンドラインから、

```bash:
> npm install -g gulp bower
```

でOKだ。`-g`オプションはグローバルにインストールためのオプションだ。
次に、実際にgulpやbowerを利用するプロジェクトのディレクトリにインストールする必要がある。そのためには `package.json` や `bower.json` といった各種パッケージ管理ファイルを作成する必要がある。
ただ、今回はすでにそのあたりをすべて定義済みのプロジェクトファイルをGitHubから読み込むので、ファイルの定義方法などは割愛する。
ということで、プロジェクトディレクトリを作成したいところにディレクトリを作成して、コマンドラインから、

```bash:
> git clone -b branch_name https://github.com/git_user_name/repositry_name.git my_project_dir
```

を実行する。ちなみに、私の場合のプロジェクト用のリポジトリは「[https://github.com/ka215/cdbt.git](https://github.com/ka215/cdbt/tree/version_2)」である。
では、この my_project_dir 内に gulp と bower をローカルインストールする。プロジェクトディレクトリ内に移動して、コマンドラインから、

```bash:
> npm install
> bower install
```

これで、gulpを含むnpmモジュール群とbowerがインストールされたはずなので、確認してみる。

```bash:
> gulp -v
> bower -v
```

バージョンが表示されればOKだ。しかし、私の場合はここで gulp や bower コマンドが見つからないと表示された。Windows8.1ではnpmのモジュールをローカルインストールすると、グローバルで設定されているnpmのパスから外れたところにインストールされるので、そのパスを別途通してやる必要があるのだ。
というわけで、再び環境変数のパスを編集する。コントロールパネルを開いて「すべてのコントロール パネル項目」→「システム」→「システム詳細設定」→「詳細設定」タブの「環境変数」から、今度はユーザー環境変数とシステム環境変数の両方に以下のパスを追加する。

```
C:\Users\{UserName}\AppData\Roaming\npm
```

`{UserName}`の部分はWindowsインストール時のユーザー名になる。
これでようやく gulp と bower が動くようになった。


いやはや、Windows8.1の罠もあって、環境作るのに一日潰してしまった…。
Access denied for user 'root'@'localhost'　が発生した時の対処方法

毎回久しぶりにrailsでrake:db create するとこのエラーが起こるのでメモ

Access denied for user 'root'@'localhost'
が発生したら

database.yml
の
default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: root
  password: 
  socket: /tmp/mysql.sock

ってとこのpasswordにmysqlのパスワードを入力すれば解決する。
Vagrant(1.7.2)で構築したCentOSにAnsibleをインストールする

# 目次

* 目的
* 関連サイト
    * 公式サイト
    * 参考サイト
* ダウンロードソフトウェア
* 環境
    * ホストマシン
    * ゲストマシン
* 手順

# 目的

* Virtual Box上にVagrantで構築したCentOSにAnsibleをインストールする

# 関連サイト

## 公式サイト

* [Vagrant](https://www.vagrantup.com/)
* [Ansible](http://www.ansible.com/home)

## 参考サイト

* [Ansible Tutorial](http://yteraoka.github.io/ansible-tutorial/#install-ansible)

# ダウンロードソフトウェア

* なし

# 環境

## ホストマシン

* Windows 7 Home Premium
 * Vagrant 1.7.2
 * VirtualBox 4.3.26-98988

## ゲストマシン
  * CentOS 7
   * Python 2.7.5
   * pip 1.5.6

## 手順

* VagrantでCentOSを起動
* CentOSに接続
* pipでAnsibleをインストール

### VagrantでCentOSを起動

Vagrantで構築した仮想マシンにはVagrantコマンドから起動することができる。ホストマシンがWindowsの場合、コマンドプロンプトから実行する。

1. 仮想マシンのフォルダに移動する
```
C:\>cd c:\Users\User\VM\CentOS7_x64_001
```

1. 仮想マシンを起動する
```
C:\>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 => 2222 (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default: Warning: Connection timeout. Retrying...
    default: Warning: Connection timeout. Retrying...
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM...
==> default: Mounting shared folders...
    default: /vagrant => C:/Users/User/VM/CentOS7_x64_001
==> default: Machine already provisioned. Run `vagrant provision` or use the `--provision`
==> default: to force provisioning. Provisioners marked to run always will still run.
 
C:\Users\User\VM\CentOS7_x64_001>
```

### CentOSに接続

起動したCentOSにSSH接続する。接続先IPアドレスとポート番号は、vagrant up起動時の出力内容から、以下のとおりである。
```
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
```
今回使用したVagrantBoxではSSHの公開鍵認証も構築済みである。秘密鍵は、以下のファイルとなる。接続時にもこの秘密鍵をもって接続を行う。
```
C:\Users\User\VM\CentOS7_x64_001\.vagrant\machines\default\virtualbox\private_key
```

1. TeraTermの起動  
TeraTermを起動し、IPアドレス、ポート番号、ユーザ名を入力する。
![Vagrant上のCentOSに接続_001.png](https://qiita-image-store.s3.amazonaws.com/0/4247/9c641eec-bc47-cfd7-3f6f-ac8575a6d758.png)

1. ログイン情報の入力
ユーザー名と秘密鍵の情報を入力し、[OK]を押下する。 (秘密鍵のパスは例)  
ユーザ名: vagrant
秘密鍵：C:\Users\User\VM\CentOS7_x64_001\.vagrant\machines\default\virtualbox  
![Vagrant上のCentOSに接続_002.png](https://qiita-image-store.s3.amazonaws.com/0/4247/12223bc6-5be5-3091-d566-6f559e911b9f.png)

1. 接続完了
![Vagrant上のCentOSに接続_003.png](https://qiita-image-store.s3.amazonaws.com/0/4247/3f21168a-50dd-d739-c338-c7e8c0d0a9e7.png)

### pipでAnsibleをインストール
AnsibleはPythonで記述されており、インストールにはpipを用いる。

1. Ansibleをインストールする
```bash
# pip install ansible
:
Successfully installed pycrypto markupsafe
Cleaning up...
```

1. Ansibleのバージョンを確認する
```bash
# ansible --version
ansible 1.9.1
configured module search path = None
```

以上
jQueryの成分解析

いっとき、名前を入れると「プログラマーの30%は怠惰でできています。プログラマーの30%は短気でできています。プログラマーの30%は傲慢でできています。」というような感じで、何からできているかを表示するという「成分解析」なんてものが流行ったことがありました。ここでは、そんな冗談的な要素も一定程度は取り入れつつ、jQueryのソースも見ながら「成分解析」を行ってみることにします。
# 解析結果
**※ 割合については筆者の主観的判断です。行数や実行時間などから定量化したものではありません。**

* jQueryの30%は便利ツールでできています。
* jQueryの30%はブラウザ対策でできています。
* jQueryの15%は純粋なDOM操作でできています。
* jQueryの10%はメソッドチェーンでできています。
* jQueryの5%は引数や文字列のパースでできています。

# 各成分について
割合はともかく、jQueryにいろんな成分があることは間違いないですので、それぞれの成分についてどんなものか見ていきましょう。
## 便利ツール
jQueryの本体であるDOM操作についても、フレームごとに書き換えるアニメーションやイベントのグループ化管理など、通常のDOM操作では簡単に実行できないものが含まれていますし、JavaScript上での型の判定（言語標準ではいろいろ物足りない）やAjax処理のラッパーなど、DOM操作と無関係なところにも関数を用意しています。
## ブラウザ対策
jQuery 1.x系列は今でも**IE6以上**対応となっていますが、古いIEで典型的な「ブラウザ自体の機能が足りない」場合にそれを補うためのPolyfillや、ブラウザ特有で発生するバグへの対応、ブラウザごとに違うイベントオブジェクトの変換などに、多くのコードや実行時間を割いています。

最新版のブラウザでも固有のバグが発生することがあり、現時点の最新版であるjQuery 1.11.3のコードにも、Safari 8特有のバグ対策がありました。

```js:jQuery-1.11.3.js
			// Support: Safari 8+, iOS 8+
			// https://bugs.webkit.org/show_bug.cgi?id=136851
			// In-page `selector#id sibing-combinator selector` fails
			if ( !div.querySelectorAll( "a#" + expando + "+*" ).length ) {
				rbuggyQSA.push(".#.+[+~]");
			}

```
## 純粋なDOM操作
DOMの変更、イベントの追加削除などがメインですが、コード分量としてはそこまで多くありません。
## メソッドチェーン
純粋なDOMのオブジェクトはいったん変数に入れてメソッドを呼ぶしかありませんが、jQueryではメソッドチェーンができます。とはいえ、これをサポートするためのコードはそこまで多い感じではありません。
## 引数、文字列のパース
jQueryのプロパティ取得/設定メソッドは、大半が「引数なしなら取得、ありなら設定」となっていますので、その切り分けが必要になります。また、`$('文字列')`という形では、まず文字列がセレクタかHTMLかを判定して、さらにセレクタならブラウザの専用メソッドを呼べるもの、`querySelector`に投げられるもの、バグ対策やjQuery拡張のセレクタなので自前処理が必要なものと、細かく場合分けするコードになっています。
# まとめ
人間向けに読みやすいjQueryのソースコード（1ファイル）も[公式CDN](http://code.jquery.com/)などに用意されています。そのままコードだけ読んでみるもよし、ブラウザから呼び出している時にデバッガで中まで入り込んでみるもよし、とりあえず**読んでみましょう**。その過程で、バックにあるJavaScriptやDOMへの理解も、きっと深まっていくことでしょう。jQueryの中で「余計なこと」をやっていて重い、というのであれば、余計な部分だけ外した等価なコードを自分で書いて高速化を図ることもできます。
Laravel5で旧スタイルのPHP(.php) URLを処理する


###やりたいこと

一言で言えば、Laravelで/test.php?name=hogeといったURLを処理したい。

Lravelを始め、近代的なWebアプリのURLはURL(URI)指定スタイルである。つまり、

* /hostname/apis/getUsename.php?id=12345（旧スタイル）
* /hostname/apis/getUsername/12345（新スタイル）

という感じである。
旧環境を捨てて、全く新しく開発できる場合はいいのだが、旧環境との互換性を維持しなければならない場合も少なくない。

###やること

URL自体を大きく変えてしまえるなら、それはそれで楽なのだが、上記の例のように、/apis/までは同じURIを使う場合を想定してRoute処理を考えてみる。

####パラメータ無し（基本形）

まずは、querystringsが無い

/apis/test.php
/apis/test

に対応してみる。

いろいろな書き方があるが、とりあえずこんな感じ。

```php
//旧スタイル
Route::get('apis/{phpfile}',function(){

	return "old style";

})->where('phpfile','.+\.php');

//新スタイル
Route::get('apis/{str}',function(){

	return "new style";

})->where('str','[a-zA-Z]+');
```

正規表現で分けている。この時、{phpfile}と{str}は別の名前（両方{str})ではダメなようだ。
この場合、/apis/test.phpの場合はold styleに、/apis/testの場合はnew styleになる。
まあ、こうなると別に.phpである必要もなく.jspでも.aspxでも何でも吸収できる。

####パラメータ有り

今度は、

/apis/test.php?id=12345
/apis/test/12345

に対応してみる。

```php
//旧スタイル
Route::get('apis/{phpfile}',function(){

	$id = Input::get('id');
	return "old style, id=$id";

})->where('phpfile','.+\.php');

//新スタイル
Route::get('apis/{str}/{id}',function($str,$id){

	return "new style, id=$id";

})->where('str','[a-zA-Z]+');
```
旧スタイルでは、?id=12345はphpfileには含まれないようだ。?移行は普通のGETパラメータとして取得できる。
新スタイルでは、まあ、通常の取得方法となる。

###応用

では、

/apis/getNanme?id=12345
と
/apis/getName/12345

をどう処理すべきか？新スタイルでは、別のRouteを設定すればよい。旧スタイルでは、$phpfileで場合分けしている。
もっといい方法が有るのかもしれない。

```php
//旧スタイル
Route::get('apis/{phpfile}',function($phpfile){

	$id = Input::get('id');

	if($phpfile == "getName.php"){
		return "getName";
	}

	if($phpfile == "getAddress.php"){
		return "getAddress";
	}

	return "not found.";

})->where('phpfile','.+\.php');

//新スタイル
Route::get('apis/getName/{id}',function($id){

	return "getName(new)";

});

Route::get('apis/getAddress/{id}',function($id){

	return "getAddress(new)";

});
```

実際には、新、旧でロジックは共通化し、Routeの処理だけ分けるということができれば理想ではある。

###おまけ（おしりの/）

Laravelでは、/apis/test/ではなく、/apis/testという形式が標準形式として採用されている。おしりに/が入った場合、publicフォルダの.htaccessファイル中のrewriteで/を削除している。

標準では、

```xml
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes...
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>
```

となっているが、必要に応じていじる必要がある。重要な箇所は、

```xml
    # Redirect Trailing Slashes...
    RewriteRule ^(.*)/$ /$1 [L,R=301]
```

の部分で、これはおしりが/だと、/$1にリライトされる（$1はファイル名等）。私はrootとして使わないことが多いので、これだとうまく動かないことが多く、

```xml
    # Redirect Trailing Slashes...
    RewriteRule ^(.*)/$ /test/public/$1 [L,R=301]
```
などとすることが多い。testはLaravelのアプリケーションフォルダ。指定に変数を使ってももちろん構わない。
StyleDoccoでurlを書き換えてほしくない場合の対処

スタイルガイドを作成するツールの**StyleDocco**を使用した際に、以下の問題が発生したので対応した際のメモです。

# 発生事象
1. インプットとしたCSSファイルのurl関数の値を相対パスで記述している場合に、スタイルガイド内で使用する画像ファイルへのパスがstyledoccoコマンド実行時から対象CSSファイルの場所分../が追加される。

# 発生環境
* OS：Windows8.1 **日本語版**、Windows7 SP1 **日本語版**
* 実行環境：Node.js v0.12.0
* StyleDocco：0.6.6

# 対応方法
####発生事象１.インプットとしたCSSファイルのurl関数の値を相対パスで記述している場合に、スタイルガイド内で使用する画像ファイルへのパスがstyledoccoコマンド実行時から対象CSSファイルの場所分../が追加される。
（元のCSSファイル自体が書き換えられるわけではなく、出力されたスタイルガイド上で展開されるCSSが書き換えられて、元のCSSに記述したURLの場所に画像を置いても画像が表示されない。）

以下の箇所をコメントアウトします。

```js:cli.js：修正前45行目
   return css.replace(regex, "$1" + path + "$2");
```

同じようにお困りの方の参考になれば幸いです。
DropBox,OneDriveで指定フォルダをバックアップをする

<h1>DropBox,OneDriveで指定フォルダ等のバックアップをする</h1>
　クラウドストレージで指定フォルダをバックアップしたい時があります。これが、デフォルトだと実現出来ない様子。そこで、プラグイン的なものを入れて実現したいと思います。

<h2>MacDropAnyを使用する</h2>
１．<a href="http://www.zibity.com/macdropany.html">こちら</a>からソフトをダウンロードします

![スクリーンショット 2015-05-17 9.27.49.png](https://qiita-image-store.s3.amazonaws.com/0/78033/9c2a2d9e-c244-ac82-dc03-4d557157103e.png)

２．zip形式なので解凍します
![スクリーンショット 2015-05-17 9.28.25.png](https://qiita-image-store.s3.amazonaws.com/0/78033/fc4eca7d-8b0e-592b-685e-51ca4f11fb0f.png)

３．アプリケーションへ追加します
![スクリーンショット 2015-05-17 9.29.08.png](https://qiita-image-store.s3.amazonaws.com/0/78033/08234f18-9520-a03a-9b7b-f39bf7bd73c0.png)

４．起動したらはじめにバックアップ対象のフォルダを指定します
![スクリーンショット 2015-05-17 9.30.02.png](https://qiita-image-store.s3.amazonaws.com/0/78033/b5d756d0-456f-70fa-f1f7-46c9225fd835.png)

５．バックアップするアプリケーションを選択します
![スクリーンショット 2015-05-17 9.30.20.png](https://qiita-image-store.s3.amazonaws.com/0/78033/be4c985d-4265-3686-ae53-391e05b9d98f.png)

６．対象アプリケーション内![スクリーンショット 2015-05-17 9.30.30.png](https://qiita-image-store.s3.amazonaws.com/0/78033/0bf6c77a-33ff-b8b0-1d77-9d3b9dc8cc1b.png)
のバックアップフォルダを指定します


以上！！！
Noto SansをWeb font化しようとした時にハマった話

Googleが、[Noto Sans](https://www.google.com/get/noto/)というFontをOpen Source Licenseで配布を始めました。
Noto Sansの日本語/中国語簡体字版のFontをWeb Font化しようとしてハマった時の話と、最終的にWeb Font化した成果物をおいておきます。


## Web Font化の全体の流れ & ハマりポイント
ttfやotf形式のFontをWeb Font化するには、以下のような流れで処理します

```
1. 元のFont fileをDownloadする
2. FontをSubset化する
3. Web fontとして使える様に各種形式に変換する (一般的にはeot, ttf, woffの3つを用意しておけばOK)
4. cssでfont指定する 
```

が、ここでポイントなのが2です。

ご承知のように日本語や中国語などはFontのFile sizeがそもそも大きいです。例えば上記のNoto Sansの日本語Fontは1つ16MB近くあります。

どうやら、FontのFile sizeが大きすぎるとBrowserの制限なのかWeb fontとして使えないみたいで、BrowserはFont fileをちゃんとDownloadしているのに表示に使ってくれません(**ここにハマりました**)。そのため、File sizeが大きいFontでは、Subset化してFile sizeを減らす処理が必須になります。逆に、英語用などそもそもFile sizeが小さいので、Subset化は必要なく、1/3/4の処理のみで済みます。

#### 参考ページ
* [Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順]
(http://qiita.com/nowri/items/1c69b9b25f2958bd9f97)

## Fontのサブセット化って何?
ググって貰えれば詳細な記事が見つかると思いますが、必要な文字だけを切り出してFile sizeの小さいFontを作る処理です。

例えば一般的な日本語Fontは、5000-15000文字ぐらいを収録しているのですが、第1水準漢字だけで事足りるのであれば、3000文字ぐらいで済みます。3000文字分だけ収録された(Subsetの)Fontを作る事をSubset化と呼びます。当然File sizeは小さくなります。

[サブセット化をする便利ツールはあるので](http://opentype.jp/subsetfontmk.htm)、悩みどころは必要な文字のリストを作る所です。日本語/中国語簡体字の場合、以下に参考と成る文字リストがあります。更に文字数を絞ったFontが必要な場合に参考にして下さい。

* [日本語のサブセット文字リスト (第一水準漢字+記号+ローマ字+カタカナ+ひらがな) ](http://11neko.com/font-3/)
* [中国簡体字のサブセット文字リスト (通用规范汉字表の1級-3級の8000文字)](http://ryomport.me/blog/cn-webfont-light2015/)

## Fontを別formatに変更する方法
[woffコンバーター](http://opentype.jp/woffconv.htm)を使うと、woff/ttf/eot間でformat変更ができます。

## Web fontとして使えるSubset化済みFont file
以下に、Subset化済みのNoto SansのFont fileが置いてあります。このFile sizeで良ければそのまま使えるはずです。

* [日本語 ttf/woff/eot](https://github.com/nowri/sample-noto)
* [中国語簡体字 woff](http://ryomport.me/blog/cn-webfont-light2015/)
* [中国語簡体字 上記woffをttf/eotに変換した物](https://github.com/taka4sato/NotoSans-SubsetFont)

## その他
* cssで[font-faceにunicode-rangeという値をSet](https://spyweb.media/2017/09/13/font-face-subset-synthesis/)することで、fontのSubset化も可能です（が、以下のような懸念もあります)
  * Downloadするfont fileのサイズが小さくなる訳では無い(あくまでBrowser側でsubset化を行います)
  * Browserの[対応/非対応がある可能性がある](https://caniuse.com/#search=unicode-range)
環境の限られたところでのプログラム

条件

* 新たなインストール不可。
* プログラムをメインとする職場ではない。
* 業務に関すること以外のブラウジング不可。
* MSOfficeは導入済み。

できること

* メモ帳でhtmlを作り自分用のあんちょこにするのは可。
* html、css、js

色々なツールがexcelで作られているので
vba、html、css、jsを駆使してどうにかしよう。
Effective C++ (3rd) > 31項 > ハンドルクラス > クラス実装例

引用: Effective C++ 第3版

> このようなクラスで、実際に関数の定義をどう書くのかと思うかもしれませんので、まとめておきましょう。１つの方法は、対応する実装用クラスの関数を呼び出すというものです。たとえば、次のコードが、Personのクラス実装例です。

```cpp
#include "Person.h"
#include "PersonImpl.h"

Person::Person(const std::string& name, const Date& birthday,
    const Address& addr)
:pImpl(new PersonImpl(name, birthday, addr))
{}

str::string Person::name() const
{
    return pImpl->name();
}
```

> PersonのコンストラクタではPersonImplのコンストラクタを呼び出して(...)います。また、Person::nameではPersonImpl::nameを呼び出しています。これは重要です。PersonをハンドルにしてもPersonのすることは変更されません。その仕方が変わるだけなのです。
Effective C++ (3rd) > 31項 > ハンドルクラス > pimplイディオムを利用したクラス

引用: Effective C++ 第3版

> Personのようにpimplイディオムを利用したクラスは、しばしば、ハンドルクラスとよばれます。

<hr>
[Handle class in c++? @ SO](http://stackoverflow.com/questions/12319424/handle-class-in-c)
qunit + power-assertで正しく表示する

https://github.com/twada/power-assert-demo の通りに
qunitとpower-assertを組み合わせると表示が崩れてしまいます。

![](http://i.gyazo.com/aa3b42b2811ed99653f780a7305f7a54.png)

そこで以下のようにスタイルを設定します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>QUnit Test Suite</title>
  <link  href="../bower_components/qunit/qunit/qunit.css" rel="stylesheet" />
  <script src="../bower_components/qunit/qunit/qunit.js"></script>
  <script src="../bower_components/qunit-tap/lib/qunit-tap.js"></script>
  <script>qunitTap(QUnit, function() { console.log.apply(console, arguments); }, {showSourceOnFailure: false});</script>

  <script src="../bower_components/empower/build/empower.js"></script>
  <script src="../bower_components/power-assert-formatter/build/power-assert-formatter.js"></script>
  <script>empower(QUnit.assert, powerAssertFormatter({lineSeparator:"\n"}), {destructive: true});</script>
  <style>
    .test-message{
      white-space: pre;
      font-family: Osaka-mono, "Osaka-等幅", "ＭＳ ゴシック", monospace;
      font-size: 14px;
    }
  </style>

  <script src="../src/mylibrary.js"></script>

  <script src="../test/testMylibrary.espowered.js"></script>
</head>
<body>
  <h1 id="qunit-header">QUnit Test Suite</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <div id="qunit-fixture">test markup</div>
</body>
</html>
```

![](http://i.gyazo.com/98fabb452b1c6bfc6fce7456fb2c1bff.png)

うまくいきました。
Effective C++ (3rd) > 31項 > 宣言と定義でヘッダファイルを分ける / <iosfwd>

引用: Effective C++ 第3版

> これまでのガイドラインをさらに推し進めるためには、ヘッダファイルをペアにするのがよいでしょう。１つは宣言用のヘッダファイルで、もう一つは定義用のヘッダファイルです。...ライブラリを利用するコードでは、自分で前方宣言をすることなく、宣言用のヘッダファイルを#includeすればよくなります。

> ...
> C++標準ライブラリのヘッダ<iosfwd>...<iosfwd>は「<sstream>、<streambuf>、<fstream>、<iostream>などのヘッダに定義が含まれるコンポーネント」の宣言を集めたヘッダです。

<hr>
http://www.cplusplus.com/reference/iosfwd/

<hr>

http://www.fides.dti.ne.jp/~oka-t/cpplab-stream.html
> とくに iosfwd はクラス名だけを宣言しており、 クラスの実体が不要な場合は、 できるかぎり iosfwd だけをインクルードするようにすべきである
enthumbleの設定(memo)


#使っているキーボード
* メイン(仕事)
    * rapoo:9060
       キーが大きくて打ちやすいのですが、右Ctrlが無いのだけが不満です。
       
* サブ(自宅)
    * ノートPCのキーボード
        一般的なキーボードです。可もなく不可もなく。

ゆくゆくは一本化したいと思っています。ただ、enthumbleの設定は同じです。

#設定内容
- 基本設定はHJKLモードです。(vim使いなので)
- HJKLの一段上はそれの強化版(Home, PgDn, PgUp, End)
- 括弧やらクォートやらは閉じも入れて中に戻るようにしました。(これ便利ですね!)
- .md用に＠→`×3にしています。

#設定ファイル中身
設定ファイルHJKL.iniの中身です。

```text:HJKL.ini
[HowToUse]
Check=http://jp.enthumble.com/
Name=enthumble version 4.0
[KEY]
Space={Enter}
Muhenkan={Esc}
Henkan={Esc}
Hiragana={}
F1=良く使う文字列その1
F2=良く使う文字列その2
F3=良く使う文字列その3
F4=良く使う文字列その4
F5=#{}
F6=#{}
F7=#{}
F8=#{}
F9=#{}
F10={Volume_Mute}
F11={Volume_Down}{Volume_Down}
F12={Volume_Up}{Volume_Up}
F18={}
F19={}
1={}
2={F2}
3={F3}
4={F4}
5={F5}
6={F6}
7={vkF2sc070B}{vkF3sc029}''{left}
8={vkF2sc070B}{vkF3sc029}(){left}
9={vkF2sc070B}{vkF3sc029}(){left}
0={F10}
-={F11}
Hat={vkF2sc070B}{vkF3sc029}{|}{|}{left}
\={vkF2sc070B}{vkF3sc029}{|}{|}{left}
Q={}
W={}
E={}
R={}
T={}
Y={Home}
U={PgDn}
I={PgUp}
O={End}
P={}
@={vkF2sc070B}{vkF3sc029}{`}{`}{`}
LB={vkF2sc070B}{vkF3sc029}{{}{}}{left}
A=^{a}
S=^{s}
D=^{d}
F=^{f}
G=^{g}
H={left}
J={down}
K={up}
L={right}
Semicolon={vkF2sc070B}{vkF3sc029}{+}{space}
:={vkF2sc070B}{vkF3sc029}{*}{space}
RB={vkF2sc070B}{vkF3sc029}{[}{]}{left}
Z=^{z}
X=^{x}
C=^{c}
V=^{v}
B=^{b}
N={Backspace}
M={Backspace}
,={delete}
.={delete}
/={}
Backslash={}
Up={vkF2sc070B}{vkF3sc029}{ASC 33194}
Down={vkF2sc070B}{vkF3sc029}{ASC 33195}
Left={vkF2sc070B}{vkF3sc029}{ASC 33193}
Right={vkF2sc070B}{vkF3sc029}{ASC 33192}
LButton=^{PgUp}
MButton={MButton}
RButton=^{PgDn}
WheelUp={}
WheeDown={}
PageUp=^{PgUp}
PageDown=^{PgDn}
Home={}
End={}
Delete={}
backspace={}
Enter={}
Escape={}
Hankaku={}
Tab={}
Capslock={}
Lwin={}
Rwin={}
Insert={}
```

#今後カスタマイズしたいこと
* ダブルクォートも閉じを入力して中に戻るようにしたかったのですが、F2キーとぶつかってしまって適用できていません。悩ましい。
* ~~これを書いていて初めてmdに触りましたが、便利ですね。md向けの設定も取り込んでいきたいです。(`×３以外にも)~~
  * md向けにひとまず箇条書き用の`* `と`+ `を設定。
* ~~Fnキーの上手い使い方が思い浮かばないです。遠いし。~~
  * Fnキーには定型文（メールアドレスとか）を入れてマクロ的に使うようにしてみました。
* その他実戦で使っていって問題があったらちょこちょこ直していきます。
技術英語 > 時間の問題 > a matter of time

「これは時間の問題です」
というのは以下のように言えばいい。
It's a matter of time.

We consider it as a matter of time. (それは時間の問題と考えている)


Time関連では以下を思い出した。
- Time will heal all the wounds. (時間がすべての傷を癒してくれる)
- Time will tell. (時間がたてばわかるよ)

a matter of関連では以下のようなものを思い出した。
- a matter of life and death (生死に関わる問題)
- a matter of cost

以下はまだ覚えてなかったもののうち興味を持ったもの [alc](http://eow.alc.co.jp/search?q=a+matter+of)
- as a matter of high priority (最優先事項として)
- as a matter of practical convenience (便宜上)
C言語でファンクタを使ってステートマシンを実装する

プログラマならみんな使いたいステートマシン。
ライブラリもいろいろありますが、重かったり、大人の事情で使えなかったり。

難しいコトは考えずに書いてみましょう。

チェックポイントとしては、

* C言語で書く
* 呼び出し時のオーバーヘッドは小さく
* Entry, Exit のイベントを使いたい
* コードが汚くならない　←

以下サンプル。


``` C
#include <stdio.h>

#define PRINT(x) printf(#x "\n")
#define DUMP(x) printf("\tsignal=%d param=%d\n",x->s,x->p)

typedef enum Signal_e {
	S_ENTRY,
	S_EXIT,
	S_USER_0,
	S_MAX
} Signal;

typedef struct Event_s {
	Signal s;
	int p;
} Event;

typedef enum State_e {
	INIT = 0,
	WAIT,
	RUN
} State;

//  ステート関数の型
typedef int (*STATEFUNC)(const Event *e);

//  ステートに対応する関数
int StateFuncInit(const Event *e) {
	PRINT(call Init);
	DUMP(e);
	return 0;
}

int StateFuncWait(const Event *e) {
	PRINT(call Wait);
	DUMP(e);
	return 0;
}

int StateFuncRun(const Event *e) {
	PRINT(call Run);
	DUMP(e);
	return 1;
}

// ステート変数。生で触ってはいけない。
State state = INIT;

// ステートファンクタのテーブル
STATEFUNC StateTable[] = {	StateFuncInit,
							StateFuncWait,
							StateFuncRun };

// ステートを変えるエイリアス
inline void TRANS(State next) {
	Event e = {S_EXIT, 0};
	StateTable[state](&e);
	e.s = S_ENTRY;
	StateTable[next](&e);
	state = next;
}

// イベントを配送するエイリアス
inline void PROCESS(const Event *e) {
	StateTable[state](e);
}
// TestCode
int main() {
	Event e = {S_USER_0, 0};
	PRINT(イベント通知(Initに配送される));
	PROCESS(&e);
	PRINT(WAITに遷移する);
	TRANS(WAIT);
	PRINT(イベント通知(Waitに配送される));
	PROCESS(&e);
	PRINT(RUNに遷移する);
	TRANS(RUN);
	PRINT(イベント通知(Runに配送される));
	PROCESS(&e);
	return 0;
}

```

実行結果

```
イベント通知(Initに配送される)
call Init
        signal=2 param=0
WAITに遷移する
call Init
        signal=1 param=0
call Wait
        signal=0 param=0
イベント通知(Waitに配送される)
call Wait
        signal=2 param=0
RUNに遷移する
call Wait
        signal=1 param=0
call Run
        signal=0 param=0
イベント通知(Runに配送される)
call Run
        signal=2 param=0
```

ポイントはタイトルにもありますがファンクタを使っているところ。
状態をindexとする管理テーブルを定義することで、イベントの配送を1行で実現できます。

明らかにマルチスレッドには対応してません。
また、Entry,Exit で TRANS を呼ぶことは想定してません。

C++を使えばもっとカコヨク書けそうですが、それはまたどこかで。
当たり判定のアルゴリズム（2D 四角×四角）

当たり判定は標準でよく入っているので、アルゴリズムまで考えたことがない人もけっこう居ると思います。今回は、ちょっと粘って原理を考えてみます。
複雑・高速なものはもっとあると思いますが、これは一番シンプルなアルゴリズムかと思います。

今回は四角 x 四角なので矩形（読みは「くけい」）とも呼ばれると思います。
ここでは矩形を「四角」と呼びます。

##当たり判定に必要な情報
最初に当たり判定に使う情報をリストアップします。


**■ 中心の位置 (x,y)**
**■ 横幅 (width)**
**■ 高さ (height)**

これが揃ってれば当たり判定ができるよ、という話です。
まだ何も話が進んでないのでとりあえず鵜呑みでいきましょう

##「横の条件」と「縦の条件」がある
![e.png](https://qiita-image-store.s3.amazonaws.com/0/57193/5109179d-0f8c-9218-0372-da28e8426e74.png)
図を見ておきましょう。「赤」と「青」と呼びます。
###横について
**1 . まず距離を出そう**
位置をもとにして距離をだします。
距離 = (赤のX - 青のX)の絶対値
です。

なぜ絶対値なのかというと、マイナスにしたくないからです。
赤（3,10）、青（5,20）の場合は、2
赤（30,2）、青（18,2）の場合は、12
と、どんな場合でも同じように扱えます。

**2 . ふたつの幅 ÷ 2 を 足す**
それは、赤.width /2 + 青.width/2
で出せます。

**3 . 1と2を比べる**
さて、1と2を使うと衝突状態を検出できると思いませんか？
1 < 2の時です。
これは言葉で並べても腑に落ちないと思うので、イメージしてみてください。
1 < 2の時、衝突です。


###縦について
横について「x」や「width」を扱っていたのを「y」や「height」に変えるだけです。

###判定しよう
「縦について」「横について」両方衝突検出できていれば衝突です。

##JavaScript & Canvasで表現するのに必要な知識
原理の話が終わったので、これからは表現していきます。

お気づきのように、**絶対値を出す標準関数のMath.abs()が必要**です。

```js
var absNum = Math.abs(-10); // 10
```
それと、**Canvasで四角を表現するならばrect()が必要**です。
rect (x, y, width, height)で描画されます。

```js
rect (100,100,10,10); //(100,100)に幅、高さ10の四角を描く
```

さあ、やってみましょう。

```html:index.html
<script>
function setup(){
  var canvas = document.getElementById('MyCanvas');
  if (canvas.getContext){
    ctx = canvas.getContext('2d');

    //赤い四角
    var red = {
      x : 100,
      y : 100,
      width : 80,
      height : 100
    };

    //青い四角
    var blue = {
      x : 160,
      y : 180,
      width : 100,
      height : 130
    };


    // 当たり判定
    if(
      Math.abs(red.x - blue.x) < red.width/2 + blue.width/2 //横の判定
      &&
      Math.abs(red.y - blue.y) < red.height/2 + blue.height/2 //縦の判定
    ){
      console.log("hit"); // hit
    }

    //rectの基準点は左上になっているので、描画時に基準点を真ん中にしてます。
    ctx.rect(red.x - red.width/2,red.y - red.height/2,red.width,red.height);
    ctx.rect(blue.x - blue.width/2,blue.y - blue.height/2,blue.width,blue.height);

    ctx.fill();

  }
}

</script><html><head><style type="text/css">canvas { background:#FAFAFA;}</style></head><body onload="setup();"><canvas id="MyCanvas" width="500" height="500"></canvas></body></html>

```


##なぜ「差の絶対値」なのか？アゲイン
「差の絶対値」を出すことの恩恵は４つのパターンに対応できることですね。
下の４つのパターン全てできることをイメージしてみてみましょう。できそうですね。
![c.png](https://qiita-image-store.s3.amazonaws.com/0/57193/6ef34064-c18f-66b6-7fec-501c75b2696a.png)
![d.png](https://qiita-image-store.s3.amazonaws.com/0/57193/19a1e7ac-5f4c-7de7-6999-1b245c0a0b3a.png)
![a.png](https://qiita-image-store.s3.amazonaws.com/0/57193/b6a00c58-85c9-7680-6641-825d3f5b05fa.png)
![b.png](https://qiita-image-store.s3.amazonaws.com/0/57193/5701800b-9cc9-d016-94af-04529837b7d9.png)
boot2dockerのVMからVPN接続先のホストを認識させる

# 環境

```
$ boot2docker version
Boot2Docker-cli version: v1.6.1
Git commit: 076b58d

$ docker version
Client version: 1.6.1
Client API version: 1.18
Go version (client): go1.4.2
Git commit (client): 97cd073
OS/Arch (client): darwin/amd64
Server version: 1.6.1
Server API version: 1.18
Go version (server): go1.4.2
Git commit (server): 97cd073
OS/Arch (server): linux/amd64
```

# 問題
* OSXでDockerをboot2docker経由で使用。
* Docker RegistryがVPN接続先にある。
* VPN接続はCisco AnyConnect(3.1.05182)を使用。
* Docker registryを接続するときに、下記のようなエラーが出る。

```
Unable to find image 'registry.example.com:5000/buildpack-java7:1.18.34' locally
FATA[0000] Error response from daemon: v1 ping attempt failed with error: Get http://registry.example.com:5000/v1/_ping: dial tcp: lookup registry.example.com: no such host
```

# 原因
* https://www.virtualbox.org/ticket/10864
* VirtualBoxのバグで、NAT-DNSの検索アドレスが、`/etc/resolv.conf`のnameserverを見ていない。

# 回避方法
* VirtulBoxのVMを終了し、VBoxManageコマンドを実行。

```
$ boot2docker down
$ VBoxManage modifyvm boot2docker-vm --natdnshostresolver1 on
```
* boot2dockerを再起動。

```
$ boot2docker up
```
Oracle DBの全テーブル名とそのPKを取得するSQL

接続しているデータベースで有効な全テーブルのPKを取得するSQL（Oracle限定）。

```sql
select t1.table_name, t1.column_name
from user_cons_columns t1
where t1.constraint_name in (
    select t2.constraint_name
    from user_constraints t2
    where t2.table_name in (
        select t3.table_name from user_tables t3 where t3.status = 'VALID')
    and t2.constraint_type = 'P')
order by t1.table_name, t1.position;
```
Goでお手軽PUSH通知テスト

# GoでiOSにPUSH通知を簡単に送りたい人へ


## ライブラリ

https://github.com/anachronistic/apns
https://github.com/timehop/apns
https://github.com/joekarl/go-libapns

（この他にも、まだまだあります...!


## 結論

timehopさんを使用しました。


最もスターが多いanachronisticさんのライブラリを最初は使っていたのですが、動作が遅かったので、issueを読んでいたら、どうも処理に間違いがあるようです。
https://github.com/anachronistic/apns/pull/14
こちらのPRがマージされれば治る気配があるようですが、、まだマージされていないようです。


joekarlさんのライブラリはまだ詳しく見れていないのですが、実装方法が面白そうなので載せておきました。


## サンプルコード

```push.go
package main

import (
	"log"

	"github.com/timehop/apns"
)

func main() {
	c, err := apns.NewClientWithFiles(apns.SandboxGateway, "apns-dev-cert.pem", "apns-dev-key-noenc.pem")
	if err != nil {
		log.Fatal("Could not create client: ", err.Error())
	}
	p := apns.NewPayload()
	p.APS.Alert.Body = "YO"
	
	m := apns.NewNotification()
	m.Payload = p
	m.DeviceToken = "x-x-x-x"
	m.Priority = apns.PriorityImmediate

	sendError := c.Send(m)

	if sendError == nil {
		log.Print("Send Success")
	} else {
	    log.Fatal("Send Fail: ", sendError.Error())
    }
}
```
PEMファイルの作成については今回は割愛させていただきます。
Badgeなども付与できます。詳細はtimehopさんのgithubにあるサンプルを見てみてください。


## 実行
```
go get github.com/timehop/apns
go run push.go
```
ねこのアスキーアートが出るvimプラグイン(vim-neko)

##はじめに
自作vimプラグイン[vim-neko](https://github.com/rtakasuke/vim-neko)の紹介です。
ランダムにねこのアスキーアートが出ます。

##スクリーンショット
![1__vim.png](https://qiita-image-store.s3.amazonaws.com/0/18646/1017b106-7aea-ca85-bfa9-5252907f192c.png)


##使い方
####インストール
NeoBundleの場合

```
NeoBundle 'rtakasuke/vim-neko'
```

####キーマッピング

```
map <silent> neko :Neko<CR>
```

##ねこ募集
可愛いねこのプルリクをお待ちしています
角括弧2個([[ 条件式 ]])の条件式でAND条件「-a」が使えない件(回避方法あり)

```bash
$ [[ 11 -eq 11 -a "bb" = "bb" ]]; echo $?
-bash: syntax error in conditional expression
-bash: syntax error near `-a'
```

怒られた。

```bash
$ [[ 11 -eq 11 && "bb" = "bb" ]]; echo $?
0
```

`&&`だといいみたい。

orも

```bash
$ [[ 11 -eq 11 -o "bb" = "ab" ]]; echo $?
-bash: syntax error in conditional expression
-bash: syntax error near `-o'

$ [[ 11 -eq 11 || "bb" = "ab" ]]; echo $?
0
```
lua-nginx-module で forward proxy

https の GET リクエストを、Nginx からの転送時に forward proxy サーバを通して送信してみました。
（チャンク形式には対応させてません）

はじめに、ngx.socket.tcp() を使用して、CONNECT メソッドを foward proxy サーバに送信して、トンネルを確立してから、
sock:sslhandshake() で SSL 接続を開始して、リクエストを送信し、受信した応答をクライアントに送っています。

```lua
local host = ngx.var.dest_host
local port = tonumber(ngx.var.dest_port)
local proxy_host = ngx.var.proxy_host
local proxy_port = tonumber(ngx.var.proxy_port)


local sock = ngx.socket.tcp()
sock:settimeout(1000)
local ok, err = sock:connect(proxy_host, proxy_port)

local uri = string.format('CONNECT %s:%s HTTP/1.1', host, port)
local header = string.format('Host: %s:%s', host, port)
local request = table.concat({uri, header}, '\r\n') .. '\r\n\r\n'
local bytes, err = sock:send(request)
local data, err, partial = sock:receive('*l')
if err then
    ngx.log(ngx.DEBUG, err)
    ngx.exit(ngx.HTTP_BAD_REQUEST)
end

local m, err = ngx.re.match(data, '^HTTP/1\\.(0|1) 2\\d{2}\\s.+')
if err then
    ngx.log(ngx.DEBUG, err)
    ngx.exit(ngx.HTTP_BAD_REQUEST)
end


local session, err = sock:sslhandshake()
local method = ngx.req.get_method()
local uri = string.format('%s %s HTTP/1.1', method, ngx.var.uri)
local header = string.format('Host: %s:%s', host, port)
local request = table.concat({uri, header}, '\r\n') .. '\r\n\r\n'
local bytes, err = sock:send(request)
local iter = sock:receiveuntil('\r\n\r\n')

local data, err, partial = iter()
if err then
    ngx.log(ngx.DEBUG, err)
end


local header, n, err = string.gsub(data, '^\r\n', '')
local m, err = ngx.re.match(header, 'Content-Length:\\s(.+)', 'i')
if err then
    local ok, err = sock:close()
    if err then
        ngx.exit(ngx.HTTP_BAD_REQUEST)
    end
    ngx.exit(ngx.HTTP_BAD_REQUEST)
end

if not m[1] then
    ngx.exit(ngx.HTTP_BAD_REQUEST)
end

local length = tonumber(m[1])
local body, err, partial = sock:receive(length)
if err then
    local ok, err = sock:close()
    if err then
        ngx.exit(ngx.HTTP_BAD_REQUEST)
    end
    ngx.exit(ngx.HTTP_BAD_REQUEST)
end

local ok, err = sock:close()
if err then
    ngx.exit(ngx.HTTP_BAD_REQUEST)
end

local iter, err = ngx.re.gmatch(header, '(.+):\\s*(.+)')
while true do
    local m, err = iter()
    if err then
        ngx.exit(ngx.HTTP_BAD_REQUEST)
    end

    if m then
        if m[1] then
            local from, to, err = ngx.re.find(m[1], 'content-length', 'i')
            if err then
                ngx.exit(ngx.HTTP_BAD_REQUEST)
            end

            if not from then
                ngx.header[m[1]] = m[2]
            end
        end
    else
        break
    end
end

ngx.print(body)
ngx.exit(ngx.HTTP_OK)
```
AutoLayoutを画面と割合指定する方法

# AutoLayoutには悩まされた
アプリ開発で、凄く苦戦したAutoLayoutですが
全て、ピクセル指定してたからたまに隙間がでたりして
わけがわからない。
そもそも、AutoLayoutなのにAutoじゃなくね？って思ったりもした。
先日やっと、画面との割合で指定する方法がわかったのでTipsします。

# 実際にやってみる

とりあえず、Testプロジェクトとか作って、Storyboardを開く

![スクリーンショット 2015-05-17 0.31.45.png](https://qiita-image-store.s3.amazonaws.com/0/60014/392c4986-2151-bd0c-f27c-de22f31a3aba.png)

大本のViewの上に適当にUI配置
ボタンでやってみます
で、Viewとボタンを一緒に選択した状態で

![スクリーンショット 2015-05-17 0.32.07.png](https://qiita-image-store.s3.amazonaws.com/0/60014/425b7ddd-ca8e-2761-30fa-553c1c6c217d.png)

Equal Widths と Equal Heights を選択してAdd

![スクリーンショット 2015-05-17 0.32.50.png](https://qiita-image-store.s3.amazonaws.com/0/60014/45314b2d-97c7-4f4e-0c28-35e8a1b2abd3.png)

Constraintsが追加されてるので、選択してみる

![スクリーンショット 2015-05-17 0.33.51.png](https://qiita-image-store.s3.amazonaws.com/0/60014/d72b946f-e0d0-bf52-e248-d7e8b222470f.png)

詳細が表示されるので
First Item を　配置したUI
Second Item を　大本のViewに設定

なってない場合は

![スクリーンショット 2015-05-17 0.34.24.png](https://qiita-image-store.s3.amazonaws.com/0/60014/b14e5c3a-b891-fd64-e852-94bcaac9423b.png)

Reverse First And Second Itemを選択すると逆になる

![スクリーンショット 2015-05-17 0.34.53.png](https://qiita-image-store.s3.amazonaws.com/0/60014/c180ed52-138c-b17b-0097-d4c53695afc4.png)

Multiplierが1の状態で最大なので、0.5に設定すると
大本のViewのサイズの50％でボタンが表示されます
横幅が設定できたので縦も同じように設定してください

![スクリーンショット 2015-05-17 0.37.41.png](https://qiita-image-store.s3.amazonaws.com/0/60014/ad7c8002-8c1d-5025-7f72-fc1ad038330d.png)

ボタンを選択して
綺麗に中央揃えにしてみると


![スクリーンショット 2015-05-17 0.35.05.png](https://qiita-image-store.s3.amazonaws.com/0/60014/512a5d15-346e-7bbb-9443-01596d1df9a4.png)

で、Update Framesをおして

![スクリーンショット 2015-05-17 0.35.47.png](https://qiita-image-store.s3.amazonaws.com/0/60014/302a84f8-1139-9f84-d502-8a54cec973dd.png)

ジャーン！！

やったね、これで各画面でビルドした時にボタンの範囲がViewの50％で表示されます。
ローカルでのXAMPP使用　⚠注意点⚠

<SECTION><H1>ローカルでのXAMPP使用　⚠注意点⚠</H1>

<h2>プラグイン、テーマのインストール時XAMPPのftpログイン認証を求められる</h2>
XAMPPのダウンロード方式を直接ダウンロードへ変更しましょう。
１．Wordpressのインストールフォルダ／wp-config.php
２．末尾にdefine('FS_METHOD', 'direct');を追加

<h2>プラグイン、テーマのインストール時ディレクトリを作成出来ないエラーが発生</h2>
メッセージ内の対象ディレクトリのパーミッションを変更しましょう。とりあえず、everyoneをフルコントールにします。
この手のエラーは大抵、パーミッションで解決します。</SCTION>
＜?php wp_head(); ?＞の役割

<h1>＜?php wp_head(); ?＞の役割</h1>

WordPressのheader.phpには、＜/header＞の直前に＜?php wp_head(); ?＞が入りますね。

これはどうやら、WordPressに必要なメタ情報、JQUERYのインストールを主にしている様子です。
また、各種プラグインはこれを前提に動いているので、<strong>＜?php wp_head(); ?＞が抜けているとプラグイン、悪ければテーマも動きません。

入れる位置は、＜/head＞の直前です
注意しましょう・・・・。
XAMPPにWordPressをインストール！

<h1>XAMPPにWordPressをインストール！</h1>
　ローカル環境にWordPessを構築します。これでレンタルサーバ等のWEB環境を準備する必要が無くなりそうです。事前に<A HREF="http://qiita.com/Tatsuyoshi/items/52777814856d226967f3">XAMPPをインストール</A>しておいてください。

<h2>導入手順</h2>
<H3>１．WordPessのダウンロード</H3>
　<A HREF="https://ja.wordpress.org/">こちら</A>の公式サイトよりWordPessをダウンロードします。ダウンロードファイルはzip形式で圧縮されているので解凍します。解凍ソフトがない場合は準備してください。
<H3>２．ローカルホストへwordpressフォルダを入れる</H3>
　ここから少しXAMPPの話も入ってきます。XAMPPは、ローカル環境へ仮想的にWEBサーバ構築しています。そのサーバの中へ先ほど解凍したWordPressを保存します。具体的には以下の「htdocs」フォルダの中へ保存します。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/78033/1c227648-6ead-30fc-563a-cf51ff9f9c3a.png)
イメージとして、この「htdocs」の中が、「http://dummy.com/」
になります。

<h2>XAMPPを設定する</h2>
　次にワードプレスの設定に入る前に、一つ準備することが有ります。XAMPPのDBに、WordPress用のデータベースを準備しておきます。
<H3>１．PHPMyAdminへアクセスする</h3>
　以下のローカルホストの画面より、PHPMyAdminをクリックします。ここで混同しやすいのは、このPHPMyAdminという名前です。名前はPHPMyAdminですが、中身は普通にsqlの管理画面です、phpの管理画面ではありません。
![スクリーンショット 2015-05-17 0.00.14.png](https://qiita-image-store.s3.amazonaws.com/0/78033/607358b4-496b-1894-9e60-ecc91c2e016e.png)

<H3>２．データベースの作成</h3>
　実際にWordPressで使用するDBの作成をします。画面内、データベースをクリックします
![スクリーンショット 2015-05-16 20.25.32.png](https://qiita-image-store.s3.amazonaws.com/0/78033/3ed764c9-70d6-f48f-fae9-9073e9abed1b.png)
　「データベースを作成する」より、データベース名に任意のDBの名前(WPなど)を入力し、照合順序に「utf_gernal_ci」を選択し作成ボタンをクリックします。照合順序については、utf_gernal_ciを一般的に利用します。
![スクリーンショット 2015-05-16 20.26.15.png](https://qiita-image-store.s3.amazonaws.com/0/78033/bce65cb3-ee40-8df1-792c-6968a94fadc1.png)


<H3>３．WordPressをインストール</H3>
　ではWordpressをインストールします。htdocsは擬似的
「http://dummy.com/」
ということを解説しましたが、ここでイメージとして、このサーバの中にあるWordPressディレクトリへアクセスすると考えてください。つまり・・・
「http://localhost/wordpress」
をブラウザへ入力し、インストール画面に入ります。
<small>※XAMPPでApache等起動させておいてください。</small>

ここからは、<a href="http://www.adminweb.jp/wordpress/install/index4.html">通常のWordPressのインストール</a>とかわりはありません。

⚠注意点⚠
１．DBのログイン情報を以下にします
USER:<strong>root</strong>
PASS:<strong>空欄</strong>
これは、先ほどTABLEを作りましたが、ログイン情報を特に設けていない為です。
２．ディレクトリの作成に失敗する
htdocsのパーミッションをeveryone➞777にしてください。（読み／書き,フルコントール）
Androidで課金テストをするために必要な事


- Google Play Console にて課金アカウントを有効にする
- Google Play Console にてアプリを作成する
- Google Play Console にて署名したアプリをβ版上にアップロードする
- Google Play Console にて必要な情報を記入し、β版を公開する（記入する情報はダミーでも可。Google上で公開するための準備に入る）
- Google Play Console にてβ版を公開されるまで待つ（1~2時間程度）
- Google Play Console にてテストアカウントを設定する
- おわり！


-「認証が必要です。Googleアカウントにログインしてください。」と言われた場合
->公開 or テストアカウントの追加　に時間がかかっているかもしれないので少し待つ
->テストアカウントで端末にログインしているか確認する(後から追加登録したアカウントで課金テストするには、端末の初期化しなくてはならない！)
->指定しているプロダクトIDがandroid.test.purchasedだと認証が〜〜と言われる事があるので、本番用のIDに差し替えておく

課金テスト頑張って＞＜
CodeEval - Swap Numbers

[Swap Numbers - CodeEval](https://www.codeeval.com/open_challenges/196/)
汚い。

```swap_numbers.rb
File.open(ARGV[0]).each_line {|line|
    input_line = line.chomp.split(" ")
    output_line = []
    input_line.each{|word|
        swap     = word.dup
        swap[0]  = word[-1]
        swap[-1] = word[0]
        output_line << swap
    }
    puts output_line.join(" ")
}
```
CodeEval -Fizz Buzz-

[Fizz Buzz - CodeEval](https://www.codeeval.com/open_challenges/1)
`Ruby 1.9.3` だった。もっとすっきりと書けそう。

```rb
File.open(ARGV[0]).each_line {|line|
    l = line.chomp.split(" ")
    x, y, n = l[0].to_i, l[1].to_i, l[2].to_i
    str = []
    (1..n).each{|t|
        if (t.modulo(x) == 0 ) && (t.modulo(y) == 0 )
            str << "FB"
        elsif (t.modulo(x) == 0 ) && (t.modulo(y) != 0 )
            str << "F"
        elsif (t.modulo(x) != 0 ) && (t.modulo(y) == 0 )
            str << "B"
        else
            str << "#{t}"
        end
    }
    puts str.join(" ")
}
```
Cocos2d v3 導入編

# 初めに
僕はCocos2dに出会ってからiPhoneアプリでゲームを作るのがとても楽になった。
ただ、Cocos2dの文献は非常に少なく情報収集に苦労をしたので僕が得た情報をフィードバックしておく。
これからiPhoneでゲームを作ろうとしている人のお役に立てれば幸いである。

現在「Space Debris」というゲームの申請をしていて、そこで得たノウハウをここに記載しておく。
これから「Space Debris」の上位版（難易度が高い）のゲームを作っていく形で本連載を行っていく。
（不明な点はコメントに記載していただければ回答いたします。）

Cocos2dにはCocos2d-xというiPhone/Androidのゲームが両方同時に作れるものがあるが、ここで対象としているのはiPhoneゲームの作成のみを行うのでCocos2dに関してだけ書きます。
Cocos2d-xは僕の知見が無いのとAndroid端末を、僕が持っていないため本連載では一切触れません。
Cocos2d-xの仕組みはCocos2dと同じなので、Cocos2d-xの文献は非常に役に立ちます。困った時はCocos2d-xの文献を読んで下さい。
（Cococs2d-xの記事は結構多いので、困ったときはCocos2d-xの記事を参考にするといいかと思います。ただし、Cocos2d-xはC++で書かれているのでその点には注意が必要です。）

僕はQiitaに記事を投稿するのは初めてなので、書き方とかで変なところがあったら教えていただけると助かります。

# 前提条件
本記事を読む前に以下の準備をしておいてください。
なお、本連載では`Swift 1.3`を使用して進めます。
`objectiv-c`や`Swift 1.3`より前で開発を行う場合は、適時読み替えて下さい。
`objective-c`でも問題無いのだが、新規で作成するなら将来性を考えて`Swift 1.3`で進めていく事をお勧めします。
※Swiftは1.3と1.2でずいぶん仕様が変わっており、Swift1.3のほうが使いやすくなってます。なので、理由がない限りはSwiftも1.3を使用することをお勧めします。

## `XCode 6.3`のインストール
この記事を読もうとしている方はすでにXCodeのインストールが済んでいるかと思いますが、まだの方はインストールしておいてください。
本記事では割愛しますが、ここで困ることはないと思います。

## CocoaPodsのインストール
Rubyで言うGem、JavaでいうMavenです。
プロジェクトで扱うライブラリを管理してくれる優れたツールです。
今回はiOS 7.0以降を対象とするため、Swift用のライブラリは使用しません。
（Cocoa Touch FrameworkはiOS 8.0以降が対象になってしまうので。）

## Sprite Builderのインストール
Sprite BuilderはAppStoreからインストールできます。

こちらからアクセスしてダウンロード/インストールしてください。
https://itunes.apple.com/us/app/spritebuilder/id784912885?mt=12

公式ページ（リンク先のTOPにはゲーム画面が表示されるので仕事中の方はリンクを踏まない方が良いですw）
http://www.spritebuilder.com/

## 今回作るゲーム
今回はバルーンショットというゲームを作成する予定です。
もともと僕が作っている

![id995207358.png](https://qiita-image-store.s3.amazonaws.com/0/79216/c0a0da78-4bac-2257-9a1d-0594e953ba1e.png)
[Space Debris](https://itunes.apple.com/jp/app/id995207358)
というゲームの続編になります。

これをやっていただければどんなゲームを作ろうとしているか想像がつくかと思います。

## 作成日記
[7日でiPhoneアプリ(Swift)を作ってみた](http://ameblo.jp/syou007/entry-12032366040.html)

# プロジェクトの作成
今日の目標はSprite Builderでプロジェクトを作ってシミュレーターで動かすところまでにします。
驚くくらいあっという間に終わります。

## SpriteBuilderを起動
「File」→「New」→「Project」
を行ってプロジェクトを作成します。
`ShootBalloon.spritebuilder`というプロジェクト名で作成してください。

作成する際に`Primary Language`を選択できるので`Swift`を選択してください。

## XCodeにPublishします。
![screenshoot.png](https://qiita-image-store.s3.amazonaws.com/0/79216/922d0fda-90fc-aa5d-8dae-fea1993191c4.png)

作成された画面、左上の赤丸を押してください。
これでXCodeのプロジェクトにSpriteBuilderで作成したファイルが送られます。

作成した`ShootBalloon.spritebuilder`フォルダの中に`ShootBalloon.xcodeproj`が出来てますのでXCodeで開いて実行してみてください。

今回はここまでになります。

## SpriteBuilderとは？
SpriteBuilderの位置付けはxibに似てます。
ゲームは一般的なアプリに比べて描画速度が求められます。
そのためにOpenGLというレンダリングエンジンが使われるのですが、その描画部分(View)を担ってくれるのがSpriteBuilderになります。

OpenGLはプログラムが難しく素人には手が出しずらく、プログラムコード量も膨大になります。
それを簡潔に表現出来るようにしたものがCocos2dになります。
Cocos2dフレームワークのアニメーションはCocoaよりもはるかに洗練されています。


# つぎは？

[SpriteBuilderでできたもの](http://qiita.com/syou007/items/1cd8b0d2deeb5acd38f1)の中身を見ていきます。

# TownSoftって？
[TownSoft](http://townsoft.jp/)は僕の屋号です。
主にRailsでお仕事を請け負ってます。
Webシステムの導入をご検討の方は是非TownSoftまで！
誰かECT-lint作らないかな

いや、検索結果汚し申し訳ありません。爆速テンプレートエンジンECT、遊ぶ分にはいいのだが、ガチ利用するには怖すぎます。誰か、npm install -g ect-lintでさくっとインストールして、ぶびびっとわかりやすく文法エラーを吐き出したり、引数不足とかを実行時にHTML内に吐き出してくれるようなコードを埋め込んでくれたりするといいなあ。

ああ、ありがたい。前もって拝んでおきます。

誰か。
MVC-BeanとEclipseの問題　- jsp:useBean データ型が解決できません。cannot be resolved to a type

しばらく、MVCJavaBeanのプログラムを作っていませんでした。作ってみると、やっぱり、赤いコンソールが表示されました。
環境：
Eclipse 4.2 Juno （日本語版-Ultimate-JREなし-Standard)
Tomcat 7.0
Java JDK 7u79
Postgresql 9.1
Postgresql Connector 9.1-903 JDBC 3
フォルダー構築
[src]-[syain]--DBServlet.java 
[src]-[syain]--searchDB.java 
[src]-[syain]--syainDAO.java 
[src]-[syain]--syain.java (DTO class)

[WebContent]--[syain]-- syain.html 
[WebContent]--[syain]-- syain.jsp

<code>
 データ型が解決できません...エラーｘｘ行目...syain.jsp
 < jsp:useBean id="searchDB" class="syain.searchDB" scope="session" />
</code>

<code>
 cannot be resolved to a type ...xx lines...syain.jsp
 < jsp:useBean id="searchDB" class="syain.searchDB" scope="session" />
</code>

Googleで調べてみて、class="package.classname" 規則を守らないと実行できないということがわかりました。
ですが、なんで、エラーが発生したのか、原因がぜんぜんわかりません。

うううう。。。。
Eclipseのせい、自分が書いたコードのせい。。。何時間もかけて調べました。

最後に、結局、自分のせいでした。
原因は：
<b> package名とpackageの中のクラス名は同じです。</b>
この場合は、syain package と　DTOクラス syain.java です。


大変でした。
「すくすくスクラム広島第11回「プロダクトバックログ」を作ろう」参加したよ

https://sukusuku-scrum-hiroshima.doorkeeper.jp/events/24552

２ヶ月ごとに開催されているすくすくスクラム広島に参加したよー。

マインドマップでメモをとることで、マインドマップの練習とスクラムについて勉強の一石二鳥作成。

![プロダクトバックログについて.png](https://qiita-image-store.s3.amazonaws.com/0/53620/25b47cf4-8671-f979-e8d3-db12a39d37e6.png)

以下の２点が記憶に残りました。

* プロダクトバックログの優先順位をどう決めるのか
* どのように運用していくのか

プロダクトオーナーがプロダクトバックログの優先順位について責任を持つのは、わかってるんだけど、プロダクトオーナーが「任せた」状態だったりしますもんね。
ヒアリングすれば、本当の優先順位が見えて来そうな気もしますが、、、

「任せた」状態でも、それなりに回ってたりするんですよね。リーダーポジションの人が優先順位を決めて、メンバーが指摘したりして。

ぼくは、優先順位を決めるときには、重要だが緊急でない活動を重視するようにしています（するようになりたいです！！）。

運用については、Trello と Github の Issue を利用した方法を説明してもらいました。
普段、Redmine backlogs プラグインを使っているため、運用方法を比較でき、イメージしやすかったです。

さっそく Trello のアカウントを作ったので、試してみます。
Redmine backlogs プラグインのやり方にこだわらず、Trello ならではの活用方法を見つけてやる！
いきなり上手に使える訳はないので、一人プロジェクトで練習してコツをつかんでから、実プロジェクトに適用したいなー。
[VBA]リストから定型フォーマットにデータをコピペする方法

#概要
定型フォーマットに結果を入力して何千枚もの書類を作成することがよくあります。これをエクセルファイルをひとつひとつ開いて入力していると、入力ミス、全角半角の間違いなどがおきやすくなります。またページの挿入・削除によるページ数の変更対応に時間がかかるなど修正の面でも問題が生じてきます。
このような業務においては、定型フォーマットに入力するデータをリストで一括管理し、変更が生じたらリスト上で編集するべきです。レコードの挿入や削除も、リスト上なら簡単に行えます。
書類の作成は変更対応が終了してから、リストからフォーマットへVBAを用いてコピーします。ここではその方法を説明していきたいと思います。


##リストデータの読み込み
ID、名前、生年月日を登録した名簿があります（実際にはもっといろいろな項目があるでしょう)。エクセルの一行目にレコード名、二行目からデータが入力されていると仮定します。

| ID| 名前 | 生年月日
|:--|:--|:--
1|若杉 洋|2014/9/16
2|川中 貴美子|2014/9/14
3|原 恭子|2015/4/8
…|…|…

まずはこのリストが保存されているエクセルファイルの標準モジュールにVBAを記述していきます。

```vbnet:Module1
Sub ReadList()
Dim listWorksheet As Worksheet
Set listWorksheet = ThisWorkbook.Sheets(1)
Debug.Print ( _
listWorksheet.Cells(2, 1) & "," & listWorksheet.Cells(2, 2) & ", " & listWorksheet.Cells(2, 3))
End Sub

```

これを実行するとイミディエイトウィンドウにコンマ区切りでデータが表示されるはずです。
>1,若杉 洋, 2014/09/16

これで、リストのデータを読み込めていることが確認できました。

##フォーマットへの貼り付け
罫線やセルの塗りつぶし、オートシェイプなどで装飾された独自のフォーマットがそれぞれの組織で用意されていると思います。ここでは、IDをB2セル、名前をC2セル、生年月日をD2セルに入力することになっているとします。リストファイルと同じフォルダ内に、"format.xls"の名前で空白のワークシートを用意します。**(D2セルだけは事前にセルの表示形式を日付形式にして、少しだけ列の幅を広げておきます。)**

```vbnet:Module1
Sub OpenFormatSave()
Dim copyWorkbook As Workbook
Dim inputWorksheet As Worksheet
Set copyWorkbook = Workbooks.Open("format.xls")
Set inputWorksheet = copyWorkbook.Sheets(1)
inputWorksheet.Range("B2") = "1"
inputWorksheet.Range("C2") = "若杉 洋"
inputWorksheet.Range("D2") = "2014/9/16"
copyWorkbook.SaveAs Filename:="copy_ID_1.xls"
End Sub
```

これを実行すると、同フォルダ内に"copy_ID_1.xls"が作成されており、ワークシートのB2,C2,D2セルに値がコピーされています。また、フォーマットのエクセルファイルを直接開いて値を入力して別名で保存しているので、フォーマットのファイル自体は残っています。

##データ読み込みと貼り付けを繰り返し行う

さて、あとは上の二つのコードを組み合わせて繰り返すだけです。以下の点を考慮しながらコードを完成させていきます。

+ データは2行目から始まる。
+ 最終行は何行目かわからないので、データがある行まで処理を続けることにする。
+ その行にデータがあるか無いかは、IDの行が空白かどうかで判断する。
+ データをコピーしたファイルはIDに対応したファイル名を付けて保存する。

```vbnet:Module1
Sub ListToFormat()
Dim copyWorkbook As Workbook
Dim inputWorksheet As Worksheet
Dim listWorksheet As Worksheet
Set listWorksheet = ThisWorkbook.Sheets(1)
Dim i As Long
i = 2
Do While (listWorksheet.Cells(i, 1) <> "")
Set copyWorkbook = Workbooks.Open("format.xls")
Set inputWorksheet = copyWorkbook.Sheets(1)
inputWorksheet.Range("B2") = listWorksheet.Cells(i, 1)
inputWorksheet.Range("C2") = listWorksheet.Cells(i, 2)
inputWorksheet.Range("D2") = listWorksheet.Cells(i, 3)
copyWorkbook.SaveAs Filename:="copy_ID_" & listWorksheet.Cells(i, 1) & ".xls"
copyWorkbook.Close
i = i + 1
Loop
End Sub
```

同じフォルダ内にデータの個数分のエクセルファイルが作成されたでしょうか。

##おわりに
今回はリストからフォーマットへ値をコピーすることにのみ集中しましたが、実務ではより複雑な処理を求められるでしょう。

* より多くの項目への対応
* 複数のリストファイルを参照
* 男性の場合～、女性の場合～、などの条件による処理の分岐
* 体重からBMIを求めるなどの計算、またその合否判定、など・・・


処理が複雑になっても、ワークシートやブックを適切に選択し、必要なプロパティやメソッドを調べ、If文For文で処理を制御すれば対応できるでしょう。ただし、一つのSub内でそれらすべてを記述するとコードの見通しが悪くなり、変更への対処が難しくなってきます。そこで、ユーザー定義型や列挙型、コレクション、クラスモジュールなどを用いて適切に記述を分散して簡略化することが重要になります。

##参考


MSDN: [Excel オブジェクト モデルの概要](https://msdn.microsoft.com/ja-jp/library/wss56bz7.aspx)
国土交通省のシェイプ形式データから全都道府県市町村郡区のGeoJsonとTopoJsonを作成。

#日本全国シェイプ形式データ入手

国土交通省のサイトから全国のデータをダウンロード。
http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html
シェイプ形式のデータを使います。

~~~ シェイプ形式をGeoJsonへ変換
% brew install gdal
% which ogr2ogr
/usr/local/bin/ogr2ogr
% ogr2ogr -f GeoJSON places.json N03-14_140401.shp
~~~

#日本全国GeoJson解体

places.jsonはサイズがかなり大きいので県、市、町、村、郡、区単位に分割。

~~~
ruby split_geojson.rb
~~~

~~~  split_geojson.rb
require 'json'
require 'fileutils'

class GeoJsonToCity

  def initialize()
   @datas = {}
   Dir.glob('places.json').each do |path|
      io = File.open(path)
      str = io.read(nil, '')
      json = JSON.parse(str)
      features = json['features']
      features.each do |feature|
        # 名称抽出
        city = self.checkCity(feature['properties'])
        # 都道府県
        self.setData(city[0], feature)
        # 市町村1
        self.setData(city[1], feature)
        # 市町村2
        if !city[2].nil?
          word = city[1] + city[2]
          self.setData(word, feature)
        end
      end
    end
  end

  def setData(key, feature)
    if !key.nil?
      if !@datas.has_key?(key) then
        @datas[key] = []
      end
      @datas[key].push(feature)
    end
  end

  def checkCity(prop)
    cityList = []
    pref  = prop['N03_001']
    city1 = prop['N03_002']
    city2 = prop['N03_003']
    city3 = prop['N03_004']
    cityList.push(pref)
    if !city1.nil? && pref != '北海道'
      cityList.push(city1)
    end
    if !city2.nil?
      cityList.push(city2)
    end
    if !city3.nil?
      cityList.push(city3)
    end
    return cityList
  end

  def make
    @datas.each do |city, collection|
      data = {"type": "FeatureCollection", "features": []}
      data["features"] = collection
      addr = self.checkCity(collection[0]['properties'])
      pref = addr[0]
      FileUtils.mkdir_p('geojson/' + pref)
      File.open('geojson/' + pref + '/' + city + '.json', 'w').write(JSON.generate(data))
    end
  end
end

city = GeoJsonToCity.new
city.make()

~~~

#日本全国TopoJson作成

GeoJsonよりサイズの小さいTopoJsonを作成します。
TopoJsonはd3.jsとかで使えます。

~~~
% npm install -g topojson 
% topojson --version
1.6.19
~~~

富山県のGeoJsonをTopoJsonへ変換。

id属性に氷見市、朝日町、富山市…を付与。

~~~
% topojson --id-property N03_004 -p NAME=name -p name -o toyama.topojson geojson/富山県/富山県.json
~~~

全国分をシェルで一括作成しました。

~~~ geojson_to_topojson.sh
#!/bin/bash

find ./geojson -type f | while read file
do
    arr=( `echo $file | tr -s '/' ' '`)
    pref=${arr[2]}
    # ディレクトリ
    dir="topojson/"$pref
    if [ ! -d $dir ]; then
      mkdir -p $dir
    fi
    basename=$(basename $file)
    name=( `echo $basename | sed -e "s/\.json/.topojson/"`)
    #echo $name
    topojson --id-property N03_004 -p NAME=name -p name -o $dir"/"$name geojson/$pref/$basename
done
~~~


Githubに全国の都道府県、市町村、郡、区単位のGeoJson,TopoJsonを設置しました。
https://github.com/niiyz/JapanCityGeoJson