OmniAICreator/Qiita-1.07M huggingface dataset:
Mockeryで正規表現を使う

## 環境
- Laravel Framework 6.0.3
- Mockery 1.0
- Docker 19.03.4 (Laravelの実行環境)

## 背景
Laravelではファサードをモックしたテストを手軽に書く事ができます。[公式ドキュメント](https://readouble.com/laravel/5.8/ja/mocking.html#mocking-facades)にもある通り、モックされたファサードは`Mockery`インスタンスを返します。そのため、`Mockery::with`でファサードの引数を検証する事ができます。

## 課題
ファサードの引数にランダムな値が含まれる場合などに`with`で正規表現を使いたい場合、直感的に正規表現を書いても認識されません。

### 例
以下のようなファイルをアップロードするコマンドがあるとします。同名のファイルが存在する場合は、上書きしないように元の名前にユニークな値を追記したファイル名でアップロードします。

#### コマンド
```php
<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;

class FileUploadCommand extends Command
{
    protected $signature = 'uploadfile';

    public function handle()
    {
        $filename = 'uploadfile.txt';
        $content = 'これからアップロードされるファイルです';
        if (! Storage::disk('backups')->exists($filename)) {
           Storage::disk('backups')->put($filename, $content);
           Log::info('新規ファイルがアップロードされました。ファイル名：' . $filename);
        } else {
           $rename = sprintf('%s.%s', $filename, Str::uuid());
           Log::info('既に同名のファイルが存在したためリネームしました。ファイル名：' . $rename);
        }
    }
}
```

#### テスト
`with`に正規表現っぽい値を入れて、リネーム処理のテストを書いてみます。

```php
<?php

namespace Tests\Feature;

use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Mockery;
use Tests\TestCase;

class FileUploadCommandTest extends TestCase
{
    public function testリネーム処理()
    {
        Storage::disk('backups')->put(
            'uploadfile.txt',
            'これはアップロード済みファイルです'
        );
        Log::shouldReceive('info')->once()->with("/既に同名のファイルが存在したためリネームしました。ファイル名：/");

        $this->artisan('uploadfile');
    }
}
```

#### テスト実行
```
[root@1b8af3a695ec www]# vendor/bin/phpunit tests/Feature/FileUploadCommandTest.php
PHPUnit 8.3.5 by Sebastian Bergmann and contributors.

E                                                                   1 / 1 (100%)

Time: 1.11 seconds, Memory: 24.00 MB

There was 1 error:

1) Tests\Feature\FileUploadCommandTest::testリネーム処理()
Mockery\Exception\NoMatchingExpectationException: No matching handler found for Mockery_0_Illuminate_Log_LogManager::info('既に同名のファイルが存在したためリネームしました。ファイル名：uploadfile.txt.c91c2c81-f26a-4c02-8dda-5e9c260af597'). Either the method was unexpected or its arguments matched no expected argument list for this method
```
実行しても正規表現としては、見なされないようでテストは失敗します＾＾；

## 解決方法
[Mockery::pattern](https://readouble.com/mockery/1.0/ja/argument_validation.html)を使います。

### テストコードを修正
正規表現っぽく書いた場所を`Mockery::pattern`を使って書き直してみます。

```diff
- Log::shouldReceive('info')->once()->with("/既に同名のファイルが存在したためリネームしました。ファイル名：/");
+ Log::shouldReceive('info')->once()->with(Mockery::pattern("/既に同名のファイルが存在したためリネームしました。ファイル名：/"));
```
### テスト再実行
```
[root@1b8af3a695ec www]# vendor/bin/phpunit tests/Feature/FileUploadCommandTest.php
PHPUnit 8.3.5 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 1.76 seconds, Memory: 24.00 MB

OK (1 test, 2 assertions)
```

🎉
Amazon Linux WorkSpaces でデフォルトブラウザを Chrome に変更する

Amazon Linux WorkSpaces でデフォルトブラウザを Chrome に変更しようとしたのですが、システムの GUI ではそもそも Chrome が選択肢に出てこない…。以前はできていたような気がするけれど :confused:

解決策が見つからなかったので、対処療法として設定を直接書き換えることにしました。

次のように HTTP スキーマのハンドラを `~/.local/share/applications/mimeapps.list` に記述。

```:~/.local/share/applications/mimeapps.list
[Default Applications]
x-scheme-handler/http=google-chrome.desktop
x-scheme-handler/https=google-chrome.desktop
```

ログインしなおすと、デフォルトブラウザが Chrome になりました :relieved:
【機械学習】決定木を勉強してみる


# 決定木(Decision Tree)
決定木とは**教師あり学習**に使われるアルゴリズムです。与えられたデータを木のように枝分けしていくことで、予測やデータの要約を行います。回帰と分類両方に使用できる学習モデルです。

下の図は、データを「犬」「人」「鳥」「蚊」に分類するための決定木を表しています。
各枝では特徴量を利用してデータを分類してきます。最後の葉になる部分で、分類結果が決まります。

<img width="480" alt="Screenshot 2019-11-24 at 21.29.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407366/251076b9-a5a1-1264-8e5c-e935f5cb3a87.png">


ここで、各枝を伸ばす際に考えるポイントとして

1. **どの特徴量をどのくらい使うか**
2. **どこまで深く木を伸ばすか**

が重要となってきます。

まず１を判断する基準に**情報利得 (Information Gain)**という基準が利用されます。


## 情報利得 (Information Gain)
情報利得は簡単に言うと、**子ノードが親ノードと比べてどれくらい綺麗にデータを分類できたか**を示す値です。もしくは、**各ノードで標準偏差がどのくらい減るか**を表した値です。どれくらいこの情報利得を計算するのに、**不純度**と呼ばれる値が使われます。不純度にはいくつか種類がありますが、今回は最も代表的な**Gini**と**Entropy**を紹介します。
### Gini
Gini は次の式で表されます。

```math
G = 1 - \sum_{n = 1}^{classes}P(i|t)^2
```
各ノードで、データがあるクラスに分類される確率が高いほどGiniは0に近ずくことがわかります。仮にクラスが１つしかない場合、Giniは0となります。逆に、全てのサンプルが異なるクラスに属す時、Giniは1に近似します。
更に、各ノードでGiniから**Information Gain (IG)**を計算します。

```math
IG = G(parent) - \sum_{children}\frac{N_j}{N}G(child_j)
```
ここでは、親枝のGiniと子枝のGiniの加重平均(各クラスに含まれるデータの数の割合)の差を情報利得として取得します。

### Entropy
Entropyは次の式で表されます。

```math
E =  - \sum_{i = 1}^{N}P(i|t)*log(P(i|t))
```
ここで、P(i|t)が0.5に近いほど(1か0か分からない；分類できない)ほどエントロピーは高くなることがわかります。反対にP(i|t)が0か1の時、エントロピーは０となります。

```math
IG = E(parent) - \sum_{children}\frac{N_j}{N}E(child_j)
```
先程と同様、親枝の交差Entropyと子枝の交差Entropyの加重平均の差を情報利得として取得します。

この情報利得が大きい分割方法が各ノードで選択されます。


### Gini と Entropy の使い分け
Gigiは回帰問題に向いており、Entropyは分類問題に向いています。

## 木の深さ
決定木の**木の深さが深いほど、学習データにフィットしたモデル**が選択されます。実際、最後の子ノードのデータ数が１の時、全てのデータを完璧にクラス分けすることができます。しかし、これではサンプルデータに**過学習**してしまい、モデルの意味がなくなってしまいます。なので、学習モデルを作る際には、木の深さに制限をつける必要があります。skitlearnでは、木の深さはパラメターで設定されます。






# Scikit-learn 決定木

### 回帰
```python
from sklearn.tree import DecisionTreeRegressor  

clf = DecisionTreeRegressor(criterion="entropy", max_depth=3)
clf = clf.fit(X_train,y_train)
y_pred = clf.predict(X_test)
```

### 分類
```python
from sklearn.tree import DecisionTreeClassifier

clf = DecisionTreeClassifier(criterion="entropy", max_depth=3)
clf = clf.fit(X_train,y_train)
y_pred = clf.predict(X_test)
```

## 決定木のパラメター
|パラメタ-|概要| オプション | デフォルト|
|---|---|---|----|
|criterion|分割基準| "gini", "entropy"| "gini"|
|splitter| 分割選択の戦略|"best", "random"|"best"|
|max_depth|木の最深深さ|int|None|
|min_samples_split|分割後ノードの最小サンプルサイズ(小さいと過学習傾向になる)|int(サンプル数)/float(全サンプルに対する割合)|2|
|min_samples_leaf|葉(最終ノード)に必要な最小サンプルサイズ(小さいと過学習傾向になる)|int/float|2|
|max_features|分割する上で使う特徴量の数(大きいほど過学習の傾向)|int/float, auto, log2|None|
|class_weight|クラスの重み|"balanced", none|none|
|presort|データの事前の並べ替え(データサイズによって計算速度が変わる)|bool|False|
|min_impurity_decrease|不純度にリミットをかけノードの伸びを制御する|float|0.|

# 決定木の長所と短所
### 長所
- 容易に可視化と要約ができる。
- データが線形パターンでない場合にも利用できる。
- 正規化の前処理が不要。

### 短所
- 外れ値の影響を受けやすい。
- 小さい分散でも、結果が大きく変わってしまう。
- 計算が複雑性、時間計算量が多くなる。
朝会がうまくいかないのでSlackにdoingチャンネル(分報)を作ってみた + その後の話

# doingチャンネル(分報)を作った経緯
　開発チーム、特にアジャイル型の開発をしているチームでは朝会(デイリースクラム)を実施しているところが多いと思います。この朝会を実施する目的というのは「チームの透明性」と「チームの最適化」で

- メンバーの進捗の確認
- 情報共有
- 課題・障害へのチームでの対応

といったことを始業時15分くらいを使いチームで共有します。多くの場合、報告テンプレートがあり

- 「昨日実施したこと」
- 「今日実施すること」
- 「困っていること」

を各メンバーが報告するという形式で行われることが多いのではないでしょうか。これの実施は一見、簡単に見えます。しかし、実施してみると期待した効果が得られないと感じました。効果が得られない理由はいくつかあり

- 実施予定の見積もりが甘い 
- 「困っていること」が言語化しにくい・些細なことは漏れる
- 開発Task以外に割り込みTaskが多く予定通り進まない
- リモートやフレックスで集まりにくい

等いろいろあり、ファシリテータ・報告者にスキルが要求され結果的に、朝会が形骸化してしまうこともあると思います。朝会が形骸化していく対策としては当然、朝会自体に手を入れるのが正攻法で、上記のような課題に対する対応策の情報も多く出ています。
　しかし、達成したいことは「チームの透明性」と「チームの最適化」であり、朝会はこれらを実現するために可視化を行うものだと考えます。ならば、朝会の形式にこだわる必要もなく、特に「チームの最適化」に焦点を当て、今回は開発チームのSlackにdoingチャンネル(分報)を導入してみることにしました。その他にもこれを導入することで期待することもあったのですが、これは後述します。


# doingチャンネル(分報)
　私のチームではdoingチャンネルと読んでいますが一般的には分報と呼ばれるものです。これは日報が一日の最後にまとめて作業内容等を報告するのに対し、分報は自分が新しい作業をするタイミングで報告を行うイメージ的にはチームのtwitterのようなものです(※ 当然ですが1分ごとに投稿するわけではありません)。このチャンネルに期待することは朝会の場合と同じで

- メンバーの進捗の確認
- 情報共有
- 課題・障害にチームで対応

といったもので、特にリアルタイムでメンバーの状態が可視化されていくというのは朝会やチケット管理ではなかなか獲られない効果ではないでしょうか。

分報をについて調べると大きく分けて二つのタイプがありそれぞれメリット・デメリットがあるかと思います。

- __タイプ1: 個人ごとに分報チャンネルがある__
    - メリット
        - 自分の作業履歴を追いやすい
    - デメリット
        - 他人のチャンネルに目を通さなくなる
        - 議論等が一部の人(チャンネルを見た人)のみで行われる
- __タイプ2: チームで一つの分報チャンネルがある__
    - メリット
        - 誰かの困りごとや気づきに全員が目を通す
    - デメリット
        - 投稿の流れるスピードが速くなる
        - 特定のメンバーの状態を見ることができない


　可視化という視点では前者の「個人ごとに分報チャンネルがある」場合、最適化という視点では後者の「チームで一つの分報チャンネルがある」場合が適しているのではないかと思います。私のチームでは後者の「チームで一つの分報チャンネルがある」タイプのものを採用しています。


# チームの最適化以外の期待
　私の組織では少し前まではコミュニケーションはメールが主体でチャットツールを導入してもあまり有効に活用されていない状態でした。そのため、「doingチャンネルは誰の返信を求めないことを投稿していいチャンネル」というルールにして、あえて治安の悪いemojiを追加したりすることで、チャットツールでのコミュニケーションを活性化させるような期待もありました。結果としてはよくなったと思いますが、分報を行っている事例を調べると最終的にただの雑談チャンネルになってしまったような話も聞くので注意すべきです。


# doingチャンネル(分報)を導入してみて
　導入によりある程度チャットツールによるコミュニケーションも促進され、リモートで働くメンバーの動きがわかりやすくなった等の効果もあり、「チームの最適化」という目的は一定量達成されたかと思います。特に新規のメンバーが加入したタイミングでは有効に機能したと思います。しかしながら分報への投稿を忘れてしまったり、上記で上げた「チームで一つの分報チャンネルがある」場合では特定のメンバーの状態を見ることができないような課題は残っていると思います。ある程度はBot(しばらく投稿がない人に投稿を促すような)を作成することで解決できるような気がしますが、そもそもこの分報という仕組み自体がコストにならないように気を付ける必要があるのかと考えています。

# その後の話
　分報も継続しているのですが、しばらくしてから朝会(デイリースクラム)も再開しました。これはメンバーによっては朝会のような決まったタイミングの方が相談等がしやすいといったパターンもあったためです。また、以前は出社・リモートが混ざっていて環境の差の問題や、出社側で朝会をする場所が確保しづらいといった問題が、フルリモートに移行したことで解消したことも理由だったりします。
counsel-rgで検索時にオプションを渡す

tipsです。毎回忘れちゃうので。
emacsのcounselでcounsel-[rg|ag|pt]などを利用する時に、検索時にオプションを渡す方法。
下記の話は全てinteractiveで使う関数の話です

``` emacs-lisp
M-x counsel-rg 
[渡したいoption] -- [検索したいワード]
```

### 例: 検索対象ファイルの拡張子(html)を絞り込みたい時
```:sample
--glob'*.html' -- class='foobar'
```

## 注意点
- 検索するパスを渡すことはできない
- `-i`(ignore-case)や`-s`(--case-sensitive)オプションは自動的に付与される
- `--files`オプションを渡すことはできるが、その後`--glob`オプションによる絞り込みはできない

## (追記)打つのがめんどくさいのでこういうelispを登録すると捗ることに気が付いたので掲載

```emacs-lisp
  (defun my/counsel-rg-with-extention (extention)
    "Execute counsel-rg with on cursor files EXTENTION."
    (let ((match-extention extention))
      (string-match "^[A-Za-z0-9_]+\.\\([A-Za-z0-9_\.]+\\):" match-extention)
      (counsel-rg (concat "-g'*." (match-string 1 match-extention) "' -- "))))

  (ivy-set-actions
   'counsel-rg
   '(("e" my/counsel-rg-with-extention "with-extention")))
```

## 参照
ここら辺
https://github.com/abo-abo/swiper/blob/master/counsel.el#L2811
Vueで背景をページ毎に動的に変えたい

#やる事
「画像を投稿して、投稿した画像にコメントを付けたい」
「コメントページは別ページ」
「別ページの背景を投稿画像にしたい。」
できるだけ頭を使わずにVue.js/Nuxt.jsでやっていきましょう。

#方法
##ページ内の要素をdivで包む

```HTML

<template>
  <div>
    <!-- ここに中身。カニ味噌とか -->
  </div>
</template>
```

##div要素のスタイルをバインド
バインド自体はsrcなどの属性に対して行うのとまったく同じ。

```HTML

<template>
  <div v-bind:style="pageStyle">
    <!-- ここに中身。ウニとか -->
  </div>
</template>
```

##スクリプトで背景要素を設定する。
連想配列にスタイルを書いていく。CSSのプロパティは通常**ケバブケース**だが、ここでは**キャメルケース**で書くこと。
あと"url('ebikaniuni')"の中にURLを入れる部分に注意。落ち着いて書きましょう。
ちなみにTemplate部に直で書いてもOKだったりする。とても読みにくくなるけど...。

```html

<script>
export default {
  data() {
    return {
      pageStyle: {
        // 背景変更用スタイル
        backgroundImage: "", // 背景読み込み前なので空白
        backgroundRepeat: "no-repeat",
        backgroundAttachment: "fixed",
        backgroundPosition: "center center",
      }
    };
　},
  created() {
    this.pageStyle.backgroundImage = "url('" + gazouNoUrl + "')"; 
    // クォートをいい感じにエスケープする必要がある点に注意。
  },
}

</script>
```

もっといい方法があったら教えてクレメンス

#参考資料

[思考の葉:v-bindでstyle、classの属性値を変える[Vue.js]](https://noumenon-th.net/programming/2019/05/21/v-bind/)
Mermaid.js コードでガントチャートを書く 簡易編

## 〜宣伝〜

:::note info
個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846
:::
https://dokupro.dev/

# 目的

- コードで作図することができるmermaid.jsでガントチャートを記載する方法をまとめる。
※開発段階で不具合や仕様、文法が変更になる可能性がある。

# mermaid.jsって？

- コードで作図できるJavaScriptの図形作成ライブラリである。
- フローチャート、シーケンス図、クラス図、ステート図、ガントチャート、円グラフ、Gitのブランチ図などをコードベースで作成することができる。
- mermaid.jsが苦手なことは図形の細かい配置修正など。
- こちらの記事で詳しく解説している。
    - [コード で フローチャート シーケンス図 ガントチャート等 を 描く① ～mermaidの紹介～](https://qiita.com/miriwo/items/babd1fc51adfa6bc60ad)
    - [Mermaid 紹介 記事 まとめ](https://qiita.com/miriwo/items/4a9ba5cc14587d71d72f)

# この記事のターゲット

- mermaid.jsを使用してガントチャートを描いてみたい方
- mermaid.jsが気になっているが書き方次第で導入を迷っている方
※mermaid.jsの記載方法の基本を知りたい方は[こちら](https://qiita.com/miriwo/items/7e26f0d85829bb15e69c)

# サンプルコード

- 本記事の説明で使用するサンプルコードを記載する。
- サンプルコードのプレビューをコードの下に記載する。

```mermaid
gantt
    title work
    dateFormat YYYY-MM-DD

    section work_A
    準備    :a1 ,2019-12-12 ,1h
    作業    :a2 ,after a1 ,3h
    リリース :a3 ,after a2 ,2h

    section work_B
    準備    :b1 ,after a2 ,3h
    作業_1  :b2 ,after b1 ,4h
    作業_2  :b3 ,after b1 ,3h
    リリース :b4 ,after b2 ,1h

    section work_C
    準備    :c1 ,after b4 ,1h
    作業    :c2 ,after c1 ,2h
    レビュー :c3 ,after c2 ,1h
    リリース :c4 ,after c3 ,1h
```

↓
プレビュー
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c0026c5a-a10a-a5b8-902c-7be241897c51.png)


# 書き方の例

- 前述したサンプルコードの一部を記載内容を日本語にして記載してみる。

```mermaid

図形名
    title 図形のタイトル
    dateFormat 入力データのフォーマと設定

    section セクションの名前
    図形上に表示する作業の名前    :コード内で作業を識別するための名前 ,開始タイミング ,作業実施時間

```

- 前述した日本語の記載をコメントにしてサンプルコードの一部と重ねてみる。  
※mermaid.jsコメントアウトの方法が調べた限り見つからなかったため、ここでは`#`の後ろはコメント扱いとする。

```mermaid
#グラフ名
gantt

          #ガントチャートの題名
    title work
               #日時のデータフォーマット
    dateFormat YYYY-MM-DD

            #セクション名
    section work_A

    #アイテム名   #アイテム識別名 #開始タイミング  #実施時間
    準備        :a1          ,2019-12-12    ,1h
    作業        :a2          ,after a1      ,3h
    リリース     :a3          ,after a2      ,2h

```

- 前述のコメントが入ったコードのコメントがないものとプレビューを記載する。

```mermaid

gantt
    title work
    dateFormat YYYY-MM-DD

    section work_A
    準備        :a1          ,2019-12-12    ,1h
    作業        :a2          ,after a1      ,3h
    リリース     :a3          ,after a2      ,2h
```

↓
プレビュー
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/219ed523-a353-2d36-fd22-07a4921e877c.png)


# セクション内の作業アイテムの記載方法の詳細

- 下記にサンプルコードのsection work_Aの「準備」の設定を記載する。

```
準備        :a1          ,2019-12-12    ,1h
```

1. 「準備」は作業アイテムの図形上に表示する作業の名前である。
1. 「a1」は作業アイテムをコード上で識別するためのものである。
1. 「2019-12-12」は作業アイテム「準備」の開始日時である。
1. 「1h」は作業アイテム「準備」の実施時間である。(1hだと1時間、1dとすると1日となる)

- 下記にサンプルコードのsection work_Aの「作業」の設定を記載する。

```
作業        :a2          ,after a1      ,3h
```

1. 「作業」は作業アイテムの図形上に表示する作業の名前である。
1. 「a2」は作業アイテムをコード上で識別するためのものである。
1. 「after a1」は作業アイテム「作業」の開始日時であり、after a1は作業アイテム「a1」の直後に開始ということになる。
1. 「3h」は作業アイテム「作業」の実施時間である。(1hだと1時間、1dとすると1日となる)
最近噂のDart言語でjsアプリ作ってみた

最近噂の３倍生産性が良いFlutterにつられて色々調べていたら、dart言語なるものがあり、JSアプリ作ろうかなーって思っていたので、使ってみた。
https://dart.dev

facebookインスタントゲームとして、公開済み。
https://fb.gg/play/solitaireproworld

javaで開発したandroidアプリを移植した。
https://play.google.com/store/apps/details?id=jp.co.projapan.solitaire

ゲームアプリなので、StageXLフレームワークを使用。これはFlash風APIになってる。
http://www.stagexl.org

###良かった点
- ビルドが速い。5秒程度でリロードされる。慣れるとサクサク開発できて、超気持ちいい。
- Javaに似てるので、javaから移植しやすい。javaプログラマーは入りやすい。
- javaと比べると、文句なしでDartがいい。全然違う。Objective-Cはクソ
- 新しめの言語なので、変な制約が少ない。C++とかクソ
- IDEはVSCode使ったが、軽くて良い。最近のXCodeはクソ。androidStudioでも開発可能。
- 慣れるとサクサク開発できて、超気持ちいい。
- Dart関係ないけどVSCodeでのソース自動整形はいい。生産性が上がる。（今まで興味なかった）
- webGLも使える。StageXLはでふぉでON。まあ古めのデバイスのためにOFFったけど。新しめのデバイスならONの方が性能上がりそう。
- JSは結構デカくなるけど、gzip圧縮できるので、問題無し。このアプリは748KB->212KBだった。
- ChromeのみでDartソースレベルDEBUGができる！さすが純正。
- android/iOSの実機とエミュレータ/シミュレータでもlocalhost環境で動作確認が可能。webdevに引数 --hostname=IPアドレス をつける
。 

###悪かった点
- VSCodeだと日本語コメントが文字化けしやがる。（最新版では修正済みらしい）
- 日本語情報が少ない。特にStageXL情報がない。全くない。
- 画面をコードで構築するので、めんどい。まあこれはこれでいい。変なツールを覚える必要がない。
- たまにソース辿れない例外が出て、修正に苦労する。
- numにdoubleが入っててintに代入すると、整数じゃないので例外が出てしまう。
- VSCodeからDEBUG起動とかもできるが、そのうち劇重になるので、使わなかった。Chromeのみでデバッグ可能なので、そっちを使う。現在は改善されてるかも。
- 言語別リソースの機能とかは無い。仕方ないので、自分で構築した。まあ言語ごとにjsonに追い出したりするだけ。
- if (xx)でxxがnullだと例外吐きやがる。クソが。
- ビルド待ち時間が少ないので、疲れる:sob:超疲れる。news読む暇なくなる。

##最後に
概ねサクサク作れました。:v:
生産性、いいわあ。:relaxed:ビルド速いのは正義だねえ。

StageXL使ってる日本人、私だけかもー。貴重な老人プログラマーになれたかも。

そのうちFlutterもやろう。
AngularDartはすでに使ってみた。
##その後
webサイトも立ち上げた。ソリティアプレイ部分がDart。
ソリティア.global
https://solitaire.global/
Laravel/uiを用いた場合のapp.scssの使い方

#Laravel中のsassとコンパイル
laravel/uiでvue.jsを導入するとresources以下にsassというフォルダが追加されます。
sassフォルダ以下にはapp.scssと_variables.scssがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535544/f4e8a321-bdfc-0437-4946-46046bc5cddb.png)


Laravelのasset関数で読み込まれるcssファイルのurlはpublic/css/app.cssなのですが、
そこで書かれているcssはこのsassがコンパイルされた内容になります。
もしpublic/css/app.cssを直接変更していた場合はコンパイルの際に内容ごと上書きされてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535544/cda332d2-57f0-d3b8-5191-32a5d59f6035.png)


コンパイルはwebpack（npm run dev等で動作しているソフト）で行われます。
webpackは他にもrequireしたファイルやapp.js等もpublic以下のフォルダに展開してくれます。

#コンパイルの設定を行うLaravel Mix
Laravelでは、webpackでコンパイルするファイルやコンパイル先の設定を、Laravel Mixで行います。
LaravelMixの設定をするwebpack.mix.jsではscssが指定されています。

Laravel Mixの詳細な設定は、作成したプロジェクトのルートフォルダ直下にある、laravel.mix.jsというファイルを通して行います。

```js:laravel.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

//"php artisan ui react" を実行するとreactとsassの設定をし、reactとsassのコンパイル設定を行う。
//"php artisan ui vue"ならば、mix.reactの部分がmix.vueになる。 
mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
```

LaravelMixを用いて、様々な形式のファイルをwebpackでコンパイルできます。
詳細な設定はドキュメントを参照してください。
https://readouble.com/laravel/5.5/ja/mix.html

#app.scssの構造
app.scssのファイル中では
bootstrapやfont、変数のファイルを読み込んでいます。

```scss:app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
```
もしコンパイルされたcssをasset等で読み込んでいた場合、
scssではコメントアウトができるので、
bootstrapを読み込んでいる部分（３つ目のimport)をコメントアウトしコンパイルすれば
bootstrapの設定が無効にすることができます。


上から２番目のimport variablesでは
変数を読み込んでいます。
_variables.scssでは予め、
色や文字の設定用の変数を規定してくれています。

```scss:_variables.scss
// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
```

使用例：

```scss:app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';

.write-points {
    background-color: $red;
}
```
トラブルシューティング of AVD @ Ubuntu18.04

#

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/aef4ed32-1616-3560-59e1-72d1af8eee18.png)

