OmniAICreator/Qiita-1.07M huggingface dataset:
シェーダーのパターンメモ

# 任意の関数y=f(x)
k = y-f(x)とすると、描きたい関数周辺つまり、y-f(x) = 0付近に関して値が0に近づくので、これをstep関数で区切ってやれば良い。正規化もしくはサイズ調整には、y軸方向はf(x)→f(x)/2と変更することや、x軸方向はx→2*xとすることで対応可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244678/30d90893-1c7e-9ee9-9e88-67b85629361d.png)

```glsl
"void main(){",
        "vec2 st = gl_FragCoord.xy*2.0/resolution.xy-1.0;",
        "float fx = abs(st.y-pow(st.x*2.0,3.0)-2.0*pow(st.x*2.0,2.0)+1.0);",
        "gl_FragColor = vec4(vec3(step(0.02,fx)),1.0);",
        "}"
```
# 任意の極座標関数

極座標関数は、r = distance(st,vec2(0,0))、theta = atan(st.y,st.x)とすることで取得した値を元にy=f(x)と同様に記述する。このときglslのatanはst.x = 0のときの例外処理を行っていないので、ここを対応する必要がある。(参考→https://qiita.com/7CIT/items/ad76cfa6771641951d31)

拡大縮小に関してはかなりめんどくさいが、基本的にrに関して縮小すれば良いと思うので、r = f(theta)と記述できるときはf(theta)→f(theta)/2とかすればいいと思う。それ以外の形状の関数はどうしよう。

また、極座標は-1〜1の範囲の座標系で描画したいので0-1の座標系を変換するための関数を用意しておくと楽かもしれない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244678/814d977c-8a16-55d7-229b-16af899c07bb.png)

```glsl
        "void main(){",
        "vec2 st = gl_FragCoord.xy*2.0/resolution.xy-1.0;",
        "float r = distance(st,vec2(0.0,0.0));",
        "float theta = atan2(st.y,st.x)+pi;",
        "float k = r-(1.0*(1.0+cos(theta))/2.0);",
        "k = 1.0-k;",
        "gl_FragColor = vec4(vec3(step(1.0,k)),1.0);",
        "}"
```

# 二次元シェーダを升目上に増やす。
0-1座標系に対して、それを何倍かしfractを使って小数以下を取ることで座標系を複製する。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244678/0afe1e17-43f3-b82c-04eb-fc6a5e1e9ea0.png)


```glsl
void main(){
vec2 st = gl_FragCoord.xy/resolution.xy;
st = st*2.0-1.0;
st = fract(st);
st = to_cent(st);
float r = distance(st,vec2(0.0,0.0));
float theta = atan2(st.y,st.x)+pi;
gl_FragColor = vec4(vec3(distance(st,vec2(0.0,0.0))),1.0);
}
```
DNSについて


