OmniAICreator/Qiita-1.07M huggingface dataset:
Mozilla Firefox にプロ生ちゃんを召喚する方法。

### Mozilla Firefox にプロ生ちゃんを召喚する方法。

![here.JPG](https://qiita-image-store.s3.amazonaws.com/0/172794/e14aa960-2da9-7d91-6c9b-fe8554643187.jpeg)


## 用意するもの
1.プロ生ちゃんの立ち絵画像

>公式の立ち絵データはこちらから。
>http://pronama.azurewebsites.net/pronama/download/

2.Firefox

>Mozilla Firefox
>https://www.mozilla.org/ja/firefox/new/


3.Stylish

> Stylish :: Add-ons for Firefox 
> https://addons.mozilla.org/ja/firefox/addon/stylish/?src=search



## 書きます。
1.まず、Firefoxを起動し、Stylishをインストールします(多分Firefox再起動を要求されます)。
![Sty.JPG](https://qiita-image-store.s3.amazonaws.com/0/172794/2018209d-2845-89ce-0857-52ae19aaa4e1.jpeg)


2.次に、プロ生ちゃんを召喚させたいFirefoxのabout系列ページを開きます。
  ここではオプション画面にします。

3.メニューから、Stylishを探し出し、【新しくスタイルを書く】->【このURL専用】と進む。
![Editor.JPG](https://qiita-image-store.s3.amazonaws.com/0/172794/90d4209b-7da8-e4db-1410-192c208a5693.jpeg)

4. 以下のコードをコピーandペースト(file://path/to/fileにプロ生ちゃんの画像のファイルパスを書く)。

>
>@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
>
>@-moz-document url("about:preferences") {
>
>.main-content{ 
>   background-image: url("file://path/to/file");
>   background-size: 40%;
>   background-repeat: no-repeat;
>   background-position: right bottom;
>  }
>}
>

5.タイトルを付けて、保存をクリック。


###おしまい。
CSS Grid Layoutについて調べてみた〜Part 1: Grid Layoutの概要

何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

ちょっと量が多くなったので数パートに分けた。

Part 1: **Grid Layoutの概要**（イマココ）
Part 2: [使い方（Grid Layoutの用語と基本）](http://qiita.com/k_tada/items/e53de899235a9c3e7642)
Part 3: [使い方（グリッドコンテナ、アイテムの作り方）](http://qiita.com/k_tada/items/5203c9582cca3cff6639)
Part 4: [実際にGrid Layoutを使ってみる](http://qiita.com/k_tada/items/973b348ba640c3cee73c)
Part 5: [レスポンシブデザイン対応してみる](http://qiita.com/k_tada/items/8759ba93dfcd1fd9c76a)

# Grid Layoutとは
CSS3で策定が進められている、Flexboxに次ぐ新たなレイアウトモジュール。  
画面を縦横の格子状に分割して要素を自由に配置出来るため、従来に比べて複雑なレイアウトを容易に表現出来る。

格子状にレイアウト出来るため、縦横に整列されたページを作ることに適している。（逆に言えば、縦か横どちらかが揃っていないようなページの場合は適用するメリットは少ない）。  
またMediaQueryと合わせて使用することで、画面サイズに合わせてレイアウトを変更することも出来るため、レスポンシブデザインのWebページにも適している。  

# 対応ブラウザ
http://caniuse.com/#feat=css-grid  
ChromeとかFirefoxとかSafariなんかの主要ブラウザの最新バージョンではサポートしてるっぽい（2017/04/06時点）  
IE？Edge？知らない子ですね。

# 概要
Flexboxでは、図の左側のように、画面のレイアウトを作る時は **横に分割してから更に縦に分割** のような方法で作成していた。

対して、Grid Layoutでは、図の右側のように、 **格子状に画面を分割して、それぞれの要素をどのように配置するか決める** といった方法でレイアウトを作成する。

<img width="700" alt="スクリーンショット 2017-04-06 16.04.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/290c58a8-1423-cb75-9e30-c6584f9c72e9.png">


各要素は分割した各ブロックを組み合わせた長方形でレイアウトする。

<img width="340" alt="スクリーンショット 2017-04-06 20.10.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/e43d17d9-5136-29e7-7ee2-115ec4bc9583.png">

レスポンシブに対応する場合、画面サイズに応じて各要素の配置を変更することで対応可能。  

<img width="679" alt="スクリーンショット 2017-04-06 20.17.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/0cdd91ff-010d-7a5c-368e-a8fd60e020c0.png">


参考：https://drafts.csswg.org/css-grid/#source-independence

次回：[使い方（Grid Layoutの用語と基本）](http://qiita.com/k_tada/items/e53de899235a9c3e7642)
Visual Studio 2017でPHP開発

Visual Studio 2017でPHPのWebアプリを開発する手順です。

#環境
Windows 7 Professional SP1 64bit
Visual Studio 2017 Community
PHP Tools for Visual Studio v1.23.9750
※事前にPHPをインストールしていません。

#PHP Tools for Visual Studioインストール
公式サイトからPHP Tools for Visual Studioをダウンロードします。
トップページの Download Now からVisual Studio 2017を選択するとインストーラー(php.vs.1.23.9750.2017.vsix)がダウンロードできます。

PHP Tools for Visual Studio
https://www.devsense.com/

![bbb.png](https://qiita-image-store.s3.amazonaws.com/0/112075/204decc6-28d6-a9a6-a0f9-418d6ade1671.png)

インストーラーを起動します。後はインストーラーの指示に従ってインストールして下さい。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/fb0a667a-600a-c27a-1455-c83e93885501.png)

#プロジェクト作成
Visual Studioを起動して新しいプロジェクトを作成します。今回はテンプレートから「PHP Web Project」を選択します。

![ccc.png](https://qiita-image-store.s3.amazonaws.com/0/112075/1d72803c-5716-4bf2-0ca8-2f2bbe7cedca.png)

途中でライセンス登録の画面が表示されたら Begin a Trial を押します。（一度アンインストールしてからインストールしているので表示されるタイミングはちょっと違うかも・・・）

PHP Tools for Visual Studioは30日間のトライアル期間があり、トライアル期間が終了するとデバッガーが利用できなくなるようです。それ以外は制限はないようなのでそのまま継続して利用できるみたいです。

![ddd.png](https://qiita-image-store.s3.amazonaws.com/0/112075/fa14f959-e4af-f277-ce03-8ac9c57d3621.png)

プロジェクトが作成されると以下のように Hello World を表示するプログラムが自動で作成されます。

![ccc.png](https://qiita-image-store.s3.amazonaws.com/0/112075/a927c7ea-e6f0-1b84-74b8-632779907704.png)

#プログラム実行
デバッグを開始するとPHPをインストールされていない環境では以下のようなダイアログが表示されます。Continueを押してPHPをインストールします。これでIISの設定など難しいことは全部やってくれてるみたいです。

![fff.png](https://qiita-image-store.s3.amazonaws.com/0/112075/750fbe90-865d-9568-db07-d5ce1d580bbb.png)

ブラウザが起動してHello Worldが表示されたら完成です。
ブラウザはFirefoxでは動作しなかったためChromeを使いました。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/f7f4e2f5-2018-5bca-62c5-9786e36af512.png)

Webサーバーを用意することもなく簡単に開発をはじめられました。

#文字化け
試しに日本語を表示してみます。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/c0cd5de7-0889-338e-d966-b26b028357d4.png)

文字化けしてしまいました・・・。Windowsでは文字コードがシフトJISなのが原因のようです。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/848bbd3a-df2a-4873-d08e-b2ea705083dd.png)

文字コードを指定してファイルを保存します。メニューから名前を付けて保存します。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/4fd6bbab-5ea3-b09d-690f-b5e768c94539.png)

ダイアログが表示されたら上書き保存ボタンを展開して「エンコード付きで保存」を選択します。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/9f2561ee-6d89-1e24-85e4-af67e7b290a7.png)

上書きするか確認されるのではいを押すと文字コードを選択するダイアログが表示されます。
エンコードから「Unicode (UTF-8 シグネチャ付き) - コードページ 65001」を選択します。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/ff3ab2c0-0c7f-a1fa-b65d-365684e5cd55.png)

これでちゃんと日本語が表示されます。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/112075/2d61f503-84b8-87cc-d590-2bf88dc8b204.png)
VimGolf の人気問題 "One number per line" を解説してみる


# VimGolfとは
簡単に言うとショートコーディング、コードゴルフのVim版。実行結果でなく Start, Goal のテキストが与えられて、どれだけ短いキーストローク数で変更できるかを競う。

https://www.vimgolf.com/



紹介する問題はこれ: https://www.vimgolf.com/challenges/56fb2e75ccffcc0009026473
興味ある方は是非、下の解説を見ずに挑戦してみてください。



```:start
- One number per line -
-----------------------
2,3,5,7,
11,13,17,
19,23,29,
```


```:goal
2
3
5
7
11
13
17
19
23
29
```

---
以下解説

---


# 解答(現状最短解)
14 ストローク
```5gJV"=[<C-R><C-A>]<CR>pZZ```


# 解説
この14文字に詰まっているテクニックを解説する。

## `5gJ`

`J` スペースで(下の)行連結
`gJ` スペースを入れずに行連結
`5gJ` 5行(5回)スペースを入れずに行連結

ここではすべての行を1行にまとめている。


```:終了後の状態
- One number per line ------------------------2,3,5,7,11,13,17,19,23,29,
                                                               | (カーソル位置)
```

## `V"=[<C-R><C-A>]<CR>p`

`V` 行選択
`"=` [Expression レジスタ](http://vim-jp.org/vimdoc-ja/change.html#quote_=)

ここでVim式の記述モードに入る
http://vim-jp.org/vimdoc-ja/eval.html#expression


`<C-R><C-A>` [カーソル下の WORD を挿入](http://vim-jp.org/vimdoc-ja/cmdline.html#c_CTRL-R_CTRL-A)

今回はカーソルの位置から `------------------------2,3,5,7,11,13,17,19,23,29,` が挿入される。
よって command line は
`=[------------------------2,3,5,7,11,13,17,19,23,29,]`
となる
------------------------2 が`2`と評価されて 1行目 2行目 の`-(ハイフン)`が打ち消される :thumbsup: 。

`<CR>` command line 入力終了

`p` ペースト
先程 V で行選択した部分を上書きしながらペースト。
[2, 3, 5....] のリストなので改行区切りで文字列に変換されます。

```:終了後の状態
2
3
5
7
11
13
17
19
23
29
```

## `ZZ`

`ZZ` 保存して終了
VimGolf の定例

# 終わり
1, 2行目にトリックが隠されていて面白い問題でした!

VimGolf の問題は実例っぽいテキスト、コード編集です。じかに実用できるかは別として Vim の知らないテクニックが学べると思うのでおすすめです。
ちなみに vimgolf gem で手元のターミナルで問題に挑戦できます。
[Unity] Coroutineを実行中のGameObjectをディアクティブにしたときのコルーチンの状態について

#概要
すでに実行されているコルーチンはGameObjectのSetActive(false)で
どうなるでしょうか？という話。
忘れてしまうので備忘録として書いておきます。

#環境
Unity5.5.2p4

#実験と結果
下記のオブジェクトをGameObjectにアタッチしてエディタをプレイモードにする。

```csharp
using UnityEngine;
using System.Collections;

public class TestCoroutine : MonoBehaviour
{
    void Start()
    {
        StartCoroutine(StartLoop());
    }

    IEnumerator StartLoop()
    {
        Debug.Log("[COROUTINE] Start.");
        WaitForSeconds wait = new WaitForSeconds(1f);
        Debug.Log("[COROUTINE] Wait...");
        yield return wait;
        Debug.Log("[COROUTINE] Deactive object.");
        this.gameObject.SetActive(false);

        while(true)
        {
            yield return wait;
            Debug.Log("[COROUTINE] Wait...");
        }
    }
}
```

```:ログの出力結果
[COROUTINE] Start.
[COROUTINE] Wait...
[COROUTINE] Deactive object.
```

エディタ上でスクリプトをアタッチしたGameObjectをアクティブにしても
コルーチンは復帰されない。
非アクティブにしたらコルーチンは消えてなくなるってことですね。
webpackのProvidePluginでES Modulesを読み込む

### はじめに
webpackにはProvidePluginという(グローバル領域を汚染せずに)自動的にモジュールを読み込むプラグインがあります。

```webpack.cofig.js
new webpack.ProvidePlugin({
  $: 'jquery'
})
```

```app.js
// $にjqueryが注入されている
$('#app');
```

これを使用すると、複数のスクリプトで
`import $ from 'jquery'`
などと書く必要がなくなり便利です。

### ES Modules
例えば`Vue.js`のES Modules版で同様のことをやろうとした場合、

```webpack.cofig.js
new webpack.ProvidePlugin({
  Vue: 'vue/dist/vue.esm.js' //ES Modulesを指定 
})
```

```app.js
new Vue.default({
  data: 'hello'
})
```
といった感じで書く必要があり、微妙...と思っていました。

### あれ、読み込むプロパティを指定できるようになってる...!!!
素晴らしい[PR](https://github.com/webpack/webpack/pull/3597)が取り込まれてるので、

```webpack.cofig.js
new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default'] //ES Modulesを指定 
})
```

```app.js
new Vue({
  data: 'hello'
})
```

おー、人間らしく書けるようになりましたね:relaxed:

### 履歴
- webpackの[ドキュメント](https://webpack.js.org/plugins/provide-plugin/)を更新しました
自分用メモ：javascript:stateパターン

##### javascriptでStateパターンを作ってみた

```javascript:State.js
 
(function(){
    /**
     * 状態
     */
    var State = function(){

        var s =  State.prototype;

        function State(){
            this.state = null;
        }

        /**
         * 状態をセットする
         */
        s.set_state = function(s){
            this.state = s;
        };

        /**
         * 実行する
         */
        s.execute = function(){
            if(this.state === null) return;
            this.state.execute();
        };

        return new State();

    };

    /**
     * 歩く
     */
    var Walk = function(){

        var w = Walk.prototype;

        function Walk(){}

        w.execute = function(){
             console.log('歩く');
        };

        return new Walk();

    };

    /**
     * 走る
     */
    var Run = function(){

        var r = Run.prototype;
        
        function Run(){}

        r.execute = function(){
            console.log('走る');
        };

        return new Run();
    };

    var state = State();
    state.set_state(Walk());
    state.execute();// 歩く
    state.set_state(Run());
    state.execute();// 走る

}).call(this);

```

多岐にわたるif文やswitch文がうっとおしいなと思いネット漁りながら作っていったらこうなりました。
何かありましたらご教授お願いします。
vagrantのXdebugでVisualStudioCodeからデバッグする

#前提条件
- vagrantにXdebugが正しくインストールされていること
- VisualStudioCodeがインストールされていること
- PHP7であること※今回はPHP7を使用するため
- 仮想環境のWebサーバがNginxであること
- 筆者はWindowsです

上記の環境に合わせて作りたいなと思う方はこちらへ※今回はこんなかんじの環境です
[php環境構築(Vagrant + VirtualBox + php7 + Nginx1.10 + MariaDB10~)](http://qiita.com/i_am_207/items/1971a1210aeac5272cae)

EclipseやNetBeansを卒業しようかなと思い、やってみたら意外とはまったので、共有です。

#デバッグができるようにするフロー
##１．デバッグの構成を開く
デバッグ　＞　構成を開くを押下する

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/68914/2f6c6aa2-4e53-bf95-933d-2e69eba1a267.png)

##２．launch.jsonの編集を行う
下記画像とは、違う記述がされていると思いますが、
結論からいえば、以下の部分を自分の環境を合わせるといいと思います。
主に合わせていただくのは、以下の3点くらいだと思います。
serverSourceRoot: "接続先サーバー上のドキュメントルート",
localSourceRoot: "ローカルマシン上のソースコードのディレクトリ",
port: "php.iniで記載したxdebugのportを記載する"

serverSourceRootとlocalSourceRootの関係性は、
EclipseやNetBeansなどに言い換えると、パスマッピングです。
※ちなみに、localSourceRoot: "${workspaceRoot}"は、VSCodeで開いているディレクトを指定するという意味。
今回は、絶対パスで指定しています。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/68914/a09a8db2-aed9-eda5-ab18-300e70ff6e18.png)

##３．ファイル　＞　基本設定　＞　設定を開く

![2.png](https://qiita-image-store.s3.amazonaws.com/0/68914/4817dcba-82b7-d847-c55f-ddfd68f1ada5.png)

##４．設定の編集
結論から言えば、以下画像のように記載する必要があります。
Debugの紐付けとは関係ないのですが、Debugを快適にするために、以下の設定が必要になってきます。

###４－１．ローカルにPHPがない場合、インストールする
以下からダウンロードして自分の好きなディレクトリにデプロイしてください。
※今回は、前提として、NginxでありVagrantで作成した環境にxdebugがインストールされていることなので、VC14 x64 Non Thread SafeのZipをダウンロードしてデプロイします。
http://windows.php.net/download#php-7.0

###４－２．パスを設定する
好きなディレクトリに展開したら、
php.validate.executablePath: "展開先のphp.exeまでのパス",
php.executablePath: "展開先のphp.exeまでのパス"
**上記のphp.executablePathは、VSから読み込まれず、緑の波線が出るのですが、
これがないとうまく読み込んでくれないみたいです。**

![3.png](https://qiita-image-store.s3.amazonaws.com/0/68914/1a81945f-9c69-1200-4a4b-e19b118a362e.png)

##５．拡張機能を導入する
左の上から5番目のマークを押すと、拡張機能されている一覧が開きます。
なにもいれていないと何も出ないはずです。
そこでPHP IntelliSenseとPHP Debugがなければ、インストールします！
上部にある検索欄からPHPと入力すればPHP関連の拡張モジュールが出ますので、
そこからインストールをします！
![4.png](https://qiita-image-store.s3.amazonaws.com/0/68914/ac0bc580-b413-6093-a958-51fcb6250ea9.png)

##６．拡張機能を読み込みなおして、いざデバッグ！！
F5を押すとすぐにデバッグが開始されて一番下のバーがオレンジに変わります！
ちなみに複数のデバッグ環境を作成したいた際は、デバッグ画面が開いた上部にプルダウンで切り替えられるので、お手軽に切り替えをします。
あとはいままでどおりとめたいところで、エディターに赤い点をうつだけで！

![5.png](https://qiita-image-store.s3.amazonaws.com/0/68914/c59630ff-81e0-5ce1-925c-bfe417905122.png)

以上が、VisualStudioCodeからデバッグを行う方法でした。
お疲れ様でした！
RxJavaでのDuplicateFileException

RxJavaを2.xにあげようとした時にでたエラー。
Cleanしてもだめだった。

```
Error:Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug'.
> com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/rxjava.properties
  	File1: /Users/nitakanworld/.gradle/caches/modules-2/files-2.1/io.reactivex/rxjava/1.1.5/ece7b5d0870e66d8226dab6dcf47a2b12afff061/rxjava-1.1.5.jar
  	File2: /Users/nitakanworld/.gradle/caches/modules-2/files-2.1/io.reactivex.rxjava2/rxjava/2.0.8/47fadd5ff70f325e520fbc491227bd9283a48f95/rxjava-2.0.8.jar

```

Issuesがあった。
[2.x: Duplicated file rxjava.properties #4445](https://github.com/ReactiveX/RxJava/issues/4445)

```
android {
    packagingOptions {
        exclude 'META-INF/rxjava.properties'
    }
}
```

ビルドできたのでとりあえずはこれでOK？
Webアプリケーションエンジニアがディープラーニングに挑戦する際にやったこと(Coursera Week9)

# Coursera Week9
## はじめに
CourseraのWeek9を実施しましたので、私のメモを公開します。
Courseraってなんだ？という方は[Week1](http://qiita.com/KirariGlock/items/d41bdcc6f5ec5ad255fb)から御覧ください。

## Anomaly detection
あるデータ・セットが与えられていて、そのデータセットから明らかに離れたデータをアノマリーと言う。

## Gaussian(Normal) istribution
ガウス分布は以下の式で表される。
$x\sim N(\mu, \sigma^2)$
$\mu$は平均を表し、$\sigma$は分散(標準偏差)を表す。

$\mu$はただの平均なので下記の式で表現できる。
$$
\mu = \frac{1}{m}\sum_{i=1}^mx^{(i)}
$$
$\sigma^2$は下記のように表す。
$$
\sigma^2=\frac{1}{m}\sum_{i=1}^m(x^{(i)}-\mu)^2
$$

#Density estimation
$$
p(x) = \Pi_{j=1}^np(x_j;\mu_j,\sigma_j^2)
$$
$\Pi$は$\sum$の積バージョン。
最終的に$p(x)$の値がかなり小さい($epsilon$より小さい)場合、これをアノマリーとする。
$p(x) < \epsilon$


## Recommendation System
リコメンダシステムを取り扱う1つ目の理由は機械学習の問題とよくマッチするから。
2つ目の理由は全般的に必要な知識を共有するのにちょうどいいから。

## Feature Learning
アルゴリズムがなんのフィーチャー（つまり$X$）を使うか自分自身で学習する。
映画の例では各映画がどれくらいロマンティックか、アクションが多いかを自分自身で学習する。

## Collaborative filtering algorithm
1.$x$と$\theta$を小さいランダム数で初期化する。
2.CostFunctionを最急降下法などのアルゴリズムを使用して最小化する。
$$
x_k^{(i)} = x_k^{(i)} - \alpha(\sum_{j:r(i,j)=1}((\theta^{(j)})^Tx^{(i)} - y^{(i,j)})\theta_k^{(j)} + \lambda x_k^{(i)})
$$
$\theta$も上記の$x$と同様の式で求められる。
$\alpha$のカッコ内はコスト関数の偏微分。
3.レーティングの予測をする。
$(\theta^{(i)})^T x^{(i)}$
Swift3.0 NavigationBarをhidden(隠す)方法

#はじめに
この記事はswift初心者が開発してるときにいい記事ないなーと思ったため
メモみたいな感じで書いています。
#実装
```ViewController.swift
navigationController?.setNavigationBarHidden(true, animated: false)
```
これをこのままviewWillAppearに書けばNavigationBarが隠れます。
遷移先のviewWillAppear関数にコピペすればおっけーです
#豆知識
NavigationBarがhiddenになっていると画面を横に引っ張っても前の画面に
戻らなくなるのを知って便利やなーって思いましたw
`navigationController?.interactivePopGestureRecognizer?.isEnabled = false
`
これを書けば横に引っ張っても前の画面に戻らなくなるように実装できるみたいです。
#最後に
twitterフォロー待ってます！
https://twitter.com/kano0512s
アドバイスなどコメント欄に書いてもらえると勉強になるので嬉しいです。
HoloLensで近づくと隠れるHeadsUpDirectionIndicator

#はじめに
３月初めよりインターンで株式会社ゆめみ(https://www.yumemi.co.jp/ja) にてHoloLensの研究開発をしている近大生のよっしーです。
国内でこの１月から提供を開始したMicroSoft製MRデバイスのHoloLensについての記事を書いていきます。

#すること
**HeadsUpDirectionIndicatorをアレンジする**

|名前|種類|説明|
|:--|:---|:---|
|DirectionIndicator|スクリプト|三次元的に表示(ルームオブジェクトの影響を受ける)。オブジェクトが視界から外れると消える。|
|HeadsUpDirectionIndicator|プレハブ|視野角上の平面で表示。オブジェクトが視界から外れても消えない。|

上のように動作するのですが、DirectionIndicatorはカーソルの動きについて回るので、平面が変わるたびにおっきくなったりちっさくなったりしてうざったいです。
逆にHeadsUpDirectionIndicatorは近づいても消えてくれないので、いつまでもついてきてうざったいです。

なのでHeadsUpDirectionIndicator側に、オブジェクトが視界から外れると消える機能をつけようという試みです。

#実装例

```csharp:HeadsUpDirectionIndicator

// Update the direction indicator's position and orientation every frame.
private void Update() {
    // No object to track?
    if (TargetObject == null || pointer == null) {
        // bail out early.
        return;
    } else {
        // 書き換え部分以下
        bool isDirectionIndicatorVisible = !IsTargetVisible();
        pointer.SetActive(isDirectionIndicatorVisible);

        if (isDirectionIndicatorVisible) {
            int currentFrameCount = UnityEngine.Time.frameCount;
            if (currentFrameCount != frustumLastUpdated) {
                // Collect the updated camera information for the current frame
                CacheCameraTransform(Camera.main);

                frustumLastUpdated = currentFrameCount;
            }

            UpdatePointerTransform(Camera.main, indicatorVolume, TargetObject.transform.position);
        }
    }
}

//書き加えた関数
private bool IsTargetVisible() {
    // This will return true if the target's mesh is within the Main Camera's view frustums.
    Vector3 targetViewportPosition = Camera.main.WorldToViewportPoint(TargetObject.transform.position);
    return (targetViewportPosition.x > VisibilitySafeFactor && targetViewportPosition.x < 1 - VisibilitySafeFactor &&
            targetViewportPosition.y > VisibilitySafeFactor && targetViewportPosition.y < 1 - VisibilitySafeFactor);
}
```

#解説
- **IsTargetVisible:**視界内にターゲットがあるかどうかを返している。
- **Update関数内書き換え部分:**視界外なら、ポインタをアクティブに。視界内ならポイントを非アクティブにしている。

これで近づくとポインタが消えるHeadsUpDirectionIndicatorが動きます。

もし不明な点があるなら差分を実際に確認していただけるとよく分かると思います。

#ついでに
自分の場合は以下のようなシングルトンクラスを実装し、ターゲットのオブジェクトを切り替えています。

```csharp:DirectionIndicatorManager
using UnityEngine;
using HoloToolkit.Unity;

public class DirectionIndicatorManager : Singleton<DirectionIndicatorManager> {

    public void SetGameObjectToHeadsUpDirectionIndicatorTarget(GameObject gameObject) {
        GameObject indicatorObject = GameObject.Find("HeadsUpDirectionIndicator");
        HeadsUpDirectionIndicator indicator = indicatorObject.GetComponent<HeadsUpDirectionIndicator>();
        indicator.TargetObject = gameObject;
    }
}

```
tidyr::spreadでkeyの変数で自動的にソートされないようにする

タイトルの通りで，自分用のメモ。結論から言うと**spreadでkeyに指定する変数をfactor型にしとけば順序は指定できる**。

``` r
library(dplyr)
#>  
#>  Attaching package: 'dplyr'
#>  The following objects are masked from 'package:stats':
#>  
#>      filter, lag
#>  The following objects are masked from 'package:base':
#>  
#>      intersect, setdiff, setequal, union
library(tidyr)
```

まずはデータセット準備。

``` r
df <- tibble::rownames_to_column(iris, var = "id") %>% 
  mutate(id=as.integer(id)) %>% 
  gather(key, value, contains("l."))

str(df)
#>  'data.frame':   600 obs. of  4 variables:
#>   $ id     : int  1 2 3 4 5 6 7 8 9 10 ...
#>   $ Species: Factor w/ 3 levels "setosa","versicolor",..: 1 1 1 1 1 1 1 1 1 1 ...
#>   $ key    : chr  "Sepal.Length" "Sepal.Length" "Sepal.Length" "Sepal.Length" ...
#>   $ value  : num  5.1 4.9 4.7 4.6 5 5.4 4.6 5 4.4 4.9 ...
```

そのままspreadしてしまうと，変数の順番が自動で出てきてしまう:

``` r
df %>% 
  spread(key, value) %>%
  head()
#>    id Species Petal.Length Petal.Width Sepal.Length Sepal.Width
#>  1  1  setosa          1.4         0.2          5.1         3.5
#>  2  2  setosa          1.4         0.2          4.9         3.0
#>  3  3  setosa          1.3         0.2          4.7         3.2
#>  4  4  setosa          1.5         0.2          4.6         3.1
#>  5  5  setosa          1.4         0.2          5.0         3.6
#>  6  6  setosa          1.7         0.4          5.4         3.9
```

そこでkey変数を一旦factor型(orderは出てきた順)に設定してspreadするとうまくいく:

``` r
df %>% 
  mutate(key = forcats::fct_inorder(key)) %>% 
  spread(key, value) %>% 
  head()
#>    id Species Sepal.Length Sepal.Width Petal.Length Petal.Width
#>  1  1  setosa          5.1         3.5          1.4         0.2
#>  2  2  setosa          4.9         3.0          1.4         0.2
#>  3  3  setosa          4.7         3.2          1.3         0.2
#>  4  4  setosa          4.6         3.1          1.5         0.2
#>  5  5  setosa          5.0         3.6          1.4         0.2
#>  6  6  setosa          5.4         3.9          1.7         0.4
```

ちなみにgather()にはfactor\_keyという引数があって，これをTRUEにするとkeyが自動的にfactor型にしてくれる:

``` r
df2 <- tibble::rownames_to_column(iris, var = "id") %>% 
  mutate(id=as.integer(id)) %>% 
  gather(key, value, contains("l."), factor_key = TRUE)

str(df2)
#>  'data.frame':   600 obs. of  4 variables:
#>   $ id     : int  1 2 3 4 5 6 7 8 9 10 ...
#>   $ Species: Factor w/ 3 levels "setosa","versicolor",..: 1 1 1 1 1 1 1 1 1 1 ...
#>   $ key    : Factor w/ 4 levels "Sepal.Length",..: 1 1 1 1 1 1 1 1 1 1 ...
#>   $ value  : num  5.1 4.9 4.7 4.6 5 5.4 4.6 5 4.4 4.9 ...
```

なので，これをそのままspreadすればOK:

``` r
df2 %>% 
  spread(key, value) %>% 
  head()
#>    id Species Sepal.Length Sepal.Width Petal.Length Petal.Width
#>  1  1  setosa          5.1         3.5          1.4         0.2
#>  2  2  setosa          4.9         3.0          1.4         0.2
#>  3  3  setosa          4.7         3.2          1.3         0.2
#>  4  4  setosa          4.6         3.1          1.5         0.2
#>  5  5  setosa          5.0         3.6          1.4         0.2
#>  6  6  setosa          5.4         3.9          1.7         0.4
```

**Enjoy!**
s3_websiteを使って静的サイトをホストしてみた。

s3_website を使って静的サイトをホストした時に詰まったことをメモしておく。
https://github.com/laurilehmijoki/s3_website 

##s3_websiteとは
s3でwebサイトをホストするためのコマンドラインツール。s3とCloudFrontの設定をしたり、静的ファイルをs3アップロードしたりできる。

##手順

初期設定のawsのアクセスIDや、シークレットキーを取得する方法は[こちら](https://github.com/laurilehmijoki/s3_website/blob/master/additional-docs/setting-up-aws-credentials.md)。

githubのReadmeを参照。
https://github.com/laurilehmijoki/s3_website

###詰まったポイント

1.CloudFront設定
なぜか```s3_website cfg apply```だけでは、自動でcloudFrontの設定をしてくれなかったので```--headless```と``` --autocreate-cloudfront-dist```をつけて実行。

```s3_website cfg apply --headless --autocreate-cloudfront-dist```

2.exapmleフォルダの中に、index.htmlというファイル構成にしていたのだが、```s3_website push```ではアップロードできなかったので、```s3_website.yml```の中の ```site:```を```site:./```と指定して、実行した。

##疑問

CloudFrontの設定で、CNAMEを以下のように定義したのだけれど、この時点ではhttp://example.com にはアクセスできず、Route53のAレコードでexample.comとcloudFrontのドメインをマッピングするとアクセスできた。Route53を使わなくてもexample.comにアクセスできるようにできそうだけど、、、、。なぜできなかったのかをまた調べてみる。

```
cloudfront_distribution_config:
  default_cache_behavior:
    min_ttl: <%= 60 * 60 * 24 %>
  aliases:
    quantity: 1
    items:
      - example.com
```
Mattermostの使い方(基本編)

# Mattermostの使い方(基本編)
## はじめに
- こちらの記事にインスパイアされています
  - http://qiita.com/block/items/e058e5d3ba7053549287
- Mattermost Team Edition 3.7.3をベースに記述しています。新しいバージョンがリリースされたら、随時更新する予定です。

## トップページ
ログインするとこんな感じのページが表示されます。
初回ログイン時には、チュートリアルが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/650d4a52-6e6c-aafd-09f0-381bd7525f42.png)

Mattermostの画面は3ペイン構成になっています。
### 左サイドバー
ナビゲーション用のサイドバーです。
自分が参加しているチャンネルや、ダイレクトメッセージが一覧表示されます。
### メイン
投稿内容が表示されるメインの領域です。
デフォルトは固定幅ですが、アカウントの設定から全幅表示に切り替えることも可能です。
### 右サイドバー
右サイドバーは普段は表示されませんが、返信や検索の際に表示されます。
ボタンクリックで右サイドバーの領域を広げることも出来ます。

## 左サイドバー
### チャンネル
チャンネルの一覧です。自分が参加しているチャンネルが一覧表示されます。
チャンネルには公開(public)と非公開(private)があります。
※非公開のチャンネルは"グループ"と表記されていますが、次バージョン(3.8)では"チャンネル"に統一される予定です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/51f4e9cf-234c-e8e8-9ab0-a268dd246bb0.png)

### ダイレクトメッセージ
特定ユーザーとのやりとりが出来ます。
複数人を対象とした、グループDMも利用できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/f15ce726-676c-472b-015e-c2627df897a7.png)

## メイン
### チャンネル情報
チャンネルの情報です。
チャンネルに設定されているヘッダーと、参加しているユーザー数が表示されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/57b6d9e2-ac5a-a1db-754b-42aeb5b6c54d.png)

チャンネル名をクリックすると、チャンネル毎の通知設定ができます。
ヘッダーは複数行指定が可能になっていて、クリックすると全文表示されます。
チャンネル名の隣にある☆をクリックすると、左サイドバーの先頭に「お気に入り」として表示されるので、
よく使うチャンネルをお気に入りに登録しておくと非常に捗ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/6664403a-33a9-70b9-043f-531e3c546301.png)

### メッセージ
投稿されたメッセージが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/07179ea0-1cb6-1613-a3f0-da11b3e58ebc.png)

各メッセージをマウスオーバーして表示される`[...]`をクリックすると、そのメッセージに返信したり、メッセージ毎にユニークなパーマリングを取得出来ます。
返信は、`[...]`の隣の矢印ボタンでも出来ます。

マウスオーバーすると旗のアイコンが投稿時間の隣に表示されます。
これをクリックすると、メッセージに目印(フラグ)を付けることが出来ます。

### 投稿
画面下のテキストボックスから、メッセージを投稿できます。
テキストボックス近くの :paperclip: のアイコンをクリックするか、ドラッグアンドドロップでファイルを添付できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/86e1ac21-66ed-8437-4aa4-140ddf713f53.png)

MattermostではMarkdownの書式を利用できます。
Shift + Enterで改行を入力できます。
(Ctrl + Enterで投稿するように設定すれば、Enterで改行することも可能です)

### 検索、フラグ
テキストボックスに検索したいワードを入力してエンターを入力すると、投稿を検索することが出来ます。
(データベースによっては日本語の検索がうまく働かない事があるようです。)
テキストボックス右の`@`をクリックすると、自分宛のメンションを検索できます。
`@`の右の旗のアイコンをクリックするとフラグを付けたメッセージを検索できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/8500/9cbbd960-44a6-c33d-c7eb-27da9741e4ff.png)
docker-composeで作ったrailsの環境でbinding.pryを使えるようにする話

docker-composeでrailsの環境構築して、↓みたいな感じでpry仕掛けてデバッグしようとしたら動かなかった


```ruby
class HogeControler < ApplicationController
  def index
    binding.pry
  end
end
```

#解決策
```yaml:docker-compose.yaml
web:
  tty: true
  stdin_open: true
```
これを自分の環境に合わせて入れる
これするだけで、pryが仕掛けられるようになる

あと、

```
docker-compose up
```
で起動させてる場合、

```
docker-compose run --service-ports web
```
とかで起動させると動くと思います。

＊このままだとコンテナが破棄されず残ってしまうみたいなので、
@mizukmb さんのコメントを見てコマンドを変えてみてください！
db:migrateが何故だか失敗する

```
$ RAILS_ENV=production bin/rake db:migrate　#失敗
$ RAILS_ENV=production bundle exec rake db:migrate #成功
```

どうやら、`bin/rake`を使うと`spring`ってのが動くのだがこれが悪さしていたようだ。
`production`環境では、`bundle exec`を使う方が無難とのこと。

> SpringはRailsアプリケーション用のプリローダーです。アプリケーションをバックグラウンドで常駐させることで開発速度を向上させ、テストやrakeタスク、マイグレーションを実行するたびにRailsを起動しないで済むようにします。

> Rails 4.1アプリケーションに含まれるbinstubは「spring化」されています。これは、アプリケーションのルートディレクトリでbin/railsおよびbin/rakeを実行すると自動的にspring環境をプリロードするということです。
https://railsguides.jp/4_1_release_notes.html
開発用Macが届いた時のセットアップメモ

職場で開発用にMacBook Proを支給してもらえたので、初期セットアップのメモ。


前提
===

* MacBook Pro Retina 13 with Touch Bar
* US配列
* ~~Javaとかで開発~~
    * 最近はJavaScript, Pythonの方が多くなりそう
* 自分好み設定

手順
===

macOSの設定
---

### トラックパッド周り

#### 環境設定＞トラックパッド

* タップでクリック、にチェック
* 軌跡の速さを少し上げる
* フルスクリーンアプリケーション間をスワイプ、を4本指に変更
* Mission Controlを4本指に変更

#### 環境設定＞アクセシビリティ＞マウスとトラックパッド＞トラックパッドオプション

* ドラッグを有効にする、にチェック
* 3本指のドラッグ、にする

### キーボード周り

#### 環境設定＞キーボード＞修飾キー

* ~~CapsLockにCommandキーを割り当てる~~
    * Karabiner Elementsを入れるとOS側の設定が無効化される様子

### Dock

#### 環境設定＞Dock

* サイズを少し小さく
* 画面上の位置を左に

### Mission Control

#### 環境設定＞Mission Control

* Dashboardを操作スペースとして表示する
* Dashboardで天気と時刻のロケーションを東京に設定する

### Safari

OSじゃないけど。

#### 環境設定＞詳細

* スマート検索フィールド：Webサイトの完全なアドレスを表示、にチェック

### ことえり

OSじゃないけど。

* ライブ変換を OFF に設定

フォント
---

* [Fira Code](https://github.com/tonsky/FiraCode)
    * プログラミング用
* [MyricaM](https://myrica.estable.jp/myricamhistry/)
    * iTerm2用

アプリケーション
---

* [Karabiner Elements](https://github.com/tekezo/Karabiner-Elements/blob/master/README.md)
    * left_Commandに英キー
    * right_Commandにかなキー
    * caps_Lockにleft_Commandキー
        * どうやらOS側の設定がリセットされる様子
* [Visual Studio Code](https://code.visualstudio.com)
* Chrome
    * 必要に応じて Canary も
* [Docker for Mac](https://docs.docker.com/docker-for-mac/install/#download-docker-for-mac)
* [iTerm2](https://www.iterm2.com)
    * [iterm2 with fish の「これだけはやっておけ」的な設定メモ](https://qiita.com/moomooya/items/81cde5d442a229586eff)
* [Logicool Presentation](https://support.logicool.co.jp/ja_jp/software/logi-presentation)
    * Logicool Spotlight用に
* [Homebrew](https://brew.sh/index_ja.html)
    * Caskは統合されました
* [ForkLift](https://itunes.apple.com/jp/app/forklift-file-manager-and-ftp-sftp-webdav-amazon-s3-client/id412448059)
* [Remote Desktop](https://itunes.apple.com/jp/app/microsoft-remote-desktop-10/id1295203466)
* [MonoSnap](https://itunes.apple.com/jp/app/monosnap/id540348655)
* [Mattermost Desktop App](https://mattermost.com/download/)
* [cotEditor](https://itunes.apple.com/jp/app/coteditor/id1024640650)

### あまり使わなくなってしまったものたち

* ~~[Alfred](https://www.alfredapp.com)~~
    * 環境設定＞Spotlight＞キーボードショートカット、からSpotlightの呼び出しをOFFに変更
    * Alfredの呼び出しショートカットを`command + space`に変更
* ~~[VirtualBox](https://www.virtualbox.org/wiki/Downloads)~~
* ~~[Vagrant](https://www.vagrantup.com/)~~
* ~~[JDK 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)~~
* ~~[IntelliJ](https://www.jetbrains.com/idea/download/)~~

### Homebrew (Cask) でインストール

TODO: brewfile書く

* git
* nodebrew
    * `mkdir -p ~/.nodebrew/src`しないと`nodebrew install-binary [version]`でこける
    * `sudo nodebrew install-binary [version]`しないと権限でこける
* Ansible
* Python関係（追って書く）

リポジトリ設定など
---

### 認証鍵作って登録

```shell
$ ssh-keygen -t rsa -b 4096 -C "端末がわかるような名前"
```

で公開鍵を作成して各所に鍵を登録
[メモ]cygwin環境の構築

WindowsにCygwin環境を再構築することにしたのでついでに手順をメモ。

- Python 3.6
- Fortran90
- C/C++

を使って科学技術的な計算をする人向け。

まず、
**Cygwin上でmatplotlibは諦めよう**
頑張ればできるのかもしれない。しかしその時間を開発にあてれば生産性は何倍にもなるだろう。
すこしのがまんで十分な環境が手に入る。

# Anaconda導入
なにも考えることはない。
Python 3.6 Version 64bit-installer(32bitなら32bit)をダウンロードしてインストール。
~~https://www.continuum.io/Downloads~~
2019/03/22追記
Anacondaのドメインが変わっているのでこちらへ。
https://www.anaconda.com/distribution/

# Cygwin導入
とりあえず[公式](https://www.cygwin.com/)からsetup-x86_64.exe(32bitの場合はsetup-x86.exe)をダウンロード。そのまま実行して、パッケージ選択まで次へを連打。
![initial.png](https://qiita-image-store.s3.amazonaws.com/0/124076/8df0c7bf-8b0e-76ef-923c-4645cd7e8b85.png)

今回入れるのは
### C/C++

- gcc-core
- gcc-g++

### Fortran

- gcc-fortran

### Python
Anacondaに任せた。

### 共通

- make
- git
- wget

これらを選んだら次へ。依存関係に必要なパッケージを自動で出してくれるのでそのまま次へ進んでインストール。

# apt-cyg導入
本題とはズレるが今後のパッケージ管理のためにapt-cygを導入しておく。
これに関してはこちらを参照させていただきました。
http://qiita.com/hkuno/items/df06db4bb406a17d2494

# matplotlib導入
cygwinで苦労するのがmatplotlibの導入。冒頭に書いたとおり、**諦める**。
が、Anaconda側のPythonのパスが通っていれば、CygwinでiPythonを呼ぶとAnacondaのものが呼ばれる。このiPython上でならscipyもmatplotlibも問題なく動作する。なお、この場合はPython環境はAnacondaのものになるのでPythonのパッケージのインストールなどはcondaで行う。
(これならばX windowsも動かさなくていいのでわりと労力はトントンじゃないだろうか。)

**2017/10/02 追記**
cygwinにAnacondaのパスを通す。cygwinのユーザディレクトリにある.bashrcに以下を追加する。

```
PATH=/cygdrive/c/Anaconda3:/cygdrive/c/Anaconda3/Scripts:/cygdrive/c/Anaconda3/Library/bin:$PATH
export PATH
```

.bashrcは一度でもmintty(cygwinでよく使われるターミナル)を起動すれば自動でされている。Windows側でAnacondaのインストール場所を変更している場合は適宜PATHを変更すること。
これでcygwin上でipythonを経由せずにanacondaのpythonを叩ける。

# まとめ
MacかLinuxを用意しよう。
SpringAOPとライブラリによるproxy化対象クラスの違い


## 背景
メソッドに対するトランザクション処理を実装する。
@Transactionalアノテーションを使って実現しようとしたところ、アノテーションを付けるとBeanCreationExceptionが発生するようになった。

## 解決方法
トランザクション処理の対象メソッドを含むクラスに対しインターフェースを作成し、実装クラスのメソッドに対して@Transactionalアノテーションをつけるようにする。
これでエラーが出ず、無事にコンパイルできるようになりました。

```HogeProcessor.java
public interface HogeProcessor extends Processor<Object, Object> {
    Optional<Object> process(HogeEntity hogeEntity);
}
```

```HogeProcessorImpl.java
public class HogeProcessorImpl implements HogeProcessor {

    @Override
    @Transactional(propagation = Propagation.REQUIRES_NEW)
    public Optional<Object> process(HogeEntity hogeEntity) {
    ...
    ...
    }
}
```

## 原因
自分で調べたもののわからなかったので、教えてもらいました。

> インタフェースと実装クラスに分離して治ったら、これが原因。
http://stackoverflow.com/questions/15688689/unsatisfieddependencyexception-in-spring-illegal-arguments-for-constructor-a

> AOPに使うライブラリの仕様が原因で、この辺に詳細は載っています。
http://d.hatena.ne.jp/minokuba/20110321/1300705068


教えてもらったページを読んでもわからなかったので、調べてみました。
ここから下はその調べた内容のまとめです。

## SpringAOPとライブラリによる差異

Javaの＠TransactionalアノテーションはSpringAOPを使って実現されていますが、このAOPのライブラリが今回の原因のようです。

### AOPとは
アスペクト指向プログラミング。
アスペクトとは振る舞い、共通処理の単位を表す。
業務的には本質的ではない、システム的な共通処理を外出しすることができる仕組み。

今回は指定されたメソッドが呼び出されるタイミングでトランザクションを開始する処理を挟み込むために、AOPを利用します。

AOPは設定ファイルに以下のように記述することで有効化できるようです。

```aop.xml
<!-- AOPを有効化 -->
<aop:aspectj-autoproxy/>
```

### SpringAOPライブラリの種類

SpringAOPでは
・JDK DynamicProxy
・CGLib
の二種類が使える。
今回問題の起きたプロジェクトではJDK DynamicProxyのみが使われていました。

### Proxy化

> AOPのアスペクト対象となるクラスはJavaBeanでなければならない。

> 1. Spring は実行時に、アスペクト対象クラスのプロキシオブジェクトを生成します。
2. そして、プロキシオブジェクトの内部で、アスペクト対象クラスの処理を実行します。
3. ジョインポイントとして、アスペクト対象クラスが指定されると、プロキシの中でインターセプトクラスのアドバイスメソッドが呼ばれます。

http://hamasyou.com/blog/2004/11/09/spring-framework-jue-shu-ki-aop/

つまり、AOPライブラリはアスペクト対象クラスのBeanを作るとき、プロキシでラップしたProxyObjectを作る（Proxy化）。


### AOPライブラリによるProxy化対象クラスの違い

> JDK dynamic proxyでProxy化されたbeanのインスタンスを直接実装クラス指定でAutowired出来ない仕様らしいです。

http://kamatama41.hatenablog.com/entry/20140327/1395928048

JDK DynamicProxyを使う場合はインターフェースを実装したクラスがProxy化の対象になる。つまり、実装クラスを直接DIすることはできないらしい。
今回は実装クラスを直にDIしている状態で@TransactionalのAOPを使おうとしたため、JDK DynamicProxyのProxy化の対象にならず、BeanCreationExceptionが発生したというのが原因でした。

ということで、既存クラスに対して新たにインターフェースを作成して、そのインターフェースに対してDIをするように変更、既存クラスはインターフェースの実装クラスとすることで解決。
また、もう一つのAOPライブラリであるCGLibを使うことで実装クラスのProxy化ができるらしいので、今回は試していませんがこちらを利用する方法もあるようです。
Jupyter notebookで音を鳴らす

セルマジック`%%javascript`を使って、JSで書くのが早そう。
サンプル音はもちろんアレです。

```js
%%javascript
var sound = new Audio("http://dl1.getuploader.com/g/58e6069c-1c14-4b02-ab90-5ea5b63022d0/6%7Cnjv/73/%E3%83%AD%E3%83%9E%E3%83%B3%E3%82%B7%E3%83%B3%E3%82%B0%E3%82%B5%E3%82%AC2+%E9%96%83%E3%81%8D.wav");
sound.play();
```

参考:
[Javascriptで音を鳴らす](http://d.hatena.ne.jp/yambi/20110812/1313175138)
C++ Builder / String > link > Stringリテラルにstring型を足した時のエラー

```txt:動作環境
C++ Builder XE4
```

FastMMにてメモリリークを調査中。

System.Internal.StrHlpr.pas関連で52900バイトものメモリリークが発生している。

関連して以下を見つけた。
http://qc.embarcadero.com/wc/qcmain.aspx?d=75909

バージョンはC++ Builder 2010であるが、XE4はどうだろうか。

Workaroundは3種類書かれている。

UnicodeStringの定義そのものを変更するのは影響範囲が広いため、1や2の方法を検討する。

関連してそうなコードを見たが、同じようなconcatenateはしていなかった。
[html5]webアプリをネイティブアプリっぽく表示する

このリンク先で知ったのでメモ
http://qiita.com/ifhung/items/00835fe1e03379ae8eee

以下のmetaタグをheadに追加

``` html
<meta name="apple-mobile-web-app-capable" content="yes" />
```

■iOS safariの場合
１．safariの機能で「ホームに追加」というのがあるので↑を追加したページでその機能を実行

２．ホーム画面にアプリっぽくリンクが表示される

３．リンクをクリックすると、ネイティブアプリっぽくリンク先が表示される

### 注意
・ページにリンクがあって、リンクをクリックするとsafariに飛ばされる

### 以下の場合に使えそう。
・SPAなWebアプリを作るときで、ネイティブアプリっぽく見せたい
・モダンWebなwebアプリを作るとき

まだまだ精進せねば。以上。
Docker Compose with Swarm 指定したノードでコンテナを起動させる方法

## 概要
複数のノードで Docker Swarm を使用してクラスタを組織している場合、クラスタに参加しているノードはそれぞれスペックが異なったり、単純に役割を分けたかったりなど様々な理由でコンテナ(サービス)を起動させたいノードを縛りたい要求がある。
この要件に対応する docker-compose.yml の記述方法を以下に記載。

[Compose file version 3 reference](https://docs.docker.com/compose/compose-file/) 等を読み込むと確かにわかるんでしょうが、わかりにくかったので自分なりの整理で書いときます。

## システム要件
Swarmモード で Docker Compose が利用できるようになった Docker Engine のバージョン 1.13 (Composeバージョン3)以降。

## ノードにラベルを付けて起動するノードを限定する方法
Docker Swarm に JOIN しているノードあるいは、JOINさせるノードにはラベルをつけることができる。
ここでは、Webサーバ専用クラスタのノードとしてあつかい、そのノードでだけ nginx が起動するように設定する方法を書いてみる。

### 1. ノードにラベルを付ける

```
docker node update --label-add type=web <NODE_ID | HOSTNAME>
```

### 2. docker-compose.yml でコンテナが起動するノードが指定されたラベルのものにさせる
`deploy` の `placement` に `constraints` 属性があるので、ここに条件を書くことができる。
`node.labels.<LABEL_NAME> == <VALUE>` と書くとノードにつけたラベルの指定ができました。
ここでは、1.で付けたラベル type が web のものであることを条件として書いてあります。

```yaml:docker-compose.yml
version: '3'
services:
    web:
        image: nginx
        deploy:
          placement:
            constraints:
              - node.labels.type == web
```

## 起動するWorkerノードに限定する方法
ごく一般的な要件で、公式ドキュメントにも書いてありますが、一応書いときます。
`node.role == worker` とすると workerノードでしかコンテナが上がらないようになります。

```yaml:docker-compose.yml
version: '3'
services:
    web:
        image: nginx
        deploy:
          placement:
            constraints:
              - node.role == worker
```

## 課題
`==` といった記述ができるってことは、他の条件もかけるのではなかろうか。。。数値だったら、不等号なども利用できるのだろうか。。。
まだ必要にかられていないので、調べたり試したりしてませんが、きっと行けるはず。

また、`labels`や`role`以外の nodeオブジェクトの子要素や、node以外のオブジェクトの参照も可能っぽいが、どういうものが参照可能なのかは調べてないですが、いろいろ書けそうです。
詳しくは、[Specify service constraints (–constraint)](https://docs.docker.com/engine/reference/commandline/service_create/#specify-service-constraints---constraint) 参照。
Clojure + nrepl で System.out.print() とかが出力されない事の対処

# 症状
理由はよく分かんないけど、Clojure から使っている Java のライブラリの中で System.out.print() とかしてる部分があってそれが表示されなかった。

別に Java で書いたからダメって事ではなくて

````Clojure
(.print System/out "aaa")
````

とかやっても出ない。

# 対処法(とりあえず理由はおいといて)

````Clojure
(let [print-stream
      (fn print-stream
        [type]
        (let [printer (case type
                        :out '*out*
                        :err '*err*)]
          (java.io.PrintStream. (proxy [java.io.OutputStream] []
                                  (close [] (.flush ^java.io.OutputStream this))
                                  (write
                                    ([bytes]
                                     (.write @(resolve printer) (String. bytes)))
                                    ([bytes ^Integer off ^Integer len]
                                     (let [byte-range (byte-array
                                                       (take len (drop off bytes)))]
                                       (.write @(resolve printer) (String. byte-range)))))
                                  (flush []
                                    (.flush @(resolve printer))))
                                true)))]
  (System/setOut (print-stream :out))
  (System/setOut (print-stream :err)))
````
とかを、どこの namespace でもいいのでevalする

ほぼ https://github.com/clojure-emacs/cider-nrepl/blob/master/src/cider/nrepl/middleware/out.clj のまるパクりです。

# 途中まで調べた事
上に

````Clojure
(.print System/out "aaa")
````

が表示されないと書いたけど、Emacs から cider-jack-in するとダメだけど

````shell-session
java -cp ~/.m2/repository/org/clojure/clojure/1.8.0/clojure-1.8.0.jar clojure.main
````

と、シンプルな構成で起動すると問題なかったので、nrepl あたりで問題が出てそう。

多分、System.out.print() とかで表示されてないというのは、nrepl の サーバの System.out に出てるんだろうけど、それが nrepl のクライアントに来てないのかと思う。

でも、`cider.el` の変数 `cider-jack-in-nrepl-middlewares` で、その辺り設定していると思うんだけど、特にイジってなくて `("cider.nrepl/cider-middleware")` で、いいのかなと思う。

直接、問題の箇所っぽい `cider.nrepl.middleware.out/wrap-out` だけを指定しても変わんないし。
自分のGitHubの全レポジトリを取得してghqで管理する

さっと自分のレポジトリを取得してghqで管理する方法です。(macOS)

## 準備
ghqの他にjqを使います。
インストールしてない場合は`brew`でインストール

```sh
$ brew install jq
```

## レポジトリの取得
curlを使ってレポジトリの取得を行います。
なおprivateなレポジトリの場合は、認証挟む必要があります。

`your_name`を適宜、自分のアカウント名に書き換えてください。
また、今回は、100個のレポジトリかつ更新順に取得しています。
パラメータを変えることでいい感じに調整してください。
パラメータは以下のリンクを参照してください。

[GitHub API v3 | GitHub Developer Guide](https://developer.github.com/v3/)

```sh
$ curl 'https://api.github.com/users/${your_name}/repos?per_page=100&sort=updated' | jq -r '.[] | .full_name' > repos.txt
```

確認します。
`jq -r`を付けないと要素がダブルコーテーションで囲まれるので注意です。

```sh
$ cat repos.txt
akameco/PixivDeck
akameco/dotfiles
akameco/yamada
akameco/python-bot-sample
akameco/pixiv-app-api
akameco/SSConnectAPI
akameco/NarouTime
akameco/QiitaX
.
.
.
```

## ghqを使った取り込み

これを`ghq import`を使って読み込みます。
すでにある場合はスキップされます。

```sh
$ ghq import < repos.txt
    exists /Users/akameco/src/github.com/akameco/PixivDeck
    exists /Users/akameco/src/github.com/akameco/dotfiles
    exists /Users/akameco/src/github.com/akameco/yamada
		...
```

以上で完了です。
Aurora Note


# Get my Server_name
`select @@aurora_server_id;`

# Replication status
```
select server_id,session_id,replica_lag_in_milliseconds from information_schema.replica_host_status;
```

# Intra region replication individual cluster
1. Snapshot from main cluster
2. Create slave cluster from 1. snapshot
3. Get log name/position from slave cluster's Log
4. set remote master @ slave cluster  
5. start slave


## set remote master on RDS/Aurora
http://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/mysql_rds_set_external_master.html

syntax

```
CALL mysql.rds_set_external_master (
  host_name
  , host_port
  , replication_user_name
  , replication_user_password
  , mysql_binary_log_file_name
  , mysql_binary_log_file_location
  , ssl_encryption
);
```

## Replication for mysql-DB? (user or schema..)

`GRANT ... ` propergated to slave normary.
TODO: how to replicate only specific dbs or tables.
iPhoneシュミレーターがWEBインスペクタ（ディベロッパーツール）に表示されない

#便利なSafariのディベロッパーツール
Xcodeのシュミレーターで見ているsafariは、Mac上のWEBデベロッパーツールが使うことができます。
詳細の使い方は [こちら](http://qiita.com/toruta39/items/a570241739d8c1f41c75)

#なのになぜかSafariの一覧に表示されない
→Mac上のSafariを再起動

シュミレーターのSafariを立ち上げた後に、
Mac上のSafariを再起動をしないと表示されない模様
JUnitをバッチ実行してカバレッジも取得する方法

#はじめに
自分へのメモ的な意味合いも兼ねて書きます。
私はまだSE歴も浅く技術力も知識も未熟なため、間違っているところがあるかもしれません。
もし間違っているところがあれば、指摘していただけると嬉しいです。で、できれば優しく。。

#＜前提条件＞
・Windows10 64bit
・Java7
・eclipse Version: Luna Service Release 2 (4.4.2)
　以下のプラグインがインストール済み
　　・junit ver 4.12
　　・maven 4.0.0
　　・EclEmma 2.3.3
　　・Hudson/Jenkins 1.4.0

#１．jacocoをMaven依存関係に追加する。

・pom.xmlファイルに以下の文を追加

    <!-- jacoco -->
    <dependency>
      <groupId>org.jacoco</groupId>
      <artifactId>jacoco-maven-plugin</artifactId>
      <version>0.7.9</version>
      <scope>test</scope>
    </dependency>
    
#２．mvnコマンドを使えるようにする

・まずmavenのインストールパスをシステム環境変数に追加

例）
変数名：M2_HOME
パス　：D:\apache-maven-3.3.9
	
・システム環境のPathに以下を追加する
%M2_HOME%\bin;

#３．実行したいプロジェクトディレクトリで以下のコマンドを実行する
	mvn clean org.jacoco:jacoco-maven-plugin:prepare-agent test -Dtest=Test.java
	mvn org.jacoco:jacoco-maven-plugin:report

＜補足＞
※ -Dtestは特定のクラスを実行したいときのオプション
※ reportでカバレッジレポートを出力する。
※ レポートのhtmlファイルは実行したディレクトリのtarget/site/jacoco/index.htmlに出力される
※ org.jacoco:jacoco-maven-plugin:prepare-agentのorg.jacocoの部分はpom.xmlの＜groupId＞に
jacoco-maven-pluginの部分は＜artifactId＞に対応しているっぽいので、もし

	No plugin found for prefix 'jacoco' in the current project and in the plugin groups


↑このエラーが出たらそこを変えてみてください。

#◎ 参考サイト
http://qiita.com/umezo@github/items/e750d8e94663f36d9500
https://ishiis.net/2016/10/13/jacoco-coverage/
http://d.hatena.ne.jp/yamap_55/20140727/1406438741
http://wiki.tk2kpdn.com/use-maven-command/
http://d.hatena.ne.jp/joe-hs/20120414/1334388111
http://www.techscore.com/tech/Java/ApacheJakarta/Maven/3/
AWS Lambdaをつかった、CloudWatch監視 -> slack通知の際のテストデータ


実際にcloud watchのしきい値いじってもいいのですが、既存システムが感知してslack通知してしまうので、作った。

LambdaのSNSテストデータと、参考記事をあわせ一部修正したもの。
動きを試すときは、Messageの中身を変えると良いかも。

```json:event.json
{
  "Records": [
    {
      "EventVersion": "1.0",
      "EventSubscriptionArn": "arn:aws:sns:EXAMPLE",
      "EventSource": "aws:sns",
      "Sns": {
        "SignatureVersion": "1",
        "Timestamp": "1970-01-01T00:00:00.000Z",
        "Signature": "EXAMPLE",
        "SigningCertUrl": "EXAMPLE",
        "MessageId": "95df01b4-ee98-5cb9-9903-4c221d41eb5e",
        "Message": "{\"AlarmName\":\"awsrds-app-High-DB-Connections\",\"AlarmDescription\":\"Alarm when CPU exceeds 50 percent\",\"AWSAccountId\":\"123456789123\",\"NewStateValue\":\"ALARM\",\"NewStateReason\":\"Threshold Crossed: 1 datapoint (10.0) was greater than or equal to the threshold (10.0).\",\"StateChangeTime\":\"2016-07-24T22:05:19.737+0000\",\"Region\":\"US West - Oregon\",\"OldStateValue\":\"OK\",\"Trigger\":{\"MetricName\":\"DatabaseConnections\",\"Namespace\":\"AWS/RDS\",\"Statistic\":\"AVERAGE\",\"Unit\":null,\"Dimensions\":[{\"name\":\"DBInstanceIdentifier\",\"value\":\"app\"}],\"Period\":300,\"EvaluationPeriods\":1,\"ComparisonOperator\":\"GreaterThanOrEqualToThreshold\",\"Threshold\":10.0}}",
        "MessageAttributes": {
          "Test": {
            "Type": "String",
            "Value": "TestString"
          },
          "TestBinary": {
            "Type": "Binary",
            "Value": "TestBinary"
          }
        },
        "Type": "Notification",
        "UnsubscribeUrl": "EXAMPLE",
        "TopicArn": "arn:aws:sns:EXAMPLE",
        "Subject": "TestInvoke"
      }
    }
  ]
}
```

参考記事

* https://github.com/assertible/lambda-cloudwatch-slack/blob/master/test/sns-cloudwatch-event.json
Lambdaにjarをdeployする（おまけ）

#System.getenv()で取れるもの

Javaの関数をLambdaで動かした際のPIDとSystem.getenv()をログに出してみました。

PIDは常に1で、IPアドレスは毎回同じアドレスでした。
![dep9.png](https://qiita-image-store.s3.amazonaws.com/0/169729/423a31a4-c9c5-0af5-2ed5-388430fdfbdc.png)

やはりLambda関数は独立したJavaVMのプロセスで動いているようなので、Javaで利用できるリソース共有やマルチスレッドはLambdaにマッチしませんね。
Blockly事始め

# Goal
blocklyをとりあえず始めてみるまで

# Reference
公式サイト：https://developers.google.com/blockly/
Web版の資材：https://developers.google.com/blockly/guides/get-started/web#get_the_code

# Nostalgia

以前仕事で作った業務サイトで、プログラマではない人向けに機能拡張を行うダッシュボードを作ったのですが、
そのときは管理者に、**設定として**（ここ大事！）スクリプトを書かせるという、ハードな仕様を作ってしまったのでした
あれから数年。。。今ならこうするという懐古をこめて、この記事を書いていきます。
そんなわけで、件の機能拡張UIがイイカンジにできるまで続けていきたいと思ってます。

# Get Started

まずは公式から資材を持ってきて、展開します。
ファイル構成は以下のようにします。使わないファイルは今はいらないです。

```
root
│  index.html
│
├─js
│  │  blockly_compressed.js
│  │  blocks_compressed.js
│  │
│  └─msg
│      └─js
│              ja.js
│
└─media
        中身すべて
```

mediaについては、外部リソースを使うこともできます。面倒ならそちらでも

```html:index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>blockly test</title>
</head>
<body>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <category name="Control" colour="120">
      <block type="controls_if"></block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
    </category>
    <category name="Logic" colour="210">
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="Text" colour="230">
      <block type="text"></block>
      <block type="text_print"></block>
    </category>
    <!-- 必要なブロックを並べる -->
  </xml>

  <script src="js/blockly_compressed.js"></script>
  <script src="js/blocks_compressed.js"></script>
  <script src="js/msg/js/ja.js"></script>
  <script>
    var workspace = Blockly.inject('blocklyDiv', {
      toolbox: document.getElementById('toolbox'),
      media: 'media/'  // 外部リソースを使うならこれはいらない
    });
  </script>
</body>
</html>
```

これだけ。toolboxは既存のブロックをドンドコ追加できます。
あとはつなげて遊べばいいよー
Heroku CI に於ける PHPアプリケーションのテスト自動実行


まとめです。公式ドキュメントは以下に

https://devcenter.heroku.com/articles/heroku-ci

画面イメージ付きでまとまったQiita

http://qiita.com/mokamoto/items/ecd4d5bb52523b779b02#%E3%83%90%E3%83%83%E3%82%B8%E3%81%AE%E8%A1%A8%E7%A4%BA


普通にセットアップ刷るだけでテストコマンドを実行してくれるはずですが、実際にはテストコマンドをカスタマイズしたり、テスト用の環境変数を作ったりしたいと思うので、そのへんは全部 `app.json` に書いていく感じになります。


````
{
  "env": {
    "SECRET_TOKEN": {
      "description": "A secret key for verifying the integrity of signed cookies.",
      "generator": "secret"
    },
    "WEB_CONCURRENCY": "5"
  }
  "environments": {
    "test": {
      "env": {
        "SECRET_TOKEN": "test-secret"
      }
    }
  }   
}
````

ルートの`env`と`environments`は違うので注意が必要です。

Heroku CI で必要になるのは `environments.test`です。


## テストスクリプトの指定

テスト時に実行するスクリプトでは、以下のエントリを編集します。

environments.test.scripts.test-setup
environments.test.scripts.test

## テストが走るタイミング

### 登録されたリポジトリに対するPush

Auto Deploy が登録されているブランチか否かを問わずテストが実行される。

### 登録されたリポジトリに対する PR 

PRに対する テストの自動実行は無い。 この辺は Review Appとは違う感じ。

### どのように運用するか

Circle CI や Travis などのツールのように PR のレビューツールとしての活用はかなり難しそうな印章です。

ブランチの品質保証と言うかたちで導入することは出来ますが、PR 時点でCIかければソレも不要だと思うので、
(OSSのように外部に対しても現在の状況を公開したい場合を除く)
なかなか使いどころがむずしく感じました。
GroovyでPattern.compileする

# はじめ
記事名でえ?となった方も居るでしょう。    
いや

```groovy
import java.util.regex.Pattern

def regex=Pattern.compile('牛(?:丼|めし)')
```
とすれば良いんじゃないか、と

では例のアレで分かりやすく(?)説明します

# じゃあどうするの?
## I have ...

```groovy
def regex='牛(?:丼|めし)'
```

## I have ...

```groovy
~
```
or

```groovy
bitwiseNegate()
```

## Oh!

```groovy
def regex= ~'牛(?:丼|めし)'
```

# これだけ?
だけ。
<strike>正規表現が何のネタかはお察し下さい</strike>

# 説明
以下のコードはGroovyでは(ほぼ)等価です。

```groovy:普通にPatternを使う(1)
import java.util.regex.Pattern

def regex=Pattern.compile('牛(?:丼|めし)')
```

```groovy:~を使う(2)
def regex= ~'牛(?:丼|めし)'
```

```groovy:bitwiseNegate()を使う(3)
def regex='牛(?:丼|めし)'.bitwiseNegate()
```

厳密には
`1≒2,3`、`2==3`ですね(2と3はMetaClassで上書きできてしまうため)
2と3では、1とは異なりフラグは指定できません。(2と3を使って`Patten.compile`した場合、フラグは0になります。)

利点としては、importが省略できる事ですね(`def`で宣言すれば`Pattern`クラスを出現させなくて済む)
# 注意
このコードはエラーになります。

```groovy
def regex=~'牛(?:丼|めし)'
```

`=~'`や`=~"`と書くのは駄目みたいですね。
<strike>最初そう書いてIntelliJ IDEAに怒られてから3に直してIntelliJ IDEAにまた怒られたのは内緒</strike>
DMS note


# from Aurora to Aurora

https://docs.aws.amazon.com/dms/latest/userguide/CHAP_Source.MySQL.html

1. binlog `ROW` mode
2. binlog_checksum `NONE`
3. binlog_row_image `full` but ParameterGroup DO NOT edit it. I ignored this param.

# I Guess..

- Master has to enable binlog.
- Slave `show slave status` return nothing.
- Master - DMS sync with mysql-replication.
- DMS - Slave sync with DMS-tec.