OmniAICreator/Qiita-1.07M huggingface dataset:
［Laravel8］Font Awesomeのインストール方法

Laravel8でJetstreamになってから、それまでの方法ではFont Awesomeがインストールできなくなりました。
以下の手順で実装することができたのでシェアします。（環境：XAMPP）

１：　webpack.mix.jsの内容が、デフォルトで以下の通りになっています。

```webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);
```

↓↓　上記のコードを以下のように変更してください。

```webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    });
```

２：　ターミナルで以下の通りコマンドを打って、Font Awesomeをインストールします。（以下は無料バージョンの場合です。）

```
npm install --save @fortawesome/fontawesome-free
```

３：　『resources\sass\app.scss』に新規ファイルを作ります。ファイルに以下の通り追記して、インポートします。
（※ デフォルトで作られている『resources/css/app.css』は使用しません。）

```resources\sass\app.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
```

最後の４行は、ご自身で必要な分をインポートしてください。

４：　ビルドします。

```
npm install && npm run dev
```

これで、public\css\app.cssにコンパイルされてFont Awesomeが使えるようになります。

以上です。
ARkitで塊魂のパロディーゲームを作る

#はじめに
　この記事は、ゲーム開発勉強中の筆者が、そろそろオリジナルゲーム作りたいと思ったときに、子供時代に熱中したナムコの「塊魂」をARでできたら面白そうだなと考え、作成しながら書いているメモです。よって作りながら随時記事を更新しています。



#開発環境
- Mac Book Pro 2017
- Unity 2019.4.12.f1
- Blender 2.837
- Swift


#ゲーム概要
　ゲームの主人公はホームレスという設定のおじさん。
　ホームレスからのし上がるため(？)おじさんが塊を転がし、制限時間１分の間に無制限に出現する物体たちを巻き込んでいくゲーム。
↓ゲームイメージ図
![GameImage.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685614/c811f55f-c5ae-e8c5-01c2-8947143166dc.jpeg)
![HowTo1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685614/467e733a-41c1-8b83-6464-ac06cf24dfa1.jpeg)

↑操作方法は塊を転がしてほしいところをタップするだけ。タップしたところに向かっておじさんが塊を転がしながら進む。ぶつかったものがどんどんくっついていく。

#このゲームのポイント
　一定数巻き込めたらPCや宝箱を巻き込むことができ、PCを巻き込んでタイムアップした場合はホームレスからエンジニアに転身、宝箱なら成金といった感じで、最終的に巻き込んだものでホームレスおじさんの結末が変わる。

##作成
**キャラクター・その他オブジェクトの作成（Blender）**

**ARKitの導入**

**PCと宝箱の配置とくっつくオブジェクトの自動生成**

**塊をプレイヤーとし、おじさんが塊に追従。タップした方向に進む**

**当たり判定をつけて塊がぶつかったものがくっつようにする**

**時間制限をつける**

**一定数くっついた場合のみ、PCまたは宝箱にぶつかったらくっつく**

**エンディング設定**
Git コミットを一部削除する方法

#GitHubでコミットを<font color="Red">一部のみ</font>削除する方法
##結論
```java:ターミナル
git reset <コミットID>
```
#コミットID？？？？？
##commit IDの出し方
```java:ターミナル
git log
```
#git logでブワーッと下記のようになる
![git07_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/27e1a404-c9fb-ce5e-f095-4d4e10591c80.png)
#上記の<font color="orange">commit 5daf90338461・・・</font>の<font color="orange">5</font>から<font color="orange">5</font>までのランダムな英数字混合が<font color="red">コミットID</font>です！
#削除したい該当のコミットのIDをresetすれば・・・
```java:ターミナル
git reset 5daf90338461ead0665b16bf02f9fbfafbba7da5
```
#特定のコミットだけが削除された状態になります
##注意点としてはこの方法はコミットしてpushする前の状態の説明なのでpushしてしまった後の削除法につきましては以下の記事などを参考にしてみて下さい！

###参考Qiita記事
@Maeda-Shoota
~Git困ったぞこれ集~
https://qiita.com/Maeda-Shoota/items/56d5fddccf5e89bbeba0
Next.jsでURLパラメータを取得する

## getServerSidePropsを使う

http://localhost:3000/hoge?slug=tokyo
このslug部分を取得したい。

```javascript
export async function getStaticProps({query}) {
  console.log(query.slug)
  return {}
}
// undefined

export async function getServerSideProps({query}) {
  console.log(query.slug)
  return {}
}
// tokyo
```

詳細はこちらに

https://nextjs.org/docs/basic-features/data-fetching
Gmail の掃除のために送信者を件数でランキングする

## 概要

Google Apps Script を使って、受信メールの件数を差出人ごとにランキングした結果をスプレッドシートに出力します。

## 背景

Google さんが今後ゴミ箱の中身を 30 日で自動消去する（むしろ今まで無限だったの…？）というニュース[^1]でふと思い立って今の使用容量を見てみたら、 全体で14GB、Gmail だけで 3GB も使っていました。

大事なときに全体が15GBに達していたら良くないと思い、要らなそうなメルマガなどを差出人ごとにばっさり消したかったのですが、件数の多い差出人を見る方法がありませんでした。

余談：ゴミ箱の中身も容量の15GBに含まれます。

## コード

```js:コード.gs
/**
  便利関数の追加
*/
function extension() {
  // flatMap の追加
  // https://gist.github.com/samgiles/762ee337dff48623e729
  Array.prototype.flatMap = function (lambda) {
    return Array.prototype.concat.apply([], this.map(lambda));
  };

  // groupBy の追加
  // https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects
  Array.prototype.groupBy = function (getKey) {
    const map = new Map();
    this.forEach(item => {
      const key = getKey(item);
      const collection = map.get(key);
      if (!collection) {
        map.set(key, [item]);
      } else {
        collection.push(item);
      }
    });
    return map;
  };
}

/**
  Gmail差出人ごと件数ランキング作成
*/
function fromRanking() {
  // 便利関数の追加
  extension();
  const book = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = book.getActiveSheet();

  // シートのクリア
  sheet.clear();
  sheet.appendRow(['From', 'Count', 'Search', '', 'Running.']);

  // スレッドをメッセージ単位にflatten、差出人でgroupBy、記入
  let row = 2;
  // 検索リンク用数式。" label:inbox" をつけてアーカイブしてないものに絞っても良いかも知れない
  const formula = '=HYPERLINK("https://mail.google.com/mail/u/0/#search/from%3A"&ENCODEURL(RC[-2]),"SEARCH")';
  GmailApp.getInboxThreads()
    .flatMap(th => th.getMessages())
    .map(m => m.getFrom())
    .groupBy(f => f)
    .forEach((v, k) => {
      // 差出人と件数
      sheet.getRange(row, 1, 1, 2).setValues([[k, v.length]]);
      // Gmail 差出人の名前で検索
      sheet.getRange(row, 3).setFormulaR1C1(formula);
      row++;
    });

  // 結果のソート
  // https://excel-ubara.com/apps_script1/GAS030.html
  const lastRow = sheet.getLastRow();
  const lastCol = sheet.getLastColumn();
  sheet.getRange(2, 1, lastRow, lastCol).sort({ column: 2, ascending: false });

  const date = new Date();
  const finishDate = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyy/MM/dd hh:mm:ss');
  sheet.getRange(1, 5).setValue('Finished. ' + finishDate);
}
```

## 実行

|( ! ) 実行するとアクティブなシートの内容が全て消えますのでご注意ください。|
|---|

### 分かる方向け

関数 fromRanking を実行してください。

### わからない方向け

1. スプレッドシートを開き、結果出力したいシートを表示する
1. スプレッドシート - ツール ＞ スクリプト エディタ
1. スクリプト エディタ - 実行 ＞ 関数を実行 ＞ `fromRanking`
1. E1 セルが `Finished.` になるまで待つ