![image.png](https://qiita-image-store.s3.amazonaws.com/0/257568/e50ae24e-5954-bcfb-0e3d-e1187ee3f996.png)

こちらの本を読んでまとめ

## DNSとは
Domain Name System

URLのこと
IPアドレスをローマ字とピリオドを使った名前に変換する仕組み

## 存在理由
IPアドレスは数字の列で表さられるが、人間にとってはとても覚えにくいため

## DNSの仕組みを使っているものの呼称
ほぼ、同じものを指していたりする呼び方

- ホスト名
- ドメイン名
- サイト名
- URL
- URI

## ホスト名(ドメイン名)とIPを対応付けているもの
### hostsファイル
ホスト名とIPアドレスの対応を定義しているデータベースファイル
自分マシン専用


## ネームサーバー
ドメイン名を管理しているサーバー

- 1つではない
- 分散データベースサーバーのような感じ
- 外部マシンとのやり取り専用
- ホスト名とIPアドレス以外の情報も管理している

## インターネットアクセスの流れ
- ブラウザにURLを入力
- リゾルバがホスト名のDNSサーバーにIPアドレスを問い合わせる
- ホスト名のDNSサーバーがルートネームサーバーに問い合わせる
- ルートネームサーバーがホスト名のDNSサーバーにIPアドレスを返す
- ホスト名のDNSサーバーがリゾルバにIPアドレスを返す
- 以降リゾルバは直接IPアドレスで直接接続する

## ドメインの階層構造
ドメインには階層構造があり、その階層構造単位でネームサーバーも存在している

- 固有ドメイン(ホスト名 or サードレベルドメイン)
- サブドメイン(必須ではない)
- トップレベルドメイン（TLD:TopLevelDomain）
  - jp(日本)
  - uk(イギリス)
  - edu(アメリカの教育機関)
  - com(アメリカの企業)など。
- セカンドレベルドメイン
  - ac(大学)
  - co(企業)
  - tokyo(東京)など。

## リゾルバ(Resolver)
DNSに問い合わせを行うホストやソフトウェア

- 使用する端末のIPを登録して使用する
- リゾルバやネームサーバーはキャッシュ機能をもっている

## 書籍情報
竹下 隆史,村山 公保,荒井 透,苅田 幸雄. マスタリングTCP/IP 入門編
https://amzn.to/2UShr5Y

## 雑感
業務中はあまり意識しないが業務前によく意識するので改めて整理
Python による簡易 Webサーバ 作成に関するメモ

### Local

html ファイルを保存したディレクトリで、

```python
#python2

$ python -m SimpleHTTPServer

#python3

$ python3 -m http.server
```

ブラウザで http://localhost:8000 を表示。

#### CGIHTTPServer


```text
~/renshu$ mkdir cgi-bin
~/renshu$ cd cgi-bin
~/renshu/cgi-bin$ nano cgi-hello.py
~/renshu/cgi-bin$ chmod 755 cgi-hello.py
~/renshu/cgi-bin$ cd ..
~/renshu$ python3 -m http.server --cgi
```

cgi-hello.py

```python
#!/usr/bin/env python3
# -*- coding:utf-8 -*-

print('Content-type: text/html; charset=UTF-8\r\n')
print('Hello, World!')
```

http://localhost:8000/cgi-bin/cgi-hello.py
matplotlib 極座標グラフについてあれこれ

環境
OS : macOS Mojave
Anaconda : python3.6.7
matplotlib : 2.2.2

#イントロ
大学の研究で極座標グラフを用いて極点図(pole figure)を書く必要があったが、なかなか情報がないので調べたことをまとめておく

#極座標グラフの基本
基本的なコードとしては

```python:ex_polar.py
import matplotlib.pyplot as plt
import numpy as np

r = 0.5
theta = 45
theta_rad = np.deg2rad(theta)

ax=plt.subplot(projection="polar")
ax.scatter(theta_rad, r, c="red", s =15)

````
基本的にはこんな感じ
matplotlibやnumpyのsin,cosなどPythonの計算の入力はラジアンが基本
上のサンプルコードでは、r=0.5, θ=45の点を打ちたいのでいったんnp.deg2rad()関数で度⇒radに変換
次に、本題のプロットは
軸設定(この表現が正しいかは?, とりあえずax=plt.subplot...のところのこと)の際に引数でprojection="polar"にすることで極座標グラフにできる
点を打ったり、線をひっぱたりするのは通常の直交座標と同じ関数、今回は散布図のプロットなのでax.scatter
このとき、引数に注意する。口ではr-θなどというが、引数の順番はθ-r
残りのオプション(色や、プロットサイズなど)は通常の直交座標と同じ

と、ここまでは公式のページなどを見ればだいたい分かる

#軸のカスタム
ここからは軸のカスタム設定について

```python:ex.py
ax.set_rlim([0, 1])
ax.set_rticks([0, 1])
ax.set_yticklabels([])
tickpos = np.linspace(0, 2 * np.pi, 4, endpoint=False)
plt.xticks(tickpos, ["100", "010", "-100", "0-10"])
```
カスタム部分だけ取り出したのが上のコード
これは今回、僕が使っている部分だけなので他にもθの表示範囲などがあるので興味があったら調べてみてください
ぱっと見てrとx,yが混在しているのは試行錯誤した結果です。(もっといい方法があったら教えてください)
set_rticksは軸の目盛りの間隔です。
ただ今回は、ラベルはひょうじしたくないのでax.set_yticklabels([])で表示なしに(おそらくyは2個目の引数であるrに対応していると思われます。)
set_rlimは完全にrの表示範囲を指定するときに使います。今回はax.set_rlim([0, 1])としているのでr=0からr=1までがグラフで表示される。
最後の二行は、θ(xに対応)を4分割しそれぞれ軸の目盛りを設定している
これはplt.で始まっているがax.set_rlim([0, 1])とax.set_rticks([0, 1])のθ版を合体させたものだと考えられる。
いろいろ調べながらやったのでax.やplt.が混在する形になってしまったがとりあえずこれを使ってうまくやっている。

もし、みなさんの参考になれば幸いです。
ご意見あればよろしくお願いします。
ASKA3D × LookingGlass のためのハック（HoloPlay SDK-1.0.0 対応）

#概要
世の中には空中に結像する ASKA3Dプレートと3Dの映像を表示する LookingGlass がある。
これらを組合せると3Dの映像を空中に浮かばせられる。

ただ組み合わせるだけでは像が反転するので、少し改造が必要なのは
[既に記事にした通り](https://qiita.com/Limg/items/9d29bd44ae5dcda2d422)。
もしくは、[インスペクターから変更してもできた](https://qiita.com/koukiwf/items/3d2db86846944af857b9)。

ところが、[HoloPlaySDK-1.0.0.unitypackage](https://lookingglassfactory.com/downloads/holoplay-sdk-looking-glass/) からは一新されて、ハックするCapture.csも無ければ、反転に使う項目もQuiltのconfigから消えている。

というわけで、再びハックしてみた。
もちろん「インスペクターからいじれる」のが正道だが、
ぱっと見該当項目が無さそうなのと、ハックする方が手軽すぎて性に合うかもしれない。

#ハック
## ハック対象ファイル
今回は Holoplay.cs 本体を直にハックする。
Project の Assets からのパスは 
```Assets/Holoplay/Scripts/Holoplay.cs```

```namespace LookingGlass```の```class Holoplay```の```void LateUpdate () ```の中、<br>```for (int i = 0; i < quiltSettings.numViews; i++)```で45枚の写真を撮っている。
今回はこの中を書き換える。

### 前後反転
```diff
    float currentViewLerp = 0f; // if numviews is 1, take center view
    if (quiltSettings.numViews > 1)
        currentViewLerp = (float)i / (quiltSettings.numViews - 1) - 0.5f;
+   currentViewLerp = -currentViewLerp;
```

要は前回同様、```i```を```quiltSettings.numViews - 1 - i```に差し替えれば良い。
$ \frac{n - 1 - i}{n - 1} - \frac12 = 1 - \frac{i}{n - 1} - \frac12 = \frac12 - \frac{i}{n - 1} = -\left( \frac{i}{n - 1} - \frac12 \right) $の関係にあるため、符号反転で済む。

### 上下・左右反転（2019/14/15追記）
```diff
+   viewMatrix.m00 = -viewMatrix.m00;
+   viewMatrix.m11 = -viewMatrix.m11;
+   viewMatrix.m03 = -viewMatrix.m03;
+   viewMatrix.m13 = -viewMatrix.m13;
    viewMatrix.m03 += currentViewLerp * viewConeSweep;
```

素直に`viewMaterix`のx成分とy成分を軸反転させただけ。
1軸だけ反転した場合は空間の裏表も反転してしまうが、
2軸反転させると空間に対する反転効果が打ち消して気にせずに済むようになる。

`currentViewLerp * viewConeSweep`はレンチキュラーレンズに応じた視点移動を表す項である。
そのため、符号はレンチキュラーレンズの構造だけで決まり、軸の反転に影響されない。
したがって、`viewMatrix.m03 = -viewMatrix.m03`をその前に挿入する必要がある。

### インスペクタ追加（2019/14/15追記）
インスペクタに追加するには、然るべきところでフラッグ宣言して、
上記ハックをスイッチさせれば良い。

```diff
    // quilt
    public Quilt.Preset quiltPreset = Quilt.Preset.Automatic;
    ...
    [System.NonSerialized] public Material lightfieldMat;
+   public bool reverse = false;
+   public bool rotate = false;
    
    // gizmo
    public Color frustumColor = new Color32(0, 255, 0, 255);
```

インスペクタには、HoloplayEditor.cs でスクリプトを使って追加していて、
追加対象となる変数を宣言順でスキャンし、特定の名前の変数でセクションを区切っている。
例えば、quiltというセクションは`quiltPreset`から`frustumColor`の１つ前までの項目に設定している。
また、`frustumColor`は次のgizmoというセクションの先頭項目になっている。

そのため、セクションquiltに追記する場合は、`frustumColor`の宣言の前に入れると期待通りになる。

```diff
    if (quiltSettings.numViews > 1)
        currentViewLerp = (float)i / (quiltSettings.numViews - 1) - 0.5f;
+   if (reverse)
+       currentViewLerp = -currentViewLerp;
+       
+   if (rotate) {
+       viewMatrix.m00 = -viewMatrix.m00;
+       viewMatrix.m11 = -viewMatrix.m11;
+       viewMatrix.m03 = -viewMatrix.m03;
+       viewMatrix.m13 = -viewMatrix.m13;
+   }
    viewMatrix.m03 += currentViewLerp * viewConeSweep;
    projMatrix.m02 += currentViewLerp * viewConeSweep * projModifier;
```

これでコードからもインスペクタからも切り替えれるようになる。

# まとめ
ASKA3D × LookingGlass は良いぞ！
IBM Cloud仮想サーバーを触り始めた所感＆備忘録

#クラウド再入門
###  背景
自分が真剣にクラウドと向き合ったのはAWS。ITアーキテクトとしてよく研究したし実際に操作した時間も長く、技術認定もSA Professionalまでは取った。今月から業務としてIBM Cloud、特にIaaS部分を触る機会というか、それが必要な仕事となり触ってみた印象をメモしておく。
楽だと思えるところと、戸惑うところがあったので触ったのは今の所、仮想サーバーだけ。


### 楽な所1. -- ネットワーク  
- アドレス体系がGiven。もちろん払い出されるのはアカウント固有でプライベートなアドレス空間。他のアカウントからはアクセスできない。デフォルトのままでシンプルかつ大抵の用途に必要十分。         
- Web , DBなど３層構造があらかじめ想定されている。（多層もルーティングできるらしい）           
- 踏み台サーバーいらず。管理用VPNによる接続が標準装備。      
- セキュリティーグループは複数設定できる
- IBM Cloudで提供されるストレージサービスなどは最初からPrivateで接続。     
- VPC相当の機能がリリースされるらしいので気に入らなければそちらに行けそう。しかし、まだクローズドプレビューだが。     

### 楽なところ2. -- 仮想サーバー     
- 安め（以前は時間課金でもオフ時も課金という仕様だったらしいが、今は時間課金。5円程度から）　　  　
- シンプル
- インスタンスの名前が階層化されて命名できる（マシン名＋ドメイン名称）　大量インスタンスになると大変かも --> 複数台同時に作成（オーダー）したら、マシン名は、自分が指定した名称＋自動採番となった。何気に便利）

### はまったところ  --  Javaプラグインを必要とするWebツール
- アプレットを使っているところは、ChromeやFirefox、Safariなどで動作しない。セキュリティー関連の問題で各ブラウザがJavaプラグインの搭載から撤退したため。(この影響を受けているのが、WebブラウザによるVPN、KVMコンソール）　もうすぐ代替テクノロジーで同機能が出てくるのかもしれない。

### はまったところ  -- VPN
- Mac用のVPN クライアントソフトウエアのダウンロードが日本のApp Storeにない。--> Array Networks社のページからMac OS MotionPro client をダウンロード。ArrayMotionProSetup_Mac_v1.1.9.dmg　
https://support.arraynetworks.net/prx/001/http/supportportal.arraynetworks.net/downloads/downloads.html
- VPN用のユーザーはIBM IDではなく、専用のユーザーID。（SoftLayerのカスタマーポータルで確認できる）
- VPN接続できるセグメントは制御されている。（カスタマーポータルのVPNページのSSLというところで、VLANごとにオン、オフできる。オートというモードなら全部オン？ ここを変えたらVPN接続を繋ぎ直す必要あり。）

### はまったところ  -- Name Server
-  WordPressをダウンロードしようとして名前解決できなかった。セキュリティーグループを設定したのだが、 allow_outboud をオフにしていたためらしい。     
-  名前解決のためにDNS設定も触ってみたが、これが効いてわけでは模様 ( Ubuntu.  /etc/systemd/resolved.confを編集し、systemctl restart systemd-resolved ) 

### 気になるところ   
-  覚悟はしていたものの、Web上のドキュメントはAWSに比べて少ない。手探り状態が最初は続いたが一日程度触り、大体の操作できるようになった      
- 今回作業は全てオーナーとなる ibm id で実行したけど、プロジェクトメンバーで共有するやり方を調べていくのはNext Action。
PhpStorm で "Replace in path" する時にタブ移動して "Replace All" にフォーカスする方法

PhpStorm で "Replace in path" する時にタブ移動して "Replace All" にフォーカスする方法がずっとわからなかったのですが、ひょんなことからわかったのでメモ。

## 結論

`shift + tab` で移動する。

## 何が問題だったのか

Project Tree ペインから、 `cmd + shift + r` で ReplaceInPath を開き、 tab を押すと以下のように、検索文字入力欄→置き換え文字入力欄→ディレクトリ選択欄のようにフォーカスが移動します。

![__replace_in_path.gif](https://qiita-image-store.s3.amazonaws.com/0/3243/9641a61d-0cdc-b1c5-c2ad-cb7d2dbd81c7.gif)

なんとかして、ダイアログ下部の "Replace All" などにフォーカスを移したかった。。。

## どうなったか

試しに、検索文字入力欄で `shift + tab` してみた…(ﾟ∀ﾟ)!

![__replace_in_path2.gif](https://qiita-image-store.s3.amazonaws.com/0/3243/69527688-0962-b19b-4d79-e9d5762b50ad.gif)

"Replace" にフォーカス移った！

そのまま更に `shift + tab` で "Replace All" まで行ける！

これです！これが実現したかったんです！

ちなみに、検索文字入力欄にフォーカスがある状態から `tab` で移動だと、前述3つを行き来します。

なので、置き換え文字入力欄やディレクトリ選択欄にフォーカスがある状態の場合、 `tab` なり `shift + tab` なりで、検索文字入力欄にフォーカスを移動してから `shift + tab` を行う必要があるようです。
VSCode を WSL (Ubuntu 18.04) で動かすメモ

私は[X410](https://token2shell.com/x410/) を持っているが、Macを忘れたので、Windowsでhelmチャートのコードを書く必要があったので、WSLを使うことにした。絶対的にVSCode が欲しいのでそのセットアップメモ

# X のインストール

これだけでよいみたい

```bash
sudo apt install x11-apps
```

xeyes などで動作確認する

# ディスプレイの設定

X410 を起動したのちに、ディスプレイ設定。面倒なので、`.bashrc` にぶちこむ

```bash
echo "export DISPLAY=127.0.0.1:0.0" >> ~/.bashrc
```

# Firefox

```bash
sudo apt install firefox
```

インストールは出来たがバスのエラーに遭遇。

```bash
$ firefox

(firefox:3787): LIBDBUSMENU-GLIB-WARNING **: 12:55:13.xxx: Unable to get session bus: Failed to execute child process “dbus-launch” (No such file or directory)
```

* [Issues with dbus-launch and x11 forwarding and /etc/machine-id? #2016](https://github.com/Microsoft/WSL/issues/2016)
* [](https://askubuntu.com/questions/1005623/libdbusmenu-glib-warning-unable-to-get-session-bus-failed-to-execute-child)

で解決。

```bash
$ dbus-uuidgen
```

[dbus-launch](https://linux.die.net/man/1/dbus-launch)
[dbus-uuidgen](https://linux.die.net/man/1/dbus-uuidgen)

あとはオフィシャルの手順に従う

# VSCode

[Visual Studio Code on Linux](https://code.visualstudio.com/docs/setup/linux)

debパッケージをダウンロードしたら次の通り

```bash
$ sudo apt install ./code_1.33.0-1554390824_amd64.deb
$ curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
$ sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
$ sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
$ sudo apt-get install apt-transport-https
$ sudo apt-get update
$ sudo apt-get install code
$ code .
```
![linux.PNG](https://qiita-image-store.s3.amazonaws.com/0/3470/ec04fd63-cf69-9233-3264-4b47189ae72a.png)

# TODO 

firefox works. However, error still remains. having trouble with restoring the state. 

```bash
$ firefox
Exiting due to channel error.

###!!! [Parent][MessageChannel] Error: (msgtype=0x350046,name=PContent::Msg_LoadProcessScript) Channel error: cannot send/recv


###!!! [Parent][MessageChannel] Error: (msgtype=0x35002E,name=PContent::Msg_UpdateSharedData) Channel error: cannot send/recv

[Parent 6674, Main Thread] WARNING: FileDescriptorSet destroyed with unconsumed descriptors: file /build/firefox-QFhmDU/firefox-66.0.2+build1/ipc/chromium/src/chrome/common/file_descriptor_set_posix.cc, line 23

###!!! [Parent][MessageChannel] Error: (msgtype=0x350020,name=PContent::Msg_PreferenceUpdate) Channel error: cannot send/recv


###!!! [Parent][MessageChannel] Error: (msgtype=0x350020,name=PContent::Msg_PreferenceUpdate) Channel error: cannot send/recv


###!!! [Parent][MessageChannel] Error: (msgtype=0x35002E,name=PContent::Msg_UpdateSharedData) Channel error: cannot send/recv
```
LINEをやめた僕がLINE botで再降臨した話

## 前書き
色々な理由があって、去年僕はLINEをやめました。
普段の仕事はFBやSlackで連絡を取っているので特に困ったことはなかったのですが、この4月に大学院に入学した僕は、久しぶりにLINEの洗礼に遭いました。
同期のLINEグループが誕生したのです。

**『『『ソウダ、ダイガクセイ、LINEデレンラク、トリガチ』』』**

どうしてもLINEを作りたくなかった反面、同期のLINEグループで流れる情報が入ってこないと、***灰色の2年間***を過ごすことは確実。

## LINE WORKSじゃダメなの？

*結論：ダメでした。*

bot作り始めた時に気づいたのですが、[LINE WORKS](https://line.worksmobile.com/jp/)っていうのもあるんですね。知らなかった。

「プライベートも確保できそうだし、これならbotなんか作らなくていいじゃん！！」
と思ったのですが、

[ドキュメント（以下抜粋）](https://line.worksmobile.com/jp/guide/talk/line-external-user-talk/)を読むと、
<img width="593" alt="Screenshot 2019-04-10 04.35.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/148589/95ff0384-5a70-0070-7bc3-13906394c41d.png">


とある通り、一般のLINEユーザーの作ったグループに入ることは仕様上、できませんでした。
残念。 **しょうがない、bot作るか。**

## ゴール

- LINEアカウントは作りたくない
- 連絡を読めるだけでよい（投稿はできなくていい）
- とりあえず、テキストだけでよい（画像とかは後々対応）
- 同期のLINEグループに誰かが投稿したら、`{{投稿者}} : {{内容}}` という形式で、大学から配布されたメールアドレスに送られる

## 作戦
- botにwebhookがきたらIFTTTにその内容をwebhookで送る
- IFTTTでwebhookを受けたら指定したアドレスにメールで送るようにする

## 実装（抜粋）

```javascript:app.js
const line = require('@line/bot-sdk');
const app = require('express')();
const { sendEmail } = require('./utils');
const { channelAccessToken, channelSecret } = process.env;
const config = {
  channelAccessToken,
  channelSecret
};

console.log("App started");
app.post('/webhook', line.middleware(config), async (req, res) => {
  await Promise
    .all(req.body.events.map(handleEvent))
    .then(() => {
      console.log('writing http header');
      res.writeHead(200);
      res.end();
      console.log('sent http response');
    })
    .catch(console.error)
});

const client = new line.Client(config);
function handleEvent(event) {
  return new Promise((resolve, reject) => {
    if (event.type !== 'message' || event.message.type !== 'text') {
      resolve(null);
    }
    console.log("Message received: ", event.message.text);

    console.log('event', event);
    client.getProfile(event.source.userId)
      .then(user => {
        console.log('user', user);
        const userName = user.displayName;
        return sendEmail(userName, event.message.text)
      })
      .then(resolve)
      .catch(reject);
  });
}

const PORT = process.env.PORT || 3000;
app.listen(PORT);
```

`sendEmail`関数でIFTTTにwebhookを投げています。
シンプル！

herokuにデプロイして、環境変数でアクセストークンを渡して、LINE botのコンソールでデプロイしたherokuアプリのurlをwebhookに設定すればOK!

## 結果

**そもそも、LINEのアカウントを作らずにLINE botを作ることが無理でした**
しかたがないので、開発のためにLINEアカウントを作り、誰からも追加できない設定にしました。

*LINEアカウントを持っているのに、LINEで連絡をしたくない*
というねじれが発生しましたが、無事に実装はできました。
**うん。いいんです。これで（きっと）**


ともかく、

<img width="375" alt="IMG_2107.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/148589/937d8e5a-0649-b693-fdc7-39a7ade79bfd.png">

こんな感じでbotにメッセージを送ると、

<img width="395" alt="Screenshot 2019-04-10 04.56.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/148589/56784442-e007-1802-2250-d2fd4172fefd.png">

無事にメールで受け取れるようになりました。
タイムラグは30秒ぐらいなので、全然、許容範囲。

これで、「お前の席ねえから！」を免れることができました。



**楽しいキャンパスライフを送りたいですね！🌸**
Railsの複合キーインデックス (Multiple Key Index)

Railsチュートリアル(第4版)の第13章[13.3](https://railstutorial.jp/chapters/user_microposts?version=5.1#code-micropost_migration)で、複合キーインデックスの詳しい解説にスタックオーバーフローの[What is a multiple key index?](https://stackoverflow.com/questions/14844780/what-is-a-multiple-key-index)を参照していたので、それを日本語訳しました。

# 複合キーインデックスとは？

インデックス自体は、クエリで検索するときにレコード(row)を絞り込むことができることに利点があります。

複合インデックスは、クエリが以下の例のような複数のカラム(column)を条件として含む場合に役立ちます。

例：

```sql

SELECT * FROM Mytable WHERE user_id = 123 AND created_at> '2013-02-01'
```

複合インデックスは、`user_id = 123`に関連付けられているレコードのサブセットに絞り込み、さらにそのサブセット内で、`created_at`の値で定められた範囲へとさらに絞り込みます。

インデックスに2つ目のカラムがなければ、データベースは`user_id = 123`である全てのレコードをメモリにロードしてから、基準を満たしているかどうかを判断します。

# 感想
つまりはクエリの検索効率向上のためということでしょうか。
VisualStudio2019Communityを試す

#ダウンロード&インストール
ここからダウンロード: https://visualstudio.microsoft.com/ja/?rr=https%3A%2F%2Fwww.microsoft.com%2Fja-jp%2F
画像の部分をクリックで落とせるはずです。![2.png](https://qiita-image-store.s3.amazonaws.com/0/349992/4f65187d-c501-d01e-e804-81f0597d92fa.png)
インストーラーがダウンロードされたら、手順に沿って自分の使いたい言語などを選択してインストールすればいいと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/349992/63542abf-4ae8-54cc-5f3e-b4d41cb697c2.png)
(スクリーンショットを忘れていたので、代わりに変更の部分を載せておきます。)
後は、インストールが終わるまでお茶やお菓子を食べるなどをして時間を潰してはいかがでしょうか？
#起動
起動すると、画像のようなスプラッシュスクリーンが表示されます。
2017と比較すると結構かっこいいですね。
![0.png](https://qiita-image-store.s3.amazonaws.com/0/349992/627ba59f-1ee3-e7f7-ecf0-18f64ef09950.png)
これが起動直後の初期画面です。
2017とは違い、スタートページ(?)が無く、すっきりとしています。
GitHubなどからリポジトリをクローン出来るようです。便利です。
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/349992/b37ac641-9521-3a23-ad9c-3fee17045cae.png)
プロジェクトを作成してみました。
デザイン画面です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/349992/eb10b704-e299-f16c-0808-6d79d302dafd.png)
LiveShareと言う、共同編集機能(?)がありますが、自分は孤独を貫いてきた人間なので、必要は無いでしょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/349992/685eca5d-c85b-d23c-2a85-955f33cfa01a.png)

少しだけUIは変わりましたが、特に新しいことを覚える事はしなくても良さそうです。


試しに作ってみました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/349992/ab83b0ba-c799-669f-9a68-3dbeb7b164dc.png)
一応、載せておきます。

```C#:MainWindow.xaml.cs
using System.Windows;

namespace VS2019TEST
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            text.Text = "押された!";
        }
    }
}
```

```XML:MainWindow.xaml
<Window x:Class="VS2019TEST.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:VS2019TEST"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="289*"/>
            <RowDefinition Height="130*"/>
        </Grid.RowDefinitions>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="296,244,0,0" VerticalAlignment="Top" Width="196" Height="81" Grid.RowSpan="2" Click="Button_Click"/>
        <TextBlock x:Name="text" HorizontalAlignment="Left" Margin="10,61,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="104" Width="772" FontSize="72" TextAlignment="Center" Text="↓押せ！↓"/>

    </Grid>
