OmniAICreator/Qiita-1.07M huggingface dataset:
swift5 コード上で新しいViewController を追加する

ViewController内にViewControllerを入れ子にする方法を探していたらこのような方法があったので紹介しておきます

```swift:ViewController.swift
    override func viewDidLoad() {
        configureMenu()
        super.viewDidLoad()
    }

    var menuController = UIViewController()

    func configureMenu() {
        menuController = MenuController()
        view.addSubview(menuController.view)
        //挿入するレイヤーを指定する場合は以下のように書く
        //view.insertSubview(menuController.view, at: 0)
        addChild(menuController)
        menuController.didMove(toParent: self)
    }
```
別途MenuController.swift を用意して、

```swift:MenuController.swift
import UIKit

class MenuController: UIViewController {
    override func viewDidLoad() {
        configureLabel()
        view.backgroundColor = .darkGray
        super.viewDidLoad()
    }
    
    let label = UILabel()

    func configureLabel() {
        label.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
        label.text = "Hello World"
        label.adjustsFontSizeToFitWidth = true
        label.textColor = .white
        self.view.addSubview(label)
    }
}

```

これを実行するとおそらくHello World と表示されるはずです！
tar + brotli コマンド

## 圧縮

tar でアーカイブしたものを標準出力に吐き出して brotli で圧縮する。

```bash
$ tar -cf - dir | brotli -o dir.tar.br
```

## 解凍

```bash
$ brotli -d dir.tar.br -c | tar -xf -
```

## おまけ

### pv で圧縮進捗率を見る

```bash
$ tar -cf - dir | pv -p -t -e -r -b -s $(du -sb dir | awk '{print $1}') | brotli -o dir.tar.br
```
integromatでRSSフィードをAWS S3に保存

<img width="1152" alt="rss-s3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/afa0c5e1-dfe4-d0b4-f9ff-5a2c1ee0ca71.png">

