OmniAICreator/Qiita-1.07M huggingface dataset:
apache 2.4系のwebsocketが通るまでの構築手順

# apacheの最新版インストール
```bash
### リポジトリ追加
$ sudo yum erase httpd

### pcreをインストール
$ sudo yum install pcre pcre-devel
 
$ cd /tmp
 
### aprインストール。これがないと、httpdインストール時に下記エラーが出る。
### configure: error: APR not found.  Please read the documentation.
$ wget http://ftp.tsukuba.wide.ad.jp/software/apache//apr/apr-1.5.1.tar.gz
$ tar zxvf apr-1.5.1
 
### apr-utilのインストール。同様
$ wget http://ftp.kddilabs.jp/infosystems/apache//apr/apr-util-1.5.4.tar.gz 
$ tar zxvf apr-util-1.5.4.tar.gz
 
### httpdインストール
$ wget http://ftp.riken.jp/net/apache//httpd/httpd-2.4.12.tar.gz
$ tar zxvf httpd-2.4.12.tar.gz
 
### 移動した後も、apr apr-utilと名前を変えないとインストール出来ないというね。。
$ sudo cp -Rp apr-1.5.1 httpd-2.4.12/srclib/apr
$ sudo cp -Rp apr-util-1.5.4 httpd-2.4.12/srclib/apr-util
 
$ cd httpd-2.4.12
### 2.4からはデフォルトではevent_mpmです。今まで通りpreforkを使いたい場合は、--with-mpm=preforkを付けてください
$ sudo ./configure --enable-rewrite --enable-so --enable-ssl --with-mpm=prefork --with-included-apr
$ sudo make
$ sudo make install
 
### /usr/local/apache2/にインストールされます
### ServerNameを決めて、起動します
$ vim /usr/local/apache2/conf/httpd.conf
-#ServerName www.example.com:80
+ServerName www.example.com:80
 
$ sudo /usr/local/apache2/bin/apachectl configtest
Syntax OK

### 起動 
$ sudo /usr/local/apache2/bin/apachectl start
```

