OmniAICreator/Qiita-1.07M huggingface dataset:
Vagrant上でNode.jsを動かす際にハマりがちなポイントを雑に紹介する

Nuxt.js でアプリを作成する際に環境構築でハマったポイント（もしくは初めての場合ハマるであろうポイント）と、その対処法を紹介します。

ちなみに今回は、Windows10 Home 上に VirtualBox + Vagrant で Linux 環境を作り、さらにその Linux 上で Docker を起動させて実行環境を作るという方式でアプリを作成していました。

## ハマりポイント① : ポートフォワーディング
### 事象
ブラウザで localhost:3000 等でアクセスしようとする場合、ホストOS（windows）とゲストOS（Linux）でポートフォワーディングの設定を済ませておく必要があります。
### 対応方法
Vagrantfile に次のようにポートフォワーディングの設定を追加します。

```diff:Vagrantfile
+  config.vm.network "forwarded_port", guest: 3000, host: 3000
```

## ハマりポイント②：yarn install
### 事象
yarn install をした際に次のようなエラーが出る場合があります。
私の場合は次のようなエラーが出ました。

```
error An unexpected error occurred: "EPROTO: protocol error, symlink '../../../../webpack/bin/webpack.js' -> '/nuxt/node_modules/@nuxtjs/friendly-errors-webpack-plugin/node_modules/.bin/webpack'".
```

### 対応方法
yarn install する際に、オプションとして `--no-bin-links` を付けて実行します。

```
$ yarn install --no-bin-links
```

