OmniAICreator/Qiita-1.07M huggingface dataset:
個人アプリがNHKで紹介されたのでそのデータとか公開

ちょっと前になりますが、5/27にNHK Eテレ #ジューダイ という番組で個人で作ったアプリが紹介されたので、ASOとかダウンロードの状況とかを共有

## 状況説明
突然会社に電話が。ポジション的に営業トークされる側なので、いつものやつかなと思っていたら、NHKからですといわれる。

なんかおかしいと思っていたら、どうもアプリ、しかも個人で作っているほうの話。
よくよくきいたら、今そういう回を作っていて、紹介してもいいかの許諾を取りたいとのこと。
→即OK：ついでに簡単に電話取材。

番組名も放映時間も全部教えてくれて、一週間前の放送で予告がでたら一応確定ですといわれる
→予告でたのでアプリ内で告知

---

ちなみにアプリはもちろんハンドルネームでやっているので、会社までたどろうとするとまあまあ面倒。
アプリの販売元と、twitterを頼りにたどっていって、自分のツイッター＞会社名を拾う　という形にしないといけない。
そこそこリサーチしないとだめな気がするので、意外にすごいなと思った。


## アプリの説明
・いわゆる匿名SNS系のやつ（だいぶ古株）
・ここまでのDL数AとGあわせて50万ほど
・ユーザ層の半分以上は10-20代、女子率かなり高い
・端末の割合は iphone:android = 6:4くらい
・DL数はデイリーでAppstore（以下A）が200、Googleplay（以下G）で100程度


## 起きた事
ここから本題事象としては以下

・NHK Eテレ #ジューダイ という番組でアプリが紹介された（視聴率1%未満？）
・2分くらい？一応スクショっぽいものやアプリのアイコン、名前も番組中に呼ばれた
・放送の〆にカリスマインスタグラマーさんにアプリ名読んでもらえた（生見愛瑠☆めるる☆さんありがとうございました）
・ヒャダインさんにDISられた！（コメントもらえただけマシ）


## 予測されたこと
・DL数爆上げ
・あわせてカテゴリランキングも爆上げ
・キーワードランキングはあがらない
・CVRは上がる
・もしかしたらWEBの紹介ページのセッションも増える？

・ここらへんを参考に想定DLも算出
https://keisan.casio.jp/exec/user/1388911981
0.5%の視聴率として、203,630人がターゲット	
スマホで検索してくれる人：10%
CTR：5%
203,630 * 0.1 * 0.05 = 1000DLと想定


## 結果
### インストール数
G:+200(100>300)
A:+800(200>1000)
→合計+1000
※CVRは上がっているので、想定よりスマホ開いてくれる人が少なかった？

### キーワードランキング
G:変化なし
A:変化なし
→予定通り

### カテゴリランキング
Gソーシャル：100位 > 50位
Aソーシャル：170位 > 27位
A全体：1000位圏外 > 675位
→予定通り


### 本体サイト
平常時1日10セッションくらい＞40セッション

→こぎれいに整えておいたが、ほぼ意味なし。
アプリの紹介なのにWEBで検索しないということ。
若者はWEBで検索しないということ。


### ダウンロードページのCVR
G:5.1% > 16.1%
A:4.2% > 14.5%
→アプリの癖が強いのでもともとのCVRはかなり低め（その分継続率は高い）
さすがにテレビみてモチベーションもってページ開いているのでCVRは3倍以上に。


### セッション
1.4倍

### 投稿数
1.3倍

→DL増えた割りにあんまりだった



### 恥ずかしい話
テレビだーって舞い上がって（実は1週間前に大阪のテレビ局からも連絡があった（そっちはボツ））
VPS1台でカリカリにチューニングして運用していたものをAWSに乗せ買えてしまった！

AWSに移管＞ALB＞WEB2台+DLの構成にした結果運用費用4倍に。

でも1000DLしかインパクトなかったので、実はやらなくてもよかった・・・

## 総括
テレビすごい。
視聴率1%以下でもきちんと取り上げられれば相応のDLにつながる。
数値を読む際は、テレビ＞スマホ　の転換率はかなり低くく見積もっておいた方が良い？
サーバは調子に乗って上げない
N国には投票できない

## おまけ
NHKで紹介されたので、ディスクリプションの中に「NHKで紹介されましたって」書いたら平均CVRが2倍になりました。
【解決】Image Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: You must have ImageMagick or GraphicsMagick installed

Railsで画像アプリを作成中にエラー`Image Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: You must have ImageMagick or GraphicsMagick installed`(画像をMiniMagickで操作できませんでした。画像ではない可能性がありますか？元のエラー：ImageMagickまたはGraphicsMagickがインストールされている必要があります)

こんなバリデーションエラー

<img width="484" alt="スクリーンショット 2019-07-30 11.28.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/99908b21-1bfb-4084-249e-cba37e59225c.png">

テキストコピー

```
Image Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: You must have ImageMagick or GraphicsMagick installed
```

ターミナル
<img width="1440" alt="スクリーンショット 2019-07-30 11.31.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/d43d9ef5-b9cf-ebbc-2b06-7ecf756e45ca.png">


# 解決策

brewをアップグレード

```
$ $ brew upgrade
```

imagemagickをmacにインストール

```
$ brew install imagemagick
```

`imagemagick`がインストールされていなかったみたいです。


インストール
<img width="823" alt="スクリーンショット 2019-07-30 12.26.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/b513a189-88c0-384c-4386-8d9d551f716f.png">

できました〜〜〜
<img width="521" alt="スクリーンショット 2019-07-30 12.27.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319526/7e10812e-bbd9-0e74-cbde-c3ae6100f467.png">


参考
https://qiita.com/Tommydevelop/items/756a7e3d7dd55d0a62a9
https://sun0range.com/information-technology/ruby-on-rails-tutorial13
company-reftex をyatex で使う

##company-reftex をyatex mode で使えるようにした忘備録．

Emacs で
```M-x package-install company-reftex```
で、package をインストール．

company-reftex.el の中の latex-mode を yatex-mode に書き換える．
つまり、159 行目を (company-reftex-20181222.906 の場合)
```  (and (derived-mode-p 'latex-mode)```
を
```  (and (derived-mode-p 'yatex-mode)```
に書き換える．その後、company-reftex.el をバイトコンパイル．

.init.el に
```(add-to-list 'company-backends 'company-reftex-labels)
 (add-to-list 'company-backends 'company-reftex-citations)```
を記述して、activate.

TeXのファイルが、複数のファイルにまたがっているときは、TeX-master が適切にセットされて
いると、ファイルをまたいでReftexは見つけることができる．
SSL設定をしてサイト公開したのに、直接URLにドメインを打ち込むとSSL化してない時の対処法

【前提】
・HTML、CSS、Javascriptでサイトを作った
・お名前.comでドメインを取得し、さくらインターネットのサーバーで使用する
・さくらインターネットのコントロールパネルでSSL設定済み
・さくらインターネットのサーバーにアップしてサイト公開する

【起こった問題】
・サイトはアップできたが、直接「○○○.com」とドメインを打ち込むとサイトがSSL化されていない
・手動で「https:://○○○.com」と打ち込むとSSL化されている

↓

直接「○○○.com」とドメインを打ち込んでも「https:://○○○.com」と表示されるようにしたい

【解決策】
・さくらインターネットのコントロールパネル → メニュー欄「マニュアル」 → 「アクセス制限」 → 「.htaccessによるアクセス制御」 → 「暗号化(SSL)を有効としている場合、暗号化しているページへ誘導したい」を開く

↓

・「.htaccessの設定例」の3行をコピー
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

↓

・再びコントロールパネルに戻り、「ファイルマネージャー」を開く → 対象のフォルダを開く

↓

・左上の「表示アドレスへの操作」 → 「ファイル作成」で.htaccessファイルを作成

↓

・作成した「.htaccess」の中に先ほどコピーした3行を貼り付けて保存

これで出来ました
zfsのスナップショットをrcloneでクラウドにあげる

