OmniAICreator/Qiita-1.07M huggingface dataset:
Laravel 5 + ReactJS の奮闘記（システムのデザインパターン）

# 前説

新米SEとして日々奮闘しています。いまフルスタックエンジニアとしてECサイトの全般的業務をやっています。現場ではバックエンドから、migrationを作成してデータベースを叩いたり、追加された機能をhtmlに落とし込んでフロンドエンドまで、一機能を最初から最後まで作成しています。

これを生かして自分なりにLaravel 5とReactJSを設計してみました。

そして、今回設計してみた感想をまとめてみると

**良かった点**
* ES6のクラスを使ってJSを書いたので、PHPのクラスに近い形で開発できて気持ちよかったです。
* Elixirのおかげで、JSXやes6の設定が楽チンでした。
* フロントエンドからバックエンドまでよりわかりやすい形になりました。

**反省点**
* コンポネーツの数に比例してロード時のJSが大きくなります。
* JSの進化に追い付かずFluxの進化版Reduxを最近知りました。もっと勉強しなくては。。。

# 概要

全体の流れは次の図のように

```

Model -> Service -> Controller -> | -> View -> Action -> Dispatcher -> Store -> View
           Laravel                |        　　　　　 ReactJS

```

LaravelをAPIとして使い、ReactJSをアプリケーションとして使います。

そして、Laravel 5.2のelixir v4.0がデフォルトでbrowserifyに対応しているので、これを使えばes6が簡単にes5、それとjsxの変換ができます。

gulpfile.jsのelixir関数内に次のように定義すれば良いです。

```
elixir(function(mix) {

    // デフォルトの入り口がresources/assets/js/app.jsになります。
    mix.browserify("app.js");

    mix.sass('app.scss');
});
```

browserifyについてもっと詳細の設定はGithubのlaravel/elixirのレポジトリにて、ルートにあるConfig.jsを参照してください。


例えば、コンパイルされたes5の出力フォルダの設定は次のようです。

```
// 出力先はpublic/distになります
elixir.config.js.outputFolder = "dist";    

// browserifyが読み取る入り口はresources/myJsになります
elixir.config.js.folder = "myJs";   

// 先ほどの設定を合わせて、入り口は/resources/myJs/app.js
mix.browserify("app.js");  
```

上記の設定が完了したら、コマンド`gulp watch`でファイルを監視してもらい、自動デバッグしてもらいましょう。

# コンポネート別でバックエンドとフロントエンドを見ます

バックエンドからフロントエンドまでの流れは次の図のようになります。

