OmniAICreator/Qiita-1.07M huggingface dataset:
ActiveRecord::RecordInvalid (Validation failed: User must exist)

##前提
・rails5.2
・Heroku

##エラー内容

投稿しようとしたら、Userいない　＝＞Fail
だから、Userを紐づけないといけない！！
```
Processing by ListingsController#create as HTML...
User Load...
BEGIN
ROLLBACK
Completed 422 Unprocessable Entity in 7ms (ActiveRecord: 2.0ms)
ActiveRecord::RecordInvalid (Validation failed: User must exist)
```

え、紐づけてたけど。。。なんで？？？

## 関連コード（解決前）

```models/listing.rb
belongs_to :user
```
```controllers/listing_controller.rb
@listing = current_user
@listing = Listing.new
```

## 解決後コード
1.Rails5からbelongs_to関連はデフォルトでrequired: trueになる←これはエラーと関係ないか。。

```models/listing.rb
belongs_to :user, required: true
```

2.newの後に、current_userを入れる。

```controllers/listing_controller.rb
@listing = Listing.new
@listing.user = current_user　←これ
```
ExchangeOnline構成に必要なTXTレコード

オンプレミスとOffice365のハイブリッド展開を構成している場合のメモ。
カスタムドメインをスパム判定されないよう、ExchangeOnlineのメール送信者側の外部DNSにTXTレコード登録が必要である。

1.Hybrid構成ウィザードで必須
事前にTXTレコード登録はできず、Hybrid構成ウィザードで表示される値・ドメインを外部DNSに登録する。
https://docs.microsoft.com/ja-jp/exchange/hybrid-deployment/deploy-hybrid

2.office365で必須
v=spf1 include:spf.protection.outlook.com -all
https://docs.microsoft.com/ja-jp/office365/securitycompliance/how-office-365-uses-spf-to-prevent-spoofing

Office365以外からメールを送付する場合、以下も外部DNSにTXTレコード登録が必要
3.オンプレミスサーバーからメールが送信される出口(ゲートウェイ等)のグローバルIPまたはホスト名

4.利用しているSaaSサービスのIPまたはホスト名　*TXTレコードの情報はSaaSの公開情報などで判別


一般的なSPFに関する注意として、以下のような点があり。
・includeが10回制限あり。include回数は階層でカウントではなく、DNSルックアップの回数のため注意。
例えば、以下のgoogle.comのnslookup出力結果では4回DNSルックアップが走っている。
google.com	text = "v=spf1 include:_spf.google.com ~all"
_spf.google.com	text = "v=spf1 include:_netblocks.google.com include:_netblocks2.google.com include:_netblocks3.google.com ~all"
_netblocks.google.com	text = "v=spf1 ip4:35.190.247.0/24・・・（以下省略)
・-と~の区別について
・SPFの記載方法（行を区切って書かない)
誤:
example.jp.   IN TXT "v=spf1 +ip4:192.168.100.0/24 "
                     "+ip4:10.0.0.0/24 ~all"
正:
example.jp.   IN TXT "v=spf1 +ip4:192.168.100.0/24 +ip4:10.0.0.0/24 ~all"
https://salt.iajapan.org/wpmu/anti_spam/admin/operation/information/spf_i01/
Python 条件式を使用してカウンタが最大値になったら初期値に戻す処理で失敗した話

# はじめに
よくあると思われるカウンタの制御で値が最大値になったら初期値に戻すよくありそうなやつ。
以下のような処理を条件式(三項演算子)で書こうとしたら、
うまく動かなかったので戒めメモします。

```python:sandbox.py
MAX_VALUE = 5
cnt_a = 0
list_a = []

for _ in range(10):
    if cnt_a < ( MAX_VALUE - 1 ):
        cnt_a += 1
    else:
        cnt_a = 0
    list_a.append(cnt_a)

print(list_a)
```

```:実行結果
[1, 2, 3, 4, 0, 1, 2, 3, 4, 0]
```


# 勘違いしていた書き方
初めは以下のような書き方をしていました。
しかし、カウンタは0に戻すことができませんでした。

```python:sandbox.py
MAX_VALUE = 5
cnt_b = 0
list_b = []

for _ in range(10):
    cnt_b += 1 if cnt_b < (MAX_VALUE - 1) else 0
    list_b.append(cnt_b)
print(list_b)
```

```:実行結果
[1, 2, 3, 4, 4, 4, 4, 4, 4, 4]
```

ぱっと見てみると、想定している動きをしそうですが、
cnt_bに対して0を足すような動きになっているんですね。

# 書き直したやり方
色々動きを試してみたのですが、
以下の書き方ならできそうです。

```python:sandbox
MAX_VALUE = 5
cnt_c = 0
list_c = []

for _ in range(10):
    cnt_c = cnt_c + 1 if cnt_c < (MAX_VALUE - 1) else 0
    list_c.append(cnt_c)

print(list_c)
```

```:実行結果
[1, 2, 3, 4, 0, 1, 2, 3, 4, 0]
```


# 3つ同時に動かす
```python:sandbox.py
MAX_VALUE = 5
cnt_a = 0
list_a = []
cnt_b = 0
list_b = []
cnt_c = 0
list_c = []

for _ in range(10):
    if cnt_a < ( MAX_VALUE - 1 ):
        cnt_a += 1
    else:
        cnt_a = 0

    cnt_b += 1 if cnt_b < (MAX_VALUE - 1) else 0

    cnt_c = cnt_c + 1 if cnt_c < (MAX_VALUE - 1) else 0

    list_a.append(cnt_a)
    list_b.append(cnt_b)
    list_c.append(cnt_c)

print('a',list_a,sep=':')
print('b',list_b,sep=':')
print('c',list_c,sep=':')
```

```:実行結果
a:[1, 2, 3, 4, 0, 1, 2, 3, 4, 0]
b:[1, 2, 3, 4, 4, 4, 4, 4, 4, 4]
c:[1, 2, 3, 4, 0, 1, 2, 3, 4, 0]
```
SAS ViyaでHTMLのテーブルをデータソースにする

SAS ViyaはAIプラットフォームです。データソースは様々なものが指定できますが、今回はHTMLのテーブルをターゲットにする方法を紹介します。

## ライブラリの読み込み