#動いた！
![スクリーンショット 2015-02-13 10.38.14.png](https://qiita-image-store.s3.amazonaws.com/0/29405/9ddf59a6-d495-858c-83e2-53c5ca634e9d.png)

#websocketが通るように設定する
```bash
### websocketが通すようにする
$ vim /usr/local/apache2/conf/httpd.conf
-#LoadModule proxy_module modules/mod_proxy.so
-#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
-#LoadModule proxy_http_module modules/mod_proxy_http.so
-#LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
 
+LoadModule proxy_module modules/mod_proxy.so
+LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
+LoadModule proxy_http_module modules/mod_proxy_http.so
+LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
 
 
-#LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
+LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

### 今回はrailsでwebsocketを使った簡易アプリを10.29.7.5に建てました。
### そこに通す設定です。 
+ProxyPass / ws://10.29.7.5:3000/
+ProxyPassReverse / ws://10.29.7.5:3000/

### テスト 
$ sudo /usr/local/apache2/bin/apachectl configtest
Syntax OK

### 再起動
$ sudo /usr/local/apache2/bin/apachectl restart
```

#アクセスできた！
websocketも通りました。
swiftでデバッグログ

objective-cの時に使用していたdebug時のみログを吐き出すマクロをswiftで使えるようにしてみた。


### project設定を編集
`Build Setting`内の`Other Swift Flags`に
`-DDEBUG`を設定する。

![sample.png](https://qiita-image-store.s3.amazonaws.com/0/61909/972141cf-f7b5-b057-8e31-18ff56b5ad3f.png)

### 実装

```swift:log.swift
func debugLog(_ obj: Any?,
              file: String = #file,
              function: String = #function,
              line: Int = #line) {
    
    let fileName = URL(string: file)?.lastPathComponent ?? "unknown"

    #if DEBUG
        if let o = obj {
            print("[\(fileName):\(function) Line:\(line)] : \(o)")
        } else {
            print("[\(fileName):\(function) Line:\(line)]")
        }
    #endif
}

```

### 使い方

```swift
let hoge = Hoge()
debugLog(hoge)

```
【PHPMyAdmin】PHPMyAdminでデータをCSVでエクスポートする方法


## PHPMyAdminへログイン
下記PHPMyAdminの画面からPHPMyAdminへログイン。
ログインのIDとPASSWORDは、MySQLのユーザ名とパスワード。


![PHPMyAdmin_Export_01.png](https://qiita-image-store.s3.amazonaws.com/0/18615/f7bf3009-1327-a81e-d282-58706dc1d9ce.png "PHPMyAdmin_Export_01.png")


## 左カラムから操作したいDBスキーマを選択

![PHPMyAdmin_Export_02.png](https://qiita-image-store.s3.amazonaws.com/0/18615/77e7f550-09d6-10ed-7f8e-827ddad5a99e.png "PHPMyAdmin_Export_02.png")


## 左カラムから操作したいテーブルを選択

![PHPMyAdmin_Export_03.png](https://qiita-image-store.s3.amazonaws.com/0/18615/b06c46d1-30d6-abf2-e600-fef5a42f537a.png "PHPMyAdmin_Export_03.png")


## 上部タブメニューから「エクスポート」を選択

![PHPMyAdmin_Export_04.png](https://qiita-image-store.s3.amazonaws.com/0/18615/061e0a93-d948-73a6-f4d6-4890f92fd40d.png "PHPMyAdmin_Export_04.png")


## データフォーマットを変更するためにセレクトメニューを選択

![PHPMyAdmin_Export_05.png](https://qiita-image-store.s3.amazonaws.com/0/18615/e55b5497-6537-d73f-81ca-4ff804862041.png "PHPMyAdmin_Export_05.png")


## データフォーマットでCSVを選択

![PHPMyAdmin_Export_06.png](https://qiita-image-store.s3.amazonaws.com/0/18615/5dfc1c47-7f69-979b-880a-f57120bfb4df.png "PHPMyAdmin_Export_06.png")

## 実行を押してCSVデータをダウンロード

![PHPMyAdmin_Export_07.png](https://qiita-image-store.s3.amazonaws.com/0/18615/7341dba8-8488-5762-dfd4-3e8f8535bb9a.png "PHPMyAdmin_Export_07.png")

## ファイルに名称を付けてCSVファイルをダウンロード

![PHPMyAdmin_Export_08.png](https://qiita-image-store.s3.amazonaws.com/0/18615/a36b7a94-e38e-25f2-b937-7ea6e6d6d9d5.png "PHPMyAdmin_Export_08.png")

## ダウンロードしたファイルをダブルクリックして開く
 
![PHPMyAdmin_Export_09.png](https://qiita-image-store.s3.amazonaws.com/0/18615/c1022832-46f1-6893-9cbf-006c82842c40.png "PHPMyAdmin_Export_09.png")


## CSVが表計算ソフトで下記のように開かれていればOK

![PHPMyAdmin_Export_10.png](https://qiita-image-store.s3.amazonaws.com/0/18615/b59997ed-8d69-8b03-d7a9-7284b8ab5c75.png "PHPMyAdmin_Export_10.png")


# まとめ
PHPMyAdminでのデータベースのCSVファイルでのエクスポートプロセスです。
別途、CSVファイルをデータベースにインポートする方法を整理します。
composer create-project でインストールされるバージョンを指定する


Laravel 4 を create-project したいが、`create-project laravel/laravel`だと、最新版（Laravel 5）がインストールされてしまう場合。

下記のようにバージョンを指定すると、Laravel 4 がインストールできる。


```
$ composer create-project "laravel/laravel=~4.2" --prefer-dist .
```
ウェブ関連仕様 日本語訳まとめメモ

[W3Cの仕様書等の文書の日本語訳集](http://www.w3.org/Consortium/Translation/Japanese)

[W3C文書日本語訳の補完](http://www.akatsukinishisu.net/wiki.cgi?W3C%CA%B8%BD%F1%C6%FC%CB%DC%B8%EC%CC%F5%A4%CE%CA%E4%B4%B0)

[ウェブ関連仕様 日本語訳](http://www.hcn.zaq.ne.jp/___/WEB/)
Sublime Vintageでモードの切り替えをマッピングして快適な生活を送ろう


#概要
最近vimが使えたらいいなと思い始めて、とりあずsublimeをvimモードにしてみることにしました。
いやあ〜結構いいですね。いままでcuiではemacsしか使ってなかったのですが、慣れればhjklの移動は便利です。そのうち本家vimも使えるようになりたいですね。

まあ、それは置いとくとして、ひとつ問題があるとすればescキーが押しにくいこと。押そうとするするたびに指がつりそうになります。キーをマッピングするのに待ったなしです。

#素直にマッピング
[【Sublime Text】愛好家必読！Vim化しよう](http://uraramarry.blog.fc2.com/blog-entry-10.html)を参考に```esc```の代わりに```ctrl+j```を割り当てたのですが、あまりうまく行きません。インサートモードを抜けるには抜けるのですが、その後の一回目のキーが無効化されてしまったり、ビジュアルモードからは抜けれなかったりとイライラすることが結構起きてしまいました。
本家サイトに見てもこれでいいよ書いてあるので、自分の環境で何かしら競合しているのかもしれませんが、直し方がわかりませんでした。

#もうctrl+jをescにしましょう
みんな大好きkarabiner(元KeyRemap4MacBook)を使ってマッピングすることにします。
[Karabiner の private.xml 設定方法](http://qiita.com/altitude3190/items/bbef986ff8dd288b2641)を参考に```Karabiner>Misc&Uninstall>private.xml```を以下のように変更します。既に設定がある場合は```<root>```内だけを追記すれば大丈夫です。

```private.xml
<?xml version="1.0"?>
<root>
	<appdef>
		<appname>SUBLIME</appname>
		<equal>com.sublimetext.3</equal><equal>com.sublimetext.2</equal>
	</appdef>
	<item>
		 <name>sublime_esc</name>
		 <only>SUBLIME</only>
    <appendix>(+ When you type ctrl-j, send Escape)</appendix>
    <identifier>remap.ctrl_j_to_escape</identifier>
    <autogen>
    	--KeyToKey--
    	KeyCode::J,ModifierFlag::CONTROL_L,
    	KeyCode::ESCAPE
    </autogen>
	</item>
</root>
```

これで```ctrl+j```を押せばescが押されたことになります。引っかかりが消えて快適になりました(^o^)/
こうすると、マルチカーソルの解除なども```ctrl+j```で出来るので便利かもしれませんね。
Karabinerバンザイ！

#ついでに
Karabiner便利ですよね。
vimとか使ってるとj長押しで下に行ったりしますよね。ただあれ遅くないですか？
そんな時は```Karabiner>Key Repeat>Key Repeat```をデフォルトの83から30ぐらいまで落とすと高速になっていいですよ!
![スクリーンショット 2015-02-16 12.17.00.png](https://qiita-image-store.s3.amazonaws.com/0/34727/77f9cadb-835b-ab31-5f03-bc7d29edebe6.png "スクリーンショット 2015-02-16 12.17.00.png")



その他便利なKaranbierの設定があったら教えて下さい。

(「これってsublime vintageの記事ってよりKarabinerの記事になってね？」「(￣b￣) シーッ」)
BootStrap!!!!!!!!



default.ctpとは
-
HTMLの全体のことで<body>を構成しているのが、index.ctpになる
`<html>`
	`<head>`
	`</head>`
	`<body>`
	`・・・・・・・・`
	`・・・・・・・・・・`
	`</body>`
`</html>`


twitterbootstrapをしようする際はindex.ctpを編集していく




TwitterBootstrapの使用方法（CakePHP編）
-
#####①公式ホームページからダウンロード
・bootstrap-3.3.2などがダウンロードされる
・中身が、css/js/fontsになるので、それぞれをcakephp/app/webrootのcssはcss/jsはjs/fontsはそのままフォルダに入れる
・app/View/Layouts/default.ctpを編集


>// Twitter Bootstrap 3.0 CDN
`echo $this->Html->css('//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css');`
`echo $this->Html->css('style');`
`echo $this->Html->script('//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js');`
`echo $this->fetch('meta');`
`echo $this->fetch('css');`
`echo $this->fetch('script');`

****
>上記を下記に変更
cssとscriptの()内をbootstrapに変更
ファイルの名前がbootstrap.css/scriptなので、（）内がbootstrapに変わる

****
>//Twitter Bootstrap 3.0 CDN
`//echo $this->Html->css('cake.generic');`
`echo $this->Html->css('bootstrap');`
`echo $this->Html->script('bootstrap');`
`echo $this->fetch('meta');`
`echo $this->fetch('css');`
`echo $this->fetch('script'); `

#####②https://github.com/slywalker/cakephp-plugin-boost_cake
からプラグインをダウンロード
・プラグインはファイルを別のフォルダから読み込むもの
・あとはhttp://slywalker.github.io/cakephp-plugin-boost_cake/　
でEnable pluginとAdd helpersをそれぞれのファイルに書き込んで終了！！


Bootsnipp(CSS用)
-
Adobe AIR(or Flex)で条件付きコンパイル

ActionScript 3.0 の 条件付きコンパイル

http://see-take.blogspot.jp/2009/12/actionscript-30.html

Flash Builder 4 - Conditional Compile options

https://www.youtube.com/watch?v=Ew6h5iIdue4

Adobe Flex 4.6 - About the application compiler options

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7a92.html

Adobe Flex 4.6 - Using conditional compilation

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7abd.html

Flash/Flex conditional compilation “else”

http://stackoverflow.com/questions/2736411/flash-flex-conditional-compilation-else

Adobe Flash Builder 4.7 - Customize launch parameters

http://help.adobe.com/en_US/flashbuilder/using/WSe4e4b720da9dedb527199b6e138eabbcce9-8000.html
Homebrewでinstallしたvimを起動すると、何故かXQuartzが起動する件

# 概要

表題の通りです。
Vimの起動が遅くなるし、DockにXQuartz出てくるし気になってた。

# 対応

“vim x11”みたいなキーワードでググってたら、どうやらclientserverがXQuartzを使ってるっぽい気がしてきた。

案の定、`brew install vim --with-client-server`というかんじで無駄にclientserver有効にしてた。
なので、それを外すかんじで`brew uninstall && brew install`したら起動しなくなりました。

# 参考

- [vim launches X11? | Apple Support Communities](https://discussions.apple.com/thread/1276799)
- [osx - Configuring Vim with clientserver and clipboard - Unix & Linux Stack Exchange](http://unix.stackexchange.com/questions/117073/configuring-vim-with-clientserver-and-clipboard)
- [tmuxでvim serverっぽいことをやってみる | 松村技研](http://mgiken.com/blog/2012/07/11/171757)
Fortran で JSON を読む

Fortran でプログラム書くときにいつも悩むのはデータの入力をどうするかということ。配列の要素数は可変にしておきたいし、パラメータの増減に柔軟に対応したい、できればタグ付けしたデータを順序に依存しないで読みたい。

となると、自前のパーサを Fortran で頑張って書くか、プリプロセッサを用意するか、C とリンクするか…

そんなとき Fortran で JSON を取り扱うモジュールを見つけたので紹介します。ただし Fortran 2008 以上限定。今や GCC でも 4.9 なら Fortran 2008 に対応 (すべてとは言ってない) してるので問題ないよね?

で、Fortran で JSON 形式のデータを取り扱う Cool なモジュールはこれ。その名も json-fortran。直球だな。
https://github.com/jacobwilliams/json-fortran

使い方は上記のリンクに src/json_module.f90 というファイルがあるのでリンクする。これだけ。付属ドキュメントには CMake を使ったライブラリ化の手順が書いてあるけれど、別にライブラリにしなくても使える。

使用例はご覧のとおり。

```fortran:sample.f90
program main

  use, intrinsic :: iso_fortran_env, wp => real64
  use json_module
  implicit none

  character(len=256) :: prog, file

  type(json_file) :: json
  character(len=:), allocatable :: error_msg
  logical :: status_ok, found
  integer :: scalar_int
  real(wp), allocatable :: array_real(:)
 
  if (command_argument_count() /= 1) then
     call get_command(prog)
     write(error_unit, '("usage: ",a, " file")') trim(prog)
     call exit(64)              ! EX_USAGE
  end if
  call get_command_argument(1, file)

  call json_initialize()        ! json_module の初期化
  call json%load_file(file)     ! JSON ファイルの読み込み
  if (json_failed()) then
     call json_check_for_errors(status_ok, error_msg)
     write(error_unit, '(a)') error_msg
     call exit(65)              ! EX_DATAERR
  end if

  ! JSON ファイルからデータを読む
  call json%get('sample.data(2).int_value', scalar_int, found)
  call json%get('sample.array_of_real', array_real, found)

  call json%destroy()           ! clean up

  write(output_unit, '("sample.data(2).int_value = ",g0)') scalar_int
  write(output_unit, '("sample.array_of_real = ",/,*(4(f10.3),/))') array_real(:)

  call exit(0)                  ! EX_OK

end program main
```

```json:data.json
{
    "sample": {
        "data": [
            { "ID": "1" },
            {
                "ID": "2",
                "int_value": 5
            },
            { "ID": "3" }
        ],
        "array_of_real": [
            0.16,  80.05,  49.58,  77.29,  25.34,  15.28,
            77.23,  64.69,  87.58,  26.94, 53.08,  0.8
        ]
    }
}
```

```:実行例
F:\> gfortran -o sample json_module.f90 sample.f90
F:\> sample.exe data.json
sample.data(2).int_value = 5
sample.array_of_real =
     0.160    80.050    49.580    77.290
    25.340    15.280    77.230    64.690
    87.580    26.940    53.080     0.800

F:\>
```

簡単だね。もちろん JSON 形式で出力することもできる。

大量のデータを扱うとどうなるのだろうとか不安要素がないわけでもないけれど、Fortran の弱点をフォローできる非常に便利なモジュールなんではないかな。
gulp+ejs:条件分岐で内容の違う2つのHTMLを生成してみる

例：
タスクstep1はtrueをejsテンプレートに渡しstep1.htmlを生成する。
タスクstep2はfalseをejsテンプレートに渡しstep2.htmlを生成する。
※node.jsとgulpは既にインストール済みとしてインストール方法は省略します。

#gulp-ejsのインストール
```
npm install --save-dev gulp-ejs
```

#gulpfile.jsの記述例
```js:gulpfile.js
var steps = {
    step1:['step1',true],
    step2:['step2',false]
};
for (var key in steps){
    (function(key) {
        gulp.task(steps[key][0], function() {
            gulp.src("./*.ejs")
            .pipe(ejs({flg:steps[key][1] }))
            .pipe(rename(steps[key][0]+".html"))
            .pipe(gulp.dest("./"))
        });
    })(key);
}

//ファイルの監視
gulp.task("default",['server'], function() {
    gulp.watch(["./**/*.ejs"], ["step1","step2"]);
});
```

#ejsファイルの記述例

* <%= 値 %> :HTMLをエスケープ処理する
* <%- 値 %> :HTMLをエスケープ処理しない

```js:sample.ejs
<%
var step;
var code;

if(flg){
	step = "steps01";
	code = '<p><a href="#">次へ</a></p>';
}else{
	step = "steps02";
	code = '<p>完了</p>';
}%>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="<%= step %>"><%= step %></h1>
<%- code %>
</body>
</html>
```

#生成されたコード

```html:step1.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="steps01">steps01</h1>
<p><a href="#">次へ</a></p>
</body>
</html>
```

```html:step2.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="steps02">steps02</h1>
<p>完了</p>
</body>
</html>
```
Macのボリューム名を変更する

MacBook Airをクリーンインストールしたら「Macintosh HD」となっていたボリューム名が「名称未設定」となっていた。

変更方法を調べるとコマンドを使ったものを多く見かけたが、簡単な方法を見つけたのでメモ。

1. Finder > 環境設定 を開く
2. 一般 > デスクトップに表示する項目 > ハードディスク にチェック
3. デスクトップに表示されたHDDのアイコンの名称を変更
Android と Java では SimpleDateFormat の書き方がこう違う

みなさんご存じのとおり、 Android API と Java API は微妙に違います。

`java.text.SimpleDateFormat`も、違っているものの1つです。

タームゾーンや曜日などを指定するパターンが違います。
使えるパターンを使わないと例外が発生します。

Java6とJava7との間にも違いがあるので、抽出しておきました。\*

|項目名|Java6|Java7|Android API\*\*/\*\*\*|
|:---|:---|:---|:---|:---|:---|
|タイムゾーン(-0800)(RFC 822)|Z|Z|Z, ZZ, ZZZ|
|タイムゾーン(-08, -0800, -08:00)(ISO 8601)|なし|X|ZZZZZ\*\*\*\*|
|タイムゾーン(上記以外色々まとめて)|z|z|z, zz, zzz, zzzz, ZZZZ|
|曜日の番号(1 = 月曜、...、7 = 日曜)|なし|u|なし|
|曜日の名前(Tuesday)|E|E|EEEE|
|曜日の名前(Tue)|E|E|E, EE, EEE|
|曜日の名前(T)|なし|なし|EEEEE|
|月の名前(January)|M|M|MMMM|
|月の名前(Jan)|M|M|MMM|
|月の名前(J)|なし|なし|MMMMM|
|年(2015)|y|y|y, yyy, yyyy|
|年(15)|y|y|yy|
|[暦週の基準年]((http://docs.oracle.com/javase/jp/7/api/java/util/GregorianCalendar.html#week_and_year))\*\*\*\*\* (2015, 15)|なし|Y|なし|

\* ちなみにJava8では[java.timeパッケージ](http://docs.oracle.com/javase/8/docs/api/java/time/package-summary.html)が追加されて日時の計算とか夏時間とかを扱うのが便利らしいので、[ZonedDateTime](http://docs.oracle.com/javase/8/docs/api/java/time/ZonedDateTime.html#parse-java.lang.CharSequence-java.time.format.DateTimeFormatter-)や[LocalDateTime](http://docs.oracle.com/javase/8/docs/api/java/time/LocalDateTime.html)のparseメソッドに[DateTimeFormatter](http://docs.oracle.com/javase/8/docs/api/java/time/format/DateTimeFormatter.html)を渡すことになって、`SimpleDateFormat`は徐々に使われなくなるかもしれません
\*\* Android API level 9 以上には`L`や`c`というパターンが導入されています。たとえばロシア語のように、「N月M日」という日付が続いている場合の「N月」と、「N月」だけで独立して書かれる「N月」で表記が異なる言語への対応のためだそうです。`L`は月、`c`は曜日です
\*\*\* Android API level 18 以上には`MMMMM`というように同じ文字が5文字連続しているパターンが導入されたそうです。逆に言えばAPI level 18 未満ではそれらは使えなさそうです
\*\*\*\* `ZZZZZ`では厳密にはISO8601のすべてのパターンには対応していない模様です。たとえばタイムゾーンがプラスマイナス0、つまりUTCのときは`2015-01-02 03:04:05Z`というようにタイムゾーンとして`Z`が末尾につくことになりますが、これをパースすることができません
\*\*\*\*\* 「暦週の基準年」についての説明は[ここ](http://docs.oracle.com/javase/jp/7/api/java/util/GregorianCalendar.html#week_and_year)（たぶん一生使わないだろうな……）

* Java6 のSimpleDateFormatのjavadocは[ここ](https://docs.oracle.com/javase/6/docs/api/java/text/SimpleDateFormat.html)
* Java7 のSimpleDateFormatのjavadocは[ここ](http://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html)
* Android のSimpleDateFormatのjavadocは[ここ](http://developer.android.com/reference/java/text/SimpleDateFormat.html)

です

上記の違いのせいで、Java API を参考にAndroidアプリを実装すると、パースに失敗することがあります。
IE７～IE11、FireFox24、35、Chrome42のJavascript実行速度比較

#ブラウザ間Javascript実行速度比較
##InternetExplorer7、InternetExplorer8、InternetExplorer9
![InternetExplorer7、InternetExplorer8、InternetExplorer9](https://qiita-image-store.s3.amazonaws.com/0/19439/287f632e-a4b8-39ff-32f5-7eba75043fd7.png)
##InternetExplorer10、InternetExplorer11
![InternetExplorer10、InternetExplorer11](https://qiita-image-store.s3.amazonaws.com/0/19439/0b405950-c242-ba99-4ec4-3beebbeaadb8.png)
##FireFox24、FireFox35、Chrome
![FireFox24、FireFox35、Chrome](https://qiita-image-store.s3.amazonaws.com/0/19439/e4e40c6a-2bbc-2969-082d-d4d8d8a4e07a.png)

※緑が低速、赤が高速で色分けしている

IE７～IE11、FireFox24、35、Chrome42にて比較を行った。

とりあえず、IE９以下は全然ダメだという事がよくわかった。
まぁ、当時はこんなにJavascriptがもてはやされるとは思っていなかったんだろうね。

[関数レベルの実行結果が掲載されている詳細版はこちら](https://dl.dropboxusercontent.com/u/4127244/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E6%AF%94%E8%BC%83.pdf)
※一部欠落しているのはIE7、8のバグの影響で実行できなかったプログラム個所

## ベンチマーク実行環境
| 項目 | スペック |
|:-----------|------------:|
| 仮想環境 | Hyper-V(Windows8.1 Pro with MediaCenter) |
| CPU | 仮想CPU2コア |
| メモリ | 1GB |
| NIC | 外部共有 |
Mac(Yosemite)にpandocを使ってorg-modeをpukiwiki記法に変換


# 結論
変換は出来たけど、あまり使えなかった。

## 理由

- Pandocがpukiwikiに対応していなかった。
- markdown to pukiwiki の変換を見つけたけど org to markdownが希望の変換してくれなかった。

(先に気がつけよ・・・・・・・pandocのドキュメントを[翻訳してくれている人](http://sky-y.github.io/site-pandoc-jp/users-guide/)もいるのに)

---
# 本編

仕事関連のメモはorg、昇格するとClosedなPukiWiki。
公開可能な個人メモはmarkdown、昇格するとQiita。

ってやっていこうかと思うので、各種ドキュメントを相互変換出来るようにPandocを使ってみる。


## ざっくり
- pandocよさ気
- でも、org to pukiwiki は直接出来ない
- markdown to pukiwiki の gem 発見
- org to markdown to pukiwiki でやる
- 早速使って見たら微妙。。。


## ツールのインストール
PandocはHaskellで作られているのでHaskell環境が必要。

Pandocはbrewでもインストール出来るけど、現在ではbrewの方がVersionが低い。
なので、以下の手順でpandocをイントールする。

1. Haskellをインストール
1. Haskellのパッケージマネージャ(cabal)を使ってpandocをインストール



### Haskell(cabal)のインストール

Haskellのパッケージマネージャ cabal を以下のコマンドで入れる。

```Bash
brew install ghc cabal-install
```

数分程度かかるけど、ボトルネックはネットワーク環境っぽい。

cabalのインストール方法を調べていると、以下のコマンドも出てくる。
でもすでにパッケージ化していないようでエラーになる。

```Bash
$ brew install ghc haskell-platform
Error: No available formula for haskell-platform
We no longer package haskell-platform. Consider installing ghc
and cabal-install instead:
  brew install ghc cabal-install

A binary installer is available:
  https://www.haskell.org/platform/mac.html
```
意訳すれば、

すでに時代遅れの(no longer)"haskell-platform"はパッケージ化してないよ。
代わりに(insted) "brew install ghc cabal-install"使ってね。
ってことらしい。


### Pandocのインストール

準備が出来たので、cabalをupdateしてpandocをインストール

```Bash
cabal update
cabal install pandoc
```
installにそこそこ時間かかる(20〜30分！？)ので、のんびり待つ。
ネットワーク環境に大きく左右されるっぽ。

インストール終わったら、いつものバージョン確認コマンド。

```Bash
pandoc --version
```
今回(2015/02現在)のバージョンはpandoc 1.13.2



### md2pukiwiki のインストール

Pandocで org to pukiwiki したかったけど、実はPukiwikiは対応してなかった。

うろうろしてたら、[こちら](http://dtan4.hatenablog.com/entry/2014/04/30/235331)を見つけたので早速あやかる事に。



```Bash
gem install md2pukiwiki
```

#### 使い方
結果は標準出力に吐かれるようなので適当なファイルにリダイレクトする。

```Bash
md2pukiwiki markdownファイル > foo.pukiwiki
```

## orgファイルからPukiwikiへ変換

諸々準備が整ったので、org to markdown to pukiwiki をshでラッピングして~/bin(パスが通っている前提)に突っ込む。


```Bash
#!/bin/bash

src_file=$1

# 拡張子ありのファイル名を取得
file_name_ext=`basename ${src_file}`
# こっちでも良いよ
# file_name_ext="${src_file##*/}"

# 拡張子なしのファイル名を取得
file_name=`basename ${src_file} .org`
# ↑だと拡張子がorg固定だから、こっちの方がいいかも。
# file_name="${src_file%.*}"

# ディレクトリ取得
file_dir=`dirname ${src_file}`
# こっちでも良いよ
# file_dir="${fpath%/*}"

# org to markdown
pandoc -s ${src_file} -o ${file_dir}/${file_name}.md

# markdown to pukiwiki
md2pukiwiki ${file_dir}/${file_name}.md > ${file_dir}/${file_name}.pukiwiki

ls -l ${file_dir}/${file_name}*

exit 0

```

使い方はこんな感じ

```Bash
org2pukiwiki ~/projects/note.org
```
Qiita:Teamの更新をChatWorkに通知する

Qiita:Teamの更新をChatWorkにAPI経由で通知するように設定した時のメモ。
ChatWorkのAPIは、2015/02/16現在でプレビュー版とのことなので、今後やり方が変わるかもしれない。

# ChatWorkの設定

1. APIの利用申請をする。
    * [チャットワークAPIドキュメント](http://developer.chatwork.com/ja/)
    * ビジネスプランもしくはKDDI ChatWorkの場合は、自組織の管理者に申請してもらう。
* 「動作設定」=>「API発行」が表示されるようになったら、自分のAPIトークンを取得する。
    * [認証方法 - チャットワークAPIドキュメント](http://developer.chatwork.com/ja/authenticate.html)
* 通知を流したいルームIDをメモする。
    * https://www.chatwork.com/#!rid 以降の数字
    * ルームには自分がメンバーとして含まれている必要がある。

# Qiita:Teamの設定

1. 「チーム設定」=>「外部サービスの連携」=>「ChatWork」で、取得したAPIトークンとルームIDを設定。
    * [ChatWork連携設定 – Qiita Support](https://increments.zendesk.com/hc/ja/articles/201998976-ChatWork%E9%80%A3%E6%90%BA%E8%A8%AD%E5%AE%9A)
    * 「通知を有効にする」にチェックを入れて、「保存する」ボタンを押すのを忘れずに。
* 「テストする」ボタンを押して、ChatWorkのルームに自分のアカウントで「ping」と投稿されたら設定完了。
メモ: 前回発表時からの進捗

## docker

* [dockerにlxc-confで固定IPを割り振る](http://qiita.com/tukiyo3/items/bfc53353d2705e5e06e9)
* [docker - Fedora21でcockpitを触ろう](http://qiita.com/tukiyo3/items/d35a3a58bad5ed5d23d3)
* [dockerがホスト,LXC,KVMよりベンチマークで早い件](http://qiita.com/tukiyo3/items/296dbc9dff5201e2f0d1)
* [OpenVzからdockerへのデータ移行が簡単だった](http://qiita.com/tukiyo3/items/d9e00f232f3d8d8bcb31)
* [DockerHub - CentOS 5.11 32bitイメージ作った](http://qiita.com/tukiyo3/items/29898a52d1063383c57d)
* [docker - コンテナでホストに近い速度を出す](http://qiita.com/tukiyo3/items/fbb5dd35b11401b46f30)
* [docker - 特定のIPアドレス:ポートでLISTEN](http://qiita.com/tukiyo3/items/0f2adc06bdcdc9cb8aad)
* [DockerHub - データコンテナの使い方](http://qiita.com/tukiyo3/items/d123e1f9703154fd79b1)
* [/var/lib/docker/を削除してdockerを初期化](http://qiita.com/tukiyo3/items/0ad77d857342e747731f)
* [docker buildのRUNのログも保存](http://qiita.com/tukiyo3/items/a22206e9af84fd4f1479)
* [DockerHub - virt-managerが動作するイメージを作成した](http://qiita.com/tukiyo3/items/9e484a6729409a116aa9)

## LXC

* [CentOS5のビルド失敗するのでpull reqしといた](https://github.com/lxc/lxc/pull/442)
* [最新版のCRIUビルド](http://qiita.com/tukiyo3/items/3d364e69d0ac6817e0da)
* [LXCでCentOS5.11 i386](http://qiita.com/tukiyo3/items/aeddde722af4a50e1cfc)
* [lxc - 特権コンテナの作成](http://qiita.com/tukiyo3/items/f31d434a3215938e50b3)
* [LXC1.1でのバックアップ、リストア、あとCentOS7動作レポ](http://qiita.com/tukiyo3/items/99ff5dc872fb94acde60)
* [LXCでbridge接続](http://qiita.com/tukiyo3/items/510307e76e199e64b588)
* [LXC上のCentOS7起動が1時間かかるのでpull reqしといた](http://qiita.com/tukiyo3/items/4816ad3db0633a61a209)

## OpenVz

* [OpenVzコンテナでsshfs](http://qiita.com/tukiyo3/items/3bed8a0cb4899b85f1e4)
* [proxmox - OpenVz上のCentOS7でNFSサーバを動かせた](http://qiita.com/tukiyo3/items/3820420658aa8ef4c666)

## Proxmox

* [proxmoxでチーミング](http://qiita.com/tukiyo3/items/c5b9bf63c55a261f3014)
* [proxmoxでBackup failed because of "empty device list"対応](http://qiita.com/tukiyo3/items/29328c04d1dbf805bc13)
* [proxmoxホスト側でsquidを動かす](http://qiita.com/tukiyo3/items/51d3b636af864a92a717)

## Packer

* [tukiyo/my-packer-template-files](https://github.com/tukiyo/my-packer-template-files)
* [boot2dockerの自作](http://qiita.com/tukiyo3/items/8c7a3e076f493196e89e)

## DockerHub

* [View Public Profile | Docker Hub Registry - Repositories of Docker Images](https://registry.hub.docker.com/repos/tukiyo3/)
  * `Automated Build`使うようになった。


## KVM

* [KVM - QED : qcow2より早い、最速ディスクフォーマット](http://qiita.com/tukiyo3/items/7bfb07c06101c806a47a)
* [KVM - virshメモ](http://qiita.com/tukiyo3/items/c4cceb1b830bc4ee0536)


## LXD

* [lxc/lxd](https://github.com/lxc/lxd)にインストール手順あり


## lxc

![lxc.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0f252671-7142-6039-4788-d328877f52c6.png)

![lxc2.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0694be5b-d566-c93d-0f11-b023b1c4cdf3.png)
dockerにlxc-confで固定IPを割り振る

## 参考

* [5.1.2 Multihost Docker · open-mpi/orcm Wiki](https://github.com/open-mpi/orcm/wiki/5.1.2-Multihost-Docker)

## ホスト側の準備

ブリッジインターフェイス(br0とbr1)を作っておく。

* [Fedora21でBridgeとBonding - Qiita](http://qiita.com/tukiyo3/items/b836b9bb9ce3478ff1db)

```diff:/etc/sysconfig/docker-network
- DOCKER_NETWORK_OPTIONS=
+ DOCKER_NETWORK_OPTIONS="-b none -e lxc"
```

```bash:
systemctl restart docker
```

## コンテナ起動オプション

```bash:ネットワーク設定
docker run -it -d \
  \
 --lxc-conf="lxc.network.type = veth" \
 --lxc-conf="lxc.network.flags = up" \
 --lxc-conf="lxc.network.link = br0" \
 --lxc-conf="lxc.network.ipv4 = 192.168.100.4/24" \
 --lxc-conf="lxc.network.ipv4.gateway = 192.168.100.1" \
 --lxc-conf="lxc.network.name = eth0" \
 \
 --lxc-conf="lxc.network.type = veth" \
 --lxc-conf="lxc.network.flags = up" \
 --lxc-conf="lxc.network.link = br1" \
 --lxc-conf="lxc.network.ipv4 = 192.168.0.4/24" \
 --lxc-conf="lxc.network.name = eth1" \
 \
 tukiyo3/centos5-mine
```

これで`192.168.100.4`と`192.168.0.4`にpingが通るようになる。

## コンテナに入り方

```bash:
# docker exec -it d3 /bin/bash
FATA[0000] Error response from daemon: Unsupported: Exec is not supported by the lxc driver
```

`lxc driver`を使うと`docker exec`でコンテナに入れない。(1.4.1の場合。docker 1.5だと入れるっぽい。)

nsenterを使う。

* [docker - nsenterでコンテナに接続するのに便利なコマンド - Qiita](http://qiita.com/tukiyo3/items/f574d16c7867f0361507)

```bash:Pid確認してnsenterで入る
# docker inspect d3 | grep Pid
        "Pid": 4002,
# nsenter -t 4002 -m -u -i -n -p -- /bin/bash
bash-3.2#
```

## sshdを起動

```bash:dockerコンテナ内にて作業
bash-3.2# yum install -y openssh-server
bash-3.2# /sbin/service sshd start
bash-3.2# mkdir ~/.ssh
bash-3.2# cat > authorized_keys<<EOF
(キーを登録)
EOF
```

```bash:
$ ssh root@192.168.100.4
```

接続ができることを確認。


## nsenterで入った場合、PATHに/binと/sbinが入っていない問題

```bash:
cp -a /etc/profile.d/krb5-devel.sh /etc/profile.d/nsenter.sh
/bin/sed -i -e 's@/usr/kerberos@:@g' /etc/profile.d/nsenter.sh
/bin/sed -i -e 's@PATH=:@PATH=@' /etc/profile.d/nsenter.sh
chmod +x /etc/profile.d/nsenter.sh
```
Mac OSXで壊れた濁音ファイル名の一括修正

ドキュメント管理をgit等のバージョン管理システムを利用すると便利です。
ただ、日本語ファイル名を扱うときは注意が必要です。

というのも、Macは通常ファイル名では、「ガ」などの濁音を「カ」「"」の２文字を使って内部のデータを表現します。
通称でUTF-8-Macとか呼ばれたりもしますが、独自の文字コードではなく、UTF-8自体のNFD形式の正規化という仕様です。

ちなみにWindowsなどはNFC形式という「ガ」は「ガ」という一つの文字コードで表します。こっちの方が違和感が無いですね。

で、問題になるのが、Macで日本語ファイル名を作ったり、リネームしたりすると漏れ無くNFDで保管されるので、git上でもNFCではなく、NFDで保存されるので、ファイル名がぶっ壊れます。
Windowsも最近はExploreとかは対応してるので、一見はあまり問題ないんですが、一部のツールが正常に動作しなかったりと結構めんどくさい...

1個や2個なら手でちまちま直せば良いんですが、Mac上でrevert commitとかすると、一括してまとめて壊れるので、とてもじゃないけど、手で直せなくなります。

なので、こんなかんじのコードで対応します。

```java:nfd2nfc
    static void parse(File root) {
        for (File f : root.listFiles()) {
            String name = f.toString();
            String nfcName = Normalizer.normalize(name, Normalizer.Form.NFC);

            if (f.isDirectory()) {
                parse(f);
            }
            
            if(!name.equals(nfcName)){
                System.out.println("rename from " + name + " to " + nfcName);
                f.renameTo(new File(nfcName));
            }
        }
    }
```
[gist:koduki / Nfd2nfc.java](https://gist.github.com/koduki/d8a42438f7246de01b1e)

単純にファイル名を再帰的に読み込んで、nfc形式でなければnfcにリネームするというだけのシンプルなプログラムです。

今回はJavaで書きましたが、ちょっと調べてみた感じgoやrubyでも簡単に書けそうです。UTF-8に対応してる最近の言語なら、ライブラリレベルでNormalizationの仕様を持ってる可能性が高いので、対応は簡単です。

それではHappy Hacking!

参考
---------------

- [Wikipedia - Unicode正規化](http://ja.wikipedia.org/wiki/Unicode%E6%AD%A3%E8%A6%8F%E5%8C%96)
- [utf-8(NFC)とutf-8-mac(NFD)における日本語ファイル名](http://tech.revona-art.com/?p=970)
[swift] ファイルの保存と読み込み


viewにbuttonを2つ設置して、それぞれ「responceToArchiveButton」と「responceUnarchiveButton」にします。
それぞれ、下記の内容を記述

```kobito.swift
import UIKit

class ViewController: UIViewController {
    @IBAction func responceToArchiveButton(sender: AnyObject) {

        //パスの取得
        let paths = NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true) as Array<String>
        
        //保存するファイルの名前
        let filePath = String(paths[0]) + "data.txt"

        //保存するデータ
        let array = [
            "「まさか、｜後罪《クライム》の｜触媒《カタリスト》を〈｜讃来歌《オラトリオ》〉無しで？」",
            "教師たちの狼狽した声が次々と上がる。",
            "……なんでだろう。何を驚いているんだろう。",
            "ただ普通に、この｜触媒《カタリスト》を使って｜名詠門《チャネル》を開かせただけなのに。",
            "そう言えば、何を｜詠《よ》ぼう。",
            "自分の一番好きな花でいいかな。",
            "どんな宝石より素敵な、わたしの大好きな緋色の花。",
            "――『｜Keinez《赤》』――",
            "そして、少女の口ずさんだその後に――",
            ]
            //.componentsJoinedByString("\n")
        
        //アーカイブしてdata.datというファイル名で保存する
        let successful = NSKeyedArchiver.archiveRootObject(array, toFile: filePath)
        if successful{
            println("成功")
        }
    }
    @IBAction func responceUnarchiveButton(sender: AnyObject) {
        println("Unarchiveボタン押下")
        
        let paths = NSSearchPathForDirectoriesInDomains(.DocumentDirectory,
        .UserDomainMask, true) as Array<String>
        let filePath = String(paths[0]) + "data.txt"
        if let array = NSKeyedUnarchiver.unarchiveObjectWithFile(filePath) as? Array<String>{
            //println(array)
            
            for str in array{
                println(str)
            }
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}
```

『iphone/ipadアプリケーション開発の教科書』より
League\Flysystemをphp5.3対応した

phpでftpとかs3に対してやりとりする部分を抽象化したかった。

[phpのファイルシステムを抽象化するライブラリ](http://mapyo.hatenablog.com/entry/2015/02/15/php%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E6%8A%BD%E8%B1%A1%E5%8C%96%E3%81%99%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA)


↑でも書いたけど、ざっと調べた中では以下の`League\Flysystem`が一番良さそうだった。

https://github.com/thephpleague/flysystem

でもphp5.4〜だった。


なので、`League\Flysystem`をphp5.3対応した。後悔はしていない。

https://github.com/mapyo/flysystem

## 流れ

1. fork
2. ブランチ切る
3. .travis.ymlに5.3追加
4. ひたすら修正する  
https://github.com/mapyo/flysystem/pull/2


arrayとtraitの修正のみでいけた。何をもって対応OKとしたかというと、テストが全部通ったので対応OKとした。

traitが書いてあったphpファイルとか消したりしてないので、雑といえば雑か。

一度プルリクをMergeしてしまって、僕のforkしたリポジトリのmasterに変更が反映されたけど、何か大事なものを失った気がして、masterはMerge前にforce pushして元に戻してプルリク出したけど、やっぱりmasterにMergeするべきだと思ってMergeしたのでプルリクが２つになっている。

混乱している。


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

## 使い方

- composer.json

```json
{
    "repositories": [
        {
            "type":"vcs",
           "url":"git@github.com:mapyo/flysystem.git"
        }
    ],
    "require": {
        "league/flysystem": "dev-master"
    }
}
```

- test.php

```php
<?php
date_default_timezone_set('Asia/Tokyo');
require 'vendor/autoload.php';

use League\Flysystem\Filesystem;
use League\Flysystem\Adapter\Ftp as Adapter;


$filesystem = new Filesystem(new Adapter(array(
    'host' => 'ftp.server.name.jp',
    'username' => 'ftp',
    'password' => 'ftp',
)));

$contents = $filesystem->listContents();
var_dump($contents);
```

こんな感じで、masterの内容をcomposer installして使える。
しかし、実際のライブラリをforkして修正を加えたものを使うのって、
どう扱うのがよいのだろうか？

タグを新たに作ってそれを指定すると、fork元のライブラリの変更に追従させる時に微妙だけど、
masterを指定すると意図せず最新のソースが入ってしまう可能性もある。
コミットのハッシュを指定して入れるのがいいのかなぁ。


------

## 所感
こういう事が出来るのはちゃんとテストがあるからこそ出来る。
PHPUnit4.0がPHP5.3で動いてくれてよかったー。


闇を作ってしまった感じがある。
そして、こういうパターンはfork元のライブラリの変更に追従する事はなさそうな気がする。
IntelliJ IdeaでGoを書くときの設定

# インデントにタブを使用する

いつのまにか4スペースになってたので。。。

![スクリーンショット_2015-02-16_6_38_55.png](https://qiita-image-store.s3.amazonaws.com/0/40887/0b630046-ea6c-e308-0d07-fcc3a7f41c62.png "スクリーンショット_2015-02-16_6_38_55.png")


# 行末のスペースを自動削除する

gofmtとかgoimportsやってれば大丈夫だけど、コード書いてるときにたまにスペース入ってて気になるので。

![スクリーンショット_2015-02-16_6_41_35.png](https://qiita-image-store.s3.amazonaws.com/0/40887/3dc72730-416d-3c4c-5f58-8e9d7d2bf7f8.png "スクリーンショット_2015-02-16_6_41_35.png")


# importをたたまないようにする

![スクリーンショット 2015-02-16 6.55.55.png](https://qiita-image-store.s3.amazonaws.com/0/40887/7aa4ec28-d462-2a48-4f79-792db0d17a11.png)

Javaとかだと畳んでたほうが便利だけど、Goの場合は不要なimportでエラーになるし、sqlのdriverなどは`_`でimportしたりするのでたたまないほうが便利なのでOFFにしたほうがいい気がする。

~~こちらまだ1.0.0aplha#58には含まれていなくて、次回のリリースに含まれるそうです。
（下記URL参考）~~

[How to prevent automatic import block folding? #1314](https://github.com/go-lang-plugin-org/go-lang-idea-plugin/issues/1314)

**2015/02/16 追記:**
[1.0.0alpha#92](https://github.com/go-lang-plugin-org/go-lang-idea-plugin/releases/tag/%2392)がリリースされました。

以下の設定で自動でたたまれるのが無効化できます。

![スクリーンショット_2015-02-16_20_41_21.png](https://qiita-image-store.s3.amazonaws.com/0/40887/4ef87677-4907-eecb-0d19-8ce1db60fe07.png)
Fedora21でBridgeとBonding

* `bridge-utils`をインストール済みであること。

## 1NICの場合

* [LivaPCにFedora22を入れたメモ - Qiita](http://qiita.com/tukiyo3/items/040eeb45f3504706a885#bridge%E8%A8%AD%E5%AE%9A)

## 4NICの場合

```bash:
cat > /etc/sysconfig/network <<EOF
NETWORKING=yes
NETWORKING_IPV6=no
GATEWAY=192.168.100.1
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-br0 <<EOF
TYPE=Bridge
DEVICE=br0
IPADDR=192.168.100.11
NETMASK=255.255.255.0
IPV6INIT=no
EOF


cat > /etc/sysconfig/network-scripts/ifcfg-br1 <<EOF
TYPE=Bridge
DEVICE=br1
IPADDR=192.168.0.11
NETMASK=255.255.255.0
IPV6INIT=no
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-bond0 <<EOF
TYPE=Bond
DEVICE=bond0
BONDING_OPTS="mode=active-backup miimon=100"
BRIDGE=br0
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-bond1 <<EOF
TYPE=Bond
DEVICE=bond1
BONDING_OPTS="mode=active-backup miimon=100"
BRIDGE=br1
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-enp3s0f0 <<EOF
DEVICE=enp3s0f0
MASTER=bond0
SLAVE=yes
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-enp60s0 <<EOF
DEVICE=enp60s0
MASTER=bond0
SLAVE=yes
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-ens9 <<EOF
DEVICE=ens9
MASTER=bond1
SLAVE=yes
EOF

cat > /etc/sysconfig/network-scripts/ifcfg-enp0s20u1 <<EOF
DEVICE=enp0s20u1
MASTER=bond1
SLAVE=yes
EOF

cat > /etc/sysctl.d/98-disableipv6.conf <<EOF
net.ipv6.conf.all.disable_ipv6 = 1
EOF
```
MIDI.js を使った MIDI(SMF) 再生


## はじめに

* Web Audio API / Web MIDI API あたりを勉強し始めたのですが、思ったより難しくていきなり滅入ってます。
* もう少し楽に扱えそうな MIDI.js というライブラリがあるようなので、まずはとりあえずこちらを使いたいと思います。 


## 今回の目標

* 手持ちの MIDI(SMF) ファイルを鳴らしたい。


## 環境

* OX X Yosemite 10.10.2
* Google Chrome **40.0.2214.111** (64-bit)


## 準備

### MIDI.js

* [https://github.com/mudcube/MIDI.js](https://github.com/mudcube/MIDI.js)

> Making life easy to create a MIDI-app on the web. Includes a library to program synesthesia into your app for memory recognition or for creating trippy effects. Convert soundfonts for Guitar, Bass, Drums, ect. into code that can be read by the browser. Supports multiple simultaneous instruments and perfect timing.

js/, inc/, soundfont/ ディレクトリを html を置くディレクトリにコピーしました。

### HTML ファイル

index.html として作成しました。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>MIDI.js test</title>

    <script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
    <script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
    <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
    <script src="./js/MIDI/Player.js" type="text/javascript"></script>
    <script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>

    <script src="./inc/jasmid/stream.js" type="text/javascript"></script>
    <script src="./inc/jasmid/midifile.js" type="text/javascript"></script>
    <script src="./inc/jasmid/replayer.js" type="text/javascript"></script>

    <script src="./inc/Base64binary.js" type="text/javascript"></script>

    <script type="text/javascript">
window.onload = function() {
  MIDI.loadPlugin({
    callback: function() {
      MIDI.Player.loadFile("./hoge.mid", MIDI.Player.start);
    }
  });
}
    </script>
  </head>

  <body>
MIDI.js test
  </body>
</html>
```


## 実行(再生)

Google Chrome で用意した HTML にアクセスします。
タブに音量マークがついていますが、一応鳴りました。コントロールはまったくできません。

![2015021601.png](https://qiita-image-store.s3.amazonaws.com/0/20418/76d0a836-2d2b-34a1-2955-0b6c899fff21.png "2015021601.png")


## 感想

* 次はもう少しコントロールしたいですね。
数式・画像付きのmarkdownをhtmlに変換

数式や画像の入った文書をmarkdownで作って誰かと共有するときの方法です。
単一のhtmlファイルに変換して、Dropboxなどで共有する用途で使っています。

# 手順

## 原稿の準備

[pandoc](http://sky-y.github.io/site-pandoc-jp/users-guide/) でmarkdownを変換します。

画像を入れるときは以下のように書きます。markdownファイルからの相対パスで指定できます。

```
![altの文字列](./fig.png)
```

数式は `$f(x)$` というように一つの\$で囲うとインライン表示で数式を表示できます。
単一の行にしたい場合は\$\$で囲います。

```
$$f(x) = ax^2 + bx + c$$
```

## 変換

pandocでhtmlに変換するときにはいくつかオプションがありますが、とりあえず以下のコマンドに落ち着きました。

```
pandoc --self-contained -s --mathml mydoc.md -o mydoc.html
```

### 注意点

- `--self-contained` を指定すると画像ファイルも含めた単一のhtmlファイルが作られます。
- 数式を変換するには `--mathml`, `--mathjax` などのオプションを指定する必要があります。しかし self-contained と mathjax は pandoc 1.13ではバグのため共存できませんでした。そこでmathmlのオプションを使うようにしています。
  - https://github.com/jgm/pandoc/issues/682
- 数式はchormeでは正しく表示できないようなのでfirefoxかsafariで表示します。

作られたファイルはdropboxなどで簡単に共有することができます。

## （追記） Chromeでも数式を適用する方法

上で述べたようにmathmlを使うとchromeでは数式が適切にレンダリングされません。
`--self-contained`オプションと`-mathjax`オプションを共存させるためのハックが上記のissueで表示されていました。
https://github.com/jgm/pandoc/issues/682#issuecomment-56773350
このコメントに含まれるJSをファイル（dynoload.jsという名前にしましょう）に保存して下記のコマンドで実行します。

```
pandoc --self-contained -s --mathjax=./dynoload.js mydoc.md -o mydoc.html
```

上記のファイルの[gist](https://gist.githubusercontent.com/yohm/0c8ed72b6f18948a2fd3/raw/624defc8ffebb0934ab459854b7b3efc563f6efb/dynoload.js)を作りました。

```
pandoc --self-contained -s --mathjax=https://gist.githubusercontent.com/yohm/0c8ed72b6f18948a2fd3/raw/624defc8ffebb0934ab459854b7b3efc563f6efb/dynoload.js mydoc.md -o mydoc.html
```

でも大丈夫です。

## （追記）github風のスタイルを適用する

さらに [Pandocでgithub風CSSを使ったstandaloneなhtmlを生成](http://qiita.com/griffin_stewie/items/95026360fdfca1bd8e33) を参考にgithub風のスタイルを適用しましょう。

```
pandoc --self-contained -s --mathjax=https://gist.githubusercontent.com/yohm/0c8ed72b6f18948a2fd3/raw/624defc8ffebb0934ab459854b7b3efc563f6efb/dynoload.js -c https://gist.githubusercontent.com/griffin-stewie/9755783/raw/13cf5c04803102d90d2457a39c3a849a2d2cc04b/github.css mydoc.md -o mydoc.html
```

コマンドが長すぎるので、先ほどの記事を参考に.zshrcに以下のように記載しました。

```sh:~/.zshrc
pandoc_embed_html () {
  pandoc --self-contained -s --mathjax=https://gist.githubusercontent.com/yohm/0c8ed72b6f18948a2fd3/raw/624defc8ffebb0934ab459854b7b3efc563f6efb/dynoload.js -c https://gist.githubusercontent.com/griffin-ste    wie/9755783/raw/13cf5c04803102d90d2457a39c3a849a2d2cc04b/github.css $@
}
```

以後、 `pandoc_embed_html mydoc.md -o mydoc.html` で変換できます。
Chromeで使える便利な拡張機能

自分が入れているChromeで使える拡張機能を5つ紹介します。

##ShortenMe
http://goo.gl/Uly36c
ワンクリックでURLを短縮、QRコードも作成してくれる拡張機能です。
作成時に短縮されたURLを自動でクリップボードにコピーしてくれます。
ここで表示しているURLもこれを使って短縮しています。
(ただ、新しいタブで開かなくなります・・・)

##Google Quick Scroll
http://goo.gl/VWTfQM
Google検索から各ページに飛んだ時に、検索に引っかかった単語の箇所に
一気にスクロールしてくれます。
個人的には一番使っている素晴らしい拡張です。
ただ、上手く動作しないことがたまにあります。
現在動作しない上、アップデートもされていません。
恐らく今後アップデートされないかと思います。悲しい。

##Gmail Notifier
http://goo.gl/AXM4aS
Gmailの通知が右上に表示されます。
Google公式のものもありますが、これは複数のアカウントを設定出来ます。
さらにGmailを開くことなくその場で見れたり、既読をつけたりも出来ます。
通知の仕方、通知音などの設定も可能です。英語ですが、そこまで難しくはないと思います。

##Weblioポップアップ英和辞典
http://goo.gl/fwLVJa
英語が読めないあなたへ。
選択した英単語を翻訳して、さらに音声まで聞けちゃいます。
さらに詳しく知りたいなら、Weblioのサイトにも飛べます。
選択した時に自動で翻訳されますが、それが邪魔なときは、
特定のキーで表示させるようにも設定できます。

##ColorZilla
http://goo.gl/r2OBeK
Webページのカラーピッカー、グラデーションのCSSジェネレータ、
パレットのブラウジングが一つになった、Webデザイナなら必須かもしれない拡張機能です。
自分はWebデザイナじゃないので全然使ってないですが、あって困るものではないと思います。
Flux - ActionsとDispacher（日本語訳）


Fluxのドキュメントページにある、Actions and Dispacherというページを日本語訳してみた。

http://facebook.github.io/flux/docs/actions-and-the-dispatcher.html

※ わーと、っと訳してしまったので、随時なおしていく。誤訳等あればご指摘下さい。

# Dispatcherとは？

DispatcherはFluxアプリケーションのデータフローの中央ハブとなるSingletonである。それは、本質的にコールバックのレジストリであり、登録されたコールバックを呼び起こすことができる。各StoreはDispacherにコールバックを登録することができる。新しいデータがDispatcherに入ると、Disptacherは登録済みのコールバックを用いてStoreにデータを伝搬する。dispatch()メソッドを通じてコールバックを呼び出す。dispatchメソッドはデータペイロードオブジェクト引数にとる。このペイロードオブジェクトは一般的にアクションと同義である。

# ActionとAction Creatrors

新しいデータがシステムに入ってくる際（それがユーザーとのインタラクションによるものであれ、WEB APIコールによるものであれ）、そのデータはActionにパッケージされる（実体としては、新しいデータフィールドとアクションを特定するための種別を持ったオブジェクトリテラルで表される）。我々はしばしAction Creatorと呼ばれるヘルパーメソッドのライブラリを作成し、それによってアクションオブジェクトを生成し、それをDispatcherに引き渡す。

Actionはアクションを識別するためのタイプ属性を持つ。StoreはActionを受け取ると通常はこのタイプ属性を用いてそのアクションに対応すべきか否かを判断する。Fluxアプリケーションにおいて、StoreとViewは外部のオブジェクトによって作用されない。Storeはsetterメソッドではなく、自身がDispacherに登録したコールバックによってのみActionを受け取る。

Storeの変更経路をそれ自身によるものに限定することで、MVCでよく見られる込み入った問題（モデル間のカスケード更新が状態の取り扱いを不安定にし、テストを難しくしている）を解消する。Fluxアプリケーションにおいてオブジェクト同士は疎結合であり、デメテルの法則（オブジェクト同士は極力お互いについての知識を持たないようにするという原則）に非常に忠実である。そうすることで、ソフトウェアは保守性と適用性が高く、テストしやすく、またたとえ新しいメンバーがチームに参加しても理解がしやすいものとなる。

# Dispatcherはなぜ必要か?

アプリケーションが成長するにつれて、確実にStore間の依存関係が発生する。例えば、Store Aが自分自身を更新するために、Store Bの状態を確認しなければならない、というような状況である。この場合、我々はDispacherが最初にStore Bのコールバックを呼び出し、その処理が完了してから、Store Aのコールバックに移る必要がある。この依存関係を宣言的に扱うために、Store AはDispacherに対して、このActionについてはStore Bの処理が終わるまで待つ必要がある、と伝えることができなければならない。そのため、DispacherはwaitForメソッドを通じてその機能を提供する。

dispatchメソッドは相互に呼び出しあうコールバックを通じてシンプルで同期的なイテレーションを提供する。あるコールバックの中でwaitFor()が用いられた場合、そのコールバックの実行は停止し、waitFor()は我々に新しい依存性のイテレーションサイクルを提供する。全ての依存性が満たされてはじめて、元のコールバックの処理を再開する。

さらに、waitFor()メソッドは同一のStoreのコールバックの異なるアクションに対して様々な方法で用いられるだろう。例えば、あるケースにおいて、Store AがStore Bを待たなければならないとする。しかし、別のケースでは、StoreCを待たなければならないかもしれない。特定のアクションに対してのコードブロックの中でwatiFor()を用いることで、依存関係をコントロールしやすくなる。

しかしながら、循環依存状態を作ってしまうと問題が発生する。つまり、Store AがStore Bならず、同時にStore BがStore Aを待たなければならない、というような状況になると無限ループしてしまう。現在、FluxリポジトリのDispacherはこのような問題が発生した場合に、開発者に知らせるようになっており、その問題を適切に解消することができる。
VagrantでDockerが動く環境を一撃で作る

メモです。

boot2dockerを使わず、
vagrant上に普通にVM立ててDocker使える環境を一撃で用意するコマンドです。
（VMはubuntu14.04）


### 一撃でインストール
```
wget https://raw.githubusercontent.com/phusion/baseimage-docker/master/Vagrantfile && vagrant up
```


### 確認

```
vagrant ssh
...

$ docker run busybox echo 'Hello Docker!'
Unable to find image 'busybox:latest' locally
df7546f9f060: Pull complete
ea13149945cb: Pull complete
4986bf8c1536: Pull complete
511136ea3c5a: Already exists
busybox:latest: The image you are pulling has been verified. Important: image verification is a tech preview feature and should not be relied on to provide security.

Status: Downloaded newer image for busybox:latest
Hello Docker!
$
```

<br>

ウェ〜イ
boolean and "A" or "B"みたいな書き方できたら賢そう【Python】【でも】

チュートリアル的コードを勉強していて初めてお目にかかったので、覚書です([Click](http://click.pocoo.org/3/)の勉強中でした)。

## ブール演算子を用いた条件分岐
Pythonでのブール演算子は、結果をブール値でなく比較した値そのものを返すので、

```pycon
>>> def test(flag=True):
...     print 'flag: %s' % (flag and 'on' or 'off')
... 
```

とかしてやると、

```pycon
>>> test(True)
flag: on
>>> test(False)
flag: off
```

のようになります。ここでの`and`と`or`は比較演算子ではなくてブール演算子であることに注意。

[Pythonのライブラリリファレンスのブール演算子の項](http://docs.python.jp/2.7/library/stdtypes.html#and-or-not)をみて分かるように、演算子`and`,`or`,`not`は、優先度の低い順に下の表のように評価されます。

<table>
<tr>
<td>演算</td><td>結果</td>
</tr>
<tr>
<td>x or y</td><td>x が偽なら y 、そうでなければ x</td>
</tr>

<tr>
<td>x and y</td><td>x が偽なら x 、そうでなければ y</td>
</tr>

<tr>
<td>not x</td>
<td>x が偽なら True 、そうでなければ False</td>
</tr>
</table>

したがって、空でない文字列は常に`True`として評価されたので、

flagが`True`の場合:
   （左項が`True`なので）
-> `'on' or 'off'`
   （文字列'on'は`True`なので）
-> `'on'`

flagが`False`の場合:
   （左項が`False`なので）
-> `False or 'off'`
   (左項が`False`なので)
-> `'off'`

となっていたわけです。

なにが起こってるか分かってスッキリしました。見た目もスッキリしてて、賢く見えるかも。

##でも...

しかし、自分がもし今後こんな風に書くかと言われると別問題です。
僕なら素直にこう書くと思います。

```pycon
>>> def test(flag=True):
...    print 'flag: %s' % ('on' if flag else 'off')
```

ちなみにこれは内包表記ではなく、バージョン2.5から実装された３項演算子のようですが、それでもPython的に見えるのでこちらのほうがよさげ。

それと、最初の例だと文字列'on'の部分はちゃんと毎回`True`になるものが入っていないといけないという制限が出てきます。代入されるものが評価制限されるというのは、場合によっては致命的なバグになりかねないので、安全なのは３項演算子を用いた書き方だと思います。

参考
- [今日のPython: ブール演算について:](http://blog1.erp2py.com/2012/01/blog-post.html)
HTML5周辺(Chrome)の音声合成と音声認識で今何ができそうか？（ゲーム作ってみた）

概要
===
HTML5をめぐる様々な拡張のうちの一つでは、音声合成や音声認識が議論されています。
2015年の2月時点で、それらが使えそうかどうかについて試してみた点についてまとめておきます。
結論としては、Google Chromeくらいしかありませんね、ということになりますが、わかったことをまとめます。

音声合成
-------
音声合成は、PCとAndroid上のGoogle Chromeと、OSXとiOS上のSafariが対応していることになっています。
参考)Can I Use
http://caniuse.com/#search=speech

両者でも、対応している言語には差異があります。

ChromeとSafari以外では使用できないことから、現時点(2015年2月)では、ブラウザでの対応を期待した音声合成は、まだ期待しないほうがよさそうです。音声合成をスマートフォンアプリで使用したい場合などには別の手段を考えたほうがよさそうです。

Chromeでどのような音声が使えそうかについては、下記のコードをChromeで実行し、JavaScriptコンソールで眺めてみるとよいかもしれません。

```
<html><body>
<script lang="javascript">
speechSynthesis.onvoiceschanged = function() {
    var voices = this.getVoices();
	for(var i = 0; i < voices.length; i++) {
    	console.log(window.JSON.stringify(voices[i]));
	}
};
</script>
</body></html>
```

音声認識
-------
音声認識については、現時点(2015年2月)では、Google Chromeしか対応していません。かつ、Chromeにおいても、W3CのSpeech Recognitionを実装しきっているわけではありません(例:認識の文法)。

W3Cの「Web Speech API Specification」
https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html

現時点でできることは？
------------------
HTML5周辺技術で、ブラウザで音声合成と音声認識を行うことは、現時点では限られたレベルにとどまり今後に期待される事項であると言えます。

現時点でできることは、どのようなものがあるでしょうか。

WEB上の音声認識において、現時点でできることは、Google Chromeにおける実装の上で試していく他になさそうです。

ということで、ゲーム仕立てで一つ作ってみました。
これは現時点(2015年2月)でできることの一端ですが、何ができそう、何は難しそうの雰囲気を味わっていただくのには使えるかと思います。
Chromeが使えるPCかMacがあり、音が出せる環境であれば、以下をご賞味くださいませ。

https://hrkt.github.io/speechtest/index_ja.html

![game.png](https://qiita-image-store.s3.amazonaws.com/0/65002/0fae9ecf-7029-75cf-9e2d-392569f68601.png)


拾遺
----
上記のソース以外でハマった観点については、後日まとめる予定です。
.gitignore は自動生成してる



## まず gibo

gibo を使う
https://github.com/simonwhitaker/gibo

```shell-session
$ gibo osx
### https://raw.github.com/github/gitignore/408c616ae0ad8f4b8101d8e876b9b67ac6b14059/Global/osx.gitignore

.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear on external disk
.Spotlight-V100
.Trashes

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
```

上のように、 gibo を使うと .gitignore 用の行を出力する。
なので普通、シェルの ```>>``` (追記リダイレクト) で .gitignore に足していく

```shell-session
$ gibo osx python >> .gitignore
```


しかし、この操作では gibo でどのファイルを無視したのか記録しきれなくなる。

```shell-session:忘れて3回分記録してしまう例
$ gibo python >> .gitignore
$ # しばらく経つ
$ gibo python >> .gitignore
$ # しばらく経つ
$ gibo python >> .gitignore
```

3 回実行すれば、当然 3 回分追記される。忘れる方が悪いんだけど。

## そして .gitignore_gen

そこで、私はプロジェクト内に .gitignore_gen というファイルを作ることにしている。
.gitignore_gen は単に bash スクリプトになっている。
内容の例を以下に示す。

```bash:.gitignore_gen
#!/usr/bin/env bash -eu 
cd "${0%/*}" && exec > .gitignore
gibo osx
gibo linux
gibo vagrant
gibo python
```

内容は実にそのまま、 .gitignore_gen のあるディレクトリの .gitignore を上書きするようリダイレクトし、 gibo の出力を記録する。

```shell-session:権限をつけて実行
$ chmod +x .gitignore_gen
$ ./.gitignore_gen
```

このようにしておけば、 gibo で一度出力した内容をさらに .gitignore に記録してしまう可能性はない。

また、 gibo に含まれていないプログラミング言語やフレームワークの場合も、
以下の cat を利用してヒアドキュメントにできる。

```bash:.gitignore_gen
#!/usr/bin/env bash -eu 
cd "${0%/*}" && exec > .gitignore
gibo osx
gibo linux
gibo vagrant
gibo python
cat <<'EOF'

.foobar.conf
something_*.log

EOF
```
RailsでTextareaで入力された複数行の文字列を表示する


Textareaなどで入力された改行を含む文字列を次画面や別の一覧画面などで表示する場合に役立つTipsです。

## 実施したいこと

- 特殊文字のエスケープ
- 改行コードは<br />に変換

いくつかのブログエントリではHelperに自前のメソッドを用意している事例もありましたが、Rubyの ```h``` メソッドと、Railsの ```simple_format``` メソッドで出来ました。

```ruby:escape_and_br
# 複数行の文字列をラベルで表示する
<%= f.label :attr, simple_format(h @model.attr) %>
```

ラクチンですね。

---

# 参考

- h(ruby)
	- http://docs.ruby-lang.org/ja/search/query:CGI/type:module-function/module:ERB%3A%3AUtil/query:html_escape/#entry-0
- simple_format(rails)
	- http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html
DropboxなどでSublimeTextの設定を共有してて、プラグインのパス設定がうまくいかない時に原因かもしれないこと

超初歩的なものかもしれませんが、個人的にうんざりするくらいわからなかったので。。

sublimetextにSublimeLinterとSublimeLinter-phplintをいれ、コマンドもインストールしたのに（npm --global install phplint）SublimeTextで実行されない。
パスが通っていないからSublimeLinterの設定ファイルに記述しなければいけないのはわかっているけど、そのパスの通し方がわからなかった。

### 解決方法
SublimeLinter.sublime-settingsに
user->linters->phplint->argsの箇所に
"${home}/.nodebrew/current/bin/phplint"と記述する
記述パスは各コマンドパスにより変わります

[Settings — SublimeLinter 3.4.24 documentation](http://www.sublimelinter.com/en/latest/settings.html#setting-tokens)

他にもHTMLPrettifyというプラグインもnodeのパス指定を同じ方法で解決