OmniAICreator/Qiita-1.07M huggingface dataset:
Elasticsearch > Logstash > 親子関係データをLogstashで格納 



# はじめに

`Join field type`の導入に伴い、親子のリレーションシップが新しい形式に更新されました。
Logstashを使用して、親と子の結合に使用されるフィールドを指定する方法をメモします。

本稿はほぼ以下の意訳です。
[How to create a parent using the new join type with logstash - Elastic Stack / Logstash - Discuss the Elastic Stack](https://discuss.elastic.co/t/how-to-create-a-parent-using-the-new-join-type-with-logstash/119523)

詳しくは別途また記事を書く予定。

## マッピング追加

`Join field type`を作成するためIndexにマッピングを設定します。

```
PUT logstash-index-name
{
  "mappings": {
    "doc": {
      "properties": {
        "join_field": { 
          "type": "join",
          "relations": {
            "customer": "actions"
          }
        }
      }
    }
  }
}
```


## Logstashでの設定追加

Logstash経由で親を追加することができます。
filterに以下を追加します。

```
mutate {
	add_field => { "join_field" => "customer" }			
}
```


子の設定では以下のように追加します。
パイプラインは親と子で分けた方がよさそうです

```
mutate {
	add_field => {"[join_field][name]" => "actions"}
	add_field => {"[join_field][parent]" => "%{parent_id}"}
}
```


子の設定の場合には
また、LogstashのOutputで`routing`IDを追加する必要があります。


```
if [type] == "child_actions" {		
	elasticsearch {
		hosts => [ "localhost:9200" ]
		index => "logstash-index-name"
		routing => "%{parent_id}"  <-- here!
	}		
}
```


これで、すべての子ドキュメントに "join_field "がネストされたフィールドとして追加されるようになりました。


詳しくは別途また記事を書きます。




参考
[How to create a parent using the new join type with logstash - Elastic Stack / Logstash - Discuss the Elastic Stack](https://discuss.elastic.co/t/how-to-create-a-parent-using-the-new-join-type-with-logstash/119523)

[Elasticsearch Reference [7.9] » Mapping » Field data types » Join field type](https://www.elastic.co/guide/en/elasticsearch/reference/current/parent-join.html)
【Salesforce】キャンペーンについて

#キャンペーンとは
<ul>
<li>マーケティング活動を追跡できる機能。</li>
<li>マーケティング活動を分析できる機能。</li>
</ul>
マーケティングプログラムを階層ごとにグループ化することで<B>大規模なキャンペーン結果の可視性</B>を高めることができる。

##キャンペーン階層について
階層を使ってマーケティング戦略ごとにキャンペーンをグループ化することができる。
時間によってキャンペーンをグループ化することができる。
最初の階層レベルを年次会議などの大規模イベントに使用することでグループ化することができる。

##レコードタイプ
レコードタイプを使用することで実行するキャンペーンタイプごとにカスタマイズされたキャンペーンレコードを作成することができる。

##キャンペーンメンバー
キャンペーンに属するリードと取引先責任者のこと。
キャンペーンメンバーのレコードはキャンペーンとリードを関連付けたときに作成されるレコード。
キャンペーンとキャンペーンメンバーは主従関係にある。
##キャンペーンメンバーの追加方法
<ol>
<li>レコード詳細ページからリード、取引先責任者を個別に追加する。</li>
<li>キャンペーンメンバー関連リストのドロップダウンメニューから「キャンペーンメンバーの管理」を選択して追加</li>
<li>「キャンペーンメンバー」関連リストで「リードの追加」を選択してリードを追加</li>
<li>「キャンペーンメンバー」関連リストで「取引先責任者の追加」を選択し、取引先名を検索することで取引先から取引先責任者を追加</li>
<li>取引先詳細ページの「取引先責任者」関連リストからメンバーを追加</li>
<li>リード、取引先責任者リストビューからメンバーを追加</li>
<li>リードまたは取引先責任者レポート結果からメンバーを追加する</li>
<li>データインポートウィザードを使用して既存のリード、取引先責任者をキャンペーンにインポートする</li>
</ol>

##キャンペーンインフルエンス
商談に影響のあったキャンペーンを関連付けする機能。
###自動関連付け
自動関連付けが有効化されている場合、商談に取引先責任者を登録されたときに商談のキャンペーンインフルエンスに自動的にキャンペーンが追加される。

##主キャンペーンソース
キャンペーンインフルエンスの中で最も効果が高いとされるキャンペーンのこと。

#キャンペーンに関する問題
###Q1. 許可されたキャンペーン階層の最大数はいくつか
<ol>
<li>無限</li>
<li>2個</li>
<li>5個</li>
<li>1個</li>
</ol>
<br><br><br><br>
####A1.
3.5個

<br>
##Q2. 商談オブジェクトとキャンペーンオブジェクトの間の関係を作成するために使用されているのは何か？(回答2つ)
<ol>
<li>主キャンペーンソース項目</li>
<li>キャンペーンインフルエンスリスト</li>
<li>キャンペーン階層項目</li>
<li>商談セールスプロセス</li>
</ol>
<br><br><br><br>
####A2.
1. 主キャンペーンソース項目
2. キャンペーンインフルエンスリスト

<br>
##Q3. マーケティングユーザは、キャンペーンレコードにメンバーの管理ボタンを使用して何を行うことができるか？(回答2つ)
<ol>
<li>すべてのキャンペーンメンバーを含むカスタムレポートを作成します。</li>
<li>キャンペーンに既存の取引先責任者を関連づける。</li>
<li>新しいリードをインポートして、キャンペーンに関連付ける。</li>
<li>既存の商談をキャンペーンに関連づける。</li>
</ol>
<br><br><br><br>
####A3.
2.キャンペーンに既存の取引先責任者を関連づける。
3.新しいリードをインポートして、キャンペーンに関連付ける。

<br>
##Q4. マーケティングユーザは新しいキャンペーンを作成する必要がありますが、新しいボタンはキャンペーンのホームページから表示されません。システム管理者は、ユーザがキャンペーンオブジェクトの「作成」プロファイル権限を持っていることを確認しました。システム管理者はどのように問題を解決する必要がありますか？
<ol>
<li>ユーザレコードの[マーケティングユーザ]チェックボックスをオンにします。</li>
<li>「キャンペーンの管理」プロファイル権限を選択します。</li>
<li>ユーザにキャンペーンの「読み取り」プロファイル権限を付与します。</li>
<li>ページレイアウトを使用して、ページレイアウトに[新規]ボタンを追加します。</li>
</ol>
<br><br><br><br>
####A4.
1.ユーザレコードの[マーケティングユーザ]チェックボックスをオンにします。

<br>
##Q5. 取引先オブジェクトとリレーションがないオブジェクトはどれですか?
1.取引先責任者
2.商談
3.キャンペーン
4.ケース
<br><br><br><br>
####A5.
3.キャンペーン

<br>
##Q6. 管理者は、マーケティングユーザプロファイルのすべてのユーザにキャンペーンのすべて表示権限を付与するように求められました。これはどの方法で達成できますか？(回答2つ)
1.「マーケティングユーザ」チェックボックスを有効にします。
2.マーケティングユーザプロファイルを変更します。
3.すべてのユーザに権限セットを割り当てます。
4.すべてのユーザをカスタムプロファイルに割り当てます。
<br><br><br><br>
####A6.
1.「マーケティングユーザ」チェックボックスを有効にします。
2.マーケティングユーザプロファイルを変更します。

<br>
##Q7. 販売ユーザはどのようにして商談をキャンペーンに関連付けることができますか？(回答2つ)
1.商談の主要なキャンペーンソースを選択します。
2.キャンペーンの影響度関連リストを機会に使用します。
3.商談の作成時にキャンペーンレコードタイプを選択します。
4.商談のキャンペーン階層関連リストを使用します。
<br><br><br><br>
####A7.
1.商談の主要なキャンペーンソースを選択します。
2.キャンペーンの影響度関連リストを機会に使用します。

<br>
##Q8. キャンペーンインフルエンスにより、ユーザは何ができますか？
1.商談に貢献したキャンペーンについて報告します。
2.キャンペーンのキャンペーンメンバー統計を要約します。
3.各キャンペーンが商談に与える影響の割合を調整します。
4.キャンペーン階層全体を表示します。
<br><br><br><br>
####A8.
1.商談に貢献したキャンペーンについて報告します。

<br>
##Q9. ユーザが特定のマーケティングプログラムまたはイニシアチブ内でキャンペーンをグループ化できるようにする機能はどれですか。
1.キャンペーンメンバー
2.キャンペーンの影響
3.キャンペーン一覧
4.キャンペーン階層
<br><br><br><br>
####A8.
4.キャンペーン階層
Yolov5を利用した表情検知

## 今回の内容
今回はYolov5を利用した表情検知プログラムについて記入をさせて頂きたいと思います.
データセット規約により学習データの経過画像を載せることができませんのでご了承ください.
## モデルの内容
表情をpositive or negativeの2つを検知する為のモデルを構築する.
モデルは以下のものを使いました.[1]

このデータセットをもとに目視でpositive or　negative のデータセットを作成しました.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/4f559a2f-bc07-fabf-03ca-18e1320d5df4.png)
※学習させる前のモデル作成段階でわかっていたことですが,今回は女性の画像のみ,さらにカテゴリに偏りがあるのでnegativeにどうしても寄ってしまいやすいという問題があるのではないかとこの段階で推測しました.
## 学習
part1(epoch50)
![results.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/8c4694d7-c4a2-5833-7a0c-b5cd6a15fb4b.png)
part2(epoch1000)
![results.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/c38588ff-1bb2-6ca8-f3d6-2fa1922fcc53.png)

結果はこのようになりました.

##　テスト
今回は,女性の画像のみで学習させたので男女で画像4枚でテストをしてみました.
### part1(epoch50)
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/b3eab28c-f027-9457-6207-7d758129650d.jpeg)
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/5c83539b-1d21-16a1-8191-237d3e0c25dc.jpeg)
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/9076102e-2a40-7d08-2df8-ab005650fbce.jpeg)
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/1dd59ee5-a2c1-fbfa-fe43-1c438943c2ae.jpeg)
### part2(epoch1000)
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/53e24e01-da4f-dc9a-f229-998e5b45f3d5.jpeg)
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/ce46b8c1-448b-a164-447e-0835699fbba5.jpeg)
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/c4b4bea7-88f6-33e9-c2d4-cb4ac4c11aaa.jpeg)
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/4b4376cd-656a-43b2-238c-3df1858414cc.jpeg)
※恐らく茶色のやつはnegativeを表しています.
## 結果
今回は学習モデルにいろいろな偏りがあったので,精度があまりよくなかったですが体感としてyoloを利用した表情分析はできそうなのでモデルを自作してもう一度挑戦してみたいと思います.