</Window>
```
#使ってみて
特に凄いと思うような事は今のところありませんでした。
もう少し色々と使ってみてからわかる機能があるのだと思われます。
LiveShareについては、友達が出来てから試すことにしますw(多分無理)
「IntelliCodeがすごい!」とMicrosoftは宣伝していますが、今のところ2017と変わった様な部分はありませんでした。
#追記
Microsoftの記事です。色々な機能が紹介されています。
https://docs.microsoft.com/ja-jp/visualstudio/ide/whats-new-visual-studio-2019?view=vs-2019
PythonistaのCustom Attributeでハマったところ

# CustomAttributeにアクセスしたらエラー
PythonistaでUIとしてtextfieldを追加し、それに付与したCustomAttributeにアクセスしたところ、以下のようなエラーメッセージが表示されました。

```text:CustomAttribute(NG)
{‘attr‘:‘value‘}
```

```python:action.py
def action(sender):
   print(sender.attr)
```

```bash:console
Warning: could not load custom attributes of view "CustomAttributeの名前": invalid character in identifier
```

# 原因
Pythonのコードを含めて、外部キーボードからの入力をしていたのですが、Pythonのエディタ上では問題ない`'(シングルクォーテーション)`の入力が、CustomAttributeを入力するinspector上だと`‘(引用符?)`となってしまうのが原因でした。
とりあえず、外部キーボードからではなく、スクリーンキーボードから入力することにより対処しました。

