OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter で新しくプロジェクトを作ろうとしたらエラーが出て困った

## 起こったこと

開発 PC が変わったので AndroidStudio で Flutter の環境を作ろうと思い、インストール、プロジェクト作成と進めたのですが次のエラーが出てプロジェクトの作成に失敗してしまいました。



`Could not find an option named "androidx". Run 'flutter -h' (or 'flutter   -h') for available flutter commands and options.`



意外と情報が少なく無駄に時間を要したので、メモしておきます。

なお、インストール作業は自分の [過去記事](https://qiita.com/kurararara/items/d6f4f5d2415110847d91) を参考にしながら進めていました。



## 解決方法

どうやら Flutter の SDK バージョンが複数インストールされている場合などに起こるようで（いつ入れたか記憶にない……）、次のコマンドを打てばエラーが解消します。

```s
$ flutter channel stable
$ flutter upgrade
```



## 参考にしたサイト

:link: [When I create a new project, I will report the following error #42812 | GitHub](https://github.com/flutter/flutter/issues/42812)
Calibreで、Amazonから書誌情報をダウンロードする

#書誌情報のダウンロード先を指定する
”設定”　→　”書誌情報のダウンロード”
に進み、

”Amazon.com”にだけチェックをつける。

その後、”Amazon.com”を選択しながら”選択中のソースを設定”で、

”使用するAmazonサイトの国籍”：日本
”データを取得するサーバー”：Amazonサーバー

と設定して、保存して終了する。

#Kindleから表紙をダウンロードできるようにする。

”設定”　→　”高度な設定”の中の”プラグイン”で、”新しいプラグインを取得”
の画面で、”Kindle High-res Covers”のプラグインを新たに取得してアプリを再起動する。

その後は、書誌情報をダウンロードするときに書名と作者を指定せず、
ISBNだけを指定して書誌情報を検索する。

#kindle本限定の表紙をダウンロードする

”設定”　→　”書誌情報のダウンロード”
の画面で、Amazon.com　を選択しながら

”選択中のソースを設定”をクリックする。
その後、”書誌情報の検索にMOBI-ASINを利用する”にチェックをつける。

amazonのkindle本の購入ページで、ASINの項目をコピーし、

その後は、書誌情報をダウンロードするときに書名と作者を指定せず、
"ID"の部分に下記だけを指定して書誌情報を検索する。

```
mobi-asin:<コピーしたASIN>
```
UnityでBuilding Gradle projectが一生終わらない場合の対応

## はじめに
いつものようにUnityでAPK書き出しを行なおうとしたらビルドが下記画面から何時間経っても変わらない事象が発生したので対応方法をメモ

<img width="609" alt="スクリーンショット 2020-01-05 23.39.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236499/e9cfb40a-c221-e3b6-a6fc-77c398c8ffc2.png">


## 解決策
結論から話すと、ウイルス対策ソフトが原因でした
`ESET Cyber Security Pro` のリアルタイムファイルシステム保護とファイアウォールをOFFにするとビルドが完了しました

## ネットで調査した際に見つけた対策案
### gradleのアップデート
`brew upgrade gradle` でgradle自体をアップデートします  

### AndroidSDK&NDK をUnityHub経由でインストール
2020年1月7日現在ではAndroidSDKとNDKをAndroidStudioを使うことなくUnityHubから直接インストールできるようになりました

インストール→三点縦リーダーボタン→モジュールを加える ボタンからインストール可能です
<img width="638" alt="スクリーンショット 2020-01-07 14.28.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236499/2f05a77f-c9dd-4334-01bb-4b07ebf203e1.png">

### プロジェクトをクローンし直す
要はキャッシュ削除ですね、自分も一度はこの方法でエラーメッセージが書き出されるようになったので影響はありそうです(ただもう一度ビルドし直すとビルドが終わらない元の事象に戻りましたが...)
git メモ

###git lab にあがっているブランチのソースを取得する方法
git status で変更がないことを確認

```console
git fetch
```

git checkout -b [ブランチ名] origin/[ブランチ名]

```
git checkout -b feature_11_04 origin/feature_11_04
```

###git stash で変更退避・stashリスト表示

```
git stash
git stash list
```

### 変更復元、復元したstashを削除する
```bash
# 最新のstashを復元し、削除 
git stash pop 
# N番目のstashを復元し、削除
git stash pop stash@{N} 
```
### stashは復元し、復元したstashを残す
```bash
# 最新のstashを復元し、残す
git stash apply 
# N番目のstashを復元し、残す
git stash apply stash@{N} 
```
### N番目のstashを削除する
```bash
# 最新のstashを削除
git stash drop
# N番目のstashを削除
git stash drop stash@{N} 
```


###git stash で隠したコードと今のコードの変更点を表示するコマンド

```
git stash show -p stash@{0}
```
もしくは

```
git show stash
```


### 特定のファイルをgitの管理外とする

```
git rm index.html
```

### 特定のファイルのlogと修正内容を確認する

```
git log -p index.html
```

### SSHキー作成、GitHubとのSSH接続を確認する

```
ssh-keygen -t rsa
ssh -T git@github.com
```
ssh-keygenはどこのディレクトリで実行してもホームディレクトリにキーが作成されるようになっている。

### aliasの追加・削除・確認

```
git config --global alias.st status
git config --global --unset alias.st
git config --global --edit
```

### ワーキングで変更中のファイル、addでステージングに移したファイルすべて変更破棄
(最新のコミット時の状態と一致した状態にする)

```
git reset --hard
```

### 指定されたコミットIDの状態に戻す

```
git reset --hard　<commit ID>
```
これよりあとにコミットした内容はlog含めすべて破棄。
新しくファイルを作成してそのファイルをcommitしていれば、そのファイルは削除される。



### 指定したコミットIDより後にコミットしたlog破棄
(コミットID時のaddとcommitも無効にする)

以下のログの場合、

```
$ git log --oneline
3a61ab6 12/28(thu) delete config file
5c32ada 12/27(wed) modify config file
abfac40 12/26(tue) add config file
bf0e0fd 12/25(mon) create new project 
```

abfac40より後の5c32adaと3a61ab6のlogを破棄したい場合

```
git reset abfac40
```

3a61ab6 5c32ada のlogは破棄される。
3a61ab6 5c32ada の変更内容は保持される。


### addした後と、最新コミットとの変更箇所を確認(ステージングエリアファイルとの比較)

```
git diff --cached
```

### modified(変更)ファイルをコミット(addを省略)

```
git commit -a
git commit -a -m "コメント"
```

### 最新のコミットのコメントを編集・修正したい場合

```
git commit --amend
```

### Githubにpushしたcommitコメント修正する場合

```
git commit --amend
(エディタが立ち上がるのでコメント修正する)
git push -f origin master
(強制的にpushして最新のコメントを上書き)
```

### Githubにpushしたファイルを取り消す場合

```
git reset --hard　<commit ID>
(指定されたコミットIDの状態に戻す)
git push -f origin master
(強制的にpushされた内容を削除する)
```
もしくは

```
git revert　<commit ID>
git push origin master
```

revertはコミットを取り消したというログが残る。
resetして強制pushした方は取り消した記録は残らない。

### 直前のコミットにファイルを追加・修正する場合

```bash
git add <追加・修正したファイル名>
git commit --amend --no-edit
# --no-editでコミットメッセージは変更しない。コミットIDは更新される。
```

もしくは

```
git reset HEAD^

git add .
git commit
```
^は一つ前という意味。最新コミットの一つ前を指定している
^^で二つ前。~2でも良い。HEAD~5だとHEADの5つ前のコミット。


### 二つのcommit間の差分を出力
```bash
git diff <コミットID1> <コミットID2>
```

### 現在のブランチの状態からの差分を出力
```bash
git diff <コミットID1>
```

### 二つのcommit間で差分があるファイル名の一覧を取得
```bash
git diff --name-only <コミットID1> <コミットID2>
```

### 二つのcommit間の差分をファイルを指定して出力
```bash
# ファイル名一覧取得
git diff --name-only <コミットID1> <コミットID2>

# ファイル名を指定して差分出力
git diff <コミットID1> <コミットID2> <ファイル名>
```

### git commitで特定ファイルのみコミット
```bash
# 「--」は無くても可
git commit -m 'add' -- hoge.txt
```
HDMIやDisplayPortから変換したケーブルを使うと音が出ない問題【pavucontrol】

## 宣伝

同じような記事を[こちら](https://students-tech.blog)でも書いているので、見に来てくれると幸いです。

## スピーカーから音が出ないぞ！？

つい最近Ryzenマシンを組んだのですが、スピーカーをつなげても音が出ない！！

HD AUDIO 端子もつながっているし...なぜ音が出ないんだ...

## 原因究明

落ち着いて`alsamixer` を見てみよう。

いやでもスピーカーは認識されてるぞ...？

あ！！**デフォルトのサウンドカードがHDMIになってる！！**

これはつまり、DisplayPort→HDMI→DVIで変換してモニターをつなげてるのが悪さをしている...？~~そんなつなぎ方をしているお前が悪い~~

調べてみると、HDMIとDisplayPortは**音声出力ができる模様。** [詳細](https://ja.wikipedia.org/wiki/DisplayPort)

絶対これやん。直すぞ！

## pavucontrolコマンドで直す

ちょっと調べたら`pavucontrol` コマンドで操作できる模様。

ちなみに`alsamixer` ではデフォルトの変更はできませんでした。

では`pavucontrol` のインストールと操作を。

```bash
$ sudo apt install pavucontrol

$ pavucontrol
```

![audio1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276637/096a6ae1-560a-c1be-ff6e-e20470d0452d.png)


そうすると上のようなGUIコントロール画面が出てきます。

この画面の`Firefox... オン` となっているところの横をいじることで出力元を変更できます。

これでガチャガチャして音が出る選択肢を選びましょう！

お疲れ様でした。
GCPのコンピューティングサービスの比較【サーバレスに使いたい】

# 概要

　去年GCPを利用していて、最終的にCloud Runに行き着いた理由を示します。ここで挙げるGCPのサービスは以下の通りです。

- GAE(Google App Engine)
- GCE(Google Compute Engine)
- Cloud Functions
- Cloud Run

前提条件は以下の通り。

- アプリケーションとして管理
- 料金は安く
- サーバレス
- Pythonを使用

　ここでの観点は「実装のしやすさ」「料金の安さ」「管理のしやすさ」です。ここでの管理のしやすさとは、「**アプリケーションとしての管理のしやすさ**」としています。結論から述べると、この観点においてCloud Runが良いのかなと思っています。Beta版であることを気にしないのであれば、これで十分だと思います（2020年1月7日現在）。

　また、GKEをここで出してないのは私がコンテナ技術に疎いのと、先にCloud Runを触ったからです（ちなみにCloud Runもコンテナサービスです。私は一応以前に勉強していたので、そこそこ振り返って実装できました。ただ、初学者でも基本的にはマニュアルやブログを参考にすればそこまで実装が難しくありません）。

# 比較
　先に比較表を載せます。完全個人的な印象です。

| サービス名       | GAE | GCE | Cloud Function | Cloud Run |
|----------------|:---:|:---:|:--------------:|:---------:|
| 実装しやすさ   |  △  |  ×  |       〇       |     △    |
| 料金の安さ     |  ×  |  ×  |       〇       |     〇    |
| 管理のしやすさ |  〇 |  ×  |        △       |     〇    |

## 実装のしやすさ
　ここでは、「必須知識量の多さ」で比較しています。この場合、Cloud Function以外はソースコード以外に設定ファイル等が必要になります。GAEはインスタンスの発行条件、GCEはそもそもレンタルサーバ、Cloud Runはコンテナサービスなので、ソースコードのみのCloud Functionsと比べるとやや必要知識が多くなりがちです。

## 料金の安さ
　そのままGCPの料金表を見た感じです。
　GAEおよびGCEは動作時間で課金されます。GAEは発行されるインスタンス数および時間で課金されるため、設定を間違えるとパケ死のような状態になります。
　Cloud FunctionsおよびCloud Runはアクセス数で課金されます。ここで、厳密にいえばCloud RunもCPUなどの使用時間で課金されますが、GAEよりも安いという記事がいくつか出ています。

## 管理のしやすさ
　これは簡単に言うと、管理時のフォルダ構成の明瞭さや設定ファイルの少なさです。Cloud Functionsは「関数一つにつき一ファイル」必要になるため、共通的に使用する自作ライブラリがあるとファイル構造が複雑化し始めます。GAEおよびCloud Runでは少なく済ませようと思えばファイルは2～3つ程度になる上、一般的なワークスペースの構造を保ちやすいです。GCEはレンタルサーバなので、こういう意味では論外ですかね。

　こうしてみるとCloud FunctionsとCloud Runだとあんまり違いがないように見えますが、私の場合はコンテナについての知識が少しだけあったので、実装しやすさがあまりデメリットにならないため、Cloud Runの方を採用しています。ですが、少しマニュアルにexampleがあるので、Cloud Runで「△」にしているのも僅差のような裁定だと考えています。Cloud Functionsの真価はどちらかというと「GCPのサービスにイベント処理を追加する」という意味な気がするので、この記事で言うところの「アプリケーションとして」という観点では分が悪いように思います。

# おわりに
　ここで、以上のような比較をしていますが、結局のところどういう風に利用したいかによって選択すると良いと思っています。今回「サーバレス」という設定が選定の幅を狭めています。今までのオンプレをクラウド化などの用途であれば素直にGCEを使うと良かったりします。
【Laravel】 Homestead 環境で一部のページ404 errorが出た時の対策


 年明け久しぶりに仕事に戻り、昨年年末に作ったウェブアプリのサンプルをローカル環境（windows10+Homestead)で動かしてみたら、404エラーが出ました！(-_-;)

具体的に、下記の現象になっています：
1. /login、/homeなどはアクセスできて、一部のルート404エラーです。
2. 404エラーが出たページのルートはちゃんと/routes/web.phpに登録されています。
3. /homeのルートをweb.phpからコメントアウトしても、アクセスできます

 休み直前大丈夫だったのに！と思いながら、数時間をかけっていろいろ調べてやっとページ表示できるようになりました(´；ω；`)ｳｩｩ。
### 下記のこと試してみて、うまく解決できなかった。
- ngnixの設定確認問題がなさそうでした。
- ngnixを再起動してもだめでした。
※そもそもngnixのエラーじゃなかったのに、反省‼
-  ```php artisan view:clear ```
-  ```php artsan config:clear ```
-ブラウザからキャッシュを削除

### 解決方法と手順：
１） laravelのコマンドでルート一覧を確認
 　　 ```php artisan route:list```
   確かに、404エラーのルートは登録されていないようです。昔の別ブランチのルートは登録されています。なぜ？！

２）ルートのキャッシュを削除
　 ```php artisan route:clear```

これでOKでした！

###結論
（１）404エラー出た時、まずlaravelの404エラーかngnixエラーか間違いないように！ngnixエラーの場合はnginxの設定ファイルを確認したら、Homestead.yamlの設定を確認したりしましょう。
（２）laravelの404エラーの場合はまずルートはroutes/web.phpに正しく登録されてるかを確認。正しく登録される場合は、
php artisan route:listでrouteが一覧に出ているかどうかを確認。出なかったら、php artisan route:clearでキャッシュを削除してから、もう一回ページをアクセスしてみる。
CSSLP(Certified Secure Software Lifecycle Professional)に合格するために実施したこと

CSSLP(Certified Secure Software Lifecycle Professional)に合格(2019/12/16)した際に利用した教材と勉強法です。公式トレーニングは受講していません。リーズナブルな金額で入手できる教材と、それを用いた勉強法を紹介します。CSSLPの詳細については[こちら](https://japan.isc2.org/csslp_about.html)を参照。2020/1時点では英語でのテストしかありません。

# 前提条件
これまでの業務で下記のような経験があり、これらはCSSLPに役に立ちそうでした。ネックは運用経験がないこと。
###開発経験
Waterfall、Agileでの開発経験あり。言語はCとJava。テストはUnit TestからRegression Testまで実施。Certified Scrum Master(認定スクラムマスター)。運用経験はなし。
###セキュリティの経験
SAST、DAST、SCA、Fuzzingなどを利用した経験あり。CEH。
###英語
TOEICは800点後半。英語の試験はCEHで経験済み。

# 役に立った学習教材
CSSLPは学習教材がとても少ないのですが、その中で利用した教材を紹介します。結論から書くと、次の2冊のうちどちらか、もしくは両方をやり込むしかありません。

### [CSSLP Certification All-in-One Exam Guide, Second Edition](https://www.amazon.co.jp/gp/product/B07NYH96FB/)
通称AIO。436ページの教科書。Appendixを除けば394ページ。教科書の選択肢がこれか次に挙げる本しかありません。両方を読むことを推奨しますが、どちらか一方を選ぶとなるとこちら。数回の通読は必須だと思います。各章末に10問-20問のサンプル問題があります。本に付属しているWebベースの問題集アプリが優秀。問題集アプリについては後述。
★★★★★(星5がMax)

### [Official (ISC)2 Guide to the CSSLP CBK ((ISC)2 Press)](https://www.amazon.co.jp/gp/product/B00EYRGOMS/)
公式本。755ページの教科書。Appendixを除けば643ページ。ページ数は多いですが図が多いのと文字が大きいので読みやすいです。ページ数はこちらの方が多いのに、体感ではAIOの2/3くらいのボリューム。各章末に20問-30問のサンプルの問題が付いています。アプリ形式の問題集はなく、そこが★1つマイナス。
★★★★☆


## その他の学習資料
基本的には上記しかないと思いますが、私が試してみた上記以外の学習コンテンツや資料です。

### [Cybrary CSSLP Training](https://www.cybrary.it/course/csslp-training/)
Cybraryの無償の6時間弱のコース。無償という点は素晴らしいとは思います。受講と同時に246ページのスライドの資料も入手できるので、受講だけしておくのはありかもしれません。ただし、これだけを受講して合格するとは思えません。いずれかの教科書を読む前に、CSSLPの概要を掴む目的で利用するのが良いと思います。
★★★☆☆

### [Quizlet](https://quizlet.com/)
Flash cardです。Quizletのアプリをスマホに入れて"ISC2Education"で検索してCSSLPのフォルダを見つけてください。100程度の用語があります。ISC2が提供している公式のFlash Cardですので、信頼ができます。重要な用語ばかりですので、教科書を読む前、もしくは読みながら用語を頭に叩き込むという点では使えます。学習の初期段階での利用を推奨。
★★★★☆

### [NIST SP 800-64 rev.2 情報システム開発ライフサイクルにおけるセキュリティの考慮事項](https://www.ipa.go.jp/security/publications/nist/)
NIST SP 800シリーズは教科書の中でもよく言及されますが、特にCSSLPと親和性が高いのがSP 800-64です。必須ではありませんが、日本語翻訳があるので目を通しておくと良いと思います。
★★★☆☆

# 問題集
教科書だけではなく、問題の数をこなしてCSSLP特有の問題の形式に慣れたいところです。が、残念なことにCSSLPはまともな問題集はありません。教科書章末のサンプル問題と付属の問題集アプリを活用することになります。

### [CSSLP Certification All-in-One Exam Guide, Second Edition](https://www.amazon.co.jp/gp/product/B07NYH96FB/)
付属のWebベースのTotal Testerアプリが使いやすいです。テストをカスタマイズすることができ、テストしたい範囲、テスト数、テスト時間を自由に決められます。ドメインごとの正答率を表示してくれるので、どのドメインが弱いのか、学習が必要なのかがわかりやすいです。ただ、MAXでも350問しかないので、答えを覚えてしまうとすぐに勉強にならなくなってしまうことが難点。
★★★★★(既出ですが)

### 教科書章末のサンプル問題
[CSSLP Certification All-in-One Exam Guide](https://www.amazon.co.jp/gp/product/B07NYH96FB/)、[Official (ISC)2 Guide to the CSSLP CBK](https://www.amazon.co.jp/gp/product/B00EYRGOMS/)ともに章末のサンプル問題はそれなりの数があり、比較的良問が多いと思います。正答率の低いドメインは集中して学習し章末のサンプル問題で確認しましょう。CSSLPは問題集がないので、章末のサンプル問題も貴重です。

### Udemyの CSSLP 問題集
CEHではUdemyの問題集が非常に有効でしたが、CSSLPはUdemyでも良い問題集がありませんでした。いくつか試しましたが、明らかにCSSLPの範囲ではない問題が多く出題され、残念ながら使い物になりませんでした。教科書付属の問題集を大切に活用しましょう。

# その他
その他、気になった点など。

### 問題集が少ないので教科書中心で
CSSLPは問題集が無いに等しいので、教科書中心の学習になります。問題集は答えを覚える目的ではなく、自分の弱点を洗い出す目的で使いましょう。

### 試験は長いが心が折れないように
試験は4時間で175問です。途中の休憩用の食事を持ち込みましたが、すべて解答して見直しするとぴったりくらいで休憩する時間はありませんでした。どれだけ勉強したとしても見たことのない用語が出てきたりしますが、焦らず次の問題に進みましょう。難問にはあまり時間をかけずに、正解と思えるものをマークして次に進みましょう。後ろの方に簡単な問題があることもありますので、すべて解答し終えてから見直しても間に合うはずです。
[RHEL7/CentOS7] ログ監視ツール swatch を入れてメール通知してみた

#インストール

EPELリポジトリ追加

```bash
# rpm -ivh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
```

swatch インストール

```bash
# yum install swatch --enablerepo=epel
```

#設定ファイル

ログファイルに「action="tunnel-up"」という文字を検出したときに

- 画面表示する → echo
- メール通知する → mail=

```bash
# vi /root/swatch_fwlog.conf

watchfor /action=\"tunnel-up\"/
    echo
    mail=fukuchan-senpai@sample.org,subject="[SSLVPN] tunnel-up"
```

#手動起動
テストなどで一時的に動作させる場合は、コマンドの引数に`設定ファイル`と`対象ログファイル`を指定し、`perl` から実行します。

```bash
# /usr/bin/perl /bin/swatch -c /root/swatch_fwlog.conf -t /var/log/fwlog &
```

#手動停止
普通に kill して止めます

```bash
# kill プロセス番号
```

#Systemdへの登録

##ユニットファイルの作成
`systemd` でサービス管理するために手動で`ユニットファイル`を作成します。

```bash
# vi /lib/systemd/system/swatch_fwlog.service

[Unit]
Description=swatch for firewall log
After=syslog.target network.target postfix.service

[Service]
ExecStart=/usr/bin/swatch -c /root/swatch_fwlog.conf -t /var/log/fwlog --pid-file /var/run/swatch_fwlog.pid --daemon > /dev/null 2>&1
Type=forking
PIDFile=/var/run/swatch_fwlog.pid

[Install]
WantedBy=multi-user.target
```

##反映
作成した`ユニットファイル`を `systemd` に認識させます。

```bash
# systemctl daemon-reload
```


##自動起動化
```bash
# systemctl enable swatch_fwlog
```

##起動
```bash
# systemctl start swatch_fwlog
```

##ステータス確認
```bash
# systemctl status swatch_fwlog
```

##停止
```bash
# systemctl stop swatch_fwlog
```
LTspiceで複数のパラメータを.stepさせたい

# やりたいこと
LTspiceで、複数のパラメータの組み合わせでstepしたい。

# 背景
複数のパラメータをステップで回したい場合、普通にそれぞれのパラメータに.stepを使用してしまうと、それぞれのパラメータが総当たりとなって、シミュレーションの回数と時間が膨大になってしまいます。

たとえば、
`.step param A 1 2`　(n=2)
`.step param B 3 4`　(m=2)
とした場合、シミュレーションは
`A=1, B=3`
`A=2, B=3`
`A=1, B=4`
`A=2, B=4`
の合計4回実行されてしまいます。(n*m回)

これを、
`A=1, B=3`　(1つめの値どうし)
`A=2, B=4`　(2つめの値どうし)
に絞って実行したい。

# 解決策
`.func`コマンドを使います。

```
.func  sel(x, p0, p1) {sub(x==0)*p0 + sub(x==1)*p1}
.param A sel(x, 1, 2)
.param B sel(x, 3, 4)
.step  param x list 0 1
```

`.func`コマンドで`sel()`関数を定義します。(関数の名前はなんでも良い)

式中の`sub()`は、引数が0.5以下なら`0`、0.5より大きければ`1`を返す関数です。

たとえば、xが0のとき、第一項は`x==0`が`True`(1)なので`sub()`は`1`を返し、第二項は`x==1`が`False`(0)なので`sub()`は`0`を返します。

それぞれを、引数`p0`, `p1`と掛けて足すことで、`sub()`が`True`になる項の引数のみが残り、パラメータxの値によって1つの値を抜き出すことができるというわけです。

あとは、A, Bそれぞれの数値を定義し、Xを0→1で`.step`させればOK。

パラメータの組み合わせを増やしたければ、関数の引数を増やせば対応可能です。

# 参考
こちらの動画を参考にさせてもらいました。
伝説のSpice : LTSpiceの使い方 小技その11
https://www.youtube.com/watch?v=sT_qJ-84haQ&feature=youtu.be
vuetify-material-dashboardをPWA対応してみた

## はじめに

<img width="1440" alt="スクリーンショット 2020-01-07 13.56.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106459/8b5037e5-5d2b-2690-c533-ba3271e83f64.png">

[vuetify-material-dashboard](https://www.creative-tim.com/product/vuetify-material-dashboard
)はvue+vuetifyベースで作成された管理画面用のフレームワークです。
このフレームワークが、初期状態だとPWA対応していなかったため、pwa化した時の手順です。

 
## PWA化に必要なモジュール追加
* vuetify-masterial-dashbordのpackage.jsonがあるディレクトリで下記を実行

```bash
yarn add --dev @vue/cli-plugin-pwa
yarn add register-service-worker
```

## ソースコード修正
* `src/router/index.js` と `src/router/router.js` の変更
* buildしたファイルを読み込んだ際に、redirectされた/dashbordを読み込めなかったためです。
（redirectを書き直せば、問題なさそうですが、一旦以下の対応です。）

### index.js

```javascript:変更前
routes: paths.map(path => route(path.path, path.view, path.name)).concat([
　　{ path: '*', redirect: '/dashboard' }
]),
```

```javascript:変更後
routes: paths.map(path => route(path.path, path.view, path.name)),
```

### paths.js

```javascript:変更前
  path: '/dashboard',
  // Relative to /src/views
```

```javascript:変更後
  path: '/',
  name: 'Dashboard',
```

## ファイルの追加

### public/img/icons/

- icons配下にはアイコン画像が複数枚（iOSやAndroid用にサイズ違いで）
- manifest.jsonにアイコン画像のパスを指定するので、それに合わせて適当に用意する。

### manifest.json

```json:public/manifest.json
{
    "name": "vuetify-materila-dashbord",
    "short_name": "vm-bord",
    "icons": [
      {
        "src": "./img/icons/ic_launcher.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "./img/icons/Icon-App-20x20@3x.png",
        "sizes": "60x60",
        "type": "image/png"
      },
      {
        "src": "./img/icons/Icon-App-29x29@3x.png",
        "sizes": "87x87",
        "type": "image/png"
      },
      {
        "src": "./img/icons/Icon-App-40x40@3x.png",
        "sizes": "120x120",
        "type": "image/png"
      },
      {
        "src": "./img/icons/Icon-App-60x60@3x.png",
        "sizes": "180x180",
        "type": "image/png"
      }
    ],
    "start_url": "./index.html",
    "display": "standalone",
    "background_color": "#FFFFFF",
    "theme_color": "#4e342e"
  }
```

### robots.txt

```text:public/robots.txt
User-agent: *
Disallow:
```

### registerServiceWorker.js

```javascript:src/registerServiceWorker.js
/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}
```

以上です。
Kerasで作ったNNモデルにおける特徴量の重要度を出す（Permutation Importance）

# はじめに
LightGBMでよく特徴量の重要度を見るのですが、NN系のモデルでもやりたいなとずっと思っていました。
知り合いからPermutation Importanceなるものを聞いたので、実際に利用してみました。
半分自分用の覚書です。

# Permutation Importanceとは
要はデータ項目を一つづつシャッフルし、「シャッフルしたときにスコアが下がるデータ項目」=「重要度が高い」とし、各データ項目の重要度を出してくれます。

# やってみた
使うライブラリは[eli5のPermutationImportance](https://eli5.readthedocs.io/en/latest/blackbox/permutation_importance.html)です。

Kerasで作成したモデルをPermutation Importanceで出す場合は、sklearnのラッパーを使う必要があります。
とりあえず回帰でやってみました。
またPermutationImportanceで処理された計算結果から特徴量をリストで表示するために、
[SelectFromModel](https://scikit-learn.org/stable/modules/generated/sklearn.feature_selection.SelectFromModel.html#sklearn.feature_selection.SelectFromModel)を使いました。

```
import keras
from eli5.sklearn import PermutationImportance
from keras.wrappers.scikit_learn import KerasClassifier, KerasRegressor

# 適当なデータを使ってください。
X = ...
y = ...

def create_model():
    model = keras.models.Sequential([
        keras.layers.Input(shape=(X.shape[1],)),
        keras.layers.Dense(50, activation='relu'),
        keras.layers.Dense(25, activation='relu'),
        keras.layers.Dense(1, activation=None)
    ])
    model.compile(optimizer='adam', loss='mse')
    return model

# sklearnのラッパーを使ってモデル作成
my_model = KerasRegressor(build_fn=create_model, epochs=100, batch_size=64, verbose=0)    
my_model.fit(X,y)

# 重要度の計算
perm = PermutationImportance(my_model, random_state=1).fit(X,y)

# 重要度の出力
X_cols = np.array(X.columns.tolist(), dtype='str')
eli5.show_weights(perm, top=2500, feature_names = X_cols)

# 閾値を指定してスコア向上に寄与している特徴量を出力（以下の場合は0.001以上のスコア向上に寄与している特徴量に絞り込んでいる）
from sklearn.feature_selection import SelectFromModel
sel = SelectFromModel(perm, threshold=0.001, prefit=True)
print(list(X.iloc[:, sel.get_support()].columns))

```
Goの内部パッケージ関係をコミットごとに可視化する

![call-aimation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479931/3ec1a7e5-ce6a-92cd-0a86-8ace5e944941.gif)  
使用したプログラム: [bxcodec/go-clean-arch](https://github.com/bxcodec/go-clean-arch)

# 概要
1. Goの内部パッケージの関係が複雑なプログラムは理解するのが大変
- 可視化したい
- せっかくだからコミットごとに可視化してアニメーションにしてみる

# 準備
- [Go](https://golang.org/)
- [Python3](https://www.python.org/)
- [Graphviz](https://www.graphviz.org/)
- [ImageMagick](https://imagemagick.org/index.php)

# コード
- [st34-satoshi/for-each-commit](https://github.com/st34-satoshi/for-each-commit/tree/call-graph)

# やったこと
1. コミットログを取得
2. コミットごとにコマンドを実行
3. Goの内部パッケージ関係をdotファリルに出力し、gifを作成
4. コミットごとのgifのサイズを揃えて、アニメーションを作成

## 1. コミットログを取得
`git log --pretty=oneline` で取得できる。  
pythonでかくと  

```python
res = subprocess.check_output(["git", "-C", path_dir, "log", "--pretty=oneline"])
```
コミットのハッシュ値だけを取得したい(ハッシュ値+コメントになっている)。空白で区切って一番最初のハッシュ値だけを取得してリストにした。

## 2. コミットごとにコマンド実行
コミットごとにresetしてコマンドを実行した(reset以外にいい方法がある？？)。  

```python
for commit in log_list:
    subprocess.call(["git", "-C", path_dir, "reset", "--hard", commit]) |
    command(path_dir)
```

コマンドを実行するときはプログラムのあるディレクトリのパスを使用する。

## 3. Goの内部パッケージ関係をdotファリルに出力し、gifを作成
### 3.1. dotファイル作成
ここが一番難しい。
[parser](https://golang.org/pkg/go/parser/) というとても便利なパッケージがあり、ファイル内でimportしているパッケージを取得してくれる。これをファイルごとからパッケージごとにまとめれば良い。
#### 困ったこと
- ファイルごと --> パッケージごと  
parserはファイルのパッケージ名も取得してくれるが、別のディレクトリに同じパッケージ名があると区別できない。ディレクトリを保存したが、もっと簡単な方法がありそう
- 外部パッケージの区別  
内部パッケージ(自分で作ったもの)だけを対象にしたかったがどうやって区別すればいいか？？「githubってあれば外部」みたいにしたが、あまりいい方法ではなさそう。

### 3.2. dotファイルからgifファイル作成
graphvizを使用する。
`dot -T gif sample.dot -o sample.gif`

## 4. コミットごとのgifのサイズを揃えて、アニメーションを作成
### 4.1. gifのサイズを揃える
アニメーションにするときファイルごとのサイズが違うと大きいサイズは切れてしまう。
`mogrify -resize (width)x(height)! *.gif`
指定するサイズはいい感じのを選ぶ。
### 4.2. アニメーション作成
ImageMagickを使用する。
`convert -delay 5 -loop 0 *.gif animation.gif`

# 参考にしたサイト
- [Gitディレクトリ外からgitコマンドを実行する](https://qiita.com/paty-fakename/items/d592806b6a4d5d2a4b55)
- [Pythonでsubprocessを使ってコマンドを実行する方法](https://qiita.com/ssaito/items/cddd12dc762336484765)
- [package parser](https://golang.org/pkg/go/parser/)
- [画像の拡大・縮小](https://imagemagick.biz/archives/93)
- [ アニメーションGIF ImageMagick編](http://www.protein.osaka-u.ac.jp/rcsfp/supracryst/suzuki/jpxtal/Katsutani/gif1.php)
- [st34-satoshi/for-each-commit](https://github.com/st34-satoshi/for-each-commit)
- [st34-satoshi/call-graph](https://github.com/st34-satoshi/call-graph)

# これから
コミットごとにグラフの表示位置がバラバラになってしまいアニメーションにしたとき見にくい。どうにか揃えたい。
【Python】リストの扱い

#リスト
**リストとは変数やデータをひとまとめにしたもの**。
イメージ的には複数の変数をつくるような感じ。

#宣言
宣言の仕方は、**変数名=[]**。

```python:list.py
list=[]
#これでリストの宣言ができる
#リストの中身は空
```

値を持ったリストを直接生成することもできる。

```python:list.py
list=[1,2,3,4,5]
#これでリストの宣言ができる
#リストの中身は[1,2,3,4,5]
```

#要素へのアクセス
変数名[x]でx番目の要素にアクセスできる。
（※要素は**０番目から始まる**。）
また、変数名[-1]で最も後ろの要素にアクセスできる。

```python:list.py
list=[1,2,3,4,5]
print(list[0])
#output=1
print(list[-1])
#output=5
```
#要素の追加
**変数名.append()**で要素を追加できる。追加された要素は一番最後の要素となる。

```python:list.py
list=[1,2,3,4,5]
print(list)
#output=[1,2,3,4,5]
list.append(0)
print(list)
#output=[1,2,3,4,5,0]
```
#要素数の取得
len(変数名)でリストの要素数を取得できる。

```python:list.py
list=[1,2,3,4,5]
print(len(list))
#output=5
```

#リストのリスト
リストには変数が格納できることを示してきたが、その変数としてリストを選ぶことも可能。
宣言方法は同様である。（以下参照）

```python:list.py
list1=[1,2,3,4,5]
list2=[-1,-2,-3,-4,-5]
list=[list1,list2]
#list=[[1,2,3,4,5],[-1,-2,-3,-4,-5]]
```
この要素にアクセスすることを考える。
**アクセス方法はlist[x][y]である。**
・ｘは何個目のリストにアクセスするかを表す。
・ｙはｘ個目のリスト内でｙ番目の要素にアクセスすることを表す。
例えば、上の例でlistをlist1として扱いたい場合は以下のような記述をすればい良い。

```python:list.py
list1=[1,2,3,4,5]
list2=[-1,-2,-3,-4,-5]
list=[list1,list2]
print(list[0])#0番目のリストにアクセス
#output=[1,2,3,4,5]
```

次にある特定の要素（ここでは-2）にアクセスすることを考える。
－２は、list2の１番目の要素(０番目の要素が－１)であるので、x=１,y=１とすることでアクセスできる。

```python:list.py
list1=[1,2,3,4,5]
list2=[-1,-2,-3,-4,-5]
list=[list1,list2]
print(list[1][1])#1番目のリストにアクセスし、そのリストの1番目の要素にアクセスする
#output=-2
```

#参考：等差列リストの作成

**range()関数**を使うことで等差列リストを作成することが出来る。
**range()関数**はrange(x,y,z)という記述をし、xがスタート値(デフォルト値=0)、y-1が終了値、zが増加値
である。
例えば、０～１００までの整数を要素に持つリストは次のように書ける。

```python:list.py
lst=list(range(101))
#list=[0,1,2,...,99,100]
```

また１～１０までの数で偶数だけの列を作るとすると、

```python:list.py
lst=list(range(2,11,2))
#list=[2,4,6,8,10]
```
配列の中にネストしたハッシュがある場合の取り出し方

課題で配列の中にネストされたハッシュを取り出すという問題が出題され時間内に課題を解けなかったので健忘禄として。

```ruby:test.rb
user_data = [
  {
    user: {
        profile: {
            name: 'George'
        }
    }
  },
  {
    user: {
        profile: {
          name: 'Alice'
        }
    }
  },
  {
    user: {
        profile: {
            name: 'Taro'
        }
    }
  }
]
```

この配列の中にあるユーザーのnameの値を取り出して一覧表示をするという内容で

```shell-session
George
Alice
Taro
```

このように出力させるには

```ruby:test.rb
puts 変数名[:key1][:key2][:key3]
```
のように配列ないのキーに個別にアクセスしていかなければならないようで、
課題のように配列の中にuserが3つありその構造が同じであればeach文で上記の処理を個別に行ってあげれば良い。

```ruby:test.rb
user_data.each do |user|
  puts user[:user][:profile][:name]
end
```
ネストされたハッシュが配列の中にあるデータをみるのが初めてで検索の仕方も悪かったのもあり時間内に解決方法を見つけられませんでした。
勉強不足ですね。
flexboxで最終行の要素の幅を揃える小技

# 悩み事と結論

CSSのFlexboxは便利ですが、下のようなことでお悩みになったことはありませんか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281108/2bfab3a0-bfbc-a109-209a-275eecef4204.png)

__レスポンシブデザインなため1列の要素数をピッタリ揃えられず、最終行の要素だけ幅が変わってしまう悩みです。__

実はこの問題、HTMLだけで簡単に解決できます。

__1列に並べたい最大個数だけ、末尾に下のようなadjuster要素を追加してください。__
この例の場合1列は最大4個なので、末尾に4つ足しています。

```html

    <div class="root">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="adjuster"></div>
      <div class="adjuster"></div>
      <div class="adjuster"></div>
      <div class="adjuster"></div>
    </div>
```

```scss

.item, .adjuster {
  flex-basis: calc(25% - 10px); // ←adjusterにも要素と同じ幅を持たせてください。
  min-width: 200px;
  flex-grow: 1; // ←伸縮も指定してください。
  flex-shrink: 0;
  margin-left: 10px; // ←同じ左右マージンを持たせてください。
}

.item {
  height: 50px;
  margin-top: 50px; // ←上下マージンは要素のみに持たせてください。高さを持つと、余りが出た際にズレます。
}

.adjuster {
  height: 0; // ←未指定で0なら省略できます。
}
```

このCSSを当てると、最終行の余り幅をadjusterが吸収してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281108/0128b6c6-32b6-c193-3189-a9c51689ca05.png)

また、余った分については、adjusterの高さが0なので影響しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281108/5907bb5d-f046-e4ba-56f1-92b194167380.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281108/f8b5acfa-830b-8962-f36e-a3b4814349d7.png)

親のサイズもこの通り、余った分は影響しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281108/ab293141-e082-477c-bf04-e07cfe6af513.png)

画面幅が変わって1列の個数が変わってもこの通りです。
#PowerApps #CDS フィールドの計算についてひも解いてみる。

# あけましておめでとうございます

本年も何卒よろしくお願いいたします。
さて、新年1発目の記事です！
気合い入れて書いてみます。


# 計算・ロールアップ

Common Data Service (CDS) の フィールドプロパティには
こういうのがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/a435617c-d269-ed9e-d138-162c2f5fee1b.png)

計算

今回はこちらについてまとめてみようと思います。

## 計算

Docsのページはこちらになります
[計算フィールドを定義して手動計算を自動化する](https://docs.microsoft.com/ja-jp/powerapps/maker/common-data-service/define-calculated-fields)

Docsを見てみると・・・
単純な四則演算を行ったり
関数を用いて自動計算をするもののようです。
また、条件に応じて処理するなんてこともできるようですね。

文字列結合だとこのように指定するみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/85f21d4e-df06-34f6-14c1-ecb4530aad89.png)

数値計算だとこんな感じですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/5b851b38-bcef-4e89-a40d-1e95ca39e6c8.png)

実際にデータを入れてみるとこのような感じで自動計算されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/778ebcbc-d613-6144-38ba-d8469d10674c.png)


次回はロールアップについてまとめてみます。
※本当は一緒にしようと思ったんだけどちょっと断念💦
GitHub Actions で Skip CI を実現する

追記: 2021-02-09, GitHub Actions Runner の方で実装されたので、この記事の方法は役目を終えました。`[skip cd]` のように独自キーワードを定義したい場合には引き続きこの方法が使えます。

[GitHub Actions: Skip pull request and push workflows with [skip ci] - GitHub Changelog](https://github.blog/changelog/2021-02-08-github-actions-skip-pull-request-and-push-workflows-with-skip-ci/)

---

GitHub Actions でも CircleCI や Netlify みたいに `[skip ci]` を実現する方法を紹介します。



## Workflow の例

結論から言うとこんな感じの Workflow を作ればできます。

```yaml
name: Test

on: [push]

jobs:
  skipci:
    runs-on: ubuntu-18.04
    steps:
      - run: echo "[skip ci] ${{ contains(github.event.head_commit.message, '[skip ci]') }}"

  test:
    runs-on: ubuntu-18.04
    if: contains(github.event.head_commit.message, '[skip ci]') == false
    steps:

```

(2020-07-04 追記) 上の書き方が安定しています。下のような書き方もできますが、たまに上手くいかないケースに遭遇しました。

```yaml
name: Test

on: [push]

jobs:
  skipci:
    runs-on: ubuntu-18.04
    outputs:
      is_skip: ${{ steps.is_skip.outputs.is_skip }}
    steps:
      - name: Set is_skip
        id: is_skip
        run: echo "::set-output name=is_skip::${{ contains(github.event.head_commit.message, '[skip ci]') }}"
      - run: echo "[skip ci] ${{ steps.is_skip.outputs.is_skip }}"

  test:
    runs-on: ubuntu-18.04
    needs: skipci
    if: ${{ ! needs.skipci.outputs.is_skip }}
    steps:
    ...
```

あとはコミットメッセージを `ci: Add skip job [skip ci]` とかにして Push すれば skip job だけが実行されるはずです。簡単にカスタマイズできるので好きな文字列をトリガーとして設定できます。`[skip cd]` (Continuous Deployment) とか?

skip job を入れておかないと Job が開始されません。(Job が一つだとダメということです。) 今の GitHub Actions の仕様だとこの回避策が必要みたいです。Private repository だと実行時間をなるべく節約したいので、これくらいは我慢します。

<img width="631" alt="GitHub Actions で Skip CI を実現する方法" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285675/4c41e765-ad6e-a476-7640-0c91740df02e.png">

(2020-04-23 追記) スキップされた Job はちゃんとその旨がログとして表示されるようになりました。

<img width="345" alt="Screen Shot 2020-04-23 at 18.24.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285675/ea78567c-7813-24c7-9f16-09972830c119.png">

ちなみに `paths-ignore` を設定すれば「変更が `**.md` のみであればその Workflow をスキップする」ことができるのであわせて仕込んでおくと良いでしょう。また、 `paths` という項目もあり、こちらは「 `Dockerfile` の変更に対してのみ Workflow を実行する」のように設定できます。

```yaml
on:
  push:
    branches:
      - master
    paths:
      - 'Dockerfile'
    paths-ignore:
      - '**.md'
```



## pull_request ではできません

この方法では `pull_request` event の時に commit の情報が取れないので Pull Request に対しては使えません。今のところ push event に対してのみ有効な方法です。



## これに至るまでの経緯

GitHub Actions Beta v2 の頃から試行錯誤していて、昨日これに落ち着いた。[GitHub Actions for GitHub Pages](https://github.com/peaceiris/actions-gh-pages) の custom commit message option を実装している時に `head_commit ` を見つけて、そう言えば Skip CI を `github.event.commits[0].message` でやっていたことを思い出し、今は Job レベルの if がサポートされているおかげで昔よりすっきりした。(昔は Step ごとにこの if を書いていた。)
パッケージ依存関係が修復できない時の対処法

まずは　dpkg --audit　で問題を確認する。
その後、それらのパッケージを強制的にアンインストールした後で再インストールする

sudo dpkg -P --force-depends パッケージ名
（ただ、パッケージや依存関係が壊れてたりすると、消えてくれないことがあるっぽい。

–force-remove-reinstreq オプションをつけると消えてくれた。）

と実行してアンインストールした後、

sudo apt-get install パッケージ名

で再インストール

sudo dpkg --audit

と実行して何も表示されなくなれば問題は解決のはずです。
UIWidgetsでAndroidのBackKey対応

#はじめに
UIWidgetsでダウンロード確認Popup等を出した時にAndroidのBackKeyでPopされて
正常に処理されない事があったのでその対応の備忘録。

#対応
表示したいWidgetを`WillPopScope`で囲ってあげればOKだった。

#コード
```C#
public static Widget DisableBackKey(Widget 表示したいWidget)
{
    IPromise<bool> promise = new Promise<bool>();
    return new WillPopScope(child: 表示したいWidget, onWillPop: () => promise);
}
```
HTML要素の操作方法をVanillaJSとjQueryで比較

jQueryの時代は終わりなんていわれて久しいですが、まだまだ業務ではバリバリ使っている、止むを得ず使っているという方が多いかと思います。VanillaJS（素のJavaScript）ではこう書くけどjQueryではどう書くんだっけ？という場面がしばしば。いまからわざわざいちからjQueryを覚えたくないという人向けにサイト制作時によく使う処理をまとめていこうかと思います。主に自分のメモ用。

## スタイルを変更する
JSで動的にスタイルを指定する方法です。ここでは文字を大きくします。

```vanilla.js
const target = document.querySelector('.hoge');

target.style.fontSize = '20px';

```

```jquery.js
const target = $('.hoge');

target.css('fontSize', '20px');
```

### jQueryで同時に複数のスタイルを変更したいとき

```jquery.js
const target = $('.hoge');

target.css({'fontSize': '20px', 'color': 'red'});
```

#### スタイルを変更する上での注意点
プロパティ名はキャメルケース（大文字で単語を繋げる）です。cssのときのようなケバブケース(ハイフンで単語を繋げる)ではないので注意しましょう。

```js
// この例はVanillaJSをもとにしています
// NG
target.style.font-size = '20px';
// OK
target.style.fontSize = '20px';
```

## クラスを追加
あるクラスを追加します。`open`というクラスを追加してみましょう

```vanilla.js
const target = document.querySelector('.hoge');

target.classList.add('open');

// 複数クラスを追加する場合
target.classList.add('open', 'active'); // コンマ区切り

```

```jquery.js
const target = $('.hoge');

target.addClass('open');
// 複数クラスを追加する場合
target.addClass('open acitve'); // 半角スペース区切り
```

### クラスを追加する時の注意点
追加したいクラスがすでに要素のclass属性に存在した場合は、無視されます。**クラス名に「.（ドット）」は不要**です。

```js
// この例はVanillaJSをもとにしています
// NG
target.classList.add('.open');
// OK
target.classList.add('open');
```

## クラスを削除
あるクラスを削除します。`open`というクラスを削除してみましょう

```vanilla.js
const target = document.querySelector('.hoge');

target.classList.remove('open');

// 複数クラスを削除する場合
target.classList.remove('open', 'active'); // コンマ区切り

```

```jquery.js
const target = $('.hoge');

target.removeClass('open'); 
// 複数クラスを削除する場合
target.removeClass('open acitve'); // 半角スペース区切り
```

### クラスを削除するときの注意点
存在しないクラスを削除しようとしてもエラーはスローされません。

## クラスを切り替え
あるクラスを切り替えます。切り替えるとは、

- 切り替えたいクラスがなかったら追加
- 切り替えたいクラスがすでにあれば削除

という動作のことをいいます。

`open`というクラスを切り替えてみましょう

```vanilla.js
const target = document.querySelector('.hoge');

target.classList.toggle('open');

```

```jquery.js
const target = $('.hoge');

target.toggleClass('open'); 
```

## クラスがあるかどうか判定
openというクラスがあるかどうか調べます。

```vanilla.js
const target = document.querySelector('.hoge');

console.log(target.classList.contains('open')); // true

```

```jquery.js
const target = $('.hoge');

console.log(target.hasClass('open')); // true
```

## 複数要素に対して同一の処理をする
hogeというクラスがついた要素に対してactiveというクラスを追加してみましょう。

```vanilla.js
const target = document.querySelectorAll('.hoge');

target.forEach((index) => {
    index.classList.add('active');
});

```

```jquery.js
const target = $('.hoge');

target.each((index, elment) => {
    $(elment).addClass('active');
});
```
### 複数要素に対して同一の処理をするうえでの注意点
VanillaJSの`forEach`とjQueryの`each`では引数の中身がそれぞれ違うので注意です。

```forEach.js
// 第一引数が要素
// 第二引数がインデックス
target.forEach((element, index) => {
  // 処理
});
```
```each.js
// 第一引数がインデックス
// 第二引数が要素
target.each((index, element) => {
  // 処理
});
```
Vuetifyのv-messages

Vuetifyには`v-messages`というメッセージ表示のコンポーネントがあります。
`v-text-field`などで`error-messages`や`success-messages`を設定すると`v-messages`コンポーネントを使って表示されます。
しかし、`v-messages`自体は公式サイトのドキュメントには説明がありません。
通常は他のコンポーネントに含まれる形で使われるからでしょう。
それでも、`v-messages`単体で使いたい場合もあります。
今回は`v-messages`単体での使い方をまとめました。

使用するVuetifyは、
v2.2.1
です。

https://vuetifyjs.com/en/getting-started/quick-start

```sh
$ vue create my-app
$ cd my-app/
$ vue add vuetify
$ npm run serve
```

<img width="1179" alt="スクリーンショット 2020-01-07 11.58.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123511/faf84c63-1f42-d58f-09e7-6b5435778f32.png">

`src/components/HelloWorld.vue`を書き換えます。
`v-messages`の`props`は`value`があります。
重要な点は、`value`に渡されるデータは文字列の配列です:bell:
参照 （`node_modules/vuetify/src/components/VMessages/VMessages.ts`）

```src/components/HelloWorld.vue
<template>
  <v-container>
    <v-row>
      <v-col>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-messages :value="messages"></v-messages>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'HelloWorld',

  data: () => ({
    messages: [
      'Hello!!',
      'Good Bye!!',
      'Good Night.'
    ]
  }),
};
</script>
```

```sh
$ npm run serve
```

<img width="1179" alt="スクリーンショット 2020-01-07 12.18.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123511/b8d8399d-19be-80c1-947b-83bcc53e8d90.png">

Have a good Vuetify life:beer:
Mix-inはやめてくれ。「関数的モジュール」だ！

# TL;DR

- Mix-inは危険な機能だ
- Mix-inは必要なシーンにだけ使おう
- 関数だけを提供するだけのモジュールを作るのが、弊害が少なくシンプル

# Mix-in は弊害が多い

Mix-inはRubyの基本的な機能であり、入門書でも序盤で紹介されます。

それゆえか**単に処理をクラス間で共有するためだけにMix-inを使おうとしているのをしばしば見かけます。**

実際には、Mix-inにはうかつに使うと後々痛い目に会う機能であり、**大抵のケースではMix-inを使うのは適切ではありません**。

# 落とし穴1: インスタンス変数やメソッドが上書きされる

`include`がやっているのは、「単にMix-inのメソッドをクラスにコピーする」ことだけです[^1]。

なので**同じ名前のメソッドをクラス側で定義すると、Mix-inのメソッドを警告なしに上書きしてしまいます**。同様にMix-inのインスタンス変数を、クラス側で参照したり変更したりできてしまいます。

```ruby
module HttpRequestable
  def get(uri)
    request(:get, uri)
  end

  private

  def request(http_method, uri)
    # HTTPリクエストする処理
  end
end

class StoreAPI
  include HttpRequestable

  ...

  # 商品の入荷をリクエストする機能を追加しよう！
  # (実はHttpRequestableのメソッドを上書きしてしまっている)
  def request(product_id, count)
  end
end
```

[^1]: 掘り下げるともっと複雑でしょうが、基本的な理解としては、「メソッドをコピーするだけ」。

# 落とし穴2: メソッドの関係が複雑になる

クラスからMix-inのメソッドを呼び出せるだけでなく、Mix-inからクラスのメソッドを呼び出したり、Mix-inから別のMix-inのメソッドを呼び出すことができるため、

```
クラスのメソッド => Mix-in Aのメソッド => Mix-in Bのメソッド => クラスのメソッド => ...
```

のような複雑な参照関係が生じてしまうことがあります。

呼び出しが適切に管理されていれば[Template Method パターン](https://ja.wikipedia.org/wiki/Template_Method_%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)と呼べるのですが、

> おっ、親クラスの〇〇っていうメソッドを呼べば動かせるぞ。よし！！

と、深く考えずに呼んでしまうことが、稀によくあります。

# 落とし穴3: メソッドの定義場所が分かりにくい

最近はIDEが良くなったので問題になりにくいのですが、includeするモジュールが増えてくると、メソッドの定義箇所がわかりにくくなりがちです。

Railsの[ActionMailer::Base](https://github.com/rails/rails/blob/master/actionmailer/lib/action_mailer/base.rb
)には**12個のモジュールがincludeされている**のですが、この中から`relative_url_root`の定義箇所をIDEなしで見つけるのは一苦労です。

# 落とし穴4: 確信が持てない

最大の問題は、上記のような落とし穴を踏んでいないか確信を持てないことです。Rubyは動的言語なので、静的なチェックが難しく、

> これは private メソッドだから、変更しても安全だな！！

と思っていたら、実はMix-inで誤って呼び出していないとも限らないのです。

# そこで「関数的モジュール」

(以下の「関数的モジュール」は私の造語です。もっと適切な用語があるのかもしれませんが、調べ方が悪いのか見つからなかったので、ここでは「関数的モジュール」と呼びます）

**関数的モジュール**とは、特異メソッドだけを提供するモジュールのことです。

```ruby
module HttpRequestable
  class << self
    def get(uri)
      request(:get, uri)
    end

    private

    def request(http_method, uri)
      # HTTPリクエストする処理
    end
  end
end
```

使うときは、includeせずメソッドを直接呼び出します。

```ruby
class StoreApi
  # メソッド名が被っても大丈夫！！
  def request 
    HttpRequestable.get(uri)
  end
end
```

関数的モジュールでは、Mix-inのような問題は起きません。

- インスタンス変数を使わない（使えない[^2]）
- メソッドがコピーされることが無い
- クラス側のメソッドを呼び出すことがない（できない）
- どのモジュールのメソッドを呼んでいるかは明らか

[^2]: インスタンス変数を使うこともできるが、Mix-inとは振る舞いが異なるので、Mix-inでのような問題は起きません。

# それでもMix-in を使うケース

そうはいっても、Mix-inを定義するのが便利なケースもあります。

Mix-inを定義する際には**Template Method パターン**として正しく定義することを心がけましょう。

具体的には・・・

- Mix-inがクラスのどのメソッドを呼ぶか明らかにする
- クラスからはMix-inのどのメソッドを呼んでよいのか明らかにする
- インスタンス変数を避ける
- privateメソッドを避ける（RubyのprivateはC++やJavaのprivateと異なることに気をつける）
Nexus7でyoutubeの表示が回転しなくなったときの対処方法

# 前置き

先代のNexu7をYoutube再生機として使いたいなー、と思ってとりだしてみたら、
横表示が出来なくなってた。タブレットを横に倒してもYoutubeが横表示ならない。
というか、そもそもホーム画面が横表示に成らない。
自動回転はOnにしているのに。

Googleさんに「nexus7 回転しない Youtube」で聞いて（検索）みると、
出るわ出るわ、同じ症状が。
「設定箇所すら消えた」とかお前は俺か。
どうにも、「HWセンサーが壊れた」って現象らしい。

何か上手い対処方法は無いか？と探して見つけた、こちらの記事を。
→ http://sutara79.hatenablog.com/entry/2015/01/29/115023

# Nexus7でYoutubeアプリ利用時のみ横表示にする方法

「Rotation - Orientation Manager」というアプリで
回転（縦横の表示モード）を直接制御してやればよい、
って**解法**。
さすれば、回転センサーが物理的に壊れてようが関係ない。

具体的には、次のように制御を設定する。
    * デフォルトは「縦」表示
    * Youtubeは「横」 表示
※Youtubeから抜け出たときに、「縦」に戻す事を目的としてデフォルトを明示的に設定する。

Rotationアプリ起動時のセットアップ画面。
一番上のタイル（「START」がある）を押すと制御が始まる。
![https://gyazo.com/0a2ffe8ca4bbf3e8e75d4bf52a9b8fb2](https://gyazo.com/0a2ffe8ca4bbf3e8e75d4bf52a9b8fb2.png)

上記の2番目のタイル「Global orientation」からデフォルト設定に飛べるので「縦」を設定する。
![https://gyazo.com/e54248ca95de28c734a7afff2d953d0d](https://gyazo.com/e54248ca95de28c734a7afff2d953d0d.png)

続いて3番目のタイル「App orientation」から、アプリケーション単位の設定に飛べるので、Youtubeを選んで「横」に設定する。
![https://gyazo.com/c731eba16e7c06e57b512a714d9678e1](https://gyazo.com/c731eba16e7c06e57b512a714d9678e1.png)
![https://gyazo.com/677bf73b7609db306769533b0d831cfe](https://gyazo.com/677bf73b7609db306769533b0d831cfe.png)



後から再設定するときは、「Home＞Defaut」でデフォルト設定を、「Configuration＞App」でアプリケーション単位の設定を、それぞれ変更できる。
![https://gyazo.com/c039cbb9e8038f9980c6bf57265b0d5a](https://gyazo.com/c039cbb9e8038f9980c6bf57265b0d5a.png)

![https://gyazo.com/15db6f64b849090f1db2ea83276a9cf2](https://gyazo.com/15db6f64b849090f1db2ea83276a9cf2.png)
![https://gyazo.com/91c9b064c5b509e67bcbcf746a82abee](https://gyazo.com/91c9b064c5b509e67bcbcf746a82abee.png)


以上ー。
【異常検知】深層距離学習の最新手法を使ってみる

以前に、**深層距離学習**を使い[「画像の異常検知」](https://qiita.com/shinmura0/items/06d81c72601c7578c6d3#%E3%83%99%E3%83%B3%E3%83%81%E3%83%9E%E3%83%BC%E3%82%AF)を行いました。
その後、**深層距離学習の最新手法**「AdaCos」が登場しました。

本稿では、AdaCosを「異常検知」に適用し簡単なベンチマークを行いたいと思います。
コード全体は[こちら](https://github.com/shinmura0/DeepAnomalyDetection_benchmark/blob/master/AdaCos_benchmark.ipynb)

※こちらは[Pythonデータ分析勉強会#15](https://pythondata.connpass.com/event/159662/)の発表資料です。

#結論から
AdaCosを異常検知に適用することで、以下が分かりました。

+ 精度はArcFaceと同等
+ パラメータのチューニングが不要になるのがありがたい

#AdaCos
AdaCosは深層距離学習の最新手法といいながら、2020年1月現在、論文掲載後、半年以上も
経っています。しかし、私が知る範囲では「純粋な深層距離学習」の枠では、未だに
SOTAだと思われます。

AdaCosとは、ArcFaceなどを主体にした手法であり、ArcFaceなどで用いられるパラメータを
自動的に決める手法です。ArcFaceはパラメータの選択次第で精度が劇的に変わるため、
パラメータのチューニングが非常にシビアでした。しかし、AdaCosを導入して自動的に
パラメータを決められるおかげで、このチューニング作業から解放されます。

さらに、精度も上がることが確認されており、作業能率と精度が向上することから非常に
有用性の高い手法です。詳しくは、以下の記事を参考にしてください。

[AdaCos: Adaptively Scaling Cosine Logits for Effectively Learning Deep Face Representationsを読んだ](https://qiita.com/ninhydrin/items/797a308c864e9238c71e)

##制約
AdaCosには、FixedとDynamicの二種類があります。
本稿で用いる手法は「Fixed AdaCos」とします。

また、AdaCosはクラス数が3以上のときのみ適用できます。
これは[自己教師あり学習](https://qiita.com/daisukelab/items/e0ff429bd58b2befbb1b)を適用する際に、ネックになってきますが、そこの考察は
[次回の記事](https://qiita.com/shinmura0/items/54585fccbb20cb2879fd)で行います。今回行う実験はクラス数が9のため、ここは問題になりません。

#実験
[以前に行った実験](https://qiita.com/shinmura0/items/06d81c72601c7578c6d3#%E3%83%99%E3%83%B3%E3%83%81%E3%83%9E%E3%83%BC%E3%82%AF)と同じ条件で実験を行います。

AdaCosのコード自体はArceFaceのものとほぼ同じです。
ただ、パラメータの与え方をAdaCos流に変更しています。

コード全体は[こちら](https://github.com/shinmura0/DeepAnomalyDetection_benchmark/blob/master/AdaCos_benchmark.ipynb)

##条件
+ AdaCosのepochは10、最適化手法はAdam
+ バッチサイズは128
+ ベースモデルはMobileNet V2（学習済モデルを使用、つまり転移学習）
+ 10回試行してAUCを算出
+ データはFashion-MNISTとcifar-10を使用

＜Fashion-MNIST＞
データの内訳は以下のとおりです。
正常は「スニーカー」、異常は「ブーツ」。

||個数|クラス数|備考|
|---|---|---|---|
|学習用リファレンスデータ|8000|8|スニーカーとブーツを除く|
|学習用正常データ|1000|1|スニーカー|
|テストデータ（正常）|1000|1|スニーカー|
|テストデータ（異常）|1000|1|ブーツ|

※学習用リファレンスデータとは、学習用正常データと見比べるためのデータです。

＜cifar-10＞
データの内訳は以下のとおりです。
正常は「鹿」、異常は「馬」。

||個数|クラス数|備考|
|---|---|---|---|
|学習用リファレンスデータ|8000|8|鹿と馬を除く|
|学習用正常データ|1000|1|鹿|
|テストデータ（正常）|1000|1|鹿|
|テストデータ（異常）|1000|1|馬|

##Fashion-MNISTの結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264781/aaba2401-885e-6b7f-c22b-e6a262a90980.png)

「L2-SoftmaxLoss」と「ArcFace」は前回の実験結果を掲載しています。
「AdaCos」の結果が今回の実験結果です。

「AdaCos」の中央値はArcFaceとほぼ**同じAUCになりました。**

やはり、パラメータチューニングが不要になっているのはありがたいです。

##CIFAR-10の結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264781/9b310bd6-65a9-24da-621b-c4a958eeaf29.png)
「L2-SoftmaxLoss」と「ArcFace」は前回の実験結果を掲載しています。
「AdaCos」の結果が今回の実験結果です。

Fashin-MNISTと同様に、「AdaCos」の中央値はArcFaceとほぼ同じAUCになっています。


#まとめ
+ AdaCosを異常検知に適用すると、ArcFaceと**同等の精度が出た**
+ しかも、「パラメータのチューニングが不要」でありがたい
+ そもそも、異常検知の性能評価では、**異常データが非常に少ない状況**が考えられ、その状況下でパラメータチューニング用の**データを捻出しなければならない状況が避けられる**と思うと、非常に有用性の高い手法と思われる。
Next.jsアプリでページ遷移時にプログレスバー（ページ上部に出るやつ）を出す

![progress7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18699/e1f6bf90-16b1-061d-568b-af37edfba4cb.gif)


なかなかにミニマルなフレームワーク「Next.js」ではデフォルトではプログレスバーを表示しません。
Nuxt.jsなら勝手にやってくれるんだけどな…と思いつつ、ここではNext.jsでの実現方法を書いておきます。超簡単です！

## 必要なもの
[nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)

以上！

## 実装方法

まず、当然ですけど[nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)をインストールします。

```shell
$ yarn add nextjs-progressbar
```

`/pages/_app.js`（ない場合は作る）（_app.jsって何、という方は[こちら](https://nextjs.org/docs/old#custom-app)をどうぞ）を編集します。

```jsx:/pages/_app.js
import React from 'react'
import App from 'next/app'
import NextNprogress from 'nextjs-progressbar' // ここ！

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <>
        <NextNprogress /> { /* ここ！ */ }
        <Component {...pageProps} />
      </>
    )
  }
}