## 使用データセット
>[1] The Japanese Female Facial Expression (JAFFE) Dataset
<pre>
Michael J. Lyons, Miyuki Kamachi, Jiro Gyoba.
Coding Facial Expressions with Gabor Wavelets (IVC Special Issue)
arXiv:2009.05938 (2020) https://arxiv.org/pdf/2009.05938.pdf
</pre>
２つのベクトルのなす角度を求める

## 解説
$\vec{0}$ではないベクトル $\vec{a} =(a_1,a_2), \vec{b}=(b_1,b_2)$ のなす角度を$\theta$とすると次が成り立つ。

```math
\begin{align}
\cos\theta &= \frac{\vec{a}\cdot\vec{b}}{|\vec{a}||\vec{b}|} \\
&=\frac{a_1 b_1 + a_2 b_2}{\sqrt{a_1^2 + a_2^2}\sqrt{b_1^2 + b_2^2}}
\end{align}
```

ここで求められたcos$\theta$の逆余弦（アークコサイン）を求めれば$\theta$が求まる。

## コード
```swift
func angleBetween(_ vec1: simd_float3, and vec2: simd_float3) -> Float {
   let cosT = (vec1.x * vec2.x + vec1.z * vec2.z) / (sqrt(pow(vec1.x, 2) +
              pow(vec1.z, 2)) * sqrt(pow(vec2.x, 2) + pow(vec2.z, 2)))
   let deg = acos(cosT) * 180 / Float.pi
   return deg
}
```
```swift
let v1 = simd_float3(20, 0, 20)
let v2 = simd_float3(0, 0, 20)
let angle = angleBetween(v1, and: v2)

print(angle) //45度
```
Windows10で確実にBIOS (UEFI) に入る方法

# 状況
hpのPCでBIOS (UEFI)に入る必要があったが、ネットにある情報通りにしても一向に入れなかった。

情報には “コンピュータに電源を投入し、hpロゴが表示され、画面下に「Press the ESC key for Startup Menu」と表示されている間にF10を押下する。”
と書いてあったが、何度F10を押してもWindowsが起動するだけで、よくよく見てみると自分のPCでは「Press the ESC key for Startup Menu」自体が表示されない。

# 対処
確実にUEFIに入る方法を見つけたので、ここに記録する。

1. 「スタートボタン」を押す。
2. 「設定（歯車マーク）」を押す。
3. 「更新とセキュリティ」を押す。
4. 左側のメニューの「回復」を押す。
5. 右側の「今すぐ再起動する」を押す。
6. PCが再起動され、「オプションの選択」画面が表示される。
7. 「トラブルシューティング」を押す。
8. 「詳細オプション」を押す。
9. 「UEFIファームウェアの設定」を押す。
10. BIOS (UEFI) 画面が表示される。