PCのBIOSで「Virtualization Technology」 をEnableに変更する

# 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b1bb317c-1697-7e65-4d0f-b2b7ee5094b0.png)

```

sudo apt install qemu-kvm
sudo adduser $USER kvm


```
としてリブート



# 起動に時間がかかる

コマンドラインで一旦起動したら次回以降OKとなりました。

https://developer.android.com/studio/run/emulator-commandline


# コマンドラインで起動

```

~/Android/Sdk/emulator$ ./emulator -avd Nexus_5X_API_28

```
Rails6 のちょい足しな新機能を試す107（Digest::UUID編）

# はじめに

Rails 6 に追加された新機能を試す第107段。 今回は、 `Digest::UUID` 編です。
Rails 6 では、 `Digest::UUID` が require なしで使えるようになりました。

Ruby 2.6.5, Rails 6.0.0, Rails 5.2.3 で確認しました。

```shell
$ rails --version
Rails 6.0.0
```

今回は、簡単なスクリプトを作って確認します。

# Rails プロジェクトを作成する

```shell
$ rails new rails_sandbox
$ cd rails_sandbox
```


# スクリプトを作成する

`Digest::UUID` を使ったスクリプトを作成します。

```ruby:scripts/uuid.rb
puts Digest::UUID.uuid_v3(Digest::UUID::DNS_NAMESPACE, 'rubyonrails.org')
puts Digest::UUID.uuid_v4
puts Digest::UUID.uuid_v5(Digest::UUID::DNS_NAMESPACE, 'rubyonrails.org')
```

