OmniAICreator/Qiita-1.07M huggingface dataset:
リーダブルコードにするために 〜まとめ〜

#はじめに
"他人が読んでも簡単に理解できる"
そして
"後から自分が見返しても何がしたかったのかすぐに思い出すことができる"
ようなコードを書くことを心がける。
当たり前のようで、とても大事なことだが、自分はまだまだできていないと思ったので、改めて『リーダブルコード より良いコードを書くためのシンプルで実践的なテクニック』を読んでみた。(2017年のGWを使い)

この本
↓↓
https://www.oreilly.co.jp/books/9784873115658/


そこで、自分なりに思ったことをまとめておく。備忘録。
基本こそ大事でありそれを習慣にするため。（もしまたこの習慣を忘れかけてきた時に、これを見ることで記憶をフラッシュバックさせるためにも）

#リーダブルのために大事なこと

##見てすぐわかるコードへ
『コードは理解しやすくなければいけない』/『コードは他の人が最短時間で理解できるように書かなければいけない』
これ、当たり前だが、めちゃくちゃ大事。

**コードを単に短くするわけではなく、理解するまでの時間を短くする。**
↑
最後まで読んでも結局全てのことはここに終着した。
つまり、リーダブルコードで目指すはここ。（簡単なようで難しく奥が深い）

##変数名は慎重に決める
変数名から中身が伝わるようにする。スコープが小さいなら短くても良い。

汎用的な名前は避けて、かつ、的確な単語を使い情報を詰め込む
（キャメルケースなどフォーマットも守った上で）

ブール値の名前の決め方は、それがブール値とわかるよう is や has などの単語を使う。
（自分は時々これをできておらず、他人から見てわかりづらい名前つけてたな〜と思った）

##意味のあるコメントアウトを
コードからすぐわかることはコメントに書かない。
これもたまに守れてなかったかな〜。
もっと自分が書いたコードを客観的に見て、『コード見たらわかるわ！』ってなるコメントがあれば省いてこう。

##if/elseなども中身をわかりやすく
基本は、条件は否定形よりも肯定形を使うこと。
あとは。こういう条件やループなどの制御フローはできるだけ自然にして、読み手が立ち止まったり読み返したりしないようにする。

##シンプルな設計に
- 関数から早く返す
- ネストを浅くする
- [ド・モルガンの法則](https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%BB%E3%83%A2%E3%83%AB%E3%82%AC%E3%83%B3%E3%81%AE%E6%B3%95%E5%89%87)を使う
- 説明変数/要約変数を使う
- 大きすぎるものは細かく分割
- [グローバル変数](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0)は避ける
- メソッドをできるだけstaticに
- 汎用コードをたくさん作る
- コードは一つずつタスクを行うように
（上記のものの詳細は実際の書籍で。このキーフレーズを見てもなんのことか思い出せなかったらもう一度この本読むためにあえてこうしとこっと。）


- **頭が良いコードに気をつける**
これめっちゃ納得した。現在進行形でそこのコード周りを考えている時は
すごい作りや流れを理解してるから、
数行で複雑なことをしてもわかるし実際に正しく動作するようにできているかもしれないけれど、
後から見た自分とか他の人ってこんなの見づらくしかないよなぁ〜って。
実際は期待通りの動きをしてたとしても、他の人からコードの動きが把握しにくいって状態じゃ、
後からコードを他の人が付け足したり、自分が２ヶ月後にその部分のエラー修正することなった時困るのが目に見えてる、、。

大事なことのはじめにあるよう『見てすぐわかるコード』にするべく、**常日頃、書く時は
コードのこととか全くわからない人に自分をなりきらせて客観的に**なって書くことだなぁ。


#最後に
**自分が書いている言語の標準リファレンスをたまには眺めてみる**といい。
これ絶対大事だね。
自分がやりたいって思っている細かいとこが実は用意されているもので解決できるかもしれないし、ちゃんとどこまで標準でできて、どう拡張すれば応用きかせれるかなとか考えていこう。



とりあえず、個人的には２点。
**標準リファレンスは把握する！！**
**書くコードは自分のおばあちゃんが見てもすぐに中身をわかってもらえるくらいに！！**
は徹底することをいつか読み返した時の未来の自分に誓います。
Sidekiq互換のgo-workerから普通のSidekiqにエンキュー


非同期ジョブをSidekiqのようなものでやりたいなあ、でもgolangで受け付けたいなあ。とか考えていたら、互換実装があったので試してみた。