export default MyApp
```

ここで一旦宣伝です。
## 宣伝
先日、@svfreerider さんと共に[Remote Club｜海外移住や海外フリーランスの情報サイト](https://remoteclub.jp/)というサービスを出しました！
既に海外移住した人と、これからしたいと考えている人のつながりを作り、より多くの方々が好きなところで生きていけるようになればいいという思いから[Remote Club](https://remoteclub.jp/)を作りました。

少しでも海外移住に興味のある方、既に移住している方は是非[Remote Club](https://remoteclub.jp/)を覗いていっていただけると嬉しいです！
フィードバックも待ってます！
よろしくおねがいします！

## まとめ

Next.jsでも特に困ることなくプログレスバーを実装できました。
Nuxt.jsだとデフォルトで表示されるし便利、と思ったけど、まぁ必要な人は追加する、というスタンスのほうが自然な気もしました。
遷移先でAPIなどを使って外部からデータを取得する場合は、どうしても遷移に時間がかかり不自然に感じてしまいます（自分は）。
ということで、クライアントでの遷移にはプログレスバー表示したい！というかたは是非どうぞ！

ちなみに[nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)作者の方の記事は[こちら](https://medium.com/@apalshah/next-js-how-to-make-your-own-progress-bar-indicator-component-easily-445e58777473)です。詳しく知りたい方は覗いてみてください。
Nuxt.js に後から E2E テスト (puppeteer,  jest-puppeteer) を入れる

Nuxt.js でも E2E テストを導入したいですね。
E2E テストを書いて、既存機能の修正時にデグレないようにしましょう。

今回は E2E テストのために、Headless Chrome API の [puppeteer](https://github.com/puppeteer/puppeteer) を入れてみた記事です。

# Puppeteer 導入

`$ yarn add -D puppeteer jest-puppeteer`

# Puppeteer の設定ファイルを追加

Nuxt.js プロジェクトのルート直下に `jest-puppeteer.config.js` を追加

```js
module.exports = {
  launch: {
    headless: true,
    slowMo: 250
  },
  server: {
    command: 'yarn run testServer',
    port: 3000,
    launchTimeout: 50000
  }
}
```

`jest.e2e.config.js` を追加

```js
module.exports = {
  verbose: true,
  preset: 'jest-puppeteer'
}
```

# E2E テストを追加

E2E テストのファイルを作成し、最低限のテスト（トップページに文字が表示されていること）を追加します。

`test/e2e/index.spec.js`

```js
describe('Index page', () => {
  let page;

  beforeAll(async () => {
    jest.setTimeout(50000)
    page = await browser.newPage()
    await page.goto('http://127.0.0.1:3000')
  });

  afterAll(async () => {
    await page.close()
  });

  it ('Display catch copy ', async () => {
    let text = await page.evaluate(() => document.body.textContent)

    await expect(text).toContain('トップページです');
  })
});
```

# package.json にスクリプトを追加

```json
...
"test": "jest --config jest.config.js ./test/components",
"test:e2e": "jest --config jest.e2e.config.js --runInBand ./test/e2e",
"testServer": "nuxt build && nuxt start --port 3000"
```

puppeteer 用に `testServer` スクリプトを用意します。
また、コンポーネントのテスト、E2E 用のテストそれぞれで実行するディレクトリも指定します。

# Circle CI 上でテストを実行する

```yml
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10-browsers
    steps:
      ...
      - run: yarn run test:e2e