# スクリプトを実行する

`rails runner` でスクリプトを実行します。

```shell
$ bin/rails runner scripts/uuid.rb
Running via Spring preloader in process 54
a063dfac-9c20-314f-8597-169d162b1e83
bd997739-d65c-4f56-ac56-81fc08775a79
4d446767-11df-526a-a2da-93799c90dee7
```

# Rails 5 では

Rails 5.2.3 では、 `LoadError` になります。

```shell
$ bin/rails runner scripts/uuid.rb
 ...
 1: from scripts/uuid.rb:1:in `<main>'
 /usr/local/lib/ruby/2.6.0/digest.rb:16:in `const_missing': library not found for class Digest::UUID -- digest/uuid (LoadError)`
```

明示的に `require` すれば、 `LoadError` は解消されます。

```ruby:scripts/uuid.rb
require 'active_support/core_ext/digest/uuid'
puts Digest::UUID.uuid_v3(Digest::UUID::DNS_NAMESPACE, 'rubyonrails.org')
puts Digest::UUID.uuid_v4
puts Digest::UUID.uuid_v5(Digest::UUID::DNS_NAMESPACE, 'rubyonrails.org')
```

# 試したソース

試したソースは以下にあります。
https://github.com/suketa/rails_sandbox/tree/try106_digest_uuid

# 参考情報

* [Add missing file to require digest/uuid on active_support core ext](https://github.com/rails/rails/pull/36470)
【初心者】jQuery　hoverイベント／アコーディオン【備忘録１９】

##11/23～11/24に勉強したこと

###hover(アイコン下に文章を出す)
#####１：指定するクラスにクラス名・hoverイベント設定

演習のページに、アイコンを設置(今回はレッスンアイコン)。
そのアイコンにhoverイベントを設定し、カーソルを持っていくと
下に文章が出てくるようにする。
【HTML】

```html