![Blank Flowchart - New Page (1).jpeg](https://qiita-image-store.s3.amazonaws.com/0/60849/5c4196eb-1cab-a209-0c14-18377295233c.jpeg)

仮に、投稿機能を上記のシステムに当てはめてみると、次のファイルが必要とされることがわかります。ファイルの詳細内容に関しては[Githubのレポジトリ](https://github.com/edisonthk/laravel5_reactjs)に参照してください。

```
# ReactJS (FrontEnd)
resources/js/components/Post.js
resources/js/actions/PostAction.js
resources/js/Dispatcher.js
resources/js/stores/PostStore.js

# Laravel (Backend)
app/Http/Controllers/PostController.js
app/Services/PostService.js
app/Post.js
```



# そして、このサイクルをいくつの機能に量産してみると

上記の投稿機能、返信機能、ユーザ機能（サインアップ、ログイン）、バナー機能（CRUD）を増やしてみます。

![Blank Flowchart - New Page (3).jpeg](https://qiita-image-store.s3.amazonaws.com/0/60849/fbb03cdc-4277-0ff5-a457-c9f7b89054f2.jpeg)

一つのブロックにView, Action, Store, Controller, Service, Modelがあります。つまり、バナーブロックはBanner.js, BannerAction.js, BannerStore.jsなどが存在します。それをいくつ増やすと、上記の関係になります。

# Fluxと呼ばれる理由はこれか！

磁束（英語ではMagnetic Fluxと呼びます）と同じ形になり、設計の中心をフロントのdispatcherにし、それの周囲にコンポネートが存在する形になります。面白いことに、一方通行のところも一緒です。

![permanent-magnet1.jpg](https://qiita-image-store.s3.amazonaws.com/0/60849/62633dc9-0157-b2d9-1a1b-1ba7a459e36b.jpeg)

ReactJSでhtmlページ単位をさらにコンポネート単位まで細かくすることができます。これによって、どのビューがどのコントローラー、どのサービスに集約されているのかをよりわかりやすい形になったので、より簡単に運用することができます。

# 最後

Githubにこの記事の内容を載せています。もしよければ詳細はそちらを参照してください。そして、感想とコメントがいただけたら嬉しいです。

https://github.com/edisonthk/laravel5_reactjs

よろしくお願いします
Gvizでユースケース図を書く

Gvizでユースケース図を書いてみます

## <i class="fa fa-code" style="font-size:1em;"></i> プログラム
※同一ディレクトリに `./actor.png` を配置

```ruby
# encoding: UTF-8
require 'gviz'

Graph do
  global overlap: false
  normal_edge = { arrowhead: :none }

  subgraph do
    global label: "ウルトラ帳票管理システム"
    basic_node = {fontname:'MS GOTHIC', shape: :ellipse, style: :filled }
    node :createUser, {label: 'ユーザー登録'}.merge(basic_node)
    node :updateUser, {label: 'ユーザー更新'}.merge(basic_node)
    node :applyRole, {label: '権限の付与'}.merge(basic_node)

    node :outputReport, {label: '帳票出力'}.merge(basic_node)
    node :downloadReport, {label: '帳票ダウンロード'}.merge(basic_node)
    node :createReportTemplate, {label: '帳票テンプレート登録'}.merge(basic_node)
  end

  subgraph do
    global style: :invis
    node :user, { label: "一般ユーザー", labelloc: "b", fontname:'MS GOTHIC', shape: :none, style: :filled, image: "./actor.png" }
  end

  subgraph do
    global style: :invis
    node :adminUser, { label: "管理者", labelloc: "b", fontname:'MS GOTHIC', shape: :none, style: :filled, image: "./actor.png" }
  end

  edge :user_createUser, {label: "ユーザー情報を登録する" }.merge(normal_edge)
  edge :user_updateUser, {label: "ユーザー情報を更新する" }.merge(normal_edge)
  edge :adminUser_applyRole, {label: "権限を付与する" }.merge(normal_edge)
  edge :user_outputReport, {label: "帳票を出力する" }.merge(normal_edge)
  edge :user_downloadReport, {label: "帳票をダウンロードする" }.merge(normal_edge)
  edge :adminUser_createReportTemplate, {label: "帳票テンプレートを登録する" }.merge(normal_edge)

  save(:use_case, :png)
end
```

## <i class="fa fa-image" style="font-size:1em;"></i> 出力結果
![use_case.png](https://qiita-image-store.s3.amazonaws.com/0/43480/5f333457-04be-d650-f2b5-3223451dc0c6.png)
ウェブサイト制作の流れ

１　サイトのターゲットユーザーと目標を明確にする
　　　　　　　↓
２　情報を整理する
　　　　　　↓
３　ワイヤーフレーム作成
　　　　　　↓
４　グラフィックソフトでデザイン
　　　　　　↓
５　ＨＴＭＬ/ＣＳＳコーディング
　　　　　　↓
６　ＨＴＭＬ/ＣＳＳ以外に必要なプログラムを組み込む
　　　　　　↓
７　ウェブサイトを公開する
　　　　　　↓　
８　ウェブサイトを運用する
Vim初心者向け：Vimの使い方が分かるコマンド - "vimtutor"

vimの使い方を学ぶ際、おすすめの方法の１つとして"vimtutor"コマンドを使う、というものがあります。

今回はそのvimtutorについて、簡単に説明してみます。

## 対象読者

- `h` `j` `k` `l`で移動できることは知ってる
- `i`を打つと文字を打てるようになることは知ってる
- `:wq`で保存して終了することは知ってる

要はvim初心者です（自分もですが）。vimで最低限のことはできるけど、もう少し編集効率を上げたい、色々な操作方法を知りたい、という人が取り組むと、ワンランク上のvimmerになれるかと思います。

## vimtutorの使い方

```
$ vimtutor
```

このコマンドを実行すると、簡単なvimの使い方が表示されます。

```
===============================================================================
=    V I M 教 本 (チュートリアル) へ よ う こ そ        -    Version 1.7      =
===============================================================================

     Vim は、このチュートリアルで説明するには多すぎる程のコマンドを備えた非常
     に強力なエディターです。このチュートリアルは、あなたが Vim を万能エディ
     ターとして使いこなせるようになるのに十分なコマンドについて説明をするよう
     なっています。

     チュートリアルを完了するのに必要な時間は、覚えたコマンドを試すのにどれだ
     け時間を使うのかにもよりますが、およそ25から30分です。

     ATTENTION:
     以下の練習用コマンドにはこの文章を変更するものもあります。練習を始める前
     にコピーを作成しましょう("vimtutor"したならば、既にコピーされています)。

     このチュートリアルが、使うことで覚えられる仕組みになっていることを、心し
     ておかなければなりません。正しく学習するにはコマンドを実際に試さなければ
     ならないのです。文章を読んだだけならば、きっと忘れてしまいます!。

     さぁ、Capsロック(Shift-Lock)キーが押されていないことを確認した後、画面に
     レッスン1.1 が全部表示されるところまで、j キーを押してカーソルを移動しま
     しょう。
```

このチュートリアルの特徴は、チュートリアルの文章自体がvimで編集できる、という点です。そのため、理論だけではなく、実際に手を動かしてvimの使い方を学ぶことが出来ます。

```
                         レッスン 1.1:  カーソルの移動


       ** カーソルを移動するには、示される様に h,j,k,l を押します **
             ^
             k              ヒント:  h キーは左方向に移動します。
       < h       l >                 l キーは右方向に移動します。
             j                       j キーは下矢印キーのようなキーです。
             v
  1. 移動に慣れるまで、スクリーンでカーソル移動させましょう。

  2. 下へのキー(j)を押しつづけると、連続して移動できます。
     これで次のレッスンに移動する方法がわかりましたね。

  3. 下へのキーを使って、レッスン1.2 に移動しましょう。

Note: 何をタイプしているか判らなくなったら、<ESC>を押してノーマルモードにし
      ます。それから入力しようとしていたコマンドを再入力しましょう。

Note: カーソルキーでも移動できます。しかし hjkl に一度慣れてしまえば、はるか
      に速く移動することができるでしょう。いやマジで!
```

最初の説明にもありますが、実際にコマンドを試しながらでも数十分で終わります。ですので、一気に終わらせるのがおすすめです。行数こそ900行を超えていますが、やってみると案外すぐ終わります。


## さいごに

vimを学ぼうとする際、最初から[実践Vim](http://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Vim-%E6%80%9D%E8%80%83%E3%81%AE%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%97%E3%82%88%E3%81%86-Drew-Neil/dp/4048916599)のような書籍に取り組むのではなく、基本となるコマンドを抑えたvimtutorをやるのは、vim初心者としては理にかなった学習方法だと思います。

まぁ、自分も普段vimを使わないため偉そうなことは言えないのですが、そんな自分にとってもvimtutorは良い学習教材だと感じました。オススメです。
Excelの特定セルの情報を取得して標準出力してみる(Node.js)

Excelのある部分だけ抜き出したテキストファイルを作る必要があり、VBA?などを使うとできるらしいというのを見たのですが、面倒そうだなーと思って調べたらNode.jsやRubyなどからライブラリを使うことで簡単に読み込み・書き込みが出来るということで今回はNode.jsで特定のセル情報を取得して標準出力してみたときのメモ。

# 参考

+ [Node.jsでエクセルParseして出力など](http://kidooom.hatenadiary.jp/entry/2015/02/14/100000)
+ [SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)

# インストール

[SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)というnpmを使いました。

```bash
$npm install xlsx
```
# 書いた

fuga.xlsxを読み込み、hogeシートのG14～G21までを表示

```js
var XLSX = require('xlsx');

var base_column = 'G'
var start_row = 14;
var end_row = 21;
var sheet_name = 'hoge';
var file_name = 'fuga.xlsx';

var workbook = XLSX.readFile(file_name);
var worksheet = workbook.Sheets[sheet_name];

for(var i = start_row; i <= end_row; i++) {
  var cell = base_column + String(i);
  console.log(worksheet[cell].v);
}
```

その他、色々使い方はGithubのReadmeに書いてあった。便利だ。
今後も使ってみたい。
REST APIで複数のリクエストを１つのトランザクションで扱う

バックエンドの１URLにつき１テーブルを割り当てて、それぞれのURLに処理を投げるところはJavaScriptに書きたい。
と、すると、複数のURLで１つのトランザクションを処理することになる。
これまで、１つのURLでトランザクション開始→commit, rollbackの手しか使わなかったので、違う手法を取らざるを得なくなった。


検索すると、丁度以下の記事があたった。

http://developer.cybozu.co.jp/archives/kazuho/2010/04/rest-re-web-a6d.html（Kazuho@Cybozu Labs）

「long-running transaction」に惹かれたけれども、今使っているフレームワークやPHPのリソース管理の仕組みがよくわかっていないので、

```/transaction```→各REST APIで実行パラメータをSessionに保持→```/commit```で遅延実行

な感じの２層コミットで実装することにした。

トランザクションを代行するServiceの雰囲気実装案を置いておく。（デバッグ時間 0秒です）

```php
<?php

Loader::loadLibrary('util');

class TransactionService extends Service {
    /**
     * トランザクションを開始する
     * @return mixed transaction id;
     */
    public function start() {
        while(true) {
            $guid = com_create_guid();
            $session = new Session($guid);
            if ($session->exists('used')) {
                continue;
            }
            break;
        }
        $session->set('uses', true);
        $session->set('services', []);
        return $guid;
    }

    /**
     * 実行するサービスを登録する
     *
     * @param $tranid
     * @param $serviceName
     * @param $method
     * @param $param
     */
    public function addExecute($tranid, $serviceName, $method, $param) {
        $session = new Session($tranid);
        if (!$session->exisits('used')) {
            throw new Exception('トランザクションがありません。id:'.$tranid);
        }

        $service = [
            'name' => $serviceName,
            'method' => $method,
            'param' => $param
        ];

        $services = $session->get('services');
        array_push($services, $service);
        $session->set('services', $services);
    }

    /**
     * トランザクションのcommit
     *
     * @param $tranid
     * @param $serviceName
     * @param $method
     * @param $param
     */
    public function commit($tranid) {
        $session = new Session($tranid);
        if (!$session->exisits('used')) {
            throw new Exception('トランザクションがありません。id:'.$tranid);
        }

        $services = $session->get('services');

        $components = [];
        try {
            foreach ($services as $service) {
                $component = Loader::loadService($service['name']);
                $method = $service['method'];
                $param = $service['param'];

                $classname = get_class($component);

                $component->begin();
                (new ReflectionMethod($classname, $method))->invoke($component, $param);
                array_push($coponents);
            }

            foreach ($components as $component) {
                $component->commit();
            }
        } catch(Exception $ex) {
            foreach ($components as $component) {
                $component->rollback();
            }
            throw $ex;
        }

        $session->clear();
        $session->closeWrite();
    }

    /**
     * トランザクションのrollback
     */
    public function rollback($tranid) {
        $session = new Session($tranid);
        if (!$session->exisits('used')) {
            throw new Exception('トランザクションがありません。id:'.$tranid);
        }

        $session->clear();
        $session->closeWrite();
    }
}
```
a9a dataの分類精度メモ

a9a 
https://www.csie.ntu.edu.tw/~cjlin/libsvmtools/datasets/binary/a9a

を各種分類器で分類した時の精度評価メモ

a9aはlinear separableでないので、これを使って
FFMの分類性能をまずはみる。

# liblinear

parameterはデフォルト

closed testの結果は

- c=100, 1, 0.001で軽く学習。
- c=1.0、0.001は大差なし。
- c=100は、69%前後。

```
masabon:myliblinear masabon$ ./predict.sh ./data/a9a_train.svmdata a9a_train.svmdata.model o
Accuracy = 84.9237% (27652/32561)

masabon:myliblinear masabon$ ./train.sh data/a4a 
...........*.
optimization finished, #iter = 120
Objective value = -2007.96
nSV = 2922
masabon:myliblinear masabon$ ./predict.sh data/a4a a4a.model o2
Accuracy = 84.9822% (4063/4781)
```


# myffm

- k = 100
- maxiter =20
- #train = 5000 (a4a相当)
- 学習率は固定。要、adagra, adadelta対応
- SGD実装
- closed testなのであくまで参考程度
 - 次はcvで 
- #train = 1000の場合は、90%程度いった。処理が遅いので、maxiterを増やすのにも時間がかかる。要高速化
- field idは単純に列の順番、feature idはそのまま、valueは1固定
- linear termはoff設定
- lambda = 0.0001, alpha=0.01固定


```
%19----
pp: 871
pn: 367
np: 364
nn: 3398
acc: 0.8538
likelihood=117605.88086645157
%%%
pp: 897
pn: 341
np: 318
nn: 3444
acc: 0.8682

#44----
pp: 943
pn: 295
np: 288
nn: 3474
acc: 0.8834
likelihood=83245.71565255232
---
pp: 1097
pn: 141
np: 493
nn: 3269
acc: 0.8732
#############

#############
#49----
pp: 950
pn: 288
np: 270
nn: 3492
acc: 0.8884
likelihood=78719.89344336146
---
pp: 1092
pn: 146
np: 481
nn: 3281
acc: 0.8746
```

\#train=1000の場合

closed testではあるが、90%超になる。
2次の項はそれなりに効いている模様

```
#############
#11----
pp: 178
pn: 58
np: 57
nn: 707
acc: 0.885
likelihood=56379.20298554983
---
pp: 187
pn: 49
np: 39
nn: 725
acc: 0.912

.
.
.
#49----
pp: 221
pn: 15
np: 15
nn: 749
acc: 0.97
likelihood=49211.286605422545
---
pp: 230
pn: 6
np: 55
nn: 709
acc: 0.939
```
CentOSでリポジトリを壊しちまった

やっちまった。
CentOS 6でEPELリポジトリを設定したけど、
うっかりCentOS 7用のリポジトリを設定しちゃった。

rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/7/x86_64/e/epel-release-7-5.noarch.rpm

このコマンド実行後にyum installコマンドを実行するとこんなエラーが出てきた。

エラー: xz compression not available

色々、ググってみたらリポジトリが壊れていることが原因らしい。

勝手な想像でCentOS 6用のリポジトリを入れると上書きされて治ると思って実行

rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm

EPELリポジトリが競合するといったエラーメッセージが出た。

改善策が調べても思いつかなかったので、EPELリポジトリを消して、再度、入れ直すためにEPELリポジトリのリリースを削除

rpm -e epel-release-7-5.noarch

念のため、キャッシュからも削除

rm -rf /var/cache/yum/x86_64/7/epel

再インストール

yum -y install epel-release

EPELリポジトリ設定

rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm

やっと、OSに合ったバージョンのEPELリポジトリが設定できた。

反省点として、何でも闇雲に最新版を入れようとするのはやめよう。
bash trapを使用したタイムアウト処理


## 内容
trapコマンドを使用したタイムアウトの処理を作成したので、備忘録として残しておく。
使用するシグナルは2（キーボードからの割り込み）。

## 処理

▼スクリプト内容

``` bash:timeout_test.sh
# タイムアウト設定 (5秒間入力がない場合、プロセスを終了する)
trap "echo 'Time out!' 1>&2 ; exit 1" 2
(sleep 5; kill -2 $$) &                 # タイムアウト用プロセス
timeoutpid=$!                           # タイムアウト用プロセスID

# タイムアウト対象処理
# ユーザが入力した文字をそのまま出力する。
# 5秒以内に入力がない場合、タイムアウトを発生させ処理を終了する。
echo 'input : '
read inputstr
# 5秒以内に入力があった場合、タイムアウト用プロセスを終了する。
if [ $(ps -ef | awk '{print $2}' | grep "$timeoutpid" | wc -l) -ne 0 ] ; then
  kill $timeoutpid
fi
echo "input -> $inputstr"
```

▼実行(5秒以内に入力)

```console
$ sh timeout_test.sh
input :
aaa
input -> aaa
```

▼実行(5秒以上待機)

```console
$ sh timeout_test.sh
input :
Time out!
```
Safari 9.0.3 アップデートでスマート検索フィールドが機能しなくなる

OSXのアップデート(10.11.3)が来ていたので更新したら、Safariにバグが生じた。


# 環境
Mac OS X 10.11.3 El Capitan
Safari 9.0.3


# 症状
具体的にはタイトルで上げた「スマート検索フィールドの表示がおかしくなる。」問題に加え、「複数タブを開いたとき、3つ目以降のタブが表示されない。」問題が発生した。

![図1](https://qiita-image-store.s3.amazonaws.com/0/32276/5209640f-9453-b32d-4e4d-9d1058afc592.png)

上図のように、検索フィールドの背景文字が重複しフィールドに文字を入力しEnterを押しても検索がされない状態に陥った。


![tab bug.png](https://qiita-image-store.s3.amazonaws.com/0/32276/946075f7-e806-c4d1-dee6-9acfda4a5fc2.png)

また、複数タブを開いたときに3つ目以降のタブが表示されなくなった。
上図において、[YAHOO! JAPAN](http://www.yahoo.co.jp "Yahoo")は3つ目のタブで開いているがタブの一覧にはYahooのタブは表示されていない。


# 解決策
Apple Support Communitiesに筆者と同様の事例が複数報告されていた。
[このスレッド](https://discussions.apple.com/thread/7438829 "このスレッド")に限らず複数のスレッドで解決策が書かれていたので参考にさせてもらった。

1. メニューバー > Safari > 環境設定... を開く
2. 「検索」タブを開く
3. スマート検索フィールドの全項目のチェックを外す

![Screen Shot 0028-01-27 at 22.20.33.png](https://qiita-image-store.s3.amazonaws.com/0/32276/bd701255-c559-8e23-f28d-7030013704b3.png)

これでスマート検索フィールドの問題とタブの問題が解決できた。
スマート検索フィールドの設定がなぜタブの表示に影響するのかは分からないが、今の所問題は起きていないのでこれでよしとしよう。
UbuntuにRをインストール

以前、ブログに書いた内容を再掲します。
何も考えずにapt-get install r-baseとすると、実は大変古いバージョンがインストールされます。

# apt-getの前の下準備
まず、Ubuntuのバージョンを確認。
`cat /etc/lsb-release`
ここで出てくる、「DISTRIB_CODENAME=hogehoge」は要確認です。  
次ダウンロード元のミラーサイトを登録します。
`$ sudo vi /etc/apt/sources.list`
一番下の行に
DISTRIB_CODENAME=hogehogeの場合
`deb https://cran.ism.ac.jp/bin/linux/ubuntu hogehoge/`
を追加します。
（2017年3月22日追加）※時々、統数研のcranが死んでることもあります。ご注意ください。

次に公開鍵登録のため、次のコマンド入力。
`$ gpg --keyserver keyserver.ubuntu.com --recv-key E084DAB9
$ gpg -a --export E084DAB9 | sudo apt-key add -`

# とどめのapt-getだ！
`sudo apt-get update
sudo apt-get install r-base`
これで終了。
※RStudioはRstudioのサイトからダウンロードしてインストールしてください。

[参考]
[UbuntuにRをインストールするための手順 | トライフィールズ](http://www.trifields.jp/install-r-in-ubuntu-1000)
[The Comprehensive R Archive Network](http://cran.md.tsukuba.ac.jp/)
Babel6 + rollup.jsをやるにあたってちょっとハマった話



*2016/09/06追記: Babel 6.13以上より、presetsのオプションとして、`modules`指定ができるようになったため、`babel-preset-es2015-rollup`は不要になったようです。*
*詳しくは[rollup-plugin-babel](https://github.com/rollup/rollup-plugin-babel)をご確認下さい*

---

ちょっと調べれば良い事だけどちょっとハマったのでメモ

# 発端
とりあえずbabel公式ページの[rollupのinstall](https://babeljs.io/docs/setup/#rollup)にしたがってみたがどうにもうまくいかない

## 何が起きたか？
```
It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
Error: It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
```
こんなエラーが。

# 解決

結局`babel-preset-es2015-rollup`が必要ということだった。

```
$ npm install rollup -D
$ npm install rollup-plugin-babel -D
$ npm install babel-preset-es2015-rollup -D # これが必要
```

babelの設定もあわせてこんな感じで行う

```package.json
    :
  "babel": {
    "presets": [
      "es2015-rollup"
    ]
  },
   :
```

あとはrollupの設定

```rollup.config.js
import babel from "rollup-plugin-babel"
export default {
  entry: "src/index.js",
  dest: "dest/index.js",
  plugins: [babel()]
}
```

うまくいった！
C++で書かれたRuby拡張をWindowsで使うには

RubyのGemの中には、C言語やC++で書かれたネイティブモジュールが付いていることがあります。そして、DevKitという、専用のMinGW環境を入れておけば、Windowsでもそこそこ使えるものとなることが多いです。

# インストールに失敗したGem
そんな中で、[ruby-minisat](https://github.com/mame/ruby-minisat)というGemを使おうとしました。これは、MiniSatというSATソルバーをRubyから使うためのGemです。ソルバー本体はC++で書かれていて、RubyエクステンションにするためにC言語へバインディングしてある、というような感じです（なお、Ruby部分はほぼないという変わり種です）。

もちろんLinux上では何も問題が起きずにインストールできたのですが、Windowsでインストールしようとしたら、「`zlib.h`がない」というメッセージを吐いて、途中で止まってしまいました。そう言われてzlibを用意したりしたのですが[^1]、問題の根っこはもっと深いところにありました。

## ビルドは通ったんだけど…
調べている途中に、zlibなしでも動きそうだということに気づいたいので、フォークしてzlib依存を取り払ったバージョンを作ってみました（[jkr2255/ruby-minisat](https://github.com/jkr2255/ruby-minisat)）。そして、こちらを[`gem specific_install`](http://qiita.com/yuku_t/items/5ab4fbe404b718999a35)してみたところ、Native Extensionのビルドにも無事成功しました。

ところが、さあ使おうと思って`require 'minisat'`としたところ、まともに読めないエラーメッセージを吐いて失敗する事態となってしまいました。

# 依存関係の闇
調査のために、生成した`.so`ファイルを`ldd`にかけてみたところ、`libstdc++`や`libwinpthread`といった、MinGWのC++ライブラリを参照するようになっていました。Git BashのようなMSYS環境ならともかく、プレーンなコマンドプロンプトからアクセスしてはこれらが見つからないことになってしまいます。

# C言語とC++の違い
一方、C言語で書かれたエクステンションの場合にはこのようなことにはなりませんでした。それは一体何が違うのか気になったので追いかけてみると、なんとMinGWはC言語の標準ライブラリとして`msvcrt.dll`という、Windowsに標準添付されているライブラリを使う、ということが判明しました。

C言語とC++でまったく別系統のライブラリを使うのも不思議だなと思ったのですが、C言語ではMicrosoftが関数の呼び出し方などを標準化しているために、ぜんぜん違うコンパイラの作ったDLLでも問題なく呼べるのに対して、C++ではコンパイラごとに関数やメソッドへの命名法が違ってくるため、コンパイラごとに専用のC++ライブラリが必要となる、ということでした（この事情については、[Wikipediaの「名前修飾」の項](https://ja.wikipedia.org/wiki/%E5%90%8D%E5%89%8D%E4%BF%AE%E9%A3%BE)が詳しいです）。

# 対策
自分で使う分にはどうとでも回避できるとは思うのですが、Windowsユーザーへ広く頒布するとなると、どうすればいいのか悩ましい所ではあります。

- C++ライブラリにパスを通す、あるいは適切な場所にコピーする
 - メリット: 一度設定すれば、何も考えなくていい
 - デメリット: 第三者に利用させるにはハードルが高くなる
- C++ライブラリを[静的リンクさせる](http://qiita.com/nocd5/items/29af80e5654938d1c128)
 - メリット: 環境にあるもので設定変更せずに動かせるようになる
 - デメリット: ファイルサイズが大きくなる、mkmfからどう設定すればいいのかわからない
- Visual C++でコンパイルしたライブラリを添付する
 - メリット: Windowsに比較的よくあるライブラリを参照するので、ライブラリも大きくならずに済む
 - デメリット: Visual C++の環境構築が面倒、Rubyのバージョン＆32 or 64ビットごとにライブラリが必要


[^1]: 実際には、Gemからはzlibに依存する部分は使っておらず、元のプログラムをそのまま使っていたがために出た不要な依存関係でした。
Javaのベンチマークツール、JMHの導入


[文字列連結について検証しようと思ったらそもそも検証の仕方が予想していたのと全然違った件](http://wp.me/p5PRUc-7W)の中で [@cero_t](https://twitter.com/cero_t) さんが紹介していた、JMHを入れてみたのでそのメモ。

テストコードを書いて動かすまでの流れは [Javaのベンチツール、JMHにテストコードを書いて計測してみる](http://qiita.com/deaf_tadashi/items/19ed0529b5c8e1937f4f) を参照。

[Javaのマイクロベンチマークツール「JMH」](http://acro-engineer.hatenablog.com/entry/2013/11/07/120606)

この記事の中ではzipをダウンロードして云々と書いてあるが、今はmvnコマンドを打てば環境ができちゃう模様。

1.以下のコマンドを打ってプロジェクトの雛形を作成する。

```
mvn archetype:generate -DinteractiveMode=false -DarchetypeGroupId=org.openjdk.jmh -DarchetypeArtifactId=jmh-java-benchmark-archetype -DgroupId=任意 -DartifactId=任意 -Dversion=1.0
```

2.コンパイル

```
mvn clean install
```

3.実行

```
java -jar target/benchmarks.jar
```

※[公式サイト](http://openjdk.java.net/projects/code-tools/jmh/)に明記されている。

IDEでプロジェクトを開きたいときは、mavenプロジェクトのインポートをすればよい。
underscoreコードリーディング（once）



underscoreに詳しくないので、勉強半分でソースコードを読む。



##利用するバージョン
[underscore.js(v1.8.3)](https://github.com/jashkenas/underscore/tree/1.8.3)


##onceとは


###[underscorejs.orgのonce](http://underscorejs.org/#once)

こんな説明。
>####_.once(function) 
>Creates a version of the function that can only be called one time. 
>Repeated calls to the modified function will have no effect, returning the value from the original call. 
>Useful for initialization functions, instead of having to set a boolean flag and then check it later.


```javascript
var initialize = _.once(createApplication);
initialize();
initialize();
// Application is only created once.

```
------------- 
一回しか呼び出すことの出来ない関数を生成します。
関数を複数回呼び出しても、その関数はなんの効果もないように/元の関数の値が返らないように修正されます。
booleanのフラグを使って後でチェックするような、イニシャライズするような関数にとって役に立ちます。



###[underscore.once](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L897)
コード的にはこのあたり。

```javascript
  // Returns a function that will be executed at most one time, no matter how
  // often you call it. Useful for lazy initialization.
  _.once = _.partial(_.before, 2);

```

_.partialを用いて、_.beforeに2を与える。
_.beforeは与えられた回数未満の回数しか関数を実行できないとするもの。
（前置インクリメントなので、2を渡すと2回目には使えない。）
Mavenを久々に動かそうとしたらJavaのHelpが出たとき

Windowsで久々にコマンドプロンプトからMavenを動かそうとしたらいろいろエラーで動かなくなった時の手順をメモっておく。

1. JAVA_HOME の設定を確認する。
jdkを整理した結果、削除したバージョンがまだJAVA_HOMEに設定されているかもしれない。
最新版のPathを設定してあげる。

2. java -version で指定したバージョンがあっているか確認
想定したものと違う場合、下記が原因かもしれない。
[WindowsでJDK 7とJDK 8を切り替える際の注意点](http://daregada.blogspot.jp/2015/03/windowsjdk-7jdk-8.html)


結果的に、JAVA_HOMEはシステム環境変数のPathの一番頭に定義して、C:\ProgramData\Oracle\Java\javapath;を一番後ろに持ってくることで環境が復旧した。
Mavenに関する定義は修正不要だった。
※Mavenを置いたディレクトリを移動していた場合は環境変数 M2_HOME も変更が必要。
grapeで作成したAPIのconcernモジュールのRSpecを書く方法


# 概要

APIで共通の処理がある場合に、concernsディレクトリ以下のファイルに共通処理を書きDRYにしたい。
そのときにRSpecをどう書くかというお話です。
APIだけでなく、controllerの場合でも同様の方法が使えます。


# 方法

API(or controller)のconcernモジュールのテストで困るのは、エンドポイントをどうするかという点です。

方法としては、

* モジュールをincludeしているAPIそれぞれにRSpecを書く
* モジュールをincludeしているAPIのうち代表してひとつにのみRSpecを書く
* 一般的なAPIをテストの時にのみ定義して、その一般的なAPIに対してRSpecを書く。

といったものがあるかと思いますが、今回は最後の方法を紹介します。

大まかに、以下の手順で行います。

1. RSpecの中でfakeのAPI、エンドポイントを作成する
2. fakeのAPIに当該モジュールをincludeする
3. そのエンドポイントに対してリクエストを送りモジュールのテストをする


# 具体例

以下はinternalなAPIの認証のための処理で、正しいトークンを送っていない場合にBadRequestを発生させるモジュール。
このような処理はinternalなAPI全てで必要になるため、concerns以下に切り出している。

```ruby:app/api/concerns/application_token_error_handler.rb
module ApplicationTokenErrorHandler
  extend ActiveSupport::Concern
  included do
    before do
      if params[:application_token] != Settings.application_token
        raise ActionController::BadRequest.new("Invalid application token #{params[:application_token]}")
      end
    end
  end
end
```

これに対するRSpecは以下のように書けます。
ポイントはRSpecの中で一般的なanonumousというエンドポイントを作成して、そこにリクエストを送るということです。

```ruby:spec/requests/api/concerns/application_token_error_handler_spec.rb
require 'rails_helper'

describe ApplicationTokenErrorHandler, type: :request do
  before do
    # 1. fakeのAPIクラスとエンドポイントを定義
    class FakeApi < Grape::API
      # 2. テストしたいモジュールをincludeする
      include ApplicationTokenErrorHandler
      resources :anonymous do
        params do
          requires :application_token, type: String
        end
        get '/' do
          return status 200
        end
      end
    end
    
    # APIのルーティングを行うクラスにmountする(詳細は記事の範囲外なので省略)
    class API < Grape::API
      mount FakeApi
    end

    # 3. 上で定義したエンドポイントをリクエストする
    get '/anonymous', { application_token: application_token }
  end

  # テスト終了後に定義した定数を削除する
  after { Object.send :remove_const, :FakeApi }

  #
  # あとはいつも通りのAPIのテスト
  #

  # 正しいapplication_tokenをパラメタにしてリクエストした場合は200になる
  context 'application_token is right' do
    let(:application_token) { Settings.application_token }
    it { expect(response.status).to eq 200 }
  end

  # application_tokenが間違っている場合は400になる
  context 'application_token is mistaken' do
    let(:application_token) { 'invalid_token' }
    it { expect(response.status).to eq 400 }
  end
end
```


# 参考

grapeによるAPIの作成方法。
http://qiita.com/anoworl/items/756f01cc3d188ebad139

Controllerのconcernsモジュールをテストする例。
http://stackoverflow.com/questions/22055889/how-to-test-a-controller-concern-in-rails-4
ビットコインのブロックチェーンから入金確認をする

# ブロックチェーンから入金確認

入金確認し残高を反映するにはデータベースが必要になります。

## 用語

### UTXO

* unspent transaction output
* 未使用トランザクション出力

まだ支払いに使っていないトランザクションのこと。
（ビットコインではこれを合計したものが残高です）

### TXID

* transaction id
* トランザクションID

トランザクションにつけられたID

### VOUT

* value out
* 出力

トランザクション内の出力番号。
一つのトランザクションで複数のアドレスへ送金できるため
トランザクション内の送金番号のようなもの。

## 入金のフロー

* ビットコインのアドレスに着金したUTXOがあるか確認
* UTXOが存在したらTXIDとVOUTで複合キーまたはユニークIDを作り未承認状態としてデータベースに登録する
* データベースにTXIDとVOUTが存在していたら登録しない
* TXIDで取得したトランザクションが承認されたか確認し承認されたら承認状態とし残高に反映する
* 承認されなかった場合はエラー状態にする

※TXIDは入金の主キーとして使うことはできないので気をつける。
※承認されなかった場合とはトランザクションがTXIDで取得できなくなること。（複数のブロックエクスプローラを参照している場合は片方届いてもう片方届いてない場合もあるので時間差も考慮する）

## UTXOのサンプル

### insightへアクセスする

```
https://insight.bitpay.com/api/addr/12c6DSiU4Rq3P4ZxziKxzrL5LmMBrzjrJX/utxo
```

### 入金があれば以下のようなUTXOが得られる

```
[
{
 "address":"12c6DSiU4Rq3P4ZxziKxzrL5LmMBrzjrJX",
 "txid":"a162df9f7653ad982e8f630c95c7f7c2bd42d38a1fd4ec4588f611fab4d19b53",
 "vout":5,
 "scriptPubKey":"76a914119b098e2e980a229e139a9ed01a469e518e6f2688ac",
 "amount":0.0002023,
 "satoshis":20230,
 "height":417969,
 "confirmations":1666
},{
 "address":"12c6DSiU4Rq3P4ZxziKxzrL5LmMBrzjrJX",
 "txid":"99d1be2407a19c0bfd5909d7a70cf7267877eaaf1987dc8789efeedb5a6993ad",
 "vout":1,
 "scriptPubKey":"76a914119b098e2e980a229e139a9ed01a469e518e6f2688ac",
 "amount":0.000055,
 "satoshis":5500,
 "height":411497,
 "confirmations":8138
}
]
```
Swift 開発者が Unity の勉強を始めたの巻

なぜにいまさら Unity？

うんまあ正直言うと、主観的な感情論を言うと筆者は別に Unity が好きってわけじゃない（でなきゃとっくの昔に勉強始めてた）、というかむしろエンジンの中では好きでない方です。理由はいくつかあって、その中で一番大きいのは「効率が良くない」、ですかね。特に 4.X 系まで（5.X 系は良くなったと信じる）。あと自分が知ってる既存の Unity で作られたゲームの中では、ある特徴があって、みんなシーンの切り替え（例えばゲーム画面からメニュー画面を呼び出すときとか）が非常に遅いのです。これは Unity が悪いのかプログラマが悪いのかは知らないのですが、少なくとも筆者の Unity に対する印象はあまりよろしくないのが否めないのです…

ところが Microsoft が去年 HoloLens を発表しました。素晴らしいです。最近のマイクロソフトさん超絶にイケてます。早くいじってみて何か作ってみたいのです。でも未だに SDK が公開されてません。それに公開されたところで、マイクロソフトさんのことですからフレームワークは .NET でしょうし開発言語も C# でしょう。でも C# なんて触ったことがまったくないし文法すら知らないから仮にいきなり SDK 公開されたところで何もできない。

ここで Unity の出番です。3D 開発の勉強もできてついでに C# の勉強もある程度できるから一石二鳥じゃないか。というわけで早速教材買ってきました。
![IMG_2606.JPG](https://qiita-image-store.s3.amazonaws.com/0/63998/309f09ae-adfc-631a-7936-f29008fd702c.jpeg)

さてこの記事の目的はというと、Unity やってみたいけど Unity 経験がまったくない Swift 開発者（世の中に果たして何人いるでしょうか…）のために、つまづきやすいポイントをピックアップして、その対策を伝える、もしくは意見を伺うことです。

##命名規則がイマイチ慣れない
うんまあこれも我慢するしかないのかな。C# も Unity も初心者どころか今まで触ったことがまったくないので~~どっちのせいなのかは知らないのですが~~ C# の命名規則のせいですね、とりあえずどうやら Unity で C# で開発する時、メソッド名もアッパーキャメルケース（UpperCamelCase、略してUCC）です。これ慣れの問題かもしれませんが、ただ正直これソースコード読むと分かりづらい部分あるんですよな…

例えば Swift（以前の Obj-C も同様）の場合、UCC はクラス名、フレームワーク名などと言った「抽象的なものの定義」にしか使わないので、具体的なもの、つまりクラスから生成された具体的なインスタンス名や、そのインスタンスに自然と入るプロパティやメソッドは全て LCC（lowerCamelCase、UCC との区別は 1 文字目が大文字か小文字かです）です。ところが Unity の場合、メソッド名も UCC ですので、一瞬「あれ？これは何かのオブジェクトを作るんだっけ？」って反応になっちゃいます。あ、でも C# だから、オブジェクト作る時 `new` のキーワード入るからそれみればいいのか。

##IDE の補完がクソすぎる
うんまあこれは多分どうしようもありません。頑張って慣れるしかないのです。
ちなみにどこが一番クソかというと、先頭文字入れて補完リストが出てきたけど、うっかり間違った補完を選んでしまった時。この場合、間違った補完されたテキストだけ消しても補完リストがもう一度出てくれない（Visual Studio と同じ仕様）。なんとかなんないの？

あとはこれはおそらくこれ Unity 5 の改悪ですけど、Swift は 2 から大幅に大域関数を削除してなるべく protocol に入れたっていうのに、Unity 5 がむしろ逆にもともとインスタンスメソッドやプロパティにあったものを大域関数に変更したという。（例えば上記の教科書の Lesson 2 のサンプルコードにオブジェクトの速度ベクトルを取得するコードですが、Unity 4 の時は `rigidbody.velocity` で取得できたものを Unity 5 の時 `GetComponent<Rigidbody>().velocity` で取得するようになった）。これの何が問題かというと大域関数が多いとなかなか補完がすぐ出て来ないということになるのです。ただでさえ補完がクソなのに。

##言語仕様的にオーバーライドが明示的でないからたまにパニックる
これある意味補完がクソの延長線になるものですけど、要するにゲームオブジェクトクラスのサブクラス作るじゃん？んでそのサブクラスで親クラスのメソッドをオーバーライドしたいじゃん？そしたらね、親クラスのメソッド名を入れても補完してくれないのですよ。だからメソッド名を律儀に全部入力しないといけなのですが初心者だからたまに「あれメソッド名ってこれでいいんだっけ？」ってなります。小さなスペルミスのためにいろいろ探し回ったりすることもありました。せめて補完が効いて欲しいですね。その上さらに Swift みたいに明示的なオーバーライド文法ならベストなのですが、まあ何年も前の C# に最新の Swift の仕様を求めるのもひどいしそんなこと言ったら Obj-C だって明示的オーバーライドじゃないじゃん？ってなるから黙っておきます。とにかくこれ仕様だから初心者のうちに様々な既存メソッド名を覚えておくしかないのです。

##実行する前に自動保存してくれない
実行する前に忘れずに保存しましょう。Unity は実行前の自動保存機能がない（っぽい）ので実行する前に必ずファイル保存しましょう。
まあでもこれはちょっとなんとかして欲しいところですね、Xcode の癖でちょっと細かいソースコード修正して実行してみたら「あれ？さっきと変わらんぞ？？」ってなったことが何回かありました。まあ幸いエディターに保存していないファイルに印をつけてくれているのでこれで少なくとも保存していないファイルのピックアップはできますが…

***
2016/02/09 追加
##「抽象クラス」が便利そう
まあありますよね、子クラスでオーバーライド前提のメソッド。Swift の場合は `protocol` は確かに `extension` ではなく本体で定義したメソッドは全て実装側できちんと中身定義しないといけないように作られていますが、それはあくまで共通なプロトコル、もしくは C# で言うところの共通のインターフェースというものであり考え方としては全くの別物ですし。まあここら辺は Cocoa の書き直しもかかってるわけですから多分当分の間は難しそうかもしれませんが…
***

まあとりあえず今の所はこんな感じかな？また何か気づいたら随時追加する予定です。
いや別に Unity を dis るつもりはないのですよ？ただいろいろつまづいたり慣れなかったりするポイントをある程度まとめて Unity やるときにここら辺注意しておこう、というのが目的です。テキストが dis ってるように見えるのはきっと筆者の心が汚れているからでｓ(ry
iOSでアンダーバー付きのレイアウトを作ってみました（Swift） 

いつも見ているだけだったので、初めて投稿します

#１、始めに
iOSアプリをSwiftで開発を始めて、地道に作ってきた中で、
Webに近いUIデザインを作り必要ががありました。

下線・アンダーバーです。

最初は、
UIView・・・アンダーバー用（アンダーバーの色を指定）
└UIView・・・マージン用（bottomに1pxのマージンを入れます）
　└UILabel・・・（UIViewを一枚いれるのは、アンダーバーとの位置調整のため）
として、UIViewで余白を作り、backgroundColor指定して作っていました。
Storyboardの見た目は確認できますが、複雑になるため他の方法を考えていました。

#２、やったこと
とりあえず調べましたが、なかなかイメージにフィットする物がなく、
自前で作って見ることにしました。

#３、何を作ったか
Storyboardでは確認できませんが、カスタムのUIViewをを作りました。
Storyboardでカスタムクラスを指定して、
User Defined Runtime Attributesで色を指定できるようにしました。

#４、どんなカスタムクラス
```
class BottomBorderView : UIView {
        
    var borderLayer: CALayer!
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        self.borderLayer    = CALayer()
        self.layer.addSublayer(self.borderLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.borderLayer.frame  = CGRectMake(0, self.frame.height - 1, self.frame.width, 1)
    }
    
    var borderColor: UIColor? {
        get {
            return UIColor(CGColor: self.borderLayer.backgroundColor!)
        }
        set {
            if let val = newValue {
                self.borderLayer.backgroundColor    = val.CGColor
            }
        }
    }
}
```
layoutSubviewsで調整しているのは、
その他のタイミングではAutoLayoutが反映されていない状態になってしまうからです。

#５、使い方
![スクリーンショット 2016-01-27 20.34.21.png](https://qiita-image-store.s3.amazonaws.com/0/48258/59a0892b-dc54-7ca3-39f8-e12bd49556f1.png)

こんな感じで使えます。
Storyboardでは見れませんが、実行時にはアンダーバーが表示されます。

#６、最後に
この実装方法がいいのか**全く**わかりません。
ので、ツッコミお願いします。勉強のためにも。

あと、今は色指定だけなので、高さ指定もできるようにしてみたいです。
YouTube動画の埋め込みを軽くする

YouTube動画の埋め込みコード。
サイトに複数貼り付けると重い。でも貼り付けたい。
そんな埋め込みコードを、自動でサムネイル画像に置換することで軽くする方法です。
JavaScript(jQuery)を使用します。

# 軽くする方法
基本はこちらの記事のコードを使用させていただきました。
http://qiita.com/yuyaonrails/items/5ecb24fca0d54abccdab

それに加えて、

- widthとheightも取得する
- 動画埋め込みオプションの「動画が終わったら関連動画を表示する」をOFFにする(URLパラメータが加わるので上記コードだとサムネイルが取得できない)
- サムネイルにYouTube公式のアイコンを付けて、通常の埋め込みと同じような見た目にする

# コード
```html:HTML
<!-- YouTubeの埋め込みコードをdivで囲む(複数貼り付ける時も動画1つずつ囲む) -->
<div class="youtube">
<iframe width="320" height="180" src="https://www.youtube.com/embed/動画ID?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
```

```css:CSS
.youtube {position:relative;}/* ラッパー */
.youtube_play:hover {cursor:pointer;}/* サムネイル */
.youtube_btn {/* YouTubeアイコン */
/* アイコンの画像とサイズ指定 */
width:42px;
height:30px;
background-image:url(マウスが乗っていない.png);
/* 上下左右中央へ配置 */
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

```

```js:JavaScript
$(function (){
 var movies = [];
 var movies_w = [];
 var movies_h = [];
 var images = [];

 $('.youtube iframe').each(function(index, element) {
      //属性を取得
      var movie_src = $(this).attr('src');
      var movie_width = $(this).attr('width');
      var movie_height = $(this).attr('height');
      //配列へ
      movies[index] = movie_src
      movies_w[index] = movie_width
      movies_h[index] = movie_height
      //サムネイルを取得(この場合は320x180)
      images[index] = 'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/"),movie_src.lastIndexOf("?")) + '/mqdefault.jpg'
      //置き換え
      $(this).after('<div class="youtube_play"><img src="' + images[index] + '" width="' + movies_w[index] + '"><div class="youtube_btn"></div></div>').remove();
 });

 $('.youtube_play').each(function(index, element) {
      $(this).click(function(){
      //クリックで置き換え
      $(this).after('<iframe src="' + movies[index] + '&amp;autoplay=1" width="' + movies_w[index] + '" height="' + movies_h[index] + '" frameborder="0"></iframe>').remove();
      });
      $(this).hover(function(){
      //ロールオーバー
      $(".youtube_btn").eq([index]).css("background-image","url(マウスが乗っている.png)");
      },function(){
      $(".youtube_btn").eq([index]).css("background-image","");
      });
 });
});

```

# YouTubeアイコン
こちらからダウンロードできる
https://www.youtube.com/yt/brand/ja/downloads.html

# 注意
- URLパラメータ無しの場合はコード修正が必要
- スマホの場合、自動再生が不可能なので2回タップしないと再生できない
Cocoaの機能を使ってHTML文字列をプレーンテキストに変換するAppleScriptハンドラ



* `do shell script`と違って文字数制限がないので使いやすい
* 文字化けする場合は`dataUsingEncoding:`メソッドの引数を変更


```AppleScript:convertHTMLToPlainText.scpt
use scripting additions
use framework "AppKit"

tell application "Safari"
	my convertHTMLToPlainText(source of current tab of window 1)
end tell

on convertHTMLToPlainText(HTML)
	--require framework: Foundation
	set attributedString to my attributedStringOfHTMLText(HTML)
	return attributedString's |string| as text
end convertHTMLToPlainText

on attributedStringOfHTMLText(HTML as text)
	--require framework: AppKit, Foundation
	set HTMLString to current application's NSString's stringWithString:HTML
	set HTMLData to HTMLString's dataUsingEncoding:(current application's NSUnicodeStringEncoding)
	return current application's NSAttributedString's alloc()'s initWithHTML:HTMLData documentAttributes:(missing value)
end attributedStringOfHTMLText
```


## 更新履歴

* 2016-01-27: CocoaのAppKitフレームワークにあるNSAttributedStringクラスを使って作成
* 2016-02-01: `attributedStringOfHTMLText`ハンドラ作成
Lsyncdを使用したフォルダReplication[片側同期]


EC2間のSSHについては別途記述し追加予定
[ここにリンクを挿入予定]()

インスタンス間でSSH通信が可能になっている状態からお話をスタートします。

lsyncdを導入します。
　動きとしては、lsyncdで変更を検知し、rsyncが勝手に走る（rsyncはいじらない）みたいです。
　僕の理解です。間違ってたらごめんなさい。

今回は__MASTER→SLAVE__の片側構成です。

lsyncdをインストールします。

```yum install -y lsyncd```

インストールすると設定ファイルが 作成されます
__/etc/lsyncd.conf__

```
sudo cp /etc/lsyncd.conf /etc/lsyncd.conf.old
sudo vim /etc/lsyncd.conf
```

```bahs:lsyncd.conf
--
-- Simple example for default rsync, but executing moves through on the target.
--
-- For more examples, see /usr/share/doc/lsyncd*/examples/
--
-- sync{default.rsyncssh, source="/var/www/html", host="localhost", targetdir="/tmp/htmlcopy/"}

settings{
        insist = true,
        statusFile = "/tmp/lsyncd.stat",
        logfile = "/var/log/lsyncd/lsyncd.log",
        statusInterval = 1,
}

sync {
   default.rsync,
   source = "/var/www/html/",
   target = "hogehoge-user@ipaddr:/var/www/hogehoge/",
   exclude={"/除外フォルダ/","/除外フォルダ/"},
   rsync = {
      archive = true
   },
}

```
lsyncdをスタートし、起動時に自動起動するように設定します。

```/etc/init.d/lsyncd start```
```chkconfig lsyncd --on```

---
####注意
- 同期先Serverにおいて、同期先のフォルダがSSHしてくるユーザー（この場合だとhogehoge-user）が所有しているフォルダになっていないと同期できない（書き込み、削除ができないため）
- SSHで通信するためPort22開けておかないと書き込みできない
- ユーザーはSSHで作成したユーザーを使用する。
- 除外設定を書く際、途中で改行後の空白とか入るとだめ。

---

http://www.shift-the-oracle.com/linux/utility/lsyncd-local.html
http://qiita.com/bezeklik/items/22e791df7187958d76c1
http://dev.blog.fairway.ne.jp/%E3%80%90%E5%82%99%E5%BF%98%E9%8C%B2%E3%80%91lsyncd%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9-ssh%E7%B7%A8/
Macでjsonをコピーしたものを整形して色付きでless出力する

整形するやつはjqを使うので入ってなかったら入れる

```
brew install jq
```

こんな感じで使える

```
pbpaste | jq '.' -C | less -R
```

生活の中でjsonをみる事があるんだけどこれでいい感じにjsonを確認出来るようになった。

と思ったけど、vimで開いたほうがコピペとかしやすいから、vimの方がいいのかな

```
pbpaste | jq . | vim -
```
こんな感じで開いて、

```
set filetype=json
```

するといい感じに色がついてくれる。

起動する時にfiletypeの指定とか出来るのかな。

[追記]

[@buty4649](https://twitter.com/buty4649)さんに教えていただいて、起動時にfiletypeをしていする事が出来ました！ありがたや〜

```
pbpaste | jq . | vim -c "set ft=json" -
```

[追記2]

[@buty4649](https://twitter.com/buty4649)氏にすすめられて、zshrcに以下のように追加していい感じに出来るようにしました。

```
jqless() { jq . $* | vim -c "set ft=json" - }
```


```
pbpaste | jqless
```

冷静に考えると、lessじゃなくてvimだ。
という切なさを感じています。

## 参考
- http://qiita.com/takeshinoda@github/items/2dec7a72930ec1f658af
- http://qiita.com/hawaku/items/973eaf4261199c2dcc89
FuentdからAmazonElasticSearch-Serviceにログを投げてKIbanaで見る

2015年末に登場した、Aws上で動くElastic SearchにFluentdを連携する方法です

#AmazonElasticSearch-Service
・S3のような感覚で使えるフルマネージドのElasticSearch
・VPCの中には立てれない
・アクセス権限設定にひと工夫必要

#アクセス権限設定
 いくつか方法があるが今回試したのは２つ
1.IAMで認証
   署名付きリクエストを投げないとダメ
   これ使うと署名付きリクエストを投げれてくれる
   https://github.com/atomita/fluent-plugin-aws-elasticsearch-service

2.IPベースで制限
   普通のElastcSearchと同じようにノーマルのHTTPでアクセス可能

 1,2を組み合わせるとAND条件になるようでうまく動かなかったため2.IPベースで制限を採用
 IPアドレスはPublic IPでないといけないので、中継FluentdのIPとKibana用のHTTP ProxyのIPを指定

#td-agent.conf
雑にEndPointとインデックス名、テーブル名を指定する。
logstash_format  = trueを指定すると、日時でインデックス(MySQLのテーブル相当)
を作ってくれるのでここがポイント

```
<store>
    type forest
    subtype aws-elasticsearch-service
  <template>
       buffer_type memory
       buffer_chunk_limit 10m
       buffer_queue_limit 10
       flush_interval 1s
       retry_limit 16
       retry_wait 1s
       logstash_format 
       index_name index_name #インデックスの名前
       type_name  type_name #テーブルの名前

       <endpoint>
          url https://xxxxx.ap-northeast-1.es.amazonaws.com #エンドポイントURL 
          region ap-northeast-1 # リージョン
       </endpoint>
  </template>
</store>
```

#日付で検索できるように
ログのタイプスタンプはそのままだと、文字列として認識されるので、TimeStampとして認識するように設定する。
Elastic Searchにはインデックスをまたいで、グローバルに設定できる**テンプレート**があるのでそれを使う
ElasticSearchServiceのエンドポイントに対してcurlでJSONを送り設定する。
この設定でkibana上で、インデックスとして認識される

```
curl -XPUT 'http://xxxxxxxx.ap-northeast-1.es.amazonaws.com/_template/hogehoge' -d'
{
   "template": "hogehoge*",
   "mappings" : {
     "_default_" : {
       "dynamic":  true,
       "dynamic_templates": [
              {
                    "date": {
                      "path_match": "timestamp",
                      "match_mapping_type": "date",
                      "mapping": {
                        "type": "date",
                        "format": "yyyy-MM-dd HH:mm:ss +0900"
                      }
                    }
              }
        ]
    }
  }
}'
```

#Kibanaを見る
エンドポイント//_plugin/kibana/にアクセスするとみれます

#まとめ
Elastic Searchは用語が難しいが、APIは綺麗なREST FULLなので、慣れると
SQLのようにcurlで操作できます。
DockerでRails+UnicornをUnixDomainSocketで動かす


# はじめに
* そもそもソケット使った方が動作速度が速い。<br>
参考： http://qiita.com/ma2shita/items/6f1905847b2059f7cf7d
* NginxとRailsが同一サーバにある構成だしソケット使いたい。

# 構成
DockerのVOLUME機能を利用する。
Rails動作用コンテナでUnicornを起動して、ソケットがあるディレクトリにVOLUMEを作成する。
Nginx用コンテナ起動時に作成したVOLUMEを付けることで、Ngnixからソケットにアクセスできるようにする。

# Railsアプリの作成

```sh
$ rails new blog --skip-bundle
$ vi blog/Gemfile
source 'https://rubygems.org'
gem 'rails', '4.2.5'
gem 'sqlite3'
gem 'unicorn'
```

```ruby:conifg/unicorn.rb
rails_root = File.expand_path(".")
worker_processes 2
working_directory rails_root
timeout 15
preload_app true
listen "#{rails_root}/tmp/sockets/unicorn.sock", :backlog => 1024
```

# Dockerfile
```sh:rails/Dockerfile
FROM ruby

VOLUME /var/www/blog/tmp/sockets

WORKDIR /var/www
COPY ./blog blog
WORKDIR /var/www/blog
RUN bundle config build.nokogiri --use-system-libraries
RUN bundle install
RUN bin/rake db:create
RUN bin/rake db:migrate

ENTRYPOINT ["bundle", "exec", "unicorn_rails", "-D", "-c", "config/unicorn.rb"]
```

```sh:nginx/Dockerfile
FROM nginx

COPY default.conf /etc/nginx/conf.d/default.conf
```

```nginx:default.conf
upstream backend {
  server unix:/var/www/blog/tmp/sockets/unicorn.sock;
}

server {
  listen 80;
  server_name localhost;

  location / {
    if (-f $request_filename) { break; }
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://backend;
  }

  location @empty {
    empty_gif;
  }
}
```

# Dockerイメージ作成

```shell-session
$ docker build -t rails/base ./rails
$ docker build -t nginx/rails ./nginx
```

# Dockerコンテナ起動

```shell-session
$ docker run -d --name rails rails/base
$ docker run -d -p 80:80 --volumes-from rails nginx/rails
```

# おわりに
NginxとRailsを同一サーバで動かす場合には、DockerのVOLUME機能を使用することで、ソケットへのアクセスが容易にできるようになる。
小規模システムであれば、MySQLなどのソケットも利用できると思われます。
【Github Pages】Hexo搭建Github静态博客


### 1. 通过Homebrew安装Node.js和npm

```
$ brew install node

$ node -v
v4.2.0
```

### 2. 安装Hexo
```
$ npm install -g hexo

$ hexo -v
hexo-cli: 0.1.9
os: Darwin 14.5.0 darwin x64
http_parser: 2.5.0
node: 4.2.0
v8: 4.5.103.35
uv: 1.7.5
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2d
```

### 3. 建立项目
```
$ hexo init blog
INFO  Copying data to ~/Documents/blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!
```
按照提示，运行 npm instal

```
cd blog
npm install
```

### 4. 运行服务器
```
hexo server
```

### 5. 设置主题
本文以设置NexT为例
https://github.com/iissnan/hexo-theme-next

```
$ cd blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
```

将_config.yml配置文件中的theme属性设置为next

```
theme: next
```


### 6. 安装插件

- sitemap插件

```
$ npm install hexo-generator-sitemap
```

```
# Extensions
Plugins:
- hexo-generator-sitemap

#sitemap
sitemap:
  path: sitemap.xml
```

- feed插件

```
$ npm install hexo-generator-feed
```

```
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
```

### 7. 部署到GitHub Pages
```
npm install hexo-deployer-git --save
```

编辑_config.yml中development的部分

```
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github
  repo: git@github.com:xxxx/xxxx.github.io.git
  branch: master
```

本地测试：

```
hexo s -g
```

部署：

```
hexo d -g

# hexo generate -deploy

# hexo clean
# hexo generate
# hexo deploy
```

### 常用命令
```
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
```
Docker MinecraftのPaperサーバーのJavaバージョンを11にする

[Minecraft]:https://www.minecraft.net/ja-jp
[Minecraft Education Edition]:https://education.minecraft.net
[MakeCode for Minecraft]:https://minecraft.makecode.com
[Minecraft for Windows 10]:https://www.microsoft.com/ja-jp/p/minecraft-for-windows-10/9nblggh2jhxj?activetab=pivot:overviewtab
[Docker Desktop]:https://www.docker.com/products/docker-desktop
[Paper]:https://papermc.io
[Tuinity]:https://github.com/Spottedleaf/Tuinity


こんな通知が来た

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

関連記事:
[docker経由でMinecraft資源(Spigot)サーバーを立てる](https://qiita.com/dozo/items/c68d1c8d955f04c657fa)
[docker経由でMinecraft資源(Spigot)サーバーを立てる(2)](https://qiita.com/dozo/items/392fceb255ac55ce501b
)

------------------- ↓ 余談はここから ↓-------------------

```shell-session
 ************************************************************
 * WARNING - YOU ARE RUNNING AN OUTDATED VERSION OF JAVA.
 * PAPER WILL STOP BEING COMPATIBLE WITH THIS VERSION OF
 * JAVA WHEN MINECRAFT 1.17 IS RELEASED.
 *
 * Please update the version of Java you use to run Paper
 * to at least Java 11. When Paper for Minecraft 1.17 is
 * released support for versions of Java before 11 will
 * be dropped.
 *
 * Current Java version: 1.8.0_212
 *
 * Check this forum post for more information:
 * https://papermc.io/java11
 ************************************************************
```

https://papermc.io/forums/t/java-11-mc-1-17-and-paper/5615

現在利用している[Paper]サーバーのJavaバージョンが8なのだが、
[Minecraft]の1.17(2021リリース予定)で11以上に変える必要があるとのこと。
まだまだ先の話なのでオリジナルのDockerイメージがバージョンアップするまで待つという手もあるが、
せっかくなのでバージョンアップしてみよう。

さて、どうやってアップすればいいのかなと。
Dockerコンテナに潜り込んでJavaをアップデートするのかなと調べてみると、
別のJavaバージョンのタグが用意されていた。

| Tag | Description | Linux |
|:-:|:--|:-:|
|latest	   |Default. Uses Java version 8 update 212   | Alpine Linux  |
| adopt11  | Uses Java version 11 latest update  | Alpine Linux  |

参考: https://github.com/itzg/docker-minecraft-server/issues/676

ってことは、Docker runを打ち直せばいいということかな？


----
------------------- ↓ 本題はここから ↓-------------------

## 事前準備

この辺見てもろて

[docker経由でMinecraft資源(Spigot)サーバーを立てる](https://qiita.com/dozo/items/c68d1c8d955f04c657fa)
[docker経由でMinecraft資源(Spigot)サーバーを立てる(2)](https://qiita.com/dozo/items/392fceb255ac55ce501b
)


## 別タグのdocker imageを実行

リポジトリはこちら
[itzg/minecraft-server](https://hub.docker.com/r/itzg/minecraft-server)

### [Paper]サーバー

Spigotを使っていると、
アイテムがワープしたり消滅したりとネットワーク動作にラグ系の問題が発生する。
それにパッチを当てて軽量化したのが[Paper]
上記リポジトリにはサーバー名を指定するだけで利用する実行環境を変えることができる。


```shell-session
PS C:\>  docker run -d -v ~/minecraft_data:/data -p 25565:25565 -e TYPE=PAPER -e EULA=TRUE -e MAX_WORLD_SIZE=10000 -e DIFFICULTY=normal --name mcp02 itzg/minecraft-server:adopt11
```


### [Tuinity]サーバー

[Paper]サーバーもマルチユーザーではちょっと弱点があるので、
それにさらにパッチを当てて軽量化したのが[Tuinity]

```shell-session
PS C:\>  docker run -d -v ~/minecraft_data:/data -p 25565:25565 -e TYPE=TUINITY -e EULA=TRUE -e MAX_WORLD_SIZE=10000 -e DIFFICULTY=normal --name mct01 itzg/minecraft-server:adopt11
```
マイグレーションで remove_index の際には column オプションをサボらない

`rake db:migrate` して、検証のために `rake db:rollback` したところエラーで怒られたのでシェア

## 環境

- Ruby : ruby 2.2.3p173
- Rails : Rails 4.2.1


## 状況

既存のインデックスにUNIQUEインデックスに変更したかったので以下のような migration を書いた

```rb
class AddUniquenessToCompanies < ActiveRecord::Migration
  def change
    remove_index :companies, :url
    add_index    :companies, :url, unique: true
  end
end
```

migrate 実行。。。

```shell-session
$ rake db:migrate

== 20160124130800 AddUniquenessToCompanies: migrating ===================
-- remove_index(:companies, :url)
   -> 0.0142s
-- add_index(:companies, :url, {:unique=>true})
   -> 0.1733s
== 20160124130800 AddUniquenessToMyModel: migrated (0.1876s) ==========
```

rollback の確認をっと、、、

```shell-session
$ rake db:rollback

== 20160124130800 AddUniquenessToMyModel: reverting ===================
rake aborted!
StandardError: An error has occurred, all later migrations canceled:



remove_index is only reversible if given a :column option.

/Users/kawakubox/Workspace/my-rails-project/vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.1/lib/active_record/migration/command_recorder.rb:157:in `invert_remove_index'
/Users/kawakubox/Workspace/my-rails-project/vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.1/lib/active_record/migration/command_recorder.rb:66:in `inverse_of'
/Users/kawakubox/Workspace/my-rails-project/vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.1/lib/active_record/migration/command_recorder.rb:50:in `record'
/Users/kawakubox/Workspace/my-rails-project/vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.1/lib/active_record/migration/command_recorder.rb:83:in `remove_index'
```

！！！

remove_index is only reversible if given a :column option.

> remove_index は `:column` オプションが指定されている場合のみ戻せるよ

と言われてる

## 回避策

### 1. 指摘通りに `column` オプションをつける

```rb
class AddUniquenessToCompanies < ActiveRecord::Migration
  def change
    remove_index :companies, column: :url
    add_index    :companies, :url, unique: true
  end
end
```

※複数カラムの場合は column: [:hoge, :piyo] と配列にする

### 2. `change` ではなく `up`, `down` にする

```rb
class AddUniquenessToCompanies < ActiveRecord::Migration
  def up
    remove_index :companies, :url
    add_index    :companies, :url, unique: true
  end

  def down
    remove_index :companies, :url
    add_index    :companies, :url
  end
end
```

### 所感

- migration 作ったら、 `rake db:migrate` だけでなく、 `rake db:rollback` も検証しよう。
メモ：iPython3でreloadを有効にする。

元ネタ：https://ipython.org/ipython-doc/3/config/extensions/autoreload.html

```
In [1]: %load_ext autoreload

In [2]: %autoreload 2

In [3]: from foo import some_function

In [4]: some_function()
Out[4]: 42

In [5]: # foo.pyを開いてsome_functionが43を返すように変更すると

In [6]: some_function()
Out[6]: 43
```

Python3に移行する恩恵のひとつかと。
Javaで手軽に正規表現を使うスニペット

ほとんど備忘録です。LLだとけっこう手軽にできるんでいざJavaで手軽にやろうとすると迷うことがあります。

Javaはいつもなんとなく書くだけのことが多いので、
詳しい人おかしいところあったら指摘してもらえると嬉しいです。


パータンにマッチしているかどうかを判定

```java

	/**
	 * 正規表現
	 * @param str
	 * @param regex
     * @return
     */
	public static boolean isMatch(String str,String regex){
		return  regex!= null && str != null && str.matches(regex);
	}
```

※String.matchesを使うのがよいとコメントを頂き修正しました。感謝です。

https://docs.oracle.com/javase/jp/1.5.0/api/java/lang/String.html