OmniAICreator/Qiita-1.07M huggingface dataset:
リストからランダムに要素を取得する処理を鬼速くしてみた

こんにちは。Keiです。
今までQiitaはもっぱら見る専でしたが、いよいよ書く側に回ろうと思います。

記念すべき最初の投稿は、Pythonで非常に要素数の多いリストからランダムに複数の要素を取得する処理を高速化する方法についてです。
というのも自分は普段進化ゲーム理論を利用した数値シミュレーションに取り組んでおり、よくやる処理の1つに

1. エージェント(要は人間に相当するオブジェクト)を大量に用意し、リストに格納
2. リストからエージェントをランダムに2人選んできてゲームをさせる
3. 対戦したエージェントは母集団から取り除く
4. 全員がゲームするまで2~3を繰り返す

というものがあるのですが、これを普通にやろうとすると**猛烈に遅い**。
自分が最初に試作したコードでは2~4のループ部分だけでプログラム全体の実行時間の実に**95%以上**を占めていました！
というわけでこの処理を高速化するために色々実験してみました。実は以下の説明には載せていない試み(Cython,Numbaの利用など)も沢山やってみたのですが、どれも謎のエラーを吐き出し続けるだけで一向に埒が明かなかったので、素直に関数やアルゴリズムの工夫だけでなんとかする道を探ることにしました。

# 実行環境
lenovo ideapad 330S
Intel® Core™ i5-8250U CPU 1.60GHz × 8 
Python 3.7.3

# まずは普通に実装
最初は特に工夫せず、上の1〜4の処理を素直に実装して実行時間を計測してみました。
プログラムはjupyter notebook上で実行し、timeitマジックコマンドで実行時間を計測しました。

```python

from numpy import random as rnd
import random

%%timeit
agents = [i for i in range(10000)] # 今回はエージェントの代わりに整数を格納
while agents != []:
    agent1, agent2 = rnd.choice(agents, 2, replace=False)  # 重複を許さずにゲームのプレイヤーを2人選ぶ
    '''
    本来はここでゲームをする処理が入る
    '''
    agents.remove(agent1)  # ゲームをプレイした人は母集団から取り除く
    agents.remove(agent2)
12.3 s ± 274 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
```

12秒!!。これを実際の進化ゲームのシミュレーションでは計算結果が収束するまで数万回、数十万回と繰り返すとなると日が暮れるどころの騒ぎじゃないです。
そこでline_profilerを使って行ごとの処理時間を見てましたが、原因は主にrnd.choiceの部分でした。乱数を使う処理は結構遅いみたいです。
またnp.random.choiceではなく標準ライブラリのrandomモジュールに入っているrandom.sampleも同様の処理が可能とのことだったので試してみました。結果は以下の通り。

```python
%%timeit
agents = [i for i in range(10000)]
while agents != []:
    agent1, agent2 = random.sample(agents, 2) # 違いはここだけ
    agents.remove(agent1)
    agents.remove(agent2)
309 ms ± 2.58 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
```

お、かなり速くなった!高速化ならとにかくnumpyってイメージがあった(のは自分だけ?)ので意外でしたが、どうも乱数に関してはnumpyを使うより通常のrandomモジュールを使う方が速いみたいです。

でもこれで満足してしまってはいけません。数値シミュレーション屋は速さを永遠に追い求める種族なのです(~~なら初めからC++使えよとか言われるとつらい~~)
ということで少し発想を変えてみました。ランダムに要素を選ぶのではなく、**リストの要素の格納順をシャッフルし、それからリストの先頭あるいは末尾の要素を選んでくれば**、それもランダムに要素を選んだと言えますよね。
というわけで実験。

#「要素の並び順をシャッフル ⇒ リストの先頭/末尾の要素を取得」に変更

リストの並び順をシャッフルするにはnp.random.shuffleメソッドが使えます。
その後リストの先頭と2番目の要素を取得するようにしたのが以下です。

