OmniAICreator/Qiita-1.07M huggingface dataset:
docker-compose まとめ


## docker-composeでできること
composeでは、複数のコンテナに対する指示をまとめて出せるもの。
別に別々に立ち上げてあげれば、dockerコマンドだけでできることを扱う。
## どうやってまとめてコンテナを立ち上げるか
`docker-compose.yml`
に記述した通りにコンテナを立ち上げてくれる。

```yml
version: '3'
services:
  go_server:
    build:
      context: .
      dockerfile: Dockerfile
    depends_on:
      - redis
      - mysql
    ports:
      - 1323:1323
    volumes:
      - .:/go/src/github.com/riita10069/myapp
      - ~/.ssh:/root/.ssh
    environment:
      DB_ADDRESS: host.docker.internal
      DB_USER: root
      DB_PASSWORD: test
      DB_SCHEMA: test
      DB_MAX_CONNECTIONS: "100"
      DB_QUERY_TIMEOUT_SECONDS: "15"
      APIARY_API_KEY: -----------------------
  mysql:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_PASSWORD: test
      MYSQL_DATABASE: riita_database
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - 3306:3306
  redis:
    image: redis
    ports:
      - 6379:6379
volumes:
  db_data:
    driver: local
```

こんな感じ。
この例では、
- go
- mysql
- redis

の３つを立ち上げている。

### environment
docker-composeのいいところは、
わざわざ別々に３つを立ち上げなくていいということだけでなくて、
環境変数を指定できるところ！！
※環境変数はDockerのコンテナ内部からは基本見えていないので、composeでコンテナの内部から環境変数が宣言できるのはありがたい。(direnvとか使っても見えない。)

#### 他の環境変数をコンテナ内部に渡す方法
- コマンドの引数で環境変数をコンテナに渡す

`-e` `--env` を使う方法
`docker run -e `

- コマンドの引数に外部ファイルを指定

`--env-file` を使う方法
`docker run --env-file `

- build の時に渡す
`docker build --build-arg [変数名]=[値] .`

- Dockerfile に環境変数を記載して渡す

- ENV 命令（宣言文）を使う
ENV [変数名1]=[値1] [変数名2]=[値2] ... [変数名n]=[値n]

くらいの方法がある。

### build
Dockerfileのある場所を相対パスで書く。

### image
既存のイメージを引っ張って来る場合は、buildではなくこれを利用する。

### volumes
どこをマウントするかを記述。
開発環境ではマウントしないとコンテナが消えたら変更分も消えます。

`ホスト上のパス:コンテナ上のパス`と指定してあげること。

### ports
`ホストポート:コンテナポート`でポートのマッピングを指定

## docker-compose build
`docker-compose build`
をすればイメージが完成する

## docker-compose up
`docker-compose up`
でコンテナが立ち上がる。
#1 iOSアプリの作成の1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
Xcodeを起動し，`Create a new Project`を選択する．

<img width="499" alt="スクリーンショット 2019-11-18 午前1.01.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/f2efb4ac-3a3f-c60a-8f40-cf421fd2348d.png">



##part2
使用するのテンプレートを選択する．

<img width="730" alt="スクリーンショット 2019-11-18 午前1.02.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/cb58ab46-df8a-05a4-32bb-83eae2c6e7a8.png">



##part3
`Product Name`を入力し，`Team`を選択する．
`User Interface`は`Storyboard`を選択する．

<img width="734" alt="スクリーンショット 2019-11-18 午前1.03.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/a8272caf-14e1-b2a9-d84d-4dd208d7844a.png">



##part4
この画面が表示されればProjectを作成できた．

<img width="1440" alt="スクリーンショット 2019-11-18 午前1.05.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/13507a10-02fb-5d36-5a9b-23a246601ffd.png">
VuePressのVueコンポーネントで環境変数を使いたいとき