ライブラリを読み込みます。トライアル環境の場合は[SAS Viyaのトライアル環境で html5lib を追加する - Qiita](https://qiita.com/ViyaDev/items/dd5b367eed4fcb7a11b3)を最初に行ってください。

```py
from swat.cas import datamsghandlers as dmh
```

## HTMLを指定する

次にHTMLを指定します。トライアル環境の場合はURL指定ができませんので、HTMLファイルをアップロードした上で指定してください。今回は[FDIC: Failed Bank List](https://www.fdic.gov/bank/individual/failed/banklist.html)を使っています。

```py
htmldmh = dmh.HTML('./FDIC_ FailedBankList.html')
```

データ型などは自動的に判別されます。

```py
htmldmh.args.addtable
{'datamsghandler': <swat.cas.datamsghandlers.HTML at 0x7fd8edfc3b70>,
 'reclen': 104,
 'vars': [{'length': 16,
   'name': 'Bank Name',
   'offset': 0,
   'rtype': 'CHAR',
   'type': 'VARCHAR'},
  {'length': 16,
   'name': 'City',
   'offset': 16,
   'rtype': 'CHAR',
   'type': 'VARCHAR'},
   :
}
```

## Viya用のテーブルにする

まずSAS Viyaのオブジェクトを作ります。

```py
from swat import *

cashost='localhost'
casport=5570
useremail='dev@viya.com'
userpassword='password'
casauth='~/.authinfo'
conn = CAS(cashost, casport, useremail, userpassword, caslib="casuser")
```

そしてテーブルを取り込みます。

```py
out = conn.addtable(table='banklist', caslib='casuser', **htmldmh.args.addtable)
```

### テーブルの構造を確認する

テーブル構造を確認します。

```
out.casTable.columninfo(table=dict(name='banklist', caslib='casuser'))
```

| Column | ID | Type | RawLength | FormattedLength | NFL | NFD |
|--------|----|------|-----------|-----------------|-----|-----|
| 0 | Bank Name | 1 | varchar | 90 | 90 | 0 | 0
| 1 | City | 2 | varchar | 18 | 18 | 0 | 0
| 2 | ST | 3 | varchar | 2 | 2 | 0 | 0
| 3 | CERT | 4 | int64 | 8 | 12 | 0 | 0
| 4 | Acquiring Institution | 5 | varchar | 65 | 65 | 0 | 0
| 5 | Closing Date | 6 | varchar | 18 | 18 | 0 | 0
| 6 | Updated Date | 7 | varchar | 18 | 18 | 0 | 0

このように文字型、数字型を自動的に判別されていれば大丈夫です。

## まとめ

他にもデータソースはExcelやCSVファイルなども利用できます。多彩なソースを取り込んで分析できますので、ぜひトライアルをお試しください。

[SAS for Developers | SAS](https://developer.sas.com/home.html)
[JavaScript] replaceでパターンにマッチした値に対して関数を実行する方法


replaceの第2引数に関数を渡すことで実現できる。

渡す関数の第1引き数は、正規表現にマッチした文字列。第2引き数は、キャプチャした対象（$n）の値を受け取る。
（以下例だと`_c`が_matchに`c`がcaptureに入る）


```javascript

// スネークケースの文字列をキャメルケースに変換したい
const toCamel = (str) => {
   return str.replace(/_(\w)/g, (_match, capture) => {
    return capture.toUpperCase()
  });
}

toCamel('camel_case') // camelCase
```


参考
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter
SAS Viyaのトライアル環境で html5lib を追加する

SAS ViyaはAI開発環境です。無料で使えるトライアル版を提供しています。様々なデータをデータソースとして取り込めるのですが、その中にHTMLテーブルを読み込める機能があります。しかし、デフォルトのまま実行すると、html5libがないというエラーになります。

```py
---------------------------------------------------------------------------
ImportError                               Traceback (most recent call last)
<ipython-input-4-8d2857382349> in <module>()
----> 1 htmldmh = dmh.HTML('./FDIC_ FailedBankList.htm', 'index=0')

/opt/sasinside/anaconda3/lib/python3.6/site-packages/swat/cas/datamsghandlers.py in __init__(self, path, index, nrecs, transformers, **kwargs)
    865 
    866     def __init__(self, path, index=0, nrecs=1000, transformers=None, **kwargs):
--> 867         super(HTML, self).__init__(pd.read_html(path, **kwargs)[index],
    868                                    nrecs=nrecs, transformers=transformers)
    869 
  :
/opt/sasinside/anaconda3/lib/python3.6/site-packages/pandas/io/html.py in _parser_dispatch(flavor)
    666     if flavor in ('bs4', 'html5lib'):
    667         if not _HAS_HTML5LIB:
--> 668             raise ImportError("html5lib not found, please install it")
    669         if not _HAS_BS4:
    670             raise ImportError(

ImportError: html5lib not found, please install it
```

そしてhtml5libをインストールしようとするのですが、テスト環境ではサーバから外部環境へアクセスが禁止されており、ネットワーク接続ができません。

```py
!pip install html5lib
Collecting html5lib
    :
  Retrying (Retry(total=0, connect=None, read=None, redirect=None)) after connection broken by 'ConnectTimeoutError(<pip._vendor.requests.packages.urllib3.connection.VerifiedHTTPSConnection object at 0x7f625ced3320>, 'Connection to pypi.python.org timed out. (connect timeout=15)')': /simple/html5lib/
  Could not find a version that satisfies the requirement html5lib (from versions: )
No matching distribution found for html5lib
```

それを回避する方法を紹介します。

## ローカルファイルをアップロードする

まず必要なのは html5lib と、さらに html5lib に依存する webencodings です。どちらもPyPIからダウンロードできます。

- [webencodings · PyPI](https://pypi.org/project/webencodings/)
- [html5lib · PyPI](https://pypi.org/project/html5lib/)

そしてダウンロードしたファイルをJupyterの画面でアップロードします。

<img width="1095" alt="Screenshot_ 2019-05-25 13.26.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274479/5b871011-e4c9-c73e-3612-e5bdcee8770d.png">

## インストールする

アップロードしたら、ファイルを解凍してインストールします。この時、 `--user` をつけてユーザ環境下にインストールします。インストールは依存がないwebencodingsを最初に行います。

```
!tar xfz webencodings-0.5.1.tar.gz
!pip install ./webencodings-0.5.1 --user

!tar xfz html5lib-1.0.1.tar.gz
!pip install ./html5lib-1.0.1 --user
```

## ライブラリの読み込みパスを追加する

ライブラリは `~/.local/lib/python3.6/site-packages/` にインストールされますので、このパスをライブラリの読み込みパスに追加します。 `dev` は皆さんのユーザ名です。

```py
import sys
sys.path.append("/home/dev/.local/lib/python3.6/site-packages")
```

これでHTMLテーブルが読み込めるようになります。

```py
from swat.cas import datamsghandlers as dmh
htmldmh = dmh.HTML('./FDIC_ FailedBankList.htm')
```

## まとめ

トライアル環境では他にも幾つかの制限はありますが、殆どの試用はできるようになっています。ぜひSAS Viyaを使ってAI/機械学習を体験してください。

[SAS for Developers | SAS](https://developer.sas.com/home.html)
カプセル化、ポリモーフィズム

[別記事](https://qiita.com/zama_8722/items/dcadc8a1eb0b0db977f3)にコメントした内容ですが、せっかくなので記事化しておきます。

# カプセル化

**アクセス制限することだけがカプセル化ではありません。**
**なんでもかんでもsetter/getterにするとカプセル化を破壊します。**

一般的に「～化」は「～にすること」。
「記事化」は「記事にすること」。
「日本語化」は「日本語にすること」。
「カプセル化」は「カプセルにすること」。

* 薬のカプセルは、「発熱、鼻水・鼻づまり、頭痛を緩和するために1日3回食後に2錠服用する総合感冒薬」のように、薬効成分をまとめて用途・用法・用量・使用条件を明確にし、効能・効果・目的が明確な名前を付けたもの。
* ソフトウェアのカプセルは、データと操作をまとめて用法(API)や制限を明確にし、責務・用途・目的が明確な名前を付けたもの。
* カプセル内の成分(データ)や仕組み(処理ロジック)は気にせずに、目的を容易に達成できるようにするのがカプセル化。
* カプセルの内容を勝手に変えると効果が変わるのでカプセルでガード。無理矢理中身を変えて効果・効能・結果が変わったら使用者の責任。
* JavaScriptやPythonの言語仕様にガード(アクセス制限)機能がないけれど、命名ルールなどで使用者にガードさせるのもあり。
* ガード(アクセス制限)することだけがカプセル化の目的ではない。
* 内部の情報・複雑な構造・プロトコルなどを隠し、外部から簡単に安全に扱えるようにするのが目的。

たとえば、「通信カプセル」は通信プロトコルやヘッダ形式を知らなくても使えるようにしたもの。
参考： http://e-words.jp/w/カプセル化.html

「徹底攻略 Java SE 11 Silver 問題集」には次のように書いてあるそうです：
> カプセル化は、ソフトウェアを分割する際に、関係するデータとそのデータを必要する処理を1つにまとめ、無関係なものや関係性の低いものをクラスから排除することで「何のためのクラスなのか？」というクラスの目的を明確化するために行い、ほかのクラスに重複するデータや処理がない状態を目指すものです。

# ポリモーフィズム(多態性)

**サブクラスにすることだけがポリモーフィズムではありません。**

使用例：「再生」ボタンを押すと、MP3プレイヤーならMP3ファイルを読み込んで音楽が再生されるし、DVDプレイヤーならDVD媒体が回転して映像と音(セリフや効果音)が再生される。

* 同じ命令でもオブジェクトによって異なる振る舞いをするのがポリモーフィズム。
* 違う振る舞いをするけど、同じ操作インタフェースで使えるので便利。
* 新しい製品が発売されても同じように使える。
* 使える物のバリエーションが増える。
* 使う側は苦労しない。負担軽減。

DVDプレイヤーの前面には操作インタフェースがあり、背面には接続インタフェースがある。
「再生」は操作インタフェースのひとつ。
違う装置でも共通インタフェースを持つことで統一的に扱えるようになる。ポリモーフィズムの恩恵。

### 目的

* 使う側の軽減負担、コード削減、省力化
* 使われる側を簡単に入れ替えられ、柔軟性向上
* 抽象クラス/インタフェースを使うことで依存性を断つ、独立性向上

### 手法

* 目的が同じなら同じ名前(抽象名)を付ける
* 共通インタフェースを定義する

### 実装手段

* 共通インターフェスを定義して、オブジェクト毎に実装を変える
* サブクラスにして、メソッドオーバライドして実装を変える
* メソッドオーバーロードして、同じメソッド名でも引数の型に応じて実装を変える

# 参考記事

もっと詳しく知りたい方は以下の記事がお勧めです。

- [オブジェクト指向と10年戦ってわかったこと](https://qiita.com/tutinoco/items/6952b01e5fc38914ec4e)
FirebaseUI(iOS)を日本語で使う方法

FirebaseUIの使い方はたくさん出てくるけど、日本語で使う方法がなかなか見つからなかったので記事にしておきます。

# 環境

- Swift 4.2.1
- FirebaseUI 6.2.1

# バンドルの追加

まず、[GitHub](https://github.com/firebase/FirebaseUI-iOS)からFirebaseUI-iOSのソースをダウンロードします。
次にダウンロードしたファイルを解凍して、以下の場所のFirebaseAuthUI.stringsをja.lprojフォルダごと自分のプロジェクトにコピーします。
Auth/FirebaseAuthUI/Strings/ja.lproj/FirebaseAuthUI.strings
※ファイルだけコピーするとバンドルと認識されないので注意！

# ソースの変更

FirebaseUIのカスタムバンドルに先ほど追加したFirebaseAuthUI.stringsを設定します。

```Swift
if let bundlePath = Bundle.main.path(forResource: "FirebaseAuthUI", ofType: "strings") {
    let bundle = Bundle(path: bundlePath)
    authUI?.customStringsBundle = bundle
}
```

# 実行結果

実行すると、このように日本語で表示されます。

<img width="375" alt="iOS の画像.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291442/50c4c2b9-2f8a-6163-24b0-6ac163ea9179.png">

ちなみにメールを日本語化するには、メールを送る前に以下のコードを実行すればOKです。
（Firebaseコンソールで日本語のテンプレートを選択しただけでは日本語にならないので注意！）

```Swift
Auth.auth().languageCode = "jp"
```
Lambda@Pythonのレイヤーを使う際の基本的な注意点（レイヤーに上げたファイルがimport出来ない人向け）

## 概要

Lambda（Python）でレイヤーを使う時の注意点について。

## 注意点

[公式](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-layers.html) の"ライブラリの依存関係をレイヤーに含める"に書いてあったりしますが、知っておかないといけないのは、以下の2点。

* LayerとしてアップするZIPは `/opt` に展開されること
* `/opt` 配下でPythonのパスが通っているのが、 `/opt/python` 、`/opt/python/lib/python3.7/site-packages` であること

したがってレイヤーにアップするZIPの中身は、下記の構造になっている必要がある。
※`/opt/python` 狙いの場合

```
python
└─hoge.py
```

## 上記以外のパスにしたい場合

`/opt` 配下であれば可能（レイヤーが `/opt` に上がることは変えれないので `/opt`は必須）

起動時、`sys.path` に `/opt` を追加すれば、 `python` という階層を作らなくていい。

```python
import sys
sys.path.append('/opt')

def lambda_handler(event, context):
    pass
```

もしくはLambdaの環境変数設定で `PYTHONPATH` に `/opt` を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299475/0db2af85-e285-88b0-2a74-b65c190cf392.png)


## 備考

* PythonでのLambda起動時に `sys.path` に通っているパス一覧

```text
'/opt/python'
'/opt/python/lib/python3.7/site-packages'
'/var/lang/lib/python3.7'
'/var/lang/lib/python3.7/lib-dynload'
'/var/lang/lib/python3.7/site-packages'
'/var/lang/lib/python37.zip'
'/var/runtime'
'/var/task'
```
[EC2]キーペアのフィンガープリントを確認する方法

`ssh-keygen -l -f (秘密鍵|公開鍵) -E (md5|sha1)` だとAWSのコンソールに表示されるフィンガープリントと一致しない。

### AWSのコンソール上で作成した秘密鍵からフィンガープリントを作成

```bash
openssl pkcs8 -in 秘密鍵 -nocrypt -topk8 -outform DER | openssl sha1 -c
```

### ssh-keygenを使って自分で作成したキーペアからフィンガープリントを作成

```bash
ssh-keygen -f (秘密鍵|公開鍵) -e -m PKCS8 | openssl pkey -pubin -pubout -outform DER | openssl md5 -c
```
何を測定するとよいか

ソフトウェア・サービスを提供する前に、何を測定するとよいか。
ソフトウェア・サービスを提供しはじめてから、何を測定するとよいか。


#空間と時間
測定の基本は、空間と時間。時間には、CPU稼働率、実行時間、通信時間などがある。
空間には、メモリ空間、ディスク空間、通信可能空間などがある。
## CPU稼働率
ある時間にCPUが稼働している割合。CPU稼働率が高いと、温度が上昇する可能性がある。

##実行時間
ある処理を始めてから終了するまでの時間。通信を含む処理の場合には、通信時間を含む場合がある。

##通信時間
片方向の通信時間と往復の通信時間のどちらかだけ測る場合と、両方測る場合がある。
往復の通信時間の半分が片方向の通信時間ではないことがあるため注意するとよい。
往路と復路の通信帯域が違ったり、経路が違うと、遅延に差が出ることがある。


##メモリ(空間)
最大に利用するメモリと、ずっと使い続けているメモリを確認するとよい。

##ディスク(空間)
最大に利用するディスクと、ずっと使い続けているディスクを確認するとよい。

メモリの利用状況が影響するかもしれない。メモリがいっぱいっぱいで利用していると、メモリの内容をディスクに退避(swap)するために、メモリの容量近くをディスクに書き始めるかもしれない。あるいは、エラーが起きた場合に、メモリの内容を書き出し(dump)するかもしれない。

ディスクの空きがないと、そこでシステムが止まるかもしれない。

ネットワーク上に、予備のディスクや、仮想ディスクがある場合には、実行時間、通信時間は遅くなるが、処理は継続できるかもしれない。


#電力、電流、電圧、温度、湿度
電気製品だから、電力、電流、電圧の何かは測っているとよい。
電力を測ったら、温度も測って、電力と温度との関係を求めているとよい。

温度が一定以上になると暴走したり、異常な処理をすることがある。

30年くらい前、intelの80386というCPUで、ヒートシンクを外すと、ネットワークがつながらないという現象が出たことがある。他の処理は正常動作していた。
箱を開いて、なんでこの機材だけヒートシンク外したままつけるのわすれてるんだって。

#測定項目の関係

CPU稼働率  -> 電力　-> 温度

メモリ空間 -> ディスク空間 -> 通信時間
　　　　　　　　　　　　　 -> 実行時間
          -> 実行時間
　　　　　 -> 電力　　　　-> 温度
LuaLaTeX/XeLaTeX で Cambria Math フォントを使ったときの見本

[ここ](https://tex.stackexchange.com/questions/425098/which-opentype-math-fonts-are-available) に `unicode-math` で使える数学フォントの見本一覧があります。

LuaLaTeX, XeLaTeX の [unicode-math.sty](https://org-technology.com/posts/lualatex-unicode-math.html) で使える数式フォントで（著者の美的基準で）まともに使えそうなものがあまりないので、Microsoft Windowsと Office に付属している [Cambria Math](https://ja.wikipedia.org/wiki/Cambria_(%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88)#Cambria_Math) フォントをLuaLaTeX, XeLaTeXで使ったときの書体を[LaTeX Font Catalogue](http://www.tug.dk/FontCatalogue/) 風に貼っておきます。他に自分的に許容できるのは [STIX 2](https://qiita.com/kakinaguru_zo/items/95a86668abcf09c7c9c4) くらいですが、なんかお勧めのものがあればコメント欄などで教えて下さい。

```latex
\usepackage{unicode-math}
\setmainfont{Cambria}
\setmathfont{Cambria Math}
```

Cambria Mathフォントにもバージョンがあって、例えばWindows 7付属のものだと `\perp` がうまく出なかったりするのでなるべく新しいものを使うのがよいです。

![Screenshot from 2019-05-25 12-29-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259309/e91bce9a-21d5-0ce0-2c71-af42d34714fa.png)
Homesteadで.bash_profileをいじったらターミナルの文字が白くなった

自分で書いた「[HomesteadでRuby on Railsの環境構築](https://qiita.com/yyykms123/items/339ba5a0645400882591)」を元に環境を作った所、`.bash_profile`という設定ファイルをいじったらターミナルのカラーがすべて白に変わってしまった.

## 解決方法

結論から先に書くと`.bash_profile`に以下の処理を追記すれば解決する。

```sh
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi
```

vimで上記の処理を追記

```sh
$ vim ~/.bash_profile
```

```vim:.bash_profile
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi
```

追記しただけでは変更が反映されないので、sourceコマンドを打つ。

```sh
$ source .bash_profile
```

これで変更が反映される。

## 原因

カラー等の設定は`~/.bashrc`に色々書いてありここを参照していたっぽい

```sh
$ vim ~/.bashrc
```

```vim:.bashrc
      *) return;;
esac

# don't put duplicate lines or lines starting with space in the history.
# See bash(1) for more options
HISTCONTROL=ignoreboth

# append to the history file, don't overwrite it
shopt -s histappend

# for setting history length see HISTSIZE and HISTFILESIZE in bash(1)
HISTSIZE=1000
HISTFILESIZE=2000

# check the window size after each command and, if necessary,
# update the values of LINES and COLUMNS.
shopt -s checkwinsize

..(以下省略)..

```

設定ファイルは`.bash_profile` -> `.bashrc`の順に実行されるそうなので、新たに作成したことによって`.bash_profile`しか読み込まれなかったっぽい。

「[HomesteadでRuby on Railsの環境構築](https://qiita.com/yyykms123/items/339ba5a0645400882591)」で追加した処理しか書いてなかったのでもともとファイル自体なかったのかも！？

```vim:.bash_profile
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
```

なので`.bashrc`も読み込まれるような処理を追加すればできた感じ。

## 参考記事
- [.bash_profileと.bashrcについて](https://qiita.com/shyamahira/items/260862743e4c9794b5d2)
- [.bash_profileと.bashrcなんて使い分けなくてよかったんや！](https://qiita.com/dark-space/items/cf25001f89c41341a9fd)
GANを使って上白石姉妹を生成してみた話

今回は[前回](https://qiita.com/I_Love_idachi/items/4ebed2cfb778f8cb2136)作成した上白石データセットを用いて、GANで上白石姉妹を生成しました。

とりあえずGAN自体が何をしているのかを説明していこうと思います。

## GANの機構
参考にしたサイトは以下。
[はじめてのGAN](https://elix-tech.github.io/ja/2017/02/06/gan.html)
[stanford-cs231n-2018](https://github.com/haofeixu/stanford-cs231n-2018/blob/master/assignment3/GANs-PyTorch.ipynb)

GANと言われると色んなGANがある([Deep LearningのGANで打線組んでみた【画像生成】](https://qiita.com/enmaru/items/ce22bc6479cc39448019))が、今回実装するのはGoodfellowさんが最初に提案したGAN([Goodfellow et al. (2014)](https://arxiv.org/abs/1406.2661))である。

![gan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/72f3a529-74b0-9565-a330-493c5a5eeedc.png)

個人的に、GANのアイデアは、Generator(生成器)とDiscriminator(弁別器)を用意してそれぞれの精度を上げていくところにあると思う。
紙幣の偽造者と警察の関係によく例えられるらしい。
紙幣の偽造者は偽札を上手く作ろうとしてその能力が上がっていくが、それと同時に警官の方もその偽札を見抜く能力を上げていくので、二人で競わせればその能力は上がっていく。(単調増加ではなさそう)

式は以下のように表せる。
$\underset{G}{\min}\underset{D}{\max}V(D, G) = E_{x{\sim}p_{data}(x)}[\log D(x)] +E_{z{\sim}p_{data}(z)}[\log(1-D(G(z)))]$ 

$D(x)$はそのデータが訓練データであると判定される確率、$D(G(z))$は生成したものが訓練データであると判定される確率、$1-D(G(z))$は生成したものが訓練データではないと判定される確率である。
最終的には、GeneratorとDiscriminatorがどちらも均衡する50%の精度がでるのが理想である。

## データセットの用意
前回スクレイピングで集めて、cv2で顔だけ切りとった画像達を使用した。
スクレイピングの仕方は[前回記事](https://qiita.com/I_Love_idachi/items/4ebed2cfb778f8cb2136)を参照してください。

## 実装してみる
以下を参考に実装しました。
[PyTorch-GAN](https://github.com/eriklindernoren/PyTorch-GAN/blob/master/implementations/gan/gan.py)
Colabで動かした結果は[こちら](https://colab.research.google.com/drive/1n5ETazcMd7kUMzakr6I2uTz34d7jobPr)

DiscriminatorとGeneratorは単純に多層パーセプトロン。
データのロードの仕方も前回とほとんど変更はない。(__MACOSXファイルを削除しないとエラーが出まくったので気をつけたい)

## 結果
学習を積むと悲しいことになった。
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/f31d66af-9b5c-5c54-13a3-0e5494bfcfae.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/cedce55e-3b4a-679c-357e-ce13ebfabcfa.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/76c4935a-3b18-b334-b8e8-7f8cb893c013.png)
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/6659d934-3034-96c0-03ca-f5b0ec98e855.png)
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/b4acb10d-603b-bdec-c5e0-689076a6cf5e.png)
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/5fc788fe-b92c-9731-5983-60e63569c1a0.png)
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/effce7c2-63b4-f884-a65b-86dd76237d5b.png)
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/18cab1ec-2d52-034c-be30-3e1d49877559.png)
![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423403/136e4cf2-cc77-d963-ee6b-bfb554368513.png)

まじでやばい。頭がおかしくなりそう。色覚が混乱している。

次回はCNNを使ったDCGANを使ってみようと思う。
VScodeのファイル名検索(Mac)&自動セーブ機能

# こんな経験ありませんか？
VScodeでファイルを検索する際に左側の一覧から探すが、見つからない、、、
ファイル検索バーで解決します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291139/02757a4f-64d3-470b-0b8b-3bb33ffe5f6f.png" width=25%>

# 検索バーの表示
VScode内で下記入力

```
commandキー + p
```

すると下記のような検索バーが現れるので、対象のファイル名を入力すると結果が現れる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291139/fd0d580e-9d42-c0b3-076a-99903e59c9c5.png" width=100%>

# 自動セーブ機能
下記画面の`Auto Save`を選択。
以後、自動セーブ機能が働きます。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291139/82b72282-281f-8565-4c54-47524f0910e8.png' width=100%>
(HTML5)datalist JQueryでお手軽取得(value&label)

HTML5から使えるdatalistをいまさらながら使ってみる

##HTML
```html
<input type="search" name="sample" autocomplete="on" list="list">
<datalist id="list">
    <option value="apple" label="りんご">
    <option value="lemon" label="れもん">
    <option value="banana" label="ばなな">
</datalist>
```

[autocomplete](https://www.yoheim.net/blog.php?q=20161102)はinput要素の入力候補を簡単に表示できます。
[list属性とdatalistのid属性は同じもの指定します。](http://www.htmq.com/html5/datalist.shtml)

<b>こんな感じの見た目になると思います。</b>
<img width="528" alt="Screenshot_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325600/dcfbe7df-bab5-8f02-23db-ae40ee86c192.png">


##Jquery/Js

```html
<script>
    $('input[name=sample]').on('change', function () {
        console.log($(this).val()); //value値
        console.log($("#list option[value='" + $(this).val() + "']").prop('label')) //label値
    });
</script>
```

value値は、val関数を使って取得できます。
labelはdatalist内に記述されているため、今回は、そのvalue値を持っているoptionのlabelを取得という形にしております。

console.logでこのようにでれば、完了です。(apple-リンゴ選択)
<img width="177" alt="Screenshot_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325600/42732cbf-de64-9add-305d-ae58e25022f6.png">
VSCode で特定のファイルタイプだけ formatOnSave する

Dart は formatOnSave を効かせたいんだけど、 JS は prettier とかが勝手にやってくれるからやりたくないという気持ちになった。
settings.json を開いて、下記のように書くとよい。

```json
{
  "[dart]": {
    "editor.formatOnSave": true
  },
  ...
}
```
MouserでBluetoothのキットを買った際にEUCが必要だった場合の対応メモ

Bluetooth Low Energy (BLE) の勉強用に便利な、[Nordic](https://www.nordicsemi.com/) の Development Kit、[nRF52840-Dongle](https://www.nordicsemi.com/?sc_itemid=%7BCDCCA013-FE4C-4655-B20C-1557AB6568C9%7D) と [nRF52840-DK](https://www.nordicsemi.com/?sc_itemid=%7B6BECB3CF-00F7-4B2D-8553-F1AD6AC458EF%7D) ですが、国内で売っているところが見当たらなかったので、[Mouser.jp](https://www.mouser.jp/)で購入してみました。

その際に、輸出規制関連の文書の提出が必要だと言われて多少苦労したので、その際のメモです。

## 背景

Mouserは物によるのかもしれませんが、少なくともこれらのキットは米国から発送しているみたいです。
Bluetoothには暗号技術とかが入っているからか、それともキャッチオール規制を厳守しているからか、発注をしたら米国の担当から Customer [End-User Certificate](https://en.wikipedia.org/wiki/End-user_certificate) （「EUC」と略すようです）を出してほしいと連絡がありました。

## EUCはこんな文書です

![EUC FORM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423595/d5bc6daf-9df3-e6f3-f201-c6d5a7140b15.png)

## はまったところ

### Point 1: 名前はきちんと書く

"Company or Individual Information > Name or Company Name" という欄があります。
ここに最初、"Private Use" と書いていたのですが、個人の場合この欄には名前を記載する必要があるとのこと。
 
### Point 2: 最終用途に何と書けば良いか分かりづらい

"Specify the End-Use for this product by name or its application and if military or civilization"（意訳: 最終用途となる製品の名前、もしくは使用方法を示し、それが軍事目的に当たるか、それとも民生用か示せ）という欄に、最初は以下のように書いて送付しました：
 
> Private Use, learning Nordic SDK.`

以下のようなフィードバックあり：

> Our US Government Export Administration Regulations may audit this EUC document and does not accept acronyms of the following:  for our own use, hobby, educational, demonstration, experiment, prototype, R&D, research, development, test, evaluation, sample, internal, or similar for an end use.

要するに、単に「学習用」とか「検討用」とだけ書いてあると、監査の際にNGを出される場合があるということです。

そう言われても実際にNordic SDKの勉強用に買っているので、
もう少し内容を限定してみました：

> Personal Use, demonstrate sample application published by Nordic (http://developer.nordicsemi.com/nRF5_SDK/) and learn Bluetooth technology using it.

この記載にしたらOKだったようで、発送されました。

この欄は、要するに「軍事用などに使わないよ」という宣言なので、
用途にそれに関するものが入ってないとわかるレベルの粒度の記載があれば良さそうです。

## ところで

Mouserさん、アメリカから送っているのに送料無料です。
今回の場合、nRF52840-DKとnRF52840-Dongle合わせて6500円ちょっとだったのですが、採算取れるんでしょうか？
2019年5月時点　JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ


# 多くの初心者向け解説がもはや罠でしかない

```よくある例.js
var str = "hello world";
```

初心者向け解説によくある例です。

**これが現時点（2019年5月時点）で非推奨な書き方だと、初心者は気付くことができない。つらい。**


【JavaScript初心者のつらいところ】

* 初心者向け解説（チュートリアル）の`var`を`const`や`let`に置き換えなきゃいけない
* 何も知らず`var`で写経すると悪癖がつく
* 他にも「今は覚えなくていい書き方」がどうやらたくさんある
* 「歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ」を読むには、そもそも必要とされる前提知識を持ってない
* 「何が正解かわからない→ググる」と、正しい情報探しに時間が消える

**解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？**

そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。


# 【js-primer】
[js-primer](https://jsprimer.net/)
> これからJavaScriptに入門したい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる本です。

## 著者は誰？
[Github](https://github.com/asciidwango/js-primer)を見ると[アスキードワンゴ編集部](https://github.com/asciidwango)のリポジトリです。
[azu](https://efcl.info/)さん、[Suguru Inatomi](https://lacolaco.net/)さんという方々によるもののようです。


## 嬉しいポイント：日本人が書いているから日本語が自然！！！

翻訳日本語じゃないよおお読みやすいよおおおおお頭にすんなり入るよおおおおおお


## 嬉しいポイント：変数宣言が基本的に`const`！！

`var`から置き換えて読まなくていい。ありがたい。


# 【現代の JavaScript チュートリアル 】
[現代の JavaScript チュートリアル](https://ja.javascript.info/)

## 著者は誰？
> Javascript.info は、ロシアで最大級のJavaScriptチュートリアルと学習プラットフォームである learn.javascript.ru のフォークとして作成されました。


## 嬉しいポイント：「`let`, `const`」（※おまけで`var`）

説明順序が「JavaScriptはこういった歴史があってね～」じゃない。
「最初は文法を身につけるだけ」に集中できる。


## 嬉しいポイント：DOMツリーの扱い方解説も！！

第一章がJavaScript仕様、第二章がブラウザ操作仕様。
それらをごっちゃにせず、きちんと分けて書いてくれてます。


# 初心者はMDNのチュートリアルはやめておけ
[JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

正確性、網羅性、信頼性の高さが圧倒的なMDN。
しかし、罠を罠と気付けない初心者が読むにはしんどい。
他にも、検索結果に出てきたブログや個人Webサイトetc. ……**罠を罠と気付けない内（重要）**は、控えたほうが良いかもしれない。


上記2サイトの知識を網羅すれば、MDNやその他ブログ、サイトを安全に読むリテラシーが身につきそうです！！
gitでブランチ切り替えようとしたら、error: you need to resolve your current index first !!


```
git checkout [自分のbranch名]
```
上記コマンドで、git でブランチを切り替えようとしたら下記のようなエラーが発生しました!!

```
error: you need to resolve your current index first
```

コンフリクトが起きていますね!!下記コマンドで解決しました!!

```
git merge --abort
```

解決です!!
Terraform: 環境ごと（dev, productionなど）の設定値をworkspacesと組み合わせて切り替えられるようにする


## なぜ

Terraformのworkspacesの機能を使うと、複数環境を切り替えられるようになる。
環境によって切り替えたい設定が場合にどうしたら良いか。

GitHubのissueにいい感じの方法が書いてった。


## どうやって

下記のような内容でファイルを作成する。

```vars.tf
locals {

  env = {
    defaults = {
      project_name = "project_default"
      region_name = "region-default"
    }

    staging = {
      project_name = "project-staging"
    }

    production = {
      region_name = "region-production"
    }
  }

  config = "${merge(local.env["defaults"], local.env[terraform.workspace])}"
}
```

使う側は、`"${local.config["project_name]}"`のようにする。

この例では、workspace名は、"staging"もしくは"production"となっている必要がある。


## 参考
https://github.com/hashicorp/terraform/issues/15966
HistGradientBoostingを使ってみた

Scikit-Learnのv0.21.1以降ではLightGBMに似た、[HistGradientBoosting](https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.HistGradientBoostingRegressor.html#sklearn.ensemble.HistGradientBoostingRegressor)（以下HGB)というアルゴリズムが使えると聞いたので試してみました。

#環境


AnacondaでJupyterを使用しました。

#Sckit-learnの更新
まずはscikit-learnヴァージョンの更新。
Anaconconda promptで下記コードを打ち、v0.21.1にします。


```python

pip install scikit-learn==0.21.1
```



#データ
kaggleの[タイタニックコンペのデータ](https://www.kaggle.com/c/titanic/data)を使用しました。

#Jupyterを開き、下記コードを入力。


使用ライブラリ、タイタニックデータを読み込みます。


```python

import pandas as pd
import numpy as np
import random as rnd
from sklearn.linear_model import LogisticRegression
from sklearn.svm import SVC, LinearSVC
from sklearn.ensemble import RandomForestClassifier

from sklearn.metrics import accuracy_score
from sklearn.model_selection import cross_val_score
from sklearn.experimental import enable_hist_gradient_boosting
from sklearn.ensemble  import HistGradientBoostingClassifier
#from sklearn.ensemble  import HistGradientBoostingRegressor
from lightgbm import LGBMClassifier

train = pd.read_csv("データのあるフォルダ/train.csv")
test = pd.read_csv("データのあるフォルダ/test.csv")

```


データを前処理します。欠損を埋め、アルファベットを数字に変換。
このページを参考にさせていただきました。[【Kaggle初心者入門編】タイタニック号で生き残るのは誰？](https://www.codexa.net/kaggle-titanic-beginner/)

```python

train["Age"].fillna(train["Age"].median(), inplace=True)
train['Embarked'].fillna('C', inplace=True)
train["Sex"][train["Sex"] == "male"] = 0
train["Sex"][train["Sex"] == "female"] = 1
train['Sex']= train['Sex'].astype(float)
train["Embarked"][train["Embarked"] == "S" ] = 0
train["Embarked"][train["Embarked"] == "C" ] = 1
train["Embarked"][train["Embarked"] == "Q"] = 2
train['Embarked']= train['Embarked'].astype(float)

test["Age"] = test["Age"].fillna(test["Age"].median())
test["Sex"][test["Sex"] == "male"] = 0
test["Sex"][test["Sex"] == "female"] = 1
test['Sex']= test['Sex'].astype(float)
test["Embarked"][test["Embarked"] == "S"] = 0
test["Embarked"][test["Embarked"] == "C"] = 1
test["Embarked"][test["Embarked"] == "Q"] = 2
test['Embarked']= test['Embarked'].astype(float)
test.Fare[152] = test.Fare.median()
```

とりあえずこのデータでいきます。


さっそくHGBを試してみます。今回は分類なのでHistGradientBoostingClassifier()を使いました。
比較の為に、LightGBM,やランダムフォレスト等を全てデフォルト設定で同時に実行し、
結果を表示します。

```python

X_train = train.drop(['Survived','Name','PassengerId','Cabin','Ticket'], axis=1)
y_train = train["Survived"]

SVM = SVC()
RF = RandomForestClassifier()
LR = LogisticRegression()
HGBC = HistGradientBoostingClassifier()
LGB= LGBMClassifier()

scores = []
modelnames = ['HistGradient','SVM','RandumForest','LightGBM','LogisticRegression']
models = [HGBC,SVM,RF,LGB,LR]

for i in models:
    score = cross_val_score(i, X_train, y_train, scoring = 'accuracy' , cv = 5).mean()
    scores.append(score)
    
pd.DataFrame(scores, index=modelnames,
            columns=['CV Scores']).sort_values(by = 'CV Scores', ascending = False)    
```

![jjj.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191446/26a92951-9f2f-5616-7e44-eaaab0cce282.jpeg)


パラメータは全てデフォルト設定ですが、確かにLightGBMに近い精度が出るようです。

今後、ハイパラ調整など、もう少し詳しくやってみたいと思います。
ios/safari/jquery でモーダルを表示させてる時だけ背景をスクロールさせない

# やりたいこと
 - モーダルを表示させているときには、背景となっているコンテンツをスクロールさせないようにする

# 結論
 - どうも完全に制御しきることは難しいという結果になったので、ある程度妥協は必要。要件に応じて以下の解法を使い分けするしかなさそう。

# 追記(2020/5/23)
今年もこの件でハマって、さらに今回はJQueryではなかったが、この投稿記事の内容よりも、より良い対処があったので記事リンクを追記しました。

 - [iOSを“区別”したモーダル背景のスクロール固定](https://qiita.com/m_shinada/items/5ae37fdc1d54ce8dd6b8)
 - [iOS Safariで、絶対配置指定している要素内でスクロールができないことがある](http://shanabrian.com/web/html-css-js-technics/css-ios-safari-02.php)

# 解決策
## その1.よくある対処法
 - `window` の `touchmove` イベントで `event.preventDefault();` する  

```js:window/bodyに対する制御だけ。モーダルの表示制御は除外
function openModalScrollControl() {
  $("body").addClass("no_scroll");
  $(window).on('touchmove', (e) => {
    e.preventDefault();
  });
  // { passive: false } というオプションを付けたら良いかも的な記事もありましたが、
  // 付けるとJQuery内部のエラーが頻発する(制御はできてる)のと、オプションを付けなくても同じレベルの制御は出来ていたので、外している
}
function closeModalScrollControl() {
  $("body").removeClass("no_scroll");
  $(window).off('touchmove');
}
```

```sass:css抜粋
.no_scroll
  overflow: hidden

// モーダル最上位要素
.modal_overlay 
  position: fixed
  top: 0
  left: 0
  bottom: 0
  // %が重要、vhだとスクロールが動く
  height: 100% 
  width: 100%
  // 重要
  overflow-y: auto 
  // これがないとスクロールがカクカクする。 
  // fixed + touch でフリーズする問題もあるらしい
  -webkit-overflow-scrolling: touch 
  // モーダルのコンテンツ部分
  .modal_contents
   ...
```

## この方法での問題点
 - iphoneブラウザ(safari/chrome)のヘッダー・フッターが隠れる(小さくなる)状態では、 `touchmove` で制御できないようなので、背景がスクロールされてしまう
   - `scroll` イベントに対して `preventDefault` も試したが、ダメだった(当然だろ！ってツッコミは無し)

## 参考リンク
 - [JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ](https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/)
 - [jQuery スマートフォンでスクロールを停止させたい方へ。](https://tiltilmitil.co.jp/blog/891)
 - [iOS でページ全体はスクロールを無効にし、個別の要素（textarea など）では有効にする方法](https://qiita.com/noraworld/items/2834f2e6f064e6f6d41a)
 - [ipad safari: disable scrolling, and bounce effect?](https://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect)
 - [jQueryでスマホのスクロールイベントを無効化する](https://qiita.com/kokushin/items/ef96194bd0fa7c145d7b)

---
## その2. 
 - `html,body` に `overflow: hidden` を付ける
 - `overflow: hidden` の影響で表示位置が変わるので、モーダルを閉じたときに、モーダル表示した時の表示位置に戻す

```js:window/bodyに対する制御だけ。モーダルの表示制御は除外
let scrollPos;
export function openModalScrollControl() {
  $("html,body").addClass("no_scroll");
  scrollPos = $(window).scrollTop();
}

export function closeModalScrollControl() {
  $("html,body").removeClass("no_scroll");
  $(window).scrollTop(scrollPos);
}
```

```sass:その1と一緒
.no_scroll
  overflow: hidden

// モーダル最上位要素
.modal_overlay 
  position: fixed
  top: 0
  left: 0
  bottom: 0
  // %が重要、vhだとスクロールが動かない
  height: 100% 
  width: 100%
  // 重要
  overflow-y: auto 
  // これがないとスクロールがカクカクする。 
  // fixed + touch でフリーズする問題もあるらしい
  -webkit-overflow-scrolling: touch 
  // モーダルのコンテンツ部分
  .modal_contents
   ...
```

## 問題点
 - モーダルを表示した時 `html,body` に `overflow: hidden` を付与する影響で、背景となっているコンテンツのページトップに強制移動しているのが若干わかる（見える）

## 参考リンク
 - [iOSでスクロールできないようにする](http://cly7796.net/wp/smartphone/prevent-scrolling-with-ios/)

---

いつもQiitaには助けられています。感謝
@types/styled-componentsをインストールするとnode_modules/@types/react-native/globals.d.ts (36,15): Duplicate identifier 'FormData'.となる

# 原因
`@types/styled-components`の`4.1.9`から`@types/react-native`が同梱されている。
この`@types/react-native`がweb版のreactと衝突したためにエラーが発生してしまう

# 対応方法
大まかに2つ

* 1. バージョンを`4.1.9`以前で固定する

```json:package.json
  "devDependencies": {
    "@types/styled-components": "4.1.8",
    ...
  }
```

* 2. `.yarnclean`に下記を追加

```:.yarnclean
@types/react-native
```

# 参考
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311
電車でQuestするとどうなるか

スタンドアローンVRの[OculusQuest](https://www.oculus.com/quest)が2019/5/21に発売された。
現在(5/25時点)、各地に徐々に届きだしている様子。(konozama民は除く)
僕のところには22日に届き、24日に「[第33回 バーチャル・サミット関西 in神戸＠5/24](https://vskansai.doorkeeper.jp/events/91407)」の体験会で持参。
その帰りで、「電車でQuest」したので、どうだったかを記載する。

# 電車でQuestって？
電車の中でOculusQuestをかぶってゲームとかすること。「電車でGo」(電車の中で[OculusGo](https://www.oculus.com/go/)をかぶってゲームとかすること)のOculusQuest版。
こんな感じ。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141310/dd3a1bcb-c481-9f5f-b0a2-5a0febc99b3a.png)

# 何が目的？
電車や新幹線、飛行機などで一定時間移動する場合、人が多かったり、狭かったり、パーソナルスペースが侵されりで、心理的に不安定になる(イライラする、落ち着かない、気になる等)要因になる。
VR空間上では、限りなく広い個人空間が確保でき、それらの要因を除去することができると考えている。
問題点としては、以前OculusGo(「電車でGo」)で試したところ、加速度センサーの影響で、VR空間が勝手に動いてしまう点があった。

これは、こまめにリセンターで解消するという手もあるが、ついつい動いていくVR空間を追ってしまい、気づくと真横を向いていて、**隣の人に多大なプレッシャーを与える**という問題に発展する恐れがある。
この問題がOculusQuestでも発生するかどうかの実験と、**単純に電車でQuestしたかった**、というのが今回の目的。

# 条件
今回の条件は以下になる。

* 座席に座る
* 静止モードでプレイする
* 時間は10分程度
* 夜で向かいの窓から景色はほぼ見えない
* ガーディアン設定は電車が動いているときに実施

あと、安全と撮影のため、知り合いに同行していただいた。

# 実施内容
実施した内容は以下になる。

* ホーム画面でVR空間が勝手に動かないかどうかを確認
* ゲームがズレなくプレイできるかを確認。今回プレイしたのは「Beat Saber」。

# 実施結果
## ホーム画面でVR空間が勝手に動かないかどうか
動かなかった。

## ゲームがズレなくプレイできるか
ズレなくプレイできた。

# まとめ
今回は時間も短く、窓の外の景色が夜のためほぼ見えていないというのもあったせいか、VR空間は動くことなく、ゲームプレイ中にズレたりすることもなく、快適に電車でQuestができた。
今後は、新幹線(座席が進行方向を向いている)や、長時間の場合や、窓の外の景色が把握できる場合、窓の外の景色が見える割合が多い場合と少ない場合、電車が止まっている状態でガーディアン設定する場合などを実験してみたい。
とりあえず、OculusQuestはすごくいい！
#shell で「ファイルの中身が存在する」「空ファイル or ファイルが存在しない」の違いを判定する ( -s filepath )

- `if [ -s <filepath> ]` でファイルが存在し、なおかつ中身がある場合に True 判定が返理想
- ファイルの中身が空 or ファイルが存在しない場合に False 判定が返りそう

# example

```
$ echo "a" > /tmp/a
$ touch /tmp/b
$ if [ -s /tmp/a ]; then echo not empty; else echo empty; fi
not empty
$ if [ -s /tmp/b ]; then echo not empty; else echo empty; fi
empty
$ if [ -s /tmp/c ]; then echo not empty; else echo empty; fi
empty

```

# ref

```
You can use the find command and other options as follows. The -s option to the test builtin check to see if FILE exists and has a size greater than zero. It returns true and false values to indicate that file is empty or has some data. This page shows how to check if a file is empty in Bash shell running on a Linux or Unix-like operating systems.

```

[Linux / UNIX: Check If File Is Empty Or Not Using Shell Script - nixCraft](https://www.cyberciti.biz/faq/linux-unix-script-check-if-file-empty-or-not/)

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
unite-colorscheme で Vim のカラースキームを動的に変更する

## はじめに

Vim で開発していて、気分を変えるために普段と違うカラースキームに切り替えたいと思うことがたまにあります。

今までは.vimrc から直接設定変更していましたが、[unite-colorscheme](https://github.com/ujihisa/unite-colorscheme) が便利そうだったので紹介します。

## unite-colorscheme とは

[unite-colorscheme](https://github.com/ujihisa/unite-colorscheme) は、Vim 上で使える統合インターフェイスである Unite.vim でカラースキームを切り替えることができるプラグインです。

## インストール

Unite.vim と unite-colorscheme をインストールします。以下は dein.vim の例です。

```vim
call dein#add('Shougo/unite.vim')
call dein#add('ujihisa/unite-colorscheme')
```

## 使い方

`:Unite colorscheme` と実行すると、設定できるカラースキーム候補が表示されます。

そこからカラースキームを選択すると、カラースキームが切り替わります。

以下のようにオプションを追加すると、選択中もカラースキームがプレビューで切り替わるようになります。

```vim
:Unite colorscheme -auto-preview
```

実行すると以下のようにカラースキームをプレビューしながら切り替えることができます。


![May-25-2019 10-07-47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222030/46ce0997-4850-a810-9e55-f38585bcc1ed.gif)

## カラースキームをブラックリスト登録

`:help unite-colorscheme` でヘルプを確認できます。

候補に表示させたくないカラースキームを、ブラックリストに登録する事ができるようです。
以下、ヘルプから抜粋します。

```vim
	let g:unite_colorscheme_blacklist = [ 
		\ 'blue', 'darkblue', 'delek', 'evening',
		\ 'desert', 'elflord', 'koehler', 'morning',
		\ 'murphy', 'pablo', 'peachpuff', 'ron',
		\ 'slate', 'torte', 'zellner']
```

## おわりに

気分に応じてカラースキームを切り替えるのが簡単になりました。別途プラグインの内部処理も勉強がてら読んでみようと思います。
RubyonRailsでtwitter風webアプリケーションの作成 STEP3:ログイン、ログアウト機能の実装


セッションコントローラーの作成

```ruby:コマンドライン
rails g controller Sessions new
```

ルーティングの設定

```ruby:config/routes.rb
resources :sessions, only[:new,:create,:destroy]
```

ログインビューの作成

```erb:app/vews/sessions/new.html.erb
  <div class="row">
  <div class="col-md-5 col-md-offset-2">
    <h3 class="page-header">ログイン画面</h3>
    <%= form_for(:session,url: sessions_path) do |f| %>
    <div class="form-group">
    <p><%= f.label :email , "メールアドレス"%></p>
    </div>
    <p><%= f.email_field :email %></p>
    <p><%= f.label :password,"パスワード" %></p>
    <p><%= f.password_field :password %></p>
    <p><%= f.submit "ログインする", class: "btn btn-primary" %></p>
    <% end %>
  </div>
</div>
```

ログインに必要なヘルパーを読み込み

```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  include SessionsHelper
end
```
ログインに関するメソッドの追記

```ruby:app/helper/sessions_helper.rb
module SessionsHelper

  def log_in(user)
    session[:user_id] = user.id
  end

  def current_user
    if session[:user_id]
      @current_user ||= User.find_by(id: session[:user_id])
    end
  end

  def logged_in?
    !current_user.nil?
  end

  def log_out
    session.delete(:user_id)
    @current_user = nil
  end
end
end
```
ヘッダー（ナビバー）にログイン、ログアウトのリンク追記


```erb:app/vews/shared/_header.html.erb
    <ul class="nav navbar-nav navbar-right">
      <% if logged_in? %>
      <li><%= link_to @current_user.email + "さんでログイン中"%></li>
      <li><%= link_to "ログアウト",session_path(@user),method: :delete %></li>
      <% else %>
      <li><%= link_to "ログイン",new_session_path %></li>
       <li><%= link_to "新規登録",new_user_path %></li>
       <% end %>
    </ul>
```

ユーザー登録後、ログイン中になるようにする

```rb:app/controllers/users_controller.rb
  def create
    @user = User.new(user_params)
    @user.save
    log_in @user
    redirect_to @user
  end
```

サーバーを起動してブラウザで確認

![スクリーンショット 2019-05-25 9.56.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420746/35edcbb6-ac4d-e546-3742-3fd7c627699e.png)

![スクリーンショット 2019-05-25 9.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420746/a12e053c-5a5a-d923-55a6-a4cb707bf493.png)

![スクリーンショット 2019-05-25 9.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420746/a739fd7d-a76a-feaf-a0e4-cc4a2593bf56.png)

今回はここまで

次は投稿機能の実装をしていきます。[コチラ](https://qiita.com/JUM22676603/items/c02762182498a2f615f2)
Android の Camera2 API と SoundPool を使って シャッター音を鳴らす

[Android の Camera2 API を使って カメラのプレビュー画面を表示する](https://qiita.com/ohwada/items/7bb65a566114066c8ced)
の続きです。

## シャッターのタイミング

Camera2 API　には、シャッターに関する機能はないようです。


前回の記事で紹介した下記のコードを参考にした。

(Basic functionalities of both Camera1 API and Camera2 API with a Google Vision Face Detector added)
[https://github.com/EzequielAdrianM/Camera2Vision]

この記事では、Camera2Source の中で　captureStillPicture　を実行する時にした。
下記のように、captureStillPictureを実行する時に、コールバックする。

```
    private void captureStillPicture() {
            if(mShutterCallback != null) {
                mShutterCallback.onShutter();
            }
```


下記のような処理の流れとなる。

(1) picture ボタンをクリックする

(2) CaptureCallback にて、captureStillPicture を実行する
(3) ShutterCallback の onShutter をコールバックする

(4) シャッター音を鳴らす

(6) ImageReader に画像がキャプチャーされる。
(7) PictureCallback の onPictureTaken をコールバックする
(8) 画像をファイルに保存する。


## SoundPool

サウンドファイルを再生するクラス
効果音の再生に適している。
事前にメモリに展開するので低レイテンシー。
再生できるのは５秒程度。

[reference: SoundPool](https://developer.android.com/reference/android/media/SoundPool.html)

シャッター音の音源は、下記のサイトのものを使用した。

[効果音ラボ](https://soundeffect-lab.info/sound/machine/)

サンプルコードをgithub に公開した。
https://github.com/ohwada/Android_Samples/tree/master/Camera29
CMakeとVisual Studioでプリコンパイル済みヘッダを扱う最もシンプルな方法

CMakeは，各種プラットフォーム向けにビルド環境を生成することができる，マルチプラットフォーム向けのC/C++/C#/Objective-Cによるオープンソースにとって無くてはならないツールです．

ですが，マルチプラットフォームではなく，単純にプロジェクトをテキストベースで管理したい場合にもCMakeは非常に便利です．バージョン管理をしている場合に，Visual Studioのプロジェクト設定の変更を差分から読み取るのは大変ですが，CMakeであれば，変更した行は分かりやすいことでしょう．

しかし，ここで問題になるのが，プリコンパイル済みヘッダを使いたい場合です．色々調べてみると，そのための機能をCMakeに提供するためのオープンソースなども公開されていますが，Visual Studioに限るのであれば，次のようにシンプルに書けます．

```
# プリコンパイル済みヘッダの使用(/Yu)を全体に設定
set(CMAKE_CXX_FLAGS "/Yu")
# CMakeの場合，Debugで_DEBUGを定義していないので定義しておく
set(CMAKE_CXX_FLAGS_DEBUG "/D_DEBUG")

add_executable(App stdafx.h stdafx.cpp main.cpp)

# stdafx.cppのみプリコンパイル済みヘッダの作成(/Yc)を設定する
set_source_files_properties(stdafx.cpp PROPERTIES COMPILE_FLAGS "/Yc")
```

そう，CMAKE_CXX_FLAGSとstdafx.cppへのCOMPILE_FLAGSプロパティの設定だけでプリコンパイル済みヘッダが使えるのです．
あまりアレコレ余計なものを追加したくない，という場合，この設定を利用してみてください．

# 2020/07/21追記
CMake 3.16から，[target_precompile_headers](https://cmake.org/cmake/help/latest/command/target_precompile_headers.html)が追加されたので，より簡単に書けるようになりました．

```
add_executable(App main.cpp)
target_precompile_headers(App header1.h header2.h)
```
特に気にせずフォルダ作成していたら大変なことになっていた件(ラノベ風)

#はじめに

ある日作成しているプロジェクトファイルのディレクトリを見ると、今まではこんなことなかったのですが

![スクリーンショット 2019-05-25 1.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/dbaeb10f-f96b-ea83-195e-2169d4784ace.png)




リソース配置がめちゃくちゃなっていたのです

#原因

実はXcode内のフォルダには

![870c5537-76b7-44b6-b760-118b98f46e7c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/40365f24-aa45-9b88-d62a-3b6f1667ae0c.png)



###リンクフォルダ

左下に三角のようなものがついている
Xcode内だけでのフォルダでProjectファイルにはフォルダは作成されない、このフォルダに新規ファイルを作るとプロジェクトファイル直下に置かれる

※リンクフォルダと書いていますが、正式名称がわからなかったためこう呼んでいます🙇‍♂️
ご存知の方いましたらコメントしていただけると幸いです。

###普通のフォルダ

実フォルダ、ファイルを作成するフォルダ内にきちんと配置される

と２種類あったのです


#改善方法

フォルダ作成の選択肢で

newGroup　ー＞　新規リンクフォルダ作成　になるので、NewGroupWithFolderの方選べばいいのかとなりかもしれませんが、
NewGroupWithFolderは現在選択しているのフォルダがリンクフォルダかそうじゃないかによって選択の種類が変わっています。

<img width="290" alt="スクリーンショット 2019-05-25 2.06.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/0aaeccef-f68b-6529-b8cc-1731d117ef6b.png">
<img width="290" alt="スクリーンショット 2019-05-25 2.06.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/13441b2b-1c18-fd1c-7a1b-6db0320cad49.png">

実フォルダを選択している状態　ー＞　NewGroup Without Folder(リンクフォルダを作成)
リンクフォルダを選択している状態　ー＞　NewGroupWithFolder(実フォルダが作成されるが元のディレクトリがリンクフォルダなのでリンクフォルダの下にできるが、プロジェクトファイルにおけるの場所はプロジェクトファイル直下)

#まとめ

ぐちゃぐちゃになってから直すと色々めんどくさいので早めに気づけてよかったです(１敗)
docker hub ”denied: requested access to the resource is denied”

docker hubで登録できないことがときどきある。

記録

```shell-session
$ docker push kaizenjapan/haskell
The push refers to repository [docker.io/kaizenjapan/haskell]
b75fa44085b0: Preparing 
8d267010480f: Preparing 
270f934787ed: Preparing 
02571d034293: Preparing 
denied: requested access to the resource is denied
```
ブラウザではloginしている。
コマンドにloginしていることが伝わっていないらしい。

```
$ docker login -u kaizenjapan
Password: 
Login Succeeded

$ docker push kaizenjapan/haskell
The push refers to repository [docker.io/kaizenjapan/haskell]
b75fa44085b0: Pushed 
8d267010480f: Mounted from library/ubuntu 
270f934787ed: Mounted from library/ubuntu 
02571d034293: Mounted from library/ubuntu 
latest: digest: sha256:cced74a7f999289bdc93f4e412fcef222c3f3f19da3f37b467638c9ba4b1d260 size: 1156
```
今日は、一発でエラー状態から回復できた。
RL78

RL78で感じたことなどメモ。
普段はNXP（mbed）で間に合うんだけど、数年前からポツポツとRL78を使う仕事が出てきたので、まとめた記事を[**こちらにアップしました**](https://yokaton.com/mcu-202209-rl78/)･･･さすがにこの頃はもうH8やSHの仕事は無い(^^;
RSS フィードで取得した更新情報を LINE WORKS にトーク BOT で通知する

RSS フィードで取得した更新情報を LINE WORKS のトークルームに、トーク BOT API で通知します。
##Azure Automation

以下の記事で、Microsoft Flow で何かしらのトリガーを基に、定型のメッセージを送る LINE WORKS BOT の作成方法を説明しました。

TITLE: LINE WORKS + Azure Automation + Microsoft Flow で LINE WORKS Bot からトークメッセージ送信
URL: https://qiita.com/iwaohig/items/3056b95597772061d17b

上述の記事の説明に沿って、Azure Automation の設定を行ってください。
ただし、PowerShell のスクリプトは、Bot no. やユーザー ID とメッセージの内容をパラメータで受け取るために、以下のものを利用してください。

Bot No. 、API 認証関連の値は、後ほど LINE WORKS の Developer Console を参照してく入力しなおしてください。Bot No. は Bot 登録時に生成されます。

```
Param
(
  [Parameter (Mandatory= $true)]
  [string] $botNo,

  [Parameter (Mandatory= $true)]
  [string] $accountid,

  [Parameter (Mandatory= $true)]
  [string] $Message
)

$header = New-Object "System.Collections.Generic.Dictionary[[String],[String]]"
$header.Add("Content-Type","application/json; charset=UTF-8")
$header.Add("consumerKey","<Server API Consumer Key>")
$header.Add("Authorization","Bearer <Server Token>")
$header.Add("Cache-Control","no-cache")

$json = @"
{
    "botNo": $botno,
    "accountId": "$accountId",
    "content": {
        "type": "text",
        "text": "$message"
    }
}
"@

$Body = [System.Text.Encoding]::UTF8.GetBytes($json)
$Uri = "https://apis.worksmobile.com/<API ID>/message/sendMessage/v2"
Invoke-RestMethod -Uri $Uri -Method Post -Header $header -Body $Body
```
Azure Automation の Runbook でのパラメータの利用は、こちらの記事で説明されています。

TITLE: Runbook の入力パラメーター
URL: https://docs.microsoft.com/ja-jp/azure/automation/runbook-input-parameters

##Microsoft Flow の準備
フローのトリガーとして "RSS" "フィード項目が発行される場合" を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/57654efe-3984-4b4a-4acc-106cbc448c03.png)

任意の RSS 取得先を指定します。Livedoor の Weather Hacks を利用してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f6452dfc-474a-b871-89f6-64bb26b4e0d5.png)

###Azure Automaiton をアクションとして追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e80c4401-5abe-bd35-c89a-96463887e583.png)

ここでは、[ジョブの作成] を選択します。

サブスクリプション、リソース グループ、Automation アカウント、Automation のハイブリッド worker グループ、Runbbok 名、ジョブの待機、パラメータを指定します。Runbook Parameter でトークメッセージに含める情報を、"動的なコンテンツの追加" で選択できます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/c095dbc2-180f-747a-8569-550e3da9d0df.png)

##LINE WORKS Developer Console の準備

LINE WORKS でトークボット API を利用するため、LINE WORKS の Developer Console で、以下の作業を行います。

###API 認証の準備
- API ID 発行
- サーバー API のコンシューマーキー発行
- サーバー API の Server Token

手順はこちらのページの情報を参照します。
https://developers.worksmobile.com/jp/document/1002002?lang=ja

###Bot 登録
Bot メニューで [登録] ボタンをクリックし、以下の項目を入力し、保存をクリック
- Bot名 -> 任意の名前
- 「説明」-> 任意の説明文
- Callback URL -> off
- 複数人のトークルームに招待可 -> off
- 管理者 -> 任意のメンバーを指定

登録すると Bot No. が生成されます。

API 認証の情報と、Bot No. を Runbook のスクリプトに記述します。

##LINE WORKS 管理画面での作業
LINE WORKS の管理画面の [サービス]-[Bot] メニューで当該 Bot を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/88b61306-a9d3-d7a1-192d-df77d9b985fe.png)

##動作確認
RSS の更新時に トーク Bot からトーク メッセージが送られることを確認します。
さくらのレンタルサーバーにWordPressをインストールする

#DBの作成
まず始めに、ブログの記事やページの中身の情報を保管するためのデータベースを作成します。
下記の手順で実施していきます。

1. さくらサーバのコントロールパネル画面にログイン
2. サーバコントロールパネルの左側メニューから 「アプリケーションの設定」 セクション中の 「データベースの設定」 リンクにアクセス
3.  「データベースの設定」 画面に遷移したら、 「データベースの新規作成」 リンクにアクセス
4. 必要事項を入力後、 「データベースを作成する」 ボタンを押下でDBの作成は完了


#WordPressをインストールする
これでデータの格納先は確保したので、いよいよWordPressの方をインストールしていきます。

1. サーバコントロールパネルの左側メニューから 「運用に便利なツール」 セクション中の 「クイックインストール」 リンクにアクセス
2. 「カテゴリメニュー」 から、「ブログ」 リンクにアクセス
3. 「WordPress」 リンクにアクセス
4. 必要事項を入力し、「インストール」をクリック



以上