[^1]: [Google ドライブのゴミ箱ファイル、今後は 30 日で自動消去 - PC Watch](https://pc.watch.impress.co.jp/docs/news/1277679.html)
【Vue】v-if,v-forを分離するために【メモ】

## v-if, v-for分離前（VueCLIだとエラーになる）
```html
<span class="project-title">{{project.title}}</span>

<div
  class="project" 
  :key="project.title" 
  v-for="project in projects" 
  v-if="currentFilter === project.category || currentFilter === 'ALL'" :key="project.title" v-for="project in projects"
>
```
↓
## v-if, v-for分離後（v-ifを削除し、computedを追記）
### v-for部分に「activeProjects」を新規で追加

```html
<span class="project-title">{{project.title}}</span>

<div
  class="project" 
  :key="project.title" 
  v-for="project in activeProjects" 
>
```

```js
computed: {
    activeProjects() {
      return this.projects.filter(project => {
        return this.currentFilter === project.category || this.currentFilter === 'ALL'
      })
    }
  }

```
Dockerで[An HTTP request took too long to complete.]のエラーが出た際の対処法。

#はじめに
Dockerを使用しており、`docker-compose up -d`でコンテナを起動しようとした際に、**[An HTTP request took too long to complete.]**のエラーが出た際の解決法です。

#エラー文
今まではコンテナを起動させてもエラーは出なかったが、いきなり同じコマンドでエラーが出た。

```
ERROR: An HTTP request took too long to complete. Retry with --verbose to obtain debug information.
If you encounter this issue regularly because of slow network conditions, consider setting COMPOSE_HTTP_TIMEOUT to a higher value (current value: 60).
```

#解決方法
結論から言うと、***Docker for Windows***を再起動すれば直りました。
・画面右上のDockerのアイコン(クジラのアイコン)をクリック。
・***Quit Docker Desktop***をクリック。
・アプリが終了したら、***Docker for Windows***を再起動させます。
・`docker-compose up -d`でコンテナの起動。
無事、Dockerが起動しました。

#最後に
最近Dockerを使いはじめたばかりだったので、少し焦りましたが冷静に対処すれば簡単な解決方法でした。備忘録として載せておきます。最後まで読んでいただきありがとうございます:grin:
DockerのMySQLでdumpファイルを読み込む

# 目的

- DockerのMySQLにdumpファイルを読み込む方法をまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| dumpファイル作成MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |
| dumpファイル読み込みMySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |

# 前提条件

- dumpファイルが自分のPCのローカルに用意されていること。
- MySQLのコンテナが起動していること。

# 前提情報

- dumpファイルを読み込むDockerのMySQLは自分の先輩に用意していただいた環境のものとする。
    - [Dockerで始めるLaravel講座 - Laravel編](https://qiita.com/layzy_glp/items/579b295e8cc899aef2c4)

# 概要

1. dumpファイルの移動
1. 読み込み
1. 確認

# 詳細

1. dumpファイルの移動
    1. dumpファイルが設置されているディレクトリまで`$ cd`コマンドで移動する。
    1. 下記コマンドを実行してdockerコンテナの中にdumpファイルをコピーする。

        ```terminal
        $ docker cp dumpファイル名 コンテナ名:/コピー先のdumpファイル名
        ```
    1. 例えばローカルの`~/Downloads`直下にあるmy_dump.sqlをコンテナ名「docker_mysql_1」のルートディレクトリ直下にコピーしたい場合は下記のようになる。

        ```terminal
        $ docker cp ~/Downloads/my_dump.sql docker_mysql_1:/my_dump.sql
        ```
1. 読み込み
    1. 下記コマンドを実行してMySQLのコンテナに入る。

        ```terminal
        $ docker exec -it コンテナ名 bash
        ```
    1. 下記コマンドを実行してdumpファイルを読み込ませる。
    
        ```terminal
        $ mysql -u MySQLユーザ名 -pMySQLのユーザ名に紐付いたパスワード dumpファイルを読み込むDB名 < dumpファイル名
        ```
1. 確認
    1. MySQLのコンテナ内で下記コマンドを実行してMySQLにログインする。

        ```terminal
        $ mysql -u root -p
        ```
    1. 下記SQLを実行してdumpファイルの内容が正常に読み込まれテーブルなどが存在していることを確認する。

        ```sql
        use dumpを読み込んだDB名;
        show tables;
        ```
AtCoder Regular Contest 105 参戦記

# AtCoder Regular Contest 105 参戦記

## [ARC105A - Fourtune Cookies](https://atcoder.jp/contests/arc105/tasks/arc105_a)

3分で突破. 全部試せば良い.

```python
A, B, C, D = map(int, input().split())

s = sum([A, B, C, D])
for x in [A, B, C, D, A + B, A + C, A + D, B + C, B + D, C + D]:
    if x == s - x:
        print('Yes')
        break
else:
    print('No')
```

## [ARC105B - MAX-=min](https://atcoder.jp/contests/arc105/tasks/arc105_b)

10分で突破. 言うまでもなくナイーブにシミュレートしたりすると、最大値を優先度付きキューとかで高速に取り出せたとしても、最小値 x = 1 とかの時に TLE 必死. かといって、余りを使ってシミュレートしても TLE する、鬼か.

この計算って実は最大公約数を求める問題だと気づければ、以下で解ける.

```python
from math import gcd
from functools import reduce

N, *a = map(int, open(0).read().split())

print(reduce(gcd, a))
```

## [ARC105C - Camels and Bridge](https://atcoder.jp/contests/arc105/tasks/arc105_c)

敗退. 終了10分前くらいに入出力例が通って「やった!」と思ったけど、半分くらいWA、TLE 2つという感じで…….
Windows10HomeとWSL2でUbuntu20入れてDocker動かすまで

# 概要
タイトル通り、`Windows10 Home Edition` のマシンに `Windows Subsystem for Linux（WSL）2` を使ってVMでLinux (Ubuntu20)を入れて、その中でDocker起動を成功させるまでの要点をまとめた記事です。ほぼ備忘録。

# 経緯
長い間、Vagrant & VirtualBoxでLinux動かしていい気になってたんですが最近(2020年10月)になってWSLがバージョン2でWindows10Homeエディションでも動くようになったことを知ったので自宅PCで試してみました。

# 手順
##1. Windowsバージョン確認
Homeエディション前提の話です。`Win+R`で「ファイル名を指定して実行」のダイアログを出し `winver` と入力。「Windows のバージョン情報」のダイアログが表示されるのでバージョン1903、OSビルド18362に届いていることを確認。

##2. WSL2とUbuntu20をインストール
https://docs.microsoft.com/ja-jp/windows/wsl/install-win10
大体これと同じ。Ubuntuは別に好きなバージョンでいい気がします。

##3. systemctlウゴカナイ現象に対応
VMにログインしてから、今回一番面倒だったのがこの現象。systemctl等のいくつかのコマンドで

```
System has not been booted with systemd as init system (PID 1). Can't operate.
Failed to connect to bus: Host is down
```

が出てしまう。「プロセスID (PID) 1番でsystemdが動いてないから操作できない」というもの。これはコマンドで`ps aux`とでも打てばすぐ確認できる。PID=1は `/init` というコマンドが占有している。WSL2特有の現象らしい。これには他の人も困っているらしくWSL公式のissueでも取り上げられているので後々のバージョンアップで解決しそうではある。

さて現時点ではどう解決するかというと、なんとこれ専用のプロジェクトがあって既にプログラムをリリースしてくれている。
https://github.com/arkane-systems/genie
.NETで動くらしいのでこれを入れる。
実は既に結構なサイトで導入手順が書かれているのだが、このプロジェクトのインストール方法が変わってるらしく他のサイトのやり方を真似しても途中でコケてしまった。故にここで自分のやった手順を残しておく。

###3-1. .NETランタイムをインストール
https://docs.microsoft.com/ja-jp/dotnet/core/install/linux-debian
ここのDebian10の項目を参考に。インストールはSDKではなくランタイムでよい。自分の手順は以下。

```
wget https://packages.microsoft.com/config/debian/10/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt update
sudo apt install -y dotnet-runtime-3.1
```

###3-2. genieをインストール
genieプロジェクトのreadmeを読めば大体わかる。自分がやったのは以下。このあたりの手順が変わってて他サイトの真似ではダメだった部分。もしかしたらこの手順も使えなくなってるかもしれない。

```
sudo touch /etc/apt/sources.list.d/wsl-translinux.list

sudo echo 'deb [trusted=yes] https://wsl-translinux.arkane-systems.net/apt/ /' > /etc/apt/sources.list.d/wsl-translinux.list

sudo apt update
sudo apt install -y systemd-genie

genie -s
```

最後のgenieコマンドはログインする度に必要になるので `.bashrc` 等に登録しておくのがいいかも。このコマンドにより、 `ps aux` で確認するとPID=1がsystemdになっている。

###4 Docker(とDocker Compose)インストール
まあここまでくれば後は説明不要かなと思う。

```
sudo apt install docker.io
sudo apt install docker-compose

sudo groupadd docker
sudo gpasswd -a $USER docker
sudo systemctl restart docker
```
(sudo groupadd dockerは不要かも。既にdockerグループあるよってエラー出た)

殴り書きで申し訳ない。
以上
停まれの看板を検知する.

## 初めに
前回までは乃木坂の顔を認識するモデルを作っていましたが,今回はとまれの標識を検知するプログラムを
作っていこうと思います.最終的にはエッジAIのようなシステムを目指します.
## 環境構築について
前回まで乃木坂の顔識別プログラムを書いていてそこで使ったものと全く同じものを使ってやっていくのでそっちを参考に環境は見ていただけると幸いです.
## アノテーションについて
これも前回同様ですのでお願いします.
## 学習について
70枚の画像を使って学習させていきます.
アノテーションした画像はこんな感じです.

epochs100回
## 結果
![results.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/931c283f-7527-a0e4-af69-8c3ad4510204.png)
![OIP.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/208af829-99cf-5fc5-9a51-c90504dbd2b7.jpeg)
![download.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/3c0a9dd5-4d7f-d5c8-9a40-d45c3fa979dd.jpeg)
![OIP.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/db8835bc-f465-ca05-120f-67019dbbdfa9.jpeg)

## 結論
70枚くらいの画像だとこんなもんかなぁって感じなんですけどこれだと実際には使えません.
がしかし,これをうまくシステムに落とし込んでからモデルの改良をしていきたいのでモデルの改良を後回しにして
次は他のプログラムに応用する可視化部分を書いていきたいと思います.
## 追記
epochs 1000でも学習させてみました.
結果はこちらです.
![results.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/2b21a3f3-4ec2-aacb-20a9-888af22beed5.png)
今回も同じ画像で検証してみました.
結果はこちらです.
![download.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/68f93ad6-7133-48be-1cc2-7691dc23aff4.jpeg)
![OIP.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567360/fc21ee5a-9a12-df1b-a193-d248ce551184.jpeg)
しっかりとはじいていることがわかります.したがって今回の学習は成功したといえます.
次は,このモデルを使って少しyolov5を改造していこうと思います.
docker環境構築してUbuntuコンテナを起動・停止するまで

環境構築がめんどくさいし、仮想環境はISO落としたりインストールしたりめんどくさいし
vagrantというので簡単に仮想環境も作れるみたいなんだけど
Hyper-VとかVM wareとか重いしどうしようと思っているときに
dockerの話を聞いたのでとりあえず入れてみようと思いました。

わりとコンテナ化というワードをきくし、
わざわざリソース割り振るのも面倒なのでWindowsにdocker入れてコンテナの勉強。

困ったことがあればquora（ https://jp.quora.com/ ）とかで聞けばいいのかな。

# ゴール
* ubuntuをdockerで立ち上げる


# インストール
https://www.docker.com/why-docker
+ Download Docker Desktopをクリック
+ DockerDesktop for windowsをクリック
+ GetStableをクリック
・・・407MBダウンロード・・・結局重い。
私のゴミみたいなネットワーク環境では環境ではダウンロードに5分。


+ OKクリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230450/46644c66-326c-02c2-ac97-febc6bd4c8e3.png)
+ インストール待ち（時間かかる）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230450/d47adffc-7ef8-b3b0-d714-ca1d1b4cb4d0.png)
+ Windows再起動
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230450/21a26242-242a-3cdf-ad21-003cf7897bfa.png)

