OmniAICreator/Qiita-1.07M huggingface dataset:
AtomでJSの開発環境構築(ESLint,prettier,flow)

# 概要
普段vim使っているのですがJS書くのにAtomが便利そうなので開発環境を整えました。

# Atomに入れるプラグイン
* [linter-eslint](https://atom.io/packages/linter-eslint)
* [linter-flow](https://atom.io/packages/linter-flow)
* ※他にも入れてるプラグインはありますがここでは上記2つをピックアップします
* ※[prettier-atom](https://atom.io/packages/prettier-atom)もありますが今回は入れずにeslintのプラグインでやることにしました

# linter-eslint
ファイル保存時にeslintチェックをして自動でコードを修正してくれるのがとても便利です。
今回はプラグインでprettierを入れたのでコードの整形も自動でやってくれます。
参考：[prettierの使い方](https://qiita.com/kiida/items/405bb07c4b52bfee0219)

基本はeslintrcにルールを書いてそちらにしたがってコードを修正してもらいます。なので必要なものを一式入れておきます。

```
$ npm install --save-dev \
babel-eslint \
babel-plugin-syntax-flow \
babel-plugin-syntax-jsx \
eslint \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-import-order-autofix \
eslint-plugin-prettier \
eslint-plugin-react \
eslint-plugin-flowtype \
prettier \
prettier-eslint
```

eslintrcはこちらを参考にしています。
https://github.com/mizchi/eslint-config-mizchi/blob/master/.eslintrc.yml

prettierでは末尾のセミコロンを省略、シングルクォーテーションを使うあたりの設定をしてあります。

```
  prettier/prettier:
    - 2
    -
      trailingComma: none
      singleQuote: true
      semi: false
```

あとはlinter-eslintの設定でファイル修正時に修正するチェックをつけておきます。
<img width="766" alt="スクリーンショット 2017-12-22 21.01.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/110485/2072f36a-ccaa-c9f8-191f-03a9b1639559.png">

するとAtom上でeslintチェックをしてくれて、エラーがあれば教えてくれます。
そしてファイル保存時にそれらエラーとprettierのチェック項目を合わせて修正してくれます。
![linter-eslint.gif](https://qiita-image-store.s3.amazonaws.com/0/110485/123e4799-fdff-11eb-b2d4-14a5d51c6cd6.gif)
一気にコードがスッキリしました。

# linter-flow
こちらも自動でflowのチェックをしてくれるので便利です。flow-binを入れてflowを動かせる環境を整えておきます。

```
$ npm install flow-bin@v0.57.3 -g
```
※最新の0.61.0だとうまく動かなかったのでバージョンを下げて入れました。

linter-flowはデフォルトのままで特に何もいじらなくて大丈夫です。
あとは勝手に型チェックをしてくれます。
![linter-flow.gif](https://qiita-image-store.s3.amazonaws.com/0/110485/a7136698-c61e-3727-f7dc-c1de7e16632f.gif)
(ちなみにeslintでprefer-constのルールを設定しているのでファイル保存時に`let`を`const`に置換してくれてます)

# おわりに
普段vimを使っているのであまりAtomなどを使わないのですが、この辺りまで設定すれば流石に便利だなーと思います。(ちなみに[vim-mode-plus](https://atom.io/packages/vim-mode-plus)はもちろん入れてます。笑)
eslintとprettierの環境を整えておくと誰が書いてもある程度統一されたコードになるので人によってばらつきが出ることがなくチーム開発においてかなりいいのではないかなと思いました。

# 参考
* [flowでjavascriptに型付けしよう](https://speakerdeck.com/kaidouji85/flowtejavascriptnixing-fu-kesiyou)
* [ReactNavite 開発に Atom を使う](https://qiita.com/hotchpotch/items/714a0e8f0d364282f95c)
* [modern-js-stack-example-with-react](https://github.com/mizchi/modern-js-stack-example-with-react)
scapy で pcap から snmptrap パケットを再現して送信

# Python で pcap から snmptrap のパケットを再現
業務上、snmptrap を生成して trapper の検証をする必要があったため、以下のツールを作成した。
参考 [Sending packets from pcap with changed src/dst in scapy](https://stackoverflow.com/questions/8726881/sending-packets-from-pcap-with-changed-src-dst-in-scapy)

```python:snmptrapgen.py
import argparse

from scapy.all import *


class SNMPTrapGenerator(object):
    def __init__(self, infile, dst_ip, src_ip=None):
        try:
            self.rd = PcapReader(infile)
            self.dst_ip = dst_ip
            self.src_ip = src_ip
        except IOError:
            print "Failed reading file %s contents" % infile
            sys.exit(1)

    def send(self, count=100):
        pkt_cnt = 0
        p_out = []

        for p in self.rd:
            pkt_cnt += 1
            np = p.payload
            if IP in np and UDP in np:
                np[IP].dst = self.dst_ip
                if self.src_ip is not None:
                    np[IP].src = self.src_ip
                del np[IP].chksum
                del np[UDP].chksum
                p_out.append(np)
                if pkt_cnt % count == 0:
                    send(PacketList(p_out))
                    p_out = []

        # Send remianing in final batch
        send(PacketList(p_out))
        print "Total packets sent %d" % pkt_cnt


def main():
    parser = argparse.ArgumentParser(prog="snmptrapgen", add_help=True)
    parser.add_argument("-f", "--file", type=str,
                        required=True, help="Specify .pcap file.")
    parser.add_argument("-d", "--dst_ip", type=str,
                        required=True, help="Sepcify destination ip address.")
    parser.add_argument("-s", "--src_ip", type=str,
                        required=False, help="Specify source ip address.p")
    args = parser.parse_args()

    stg = SNMPTrapGenerator(args.file, args.dst_ip)
    stg.send(1000)


if __name__ == "__main__":
    main()
```

## 前準備
scapy と pypcap が必要であるため、以下のコマンドでインストールする。

```
# yum -y install libpcap-devel python-pip
# pip install scapy pypcap
```

あとは自前の pcap ファイルを使って snmptrapd などのサーバーに投入することができる。
頑張れば scapy で好きなパケットを作れたりするので試験したいパケットなどがあれば積極的に使っていきたい。
組合せ最適化で波及効果を解く

Advent Calendar 22日目の記事 [組合せ最適化で不等式を解く](https://qiita.com/SaitoTsutomu/items/ed0fe93f9f765262b890)
Advent Calendar 24日目の記事 [組合せ最適化でへやわけを解く](https://qiita.com/SaitoTsutomu/items/82c670fd5aba8bad081d)


## これなに

**波及効果**を、Pythonで[組合せ最適化](https://qiita.com/SaitoTsutomu/items/bfbf4c185ed7004b5721)モデルを作って解きます。
解く楽しみは、モデル化を工夫することになります。

自分でも試してみたい人は、下記を参考にしてください。

- [数独を通して組合せ最適化を学ぼう](https://qiita.com/SaitoTsutomu/items/bd09190d8a02432b3f16)

## 問題
* 各部屋のマスには1からその部屋のマス数までの数を1つずつ入れます
* 同じ数字を同じ横行、または同じ縦列に入れる場合、数字と数字の間にその数字と同じ数以上のマス目がなくてはなりません

下記は、左が問題で、右が答えです。

![](https://raw.githubusercontent.com/SaitoTsutomu/opt4puzzle/master/pic/ripple.png)

### 入力パラメータ

`data`にヒントが入っているとします。

```py3:python
import numpy as np
from pulp import LpProblem, lpSum, lpDot, value
from ortoolpy import addvars, addbinvars
data = """\
...3..
......
..2..4
3..4..
......
..2...""".split()
rms = [[eval(t) for t in s.split('/')] for s in """\
0,0
0,1/0,2/1,2
0,3/1,3/1,4/2,3
0,4
0,5/1,5/2,4/2,5/3,5
1,0/1,1
2,0/3,0/3,1/4,1
2,1/2,2/3,2/4,2
3,3/4,3/5,1/5,2/5,3
3,4
4,0/5,0
4,4/4,5/5,5
5,4""".splitlines()]
nw, nh = len(data[0]), len(data)
na = max(len(rm) for rm in rms)
```

## Pythonで解く

数理モデルを作成し、解きましょう。

### 変数
* v：各位置がどの数字か (1)
* r：各位置の数字 (2)

### 制約
* 数字があれば、その数字 (3)
* 数字は１つのみ (4)
* rをvで表現 (5)
* nマス以内に2つ以上の数字nはないこと (6)
* 各部屋内で同じ数字はないこと (7)

```py3:python
m = LpProblem()
v = addbinvars(nh, nw, na) # (1)
r = addvars(nh, nw) # (2)
def dirs(i, j, k):
    yield from (v[i+l][j][k] for l in range(1, k+2) if i+l < nh)
    yield from (v[i][j+l][k] for l in range(1, k+2) if j+l < nw)
for i in range(nh):
    for j in range(nw):
        if data[i][j].isdigit():
            m += r[i][j] == int(data[i][j]) # (3)
        m += lpSum(v[i][j]) == 1 # (4)
        m += lpDot(range(na), v[i][j]) + 1 == r[i][j] # (5)
        for k in range(na):
            m += lpSum(dirs(i,j,k)) <= 2*(1-v[i][j][k]) # (6)
for rm in rms:
    for k in range(len(rm)):
        m += lpSum(v[i][j][k] for i,j in rm) == 1 # (7)
m.solve()
```

### 結果の表示

```py3:python
print(np.vectorize(value)(r).astype(int))
>>>
[[1 2 1 3 1 2]
 [2 1 3 2 4 1]
 [4 3 2 1 5 4]
 [3 2 1 4 1 3]
 [2 1 4 1 3 1]
 [1 5 2 3 1 2]]
```

解けていることが確認できます。

以上
あの名曲の歌詞をGoogleの感情分析APIにかけてみた

# はじめに
辛い時に元気付けてくれるポジティブな曲ありますよね・・・。
そのポジティブな曲の歌詞は、AIもポジティブと判断するのか気になったのでやってみました。
発展させればヒット曲の傾向とかわかるかも！とか色々考えたんですが、あまり時間がなくてちょっとしか出来てません。
※もうひとつ、スキャットマン・ジョンの曲をSpeech APIで文字起こししてみるという最高のネタがあったんですが、Speech APIは音楽を認識してくれなくて、ボツになりました。

出たばっかりのAmazon Comprehendも気になるけど、日本語対応していないのでGoogle Cloud Natural Language APIを使いました。

# 実験結果
曲は、自分が独断と偏見で元気付けられる応援ソングをセレクトしました。歌詞の全文をAPIに突っ込んでいます。
Scoreはマイナスがネガティブ、プラスがポジティブ、0がニュートラルです。
Magnitudeは感情の強度です。
APIでは全文トータルの結果とセンテンスごとの結果を見ることが出来ます(今回はセンテンスごとの結果は省略します)。

## 明日があるさ(Re:Japan)
- Score: 0.2
- Magnitude: 23.6

最もポジティブと判定されたセンテンスは「たった一言好きですと」でScoreが0.8でした。素敵ですね。
最もネガティブと判定されたセンテンスは「何もできず 何もできず」でScoreが-0.8でした。なんとなく正しそう。
今回試してみた曲の中ではMagnitudeが最も大きくなりました。感情の波が激しいということでしょうか。
ちなみにGoogleのドキュメントを読むと、Scoreが0に近いけどMagnitudeが大きい場合は、ポジティブとネガティブが混在していると判断できるそうです。

## 上を向いて歩こう(坂本 九)
- Score: 0.3
- Magnitude: 8.8

この曲はネガティブなセンテンスがほとんど無かったです。さすが。
「幸せは 雲の上に」というセンテンスがScore0.9を叩き出しました。

## 負けないで(ZARD)
- Score: 0.3
- Magnitude: 10.5

この曲もネガティブなセンテンスはほとんど見られませんでした。
最もポジティブなセンテンスは「パステルカラーの季節に恋した」でScore0.9、Magnitude0.9でした。名フレーズほどMagnitudeが大きくなるとかあるんでしょうか。
「負けないで」というワード単体での結果はScore0.4、Magnitude0.4でした。

# おわりに
もっと突っ込んで分析してみたら面白そうですが、今日は金曜だしこの辺にしておきます。
センテンス別に見るとポジティブなワードが入っているとポジティブに出ているのでその辺はちゃんと出ているのかなと思いました。でも、総合スコアはセンテンス全体の合算より低めに出ているように感じたので、その辺どうなってるんだろうなと思いました(素人なのでよくわかりません)。
shell shortcut command 

|command|function|
|:-:|:-:|
|C-a|move home|
|C-e|move end|
|C-b|move back|
|C-f|move forward|
|C-n|move next|
|C-p|move previous|
|C-l|clear screen|
|C-h|backspace|
|C-d|delete|
|C-w|cut the word before culsor|
|C-u|cut the part before culsor|
|C-k|cut the part after cursor|
|C-i|complete this command|
|C-s|stop output screen|
|C-q|resume output screen stopped by C-s|

if you set 'C-q' to prefix for tmux or screen, your terminal will often stop.
パケットキャプチャツール/Charlesを試してみた


本記事は[サムザップ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/sumzap)の22日目の記事です。
昨日は@yos316さんの「[【Unity】Unity2017.3で追加されたAssembly Definitionをちょっと触ってみた](https://qiita.com/yos316/items/e01c6f66838337d0a5be)」でした！

#はじめに
アプリ開発していると、端末の通信の内容確認やデバッグを頻繁に行います。

その際こういった内容を確認したくなります。
・レスポンスがちゃんと返ってきているか
・リクエストやレスポンスの内容は正しいか
・任意に通信の内容を書き換えてデバッグ　


代表的なパケットキャプチャツールはWireshark, Charles, Fiddlerなどがあります。
今回は**CharlesとiPhone端末を連携**させて使ってみた所感などをまとめました。
<img width="297" alt="スクリーンショット 2017-12-22 20.03.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/204796/ceea0d91-045b-6cd5-66c8-e26e77343149.png">



#設定手順
こちらからDLしてインストール。
https://www.charlesproxy.com/download/
Charlesは有料なので、試用版を選択。
（試用版は30日間のみと書いてあるけど、起動のたび広告が出るだけで使い続けられる模様）

まずメニューの`Proxy → Proxy Settings`を選択。
<img width="246" alt="スクリーンショット 2017-12-22 11.48.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/204796/e71442cc-0a49-f44d-122e-468c4416581f.png">

ポート番号を指定（任意の番号でOK）。
<img width="590" alt="スクリーンショット 2017-12-22 11.49.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/204796/1196b449-c415-74db-8287-e4f15ae178ca.png">

ローカルPCのIPアドレスを調べる。
メニューの`Help → Local IP Adress`から調べることが可能。
後ほどiPhone端末に入力するのでアドレスを控えておく。
<img width="350" alt="スクリーンショット 2017-12-22 11.54.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/204796/124bfe32-fce1-fea1-8329-0f05826a021a.png">

ローカルPCとiPhone端末を同一のwifiネットワークに接続する。
iPhone端末上にて`設定 → Wi-Fi → 使用するネットワーク`を選択し、
`HTTPプロキシ/手動`の欄にサーバIP（ローカルPCのIPアドレス）とポート番号を入力
<img width="300" alt="スクリーンショット 2017-12-22 17.08.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/204796/10f58306-4e03-98f6-5875-a919f666265f.png">

以上で設定は完了です。
最初に通信したときに一度だけ認証ウィンドウが出ます。

#使用方法
**通信の内容を覗く**
![2017-12-22_18h15_18 (1).png](https://qiita-image-store.s3.amazonaws.com/0/204796/6d55b0a4-a12c-8298-6d4d-00c4deda8b6c.png)
Contentsタブから端末の通信の内容を簡単にJSON形式で確認することができます。
すごく見やすい。

**リクエスト・レスポンスの値を任意に変更する**
![2017-12-22_20h16_21.png](https://qiita-image-store.s3.amazonaws.com/0/204796/a59b9092-ccd1-4d35-0cae-0b0fc1c4863a.png)
右クリックで任意のアクセスにブレイクポイントを設定できます。
ブレイクポイントに設定したアクセスの**リクエストを送る前**と**レスポンスが返ってきたとき**に自動的に止めてくれます。

![2017-12-22_20h18_24.png](https://qiita-image-store.s3.amazonaws.com/0/204796/9bea3b2b-28cf-f9b5-6cb9-ed0760bba739.png)
止めた状態で通信の内容を編集して変更できます。
`Execute`を押すと変更した内容で通信が送られます。
ブレイクの設定でリクエストでは止めずにレスポンスのみ止めるといった設定も可能です。

#まとめ
設定が楽ちんで、Wiresharkなどに比べて機能も複雑すぎず使いやすいです。

料金体系は会社ごとにライセンス費を払う形式なので、
購入しておくとプロジェクト全体の業務改善化が見込めるかもしれないと感じました。

端末での通信内容を簡単に確認したり、
通信内容を変更して手軽に異常値チェックをしたりなど幅広く使えそうです。

----
明日は、[tomoriaki](https://qiita.com/tomoriaki) さんで、
[【Unity】SRDebuggerのタブの拡張方法](https://qiita.com/tomoriaki/items/83666ad18edba56fdc29)です！
Voice Kitで自作GoogleHomeを作る際に付け足したこと

#**Voice Kitで自作GoogleHomeを作る際に付け足したこと**
Google AIY Voice Kit とラズパイで
簡易 Google Home を自作しました。

![IMG_0531 2.PNG](https://qiita-image-store.s3.amazonaws.com/0/51578/86e00dd3-827a-f95f-4e8a-704940dd9129.png)

まず、VoiceKitとRaspberry Pi 3 Model Bを準備するのは当然ながら、
まだ注意するポイントがありました。

###**■注意ポイント**
- ***無料でできるのは英語版***
- ***両面テープが必要***
- ***細いプラスドライバーが必要***

まず、課金なしでできるのは、英語版のみということ。
日本語対応やカスタマイズにはお金がかかる（トライアルあり）

両面テープは、なくても工夫次第でできるかなと思いましたが、
やはりあった方が良いです。

プラスドライバーは＃0のものが必要です。

手順や設定は他のサイトを見れば
参考になるものがあるのでそちらに任せますが、
まだまだかゆいところに手が届かない部分がありました。

それは、

- ***ラズパイ起動時にGoogleアシスタントを自動起動したい***
- ***初期ボリュームがでかい***

当方、楽をして
VoiceKitと一緒にRaspberry Pi 3 Model Bをセット購入したので、
ある程度セットアップ済みのSDカードでした。

その環境前提です。

##**■Googleアシスタントを自動起動**

起動時に自動化する方法はいくつかあるようですが、
今回は systemd を使う方法で試したいと思います。

まず、どこでも良いのでスクリプトを作成します。

<pre><code>$ vi my_assistant.service</code></pre>

<pre><code>Description=My awesome assistant app

[Service]
ExecStart=/bin/bash -c '/home/pi/AIY-voice-kit-python/env/bin/python3 -u src/my_assistant.py'
WorkingDirectory=/home/pi/AIY-voice-kit-python
Restart=always
User=pi

[Install]
WantedBy=multi-user.target
</code></pre>

と記述して保存します。

保存したファイルを以下のように移動します。

<pre><code>$ sudo mv my_assistant.service /lib/systemd/system/</code></pre>

そしたら、以下のコマンドで
サービスとして登録しておきます。
ついでに一応開始させておきましょう。

<pre><code>$sudo systemctl enable my_assistant.service
$sudo service my_assistant start
</code></pre>

##**■初期ボリュームを変更**

ボリュームの変更は amixer コマンドでできます。
が、出力デバイス名を知る必要があります。

<pre><code>$ sudo amixer -M</code></pre>
<pre><code>Simple mixer control 'Master' , 0</code></pre>

この環境では「Master」という名前のようです。
※他に「PCM」とか

とりあえず音量を70% にしてみる。

<pre><code>$ sudo amixer sset Master 70%&nbsp;</code></pre>

ちゃんとボリュームが変わりました。

これをOS起動時に自動セットするようにします。

起動時に自動化する方法はいくつかあるようですが、
今回は /etc/rc.local に処理を書き込む方法で試したいと思います。

<pre><code>$ sudo vi /etc/rc.local</code></pre>

<pre><code>if [〜]
…
fi
exit 0
</code></pre>

とか既に書かれていますが、
この fi と exit 0 の間に処理したいことを記述して

<pre><code>if [〜]
…
fi

amixer set Master 70%

exit 0
</code></pre>

としました。
これで保存すればOK。

これで無事
ラズパイ起動時に
そのまま良い音量でGoogleアシスタントが使える状態になりました。
PHP7でのXhprof入門

# TL;DR

PHP7でもXhprofはなんとか使える。

# PHPのプロファイリングについて

調べるとXdebugとXhprofが主流らしい。
今回はFacebook謹製のXhprofを使ってみる。

http://php.net/manual/ja/book.xhprof.php

peclでインストールできる。

```sh
$ pecl install channel://pecl.php.net/xhprof-0.9.4
```

はずなのだが自分の環境は複数バージョンのPHPが存在していてpeclがうまく動いてくれなかったのでソースコードからインストール。

```sh
$ wget http://pecl.php.net/get/xhprof-0.9.4.tgz
$ tar zxvf xhprof-0.9.4.tgz 
$ cd xhprof-0.9.4/extension/
$ phpize
$ ./configure
$ make
$ make test
$ sudo make install
```

でいけるはずなのだがコンパイルで失敗する。
何故何故と調べたらPHP7に対応してなかった。。。:sob:
まじか。。
私は時代に取り残されたライブラリを学ぼうとしているのか。
そこでさらに調べたら公式ではないけれどPHP7対応版が見つかったのでそれを試してみることに。

https://github.com/Yaoguais/phpng-xhprof

```sh
$ git clone git@github.com:Yaoguais/phpng-xhprof.git xhprof
$ cd xhprof
$ /path/to/php7/bin/phpize
$ ./configure --with-php-config=/path/to/php7/bin/php-config
$ make
$ make test
$ sudo make install
```

すんなりインストール成功。

php.iniに以下を追加。

```sh
[xhprof]
extension=phpng_xhprof.so
xhprof.output_dir="/var/log/xhprof"
```

ログディレクトリを作成。

```sh
$ mkdir /var/log/xhprof
$ chmod 777 /var/log/xhprof
```

Apacheを再起動して確認。

```sh
$ php -i | grep xhprof
xhprof
xhprof => 0.9.5
```

オーケーですね。
PHP7対応版ではない公式のほうのソースコードに含まれている`xhprof_html`と`xhprof_lib`をプロファイリングしたいアプリケーションのドキュメントルート以下に置く。
`/xhprof_html`で画面が表示されれば成功。

![xhprof1.png](https://qiita-image-store.s3.amazonaws.com/0/123511/1182ea06-7cde-6303-bd9c-12757bad14d3.png)

まだ何も計測していないので何も表示されませんね。

# プロファイリング
ここからは実際のプロファイリング。
アプリケーションで最初に読み込むファイルに以下のコードを追加する。

```php
require_once dirname(__FILE__) . '/xhprof_lib/utils/xhprof_runs.php';
function __xhprof_save()
{
    $data = xhprof_disable();
    $runs = new XHProfRuns_Default();
    $runs->save_run($data, 'sample-application');
}
xhprof_enable(XHPROF_FLAGS_CPU | XHPROF_FLAGS_MEMORY);
register_shutdown_function('__xhprof_save');
```

そしてどこかにアクセスするとプロファイル情報が保存される。
`xhprof.output_dir`で設定しているディレクトリを確認するとファイルが作られていることがわかる。
ブラウザで`/xhprof_html`をリロードする。

![xhprof2.png](https://qiita-image-store.s3.amazonaws.com/0/123511/4acab9ab-3196-21f8-399a-a970823a42d1.png)

詳細を確認すると、

![xhprof3.png](https://qiita-image-store.s3.amazonaws.com/0/123511/585ea4be-0f7f-d94f-b635-2a048fbdda14.png)

どの関数にどれくらい時間がかかっているか、CPUやメモリはどのくらい使っているかがわかる。
CPUとメモリのプロファイル情報を表示するには`XHPROF_FLAGS_CPU`と`XHPROF_FLAGS_MEMORY`が必要となる。
しかし行のどれかをクリックしても警告が出てしまったの。そこは修正しないと。
ただ、まだ読みづらい。
もっとわかりやすくするためにグラフ化する。

# プロファイル情報のビジュアライズ
Graphvizをインストール。

```sh
$ yum install graphviz
```

"View Full Callgraph"をクリックすると関数呼び出しの流れが描かれた巨大なコールグラフが表示される。

![xhprof4.png](https://qiita-image-store.s3.amazonaws.com/0/123511/7d7fd824-fae3-a923-2f81-1ba30bfa5225.png)

赤くなっている箇所がボトルネック。

# まとめ
関数の呼び出し回数もわかるので、無駄なループ処理を見つけるには便利だと思う。
ただ、どんなSQLが実行されたかはわからないのでそれは別のツールを使うしかなさそう。
とりあえず、コールグラフを出してボトルネックを探して修正という流れはチューニングしてるぜ感が出まくるのでモチベーションは上がりますね:thumbsup_tone2:

# 参考
https://qiita.com/morisuke/items/49f17bda2c764ae8f725
https://qiita.com/w_cota/items/48667a845cd06d969d4a
https://quartet-communications.com/info/topics/12238
これを書いている途中に見つけたTidewaysはどうなのだろう。
開発は活発そうだがGitHubのステータスがビルド失敗になっているのが不安だ。。
https://github.com/tideways/php-profiler-extension
Windows環境で、"Hello Go!"をしてみただけの記事

# どんな記事？
Goについて「流行っている」以上の事をしらないひとが、Goでこんにちは世界する
(windows環境)

# [インストール - The Go Programming Language](http://golang-jp.org/doc/install)
Goディストリビューションのダウンロード
Featured Downloadsって言われてるのをDLした
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214098/99bd7364-b96d-8774-4662-912079906a21.png)

インストーラーを開いて進める。悩みポイントは出てこない。

goenvで入れたほうが良かったんだろうな。
まあ、このPCでGo書く機会なんて無いだろうし…

# Path通す
いつも忘れる。
コントロールパネル＞システム＞システムの詳細設定＞環境変数
と思ってみたら、なんだちゃんと通してくれてるじゃん。
```
C:\Go\bin
```

# hello.go
> 以下のように、簡単なプログラムを構築することで、Goが正しくインストールされていることをチェックします。

とのことなので、

```go
package main

import "fmt"

func main() {
    fmt.Printf("hello, world\n")
}
```

をコンソールで
```go run hello.go```
する

# なんかPath通ってなくね？
>'go' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

怒られた

[Windows に インストーラを使って GoLang を インストールするときの注意点 - Qiita](https://qiita.com/kent_ocean/items/566e6a23d76ef3b4d125)
なるほど、僕が悪いんじゃなくてインストーラーがアホらしい。

再起動がだるい

# 再びのhello.go
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214098/442ed249-7858-7318-9b55-4f538f9e9d92.png)
できた。

# 最後にhello.goを読む
##package main
> パッケージ名がmainのパッケージは扱いが特殊で、main関数を定義することでエントリポイント（プログラム実行時の処理開始位置）として使用できます。 逆に、mainパッケージ以外はエントリポイントとして扱うことができないため、go runコマンドでの実行やgo build/go installコマンドによる実行ファイルの生成ができません。
[パッケージ - はじめてのGo言語](http://cuto.unirita.co.jp/gostudy/post/go-package/)

なるほど、とりあえず実行ファイルはこのパッケージにしろと。

## import "fmt"
[fmt パッケージ - golang.jp](http://golang.jp/pkg/fmt)
printfするのに必要なパッケージね。
しかしprintfって久々に見たな。

## func main() {
これがメイン関数ね、了解

## fmt.Printf("hello, world\n")
今後とも、お世話になります
TRUNCATE TABLEとDELETEの違い

# 違い
* **TRUNCATE TABLE**の方が**DELETE**より消費リソースが少なく、高速
* **DELETE**はWHERE句による条件指定が可能
* ロールバックはどちらも可能

# 参考：ロールバックできないステートメント

* ALTER DATABASE
* ALTER FULLTEXT CATALOG
* ALTER FULLTEXT INDEX
* BACKUP
* CREATE DATABASE
* CREATE FULLTEXT CATALOG
* CREATE FULLTEXT INDEX
* DROP DATABASE
* DROP FULLTEXT CATALOG
* DROP FULLTEXT INDEX
* RECONFIGURE
* RESTORE
[続]AndroidアプリにCrashlyticsを導入してクラッシュフリーユーザー率99.9%を目指す話


みなさん、こんにちは。空中清高です。
この記事は前回の記事の続きです。
[AndroidアプリにCrashlyticsを導入してクラッシュフリーユーザー率99.9%を目指す話](https://qiita.com/soranakk/items/ec3b91212f8b386633bb)


前回の記事の最後は、機種依存のクラッシュに対応したので12月はいい結果が出るはず、ということだったので12月の結果を見ていきます。

# まずはこれまでの結果から

前回、9月に計測を開始してから11月までの結果を載せましたが、もう一度載せます。

9月のクラッシュフリーユーザー率は95.57%
10月のクラッシュフリーユーザー率は96.53%
11月のクラッシュフリーユーザー率は97.89%

# 12月の結果

今月はまだ途中なのですが、11/30～12/21までの結果を載せます。

<b>12月のクラッシュフリーユーザー率は99.89%</b>:tada:

大事なことなのでもう一度:point_up: 
<b>12月のクラッシュフリーユーザー率は99.89%</b>:confetti_ball: 

# やったぜ

99.9%には惜しくも届きませんでしたが、高い数値を維持できました！ :smile:
このまま月末まで集計しても、99.8%台はキープするでしょう。

# どのくらいクラッシュ率を低減できたのか

Crashlyticsを導入してからどのくらいクラッシュ率を低減できたのでしょうか。 
それを調べるため本当は8/30～9/21までを見たかったのですが、遡ってデータを見ることができませんでした。
Crashlyticsでは3ヶ月以上前のクラッシュデータは見えなくなるんですね。
なので9/30～10/21のデータから推測することにしました。
9/30～10/21のクラッシュフリーユーザー率は96.8%でした。
9月と10月で1%ぐらい低減しているので、8/30~9/21は95.8%だったと推測します。
これが99.89%になったので、絶対値で4.09%低減させました。
比率だとクラッシュ率が4.2%から0.11%になったのでおよそ97%低減させたことになります。
やりましたね:blush:

# クラッシュフリーユーザー率向上の効果

クラッシュフリーユーザー率を上げることによる効果を挙げてみます。

## 単純にうれしい

まず単純に、より高品質なアプリをリリースできていることが実感できてうれしいです:satisfied:
やっぱりエンジニアですから、クラッシュしないアプリを作りたいですよね？
まだまだ完全に0件とはいかないまでも、クラッシュ件数がガクッと減ったグラフを見るのは気持ちがいいです:innocent:
97%減って目に見えるんですよね:blush:

## クラッシュに対する基準が上がる

Crashlyticsでクラッシュを見つけたとき、クラッシュ件数が多いやつほど対応する優先度が上がります。
でも今は本当に稀な条件で発生するクラッシュしか残っていないので、これからのリリースでは比較対象の基準が高いです。
これまでは後回しになるようなクラッシュでも、これからは最優先で対応するクラッシュに変わります :cop:
これで割れ窓理論のような効果が現れて欲しいなぁ、と思います。

## バグフィックスのフィードバックが得られる

クラッシュフリーユーザー率の上昇が目に見えることでバグフィックスのモチベーションが上がります。
バグ取ってリリースしたってだけだと、フィードバックがないので実感が沸かないんですよね。
便りのないのはよい便りってことなんですが、やっぱりフィードバックは大事です。
バグフィックスしてリリースしたあと、直したバグがCrashlyticsから見えなくなると、よっしゃ！ :muscle: って感じで小さな達成感があります。
なのでバグフィックスのリリースが新機能リリースと同じくらい楽しくなりました。

# まとめ

* Crashlyticsを導入してクラッシュフリーユーザー率を99.8%まで改善させた
* 大事なことなのでもう一度:point_up: クラッシュフリーユーザー率を99.8%まで上昇させた
* クラッシュフリーユーザー率が上がると、単純にうれしい。
* クラッシュフリーユーザー率を上げると、クラッシュの対応基準が上がる
* クラッシュフリーユーザー率が上がったのを見ると、バグフィックスリリースが楽しくなる
* いまクラッシュフリーユーザー率って何回言った？
vSphere6.5にて、vCenterのWebClient/HTML5 clientでOVFをデプロイできない


# 事象
vSphere6.5環境にて、vCenterのWebClient/HTML5 clientからOVFをデプロイしようとすると、以下のエラーで失敗する。  
![image](https://qiita-image-store.s3.amazonaws.com/0/159980/9caa69e0-e9bf-28d3-0042-7ef22266df96.png)  

JP:「転送に失敗しました。OVF記述子が利用できません。」
EN: Transfer failed: The OVF descriptor is not available.

## 環境
vCenter: 
Version 6.5.0.10000 Build 6816762
ESX: 
Client version:1.21.0
Client build number:5724747
ESXi version:6.5.0
ESXi build number:5969303


# 解決策
vCenterではなく、各ESXホストのWebClient(Host Client)を使用すると、問題なくできる。理由はよくわからない。
Vue.jsで開発しているときにUIがもっさりする時の解消方法

Vue.jsでわりとコンポーネントが多い画面を作ってるとUIの動作がなんかもっさりして遅いなー。っていう時があります。これはインスペクタで、Vue.js devtoolsを使っているときに発生するときがあります。

インスペクタを閉じれば早くなる場合は、おそらくこれが原因です。

インスペクタを使ってても早く使いたいですよね。

そんな時はイベントの記録をオフにすることで解消できることがあります。

<img width="1103" alt="Developer_Tools_-_https___localhost_client_.png" src="https://qiita-image-store.s3.amazonaws.com/0/7565/9449fe8d-a961-9332-9608-298ede8b692e.png">

どうでしょう? もっさり感が無くなったらこれが原因です!

ではでは。
Kotlin+Moshi+Retrofit2でProGuardかけたらAPIからのデータが空になった時の対策

[GitHub](https://github.com/square/moshi/issues/345#issuecomment-337328427)のIssueにあった内容で対策をすれば解決した

```
#### OkHttp, Retrofit and Moshi
-dontwarn okhttp3.**
-dontwarn retrofit2.Platform$Java8
-dontwarn okio.**
-dontwarn javax.annotation.**
-keepclasseswithmembers class * {
    @retrofit2.http.* <methods>;
}
-keepclasseswithmembers class * {
    @com.squareup.moshi.* <methods>;
}
-keep @com.squareup.moshi.JsonQualifier interface *
-dontwarn org.jetbrains.annotations.**
-keep class kotlin.Metadata { *; }
-keepclassmembers class kotlin.Metadata {
    public <methods>;
}

-keepclassmembers class * {
    @com.squareup.moshi.FromJson <methods>;
    @com.squareup.moshi.ToJson <methods>;
}

-keepnames @kotlin.Metadata class com.myapp.packagename.model.**
-keep class com.myapp.packagename.model.** { *; }
-keepclassmembers class com.myapp.packagename.model.** { *; }
```
AngularコードのRegion切り：Component

私はAngular開発にはVisual Studio Codeを使っているんですが、
`// #region XXXXX`、 `// #endregion`で囲むと、行番号のとこに [-] マークが現れ、折りたためるようになります。

やっぱ便利ですよね。欲しかった人多いようです。
https://github.com/Microsoft/TypeScript/issues/11073

AngularのComponentは、ビューのためにいろんなコードが入ってきてわかりづらくなるので、次のようなRegionで区切っています。
大体いつも切ってるRegionを、既存コードからコピペするの面倒なので、メモ代わりに投稿します。

### 区切り方

```typescript
@Component({
  selector: 'app-foobar',
  templateUrl: 'foobar.html',
})
export class FoobarComponent {
  // #region インタフェース

  @Input() ...
  @Output() ...

  // #endregion

  // #region コンストラクタ・ライフサイクル

  constructor(
    private http: HttpClient,
    private router: Router,
  ) {
    ...
  }

  ngOnInit() {
  ...

  // #endregion

  // #region ビューバインド

  @ViewChild('child') child: ChildComponent;
  ...

  public viewModel: any;
  ...

  // #endregion

  // #region イベント

  public onClickSearch() {
  ...

  // #endregion

  // #region プライベート

  private fixedArray: any[] = ['aaa', 'bbb', 'ccc'];
  private myMethod() {
  ...

  // #endregion
}
```

### コピペ用

```typescript
  // #reion インタフェース

  // #endregion

  // #region コンストラクタ・ライフサイクル

  // #endregion

  // #region イベント

  // #endregion

  // #region ビューバインド

  // #endregion

  // #region プライベート

  // #endregion
```


### 2018/03/23追記

ビューに表示するモデルをコンポーネントに保持しておく場合は、ビューモデルを別にするのがわかりやすそう。Regionは重ね掛けできます。

```typescript

  // #reion インタフェース

  // #endregion

  // #region コンストラクタ・ライフサイクル

  // #endregion

  // #region ビューバインド

  // #region ビューモデル

  // #endregion

  // #endregion

  // #region イベント

  // #endregion

  // #region 内部メンバ

  // #endregion
```
Cognos Framework Managerで英語名のオブジェクトを日本語名に一括変換

#概要
Cognos Framework Managerで、英語名のオブジェクトを日本語名に一括変換する手順です。

大概の環境では、データベースのテーブル名やカラム名はアルファベットで命名していると思いますので、Framework ManagerのDatabase Viewに取り込んだ時は、英語表示になります。
それをBusiness Viewで下記のように日本語化するのに、一個一個手作業でやるのは面倒くさいですよね。
これを一括で変換する手順を投稿します。
![034.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/92c915ed-ee45-bc94-5f1c-2d59b71d76fa.png)

#手順
初期状態はこんな感じで、Business Viewのコンテンツも英語名です。
設計言語もアクティブな言語も日本語です。
![021.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/d838d041-94f9-10bf-1240-5437f3ca9919.png)

「プロジェクト」⇒「言語」⇒「言語を定義」を選択します。
![022.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/5370145a-3b15-1b95-f75a-74d188f88d32.png)

プロジェクト言語に「英語」を追加してOK。
![023.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/3d828bbf-b6b1-2365-d6ee-350250be7162.png)

OK。
![024.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/e252f34e-0e09-9b17-da67-9782f07682f6.png)

「Business View」をクリックしてから、「プロジェクト」⇒「言語」⇒「変換ファイルをエクスポート」を選択します。
![025.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/444ea080-7bed-0ab0-3b22-0b2f5cf62c56.png)

エクスポートする言語は「英語」で、下記のように「選択したオブジェクト」と「子を含める」をチェックし、エクスポート先ファイルを指定してOK。
![026.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/e198d1b1-5f83-3634-0afd-b4da727effbc.png)

OK。
![027.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/d9ed890a-8f52-3fb4-5509-a09a96c336a0.png)

メモ帳で開くとこんな内容です。
![028.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/2f371ab4-b8d3-89af-427c-0121645bf165.png)

新規にExcelを開き、以下のような表を作成します。
A列は先ほどのエクスポートしたデータそのままで、B列は日本語名称で、B1には「ja」と記載します。
![029.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/80400c0d-b897-fd57-2d50-931d96e6cf66.png)

このファイルをExcelのメニューから保存して下さい。
保存の際に、タイプを「Unicode Text」に指定してください。
![030.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/a29ea1d9-a09a-f280-f6b8-c171557890a3.png)

Framework Managerで、「Business View」をクリックしてから、「プロジェクト」⇒「言語」⇒「変換ファイルをインポート」を選択します。
![031.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/3a79fbfd-380d-8ccb-e288-39805d8f54d6.png)

先ほどの英語・日本語表記のファイルを指定し、変換前言語：英語、変換後言語：日本語とし、「選択したオブジェクト」と「子を含める」をチェックしOK。
![032.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/ee2cb173-d6f5-e750-6575-cef0f5d26702.png)

OK。
![033.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/b774f40f-d126-0243-fd34-e7a4417e9889.png)

このように「Business View」のオブジェクトは日本語名に変換され、「Database View」は英語名のまま維持されます。
![034.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/92111578-0e42-6465-4a39-004878d0ae8e.png)

ご活用下さい。
AndroidStudioのログの出力行数を増やす方法

AndroidStudioのLogcat上に長い文字列をログ出力すると一定位置で見切れてしまうため、
どうにかならないか調査し対応しました。
自分が忘れないようにメモとして残しておきたいと思います。

#やり方
###①AndroidStudioがインストールされているフォルダを開く。
###②/bin/<b>idea.properties</b>をテキストエディタ等で開く。
###③<b>idea.cycle.buffer.size</b>を好きな値に書き換える

※デフォルトでは以下のように1024kbで設定されています。

```text:bin/idea.properties
#---------------------------------------------------------------------
# This option controls console cyclic buffer: keeps the console output size not higher than the specified buffer size (Kb).
# Older lines are deleted. In order to disable cycle buffer use idea.cycle.buffer.size=disabled
#---------------------------------------------------------------------
idea.cycle.buffer.size=1024

```

###④AndroidStudioを再起動する


#最後に
これだけです。
デフォルトだとあまり長いログは表示出来ないので、困っている方は参考にしていただければ。
AWS Route53のドメインをFirebase Hostingのカスタムドメインに割り当てる

# はじめに
Firebase Hostingいいですよね。

今回は、FirebaseHostingは通常
`[project_id].firebaseapp.com` という形のドメインにてホストされるのですが、
今回は顧客に提供する環境をFirebaseHostingでホストするため、
既に取得済みのAWS Route53で管理しているドメインのサブドメインを
FirebaseHostingに割り当てることにしました。

# Firebase側の設定
最初にFirebase側の設定を行います。

- 前提
    - Firebaseにてプロジェクトが作成済みであること
    - FirebaseHostingに何らかの静的ファイルがDeploy済みであること

まずはFirebaseのコンソールへアクセスし、Hostingのダッシュボードを開きます。

ダッシュボード内の `ドメイン` 部分に `ドメインを接続` というボタンがあるのでクリックします。
<img width="400" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/167177/052cbee4-27ec-22d1-2df3-282386a468b8.png">


すると、 `ドメインを接続` というウィンドウが表示されますので、今回割り当てる予定のドメインまたはサブドメインを入力します。
<img width="400" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/167177/1e2f37eb-2139-3696-3078-661ec933a433.png">


そのまま `次へ` を押すと、 `所有権の確認` のステップに進みます。

そこに表示されている `google-site-verification=` からなる 文字列をコピーします。
<img width="400" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/167177/cda049b9-55c9-329f-6e00-4e11d4a80f85.png">


またあとで使うので画面はそのままにし、以下手順へ進みます。

# AWS側の設定
次にAWS側の設定に移ります。

AWSのRoute53へアクセスし、該当のドメインの設定を開きます。

設定画面内の `Create Record Set' をクリックすると、画面右側に `Create Record Set` の入力画面が出てきます。

そこで、以下のように設定を入力します。

- Name
    - 空
- Type
    - TXT - TEXT
- TTL
    - ひとまずデフォルト値
- Value
    - 先程コピーした `google-site-verification=` からなる 文字列をダブルクォート括りで入力

<img width="300" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/167177/70fa110f-7678-8592-3053-ad0e6b5c01bd.png">


上記の入力が完了したら、 `Create` をクリックします。

すると、DNSのTXTレコードが追加されます。

またあとで使うので画面はそのままにし、以下手順へ進みます。

# 再びFirebaseへ戻る
先程の `所有権の確認` 画面が開いているかと思いますので、
`確認` ボタンをクリックします。

問題なければ、`Aレコードの設定` が表示されるかと思います。
IPアドレスが表示されているかと思いますので、
画面をそのままにし次の手順へ進みます。

`所有権の確認` でエラーになる場合は、TXTレコードの設定反映に時間が掛かっている可能性があるので、
少し待ってからもう一度試してみて下さい。

# またAWSへ戻る
再度AWS Route53の画面に戻り、もう一度 `Create Record Set` をクリックします。

次は以下の通りに入力して下さい。

- Name
    - 今回割り当てるサブドメイン
- Type
    - A - IPv4 address
- TTL
    - ひとまずデフォルト値
- Value
    - Firebaseで表示されたIPアドレスを改行区切りで入力

<img width="300" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/167177/be936b71-1477-69bf-b8b0-75c948ae5ff3.png">


これが入力できたら `Create` ボタンを押します。

# 作業完了
ここまでの作業でAWS Route53とFirebase Hostingのドメイン割り当てが完了です。

割り当てたドメインにアクセスすると、FirebaseHostingでホストしているファイルにアクセスできると思います。

なお、最初はHTTPSでの接続でエラーが出るかと思いますが、
私の環境では1時間程度で反映されて問題なくアクセスできるようになりました。

# 参考
[公式リファレンス](https://firebase.google.com/docs/hosting/custom-domain?hl=ja)
サンタさんも入れないくらいPasswordを堅固に暗号化（所要時間3分）

# springframework.securityを使って簡単にPasswordを暗号化（所要時間3分）
もうすぐクリスマスですね💫
サンタさんがあなたのお家にやって来る季節でもあります😩💦
でも、、サンタさん以外が侵入して来たら困りますよね➰
戸締まりはしっかりしないといけないですよ。

そう。情報もね。

# 1. springframework.securityを使って簡単にPasswordを暗号化説明
そんな時におすすめなのは**springframework.security**を使ってAES256で暗号化する方法です **！！！**
今回はJava8にて実装します。（メリクリ⛄）

```tex
そもそもAES256とは...

AES256
別名：256ビットAES，AES-256ビット，AES-256bit，256bitAES
AES256とは、AES（Advanced Encryption Standard）と呼ばれる暗号化方式のうち、256ビット長の暗号鍵を使用する方式のことである。
AESは2000年に、それまでの標準的な暗号化方式であったDES（Data Encryption Standard）に替わる新たな暗号化方式として、
米国の国立標準技術研究所（NIST）によって米国標準規格として導入された。
共通鍵暗号方式で、使用する暗号鍵が128ビット、192ビット、256ビットの3種類ある。
このうち最長の256ビット暗号鍵を使用するAES256は、2013年現在、最も堅固な暗号化方式の一つと言われている。
```
これさえ使えば破られることのない頑丈な暗号化も夢ではないという訳です。
早速使い方のご紹介！！！

# 2. 暗号化・復号手順
JavaのSpringプロジェクト立ち上げる **！！！**

`public String encryptText(String secret, String salt, String plainText) {
        TextEncryptor encrypt = Encryptors.text(secret, salt);
        return encrypt.encrypt(plainText);
    }`

`    public String decryptText(String secret, String salt, String cipherText) {
        TextEncryptor decrypt = Encryptors.text(secret, salt);
        return decrypt.decrypt(cipherText);
    }`

たったこれだけで**最も堅固な暗号化**を実装出来ます♪　🎅 ＜これじゃ俺も入れないよ〜

- 説明
    - SaltとSecretは暗号化と復号する際に同じものを使います。


# 3. AES-256の規制対処法
先程のコードを使うとExceptionで落ちてしまいます。
Javaが標準で制約しているbit数が128bitらしい。
なので、SpringSecurityにてAESの鍵長256ビットを扱うためには、強度が無制限のJCE管轄ポリシーファイルを適用する必要がある。US_export_policy.jar」と「local_policy.jar」をJava.homeにて上書きしなければならないらしいです。
コチラの記事を参考にどうぞ[JavaでAES256を使用できるようにする](http://qiita.com/mizuki_takahashi/items/cc26a7fd51aa04396e92)


# 4. おしまいに
最近実装されたJava9にてポリシーファイルの設定をしなくてよくなったとかなんとか。
16進数のカラーコードをrgba変換する関数

# 概要
透明度のある背景色を動的に設定したいなと思い関数を作成しました。
経緯としては、BEMでいうModifierで色の属性をわけるような対応でもいいのですが、微妙な透明度や色の違いによりクラスが増えてきたため動的に設定することにしました。

## 引数について
`$color_code/color_code`は、#から始まる16進数
`$alpha/alpha`は、デフォルト値を1とした透明度

## PHP
カラーコードを定数などで共通管理しておけば以外と管理しやすいです。

```php:xxx.php
function getConversionRgba($color_code, $alpha = 1) {
    $color_code = preg_replace('/#/', '', $color_code);

    $rgba_code['red']   = hexdec(substr($color_code, 0, 2));
    $rgba_code['green'] = hexdec(substr($color_code, 2, 2));
    $rgba_code['blue']  = hexdec(substr($color_code, 4, 2));
    $rgba_code['alpha'] = $alpha;
    $rgba_code['full']  = implode(',', $rgba_code);
    
    return $rgba_code;
}
```

## Javascript
こっちはおまけみたいな感じです。

```js:xxx.js
function getConversionRgba(color_code, alpha = 1) {
    var rgba_code = [];

    rgba_code['red']   = parseInt(color_code.substring(1,3), 16);
    rgba_code['green'] = parseInt(color_code.substring(3,5), 16);
    rgba_code['blue']  = parseInt(color_code.substring(5,7), 16);
    rgba_code['alpha'] = alpha;
    rgba_code['full']  = Object.values(rgba_code).join(',');
    
    return rgba_code;
}
```
2018年12月31日問題

2014年ごろに一度話題になったやつですが、最近また立て続けにその話題を耳にしたのと丁度年の瀬ということで今年も掘り返してみました。

[DateFormatter](https://developer.apple.com/documentation/foundation/dateformatter)のdateFormatを```YYYY-MM-dd```としていると、2017年12月31日に今日の日付が"2018-12-31"と出力されます。

これ自体はSwift関係なくISOの仕様です。先々週Rebuild.fmを聞いていたところ、以前TwitterのAndroidアプリがこの設定ミスによって5時間使えなくなっていた話をしていました。仕様なので当然ですが2017年も健在です。

- [Twitter
Twitter kicks Android app users out for five hours due to 2015 date bug](https://www.theguardian.com/technology/2014/dec/29/twitter-2015-date-bug)

```swift
let datecomponens = DateComponents(year: 2017, month: 12, day: 31)
let calendar = Calendar.current
let date = calendar.date(from: datecomponens)

let f = DateFormatter()
f.locale = Locale(identifier: "en_US_POSIX")
f.dateFormat = "YYYY-MM-dd"

f.string(from: date!) // "2018-12-31"

```

とかなんとか試していたら、最近こちらのブログでも取り上げられていました。

- [Why Why Why Why Your iOS App Might Act Weird around New Year's](https://app-o-mat.com/post/why-why-why-why)

理由としては、「```YYYY```は何年の週であるかを表す(Week of Year)」という仕様があり、日曜始まりのLocaleでは2017年12月31日は2018年の最初の週にあたるため、2018と表示されてしまいます。正しく日付を扱うには小文字の```yyyy```を使う必要があります。

Appleのドキュメントに注意が記載されています。

```
It uses yyyy to specify the year component. A common mistake is to use YYYY. 
yyyy specifies the calendar year whereas YYYY specifies the year (of “Week of Year”), used in the ISO year-week calendar. 
In most cases, yyyy and YYYY yield the same number, however they may be different. 
Typically you should use the calendar year.
```

-　[Data Formatting Guide　- Apple Developers](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/DataFormatting/Articles/dfDateFormatting10_4.html)


ということは大丈夫な年もあるということなのですが、実は去年の2016年は正しく出力されます。

```swift
let datecomponens = DateComponents(year: 2016, month: 12, day: 31)
let calendar = Calendar.current
let date = calendar.date(from: datecomponens)

let f = DateFormatter()
f.locale = Locale(identifier: "en_US_POSIX")
f.dateFormat = "YYYY-MM-dd"

f.string(from: date!) // "2016-12-31"

```

というわけで、去年このフォーマットにして正しく動いていた方は注意が必要かもしれません。
そして以前話題になった時に詳細をしっかり書いている記事があったので、実はこの記事はいらなかったのかもしれない。

- [日付フォーマット yyyy と YYYY の違い](http://d.hatena.ne.jp/nakamura001/20150102/1420213850)

年末でご多忙のことの存じます。皆様どうぞお体の方もご自愛くださいませ。

# 参考資料
- [Rebuild: 196: Fashionable Udon (higepon)](http://rebuild.fm/196/)
- [Why Why Why Why Your iOS App Might Act Weird around New Year's](https://app-o-mat.com/post/why-why-why-why)
-　[Data Formatting Guide　- Apple Developers](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/DataFormatting/Articles/dfDateFormatting10_4.html)
- [Twitter
Twitter kicks Android app users out for five hours due to 2015 date bug](https://www.theguardian.com/technology/2014/dec/29/twitter-2015-date-bug)
- [日付フォーマット yyyy と YYYY の違い](http://d.hatena.ne.jp/nakamura001/20150102/1420213850)
キミニキメタ改

#会議での発言などで使えそうなアプリ作成

アプリ名「キミニキメタ改」

アプリケーション目的：
　・社内でシャイな人にも発言をしてもらうため、アプリに発言者を決めてもらう。

アプリ作成のヒント：
　・Swift初心者向けの書籍を読んで、コードなどを理解しながら作成
　・指名された人の写真を追加、変更するだけでも、コードの意味理解が深まるかなと
　・iOS端末が変わってもレイアウトを維持するのが大変だった、、、
　・そもそもアプリ作成のアイデアを膨らませて実用的にすることにも注力しないと、
　　なかなか良いものができないのではと実感
　・オープニングの画面や、音楽をつけるだけでも、かなり感じが変わることを実感
　　→そのため、イラストレーターでオープニング画面をデザインしてみるなど、
　　　結構楽しかったです！

アプリの動作
　・オープニング画面が表示 → スタートボタンを押す
　・画面が次の画面に行き、音楽が流れ始める
　・ボタンを押すと、ランダムに画像を表示してくれる
　　→前の人は出ないように設定

苦労した点
　・まずコードを理解するところから、、、素人丸出しですみません、、、
　・画面遷移の際に音楽を鳴らす方法がわからず、Webでの事例を探しました
　・本のレッスンを組み合わせるだけでも、コードを記載する位置などを模索が必要で、
　　アルゴリズムの必要性を実感、、、
　・なぜかコードがあっているはずなのにエラーが出るときは、再度同じように書いてみると、
　　うまくいくことがあって謎でした
　・ボタンを押して画像を出すだけではなくて、アニメーションをもっと多用して、
　　動作に期待感が持てるようにできればな〜と模索中です。

```swift

//
//  ViewController.swift
//  キミニキメタ改
//
//  Created by admin on 2017/12/11.
//  Copyright © 2017年 tooyamamura. All rights reserved.
//

import UIKit
import AVFoundation


class ViewController: UIViewController {
    var player: AVAudioPlayer?
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        if let sound = NSDataAsset(name: "backmusic") {
            player = try? AVAudioPlayer(data: sound.data)
            player?.play() // → これで音が鳴る
        }
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //社員の顔写真が表示される領域
    @IBOutlet weak var peopleimageView: UIImageView!
    //顔写真とリンクして名前が表示されるラベル領域
    @IBOutlet weak var peopleLabel: UILabel!
    
    //顔写真（数字）
    var faceNumber = 0
    
    
    //ボタンを押してルーレットスタート
    @IBAction func whotalks(_ sender: Any) {
        
        //新しい顔写真の結果を一時的に格納する変数を設ける
        var newfaceNumber = 0
        
        //ランダムに結果を出すが、前回の結果と異なる場合のみ採用
        //repeatは繰り返しを意味する
        repeat{
            //0,1,2の数値をランダムに算出(乱数)
            //arc4dandom_uniform()の戻り値はUInt32だがSwiftの標準的な整数型Intにキャスト（変換）する
            newfaceNumber = Int(arc4random_uniform(4))
            
            //前回と同じ結果の時は、再度、ランダムに数値を出す
            //異なる結果のときは、repeatを抜ける
        }while faceNumber == newfaceNumber
        
        ///新しい顔写真の結果を格納
        faceNumber = newfaceNumber
        
        
        //本社さん
        if faceNumber == 0 {
            peopleLabel.text = "本社さんお願いします！ "
            peopleimageView.image = UIImage(named:"honsha")
            
            
        }else if faceNumber == 1 {
            //AA支店さん
            peopleLabel.text = "AA支店お願いします！"
            peopleimageView.image = UIImage(named:"AA")
            
            
        }else if faceNumber == 2 {
            //BB支店さん
            peopleLabel.text = "BB支店さんお願いします！"
            peopleimageView.image = UIImage(named:"BB")
            
        }else if faceNumber == 3 {
            //CC支店さん
            peopleLabel.text = "CC支店さんお願いします！"
            peopleimageView.image = UIImage(named:"CC")    
        }
        
    }
}
ノンデザイナーがCSS Grid Layoutで遊ぶ

こんにちは、愛と有機だけが友達のアソパソマソです。
こう見えて新卒エソジニアです。よろしくお願いします。

#はじめに

この記事は[LIFULL Advent Calendar 2017](https://qiita.com/advent-calendar/2017/lifull2) その２、22日目の記事です。


最近プライベートでCSSを触ることがあり、Grid Layoutを利用したのが始まりでした。

# Grid Layoutとは

僕がGrid Layoutを学習するときに参考になった記事です。

[CSS Grid Layout](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)
基本的な使い方はここに載っております。

[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)
こちらでは用語の説明、使い方などが詳しく説明されております。

#プロパティの紹介
基本的にプロパティは

* grid-row
* grid-column
* grid-gap
* grid-template

この4つの関係性を覚えておけばある程度のことはできます。

grid-template-rows,grid-template-columns...トラックの大きさを指定する。
grid-row,grid-column...トラック内のアイテムのサイズを指定する。
grid-gap...セル同士の空白を指定する。

##grid-template-rows,grid-template-columns

トラックの縦横のサイズを決めるプロパティです。

```
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
```
この指定だと50px間隔で縦横のラインが３本ずつ定義されます。
このラインに従ってアイテムを配置することができます。

##grid-area
grid-row,grid-columnを合わせたものです。
上下左右の境界はこのプロパティ1つで決めることができます。

```
/*
 grid-area: row-start / col-start / row-end / col-end;
*/

 grid-area: 1 / 2 / 3 / 4;
```

細分化すると

```
  grid-column: 2 / 4;
  grid-row: 1 / 3;
```

```
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
```

のようにわけることもできます。

<img width="984" alt="スクリーンショット 2017-12-22 15.29.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/215359/3dda3048-35da-4d94-8f7a-b99fc6ffabe6.png">


デモ:https://codepen.io/Ltakemoxu/pen/GyjOKj


## grid-gap

アイテム間の行列の余白を決めることができます。

```
/*
  grid-gap:grid-row-gap grid-column-gap;
*/

  grid-gap:10px 20px;
```

<img width="977" alt="スクリーンショット 2017-12-22 15.39.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/215359/a54fc33a-03d1-6be0-5b50-9098fd6e2a7e.png">
デモ: https://codepen.io/Ltakemoxu/pen/opzoXg

# 最後に

この短い記事に付き合ってくださりありがとうございます。
感謝の気持ちを込めまして、僕から早めのクリスマスプレゼントです。
<img width="973" alt="スクリーンショット 2017-12-22 13.23.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/215359/950857ee-174e-39f3-4e4e-03f28fc19ed7.png">
デモ:https://codepen.io/Ltakemoxu/pen/jYMLZE
（grid-areaは本来このような用途ではないので良い子は真似しないでね。）

またどこかでお会いしましょう。
zip暗号化されたファイルだけを一箇所にまとめる

人からメール受信した添付ファイルなどで暗号化ZIPファイルがよく使われていると思います。
しかながら、時間が経つとそのパスワードとの関連性が分からなくなって、いつまにか開かずの文書と化してしまうこともよくあると思います。
そこで、ここでは、暗号化されたzipファイルのみを選び出してどこか一箇所のフォルダーにまとめることを考えました。

想定OS: Windows
使用言語: Groovyコマンドラインで使用
使い方: 対象directory上で下記groovyを動かすと、スクリーン出力でバッチのテキストを出力するので、そのバッチを目視確認した後バッチを動かします。

一つのPCで何度もまめに動かすものではないです。
暗号化ファイルを見つけ出す市販ソフトもありますが、ただそれだけなら買うほどでもないかと手作りしました。

コードはこちら
https://gist.github.com/nemo-kaz/6990e0fd2f8e9410a823fd5ff50796db
gitlab-ce(v10.2.5)で2文字以下の検索結果がおかしい件

# 背景
普通にsearchを利用するんですが、2文字以下の場合issueの検索結果がおかしい。
英語/日本語問わず、2文字以下の場合の結果でissueだけ全件でてきてしまう。3文字以上だと問題なく動作するのに、何故・・・

英語の場合、2文字以下になると検索結果が膨大になってしまうのはわかりますが、日本語の場合、2文字の検索はよくある気がします。

日本語で書かれたissueを検索する場合、不便なので少し調べてみました。

# 関連する部分を探す
探していると以下のソースに最終的にぶち当たりました。
`lib/gitlab/sql/pattern.rb`

```ruby:lib/gitlab/sql/pattern.rb
module Gitlab
  module SQL
    module Pattern
      extend ActiveSupport::Concern

      MIN_CHARS_FOR_PARTIAL_MATCHING = 3
      REGEX_QUOTED_WORD = /(?<=\A| )"[^"]+"(?= |\z)/

...

        def partial_matching?(query)
          query.length >= MIN_CHARS_FOR_PARTIAL_MATCHING
        end
...
```

`MIN_CHARS_FOR_PARTIAL_MATCHING`まさにこれです。
3文字以上じゃないと動作しないようになっていました。

`MIN_CHARS_FOR_PARTIAL_MATCHING`を1に変更したら1文字でも検索が動くようになりましたがどうなんでしょうか・・・

## 追記
やはり、上記の修正を行うとパフォーマンスに影響があるようです。
規模が大きい場合は非推奨とのことでした。
Nimクロスコンパイルのやり方(Linux->Windows版)


## すいません。ネタぱくってます

すいません。なぞり記事となります。
前から気になっていたNimのLinuxでのWindows用バイナリのクロスコンパイル方法を調べていたのですが、
@hatchetさんの書かれた記事[Nimクロスコンパイルのやり方](https://qiita.com/hatchet/items/24569bb852fef41b8a62)を参考に調べてみた結果となります。

環境は、CentOS7です。

#### コンパイラ入れます

Windows用クロスコンパイラ(MinGW)を導入します。

```shell-session
$ sudo yum install mingw64-binutils mingw64-gcc mingw64-gcc-c++ 
```

#### やる気のないnimファイルを作成

```nim:hello.nim
echo "hello nim"
```

#### コンパイラコンフィグファイルを作成

```nim:hello.nim.cfg
# mingw用
amd64.windows.gcc.path = "/usr/bin/"
amd64.windows.gcc.exe = "x86_64-w64-mingw32-gcc"
amd64.windows.gcc.linkerexe = "x86_64-w64-mingw32-gcc"
amd64.windows.gcc.options.linker = ""                      # <--- これを空にしないとリンカエラーが出てしまいました

# linux用(なぜか入れないと動きませんでした)
amd64.linux.gcc.path = "/usr/bin/"
amd64.linux.gcc.exe = "gcc"
amd64.linux.gcc.linkerexe = "gcc"
```

####　おもむろにコンパイル

* Windows向けコンパイル

```shell-session
$ nim -c --os:windows hello.nim
```

* Linux向けコンパイル

```shell-session
$ nim -c --os:linux hello.nim
```

#### コンパイル結果

```shell-session
$ ls -la      
合計 452K
drwxr-xr-x  3 xxxx xxxx  140 12月 22 18:11 .
drwxrwxrwt 16 root root  800 12月 22 16:31 ..
-rwxr-xr-x  1 xxxx xxxx 181K 12月 22 18:11 hello               <--- Linux用バイナリ
-rwxr-xr-x  1 xxxx xxxx 260K 12月 22 18:11 hello.exe           <--- Windows用バイナリ
-rw-r--r--  1 xxxx xxxx   23 12月 22 16:32 hello.nim           
-rw-r--r--  1 xxxx xxxx  279 12月 22 18:01 hello.nim.cfg
drwxr-xr-x  2 xxxx xxxx  160 12月 22 18:11 nimcache
```
Jupyter Notebook 上で rails c を動かす

# はじめに

[Jupyter Notebook](http://jupyter.org) では Python 以外の言語も動かせるらしいですね。Ruby も動かせるらしいので、せっかくなら Rails アプリケーションの `rails c` を Jupyter Notebook 上で実行できないか調べてみました。

# バージョン情報

```console
$ sw_vers # macOS High Sierra
ProductName:	Mac OS X
ProductVersion:	10.13.1
BuildVersion:	17B1003

$ python --version
Python 3.6.4

$ ruby -v
ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-darwin17]

$ bin/rails -v
Rails 5.1.4
```

# 手順

## Jupyter Notebook のインストール

```console
$ pip install jupyter
$ jupyter --version
4.4.0
```

## iruby のインストール

Jupyter Notebook 用の Ruby カーネルである [SciRuby/iruby](https://github.com/SciRuby/iruby) をインストールします。なお README.md のインストール方法では `ffi-rzmq` ではなく `cztop` をインストールしていますが、これだと実行時にエラーになったため、代わりに `ffi-rzmq` をインストールしました。

```
$ brew install zeromq
$ brew install czmq --HEAD
$ gem install ffi-rzmq iruby
$ iruby register --force
```

## Rails アプリケーションでの準備

Jupyter Notebook 上で Rails コンソールを起動したい Rails アプリケーションに、次の Rake タスクを追加します。

```lib/tasks/jupyter.rake
namespace :jupyter do
  task :notebook do
    env = { 'RUBYLIB' => [*$LOAD_PATH, Rails.root].join(':') }
    Process.exec(env, 'jupyter', 'notebook')
  end
end
```

また、Gemfile にも `ffi-rzmq` と `iruby` を追加します。

```rb:Gemfile
group :development do
  # 略
  gem 'ffi-rzmq', '2.0.5'
  gem 'iruby', '0.3'
end
```

## Jupyter Notebook の起動

追加した Rake タスクを実行することで、必要な環境変数がセットアップされた状態で Jupyter Notebook が起動します。

```shell-session
$ bin/rails jupyter:notebook
```

## Jupyter Notebook で Rails を読み込む

Notebook を作成してみます。iruby をインストールしたおかげで Ruby 2.4.3 が選択できるようになっています。

![スクリーンショット 2017-12-22 18.20.42.png](https://qiita-image-store.s3.amazonaws.com/0/6697/5254ac04-33cd-ffde-034b-e23f312deb9b.png)

Notebook を作成したら、まず次のコードを実行して Rails の環境を読み込みます。

```rb
# Rails アプリケーションのルートディレクトリが ~/workspace/my_rails_app だとする。
rails_root = File.join(ENV['HOME'], 'workspace/my_rails_app')
require(File.join(rails_root, 'config/boot'))
APP_PATH = File.join(rails_root, 'config/application')
require(APP_PATH)
Rails.application.require_environment!
```

![スクリーンショット 2017-12-22 18.21.40.png](https://qiita-image-store.s3.amazonaws.com/0/6697/46ed91df-0b3b-b277-9e50-1e6f5f5f0ace.png)

動いた！ ＼＼\\٩( 'ω' )و//／／

# 参考

* [SciRuby/iruby » Issue #52 » Feature request: `rails c`](https://github.com/SciRuby/iruby/issues/52)
* [Railsエンジニアに役立つJupyter NotebookとiRuby](http://techlife.cookpad.com/entry/201510-jupyter-and-rails)
3人できるユーザビリティテスト


<p>
初めまして。<br/><br/>
今回は、デザイナーという枠を超えて、モノづくりに関わる人全てに必要な「ユーザー視点」に関するご紹介をしたいと思います。<br/>
どんな製品でも、ユーザーであれば購入時に「使い勝手」や「見た目」で購入の有無を決定するでしょう。<br/>
そんなの当たり前と言われるかもしれませんが、いざ生産者の立場になると、「ユーザー視点の重要性は分かるが、どう調査したらいいかわからない。」と言う悩みから、なかなか調査まで踏み込めない。<br/><br/>
実は、最小限の人数と最小限のリスクでできる調査があるのです。<br/><br/>
それが今回ご紹介する「3人でできるセルフユーザビリティテスト（以下「SUT」）」。<br/>
この手法を教えてくださった
<a href="https://2017.uxdaystokyo.com/">UX DAYS TOKYO</a>主催「<a href="https://uxdt.connpass.com/event/67940/">セルフユーザビリティテスト検定講座</a>」の内容を紹介します。
</p>
![uxtokyo_ttl.png](https://qiita-image-store.s3.amazonaws.com/0/215606/adc5c7f2-e6ee-78a8-036a-c2d73f7ed68c.png)

#こんな方におすすめ
<ul>
<li>今までなんとなく自己流で操作性のテストを行っていた</li>
<li>企業で実際にどういうUTが行われているかを知りたい</li>
<li>UIやUXについて学んでみたい</li>
<li>サイトの設計にいつも悩む</li>
<li>上司の「なんとなくこうした方が使いやすいのでは？」という意見に振り回されることが多い</li>
<li>サイトを見る目を伸ばしたい</li>
</ul>

#実際にやってみましょう

##メンバー数
３名（最低人数)

##それぞれの役割
<ol>
<li>被験者：テストを受ける人</li>
<li>記録者：テストを記録する人</li>
<li>モデレーター：テストの進行役および観察する人</li>
</ol>

####1.被験者：ユーザーの役になりきり、操作をする人（※開発に関わっている人はNG）
<ul>
<li>開発に関わっている人は被験者にはなれない。</li>
<li>気を使わないで思ったことを言葉にして伝える。</li>
<li>行動や次に予測されるアクションを言葉に出して伝える。</li>
<li>気を遣ってコンバージョンしようとするけど、しなくていい。</li>
<li>離脱してもいいが、離脱した理由を述べる事が必要。</li>
</ul>

####2.記録者：被験者の操作中言動や感情変化、行動を記録する。
<ul style="margin-top: -1.3em;">
<li>全部かけばいいわけではない。ポイントだけ押さえればいい（操作が止まったところ、や戻ったりしたところなど）</li>
</ul>

####3.モデレーター：被験者の操作中言動や感情変化、行動を記録する。
<ul style="margin-top: -1.3em;">
<li>被験者から職業/年齢/プライベート..etc. をヒアリングして被験者のざっくりとした背景を知る。</li>
<li>ネットショッピングやっているか、やっているなら例えばどこのネットショッピングやっているか、などヒアリングしてある程度のネットショッピング慣れを掴む。</li>
</ul>

##全体の流れ
<ol>
<li>記録者がテスト対象ページのトップページを提示し、被験者にこのページを利用してどんなことをやってほしいか目的を伝える。</li>
<li>被験者はその目的を理解の上、トップページから操作を始める。</li>
<li>被験者が目的が果たせた段階でテストは終了。</li>
</ol>

##それぞれの役割
###モデレーター
<ul>
<li>被験者が操作しているところをカメラで撮影する。</li>
<li>モデレーターは、ユーザーに精神的なプレッシャーをかけることや操作を教える行為は厳禁。</li>
<li>モデレーターはユーザーの操作や感情的行為についていちいち聞く。</li>
<li>モデレーターは、被験者がクリックし終えたら、考えていたものが表示されたかを質問する。</li>
</ul>
###記録者
<ul>
<li>記録者は、手が止まったところで何を考えているのか被験者に質問する。</li>
<li>記録者は、被験者の行動や、したかったと思われる内容をメモする。</li>
</ul>

##たった5回のテストで課題抽出できます
「最低3名でテストを行えたとしても、何回行えば効果が出るの？」
という疑問が残りますよね。
なんと、5回である程度課題抽出できるのだそう。。驚きですね。

##ポイント
<ul>
<li>UTは単独（１人）でも行えます。（その場合、斜め上からのカメラと録音が必要）</li>
<li>被験者が初めて操作をした時、どちらをクリックするか注目する。</li>
<li>テスト中に被験者の手が止まった時に、モデレーターが「今何を考えていますか？」などヒアリングすること。</li>
<li>被験者は、操作時に感じたことを事細かに声に出して周りに伝える。</li>
</ul>

#やってみると、ここが発見できます
<ul>
<li>ユーザーがほしいと思っている機能を知ることできる。</li>
<li>チーム内の意識統一ができる。</li>
<li>UIの操作性を検証をすることができる。</li>
<li>ユーザーが思ったことや感じている心（インサイト）を全部知ることができる。</li>
<li>UTテストは被験者がいれば一人でもできる。</li>
<li>ウェブサイトの操作性を検証する</li>
<li>ナビゲーションAよりナビゲーションBがいいかどうかわかる。</li>
</ul>
#やり続けることが大切
<ul>
<li>やみくもにやればいいわけではありません。結果から学び、やる意味を掴みましょう。</li>
<li>とにかく場数を増やしてからだで覚えましょう。やり方のコツがわかってきます。</li>
</ul>
#最後に
いかがでしたでしょうか。
人員コストや時間を削減できる上に、被験者は5名いれば課題抽出できる。
短期的にPDCAを回す際にはまさに頼りになる手法です。

#参考・協力
こちらは、<a href="https://2017.uxdaystokyo.com/">UX DAYS TOKYO</a>さん主催の「<a href="https://uxdt.connpass.com/">セルフユーザビリティテスト検定講座</a>」での情報を元に紹介させて頂きました。