<div class="lesson lesson-hover">...</div>
```

【jQuery(JS)】

```js

$('lesson-hover').hover(
  function(){
   //マウスを乗せたときの処理
  },   //ここのカンマ忘れやすい！
  function(){
   //マウスが外れたときの処理
  }
);
```

#####消した状態⇒表示状態をCSSで書いておく

```css

.text-contents{display:none;}

.text-active{display:block;}

```

#####addClassメソッド
【HTMLにて＜p class="text-contents"＞...＜/p＞がある前提】

```js

$('.text-contents').addClass('text-active');

```

#####removeClassメソッド
```js

$('.text-contents').removeClass('text-active');

```
※ここのメソッドで気を付けたいのが、後者の()の中のtext-activeの
前には「.」などは必要ないので気を付ける。

※表示するCSS【display:block;】を追加するのか、取り除くのかで出力を変化させる。

#####多数アイコンがあるときの注意！
text-contentsが複数ある際、そのまま書いてしまうと
すべてのアイコンに対して一気に処理がかかってしまうので
下記のように書くことを覚えておく！

```js

$('.lesson-hover').hover(
  function(){
    $(this).find('.text-contents').addClass('text-active')
  },
  function(){
    $(this).find('.text-contents').removeClass('text-active')
);

```

###アコーディオン機能
ページでQ&Aなどを設けた際によく使う機能。
クリックしたら下に答えが伸びて出てくるようなイメージ。
３つほどQ&Aがあるとすれば、同じ処理を行いたいのでクラス名を
共通のものにする必要がある。

【ここで使用するメソッド】
#####hasClass
引数に指定したものを、持っているかいないか判定する。

```js
$('.answer').hasClass('open');
//false

$('answer open').hasClass('open');
//true
```

#####１：まず答え部分はCSSで非表示にしておく
#####２：同一クラス名を付ける
(今回はクリックして反応させるクラスを【faq-list-item】に設定)
#####３：クリックイベントを設定＆if文とhasClassを使って区別

```js
$('.faq-list-item').click(function(){
//↑まずクリックイベントを設定！
    var $answer=$(this).find('.answer');
//↑この中で、子要素ひとつずつ反応するように、変数設定
    if($answer.hasClass('open')){
//もしopen要素を持っていれば・・・
      $answer.removeClass('open');
//openを取り除いて答え部分を隠す
      }else{
      $answer.addClass('open');
//そうでなければopenを追加して答え部分を表示させる          
      }
  });

```

#####ここまで書いた後に、実際の動作を間に書き足し
openを取り除いた時の動作⇒slideUpで隠す／spanの-を+に書き換え
openを追加した時の動作⇒slideDownで表示／spanの+を-に書き換え

```js
$('.faq-list-item').click(function(){
    var $answer=$(this).find('.answer');
    if($answer.hasClass('open')){
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).children('span').text('+');

      }else{

      $answer.addClass('open');
      $answer.slideDown();
      $(this).children('span').text('-');         
      }
  });
```

###気を付けたいこと
-　自分で書くときに、$(this).children...や.findの使い方がまだ理解が甘い。再度復習しなければいけないと感じた。
-　変数を使うと楽に書くことができたので、実践的に使えるように覚えておく。
-　未だにjQueryを書いていく際、クラス時は「.」id時は「#」を抜かすことがあるので気を付ける。
Pythonの再帰の落とし穴

# Pythonの再帰呼び出しの落とし穴

競技プログラミングでPython3を使用してDFSしたときに再帰の深さ制限が思ったよりもきつく，ハマってしまったので記録として残しておく．
PythonでDFSするときにはこの設定を気にしたい.

# 再帰の深さ制限の確認と変更
- 確認

```python
>>> sys.getrecursionlimit()
1000
```

- 変更

```python
>>> sys.setrecursionlimit(1000000)
>>> sys.getrecursionlimit()
1000000
```

# デバッグ時の注意
AtCoderで使用できるPython3.4.3と3.6や3.7で再帰の制限を超えた時のエラー内容が異なる．
バグの可能性のある箇所を例外処理でキャッチしてデバッグするときには気をつける必要がある．

- 検証用プログラム

``` Python
def func():
    func()
try:
    func()
except Exception as e:
    print(type(e),e)