## 事前準備
rcloneの設定を行います
[rcloneを使用したGoogle Driveのバックアップ
](https://qiita.com/kodai-saito/items/f7597392e470863c450e)

## コマンド
```:bash
zfs snapshot tank@hoge
zfs send tank@hoge | rclone rcat remote:path
```

## 結果
自分の環境で500GBほどのスナップショットをgoogle drive(gsuite)にアップロードしたところ、問題なく処理が完了しました。
Redis-server/Redis-cliをインストールして、Redisを操作する

## :construction: Redisを使うためにしたこと

### 用意するもの
Windows (Windows subsystem for linux)

`$ cat /etc/os-release`

```
NAME="Ubuntu"
VERSION="16.04.4 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.4 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial
```

### Redis-server を検索してみる
`$ sudo apt show redis-server`

```
Package: redis-server
Version: 2:3.0.6-1
Priority: optional
Section: universe/misc
Source: redis
Origin: Ubuntu
・・・
```

### Redis-server インストール
`$ sudo apt install redis-server`

### バージョンを確認してみる
`$ redis-cli --version`

### Redis-server 起動
`$ redis-server`

### Redis-server 停止
`Crtl + C`

### Redis-cli 起動
`$ redis-cli`

### Redis-cli cliから操作したサーバのデータを保存してRedis-server を終了
`$ shutdown`

### Redis-cli 停止
`$ exit`

***

### keys 一覧取得
`$ keys *`
### 対象のkey 取得
`$ keys xxxxxxxxxxxxxxxx`

`型によって確認方法が異なるので型の確認を行う``

`$ type xxxxxxxxxxxxxxxx`

下記いずれかが返ってくる

```
string
 => `$ get xxxxxxxxxxxxxxxx

list
 => `$ lrange xxxxxxxxxxxxxxxx`0 -1 (先頭 から 最後から1番目までの値を返す)

set` <= topic-publisherが入れるときはこの型
 => `$ smembers xxxxxxxxxxxxxxxx

zset`<= topic-accumulatorが入れるときはこの型
 => `$ zrange xxxxxxxxxxxxxxxx`0 -1 (先頭 から 最後から1番目までの値を返す)
 => `$ zrange xxxxxxxxxxxxxxxx`0 2 (先頭 から 2番目までの値を返す)

hash
 => `$ hkeys xxxxxxxxxxxxxxxx
 => `$ hvals xxxxxxxxxxxxxxxx
```

## 対象のkey のみ削除
### keys 一覧取得
`$ keys *`

### 対象のkey ごと削除
`$ del xxxxxxxxxxxxxxxx`

### 対象のkey を残しvalueのみ削除
`$ srem xxxxxxxxxxxxxxxx`


## flushdb(選択しているDB indexのkeysをすべて削除する場合)
### DB index 「0」 を選択、抽出
`$ select 0`
`$ dbsize`
(integer) 1

### DB index 「1」 を選択、抽出
`$ select 1`
`$ dbsize`
(integer) 1

### DB index 「0」 flushdb(選択しているDB indexのkeysを全て削除)
`$ select 0`
`$ flushdb`

### DB index「0」のデータは削除され、件数が0になる
`$ dbsize`
(integer) 0

### DB index「1」は1件のまま残る
`$ select 1`
`$ dbsize`
(integer) 1


### 感想
***
特になし
【Atom】の初期設定【PHPユーザー向け】

ここではPHPの設定方法を解説します。

#日本語化

１、Atomを開く
２、画面右上[File]を選択
３、タブの中の「Setting」を選択
４、Settingタブが出るのでその中の「Install」を選択
５、検索窓があるのでその中に「japanese-menu」を入力
６、japanese-menuという項目左にある「Install」をクリック

成功していれば画面左のメニューや上部のメニューバーが日本語化されます。


#初期画面からいらないタブを消す

Atomは立ち上げるごとに余計なタブが開かれる設定です。
それを消す為に「Show Welcome Guide when opening Atom」のチェックを外しましょう。

![atom_NoNever.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413468/433c3fc8-4c0f-5146-4349-fe70a4349ec0.png)

↑：上記のチェックがバニラ状態では付いていると思いますので、それをクリックして外しましょう。


続いて、TelemetryConsentのタブを弄ります。
これは「Atom開発の手助けの為に、匿名でデータを送ってくれたら嬉しいんだけどあなたはどうしたい？」という表示です。

Yesでも、Noでも好きな方を選んでしまいましょう。

![atom_Telemetry.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413468/dc3ba5fe-811f-5a77-43eb-c4273a147ccd.png)

#エディタ自体の設定をする

バニラより自分に合ったエディタの設定をしてみると良いでしょう。
「ファイル(F)」→「環境設定(T)」→「エディタ設定」から設定できます。


###ソースコードの折り返し機能が欲しい
ソースコードが長くなってくると見切れてしまって見づらくなってしまうなんて事も起こるでしょう。
そうならない為にも、ソースコードをある部分で折り返し表示してくれる仕組みを導入してみると良いでしょう。

・「ソフトラップ」の項目をチェック。

###インデントの深さをパッと見で確認できるようにしたい。
どんなインデントの掛かり方をしているのか


#プラグイン導入

いよいよここからプラグインの導入です。
プラグインを入れる事によって、Atom公式では対応できていない色々な機能を導入していくことができるようになります。

##1: file-icons

ファイルタイプごとの表示を鮮やかにしてくれるプラグイン。
Atomに愛着がわいてくる。

##2: color-picker
htmlやcssで色の指定をする際に直感的に指定が出来るウィンドウが出るようになる。

##3: split-diff
ファイルの差分がどのようなものか比較できるプラグイン。
似たファイルを沢山見比べるのなら、導入して損はない。


##4: minimap / minimap-autohide

minimapは、ソースコードが長くなってくるとどの部分のコードを書いているのか解らなくなってくる事もあるかと思います。
そういう人の為に、今書いているコードがどこのものか直感的に解るようにするプラグインです。
minimap-autohideは、minimapで出てきた全体図をいい感じに自動で消してくれるもの。

##4: highlight-selected / minimap-highlight-selected

highlight-selectedは、同一な名称をハイライトで一斉表示してくれる
minimap-highlight-selectedは、その機能をミニマップに反映してくれる。

##5: atom-beautify
インデントを綺麗にしてくれるプラグイン。
1発できれいなコードが仕上がるので開発が楽になる。

##6: autocomplete-paths
オートコンプリート機能。ファイルパスをかなり入力しやすくしてくれる。

##7: script
scriptはその場でプログラムの実行を行ってくれるプラグイン。
ブラウザに表示してバグを治して・・・という手間を省けます。


##8: linter　/ busy-signal / linter-ui-default / linter-php / linter-phpmd / linter-phpcs
リアルタイムに構文をチェックしてくれるプラグインです。
linter linterの基盤
linter-ui-default　linterのエラーの表示をしてくれるもの。
linter-php PHPの構文チェック
linter-phpcs　PSR-1or2に準拠したコードを書くサポートを受けられる。
linter-phpmd　PHPのバグやら問題点やらを抽出してくれるもの
改行されない半角英数字の対処方【学習メモ】

#はじめに
webアプリを作成中のこと、
formの入力チェックを行うと、入力した文字が
<img width="701" alt="スクリーンショット 2019-07-30 11.14.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269337/94bb48c7-3e73-9687-ebdf-642191b8b9aa.png">

改行されない？？？
改行されずに途中で文字が切れてしまいました。

調べてみると半角英数字のみの文章だと改行されないことがあるとかなんとか。
一文字でも日本語とか全角が混じると改行してくれるんですけどね。

#対処法
対処法として
**wordwrap: break-word;** [**overflow-wrap: break-word;**(CSS3の場合)］
または
**word-break: break-all;**
これをCSSで打ち込めばOKです！

実際に打ち込んでみると、
<img width="699" alt="スクリーンショット 2019-07-30 11.14.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269337/b6d9a140-1704-e06d-02b7-0408cdee74f8.png">


見事に改行してくれました！！

参考にしたサイト⬇︎
https://w3g.jp/blog/confusing_word-break_word-wrap
Googleは過去のパスワードを何個記憶しているのか

# はじめに

ログイン時、Googleアカウントに間違ったパスワードを入力すると以下のように表示される。

![間違ったパスワード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311399/6251810c-4203-4a52-bc8a-eea666fadf63.png)

Googleアカウントに過去のパスワードを入力すると以下のように表示される。

![以前のパスワード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311399/3c980229-4e1b-3327-7752-abcb1eb9de9c.png)

ここからGoogleは過去のパスワードを覚えていることがわかる。

[過去の記事](https://qiita.com/querykuma/items/cb32eb33e5d082736d65)でGoogle子会社のサポートスタッフが平文のパスワードを使用してログインできるとGoogleアナリティクス利用規約に定めていることを問題にした。

過去のパスワードもサポートスタッフからパスワード漏洩の危険性があり、Googleにパスワードを忘れさせる必要がある :sunglasses:

２０回もパスワード変更したがGoogleはパスワードを忘れなかった[^手がつりそう] :dizzy_face:

![パスワード変更](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311399/96357bb6-f380-9f9b-ac8e-f6410fcb0e6e.png)


# Googleは過去何個のパスワードを覚えている？

Google検索して４８個目の検索結果に載っていた。[^検索結果低すぎ]

![検索結果低すぎ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311399/f27f2d29-12db-c6a8-75a9-b9232865abeb.png)


> Googleアカウントのパスワードは何回前のものが使える？履歴ってどのくらいあるのか調べてみました。
> 
> コピペを繰り返して検証した結果、100回分のパスワードを履歴として保存していました。
> 
> [いろいろメモ](https://etc.miscmemo.com/digital/post-13877/)

100個も覚えている :neutral_face:

この記事によって手がつる被害者を減らすのに役立てば幸いだ。

[^手がつりそう]: 手がつりそう。
[^検索結果低すぎ]: 検索結果が低すぎることが記事の動機づけになっている。
Ubuntu16.04にCUDAとOpenCV2.4を入れる

# はじめに

動画による行動認識を行うため、精度が良さそうな[Two-stream I3D](https://github.com/deepmind/kinetics-i3d)を使いたかった。独自のデータを使う必要があったので、オプティカルフローのデータを作る必要があるので[オプティカルフローを作成する環境](https://github.com/yangwangx/denseFlow_gpu)が必要なので、Ubuntu上に作成した。

#環境

今回はGCPのVMを使いました。
* Ubuntu16.04
* OpenCV2.4.10
* CUDA8.0
* NVIDIA Tesla K80

#CUDAのインストール
[nvidiaの公式ホームページ](https://developer.nvidia.com/cuda-80-ga2-download-archive)からCUDA8.0をダウンロードします。OS等を選択するところがあるので、以下で選択してください。
Operating System: Linux
Architecture: x86_64
Distribution: Ubuntu
Version: 16.04
Install Type: deb(network)
選択するとダウンロードボタンが出るので、ダウンロードしてください。

```terminal
sudo dpkg -i cuda-repo-ubuntu1604_8.0.61-1_amd64.deb
sudo apt update
sudo apt install cuda-8-0
```

PATHの設定をしなければいけないので、以下を~/.bashrcに書き込み、sourceコマンドで再読み込み。

```terminal
export PATH=/usr/local/cuda-8.0/bin:${PATH}
export LD_LIBRARY_PATH=/usr/local/cuda-8.0/lib64:${LD_LIBRARY_PATH}
```

```
source ~/.bashrc
```

#CuDNNのインストール
[nvidiaのディベロッパーサイト](https://developer.nvidia.com/rdp/cudnn-archive)から以下の３つをダウンロード
* cuDNN v6.0 Runtime Library for Ubuntu16.04 (Deb)
* cuDNN v6.0 Developer Library for Ubuntu16.04 (Deb)
* cuDNN v6.0 Code Samples and User Guide for Ubuntu16.04 (Deb)

以下のコマンドでインストール

```
sudo dpkg -i libcudnn6_6.0.21-1+cuda8.0_amd64.deb
sudo dpkg -i libcudnn6-dev_6.0.21-1+cuda8.0_amd64.deb
sudo dpkg -i libcudnn6-doc_6.0.21-1+cuda8.0_amd64.deb
```

#OpenCVのビルド

Opencv2系を入れられるものがあったので、[そちら](https://github.com/jayrambhia/Install-OpenCV)を利用します。

```
git clone https://github.com/jayrambhia/Install-OpenCV.git
cd Install-OpenCV/Ubuntu/2.4
```

このまま`./opencv2_4_10.sh`の中身を変えます。
36行目に`-D WITH_CUDA=ON -DBUILD_ZLIB=ON -DWITH_ZLIB=ON`をオプション追加し、今回のGPUはTesla K80なので`CUDA_ARCH_BIN=3.7`, `CUDA_ARCH_PTX=3.7`に変更。
参考
[https://developer.nvidia.com/cuda-gpus]
[https://answers.opencv.org/question/131451/errors-on-compile-ubuntu-1604/]

このままビルドしてもエラーがおきます。
`nppiGraphcut missing`のようなエラーが出ると思います。CUDA8ではgraphcutがサポートしなくなったためらしいです。[https://answers.opencv.org/question/95148/cudalegacy-not-compile-nppigraphcut-missing/]
graphcuts.cppファイルを変更してください。

```graphcuts.cpp
#include "precomp.hpp"

#if !defined (HAVE_CUDA) || defined (CUDA_DISABLER)
```
以下に変更。

```graphcuts.cpp
#include "precomp.hpp"

#if !defined (HAVE_CUDA) || defined (CUDA_DISABLER)  || (CUDART_VERSION >= 8000)
```

これで`./openc2_4_10.sh`でうまくビルドできると思います。

[これ][link-1]を実行する時に`/usr/bin/ld`のエラーが出ると思いますが、`/usr/lib/x86_64-linux-gnu`配下に`/usr/local/cuda-8.0/targets/x86_64-linux/lib/`配下にあるsoファイルのシンボリックリンクを貼れば動くはずです。

#終わりに
別にオプティカルフローくらい普通にopencv3とか４でやれば苦労しなかったなと
改めてバージョンを意識しないといけないと感じました（小並感）
[link-1]:https://github.com/yangwangx/denseFlow_gpu
Rails minitestでconcernsのテストを書く

## はじめに
`concerns`で実装はすっきりしたんだけど、`minitest`でテストを書くときにどうするんだっけ？と困った。`rspec`に入れ替えて`shared_examples`使おうという声が聞こえるけどたぶん錯覚なんだ。

## 実装サンプル
こんな感じのサンプルがありまして...

```rb
class SampleModel < ActiveRecord::Base
  include SampleConcern

  # name attribute defined
end
```
```rb
module SampleConcern
  extend ActiveSupport::Concern

  included do
    # concernsに実装するのはたぶん不適切だけど
    validate name, presence: true
  end

  def greet
    "I'm #{name}"
  end
end
```

## テスト

`SampleConcern`が`ActiveRecord`に依存しない(`has_many`とか`validates`が書いていない)場合はただの`module`なので、テスト用クラスを作って`include`してやれば済む。
大人の事情により、依存しているクラスをテストする場合は以下のコードでテストが書ける。
(`module`側の`setup`を`included`の中に定義することでテストクラスの`super`呼び出しを省略できるがケースバイケース)

```rb
require 'test_helper'
require 'models/sample_concern_test'

class SampleModelTest < ActiveSupport::TestCase
  include SampleConcernTest

  def setup
    super
  end

  private

  def test_instance
    SampleModel.new
  end
end
```
```rb
module SampleConcernTest
  extend ActiveSupport::Concern

  def setup
    @my_sample = test_instance
  end

  included do
    test "correct name greeting" do
      name = "paty"
      @my_sample.name = name

      assert_equal "I'm #{name}", @my_sample.greet
    end
  end

  private

  def test_instance
    raise NotImplementedError.new("override with InheritanceClass.new")
  end
end
```
Mac ユーザーのための c++ <bits/stdc++.h> インクルード方法

#なぜこの記事を書こうと思ったのか
最近競技プログラミングなるものを始め, c++ でコードを書いているときにいちいち

```c++

#include <iostream>
#include <vector>
#include <algorightm>
#include <map>
#include <tuple>
#include <cstudio>
```
とかたくさん書いてたんですが上位の方のコードを見ると

```c++
#include <bits/stdc++.h>
```
の 1 行で終わっていました.
**これはなんだ !!** と思い調べてみたら, これを書くだけで全てのヘッダがインクルードできるそうです.  
つまり上記のように何行も書かなくて OK !

ただ, Mac で普通にインクルードしようとすると, 「そんなファイルありません」とエラーが帰ってきます.


# 実践
* homebrew にて gcc をインストール　　

```
$ brew install gcc
```

* gcc のエイリアスを探す  

```
$ ls /usr/local/bin | grep gcc
$ ls /usr/local/bin | grep g++
```

gcc-10 や g++-10 が目的のものなので、  
それらに対してシンボリックリンクを貼ります。  

```
$ ln -fs /usr/local/bin/gcc-10 /usr/local/bin/gcc
$ ln -fs /usr/local/bin/g++-10 /usr/local/bin/g++
```

これで Mac に元から入っている gcc ~~(clang)~~ の呪縛から解き放たれました。  
真に gcc でコンパイルできるようになったので bits/stdc++.h のインクルードができていると思います。  

# どうしてもうまくいかなかったら
1.Finder で command + shift + g で出てきた検索 window に /usr/local/include と入れます.
飛んだ場所で bits という名前の 新しいフォルダを作ります.
2.そのフォルダの中に入って https://gist.github.com/frankchen0130/9ac562b55fa7e03689bca30d0e52b0e5 にあるヘッダファイルをコピー, 貼り付けします.  


終了です.

もしどなたかの役に立てれば幸いです.
ZeppelinOSからOpenZeppelin SDKへの移行方法メモ

# はじめに
OpenZeppelin SDKの前身であるZeppelinOSのプロジェクト(v2.4)を、OpenZeppelin SDKプロジェクト(v2.5)に移行するための手順をメモ。

# ZeppelinOSからOpenZeppelin SDKへの移行方法
## package.json
- zos -> @openzeppelin/cli

```zsh
> npm uninstall zos
> npm install @openzeppelin/cli
```

- openzeppelin-eth -> @openzeppelin/contracts-ethereum-package

```zsh
> npm uninstall openzeppelin-eth
> npm install @openzeppelin/contracts-ethereum-package
```

- (optional) web3@1.0.0-beta.37 -> web3@1.2  
web3のバージョンがv1.2でstableになり、OpenZeppelin SDKでも、v2.5.2からはv1.2を使用するようになった。

```zsh
> npm uninstall openzeppelin-eth
> npm install @openzeppelin/contracts-ethereum-package
```

## コマンド

- `zos` -> `openzeppelin` または `oz`

## プロジェクト管理ファイル
今まで、`zos`のprefixで識別されていたプロジェクト管理ファイルは、全て.openzeppelinディレクトリに移された。

- zos.json -> .openzeppelin/project.json
- zos.dev-5777.json -> .openzeppelin/dev-5777.json
- zos.rinkeby.json -> .openzeppelin/rinkeby.json  
など

## solidityファイル

import部分を修正する必要がある。
openzeppelin-eth -> @openzeppelin/contracts-ethereum-package

```solidity
// import "openzeppelin-eth/contracts/math/SafeMath.sol";
import "@openzeppelin/contracts-ethereum-package/contracts/math/SafeMath.sol";
```

# まとめ
上記の変更を加えることで、ZeppelinOSのプロジェクトをOpenZeppelin SDKのプロジェクトに移行できる。
場合によってはnpm周りなどもう少し修正が必要になることがあるが、@openzeppelin以下を使うことに気をつければ大丈夫。

# おまけ
OpenZeppelin SDKについては、以下のtweetや以前書いたqiita記事を見てもらうのが良いかと思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">EthereumのdApps開発フレームワークとしてOpenZeppelin SDKが急成長しているので、紹介の意味も込めて1つ記事を書きました。Truffleの強力な対抗馬になると思います。<a href="https://t.co/WO8J928CVB">https://t.co/WO8J928CVB</a></p>&mdash; こみー / Ryo Komiyama (@ryoheikomy) <a href="https://twitter.com/ryoheikomy/status/1154314203827601410?ref_src=twsrc%5Etfw">July 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">OpenZeppelin SDKの旧名はZeppelinOSで、5日前の2019/07/20に名称を変更しました。この変更でv2.5になったのですが、実はちょうど1ヶ月前のv2.4へのアップデートでインタラクティブなCLIをリリースしており、このCLIが非常に有用です。</p>&mdash; こみー / Ryo Komiyama (@ryoheikomy) <a href="https://twitter.com/ryoheikomy/status/1154316504994680832?ref_src=twsrc%5Etfw">July 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Qiita記事: [OpenZeppelin SDK (旧ZeppelinOS) を使って、コードを1行も書かずに3分でERC721を発行する](https://qiita.com/ryokomy/items/a39c769a17a893143bd0)
TouchDesignerからUnityにOSC送れなかった問題

# 概要
TouchDesignerとUnityを使って、相互にOSC送信できるか遊んでたら、
TouchDesignerからUntiyへ送信する実験がうまく行かなかった。

# 環境

UnityとTouchDesignerは同じWindows10PCで動いてます

| ソフト名など     | バージョン | 
|:-----------------|------------------:|
| Unity|             2018.2.21f1|
|TouchDesigner|2019.17550|  

Unityでは、
extosc
https://assetstore.unity.com/packages/tools/input-management/extosc-open-sound-control-72005
を使って、OSCの送信、受信を行ってます。


# 解決方法

受信側であるUnityで、OSCバインドするときのメッセージ指定で
”hogehoge”ではなく
”/hogehoge”
とするだけ。



# 感想など
Unity側かTouchDesignerのどちらがOSCとして正しいかは、不明。わかったら、記載します。
DBの移行でハマる

#やったこと
社内システムのDBをmysqldumpで定期的にダンプしている。このダンプは、ユーザーDBを含めた全てのDBをダンプしている。
それを使って検証用VMを立ち上げたいと思ったのがきっかけ。やったことは

- DBのダンプをSCPで転送
- mysql -u root -p < dump.sqlでそのまま書き込み

この2点。

この後、PHPのWebアプリをDocumentRootに転送した後、アクセスしてみると

`Fatal error: Uncaught PDOException: SQLSTATE[HY000] [1045] Access denied for user`

その後色々してみたけど、ユーザーでログインもできない状態。なにこれ怖い。

#原因の推測と対応
まあどう考えても、横着して全部のDBを一気にインポートしたのが間違いだと思う。

そういうわけで、ひとまずユーザーを全て削除してみることに。

`select Host, User, Password from mysql.user;`でユーザーを取得して、root以外は全て消す。

その後、もともと設定していたユーザーを登録し直す

#結果
直った！MySQLに勝った！

MySQLのユーザーを移行する場合は、userテーブルだけdumpして、SQL見ながら実行するのが一番堅実だと思います。
久々にPostgreSQL触ったら、基本操作すら忘れていたので書いておく

## :construction: 6年ぶりくらいに触ったらダメでしたｗ

### 本当にメモ書き程度ですんません

### 基本操作

#### postmasterデーモン
`start`	postmaster デーモンを起動します。
`stop`	postmaster デーモンを停止します。
`restart`	postmaster デーモンを再起動します。
`status`	postmaster デーモンの起動状況を確認します。
`reload`	設定ファイルを再読込みします。
`condstart`	デーモンが動作しているかを確認後、再起動します。（/var/lock/subsys/postgresql が存在するとき再起動します。）

##### 起動
```
# /etc/init.d/postgresql start
```

##### 停止
```
# /etc/init.d/postgresql stop
```

##### 再起動
```
# /etc/init.d/postgresql restart
```

##### クラスタ作成
```
PGLIB=/usr/share/pgsql
PGDATA=/var/lib/pgsql/data
export PGLIB PGDATA
```

##### 自動起動
```
# chkconfig postgresql on
```

#### データベースユーザの作成
xxxの作成

```
$ createuser
Enter name of user to add: xxx
Shall the new user be allowed to create databases? (y/n) y
Shall the new user be allowed to create more new users? (y/n) n
CREATE USER
```

#### データベースユーザの削除
xxxの削除

```
$ dropuser xxx
```

#### データベースの作成
testdb という日本語を EUC で管理するデータベースを作成

```
$ createdb -E EUC_JP testdb
CREATE DATABASE
```

#### ログイン
必要に応じて `-h (ホスト)` や `-d (データベース選択)` などつけるんだぞ

```
$ psql -U taro testdb
```

#### 代表的な操作

`\?`	バックスラッシュコマンドのヘルプを表示します。
`\h`	利用可能なSQL文を表示します。\h command と実行すれば、その SQLコマンドの書式を表示します。
`\i`	他のファイルを取り込みます。一連のSQL文を、事前にファイルに記述しておき、\i filename と実行することで、一度に SQL文を実行することができます。
`\d`	データベースの情報を表示します。\d tablename と実行すれば、そのテーブルの定義を表示します。
`\dS`	システムテーブルの一覧を表示します。
`\dT`	ユーザー定義テーブルの一覧を表示します。
`\encoding`	クライアントの現在の文字コードを表示します。\encoding encoding と実行すれば、クライアントの文字コードを設定します。
`\l`	データベースの一覧を表示します。
`\z`	テーブルの一覧をアクセス権限とともに表示します。
`\q`	psql を終了します。


#### テーブルの作成
```
testdb=# create table meibo (
testdb(#     name     varchar(30),
testdb(#     age      integer,
testdb(#     address  varchar(80));
CREATE TABLE
testdb=>
```

#### INSERT
```
testdb=# insert into meibo values ('Taro Yamada',27,'1-2-x Shibuya-ku Tokyo');
```

#### SELECT
```
testdb=# select * from meibo;
     name      | age |        address
---------------+-----+------------------------
 Taro Yamada   |  27 | 1-2-x Shibuya-ku Tokyo
(1 rows)
```

#### UPDATE
```
testdb=# update meibo set age = 28 where name = 'Taro Yamada';
```

#### SELECT
```
testdb=# delete from meibo where name = 'Taro Yamada';
```

#### DROP
```
testdb=# drop table meibo;
DROP TABLE
```

### 感想
***
ふー
フロントJavaScriptからメール送信できるSmtpJS (v3)

# サーバーレスでのwebサイトで問い合わせフォームを作りたい
自分はQiita初投稿のひよこエンジニアなのですが、先日webサービスを新たに開発することになり、インフラ系知識ないし運用しんどいなぁ、、と思ったので[Firebase](https://firebase.google.com/)を活用して開発することにしました。
その際、小規模とはいえサイトを公開しようとするとお問い合わせフォームがやっぱり必要になるので、なんとかそこもフロント完結しようと探したところ、[SmtpJS](https://www.smtpjs.com/)が非常に簡単だったので使ってみました。
意外と日本語の情報が少なく感じた（特にv3が出てから）ので、記事にすることにしました。

# 使い方
[SmtpJS](https://www.smtpjs.com/)にアクセスします。
自分のようにクソほど英語がわからなくて困らないくらい簡潔にガイダンスされているので基本的に説明不要なんですが、まず、以下をHTMLに貼り付けます（もちろんダウンロードしてもOK）。

```html
<script src="https://smtpjs.com/v3/smtp.js"></script>
```

あとはメールを送りたい箇所で、Email.sendのメソッドを呼び出すだけです。以下は公式サイトのサンプルそのままです。

```js
Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);
```

# メールサーバーも簡単に用意できる
いや、もうひとつありました。メールサーバーの準備。
これもSmtpJSがナビゲートしてくれていまして、SmtpJSのページの「No SMTP server?」のボタンから飛べる[Elastic Email](https://elasticemail.com/account/#/create-account)というサービスで簡単に用意することができます。
アカウントができたら、Account > Settings のページを開いて、必要な情報を取得します。

<img width="1078" alt="20190730-elasticemail.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472822/9c148a6e-76d3-1105-2c98-679cbd3679f4.png">

前述のEmail.sendの「Host」のプロパティにSettingsページの「Server」の項目（つまりsmtp.elasticemail.com）を、「Username」「Password」のプロパティにSettingsページの「User name」「Password」の項目を設定します。

あとは当たり前ですが、「To」は送信先のメールアドレス（お問い合わせフォームだったら送り先は自分ですね）、「From」は送信元のメールアドレス、「Subject」がタイトルで「Body」が本文。
「From」はいい加減なアドレスだとダメなようです。v2ではいけていた気がしますが、v3でセキュリティ強化されたためと思われます。

# セキュリティ対策もOK
フロントJSで使う以上、先の「Password」にパスワードをべたっとコピペすると丸見えになってしまいますが、SmtpJS v3ではそこも対応してくれています。

「Security」のところに「SMTPの資格情報を世界中に公開したくないだって？ふっ、私たちが対策を考えてあげたよ」みたいなことが書いてあって、「Encrypt your SMTP Server」のボタンからトークンが生成されます。ドメインを入力させられるので、トークンが知られても入力したドメイン以外からは使えないということでしょうね。

# おわりに
v2ではセキュリティ面がややゆるく、Gmailにやすやすとブロックされたりして少し不安だったSmtpJSですが、v3でかなり初心者にとっても使いやすくなったのではないかと思います。

ちなみに実際に作ったサービスがこちらです（小規模サロン向け予約受付システム）。
https://suzume5489.com/

ほぼweb経験値ゼロからスタートして、Qiitaにめちゃくちゃお世話になってようやく形になったので、ひよこながらも開発中に得た知見で他の方の役に立ちそうなトピックを投稿していこうと思います！
wordpressのビジュアルエディタで見出し付けのショートカットが使えない件


最近ブログをしっかり書くようになってから記事のレイアウトも可読性をあげる上で重要なので、
wordpressのショートカットキーを効率的に使いたいなと思うようになった。

特に見出し付け（hタグ）は記事を一通り書き終わった最後にまとめて私は調整するので
ポチポチするのが面倒だった。

そんなとき、
投稿のビジュアルエディタに今までなにげなく見落としていたが
各装飾のボタンにショートカットキーが割り当てられていることに気づいた。

<img width="242" alt="スクリーンショット 2019-07-30 10.32.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452135/fa69e35d-8aa6-ffb5-23c1-8eef9b21d695.png">

よし、これは使える！

ショートカットはこちら

**「Cnntrol + Option + 数字」**

数字がそのままタグに該当していてh2タグは（⌃⌥2）でh3タグは（⌃⌥3）です

が、押しても押しても数字がタップされるだけで

・・

・

なんてことはない、Safariが対応していないだけでした…
GoogleChromeで試したら普通にうまくいきました。

ちなみに環境は
- MacOS HighSierra（Mojaveでもダメでした）
- Safari 12.1.1
- WordPress 5.2.2

でした。
今後対応されるのか、ひとまずはsafariじゃなくて
wordpress作業は今後chromeかfirefoxにしようと思った今日この頃でした。
threeとbabylonでrendertexture

#概要

threeとbabylonでrendertextureやってみた。

#写真

three

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d3325f79-570e-d9fe-7f7d-646224d5772b.png)


babylon

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fe3f57d4-972b-efd8-6484-272d48dda2e2.png)

#成果物

three

https://embed.plnkr.co/uflEsW3CuqS65nMRsanK/

babylon

https://embed.plnkr.co/zJF6fOBZmxPmzPWIxIAa/

以上。
Processing 3で2つのカメラから映像を同時に取り入れ写す方法

Processing 3.5.3
mackbookproで



内蔵カメラなどの映像を一つ写すことはいろんな本やwebにのっていた
これをいろいろ弄るのが楽しかったのでいろいろ試してみたくなった。


映像を2つ混ぜたいなと考えた時に、同時に取得して同時に写す方法が乗っていなかったのでいろいろ自分で試してみて次の方法でいけました。
macbookproについているカメラとusb接続したwebカメラの映像を2つ写してみました。



//Step 1. Import the video library
import processing.video.*;

//Step 2. Declare a Capture object
Capture video;
Capture video2;

void setup() {
  size(1280,240);
  println(Capture.list());//←--------------------------------ここで各カメラが何番に対応しているか確認
  
  println("チャプチャーカメラ6　　　左に映る");
  println(Capture.list()[6]);//←-------------------------------ここで1台目のカメラを指定。番号は上で確認
  println("キャプチャーカメラ15　　右に映る");
  println(Capture.list()[15]);//←------------------------------ここで2台目のカメラを指定。
  
  //Step 3. Initialize Capture object via Constructor
  //Use the default camera at 320*240 resolution
  video = new Capture(this,Capture.list()[6]);
  video2 = new Capture(this,Capture.list()[15]);

  video.start();
  video2.start();
}

//An event for when a new frame is available
void captureEvent(Capture video) {
  //Step 4. Read the image from the camera.
  video.read();
    video2.read();
}




void draw() {

  //Step 5. Display the video image.
  image(video,30,0);
  image(video2,640,0);
}


processing楽しいです
C++ Builder 10.2 Tokyo > IDE > タブ順番の確認 > [デザイン]においてTabキーで確認 (作業時間の短縮)

```txt:動作環境
RAD Studio 10.2 Tokyo Update 3 
Windows 10 v1903
```

### タブ順番の確認

タブ順番を確認する方法は下記のようにしていた。

1. デザインで「タブ順番」を変更
2. 実行
3. Tabキーを押して順番が正しいことを確認
4. 間違っていたら、終了して手順1に戻る

実行時に色々な操作が必要な場合、修正までの時間がかかる。

### 実はそれ、不要でした

下記で可能でした。

1. デザインで「タブ順番」を変更
2. デザインでTabキーを押して順番を確認
3. 間違っていたら、手順1に戻る

作業時間が短縮できます。


### 関連

IDE使用の効率向上に関して。

- [C++ Builder XE4 > ショートカットキー > Tool paletteへフォーカスを移す (IDE Insight search boxと組合せて使う) > Ctrl+Alt+P](https://qiita.com/7of9/items/0e22c9ecb2e6c7bc0430)
- [C++ Builder XE4 | Tokyo > IDEインサイト使用前と後の作業効率 > フォームデザイン時の作業効率の向上](https://qiita.com/7of9/items/7033ec386f1fd41bc734)
threeとbabylonでwasd

#概要

threeとbabylonでwasdキーで、一人称視点移動やってみた。

#写真

three

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f736cdd6-4c74-b0a1-0bf9-c03762a50721.png)


babylon

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/64771957-5310-5d6f-3cce-ce2eede99fa9.png)


#成果物

three

https://embed.plnkr.co/mDW1m29YVJEdf0HnJ8KC/

babylon

https://embed.plnkr.co/NztgizzSx3RddnDBXy8s/

以上。
XSERVERでWordPress簡単インストールをしたらエラーメールが来た

### 件名

> Cron <XXXX@XXXX> find XXXX/public_html/wp-content/cache/* -type f -mtime +3 -not -name ‘*.php’ -not -name ‘*.jpg’ -not -name ‘*.css’ -exec sleep 0.01 \; -print | xargs rm

### 本文
> find: ‘XXXX/public_html/wp-content/cache/*’: そのようなファイルやディレクトリはありません
rm: オペランドがありません
Try ‘rm –help’ for more information.

# 原因
WordPress簡単インストール時に、キャッシュ自動削除を**ONにする**にしてWordPressをインストールしたため
※初期値は**ONにする**になっているが、**OFFにする**に変更しておくとよい

# 解決策
Cron設定からコメントが**キャッシュ自動削除**となっているCronを探し、削除する
UI設計

Clone the project with git clone https://github.com/salesforce-ux/design-system.git
Run npm install in the root design-system folder.
Run npm start to launch the Previewer.
Visit http://localhost:3003/local/preview


事前インストール
Node.js
https://nodejs.org/en/

python
https://www.python.org/downloads/windows/

.net framework 2.0 SDK
https://www.microsoft.com/ja-jp/download/confirmation.aspx?id=15354

microsoft visaul 2005 
https://www.microsoft.com/ja-jp/download/details.aspx?id=5553
Windowsで Python pipが使えないときの対処法

Windowsに Pythonをインストールしたところ、pipコマンドが使えませんでした。これは、「Scripts」ディレクトリにパスが通っていないことが原因です。

## Pythonのインストール先を調べる

Pythonのインストール先は、コマンドプロンプトを起動して、以下のコマンドで調べることができます。

```
where python
```

ここで表示されるパスをコピーしておきます。

## 環境変数を書き換える

スタートボタンを押したら直接「環境変数」などで検索をして、次のウィンドウを表示します。

![2019-07-30_10-14-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977/a6ea0daf-df03-efe3-2fb1-a9f0dca1ea1c.png)

右下の「環境変数」をクリックし、上の「ユーザー環境変数」という所から「Path」という変数を探してダブルクリックしましょう。

![2019-07-30_10-15-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977/eb121e47-515b-64f9-1f49-8a80c75bd6f2.png)

「追加」をクリックしたら、今コピーしたパスを貼り付けて「python.exe」の記述を削除して、代わりに次のように「Scripts」と記述します。

```
C:\Users\*****\AppData\Local\Programs\Python\Python37\Scripts
```

これで、「OK」を押して Powershellなどを再起動すれば使えるようになります。
モックを Nuxt + Buefy で構築した忘却録

# 導入環境

クライアントにとりあえず動くの見せるように ワイヤーフレーム を元に モック を作って欲しいと言われたので、
UI フレームワーク 入れてサクッと作ってみました。

Mac
Nuxt 2.8.1
Buefy
node.js v10.15.3
npm 6.10.2

## Nuxt 導入

ドキュメントに従って create-nuxt-app を使って入れていきます。


```
$ npx create-nuxt-app mockup
```
パッケージマネージャは Yarn を選択、
プロジェクトネームや色々聞かれるんですが、今回はモックアップだったので Enter を連打
今回はHTML出力（generate）したかったので
サーバーサイド やその多機能は全て None にしました。


## Buefy 導入
パッケージを読み込みます。


```
$ yarn add -D nuxt-buefy
```

### Nuxt にパッケージを読み込む
今回は css も調整する気はなかったので、そのまま読み込んでしまいます。
カスタムしたい場合は css　モジュールで読み込まず別にもできます。

nuxt.config.js に下記を記述、css やアイコンを読み込みたくない場合はコメントアウトをとってください。

```nuxt.config.js
module.exports = {
  modules: [
    ['nuxt-buefy', {
      // css: false,
      // materialDesignIcons: false
    }],
  ],
}
```

### 表示テスト
index.vue に下記を記述、ボタンをクリックするとお知らせが表示されます。

```index.vue
<template>
  <section class="container">
    <b-button @click="clickMe">Click Me</b-button>
  </section>
</template>

<script>

export default {
  methods: {
    clickMe() {
      this.$notification.open({
        duration: 5000,
        message: `Something's not good, also I'm on bottom`,
        position: 'is-top',
        type: 'is-danger',
        hasIcon: true
      })
    }
  }
}
</script>
```

ここまできたらほぼほぼ終わりですね。
UIフレームワーク 初めて使ってみましたが楽です。
Ansible：Ansibleでwindowsマシンを操作する～準備編～

## WindowsModule一覧
https://docs.ansible.com/ansible/latest/modules/list_of_windows_modules.html
## 対象マシン
WindowsServer2016
## Windowsに対してリモート接続できるようにポリシー変更
PowerShellは管理者権限で起動すること

```powershell:ps
PS C:> Get-ExecutionPolicy
PS C:>Set-ExecutionPolicy RemoteSigned
```

## Ansibleで操作できるようにするスクリプト実行
- https://github.com/ansible/ansible/blob/devel/examples/scripts/ConfigureRemotingForAnsible.ps1
上から取得して実行するか

コマンドでgitから取得する

```powershell:ps
PS C:\> mkdir C:\work
PS C:\> cd .\work
PS C:\work> Invoke-WebRequest -Uri https://raw.githubusercontent.com/ansible/ansible/devel/examples/scripts/ConfigureRemotingForAnsible.ps1 -OutFile ConfigureRemotingForAnsible.ps1
PS C:\work> powershell.exe .\ConfigureRemotingForAnsible.ps1
```

## プロキシが刺さっていたら反映する
```powershell:ps
netsh winhttp import proxy source=ie
```
### 終わり
#VSCode で複数ファイルから複数行検索できる件

Search multiple lines from multiple files with #VSCode


- Shift+Command+F で複数ファイル検索モードを開く (Macの場合)
- Shift+Enterで改行しつつテキスト入力
- Enterで検索

![image](https://user-images.githubusercontent.com/13635059/62087406-91aa2500-b29c-11e9-8d7a-e98415bcea8d.png)
![image](https://user-images.githubusercontent.com/13635059/62087407-92db5200-b29c-11e9-9757-9375c3803def.png)



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2270








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
bluetoothctl を使ってデバイスの検出



「gatttool を使って NUS( Nordic UART Service ) とつなぐ実験」
https://qiita.com/nanbuwks/items/7c448837eedf439b8ee9

では、hcitoolを使ってデバイスの検出を行いました。ここでは bluetoothctl を使って同様に検出をしてみます。

# 環境

以下の2つで同様に動作することを確認しました


Ubuntu 18.04 (AMD64)

Raspberry Pi + Raspbian Buster Lite(2019-07-10)版


## インストール

特にインストール作業しなくても入っているみたいです。

Ubuntu18.04 では bluetoothctl: 5.48

Raspbian2019-07-10 ではbluetoothctl: 5.50

# 検出

以下は Ubuntu18.04での操作。
Raspberry Pi では sudo をつけないと動きませんでした。


```

$ bluetoothctl
[NEW] Controller 48:D2:24:08:71:57 nanbuwks-ThinkPad-X230-Tablet [default]
[NEW] Device EC:FB:26:04:7A:E9 Nordic_BMS
Agent registered
[bluetooth]# scan on
Discovery started
[CHG] Controller 48:D2:24:08:71:57 Discovering: yes
[NEW] Device D1:7C:18:BB:9E:96 Penbe
[NEW] Device 5B:FB:29:CA:9C:78 5B-FB-29-CA-9C-78
[NEW] Device 9A:F1:99:7F:9D:7A 63d170-bt
[CHG] Device 9A:F1:99:7F:9D:7A TxPower: 10
[CHG] Device 9A:F1:99:7F:9D:7A Class: 0x00200404
[CHG] Device 9A:F1:99:7F:9D:7A Icon: audio-card
[CHG] Device 9A:F1:99:7F:9D:7A Modalias: usb:v1D6Bp0246d0525
[CHG] Device 9A:F1:99:7F:9D:7A UUIDs: 00001800-0000-1000-8000-00805f9b34fb
[CHG] Device 9A:F1:99:7F:9D:7A UUIDs: 00001801-0000-1000-8000-00805f9b34fb
[CHG] Device 9A:F1:99:7F:9D:7A UUIDs: 0000111e-0000-1000-8000-00805f9b34fb
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -60
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -73
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -64
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -75
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -59
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -68
[NEW] Device 72:F5:C6:30:6F:CD 72-F5-C6-30-6F-CD
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -76
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -66
[CHG] Device 5B:FB:29:CA:9C:78 RSSI: -81
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -74
[CHG] Device D1:7C:18:BB:9E:96 RSSI: -65
[bluetooth]# 
```
expressの備忘

# express

## 参考

- [Express](https://expressjs.com)

## インストール

```
# package.jsonの作成
# entry point: (index.js) はお好みで。"app.js" もよくある。
npm init

# --save でpackage.jsonに追加されるので、後で構築しやすくなる。
# これはモジュールのみnode_modulesにインストールされる
npm install express --save
```

## Hello Wolrd サンプル

- 000.HelloWolrd_index.js

  ```
  const express = require('express')
  const app = express()
  const port = 3000

  app.get('/', (req, res) => res.send('Hello World!'))
  app.listen(port, () => console.log(`Example app listening on port ${port}`))
  ```

- 実行

  ```
  # 以下を実行後ブラウザで、http://localhost:3000 でアクセスできる。
  node 000.HelloWolrd_index.js
  ```

## Express application generator

Express アプリケーションのスケルトンを作成できる。

- generatorの実行方法

  - Node.js 8.2.0以降

    ```
    npx express-generator
    ```

  - Node.js 8.2.0以前

    ```
    # express-generatorをインストールする
    npm install express-generator --save

    # 以後はexpressコマンド
    # npm "-g" でグローバルにインストールしていない場合は、
    # node_moudles\.bin\express を使用する。
    express -h
    ```

- generatorの使い方

  ```
  # ビューテンプレートとしてpugを使用してmyappを作成
  express --view=pug myapp

  # インストール
  cd myapp
  npm install

  # 実行(Mac)
  DEBUG=myapp:* npm start
  # 実行(Win)
  SET DEBUG=myapp:* & npm start
  ```

  - "npm start" はそのフォルダのpackage.json内の"scripts"を参照する。
    "start": "node ./bin/www" となっているので、実際は"./bin/www" が実行される。


## ルーティング(Routing)

- 基本構造

```
app.METHOD(PATH, HANDLER)
```

- app    : expressのインスタンス
- METHOD : post, get, put ...（HTTPメソッドを小文字にしたもの）
- PATH   : サーバ上のパス（URLのパス？）
- HANDLER: URLがPATHとマッチしたしたときに実行するメソッド

- サンプル

```
// "/" にアクセスされたら、"Hello World!" を返す
app.get('/', function(req, res){
  res.send('Hello World!')
})

// "/" への POST リクエスト
app.post('/', function(req, res){
  res.send('Got a POST request')
})

// "/user" への PUT リクエスト
app.put('/user', function(req, res){
  res.send('Got a PUT request at /user')
})

// "/user" への DELETE リクエスト
app.delete('/user', function(req, res){
  res.send('Got a DELETE request at /user')
})
```


## 静的なファイル(static files)

画像やCSSやjavascriptなどの扱い方。
組み込みミドルウェアの "static" を使用する。

- 基本構造

  ```
  express.static(root, [options])
  ```

  - root: 静的ファイルを扱うディレクトリ

- サンプル

  ```
  // 以下を指定すると "public" フォルダが静的ファイルを扱う。
  app.use(express.static('public'))

  // 以下のようにアクセスできるようになる
  // public\image\sample.jpg  => http://localhost:3000/image/sample.jpg
  // public\css\style.css     => http://localhost:3000/css\style.css
  // public\js\jquery.js      => http://localhost:3000/js\jquery.js


  // 実際のフォルダ名とURLを変えたいとき
  app.use('/static', express.static('public'))

  // 以下のようにアクセスできるようになる
  // public\image\sample.jpg  => http://localhost:3000/static/image/sample.jpg
  ```
mrubyでm2x

[AT&TのIoTプラットフォーム](https://iotplatform.att.com)のM2Xをmruby on YABMで試してみました。M2XはThingSpeakに比べてちょっと複雑です。Machinistはどっちからかというこっちに似てる気がします。

レジストしてデバイスを登録しただけではデーターが放り込めません。

準備としてデバイスのページの"API Cheat Sheet"ボタンを押して表示される"Creating or Updating a stream"のcurlコマンドを実行してstreamを作る必要がありました。(ページの"Ovarview"の"Add Stream"ボタンからも作れるようです。)

streamを作ったら下記のスクリプトでデータが放り込めました。M2X用のmrbgemsもありますが、mruby on YABMには依存がなかったりするので自力での実行です。

```ruby
#
# mruby on YABM script
#
# m2x update script
#

DEVICE_ID = "naisyo"
PRIMARY_API_KEY = "naisyo"

STREAM_ID = "temperature"
INTERVAL = 10

def delay(yabm, val) 
  start = yabm.count() 
  while yabm.count() < start + val do
  end
end

begin

yabm = YABM.new

# net setup

yabm.netstartdhcp

yabm.print yabm.getaddress + "\n"

count = 0

while 1 do
  yabm.print "."
  count = count + 1
  yabm.print " " + count.to_s

  body='{ "value": ' + count.to_s + ' }'

  header = Hash.new
  header.store('User-Agent', "test-agent")
  header.store('X-M2X-KEY', PRIMARY_API_KEY)
  header.store('Content-Type', "application/json")
  header.store('Body', body)
  path = "/v2/devices/" + DEVICE_ID + "/streams/" + STREAM_ID + "/value"
  res = SimpleHttp.new("http", "api-m2x.att.com", 80).put(path, header)
  if res 
    yabm.print " " + res.status.to_s
  end
  yabm.print "\n"
  delay(yabm, INTERVAL * 1000)
end

rescue => e
  yabm.print e.to_s
end
```

![スクリーンショット 2019-07-30 9.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/ff8b366c-fdbb-8dd1-b200-06d77be09abf.png)

httpsでも同じようにアクセスできるみたいですが、BearSSL 0.6と相性が悪いみたいです。。。
WSLにセットアップしたLaTeXをVSCodeで使う

## この記事の目的
　先日Atomでターミナルが起動しない不具合が起こりまして、いい機会だしエディタについていろいろ調べてたら、WindowsのWSL側にセットアップしたTexLiveを利用してVSCodeでLaTeXを書く方法がわかったので紹介します.
## WSLとTexLiveの導入
　腐るほど記事があるので、「WSL Ubuntu インストール」などで検索し、WSLを導入してください。

参考：https://qiita.com/Aruneko/items/c79810b0b015bebf30bb

また、上記の記事にあるようにtexliveもインストールしちゃってください。今回「platex」コマンドと、「dvipdfmx」コマンドを使ってLaTeX文書をコンパイル、PDFに成形するのでそれらのコマンドがしっかりと使えるかどうか、確認してください。

## VS Code側の設定
　VS Code を入手、起動し、画面左端の拡張機能から、「LaTeX Workshop」と検索し、一番上に出てきたものをインストールします。インストールしたら[Ctrl][+][,]を押して設定画面を開きます(ファイル→基本設定→設定でも開けます)。その画面で、右上の「{}」をクリックし、settings.jsonファイルを開き、以下の記述を追加します。

```json:settings.json
    "latex-workshop.view.pdf.viewer": "tab",
    "latex-workshop.latex.tools": [
        {
            "name" : "platex",
            "command": "wsl.exe",
            "args": [
                "platex",
                "-synctex=1",
                "-interaction=nonstopmode",
                "-file-line-error",
                "-kanji=utf8",
                "-guess-input-enc",
                "%DOCFILE%.tex"
            ]
        },
        {
            "name" : "dvipdfmx",
            "command": "wsl.exe",
            "args": [
                "dvipdfmx",
                "-f",
                "yu-win10.map",
                "%DOCFILE%"
            ]
        }
    ],
    "latex-workshop.latex.recipes": [
        {
            "name": "platex",
            "tools": [
                "platex",
                "dvipdfmx"
            ]
        }
    ],
    "latex-workshop.latex.autoBuild.run": "never"
```

本来の使い方なら、commandのところには「platex」などが入るのですが、WSLにセットアップしてあるtexliveを使いたいのでcommandにはWSL用のターミナルの起動コマンドを代わりに記述し、argsに「platex」や「dvipdfmx」を記述しています。一番上と一番下の記述はLaTeX Workshopを使いやすくする個人的な設定ですので、必ずしも記述しなくても構いません。

## 実行画面
　適当なtexファイルを作ってコンパイルします。texファイルを開くと、画面左端に「TEX」というマークが出ていますので、そのマークをクリックし、「Build LaTeX project」から「platex」を選びます。これだけでワーキングディレクトリにPDFファイルまで生成されます。
画面はこんな感じ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472802/cfa7d63f-a474-b324-0435-6390bffe3003.png)
TexWorksみたいなかんじでVS Codeが使えます。便利すぎ。
　上記のビルドにショートカットキーを設定すれば、それ押すだけでコンパイル→PDF出力までやってくれるので、ぜひキー設定もしてみてください。
Spacemacs: golang LSPを導入

# tldr
Spacemacs(Emacs)でgolangのLSP実装である `gopls`を使ってみた。
（今のところ）邪魔になる処理を無効にすれば、使える :thumbsup: 

# gopls のインストール
``` sh
go get -u golang.org/x/tools/cmd/gopls
```

# 設定
## dotspacemacs/layers

``` elisp
(defun dotspacemacs/layers ()

...

     (go :variables
         godoc-at-point-function 'godoc-gogetdoc
         ;; go-use-gometalinter t
         go-use-golangci-lint t
         ;; go-backend 'go-mode
         go-backend 'lsp

...
```

## dotspacemacs/user-config
``` elisp
(defun dotspacemacs/user-config ()

 ...

  ;; lsp
  (setq company-lsp-cache-candidates t)
  (setq company-lsp-async t)
  (setq lsp-ui-doc-enable nil)
  (setq lsp-ui-doc-include-signature nil)
  ;; lsp-ui-sideline
  (setq lsp-ui-sideline-enable nil)
  ;; lsp-ui-flycheck
  (setq lsp-ui-flycheck-enable t)
  ;; lsp-ui-imenu
  (setq lsp-ui-imenu-enable t)
  ;; lsp-ui-peek
  (setq lsp-ui-peek-enable t)

...

```
railsでの新規アプリケーション作成手順

rails 5.0
例：新規投稿と一覧表示ができる簡単なアプリ開発。


## 1. アプリケーション作成　rails new


```:ターミナル
rails　new アプリケーション名　-d データベースの指定

$ rails new mini-app -d mysql
$ bundle install

gemの更新
```


## 2. DB作成　rake db:create

```:ターミナル
ディレクトリに注意

$ rake db:create
```

## 3. modelを作成

```:ターミナル
post model作成

$ rails g model post
```

## 4. マイグレーションファイルにカラムを設定
```ruby:qiita.rb
class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|

      t.text :text
    end
  end
end
```

## 5. マイグレーションファイルの内容をテーブルに反映

```:ターミナル

$ rake db:migrate
```
#### 作成したテーブルのカラムに仮データを入力

## 6. コントローラーを作成

```:ターミナル

$ rails g controller posts
```
## 7. コントローラーにアクションを指定

```ruby:qiita.rb
#一覧表示
  def index 
    @posts = Post.all
  end

#新規投稿
  def new
    @post = Post.new
 end

#新規投稿の保存
  def  create
  @post  =  Post.create(text: post_params[:text])
  redirect_to root_path controller: :posts, action: :index
    #保存後、一覧に戻る
  end

  private
    def post_params
      params.require(:post).permit(:text)
    end

end
```
## 8. コントローラーのアクションに対応するviewを作成

- view/posts/index.html.erb
- view/posts/new.html.erb

## 9. ルーティングファイルにコントローラーのアクションパスを指定

```ruby:qiita.rb

Rails.application.routes.draw do
  resources :posts,only: [:index,:new,:create]
end

```


## 10. rails s でサーバー立ち上げ

```:ターミナル 

$ rails s
localhost:にアクセス
```
alias晒す

```bash:.bashrc
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'
alias f='open -a Finder ./'
alias ll="ls -hlAFG"
alias cls="clear screen"
alias g='git'
alias gd='git diff'
alias gb='git branch'
alias gc='git checkout'
alias gcb='git checkout -b'
alias gs='git status'
alias gplu='git pull upstream'
alias gplo='git pull origin'
alias gplom='git pull origin master'
alias gps='git push origin'
alias gf='git fetch'
alias less='less -FSRXc'
alias ru='react-native unlink'
alias rl='react-native link'
alias nr='npm run'
alias nrd='npm run dev'
alias ni='npm install'
alias src='source ~/.bashrc'
alias spro='souece ~/.bash_profile'
alias dc='docker-compose'
alias bashrc='vim ~/.bashrc'
alias bashprofile='vim ~/.bash_profile'

## 誤字が多いからエイリアス化する
alias gti='git'
```
gitコマンドの省略系が多い
`cls`は結構使ってる

```properties:.gitconfig
[alias]
	diff = diff --color | diff-so fancy
	graph = log --decorate --graph --name-status --oneline
	for-author = for-each-ref --sort=authorname --format='"%(committerdate:short)","%(authorname)","%(refname:short)"' refs/remotes --merged
	for-commitdate = for-each-ref --sort=committerdate --format='"%(committerdate:short)","%(authorname)","%(refname:short)"' refs/remotes --merged
	cp = cherry-pick
	master = !git checkout master && git pull origin master
	save = stash save -u
	changelog = !$HOME/.gittag-changelog/src/gittag_changelog.py
```

- `for-author`,`for-commitdate`は`git fetch origin -p`で取得したマージ済みのブランチを作成者(author)順か作成日(commitdate)順で表示するものです。ブランチ消す時とかに使います。
- `master`は頻繁に使ってます。
forkしたリポジトリを更新する手順

- メモ
- Kubernetesの翻訳プロジェクトであるKubernetes/websiteが自分のリポジトリにforkしてあることが前提
- 日本語訳を進めているブランチ「dev-1.14-ja.1」をforkしたリポジトリに反映させる


# 手順

- forkしたリポジトリをクローン

```
$git clone https://github.com/XXXXXXXX[アカウント名]/website.git
```

- fork元のリポジトリを登録
    - upstreamという名前で登録

```
$git remote add upstream https://github.com/kubernetes/website.git
```

- リモートリポジトリの確認
    - upstreamという名前のリポジトリが追加される
    - cloneしたリポジトリはoriginという名前で登録されている
    
```
$git remote -v
origin	https://github.com/XXXXXXXX/website.git (fetch)
origin	https://github.com/XXXXXXXX/website.git (push)
upstream	https://github.com/kubernetes/website.git (fetch)
upstream	https://github.com/kubernetes/website.git (push)
```


- 更新したいブランチをチェックアウト

```
$git checkout dev-1.14-ja.1
```

- upstreamから最新の情報を取得
    - 差分が表示される

```
$git fetch upstream
remote: Enumerating objects: 607, done.
remote: Counting objects: 100% (607/607), done.
remote: Compressing objects: 100% (62/62), done.
remote: Total 1271 (delta 581), reused 552 (delta 545), pack-reused 664
Receiving objects: 100% (1271/1271), 561.25 KiB | 1.15 MiB/s, done.
Resolving deltas: 100% (888/888), completed with 269 local objects.
From https://github.com/kubernetes/website
 * [new branch]          dev-1.14               -> upstream/dev-1.14
 * [new branch]          dev-1.14-ja.1          -> upstream/dev-1.14-ja.1
 * [new branch]          dev-1.14-ja.2          -> upstream/dev-1.14-ja.2
(省略)
```

- マージ元のブランチを指定してマージ
    - ファイル単位で変更が表示される

```
$git merge upstream/dev-1.14-ja.1
```

- 反映させるブランチを指定してプッシュ

```
$git push origin dev-1.14-ja.1
numerating objects: 331, done.
Counting objects: 100% (331/331), done.
Delta compression using up to 8 threads
Compressing objects: 100% (148/148), done.
Writing objects: 100% (316/316), 140.34 KiB | 28.07 MiB/s, done.
Total 316 (delta 188), reused 288 (delta 163)
remote: Resolving deltas: 100% (188/188), completed with 9 local objects.
To https://github.com/XXXXXXXX/website.git
   0ee892d4a..b502151d1  dev-1.14-ja.1 -> dev-1.14-ja.1
```
使用されているポート番号をターミナルから調べ、プロセスを終了させる

#はじめに

Nodeで開発している際、自分の過去のポート使用によって実行が妨げられたので備忘録として残しておきます。

#問題
下の画像のように「既にそのポートは使用されています」と警告されます。

![スクリーンショット 2019-07-30 8.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449631/7c132123-46bb-e11d-997a-fd51b3f8a297.png)

#解決法

そんな時は「lsof」コマンドを使ってそのポートを使っているPID（プロセスID）を特定します。今回は3000ポートが使われていますと警告されたので、以下のように打ち込みます。

$ lsof -i:3000

これをすると以下のように使っているPIDがわかるのでこのプロセスを終了させます。

![スクリーンショット 2019-07-30 8.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449631/c09d29f8-2f02-c70c-d258-842bf517c107.png)


今回はPIDが13845なので以下のようなコマンドになります。

$ kill -9 13845

ここで「-9」はシグナルと言い、コマンドの動作に多少変更を与えます。「-9」は強制終了のシグナルです。ターミナルで「$ kill -l」と打つことでシグナル一覧を確認できます。