OmniAICreator/Qiita-1.07M huggingface dataset:
【Django】'bootstrap4' is not a registered tag library.

## はじめに
formタグをcssで装飾したくてdjango-bootstrap4を用いようとしたのだが、本タイトルのようなエラーがでたので、対処方法を備忘録として投稿する。

## 対処方法

1. django-bootstrap4をインストールする

``` $ pip install django-bootstrap4```

2. settings.pyのINSTALLED_APPSに追加する

``` python:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'bootstrap4'
]
```

## おわりに
以下を参考。
https://github.com/monim67/django-bootstrap-datepicker-plus/issues/10
Vue初心者のメモ2

[その１](https://qiita.com/hysk/items/900b405e9759852db679)
# コンポーネントの基本
名前付きの再利用可能なVueインスタンス
コンポーネントのdataオプションは関数でなければならない→各インスタンスに独立したdataを保持させるため
コンポーネントの登録はグローバルとローカルの２種類がある
全てのコンポーネントに単一のルート要素が必要

## 子コンポーネントのイベントを購読する
v-onを使って任意のイベントを補足することができる

親コンポーネントでenlarge-textイベントを購読

```
<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1">
</blog-post>
```

子コンポーネントでは$emitメソッドを使ってenlarge-textイベントを送出する

```
<button v-on:click="$emit('enlarge-text')">
  enlarge
</button>
```

#### イベントと値を送出する
$emitの２番目のパラメータで値を送出できる

```
<button v-on:click="$emit('enlarge-text', 0.01)">
  enlarge
</button
```

#### コンポーネントでv-modelを使うことも可能
[公式ドキュメント参照](https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86)

## スロット
```
<alert-box>
  This is error message.
</alert-box>
```
```
Vue.component('alert-box', {
  template: '
    <div>
      <strong>
        <slot></slot>
      </strong>
    </div>'
})
```

# コンポーネントの登録
コンポーネント名は全て小文字でハイフンが含まれている形式が望ましい

# Vue-CLI
環境の切り分け
[公式ドキュメント](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)
node.jsのバージョン変更(nvm)

#目的
node.jsのバージョンを変更する
AzureのWebAppsを使用する時にバージョンのよってはLinuxのみの対応だったりWindowsだけの対応だったりするので、今回導入した

#nvmのインストール
```
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
```

#ltsバージョンの使用
```
nvm install --lts
nvm use --lts
```

#確認1
```
node -v
v10.16.3
```
この時点のltsバージョンが使用されている

#使用できるバージョンの確認
```
nvm ls-remote
```

#特定バージョンのインストール
```
nvm install v10.6
nvm use v10.6
```
webappsでWindows対応最新版だった10.6をインストールして切り替え

#確認２
```
node -v
v10.6.0
```

#結果
切り替えが自由にできるようになった。
webappsでnode.jsは最新版が推奨バージョンと言っている割にはOSが片方しか対応してなかったりするのなんでだろう？
特に現在はLinuxが一部機能が使えないので、出来るだけWindowで作りたい
（将来的に同程度の機能になったらわからないけど。。。Dockerとか使うこと考えるとLinuxでやっておいた方が良かったりする？）
timedelta（Python）のマイナス値表現の謎

python（3.7）の`timedelta`で負になるような値を作ろうとすると、困惑することがあります。その謎を追ってみました。

# timedeltaで正・負それぞれつくってみる
## 正になるパターン

```python
In [1]: import datetime

In [2]: n = datetime.datetime.now()

# 現在時刻 - (現在時刻1秒前) = 1秒
In [3]: t = n - (n - datetime.timedelta(seconds=1))

In [4]: t
Out[4]: datetime.timedelta(seconds=1)
```
特に何の違和感もないですね。

## 負になるパターン

```python
# 現在時刻 - (現在時刻1秒後) = -1秒
In [5]: t = n - (n + datetime.timedelta(seconds=1))

In [6]: t
Out[6]: datetime.timedelta(days=-1, seconds=86399)
```

！？

直感では`timedelta(seconds=-1)`とか出てきそうなもんですが、なんだかデカイ値がでてきました。しかしこの結果、冷静に考えてみれば、

1. 1日前かつ、
1. 86399秒後（1日は86400秒）

なので、「1秒前（-1秒）」と同じになります。

# なぜか？
ドキュメントよく見ると書いてあるんですよね、これ。

> さらに、値が一意に表されるように days, seconds, microseconds が以下のように正規化されます
> ・0 <= microseconds < 1000000
> ・0 <= seconds < 3600*24 (一日中の秒数)
> ・-999999999 <= days <= 999999999

https://docs.python.org/ja/3/library/datetime.html#datetime.timedelta

つまり、**値の一意性を保つためにsecondsとmicrosecondsの値を正の値に限っています。** （あと、上の単位にまとめられるは場合はまとめるもしている）

## どういうこと？
なぜこのような設計にしたか、という具体的な議論や文書は見つかりませんでした。
普通に考えられる点としては、比較の実装が単純になるということでしょうか。

例えば、`seconds`にマイナス値を許す場合、以下は同じであると判定しなければいけません。

* `timedelta(seconds=-1)`
* `timedelta(days=-1, seconds=86399)`

こうなると、timedeltaオブジェクトの比較時に毎回計算が必要になってしまいそうです。しかし、一意性があるならば、それぞれ3つの数値フィールドがすべて同じであれば同一であるという簡単な実装が行えます。

実際、timedeltaの実装（ぽいもの）を見てみるとそのような感じでした。
以下、[cpythonレポジトリ](https://github.com/python/cpython/blob/master/Modules/_datetimemodule.c#L2145
)から抜粋

```c
# 抜粋
static int
delta_cmp(PyObject *self, PyObject *other)
{
    int diff = GET_TD_DAYS(self) - GET_TD_DAYS(other);
    if (diff == 0) {
        diff = GET_TD_SECONDS(self) - GET_TD_SECONDS(other);
        if (diff == 0)
            diff = GET_TD_MICROSECONDS(self) -
                GET_TD_MICROSECONDS(other);
    }
    return diff;
}
```
すごく単純な計算ですよね。ちなみに正規化の計算自体は[こちら](https://github.com/python/cpython/blob/master/Modules/_datetimemodule.c#L501)でやってそうでした。

# ちなみに
コンストラクタは負の値を受け入れることができます。内部で先ほどの正規化関数により値が操作されています。

```python
In [14]: datetime.timedelta(seconds=-1)
Out[14]: datetime.timedelta(days=-1, seconds=86399)
```

# 注意点
これ、つまりは`timedelta`オブジェクトの`seconds`, `microsenconds`フィールドの単体での利用は注意が必要ということです。

```python
In [15]: datetime.timedelta(seconds=-1).seconds
Out[15]: 86399
```

ここで得たいのは`-1`なはず。`total_seconds`メソッドを使えば期待した結果が得られます。（floatですけど）

```python
In [16]: datetime.timedelta(seconds=-1).total_seconds()
Out[16]: -1.0
```
`total_microseconds`の実装はないようでした。

現場からは以上です。
Pyrightで型チェックしたいのにimportで怒られるときの対処法

PyCon2019の真っ只中でございます.
先程Pyrightに関してポスターセッションしてたら「同じところでつまづいた! Pyrightに関する情報あまりないからぜひ記事にしてほしい!」と言っていただけたので, すぐさま記事にすることにします!

# Pyrightってなんなの?
Pyrightってなんなの? どうやって導入するの? ってことに関しては別途記事用意します!
なんたって今はPyConの隙間時間だからね!(勢い大事)

# 該当するエラー
Pyrightをいれたけどなんか`import`の部分で怒られる!もうPyright使わない! って人はいるはず.少なくとも僕はそうでした.
エラーとして引っかかるのは `Import (ライブラリ名) could not be resolved` と `(ライブラリ名) is unbounded` でしょうか?
それは解決できます!
<img width="638" alt="スクリーンショット 2019-09-16 16.19.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139991/0cf9d4c3-ba50-045a-a79a-44e503139670.png">

# 解決法
`pyrightconfig.json`を用意しましょう! 大抵このエラーでつまづく人はこれを用意してないはず. 僕も用意していませんでした.
プロジェクトのルートディレクトリに `pyrightconfig.json`ってファイルをつくって, 自分が使う`venv`の情報を記述してあげましょう.

こんなかんじ

```json

{
    "venvPath": "/Users/tenajima/.venvs",
    "venv": "dev_374"
}
```
`venvPath` には自分のvenvが保存されてるところ.
`venv`にはその中で今自分が対象としたいvenvを指定してあげてください.
これを用意して, VS codeを再起動とかしてあげれば変なところで怒られることはなくなるはず!

# 最後に

「Pyrightいいよねー」, 「導入したけど謎なところで怒られてやめた」という声をPyConで聞けたのでこの記事が少しでもみなさんの役にたてれば嬉しいです!
引き続きPyCon楽しむぞー!
LightGBMをRubyでつかってみた

# はじめに
[LightGBM](https://github.com/microsoft/LightGBM)は、Microsoftの[Guolin Ke](https://github.com/guolinke)氏が中心になって開発している勾配ブースティングのフレームワークです。先日[Ankane](https://github.com/ankane)氏がRubyバインディングを公開しましたので、これを使ってMNIST手書き文字の識別をやってみます。

# 準備とインストール

* [LightGBM](https://github.com/ankane/lightgbm)
    * lightGBMは[Gemに内蔵](https://github.com/ankane/lightgbm/tree/master/vendor)されている。
* [Red Datasets](https://github.com/red-data-tools/red-datasets)
    * Ruby から MNIST などのデータセットを呼び出す時に便利。

```sh
gem install lightgbm
gem install red-datasets
```

# 実行する

```ruby
require 'lightgbm'
require 'datasets'

train_mnist = Datasets::MNIST.new(type: :train)
test_mnist  = Datasets::MNIST.new(type: :test)

train_x = train_mnist.map(&:pixels)
train_y = train_mnist.map(&:label)

test_x  = test_mnist.map(&:pixels)
test_y  = test_mnist.map(&:label)

params = {
  task: :train,
  boosting_type: :gbdt,
  objective: :multiclass,
  num_class: 10
}

train_set = LightGBM::Dataset.new(train_x, label: train_y)
booster = LightGBM.train(params, train_set)

result = booster.predict(test_x)
result.map! { |i| i.index(i.max) }
accuracy = test_y.zip(result).count { |i, j| i == j } / test_y.size.to_f
puts accuracy

```

0.9727

短時間でかなりの精度が得られるようですね。


# 参考資料
* [LightGBM 徹底入門 – LightGBMの使い方や仕組み、XGBoostとの違いについて](https://www.codexa.net/lightgbm-beginner/)
RailsのDBをMySQLへ #最初からMySQLを指定  #途中からMySQL

#最初からMySQLを指定

`rails new`のときに､DBをMySQLに指定する｡
下記コマンドでデフォルトのDBMSがMySQLへ変わる｡

```ruby:
$bundle exec rails new . --database=mysql
```

または

```ruby:
$bundle exec rails new . -d mysql
```

※rails newコマンドにオプション(ハイフンより後ろを追加すればOK
※上記2種類のオプションのどちらが良いのかは調べていませんが､追々調べたいです｡

#途中からDBをMySQLへ

※MySQLのインストールやセキュリティ設定？はすでに終わっているのを前提とします｡

Gemfileへ追記とconfig/database.ymlファイルを変更します｡

###Gemfileへ追記

```index:Gemfile

gem 'mysql2'
```

これで`$bundle install`

###database.ymlファイルを編集

※変更前の内容と変更後の内容は､SQLiteで`rails new`したときの`database.yml`の中身と､MySQLで`rails new`したときの`database.yml`の中身をのせています｡

```ruby:変更前
# SQLite version 3.x
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: db/development.sqlite3

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: db/test.sqlite3

production:
  <<: *default
  database: db/production.sqlite3


```

```ruby:変更後
# MySQL. Versions 5.1.10 and up are supported.
#
# Install the MySQL driver
#   gem install mysql2
#
# Ensure the MySQL gem is defined in your Gemfile
#   gem 'mysql2'
#
# And be sure to use new-style password hashing:
#   https://dev.mysql.com/doc/refman/5.7/en/password-hashing.html
#
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: ユーザー名
  password:パスワード
  host: localhost

development:
  <<: *default
  database: プロジェクト名_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: プロジェクト名_test

# As with config/secrets.yml, you never want to store sensitive information,
# like your database password, in your source code. If your source code is
# ever seen by anyone, they now have access to your database.
#
# Instead, provide the password as a unix environment variable when you boot
# the app. Read http://guides.rubyonrails.org/configuring.html#configuring-a-database
# for a full rundown on how to provide these environment variables in a
# production deployment.
#
# On Heroku and other platform providers, you may have a full connection URL
# available as an environment variable. For example:
#
#   DATABASE_URL="mysql2://myuser:mypass@localhost/somedatabase"
#
# You can use this database configuration with:
#
#   production:
#     url: <%= ENV['DATABASE_URL'] %>
#
production:
  <<: *default
  database: プロジェクト名_production
  username: プロジェクト名
  password: <%= ENV['プロジェクト名_DATABASE_PASSWORD'] %>

```
植物用物理数値シミュレータSiCroF　(2) 個葉の熱拡散シミュレーション

#(2) 個葉の熱拡散シミュレーション
（この記事は執筆中です。）
### Introduction:熱拡散シミュレーションの例



### 熱拡散シミュレーションの解説


### 支配方程式

### シミュレータの実装

### 有限要素法定式の導出
vue routerでアプリのディープリンクにアクセスできない問題を無理矢理解決した

vue router使ってアプリに対してディープリンク用いて素直にアクセスできなかったので備忘録に。

router-linkやpath等の用意されているリンク遷移方法やmethods内からのlocation.hrefがドメイン内でしか行われなく なりました。ディープリンクの性質上先頭にhttps://~~といったものをつけられず、内部へのリンクとして扱われてしまう、といった現象が起きたようです。
無理矢理やるしかなかったのでいい方法ご存知の方いたら教えてください…

ちなみにvue-routeの設定内にbeforeEnter書いてどうこうしようというやつ([参考](https://polidog.jp/2019/01/24/vue-router/))は、今回同的なリンクを扱いたかったため諦めました。

## 環境
| 内容 | バージョン |
| --- | --- |
| OS | 10.14.5 |
| vue | 2.6.10 |
| vue-router | 3.0.6 |
| vuetify | 1.5.16 |
| Laravel | 5.8.24 |

ビルドにはLaravel-mix使ってます。

## 解決方法
v-btnを用いて遷移を制御していたのですが、テキスト部分にaタグでリンクを入れることで無理矢理解決しました。
前述した通り、動的に生成したリンクを用いたかったのでaタグのhrefにはcomputedメソッドで算出したものをv-bindでバインドさせています。

```vuejs
<v-btn><a :href="linkTo">アプリへ</a></v-btn>
```

```js
computed(){
    linkTo: function(){
        return this.base_url + this.dynamiclink + this.params
    }
}
```
Minecraft Forge Modding 目次

Githubは[ここ](https://github.com/Hiroya-W/biwakoMC/tree/1.14.4)


# 1.14.4
[Minecraft 1.14.4 Forge Modの作成 その1 【開発環境の準備 IntelliJ IDEA】](https://qiita.com/Hiroya_W/items/f38089724d9358d1668d)
[Minecraft 1.14.4 Forge Modの作成 その2 【基本的なファイルの配置】](https://qiita.com/Hiroya_W/items/f54fb5b85b408c4e5a38)
[Minecraft 1.14.4 Forge Modの作成 その3 【無機能アイテムの追加】](https://qiita.com/Hiroya_W/items/4fec2d799e499c4cd7c2)
[Minecraft 1.14.4 Forge Modの作成 その4 【ブロックの追加】](https://qiita.com/Hiroya_W/items/5b14f397bc52ce87255f)
[Minecraft 1.14.4 Forge Modの作成 その5 【クリエイティブタブの追加】](https://qiita.com/Hiroya_W/items/ed9876b9dc94d4424b4d)
[Minecraft 1.14.4 Forge Modの作成 その6 【5種ツールの追加】](https://qiita.com/Hiroya_W/items/6e8232cc5b3d1c0aa878)
[Minecraft 1.14.4 Forge Modの作成 その7 【防具の追加】](https://qiita.com/Hiroya_W/items/300ffdd4198c6e46038e)
[Minecraft 1.14.4 Forge Modの作成 その8 【鉱石の追加と生成】](https://qiita.com/Hiroya_W/items/fc6093ef9990d90b521e)
[Minecraft 1.14.4 Forge Modの作成 その9 【レシピの追加】](https://qiita.com/Hiroya_W/items/e096fcd4be90da7e24cb)

# 1.12.2
[Minecraft 1.12.2 Forge Modの作成 その1 【開発環境の準備 IntelliJ IDEA】](https://qiita.com/Hiroya_W/items/7ad9bad0387ef3688d1e)
[Minecraft 1.12.2 Forge Modの作成 その2 【mcmod.infoの編集と無機能アイテムの追加】](https://qiita.com/Hiroya_W/items/9c7ec637c949a48371b6)
[Minecraft 1.12.2 Forge Modの作成 その3 【剣の追加とレシピ登録,クラフト後に返ってくるアイテムの設定】](https://qiita.com/Hiroya_W/items/5eea1538a75e79f88c58)
[Minecraft 1.12.2 Forge Modの作成 その4 【ブロックの追加】](https://qiita.com/Hiroya_W/items/eeae44064a5c2b5c4377)
composer require linecorp/line-bot-sdkができなかった話

こんにちは
laravelの学習中にlinebotを作成しています。
その中で１つ躓いてた点があるので、同じことで悩んでいる方の助けになれば幸いです。

環境は以下です、
Windows10 home
laravel 5.8

#つまづいていたこと#
Linebotを作ろうとしたとき、ＳＤＫをインストールするときによく目にする

```
composer require linecorp/line-bot-sdk
```

を実行したのですが、私の環境では以下のようなログが出力されました。

```php

>composer require linecorp/line-bot-sdk

Using version ^3.13 for linecorp/line-bot-sdk
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for linecorp/line-bot-sdk ^3.13 -> satisfiable by linecorp/line-bot-sdk[3.13.0].
    - linecorp/line-bot-sdk 3.13.0 requires ext-sockets * -> the requested PHP extension sockets is missing from your system.

  To enable extensions, verify that they are enabled in your .ini files:
    - C:\xampp\php\php.ini
  You can also run `php --ini` inside terminal to see which files are used by PHP in CLI mode.

Installation failed, reverting ./composer.json to its original content.
```


<font color="Red">Your requirements could not be resolved to an installable set of packages.
</font>

ようはＳＤＫをインストールできていないんですね。。。

最初に調べたのは以下の質問
[line-bot-sdk installがうまくいかない](https://teratail.com/questions/205542?link=qa_related_sp)

この回答によると、拡張curlというのがインストールされていないとこと。
しかし、プロンプト上で`php -m`を入力したところ、curlは入っていたのでおそらく問題はないのかな？と判断。

次に見たのはエラー文中にある
<font color="Red">linecorp/line-bot-sdk 3.13.0 requires ext-sockets * -> the requested PHP extension sockets is missing from your system.</font>

ext-socketsなんちゃらと書いてあったので、php.iniを確認したところ、
`extension=sockets`
がコメントアウトしてあったので、解除したところ無事インストールできました！

拡張curlについてかなり調べていたので、数時間かかりましたが何とかLinebot作成することができそうです。
あまり似たような事象が出ている方が少ないせいか、調べても資料があまりでてこなかったのでどなたかの助けになれば幸いです。
ぼっちでもツイスタゲームができるブラウザアプリを作った。

## 概要
ツイスターゲームをやってみたいと思ったけど、基本は三人用らしい...<br>ストレッチ目的になんとか一人でできないか考えたところ、<br>ブラウザの[Speech Synthesis API](https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance) を使えば簡単にできそうだったので作ってみた。

## Demo
https://takuyataniguchi.github.io/TwisterGameSounds/
## コード
10秒ごとに次の指示を読み上げるように設定している。<br>
rateで読み上げ速度の変更も可能。<br>
そのほかにピッチやボリュームなども簡単に変更可能だった。<br>
[Github](https://github.com/TakuyaTaniguchi/TwisterGameSounds)
![code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273658/faf843a7-fbf8-ae74-4cc7-93df9161da8e.png)

## まとめ
ものの三時間くらいでサクッと簡単に作れた。<br>現状はChromeでしか動くことを試せていないが、index.htmlのみで音声読み上げが使えるのは簡単で面白い。  

<img width="745" alt="スクリーンショット 2019-09-16 15.25.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273658/1a66cb35-dd67-cb78-7614-42b64d941f62.png">


## 参考
https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c
http://blog.e-riverstyle.com/2015/01/web-speech-apitts.html
【Android】Realmで 'Hoge' has a primary key... が出た時の対処法

注　私はAndroid初学者です。誤情報などありましたらご指摘ください。

#概要
エラーメッセージ
　'Hoge' has a primary key, use 'createObject(class<E>, Object)' instead

#原因
Realmのバージョンの違いによる文法の変化の影響のようです。

"Realm2.0.0からの変化でプライマリキーはオブジェクトを生成した後に変更できなくなった"(下記リンクより引用)

2.0.0以前

```HogeActivity.java
Hoge hoge = createObject(Hoge.class);
hoge.setPrimaryKey(primaryKey);
```

2.0.0以降

```HogeActivity.java
Hoge hoge = createObject(Hoge.class, primaryKey);
```

#解決方法
2.0.0以降の場合は上記の書き方に直せば解決します。

#参考文献
[stack overflow - 'User' has a primary key, use 'createObject(Class<E>, Object)' instead](https://stackoverflow.com/questions/41046279/user-has-a-primary-key-use-createobjectclasse-object-instead)
Qtのボタンにアイコンを表示する

初投稿なので、マークダウンの勉強も兼ねて・・・
ボタンにアイコンを表示したかったので調べてみました。

#QPushButtonにアイコンを表示する方法

QtCreatorで画面にボタンを配置して、プロパティを見てみます。
**QAbstractButton**の中に**icon**という項目があります。
iconの値列の右側に**[…][▼][↰]**のボタンが表示されます。
![Screenshot from 2019-09-15 21-25-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497785/a3292a41-434f-4099-49f1-c5b78d6b3987.png)

**[▼]**をクリックすると、３つ選択肢が出てきます。
1. リソースを選択...
2. ファイルから選択...
3. テーマからアイコンを設定...

今回は、1の「リソースを選択」でやってみました。

## 1. リソースを選択
リソースファイルとは、プログラムで使用する画像などを埋め込むための記述をするファイルです。
リソースファイルを作り、そこにアイコンに使用する画像ファイルを登録して使用します。

### 1.1 リソースファイルを作成する
新しいファイルを作成する画面から**Qtリソースファイル**を選択します。
![Screenshot from 2019-09-16 14-19-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497785/435be9ea-f840-7db2-13bf-da3941866983.png)

### 1.2 アイコンを登録する
追加ボタンからプレフィックスをしてから、ファイルを追加します。

![Screenshot from 2019-09-16 14-43-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497785/6695244f-9389-0fcd-5c28-663a72523b63.png)

### 1.3 QPushButtonにアイコンをセット
QPushButtonのiconから**リソースを選択**を選択して、表示したいアイコンを選択します。
![Screenshot from 2019-09-16 15-04-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497785/a2232819-11d9-6fee-1cd6-c5f6612d71ba.png)

iconの下にあるiconSizeからアイコンの大きさも指定できます。

### 1.4 ビルドして実行
ボタン上にアイコンが表示されます。
![Screenshot from 2019-09-16 15-09-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497785/e6ac36fd-d014-e45e-e0b4-6976423d82d6.png)


## 2. ファイルから選択
ファイルダイアログから画像ファイルを選択できます。
リソースに登録する場合と何か違いがあるのでしょうか？

## 3. テーマからアイコンを設定
上の画像にも表示されていますが、デフォルトは「テーマからアイコンを設定」になっているように見えました。
使い方はわかりませんでした・・・

# まとめ
リソースに画像ファイルを登録してQPushButtonにアイコンを表示することができました。
テーマを使用する方法はわかりませんでしたが、必要になったら調べることにします。


## 参考文献
- [リソースファイルの作成 - Qt入門](https://qt.misfrog.com/posts/%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)
- [Qtに関する覚え書き［リソース関連］](http://dorafop.my.coocan.jp/Qt/Qt102.html)
Splunk Boss of the SOCについて（その7　Summary）

[Boss of the SOC (BOTS) Investigation Workshop for Splunk](https://www.splunk.com/blog/2018/05/25/boss-of-the-soc-bots-investigation-workshop-for-splunk.html)のbotv1を使用してScenario #1_APTを順繰りやっていく最終回。:sweat:長かった。


サイバーキルチェーンは[ここ](https://www.macnica.net/solution/security_apt.html/)を参照。
[初回](https://qiita.com/toshikawa/items/403aaf0901e778629e6d)が偵察（reconnaissance）で、[第２回](https://qiita.com/toshikawa/items/f3ede7ccc40ea68a0412)が攻撃(exploitation)、[第３回](https://qiita.com/toshikawa/items/d17eeecef180a441e41f)が設置（Installation）、[第４回](https://qiita.com/toshikawa/items/e5157b10d947822c301b)が目的に対する行動（Actions on Objective）、[前前回](https://qiita.com/toshikawa/items/c549c65bfc3b3a048c49)が遠隔操作(Command & Control)、[前回](https://qiita.com/toshikawa/items/d5ac298adc087642703e)が武器化（Weaponization）、今回がまとめ

##APT Scenario
>Summary
Based on our investigation, we can piece together what our adversary did:
>調査に基づいて、敵がしたことをまとめることができます。

>Scanned for vulnerabilities
Found site is running Joomla
Performed a brute force password scan, logged into Joomla, installed file upload modules
Uploaded webshell
Used webshell to upload reverse TCP shell
Connected via metasploit
Tried to move around but couldn't get out of locked down Windows 2012R2
Defaced website with downloaded defacement image
>脆弱性のスキャン
見つかったサイトはJoomlaを実行しています
ブルートフォースパスワードスキャンを実行し、Joomlaにログインして、ファイルアップロードモジュールをインストールした
アップロードされたウェブシェル
Webシェルを使用してリバースTCPシェルをアップロードしました
Metasploitを介して接続
動き回ろうとしたが、ロックダウンされたWindows 2012R2から抜け出せなかった
ダウンロードした改ざん画像を含む改ざんされたWebサイト

詳細はAppsの通り。まとめに書いてあることをすべて調査したかというと調査仕切れていない。かな

##ヒントがなかったら、実際のところ
IDSがあるので、まずはそこから検索

```Splunk:SPL
index=botsv1 sourcetype=suricata 
```
からスタートして、たくさん検知しているIPの概要をみて

```Splunk:SPL
index=botsv1   "40.80.148.42" sourcetype=fgt_utm action=pass
```
![qiita8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130729/bc75993b-482d-ee97-b0c7-c32e73356fc3.png)
リスト表示から時間を絞って
![qiita10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130729/f8c325f4-51ee-d37b-9683-037eddd0732c.png)

```
index=botsv1   "40.80.148.42"
```
![qiita9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130729/6beabb5e-7650-ca5d-3f52-dd186cb48def.png)
と言う感じで、ファイルのアップロードを検知していくことになるのかな。
各ログのファイルのアップロードがどのようにでるのか、今回だと`stream:http`のフィールドを覚えていないと調査が難しい。

とりあえず、Scenario #1_APTはこれにておしまい。
Macでエスケープシーケンスは"¥"ではない

#C言語の教科書では¥nとか書いてあるけどmacでは使えない。
C言語で表示する文中で改行をする時"¥n"と書かれています。
この"¥n"のようにエスケープシーケンスと一つで他にもいくつかの機能があります。
http://ratan.dyndns.info/MicrosoftVisualC++/eskape.html
本来、英語などではバックスラッシュ(\)(/の左右反対）を使いますが、日本語キーボードにはこれがないので"¥"で代用しています。
##Macではバックスラッシュを使います。
しかし、Macでは"¥"もありますが"\"もあります。C言語を使う時"¥n"でなく"\n"を使うので気をつけてください。
ただしMacのキーボードに"\"は書いていません。
「alt option』＋「¥」でバックスラッシュが打てます。
##IMEで設定出来ます。
詳しくは
https://qiita.com/miyohide/items/6cb8967282d4b2db0f61
に載っています。
【Java】BeanValidationでアノテーションを自作せず相関チェックする

# やること
`BeanValidation`で、アノテーションを自作しない（&バリデーションを行うオブジェクト内で完結する）範囲で相関チェックする方法をまとめます。

技術的な詳細は公式ドキュメントを参照してください。

- [Bean Validation specification](https://beanvalidation.org/2.0/spec/2.0.0.cr2/#constraintdeclarationvalidationprocess-requirements)

# 前提
経験則ですが、「フロントから渡されたデータとDBから取得したデータを突き合わせてバリデーションし、バリッドならDBに登録する」的な処理をやる場合、以下のように切り分けた方が上手く行くと感じます。

1. データを集約するオブジェクトと、その生成処理
2. 1を用いたバリデーション処理
3. 1を用いてデータを登録するための処理

この記事では特に2について書きますが、この処理はバリデーション結果のデータ構造と密接に関わる（特に`BeanValidation`ではフィールド名・メソッド名がフロントに返却するデータに影響する）ため、これらを一緒くたに書いてしまうと、2やフロントの変更が1に波及したり、1や3に関する変更がフロントに波及したりしてしまうからです。

自分は1から3までを一緒くたに書いたせいで、「アレを変えようと思うとコチラが立たず……」となり非常に辛い思いをしています。

# やり方
大まかに以下の3つを紹介します。

- 関数に`AssertTrue`または`AssertFalse`を使う
- ゲッターにアノテーションを振る
  - 応用
- 相関チェック結果を格納するフィールドを用意する

## 関数に`AssertTrue`または`AssertFalse`を使う
相関チェックとしてはよく紹介される方法です。
メソッド名を`isValid`とした場合、エラーのプロパティ名は`valid`となります。

```java
@AssertTrue
private boolean isValid() {
  /* 相関チェック */
}
```

[`is~`というメソッド名で相関チェックをする場合は戻り値をプリミティブ型の`boolean`とする必要がある](https://qiita.com/wrongwrong/items/d9e72a16c044af8d8981)点には注意が必要です。

## ゲッターにアノテーションを振る
`BeanValidation`ではフィールドに対してアノテーションを振ることでバリデーションができますが、`get~`という名前のメソッド（=ゲッター）にアノテーションを振ることでも同様にバリデーションができます。
つまり、ゲッター内でも相関チェックができます。

```java
@AssertTrue
@NotNull
private Boolean getValid() {
  /* 相関チェック */
}
```

### 応用
ゲッターを用いて相関チェックを行う場合、戻り値は何でもよいということになります。

つまり、「戻り値が`null`ならエラー1、1以上ならエラー2、...」ということができます。
先程書いた例では、「`null`の場合は`NotNull`、`true`でなければ`AssertTrue`」という風にバリデーションを行っています。

これによって、特にプロパティ等を変えることなくエラーメッセージをエラーごとに分けることが可能になります。

## 相関チェック結果を格納するフィールドを用意する
ここまでは関数にアノテーションを振る形での相関チェックを紹介してきましたが、初期化時点でフィールドに値を格納してしまえば、それにアノテーションを振ることでも相関チェックができます。
[Hydrogen] WindowsでAtom + Hydrogenを使おうとして、エラーになった話

## 前提
- Windows
- Atom インストール済み
- Hydrogen インストール済み
- Node.js インストール済み


## エラー内容
```
Hydrogen fails after installation due to missing node package @nteract/presentational-components
```

解決してしまったので検索履歴あさりました。。。たしかこんなかんじ。。。

# 解決方法
## はじめに
```
npm install --save @nteract/presentational-components
```

からの

```
npm install react@16.3.2
```

これらはインストール済みならやらなくてもよいです。

## 次に
Atomエディタを開き、 `設定 - > Packages -> Hydrogen -> View Code` (多分上の方にある)でHydrogenのコードを開きます。

そして、`.atom/packages/Hydrogen/package.json`のコード中にある、

```
dependencies
```
の欄に、(多分アルファベット順に並んでる)

```
@nteract/presentational-components":"^3.0.6
```
を書き込みます。
`3.0.6`はバージョンで、以下のコマンドで確認できます。

```
npm info @nteract/presentational-components
```

そして、コマンドプロンプトで先ほど編集した`package.json`がある場所へ行きます。
(例)

```
cd C:/Users/[Username]/.atom/packages/Hydrogen
```
その後、以下のコマンドを実行します。

```
apm install
```
以上で準備は終わりです。

## 最後に
動作確認してみましょう。

```python:hello.py
# %% One line outputs
print("Hello !")
```
`print("Hello !")`の行にカーソルを持っていき、`Ctrl + Enter`で実行されれば成功です。

# まとめ
WindowsでAtom + Hydrogen を使おうとして、エラーになった話でした。
調べると、Hydrogenの設定の`kernel Spec`にコードを貼るとか、`Startup Code`にコードを貼るとかいうのがいっぱい出てきたけど、そんな欄は無いので困りました。。。
GitHubにIssuesで二日前に解決されていてよかったです。英語できたらこういうところで解決してもらえそうですね。英語もがんばろ。
[https://github.com/nteract/hydrogen/issues/1768](https://github.com/nteract/hydrogen/issues/1768)
【Python】リストの要素の数え上げ、collections.Counterの使い方

# はじめに
今回はPythonの`collections.Counter()`についてまとめます。
AtCoderのPython3.4.3と3.8で動作確認済みです。

# collections.Counterについて
collections.Counterは標準モジュールの一つで、**リストの各要素の数え上げ**が出来ます。また、返り値であるCounterクラスは辞書型のサブクラスということで、**辞書型と同じ操作**ができます。

# 使い方
`Counter(リスト)`でリストの要素のカウント結果を得ることができます。

```python:Counter
from collections import Counter
a = ['a', 'b', 'c', 'd', 'a', 'a', 'b']
c = Counter(a)
print(c)
```

```python:出力
Counter({'a': 3, 'b': 2, 'c': 1, 'd': 1})
```

要素は数値でもカウントできます。

```python:Counter
from collections import Counter
b = [1, 5, 4, 2, 1, 5, 5]
d = Counter(b)
print(d)
```


```python:出力
Counter({5: 3, 1: 2, 4: 1, 2: 1})
```

# 辞書型としての扱い
前述したようにCounterは辞書型として扱うことができます。 (以降、print()の後には出力が書いてあります。)

```python:keyとvalue
from collections import Counter
a = ['a', 'b', 'c', 'd', 'a', 'a', 'b']
c = Counter(a)  # Counter({'a': 3, 'b': 2, 'c': 1, 'd': 1})

print(c.keys())  # keyを取り出す
dict_keys(['a', 'b', 'c', 'd'])

print(list(c.keys()))  # keyをリストに格納
['a', 'b', 'c', 'd']

print(c.values())  # valueを取り出す
dict_values([3, 2, 1, 1])

print(list(c.values()))  # valueをリストに格納
[3, 2, 1, 1]

print(c.items())  # keyとvalueを取り出す
dict_items([('a', 3), ('b', 2), ('c', 1), ('d', 1)])

print(list(c.items()))  # keyとvalueをリストに格納
[('a', 3), ('b', 2), ('c', 1), ('d', 1)]
```

keyとして要素を指定するとその値が返ってきます。

```python:
a = ['a', 'b', 'c', 'd', 'a', 'a', 'b']
c = Counter(a)
print(c['a'])  # 3
print(c['b'])  # 2
```

zip関数を用いてkeyとvalueをまとめて受け取ることもできます。
なお、リストやタプルには`*`を、辞書には`**`を付けて引数に指定することにより、それらが展開されてそれぞれの要素が個別の引数として渡されます。

```python:
a = ['a', 'b', 'c', 'd', 'a', 'a', 'b']
c = Counter(a)  # Counter({'a': 3, 'b': 2, 'c': 1, 'd': 1})
keys, values = zip(*c.most_common())
print(keys)    # ('a', 'b', 'c', 'd')
print(values)  # (3, 2, 1, 1)
```

# Counter.most_common()
`Counter`には`most_common()`というメソッドがあります。これは`(要素, 出現回数)`というタプルを出現回数順に並べたリストを返します。

```python:Counter.most_common()
from collections import Counter
a = ['a', 'b', 'c', 'd', 'a', 'a', 'b']
c = Counter(a)
d = c.most_common()

print(d)  # 出現回数順のタプルのリスト
[('a', 3), ('b', 2), ('c', 1), ('d', 1)]

print(d[0])  # 1番出現回数が多いもののkeyとvalue
('a', 3)

print(d[-1])  # 1番出現回数が少ないもののkeyとvalue
('d', 1)

print(d[0][0])  # 1番出現回数が多いkey
a

print(d[0][1])  # 1番出現回数が多いkeyのvalue
3
```

`most_common()`や`count()`をひと工夫して条件に合う要素を挙げることもできます。

```python:
from collections import Counter
a = ['a', 'b', 'c', 'd', 'a', 'a', 'b']
c = Counter(a)  # Counter({'a': 3, 'b': 2, 'c': 1, 'd': 1})
d = c.most_common()  # [('a', 3), ('b', 2), ('c', 1), ('d', 1)]

# 出現回数が2回以上のものを列挙（重複あり）
print([i for i in a if a.count(i) >= 2])
['a', 'b', 'a', 'a', 'b']

# 出現回数が2回以上のものを列挙（重複なし）
print([i[0] for i in c.items() if i[1] >= 2])
['a', 'b']
```


# おわりに
読んでいただきありがとうございました。指摘等ありましたら是非コメントをお願いします。
VSCodeでflutterを使ってandroidエミュレータの起動に失敗する時の対処法

## 背景

Android Studioインストール済みだけど、プロジェクトを作成していない。
かつ、VSCodeを使ってflutterの開発をするときにエラーが発生。

```sh:VSCodeでのエラー
An unknown error occurred. Please consult the log for more details.
```

ちなみにチュートリアルでは、特に記述はない。(2019-09-16現在)
以下の`2.`で上記エラーが発生。

> Link:> https://flutter.dev/docs/get-started/test-drive?tab=vscode
> <img width="997" alt="スクリーンショット 2019-09-16 14.17.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259386/ae3867a4-1776-0db9-3157-18711a1d76cd.png">

## エラー確認方法

flutterでは`flutter doctor`という、開発環境の依存関係を確認するコマンドがあります。
また、`flutter channel`でflutterのバージョン(stableやdev)などを変更することができます。
そのほか、`flutter upgrade`でflutterのバージョンアップなどを実行してくれます。
(ちなみに、事前にflutterのbinディレクトリをPATHに追加する必要があります)

```sh
# flutterのbinをPATHに追加
echo 'export $PATH=$PATH:<path-to-flutter-dir>/bin' >> ~/.bash_profile
# master(最新の安定バージョン)に設定
flutter channel master
# flutterのアップデート
flutter upgrade
# 依存関係の確認
flutter doctor
```

`flutter doctor`で何のパッケージで依存関係が壊れているのか確認できます。
ここで`[✗] Android Studio`の項目を確認します。

## エラー解消方法

僕の場合は、Android Studioで`エミュレータの設定とFlutterプラグインのインストール`ができていませんでした:sweat:

- エミュレータのインストール

(ここは、知っている方は飛ばしてください)
Android StudioのADVをクリック --> 好きな端末のエミュレータを作成

<img width="679" alt="スクリーンショット 2019-09-16 14.37.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259386/9e819497-536c-bb31-01f4-dc9572d464b9.png">

- Flutter pluginのインストール

(ここは、知っている方は飛ばしてください)
Android Studio --> Preferencies --> Plugins --> flutterで検索

<img width="1070" alt="スクリーンショット 2019-09-16 14.43.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259386/ee46fa22-a705-63c6-1707-ed490a0df198.png">

## 動作確認

- VSCodeを起動してStatus Barの`No Device`をクリック
- ADVで作成したエミュレータを選択

<img width="1070" alt="スクリーンショット 2019-09-16 14.45.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259386/33aa325b-c1d4-9fc9-54c7-e4315f311f9a.png">
<img width="1036" alt="スクリーンショット 2019-09-16 14.45.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259386/cfc884f3-8719-a618-5442-b712e128be4c.png">
<img width="600" alt="スクリーンショット 2019-09-16 14.49.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259386/e07e070a-1681-5125-9a1d-5cfe88477214.png">

ちゃんと動いてうれしー

## 感想

最近パソコンを買い替えたので、初期設定を忘れているかたは盲点かもしれません・・・
お気をつけあれ:ok_hand:
59日目 Amazonの人気商品を定期チェックしてLINEに送る

Amazonでどうしても欲しい人気商品があるのですが・・・
なかなか買えないので、定期チェックして見つけたらLINEに送るようにしてみました。

###Amazonの商品ページへ
基本のURL＋ASINで行ける。
こういう使い回しの効く設計がすごい。

###Amazonのタグを見つける
・商品があるかどうかは`availability`でとれる。あれば`In Stock` 
 なければ `Currently unavailabl`。
・値段は`.a-span12` 。
日本もUSもも同じタグをつかっていました。さすが。

###LINEに送る
・LINE Notify https://notify-bot.line.me/ja/ でトークンを発行
・LINE Notifyを友達登録
・requests.postで送信！

LINEにサクッと送れるって便利。
今後も何かと使えそうです。
こちらを参考にさせていただきました。
[PythonからLINE NotifyでLINEにメッセージを送る](https://qiita.com/tadaken3/items/0998c18df11d4a1c7427)

###crontabに登録
`crontab -e`で呼び出してはりつけます。
・毎日２１時に実行
・Pythonコマンド、Pyファイルはフルパスで指定
・メール通知がいらないなら `1> /dev/null`で。出力をNullに放り込む。

```crontab
0 21 * * * /<fullpath>/Python /<fullpath>/get_amazonus.py "ほしいもの" "ASIN" 1> /dev/null
```


```getAmazon.py
import requests
from bs4 import BeautifulSoup
import sys

def fromAmazon(asin):
    amazon_url="https://www.amazon.com/gp/product/"
    page_url = amazon_url + asin
    res = requests.get(page_url)
    soup = BeautifulSoup(res.text, features="lxml")
    return get_price(soup)

def get_price(soup):
    #商品があるかどうか確認
    avail = soup.find(id='availability').find('span').get_text().strip()
    #価格がわかれば取得
    price=soup.select('.a-span12 span.a-color-price')
    if not price:
        price = "none"
    else:
        price = price[0].get_text()
    return avail + " , " + price
    
def lineto(txt):
    url = "https://notify-api.line.me/api/notify"
    token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    headers = {"Authorization" : "Bearer "+ token}
    payload = {"message" :  txt}
    return requests.post(url ,headers = headers ,params=payload)

#Amazon
args = sys.argv    
txt = args[1] + " : " + fromAmazon(args[2])
lineto(txt)
```

###完成！
なかなか便利でびっくりです。
プログラムってちょっとできるだけでも、いいものですね。

（所要時間 2時間)
Windows10のJupyterNotebookでデフォルト保存ディレクトリを設定する方法

Windows10にAnacondaをインストールしてJupyterNotebookを利用する場合に保存先ディレクトリを指定する方法が分かり難い。そもそもWindowsでJupyterNotebook使うな！という気もするけど。。。

##1.設定ファイルを作成します

Anaconda Promptを起動して以下を実行

```
jupyter notebook --generate-config
```
ファイルが出来る
~/.jupyter/jupyter_notebook_config.py

##2.設定ファイルを編集します

```
\#c.NotebookApp.notebook_dir = ''
```

こんなのを検索し、行頭のコメント'#'を削除して''の中に希望のディレクトリを記述

```
c.NotebookApp.notebook_dir='d:/MyNotebook'
```

##3.起動ショートカットを修正

Windowsのスタートメニューから以下のアイテムを探して右クリック。

```
Jupyter Anaconda(Anaconda3)
```
「その他…」→「ファイルの場所を開く」
で表示された
「Jupyter Notebook(Anaconda3)」のショートカットをさらに右クリック。
表示されたメニューで「プロパティ」を選択。

リンク先(T)：
の中身の文字列の最後にある

```
"%USERPROFILE%/"
```

を削除して「OK」または「適用」。

##4.JupyterNotebookを起動

ファイルリストが空っぽに！またはd:/MyNotebookの内容に！

終わり。
ローカル環境では問題ないのにHerokuではエラー

Ruby on Railsで作成したWebアプリを本番環境（Heroku）で動かそうとしたら以下のようなメッセージが出ました。
![スクリーンショット 2019-09-11 5.06.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495507/dd413b3c-8d78-6768-a77b-02573823216d.png)
ローカル環境では上手く行っていたのになぜ・・・・と思いつつ色々思考錯誤してみた結果、実に単純な理由がわかりました。

マイグレーションファイルを作成した時に「rails db:migrate」をコマンドで実行すると思いますが、これはローカル環境にしか反映されず、本番環境でも同じようにコマンドを実行しないといけませんでした。
Herokuであれば、「heroku run rails db:migrate」を実行すれば、上手く動くようになります。
SCSSのhoverで特定の子要素の属性を変更する

親要素のマウスホバー時に、複数ある子要素のうち特定の子要素のみの属性を変更するという場面に遭遇しました。SCSSの書き方がなかなか見つからなかったので、備忘録も兼ねて記載します。

## やりたいこと
以下のようなHTMLで、親要素contentにカーソルが当たった時の

- 子要素両方のテキストにアンダーラインを表示
- 2つ目の子要素については文字色を赤文字にする

を実装します。その際、

- BEMの考え方に則ったclassを設定する
- BEMに従い、&を活用した省略形でSCSSを記述する

ものとします。

```html:sample.html
<div class="content">
  <p class="content__text">下線付き</p>
  <p class="content__text--red">下線付き＋赤文字</p>
</div>
```
```scss:sample.scss
.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
}
```
元の表示はこんな感じ
<img width="214" alt="基本形.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497925/a69f9b20-d2e7-88ca-737f-472dcd119e5b.png">

##実装方法
### 親要素に：hover疑似クラスを適用
```scss:sample.scss
.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
  &:hover {
    text-decoration: underline;
  }
}
```
これで親要素にマウスカーソルが当たった時、テキストに下線が表示されます。親要素についての属性を設定していますが、子要素にも継承されるため、子要素のテキストに下線を付けることができます。
表示はこんな感じ。
![親hover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497925/cf972eb9-cf6b-f9b2-20c5-ac0df3b426eb.gif)

### 2つ目の子要素のみの属性を変えるには？
CSSで書くとしたら以下のようになります。

```css
.content:hover > .content__text--red {
  color: red;
}
```
ちなみに、「>」は「直下の子要素」を意味します。
※今回のサンプル程度であれば「>」の代わりに半角スペースでも同様の表示になります。

これをSCSSで書くと以下のようになります。

```scss:sample.scss
.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
  &:hover {
    text-decoration: underline;
  }
  &:hover > &__text--red {
    color: red;
  }
}
```
&を使った省略形を1行に複数書けるということを今回初めて知りました。
表示はこんな感じ。
![親hover2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497925/e6443c58-0792-1ac1-fa6f-76e233a0095a.gif)
目的の実装ができました。

## 終わりに
JavaScriptを使わないとできないのかと思っていましたが、CSSのみで実現できました。どなたかの参考になれば幸いです。
初投稿なので読みづらい点もあったかと思います。読んでいただき、ありがとうございました。
Customizing VSCode IntelliSense

VSCode + Go extension を使っていると、コード補完のタイミングが合わずに、タイピングがもたついてしまうことが気になっていました。これまではあまり気にならなかったので、いつからのアップデートからかもしれません。(執筆時点の利用バージョンは v1.38)

調べてみたところ、[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) の Quick Suggestion Delay という設定がありました。デフォルトでは 10ms となっています。

> Editor: Quick Suggestions Delay
> Controls the delay in milliseconds after which quick suggestions will show up.

自分の感覚では `editor.quickSuggestionsDelay` を 1000ms としてコード補完の発動を遅らせて、`editor.suggestOnTriggerCharacters` も無効にすることで、スムーズにコーディングできるようになりました。

```json:settings.json
"editor.quickSuggestionsDelay": 1000,
"editor.suggestOnTriggerCharacters": false
```

自らタイピングはせずに、コード補完に任せてコーディングしていくと、デフォルトの 10ms がよい感じですが、せっかくの候補を無視してオラオラとタイプし続けると、タイプごとに候補を探そうとしているのか、もたつきが顕著になってしまいます。当然ながら、もたついている時はそれなりの CPU リソースが使われてしまいます。

なんとなく、IntelliSense がもっさりしてるなと感じたら、コーディングスタイルと合うように、いくつか設定を試してみることをお勧めします。

* [Visual Studio Code > Customizing IntelliSense](https://code.visualstudio.com/docs/editor/intellisense#_customizing-intellisense)
Vue.jsガイドの用語整理

# はじめに

Vue.jsのガイドを触った際に、いろんな用語が出てきたので、ここで整理したいと思います。

- [Vue.js ガイド はじめに](https://jp.vuejs.org/v2/guide/index.html)
- [Vue.js クックブック はじめに](https://jp.vuejs.org/v2/cookbook/index.html)

# リアクティブシステム

> さらに深く見ていきましょう！Vue の最大の特徴の1つは、控えめなリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。

- [Vue.js ガイド リアクティブの探求](https://jp.vuejs.org/v2/guide/reactivity.html)

リアクティブシステムって何でしょう？

- [リアクティブシステムが注目を集める理由 | Think IT](https://thinkit.co.jp/article/9185)

ざっくり説明すると、

- 即応性 (Responsive)
    - ユーザのためにシステムの応答を早くしたい！
- 耐障害性 (Resilient)
    - 応答を早くするためには障害起こしちゃだめだよね。
- 弾力性 (Elastic)
    - 応答を早くするためにはシステム負荷が増大してもなんとかしたいよね。
- メッセージ駆動 (Message Driven)
    - 耐障害性/弾力性を実現するために、各処理をコンポーネントに分けよう
    - コンポーネント間は非同期でメッセージ送って、効率よく処理しよう。
    
といった内容でした。

## リアクティブ

> これで初めての Vue アプリケーションが作成できました！一見するとただテンプレートを描画しているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM は関連付けられ、そして全てがリアクティブになっています。

- [Vue.js ガイド はじめに 宣言的レンダリング](https://jp.vuejs.org/v2/guide/index.html#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)

なるほど。全てがリアクティブになるんですね。(全然理解してない)

- [Chatwork、LINE、Netflixが進めるリアクティブシステムとは？　メリットは？　実現するためのライブラリは？ - @IT](https://www.atmarkit.co.jp/ait/articles/1703/16/news023.html)

データを「ストリーム」と捉えて、ストリームが流れてきたら処理する(操作が必要なデータを自分で取得して処理しない)という、リアクティブプログラミングという考え方があるようです。

ここで言うリアクティブとは、ストリーム(データ)に対してすぐ処理を行う。即応的に対処するということを指しているようです。

# バインディング(束縛)

> 文字列の展開に加えて、以下のように要素の属性を束縛（バインディング）することもできます:

- [Vue.js ガイド はじめに 宣言的レンダリング](https://jp.vuejs.org/v2/guide/index.html#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)

コレはプログラミングにおける束縛ですね。オブジェクト指向プログラミングでは、動的束縛、静的束縛、遅延静的束縛などの用語でお馴染みですね。

- [Wikipedia 束縛(情報工学)](https://ja.wikipedia.org/wiki/%E6%9D%9F%E7%B8%9B_(%E6%83%85%E5%A0%B1%E5%B7%A5%E5%AD%A6))

変数やメソッドには名前(識別子)を定義しますが、名前を使ってそれらを呼び出す際にスコープ、継承関係などによって実際に呼び出す処理、値が決定します。名前と、実際に呼び出す処理、値の結びつきを束縛(バインディング)と呼びます。


# MVVM

> Vue のデザインは、MVVM パターンと厳密には関連が無いものの、部分的には影響を受けています。慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使います。

- [Vue インスタンスの作成](https://jp.vuejs.org/v2/guide/instance.html#Vue-%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90)

MVCの派生パターンみたいですね。

- [StackOverFlowの「MVPとMVCの違い」についての回答を読んでみた](https://qiita.com/takahirom/items/597c48ece57b4623cdee)
- [Webアプリケーション開発者から見た、MVCとMVP、そしてMVVMの違い](https://qiita.com/shinkuFencer/items/f2651073fb71416b6cd7)

Model/ViewはMVCと役割があまり変わらないようですね。Controllerの代わりにViewModelというものに置き換わっているようです。また、データの流れが変わっており、ユーザはControllerではなくViewにアクセスしていたり、双方向バインディングという機能でデータをやり取りしています。

# 仮想 DOM

> React と Vue には多くの類似点があります。それらは両方とも：
・仮想 DOM を活用しています

- [Vue.js ガイド 他のフレームワークとの比較](https://jp.vuejs.org/v2/guide/comparison.html)

仮想DOMはReactなどでよく聞きますね。

- [自作フレームワークをつくって学ぶ 仮想DOM実践入門](https://kuroeveryday.blogspot.com/2018/11/how-to-create-virtual-dom-framework.html)
- [VirtualDOMの仕事ってなに？(Reactの表示速度がはやい理由)](https://qiita.com/risagon/items/019942c60e9c3e6c05a5)


## リアルDOM
HTMLなどの文章構造を操作するためのAPI。直接HTMLなどの文章を書き換える。

## 仮想DOM
HTMLなどの文章構造を操作するが方式が異なる。仮想DOMというオブジェクトを用意して、差分だけをリアルDOMに反映させる。

# 終わりに

すべての用語を理解していなくても、なんとなく触れますが、やっぱり用語を整理するとより理解が進みますね。
TypeScriptで配列からオブジェクトに変換するutil関数を作ってみた

`[{id: 1, name: "hoge"}, {id: 2, name: "fuga"}]`のような配列を`{ 1 : {id:1, name: "hoge"}, 2 : { id: 2, name: "fuga" }}`のような`id`をキーにそれに対応するオブジェクトが値になっているように変換したい時のメモになります。

このutil関数が欲しかった背景としては、reducer内でデータを扱いやすいようにオブジェクトから配列に変換したり、stateに変更を反映させるために配列からオブジェクトに変換することが度々あったからです。

```typescript
// 配列からオブジェクト(プロパティにidを保持している)に変換する
const fromArrayToObject = <T extends Readonly<{ id: number }>>(
  items: ReadonlyArray<T>
): Readonly<{ [id: number]: T }> =>
  items.reduce<{ [id: number]: T }>((map, item) => {
    map[item.id] = item
    return map
  }, {})
```

使用例

```typescript
type Todo = Readonly<{
  id: number
  title: string
  done: boolean
}>

const todoList: ReadonlyArray<Todo> = [
  { id: 1, title: "ラーメン食べる", done: false },
  { id: 2, title: "二郎を食べる", done: false }
]

const result = fromArrayToObject(todoList)

/* 
出力結果
{ 
  '1': { id: 1, title: 'ラーメン食べる', done: false },
  '2': { id: 2, title: '二郎を食べる', done: false } 
}
*/
```
axiosでリクエスト/レスポンスのcamelCase/snake_case自動変換


### camelCase/snake_case問題
フロントとサーバーサイドを異なる文化の言語で開発しているとほぼ必ずぶち当たるAPIリクエスト時のcamelCase/snake_case変換問題です。
いちいち詰め替えなぞやりたくないです。
SwiftだとCodableでそんなにストレスできたので、同じように通信時に勝手に変換してくれるようにしたいなと思ってたら**あった。**
ネストの深いオブジェクトも再帰で全部拾ってくれる神様です。
[axiosでリクエスト・レスポンスのキーをsnake_case・camelCaseに変換する](http://imejin.biz/magazine/axios_transform_request_response/)
↑を参考に書いていたら、「lodashは容量が大きいからなるべく使わないか、モジュールごとにインストールした方がいいよ」と教えていただいたので修正版。

### 実装
#### 準備
必要なものを追加します。

```bash

npm install --save lodash.isobject
npm install --save lodash.camelcase
npm install --save lodash.snakecase
npm install --save qs
```

#### コード
RepositoryFactoryパターンに沿って実装しているのでその前提で。

```deepMapKeys.js
import isObject from 'lodash.isobject'

/**
 * deepMapKeys - 再帰関数でネストされたオブジェクトのキーを変換する
 *
 * @param  {Object} obj キーを変換したいオブジェクト
 * @param  {Object} cb キーを変換するコールバック
 * @return {Object}       変換済オブジェクト
 */
const deepMapKeys = (obj, cb) => {
  // base case (再帰ストップ)
  if (!isObject(obj) || obj instanceof File) {
    return obj
  }

  if (Array.isArray(obj)) {
    // 配列ならキーの変換はなし
    return obj.map(val => {
      // 再帰
      return deepMapKeys(val, cb)
    })
  }

  // オブジェクトならキーを変換
  // objectを[key, value]の配列に変換
  const entries = Object.entries(obj)
  // keyをcbに通し、valueを再帰的に処理
  const entries2 = entries.map(([key, value]) => [
    cb(value, key),
    deepMapKeys(value, cb)
  ])
  // Object.formEntriesでobjectに戻す
  return Object.fromEntries(entries2)
}

export default deepMapKeys
```

#### axios作成側
```Repository.js
import axios from 'axios'
import camelCase from 'lodash.camelcase'
import snakeCase from 'lodash.snakecase'
import qs from 'qs'
import deepMapKeys from '~/utils/deepMapKeys'

const baseUrl = 'https://localhost:8888'

export default axios.create({
  baseURL: baseUrl,
  // レスポンスをcamelCaseに変換
  // axiosのデフォルト処理に追加するために、concatで配列の最後に追加する。
  // (※ pushするとすべてのインスタンスの共通処理が変わってしまう)
  transformResponse: [
    ...axios.defaults.transformResponse,
    function(data, headers) {
      if (
        !headers['content-type'] ||
        headers['content-type'].indexOf('application/json') === -1
      ) {
        return data
      }
      return deepMapKeys(data, (val, key) => {
        return camelCase(key)
      })
    }
  ],

  // リクエストをsnake_caseに変換
  // こちらはaxiosのデフォルト処理がJSONをstringifyする前に実行したいので、配列の最初に追加する。
  transformRequest: [
    function(data, headers) {
      if (data instanceof FormData) {
        return data
      }
      return deepMapKeys(data, (val, key) => {
        return snakeCase(key)
      })
    },
    ...axios.defaults.transformRequest
  ],

  // GETリクエストのパラメーターもsnake_caseに変換。
  paramsSerializer(params) {
    return qs.stringify(
      deepMapKeys(params, (val, key) => {
        return snakeCase(key)
      })
    )
  }
})
```

###多謝
- [axiosでリクエスト・レスポンスのキーをsnake_case・camelCaseに変換する](http://imejin.biz/magazine/axios_transform_request_response/)
- [【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス)](https://qiita.com/07JP27/items/0923cbe3b6435c19d761)
Facerigが起動しない問題を対処できたかもしれない話

#2019/09/16 Facerig起動不可能の問題に直面
Facerigが突然Steamから起動できなくなりました。
![S__132472867.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/d888a1d5-e12e-1c79-4aef-c8fcc10a84b6.jpeg)
（Launchを押しても起動できない）

Twitter等で検索してみると、同じ症状にあっている方が多数見受けられ、
主な解決策は、再インストールやファイアウォールだの...自分も試してみたけどできませんでした。

#(解決策)環境変数でパスを通す
.exeファイルが見つからないということなので、exeファイルのあるフォルダ(binフォルダ)にインストール時にうまくパスが通されなかったんじゃね？と思ったため、パスを通すことを試してみることに。

※自分はファイアウォールを一旦無効にした状態で下記作業を試しました。

①FacerigのインストールフォルダのBinフォルダを探す

自分の場合は、下記パスにありました。
C:\Program Files (x86)\Steam\steamapps\common\FaceRig\Bin

ここで注意いただきたいのは、Binフォルダの中にexeファイルが存在しているかどうかです。
もしあった場合は、このフォルダのパスをテキストでコピーしておいてください
※なかった場合は、Dドライブ等にインストールしてるかもしれないので、
　Facerigのインストールフォルダを探して、binフォルダのパスをコピーしてみてください。

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/40df08d9-47c3-63f4-4f6a-9c4e9f3b618b.png)

②環境変数設定画面を開く
　(1)PCを右クリックし、プロパティを開く
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/f0f17c12-dbe7-9937-e774-7dd3e3a26696.png)

　(2)システムの詳細設定を開く
　![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/391be4d9-22f9-b0ea-a49e-c76436b5dd47.png)

　(3)環境変数をクリックする
　![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/779fc54d-5997-172e-1b1c-cbae28de49aa.png)

　(4)システム環境変数内のPathをダブルクリック
　![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/21b29d75-cfbc-69bb-4927-034d16fe578f.png)

　(5)"新規”をクリックし、上でコピーしたアドレスを追加する。
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/5dc3fa52-07ec-b245-1881-f1e321776216.png)

　(6)PC再起動

　(7)Facerigを起動
　念のため、Steamは管理者権限で実行してください。
　![図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498119/df8d831b-8ef6-baa6-d6c8-08367a8e83d7.png)
　無事起動できました。

#おわりに
恐らく、Facerigの最新アップデート等のインストーラーでパスの設定が通らないバグが、今回のバグに繋がったのかと私は考えます。

今回解決したのは、自分のPC環境のみの話かもしれないので、
今回の方法で治る方がいらっしゃればいいのですが...
何かの助けになれば幸いです。

※なお、Natto'zメンバーの神峰たまくんが上記方法を試しても
　まだ治ってません。　そんなこともあるということはご留意ください....。
##### 2019/09/16 神峰たまくんも解決しました。神峰たま君の場合はユーザーフォルダになぜかFacerigのフォルダができており、それを削除することで上記方法で起動できたということでした。よかったぁ...。
OpenCVの画像処理をmultiProcessingで並列化する

##この記事について
[OpenCVのGPU高速化の記事](https://qiita.com/iwatake2222/items/dd7ea3efe65ac77bf783)で，画像のresizeをGPUで高速化しようとしたが，速度が変わらず，multiprocessingで，並列計算を実行してみた．

##実行環境
pyenv 1.2.13-2-g0aeeb6fd
python 3.6.0
OS: Ubuntu(18.04.3 LTS(Bionic Beaver))

##やったこと
50万枚の画像に対して，画像のresize( 1920x1080 -> 64x64)を行なった．

### Summary Version
```
import multiprocessing as mp
def job(何らかの引数:str):
  実行したいopencvの処理

if __name__=='__main__':
  mp.set_start_method('spawn')
  p = mp.Pool(cpu_num)
  p.map(job, リスト)
```


### Full Version
```
import cv2 as cv
import os
import sys
import time
import logging
import configparser
from tqdm import tqdm
import multiprocessing as mp

### Logger
logger_db = logging.getLogger('CompressImage')
logger_db.setLevel(logging.DEBUG)
ch = logging.StreamHandler()
ch.setLevel(logging.DEBUG)
formatter = logging.Formatter('%(asctime)s - %(name)s - %(levelname)8s - %(message)s', datefmt='%m/%d/%Y %I:%M %p')
ch.setFormatter(formatter)
logger_db.addHandler(ch)

def resize_job(image_file_path:str):
    image  = cv.imread(image_file_path)
    image  = cv.resize(image, dsize=(resize_size, resize_size))
    path = image_file_path.replace(base_in, base_out)
    cv.imwrite(path, image)
    return image_file_path

if __name__=='__main__':
  ### 0. Preparation
  cpu_num = mp.cpu_count()

  ### 1. Create Path List
  # start_time1 = time.time()
  # path_list = [ x[0] for x in os.walk(base_in)]
  # logger_db.debug('1. Time of creating path list: {}'.format(time.time()-start_time1))

  ### 2. Create File List
  start_time2 = time.time()
  file_list = [ os.path.join(dirpath, filename) for dirpath, _, filenames in os.walk(base_in) for filename in filenames]
  total_num = len(file_list)
  logger_db.debug('2. Time of creating file list: {}'.format(time.time() - start_time2))
  logger_db.debug('   File Number is {}'.format(total_num))

  ### 3. Create New Directory
  start_time3 = time.time()
  new_path_list  = [ x.replace(base_in, base_out) for x in path_list]
  for path in tqdm(new_path_list):
    os.makedirs(path, exist_ok=True)
  logger_db.info('3. Time of Creating Directory: {}'.format(time.time() - start_time3))

  ### 4. Resize
  start_time4 = time.time()
  mp.set_start_method('spawn')
  p = mp.Pool(cpu_num)
  # result = p.map(resize_job, tqdm(file_list))
  for _ in tqdm(p.imap_unordered(resize_job, file_list), total=total_num):
    pass
  p.close()
  logger_db.debug('4. Time of creating path list: {}'.format(time.time()-start_time4))
```
## 工夫したこと
並列処理は[OpenCVのgithubのissue](https://github.com/opencv/opencv/issues/5150)に丸々書かれていたので，
進歩状況がわかるように，[tqdm](https://github.com/tqdm/tqdm#iterable-based)を少し特殊な書き方で書いたところ

## 今後やってみたいこと
multiprocessだけでなく，multithreadで，さらに高速化したい
Heroku CLIで「 ▸    Couldn't find that app.」というエラーが出てきた時の対処メモ

# 困ったこと
Heroku CLIを使っていたら

```
 ▸    Couldn't find that app.
```
というエラーが出てきた。

```
$ heroku apps
```
してみたが、確かに操作したいアプリケーションは存在する。

# 思い当たる節
そういえば、一度`$ heroku create`でアプリを作成したけど、名前つけるの忘れちゃったからGUIでアプリを削除してもう一度`$ heroku create [app name]`でアプリを作成している。

「["Couldn't find that app." when running heroku commands in console - Stack Overflow](https://stackoverflow.com/questions/53551717/couldnt-find-that-app-when-running-heroku-commands-in-console)」の記事をみるとなにやらGitがなんとかっていってる。あやしい。

`.git/config`を見てみる。

```config:.git/config
[remote "heroku"]
  url = https://git.heroku.com/xxxxxxxxxx.git
```
おー、一つ前に作成したアプリで作成されたGit repoに向いている。それはすでに削除してしまっているから確かにアプリが見つからなそうだ。

# 解決
上記の記事の通り、

```
$ heroku git:remote -a [app name]
```
で解決しました。
`.git/config`の向き先を直接書き換える、でもうまく行きました。

# 反省
アプリを削除するときもHeroku CLIを使って削除しておけば、`.git/config`の情報も削除されました。CLI使う場合は極力CLIでやることで整合性が保てるのであんまりGUI使わないようにしよう。

```text:CLIでアプリを削除
$ heroku apps:destroy --app [app name] --confirm [app name]
```
【Unity】タッチで取得した座標はワールド座標になおさなくてもいいかも

Input.GetTouch(i)で取得すると座標は初めからワールド座標で取得

Input.mousePositionの場合はスクリーンの座標なので
Camera.main.ScreenToWorldPoint(Input.mousePosition);
してあげないと座標がずれる

ちなみに経緯はInput.mousePositionで同時押ししたら、その中間座標になってしまったので、
マルチタッチ対応のInput.GetTouch(i)に切り替えた。
そのときCamera.main.ScreenToWorldPoint()を使ったままだったので、rayが対象にヒットしなくなり沼った。

あとマルチタッチは実機テストしないといけないので面倒。
エディターでタッチのテストできる方法知っている方いたら教えてください。