+ 再起動したらエラーが出ました。Linuxのカーネルがインストールされていないようです。
+ dockerはubuntuやnginx、nodejsなどが動くコンテナを作れるが、それを動かすベースとなるLinuxのカーネルが必要という認識です。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230450/f13d0533-6144-7a77-e78f-c50b4db10141.png)


+ https://aka.ms/wsl2kernel/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230450/aadb3d37-9082-0a82-e401-838d1bc4e41c.png)
+ リンクからWSL2 Linuxカーネル更新プログラム`wsl_update_x64.msi` をダウンロードしてインストール。
+ ついでに、Linuxカーネルと仮想マシン機能を有効にしておきます。以下のコマンドです。（参考：https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

+ docker起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230450/05df268c-22b7-198a-3acd-c9070cb2040a.png)


# ubuntuインストール
作ったイメージを上げることも想定していないので、dockerHUBアカウントは作らない。PowerShellやコマンドプロンプトを使いながら以下の流れでコンテナを作って操作

+ ubuntuのイメージをDLコマンド
+ コンテナの作成コマンド
+ コンテナ操作コマンド

### dockerにイメージがあるかを確認

```
docker images
```

### ubuntuのイメージをＤＬ

```
docker pull ubuntu
```

### dockerのコンテナを作成

```
docker run -it --name test ubuntu
```

### コンテナの一覧を表示

```
docker ps -a
```

### コンテナの停止

```
docker stop test
```

### コンテナの開始

```
docker start test
```

### コンテナの中に入ってコマンドを打つ

```
docker exec -it test bash
```

### コンテナを削除

```
docker rm test
```

### ubuntuをつかえたけど。
`ifconfig`も`ip address show`も使えなかった。
イメージで何ができるかは明確にしておく必要がある。

# まとめ
+ dockerのざっくりしたコマンドは理解。オプションはひとまず`pull`, `run` , `exec`, `start`, `stop`を覚える。 
+ 落してきたイメージはできること、できないことが決まっている。
【AWS初学者用】AWS Well-Architectedフレームワークとは？

#本記事について
本記事はAWS初学者が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
私自身もAWS初学者なので、もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## AWS Well-Architectedフレームワーク
本記事では「AWS Well-Architectedフレームワーク」について書いていきたいと思います。
まずはじめにAWS公式サイトでの説明をみてみます。

> AWS Well-Architected フレームワークは、AWSのソリューションアーキテクト(SA)が、AWSのサービス開始から10年以上に渡り、様々な業種業界、数多くのお客様のアーキテクチャ設計および検証をお手伝いしてきた経験から作成したクラウド活用のベストプラクティス集です。具体的には「運用の優秀性」「セキュリティ」「可用性」「パフォーマンス効率」「コスト最適化」の5つの観点について、クラウドをより活用するための設計原則と、お客様システムがベストプラクティスに沿っているかを確認するための質問と回答で構成されています。本ホワイトペーパーは、クラウドにおけるアーキテクチャ設計や運用に携わっているすべての方に読んでいただきたい内容となっています。
一方でお客様のシステムが必ずしもAWSが提唱する全てのベストプラクティスに沿っている必要はありません。ベストプラクティスをご理解いただいた上で、お客様ご自身でのビジネス的なご判断を実施いただくためのアイデアです。

AWS初学者の私からするとこの説明でもイマイチ理解が深まりませんでした。（勉強不足でスミマセン...）
なのでこれから理解できる様に説明を書いていきます。

## AWS Well-Architectedフレームワークの概要（簡単に）

### AWS Well-Architectedフレームワーク
Well-ArchitectedフレームワークはAWSが数多くのサービスを提供してきた経験をもとに、最善のやり方や解決・改善策を整理しました！と言う感じです。
ユーザーがクラウド活用のノウハウを効率よく行えるための資料の様なものといった感じかと。そしてこのフレームワークは質問と回答で構成されているということです。

### Well-Architectedフレームワークの5本の柱
このフレームワークには**「運用上の優秀性」**、**「セキュリティ」**、**「信頼性」**、**「パフォーマンス効率」**、**「コスト最適化」**という5つの柱が存在し、これを基本設計に組み込むことで安定した効率の良いシステムが作成できる、といううものです。
それでは5つの柱を順番にみていきます。

1. **運用上の優秀性**
運用上の優秀性の柱は、AWS上で構築したシステムでビジネス価値をもたらすために運用面でどんなことを気をつければ良いか記載してあります。

2. **セキュリティ**
セキュリティの柱は、AWS上で構築したシステムとデータや資産をどの様に保護しセキュリティを向上するかが記載されています。

3. **信頼性**
信頼性の柱は、AWSでの障害が起きた際の復旧について、どの様に障害を防止するかが記載してあります。

4. **パフォーマンス効率**
パフォーマンス効率の柱は、コンピューティングリソースを効率的に使用することについて記載されています。

5. **コスト最適化**
コスト最適化の柱は、無駄なコストは排除し最適化することについて記載してあります。

## まとめ
AWS Well-Architectedフレームワークは、AWSを利用する上での重要なベストプラクティス(最善の方法)集です。
ベストプラクティスに沿っているかを確認しながらシステムの構築・運用をしましょう。
S3でhtmlファイルを公開する簡単な方法

##はじめに
簡単にS3からhtmlファイルを世界中に公開する手順を書きます。

##手順
1. "バケットを作成する"をクリック  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f1a6c27d-4afb-7990-1e80-c865512720e9.png)

2. "作成"をクリック  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/7b743b20-9954-7854-875f-065badbd7131.png)

3. "アップロード"をクリック  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f60b9188-9c88-5d45-4106-adb9ce6fc75d.png)

4. ファイルをドラッグアンドドロップ  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/719a42c3-bd4b-2b0c-d62c-95a9dc3bd01f.png)

5. "アップロード"をクリック  
6. パブリックアクセス設定をすべてオフにする  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/8415bbbc-47ce-6aee-c6f5-8c205cf8415c.png)

７. バケットポリシーを設定  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/4e8c0f9e-cca7-5a64-4411-316d16dfecd6.png)

##参考記事
- バケットポリシーについて  
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html
ラビットチャレンジ - 深層学習 Day1 Section2 活性化関数

# 0．概要
本記事は日本ディープラーニング協会認定の講座プログラムである「ラビット・チャレンジ」が提供している科目の1つである深層学習のレポートである。
記事タイトルに記載のとおり、Day1 Section2の活性化関数について以下にまとめる。

# 1．活性化関数
ニューラルネットワークにおいて、次の層への出力の大きさを決める**非線形**の関数。
次の層への値を伝えるか伝えないか、またはその強弱を定める。

## 1.1．中間層に用いられる活性化関数

### 1.1.1．ステップ関数
閾値を超えたら発火する関数。
出力は常に閾値を超えた時の1か超えなかった時の0。
線形分離可能なものしか学習できない。

```math
f(x)=
\begin{cases}
1 \ \ (x\ge0) \\
0 \ \ (x<0)
\end{cases}
```

