OmniAICreator/Qiita-1.07M huggingface dataset:
文字列から数字を取り出す

##文字列から数字を取り出す方法

```c#
using System.Text.RegularExpressions;  //名前空間に追加

private void button1_Click(object sender, EventArgs e)
{
string str=Regex.Replace(textBox1.Text, @"[^0-9]","")  //正規表現
MessageBox.Show(str);
}
```
結果
![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/373766/42b74f0b-5fbf-f322-2280-2e5846113317.png)

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/373766/8a870ab1-c577-dee8-24ba-501ba65dd954.png)

テキストボックスの文字列から正規表現が一致したものを取り出す。
この場合は数字だけを取り出せる。


###参考
[Roba Memo - 素人のUnity覚書と奮闘記](http://robamemo.hatenablog.com/entry/2018/03/03/194425)
CSSのメディアクエリを誤解していた話

#概要
今までCSSを書いていて、メディアクエリで思惑通りスタイルが反映されないことが多々あり、まあ仕様なのだろうと軽く流して`!important`を付け足していましたが、根本的にメディアクエリを誤解していました。

CSSをそこそこ書いている人は理解されていると思います。

以下の内容は自分で色々テストして推測したメディアクエリの挙動なので、厳密には間違っているかもしれません。仕様というより、コーティングするときの考え方程度に捉えてください。

#今までの間違った考え方

例えば以下のように書いた場合↓

```css
p {
	size: 16px;
	color: red;  /* 赤色にする */
}

@media(min-width: 500px){  /* 画面サイズが500px以上の時は... */
	p {
		color: yellow;  /* 黄色にする */
	}
}
```

500px未満のとき↓

```css
p {
	size: 16px;
	color: red;  /* 赤色にする */
}

p {
	color: yellow;  /* 黄色にする */
}
```

500px以上のとき↓

```css
p {
	size: 16px;
	color: red;  /* 赤色にする */
}
```

こんな風に考えていました。
しかし、そんなに単純ではなかった。。。

#本当の考え方

メディアクエリは、二つのステップを踏むと考えてください。

1. メディアクエリで指定されたセレクタと**"セレクタが同一"**のプロパティの書き換え
2. 書き換えたプロパティの優先度を下げる

セレクタとプロパティとは、こいつらです。↓

<img src="https://saruwakakun.com/wp-content/uploads/2017/01/bdrfiletype-and-content-01-min.png" alt="セレクタとプロパティ" width=300px>

([サルワカ](https://saruwakakun.com/html-css/reference/selector)より引用)

###ステップ１ - プロパティの書き換え

例として以下のようなCSSがあるとします。  
今までの私は、これをみて「文字は黄色になる」と考えていたわけです。

```css
body p {
	color: blue; /* 青色にする */
}

p {
	size: 16px;
	color: red;  /* 赤色にする */
}

@media(min-width: 500px){  /* 画面サイズが500px以上の時は... */
	p {
		color: yellow;  /* 黄色にする */
	}
}
```

まず、メディアクエリは、セレクタ名が同一のセレクタのプロパティを書き換えます。  
あくまで対象の要素が一致するセレクタではありません。

ここで`p`と`body p`は同じ要素を示していますが、**別のセレクタ**として扱われます。  
(今回は`body p`としているので`p`と対象が必ず一致し違和感がありますが、`.header p`と`p`が別のセレクタとして扱われることを考えると、当たり前のことですね。)
  
書き換えると以下の通りです。

```css
body p {
	color: blue; /* 青色にする */
}

p {
	size: 16px;
	color: yellow;  /* 黄色にする */
}
```

(`body p`と`body > p`は同じものとして扱われるようです。)

###ステップ2 - 優先度を下げる
上述した例文を実行してみれば分かりますが、文字は<b style="color:blue;">青色</b>になります。  
つまり、メディアクエリを除いたスタイルの中でも、`body p`の方が優先度が低いにも関わらず、適用されてしまっているわけです。

書き換えると、以下のように処理されます。

```css
p {
	size: 16px;
	color: yellow;  /* 黄色にする */
}

body p {
	color: blue; /* 青色にする */
}
```

#解決方法

###1. `!important` をつける
あまり推奨される方法ではないですが、メディアクエリ内に限定して使用すれば、それほどソースコードが荒れることは無いと思います。それに、とても簡単です。

```css
/* 黄色になる */
body p {
	color: blue; /* 青色にする */
}

p {
	size: 16px;
	color: red;  /* 赤色にする */
}

@media(min-width: 500px){  /* 画面サイズが500px以上の時は... */
	p {
		color: yellow !important;  /* 黄色にする */
	}
}
```

###2. 最初から気をつける
セレクタに無駄なものをつけないようにしましょう。この記事で言いたいことはこれに尽きます。
`.header p{}`で指定可能なものを、`.header .menu p{}`のように無駄なものをつけないようにすることで、可読性も上がります。
【Node.js】Kintoneからレコードを取得する

今までは[kintone-nodejs-sdk](https://www.npmjs.com/package/kintone-nodejs-sdk)を用いてKintoneから情報を抽出していたのだが、久しぶりに見てみたら **廃止予定** になっていたので、別のパッケージを使った方法で取得する。

#参考ページ

Document
[https://kintone.github.io/kintone-js-sdk/getting-started/quickstart-node/]
(https://kintone.github.io/kintone-js-sdk/getting-started/quickstart-node/)

Github
[https://github.com/kintone/kintone-js-sdk]
(https://github.com/kintone/kintone-js-sdk)

#使用パッケージ

@kintone/kintone-js-sdk
[https://www.npmjs.com/package/@kintone/kintone-js-sdk]
(https://www.npmjs.com/package/@kintone/kintone-js-sdk)

#サンプルコード

FQDNとtldに関しては、Kintoneログインの際に記入するドメインからトップドメインまでを記載

詳細は以下参照
FQDNとは : [https://www.atmarkit.co.jp/aig/06network/fqdn.html](https://www.atmarkit.co.jp/aig/06network/fqdn.html)
tldとは : [https://sabanavi.com/server-term/topleveldomain/](https://sabanavi.com/server-term/topleveldomain/)

```index.js

// パッケージの読み込み
const kintone = require('@kintone/kintone-js-sdk');

// Kintoneで取得したトークン
let kintoneAuthWithAPIToken = (new kintone.Auth()).setApiToken('MY_TOKEN');
// KintoneのFQDNとtld
let kintoneConnection = new kintone.Connection('your.FQDN.tld', kintoneAuthWithAPIToken);

let kintoneRecord = new kintone.Record(kintoneConnection);

// アプリID
let appID = {your_app_id};
// 取得したいレコードID
let recordID = {record_id_that_will_be_retrived};

kintoneRecord.getRecord(appID, recordID)
// 成功時処理
.then((rsp) => {
console.log(rsp);
})
// エラー発生処理
.catch((err) => {
console.log(err.get());
});
```

kintone-nodejs-sdkよりもかなり簡潔で使いやすい。
変数などに格納して情報をやり取りする際は、必ず同期処理を行うことを忘れずに。

以下の記事がわかりやすくておすすめ
[JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる](https://qiita.com/YoshikiNakamura/items/732ded26c85a7f771a27)
pythonでマルチスレッドを起こす、 コールバック関数で結果を受け取る

#ソース
```python:python-thread-callback.py

from threading import Thread

class MyManager():
    def test(self):
        print("main started")
        MyThread(self.on_thread_finished).start()
        print ("main continue...")
    def on_thread_finished(self,data):
        print ("thread finished")
        print ("data = " +str(data))

class MyThread(Thread):
    def __init__(self,callback):
        Thread.__init__(self)
        self.callback = callback
    
    def run(self):
        print("thread started")
        data = 0
        for i in range(50000):
            data = data + i
        self.callback(data)
        print("thread stoped")

if __name__ == "__main__":
    m = MyManager()
    m.test()
    
 ```

#結果

```
main started
thread started
main continue...
thread finished
data = 1249975000
thread stoped
```
google mapで特定場所周辺で施設検索したURLを作成

グーグルマップの特定場所周辺で、施設検索した結果をURLにしたい。

例えば、観光地の近くの温泉や食事場所を、共有したり案内したりする場合。
シンプルなURL構成なら、動的にURLを作成することも可能。

```
https://www.google.co.jp/maps/search/[検索キーワード]/@[緯度],[経度],[ズーム率]z/

例）
https://www.google.co.jp/maps/search/温泉/@36.95549,139.8808,12z/
https://www.google.co.jp/maps/search/食事/@36.95549,139.8808,12z/
```

複数検索キーワードが複数の場合は、「+」でつなげれば良さそうだが、検索結果微妙そう。

埋め込んだグーグルマップに施設表示を追加する場合は下記が参考になりそう。
[GoogleMapsAPIでマップで施設検索してやんよ\!\!\! \| ときどきWEB](http://tokidoki-web.com/2015/11/googlemapsapi%E3%81%A7%E3%83%9E%E3%83%83%E3%83%97%E3%81%A7%E6%96%BD%E8%A8%AD%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E3%82%84%E3%82%93%E3%82%88/)


参考
 [Google Map で緯度経度を指定して場所を見つける方法 \| ラボラジアン](https://laboradian.com/show-google-map-by-lat-lng/)
MOONBlockでゲームを作ってみた

1.ゲームの概要

30秒間で爆弾を回避しながら、りんごをとるゲームです。
りんごを１回とるごとに10点加算されます。
30秒間でなるべく点数をとった人が勝ちです。
http://moonblock.jp/#s/5c9dbddd667821553841629
【QuantX】売買注文order関数の種類

#初めに
QunatXで注文コードを書くとき、いくつかのorder関数の中でどちらを使うのかに困ったことがあったので、今回は各order関数の意味や使い方法について簡単に紹介したいと思います。
(詳細内容は[アルゴリズム開発入門](https://determined-feynman-fb5a05.netlify.com/ja/api.html#Security)の「APIリファレンス　Security」に書いてあります)

#6種order関数の分類
QuantXで使われたorder関数は**注文方法**ｘ**注文量**を組み合わせて、下記六つになります。


|注文方法\注文量|株単位     |  金額   |    ポートフォリオ総評価額比率   |
|:-------------:|:-------------:|:---------------:|:--------------:|
|**order系**| order()            |   order_value() |       order_percent()       |
|**order_target系**| order_target()  | order_target_value() |    order_target_percent()       |



**(ポートフォリオ総評価額)**
 ＝現金＋保有ポジション評価額
 ＝現金＋[各株数量*現在株価]

では、これからorder系とorder_target系二種類の注文方法に分けて各order関数を説明します。

#【order系】指定単位ごと、一個一個注文
order系の関数を使えば、買いシグナルが続いて出てくる場合に連続的に注文することができます。一方、売買制限がないため(資金が足りないまで)、ポートフォリオで各銘柄の比例を制御できません。

*(売買例)*
*株AのSec.unit()=100, 1株=2,000円。現ポートフォリオ総評価額＝10,000,000円*

- **order**(amount, comment)：株の数量(Sec.unit()*倍数)を指定して注文を行います。
Sec.unit(): 最低売買株単位(主に100だが、非100の場合もあるので要注意)
 - 買い注文：order(sec.unit()\*10)　→　100\*10\=1000株を買う
 - 売り注文：order(sec.unit()\*-10)　→　100\*(-10)\=1000株を売る
　
- **order_value**(amount, comment)：金額を指定して注文を行ないます。
 - 買い注文：買い注文：order_value(100000)　→　<=100,000円 で株を買う
 - 売り注文：order_value(-100000)　→　>=100,000円 で株を売る

- **order_percent**(amount, comment)：現在のポートフォリオに比した割合で注文を行ないます。
 - 買い注文：order_percent(0.05)　→　<=10,000,000*0.05 = 500,000円 で株を買う
 - 売り注文：order_percent(-0.05)　→　>=10,000,000*0.05 = 500,000円 で株を売る  
\(*) 初期資金量が少なくて、割合も低く設定する場合、注文金額は銘柄の最低限注文額を下回って注文できなくなる可能性がある。


#【order_target系】総所持量を指定し、注文を一回でしまい
各株の量を控えることで、ポートフォリオの組成をある程度に把握できますが、一回の注文は最高制限の量/金額で注文しましたので、連続的に注文することはほぼできません。
(二回目の売買シグナルが出ても、所持量はもうマックスになったため、再び注文できない)

*(売買例)*
*株Bの1株=2,000円。現ポートフォリオ総評価額＝10,000,000円*

- **order_target**(amount, comment)：
 - 買い注文：order_target(300)　→　300株を買い
 - 売り注文：order_target(0)　→　株所持量を0にする = 全部の株を売る(手仕舞い)

- **order_target_value**(amount, comment)：この銘柄の総額を指定して注文を行ないます。
 - 買い注文：order_target_value(15000)　→　保有ポジション評価額が<=15,000円まで株を買い
 - 売り注文：order_target_value(0)　→　保有ポジション評価額が=0まで株を売る = 全部の株を売る(手仕舞い)

- **order_target_percenet**(amount, comment)：この銘柄の総保有額が総資産評価額(現金+保有ポジション評価額)に対して指定の割合となるように注文を行ないます。 amountには割合(例:5%なら0.05)を指定します。
 - 買い注文：order_target_percent(0.07)　→　**(**銘柄の保有ポジション評価額/ポートフォリオ総評価額**)**の割合が<=0.07まで株を買い
 - 売り注文：order_target_percent(0)　→　**(**銘柄の保有ポジション評価額/ポートフォリオ総評価額**)**の割合が=0まで株を売る = 全部の株を売る(手仕舞い)

#結論
order系もorder_target系も長所と短所があって、連続的に注文できる一方指定したポートフォリオの割合に至ると注文停止、という両方の長所を持つ関数は今なさそうです。
自分で条件式でorder関数の使用を切り替えるか、またはアルゴリズムを一回で一番いい時点で注文できる程度まで改善するか、今考える課題です。
iPhone X画面で上下の黒いバーの対応

#前書き
iphoneXの画面が既存のアスペクト比と合わないため、
このように表示されます。
<img width="382" alt="スクリーンショット 2019-03-29 14.47.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/242761/1548dfc6-e610-9f6d-b205-935b3ff21afe.png">
これだと、アップルの審査が通らないかもしれません。

#対応
上下の黒いバーにBG（Background）イメージを表示させます。
希の結果：
<img width="382" alt="スクリーンショット 2019-03-29 14.55.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/242761/d021d79a-560e-fa21-d14f-d29d2808b0da.png">

```objective_c:AppController.mm
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 
    ....   
    
    UIView *bg = [[[UIView alloc] initWithFrame:[window bounds]] autorelease];
    [bg addSubview:eaglView];
    [bg addSubview:_viewController->topImageView];
    [bg addSubview:_viewController->bottomImageView];
    _viewController.view = bg;
   ....
}
```
```objective_c:RootViewController.h
@interface RootViewController : UIViewController {
    @public UIImageView *topImageView;
    @public UIImageView *bottomImageView;
}
```
```objective_c:RootViewController.mm
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
        //720x1280はsetDesignResolutionSizeを設定されたサイズ
        float heightBG = ([[UIScreen mainScreen] bounds].size.height - (([[UIScreen mainScreen] bounds].size.width/720)*1280))/2;
        //iphoneXのTOPBG
        topImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f,[[UIScreen mainScreen] bounds].size.width,heightBG)];
        topImageView.image = [UIImage imageNamed:@"menu_head"];
        topImageView.contentMode = UIViewContentModeScaleToFill;
        
        //iphoneXのBOTTOMBG
        bottomImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, [[UIScreen mainScreen] bounds].size.height - heightBG,[[UIScreen mainScreen] bounds].size.width,heightBG)];
        bottomImageView.image = [UIImage imageNamed:@"menu_foot"];
        bottomImageView.contentMode = UIViewContentModeScaleToFill;
    }
    return self;
}
```
#最後に
端的と言うと、Coco2dXのeaglViewの上に、二つのBGイメージを乗せただけです。
既存のアスペクト比と合う画面の場合、BGイメージの高さが０になるので、見られないでしょう。
MySQLのINSERT関数（文字列の置換、挿入）の例

# やりたいこと
MySQLで、データをマスキングしたい。（氏名など）

# 経緯
調べたところ、文字列の置換ができるINSERT関数が出てきたので、その使い方を残します。

# 環境
Windows10（XAMPP5.6.38）、MySQL5.7

# INSERT関数の説明
パラメータは次のようになっています。

`INSERT(元の文字列, 対象位置※, 置換する文字数, 置換する文字列)`
　※対象位置・・・1文字目は1で指定します（0ではない）

戻り値は、以下の文字列です。
`「元の文字列」の「対象位置」の文字数目から「置換する文字数」分を、「置換する文字列」で置換（または挿入）したもの`

置換する文字数に0を指定すると、対象位置の前に、置換する文字列を”挿入”します。

今回は、どういう動きになるのか確認する為、SELECT文を実行していますが、
INSERT文のSET句でも使えます。

# 確認結果
以下、"=>"の後ろの文字列が、出力結果です。
#### (1)3文字目から1文字分を、'〇'で置換する
``` SQL
SELECT INSERT('あいうえお', 3, 1, '〇');
-- => あい〇えお
```
#### (2)3文字目から2文字分を、'〇'（1文字）で置換する
``` SQL
SELECT INSERT('あいうえお', 3, 2, '〇');
-- => あい〇お
```
#### (3)3文字目から1文字分を、'〇〇'（2文字）で置換する
``` SQL
SELECT INSERT('あいうえお', 3, 1, '〇〇');
-- => あい〇〇えお
```
#### (4)3文字目から2文字分を、'〇〇'（2文字）で置換する
``` SQL
SELECT INSERT('あいうえお', 3, 2, '〇〇');
-- => あい〇〇お
```
#### (5)3文字目から0文字分を、'〇〇'（2文字）で置換する（＝3文字目の前に挿入される）
``` SQL
SELECT INSERT('あいうえお', 3, 0, '〇〇');
-- => あい〇〇うえお
```
#### (6)0文字目から0文字分と指定すると、変わらない
``` SQL
SELECT INSERT('あいうえお', 0, 0, '〇');
-- => あいうえお
```
#### (7)1文字目から0文字分と指定すると、先頭に挿入する
``` SQL
SELECT INSERT('あいうえお', 1, 0, '〇');
-- => 〇あいうえお
```
#### (8)開始位置の指定が、元の文字数より大きい場合、変わらない
``` SQL
SELECT INSERT('あいうえお', 7, 1, '〇');
-- => あいうえお
```
#### (9)「開始位置＋置換する文字数」が元の文字数より大きくなる場合、置換できるところまで置換する
``` SQL
SELECT INSERT('あいうえお', 4, 5, '〇');
-- => あいう〇
```
# 参考
[MySQLリファレンス：文字列関数](https://dev.mysql.com/doc/refman/5.6/ja/string-functions.html#function_insert)
Rails resourcesについて

##はじめに

resourcesについて備忘録を兼ねて、まとめてみました。

##resources
例：Photosコントローラ

```config/routes.rb
resources :photos
```
上記のルーティングを定義するだけで下に示すような７つのルーティングが自動的に生成される。


| HTTP動詞 | パス | コントローラ#アクション | 目的 |
|:--|:--|:--|:--|
| GET | /photos | photos#index | すべての写真の一覧を表示 |
| GET | /photos/new | photos#new | 写真を1つ作成するためのHTMLフォームを返す |
| POST | /photos | photos#create | 写真を1つ作成する |
| GET | /photos/:id | photos#show | 特定の写真を表示する |
| GET | /photos/:id/edit | photos#edit | 写真編集用のHTMLフォームを1つ返す |
| PATCH/PUT | /photos/:id | photos#update | 特定の写真を更新する |
| DELETE | /photos/:id | photos#destroy | 特定の写真を削除する |

Railsのルーターでは、サーバーへのリクエストをマッチさせる際にHTTP動詞とURLを使っているため、4種類のURL (GET/POST/PATCH/DELETE) が7種類の異なるアクション (index/new/create/show/edit/update/destroy) に割り当てられる。

###名前付きルート

```resources``` を定義することで名前付きルートを使用できるようになる。

|コントローラ#アクション | 名前付きルート |
|:--|:--|
| photos#index | photos_path |
| photos#new | new_photo_path |
| photos#create | photos_path |
| photos#show | photo_path(:id) |
| photos#edit | edit_photo_path(:id) |
| photos#update | photo_path(:id) |
| photos#destroy | photo_path(:id) |

###使用するアクションだけを定義

使用するアクションだけを定義したい場合は ```onlyオプション``` を使えばいい。

例：

```config/routes.rb
.
.
.
resources :test,only: [:create,:destroy]
end
```
とする。


###参考
https://railsguides.jp/
データ可視化ツールFineReportとAWS RedShiftの接続（JDBC方式）

#Amazon Redshift
Amazon Redshift は、クラウド内のフルマネージド型、ペタバイト規模のデータウェアハウスサービスです。数百ギガバイトのデータから開始して、ペタバイト以上まで拡張できます。これにより、お客様のビジネスと顧客のために新しい洞察を得る目的でデータを使用できるようになります。

データウェアハウスを作成する最初のステップは、Amazon Redshift クラスターと呼ばれる一連のノードを起動することです。クラスターをプロビジョニングした後、データセットをアップロードし、データ分析クエリを実行できます。データセットのサイズに関係なく、Amazon Redshift は現在使用しているのと同じ SQL ベースのツールとビジネスインテリジェンスアプリケーションを使用して、高速なクエリパフォーマンスを提供します。

#FineReport
[FineReport](http://www.finereport.com/jp/)は、帳票作成、分析ダッシュボード設計、データ入力、モバイル対応など様々な機能をオールインワンに集結したデータ活用プラットフォームです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/7fbd0c5d-61bd-6933-15ad-d51b2acc92c9.png)



#設定方法
参照するドキュメント：[「JDBC 接続の設定(Amazon Redshiftクラスター管理ガイド)」](https://docs.aws.amazon.com/ja_jp/redshift/latest/mgmt/configure-jdbc-connection.html)
**①jarファイルをダウンロード：**
https://s3.amazonaws.com/redshift-downloads/drivers/jdbc/1.2.41.1065/RedshiftJDBC42-1.2.41.1065.jar
**②jarファイルをlibフォルダーにコピーする：**
※詳しいは[FineReport+csvJDBCでcsv型のデータを可視化表示する](https://qiita.com/syoki/items/cb02a62e3f81e76fa06a)を参照してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350893/65cd6b23-4b78-96ec-0ed2-b87d4d9ab9a2.png)
**③JDBCドライバ：**
com.amazon.redshift.jdbc42.Driver
**④URL：**
jdbc:redshift://fr-rs-test.c1bpx2qzvr0x.us-east-2.redshift.amazonaws.com:5439/testdb
※自分の環境より調整する必要があります。
**⑤ユーザID：**
root
※自分の環境より調整する必要があります。
**⑥パスワード：**
!QAZ2wsx
※自分の環境より調整する必要があります。

**[FineReport](http://www.finereport.com/jp/)データ接続定義**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/6e9b18bb-c84f-6b74-886b-dd8a8519728f.png)


#注意事項
**セキュリティグループ設定を編集しないと、パブリックでアクセスできません。**

**設定方法：**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/15a168bd-334c-e2cb-bbc4-670752c0a021.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/f7a48e38-e147-15d8-e7f9-b54d3bbb612b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/7040f8fe-e5b9-c2c3-2bcf-9052b4664115.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/da603993-d77e-8c65-6d1c-c57ded04e962.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/8663e2ae-894a-aa24-34c7-c3f835145c69.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/350893/c15b5368-9cc3-c84c-d8a4-50aa79adaf3d.png)
【2019年3月末版】git-sdk-64でgit-submoduleがMissing

# Go get しようとしたら怒られた。

`go get`したら以下のようなメッセージが出てエラー

```
fatal: 'submodule' appears to be a git command, but we were not
able to execute it. Maybe git-submodule is broken?
```

以下の記事を見つけたので直してみましたが。。。
https://hibikore.murakan.info/2017/08/13/613/git-submodule-is-borken/

今度は

```
/bin/bash: C:/git-sdk-64/mingw64/libexec/git-coregit-submodule: No such file or directory
```
という怒られ方になってしまいました。
う～ん、`git-core/git-submodule`に補完してほしいのに`git-coregit-submodule`でファイルがないって怒られてもねぇ。。。

ここで詰まっていてもしょうがないので`git-sdk-64`環境はあきらめて [git-for-windows](https://gitforwindows.org/)をインストールいたしました。

無事に `go get`できました！
AWS Cost Explorerに渡す、Metricsの値の意味

## 🔶 Metrics
AWS Cost Explorerの[GetCostAndUsage](https://docs.aws.amazon.com/ja_jp/aws-cost-management/latest/APIReference/API_GetCostAndUsage.html)等に渡すリクエストパラメータには、`Metrics`というパラメータがあります。

```json
リクエストパラメータ例
{
   "Filter": { 
      "Tags": { 
         "Key": "string",
         "Values": [ "string" ]
      }
   },
   "Granularity": "string",
   "Metrics": [ "string" ],　　//　<--この値です
   "NextPageToken": "string",
   "TimePeriod": { 
      "End": "string",
      "Start": "string"
   }
}
```

この`Metrics`にセットできる値は、マニュアルには以下の7つがセットできるとだけ書かれています。

> Valid values are AmortizedCost, BlendedCost, NetAmortizedCost, NetUnblendedCost, NormalizedUsageAmount, UnblendedCost, and UsageQuantity.

それぞれの具体的な意味について問い合わせたところ、以下の通りでした。

### 🔷 AmortizedCost
リザーブドインスタンスの料金を、課金した日に一気に支払ったとして計算するのではなく、日割り計算で算出した金額。

### 🔷 BlendedCost
アカウントで使用する、全インスタンスの平均レート×使用率から算出した金額。

### 🔷 NetAmortizedCost
ディスカウント適用後(EDP割引等)の償却コスト。
ただし、使うにはマスターアカウントによる許可が必要です。

### 🔷 NetUnblendedCost
ディスカウント適用後(EDP割引等)のコスト。
実際に請求される金額はこちら。
ただし、使うにはマスターアカウントによる許可が必要です。
メンバーアカウントの場合には "UnblendedCost" を使うのが無難です。

### 🔷 NormalizedUsageAmount
リザーブドインスタンスの[正規化係数](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/apply_ri.html#apply-regional-ri)の合計。

### 🔷 UnblendedCost
ディスカウント適用前のコスト。
メンバーアカウントで料金を集計する際は、こちらを利用するのが無難。

### 🔷 UsageQuantity
使用量。

## 🔶 参考

[Cost Explorer を使用したデータの探索](https://docs.aws.amazon.com/ja_jp/awsaccountbilling/latest/aboutv2/ce-advanced.html)
phpMyAdminをセキュアに運用するためのCloudFormationテンプレート

# AWS CloudFormationで得られるメリット

私の所属する開発チームではAWSへのインフラ構築時には、
インフラのドキュメント管理というムダを排除するためにCloudFormationを積極的に活用することにしています。

CloudFormationで得られるメリットには、
いわゆるInfrastructure as Codeで得られる部分と、
その構築したリソースの削除もまとめてしてくれるところだと感じています。

リソース作成と削除が単純にできることで、
必要なときだけリソースを作成して不要になったら削除するという
基本的なことが苦痛なく実行できるようになります。
そうすると、クラウドのメリットでもある利用した分だけの利用料ですみますし
作成したリソースの維持、運用にかける手間やムダも減らせて
みんなが幸せになれますので、まだの人は積極的に活用していきましょう。

今回のCloudFormationテンプレートは以下のリポジトリで公開しています。

https://github.com/takaaki-s/cloudformation-phpmyadmin

# このCloudFormationはなにが嬉しいか

普通RDSはプライベートサブネットに立てると思うのですが、
そうすると、外部から管理ツールで接続するのが面倒になりますよね。

そこで、phpMyAdminがインストールされたEC2が立ち上がって
WEB越しにRDSを管理できる環境を構築するようにテンプレートファイルを定義しています。
もちろん、すでに作成されているリソースは一切触りません。

# つかいかた

CloudFormationの画面から、このテンプレートファイルでスタックを作成すると、
以下のパラメータの入力を求められますので、入力してスタックを作成してください。
リソース作成が完了すると、出力タブにphpMyAdminへのURIが出力されます。
作られたリソースを削除したい場合は、スタックを削除するだけです。

**AllowIp**
phpMyAdminへのアクセスを許可するIPアドレスをCIDR表記で指定します。（例：111.111.111.111/32）
ここをガバガバにすると、セキュリティリスクが高まります。

**DBHost**
RDSのエンドポイントを入力します。

**DBPort**
RDSのポート番号を入力します。

**InstanceType**
phpMyAdminを動かすEC2のインスタンスタイプを指定します。

**LatestAmiId**
起動するAMIイメージを指定します。

これがこのテンプレートファイルのポイントで、
CloudFormationで動的に`AMI ID`を取ってくるので
スタックを作成する度に最新のイメージでEC2が起動します。

指定可能な値は`aws cli`で確認可能です。

```bash

# 東京リージョンの場合
aws ssm get-parameters-by-path --path "/aws/service/ami-amazon-linux-latest" --region ap-northeast-1
```

**RDSSecurityGroupId**
RDSにアクセス許可されたセキュリティグループを選択してください。

**SubnetId**
RDSと同じVPCに存在するEC2を配置するパブリックサブネットを選択してください。

**VpcId**
RDSと同じVPCを選択してください。

## 構成図

CloudFormationで作成したリソースは、VPC内でこんな感じに配置されます。

![qiita_cf1.png](https://qiita-image-store.s3.amazonaws.com/0/262735/5e3a42c7-2618-588b-0ff8-31fb8f7ea6a3.png)

# さいごに

phpMyAdminはシェルコマンドでインストールしているだけなので、
インストールするアプリケーションを変更すれば、色々応用できると思います。

# 宣伝

2019年4月14日の技術書典6に初出典することになりました！
AWS脱初心者向けというテーマで、複数人で共同で執筆しました。
場所は「え28」になりますので、よろしければぜひ！

https://techbookfest.org/event/tbf06/circle/34330004
link_toにclass属性の書き方

#はじめに
- なぜこの投稿をするのか（背景）<br>
CSSを適用させる際に、link_toでのclass属性の書き方に思っていたより時間がかかってしまったから。

#実際に自分が試したコード

```erb
<!--これだとエラーにはならない-->
 <%= link_to("トピック作成", new_topic_path, {class: "nav-link"}) %>

<!--これでもエラーにはならない-->
 <%= link_to("マイページ", user_path(@current_user.id), {class: "nav-link"}) %>

<!--ポップアップ機能のある下の文ではエラーが発生してしまう-->
 <%= link_to("ログアウト", logout_path, method: :post, data:{confirm: "ログアウトしますか？"}, {class: "nav-link"}) %>
```
#原因と改善後
link_toにdata-***やclassなど追加属性を入れる場合、追加属性全体を`1つのハッシュ`で書かないといけないが、それが出来ていなかった。

```erb
<!-- 1つのハッシュにしたバージョン -->
<%= link_to("ログアウト", logout_path, { method: :post, data: {confirm: "ログアウトしますか？"}, class: "nav-link"}) %>

<!-- Bare hashバージョン -->
<%= link_to("ログアウト", logout_path, method: :post, data: {confirm: "ログアウトしますか？"}, class: "nav-link") %>
```
#最後に
こういった細かな点をもっともっと詰めていかないと行けないなと思った。
Preference-based Approach: Introduction

# はじめに

消費者の行動分析は，ミクロ経済学の一つの柱である．
その際，主に利用される手法は大きく分けて2つあって，一つは preference-based approach （選好を基礎としたアプローチ），もう一つは choice-based approach （選択を基礎としたアプローチ）である．ここでは，前者の preference-based approach に注目して話を進める．

通常，現代の市場経済に生きる我々は消費者として振る舞うことが殆どなので，その行動例の枚挙には暇がない．例えば，コンビニに行けば多くの商品が陳列棚に並んでいる．これらは，消費者が購入対象の候補とする選択肢の集合とみなすことができる．別の例で言えば，ネットショッピングのサイトに表示される数多の商品群もまた，選択肢の集合とみなすことができる．

一般的に考えると，消費者は alternatives set（選択肢集合）$X = \mathbb{R}^N_{+}$ [^1]から幾つかの商品（1種類でもいいし複数種類でもいいので，普通はベクトルとみなす）を選択して購入する．このような購入した各商品の量のまとまりをバンドル（bundle）という．[^2]バンドルはベクトル $\boldsymbol{x} \in X$ として表す．

なお，$\boldsymbol{x}$ は選択肢集合 $X$ と同じ $N$ 次元だが，「普通，$N$ 種類も買わないよ」と思うかもしれないが，「買わない商品（これを $k$ 番目の商品とする）」は $\boldsymbol{x}$ の $k$ 番目の要素を $x_k = 0$ とすればよいので，バンドルは選択肢集合と同じ次元でも問題ないわけである．

[^1]: $\mathbb{R}^N_{+}$ の $+$ は0以上の部分を表す記法である．つまり $\mathbb{R}^2_{+}$ は2次元平面の軸を含む第1象限である．普通は「$-3$ 個買う」なんてことは言わない（「$-3$ 個買う」というのは「$3$ 個売る」のと同じ意味かもしれないが，「消費者」は売ることはしないという前提がある）のと同じで，0以上の量しか考えない．なおメルカリでもブックオフでも，我々が中古物を売る立場になる場合，それは消費者ではなく生産者的な振る舞いをしているので，消費者理論ではこういう状況は考えない．

[^2]: bundle の訳語には「束（たば）」とか「塊（かたまり）」が当てられるらしいが，多くの和文のミクロ経済学の文献ではそのまま「バンドル」とカタカナ表記するので，この表記に慣れるとよい．なお，「財バンドル」という言い方をすることも多いが，これだと「財（goods; つまり，あればあるほど嬉しいもの）」だけしか扱わないという印象を個人的に受けるので，「バンドル」という言い方を採用する．経済学で扱う物には二酸化炭素排出量などのように「bads（少ないほど嬉しいもの）」もあって，これもバンドルの要素として考えてもよい．ちなみに，Mas-Colell の "Microeconomic Theory" では commodity bundle （商品バンドル）という言い方も使っているが，余り和文献では見ないようなので採用しないことにした．

## 例

ホテルの簡易朝食ビュッフェにおける選択肢集合として $X = \left\\{ \mathrm{パン}, \mathrm{白米},  \mathrm{サラダ}, \mathrm{筑前煮},  \mathrm{オニオンスープ}, \mathrm{味噌汁}, \mathrm{コーピー},  \mathrm{煎茶} \right\\} = \mathbb{R}^8_{+}$ があるとする．

ある消費者 $1$ は超炭水化物マニアでパン $5$ つと白米 $3$ 杯を選び，コーヒーは苦手なので煎茶を選んだとしよう．（炭水化物は煎茶で流し込むように食べる人）すると，消費者 $1$ のバンドル  $\boldsymbol{x}_1$ は

```math
\boldsymbol{x}_1 = \left( 5, 3, 0, 0, 0, 0, 0, 1 \right)
```
である．

別の消費者 $2$ は，パンには味噌汁という嗜好の持ち主（少数だろうが，こういう人はいる）で，パンを $2$ つサラダと味噌汁を1人前ずつ，またコーヒーを1杯選んだとする．すると，消費者 $2$ のバンドル  $\boldsymbol{x}_2$ は

```math
\boldsymbol{x}_2 = \left( 2, 0, 1, 0, 0, 1, 1, 0 \right)
```
である．

ちなみに，この例では各要素は整数だが，分数などを使って細かく分けられる商品もあるので，そういうときは分数等を使って量を表せる．

## 2つのアプローチ手法について

殆どのミクロ経済学の教科書について言えると思うが，preference-based approach には多くのページ数が割かれている一方で，choice-based approach は比較的少ないページにまとまっている．

これは，preference-based approach が個人の選好（preference）という「観測できないもの」に注目しているからであり，一方の choice-based approach は選択された結果（上述した「例」の $\boldsymbol{x}_1$ とか $\boldsymbol{x}_2$）という「観測できるもの」に注目しているからである．つまり，前者は観測できないものについての理論なので，当然議論が複雑になるというわけだ．

# 参考文献

1. Munoz-Garcia, F. (2017) *Advanced Microeconomic Theory: An Intuitive Approach with Examples*. The MIT Press, ISBN: 978-0262035446.
2. Mas-Colell, A., Whinston M.D., and Green, J.R. (1995) *Microeconomic Theory*. Oxford University Press, ISBN: 978-0195102680. 

# 関連記事


+ [ミクロ経済学（大学院レベル）の目次](https://qiita.com/kosetasaki/items/3be8bbc9f55c5c944a0e)
My VSC Tips

# ショートカット集
- [【Mac版】 VisualStudioCode キーボードショートカット \- Qiita](https://qiita.com/naru0504/items/99495c4482cd158ddca8)
- [カンニング万歳\!逆引きVS Codeチートシート \- Qiita](https://qiita.com/4_mio_11/items/e304809b10c400fba407)
- [Visual Studio Code ショートカットキー\(Mac\) \- Qiita](https://qiita.com/ikemura23/items/951c4edadbe23810cc41)

# 各種検索
コード内検索: ⌘ + F
全体のコード検索: Shift + ⌘ + F
ファイル名検索: ⌘ + P


# 定義元にジャンプ & 戻る
定義元にジャンプ： F12 or  ⌘ +クリック
ジャンプ前に戻る： Ctrl + -

# ターミナルを開く
Ctrl + `

# ワークスペースを作る
複数フォルダにまたがる調査の場合は、ワークスペースを活用する。
https://yosiakatsuki.net/blog/visual-studio-code-open-multi-dir/
My Eclipse Tips

その気になったらちゃんとまとめる

# 最適化するためにやったこと
### ショートカットのカスタマイズ
Preference > General > Keys から、ショートカットキーを設定する。 対象のCommand（挙動）のBinding を押下し、指定キーバインドを入力すれば登録できる。

##### タブ切り替え
next tab, previous tab をChrome と同じ command + Shift + { or } にした。エディタのタブ移動が捗る。

##### 文字ズーム
何故かZoom out(command + -) ができるのにZoom in ができなかった。これもChrome同様 Command + Shift + +（not typo） にした。

##### 補完
mac だと、デフォルトの command + space がSpotlight検索になってる。
個人的にこれはこれで使いまくるので、 option + space にした。

### 自動補完設定
https://qiita.com/yuukieiu/items/bc8179873b859e3c7741 を参考に、自動補完が.以外でも出る様に修正した。


# 便利ショートカット
以下にないショートカットは、適宜自分で設定すべし。　参考：[Macのeclipseで次のタブ、前のタブをショートカットで操作する方法](http://tonaise.hatenablog.jp/entry/2017/10/19/073000)

### 画面移動系
https://javaworld.helpfulness.jp/post-70/ から知った。

##### command + F6
同ビュー内のタブ移動

##### command + F7
ビュー移動

##### command + F8
パースペクティブ切替

##### command + F12
デバッグ開始

### エディタ系
##### command + shift + F
コードフォーマット

##### command + shift + O
自動インポート補完

##### command + shift + R
ファイル検索

##### Ctrl + H
ファイルを横断した検索、置換

##### command + E
タブ移動・検索。キーを離しても移動はしないので、command + F6とは挙動が異なる。

##### command + 1
エラーメッセージの表示、および修正候補の表示

##### command + /
コメント挿入

##### option + command + J
Javadoc コメントの挿入

##### ctrl + M
エディタを最大化（もう一回で戻す）

##### F3
各種定義元へ

##### command + [
Backward History. 定義元ジャンプから戻ったりで使う。

##### command  + ]
Forward History. ↑の逆。・

# 新規プロジェクト作成
FIle > New (command + option + N) > Spring Starter Project


# 参考
https://qiita.com/saitoxu/items/6b1458f62780781e09b7
https://qiita.com/arai-wa/items/c2eb7387b5bf37b4ace4
SparkでKafkaを経由して外部のデータを読取りします「前言」

本投稿では、下表のように、SparkStreamingでKafkaクラスターを経由してMQTTにコネクトした上で、MQTTに生産されたメッセージを読取ってワードカウントを行う環境を構築してみます。

**＜システムノード利用状況＞**

サーバ種類 | 端末状況 | 解説
:-- | :-- | :--
MQTT| 端末ｎ台 | メッセージを作成してKafkaに送信する配信ノード
Kafka Cluster|ノード3台 |MQTTからのメッセージを収集してキューイングを行うKafkaノード
Zookeeper Cluster|ノード3台（Kafka同居）|データ分散管理されるZookeeperノード
Spark Standalone|Master1台 |Sparkクラスタのリソースを管理するSpark Masterノード
		| Slave2台|Kafkaクラスタからデータを取得しワードアカウントを行うSpark Workerノード

システムの処理の流れとしては、大まかで以下の二つに分けられています。
まず、Kafkaコネクタを利用してMQTTに生産されたメッセージを取得して、Kafkaクラスタで取得したデータをキューイングしておきます。Kafkaは、そまざまな設備に生産された大量のデータを高速に収集してリアルタイム処理しておくことができて、スケーラビリティに優れるシステムなので、MQTT端末が複数台あれば、それぞれの端末に生成されたメッセージをKafkaコネクタに収集しておくことが必要になっています。
つぎ、KafkaStreamingは、一定間隔でKafkaからデータを読み出して、ワードアカウントを行います。

上記ようなデータの流れ環境の作成については、以下の順に記述します。

- Step１： Kafka稼働環境作成
- Step２： KafkaコネクトMQTT
- Step３： SparkStreamingでデータ取得

-------
**&#9734;&#9733;&#9734; 次の文章へ &#9734;&#9733;&#9734;**
[SparkでKafkaを経由して外部のデータを読取りします「Kafka稼働環境作成」](https://qiita.com/gakuseikai/items/cbed5ce953d64d48fa66)
tig

投げやり
# インストール
Brewを使ってインストール。

```
$ brew install tig
```

# 使い方
適宜この辺参照

- https://qiita.com/YusukeHosonuma/items/d81397ab70a8c26a2902
- https://qiita.com/YasuOza/items/7be136f03867d20b8332
- https://qiita.com/suino/items/b0dae7e00bd7165f79ea
- https://qiita.com/kenju/items/13313429df707fecfadf
Nuxt.jsでlocalhostをSSL化する方法

# 解決したいこと

Facebookのログイン機能を実装するときに、OAuth設定で、HTTPSが強制されていました。
ローカルで開発する時に少し困ったので、
今回はNuxt.jsでlocalhostをSSL化する方法を紹介します。

*以下のように「HTTPSを強制」をOFFに出来ない...*
<img width="968" alt="スクリーンショット 2019-03-29 13.53.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/16555/55c8dfe7-8789-a3b2-0363-dcf866cfab33.png">

# 解決方法

解決する為に、今回は[mkcert](https://github.com/FiloSottile/mkcert)を使ってSSL証明書を発行しました。
mkcertはLocalCAの作成と証明書の発行が簡単に出来るツールです。
mkcertを使うことで、ブラウザで警告を出さずにSSL化することが出来ます。
主な流れは以下の通りです。

1. mkcertをインストール
1. mkcertでLocalCAを作る
1. mkcertで証明書を作成
1. 作った証明書を読み込んでNuxtを起動

## SSL証明書の発行まで

### mkcertのインストール

```bash
$ brew install mkcert
```

### LocalCAを作る
```bash
$ mkcert -install
```

### localhostに対してSSL証明書を発行
```bash
$ mkcert localhost
Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
```
これで証明書を作ることが出来ました。

## Nuxtをhttpsで起動する

今回変更するファイル群は以下の通りです。
既存のserver/index.jsを汚したくなかったので、server/localhost/index.jsを新たに作成しました。
mkcertで作った証明書もserver/localhost/に移動しておきます。

```bash
server/
  ┣ localhost/
    ┣ index.js
    ┣ localhost.pem      // mkcertで作ったcert
    ┣ localhost-key.pem  // mkcertで作ったkey
package.json
```

### 起動スクリプトの作成

```js:server/localhost/index.js
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const https = require('https')
const fs = require('fs')

// Import and Set Nuxt.js options
const config = require('../../nuxt.config.js')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  try {
    const builder = new Builder(nuxt)
    await builder.build()
  } catch(error) {
    console.error(error)
    return false
  }

  // https config
  const https_options = {
    key : fs.readFileSync(`${__dirname}/localhost-key.pem`),
    cert: fs.readFileSync(`${__dirname}/localhost.pem`),
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  https.createServer(https_options, app).listen(port, host)
  consola.ready({
    message: `Server listening on https://${host}:${port}`,
    badge: true
  })
}
start()
```

### package.jsonの修正
```json:package.json
{
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/localhost/index.js --watch server",
   }
}
```

### サーバー起動と動作確認

```bash
$ npm run dev
READY  Server listening on https://localhost:3000
```
ブラウザで[https://localhost:3000](https://localhost:3000)にアクセス。

<img width="231" alt="スクリーンショット 2019-03-29 11.47.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/16555/28fad285-23f9-5ba8-d103-cad052a9b8dc.png">

無事、警告も出ずhttps化することが出来ました。
Scala.js で CommonJSモジュールを使う

Scala.jsでCommonJS形式のモジュールを使ってみる。ES modulesでないのは、単に他の設定が不要でNodeJSが使えるからである。ES modulesでも大差なく使えるでしょう。

# 読み込みするファイルを用意

console.logを吐くだけのものを二種類用意した。

```foo.js
module.exports = (obj) => console.log(obj);
```

```bar.js
module.exports = {
  bar: (obj) => console.log(obj)
};
```

これらのファイルはNODE_PATH通さなくてもいいように`node_modules`に置いて使う。

https://github.com/eiel-sample-code/scalajs-use-cjs/tree/master/node_modules

# 設定

sbtの設定で必要なのは`scalaJSLinkerConfig.moduleKind`の設定。
この設定をしておくことで、CommonJS形式でコードが出力されるので、NodeJSで実行できる。

```scala
scalaJSLinkerConfig ~= { _.withModuleKind(ModuleKind.CommonJSModule) },
```

https://github.com/eiel-sample-code/scalajs-use-cjs/blob/master/build.sbt#L12

## 補足

`scalaJSLinkerConfig.moduleKind`
デフォルトは`NoModule`。`ESModule`も用意されている。

https://github.com/scala-js/scala-js/blob/v0.6.26/tools/shared/src/main/scala/org/scalajs/core/tools/linker/backend/ModuleKind.scala#L18-L54

# Facadeを用意する

Scalaから使えるようにFacadeを定義する。
平たく言うと、使おうとするjsのインターフェースをかく。

```scala
import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport

@js.native
@JSImport("foo.js", JSImport.Default)
object Foo extends js.Object {
  def apply(obj: js.Any): Unit = js.native
}
```

```scala
import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport

@js.native
@JSImport("bar.js", JSImport.Namespace)
object Bar extends js.Object {
  def bar(obj: js.Any): Unit = js.native
}
```

このobjectを利用すれば`require`が生成されるJSに挿入される感じ。
`@JSImport`の部分が肝でここに基づいてコードが生成される。

`foo.js`はdefault exportしているので、`JSImport.Default`にしている。
applyメソッドが自動的にマッピングされる模様。ソースは確認していない。
`bar.js`はどちらでもよいが`Namespace`にした。

https://github.com/eiel-sample-code/scalajs-use-cjs/blob/master/src/main/scala/Main.scala#L11-L21

## 補足

https://github.com/scala-js/scala-js/blob/v0.6.26/library/src/main/scala/scala/scalajs/js/annotation/JSImport.scala#L82
`JSImport.Default`は`"default"`になってるだけ。

# 使う

```scala
object Main extends App {
  Foo("Hello, Foo")
  Bar.bar("Hello, Bar")
}
```

https://github.com/eiel-sample-code/scalajs-use-cjs/blob/master/src/main/scala/Main.scala#L4-L7

## 結果

```
$ sbt run
Hello, Foo
Hello, Bar
$ sbt fastOptJS fullOptJS
$ node target/scala-2.12/scalajs-use-cjs-fastopt.js
Hello, Foo
Hello, Bar
$ node target/scala-2.12/scalajs-use-cjs-opt.js
Hello, Foo
Hello, Bar
```

```
$ grep require target/scala-2.12/scalajs-use-cjs-fastopt.js
var $i_bar$002ejs = require("bar.js");
var $i_foo$002ejs = require("foo.js");
$ grep 002ejs target/scala-2.12/scalajs-use-cjs-fastopt.js
var $i_bar$002ejs = require("bar.js");
var $i_foo$002ejs = require("foo.js");
  $moduleDefault($i_foo$002ejs)("Hello, Foo");
  $i_bar$002ejs.bar("Hello, Bar")
```

# 参考

- 今回のコード
  - https://github.com/eiel-sample-code/scalajs-use-cjs
- Scala.js - Emitting a JavaScript module
  - https://www.scala-js.org/doc/project/module.html
vegetaメモ

# 概要
vegeta とは、golang製のhttp負荷検証ツール。

https://github.com/tsenart/vegeta

# できること
- 負荷をかける（atack）
- 実行結果レポートの出力（report）
- dumpもできるが、実例少なめ？

# 導入
homebrewで入れられる。

```
$ brew update
$ brew install vegeta

$ vegeta -h   # vegeta コマンドのヘルプが表示できるかを確認
```

# 実行
ワンライナーでとりあえず実行してみる。
対象URLを出力 > 負荷検証の値を指定 > 結果レポート出力

```
$ echo "GET http://localhost/" | ./vegeta attack --insecure -cpu 8 rate=10 -duration=60s | ./vegeta report
```
### atack

対象をテキストで事前準備しておくと検証しやすい。

```
# ターゲットを指定したテキストを事前準備
$ cat targets.txt
  
# ターゲットに対して負荷をかける
$ vegeta attack -insecure -cpu 8 -rate 10 -duration 60s -targets targets.txt  > report.out
```
負荷テストの結果はそのままでは表示できず、別ファイルに一旦出力する必要がある。

### report
atack の出力ファイルを指定し、任意の形式で表示することができる。

```
# 出力したレポートをテキストベースで表示
$ vegeta report -inputs=report.out
$ vegeta report -inputs=report.out -reporter=text
Requests      [total, rate]            1, 1.00
Duration      [total, attack, wait]    42.156345ms, 0s, 42.156345ms
Latencies     [mean, 50, 95, 99, max]  42.156345ms, 42.156345ms, 42.156345ms, 42.156345ms, 42.156345ms
Bytes In      [total, mean]            262, 262.00
Bytes Out     [total, mean]            0, 0.00
Success       [ratio]                  100.00%
Status Codes  [code:count]             200:1
Error Set:
 
# jsonベースで表示
$ vegeta report -inputs=report.out -reporter=json | jq
{
  "latencies": {
    "total": 42156345,
    "mean": 42156345,
    "50th": 42156345,
    "95th": 42156345,
    "99th": 42156345,
    "max": 42156345
  },
  "bytes_in": {
    "total": 262,
    "mean": 262
  },
  "bytes_out": {
    "total": 0,
    "mean": 0
  },
  "earliest": "2018-04-19T17:29:29.931859+09:00",
  "latest": "2018-04-19T17:29:29.931859+09:00",
  "end": "2018-04-19T17:29:29.974015345+09:00",
  "duration": 0,
  "wait": 42156345,
  "requests": 1,
  "rate": 1,
  "success": 1,
  "status_codes": {
    "200": 1
  },
  "errors": null
}
 
# html形式でプロット表示
$ vegeta report -inputs=report.out -reporter=plot > plot.html
$ open plot.html
 
# 指定間隔のヒストグラムで表示
$ vegeta report -inputs=report.out -reporter='hist[0,10ms,20ms,40ms,60ms,80ms,100ms,200ms,300ms,400ms,500ms,600ms,700ms,800ms,900ms,1000ms,3000ms,5000ms,10000ms,15000ms,30000ms]'
Bucket           #  %        Histogram
[0s,     10ms]   0  0.00%
[10ms,   20ms]   0  0.00%
[20ms,   40ms]   0  0.00%
[40ms,   60ms]   1  100.00%  ###########################################################################
[60ms,   80ms]   0  0.00%
[80ms,   100ms]  0  0.00%
[100ms,  200ms]  0  0.00%
[200ms,  300ms]  0  0.00%
[300ms,  400ms]  0  0.00%
[400ms,  500ms]  0  0.00%
[500ms,  600ms]  0  0.00%
[600ms,  700ms]  0  0.00%
[700ms,  800ms]  0  0.00%
[800ms,  900ms]  0  0.00%
[900ms,  1s]     0  0.00%
[1s,     3s]     0  0.00%
[3s,     5s]     0  0.00%
[5s,     10s]    0  0.00%
[10s,    15s]    0  0.00%
[15s,    30s]    0  0.00%
[30s,    +Inf]   0  0.00%
```
Mac これは絶対入れとけアプリ集

自分用メモ
# 入れるもの
### アプリ
- shiftit
- clippy
- iterm2
- macvim
- gas mask
- karabiner
 - なくても死なない
- Visual Studio Code

###プラグインとか
- homebrew
 - https://brew.sh/index_ja.html  から
- zshrc
 - なくても死なない

### 各種インストール

- brew

```
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
- git 

```
$ brew install git
```
Gitでマージ済みの不要なブランチを一括削除

Gitでリソースを管理していると、徐々にマージ済みのブランチが溜まっていきます。定期的に不要なブランチを削除しているのですが、毎回コマンドを打つのも面倒なので、aliasに設定してCOOL :sunglasses: にします。

## aliasの設定

```bash
[alias]
  refresh = "!f () { git checkout $1; git pull --prune; git branch --merged | egrep -v '\\*|master|develop' | xargs git branch -d; };f"
```

## 使い方

```console
$ git refresh develop
```

## 説明

1. 指定されたブランチに `checkout`
1. `pull　--prune` でリモートの変更をローカルに反映し、リモートにて削除されたブランチをローカルからも削除
1. `branch --merged` でマージ済みのブランチ一覧を取得
1. `egrep -v` で(3)から **master** と **develop** を除いた一覧を取得
1. `xargs` で(4)の内容を順に処理し `branch -d` でブランチを削除

## 補足

`refresh` の後に指定したブランチを引数にして処理します。`egrep -v` で除外するブランチを指定しているので、環境に合わせて追加 or 削除してください。
cssでプラスアイコン,マイナスアイコンを作る

# CSSでプラスアイコン、マイナスアイコンを作成
デザイナーさんから頂いたpsdの中に
プラスアイコンとマイナスアイコンがあった。
svgとかpngとか実装方法は色々あると思うけど、今回はcssで作ってみた

## 作りたいもの
<img width="37" alt="スクリーンショット 2019-03-29 14.06.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/163415/852731b2-7357-8de5-af9e-d7b191a919ed.png">

↑こんなもの

## コード

```html
<div class="icon mB20">
  <span class="icon__mark"></span>
</div>

<div class="icon icon--plus">
  <span class="icon__mark"></span>
</div>
```

```css
.mB20 {
  margin-bottom: 20px;
}

.icon {
  position: relative;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
}

.icon::before, .icon--plus::after {
  position: absolute;
  top: 9px;
  left: 50%;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  transform: translateX(-50%);
}

.icon--plus:after {
  top: 3px;
  left: -3px;
  transform: rotate(90deg);
}
```

これだけです。
やっていることはそんな難しくなく、
borderを作って
プラスの場合は2つborderを作って一つを回転させてあげれば作れますね。

まあ、なんか使う機会があれば是非試してみてください。
「UIT#6 進化する React.js」のメモ

2019年3月20日(水)にLINE株式会社で行われた「UIT#6 進化する React.js」のセミナーに参加してその内容がとてもタメになったので自身の備忘録も兼ねて投稿します。
こちらのセミナーはconnpassから登録しました「[UIT#6 進化する React.js](https://uit.connpass.com/event/119594/)」

## React Hooksを使ってアニメーション処理を行なう

### アニメーション処理を使うところ／使うべきじゃないところ

- 「情報伝達/情報編集」に重きを置くならアニメーションを控えるべき
- 構成要素を認識させるならアニメーションを使うべき
- アニメーション設計を行なうことでコンバージョン達成につながる
    - 利用者が提供者に興味がないときに通知機能としてアニメーションを使う
    - 利用者が提供者に興味があるときは補佐機能としてアニメーションを使う
    - アプリケーションの情報構造の認知を促すときにアニメーションを使う
    - 利用者が提供者と対話するときにアニメーションを使う
    - ユーザーのアクションに対してアニメーションで応える対価機能

### なぜReact Hooksを使ってアニメーションしたいのか

 - 関数コンポーネントでstateが扱えるようになったから
 - 関数コンポーネントでライフサイクルメソッドと同等のことが可能になったから
 - アニメショーンを実装するときはStatefulなComponentで書きたいから

### これからのClass Component

- React HooksができてもClass Componentは廃止されない
- Class Componentを利用したライブラリは今後も使える
- これからはClass Componentを書く必要がなくなる

## 現場でReactを使ったときの悩みと改善点

### TypeScript導入

- JS Docの更新が面倒だから(怠るから)、TypeScript導入を考える
- 勉強会を実施して、サンプルプロジェクトで書いてみる
- TypeScriptが分かるメンバーが書いたソースを真似ながら他のメンバーも実装してみた
- 結果、開発しやすくなった、修正箇所が分かりやすくなった。

### Css-in-JsでEmotion導入

- 「[CSS-in-JSのライブラリとして「emotion」を選択している理由](https://qiita.com/__sakito__/items/d240840eef7123f62acf)」
- ドキュメントが充実している
- 「babel-plugin-emotion」を使うとclassNameが「フォルダ名/ファイル名/コンポーネント名」になるので該当コンポーネントを探しやすい
- コンポーネントを削除するとスタイルも削除するので不要な記述が残らない

### 「Redux-Form」から「Formik」に変更

- Redux-Formはバリデーションなど拡張するときに優れてなかった
- FormikはReact公式サイトで推奨されていたので使用
- バリデーションの操作がしやすかった
- [doc](https://github.com/jaredpalmer/formik)が見やすかった
- 全てのFormで採用するかを協議中

### Reduxから「re-ducks」

- Reduxだと1ページ、1Storeの構成だった。
- 同じStore構成だとコピペして流用して手間がかかる(Redux)
- 似たようなActionで違うページのActionを呼んだりしてた(Redux)
- re-ducksだとカテゴリーごとのStoreで分けられて、その中のファイル構成も処理ごとに分けられるので理解しやすくなった
- docは[こちら](https://github.com/alexnm/re-ducks)

``` terminal:ファイル構成例
duck/
├── actions.js
├── index.js
├── operations.js
├── reducers.js
├── selectors.js
├── tests.js
├── types.js
├── utils.js
```

### データ構造をimmutableにしてくれる「Immer」の使用

- データをmutableに書き換えている箇所があり、レビューで抜け落ちがあった
- データを操作できて、データ構造をimmutabaleにしてくれるImmerを採用
- レビューの負担が軽くなった

### Atomic Designについて

- デザイナーと一緒に開発しないと「組織」と「分子」の認識が違う時があるので注意
N対Nのモデルを表現する方法

# N対Nのモデルとは
複数のモデルAと複数のモデルBが紐づいているデータ設計です。つまり複数対複数。

## 例
例えば、ユーザーとプロジェクトの関係にしてみましょう。

### ユーザー側から見た場合
* ユーザーAはプロジェクト1とプロジェクト2に紐付く
* ユーザーBはプロジェクト1とプロジェクト2に紐付く
* ユーザーCはプロジェクト2とプロジェクト3に紐付く

といった感じです。

### プロジェクト側から見た場合
* プロジェクト1はユーザーAとユーザーBに紐付く
* プロジェクト2はユーザーAとユーザーBとユーザーCに紐付く
* プロジェクト3はユーザーCに紐付く

といった感じです。

### 参考図
![スクリーンショット 2019-03-29 13.39.15.png](https://qiita-image-store.s3.amazonaws.com/0/154121/9a1107a0-096f-f55e-1bca-a998710c09be.png)

# データベースでどう表現するか

## 1対1や1対Nの場合
1対1や1対Nの場合は、片方のテーブルに外部キーを入れます。

### 例
1人のユーザーは1つのグループにしか属せないN対1の関係は下記のような感じです。
#### Groupテーブル
|id|name|
|---|---|
|1|group1|
|2|group2|
|3|group3|

#### Userテーブル
|id|name|group_id(外部キー)|
|---|---|---|
|1|user1|2|
|2|user2|2|
|3|user3|3|
|4|user4|1|

## N対Nの場合
中間テーブルを作り、中間テーブル側に両者のモデルの外部キーを入れます。

### 例
1人のユーザーは複数のプロジェクトに所属できる。また、1つのプロジェクトには複数のユーザーが所属する場合。

### Projectテーブル
|id|name|
|---|---|
|1|project1|
|2|project2|
|3|project3|

### Userテーブル
|id|name|
|---|---|
|1|userA|
|2|userB|
|3|userC|

### UserProjectテーブル
|user_id(外部キー)|project_id(外部キー)|
|---|---|
|1|1|
|1|2|
|2|1|
|2|2|
|3|2|
|3|3|

### 参考図
![スクリーンショット 2019-03-29 13.39.15.png](https://qiita-image-store.s3.amazonaws.com/0/154121/86a229b4-1446-ad4e-0ae6-55cee2f9dfbe.png)
Rails renderとredirect_toの違い

##はじめに

railsチュートリアルを進めていく中で、
```render``` と ```redirect_to```
 がごっちゃになったので整理しようと思います。

##render

ざっくりいうと、**コントローラのアクションからViewを呼び出す**メソッド。
対象となるアクションのコードを実行しないため、**データの取得を行う時は「render」**を扱う。

###同じコントローラ内からViewを呼び出す

例：

```app/controllers/same_controller.rb
def update
  @book = Book.find(params[:id])
  if @book.update(book_params)
    redirect_to(@book)
  else
    render "edit"
  end
end
```

この場合、elseになり ```render``` が実行されると、同コントローラ内の```edit.html.erb```が出力される。

また以下のように**シンボル**を扱うこともできる。
```render :edit```



よくあるエラーとして、**二重にレンダリングしてしまっている場合**があるので、その場合は ```and return``` などで二重レンダリングを回避する。

##redirect_to
```renderメソッド``` はレスポンス構成時に**どのビュー (または他のアセット) を使用するかを指定**するためのもの。

それに対して ```redirect_toメソッド``` は、**別のURLに対して改めてリクエストを再送信するよう、ブラウザに指令**を出すためのものとなる。

controllerのインスタンス変数は、リダイレクト先で新たに生成されるので、**データを追加、更新、削除を行う時は「redirect_to」**を扱う。

###まとめ
**redirect_toは移動するもの、renderはその場に表示させるもの**

##参考
https://railsguides.jp/layouts_and_rendering.html
https://qiita.com/jumpyoshim/items/ed10721c26963abdf121
localhost をスマホ実機で確認する方法

## 前置き
ローカルで WEB の開発中に実機確認したいことってあるじゃないですか。
サーバーにアップすればもちろん見られるんですが、めんどくさいときもある。

そんなときに、localhost で起動中のページに直接アクセスするには以下の手順を踏むことで確認ができます。

## localhost をスマホで確認する方法
1. 同じ Wi-Fi に PC / スマホで接続する
2. PC のIPアドレスを確認する（Mac の場合は `システム環境設定` => `ネットワーク` など）
3. localhost を PC で起動
4. スマホで `IP:ポート番号` にアクセス（`192.168.1.1:8080` など）
5. 見られる！

## 開発者ツールの使い方
端末の種類などによっては多少手順が変わったりするかもしれないのであしからず

### iPhone Safali のWebインスペクタを使う
iPhone - Mac だと、Safali の Webインスペクタ(developer tool) が使えます。

1. iPhone と Mac を有線接続
2. iPhone で `設定` => `Safari` => `詳細` => `Webインスペクタ`をオンにする。
3. Mac の Safali で`環境設定` => `一般` => `メニューバーに開発メニューを表示`にチェック
4. `開発` から iPhone を選んで見たいページを選択

### Android Chrome のデベロッパーツールを使う
Android だと以下のような手順になります。

1. 端末情報 > ソフトウェア情報 > ビルド番号を7回タップ（開発者向けオプションが出るようになる）  
2. 設定 > 開発者向けオプション > USBデバッグをONにする
3. USB接続
4. (Windowsの場合)端末のドライバのインストール
5. `chrome://inspect/#devices` にアクセス（アドレスバーにコピペ）
6. 表示された使用端末名/確認したいページのinspectをクリック

環境や端末によってはうまく表示されないこともあるみたいです。  
余計なソフトが邪魔していたりとか。

## あとがき

エミュレータで全部済めばいいんですけどね。なんで実機だとバグるんだろ
あと、最近だと実機での確認をオンラインでできるようなサービスもあるので、金銭面で折り合いがつくようであればそういうのも試してみてもいいかもしれないですね。
[OpenSSL]簡易版：OpenSSLを利用してクライアント証明書を作成する

# はじめに
簡便にクライアント証明書を作成したい場合の作業例です。
「簡便に」とは、WORKディレクトリのみで作業が完結することを意図しています。

Webサービスの呼び出しを行う際にクライアント認証を実装するケース等で利用することがある為、
個人的な備忘を含め、記事にしました。

#1. 環境情報

```shell-session
# cat /etc/redhat-release
Red Hat Enterprise Linux Server release 7.4 (Maipo)
# openssl version
OpenSSL 1.0.2k-fips  26 Jan 2017
```

#2. クライアント証明書作成

## 2.1. クライアント証明書を発行する認証局用の秘密鍵・証明書を作成

```shell-session
$ openssl req -x509 -new \
              -newkey rsa:2048 -keyout rootCA.key -nodes \
              -sha256 \
              -days 3650 \
              -out rootCA.crt \
              -subj "/C=JP/O=example.com/CN=EXAMPLE PKI ROOT"
```

* 主要なオプションのメモ

| オプション | 説明 |
|:--- |:--- |
| -x509  |  署名要求ではなく、証明書を発行 |
| -days 3650  |  証明書の有効期間（例：10年間） |
| -newkey rsa:2048  |  秘密鍵を鍵長2048bit、RSA 暗号方式で生成 |
| -nodes  |  出力する秘密鍵を暗号化しない |
| -sha256  | ダイジェストアルゴリズム  |
| -subj | 証明書のサブジェクトを指定（利用しないと対話型で証明書のサブジェクトを定義する） |



## 2.2. クライアント証明書用の秘密鍵・署名要求を作成

```shell-session
$ openssl req -newkey rsa:2048 -keyout client1.key -nodes -out client1.csr \
              -subj "/C=JP/O=example.com/CN=CLIENT1"
```

## 2.3. 認証局用秘密鍵/証明書でクライアント証明書の署名要求に署名

```shell-session
$ openssl x509 -req \
               -in client1.csr \
               -CA rootCA.crt -CAkey rootCA.key -CAcreateserial \
               -sha256 \
               -days 365 \
               -out client1.crt 
```

* 主要なオプションのメモ

| オプション | 説明 |
|:--- |:--- |
| -req |  入力が署名要求でであり、署名し出力を行う |
| -CA rootCA.crt  |  認証局の証明書 |
| -CAkey rootCA.key   |  認証局の秘密鍵 |
| -CAcreateserial  |  シリアルナンバーファイルを生成 |
| -sha256  | ダイジェストアルゴリズム  |
| -days 365  |  クライアント証明書の有効期間（例：1年間） |

## 2.3. クライアント証明書をPKCS#12形式でまとめる

```shell-session
$ openssl pkcs12 -export \
                 -out client1.pfx \
                 -inkey client1.key \
                 -in client1.crt \
                 -certfile rootCA.crt \
                 -passout pass:<password>
```

* 主要なオプションのメモ

| オプション | 説明 |
|:--- |:--- |
| -export |  PKCS#12形式で出力 |
| -inkey client1.key  |  クライアント証明書の秘密鍵 |
| -in client1.crt  |  クライアント証明書 |
| -certfile rootCA.crt  |  認証局の証明書 |
| -passout  | PKCS#12ファイルを保護するパスワード（ブラウザにインポートする際などに聞かれる）  |




# おまけ

設定ファイルを作成し、`openssl`での署名時にオプションを設定することで証明書へタイプ、鍵用途などの属性を付与できる。

```shell-session
$ openssl req ～省略～ -config openssl.cnf
$ openssl x509 ～省略～ -extfile openssl.cnf -extensions usr_cert
```

```config:openssl.cnf
[ req ]
default_bits            = 2048
distinguished_name      = req_distinguished_name
x509_extensions         = v3_ca # The extentions to add to the self signed cert

[ req_distinguished_name ]

[ v3_ca ]
subjectKeyIdentifier   = hash
authorityKeyIdentifier = keyid:always,issuer:always
basicConstraints       = CA:true
keyUsage               = cRLSign, keyCertSign
nsCertType             = sslCA

[ usr_cert ]
basicConstraints       = CA:FALSE
nsCertType             = client
keyUsage               = nonRepudiation, digitalSignature, keyEncipherment
subjectKeyIdentifier   = hash
authorityKeyIdentifier = keyid,issuer
```
Spring Data Jpa Specification で OR 検索する

Spring Data JPA を使って単純な OR 検索と 少しだけ複雑な OR 検索をする方法をまとめます。

## Entity
DB のテーブルと結びつく Entity がこのようになっているとします。

```
@Data
@Entity
@Table(name = "users")
public class Users {
  @Id
  @Column(name = "user_id")
  private int userId;

  @Column(name = "company_id")
  private int companyId;
}
```


## Repository
```
public interface UsersRepository extends JpaRepository<Users, Integer> {

}
```

## Specification
```
public class UsersSpecifications {
  public static Specification<Users> userIdContains(
      int userId) {
    return new Specification<Users>() {
      @Override
      public Predicate toPredicate(Root<Users> root, CriteriaQuery<?> query,
          CriteriaBuilder cb) {
        return cb.equal(root.get("userId"), userId);
      }
    };

  public static Specification<Users> companyIdContains(
      int companyId) {
    return new Specification<Users>() {
      @Override
      public Predicate toPredicate(Root<Users> root, CriteriaQuery<?> query,
          CriteriaBuilder cb) {
        return cb.equal(root.get("companyId"), companyId);
      }
    };
  }
  }
}
```

## 単純な OR 検索
WHERE user_id = 1 OR user_id = 2;

```
usersRepository.findAll(Specification
            .where(UsersSpecifications.userIdContains(1))
            .or(UsersSpecifications.userIdContains(2)));
```

## 少し複雑な OR 検索
WHERE company_id = 3 AND (user_id = 1 OR user_id = 2);

```
usersRepository.findAll(Specification
            .where(UsersSpecifications.companyIdContains(1))
            .and(UsersSpecifications.userIdContains(1).or(UsersSpecifications.userIdContains(2))));
```