OmniAICreator/Qiita-1.07M huggingface dataset:
[Plotly + Flask + Python] HTML上でレスポンシブルなグラフ表示

Bootstrap4でレスポンシブなCard配置ができた．
http://shoelace.io/

Plotlyで表示するグラフサイズがレスポンシブじゃない...

Pythonでは，以下のようにプログラムを書けば，Javascriptで表示するためのコードが得られる．

```
import plotly as py
import plotly.figure_factory as ff

fig = ff.create_gantt(ganttData, index_col='Order', title='Data Result',
                      colors=colors, show_colorbar=True, showgrid_x=True,
                      showgrid_y=True, group_tasks=True,
                      width="750", height="400")
graphJSON = json.dumps(fig, cls=py.utils.PlotlyJSONEncoder)
```

このgraphJSONを，render_htmlする際の引数に入れる．
あとは，受け取り側のHTMLに

```
<script>
    var graphs = {{ ganttPlotInfo | safe }};
    Plotly.plot('bargraph',graphs,{});
</script>
```
と書けば，表示できる．

ここで，HTMLのグラフを表示したい場所(BODY内)に

```
<script>
    var graphs = {{ ganttPlotInfo | safe }};
    window.addEventListener( "resize", function () {
        if ( window.innerWidth < 800 ) {
            graphs.layout.width=400;
            Plotly.newPlot('bargraph',graphs,{});
        } else if( window.innerWidth < 1200 ) {
            graphs.layout.width=600;
            Plotly.newPlot('bargraph',graphs,{});
        } else {
            graphs.layout.width=750;
            Plotly.newPlot('bargraph',graphs,{});
        }
    } ) ;
</script>
```

HEAD内に

```
<script>
    window.onload = function() {
                        alert(window.innerWidth);
                        if ( window.innerWidth < 800 ) {
                            graphs.layout.width=400;
                            Plotly.plot('bargraph',graphs,{});
                        } else if( window.innerWidth < 1200 ) {
                            graphs.layout.width=600;
                            Plotly.plot('bargraph',graphs,{});
                        } else {
                            graphs.layout.width=750;
                            Plotly.plot('bargraph',graphs,{});
                        }
                    };
</script>
```
をそれぞれ入れると，グラフサイズがレスポンシブになる．

プログラムはめちゃめちゃ，閾値も適当．
もっといい方法があるかもしれませんが，取り急ぎ．
DefinitelyTyped(@types)の型定義を削除するプルリクエストの出し方

## やりたいこと

TypeScriptで開発している方は、`@types/ooo`になってるパッケージお世話になっていると思います。この記事では、**DefinitelyTypedにある不要になった型定義を削除する方法**に関して紹介します。
こういう話は、日本語とかだとあんまり説明ない気がするのと、公式のドキュメントよりは少し抽象的なので、**具体的にどんなコマンドを打てばいいか**を書くことがこの記事の一番の目的です。