```Python:
def step_function(x):
  if x > 0:
    return 1
  else:
    return 0
```

現在は殆ど使われない。

### 1.1.2．シグモイド関数
0～1の間を緩やかに変化する関数。
0～1の間で表現されるため信号の強弱を伝えることができる。

```math
f(x)=\frac{1}{1+e^{-x}}
```

```Python:
def sigmoid(x):
  return 1 / (1 + np.exp(-x))
```

勾配消失問題が起きることがある。

### 1.1.3．ReLU関数(ランプ関数、正規化線形関数)

最もよく使われている関数。
入力が0より大きければそのまま出力し、0より小さければ0とする。

```math
f(x)=
\begin{cases}
x \ \ (x>0) \\
0 \ \ (x\le0)
\end{cases}
```

```Python:
def relu(x):
  return np.maximum(0, x)
```

勾配消失問題の回避やスパース化に貢献する。

例えば画像の畳み込みの場合、RGBは本来0～255の正の値しかないのに重みとバイアスをもとに算出した値に負の値が出てきていたらそれは画像の特徴を全く捉えれていないことになるので、不要なデータである。
ReLUは負数を0にするのでこういう場合に良い。

### 1.1.4．その他の活性化関数

* tanh(双曲線正接関数)：-1～1の間で出力する。
* LReLU：ReLU関数の拡張。0以下の場合は入力値をα倍(基本的に0.01固定)した値を出力する。
* PReLU：LReLU関数の拡張。αの値は学習によって動的に決まる。
* ELU：LReLUやPReLUを改善した関数。オイラー数を底とする指数関数を使うことで0以下の場合は0～α(基本的に1.0)の値を出力する。
* SELU：ELUの拡張。入力値が0以下でも0より大きくてもλ倍した値を出力する。
* Swish(SiLU)：入力値が0以下ならほぼ0、0より大きければほぼ入力値そのままを出力する。ReLU関数に似た出力になる。
* Mish：Swishによく似た関数。入力値が0以下ならほぼ0(最小値で約-0.31)、0より大きければほぼ入力値そのままを出力する。
* FReLU：最近できた活性化関数。画像認識に特化している。

## 1.2．出力層に用いられる活性化関数

### 1.2.1．ソフトマックス関数
他クラス分類の活性化関数。
各クラスに該当する確率を出力する。

### 1.2.2．恒等関数
入力値をそのまま出力する関数。
主に回帰問題で使用される。

### 1.2.3．シグモイド関数
ロジスティック回帰で使われていた時と同じように2値分類の活性化関数。
1のクラスに該当する確率を出力する。

# 2．確認テスト

## 2.1．確認テスト1
線形と非線形の違いを簡潔に説明せよ。

回答：
線形
![nonlinear2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389699/efd885b4-932f-fc64-b2f7-bbc267b37847.png)

非線形
![nonlinear3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389699/5f2b5f5e-659a-b734-8962-6fc841f41159.png)

図は機械学習の非線形回帰ハンズオンから。
線形は直線で表される関数(1次関数)。
非線形は曲線で表される関数(2次以上の関数)。

## 2.2．確認テスト2
「1_1_forward_propagation.ipynb」から活性化関数を使っている箇所を抜き出せ。

```Python
# 1層の総出力
z1 = functions.relu(u1)

# 2層の総出力
z2 = functions.relu(u2)
```

# X．ラビットチャレンジとは
ラビットチャレンジとは、日本ディープラーニング協会認定の講座プログラムの1つ。
E資格を受験するためにはこのラビットチャレンジ等、いずれかの講座プログラムを修了しなければならない。

ラビットチャレンジの特徴は「現場で潰しが効くディープラーニング講座」の通学講座録画ビデオを編集した教材を使用した自習スタイルであるという点。
サポートは他の講座より少なく、受け身ではなく自主的に学んでいく姿勢でなければ進められないが、その分、他の講座に比べると安価であり、手が出しやすい。
ある程度知識がある人、自力で頑張るぞというガッツのある人向けではないかと感じる。

![bnr_jdla.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389699/bce66671-a2f5-a7f9-de6f-3f87e15c253b.png)
Firebase で無料で作るハイスコアDB(2) : 課金・認証を考える

## 前回までの砂漠のひつじ