[jrallison/go-workers: Sidekiq compatible background workers in golang](https://github.com/jrallison/go-workers)

## RubyでSidekiqのジョブを書く

とりあえず引数をputsするだけのジョブ。

```ruby:sample.rb
require 'sidekiq'

class SampleWorker
  include Sidekiq::Worker
  def perform(*opts)
    puts "Kicked with options: #{opts.to_s}"
  end
end
```

んで、Sidekiqを起動しておきます。

```shell:console-sidekiq
$ sidekiq -r ./sample.rb -q myqueue 


         m,
         `$b
    .ss,  $$:         .,d$
    `$$P,d$P'    .,md$P"'
     ,$$$$$bmmd$$$P^'
   .d$$$$$$$$$$P'
   $$^' `"^$$$'       ____  _     _      _    _
   $:     ,$$:       / ___|(_) __| | ___| | _(_) __ _
   `b     :$$        \___ \| |/ _` |/ _ \ |/ / |/ _` |

...
```

OK。

## Goでエンキューの処理を書く

[go-workers](https://github.com/jrallison/go-workers)の`Enqueue`を使ってみる。Configureは最低限これらのオプションが必要だった。

```golang:main.go
package main

import "github.com/jrallison/go-workers"

func main() {
	workers.Configure(map[string]string{
		"server":   "127.0.0.1:6379",
		"process":  "1",
	})

	// デフォルトオプションでエンキュー
	workers.Enqueue("myqueue", "SampleWorker", []int{1, 2})

	// リトライオプション指定でエンキュー
	workers.EnqueueWithOptions("myqueue", "SampleWorker", []string{"job", "jober"}, workers.EnqueueOptions{Retry: true, RetryCount: 10})
}
```


`go run main.go`とすると、sidekiqのワーカーが動いた。


```shell:console-sidekiq
SampleWorker JID-a25fa4a81126e990406bb30e INFO: start
Kicked with options: [1, 2]

SampleWorker JID-8bc1738220cf1e2303279054 INFO: start
Kicked with options: ["job", "jober"]

SampleWorker JID-8bc1738220cf1e2303279054 INFO: done: 0.0 sec
SampleWorker JID-a25fa4a81126e990406bb30e INFO: done: 0.001 sec
```



ただ、ざっくりみた感じではSentinel/Clusterでredisクライアントを作るようなオプション指定はサポートしてないように見えた。


[go-workers](https://github.com/jrallison/go-workers)はREADMEにあるとおりServer側の機能も実装してあるので、逆に既存のSidekiqプロセスの代わり(※sidekiq-webは本家の使い回し)をすることもできるようだけど、その場合はSidekiq互換にこだわる必要もない気はした。
極端な話、redisにsaddとrpushすりゃあSidekiqは動くので、他にも色々やり方は考えられそう。
Node.jsでイメージを一括リサイズできたんで、公開できるソースにリファインできたら公開します

ただの予告・・・です。

イメージマジックをインストールしてノードの走る環境であれば、おそらくこれ使えるんじゃないかと思います。

使用したものはこのQiitaに存在する様々な記事です。

はっきり言って寄せ集めみたいな内容です（ありがとうございます！記載できる限りは出典記載したい！）

あと、リサイズするパラメータの設定なんかを簡便にできるようにしてから公開します。

とりあえず現状でもExif消して1024ピクセル長辺の画像は作成できているので、自分の個人ブログの写真画像はこれで複数枚一気にリサイズできる段階まで来ました！

明日は日帰り旅行！！（不純な動機でスミマセン）
Railstutorial 4版　覚書 第４章

躓くことがなかった。

- Gitのコマンドをまとめる

```
git checkout -b branch-name #ブランチを切る
git branch

git commit add .
git commit -m "Finish XXX"

git checkout master　#ブランチを移動
git merge branch-name

git branch -d branch-name　#ブランチを削除
```
シェル芸100% よくつかう

個人的によくつかうワンライナーを集めてみました。(随時更新)



## カレントディレクトリ以下の"pattern"を文中に含むファイルを表示する
```
grep -rnw . -e "pattern"
```
※最強によくつかう

## カレントディレクトリ以下のファイルの文中のbeforeをafterに書き換える。
```
find -type f | xargs perl -wpi -e 's!before!after!g'
```
※要perl

## カレントディレクトリ以下の.svnディレクトリを全て消し去る
```
find -type d|grep '\.svn'|xargs rm -rf
```
※古いバージョンのsvnは管理対象ディレクトリ全てに.svnディレクトリがありました。(懐古)
Google Cartographer+Gazeboで地図をつくる


#目的
　googleがリリースした、ROSに対応している。SLAMライブラリCartographerをつかって、地図を作成する。
　ロボットなしでも動かすために、ROSのシミュレーション環境Gazeboを使用する。
　Fetchには、シミュレーション用のgazeboモデルと、Cartographerの設定ファイルが準備されていることから、Fetchのモデルを使用する。

#1.シミュレーション環境の構築
　gazeboでの移動ロボットのシミュレーション環境を構築する。
　FetchのシミュレーションモデルにはSLAMに必要なセンサー：Lidarを含んでいる。

<参考>Fetch & Freight Manual：
http://docs.fetchrobotics.com/index.html
　
下記コマンドでインストールする。

```
$ sudo apt-get update
$ sudo apt-get install ros-indigo-fetch-gazebo-demo
```


下記コマンドでGazeboをたちあげて、ロボットが走行できることを確認する。
teleopのコンソールで、U/I/Oキーなどで走行させることができる。
gazeboは初回起動時にかなり時間がかかる。起動するまで、しばらく放っておく。(固まっているように見えるが起動中である。)

```
$ roslaunch fetch_gazebo simulation.launch
$ rosrun teleop_twist_keyboard teleop_twist_keyboard.py
```


#2.cartographerのインストール

ここで、Fetch用のcartographerを、ドキュメントにしたがって、インストールする。
https://github.com/googlecartographer/cartographer_fetch/blob/master/docs/source/index.rst


```
# Install wstool and rosdep.
sudo apt-get update
sudo apt-get install -y python-wstool python-rosdep ninja-build

# Create a new workspace in 'catkin_ws'.
mkdir catkin_ws
cd catkin_ws
wstool init src

# Merge the cartographer_fetch code for dependencies.
wstool merge -t src https://raw.githubusercontent.com/googlecartographer/cartographer_ros/master/cartographer_ros.rosinstall
wstool merge -t src https://raw.githubusercontent.com/googlecartographer/cartographer_fetch/master/cartographer_fetch.rosinstall
wstool update -t src

# Install deb dependencies.
rosdep update
rosdep install --from-paths src --ignore-src -r --rosdistro=${ROS_DISTRO} -y

# Build and install.
catkin_make_isolated --install --use-ninja
source install_isolated/setup.bash
```
<参考>Cartographer ROS Integration：https://google-cartographer-ros.readthedocs.io/en/latest/

サンプルのROSBAGを実行して、動作することを確認する。

```
# Download the 2D example bag.
wget -P ~/Downloads https://storage.googleapis.com/cartographer-public-data/bags/fetch/cartographer_freight_simulation_demo.bag

# Launch the 2D demo.
roslaunch cartographer_fetch demo.launch bag_filename:=${HOME}/Downloads/cartographer_freight_simulation_demo.bag
```

#3.Gazeboでのシミュレーション

gazeboを起動

```
$ roslaunch fetch_gazebo simulation.launch
```

適当に、障害物をおいていく。障害物がないと、SLAMを実行することができない。
![Screenshot from 2017-05-02 16:57:32.png](https://qiita-image-store.s3.amazonaws.com/0/73020/d7b5643a-76bd-6bc5-afac-cf79167eb09d.png)




fetch用のCartographerを起動する。

```
$ roslaunch cartographer_fetch freight.launch
```
teleopとrvizを起動、U/I/Oキーなどで走行させながら地図ができていく様子を観察する。

```
$ rosrun teleop_twist_keyboard teleop_twist_keyboard.py
$ rosrun rviz rviz
```

![Screenshot from 2017-05-02 16:55:27.png](https://qiita-image-store.s3.amazonaws.com/0/73020/64388bc2-e65f-9627-1a30-44da8ae71069.png)


参考

Real-Time Loop Closure in 2D LIDAR SLAM
https://research.google.com/pubs/pub45466.html

Ros wiki 
http://wiki.ros.org/cartographer
Storyboardを使ったViewControllerを比較的安全に初期化する

Storyboardを使ったViewControllerはSwiftと相性が悪いですよね。
今回は、初期化を行うstaticメソッドを生やすことで、比較的安全に初期化を行う方法を考えました。

# Storyboardを使ったViewController初期化の問題

Storyboardを使ったViewControllerの初期化時に値を渡そうとすると、internalかつvarで宣言したpropertyを外部から代入する、といったことになりがちです。

```swift
final class ViewController: UIViewController {
    var userId: Int?
}

let viewController = // Storyboardを使った初期化
viewController.userId = userId // internalかつvarにしないとアクセスできない
```

この場合、`userId` というpropertyはクラス内部と外部、どちらからも任意のタイミングで代入ができてしまいます。

# 初期化を行うStaticメソッドを生やす

初期化を行うstaticメソッドを以下のように生やすことで、比較的安全に初期化をすることができます。

```swift
final class ViewController: UIViewController {
    private var userId: Int?

    static instantiateViewController(userId: Int) -> Self {
        let viewController = // Storyboardを使った初期化
        viewController.userId = userId
        return viewController
    }
}

let viewController = ViewController.instantiateViewController(userId: userId)
```

この書き方では、クラス外部からはpropertyに直接アクセスできず、staticメソッド経由の初期化に限定することができます。

# まとめ
Storyboardを使ったViewControllerはSwiftと相性が悪いですが、初期化を行うstaticメソッドを生やすことで、外部からのpropertyの代入を初期化タイミングのみに限定して、比較的安全に初期化することができます。
Webサイトを表示するだけのスマホネイティブのガワ実装、iOSとAndroid分

# はじめに

## 概要

このエントリでは、iOSとAndroidで、ネイティブアプリの形でWebサイトを表示するまでの方法を紹介します。
ネット上に同じような趣旨のエントリは散見されるのですが、自分でもやってみたかったのと、iOS/Android両方ともやって見ている記事は少ない気がしたので書いてみることにしました。

## このエントリでわかること

- アプリで表示させたいWebサイトがあったとして、ざっくりどんなステップでアプリで表示させるかまでがわかることを狙っています。

# 対象

- iOS/Androidでアプリの開発をするにあたり、Webサーバをそのままアプリで「表示」するときの手間の度合いが知りたい人
- 自分でネイティブアプリは書けるので、わざわざこのエントリみたいなものを描くのが面倒な人
- Cordovaがあるのは知っているけれど、自分で書き始めてみたらどんな手順になるか知りたい人

# iOS版

## テンプレを用意しました。

[dongara-ios](https://github.com/hrkt/dongara-ios)

上記サイト内のリポジトリURLをcloneすると、Xcodeのプロジェクトがダウンロードされます。

```
$ git clone https://github.com/hrkt/dongara-ios.git
```

XcodeでiOSアプリを開発するとき、実機で動かす上ではハマるポイントがあるので、まずはシミュレータで動作させてみるとよいでしょう(Xcode8で随分便利になりましたが、慣れない人はハマりポイントがあると思われます)。

## 筆者の作業環境

- macOS 10.12.4
- Xcode 8.3.2 / Swift 3.1

## 作った手順概要

1. XcodeでiOS Appのprojectを新規作成します。
2. テストコードなど、デフォルトでつけてくれるものを削除してすっきりさせました。
3. デフォルトで作られる「Main.storyboard」に、WebViewを一枚貼り付けて、全体に伸びるようにAuto-layoutのパラメータを指定します。
4. デフォルトで作られる「ViewController.swift」に上記webViewのreferenceを設定します。
5. URLベタがきはイマイチかなってことで、App.plistからAppUrlプロパティで表示ページを指定できるようにします。
6. Webの読み込みイベントくらいは確認したいだろうということで、ViewContrrollerにUIWebViewDelegegateのプロトコルに対応できるような宣言をして、webViewFinishLoadメソッドを記述します。ログを1行書いているだけです。

# Android版

## テンプレを用意しました。

[dongara-android](https://github.com/hrkt/dongara-android)

上記サイト内のリポジトリURLをcloneすると、Android Studioのプロジェクトがダウンロードされます。

```
$ git clone https://github.com/hrkt/dongara-android.git
```

## 筆者の作業環境

- macOS 10.12.4
- Android Studio 2.3.1

## 作った手順概要

1. Android Studioで、新規アプリの作成から「EmptyProject」を選択します。
2. テストコードなど、デフォルトでつけてくれるものを削除してすっきりさせました。
3. デフォルトで作られるlayout/activity_main.xmlに、WebViewを追加します。xmlの定義で、webViewが画面目一杯になるように設定します。
4. デフォルトで作られるMainActivity.javaのonCreateに、webViewの初期化コードを指定します。
5. URLベタがきはイマイチかなってことで、res/values/appSettings.xmlからapp_urlプロパティで表示ページを指定できるようにします。
6. Androidだと、「戻る」ボタン連打でアプリを終了しますが、これを少しカスタマイズし、webViewで「戻る」ができるときにはページを戻れるようにし、「戻る」ができないときにも、アプリは終了しないように、MainActivityのonKeyDownメソッド内で処理を加えました。
7. Androidの標準で付いてくるタイトルバーのアプリ表示は不要なので、AndroidManifest.xmlの中で「android:theme="@android:style/Theme.NoTitleBar"」を指定することにより消しています。

# 両方に共通のやっていない事項

- 画面の回転制御は何もいじっていません。
- JavaScript側との連携の話は触れていません。気が向いたら今後やってみるかもしれません。
- ダブルタップ時の画面の制御をどうするかなど、いわゆる「OS付属のブラウザの動き」をどこまでゆるすか、制御をかけていくか、という話は書いていません。

# 今後のTODO

- 気が向いたら、JavaScriptとの連携機能のサンプルを書いてみたり、ネイティブ側の機能を足すサンプルを書いてみる
Gitメモ


|内容|コマンド|補足|
|---|---|---|
|Gitで管理するリポジトリを作成|git init|.gitという名前の隠しファイルが作成される|
|gitの状態を確認|git status|
|変更をステージに追加|git add (変更したファイル)|git add . で全ての変更を追加|
|コミット|git commit -m "コメント"|変更がわかりやすいコメントを残す|
|コミットをリモートレポジトリに反映|git push origin (ブランチ名)|
|コミットログを確認|git log|-oneline :1行表示、--graph :グラフで表示|
|変更内容の差分を確認|git diff|
|リポジトリをクローンする|git clone (リポジトリのURL)|
|クローン元レポジトリの最新状態を反映する|git pull|
|Pull RequestにIssueを紐付ける|git commit --allow-empty -m "resolve #?"|

## ブランチ操作

|内容|コマンド|補足|
|---|---|---|
|ブランチを作成|git branch (ブランチ名)|
|ブランチを確認|git branch|
|ブランチを切り替える|git branch (ブランチ名)|
|ブランチを作成し、作成したブランチに切り替える|git checkout -b (ブランチ名)|
|ブランチを削除|git branch -d (ブランチ名)|マージしていないコミットが存在しても削除する場合は -D|
|ブランチをマージする|git merge (マージするブランチ名)|
|ブランチ名を変更|git branch -m (古いブランチ名) (新しいブランチ名)|

## 取り消す操作

|内容|コマンド|補足|
|---|---|---|
|ステージに追加した変更を取り消す|git reset (ファイル名)|git reset で全ての変更を取り消す|
|過去のコミットに戻る|git checkout (コミットハッシュ)|git log でコミットハッシュを確認|
|過去のコミットを打ち消す|git revert (コミットハッシュ)|
|revertを打ち消す|git revert --abort|
|gitの管理をやめる|git -rf .git/|

## タグ

|内容|コマンド|
|---|---|
|タグを作成|git tag (タグ名)|
|タグにコメントをつける|git tag -a (タグ名) -m "コメント"|
|タグを確認|git tag|
|タグを削除|git tag -d (タグ名)|
|タグの詳細を表示|git show (タグ名)|

## その他
[.gitignoreを変更したのに反映されない場合の対処法](http://alice345.hatenablog.com/entry/2013/09/07/001519)

```
git rm -r --cashed .
git add .
git commit -m "gitignoreを反映させる"
```
CakePHP3でモデルのbeforeSaveを利用してidをインクリメントする


システムの仕様上、DBでidの値をオートインクリメントすることができない。

そんな時にCakePHP3でモデルの`beforeSave()`を利用してidをインクリメントさせる。


```php
public function beforeSave($event, $entity, $options) {
	$query = $this->_table->find();
	$ret = $query->select(['max_id' => $query->func()->max('id')])->first();
	if($entity->isNew()) {
		$entity->set('id', $ret['max_id'] +1);
	}
}
```

`$entity->isNew()` でレコードを追加する場合のみ動作するようにする。
OS X(Sierra)上にVitual Boxでubuntuのサーバを構築してethereumする

# virtual boxでubuntuのインストール
１：https://www.virtualbox.org/wiki/Downloads
ここでOSX用のdmgをDL

２：ubuntuのISOをDL
http://www.ubuntulinux.jp/download/ja-remix
今回は15.10にする。1.2GBあるので時間かかる。

３：VirtualBoxの作成とubuntuのインストール
http://inforati.jp/apple/mac-tips-techniques/windows-hints/how-to-install-linux-ubuntu-to-mac-virtualbox.html
ここを参考に起動する。最終的にisoを選ぶことになるので、それまでは詰まらずにいける。

４：ubuntuの起動
案内に従って実行。
途中にblk....error等が出たが、rebootするとうまくいったので、とりあえず無視。
deviceでtoolを有効にするのを忘れないように

## 参考 URL
http://inforati.jp/apple/mac-tips-techniques/windows-hints/how-to-install-virtualbox-and-use-windows-software-in-mac.html

## Ubuntuの操作の仕方
http://sicklylife.at-ninja.jp/memo/ubuntu_unity/index2.html

## node.jsについて
http://qiita.com/seibe/items/36cef7df85fe2cefa3ea
ubuntuにインストールする時には注意しないと古いバージョンになってしまうので、意識すること。
このページの通りにやればOK

#Ubuntu上にethereumのインストール
マニュアル通りにやればインストール可能。
ただしubuntuにgitがないというエラーがでるので、apt-get install gitをする必要がある。
バージョンは下記の通り。
node -v = v7.8.0
npm-v = 4.2.0
また、VirtualBoxのスペックのせいで、DAGができるのに時間がかかるが根気よく待つ（涙）
基本的にマニュアル通りやればOKだったが、PCのスペックは、最低でも、２スレッド＋メモリ２GBは必要。
１スレッドだとCPUが足りない。
【Rails】deviseを利用したflashメッセージの表示方法

# flashとは
とある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせ機能があると便利ですよね。

Railsでは、ログイン時に「ログインしました」と表示するなど、Viewで一時的なメッセージを表示するために**flash**という**ハッシュ形式のオブジェクト**が設定されています。

この**flash**を利用することで、次の画像上部に表示された「メッセージを投稿しました」のように**フラッシュメッセージ**を表示させることができます。

![pageshot of 'ChatSpace' @ 2017-05-02-1402'04.png](https://qiita-image-store.s3.amazonaws.com/0/178077/fb528897-d56e-3324-f619-b23e5057813b.png)

[参考：flash - リファレンス - - Railsドキュメント](http://railsdoc.com/references/flash)

それでは、より詳しい使い方を見ていきましょう。
※Viewはhaml記法での説明となります
※deviseの準備が完了した後の手順となります

# 具体的な使用例
````haml:views/layouts/_flash.html.haml
- flash.each do |key, value|
  = content_tag(:div, value, class: "flash flash__#{key}")
````
deviseを導入した状態でflashオブジェクトを使用すると、deviseに関する通知（ログイン・ログアウトなど）が発生した時のみ、keyとvalueのハッシュを生成してくれます。

flashには標準で　**notice**（動作成功時）と**alert**（動作失敗時）の2つのキーを生成してくれるため、両方に適用できるように**eachメソッド**を使ってkeyとvalueを取り出しています。

また、**content_tag**はHTMLタグを生成することができ、第一引数にタグ、第二引数に内容、第三引数にオプション（ classなど）を設定します。

今回、表示したいのはvalueなので、第２引数にvalueを設定しています。

また、classに**flash**と**flash__#{key}**の2つを設定することで、keyがnoticeの時とalertの時でscssの表示を変えることができます。

# SCSSの見本例
````scss:app/assets/stylesheets/modules/_flash.scss
.flash {
  color: $white;
  text-align: center;
  &__alert{
    background-color: red;
  }
  &__notice {
    background-color: $blue;
  }
}
````
注意点としては、classがflash__#{key}のみだとflashクラスに記述した内容（この場合はcolorとtext-align）が反映されません。よって、class: "flash flash__#{key}"と2つのクラスを設定しましょう。

# フラッシュメッセージの設置場所
````haml:views/layouts/application.haml
!!!
%html
  %head
   省略
  %body
  = render 'layouts/flash'
  = yield
````
最初の見本の画像のように、全ての要素の上に表示させるにはlayouts/application.hamlに記述すると良さそうです。

ただし、ここに記述すると修正時にややこしいので、私は部分テンプレート **_flash.haml** に切り出して、**renderメソッド**で呼び出すようにしました。

# deviseの日本語化
devise.ja.ymlをconfig/localesに設置します。いくつか見本があるようなので、その一つを紹介します。
[devise.ja.yml](https://github.com/Junsuke/miscellaneous)

さらに、これを読み込む設定をする必要があります。

````ruby:config/application.rb
module ChatSpace
  class Application < Rails::Application
    config.i18n.default_locale = :ja
  end
end
````

以上でdeviseをフラッシュメッセージを表示することできます。

# flashメッセージの編集
コントローラーでflashを設定することで、任意の動作の後にフラッシュメッセージを表示させることができます。

例えば、グループを作成成功時と失敗時にフラッシュメッセージを表示します。

````ruby:groups_controller.rb
  def create
    @group = Group.new(group_params)
    if @group.save
      redirect_to root_path, notice: "グループを作成しました"
    else
      flash.now[:alert] = "グループ名を入力してください"
      render :new
    end
  end
````
前提として、groupモデルで `validates :name, presence: true` のように**バリデーション**を記述しているため、nameがない場合は保存できないようになっています。

よって、`@group`が「保存できた場合」と「保存できなかった場合」で条件分岐し、flashメッセージを表示するようにしました。

`flash[:notice] = "表示したい内容"` のように記述することで、flashオブジェクトのnoticeキーのバリューを設定できます。

flashとflash.nowの違いは下記をご確認ください。基本的にはflash.nowを使えば良さそうです。

[［rails］flashとflash.nowの違いの件](http://l-light-note.hatenablog.com/entry/2014/09/25/205211)

# 最後に
筆者の知識不足による間違いがありましたら、ご指摘をいただけると助かります。
BEMでの書き方

# BEM とは
html のクラスやIDの命名規則の１つです。
コードが扱いやすくなります。

この記事では、MindBEMdingを少し変えたものを紹介します。
(相違点：Element の前のアンダースコアが1つだけです。)
haml で表記します。

# 書き方

クラス・IDを次のように名づけます。

```
block_element--modifier
```

区分名が２語以上の場合は ハイフン1つ - でつなげます。


```
.side-btn
```

# 区分け
BEM では、ページの構成要素を、block、element、modifier に分けます。

## block
必然的に、または機能的に独立した区分のことです。
block の中に block を入れてもOKです。

```
.header .card  #sidebar  %table  %ul
```
```
.sidebar
  %ul
```

## element
それ以上細分化できない区分のことです。
block の中にあります。
element の前にはアンダースコア _ をつけます。（タグはそのままです。）

```
.header_tab .card_title .sidebar_submit  %td %li
```

## modifier
特定の block、elementを修飾するクラス、IDのことです。
modifier の接尾語の前にハイフン2個 -- をつけます。

```
.header_tab--gray .card--gray
```

# 補足
・タグの下に element を付けるとき
・タグに modifier を付けるとき
は、.gray のように名づけるか、タグの上にクラスを設けて、.table--gray のようにします。

```
%table.gray
```
```
.table
  %table.table--gray
```

# リンク
BEM 公式サイト > Key concepts
https://en.bem.info/methodology/key-concepts/#block
「値」と「参照」

値渡しと参照渡しについて個人的にまとめたメモ。

変数の値か、その変数が格納されているメモリ上のアドレスかを区別するために「値渡し」と「参照渡し」と言ってるのに、
『メモリ上のアドレスも数字、すなわち値じゃん！だから参照じゃなくて、値を渡してるんだ！実際は、参照渡しじゃなくて値渡しだ！』
という意見を見たので、これを書いています。

# 値と参照の違い

<img width="576" alt="77c472db39c55ac68f950d439d80e2f4.png" src="https://qiita-image-store.s3.amazonaws.com/0/157051/ae674fe2-d2a2-fa8c-2484-83c0c08ccde6.png">

上記のエクセルの例で言うと、「address」が値で「E2」が参照にあたる。
「address」も「E2」も**値**であることに変わりないが、それを両方共「値」と表現してしまったら、箱の中身を指しているのか箱の場所を指しているのか分からなくなる。

# 値に参照が入ることもある

ややこしいことに箱の中身に箱の場所を指定する値(すなわち「参照」)が入っているパターンがある。
そういう意味では参照渡しも値渡しである、という意見も正しくはある。

<img width="587" alt="84fba0cadea7ae5c6d16e5d5fa0be96c.png" src="https://qiita-image-store.s3.amazonaws.com/0/157051/4777a09b-b609-260c-8224-947542ff66cd.png">

上記の状態の時、「E2」の値は「B2」だが
その「B2」を値でななく参照として解釈すると
「E2」から「2017年04月19日」という値にたどり着くことができる。
この時、「E2」の値は**参照**となる。

# 上記をC++で表現

```c++
#include <iostream>
using namespace std;

int main()
{
  string b2 = "2017年04月19日";
  string& e2 = b2;
  cout << e2 << endl;
  return 0;
}
```

変数`e2`は変数`b2`の**参照**を格納するための変数であると宣言している。
よって、`e2`を出力しているが、出力結果は`b2`の中身である「2017年04月19日」となる。

[続き](http://qiita.com/roark/items/0312b6ea17a8e751eb35)
React Native Cannot read property 'getScrollableNode' of undefined


![IMG_0914.PNG](https://qiita-image-store.s3.amazonaws.com/0/49022/bb000d46-4d98-4b6e-8b31-a17bb086ccab.png "IMG_0914.PNG")


このエラーメッセージでググってきた君。  

君に伝えたいことがある。

まずは落ち着くんだ。  

心配はいらない。  

自分のコードをよく見てみるんだ。  

そう、あせってはいけないよ。  

その変数には本当に君が期待するオブジェクトが入っているかい？  

`null`や`undefined`に対してプロパティを参照してないかい？

そのモジュールは正しく`import`されているかい？

タイポはしていないかい？

今一度、よーく確認するんだ。
Docker for WindowsのShared Drives設定（Kaspersky Firewall設定）

Docker for WindowsでShared Drivesを有効化しようとしたとき、Niftyの常時安全セキュリティ24（カスペルスキーのエンジン）のファイヤーウォール設定が邪魔して設定できなかったのを対処したときのメモ。

# Shared Drives設定した時のエラーメッセージ
Docker for Windowsインストール後、ホスト側のディスクを共有しようと、Shared Drives設定を行うと、「Firewall detected」って怒られ、設定できない。

![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/100712/b0a773f5-59e9-5f4e-3711-7b6a3677f5a0.jpeg)

# Kaspersky Firewall設定方法
上記ドキュメントでは、ポート445をオープンするように記載があるが、カスペルスキーのパケットルールの設定画面で設定したけど、やり方がマズいのかできなかった。
結局以下の手順でクリアした。

+ Kasperskyのメイン画面を立ち上げて、左下の「設定」をクリックして設定画面を開く
![2017-05-02_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/d8780eb1-1ce5-3ede-87ad-9f8e49cea171.jpeg)


+ 設定画面で「プロテクション」→「ファイヤーウォール」をクリックしてファイヤーウォールの設定画面を開く
![2017-05-02 (2)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/9be00576-ef70-f4c7-fe83-3bd049614d4f.jpeg)

+ ファイヤーウォールの設定画面で「ネットワーク」をクリックしてネットワークのプロパティ画面を開く
![2017-05-02 (3)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/64fb794c-b2da-a4dd-20cb-986ea86af23d.jpeg)

+ Hyper-V Virtual Ethernet Adapterの「10.0.75.1/24 (vEthernet(DockerNAT))」のネットワーク種別が「パブリックネットワーク」となっているが、ここを「許可するネットワーク」に変更する
![2017-05-02 (11)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/870c5f6d-fa1a-9f32-ac7d-16c693d859fb.jpeg)


+ 10.0.75.1/24 (vEthernet(DockerNAT))をダブルクリックすると編集画面が開くので「パブリックネットワーク」から「許可するネットワーク」に変更して保存する

![2017-05-02 (8)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/9081774a-d7bb-e156-7d7a-9eefa6adb6b4.jpeg)
![2017-05-02 (9)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/9d2266a4-281a-6d65-daad-2439d9c6e0c0.jpeg)

以上でファイヤーウォールの設定は完了！
尚、DockerのShared Drives設定で以下のようなファイルシステム認証画面が出た場合は、ホストPCのユーザ名（*****@outlook.com）とパスワードを入力して認証すればＯＫ！
![2017-05-02 (12)_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/100712/ff033ce3-f41f-2602-91c4-b4c39b22942d.jpeg)

# マウントできるか試してみる
「-v」オプションを使って、ホストの「E:\temp」を「/data」にマウントする。

+ マウント＆コンテナ実行

```
PS C:\Users\spiderx> dir e:


    ディレクトリ: E:\


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2017/05/01     10:23                temp

PS C:\Users\spiderx> docker run -v E:/temp:/data -t -i ubuntu bash
```
+ 読み込みテスト
Windows10で書き込んだテキストファイルが読めるか確認

```
root@691eb073c690:/# ls /data
test01.txt
root@691eb073c690:/# cat /data/test01.txt
This is test.


root@691eb073c690:/#
```
+ 書き込みテスト
ファイルを作成＆書き込めるか確認

```
root@691eb073c690:/# echo "WRITE WRITE" >> /data/test02.txt
root@691eb073c690:/# ls /data
test01.txt  test02.txt
root@691eb073c690:/# ls -al /data
total 5
drwxr-xr-x 2 root root    0 May  2 06:10 .
drwxr-xr-x 1 root root 4096 May  2 06:09 ..
-rwxr-xr-x 1 root root   19 May  2 05:57 test01.txt
-rwxr-xr-x 1 root root   12 May  2 06:10 test02.txt
root@691eb073c690:/#
```
以上
move_baseでゴールについたことを検知する

#目的
　ROSのmove_base(Navigation Stack)でゴールについたことを検出する。
　ゴールについたことを検出して、電源を切る、UIを切り替える、音声を発する、などの機能を持たせたいときに必要となる。

#ゴールの検出
 move_baseは、"/move_base/status"を常にpublishしている。
"/move_base/status"をsubscribeすれば良い。
"/move_base/status"は、GoalStatusArray型で定義されており、
最新の状況を確認するには、配列の先頭を取り出し、GoalStatus型で読み込む。
GoalStatusの値がどういう状態を示すかは、下記のROSのページを参照のこと。

参考資料：
http://docs.ros.org/jade/api/actionlib_msgs/html/msg/GoalStatus.html

#ソースコード
下記のように、"/move_base/status"をsubscribeして、GoalStatusの値に応じて条件分岐する。
cmakeで"move_base_msgs actionlib"を含めてコンパイルする。


main.cpp

```c
#include <ros/ros.h>

#include <move_base_msgs/MoveBaseAction.h>
#include <actionlib_msgs/GoalStatusArray.h>
#include <actionlib/client/simple_action_client.h>

void navStatusCallBack(const actionlib_msgs::GoalStatusArray::ConstPtr &status)
{
	int status_id = 0;
	//uint8 PENDING         = 0  
	//uint8 ACTIVE          = 1 
	//uint8 PREEMPTED       = 2
	//uint8 SUCCEEDED       = 3
	//uint8 ABORTED         = 4
	//uint8 REJECTED        = 5
	//uint8 PREEMPTING      = 6
	//uint8 RECALLING       = 7
	//uint8 RECALLED        = 8
	//uint8 LOST            = 9

	if (!status->status_list.empty()){
	actionlib_msgs::GoalStatus goalStatus = status->status_list[0];
	status_id = goalStatus.status;
	}

	if(status_id==1){
	//移動中

	}

	if((status_id==3)||(status_id==0)){
	//ゴールに到達・もしくはゴールに到達して待機中。

	}

}

int main(int argc, char **argv)
{
    ros::init(argc, argv, "move_base_goal_state");

    ros::NodeHandle nh;
    ros::Subscriber switch_sub;
    
    ros::Subscriber move_base_status_sub;
    move_base_status_sub = nh.subscribe<actionlib_msgs::GoalStatusArray>("/move_base/status", 10, &navStatusCallBack);
    ros::spin();

    return 0;
}
```
fork execしたプロセスの標準出力をリダイレクトする

外部プロセスを作るには`system`関数を使ったり、`fork`&`exec`したりするが、ここでは後者の方法で外部プロセスを起動したときに標準出力をリダイレクトする方法を書く。

ほぼこのページの和訳
http://stackoverflow.com/questions/2605130/redirecting-exec-output-to-a-buffer-or-file

# 手順の概要

UNIX系のシステムでは、file descriptorの1,2が標準出力、標準エラー出力に対応する。

`open`関数を使ってファイルを開き、そのファイルディスクリプタを`dup2`関数で複製する。
http://man7.org/linux/man-pages/man2/open.2.html
https://linuxjm.osdn.jp/html/LDP_man-pages/man2/dup.2.html

# サンプル

```cpp
#include <iostream>
#include <cstdlib>
#include <ctime>
#include <unistd.h>
#include <sys/wait.h>
#include <sys/types.h>
#include <fcntl.h>
#include <signal.h>
#include <vector>
#include <string>

int my_system(std::vector<std::string> args) {
  pid_t pid;

  if ((pid = fork()) == 0) {
    char** arg = NULL;
    arg = new char*[args.size() + 1 ];
    for( size_t i=0; i<args.size(); i++ ) {
      arg[i] = (char*) args[i].c_str();
    }
    arg[ args.size() ] = NULL;

    int fd_out = open("_stdout", O_RDWR | O_CREAT, S_IRUSR | S_IWUSR);
    int fd_err = open("_stderr", O_RDWR | O_CREAT, S_IRUSR | S_IWUSR);
    // read only, create a file if not exist, read permission, write permission
    dup2( fd_out, 1 );
    dup2( fd_err, 2 );
    close( fd_out );
    close( fd_err );

    int rc = execvp( arg[0], (char*const*) arg );
    std::cerr << "failed to execute the command. rc : " << rc << std::endl;
    exit(-1);
  }
  else if (pid > 0) {
    std::cout << "pid: " << pid << std::endl;
    int status = 0;
    int ret = waitpid(pid, &status, 0);

    if( WIFEXITED(status) ) {
      std::cerr << "exited with rc : " << WEXITSTATUS(status) << std::endl;
      return WEXITSTATUS(status);
    }
    else if( WIFSIGNALED(status) ) {
      std::cerr << "signaled by signal" << WTERMSIG(status) << std::endl;
      return -1;
    }
    else {
      std::cerr << "other" << std::endl;
      return -1;
    }
  }
  else {
    std::cerr << "failed to fork" << std::endl;
    return -1;
  }
}

int main(int argc, char *argv[])
{
  std::vector<std::string> args;
  args.push_back("/usr/bin/ruby");
  args.push_back("-e");
  args.push_back("puts 'hello'; $stderr.puts 'world'");

  int rc = my_system( args );

  return 0;
}
```

- open関数の第二引数
    - `O_RDWR`は読み書き可能なモードでファイルを開く
    - `O_CREAT`はファイルが存在しなかったら作成する。
    - `S_IRUSR`, `S_IWUSR` はファイルのpermissionを0600にする。
- dup2でファイルのディスクリプタを`1`,`2`に複製した後は、`close`関数を呼んで閉じてしまって良い。（なんで閉じてもよいのかはわからない）
    - `1`,`2`がstdout, stderrのファイルディスクリプタ
プロセスにアタッチ

#プロセスにアタッチとは
プロセスにアタッチを使うことで、デバッグ中のDLLを実行中のプロセスに取りつかせ、DLLのデバッグを行えるようになる。DLLは単独で起動できないため、プロセスにアタッチを使うことでデバッグが容易になる。

#やり方
1. DLLのソリューションを開く。
2. DLLを呼び出すexeを実行する。
3. Visual Studioの[デバッグ]メニューの「プロセスにアタッチ」を選択する。
4. 呼び出すexeを選択し、アタッチを選択する。
5. DLLのブレークポイントでプログラムを停止できるようになる。

#リンク
- [クラスライブラリ(DLL)プロジェクトのデバッグ方法](http://c-loft.com/blog/?p=1793)
Git クライアント各種 (2017/05/02現在) > Shift_JISのコードの差分表示が文字化けするかどうか

```txt:動作環境
Windows 7 Pro (32bit)
```

Shift_JISのコードについてgit管理しているとする。
様々なGitクライアントで、log確認時に差分のShift_JISコードがきちんと見えるかどうか。

https://www.slant.co/topics/2089/~git-clients-for-windows
のリスト掲載のクライアントソフトをいくつか試した。

インストール直後の状態での結果は以下。

- SmartGit v17 : 見える
- Git Kraken v2.4.0 : 文字化けする
- SourceTree v1.9.10.0 : 見える
- ~~Git GUI~~ Git for Windows v2.12.2.2 : 見える
- TortoiseGit v2.4.0 : 見える
- Git Extensions : 文字化けする

文字化けするクライアントでも設定次第で文字化けを解消できるかは知らない。
deep_cloneableを使う

# `deep_cloneable`で何ができる？

モデル単体ではなく、モデルに関連づいたモデルも含めてクローンしてくれます。
使い方は[公式](https://github.com/moiristo/deep_cloneable)に書いてあります。

# 動作確認バージョン

```
rails (5.0.0.1)
deep_cloneable (2.2.2)
```

# モデル定義

```ruby
class Form < ApplicationRecord
  has_many :parts
end

class Part < ApplicationRecord
  belongs_to :form
  has_many :options
  has_many :validations
end

class Option < ApplicationRecord
  belongs_to :part
end

class Validation < ApplicationRecord
  belongs_to :part
end
```

```
Form -- Part  -+- Option
               |
               +- Validation
```

# 動作確認

```ruby
form = Form.find(1)

dup_form = form.dup
cloned_form = form.deep_clone include: { parts: [:options, :validations] }

p dup_form
p cloned_form

p dup_form.form_parts
p cloned_form.form_parts


p cloned_form.form_parts.first.form_options
p cloned_form.form_parts.first.form_validations

cloned_form.save
p cloned_form
p cloned_form.form_parts
p cloned_form.form_parts.first.form_options
p cloned_form.form_parts.first.form_validations
```

```:output
#<Form id: nil, …, created_at: nil, updated_at: nil>
#<Form id: nil, …, created_at: nil, updated_at: nil>

#<ActiveRecord::Associations::CollectionProxy []>
#<ActiveRecord::Associations::CollectionProxy [#<Part id: nil, form_id: nil, …, created_at: nil, updated_at: nil>, #<Part id: nil, form_id: nil, …, created_at: nil, updated_at: nil>, #<Part id: nil, form_id: nil, …, created_at: nil, updated_at: nil>]>

#<ActiveRecord::Associations::CollectionProxy [#<Option id: nil, part_id: nil, …, created_at: nil, updated_at: nil>, #<Option id: nil, part_id: nil, …, created_at: nil, updated_at: nil>]>
#<ActiveRecord::Associations::CollectionProxy [#<Validation id: nil, part_id: nil, …, created_at: nil, updated_at: nil>]>

#<Form id: 5, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">
#<ActiveRecord::Associations::CollectionProxy [#<Part id: 17, form_id: 5, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">, #<Part id: 18, form_id: 5, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">, #<Part id: 19, form_id: 5, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">]>
#<ActiveRecord::Associations::CollectionProxy [#<Option id: 25, part_id: 17, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">, #<Option id: 26, part_id: 17, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">]>
#<ActiveRecord::Associations::CollectionProxy [#<Validation id: 4, part_id: 17, …, created_at: "2017-05-02 05:52:43", updated_at: "2017-05-02 05:52:43">]>
```
SierraにDocker for Macをインストールしてみた

# SierraにDocker for Macをインストールしてみたけど、間違っているだろうか？

MacでPHP+MySQLな開発環境を構築したくて、いまどきな方法で環境構築しようと、Dockerに手を出したサーバーダンジョンルーキーのお話。
Docker for Macは、Docker Community Edition for Mac(Docker CE for Mac)に名称が変更されたみたいですね。。。

# まずはインストール
## 01) Docker for Macをダウンロードする
https://www.docker.com/docker-mac
[Download from Docker Store]ボタンを押してダウンロードファイルのあるページへ遷移する。

https://store.docker.com/editions/community/docker-ce-desktop-mac?tab=description
画面右のGet Docker Community Edition for Mac
から[Get Docker]ボタンを押して、Docker.dmgをダウンロードする。

## 02) Docker Hubにアカウントを作成する
https://hub.docker.com/

アカウントID、メールドレス、パスワードを登録する。
登録したメールアドレスに確認メールが届くので、届いたメールからアカウントの認証をする。

## 03) Docker for Macをインストールする
ダウンロードしたDocker.dmgをダブルクリックする。
ウインドウが開いたら、Docker.appをApplicationsフォルダに、ドラッグ＆ドロップする。

## 04) Dockerを起動する
ApplicationsフォルダのDocker.appをダブルクリックする。
メニューバーにDockerのアイコンが追加される。

## 05) Dockerコマンドを試す１
Terminal.appで、次のコマンドを入力する。

docker version

ClientとServerのバージョンが確認できます。
17.03.1-ceでした。

## 06) Dockerコマンドを試す２
Terminal.appで、次のコマンドを入力する。

docker run hello-world

hello-worldというイメージがあるかどうかを確認して、なければダウンロードしてきます。
ダウンロードが完了すると、説明が表示されます。

※調子にのって、説明の中にあったコマンド
docker run -it ubuntu bash
を試してしまい、ubuntu bashが立ち上がってしまいましたが、これどうやって終わらせるんだろうｗ

[control]キーを押した状態で、[P]キー[Q]キーの順で押すと、コンテナから抜け出せます。

## 07) Dockerコマンドを試す３
Terminal.appで、次のコマンドを入力する。

docker ps

先ほど抜け出したubuntu "bash"が稼働状態であることがわかります。


# まとめ
## SierraではDocker for Macはインストールできないんじゃなかった？
修正されているようですね。何事もなく、インストールできてよかった。。。

## Docker Hubのアカウントは要らなかったのでは？
いやいや、これから公開されてるイメージから、コンテナ作って、カスタマイズして、自分用のイメージを作って保存したりできるみたいなので、取得しておいて損はないはず。。。というか、よくわかってない、ごめんなさい。。。
Talend Open Studioでプロジェクトをインポートしたときのエラー解決策

Talend Open Studioで新規にプロジェクトをインポートしたとき以下のエラーが発生した。

起動時：

```
"Generation Engine Initialization in progress..." 中に内部エラーが発生しました。 java.lang.NullPointerException talend
```

ジョブ実行時：

```
[org.eclipse.emf.codegen.jet.JETException: InvocationTargetException
```

別の環境ではこのプロジェクトもジョブも問題なく動いていた。
海外のサイト（掲示板？）で調べたところ、「JavaのPATHがおかしくなっている。Talendの再インストールしたら解決した」との意見があり、従ってみることに。

→無事解決しました。
Beckyメール移行メモ

Beckyの移行が失敗するので
メモ失礼します。

まず
拡張子bmfというファイルが実データなので
これをちゃんと移行しなければならない。

元PCで.bmfがちゃんとあるか見て
それでデータフォルダをコピーする予定。
[HTML5]カスタムデータ属性の使い方(Ajax連携)

"data-" で始まるカスタムデータ属性。存在は知っていても具体的に何に使うの？ということで、
例えば、外部API等からAjaxで取ってきた値と組み合わせて使えます。

# 表示対象のデータを表示する

```html:HTMLファイル
<input type="hidden" name="item_id" value="1" data-description="あああ" class="hidden_item" /> 
<input type="hidden" name="item_id" value="2" data-description="いいい" class="hidden_item" /> 

<div id="description" />
```

```json:getShowItemId(API)が返す値
{
  "_comment": "表示対象のIDです",
  "item_id": "2"
}
```

```js:JSファイル
$(function(){
  // hiddenに隠しておいた値を取る
  var items = [];
  $.each($('.hidden_item'), function() {
    var itemId = $(this).val();
    items[itemId] = $(this).data("description");
  });

  $.ajax({
    url: 'https://' + window.location.hostname + '/getShowItemId',
    dataType: 'json',
    cache: false,
    timeout: 5000,
    success: function(response) {
      var description = items[response.item_id];
      $('#description').append(description);
    },
    error: function() {
      console.log('通信エラー');
    },
  });
});
```
ブラウザには**いいい**が表示される。
シェルスクリプト(bash)の「 [ ] 」と「 [[ ]] 」の違い

[]では予期せぬ変数展開でエラーが発生する場合があるので[[ ]]を使う。
※本来は使い分けるべきなのだろうが、現状[[ ]]のみでこと足りている

エラーの例：

```bash
if [ `echo "Count aaaa " | grep Count` ] ; then
    echo 'OK'
fi

./test.sh: line 4: [: Count: unary operator expected
```

```bash
if [ `echo "Count aaaa , bbb" | grep Count` ] ; then
    echo 'OK'
fi

./test.sh: line 4: [: 引数が多すぎます
```

[[ ]]だと問題ない：

```bash
if [[ `echo "Count aaaa " | grep Count` ]] ; then
    echo 'OK'
fi

OK
```

```bash
if [[ `echo "Count aaaa , bbb" | grep Count` ]] ; then
    echo 'OK'
fi

OK
```

[]でも問題ない場合もある

```bash
if [ `echo "Count" | grep Count` ] ; then
    echo 'OK'
fi

OK
```

以下のコードでファイルの中身によってエラーが出たり出なかったりで地味にハマりました。

```bash
cat test.txt | while read LINE;do
  if [ `echo $LINE | grep Count` ] ; then
    echo 'OK'
  fi
done
```

※以下のように正規表現を使う場合、[[ ]]を使うことはよく知られています

```bash
if [[ $name =~ hogehoge ]] ; then
  echo match
fi
```
N + 1問題の検出とその対応(検出編)

##N+1問題
N+1 問題とは、Tree 状の情報を DB から読み出す際、全レコードの取得に一つ＋各レコード分だけ SQL を発行してしまう問題のこと
余分なクエリを減らすために今回はN+1問題の検出とその対応について書いてく

[N + 1問題の検出とその対応(対応編)](http://qiita.com/hnts/items/d3dda0c420b6aae975a1)　対応編はこちらから
##bullet
まずN+1問題を検出するgemを紹介する
このbulletというgemはアクセスしたページでN+1問題が検出された時にポップアップやログを残してくれる。

```ruby:Gemfile
gem 'bullet'
```
Gemfileに書いたらbundle installしてください

```ruby:config/environments/development.rb 
config.after_initialize do
    Bullet.enable = true # bullet を有効にする
    Bullet.alert         = true # ブラウザのJavaScriptアラート
    Bullet.bullet_logger = false # Rails.root/log/bullet.log
    Bullet.console       = false # ブラウザの console.log の出力先
    Bullet.rails_logger = false # Railsのログ
    Bullet.add_footer   = false # 画面の下部に表示
  end
```
config/environments/development.rb に上記のような設定を書きます。
今回はjavascriptのアラートだけ有効にしてみました。

次にN+1問題が発生するように簡単なものを記述します。

```ruby:articles_controller.rb
class ArticlesController < ApplicationController
  def index
    @articles = Article.all
  end
end
```

```index.html.haml
.row
  .span16
    %table.bordered-table.zebra-striped
      %thead
        %tr
          %th id
          %th userのメールアドレス
          %th title
      %tbody
        - @articles.each do |ar|
          %tr
            %td= ar.id
            %td= ar.user.email
            %td= ar.title

```
この場合Viewでarticleからuserを呼び出すときに発生します。
実際にこのページにアクセスしてみると、、、

<img width="647" alt="スクリーンショット 2017-05-02 13.56.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/146799/8336c74e-ae59-00f8-0d0d-107dc5b91468.png">

無事に検出されました。

##感想
bulletを使ってみると意外にN+1問題が発生してるところがあったりした

次回はN+1問題の対応編を書いていきたいと思う。
windowsでTensorFlow その7

#概要
windowsのTensorFlowの環境で、OpenAiやってみた。
手でやってみた。

#写真
![ee.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/bb60509c-957c-cdb8-6001-3e79757e3a35.jpeg)


#環境
windows 7 sp1 64bit
anaconda3
tensorflow 1.0
pyqt5

#インストール

```
pip install gym
```

#サンプルコード

```
from __future__ import print_function
import sys, gym

env = gym.make('Acrobot-v1' if len(sys.argv) < 2 else sys.argv[1])
if not hasattr(env.action_space, 'n'):
	raise Exception('Keyboard agent only supports discrete action spaces')
ACTIONS = env.action_space.n
ROLLOUT_TIME = 1000
SKIP_CONTROL = 0
human_agent_action = 0
human_wants_restart = False
human_sets_pause = False

def key_press(key, mod):
	global human_agent_action, human_wants_restart, human_sets_pause
	if key == 0xff0d:
		human_wants_restart = True
	if key == 32:
		human_sets_pause = not human_sets_pause
	a = int(key - ord('0'))
	if a <= 0 or a >= ACTIONS:
		return
	human_agent_action = a

def key_release(key, mod):
	global human_agent_action
	a = int(key - ord('0'))
	if a <= 0 or a >= ACTIONS:
		return
	if human_agent_action == a:
		human_agent_action = 0
env.render()
env.unwrapped.viewer.window.on_key_press = key_press
env.unwrapped.viewer.window.on_key_release = key_release

def rollout(env):
	global human_agent_action, human_wants_restart, human_sets_pause
	human_wants_restart = False
	obser = env.reset()
	skip = 0
	for t in range(ROLLOUT_TIME):
		if not skip:
			a = human_agent_action
			skip = SKIP_CONTROL
		else:
			skip -= 1
		obser, r, done, info = env.step(a)
		env.render()
		if done:
			break
		if human_wants_restart:
			break
		while human_sets_pause:
			env.render()
			import time
			time.sleep(0.1)
print ("ACTIONS={}".format(ACTIONS))
print ("Press keys 1 2 3 ... to take actions 1 2 3 ...")
print ("No keys pressed is taking action 0")

while 1:
	rollout(env)
```
Media Queryを使わずCSS grid Layoutをレスポンシブ対応

`grid`の使い方について書こうと思っていたんですが、気付いたら`grid`についての投稿がめちゃくちゃ増えたので今更書いてもな…
という感じになってしまったので、この記事では`grid layout`を`Media Query`を使わずにレスポンシブ対応させる使い方を抜粋して書きたいと思います。

レスポンシブ対応させるには以下のどちらかを使います。

````css:css
repeat(auto-fit, 幅)
repeat(auto-fill, 幅)
````
動作に違いがあるので一つ一つ見ていきましょう。

````html:html
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>
````

````css:css(共通部分)
.container {
    display: grid;
    width: 100%;
    grid-auto-rows: 100px;
}
.item {
    background: lightblue;
    padding: 20px;
    font-size: 30px;
    color: white;
}
.item:nth-child(odd) {
    background: orange;
}
````

## auto-fitの場合


````css:auto-fitの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fit, 100px);
}
````

![fit_nocenter.gif](https://qiita-image-store.s3.amazonaws.com/0/105520/c4db8cef-c312-0488-f6b3-7222bc1d7384.gif)


コンテンツ幅に合わせてグリッドセルが移動しています。


## auto-fillの場合

````css:auto-fillの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fill, 100px);
}
````

![fill_nocenter.gif](https://qiita-image-store.s3.amazonaws.com/0/105520/84cd73d7-a52b-0d43-9f0e-20990e527a3c.gif)


こちらも同じくコンテンツ幅に合わせてグリッドセルが移動しています。

##auto-fillとauto-fitの違い

`auto-fill`はアイテムの配置されていない部分にも、アイテムの幅を確保しています。
どういうことかと言うと、例えば`.container`全体を<b>センタリング</b>させたい場合に動作に違いが生じます。


## auto-fitの場合

````css:auto-fitの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fit, 100px);
    justify-content: center;
}
````

![fit_center.gif](https://qiita-image-store.s3.amazonaws.com/0/105520/0749b025-68d2-a44f-1dda-5494f20aa621.gif)


始めからcontainer全体がセンタリングされています。

## auto-fillの場合

````css:auto-fillの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fill, 100px);
    justify-content: center;
}
````

![fill_center.gif](https://qiita-image-store.s3.amazonaws.com/0/105520/88b116e7-25fd-8e21-4d96-061ad19f3338.gif)


`auto-fill`の場合、途中からセンタリングされているように見えます。
しかし、実際には表示されたときからセンタリング表示されています。

## auto-fillはアイテムの配置されていない部分にも、アイテムの幅を確保している

下の画像のように、アイテムが配置されていない箇所にも、<b>縦横100pxのアイテムが配置可能な限り配置されていると仮定した挙動</b>をします。

![3358db406a4f96e2ca3b62b73f0f5b09.png](https://qiita-image-store.s3.amazonaws.com/0/105520/96c3e40d-e89c-9a2a-49ec-c6174ae0718e.png)



`auto-fit`はこのスペースには何も配置しません。

こう見るとあえて`auto-fill`を使う場面はあるのか…？と疑問になりますが、きっと意図あるんでしょうね。

### 基本的な使い方について
この辺りの記事がとてもわかりやすいです。

<a href="http://qiita.com/kura07/items/e633b35e33e43240d363">CSS Grid Layout を極める！（基礎編）</a>
<a href="http://qiita.com/clockmaker/items/2a6ba69ef6e452844adf">CSS Grid Layoutをガッツリ使った所感
</a>
PCL_ROSをMakeFileでコンパイルする


##目的
UbuntuでPCLをコンパイルする場合、CMakeLists.txtを書いてCMAKEでMakefileを生成する必要がある。既存のMakefileでコンパイルしているC++ソースにPCLを組み込む場合、CMAKEを使うことがネックとなる場合がある。
ROSをインストールすることで、ROSからPCLを呼び出すPCL_ROSが使用できる。ROSはMakeFileでコンパイルすることができる機能がある。

##1.UbuntuにROS・PCL_ROSをインストールする。
下記のコマンドでROSをインストールする。ROSをインストールすると、PCL_ROS(PCLの機能をROSから呼び出すライブラリ)が含まれる。

```
sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list'
sudo apt-key adv --keyserver hkp://pool.sks-keyservers.net --recv-key 0xB01FA116
sudo apt-get update
sudo apt-get install ros-indigo-desktop-full`
```

参考サイト:
  http://wiki.ros.org/ja/

##2.PCL_ROSをMakefileでコンパイルする。
 ROSもDefaultではCmakeでコンパイルするが、pkg-configをつかって、Makefileでコンパイルすることができる。
 同じフォルダに、main.cppとMakefileを作成する。サンプルとして、ランダムな点群を表示するサンプルを作成する。
 makeコマンドでコンパイルができる。
>make

main.cpp

```c
#include <iostream>  
#include <pcl/io/pcd_io.h>  
#include <pcl/point_types.h>  
#include <pcl/visualization/cloud_viewer.h> 
  
int  main (int argc, char** argv)  
{  
  pcl::PointCloud<pcl::PointXYZ> cloud;  
    
  cloud.width    = 100;  
  cloud.height   = 100;  
  cloud.is_dense = false;  
  cloud.points.resize (cloud.width * cloud.height);  
  
  for (size_t i = 0; i < cloud.points.size (); ++i)  
  {  
    cloud.points[i].x = 4.0 * rand () / (RAND_MAX + 1.0);  
    cloud.points[i].y = 4.0 * rand () / (RAND_MAX + 1.0);  
    cloud.points[i].z = 4.0 * rand () / (RAND_MAX + 1.0);  
  }  

  pcl::visualization::CloudViewer viewer ("Simple Cloud Viewer");  
  viewer.showCloud (cloud.makeShared());  
  while (!viewer.wasStopped ()) {  
  }  
  
  return (0);  
} 
```
Makefile

```c
#############################################################################
# Makefile for building: ROS_module
#############################################################################

CXX      = g++
LINK     = g++
CXXFLAGS = `pkg-config --cflags roscpp pcl_conversions pcl_ros` -W 
INCPATH  = 
LIBS     = $(SUBLIBS) $(ros_libs_nocolon) 
ros_libs = $(shell pkg-config --libs roscpp pcl_conversions pcl_ros)
ros_libs_nocolon = $(subst -l:,,$(ros_libs))

####### Files
HEADERS = 
SOURCES = main.cpp 
OBJECTS = main.o 
TARGET   = pcl_sample

first: all
####### Implicit rules
.SUFFIXES:.cpp

.cpp.o:
	$(CXX) -c $(CXXFLAGS) $(INCPATH) -o $@ $< 


all: Makefile $(TARGET)

$(TARGET): $(UICDECLS) $(OBJECTS) $(OBJMOC) 
	$(LINK) $(LFLAGS) -o $(TARGET) $(OBJECTS) $(OBJMOC) $(LIBS) 

clean:
	rm -f $(OBJECTS) $(TARGET)

```

https://github.com/nnn112358/pcl_ros-sample

##3.コンパイルしたバイナリを実行する。
下記の用な画面が出ればOK。

>./pcl_sample

![Screenshot from 2017-05-02 11:02:04.png](https://qiita-image-store.s3.amazonaws.com/0/73020/28a261f0-9d0f-cfcb-ec0c-00a54d70fbb8.png)


---------------
参考サイト:
  https://github.com/gerkey/ros1_external_use
同じ名前のコンポジションが無いか調べ、無ければコンポジションを作成する

#やりたい事
指定した名前のコンポジションを作成したい。
その為にアイテム内のコンポ名を調べ重複していないか調べ、無ければコンポジションを作成する。
※AEの仕様では同じコンプ名であってもコンポジションは作成は出来ます。

#コード

```js
function creComp(){
    var compName="Lyric";
        for(var i=1;i<=app.project.numItems;i++){
            if ((app.project.item(i) instanceof CompItem)&&(app.project.item(i).name === compName)){
            var comp_here=true;
             if (comp_here) break;
            }
        }
    if (comp_here){
        alert("既にLyricコンポあります")
        }else{
        var creComp=app.project.items.addComp(compName,1920,1080,1.0,600,29.97)//コンポジションを作成
    }
}

creComp()
```
実行すると
![名称未設定-1_03.jpg](https://qiita-image-store.s3.amazonaws.com/0/178061/2793b6a0-174d-30cb-b380-83edc4ca6554.jpeg)

Lyricコンポがある状態で実行すると
アラートが表示します。
![003.JPG](https://qiita-image-store.s3.amazonaws.com/0/178061/9dec34ca-8167-4749-c8eb-ada4a4334614.jpeg)
Python で WiringPi とお気楽電子工作

RaspberryPi の GPIO 操作ライブラリ WiringPi。

# Python3でインストールする方法

```

# pip3 install wiringpi

```

# 使い方

バージョンが違うと微妙に初期化方法などが違ってくるので注意。

下は１秒間GPIO0に接続したLEDを点灯して消す。

```

#!/usr/bin/env python3
import time
import wiringpi as w 
w.wiringPiSetup()
w.pinMode(0,1)
w.digitalWrite(0,1)
time.sleep(1)
w.digitalWrite(0,0)
    

```

実行は実行権をつけてからスーパーユーザで実行する。
シェルでWirintPiを使う場合はpiユーザでOKだが、python3の場合はスーパーユーザでなければならない。

下は１秒ごとにGPIO0に接続したLEDを点滅の無限ループ

```

#!/usr/bin/env python3
import time
import wiringpi as w 
w.wiringPiSetup()
w.pinMode(0,1)
while 1:
  w.digitalWrite(0,1)
  time.sleep(1)
  w.digitalWrite(0,0)
  time.sleep(1)
    

```




# WiringPi とは

最近の Raspbian には当初からインストールされているが、シェルからの実行となる。

```
$ gpio mode 0 out
$ gpio write 0 1
$ gpio write 0 0

```
でそれぞれ 
- GPIO 0 をアウトプットモード、
- GPIO 0 をHigh
- GPIO 0 をLow

と操作。

これだけならシェルからしか使えないが、各言語バインディングがある。

C/Java/PHP/Pythonなどがあるがそれぞれインストールしないといけない。

# pullup / pulldown

```

w.pullUpDnControl(0, 2) # ポート0をプルアップ

w.pullUpDnControl(0, 1) # ポート0をプルダウン

w.pullUpDnControl(0, 0) # プルアップ／プルダウンの解除

```

# Raspberry Pi + フラットケーブルを使って電子工作

Raspberry Piで電子工作するときにはブレッドボードを使うことが多いですが、もっとお手軽な感じでやってみましょう。
こんな感じにフラットケーブルを接続してみます。

![IMG_20170502_182106.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/c23e6ff7-7cb8-69f0-31bc-60949b9dcbd3.jpeg)

ラベルを切って貼ります。

![IMG_20170502_182005.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/b9a38f34-123c-b442-3add-699104eeb04b.jpeg)


![IMG_20170502_182028.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/227e167f-ad5c-66fd-e440-6dd454b76843.jpeg)

LEDをつなげてみます。

![IMG_20170502_163524.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/320f7d04-31f1-d244-657a-a7006f243060.jpeg)

GPIOコマンドで動かしてみましょう。

うまく動いたら、Pythonで動かしてみます。

```
#!/usr/bin/python3
import subprocess
import wiringpi as w
import time
w.wiringPiSetup()
w.pinMode(0,1)
w.digitalWrite(0,1)
time.sleep(1)
w.digitalWrite(0,0)
w.pinMode(1,0)

````

アナログセンサをつないでみます。



![IMG_20170502_163411.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/b84bc15c-9e67-1d13-0448-d565ac66eeea.jpeg)


```



#!/usr/bin/python3
import subprocess
import wiringpi as w
import time
w.wiringPiSetup()
w.pinMode(1,0)
while 1:
  a = w.digitalRead(1)
  print(a)
  if ( a == 1 ):
    subprocess.call(["aplay","dai5.wav"])
  time.sleep(1)

```


秋月電子の赤外線距離センサーをつないでみました。
黒が5V、橙がGNDに繋げないといけないという危険なデバイスです。
センサーはアナログですが、適当なしきい値で 0/1判別します。

![IMG_20170502_172625.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/a3edf695-9c2b-bbc4-d1d7-b826d4971ed1.jpeg)

すぐに外れるのでジャンパーケーブルを使ってこういうようにしてみました。

![IMG_20170502_180423.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/66a8ef25-f5fe-a0af-c2f0-ec3172dc4919.jpeg)
[小ネタ] Pythonでimportの前に関数を実行しなければならないときの苦肉の策

小ネタです。
殆どないケースですが、Pythonでimportの前に関数やメソッドの実行をする要件が出てきたときの策です。

## 経緯

LinuxでmatplotlibをインストールしてPythonコード上で使用した時に以下のようなエラーが発生しました。

```
_tkinter.TclError: no display name and no $DISPLAY environment variable
```

このエラーの解決策は検索するとすぐに出てきて、matplotlibのバックエンドをAggにすればいいというのが回答のようです。(エラーやバックエンドについての詳細は今回は割愛します)

その方法はいくつかあるようで、/etc/matplotlibrcに`backend: Agg`と記載する方法[^1]と、`matplotlib.use('Agg')`を使用する方法[^2] が検索上位に上がっていました。

今回はそのうち`matplotlib.use('Agg')`を採用するとします。

## 問題点

```python
import matplotlib
matplotlib.use('Agg')
from matplotlib import pyplot


def plot(data):
    pyplot.plot(data)

```

上記のようにimportした後に`matplotlibu.use('Agg')`を呼べば動くのですが、これには問題があって、import順を自動で変更するツール([isort](https://pypi.python.org/pypi/isort)など)を導入していると以下のように書き換えられてしまいます。

```python
import matplotlib
from matplotlib import pyplot

matplotlib.use('Agg')


def plot(data):
    pyplot.plot(data)

```

`matplotlib.use('Agg')`は`from matplotlib import pyplot`を書く前にを呼ばなければいけないようで、CIで自動的にコードをチェックする場合などは困ってしまいます。実行時に呼び出し元関数の中でimportするという手も一応はありますが、importする数や関数の数が増えた場合にだんだん煩雑になっていきます。

## 対策

対策として以下のように実装できます。

```python
try:
    import matplotlib
    matplotlib.use('Agg')
finally:
    from matplotlib import pyplot


def plot(data):
    pyplot.plot(data)

```

一応はこれで順序の保証ができます。

[^1]: [$DISPLAYが未定義でmatplotlibがコケる問題を再発させない方法](http://qiita.com/nishio/items/0a8949262d86c181668b)

[^2]: [matplotlib でグラフを描画する。](http://loumo.jp/wp/archive/20100219183704/)