OmniAICreator/Qiita-1.07M huggingface dataset:
RealSense D435 で PointCloud 作って表示する（Python3）

#修正
2018/10/29 19:34
カメラパラメータをプログラムで取得するように変更した。
2018/10/29 19:17
下記プログラム中のカメラに関するパラメータ設定を間違えていたので修正した。
誤：PinholeCameraIntrinsic(1280, 720, 640, 640, 640, 360)
正：PinholeCameraIntrinsic(1280, 720, 925, 925, 640, 360)

#カラー画像
![pc_color.png](https://qiita-image-store.s3.amazonaws.com/0/124209/199ce084-55a1-d5a0-59dd-9c81a86ccc97.png)

#PointCloud表示1
![pc_color_3d.png](https://qiita-image-store.s3.amazonaws.com/0/124209/333e5914-dc4b-5edf-a184-9f79a469dac8.png)

#PointCloud表示2
![pc_color_3d_2.png](https://qiita-image-store.s3.amazonaws.com/0/124209/3ddc1f89-cd8a-eded-295b-3db481c9fe5a.png)

#Pythonソース
```pc_capt_color.py
import pyrealsense2 as rs
import numpy as np
import cv2
from open3d import *

if __name__=="__main__":
    align = rs.align(rs.stream.color)

    config = rs.config()
    config.enable_stream(rs.stream.depth, 1280, 720, rs.format.z16, 6)
    config.enable_stream(rs.stream.color, 1280, 720, rs.format.rgb8, 6)
    pipeline = rs.pipeline()
    profile = pipeline.start(config)

    # get camera intrinsics
    intr = profile.get_stream(rs.stream.color).as_video_stream_profile().get_intrinsics()
    print(intr.width, intr.height, intr.fx, intr.fy, intr.ppx, intr.ppy)
    pinhole_camera_intrinsic = PinholeCameraIntrinsic(intr.width, intr.height, intr.fx, intr.fy, intr.ppx, intr.ppy)

    while True:
        frames = pipeline.wait_for_frames()
        aligned_frames = align.process(frames)

        color_frame = aligned_frames.get_color_frame()
        color_image = np.asanyarray(color_frame.get_data())

        cv2.namedWindow('color image', cv2.WINDOW_AUTOSIZE)
        cv2.imshow('color image', cv2.cvtColor(color_image, cv2.COLOR_RGB2BGR))

        if cv2.waitKey(1) != -1:
            print('finish')
            break

    depth_frame = aligned_frames.get_depth_frame()
    depth = Image(np.asanyarray(depth_frame.get_data()))
    color = Image(color_image)

    rgbd = create_rgbd_image_from_color_and_depth(color, depth, convert_rgb_to_intensity = False);
    pcd = create_point_cloud_from_rgbd_image(rgbd, pinhole_camera_intrinsic)                                                   
    pcd.transform([[1,0,0,0],[0,-1,0,0],[0,0,-1,0],[0,0,0,1]])

    pipeline.stop()
    write_point_cloud('./pc_color.pcd', pcd)
    draw_geometries([pcd])
```

まずはD435からのカラー画像をOpenCVで表示し続ける。
何かキーを押すとその時点でのカラー画像と深度画像からPointCloudを作り、pc_color.pcdファイルとして保存してからOpen3Dを使って表示する。（マウスで拡大縮小や視線変更可能）
Open3Dウィンドウの終了ボタンを押すと終了。

#実行
```.sh
$ python pc_capt_color.py
```

#保存されたpc_color.pcdをOpen3Dで表示
```pc_disp_color.py
from open3d import *

if __name__=="__main__":
    pcd = read_point_cloud('./pc_color.pcd')
    draw_geometries([pcd])
```
大人数での開発でのプロジェクトマネージメントについて

大人数で開発をするにあたってPMとしていくつかの学びと工夫があったのでROMっておきます。
管理人数が多すぎるとここの基礎知識力と運用力を育てる事とアウトプットの品質管理がものすごく大変です。
タスク粒度の統一化と事前調査の品質を高める事、個人のアウトプットの品質をレビュワーが確認しやすくするという事でQAからの手戻りを減らしコミュニケーションの負担を軽くするというのが目的です。
ポイントはチケット運用とGithubの運用に集約します。

##ツール
  ・JIRA/Backlogなど
  ・Github

##運用
### チケットの運用はテンプレ化が基本
プロジェクトマネージャは親チケットを切り、サブラタスク分割をして小チケットを切ります。
エンジニアは要件と作業の内容を詰めるためにエンジニア自身でチケット内容を埋めていく事がベスト・プラクティスです。
無駄な仕様書を書かない開発においてはチケットの記載内容が全てになるのでシーケンス図やAPIのINPUT/OUTPUTも事前に細かく定義しておきます。
今回はRailsを利用した例をあげます。
あとでgitのプルリクにTODOと

```
# 要件
  このチケットで何を実現したいのかを明確にします。
  例: 顧客管理CMSの〇〇の機能を追加

# 対応内容
  実際に発生するタスクを箇条書きにします。
　例: 1. モデルの作成
　例: 2. コントローラーの作成
　例: 3. 設定項目をyml化

# 仕様
  例: 
  - ER図 (画像やファイルへのリンク)
  - シーケンス図 (画像やファイルへのリンク)

# テスト要件
  テストコードを記載するための定義をします。

# 影響のでるスコープ
  コードを洗いざらい調査して今回の修正にたいする影響範囲を記載します。
  例: 顧客管理CMSの〇〇画面: http://sss/hohoge
  例: 顧客管理CMSの〇〇画面: http://sss/hohoge
  
```

### Githubの運用については2種類あります。
RM(リポジトリマスターという)役職を設定してすべてのブランチの管理とコードレビューやマージ、デプロイまでを管理します。
ずっとこのRMをオフショアでやっていたのですが前提としてRAILSの知識が豊富でないエンジニアやGITに慣れていない人を入れるとコンフリクトが発生しまくってレビューを突き返して終わるのでRAILSのアーキテクチャ理解がある、またはなくても調べられるという前提で進めるのが望ましいです。
レビューについてはRMの負担が大きくなるのでピアレビューなどで事前にある程度潰しておく事が前提です。

#### A.プロダクトごとの運用

```
　　master > develop > productname_base
                            └　TicketNO
　                            └TicketNO
　                            └TicketNO
```

1) masterからdevelopブランチの作成
2) developブランチからproductname_baseブランチの作成
3) productname_baseからチケットごとの機能ブランチの作成
4) プロダクト開発中はbaseブランチを常にPULLしてきてチケットブランチに反映します
5) Ticketを消化したところでbaseブランチにマージ
6) baseブランチをデプロイしてQA機能ごとにQAをしていきます

#### B.マイルストーンごとの運用
マイルストーンに機能を詰め込み過ぎない事がポイントで
主にバグ修正や簡易な修正などの保守開発に利用したほうがいいパターンです。

```
　　master > develop > v1.2_base
                     └　TicketNO
                     └　TicketNO
                     └　TicketNO
```

1) masterからdevelopブランチの作成
2) developブランチからv1.2_baseブランチの作成
3) v1.2_baseからチケットごとの機能ブランチの作成
4) プロダクト開発中はbaseブランチを常にPULLしてきてチケットブランチに反映します
5) Ticketを消化したところでbaseブランチにマージ
6) baseブランチをデプロイしてQA機能ごとにQAをしていきます

#### C.プルリクエスト
チケットに記載の内容についてプルリクに記載してレビュワーとQAの人が何をしたかわかるようにしましょう。

ユニットテスト方法(rspecの実行コマンドと結果などもきちんと書く)
エビデンスも残すというようにしていくと手元での品質を最大限に上げて行くことができます。

実際、上記のチケットを元に下記のプルリクを作成してもらいます。
InputとOutputの整合性が取れているのでレビューがしやすくなります。

```
## Original Ticket
https://app.asana.com/0/1135737104421279/1135753753843125

## 要件
- [ ] 1. モデルの作成
- [ ] 2. コントローラーの作成
- [ ] 3. 設定項目をyml化

## 対応内容
- [ ] 1. AaaModel,BbbModelを作成しアソシエーションの設定をしました
- [ ] 2. XXXコントローラーの作成、CCCヘルパーの追加と、Concernの追加
- [ ] 3. 表示項目AAをyml化

## テスト方法
- [ ] 1. 作成したModelのテスト結果
- [ ] 2. 画面のフィーチャーテストの結果

## テストエビデンス
スクリーンショット/APIレスポンスなど

## コメント
上記の対応方法で問題ないかご確認お願いします。

## 影響範囲
http://hoooogeg/page/index
http://hoooogeg/page/confirm
```


