OmniAICreator/Qiita-1.07M huggingface dataset:
【Bash】配列に値が含まれているか確認する方法

## 前提
配列`array`に`orange`に含まれているかどうかを判定するスクリプトです。

いくつかコードがありますが急いでいる人は[結論](https://qiita.com/Hayao0819/items/0e04b39b0804a0d16020#%E3%81%95%E3%82%89%E3%81%AB%E4%BF%AE%E6%AD%A3)へどうぞ

## コード

```bash
array=('apple' 'orange' 'banana' 'peach')
check_array() {
    local i
    for i in ${array[@]}; do
        if [[ ${i} = ${1} ]]; then
            return 0
        fi
    done
    return 1
}

if check_array "orange"; then
    echo "Orange exists."
else
    echo "Orange does not exist."
fi
```

## 解説

## check_arrayについて
`for`で配列の文字を1つずつ比較し、引数に渡された値と同一の値があればその時点で`true`を出力して終了します。
もし`for`が終了したらその時点で値が存在していないことになるので`false`を出力して終了します。

## if以降について
あとは`check_array`を実行して値を比較しているだけです。

# もっといい方法が合った
コメントにて教えていただきました

```bash
if [[ $(printf '%s\n' "${array[@]}" | grep -qx "orange"; echo -n ${?} ) -eq 0 ]]; then
    echo "Orange exists."
else
    echo "Orange does not exist."
fi
```

### 教えてもらったコードを修正
終了コードの判定なのでこっちのほうがいいよっていう
grepのオプションを編集すれば条件を正規表現とかでいい感じにできるはず

```bash
if printf '%s\n' "${array[@]}" | grep -x "orange" > /dev/null >&2; then
    echo "Orange exists."
else
    echo "Orange does not exist."
fi
```

### さらに修正
grepの`-q`オプションという存在を知ったのでもっと短くなった

```bash
if printf '%s\n' "${array[@]}" | grep -qx "orange"; then
    echo "Orange exists."
else
    echo "Orange does not exist."
fi
```

# 最後に
もしもっと良い方法があれば教えて下さい
Pythonの -i フラグでスクリプト実行後にインタラクティブモードに入る

```shell
$ python -i script.py
```
`-i` フラグをつける事で`script.py`を実行後に直接インタラクティブモードを開始できる。

#例
```python:scripts.py
import numpy as np

def double_list(a):
    b =  np.array(a) * 2
    return b.tolist()

x = 'Hello'
```

```
$ python -i script.py
>>> double_list([1,2,3])
[2, 4, 6]
>>> print(x)
Hello
```
魔法JS☆あれい 第10話「もうmapにもforEachにも頼らない」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)
* [第3話「もうsortもreverseも怖くない」](https://qiita.com/8amjp/items/86f5294981fbebd3fe2d)
* [第4話「fillも、spliceも、copyWithinもあるんだよ」](https://qiita.com/8amjp/items/0741e35b70ea32711265)

第2部「アクセサ・メソッド編」
* [第5話「joinなんて、concatなわけない」](https://qiita.com/8amjp/items/229c41ad2146728abd89)
* [第6話「indexOfなの絶対lastIndexOf」](https://qiita.com/8amjp/items/f7e421722e419c1c0a7d)
* [第7話「includesのsliceと向き合えますか？」](https://qiita.com/8amjp/items/007ac192399225db3843)

第3部「イテレーション・メソッド編」
* [第8話「filterって、ほんとfindとfindIndex」](https://qiita.com/8amjp/items/f7014b09c5c2a6440a74)
* [第9話「someなの、everyが許さない」](https://qiita.com/8amjp/items/ec91d29f8f166b45efbb)

## map()

イテレー太「さあ、引き続き戦いの真っ最中だよ！」
あれい「いつまで続くんだよこの駄犬」
イ「召喚したデータは[第8話](https://qiita.com/8amjp/items/f7014b09c5c2a6440a74)を参照してね！　そして、今回の敵の弱点は、『記事のタイトル（`title`）と使用されているタグ（`tags`）の名前（`name`）を一覧にしたもの』だよ！」
あ「要は見出しか」
イ「そうだよ！　さあ、記事の見出しを`return`して敵を倒してよ！」
あ「面倒くせえなあ……」

```js
return items.map(item => `${item.title} (${item.tags.map(tag => tag.name).join('/')})`)
```

あ「これでいいのか」
イ「あれい、今回も解説をお願い！」
あ「ああん？　面倒くせえなあ……だから、`map()` メソッドですべての記事にアクセスして`title`と`tags`を取得するだろ」
イ「ふむふむ」
あ「で、さらに`tags`内のすべての要素に`map()` メソッドでアクセスして、`name`のみの配列を作成してから、それを`join()`メソッドで連結してるんだよ」
イ「いやー、さすがはあれい！　魔法少女コスが壊滅的に似合わないけど仕事は早いね！」
あ「しばくぞ」

### 解説

> `map()` メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる**新しい配列を生成します**。

（[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)より）

配列のすべての要素に対してコールバック関数を実行し、返ってきた結果で新しい配列が作成されます。
コールバック関数では、`filter()` メソッドと同じく、「現在の要素、現在の要素のインデックス、元の配列」という3つの引数を使用できます。

## forEach()

### 解説

> `forEach()` メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

（[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)より）

さて、`forEach()` メソッドについては解説のみとなります。なぜなら、`forEach()` メソッドには**戻り値がない**ため、敵に攻撃できないからです。
配列のすべての要素に対して関数を実行する……という点では`map()` メソッドなどと同じ動きをしますが、戻り値がないのでメソッドチェーンとして使用しづらく、`map()`や`reduce()`を使わずにあえて`forEach()` を使うというケースが、正直言って思いつきません。
（……逆に言うと、他のオブジェクトである[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)や[Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)では`forEach()`くらいでしか反復処理ができないけど、Arrayオブジェクトは便利なメソッドが豊富に揃っていて幸せだなー、という事なんでしょうね。多分……）

あ「なんだこの試合放棄感丸出しの解説は」
イ「一応、記事のタイトルを順にコンソールに出力する例だけでも提示しておいてよ！」
あ「面倒くせえなあ……」

```js
items.forEach(item => console.log(item.title));
```

## 次回予告

ずっと配列の要素達にコールバック関数を実行しながら、あなたは何も感じなかったの？
皆がどんな風にアキュムレータに代入されたか、わかってあげようとしなかったの？

[第11話 最後に残ったreduceとreduceRight](https://qiita.com/8amjp/items/c3f58868fd773e1d2da2)
PySimpleGUIでの時刻表示（timeoutの使い方）

##はじめに
PySimpleGUIでTKのafter(一定時間ごとに繰り返し実行する。JavascriptではsetInterval)みたいなことはできないかと思ったところ、timeoutを使えばできるようでした。
そこで、TKの時刻表示のサンプルを書き換えてみました。

##環境
Win10Pro
Anaconda
Python3.7
PySimpleGUIのインストールやもろもろは、以下を参照してください。
[PySimpleGUIでQRコード作成GUIを作る](https://qiita.com/Gyutan/items/bc9041e4dc372427e355)

##TKによるデジタル時計
[お気楽 Python/Tkinter 入門](http://www.nct9.ne.jp/m_hiroi/light/pytk07.html)
アナログ時計の項目の中のデジタル時計を参考にしています。
>after() メソッド
>今回はユーザからの入力がなくても時計を動かさないといけなので、単純なイベント駆動型アプリケーションでは「時計」を実現することはできません。
このため、プログラム自身でなんらかのきっかけを作ってやる必要があります。このような場合、役に立つメソッドが after() です。 

```python
from tkinter import *
# サンプルではTkinterとなっていますが、Python3では小文字のtkinterになります。
import time 

root = Tk()
root.option_add('*font', ('FixedSys', 14))

buff = StringVar()
buff.set('')

Label(textvariable = buff).pack()

# 時刻の表示
def show_time():
    buff.set(time.strftime('%I:%M:%S'))
    root.after(1000, show_time)
    #1000msの後にshow_time関数を呼び出しています。

show_time()
root.mainloop()
```
実行例
![tk1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165987/ce9eadf7-a215-ae52-91c6-fa64f3e6a3d4.jpeg)

##PySimpleGUIによるデジタル時計
cookbookのAsynchronous Window With Periodic Updateを参考に書いています。
[cookbook Asynchronous Window With Periodic Update](https://pysimplegui.readthedocs.io/en/latest/cookbook/)

```python
import PySimpleGUI as sg
import time

def show_time():
    jikan = time.strftime('%I:%M:%S')
    return jikan

sg.theme('Dark')

layout= [[sg.Text(size=(8, 1), font=('Helvetica', 20),justification='center', key='-jikan-')]]

window = sg.Window('Watch',layout)

while True:
    event, values = window.read(timeout=100,timeout_key='-timeout-')
    #timeoutを指定することで、timeoutイベントが起こります。timeoutの単位はたぶんms
    # print(event,values)
    #↑コメントアウトを外すと、どんなイベントが起こっているか確かめることができます。
    
    if event in (None,):
        break
    elif event in '-timeout-':
        jikan = show_time()
        window['-jikan-'].update(jikan)
        
window.close()
```
実行例
![psg1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165987/4f02d599-4dbb-1b98-2694-b6fce3cba692.jpeg)

##まとめ
一定時間ごとに繰り返し実行する（tkのafter）ことが、timeoutを設定することで、実現できました。
nginx で下層ディレクトリにアプリをインストールしたときの REQUEST_URI の書き換え設定

## やりたいこと

URL は `http://example.com/foo/bar/action_name?id=1` なんだけど、 REQUEST_URI には `/action/name?id=1` が入っててほしい場合の nginx の config の書き方。


## 設定例

```nginx:/etc/nginx/conf.d/sample.conf
# アクセスされたURLの /foo/bar/ 以下の部分を、後で使うため変数 $request_uri_for_cgi, $query_string_for_cgi にセットする。
if ($request_uri ~* ^/foo/bar/(.*)$) {
    set $request_uri_for_cgi "/$1";
}
if ($request_uri ~* ^/foo/bar/(.*)\?(.*)$) {
    set $query_string_for_cgi "$2";
}

location ~* /foo/bar/(.*)$ {
    include /etc/nginx/fastcgi_params;

    fastcgi_pass   unix:/var/run/php-fpm.sock;
    fastcgi_index  index.php;
    fastcgi_split_path_info ^(.+?\.php)(/.*)$;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

    # REQUEST_URI と QUERY_STRING を設定する
    fastcgi_param REQUEST_URI $request_uri_for_cgi;
    fastcgi_param QUERY_STRING $query_string_for_cgi;

    try_files $uri $uri/ /foo/bar/index.php;
}
```

※nginx の設定は初めてなうえ、試行錯誤で作ったものなので、無駄な行があったりするかと思います。


## 結果

`http://ecample.com/foo/bar/search?id=1234` にアクセスが有ると、 `http://example.com/foo/bar/index.php` が呼ばれて、 `$_SERVER['REQUEST_URI']` に `search?id=1234`, `$_SERVER['QUERY_STRING']` に `id=1234` が入るようになります。
【UE4】エモノを食って飛び去るドラゴン／第13回UE4ぷちコン進捗 - 2020/03/22

[1]:http://historia.co.jp/ue4petitcon13
[2]:https://qiita.com/Rinderon/items/5e526adcfdc4c104c745
[3]:https://qiita.com/Rinderon/items/15aacd4cca4eb0292095


[株式会社ヒストリアさん主催の第13回UE4ぷちコン][1]の作業進捗。

作業をしながらおやつを食べすぎて、晩飯はまだ欲しくない。
…ので、進捗記事を書いておこう。（これが終わったら晩飯にしよう）

引き続き、敵となるドラゴンを作っている。
[前回の飛来][2]の続きとなる、エモノに食らいついて飛び去るような挙動を作成した。

例によって、本プロジェクトとは別の、実験用のプロジェクトで作っている。

# こんな感じになった

![20200322_2017.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/adf01a6b-a3e5-8c45-a77e-cf68fbcf8328.gif)

- 【左手前】標準位置となるであろう距離での食らいつき実験。
- 【中央】横に振ったら変に見えるかどうかの実験。（アリだと判断）
- 【右奥】これは遠すぎるだろう、という距離での実験（さすがにナシ。残像見えてるし）

まあ、動きが速すぎて、どれもズルい感じもしなくもない。

> ゲーム本編ではドラゴンは１匹の予定。

# 食らいつきについて

食らいつき判定がでたら（今回はゲームパッドのボタンを押したら）、まずはエモノの位置から逆算した、食らいつき Transform を算出する。
[これが昨日ハマっていた、Construction Script でのあれこれ][3]である。結局は、愚直に Tick を回して Print String でログに計算結果を出して、その数値をコピペして使っている。

次のフレームからは、その Transform に向かってホーミング。
Ease ノードの Ease Out を使用。（出だしが早く、だんだんゆっくりになる挙動）

![20200322_2036.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/38d1c99c-8f41-93a2-fce6-b03b77416160.png)

この Ease ノードの使い方、おそらく誰もやっていないだろう的なトリッキーな方法。
通常、Alpha は変数で持っておいて、Tick か何かで

```c++
Alpha = Clamp(Alpha + AlphaSpeed * DeltaSeconds, 0.0f, 1.0f);
```

的な計算をするはず。一方、このやり方は、

```c++
Alpha = DeltaSeconds / ConvergeSeconds;
```

…とただ`DeltaSeconds`を定数`ConvergeSeconds`で割っているだけで、Ease用の変数 `Alpha`を持つ必要がない。ちなみに、この`ConvergeSeconds`は「収束するまでの秒数」の意。つまり、ConvergeSeconds の秒数で目標値に追いつくことになる。

このアイデアは、大昔の固定フレームレートの時代にやっていた

```c++
void SomeObject::Tick()
{
	CurrentValue = Lerp(CurrentValue, TargetValue, 0.9f);
}
```

みたいな、毎フレーム 90% の割合で目標値(`TargetValue`)に近づけるやり方＝残り距離の10%ずつ近づけるやり方を、可変フレームレートの世界に持ち込もうとして作ったもの。

大雑把には：

- 毎フレーム 0.9 倍というやり方は、等比級数と同じ挙動をするよね。
- 等比級数の極限をとると、exponential の曲線になるよね。
- 極限をとるということは、連続系（＝可変フレームレート）の世界で使える式になるよね。
- そういえば、Ease は exponential 曲線だよね。
- まじめに数式を解くのが面倒なので、Ease 使えばいいんじゃね？

という考えで編み出したもの。私の好みの挙動をするので多用している。

<font color="red">【注意】全く厳密な計算ではないので注意。似ているから Ease を使っているだけ。なので、ConvergeSeconds で指定した時間でちゃんと収束するわけでもないし、フレーム落ちの影響を受けたりしてしまう。とはいえ、可変フレームレートの世界で毎フレーム 0.9 を掛けるようなやり方よりは、フレーム落ち時の暴れ方は穏やか。</font>

> もし、フレームが安定しないアプリになってしまったり、ヒッチが多くなってしまったりしたら、あらかじめ `DeltaSeconds = Clamp(DeltaSeconds, 1/90, 1/45)` などして、例えば DeltaSeconds = 1.00(秒) みたいな極端な値にならないように誤魔化すのも手。

# 咥えて(くわえて)連れ去る周り

噛みつきアニメーションに「BiteAlpha（食いつきアルファ）」のカーブを用意。

![20200322_2100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358170/efeec4e7-9d6b-3231-a273-aa996fb7c112.png)

0なら咥えてない、1なら咥えている、を表すためのもの。
これで、エモノの Transform を、現在の位置から、口の中の位置まで Lerp している。
で、一度咥えたら(1に達したら)、

- エモノActorを消して、ドラゴンがあらかじめ持っているエモノコンポーネント(=Skeletal Mesh Component) を表示する。
- あとは、ずっと口の中の Transform にする。

# 飛び去る

これは単純にアニメーションを再生しながら、World Up 方向に Add Force しているだけ。
一定の高度に達したら Destroy Actor する。


とりあえず、現状はこんな感じ。
…さて、晩飯に取り掛かるとするか。
Chart.jsことはじめ

## はじめに
データビジュアライゼーションに興味を持ったため、色々調べてみたところ
以下のようなライブラリが多く使用されているとのことでした。

- d3.js
- Charts.js
- Highcharts

この記事では、Charts.jsについて環境構築からサンプルグラフの描画までを紹介します。

## 対象者
- Charts.jsを触ったことがない
- データビジュアライゼーション初心者
- 環境構築からサンプルグラフの表示までをとりあえずしてみたい

## 実行環境
- macOS Catalina 10.15.3
- Google Chrome

## インストール
公式のドキュメントを参照すると、npm bowser Github等からインストールができるみたいです。
htmlのsrcで指定することで使用できるので、特にローカルにインストールする必要はありません。
ちなみにnpmを使ったインストールは以下のコマンドを実行します。

```bash
npm install charts.js --save
```

## コード
以下のコードをhtml形式で保存します。
コードの説明は公式のドキュメントが日本語であるため省略させていただきます。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
　<title>graph</title> 
</head>
<body>
  <h1>title</h1>
  <canvas id="myChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // 作成したいチャートのタイプ
        type: 'line',

        // データセットのデータ
        data: {
            labels: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul."],
            datasets: [{
                label: "first data set",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45],
            }]
        },

        // 設定オプション
        options: {}
    });
  </script>
</body>

</html>

```


ブラウザで確認するとグラフが表示されます。
![first data sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295868/1f059dbc-f786-081d-45a5-b3f603cbc4a2.png)

次はオープンデータを様々な表示形式で表示していきます。

### 参考
https://misc.0o0o.org/chartjs-doc-ja/getting-started/
https://www.webprofessional.jp/introduction-chart-js-2-0-six-examples/
Pythonのテキストファイル読み込みモジュールの比較

## はじめに
ファイルを読み込むモジュールは複数あり、違いがあいまいなまま使用していたので、
正しく理解しておこうと思い立ち書きました。

## 環境

- OS    ：CentOS Linux release 7.6.1810 (Core)
- Python：Python 3.7.5


参考
[Python 3.8.1 documentation](https://docs.python.org/ja/3/library/io.html)


## 3つのモジュール

Pythonでファイルを読み込む時によく使用されるモジュールは、下記の3つです。
各モジュールでファイルを読み込んで、どのように格納されるのか比較します。

| モジュール名 | 説明                                      |
|:------------|:------------------------------------------|
| read()      | ファイルを全て読み込みstr型変数に格納する。  |
| readline()  | ファイルを1行読み込みstr型変数に格納する。   |
| readlines() | ファイルを全て読み込みlist型変数に格納する。 |

※正しくは、「ストリームを読み込み」です。
  この記事ではファイル名を指定して、ファイルに限定しているので
「ファイルを読み込み」と記述しています。


## テスト用のテキストファイル

下記ファイルを読み込み用として作成します。

```text:file.txt
aaa
bbb
ccc
ddd
eee
```

## テストコード

下記のコードで確認を行います。

```python:readtest.py
#!/usr/bin/env python

FILENAME="file.txt"

# read() test
def read_file():
  fd = open(FILENAME, mode='r')
  data = fd.read()
  fd.close()
  print(type(data))
  print(data)

# readline() test
def readline_file():
  fd = open(FILENAME, mode='r')
  data = fd.readline()
  fd.close()
  print(type(data))
  print(data)

# readlines() test
def readlines_file():
  fd = open(FILENAME, mode='r')
  data = fd.readlines()
  fd.close()
  print(type(data))
  print(data)

print("=== read() test ===")
read_file()
print("=== readline() test ===")
readline_file()
print("=== readlines() test ===")
readlines_file()
```


## 実行結果

実行して、結果を表示します。

```shell
$ ./readtest.py
=== read() test ===
<class 'str'>
aaa
bbb
ccc
ddd
eee
=== readline() test ===
<class 'str'>
aaa

=== readlines() test ===
<class 'list'>
['aaa\n', 'bbb\n', 'ccc\n', 'ddd\n', 'eee']
```

各モジュールの結果を見ていきます。


## read()の実行結果

ファイルの内容が、改行コード込みでstr型変数に入っています。

```shell
=== read() test ===
<class 'str'>
aaa
bbb
ccc
ddd
eee
```

注意）
file.txt で、eeeの後に改行がある場合、出力は下記のように空行が含まれます。

        eee
                    <-- 空行がある


## readline()の実行結果

1行目だけがstr型変数に入っています。
ファイルの内容を全て読み込む場合は、繰り返し処理が必要です。

```shell
=== readline() test ===
<class 'str'>
aaa

```

注意）
file.txt で、aaaの後に改行があるため、出力には空行が含まれています。

繰り返し処理を行う場合は、以下のように書けます。

```python
fd = open(filename, mode='r')
for line in fd:
    print(line, end="")
fd.close()
```

## readlines()の実行結果

1行1要素とした、list型変数に入っています。

```shell
=== readlines() test  ===
<class 'list'>
['aaa\n', 'bbb\n', 'ccc\n', 'ddd\n', 'eee']
```

list型なので、for文で1行づつ取り出せます。

```python
for line in data:
    print(line)
```

注意）
file.txt で、eeeの後に改行がある場合、出力は下記のように改行が含まれます。

```
['aaa\n', 'bbb\n', 'ccc\n', 'ddd\n', 'eee\n']
```

## 最後に

個人的にはreadlines()でlist型にした方が扱いやすくて好みです。
しかし、読み込むファイルが大きいサイズだと一度に読み込むより、
readline() で行ごとに処理したほうが良い場面も出てくるでしょう。
使うモジュールは、用途で変わるので正しい選択をするための手掛かりになれば幸いです。
Flutterでflutter_app_badgerを使い、アプリのホームアイコンにバッジを表示する

Flutterでアプリ開発をしている[村松龍之介](https://twitter.com/riscait)と申します。
（仕事ではiOSアプリのネイティブアプリ開発を行っています）

今回は、FlutterアプリにiPhoneやiPadではお馴染みのアイコンバッジを付けるためにパッケージを導入しましたので備忘録です。

## flutter_app_badgerパッケージを導入する
簡単にアイコンバッジを付けられるパッケージがありますので、導入します。
[flutter_app_badger | Flutter Package](https://pub.dev/packages/flutter_app_badger)

### pubspec.yamlを編集
```yaml
dependencies:
	# 〜〜省略〜〜
  flutter_app_badger: ^1.1.2 # 導入時点で最新のバージョンを指定でOKだと思います。
```

## iOS
iOSでバッジを表示するためには権限が必要なので以下を`info.plist`に追記します。
### Android StudioやVS Codeで`info.plist`を開いて編集する場合

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <!-- ここから下を追加 -->
    <key>UIBackgroundModes</key>
    <array>
        <string>remote-notification</string>
    </array>
    <!-- ここまで -->
</dict>
</plist>
```

### Xcodeで`info.plist`を（Property Listとして）開いて編集する場合
`Required background modes`を追加して、その一要素として`App downloads content in response to push notifications`を追加します。

## Android
> On Android, no official API exists to show a badge in the launcher. But some devices (Samsung, HTC...) support the feature. Thanks to the [Shortcut Badger library](https://github.com/leolin310148/ShortcutBadger/) , ~ 16 launchers are supported.
> （翻訳）Androidには、ランチャーにバッジを表示する公式のAPIはありません。ただし、一部のデバイス（Samsung、HTC ...）はこの機能をサポートしています。 [Shortcut Badgerライブラリの](https://github.com/leolin310148/ShortcutBadger/) おかげで、 [最大](https://github.com/leolin310148/ShortcutBadger/)  16個のランチャーがサポートされます。

Androidの場合は、対応する機種が限られますが、特にやらなきゃいけないこともないようです。
ちなみにPixel 3 Xlではバッジは表示されませんでした。

## コード実装
### バッジの表示・数字の更新
実装は思いのほか簡単です。
intを引数にして以下の関数を呼び出すことでバッジを表示できます。

```dart
FlutterAppBadger.updateBadgeCount(1);
```
上記の例では「1」を渡しているので、ホーム画面のアイコンに❶というようにバッジが表示されます。

doubleの場合はintに変換してから引数に渡しましょう。

0以下の数値を渡すことでバッジが表示されないことを確認しました。
マイナスの数値を渡してもバッジが表示されません。

### バッジをサポートしている環境か調べる
Androidでは一部のデバイスしか対応していないこともあり、あらまじめバッジ機能をサポートしているか調べた方が良いですね。

```dart
FlutterAppBadger.isAppBadgeSupported();
```

上記の関数を実行することで、非同期で真偽値（bool）が返却されます。

上記の実装をメソッドにするなら以下のような感じでしょうか？

```dart
  /// 1以上の数値を渡すことでホーム画面のアイコンにバッジを表示する
  void setIconBadge({int number}) async {
    // バッジ表示機能に対応している場合のみ、バッジの数字を更新する
    if (await FlutterAppBadger.isAppBadgeSupported()) {
      FlutterAppBadger.updateBadgeCount(number ?? 0); // <-引数の`number`が`null`だった場合は`0`
    }
  }
```

iOSの場合、許可を得る必要がありますが、バッジの初回更新時に表示してくれます。

### バッジを非表示にしたいとき
0以下の数値で更新することもできますが、意図的にバッジを非表示にしたいときは以下の関数でバッジが消した方が良さそうです。

```dart
FlutterAppBadger.removeBadge();
```

### 呼び出す場所
基本的に好きな場所で呼び出して良いかと思います。
僕の場合は、アプリのメイン画面で有給休暇の残日数を計算しており、バッジでその残日数を表示させたかったので、計算結果を引数に入れて使用しました。

## 蛇足
ご覧いただきありがとうございました！
蛇足ですが、Flutterアプリをリリースできたので良かったらインストールしてみてもらえると嬉しいです🙇‍♂️
iOS: [‎「レストル-有給休暇管理」をApp Storeで](https://apps.apple.com/jp/app/id1501984307)
Android: [レストル-有給休暇管理 - Google Play のアプリ](https://play.google.com/store/apps/details?id=jp.altive.restol)
【Unity】NavMesh でエラー "Failed to create agent because it is not close enough to the NavMesh" が出た時の解決策

## 概要
UnityでNavMeshを使っていて以下のようなエラーが出ました。

```
Failed to create agent because it is not close enough to the NavMesh
```

この解決策が検索してもなかなか見つからなかったため、記録しておきます。

特に **Agent Type を Humanoid 以外にしている場合**はこの記事と同じ原因である可能性が高いです。

## 環境
Unity 2019.3.0a5
Windows10


## 解決策
このエラーを直訳すると、「エージェントがナビメッシュに十分に近くないため生成に失敗している」ですが、この原因として以下の２つが考えられます。

1. エラー文通り、エージェントとナビメッシュが離れている
2. エージェントのTypeに合ったナビメッシュが生成されていない

それぞれについて解決策を説明します。

### 1. エラー文通り、エージェントとナビメッシュが離れている
この場合、NavMeshAgentのコンポーネントの**Base Offsetの値を変える**ことで直ることがあります。
Scene上にNavMeshAgentの円柱が出ているので高さが合うように調整してください。

### 2. エージェントのTypeに合ったナビメッシュが生成されていない
今回のメインはこちらです。
NavMeshはAgent Type を複数作ることが可能です。これはキャラクターごとに異なる高さや太さを設定するための機能です。しかし、現状Unityでは、**NavigationウィンドウでBakeした場合、デフォルトのHumanoidにしか適用されません。**

つまり、各Agent TypeごとにナビメッシュをBakeする必要があります。
これをするには、ステージとなるオブジェクトに、**Nav Mesh Surface**コンポーネントを追加します。そしてAgent Typeの値を指定してBakeすることで、そのAgent Typeのエージェントが動くようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260272/1632d5b8-6026-29f4-329d-b3e349e42584.png)
個人PCにJenkinsを建てて、ビルドする環境を検討してみる。超概要

# 前回の構築記事はこちら。
 - https://qiita.com/pupupupupu/items/a2c6c0eb9b1782702b51
 - 前回の記事でJenkinsを立ててみたので、今回の記事ではビルドできる環境づくりをしてみる。

# 環境構築について
- 基本的にソースコードはGitlabに入っている。
- Java/Pythonなどの複数言語がビルドされる。

# ビルド環境の設計思想について

- 基本的に、PCは1台しかない。(僕の環境がそうだから、開発している人もそうか。)
- 全てのビルドをホストですべてやるわけではなく、仮想化の環境で実行する。
    - 例えば、java7,java8の両方で動く環境にする。Python2,Python3の両方で動く環境にする。

リソースも制限あるし、仮想化ということで、dockerを使ってビルドしてみることにする。

# 構築方法の概要
- java7,java8,Python2,Python3それぞれが入ったdocker imageを手元にdocker pullで取ってくる。
- pipelineスクリプトでそれぞれのdocker imageでビルドや動作テストするスクリプトを記載する。
- 書いたpipelineスクリプトをGitに保存して、pipelineの設定でGitからpullして実行してくるようにJobの設定をする。
- 最終的に自分の環境にデプロイして、動作検証を行う。やっぱり、kubernetesとか使いたいよね。

# ここまで書いてきて思ったこと。
- これってJenkinsXとかでできるんじゃないかな？確か、JenkinsXって、Jenkins+kubernetesだった気がするし・・・・・
- kubernetesはリソースとかのことをうまくやっってくれるんじゃなかったっけ？
- この後、pipelineスクリプトの書き方とかJenkinsで作れるjobの種類とかをいろいろみていこうと思ったけど、ちょっと中断。

# とりあえず 
 - 一旦、このページは保留にしてJenkinsXで遊んでみます。JenkinsXが飽きたらこのページを更新します。
blocklyでobjectを動かす。 その14


#概要

blocklyでobjectを動かして見る。
ミサイル防衛、やってみた。

#写真

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/a1dc1671-36fe-0f4a-a048-50934405697f.png)


#ステージを作る。


```
<canvas id="canvas" width="450" height="450"></canvas>
```

#ブロックを書く。


```
Blockly.Blocks.run = {
	init: function() {
		this.jsonInit({
        message0: "run",
	      output: "Boolean",
	      style: "math_blocks",
	      tooltip: "%{BKY_MATH_RANDOM_FLOAT_TOOLTIP}",
	      helpUrl: "%{BKY_MATH_RANDOM_FLOAT_HELPURL}"
	  })
  }
};


Blockly.Blocks.r = {
	init: function() {
		this.jsonInit({
			message0: "r %1",
			args0: [{
				type: "input_value",
				name: "TEXT"
			}],
			previousStatement: null,
			nextStatement: null,
			style: "text_blocks",
			tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
			helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
		})
	}
};

```

#フローを書く。

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/289859bd-9f40-780c-bc82-bf9bbe55e6a2.png)


#objectを書く。


```

Blockly.JavaScript.run = function(a) {
    return ["run()", Blockly.JavaScript.ORDER_ATOMIC]
};
Blockly.JavaScript.s = function(a) {
    return ["s", Blockly.JavaScript.ORDER_FUNCTION_CALL]
};

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function getRadian(x, y, x2, y2) {
    radian = Math.atan2(y2 - y, x2 - x);
    return radian;
}
function rad2deg(rad) {
    degree = rad * 180 / Math.PI;
    return degree;
}
var s = 0;
var r = 65;
var t0 = {
    'x': 400,
    'y': 400,
    'dx': 0,
    'dy': 0,
    'speed': 1.4,
    'angle': 30
}
var m0 = {
    'x': 0,
    'y': 0,
    'dx': 0,
    'dy': 0,
    'speed': 1.8,
    'angle': 65
}
function run() {
    var rad = getRadian(t0.x, t0.y, m0.x, m0.y);
    var deg = rad2deg(rad);
    s = deg;
    m0.angle = r;
    t0.dx = t0.speed * Math.cos((Math.PI / 180) * t0.angle);
    t0.dy = t0.speed * Math.sin((Math.PI / 180) * t0.angle);
    t0.x -= t0.dx;
    t0.y -= t0.dy;
    m0.dx = m0.speed * Math.cos((Math.PI / 180) * m0.angle);
    m0.dy = m0.speed * Math.sin((Math.PI / 180) * m0.angle);
    m0.x += m0.dx;
    m0.y += m0.dy;
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    for (var i = 0; i < 401; i += 40)
    {
        ctx.moveTo(i + 20, 20);
        ctx.lineTo(i + 20, 420);
        ctx.moveTo(20, i + 20);
        ctx.lineTo(420, i + 20);
    }
    ctx.stroke();
    ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
    ctx.fillRect(0, 0, 450, 450);
    ctx.fillStyle = '#f00';
    ctx.fillRect(t0.x + 20, 420 - t0.y, 3, 3);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(m0.x + 20, 420 - m0.y, 3, 3);
    return "true";
}

```

成果物

https://embed.plnkr.co/plunk/JmpJJys6amWy8yPD


以上。
月末最後の営業日の曜日 (paizaランク B 相当)

[問題文](https://paiza.jp/works/mondai/dateset/last_business_day?language_uid=c-sharp)
[YouTube解説動画](https://www.youtube.com/watch?v=XtMbP6k4Ej0&t=464s)

````c#
        static void Main(string[] args)
        {
            int X = int.Parse(Console.ReadLine().Trim(' '));
            int all = 0;
            int[] lastBusinessDays = new int[7]; //日、月、火、水、木、金、土
           
            DateTime date = DateTime.Now;
            DateTime endDate = date.AddYears(400 * 7);
            while(date < endDate)
            {
                DateTime lastDate = new DateTime(date.Year, date.Month, DateTime.DaysInMonth(date.Year, date.Month));
                if(lastDate.DayOfWeek == DayOfWeek.Saturday)
                {
                    lastDate = lastDate.AddDays(-1);
                }else if(lastDate.DayOfWeek == DayOfWeek.Sunday)
                {
                    lastDate = lastDate.AddDays(-2);
                }
                DayOfWeek dow = lastDate.DayOfWeek;
                switch (dow)
                {
                    case DayOfWeek.Monday:
                        lastBusinessDays[1]++;
                        break;
                    case DayOfWeek.Tuesday:
                        lastBusinessDays[2]++;
                        break;
                    case DayOfWeek.Wednesday:
                        lastBusinessDays[3]++;
                        break;
                    case DayOfWeek.Thursday:
                        lastBusinessDays[4]++;
                        break;
                    case DayOfWeek.Friday:
                        lastBusinessDays[5]++;
                        break;
                }
                date = date.AddMonths(1);
                all++;
            }
            double result = (int)(((double)lastBusinessDays[X] / all) * 1000000 ) / 1000000.0;
            Console.WriteLine(result);
        }
``````
#####メモ
月末最終日は年月の日数をDateTime.DaysInMonth(year,month)メソッドで求め、DateTimeインスタンスをつくる。

```c#
int lastDay = DateTime.DaysInMonth(year,mont)
DateTime day = new DateTime(year,month,lastDay)
```
【Python】OpenCVで画像を読み込む (初心者向け)

#はじめに
最近Pythonが何かと話題になっています。PythonではOpenCVと呼ばれるライブラリを使うことで、簡単な画像処理ができます。本記事では、OpenCVで画像を読み込んで、色々処理する方法を解説します。

#環境
MacOS Mojave
Python 3.7.6

#下準備

opencvとmatplotlibと呼ばれるライブラリをインストールします。matplotlibはグラフを書くためのライブラリで画像の表示などでも使用できます。以下のコマンドをそれぞれターミナルに打ち込んで、実行してください。

```
$pip install opencv-python
```

```
$pip install matplotlib
```
"opencv"だけではインストールできないので注意してください。Requirement already satisfiedと表示されて入れば、既にインストールされているので、問題ありません。

#画像を読み込んでみよう
今回は以下の猫　(neko.jpg) の画像を使用します。
![neko.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/01ec9a3f-fd2e-b3b8-b1be-a1c085f4ad06.jpeg)

以下のコードを実行します。

```python:opencv_read_img.py
#ライブラリの読み込み
import cv2
import matplotlib.pyplot as plt

#neko.jpgを読み込んで、imgオブジェクトに入れる
img = cv2.imread("neko.jpg")

#imgオブジェクトをmatlotlibを用いて表示する
plt.imshow(img)
plt.show()
```
最初のimportの部分でopencv (cv2) とmatplotlibのpyplot (matplotlib.pyplot) を読み込んでいます。as pltというのはmatplotlib.pylotを長いから、pltに省略してこれから使いますよーていう意味です。

以上のコードを実行して、以下のような画面が出てくれば成功です。
![neko_出力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/5e6f8ae6-4e2a-feaa-9435-910566beff27.png)

ただ、猫ちゃんが変な色になってしまいましたね？ これはopencvではGBR (緑・青・赤) 、matplotlibではRGB (赤・緑・青) と色の表現方法が異なることが原因で起こります。なので、元の色で表現する為には、色の変換が必要です。

#色の変換方法

画像を読み込んだ後に、cv2.cvtColor()を使います。

```python:opencv_read_img.py
#ライブラリの読み込み
import cv2
import matplotlib.pyplot as plt

#neko.jpgを読み込んで、imgオブジェクトに入れる
img = cv2.imread("neko.jpg")

#画像の色の順序をBGRからRGBに変換する
img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
#imgオブジェクトをmatlotlibを用いて表示する
plt.imshow(img)
plt.show()
```
以上のコードを実行すると、以下の画面が出力されます。
![スクリーンショット 2020-03-22 20.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/028fa00b-786c-ba36-5b09-e7ba446387ad.png)
もとの画像が表示されましたね!
次回は簡単な画像処理を行って保存する方法を解説します。

##トラブルシューティング

```
python: can't open file 'opencv_read_img.py': [Errno 2] No such file or directory
```
これは、ファイルがないよというエラーです。この場合は以下の手順を行ってください。

①作成したpythonファイルと同じ位置に画像をおく。
![画像のフォルダ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288555/0888b9b0-0e38-17f1-d22f-49523866980a.png)

②ターミナルでpythonファイルが置いてあるフォルダに移動する。
もしディスクトップのqiita_pythonというフォルダの中にpythonファイルと画像が入ってるとしたら以下のコマンドを実行してください。

```
$cd /Users/ユーザー名/Desktop/qiita_python
$python opencv_read_img.py
```

#Twitterやってます
もしよろしければフォローお願いします!
https://twitter.com/ryuji33722052
Vuetify.jsのリンクの違いについて

## 概要

vuetifyのbuttonやlist-itemなどに対してnuxt linkをつける際にリンクの付け方は2つある

- href
- to

どう使い分けるかというと、 https://qiita.com/white0221/items/ad4136cf2b80eda2509f の記事の通り外部リンク、内部リンクかで使い分けるというのが正しい。

## どういうことが起きるのか

### toの場合

```html
<template>
    <v-btn link nuxt to="/shop/test">
      商品ページに遷移する
    </v-btn>
    <v-btn link nuxt to="http://google.com">
      googleに遷移する（できないけど
    </v-btn>
</template>
```
上のリンクは `http://localhost:3000/shop/test` に遷移する
下のリンクは `http://localhost:3000/http:/google.com` に遷移する
つまり「同じドメイン内」での絶対パス、相対パスによる遷移。（言葉としては確かに内部リンク

### hrefの場合

```html
<template>
    <v-btn link nuxt href="/shop/test">
      商品ページに遷移する
    </v-btn>
    <v-btn link nuxt href="http://google.com">
      googleに遷移する
    </v-btn>
</template>
```

上のリンクは `http://localhost:3000/shop/test` に遷移する
下のリンクは `http://google.com` に遷移する
つまりよくあるhrefでの遷移。（言葉としては確かに外部リンク

これがどういうことかというと、以下のようにnuxtのmiddlewareにfirebase authを噛ませてリダイレクトしていたとする。

```ts
import * as firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  const firebaseConfig = { }
  firebase.initializeApp(firebaseConfig)
}

const auth = firebase.auth()

export default function({ route, redirect }) {
  auth.onAuthStateChanged(user => {
    if (!user && route.name !== 'login') {
      redirect(`/login`)
    }
  })
}
```

このとき上のリンクで `http://localhost:3000/shop/test` にアクセスした場合は、firebase authのlogin情報が一旦消えるので、必ずloginに飛ぶ。
大半はそれが嫌なのでtoでリンクするのが正しい。

## まとめ
気づいたらアタリマエのことではあるが、何も知らないとハマるともわれ。
ちなみに、buttonにはtoの代わりに、replaceもあるので、使い方をきちんと見極める必要がある。
Raytac の MDBT50Q-DB の I/O 割当

Raitac の MDBT50Q-DB は、技適の通ったモジュールを搭載していて Nordic の 「nRF52840 Development Kit」(PCA10056)の代わりとして使える。

公式ページの回路図はこちら
https://www.raytac.com/upload/catalog_b/4065f1eea5d6916f43f62e2f352ea2a8.jpg

オンボードLEDやオンボードボタンのマッピングはPCA10056に準拠していて、ほぼ同じように使える。


以下は解説。

# LED
GPIO用にLED が 3つ実装されている。アクティブロー。

![IMG_20181117_094843.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/868de4ed-8b55-8b8f-23d4-11209d9254c3.jpeg)

|基板上の記述|GPIO割当|実装部品|
|:---:|:---:|:---:|
|D1|GPIO0.13|緑LED|
|D2|GPIO0.14|赤LED|
|D3|GPIO0.15|青LED|
|D4|GPIO0.16|実装なし|

# 押しボタンスイッチ

オンボードのタクトスイッチが 4 つある。アクティブロー。

|基板上の記述|GPIO割当|
|:---:|:---:|
|SW1|GPIO0.11|
|SW2|GPIO0.12|
|SW3|GPIO0.24|
|SW4|GPIO0.25|

# UART 定義
![IMG_20181117_235713.jpg](https://qiita-image-store.s3.amazonaws.com/0/139524/7c21c45d-1512-f3e2-9e61-44a13a449662.jpeg)

|基板上の記述|GPIO割当|
|:---:|:---:|
|P0.06/TX|GPIO0.06|
|P0.08/RX|GPIO0.08|
|P0.05/RTS|GPIO0.05|
|P0.07/CTS|GPIO0.07|

# その他

QSPI や Arduino バスは特にコネクタは設けられていない。
「画面遷移で画面が浮く」を解決(swift_xcode)

#開発環境
Xcode：Version 11.3.1
記事記入時：2020/03/22

↓

Xcode: Version 13.1
現在：2021/11/03

#解決したい問題
・以前のバージョンまでは，画面遷移がうまくできていたのに！
・動画・記事等，教材通りにならない！

<img width="869" alt="スクリーンショット 2020-03-22 19.31.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/c01bc370-b5df-0ddf-5aab-92b5e17ca8bc.png">

↑のように画面遷移を実装した際に，
遷移後の画面が浮いたみたいになってる．．．．．．

```ViewController.swift
override func viewWillAppear(_ animated: Bool) {
        //code記述
    }
```
が正常に作動しない．

#解決方法
画面遷移では
・「control」+ドラッグ
・Present Modally
で実装する場合について書いていこうと思います！

この際に，**Transition**を指定してやることで解決できました．

まずは，storyboard上の**segue**を選択します．
そして，右の野球ベースみたいなところを選択すると，
**Presentation**が**Same As Destination**になってるかと思います．
このデフォルト設定を **Full Screen** にしてやることで無事解決しました！


![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_550611_4b48be95-79b1-cd7f-cb32-468217fe097f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/1a943998-4c30-2f9d-6f7c-6d79aabd0854.png)


すると！

<img width="597" alt="スクリーンショット 2020-03-22 19.32.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/cb2edb7d-2ea2-fdb0-aa5c-1c9d6a10461f.png">

見事，画面遷移後もスクリーンがきれいになりました！

---
そして，，，

```ViewController.swift
override func viewWillAppear(_ animated: Bool) {
        //機能
    }
```

が作動しない問題も，Presentationがデフォルトだと画面が遷移してない状態なので，作動していなかったのです！
PresentationをFull Screenにすることでこの問題も無事解決しました！
<img width="869" alt="スクリーンショット 2020-03-22 19.32.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550611/a3d1631c-d6a8-93d4-7d6b-ee20ef00bcc8.png">

これで無事画面遷移を実装できましたね！
direnv（linux）

##はじめまして
みなさんはじめまして。本日やっと問題解決し、雄叫びをあげましたkyonです。
備忘録として初投稿いたします。
どうぞよろしくお願いいたします。

##環境
CentOS Linux release 8.1.1911 (Core)
mysql  Ver 8.0.17 for Linux on x86_64 (Source distribution)
Visual Studio Code バージョン: 1.43.1

##ー
タイトルにもありますとおりlinuxでdirenvを使いたく、以下URLを参考とさせていただき、
参考URL　[Linuxでdirenvを使う](https://qiita.com/tkmiya34/items/875742eb56ebe54d8828)
.envrcファイルを作成し、Railsプロジェクトの /binディレクトリにパスを通すところまですんなりとできましたが、その後ずっとコイツと戦っておりました。

```
Access denied for user 'ENV['MYSQL_DATABASE']'@'localhost' (using password: YES)
```

多分一週間くらい戦ったと思います。
調べれば直接パスワードをdatabase.ymlへ記述すればいいことは知っていましたが、先々のことを考えた結果direnvを使うことにしました。
が、しかしどうしても分からず。。

```..envrc
export 'DATABASE_USERNAME'="root"
export 'DATABASE_PASSWORD'="password"　←mysqlのパスワード

```
。。。。。？

```database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  username:　ENV['DATABASE_USERNAME']
  password:　ENV['DATABASE_PASSW0RD']
```
。。。。。。。。？？


ただ調べていくうちに.envrcファイルは合ってそうだな、と思っていてdatabase.ymlのusernameとpasswordの書き方がずっと不明でした。

今日ふと[database.yml の管理方法いろいろ](https://www.techscore.com/blog/2012/10/26/how-to-manage-database-yml/)
こちらのURLに辿り着き、問題解決したと言うことです。

##問題解決

```
database.yml には <%= ... %> で Ruby コードを埋め込むことができます。
```

そしてdatabase.ymlを以下のように記述しました。

```database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['DATABASE_USERNAME'] %>
  password: <%= ENV['DATABASE_PASSWORD'] %>
```

埋め込んでなかったんですね。
お恥ずかしい。

駄文ですが最後まで読んでいただき、ありがとうございました。
これを機に投稿していきたいと思います。
kyonでした。
【Github】ローカルにあるプロジェクトをリモート環境にpushする方法

備忘録です。

本当は(1)Github上でリポジトリを作る👉(2)デスクトップにCloneする👉(3)VSCodeのSource Controlからこまめにcommit & pushする、のほうが簡単＆すぐにできるので好きなのですが
今回それをせずにプロジェクトをローカル環境でひたすらつくりつづけてしまいました。

でも、このようなときはローカル👉リモートにpushする方法があります。

このほうが手間なので、やはり前者の手法のほうが好みですが、また同じミスをしてしまったときのためにやりかたを残しておきます。

### Step 1. リモートでレポジトリを作成しておく
[https://github.com/](https://github.com/)でリポジトリをつくります。Readmeはありにしましょう。

### Step 2. terminalで自分のプロジェクトに移動
`cd 移動したいファイル名`というコマンドを使って、gitにあげたいプロジェクトのファイルまで移動します。

### Step 3. このファイル内でgit操作を行いたい、と命令する
コードは、`$ git init`

### Step 4. ファイルたちを追加する
`$ git add .`

### Step 5. ファイルたちをcommitをする
`$ git commit -m "First commit"`

### Step 6. リポジトリのURLを取得する
Githubにあるリポジトリを開き、Clone or Downloadと書かれた右上のアイコンからURLを取得

### Step 7. terminalにリポジトリのURLを貼り付ける
`$ git remote add origin ここにURLを貼り付ける`
そのあと、URLの承認作業を行う👇
`$ git remote -v`

### Step 8. 編集用のブランチを作成し、そこに移動する
最初からmasterにはpushしたくなかったので、edit_branchというbranchをつくり、masterからそのbranchに移動しました。
`$ git checkout -b edit_branch`

ちなみに☝️は👇を合体させたショートカットです。

```
git branch 新しいbranch名
git checkout 新しいbranch名
```

`$ git checkout -b edit_branch`と書くことで、新たなbranchをつくり、かつそっちに移動して！という命令を一行で書けるので手間が省けます:v:

### Step 9. そしてようやくPUSH!
ここでようやくPUSHにたどりつきます。👇を打ち込めば、リモート環境にファイルがどどんとあがります。道のりが地味に長いです。
`$ git push -u origin edit_branch`

ここがおかしい。これは誤解だ！などあればご教示ください👮‍♀️
【ポケモンで超ざっくり解説】オブジェクト指向

# この記事の対象ユーザー
- オブジェクト指向という言葉を知ったばかりの超初学者
- スクールなどで学び始めた駆け出しエンジニア
- オブジェクト指向を何となく理解している僕みたいなへっぽこエンジニア

**詳しく知りたくて本記事にたどり着いた人はブラウザバック推奨。
あくまでも本記事はオブジェクト指向のイメージをざっくり理解することが目的なので
具体的なコードの書き方には言及いたしません。**

# この記事でざっくり理解できるもの
- クラス
- インスタンス
- クラスの継承
- メソッド
- プロパティ

僕自身もようやく大枠を理解したばかりです。
修正箇所や説明の齟齬等ありましたらご指摘いただけると幸いです。

# オブジェクト指向とは
簡単に説明すると、
いろんな機能を持ったプログラムを一つのまとまりにして、それを使えるようにしましょうというもの。
プログラムのまとまりのことをクラスといい、
それを使えるようにしたものをインスタンスという。
これらをオブジェクト指向といい、サーバースクリプトを扱う上で必須の概念と言われています。

### 自動車で例えるなら、
クラスが自動車の設計図で、
インスタンスが設計図を元に作った自動車とよく例えられています。
よくオブジェクトとインスタンスが混合しがちですが、厳密に異なります。
この場合だと車の部品ひとつひとつを生成する型をオブジェクトといいます。

### 正直、最初はこの説明でも僕の脳みそじゃ理解できませんでした（白目）

では、理解するのに苦労したオブジェクト指向を、一瞬で分かるようにみなさん大好きなポケモンで例えてみましょう。

# ポケモンで例えるなら
今回登場していただくポケモンは僕の大好きなコイキングです。
![1834616d5ae210cc15dde465ff60afb0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527256/aee3e65f-a44e-26a6-ff13-26b5b37e14ef.png)
> [ポケモンずかん-コイキング](https://zukan.pokemon.co.jp/detail/129)

## ポケモンクラス
![trpg_character_sheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527256/73ce2952-2c23-285e-954f-0bd4095c63f5.png)


ポケモンはたくさんいます。
コイキング用のクラス（設計図）だけ作ってしまうと、他のポケモンを作る時いちいち同じ設計図を作る必要があります。
面倒くさいですね。なのでポケモン全体に共通するものをまとめてポケモンクラスというものを作ります。

- 分類
- おもさ
- タイプ
- わざ
- レベル

これらは全部のポケモンに与えられているものです。
これらのことをオブジェクト指向では**プロパティ**といわれます。
この状態では各項目は空です。枠だけ作るイメージですね。

また、ポケモン共通の動作である、


- 鳴く
- 攻撃する
- 走る
- レベルが上がる
- ワザを出す

などポケモン共通のアクションがあります。
これらのことをオブジェクト指向では**メソッド**といわれます。

**このプロパティとメソッドを集めたものをクラスといいます。**

## コイキングクラス
ポケモンクラスを作ったことでたくさんのポケモンを作れるようになりました。
ただ僕が作りたいのは全ポケモン最強と（僕から）言われているコイキングです。
先程作ったポケモンクラスを使えば簡単に作れますね。

###ポケモンクラスを継承しコイキングクラスを作る
いきなり出てきた継承。
ざっくり親クラスのプロパティやメソッドを使い回せるということです。
ポケモンクラスが持つ空のプロパティを使い、コイキングの特徴を定義していきます。


| ポケモンクラス       |       コイキングクラス | 
|:-----------------|------------------|
| タイプ        |              みず |     
| 分類           |            さかなポケモン |       
| おもさ             |              10kg |        
| わざ               |                はねる |         
| 鳴き声             |             ぎょえーー |       
| レベル          |           99lv |     

これでコイキングプロパティは定義されたので、更にポケモンクラスから継承されたメソッドを利用してワザを出したり鳴けたりアクションを起こせるようにしてコイキングクラスを定義します。

ただここまではあくまで設計段階です。
これを実体化させなければただの妄想に過ぎません。

## コイキングのインスタンスを生成
あとは簡単です。
ポケモンクラスを継承したコイキングクラスを実体化させてあげましょう。
オブジェクト指向ではこの実体化を**インスタンスの生成**と言われ、実体化したもの、つまり使えるようにしたものを**インスタンス**といいます。

これでやっとコイキングが使えるようになりました！！

# まとめ
オブジェクト指向は初学者が理解に苦しむところです。
ただこれを早い段階で理解しているだけで後々読みやすいコードが書けたり、チーム開発が捗ったりと良いことずくめです。
今回はポケモンで例えてみましたが皆さんが好きなもので例えるのが一番理解しやすいと思います。

### 最後にオブジェクト指向のまとめ
- オブジェクト指向：一つのプログラムでよく使うものをクラスとしてまとめ、インスタンス化させて実行させること。その概念。
- クラス：メソッドやプロパティをまとめたもの
- プロパティ:変数。数値や文字列などが定義されている
- メソッド:関数。値を変更させたり、文字を追加させたり、動きに関するコード
- インスタンス:クラスの中のメソッドやプロパティを使えるようにしたもの
- 継承:親クラスのもつメソッドやプロパティを子クラスでも使えるようにする
SvelteとElmを比べておきたい！ テンプレートとview編

Stelte+Elmを学習中なもので、[Vue.jsとElmを比べてみよう！ テンプレートとview編](https://qiita.com/ababup1192/items/ae2cc6f507b2403e2ef4)に便乗させていただき、Svelte編を書かせていただきます。元記事のVue.jsとElmを対比してお読みくださいませ。

## ①オブジェクトの表示

### Svelte

汎用ループを扱うことがディレクティブは`each`となります。コレクションのそれぞれ(each)を扱うイメージを持つと良いかと。

```html
<div id="app">
  <ul>
    {#each items as { message }, i}
      <li> { message }</li>
    {/each}
  </ul>	
</div>

<script>
	let items = [
      { message: 'Foo' },
      { message: 'Bar' }
	]
</script>
```

Svelteの場合、htmlコードの中に、素のJSでitemsを用意します。
私はSvelte初心者なので、REPLで確認しながら実行しています。
https://svelte.dev/repl/
![repl.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/62564472-fe15-ff85-aabd-e0daeeab64a1.png)


#### Svelteの利点
全体のコード量はVueより少し短いくらい、とっつき易いJavascriptの表現になりました。HTML側のテンプレートは少し慣れが必要ですが、数も少ないので何かを作り始める際には難しくないと思います。

#### Svelteの問題点

Vueと同じくやはりタイポをしてしまうと、リストの文字列が空っぽになってしまいます。この程度ならすぐ気付けるかもしれませんが、ベースがHtmlという元が文章を書くための表現方法のためシンタックスのミスなどは検知がしにくいですね。短くコンポーネント(ファイル)を保つなど人間がミスを起こしにくいような仕組みを工夫し続けなければなりません。正直、大規模な開発は厳しいかと。

## ② 数値の扱い

### Svelte

演算が必要なところのみ素のJavaScriptを用いて、結果をHTMLが解釈し文字列を導き出します。

```html
<div id="app">
  <ul>
    {#each items as { num }, i}
      <li> x= { incl(num) }</li>
    {/each}
  </ul>	
</div>

<script>
	let items = [
    { num: 1 },
    { num: 2 }
	]
	const incl = (x)=>x+1
</script>
```
実行結果:
![23.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/b650f83c-ff7a-dcab-a88b-140e3010f71f.png)

#### Svelteの利点

表現がとても柔軟です。最初の例と変わらずに記述することができました。

#### Svelteの問題点

柔軟が故に以下のようなミスも起こし易いです。が、REPLで直ぐに結果を確認しておけばミスは減るでしょう。

![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/2b7801c8-e3d8-e364-6009-b0a10cd58253.png)


## ③ 条件付き繰り返し

### Svelte
Vueでは何やら留意点があるようですが、素のJSでロジックを書くSvelteでは淡々と記述するのみです。

```html
<ul>
  {#each evenNumbers as x}
    <li> { x }</li>
  {/each}
</ul>	

<script>
  const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const evenNumbers = nums.filter(x => x % 2 === 0)
</script>
```
![sv.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/5b28f1b4-b072-883d-0386-30bbbdf4f6e7.png)


#### Svelteの利点

依然として表記としては短く簡単ですね。

#### Vueの問題点

なんか、このあたりVue、つらそうで可哀想。


## 私のまとめ

Svelteは初期の学習コストが低く、Vueのように独自に覚えることが少ない点は良い点です。しかし、複雑性が増した時にJSで頑張って書くことになります。Vueと同じく、副作用も柔軟に書けることの利点が問題点に跳ね返ってくることがしばしばありそうです。その時にどう工夫をして解決していくかが課題となると思います。
Elmとの比較は、元記事を読みましょう！私はある規模を越えたらelmを使う！
すなわち、Svelte+elm =[Sveltelm](https://qiita.com/e-a-st/items/83778a69863af4f1b0d0) ;-)

そして、Thanks, @ababup1192さん！
Laravel セッションを使って一時的に値を保存しよう！

## 目的

- Larvelでセッションを使う方法は理解したらとても便利だったため忘れない様にまとめる
- DBは使用せずとにかくセッションを開く部分だけを紹介する

## 考え方

- 「値に名前をつけて保存する」と「値が必要な時に名前を指定して取得する」の処理を利用するだ毛である。
- 各クライアントのセッションIDという物と値の名前がそれぞれリンクして保存される。(これは値保存の概念として知っておいて欲しいが、セッションIDがクライアントに勝手に割り振られるため知らなくても実装できる)

## 書き方の例

- 値に名前をつけて保存する方法を下記に記載する。

    ```php
    session()->put('セッションに入れる値の名前', セッションに入れる値);
    ```

- セッションに入れた値を取り出す方法を下記に記載する。

    ```php
    取り出した値を格納する変数 = session()->get('セッションに入れた値の名前')
    ```

## より具体的な例

- 「Hello world」という文字列のセッションに入れてみる。
- セッションに入れる際の値につける名前は`str`とする。
- セッションから値を受け取る時に格納する変数は`$out_put`とする。
- 任意のコントローラに下記を記載する。

    ```php
    session()->put('str', 'Hello world');
    ```
- 別のコントローラに下記を記載する。

    ```php
    $out_put = session()->get('str');
    ```
- 上記の実行後、`$out_put`には文字列「Hello world」が入っている。

## 参考文献

- [https://readouble.com/laravel/6.x/ja/session.html](https://readouble.com/laravel/6.x/ja/session.html)
[Ruby on Rails]CSVファイルを使い、データを一括でDBに読み込ませる方法

#はじめに
seed内でデータを作成するのが面倒だったので、Excel(Numbers)でデータを作成し、一括でDBに読み込ませる方法をまとめました！

【環境】
私はMacを利用しているので、初期搭載されていて、無料で使えるNumbersを使用。
（重複セルを見つけい場合や複雑な処理はExcelを使用。）
#使い方
##CSVファイルを作成


1. 1行目にキーとなる任意の名前をつける。（対応するDBの項目名と同じにすると分かりやすい）
2. 2行目以降にデータを打ち込む。


<img width="1440" alt="スクリーンショット 2020-03-22 18.14.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605913/60822888-0dab-7adf-420c-b7d10b021f63.png">

3.データを作成したら ファイル → 書き出す → CSVを選択
<img width="1440" alt="スクリーンショット 2020-03-22 18.25.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605913/a38911b3-4a7c-b9c7-3521-f10a996717da.png">

4.案内に沿って、次へ
<img width="1440" alt="スクリーンショット 2020-03-22 18.31.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605913/0efecbff-26ff-5907-9f80-04d45d992776.png">

5.ファイル名（任意）と保存先（任意）を指定して書き出す
<img width="1440" alt="スクリーンショット 2020-03-22 18.32.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605913/bdacde38-a43a-f695-8213-d10dd7f20ad0.png">

##seedファイルの準備
先ほど作成したファイルをDBディレクトリの中に置く
###seedファイルの編集
```ruby:db/seeds.rb
require "csv" #csvファイルを読み込む為に記載

#movieをcsv経由で追加する
CSV.foreach('db/movies.csv', headers: true) do |row|
#'db/movies.csv'←先ほど作成したCSVファイルのパスを指定
# headers: true ←Numbersファイルの先頭行を読み込む
  Movie.create( #データ挿入先のテーブル名を指定
    title: row['title'],
    #title:←テーブルの項目名を指定
    #row['title']←対応するNumbersファイルの先頭行を指定
    release: row['release'],
    production: row['production'],
    screening_time: row['screening_time'],
    genre: row['genre'],
    status: row['status'],
  )
end
```

##seedファイル読み込み
ターミナルで **rails db:seed** を実行

```
rails db:seed
```

コマンドを実行したら、rails c で結果を見てみよう！

###上手くDBにデータが入らない場合は以下を試してみてください！

* CSVファイルを開いてみて、1行目にキーとなる任意の名前が記載されているか、間違いがないか確認する                    
  （1行目にシートの名前、2行目にキーが記載されている場合がある）
* **rails db:migrate:reset** → **rails db:migrate** → **rails db:seed** でリセットをかけてみる
* CSVファイルの記載する項目名の順番と、DBの項目定義の順番を合わせてみる                      
  例.　DBの項目定義順が **title, release, production,...**なら                         
     CSVの記載項目順も **title, release, production, ...**にする                  
  （私の場合これで上手く入るようになりました。）



**以上となりますが何か間違った情報など提供してましたらコメント欄でお伝えください！**
>参考
>[【Rails】rake seedコマンドでCSVファイルからDBに読み込ませる方法](https://qiita.com/kumasuke/items/545afaf5876d3dc52670)
historyオブジェクトについて

# 課題
- historyオブジェクトを利用して、ページをリダイレクトしたいがreduxを利用すると上手く動かない。
- console.logを仕込んでみると、どうやらhistoryオブジェクト自体がpropsとして渡されていないようだった。

# 環境
- node v12.7.0
- express 4.16.1
- react 16.12.0
- npm 6.10.2
- macOS Mojave 10.14.4

# 解決方法
reduxとreact-router-domのみを利用するとhistoryが利用できないので、reduxとreact-routerの統合が必要となる。
上記を実現するためにConnected React Routerというライブラリをインストールする。
（react-router-reduxは現在、非推奨）
[引用元/@nacam403さんの記事](https://qiita.com/nacam403/items/22baa0549361777f8c6d)

# 実装の流れ
- まず、npmで上記のライブラリを全てインストールします。

```
npm install --save redux
npm install --save react-router-dom
npm install --save connected-react-router
npm install --save redux-thunk
```
- index.jsを実装します。

```javascript:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux'
import { createBrowserHistory } from "history"
import { routerMiddleware, ConnectedRouter } from 'connected-react-router'
import thunk from "redux-thunk"
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducers from './reducers'

const history = createBrowserHistory()

const store = createStore(
    rootReducers(history),
    applyMiddleware(
      thunk,
      routerMiddleware(history),
    )
)

ReactDOM.render(<App store={store} history={history} />, document.getElementById('root'));

serviceWorker.unregister();
```

- App.jsを実装します。

> AddFormでデータを登録して、CharacterListで一覧を表示する、というシンプルな構成です。

```javascript:App.js
import React, {Component} from 'react'
import {Switch, Route} from 'react-router-dom'
import { Provider } from "react-redux"
import { ConnectedRouter } from 'connected-react-router'
import AddForm from './crud_components/AddForm'
import CharacterList from './crud_components/CharacterList'


class App extends Component {
  render() {
    return (
      <Provider store={this.props.store}>
        <ConnectedRouter history={this.props.history}>
          <Switch>
            <React.Fragment>
              <div className="App">
                <div className="container">
                  <Route exact path="/addform" render={() => <AddForm store={this.props.store} history={this.props.history}/>}/>
                  <Route exact path="/characterlist" render={() => <CharacterList store={this.props.store}/>}/>
                </div>
              </div>
            </React.Fragment>
          </Switch>
        </ConnectedRouter>
      </Provider>
    );
  }
}

export default App;
```

- AddForm.jsを実装します。

> データ登録時のメソッドのみ抜粋します。ここでリダイレクトしたいpathをhistoryにpushします。

```javascript:AddForm.js
   onSubmit(e){
        e.preventDefault() // フォームsubmit時のデフォルトの動作を抑制

        const newCharacter = {
            name: this.state.name,
            age: this.state.age
        }
        const store = this.props.store;

        character(newCharacter).then(res => {
            if (res) {
                this.props.history.push('/characterlist')
                store.dispatch(initializeForm()) // submit後はフォームを初期化
            }
        })
    
    }
```

# まとめ
これでhistoryが利用できるようになりました。
しかし、historyでリダイレクトする際にstoreのデータを引き継ぎできないという課題が残るため、引き続き調べていきます。
[TLA+] PlusCal (P-Syntax) マニュアル日本語版

英語のまま読むのは辛かったのでだいたい訳しました。
翻訳自体はほとんどGoogle翻訳任せだけど、それでもかなりかかった。

# 動機

数ヶ月 Alloy を使ってきて、そろそろ他にも手を出そうと思った。
ダイ・ハード３ ジャグ問題のときに改めて TLA+ 記事を読んでみたら、TLA+そのものもPlusCalも、以前よりだいぶわかりやすそうに感じた。
しかし、[Learn TLA+](https://learntla.com/pluscal/) とか見ても、実際に何か書いてみようかと思うと思うとやっぱりマニュアルを読まなきゃわからなかった。
で、マニュアル読むかとなると、英語力と数学力のなさで理解度が上がらないわけで。

# がんばった

というわけで、３連休をGoogle先生と過ごしてだいたい訳しました。
これで英語力の方はなんとかクリアできるぞ。
ちなみに両含意な iff くらいは文中なんの断りもなく普通に入ってましたよ。
それ以外の数学面でも「こうだ」と書かれた式がわからなかったり、ポンと出てくる見慣れない記号を UNICODE で探して意味がわかったり。（Index 中で触れられている意味について Index 代わりにまとめたので、記号の意味がわからない場合は参照してください）

# リンクはこちら

量が多いこともあって、Qiitaにそのまま載せることはできません。
HTML版を置いておきますので、気になる方はどうぞ。
ここはこう訳すべきだとか教えていただけるとうれしいです。

- [A PlusCal User’s Manual P-Syntax* Version 1.8 (J)](https://drive.google.com/open?id=1WiS4J7zBmbBIMvJrOBeQjE8B5V23Ckmo)  
（最終更新:2020/3/24）
Windows で history コマンドっぽいものが使いたい

## 1. 使用

使い方は、以下の通りです。`history` の頭に `cat $` がつきます。

``` 
cat $history
```

例えば、ある単語 foo を検索したい場合は

```
cat $history | grep foo
```

## 2. 設定

### Step 1. $profile を開きます。

```
notepad $profile
```

### Step 2. 以下の内容を追記します。

```
$history="C:\Users\{ユーザ名}\AppData\Roaming\Microsoft\Windows\PowerShell\PSReadLine\ConsoleHost_history.txt"
Set-Alias grep Select-String
```

### Step 3. ターミナルを再起動します。

## 3. 補足

`$profile` は sh の ~/.profile や bash の ~/.bashrc に該当するような感じです。

`Set-Alias` はファイルパスには使用できなかったので、変数に代入する形にしました。

* [create alias for path - Stackoverflow](https://stackoverflow.com/questions/29890426/create-alias-for-path)

`Get-Alias` で既に設定されているエイリアスを確認することもできます。