```text:CustomAttribute(OK)
{'attr':'value'}
```

# 根本的な問題
iOSの`スマート句読点`という機能のせいでした。
設定から変更したらば、外部キーボードからでも正常に入力できるようになりました。

# 参考
https://forum.omz-software.com/topic/2663/syntax-inside-the-custom-attributes-section/11
https://getnavi.jp/business/247123/
基本情報技術者過去問題 平成30年春期 午後問4 について

参考サイト:
https://www.fe-siken.com/kakomon/30_haru/pm04.html

#はじめに
基本情報技術者試験の午後の部の問題文ってとんでもなく長いから、一部抜粋という形をとらせてもらうよ。
完全版については下記をご参照ください。
>https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2018h30_1/2018h30h_fe_pm_qs.pdf
問4 設問1

#躓いた問題と、躓く要因となった場所(<font color="red">赤文字</font>で示す)
フロントサーバにおいては，1要求当たり，計算処理量は0.1秒，ネットワーク処理量は0.07秒である。
　クライアントからの要求が非常に多いとき，フロントサーバのコストを最も低く抑えることができる仮想マシンのタイプは (a) である。<font color="red">ここで，各仮想マシンの計算処理能力とネットワーク処理能力の平均の使用率は，それぞれ50%以下に抑えることとする</font>。

#<a href="https://www.fe-siken.com/">基本情報技術者過去問ドットコム</a>に掲載されている解説を読んでのファーストインプレッション
僕「問題文の<font color="red">赤文字部分</font>って何だったんだ……？」

読んでみればわかりますが、使用率50%云々が特に意識されているような感じはない。

#推測
ここで使用率50%云々は、問題を解く上で必要になってくる情報(フロントサーバにおいては，1要求当たり，計算処理量は0.1秒，ネットワーク処理量は0.07秒)にかかっていると思われる(「<font color="red">ここで、</font>」って言ってるしね)。
計算処理かネットワーク処理のどちらかにウェイトを置くことなく、大体均等になるように使用している環境での数値ですよってことを言いたかったのかな。

#まとめ
あまり釈然とはしていないけれど、<font color="red">赤文字部分</font>は意識しなくてよい。
次回似たような問題が出た時のために、自分用の備忘録として残しておく。
express+pugでサーバーサイドのオブジェクトの値をクライアント側に渡す方法

express+pugで転職活動用のアプリを作っていて、サーバーサイドのオブジェクトの値をクライアント側のJSに渡すことに結構ハマった。Qiitaで調べてみたら、express+ejsの解決方法は載っていたけど、pugのやり方は分からなかったので、簡単にメモしとく。

環境: express+pug

```javascript:editmap.js

const express = require('express');
const router = express.Router();
let connection = require('../mysqlConnection');

router.get('/:map_id', function(req, res, next) {
  let mapId = req.params.map_id;
  let query = 'SELECT * FROM maps WHERE map_id =' + mapId;
  connection.query(query, function(err, map) {
    res.render('editmap', {
      map_id: map[0].map_id,
      map_name: map[0].map_name,
      center_latitude: map[0].latitude,
      center_longitude: map[0].longitude,
      
    });
    console.log(map);
  });
});

module.exports = router;
```
データベースから取得した **map_id, center_laitutde, center_longitude** の値をクライアント側に渡したい。


```javascript:editmap.pug
script(type='text/javascript').
  
let mapId = !{map_id};
let centerLatitude = !{center_latitude};
let centerLongitude = !{center_latitude};
```

オブジェクトキーを**!{}**で囲めば変数に代入できた。

```javascript:editmap.pug
extends layout

block content

  h2 マーカー編集ページ
  p= map_id
  p= center_latitude
```
ちなみに、pugを使ってる人なら分かるはずだが、htmlに値を渡したい場合は、タグ= オブジェクトキー(p= map_id)で簡単に渡せる。