```

- 出力: Python3.4.3

```terminal
<class 'RuntimeError'> maximum recursion depth exceeded
```

- 出力: Python3.6.1

```terminal
<class 'RecursionError'> maximum recursion depth exceeded
```
GoogleTestチートシート(一部)

※この記事は https://kunosu.qrunch.io/entries/pLxnlujNy0NXsoHY に移動しました。

---

[GoogleTestの公式チートシート](http://opencv.jp/googlemockdocs/cheatsheet.html)から、よく使うものを記載した。
今後増やす予定。

※ここでは引数の数を 0 から数える。

## 引数チェック

### ポインタ引数が指す値をチェック

Matcherの `Pointee(期待値)` でチェックできる。

先にテストケース外で名前空間を宣言しておく。

```cpp
using ::testing::Pointee;
```

使い方

```cpp
// 第2引数が指す値が10であることをチェック
EXPECT_CALL(*myMock, memMovSec(_, _, Pointee(10))).WillOnce(//省略
```

### 引数の配列の中身をチェック

Matcherを作成する。
Matcherの戻り値が `true` のときテストは成功、 `false` のとき失敗する。

```cpp
MATCHER_P(ArrayPointee, expectArray, "") {
	// arg は関数呼び出し時に引数へ渡された値
	return (memcmp(arg, expectArray, sizeof(expectArray)) == 0);
}

// サイズ指定もする場合
// 引数の数を増やすときは MATCHER_Pn の n を合わせて増やす
MATCHER_P2(ArrayPointeeSize, expectArray, size, "") {
	return (memcmp(arg , expectArray, size) == 0);
}
```

使い方

```cpp
byte expectArray[] = {0x11, 0x22, 0x33, 0x44};

// 第0引数の配列がexpectArrayと等しいことをチェック
EXPECT_CALL(*myMock, memSetSec(ArrayPointee(expectArray), 0xFF, 4)).WillOnce(//省略
```

## 出力チェック

### 値の比較

| 成功条件           | 処理                           |
|:-------------------|:-------------------------------|
| expected == actual | `EXPECT_EQ(expected, actual);` |
| expected != actual | `EXPECT_NE(expected, actual);` |
| expected <  actual | `EXPECT_LT(expected, actual);` |
| expected <= actual | `EXPECT_LE(expected, actual);` |
| expected >  actual | `EXPECT_GT(expected, actual);` |
| expected => actual | `EXPECT_GE(expected, actual);` |

## 簡単なスタブを作る

Action を定義する

```cpp
ACTION(Sum) { 
	return (arg0 + arg1);  // モック関数の0番目と1番目の引数の合計を返す
}

ACTION_P(Plus, n) {
	return (arg0 + n);  // モック関数の0番目の引数と n との和を返す
}

EXPECT_CALL(*mock, func(_,_)).WillOnce(Sum);
EXPECT_CALL(*mock, func(_,_)).WillOnce(Plus(10));
```

## 入力設定

### 引数が指す先に配列を設定する

以下の関数に対してテスト実行中に引数 `inputArr` へ配列を設定する。

```c
void func(char[] inputArr, int size);
```

Actions の `SetArrayArgument<N>(fast, last)` を使う。

- 各要素の意味
	- `N`: 引数の位置(0基準)
	- `fast`: 設定したい配列の先頭アドレス
	- `last`: 設定したい配列の終端の**次の**アドレス

```cpp
char inputArr[] = { 0x11, 0x22, 0x33, 0x44 }; //4バイト分の配列

EXPECT_CALL(*testMock, func(_,_)).WillOnce(SetArrayArgument<0>(inputArr, inputArr + sizeof(inputArr)));
```

## 出力設定

### ポインタ引数に戻り値を設定

以下の関数に対してテスト実行中に引数 `output` へ値を設定する。

```c
void func(int input, int size, int *output);
```

Actions の `SetArgPointee<N>(value)` を使う。

- 各要素の意味
	- `N`: 引数の位置(0基準)
	- `value`: 設定したい値

```c
// output に5を設定
EXPECT_CALL(*testMock, func(_,_,_)).WillOnce(SetArgPointee<2>(5));
```
AzureAD Connect　オンプレAD側でパスワード変更した後の対応

#オンプレADのパスワード替えたら同期できなくなった場合の対応

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315938/ec83b6c1-e996-ba19-659d-a0522eccb816.png)



# AADCで記憶しているパスワードを変える
今回の例ではadministratorのパスワードを変えちゃったってことで（そもそもちゃんとした専用ユーザーでやっとけや、、、）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315938/d35f5d21-77e5-73b7-2d14-1f1e153dfd51.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315938/83f40126-614f-bb8e-1913-e9202f15722e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315938/0bef4e3c-f1aa-0eed-2bbc-1f5ab4a10e49.png)
あとは、PowerShellで手動同期
```
Start-ADSyncSyncCycle
```
GoogleCloudStorageからTreasureDataへのデータインポート

# 概要

会社でTreasureDataをデータレイクとして使っているのでGoogleCloudStorage(以降GCS)からのデータインポートを試してみます。
前回（[BQからのインポート](https://qiita.com/FukTig/items/1d9aaa2e820324808d1c)）の続きとなります。

[ドキュメント](https://support.treasuredata.com/hc/en-us/articles/360001405628-Data-Connector-for-Google-Cloud-Storage)を参考に用意されたデータコネクタを利用します。

# 準備

TreasureDataのコネクタ設定の準備として、必要なものは以下
(こちらも前回と同様ですね。)

 - BigQueryのJSON keyfile
 - BigQueryのプロジェクトID

# GCSにインポート対象のファイルを用意

テスト用に出力したCSVファイルをおいておきます。

![スクリーンショット 2019-11-25 11.33.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/b86d201a-b0ea-4829-34dd-79fb034e8904.png)

# サービスアカウントキーを作成

[前回](https://qiita.com/FukTig/items/1d9aaa2e820324808d1c#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%AD%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90)と同じなので省略します。

# TreasureDataでのコネクタ設定

カタログからGCSを選択します。
![スクリーンショット 2019-11-25 11.37.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/ac9a5b2a-028b-c583-1a72-15254b50dc24.png)

![スクリーンショット 2019-11-25 11.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/7794b7c7-be38-213a-9b8a-74eca03b0a2d.png)

まずはJSON keyfileの入力が求められますね。
入力してContinueを押すと、認証情報が作成されます。

![スクリーンショット 2019-11-25 11.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/fe351bad-4ed4-7568-ab3d-9fc78d7272bc.png)

続いて「New Source」よりコネクタを作成します。
バケットとプレフィックスを入れて次へ

![スクリーンショット 2019-11-25 11.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/91eab459-342f-3d91-2703-a99f0f9f7c83.png)

読み込めていれば、プレビューで確認できます。
![スクリーンショット 2019-11-25 11.48.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/1233639a-fa6b-dd3e-2fe4-9f9e7005c56c.png)

以降は、他のコネクタと同様の項目ですね。
まずはインポート先の情報設定です。
今回もテスト用に新規で作ります。

![スクリーンショット 2019-11-25 11.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/37251588-4521-f006-05f0-f7eeb78f61c8.png)

続いてスケジュール設定ですが、今回は設定なしでいきます。
![スクリーンショット 2019-11-25 11.50.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/2f289167-382f-be6a-5e07-0f5890d6e6da.png)

最後にコネクタの名前をつけて実行！
実行ログを眺めて完了を待ちます。
![スクリーンショット 2019-11-25 11.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/22749e02-ea0b-ddb3-3b6e-e6a711228ad6.png)


ファイルサイズがそれなりにあるので多少時間(450MBで４分ぐらい）かかりましたが、問題なく取り込めているようです。

![スクリーンショット 2019-11-25 11.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519804/398fde0b-d2c3-2fe4-a646-b67e68ba8f4d.png)



# お片付け
恒例のお片付けをしておきます。

TreasureData側

 - 作成したテーブル
 - BQ用のコネクタ
 - BQ用の認証情報


GCS側

 - GCSにアップしたファイル
 - テスト用のサービスアカウント
【Unity】円形状の移動制限のかけ方

#Script

```C#:test
	public GameObject centerObj;            //中心となるオブジェクト(ゲームオブジェクトじゃなくても中心点がわかればOK)

	[SerializeField, Header("半径")]
	float radius;

	[SerializeField, Header("速さ")]
	float speed;
	
	// Update is called once per frame
	void Update ()
	{
		Move();
		Restriction();
	}

	void Move()
	{
		//手動で動かせるように(円形の移動制限には関係ありません)
		transform.position += new Vector3(Input.GetAxis("Horizontal") *speed*Time.deltaTime, Input.GetAxis("Vertical") * speed * Time.deltaTime, 0);
	}

	/// <summary>
	/// 円形の移動制限
	/// </summary>
	void Restriction()
	{
		//自身と円形に移動制限させたい位置の中心点との距離を測り半径以上になっていれば処理
		if (Vector3.Distance(transform.position,centerObj.transform.position)>radius)
		{
			//中心点から自身までの方向ベクトルを作る
			Vector3 nor=transform.position-centerObj.transform.position;
			//作った方向ベクトルを正規化する
			nor.Normalize();
			//方向ベクトル分半径に移動させる
			transform.position = nor * radius;
		}
	}
```

#どんな場合に使うの？
自分は自作バーチャルパッドを作った時に使いました
【Unity】事前に決めた座標を行ったり来たりする方法

#行ったり来たりする処理
身近で行ったり来たりする処理どうする？的な話題になったので自分なりに考えた処理

#サンプルコード
```C#
	[SerializeField, Header("移動速度")]
	float speed = 5;

	[SerializeField, Header("感知できる距離")]
	float range = 0.5f;

	[SerializeField,Header("移動したい座標")]
	Vector3[] movePath = new Vector3[3];
	Vector3 direction;

	int pathValue = 0;					//現在どのパスなのか
	int nextPathValue;                  //次の移動したいパス

	enum MoveType
	{
		MoveOn,
		Return
	}

	MoveType moveType;

	private void Start()
	{
		//初期位置を記憶しておく（配列の0番目）
		movePath[0] = transform.position;

		//次の座標のパス
		nextPathValue = 1;
		moveType = MoveType.MoveOn;
	}

	private void Update()
	{
		Move();
	}

	/// <summary>
	/// 動くよ
	/// </summary>
	void Move()
	{
		//移動する向きベクトルを作成
		direction = movePath[nextPathValue] - movePath[pathValue];
		//方向ベクトルを作成
		direction.Normalize();

		Debug.Log(pathValue +"	"+nextPathValue);

		//移動
		transform.position += direction * Time.deltaTime * speed;

		//目標地点に近づいたか評価
		if (CheckDistance(transform.position, movePath[nextPathValue], range))
		{
			//次のパスに移動先を変更
			NextDesignatedLocation();
		}
	}
	/// <summary>
	/// 範囲を指定してその範囲ないか調べる関数
	/// </summary>
	/// <param name="_myPos">自身の位置</param>
	/// <param name="_nextPos">次の移動位置</param>
	/// <param name="_range">半径</param>
	/// <returns></returns>
	bool CheckDistance(Vector3 _myPos, Vector3 _nextPos, float _range)
	{
		bool inRange = false;
		//targetの位置に近づいたらtrue
		if (Vector3.Distance(_myPos, _nextPos) <= _range)
		{
			inRange = true;
		}
		return inRange;
	}

	/// <summary>
	/// 次のパスに指定する
	/// </summary>
	void NextDesignatedLocation()
	{
		switch (moveType)
		{
			case MoveType.MoveOn:
				pathValue = nextPathValue;
				nextPathValue++;
				if (nextPathValue == movePath.Length-1)
				{
					moveType = MoveType.Return;
				}
				break;
			case MoveType.Return:
				pathValue = nextPathValue;
				nextPathValue--;
				if (nextPathValue == 0)
				{
					moveType = MoveType.MoveOn;
				}
				break;
			default:
				pathValue = nextPathValue;
				nextPathValue++;
				if (nextPathValue == movePath.Length - 1)
				{
					moveType = MoveType.Return;
				}
				break;
		}
	}
```
#まとめ
急いで書いたとはいえ汎用性がなさそうなものができてしまった…
[UE4]アクタ単位でトランスフォームをロックする

アクタ右クリック > Transform > Lock Actor Movementにチェック。
![2019-11-29_11h31_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/805e37a5-47ea-cea1-a3ad-8fa5c8d570bd.png)
![2019-11-29_11h32_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/8367374b-39bc-7022-9f9e-aad2ec32490e.png)
移動や回転、スケールなどが出来なくなります。
スタティックなライトなど、間違えて動かすと面倒な物に使うと便利です。
【Unity】なぜGetComponentを毎フレーム取得することが推奨されていないのか

#毎フレームGetComponent<>()

よくGetComponentは毎フレームやることはよろしくないという話を聞きますがなぜダメなのでしょうか？

#試してみよう！
今回は二つのScriptを用意しました

片方は先にComponent取得してから10万回Transform.positionにvector(0,0,0)を入れる

```C#test.cs
　　private void Start()
	{
		Transform t=GetComponent<Transform>();
		for (int i = 0; i < 100000; i++)
		{
			t.position = new Vector3(0,0,0);
                } 
       }
```

もう片方は10万回GetComponetして10万回Transform.positionにvector(0,0,0)を入れる

```C#test2.cs
	private void Start()
	{
		for (int i = 0; i < 100000; i++)
		{
			GetComponent<Transform>().position = new Vector3(0,0,0);
		}
	}
```
#結果
![8f265ca3adca739ea0423092d4e3da10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211130/4439a4ff-58a7-2d48-32c9-d46e24908c6a.png)
**2倍近く差が出てるんですけど…**
今回は10万回で検証しましたがこれが毎フレーム実行されたとしても2倍近く処理が無駄ってことですね。
仕様上仕方がない理由以外ではUpdateでGetComponentをするこはよろしくなさそうですね。
[UE4]ウィンドウ右上にFPSなどの情報を出す

Stat FPSとは別でウィンドウ右上に常に表示できる。
![2019-11-29_11h28_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/9b12e9d1-8c6c-d3db-7ff9-b29dec3d7ed1.png)
Editor Preferences > General - Performance > Editor Performance > Show Frame Rate and Memoryにチェック。
![2019-11-29_11h27_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/17a9f0bb-c2a9-99ff-ce1c-d61283fe230a.png)
unexpected status "ROLLBACK_IN_PROGRESS" while waiting for CloudFormation stack ... が起きたら

ちょっとハマったので、同じ轍を踏む人が少しでも早く解決できるようにUP

## 環境

eksctl : 0.10.1

## 対応

eksctl を 0.10.2 以降に上げる

## エラーメッセージ

```console

[centos]$ eksctl create cluster --name=k8s --region=ap-northeast-1 --nodes=3 --nodes-min=1 --nodes-max=3 --version=1.12 --node-type=t2.medium --vpc-private-subnets=subnet-1,subnet-2,subnet-3 --vpc-public-subnets=subnet-4,subnet-5,subnet-6
Mon Nov 25 01:42:32 UTC 2019

[?]  eksctl version 0.10.1
[?]  using region ap-northeast-1
[?]  using existing VPC (vpc-xxxxxxxxxxxxxxxxx) and subnets (private:[subnet-3 subnet-2 subnet-1] public:[subnet-4 subnet-5 subnet-6])
[!]  custom VPC/subnets will be used; if resulting cluster doesn't function as expected, make sure to review the configuration of VPC/subnets
[?]  nodegroup "ng-xxxxxxxx" will use "ami-0cb3fc9f948330b7d" [AmazonLinux2/1.12]
[?]  using Kubernetes version 1.12
[?]  creating EKS cluster "k8s" in "ap-northeast-1" region
[?]  will create 2 separate CloudFormation stacks for cluster itself and the initial nodegroup
[?]  if you encounter any issues, check CloudFormation console or try 'eksctl utils describe-stacks --region=ap-northeast-1 --cluster=k8s'
[?]  CloudWatch logging will not be enabled for cluster "k8s" in "ap-northeast-1"
[?]  you can enable it with 'eksctl utils update-cluster-logging --region=ap-northeast-1 --cluster=k8s'
[?]  Kubernetes API endpoint access will use default of {publicAccess=true, privateAccess=false} for cluster "k8s" in "ap-northeast-1"
[?]  2 sequential tasks: { create cluster control plane "k8s", create nodegroup "ng-2d1b6c23" }
[?]  building cluster stack "eksctl-k8s-cluster"
[?]  deploying stack "eksctl-k8s-cluster"
[?]  unexpected status "ROLLBACK_IN_PROGRESS" while waiting for CloudFormation stack "eksctl-k8s-cluster"
[?]  fetching stack events in attempt to troubleshoot the root cause of the failure
[?]  1 error(s) occurred and cluster hasn't been created properly, you may wish to check CloudFormation console
[?]  to cleanup resources, run 'eksctl delete cluster --region=ap-northeast-1 --name=k8s'
[?]  waiting for CloudFormation stack "eksctl-k8s-cluster": ResourceNotReady: failed waiting for successful resource state
[?]  failed to create cluster "k8s"
```

# 参考リンク

- [Attribute: ClusterSecurityGroupId was not found for resource AWS::EKS::Cluster](https://github.com/weaveworks/eksctl/issues/1574)
golangの数値型とmysqlの整数型

#TL;DR
unsignedだったらunsignedで合わせる。
not unsignedだったらnot unsignedで合わせる。
アンマッチの場合はきっちりオーバーフローするので回避したい。
intは甘え。

#mysqlの整数型
リンク先参照
https://dev.mysql.com/doc/refman/5.7/en/numeric-type-overview.html

#golangの整数型
リンク先参照
http://golang.jp/go_spec#Numeric_types

#ざっくり対応
| mysql            |             golang|
|:-----------------|:------------------|
| tiny int         |              int8 |
| int              |              int32|
| big int          |              int64|
unsignedはunsigned同士で対応。
[UE4]スクリーンメッセージを非表示にする

![2019-11-29_11h16_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/7c155637-0203-57ce-4f49-3de3d3a33d34.png)
LIGHTING NEEDS TO REBUILTなど、ビューポート左上のメッセージはコンソールコマンド"DISABLEALLSCREENMESSAGES"で非表示にすることができます。
![2019-11-29_11h22_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/d5792429-f2c5-3537-7c84-4ea91b55ccc9.png)
非表示した後もう一度表示するには"ENABLEALLSCREENMESSAGES"を使います。

ちなみに"TOGGLEALLSCREENMESSAGES"で切り替えることもできます。こちらのほうがコマンド一つで足りるので使いやすいかも。
rsyncでのファイルのコピーをxargsで高速化する方法

#rsyncを用いたファイルのコピーをxargsを用いて高速化する方法をご紹介します。

#高速化したいrsync
testディレクトリを、submitディレクトリの中にコピーする。
```
rsync -av test submit
```

#上記の内容をxargsを用いて高速化するコマンド。
```
echo "test" | xargs -P8 -i% rsync -av --progress %　submit
```

-P8 の部分は、pcのスペックが許す限り、-P10でもーP4でもいい。
xargsに-J%のオプションをつけることで、rsyncコマンドの%の部分にechoで出力した部分が代入される。

#余談
Linuxでできたコマンドがmacでもそのまま使えるとは限らない。
例えば、Linuxにおいて
```-P0```
は、xargsで可能な限り多くのプロセスでコマンドを実行するためのオプションだが、macで実行すると、

``` xargs: max. processes must be >0```
と出て注意される。
どうやら、linuxとmacではxargsの仕様が違うらしい。
【Unity】3D座標を2D座標に直す方法

#3D座標を2D座標に変換
オブジェクトのxとyの値だけを使えばそれは2Dの座標なのでは？と最初自分は思っていましたがCameraの位置や角度を変えるとうまくいかなくなるのでそれらに対応したものを作っていきましょう。

#Script公開

```C#:test.cs
	public GameObject obj;			//3D座標から2D座標に変換したいオブジェクト
	public GameObject confirmation; //座標がちゃんと変換されているか確認用

	void Start()
	{
		//カメラを平行投影にする	ここ一番重要！透視投影のままだとうまく座標変換できません
		Camera.main.orthographic = true;
	}

	// Update is called once per frame
	void Update()
    {
		confirmation.transform.position = Change2DPos(obj);
    }

	Vector2 Change2DPos(GameObject obj3D)
	{
		//Camera.mainになっていますが設定したいCameraがあれば変更してくさい。
		Vector2 pos2D=Camera.main.ViewportToWorldPoint(Camera.main.WorldToViewportPoint(obj3D.transform.position));
		return pos2D;
	}
}
```
Script的にはこうなります。

変換部分の解説

```C#:test.cs
     //一度3Dのオブジェクト座標をビューポート座標に変換。
     var pos1= Camera.main.WorldToViewportPoint(obj3D.transform.position);
     //ここのZの値はカメラのZ座標が入るので一度0にします(ここはご自由に変えてください)
     pos1.z=0;
     //ビューポート変換した座標をワールド座標に直します。
     var pos2 =Camera.main.ViewportToWorldPoint(pos1);

```

これらのことを一行で書くと最初に書いたコードになります(Z座標とくに考慮してませんが)

#終わり
なにか質問やここ間違ってるなどありましたらコメントください。
【Python】文字列と数値（asciiコード）の変換まとめ

# はじめに
自分向けにPythonでの文字とasciiコードの計算方法をまとめました。
AtCoder上のPython3.4.3と3.8で動作確認済みです。

# 変換方法
`ord('文字')` と `chr(数値)` で相互に変換できます。

```python
s = 'A'

ord_s = ord(s)
print(ord_s)  # 65

chr_s = chr(ord_s)
print(chr_s)  # A
```

# 変換表
まとめとしてasciiコードと文字の対応表を記載します。
なお、以下の表の`asciiコード`という項目は10進数での表記を表しています。

## 重要な変換ピックアップ
|asciiコード|16進数|文字|
|:--:|:----:|:-:|
| 48 | 0x30 | 0 |
| 57 | 0x39 | 9 |
| ...| ...  |...|
| 65 | 0x41 | A |
| 90 | 0x5a | Z |
| ...| ...  |...|
| 97 | 0x61 | a |
| 122 | 0x7a | z |

例えば、大文字と小文字は一度asciiコードに変換してから`+32`することによって変換できます。（もちろん `.replace()` でも出来ます）

```python
s = 'A'
small_s = chr(ord(s)+32)
print(small_s)  # a
```


## 数字
ここでいう数字は**文字としての数字**なので注意してください。

|asciiコード|16進数|文字|
|:--:|:----:|:-:|
| 48 | 0x30 | 0 |
| 49 | 0x31 | 1 |
| 50 | 0x32 | 2 |
| 51 | 0x33 | 3 |
| 52 | 0x34 | 4 |
| 53 | 0x35 | 5 |
| 54 | 0x36 | 6 |
| 55 | 0x37 | 7 |
| 56 | 0x38 | 8 |
| 57 | 0x39 | 9 |



## アルファベット大文字

|asciiコード|16進数|文字|
|:--:|:----:|:-:|
| 65 | 0x41 | A |
| 66 | 0x42 | B |
| 67 | 0x43 | C |
| 68 | 0x44 | D |
| 69 | 0x45 | E |
| 70 | 0x46 | F |
| 71 | 0x47 | G |
| 72 | 0x48 | H |
| 73 | 0x49 | I |
| 74 | 0x4a | J |
| 75 | 0x4b | K |
| 76 | 0x4c | L |
| 77 | 0x4d | M |
| 78 | 0x4e | N |
| 79 | 0x4f | O |
| 80 | 0x50 | P |
| 81 | 0x51 | Q |
| 82 | 0x52 | R |
| 83 | 0x53 | S |
| 84 | 0x54 | T |
| 85 | 0x55 | U |
| 86 | 0x56 | V |
| 87 | 0x57 | W |
| 88 | 0x58 | X |
| 89 | 0x59 | Y |
| 90 | 0x5a | Z |


## アルファベット小文字

|asciiコード|16進数|文字|
|:--:|:----:|:--:|
| 97 | 0x61 | a |
| 98 | 0x62 | b |
| 99 | 0x63 | c |
| 100 | 0x64 | d |
| 101 | 0x65 | e |
| 102 | 0x66 | f |
| 103 | 0x67 | g |
| 104 | 0x68 | h |
| 105 | 0x69 | i |
| 106 | 0x6a | j |
| 107 | 0x6b | k |
| 108 | 0x6c | l |
| 109 | 0x6d | m |
| 110 | 0x6e | n |
| 111 | 0x6f | o |
| 112 | 0x70 | p |
| 113 | 0x71 | q |
| 114 | 0x72 | r |
| 115 | 0x73 | s |
| 116 | 0x74 | t |
| 117 | 0x75 | u |
| 118 | 0x76 | v |
| 119 | 0x77 | w |
| 120 | 0x78 | x |
| 121 | 0x79 | y |
| 122 | 0x7a | z |


# さいごに
読んでいただきありがとうございました。間違い等があればご指摘お願いします。
コマンドの実行時間確認

```
$ time date
2019年 11月 25日 月曜日 11:28:54 JST

real    0m0.002s　←ココ見る
user    0m0.000s
sys     0m0.001s
$
```


```
$ date ;nslookup google.com ;date
2019年 11月 25日 月曜日 11:30:09 JST　←ココから
Server:         ***.***.***.***
Address:        ***.***.***.***#53

Non-authoritative answer:
Name:   google.com
Address: 172.217.161.238

2019年 11月 25日 月曜日 11:30:09 JST　←ココまで
$
```
【求職者支援訓練】受講生募集 使ってみよう！再就職のために！スキルアップのために

　求職者支援制度とは、**雇用保険を受給できない求職者の方**に対し、**無料の職業訓練（求職者支援訓練）**を実施し、本人収入、世帯収入及び資産要件等、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金（**職業訓練受講給付金**）を支給するとともに.ハローワークが中心となってきめ細やかな就職支援を実施することにより、**安定した「就職」**を実現するための制度です。

　令和元年度 、**特定非営利活動法人くるくるネット**はハローワークからの委託を受け「初歩から始めるパソコン基礎科」の訓練生を募集します。学科及び実技の訓練を行い、「ワープロ３級」、「表計算３級」等の資格取得を目指す３か月のコースです。

訓練科目：**初歩から始めるパソコン基礎科** 4-31-01-01-00-1302　
訓練時間：３００時間
訓練期間：令和２年１月２４日（金）～令和２年４月２３日（木）
募集期間：**令和元年１２月１０日(火)～令和２年１月６日（月）**まで
定員：１０名　　受 講 料：受講料は無料（教科書代は有料）
教科書代：３６５２円
訓練内容：パソコンの基礎から学び、「ワープロ３級」、「表計算３級」の合格を目指します
申込方法：令和２年１月６日（月）までにハローワークにて求職の申込を行い、訓練相談窓口にて申込ください。
求職登録及び職業訓練の相談は、平日（月～金）の8：30～17：15までです。
年内は12月27日（金）まで開庁しています。年明けは1月6日（月）から開庁します。
訓練の申込締切前は混み合いますので、出来れば年内に早め申し込みをお願いいたします。また、事前相談会・見学は予約制で随時開催します。

＜お問い合わせ＞
○ハローワーク室蘭（２番窓口）
室蘭市海岸町１丁目２０－２８　電話：**０１４３－２２－８６８９（４１＃）**
○ハローワーク伊達
伊達市網代町２４
電話：**０１４２－２３－２０３４**

○特定非営利活動法人くるくるネット
室蘭市中央町２－８－１０　電話：**０１４３－４８－９１３３**
Golangのテンプレートエンジンを使い、日付・時刻のフォーマット指定

##はじめに
Golangのテンプレートにおいて、日付のフォーマットを指定する方法。
###方法
Golangのテンプレートでは、`{{ .変数名 }}`のような形で、テンプレートに渡されたデータにアクセスすることができる。
たとえば、`time型の変数名: now`が渡されたと仮定すると、以下のようにフォーマットを指定することができる。
（何も指定しないと、2009-11-10 23:00:00 +0000 UTCのような形式となる。）

・YYYY/MM/DD形式で指定したい場合
>
>.now.Format "2006/01/02"
>

・YYYY年MM月DD日 hh時mm分ss秒形式で指定したい場合
>
>.now.Format "2006年01月02日 15時04分05秒"
>

のように記載すればよい。

##まとめ
つまり、.Format "～"を用いると日付・時刻を指定可能である。
<br>
[UE4]半透明を選択しないようにするショートカット

ショートカットTでビュー上の半透明物を選択しないようにできる。
フォグシートや煙などが多くてオブジェクト選択の邪魔になる時などに使えます。
![T.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/09959022-4740-4011-cdb7-bc96574423ef.gif)
[UE4]コンソールコマンドでエディタを閉じる

コンソールコマンドの"QUIT_EDITOR"でエディタを終了することができる。
バッチ処理などでエディタ終了までを行いたいときに。
![QUIT.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369485/5c985268-0fd4-3578-d7c0-94d94a876807.gif)
Sliceの値を構造体に表す方法 


初めまして、初投稿となります。
最近Goを初めて約２ヶ月なのですが、まだまだ慣れない
特に配列が苦手だった私にとっては「arrayとsliceってなんぞや？」で
3日間苦しむことも…(´・ω・｀)ﾏｼﾞﾂﾚｪ
##なぜsliceと構造体を使おうとしたか？
開発している時に複数の値を入力して、
Googleのdatastoreに構造体の値を出力させるものを作ろうとしていました。

いざsliceを使って何個も値を入力できるようにしたのです。
「よしできた！( ・∇・)」と思ってdatastore見たら
構造体の一箇所にsliceのデータがギッシリ詰まってましたΣ（・□・；）

[{1 1}{2 4}{3 9}{4 16}{5 25}]みたいな感じで

もう摩訶不思議アドベンチャーです
こういうので引っかかったのは私だけじゃないはずと思いたい…

##結果的にどうしたか
一度作ったsliceを別の構造体に挿入してみたって感じです
まずは簡単に構造体とsliceを作ってみます

```go
package main

import (
	"fmt"
)

type Slice struct {
	Singular int //単数
	Power    int //累乗
}

type Store struct {      //sliceの値を入れる構造体
	Singular_answer int 
	Power_answer    int
}

func main() {
	slice := []Slice{}   //構造体Sliceをsliceにします
	for i := 1; i <= 5; i++ {
		singular := i
		power := i * i
		fmt.Println(singular, power)
		/*
			1 1
			2 4
			3 9
			4 16
			5 25
		*/

		//appendでsliceの中にsinfularとpowerの値がそれぞれ入る
		slice = append(slice, Slice{
			Singular: singular,
			Power:    power,
		})
	}

	fmt.Println(slice)
	//[{1 1} {2 4} {3 9} {4 16} {5 25}]と値が入っていることが確認できた！
```
とりあえずこれで構造体からsliceにできましたね(´・ω・｀)ﾌｩ…
しかしこれでgoonを使って書き込みしたら私みたいになります

じゃあどうするべきか


```go
    //ここからが解決策
    //rangeでsliceに入っている値の数ループさせます
	for _, input := range slice {
		slice_input := Slice{
			Singular: input.Singular,
			Power:    input.Power,
		}
		fmt.Println(slice_input)
		/*
			{1 1}
			{2 4}
			{3 9}
			{4 16}
			{5 25}
		*/
	}
}

```
このようにあらかじめ用意しておいた構造体に
もう一度突っ込んで上げることでスッキリしました…

datastoreに突っ込む時はgoon.Putをループに突っ込んで上げると
一回のループで一個ずつ入ってくれるはず(´・ω・｀)

以上！！
A-FRAME: 物理演算でボーリングっぽい動きを実現してみる５（ボールの回転への抵抗）

A-Frameをつかって物理演算ができるようにしてみます。
回転に対する抵抗をみていきます。角減衰と言うようです。

回転に対する抵抗が増えたらどうなるのか、ちょっとイメージが湧かないです。
ボールは転がっているので転がりにくくなるのか、、、それだとこのボーリングの例では線形減衰との区別がつかないです。
とりあえずやってみます。

例１）angularDamping=0.01
デフォルト値です。
![ang1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/655eba3c-c22a-7d25-17a6-d87e5c3eee5c.gif)[demo](https://k38.github.io/aframe/physics-system/ball_angular_001.html)

例２）angularDamping=1
抵抗を最大にしてみます。
![ang2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/87967416-b25b-eef8-aeb4-d4f2c2a73204.gif)[demo](https://k38.github.io/aframe/physics-system/ball_angular_1.html)
ピンと衝突した時に、ブレーキがかかったように止まりました。

例３）angularDamping=0.0001
抵抗を小さくしてみましょう。
![ang3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/99926c73-fbdc-f6ca-36c3-b173be1ca9f6.gif)[demo](https://k38.github.io/aframe/physics-system/ball_angular_00001.html)
0.01の時と比べて、衝突時に受ける影響が少なくなっているように見えます。

例４）angularDamping=0
抵抗を無くしてみましょう。
![ang4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/12188b6c-e45e-9218-283f-3567e3337203.gif)[demo](https://k38.github.io/aframe/physics-system/ball_angular_0.html)
0.0001との差は感じません。

### まとめ
このボーリングの例だと、角減衰はボールとピンの衝突時に影響する値のようでした。
ピンからの反作用が減衰するという事でしょうか、ちょっとイメージがついていません。
とりあえず、デフォルトの0.01よりは0.0001の方がボーリングらしい動きに見えるので、0.0001を採用します。
Lookerにリファレンスラインを引いていい感じにする方法


時系列のデータ推移を見ている時に、最大値や平均値ってどのぐらいなんだろう？という時があると思います。その際にリファレンスラインというものを設定することで、データをわかりやすくすることができます。

今回は、Lookerでのリファレンスラインの設定手順を紹介します。

## リファレンスラインの設定後イメージ
![リファレンスライン1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/0b10b4b0-1f88-dedb-2e5f-60317126577c.png)

上図のようにリファレンスラインを活用することで、グラフの対象期間での最大値、平均値、最小値などを任意に設定することができます。対象期間を変更すれば自動でそれぞれの値を算出して、描画してくるためとても便利です。

## 設定手順
・LookerのEDITモードで、**VISUALIZATION**の**EDIT**を選択
・Yタブの下の方にあるMARKINGSの**Add Reference Line**を選択　
<img width="572" alt="リファレンスライン2_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/4af692b2-a168-155d-272a-78f3a6122e0d.png">

・**Reference Line**の設定が表示される為、以下のように選択し最大値の表示用情報を入力する
・Type：Line
・Value：Maximum
・Label：最大 {{max}}円
<img width="584" alt="リファレンスラインMAX.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/d73983b7-b5a5-d740-cb45-969377d67369.png">

・また**Add Reference Line**を選択し、平均値を設定
・Type：Line
・Value：Average (Mean)
・Label：平均 {{mean}}円
<img width="582" alt="リファレンスラインAVG.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/3609a12e-3299-8c58-7b02-ac08a93053bc.png">

・次も**Add Reference Line**を選択し、最小値を設定
・Type：Line
・Value：Minimum
・Label：最小 {{min}}円
<img width="575" alt="リファレンスラインMIN.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/db9cadc6-6a3b-5d6e-f21d-70a4504c0ba4.png">

これで時系列グラフ上の対象期間の最大値、平均値、最小値が常に可視化される状態になりました。

## まとめ
普段から業務上の数値情報を可視化して確認できるのがBIツールのメリットですが、リファレンスラインを利用することで、さらに情報の収集速度が上がると思います。後は単純になんか見た目がかっこよくなる（気がする）。客先にデータを見せてプレゼンする場合でもなんかかっこいい！という方が凄そうに見えたりする。（かもしれない）
【Rails】form_with (local: true)について

# なんでlocal: true入れるの？

```ruby
= form_with(model:post.new, local: true) do |f|
```

`local: true`がない場合、Rails5ではAjaxによる送信という意味になる。普通にHTMLとしてフォームを送信する場合に`local: true`が必要になる