![screencapture-github-camenergydatalab-EnergyDataSimulationChallenge-pull-79-2018-10-28-00_32_15.png](https://qiita-image-store.s3.amazonaws.com/0/89997/74a8c105-220a-9ce3-628f-41c6499e466e.png)
ESLint v5.8.0

前 [v5.7.0] | 次 [v5.9.0]

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">ESLint v5.8.0 released:<a href="https://t.co/xJQtySuzeP">https://t.co/xJQtySuzeP</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/1055858361080528896?ref_src=twsrc%5Etfw">October 26, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint 5.8.0 がリリースされました。
小さな機能追加とバグ修正が行われました。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

## [#11010]: `Linter.version` property

`Linter`コンストラクタに`version`プロパティが追加されました。ESLint のバージョン文字列 (例: `"5.8.0"`) を保持します。

従来は `Linter` からバージョン情報を取得するには `new Linter().version` のようにインスタンスを作る必要がありましたが、バージョンはインスタンスに依らず共通なので、コンストラクタのプロパティに移動されました (従来の方法も引き続き利用できます)。

# 💡 新しいルール

特になし。

# 🔧 オプションが追加されたルール

特になし。

# ✒️ `eslint --fix` をサポートしたルール

特になし。

# ⚠️ 非推奨になったルール

特になし。

[v5.7.0]: http://qiita.com/mysticatea/items/dd3b6464a01d542d00ac
[v5.9.0]: http://qiita.com/mysticatea/items/3d8ef632205d6c51058c
[#9999]: https://github.com/eslint/eslint/issues/9999
[#11010]: https://github.com/eslint/eslint/issues/11010
[xxxx]: http://eslint.org/docs/rules/xxxx

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
私的Ruby on Railsメモ

# バリデーションエラーの追加
validation error
## エラーの表示方法
```ruby:MODELNAME.html.erb
<% if @MODELNAME.errors.any? %>

# 日本語
<h2><%= @MODELNAME.errors.count %>件のエラーがあります。</h2>

# 英語
<p>There are <%= pluralize(@MODELNAME.errors.count, "error") %></p>

<% end %>
```

### pluralizeって何？
第一引数に指定されている整数値のによって、第二引数に指定されている英単語を単数形or複数形に変換してくれるモノ

railsのドキュメントにはこれ（以下参照）しか書いてなく、検索コストがかかったのでメモ
http://railsdoc.com/references/pluralize
Python: defaultdictで辞書を使った数え上げをシンプルに

# 概要
defaultdictを使うと、キーが存在しなかった時のデフォルト値を設定できる。


# サンプル

```
>>> from collections import defaultdict
>>> d = defaultdict(int)
>>> d['key1']
0
>>> d['key2'] += 1
1
```

要素を数えていくような場合に便利。

```
>>> from collections import defaultdict
>>> fruits = ['apple', 'banana', 'orange', 'banana', 'apple']
>>> for fruit in fruits:
...     d[fruit] += 1
>>> for k, v in d.items():
...     print(k, v)
...
apple 2
banana 2
orange 1
```

# 備考

* defaultdictは、dictにあるメソッドは使える
* パフォーマンスに問題があるようなので（未検証）、大量のデータを扱う際は気をつける


# ドキュメント
* https://docs.python.jp/3/library/collections.html#collections.defaultdict
PHP 参照渡しまとめ

# はじめに
PHPには参照渡しという変数を共有する方法があります。
よく間違えやすい値渡しとの違いやデータ型ごとの参照渡しについて紹介していきます。

# 参照渡しとは

### 基本
PHPでは、「&」をつけることで参照渡しができます。

```php
# 下記はどちらも同じ挙動になります
$result =& $value;
$result = &$value;
```

# 参照渡しと値渡しの違い
「値渡し」とは、変数に代入した値の"コピー"を渡します。 

```php
$value = 1;
$result = $value; // 1をコピーして代入
```

「参照渡し」とは、変数に代入した値の”参照先”を渡します。

```php
$value = 1;
$result =& $value; // 値の入れ物を参照先として代入
```

参照渡しは、変数のコピーではなく変数のシンボルテーブル上の位置を渡してエイリアスのようにしているようです。すなわち、元の変数が書き換わってしまうようです。

[リファレンス](https://www.php.net/manual/ja/language.references.whatare.php)より
>最も良く似ているのは、Unix のファイル名とファイルの 関係です。この場合、変数名はディレクトリエントリ、変数の内容は ファイル自体に対応します。リファレンスは、Unix ファイルシステムの ハードリンクのようなもの

# サンプル
### 変数
**値渡し**
変数bに代入した後に変数aの値を変えても変数bは変わりありません。

```php
$a = 2;
$b = $a;  // 変数aを代入
$a = 10;  // 変数aの値を変更
echo $b;

# 結果
2
```
  
  
**参照渡し**
変数bに代入した後に変数aの値を変えたところ、変数bの値も変わります。

```php
$a = 2;
$b =& $a;  // 変数aを&をつけて代入
$a = 10;    // 変数aの値を変更
echo $b;

# 結果
10
```


### 配列
変数と同様な挙動になります。

**値渡し**

```php
$a = array(1, 2, 3);
$b = $a;                  // 配列を代入
$a[1] = 0;                // 配列aを変更
var_dump($b);

# 結果
array(3) {
  [0] => int(1)
  [1] => int(2)  // $b[1]の値は2のまま
  [2] => int(3)
}
```

**参照渡し**

```php
$a = array(1, 2, 3);
$b =& $a;                // 配列を&をつけて代入
$a[1] = 0;               // 配列aを変更
var_dump($b);

# 結果
array(3) {
  [0] => int(1)
  [1] => int(0)  // $b[1]の値が0に変わっている
  [2] => int(3)
}
```

### オブジェクト
オブジェクトは元々参照型なので、「&」をつけなくても参照されます。
参照させたくない場合は、「clone」を使います。実際に見てみましょう。

**参照渡し**

```php
$a = new stdClass();
$a->property = 1;
$b = $a;　             // オブジェクトを代入
$a->property = 3;    // オブジェクトaを変更

var_dump($b);

# 結果
stdClass Object
(
    [property] => 3
)
```

**値渡し**

```php
$a = new stdClass();
$a->property = 1;
$b = clone $a;　      // cloneをつけて代入
$a->property = 3;    // オブジェクトaを変更

var_dump($b);

# 結果
stdClass Object
(
    [property] => 1
)
```

clone（複製）されることによって、別々のオブジェクトになります。
PHPでは、オブジェクトは参照されますので注意が必要です。

### 参照渡しを関数で使うことも
参照渡しは関数の引数として使用されることもありますので確認しておきましょう。

**値渡し**

```php
function add ($number) {
	return ++$number;
}

$a = 1;
$b = add($a);

echo $a;
echo $b;

# 結果
1 // $a
2 // $b
```


**参照渡し**

```php
function add (&$number) {    // 「&」を引数につける
	return ++$number;
}

$a = 1;
$b = add($a);

echo $a;
echo $b;

# 結果
2 // $a
2 // $b
```

### まとめ
ある変数を別の変数に代入しても、参照しているだけならコピーしない。値の編集が発生する際に初めてコピーを行う。という使い分けができると無駄なメモリコピーを減らすことができます(Copy on Write)。
ぜひ、参考にしてみてください。
[書籍感想]Game Programming Patternsを読んだ個人的な感想

書籍名 : [Game Programming Patterns ソフトウェア開発の問題解決メニュー](https://www.amazon.co.jp/Programming-Patterns-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E3%81%AE%E5%95%8F%E9%A1%8C%E8%A7%A3%E6%B1%BA%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC-impress-gear%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-ebook/dp/B015R0M8W0/ref=la_B00P5ZXZ8Y_1_1?s=books&ie=UTF8&qid=1540644001&sr=1-1)
作者 : Robert Nystrom
分野 : デザインパターン、書き方、ソフトウェア開発
注意 : 韓国発売版を読んだので、日本発売版と違いがある可能性あり

## はじめに
どうすればコードを実用的に書けるか悩んだ際に選んでみた本でした。特に自分がゲーム好きなのでタイトルだけで選んだと言っても過言ではない。
内容も面白く、デザインパターンの説明の例がゲーム作りです。制限的に見えますが普通にいろんな場面でも考えらる状況があります。

## 書籍の概要
最初はデザインパターンの説明ではなく、作者が考えているソフトウェア構造の説明で始まります。いい構造と悪い構造、それを直す方法と、またそれがどれだけ難しいことかはっきり説明してくれます。
導入部なので10ｐほどですが、入門ばかりの私には本一冊以上の価値がありました。
その次にGofデザインパターンにある様々なパターンの基本と応用が待っています。
パターンの説明には **意図**、**同期**、**パターン**、**いつ使うか**、**注意すること**、**コードの例**等が書かれており、理解に非常に役に立ちました。
例のコードはC++で書いています。

## パターンを使えるのが重要じゃない
Androidエンジニアですが実際、今関わっているプロジェクトでも普通に使えました。
でも書けるのが重要じゃなく**なぜこのような形のパターンになったのか**を理解するのが重要だと、本を読んでる際に気付きました。
最初この本を選んだ理由もコードの書き方に集中したためですが、根本的にデザインパターンの理解をしなきゃいけなかった。
作者はそれをちゃんと説明した上、パターンの書き方を見せてくれます。

## パターンの本なのにパターンが万能ではないのを説明している
パターンを通じて管理しやすい構造やいい性能が予測される例を見せつつ、同時に、導入部でも書かれていますが、既存のコードの変更、また「奇麗な構造」の維持にかかる費用があまりにも高く、プログラマが「パターンなんていらないやー」と言いそうな理由を所々説明しています。
パターンの説明の本であり、実際ゲーム開発場面で使いそうな例を挙げていますが、そのパターンについての考察とパターンが起こす新たな問題についてページをもっと使っています。

## 書き方じゃなく、ソフトウェア工学の本
パターンの説明が目的の本ですが、エンジニアが持つべき考え方を説明しています。
性能と最適化はエンジニアがいつも悩んでる宿題。
デザインパターンの例を見ながら問題を知り、原因を見つけ解決方法を探り、それが「本当にいい解決方法なのか？」のを悩む。
素人の私には本当にいいイメージトレーニングになりました。

## 最後に
ちょうどソフトウェアエンジニアになった方におすすめします。
書き方中心ではないと書きましたが、例と説明がちゃんとできているので、デザインパターンの勉強をしようと思っている方にもおすすめ。
私も適切な場面ではちゃんと使えるように頑張ります。
React.memoでrecomposeのpureが要らなくなった話

先日React v16.6.0がリリースされました。
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

リリースされた機能の中に`React.memo`というものがあるのですがこれでrecomposeのpureが要らなくなりそうだという話です。

## recompose.pureとは
Reactでは再レンダリングを繰り返すとパフォーマンスが落ちるわけですが、多くの場合は`shouldComponentUpdate`を実装して、propsが同じ場合は再レンダリングをしないよといった具合でパフォーマンスの向上をはかります。
React v15.3からトップレベルAPIで`PureComponent`というものが追加されました。これは`shouldComponentUpdate`をデフォルト実装したComponentで、propsをshallow equalしてパフォーマンス向上の実装を楽にしてくれます。

```js
import React, { PureComponent } from 'react'

class Pure extends PureComponent {
  render() {
    return (
      <p>pure component</p>
    )
  }
}
```


これをHOCで実装できるようにしたのが、[HOC](https://reactjs.org/docs/higher-order-components.html)によってライフサイクルメソッドを追加できるようにするライブラリの`recompose`です。これの`pure`メソッドを利用することでSFCなどでも楽に実装することができます。
https://github.com/acdlite/recompose


```js
import React from 'react'
import { pure } from 'recompose'

const Pure = pure(() => (
  <p>pure component</p>
))
```

## React.memoとは
ここで出てくるのが、v16.6で追加された`React.memo`です。これは`PureComponent`や`shouldComponentUpdate`の実装を関数コンポーネントでもラップするだけで出来るようにしたものです。
propsが変わった場合のみ再レンダリングされます。

```js
import React from 'react'

const Pure = React.memo(() => (
  <p>pure component</p>
))
```


Reactは今後どんどんSFCになっていきますね。
【初心者でも分かる！】JavaScriptの関数とスコープの基礎

# スコープとは
- 関数や変数などの参照できる範囲
- 基本的には関数の内側（スコープ内）で作成した変数は外側（スコープ外）では参照できない

## 基本的なスコープ(変数)
- 関数fnA、Bを定義し、変数xを新規作成する。
- console.logで変数xをコンソールに表示する。fnA、Bをそれぞれ実行する。

```js

function fnA() {
  let x = 2;
  console.log(x)// 2
}
fnA()

function fnB() {
  let x = 3;
  console.log(x)// 3
}
fn(B)

console.log(x) //ReferenceError: x is not defined
```

すると、スコープの対象は範囲が一目瞭然ですね。
fn()関数だけ実行できます。

## 基本的なスコープ（関数）
- fn(関数)に仮引数xを定義、ｘをコンソールに表示する。

```js
function fn(){
  console.log(x);// 4
}
fn(4);

console.log(x)// ReferenceError: arg is not defined
```
こちらもfn()関数の外では仮引数xを参照できません。

## letを用いた変数作成について
上記2つのコードはいずれも「let x = 数字」で再代入しています。
同じスコープ内で再代入をするとエラーとなりますが、異なるスコープ内では再定義可能です。
以下は例です。

```js
function fnA(){
  let x = 5;
  let x = 6; //SyntaxError
  console.log(x);
}
fnA();//SyntaxError: Identifier 'x' has already been declared
```

```js

function fnB(){
  let x = 7;
  console.log(x)
}
fnB();// 7

function fnC(){
  let x = 8;
  console.log(x)
}
fnC();//8
````

# グローバルスコープについて
名前の通りもっとも外側にあるスコープです。

```js
const global = 9;
{
  console.log(global);//9
}
function fn(){
  console.log(global);//9
}
fn();
```
グローバル変数はあらゆるスコープから参照できる変数なので、いずれも９と表示されます。
Python3からPostgreDBに接続する方法

個人作業用にメモしてます。


Python3からPostgresqlを実行する方法

```
#接続用ライブラリ
import psycopg2

#PostgreDBに接続
conn = psycopg2.connect("host=[ホスト名] port=[ポート番号] dbname=【データベース名】 user=【ユーザー名】 password=【パスワード】")

#SQLを実行
cur = conn.curcur
cur.execute("【SQL文】")
```

DB接続設定を発行する方法を改良

```
##############################
#    Connection Settings     #
##############################
host     = "【ホスト名】"
port     = "【ポート番号】"
dbname   = "【データベース名】"
user     = "【ユーザー名】"
password = "【パスワード】"
                        
##############################
#    Connection Exe          #
##############################
conn = psycopg2.connect("host={h} port={p} dbname={db} user={u} password={pa}"\
   .format(h=host,p=port,db=dbname,u=user,pa=password))
```
dockerでPostgreSQLのコンテナ作成と初期化

Dockerと公式のPostgreSQLの公式イメージを用いてコンテナを作成した時にハマったのでメモ。
環境： Ubuntu 18.04.1 LTS

## やりたいこと

- コンテナ作成時にSQLを実行してテーブルを作成したい
- USERとDBも指定したい
- データの永続化をしたい

## docker-compose.yml

結果的に以下のようになった。
VolumeはDocker上に作成した領域をマウントしている。

```docker-compose.yml
version: "3"
services:
  appdb:
    image: postgres:10
    container_name: "appdb"
    environment:
      - POSTGRES_USER
      - POSTGRES_PASSWORD
      - POSTGRES_DB
    ports:
      - "15432:5432"
    volumes:
      - database:/var/lib/postgresql/data
      - ./initdb:/docker-entrypoint-initdb.d

volumes:
  database:
    driver: local
```

### environmentについて
ユーザ情報については環境変数で定義すると良い。
`docker-compose`で使う変数は`.env`ファイルに記入する。

```
$ cat .env 
POSTGRES_USER=test01
POSTGRES_PASSWORD=test01
POSTGRES_DB=test01
```

## 初期化SQL

公式イメージの初期化機能を使う。
`/docker-entrypoint-initdb.d`に置かれた.sql/.shファイルが1度だけ実行される。

したがって`./initdb`などのディレクトリを作ってそこにsqlファイルを置いてvolumeにマウントする。
ファイル名の先頭に連番をつけると順番に実行されるらしい。

```setup.sql
create table users
(
    user_id text UNIQUE,
    password text,
    insert_date timestamp with time zone,
    update_date timestamp with time zone
);
```

## 実行結果

docker-composeで起動する。

```
$ sudo docker-compose up -d
Creating volume "publicapp_database" with local driver
Creating appdb ... 
Creating appdb ... done
```

execで入って中身を見る。

```
$ sudo docker exec -it appdb /bin/bash
# root@f1d78bb0b87e:/# psql -U test01
psql (10.5 (Debian 10.5-2.pgdg90+1))
Type "help" for help.

test01=# \dt
         List of relations
 Schema |   Name   | Type  | Owner  
--------+----------+-------+--------
 public | users    | table | test01
(1 rows)

```

とりあえず期待通り動いているようだ。

## 外部からの接続

ホストOS側から接続する時は、`docker-compose.yml`で書いたポートの指定が必要。

```
psql -h localhost -p 15432 -U test01
```

別コンテナから接続する時は、コンテナ名のみ指定する。

```
psql -h appdb -U test01
```

※`links`が書いてある`docker-compose.yml`を見かけるが`version`が2以上の場合、自動的にリンクが貼られるので不要とのこと（[docker-compose depends_onとlinksの違い](https://qiita.com/sivertigo/items/9baa73d922a68788402b)）。
p5.jsで３Dに良い感じにキャプションを入れる

## 3D表現に良い感じに文字列を入れたい

p5.jsを使ってオブジェクトや空間にキャプションを入れるとこうなってしまいます
![zgtru-gai1i.gif](https://qiita-image-store.s3.amazonaws.com/0/22001/aad2b47e-3688-3745-ecdc-6f9ed92232ce.gif)

オブジェクトの回転に合わせてくるくる回ってしまいます

## 結果

で試行錯誤の結果がこちら
![ooshy-n8p9u.gif](https://qiita-image-store.s3.amazonaws.com/0/22001/daba0521-1f9c-972d-48ed-0c55c8be3eb8.gif)

## 理論

オブジェクトに加えた回転/拡大などの操作を順序スタックに保存しておいて
文字列を描画する際に逆の変換を加えています
詳細はデモの欄のリンクからソースを参照してください

直接　描画中の行列(model matrixというらしい)を取得できれば
もっと簡単にできそうなのですが
現在のところブラウザには実装されていないそうです

https://github.com/processing/p5.js/issues/1873#issuecomment-290992218


## 課題
文字の大きさを揃えたかったのですが
ちょっとわかりません・・・

## 参考
http://d.hatena.ne.jp/kougaku-navi/20151229/p1

## デモ
[太陽系](https://editor.p5js.org/wittyfool/sketches/rkwi-3Z2X)
[立方体の頂点](https://editor.p5js.org/wittyfool/sketches/SJslFgfnm)
C++で単振り子の数値シミュレーション

# はじめに
記述言語はC++となっていますが、C++らしい書き方はしていないため、ほぼC言語となっています。よってC++自体の勉強をしたい方などにはあまり良い内容とは言えませんので、あらかじめご了承ください。[C++らしい書き方はこちら](https://qiita.com/shohirose/items/3764d2bf91656b2e7aaa#_reference-37b3688ff9af3c9a8652)に書き直してくださった方がいますので、比較してみるとよろしいかと思います。

物理シミュレーション自体について投稿したものがありますので、こちらから読んでいただいたほうが良いかもしれません。
https://qiita.com/ysuzuki19/items/ec98c5667ecd5fafa8b1

こちらではオイラー法という手法でプログラムを作成してみました。

コメントで頂いたのですが、細かいところで厳密ではないとのことですので、「取り敢えず何か動かしたい」という初心者の方は試してもらうと良いかと思いますが、「ガッツリ数値シミュレーションを勉強したい」という方には向いていないと思います。

# 実行環境
ubuntu18.04LTS

# シミュレーションする対象について
単振り子（ふつうの振り子）を対象として、摩擦を考慮するものとします。

単振り子の式については「単振り子　運動方程式」などと調べれば出てくるのと少し煩雑になってしまいますので割愛させていただきます。

# オイラー法
一言で言うと、「微分方程式を用いた数値解析の手法」です。

イメージとしては、「現在の状況と次の状況を比較する」ことが大切だと感じます。

# プログラムの作成と実行

```c++:single_pendulum.cpp
#include <iostream>
#include <fstream>
#include <cmath>
using namespace std;
constexpr double THETA_START = 12.0;
constexpr double START_TIME = 0.00;
constexpr double DT = 0.01;
constexpr double END_TIME = 100.00;
constexpr double G = 9.8;
constexpr double L = 10.0;
constexpr double M = 2.0;
constexpr double MU = 0.01;

main(){
  // 時間の刻み幅の逆数を格納する変数
  const int reciprocal_dt = round(1/DT);
  //データ数を格納する変数
  const int data_num = (END_TIME-START_TIME)*reciprocal_dt+1;
  //プロット数をカウントする変数,number of plot 
  int plot_num = 0;
  //時間を格納する配列.array of time
  double *time;
  time = new double[data_num+1];
  //角度θを格納する配列,array of degree
  double *theta;
  theta = new double[data_num+1];
  //角度θの微分を格納する配列,array of degree/secont
  double *theta_dot;
  theta_dot = new double[data_num+1];
  double theta_dot_dot = 0.0;

  theta[0] = THETA_START;
  theta_dot[0] = 0.0;
  for(double t=START_TIME; t<END_TIME+DT; t+=DT){
    time[plot_num] = t;
    theta_dot_dot = - G/L*sin(theta[plot_num]/2.0/M_PI) - MU*theta_dot[plot_num];
    theta_dot[plot_num+1] = theta_dot[plot_num] + theta_dot_dot*DT;
    theta[plot_num+1] = theta[plot_num] + theta_dot[plot_num+1]*DT;
    plot_num ++ ; 
  }//単振り子の方程式

  ofstream fout("single_pendulum.txt");
  for(int i=0; i<plot_num; i++){
    fout << time[i] << ", " << theta[i] << endl;  
  }//出力
  fout.close();
}
```
実行結果はプロット数が多かったのでグラフとして掲載します。

    $ gnuplot

    gnuplot> plot "single_pendulum.txt"

![image.png](https://qiita-image-store.s3.amazonaws.com/0/282145/b00b2db9-b869-1cdd-5715-cb6de772859c.png)


このプロットから、振動がだんだん減衰していることがわかります。
何が何でもブラウザからHerokuを動かしたいンゴオオオオって人の為の記事

#そもそもHerokuって何やねん
自分でもよくわかんないけど無料のWEBサーバ的な（雑）
詳しくはここ
[Heroku初心者がHello, Herokuをしてみる
](https://qiita.com/Arashi/items/b2f2e01259238235e187)（めっちゃ助かりました）
##どうしてもブラウザからやりたい！
普通はコマンドラインツール入れる。
でもブラウザからやりたい人もまあいると思うのでゴリ押しでやりたいと思う。
gitやherokuのコマンドラインの操作方法は上の記事にすべて投げます。
##結論「Paizacloudを使おう！」
###Paizacloudって何よ
[Paizacloud](https://paiza.cloud/)は一日だけ無料でサーバー的な環境をブラウザから操作できるサイト
1. まず[herokuの公式サイト](https://jp.heroku.com/)にアクセス
2. Herokuのアカウント作成！
3. [Paizacloud](https://paiza.cloud/)に登録してサーバー作ってアプリ作る
4. [上の記事](https://qiita.com/Arashi/items/b2f2e01259238235e187#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E8%AA%8D%E8%A8%BC)様の「アカウント認証」からの手順を「ターミナル」ってとこ開いてコピペで実行！
5. 多分Hello, Heroku!!!って表示されると思います！
##デメリット
###一日しか使えない
**Paizacloudは一日しか無料で使えない**
うん普通にインストールしたほうが良い
#最後に
初投稿です。
かなり雑になりましたが今の自分にできることはこれだけ...
情報ください！お願いします！
ブラウザでやらせてください！
スマートフォンアプリ制作 ~React Native with Expo~ 環境構築

# はじめに
ReactNativeでスマートフォンアプリを開発してみて色々感じたことやハマったことが沢山あったので、共有してみたいと思い記事を作成しました。
当方はアプリ開発やJavaSctiptに関しては初心者の部類に入るかと思いますので、ご了承のほどをよろしくお願いします。
また、プロジェクトの作成から実際のリリースまでの過程をご紹介させて頂きます。

注意
React Native 関連の技術は頻繁に更新されていますので、参考にならない部分もあります。

# 環境構築

+ mac
+ npm (v6.4.1)
+ nvm (v0.33.8)
+ node (v8.12.0)
+ expo (v2.2.4)

## nvmの導入
ReactNativeはnpmで各種ライブラリを管理します。
バージョンごとに管理したいので nvm を導入することをお勧めします。

> 引用元: [nvm](https://github.com/creationix/nvm "nvm")

```bash
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
```

HOME/.nvm にパスを通します
お使いのシェルのプロファイルに以下を追加します

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```

```bash
nvm --version
0.33.8
```

これでnvmが利用可能になりました。

## npmの導入
nvmにて安定したバージョンをインストールします

```bash
nvm install --lts
......
#Now using node v8.12.0 (npm v6.4.1)
```

一覧表示

```bash
nvm ls
->      v8.12.0
         system
```

シェルが再起動するとsystemに戻るためエイリアスを指定して切り替えるのがオススメです。

```bash
nvm alias react-native v8.12.0
nvm use react-native
#Now using node v8.12.0 (npm v6.4.1)
```

## Expo の導入
> 公式ドキュメント: [expo](https://expo.io/learn "expo")

Expo とは環境構築を自動で行い、ストアに出すまでの工数を大幅に省略してくれるフレームワークです。手元の実機テストも簡単に行えます。XCodeを触りたくない人向け。
デメリットはネイティブ(通知, Wifiモジュールなど)関連の操作がExpoが提供しているAPIに限定されること。アプリの種類によっては相入れない場合があるので、Expoのドキュメントを確認してからの選択をおすすめします。

npmからインストール

```bash
npm install expo-cli --global
# + expo-cli@2.2.4
expo --version
# 2.2.4
```

プロジェクトを作成したいディレクトリで init します
blankかtabsを選択します。最初はblankで。

```bash
expo init your-project-name
# ? Choose a template: 
 ❯ blank
#   The Blank project template includes the minimum dependencies to run and an empty root component. 
   tabs
#   The Tab Navigation project template includes several example screens.
```

init が終了後、プロジェクト名のディレクトリが生成されています。
移動して起動します。

```bash
cd your-project-name
expo start
```

QRコードが表示されれば起動成功です。
キーボードの i キーでiOSシミュレータが立ち上がり、初期画面が表示されます。
内容は App.js から読み込まれます。

環境構築はここまでです。色々試してみてください。
have a happy coding!
Python Remote Debug

PythonでRemote Debugをする手順を記す。

https://wiki.python.org/moin/PythonDebuggingTools に様々な、Pythonのデバッグツールがあるが、軟弱者なのでGUIで使える、Visual Studio Codeを利用する。

Notes:
有名なIDEとして**PyCharm**もあるが、残念ながら、Remote debug機能は有料版のみのサポートで、無料であるCommunity Editionでは、 サポートされていない。
https://www.jetbrains.com/help/pycharm/remote-debugging-with-product.html


リモート、ローカルの定義から。

* リモートマシン ： デバッグされるpythonプログラムを実行するマシン。
* ローカルマシン : リモートマシンで動作するpythonプログラムをデバッグするマシン


デバッグ対象となるpythonスクリプト

```py:hello.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

def main():
    msg = "hello world"
    print(msg)

if __name__ == '__main__':
    main()
```




# リモートマシンでの作業

## ptvsdのインストール

```shell_session
% pip install ptvsd

$ pip list | grep ptvsd
ptvsd        4.1.4
```



## デバッグ対象Pythonスクリプトの実行

デバッグ対象Pythonスクリプトを、外部からのアタッチを可能にするには、Pythonスクリプトを**修正する方法**と**修正しない方法**の2種類がある。



## Option 1: Pythonスクリプトを修正する方法

以下を追加する。

```py
import ptvsd
ptvsd.enable_attach()
ptvsd.wait_for_attach()
```

修正したPythonスクリプト

```py:hello.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

def main():

    import ptvsd
    ## リモートマシンからの接続を許可する。 デフォルトでは、0.0.0.0:5678にbind
    ptvsd.enable_attach()
    ## デバッガの接続を待つ。
    ptvsd.wait_for_attach()

    msg = "hello world"
    print(msg)

if __name__ == '__main__':
    main()
```

修正したPythonスクリプトを通常に実行

```shell-session
$ python hello.py
```

起動後、`ptvsd.wait_for_attach()`まで実行し、デバッガからの接続を待つ。
デバッガからの接続をまたなくても良い場合は、`ptvsd.wait_for_attach()`は不要。


## Option 2: Pythonスクリプトを修正しない方法

Pythonスクリプトの実行

```shell_session
$ python -m ptvsd --host 0.0.0.0 --port 5678 --wait -m hello
```

`--wait`は、 `ptvsd.wait_for_attach()`と同じ。




# ローカルマシンでの作業

## ptvsdのインストール
```shell-session
$ pip install ptvsd


$ pip list | grep ptvsd
ptvsd        4.1.4
```


## Visual Studio Codeのインストール
https://code.visualstudio.com/ からVisual Studio Codeをインストール

## Visual Studio Codeでのデバッグ開始

Option 1: Pythonスクリプトを修正する方法 を採用した場合、修正したPythonスクリプトをローカルマシンに置いておくこと。

Visual Studio Codeを起動し、

1. File - Open で、hello.pyがあるディレクトリを開く。
2. View - Debug で、Debug Viewを開く。
3. Debug - Open Configurations で、launch.jsonを表示。
4. launch.json の Python: Attach セクションを次のように修正する。 hostには、リモートマシンのIPアドレスを指定。
5. Debug configurationsからPython attachを選択して、Debug開始。

```json
        {
            "name": "Python: Attach",
            "type": "python",
            "request": "attach",
            "port": 5678,
            "host": "192.168.56.2",            
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}", 
                    "remoteRoot": "."
                }
            ],
        },
```


launch.json編集中、及び、Debug configurationsからPython attachを選択中画面
<img width="578" alt="ptvsd.png" src="https://qiita-image-store.s3.amazonaws.com/0/22885/d2eef960-3e31-a39a-0749-c55a929c52b3.png">



デバッグ実行中の画面
<img width="578" alt="ptvsd-debugging.png" src="https://qiita-image-store.s3.amazonaws.com/0/22885/c824e46a-fb0a-75b9-acf9-e5b6303b6cc2.png">






# リファレンス

* https://github.com/Microsoft/ptvsd/
* https://code.visualstudio.com/docs/python/debugging#_remote-debugging
RSpecでテストをまとめて検証する方法

RSpecの機能aggregate_failuresを紹介したいと思います。

テストコードを記述をする際、１つのexampleに対して１つのexpectationを記述できる。

```ruby
 RSpec.describe Client do
   let(:response) { Client.make_request }
 
   it "returns a 200 response" do
     expect(response.status).to eq(200)
   end
 
   it "indicates the response body is JSON" do
     expect(response.headers).to include("Content-Type" => "application/json")
   end
 
   it "returns a success message" do
     expect(response.body).to eq('{"message":"Success"}')
   end
 end
```

一方、以下のように１つのexampleに対して、全てのexpectationをまとめることもできる。

```ruby
 RSpec.describe Client do
   it "returns a successful JSON response" do
     response = Client.make_request
 
     expect(response.status).to eq(200)
     expect(response.headers).to include("Content-Type" => "application/json")
     expect(response.body).to eq('{"message":"Success"}')
   end
 end
```

後者の記述方法の方が

- １回のリクエストで複数のテストができるため、テストの処理速度が速い
- 複数 example を記述する必要がないため、思いついたテストパターンを上から下へさくっと書ける

といったメリットがある。

しかし、もし最初のテストで失敗した場合、残りのテストがどうなったかがわからない問題がある。
そこで、aggregate_failuresを利用すると、一部が失敗したとしても、全ての expectation が検証されるようになる。下記のように記述する。

```ruby
 RSpec.describe Client do
   it "returns a successful JSON response" do
     response = Client.make_request
 
     aggregate_failures "testing response" do
       expect(response.status).to eq(200)
       expect(response.headers).to include("Content-Type" => "application/json")
       expect(response.body).to eq('{"message":"Success"}')
     end
   end
 end
```

結果、全てのテストを検証してくれるようになる。

```linux
 1) Client returns a successful response
    Got 3 failures from failure aggregation block "testing reponse".
    # ./spec/client_spec.rb:5
 
    1.1) Failure/Error: expect(response.status).to eq(200)
 
           expected: 200
                got: 404
 
           (compared using ==)
         # ./spec/client_spec.rb:6
 
    1.2) Failure/Error: expect(response.headers).to include("Content-Type" => "application/json")
           expected {"Content-Type" => "text/plain"} to include {"Content-Type" => "application/json"}
           Diff:
           @@ -1,2 +1,2 @@
           -[{"Content-Type"=>"application/json"}]
           +"Content-Type" => "text/plain",
         # ./spec/client_spec.rb:7
 
    1.3) Failure/Error: expect(response.body).to eq('{"message":"Success"}')
 
           expected: "{\"message\":\"Success\"}"
                got: "Not Found"
 
           (compared using ==)
         # ./spec/client_spec.rb:8
```

さらに、全体に適用したい場合、以下のように設定する。

```ruby
 RSpec.configure do |c|
   c.define_derived_metadata do |meta|
     meta[:aggregate_failures] = true unless meta.key?(:aggregate_failures)
   end
 end
```

このように設定すると、exampleを書くたびにaggregate_failuresでラップする必要がなくなる。

## 参考
[RSpec 3.3 has been released!](http://rspec.info/blog/2015/06/rspec-3-3-has-been-released)
How to design better Python functions

# How to design better Python functions
In Python, creating a function is the most common approach to enable abstraction. As a programmer, you would have defined a no. of functions in your programming assignments.

We can't equate every function as a good one. Sometimes, you may end up writing a bad function which could hamper the readability and usability of your code. It means that the particular procedure requires refactoring.

In this post, I like to share some of the guidelines to write good functions.

## Don't bring complexity
It is possible to write an utter cryptic code in Python, but you should only prefer to keep your code simple and straightforward.

### You shouldn't be doing this way
```
def wrong(*args):
    m, n = args
    return dict(**locals())
```

### You should be doing this way
```
def right(m, n):
    return {'m': m, 'n': n}
```

## Don't mix instructions
Although, you can write compound statements in Python. But it is not a good way to write code. It makes your code less expressive.

### You shouldn't be doing this way
```
print('first'); print('second')

if m == n: print('first')

if <first complex match> and <second complex match>:
    # execute code
```

### You should be doing this way
```
print('first')
print('second')

if m == n:
    print('first')

test1 = <first complex match>
test2 = <second complex match>
if test1 and test2 :
    # execute code
```

## Don't blindly use function params

### Positional params

These are compulsory and don't have any default values. They are the easiest form of params and you should use if there are few arguments. They are fully part of the function and have a natural order.

### Keyword params

These are not compulsory and do have default inputs. You can use then when there is a need to send optional parameters to the function. If your function has more than two positional params, then it is tough to remember the sequence of the arguments. In such a case, using the keyword-based arguments is beneficial.

## Quick Reference
1. [Python function](https://www.techbeamers.com/python-function/)
2. [Style your code](https://docs.python-guide.org/writing/style/)
EV3RTでログをリアルタイムに見る方法

EV3RTのBluetooth通信とsyslogを使うと無線で動作中のログを取得することができます。
ETロボコンの倒立ロボットなど、動かしながらセンサーの値の現在値を見たりすることもできて便利です。

# ログタスクを使って、ログを取得する
EV3RTのログタスクを使用してログを出力すると、空き時間を利用してログを送信することができます。

## ログメッセージを出力する
```
void syslog(uint_t prio, const char *format, ...);

使用例）
syslog(LOG_INFO, "Unresolved event packet %d", packet[0]);
```
1番目の引数はログレベル、2番目以降はログに出力するメッセージをprintfみたいな感じでフォーマット付きで指定することができます。

### ログレベル
(2018/10/30 修正 Thanks to @koushiro )
ログレベルの定義は以下のようになっています。

```hrp2/include/t_syslog.h
/*
 *  ログ情報の重要度の定義
 */
#define LOG_EMERG	UINT_C(0)	/* シャットダウンに値するエラー */
#define LOG_ALERT	UINT_C(1)
#define LOG_CRIT	UINT_C(2)
#define LOG_ERROR	UINT_C(3)	/* システムエラー */
#define LOG_WARNING	UINT_C(4)	/* 警告メッセージ */
#define LOG_NOTICE	UINT_C(5)
#define LOG_INFO	UINT_C(6)
#define LOG_DEBUG	UINT_C(7)	/* デバッグ用メッセージ */
```

EV3RTの場合は、デフォルト設定で、ログレベルに「LOG_NOTICE」より上（数字が小さいもの）が出力される仕様になっています。
（LOG_INFO, LOG_DEBUGは出力されないので注意）
TODO:出力するログレベルの変更方法


## PC側の設定
PC側で「Bluetoothで送信したログを受信できるアプリ」を準備してください。
macの場合はminicomが無難でしょう。
設定方法は [Mac OS X でETロボコンに出よう！（Bluetooth編）](https://qiita.com/yamanekko/items/683db7be0a3c93f03fe9) を参考にしてください。
windowsの場合はTeratermがよいと思います。


## SDカードにある設定情報を変更
SDカードにある設定情報を変更します。
ev3rt/etc/rc.conf.ini にあるDefaultPortにBTを指定すると、Bluetooth経由でログが送信されるようになります。
TODO:LCD,シリアルポート経由で出力する場合についてかく

```
[Debug]
DefaultPort = BT
```

## ログを送信する
ログメッセージを出力できるようにしたアプリを作成し、SDカードのappsにコピーしておいてください。
EV3RTを起動します。
（初回の場合はPCとペアリングが必要な場合があります）
minicom(Macの場合)を起動します。

```
Welcome to minicom 2.7.1

OPTIONS: 
Compiled on May 17 2017, 15:29:14.
Port /dev/tty.MindstormsEV3-SerialPor, 22:58:44

Press Meta-Z for help on special keys
```
接続できた場合は上記のようなメッセージが出力されます。

``` Press Meta-Z for help on special keys ```
が表示されたら、EV3RTのメニューからアプリを実行するとログが出力されます。

## ログを保存する
ここではPC側にBluetooth経由で送信したデータをminicomで保存する方法を紹介します。
（Windowsの人はTeraTermを使えば良いと思います）

escキー+zでメニューが表示されます。
<img width="498" alt="スクリーンショット 2018-10-27 23.10.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/34097/c517d64e-26e0-739a-36a8-64fa60ff5d98.png">

Lキー押すを以下のような画面になるので、ログファイルの名前を指定してください。
<img width="316" alt="スクリーンショット 2018-10-27 23.10.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/34097/24c6c573-89d7-2c23-9494-816eacb204ba.png">

ファイル名を入力してenterキーを押すと、ログファイルの書き込みが開始します。
もう一度Lキーを押すとログのファイル書き込みが終了します。
dockerでイメージ作成し、コンテナ上にrailsの環境を作る最小限の作業【初心者& めも】

# 目的
新しいプロジェクトを作ることになった。
今までvagrant, virtual boxで仮想環境を作りその上のcentOSで開発をしていた。
詳しいことはわからないが、dockerはこのご時世必須らしい。
あと、バイトでやってたところがdockerで環境構築していて、vagrant使っていた自分からすれば、爆速かつ簡単で素晴らしかった。

大きな目的はdockerのコンテナ上で開発環境を作ること。
この記事ではdocker　のコンテナ上で```rails s```して、
chroamでhello ruby on rails を表示することを目的にする。
ちなみにMac High Sierraがhost OS。

# docker運用のイメージ的なもの
既存のdocker imageを持ってくる
↓
ちょっと書き換えて自分の使いやすいようなimageにカスタマイズする(Dockerfile作る)
↓
自分のためのイメージ作る(docker build)
↓
イメージからコンテナを起動
↓
コンテナ上のcentOS6の上でrails server 立てる 



# やったこと, 手順
## docker インストール
https://www.docker.com/products/docker-desktop

ユーザー登録しないとダメだったが無料で落とせる。

## Dockerfileの作成とdocker build

``` sh:Dockerfile 
FROM centos:centos6　# centOS6のイメージを持ってくる（dockerが用意してくれている）
MAINTAINER user
RUN mkdir -p /work # hostと共有するフォルダ
```
というファイルをhostOSのどこかに作る。
どこでもいい。
とりあえず`~/myproject/docker-test　/Dockerfile`に作った。

とりあえず、共有フォルダだけ作ったが、他にも何かインストールしておきたいとかいうのを
ここに書いてしまってもいい。
例えば、`RUN yum -y install gcc`みたいに。


```docker build -t test . ```
これはtestというタグ名でDockerfileをビルドしてくれという命令。
これをやるとimageを作ってくれる。

```docker images```
でimageが作成されたことを確認できる。
いらないimageは
```docker rmi <imageの名前 or ID>```
でけせる。



## コンテナを起動
```docker ps -a```
で今のコンテナの状態がわかる。
-aオプションで起動してないコンテナも含めた全てを表示してくれる。

起動まえは多分何も表示されない。

```docker run -i -d -p 8080:3000 -v "${PWD}:/work" --name 'rails' test```
でtestという名前のimageからコンテナを起動。
-i : 標準入力を続ける
-d : バックグラウンドで起動
-p: ポート番号指定
-v : コンテナ側のどこのpathにファイル群を送るか（この場合 /work）
--name: 名前を指定(rails という名前でコンテナ起動)

```docker ps -a```
で起動したことを確認。
```lsof -i:8080```でも確認。
ここで8080がホスト側のport番号であることに注意。
つまりあとでrails sした時はlocalhost:8080にサーバがたつ。


## コンテナに入る
```docker exec -it rails /bin/bash```
rails という名前のコンテナに入る
-i:標準出力を続ける
-t: 疑似ttyを割り当てる
らしい
参考↓
https://www.nyamucoro.com/entry/2018/01/11/224932
https://qiita.com/toshihirock/items/22de12f99b5c40365369


ファイル共有を確認できる。
hostでDockerfileと同じ階層のファイルを変更するとちゃんとguestの/work下も変わる

簡単！！
vagrantで時間と手間と精神力その他etc...etc...を失っていたのはなんだったのか。


コンテナから出るのはexit,
コンテナを終了させるのは
`docker stop コンテナ名 or ID`
コンテナを削除するのは
`docker rm コンテナ名 or ID`

## rails プロジェクトを作る
省略する、長くなるので
別記事に書いた
https://qiita.com/Umibows/items/db4509969cd3725ff310

必要なライブラリとかインストールしてrails newしてbundle installすればいい。
あとは個別に必要な物とかを入れる。↑

で、いよいよ`rails s`する。
前にも書いたが、hostのportは8080番なのでlocalhost:8080にchroamからアクセスすると
hello画面でた。
ubuntu18.04+mbed(offline)でハマる

## ハマった状況
ubuntu 18.04上でmbed(offline)環境が構築できない（=コンパイルに失敗する）．

## 最終的にどうしたか？
Docker上にubuntu 16.04 + python2.7 + mbed-cli の環境を構築することで対応．

```dockerfile
FROM ubuntu:16.04

RUN apt-get update && \
	apt-get install -y python2.7 python-pip git mercurial && \
	apt-get install -y gcc-arm-none-eabi && \ 
	pip2 install --upgrade pip && \
	apt-get clean

RUN	pip2 install mbed-cli jsonschema && \
	mbed toolchain -G GCC_ARM
```

---

## 実験環境

- ubuntu 18.04（on Windows10 VirtualBox）
- [mbed-cli](https://github.com/ARMmbed/mbed-cli)
- mbed classic (OS2)のコンパイルがしたい（not Mbed-OS）

## テストコード
何の変哲もないLチカです．mbed-cliで新しくプロジェクトを作成し，このコードが一発でコンパイル出来るかで試しました．

```c++
#include "mbed.h" 
DigitalOut led1(LED1); 
int main() {
    while (true) {
        led1 = !led1;
        wait(0.5);
    }
} 
```

## 実験結果

環境構築は，[mbed-cli](https://github.com/ARMmbed/mbed-cli)のページのドキュメントに沿って実施しました．しかしやり方が悪いのか，そういうものなのか，**ubunt 16.04 + ython2.7の組み合わせでしか成功しませんでした...**

| OS | Python | Result |
|:-:|:-:|:-:|
| ubuntu 16.04 | python2.7 | **OK** |
| ubuntu 16.04 | python3.6 | NG |
| ubuntu 18.04 | python2.7 | NG |
| ubuntu 18.04 | python3.6 | NG |

例えば，ubuntu 18.04 + python3.6だと，コンパイルを実行すると

```shell
[mbed] WARNING: If youre using Python 3 with Mbed OS 5.8 and earlier versions, Python errors will occur when compiling, testing and exporting
---
[mbed] Auto-installing missing Python modules...
[ERROR] 'dict' object has no attribute 'has_key'
[mbed] ERROR: "/usr/bin/python3" returned error.
       Code: 1
       Path: "/home/user/Workspace/mbed/blink"
       Command: "/usr/bin/python3 -u /home/user/Workspace/mbed/blink/.temp/tools/make.py -t GCC_ARM -m SSCI824 --source . --build ./BUILD/SSCI824/GCC_ARM"
       Tip: You could retry the last command with "-v" flag for verbose output
```

とか言われたり，ubuntu 18.04 + python2.7だと

```
/usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/bin/ld: error: /usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/lib/crt0.o: Conflicting CPU architectures 12/1
/usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/bin/ld: failed to merge target specific data of file /usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/lib/crt0.o
collect2: error: ld returned 1 exit status
[ERROR] /usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/bin/ld: error: /usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/lib/crt0.o: Conflicting CPU architectures 12/1
/usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/bin/ld: failed to merge target specific data of file /usr/lib/gcc/arm-none-eabi/6.3.1/../../../arm-none-eabi/lib/crt0.o
collect2: error: ld returned 1 exit status

[mbed] ERROR: "/usr/bin/python" returned error.
       Code: 1
       ...
```

とか言われたりしてさんざんな感じです．なお後者は ubuntu 18.04 のバグではないか，という情報が[上がっているようです](https://bugs.launchpad.net/ubuntu/+source/gcc-arm-none-eabi/+bug/1767223)．少し調べてはみましたが，自身の手にはおえませんでした．

Mbed-OS（os5）のほうならこうも悩まなくてもよいのでしょうかね...
物理シミュレーションのための考え方[初心者向け]

# はじめに
ここでは、物理シミュレーションの例を紹介します。

プログラミング初心者で何かやってみたいと考えている方などは読んでみると面白いかもしれません。

もう少し複雑なもののシミュレーションも掲載してみましたので、よかったらこっちも見てみてください。
https://qiita.com/ysuzuki19/items/c1be78d9e9e90dd4aa1e

# プログラムの作成と実行をした環境
Ubuntu18.04LTS

# 物理シミュレーションのための準備
## 物理シミュレーションとは
現実世界の状況を想定してその動作や振る舞いを数値計算によって再現すること

## シミュレートする物理現象
ここでは、高校の教科書でも初歩的な現象である「自由落下」を例とします。

# 対象とする現象について考える
物理シミュレーションをするためには、まずシミュレーションする対象の条件を確認する必要があります。自由落下の条件とは、以下のようなものです。

```
・加速度g=9.8
・初期速度v0=0.0
```

また、対象にあてはまる式なども必要となってきます。自由落下では以下となっています。

```math
v = v_0 + gt
```
```math
x = v_0t + (gt^2)/2
```

# 物理シミュレーション
## プログラム作成
以上のように条件などが整理できたらあとはプログラムを作成するのみです。ここで、変数`x`の方向は下向きの軸としています。

```c:free_fall.c
#include <stdio.h>

// 重力加速度の設定
constexpr double G = 9.8;
// 速度の初期値の設定
constexpr double V0 = 0.0;
// 時間の刻み幅の設定
constexpr double TIME_STEP = 1.0;
// 計測する時間の設定
constexpr double TIME_MAX = 10.0;

int main(){
  // 経過時間を表す変数
  double time;
  // 速度を表す変数（初期値を代入しておく）
  double v = V0;
  // 位置を表す変数
  double x = 0;
  
  for (time = 0; time <= TIME_MAX; time += TIME_STEP){
    v += G * TIME_STEP;
    x = V0*time + G*time*time/2.0;
    printf("%f, %f\n", time, x);
  }
  return 0;
}
```

## 実行結果
上のプログラムをコンパイル・実行したところ、以下のようになりました。

```
0.000000, 0.000000
1.000000, 4.900000
2.000000, 19.600000
3.000000, 44.100000
4.000000, 78.400000
5.000000, 122.500000
6.000000, 176.400000
7.000000, 240.100000
8.000000, 313.600000
9.000000, 396.900000
```
実際にグラフとしてみてみるとしっかり放物線となりました。
RN応用編２：TabやDrawerメニューにアイコンを設定する

既存編、応用編１からの続きです。

## シリーズ

* [React-Navigatorを利用してみる（基礎編）](https://qiita.com/zaburo/private/5b69a65db1b4d181896a)
* [RN応用編１：Drawer Navigatorをハンバーガーメニューで表示させる](https://qiita.com/zaburo/private/aaf198c79520dbaa48e2)
* [RN応用編２：TabやDrawerメニューにアイコンを設定する](https://qiita.com/zaburo/private/05c41190726cbcb17fdf)→この記事
* [RN応用編３：Reduxで値の取り回し](https://qiita.com/zaburo/private/c7df04fa1d53fd08559c)


## 概要

応用編１ではハンバーガーメニューで見た目をいじったので、ついでにTabやDrawerメニューにアイコンを追加してみます。

## Tabメニューにアイコンを追加

アイコンもいくつかの場所で追加できますが、ここではcreateBottomTabNavigator()にnavigationOptionsを定義することで追加してみます。

Tabにアイコンを追加します。react-native-vector-iconsを利用するので、installやimportがまだであれば実行してください。

```diff:App.js(抜粋）
+import Icon from 'react-native-vector-icons/FontAwesome';

.....

//Tab
const Tab = createBottomTabNavigator(
    {
        Tab1: {
            screen: createStackNavigator({ Tab1: { screen: Tab1 } }),
+            navigationOptions: {
+                tabBarIcon: ({ tintColor }) => <Icon size={24} name="home" color={tintColor} />
+            }
        },
        Tab2: { 
            screen: createStackNavigator({ Tab2: { screen: Tab2 } }),
+            navigationOptions: {
+                tabBarIcon: ({ tintColor }) => <Icon size={24} name="cog" color={tintColor} />
+            }
        },
    }
);

.....

```

動作確認します。

<img width="545" alt="スクリーンショット 2018-10-27 22.29.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/55188/06bbd530-e03c-f230-a9e5-73cbba640bcf.png">

Tabにアイコンが追加されました。

## Drawerメニューにアイコンを追加

次にDrawerメニューにアイコンを追加してみます。

記述場所はTabと同じくcreateDrawerNavigator()のnavigationOptionsです。

```diff:App.js(抜粋)
.....

//drawer
const Drawer = createDrawerNavigator(
    {
        Stacks: {
            screen: Stack,
            navigationOptions: {
                drawerIcon: <Icon name="check" size={24} />
            }
        },
        Tabs: {
            screen: Tab,
            navigationOptions: {
                drawerIcon: <Icon name="check" size={24} />
            }
        },
        Single1: { screen: Single1 },
        Single2: { screen: Single2 },
    },
    {
        initialRouteName: 'Tabs'
    }
);

.....
```

確認してみます。
２箇所のみ、かつ全て同じアイコンになっていますが、お好みで変更してみてください。

<img width="545" alt="スクリーンショット 2018-10-27 22.36.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/55188/6d5572db-213c-f2eb-45f2-8c3eb6ac1b4c.png">


以上なります。

##　関連リンク

* [RN応用編３：Reduxで値の取り回し](https://qiita.com/zaburo/private/c7df04fa1d53fd08559c)
centOS上でrails環境を作る【個人めも】

# 目的
mac の上でもいいんだけど、チーム開発になると環境合わせるためにcentOSの上で開発する場合は多い。
centOS上でrails　のプロジェクトを作ってhello ruby on rails を表示するまでを主に自分のために整理しておく。

centOSの環境はどうするんだって話ですが、最終的にはdockerでcentOSをゲストOSにしてその上で開発する環境を作りたいってのが背景だったので、dockerで作りました。

それに関する記事は別で書く予定


# 手順
## 必要なライブラリなどインストール
以下を順に実行した。
こいつらは全部Dockerfileの中に書いてしまってもいいかもしれない。
今はdocker execで中に入った後にbash スクリプトでインストールしている。

### rbenv (ruby の管理)


```sh
sudo yum -y remove ruby
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
mkdir -p ~/.rbenv/plugins
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
cd ~/.rbenv/plugins/ruby-build
sudo ./install.sh
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
```

### ruby
ここでは2.4.0のバージョンを入れた

```sh
yum install -y readline-devel
rbenv install 2.4.0
rbenv rehash
rbenv global 2.4.0
source ~/.bash_profile
```

### rails
5.0.7を入れた

```sh
rbenv exec gem install rails -v 5.0.7
rbenv rehash
source ~/.bash_profile
```

### MySQL
5.6がいいと思う

```sh
# デフォルトのDB削除
yum remove mariadb-libs
rm -rf /var/lib/mysql/

sudo yum install mysql-devel
sudo yum install mysql-server
```
mysql5.6のインストール↓
https://qiita.com/Esfahan/items/83200c64de8d826677b5

### node入れる
入れないと```rails s```が失敗する。
nvmよりnodebrewがいいんじゃないかな。

```sh
curl -L git.io/nodebrew | perl - setup
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
nodebrew install-binary v11.0.0
nodebrew install v11.0.0
nodebrew use v11.0.0
source ~/.bash_profile
```


https://qiita.com/kota2_0/items/ec7dc77955ff0f45f06f


## rails プロジェクト作る

素晴らしい記事があった。わかりやすい！↓
https://qiita.com/yuitnnn/items/b45bba658d86eabdbb26

```bundle exec rails new . -B -d mysql --skip-test```
でプロジェクト作成した。

## データベース作成
データベースをMySQLにしたので
これやらないと作らないとサーバ立たない
```bundle exec rake db:create```



## rails server 立てる
ここで意気揚々と```rails s```したら

mysqlソケットエラーが出た。ここで解決↓
 
```sh
sudo /etc/init.d/mysqld restart
```
https://qiita.com/kanohisa/items/564035efd74d9c75bdcb

めでたくhello画面でた
Windows10のPython3でigraphを使うまで

#iGraphが使えなかった！！
市販本の「Pythonによるテキストマイニング入門」に載っていたigraphのサンプルを動かしたいと思いました。
パッケージをインストールするまでに色々と失敗したので他の人の参考になればなと書いて見ました。

##間違った作業
Pythonでは、色々なパッケージを 

```
pip install パッケージ
```
または

```
py -m pip install パッケージ
```

でインストールすることができます。
なぜにpyコマンドなのかは
https://qiita.com/mkgask/items/d741578efb13aac7db0e
に詳しく書かれていました。

とりあえずigraphでネットワーク図を描くサンプルコードを動かしたかったので特になにも考えず

```
py -m pip install igraph
```
とやってしまいました。そうするとjgraphがどうのというエラーが出るので

```
py -m pip install jgraph
```
とやってしまいました。この両方間違いです。
やってしまった方は

```
py -m pip uninstall igraph
py -m pip uninstall jgraph
```

でアンインストールしておきましょう。

##pythonでigraphを使うために必要なもの

igraphをpythonから使うためにはigraph本体とそれをpythonから利用するためのパッケージが必要です。しかしigraphを使うためにcairoがそしてcairoを入れるためにmsys2がさらに必要です。

ひとまずmsys2をインストールします。
http://www.msys2.org
こちらのトップページからダウンロードしてインストールします。
現状のWindowsならほとんど64bit版だと思うのでmsys2-x86_64...をダウンロードしインストールします。
そうすると、コマンドラインのような画面が開きます。
そこで使えるパッケージマネージャpacmanをアップデートしてからcairoをインストールします。

```
pacman -Syu
pacman -S mingw64/mingw-w64-x86_64-cairo
```

これでmsys2は終了です。

つぎに
https://www.lfd.uci.edu/~gohlke/pythonlibs/
から二つのwheelファイルをダウンロードします。
非公式らしいのでご利用は自己責任で。
pycairoと、python-igraphになります。

こちら大量のファイルがあるのでサイト内検索でpycairoやpython-igraphを検索してみてください。
まずはサイト上部にある一覧からヒットしますんでクリックします。
そうすると、ファイルがたくさんあります。
例えば
pycairo_1.17.1_cp35_cp35m_win32.whlや pycairo_1.17.1_cp35_cp35m_win_amd64.whlなどあります。
Windowsが64bit版なら　末尾amd64.whlの方を選んでください。

そして大事なのはcp35_cp35mのところです。こちらはpythonのバージョンになります。ご自分のpythonバージョンと合わせてください。
例えば、python -Vで 3.5.4とでればcp35_cp35mを、3.6.7と出ればcp36_cp36mを選んでください。
これを間違えるとインストールできません。ここも結構悩みました。

Windows、Pythonともにバージョンを合わせて二つダウンロードします。
そして、Powershellやcmdなどのコマンドラインを開きます。cdコマンドでファイルをダウンロードしたフォルダにカレントディレクトリを移します。もしくはフルパスでファイルを指定します。

```
py -m pip install ファイル名
```
でパッケージを２つインストールします。
これで使えるはずです。


参考にさせていただいたのは下記のサイトです。
https://hytmachineworks.hatenablog.com/entry/2017/04/22/171620
C++11 以降は、C++98 よりも 100倍以上速いことがある

move コンストラクタが入ったので、STLコンテナを使っているコードは、ソースコードを変えなくても速くなることがあるよ、という話。

つまり。
コンパイラオプションを `-std=c++98` から `-std=c++11` に変えるだけで速くなることがある。

#コード

実際に 100倍以上速くなるコードは下記の通り：

```c++:c++11_or_c++98
//clang++ -O2 -std=c++11 strvec.cpp
// or 
//clang++ -O2 -std=c++98 strvec.cpp

#include <vector>
#include <time.h>
#include <utility> 
#include <iostream>
#include <string>

double getTick()
{
  timespec t;
  clock_gettime(CLOCK_REALTIME, &t);
  return t.tv_sec + t.tv_nsec*1e-9;
}

int const N1 = 10000;
int const N2 = 5000;

std::vector<std::string> prepare()
{
  std::vector<char> v(N1);
  std::fill(v.begin(), v.end(), 'a' );
  std::vector<std::string> r;
  for( int i=0 ; i<N2 ; ++i ){
    r.push_back(std::string(v.begin(), v.end()));
  }
  return r;
}

void test( char const * title )
{
  std::vector<std::string> a = prepare();
  double tick = -getTick();
  while( 0<a.size() ){
    a.erase( a.begin() );
  }
  tick += getTick();
  std::cout << title << ": " << tick << std::endl;
}

int main()
{
#if 201103L<=__cplusplus
  test("c++11");
#else
  test("c++98");
#endif
  return 1;
}
```

# 結果

手元のマシンでの実行結果は下表の通り：

|オプション|出力|
|:--|:--|
|-O2 -std=c++98|c++98: 8.22603|
|-O2 -std=c++11|c++11: 0.0721948|

タイトルは「100倍以上」としたけど、`N1` と `N2` を調整して 100倍ちょっとになるようにしたんであって、1000倍にも1万倍にもなる。

で。

冒頭に書いたとおり、moveコンストラクタが導入されているのが原因。
細かく書くと：

* `std::string` に `noexcept` な moveコンストラクタがある
* moveコンストラクタは、コピーコンストラクタよりもずっと速い
* `std::vector` が `erase` 内で 要素型の moveコンストラクタを利用している

ということが原因。

C++11 はなんとなく `auto`・ラムダ・`std::thread` あたりに注目していたんだけど、ソースコードそのままで高速化する場合があるとは思っていなかった。面白い。