[vuepress](https://github.com/vuejs/vuepress) にてVueコンポーネント内で環境変数を使おうとした際に若干ハマったので共有しておきます。
**(2019/11/24 追記: 以前の方法ではproductionビルド時に環境変数読み込めないので修正しました)**

### バージョン
- vuepress 1.2.0
- dotenv 8.2.0

### ディレクトリ構成
```bash
- /
  - src/
    - .vuepress/
      - config.js
      - components/
        - Component.vue
  - .env
  - package.json

```

環境変数は `.env` に書かれています。

```bash:/.env
HOGE=123
```

`Component.vue` 内で環境変数を参照したい。

## 解決策

`webpack` 内では `process.env` は参照できないため `config.js` で `envファイル` を読み込み `webpack` へ渡します。

```bash
yarn add --dev dotenv
```

[ドキュメント](https://vuepress.vuejs.org/config/#configurewebpack) によると `configureWebpack` には `Object` か `function` である必要があるようです。 `Object` の場合は `webpack-merge` を使用してマージされるようです。

```js:/src/.vuepress/config.js
const webpack = require('webpack')
const { config } = require('dotenv')
config()

module.exports = {
  title: 'Sample',
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'HOGE': JSON.stringify(process.env.HOGE)
        }
      })
    ]
  },
  ...
}
```

こうすることでDeevelopment buildの際は `.env` から環境変数が参照され、Netilify等のProduction buildの際は設定されているビルド時の環境変数が`webpack`へ渡されます。
これで、`vuepress` 内のコンポーネントから参照できるようになりました。

```vue:/src/.vuepress/components/Component.vue
<template>
  <div></div>
</template>

<script>
export default {
  name: 'Works',
  mounted() {
    console.log(process.env.HOGE) // 123
  }
}
</script>
```
【Rails】POST後の画面をリロードしたのにURLをGETしてしまうときの対処法

#概要
Ruby on Railsにおいてフォームでバリデーションエラーになったあと、その画面をリロードしたときに、URLへのリクエストメソッドがPOSTではなくGETになってしまうという問題が起きました。
どのようにしてその問題を解決すれば良いか、調べてもすぐにはわからなかったので、本記事ではその対処法などについてまとめます。

#環境
Ruby 2.6.4
Ruby on Rails 5.2.3
Turbolinks 5.2.1

#問題
###期待していた動き
フォームでバリデーションエラーになったあと、その画面をリロードしたときに、
画面上に「フォーム再送信の確認」というダイアログが出る。
<img width="446" alt="スクリーンショット 2019-11-17 22.48.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411056/8b2ee0c3-0354-8a4b-8b2b-a7b6083f9f45.png">

###実際の動き
URLへのリクエストメソッドがPOSTではなくGETになってしまい、
GETメソッドでの/usersへのルーティングがないため、その旨のエラー画面が表示されてしまった。
<img width="331" alt="スクリーンショット 2019-11-17 21.21.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411056/ebcb6c8d-e7c0-aa26-1aa5-6229c9aa3dea.png">

#原因
Turbolinksが原因です。
Turbolinksがhistory apiで履歴を操作しており、history apiに履歴を足すときはGETメソッドでのURLしか足せないため、URLをGETで取得しようとする…らしいです。
正直くわしいところはわかりませんでした。

Turbolinksとは、jsとcssの読み込み処理を省略することで、画面遷移を高速化させる組み込みライブラリです。
くわしくは、以下の記事をご参照ください。

- [Turbolinks5についてまとめてみる](https://qiita.com/saboyutaka/items/bb089e8208239bf6fdc0)
- [『Turbolinks』って、なんぞ？](https://www.ryotaku.com/entry/2019/01/15/213420)

#対処法
###1. `application.js` から`//= require turbolinks`を削除する。
####Before

```app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
```

####After

```app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require_tree .
```

これで問題は解決されますが、Turbolinksは不要になったので、これ以降の手順もしましょう。

###2. `Gemfile`から`gem 'turbolinks'`を削除する。
####Before

```Ruby:Gemfile
# (前略)
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
# (後略)
```
####After

```Ruby:Gemfile
# (前略)
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'
# (後略)
```

###3. `application.html.erb `から`data-turbolinks-track': 'reload'`を削除する。
####Before

```Ruby:app/views/layouts/application.html.slim
doctype html
html
  head
    title
      | Application
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
# (後略)
```

####After

```Ruby:app/views/layouts/application.html.slim
doctype html
html
  head
    title
      | Application
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
# (後略)
```

#参考

- [Turbolinks doesn't recognize form re-submission [POST] and navigates instead [GET]. ](https://github.com/turbolinks/turbolinks/issues/251)
- [Turbolinks5でPOSTするときはajax経由のほうが良いのかも](https://memo.willnet.in/entry/2018/09/02/165809)
alpineでビルド、scratchを最終ベースイメージとするマルチステージビルド

どの程度ファイルサイズが減るのか。調べてみた。

## TL;DR;

- 圧縮前で2.6MB削減
- 解凍後サイズで6MB削減

## 手順

alpineのみをベースイメージとした時と、alpineでビルドしscratchでイメージ作成した場合を比較

```diff
-- FROM alpine:3.10.3
++ FROM alpine:3.10.3 as builder
   RUN wget -O - 'https://github.com/ktr0731/evans/releases/download/0.8.4/evans_linux_amd64.tar.gz' | tar zxvf -
++ FROM scratch
++ COPY --from=builder /evans /evans
   ENTRYPOINT ["/evans"]
```

## 結果

||**before**|**after**|
|---|---|---|
|圧縮時のサイズ|12.48MB|9.82MB|
|解凍後のイメージサイズ|27.3MB|21.3MB|
PythonとJavaScriptの真偽性の違い

ごっちゃになるのでメモ✍

# まとめ

||Python|JavaScript|
| --- | --- | --- |
| "" | False | false |
| [] | False | true |
| {} | False | true |

# 動作検証

## Python

```Python
In [1]: True if "" else False
Out[1]: False

In [2]: True if [] else False
Out[2]: False

In [3]: True if {} else False
Out[3]: False
```

## JavaScript

```JavaScript
"" ? true : false;
false

[] ? true : false;
true

{} ? true : false;
VM1052:1 Uncaught SyntaxError: Unexpected token '?'
// ファッ!?
// …だったら↓
obj = {};
{}
obj ? true : false;
true
```

JSのオブジェクトはなんでSyntaxエラーになったのか知らん!!
メモ記事なので後日別に調べます。
Pascal へのオブジェクト指向拡張の歴史と Delphi

# はじめに
Pascal のオブジェクト指向拡張はどうなっているのかを、ふと知りたくなりました。
この記事は **「Delphi (Object Pascal) の オブジェクト指向拡張とそのルーツ」** を調べたものです。


# 目次
ここがメインコンテンツです。

 - [1. オブジェクト指向拡張と標準 Pascal のレコード型](https://qiita.com/ht_deko/private/9be573c964f340f6a422)
 - [2. Clascal のオブジェクト指向拡張](https://qiita.com/ht_deko/private/770f2db98c9cf3e8ef7b)
 - [3. Macintosh 用 Pascal のオブジェクト指向拡張](https://qiita.com/ht_deko/private/cd245180363e1911afa7)
 - [4. Turbo Pascal のオブジェクト指向拡張](https://qiita.com/ht_deko/private/5935a06ca7aee27842f6)
 - [5. (標準) Pascal へのオブジェクト指向拡張](https://qiita.com/ht_deko/private/e23d8c6ae24f0a6c7500)
 - [6. Dephi のオブジェクト指向拡張](https://qiita.com/ht_deko/private/28fc0af9fc9e34a8d5c5)

**See also:**

 - [Delphi / Object Pascal のメッセージシステム (Qiita: @pik)](https://qiita.com/pik/items/cfa223b9314f6ed8cb34)

# おわりに

オブジェクト指向以外の部分に関しては以下にまとめてあります。ご一読ください。

 - [標準 Pascal 範囲内での Delphi 入門 (Qiita)](https://qiita.com/ht_deko/items/e2796788c65c2cda1de5)

Object Pascal に興味を持たれた方は無償の Community Edition で遊んでみてください。

[![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/da73efc2-1762-7a52-094a-91b3ef379d1d.png)
](https://www.embarcadero.com/jp/products/delphi/starter)

2020 年で Pascal は 50 周年、Delphi が 25 周年となります。めでたい！
【Python】対戦と組み合わせを出力する（for文のネストとif文）

Pythonでfor文のネストとif文を使って
プロ野球の対戦の組み合わせを出力してみました。

#ホーム、ビジターの概念がある場合

プロ野球ではたいていの場合
ヤクルト　対　阪神
という表記だと、先に表記されている
ヤクルトの本拠地（明治神宮野球場）での開催を指すことが多いです。

（例）
ヤクルト　対　阪神（神宮球場）
ホーム：ヤクルト、ビジター：阪神

阪神　対　ヤクルト（甲子園）
ホーム：阪神、ビジター：ヤクルト

この場合の対戦の組み合わせをPythonを使って表記すると以下のようになります。

```python
#ホーム、ビジターの概念がある場合

team = ["ヤクルト","阪神","横浜","中日","広島","巨人"]

for vs_01 in team:
    for vs_02 in team:

        #ただし、ヤクルト 対 ヤクルト というような同チームの対戦を除く
        if vs_01 != vs_02:

            print(vs_01+ " vs " + vs_02)
```
ヤクルト vs 阪神
ヤクルト vs 横浜
ヤクルト vs 中日
ヤクルト vs 広島
ヤクルト vs 巨人
阪神 vs ヤクルト
阪神 vs 横浜
阪神 vs 中日
阪神 vs 広島
阪神 vs 巨人
横浜 vs ヤクルト
横浜 vs 阪神
横浜 vs 中日
横浜 vs 広島
横浜 vs 巨人
中日 vs ヤクルト
中日 vs 阪神
中日 vs 横浜
中日 vs 広島
中日 vs 巨人
広島 vs ヤクルト
広島 vs 阪神
広島 vs 横浜
広島 vs 中日
広島 vs 巨人
巨人 vs ヤクルト
巨人 vs 阪神
巨人 vs 横浜
巨人 vs 中日
巨人 vs 広島


#ホーム、ビジターの概念がなく組み合わせの場合

対して、さきほどのようになホームとビジターの概念を除いて
単にチーム同士の対戦の組み合わせを出力したい場合には以下のようになります。

```python
#ホーム、ビジターの考えがなく組み合わせの場合

#2つの同様のリストを用意する
team_01 = ["ヤクルト","阪神","横浜","中日","広島","巨人"]
team_02 = ["ヤクルト","阪神","横浜","中日","広島","巨人"]

for vs_01 in team_01:
    
    #片方のリストから、もう片方のリストのダブリを取り除く
    team_02.remove(vs_01)

    for vs_02 in team_02:
        print(vs_01+ " vs " + vs_02)
```
ヤクルト vs 阪神
ヤクルト vs 横浜
ヤクルト vs 中日
ヤクルト vs 広島
ヤクルト vs 巨人
阪神 vs 横浜
阪神 vs 中日
阪神 vs 広島
阪神 vs 巨人
横浜 vs 中日
横浜 vs 広島
横浜 vs 巨人
中日 vs 広島
中日 vs 巨人
広島 vs 巨人


これで、ヤクルト 対 ヤクルトといった同チーム同士の対戦と、
ヤクルト 対 阪神 と 阪神 対 ヤクルトといったチームの対戦のダブリを取り除くことができます。
BlueqatでIBMの実機を使う

# 簡単に量子プログラミングが始められるBlueqatライブラリ

を開発しています。
https://github.com/Blueqat/Blueqat

今回、Blueqat経由でIBMの実機を動かします。

# Qiskit? Blueqat?

IBMも量子プログラミング用ライブラリのQiskitを提供しています。
QiskitからIBMの実機を動かすことができます。

Blueqatは、IBMの実機を直接動かす機能は実装していませんが、
BlueqatからQiskitを呼び出すことで、IBMの実機を動かすことができます。

**では、Blueqatを使う意義とは?**

一言でいうと、手軽だからに尽きます。
Blueqatは、できるだけ記述量を少なく量子回路を動かせるよう、開発しています。

# 使う準備
使うための準備をしていきます。
既に済んでいる場合は、この手順は飛ばすことができます。

### BlueqatとQiskitをインストールします
`pip install blueqat qiskit`

### IBM Qのアカウントを作成、ログイン
https://quantum-computing.ibm.com/ にアクセスし、アカウントを作成(既に持っていればログイン)します

### APIキーの取得と保存
https://quantum-computing.ibm.com/account にアクセスし、APIキーを取得します

続いて、次のPythonスクリプトを打ち込みます。

```py
from qiskit import IBMQ
IBMQ.save_account('MY_API_TOKEN') # 'MY_API_TOKEN'は、取得したAPIキーに変える
```

#### 昔、`save_accounts()`したことあるよって人は
`save_account()`じゃなく、`save_accounts()`だった頃にやったことある人は、Qiskitのバージョンアップに伴い、以前のは、使えない可能性が高いです。以下の方法で、新バージョン用に変換できます。

```py
from qiskit import IBMQ
IBMQ.update_account()
```

# やっていきましょう

```py
from pprint import pprint
from qiskit import IBMQ

IBMQ.load_account() # saveしたAPIキーを読み込みます
pprint(IBMQ.get_provider().backends()) # どんな実機が使えるのかリストアップします
```

試しに、Melbourneを動かしてみます。

なお、IBM Qは世界中の人が使う人気サービスのため、結構順番待ちがあります。
https://quantum-computing.ibm.com/ の右側を確認しながら、できるだけ順番待ちが少ないものを選ぶのがいいでしょう。

```py
from pprint import pprint
from qiskit import IBMQ
from blueqat import Circuit

IBMQ.load_account()
# MelbourneのQiskitバックエンドを取得します
backend = IBMQ.get_provider().get_backend('ibmq_16_melbourne')

# |000> + |111> を作って動かします
pprint(Circuit().h[0].cx[0, 1].cx[1, 2].m[:].run_with_ibmq(backend))
```

**大切なことは全部1行に収まってる**
これがBlueqatの魅力です。Hゲートと、CNOTを2つかけて、3量子ビットをもつれさせています。
他社製ライブラリだと、これらは、回路にひとつずつかけていかないといけないことが多いですが、Blueqatでは、メソッドチェーンでつなげて書けます。
また、普段は`run()`で実行するところを`run_with_ibmq(Qiskitのバックエンド)`のように指定すると、指定したQiskitバックエンドで回路を動かして、Blueqatの他のバックエンドと同じ形式で結果を返します。

さて、どうなったかといいますと。

```py
Counter({'000': 472,
         '111': 362,
         '010': 51,
         '110': 46,
         '101': 36,
         '011': 33,
         '100': 19,
         '001': 5})
```

量子コンピュータでの計算は、一度だけではなく何度も動かすことが多いですが、BlueqatがIBM Qを呼び出す際は、特に指定しなければ1024回計算を回すよう指示しています。
'000'とかは、量子ビットの測定結果で、横の数字は、それが出た回数です。

理想的には、'000'が50%, '111'が50%で出て、それ以外は出ません。
ちょうど半分の512回ずつ出るかについては、コイン投げと同じで、大抵ちょうどにはならないのですが、それ以外が出るのは理想的な動きではありません。

ご存知のとおり、量子コンピュータにはエラーがあり、とくにCNOTゲートや測定で、よくて数パーセント、悪いとそれ以上の誤りを生じます。

こんなに短い単純な回路でも、それなりに誤りが目立つというのは、今の量子コンピュータを使う上で知っておきたいことです。

# まとめ
Blueqatから、Qiskitを経由してIBMの実機を呼び出す方法を見ていきました。
QiskitだけでもIBM実機を使うことはできますが、それよりももっと手軽に使えるライブラリをBlueqatは目指しています。

また、実機を動かしてみたところ、非常に単純な回路にも関わらず、結構エラーが目立つことが分かりました。
実際にこれを体験することは、量子コンピュータの現状を知る上でかなり重要です。

将来、「わしの若い頃の量子コンピュータはエラーばっかりで」とドヤるためにも、ぜひ、試してみてください。
Logic Appsで前の処理が失敗しても処理を継続させる

#概要
超初歩的な話ですが・・・、
Logic Appsで、一つ前の処理が失敗しても処理を継続する方法の備忘録。

#経緯
HTTPコネクタを使って、とあるRest APIを呼び出した結果、
401が返ってきたら別処理を行う必要があって。
※Rest APIで使ってるトークンが3か月で切れるので、
　401が返ってきたらリフレッシュトークンを使って
　トークンを更新する処理が必要でした。

通常コネクタはアクションが失敗したらそこで終了する設定になっています。

#設定方法
1. 前の処理が失敗しても実行したいコネクタの右側にある「・・・」をクリック
2. メニューから「実行条件の構成」を選択
![スクリーンショット (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/e538fdd8-07d6-63e1-b6b3-543835f820bd.png)

3. 以下のような画面が表示されるので、「に失敗しました」にもチェックを入れ、完了をクリック
![スクリーンショット (32).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/587d6d58-6289-955e-e054-2a162c942a30.png)
Rustついて導入としてまとめてみた。

#Rustの歴史
__Rust__は2006年、__Graydon Hoare氏__(Mozilla所属)がC/C++の不満点の解消のための言語開発からスタートした。
このときに、JavaScriptの考案者__Brendan Eich__氏により、彼は目にとめられてプロジェクトまで発展した。

#Rustの特徴
__・ハイパフォーマンスなアプリ、システムソフトウェアの開発に適応__
__・C++に匹敵する実行速度や細かいメモリ管理__
__・安全性の高さ__
__・生産性を高めるモダン機能__
__・シングルバイナリ、クロスコンパイル__
__・多言語との連携の簡易性__

これらのことから、C/C++に対して、
__・メモリ由来のセキュリティ脆弱性がない__
__・プロセッサの性能発揮__
という特徴も持つ。

さらに、最近ならではの機能で__ハードウェア性能の発揮が最大に出せる今まででも数少ない言語のひとつ__となっている。Python, Ruby, Node.jsなどから__FFI(Foreign Function Interface)__機能を通じてRust言語を呼び出すことができる。
＝（すなわち）＝
__Rustの置き換えが可能。__元のコードが多量の場合、Rustの置換によりコード量の減少と処理速度の加速化が望める。

#Rustの現状
__・Stack Overflowの開発者向けランキング3年1位！__
・Kotlin,HCL,TypeScriptなどと並び、__オープンソースプロジェクトに貢献したユーザの数の増加が著しい言語のランキングTOP10に入る。__(from GitHub:2018"Octoverse")

#Rustの導入事例
###npmレジストリ
>npmレジストリとは、世界最大規模のソフトウェアレジストリのことで、node.jsのためのパッケージマネージャの構成要素。Rustの実装が成功事例としてnpm Inc.から紹介されている。

###Frugalos
>ドワンゴの開発事例で、OSSとしてFrugalosは分散オブジェクトストレージである。niconico配信系サービスのバックエンドとしての利用。

###Dropbox
>複数PC間でのファイル共有を簡単にしたクラウドストレージサービス。現在のユーザー5億人超え。現在では、AWSのデータ保持から自社へのサーバへと移行し管理している。

###AWS Firecracker
>AWSの開発で、OSSとして公開された。マイクロ仮想マシンをサーバなしでのコンピュータ操作時にセキュアなものとして発表。

###Mozilla Firefox
>webブラウザエンジンの安全性と並列性の向上に向けた再構築を目的としたMozillaの取り組みのひとつ。FirefoxのエンジンのGeckoの進化（パフォーマンス向上）としたQuantumの開発。

#かるいまとめ！
現在、日本ではそこまで多くは使われておらず、学習コストのかかる言語である。しかし、それ故にといってよいのかわからないが、メリットは多い。それとともに日本においての普及はこれから広がるのではないか。とおもう。実行速度に関してもかなりの速度であるため、大規模プロジェクトや開発においては重要視される。
k8sのコマンドまとめ


## 環境系
- 今あるクラスター設定の一覧取得
kubectl config get-contexts
※現在使用しているクラスターには「＊」がついている

- クラスターの新規追加
kubectl config set-context [クラスター名]

- クラスターの切り替え
kubectl config use-context
Debianの作業用パソコン インストールと設定したときのメモ　その２〜サウンド編〜

前回、「[Debianの作業用パソコン インストールと設定したときのメモ](https://qiita.com/tsuka_hoshi/items/0673fdc526b506b535dc)」を書きましたが、「ダミー出力(Dummy Output)」となり、サウンドがならないので、改善したときのメモです。

#結論
わりと、簡単に直せました。

#サウンド関連ドライバのインストール
どうやら、ドライバ関連は前回無線LANの設定を行ったことの延長のようでした。

```
apt install firmware-intel-sound 
```
と叩いて、再起動かけたらデバイスを認識しました。
パッケージ名は適当に、当たりをつけて。。。

#再生時にノイズが出た場合
音楽ファイルを再生できるようになりましたが、再生時にノイズが出て聞き苦しい感じになりましたので、以下のページを参考にしました。

>Advanced Linux Sound Architecture/トラブルシューティング - ArchWiki
>https://wiki.archlinux.jp/index.php/Advanced_Linux_Sound_Architecture/%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0

結果としておこなったことは、「/etc/modprobe.d/modprobe.conf」に以下を追記（ファイルがなかったので、ファイル作成）しました。

```
options snd_hda_intel power_save=0 power_save_controller=N
```

とりあえず、またまた再起動して問題なく再生できるようになりました。

#最後に
一通り、使えるノートパソコンが出来上がったので、イメージ吸い上げて、カスタムしてみます。
以前より試したかった、wineなどを試していこうと思います。
(wineってどこまで使えるのでしょう？PS Nowとかできるのかしら？)
[UE4]エディタ上からコンソールコマンド入力窓をキーボードで開く

#前段

コンソールコマンドを入力するときは @ キーというのは割と皆さんご存知だと思うのですが、
このショートカットはエディタ上だと効かないんですよね。
エディタでコンソールコマンドを入力するときは、
ウィンドウ > デベロッパーツール > アウトプットログ で表示できるこれを利用している方も多いと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/b0ab45f5-826f-a76b-d616-d3c8c546223d.png)


常にこれを出してはいない方もいると思いますし、いちいちフォーカス合わせるのも面倒です。。。


#そこでコンソールコマンドボックスですよ！

キーボードショートカットのカテゴリに移動して
日本語だとカタカナで `コンソール` 英語なら `Console` などと入力すると出会えます。
**英語キーボードだと ` で入力できるようですが日本語キーボードだとこれはshift+@で入力することになるので使えないのです。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/ef99327f-d243-f0dc-1263-35981c85e96e.png)

こんな感じでお好みのショートカットキーを当ててみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/ef6232b2-a148-0dfb-14d0-8ca8e6c01fe2.png)

#いざ実行
ショートカットキーを押すとエディターの下部に小さなウィンドウが出現します。
入力してみると@キーで出すような完全一致が必要なタイプではなく**部分一致を列挙してくれる**やつです。
これは捗りますね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/0a91558e-95d1-1899-13a3-56efc74687a1.png)

レベルエディタ上だけではなく、**PlayInEditorのSelectedViewportやNewEditorWindowでの動作確認中**でも利用可能ですし、さらに **ブループリントエディタやペルソナ、ナイアガラエディタなど** の各種アセット編集画面などでも呼び出せちゃいます！

New Editor Window
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/cf751c83-7dde-9cda-fbf8-1215339e31d4.png)

NiagaraEditor
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464248/743cf1ed-1685-5ff2-8431-aa509bbc6188.png)



<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="und" dir="ltr"><a href="https://t.co/o3xMncdKwm">pic.twitter.com/o3xMncdKwm</a></p>&mdash; Takashi.Suzuki (@wankotank) <a href="https://twitter.com/wankotank/status/1196081581728813057?ref_src=twsrc%5Etfw">November 17, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Xサーバーで取得したドメインをAzureWebAppsにカスタムドメインとして設定する方法

# Xサーバーで取得したドメインをAzureWebAppsにカスタムドメインとして設定する方法

## 概要
Azure Web Appsで構築したアプリケーションサーバーのドメイン(https://XXXX.azurewebsites.net)をXサーバーで取得したオリジナルのドメイン(https://XXXX.com)に変更します。

## 参考ドキュメント
以下のドキュメントを参考にしています。

[チュートリアル:既存のカスタム DNS 名を Azure App Service にマップする](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-custom-domain#map-a-cname-record)

[Azure App Service で SSL バインディングを使用してカスタム DNS 名をセキュリティで保護する](https://docs.microsoft.com/ja-jp/azure/app-service/configure-ssl-bindings)

[Xサーバー　DNSレコードの編集](https://www.xserver.ne.jp/manual/man_domain_dns_setting.php)


## 前提条件
* AzureでApp ServiceプランをStandardプラン以上で契約していること
* Xサーバーでドメインを取得していること

## チュートリアルの開始
### その１　XサーバーでのDNSレコードの追加
[Azureドキュメント](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-custom-domain#map-a-cname-record)の「ドメインをマップする」から進めていきます。
ドメインの設定方法は3種類ありますがチュートリアル通り「CNAME レコードのマップ」という方法で行います。

#### ドメインプロバイダー（Xサーバーサーバーパネル）で DNS レコードにアクセスする

![](https://i.imgur.com/Bj007p3.png)

#### DNSレコード追加で種別を「CNAME」、内容欄にAzureWebAppsのURLを入力します。DNSレコード一覧タブの中から設定対象ドメインを変更してもよいと思います。
![](https://i.imgur.com/cKImfSR.png)


### その２　Azureポータルでカスタムドメインを設定する
DNSレコードを追加したことでAzureWebAppsからカスタムドメインへのアクセスが許可され、AzureのURLとカスタムドメインマッピングできるようになります。

この辺りは「[Azureドキュメント](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-custom-domain#map-a-cname-record)」の「Azure で CNAME レコード マッピングを有効にする」という箇所をご覧ください。

マッピングに成功するとカスタムドメインでアクセスできるようになります。もちろんデフォルトのURL（(https://XXXX.azurewebsites.net)）でもアクセスすることが出来ます。
![](https://i.imgur.com/oV9smhX.png)

### その３　SSLバインディングの設定
その２までの操作でカスタムドメインの設定は出来ますが、カスタムドメインにSSL証明書がついていないようでウイルスチェックソフトなどで警告が表示されます。
そこで「[Azure App Service で SSL バインディングを使用してカスタム DNS 名をセキュリティで保護する](https://docs.microsoft.com/ja-jp/azure/app-service/configure-ssl-bindings)」にそってカスタムドメインをセキュリティで保護する設定を行います。

#### 価格プランの設定
カスタムドメインSSLはApp Serviceプランがベーシックプラン以上で使えます。D1プランを使っていた場合はアップグレードをしてください。

#### TLS/SSL の設定を開く
「[Azureドキュメント](https://docs.microsoft.com/ja-jp/azure/app-service/configure-ssl-bindings)」の「カスタム ドメインをセキュリティで保護する」の項目にそってAzureポータルのTLS/SSL の設定でSSLバインドの設定を行います。

#### 証明書のアップロード
マニュアルに従って進めると「カスタム ドメインの証明書を追加する」で証明書のアップロードを要求されます。今回はXサーバーで取得した証明書はXサーバーでしか使えないようなので、「App Service 証明書のインポート」のケースで進めていきます。

#### Azureでの証明書の取得
「[無料の証明書を作成する](https://docs.microsoft.com/ja-jp/azure/app-service/configure-ssl-certificate#create-a-free-certificate-preview)」にそって証明書を取得します。

証明書の作成時にカスタムドメインを選択します。
![](https://i.imgur.com/zGfqtYp.png)


#### SSL証明書のバインディング
「[Azureドキュメント](https://docs.microsoft.com/ja-jp/azure/app-service/configure-ssl-bindings)」の「バインドを作成する」という項目にそって作成した証明書をアプリケーションにバンドします。
TLS/SSLの設定で以下のようになっていれば大丈夫です。
![](https://i.imgur.com/jBrFARj.png)

### その４　カスタムドメインでアクセスしてみましょう
設定したカスタムドメインをブラウザで開き、警告画面が表示されることなくアクセスできれば完了です。
基本情報5週目(11/18週)

# 目標と結果
### 目標
- 20項目まで参考書の演習問題を正解する。
- できない部分を見つけ、そのままにしない。
- 基礎理論とアルゴリズムを勉強を続ける。
    - 時間管理、工数管理も忘れずに。
- [基本情報技術者試験ドットコム](https://www.fe-siken.com/)を使う。
    - 過去問道場
- ネットワークとデータベースのテストを合格する。
- 独習ゼミの解説動画を観てみる。

### 項目

独習ゼミの項目で言うとFE87まで

17．システム戦略
(情報システム戦略・業務プロセス・ソリューションビジネス・システム活用促進・評価)
18．システム企画
(システム化計画・要件定義・調達計画・実施)
19．経営戦略マネジメント
(経営戦略手法・マーケティング・ビジネス戦略と目標・評価・経営管理システム)
20．技術戦略マネジメント
(技術開発戦略の立案・技術開発計画)

### 結果

- FE87まで学習できた。
- ストラテジ系は学習範囲内だと暗記問題が多いのでそれほど躓くことはなかったです。
- ネットワークとデータベースのテストに合格しました。
    - データベースの問題はとても難しく感じました。
    - SQLが苦手です。例)複雑な指定↓
        - ![alt](https://www.fe-siken.com/kakomon/26_haru/img/28e.gif)
               - ↑画像の挿入をしてみました。
- 日曜日に独習ゼミの講座に行ってきました。
    - 頻出問題の話がとてもためになったと思います。

# 振り返り
### Keep

- 過去問道場を使う。
- 項目別の過去問題を周回する。
- 頻出問題を中心に勉強する。

### Problem
- 論理的問題がなかなか解けない。
- 計算問題が苦手。

### Try

- 苦手な部分は繰り返しで覚える。
- 電子版の参考書を買ったので活用する。
- 残りのテストに合格する。
    - できれば修了テストも終わらせたい。
<!DOCTYPE html>でUncaught SyntaxError: Unexpected token '<'

#初めての投稿
　Qiitaにいつも介護されている情弱大学生です。
　気が向いたので、初めて記事を書いてみます。マークダウンも初体験:upside_down:
　記事と言っても自分用のログなので、**参考にならない**ことを先に述べておきます。
　（じゃあ書くなよって話ですが、暖かく見守ってくださると幸いです）

#本題

###　エラーについて
　　JS慣れのためにHTML + CSS + JSで簡易アプリケーションを作っていたところ、
　　初っ端から　**Uncaught SyntaxError: Unexpected token '<'**　が発生しました。
　　どうせ文法ミスだと思って、htmlファイルのタグの対応関係を注視したけどミスは見つからず。
　　![スクリーンショット 2019-11-17 22.50.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507693/93f25812-97d1-46b8-fef9-c37f97a46cf1.png)

###　原因と解決方法
　　- 原因はファイル（jquery-3.3.0.min.js）読み込み時のミスでした。
　　- フォルダだけ指定しておいて、肝心のファイルを指定していない謎状況。
　　`<script src="scripts/j"></script>`

　　- ファイルをちゃんと指定して解決しました。
　　 `<script src="scripts/jquery-3.3.0.min.js"></script>`



#おわり
　「このエラーはいつものだからこう！」って考えが良くないんだなと思いました。
　良く考えれば、いつものエラーであってもいつもの位置とは違う...

　知らないうちに考え方が狭くなっているようなので、今度から気をつけます。
　おメンタルが弱いので、ご指摘等ありましたら優しめに教えてくれると嬉しいです。
年末まで毎日webサイトを作り続ける大学生 〜30日目 借りは返すぜ！ ナビバーのスライドイン(cssのみで実装) & overflow〜

##はじめに
こんにちは！@70days_jsです。
借りた借りはきっちり返すぜ！
というわけで、昨日してやられたナビバー横からスライドインを実装しました。スライドはjsを使わずにcssのみで作りました。
あとついでにoverflowも学びました。

扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は30日目。(2019/11/17)
よろしくお願いします。

##サイトURL
- https://sin2cos21.github.io/day30.html

##やったこと

今日やったことは、主に以下2つです。

1. ナビバー横からスライドイン（cssのみ）
2. overflowのプロパティの検証

ではgifをどうぞ！↓
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/551e9a02-c8de-cf00-1f2b-cb4dfae90b28.gif)

という感じで無事ナビバーのスライドインができました。
以下詳細を書いていきます。

###1. ナビバー横からスライドイン（cssのみ）
[クリックイベントをCSSだけで | UNICO LABO](https://unicolabo.jp/topics/251.html)さんの記事を読み、cssだけでクリックイベントができるのを知り、スライドインに応用させていただきました。
肝となるのが、htmlはlabelとfor属性とcheck boxを使って、cssは:checked（擬似クラス）でクリックを検知するところです。これのおかげでボタンを押せばメニューが出てくれます。
言葉では分かりづらいのでソースを見ましょう。

ナビバー html ↓

```html
<div id="hamburgerButtonTest">
        <label class="hamburgerButtonLabel" for="hamburgerButton">
            <div>
                <i class="fas fa-bars"></i>
            </div>
        </label>
        <input type="checkbox" id="hamburgerButton">
        <div id="hamburgerMenu">
            <div>目次</div>
            <div><a href="">横スクロール討伐完了！</a></div>
            <div><a href="#overflowTest">overflowについて</a></div>
        </div>
    </div>
```
labelタグで囲まれている部分を押せば、input要素のcheckboxにチェックがつきます。チェックがついたら（:checkedで判定）、目次を横からスライドさせるようにします。

横からスライドさせるためのcssはこんな感じです（一部抜粋） ↓

```css
body {
margin: 0;
overflow-x: hidden;
}

#hamburgerButtonTest input {
display: none;
}

#hamburgerMenu {
position: absolute;
top: 125px;
right: 0;
width: 30vw;
transition: all .5s ease;
transform: translateX(100%);
}

#hamburgerButton:checked+div{
    transform: translateX(0px);
}
```

まず、inputのdisplayをnoneにしてcheckboxを見えないようにします。
次に#hamburgerMenu（メニューが書かれているdiv)をtransform: translateX(100%);で要素を画面外に置きます。
ちなみにこのままだと横にスクロールできてメニューが見えてしまうので、bodyでoverflow-xをhiddenにして横スクロールを禁止します。overflowについては後述します。
最後に、

> \#hamburgerButton:checked+div {
    transform: translateX(0px);
}

でボタンがクリックされた時だけ、メニューを画面内に持ってきます。
> transition: all .5s ease;

を#hamburgerMenu（メニューが書かれているdiv)に設定しているので、画面外から画面内に要素が移動するときにヌルッといい感じに出てきてくれます。


###2. overflowのプロパティの検証
次にoverflowについてですが、これはoverflowをよく知らなかったため実際に使ってみて確認しただけです。

overflowとは？・・・ボックス外のコンテンツの表示/非表示を制御する

プロパティは overflow, overflow-x, overflow-y の3つあります。
さっきスライドインでoverflow-xを使っていましたね。これはx軸を制御できます。

値はいつかあるのですが、主に重要そうな3つを紹介します。
1. visible → 表示 (表示)
2. hidden → 非表示
3. scroll → スクロール

作ったやつのスクショで説明すると、赤がvisibleで、青がhidden、黄色がscrollです。↓
![スクリーンショット 2019-11-17 23.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/838548dd-4b33-803a-282f-9df529e465ff.png)

hiddenが主に使われるのですが、ご覧の通りボックスからはみ出たコンテンツを非表示にしてくれます。
赤はvisibleなのでボックスからはみ出てしまってますね。
黄色は分かりづらいですが、スクロールして文章を最後まで読むことができます。


##感想
最近pcを触る時間が増えて生活習慣が乱れてきているのをなんとかしたいです。温泉に行ったりして整えようとしてるんですが、pcを触っているとどうしても夜更かししてしまうんですよね。22時までとか制限つけようかな。うーん、でも勉強したい欲はあるからそれの邪魔はしたくないしなぁ・・・:upside_down:

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

##参考
1. まんが日本昔ばなし〜データベース〜 - 蜘蛛の綾織 (http://nihon.syoukoukai.com/modules/stories/index.php?lid=1323)
2. クリックイベントをCSSだけで | UNICO LABO (https://unicolabo.jp/topics/251.html)
OpenCVを用いて、Jupyter Notebook上で画像を表示させたい（mac）

### python初心者のための画像分析
失敗した内容、改善出来た内容などを、初心者の観点から記録します。

今回は、Anacondaから立ち上げたJupyter Notebook上で
OpenCVを用いて画像を表示する際に、エラーになった内容。（下記画像は、成功例）
![jupyternotebook_shimarisu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462073/17282ef0-a2b1-6640-13f3-a04fbb9c3983.png)



また、画質が表示された時、解像度が落ちていたので、改善方法を模索しています。
(どなたか分かる方がいらっしゃいましたら、ご教授下さい。。。)



### 条件
・macOS 使用
・Anaconda上のJupyter Notebookで表示させたい
・Python 3.7 を使用
・OpenCV 4.1.1 を使用
・matplotlib を使用
・画像（shimarisu.jpg）は、macのDesktop上のフォルダに格納
　/Desktop/detect_ai/data/shimarisu.jpg


### OpenCV のインストール
Anacondaに、OpenCVのみがインストールされていなかったので
https://rightcode.co.jp/blog/information-technology/opencv-jupyternotebook-face-recognition
を参考に試してみたのですが、なぜか私は出来なかったです。
OpenCV を選択して、インストールを開始するための Apply ボタンは押せますが
インストール完了後の Apply ボタンが押せません。

なので、ターミナルに　```$ pip install opencv-python ``` を入力して実行。
![スクリーンショット 2019-11-17 23.46.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462073/07404ad0-668c-8275-7b51-be43db7ad93a.png)
黄色の文字で、WARNINGと表示されていますが、
"Successfully installed opencv-python-4.1.1.26" となっているので
インストールは成功かと思われます。


### OpenCVを用いて画像を表示
Jupyter Notebook上で画像を表示させます。
今回は、シマリスの画像。


### ソースコード
こちらを参考にさせて頂きました。
https://teratail.com/questions/169009

```php:opencv.ipynb
import matplotlib.pyplot as plt
import numpy as np
import cv2

# インライン表示
%matplotlib inline

#画像(shimarisu.jpg)の読み込み
img = cv2.imread("shimarisu.jpg")

#画像の表示
plt.imshow(cv2.cvtColor(img, cv2.COLOR_BGR2RGB)) # OpenCV は色がGBR順なのでRGB順に並べ替える
plt.show()
```



しかし、以下のようなエラーが表示されてしましました。




```php:opencv.ipynb
error                                     Traceback (most recent call last)
<ipython-input-33-7c8a2c33eec7> in <module>
     10 
     11 #画像の表示
---> 12 plt.imshow(cv2.cvtColor(img, cv2.COLOR_BGR2RGB)) # OpenCV は色がGBR順なのでRGB順に並べ替える
     13 plt.show()

error: OpenCV(4.1.1) /Users/travis/build/skvark/opencv-python/opencv/modules/imgproc/src/color.cpp:182: error: (-215:Assertion failed) !_src.empty() in function 'cvtColor'
```


◆原因を調べたら、いま立ちあがっているpythonファイルの置き場所（Anaconda上）と、
表示させたい画像（shimarisu.jpg）の置き場所（Desktop上）が違うとの事。
https://ja.stackoverflow.com/questions/49260/python3-6-6%E3%81%AB%E3%81%A6cv2%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%BE%E3%81%99

表示させたい画像（shimarisu.jpg）は、macのDesktop上のフォルダに格納していました。
/Desktop/detect_ai/data/shimarisu.jpg





### 試したこと
1枚目画像の5行目、画像(shimarisu.jpg)の読み込み部分にて

img = cv2.imread("shimarisu.jpg")を
img = cv2.imread("/Users/name/Desktop/detect_ai/data/shimarisu.jpg")

に置き換えたら、画像が表示が出来ました！



### 注意すべきポイント
立ちあがっているpythonファイルの場所と、画像の格納場所の階層を揃える必要がある。
「macのDesktop上のフォルダに、画像(shimarisu.jpg)を格納しているんだよ」の記載が必要。
今回の場合、
/Users/(ターミナルに表示される名前)/Desktop/detect_ai/data/shimarisu.jpg

(ターミナルに表示される名前)は人によって違う。
以下画像は、例として "name" と記載しているだけなので、随時変更して下さい。


![jupyternotebook_shimarisu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462073/b9fe1470-c5fb-5d6e-7ba3-a805e58ca7bd.png)





### 問題点
ただ、画質の解像度が落ちて表示されてしまうので、元画像の解像度を保ったまま、
画像を表示することは出来ないかは、現在検証中です。（進展あったら更新します）


### その他の参考サイト
・OpenCV で画像を表示させるための、ソースコード
http://peaceandhilightandpython.hatenablog.com/entry/2015/12/23/214840
http://rasp.hateblo.jp/entry/2016/01/22/201534
コードリーディング (Pro Builder - Sample - Runtime - RuntimeEditing - Scripts - CameraMotion)　１ノ巻

Unityのコードを読んでみます。
読むのは、com.unity.probuilder/Samples~/Runtime/Runtime Editing/Scripts/CameraMotion.csです。
これを選んだ理由は特にありません。

https://github.com/Unity-Technologies/com.unity.probuilder/blob/master/Samples~/Runtime/Runtime%20Editing/Scripts/CameraMotion.cs
こちらにソースコードがあります。

##読む
#### 先頭コメント
まずコメントがあるのですがその内容はUnify wikiにあるFlyThrough.jsを部分的に使用していますという内容です。
http://wiki.unity3d.com/index.php/Main_Page
に参考したものが乗っています。

こんなサイトがあるのですね。初めて知りました。

####インポートしている名前空間
- UnityEngine.
- UnityEngine.Assertions
- UnityEngine.EventSystem

######Assertions
アサーションに関係するものがまとめてある。
アサーションとは日本語でいうと表明。(これの使いかた、オブジェクト思考入門の契約によるプログラミングのところに色々とかいてあった気がする。。。)
プログラム内で保証されることをかく。早期のバグ発見を目的としている。
ex
```Assert.IsFalse(health < 0);```
HPが０より小さくなることはおかしいよということを主張している。
これのいいところは開発環境で適用されるが、実際にビルドされる時は向こうになる。
 （BuildOptions.ForceEnableAssertionsを有効にしない限り。）

保証されるべきルールに違反していた場合は、通常はログメッセージを表示するだけだがAssert.raiseExceptionsを有効にすると例外が投げられるようになる。
デバッガーを利用している時もポーズするために例外が投げられる。

公式ドキュメント
https://docs.unity3d.com/ja/2017.4/ScriptReference/Assertions.Assert.html

######EventSystem
https://docs.unity3d.com/ja/2017.4/Manual/EventSystem.html
こちらに細かい解説があります。


自分メモ
イベントシステムを知らなかったので調べる。
アサーションのベストプラクティスとか調べたら出てくるはずなので調べる。
Google Blocklyのワークスペースに最初から複数のブロックを表示させる方法

#ワークスペースに最初からブロックを表示させる
　解決するまでに時間がかかったので、メモとして公開します。

https://ytakata69.github.io/blockly-processing/
のコードを読んで理解しました。
ワークスペースに最初からブロックを表示させるには、xmlとJavaScriptの両方で「startBlocks」を指定します。

```html
  <xml id="startBlocks" style="display: none">
    <block type="block_1"></block>
  </xml>
  <script>
    var workspace = Blockly.inject('blocklyDiv',
        {toolbox: document.getElementById('toolbox'),
         oneBasedIndex: false});
    Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),workspace);
  </script>

```
最初のブロックの位置を指定したい場合には、x,yの座標を指定します。

```xml
  <xml id="startBlocks" style="display: none">
    <block type="block_1" x="20" y="20"></block>
  </xml>
```


#複数のブロックを接続して表示させる
これも、上記のコードで保存したlocalStorageデータからわかりました。
&lt;next&gt; &lt;/next&gt;でブロックを囲んでいきます。

```xml
  <xml id="startBlocks" style="display: none">
    <block type="block_1">
      <next>
        <block type="block_2"></block>
      </next>
    </block>
  </xml>
```
ブロックの数が増えたときには、同じ数の&lt;next&gt;で囲むことになります。
ツールボックスに、複数のブロックを接続して表示させる場合も同様です。
PCIex 分岐ケーブル(x8 x 2 を x16 に)のメモ

## 背景

レイトレーシングや機械学習用に, ハイエンド系民生 PC x399(Threadripper), x299(e.g. 9980XE)で GPU 4 枚挿しとかしあたい. native に x16 x 4 というのはできないが, lane 数はあるので x8 構成なら GPU 4 枚挿しはできるはず.
(mining 用の x1 だと機械学習などに使うには帯域が遅いが, x8 なら x16 と比べてもそれほど帯域落ち込まずにいけるはず)

ライザーカードは使うのでよい(e.g. マイニング用フレームを流用するなど)

## 情報

界隈では, bifurcation riser(分岐ライザーケーブル)と呼んでいるようです.

https://peine-braun.net/shop/index.php

C-Paine さんのところで買えます. 
FCC など取得してませんが, 日本だと利用には問題ないはず? > https://peine-braun.net/shop/index.php?route=information/information&information_id=5

HardForum にまとまってます.

https://hardforum.com/threads/pcie-bifurcation.1870298/

x399 マザーでは, M.2 用などに x4 x 4 や x8 x 2 が対応しているものが多そう.
うまくやれば GPU 4~5 枚, IB/100GbE 用などに HBA x 1 という構成が取れそうです.
 


## TODO

* PCIex Gen4 はどうなるか?
* 深センとかでも売ってそうなので, AliExpress とかに無いか調べる.
* ITX マザーだと, x4 x 4 サポートのマザーが多いようなので, ITX + 4 GPU な構成をためす. メモリスロットは少ないので, メモリをあまり使わない用途限定
'soundpool/soundpool-Swift.h' file not found'の解決法

Flutterでsoundpoolパッケージを使ってアプリを作っていたら、

```
soundpool/soundpool-Swift.h' file not found
（中略）
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to ...
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to ...
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to ...
（中略）
```

というエラーにより、iOSシミュレーターを立ち上げることができなかった。

# 解決法

Flutterのプロジェクトフォルダの中で、iosフォルダの中にPodfileがあります。
Podfileの記述の中で部分的編集します。

```

target 'Runner' do
    use_frameworks! # <-この一行を追加
  # Prepare symlinks folder. We use symlinks to avoid having Podfile.lock
  # referring to absolute paths on developers' machines.
  system('rm -rf .symlinks')
  system('mkdir -p .symlinks/plugins')

  # Flutter Pods
  # 〜〜〜省略〜〜〜
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['ENABLE_BITCODE'] = 'NO'
      config.build_settings['SWIFT_VERSION'] = '4.2' # <-この一行を追加
    end
  end
end

```

その上でPodfile.lockを一旦削除して、
再度ビルドすれば、Podfileが更新されて、無事立ち上がります。

# 追記（2020/12/17）

Flutterのバージョン変更に伴い、Flutter SDK 1.22では、下記のようなエラーが出るのかなと思います。
![%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-12-16%207.41.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261020/27dc26a4-831b-a408-1f8c-de4678f4e01a.png)

しかし、やはり、

```
target 'Runner' do
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  use_frameworks! # <-この一行を追加
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|　# <-この一行を追加
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'　# <-この一行を追加
    end
  end
end
```
とPodfileを編集し、Podfile.lockを一度removeコマンドで削除した上で、起動させるとちゃんと動きました。
【AmazonLinux】Python2系からPython3系への切り替え

# 環境
AMI: Amazon Linux AMI 2018.03.0 (HVM), SSD Volume Type</p>

# コマンド

```console
   $  sudo yum install python36
   $  python3 --version
   $  sudo yum install git
   $  git clone git://github.com/yyuu/pyenv.git ~/.pyenv
   $  emacs ~/.bash_profile
   $  source ~/.bash_profile
   $  sudo yum install zlib1g-dev
   $  sudo yum install libssl-dev
   $  sudo yum install gcc zlib-devel bzip2 bzip2-devel readline readline-devel sqlite sqlite-devel openssl openssl-devel -y
   $  pyenv install 3.6.8
   $  pyenv global 3.6.8
   $  pyenv rehash
   $  python --version
```

# .bash_profile

```bash
# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi

# User specific environment and startup programs
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
```
# 確認方法
```console
$ python --version
```
の実行結果が3系になっていれば大丈夫のはず

# 参考サイト
[Linux での Python のインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-linux-python.html)
[Pythonを2から3に切り替えよう!!](https://qiita.com/Takumi_Kaibara/items/6aadf1ac2c1f6bea41a8)
[EC2サーバにPython3環境構築](https://qiita.com/tisk_jdb/items/01bd6ef9209acc3a275f)

#### ブログでもまとめていますのでよろしくお願いします
[【AmazonLinux】Python2系からPython3系への切り替えコマンド](http://turedurenarumamanoblog.com/study/post-93/)
25歳専門新卒がSESに就職して半年が経ち、転職を決意。

【専門学校時代の経歴】

システム開発コースを専攻。

・1年次
4月～10月　基本情報技術者試験の勉強。『不合格』
11月～2月　Javaオラクルブロンズの勉強。『合格』
3月～　　　基本情報技術者試験の勉強。『合格』

・2年次
4月～7月　Javaオラクルシルバーの勉強。『合格』
7月～10月　応用情報技術者試験の勉強。『不合格』
11月～3月　卒業研究　

※C言語、C#、Javaでプログラミングもやってました。

【入社してからの経歴】

4月～6月　入社式当日運用部署に配属決定。
　　　　　3か月間の意味のない研修のスタート。

素直に「は？」って思いました。システム開発希望で入社してたので意味が分からなかったですね。
研修はほぼ自習勉強でしたね。時間の無駄です。

7月～11月　常駐先決定。

金融システムのサーバ保守業務。

とりあえず、やりがいがありません。

配属ガチャ、案件ガチャ共にハズレを引きました。人によっては良いかもしれませんが、5年後10年後のキャリアアップを見据えてやりたい事があったので個人的にはハズレです。

いかんせん、サーバの保守に興味が持てません。ただの雑用だと思ってしまいます。このままやっても技術が身に付かないと思います。

※システムを支えるサーバも重要なのは理解してます。ですが、逆も然りアプリが無ければシステムになりません。

自分のやりたいこと、キャリアアップのことなど考えたらシステム開発のできる場への転職が有効だと思い決意しました。
【サービス終了しました】プログラミング言語別の求人数を一覧で見ることができるサービス「Nojov」を公開しました

**※本サービスは 2021 年 8 月 14 日をもって終了しました。**

以下のページで Nojov を紹介 or 引用していただきました！ありがとうございます！

- [侍エンジニアブログ]
(https://www.sejuku.net/blog/124381)
- [レバテックキャリア](https://career.levtech.jp/guide/knowhow/article/673/)
- [ウェブカツ公式BLOG](https://webukatu.com/wordpress/blog/14703/)
- [COACHTECH Lab.](https://coachtech.site/lab/483/)
- [WEBCAMP NAVI](https://web-camp.io/magazine/archives/24940)
- [Career Hub](https://careerhub.jp/2020-programming-demand/)
- [Kredo Blog](https://kredo.jp/media/ruby-php-comparison/)
- [STASEON](https://staseon.com/library/article_683/)
- [すべらない転職](https://axxis.co.jp/magazine/29321)
- [プロアカ](https://pro-academy.tech/web-programming-language/)
- [プログラマカレッジ](https://programmercollege.jp/column/17958/)

# アプリ紹介

## 最新の言語別求人数一覧

各言語別の求人数の一覧を棒グラフ形式で見ることができます。
データを特定の求人サイトに絞ったり、求人数が多い順に並び替えすることもできます。

![Nojov-プログラミング言語別求人数ビューア (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349145/b622c921-a133-ffc2-369b-24959c31cc1b.png)

## 過去の言語別求人数の推移

各言語別の求人数の直近半年間の推移を折れ線グラフ形式で見ることができます。
データを特定の求人サイトに絞ることもできます。

![Nojov-プログラミング言語別求人数ビューア (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349145/622d81d2-ecd4-a7cf-bedb-213f3ee5e06b.png)

## 集計対象の求人サイト

以下の求人サイトに定期的にクロールを行なっています。
会員限定の非公開求人等は集計の対象外になっています。

- [CODEAL](https://www.codeal.work/)
- [ITプロパートナーズ](https://itpropartners.com)
- [forkwell jobs](https://jobs.forkwell.com/)
- [レバテックキャリア](https://career.levtech.jp/)
- [レバテックフリーランス](https://freelance.levtech.jp/)

## 対応している言語

- C言語
- C++
- C#
- Objective-C
- Perl
- COBOL
- Java
- PHP
- Go
- Rust
- JavaScript
- TypeScript
- R言語
- Python
- Ruby
- Swift
- Kotlin
- Scala
- Haskell

# 開発

## 構成

全体のシステム構成は以下のような感じです。

![nojov-archetecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349145/0c7bdd2a-4011-c0b8-ded6-dfc8781504ce.png)

CloudWatch Events でクロール用の StepFunctions を定期的に起動し、求人数のデータを S3 に保存しています。
API はシンプルに API Gateway + Lambda で構成しており、 S3 に保存してある求人数を取得してユーザーに返しています。

API 側は ServerlessFramework + Terraform を使用してデプロイしています。
UI 側は Vercel を使用してデプロイしています。
いずれも GitHub の main ブランチに push したタイミングで全て自動デプロイされる仕組みにしています。
強化学習ゼミ記録【森村哲郎】Chapter4

# はじめに
2019年から強化学習ゼミを実施しています。ゼミで議論になった部分について記録します。

# 使用している教科書
- [強化学習 著：森村哲郎](http://bookclub.kodansha.co.jp/product?item=0000275420)

# ディスカッション
## 近似ベルマン作用素がベルマン期待作用素に収束する計算
M($\pi$)にエルゴード性を仮定する。

```math
\lim_{T\rightarrow\infty }\frac{1}{T}\sum_{t=0}^{T-1}I_{s_t=s} = p_\infty^\pi(s) > 0
```
すると

```math
\begin{align}
&\lim_{T\rightarrow\infty }\frac{1}{T}\sum_{t=0}^{T-1}I_{s_t=s}(r_t+\gamma v(s_{t+1})) \\
&=\lim_{T\rightarrow\infty }\frac{1}{T}\frac{\sum_{t'=0}^{T-1}I_{s_{t'}=s}}{\sum_{t'=0}^{T-1}I_{s_{t'}=s}}\sum_{t=0}^{T-1}I_{s_t=s}(r_t+\gamma v(s_{t+1})) \\
&=\lim_{T\rightarrow\infty }\frac{1}{T}\sum_{t'=0}^{T-1}I_{s_{t'}=s}\mathbb{E}^\pi[R_t+\gamma v(S_{t+1})|S_t=s] \\
&=p_\infty^\pi(s)\mathbb{E}^\pi[R_t+\gamma v(S_{t+1})|S_t=s]
\end{align}
```
この式変形を式(4.4)に適用すると式(4.7)が得られる。

## 収束の速さ
式(4.2)のモンテカルロ法は効率が悪い。ベルマン作用素を使用した方法のほうが効率が良い
→具体的にどれくらい効率が良いか示されていない。**要調査**

## トレースの計算量
式(4.25)を各tごとに計算するのは計算量が多く、前方観測的なTD($\lambda$)法のほうが有利ではないのか？
→トレースについて、式(4.26)を各tで計算するのは大変だが、p.101の式のように漸化式にすれば、1ステップ前の値さえ記憶していれば計算できるので計算量は多くない。

```math
z_{t,\lambda}(s) = I_{s_t=s} + \lambda \gamma z_{t-1, \lambda}(s)
```
一方で$\hat V(s)$はすべての$s\in S$に対して記憶しておく必要があることに注意。計算量自体は多くない。

```math
\delta_t = r_t + \gamma \hat V(s_{t+1}) - \hat V(s_t)
```


# おわりに
現在は4.1節〜4.2節までやりましたがとてもわかり易いです。
Word2Vec以降をざっくりと知っておこう！


[文章読解でもAIがついに人間超え、グーグルの「BERT」発表から1年で急成長](https://tech.nikkeibp.co.jp/atcl/nxt/column/18/01056/111200002/?fbclid=IwAR2GnoTgJOCtzOKA_KkzEHt7CvbOgQxm__6Hxp8GojJnJE41Wqwpk0mPzRk)


#文章読解でもAIがついに人間超え、グーグルの「BERT」発表から1年で急成長

2018年に「ELMo」と、その上位互換である「BERT」が論文発表され、自然言語処理分野のブレークスルーが起きている。「BERT」は更に進化を遂げ「ALBERT」となり、この手法が現在主流になっている。自然言語処理分野が「Word2Vec」で止まってると浦島太郎になります！要注意！

##自然言語処理モデルをいくつか紹介します。

###2013年
####◆Word2Vec

単語をベクトル化して定量的に扱う事が出来るよ！

単語の意味で足し算引き算できるようになったってのが有名。

例）王様－男＋女＝女王

###2014年

####◆sequence to seuqence（seq2seq）

「語句の並び（A）」を入力して、別の「語句の並び（B)」を出力するよ！

（A)に英語を入力して、（B)にフランス語を出力するようにすれば「翻訳」が出来て、

（A)に質問を入力して、（B）に回答を出力するようにすれば「対話」が出来るよ。

###2016年

####◆fastText

Word2Vecより学習が早い！結果はまちまち、、、

####◆GNMT

多分、seq2seqの上位互換。

###2017年

####◆Transformer

RNN や CNN を使わず Attention のみ使用したニューラル機械翻訳。

2017年段階では最強。

###2018年

####◆ELMo

2018年ディープラーニング2大トピックの一つ！単語ベクトル化する手法だけどWord2Vecと違って、文脈を考慮した単語ベクトル化が出来る。「アメ」という言葉の意味がキャンディーなのか、レインなのか、文脈から判断出来るようになりました！すご！

####◆BERT

2018年2大トピックのもう一つ！自然言語処理にブレークスルーを起こしたモデル。

自然言語処理タスクを教師データなしで、かつ双方向に事前学習することが出来るようになった。これにより、WEB上にある莫大な量のテキストデータが利用可能に！！

###2019年

####◆ALBERT

BERTをより軽量に、そして性能向上させた。ALBERT最強！

####◆T5（Text-To-Text Transfer Transformer）


[10月23日に発表された論文　](https://arxiv.org/abs/1910.10683
)

10月24日段階にて世界最高水準（SOTA）であるとされている。
【備忘録】いろいろ

# PyTorch

## sampler

URL: [SubsetRandomSampler](https://pytorch.org/docs, /stable/data.html#torch.utils.data.SubsetRandomSampler), [BatchSampler](https://pytorch.org/docs/stable/data.html#torch.utils.data.BatchSampler)

```python
list(BatchSampler(SequentialSampler(range(10)), batch_size=3, drop_last=False))
[[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]]
list(BatchSampler(SequentialSampler(range(10)), batch_size=3, drop_last=True))
[[0, 1, 2], [3, 4, 5], [6, 7, 8]]
```


```python
from torch.utils.data.sampler import BatchSampler, SubsetRandomSampler
for indecies in BatchSampler(SubsetRandomSampler(range(50)), 10, False):
    print(indecies)

[5, 23, 10, 46, 49, 22, 13, 12, 24, 16]
[38, 15, 44, 39, 7, 1, 20, 41, 37, 47]
[48, 19, 25, 30, 43, 18, 4, 9, 27, 33]
[45, 31, 32, 26, 42, 28, 2, 35, 36, 3]
[11, 8, 40, 14, 21, 6, 34, 29, 0, 17]
```

# 数値計算

## log-sum-exp

URL: [Wikipedia](https://en.wikipedia.org/wiki/LogSumExp)

```python
x = np.random.uniform(size=[100, 200])
expected = logsumexp(x)
max_x = np.max(x)
actual = max_x + np.log(np.sum(np.exp(x - max_x)))
self.assertEqual(expected, actual)
```
Vue.js、ElementUIのinfiniteScrollコンポーネント使ってみた。

# 背景
サーバーレスで自分用の家計簿的なwebサービスを勉強も兼ねて開発中。
せっかくwebサービスで作るので、モバイルからの操作も考慮したい。入力したデータは一覧出来る様にして、修正とかもしたい。その際に、モバイル表示の際に避けて通れないと思われるのが **infiniteScroll** （twitterとかFBでおなじみのやつ）。
PCならページングとか色々多量データ表示する為の部品置けると思うけど、モバイルだとせいぜい１つか２つの部品が限界（自分感覚）。**infiniteScroll** ならスワイプアクションで追加データ読み込みが出来るので目的に合致してる。

# 使ってみての感想
- 表示部分の処理はコンポーネントに任せる事が出来て楽だった。
- **infiniteScroll** 機能自体がデータ供給部などと組み合わさって出来ているので当然の事ながらそれらは自分で用意する必要がある。
- 追加読み込みデータの処理を考えるほうに時間がかかった。クエリ結果の保持や指定ポイントからの読み込みなどをサポートしている様なミドルウェア側なら楽だと思うけど、大半はそうでないと思う。

# サンプルから読み取れるポイント
読み込み限度に対応したいので、 [公式サイト](https://element.eleme.io/#/en-US/component/infiniteScroll#disable-loading) の **Disable Loading** のサンプルコードが基本になります（※サンプル表示してあるコンポーネントの下部にホバーすると **Expand** の文字が出てきて、クリックするとサンプルコードが表示される）。

<details><summary>公式サイトサンプルコピー</summary><div>

```vue
<!-- This code is sample code at https://element.eleme.io/#/en-US/component/infiniteScroll#disable-loading -->
<template>
  <div class="infinite-list-wrapper" style="overflow:auto">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
      <li v-for="i in count" class="list-item">{{ i }}</li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore">No more</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 10,
        loading: false
      }
    },
    computed: {
      noMore () {
        return this.count >= 20
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods: {
      load () {
        this.loading = true
        setTimeout(() => {
          this.count += 2
          this.loading = false
        }, 2000)
      }
    }
  }
</script>

```
</div>
</details>

自分が使うときに考慮すべきポイントは以下の部分と思いました（2019-11-17時点のサンプル）。

- 読み込み中制御：**loading** 変数を使って、読み込み中には追加読み込みしない様制御。同時に読み込み中メッセージ表示にも使用。
- 読み込み限度制御：**disabled** 変数を使って、読み込むデータがもう無い時に無駄な処理しない様な制御。同じく読み込み限度メッセージ表示にも使用。（**infinite-scroll-disabled** パラメーター）
- 読み込み処理：サンプルでは **load** 関数がそれ。非同期であるwebAPI処理を想定してsetTimeoutを使用していて親切。（**v-infinite-scroll** パラメーター）

# 手順
#### 読み込み中制御
ここは特に変更なしでOK。

#### 読み込み限度制御
何気にここ悩みました。サンプルでは最大20要素。
ここは表示するデータの性質、データ読み込み部の性質など総合的に考える部分ではないかと思います。そして自分のケースでは以下の考慮ポイントがありました。

- バックグラウンドがDynamoDB
  - データ取得webAPIは日付範囲を指定する形。（RDBの様に範囲指定SQL組めない）
  - ある１日分のデータ数は不定。０の事もある。
  - １回の取得処理でデータがなかった事が追加読み込みデータ無しを意味しない
- 画面構成として、読み込み開始日（逆順）だけを指定できる。
  - 過去データ見たくなった時は指定日を変えればよい。頻度も高くない。
  - 少なくとも自分は１週間も過去分が見れればOK。

この条件から、今回の用途では、**100レコードもしくは30日分** とした。

#### 読み込み処理
重要なポイントは以下の通り。

- 前回読み込み終了点を保持する事。そうしないと連続したデータ読み込めない。
- １回の読み込み量を決める事。少ないと１回のアクセス時間は短いがある程度のデータを表示するのに読み込み回数が必要になる。多いと１回のアクセス時間が長くなる。ただ、１回読み込めば多くのデータが見れる。

今回の用途では、webAPIの性質上、読み込み終了点は日付となる。１回の読み込み量に関しては、１日数件のデータがあると想定し、３日分読み込む事にした。

# まとめ
御大層に色々書いてしまったが、世の中に何かもっと便利なテンプレートある様な気がしてなりません。
[結果的な自分のソース](https://github.com/silverbox/homeaccounting/blob/2-3-front-dev01/frontside/homeaccount/src/components/List.vue) はリンク先のようになりました。**infiniteScroll** 以外もいろいろ入っているのでここに張り付けるほどじゃないです。
多分 **infiniteScroll** 部分だけピックアップしたら結局コンポーネントのサンプルと同じ事になると思われます。
私のソースは技術的なソースの参考にはならないと思いますので、この記事が前述の考慮ポイントを考える上での一つのサンプルとなったら幸いです。
Railsチュートリアル（第14章）

# はじめに
だいぶ日が空いてしまいましたが、Railsチュートリアルの第14章のメモだけ残しておきます。

# RelationShipモデル
フォローとフォロワーを繋ぐ仕組みを作るために、Userモデル同士を繋げる「relationship」モデルを作成します。
以下のように、フォローしているユーザーIDとフォローされているユーザーIDを持ちます。
<img width="251" alt="スクリーンショット 2019-11-17 22.50.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/41dc8250-7cdf-a0a9-dd02-e06700084f82.png">

作りたい関係性は、以下のように、relationshipモデルを通してUserモデル同士を繋ぐことです。
フォローしている関係を「active_relationships」、フォローされている関係を「passive_relationships」として、左右非対称の関係を区別します。

<img width="433" alt="スクリーンショット 2019-11-17 22.50.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/4a8ba644-0f9b-c436-df3f-640e7708617e.png">

上記の関係を示すのに、以前と同様に「has_many」を使いますが、少し記述を追加します。

```rb:app/models/user.rb
class User < ApplicationRecord
  has_many :microposts, dependent: :destroy
  has_many :active_relationships, class_name:  "Relationship",
                                  foreign_key: "follower_id",
                                  dependent:   :destroy
  .
  .
  .
end
```
「active_relationships」と「passive_relationships」はモデル的には同じものを使用するため、そのまま記述した場合、モデルが見つからない状態になってしまいます。
そのため、`class_name`でモデルを指定します。
また、relationshipモデルを繋ぐ際のキーになる項目を`foreign_key`で指定します。

relationshipモデル自体は以下のように、Userモデル同士を１対１で繋ぎます。

```rb:app/models/relationship.rb
class Relationship < ApplicationRecord
  belongs_to :follower, class_name: "User"
  belongs_to :followed, class_name: "User"
end
```

これでUserモデル同士の関係性を定義できたため、実際に関係性を利用してUserモデルを繋ぎます。

```rb
has_many :followeds, through: :active_relationships
```
上記のように、「active_relationships」の関係性を通して、followed_idを外部キーにUserモデルを取得する関係を定義します。
しかし、「followeds」という記述が英文法的に不適切なため、以下のように変更します。

```rb
has_many :following, through: :active_relationships, source: :followed
```
`source`で定義することで、「following」は「followed_idの集合」であるとRailsに伝えます。

passive_relationshipsに関しても同様に作成することができます。
Ubuntu18.04起動時にgrub画面が表示されない問題

Ubuntu 18.04 LTSのインストール後起動したらgrub画面が出ずにUbuntuが起動したので復旧方法をメモ。

まず、下記コマンドでgrub画面を作成。

```
sudo grub-mkconfig
```

次に、「/etc/default/grub」の設定ファイルを以下のように編集。

```
GRUB_TIMEOUT_STYLE=menu
#GRUB_TIMEOUT=0
GRUB_HIDDEN_TIMEOUT_QUIET=false
```

編集後、下記コマンドで変更内容を反映。

```
sudo update-grub
```

再起動後、grub画面が出て来るようになった。

- 参考：https://www.atmarkit.co.jp/ait/articles/1902/01/news045.html