[integromat](https://www.integromat.com/en/)を使ってRSSフィードをAWS S3に保存しました。
非常に簡単な作業でしたが、手順を残しておきます。

事前にS3に対しての処理を許可するIAMユーザーの作成が必要です。
今回のシナリオに必要なIAMユーザーの権限

- s3:ListAllMyBuckets
- s3:PutObject

## シナリオの作成

`+ Create a new scenario` から一連の処理を繋ぐシナリオを作成します。

### 連携させたいサービスの選択

今回はRSSフィードをS3に保存するので、

- RSS
- AWS S3

を選択します。
<img width="1176" alt="service選択.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/8245e989-b13b-5e81-a8c6-8c872a6c117f.png">

### RSSを設定
今回はRSSのURLを指定します。
<img width="647" alt="rss.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/b3ec83d2-e4fc-1feb-5e25-3e83bc8c80d0.png">

### 文字列処理
RSSのDescriptionを利用したいのですが、HTMLタグが余計なのでText parserで文字列のみ取得します。
<img width="683" alt="text-parser.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/f90d0e9e-2b46-6d55-eec0-d69d3c850e71.png">

### S3を設定

#### 新規コネクションを作成

事前に作成したIAMユーザーのアクセスキー、シークレットキーを設定します。
シークレットキーに `/` が含まれている場合、処理に失敗するので再発行して下さい。
![connection.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/cd2082c8-9118-c8cd-375d-67307a98cf6b.png)

#### S3バケットとオブジェクトの設定

S3バケットとオブジェクトを設定します。
適当にRSSの内容からファイルの内容を組み立てます。
<img width="698" alt="s3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0c86f1fd-bb02-f952-15d3-ad2861826c07.png">

設定おわり。
Runボタンでテスト実行して動作を確認して下さい。

## 参考

- [integromatとAWS S3の連携についての公式ドキュメント](https://support.integromat.com/hc/en-us/articles/360018692614-AWS-S3)
- [シークレットキーに起因するエラーについて](https://qiita.com/hanako8/items/3878ddcdc0d2f069ad36)

## プラン

現状FREEプランで利用しています。
複数のRSSに対しての処理を予定しているので、別のサービスで先にRSSをひとまとめにした上でintegromatを使おうとしたのですが、FREEプランのファイルサイズ上限5MBにひっかかってしまいました…
それでも、無料で簡単にこれだけの事ができるのはすごいので、うまく使っていけたらと思います。
<img width="703" alt="plan.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/4aa89aa4-dc0c-a218-a3fd-e547f777aa69.png">
OMNIBUS F4 + Betaflight Configurator  セットアップ

# Betaflight install
この記事が詳しい
https://yuckey-lab.hatenablog.com/entry/2018/09/04/Betaflight%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95

# OMNIBUS F4 とMacを接続
### ビープ音を停止
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/f330bb63-e7dc-ee49-c7d5-302e73ae023f.png)
デフォルトだとビープが鳴り止まずにうるさいので、停止します。
アプリを開き、USB経由でConnect後に、CLIのタブを開いて、 `beeper -all` をするとすべての音がオフになる。
続けて `save` を押すと設定が反映される。
日本語のワードクラウドを使って新型iPhoneのニュース記事を可視化する

# 目的
日本語のワードクラウドを使って新型iPhoneのニュース記事を可視化した際の備忘録です

# 準備

wordcloudをインストールします。

```
$ pip install wordcloud
```

フォントを下記サイトからダウンロードします
https://www.google.com/get/noto/help/install/

```
macOS
Download the font package (.zip)
Double click on the package to uncompress it
Open Font Book (Go to Finder → Applications → Font Book)
Select all of the font files and drag them to the Font column (i.e., the second column) of Font Book
```

# コード

ネットから消費税が１０％増税する関連のニュースをコピーします。

```python:sample.py
# $ pip install wordcloud
# https://www.google.com/get/noto/help/install/

import matplotlib.pyplot as plt
from wordcloud import WordCloud
from MeCab import Tagger

t = Tagger()
text = """
消費税率の10％...（以下省略）
"""

splitted = " ".join([x.split("\t")[0] for x in t.parse(text).splitlines()[:-1]])

stop_words = ['する', 'せる', 'られる', 'あの', 'する', 'ある', 'とこ', 'なる', 'ない', 'ああ', 'れる', 'さん', 'やる', 'この', 'どう', 'そう', 'は', 'の', 'を', 'に', 'が', 'で','と','た','へ','し','も','や', 'て', 'か','いる', 'な' , 'ば', 'い', 'なかっ', 'いけ', 'でき', 'あっ', 'こと', 'ため', 'ます', 'これ', 'それ', 'その', 'さ', 'という', 'だけ', 'あろう', 'また', 'もの', 'よう', 'から', 'る', 'あろう', 'だ', 'れ', 'だから', "そして", 'あろう', 'あれ', 'あろ', 'う', 'oo', 'いい', 'ご', 'たい', 'なく', 'ぞ', 'とき', 'そこ', 'しかし', 'として', 'ooo', 'ぬ', 'ず', 'なっ', 'ZO', 'Zoo', 'O', 'なら', 'あ', 'こ' ]

wc = WordCloud(font_path="~/Desktop/python/wordcloud-jp/.fonts/NotoSansCJKjp-Regular.otf", regexp="[\w']+", stopwords=set(stop_words))
wc.generate(splitted)

plt.imshow(wc)
plt.show()
```

増税するらしき事が可視化によって明確になりました。
加えて、税率、消費、対応などが記事の焦点となっている事がわかります。

![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/c3ade3b4-d61f-a91a-8aca-56be0cb955d0.png)

新型iPhoneの記事を入れると以下のような感じです。
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/66719ed2-6a7f-dbdd-98b1-dc8d0ca902b3.png)

プロセッサー、容量、ベンチマークなど、新型は性能が注目されている事がわかります。

### 追記

ファイル（text.txt）から読み込む場合は下記

```
# $ pip install wordcloud
# https://www.google.com/get/noto/help/install/

import matplotlib.pyplot as plt
from wordcloud import WordCloud
from MeCab import Tagger

t = Tagger()

f = open('./text.txt')
text = f.read()  # ファイル終端まで全て読んだデータを返す
f.close()
#text = ""

splitted = " ".join([x.split("\t")[0] for x in t.parse(text).splitlines()[:-1]])

stop_words = ['する', 'せる', 'られる', 'あの', 'する', 'ある', 'とこ', 'なる', 'ない', 'ああ', 'れる', 'さん', 'やる', 'この', 'どう', 'そう', 'は', 'の', 'を', 'に', 'が', 'で','と','た','へ','し','も','や', 'て', 'か','いる', 'な' , 'ば', 'い', 'なかっ', 'いけ', 'でき', 'あっ', 'こと', 'ため', 'ます' ]
wc = WordCloud(font_path="/Users/seigo/Desktop/python/wordcloud-jp/.fonts/NotoSansCJKjp-Regular.otf", regexp="[\w']+", stopwords=set(stop_words))
wc.generate(splitted)

plt.imshow(wc)
plt.show()
```

# 参考
[【備忘録】日本語のワードクラウドを作る](https://qiita.com/TkrUdagawa/items/aa483630b5ec7d337c9e)
[Google Noto Fonts](https://www.google.com/get/noto/help/install/)
[PythonのWordCloudで遊んでみた【題材 : 吾輩は猫である】](https://qiita.com/xxx_boy/items/4e9a06499d8e0073ede9)
font awesomeのトグルボタンを作る

### font awesomeでtoggleButtonを作るのに苦労した
#### 苦労した点<br>
  1. appendでHTMLを差し替えるとfont awesomeの大きさと色がおかしくなりました。 
![7c3aa591b5536f4fce3ccce5399b1fd0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497069/78482436-d185-7cd1-0a2d-e0173f42ca5c.gif)
  2. toggleClassで"far"と"fas"のみをtoggleするとclass名が末尾に追加され、値が適切に取得できませんでした。  
  ex)"far fa-3x fa-bookmark"が"fa-3x fa-bookmark far"になりclassList[0]がfa-3xに変化します。

#### 解決策<br>
 1. toggleClassでクラス名だけを変更する  
  appendでHTMLをまるごと差し替えるのではなく、toggleClassでクラス名だけを変更すると適切にCSSが適応され、解決できました。
 2. toggleClassで複数のclassを同時に指定する  
 toggleClassは複数のclassを同時に指定できました！  
  "far fa-3x fa-bookmark"とまるごと指定することでclass名の順序を変えることトグルできました。  
その結果classList[0]でfarを所得することに成功しました！
[![Image from Gyazo](https://i.gyazo.com/a30259a13b982cf292d3af9eae548f5f.gif)](https://gyazo.com/a30259a13b982cf292d3af9eae548f5f)

### 実際のコード
以下はjavascriptの非同期通信を用いたお気に入り機能の実装

```haml:_wordbook.html.haml
- if defined? fav
  - fav_id = fav.wordbook.id
- id = wordbook.id
- if user_signed_in?
    .wordbook__fav{"data-fav": fav_id}
      = button_tag do
        - if fav_id == id
          = icon("fas fa-3x", "bookmark")
        - else
          = icon('far fa-3x', 'bookmark')
```

```javascript:fav.js
$(function(){
  // いいねの生成
  function like (id, status, button){
    var wordbook_id = id;
    var url = `api/wordbooks/${wordbook_id}`;
    var method = status == "far" ? "PATCH" : "DELETE";
    $.ajax({
      url: url,
      type: method
    })
    .done(function(){
      button.toggleClass("far fa-3x fa-bookmark");
      button.toggleClass("fas fa-3x fa-bookmark");
    })
    .fail(function(){
      window.alert("error");
    });
  }

  $(".wordbook__fav").on("click",function(){
    var id = $(this).parent()[0].dataset.id;
    var button = $(this).find("i");
    var status = button[0].classList[0];
    like(id, status, button);
  });
});
```
```ruby:api/wordbooks_controller.rb
class Api::WordbooksController < ApplicationController
  def update
    @fav = Favorite.create(user_id: current_user.id,wordbook_id: params[:id])
  end
  def destroy
    @fav = Favorite.where(wordbook_id: params[:id]).find_by(user_id: current_user.id)
    @fav.destroy
  end
end

```
### 環境
Ruby 2.5.1
Ruby on Rails 5.2.3
gem "jquery-rails"
gem "font-awesome-sass"
Raspberry Pi Mouseを始めようかなと検討してみた（その３）

＜1回目のトライ：失敗＞
USBメモリに[「Ubuntu16.04LTSをUSBメモリにインストールする」](http://yohaku6066.blog.fc2.com/blog-entry-44.html)を参考にUbuntuのインストールを完了。
ちゃんとubuntuにログインできて普通に使えそうです！
ところが勝手にブートローダーGRUBがインストールされてしまって、USBメモリを外した状態ではWindowsが起動できず、GRUBの黒い画面で止まる状態になってしまいました！
いろいろ試したのですが、結果的には[「GRUBをwindows10から削除する」](https://code.hounen-mansaku.com/archives/155)のやり方で、
Windows10のコマンドプロンプトにて管理者権限で　bcdboot C:/Windows　を実行したら解決しました。
ただ、実行直後は、シャットダウンしても勝手に再起動されてしまう状態となりました。
いろいろ試したのですが、最終的には電源長押しで強制的に電源落として、再度起動させると、正常にシャットダウンされるようになりました。起動時にF7キーでUSBドライブからの起動を選択して、ubuntuを起動させると、パスワード入力の画面までは普通に起動しますが、パスワード入力してログインすると固まります！！！
また、やり直しです・・・

＜2回目のトライ＞
同じようにインストール完了。
ubuntuのUSBメモリ挿していないときにgrubの文字が出た黒い画面で止まる件は、bootの順番がUSBメモリに変えられていたことが原因のようで、grubの一番下の「enter setup」でbootの順番は1番をWindowsにするとWindowsが起動するようになりました。USBメモリ挿してubuntu使うときは起動時にF7キーを押して、USBメモリから起動させるようにします。
しかし、1回目と同じく、Windowsを第１ブートにすると、ubuntuが固まってしまいます。

＜当面の運用対策＞
当面はPC起動時にF7キー押して出した画面で、「Enter Setup」を選択し、
![IMG_4652 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/53216b31-ddd9-1a14-dea9-981de812ea9e.png)

「Boot」で1番をWindowsにしたり、ubuntuにしたりして使っていこうと思います。
![IMG_4653 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/84d42357-90e8-cf71-cf1a-643d9e600969.png)

次は、USB起動のubuntuのセットアップ進めます（wifi、時刻、アップデート、Raspberry Pi Mouseに必要な事前準備？）。
#javascript の export で function から他の function を private  的な扱いで呼び出す例

# js

```js
export function sayHello(user) {
  hello();
}

function hello() {
  console.log('Hello')
}

```

# HTML

```html
<script type="module">

import { sayHello } from 'https://codepen.io/yumainaura/pen/XWrBrbL.js';

sayHello();

</script>
```

# Run

![image](https://user-images.githubusercontent.com/13635059/64902949-b68f1600-d6eb-11e9-83e8-a6a72eeca092.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2436








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
今更ながらFlutter Desktopのexampleを動かす

macOSで動かしたものを載せていますが、Linuxでも同様の手順で動かせると思います。

## Flutter Desktopを使えるようにする環境変数を追加
環境変数ENABLE_FLUTTER_DESKTOPにtrueを設定する。

```~/.bashrc
export ENABLE_FLUTTER_DESKTOP=true
```

再起動して反映。

```
$ exec $SHELL -l
```

デバイスにデスクトップが追加されたかの確認。

```
flutter devices
```

自分の場合は、下記のようにmacOSが表示されるようになりました。
![flutter_devices.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/0209e1f1-766e-b04d-85f2-2b262c7b5861.png)


## Flutter Desktopのexampleを取得

```
$ git clone https://github.com/google/flutter-desktop-embedding.git
```

## デバイスを指定して実行
予めexample内に移動しておく。

```
$ cd flutter-desktop-embedding/example
```

各種依存ライブラリのインストール。

```
$ flutter pub get
```

デバイスを指定して実行。
＊ macOSの部分はOS毎に異なるのでmacOSでない方は変更が必要です。

```
$ flutter run -d macOS
```

![flutter_desktop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117867/74a4905d-a5b1-195d-876c-167353833f6e.gif)

## 関連
* [Flutter Webのexampleを動かすまで](https://qiita.com/hiko1129/items/377722484d54d4e40de9)

## 参考
[Flutter for Desktop: Create and Run a Desktop Application](https://medium.com/flutter-community/flutter-for-desktop-create-and-run-a-desktop-application-ebeb1604f1e0)
ローカルのHTMLファイルで #javascript の export を実行してみる 

# html

```html
<script type="module">

import { message } from 'https://codepen.io/yumainaura/pen/dybKxgo.js';

console.log(message)

</script>

```

#  適当なディレクトリに置いてブラウザで開く

`file:///private/tmp/js/import.html`

# 例

chrome の developer tool で確認

![image](https://user-images.githubusercontent.com/13635059/64902813-57300680-d6e9-11e9-845e-a455d4574cbf.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2435








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Jetson Nano インストール中

# Jetson Nanoインストール中

Jetson Nano買いました。
使いやすくするために、整備します。

## IP Addressの固定
/etc/network/interfacesにアドレスを追記

```/etc/network/interfaces
auto lo
iface lo inet loopback

auto eth0
iface eth0 inet static
    address 192.168.0.2/24
    gateway 192.168.0.1
    dns-nameservers 8.8.8.8
```

## xrdpの導入
やっぱり、ヘッドレスで使いたいので、導入

gnomeを削除

```
$ sudo apt-get purge gnome*
$ sudo apt-get autoremove
```

xrdpの導入

```
$ sudo apt-get install -y xrdp lxde-core tigervnc-standalone-server
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1099a04c-f7ee-cb81-4d84-75a81e67d4bf.png)

無事にヘッドレス環境、導入完了。

## カメラテスト環境

```
$ sudo apt-get install guvcview
```

## WiFi ドングルの追加

ほかのページにも出てくるUSB WiFiドングル RTL8192CU をつないで、WiFi経由でネットワークにつなぐ
wpa_supplicantを使うので、その設定をすればOK

```/etc/wpa_supplicant/wpa_supplicant.conf
ctrl_interface=/var/run/wpa_supplicant
update_config=1
network={
        ssid="myhostap"
        scan_ssid=1
        psk=xxxxxxxxxx (get from wpa_passphrase)
        key_mgmt=WPA-PSK
        proto=RSN
        pairwise=CCMP
        group=CCMP
}
```
proto/pairwise/groupは、無線LAN親機の設定による。うちはWPA2-PSK/ASEなので、この組み合わせ。
ここまでで、wlan0は動く。DHCPもしくは固定IPにするには、interfacesの設定が必要

```/etc/network/interfaces
auto wlan0
allow-hotplug wlan0
iface wlan0 inet dhcp
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
```

これで、設定は完了。リブートすると、wlan0にIP addressが付与されている。

```
$ ifconfig wlan0
wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.X.XX  netmask 255.255.255.0  broadcast 192.168.1.255
        ether XX:XX:XX:XX:XX:XX  txqueuelen 1000  (Ethernet)
        RX packets 4449  bytes 887293 (887.2 KB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 207  bytes 33022 (33.0 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
```


## オーディオ出力設定 (HDMI)

```
$ pactl list short sources
$ pacmd set-default-sinks 0
```

```
$ pactl list short sources
0       alsa_output.platform-70030000.hda.hdmi-stereo.monitor   module-alsa-card.c      s16le 2ch 44100Hz       IDLE
1       alsa_output.platform-sound.analog-stereo.monitor        module-alsa-card.c      s16le 2ch 44100Hz       SUSPENDED
2       alsa_input.platform-sound.analog-stereo module-alsa-card.c      s16le 2ch 44100Hz       SUSPENDED
``` 

HDMIのは、"0"なので、次のコマンドで、0をいれる

```
pacmd set-default-sinks 0
```

もし、pulseaudioが立ち上がっていない、というエラーが出た場合は、次のコマンドを実行

```
$ pulseaudio
```


つづく
tidyquantでバックテスト

Rでデータ操作と言えばTidyverseですが、RでQuantsと言えばQuantmodでしたが、最近の人はtidyquantなのでしょうか？
時系列操作というジャンルではtsibbleも便利なので難しいところですね。
今回はtidyquantを使って単純なストラテジーのバックテスト例を書いてみいます。

ライブラリを読み込んで組み込みデータを確認します。

``` r
require(tidyquant)
data(FANG)

FANG %>% select(symbol, date, adjusted) %>% 
  ggplot(aes(x = date, y = adjusted, colour = symbol)) +
  geom_line() +
  theme_tq() +
  scale_color_tq()+
  labs(title = "price")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138622/96568d37-d818-9073-139d-9d59395e1311.png)

EMA(20)を計算します。

```
term1 <- FANG %>% group_by(symbol) %>%
  tq_mutate(select = adjusted,
            mutate_fun = EMA, n = 20,
            col_rename = "ema")
```

リターン計算に使うROCを計算します。

```r
term2 <- term1 %>% tq_mutate(select = adjusted,
                             mutate_fun = ROC,
                             col_rename = "roc")
```

シグナルとリターンを計算します。シグナルの発生から発注にはラグが発生するので注意が必要です。buy next bar at market;ということです。

```r
term3 <- term2 %>% mutate(sig = lag(if_else(adjusted > ema, 1, -1)),
                          ret = roc * sig)
```

リターンの推移を確認します。

```r
term3 %>% select(symbol, date, ret) %>% drop_na %>% 
  ggplot(aes(x=date, y=ret, colour = symbol)) +
  geom_line() +
  theme_tq()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138622/d8748b4b-3197-9399-dce6-ef09cbaa27b9.png)

累積リターンを可視化します。

```
term3 %>% drop_na %>% mutate(eq = cumsum(ret)) %>% 
  select(symbol, date, eq) %>% 
  ggplot(aes(x = date,y = eq, colour = symbol)) +
  geom_line()+
  theme_tq()+
  scale_color_tq()+
  geom_hline(colour = "darkgray", yintercept = 0)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138622/d60ab07a-751d-2e5b-09be-7ac09b42e460.png)

もっと複雑なストラテジーも簡単にテストできます。
コスト計算やポートフォリオリターンについての分析も必要です気が向いたらそれらについても記事を書きます。
「Rによる機械学習」の勉強履歴（3）

# Rによる機械学習
（ソフトウェア品質技術者のための）データ分析勉強会で、書籍『Rによる機械学習 （Machine Learning with R）』を使用して機械学習を学ぶ。
https://www.amazon.co.jp/dp/4798145114/

# 第5章 分割統治 -決定木と分類ルールを使った分類-

## 疑問点
* 均一性って何？
 * 純粋性と同じような意味。 
* エントロピーって何？
 * 純粋性（インスタンスのサブセットが一つのクラスだけに属する度合い）の測定方法。
 * エントロピーは低いほうがいい。
* 最終的に求めたい予測値は目的変数という？
 * 目的変数と言ってよい。
 * C5.0アルゴリズムではターゲット因子ベクトルともいう
* 学習データに偏りがあっても（yesかnoかを求めるときに学習データがyesのデータばかりでも）、性能は大丈夫？
 * 誤りコストというテクニックで補える？
 * 機械学習の手法すべて学習データは目的変数のバランスがよいほうがよい。未知のデータは予測できない。
* ブースティング
 * 決定木だけで使われる言葉ではなく、機械学習の他の手法でも使われる言葉？
 * 複数の決定木を作り、複数の決定木から出てきた結果を重みをつけて多数決するような感じ。各決定木の信頼度をもとに、重みをつけるみたい。
* ホールドアウト検証と交差検証？
 * @sampoさんが違いをまとめてくれた。
 * https://k-metrics.netlify.com/post/2019-09/cv/

## 前提知識
### データの無作為抽出の方法
データを訓練データとテストデータに分ける。そのときに、無作為抽出が使える。
Rではsample()関数とset.seed()関数が使える。
prop.table()関数でバランスよくデータ抽出できたかが確認できる。

### 誤り率の算出方法
下のモデルの性能評価結果の「actual default：yesかつpredicted default：no」と「actual default：noかつpredicted default：yes」の割合を足したものを誤り率と言う。以下の場合、0.3=0.2+0.1である。

```
               | predicted default 
actual default |        no |       yes | Row Total | 
---------------|-----------|-----------|-----------|
            no |        55 |        10 |        65 | 
               |     0.550 |     0.100 |           | 
---------------|-----------|-----------|-----------|
           yes |        20 |        15 |        35 | 
               |     0.200 |     0.150 |           | 
---------------|-----------|-----------|-----------|
  Column Total |        75 |        25 |       100 | 
---------------|-----------|-----------|-----------|
```

## 決定木
書籍通りに実施しれば結果が得られる。
誤りのコストの指定をすると、いい感じの結果が得られるようになる。
起こしたくない判断誤りを防ぐために、誤りのコストの指定をする。

## 分類ルール
書籍通りに実施しれば結果が得られる。

## おまけ
### rpartを使ってみやすい決定木をつくる
https://www.marketechlabo.com/r-decision-tree/
https://qiita.com/nkjm/items/e751e49c7d2c619cbeab#決定木でデータを分析する

```
> install.packages("rpart")
> install.packages("rpart.plot")
> credit <- read.csv("credit.csv")
> credit_train <- credit[-17]
> model_credit <- rpart::rpart(default ~ ., credit)
> rpart.plot::rpart.plot(model_credit, extra = 1, type = 2)
```

![Rplot01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243842/6be60c9b-72b9-030c-e1e5-f7daa84e6fbe.png)

### ロジスティック回帰分析を使用すると
説明変数を連続値のデータに変換することで、ロジスティック回帰分析＋逐次選択法（ステップワイズ法）を使用し、決定木と同じようなモデルを作成できる可能性もある。

http://www.fun.ac.jp/~niimi/ronbun/100118.pdf

## 演習時のトラブル
* C50パッケージをロードしたらWarningが出た。Warning出た状態でも、とりあえず動いた。

```
> library(C50)
Warning:  パッケージ 'C50' はバージョン 3.6.1 の R の下で造られました 
```
 
* R3.6.0以降は乱数生成アルゴリズムが変更され、set.seed()関数をつかっても、sample()関数による無作為抽出の結果は再現しない。なので、本の通りにやっても本とは違う結果が出る（Tree Sizeが変わる）。
ZFSonLinuxでdocker用データセットがマウントもアンマウントも出来なくなっていた話

#現象
openSUSEを15.0から15.1にしたらこうなった

```sh
***:/var/lib # docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
***:/var/lib # mount | grep docker
tank/docker on /var/lib/docker type zfs (rw,xattr,noacl)
***:/var/lib # zfs mount tank/docker
cannot mount 'tank/docker': filesystem already mounted
***:/var/lib # zfs unmount tank/docker
umount: /var/lib/docker: not mounted.
cannot unmount '/var/lib/docker': umount failed
```


#対処
- /etc/docker/daemon.jsonから`"storage-driver": "zfs"`が消えていたので修正
- \#systemctl disable docker
- \#zfs set canmount="noauto" tank/docker
- \#reboot
- \#rm -rf /var/lib/docker
- \#zfs set canmount="on" tank/docker
- \#reboot
- \#systemctl enable docker
- \#systemctl start docker
Ubuntu で Chrome や VSCode、IntelliJ IDEA の表示スケールを125%にする（HiDPI）

**Ubuntu** において、Google Chrome や Visual Studio Code、IntelliJ IDEA / WebStorm の起動パラメーターを変更して、表示スケールを 125% にする方法です。
設定画面でもある程度変更できますが、アドレスバーやツールバーが小さいままで使いづらいと思い、こちらの方法をご紹介します。
（Windows や Mac では OS の機能で十分だと思います。）


# 環境

* Ubuntu 19.04
* GNOME 3.32.1
* Google Chrome 77.0.3865.75
* IntelliJ IDEA Ultimate 2019.2.2
* WebStorm 2019.2.2

# Google Chrome

## 方法

起動パラメーターに `--force-device-scale-factor=1.25` を指定します。

## 手順
起動パラメーターを変更する方法としてはいろいろありますが、グローバルのデスクトップエントリ（.desktop）を直接修正したほうが無難です。

ファイル: `/usr/share/applications/google-chrome.desktop`

`Exec=` で始まる行がコマンドなので、以下のように編集します。Chrome の場合は3箇所あります。

```/usr/share/applications/google-chrome.desktop
(108行目) Exec=/usr/bin/google-chrome-stable --force-device-scale-factor=1.25 %U
(169行目) Exec=/usr/bin/google-chrome-stable --force-device-scale-factor=1.25
(221行目) Exec=/usr/bin/google-chrome-stable --force-device-scale-factor=1.25 --incognito
```

## 補足

* Chrome がアップデートされると、`google-chrome.desktop` がもとに戻ってしまいます。不便ですが、再度修正してください。修正したものと差し替えるスクリプトでも用意しておけばいいかもしれません。
* 一方、ローカルの `.desktop` ファイルを作成すれば、そちらが優先されます。ただ、Dock に登録した際に、オリジナルのアイコンとダブってしまうなど、あまり使い勝手がよくありませんでした。
* Visual Studio Code や [Inkdrop](https://inkdrop.app/) のような Electron アプリも同様の方法で可能でした。（それぞれ `code.desktop` 、`inkdrop.desktop` です。）


# IntelliJ IDEA

## 方法

VM Option に `-Dide.ui.scale=1.25` を指定します。

## 手順

IntelliJ IDEA を起動して、メニューの `Help` > `Edit VM Options` を使用してください。
`192.xxxx.xx.vmoptions` のようなテキストファイルが開きますので、オプションを追加してください。
おそらく他の JetBrains 製アプリも同様です。WebStorm は確認しました。

# 補足

Wayland であれば、こちらの [リンク先](https://wiki.archlinux.jp/index.php/HiDPI#Wayland) にある方法で、画面全体の表示スケールを 25% 刻みで変更できます。まだ実験的機能のようです。
こちらの方法で変更するのがあるべき姿のように思えますが、わたしの環境の場合、フルスクリーン表示の際に、ぼやけてしまいました。（スムージングがかかったようになる。）
【Railsチュートリアル】Herokuにデプロイした後、Method Not Allowedと表示される

##事象
Railsチュートリアルの第1章でHerokuへのデプロイ作業があり、デプロイ後にURLを開くとブラウザにMethod Not Allowedと表示される。

<img width="645" alt="スクリーンショット 2019-09-14 13.54.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/f3bca21c-c521-c798-e948-1230b14e4fa3.png">


<img width="1275" alt="スクリーンショット 2019-09-14 13.52.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/95bd399d-854c-bbe3-3d58-e8779e720a5b.png">


##原因
URLがHerokuのgitになっていた。


##対応
デプロイ先のURLにアクセスすると問題なく表示される。

<img width="623" alt="スクリーンショット 2019-09-14 13.47.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/56567b57-4eb4-288b-2514-8a2857fb9f41.png">

<img width="819" alt="スクリーンショット 2019-09-14 13.58.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/1d5e3c91-fec3-fb45-1a8d-37c1541010b8.png">
CentOS7.6にdocker-composeをインストールする

docker-composeをインストールする時の手順メモです。

[CentOS7.6にDockerをインストールする](https://qiita.com/msrx9/items/05ef978c4f36fd5933e6) の続きで、docker-composeをインストールします。

## 環境

```
[admin@localhost ~]$ uname -a
Linux localhost.localdomain 3.10.0-957.27.2.el7.x86_64 #1 SMP Mon Jul 29 17:46:05 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

[admin@localhost ~]$ cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core) 

[admin@localhost ~]$ docker -v
Docker version 19.03.2, build 6a30dfc
```

## インストール手順

```
sudo curl -L https://github.com/docker/compose/releases/download/1.25.0-rc2/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
```

## 動作確認

```
[admin@localhost ~]$ docker-compose -v
docker-compose version 1.25.0-rc2, build 661ac20e
```

# 参考

- [docker/compose](https://github.com/docker/compose/releases)
git使い方

[コマンド集](https://qiita.com/konweb/items/621722f67fdd8f86a017)
[fetchとpull](https://qiita.com/osamu1203/items/cb94ef9da02e1ec3e921)
[diff](https://qiita.com/shibukk/items/8c9362a5bd399b9c56be)

- pull = fetch + merge origin/master
- ローカルの作業ディレクトリと結び付いているのがmasterブランチ
- origin/masterとはリポジトリと結びついているブランチ

## git diff
| 用法 | コマンド |
| :---- | :---- |
| 解説 | git diff 変更前..変更後<BR> ^ 一つ前<br>リモート名:origin ブランチ:master |
| git pull する前にリモートとの変更点 | git diff HEAD..リモート名/ブランチ |
| git push する前にリモートとの変更点 | git diff リモート名/ブランチ名..HEAD |
| git add する前に変更点 | git diff |
| git add した後に変更点を見る | git diff --cached |
| 今回コミットした変更点 | git diff HEAD^..HEAD |
| コミット同士を比較 | git diff 変更前のSHA..変更後のSHA |
| あるコミットの変更点 | git diff コミットのSHA^..コミットのSHA |
| ブランチ同士を比較 | git diff ブランチA..ブランチB |
| ある1ファイルの変更点  | git diff -- 対象のファイルパス  |
| あるファイルをブランチ間の変更点  | git diff ブランチA..ブランチB -- 対象のファイルパス  |
| 別ファイル同士を比較  | git diff -- ファイルパスA ファイルパスB  |
| サマリ  | git diff --stat  |
| ファイル名  | git diff --name-only  |
| 単語単位で比較  | git diff --color-words  |
| Excel の中身を比較  | git diff --color-words -- 対象のExcel  |
| 上方向に比較差分  | git diff --compaction-heuristic  |

## git その他設定

### ユーザー情報を設定する
```
git config --global user.name "First-name Family-name"
git config --global user.email "username@example.com"
```

### color
```
git config --global color.diff auto
git config --global color.status auto
git config --global color.branch auto
```
Redux for beginner


# points

- Redux has no dependency with React.
- Action Creater returns Object.
- Reducer change state
- Container has role to
  - import action creater
  - provide state and dispatche with mapStateToProps

- mapStateToProps
  - to take date form Redux and provide it to view Component





# article

https://dev.to/radiumsharma06/abc-of-redux-5461
#Codepen で #javascript の export / import をする一番簡単な例

https://codepen.io/yumainaura/pen/dybKxgo

```
export const message = 'hello';
```

https://codepen.io/yumainaura/pen/GRKGVYN

```
import { message } from 'https://codepen.io/yumainaura/pen/dybKxgo.js';

console.log(message)
```

![image](https://user-images.githubusercontent.com/13635059/64902452-5b0c5a80-d6e2-11e9-96cc-f1bbc057ee1f.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2434








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【jQuery】垂直シングルページスクロール

# はじめに
「Webサイトで軽くスクロールすると自動的に1ページ分スクロールされるやつ」を実装したい。
[デモはこちら](https://projects.lukehaas.me/scrollify/#home)。
ちなみに、jQueryを使います。

## 実装方法
[Scrollify.js](https://projects.lukehaas.me/scrollify/#home)を使って実装していきます。
jQuery1.7以上が必要らしい。

## コード

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <!-- JS -->
  <script src="js/jquery.scrollify.js" type="text/javascript"></script>
  <script type="text/javascript">
    var option = {
      section: '.contents',  //1ページで表したいコンテンツのclass名
      easing: "swing",
      scrollSpeed: 600,
      scrollbars: true,
    };
    $(function() {
      $.scrollify(option);
    });
  </script>

  <!--CSS-->
  <style>
    html, body{
      height: 100%;
      width: 100%;
    }
    .contents{
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="contents" data-section-name="section1">ひとつめ</div>
  <div class="contents" data-section-name="section2">ふたつめ</div>
  <div class="contents" data-section-name="section3">みっつめ</div>
  <div class="contents" data-section-name="section4">よっつめ</div>
</body>

</html>
```

## 参考サイト
* https://projects.lukehaas.me/scrollify/#home
* https://liginc.co.jp/357738
Frontend=nuxt.js, Backend=RailsAPI, 認証=自前(JWT)のサーバー構築でSSL証明書,DNS,http, https,CORSなどでつまりまくった話

関わってる案件で認証サーバーを自作しているのですが、そこでstaging環境構築に手間取ったお話です。主に、API通信時の取り決めで引っかかってる感じでした。

**SSL証明書周りのエラーやCORSで引っかかってる人には刺さるかもです**

今後また引っかからない様に覚え込みコミット。

## 使用しているフレームワークなど

### Frontend

nuxt.js
ビルド：AWS CodeBuild
ホスティング：S3 + CloudFront

### APIサーバー

Rails 5
デプロイ:CircleCI ✖︎ Capistrano （テスト含む）
サーバー:EC2(ELB+AutoScale)

### 認証サーバー

Firebase Authenticationの仕組みを真似て自作。（複数サイトのシングルサインオンが目的）
Rails 5
デプロイ:Capistrano
サーバー:EC2(ELB)
referrer参照しそのオリジンが登録されていないとアクセスできない仕組み

　
※ すでにサーバー、セキュリティグループなどの設定は完了済み
**※ ELBのリスナーはAPI、認証サーバー共に80番のみ(これも一つの詰まった要因だった）**

## 詰まったこと

### Frontend→認証サーバのブラウザアクセスでリファラが取れない問題

**原因:FrontendのホスティングがCloudFrontなので`https`、一方認証サーバーのELBは`http`しか開けていなかった。**
調べてみるとhttpsからhttpへのアクセス時にはリファラがとれないようだ。

ELBのリスナーに443を追加。証明書取得がめんどいのでオレオレ証明書をインポートし設定した。
参考: [ELBにサーバ自己証明書をインストー...](https://qiita.com/Yuki_BB3/items/fd410ef29935169aad9d)

該当セキュリティグループのインバウンドにhttpsを追加し、アクセスができる様に。

### Frontend→認証サーバのAPIアクセスがそもそも、できない（その1）

**原因:オレオレ証明書だとAPIアクセスでは証明書のエラーでアクセスできない。ブラウザだと画面で操作して進むことはできるやつにひっかかる**
    
route53にてドメイン取得+サブドメインを取得
AWS CertificateManagerでSSL証明書のリクエスト
証明書の確認用のDNS設定を行う
ELBの443リスナーの証明書を上記のものに変更
でいけた。

### Frontend→認証サーバのAPIアクセスがそもそも、できない（その2）

**原因：ブラウザ側でエラーがでている。**

`No 'Access-Control-Allow-Origin' header is present on the requested resource.`

ああ、CORSか。確かにそうだった。

CORSについてはこのサイトがよくまとまっていました: [CORSまとめ](https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34)

認証サーバーはRailsで動いているのでgem`rack-cors`を入れて、`application.rb`などで`allowed_origin`の設定をして。

詳しい手順はこちら: [https://qiita.com/residenti/items/3a03e5e0268b354284b7](https://qiita.com/residenti/items/3a03e5e0268b354284b7)

### 認証が完了し、Frontendにコールバックするも、APIアクセスでアクセスがpendingされる

**原因:API側のELBが80(http)のみだったことで、アクセスできなかった。**

またかい！学習しろ！おれ！（だってサーバーとかコードとか同時に３つづつあるし・・・・・ややこしいやねん）

APIのELBにリスナー:443を追加、~~オレオレ証明書~~ **ACMで証明書を取得し設定**
セキュリティグループのインバウンドも設定

でいけた。

あ、もちろんAPI側のCORSの設定もちゃんと行いました！

## まとめ

めちゃくちゃ時間かかった（4日＊8h）なのに書いてみたらこんだけだった・・・。
最初にELBをめんどくさがってhttpだけで立てたことがそもそもの原因（その時は諸々都合でドメインを取得するタイミングではなかったので）
Stagingでも最初からhttpsにして、オレオレ証明書を使わないでちゃんとProductionに寄せた設定をすることをお勧めします！
Lightning Message Channel をデプロイしてみた

この記事では、Lightning Message Service を利用するための Lightning Message Channel を Winter '20 のプレリリース環境に SalesforceDX でデプロイする手順を紹介します。


# Lightning Message Service とは
Lightning Message Service では、 Lightning Message Channel を介して Visualforce ページと Lightning コンポーネント(Aura, LWC)間で PubSub 方式の通信が可能になります。
Winter '20 リリースでは開発者向けプレビュー機能として、 Developer エディションでのみ利用可能となる予定です。

<img width="480" alt="スクリーンショット_2019-09-14_12_05_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26378/a5a58da2-5468-1eda-9084-d8ba71485482.gif">
[Salesforce Winter ’20 Release Notes | Communicate Across Salesforce UI Technologies with Lightning Message Service (Developer Preview)](tps://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lc_message_channel.htm) のサンプルコードより


## プレリリース版 Developer 環境を取得
[Winter '20 プレリリース環境のサインアップページ](https://www.salesforce.com/form/signup/prerelease-winter20/) から Developer エディションの環境を取得します。

<img width="480" alt="スクリーンショット_2019-09-14_12_05_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26378/c18d1005-436f-06b4-849f-64797f1e2102.png">

## プレリリース版 SalesforceDX プラグインをインストール
*Lightning Message Channel* をデプロイするには API バージョンが 47 以上である必要があるので、 sfdx もプレリリース版を利用します。

```bash
$ sfdx plugins:install salesforcedx@pre-release
$ sfdx plugins --core
> salesforcedx 47.0.7 (pre-release)
```


## SFDX プロジェクトを作成
Visual Studio Code を開き、 `Command + Shift + p > SFDX: Create Project with Manifest` でプロジェクトを作成します。
次に、 `Command + Shift + p > SFDX: Authorize an Org` で Winter '20 プレリリース環境にログインしておきます。

## Lightning Message Channel を作成
今回は *Custom Message Channel* をという名前のメッセージチャネルを作ってみます。
以下のコマンド、または同等の操作でメタデータを作成します。

```
$ mkdir force-app/main/default/messageChannels
$ touch force-app/main/default/messageChannels/SampleMessageChannel.messageChannel-meta.xml
```

そして、以下の要領でファイルを編集します。

```xml:force-app/main/default/messageChannels/SampleMessageChannel.messageChannel-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>Sample Message Channel</masterLabel>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <fieldName>recordId</fieldName>
    </lightningMessageFields>
    <lightningMessageFields>
        <fieldName>recordData</fieldName>
    </lightningMessageFields>
</LightningMessageChannel>
```

```xml:manifest/package.xml
<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
    ...
    <types>
        <members>*</members>
        <name>LightningMessageChannel</name>
    </types>
    <version>47.0</version>
</Package>
```

##  Lightning Message Channel をデプロイする
VS code の Explorer 上の `manifest/package.xml` を `右クリック > SFDX: Deploy Source in Manifest to Org` でデプロイが開始します。

<img width="480" alt="スクリーンショット 2019-09-14 12.46.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26378/0d9276bc-5ad4-d87f-6084-43732ff1ef20.png">

正常終了すれば完了です。
Metric Learningを用いた不均衡画像の異常検知

#はじめに
目視検査の自動化は多くの企業で取り組まれているのではないかと思います。しかし、不良率が低い場合が多く、不良品画像が思うように集まらないのが実情ではないでしょうか（良品画像と不良品画像の数が不均衡なので、ここでは不均衡画像と呼びます）。このような場合、従来技術では上手く学習させることが困難でしたが、今回Metric Learningを活用して上手く学習することが出来たので、紹介させて頂きます。

#Metric Learningとは
下記記事が大変参考になります。

モダンな深層距離学習 (deep metric learning) 手法: SphereFace, CosFace, ArcFace
https://qiita.com/yu4u/items/078054dfb5592cbb80cc

#コード
githubに上げました。（コード汚いです、スイマセン）
https://github.com/chocolat-nya/Imbalanced_Image_Anomaly_Detection

#精度
実データにつき詳細は伏せさせて頂き、結果だけ載せます。
####ケース①
OK画像：2932個（train:test=2345:587）
NG画像：9個（train:test=7:2）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324379/200153db-2986-feb4-9dc4-39c6372842a4.png)

|　　|　|予測||
|--:|--:|--:|--:|
|　　|  |OK|NG|
|正解|OK|587|0|
|　　|NG|0|2|

上図のように、アウトプットは異常度で出てきます。右から２つがNG画像、その他がOK画像です。
しきい値の引き方に決まりはありませんが、今回はOKテスト画像の異常度の平均＋６σとしました。
パーフェクトです。
ヒートマップも出ますが、ここでは割愛します。

####ケース②
限界を知るため、NG画像を２枚にしてトライしてみました。
OK画像：2932個（train:test=2345:587）
NG画像：2個（train:test=1:1）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324379/1d50e992-859f-f356-8e44-36c55078145f.png)

|　　|　|予測||
|--:|--:|--:|--:|
|　　|  |OK|NG|
|正解|OK|587|0|
|　　|NG|0|1|

一番右がNG画像、その他がOK画像です。しきい値は同じく平均＋６σです。
予想に反して分離出来てしまいました。ただ、異常度の開きは小さくなっています。
ｎ増ししたらヤバそうです。やっぱりそこそこのNG数は必要でしょう。

#まとめ
Metric Learningを使ったら不均衡画像の異常検知が出来てしまいました。
これはちょっとしたブレークスルーではないでしょうか？

#Special Thanks
下記のサイトを参考にさせて頂きました。

DeepAnomalyDetection_benchmark
https://github.com/shinmura0/DeepAnomalyDetection_benchmark

CNNの学習結果を可視化する
https://qiita.com/tom_eng_ltd/items/8d60108b03afe38dff27
⇒Grad-CAM、Grad-CAM++よりも安定してヒートマップが出せます。

EfficientNetを最速で試す方法
https://qiita.com/wakame1367/items/d90fa56bd9d11c4db50e

kerasでScore-CAM実装．Grad-CAMとの比較
https://qiita.com/futakuchi0117/items/95c518254185ec5ea485

#言い訳
初めてQiitaに記事を書いたので、非常に見にくいと思います。ゴメンナサイ。

#追記
20200511　EfficientNetとScoreCAMを導入しました。
Edge のテキストの×ボタン（クリアボタン）をVue.jsで検知できない


タイトルの通り。多分Vueを使っている方はご存じだろうが、一応載せておく。
解決案は微妙。こんな小手先の技ではなく、ブラウザか、Vueの中でどうにかしてほしい。

## フォーム入力バインディング

Vueでは、v-modelを使うことによってinput要素とデータを双方向バインディングすることが出来る。便利。

フォーム入力バインディング（Vue公式ページ）
https://jp.vuejs.org/v2/guide/forms.html

```vuejs
  <input type="text" v-model="message">
  <p>message: {{ message }}</p>
```
```javascript
data: {
    message: '',
},
```

<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497222/25977024-a985-8b81-b441-8d4fee3d881e.png">

## Edgeのテキストの×ボタン
下の画像の×ボタン。このボタンを押下することでテキストの中身を一気にクリアすることが出来る。この機能自体は便利である。
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497222/6e0770ff-f987-1cd8-30e1-2200e76bd7e3.png">

しかし、見た目上は消されるのだが、Vue側の値が更新されない・・・。非常に困る。
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497222/34234b62-4d07-e4d2-31cf-2aa5b32c5ec9.png">

## 解決案１：×ボタンを表示しない
CSSで::-ms-clearを非表示にする。臭いものに蓋を。
ただこれはクリア機能を制限しているだけであり、あまり良い解決案とは言えない。

```css
input[type=text]::-ms-clear {
  display: none;
}
```
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497222/518a7057-5511-64e8-2597-e4a90aa97b97.png">

## 解決案２：フォーカスアウト時に入力されている値をチェックする
Vueではref属性を利用することで要素自体に直接アクセスすることが出来る。
これを使い、フォーカスアウト時に実際に入力されている値を直接取得することでVueの値も更新をかけることが出来る。
リアルタイムで入力値を反映させる必要が無いようなWebフォームでは有効だろう。
（例：ユーザに情報を入力させ、最後に保存をさせるような画面）

しかし、個人的にこの解決案は好きではない。仕方ないとはいえ要素に直接参照しに行く方法はVueの方針に合っていない（と思う）。綺麗でない。

```vuejs
  <input ref="text" type="text" v-model="message" @focusout="focusout">
  <p>message: {{ message }}</p>
```

```javascript
methods: {
    focusout(){
        // $refs.textを取得し、更新
    	this.message = this.$refs.text.value;
    },
},
```

×ボタン押下直後はまだ値が残っているが、、、
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497222/be38f917-fe60-8a90-57a5-dc54244ecfc4.png">

フォーカスアウト時には値を更新することが出来る。
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497222/baa6bad5-b963-c9c8-5586-bf79b006bc18.png">

## 打つ手なし・・・
この通り50点ぐらいの解決案しかない。こんな案で良ければご利用ください。
もし、もっと良い案あれば是非お待ちしております。

2019/09/17追記 コメントでもいただきましたが、どうしてもクリア機能が欲しいのなら自分でテキストエリアの横にクリアボタン作れば良いですね。ご参考までに。
Clojure 1.8.0を Androidで動かす

## 背景
以前より、Android上で、動作の確認をしたり、関数の動きをみたりするのに、ClojureのREPLを使っていましたが、Clojure for Androidの開発が1.7.0でとまって久しいので、ずっと1.8.0にしたいと考えていました。

## 概要
今月に入って、[clojure-android](https://github.com/clojure-android)本家の変更点をみながらボチボチやっていたのですが、ようやく動作するようになったので公開しました。

主な変更点は、ほとんど本家からアイデアおよびソースをいただいてますが、別途開発されているnreplの変更をしないでいいように、一部変更しています。

詳しくは [myst3m/clojure](https://github.com/myst3m/clojure)


<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204921/f759d299-9982-00e7-ade0-0bd8ff50020b.png width=50%>

## Todo
#### クラスローダーの改修
関数のちょっとした動きの確認が主なので、自身の用途としては問題ないのですが[別の記事](https://qiita.com/anolivetree/items/2da36088a8083ff23a93)にもあるように、クラスの動的ロードの部分で
クラスのバイト列を一度ファイルに保存して、Dex形式に変換してとやっているので、そこを改修するといいかも

#### Clojure 1.9への対応
時間のあるときに試してみる
Ethereumのアカウントロックが解除出来ない時の対処法

# メモ
gethのバージョン1.9を使っていてpersonal.unlockAccountでロック解除が出来なかったので、簡単な内容ですが対処法をメモ

#対処法
gethの起動オプションに「--allow-insecure-unlock」を付ける。

バージョン1.9から追加されたオプションで、デフォルトではRPC経由のアカウントロックが解除出来ないようになっています。
#Codepen で javascript ファイル / css ファイルのURLを得るには、 .js / .css 拡張子をつけてアクセスするだけでok

例:

https://codepen.io/yumainaura/pen/ZEzRgaR

https://codepen.io/yumainaura/pen/ZEzRgaR.js

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2432








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
webarenaでubuntu その48

#概要

webarenaでubuntu18.04やってみた。
練習問題やってみた。

#練習問題

新規にdomainを公開せよ。

#レジストラで、domainを買う。

#プライマリーDNSの設定。

Bindでzoneファイル作る。

```
$TTL	86400
@	IN	SOA	foge.com. root (
	2019081301
	10800
	3600
	604800
	86400
)
@	IN NS ns.foge.com.
@	IN MX 10 mail.foge.com.
ns	IN A 100.100.100.100
www	IN A 100.100.100.100
mail    IN A 100.100.100.100
```

#セカンダリーDNSの設定。

maihama-net.comを使う。

#レジストラにDNS設定

```
Primary: ns.foge.com
Secondary: ns1.maihama-net.com
Secondary: ns3.maihama-net.com
```

#dns伝播を待つ

一週間待つ。

#adduserする。

```
sudo adduser hoge

```

#ftpする。

public_htmlに、index.html

#WWWの設定。

000-default.conf

```
<VirtualHost *:80>
	ServerName hoge.com
	ServerAdmin webmaster@localhost
	DocumentRoot /home/hoge/public_html/
	<Directory /home/hoge/public_html>
		AllowOverride None
		Require all granted
	</Directory>
</VirtualHost>
```

#MAILの設定。

main.cf

```
virtual_alias_domains = hoge.com
```

以上。
CentOS7.6にDockerをインストールする

Dockerインストール時のメモ書きです。

## 作業環境
```
[admin@localhost ~]$ cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core) 

[admin@localhost ~]$ uname -a
Linux localhost.localdomain 3.10.0-957.27.2.el7.x86_64 #1 SMP Mon Jul 29 17:46:05 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux
```

## Dockerインストール手順

```
# dockerのインストール状況を確認する
#  dockerがインストールされている場合は参考資料を元にアンインストール手順を実施する
[admin@localhost ~]$ yum list installed | grep docker

# 依存パッケージ追加
[admin@localhost ~]$ sudo yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2

# レポジトリ追加
[admin@localhost ~]$ sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo

# dockerをインストール
[admin@localhost ~]$ sudo yum install docker-ce docker-ce-cli containerd.io

# dockerバージョン確認
[admin@localhost ~]$ docker -v
Docker version 19.03.2, build 6a30dfc

# dockerデーモンを起動する
[admin@localhost ~]$ sudo systemctl start docker

# hello-worldを実行
#  Hello from Docker! が表示されたら無事にインストール完了
[admin@localhost ~]$ sudo docker run hello-world

# dockerデーモンを自動起動させる設定を追加
[admin@localhost ~]$ sudo systemctl enable docker
```

# 参考資料

- [Get Docker Engine - Community for CentOS](https://docs.docker.com/install/linux/docker-ce/centos/)
Qiitaに投稿するときに大切なこと

## 目的

Qiitaに投稿するときに大切なことを知りより簡単に質の良い記事を作る。

## 注意

本内容は筆者の所感であり、一般的な考えからは逸脱している可能性が大いにある。

## 筆者が思う大切なこと

### 他の人のためではなく自分のために書く

本来技術系の記事は第三者に向けた発信として考えられがちである。ただ、「第三者のためになる記事を書かねば、、」となるとかなりハードルが高くなり気を張ってしまう。何なら一度書いた記事も「これはわかりやすかな？大丈夫かな？」などと気にしてしまうこともある。
ならば、未来の自分のために記事を書こう。すべての記事がそうではないが、作業に詰まったとき、過去に書いた自分の記事をまず漁ることから始める。
有名人が書いた技術ブログ・有名企業のオーガニゼーションのQiitaの記事よりも「過去の自分が書いた記事」は時としてわかりやすい事がある。記事を書いた人にしかわからないその時の記憶が呼び覚まされるためだと思われる。
思わぬ解決方法を思い出したりする。
ただ、完全にメモレベルだとそれはそれでQiitaの記事を書く心得に抵触するので、程々にある程度はしっかり記載しよう。

### 投稿することをためらわない

投稿をするときの一番の障壁がこれだと感じる。
「こんな投稿内容で大丈夫だろうか・・・？」「自分なんかの知識を投稿して恥ずかしい思いはしないだろうか・・・？」なんて言葉が心をよぎる。
そんなことはない。あなたの知識一つ、コマンド一つで救われる人がいる。
少ない情報でも、0か1かで大きな違いになるので、投稿ボタンを押すときに無心で押そう！

### 誰かが見てくれている

投稿すると、投稿主には閲覧数が表示される。
投稿数が0ではないことに注目しよう。
自分が書いた記事が１日で数十人の方に見られていることが分かる。
投稿の内容が間違えていたら、編集リクエストを送ってくれる方もいる。
誰も見ないなんてことはありえない。

### テンプレートを決めよう

トレンド上位の記事をいくつか確認して見やすいテンプレートを研究してみよう。
見出しの使い方、画像の挿入など、圧一定の品質をもって内容を書くことにより自分自身楽に内容が書ける。
ちなみに筆者はだいたい「概要」「※注意」「※前提」「内容」「※参考文献」を記載している（※は省略する場合もあり）

### 読みやすい記事を意識しよう

文言の統一や句読点、言い回しなどを統一するとストレスなく読める。
最悪複数投稿にまたがり統一する必要なし、最低でも一つの投稿の中では統一しよう！！！

### 何番煎じの内容でもOK

「この投稿と同じ内容はもうすでにqiitaにあるから・・・投稿しなくていいかな・・・」はNG！！！！！！
どんなにコアな内容でも十中八九先人がいる。
記事を丸パクリすることはだめだが、環境構築などは意図せず同じような記事になりやすい。(目的が一緒だから)
しかし、つまずく箇所は人それぞれ違う。ものの見方も違う。同じ内容でもAさんの投稿とBさんの投稿では書き方、説明の仕方が違う。結果は同じでも閲覧者はより自分に合った投稿を選ぶことができる。
内容が似通ってしまい、不安に思うことがある方は自分の投稿に、似てる記事を書いている方のリンクを張ろう。
qiita内でqiitaのほか記事のリンクを張るとリンク先のユーザにリンクされた通知が行く。正直これをされるとリンクされた側はめっちゃうれしいです。「こちらの記事を参考にさせていだたきました。」と書かれると天にも昇る気持ちになるので同じような内容でも積極的に投稿しよう！！
なんなら自分が過去書いた記事の二番煎じでも全く問題ない。過去同じ題材で記事を書いたときと、今のあなたでは知識量が違い、経験が違う、違った視点で記事がかけるだろう。
何なら新しく書く記事に、過去の自分の記事のリンクを貼っておこう。後から見返したときに、題材のスコープを絞って自身の成長を感じることができる。

### コマンドや処理の動作環境を書こう

これは結構大切。
読み手を意識することにも通ずるが、自分の動作化環境、実行環境まとめると参考にする人が困らない。
なるべく記事の最初に書いてあげるとより良い！筆者は最近Qiitaの記事のタグで動作環境を記している。
OSやハードの機種名を書いてあげると読む側は記事を選ぶ際に無駄な時間がない。
タイトルに書いてあげるとより良い！「Windows10で ○○の環境構築をした時に詰まったこと」など！

### いい投稿を見よう

トレンドにはたくさんの良い投稿が転がっている。
わかりやすい投稿や読んでていて面白い投稿など様々なものがある。
どんどん真似をして自分の記事を読みやすいものにしよう！
最初の投稿は「読みやすい記事とはどんな記事か」などでも面白いかもしれない

## まとめ(前述の内容以外も含む)

投稿にいいねなどのアクションがつくことを期待せず、閲覧数をみて誰かが見てくれていることを知ってモチベーションにしよう！
1ステップでも、1コマンドでもいいからとにかく持ってる知識を投稿しよう！
かっこいい投稿をする必要はなく、継続して投稿しよう！
動作OSや環境をタイトルに入れよう！
自分で書くのがめんどくさくなるような長い投稿はやめよう！(筆者は書くことに飽きるといくつかの投稿に分けています。)
ほかの記事に積極的にいいねやストック、コメントを残す心がけをしよう！
RPAの失敗事例よくある話とその対策

近頃RPAの導入がブームになっているが、現場に良かれと思って導入したのに思ったように効果が出なかったり現場から反発があって結局あまり使われていない、といった事例をよく聞く。そのような事例からのヒアリングも含めて、どのような対策を打てばRPAの導入を成功させられるのか考えてみた。

# RPA失敗談あるある


* 業務や取引先ごとにばらばらにロボットがなし崩し的に稼働して運用コストが増えてしまった。
* いろいろな業務でRPAが試されていて、全体を把握できない。
* 現場のスキルやノウハウが不足していてなかなか進まない。使用率があがらない。
* 個別のロボットの稼働状況を見てみたら、意外と稼働していなく最適化されていなかった。
* ITスキルが高いエンジニアがロボットを作ったが、その人の業務をRPA化しているだけで他の人には理解ができない。ますますブラックボックス化してしまった。
* ロボットを作成した担当者が異動してしまい、だれもそのロボットのことがわからなくなった。
* 現場のメンバーのモチベーションがわかない。業務を取られるのではないかという反発が起こってしまった。
* ウォーターフォール型の開発プロジェクトを組んでしまい、スピード感がなくなるうえに成果物が現場のニーズと違ってしまう。

# 対策

* RPA化を行う前に、まず業務の見直しを行う。BPOを行う際の業務整理のプロセスを事前に入れておくとよい。業務整理をしたうえで再定義されたタスクについて、汎用性が高い業務は市販のパッケージソフトを導入することを考え、その次にはシステム化することを考えるべきである。残りのシステム化できない部分は現場で同ハンドルするかをRPA、手作業の外注 (アウトソース)、従業員による手作業のどれでやるべきかを検討する。

|業務汎用性|プレイヤーと提供/作業内容|
|:--|:--|
|レベル3|**パッケージベンダー**<br/>パッケージソフトウェアとAPIの提供|
|レベル2|**SIer**<br/>システム間連携 (APIの呼び出しプログラム)の構築|
|レベル1|**業務の現場メンバー**<br/>(1) iPaaS, RPA<br/>(2) 手作業の外注<br/>(3) 従業員による手作業|

* 業務整理やRPA化にかかわる知識を社内で集める **Center Of Excellence (COE) 部門**を立ち上げる。メンバーには、コミュニケーション力とやる気が高い若手や女性をアサインしておくとよい。
* 全体の把握ができるように、最初から**サーバ型RPA**を使う。PoC自体は最初は現場主導でやらせたり、目安箱を設けてRPA化/見直ししてほしい業務を募ってみてもいいだろう。プロジェクトが進んできたら、IT部門やCOE部門によるガバナンスを効かせていくのが良い。
* 現場で高いスキルを持った人が継続的に活用できるとは考えないほうが良い。その人が異動してしまった場合のことを常に考えてみる。RPAツールは、高度なプログラミングスキルを持っていなくても扱えるものを選んで運用すべきである。
* ロボットの稼働状況は全体が見えるようにレポートを作成する。とはいっても、人間がロボットの稼働状況を調べて報告するようでは本末転倒なので、サーバ型RPAで**レポーティングツール**がついているものを活用して自動で見える化できるようにしておく。
* ロボットは作成する前に、まず誰にでもわかる形式で**仕様書**を作成する。
* RPAにかかわるメンバーや対象部門のメンバーには、RPA化/業務効率化することの意義を伝え、仕事を取り上げられるリスクがないことを伝える。うまく効率化できた場合には**表彰**したり、**意識改革 (ジョブ・クラフティング)**を行うなど、ソフト面でも部門で仕組みを作ってサポートをする。
* [DevOps](https://qiita.com/bremen/items/44c3de10413f45f9f41e)型の開発手法を取り入れ、現場とロボット作成者が綿密に連携を取りながらCI/CDを行っていく。


# まとめ
RPAの目的はあくまでも**業務の効率化**であり、RPAの導入そのものをプロジェクトのゴールにしないほうが良い。RPAはあくまでも業務効率化の手段の一つであり、他にも手段はある。他の手段の方が優れている場合も多々あるので、RPAの導入を単体で考えるのではなく、**他の手段と組み合わせた一緒のプロジェクト**として立ち上げることがお勧めである。また、**事前の業務見直し/整理は必須**である。既存業務をそのままRPA化することは考えないほうが良いだろう。

加えて、RPA導入は従業員の今後のタスクアサインとも密接に絡んでいるため、半分はコミュニケーションの課題でもある。対象部門内のコミュニケーションを円滑にする、**コミュニケーション能力の高い若手や女性**をコアなプロジェクトメンバーに入れることで、より円滑に進むだろう。
LaravelのSeederとFactoryとFaker

PHPフレームワークLaravel Webアプリケーション開発 の5章を読んで、LaravelのSeederとFactoryとFakerについてわかったこと

### わかったこと

- シーダーはテストデータや初期データをデータベースに登録する仕組み
- シーダーを作成したら `database/seeds/DatabaseSeeder.php` に登録する
- Fakerはダミーデータを生成する仕組み（シーダーで登録するデータの中身）
- Factoryはデータを登録する処理の内容を定義するクラス。fatoryがあったら、シーダー側では登録したいデーターのfactoryを呼び出すだけで良い👌 （factoryがなかったら、登録する処理をシーダーに直接かく）

### Factory

- `php artisan mak:factory Model\Factory` でFactoryの雛形を作成

```database/factories/ModelFactory.php
<?php

use Faker\Generator as Faker;

$factory->define(App\Book::class, function (Faker $faker) {
    $now = \Carbon\Carbon::now();
    return [
        'isbn' => $faker->isbn13,
        'published_date' => $faker->date($format = 'Y-m-d', $max = 'now'),
        'price' => $faker->randomNumber(4),
        'created_at' =>$now,
        'updated_at' => $now
    ];
});
```

### Seeder


- `php artisan make:seeder BooksTableSeeder` でSeederの雛形作成

```database/seeds/BooksTableSeeder.php
<?php

use Illuminate\Database\Seeder;

class BooksTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(\App\Book::class, 50)->create();
    }
}
 
```

- シーダーを登録

```database/seeds/DatabaseSeeder.php
<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // $this->call(UsersTableSeeder::class);
        $this->call(AuthorsTableSeeder::class);
        $this->call(BookdetailsTableSeeder::class);
        $this->call(BooksTableSeeder::class);
    }
}
```

- `php artisan db:seed` でSeederを実行

- たくさんデータが入ってる

<img width="1276" alt="laravel-proto____dev_src_github_com_shimabukuromeg_laravel-proto__-_laravel_local_books__laravel_local_localhost_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70148/1ff773fc-f6ad-ea5d-7f6a-952e73f289bb.png">


### そのほか

- もう少し細かい作業ログ https://github.com/shimabukuromeg/laravel-proto/issues/13
- ドキュメント 
  - https://readouble.com/laravel/5.8/ja/seeding.html
  - https://readouble.com/laravel/5.8/ja/database-testing.html