## 型定義を削除する経緯
[get-port](https://github.com/sindresorhus/get-port)というパッケージがあります。[get-port@4.2.0](https://github.com/sindresorhus/get-port/releases/tag/v4.2.0)で公式で型定義が用意さました。それに伴って`@types/get-port`を削除することになりました。

[公式のREADME.mdのRemoving package](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/c6cac22911d067b9d2e9863d67004844f2b9773e#removing-a-package)にどうやって削除したらよいか書いてあります。それを頼りに削除して、それをコミットしました。そのリンクの説明に具体例がなかったので、それを書くことがこの記事の目的です。

## 型定義の削除方法

以下のように、削除はコマンドを一つ打つだけの親切な設計になっています。ただ、具体的な例がなかったので、この記事ではそれを書きたいです。

`npm run not-needed -- typingsPackageName asOfVersion sourceRepoURL [libraryName]`

以下が、実際に打ったコマンドです。

```bash
npm run not-needed -- get-port 4.2.0 https://github.com/sindresorhus/get-port
```
[実際のコミット](https://github.com/DefinitelyTyped/DefinitelyTyped/commit/31f4ab54f17a0c7e97d92f9f326fca426209e556)です。
`notNeededPackages.json`に`get-port`が加わり、`DefinitelyTyped/types/get-port`が削除されていることが分かります。
あとは、変更したものをforkしたリポジトリにpushして、プルリクエストを出せばOKです。

今回の`@types/get-port`の削除プルリクエスト: <https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34165>
無事にマージされました :tada:

### `--`以降の引数に関しての説明

* `get-port`の部分は`DefinitelyTyped/types/get-port`だから、`get-port`になるはずです。
* `4.2.0`は`get-port`でのバージョンです。
  - 公式の`README.md`によると、`@types/get-port`で公開されているものより高いバージョンを指定する必要があるらしいです。
  - そしてこのバージョンはnpm上の`get-port`で公開されているバージョンでなければならないようです。
* `https://github.com/sindresorhus/get-port`は型定義があるリポジトリのURL
* その次にも引数を指定できて、DefinitelyTypedを置き換える型定義のnpmパッケージの名前を書くぽいです
  - 大体の場合、最初の引数（今回の場合`get-port`）と同じだから省略できます


TravisCI上で、CIが通ったURL： <https://travis-ci.org/DefinitelyTyped/DefinitelyTyped/builds/510980452>
（CIうまく通らないときに、実行結果を比較すると参考になるかも知れません）

## 最初、勘違いしたところ
「`4.2.0`のバージョンは`@types/get-port`より高いバージョンを指定してね」と書いてあるだけだったので、現在の`@types/get-port`が`4.0.1`なので、`4.0.2`にした。ただこの解釈は間違いでした。
CIで出たエラーはこちらです。<https://travis-ci.org/DefinitelyTyped/DefinitelyTyped/builds/510977291>
エラーを見ると「The specified version 4.0.2 of get-port is not on npm.」となっていて、「`4.0.2`は存在してないnpmパッケージだよ」といっています。
これを頼りに、`get-port`公式で で型定義が対応した`4.2.0`を指定してCIも通りました。


## PRの具体的な経緯

実は最初はあのPRは削除する用のPRじゃなかったです。それを書くとごちゃごちゃすると思って触れていません。
もし、詳細知りたいよって方は、Qiita投稿前に書いていた：<https://scrapbox.io/nwtgck/DefinitelyTyped(@types)%E3%81%AE%E5%9E%8B%E5%AE%9A%E7%BE%A9%E3%82%92%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8BPR%E3%82%92%E5%87%BA%E3%81%99%E3%81%A8%E3%81%8D>に書いてあります。
Pythonの辞書形式（dict）のforループ処理【key,value】

## 辞書形式
以下のような辞書オブジェクトがあるとして

```python
dict = {'key1': 1, 'key2': 2, 'key3': 3}
```
### 各要素のkey(キー)に対してforループ処理
素直にそのままfor文で回すとkeyが取得できる

```python:
for item in dict:  #もしくは for item in dict.key():
    print(item)
# key1
# key2
# key3
```
### 各要素のvalue(値)に対してforループ処理
values()というメソッドを使って取得

```python
for item in dict.values():
    print(item)
# 1
# 2
# 3
```
keyに対するvalueを取得するには

```python
print(dict['key1'])  #辞書オブジェクト['key']
# 1
```

## 辞書に要素を追加・更新
これがやりたかったこと。
(DBから辞書形式で取得して、その辞書のあるkeyのvalueをエンコードしたものを追加したかった)

ということで、以下のようにすると辞書に要素を追加・更新できる
### 要素の追加

```python
dict['key4'] = 4
print(dict)
# {'key1': 1, 'key2': 2, 'key3': 3, 'key4': 4}
```

### 要素の更新

```python
dict['key1'] = 100
print(dict)
# {'key1': 100, 'key2': 2, 'key3': 3}
```

## DBから辞書形式で取得したデータをもとにした場合
DBで辞書形式で取得するとこんな感じで取得できる
・keyに値するのがカラム名
・valueに値するのがカラム内のデータ

```python
data_list = [{'name': '東京ディズニーランド', 'country': '日本'}, {'name': 'ウォルト・ディズニー・ワールド・リゾート', 'country': 'アメリカ'}, {'name': 'ディズニーランド・パリ', 'country': 'イタリア'}]

for item in data_list:
    print(item['name'])
# 東京ディズニーランド
# ウォルト・ディズニー・ワールド・リゾート
# ディズニーランド・パリ
```

### エンコードした名称を追加してみる
"name"カラムのデータをエンコードして追加

```python
import urllib.parse

for item in data_list:
    encode_name = urllib.parse.quote(item['name'])
    item['encode_name'] = encode_name
    print(item)
# {'name': '東京ディズニーランド', 'country': '日本', 'encode_name': '%E6%9D%B1%E4%BA%AC%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89'}
# {'name': 'ウォルト・ディズニー・ワールド・リゾート', 'country': 'アメリカ', 'encode_name': '%E3%82%A6%E3%82%A9%E3%83%AB%E3%83%88%E3%83%BB%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%BB%E3%83%AF%E3%83%BC%E3%83%AB%E3%83%89%E3%83%BB%E3%83%AA%E3%82%BE%E3%83%BC%E3%83%88'}
# {'name': 'ディズニーランド・パリ', 'country': 'イタリア', 'encode_name': '%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89%E3%83%BB%E3%83%91%E3%83%AA'}
```
Android のキーストアファイルを CI/CD サイクルでどのように扱うか

## 前書き

皆さんは、Android のキーストアファイルを CI/CD サイクルで どのように扱っているでしょうか？
キーストアファイルのパスワードやエイリアスについては CI ツールの環境変数として追加してる方がほとんどでしょう。
キーストアファイルについてはどうでしょうか？プライベートリポジトリに保管していますか？
**セキュリティのリスクからリポジトリにキーストアファイルを保管したくない**方もいると思います。

本記事はそのような方向けの記事です。
また、キーストアファイルに限らず**セキュアなファイルを CI/CD サイクルで で扱いたい場合にも有効**な記事となっております。

## 外部 β テスティングサービスへの配布

Fabric や DeployGate 等の外部 β テスティングサービスへの配布する場合キーストアファイルの生成が必要となります。
キーストアファイルは、以下のように `keytool` を使用して生成することができます。

```shell
$ keytool -genkey -v -keystore keystore.jks --alias debug -keyalg RSA -keysize 2048 -validity 10000
```

### エンコードされた キーストアファイルの Bese64 文字列を環境変数として追加

キーストアファイルを Base64 エンコードし、出力された文字列を CI ツールの環境変数（`$KEYSTORE_BASE64`）として追加します。

```shell
$ echo keystore.jks | openssl base64
```

環境変数で保持している Base64 文字列（`$KEYSTORE_BASE64`）をデコードし、キーストアファイルを生成します。

```shell
$ echo $KEYSTORE_BASE64 | openssl base64 --decode > keystore.jks
```

### 暗号化された キーストアファイルをリポジトリで保管

キーストアファイルを暗号化キーを用いて暗号化（AES-256-CBC）し、暗号化キーを CI ツールの環境変数（`$ANDROID_KEYSTORE_ENCRYPTION_KEY`）として追加します。
暗号化された キーストアファイル（keystore.jks.encrypted）をリポジトリに保管します。

```shell
$ openssl aes-256-cbc -e -in keystore.jks -out keystore.jks.encrypted -t <ANDROID_KEYSTORE_ENCRYPTION_KEY>
```

暗号化された キーストアファイルを環境変数の暗号化キー（`$ANDROID_KEYSTORE_ENCRYPTION_KEY`） を用いて キーストアファイルに複合します。

```shell
$ openssl aes-256-cbc -d -in keystore.jks.encrypted -out keystore.jks -k $ANDROID_KEYSTORE_ENCRYPTION_KEY
```

### キーストアファイルをファイルストレージサービスで保管

キーストアファイルを AWS S3 や Google Drive 等のファイルストレージサービスで保管し、そこから キーストアファイルをダウンロードします。

## Google Play Store への配布

Google Play Store に配布する場合、Google Play App Signing を使用することでキーストアファイルの生成が不要となります。
詳しくは、[こちら](https://qiita.com/rkowase/items/90cdc4e8c6fc449d8276 "【Android】Google Play App Signingのススメ - Qiita")を参照してください。
もちろん、Google Play App Signing を使用しない場合はキーストアファイルの生成が必要となるため、先に記述した方法が有効でしょう。

## 参考文献

* [Where to Store Android KeyStore File in CI/CD Cycle](https://android.jlelse.eu/where-to-store-android-keystore-file-in-ci-cd-cycle-2365f4e02e57)
* [farukcankaya/ciappsigningexample: Android keystore file storage solutions in Circle CI and Travis CI](https://github.com/farukcankaya/ciappsigningexample)
python,django。ローカル環境とサーバー環境ではsettings.pyは分けたほうがよいという話。

表題の通り。
ローカル環境とサーバー環境でファイルを分けるのがベストプラクティスだというお話。
djangoですとプロジェクトをスタートさせる際にsettings.pyが自動で作成されます。
例えばlocal_settings.pyなどのファイルを作り、先頭に

```
from .settings import *
```

と書くことでsettings.pyの設定が呼び出せます。
その下に書き換えたい部分を記載します。
ローカル環境で使用するlocal_settings.py

```


DEBUG = True

ALLOWED_HOSTS = []

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
```


<br>
そしてサーバー環境で使用するsettings.pyもサーバー環境用に適応したものに書き換えます。


```
DEBUG = False #サーバー環境ではFalseとしないとプログラムのエラーメッセージが出てしまう。

ALLOWED_HOSTS = ['使用するホスト名。']

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '', #
        'USER': '',
        'PASSWORD': '',
        'HOST': '',
        'PORT': '',
    }
}

```


<br>
DATABASESはsqliteからMysqlに書き換えました。
sqliteはローカルなものなのでサーバー環境では外部のデータベースにした方が更新作業などが楽だったためです。
このようにローカル環境とサーバー環境でファイルを分けてしまうといろいろと楽です。
<br>
<br>
余談ですがlocal_settings.pyで起動させたいときに、以下のような方法があるらしいですが僕はうまくいきませんでした。
https://yoshitaku-jp.hatenablog.com/entry/2018/09/02/004857
http://virgo.hatenadiary.jp/entry/2015/08/30/002245

<br>
<br>
local_manage.pyというファイルを作りmanage.pyの設定をコピペし、以下部分を

```
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "プロジェクト名.settings")
```
<br>

こう書き換えます

```
"プロジェクト名.local_settings"
```

<br>
起動の際に

```
py local_manage.py runserver
```
で動作します。
<br>
もっとスマートな方法があるように思いますが、ローカル環境とサーバー環境を分けるというのは僕も便利だと思っているので知っておくといいと思います。
Windows + Chrome > Webアプリをローカルソフトのように使う > Microsoft To-Doでの使用例 + コメント:PWA(Progressive Web App)

```txt:動作環境
Windows 10 Pro (64bit) バージョン 1809 (October 2018 Update)
Google Chrome バージョン: 73.0.3683.86（Official Build） （64 ビット）
```

## Webアプリ

利点:

- OSによらずに同じような操作
- データはローカルにないため、環境を変更しても作業を継続できる

欠点:

- ブラウザを通して使う
    - ブラウザのヘッダやツールバーなどが場所を取る
        - ブラウザ設定を変更すれば非表示にできるが、通常のブラウザ使用時に表示するのが面倒

## Qiitadonでの情報

### 7of9のToot

https://qiitadon.com/@7of9/101610803995737025

>`#WebUI` 
>`#tool` 
>
>ブラウザ経由で利用するサービス
>
>気になる点
>A. タスクバーはブラウザになる => タスクバーからすぐに見つけられない
>B. タブを多く開いている時に見つけにくい => すぐに見つけられない
>C. 通知はどうか? (例: アラーム機能)
>
>設定をすれば使い勝手は良くなるのかもしれないが、OSがN個あるときにN回設定するのは手間
>
>落としどころを考えて使ってはいくか


### @yazioh さんのToot

https://qiitadon.com/@yazioh/101611042631409863

>@7of9 
>
>やりづらくなってるけど、chrome にはまだこの機能があり…
>
>Chromeで「ウインドウとして開く」が無いときの対処法 – Webサイトのアプリ化 | ruxumu blog -
>https://goo.gl/oAxp17
>
>ウインドウで開くにすると
>URLバーが消える。ダブが消える。
>ステータスバーのアイコンが（サイトの）アイコンになる（こともある）

できました！

**情報感謝です。**

### 紹介されたページ

Chromeで「ウインドウとして開く」が無いときの対処法 – Webサイトのアプリ化
https://ruxumu.net/archives/6533
by ruxumu（るーむ）さん

1. 「その他のツール」 > 「ショートカットを作成」を選択
2. 「ウィンドウとして開く」にチェックをつけて「作成」

**情報感謝です。**

### 試して分かったこと

Microsoft To-Doをローカルソフトのように使用してみました。

分かったこと

- ショートカットの状態とChrome起動時の状態は別設定
    - ショートカット側でサイズを狭くしても、Chrome起動のウィンドウは狭くならない
- 一日以上開きっぱなしにするとセッションが切れる
    - Microsoft To-Doの仕様?
    - セッションが切れた時に再度ショートカットを起動すればいい

### 万能ではないようです

@yazioh さんのToot

https://qiitadon.com/@yazioh/101612175243607162
>@7of9 
>よかったよかった。
>
>でも、target="_balnk" でウインドウ（タブ）開くと新しいChrome で開いちゃうんで、SPAっぽUIのじゃない>と（タブバカバカ開くようなサイトだと）使いづらいんですよｗ
>
>ハマるトコにはハマりますが、万能薬ではないです

**情報感謝です。**
   

### まとめ

ショートカットを使ってローカルソフトのように使えるようになりました。
便利です。

データはローカルに持たず、同じUIでデータ共有して使える。
便利です。


### ChromeのPWA対応
(2019/03/26: コメントはQiitaで検索できないため、検索用にこの項目を記載）

@juner さんの[コメント](https://qiita.com/7of9/items/e873ceeec092032073f5/#comment-b65f5fe7a4c7b242ce66)にてPWA(Progressive Web App)という機能を教えていただきました。

情報感謝です。
Google Sheet APIを試したメモ

## 概要
Google Sheet APIを試したかったけれど、詰まった。
だいたい、[Google Sheet APIを試す時に詰まったところ][*1]をみたら解決した。
きちんと公式ドキュメント読めば書いてあった。。。

### 画面メモ

* [Google Developer Console](https://console.developers.google.com/) にログインした後の操作を少しメモ

![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/99876/d5e7b9a3-7073-ccb9-689d-60e85621c870.png)

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/99876/dd07d438-f39d-1478-2b53-19ae7238da3d.png)

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/99876/b194ce3c-69ce-316b-aabf-b674d066796b.png)

APIの制限だけつけてみた。

![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/99876/9ecc3c1e-8834-a1ad-1f6f-fc207c5022cc.png)

Googleドライブで共有の有効化

![2019-03-26.png](https://qiita-image-store.s3.amazonaws.com/0/99876/e5a0ae9d-1007-46f2-ece9-4d2ec396f60b.png)

apiのアドレスにアクセスして。。。 できた！ 
https://sheets.googleapis.com/v4/spreadsheets/{スプレッドシートのID}/values/{シート名}!A1:B11?key={取得したapiキー}

## 参考

[Google Sheet APIを試す時に詰まったところ][*1]
[セルの値の読み取り][*2]
[sheet api][*3]


[*1]:https://qiita.com/yukyt/items/c27c344211423f2bb44d
[*2]:https://developers.google.com/sheets/guides/values?hl=ja
[*3]:https://developers.google.com/sheets/api/reference/rest/?hl=ja
一晩でKubernetesを覚えて帰ろう。ワンナイトBootCamp! - cndjp#10 レポート

#cndjpのkubernetes初心者向けミートアップ参加レポート

- 発表者のお話を聴きながらk8s面白そう！って思い、この日は本格的にCKA取得に向けたスタートの日となんとなく決めてみました。

- 運営メンバーの方や会場提供していただいている企業さんにはとっても感謝です。高倍率の抽選に当たって参加させていただいたからには何か貢献できるように努力していきたいものです。:bow_tone1:

- かわいいロゴでいいですね↓:grinning:　ひつじ？くも？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/280358/de408a7f-d5e6-1b97-1e2e-90b6b63fdc6f.png)

1. [イントロダクション](https://speakerdeck.com/hhiroshell/kubernetestutenanisoreoisiifalse-toiuren-xiang-kefalsechao-ru-men)
---
- これからk8s始める人には、とても分かりやすい資料だなと思います。
- iPhoneにBluetooth接続して使っているキーボードが打鍵し難く、自作キーボードの話に「オッ！久しぶりに秋葉いってみっか！」という気になりました。ボータブルなキーボードあるかな。

2. [Kubernetesの基礎](https://speakerdeck.com/yosshi_/kubernetesfalseji-chu)
---
- sidecar・・・1個のpodに複数のコンテナを実装。1個のコンテナが死ぬとpodが再起動される。メリットは何でしょう？
- 1個のpodに複数のlabelが付与できるので注意。
- configurationとetcdの違いは？
- configmap・・・設定情報をKV形式で保持
- secret・・・機密情報、BASE64、tmpfsに保持し停止したらデータが消える
- podとserviceのIPセグメントは異なるよ　→kubeadm config viewコマンドで見れるんだ
- deployment -> replicaset -> pod -> container

3. 動いているところを見てみよう！
---
- kubectlコマンドによるデモでした。（資料はありません）

4. [Kubernetesのアーキテクチャと発展的な使い方](https://speakerdeck.com/nnao45/what-happens-when-k8s-journy)
---
- kubectl run コマンドを発行してからAPIサーバが認証し、podがデプロイされるまでの動きを詳しく面白く説明してくれました。こコマで詳細に理解ができる楽しそうとです。
リフレクションユーティリティを作る②

今回は引数のオブジェクトのフィールドを適当な値で埋めるメソッドです。
JUnitで「あるオブジェクトに対してなんでもいいからとりあえずフィールド埋めている状態にしたい、でもいちいちsetter呼ぶの面倒臭すぎ！」ってことよくありますよね。そういう時に適当にフィールドに値を詰めてくれるメソッドを作ってみました。

前回作ったもの→[プライベートメソッドを実行するやつ](https://qiita.com/atmospheri/items/d38ea5b987745d9bcb98)


# 作成したユーティリティメソッド

```java:ReflectionUtil.java
public static void fillAllFields(Object obj, int offset) throws IllegalArgumentException, IllegalAccessException {
	Assertions.assertThat(offset >= 0);
	boolean b = true;
	char c=(char) (65 + offset); // A+
	
	Field[] fieldList = obj.getClass().getDeclaredFields();
	for (int i = 0; i < fieldList.length; i++) {
		int num = i + offset;
		Field f = fieldList[i];
		f.setAccessible(true);
		String name = f.getName();
		Class<?> clazz = f.getType();

		if (Modifier.isFinal(f.getModifiers())) {
			continue;
		}
		if (clazz == String.class) {
			f.set(obj, name + num);
		} else if (clazz == Date.class) {
			Calendar calendar = Calendar.getInstance();
			int d = num % 28;
			calendar.set(2019, Calendar.MARCH, d);
			f.set(obj, calendar.getTime());
		} else if (clazz == Timestamp.class) {
			Calendar calendar = Calendar.getInstance();
			int d = num % 28;
			calendar.set(2019, Calendar.MARCH, d);
			f.set(obj, new Timestamp(calendar.getTimeInMillis()));
		} else if(clazz==boolean.class ||clazz==Boolean.class ){
			f.set(obj, b);
			b=!b;
		} else if(clazz==BigDecimal.class){
			f.set(obj, new BigDecimal(num));
		} else if(clazz==int.class||clazz==Integer.class){
			f.set(obj, num);
		} else if(clazz==long.class||clazz==Long.class){
			f.set(obj, ((Integer) num).longValue());
		} else if(clazz==float.class||clazz==Float.class){
			f.set(obj, ((Integer) num).floatValue());
		} else if(clazz==double.class||clazz==Double.class){
			f.set(obj, ((Integer) num).doubleValue());
		} else if(clazz==short.class||clazz==Short.class){
			f.set(obj, ((Integer) num).shortValue());
		} else if(clazz==byte.class||clazz==Byte.class){
			f.set(obj, ((Integer) num).byteValue());
		} else if(clazz==char.class||clazz==Character.class){
			if (c < 65 || 90 < c) c = 65;
			f.set(obj, ((char) c));
			c++;
		}
	}
}
```

# 動かしてみる
## 適当なPOJOを用意

```java:EntityA.java
@Data
public class EntityA {
	private String str;
	private Date date;
	private Timestamp ts;
	private Boolean bool;
	private BigDecimal bd;
	private Integer i;
	private long l;
	private Float f;
	private double d;
	private Short s;
	private byte b;
	private Character c;
}
```

## テストメソッド

```java:Tests.java
@Test
public void test1() {
	EntityA entity= new EntityA();
	try {
		ReflectionUtil.fillAllFields(entity, 25);
		System.out.println(entity);
	} catch (IllegalArgumentException | IllegalAccessException e) {
		e.printStackTrace();
		fail();
	}
}
```

## 実行結果

```log:コンソール
EntityA(str=str25, date=Tue Mar 26 02:05:01 JST 2019, ts=2019-03-27 02:05:01.786, bool=true, bd=29, i=30, l=31, f=32.0, d=33.0, s=34, b=35, c=Z)
```

## あとがき
ミソはcharの場合にどうするかですね。このメソッドでは大文字のアルファベットA-Zに絞っています。
他のクラスは必要に応じて随時追加ですね。
境界値の検証してないのでバグあったらすみません。

おもいっきりレガシーなJavaメソッドになったけど、本当は出来る限りJava8を取り入れたかった。

というか、そもそもこんなユーティリティは何かのライブラリにあったりしそう？？
UnityDebugger for VSCode ウォッチ式で他のクラスが覗けない

# TL;DR

~~仕様です。私みたいに時間を無駄にする前に諦めましょう。~~

「global名前空間エイリアス（`global::`）」から記述することで可能です。

```:example
> System.Math.PI
Evaluate request failed (Unknown identifier: System). .........NG

> global::System.Math.PI
3.1415926535 ..................................................OK
```

https://learn.microsoft.com/ja-jp/dotnet/csharp/language-reference/operators/namespace-alias-qualifier

# できないこと

~~UnityDebugger for VSCodeをセットアップして、適当なブレークポイントで引っかける~~
~~デバッグコンソール、ウォッチ式、ログポイント、条件付きブレークポイントにおいて次のような式はエラーになる~~

~~* クラス名を含む~~
~~* ブレークポイントのあるクラス以外のクラスでの拡張メソッド~~

~~要するに、使えるのは以下のものしかない~~

~~* ローカルスコープ~~
~~* ブレークポイントのあるクラスのプロパティ~~
~~* リテラル~~

staticシングルトンとかにもアクセスできない。

```
> this
{Cube (HogeBehaviour)} ........................................OK

> 9 * 4
36 ............................................................OK

> System.Math.PI
Evaluate request failed (Unknown identifier: System). .........NG

UnityEngine.Vector3.zero
Evaluate request failed (Unknown identifier: UnityEngine). ....NG
```

# 補足

~~開発者も困っているみたいです。~~
> ~~Known issues and missing features~~
> ~~* LINQ expressions are not validated from debugger-console or the watch list. 
https://forum.unity.com/threads/unity-debugger-extension-for-visual-studio-code-2-0-x-preview-release.526263/~~

~~2018/10に最新の言及がありますがやっぱりダメそう…~~
> ~~miniwolf_unity (Unity Technologies)~~
> 
> ~~Yeah, no. It is not fixed. Me and another user, verified that it is still broken. But awesome that you are keeping me up-to date with this, I would never have spotted this myself. ~~

VisualStudioやMonoDeveloperなら可能だけど、VSCodeに比べるとかなり重く、ポータビリティもイマイチ…
【JavaScript】オブジェクト【自己学習】

##オブジェクトでできること
ひとつの変数・定数に対して複数の値を代入し、管理することができる（配列と同様）。
##オブジェクトの書き方

####配列との違い
配列はインデックス番号で要素を管理するのに対して、オブジェクトでは値に**プロパティ**をつけて管理する

```object-1.js
const user = {name: "Taro", age: 18, mail: "taro@xxxx.jp"};
console.log(user);

//コンソール
//{name: "Taro", age: 18, mail: "taro@xxxx.jp"}
```
上記のコードでは、`name`, `age`,`mail`の3つのプロパティを用いている。

要素は中括弧({})で囲う。プロパティと値の間はコロン(:)を入れ、要素と要素の間はカンマ（,）で区切る。
####*プロパティを用いた値の取得*

```object-2.js
const user = {name: "Taro", age: 18, mail: "taro@xxxx.jp"};
console.log(user.age);

user.age = 24;
console.log(user.age);

//コンソール
//18

//24
```
個々のプロパティの値は、`オブジェクト名.プロパティ名`とすることで取得することができる。

また、配列と同じく、値を代入することでプロパティ内の値を更新することができる。
####*undefined(未定義値)*
定義されていない値を取得しようとすると、コンソール上では**undefined(未定義値)**と出力される。

```object-3.js
const users = [
  {name: "Taro", age: 18, mail: "taro@xxxx.jp"},
  {name: "Kazuo", age: 21, mail: "kazuo@yyyy.jp"},
  {name: "Hanako", age: 24, mail: "hanako@zzzz.jp"}
];

console.log(users[3]);
console.log(users[1].address);

//コンソール
//undefined
//undefined
```
上記のコードでは、配列usersのインデックス番号3番のオブジェクトとインデックス番号1番のプロパティaddressの値を取得したが、いずれも値が定義されていないため、コンソール上ではundefinedと出力されている。
[Firebase][TypeScript] プロジェクトにimportする際に警告文が出てくることを解決したメモ

## 結論

* 機能別のソースを読み込むこと。

## 現象

* 以下のメッセージがコンソールに警告として表示された。

```
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
```

## 対処

```diff:src/index.pug
//- 変数一覧
- var title="Garden - 箱庭の島の子供たち"
- var description="箱庭の島に実験体として集められた、異形の子供たちの記録"
- var keywords="TRPG,異能,実験体,子供,廃墟"

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    meta(name='description', content=description)
    meta(name='keywords', content=keywords)
    meta(name='robots', content=robots)
    meta(name='og:sitename', content=title) 
    meta(name='og:locale', content="ja_JP") 
    meta(name='og:title', content=title) 
    meta(name='og:description', content=description)
    title=title
    link(href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css', rel='stylesheet')
    link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
    link(href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" rel="stylesheet")
    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase-app.js")
    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase-firestore.js")
-    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js")
+    script(src="https://www.gstatic.com/firebasejs/5.9.0/firebase-auth.js")
    script(src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js")
    script(defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js")
    script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")
```

原因が、開発用のhttps://www.gstatic.com/firebasejs/5.9.0/firebase.js を直接読み込んでいるものだったため、それを個別に読み込んでやればOK.
[Firebase を JavaScript プロジェクトに追加する](https://firebase.google.com/docs/web/setup) だとちゃんと個別に読み込んであげてますね。

### 変えなくてもOKだったところ。


参考にした [[Firebase][JavaScript] プロジェクトにimportする際に警告文が出てくる][*1] と異なり、
外部から読み込んでいるため、以下は変更しなくてもよかった。


```ts:src/assets/js/FireBaseBackEnd.ts
import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui';
```

```ts:src/assets/js/type.d.ts
// コンパイルを通すため、外部から読み込むcssの宣言を行う。
declare module '*.scss';

// コンパイルを通すため、外部から読み込むjsライブラリの宣言を行う。
declare module 'firebase';
declare module 'firebaseui';
declare module 'M'; // materialize
```

```js:docker/config/webpack.config.js
  },
  // cdnから読み込むものはここに
  externals: {
    jquery: 'jQuery'
    , 'chart.js': 'Chart'
    , firebase: 'firebase'
    , firebaseui: 'firebaseui'
    , M: 'M' // materialize
  },
};
```

[警告解決時のソース](https://github.com/hibohiboo/garden/tree/47e044d3758df101042b450c56174c8679040edc)  




## 参考
[[Firebase][JavaScript] プロジェクトにimportする際に警告文が出てくる][*1]

[*1]:https://qiita.com/taaatk/items/38b461ab984a7a49b5a8
Visual Studio CodeでC言語

VisualStudioCodeは便利ですね。
軽量で、いろんな言語に対応しています。

C言語で学習を始めたいという人も、
VisualStudioCodeを入れて、MinGWというC言語のコンパイラを入れると、
exeを簡単に作成することができます。

# Visual Studio Codeをインストール
VisualStudioCodeをインストール、起動し、
左側の「拡張機能」をクリックするとタブが展開して、
自分が入れたい言語の拡張機能をMarketplaceから探して導入することができます。

C言語だと、C/C++ for Visual Studio Code というのがMicrosoftから出ていますので、
これをインストールすれば、intelliSenseが効くようになります。

# Cのコンパイラをインストール
次にC言語のコンパイラとして、MinGWをダウンロードします。
やり方は以下に詳しいです。
https://qiita.com/yut-nagase/items/9bb65481685f6b8002de

これで必要なもののインストールは完了です。

# プロジェクトの作成
C言語のファイルを配置するディレクトリを作ります。
そして、VisualStudioCodeからそのディレクトリを開き、
適当なファイルを作ります。（test.c等）

すると、作ったディレクトリに.vscode というフォルダができます。
この中にはVisualStudioCodeが自動で作成した設定ファイルが格納されています。
c_cpp_properties.json
というファイルを見てみると、コンパイラのパスが記述されています。（compilerPath）

これを、先ほどインストールしたMinGWの実行ファイルのpathに変更すると
VisualStudioCodeの下部のターミナルで
コンパイルすることができるようになります。
Railsのredirect_toの引数には_pathでなく_urlを使う

## 概要

RailsガイドやRailsのリファレンスにて、明言はされてないものの redirect_to の引数としては _path でなく _url が利用されています。

* https://guides.rubyonrails.org/v5.2/action_controller_overview.html#the-flash
* https://api.rubyonrails.org/v5.2.2/classes/ActionController/Redirecting.html#method-i-redirect_to

ですが、なぜ _path でなく _url を利用しているのか、これらのドキュメント内では充分な説明がなされてません（見逃してるかもですが）。

調べたところ、以下の記事で解説がされていました。

http://shin.hateblo.jp/entry/2013/01/13/124158

> 「RailsによるアジャイルWebアプリケーション開発 第4版のp.120、David曰く」で解説されてます。

> HTTPの302リダイレクトの仕様上、絶対パスを使うのが妥当

ふむふむなるほど、ということで [RFC](https://tools.ietf.org/html/rfc7231) を読もうとしましたが断念したため、RFCを解説している記事を探しました。

https://7io.org/2012/07/08/22:16:01/

> HTTP1.1のLocationヘッダは、絶対URLでないとRFC違反

なるほどですね。

## 追記

コメントで補足いただきました
thx! @znz 

> 実際はほとんどのブラウザーでサポートされていたので RFC 7231 で緩和されて相対 URL でも OK になっています。
> https://en.wikipedia.org/wiki/HTTP_location
fishでexpress serverを開く時のコマンド

# 素直に叩けないよ

fishではexpress開く時とかに、下記のコマンド叩くとエラーになります:fish::anger:

```env.sh
PORT=8000 npm start
```

# かわりにこれ叩いて開けるよ

```env.sh
env PORT=8000 npm start
```

envつけるだけです:fish:
Ruby on railsで複数ホストにCORSを設定する方法

REST API向け、メモ程度です。
## 環境
 * ruby 2.5.3
 * rails 5.2.2
 * 環境変数 ALLOWED_ORIGINSにカンマ区切りで許可したいホスト名を指定
    * `ALLOWED_ORIGINS="localhost,localhost:3000,somehost..."`

## 1. routesでOPTIONSを受け入れるようにする
[CORS preflight request](https://developer.mozilla.org/ja/docs/Glossary/Preflight_request)を受け入れられるように `routes.rb`を編集します。

```ruby:routes.rb
Rails.application.routes.draw do
  # 中略
  get 'some_api' => 'some_api#some_api'
  # この設定例はあらゆるパスに対するOPTIONSを受け入れるので適宜修正してください
  match '*path', {
      controller: 'some_api',
      action: 'preflight',
      constraints: { method: 'OPTIONS' },
      via: [:options]
  }
end
```
## 2. CORS preflight requestに応答できるようにする

```ruby:some_api_controller.rb
class SomeApiController < ActionController::API
  before_action :ensure_request_from_allowed_origin, only: [:some_api]
  def preflight
    set_preflight_headers!
    head 204
  end

  def some_api
    # CORS対象にしたいAPI
    # 正しいContent-Typeを指定しなければCross-Origin Read Blocking (CORB)でブロックされるので注意
    "some response"
  end

  private
  # CORS対象にしたいAPIのヘッダを設定。filterとしてbefore_actionで指定できるようにする例
  def ensure_request_from_allowed_origin
    origin_host = get_request_host
    return unless origin_host.present?
    head 403 and return unless is_request_from_allowed_origin(origin_host)
    # 許可されたホストからのみAccess-Control-Allow-Originヘッダを付与して応答します
    # 特定METHODのみ許可するならMETHODのチェックもここで行ってください
    response.headers.merge!(
        {
            'Access-Control-Allow-Origin' => request.headers['Origin']
        }
    )
  end

  # リクエストされたホスト名を得る
  def get_request_host
    origin = request.headers['Origin']
    return URI.parse(origin).host if origin.present?
    forwarded_host = request.headers['X-Forwarded-Host']
    return forwarded_host if forwarded_host.present?
    nil
  end

  # CORSが許可されているホストのアクセスからかどうかを調べます。
  # 必要ならスキームのチェックも追加してください。
  # 環境変数 `ALLOWED_ORIGINS`にはカンマ区切りでホスト名を指定してください
  def is_request_from_allowed_origin(origin_host)
    allowed_host_list = ENV['ALLOWED_ORIGINS']
    return false unless origin_host.present? && allowed_host_list.present?
    hosts = allowed_host_list.split(',')
    hosts.include? origin_host
  end

  # プリフライトレスポンスヘッダを設定
  # 許可されていないホストの場合403
  # 許可されているホストの場合、`Access-Control-Allow-Origin`を該当ホストに置き換えて応答します
 def set_preflight_headers!
    origin_host = get_request_host
    return unless origin_host.present?
    head 403 and return unless is_request_from_allowed_origin(origin_host)

    response.headers.merge!(
        {
            'Access-Control-Max-Age' => 600,
            'Access-Control-Allow-Methods' => 'GET', # 対応したい任意のMETHODに置き換えてください
            'Access-Control-Allow-Origin' => request.headers['Origin'],
            'X-Content-Type-Options' => 'nosniff',
            'Vary' => 'Origin' # 複数ホストに許可するために、Originの内容に応じてレスポンスが変化することを明示します。
                               # ただし、Access-Control-Allow-Originに*を指定する場合は不要です。
        }
    )
  end
end
```
移行アシスタントを使わないでMacの環境を移行した

## 経緯
MacbookProの画面が割れたので郵送修理している間に使うMacbookのセットアップをした。
MacOSはHigh Sierraを使っていたが、Mojaveの検証もしたかったので
移行アシスタントを使わずに環境を移行した。
*結論としては普通に移行する分には移行アシスタントの方が早くて便利だと思った

## 役に立ったもの
- [iCloud](#icloud)
- brew bundle
- anyenv

### iCloud
- 5GBまで無料
- `~/Documents` `~/Desktop` が同じiCloudアカウント上で共用できる
- 以前はDropboxを使っていたが、dropbox毎brew bundleで管理できるのでこちらも適宜使うと便利だった
- dotfile(.bash_profile/.bashrc/.ssh)やApacheのconfを置いておいて、シンボリックリンクで使うと環境変数はすぐに移行できた
- brew bundle dump(後述)の`Brewfile`を`~/Documents`に置いておけばアプリケーションもすぐに移行可能

### brew bundle
- `brew bundle dump` で `Brewfile` が出力される
- brew / cask / mas のアプリケーション一覧が出力されるので必要の有無をざっと確認できる
- 新環境下では `brew bundle` で全て一括でインストールできる
- javaは先にいれておいた方が良い(plantUMLのインストール時に`brew install java`を要求された)

### anyenv
- `git clone https://github.com/riywo/anyenv ~/.anyenv`
- `.bashrc`

```sh
if [ -d $HOME/.anyenv ]
then
    export PATH="$HOME/.anyenv/bin:$PATH"
    eval "$(anyenv init -)"
fi
```

- `source ~/.bashrc`
- `mkdir -p $(anyenv root)/plugins`
- `git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update`
- `anyenv install rbenv`
- `anyenv install ndenv`

## その他
- 開発環境はDockerでcontainerにしておくとbrewのinstallも少なくすんだ
- ブラウザの設定はsafariのiCloud連携と、GoogleChromeのアカウント共有
- Fontsディレクトリを持っていくのを忘れたので少し困った
- 結局修理がすぐに戻ってきたので、移した環境は実質1日しか使わなかった･･･
RNotebookで日本語名のnb.htmlファイルを保存したい


# キーワード
RNotebook, R Notebook, Windows
RMarkdown, R Markdown,
nb.html, RStudio, Knit, Preview,
output: html_notebook,
rmarkdownパッケージ, render関数


# 内容
RNotebookは便利だけど，Rmdファイル名に日本語を使えない点が不便だった．
※Rmdファイルの保存はできるが，対話的な実行操作の記録であるノート(nb.htmlファイル)を保存には失敗する．
[](ファイル名や親フォルダなど，Rmdの絶対パスに日本語を含めることができなかった．
日本語でファイルを仕分けられなかったので，直感的にわかりずらく，沢山RNotebookを作っていると見分けづらく不便だった．)


そこで，以下の画像に挙げるようにrmarkdown::render関数を試したところ，
後述するRmdサンプルファイルについては，
日本語名のnb.htmlファイルの生成に成功した．

![黒板_RNotebook日本語名で保存.png](https://qiita-image-store.s3.amazonaws.com/0/34549/4e58f5fb-43f5-edd2-3f62-7e9ccfe41708.png)

追記）
フォルダ名を日本語にした場合にも，同サンプルRmdでは成功した．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34549/7f752832-95a9-5a10-4a69-7056349144fb.png)


# ※注意
render関数の実行で，どうして対話的実行結果も保存されるのかの仕組みは調べていない．
仕様なのか，副作用なのかも不明．
副作用の場合，今後のrmarkdownのアップデートでできなくなるかもしれない．
環境の些細な違いでできなくなることもあるかもしれない．
何度も更新するようなnb.htmlの場合，途中でおかしいものに上書きされると困るので，
大事な記録の場合は適宜バックアップ用のコピーを作っておくとよい．


# 実行時のコード
↓rmarkdown::render関数を使ったときのRmd内容

```{md}
---
title: "R Notebook"
output: html_notebook
---
ppp

\`\`\`{r}
plot(cars)
\`\`\`

\`\`\`{r}
cars=1
\`\`\`
```


# 実行環境
<pre>
sessioninfo::session_info()
- Session info ---------------------------------------------------------------
 setting  value                       
 version  R version 3.5.1 (2018-07-02)
 os       Windows >= 8 x64            
 system   x86_64, mingw32             
 ui       RStudio                     
 language (EN)                        
 collate  Japanese_Japan.932          
 ctype    Japanese_Japan.932          
 tz       Asia/Tokyo                  
 date     2019-03-26                  
- Packages -------------------------------------------------------------------
 package     * version date       lib source        
 assertthat    0.2.0   2017-04-11 [1] CRAN (R 3.5.1)
 cli           1.0.0   2017-11-05 [1] CRAN (R 3.5.1)
 crayon        1.3.4   2017-09-16 [1] CRAN (R 3.5.1)
 digest        0.6.15  2018-01-28 [1] CRAN (R 3.5.1)
 evaluate      0.13    2019-02-12 [1] CRAN (R 3.5.3)
 htmltools     0.3.6   2017-04-28 [1] CRAN (R 3.5.1)
 knitr         1.22    2019-03-08 [1] CRAN (R 3.5.3)
 Rcpp          0.12.18 2018-07-23 [1] CRAN (R 3.5.1)
 rmarkdown   * 1.12    2019-03-14 [1] CRAN (R 3.5.3)
 rstudioapi    0.7     2017-09-07 [1] CRAN (R 3.5.1)
 sessioninfo   1.1.1   2018-11-05 [1] CRAN (R 3.5.1)
 withr         2.1.2   2018-03-15 [1] CRAN (R 3.5.1)
 xfun          0.5     2019-02-20 [1] CRAN (R 3.5.3)
 yaml          2.2.0   2018-07-25 [1] CRAN (R 3.5.1)
</pre>
Vim (CUI) にASCIIベースのスクロールバーを追加する

# 概要
* 長いファイルを編集していると迷子になりやすいので、現在どの辺を編集しているのか一目で分かるようにした。
    * 折畳みで多少は改善するのだが。
* やったことは基本的に https://superuser.com/a/445233 の改変と解説。
* 表示範囲を `-` で、カーソル位置を `@` で表示する。<br/>
  ![Capture.PNG](https://qiita-image-store.s3.amazonaws.com/0/146259/ad3e1c2b-062d-eda0-0a57-687b026762fb.png)

# 解説不要。使えればいい！

これを vimrc に貼り付けます。以上。

```vimscript
func! STL()
  let barWidth = &columns / 6
  let barWidth = barWidth < 3 ? 3 : barWidth
  let n = line('$') > 1 ? line('$') - 1 : line('$')
  let buf_top    = (line('w0') - 1) * (barWidth - 1) / n
  let buf_bottom = (line('w$')    ) * (barWidth - 1) / n
  let cursor     = (line('.')  - 1) * (barWidth - 1) / n
  let n1 = buf_top
  let n2 = cursor - n1
  let n2 = n1 + n2 >= barWidth ? barWidth - n1 - 1 : n2
  let n3 = buf_bottom - cursor
  let n3 = n1 + n2 + n3 >= barWidth ? barWidth - n1 - n2 - 1 : n3
  let n4 = barWidth - n1 - n2 - n3 - 1
  let bar = '['.repeat(' ', n1).repeat('-', n2).'@'.repeat('-', n3).repeat(' ', n4).']'
  let stl_left = ' '
  let stl_right = ' %<%F %m%r%h%w%=[%{&fenc},%{&ff},%Y] (%03l/%03L,%03v) '
  return stl_left.bar.stl_right
endfunc
set laststatus=2
set statusline=%!STL()
```

# 解説

### スクロールバーの長さを決める
```vimscript
  let barWidth = &columns / 6
  let barWidth = barWidth < 3 ? 3 : barWidth
```
私は1行の1/6にした。お好みで。2行目は例外処理。

### バッファ（画面に表示されている範囲）とカーソル位置を取得
```vimscript
  let n = line('$') > 1 ? line('$') - 1 : line('$')
  let buf_top    = (line('w0') - 1) * (barWidth - 1) / n
  let buf_bottom = (line('w$')    ) * (barWidth - 1) / n
  let cursor     = (line('.')  - 1) * (barWidth - 1) / n
```
4行目を例に取ると、カーソル行を `line('.')` で取得してスクロールバーの長さ `barWidth` を掛けて、ファイル行数 `line('$')` のようなもので割っている。

### スクロールバー各部分の長さを決める
```vimscript
  let n1 = buf_top
  let n2 = cursor - n1
  let n2 = n1 + n2 >= barWidth ? barWidth - n1 - 1 : n2
  let n3 = buf_bottom - cursor
  let n3 = n1 + n2 + n3 >= barWidth ? barWidth - n1 - n2 - 1 : n3
  let n4 = barWidth - n1 - n2 - n3 - 1
```
`n1`, `n2`, `n3`, `n4` はそれぞれ以下の部分。三項演算子を使っているのは和が `barWidth` を超えないための例外処理。
![Capture.PNG](https://qiita-image-store.s3.amazonaws.com/0/146259/813d7444-962b-b016-9e54-f835024ea454.png)


### スクロールバーを作る
```vimscript
  let bar = '['.repeat(' ', n1).repeat('-', n2).'@'.repeat('-', n3).repeat(' ', n4).']'
```
各部分を `repeat` 関数で作って `.` で文字列連結。

### 残り処理
```vimscript
  let stl_left = ' '
  let stl_right = ' %<%F %m%r%h%w%=[%{&fenc},%{&ff},%Y] (%03l/%03L,%03v) '
  return stl_left.bar.stl_right
(中略)
set laststatus=2
set statusline=%!STL()
```
`statusline` に代入したいもののうち、`stl_left` と `stl_right` はスクロールバーの左右に置きたい要素をお好みで。`.`で文字列連結。

`set laststatus=2` で `statusline` を独立行に表示する。`set statusline=%!STL()` で上記関数の戻り値を `statusline` にリアルタイム表示すれば完了！
cv2.imread()で'NoneType'エラーが出てしまった時の対策。

こちらの[画像処理100本ノック](https://qiita.com/yoyoyo_/items/2ef53f47f87dcf5d1e14)を行う際にエラーが出て困った。
というよりかはimread()の使い方の問題であったが。

コードとエラーは以下の通り。

```python:コード
import cv2
img = cv2.imread("imori.jpg")
red = img[:, :, 2].copy()
```

```:エラー内容
TypeError: 'NoneType' object is not subscriptable
```

```:ディレクトリ構造
Gasyori100knock ← ワークスペース
│
├─Question_01_10
│  │
│  ├─imori.jpg ← 読み込みたい画像
│  ├─question1.py ← 実行ファイル
```

NoneTypeと出ている。img箇所がうまく読み込めていないらしい。

## 結論
パス指定が間違っていたため、画像がうまく読み込めなかった。

## 理由
gitからプロジェクトをクローンしてきて、クローンしたフォルダをそのままワークスペースに設定した。
どうやら実行時のディレクトリが基準のパスになるみたい。今回はPythonファイルを実行するのにワークスペースから実行していた。つまり、画像の読み込みはワークスペースから見た相対パスを指定するか、絶対パスで指定しなければならない。

```:ディレクトリ構造
Gasyori100knock ← ワークスペースであるここが基準
│
├─Question_01_10
│  │
│  ├─imori.jpg ← ワークスペースから見て./Question_01_10/imori.jpgと指定しなければいけない。
│  ├─question1.py ← 実行ファイルを基準に考えるわけではないみたい。
```

## 対策
常にワークスペースから実行するのであれば相対パスである`./Question_01_10/imori.jpg`で良いけど、それはプログラム的にどうなのか？と思ったので少し書き換える。

```python:コード(修正後)
import cv2
import os

img_path_name = "imori.jpg" # 対象画像の名前
bace = os.path.dirname(os.path.abspath(__file__)) # 実行ファイルのディレクトリ名
target_path = os.path.join(bace, img_path_name) # パスの連結
img = cv2.imread(target_path)
red = img[:, :, 2].copy()
```

os.path.abspath(\_\_file\_\_)で実行ファイル(.pyまで)の絶対パスを取得。os.path.dirname()でディレクトリ名に変換。
CondaでPythonを管理する（パート1）

#なぜCondaでpythonを管理する必要があるのだか？
Pythonを使い始めるときには、最新バージョンのPythonと使用したい最新バージョンのパッケージをインストールする。ただし、GithubやKaggleやその他のソースからPythonアプリケーションをインストールする場合、これらのアプリケーションには使用しているバージョン以外のPythonバージョンが必要のだ。その場合は、アプリケーションごとにPython環境を設定する必要がしなければならない。それならCondaを使うべきのだ。
さらに、condaを使用する必要があるその他のケースがいくつかある：

- あなたが他の人とPythonプロジェクトをしていて、あなたが他の人と同様にあなたのコンピュータでもプログラムが円滑に動くことを確かめたいと思うなら。

- あなたは顧客にアプリケーションを提供し、プログラムが顧客のコンピュータでうまく動作することを確認する。

環境には、特定のPythonバージョンといくつかのパッケージが含まれている。そのため、Pythonまたはパッケージのバージョンが異なるアプリケーションを開発または使用する場合は、異なる環境を設定する必要がある。

#Condaの利点
 - **明確な構造**：そのディレクトリ構造を理解しやすい
 - **透過的なファイル管理**：ディレクトリ外にファイルをインストールしない
 - **柔軟性**：Python用のたくさんのサポートパッケージが含まれている
 - **汎用性**：Python環境やパッケージを管理するためだけのものではない。R（統計を計算するためのプログラミング言語）にも使用できる。

#適切なCondaダウンロードオプションを選択する方法
現在、3つの異なるインストーラがある。

- **Anaconda**（無料）
- **Miniconda**（無料）
- **Anaconda Enterpriseプラットフォーム**（組織が企業環境でPythonとRを適用することを可能にする商用製品のだ）

無料のツール、AnacondaとMinicondaを詳しく見て見よう。**今、2つの間の主な違いは何？**
Minicondaは約400MBのディスクスペースを必要とし、そしてそれはほんの少しの基本的なパッケージを含みる。Anacondaは約3 GBのディスクスペースを必要とし、150以上の科学的なパッケージ（例えば統計と機械学習のためのパッケージ）をインストールする。また、Condaの環境とパッケージを管理するのに役立つGUIツール、Anaconda Navigatorも設定する。

Minicondaはあなたのために2つのことを設定する：コンダと元の環境。
パッケージおよび環境管理ツールを含む最初のCondaインストールインストーラ。その後、Condaは2つのことを含む元の環境を作成する。

- Pythonの特定のバージョン
- いくつかの基本的なパッケージ

元の環境以外にも、必要に応じていくつでも追加の環境を作成できる。そして全体的な問題は、これらの追加の環境が異なるバージョンのPythonsと他のパッケージを含むことができるということのだ。つまり、たとえば、設定したばかりの最新の環境でアプリケーションが動作しない場合は、いつでも戻って他のバージョンを使用できる。
追加環境を適用する主なユースケース：

- Pythonまたはパッケージのバージョンが異なるアプリケーションを開発する
- Pythonまたはパッケージのバージョンが異なるアプリケーションを使用している
- あなたは他の開発者と協力する
- クライアント用のPythonアプリケーションを作成する

#ディレクトリ構造
Condaシステムは単一のディレクトリにインストールされる。 たとえば、私のパソコンでは、このディレクトリはD：\Miconda3-64。 元の環境と2つの重要なディレクトリが含まれている（他のディレクトリは現在関係ない）。
pkgs（圧縮形式および非圧縮形式で保存されたパッケージが含まれています）
envs（これには環境が含まれます - ルート環境を除く - 別々のサブディレクトリーにあります）

Conda環境内で最も重要な実行可能ファイルおよびディレクトリ（\envs\environmentnamesに配置）は、次のとおりのだ：

 - `\python.exe`  -  Pythonはコマンドラインアプリケーション用に実行される。たとえば、Example Appディレクトリにいる場合は、次のようにして実行できる: `python.exe exampleapp.py`
 - `\pythonw.exe`  -  PythonアプリケーションはGUIアプリケーション、またはUIがまったくないアプリケーションに対して実行される。
 - `\Scripts` - 実行可能ファイルはインストール済みパッケージの一部のだ。環境をアクティブにすると、このディレクトリがシステムパスに追加されるため、実行可能ファイルはフルパスなしで使用できる。
 - `\Scripts\activate.exe`  - 環境を有効にする

そしてJupyterがインストールされていれば、これも重要なファイルです。

 - `\Scripts\jupyter-notebook.exe` -  Jupyterラップトップブート（jupyterパッケージの一部）。

これで、Python環境がコンピューターに正常にインストールされた。しかし、どうやってそれを使い始めることができる？
*（続ける）*
MySQL / MariaDB vs PostgreSQLメモ

# 本記事について

アプリケーションを開発するためにどの DB を使った方がよいか考える機会は何度かあると思います。
実際に使ってみて初めて問題や課題が見つけられることが多いと思いますが、次回の検討するタイミングで思い出せるようメモとして残すためのものです。

メリット・デメリットが見付かった場合は追記していく予定です。
但し対象は恐らく MySQL/MariaDB と PostgreSQL 以外に対象は増やさないと思います。

レコード数は最大でも数千程度を扱った経験に基づき、数十万レコードといった大規模の性能比較は出来ておりませんし、実施する必要に迫られていないため行う予定はありません。
主に利便性や機能面での比較となります。

尚、あくまで個人の経験に基づく内容なので解決策があるのかもしれませんのでご了承ください。

# MySQL / MariaDB vs PostgreSQL

## PostgreSQL のメリット

### local 接続の Ident 認証(Peer認証)が利用できる

同一ホスト上に DB とその DB を使うアプリケーションがあった場合に、DB 接続時のアカウントを OS のアカウントと一緒に管理することが出来ます。([参考](https://www.postgresql.jp/document/9.2/html/auth-methods.html))

### インデックスが作成できる配列がデータ型として使える (テーブルを使わずにタグのような概念が実装できる)

※ MySQL 5.7 からは JSON 型のデータが扱えるようになったので同様のことは可能

タグのようなあるデータに対して付加情報をつけたいケースがあります。
例えば、wiki のようにページを示すデータがあった時に、ページごとに `MySQL`, `MariaDB`, `PostgreSQL` のようなタグをつけられるようにしたいといったケースです。

その場合、タグをテーブルとして実装する必要がありますが、PostgreSQL では配列が使えるためページを指すテーブルのカラムとしてタグをつけることが出来ます。[参考/PostgreSQL9.4.5](https://www.postgresql.jp/document/9.4/html/arrays.html)


```sql:pagesテーブルにtagsカラムを定義する例
CREATE TABLE pages (
    title  text,
    tags   text[]
);
```

## PostgreSQL のデメリット

* (TBD)

## MySQL / MariaDB のメリット

* (TBD)

## MySQL / MariaDB のデメリット

### `INSERT ... ON DUPLICATE KEY UPDATE` により複数レコードを更新する際に、挿入したレコードの ID が調べられない

複数のテーブルが外部キーを使って関連している場合に、挿入した ID は知りたいものです。
しかし挿入したレコードの ID が調べられないため、改めて SELECT クエリを使う等の手段を使って調べる必要があります。

`AUTO_INCREMENT` 属性が設定されている場合は、`LAST_INSERT_ID()` により挿入した ID を知ることが出来るので、`AUTO_INCREMENT` 属性を使っており、レコードを 1 つずつ挿入・更新する場合は特に問題とならないでしょう。

また、Bulk insert により複数のレコードを挿入する場合は、`AUTO_INCREMENT` 属性が指定されていれば、`LAST_INSERT_ID()` は挿入した最初の行の ID を返します。([参考/MySQL 5.6](https://dev.mysql.com/doc/refman/5.6/ja/information-functions.html#function_last-insert-id))

挿入処理が全て成功していれば、挿入したレコードの ID は `LAST_INSERT_ID()` から挿入したレコード数分加えた ID の間になっていると言えます。
但し、これは InnoDB を使っている場合には複数のレコードが挿入されるまでロックする場合のみ
挿入順序は Bulk insert で指定した順序が担保されるため使える手段です。([参考](https://dev.mysql.com/doc/refman/5.6/ja/innodb-auto-increment-configurable.html))

そのため Bulk insert により複数レコードを挿入する場合も `AUTO_INCREMENT` 属性が指定されていれば特に問題とならないでしょう。

問題となるのは Bulk update (`INSERT ... ON DUPLICATE KEY UPDATE`) により複数レコードを更新しようとして、一部レコードが挿入される場合です。
全て挿入されるとは限らないため、**どの ID が挿入されたレコードであるか `LAST_INSERT_ID()` から特定できません**。

まとめると次のとおりです。

- `AUTO_INCREMENT` 属性が設定されている場合、
    - レコードを 1 つずつ挿入・更新する場合は `LAST_INSERT_ID()` で ID を取得できる
    - Bulk insert により複数レコードを挿入する場合は `LAST_INSERT_ID()` ～ `LAST_INSERT_ID()+挿入レコード数` から ID を推測できる
- `AUTO_INCREMENT` 属性が設定されている場合であっても、
    - **Bulk update (`INSERT ... ON DUPLICATE KEY UPDATE`) により複数レコードを更新する場合は挿入したレコードの ID が取得できない**

尚、挿入したレコードの ID を一時的な table に保存することで調べる方法があるようです。
https://jumble-note.blogspot.com/2013/06/mysql-insertid.html
どうしても MySQL / MariaDB を使う必要があり、ID を調べる必要がある場合は参考にしてみて下さい。
php-master-changes 2019-03-25

今日は俺の誕生日だった！あとTSRMの不要コードがごっそり削除され、run-tests.php を php 7.0-7.2 と互換性あるコードにする修正、稲妻の削除、-j1 ではテスト並列実行にならないようにする修正があった！

# 2019-03-25
## krakjoe: TSRM cleanup for PHP8
- https://github.com/php/php-src/commit/bd73607b9e4811e7caa9d2ff4d227626ffd35dab
- TSRM の不要コードをごっそり削除
- [PR:3976](https://github.com/php/php-src/pull/3976)
- ZTS が pthreads か win32 のスレッドを要求するようになり、昔あった GNUPTH、SGI ST、BETHREADS のサポートはなくなった
- [TSRMLS_JUNK](https://twitter.com/krakjoe/status/1110075175930871811) ふく

## TysonAndre: Make run-tests.php compatible with php 7.0-7.2
- https://github.com/php/php-src/commit/936356bf1e080ee9a9c05d2808d903a1f8a8004c
- [7.4~]
- run-tests.php を php 7.0-7.2 と互換性あるコードに修正
- 拡張作っててテストを並列実行したかったらしい

## nikic: Drop lightning for concurrent worker count
- https://github.com/php/php-src/commit/3c61972451f91df9d657ae06db0397f8d65cc4df
- [7.4~]
- run-tests.php に稲妻が含まれていたのを修正
- マジで稲妻 ⚡️[]⚡️ なんだって、嘘じゃねえから

## nikic: Don't use parallel testing with -j1
- https://github.com/php/php-src/commit/071ffa2e7946a8f4fca856c9984be512d1eadbbc
- [7.4~]
- run-tests.php で、-j1 の場合並列実行にしないよう修正
Jquery Form Selectors

##Form Selectors in JQuery
- A Form Selector selects the HTML element which has type=input field within the form element.
- It is one of the pseudo-class selectors start with [:].
- We must indicate [input:file] in jquery otherwise it take [*:file].
- Here we can see the example of input tag in html.
&lt;input type="text" value="content" enabled="enebled">

## :button
- This <a href="https://www.onlineinterviewquestions.com/jquery-interview-questions/">jquery</a> selector operates which input type has a button.
- The jquery execute only an element within the form elements.
- A type=button element will pass a signal to alert when the click event execute.

### Example

`$(document).ready(function () {
    $(':button').click(function () {
        alert("hai");
            });
});   
`
## :checkbox
In this jquery selector perform the checkbox element which declare the input type="checkbox" within form element.

### Example
` $(document).ready(function () {
    $(':button').click(function () {
     alert($(':checkbox').val());
     });
});`

## :checked
- We can use this property for checkbox and radio button that mention in form.
- The checked elements are only manipulated by jquery.

Read More from <a href="https://api.jquery.com/category/selectors/">https://api.jquery.com</a>
Keep Fortran Great!

#Keep Fortran Great!
![KeepFortranGreat.png](https://qiita-image-store.s3.amazonaws.com/0/44522/441b4e74-3dfa-61d7-1654-49baf101653f.png)

#NaN と三分岐 GOTO 文
実数は全順序集合なので、任意の２数を持ってくれば、大・小・等しいの三つの関係の内必ず一つが成り立ちますが、IEEE754 の代数系には普通の数の他に ±∞ や NaN (Not a Number) があって、このうち NaN には順序が無いため、比較する２数のうちのどちらか（もしくは両方）が NaN のとき、三つの関係のどれも成り立たない状況が生じます。

上古 FORTRAN の三分岐 GOTO 文に、この NaN が来た時どうなるか見てみます。三分岐 GOTO 文では、変数が負、0.0、正のいずれかによって行き先が決定されます。

##ソース・プログラム
NaN を 0.0 / 0.0 で生成します。gfortran のコンパイル時チェックを避けるため、zero = 0.0 を使っています。

参考記事：implicit_none さん
https://qiita.com/implicit_none/items/a96d5bdb1a0cf05b6f03

```fortran
    program NaNtest
        implicit none
        real :: xnan, ynan, zero = 0.0
        xnan = zero / zero
        ynan = xnan
        print *, xnan, ynan
        print *, xnan == ynan, xnan /= ynan
!
        print *, xnan < ynan, xnan == ynan, xnan > ynan
!
        if (xnan) 1, 2, 3
1       print *, 1
        goto 99
2       print *, 2
        goto 99
3       print *, 3
99      continue
!
        print *, 'SIGN NaN', sign(1.0, xnan)
    end program NaNtest
```

##実行結果
NaN は自分自身との比較でもイコールになりません。二つの NaN どうしの大小等比較を見てみるとすべて偽になっています。

三分岐 GOTO 文では三番目の正に来ています。
しかし、NaN の符号を見てみると、Intel Fortran と gfortran で結果が分かれます。Intel は正、gfortran は負になっています。gfortran の場合、三分岐 goto の場合と矛盾しています。まぁそもそも本来 NaN には符号が無いはずなので、意味が無いんですがｗ

###intel fortran

```
            NaN            NaN
 F
 F T
 F F F
           3
 SIGN NaN   1.000000
```

###gfortran

```
              NaN              NaN
 F
 F T
 F F F
           3
 SIGN NaN  -1.00000000  
```

##弁明
一度 NaN が出ると、それ以降の計算は全部 NaN になりそうな気がしますが、sign 関数で符号を見ると普通の数に戻ってくるという事実があって、長年謎に思っていたのですが、三分岐 GOTO 文などと整合させるためではないかと思って、そういう結論を導こうとしていたのですが、gfortran の結果で主張が崩れてしまいましたｗ

NaN の二進内部表現の符号ビットを見ると、NaN の内部表現は一意ではないので、正の場合も負の場合も可能なのですが、Intel Fortran で調べた限りでは、符号ビットの内容に関わらず sign 関数では常に正扱いになっていました。それで上記のストーリーを考えたのですが、gfortran で思いっきり矛盾してしまいましたｗ

gfortran での NaN の内部表現と sign 関数の関係はまだ調べていないので、追って調べてみたいと思います。KEEP FORTRAN GREAT!

##補足

###ソース・プログラム
NaN をビット列で生成して、符号ビットを変えたうえで、sign 関数に入れてみます。

```fortran
program hello
   real :: xnan
   xnan = transfer(B'01111111100000000000000000000001', xnan)
   print *, xnan
   print *, sign(1.0, xnan)
!
   xnan = transfer(B'11111111100000000000000000000001', xnan)
   print *, xnan
   print *, sign(1.0, xnan)
end program hello
```
###gfortran での実行結果
gfortran では、NaN の符号ビットの逆の符号になっているようです。

```
              NaN
   1.00000000    
              NaN
  -1.00000000    
```

補足 H31.4.10
gfortran の三分岐は NaN の符号ビットに依らずに、正に相当する三番目に飛んでいます。
【Rails】devise_mapping

# 前提

```
rails g devise User
```
しているとして、sessionsのnewで `binding.pry`している。

```sessions_controller.rb
class Users::SessionsController < Devise::SessionsController
  # before_action :configure_sign_in_params, only: [:create]

  # GET /resource/sign_in
  def new
    super
    binding.pry
  end
```

# debug中

```
[1] pry(#<Users::SessionsController>)> devise_mapping
=> #<Devise::Mapping:0x00007fc4833b3220
 @class_name="User",
 @controllers=
  {:registrations=>"users/registrations",
   :sessions=>"users/sessions",
   :passwords=>"devise/passwords"},
 @failure_app=Devise::FailureApp,
 @format=nil,
 @klass=#<Devise::Getter:0x00007fc4833b27f8 @name="User">,
 @modules=
  [:database_authenticatable, :rememberable, :recoverable, :registerable, :validatable],
 @path="users",
 @path_names=
  {:registration=>"",
   :new=>"new",
   :edit=>"edit",
   :sign_in=>"sign_in",
   :sign_out=>"sign_out",
   :password=>"password",
   :sign_up=>"sign_up",
   :cancel=>"cancel"},
 @path_prefix=nil,
 @router_name=nil,
 @routes=[:session, :password, :registration],
 @scoped_path="users",
 @sign_out_via=:delete,
 @singular=:user,
 @strategies=[:rememberable, :database_authenticatable],
 @used_helpers=[:session, :password, :registration],
 @used_routes=[:session, :password, :registration]>
```

@modulesにuser.rbのdevise: で記述したmoduleが格納されている。

```user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
end
```

↓moduleが有効か判定してくれる。

```
[11] pry(#<Users::SessionsController>)> devise_mapping.validatable?
=> true
[12] pry(#<Users::SessionsController>)> devise_mapping.confirmable?
=> false
```