##参考URL
* [コードログ](https://codeday.me/jp/qa/20181208/63254.html)
* [【未解決部あり】express+ejsで配列をクライアント側のjsに渡す方法](https://qiita.com/bonkun/items/74b77e6de2eb8c87277f)
「サーバの負荷」とは

## 「サーバの負荷」の要因
複数の要素がある
1. CPU利用率
2. I/O
3. メモリ
4. その他諸々

## サーバのボトルネックの切り分け
### Case 1. ロードアベレージが高い
この場合、実行したい処理が実行待ちのプロセスが多いことを意味する。
そのためスループットが低下する。

```bash:Terminal
$ top
-- load averageを確認
$ vmstat 1
-- r: 実行中および実行待ちのプロセス数
-- b: I/O待ちのプロセス数
-- swpd: メモリのスワップ使用量
-- bi: ブロック型デバイス（主にディスク）から読み込みブロック数(IN)
-- bo: ブロック型デバイス（主にディスク）への書き込みブロック数(OUT)
-- us: CPU使用率（カーネル以外）
-- wa: CPU使用のうちI/Oウェイトにかかった割合
```
**ロードアベレージ = r: 実行中および実行待ちのプロセス数 + b: I/O待ちのプロセス数**です。


### Case 2. ロードアベレージが低い
- ネットワーク周り（TCPコネクション数）
    cf. [システムの負荷の原因を切り分ける方法 - Qiita](https://qiita.com/k0kubun/items/8ab1dfa7c0359d8e618d)


## Q and A
Q. `php test.php`すると r: 0, b: 1にならないのはなぜ？
r: 1, b: 1になる想定。

```php:test.php
<?php
$file = 'test.txt';
while (true) {
  $current = file_get_contents($file);
  $current .= "test\n";
  file_put_contents($file, $current);
}
```
A. 1実行プログラム1プロセスだから。プロセスの状態は以下の通り遷移する。
![proc_stat.gif](http://ash.jp/linux/unyo/proc_stat.gif)
引用元. [LinuxのI/OやCPUの負荷とロードアベレージの関係を詳しく見てみる - Qiita](https://qiita.com/kunihirotanaka/items/21194f77713aa0663e3b)

Q. サーバの負荷を見るときは、ロードアベレージではなくCPU利用率ではだめなの？
A. だめです。
サーバの負荷の要因にはCPU利用率以外に**I/O待ちのプロセス数**(その他諸々)がある。
そのためCPU利用率が0%でもサーバに負荷がかかる可能性がある。


## 参考文献
- [LinuxのI/OやCPUの負荷とロードアベレージの関係を詳しく見てみる - Qiita](https://qiita.com/kunihirotanaka/items/21194f77713aa0663e3b)
  - 良い記事
- [インフラのボトルネックについて知る - ぺい](https://tikasan.hatenablog.com/entry/2018/06/05/082728)
  - ボトルネックの種類と対策が書いてある
- [システムの負荷の原因を切り分ける方法 - Qiita](https://qiita.com/k0kubun/items/8ab1dfa7c0359d8e618d)
- [第6話「リソースをチェックしよう！ - Linuxサーバ運用マニュアル](http://ash.jp/linux/unyo/06.htm)
- [load averageを見てシステムの負荷を確認する - Qiita](https://qiita.com/k0kubun/items/8065f5cf2da7605c8043)
- [サーバ負荷の原因を探る方法 \| 株式会社ビヨンド](https://beyondjapan.com/blog/2016/02/where-is-server-stress)
- [「非エンジニア」でもできるサーバ過負荷対策。ロードアベレージ、CPU使用率、I/Oディスク利用状況、メモリ使用量の調査方法 \| Accel Brain; Media](https://media.accel-brain.com/server-overload-pattern/)
- [9. I/Oボトルネックの計測](https://www.oracle.com/technetwork/jp/ats-tech/tech/useful-class-9-520784-ja.html)
WordpressのCloudFront経由のアクセスをELBとS3に振り分ける

CloudFrontとS3とWordpressの設定についてです。
CloudFront経由のアクセスをパスでs3とELBで振り分けるようにした際の備忘録です。

## AWS
### S3
#### バケット作成
作成したパブリックアクセス設定を
「このバケットのパブリックアクセスコントロールリスト (ACL) を管理する」->
「新規のパブリック ACL と、パブリックオブジェクトのアップロードをブロックする (推奨）」はFalseにする
*これを設定しないとWordpressのメディアアップロードから画像をアップロードできませんでした。

### IAMロール作成
EC2からS3への権限を付与する
IAMポリシーを作成

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:CreateBucket",
                "s3:DeleteObject",
                "s3:Put*",
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": [
                "arn:aws:s3:::{Bucket Name}",
                "arn:aws:s3:::{Bucket Name}/*"
            ]
        }
    ]
}
```
IAMロールを作成
該当のEC2インスタンスにIAMロールを付与

### CloudFront
#### Originsの作成
「Create Origin」から作成する
##### Origin Domain Name
先ほど作成したS3バケットを選択する
##### Restrict Bucket Access
「Yes」を選択するとOrigin Access IdentityとGrant Read Permissions on Bucketの設定項目が出現する
###### Origin Access Identity
「Create a New Identity」を選択
「Comment」は自動作成されたもの
###### Grant Read Permissions on Bucket
「Yes, Update Bucket Policy」を選択
*こちらを設定すると対象S3のバケット->アクセス権限->バケットポリシーに以下のようなものが作成される

```json
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity xxxxxxxxxxxxxx"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{Bucket Name}/*"
        }
    ]
}
```

#### Behaviorsの設定
「Create Behavior」から作成する
今回はwp-content/uploads配下の画像をs3から利用したいので、
「Path Pattern」を「/wp-content/uploads/*」 にする。

## Wordpress
### プラグイン
「WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage」を使用する
#### インストール
インストール->有効化する。
*私の環境の場合、php-gdが インストールされていなかったので、インストールする。
#### 設定
「設定」->「Offload Media」から設定する
##### Storage Provider
AmazonS3の「My server is on Amazon Web Services and I'd like to use IAM Roles」を選択
この場合wp-config.php以下を追加します。

```wp-config.php
define('AS3CF_AWS_USE_EC2_IAM_ROLE', true);
````

#### Bucket
先ほど作成したS3のバケット名を設定する

#### URL Rewriting
CloudFrontから配信する場合、Custom Domain (CNAME)にCloudFrontで設定しているCNAMEを設定する

#### Remove Files From Server
アップロードした画像をサーバ上に残さないよう変更
STS高速化とセッション

現場のSTSが立ち上げるだけで3G,
Spring Bootを実行すると4Gまで跳ね上がる。
お世辞抜きで1日のうちの半分が待ちになるので、
いい加減何とかする。

■コードアシスト
Window -> Preference -> Java -> Editor -> Content Assist
ミリ秒設定を縮める。

■メモリの手動開放
ガベージコレクションの明示的呼び出し。
Window -> Preference -> General -> Show heap status
ゴミ箱マークが下に出るので適宜ポチる。

■プラグインを削除する。


■キャッシュの無効化
thymeleafでキャッシュを残さない。
(デフォルトだとhtmlファイルを修正しても即時反映されない。htmlの癖に！)
application.ymlに以下の記述を追加する。
spring.thymeleaf.cache=false


■ホットデプロイを有効にする。
spring-boot-devtools

クラスパス上のファイルが修正されるとアプリケーションが再起動する。
thymeleafなどのテンプレートを修正しても勝手に再起動がかからない。
```xml:pom.xml
<dependencies>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-devtools</artifactId>
	</dependency>
</dependencies>
```

20.2 Automatic Restart
https://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-devtools.html

デバッグモード時にSilentExitExceptionが発生するかもしれないがそれはspringのバグらしい。
メニュー -> ウインドウ -> 設定 -> Java -> デバッグから
「キャッチされない例外で実行を中断」のチェックを外す。（暫定対応)


■開発において不要な依存関係をpomから削除する。
pom.xmlは親子関係で定義されており(マルチモジュールというらしい)、私たちの担当分は
うち一つの子プロジェクトであるため、親プロジェクトのpomから
そのほかの子プロジェクトの依存の記載を消せばよさそう。

子pomから親の参照は<parent>で，親pomから子への参照は<module>で行う。
メリットとしては親pomにある依存関係が子pomにも連携される点。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
■Sessionを使ってみる。

★１．@SessionAttributesをコントローラに付ける。★
https://terasolunaorg.github.io/guideline/public_review/ArchitectureInDetail/SessionManagement.html#sessionattributes
5.8.2.1.1. セッションに格納するオブジェクトの指定

〇対象の宣言
@Controller
@SessionAttributes(types = {CustomerDto.class })
public class CustomerSearchController {
}

〇複数回生成の回避
SessionAttributesとModelAttributeに同じ値を設定すると
複数回リクエストが来てもModelAttributeが1回しか呼ばれなくなり
無駄なインスタンス生成を行わなくなる。

〇設定処理
@SessionAttributesを付与したコントローラでModelに追加すると
セッション管理が行われる。

リダイレクトする場合はセッションへの格納ができないため、代わりに
RedirectAttributesのaddFlashAttributeで遷移先に渡す必要がある。


https://terasolunaorg.github.io/guideline/public_review/ArchitectureInDetail/SessionManagement.html#sessionattributes
複数のコントローラをまたぐ場合の注意点
@SessionAttributeアノテーション使用時の注意点

〇取得処理
5.8.2.1.3. セッションに格納されているオブジェクトの取得
セッションに格納されているオブジェクトは、Controllerの処理メソッドの引数として、受け取ることができる。
public String show(CustomerDto customerDto);


セッションから取得する際、取得元データがない場合、
例外「HttpSessionRequiredException」が発生する。

〇削除処理
SessionStatus.setCompleteを呼び出すと、
追加したセッションのオブジェクトが全削除される。
ただしそのまま画面遷移すると次画面まではModelに入っている
Session情報が表示されてしまうため、リダイレクトでModelからも空にする必要がある。

ピンポイントで削除する場合は
@SessionAttributes("scopedTarget.Bean名")
と、おそらくそれのコントローラでは、該当するBean名のデータのみが削除される。




★２．@Scope("session")を対象データ(Form, Dto etc)に付ける。★
〇対象の宣言
@Component (DI対象でスキャンしてもらうため)
@Scope("session")
public class Form(){~~~}
定義ファイルに下記定義が必要。
<aop:scoped-proxy /> 要素を指定し、scoped-proxyを有効にする。
定義しないと下記エラー
org.springframework.beans.factory.UnsatisfiedDependencyException:

〇取得処理
コントローラにDIする。
@Inject
CustormDto customDto;

〇更新処理
@Injectされたデータに更新をかけるとそれが、Model, Sessionに反映される。

〇削除処理
@SessionAttributeと同様



■いい感じのセッションについてのサンプル
5.8.4. Appendix
DoS攻撃

参考サイト:
http://urx.space/RL50
https://ejje.weblio.jp/content/denial
https://cybersecurity-jp.com/security-measures/18262

#DoS攻撃とは
Denial of Service attack。
情報セキュリティにおける可用性を侵害する攻撃手法のひとつ。
>denial
[名詞] 否定、否認、拒否、拒絶、克己

ウェブサービスを稼働しているサーバやネットワークなどのリソース（資源）に意図的に過剰な負荷をかけたり脆弱性をついたりする事でサービスを妨害する。

#概要
DoS攻撃には２種類の類型がある。
>・ウェブサービスに大量のリクエストや巨大なデータを送りつけるなどしてサービスを利用不能にする<font color="blue">フラッド攻撃</font>
・サービスの脆弱性を利用する事でサービスに例外処理をさせるなどしてサービスを利用不能にする攻撃

##攻撃の目的
サービスの可用性を侵害する事

##DDoS攻撃
Distributed Denial of Service attack。
分散型サービス妨害攻撃。
<font color="red">大量のマシンから</font>1つのサービスに、一斉にDoS攻撃を仕掛ける。
DDoS攻撃の類型は2つある。

>・協調分散型DoS攻撃
・DRDoS攻撃

###調教分散型DoS攻撃
攻撃者が大量のマシン(踏み台)を<font color="red">不正に乗っ取った上で</font>、それらのマシンから一斉にDoS攻撃をしかける

###DRDoS攻撃
Distributed Reflective Denial of Service attack。
分散反射型DoS攻撃。
1.攻撃者が<font color="red">攻撃対象のマシンになりすまして</font>大量のマシンに何らかのリクエストを一斉に送信
2.リクエストを受け取ったマシン達は攻撃対象のマシンに向かって一斉に返答を返す
3.攻撃対象のマシンには大量の返答が集中し、高負荷がかかる

#DoS攻撃・DDos攻撃されないための対策
残念ながら、DoS攻撃やDDoS攻撃から完全にサイトやサーバを守る方法は存在しないと言わざるを得ません。
ですが、適切な対処方法を取ることで、大きくリスクを低減できます。
##特定のIPアドレスからのアクセスを遮断する
###.htaccessで特定IPのアクセスを停止する
WebサイトのTOPのディレクトリに、下記のような記述を行なった.htaccessファイルをアップロードしましょう。

```
# アクセス制限する
order allow,deny
allow from all
deny from qqq01.aaa.ne.jp    # qqq01.aaa.ne.jp を拒否
deny from .aaa.co.jp         # ???.aaa.co.jp を拒否
deny from 111.222.           # 111.222.???.??? を拒否
```

こうすることで悪さをしそうなIPアドレスを遮断できます。
.htacessってなんだ？って方は、下記の投稿が参考になると思います。
https://qiita.com/gnk0096/items/7e5bd6e8dc9b04c9978e
超ざっくりいうと、Webサーバー設定ファイルのことです。

###国内向けのサイトなので、海外からのアクセスを停止する

##ネットワークトラフィックを監視システムに導入

##DDoS対策ツールの導入
下記に主なツールを紹介いたします。
###WAF
Web Application Firewall。
その名の通りWebサイト上のアプリケーションに特化したファイアウォール。

###IDS/IPS
Intrusion Detection System/Intrusion Prevention System。
<a href="https://qiita.com/philip_runner/items/ff2ecdaa4fb8cd82f57b">こちら</a>をご参考に。

###UTM
Unified Threat Management。
ファイアウォール、アンチウィルス、Webフィルタリングなどの複数のセキュリティ機能を持つセキュリティパッケージ製品のことです。

##警察や司法機関への連絡
あまりにも度がすぎる攻撃が頻繁に行われるようであれば、警察関連組織やセキュリティ専門企業への通報・連絡も、合わせて実行しておきましょう。
Rails version update 覚書 その2


前回 https://qiita.com/takakuda/items/895bd6e776e8e7ec08bf

railsをupdateしようとしたら依存関係のあるgemのupdateが先に必要だったので、先にgemをupdateしていく今回はそこではまったところ

## gem update

`bundle update`で`--conservative`optionを利用する
このoptionを利用すると依存関係のあるgemを更新しない
https://bundler.io/v1.15/man/bundle-update.1.html#OPTIONS

```
$ bundle update --conservative hoge_gem
```

みたいな
railsをupdateするために、最新versionにしておかないといけないgemを1つずつ上げていく。

gem updateの際は対象gemのchangelogを確認する

以下はupdate時にちょっと手こずったgemたち

## factory_bot_rails
5系にあげるとfactoryで静的な属性を利用することができなくなり、全て動的な属性を利用する必要があります

だめ↓

```
FactoryBot.define do
  factory :client_user do
    name: Faker::Name.name
  end
end
```

おーけー↓

```
FactoryBot.define do
  factory :client_user do
    name: { Faker::Name.name }
  end
end
```

factory_botの公式ブログでスムーズな移行方法について詳しく説明されているので、それにしたがいましよう
https://thoughtbot.com/blog/deprecating-static-attributes-in-factory_bot-4-11

- rubocop-rspecをGemfileに追加
- 以下コマンド実行

```
$ rubocop \
    --require rubocop-rspec \
    --only FactoryBot/AttributeDefinedStatically \
    --auto-correct
```
メモ：変数ベクトルを定数行列倍した時の共分散行列

# 結論
転置は後ろ。
$Ax \in G(0,A\Sigma A^\top)$

## 確率変数がスカラの場合
元の変数が定数倍された時の分散がどうなるかはわかりやすいので覚えていることでしょう。

$x \in G(0,\sigma)$
とするならば
$ax \in G(0,a^2\sigma)$

となるわけです。

## 確率変数が縦ベクトルの場合

この場合のベクトルとはn個の要素を持つ1次元のベクトルとします。

$x \in G(0,\Sigma)$

### スカラ倍された場合

これも簡単
$ax \in G(0,a^2\Sigma)$


### 線形行列をかけた場合
では座標変換をかけた時はどうなるか。

二次形式なのは確定として**どっちに転置のせるか迷いません？**

結果はこれのはず。
$Ax \in G(0,A\Sigma A^\top)$

### 紛らわしい箇所と導出
LQとかだったら$x^\top Q x$という形式を見がちなので前半に転置のせそうってちょっと思っちゃいます。


- 実際には，

$\Sigma=E[(X-\mu)(X-\mu)^\top]=E[XX^\top] \hspace{1cm}(while\ \mu=0)$
なので

$\Sigma_A=E[(AX)(AX^\top)] = A \Sigma A^\top \hspace{1cm}(while\ \mu=0)$

となるわけですねぇ。
AppCompatActivityってなに？

# 注意
AppCompatActivityが含まれるSupport Libraryはサポートが終了しています。
これからは[AndroidX](https://developer.android.com/jetpack/androidx?hl=ja)の[AppCompatActivity](https://developer.android.com/reference/androidx/appcompat/app/AppCompatActivity)を利用するようにしてください。

記事は投稿当時のままの記載で残します。

# はじめに
最近周りに知見がある人がいない中でAndroidアプリを開発する機会があり、いろいろと疑問に思ったことをまとめようと思い記事を書いてみました。
今回はAppCompatActivityって何？Activityクラスと何が違うの？ というところを書いてみようと思います。

Android開発は始めて半年程度の新参者なので、ツッコミ等々大歓迎です。

# AppCompatActivityとは
[Androidのリファレンス](https://developer.android.com/reference/android/support/v7/app/AppCompatActivity)によると「support library action barの機能を使ったactivityのベースクラスである」と書かれています。

APIレベルが7以上の場合、AppCompatActivityを継承することでActivityにActionBarを追加することができるようになるようです。

## Support Library？

簡単に言うと下記の内容を含んだ拡張パックのようなものだそうです。
- 新しい機能の下位互換バージョン
- Androidフレームワークに含まれていない有用なUI要素
- 幅広いユーティリティ

Support Libraryの説明は日本語のドキュメントがあるのでこちらを参照してください。
https://developer.android.com/topic/libraries/support-library

## ActionBar？
アプリのタイトル、アプリレベルのナビゲーションやその他インタラクティブな要素を表示する領域です。
よくアプリの上部に表示される帯状のところですね。

こちらに詳しい説明があります。
https://developer.android.com/training/appbar

# 結局どっちを使えばいいの？
AppCompatActivityはSupport Libraryの新しい機能の下位互換をサポートするAppCompatライブラリに入っているので、これから作るアプリについては基本的にAppCompatActivityを使うほうが良いのではないかと思います。
NuGet のプロキシ設定

# NuGet のプロキシ設定

\# 以下の記事が書かれた時の版数は NuGet Version: 4.9.2.5706 / 5.8.1.7021 となります.

NuGet の設定は %APPDATA%\NuGet\NuGet.Config に入っています.
(%APPDATA% は一般的には C:\Users\%USERNAME%\AppData\Roaming)

ただ設定はコマンドラインでやったほうが早いです

```
NuGet.exe config -set http_proxy=http://proxyserver:8080
```

恐ろしいことに認証プロキシである場合は、以下のように ID / PW も指定します.

```
NuGet.exe config -set http_proxy.user=xxx
NuGet.exe config -set http_proxy.password=yyy
```

設定を確認する場合は以下のようにやります.

```
> NuGet.exe config http_proxy
http://proxyserver:8080
```
[AWS] EC2 Auto Scalingに関するリンク集

Auto Scalingに関する注意と参考資料のリンク集です。
## 注意点
- ログの退避
  - CloudWatch Logs
- EC2は使い捨てできるような状態（ステートレスな状態）をキープする
- スケールアウト後インスタンス or AMIを最新状態にする

## 参考資料
### 概要
- [Amazon EC2 Auto Scaling とは - Amazon EC2 Auto Scaling (日本語)](https://docs.aws.amazon.com/ja_jp/autoscaling/ec2/userguide/what-is-amazon-ec2-auto-scaling.html)
- [AWS再入門2018 Amazon EC2 Auto Scaling編 ｜ DevelopersIO](https://dev.classmethod.jp/cloud/aws/2018-aws-re-entering-autoscaling/)
  - 処理の流れや仕組み

### チュートリアル
- [AWS EC2 オートスケール実践編 - Qiita](https://qiita.com/T0000N/items/ed39202999b7b1a5bdf3)

### Desired capacity概要
- [Amazon Auto Scalingの Desired Capacity を理解する ｜ DevelopersIO](https://dev.classmethod.jp/cloud/aws/comprehend-auto-scaling-desired-capacity/)

### 段階スケーリングポリシー（Step Scaling Policy）
- [Amazon EC2 Auto Scaling の簡易スケーリングとステップスケーリングポリシー - Amazon EC2 Auto Scaling (日本語)](https://docs.aws.amazon.com/ja_jp/autoscaling/ec2/userguide/as-scaling-simple-step.html)
- [Auto Scalingの段階スケーリングポリシーについて ｜ DevelopersIO](https://dev.classmethod.jp/cloud/auto-scaling-steps/)
  - 古い

### 高速オートスケール
- [Amazon SQSとCloudWatchによる高速AutoScaling ｜ DevelopersIO](https://dev.classmethod.jp/cloud/amazon-sqs-cloudwatch-rapid-autoscaling/)
- [Rapid Auto Scaling with Amazon SQS \| AWS News Blog](https://aws.amazon.com/jp/blogs/aws/auto-scaling-with-sqs/)

### ロードアベレージをCloudWatchで監視するには
- [GitHub - moomindani/aws-mon-linux: Bash script that reports custom metric data about Linux performance to Amazon CloudWatch](https://github.com/moomindani/aws-mon-linux)
- [Auto Scaling Based on Load Average - Discussion Forums](https://forums.aws.amazon.com/thread.jspa?threadID=226654)


### メモリ・ディスクをCloudWatchで監視するには
- [Amazon EC2 Linux インスタンスのメモリとディスクのメトリクスのモニタリング - Amazon Elastic Compute Cloud](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/mon-scripts.html)
- [AWSでメモリやディスクの使用率とか監視する - Qiita](https://qiita.com/zaburo/items/98388ef35aa2e7a477e0)

### 小ネタ
- [これからはじめる AWS Auto Scaling 2019年版 \| 外道父の匠](http://blog.father.gedow.net/2019/02/05/aws-auto-scaling-2019/#note02)

### サーバのボトルネック
- [インフラのボトルネックについて知る - ぺい](https://tikasan.hatenablog.com/entry/2018/06/05/082728)
  - ボトルネックの種類と対策が書いてある

### I/Oのしきい値シミュレーション
- [EBSのIOPSとスループットをCloudWatchから確認してみる ｜ DevelopersIO](https://dev.classmethod.jp/etc/ebs-iops-throughput-cloudwatch/)
- [Amazon EBS の特徴 – アマゾン ウェブ サービス](https://aws.amazon.com/jp/ebs/features/)

### AWS Auto Scaling vs EC2 Auto Scaling Policy
- [AWS Auto Scaling に関するよくある質問](https://aws.amazon.com/jp/autoscaling/faqs/)
  - cf. 「Q:どのような場合で使用すれば良いですか? AWS Auto Scaling vs.Amazon EC2 Auto Scaling？」
PHPの挙動を手軽に確認する

ふとど忘れしてしまったPHPの挙動を手軽に確認するときにはaオプションを使うとPHPをインタラクティブモードで実行できます。pythonやrubyのirbと同じですね。

```terminal
$ php -a

php > if (0 ==null) {
php { echo 'yes';
php { }
yes
```

少し前に知りました :bow:
ZOOマーケティング物語 ~第二話：データ可視化を考える~

##～エピソード2 こういう奴が事業を止める～
白「よっしゃ、BIツール(Tableau)とそのデータは何とか入れられたで！」

ゾウ「俺のおかげだろリンゴおごれよ」

白「おう！任せとけ！下痢になるまでおごったるわ！」

そこにワニ部長が登場する。

部長「おーやっとるか」

白「げっ」

気が付くとゾウはもう居なかった。※彼は部長を毛嫌いしている

ワニ「げってなんだよｗ金かけたんだからさー成果出るよね？このツールでいくら儲かるの？？」

そうこういうことを言ってくるやつがいるから色々なことが進まないのは会社の摂理である。マーケティングは種類にもよるが大体そんなにすぐに結果が出ないことを学んできてほしい。(愚痴)

白「(コイツ・・・マジで夜道気をつけろよ)頑張ります！！」

白「でも確かにこれで何するんやろ。。。)」

####～帰宅後～
白「兄貴！！まっとったで！BIツールってどういう風に使えばええんや？」

黒「はーこの前説明も聞かずに即寝るから。。。のびたかよお前は」


#可視化とは

　第１話に書いたデータ可視化の目的と可視化方法をセットにした私の考える一例を挙げます。

#運用(定常)
##・基本指標確認
　　目的　：サービス・事業運用上の問題点を浮き彫りにし改善に繋げる。
　　可視化：ダッシュボード等で自らの担当施策等の基本KPIを算出および可視化する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/285951/6835141e-e76a-16b7-2680-a9c3d21bcb68.png)

##・時系列傾向確認
　　目的　：時系列ごとのKGI（ここでは売上）の要因を成しているものを分析
　　可視化：時系列毎に棒グラフを作成し、棒グラフの色を様々な属性(年齢・会員ランク・
　　　　　　商品カテゴリ・新規/既存・・・etc)に変更したり、日付の粒度を変更できる
　　　　　　ようなダッシュボード


#分析(スポット)
##・問題分析
　　目的　：運用にて発見した事業における問題点を発見し、掘り下げる。
　　可視化：コホート分析による新規ユーザーがどこまで現在積み上がっているかの確認や
　　　　　　F2分析による２回目購入だけにフォーカスした購入商品傾向等
　　※Tableau LOD表現15 
　　　２. コホート分析(https://www.tableau.com/ja-jp/about/blog/LOD-expressions)　

　データは目的が無ければ、使っても無意味ですが**目的をきちんと考えたアウトプットを用いれば様々な有益な情報をデータが教えてくれることでしょう。**
　
　それは、「このサービスは男性が中心だと思っていたが、意外と女性ユーザーも多い」だったり、「新規ユーザーは取れているけど、既存の離脱が多すぎて全然ユーザーが増えてない」等様々です。
　
　もちろん上記のアウトプットが正解というわけではなく、事業や担当者レベルに応じてその目的に沿った様々なそのときに応じたデータが出せれば一番なので、データの分析視点を固定化してしまうことは必ずしも良いことではないです。

　しかし、まずは上記のような基本的な可視化はある程度度の事業でも有効です。BIツールで簡単にできます。その後目的に沿って更なる可視化を実現するべくステップを踏んでいくべきでしょう。
CLIP STUDIO PAINTで書き出したPNGをPDFで出力する

## 概要
CLIP STUDIO PAINTで書いた漫画をPDFで一括出力するには500円の課金が必要です
ここではたったワンコインを ~~ケチって~~ :mask:(ゴホゴホ) エンジニアらしく、コマンドラインから複数のPNGをPDFに書き出してみました。


### PNGからアルファチャンネルを削除

漫画なので透過表現は使用していませんが、PNGにアルファチャンネルが含まれているので削除します。
透過表現がないので、単純なアルファチャンネルの削除でいけるような気がしましたが、
なぜか `-background white` や `-alpha deactivate`,  `-flatten` では次のPDFに変換する過程で「アルファチャンネルがあるからダメ」と怒られてしまいます

```
# PNGからアルファチャンネルを削除
for i (*.png) { convert $i \( +clone -alpha opaque -fill white -colorize 100% \) +swap -geometry +0+0 -compose Over -composite -alpha off _$i }
```
ref: https://qiita.com/iwiwi/items/fdec3466c4dea5818b3a
途方に暮れていたところ、上記の記事を参考にさせていただきました。

### PNGをPDFに変換

以下のコマンドでPNGをPDFに一枚ずつ変換します。

```
# PNG -> PDF へ変換
$ for i (_*.png) { img2pdf $i -o $i.pdf }
```

### 複数のPDFをひとつのPDFに統合

```
# 複数PDFを統合
pdftk *.pdf cat output out.pdf
```

## まとめ
日頃のメンテナ不足がたたり、img2pdfやpdftkを入れようするたびにエラーに見舞われ、
`homebrew doctor` を繰り返したり、ライブラリの再インストールを行ったり、リンクをつなぎ直したりなど最終的に数時間を要してしまったので、

**さっさと500円払ったほうが楽だと思いました**
aws_iam_policy_attachment を含むコミットを禁止する

# TL;DR

* `aws_iam_policy_attachment` を追加差分に含むコミットを reject する pre-commit hook を作った

# 経緯

* `aws_iam_policy_attachment` をうっかりコミットしてしまうメンバーが後を絶たない
* CI とか作ってサーバ側で防ぎたいんだけど、時間もないのでとりあえずローカルで機械的に防ぎたい

`aws_iam_policy_attachment` がいかに悪事を働くかについては以下の記事を参照:

* [terraform の aws_iam_policy_attachment は使わないほうが無難](https://qiita.com/billthelizard/items/8b54c40351e2ff39afa0)

# コード

```sh:.git/hooks/pre-commit
#!/bin/sh

TABOO_WORD=aws_iam_policy_attachment

# 最新のコミットとの差分を比較し、タブー語を追加差分に含む場合は reject する
git diff HEAD -U0 "*.tf" | grep '^+[^+]' | grep "$TABOO_WORD" 1>/dev/null 2>/dev/null
if [ $? -eq 0 ]; then
  echo "[pre-commit FAILED..] 🔥 $TABOO_WORD は見つけ次第撲滅します!!!🔥"
  exit 1
fi
```

# 仕込み方

1. プロジェクトのフォルダに移動して、上記のコードを `.git/hooks/pre-commit` にコピーする
1. 実行属性を与える
    1. `chmod +x .git/hooks/pre-commit`

# 実行例

```:hoge/main.tf
aws_iam_policy_attachment
```

```console
$ git add hoge/main.tf
$ git commit
[pre-commit FAILED..] 🔥 aws_iam_policy_attachment は見つけ次第撲滅します!!!🔥
```

# 参考

* https://git-scm.com/docs/git-diff
* https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
プライベートIPしかないマシンにSSHする方法

# ポートフォワーディングによるプライベートな環境へのSSH
## 概要

最新記事をこちらに記載させていただきました。もしよろしければこちらも御覧くださいませ
https://red-full-moon.com/no-nat-ssh/

研究室の自席のPCにSSHしたいけど、踏み台もないしもちろんグローバルIPなんてない。
（VPN使えばいいじゃん、というツッコミはなしで）
そんな時でも事前準備さえしていれば外からでもSSHできる方法をメモに残す。

## 用意するもの
- VPS（ショボくてもいいのでグローバルアクセス可能なインスタンス）
    - GCPとかで作れる無料枠のインスタンスとかでもいい感じ
    - ログインユーザー名はhogeとする
    - グローバルIPはxxxとする
- クライアント
    - つなぐPCだね
- サーバー
    - つなぐ先だね
    - ログインユーザー名はfugaとする

## やり方
- サーバー
    - `ssh -N -R 13389:localhost:22 hoge@xxx`
- クライアント
    - `ssh hoge@xxx -L 50000:localhost:13389`
    - `ssh fuga@localhost -p 50000`
  
## 原理
まずサーバーでのsshで自分（サーバー）の22番ポートをVPSの13389番ポートに転送。
ぶっちゃけ、使ってなければどこでもいいので13389である必要はない。
次にクライアントで、VPSの13389番ポートを自分（クライアント）の50000番ポートに転送。
例によって、50000番ポートも使ってなければ何番でもいい。
すると、実質的にクライアントの50000番ポートがサーバーの22番ポートとつながるので、最後にlocalhostの50000番ポートにsshすればあたかも直通でsshできるような感じになるのだ！！

以上

ブログ始めました、よかったら遊びに来てください
https://red-full-moon.com/
Pythonで正規表現を使ってみた


# 正規表現とは

正規表現はメタ文字と呼ばれる文字を使用して、
文字列の検索や抽出、置換などを行うことが出来ます。

Pythonでは標準ライブラリで提供されている、
reモジュールをimportして正規表現を使用します。
reはregular expressionの略です。

基本的な使い方としては、
正規表現のパターンと対象となる文字列をreモジュールの
用途に合わせたメソッドに引数として渡してその結果を取得します。

# 検索関連
### 
####matchメソッド
文字列の先頭でパターンがマッチするかどうか判定。
matchObject(オブジェクト)が返ります。

```python
matchObject(オブジェクト)が返る = re.match(パターン, 対象の文字列)
```

そのオブジェクトから値を取り出すメソッド。
使い方はそれぞれ、

```python
matchObject.group() 正規表現にマッチした文字列が返る。
matchObject.start() マッチの開始位置が返る。
matchObject.end() マッチの終了位置が返る。
matchObject.span() マッチの位置 (start, end) を含むタプルが返る。
```

###searchメソッド
文字列全体とパターンにマッチする箇所を判定。
複数マッチした場合でも、取得できるのは初めにマッチしたもののみ。

```python
re.search(パターン, 対象のテキスト)
```
###findallメソッド
文字列中にパターンでマッチした文字列を返す。
パターンにグループが含まれる場合は文字列のタプルが返す。

```python
re.findall(パターン, 対象のテキスト)
```
# 置換関連
###subメソッド
文字列置換を行います。

```python
re.sub(パターン, 置換後の文字, 元のテキスト)
```

### splitメソッド
文字列を指定した正規表現で分割します。

```python
re.split(パターン, 対象の文字列)
```
#メタ文字
正規表現において、パターン化した文字列のことをメタ文字と言います。
公式にもありますが、reモジュールはPerlの強力な正規表現マッチング操作が使えます。

|表記|意味|
|:--:|:--|
|.|任意の一文字|
|^|行の先頭|
|$|行の末尾|
|*|0回以上の繰り返し|
|+|1回以上の繰り返し|
|?|0回または1回|
|\d|数字[0-9]|
|\D|数字以外[^0-9]|
|\s|空白文字[\t\n\r\f\v]|
|\S|空白文字以外[^\t\n\r\f\v]|
|\w|英数字|[a-zA-Z0-9_]|
|\W|英数字以外|[^\a-zA-Z0-9_]|
|\A|文字列の先頭|
|\Z|文字列の末尾|
|+|直前の文字が１回以上出現|
|*|直前の文字が0回以上出現|
|?|直前の文字が0回もしくは１回出現|
|[abc]|列挙された文字群に含まれる文字|
|[^abc]|列挙された文字群に含まれない文字|
|[a-b]|指定された範囲に含まれる文字|
|[~a-b]|指定された範囲に含まれない文字
|(abc)|グループ化|
|(?=abc)|先読み|
|(?!abc)|否定先読み|
|(?<=abc)|後読み|
|(?<!abc)|否定後読み|

# 実際にPythonで正規表現を使ってみる

まずはreモジュールをimportします。

今回はブラケット(角括弧)で囲まれた間の文字列のみを取得する正規表現を
書いてみます。


```python:sample.py
import re

text = 'Hello[Wor]ld!'
pattern = '(?<=\[)[^]]+(?=\])'

result = re.search(pattern, text)

print(result)
```

# 結果
```
<re.Match object; span=(6, 9), match='Wor'>
```
正解は他にも色々あると思いますが、
このように正規表現で欲しい値を取得することが出来ました。


# 参考
Python 3.7.3 ドキュメント
https://docs.python.org/ja/3/library/re.html

Python学習講座
https://www.python.ambitious-engineer.com/archives/1798

分かりやすいpythonの正規表現の例
https://qiita.com/luohao0404/items/7135b2b96f9b0b196bf3
ZOOマーケティング物語 ~第一話：データの可視化の重要性~

暇だったのでストーリーで実際に説明したデータをどう使うのか紹介したいと思います。※多少何かを想定させる部分もあるかと思いますがあなたの思い込みです。完全に気のせいです。何度も言いますがこの物語は完全にフィクションです。

#★登場人物★
白羊君(白)　　：　社内の若手ECマーケティング施策担当。データ関連の仕事に興味があるがまだまだペーペー。
黒羊君(黒)　　：　白羊君の兄。某コンサルファームでデータ分析の仕事をしている。データ及びマーケティング知識が豊富
ワニ(部長)　：　白羊君の上司であり、所属するEC事業部の部長であり責任者。データリテラシーほぼ無し。
ゾウさん　：　エンジニア。事業開発部所属。ワニが大嫌い
ゴリ　：　社長。強い。

##エピローグ
ZOOインターナショナル株式会社(※今後めんどいのでZI)は今まで自社の商品をデパートの小売などを通じて設立30年順調に業績を上げてきた。しかし、若者向けの商品を展開してきたZIにとって、ジャポンの相次ぐ高齢化や人口減少はかなりの痛手となっていった。
そこでZIはこの局面を乗り切るために自社EC(ZOOCITY)の創立を決意。そして何の因果か訳も分からずマーケティング用語を乱発していたワニが「マーケティング部」の部長に就任することになった。
そう。誰もマーケティングがちゃんと分からなかったのだ。特にECとなるとみんな分からな過ぎて、一旦一番暇そうなコイツに任しとこうというのが裏の事情だった。ZOOCITYはカリスマもどきのワニ部長の元、マーケティング施策が実施され約1年続いていたがプロジェクトは進むが明確な成果をあげれずにいた。。。

###~エピソード1 部長の悩みと巻き込まれる新人～
部長「しっかし、人もたんねーのに何でもかんでも出来るわけないねー。とはいえ上は勝手に押し付けた癖に早く結果出せとかうるせーしどうしたもんかな。はー困った」

というワニ部長の前になんだか忙しそうにしている白羊君が目に入る。

部長「(アイツ食ったら美味そうだな)それはともかくとりあえず売上にはマーケティングだと本で読んだ(※「ワニでもわかる初めてのマーケティング」ワニ出版）」

部長がおもむろに白羊を呼ぶ。

部長「おい、ちょっと来て-」

怪訝そうに振り向く白羊。

白「僕すか？(うわ。。。コイツか)。なんでしょうか？」

部長「とりあえずてっとり早く売上欲しいんだけどさー。何か考えてくれる？」

白「え？」

部長「ん？なにか？＾＾マーケティング施策担当は君だよね？売上ってさマーケティング次第なんだよ？知ってた？？(ドヤァ)」

※ちなみに彼はマーケティングが何かもちゃんと説明できない

白「いえ・・・分かりました」

そう社会と動物界のルールには従うしかないのだ。

部長「じゃあすぐにとりあえず何やるか案を報告して～ヨロピク☆」

～帰宅後～
白「あのくそワニいつかバッグにしてやる。。。とはいえ何とかしないと命の危険まである。。。ああ、困った」

そこに黒羊が帰宅し、もうこの世が終わったみたいな顔をしている弟を発見する。

黒「どうした？？」

白「いやーかくかくしかじかで(いきさつを説明)」

黒「あーなるほど。よくあるやつだな。しかし基本的に正解は無いのだがまずは『可視化』だな。ExcelでもいいけどBIツールが効果的だな。」

白「可視化ってなんや？？BIツール？よっしゃ！それ入れれば何とかなるんやな！！よっしゃ寝るで！(Zzz)」

黒「・・・そういうわけじゃないのだが」


##１、可視化とBIツール
　データは意志をもって纏めないと使えません。ただの数字の羅列を見ても人はそこから行動を起こすことはできません。

　データを使う目的は諸説ありますが、結局は分析結果によって【何らかの意思決定に使用されること】です。その意思決定とは場合によっては重要な経営判断であったり、データを見た効率的なマーケティング施策等様々です。

　そして意思決定にはその判断材料が不可欠です。そのためにまずスタートとして必要なのが**『データの可視化』により、データを人の目に分かるようにすることです。**

　分析は次の段階です。可視化した上でようやく分析が可能になります。
※ただこのような内容はその他データの各種分析関連本に書かれていると思いますので、割愛します。
　
　そしてそれを実現するための手段として簡単かつトレンドなのがBIツールです。
是非BIツールを利用して事業の可視化に挑戦してみてください。

　可視化は意外と軽視しがちですが、**事業の目的に沿った当たり前の可視化を当たり前し、そしてその数字を見ながら日々事業を進める。これがスタートとしては何においても重要です。**そして、この基本が意外とできていない企業も多いと思います。そう例えば経営者だけが大まかな売り上げやそれに対する利益とか見れてても駄目なのです。

　中々難しいとは思いますが、例としてマーケティングだと担当者レベルで自分の実施した施策がどれだけコストがかかっていて、**どれだけ売り上げに貢献しているのか、事業に貢献しているのかを出せる状況まで行ければベストです。**PDCAサイクルをどんどん回していくことにより、施策の振り返りや運用・制御も容易になってきます。

##【コラム】BIツールについて
　データの可視化にはExcelを使えばある程度のことは可能ですが、よりビジネスデータの可視化に特化したBIツールが存在します。こちらも色々な種類がありますが、私は多くの大企業でも導入されている【Tableau】をオススメします。私もユーザー会に参加して様々な企業の事例から多くの示唆を得ています。

　あくまで機能の一例ですがこちらのツールを使えば前記した時系列分析の棒グラフの属性を即座に様々な色に変換できたり、通常SQLで行う集計単位を変更するWindow関数の様な計算もLODという機能を利用してある程度可視化する過程で行うことが可能です。(初回購入日を出したりユーザーごとの累計購入回数を出す等)つまり目的に従った可視化が即時に望むべき形で出せるということです。

　この点が私の観点では他のツールより優れていると思います。
　そして、余談ですが非常にビジュアライズなパンフレットやアート作品のようなビューを作ることまで可能です。こちらは色々「Tableau Viz」というワードで検索していただければ色々な事例を確認することが出来るでしょう。