OmniAICreator/Qiita-1.07M huggingface dataset:
簡単に認証機能を実装できるgem devise

railsのコードによく出てくるdeviseとはなんぞやと言うのを調べていたら
かなり便利なものだったのでまとめてみました。

```sample.rb
class Sample < ActiveRecord::Base
  devise :database_authenticatable, 
         :recoverable, :rememberable, :trackable, :validatable, :lockable
end
```
このように書くことで認証機能を作ることができるそうです。

具体的に中身を見ていきます。
### 機能一覧
`database_authenticatable`
データベースに保存されたパスワードの確認。暗号化も兼ねている。

`recoverable`
パスワードをリセット

`rememberable`
ログインしていることを覚えせせる機能
ログイン画面の下の方にチェックボックスを押すと、ずっとログイン状態に

`trackable`
サインイン回数、時間など、ユーザーの分析に必要なデータを保存

`validatable`
パスワードの長さなどを自動でバリデーションしてくれる

`lockable`
ログインに何度も失敗すると、アカウントをロックできる

### 他にも色々機能はあるようです。


[参考記事](https://www.sejuku.net/blog/13378)
[もっと詳しい手順を見たい方はこちらへ](https://qiita.com/cigalecigales/items/f4274088f20832252374)
VSCode に Prettier や Angular Language Service、その他エクステンションがインストールできない場合の解決方法

# 特定のエクステンションがインストールできない

自分は VSCode を利用してコーディングを行っているのですが、ある日これまで使えていたエクステンションがインストールできないことに気が付きました。
インストールしようとすると下記エラーが表示されます。

```text

(✕) Failed to install 'package-name'.
(i) Once downloaded, please manually install the downloaded VSIX of 'package-name'.
```

細かい発生条件は不明ですが、私の場合は次の環境でした。

- macOS High Sierra
- 社用PC（管理アカウントによって作成されたアカウント）

逆に下記条件の場合は問題なくインストールできるようなので、最低でも上記２つが当てはまる場合に発生するようです。

- Windows × 社用PC
- macOS High Sierra × 自宅PC

# 解決方法


## code コマンドの導入

![CZJGA.gif](https://qiita-image-store.s3.amazonaws.com/0/41793/5d4c98e9-8639-0ca5-2c96-1f9fd2fd7a11.gif)


- `⇧⌘P` でコントロールパネル出して `shell command install` とか検索すればすぐできると思います。

詳細：https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line

## エクステンションの手動ダウンロード

- https://esbenp.gallery.vsassets.io/_apis/public/gallery/publisher/esbenp/extension/prettier-vscode/1.7.2/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage
    - なんか指定の URL からじゃないとダウンロードできないみたいです
    - 注意：反応ない？と思って何回もアクセスしないでください
    - めっちゃ何個も DL されてブラウザがフリーズしました、、、
    - バージョンは現時点での最新版 1.7.2

### バージョン違いやその他のエクステンションのURL

[ストア](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)のココ↓にダウンロードに必要な情報が記載されていますので下記例に則って置き換えてください

<img width="600" alt="スクリーンショット 2018-11-16 16.00.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/41793/30b2c683-65c5-1304-5942-4f6497490235.png">


<font color="red">esbenp</font>.<font color="blue">prettier-vscode</font> <font color="green">1.7.2</font>


https://<font color="red">Publisher</font>.gallery.vsassets.io/_apis/public/gallery/publisher/<font color="red">Publisher</font>/extension/<font color="blue">ExtensionName</font>/<font color="green">Version</font>/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage


## リネーム

- `Microsoft.VisualStudio.Services.VSIXPackage` という名前になっているので変換します
- 下記コマンドをコピペしてください

```shell
mv ~/Downloads/Microsoft.VisualStudio.Services.VSIXPackage ~/Downloads/esbenp.prettier-vscode-1.7.2.vsix
```

## インストール

<img width="523" alt="スクリーンショット 2018-11-16 16.04.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/41793/c6e0a9ab-73a6-33a6-1fb6-d9cad3e4aaf0.png">

メニュー -> Terminal -> New Terminal からエディタ内ターミナルを開いてください。
そこに、次のコマンドをコピペして実行します。

```shell
code --install-extension ~/Downloads/esbenp.prettier-vscode-1.7.2.vsix
```

`Extension 'esbenp.prettier-vscode-1.7.2.vsix' was successfully installed!` と表示されれば完了です。
その後、VSCode を再起動してください。

# おわりに

先日 prettier がアップデートされ HTML までフォーマットができるようになりました。
Angular の独自記述にも完全対応しており、導入することでHTMLの視認性が格段に向上しましたヾ(*･ω･)ﾉ

まだ prettier を導入していない、最新バージョンに更新していない方は是非 [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) を導入してみてください。

Prettier について詳しく説明している良記事 → https://medium.com/ngconf/ultimate-prettier-angular-cheatsheet-777c9515f4fb
Laravelでマルチドメインに対応したページを表示させる考え方

■Laravelプロジェクト内でマルチドメインに対応したファイルを表示させる考え方(自分用メモ)

　・目的
　　Laravelのプロジェクト内でマルチドメインに対応したファイルをドメインごとに
　　切り替えて表示させる。

　　例：URL　→　プログラムで参照しているパス
　　http://example.net    →/data/www/laravel_project/public/domain/1/indexを参照
　　http://example1.net   →/data/www/laravel_project/public/domain/2/indexを参照
　　http://example2.net   →/data/www/laravel_project/public/domain/3/indexを参照
　　http://example3.net   →/data/www/laravel_project/public/domain/4/indexを参照
　　http://example4.net   →/data/www/laravel_project/public/domain/5/indexを参照


　・環境
　　　CentOS Linux release 7.5.1804 (Core)
　　　php ver7.1.8
　　　Laravel ver5.7

　・想定ドメイン
　　example.net
　　example1.net
　　example2.net
　　example3.net
　　example4.net

　・ドキュメントルート
　　/data/www/laravel_project/public

　・ドメインごとのファイルが格納されているルートディレクトリ
　　/data/www/laravel_project/public/domain

　・ドメインごとのファイル
　　※1,2,3,4,5がドメインごとのファイルが格納されているディレクトリ
　　/data/www/laravel_project/public/domain/1	→example.net
　　/data/www/laravel_project/public/domain/2	→example1.net
　　/data/www/laravel_project/public/domain/3	→example2.net
　　/data/www/laravel_project/public/domain/4	→example3.net
　　/data/www/laravel_project/public/domain/5	→example4.net

　・httpd.conf
　　\<VirtualHost *:80>
　　　ServerName example.net　　　#ドメイン
　　　ServerAlias example1.net　　　#ドメイン
　　　ServerAlias example2.net　　　#ドメイン
　　　ServerAlias example3.net　　　#ドメイン
　　　ServerAlias example4.net　　　#ドメイン
　　　DocumentRoot /data/www/laravel_project/public
　　　Options FollowSymlinks
　　　\<Directory "/data/www/laravel_project/public">
　　　　Options FollowSymLinks
　　　　AllowOverride All
　　　　Include conf.d/allow_admin.list
　　　\</Directory>
　　\</VirtualHost>



　・.htaccess
　　\<IfModule mod_rewrite.c>
　　　\<IfModule mod_negotiation.c>
　　　　Options -MultiViews
　　　\</IfModule>

　　　RewriteEngine On

　　　# Handle Front Controller...
　　　RewriteCond %{REQUEST_FILENAME} !-d
　　　RewriteCond %{REQUEST_FILENAME} !-f
　　　RewriteRule ^ index.php [L]

　　　# Handle Authorization Header
　　　RewriteCond %{HTTP:Authorization} .
　　　RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
　　\</IfModule> 


　・ルーティング(web.php)
　　※stringにはURLのドメイン以降の文字列がDomainPageControllerのindexの引数として渡される

　　Route::get('{string?}', 'DomainPageController@index', function($string){

　　})->where('string', '[A-Za-z0-9?=./_-]*');

　・コントローラー
　　DomainPageController.php

　　class DomainPageController extends Controller
　　{
　　　public function index($string = '')
　　　{
　　　　//ここにデータベースなどからドメインを条件にデータを取得し画面に表示させる処理を書く

　　　　//ドメインデータ取得
　　　　//例ここから
　　　　\$db_data = DB::select("select * from domain_pages where domain = '".$_SERVER['SERVER_NAME']."' and open_flg = 1");

　　　　//データがなかったらエラーページ表示(not foundページ)
　　　　if( empty($db_data) ){
　　　　　return response()->view('errors.404');
　　　　}

　　　　//ファイル指定があるとき
　　　　if( !empty(\$string) ){
　　　　　\$file = preg_replace("/domain\/{\$db_data[0]->id}(.*?)/", "\$1", \$string);
　　　　　\$file = preg_replace("/^([a-zA-Z0-9\._\-]+)\$/", "/\$1", $file);
　　　　　return File::get('/data/www/laravel_project/public/'.\$db_data[0]->id.\$file);

　　　　//ファイル指定がないとき
　　　　}else{
　　　　　return File::get('/data/www/laravel_project/public/'.\$db_data[0]->id.'/index');
　　　　}
　　　　//例ここまで
　　　}
　}
iTerm2のログ自動取得手順とTips

#はじめに
terminalのログが自動取得じゃないのは知っていましたがいい加減設定せねばと思い立ち、
業務のやる気がない日（）に気分転換がてら調べました。
ついでにiterm2とやらもインストールします。

#環境
macOS 10系

#iTerm2のインストール
[公式サイト](https://www.iterm2.com/)からアプリケーションをダウンロードして起動します。それだけですw
フォントやテーマを変更したい場合はググるといっぱい記事が出て来ます。
私は以下のサイトを参考にさせていただきました、全くよくわかってない状態でicebergなるいい感じのテーマを導入。

[お前らのターミナルはダサい](https://qiita.com/kinchiki/items/57e9391128d07819c321)

#自動ログ取得
ここから本題。といってもiterm2が優秀すぎてとてもかんたんです。

###①ログファイルを保管したいディレクトリを作成
私は"okome"ユーザのデスクトップに"terminallogs"ディレクトリを作成しました。

```
$ mkdir -p /Users/okome/Desktop/terminallogs
```

###②絶対パスの指定
iterm2を起動している状態で、以下の手順に則りながら画面をポチポチしてSessionタブまで遷移します。

```
メニューバーのiterm2→Preferences 　#Preferencesウィンドウが出てきます
　　→Profilesタブ
　　　→Sessionタブ
```

Sessionタブの"Automatically log session input to files in:"にチェックを入れ、
①で作成した"terminallogs"ディレクトリの絶対パス（/Users/okome/Desktop/terminallogs）を入力して完了。
保存とかDoneボタンはありませんのでcmd + wでウィンドウを閉じて作業完了です。

一旦これで満足！
設定を追加した際は本記事に追記する次第です。

#Tips
##ショートカットキー
触っててもうバリバリ快適です。

```
・ウィンドウの最大化：cmd + Enter
・新規タブ：cmd + t
・新規ウィンドウ：cmd + n
・タブの移動：cmd + →　もしくは　←
```

##ウィンドウを半透明にしたい
これいっつも忘れるのでメモ。

```
Window AppearanceのTransparencyをグリグリする
```

##スクロールバックを増やすor無制限にする
```
メニューバーのiterm2
└── Preferences #Preferencesウィンドウが出てきます
    └── Profilesタブ
        └── Terminalタブ
　　　　　　　└── Scrollback linesを2万にしたり、Unlimited scrollbackにチェックを入れたりする
```


最後まで読んでいただきありがとうございました。
簡単ですが以上です。
letsencrypt: cerbot-auto renew でバーチャルホスト環境の証明書更新が失敗するケースの対応例

letsencryptの更新に cert-bot を使っています。便利で大変助かっておりますが、先日バーチャルホスト環境で一部サービスの証明書更新のみ失敗する事例にあたりましたので、記録しておきます。誰かのお役に立てれば幸いです。

# 事例

- nginxバーチャルホスト環境の証明書更新に一部サービスだけが失敗していた
- 同じサーバに同居している他のサービスは何故か更新成功
- 使っていた authenticator は nginx
- エラーメッセージは以下のような感じ

> Attempting to renew cert (【ドメイン名】) from /etc/letsencrypt/renewal/【設定ファイル名】.conf produced an unexpected error: Failed authorization procedure. 【ドメイン名】 (http-01): urn:ietf:params:acme:error:unauthorized :: The client lacks sufficient authorization :: Invalid response from http://【ドメイン名】/.well-known/acme-challenge/【チャレンジ用ファイル名】: "【サーバからのレスポンスボディ：404の内容】". Skipping.


# 原因

- cert-botが更新すべきnginx.confファイルの間違えて識別していたため、ドメイン検証用の一時ファイルにアクセスできずにエラーになっていた
- 何と間違えたか？ ***フロント用ではなくバックエンド用のconfファイルを更新していた***
- バックエンドのconfを更新しているため、フロントからドメイン検証用ファイルへのアクセスが通らずに404になっていた
- なぜ間違えたか？ ***ドメイン名と相違が大きいファイル名になっていた***

# 対策

- confファイル名を「【ドメイン名】.conf」 に変更して `cert-auto renew` を再実行した( `nginx reload` 必要かも )
- フロント用の conf ファイルを更新対象と識別して、ドメイン認証が通過し、証明書が更新された


# 原因詳細

本当のドメイン名じゃないけど、以下のような状況でした。

- サービスURL: `subdomain.domain.jp`
- フロント用confファイル名： `subdomain.conf`
- バックエンド(php-fpm)用confファイル名： `subdomain.backend.conf`

`cert-bot renew` を実行すると、ログに以下の記述が。。。

>2018-11-16 10:58:55,885:DEBUG:certbot_nginx.parser:Writing nginx conf tree to /etc/nginx/conf.d/***subdomain.backend.conf***:

バックエンド用のconfに対して、ドメイン証明用ファイルのパスを通すための location ディレクティブを追記していました。
それは letsencrypt のサーバからアクセスできんわ。。

certbotのプログラムでいうところの、[このあたり](https://github.com/certbot/certbot/blob/22da2447d5d89c11b9353ebbd7777690fee999df/certbot-nginx/certbot_nginx/configurator.py#L456)で、バーチャルホストファイルの識別をしています。
ランキング処理までは追っかけてませんが、要はconfの内容とファイル名からランキングを付けて正しいconfファイルを識別しているみたい。バックエンド用のconfは `.backend` が後ろについているため、ロンゲストマッチだとすると、ドットの分だけドメイン名により似ていると認識されたのかもしれません。

ログメッセージにはDNS疑えってしきりに書いてあったので、結構悩みました。。。
PlayFabでUnityを動かしてみる -その2 APIコールを作ってみる-

その1は[こちら](https://qiita.com/ume67026265/items/c89b391e36855f45586f)

PlayFabを使い始めるための設定を行います。
###(1)タイトルセッティング
その1でPlayFabの拡張をインストールしたので設定を行う

![Playfab01.png](https://qiita-image-store.s3.amazonaws.com/0/313446/778113c9-7f26-716e-738e-74830845442e.png)


画面左にある「Project」パネルにある「Create」をクリック
![Playfab01.png](https://qiita-image-store.s3.amazonaws.com/0/313446/49ef99a8-0900-a6ec-408c-cb4f3cd58f59.png)


C#スクリプトをクリック
![Playfab02.png](https://qiita-image-store.s3.amazonaws.com/0/313446/f11c9462-53ae-0dfe-eeec-9d7b51462979.png)

ファイル名を「PlayFabLogin」に変更
ダブルクリックするとVisualStudioのコードエディターが起動する
![Playfab03.png](https://qiita-image-store.s3.amazonaws.com/0/313446/f266a0cf-2dd3-4256-020f-691e882d7c33.png)

エディターにマニュアルのコードを丸パクる

```
using PlayFab;
using PlayFab.ClientModels;
using UnityEngine;

public class PlayFabLogin : MonoBehaviour
{
    public void Start()
    {
        //Note: Setting title Id here can be skipped if you have set the value in Editor Extensions already.
        if (string.IsNullOrEmpty(PlayFabSettings.TitleId)){
            PlayFabSettings.TitleId = "XXX"; // Please change this value to your own titleId from PlayFab Game Manager
        }
        var request = new LoginWithCustomIDRequest { CustomId = "GettingStartedGuide", CreateAccount = true};
        PlayFabClientAPI.LoginWithCustomID(request, OnLoginSuccess, OnLoginFailure);
    }

    private void OnLoginSuccess(LoginResult result)
    {
        Debug.Log("Congratulations, you made your first successful API call!");
    }

    private void OnLoginFailure(PlayFabError error)
    {
        Debug.LogWarning("Something went wrong with your first API call.  :(");
        Debug.LogError("Here's some debug information:");
        Debug.LogError(error.GenerateErrorReport());
    }
}
```
こんな感じ
![Playfab04.png](https://qiita-image-store.s3.amazonaws.com/0/313446/4009f578-8c22-2b32-a037-088a03e5bc0a.png)

※こちらのコードはあくまでサンプルコードで、モバイルゲームの場合は別のコードになります

###(2)実行してみる

新しいゲームオブジェクトを作成して、(1)で作成したスクリプトをアタッチして実行する
うまく実行できるとこんな感じで実行できる↓
![Playfab05.png](https://qiita-image-store.s3.amazonaws.com/0/313446/594de2eb-b465-e78b-105d-0adcf6619a24.png)


次からは実際に動かした時の動きなどを検証してみたいと思います
Railsのカラムで使う文字列の使い分け

Railsを始めてstringとtextの違いがわからなかったのでまとめます。
# String (文字列が２５５字まで)
- 名前
- 住所
- 電話番号
- 会社名

# Text　(それ以上)
- コンテンツ
- コメント
- 段落

[参考記事](https://code.i-harness.com/ja/q/332eda)
PhpStormにSubversionを設定した

現状、PHPプロジェクトにPhpStormを使用。
普段はGitでプロジェクトを管理してるが、訳あってSubversionを使用することになったが、PhpStormに設定するのに少しハマったので、備忘録として記述。。。

### ハマった点
PhpStormのSubversion設定でSSHを指定する項目があるが、べたにSubversionサーバーの秘密鍵を設定しても接続してくれない。。
普段はPuttyを使用しているので、直に設定する方法がよくわからなかった。

### 解決

> ここの↓記事が参考になりました。
https://stackoverflow.com/questions/31404099/how-to-connect-to-svn-using-putty-and-private-key-in-phpstorm

Puttyを使ってるのであれば、Puttyで良いじゃん！ってみたい。
PuttyではTortoisePlinkを使用しているので、同じ設定を**Subversion config**に設定。

<img width="311" alt="2018-11-16_15h41_25.png" src="https://qiita-image-store.s3.amazonaws.com/0/86347/f6f089b3-0dad-feda-5e2c-fd381bc2819c.png">

いけた！！
論文まとめ：Real-Time Seamless Single Shot 6D Object Pose Prediction

# はじめに  
CVPR2018から以下の論文
[1]B. Tekin, et. al. "Real-Time Seamless Single Shot 6D Object Pose Prediction"
のまとめ。

CVFの論文リンク。
http://openaccess.thecvf.com/content_cvpr_2018/papers/Tekin_Real-Time_Seamless_Single_CVPR_2018_paper.pdf

公式？のコード
https://github.com/Microsoft/singleshotpose

# 概要 
1. RGBの画像から物体の6D（位置x,y,zとroll pitch yaw）を推定するモデル
2. 後処理は必要なく、YOLOのようにモデルからいきなり各値が推定される
3. 50fpsとリアルタイムの処理が可能
4. 6Dの推定はPnPアルゴリズムを使用

# モデル 
## 全体像 
モデルの全体像は以下の図（[1]のFigure1より）。

<img width="935" alt="SingleShotPose_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/116706/b10f2d45-2645-8922-249d-f5b0cdd50842.png">

確かにYOLO テイストなアーキテクチャ。（参照 [2]）

下側左から入力画像(b)。

それに対して出力されるfeature mapは $S \times S$ グリッドの $D$ チャンネル。

各グリッドはbounding box（の中心）を１個保持する（c)

それをイメージ化したものが(d)。

具体的には(d)に示したようにbounding boxの中心座標、bounding boxの８つの頂点座標、bounding boxの信頼度、物体のクラスをそれぞれのチャンネルで推定する。

よってクラス数を $C$ として

```math
(1+8) \times 2 + 1 + C
```

チャンネルだけ存在する。

## bounding box各点の信頼度 
近接するグリッドは１つの物体に対して似たようなbounding boxを推定するだろう。

これらを以下の手順で１つに絞り込む。

まず予測する中心座標や頂点座標を $\bf{x}$ として、ground truth $\bf{x}\rm_{gt}$ とのユークリッド距離 $D_T(\bf{x})$ を求める。

この $D_T(\bf{x})$ に対して以下の式で各点の信頼度を算出する。

```math
c(\bf{x}\rm) = \begin{cases}
    e^{\alpha (1- \frac{D_T(\bf{x})}{d_{th}})} & if \ D_T(\bf{x}\rm) < d_{th}\\
    0 & otherwise
  \end{cases}

```

$d_{th}$ は閾値。これをグラフ化すると以下。

<img width="457" alt="SingleShotPose_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/116706/9d336d53-22c9-06cc-8739-67c7291d74fc.png">

距離が縮まるに従って１に近づく。

この $c(\bf{x}\rm)$ を９点で平均してbounding box各点に関する信頼度とする。

## bounding boxの座標を算出

まずbounding boxの中心座標 $(c_x, c_y)$ はsigmoidで０から１の範囲を出力する。(0,0)がグリッドの左上、(1,1)はグリッドの右下。

８個の頂点は、

```math
g_x = f(x) + c_x \\
g_y = f(y) + c_y
``` 

とする。 $f(\cdot)$ は恒等写像。

## 誤差関数 
bounding boxの座標に関するlossを $\mathcal{L}_{pt}$ 、

物体に対する信頼度に関する loss を $\mathcal{L}_{conf}$ 、

物体のクラスに関する loss を $\mathcal{L}_{id}$ としてloss全体はこれらの総和

```math
\mathcal{L} = \lambda_{pt}\mathcal{L}_{pt} + \lambda_{conf}\mathcal{L}_{conf} + \lambda_{id}\mathcal{L}_{id}
```

となる。係数 $\lambda_{conf}$ はYOLOと同様、物体がある時とない時で別の値とする。具体的には物体がある時は 5.0、ない時は 0.1。

 $\lambda_{pt}, \ \lambda_{id}$ は1.0。

<font color="red">書きかけ</font>


# Reference
YOLOのアーキテクチャ参考資料
https://www.slideshare.net/ssuser07aa33/introduction-to-yolo-detection-model
grep で完全一致させたいときの書き方

# 前提
- 完全一致で grep させたいときに方法がわからない人向けです。
- ログ解析とかの時に役立ちそう。

# 環境
- macOS High Sierra 10.13.5
- iTerm2

（※ UNIX コマンドが使える環境なら何でも良さそうだと思います）

# TL;DR

```
$ cat foo.txt | grep -E \s*foobar$
$ cat foo.txt | grep -e \s*foobar$
$ cat foo.txt | egrep \s*foobar$
```

# 詳細
grep コマンドには拡張した正規表現を使えるオプションがいくつかあります。

```
$ man grep
     -E, --extended-regexp
             Interpret pattern as an extended regular expression (i.e. force grep to behave as egrep).

     -e pattern, --regexp=pattern
             Specify a pattern used during the search of the input: an input line is selected if it matches any of the
             specified patterns.  This option is most useful when multiple -e options are used to specify multiple pat-
             terns, or when a pattern begins with a dash (`-').
```

最初は行頭かつ行末という条件の正規表現を書こうと思ったんですが、それだと行頭のインデントやスペースなどを考慮してくれなくなるので、0個以上のスペースという条件にしました。

```
$ cat foo.txt | grep -E ^"foobar"$
じゃなくて
$ cat foo.txt | grep -E "\s*foobar"$
```
でもこれで言うと、一致する部分って行頭のスペースすべて含まれてしまうんですよね。ログファイルの解析したい時って、一致部分をハイライトしたいことわりとあると思うんですけど、これだとむしろ見にくくなったりするのかな…。

# 参考文献
- man grep
- http://www.atmarkit.co.jp/ait/articles/1604/13/news022.html
Copy text / URLpage with clipboard.js

#####Do you need to copy text URL ?
At some project, you need to copy text at clipboard, like as copy URL git or URL at this page. 
That will simpler more when use plugin clipboard js.
I have use it and practice like a exercise. 
If you have the way simple and effective, please  share comfortable it. 
#####How to use it?
You can get it on npm: `npm install clipboard --save`
Else you can down package at here: https://github.com/zenorocha/clipboard.js/archive/master.zip
I have get link cdn like this to use: https://cdn.jsdelivr.net/clipboard.js/1.5.10/clipboard.min.js

######Browser Support?
- Chrome 42+
- Edge 12+
- Firefox 41+
- IE 9+
- Opera 29+
- Safari 10+

#####Example
###### Html
```
<div class="c-text">
  <button class="c-btn">Copy</button>
  <input type="hidden" id="url" value="!">
</div>
```
###### Scss
```
.c-text{
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top:10px;
  .c-btn{
    background-color: #f4f141;
    border: transparent;
    border-bottom: 2px solid #f4ce42;
    border-radius: 2px;
    padding: 10px;
    min-width: 100px;
    color: #f4a341;
  }
}
```
###### JS
+ Element input have id `url` is place get URL page local, to do this, we will assign value for id: `$("#url").val(location.href);`  
+ Next, create new variable for Clipboard with value return will be enter at element input.
+ To announce for user that copy text success, clipboard support 2 event "success" hoặc "error"
Let's try to do it! :grinning:

```
$("#url").val(location.href);
var Clipboard = new Clipboard('.c-btn', {
  text: function() {
    return document.querySelector('input[type=hidden]').value;
  }
});
Clipboard.on('success', function(e) {
  e.clearSelection();
});
```
#####Read more at: https://clipboardjs.com/    :hugging::hugging::hugging:
javascript: オブジェクトの配列で存在チェック

## はじめに
オブジェクトの配列内のある項目について、存在チェックを行いたい機会があり、```findIndex関数```を使うと便利だったのでそのメモです。
*some関数での用法を追記しております。
@ttatsfさんありがとうございます！

文中で使用している、some関数、findIndex関数、アロー関数は```ES6```以降対応なのでご留意ください。

## some()で存在チェック
some関数は配列の中に条件を一つでも満たすものがあれば、trueを返します。
単純な存在チェックだけですと、こちらの方が良さそうです。
*@ttatsfさんありがとうございます！

```javascript
const users = [
  {id:1, name:"Ichiro", language:"python"},
  {id:2, name:"Jiro", language:"ruby"},
  {id:3, name:"Saburo", language:"java"},
  {id:4, name:"Shiro", language:"python"}
];

// true
console.log(users.some(user => user.language === "python"));
// false
console.log(users.some(user => user.language === "php"));
```


## findIndex()で存在チェック
実行例です。findIndexの仕様として、見つかった場合はインデックス番号を、見つからない場合は```-1```を返します。
*冗長だったコードを修正しました。
@ttatsfさんありがとうございます。

```javascript
const users = [
  {id:1, name:"Ichiro", language:"python"},
  {id:2, name:"Jiro", language:"ruby"},
  {id:3, name:"Saburo", language:"java"},
  {id:4, name:"Shiro", language:"python"}
];

// true
console.log(users.findIndex(user => user.language === "python") != -1);
// false
console.log(users.findIndex(user => user.language === "php") != -1);
```

## 補足
以下のような書き方もできます。オブジェクトの構造が頭に入ってないと読みにくい気もしますが。。

```javascript
// true
console.log(users.findIndex(({language}) => language === "python") != -1);
```

## 参考
[MDN:Array.prototype.findIndex()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
[MDN: アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
4ステップで簡単にデータベースを可視化する方法(Rails)

データベースの量に圧倒されてわからないからもっと見やすくしてほしい！
ホワイトボードなどでいちいちまとめるのが面倒！
という方にER図というものがあるのを知ったので使い方をまとめておきます。

### 環境
- Mac (Mojave)
- ruby 2.5.1
- rails 5.2.1
- Homebrew　

# 手順
1.graphvizというをhomebrewでインストール

```
brew install graphviz
```
2.gemfileにrails-erdを追加

```rb:Gemfile
group :development do
  ...
  gem 'rails-erd'
end
```
3.gemfileにrails-erdを追加

```
bundle install --path vendor/bundle
```
4.ER図をプロジェクト内に出力

```
bundle exec rake erd
```

# ER図を一言で言うと
テーブルごとの関係性を四角と線で表したもの

# 参考記事
[【Try Gem】rails-erdを使ってＥＲ図を出力してみる。](https://tech.mof-mof.co.jp/blog/try-rails-erd.html)
[【Rails入門】Rails ERDでER図を自動作成しよう！オプションも網羅](https://www.sejuku.net/blog/66196)


# p.s.
Sinatraからruby書き始めて、Railsインターンで便利になったことが多かったので記述しておきます。
いつか使ってみたいJavaScriptライブラリ

画像のクリッピングが行えるjQueryプラグイン[Cropper]
http://fengyuanchen.github.io/cropper/

色んな種類のチャートが描けるjQueryプラグイン[jqPlot]
http://www.jqplot.com/

WebページのTableタグをオシャレで高機能に出来るjQueryプラグイン[DataTables]
https://datatables.net/

ホントメモ帳やね
Riot.js + Webpack でローカルブラウザに Hello World するところまで 

# 成果物イメージ
```
├── app
│   ├── app.tag
│   ├── index.js
│   └── name.tag
├── package.json
├── public
│   └── index.html
└── webpack.config.js
```

# プロジェクト作成
```shell
npm init
```

# パッケージインストール
```shell

npm i -D riot riotjs-loader babel babel-loader webpack webpack-dev-server @babel/core
```

# public/index.html 作成
```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App</title>
  </head>
  <body>
    <app></app>
    <script src="bundle.js"></script>
  </body>
</html>
```

# app/*.tag ファイル作成

### app/name.tag 作成
```html
<name>
  <h1>{ opts.first }, { opts.last }</h1>
</name>
```

### app/app.tag 作成
```html
require('./name.tag');

<app>
  <name first="Hello" last="World"></name>
  <name first="Ola" last="Mundo"></name>
</app>
```

# app/index.js 作成
```javascript
require('./app.tag');

riot.mount('*');
```

# webpack.config.js 作成
```javascript
var webpack = require('webpack');

module.exports = {
  entry: './app/index',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      riot: 'riot'
    })
  ],
  module: {
    rules: [
      { test: /\.js$|\.tag$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' }, enforce: 'pre' }
    ]
  },
  devServer: {
    contentBase: './public'
  }
};
```

# アプリケーション起動
```shell
$ ./node_modules/.bin/webpack-dev-server --inline --hot --mode development
```
package.json の scripts に エイリアスを作ると良いかもしれない。

# ブラウザの出力を確認

`http://localhost:8082/` にアクセス。

<img width="1194" alt="スクリーンショット 2018-11-16 15.34.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/142263/595cd6bc-7688-3fa2-9843-b6c1886c236e.png">

こんな感じになってればOK。

# 参考にしたリンク

https://qiita.com/yaaah93/items/f06a993215d55215ed08
https://qiita.com/shota_abe/items/fbd6d988188442a4d11c
https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847
https://www.npmjs.com/package/riotjs-loader
https://riot.js.org/download/
nuxtでgenerateしたファイルをローカルで実行する。

nuxtでgenerateすればdistフォルダに書き出すことができますが、ローカルで確認しようとすると、
そのままではパスの関係上で上手く実行できない。それを実行できるようにした。

やることは以下の２つ。

#相対パスで認識するように書き換え
```nuxt.config.js
export default {
   if(!ctx.isDev) {
      config.output.publicPath = '_nuxt/'
   }
}

```

#index.html のnot be found回避
index.htmlを開くと「This page could not be found」になるので、index.vueを表示するように回避した。

```nuxt.config.js
export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/index.vue')
      })
    }
  }
}

```

これで、サーバー無しに実行・確認できますね。
[iptables]特定ポートへのパケットを別ホストに転送する

# はじめに
ふとしたことで自宅サーバの特定ポートをさくらVPS経由で公開したい衝動に駆られたので、iptablesで設定してみました。

# 前提環境
さくらVPS側：Ubuntu16.04(カスタムOS)
自宅サーバ側：debian9(Stretch)

   ※双方のサーバはVPNで接続されています。

# 参考サイト

[Kerosoft:Modus Operandi『iptablesで特定のポートを別のホストへ転送する方法』](https://mo.kerosoft.com/0203)
[Linux Advanced Routing & Traffic Control HOWTO『MSS クランプによって Path MTU Discovery 問題を回避する』](https://linuxjf.osdn.jp/JFdocs/Adv-Routing-HOWTO/lartc.cookbook.mtu-mss.html)

# iptables.rulesの編集

## NATテーブル

```bash:/etc/iptables/iptables.rules
*nat
# 外からの特定ポートのパケットを自宅サーバに転送
-A PREROUTING -m tcp -p tcp --dst [公開しているIP] --dport [ポート番号] -j DNAT --to-destination [自宅サーバのIP]:[ポート番号]
#自宅サーバ宛パケットの送信元アドレスをさくらVPSのVPN側IPに付け替える。
-A POSTROUTING -m tcp -p tcp --dst [自宅サーバのIP] --dport [ポート番号] -j SNAT --to-source [さくらVPSのVPN側IP]
COMMIT
```

## FILTERテーブル

指定したポートのみ許可しているため、転送するポートの通信を許可する設定をFILTERテーブルに追加する必要がある。

```bash:/etc/iptables/iptables.rules
*filter
# NATのPREROUTINGを通って変換されたアドレスに対して許可
-A FORWARD -m tcp -p tcp --dst [自宅サーバのIP] --dport [ポート番号] -j ACCEPT
# 戻りのパケットも許可する。(TCPのフラグで判断)
-A FORWARD -m state --state ESTABLISHED,RELATED -j ACCEPT
# MTUが違うネットワーク間の適切なMSSを計算する(念のため)
-A FORWARD -p tcp --tcp-flags SYN,RST SYN -j TCPMSS --clamp-mss-to-pmtu
```

# 設定反映

iptables.rulesの編集が終わったら、設定を反映させる。

```bash
# iptables-restore < /etc/iptables/iptables.rules
```
create-react-app を google cloud platformのapp engine(standard)で動かす。

create-react-appをgoogle cloud platformのapp engineで動かそうとした時に戸惑ったので、その時のメモです。

普通にdeployすると node app.js が動いてしまって、create-react-appで作られたアプリが起動しない。

そこで下記を実行する。

```terminal
npm run build
```

すると、buildフォルダが作られる。
<img width="196" alt="スクリーンショット 2018-11-16 13.55.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/278927/6f54ac29-5cc7-aa59-be5c-993b30bfe0de.png">

次に、yamlファイルで下記のように書いてやる。

```terminal
handlers:
- url: /
  static_files: build/index.html
  upload: build/index.html

- url: /
  static_dir: build
```

で、deployするとcreate-react-appで作られたアプリが起動してくれます。
C#でAlexa用のテーブルからデータを取得。（高レベルAPIを使って）

#はじめに
DynamoDBにC#を使って[テーブルを作成](https://qiita.com/shuhey/items/ea6edeb00262b95e472e)し、[データを追加](https://qiita.com/shuhey/items/23858cfd39a99727230f)するところまでできるようになりました。

次はテーブルのデータを取得する方法です。
[公式](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/WorkingWithItemsDocumentClasses.html)にも説明があるので、そちらも参照してください。 

#データの取得

まずは`AmazonDynamoDBClient`のインスタンスを作成し、目的のテーブルのインスタンスを取得します。

```csharp
            AmazonDynamoDBClient client = new AmazonDynamoDBClient(); //これを介してDynamoDBにアクセスする

           //目的のテーブルを取得
            var table = Table.LoadTable(client, tableName);

            //id(プライマリキー)がtestUserであるレコードを取得する
            var result3 = table.GetItemAsync("testUser").Result;

            //そのレコードのattributes列に格納されているデータをDocument型で取得。
            var attrData = result3["attributes"].AsDocument();
            //Document型のattrDataから「sign」をキーにして値を取得。
            var sign=attrData["sign"];
            #endregion

            //手抜き確認。
            //Versionにsignを入れて確認する。。。
            return new SkillResponse
            {
                Version = sign,
                Response = new ResponseBody()
            };
```

さて、これを実行してVisual Studioでテスト実行してみると、レスポンスのJSON内のVersionに「ふたご座」が入っており、値が取得できていることが確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/245438/cb8d7b5b-a2f3-c949-517d-ca178054e753.png)


#おわりに
これで、テーブル作成、データの追加、データの取得の方法がわかりました。

これで、本当に、今度こそ、[公式チュートリアル第4回](https://developer.amazon.com/ja/blogs/alexa/post/4144a8ea-7549-4c44-a4bd-e94cb93807ea/chapter4-jp)をC#でやります。
Jupyter notebookでPythonのバージョンを取り出してみたり

## これは

sysを使って、現在使ってるpythonのバージョンを取り出す方法を書きます！

「特定のversionじゃないとTensorFlowが動かない！」なんてこともあるので、そういう時必要かもですね

## 環境

・macOS Mojave version 10.14.1

## jupyter notebookを立ち上げる

```terminal

me$ jupyter notebook

```


sysをimportしてpythonのversionを取り出します

<img width="856" alt="スクリーンショット 2018-11-16 14.39.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/a782db67-1e9e-ce92-b26b-109778e3c9be.png">

### version_infoを利用することで、細かいversionを取り出せます

<img width="878" alt="スクリーンショット 2018-11-16 14.39.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/7396894d-aded-68f4-589e-0a343102dd6a.png">

### 条件分をかいてみたり

<img width="887" alt="スクリーンショット 2018-11-16 14.41.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/89b17590-db2a-cc90-4045-367955601a9b.png">

### 最後に：使うメソッドによって返り値の型が変わります。

<img width="874" alt="スクリーンショット 2018-11-16 14.43.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/b2974b8b-1ad3-c93e-7063-a9227d8e73ab.png">

version_infoを利用する場合、intで返してくれるんですね！
OpenSimの使い方

#OpemSimのつかいかた
超便利、OpenSimを使ってシミュレータの場所を一気に特定します。

現在立ち上げているシミュレータの場所を視覚的にわかりやすくしてくれるツールです。
https://github.com/luosheng/OpenSim

日本語の解説ページがなかったので解説ページを作成してみました。

##インストールしてみる
readme.mdにかいてある通りにします。

```以下引用:ターミナルからコマンドラインで
Install with Homebrew Cask
Install Homebrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install Cask: brew install cask
Install OpenSim: brew cask install opensim
```

以上でインストールは終了です。
常駐は、画面右上のタスクバーにしています
<img width="715" alt="スクリーンショット 2018-11-16 14.22.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/316869/b07c58bb-9d8a-972f-6b1d-a7f43bbbdfd2.png">

再起動してなくなったら、②のSpotlight検索からopenSimと打つとでてきます
<img width="686" alt="スクリーンショット 2018-11-16 14.26.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/316869/ae9125da-f78d-9e30-b6a2-9937809133ee.png">

##使ってみよう
OpenSimのアイコンをタップするとシミュレータの一覧がでてきます。
これはインストールされてるSDK分だけでてくるので昔からつかってると増えます。
<img width="233" alt="スクリーンショット 2018-11-16 14.32.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/316869/97517151-0037-d50a-5074-779358948f89.png">

色がついているのが現在立ち上がってるシミュレータですね。

##アプリのディレクトリをfinderで見よう
シミュレータ→見たいアプリにカーソル→Reveal Sandbox in Finderにカーソルをあわせてタップするとfinderが開きます
<img width="558" alt="スクリーンショット 2018-11-16 14.32.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/316869/618efab4-8c4e-c71c-3dba-49fdfe3e4337.png">

Library→Applecation Support→（自分で作ったアプリ）の下にrealmやsqliteのファイルがあるので、realmブラウザーやDB Browser for SQLiteなどで開きます。
<img width="745" alt="スクリーンショット 2018-11-16 14.34.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/316869/7c0f80ce-074c-104b-2f5c-62974aa9c0e8.png">


以上で終了です！
お疲れ様でした。
AugurにWEBブラウザで接続してマーケットを見る方法

Augurは現在、テストネットとメインネットの両方で稼働しており、それぞれは独立しています。
マーケットの作成やシェア(選択肢への投票)など、全てWEBブラウザ上で行うことができます。


# テストネットにブラウザのみで接続する
テストネット(Rinkeby)に接続するのは簡単で、以下のURLにアクセスするだけです。
[https://dev.augur.net/](https://dev.augur.net/)
左メニューの「MARKET」からカテゴリを選ぶと、各マーケットを見ることができます。
![augur-testnet.png](https://qiita-image-store.s3.amazonaws.com/0/142577/ce8c0faf-1bfb-6dec-0466-eaa6655e3cd6.png)


# テストネットにアプリ経由で接続する
Augurアプリを使うと、各種テストネットやメインネット、ローカルに構築した環境にWEBブラウザで接続することができます。

- [公式ホームページ](https://www.augur.net/)からアプリをダウンロードしてインストールします
![augur-download-link.png](https://qiita-image-store.s3.amazonaws.com/0/142577/f811e8cf-65e6-0b25-9433-9a3e580fbc5c.png)


- アプリを起動します

- 接続先に「Rinkeby」を選んで「Connect」をクリックします
<img src="https://qiita-image-store.s3.amazonaws.com/0/142577/c64890c3-d29e-90a0-1a2d-2367cacaf8db.png" width=50%>


- 「Processing Market Data」(ブロックの取り込み)が完了するまで待ちます

- 下側にある「Open in Browser」をクリックします

- WEBブラウザに表示されます


# メインネットにアプリ経由で接続する
手順はテストネットにつなぐ時とほとんど変わりません。

- 接続先に「Mainnet(default)」を選んで「Connect」をクリックします。

- あとはテストネットの場合と同じです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/142577/1aebfbc2-e9e4-2e03-c7aa-c7b0b8e48c78.png" width=50%>

# 予測をたてて投票する

実際に予測に投票する場合、WEBブラウザに[Metamask](https://metamask.io/)をインストールするなど、ETHをブラウザ経由で支払えるようにする必要があります。


テストネットはETHを無料でもらえるので、投票を試してみてください。

次回は[Augurのシステム構成](https://qiita.com/jansnap/items/d3f52f24eea37a972da9)について説明します。
Arduino Uno Rev3 win7 ポート(COMとLPT)すら表示されない

デバイスマネージャーで認識されないばかりかポート(COMとLPT)
すら表示されなかったが、表示→レガシハードウェアの追加で
追加することができた
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/107052/b7b806ea-f282-a36d-524d-a54fd6b57e3f.png)
けどまだ何か足りない

と思ったけど全然関係なくて、別のUSBの接続先に変えたらあっさり認識されました。
他のUSBの接続先はなんかゆるくてちゃんと入らなかったですが、
認識されたところはちゃんと深く入りました。
【Java】問題No.3

## 問題3

* 『==演算子』 と 『equalsメソッド』の違いは何でしょうか？

## 解答3

* 『==演算子』は変数の値が同じであることを示しています。
※参照型の場合、アドレスが同じであること  

* 『equalsメソッド』は参照アドレス先の値が同じであることを示しています。

乱暴に言うと、プリミティブ型は『==』で比較してOK。
参照型は『equals』を使わないと中身を比較した際に正しい結果は得られない。
と覚えて頂ければ良いかと・・・
【Rails】InvalidAuthenticityTokenでフォーム送信が出来ないエラーの解決方法

# railsのCSRF対策が原因
生のHTMLを用いてフォームを作成すると、外部のformから送信された可能性などを考慮しRailsがアクセスを弾いてくれる

またはjsでフォームの送信処理を行うと出る可能性がある。

## 解決方法は form_tag などのヘルパーで記載すること
railsのヘルパーを用いることで解決できます

```
<%= form_tag hoge_path, id: "form01", name: "form01" %>
```
App ServiceをApplication Gatewayのバックエンドとして実装してWAFを試す

App ServiceにWAFを実装したかったので試した手順を残します。
App Serviceは既にあるものとします。

# Azure WAF
AzureのWAFはApplication GatewayというL7ロードバランサーサービスに付帯して使うことができます。
ルールセットはOWASPモジュールに基づいています。

# Application Gateway構築
以下公式手順でサクッと作ります。レベルは[WAF]もしくは[WAF V2]を選択します。
[アプリケーション ゲートウェイの作成](https://docs.microsoft.com/ja-jp/azure/application-gateway/quick-create-portal)

# バックエンドにApp Serviceを指定する
* バックエンドプールを開きます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/270f01be-ff25-9167-3f52-ddeb0cd0dd87.png)

* デフォルトは以下の状態です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/fa217d30-90da-a133-035d-64c9d5062a1d.png)

* [App Service]を選択し、プルダウンから該当のApp Service名を選びます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/79bbb466-ad23-e55e-54a0-bfe92e085482.png)

* HTTP設定を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/01c70eea-09aa-89f1-5a82-552cb29e80e9.png)

* デフォルトは以下の状態です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/de52d266-5ca0-6eff-366c-8e827388963e.png)

* [App Service用に使用します]にチェックを入れて保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/af1d2699-5d3e-f825-a48b-a6b78e19a674.png)

# WAF機能を有効にする
* ファイアウォールの状態を[有効]にします。機能検証のためモードは[防止]にしておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/dfde8ffe-44fc-66df-583e-af5fef5c8ce9.png)

# 機能テスト
* 以下URLをブラウザから実行します。

```
http://[Application Gateway パブリックIP]/?<script>test</script>
```

* 403エラーが出ればOKです。  
![image.png](https://qiita-image-store.s3.amazonaws.com/0/180335/cee7a00b-b0f5-cbf9-ae99-9e0bfefb8102.png)
fishでpostgresqlのパスを通す

[Rails で postgresql を使う(インストールからマイグレーションまで)](https://qiita.com/longtime1116/items/9045717ff8607bed07fe#%E8%B5%B7%E5%8B%95%E6%8E%A5%E7%B6%9A
)
で、PATHを通す時にbashではなくfishを使っていたので書き方が分からずハマったのでメモ。


`~/.config/fish/config.fish` に、以下を追記する

```
set -x PGDATA /usr/local/var/postgres/
```

スペシャルサンクス　numacchi (@YINM ) https://github.com/yinm
シリアル通信によるkgdb接続をしようとするとエラーが出る

# エラー

```
(gdb) target remote /dev/ttyS0
Remote debugging using /dev/ttyS0
Ignoring packet error, continuing...
warning: unrecognized item "timeout" in "qSupported" response
Ignoring packet error, continuing...
Remote replied unexpectedly to 'vMustReplyEmpty': timeout
(gdb)
```

```
(gdb) set debug remote 1
(gdb) target remote /dev/ttyS0
Remote debugging using /dev/ttyS0
Sending packet: $qSupported:multiprocess+;swbreak+;hwbreak+;qRelocInsn+;fork-events+;vfork-events+;exec-events+;vContSupported+;QThreadEvents+;no-resumed+;xmlRegisters=i386#6a...putpkt: Junk:
Sending packet: $qSupported:multiprocess+;swbreak+;hwbreak+;qRelocInsn+;fork-events+;vfork-events+;exec-events+;vContSupported+;QThreadEvents+;no-resumed+;xmlRegisters=i386#6a...putpkt: Junk:
Sending packet: $qSupported:multiprocess+;swbreak+;hwbreak+;qRelocInsn+;fork-events+;vfork-events+;exec-events+;vContSupported+;QThreadEvents+;no-resumed+;xmlRegisters=i386#6a...Sending packet: $qSupported:multiprocess+;swbreak+;hwbreak+;qRelocInsn+;fork-events+;vfork-events+;exec-events+;vContSupported+;QThreadEvents+;no-resumed+;xmlRegisters=i386#6a...putpkt: Junk:
Timed out.
Timed out.
Timed out.
Ignoring packet error, continuing...
Packet qSupported (supported-packets) is supported
warning: unrecognized item "timeout" in "qSupported" response
Sending packet: $vMustReplyEmpty#3a...putpkt: Junk:     05}
Sending packet: $vMustReplyEmpty#3a...putpkt: Junk: 
Sending packet: $vMustReplyEmpty#3a...putpkt: Junk: t#U;
Sending packet: $vMustReplyEmpty#3a...putpkt: Junk:
Timed out.
Timed out.
Timed out.
Ignoring packet error, continuing...
Remote replied unexpectedly to 'vMustReplyEmpty': timeout
(gdb)
```


# 原因/解決方法

今回はVM起動(シリアル接続)のタイミングが原因っぽい。
デバッギマシンのkdbが完全に起動し終わったタイミングでデバッガマシンを起動(シリアル接続開始)するとこのエラーを吐かずに成功することがわかった。
CBAM：Convolutional Block Attention Moduleを読んだ

Woo, Sanghyun and Park, Jongchan and Lee, Joon-Young and So Kweon, "CBAM: Convolutional Block Attention Module", in ECCV2018.[Online PDF at CVF](http://openaccess.thecvf.com/content_ECCV_2018/papers/Sanghyun_Woo_Convolutional_Block_Attention_ECCV_2018_paper.pdf)

# 1.どんなもの？
・Attention構造を組み込んだ畳み込みニューラルネットワークモジュールを提案
・特徴マップから、channelと空間の２つの別々の次元に沿ってAttentionマップを推定し、特徴マップとAttentionマップを乗算して新しい特徴マップを作る
・軽量なので色々なCNNに組み込むことができ、End-to-Endに学習が可能
・そのうちコードを公開する予定らしい
# 2.先行研究と比べて何がすごいか？
提案したモジュールを接続することにより、複数のベンチマーク（ImageNet-1K、MS COCO、およびVOC 2007）でさまざまなネットワークのパフォーマンスが向上したこと

# 3.技術や手法の肝はどこにあるか？
![スクリーンショット 2018-11-16 12.11.46.png](https://qiita-image-store.s3.amazonaws.com/0/249838/7894238c-5173-ae57-f622-230ab043995a.png)
特徴マップに対してチャネル方向のAttentionを行なった後、spatial方向でAttentionをかける
$$ F \in R^{C\times H\times W},M_c \in R^{C\times 1 \times 1},M_s \in R^{1\times H \times W}$$
$$F'=M_c(F)\otimes F$$
$$F''=M_s(F')\otimes F'$$


## Channel Attention Module
![スクリーンショット 2018-11-16 12.23.13.png](https://qiita-image-store.s3.amazonaws.com/0/249838/f5c808d6-43c7-81dc-3c4b-a5baae1b6ff0.png)
チャネルの注目は、入力画像が与えられると意味があるものに焦点を当てる
平均値プーリングと最大値プーリングを行い、1つの隠れ層を有するMLPに入力し、出力された特徴ベクトルを足し合わせて新しい特徴ベクトルを作る
![スクリーンショット 2018-11-16 12.29.13.png](https://qiita-image-store.s3.amazonaws.com/0/249838/d3eb895b-37ca-6efe-7bf8-a8b27b488894.png)

## Spatial Attention Module
![スクリーンショット 2018-11-16 12.37.15.png](https://qiita-image-store.s3.amazonaws.com/0/249838/1b05cbc3-b40f-d103-2161-278a1ffaf020.png)
チャネルと組み合わせることで「何」が「どこ」にあるかについて焦点を当てる
チャネル方向に平均値プーリングと最大値プーリングを行い、フィルタサイズ7x7で畳み込みをすることで新しい特徴マップを作る
![スクリーンショット 2018-11-16 12.43.12.png](https://qiita-image-store.s3.amazonaws.com/0/249838/ec78a711-f745-e750-a806-ad09b90c5561.png)


# 4.どうやって有効だと検証した？
## このネットワークを選択するに至った実験
使用ネットワーク
![スクリーンショット 2018-11-16 16.17.16.png](https://qiita-image-store.s3.amazonaws.com/0/249838/6d31af1d-bd6a-2661-8e1b-e61dab2cea44.png)

### Channel方向のAttentionについて
![スクリーンショット 2018-11-16 12.56.30.png](https://qiita-image-store.s3.amazonaws.com/0/249838/6a415b70-d6ac-6c47-caf5-02a9f7d5df39.png)

### 2D Spatial方向のAttentionについて
![スクリーンショット 2018-11-16 12.58.01.png](https://qiita-image-store.s3.amazonaws.com/0/249838/7142bb87-c2e4-6185-788c-7e782b97acff.png)

### 二つのAttention構造を組み合わせる
![スクリーンショット 2018-11-16 13.01.06.png](https://qiita-image-store.s3.amazonaws.com/0/249838/123b9c78-3e68-3ded-02c0-33e21c0b94aa.png)

## 実験
Squeeze-and-Excitation Networks(同じようなやつ)よりうまくいってるらしい[pdf](https://arxiv.org/pdf/1709.01507.pdf)
![スクリーンショット 2018-11-16 13.04.21.png](https://qiita-image-store.s3.amazonaws.com/0/249838/1c5483e8-3e1d-5acd-c686-f98984ac69f4.png)
![スクリーンショット 2018-11-16 13.05.14.png](https://qiita-image-store.s3.amazonaws.com/0/249838/9efe4fbf-a3a3-db68-52b8-7172e5c9451d.png)
Xcodeで、Failed to create plugin placeholder for "Extenstion".appex と言われたときの対策

何もしてないのに壊れました。
おそらく誤操作or勝手にCheckBoxが外れていた。とても腹立たしい。

## エラー

文章：

```
Failed to create plugin placeholder for /Users/{name}/Library/Developer/Xcode/DerivedData/{ProductName}/Build/Products/Debug-iphonesimulator/{ProductName}.app/PlugIns/{ExtensionName}.appex
```

画像：
![スクリーンショット_2018-11-16_13_36_08.png](https://qiita-image-store.s3.amazonaws.com/0/93918/6de9d384-fa44-94e6-a3a3-e3290658882e.png)

問題がわかりづらい。
PluginのPlaceholderの作成に失敗する原因は何があるのか出して欲しい。ほんとに。

## 対策

僕の場合、BuildPhaseの設定が間違っていた。そのため、
`Embed App Extensions` の `Copy only when installing` を ON にすればよい。

![スクリーンショット_2018-11-16_13_42_05.png](https://qiita-image-store.s3.amazonaws.com/0/93918/9cd6f590-c138-608d-75c8-020e4ee27a89.png)

## ほか、最後に

他に原因として

* BundleIDが間違ってる

ことがあるようです。

他に対策として、BuildPhaseを消すという荒技もあるようですが、未確認です。（そもそもBuildPhaseで対象を消したらExtensionの意味がなくなるのでは？とか思いますが...）

今回はXcodeの再起動や、DrivedDataの削除とかは有効に効かなかったです。
Onenoteスタイル

ノートアプリ探しの旅でのメモ
Onenoteのスタイルをマークダウンアプリにコピペしてみたらどうなるか。

## 私
マークダウンに対応したらいいのになと思うOnenote使い
wordみたいにスタイルの書式設定させろ～

## Onenoteのスタイル
![image.png](https://qiita-image-store.s3.amazonaws.com/0/267899/cd29feed-4e80-ca8c-b5e4-d825555ce5cf.png)

## DropboxPaperにコピペした結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/267899/9656da2c-2fd3-29d5-5e07-f62a2283c8b9.png)

  - DropboxPaperは見出し3までしか対応しておらず、かつ見出し3は太字と同等。
  - 太字、斜体、下線、打ち消し線に対応していた。下付き、上付きは対応せず。
  - コードは\`\`\`によるコードブロックではなく、``による行内コードになる（複数行でも）。

## Typoraにコピペした結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/267899/84ff2d35-7b70-7912-0d13-0e4388f2dd94.png)

- 太字、斜体、下線、打ち消し線、下付き、上付きに対応していない（Typoraオプションで有効にしていても不可）。



## Bootstnoteにコピペ

プレーンテキストしかコピペできず。まったくスタイルには対応していない。

追記
2018/11/16更新のver.0.11.11で対応してました。
[GitHub - BoostIO/boost-releases: 🚀 Boostnote app releases & changelog](https://github.com/BoostIO/boost-releases)
> Add support for converting to MD when paste HTML

## 評価
  - Onenoteのスタイルはちゃんと内部的にはmd対応になっているようだ。
  - ページタイトルスタイルは標準と同じ。
  - 標準のフォント（とページタイトルのフォント）はオプションで変更可能だが、他のスタイルのフォントは游ゴシック固定。変更できるオプションはない。
  - コードスタイルは英数字はConsolasフォントになる。日本語は游ゴシック固定。
  - コードスタイルを選択していても日本語のあとに英数字を入力すると自動でConsolasになるのではなく游ゴシックのまま英数字が入力される。テキストブロックにフォーカスがある状態で再度コードスタイルを選択すると英数字がConsolasに変換される。
    - この文ブロックもスタイルは標準スタイルだが、評価（見出し2スタイル）の後に続けて書いているのでMyricaM Mにならずに游ゴシックのまま入力されている。
  - Onenoteコードスタイルはマークダウンのように背景色が灰色になってくれれば使いやすいのだが。

おまけ
- QiitaにOnenoteからコピペすると画像としてアップロードされる。
BoostAsio サンプル001：マルチスレッドとの仕事のやり取り

最近になって、boost勉強中
やりこなせ、サンプル数
書き方やっぱりC言語風
ラップも仕事も迷走中
よーちぇけら

#仕事の依頼
出来るだけシンプルに、マルチスレッドワーカーに仕事を依頼したい
WorkerThreadってやつですね。
でも、依頼したい仕事のネタが同じデータなのでshard_ptrなんす

```
#include <iostream>
#include <boost/asio.hpp>
#include <boost/thread.hpp>
class event_manager {
    boost::asio::io_service& io_service_;
    boost::shared_ptr<boost::asio::io_service::work> work_;
    boost::thread_group group_;
public:
    event_manager(boost::asio::io_service& io_service)
        : io_service_(io_service)
    {
        work_.reset(new boost::asio::io_service::work(io_service_));
        for (std::size_t i = 0; i < 3; ++i) {
            group_.create_thread(boost::bind(&boost::asio::io_service::run, &io_service_));
        }
    }
    void stop()
    {
        work_.reset();
        group_.join_all();
    }
    ~event_manager()
    {
        stop();
    }

};


class Work {
    boost::asio::io_service& io_service_;
    boost::asio::strand strand_;
    std::string name_;
public:
    explicit Work(boost::asio::io_service& io_service, const std::string& name)
        : io_service_(io_service), strand_(io_service), name_(name) {}
    void lets_do(std::shared_ptr<const std::string> msg)
    {
        io_service_.dispatch(strand_.wrap(boost::bind(&Work::doing, this, msg)));
    }
private:
    void doing(std::shared_ptr<const std::string> msg)
    {
    	std::cout <<  "start : " + name_ + " -------" << *msg << std::endl;
        boost::this_thread::sleep(boost::posix_time::seconds(2));
    	std::cout <<  "end   : " + name_ + " =======" << *msg << std::endl;
    }
};

int main()
{
	boost::asio::io_service io_service;
    event_manager manager(io_service);

    Work workA(io_service, "[Working A Job]");
    Work workB(io_service, "[Working B Job]");

	auto pt1 = std::make_shared<std::string>("pt1");

	std::cout << "Would you do work?" << std::endl;
    workA.lets_do(pt1);
    workA.lets_do(pt1);
    workB.lets_do(pt1);
    workB.lets_do(pt1);
    workA.lets_do(pt1);
	std::cout << "Sounds good ! pt1 working on thread." << std::endl;

	for(int i=0; i<10 ; i++){
		auto pt2 = std::make_shared<std::string>("pt:" + std::to_string(i));
	    workA.lets_do(pt2);
   	 	workB.lets_do(pt2);
	}
	std::cout << "Go it. All work doing." << std::endl;
	manager.stop();
}

```
tesseract in Docker 環境作った

OCRの実験がしたかった。googleは精度がいいが、お高い！ということで無料のものを試したメモ

# Dockerで環境を

```
docker run -it python /bin/bash
```
## インストール
##### tesseract本体インストール

```
apt install tesseract-ocr tesseract-ocr-jpn
apt install libtesseract-dev
pip install pytesseract
```

##### pythonの確認
```
root@ecfe5ef03ea4:/# python --version
Python 3.7.0
```
##### pyocrインストール
```
root@ecfe5ef03ea4:/# pip install pyocr
Collecting pyocr
  Downloading https://files.pythonhosted.org/packages/37/54/2d169a102a3727f3ebe535da9263babb88a5862516ae9a798a7e458399a6/pyocr-0.5.3.tar.gz
Collecting Pillow (from pyocr)
  Downloading https://files.pythonhosted.org/packages/62/8c/230204b8e968f6db00c765624f51cfd1ecb6aea57b25ba00b240ee3fb0bd/Pillow-5.3.0-cp37-cp37m-manylinux1_x86_64.whl (2.0MB)
    100% |████████████████████████████████| 2.0MB 18.0MB/s 
Collecting six (from pyocr)
  Downloading https://files.pythonhosted.org/packages/67/4b/141a581104b1f6397bfa78ac9d43d8ad29a7ca43ea90a2d863fe3056e86a/six-1.11.0-py2.py3-none-any.whl
Building wheels for collected packages: pyocr
  Running setup.py bdist_wheel for pyocr ... done
  Stored in directory: /root/.cache/pip/wheels/ff/94/8e/dccadc6bce17c41a9dbb0c7ccd44acdb9dcc0edd9efa42eaf6
Successfully built pyocr
Installing collected packages: Pillow, six, pyocr
Successfully installed Pillow-5.3.0 pyocr-0.5.3 six-1.11.0
```
##### edgeの処理したくて追加

```
pip install opencv-python
pip install matplotlib
```

本当のメモ書きなので、深く突っ込まないように
padding-right、padding-leftをブラウザの両端まで伸ばす方法

以下にすると、innerのpadding-right、padding-leftがブラウザの両端まで伸びる

```sass
.wrap
  width: 970px
  margin: 0 auto

.inner
  margin-right:  calc(-1 * (100vw - 100%)/2)
  margin-left:   calc(-1 * (100vw - 100%)/2)
  padding-right: calc((100vw - 100%)/2)
  padding-left:  calc((100vw - 100%)/2)
```

```html
<div class="wrap">
  <div class="inner">
  </div>
</div>
```
CakePHP3のルーティングでactionの引数の順番を指定する

# 概要

CakePHP3系のルーティングで、action側で受け取る引数の順番を指定する方法について調べる機会がありましたが、その方法が公式のドキュメントには見当たらなかったので記事として残しておきます。
もし、該当する公式のドキュメントがありましたら、コメント欄からでも教えていただけると助かります！

# 動作確認環境

- CakePHP: 3.5.17
- PHP: 7.1
- MySQL:: 5.6

# 問題点

まず、前提条件として、対象ページのURLの形式が `https://example.com/{ユーザー名}/{記事ID}/` のようになっており、2ページ目以降のURLの形式が `https://example.com/{ユーザー名}/{記事ID}/page/{ページ番号}/` のようになるとします。
さらに、ルーティングの処理でユーザーIDと記事ID、さらに2ページ目以降であればページ番号を渡すようにして、コントローラ側のアクションでは下記のような順番で引数を受け取ることを期待するものとします。

```php
// ページ番号が最後に来てほしい
public function view($userId, $articleId, $page = null)
{
    // いい感じの処理
}
```

まずは、[Cookbookのルーティングの記事](https://book.cakephp.org/3.0/ja/development/routing.html)等を参考に、下記のように実装してみましたが、actionに入ってくる引数の順番は`$articleId`, `$page`, `$userId`となり、期待する順にはなりませんでした。

```php
$routes->connect(
    "/{ユーザー名}/:articleId/page/:page/",
    [
        'controller' => 'Articles',
        'action' => 'view',
        // この値がactionの $page に入ってしまう
        $userId
    ]
)->setPass(['articleId', 'page']);
``` 

上記のケースでは、コントローラ側で`$this->request->getParam()`を利用してpage情報を取得することで、順番を指定せず対処こともできますが、setPassでaction側の引数にマッピングできることを考えれば、`$userId`も含めた順番の指定ができるのではないかと考えました。

# 解決方法

結局、それらしい情報は見つからなかったため、関連する箇所のソースを読むことに。
\Cake\Routing\Route\Route::parse にそれらしい記述を見つけて下記の様に実装してみたところ、無事、引数の順番を指定することができました。

```php
$routes->connect(
    "/{ユーザー名}/:articleId/page/:page/",
    [
        'controller' => 'Articles',
        'action' => 'view',
        'userId' => $userId
    ]
)->setPass(['userId', 'articleId', 'page']);
``` 

ポイントは、第二引数で`$userId`を指定する際に、配列のキーに適当な文字列を当てているところです。
これでsetPassで順番を指定することができるようになり、当初想定していた順番で引数を受け取ることができるようになりました。

また、上記の方法の副次的な効果として、View側でのリンク生成時も明示的にどのパラメータの値かを指定することができます。

```php
echo $this->Html->link(
    'Link title',
    [
        'controller' => 'Articles',
        'action' => 'view',
        'userId' => $userId,
        'articleId' => $articleId,
        'page' => $page,
    ]
);
```

# 最後に

今回紹介した方法は、ソースを見る限り特に問題なさそうですが、公式のドキュメントには記載がないため、もし利用する場合には自己責任でお願いします。

# 参考URL

- https://book.cakephp.org/3.0/ja/development/routing.html
- https://api.cakephp.org/3.6/class-Cake.Routing.RouteBuilder.html#_connect
シリアル通信/シリアルポート/シリアルデバイス

昔のコンピュータには「シリアル通信」と呼ばれるとある通信(詳細はwikipedia参照)用の端子「シリアルポート」という端子が存在していたが、今現在一般的に普及しているコンピュータからは消えた。
しかし、シリアル通信を用いて動作するソフトウェアやハードウェアが多く存在していたため、下位互換性のために、仮想的にシリアルポートを再現する仕組みが作られた。
Linuxにおいては、デバイスファイルが用いられる(私の環境では/dev/ttyS0という名前だった)。