```

`[nodejs version]-browsers` のイメージを使い、テスト実行の run を追加します。

# その他参考記事

[jest-puppeteerを使ったテストを試す](https://qiita.com/akameco/items/0b41f7b1c55f0fa30ac5)

# 最後に

決済などサービスのクリティカルな動作に対して、 E2E テストを書いていきましょう！
rails g scaffold ディレクトリ階層ごと作成

自分で作ってもいいけど、どうせならコマンドで作りたい。

```
rails g scaffold ntown::nerima do:string bay4k:integer

# 出力されるファイル例
#  app/controllers/ntwon/nerima_controller.rb
#  app/views/ntown/nerima/index.html.erb
# 作成されるテーブル名
#  ntown_nerima
```

コントローラーでもできる

```
rails g controller _9sari::group
```
Herokuで登録したアプリケーションの中身をCLIでみたい

<h1>前提条件</h1>
・MacOS
・herokuにアプリケーションをUPしている
・herokuCLIをインストール済み

<h1>コマンド順</h1>

```
heroku login

heroku run bash --app="登録したアプリ名"

cd 該当するファイルが存在するディレクトリ名

cat 該当するファイル名
```

<h1>終わりに</h1>

すぐ出てきて欲しかった情報を書いときます。
誰かの役に立ちますように。

まあ調べればすぐなんですけども・・・。

<h1>参考文献</h1>
https://teratail.com/questions/111988
heroku run bash --helpコマンド