# 参考
[Windows 10でUEFI (BIOS) 画面を起動する手順 - ぼくんちのTV 別館](https://freesoft.tvbok.com/win10/access_uefi_bios_setup.html "タイトル")
Unity 2D 横移動

AキーとDキーで横移動の場合

    public float speed = 1.0f;

    void Update(){
        if (Input.GetKey(KeyCode.A)){
            transform.position += Vector3.left * speed * Time.deltaTime;
        }

        if (Input.GetKey(KeyCode.D)){
            transform.position -= Vector3.left * speed * Time.deltaTime;
        }
    }

Unity初心者です。
もっと楽な書き方あったら教えてください！
pyenvにpythonの実行コマンドPATHが通らなくて詰まった話

# 概要

pyenvのPythonに実行PATHを通したかったけど、既知の方法では全くうまくいかず、つまりに詰まって、1日溶かしてしまった話。
下記のことを行ったとき、この現象が発生しました。

1. TimeMachineを用いて、既存MacbookProからMac miniへ環境移行を行う
2. 以前の環境ではpyenvを用いていたので、`which python` にて `/Users/USER NAME/.pyenv/shims/python`になってほしい
3. なぜか、pythonのPATHが `/usr/bin/python`とMacのデフォルトになっていた。。。

というわけで、pythonのPATHを`/Users/USER NAME/.pyenv/shims/python`に通し直す話。これやらんとpythonのversionが変わらなくて不便でしゃあない。

## 既知の手順
zshを用いていたので、.zshrcには下記の設定はもちろんしてある。(参考: https://github.com/pyenv/pyenv)

```sh
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
```

理論上は`source .zshrc`を行えば、PATHは確実に通るはず。。。
確認してみると。。。

```zsh
$ which python
/usr/bin/python
```
Huh?? FUCK!!! 通ってないやんけ！！

ははーん、あれだな。PATHの順序がおかしいのでは？

```zsh
$ vim /etc/paths

/usr/local/bin
/usr/bin
/bin
/usr/sbin
/sbin
```

ちゃんと、`/usr/local/bin`の順序が先に来とるな。。。。
ちなみに`/usr/bin`が先に来てると、そっちの実行ファイルが優先的にPATHが通ります。

こうなったら、脳死でpyenvをuninstallして、installしなおそう。
ただ単に `brew uninstall pyenv` とかやっても設定ファイルがあちらこちらにあるので、
下記の記事を参考に全部潰しました。
https://qiita.com/yasudadesu/items/1177aa93229e7c4b7a45

んで、改めて.zshrcを`soruce .zshrc`しても、なお治らず。。。
はい、降参しました。

## 神記事があった

似たような事象を起こした方が記事にしてくれていた、多大なる感謝をm
https://dev.classmethod.jp/articles/pyenv-command-not-found/

要は、リンクの再関連付けをしてみると良いとのこと

```zsh
$ brew unlink pyenv
$ brew link pyenv
$ source .zshrc
```

来てくれ。。。祈る気持ちでPythonのPATHを確認。

```zsh
$ which python
/Users/USER NAME/.pyenv/shims/python
```

やったぜ！！！

## 最後に

先人は偉大
WSL2でX Server(VcXsrv)を使いたい！

# 背景
WLS2上でのX Serverの設定について解説します。
何番煎じという感じですが、インターネット上の記事を参考に設定したところ、自分の環境では動かなかったので、自分なりのやり方を記しておきます。

# 必要なもの

* [WSL2環境](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)
* Xserver (例：[VcXsrv](https://sourceforge.net/projects/vcxsrv/))

# X Serverの設定
VcXsrv設定は以下のページがとても丁寧に解説されているので、ご参照ください。VcXsrvの設定ですがXmingでもほとんど同様のはずです。
[WSL2におけるVcXsrvの設定 #VcXsrvの自動起動設定](https://qiita.com/ryoi084/items/0dff11134592d0bb895c#vcxsrv%E3%81%AE%E8%87%AA%E5%8B%95%E8%B5%B7%E5%8B%95%E8%A8%AD%E5%AE%9A)

# WSL2の設定
ここがインターネット上に載っているやり方では、自分の環境では動かなかった箇所になります。
インターネット上では、環境変数DISPLAYに

* ipconfig.exeの”イーサネット アダプター vEthernet (WSL)”のIPv4アドレス
* /etc/resolv.confのnameserver

などを設定すると良いとありますが、自分の環境ではX Serverへの出力時に
Error: Can't open display: [IPアドレス]
となってしまいました。

そこで、ipconfig.exeのWindows側(”イーサネット アダプター イーサネット”)のIPv4アドレスを記載したところ、正常に動作しました。
シェル起動時に自動で設定するコマンドは下記です。

```bash:~/.bashrc
export DISPLAY=`ipconfig.exe | awk '/IPv4.*192.168.[0-9]{,3}.[0-9]{,3}/ {sub("\r", "", $NF); printf("%s:0.0", $NF);}'`
```

# まとめ
Windows上でX Serverを起動しているので、当たり前といえば当たり前かもしれませんが、Windows側のIPアドレスを環境変数DISPLAYに設定することで、X Serverが動作しました。
むしろ、ほかの方々はなぜWSL2のIPアドレスを設定してX Serverが動作しているのか分かりません。。。
ご存じの方がいらっしゃいましたら、教えていただけると幸いです。
lazyloadの使い方

#lazyload
###1. GitHubからファイルをダウンロード
[lazyloadのダウンロード先](https://github.com/aFarkas/lazysizes)

###2. ファイルを読み込む
```html
<script src="lazysizes.min.js"></script>
```

###3. クラスをつける
```html
<img data-src="画像パス" class="lazyload">
```
エンジニア転職8ヶ月目の事実と所感

2020年3月に、34歳でエンジニアに転職しました。
同2月末まで、前職に努めていましたが、2月は有給休暇を使って、
オンライン教材[スキルハックス](https://skill-hacks.co.jp/skillhacks/?gclid=Cj0KCQjw59n8BRD2ARIsAAmgPmJjK2CgX9iu1bFJSulTSF7nMrspf5pbyBGWCU4YdiTVvfzNOSLepDQaAjfwEALw_wcB/)を受講しました。
スキルハックスを進めながら、転職活動をして、3月4日から実際に働き始めることができました。
転職活動は、主に[Wantedly](https://www.wantedly.com/projects?type=mixed&page=2&occupation_types%5B%5D=jp__engineering&hiring_types%5B%5D=mid_career&fields%5B%5D=jp__web_engineer&locations%5B%5D=%E5%8D%83%E8%91%89%E7%9C%8C&locations%5B%5D=tokyo&keywords%5B%5D=Rails/)を使っていました。
１１０社ほど応募して、30社面接して、最終的に受託開発の会社に3月3日に内定を頂き、翌日から働くことになりました。
他にもSESの会社など数社受かりましたが、自社開発・受託開発の会社は初めてで、まだ面接してなかった企業様は全てお断りして即決しました。

また、10月末現在は入社して８ヶ月くらい経ちます。実際に最初の１ヶ月目は研修で、ruby/rails/sql/html/cssなどを行い、２ヶ月目からは、実際に案件にアサインしました。アサインして最初の案件はちょうどテストの時期であったため、２ヶ月くらいはひたすら検証を行っていました。それからは、別のPJにアサインが決まり、railsで開発することになりました。
10月現在はまた別の案件でrailsで開発しています。

今個人的に感じることは、以下のような点です。

・１５分考えて分からなければ質問すると教えられたが、実際は数時間考え込んでしまうこともある。

・規定の就業時間は１０時〜１９時だが、実際は７時半から23時くらいまで自発的に働いています。

・休みも基本勉強やPJの開発を進めています。

・就業中に休憩を取らずに集中力が切れてしまうことがあるため、こまめな休憩は意識してとってます。

・スキルは急激には伸びないが、分からないところはまとめて、質問して、一つづつ、分からない所が
　わかってきて、解決するための調べ方や、手順が徐々に分かってきた状態です。

・でもポテンシャルの高い人もいて、そういう人と同じプロジェクトだと、同期で入ったのに、
　なんでこんなに違うんだとめげてしまうこともあります。→でもそれはあまり気にしないで、
　自分のペースで、分からないことを分からないままにしないように一歩一歩進んでいくのが
　いいと思います。1年2年で終わるわけではないので、真剣に取り組むが、あまり深刻に捉え
　すぎないように、精神のバランスを保つことも大事です。

エンジニア転職するときは年齢は若い方がいいです。でも３０代半ばでも、転職は可能です。
生きる意味は何かにチャレンジすることだと思います。
２０代はキックボクシングでチャンピオン目指してやっていました。実際にはいくつもある団体の一つの
団体でしかベルトは取れませんでしたが、、、

もし迷ってる方がいたら、行動してみるといいかもしれません。実際には行動することでしか
分からないことがたくさんありますし、大変なこともありますが、それぞれ自身の人生を
悔いなく全うしていただけたら幸いです。
Herokuへデプロイする手順

#Herokuへデプロイする手順
```java:ターミナル
brew tap heroku/brew && brew install heroku
```
```java:ターミナル
heroku --version
```
```java:ターミナル
# Herokuへログインするためのコマンド
% heroku login --interactive
  => Enter your Heroku credentials.
# メールアドレスを入力し、エンターキーを押す
  => Email:
# パスワードを入力して、エンターキーを押す
  => Password:
```
```java:Gemfile
# ファイルの一番下の行に追記する
group :production do
  gem 'rails_12factor'
end
```
```java:ターミナル
# Gemをインストール
% bundle install
```
```java:ターミナル
% git add .
% git commit -m "gem rails_12factorの追加"
```
```java:ターミナル	
% heroku create アプリケーション名
```
```java:ターミナル
% git config --list | grep heroku
```
```java:ターミナル
% heroku addons:add cleardb
Creating cleardb on ⬢ アプリケーション名... free
Created cleardb-vertical-00000 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation
```
```java:ターミナル
% heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL`
```
```java:ターミナル
% heroku config:set DATABASE_URL=mysql2${heroku_cleardb:5}

# 以下、コマンドの実行結果
Setting DATABASE_URL and restarting ⬢ アプリケーション名... done, v◯◯
DATABASE_URL: mysql2://000000000000:0aa0000@us-cdbr-east-02.cleardb.com/heroku_aaa00000000?reconnect=true
```
```java:ターミナル
% EDITOR="vi" bin/rails credentials:edit
```
```java:ターミナル
% heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
```
```java:ターミナル	
% heroku config
```
```java:ターミナル
% git push heroku master
```
```java:ターミナル
% heroku run rails db:migrate

```
#公開を確認
```java:ターミナル
% heroku apps:info

===ajax-app-123456
Addons:         cleardb:ignite
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/アプリケーション名.git
Owner:          sample@sample.com
Region:         us
Repo Size:      165 KB
Slug Size:      56 MB
Stack:          heroku-18
Web URL:        https:/アプリケーション名.herokuapp.com/
```
#現場からは以上です！
laravelをバージョン指定(laravel6)でインストールする方法

#laravelをバージョン指定してインストールした
個人アプリ開発に向けてPHPの学習を行っている最中にlaravelのバージョンを最新バージョンインストールしていた事で、学習中の教材の内容とハンズオンでの挙動が噛み合わなくなってしまった為、バージョンを６系統でインストールし直したかったので、備忘録として記述します。

##早速インストールの方法
```:ターミナル

composer create-project --prefer-dist laravel/laravel blog "6.*"
```
これだけです

##バージョン６にしたかった理由
・バージョン６はLTS（= Long Term Support)でサポート期間が長かった為
・現在は約半年の周期でバージョン変更が行われているが現時点（2020/10/26)でLTSの最新がバージョン６の為
・その為かLaravelに関する教材もバージョン６の物が多い気がしたので、まずは６でしっかり学習したかった為

と言った感じです。

もし同じ様なイメージで学習を考えられている方の参考になれば幸いです。

ちなみに
--prefer-distオプションでzipでインストールされるので、処理時間が高速で行われるそうです。

###インストール後のバージョン確認

```:ターミナル
php artisan -V

Laravel Framework 6.19.1
```

無事にバージョン指定できました。
ワンライナーで最大公約数

ちょっとズルかもしれませんが、因数分解コマンドfactorを使います。
あと、プロセス置換を使うのでbash推奨です。

```bash
comm -1 -2 \
    <(factor 123456789 | tr " " "\n" | sort) \
    <(factor 987654321 | tr " " "\n" | sort) \
| awk 'BEGIN{r=1}{r*=$1}END{print r}'
```

それぞれの数をfactorで素因数分解し、空白区切りを行区切りに変換してから行のsort。
commで共通行を抽出したのち、awkを使って共通行の掛け算を行っています。
MathJaxを用いてTeX記法で入力した数式をリアルタイム(非同期)で表示する方法

### やりたいこと

- 入力した内容をリアルタイムでプレビュー欄へ表示したい
- TeX記法で入力した数式は数式としてリアルタイムで表示する
- 通常の文章は通常の文章としてリアルタイムで表示する

### やったこと

- 記入欄と表示欄（プレビュー）を用意
- TeX記法の入力ができるようにMathJaxを導入
- リアルタイム（非同期）で表示欄（プレビュー）に出力されるようJavaScript実装

### コピーアンドペースト

下記文章を下図の左の欄へコピーアンドペーストしてください。
右側のプレビュー欄にTeX記法で記載した部分は数式に通常の文章はそのまま文章として表示されます。

```tex:コピーアンドペースト用の文章
オイラーの公式は下記
$ e^{i\theta} = \cos\theta + i\sin\theta $
数式は数式に文章は文章としてプレビュー欄に表示されます。
```

上記を貼り付けた場合、下図のようになります。
![コピーアンドペーストしたときのプレビュー欄](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114363/07e3ab3e-5e0d-e33c-6f53-9cf1a561fe89.png)

### 実際の画面

コピーアンドペースト用の文章を左の欄へ貼り付けてみてください。
文章を左の欄へ各人で記入していただいても動作します。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="shimizukosuke19910320" data-slug-hash="ZEOexQd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mathjax">
  <span>See the Pen <a href="https://codepen.io/shimizukosuke19910320/pen/ZEOexQd">
  mathjax</a> by ShimizuKosuke19910320 (<a href="https://codepen.io/shimizukosuke19910320">@shimizukosuke19910320</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 所感

TeX記法で記述した数式を非同期（プレビュー）で出力するための記事が少なく悪戦苦闘したため、この記事を書きました。mathjax-railsなども調べましたが、うまくいかず、、、この方法にたどり着きました。
今後、TeX記法についても記事を書きたいと思います。

### TeX記法
https://qiita.com/kosuke_shimizu/items/66b325fd16aa6fcbdc32

### 参考記事

[MathJaxの使い方](https://gilbert.ninja-web.net/math/mathjax1.html)
[Webの数式表現](http://www.ic.daito.ac.jp/~mizutani/html/mathexpress.html)
[Rails] [メモ] <% %>に＝をつける時とつけない時

この記事ではmacOS Catalina10.15.6にインストールしたRuby 2.6.5を使っています。
ヘルパーメソッドをビューファイルで記述する時、ふとした瞬間に<% %>の＝をつけるかつけないかで間違ってしまうので、忘備録として書きました。

# <% %>の場合
- ビューファイルで__出力させたくない時__に使います。
- 例えば、__if文__などの条件分岐や__each文__の繰り返し処理の時などです。

```ruby
#if文
<% if @name == 'hoge' %>
<% end %>

#each文
<% @books.each do |book|　%>
<% end %>
```

# <%= %>の場合
- ビューファイルで記述した処理を__出力させたい時__に使います。

```ruby
<%= book.title %>

<%=form_with model: @user, url: user_registration_path, class: 'registration-main', local: true do |f| %>
<% end %>

<%= f.label :email %>

<%= render 'shared/error_messages' %>
```

# まとめ
ざっとまとめると__<%= %>方が圧倒的に多い__ですね。
要するに、__ifなどの条件分岐やeachのような繰り返し処理は＝をつけない__で、その他の画面に出力する処理はつけても良いということです。
クロージャー を理解をしよう！

今回は、クロージャー について学習したので、アウトプットしていきます
※以下の内容は、学習内容のアウトプット用のため、誤りがある場合があります。予めご了承ください

#クロージャーとは？
***クロージャー とは、再利用可能なひとまとまりの処理のことをいいます。***
関数はクロージャーの１種であるため、共通の使用が数多くあります。
関数を使用するには、「func」キーワードによる定義が必要でしたが、クロージャーはクロージャー 式という定義方法があります。

***関数について復習したい方はこちら!!***
関数を理解しよう!（ https://qiita.com/syunta061689/items/77e8aa76070a734f1b4d ）

基本的な定義の方法は以下の通りです。

```swift:qiita.rbvar 
{(引数名１： 型, 引数名２： 型...) -> 戻り値の型　in 
  クロージャーの実行時に実行される文 
  必要に応じてreturn文で戻り値を返却する
}
```

次に簡単な例を見ていきましょう。

```swift:qiita.rbvar 
let double = {(x:Int) -> Int in

return x * 5

}
double(5) //25
```
引数と戻り値の型の記述は関数と同様ですが、戻り値の型と文はinキーワードで区切ります。
上記の例では、Int型の引数を１つ取り、それを5倍にしたInt型の戻り値を返すクロージャーを定義して実行しています。

#クロージャーとしての関数

```swift:qiita.rbvar
func rectangleArea(height:Int,width:Int) -> Int {
 let result = height*width
 return result //計算結果を戻す

}

let area = rectangleArea(height: 5,width: 6) //30

```

上記の例では、変数の型はInt -> Intと明確に決まっており、計算結果のresult returnを実行し,戻り値を返却しています。

#クロージャー としてのArray型
次は、配列または、辞書を返すよう：にするパターンです。

***Array型について復習したい方はこちら!!***
Array型を理解しよう!（https://qiita.com/syunta061689/items/89e549f4a3254f635ce1 ）

簡単な例を見ていきましょう。

```swift:qiita.rbvar
func a(num: [Int] -> [Int] { // Int型な配列を返します
    print num
}
 
func b(strings: [String: Int]) -> [String: Int]{ // キーがString型、値がInt型な辞書を受け取れるようにします。
    print strings
}

let test = a(num:0,1,2) 
let test1 = b(String:[チンパンジー:0,ゴリラ:1]) 

print(a)//[0,1,2]
print(b) //[チンパンジー:0,ゴリラ:1]

```
#最後に
今回は、クロージャーについての基礎をまとめました。しかし、今回記述した内容は基礎中の基礎で、クロージャーは奥深く、複雑な書き方があるのでそこの理解もしっかり今後も行っています。
デバックの方法　〜初学者向け

#はじめに
　まだ苦手意識があるJS。コンソールのエラーがなかなか読み取れない。そこで、本日の学習でデバックのやり方が少し身についたので、記録しておく。

##基本パターン
`debugger`をコードに入れておけば、そこで強制的に処理を止めてくれる。Railsで言う`binding.pry`のようなもの。
どの辺りでエラーが出ているのか、エラー文を見ればわかるが、`debugger`を使えば、行ごとに細かく検証していくことができる。

##変数定義ができているかの確認
JSでDOMを操作するときはとにかく変数に入れることが多いと感じる。その時々で、ちゃんと変数に意図したものが入っているのか確認する必要がある。そんなときは、`cosole.log(変数名)`でブラウザのコンソールに出力させる。そのときに、nilと出れば、変数定義されていないことに気付くことができる。

##最後に
　本日の学習では、この２つのパターンを使って、エラーを解決することができた。ファイルの読み込みはできているのか、イベント発火は正常かなど、細かく検証していくことが大切だと感じた。
OpenCV+PySimpleGUIを使用するためのSimpleな環境構築

# はじめに
OpenCV＋PySimpleGUIを使用して種々の画像処理を行うための出来るだけシンプルな環境構築をまとめます。
# Minicondaのインストール
公式サイトからminicondaをダウンロードしてインストールします。
[miniconda](https://docs.conda.io/en/latest/miniconda.html)
minicondaを使用するのは、後々仮想環境を作りやすくするためです。

# パッケージのインストール
C:\requirements.txtというファイルを作り、中に以下のパッケージ名をコピペして保存します。

```
opencv-python
opencv-contrib-python
matplotlib
pysimplegui
flake8
autopep8
ipython
ipython_genutils
ipykernel
numpy
pillow
```

Anaconda promptを起動し、以下のコマンドを実行します。

```
pip install -r C:\requirements.txt
```
このコマンドで最低限のパッケージをインストールすることが出来ます。

# VSCodeのインストール
マイクロソフト社のコードエディタであるVSCodeをダウンロードしてインストールします。
[Download Visual Studio Code](https://code.visualstudio.com/download)
# VSCodeの設定
Ctrl+,でSettingsを呼び出し、上部のSearch settingsの部分にpython.pythonpathと打ちます。
Python:Python Pathが出てくるので、インストールしたminicondaのフォルダにあるpython.exeのパスを入力します。

```
C:\CMD\Miniconda3\python.exe
```

# 拡張機能の追加
VS Codeのツールバーの拡張ボタンをクリックして、「Python」で検索し、Python拡張（Python extention for Visual Studio Code)をいれます。

以上で完了です。
できるだけシンプルにと考えるとこのようになりました。

# 参考リンク
[pipでアップデートするときのコマンド pip update](https://qiita.com/HyunwookPark/items/242a8ceea656416b6da8)
[Python環境構築(Anaconda + VSCode) @ Windows10 【2020年１月版】](https://qiita.com/manamana/items/38e963ce04f24de4bbe4)
[]()
【Laravel】bladeで @（アットマーク）を文字列として出すにはどうすればよかったっけ

# こういう名前の表示がしたい

@antk 

## なぜできないのか

bladeで@（アットマーク）を付けると `@if` や `@foreach` といった**ショートカットとして認識されてしまう**。なので

```html
<div>@{{ $user_name }}</div>
``` 

このように書いてもうまくいかない。

```html
<div>{{ @$user_name }}</div>
``` 

これもダメ。

```html
<div>@ {{ $user_name }}</div>
``` 

空白を入れるとエラーは出ないが空白が出てしまう。
`@ antk`

## 解決

```html
<div>{{ '@'.$user_name }}</div>
``` 

二重括弧（エスケープ）の中で文字列と変数を `.`で接続する。
`.` 無しだとエラーになります。

こんな超基礎的なことでつまづいた(；´Д｀)
Safariのタブのように動くライブラリを作ってみた!!

## 実装イメージ

<img width="40%"  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/738919/0d54f7c0-c5f6-783b-e5bb-bdfd472844a3.gif">

## コード

```shell:Podfile
pod 'TDTabView'
```

```swift:ViewController
class ViewController: TDTabViewController {
    
    var vc1: UIViewController!
    var vc2: UIViewController!
    var vc3: UIViewController!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self
        
        let storyboard1 = UIStoryboard(name: "Table", bundle: nil)
        vc1 = storyboard1.instantiateInitialViewController()
        
        let storyboard2 = UIStoryboard(name: "Image", bundle: nil)
        vc2 = storyboard2.instantiateInitialViewController()
        
        let storyboard3 = UIStoryboard(name: "Web", bundle: nil)
        vc3 = storyboard3.instantiateInitialViewController()
    }
}

extension ViewController: TDTabViewControllerDelegate {
    func viewControllers() -> [UIViewController] {
        return [vc1, vc2, vc3]
    }
    
    func backgroundColor() -> UIColor? {
        return UIColor(red: 50/255, green: 50/255, blue: 50/255, alpha: 0.8)
    }
}
```

### ポイント
```swift
class ViewController: TDTabViewController {
```

TDTabViewControllerを継承したViewControllerを作成します。

```swift

extension ViewController: TDTabViewControllerDelegate {
    func viewControllers() -> [UIViewController] {
        return [vc1, vc2, vc3]
    }
    
    func backgroundColor() -> UIColor? {
        return UIColor(red: 50/255, green: 50/255, blue: 50/255, alpha: 0.8)
    }
}
```

TDTabViewControllerDelegateを追加して、タブとして表示させたいViewControllerを返すだけ！とってもかんたん！

## 自作ライブラリを作ってみての感想

主な機能は1日でできたのですが、UIに納得がいかず（まだ改善したいところはありますが）、UI改善に2週間ぐらいかかってしまいました。。。

よかったら使ってあげてください!そしてLGTMをください(*´-`)

gitはこちら
https://github.com/ymarui/TDTabView

おわり
【第1回】初心者二人で0から麻雀アプリ開発

[第2回のリンクはこちら](https://qiita.com/dashun814/items/9f8f0d78917456ce1b6d)

#はじめに
麻雀狂い二人がプログラミング経験ほぼ0からiOSアプリ開発に挑戦する様子を投稿していきます。
以下の内容を主眼に記事を作成します。

* 学んだこと
* 詰まったこと
* 考えたこと


#改版履歴
2020/10/26 投稿
2020/10/27 メンバーリンク追加
2020/11/03 第2回リンク追加


#立ち上げ会議
麻雀アプリ作ろうぜ！！
iPhoneユーザーだからiOSアプリやな！！

　　　　　　　　　　　　　　　　　　完

二人で開発を決めた時はこんなもんだったので、改めて立ち上げ会議を行いました。


会議では以下の事項について話し合いました。

1. どんなアプリにするか
1. 何の言語で開発するか
1. 開発のためにどんなツールが必要か
1. プロジェクトの運営について

何を準備すれば良いかすら分からず、ぶっつけで会議したら案の定ぐだぐだになりました……
事前準備、まじ大事。


##どんなアプリにするか
なんか麻雀に関連したアプリ

→日々の成績等を記録する機能
→メンバー内で記録を共有する機能


とりあえず、収支表アプリ的なものを作ろうってことになりました。

アプリを入れたメンバー同士で記録の共有とかできたらいいねーという話。
↑難易度むちゃくちゃ高そう(無知)なので余裕あったら実装


##何の言語で開発するか
調査()によると、iOSアプリはObjective-C か Swift というプログラミング言語で開発するらしい。

以前までObjective-C で作られてきたけど、ちょっと前にSwiftが発表されて段々Swiftに置き換わっている
→今からやるならSwiftでしょう。Apple様も推してるみたいですし。


調査の中で、「Swiftは新しい言語だからネットに技術記事が少ない。」といった記事が散見されましたが、自分たちのような初学者が手をつけるのに十分なくらいの情報はあるように感じました。

いざとなったらネットの諸先輩方が教えてくださる……よね？？

フレームワークについてはなにそれ美味しいの状態なので、今後調査と開発を進めていく中で決めていきたいと思います。



##開発のためにどんなツールが必要か
天下のGoogle先生に、おんぶにだっこです

* Google Drive ・・・クラウド・ストレージ。ファイル共有ように使用。15GBまでなんと無料。最高。
* Google Meet ・・・オンライン会議用。ブラウザで動く。画面共有できる。Googleアカウントあれば使える。最高。
* Xcode ・・・iOSアプリのコーディング・ビルド・配布までこれでやるらしい。まだHello Worldしかしてない。全部英語……
* LINE ・・・細々した連絡用。プロジェクト用に、別に別に用意したほうがいいのかな……

最低限これらを用いることにしました。

タスク管理とか、バージョン管理とかもツール使ってやっていったほうがいいみたいだけど、現状キャパオーバーなので随時取り入れていきたい



##プロジェクトの運営について
週一でミーティング。
→進捗報告、学んだ内容の共有、次にやることの確認をメインに確認する会。

学習を主目的とし、すこしずつでも継続的に取り組む。

開発の情報をアウトプットしていく。(Qiita、Twitter)
プロジェクトメンバーのTwitter
[たけだ](https://twitter.com/RTkd59)
[だしゅん](https://twitter.com/aiAg_mj)



(ここまで書くのに半日くらいかかってる……　続けられるんでしょうか…？)

運営方法についてはふわっとしか決めていないので、適宜更新していきたい。
そもそも運営の決め事ってこういうことなの感がありますが、今のところはこれで勘弁してきださい。


#おわりに
全部が手探り状態でわちゃわちゃしていますが、とりあえず「開発投げ出さない」を念頭に取り組んでいきたいと思います。

良ろしければ、ご指導ご鞭撻のほどよろしくお願いします。


PS.最近麻雀の成績が悪すぎるので、アプリ公開までには人様に見せられるくらいまでもちなおしたいです。まる。
XcodeでThe file couldn’t be savedのビルドエラー

Xcodeビルドエラー　"The file couldn’t be saved."ではまった件

ビルドエラーは以下：
/bin/sh -c /Users/xxxx/Library/Developer/Xcode/DerivedData/xxxxx-fmaccoypantpmwcbvalvgebzktwd/Build/Intermediates.noindex/xxxxx.build/Debug-iphonesimulator/xxxx.build/Script-2D6F48152518F1F300CCDBE0.sh

"The file couldn’t be saved.
Command PhaseScriptExecution failed with a nonzero exit code

この記事を参照：
https://github.com/Carthage/Carthage/issues/3056

ある方のコメントによると：

rm -rf ${TMPDIR}/TemporaryItems/*carthage*　// 新しい追加する内容
/usr/local/bin/carthage copy-frameworks   // 本来の内容
を
run scripts（Script-2D6F48152518F1F300CCDBE0.sh）へ追加すれば解決とのこと。

しかし、追加したけど、毎回新しく追加した内容が削除されてしまうと反映、解決できず。

${TMPDIR}/TemporaryItems　このパスに入ってみると、
（A Document Being Saved By carthage）
（A Document Being Saved By carthage 1）
（A Document Being Saved By carthage 2）
...
このような名前のフォルダーがいっぱい！！これらをすべて削除したら、Clean Builder Folderして、
ブルドしたら、エラーが解消しました！

本来であれば、rm -rf ${TMPDIR}/TemporaryItems/*carthage*を追加したら、解消するはずだが、
なぜか追加しても消えるので余計な時間、２時間ぐらいもかかりました。
Rails で検索機能を作ろう（ransack）

## はじめに
今回は`ransack`というgemを使って検索機能を作っていきます。ransackは少ないコードで複雑な検索機能を簡単に作れるgemでとても便利です。また、ransackではソート機能も簡単に作れるのでそれも含めて作成していきます。


## 基本的な検索結果の実装
今回検索の対象とするのは、ストレッチ(stretchsテーブル)一覧と、そのカテゴリ(categoriesテーブル)一覧とします。
ストレッチ一覧画面(indexビュー)に検索窓を設けます。

### gemをインストール


```
gem 'ransack';
```
`bundle install`でインストール

### ビュー
ストレッチのindexビューに検索窓をつける

```
<div class= serch.id>
      <%= search_form_for @q, class:'form-inline' ,url: stretchs_path do |f| %>
        <%= f.search_field :action_muscles_or_name_cont, class: 'form-control input-lg', placeholder: "ストレッチ名や筋肉名を入力" ,data: {"turbolinks" => false}%>
        <%= f.submit "検索", class: "btn btn-success btn-lg" %>
      <% end %>
</div>
```
cssで調整

```
.form-inline .form-control {
    display: inline-block;
    width: 80%;
}
```

### コントローラー

```
class StretchsController < ApplicationController
  def index
    # 検索機能(検索ワードをparams[:q]で受け取り＠stretchsに入れる)
    @q = Stretch.all.ransack(params[:q])
    @stretchs = @q.result(distinct: true).page(params[:page])
  end
end
```

検索ワードをparams[:q]で受け取り、検索で該当したデータをそれぞれ@stretchsに入れ、
再びindexビューに返す形です。

以上で簡単な検索機能の実装は完了です。

## 最後に
今回はransackを使って検索機能を作成しました。
間違っていたりするところがあればご教授お願いします。
アニメ番組管理のWebアプリ開発（メモ）

#Annict API の実装メモ
>アニメ番組管理の自分用Webアプリとか作れないかな。（ぼんやり。）
新アニメとか、とりあえず１話見てみるってのが多いからな。
スタート直後はタイトルだけ見ても見てたかどうか分からんことが多いし。。

###アニメ番組情報を取れそうなAPI
　・[annict.js](https://annict.jp/userland/projects/4)
　・[ShangriLa Anime API Server](https://github.com/Project-ShangriLa/sora-playframework-scala)
　・[しょぼいカレンダー(json.php)](https://sites.google.com/site/syobocal/spec/json-php)

**Annict API（Annict.js） サインインできない**
Annictは個人開発っぽい。番組表を自分で管理できるWebアプリの模様。そのままでも使えそう？
ただ、、メールアドレスを入れて「Send」してもメールが届かない？サインインできない。意味不明。
　※追記：かなり遅れてメールが届いた。（時間帯？）

**ShangriLa Anime API Server**
APIの仕様も使いやすそう。ただ放送時間は取れない。基本情報のみ。

**しょぼいカレンダー(json.php)**
オタク系番組表。仕様が分かり辛い。放送時間を取れそうだけどxml形式。
　・タイトル取得（例）：http://cal.syoboi.jp/json.php?Req=TitleLarge
　・番組時間取得（例）：http://cal.syoboi.jp/db.php?Command=ProgLookup&TID=5766


###実装
**エラー１：**CodePenではformタグは使えない。
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725039/4f002bf5-1882-6596-41ee-1e47669486d3.png" width="200">
**エラー２：**axios読み込み忘れ。CodePen「Settings」の"JS"タブから追加。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725039/8a22e971-6d47-7ea0-0667-6e4b0fc3c7f4.png" width="400">

###リンク先Webページのサムネイル表示したい
**link-prevueライブラリ**
　title、descriptionでサイトカードを生成しているっぽい。
　・[リンクのプレビュー機能を「link-prevue」を使って実装する](https://www.kabanoki.net/4182/)
　・[link-prevue -GitHubリポジトリ](https://github.com/nivaldomartinez/link-prevue?ref=kabanoki.net)
　※上手く取得できないサイト多数。説明に表示された言語もバラバラだったので利用見送り。

**LinkPreview API**
　URLからサイトサムネイル画像のURLや簡単な説明を返してくれそう。よさげ。
　・[LinkPreview](https://my.linkpreview.net/documentation)
　※エラー423が返される場合がある。（リクエスト先Webページで拒否される場合。）
　※エラー429が返される場合がある。（リクエスト上限がかなり低いっぽい。）

**そもそもWebページの画像って？OGPイメージなのでは？**
　APIだとなんか微妙なので、OGPイメージを取ればよいって考え方にシフト。
　※取得はうまいことできそう。非同期の罠にはまる。→解決せず。
　・[JavaScriptでURLからOGP取得する - Qiita](https://qiita.com/ksyunnnn/items/bfe2b9c568e97bb6b494)

**imgが表示されない、、**
　・[【Vue.js】なぜかimgが表示されない時の解決法とその理由](https://greko-engineer.hateblo.jp/entry/2020/03/05/231242)
　・[Vue.js imgタグのsrc要素は指定の仕方によって読み込み方が違う -Qiita](https://qiita.com/coppieee/items/4260bd0af246aebf5557)
　・[vueで画像が表示されない](https://teratail.com/questions/254557)
　※良く分からん、、とりあえず以下で上手くいった。（上手く表示しないイメージもあったけど。）

```html:.html
<img class="img" v-bind:src="urlを指定" width="200"> </img>
```

**カード表示で横並びにしたい**
　・[よく使うタイル（カード）デザインを CSS のパターン別でご紹介](https://cultureacademia.jp/webcreate/1339/)
　・[フレックスボックス（フレキシブルボックス）とはなにか？](https://mamewaza.com/support/blog/howto-use-flex.html)

###その他参考
　・[Vue.jsを100時間勉強して分かったこと - Qiita](https://qiita.com/kskinaba/items/3e8887d45b11f9132012)
　・[Vue.jsでv-forをネストする - Qiita](https://qiita.com/ykhirao/items/cf05e949e14aaac7f757)
　・[忘れやすい、複雑なJSONの要素をfor...in文で取り出す方法](https://www.weed.nagoya/entry/2016/05/11/105145)
mysqlをdockerで起動しておきたい時のdocker-compose.yml

(1) `docker-compose.yml`を作成する

```yml:docker-compose.yml
version: "3.8"
services:
  db:
    image: mysql:5.7                   # mysqlのバージョンを指定する
    container_name: docker_mysql
    ports:
      - "3307:3306"                    # DBを起動するポートを指定する
    environment:
      - MYSQL_USER=root
      - MYSQL_PASSWORD=
      - MYSQL_ROOT_PASSWORD=
      - MYSQL_ALLOW_EMPTY_PASSWORD=yes # パスワード無しを許可する
    volumes:
      - mysql-db-data:/var/lib/mysql   # データの永続化
    tty: true                          # コンテナを起動し続ける
volumes:
  mysql-db-data:
    driver: local
```

(2) mysqlを起動する `docker-compose up -d`

(3) mysqlに接続する `mysql -u root -h 127.0.0.1 -P 3307`
【JavaScript】画像をランダムに表示させる方法

#プログラミング勉強日記
2020年10月26日
何枚かの写真からJavaScriptを使ってランダムに1つ表示させる方法を紹介する。

#方法
　表示候補の画像ファイルリストを事前に準備しておき、乱数を使って1つを選び出して表示させる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/909f3f0b-3b36-160f-045e-b7a70d5bd003.png)

具体的な手順
<b>1. 表示させる可能性のある画像ファイル名をすべて配列に入れる
2. その中からアクセスされるたびに乱数を使って1枚選ぶ
3. 選んだ画像1つを表示させる</b>

#サンプルコード

```js:JavaScript
const imageArea = document.getElementById('imageArea');
const images = ['【画像パス1】', '【画像パス2】', '【画像パス3】'];

const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];
```

```html:HTML
<img src="【画像パス】" id='imageArea'>
```



#参考文献
[画像をランダムに表示する方法！JavaScriptで切り替え](https://allabout.co.jp/gm/gc/23805/)
[JavaScriptで文字列や画像をランダムに表示する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/25665)
kubernetesで複数のマスタノードを作成する。

メモ書き程度で残しておきます。
まず、初期化で以下のコマンドを実行
あと、`--control-plane-endpoint`のオプションをつけて初期化しないと、後からやるのはなぜかできなかった。
以下のコマンドで、`--upload-certs`の部分を除くとjoin時に、複合キーがいらなくなる。

```bash
LOAD_BALANCER_DNS=$(hostname -I|awk '{print $1}')
LOAD_BALANCER_PORT=6443
sudo kubeadm init --pod-network-cidr=10.244.0.0/16 --control-plane-endpoint "$LOAD_BALANCER_DNS:$LOAD_BALANCER_PORT" --upload-certs
```

後で、トークンを発行するには以下のコマンドを実行
上だけなら可能化も

```bash
sudo kubeadm init phase upload-certs --upload-certs
```

実行したら、keyができるので、以下のコマンドでトークンを作成

```bash
kubeadm token create --certificate-key $(KEY)
```
作成したら、一応以下のコマンドで、複合keyなしの、joinコマンドを作れる

```bash
echo sudo kubeadm join $(hostname -I|awk '{print $1}'):6443 --token $(kubeadm token list |sed -n 2P|awk '{print $1}') --discovery-token-ca-cert-hash sha256:$(openssl x509 -pubkey -in /etc/kubernetes/pki/ca.crt | openssl rsa -pubin -outform der 2>/dev/null | openssl dgst -sha256 -hex | sed 's/^.* //') --control-plane
```



参考
[kubeadmを使用した高可用性クラスターの作成](https://kubernetes.io/ja/docs/setup/production-environment/tools/kubeadm/high-availability/)
[kubeadm join](https://kubernetes.io/docs/reference/setup-tools/kubeadm/kubeadm-join/)
[kubeadm token](https://kubernetes.io/docs/reference/setup-tools/kubeadm/kubeadm-token/)
ちょっとしたファイル共有にkeep.shが便利な件

皆さんは、ちょっとしたファイル共有するときに、何を使っていますか？
DropBoxやOneDrive、gigafile便などありますが、どれもめんどくさい。
そんなときに便利なのが keep.sh です。

（前まで1GBまで無料でしたが、今は500MBまでみたいです）

# 使い方

https://keep.sh/

サイト見たほうが早いですが一応書いておきます。

**Upload**

```bash
$ curl --upload-file <ファイル名> https://free.keep.sh
```

**Download**

```bash
$ curl -L <URL> > <ファイル名>
```


他は公式サイトを見てください（）
MacOS Catalinaに更新後、Xcode Command Line ToolsをインストールしてPython 2.7系から3.7系に変更（bash）

* MacOS Catalina
* Python 2.7.17
* bash

MacOS MojaveからCatalinaにバージョンアップしたところ、numpyがimportできなくなりました。
この状況を改善しつつ、併せて、Python 2系が、2020年1月でサポート終了とのことで遅ればせながらこの機会に 3.7.7 にバージョンアップしました。やり方を備忘録として、本記事に記します。

### numpyがインポートできないことを示すエラーメッセージ

```
$ python abc.py
Traceback (most recent call last):
  File "abc.py", line 3, in <module>
    import numpy as np
ModuleNotFoundError: No module named 'numpy'
```

### Pythonのインストールを試みるもエラー

そこで、Python 3.7.7をインストールしてみようと試みましたが、エラーが表示されました。

```

$ pyenv install 3.7.7
（略）
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

```

Qiitaの他の方の記事に、異なるバージョンのOSにおける同様の事例紹介を見つけました。
<a href="https://qiita.com/nishina555/items/e23d73067a5cac182a63">macOSアップデート後の『xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)...』の対処法</a>
### Xcode Command Line Toolsのインストール

Xcode Command Line Toolsが必要ということでインストールしました。
私の環境の場合、次のやり方でうまく進むことができました。

```
$ softwareupdate --list
Software Update Tool

Finding available software
Software Update found the following new or updated software:
* Label: Command Line Tools for Xcode-12.1
	Title: Command Line Tools for Xcode, Version: 12.1, Size: 431272K, Recommended: YES, 

$ softwareupdate --install -a
Software Update Tool

Finding available software

Downloading Command Line Tools for Xcode
Downloaded Command Line Tools for Xcode
Installing Command Line Tools for Xcode
Done with Command Line Tools for Xcode
Done.
```
### pyenvのバージョンと .bash_profileの内容確認

このとき、pyenvのバージョンは次の通りです。

```
$ pyenv --version
pyenv 1.2.17
```

.bash_profile の中には以下のような記述が含まれていました。

```
（略）
PYENV_ROOT="${HOME}/.pyenv"
if [ -d "${PYENV_ROOT}" ]; then
     export PATH=${PYENV_ROOT}/bin:$PATH
     eval "$(pyenv init -)"
fi
（略）
```
### Python 3.7.7のインストール

あらためて、Python3.7.7をインストールしてみましたが、今度はインストールが完了しました。

```
$ pyenv install 3.7.7
python-build: use openssl@1.1 from homebrew
python-build: use readline from homebrew
Downloading Python-3.7.7.tar.xz...
-> https://www.python.org/ftp/python/3.7.7/Python-3.7.7.tar.xz
Installing Python-3.7.7...
python-build: use readline from homebrew
python-build: use zlib from xcode sdk
Installed Python-3.7.7 to /Users/ecru/.pyenv/versions/3.7.7
```

pyenv でインストールされている Python のバージョンを確かめます。そして、3.7.7をglobalに設定します。

```
$ pyenv versions
  system
* 2.7.17 (set by /Users/ecru/.pyenv/version)
  3.7.7
$ pyenv global 3.7.7 
$ python -V
Python 3.7.7
```
こちらで、numpyがインポートできないことを示すエラーメッセージは表示されなくなり、abc.pyがターミナルで実行できるようになりました。

備忘録は以上です。
【Git】WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!の対処方法

とある日，`git push`しようとするとこんなエラー出た．

```
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@       WARNING: POSSIBLE DNS SPOOFING DETECTED!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
The RSA host key for [git.xxxxx.com]:XXXX has changed,
and the key for the corresponding IP address [XX.XX.XX.XXX]:XXXX
is unknown. This could either mean that
DNS SPOOFING is happening or the IP address for the host
and its host key have changed at the same time.
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the RSA key sent by the remote host is
SHA256:RGRZ/*********************************************.
Please contact your system administrator.
Add correct host key in /Users/XXXX/.ssh/known_hosts to get rid of this message.
Offending RSA key in /Users/XXXX/.ssh/known_hosts:1
RSA host key for [git.xxxxx.com]:XXXX has changed and you have requested strict checking.
Host key verification failed.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
```


#エラー原因
```~/.ssh/known_hosts``` に記載されている接続先のサーバ情報と移行後のサーバの情報（今回の場合はIPアドレス）とが異なっているため．

#こんな時にエラー出る
サーバの移行後にSFTPクライアントソフトやTerminalで接続をしようとする時．たとえ接続先やSSH認証鍵が合っていてもこのようなエラーが出る．

#対処方法

エラーメッセージどおり，`~/.ssh/known_hosts`の指定された行を削除します．
今回は一行目を削除しました．

どの行を削除すればわからない場合は`rm ~/.ssh/known_hosts`でファイルごと削除しちゃって大丈夫です．ホストの再登録ができます．
【Laravel】composer require時のメモリ不足エラーの対処法【Docker】

# 概要

Docker環境でcomposerインストール時に表題のエラーが発生しました。
ググっていくつかの方法を試しましたが解決に至るまで少し時間を要したので備忘として残しておきます。

## 環境

Docker:19.03.8
Laravel:6.19.1

## エラー内容
```
Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 327680 bytes) in phar:///usr/bin/composer/src/Composer/DependencyResolver/Decisions.php on line 196
```

メモリ不足でインストールできないよ〜というエラーです。

## 解決方法

1.以下を実行しappコンテナに入る

```
docker-compose exec app bash
```

2.以下でインストール

```
php -d memory_limit=-1 /usr/bin/composer require インストールしたいライブラリ名(ex: fruitcake/laravel-cors)
```

**-d**はdefineの略で、php.iniで指定できる設定値を明示的に設定できるようです。
[PHPコマンドラインオプション](https://www.php.net/manual/ja/features.commandline.options.php "PHPコマンドラインオプション")
>このオプションにより php.ini で指定できる設定ディレクティブに カスタム値を設定することができます。構文は以下のようになります。
-d configuration_directive[=value]

**-d memory_limit=-1**とすることで、メモリlimitを無制限でコマンドを実行することができます。
BigQueryのクエリ結果にSTRUCTが含まれる場合はCSVで保存できない

## BigQueryのWeb UIでクエリ結果を保存できない :cry: 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15117/5bb88626-f1c4-5f12-f850-f710bd3a67e5.png)

ちょっとしたクエリ結果などをCSVに保存したり、クリップボードにコピーできず、ハマったことがありました。
しかも特にエラーは表示されないので、知らないと何が問題なのかわかりません、、


## クエリ例

```sql
WITH t AS (SELECT STRUCT(1 AS x, 2 AS y, 3 AS z))
SELECT * FROM t
```

たとえば上記のように、クエリ結果にSTRUCTが含まれているとCSV出力されません。

## 解決策

```sql
WITH t AS (SELECT STRUCT(1 AS x, 2 AS y, 3 AS z))
SELECT AS VALUE * FROM t
```

`SELECT AS VALUE` を使い値テーブルを生成します。
ただし、これが使えるのはクエリ結果が1列だけの場合のみです。

[標準 SQL のクエリ構文  |  BigQuery  |  Google Cloud](https://cloud.google.com/bigquery/docs/reference/standard-sql/query-syntax#select_as_value)

## 補足

もちろん、上記のようにCSVに保存できない場合でもJSONに保存することはできます。
【SCSS】意味も分からず使っているメディアクエリ を整理してみる

CSSを生で書くことはなく、現在はSCSSを使用しております。
現在、私が使用している@mixinをつかったメディアクエリがこちらです。

```scss

// ブレイクポイント
$breakpoints: (
"sp" : "(max-width: 480px)",
"tab": "(max-width: 768px)",
"pc": "(min-width: 769px)"
);

// メディアクエリー
@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

```

普通に使用する分にはこちらで全く問題ないのですが、正直何が書かれているのかイマイチわかっていなかったので一度整理したいと思い、記事を書いております。

#この記事を読んでわかること
- SCSSを使用したメディアクエリの書き方
- メディアクエリに書かれている内部の情報について

# $ とは
SCSSを書いていると$が頻繁に出てきます。
こちらは、変数を定義する際に使用します。

例えば`文字の色`や`背景色`を管理したいときにこのように指定することがあります。

```scss

$font-color : #333;
$bg-color : #fff; 
```
上記のように、設定をしておくことで、

```scss
h2{
color:$font-color;
}
.header{
background-color:$bg-color;
}
```
と書いていくことができるようになります。ここで抑えておきたいのが、
`$font-color / $bg-color`　の名前が`キー`となって、`#333`や`#fff`の値を取得できるということです。

なので、今回は`$breakpoints`を変数名として、`sp` `tab` `pc`で定義した値(`"(max-width: 480px)"`他を取得しています。
こちらは、変数のなかでも`マップ型の変数`と呼ばれております。特徴としては、変数の中に1つ以上のキーと値のペアを定義できます。今回はでいうと、3つ定義されています。
`$breakpoints: (
"sp" : "(max-width: 480px)",
"tab": "(max-width: 768px)",
"pc": "(min-width: 769px)"
);`

#@mixinでメディアクエリを呼び出す
ブレイクポイントを定義した変数を`mq()`という変数で呼び出せるようにします。
@includeは定義されたスタイルを呼び出すためのものです。

なので、

```scss 
@include mq("tab"){
font-size:12px
}
```
と呼び出してあげると、

```scss
@media (max-width: 768px) {
font-size:12px;
}
```
を呼び出すことができます。

はて、`@content`ってなんだとなりましたが、イマイチ納得できる記事がありませんでした。

##まとめ
いまだ１００％の理解はできておりませんが、なんとなくわかってきました。
一つづつ分析することの大切さを学びました。

■参考記事
https://qiita.com/nekoneko-wanwan/items/c8498a21ae0e2b2198be

https://www.tam-tam.co.jp/tipsnote/html_css/post10708.html
サーバーついてインプット！


##サーバーとは
「サーバー」という言葉には大きく2つの意味があります。
 1つは「クライアントの要望に応じたデータを送るプログラム・ソフトウェア」という意味、

もう1つは「Webサービスなどを提供するパソコン本体」という意味です。


これだけではよくわからないので、サーバーの種類について


###レンタルサーバー
インターネット上に情報を公開するためのサーバーを、業者からレンタルして利用するサービスのことです。

言葉通りの意味ですね。

メリットとしては、低コストで利用できる。
 

###VPS
VPSは、仮想的なパソコン環境を1人1台用意し提供します。

レンタルサーバーに比べ、使用方法の自由度が高いことが特徴。

senntoOS作ったことありますが、ややこしかった記憶。



###オンプレミス
サーバーやソフトウェアなどの情報システムを、使用者が管理する設備内に物理的に設置して運用することを指します。

 要するに、物理サーバー的な意味ですね。

クラウドという外部のサーバーリソースを運用する形態が普及するにつれて、従来の形態と区別するために「オンプレミス」と呼ばれるようになったそう。



###クラウド
クラウドとは、コンピュータ資源の利用形態を指します。

FFのクラウドとは違うみたいです。

 ソフトウェアやハードウェア、ストレージなどを、ネットワーク経由でユーザーにサービスとして提供しており、その資源をクラウドと呼びます。





#クラウドの種類

クラウドは、利用形態によっていくつかに分類されます。

インターネットを経由して提供されるソフトウェアパッケージのSaaS。

アプリケーションの実行のための動作環境をインターネット経由で提供しているPaaS。

ネットワーク経由でハードウェアやインフラを提供しているIaaSなどが挙げられます。

それぞれを詳しく見ていこう！




##SaaS
SaaSとは「Software as a Service」の略で、「サース」または「サーズ」と読みます。

 クライアント側に導入せずに、サービスを提供しているサーバーに直接アクセスをしてサービスを利用する状況を指します。

エクセルとか、DropboxなどのオンラインストレージなどがSaaS。





##PaaS
PaaSとは「Platform as a Service」の略で、「パース」と読みます。

 作成したアプリケーションなどを、ネットワーク上に公開するためのプラットフォームを提供するサービスのことです。

HerokuがPaas。




##IaaS
IaaSとは「Infrastructure as a Service 」の略で、「イアース」や「アイアース」と読みます。

 サービスを利用するユーザーが、仮想化をしたCPUやメモリ、ストレージなどをインターネット経由で提供するサービスのことです。

特徴としては、サービスを利用するたびに金額が発生することです。

Microsoft Azure、Google Compute Engine、AWSもですね！




##仮想サーバー
1台のサーバーで仮想的に複数のサーバーを稼働させる仕組みです。

 仮想サーバーを用いない一般的なサーバーであれば、1つのサーバーで1つのOSが稼働します。

しかし、仮想サーバーを用いることで、複数のサーバーを仮想的に稼働することができます。

このような仕組みは処理速度の向上や保守コストの削減などさまざまな利点があります。

仮想と言いつつ、メモリは持ってかれるっていうね。笑

仮想サーバーのデメリット。

消費するメモリが膨大であること
高度な技術が必要であること
設定や管理などの負荷がかかること など

こうした問題を解決するために。



##コンテナ
「他のユーザーから隔離された実行環境」のことをコンテナと呼びます。

 コンテナは、ホストOS上に作成されるものです。

コンテナは、1つのOSで稼働するためメモリの消費は少なく、ストレージの使用もわずかで済みます。

仮想サーバーに比べて起動時間が短く、同じ性能のハードウェアであれば、より多くのコンテナを同時に動かすことができます。

めちゃくちゃ、便利。
グループ関数とデータの集計

現在勉強しているオラクルマスターブロンズ（SQL）についてまとめたものです。
自分のアウトプット用なので見やすさなどは期待しないでください。

# グループ関数（複数行関数）

**グループ関数**は**複数件の入力データをグループ化して、集計処理を行った結果を１つだけ戻す関数**で、**複数行関数**や**集計関数**と呼ばれることもある。

## グループ関数の基本構文とタイプ

グループ関数は**SELECT句、ORDER BY句、HAVING句で使用でき、WHERE句では使用できない**。
また、複数のグループがある場合はグループの数だけ結果を戻す。
引数には、列名または列名を含む式を指定でき、重複した値に対する処理方法を以下のようなオプションとして指定できる。

- **DISTINCT**：重複した値は１回だけ処理する。
- **ALL**：重複した値を含む、すべての値を処理する。デフォルト値。

## グループ関数

Oracleデータベースには以下のようなグループ関数がある。

**COUNT関数**は、**取り出されたデータの件数**を戻す関数で、引数には**数値型、文字型、日付型**を戻す式または列に加えて**アスタリスク**を指定できる。

COUNT関数の引数

- *：重複した値やNULL値も含む、すべてのデータの件数。
- 式またはALL　式：重複した値をそれぞれ１件としてカウントしたデータの件数（**NULL値は含まれない**）。
- DISTINCT　式：重複した値を１回だけカウントしたデータの件数（**NULL値は含まれない**）。

**MAX関数は最大値**を、**MIN関数は最小値**を戻す関数で、引数には**数値型、文字型、日付型**を戻す式または列を指定できる。

**AVG関数は平均値**を、**SUM関数は合計値**を戻す関数で、引数には**数値型**を戻す式または列のみ指定できる。

Oracleデータベースには、上記のグループ関数の他に、標準偏差を求める**STDDEV関数**、分数を求める**VARIANCE関数**、各グループ内でデータを順序付けて、区切り文字を指定し、連結した結果を戻す**LISTAGG関数**などもある。

グループ関数では、COUNT関数の引数にアスタリスクを指定した場合を除き、**NULL値を無視**して集計処理を行う。

# データのグループ化と取り出すグループの制限

## GROUP BY句によるデータのグループ化

SELECT文に**GROUP BY句**を指定すると、**行をグループ化**することができる。
なお、GROUP BY句は、必ず**WHERE句の後ろ、かつORDER BY句の前**に指定するほか、以下の要件も満たす必要がある。

- GROUP BY句には１つ以上の列を指定する必要がある。
- **列別名は指定できない**。
- SELECT句の選択リストには**GROUP BY句で指定した列とグループ関数**のみ指定できる（**選択しなくてもエラーにはならない**）。
- ORDER BY句とGROUP BY句を併用する場合、ORDER BY句には**GROUP BY句で指定した列とグループ関数**のみ指定できる。

SELECT文に**GROUP BY句の指定がある場合**は、グループ関数は**２レベルまでネスト**することができる。
なお、グループ関数は**３レベル以上ネストするとエラーになる**。

## HAVING句による取り出すグループの制限

**グループ関数を条件に指定したい場合は、HAVING句**を使用する。
なお、HAVING句も必ず**WHERE句の後ろ、かつORDER BY句の前**に指定する。
この時、GROUP BY句とHAVING句は**順序不同**。

HAVING句を使用すると、以下の手順で取り出すグループが制限される。

1. WHERE句がある場合、条件によってグループ化する対象の行が制限される。
2. GROUP BY句によって行がグループ化される。
3. グループ関数が適用される。
4. HAVING句によって指定された条件を満たすグループが取り出される。

なお、GROUP BY句を指定せずに、HAVING句のみを指定した場合は、**選択された行全体が1つのグループ**として処理される。

通常、グループ関数を使用しない条件はWHERE句に指定するが、**GROUP BY句に指定されている列を使用した条件**に限り、HAVING句に指定してもエラーにならない。
Laravel:419|PAGE EXPIREDエラーの解決方法

【概要】
----------------------------------------
<b>1.結論</b>

<b>2.どのように記載していたか</b>

<b>3.そもそもcsrfとは何か</b>

<b>4.開発環境</b>



1.結論
----------------------------------------
<b>viewに@csrfを追記</b>すればOK!

2.どのように記載していたか
----------------------------------------

```php:hoge.blade.php
  <form action="/hoge/add" method="post">
  <table>
  @csrf #----❶
    <tr><th>name: </th><td><input type="text" name="name">
        </td></tr>
    <tr><th>mail: </th><td><input type="text" name="mail">
        </td></tr>
    <tr><th>age: </th><td><input type="text" name="age">
        </td></tr>
    <tr><th></th><td><input type="submit" name="send">
        </td></tr>
  </table>
  </form>
```
❶の"@csrf"の記載がないため、下記の画像のエラーになりました。
送信ボタンを押下してもコントローラーでトップページに戻るコーディングをしても(return redirect('/hoge'))トップページに遷移しませんでした。
![スクリーンショット 2020-10-26 21.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686400/c681b57b-5cd4-b4f7-9b03-6c17a2419fe4.png)
<br>

参考にさせていただいたURL
<a href="https://qiita.com/sola-msr/items/8a0ea0abe510245760ac">【Laravel5】たまに出てくる「the page has expired due to inactivity. please refresh and try again」を表示させない</a>
<br>


3.そもそもcsrfとは何か
----------------------------------------
クロスサイトリクエストフォージェリの略で、Webアプリケーションの脆弱性を利用したサイバー攻撃になります。
ログインした利用のあるアカウントで攻撃用のスクリプトが仕込まれた罠サイトにアクセスすることで、csrf対策をしていないWebアプリケーションは勝手に第三者に弄られてしまいます。例えばSNSでコメントを投稿されたり通販サイトで商品を勝手に購入されたりといった被害があります。
<br>


4.開発環境
----------------------------------------
PHP 7.4.10
Laravel 8.9
Apache 2.4.41
Mysql 5.6.47
Sequl Pro 1.1.2
<br>
random関数でランダムな値を生成する

以下のコードで０〜５の中からランダムな値を生成できる

```js
Math.floor(Math.random() * 6);
```

``*６``の意味がわからなかったため調べたことを残しておく。

## Math.random()
``random関数``は0以上、1未満の浮動小数点の擬似乱数を生成する関数

```js

console.log(Math.random());
// 0.3538826537319486　← 0以上、1未満
// １未満のため最大でも0.999999999999・・・
```

``floor``メソッドは引数として与えた数以下の最大の整数を返すため``Math.floor(Math.random());``とすると０しか返ってこないことになる。
返ってくる値の個数を増やしたいのであれば```Math.random()```の値を大きくすればいいため``*n``として最大値を大きくする。
そして```Math.random()```にかける数を3倍, 4倍, 5倍と増やしていくごとに、得られる数値の数も3個, 4個, 5個と増えていくため欲しい数値分掛け算をすればいい。

初めの疑問に戻ると６倍することで乱数の最大値を5.9999・・・として０〜５の間でランダムな値を生成しているというのが今回の疑問に対する答え。

## 応用編　最小値を０以外にする
今までの方法は最小値を０として最大値を設定していたが以下の式によって最小値を０以外にすることも可能。

```js
Math.floor(Math.random() * ( 最大値 - 最小値 + 1 ) + 最小値);
```

例えば５〜１０でランダムの値を取りたい場合、上記の式に当てはめると```( 最大値 - 最小値 + 1 ) ```の部分は６になる。
そして、もし``+最小値``の式を入れなかった場合取れる値は０〜５になる。
０〜５の値を５〜１０にするためにはどうすればいいかというと最小値を足せばいい。

```
０, 1, 2, 3, 4, 5
5, 6, 7, 8, 9, 10 //上段の値に５（最小値）を足すと下段の値になる
```

５〜１０に限らずどの範囲であっても上の式に当てはめることで範囲を指定できます。
以上、random関数についてでした！