OmniAICreator/Qiita-1.07M huggingface dataset:
adventcalender ARCoreを触って、サンプルを作ってみる 12/11分として記載


2020/02/08 記事の構成を記載

こんにちは、コロナです。

今回は、ARの学習をしたくてARCoreのサンプルを作成しようのコーナーです。

# ARCoreって何?

UnityがAndroid向けにゲームを拡張するために用意してくれたSDKになります。
Unity側の紹介ページ
[https://unity3d\.com/jp/partners/google/arcore](https://qiita.com/drafts/398b3fe6785a146975f1/edit)

# issueこれからの課題
google側に記載されているSDKの消化をしていく
https://developers.google.com/ar/develop/unity/quickstart-android

# 2020/12/09 追記
MRTK×Arfoundationで、過去のゲームを１シーンから作る方向に変更

## プロジェクトの設定について、確認と必要であれば設定

### MRTKのプロジェクト設定部分

![RebirthArcane - SampleScene - PC, Mac & Linux Standalone - Unity 2019.3.13f1 Personal _DX11_ 2020_12_10 0_17_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/50fbf392-a6e2-2cab-bd56-03bdc56c3621.png)


### 今回のモンスターは、MRTKのPressableButtonで押して召喚

pressableボタンの説明は、<a href="https://microsoft.github.io/MixedRealityToolkit-Unity/api/Microsoft.MixedReality.Toolkit.UI.PressableButton.html" rel="ugc">公式ドキュメント</a>を見ていただければと思います

![RebirthArcane - SampleSceneArCore - PC, Mac & Linux Standalone - Unity 2019.3.13f1 Personal _DX11_ 2020_12_10 0_22_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/7e228edf-ddfa-66c4-2e48-17fa8d047195.png)


### ARfoundationの設定

ARSession

![RebirthArcane - SampleSceneArCore - PC, Mac & Linux Standalone - Unity 2019.3.13f1 Personal _DX11_ 2020_12_10 0_20_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/a040b5c1-06d3-49d9-fc17-5fe61adf16b5.png)



AR内のカメラオブジェクトの設定

![RebirthArcane - SampleSceneArCore - PC, Mac & Linux Standalone - Unity 2019.3.13f1 Personal _DX11_ 2020_12_10 0_20_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/b673a406-d8b7-326f-cbd5-4bb440008f54.png)


ARカメラオブジェクト本体の設定
ゲーム本体のmaincameraオブジェクトに設定をしました

![RebirthArcane - SampleSceneArCore - PC, Mac & Linux Standalone - Unity 2019.3.13f1 Personal _DX11_ 2020_12_10 0_21_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/a1eafe14-7d0d-6487-2e0a-9280054c9b16.png)


## Android環境として実際にビルドをする

ar機能が、実行されてお部屋をフィールド画面で戦える状態まで来ました

<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="css,result" data-user="sakuriver" data-slug-hash="poEvoNR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="XWjJWXe">
  <span>See the Pen <a href="https://codepen.io/sakuriver/pen/poEvoNR">
  XWjJWXe</a> by サリー(sakuriver)@FF7Rとデススト攻略、ドラクエ3中 (<a href="https://codepen.io/sakuriver">@sakuriver</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>




ありがとうございました






<a href="https://microsoft.github.io/MixedRealityToolkit-Unity/README.html" rel="ugc">MRTK公式ドキュメント</a>

<a href="https://docs.unity3d.com/Packages/com.unity.xr.arfoundation@4.0/api/UnityEngine.XR.ARFoundation.ARSession.html" rel="ugc">ARSession公式ドキュメント</a>
Railsで新しくテーブルを作成するときの基本的な流れ


Rails で新しくモデルを作成するときの備忘メモ

## マイグレーションファイルを作成

```
$ rails g model Test
```

## マイグレーションファイルの編集

マイグレーションファイルを「rails g model Test」で作成すると、次のようなファイルが作成される。

```yyyymmddHHMMSS_create_tests.rb
class CreateQuestions < ActiveRecord::Migration[5.2]
  def change
    create_table :tests do |t|

      t.timestamps
    end
  end
end
```

基本としては、create_table :tests do |t| から end の間に追加したいカラムの情報をつけていく。

ここでは、string 型の title カラムと、inter 型の No というカラムを追加させる。
なお、255 文字以下の文字列ならば string 型、それ以上であれば text 型を使います。

```yyyymmddHHMMSS_create_tests.rb
class CreateQuestions < ActiveRecord::Migration[5.2]
  def change
    create_table :tests do |t|
      t.string :title
      t.integer :No
      t.timestamps
    end
  end
end
```

これであとは「rails db:migrate」：を実行すれば、title カラムと No カラムと timestamps カラムを持つ「Test」というテーブル（表のようなもの）が作成される。

## マイグレーションファイルをデータベースに反映

```
$ rails db:migrate
```

## モデルに制約をつけていく

通常、作成したモデルに入れる情報（ここではテーブルに入るデータのようなイメージ）には、好き勝手な情報を入れられないように**制約(validates)**をつけてあげます。
ちなみにモデルファイルを編集したあとは、特にコマンドを実行する必要はありません。

次の例は、空のタイトルが入力されないように Test モデルに制約（バリデーションといいます）をつける例です。

```¥app¥models¥test.rb
class Question < ApplicationRecord
  validates :title, presence: true
end
```

なお、複数のバリデーションをもたせることもできます。
例えばタイトルの長さを 100 文字以下にしてほしい場合は次のように記述します。

```¥app¥models¥test.rb
class Question < ApplicationRecord
  validates :title,
    presence: true,
    length: { maximum: 100 }
end
```

以下ではよく使うバリデーションを整理

### 空の値ではないこと

```
validates :title, presence: true
```

### 一意性（かぶらないようにしたいとき）

```
validates :title, uniqueness: true
```

### 長さ

```
validates :title,    length: { minimum: 10 }       # 「10文字以上」
validates :title,    length: { maximum: 100 }      # 「100文字以下」
validates :title,    length: { in: 10..100 }        # 「10文字以上100文字以下」
validates :title, length: { is: 8 }            # 「8文字のみ」
```

### 数値であること

例えば integer 型で書いてほしいとき

```
validates :No, numericality: true
```

### メールアドレス形式

正規表現を駆使していて少し難しいと思うので、コピペが楽

```
VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
validates :email, presence: true, uniqueness: true, format: { with: VALID_EMAIL_REGEX }
```

これで「@が入っているか」「一意性があるか」「空ではないか」といった、メールアドレスのデータとして必要な要件を包含できているので便利です。
【Nuxt.js】$router.push('/')で異なるURLに遷移する

開発中に学んだ知識のアウトプットとして書いています。

####nuxt-linkで遷移する方法

```js:about.vue
<nuxt-link to="/">
  <div>ホームへ戻る</div>
<nuxt-link>
```

今までは'nuxt-link'タグで遷移する方法のみ使用していました。
＊この機能は Nuxt.js v2.4.0 で追加されました。
＊'router-link'の拡張版のようです。

####$route.push()で遷移する方法
```js:about.vue
<button @click="$route.push('/')">ホームに戻る</button>
```
'push'メソッドでも遷移できるようです。'click'アクションでホームに戻る処理です。
adventcalender DOTS挑戦 2019/12/21分として投稿


2020/02/08 構成の記載

コロナです。

今日は、SNSなどで話題になっているUnityのdotsに挑戦しようということで進めていきます。

# dotsって何？

話題になっているなーというだけで、dotsについて理解度が低いので調べてみるところから進めてみます。

正式名称は、EntityComponentSystemのことを表していました。

## 公式チュートリアルページを見てみる

[https://learn\.unity\.com/tutorial/entity\-component\-system](https://qiita.com/drafts/f0e735bcc0374f73ce49/edit)

更新して記入するときの課題
# dotsのチュートリアルを消化する


# dotsのチュートリアル後に簡易的なソフトを実装する（１ステージ)
OutSystemsでハッシュテーブルを利用する

OutSystemsでハッシュテーブルを利用する方法を説明します。

ハッシュテーブルは、キーと値の組み合わせを格納していくデータ構造です。
Listだと、整数のインデックスに対してList変数ごとに決まった値を格納できます。
これに対して、ハッシュテーブルでは、Text型のインデックスに対して、Object型の値を格納します。

OutSystemsの標準Data Typeにはこれを実現するものがないため、Forgeコンポーネントを利用するか、自分でExtensionを書くことになります。

ここでは、[Advanced Hashtable](https://www.outsystems.com/forge/component-versions/3253)というForgeのコンポーネントを利用します。

# サンプル
Forgeコンポーネント：https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7064
AdvancedHashtable Screenを参照してください。

# 環境
Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.25)
Advanced Hashtable(Version 3.0.0)

# 基本的な使い方
まずは、実装例。
![qAdvancedHashtable1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/c1d6b1fb-ea5e-75ca-4a43-6b0c1000a59c.png)

- HT_Init
    - ハッシュテーブルを用意します
    - 後続のAdvanced HashtableのActionはこのActionのOutputをパラメータに渡します
- HT_Set
    - ハッシュテーブルにデータを1つ設定します
    - 同じキーが登録済みであれば、その値を上書き
    - 未登録であれば、キーと値のセットを追加します
    - パラメータ：ハッシュテーブル、キー（Text型）、値（Object型）
    - Object型にキャストする際には、組み込みのFunction ToObject()を使用してください
- HT_GetText
    - ハッシュテーブルからデータを1つ取得します
    - Get〇〇というActionがいくつかあります
        - 〇〇にはOutSystemsの基本型が入り、取り出される値は、その型にキャストされて出てきます
    - データはキーで指定します
    - キーが未登録だと、値は各方の初期値を返すようです（C#のソースを見る限り）
    - 指定型にキャストできない場合、例外がスローされるようです

# Object型について注意
ドキュメントに記述が見つけられないのですが、ScreenのObject型Variableには、Screen Actionからアクセスできないようです。よって、PreparationでInitして、Screen Actionでその変数を使いまわしていくということができません。

フォーラムでは、記述がありました：https://www.outsystems.com/forums/discussion/33090/not-possible-to-use-a-variable-of-type-object/

また、一度Object型にしてしまった変数は、再び元の型にキャストし直す方法が組み込みFunctionでは提供されていません。よってHT_GetObjectを使うときは注意が必要です。

# キーや値を列挙する
- HT_Keys
    - ハッシュテーブル内の全キーをListとして返します
- HT_Values
    - ハッシュテーブル内の全値をListとして返します
    - ただし、Text型にキャストできるもののみ
- HT_Entries
    - ハッシュテーブル内の全データを、キーと値をAttributeに持つStructureのListとして返します
    - これも、値をText型にキャストできるもののみ

例えば、HT_KeysでキーのListを取り、ListSortで並べ替え、その結果をループしてHT_GetTextなどにかければ、キーの昇順などでリストを取得できます。

![qAdvancedHashtable2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/15b37870-e8f2-f8e7-0628-37bf5660ee9c.png)


# その他の操作
- HT_Count
    - ハッシュテーブル内のデータの個数（キーの個数）を返します
- HT_Clear
    - ハッシュテーブルを空（データの個数０）にします
- HT_Exists
    - ハッシュテーブル内に指定のキーがすでにあるかをBooleanで返します

例えば、1エントリ追加した状態で以下のようにActionを呼ぶと、最初のHT_Countは1、2回めのHT_Count2は0を返します。

![qAdvancedHashtable3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/0d8c5fec-c4b7-8106-1905-425344167d72.png)
Windows10でGithub Pages+Jekyllのローカル環境構築

##やろうとしていること
Github Pages(github.io)でポートフォリオサイトを構築したい。
そのためにローカルで開発環境を構築したい。

##GitHub Pagesとは？
`https://username.github.io`にアクセスするとGithubリポジトリから直接Webサイトにアクセスできる仕組みです。
詳細は[公式ページ](https://pages.github.com/)を参照してください

##インストール
- Ruby(-v 2.6.5-1)
- Jekyll(-v 4.0.0)
- bundler(-v 2.1.4)

手順の参考：[Jekyll on Windows](http://jekyllrb-ja.github.io/docs/installation/windows/)

###Rubyのインストール
Ruby公式サイトの[ダウンロードページ](https://rubyinstaller.org/downloads/)からRuby+Devkit 2.6.5-1をダウンロードする。

###JekyllとBundlerのインストール
```bash:GitBash
gem install jekyll bundler
```
私は手元にあった[Git Bash](https://gitforwindows.org/)を使いました。Bashなら何を使ってもよいと思います。

##Jekyllで新規サイトを作成する
- bundlerからJekyllのnewを実行する

```bash:GitBash
$ bundle exec jekyll new mysite --force
$ cd mysite
$ bundle exec jekyll serve
Configuration file: C:/Users/~~/documents/github/~~/mysite/_config.yml
            Source: C:/Users/~~/documents/github/~~/mysite
       Destination: C:/Users/~~/documents/github/~~/mysite/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 2.626 seconds.
 Auto-regeneration: enabled for 'C:/Users/~~/documents/github/~~/mysite'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

```
この状態になれば`http://localhost:4000/`からサイトにアクセス可能になります。

![jekyll-page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243508/23418e05-d334-9c38-7238-e0ae6bf90e0e.png)


##jekyllのフォルダ構成の説明
![20200209-134325.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243508/fe121a37-2408-6ac5-3d0a-0e809717f8b2.jpeg)

- _posts：ここに.markdownファイルを追加すると投稿ができる
- _config.yml：Themeやページ内のフッターを編集できる設定が書かれたファイル
- about.markdown：ページ内のAboutを編集できる。
- Gemfile：bundlerが作ったGem情報のファイル

より詳しくは[Theme: minimaのGithubページ](https://github.com/jekyll/minima)にて。

##まとめ
遠い昔のCGI日記ツール見たいな使用感です。好きです。
Railsの環境構築時にLibrary not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)で苦しんだ

## Railsの環境構築時に表題のエラーで苦しんだ
おなじみのopensslのエラー。どうせすぐ解決できるやろって思ってたら意外とハマったので備忘録として残しておきます。

## bundleを叩くとコケる
諸々の環境構築終了後によしローカルサーバー立ち上げるぞ！と意気揚々と

```
$ bundle exec rails s
```

を叩くと

```
Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)
  Referenced from: /usr/local/opt/mysql@5.6/lib/libmysqlclient.18.dylib
  Reason: image not found - /Users/~~/~~/~~/vendor/bundle/ruby/2.5.0/gems/mysql2-0.4.10/lib/mysql2/mysql2.bundle
```

あれ、opensslで怒られてるぞ…



https://qiita.com/YoshiyukiKato/items/e4f67c588d2943c1253d
この方の記事の通り、

```
$ brew install openssl
$ brew link openssl --force
$ rbenv uninstall 2.5.5
$ rbenv install 2.5.5
```

とかでいけるやろ… いけー！！

```
Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)
  Referenced from: /usr/local/opt/mysql@5.6/lib/libmysqlclient.18.dylib
  Reason: image not found - /Users/~~/~~/~~/vendor/bundle/ruby/2.5.0/gems/mysql2-0.4.10/lib/mysql2/mysql2.bundle
```

え…同じじゃん…

というわけで少しハマってしまいました…

## 解決法

https://qiita.com/utsu_jimmy/items/a35437faea1c0d2f357d
この方の記事も参考にしながら、rbenvでrubyごと再インストールしたり、brew upgrade試したり一通りはやったのですが、エラー内容は変わらず…

もしかしてopensslのversionがおかしい？と思って、

```
$ brew switch openssl ~~
```

みたいにopensslのversionを切り替えようとすると

```
Error: openssl does not have a version ~~ in the Cellar.
openssl's installed versions: 1.0.2s
```

あ、~~なんてversionなかった。。。じゃあ1.0.2s指定したったらどうなるんやろ

```
$ brew switch openssl 1.0.2s
```

を実行すると、、

```
Cleaning /usr/local/Cellar/openssl/1.0.2s
Opt link created for /usr/local/Cellar/openssl/1.0.2s
```

ん？もしかしてうまくいった？
じゃあこれで

```
$ bundle exec rails s
```

実行すると

```
=> Booting WEBrick
=> Rails 5.1.7 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
```

ふつうに立ち上がったあああ！

結局opensslのversionが問題だったようです…

記事にするとしょうもないけど、ハマるときはハマりますよね…

この記事が誰かの役に立てば幸いです
anyenvでrubyの環境構築

anyenvでrubyをセットアップしたときのメモです。

## インストール

```
#インストール
$ brew install anyenv 
$ anyenv install --init
$ code ~/.bash_profile
```

## 設定
.bash_profileに以下を追加

```
# anyenv
export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"
```

追加内容を反映する

```
$ source ~/.bash_profile
```

## 動作確認

`anyenv install -l` はこのanyenvインストールできる*envの一覧を表示するコマンド

```
$ anyenv install -l
  Renv
  crenv
  denv
  erlenv
  exenv
  goenv
  hsenv
  jenv
  luaenv
  nodenv
  phpenv
  plenv
  pyenv
  rbenv
  sbtenv
  scalaenv
  swiftenv
  tfenv
```

## anyenvでrbenvを入れる

```
$ anyenv install rbenv
$ source .bash_profile
$ rbenv install -l
1.8.5-p52
1.8.5-p113
1.8.5-p114
1.8.5-p115
1.8.5-p231
1.8.6
1.8.6-p36
...
```

## rubyをinstall
今回は、バージョン `2.7.0` を入れます。

```
$ rbenv install 2.7.0
$ rbenv global 2.7.0
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
```
Shopifyのテーマの編集方法 ~随時更新~

# 自分のメモ用ですが、参考になれば幸いです.

### フォルダ構成
上から順に大きいコンポーネント. 拡張子liquidはrubyの文法で書かれています.
*初めてや！って人はrailsいじってからやるといいかも。
Layout
Template
Section
Snippet

### Javascript
Assets配下に設置
以下でinclude

```liquid
<script src="{{ 'header_common.js' | asset_url }}" defer="defer"></script>
```

### CSS
Assets配下に設置
以下でinclude

```liquid
{{ 'header.scss' | asset_url  | stylesheet_tag }}
```

### テーマのCSSを変えたい
プレビュー表示から、編集したい要素のclassを探す
theme.scss.liquid内で該当クラスを探す
中身をいじる！

### テンプレート
自分でテンプレートを作ってもOK.
その際は、下記のようにすると適応できる。
この場合は、sectionフォルダから該当ファイルがあれば、見つけてレンダリング.

```ruby
{% section 'header' %}
```
【Windows】指定した宛先の通信のみVPN経由にする

WindowsでVPN接続すると、デフォルトではすべての宛先がVPN経由になる。
それだと相手方の帯域を食うし、使い方次第ではセキュリティ的にもよろしくないので、業務上必要なトラフィックのみVPN経由となるよう、**ルーティング**を見直すことにした。

# 手順
## すべての宛先でVPNを使わないようにする
いったん、外向きの通信すべて、VPNに流さないようにする。
これはWindowsのGUI画面から設定できる。

### ネットワーク接続を開く
[ファイル名を指定して実行] から`ncpa.cpl`と入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/76f53dd2-7ee9-3c5f-2759-aa31d8c403b1.png)
該当するVPN接続を選び、右クリックからプロパティを開く。

### TCP/IPのプロパティを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/21d18f68-e0c7-74df-3a3f-5363afb495d4.png)

### 詳細設定を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/c4a3c25f-33ab-b39b-18c3-5967a70dd391.png)

### リモートネットワークのGWを使わないようにする
デフォルトの設定では、VPN接続中の外向き通信はすべてリモートネットワークのゲートウェイを経由するようになっているので、これを無効にする。

- [リモートネットワークでデフォルトゲートウェイを使う] のチェックを外す
- [クラスベースのルートの追加を無効にする] のチェックを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/7363447e-057a-3a98-7a94-5233b19e6cef.png)

[クラスベースのルートの追加を無効にする] にチェックを入れない場合、VPNと同じネットワークアドレス宛の通信は、すべてVPNに流れることになる。
ローカルネットワークとリモートネットワークで、ネットワークアドレス（例：`192.168.1.0/24`）が同じ場合、これでは都合が悪いのでチェックを入れること。

## VPN経由の宛先を設定
VPN経由で通信させたい宛先を個別に追加していく。
コマンドベースで設定することになるが、これには２通りの方法があるので両方紹介しよう。

なお、ここでは、ローカルのネットワークアドレスが`192.168.11.0/24`、リモートのネットワークアドレスが`192.168.1.0/24`にあるものとして説明する。

### PowerShellから追加する方法
Windows8以降のOSでは`Add-VpnConnectionRoute`コマンドレットが使える。
VPN接続時にルートを自動で追加し、VPN切断時にルートを自動で削除してくれるので、一度だけ実行すれば良い。

#### 【例１】宛先ネットワークを追加
社内に沢山あるサーバにアクセスする必要があり、それがローカルのネットワークアドレスと被らなければ、この書き方が簡単で良い。

```powershell
Add-VpnConnectionRoute "VPN接続名" -DestinationPrefix 10.0.0.0/8
Add-VpnConnectionRoute "VPN接続名" -DestinationPrefix 192.168.1.0/24
```

#### 【例２】宛先ホストごとに追加
ローカルのネットワークアドレスと被る場合や、接続元IPアドレスを制限しているインターネットのサーバにアクセスする目的でVPNを経由している場合は、ホストごとに追加する。

```powershell
Add-VpnConnectionRoute "VPN接続名" -DestinationPrefix 13.114.178.6/32
```

※例示の 13.114.178.6 は qiita.com のアドレスである。

PowerShellでは**CIDR表記**で書ける。
VPN接続名は、GUIで確認する以外に、`Get-VpnConnection`コマンドレットでも確認できる。
設定されているルート情報は`(Get-VpnConnection "VPN接続名").Routes`で見れる。
削除は`Remove-VpnConnectionRoute`コマンドレットで行う。（PowerShellのコマンドレットではAddに対してはRemoveという暗黙ルールがあるので覚えておこう）

### コマンドプロンプトから追加する方法
サポートが終了しているWindows7以前のOSでは、昔からお馴染みの`route add`コマンドを使う。
`-p`オプションが恒久指定になるので一度だけ実行すれば良いが、PowerShellの書き方と比べると少し面倒くさい。
先述のPowerShellと同じことを`route add`で記述すると、次のようになる。

```shell
route -p add 10.0.0.0 mask 255.0.0.0 (VPNサーバのアドレス) metric 1 if (インターフェース番号)
route -p add 192.168.1.0 mask 255.255.255.0 (VPNサーバのアドレス) metric 1 if (インターフェース番号)
route -p add 13.114.178.6 mask 255.255.255.255 (VPNサーバのアドレス) metric 1 if (インターフェース番号)
```

VPN仮想NICのインターフェース番号は`route print`で確認すること。
削除は`route delete`で行う。
laravelで都道府県プルダウンメニューを表示させる手順

laravelで都道府県のプルダウンメニューを導入したのでその手順をメモします

## 都道府県名一覧表をつくる

configディレクトリ下に下記ファイルを作成。

```php:pref.php
<?php 
return array(
  '0' => '未選択',
  '1' => '北海道', 
  '2' => '青森県', 
  '3' => '岩手県', 
  '4' => '宮城県',
  '5' => '秋田県', 
  '6' => '山形県', 
  '7' => '福島県', 
  '8' => '茨城県',
  '9' => '栃木県', 
  '10' => '群馬県', 
  '11' => '埼玉県', 
  '12' => '千葉県',
  '13' => '東京都', 
  '14' => '神奈川県', 
  '15' => '新潟県', 
  '16' => '富山県',
  '17' => '石川県', 
  '18' => '福井県', 
  '19' => '山梨県', 
  '20' => '長野県', 
  '21' => '岐阜県', 
  '22' => '静岡県', 
  '23' => '愛知県', 
  '24' => '三重県',
  '25' => '滋賀県', 
  '26' => '京都府', 
  '27' => '大阪府', 
  '28' => '兵庫県',
  '29' => '奈良県', 
  '30' => '和歌山県', 
  '31' => '鳥取県', 
  '32' => '島根県',
  '33' => '岡山県', 
  '34' => '広島県', 
  '35' => '山口県', 
  '36' => '徳島県',
  '37' => '香川県',
  '38' => '愛媛県',
  '39' => '高知県', 
  '40' => '福岡県',
  '41' => '佐賀県', 
  '42' => '長崎県', 
  '43' => '熊本県', 
  '44' => '大分県',
  '45' => '宮崎県', 
  '46' => '鹿児島県', 
  '47' => '沖縄県'
);
?>
```

## Viewに下記を追記

```php:create.blade.php
<select type="text" class="form-control" name="area">                          
    @foreach(config('pref') as $key => $score)
        <option value="{{ $score }}">{{ $score }}</option>
    @endforeach
</select>
```
## select、optionタグについて
- selectタグでプルダウンなどのセレクトボックスを作成できます。
- optionタグはselectタグとセットて使われ、セレクトボックス内の選択肢について指定します。value属性にプルダウンの項目を記載します。
- selectタグのtype属性に1行の入力フィールドである'text'を選択。name属性にはこの入力欄の名前を決めて入力します。入力した値(都道府県)をデータベースから取り出すときにこの名前を参照しますので必須項目です。

## foreachについて
- foreach分は今回のような連想配列の場合は下記のような構成になります。

```
foreach ($array as $key => $value)
```
- configディレクトリ下のpref.phpファイルに記載した配列を呼び出したいときはconfig('pref')となります。


```
$key => $value
```
は下記に対応します。

```
'1' => '北海道'
```

- valueの値を$keyに設定すると、都道府県名ではなく数字がデータベースに保存されてしまい、この後データを取得する際に数字が表示されてしまうので注意です。

## 参照
- [Laravelでプルダウンメニューを作ってみた。(忘備録）](https://qiita.com/takumines/items/1346b251062ad638612b)
- [Laravelで都道府県のプルダウンメニューを作ってみる
](https://qiita.com/sakuraya/items/42fffe0f171d49ee74a0)
- [【やさしいPHP】foreach文の基礎を知ってかんたんな応用を試してみる](https://www.sejuku.net/blog/47603)
Linuxのスワップしやすさを調整する

# はじめに
たまにサーバ速度がなんとなく遅いので、topやps等を使って状態を調べてたところ、どうやらswapを使っていたみたいでした。

```
Swap:          1.0G        278M        742M
```

これはメモリを増やした方がいいかなーとぱっと考えていましたが、freeコマンドの全体はこんな感じでした。

```
onodes@Balthazar:~$ free -h
              total        used        free      shared  buff/cache   available
Mem:           985M        309M        311M         33M        364M        495M
Swap:          1.0G        278M        742M
```

availableを見ればわかるとおり、物理メモリの利用可能量も十分ある中で、278MBのswap inが発生していました。

# スワップとは

改めてここでいうスワップ(swap)とは、物理メモリが不足した場合に、メモリ内のデータをディスク(HDD/SSD等)に移動させる機能のことです。
つまり、考え方としては物理メモリが不足していなければ、swapは発生しないことになります。

# swappiness
物理メモリが空いているのにswapが利用される背景として、swappinessの設定があります。
swappinessはLinuxカーネルのパラメータで、スワップ処理を行う頻度変更、調整に用いるパラメータです。
Linuxカーネル2.6以上(大体世の中そうだと思いますが...）のLinuxで実装、採用されています。

```
onodes@Balthazar:~$ cat /proc/sys/vm/swappiness
60
```
未調整だとデフォルトで60が入っているはずです。この値は0から100までの調整が可能で値が大きいほどswapしやすくなります。
また、0にするとメモリが枯渇するまでswapを利用しないという設定になります。

|値|頻度|
|----|----|
|swappiness = 0 |メモリが一杯（枯渇）するまでswapをしない|
|swappiness = 60|デフォルト|
|swappiness = 100|積極的にswapする。全体のパフォーマンス影響が出るレベル|

ここだけ見ると、swappiness = 0にしたほうがメモリをガンガン使ってパフォーマンスが上がりそうですが、0にしたら今度はOOM Killerが発生しやすくなりプロセスダウンが起きるので、やりすぎは禁物。


今回は若干日和って、swappiness = 10にしてみます。

# swappinessの変更と反映
OSはUbuntu18.04です。

```
$ sudo vim /etc/sysctl.conf
```

下部に追記

```
vm.swappiness = 10
```

そして反映

```
$ sudo sysctl -p
vm.swappiness = 10
```


# 確認とswapの開放

freeを打ちます。

```
onodes@Balthazar:~$ free -h
              total        used        free      shared  buff/cache   available
Mem:           985M        384M        181M         56M        419M        396M
Swap:          1.0G        276M        744M
```

swapの値は変わっていない...ここではswapは開放されません。
**swap usedの容量よりも実メモリの空き容量のほうが大きい場合**はswapをオフにして開放して、再びオンにします。
もし、実メモリが少ない場合は色々プロセスを停止させて実メモリに空きを作りましょう。
そこまでメモリが有効活用されていれば、この記事の作業自体いらない気もします。

## 結果

```
onodes@Balthazar:~$ free -h
              total        used        free      shared  buff/cache   available
Mem:           985M        578M         95M         34M        311M        224M
Swap:          1.0G          0B        1.0G
```

スワップを開放した直後なので、0Bになっています。
ここから、経過観察をしてみます。
Railsアプリをherokuにデプロイするまでの大まかな流れとハマったところ

Railsで簡単なセリフ検索アプリを作りました。
初めての公開なのでherokuを使ったのですが、結構時間がかかってしまったのでデプロイまでの流れと初心者がハマりやすいところをメモしときたいと思います。

#前提条件
- railsアプリがすでにできている
- herokuの登録は完了している
- herokuコマンドが使える
 

 

#環境
- Mac
- docker
- MySQL
 
#herokuにファイルをアップロードする
herokuにアプリをアップロードするためにはgitを使います。

まずはターミナルでherokuにログイン。

```
heroku login
``` 

Enterを押すと勝手にブラウザが開くのでloginボタンを押します。

ログインできたら次はアプリを作ります。

 
```
heroku create アプリ名
```

アプリ名を入力しなかったら勝手に名前がつきます。
また、同じ名前のアプリ名があるとエラーが出ます。

アプリを作ったらgitでファイルをアップしましょう。

```
git init
git add .
git commit -am "first commit"
git push heroku master
```

これでファイルのアップロードはおkです。

#DB周辺の設定
DB設定が結構ハマるポイントだと思いますので丁寧に進めていくことをおすすめします。

MySQLを利用したいので、まずはherokuでクレジットカード情報を登録しときます。お金はかかりません。登録ができたら以下を実行。

```
$ heroku addons:create cleardb:ignite
```
これでMySQLの設定はできましたが、railsはmysql2を利用していると思うので（gemファイルで確認できます）mysql2にも繋ぎます。

```
heroku config

CREATE_DATABASE_URL:   mysql://~~~~~~~
```

「heroku config」で出たURL（上みたいなやつ）をmysql2に設定します。

```
heroku config:add DATABASE_URL=mysql2://~~~~~~~~

heroku config:set DATABASE_URL='mysql2://~~~~~~~~'
```
 

これでmysql2にも設定できました。

最後に、

```
heroku run rake db:migrate
```
したらおk。

これであとは「OPENAPP」押したら（コマンドならheroku open）アプリは立ち上がります。ここまでは特に問題ないのですが、めんどくさいのが初期データを投入する場合です。

初期データを投入するときは、まずアプリに以下のファイルを作り記述を行います。

 

```lib/tasks/seed.rb

Dir.glob(File.join(Rails.root, 'db', 'seeds', '*.rb')).each do |file|
  desc "Load the seed data from db/seeds/#{File.basename(file)}."
  task "db:seed:#{File.basename(file).gsub(/\..+$/, '')}" => :environment do
    load(file)
  end
end
```
 
```db/seeds.rb
User.create!([
  {name: "test", email: "sample@email.com",password:"testtesttest"}
])
```

初期データを記入したらherokuにpushしときます。そのあとに以下のコマンドを打つと初期データが投入されます。

``` 
heroku run rake db:seed
```
ただここで気をつけないといけないのは、例えばログイン機能などをControllerを経由して入るように設定していると入れません。
どうやら初期データはControllerを経由しないらしく、ただデータベースに放り込まれるだけらしいのでそれでログインはできません。なので、ユーザー情報とかはアプリで新規登録するのがいいと思います。
 
また、複数の同じモデルのデータを投入したい場合はvalidatesをかけてると一番上のデータ以降読み込んでくれなくなってしまうので外しときましょう。
 
ちなみに、複数の別のモデルを投入したい場合は以下のようにファイルを分けたらいいと思います。
 
```db/seeds/users.rb
User.create!([
  {name: "test", email: "sample@email.com",password:"testtesttest"}
])
```
 
```db/seeds/items.rb
Item.create!([
  {item:"*********"}
])
```
 
```db/seeds.rb
require './db/seeds/users.rb'
require './db/seeds/items.rb'
```
 
これで複数モデルを読み込むことができます。
 
 
#まとめ
これでherokuへのデプロイができます。私みたいな初心者が躓きやすそうなところなので参考になれば嬉しいです。
tips: ansible block内でのset_factの影響範囲は?


#ansible block内でのset_factはblock外にも影響するか

#検証用playbook
```yaml:site.yml
---
- hosts: all
  gather_facts: false
  tasks:
  - set_fact:
      foo: 外側
  - block:
    - set_fact:
        foo: 内側
    - debug:
        var: foo
  - debug:
      var: foo
```

##実行結果

```
$ ansible-playbook -i localhost, -c local site.yml 

PLAY [all] *********************************************************************

TASK [set_fact] ****************************************************************
ok: [localhost]

TASK [set_fact] ****************************************************************
ok: [localhost]

TASK [debug] *******************************************************************
ok: [localhost] => {
    "foo": "内側"
}

TASK [debug] *******************************************************************
ok: [localhost] => {
    "foo": "内側"
}

PLAY RECAP *********************************************************************
localhost                  : ok=4    changed=0    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0   

```

#結論: blockは(予想通り)set_factによる変数設定を隠蔽しない

set_factによる設定はグローバル相当

# そもそも全てのplayで参照可能!!

インベントリ、varsプラグイン、またはset_factやinclude_varsなどのモジュールを使用して定義された変数は、「ホストスコープ」変数と呼ばれ、すべてのプレイで使用できる。

[公式: Variable scope: how long is a value available?](https://docs.ansible.com/ansible/latest/reference_appendices/general_precedence.html#variable-scope-how-long-is-a-value-available)
rails form_forでプルダウンリスト式の選択フォームを作る方法

#前書き
Ruby on Railsのform_forヘルパーで、
選択ボックスを設置したいときありますよね？
選択ボックスとは、プルダウンリスト式の選択フォームのこと。
ある箇所をクリックすると選択肢が下にずらりと並ぶようになっているやつです
よく、アンケートとか個人情報を入力する際に使うやつです。
今回はこの「選択ボックス」をRuby on Railsのアプリに導入する方法をメモとしてまとめておきます。
参考にしたのはこれです
[【Rails】 form_for でプルダウン（セレクトボックス）を実装してみる](https://qiita.com/kawakami_shotaro/items/11a677bf34136cb7686d)

#Railsアプリにform_forで選択ボックスを導入する方法
導入方法は簡単。
' <%= f.select カラム名, ["表示する文字”, "データベースに登録する値”]] %> 'と記入する。

#例

~~~
 <%= f.label :専門教科, class: 'text-white' %>
            <%= f.select :subject, [["国語", "国語"], ["数学", "数学"], ["英語", "英語"], ["理科", "理科"], ["社会", "社会"], ["その他", "その他"]], class: 'form-control' %>
~~~
#後書き
railsのヘルパーメソッドであるform_forは、入力フォームを作るのにとても便利！
他にも色々メソッドがあるので是非試してほしい。
[【永久保存版】Railsのform_for使い方（select, checkbox, etc.）](https://www.sejuku.net/blog/13163)
pythonで無限ローディングするページのソースを取得する。

# 概要
[この記事](https://qiita.com/bunnyhopper_isolated/items/5eebf1baf849fad744bf)で、無限ローディングするページを作成しました。このようなページではよくやる使い方のcurlやrequestsではソース取得できませんので少々特殊なことをする必要があります。
今回はこのページの内容を取得するコードを記します。

# 環境
*python 3.8.1

# コード
[この記事](https://qiita.com/bunnyhopper_isolated/items/5eebf1baf849fad744bf)のコードにより作成されるページに対し、ソースの取得を行います。時間及び取得済みバイト数の制限に達すると、それまでに取得したコードを出力します。

```python:get_inf_page.py
import requests
import timeout_decorator

r_bytes = b""
def main():
    url = "http://localhost:8000"

    r = requests.get(url, stream=True, timeout=20)

    byte_limit = 30
    @timeout_decorator.timeout(100)
    def load_bytes(r):
        global r_bytes
        for l in r.iter_content():
            r_bytes += l
            if len(r_bytes) % 500 == 0:
                print(f"loaded:{len(r_bytes)}/{byte_limit}")
            if len(r_bytes) > byte_limit:
                r.close()
                print("reached size limit")
                break

    try:
        load_bytes(r)
    except timeout_decorator.timeout_decorator.TimeoutError:
        print("timeout")
        pass

    print(r_bytes)

if __name__ == "__main__":
    main()
```

# 動作確認 (ロード済みバイト数オーバーでストップ)
[この記事](https://qiita.com/bunnyhopper_isolated/items/5eebf1baf849fad744bf)のコードを別ターミナルで動かしている最中に上記のコードを動かしてください。以下のように表示されます。

```
reached size limit
b'<p>Hello World ! 0</p><p>Hello '
```

# 動作確認 (ロード時間オーバーでストップ)
11,12行目を以下用に変更させて上記と同様に動作確認してください。

```python
    byte_limit = 1000
    @timeout_decorator.timeout(5)
```
起動後5秒の内に出力された分だけ表示されます。
```
timeout
b'<p>Hello World ! 0</p><p>Hello World ! 1</p><p>Hello World ! 2</p>'
```

以上。
SQLとActiveRecord

Ruby on Railsではデータベースを操作する時に、ActiveRecordのクエリインターフェイスという機能を使用することができる。
このクエリインターフェイスは簡単な記述でデータベース操作言語であるSQLを発行してくれるRails独自の記法のことです。

#SQLとActiveRecordのクエリインターフェースそれぞれでデータを取得する。
下記のようなテーブルが存在して、特定のid列のデータのみを取得したい場合。
※画像では「description」という項目になっていますが、講座内では「memo_text」という項目になっています。

![スクリーンショット 2020-02-09 10.25.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224884/94c3cf33-e490-fdbb-4cd7-4c14dde75cf5.png)

SQLの場合

```.sql
SELECT
  *
FROM
  memos
WHERE
  id = 1
LIMIT 1; /*id: 1, title: "買い物", memo_text: "牛乳"のレコードが一件取得できる。*/
```
クエリインターフェースを使用した場合。

```.rb
Memo.find(1)
#find(id)メソッドは指定したidでテーブルデータを取得できる。
```
<br>
##id以外の項目(titleなど)で検索
SQLの場合

```.sql
SELECT
  *
FROM
  memos
WHERE
  title = "買い物"
LIMIT 1;
```

クエリインターフェースを使用した場合。

```.rb
Memo.find_by(title: "買い物")
#find_by(項目名: 検索値)メソッドは指定したidでテーブルデータを取得できる。
```
<br>
##条件に一致するデータを複数取得したい場合。
SQLの場合

```.sql
SELECT
  *
FROM
  memos
WHERE
  id = 1;
```

クエリインターフェースを使用した場合。

```.rb
Memo.where(id: 1)
#where(項目名: 検索値)メソッドは指定したidでテーブルデータを取得できる。
```

#テーブルにデータを登録する。
SQLの場合

```.sql
INSERT INTO
  memos
  (
   id,
   title,
   memo_text
  )
VALUES
  (
   1,
   "買い物",
   "じゃがいも、豚肉、カレールウ"
  )
```

クエリインターフェースを使用した場合。

```.rb
Memo.create(id: 1, title: "買い物", memo_text: "じゃがいも、豚肉、カレールウ")
```

##テーブルのデータを更新する。
SQLの場合

```.sql
UPDATE
  memos
SET
  title = "買い物内容変更" /*変更する項目 = 値 */
WHERE
  id = 1; /*対象の条件*/
```

クエリインターフェースを使用した場合。

```.rb
Memo.where(id: 1).update(title: "買い物内容変更")
#idで検索を行なってから更新をしていることに注意。
```

##テーブルのデータを削除する

```.sql
DELETE
FROM
  memos
WHERE
  id = 1; /*対象の条件*/
```

クエリインターフェースを使用した場合。

```.rb
Memo.where(id: 1).delete_all
#idで検索を行なってから削除をしていることに注意。
#クエリインターフェースで削除する場合は1対多の関連するレコードを削除するdestroy_allなどもある。
```
WSL+Pyenv+Jupyter+VSCodeでPythonの環境を構築する

# はじめに
Deep Learningをはじめとする昨今のAIブームで、いざPython環境を構築して必要なパッケージを入れて・・・とやっているうちにあれよあれよと時間が過ぎてしまうのがつらかったので（ショボいですが）スクリプトにまとめて自動化しようという試みを始めたのでまとめようと思います。環境構築の時短の参考になればと思います。

本記事では、pyenv[^1]とpyenv-virtualenv[^2]でシステムの環境を汚さず、カジュアルに作っては壊しができるPython環境を導入し、そこにpipで必要なパッケージを入れるようにします。また、VSCodeのPython拡張機能を用いて、Jupyter Notebookの形式でPythonを実行できるようにします。これらの環境を全てWindowsのWindows Subsystem for Linuxで実行しているUbuntuで構築します。

[^1]: [pyenv, GitHub](https://github.com/pyenv/pyenv)
[^2]: [pyenv-virtualenv, GitHub](https://github.com/pyenv/pyenv-virtualenv)

# インストールスクリプト
環境構築のスクリプトを作成しました。
[GitHub](https://github.com/HoriThe3rd/setup_python_dl)にスクリプトをアップしています。issueなど歓迎です。

このスクリプトは、引数に（pyenv-virtualenvで作成する）python環境の名前をとりますので以下のように実行します。

```shell
./setup_env.sh env_name
```

env_nameをつけないとエラーで終了します。
また、aptでいくつか必要なパッケージをインストールするので途中でrootパスワードを求められます。
実行したら終わるまでしばらく待ちましょう。

pipで以下のパッケージもインストールされます。
全ての動作を確認していないので、もしかしたらうまく動かないことがあるかもしれません・・・

- numpy
- six
- matplotlib
- pandas
- opencv-python
- opencv-contrib-python
- Pillow
- jupyter
- 上記に依存するパッケージ（pipで自動的にインストールされる)

完了すると、pyenv-virtualenvで新しいpython環境が作成され、それが適用されます（pyenv global env_nameが行われます）。
なお、pyenvを利用するため、~/.bashrcに設定が追加されます。

# VSCodeでJupyterを使う
pipでJupyterをインストールすると、VSCodeからJupyterNotebookを開いて結果を見ながらコードをかけます。

## WSLへの接続＋Python拡張機能インストール
まずは、Remote DevelopmentでWSLに接続します。
VSCodeの左下の”><“←こんなマークのボタンを押してWSLに接続します。
Remote Developmentについては手前味噌で恐縮ですが、別の記事[^3]にまとめていますのでそちらを参照いただければ幸いです。

[^3]: [VSCodeのRemote Developmentを使ってみる](https://qiita.com/HoriThe3rd/items/b2f6c440f096106cf89e)

続いて拡張機能Pythonをインストールします。

![python_ext.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357417/92bbc960-236e-b425-3e2f-7e5b7436149b.png)

これでVSCodeでJupyter Notebookを開くことができます。また、Pyenvによるバージョン変更も可能です。簡単な使い方を以下に説明します。

## 新規Notebookを作成
VSCodeでcmd+shift+pでコマンドパレットを開き、”jupyter”と入れるといくつかコマンドが出てくるので、”Python: Create New Blank Jupyter Notebook”を選択します。

![create_new_note.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357417/41a622e7-bda7-5b8d-5a3e-6a068657a89c.png)


すると新規Notebookが作成されます。画像はHello worldを書いています。

![jupyter_run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357417/b9595c7d-d8c7-48f7-b4f2-7ef5db4aa0ca.png)

## Pyenvで環境を切り替える
VSCodeの左下あたりに現時点のPythonのバージョンが表示されるので、これをクリックするとバージョンを変更できます。

![pyenv_button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357417/37598e6e-6fb4-8878-bf7d-dc83b11d5a7f.png)

一覧から使いたいPythonの環境を選択できます。Jupyter Notebookを使うときはpipでjupyterをインストールした環境を選びます。

![choose_python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357417/8a38ecc5-40ba-3706-346f-1841b4397b98.png)


# おわりに
一通りPyenv+Jupyter+VSCodeでPython環境を立ち上げる方法をまとめてみました。
深層学習などのプログラミングをする場合は、Pytorch[^4]など自分の使いたいものをインストールしていけばOKです。

[^4]: [Pytorch, GET STARTED](https://pytorch.org/get-started/locally/)
Laravel5.5〜認証&CSRFディレクティブでコード短縮

##はじめに
今回はLaravel5.5〜で導入された認証&CSRFディレクティブを使うことによって
コードを短縮できるといった内容について書きます。(一部 5.6〜)

この記事ではModel,View,Controllerの処理については一切触れません。
既に会員登録機能（ログイン/ログアウト）は実装済みということを想定しています。

参考: https://readouble.com/laravel/5.6/ja/csrf.html
　　: https://readouble.com/laravel/5.6/ja/blade.html

###目次

1. `@auth`〜`@endauth`
2. `@guest`〜`@endguest`
3. `@csrf`

##1.`@auth`〜`@endauth`
以前のバージョンの記述方法と今回紹介するディレクティブをそれぞれ比較していきます。

``` blade.php
#~5.4
@if(Auth::check())   #ログイン状態であるかをを判定
 {{-- ログイン状態の時表示したい内容をここに書く --}}
@endif
```
```blade.php
#5.5~
@auth
 {{-- ログイン状態の時表示したい内容をここに書く --}}
@endauth
```

ご覧の通り、`@auth`/`@endauth`を記述するだけで`Authファサード`を書く必要がなくなります。

##2.`@guest`〜`@endguest`
同じようにどんどん書いていきます。

``` blade.php
#~5.4
@unless(Auth::check())   
 {{-- 非ログイン状態の時表示したい内容をここに書く --}}
@endunless
```
```blade.php
#5.5~
@guest
 {{-- 非ログイン状態の時表示したい内容をここに書く --}}
@endguest
```

##3.`@csrf`
`@csrf`は上で紹介したものと違い、`バージョン5.6〜`導入されたので注意してください。

```blade.php
#~5.5
{{ csrf_field() }}

#5.6~
@csrf

#上記はどちらも
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
を生成します

```

##さいごに
よく使うディレクティブ３つについてまとめました。他にも導入されたディレクティブがあるかもしれませんのでまた確認して見ようと思います。今回はこれで
pythonで無限にローディングするページを作る

# 完成形
延々とHTMLを出力し続けローディングが終わらないページを作成します。
![Peek 2020-02-09 12-06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485117/b26546a5-de27-a810-9da0-77922be9fb05.gif)

# なぜこんなものを作ったか？
同様なページをスクレイピングしたかったので、そのテスト用に。
スクレイピング方法は[この記事](https://qiita.com/bunnyhopper_isolated/items/f949b2bb3b57d6a7c6f1)に書きました。

# 無限スクロールとは違うの？
無限スクロールページの実装はjavascriptで行うことが多く、ソースは有限(終わりがある)であるため、curlやrequests.getでソースを取得できます。対して今回紹介する構成はソースのローディングが終わらないため、いつものcurlやrequests.getではタイムアウトとなってしまいます。

# 環境
* python3.7.4

# コード
```python:inf_page.py
import sys
import http.server
from http.server import SimpleHTTPRequestHandler
from http.server import BaseHTTPRequestHandler
from time import sleep 


class infiniteHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-type', 'text/html')
        self.send_header('Transfer-Encodeing', 'chunked')
        self.end_headers()
        inc = 0
        while(True):
            try:
                self.wfile.write(f"<p>Hello World ! {inc}</p>".encode("ascii"))
                self.wfile.flush()
                print("wrote")
                sleep(2)
                inc += 1
            except:
                break
        return


server_address = ('127.0.0.1', 8000)

infiniteHandler.protocol_version = "HTTP/1.1"
httpd = http.server.HTTPServer(server_address, infiniteHandler)

sa = httpd.socket.getsockname()
print("Serving HTTP on", sa[0], "port", sa[1], "...")
httpd.serve_forever()

```

# 動作を見る
手元のブラウザで[http://localhost:8000](http://localhost:8000)を閲覧してください。

以上。
スクレイピング方法は[この記事](https://qiita.com/bunnyhopper_isolated/items/f949b2bb3b57d6a7c6f1)に書きました。
npmモジュールをインポートしてRollupでビルドしたときに○○ is not definedが出たときの対処

[svelte](https://svelte.dev/)を使ってちょっとしたWebアプリを作っているときにハマったのでメモ。

# 環境

- macOS Catalina
- Node v12.15.0
- npm v6.13.4
- rollup.js v1.20.0
- Svelte v3.0.0

# 事象

svelteではクイックスタート用のテンプレートが用意されており、その中でモジュールバンドラとして[Rollup](https://rollupjs.org/)を利用しています（[参考](https://github.com/sveltejs/template)）。
このテンプレートを元に開発を進めていたところ、特定のnpmモジュールをインポートして動かした際に下記のエラーに遭遇しました。

```
Uncaught ReferenceError: stream is not defined
```

`stream`というモジュールは自分が書いたプログラムの中では使っていません。

# 問題点

インポートしたnpmモジュールが内部でNodeのビルトインモジュールを利用しており、ブラウザ環境ではそんなモジュールないよ!となってエラーとなっていたようです。

# 解決方法

下記のRollupプラグインモジュールを導入する。

- [rollup-plugin-node-builtins](https://github.com/calvinmetcalf/rollup-plugin-node-builtins)
- [rollup-plugin-node-globals](https://github.com/calvinmetcalf/rollup-plugin-node-globals)

インストール

```sh
npm install --save-dev rollup-plugin-node-builtins rollup-plugin-node-globals
```

`rollup.config.js`の設定

```javascript:rollup.config.js
...
+ import builtins from 'rollup-plugin-node-builtins';
+ import globals from 'rollup-plugin-node-globals';

export default {
	...
	plugins: [
    ...
		resolve({
			browser: true,
			dedupe: ['svelte'],
		}),
		commonjs(),

+		globals(),
+		builtins(),
    ...
	],
  ...
}
```

# まとめ

プラグインを利用することで、Nodeのビルトインモジュール依存の処理をRollupでビルドすることができます。
【pardot】1対1メールの使用方法

メールマーケティングツール**pardot**の機能
1対1メールの使用方法です。

# 使用方法
<img width="870" alt="プロスペクト_-_Pardot.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/1f41625b-8a9e-477f-ad7f-9c39983f7dd4.jpeg">
https://pi.pardot.com/prospect
プロスペクトリストから送信したいプロスペクトを選択します。

---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/a5e663a4-bc32-c75d-dd65-6e133a1a4247.png)
プロスペクトのメールアドレスをクリックします。

---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/f72a057c-285b-9718-04c0-47711c1a38ab.png)
メールの作成を行います。

---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/6bebc1a5-95c2-48e7-5e82-54743f81ac84.png)
メールの作成が完了したら、プレビューで確認後、送信します。
これでOKです！

## 参考
Pardot から 1 対 1 のメールを送信
https://help.salesforce.com/articleView?id=pardot_send_one_to_one.htm&type=5&sfdcIFrameOrigin=null
Vueはどこへ消えた？

この物語は、[Vue CLI](https://cli.vuejs.org/)に興味を持ち、[Yarn](https://classic.yarnpkg.com/ja/)を使ってインストールしてみたものの、パスを見失ってしまった哀れな開発者の奮闘の記録です。

## 第1話 WindowsにYarnでVue CLIをインストールする

### 事件編

まずはWindowsに[Node.js](https://nodejs.org/ja/)とYarnをインストールします。使うのは、Windows用のパッケージマネージャ[Chocolatey](https://chocolatey.org/)。

```
choco install nodejs
choco install yarn
```

で、[Vue CLI](https://cli.vuejs.org/guide/installation.html)の記述の通り、YarnでVue CLIをインストール。

```
yarn global add @vue/cli
```

ちゃんとインストールできたかか確認すると……

```
vue --version
```

……こんな無慈悲なメッセージが。

> 'vue' は、内部コマンドまたは外部コマンド、
> 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

Vueはどこへ消えた？

### 解決編

Yarnでグローバルインストールしたパッケージは、`C:\Users\me\AppData\Local\Yarn\bin` に隠れています。
なので、このパス（`%AppData%\Local\Yarn\bin`でも可）を手動で環境変数に追加すれば、パスが通ります。
めでたしめでたし。

## 第2話 ChromebookにYarnでVue CLIをインストールする

### 事件編

次は、Chromebook（上のLinux）にもVue CLIをインストールしてみます。
[Node.js 公式のバイナリディストリビューション](https://github.com/nodesource/distributions/blob/master/README.md)を参考にNode.jsと、

```
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs
```

[Yarn公式サイト](https://classic.yarnpkg.com/ja/docs/install)を参考にYarnをインストールします。

```
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
```

で、さっきと同じようにYarnでVue CLIをインストールし、確認すると……
……こんな無慈悲なメッセージが。

> -bash: vue: command not found

Vueはどこへ消えた？

### 解決編

Yarnでグローバルインストールしたパッケージは、「Linux ファイル」からアクセスできるホームフォルダ内の`.yarn/bin`に存在します。
同じディレクトリにある.profileファイルをテキストエディタとかで開き、

```
if [ -d "$HOME/.yarn/bin" ] ; then
    PATH="$HOME/.yarn/bin:$PATH"
fi
```

と末尾に追記して、ターミナルを再起動すると、無事パスが通ります。
めでたしめでたし。

----
ちなみに、[Angular CLI](https://cli.angular.io/)の`ng`コマンドなんかも同じ要領で解決できますよ。
それでもアウトプットにYESという。～マサカリを抱きしめて～

## まとめ

* アウトプットすることで、批判されることもある。自分の無知を叩かれることもある
* それでも批判、マサカリは受け止められれば最良の教材である
* その瞬間受け止められないショックの大きいマサカリも、  
時間をかけることできっと受け止められる
* 一時的に目を背けてもいい。時間をかけて受け止めていこう
* そしてやっぱり、みんなもっとアウトプットしよう

## 覚悟が不十分だった過去投稿

2年前、「マサカリは実は勉強になるから恐れるな」という趣旨の記事を投稿しました。
[おまえらいいからアウトプットしようぜ。自分ではなかなか手に入らない知識が手に入るから](https://qiita.com/gakuri/items/554b1d13db13dcef79e4)

だけど今思うと、当時自分が受けたことのあるマサカリは、
所詮、自分が受け止められる程度のものでしかなく、
強いダメージがありうることを考慮した投稿になっていませんでした。

## 想定外の反響と多数のマサカリ

先日この記事を投稿したところ、思っていた以上の反響と、多数のマサカリをいただきました。
[メンバーに恨まれそうな3つのコードレビュー施策を徹底したら、逆にメンバーが爆速で成長した話](https://qiita.com/gakuri/items/f4970aea8de5fa9bf016)

以下、いただいた指摘

* 申し訳ないがレビューの道具がExcelなのを見た瞬間読む気が失せた; 関数単位: pull requestなら行粒度でコメント可; 4回: 規約違反はcoding style checkerで自動化; リジェクト基準: 書かれてる基準は必要条件でも十分条件でもない 疑義あり  
* ウワーッExcelーーーッ
* エクセルでコードレビュー！？！？！？？？？？？？
* オンプレにするならRedmineとかGitLabとかあるのに何故Excel。
* 「ループの闇が深い」←こんな表現で、何が問題でどう直すべきか共有できるの？　このコメントいらなくない？
* ループの闇が深いってコメントが闇深い。 具体的にどれくらい深いか、どれくらいが適切か、深いことのデメリットは何か、じゃあどうすればよいかまで書くべき。
* Excel... Dangerとか使いなさいよ。
* Githubも使えない、EclipseならCheckStyleがあるのにそれも使えない・・・そんな時、いつも安心のExcel。ああ、なんと不自由な本邦開発仕草よ、その開発者軽視による不自由さ、涙なしには語れない。
* そりゃエクセルでコードレビューしたら恨まれちゃう
* 組込み系特有の意見かもだけど、関数単位のコードレビューは当たり前じゃない？そもそも機能的なバグは基本・詳細設計レビューの範囲だし、レビュー基準が明確でないとお客様の監査NGで、開発プロセス改善じゃない？
* 炎上狙いのタイトルってことか、把握。内容は悪くないんじゃないかな。
* 循環的複雑度20以下とは…だいぶ優しいなぁ。
* スケールすると誰も管理できず形骸化するやつ

## 直後の心境

投稿当初は好意的なコメントも少なく、基本マサカリ一色に見えて、
以下のような気持ちでぐるぐるしてました。

* もしかして自分はとんでもなくレベルの低い投稿をしてしまったのではないだろうか（恐れ）
* ツールなんてどうだっていいだろう。本質をみろや（反発）
* 彼らのいうことも一理あると思おう（受容）
* というか、いいねめっちゃもらってるし、ノイジーマイノリティだし（正当化）
* 反応とか関係ねーし。見るのやめよ（逃避）
* （また恐れに戻る）

あげく、投稿を削除する、アカウントを削除をしようと考えたり
明らかに僕のマサカリ許容量を超えてました。

というわけで質問回答も、編集リクエストも放置していました。

## 転機

アクセスが殺到している中で、努めて反響を見ないようにして数日を過ごしていましたが、
今読んでいるある本で以下の記述が胸に刺さりました。

『弁解とは他者にするものだ。間違っても自分にするものではない。
　自分にすら嘘をつくともなれば、自分を偽るしかない無能も同然だ。』

2年前の投稿で表明した決意は、
「アウトプットし、マサカリをもらい、それすらも自分の成長の糧にする」でしたが、
今の自分は、言い訳をし、自分を偽り、決意に背を向け、
何のために記事を投稿したのかわからない状態ではないかと。

## マサカリを抱きしめる

このままではいけない。2年前の投稿の通り行動しよう、無理ならせめて記事を訂正しよう。
と思い、感情を排し、極力冷静に誠実に、指摘と向き合うことにしました。
それぞれの指摘から何か学べることはないだろうか？と

最初は比較的受け入れやすい指摘から徐々に。
冷静さを失いそうになったら、いったんほかのことをして、自分の感情をコントロールしながら。

そうしたらほとんどすべてのマサカリが直接的もしくは間接的な示唆があることに気づけました。

## 今回のマサカリで学んだこと、反省したこと

* ツール批判について
    * 自分は、「結果」さえ伴えば「方法」はどうだっていいと、方法に対して乱暴な考え方をしていたのかもしれない
        * 企画した側は結果だけを気にし、方法に無頓着だと、実施側は面白くないかもしれない
        * 「結果」さえ伴えば「方法」はどうだっていいなら、方法論批判はむしろ歓迎すべき
    * 過去の成果に胡坐をかき、時代に合わせた改善を怠っていた
        * もっと優先度の高い課題があるのだとしても、メンバーに権限委譲して  
        改善策を考えてもらうことはできたはず
* レビュー指摘批判について
    * ウケ狙いの指摘は、人によっては不快に感じるので避けるべき
    * ある程度関係が築けている相手に対し、口頭でいうならいざ知らず、  
    文字に残り不特定多数の目に触れてしまう場所では  
ウケ狙いや茶化したような内容は記載すべきではない
* CheckStyle、Dangerを使うべきという指摘について
    * ありがたくいただきました。
        * Dangerめっちゃ便利やん。知らんかった。教えてくれてありがとうございます！
    * 自動化は「言うは易く」の典型例だが、  
    少なくとも同じようなレビュー指摘をしている時間で、導入は可能だったはず

## 最後に

自分の許容量を超えた攻撃も、**時間がたてば必ず受け止められます**。
だから一時的に目を背けても、必ず後で戻ってきましょう。自分のために。

マサカリは痛いです。無痛ではありません。
それでも僕は痛いからこそ、いっそ抱きしめていこうとおもいます。
アウトプットは怖いです。それは率直に認めます。
それでも僕はアウトプットしていこうと思います。
それが自分の成長にとっては一番だと思うから。
STM32L476 > I2C > AQM0802 > 1kΩのプルアップで動作しない (MLX90632のプルアップと同居できない)

```txt:動作環境
Ubuntu 18.04 LTS
ボード: STM32L476 Nucleo_64 (以下、STM32L476)
Zephyr 2.1.0-rc1
放射温度計センサー: MLX90632 (CLICK-IRThermo)
キャラクタディスプレイ: AQM0802
ロジック確認: Analog Discovery 2 (AD2)
```

### 第一回

- [borgThermo > 放射温度計 > 第一回: STM32L476とMLX96032の通信(I2C)](https://qiita.com/7of9/items/58b1e1ceacbdb38c636e)

### 使用基板

- [STM32L476](https://docs.zephyrproject.org/latest/boards/arm/nucleo_l476rg/doc/index.html)
- [AQM0802 Ｉ２Ｃ接続小型キャラクタＬＣＤモジュール　８×２行](http://akizukidenshi.com/catalog/g/gP-06669/)
- [MLX90632](http://www.microtechnica-shop.jp/shopdetail/000000000108/disp_pc/)

### 状況

- MLX90632にてambient temperatureとobject temperatureの読取りを実装した
- それらの値をAQM0802で表示しようとするが表示されない

### プルアップ抵抗1k

MLX90632には1kΩのプルアップ抵抗が実装済である。同じI2CラインにAQM0802を接続する場合、この抵抗値でプルアップがされる。

AQM0802の表示がされない問題に関して調べたところ、以下が分かった。

- プルアップ抵抗なし: 表示される
- 1kΩプルアップ: 表示されない
- 4.7kΩプルアップ: 表示される

AD2にてロジックを見ても、命令に対してNAKになってしまっている。

## 1kΩの影響を回避する

### 案1. 並列に入れる

抵抗を並列に入れても 1/R = 1/R1 + 1/R2 の計算から1.1kΩを4.7kΩにすることはできない、という認識。

### 案2. リピーターハブを入れる

http://www.ti.com/lit/an/slva689/slva689.pdf
のp2にプルアップを二箇所で入れている例がある。
途中にあるのは「リピーターハブ」。

リピーターハブは下記のような製品はある。

- [Ｉ２Ｃバスリピーター　ＰＣＡ９５１５ＡＤ](http://akizukidenshi.com/catalog/g/gI-10882/)

質問をしておいた。

- [Different pullup resistors on the same I2C SCL and SDA before and after a I2C repeator hub](https://electronics.stackexchange.com/questions/480608/different-pullup-resistors-on-the-same-i2c-scl-and-sda-before-and-after-a-i2c-re)

### 案3. I2Cラインを分ける

STM32L476にはI2Cラインが複数ある。同居できないI2Cデバイスに対して、I2Cラインを分けて接続する。
安易なメソッド参照は気を付けるべし

#導入
こんにちは。けちょんです。
**皆さん、メソッド参照使っていますか？**
便利だし、可読性も上がりますよね。
そんなメソッド参照で。気を付けるべき仕様があったので紹介します。

#よくやる使い方

```Java
public class Main {
	public static void main(String[] args) throws Exception {
		Arrays.asList("test1", "test2").stream().forEach(System.out::println);
	}
}
// test1
// test2
```
staticメソッドをメソッド参照していますね。
他にもこんな使い方ができますね。

```java
public class Main {
	public static void main(String[] args) throws Exception {
		Arrays.asList("test1", "test2").stream().map(String::toUpperCase).forEach(System.out::println);
	}
}
// TEST1
// TEST2
```
StringクラスのtoUpperCaseを呼び出していますね。
見やすくて便利です。

#インスタンスメソッドの呼び出し方
また、上ではstaticメソッドを紹介していますが、インスタンスメソッドも使用できます。

```java
class Customer {
	public String getName() {
		return "which1";
	}
}

public class Main {
	public static void main(String[] args) throws Exception {
		Arrays.asList(new Customer(), new Customer()).stream().map(Customer::getName).forEach(System.out::println);
	}
}
// which1
// which1
```
同じ記法で書けるんですね。

#つまり

以下は同じ```Customer::getName```で書けることになります。

```java
map(e -> Customer.getName(e)) // staticメソッドを呼び出す場合
```

```java
map(e -> e.getName()) // 格納されたインスタンスのインスタンスメソッドを呼び出す場合
```

#ここで疑問
参照できるメソッドが両方あったらどうなるの？
同じ記法でstaticメソッドとインスタンスメソッドを呼び出せることは紹介しましたが、両方あった場合、どちらが使用されるのでしょうか。

```java
class Customer {
	public String getName() {
		return "which1";
	}

	static public String getName(Customer customer) {
		return "which2";
	}
}

public class Main {
	public static void main(String[] args) throws Exception {
		Arrays.asList(new Customer(), new Customer()).stream().map(Customer::getName).forEach(System.out::println);
	}
}
```
1. staticメソッド
2. インスタンスメソッド
3. コンパイルエラー
4. 実行時エラー

↓
↓
↓
↓
↓
正解は、3のコンパイルエラーです！
このようなエラー文が出ます。
```Ambiguous method reference: both getName() and getName(Customer) from the type Customer are eligible```

日本語訳：
```あいまいなメソッド参照：タイプCustomerのgetName（）とgetName（Customer）の両方が適格です```

どちらを参照すべきかわからないため、コンパイルエラーを出していますね。

#結局何を気を付けるべき？
今回は両方のメソッドが参照できるためコンパイルエラーを吐きました。
ただし、以下のように一目では分かりにくい、参照できないパターンがあります。
1. メソッドが可視性により参照できなかった場合
2. メソッド名が微妙に異なる場合
3. メソッドの引数が異なる場合
などなど
どちらのメソッドが参照されるのか、開発者の想定外の動きをする可能性があります。

#まとめ
開発者側で実装した型を用いたオブジェクトを扱う場合、メソッド参照は使用を控えた方が無難
tips: ansible blockに対するwhenは先頭にも置ける

#課題

tasksのブロックに対してwhen:を付与する際、良く以下の様に書かれる。

```yaml
---
- hosts: all
  tasks:
  - block:
    - debug:
        msg: msg1
    - debug:
        msg: msg2
    when: ansible_os_family == "RedHat"
```

この書き方では、一般的なプログラミング言語におけるif文と異なり、判断ロジックがブロックの最後となり、人が読み下す際に少し読みにくい。

#ソリューション

block:とwhen:はどちらも同レベルのhashのキーである為、when:を先に記載する事も可能。

```yaml
---
- hosts: all
  tasks:
  - when: ansible_os_family == "RedHat"
    block:
    - debug:
        msg: msg1
    - debug:
        msg: msg2
```

これで、if文と同様に、判断ロジックがブロックの先頭となり、人が読み易くできた。
SSL化とサイト引越しでハマったこと

今回得た知識を忘れないように、ここに記録します。

別の人が作ったウェブサイトをSSL化されたURLのサイトに引越しする作業を請け負う機会に、恵まれました。
私が知らなかったプラグインを知ることができたので、知識が広がりました。

#httpsでアクセスして、保護されてないと表示される
SSL証明書が設定されているのに、Chromeでアクセスすると、南京錠が表示されるところに！が表示されることがあります。

保護されていない通信が一部に残っていると、南京錠マークではなく！マークになります。
下記の記事を参考にして、原因を調べました。

[Chromeのアドレスバーに「保護されていない通信」と表示される原因とその対策](https://www.atmarkit.co.jp/ait/articles/1609/23/news023.html)

今回のWordPressで作られたサイトは、このテーマが使用されていました。
https://athemes.com/theme/airi/

このテーマは、このプラグインを標準で使うことができるため、スタイリッシュなトップページのウェブサイトを短時間で作ることが出来そうです。
生産性の向上に役立つプラグインだと思います。
https://elementor.com/

#ここから本題
保護されていない通信の元を探すために、Chromeを使い先に掲載した記事に書かれている手順で、探しました。
原因となる画像を二つ見つけました。
移転前のURLに、アクセスしていました。
でも、この画像のURLを表示されているページのソースで検索しても、見つけることができません。
CSSからの読み込みなのか、何かのファイルからの読み込みなのか、色々思いを巡らしながらWordPressの管理画面を調べていました。

#原因
elementorで表示される内容が、原因と分かりました。



#修正方法
elementorは、WordPressを引越ししたり、HTTPS化でURLを変更した際に、URLを設定する項目を見つけました。
ここに、新旧URLを設定しました。
![スクリーンショット 2020-02-09 11.22.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/eeec842d-7d04-e06a-90ed-08d6b1eace9d.png)

再表示したら、南京錠の表示になり正常にhttpsでアクセスできるようになりました。

elementorなどのプラグインで、トップページなどをカスタマイズしている人のお役に立ちましたら幸いです。
FlutterでText WidgetがiOSのDynamic Typeに影響されないようにしたい

# モチベーション
* Dynamic Typeの標準フォントサイズ変更で、レイアウトが崩れるアプリは結構多い（もう老眼なんで+2段階ぐらいしてる）
* Text WidgetがiOSのDynamic Typeによって拡大or縮小すると、レイアウトが崩れてしまうようなストリクトなデザインのときに困った。
* アクテシビリティ的な観点で、そのデザインの是非はさておき

# 賢い解決方法
* [Text.textScaleFactor](https://api.flutter.dev/flutter/widgets/Text/textScaleFactor.html)を使う

# 作用機序
* `textScaleFactor`は初期値が`null`になっている。
* [nullのとき、MediaQuery.textScaleFactorOf(context)が初期値になる](https://github.com/flutter/flutter/blob/52df599419f9a46486b8ffcfc441a6adb286776b/packages/flutter/lib/src/widgets/text.dart#L448)
* すなわちDynamic Typeに影響される。
* つまり、`Text(textScaleFactor: 1.0)`を明示的に指定すればDynamic Typeに影響されなくなる。
WebView開くと大量のエラーログが出たので調べた

#どんなエラーか

エラー内容は以下の通り
`[Process] kill() returned unexpected error 1`
これが10ミリ秒ごとくらいに発生するので他のログが埋れて非常に面倒。

#発生条件
ログが大量に出るだけでアプリ自体がクラッシュしたりはないので
気づくまで結構経ってたんですが、どうやら**WebViewを使用している画面**で発生する様子

WebviewのあるViewコントローラーへの遷移時、Webviewのスクロール時
あとWebView内（html）でダイアログを出してる間とかにも発生。

#調べてみる

Google先生にエラー内容を聞いてみると同様の現象が発生している人がいっぱいいた。
てっきり自分がなんか実装ミスったかな？とかWebコンテンツ側がバグってんのかな？
とかFireBaseの所為か？とか思ってたけど、どうやら**WebKitのバグ**の様子
~~雑に実装してたツケが回ってきたかと思ったけどそうじゃなくてよかった~~

[AppleDeveloperForms](https://forums.developer.apple.com/thread/123782)でも同様の質問がされてて、13.3でも修正は入っていないみたい。

>chintan100
>Dec 11, 2019 11:26 AM
>(in response to neal1)

>Still exists in 13.3!
>How much more time before the WebKit fix is integrated into iOS?!
>Super frustrating bug!

~~わかるよchitan100まさに**Super frustrating bug**だ~~

##いつ修正される?
WebKit Bugzillaで見ると、既に報告/修正済み
[👉　原因と修正内容](https://trac.webkit.org/changeset/250329/webkit)

ということはどのバージョンで修正が入ったものがリリースされるかだけども
WebKitのリリースノートを確認すると...
[WebKit Release Note](https://webkit.org/blog/9600/release-notes-for-safari-technology-preview-93/)

おや？
> This release covers WebKit revisions 249750-250329.

This release covers WebKit revisions 249750-**250329.** 🧐

🧐 🧐 🧐
**250329.**

なおっていないんだけど...
どういうことですか....
#まとめ

・バグの原因はWebkitにある
・すでに修正はコミット済み
・修正入りバージョンのリリースはされていない(リリースしてるってけどなおっていない？)

結論：修正バージョンリリース待ち！

修正バージョンリリースまではLogに何かしら分かりやすい目印でもつけて
Filterとかで対応するしかなさそうですね。

#追記
現在の最新版Xcode（11.4）にアップデートすることで
綺麗さっぱり出力されなくなっています。
まだ更新していない方はアプデすることで綺麗なコンソールに戻りますよ☺️