無料プログラム学習用ピコピコゲーム[砂漠のひつじ](https://kaku3.github.io/the-sheep-in-the-desert/)を作成しつつ、その過程を記事にしている。
現在はハイスコア実装編で、DBをfirebaseに選定し実装を行っている最中となる。

## 課金に関するあれこれ

読み取り、書き込みで課金が発生。
Spackプランの無料枠は以下。

|処理   |件数   |
|---|---|
|書き込み   |2万/日   |
|読み取り   |5万/日   |

「回数」ではなく「件数」っぽいので注意。

ハイスコアテーブルという性質上、上位のスコアとしての書き込みは極めて少ないハズ。
そこで、Functionsを利用して、**『書き込みイベント時に上位レコードを集計して1レコードにまとめる処理』**を作りたかったが、**SparkプランではFunctionsが利用できなくなっていた**ので断念した。
※挫折気味のサンプルコードはリポジトリに一応コミットしておいた。

現状、20件程のダミーレコードを用いて少し開発していただけで、読み取り数が680となっていたため、まともなアクセスがあればあっという間に読み取り数5万件に到達するように思えた。

ユーザーにはハイスコア登録を行っている事を知らせるため、ファーストビューでハイスコアの表示を行いたいが、Functions が動かせないため、1日1回ハイスコア更新などの実装にはできない。
そこで、ハイスコアは起動時にキャッシュし、ハイスコアに「自分のスコア」がエントリーしない限りは更新されなくてもさして問題ないとして、取得したハイスコアより自分のスコアが上回った時のみハイスコアを更新する仕様として、可能な限り読み取り回数を減らすこととした。

## DB書き込みについて

オールドゲームらしく誰でも任意のニックネームでハイスコアを登録可の仕様とする予定であった。
しかし、webapp の場合、firebaseのdatabaseURLが取得可能であるため、「誰でも」登録可とした場合、外部から何らかの方法でデータ登録が可能になり**課金される**ことが懸念される。

そのためDBにスコア登録可能となるのはログイン済みのユーザーとすることにした。
`firebase.auth.AuthUI()`を使うと非常に簡単にSNSログインを実装できた。

``` auth.js
var firebaseAuthUiConfig = {
  autoUpgradeAnonymousUsers: true,
  signInFlow: 'popup',
  signInOptions: [
    // ログイン可能としたいproviderを列挙
    // Facebook, Twitter, Github はそれぞれアプリ作成が必要
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
  ],
  tosUrl: './terms-of-service.html',
  privacyPolicyUrl: './privacy-policy.html',
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      console.log('signed in')
      return false;
    }
  }
};

var firebaseAuthUi = new firebaseui.auth.AuthUI(firebase.auth());
```
``` game.js
// 指定したタグに対してログインUIを作成する
firebaseAuthUi.start('#firebaseui-auth-container', firebaseAuthUiConfig)
```
``` index.html
// firebaseによるログインUIが作成されるタグ
<div id="firebaseui-auth-container"></div>
```

ただ、無名のゲームでいきなり会員登録を求めるとそもそもプレイしてもらえないと思うので、結果画面でハイスコアが更新された時のみログインを求める実装とすることにした。

※ログインUI。ログイン方法を選択するとポップアップが表示される。
![auth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/d5bcca8a-0c7c-5f0b-4e01-b52d06b4de0f.png)

## おわりに

今回はハイスコア処理を完成させる予定だったが、認証処理も追加したため完了しなかった。
とは言え、firebaseはSNSログインもクソ簡単ですごかった。

作業中のファイルは以下にコミット済：
https://github.com/kaku3/the-sheep-in-the-desert/tree/feature/firebase
IT用語集

* LAN(Local Area Network)
ある拠点のネットワーク

* WAN(Wide Area Network) 
LAN同士を接続するためのもの

* AS(Autonomous System)
世界中の様々な組織が管理しているネットワークが繋がったものがインターネットであり、その組織のネットワークのこと

随時更新中
pip list がいつまでも終わらない。

#はじめに
Raspberry Pi Zero WのPython3を更新しようと、Python3.9をビルドしてインストールしました。
すると、`pip list`でインストール済みパッケージ一覧を確認する際に、リストもエラーも表示されずに止まってしまう症状に遭遇しました。Zeroだから時間がかかるのかな？と思い数時間放置してみましたが、変化ありませんでした。
ネットで検索してもズバリの回答が見当たらなかったため、ここに解決法を記します。

最後に追記あります。
この症状は、システムをバックアップを作成して複製後のSDカードで起動したり、host名を変更したことにより、乱数生成機の乱数が枯渇していたことが根本原因でした。

##症状
`pip list`でインストール済みパッケージ一覧を確認すると、何も表示されません。
^Cで止めると、デバッグ情報がズラズラと出てきて、`self._config = {'authkey': AuthenticationString(os.urandom(32))...`が含まれるあたりでTerminateした事がわかります。

##確認
`python3`で対話モードを起動して、以下のように入力して、エラーが帰ってきたら同様の症状です。（エラーは記録忘れました。```Resource temporarily unavailable```みたいな感じだったような）

```
>>> import os
>>> os.getrandom(1, flags=os.GRND_NONBLOCK)
b'\xf9'（これは、問題ない場合。問題があると、ここにエラーが出る）
```

##対策

```
sudo mv /dev/random /dev/random.orig
sudo ln -s /dev/urandom /dev/random
```

pythonやpipとは無関係の、こちらの対策方法が参考になりました。
https://codz.me/2017/06/10/can-not-read-from-dev-random/

##追記：なぜ起こったのか。対策は妥当なのか
Python3.9のインストールの直前、起動用SDカードをバックアップして複製したSDカードで起動、さらにhost名を変更しました。
どうやら、その過程で擬似乱数が枯渇した（または初期化された）ようです。
そのため、Blockingなrandomだと、乱数が溜まるまでリトライを繰り返していました。
上記の対策はunlockedな乱数生成機を強制的に使うようにする操作でした。副作用として、偏りのある乱数が使われる可能性があります。
しばらく運用して充分に乱数が溜まっていれば、もとのBlockingな乱数生成機に戻したほうが、あるべき姿になりそうです。
参考：https://ja.wikipedia.org/wiki//dev/random
【Kotlin】varargの実体はArray<out T>

この記事は当初「`vararg`から`Array`への変換はキャストでもできる」としていましたが、@sdkei氏からコメントでご指摘を受け、タイトル及び内容を全面的に修正しました。

---

# 結論
オブジェクト型の`vararg`は`Array<out ${引数の型}>`に代入できます（`Array<${引数の型}>`へ直接代入することはできません）。
プリミティブ型の`vararg`はそれぞれのプリミティブ型の配列としてキャスト無しで扱えます。

これは、`vararg`の実体が配列であることによります。

## 捕捉
これはあくまで`Array`が欲しい場合の話で、通常のコードでは`List`もしくは`MutableList`にして扱うべきです。
python の 実数の除算(/)と整数除算(//)

#問題

[問題A](https://atcoder.jp/contests/arc107/tasks/arc107_a)で入力が

```
1000000000 987654321 123456789
```
と入力するとき

```
A, B, C = map(int, input().split())
ans = (A * (A + 1) * B * (B + 1) *  C * (C + 1) / 8) % 998244353
print(int(ans))
```
のように回答したがWAが出てしまった。
他の人のAC解答を見てみると

```
A, B, C = map(int, input().split())
ans = (A * (A + 1) * B * (B + 1) *  C * (C + 1) // 8) % 998244353
print(int(ans))
```
のように/か//の違いしかなかった。

# 解決

```
print(type(A * (A + 1) * B * (B + 1) *  C * (C + 1)/8))
print(A * (A + 1) * B * (B + 1) *  C * (C + 1)//8)
```
としてみると結果はなんと、、、

```
1.8584458350497822e+51
1858445835049782285757026664950217712384527500000000
```
というように//が正確に計算している一方で、/は途中で切り捨てていることが分かる。その理由としてはfloat型に変更してしまっていることが挙げられる。

# 感想
この知識は大事だが、問題をどのように解決するかを思いつくのが遅すぎた。せっかく問題Bを解けたのに、一瞬で解けるような問題Aを落としてしまったのが痛い。
S3イベントからLambda上のLaravelを起動する

既存の処理をLambda上のLaravelにまとめるためにいろいろやってきましたが

- [SQSからLambda上のLaravelを動かす - Qiita](https://qiita.com/kenji0302/items/fec0c3fd79ceeabaf5fd)
- [LambdaでLaravelのコマンドを定期実行する - Qiita](https://qiita.com/kenji0302/items/7bd46f79fff4300300bc)

今回はS3イベントからLambda上のLaravelを起動します。

## 前提

Laravel 並びに brefphp を導入済であること。brefphp の導入については　[brefphpを使って簡単にLaravelをサーバレス環境で動かす - Qiita](https://qiita.com/YuK1Game/items/ff7744478339c09151d5) がお勧めです。
Laravel については[こちらのドキュメント](https://readouble.com/laravel/)を参照してください。

## serverless.yml

バケットは「対象のバケット名」で作成済みで、s3://対象のバケット名/text/*.txt が新規作成された時に起動する設定です。

```yml
service: test-app

provider:
    name: aws
    region: ap-northeast-1
    runtime: provided
    iamRoleStatements:
      - Effect: Allow
        Action:
          - s3:*
        Resource: "arn:aws:s3:::対象のバケット名/*"


plugins:
    - ./vendor/bref/bref

functions:
    s3Created:
      handler: s3Event.php
      layers:
        - ${bref:layer.php-73}
      events:
        - s3:
            bucket: "対象のバケット名"
            events:
                - "s3:ObjectCreated:*"
            rules:
                - prefix: text/
                - suffix: .txt
            existing: true # 既存のバケットを利用する場合のみ記述
```

s3Event.php 

```php

<?php
/**
 * S3との連携動作
 */
declare(strict_types=1);
require __DIR__.'/vendor/autoload.php';

return function (array $event) {

    $app = require __DIR__ . '/bootstrap/app.php';

    $kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
    $kernel->bootstrap();

    $controller = new App\Http\Controllers\S3Controller;
    foreach($event['Records'] as $record) {
        return $controller->s3created($record);
    }
    return true;
};
```

app/Http/Controllers/S3Controller.php

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Aws\Exception\AwsException;

class S3Controller extends Controller
{
    /**
     * 作成されたTextファイルを取得
     */
    public function s3created($body)
    {
        // $body['s3']['object']['key'] が新規に作成されたTextファイルのkey。
        // 例) text/hogehoge.txt
        // ファイルへのアクセスについては config/filesystems.php で設定し 
        //     Storage::disk('s3')->get($body['s3']['object']['key']) 
        // のように取得するのが良いと思います
    }
}
```
コマンドの仕組みと管理ツール

#コマンドの仕組みと管理ツール
#目的
* 環境構築で使用したツールとその仕組みを理解すること
* パッケージ管理ツールで管理する理由を理解すること

#シェル
##簡単に言うと「ターミナルとOSを繋ぐ窓口役」のような存在。ターミナルから入力されたコマンドを読み取って、OSに対して指示を渡し、結果をターミナルに返して表示や実行などの動作をさせる
#zsh
##zshはシェルの1つ。ターミナルでecho $SHELLとコマンドを実行すると現在使用しているシェルはzshであることがわかる
#PATH
##「環境変数」と呼ばれるOS用の変数のことです。PATHには、複数の絶対パスの情報が保存されている。コマンドが入力されたときに、シェルはPATHに記述されたパスのディレクトリ内のファイルを検索する。つまり、PATHに絶対パスを保存してアプリケーションのありかを示せば、どこからコマンドを実行してもアプリケーションのコマンドを打つことができる
#コマンドラインツール
##コマンドで操作するアプリケーションのまとまり。コマンドラインツールを導入することで、OSが初めからコマンドで操作できるアプリケーション以外のアプリケーションをPCにインストールできる
# Command Line Tools
##macOS専用のコマンドラインツールのこと。macOSでは、元々Linuxコマンドで操作できるアプリケーションや機能を標準搭載している。Linuxコマンド以外で操作するアプリケーションの多くはCommand Line Toolsのインストールによって、まとめてPCに導入できる
![81cd864a5173616b548123c484609dd8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/f0e05193-7281-0ed7-d4c6-1691a2a902cc.png)
##たとえば、数々のソフトウェアをインストールする際に必要な「コンパイラ」と呼ばれるものもCommand Line Toolsに含まれる。また、gitコマンドでGitを操作できたのは、Command Line Toolsをインストールしたから（デフォルトで使用できる場合もあります）。そのため、はじめに行った環境構築のカリキュラムでは、まずコマンドラインツールを導入して、続いてHomebrewのインストールをし、brewコマンドによるHomebrewの操作を可能にするところから始まっている
#以上
Javascript内でassetsフォルダの画像を参照する。

タイトルの通りですが、Javascript内でassetsフォルダの画像を参照するときのパスの書き方についてです。
現時点でとりあえず分かったことを記録しておきます。

## 結論
####imagesは抜きでパスを書く
現状として該当アプリケーションのファイル階層は以下のようになっています。
``app/assets/images/hoge.png``
そしてJavascriptファイル内で参照するときは以下のように記述します。
``/assets/hoge.png``

このようにassetsの下の階層にあるimagesを抜いて記述をすることで参照ができるようになります。


##最後に
imagesを抜くことで参照ができるということはわかりましたが、なぜ抜くのかがわかっていません。
わかり次第追記していこうと思います！！
(もし、わかる方や参考記事等知っている方いましたら教えていただけると嬉しいです:blush:)

### 参考記事
https://codenote.net/ruby/rails/1127.html
Python + staticmap で OpenStreetMap や地理院地図の画像を取得する

## 概要

- Python 用ライブラリの [staticmap](https://github.com/komoot/staticmap) を使って OpenStreetMap や地理院地図の画像を取得する

## 今回の環境

- macOS Catalina + Python 3.9.0 + staticmap 0.5.4

## staticmap のインストール

staticmap パッケージをインストールする。

```
$ pip install staticmap
```

依存ライブラリとして Pillow と requests もインストールされる。

## staticmap デフォルトの地図画像を取得する

ソースコード。

```py
from staticmap import StaticMap

# 地図オブジェクトを生成
# 画像の横幅(ピクセル)と画像の縦幅(ピクセル)を指定
map = StaticMap(800, 600)

# 地図を描画した Pillow の PIL.Image オブジェクトを取得
# ズームレベルと経度・緯度を指定
image = map.render(zoom=17, center=[136.882090, 35.170560])

# 地図画像を保存
image.save('komoot.png')
```

実行結果。

![komoot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/f3b94d85-7ad9-c53f-83bd-4b69121669b7.png)

## OpenStreetMap の地図画像を取得する

ソースコード。

```py
from staticmap import StaticMap

# 地図オブジェクトを生成
# 画像の横幅と縦幅と OpenStreetMap 標準タイルレイヤーのタイルURLを指定
map = StaticMap(800, 600, url_template='http://a.tile.openstreetmap.org/{z}/{x}/{y}.png')

# 地図を描画した Pillow の PIL.Image オブジェクトを取得
# ズームレベルと経度・緯度を指定
image = map.render(zoom=17, center=[136.882090, 35.170560])

# 地図画像を保存
image.save('osm.png')
```

実行結果。

![osm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/b7a5bd70-abe1-45b3-cec4-2ae0cf12f2da.png)

## 地理院地図の地図画像を取得する

ソースコード。

```py
from staticmap import StaticMap

# 地図オブジェクトを生成
# 画像の横幅と縦幅と国土地理院の地理院タイルURLを指定
map = StaticMap(800, 600, url_template='https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png')

# 地図を描画した Pillow の PIL.Image オブジェクトを取得
# ズームレベルと経度・緯度のリストを指定
image = map.render(zoom=14, center=[136.882090, 35.170560])

# 地図画像を保存
image.save('chiriin.png')
```

実行結果。

![chiriin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/81f0fe83-dc04-341a-0590-2a2712201f87.png)

## 参考資料

- [GitHub \- komoot/staticmap: A small, python\-based library for creating map images with lines, markers and polygons\.](https://github.com/komoot/staticmap)
- [Tiles \- OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Tiles)
- [Zoom levels \- OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Zoom_levels)
- [Tile Usage Policy (OSMF Operations Working Group)](https://operations.osmfoundation.org/policies/tiles/)
- [地理院地図｜地理院タイルについて](https://maps.gsi.go.jp/development/siyou.html)
- [地理院地図｜地理院タイル一覧](https://maps.gsi.go.jp/development/ichiran.html)
- [Image Module — Pillow \(PIL Fork\) 8\.0\.1 documentation](https://pillow.readthedocs.io/en/stable/reference/Image.html#PIL.Image.Image.save)
RSpecのテストコード実行編

#はじめに
　以前に、RSpecの導入方法やテストコードの書き方については投稿したが、実際のテスト方法については説明していなかったので、今回書いたテストの実行方法について見ていく。

【以前の投稿】
[RSpec導入後、モデルの単体テストコードを書き始めるまで](https://qiita.com/TerToEer_sho/items/2d42c0cdb7a623a32119)

[もう迷わない！RSpec導入の流れ](https://qiita.com/TerToEer_sho/items/472e14df6fbb8e83ebf9)

##書いたテストコードの実行方法

カレントディレクトリが作成中のアプリケーションであることを確認の上、ターミナルで

```bash
bundle exec rspec spec/models/ファイル名
```

ファイル名は、実際にテストコードを記述したファイルのこと。

テストがうまくいけば、エラーもなく、examplの項目（日本語で何をチェックしたいか記述している部分）が全て緑色になる。

##binding.pryで止めた場合
```
% @user.valid?
#=>false
% @user.errors.full_messages
```
userモデルの単体テストコードの場合
`@user.errors.full_messages`の結果が、エラーメッセージに含まれているかどうかをテストする。
Could not build module 'nanopb'

## 急にこういうエラーでビルドができなくなった場合

![スクリーンショット 2020-10-31 23.29.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266239/750b45b0-e79a-01a1-63a2-c295039cf094.png)


この項目を No にして実行してください。
iOSアプリでBLEを利用するためのメモ

# BLEについて
* [開発視点の超簡単BLE入門](https://jellyware.jp/kurage/bluejelly/ble_guide.html)
* [UUID詳細](https://jellyware.jp/kurage/bluejelly/uuid.html)

# BLEを使った技術
* [AirPodsこそ理想のワイヤレスデバイスである](https://goodpatch.com/blog/airpods-design/)
* [「AirDrop」はなぜBluetoothとWi-Fiの両方が必要なの? - いまさら聞けないiPhoneのなぜ](https://news.mynavi.jp/article/20150510-iphone_why1/)

# アプリでBLEを利用する
* [Core Bluetooth](https://developer.apple.com/documentation/corebluetooth)
* [iOS Core Bluetooth (Swift) を使用してみた](https://knkomko.hatenablog.com/entry/2019/07/16/013443)
* [【Swift5】Bluetoothクラス実装の備忘録](https://qiita.com/haru15komekome/items/f5791d322995a3fd7452)
* [iOS13.5ではサードパーティアプリから接触確認アプリのBLEを検出することができない](https://qrunch.net/@recommended/entries/P35AuBfB5JZg5AT3?ref=qrunch)
ESXi6.7　KB55636警告アラーム

VMWare ESXi7.0 

■ 症状：
ESXiホストに下記の警告の抑止の情報が表示された。
-------------------------------------------------------------------------------------------
This host is potentially vulnerable to issues described in CVE-2018-3646, please refer to https://kb.vmware.com/s/article/55636 for details and VMware recommendations. KB 55636
-------------------------------------------------------------------------------------------

vCenter を 6.0 U3hまたは6.5 U2c、6.7d 以上にアップグレードした環境では、
ESXiホストに対しCVE-2018-3646の対策(ESXi サイドチャネル対応スケジューラ)が有効化されていない場合に、「このホストにはCVE-2018-3646で記述されている問題に対する脆弱性があります。 詳細およびVMwareの推奨については、https://kb.vmware.com/s/article/55636を参照してください」
といった警告メッセージがvSphere Client、Web Client上に出力されます。

対策方法は以下KBに記載がありますが、関連KBが複数あること、
全ESXiで「ESXi サイドチャネル対応スケジューラの有効化」する必要があり、
されには、Vmwareはこの設定の有効化でパフォーマンスが数%低下するとの指標を示しています。
※現状でCPU利用率がひっ迫している環境ではパフォーマンス低下が20%を超える可能性もあるようです。

■ 投機的実行に関連して発生するセキュリティ問題の概要
Intel プロセッサの「L1 Terminal Fault」(L1TF) 投機的実行の脆弱性に対する VMware の対応の概要 CVE-2018-3646、CVE-2018-3620、CVE-2018-3615 (55636)
https://kb.vmware.com/kb/55636?lang=ja


■ 対策：
ESXi サイドチャネル対応スケジューラの有効化

■ 手順

▼WebClient、HostClientで各ホストの詳細設定で変更する場合
１．ESXiサーバを選定してシステムの詳細設定へ移動
２．下記のキーの値を変更
　　VMkernel.Boot.hyperthreadingMitigation falseからtrueへ変更（デフォルトはfalse）
　　VMkernel.Boot.hyperthreadingMitigationlntraVM　trueからfalseへ変更
３．ESXiサーバを再起動

▼ESXCLIで設定する場合
確認方法
esxcli system settings kernel list -o hyperthreadingMitigation

設定方法
esxcli system settings kernel set -s hyperthreadingMitigation -v TRUE

▼PowerCLIで設定する場合
※PowerCLIでの設定方法は確認方法と合わせて以下KBで説明されています。

HTAware 軽減策ツールの概要および使用法 (56931)
https://kb.vmware.com/kb/56931?lang=ja

■「ESXi サイドチャネル対応スケジューラの有効化」した場合の性能影響について

上記KB55806の文中に、利用中の環境がどの程度の影響を受けるかアセスメントするツールがKB56931で公開されているので、事前に調査する場合は以下を参照ください。

HTAware 軽減策ツールの概要および使用法 (56931)
https://kb.vmware.com/kb/56931?lang=ja
Microsoftの機械学習モデル作成アプリケーション「Lobe」はラベル当たり5枚の画像があれば始められる

この記事では、2020/10/26に公開された[Microsoftの機械学習モデル構築アプリケーション「Lobe」](https://lobe.ai/)で機械学習による推論を行うための最小構成、ラベル当たり5枚の画像でどこまで推論できるかを調査しました。

結論、結構使える気がします。
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/34e9136f-b498-9432-efce-cf00e8f89b18.gif)

## Lobeとは

機械学習におけるモデルの作成を容易に行うことができる、PCへインストールするタイプのアプリケーション(ソフトウェア)です。
[2018年にMicrosoftが買収した](https://jp.techcrunch.com/2018/09/14/2018-09-13-microsoft-acquires-lobe-a-drag-and-drop-ai-tool/)後に[パブリックプレビューとして公開](https://blogs.microsoft.com/ai/lobe-machine-learning/)されました。

Lobeで何ができるのかについては[Lobeの動画](https://lobe.ai/tour)を見ていただくのが一番わかりやすいです。全編英語で字幕も英語のみですが、「水を飲んでる／飲んでない」をどのように分類するのかを10分程度で解説されています。

## Lobeに読み込ませる画像の数

Lobeは[1つのラベルに対して5枚以上の画像(Lobe has a minimum requirement of 5 images per label.)](https://docs.lobe.ai/docs/label/label)があればトレーニングが開始できます。
例えば物体の有無であれば「有」に5枚、「無」に5枚の、**計10枚の画像で推論が開始できる**という事です。

### 5+5=10枚の画像でやってみた様子

Found! = 5枚、Nothing... = 5枚の計10枚です。

![tpr6errgcph20mucce6ri0yrwchi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/217363ee-cfca-3f1c-4adc-ced45979671f.png)

そして評価の様子が冒頭の動画です。左下の緑色が推論結果です。

![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/34e9136f-b498-9432-efce-cf00e8f89b18.gif)

位置が多少ぶれても、また、方向が変わっても推論できています。
これは「Nothing... ではない」という形での推論だと考えられ、実際、別の物体を置いても「Found!」と推論されることがありますので注意が必要ではあります。

カメラや検出したいもの、対象物の位置、光量など環境が固定化できるのであれば、かなり少ない画像量でも機械学習による推論ができるのではないでしょうか。

## あとがき

IoTな視点から見るとLobeは**モデルをTensorFlow、TensorFlow Liteで実行できる形式でエクスポートできる**から、このモデルをRaspberry Piとかで動かせちゃうってところに魅力を感じますし、ようやっと「作る人、使う人の分業化」ができるようになったなと感じます。

[EoT]
node.jsでneo4jのOGMを使う①とりあえず動かしてみる

node.jsでOGM（オブジェクトグラフマッピング）を使うと簡単にデータにアクセスできます。

#環境変数の設定

①dotenvをインストールします。

```
npm i --save dotenv
```
②.envファイルをプロジェクトのディレクトリに作成

```/.env
// .env
NEO4J_PROTOCOL=neo4j
NEO4J_HOST=localhost
NEO4J_USERNAME=neo4j
NEO4J_PASSWORD=neo4j
NEO4J_PORT=7687
NEO4J_DATABASE=neo4j
NEO4J_ENCRYPTION=ENCRYPTION_OFF
```


#neodeのインストール

```
npm install --save neode
```

modesディレクトリを作成してモデルを定義

```/model/user.js
module.exports = {
  id: {
    type: 'uuid',
    primary: true
  },
  name: 'string'
}
```





```index.js
var neode = require('neode');
const instance = new Neode.fromEnv();//①.evnの設定でnoe4jデータベースに接続
instance.withDirectory(__dirname+'/../model');//②modelディレクトリ内のモデル定義を読み込み
instance.model("user").all() //③userをすべて読み込み
.then(collection => {//④userの読み込みに成功した場合の処理
            console.log(collection.length); // 1
            console.log(collection.get(0).get('name')); // 'Adam'
})
```

neo4jデータベースにテストデータ挿入
create (:user{uuid:"100",name:"test太郎"})
リモート デスクトップ サービス(RDS)が稼働しているWindows Server 2008 R2をWindows Server 2012 R2にインプレースアップグレードする際の注意点

#はじめに
最近、Windows Server 2008 R2をWindows Server 2012 R2へ
インプレースアップグレードした際に、__リモート デスクトップ サービス__が
インストールされている環境の場合、ちょっとしたハマった点がありましたので
その対応方法についての備忘録です。
※実際に行う場合は、自己責任でお願いいたします。

# インプレースアップグレード時の注意点
Windows Server 2008 R2で、リモート デスクトップ サービスが稼働しているサーバを
Windows Server 2012 R2へアップグレードする際に、事前の互換性チェックで
以下のメッセージが表示されてしまい、アップグレードの続行が不可となります。

~~~
    これらの問題が解決するまで、Windowsはインストールできません。続行するには、
    Windowsセットアップを閉じ、それぞれの問題を解決してから、もう一度Windows
    セットアップを実行してください。


    ・セットアップ中に、リモート デスクトップ セッション ホスト(RDSH)、リモート デスクトップ
    　接続プローカー(RDCB)、リモート デスクトップ仮想化ホスト(RDVH)、リモート デスクトップ
    　Web アクセス(RDWA)のいずれかのロールが１つ以上インストールされていることが
    　検出されました。サーバーをアップグレードするには、このようなコンポーネントを
    　アンインストールしてください。
~~~

このメッセージが表示された場合、該当のコンポーネントをアンインストールしてから
再度アップグレードセットアップを行います。
※リモート デスクトップ ライセンスサーバーは、アンインストールする必要はありません。

# アップグレード後に必要な手順
Windows Server 2012 R2にアップグレード後は、再度リモート デスクトップ サービスを
利用するには、以下の手順で環境の再構築を行う必要があります。
　
 __1.__ Windows Server 2012 R2用のクライアント アクセス ライセンス(CAL)入手
 __2.__ リモート デスクトップ サービス環境の構築
 __3.__ リモート デスクトップ ライセンス サーバーの再アクティブ化
 __4.__ Windows Server 2012 R2用のクライアント アクセス ライセンス(CAL)をインストールする

# __1.__ Windows Server 2012 R2用のクライアント アクセス ライセンス(CAL)入手
Windows Server 2008 R2のCALは、そのまま利用する事はできませんので、
新たにWindows Server 2012 R2のCALを購入する必要があります。

但し、Windows Server 2012 R2のCALをダウングレードして、使用していた場合は、
再購入の必要はありません。

# __2.__ リモート デスクトップ サービス環境の構築
Windows Server 2012 R2へアップグレードする際に、リモート デスクトップ サービスは
アンインストールしていますので、リモート デスクトップ サービス環境を作成します。

以下に手順が分かり易く纏まっていますので、こちらを参照してください。

Windows Server 2012 標準的なリモート デスクトップ サービス環境構築手順について
https://docs.microsoft.com/ja-jp/archive/blogs/askcorejp/windows-server-2012-2

# __3.__ リモート デスクトップ ライセンス サーバーの再アクティブ化
「RD ライセンス マネージャー」でライセンスサーバーの状態を確認すると、
以下のメッセージが表示されていますので、再アクティブ化が必要です。

~~~
    LSがアップグレードされました。再アクティブ化が必要です
~~~

ライセンスサーバーを再アクティブ化する
https://docs.microsoft.com/ja-jp/troubleshoot/windows-server/remote/deactivate-reactivate-license-server#reactivate-a-license-server

# __4.__ Windows Server 2012 R2用のクライアント アクセス ライセンス(CAL)をインストールする
Windows Server 2012 R2のCALをインストールします。

リモート デスクトップ ライセンス サーバーに RDS クライアント アクセス ライセンスをインストールする
https://docs.microsoft.com/ja-jp/windows-server/remote/remote-desktop-services/rds-install-cals


なお、不要となったWindows Server 2008 R2のCALは、以下ページに記載のある手順
「1-1. 一台のライセンスサーバーに複数のライセンスパックをインストールしており、任意のライセンスパックを削除したい」
の手順で削除することが可能です。

RDS CAL のサーバー間移行手順について
https://social.technet.microsoft.com/Forums/ja-JP/f16b765f-9449-40f5-aba1-20e09b73506c/rds-cal?forum=Wcsupportja

以上で、リモート デスクトップ サービス環境の作成は完了となります。
MAMPでApacheどころかNginxも起動しない。[解決しませんでした😭]

MAMP初インストールでWordpressいじってみるぞ〜と思ったら、サーバーの起動でいきなりつまづいたので記録を残す。
「Apache couldn't be started. Please check your MAMP installation and configuration.」
具体的に言うと、preferencesでPortを80&3306のPortに変えた後、サーバー起動ボタンを押したら注意表示が出た。

この時点でネットで調べたが、日本語の情報だとみんなApacheは無理だけどNginxなら起動した〜とかポートの番号変えてみたらいけた〜だとかでなんとなく私の状況とは違いそうな感じがした。

#環境
・MacOS10.13.6
・MAMP6.0.1(MacOS10.13対応のはず)



#やったこと①ログの確認
/Applications/MAMP/logs/apache_error.log 
というlogファイルが本来はあるらしいのだが、私のlogsディレクトリの中にはそもそもそんなファイルなかった。
[参考URL](https://bityl.co/4FeT)


#やったこと②再インストール
app.cleanerを使ってMAMPを一度削除→再インストール

結果変わらず。ApacheもNginxも起動しなかった。
ちなみに私はインストールしょっぱなからダメだったので、バックアップはとってないけど、使ってる途中でダメになったらバックアップとらないとだめらしい。

#やったこと③[このYoutubeの動画](https://www.youtube.com/watch?v=537cQ9vpybY)を試してみた。
desktopにhelloworldディレクトリを作り、そこでApacheを起動。
結果変わらず。ApacheもNginxも起動しなかった。


#やったこと④[このYoutube動画](https://www.youtube.com/watch?v=lnbqlf09L8M)を試してみた。
①MAMP/Library/bin/envvars を　MAMP/Library/bin/_envvars
に直す。

②その後、ターミナルで`$sudo apachectl stop` を実行

結果なんかよくわからない画面になって戻らなくなった怖い😭
![Screen Shot 2020-10-31 at 22.45.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/aefa4bb9-4f6a-4e16-ba62-1b0baafb4e39.png)

でもlocalhostを見てみたところ、Index ofの文字が！！これ起動できてるって事よね？多分。
外国人のお兄さんありがとう解決しました。
![Screen Shot 2020-10-31 at 22.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/0a712324-caa4-eabd-2b69-34e461cb3327.png)


#その後の追記
ちなみにサーバーを起動させると、自動で以下リンクに飛ぶらしいのですが、飛ばなかったので手打ちで行ったら明らかになんか古いページに..
なんだろうこれ..古いページ？？謎深いです。
http://localhost/MAMP/?language=Japanese
![Screen Shot 2020-10-31 at 23.22.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/ae431c28-837c-45c4-cdb6-b636727208c7.png)

そしてPHPのVersionを3.7.2に指定してもtoolのphpMyAdminがオンにできない。

localhostは見れるけど、MySQLが起動できず、htdocsディレクトリにテストファイルを入れたらlocalhostも見れなくなる。


とりあえずMAMPは諦めてXAMMP=> Local by Flywheelも試してみたけど、なぜか全部不具合が出てしまって結局Wordpressのカスタマイズはできませんでした..私のMacが悪いの？笑

Dockerで環境も作れるみたいなんですが、手持ちのMacのメモリが8GBしかないのでめちゃくちゃ構築に時間がかかっちゃうんですよね..うう〜〜どうしよう😂
https://bityl.co/4SsX
ローカル（ソース非公開）プロジェクトでGo言語の推奨ディレクトリ構成（golang-standards/project-layout）を使う

#### go version go1.15.2

[Go言語コミュニティの推奨ディレクトリ構成](https://github.com/golang-standards/project-layout)に従い、標準のパッケージ管理システムである「[Go Modules](https://github.com/golang/go/wiki/Modules)」を使おうとして微妙にハマった。
自サイトに同じ記事をメモとして書いたが、ツッコミが欲しくなったのてQiitaにも投下しておく。

## ディレクトリ構成例

エクスクラメーションマーク（!）が付いている名前（及び下位要素）は、任意の識別子です。

```shell
my_project(!)
├── web # Webシステムで使うシステム外リソース。jsとか画像とか
├── assets # Webシステム以外で使うシステム外リソース。
├── cmd # mainモジュールを格納
│   ├── mainexe(!) # プロジェクト中の実行ファイル。この単位でbuild
│   │   └── main.go
│   └── confexe(!) # 別実行ファイル例
│       └── main.go
├── configs # 設定ファイル
│   └── main.yaml(!)
├── docs # ドキュメント。自分用なのでメモを突っ込んでる
│   └── readme.md
├── internal # 非公開モジュール
│   ├── app # このプロジェクト専用のモジュール。ビジネスロジック的な？
│   │   ├── mainexe(!) # 実行ファイル別に分ける
│   │   │   └ mainview # MVCSでいうService的な感じ？
│   │   │       └ mainview.go
│   │   └── confexe(!)
│   │       └ mainview
│   │           └ mainview.go
│   └── pkg # 非公開の汎用モジュール
│       └ my_lib(!) # なんか使い回すやつ
├── scripts # build時に使うshellなど
└── go.mod #Go Moduleで生成されるファイル
```

## Go Modulsの初期化

```shell
cd my_project
go mod init 192.168.0.0/my_project
```

* ソースは公開しない
* 公開されているモジュールと絶対に被らない

という点で、ホスト名を192.168.0.0とした。

モジュールとして公開しない = go getで取得されることは無いので、ただの文字列以上の意味はない。（と思う）
ホスト名のルールであるピリオド（.）が入っていれば何でもいいはず。
cmd下（モジュール単位）ではなく、全体を含めて初期化する。

## mainモジュールからinternal内のモジュールを使う

```golang
package main

import (
	"192.168.0.0/my_project/internal/app/mainexe/mainview"
)

func main() {
	mainview.SomeFunction()
}
```
これで問題なく使えます。

## build

```shell
go build -o mainexe cmd/mainexe/*.go
```
oオプションは出力ファイル名指定。
上記例だとプロジェクトディレクトリ直下に出力される。
distとか適当にディレクトリを作って、出力先pathとして含めても良いかも。

個人的にはscriptsディレクトリ内にbuild.shを作成し、
上記コマンドを書いて「./scripts/mainexe_build.sh」で実行してます。

Golangは長いこと放置してたので、古い記事もありますがまだ初学者です。
ツッコミありましたらお願いしますm(_ _)m
JavaFXを使ってGUIを作ろうとした際の備忘録

##記事を書いた目的
プログラム初心者の自分が JavaでGUIを作ろうと思い立ったはいいものの
環境構築からまっさらなウインドウを表示させるまでに５、６時間かかってしまったので
今後他のOS、PCで設定するときに困らないようにメモとして残しておきたいためです。

##環境
macOS Mojave(10.14.6)
JavaSE-11
Eclipse 2020

##環境構築スタート

###1.Eclipseのインストール
基本的に下記のサイト様を参考にインストール、設定を行いました。
https://codeaid.jp/eclipse-java-mac/
ワークスペースのディレクトリについては、よく分からなかったのでデフォルトのまま作成。

###2.e(fx)clipse、Scene Builderのインストール、設定
これに関しては下記のサイト様を参考にしました。
https://www.sejuku.net/blog/60411
(Scene Builderの起動時に特に文字化けは起こらなかった。)

SceneBuilder 実行可能ファイルについてはmacのため
/Applications/SceneBuilder.appを設定。
記事中にある「メニューの「ウィンドウ」→「設定」を選択クリックします。」は
「Eclipse」→「preferences」になります。

###3.プロジェクト作成
下記のサイト様の「JavaFXの新規プロジェクト作成方法」を参考。
https://style.potepan.com/articles/15319.html
ここで終わるはずでした。。。

###4.「インポートされたjavafxが見つかりません。」
実行を押すと上記のエラーメッセージがあらわれ、実行できない。
調べてみると、最近のJDKにはJavaFXが含まれていない？そう。
以下に試してみたことを書いていきます。

####・アクセスルールの設定
参考ページ：https://teratail.com/questions/170364
この質問のベストアンサー様の(2)を実施してみましたが
今回の環境ではエラーが消えませんでした。

####・OpenJFXのダウンロード、設定
参考ページ：https://nompor.com/2019/01/26/post-4978/
上記サイト様の「OpenJFXのダウンロード」〜「jarファイルの設定」を実施
ダウンロードしたのは
Product:JavaFX Mac OS X SDK
Public version:11.0.2
LTS version:11.0.9
macだからかbinフォルダがありませんでしたが無視して進めました。
(解凍場所はワークスペースディレクトリと同じ階層)
これで『インポートに関するエラー』は消えました。

###5.「JavaFXランタイム・コンポーネントが不足しており...」
次はこのエラーがあらわれ、実行できません。
調べた結果、下記のサイト様を参考に解決できました。
https://ameblo.jp/hero-design/entry-12415834565.html
引数タブは、プロジェクトを右クリック→実行→実行の構成からいけます。
(--module-pathの部分をそれぞれの環境に合わせて変更するのを忘れずに)

これでやっとエラーがなくなりましたが
実行するとDocにJavaのアイコンが出るだけで、ウインドウが出てきません。。。

###6.ウインドウが表示されない
参考ページ：https://nompor.com/2019/01/26/post-4978/
この質問に対するMikeDavis様の回答を実施。
チェックを外して再度実行を押すと無事ウインドウが表示されました。

##終わりに
無事GUIを作り始めるスタートに立てました。
少しでも同じ問題で困っている方のお役に立てれば幸いです。

参考にさせていただいたサイト様
https://codeaid.jp/eclipse-java-mac/
https://www.sejuku.net/blog/60411
https://style.potepan.com/articles/15319.html
https://teratail.com/questions/170364
https://nompor.com/2019/01/26/post-4978/
https://ameblo.jp/hero-design/entry-12415834565.html
https://nompor.com/2019/01/26/post-4978/
validationを設定していないのにエラーが出るとき

#なぜだ

```
ActiveRecord::RecordInvalid: バリデーションに失敗しました
```
modelを確認してもマイグレーションファイルを確認してもどこにも
validationの設定はない。

それなのに出続けるエラー。

#原因
Rails5からの変更でbelongs_toに存在性のvalidationが設定されたようです。

#なので以下のように変更

```
belongs_to :post_id, optional: true
```

#参考
[https://railsguides.jp/association_basics.html](rails)

[https://teratail.com/questions/65278](rails)