参考
■ [【npm】【Vagrant】Vagrantの共有フォルダ上でnpm installすると失敗する原因と、–no-bin-linksオプションをつけると成功する理由](https://yoda56.com/archives/104)

## ハマりポイント③：sh: 1: cross-env: not found
### 事象
`yarn dev` で 開発サーバーを起動しようとすると（特に express を導入している場合に）、次のようなエラーが出る場合があります。

```
/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.
```

```
Error: spawn nodemon ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
    at onErrorNT (internal/child_process.js:379:16)
    at process._tickCallback (internal/process/next_tick.js:178:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:697:11)
    at startup (internal/bootstrap/node.js:201:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
error Command failed with exit code 1.
```
### 対応方法
package.json の scripts において node_modules のパスを記載するようにします。

```json:package.json（失敗時）
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
  },
```

```json:package.json（成功時）
  "scripts": {
    "dev": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/nodemon/bin/nodemon.js server/index.js --watch server",
  },
```

## ハマりポイント④：アプリケーションの HOST, PORT 設定
### 事象
開発サーバーを起動してブラウザで localhost:3000 等にアクセスしても、ページが表示されない場合があります。

### 対応方法
アプリケーション側で HOST と PORT の設定をします。
サーバーの設定ファイルで指定したり、

```javascript:server/index.js
const host = process.env.HOST || '0.0.0.0'
const port = process.env.PORT || 3000
```

起動スクリプトにオプションで渡したりする方法があります。

```json:package.json
  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/nodemon/bin/nodemon.js server/index.js --watch server",
  },
```
音声読み上げ用の不要文字列除去Webサービスを作ろうと思います

以下のようなWebサービスを作ろうと思っています。

簡単に言えば、複数行の文字列を置換してくれるサービス
用途は音声読み上げに邪魔な文字列を削除すること。
具体的には、勝間和代さんのサポートメールを音声読み上げしてもらう時に邪魔な、
・URL
・巻末の定型文
を削除したいと思っています。

まずはコピペした文章を張り付けて、URL除去と、複数行のターゲット文字列の除去ができるWebサービスを作ろうと思います。

プログラムは読んだりちょっと書いたことはありますが、ほぼ素人なので、みなさんアドバイスよろしくお願いします。

よくわかってませんが、Ruby on Railsを調べてみようと思います。
OpenDayLightのインストール

試してみたメモ
あらかじめJDK1.8をインストール済み

# 手順
## インストール
1. OpenDayLightのRPMパッケージをダウンロードする

    ```
    # curl -LkvOf http://cbs.centos.org/repos/nfv7-opendaylight-81-release/x86_64/os/Packages/opendaylight-8.1.0-1.el7.noarch.rpm
    ```

2. yumでインストールする

    ```
    # yum -y install opendaylight-8.1.0-1.el7.noarch.rpm
    ```

3. setenvファイルを修正する

    ```
    # vi /opt/opendaylight/bin/setenv
    ```

    ```setenv.sh
    # karaf scripts
    
    （省略）
    
    export JAVA_HOME=/usr/java/default
    
    （省略）
    ```

4. サービスファイルを修正する

    ```
    # vi /usr/lib/systemd/system/opendaylight.service
    ```

    ```opendaylight.service
    [Unit]
    Description=OpenDaylight SDN Controller
    Documentation=https://wiki.opendaylight.org/view/Main_Page http://www.opendaylight.org/
    After=network.service
    
    [Service]
    Type=forking
    ExecStart=/opt/opendaylight/bin/start
    ExecStop=/opt/opendaylight/bin/stop
    User=odl
    Group=odl
    SuccessExitStatus=143
    LimitNOFILE=102400
    Restart=on-failure
    
    [Install]
    WantedBy=multi-user.target
    ```

5. 起動する

    ```
    # systemctl start opendaylight
    ```

6. コンソールログインする

    ```
    # /opt/opendaylight/bin/client
    ```

## GUIの設定
1. コンソールログインする

    ```
    # /opt/opendaylight/bin/client
    ```

2. featureをインストールする

    ```
    opendaylight-user@root>feature:install odl-dlux-core odl-dluxapps-nodes odl-dluxapps-topology odl-dluxapps-yangui odl-dluxapps-yangvisualizer odl-dluxapps-yangman
    ```

3. `http://<IPアドレス>:8181/index.html`にブラウザからアクセスする
4. ログインする
![OpenDayLightログイン画面.png](https://qiita-image-store.s3.amazonaws.com/0/34297/fcb9137d-47ca-64d0-b61e-a6654c92c397.png)

5. 以下の画面が表示される
![OpenDayLightダッシュボード.png](https://qiita-image-store.s3.amazonaws.com/0/34297/fd5c95e2-7d06-4ead-f53a-f4ea6fbdb430.png)

6. 画面上部のハンバーガーアイコンをクリックすると以下の画面が表示される
![OpenDayLight画面変更.png](https://qiita-image-store.s3.amazonaws.com/0/34297/e4348241-aae0-15b1-6f77-1a0c25016155.png)

# 参考
- [RPM Install](https://wiki.opendaylight.org/view/Deployment#RPM_Install)
- [Installing OpenDaylight](https://docs.opendaylight.org/en/stable-oxygen/getting-started-guide/installing_opendaylight.html)
- [Using the OpenDaylight User Interface (DLUX)](https://docs.opendaylight.org/en/stable-oxygen/user-guide/using-the-opendaylight-user-interface-(dlux).html)
FlutterでScaffoldのbodyにカスタムクラスを使用しないでSnackBarを表示する方法

SnackBarのチュートリアルを見るとこんなサンプルコードになっています。

```dart
import 'package:flutter/material.dart';

void main() => runApp(new SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SnackBar Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('SnackBar Demo'),
        ),
        body: new SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
        onPressed: () {
          final snackBar = new SnackBar(
            content: new Text('Yay! A SnackBar!'),
            action: new SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change!
              },
            ),
          );

          // Find the Scaffold in the Widget tree and use it to show a SnackBar!
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: new Text('Show SnackBar'),
      ),
    );
  }
}
```

もちろんこれで動作するんですが、StatefullWidgetを使っていて、StateのbuildでScaffoldを返している場合は、SnackBarのためにScaffoldの内容をStatelessWidgetのサブクラス化しなくてはならくなり、冗長です。

(StatefullWidgetのサブクラスがあって、Stateのサブクラスがあった、さらにStatelessWidgetのサブクラスが必要になってしまう。)

この問題はBuilderクラスを使うことで解決できます。
bodyのコンテンツをBuilderでラップしてScaffoldのBuildContextを使えるようにすれば？(よくわかってないが)OKです。

```dart
class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SnackBar Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('SnackBar Demo'),
        ),
        body: new Builder( // Builderでラップする
          builder: (BuildContext context){ // Scaffoldを見つけられるcontextを使う
            return new Center(
                child: new RaisedButton(
                onPressed: () {
                    final snackBar = new SnackBar(
                    content: new Text('Yay! A SnackBar!'),
                    action: new SnackBarAction(
                        label: 'Undo',
                        onPressed: () {
                        // Some code to undo the change!
                        },
                    ),
                    );
            
                    // Find the Scaffold in the Widget tree and use it to show a SnackBar!
                    Scaffold.of(context).showSnackBar(snackBar);
                },
                child: new Text('Show SnackBar'),
                ),
            );
          }
        ),
      ),
    );
  }
}
```
一度生成したHandsontableを後からajaxを使って更新させてみる＠自分確認用


Handsontableというエクセルに似た機能使えるJSのライブラリがあったので、ちょっと使ってみる。

グリッド系のライブラリの中ではすごく優秀そうな印象。



## サンプルソース
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Handsontable</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/assets/js/handsontable.full.min.js"></script>
<script src="/assets/js/script.js"></script>

<link rel="stylesheet" href="/assets/css/handsontable.full.min.css" />
</head>
<body>


<div id="grid">
</div>

</body>
</html>
```



```javascript

$(function(){

	var grid = document.getElementById('grid');
	var data = [];
	for (var i=0; i<20; i++) {
	    var row = [];
	    for (var j=0; j<20; j++) {
	        row.push('読込中');
	    }
	    data.push(row);
	}

	var table = new Handsontable(grid, {
	    data: data,
	    colHeaders: true,
	    // colHeaders: function(index) {
	    //     return ['列A','列B','列C','列D'][index];
	    // },
	    columnSorting: true,
	    sortIndicator: true,
	    comments: true,
		cell: [
		    {col: 1, row: 1, comment: 'テストコメント2'}
		],
	    fixedColumnsLeft: 2,
	    fixedRowsTop: 2
	});

	$.ajax({
		url: 'sample.php',
		type:'get',
		dataType: 'json',
		timeout:1000,
		success: function(data) {
			table.setDataAtCell(1, 1, data.num);
		},
		error: function(data) {
			alert(data);
		}
	});


    /*
    * JSONデータ（リスト）をパースする関数です。
    */
    function jsonParser(data) {
        var message = "";
        var count = 0;
        $(data.error).each( function() {
            message = message + data.error[count].code;
            message = message + ' ： ';
            message = message + data.error[count].message;
            message = message + '<br/>';
            count++;
        });
        return message;
    }

});
```

## まとめ
<img width="1208" alt="スクリーンショット 2018-06-02 22.10.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/62070/6d68af67-c717-971f-9d3c-aff9c0759543.png">

とりあえず値は適当ですが、後からセルの書き換えに成功。
Pipenv で起きる Matplotlib まわりのエラー

※ 取り急ぎ、ざっくり書いたので今後詳しく更新します。

# 環境
- OS: macOS High Sierra v.10.13.4
- pyenv: 1.2.2
- pipenv: 11.10.4

# matplotlib が使用できない

Mac 上の Pipenv で matplotlib を使用すると、"RuntimeError: Python is not installed as a framework" というエラーが出てしまうことがあります。これは Pipenv だけの問題ではありません。

Mac では、matplotlib のバックエンドには Cocoa が利用されています。しかし、 virtualenv 環境下では、matplotlib がそのバックエンドを参照できず、このことが原因となってランタイムエラーが出てしまっています。そのため、バックエンドとして TkAgg を指定してあげることで、この問題は解消されます。 

matplotlib の設定は、`matplotlibrc` に記述できます。`matplotlibrc` の場所は次のように matplotlib のメソッドから確認することができます。

```py
import matplotlib
matplotlib.matplotlib_fname()
```

確認できたら、その設定ファイルに下記の記述を追加して保存しましょう。

```
backend: TkAgg
```

これで、バックエンドを切り替えることができます。

# 日本語が豆腐になってしまう

matplotlib が利用するデフォルトのフォントは、DejaVu Serif です。しかし、このフォントには和文フォントが含まれていません。そのため、日本語は豆腐になってしまいます。 もし、図に日本語を利用する場合には使用フォントを切り替えてあげる必要があります。

まずは、https://ipafont.ipa.go.jp から IPAx フォントのゴシック体をダウンロードしてきましょう。明朝体を使いたい人は、読み替えていただければ幸いです。ダウンロードした ZIP ファイルを解凍すると、ipaexg.ttf が含まれています。これを `~/.pyenv/versions/anaconda3-5.1.0/lib/python3.6/site-packages/matplotlib/mpl-data/fonts/ttf` に入れます。もちろん、ディレクトリはお使いの Python バージョンなど環境に合わせてください。

次に、matplotlibrc に下記の行を追加します。

```
font.family: IPAexGothic
```

このあと、matplotlibrc と同じディレクトリにある fontList.json を削除すると、うまく IPAexGothic が適用されます。
MacBook Air から Raspberry pi へリモートアクセス

# はじめに

Raspberry pi　にディスプレイをつけて操作していたが、MacBook Airでリモートアクセスすることで、MacBook Air 内でどちらも操作できるようにすれば　相互コピペ　や　画面切り替え　ができるので、効率良く色々できるんじゃないかと今更ながらに気づいてしまった。。。
と言うことで、今までのことは水に流し、リモートアクセスの環境を作りました。

以下に、備忘録を残しておきます。


# 構成
MacBook Air：VNCクライアント
Raspberry pi 3 (OS:Raspbian 9)：VNCサーバー

# 手順

## VNC で接続する

### Raspberry pi の設定

#### VNC の有効化
左上の アイコン　→ 設定　→ Raspberry Pi の設定　を選択すると、画面が起動。
インターフェースタブを選択し、　VNC を有効にし、OKボタンを押す

![スクリーンショット 2018-05-26 23.57.06（2）.png](https://qiita-image-store.s3.amazonaws.com/0/232494/0f97c139-7bbd-a69b-0dce-18824c7696a1.png)

#### HDMI 接続設定の変更
左上の アイコン　→ 設定　→ Raspberry Pi の設定　を選択すると、画面が起動。
システムタブを選択し、解像度を設定　ボタンを押し、適当な解像度（※）を選択する

（※）デフォルトは VGA なので、表示ディスプレイ相当の解像度にすることはオススメ


#### ローカルIPアドレスの取得

以下のコマンドを入力することで、取得可能。

```terminal:terminal
$ sudo ifconfig
```
例として、以下な出力となる。
wlan0 の inet がローカルIPアドレス(ここでは、192.168.11.11) である


![スクリーンショット 2018-05-27 0.18.18（2）.png](https://qiita-image-store.s3.amazonaws.com/0/232494/9d1e7f67-94b1-a4c2-4769-b793b09631f6.png)

### MacBook Air から接続

[VNC Viewer](https://www.realvnc.com/download/viewer/) へアクセス、
「Download VNC Viewer」ボタンを押して、インストールファイルを取得する。
右下のダウンロードフォルダを選択し、フォルダを開き、　VNC-Viewer-xxxx.dmg をダブルクリックすることで、インストール開始する。

最後に、以下の画面が出るので　 VNC をドラッグして、 Application でドロップする。

![スクリーンショット 2018-05-27 0.28.01.png](https://qiita-image-store.s3.amazonaws.com/0/232494/5e74baa7-67ad-7ce3-704a-ed6f8f14b937.png)

左下にある　LauncherPad　から　VNC Viewer を起動し、
VNC serverの項目に、
 raspberry piのローカルIPアドレス
を入力し、OKボタンを押す。

すると、raspberry pi のユーザー名とパスワードの入力画面が出るので、
入力すると接続できる。

## Raspberry pi の日本語入力

おまじない。。。Raspbian のシステム更新。

```terminal:terminal
$ sudo apt-get update
$ sudo apt-get upgrade
```

ネット上で、よく記事に出ていた fcitx-mozc を日本語入力のシステムとして採用。

```terminal:terminal
$ sudo apt-get fcitx-mozc
```

インストール後、再起動する

```terminal:terminal
$ reboot
```

再起動後、文字入力画面で、 Ctrl + スペース　で日本語入力切り替えできるようになる。


## VNC 経由の　コピペ　のやり方
自分の忘れたとき用のメモとして。。。VNC間でコピペは以下の通り使えます。

MacBook Air：

- コピー：command + C
- 貼り付け：command + V

Raspberry pi

- コピー：Ctrl + shift + C
- 貼り付け：Ctrl + shift + V


# 参考URL

- [VNC Viewer のサイト](https://www.realvnc.com/download/viewer/)
- [VNCで接続するためにRaspberryPiの解像度を修正する](https://qiita.com/seiketkm/items/749d858653c2d1490eba)
いまさらだけどOpenStackをまとめる

#OpenStackとは
AWSやAzureなどと同じIaaSの一つ
複数のコンポーネントから構成され、年々コンポーネント数が増えている
2018年5月現在のバージョンはQueens(https://releases.openstack.org)
DockerやKubernetesと連携するための機能も提供されている

#主なコンポーネント
開発元のRedHatのページによくまとまっている
https://access.redhat.com/documentation/ja-jp/red_hat_openstack_platform/8/html/architecture_guide/components

+ Nova 仮想マシンの管理をするよ
+ Swift 画像などのデータをオブジェクト単位で保存するよ
+ Glance 仮想マシンのイメージを管理するよ
+ Neutron ネットワークの管理をするよ
+ Horizon 上記のコンポーネントたちをGUI経由でわかりやすく操作できるよ
+ Keystone API実行時のセキュリティを強化するよ

##役割とコードネームが存在する
OpenStackは各コンポーネントが連携して成り立っているが
それぞれの役割には名前がつけられている

+ Nova → Compute
+ Swift → Object Storage
+ Glance → Image
+ Neutron → OpenStack Networking
+ Horizon → Dashboard
+ Keystone → Identity


#OpenStackをお試ししたい場合
##DevStackを使うと、OpenStackを使う環境がサクッと手に入る
gitからcloneしてきて、stack.shを実行するだけ
https://github.com/openstack-dev/devstack



#AWSやAzureとの対応づけを書く(予定)
機械学習データの集め方２

[機械学習データの集め方](https://qiita.com/nonbiri15/items/f5c5c4357458bfeb03bb)についての追記です。

機械学習を成し遂げている人は、自分の目的に必要なデータを収集することを大事にしています。

## 画像技術を用いてデータの収集を加速しよう。

### 動き差分を利用して、変化のあったときだけ画像を集める。

動き差分は、実装が簡単なので、例えばRaspberryPiでも簡単にインストールできる。
motion
ラズパイでの例 [ラズパイで動体検知対応の監視カメラを作る](https://www.itmedia.co.jp/news/articles/1909/14/news011_3.html)

Ubuntuでの例 [Motion でライブカメラ+動体検知サーバー構築](http://debianj.com/ubuntu/webcam/motion)

動き差分を利用すれば定点カメラの場合、動いているものがない状況での撮影データを無視できるので、変化のない画像を大量に保存してしまうことを減らせる。


### 動画からの前景抽出で、動いているオブジェクトの範囲を自動抽出する。

OpenCV には動画から背景除去を行うライブラリが実装されている。そのライブラリは、定点カメラの動画の過去のフレームのデータから、pixel単位ごとに背景の値を保持して、背景と異なる領域、前景部分をpixel単位で判定して返すライブラリになっている。
そのため、その１枚のフレームの画像に対してBGRチャネルのほかにアルファチャネルを持っていて、アルファチャネルに前景判定の結果が入っている。前景部分には255、背景部分には0のカウントを持っている。物体の影によって画素値が変化する場合には、半分の値を返す。
そうすることで、動いている対象の領域を画素単位で絞り込めるという利点を持っている。

　人や動物やクルマなどの動くものの検出を行う場合には、動いている対象が見つかって、その対象物の領域が画素単位でわかるというのは、その後の学習を考えた時に利点が多い。

![](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/_images/resframe.jpg)

![](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/_images/resmog2.jpg)
図 BackgroundSubtractorMOG2の結果

### 検出枠を矩形で指定するやりかたで機械学習させるときの問題点
- 何の工夫もなしに学習させると、背景によって対象の検出率が変わるという結果になりやすい。
- 矩形で検出枠を指定して学習させる場合だと、対象物の輪郭がなんであるのかを通常指定できないので、本当に対象物に固有の特徴を効果的に学習させることができない。


### 画素単位で対象物がわかることを利用して、背景差し替え画像を利用したときの利点
- 背景を置き換えることができるので、学習の結果への背景の影響を低減できる。
- 原画像と背景差し替え画像とを同時に学習させると、その２つに対して共通な前景部分、前景画像の輪郭が特徴として選択されやすくなる。

このようなことから、画像を撮影する時点で工夫して、背景除去画像を撮影するのは価値がある。

https://docs.opencv.org/3.3.0/db/d5c/tutorial_py_bg_subtraction.html


### 緩めのしきい値で検出器を動かして、誤検出が多くてもいいから集める。
定点カメラのように視野が固定の場合には、動き差分や背景除去が使えますが、移動しているカメラからの画像では、そういった手法が使えません。

その場合でも、既存の検出器を使って画像を収集すると方法があります。
ゆるめのしきい値で検出器を動かせば、未検出を減らすことができます。
そのようにして収集したデータから、学習用のデータを絞り込む方が、全ての時間撮影し続けている画像から絞り込むよりも格段に楽になります。


### 単純な分類器で、明白な対象外を除去しよう

libsvmやsciki-learn などのSVMを使って、明白な対象外のデータを除外することでも、学習データを効率的に集めることができる。

### 他のセンサのトリガーイベントをもとに、画像を収集しよう。
他のセンサの出力をトリガーとして画像を収集する。例：人感センサの利用。

### 検出フレームに後続の数フレームのデータを保存する。
- 仮に人検出の場合としよう。人の姿勢が変動して検出が途切れることはありがちである。しかし、検出が途切れても後続の数フレームは、データを保存するようにしておけば、学習用の画像を収集できる。未検出になってしまった後続フレームを目視で確認した上で優先的に学習に加えれば、現状の学習で足りていない部分を補うための学習データとすることがっできる。

### 全数処理しようと考えるな
- 最初の100個よりは、ランダムな100個。
- 同じ日の1000個よりは、100個づつを10日分。



### 既存のデータベースから、自分の目的にあうデータを抜き出そう

http://www.robots.ox.ac.uk/~vgg/data/vgg_face2/data_infor.html


paper [VGGFace2: A dataset for recognising faces across pose and age](https://arxiv.org/abs/1710.08092)
pyenvの使い方

#pyenvの使い方メモ

詳しくは、[公式Command Reference](https://github.com/pyenv/pyenv/blob/master/COMMANDS.md)
以下、普段使いメモ

##有効なpyenv全コマンドをリスト
```shell
$ pyenv commands
```

##インストール済Pythonバージョンをリスト
```shell
$ pyenv versions
```

##pythonインストール
######利用可能なpython確認
```shell
$ pyenv install -l
```
######インストール
```shell
$ pyenv install <version>
```

##globalなPythonバージョン選択
全ディレクトリにおける、デフォルトPythonバージョン

```shell
$ pyenv global <version>
```

##localなPythonバージョン選択
Current directoryにおけるPythonバージョン
globalバージョンをこのdirectoryだけoverride

```shell
$ pyenv local <version>   // set
$ pyenv local --unset     // unset
```

##pythonアンインストール
```shell
$ pyenv uninstall [-f] <version>

  -f: 強制アンインストール
```
MacにpyenvでPython環境をつくる

###実施環境
Mac: OS X El Capitan
Shell: zsh (.zshrc に`source ~/.bash_profile`)

公式のインストール手順に従う
[pyenv公式(github)](https://github.com/pyenv/pyenv)

今回は、homebrewで物臭せずに**`Basic GitHub Checkout`**方式で行う

##pyenvをgithubからclone

```shell
$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
```

##環境変数を定義(pyenvにパスを通す)

```shell
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
```

##`pyenv init`を適用する設定
shimsとautocompletionを有効にするため。
※shims: プログラムのバージョン間の差異を埋める緩衝材のように使うもの
　→[参考：Shimの意味](https://qiita.com/ironsand/items/4f0342f5914a9ae99b0e)

```shell
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.bash_profile
```
- $(pyenv init -)は、PATHを操作してPATHの先頭に`$(pyenv root)/shims:`を追加する
- そのため、この記述は`.bash_profile`の末尾に記述する必要がある　→詳しくは、[Understanding Shims](https://github.com/pyenv/pyenv#understanding-shims)
- `echo -e`: エスケープシーケンスを解釈する
- `command -v <cmd>`: commandに指定された文字列をコマンドとして扱った場合のコマンドパスを出力
- eval <strings>: stringsをコマンドとして実行する。この場合、$(pyenv init -)の結果が実行される

##Shellを再起動

```shell
$ exec "$SHELL"
```
これで、pyenvが利用可能になる。

```shell
$ pyenv install 2.7.8
```

##pyenvの使い方
[参照: pyenv Command Reference](https://github.com/pyenv/pyenv/blob/master/COMMANDS.md)
Cloud Firestoreの一括書き込み[Flutter]

Cloud Firestoreのバッチ処理を Flutterで実現してみます。


FlutterでFirestoreが動かない方は以前に解決方法を書きましたので
よければご参考ください。

https://qiita.com/superman9387/items/dadd0a67a253079b69c1


## Firestoreの導入

公式プラグインと手順で導入してください。
https://pub.dartlang.org/packages/cloud_firestore


## バッチ処理

```dart

    var db = Firestore.instance;
    var batch = db.batch();
    
    var usersGroup = db
        .collection("user")
        .document(uid)
        .collection("group")
        .document(documentId);

    batch.setData(usersGroup, {
      documentId: true,
      "created_at": new DateTime.now(),
      "updated_at": new DateTime.now(),
    });

    var groupsUser = db
        .collection("group")
        .document(documentId)
        .collection("user")
        .document(uid);

    batch.setData(groupsUser, {
      uid: true,
      "created_at": new DateTime.now(),
      "updated_at": new DateTime.now()
    });

    batch.commit().then((doc) {
　　　　　　　　　　　　　　// 成功したときの処理
    });
```

基本的な実装は他のプラットフォームと変わりません。
GitHub Pages で Offline で WebApp を使う

OghlinerというGitHub PagesでOfflineでWebAppsを使うnpm packageがあります。
https://hacks.mozilla.org/2015/11/offline-web-apps-on-github-pages/
これを使ってみます。

### インストール
```
npm install oghliner
```
で導入できます、、、が、`node-gyp`が必要なのでWindowsだと躓くかもしれません。
`node-gyp`をbuildするために`windows-build-tools`をインストールします。

```
npm install --global windows-build-tools
```
参考：https://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7
https://github.com/nodejs/node-gyp/issues/1056

さらに、これだけだと環境によっては`cannot open input file 'C:\OpenSSL-Win64\lib\libeay32.lib`というエラーが出て`node-gyp`のbuildに失敗します。
Open-SSL-Win64 をインストールするか、下記を参考にして `C:\OpenSSL-Win64\lib\` に `libeay32.lib` を配置します。
参考：https://github.com/ethereumjs/ethereumjs-util/issues/43
ここまでやれば `oghliner` のinstallに成功すると思います。

### 設定
GitHubリポジトリに既存のアプリがある場合は、`integrate`コマンドを使います。

```
npm bin oghliner
./node_modules/.bin/oghliner integrate
```
このコマンドは、オフラインmanager.jsスクリプト（サービスワーカーを登録する）をアプリにコピーし、アプリのページ/テンプレートにそのスクリプトをロードするように促します。

既存のアプリがないケースはここでは省略します。

最後に、変更をコミットして設定を完了します。

アプリケーションをオフラインにするには、オフラインコマンドを呼び出して、アプリケーションをオフラインにするサービスワーカーを生成し、オフラインにするファイルを含むディレクトリを指定します。

```
oghliner offline dist/
```
アプリケーション（サービスワーカーを含む）をGitHub Pagesにデプロイするには、deployコマンドを呼び出して、アプリのファイルを含むディレクトリを再度指定します。

```
oghliner deploy dist/
```
これにより `origin/gh-pages` ブランチに勝手にPushまでされます。
LinuxにJDKをインストールする

必要があったのでメモ

# 手順
1. JDKのRPMパッケージをダウンロードする

    ```
    # curl -LkvOf --header "Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com%2F; oraclelicense=accept-securebackup-cookie" https://download.oracle.com/otn-pub/java/jdk/8u202-b08/1961070e4c9b4e26a04e7f5a083f551e/jdk-8u202-linux-x64.rpm
    ```
2. yumでインストールする

    ```
    # yum -y install jdk-8u202-linux-x64.rpm
    ```

3. バージョンを確認する

    ```
    # java -version
    ```
確認結果

    ```
    java version "1.8.0_202"
    Java(TM) SE Runtime Environment (build 1.8.0_202-b08)
    Java HotSpot(TM) 64-Bit Server VM (build 25.202-b08, mixed mode)
    ```

これでOK
壊れた Time Machine バックアップから可能な限りデータを移行する方法

## 壊れた症状
新しい mac [^1]に[Time Machine バックアップの中身を丸ごと復元](https://support.apple.com/ja-jp/HT201250#restore)しようとした．
しかし，「この Mac に情報を転送」の際に，データの読み込み中が長く続いた．
次に，クリーンインストール後の移行アシスタントで復元を試みるも，「バックアップの選択」の際にデータが無いと言われる．

これで，Time Machine バックアップの中身を丸ごと復元するのは諦め，
可能な限りのデータを移行することを目標にした．
## 方法
1. Time Machine のディスク内の.sparsebundle ファイルを右クリックし，「このアプリケーションで開く」から「DiskImageMounter」で開く．  
これで“Time Machine バックアップ” がマウントする．（先の接続されたディスクとはアイコンが違う）


> [なお、.sparsebundle データを接続しようとして、“次のディスクイメージは開けませんでした：理由 リソースが一時的に使用できません” という警告パネルが出ることがあります。
これは、他のMac がすでに接続しているという意味ですので、他のMac からは接続を解除して（ディスクを取り出して）ください。](http://blog.livedoor.jp/noanoa07/archives/2110460.html)


2. Backups.backupdb内のディスクの中にある.inProgress ファイルを，
右クリックのメニューからパッケージの表示で中身を見るorターミナルからアクセス

3. .inProgress ファイル内のディレクトリにHDがあるので，ターミナルからアクセスしてそこからデータを任意の場所に移行可能[^2]
[^2]: https://discussionsjapan.apple.com/thread/10183647?page=1

[^1]: MacBook Pro Retina (Late 2013)のSSDが死に[SSDを交換した](https://qiita.com/hidenori-t/items/fec79c428dcb1e9ae03e)．

***
Please donate at [wish list](http://amzn.to/343JRQu) if you find this useful:thumbsup_tone1:
rails 5でpostgresでjsonで定義したcolumnのdefault: []がDockerだと'[]'となる (解決)

# 背景

rails 5でpostgresでjsonのdefaultに`[]`としていたが、Dockerで起動してnewしてみると、`'[]'`となった！

# DockerのPostgresをチェック

## versionチェック

```
docker-compose run --rm db bash
bash-4.3# psql --version
psql (PostgreSQL) 9.6.7
```

##テーブルチェック

postgresの中身を直接見てみる [docker上で動かしているpostgresに接続する](https://qiita.com/gymnstcs/items/4155ec8acbb88af81543)

テーブルの中身を見てみる

```
\c <database_name>
\d <table_name>
 id            | integer                     | not null default ..
 name          | character varying           | not null
 data          | json                        | not null default '"[]"'::json
 created_at    | timestamp without time zone | not null
 updated_at    | timestamp without time zone | not null
```

なんと、`default '"[]"'::json`となっていた！


# Dockerでない方をチェック

## versionチェック

```
psql postgres
psql (9.6.3)
```

## テーブルチェック

```
\c <database_name>
\d <table_name>
    Column     |            Type             |                      Modifiers
---------------+-----------------------------+-----------------------------------------------------
 id            | integer                     | not null default 
 name          | character varying           | not null
 data_type     | character varying           | not null
 data          | json                        | not null default '[]'::json
 created_at    | timestamp without time zone | not null
 updated_at    | timestamp without time zone | not null
```

こっちは、`default '[]'::json` !!これが原因！


PostgresのVersionが違うせい？

関連記事を見つけたので呼んでみた。defaultを`{}`にしている場合にrailsに確かにバグがあったらしい。

Postgres JSONB column is returned as string instead of hash in Rails 5 RC2
https://github.com/rails/rails/issues/25594

Rails 5 AR migrations: default value for json type columns
https://github.com/rails/rails/issues/26101

>
when to use "[]" as default instead of "{}" ?

が一番最後にあるが、返信がないので、これが関係してそうだが、ローカルでRails5.0.0でsetupしたときには、問題なく`'[]'`となっていた。

# 解決策

Gemのバージョンがもしかしたら修正前なんじゃないかということで、vendor/bundle以下を全部削除して、`bundle install`し直してから、Dockerを立ち上げるとうまく言った。 db/schema.rbにも変化なくいけた。Dockerとは関係ない問題だったかもしれない。
GitHub 初心者の最初のプッシュ

そのうちにコード置き場にしたいので、GitHubにコードを上げてみました
誰も欲しいとは思わないでしょうが、ストップウォッチのコードおいてみました。
練習です

今回 やったこと
ストップウォッチのコードを
Gitを使って、GitホスティングサイトGitHubに
アップデート(Git的にはプッシュ)するまで

初心者なので、やったことを詳細に書いてみました
（このレベルを欲しい人が、Qiitaに居るか疑問もありますが)


## 1. GitHubにアカウント作成
 [GitHub](https://github.com/)に行って
![GitHub_SignUp.png](https://qiita-image-store.s3.amazonaws.com/0/258658/0d3f65e6-da46-1a35-53e3-2210f1f82e2f.png)


 Username / Email / Password 入力して「Sign up for GitHub」でアカウント作成できます（簡単です)
 他にもいろんなことを聞かれますが、そこは適当に・・・
(当方語学力ないので間違えそうで、
google翻訳を使うとなんとなくわかります)
 
## 2. リモートリポジトリ作成
 GitHubサイトでリモートリポジトリを作成 
 今回は stopwatch にしました
 (手順は、当方語学・・・)
リポジトリを作ると URLアドレスがもらえます。
後で使うのでメモ

 コードを公開する目的で行うので、 公開＆無料で作成しました。
 
 GitHubでの前準備はここまで

## 3. gitのインストール
 今回対象は,ubuntuでの作業です
   [ここ](https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参考にさせていただきました

ここからは、ターミナルでの作業

```
 $ sudo apt-get update
 $ sudo apt-get install git
```

 でインストールされます

```
 $ git --version
```

 でバージョンが表示されればインストールができています
## 4. ユーザー名とメールアドレスの設定
[Gitチートシート](https://services.github.com/on-demand/downloads/ja/github-git-cheat-sheet/)を参考にしておこなってます
gitを使うために、名前とメールアドレスを登録します
 
 ```
 $ git config —global user.name <ユーザー名>
 $ git config —global user.email <メールアドレス>
 ```
 
 GitHubにアカウント作る時に登録したの以外だとダメなのかな？
 今はトラブりたくないのでアカウント作った時のもので行いました

```
 $ git config --global --list
 ```

 で登録情報の確認ができます

## 5. ローカルリポジトリの作成
### 5-1. 作業ディレクトリへ移動
  (新しく作った方が混乱しないかも。これはGUIで行いました)
  ターミナルにてcd コマンドで移動
  
### 5-2. Gitリポジトリの作成

```
  $ git init
```

実際の作業は .git ディレクトリが作られます


### 5-3. 管理するファイルを作成
  今回は、待避してたコードを、作業フォルダーにコピーしました

### 5-4. リポジトリへの登録
  今回、持ってきたの全部なので

``` 
  $ git add .
```

  で現在のディレクトリ配下の全てが対象になります
  対話似ながらとか、登録した後に除外するとかもできるのようです。

### 5-5. コミット

```
  $ git commit -m "first commit"
```

"first commit"というコメントでコミットを行いました


## 6. リモートポジトリを登録
 ２でメモリしていた URLアドレスを登録します

```
 $ git remote add origin <URLアドレス>
```
 これで登録されたはず

```
 $ git remote -v
```

 で登録された内容を確認

 origin は レポジトリの名前でデフォルトだそうです

## 7. リモートリポジトリに反映
  ローカルリポジトリの内容をリモートリポジトリへ　　
 プッシュするというやつです

```
  $ git push origin master
```

  master はブランチの名前
  (今はデフォルトのままで、
  ブランチはそのうち機会があれば)

これで一応、GitHub に登録されました
GitHub行って、できてることを確認しました

あ！
どのアドレス公開すればいいんだ？
【UiPath】ParallelでパラレルにPCを操作したい

#できません。
できるわけないよね。
いきなりマウスカーソルが３つに増えて３箇所のボタンを同時にクリックしてくれるって事？
（本当にできるなら見てみたいけど）

#解説
このParallelアクティビティはUiPath独自のアクティビティではなく、
正体はWindows Workflow Foundationの[ParallelActivity](https://msdn.microsoft.com/ja-jp/library/ms734755(v=vs.90).aspx)です。前回触れたPickと同じですね。
このリンク先のMSDNの解説で
> 同時に開始するようスケジュールされますが、それらが実際に同時に開始されるわけではありません。

っていきなりネタバレしてます。
> そのアクティビティが完了すると、別の分岐に含まれるシーケンス内の次のアクティビティが実行され、次々に手順が実行されます。**一度に実行されるアクティビティの数は 1 つで**、複数の SequenceActivity 分岐の間でアクティビティ実行が**切り替えられながら**、最終的にすべての SequenceActivity 分岐の実行が完了します。

だって。
ワークフロー上はパラレルに処理を組めるけど、結局一度に１つずつしか実行できない、と。

#せっかくだから遊んだ
このまま終わるのはもったいないので、一応遊んでみます。
まず近距離パワー型のワークフローを作ります。
![sequence.png](https://qiita-image-store.s3.amazonaws.com/0/255097/a1923231-65ae-b37b-3b55-2bd1eb4f4e21.png)
極限までラッシュの速さを高めるため、Type intoの
- DelayAfter
- DelayBefore
- DelayBetweenKeys
は全て0に設定してます。
実行結果＞　![StarPlatinum.gif](https://qiita-image-store.s3.amazonaws.com/0/255097/e7753af2-3e76-773e-1c9d-83b43d2360b8.gif)

次にParallelアクティビティを使って近距離パワー型同士を戦わせてみます。
![paralle.png](https://qiita-image-store.s3.amazonaws.com/0/255097/69d85de1-90f1-3b1a-82c2-14ebccc5e2fd.png)
結果が見えているので全くワクワクしませんが。

実行結果＞　![DIO.gif](https://qiita-image-store.s3.amazonaws.com/0/255097/dc85f225-6e8e-965e-5b2c-a8d69b25862d.gif)
予想通り、戦うどころか律儀にパンチを交代で繰り出しています。
が、よく見ると３行目の最後の方で一瞬「無駄無駄」とDIOの方が競り勝っています。
時を止めたようです。

---
今回はここまで。
Parallelが期待に反して残念なアクティビティだったので、記事の中身もスカスカな残念なものになりました。
次回はもうちょいマシな題材で書きます。
STM32マイコンのお話

部屋にある電子部品とか整理してたら、2年くらい前に購入して以来、すっかり忘れられていた新品のSTM32ファミリのマイコンが出てきたのでその話。
ちなみに見つけたのはULTRA-LOW-POWERモデルのNUCLEO-L152RE
![DSC_0077.JPG](https://qiita-image-store.s3.amazonaws.com/0/204926/4f06365d-6b81-ec9b-e204-699fb76dd5b3.jpeg)


##STM32L152RE　スペック
CPU : CortexM3-32MHz
FLASH : 512KB
SRAM : 80KB

##まずはLチカ
ドライバインストール、ファームアップが終わったら、まずはLチカ。

```cpp:blink.cpp

#include "mbed.h"

DigitalOut myled(LED1);

int main() {
    while(1) {
        myled = 1;
        wait(0.3);
        myled = 0;
        wait(0.3);
    }
}
```

##とりあえず次はPCとのシリアル通信
```cpp:serial_com.cpp
#include "mbed.h"

Serial pc(USBTX, USBRX);

int main()
{
    pc.baud(115200);
    pc.printf("START\n");
    while(1) {
        wait(1);
        pc.printf("HELLO SERIAL WORLD!\n");
    }
}

```
出力結果はこんな感じ
![serial_com.png](https://qiita-image-store.s3.amazonaws.com/0/204926/9d5cfc4d-6c0b-8439-0e75-99d5242d5416.png)
docker-composeで「ERROR: Couldn't connect to Docker daemon at http+docker ...」のエラーが出た際の対処法を雑に紹介する

docker-composeを使用したところ、次のようなエラーが出ました。

```
ERROR: Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?
```

sudo で docker-compose を起動したところエラーなく実行できました。
Pug - extends/blockで id/class に変数を使う記述方法 / How to use Variable to id/class with extends/block in Pug

最近 Pug / Sass を本格的に使い出しました。
コードを書きやすくなり読みやすくなり、とても気に入ってます。
そこで行き着いたのは、
extends による継承と変数を使い、柔軟なコーディングがしたいと思い、わりと正解を見つけるのに苦労しました。
Jadeでは使えたらしい \# が使えず、$ (ES2015記法) のみ使えるようになっていました。
しかしこの方法を見つけたおかげで、クールなコーディングが書けそうで嬉しいです。

Recently I start to use Pug / Sass.
It makes code easier to write and easy to read, I like it very much.
Then I arrived there,
Using inheritance and variables with extends, I wanted flexible coding, then I had a hard time finding the right answer.
I had a hard time finding the right answer.
Jade seemed to be able to use \# cannot be used, only $ (ES2015 Notation) is available.
However, thanks to finding this method, I am glad that I can write cool coding.

# version

```
$ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

$ node --version
v8.11.2
```

# example

```_layout.pug 
block var_article

  main(id=main_id)
```

```index.pug 
extends _layout.pug

block var_article

  - var main_id = 'id20180602'
```

```index.html
  <main id="id20180602">
```


# kinds

| HOW TO WRITE          | RESULT   |
|-----------------------|:--------:|
| **main(id=main_id)**  | **○**    |
| **main(id=\`${main_id}\`)** | **○** |
| main(id=\`#{main_id}\`) | × `<main id="#{main_id}">`|
| main#{main_id}        | × (Error) |
| main#${main_id}       | × (Error) |


# ref

- [Pugで属性に変数を使うやり方が変わってた @tanshio / @butchi_y - Qiita] (https://qiita.com/tanshio/items/feb68782fa7291bad1c4)
　↑ 調べ終えたあとで見つけました w 

- [HTML - jadeで、idやclassに変数を使いたい(2947)｜teratail](https://teratail.com/questions/2947)
React で canvas をアニメーションさせる

React で canvas を操作するのに少し苦労したので、メモとして。

## code
```canvas_animation.jsx
import React from 'react'
import ReactDom from 'react-dom'

class KeyVisual extends React.Component {
	constructor(){
		super();
		this.canvas = null;
		this.state = {
			width : window.innerWidth,
			height : window.innerHeight,
			color : 360,
		}

		this.animationIds = null;
	}

	handleResize( event ){
		this.setState( { width: window.innerWidth, height: window.innerHeight } );
		this.initCannvas();
	}

	componentDidMount(){
		window.addEventListener('resize', () => { this.handleResize() } );
		this.initCannvas();
	}

	componentWillUnmount() {
		window.removeEventListener('resize', () => { this.handleResize() });
	}

	render(){
		let styles = {
			height: this.state.height
		}

		return(
			<div className="main" style={ styles } >
			<canvas
			ref={ (self) => { this.canvas = self; } }
			width={ this.state.width }
			height={ this.state.height }
			>
			</canvas>
			</div>
		)
	}

	initCannvas(){
		let context = this.canvas.getContext('2d');

		this.COLOR_TEMPLATE = 'hsla(%hue%, 100%, %light%, %alpha%)';


		if( this.animationIds !== null ){
			　// リサイズ時には animation を一回とめる
			cancelAnimationFrame( this.animationIds );
		}

		this.renderCanvas( context );
	}

	renderCanvas( context ){
		　// アロー関数で this を bind しておく
		this.animationIds = requestAnimationFrame( () => { this.renderCanvas( context ) } );

		context.clearRect( 0, 0, this.state.width, this.state.height );

		let radius = this.state.width / 2;

		context.save();
		context.beginPath();
		var gradient = context.createRadialGradient( 0, 0, 0, 0, 0, radius);
		gradient.addColorStop(0,   this.COLOR_TEMPLATE.replace(/%hue%/, this.state.color-30).replace(/%light%/, '90%').replace(/%alpha%/, '0.6'));
		gradient.addColorStop(0.8, this.COLOR_TEMPLATE.replace(/%hue%/, this.state.color-20).replace(/%light%/, '70%').replace(/%alpha%/, '0.4'));
		gradient.addColorStop(1,   this.COLOR_TEMPLATE.replace(/%hue%/, this.state.color).replace(/%light%/, '50%').replace(/%alpha%/, '0.1'));

		context.fillStyle = gradient;
		context.arc( this.state.width / 2, this.state.height/2, radius, 0, Math.PI * 2 , false);
		context.fill();
		context.restore();

		//次のフレームでの hue　を決定する。
		let nextColor = this.state.color - Math.random();
		if( nextColor < 0 ){ nextColor = 360 };
		this.setState( { color: nextColor  } );
	}
}

export default KeyVisual;

```
## 内容
まず、 callback ref で dom 要素を一旦保存しておくというのがポイントのようです。
この ref についてはなかなか理解できていない部分があるので、もう少しちゃんと理解する必要がありそうです。

canvas を 変数に保持できたので、あとは普通に context をとってきて、
requestAnimationFrame でループさせるだけ... とおもったのですが、
requestAnimationFrame の引数に入れるときは　アロー関数にして
this を bind しておかないとうまく動かないので注意です。

あとは、リサイズに応じて canvas サイズを変えたり、
requestAnimationFrame を止めたりすれば アニメーション完成。
サンプルでは、画面の中央に円が書かれて、色が変わるようなアニメーションにしました。

## 参考
[Refs and the Dom](https://reactjs.org/docs/refs-and-the-dom.html)
[React/Reduxと<canvas>要素を組み合わせて使う](https://qiita.com/m4iyama/items/2524b3b898c802a6b97e)
任意のHTMLタグに相当するする正規表現 <[^>]*> について

任意のHTMLタグに相当する正規表現("<"から">"までに相当)を探しています。
```<[^>]*>```という表現を見つけ、期待の動作をすることを確認しましたが、
どうしてこのような表現になるのか理解ができませんでした。

対象が以下のような場合、期待の動作は```<p>```と```</p>```にそれぞれ該当することです。
```
<p>Item</p>
```
(<.*>のように、```<p>Item</p>```全体ではなく。)

どうして```<[^>]*>```という形になるのかご教示いただけますと幸いです。
rails 生成　削除コマンド　備忘録

# 自動生成されたコードを戻すコマンド
###  $ rails generate controller StaticPages home help
###  $ rails destroy  controller StaticPages home help

##### 上が生成コマンド、下が削除コマンド。
みんな備忘録としてメモしているようなので、私もしてみようと思う。
多次元配列を返す関数

# はじめに
C言語では多次元配列をreturnで返すことできないと勝手に思い込んでいたのですが，どうもできるようなので，備忘録としてここに残しておこうかと．
まあよほどのことがない限りはout引数にするとは思いますが．

# 方法
以下のコードに示すように，関数の宣言，定義に2次元目以降の要素数を明記してやることで多次元配列を返すことができるようです．

```C:main.cpp  

#include <iostream>

// 要素数
constexpr int ARY_SIZE1 = 2;
constexpr int ARY_SIZE2 = 5;

// 多次元配列を持つクラス
class NAryClass
{
private:
	// ARY_SIZE1×ARY_SIZE2の配列
	int mAry[ARY_SIZE1][ARY_SIZE2];

public:
	NAryClass();
	~NAryClass();
	// 2次元配列を返す関数
	int(*getAry())[ARY_SIZE2];
};

// コンストラクタ
NAryClass::NAryClass()
{
	// 適当なデータの設定
	for (int i = 0; i < ARY_SIZE1; i++)
	{
		for (int jj = 0; jj < ARY_SIZE2; jj++)
		{
			mAry[i][jj] = (i + 1) * jj;
		}
	}
}

// デストラクタ
NAryClass::~NAryClass()
{

}

// 多次元配列を返す
int (*NAryClass::getAry())[ARY_SIZE2]
{
	return mAry;
}


int main()
{
	NAryClass nAry;

	// 多次元配列を取得
	int(*nAryData)[ARY_SIZE2] = nAry.getAry();

	// 取得データ表示
	for (int i = 0; i < ARY_SIZE1; i++)
	{
		for (int jj = 0; jj < ARY_SIZE2; jj++)
		{
			std::cout << nAryData[i][jj] << "  ";
		}
		std::cout << std::endl;
	}

    return 0;
}
```

# 参考
[[C][C++] 2 次元配列を返り値に持つ関数](https://blog.goo.ne.jp/marunomarunogoo/e/23702a94359e7bd511b05c06a4acfc96)
Google MockのSaveArg<T>の使い方

#動機

前回の記事でGooglemockの簡単な使い方を紹介したが、今回はMockをもっと活用する方法を紹介する。

#SaveArg<T>とは

SaveArg<T>はEXPECT_CALLの後につけられる関数で、呼ばれる事が期待される関数に与えられた引数へのポインタを保存することができる。これにより調べる関数内でMockされたクラスに与えられた引数を知ることができる。

#例

前回のサンプルを一部変更して、doSomethingに与えられた引数をSaveArgでdataに保存し、40であることを期待するようにするEXPECTを書く

```

class IInjected{
public:
    virtual ~IInjected() = default;
    virtual int doSomething(int x) = 0;
};

class InjectedMock : public IInjected{
public:
    InjectedMock(){}
    MOCK_METHOD1(doSomething, int(int));
};

class Target{
public:
    Target(std::unique_ptr<IInjected> injected):injected_(std::move(injected)){}
    void doAnything(){
        auto y = injected_->doSomething(40);
    }
private:
    std::unique_ptr<IInjected> injected_;
};

TEST(test, test){
    int data;
    std::unique_ptr<InjectedMock> injectionMock = std::make_unique<InjectedMock>();
    EXPECT_CALL(*injectionMock, doSomething(testing::_)).Times(1).WillOnce(testing::SaveArg<0>(&data));
    auto&& target = Target(std::move(injectionMock));
    target.doAnything();
    EXPECT_EQ(data, 40);
}
```

testing::_はプレースホルダーでどんな引数が来てもOKであることを意味する。この例だと単純に

```
    EXPECT_CALL(*injectionMock, doSomething(40)).Times(1)
```
でも同じことだが、引数が特定の範囲内であるとか、より条件が複雑な場合にはSaveArg<T>が役に立つ。だが、一番役に立つときはstd::function、つまりlambdaが引数として与えられている時である。

# LambdaとSaveArg\<T\>

ラムダの中に定義された関数オブジェクトをテストしたいとき、そしてその関数オブジェクトを与える先がMockできるとき、SaveArg\<T\>により関数オブジェクトへのポインタをTargetオブジェクトの外に引っ張ることができる。

```
class IInjected{
public:
    virtual ~IInjected() = default;
    virtual void doSomething(std::function<int(int)> func) = 0;
};

class InjectedMock : public IInjected{
public:
    InjectedMock(){}
    MOCK_METHOD1(doSomething, void(std::function<int(int)>));
};

class Target{
public:
    Target(std::unique_ptr<IInjected> injected):injected_(std::move(injected)){}
    void doAnything(){
        injected_->doSomething([](int x) -> int{
            return x * x;
        });
    }
private:
    std::unique_ptr<IInjected> injected_;
};

TEST(test, test){
    std::function<int(int)> lambda;
    std::unique_ptr<InjectedMock> injectionMock = std::make_unique<InjectedMock>();
    EXPECT_CALL(*injectionMock, doSomething(testing::_)).Times(1).WillOnce(testing::SaveArg<0>(&lambda));
    auto&& target = Target(std::move(injectionMock));
    target.doAnything();
    EXPECT_EQ(lambda(5), 25);
}

```
SalesforceでWebサイト作成〜まとめ〜

# **はじめに**
Salesforceの勉強を兼ねて練習用WEBサイトを作成しており、そこで学んだことをまとめました。

## **実装機能**
⑴ 登録した商品を表示
<img width="1417" alt="スクリーンショット 2018-06-01 23.43.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/240803/c695af80-d250-bf36-a1ce-34bdcf75e38c.png">
> 詳細はこちら
> https://qiita.com/szaizen/items/19f3c2b0f531f8fdb00f

⑵ 会員登録、ログイン
<img width="1421" alt="スクリーンショット 2018-06-01 23.45.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/240803/4b72a98b-a15c-35e2-b2ff-4a9e08e7118a.png">
>詳細はこちら
>https://qiita.com/szaizen/items/ef66de174ec1d91d357d

⑶ ショッピングカート的なもの
<img width="1428" alt="スクリーンショット 2018-06-01 23.46.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/240803/efbc91bd-eebb-1b4f-e4e5-12345eb3650e.png">
>詳細はこちら
>https://qiita.com/szaizen/items/e1689446ade8f824b018









#**作成したカスタムオブジェクト**

|	|オブジェクト名 |API参照名      |説明                  |
|:------|:----------|:-------------|:--------------------|
|1	|ユーザ	    |User__c	   |会員登録した人の情報     |
|2	|セッション    |session__c	   |セッション情報           |
|3	|商品	    |Product2	   |販売している商品の情報    |
|4	|ケース	    |Case	   |お問い合わせされると、ここに入る|
|5	|問い合わせ履歴|CaseHistory__c|ケースとユーザの子オブジェクト|
|6	|ショッピングカート|shoppingcart__c|ユーザと主従関係、商品と参照関係|

#**作成したVisualforceページ**

| 名前 | 説明 |
|:--|:--|
| home | 基本となるトップページ |
| About | サイト説明ページ |
| shop | 商品一覧を表示したページ |
| inquiry | お問い合わせを受付・履歴を表示するページ |
| category | カテゴリーごとに商品一覧を表示するページ。ページにとぶ際に引数を渡してSELECTした結果を表示しているため、ページは１つです。 |
| inquiry | お問い合わせを受付・履歴を表示するページ |
| UserCreate | 会員登録できる。作成すると、ユーザに情報が書き込まれる。 |
| homecss | スタイル調整シート。Bootstrap、fontawasomeも読み込んでいます。 |
| ShoppingcartCheck | カートのお会計進むボタンを押下した時の確認画面 |
| Purchased | 購入後のThanks画面 |

#**作成したVisualforceコンポーネント**

| 名前 | 説明 |
|:--|:--|
| Music_header | ログインしていない状態のヘッダーです。右上にはログインできるモーダルを表示しています。 |
| Login_header | ログインしている状態のヘッダーです。右上には名前とログアウトできるボタンを表示します。 |
| ProductList | 商品オブジェクトから繰り返しカード型で表示 |
| ProductList6 | 商品オブジェクトから最大６件、最終更新日が新しい順で繰り返しカード型で表示（トップ用） |
| Side_header | カテゴリーごとのリストとTwitterのサイドヘッダー |
| metadata | 全ページ共通のメタデータ |
| Music_footer | サイトのフッター。全ページの下に表示する。 |
| homecss | スタイル調整シート。Bootstrap、fontawasomeも読み込んでいます。 |

#**作成したApexクラス**

| 名前 | 説明 |
|:--|:--|
|inquiry |ログインしている場合、Cookieからセッションを取得し、ユーザを検索する。ユーザに紐づいている問い合わせ履歴がある場合、履歴を表示する。また、入力フォームにはあらかじめ名前、Emailなどユーザ情報から入力する。ログインしていない場合、上記のものを表示しないように出し分ける。問い合わせを送信すると、ケースが作成される。紐づくユーザがある場合は問い合わせ履歴が作成される仕様です。|
|LoginController|ログインした時、ユーザ名とパスワードが一致していたらCookie情報にセッション名を書き込み、セッションオブジェクトを更新してログインをする。また、常にCookieからセッション情報を取得し、紐づくセッションオブジェクトがあるかどうかを判断している。ある場合、ヘッダーをログイン済みの方を表示し、ユーザから名前を取得して表示する。 また、ショッピングカート追加・削除、商品購入の動きも記述しています。|


#**Github**
コードはこちらにおいています〜
https://github.com/szaizen/music
宇宙を支配する数式リング

# 「[宇宙を支配する数式リング](http://oulife.net/post-13396)」

阪大の公式グッズに「[宇宙を支配する数式リング](http://oulife.net/post-13396)」なる，素晴らしく厨二病感溢れる指輪がある．
しかし，阪大の生協でしか買えないらしく，買うために大阪行くのはちょっとなぁと思っていた．

やっと[Amazon](https://amzn.to/2sppCve) で発売したと聞き，早速ポチった．

> [「宇宙を支配する数式リング」が売れると][非営利組織である阪大生協の売り上げの一部は阪大に寄付され、それが全学で研究目的にも使用されているから、間接的には科学の発展に関係する](https://twitter.com/hashimotostring/status/1002110230644207616)

ということなので，科学の発展に僅かながら貢献できるのも嬉しい．
僕のように，大阪行きまで迷った人へ．
エル・プサイ・コングルゥ
Google Mockでの単純なテスト

#動機

ユニットテストは大きなシステムの部品の一つ一つを個別にテストすることなのに、大体一つのクラスは他のクラスの参照を持ってたりして、機能の一部は他のクラスに依存している。なので多くの場合純粋な意味での「ユニット」をテストすることは難しい。しかし、MockとDIはそれをある程度可能にしてくれる。この記事ではC++のMockフレームワークの中でも有名なgooglemockの使い方を紹介する。

#考え方

あるクラスTargetがクラスInjectedに対して集約関係、あるいは参照関係があるとする。Targetのある関数が想定通りに作用しないときに、その関数内でInjectedクラスのある関数を利用してたりすると、問題がどちら側のクラスにあるのかを調べるのが難しくなる。なので本物のInjectedの代わりにInjectMockというハリボテを使い、純粋にTargetクラスの関数が正常に作動してるかのみをテストする。

ただし、InjectMockを「使う」と単純にいっても、参照や集約関係があるクラスを簡単にすり替える事などできない。なので以下の方法ですり替える。

1. 依存関係のあるクラスをコンストラクタで外から挿入(Inject）する形にする。
2. クラスInjectedに純粋抽象クラス(IInjected)を与える。
3. その純粋抽象クラスを継承したMockクラスを定義する。

TargetクラスのコンストラクタはIInjectedを取るようにし、テストの中ではInjectedMockを注入する。そしてプロダクション・コードではInjectedを注入する。これによりテスト内ではMockがInjectedの代わりにTargetクラスの内部に侵入できるので、それを利用して様々な事（何回注入されたBのどの関数が、どの順番で、どのような引数を渡されて呼ばれたかなど）をチェックできるようになる。

# std::unique_ptr
このテクニックを用いるには、Targetのコンストラクタが引数としてIInjectedを取るため、多態性を使う必要が出てくる。つまりポインタ・参照渡しが必要となるが、コンストラクト後はTargetがInjectedを所有している形にしたい。この場合はunique_ptrを使い、std::moveでTargetにIInjected注入すると

1. テストとプロダクション・コードで注入するクラスを変える
2. 注入されたクラスはTargetに「所有」される

という二つが同時に達成できる。

#セットアップ

GmockはGtestをダウンロードすると付随してくる、googletest/googlemock/makeフォルダでmakeすればsampleがビルドされるので、あとはsampleファイルを変更するのが早い。

#例

ます、注入されるクラスの抽象クラスの定義とそのクラスへのunique_ptrの別名定義。
仮想デストラクタの定義を忘れるとGmockに怒られる。

```
class IInjected{
public:
    virtual ~IInjected() = default;
    virtual int doSomething(int x) = 0;
};

using InjectedPtr = std::unique_ptr<IInjected>;
```

次にMockを作成。上記クラスを継承し、Gmockの提供するマクロにより仮想関数をすべてラップする。このモックヘッダはgmock付随のPythonスクリプトにより自動生成できる。

```
class InjectedMock : public IInjected{
public:
    InjectedMock(){}
    MOCK_METHOD1(doSomething, int(int));
};
```

以下がテストのターゲットとなるクラスの定義。DIと多態性により純粋抽象クラスを介して依存を注入している。テストではモックを注入し、プロダクションコードでは本物のInjectedを注入する。useInjected関数内でinjectedMockのインスタンスを使っている。unique\_ptrを使って、「注入するが、ポインタの所有権はTargetクラス（の中のstd::unique\_ptrメンバ変数）に渡る事によって、コンストラクト後にはhas a関係が成立する」状態を作る。

```
class Target{
public:
    Target(std::unique_ptr<IInjected> injected):injected_(std::move(injected)){}
    void useInjected(){
        auto y = injected_->doSomething(40);
    }
private:
    std::unique_ptr<IInjected> injected_;
};
```

以下テスト、injectionMockはTargetにmoveしているため、それ以降アクセスすることはできなくなる。以下のテストでは注入されたmockのuseInjectedの関数が40という引数でtarget.doAnything関数内で呼ばれている事を期待し、そのとおりであることをテストしている。

```
TEST(test, test){
    std::unique_ptr<InjectedMock> injectionMock = std::make_unique<InjectedMock>();
    EXPECT_CALL(*injectionMock, useInjected(40)).Times(1);
    auto&& target = Target(std::move(injectionMock));
    target.doAnything();
}
```
ラズベリーパイのPythonでpandasが正常にインストールされない場合

#はじめに(Introduction)

**For English explanation about "missing required dependencies 'numpy'" problem on Raspberry Pi 3 Model B, see "Procedure" item of this article.**


Python3のPandasライブラリをインストールするには、

```
pip install pandas
```

あるいは

```
pip3 install pandas
```

を使用することが多いですが、
ラズベリーパイのPython3環境ではうまくいかないケースがあります。

一見インストールは問題なく完了するように見えますが、
pandasをインポートしたPythonプログラムを実行すると、

```
missing required dependencies 'numpy'
```

と「numpyが必要」との旨のエラーメッセージが表示されます。
しかし、numpyをpipでインストールしても、同様のメッセージが表示され、
pandas,numpyのインストール問題が生じます。

このエラーメッセージのラズベリーパイに関連する解決方法については、
英語・日本語ともに情報が無かったため、書いておきます。

##再現環境
Raspberry Pi 3 Model B
OS:Raspbian GNU/Linux 9
Python3.5(OSプリインストール)

#対処方法
pandasのインストール方法をpipからapt-getに変更します。

##手順(procedure)
1.pipまたはpip3でpandas,numpy,それに依存するライブラリをインストールしてしまった場合はアンインストールする
(Uninstall pandas,numpy,liblaries with dependency on pandas and numpy)

```
pip uninstall pandas
pip uninstall numpy
pip uninstall [library depending on pandas numpy]
```

または(OR)

```
pip3 uninstall pandas
pip3 uninstall numpy
pip3 uninstall [library depending on pandas numpy]
```


2.apt-getを管理者権限で実行しpython-pandasをインストールする
(Install python-pandas via apt-get by root)

```
sudo apt-get install python-pandas
```

または(OR)

```
sudo apt-get install python3-pandas
```

3.pandas,numpyに依存するライブラリを適時インストールする
(Install liblaries with dependency on pandas and numpy)

##補足
この手順を行うと、pandas,numpy以外のライブラリもインストールされるので注意が必要です(matplotlibなど)
pip の更新で泥沼にハマった話

# pip install --upgrade pipの泥沼
こんにちは。
新卒マイナス1年目のエンジニア(来年からエンジニア)の和尚です。

卒業研究のプログラムをgitでcloneして進めようと思った矢先に泥沼にハマったお話です。

開発環境はmac OS上にsent OSを立てて開発をしているのですが、現在帰省中で学校で買ったdynabookで開発しています(同じくsent OS : 環境作ったのは約一年前)。


普段imacで開発してるから画面が小さくてお辛みの極み。。。

### 開発環境
- centOS6
- python 3.6.5
- pyenv 1.1.2

### 想定読者
- エンジニアの卵および雛
- 最後の質問応えてくださる心優しい凄腕エンジニアの方

## pip install --upgrade pip の無限ループ
開発を進めるためパッケージをインストールしようと思ったら以下のエラー文が

```
~
You are using pip version 9.0.3, however version 10.0.1 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
```

エラー文の通りに

```
$ pip install --upgrade pip
```


```
~
You are using pip version 9.0.3, however version 10.0.1 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
```

...同じエラー文!?!?

技術力ひよこレベルの僕には地獄の始まりでした。

## やったこと
### とりあえず同じ症状の人を探す
同じ症状で苦しんでる方の記事を参考にしながら、pipを別のところから引っ張ってきてインストールしようとしたり、pyenvで別バージョンをインストールしてpythonのグローバルバージョンを変更して試してみたり、一時間弱試行錯誤していました。（結果未解決）

その後ベッドでゴロゴロしながらスマホで参考になりそうな記事を探していると、
>[opensslが古いとpythonのいろんなところに問題が出る](https://qiita.com/_akisato/items/4b531aab65de8cd2909a)

という記事を発見。
なんか症状似てるなぁと自分のエラー文をよくよく確認してみると、

```
[SSLERROR:~
```
の文字が。

いやしっかり確認せい！
どうやらopensslが古かったせいでエラーを吐いていたみたいです。

### その後
pipをアップグレードするために、記事に乗っていたpipの改造を試す。
↓
pipのアップグレードが無事完了。
↓
あれopenssl更新すればいいんじゃないかな？と思う。
※参考記事に書いてありましたw
↓

```
$ sudo yum upgrade openssl
```
やり方があっているか不明だが更新はできた。
↓
改造を戻し、`$ pip install <pacage name>`を試みる。
↓
再びsslエラーを吐きはじめる。
↓
わけわかめ。
多分久しぶりに起動したからyum全部更新すれば直るか？(macでpip使えるし)
↓

```
$ sudo yum update
$ exit
$ vagrant reload
$ vagrant ssh
$ pip install ~
```
↓
pipがふつうに使えるようになる(歓喜)。

## 結論
どのタイミングで普通に使えるようになったのかがいまいちよくわからなかったが、泥沼から抜け出すことができました。

どのタイミングで解決できたのかわかる方いたら教えてください。m(_ _)m
SQliteのデータベースの取得、検索等

#データベースから一行だけ取得

~~~
 public boolean onItemLongClick(AdapterView<?> parent, View view, final int position, long id) {

                // DBのデータを取得

                dbAdapter.openDB();         //DBを開く

                Cursor c = dbAdapter.getDB(columns);

                c.moveToPosition(position);     //クリックされたItemに移動

                String transactionday=c.getString(1);       //取得

                String classification=c.getString(2);       //取得

                String pair=c.getString(3);         //取得

                String lot=c.getString(4);          //取得

                c.close();          //cursorを閉じる


~~~