```python
%%timeit
agents = [i for i in range(10000)]
rnd.shuffle(agents)  # 並び順をシャッフル

while agents != []:
    agent1, agent2 = agents[0], agents[1]
    agents.remove(agent1)
    agents.remove(agent2)
8.4 ms ± 41.7 µs per loop (mean ± std. dev. of 7 runs, 100 loops each)
```
おぉ！さっきと比べて30倍以上速くなりました！
ついでにエージェントを取得して母集団から取り除く処理をpopメソッドでスッキリさせたのが次のものです。
なおpopを使う時は必ず引数無しでリストの末尾の要素を取得するようにしないと信じられないくらい遅くなるので注意してください。下記参照:[https://x1.inkenkun.com/archives/861]

```python
%%timeit
agents = [i for i in range(10000)]
rnd.shuffle(agents)

while agents != []:
    agent1 = agents.pop()  # リストの末尾の要素を取得してかつ母集団から削除
    agent2 = agents.pop()
1.09 ms ± 2.51 µs per loop (mean ± std. dev. of 7 runs, 1000 loops each)
```
**は、速いっ! ! ! www**
最初のコードと比べると**実に7000倍近い高速化**に成功しました! !

# 結論
numpy.random.choiceは使ってはいけない。shuffleしてからpopで取り出すべし。

ただ、shuffleを1回使うのもchoiceを5000回繰り返すのも結局同じ回数乱数を取り出しているはずなので、両者にここまで速度差が出る理由はよくわかりません。randomモジュール内部の実装にお詳しい方いたらコメントよろしくお願いしますm(_ _)m
samba へのアクセスを特定グループのユーザーだけに限定する

## 目的
samba へのアクセスを特定グループのユーザーだけに限定する

## 環境
+ Raspberry Pi 3 ModelB
+ 外付けHDD：EC-PHU3W1(IO-DATA)

## 作業メモ

### sambaアクセス用のグループ/ユーザーを作成

<b>参考サイト</b>
https://www.server-world.info/query?os=CentOS_7&p=samba&f=2

+ グループ(ここでは`localhdd`とする)を作成

```
$ sudo groupadd localhdd
```

ちゃんとグループが作られているか確認

```
$ less /etc/group
(略)
localhdd:x:1001:
```

+ 作成したグループのみアクセス可能にする

以前の投稿、[Raspberry Pi 3 ModelB で外付けHDDをファイルサーバー化する](https://qiita.com/marumen/items/de150089d95f52849e5b) にて[public]で記載したところを以下のように修正する

```
$ sudo vi /etc/samba/smb.conf
```

```smb.conf
[LocalHDD]
  comment = secure
  path = /mnt/hdd
  public = no  # guestアカウントはアクセス制限
  read only = no
  browsable = no  # ついでにフォルダも隠しフォルダにする
  valid users = @localhdd  # localhddグループのみアクセス可能
```

+ アクセス用のユーザー(ここでは`localsmb`とする)を作成

```
$ sudo useradd localsmb
```

ちゃんとユーザーが作られているか確認

```
$ less /etc/passwd
(略)
localsmb:x:1001:1002::/home/localsmb:
```

### sambaユーザーへの登録

+ sambaユーザー登録

```
$ sudo pdbedit -a localsmb
new password:
retype new password:
(略)
```

設定変更されているか確認

```
$ less /etc/passwd
・・・
localsmb:x:1001:1001::/home/localsmb:
```

分かりづらいが主グループが`localhdd`のグループID 1001 に変わっている
よって、意図通り変更できている

+ samba再起動

```
$ sudo systemctl restart smbd
$ sudo systemctl restart nmbd
```

### 設定変更できているか確認

+ エクスプローラーで `\\RASPBERRYPI` を選択
するとフォルダが見えなくなっている

+ `\\RASPBERRYPI\LocalHDD` と入力
ユーザー名/パスワード入力画面になるので、`pdbedit` で設定したユーザー名/パスワードを入力
すると、フォルダ内が表示できる

## まとめ
平たく書くと、ユーザー認証するようにしただけだが一応目的は達成！
>samba へのアクセスを特定グループのユーザーだけに限定する
【比較】ここまで違う！ブラウザごとのHTML5標準カレンダーのUI

# はじめに
今回は、HTML5のカレンダーのUIをブラウザ同士で比較していきます。

# HTML5標準カレンダーとは

HTML5では、以下のフォームコントロールが新たに追加されています。
これは、日付入力用のテキストボックスです。

```html:日付入力用のテキストボックス
<INPUT type="date">
```

MDM web Docsによると、

>date 型の <input> 要素は、中身を自動的に検証するテキストボックスまたは特殊な日付選択インターフェイスを使用して、
ユーザーに日付を入力させる入力フィールドを生成します。結果の値には年、月、日が含まれますが、時刻は含まれません。 
time 及び datetime-local 入力型は時刻や日付と時刻の入力に対応しています。

>コントロールのユーザーインターフェイスは、一般にブラウザ―によってまちまちです。
現時点で対応は不安定であり、詳細はブラウザーの対応を参照してください。
対応していないブラウザーでは、このコントロールは単純な <input type="text"> に格下げされます。

とのことなので、どんな表示をするのかを比較します。

参考： https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date

# 対応ブラウザ

対応ブラウザは以下の通り。

|    ブラウザ    |  対応    |
|:------------------:|:------------------:|
|        IE 11        | ×|
|       Microsoft Edge        | ○|
|        Chrome         |○|
|         Firefox         |○|
| Safari | ○ |

:::note info
mac版Safariも2021/4/26にリリースされた14.1からサポート開始しました。
:::

# ユーザーインターフェース
:::note info
前回(2018/4/25)から約6年経過した現在(2024/3/8)でも一定のアクセスがありますので、本記事の内容を最新化しました。
すみませんが、バージョン情報を記録し忘れてしまっていますので、過去のバージョンについては日付で代えさせていただきます。
:::

## Edge Windows版 バージョン 122.0.2365.66 (公式ビルド) (64 ビット)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95458/237052f5-af30-eaaa-527a-64e9afed3b60.png)

カレンダーの日付をクリックすると日付が入力できます。エンジンの変更によりChromeと同じようになっています。

## Chrome Windows版 バージョン: 121.0.6167.185（Official Build）（64 ビット）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95458/c3ed04f5-15a3-fdc0-955e-9e0e1fe1a84a.png)
カレンダーの日付をクリックすると日付が入力できます。

## Firefox Windows版 123.0.1 (64 ビット) 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95458/31a662a3-1b3c-d9ea-ee19-6db0a24dd57f.png)

Chromeと同じく、カレンダーの日付をクリックすると日付が入力できます。

## Safari mac版 バージョン17.2.1 (18617.1.17.11.12, 18617)
![スクリーンショット 2024-03-20 19.28.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95458/20b57060-5170-dc45-6188-ca48ea840830.png)
下記の旧バージョンChromeに近いUIです。右上 ◀︎ ⚫︎ ▶︎ のボタンはそれぞれ、「前月のカレンダーを表示」「入力されている年月のカレンダーを表示」「翌月のカレンダーを表示」の動作をします。

## 旧バージョン

### Edge(2018/4/25時点)
![Edgeのカレンダー](https://qiita-image-store.s3.amazonaws.com/0/95458/afa80e3f-d034-f793-7084-bb4a719daf1c.png)

リストから日付を選択し、「✓」をクリックすると日付が入力できます。

### Chrome(2018/4/25時点)
![Chromeのカレンダー](https://qiita-image-store.s3.amazonaws.com/0/95458/79b42598-18e1-1c2c-bd86-b99348380cb9.png)

カレンダーの日付をクリックすると日付が入力できます。

### Firefox(2018/4/25時点)
![Firefoxのカレンダー](https://qiita-image-store.s3.amazonaws.com/0/95458/d84de57c-8e8c-6742-0a53-3c7c5fcc23a6.png)

Chromeと同じく、カレンダーの日付をクリックすると日付が入力できます。

# 所感

あまりにもUIが違いますので、UIを統一したければjQuery DatePicker等、React.jsやVue.jsを利用している場合はそれぞれと相性の良い日付選択ライブラリを使用するとよいと思います。
また、カレンダーそのもののUIをカスタムしたい場合も同様です。

# 参考文献
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date#Browser_compatibility
基本情報の勉強のコツ


IT業界の登竜門である基本情報技術者試験（以下FE）は試験範囲が幅広いため、効率的な勉強が求められる。
そこで人間の「理解」についての理論を踏まえて、より無駄なく学習するよう意識しよう、というのが本稿の主旨である。

##２種類の「納得」
ただ暗記するのは大変なので避けたいところだが、全部わかるまで勉強し続ける、というのも面倒である。
「わかる」というのは大きく２つに分けられる。「人間の立場」と「仕組み」だ。

##「人間の立場」側の「わかる」
例えばIPアドレスの問題がある。IPアドレスというのはネットワークにおけるPC(等)の住所のようなものであるから、ネットワーク分野の知識と、そして何より２進数の知識が要る。
192.168.100.1 というIPアドレスは、２進数で表すと11000000. 10101000. 01100100. 00000001 となる。
[192.168.100.1] という10進数方式が存在する理由は「人間が管理しやすいから」であり、これは「人間の立場」側の「わかる」である。
ここで言いたいのは、「人間が管理しやすいから」という理由にピンと来ない場合でもそれ以上の追及はあまり意味がない、ということ。
もし満足できないとしても、「人間の立場」に触れた理由が提示された場合、それ以上に強い根拠になることは殆どないだろう。

##「仕組み」側の「わかる」
IPアドレスの２進数について、こちらは「仕組み」側の「わかる」である。
「仕組み」側を理解する方法は、１つずつ地道に確かめていき、納得することが重要である。
ここで重要なのは以下の２つ。
A: 「人間の立場」とはアプローチが異なること
B: いきなり公式を使用しないこと
特にBのパターンで学習している人は勿体ない。公式というのはただ暗記して使ってみるだけでは全く覚えられないし、ちゃんと公式が通用することを（なんとなくでも）わかっていることの楽しさを知らないからだ。

##「仕組み」側の具体的な学習方法
では、地道に確かめていく方法を具体的に紹介する。
２進数がよくわからないという人は、10進数と２進数を１つずつ書き出してみるのがオススメだ。
筆者は以下のように練習した。
10進数を0, 1, 2, 3, 4, と書き出していく。
その横に、２進数を0, 1, 10, 11, 100, 101, 110, 111, 1000, ... と１つずつ書き出していく。
次に２進数の法則性を考える。
１０進数を1, 2, 4, 8, 16, ... の横の２進数を見てみると、1, 10, 100, 1000, 10000, ...となっているのが見えるはずだ。
10進数は、２の０乗、２の１乗、２の２乗...と変化しており、２進数は1, 10, 100, ...と変化している。
最初の桁だけが１である２進数は、０の個数をXとしたとき、２のX乗で表すことが出来るのだ。

##最後のまとめ
何か学習する内容があったとき、それを理解するためには「仕組み」が有効だと思ったなら、１つずつ試していくことで「仕組み」を納得できるまで取り組むのが良い。
「仕組み」では説明できないものは、やや乱暴だが「人間の立場」で説明できると思って構わない。そのとき「仕組み」に納得するための学習を何時間やったとしても「わかった」と思うのは難しいだろう。

##補足
FEに限って言うと合格得点率は６割でいいのだから厳密にわからなくても良いや、という考えもあるかもしれないが、どんな状態を以て学習を終わりにするのかを想像しておくことはいろんな場面で活かせるのではないだろうか。
Flexboxで縦のリストを右に並べるCSS

下の画像のように、縦のリストを右方向に並べるCSSです。

![スクリーンショット 2018-04-24 23.11.53.png](https://qiita-image-store.s3.amazonaws.com/0/54838/c05f01b0-6175-5986-7b8a-a387a507ea47.png)

```html:index.html
<ul class="list border">
  <li>テスト1</li>
  <li>テスト2</li>
  <li>テスト3</li>
  <li>テスト4</li>
  <li>テスト5</li>
  <li>テスト6</li>
  <li>テスト7</li>
  <li>テスト8</li>
  <li>テスト9</li>
  <li>テスト10</li>
  <li>テスト11</li>
  <li>テスト12</li>
</ul>
```

```css:style.css
.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;  
  height: 100px;
}

.border {
  border: 1px solid black;
}
```
WindowsでもEmacsからsshログインしたい

# この記事は？
tramp-modeのお話ではありません
NTEmacsの\*shell\*からsshでサーバにログインしコマンドをバシバシ打つためのものです
makeのためだけにTeraTerm使うのが癪だったので調べました
結論から申し上げますと plink+ssh-mode でいけますよというお話

# M$のOpenSSHをcmdproxyから使うと上手くいかない
NTEmacsで`M-x shell`すると起動するcmdpoxy.exe
普通のcmd上でM$のOpenSSHClient使って繋がるの確認したのに
cmdproxy経由だと以下のようなエラーで上手くいかない
> Pseudo-terminal will not be allocated because stdin is not a terminal.

このエラーは仮想端末ptyが無いよーと言っているらしく
回避方法として`fakecygpty`を使うとcygwinのptyを通してコマンドを実行できる
詳細は [Ssh With NTEmacs#EmacsWiki](https://www.emacswiki.org/emacs/SshWithNTEmacs)

ただ、この`fakecygpty`、windows7の時は動いていたのにwindows10で上手く動かない

# 脱fakecygpty
`fakecygpty`が無ければ使わなければいいじゃない
ということで他のsshクライアントを試したところ
`plink`を使うと\*shell\*上で使ってもokなことがわかった

ちなみに`plink`は`putty`に付いてくる
sshの機能単体のCUIプログラムです

`putty`は適当にDLしてください
`plink`, `psftp`とかがインストールされると思います

# plinkの問題点:プロンプトが2重に表示される
こんなイメージ

```
user@host:~$ ls<ret>
ls <-これは*shell*のecho

user@host:~$ <-??????

user@host:~$ _<-ここにカーソルくる
```

原因は確かではありませんが改行コードと思われます
Win環境では CRLF、Linux環境ではLFのみなので
CRとLFの2回のプロンプトが表示されていると考えられます
なので、CRを無視するようにttyに設定します
`stty igncr`

またコマンドが2重になっているのは
\*shell\*のechoと端末からのechoが別になっているためと考えられます
なので、echoを無しにします
`stty -echo`

以上を踏まえて
**`stty igncr -echo`**
を`.bashrc`などに加えるとプロンプトの2重表示を回避できます

ただしこの設定でTeraTerm等の普通のsshクライアントからloginすると
echoが返らず何を入力しても文字が表示されなくなりますので注意を

# ファイルパスのTab補完:ssh-mode
\*shell\*から`ssh`を使うと補完が効かなくてめんどうです
そこで `ssh-mode`を使うと*tramp*を利用してパスの補完を行えます

`ssh-mode`はmelpaからとってこれます
`M-x package install ssh`

`ssh-mode`に`plink`の場所を教えるためには以下のように設定します

```emacs-lisp:ssh-mode.el
;; ssh-modeでplink使うよう設定
(ssh-program "/path/to/plink")
;; trampでpsftp(puttyのsftp)使うよう設定
(tramp-default-method "/path/to/psftp")
;; ファイルパスの補完有効化
(add-hook 'ssh-mode-hook
          (lambda ()
            (setq ssh-directory-tracking-mode t)
            (shell-dirtrack-mode t)
            (setq dirtrackp nil)))
```
`M-x ssh`で`ssh-mode`を起動できます
ホスト名を聞かれるのでいつのもごとく`user@host`形式で入力
ホストが見つかればパスワードを聞かれるので入力
さらに*tramp*接続のためにもう一度パスワードを聞かれます

参考 [Ssh With Emacs#EmacsWiki](https://www.emacswiki.org/emacs/SshWithEmacs#toc5)

# まとめ
- ssh-mode
- plink, psftp
- stty igncr -echo

これでTeraTermとさよなら
rails 画像POST

# Rails 画像POST

### Overview

Rails で画像POSTを行う。

下記コードになります。

```Ruby
class ImageController < ApplicationController
  
  skip_before_filter :verify_authenticity_token

  def index
    begin

      if File.exist?('/path/to/imageUp') == false
        Dir.mkdir('/path/to/image',0777)
      end

      file = params[:img]
      name = file.original_filename

      File.open("/path/to/imageUp/#{name}", 'wb') { |f|
        f.write(file.read)
      }
      cdn = 'http://153.126.160.55/imageUp/' + name
      render json: {status: 200,
                     HttpRequest: 'Multipart API',
                     cdn: cdn,
                     auther: 'keisukeYamagishi',
                     autherHP: 'https://twitter.com/O_Linker_Error',
                     autherGitHub: 'https://github.com/keisukeYamagishi'
      }

    rescue SystemCallError => e
      puts %Q(class=[#{e.class}] message=[#{e.message}])
    rescue IOError => e
      puts %Q(class=[#{e.class}] message=[#{e.message}])
    end
  end
end
```

ご指摘キボンヌ
PHP関連の覚書


#phpが400番、500番のエラー吐いた時(INTERNAL SERVER ERRORとか)に、Apacheのエラーログを見て原因をたどっていく方法【CentOS7】

これまじで便利なのでおすすめ。

Apacheのエラーログは、
`/etc/httpd/logs`以下にあります（デフォルト設定）

基本的にエラーログは、error_log [-20180521] ※日付があったりなかったり
って形で保存されてますので、`less`とか`tail`を使って閲覧します。

私のように、https接続を行っている場合、https通信に関してのerror_logは
`ssl_error_log`ファイルに書き込まれており、`error_log`には残らないのでその点だけ注意です！

#phpで変数の中身をファイルに出力(05/24)

```php
int file_put_contents ( string $filename , mixed $data);
```
が便利。

ただし、配列を出力する場合、これの`$data`に配列を入れても
`Array`
とだけ出力されて肝心のファイルの中身が表示されない。

`print_r()`関数を使うと、返り値としてわかりやすい形式が返るので、

```php
$dump = print_r( $array , TRUE);
$file_put_contents('hogefile', $dump);
```

とすれば、

```
Array
(
    [events] => Array
        (
            [0] => Array
                (
                    [type] => message
                    [replyToken] => xxxxxxxx
                    [source] => Array
                        (
                            [userId] => xxxxxxxx
                            [type] => user
                        )

                    [timestamp] => xxxxxxxxx
                    [message] => Array
                        (
                            [type] => text
                            [id] => xxxxxxx
                            [text] => hoge
                        )

                )
        )
)

```
みたいな見慣れた形式の出力が指定したhogefileに書き込まれているはず。
ちなみに、hogefileが存在しない場合勝手に作成してくれます。

[参考元](https://teratail.com/questions/5580)


#型チェック
使い方は簡単。gettype()関数を使うだけ。

```php
echo gettype($ony_total[0]);

-> string
```
preg_matchの第三引数の型を確かめるときに使用。デバッグに役立つ。
参考：公式ドキュメント

#phpの日付

date()関数を使う。文字列を中に入れて

```php

echo $date("m月d日");

-> 04月24日

echo $date("n月j日");

-> 4月24日
```

ご覧の通り、0を挿入して2桁にしてくれるパターンと、そのまま出力してくれるパターンがあります。

参考にしたのはこれ：[phpの日付についての記事](http://raining.bear-life.com/php/php%E3%81%AEdate%E9%96%A2%E6%95%B0%E3%81%A7%E6%97%A5%E4%BB%98%E3%81%AE%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E5%A4%89%E6%9B%B4)
正直これ見たら十分
#phpの正規表現(04/24)

```php

$text = "5回";
preg_match("/^[0-9]+/", $text, $array);
echo $array[0];

-> 5
```
####ポイント
・第三引数には、配列が返る。$array[0]には、マッチした分の文字列が入る。
・<b>第三引数の$arrayは、事前に宣言されてなくてもよい</b>
・文字列型で返るので、数字を抽出する場合は(int)によるキャストが必要。
参考：公式ドキュメント
【webpack】target: electron-rendererを設定するとFormDataが使えない

# 環境

webpack 3.10.0

# 問題

webpackの設定で`target`を`electron-renderer`にすると、FormDataが使えない。

```
const data = new FormData();
data.append(name, value) // ここでエラーになる
```

webpack関係ないですが、同じように困ってる人もいました。
https://github.com/form-data/form-data/issues/220

かといって`target`を`electron-renderer`にしないとrendererプロセスでelectronの機能が扱えない。
shell使ってデフォルトブラウザ開いたり、プロセス間通信したり。


# 解決策

electronの使いたい機能はバンドル対象のにせず、scriptタグでjsファイルを読み込むようにした。
`webpakc.config.js`の`target`から`electron-renderer`も削除。

```index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script src="./shell.js"></script> // 今回作成したファイル
    <script src="./bundle.js"></script> // バンドルファイル
</body>

</html>
```

```shell.js
const remote = require('electron').remote;
const shell = remote.shell;

const openDefaultBrowser = url => {
    shell.openExternal(url);
};
```

もっといい方法、webpackの設定での解決法を知ってる人いたら教えてください。
【PHPなど】エルビス演算子 ?: 本当にエルビス・プレスリーだった【画像あり】

エンジニアなら誰もが気になるエルビス演算子について調べてみました。

## はじまりはPHP7のnull合体演算子から始まる

PHPで配列の要素を扱う際に、存在しないキーを指定するとNoticeを吐いてしまう。
PHP7から導入されたNull合体演算子を使うと、これをシンプルな記述で回避できます。

いままで

```php
$hoge = isset($_GET['hoge']) ? $_GET['hoge'] : null;
```

これから（PHP7）

```php
$hoge = $_GET['hoge'] ?? null;
```

これで``` isset() ? ```地獄から解放されますね。

* [実装例：PHPのnull合体演算子で「無かったら」の処理が簡単](https://qiita.com/akiyoshi_sasaki/items/1c402e6c4af05f8197e6)
* [PHP NULL合体演算子](https://qiita.com/Yorinton/items/86b7ee84c80fc6242148)

## エルビス演算子というのがあるらしい

null合体演算子について調べていたら、エルビス演算子というのがあることを知りました。

null合体演算子（PHP7から）
``` ?? ```

エルビス演算子（PHP5.3から）
``` ?: ```

エルビス演算子はnull合体演算子とは違って存在チェックはできないのですが、似ています。
左辺がfalseと同等の値（falsyと言ったりします）の場合に右辺の値を返します。
nullだけでなく、0や空文字、空配列もfalsyな値です。

```php
$hoge = $_GET['hoge'] ?: null;

// ↑ 同じ動き ↓

$hoge = $_GET['hoge'] ? $_GET['hoge'] : null;
```

## エルビス演算子の由来は？

それにしても特徴的な名前ですよね。
エルビスといえばエルビス・プレスリーが有名ですが、このエルビス演算子のエルビスは何のエルビスなんでしょうか？

Wikipediaを見てみましょう。

> エルビス演算子はエルビス・プレスリーの顔文字(emoticon)に形が似ていることからこう呼ばれる

[エルビス演算子 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%AB%E3%83%93%E3%82%B9%E6%BC%94%E7%AE%97%E5%AD%90)

なん・・・だと・・・

``` ? ```がリーゼント部分、``` : ```が目のようです。
``` :) ``` とか ``` :D ``` とかの英語圏でよく使われる顔文字と同じ見方ですね。

## 画像集

![elvis-operator.png](https://qiita-image-store.s3.amazonaws.com/0/20427/b6c78f71-cbac-5606-5a29-349306efdca2.png)

[The Elvis Operator – DobsonDev](https://dobsondev.com/2014/06/06/the-elvis-operator/)


![a1913815034_16.jpg](https://qiita-image-store.s3.amazonaws.com/0/20427/375c8e8b-6f07-f1f8-ecf0-7e05f5e104e6.jpeg)

[The Elvis Operator](https://theelvisoperator.bandcamp.com/)


![kotlin-maybe-its-the-right-time-37-638.jpg](https://qiita-image-store.s3.amazonaws.com/0/20427/8bee4bef-2825-28c1-b702-1921a4d55029.jpeg)

[Kotlin: maybe it's the right time](https://www.slideshare.net/slideshow/kotlin-maybe-its-the-right-time-81928424/81928424)
Powershell functionでコマンドライン引数を使う

# 概要  
Powershell functionでコマンドライン引数を使う方法の簡単なまとめ

## 基本  

Paramブロック内に[型名]$パラメータ名の形式で記述する。
コマンドラインから呼び出す場合、 パラメータ名を明示的に指定する方法と、パラメータ名を指定せず値だけ渡す方法(先頭のパラメータから順に渡される)がある。
パラメータ自体を省略した場合、デフォルト値が入る。

**コード:**

```param.ps1
function global:paramTest() {
    Param([string]$Param1, [int]$Param2)

    Write-Host "Param1:$Param1, Param2:$Param2"
}
```

**実行結果:**

```
>./param.ps1
>paramTest -Param1 abc -Param2 100
Param1:abc, Param2:100
>paramTest -Param2 3 -Param1 aaa
Param1:aaa, Param2:3
>paramTest bbb 5
Param1:bbb, Param2:5
>paramTest
Param1:, Param2:0
```

## switchパラメータ

Paramブロックでswitchを指定することで、指定したときTrue, 無いときFalseとなるオプション引数を使うことができる。
単純にON/OFFを指定したいパラメータに使える。

**コード:**

```switch.ps1
function global:switchTest() {
    Param([switch]$Param1, [switch]$Param2)

    Write-Host "Param1:$Param1, Param2:$Param2"
}
```

**実行結果:**

```
>./switch.ps1
>switchTest -Param1 -Param2
Param1:True, Param2:True
>switchTest -Param2
Param1:False, Param2:True
>switchTest
Param1:False, Param2:False
```

## 引数一覧をそのまま取得

$args変数を使うことで、引数一覧をそのまま取得することができる。
パラメータの個数が可変の場合を扱うのに使えそう。

**コード:**

```args.ps1
function global:argsTest() {
    Write-Host "args:$args"
}
```

**実行結果:**

```
>./args.ps1
>argsTest -a 1 -b 2 -c 3
args -a 1 -b 2 -c 3
```

## パラメータ名の短縮について  

コマンドライン引数でパラメータ名を指定する場合、完全な名称である必要はなく、短縮することができる。
大文字小文字関係なく前方一致で判定される。(例. パラメータ「-Abcd」は、「-abCD」でも「-aB」「-a」でも良い)


**コード:**

```short.ps1
function global:shortTest() {
    Param([string]$Abcd, [string]$Efgh)

    Write-Host "Abcd:$Abcd, Efgh:$Efgh"
}
```

**実行結果:**

```
>./short.ps1
>shortTest -Abcd AAA -Efgh BBB
Abcd AAA Efgh BBB
>shortTest -aB AAA -eF BBB
Abcd AAA Efgh BBB
>shortTest -a AAA -E BBB
Abcd AAA Efgh BBB
>shortTest -a AAA -e BBB
Abcd AAA Efgh BBB
```


### 参考資料

以下のページを参考にしました。
> - [Windows PowerShell: パラメーターを定義する](https://technet.microsoft.com/ja-jp/library/jj554301.aspx)
> - [Accepting Arguments for PowerShell Functions: Best Practices](https://blogs.technet.microsoft.com/heyscriptingguy/2013/04/10/accepting-arguments-for-powershell-functions-best-practices/)
RPAが負の遺産となる危険性とその対策について

# RPAについて

RPA(Robotic Process Automation)の話題は、ここ1年で急速に盛りがってきている。すでに導入実施済みの企業もこれから導入を検討している企業も増えていると思われる。RPAを導入することにより、パソコンを使用した日常的な定型作業を自動化できる。その作業を実施していた担当者は、大きな成果を上げれないがミスをすると評価が下がるような地味な作業から解放される。また企業にとってはその分の人件費が削減できるため、非常に重宝されている。

# RPAの役割について
RPAを使って、複数のシステム間をつないで１つの定型作業を自動化する。例えば、注文書がメールで添付されてきたら、それを社内の受注システムに入力を行う作業がある。他には社内のWEBシステムから毎月特定の条件にあてはまる顧客情報を抽出し、別のダイレクトメール発送システムにファイルをFTPで送信するなどの作業がある。これらの作業は人が実施するよりもRPAで自動化した方がミスが少なく、敏速、確実に作業を完了させることができる。RPAはこのような作業の自動化を行うのに使用が可能だ。

# RPAの作り込み増加の危険性について

上記のような作業をRPAで自動化し、日常業務が削減できることが経営者に見えるようになると、恐らくRPAで自動化可能な作業は徹底的にRPAで自動化していくことが予想される。ところが、RPAによる自動化を無秩序に進めていくと、将来思わぬ危険が待っている。
例えば、顧客からの注文書のフォーマットが変更された場合にそのフォーマットを使用しているRPAが１個であれば良いが、それが３個あると、その３個のRPAのシステムの改修が必要となる。また、顧客情報の抽出画面が、何らかの理由で少し変更があった場合にも同様に、顧客情報の抽出画面からデータを抽出しているRPAのツールの修正が必要になる。
当然ながら、顧客の注文書の変更時、抽出画面の変更時にRPAのツールも同時に変更する事になるが、これらのRPAで対応していた作業が増加すると、RPAのツールによる作業を1日でも止めることが出来ない状態になっている可能性が高い。そのため、注文書のフォーマット変更時や、抽出画面の変更実施には、変更前にその画面や注文書を使用しているRPAツールを洗い出して、その影響範囲の調査と、RPAツールの改修を行うようにユーザー部門や情シスとの調整が必要になる。影響範囲が大きい場合には本来実施したいシステムの変更が遅延したり断念せざるを得ない場合が出てくる危険がある。

# RPAのツールが負の遺産のならないための対策について
上記のようなRPAツールの無秩序な追加は将来的に負の遺産となる。ではRPAを使わないのが良いのかというと、そういう訳ではない。日常の単調な繰り返し作業の作業負荷を削減することはホワイトカラーの生産性向上にも繋がる。RPAツールをうまく使えばその効果は期待できる。ただ将来的に、RPAツールが負の遺産とならないようにするために、下記のような対策が必要と考える。

## 対策(1) 他システムとのインターフェイス部分の部品化
他システムとのインターフェイスを複数のRPAツールでそれぞれ作り込んでしまうと、変更があった場合にそれぞれ修正が必要となる。このような事態に落ち入らないようにするために、他システムからの入力部分、他システムへの出力部分については、１つ作成したらそれをそのまま使い回せるように部品化しておく。RPAツールを選択する場合にはこのような部品化が可能なものを選択する。

## 対策(2) 複雑なものは作成しない
RPAで作成する場合に、その作業が重要でかつ作成した場合に複雑になりすぎる場合は、そもそもRPAを使用せずに情シスまたは外部ベンダーにシステムとして本格的に開発依頼を行う。本来は、システム間の連携はシステム開発時に必要なものを洗い出して作成しておくべきものだが、漏れている場合も考えられる。無理してRPAを使って解決せずに、システム間の連携システムの開発を依頼すべきである。RPAを使う場合は、そのツールの担当者が1-2時間で簡単に手直しができる程度のものにするなど、使用範囲をあらかじめ決めておくと良い。

## 対策(3) RPAで作ったものを一覧化しておく
RPAでどのシステムを使用しているのか、その作業頻度と重要性、そのツールの使用部署について一覧化した資料を作成しておくことにより、システム変更時の影響範囲の調査を効率よく実施することも可能となる。さらに一覧化しておく事により、すでにツールが増えすぎていないか、またその中に本格的にシステム化すべきものが無いかを常にチェックが可能となる。

# 最後に

私はRPAはシステム間のインターフェイスの標準化が完了するまでの過渡的なツールであると考えている。例えば受発注のシステム間のプロトコルが標準化されれば、ある企業の発注システムと、別の企業の受注システムは、標準化されたプロトコルによって接続されることが普通になり、RPAのようなツールは不要になる。ただペーパーレス化が進んできた現在でもOCRのような紙を前提としたソフトウェアが生き残っていることを考えると、RPAもある程度の期間に渡って使い続けられることになると考えられる。使い方をよく考えて目先のコスト削減が将来の負の遺産とならないようにすることが重要だ。
rubyのmailの正規表現の書き方


emailの形式に明確な定義はありませんが、
実用上困らないパターンです。

[Railsの公式リファレンス](http://guides.rubyonrails.org/active_record_validations.html#common-validation-options)から引用しています。


```ruby
mailRegex = /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i
email = "a@a.com"
email.match? mailRegex # =>true
```
pysmbの使い方（匿名接続）

ファイル共有は基本的にユーザー名とパスワードありきで接続すると思いますが、閉鎖的なLAN環境などではパスワード無しの`Guest`ログインが許可されていたりする場合もあると思います。

そんな若干緩い環境でもpysmbでファイル共有してみたいと思います。

# インデックス
[pysmbの使い方（接続・切断）](https://qiita.com/t2kojima/items/5db8dadaa6e07321d25f)
[pysmbの使い方（ファイル受信）](https://qiita.com/t2kojima/items/6c20a7801467221470ac)
[pysmbの使い方（ファイル送信）](https://qiita.com/t2kojima/items/a6b81de771ac45c9948b)
[pysmbの使い方（ロギング）](https://qiita.com/t2kojima/items/4fc5e2e2c041b2c16824)
pysmbの使い方（匿名接続）

# 実行環境

#### クライアント
- Windows 10
- Python 3.6.3
- pysmb 1.1.22

#### サーバー
- Windows 7
    - User : IEUser
    - Pass : Passw0rd!
    - HostName : IEWIN7
    - Domain : WORKGROUP
    - IPAddress : 172.28.0.198

# 匿名アクセスを有効にする

## WindowsVista以降の場合

「パスワード保護共有」をオフにすることで簡易に匿名アクセスが有効になります。この方法では`Guest`アカウントを有効にする必要もありません。

`コントロールパネル`の`ネットワークと共有センター`を開き、左側のメニューから`共有の詳細設定`を選びます。**パスワード保護共有**という項目があるのでオフに設定します。

![img.PNG](https://qiita-image-store.s3.amazonaws.com/0/204683/db8752a7-37bd-7be9-c3c3-413167556bb8.png)

## WindowsXPの場合

### 簡易ファイルの共有機能

XPでは「簡易ファイルの共有機能」がデフォルトでオンになっています。これが有効になっていると、全てのアクセスが匿名アクセスという扱いになります。
しかしワークグループ環境でしか使えない為、ドメイン環境の場合は次の方法で匿名アクセスを有効にする必要があります。

設定内容は`フォルダオプション`から確認できます。

### Guestの有効化とポリシーの設定

まず以下のコマンドでGuestアカウントを有効化します。

```
net user guest /active:yes
net user guest *
```

パスワードを求められるので、空パスワード（入力なしでEnter）を設定。

次に`ファイル名を指定して実行`で`gpedit.msc`を実行します。グループポリシーが開くので、`コンピュータの構成`-`Windows の設定`-`セキュリティの設定`-`ローカル ポリシー`-`ユーザー権利の割り当て`を開き、**ネットワーク経由でコンピュータへのアクセスを拒否する**というポリシーの設定から**Guestを削除**します。

# pysmbで匿名アクセス

匿名アクセス可能な場合は`username`と`password`が指定不要になります。

```python
# main.py

import platform
from smb.SMBConnection import SMBConnection

conn = SMBConnection(
    '',
    '',
    platform.uname().node,
    'IEWIN7')
conn.connect('172.28.0.198', 139)

print(conn.echo('echo success'))

conn.close()
```

その為、上記のように空白でもOKです。

ダイレクトホスティングSMBを使う場合はもっと雑に接続できます。

```python
from smb.SMBConnection import SMBConnection

conn = SMBConnection(
    'a',
    'a',
    'a',
    'a',
    is_direct_tcp=True)
conn.connect('172.28.0.198', 445)

print(conn.echo('echo success'))

conn.close()
```

`remote_name`のみ空白だとアクセスエラーになりますが、何か一文字でも設定すればOKです。それ以外の引数（`username`,`password`,`my_name`）は空白でも任意の文字列でもなんでもOKです。

このように匿名アクセスを有効にすると実質IPのみの指定でアクセス可能になります。

# 参考
[匿名ファイル・アクセスを許可する](http://www.atmarkit.co.jp/fwin2k/win2ktips/785anonacc/anonacc.html)
[簡易ファイルの共有機能を利用する](http://www.atmarkit.co.jp/fwin2k/win2ktips/788sfshare/sfshare.html)
Don't just give fish, you should give rod and reel!

「Don't just give fish, you should give rod and reel!」本日stackoverflowでこの言葉を見かけました。
中国にも近い言葉「授人以鱼,不如授人以渔」があります。日本語に訳すと、「人に鱼をやるより取り方を教えること。」の感じかな。
社員の教育はまさにそのとおりであります。基礎知識技術を教えるよりも、自律的に成長する方法や意識、知識技術の応用時の考え方などのほうが大事であります。
私の日本人の友人に以下の言葉を言われたことがあります。
「私の世界では新人という概念がないです」
そういう言葉を聞いて、皆さんもえっと反論しそうになるかもしれませんが、彼が言いたいのは経験ありなしに関係なく基礎知識は自分で勉強しろということです。
皆さん、いかがと思いますでしょうか。

周@ソフトシンク
内部結合について解説

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202653/c1e95b07-af1b-899d-dcad-c95ae61035b3.png)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/202653/8800782b-d8f1-958f-a5b9-fc7f385c1bf0.png)


こんなテーブルがあるとします。
これを内部結合するためのSQL文がこちらになります。

```sql:基本となるSQL文
SELECT カラム名1, カラム名2, ... FROM 元になるテーブル
  INNER JOIN 結合するテーブル ON 結合の条件
```

これを参考にして```books table```と```author table```を内部結合します。

```sql:SQL文
SELECT * FROM books INNER JOIN authors ON books.author_id = author.id
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202653/1280bdff-4892-89b7-1b76-a08dbc0045d0.png)


このように条件に一致したレコードが結合されます。

また表を見ると条件に合わなかったレコードは削除されていることがわかるかと思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202653/59dc36a3-55ce-d135-610c-c554ecd86c8a.png)



## 参考にさせていただいたサイト

[SQL素人でも分かるテーブル結合(inner joinとouter join)](https://qiita.com/naoki_mochizuki/items/3fda1ad6594c11d7b43c)

わかりやすい解説ありがとうございました。
Vue.jsが面白そうだから学ぶ②

[Vue.jsが面白そうだから学ぶ①](https://qiita.com/MonaLisaParking/items/4440d03463574dd5459e)ではレンダリング、条件分、ループ分を書きました。
②ではその他のディレクティブやコンポーネントについて記載できればと思います。

# 属性やクラスへのバインド
属性やクラスへの値のバインドしたい場合、`v-bind`を使用します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
  <style>
    .font-weight{font-weight: bold;}
  </style>
</head>
<body>
  <div id="app">
    // タイトル属性に「Hello JavaScript」がバインドされる
    <button v-bind:title="title">JavaScript</button>
    // h2タグのクラスに「font-weight」がバインドされる
    <h2 v-bind:class="className">ここは太字</h2>
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

```
```js:index.js
new Vue({
  el: '#app',
  data: {
    title: 'Hello Javascript',
    className: 'font-weight'
  }
});
```
これで`title`属性に「Hello JavaScript」がバインドされるかと思います。
クラスには「font-weight」がバインドされスタイルが適用されます。

さて、今まで書いてきたディレクティブには実は省略した書き方があります。
`v-bind`であれば、

```html
<!-- 完全な構文 -->
<a v-bind:title="〇〇〇"> ... </a>

<!-- 省略記法 -->
<a :title="〇〇〇"> ... </a>

```

`v-on`であれば、

```html
<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

```

という感じです。覚えておくといいですね。

# 算出プロパティ
```html
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>
```
たとえば上記のようなことをしたい時、やりたいことが複雑になるとコードも複雑になり
かつ肥大化していくと思います。そのような場合は算出プロパティを使うと便利です。

```html
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
```
```js
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
})
```
算出プロパティは`computed`プロパティの後に記載できます。
メソッドと異なる点が気になるかと思いますが、それは、算出プロパティは依存関係にもとづき**キャッシュ**されるという違いです。
依存関係が更新された場合のみ再評価されるのでこの例でいうと、`message`が変わった
タイミングで再度`reversedMessage`は呼び出されます。
それ以外はキャッシュが適用されます。

# コンポーネントを作ってみる
次はカスタムコンポーネントを作ってみます。
Todoリストを作成するとしてTodo一覧を表示する際のリストをコンポーネント化してみます。

```html
<ul>
  <li>todo1</li>
  <li>todo2</li>
  <li>todo3</li>
</ul>

/* ↑が以下のように書けるようにする */
<task-list></task-list>
```

まず、カスタムコンポーネントの作成方法ですが、Vueインスタンスの`component`関数に色々指定します。
第一引数にコンポーネントの名前を指定しましょう。それ以降はテンプレートや渡すデータを指定します。

```js
Vue.component('task', {
  template: '<li><slot></slot><li>'
});

new Vue({
  el: '#app'
})
```

ここまででリスト表示するならHTMLで以下のように記載できます。

```html
<div id="app">
  <task>todo1<task>
  <task>todo2<task>
  <task>todo3<task>
</div>
```

リストの数が動的でも対応したいので`v-for`を使って繰り返し表示にします。

```js
// 先ほど作成した<task>の部品を使ってさらに部品を作ります。

Vue.component('task-list', {
  template: '<div><task v-for="task in tasks">{{ task.title }}<task></div>',

  data: {
    tasks: [
      {title: todo1, complete: true},
      {title: todo2, complete: false},
      {title: todo3, complete: false},
    ]
  }
});


Vue.component('task', {
  template: '<li><slot></slot><li>'
});

new Vue({
  el: '#app'
})
```

`<task>`コンポーネントを利用して`task-list`コンポーネントを作成しました。
これで以下のように書けるようになっているはずです。

```html
<div id="app">
  <task-list></task-list>
</div>
```

カスタムコンポーネント、便利ですね。部品をスマートに書けるようになるので
たくさん実装して練習してみたいと思います。

ということで続きは③で記事にしたいと思います。
技術書典4振り返り(MZ工房)

技術書オンリーイベントの技術書典４にサークル参加してきました。
サークル名：MZ工房　（く-26）
既刊：ピースサインの作り方
新刊：ときめきネコリアルの作り方（32P）
当日出したものは、BOOTHに電子出版しました
https://mzfact.booth.pm/

#技術書オンリーイベント？
同人誌のオンリーイベントというと、ジャンル縛りだったり、アニメ縛りだったりします。
例えばNARUTOオンリーであれば、題材はNARUTOで、それに関する二次創作になります。この際、二次創作した物について制約は法的なやつ（海賊版だったり、エログロだったり）以外はあまりないと思います。つまり、小説でも、漫画でも、歌でも、手作り人形でもなんでもいいわけです。
**題材は固定、アウトプットは自由**
一方技術書典では
**アウトプットが技術書で、題材は自由**
（細かい制約は公式を参照してください）厳格にフォーマットが決まっているわけではなくて、俺の知見広まれ！だったり、仕事術だったり、マイナー言語の布教だったり。

過去にも何度か開催されていて、弊サークルは技術書典３からサークル参加させてもらっています。今回も幸いにも受かりました。２回目なので１回目よりはスムーズにいけましたが、振り返りを書き残したいと思います。開催までの期間別で書いていきます。

##エントリー(2018-01月)
受かるかわから無いけどとりあえずエントリーしました。

##サークル合否発表(2018-02-04)
受かった！ということで何を作ろうか考えました。Unityでさらに追加のゲームを作ろうかと思いましたが、もう企業もガンガン使ってるし知見も多数見られているので、今回はパス。というか技術書を書く場合必ずしも成果物ありきではないと思いました。
たまたまグーグルホームを半額で仕入れていたので、それについて書くことにしました。

##２ヶ月前
何をつくろうか決まったぐらいの進捗
##１ヶ月前
成果物はできていて、執筆の環境を整えたところ
私の環境は、大学時代からずっとMacTex(Latex)です。
##２週間前
ドラフト版が出来たところ(28Pで図とかは仮置き)
##１週間前
完成→ねこのしっぽにオンライン入稿
入稿から２日で文字が潰れてるよっていう指摘を印刷所からもらって、修正して製本完了
##４日前
ねこのしっぽから本が自宅に届く。B5 ３２P ３０部
釣り銭準備（両替は平日中に）
##前日
POPとか品書きとか
##当日
持ち物
 - サークルスペース確保用ブランケット
 - 500円玉x15 100円玉x30
 - ブックスタンド
 - ポスカ
 - スケッチブック
 - 大きいクリップ
売り上げ/持ち込み
既刊7/20
新刊23/27 (3部は人にあげた)

こんな感じでした。次はコミケの合否待ちですが、
他に技術書が出せそうなイベントあったら教えてください。一年に４回だとすこし物足りない。
Python Pillowを使って写真を中心から正方形にトリミングする

# やりたいこと
写真を一括で中心から正方形にトリミングする。

# 画像処理ライブラリPillowのインストール
pipでインストール

```
$ pip install Pillow
```

# トリミング

下記のディレクトリ構成でimgディレクトリ内のjpg画像をトリミングしてtrimedディレクトリに保存する。

```
.
├── img
├── trimmed
trim.py
```

ソースコード

```Python
from PIL import Image
from pathlib import Path

# 元画像が入ったディレクトリ
p = Path('img/')
src_img_list = list(p.glob('*.jpg'))

# トリミングのサイズ(ピクセル)
new_size = 400

for i, src_img in enumerate(src_img_list):

    # 画像読み込み
    img = Image.open(src_img)

    # 中心座標を計算
    center_x = int(img.width / 2)
    center_y = int(img.height / 2)

    # トリミング
    img_crop = img.crop((center_x - new_size / 2, center_y - new_size / 2, center_x + new_size / 2, center_y + new_size / 2))

    # トリミングした画像を保存
    img_crop.save('trimmed/photo' + str(i) + '.jpg', 'JPEG', quality=100, optimize=True)
```
元画像
![214hariIMGL9956_TP_V4.jpg](https://qiita-image-store.s3.amazonaws.com/0/83184/797fcddc-4ac1-9de4-7065-068a4efe7a6b.jpeg)

加工後
![photo2.jpg](https://qiita-image-store.s3.amazonaws.com/0/83184/33a01adc-7e87-bdd5-3f09-614034cfa19e.jpeg)
HTML5の全構成要素・用語(を目指して)

2018.5.7更新に手が回っていません

この記事の動機とか目的は[C言語の記事](https://qiita.com/Jun15972/items/2c541d05802596d03d7d)と同様です

現在のメジャーなブラウザが対応してる範囲での話になるつもりです。

##&lt;!DOCTYPE html>

DOCTYPE宣言と呼ばれるものの1つで、これを置くとウェブページがHTML4.01とかXHTMLとかではなくHTML5であることをブラウザに教える。それ以外の場所には置かない。今時のウェブページはこれを1つ置いて、次に&lt;html ○○>・・・&lt;/html>を置いて、他には何も置かない

```html:sample.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf8">
    <title>内容のないページ</title>
  </head>
  <body>
    <h1>内容のないページ</h1>
    <p>内容がないゾ</p>
  </body>
</html>
```

##タグ

&lt;○○>の形式のものをタグ、HTMLタグと呼ぶ

###開始タグ

&lt;○○>(○○は英数字で構成)もしくは&lt;○○ △△="××" □□="◇◇" ...>はこう呼ばれる

###属性

タグの中の△△="××"はこう呼ばれる

###終了タグ

&lt;/○○>はこう呼ばれる

##&lt;html lang="ja">・・・&lt;/html>

lang属性をjaにすることによって日本語のページであることを知らせる

##&lt;head>・・・&lt;/head>

裏方的な設定を書いておくための部分。&lt;html ○○>・・・&lt;/html>の内容は&lt;head>・・・&lt;/head>と&lt;body>・・・&lt;/body>各1つのみ

##&lt;meta charset="utf8">

ウェブページの文字コードがUTF8であることをブラウザに教える

##&lt;meta name="description" content="○○">

検索エンジンの検索結果でcontent属性に書いた文字列がページの説明文として考慮される

##&lt;title>・・・&lt;/title>

内容(テキスト)がブラウザのタブのタイトルとして表示

##&lt;body>・・・&lt;/body>

ブラウザの表示領域に表示される文書そのものの構造・内容を書く

##&lt;p>・・・&lt;/p>

bodyタグ内に置き1つの段落であることを表す。見た目の上ではただの長方形領域

##&lt;link rel="shortcut icon" href="○○.ico">

href(エイチレフ)属性に書いた相対・絶対アドレスで示されるアイコンファイルをファビコンにする。これに限らずlinkタグは全てheadタグ内に置く

##&lt;link rel="stylesheet" href="○○.css">

href属性に書いた相対・絶対アドレスのCSSファイルを読み込んでそれに書いてあるスタイルをページに適用する

##&lt;style>・・・&lt;/style>

head要素内に置く。中にCSSを書くとそのページ専用のスタイルとして適用される

##&lt;!--　・・・　-->

・・・に何を(-->以外)書いてもブラウザの動作上影響がない、つまりコメント

##グローバル属性

どの要素にもつけることができる属性

##id="・・・"

グローバル属性でタグにIDを与える。同じページに同じIDをもつ要素が複数存在することはできない。CSSやJavaScriptで使う。また例えばindex.html#messageというURLにアクセスするとindex.htmlでmessageというIDをもつタグにあたる位置までスクロールされる
WindowsのPowerShellのGet-ChildItemを使ってファイルを検索する

# 使用するコマンド 

|コマンド名|エイリアス名|解説|
|---|---|---|
|Get-ChildItem |dir|パターンにマッチするファイル名の一覧を取得する |

 
## コマンド例（１） 

```powershell

>dir c:\workspace\* -r -Filter "*Hoge.java" -Name 
```
 
c:\workspace以下にあるファイル(サブフォルダーも含む）で、ファイル名の末尾が「Hoge.java」であるものを検索し、そのファイル名の一覧を取得する。 
 
## Get-ChildItemの主なオプション

|オプション|解説|
|---|---|
|-r|再帰オプション。指定されたサブフォルダーを最下層まで全て対象とする。 |
|-Filter|検索結果をフィルターによって絞り込む |
|-Name| ファイル名のみ出力する|


## コマンド例（２） Select-Objectと組み合わせて使用する

```powershell

>dir c:\workspace\* -r -Filter "*Hoge.java" | Select-Object fullname 
```

Select-Objectにより、dirコマンドの出力結果から、「fullname」列のみを取り出すことが可能。
なお、Select-Objectのエイリアスは「select」だ。
tail -f + grepをPower Shellで実行する方法 

# 概要

ログファイル（ビルドやアプリの実行ログ）の出力をLinuxで監視する場合に、よく使用するのが、tail -f コマンドと、grepコマンドだ。
この２つのコマンドで、例えばログに「Failure」という文言が出力されたら、 
Linuxのﾀｰﾐﾅﾙ画面にFailureを含む行のみを出力するいった小技をよく使う。 
これと同じことをWindowsのPower ShellでもGet-ContentとSelect-Stringを使うことで実現可能となっている。
 
## 前提条件 
Power Shellのバージョン 3.0以上が必要 
Windows 7では、Power Shell 2.0がプリインストールされているようなので、 
バージョンが古い場合は事前にバージョンアップしておこう。
 
## 使用するコマンド 
Get-Content 
Select-String 
 
それぞれ、エイリアスがあり、Get-Contentは「type」、 
Select-Stringは「sls」でも実行可能。 

# コマンド例 
 
```powershell
> type ファイルパス -Wait -Tail 1 | sls -Pattern "検索文字" 
```
 
## コマンド例の解説 
検索文字には正規表現を使用する。 


## slsコマンドの主なオプション 

|オプション|解説|
|---|---|
|-CaseSensitive|大文字小文字を区別する|
|-Pattern|検索する文字を正規表現文字列で指定する|

## typeコマンドの主なオプション

|オプション|解説|
|---|---|
|-Wait|行が追加されるまで待つ |
|-Tail| 行末を表示する。数字は表示する行数 |
[Kotlin] equals(=)演算子のoptionalでの挙動

equals(=)演算子を実装して、optionalで使った場合の挙動。
片方がnullの場合にどうなるか。

null = null、notNull != null が成立し、順番を変えても結果は変わらない。
直感的な動きで特に心配なかった。

## サンプルコード

```Kotlin
class Foo(var code: String) {
    override operator fun equals(other: Any?): Boolean {
        val foo = other as? Foo ?: return false
        return this.code == foo.code
    }
}

val null1: Foo? = null
val null2: Foo? = null
val nonNull1: Foo? = Foo("1")
val nonNull2: Foo? = Foo("1")

Log.d(this::class.simpleName, "null = nonNull ${null1 == nonNull1}")
Log.d(this::class.simpleName, "nonNull = null ${nonNull1 == null1}")
Log.d(this::class.simpleName, "nonNull = other nonNull ${nonNull1 == nonNull2}")
Log.d(this::class.simpleName, "null = null ${null1 == null2}")
```

```:Result
$ null = nonNull false
$ nonNull = null false
$ nonNull = other nonNull true
$ null = null true
```

## 考察

比較対象の前方がnullの場合Fooのequalsは呼ばれないが、おそらくOptionalのequalsでnull = null、notNull != nullの判定をしているのではないか。
Krita と AwesomeBump を使って各種テクスチャを作る方法

　普通の画像ファイルから各種テクスチャを作成する方法を調べたので、備忘がてら記事にしておきます。

　記事中で使用しているソフトはそれぞれ以下からダウンロードできます。

- Krita : https://krita.org/jp/
- AwesomeBump : https://github.com/kmkolasinski/AwesomeBump

　手順等をスライドにしたものが次になるので、あわせて参考にしてみて下さい。

- 春告げ鳥の声響きけり、 テクスチャ作成 : https://speakerdeck.com/satoyuichi/chun-gao-geniao-falsesheng-xiang-kikeri-tekusutiyazuo-cheng

# Krita を使って Albedo テクスチャを作成する
　AwesomeBump からは画像ファイルから各種テクスチャを作成できますが、入力に使う画像はなるべくライトの影響を受けていない、いわゆる Albedo テクスチャを使わないと、最終的なレンダリング結果が不自然になってしまいます。
　そこで、こちらの記事（[宋さんの3ds Max キッチンスタジアム 第29回：マッピング用テクスチャーを考える](https://area.autodesk.jp/column/tutorial/3ds_max_kitchen_stadium/texture_data/)）を参考にさせて頂きながら、Krita を使った Albedo テクスチャの作成を試してみました。
　記事中では輝度情報の調整のサンプルに [Marmosetのサンプルチャート](https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/) が紹介されていますが、こちらの Unity ブログの記事（[Working with Physically-Based Shading: a Practical Approach](https://blogs.unity3d.com/jp/2015/02/18/working-with-physically-based-shading-a-practical-approach/)）もコンパクトにまとまっていて良いかと思います。
　ポイントはソフトライトとしてデフォルトの "SVG" ではなく "Photoshop" を選択するところです。レイヤーの「合成モード」から「相対明色」を開いて「ソフトライト(Photoshop)」だけを選択して指定しましょう。

# AwesomeBump を使って各種テクスチャを作成する
　作成した Albedo テクスチャを使って AwesomeBump で各種テクスチャを作成します。作り方はこちらの動画（https://www.youtube.com/watch?v=HSoiaOK5OVk&t=96s）が参考になります。

# 各種アプリケーションなどで素材に適用する
　AwesomeBump で出力した各種テクスチャを入力として適用しましょう。場合によっては値を反転したりする必要がある（Metalness の扱いが逆など）かもしれませんので、結果がおかしい場合は注意してみて下さい。
関数の中にクラスを定義する


先に書いておくと、読む必要のない記事です。
実行環境: node v9.11.1

関数を返す関数は高階関数として頻出するパターンでよく使われる。

```js
function createCounter() {
  let count = 0
  return () => {
    count += 1
    return count
  }
}

const counter = createCounter()

console.log(counter())
// => 1
console.log(counter())
// => 2
console.log(counter())
// => 3
```

本題はここからで、関数の中にクラスを定義できる。

```js
function createCounter2() {
  class Counter {
    constructor() {
      this.count = 0
    }
    add() {
      this.count += 1
    }
  }

  const counter = new Counter()

  return () => {
    counter.add()
    return counter.count
  }
}

const counter2 = createCounter2()

console.log(counter2())
// => 1
console.log(counter2())
// => 2
console.log(counter2())
// => 3
```

さらにデフォルト引数でクラスを定義できるので、もっと楽しくすることもできる。

```js
function createCounter3(
  Counter = class {
    constructor() {
      this.count = 0
    }
    add() {
      this.count += 1
    }
  }
) {
  const counter = new Counter()

  return () => {
    counter.add()
    return counter.count
  }
}

const counter3 = createCounter3()

console.log(counter3())
// => 1
console.log(counter3())
// => 2
console.log(counter3())
// => 3
```

便利ですね。

さらに`new class{}()`でインスタンス生成できるのでデフォルト引数ないで無名クラスのインスタンス化ができる。

```js
function createCounter4(
  counter = new class {
    constructor() {
      this.count = 0
    }
    add() {
      this.count += 1
    }
  }()
) {
  return () => {
    counter.add()
    return counter.count
  }
}

const counter4 = createCounter4()

console.log(counter4())
// => 1
console.log(counter4())
// => 2
console.log(counter4())
// => 3
```

特にオチはありません。

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">特に意味はないけど特に意味はないやつです <a href="https://t.co/oaCLNlQb8O">pic.twitter.com/oaCLNlQb8O</a></p>&mdash; あかめ@社会性.js (@akameco) <a href="https://twitter.com/akameco/status/988759320937488384?ref_src=twsrc%5Etfw">April 24, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Maxでjavascriptを編集したら自動的にパッチに読み込み直す設定

グローバルコードとして、

````
autowatch = 1 

````

と指定するとjsファイルに変更があった際に自動的に再ロード＆再コンパイルしてくれる。デフォルトは0。
jsファイルのいちばん頭でintlets数、outlets数と同じく設定するようにしよう。
Atomの設定メモ

|プラグイン名|内容|
-----|-----
[advanced-open-file](https://atom.io/packages/advanced-open-file) | `cmd` + `opt` + `n` でパスを指定してファイルを新規作成できる。あと、パスを指定してファイルを開くことができる。
[atom-ide-ui](https://atom.io/packages/atom-ide-ui) | Facebook共同開発の統合開発環境パッケージ。これだけだと意味がなくて、言語パッケージが必要。
[autocomplete-modules](https://atom.io/packages/autocomplete-modules) | require/importモジュールを補完してくれる。
[autocomplete-paths](https://atom.io/packages/autocomplete-paths) | パスのコードヒント。
[busy-signal](https://atom.io/packages/busy-signal)|atom-ide-uiに依存。
[chary-tree-view](https://atom.io/packages/chary-tree-view)|ダブルクリックしないとサイドバーからファイルを開かないようにする。
[emmet](https://atom.io/packages/emmet)|いわずもがな。
[file-icons](https://atom.io/packages/file-icons)|サイドバーのiconをグラフィカルに。
[flow-ide](https://atom.io/packages/flow-ide)|FlowTypeを使ったプロジェクトで利用できる。atom-ide-ui依存。
[git-history](https://atom.io/packages/git-history)|ファイル履歴を追う。
[git-log](https://atom.io/packages/git-log)|gitログをグラフィカルに。
[git-plus](https://atom.io/packages/git-plus)|atomでgitコマンドを使う。
[gitignore-snippets](https://atom.io/packages/gitignore-snippets)|gitignoreを作る。
[highlight-selected](https://atom.io/packages/highlight-selected)|選択行をハイライト
[hyperclick](https://atom.io/packages/hyperclick)|ファイルジャンプ
[ide-typescript](https://atom.io/packages/ide-typescript)|typescript用IDEパッケージ
[intentions](https://atom.io/packages/intentions)|atom-ide-ui依存
[jumpy](https://atom.io/packages/jumpy)|shift+return でジャンプする箇所を表示
[language-babel](https://atom.io/packages/language-babel)|jsxのコードシンタックス
[linter-eslint](https://atom.io/packages/linter-eslint)|eslintプラグイン
[linter-flow](https://atom.io/packages/linter-flow)|flowTypeプラグイン
[linter-ui-default](https://atom.io/packages/linter-ui-default)|linterのUIパッケージ
[merge-conflicts](https://atom.io/packages/merge-conflicts)|マージツールとしてAtomを使える
[pigments](https://atom.io/packages/pigments)|カラーコードを視覚化
[prettier-atom](https://atom.io/packages/prettier-atom)|prettier
[project-manager](https://atom.io/packages/project-manager)|プロジェクト管理
[show-ideographic-space](https://atom.io/packages/project-manager)|全角スペースを表示
[sort-lines](https://atom.io/packages/sort-lines)|選択行をソート
[tool-bar](https://atom.io/packages/tool-bar)|拡張ツールバー機能を追加
[linter](https://atom.io/packages/linter)|linterプラグインのベース
[open-terminal-here](https://atom.io/packages/open-terminal-here)| cmd + ctrl + t でターミナル.app(iterm2)を開く。
[tablr](https://atom.io/packages/tablr)|CSVを開く用
[todo-show](https://atom.io/packages/todo-show)| Todoコメントを抽出してくれる
[docblockr](https://atom.io/packages/docblockr)| 複数行コメントをサクサク書ける
[clipboard-plus](https://atom.io/packages/clipboard-plus)|クリップボードの履歴管理。cmd + shift + v でトグル。
ChromeDevtoolでネットワークログをエクスポートし、Rubyで解析する

備忘録代わりに。

# やったこと
 - GoogleChrome のDevelopertoolにてNetworkログを監視
 - ログをエクスポートする
 - Rubyでhashにパースしてわかりやすいように。(selectとかで見たい項目だけgrepする)

# GoogleChromeのDeveloper toolで見れるネットワークログって？
スクリーンショットはこんな感じ。
`Command + Option + I` こんなショートカットで開けます。

[Console]や、[Elements]のところは使ったことあるけど、その他はない、という方も案外いるのでは。 

[Network]の画面はこんな感じです。
<img width="1031" alt="スクリーンショット 2018-04-24 20.57.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/172187/5496aad4-66ce-403a-1f2a-91dd5bbe4c27.png">

単純にQiitaのページを読み込んでいるだけでこんなに通信が走っているのですね...
それぞれのリクエスト、レスポンス等はもちろんのこと、通信にかかった時間もいい感じにビジュアライズされて良いですね。

読み込みが遅い時に、なにがボトルネックになってるのか一目瞭然、という感じです。

# DevToolで見れるログの問題点
***Grep力が弱い***
自社サービスとかであれば、Webサーバーとかアプリケーションサーバーのログを直接見れば良いのですが、
他社のサイトを「どうやってるんだろう」という好奇心でログを見たい場合は少し見づらいです。

# 私自身の問題点
***ログ解析とかのツールに慣れているわけでもない***
悲しいかな。ド素人です。
そんなにリッチなツールは使えません...

# 助けて！Ruby!(こっから本題)
大層な分析をしたいわけでもないので、愛しのRubyに頼ることにしました。

以下の手順で進めていきます。

1. ログをエクスポート
2. ログファイルを読み込む
3. JSONにパース
4. hashにパース
5. Grep

さっそくはじめましょう。

## 1. ログをエクスポート
Networkログ画面で右クリック ➝ [Save as HAR with content]をクリック。
これでダウンロードされます。
<img width="612" alt="スクリーンショット 2018-04-24 21.15.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/172187/787a6f3c-528c-473c-b1bd-c6ccf607178f.png">


## 2. ログファイルを読み込む
https://github.com/jarib/har
こちらのgemを使いました。

```shell
$ gem install har
$ pry
2.4.2 (main)> log=HAR::Archive.from_file('/path/to/har/file')
=> #<HAR::Archive:0x3a7781d00dea492a>
```

## 3. JSONにパース

```shell
2.4.2 (main)> log_json=log.to_json
=> jsonがわらわらでてくる
```

## 4. hashにパース

```shell
2.4.2 (main)> log_hash=JSON.parse log_json
```

## 5. Grep
たとえばこんな感じかな

```shell
2.4.2 (main)>  grepped_log=log_hash['key1'].select { |ele| ele.include?('keyword') }
```


# 終わりに
これで色々ログを見れそうだ〜！
【RxJava】doOnSubscribe, doFinallyで処理をちょっぴりスマートに書く

こんな書き方も出来るのか、と思ったのでメモがてら投稿
（バージョンはRxJava 2.1.9です。）

# 同じ処理が2箇所に…
MVPとかでアプリを実装していると、Presenterで下記のようなコードを書くことがあるかと思います。

```kotlin:SamplePresenter.kt

override fun onClick() {
    view.showProgress()

    sampleInteractor.getItems()
        .subscribeBy(
            onSuccess = {

                // do something

                view.hideProgress()
            },
            onError = {

                // error handling

                view.hideProgress()
            }
        ).addTo(disposable)
}
```
Viewからクリックのイベントが来たら、プログレスを表示し、何かしらの処理をし、成功した場合（`onSuccess`）or エラーが発生した場合（`onError`）それぞれでプログレスを非表示にする、という感じのよくある処理ですね。

ここで気になるのは `view.hideProgress()` という処理が2箇所にある、というところです。同じ処理があるならば、なんとか1箇所で書けないものか…

そんな時に使えるのが `doFinally` です。

# doFinally
Javadocには

> Calls the specified action after this Single signals onSuccess or onError or gets disposed by the downstream.

と記載されており、**成功時・エラー時・破棄された時（disposed）に呼ばれるよう**です。つまるところ、何かしら最後に呼びたいものがあったらここに書けばいい、ということですね。（ここは少し自信が無いポイントです :sweat:）

先程のコードに戻ると、 `view.hideProgress()` が最後に呼びたい処理ですので、 `doFinally` を使うと下記のように書くことが出来ます。

```kotlin:SamplePresenter.kt

override fun onClick() {
    view.showProgress()

    sampleInteractor.getItems()
        .doFinally {
            view.hideProgress()
        }
        .subscribeBy(
            onSuccess = {
                // do something
            },
            onError = {
                // error handling
            }
        ).addTo(disposable)
}
```

2箇所に散らばっていた`view.hideProgress()`を1箇所にまとめることが出来ました！
今回は共通して行っていた処理が`view.hideProgress()`だけでしたが、複数の処理を重複して `onSuccess` `onError` で行っていた場合は、だいぶ見通しが良くなるのではないかと思います。また、書き忘れ防止にも役立つのでは、と感じました。

さて、この段階でコードとしてはもう十分かな、と思ってしまうのですが、`view.showProgress()`だけ孤立した感じになっているので、どうせならRxの流れに沿って記述したい…！

そんな時に使えるのが `doOnSubscribe` です。

# doOnSubscribe
Javadocには
>Calls the shared consumer with the Disposable sent through the onSubscribe for each SingleObserver that subscribes to the current Single.

と記載されており、`subscribe` した時に呼ばれるみたいです。

早速 `doOnSubscribe` を使って書き直してみます。

```kotlin:SamplePresenter.kt

override fun onClick() {
    sampleInteractor.getItems()
        .doOnSubscribe {
            view.showProgress()
        }
        .doFinally {
            view.hideProgress()
        }
        .subscribeBy(
            onSuccess = {
                // do something
            },
            onError = {
                // error handling
            }
        ).addTo(disposable)
}
```

孤立した感じになっていた`view.showProgress()`が、うまいことRxの流れに沿うようになり、ちょっぴりスマートに書くことが出来のでは、と思います！ :smile:

# まとめ
 - 2箇所に散らばっていた処理を `doFinally` を使うことで1箇所にまとめることができました。
 - `doOnSubscribe`を使うことで、Rxの流れに沿って記述出来るようにもなりました。

RxJavaはまだまだ知らなかった機能・便利な機能があるはずなので、もっとスマートに書くべく勉強していきたい :muscle: 

# 参考
【RxJavaを使った通信中にProgressダイアログを出す】
https://qiita.com/boohbah/items/e8010730725c54f85a3a
漫画でわかるWord To Vec


最近業務でword-to-vecを使ったので、久しぶりにニューラルネットのモデルを調べてみました。

そんで、せっかくなので漫画にしてみました。

正確でない部分があったら教えてください！

![w2v_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/211271/c9473b0a-a478-efff-04ff-76bf2803225a.jpeg)
![w2v_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/211271/737c3f0c-ba92-75d5-456a-57cfa356413a.jpeg)
![w2v_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/211271/b135421d-c5d2-a170-6f35-47a73e6ca396.jpeg)
![w2v_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/211271/280618ff-047b-168f-a132-221d30780b0f.jpeg)
![w2v_5.jpg](https://qiita-image-store.s3.amazonaws.com/0/211271/8dff9731-0460-8c2c-0af4-2b4760e04b0c.jpeg)
![w2v_6.jpg](https://qiita-image-store.s3.amazonaws.com/0/211271/ecb7d855-982e-6bb1-6fc0-5b5020305427.jpeg)