OmniAICreator/Qiita-1.07M huggingface dataset:
icomoonでオリジナルのアイコンフォントセットを作る

fontawesomeなどのアイコンフォントは便利ですが、足りないアイコンがあることもしばしば。そんな時に便利なのがIcoMoonです。
icomoonを使うと、必要なアイコンをセレクトしてオリジナルのフォントを作成できるので、ファイルサイズが大きくなりすぎることもありません。
https://icomoon.io

# IcoMoonの一番簡単な使い方
1. トップページ右上の「IcoMoon App」を押します。
2. searchで使いたいフォントを探して選ぶか、Add Icons From Libraryから好きなアイコンセットを追加します。
3. 右下の「Generate Font」を押します。
4. 「Download」でオリジナルのフォントセットをダウンロード。これだけ！

# IcoMoonの使い方・発展編
## IcoMoon内にないアイコンを追加する
IcoMoon内にはないアイコンも、Selectionの左上の「Import」を押して、SVGファイルを選んでインポートすれば使えます。
### 他のアイコンフォントと組み合わせやすいアイコン素材サイト
icomoonに有名なアイコンフォントのセットはたいてい入っていますが、それでも足りない時にはフリーのアイコン素材をSVGでダウンロードし、それをicomoonにインポートして使うことができます。

**icoon-mono**
http://icooon-mono.com
6000種類以上のアイコンがあります。
日本の方が作ってるみたいで、温泉や和食など日本特有のものもかなりあります。

**icon-rainbow**
http://icon-rainbow.com
こちらも日本の方が作ってるみたいで、アイコンのセンスが日本人の感覚に合います。

**iconmonstr**
https://iconmonstr.com
4000種類以上のアイコンがあります。海外ですが、ポップなテイストで使いやすいです。

**シルエットAC**
https://www.silhouette-ac.com/
とにかく色々な種類のシルエットがあるので、特殊なものもかなり見つかります。
色々なクリエイターの作品が含まれているので、テイストがばらつく可能性がある点は要注意です。

## アイコンの位置やサイズを調整する
様々な種類のアイコンフォントを使うと、枠に対してのアイコンのサイズが小さかったり大きかったりすることがあります。
1. メニューからエンピツマークを選択・編集したいアイコンを選ぶ
2. アイコンの編集ウインドウが開き、編集できます。
￼
左から

- Rotate/Mirror（回転・反転）
- Move（移動）
- Scale（拡大縮小）
- Canvas/Alignment（キャンバス幅の変更/配置）
- Color（色：SVGをインポートした場合に元SVGに色がついている場合、色を抜くことができる）

## アイコンのクラス名を変更する
アイコンの位置やサイズの変更の際と同じ、アイコン編集画面を出すと、「Names」という項目があります。ここにある名前が、cssでアイコンフォントを指定する時のクラス名になります。
「Generate Font」画面で各アイコンの右に表示されている名前も同様です。
クラス名は複数指定することも可能です。

# icomoonでフォントを作った時に注意したい点
ダウンロードしたフォルダ内にある、selection.jsonファイルは大事に取っておきましょう。
後々、作ったアイコンフォントの内容を変更したい場合に、IcoMoonApp側でしばらくはブラウザキャッシュでデータを取っておいてくれますが、キャッシュが消えた場合には左上メニュー>Manage Project>Import Projectでselection.jsonを読み込むと、過去のアイコンフォントセットを再編集することができます。
（これがなくて復活させようとするとすごく大変なので泣くことになります）

以上です。
pip コマンドでパッケージ名を完全一致で検索（シェルスクリプト）

こんにちは
pip コマンドで検索する際に、パッケージ名を完全一致（ただし大文字小文字を無視）で検索するようにシェルスクリプトを作ってみました。なお ```search_homebrew.sh``` の方には出力への色付けなどを追加しています（macOS を想定）。

```console
$ ./pip_search.sh gdal
using pip pip3
GDAL (2.2.3)                   - GDAL: Geospatial Data Abstraction Library
  INSTALLED: 2.2.3 (latest)
GDAL (2.2.3)                   - GDAL: Geospatial Data Abstraction Library
  INSTALLED: 2.2.3 (latest)
```

```pip_search.sh
#!/bin/sh
pips="pip pip3"
echo "using "${pips}
for x in "$@"; do
  for pip in ${pips}; do
    echo -e "$(${pip} search ${x})" "\n_" | pcregrep -i -M -o "^${x}\s[\s\S]*?^\S" | sed '$d'
  done
done
exit $?
```

```pip_search_homebrew.sh
#!/bin/bash
pips="pip2 pip3"
pipcoms=""
for pip in ${pips}; do
  which ${pip} >/dev/null
  if [ $? = 0 ]; then
    pipcoms=${pipcoms}${pip}" "
  fi
done
pips=${pipcoms}
echo "using "$'\e[34m'${pips}$'\e[0m'

for x in "$@"; do
  for pip in ${pips}; do
    echo -e "$(${pip} search ${x})" "\n_" | pcregrep -i -M -o "^${x}\s[\s\S]*?^\S" | sed '$d' | gsed -E "s/^(${x})/\o033[32m\1\o033[39m/i" | gsed -E "s/(INSTALLED)/\o033[34m\1\o033[39m/"
  done
done
exit $?
```

なお、pip コマンドで、パッケージ名を大文字小文字を無視して検索するには、```search.py``` にパッチを当てた方が良さそうです。

```
--- /usr/local/lib/python2.7/site-packages/pip/commands/search.py.orig
+++ /usr/local/lib/python2.7/site-packages/pip/commands/search.py
@@
         try:
             logger.info(line)
-            if name in installed_packages:
+            if in_case_insensitive(name, installed_packages):
                 dist = pkg_resources.get_distribution(name)
                 with indent_log():
                     latest = highest_version(hit['versions'])
@@
+def in_case_insensitive(x, list):
+    return x.lower() in [y.lower() for y in list]
```
Array反復メソッドまとめ

# なにこれ？

JavaScriptのArray反復メソッドを自分用にまとめたものです。
反復メソッドをうまく使い分けるために分類分けしました。

※筆者自身、JavaScript初心者なので間違いがあるかも。

# 注釈

2018/02/10
@raccy さんからコメント頂き、加筆修正しました。

JavaScriptにおいて…
**真の値（truthy value）**とは**Boolean**として評価される場合で**真**になるもの。
**偽の値（falsy value）**とは**Boolean**として評価される場合で**偽**になるもの。

JavaScriptは条件文や繰り返しなどの場面で、任意の型を強制的にBooleanに型変換する。

`undefined`、`null`、`false`、`+0`、`-0`、`NaN`、空の文字列（`''`）は**`false`**に、
これ以外のすべての有効な値は**`true`**に変換される。

# 基本形

一番シンプルな反復メソッド。

| メソッド名 | 戻り値 | 説明 |
|:--|:--|:--|
| forEach | なし | 配列中の要素それぞれに対してコールバック関数を呼び出す。 |

コールバック関数は以下のような引数を持つ。

```javascript:
function callback(currentValue, index, array);
```

- `currentValue`：現在処理されている配列の要素
- `index`：現在処理されている配列の要素のインデックス
- `array`：処理される配列全体

使わない引数は省略できる。

以降のメソッドは**`forEach` + α**の機能を持つ。

# 配列生成形

元の配列に反復処理を行い、新たな配列を作成する。

| メソッド名 | 戻り値 | 説明 |
|:--|:--|:--|
| filter | Array | コールバック関数が真の値を返す要素のみからなる新たな配列を返す。 |
| map | Array | 各要素にコールバック関数を適用した新たな配列を返す。 |

# 真偽値形

配列がある条件を満たすかを調べる。

| メソッド名 | 戻り値 | 説明 |
|:--|:--|:--|
| every | Bool | コールバック関数が配列内の全ての要素に対して真の値を返した場合`true`を返す。 |
| some | Bool | コールバック関数が配列内の少なくとも1つの要素に対して真の値を返した場合`true`を返す。 |

`every`の場合、偽の値が返された時点で反復を終了する。
`some`の場合、真の値が返された時点で反復を終了する。

# 走査形

配列内からある条件を満たす要素を探す。

| メソッド名 | 戻り値 | 説明 |
|:--|:--|:--|
| find | 様々 | コールバック関数が真の値を返す要素を返す。見つからない場合`undefined`を返す。 |
| findIndex | Number | コールバック関数が真の値を返す要素のインデックスを返す。見つからない場合`-1`を返す。 |

コールバック関数が真の値を返した段階で反復は打ち切られる。

# 畳み込み形

再帰というのは適した表現ではないかも。

| メソッド名 | 戻り値 | 説明 |
|:--|:--|:--|
| reduce | 様々 | 配列内の各要素に関数を適用し、1つの値を返す。 |

コールバック関数は以下のような引数を持つ。

```javascript:
function callback(accumulator, currentValue, index, array);
```
- `accumulator`：累積した処理結果

要素を使って関数を適用した結果に、
次の要素を使って関数を適用した結果に、
次の要素を使って関数を適用した結果に…
って感じです。

```javascript:具体例
const example = [1, 2, 3, 4, 5].reduce((acc, val) => {
	return acc + val;
});

console.log(example); //15
```
Pushbulletにcronで通知を送る

#PushBullet
https://www.pushbullet.com/

####Pushbulletのプッシュ通知をiPhoneで表示させるための手順
https://bohbi-log.com/app/pushbullet/
普通にログインして通知OKにしただけではiPhoneに通知が来ない。

#PushBullet-for-PHP
https://github.com/scottrobertson/PushBullet-for-PHP

## APIキーを取得
https://www.pushbullet.com/#settings/account
![image.png](https://qiita-image-store.s3.amazonaws.com/0/174634/80ac1dc3-5a60-5ebb-d076-c8d005a8c43d.png)
「Create Access Token」ボタンを押す。

表示されたキーを以下の'YOUR_API_KEY'に書く。

```PushBullet.example.php
<?php

require 'PushBullet.class.php';

try {
  #### AUTHENTICATION ####
  // Get your API key here: https://www.pushbullet.com/account
  $p = new PushBullet('YOUR_API_KEY');

  #### Pushing to multiple devices
  // Push to all of your own devices, if you set the first argument to NULL or an empty string
  $p->pushNote(NULL, 'Some title', 'Some text');

} catch (PushBulletException $e) {
  // Exception handling
  die($e->getMessage());
}

?>
```

#cronの設定
スターサーバーのライトプランなので、コントロールパネルからCRON設定。
コマンドの欄に/usr/bin/php に続けてフルパスでPHPを指定する。

```php
<?php
echo __FILE__;
?>
```

でファイルのフルパスを調べておくといい。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/174634/297cdad2-3fc6-6a5a-9a3d-07afcdb8bf27.png)

これで好きな時間に好きな通知を送れる。
ランダムなメッセージを定期的にiPhoneに表示したくて作成した。
nginx.confについて

nginxの設定ファイルnginx.confのさわりの部分をまとめました。

## nginx.confの初期状態
だいたいこんな状態になっているかと思います。

```conf:nginx.conf
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
```
### ディレクティブ
ディレクティブとはuser foo;とかevents{}とかhttp{}などのnginx.confの基本的な構成要素。
;(セミコロン)で終了ものと{}(ブロック)で囲むものがあり、
{}で囲われた箇所をコンテキストと呼び、そのブロック内のみで有効
どのブロックにも囲われていないところはmainコンテキストとして扱われる。

## user
#### nginxを起動すると以下の３つのプロセスが起動します。

- master process
- worker process
- cache manager process

その中でmaster process以外を起動するユーザを設定します。

### worker process
Nginxがシングルスレッドで動作するため、コア数に合わせて設定しておく。
autoに指定するとコア数を設定してくれる。

※おまけ

```shell:物理CPUの数を確認するコマンド
$ grep physical.id /proc/cpuinfo | sort -u | wc -l
```
![スクリーンショット 2018-02-08 0.14.32.png](https://qiita-image-store.s3.amazonaws.com/0/222267/0a7a9853-6df0-c4eb-b956-5265f45157f3.png)
このdockerコンテナ（nginx）は物理CPUが2つあるという事です。
__仮想マシンの物理CPUが2つとはどういう事なのでしょうか？__

```shell:CPUごとのコア数を確認するコマンド
$ grep cpu.cores /proc/cpuinfo | sort -u
```
![スクリーンショット 2018-02-08 0.18.11.png](https://qiita-image-store.s3.amazonaws.com/0/222267/a08352e1-1529-d002-fbcb-a2f0324c903a.png)

このdockerコンテナのCPUごとのコア数は1ということがわかりました。

```shell:論理プロセッサの数
$ grep processor /proc/cpuinfo | wc -l
```
![スクリーンショット 2018-02-08 0.21.58.png](https://qiita-image-store.s3.amazonaws.com/0/222267/1c93acb3-50c0-a4db-0600-579aeefbad20.png)

[redhatのサイト](https://access.redhat.com/ja/solutions/2159401)では
*この３つの数字の中で一番重要で、OSが指定したマイクロ秒で動作できるCPUの数である。*
とのこと

## events
eventモジュールの定義ができる。
eventモジュールは以下の3つ

### worker_connections

```conf:nginx.conf
worker_connections 512;
```
一つのworker processが同時に処理できる接続数です。
※worker process：ユーザのリクエストを処理する。


## http
ログの出力先などwebサーバとしてのメイン機能を定義
また、すべての設定をnginx.confに定義するとファイルが膨れ上がってしまうので

```shell:nginx.confのhttpディレクティブ抜粋
include /etc/nginx/conf.d/*.conf
```

と設定ファイルを分けています。

今回の記事で参考にしたのは以下です。ありがとうございます
[Nginx設定のまとめ](https://qiita.com/syou007/items/3e2d410bbe65a364b603)
[nginxの設定ファイル nginx.conf の読み方 超入門](https://hack-le.com/nginx/)

また、以下のURLから無料でオライリー社のComplete NGINX Cookbookがダウンロードできます。英語の勉強がてらにいかがでしょうか。
[[O'Reilly Ebook] Complete NGINX Cookbook](https://www.nginx.com/resources/library/complete-nginx-cookbook/)

[次回 その７](https://qiita.com/kkkkkkkkkk1005/items/817841c77538c356d25d)
Elixir のアセンブリコードを出力する

# Elixir のアセンブリコードを出力する

この記事は[Elixir のアセンブリコードを出力する〜実験室 〜 Lab in ZACKY's Laboratory](https://zacky1972.github.io/tech/2018/02/08/elixir-assembly.html)からの転載記事です。

Elixir の BEAM アセンブリコードを出力する方法について。

## 参考文献

* [Elixir や Erlang の beam ファイルを逆アセンブル、逆コンパイルする方法](https://qiita.com/tatsuya6502/items/fa142cb51824bb72c910)

## やり方

Elixir のバージョン1.6.1で試したところ，次のようにすればBEAMアセンブリコードを出力できた。

```bash
$ export ERL_COMPILER_OPTIONS=\'S\'
$ elixirc (出力したいファイル).ex
```

エラーが出力されるものの，`(出力したいファイル).ex.S` というファイルが出来上がっている。

## おまけ1: BEAMコードのダンプ

Mac の場合，次のようにする。

```bash
$ xxd (出力したいファイル).beam
```

`xxd` を使うと，16進数とASCII codeでダンプしてくれる。

## おまけ2: Erlang BEAM Instruction Set

* [Erlang BEAM Instruction Set](http://www.cs-lab.org/historical_beam_instruction_set.html)
* [Erlang BEAM Instruction Set (日本語訳つき)](https://gist.github.com/oskimura/5a80512eb559c29c9063)

しかしこれには具体的なバイトコードの数値が記載されていない。なので，現在リバースエンジニアリングして解読しているところ。

昔のZ80機械語プログラミングをしていた頃を思い出して，逆にワクワクしている。
【TypeScript】TypeScriptでNode.jsを使ってCSVを読み込む

TypeScriptでCSVを読み込みたかったのでメモ。
TypeScriptとかクラスとか全然知らないけど，とりあえず読めればいいや的な扱いで。

```sample.csv
var1,var2,var3
val11,val21,val31
val12,val22,val32
val13,val23,val33
val14,val24,val34
val15,val25,val35
```

```typescript:read_csv.ts
import * as fs from 'fs';
import csvSync = require('csv-parse/lib/sync');

class DataProcess {
    // Read CSV as 2-D list.
    static readCsv(input: string) {
        const data = fs.readFileSync(input);
        const matrix = csvSync(data);
        return matrix;
    } 
}

// Run.
const csv = DataProcess.readCsv('./sample.csv');
console.log(csv);
```

```
tsc read_csv.ts
node read_csv.js

[ [ 'var1', 'var2', 'var3' ],
  [ 'val11', 'val21', 'val31' ],
  [ 'val12', 'val22', 'val32' ],
  [ 'val13', 'val23', 'val33' ],
  [ 'val14', 'val24', 'val34' ],
  [ 'val15', 'val25', 'val35' ] ]
```
LoRaWANクラスＡを正しく理解する

#クラスＡの基本

LoRaWANの通信プロトコルについて調べると、方式は非常に簡単であることがわかるが、どれも説明不十分で詳細を理解できないことが多い。

LoRaWANの基本的な通信は、クラスＡとして定義されたプロトコルを使用する。クラスＡでは、かならずエンドデバイスからデータを送信し、その後データを受信する単純なプロトコルとなっている。その説明では、下のような図をよく見かける。
この図の説明がどれもよろしくない。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/137772/b7ebaf04-b9f2-3fab-f70c-86d1d2000acc.png)

※ＬｏＲａＷＡＮ仕様書1.0.2から引用

##錯覚１
先ほどの図を見ると、送信後にＲＸ１とＲＸ２が２回送られてくるのではないかと錯覚する。
これが紛らわしい。ＲＸ１とＲＸ２は、受信中を示しているのではなく、受信を待機している期間を示している。この、ＲＸ１とＲＸ２を受信スロットと呼ぶ。そして、ゲートウェイは、ＲＸ１とＲＸ２のいずれか片方の時間帯に下りデータを送信する。

ＲＸ１で受信した場合、ＲＸ２は受信しない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/137772/9f199cb7-6c98-1d23-d89c-2a9b2e872572.png)

ＲＸ１で受信しなかった場合、ＲＸ２で受信する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/137772/a2163918-0b18-d876-d2f4-26a6b16e3b7c.png)


|受信スロット|説明|受信周波数|
|:-:|:-:|:-:|
|ＲＸ１|最初の受信待機の期間。送信完了後１秒後（RECEIVE_DELAY1）に開き、受信ウィンドウ時間後に閉じる。|デフォルトでは直前の上りデータの周波数と同じである必要がある。ただし、ネットワーク側からの指示（ＭＡＣコマンド）により、受信周波数を変更することが可能。|
|ＲＸ２|２番目の受信待機の期間。送信完了後２秒後（RECEIVE_DELAY2）に開き、受信ウィンドウ時間後に閉じる。|ＡＳ９２３のデフォルトでは９２３．２ＭＨｚが使用される。ただし、ネットワーク側からの指示（ＭＡＣコマンド）により、受信周波数を変更することが可能。|

##錯覚２
さらに、錯覚するのは、下りデータの受信時間だ。
最初の図を見ると、RECEIVE_DELAY1とRECEIVE_DELAY2の期間の１秒しか受信できないのではないかと錯覚する。つまり、１秒に収まるデータ量しか受信できないのではないかと勘違いする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/137772/278c9438-b4d3-ed99-ed9a-dcb0cc3456ad.png)
ところが、ＬｏＲａＷＡＮの規格では、最大送信時間は３秒なので、１秒を超えたデータ量を受信することができる。
つまり、ＲＸ１の期間に受信を開始した場合、受信が終わるまで最大３秒間は受信を続けることができる。その場合は、RECIVE_DELAY２の時間を過ぎてしまうので、エンドデバイスはＲＸ２スロットは無視して、ＲＸ１の受診を継続することになる。

ＲＸ１で長い下りデータを受信
![image.png](https://qiita-image-store.s3.amazonaws.com/0/137772/d3b24e9f-3164-50e3-2e84-005445f2c8fe.png)

ＲＸ２で長い下りデータを受信
![image.png](https://qiita-image-store.s3.amazonaws.com/0/137772/737c3c2c-44ab-3974-5624-27c3b1ae9c72.png)

##まとめ
・クラスＡは、ＬｏＲａＷＡＮの基本クラスで、エンドデバイスから送信しないと、受信できない。
・ＲＸ１、ＲＸ２は受信スロットと呼び、エンドデバイスが受信待機する期間を表す。
・エンドデバイスは、ＲＸ１スロットで必ず受信を待機し、データを正常に受信した場合は、ＲＸ２スロットを開かない。
・ＲＸ１スロットでデータが来なかった場合、または他人宛てのデータを受診した場合は、ＲＸ２スロットを開く。
・受信できるデータの最大時間は３秒。
・ＲＸ１、ＲＸ２ともに受信スロットの周波数はＭＡＣコマンドでネットワーク側から変更可能。

また、ゲートウェイがＲＸ１スロットで送信するのか、ＲＸ２スロットで送信するのかは、ＬｏＲａＷＡＮネットワーク側で制御する。例えば、ＲＸ１スロットで使用する周波数が混雑している場合は、ＲＸ２スロットを使うなどの制御が考えられる。
C++初心者やそろそろ慣れてきた人に知って欲しいこと

# 概要
最近Code Completeを読んで、そうそうコレだよ。コレを言って欲しかったんだと触発されて記事を書いてみました。メンバはprivateにすべき等の基本的なことには触れませんのでクラスが書ける、継承が使えるくらいの人が対象です。

# 継承を使う事で自体は悪化する
> 継承は、プログラマの第一の責務である複雑さへの対処にマイナスに働く傾向がある

上記はもっと知られて良いと思います。継承に関係した守るべき暗黙のルールは山のようにありますが、それを全部理解した上で利用を躊躇するのが正しい判断だと思います。
とりあえず初心者は継承を使いがちです。C++やるんなら継承でしょって感じで使います。駄目です。継承はそんな気軽なものではありません。

# どうしても継承するのなら設計し、文書化する
Code Completeには設計の話も出てきます。詳しく知りたい人は読んでみてください。
設計はコーディングとは別の所にあります。コーディングしながら、そうだBaseクラスを作ろうなんてのは本当にやめてください。
ある派生クラスにこういう機能を付けたいから基底クラスを拡張するなんて行き当たりばったりで手を出して良いものではないのです。

責務を考えた時に正しい抽象化であり、その継承により十分な利益が出ると事前に判明した場合は仕方ありません。継承でしか実現できない強力な動作は確かに存在するからです。
それでも十分な設計に甘えず、第三者が見ても十分に理解できるような文書も作成しましょう。
そこまでのコストを払うだけの価値がないのなら、その継承は使うべきではありません。

# 実装が手間になっても読みやすいコードを書く
1引数を受け取り2変数を返す関数が必要になった時以下のようなコードを書きがちです。

```cpp:Bad
void Expand(int value, int& begin, int& end) {
    begin = value - 1;
    end = value + 1;
}
```
## 上記の駄目な実装に行き着く理由
* 新しいクラスの宣言、命名が面倒  
プログラミングで一番大事な部分なので頑張りましょう。
* プリミティブ型以外は戻り値としては不適。コピーコストが気になる  
C++に慣れて来た人にありがち。  
そんな微小なコストが気になる環境なら定期的に速度テスト回してボトルネックを検出できるようにしているだろうから、そのコピーコストが致命的と判明してから修正しましょう。  
基本的にコピーコストよりも可読性が失われることによるコストの方が会社にダメージを与えます。


```cpp:Good
struct Range {
    int begin;
    int end;
};

Range Expand(int value) {
    Range range;
    range.begin = value - 1;
    range.end = value + 1;
    return range;
};
```
上記の形式が良いのではなく、可読性が高いコードが良いのです。
なので、下記のようなコードは駄目です。


```cpp:Bad
Range Expand(int value) {
    return { value - 1, value + 1 };
}
```
スタイリッシュで一見良さそうですが、こんなコードを書かれたらRangeの定義まで見に行かないと落ち着きません。

# 既存のprotectedメンバを利用する必要がある時はprivate継承を使う
覚書。この程度で酷いクラスに対する蓋になる気がしませんが、まだ試せていないので有効か判断できてません。

# メンバの数は7プラスマイナス2個
> 他の作業を行いながら人が覚えられる項目は、だいたい「7プラスマイナス2」個であることがわかっている(Miller 1956)

根拠を付けてくれると説得しやすくて良いですね。無限にメンバを増やしていくのはやめましょう。

# ディープコピー優先
> 確かに、大きなオブジェクトのコピーをいくつも作成するのは、見た目が良くないかもしれないが、パフォーマンスに無視できないほどの影響を及ぼすことはめったにない。  
パフォーマンスが改善するという確証がないのに複雑さを増大させることは、良い打開策であるとは言えない。  
ディープコピーとシャローコピーを選択する良い方法は、シャローコピーを使用すべき根拠が明確になるまでは、ディープコピーを使用することだ。

根拠なしに可読性を捨てる人があまりに多く感じています。ただ、

```cpp:Good
void DoSomething(const std::vector<int>& values){ ... }
```
のようなconst参照は可読性に悪影響を与えないので積極的に使った方が良いです。

# おわりに
まだまだ読んでる途中ですが、非常に共感したので記事をサクッと書いてしまいました。
C++はゼロコスト抽象化をメインコンセプトの１つとしている言語なのでコピーコスト等を少しでも減らしたい気持ちは良く分かります。
しかし、そのためにコードを読むコストを増大させたのでは本末転倒です。早過ぎる最適化を避け、可読性を優先したコードを書きましょう。
Collisionを導入して数分でエラーレポートを見やすくしよう

めでたくLaravel5.6がリリースされました。

変更点は当然多々あるわけですが、このバージョンで[Collision](https://github.com/nunomaduro/collision)というコマンドライン上のエラーレポートハンドラがプリインストールされるようになったようです。

[Laravel 5.6 adds the Collision Package for CLI Error Reporting](https://laravel-news.com/collision)

![logo (1).png](https://qiita-image-store.s3.amazonaws.com/0/37036/1a552fe4-b682-aaf8-09ae-5eb241f05679.png)

実際に使ってみるとこんな感じで表示されます。

![example.png](https://qiita-image-store.s3.amazonaws.com/0/37036/668f5340-6ec1-bb89-e751-430f59caea90.png)

良いなー使ってみたいなと思い、今開発しているプロジェクトがちょうどLaravel5.5、PHP7.2で開発中なので早速試してみました。
実際に導入してみると、たしかに見やすく、どんなところでエラーになっているかがわかりやすくなっていて作業がだいぶしやすくなりました。

導入も簡単なので、Laravel5.6以前でも条件が合う人は導入したほうが良いと思います。

使える環境と導入方法をまとめておきます。

## 使える環境・バージョン

READMEを見てみると、Laravel ArtisanとPHPUnitをサポートしています。
Laravelじゃなくても使えるようですが、試していないです。

対応バージョンは下記。

- PHP7.1以上
- PHPUnit6.0以上

## インストール

composerを使って入れます。簡単ですね。

```sh
$ composer require nunomaduro/collision --dev
```

## 設定

### Laravel
`auto-dicovery` が設定されているので、インストールすれば即使えます。

[Collision Is An Error Handler Framework for Console Applications](https://laravel-news.com/collision-error-handler-framework)

### PHPUnit

下記を `phpunit.xml` に記載するだけ。

```xml:phpunit.xml
<listeners>
    <listener class="NunoMaduro\Collision\Adapters\Phpunit\Listener" />
</listeners>
```

簡単ですね。

### Laravel以外のフレームワーク

下記コードを実装する。(試していないですが)

```php
(new \NunoMaduro\Collision\Provider)->register();
```

これでテスト書いててこけまくって辛かった状態から早く抜け出せるように…なれるかもしれません。
Unity2017でARアプリ - 3.オリジナルのARマーカーを使う

#オリジナルのARマーカー利用に必要となること
Vuforiaのサイトで画像をDatabaseに登録、そのDatabaseダウンロードして利用します。
#制作手順
##1.マーカーの登録とデータベースのダウンロード
###①Vuforia Develoer Portalにログイン
Vuforia Develoer Portal
https://developer.vuforia.com/
###②Target Managerのページへ移動
「Develop」タブをクリック→「ターゲット」タブをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/79cec068-29e6-57e1-50e0-aa7fc4a79a24.png)

###③データベース作成
「Add Database」ボタンをクリックし、名前（Name）を入力後「Create」ボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/45bd8be6-bd7b-069c-0401-38fe83092d51.png)
###④設定を開く
Databese名をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/bbc97a2a-fcd2-a773-cfee-2432cbd9f34f.png)
###⑤画像のアップロード
(1)画面中の「Add Target」ボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/341550df-2a18-bd8a-ba38-bab000cad72e.png)
(2)「Single Image」選択　→　「Browse」ボタンでファイル選択　→　「Add」ボタンクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/753df86c-c6ce-aec7-9a6f-2976e68ae942.png)
##2.新規シーンの作成
ここでは、過去記事[Unity2017でARアプリ - 2.シンプルなARプロジェクト](https://qiita.com/takako_sudou/items/e09f2c6f15f29ded49c7)からの続きとして作成しています。（新規プロジェクト作成などの手順はこちらでご覧ください）
###①「File」→「New Scene」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/c2b97a74-f7b4-41b1-baf0-f1a5c55450c3.png)
###②scene2として保存
###③ベースの作成
カメラやターゲットを配置します。
（[Unity2017でARアプリ - 2.シンプルなARプロジェクト](https://qiita.com/takako_sudou/items/e09f2c6f15f29ded49c7)参照）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/3b5cb0f1-29c0-0c16-9a34-331074b4303d.png)
※必要に応じてLicence Keyの取得と設定も行っておいて下さい。
##3.データベースの読み込みと設定
(1)「Hierarchy」の「scene2」にある「AR Camera」を選択
(2)「Vuforia Behavior(Script)」の「Open Vuforia Configuration」クリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/c21280a1-9444-2b6c-0a2a-6ebec5f6f18d.png)
(3)「Add Datase」ボタンをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/66901f05-ef8d-01c8-0edf-ad25cd9ba7d7.png)
(4)ブラウザが開くので、必要であればログイン
(5)Target Managerを開き、Databaseを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/d3ceb3b2-1d18-eb59-8a9a-d2bc0034a438.png)
(6)「Download Database(All)」ボタンをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/51a4ea99-9afa-3fbd-e046-d8454ebb3bc6.png)

(7)「Unity Editor」にチェック　→　「Download」クリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/8679a824-7f11-9e6b-d6bc-2f283a8b28c5.png)
(8)パッケージファイルがダウンロードされ、そのまま開きます。
ブラウザの確認ダイアログが表示された場合は、開く（または実行する）よう選択してください。
(9)「Import」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/538416cb-d05d-784b-a679-88e701171765.png)
(10) (3)の画面にDatabaseが追加されているので、２か所チェックを入れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/2345c5c2-7cc2-b46f-0244-dad2b8778ab2.png)
※Assetsにも追加されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/dfe08164-d685-3d85-38e3-7afdaa46234d.png)

##4.オブジェクト作成
今回はSphereを追加し、マテリアルを設定しました。
カメラ位置など微調整しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/007c4421-5400-8ef7-169f-0fa9d163d1b4.png)
##6.動作テスト
![image.png](https://qiita-image-store.s3.amazonaws.com/0/234600/7c6ef1e6-92af-165f-3dc5-614dd67a5cb7.png)
Things Gatewayやってみた（Qiita一番乗り!）

Firefox開発元のMozillaがIoTデバイスを管理するGatewayを公開しました。
バージョン0.3なので初公開ではないのかな？
いち早く使ってみました。

[公式サイト](https://iot.mozilla.org/gateway/)

[インストール手順のブログ](https://hacks.mozilla.org/2018/02/how-to-build-your-own-private-smart-home-with-a-raspberry-pi-and-mozillas-things-gateway/)
→インストール手順はここを参考にしました。

[GitHubのWiki](https://github.com/mozilla-iot/wiki/wiki)
→インストールした後に何ができるかよくわからなかったのですが、ここに書いてあります。

# 用意したもの

* Raspberry Pi Zero W
* SDカード 4GBでいけました

# インストール

1. [ここ](https://iot.mozilla.org/gateway/)からOSイメージをダウンロード
1. EtcherでSDカードにコピー
1. SDカードをRaspberry Piにセット
1. 電源オン
1. 初回起動時にはRaspberry PiがWi-Fiのアクセスポイント(SSID:`Mozilla IoT Gateway`)として起動するので、パソコンをそっちのWi-Fiに接続する
1. ホスト名は`gateway.local`なので、ブラウザでアクセス。  
   ※私の環境(Windows 10)では上手く接続できなかったので、ipconfigしてデフォルトゲートウェイのIPアドレスに接続しました。
1. Wi-FiルーターのSSIDが表示されるので選択、パスワードを入力。
1. 「Connecting...」の表示になると、Raspberry Piのアクセスポイントオフになり、Wi-Fiルーター側のネットワークに接続します。
1. パソコンをWi-Fiルーターに接続しなおし、再度`gateway.local`にアクセス。
1. 外からアクセスするためのドメイン`xxxxx.mozilla-iot.org`が取得できるので、`xxxxx`の部分とメールアドレスを入力
1. 確認メールが届くので、メール記載のURLにアクセス。
1. ユーザーアカウントを作成する。

これで初期設定が完了です。
お気づきかとおもいますが、専用のドメインが取得できますので、これで外からもアクセスできます。

# できること

## 機器制御

アドオンを追加することで様々な機器に対応できる仕組みになっています。バージョン0.3で用意されているアドオンは以下のものです。
残念ながら我が家には対応した機器がありません。

* GPIO　→　後述
* Philips Hue
* TP-Link
* Virtual Things
* Zigbee
* Z-Wave

そのうちAlexaやGoogle Homeに対応するかなー。期待大。

## フロアマップ

フロアマップが作れるみたいです。へー。

## ルール

IFTTT的な「○○になったら××する」ができます。


# GPIOでLチカしてみよう

ここの内容です。
https://github.com/mozilla-iot/wiki/wiki/Configuring-GPIO-for-use-with-the-gpio-adapter

初期状態で18番ピンに割当らてています。
上の手順に沿って、ボタンの設定をしても何も変わらず。。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/fd2bQxzbxd">https://t.co/fd2bQxzbxd</a></p>&mdash; moritalous (@moritalous) <a href="https://twitter.com/moritalous/status/961589781460234241?ref_src=twsrc%5Etfw">2018年2月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Raspberry Piとスマホは同じWi-Fiに接続していますが、Wi-Fiを切ってもインターネット経由でオンオフができました。


# その他

## Raspberry Piにログインしたい

初期状態ではユーザー`pi`、パスワード`raspberry`です。SSHしたい場合にbootパーティションに`ssh`ファイルが必要なのも同じです。

https://github.com/mozilla-iot/wiki/wiki/Logging-into-the-Raspberry-Pi
Node.jsでmerged cellしたり色塗ったりしたExcelを出力する

以下のエントリーでは[officegen](https://www.npmjs.com/package/officegen)をおすすめしている。

https://qiita.com/hnakamur/items/392f66e3dbeec9ae9d00

しかしofficegenはmerged cellしたり色塗ったりすることができないっぽい。
いろいろ触った結果、[exceljs](https://www.npmjs.com/package/exceljs)がよさそう。

* 日本語出力できた
* モデル的な操作もできる

```js
const Excel = require('exceljs')
const workbook = new Excel.Workbook()
const sheet = workbook.addWorksheet('2017')

sheet.columns = [
  { header: 'Id', key: 'id', width: 10 },
  { header: 'Name', key: 'name', width: 32 },
  { header: 'D.O.B.', key: 'DOB', width: 10 }
]

sheet.addRow({id: 1, name: '太郎', dob: new Date(1970,1,1)})
sheet.addRow({id: 2, name: '二郎', dob: new Date(1965,1,7)})
```

* merged cellもできる

```js
sheet.mergeCells('A1:B5')
```

* 色塗ったりテキストスタイルを指定したりもできる

ということで非常に多機能だし使いやすい。
golangでxmlをjsonにして取得するコマンドラインツールを作った

golangでxmlをjsonにして取得するコマンドラインツールを作ってみたことがありました。

golangはcli toolがすぐに作れるのでいいですね。私がcli toolを作成する時によく使用するのは`urfave/cli`ですが、他のものもたくさんあります。

今回は主に`urfave/cli`とか`mmcdole/gofeed`とかの使い方の紹介みたいな感じになると思います。(と言っても、READMEドキュメントに書いてあるけど)

```go:xq.go
package main

import (
	"fmt"
	"os"
	"encoding/json"
	"github.com/urfave/cli"
	_ "reflect"
	gofeed "github.com/mmcdole/gofeed"
)

func Action(c *cli.Context) {
	app := App()
	if c.Args().Get(0) == "" {
		help := []string{"", "--help"}
		app.Run(help)
		os.Exit(1)
	}
}

func App() *cli.App {
	app := cli.NewApp()
	app.Name = "xq"
	app.Usage = "xq j /path/to/rss.xml"
	app.Version = "0.0.1"
	app.Author = "syui"
	return app
}

type RssItem struct {
	Title		string `json:"title"`
	Link		string `json:"link"`
	Updated		string `json:"update"`
	Published	string `json:"publish"`
}

type RssItems []RssItem

func (b RssItems) Len() int {
	return len(b)
}

func main() {
	app := App()
	app.Action = Action
	app.Commands = []cli.Command{
		{
			Name:    "json",
			Aliases: []string{"j"},
			Usage:   "xq j ./index.xml #json output",
			Action:  func(c *cli.Context) error {
				file, _ := os.Open(c.Args().First())
				defer file.Close()
				fp := gofeed.NewParser()
				feed, _ := fp.Parse(file)
				items := feed.Items
				outputJson, err := json.Marshal(&items)
				if err != nil {
					panic(err)
				}
				//w.Header().Set("Content-Type", "application/json")
				fmt.Printf("%s", string(outputJson))
				return nil
			},
		},
		{
			Name:    "latest",
			Aliases: []string{"l"},
			Usage:   "xq l ./index.xml #latest updated",
			Action:  func(c *cli.Context) error {
				file, _ := os.Open(c.Args().First())
				defer file.Close()
				fp := gofeed.NewParser()
				feed, _ := fp.Parse(file)
				fmt.Println(feed.Updated)
				return nil
			},
		},
	}
	app.Run(os.Args)
}
```
使い方は至ってシンプルで、まずオプションを使用して、次にxmlファイルを指定する感じ。

```bash
$ url=https://syui.gitlab.io/test-hugo-theme-wave/index.xml
$ curl -sSL -H "Accept: application/xml" $url -o index.xml
$ cat index.xml

$ go run xq.go j ./index.xml
$ go build

$ xq j ./index.xml
{"title":"Creating a new theme","link":"https://syui.gitlab.io/test-hugo-theme-wave/2016/01/01/creating-a-new-theme/","date":"2018-01-16T00:00:00.000+09:00"}
{"title":"Archive","link":"https://syui.gitlab.io/test-hugo-theme-wave/archive/","date":"2018-01-16T00:00:00.000+09:00"}
```

なんか色々とあれだと思うのでPRとかあれば喜びます。

https://gitlab.com/syui/xq


## download

```sh
$ go get -u -v gitlab.com/syui/xq
```
heuristic WARN

こんな感じのエラーが出た場合

```
WARN  c.a.i.i.CoordinatorImp:12 - Local heuristic termination of 
coordinator 127.0.0.1.tm[N] with state HEUR_HAZARD
```

下記のようなtransaction_logファイルの中身を一旦消してあげれば解決。
おそらくトランザクションマネージャーがつくりたいまたは、つかみたいファイルが
既に存在する的な事だと思う

```
127.0.0.1.tm[N].epoch
tmlog0.log
tmlog.lck
```

※[N]の部分は何かの数字
セキュリテイ特化型Archlinux、Blackarchをインストールしてみた

どうも。
自分はペネトレーションツール系OSというと、Kali Linuxぐらいしか知らなかったのですが、どうやらArchlinuxにもBlackarchという派生OSがあるらしいです。

OSごとインストールするのは面倒なので、手軽に既存のArchlinuxをBlackarchにしてみます。

# 手順

通常はインストールスクリプトがあるようなのですが、ちょっと何をしているか確認せずに動かすのは気持ち悪いので、適宜シェルスクリプトの内容を手動で実行します。

1. gpg鍵の追加
2. キーリングの追加
3. リポジトリの追加

## gpg鍵の追加

```bash
$ gpg --keyserver pgp.mit.edu --recv-keys 4345771566D76038C7FEB43863EC0ADBEA87E4E3
```

## キーリングの追加

```bash
$ curl -LO https://www.blackarch.org/keyring/blackarch-keyring.pkg.tar.xz
$ sudo pacman --config /dev/null --noconfirm -U blackarch-keyring.pkg.tar.xz
$ rm blackarch-keyring.pkg.tar.xz
```

## リポジトリの追加

以下を`/etc/pacman.conf`に追記

```ini
[blackarch]
Server = http://www.ftp.ne.jp/Linux/packages/blackarch/$repo/os/$arch
Server = ftp://ftp.kddilabs.jp/Linux/packages/blackarch/$repo/os/$arch
Server = http://www.mirrorservice.org/sites/blackarch.org/blackarch/$repo/os/$arch
```

```bash
$ sudo pacman -Syy
```

# パッケージをインストール

通常通り、パッケージは`pacman -S`でインストールできます。

```bash
$ sudo pacman -S aircrack-ng
```
[JavaScript] 子ウィンドウの2回目以降のページロードを待つ

[Stack Overflowで質問した](https://stackoverflow.com/questions/48634554/can-i-wait-for-a-child-window-to-load-the-second-page)内容の転記です。

# 問題

以下はブラウザ上のJavaScriptの話。
子ウィンドウのページロードを待って、子ウィンドウ上のページのDOMをいじりたい。

```javascript
function waitForLoading(targetWindow) {
  return new Promise((resolve, reject) => {
    targetWindow.addEventListener("load", resolve);
  });
}

(async () => {
  const childWindow = open("1st.html", "_blank");
  await waitForLoading(childWindow);
  // 1st.htmlのDOMをいじっていろいろする

  childWindow.location.href = "2nd.html";
  await waitForLoading(childWindow);
  // 2nd.htmlのDOMをいじっていろいろする
})();
```

1回目の`await waitForLoading(childWindow);`は正常に動くので、`1st.htmlのDOMをいじっていろいろする`のはできる。
しかし、2回目の`await waitForLoading(childWindow);`は、止まってしまって永遠に次の行へ進まない。
どうすれば2回目以降のページロードを待てるか。

# 原因

子ウィンドウの場合、`load`は2回目以降のページロードでは発火しないようだ。[^1]

[^1]: ただ、挙動がそのようであるというだけで、仕様としてそうなのかはわからない

# 暫定回答

自分でページのロード状態を監視する。

```javascript
function waitFirstPage(targetWindow) {
  return new Promise((resolve, reject) => {
    targetWindow.addEventListener("load", resolve);
  });
}
function movePage(targetWindow, action) {
  const originalDocument = targetWindow.document;
  action();
  return new Promise((resolve, reject) => {
    (function loop() {
      if (targetWindow.document !== null
        && targetWindow.document !== originalDocument
        && targetWindow.document.readyState === "complete") {
        resolve();
      }
      setTimeout(loop, 100);
    })();
  });
}

(async () => {
  const childWindow = open("1st.html", "_blank");
  await waitFirstPage(childWindow);
  // 1st.htmlのDOMをいじっていろいろする

  await movePage(childWindow, () => {
    childWindow.location.href = "2nd.html";
  });
  // 2nd.htmlのDOMをいじっていろいろする
})();
```

# より良い方法

Stack Overflowでは見つからなかったので、あれば教えてください。
Ansible yum rpm "No Package matching〜"

# 結論
yumモジュールの引数を、`state: latest` -> `state: present` にしよう！

# 事象
rpmファイルを対象にyumモジュールでインストールしようとすると、
`No Package matching '(rpmファイル名)' found available, installed or updated` というエラーが出る

# 原因
`state: latest` を指定すると何が何でもその名前でリポジトリに取りに行ってしまう様子。
なので、ファイルが存在しようが関係なくこのエラーが発生する。
brunchでBootstrap Material Design4を使う

めでたい事についにBootstrap4が正式リリースされた。

[Bootstrap 4](https://blog.getbootstrap.com/2018/01/18/bootstrap-4/)

Bootstrap3はscriptタグで読み込んで使うのがメインだったと思うが、Bootstrap4は大体npmでビルドして使うのがメインだと思う。

Webpackで導入するサンプルは多分検索すればいくらでも出てくると思うが、brunchだとあまり見つからないかもしれないのでメモしておく。

ちなみに、よく使っているのが

[Bootstrap Material Design](https://fezvrasta.github.io/bootstrap-material-design/)

なので、それについての詳細を書く。ベースはBootstrapなので多分ほとんどBootstrapと導入方法は同じだと思う。

### CSS読み込み

brunch-config.jsでcssを読み込む。

```javascript
  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery'
    },
    styles: {
      "bootstrap-material-design": [
        "dist/css/bootstrap-material-design.min.css"
      ]
    },
  }
```

npmでインストールはできるけどnpmには対応していない、というライブラリとかも同じ方法で読み込める。

### JS読み込み

JSの最初のほうで読み込む。

```javascript
import "jquery"
import "bootstrap-material-design"
```

どっかで

```javascript
    $('body').bootstrapMaterialDesign();
```
ES6 Proxy を使って Enzyme を拡張する

Enzyme というライブラリがあります。
React の描画をいい感じにラップして、コンポーネントをテストしやすくするライブラリです。

今回は ES6 の　Proxy という新機能を使って、このライブラリに独自の API を生やすという趣向です。

Enzyme の基本機能については
面倒なので
説明しません。
mount と simulate と find さえ知っていればよいです。

## 問題設定

Enzyme の Github に、

```js
const elm = mount(<SomeComponent />);
elm.simulate('click');
```

とかいちいち書くのは面倒だしわかりにくいんで、

```js
elm.click()
```

と書かせてほしいという要望があがっていたので、それがきっかけです。

## 解法1: モンキーパッチ

mount が返すのは ReactWrapper というクラスのインスタンスです。

なので、その prototype に新しいメソッドを生やしてあげればよろしい。

```js
ReactWrapper.prototype.click = function (mock) {
    this.simulate('click', mock);
};
```

ですが、これは元の ReactWrapper を壊しかねず、いま動いても将来のバージョンが 0.1 上がるだけで動かなくなる可能性があります。

## 解法2: プロキシ

よって、もとの API を壊さずに機能を拡張したい。
そこで使えるのが ES6 で入った **Proxy** という言語機能です。

これは既存のオブジェクトをラップして必要に応じて割り込みをかけるものです。
これを使うと下のように mount と ReactWrapper を拡張できます。

```js
import Enzyme from 'enzyme';

function mount() {
    const element = Enzyme.mount.apply(this, arguments);

    return new Proxy(element, {
        'get': function (target, key) {
            switch(key) {
            case 'click': // Add
                return this.simulate('click', ...arguments);
            default:
                return target[key]; 
            }
        }
    });
}
```

……が、これだけでは実際には足りません。

子要素をたどる find という API を使うとエラーになってしまいます。

```js
const elm = mount(<SomeComponent />);
const elm2 = elm.find('button');
elm2.click(); // ERROR! click is not a function
```

これは、find が元の ReactWrapper を返すから。

よって、以下のようにして、find もラップしてあげる必要があります。


```js
import Enzyme from 'enzyme';

function mount() {
    const element = Enzyme.mount.apply(this, arguments);

    return new Proxy(element, {
        'get': function (target, key) {
            switch(key) {
            case 'click':
                return this.simulate('click', ...arguments);
            case 'find': // Wrap
                return function () {
                    const element2 = target.find.apply(target, arguments);
                    return createReactWrapperProxy(element2);
                }
            default:
                return target[key]; 
            }
        }
    });
}
```

これをあらゆる DOM 探索 API に対して記述すれば、目的のものが作れます。

## まとめ

Proxy　を用いると public API だけを用いて、もとのモジュールをまったく壊さずにそれを拡張したモジュールが作れます。
たるいのでやりませんが
。

## 参考

コードの全体は[Github](https://github.com/karak/enzyme-ext) においてあります。

Proxy の使い方については[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)にまとまっています。
Kali Linux導入時につまづいた初歩的なエラー解消メモ


# はじめに

この記事は「セキュリティをちょっと勉強したいな〜」と軽い気持ちで動き出し、
VirtualBoxに`Kali Linux`を突っ込んで動かそうとしたところ起きてしまったエラーや設定に対する対処をメモしたものです。

素人なもので、どうしてこのエラーが出てきたーだとか、なぜこれで解決ーだとか、
詳しい情報は書けませんのであしからず...

むしろコメント欄等でご指導頂ければと思います...


# インストール時のエラー

## いつ起きたの

Kali Linuxをインストールしようと思い立ってすぐのエラー。へこみます。

ブートしてGraphical installを選び、
言語やらキーボードの設定やらパスワードやらを設定するまでは進むのですが、

**インストールで失敗**

と、どうすりゃええねん状態に陥ってしまったわけです。

## どう対処したの

なんでも、**仮想マシンを作成**する段階でこのエラーを回避できなくなってしまうようで…

作成時の順を追っていきますと、

仮想マシン名、メモリサイズの設定を行うまでは問題がないのですが、
**仮想ハードドライブの設定**に原因がありました。

VirtualBoxが推奨している**デフォルトの8G**ではエラーがでます。OSインストール時の容量が不足してたんですね。

筆者が設定したとき、「まぁ10Gちょいありゃいいだろ」と考えていたので、具体的にダメだったときの容量は覚えていませんが、**15G以上**は必要らしいです。



# GPGエラー
## いつ起きたの

なんとかインストールが終わり、「さ〜て、パパ頑張ってパッケージリスト更新しちゃうぞ〜」と`apt-get update`した際にエラーが起こりました。切ない。

パブリックキーが認証されていないことが原因とのことです。


## どう対処したの

エラーメッセージ内にキーが出力されていると思います。
それを使います。

```bash
sudo apt-key adv --racv-keys --keyserver keyserver.ubuntu.com [キー]
```

これでkeyサーバーから新たにパブリックキーを取得することで対処できました。


# ホストネットワーク設定「無効な設定が見つかりました」
## いつ起きたの

ネットワークをホストオンリーアダプターに設定したいのに、
**「無効な設定が見つかりました」**と表示されてしまう。

調べてみても、

**[環境設定] -> [ネットワーク] -> [ホストオンリーネットワーク] -> 追加**

と書かれている記事が多かったのですが、バージョンの違いなのか[ネットワーク]を見ても[ホストオンリーネットワーク]の項目がないのです...

## どう対処したの

`⌘command + W`で[ホストオンリーネットワーク設定]が呼び出せます！

ここから追加することで、仮想マシンのネットワーク設定からホストオンリーネットワークを選択できるようになります。
アジャイルソフトウェア開発の奥義から学ぶアジャイルプラクティス

[アジャイルソフトウェア開発の奥義](http://amzn.asia/2jnjhAG)から学ぶアジャイルプラクティス

これからの開発で意識していくため書きます。


- プロセスやツールよりも、人と人同士の交流を重視する。
    * 成功の鍵を握る最も重要な要素は「人である」。
    * 仲間とうまくコミュニケーションをとる能力は、純粋なプログラミング能力より重要だ。
    * もちろん、適切なツールを使うことも非常に重要だ。
        * 先ずは小さなツールから始めよう。
    * ここで肝に銘じておいて欲しいのは、開発環境を整えるよりも、開発チームを形成することの方がずっと重要であるということだ。
* 包括的なドキュメントよりも、動作するソフトウェアを重視する。
    * ドキュメントの氾濫は不足するよりも始末が悪い。
    * 新メンバーに仕事内容を伝えるときに最も役立つドキュメントは「コード」と「チーム」そのものだ。
    * 【重要で差し迫った必要のあるドキュメント以外は作成しない。】
* 契約上の交渉よりも、顧客との協調を重視する。
    * プロジェクトを成功させるには、顧客からの頻繁なフィードバックが欠かせない。
* 計画に従うことよりも、変化に対応することを重視する。
    * ソフトウェア開発プロジェクトにおいては、遠い将来の予定を立ててもあまり意味がない。
    * 詳細な予定は次の2週間分だけにし、おおまかな計画を3ヶ月分だけ作り、その先に関しては大雑把にしておくのが上手な計画の立て方だ。

## 12の原則

1. 最優先事項は顧客を満足させることであり、価値あるソフトウェアを早い段階から継続的に届けることでこれを実現する。 
・ 一部分でも動くものを早い段階から納品することと最終製品の品質との間に強い相関関係があるというのもだ。

2. 要求変更を歓迎し、たとえ開発過程の後半であってもそれを受け入れる。アジャイルプロセスは、変化に対応することで顧客の競争上の優位性を確保する。
・ アジャイルプロセスを使う者は変化を恐れず、むしろ要求変更を歓迎する。

3. 実働可能なソフトウェアの納品を頻繁に行う。できるだけ短い期間で納品することを旨とし、数週間から数ヶ月間隔で納品する。
・ 我々の目標は、あくまでも顧客の要求を満たす実際に動くソフトウェアを納品することにある。

4. 顧客と開発者はプロジェクト全般を通じて日々共に働かなければならない。


5. やる気のある開発者をプロジェクトの中心に据え、彼らが必要とする環境とサポートを与え、信頼して仕事の完遂を任せる。
・ アジャイルプロジェクトでは、成功の鍵を握る最も重要な要素は「人」である。

6. 開発チームで情報を伝達する最も効果的な方法は、直接話し合うことである。
・ 主要なコミュニケーションの手段は会話である。
・ ドキュメントは基本的に作成しない。

7. 実働するソフトウェアこそが進捗状況の尺度である。
・ 30%完成していると言ったら、必要な機能の30%が稼働しているという意味でなければならない。

8. 持続できるペースで開発する。そうすれば、スポンサーも開発者もユーザーもずっと一定のペースを確保できる。
・ アジャイルプロジェクトは50メートル走というよりは、マラソンのようなものだ。
・ 明日出来ることを無理に今日やってしまわないこと。

9. 高度な技術と優れた設計への配慮は、アジャイル性を高める。
・ 開発スピードを保つ鍵は「品質」である。
・ 乱雑なコードを書いてしまったらその日のうちに書き直す。

10. シンプルさが肝心ｰｰｰ やらなくていいことはしない。
・ 今日必要な作業をできるだけシンプルに高い品質で行う。そうすれば、明日問題が発生したとしても柔軟に対処出来るからだ。

11. 最高のアーキテクチャ、仕様要求、設計は自己管理能力のあるチームから生まれる。




12. チームは定期的にプロジェクトを見直し、より効果的な方法を考え、対処方法の変更や調整を行う。

以上がアジャイルプラクティスである。
TIME_WAITを早く消す方法

間違った情報ばかりひっかかるので、訂正用にメモしておく。


忙しいサーバーだとTIME_WAITのコネクションが残りまくって、ポートを使い切ってしまうことがある。


そこでググってみると net.ipv4.tcp_fin_timeout を小さくするというブログがたくさんひっかかるのだけども、これはFIN_WAIT_2からTIME_WAITになるまでの待ち時間の設定なので、TIME_WAITは減りません。

TIME_WAITになってからの待ち時間はソースにハードコードされており、設定では変えることはできません。
変え方は [こちら](http://sarface2012.hatenablog.com/) に詳しくのってます。


TIME_WAITになったコネクションを使いまわすようにカーネルパラメーターを設定することでTIME_WAITを減らせます。
※接続元、接続先の両方で下記の設定をする必要あり。 

````sh:
net.ipv4.tcp_tw_reuse=1
net.ipv4.tcp_timestamps=1
````
　
net.ipv4.tcp_tw_recycleは意味ないし、問題もあるので1にしてはいけない。


それ以外だと、無理やり終了パケットを送って終了させるしかない。※これはまだできるか未確認。

[このスライド](https://www.slideshare.net/takanorisejima/timewait)に詳しいことが書いてあります。

　
間違った情報に振り回される人が減りますように。
リジェクト対応　メモ


iOS8未満でビルドすると　WebKit.FrameWorkがPrivateFrameworksになる。

リジェクト内容：System/Library/PrivateFrameworks/WebKit.framework/WebKit

**解決方法**：Unity上のMinimum iOS Version を **6.0**から**8.0**に変更したら出なくなった。

参考URL
https://github.com/AgileBits/onepassword-app-extension/issues/95


[保存版] Apple審査リジェクト対策チェックリスト
https://qiita.com/yukitoto/items/b7ec39c4c7080b9884de#_reference-6769f1c8636fbf7a1eb5

理不尽なリジェクトを受けたiOSアプリが公開されるまでの経緯
https://qiita.com/Watt/items/49d65b6377c1a44e670f
Unity NGUISpriteのアトラス(Atlas)名のとり方


```hoge.cs

Debug.LogError("atlasname:" + GetComponent<UISprite>().atlas);
Debug.LogError("atlasname2:" + GetComponent<UISprite>().atlas.name); // OK
Debug.LogError("atlasname3:" + GetComponent<UISprite>().atlas.ToString());

```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37406/da3c7e1f-95ca-3db0-37c2-7088aeec4d18.png)

atlasや、atlas.ToString()等は、```(UIAtlas)```が付いてくる
クライアントサイドでpdfを生成できるpdfmake.jsをreactで使ってみた

#pdfmakeとは
pdfを動的にクライアント側で生成できるもの
##使い方
package.jsonと同じディレクトリで

```
npm i -D pdfmake
```
これでreactのコンポーネント内でimportしてきてあげれば使えるようになります。
下記の関数をonclick等で実行してあげれば動くはずです。

```sample.js
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

const print = (e) => {
      alert('text');
        e.preventDefault()//submitの効果を打ち消す
        pdfMake.fonts = {
            GenShin: {
                normal: 'GenShinGothic-Normal-Sub.ttf',
                bold: 'GenShinGothic-Normal-Sub.ttf',
                italics: 'GenShinGothic-Normal-Sub.ttf',
                bolditalics: 'GenShinGothic-Normal-Sub.ttf',
            },
        };
        const defaultStyle = 'GenShin';
        const docDefinition = {
            content: [
                {
                    text: 'React Generate PDF Sample',
                    style: 'header'
                },
                {
                    text: 'Sentence',
                    style: 'subheader'
                },
                `Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      これはただのサンプルです
      Aenean commodo ligula eget dolor. Aenean massa.
      sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      eleifend tellus.`,
                {
                    text: 'Styles',
                    style: 'subheader'
                },
                {
                    text: 'これはただのサンプルです
',
                    style: { fontSize:  15 },
                },
                {
                    text: '赤これはただのサンプルです
',
                    style: { color: 'red', fontSize: 30 },
                },
                {
                    text: '青これはただのサンプルです
',
                    style: { color: 'blue', fontSize: 40 },
                },
                {
                    text: '黄これはただのサンプルです
',
                    style: { color: 'yellow', fontSize: 50 },
                },
            ],
            defaultStyle: {
                font: defaultStyle,
            },
            styles: {
                header: {
                    fontSize: 30,
                },
                subheader: {
                    fontSize: 20,
                },
            },
        };

        pdfMake.createPdf(docDefinition).open();
    };
```

##問題点
pdfmakeを調べてきた皆さんなら、書かれている記事の大半に載っているであろう問題点、それが日本語対応していないということです。
###解決方法
[クライアントサイド(React)で日本語PDFを出力する。](https://qiita.com/gcmae/items/071abbb60dcbeabef7a6)

上記の記事の方のgithubのリポジトリを落としてきて、vfs_fonts.jsを探してきてください(確か2MBぐらいのファイルのはず)それをnode_moduleの中にあるvfs_fonts.jsと入れ替えます。
その際1行目に書いてる

```vfs_fonts.js
window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs
```
を

```vfs_fonts.js
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs
```
に変更してください（元々の記述がそうだったので）
[ubuntu][geth] プライベートネットで送金を行う

#目的
ubuntuでプライベートネットを構築し、コンソール上からマイニングと送金を行う

#環境
```
aws
Ubuntu 16.04.3 LTS
geth   1.7.3-stable-4bb3c89d
```
#インストール
```shell

sudo apt-get install software-properties-common
sudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install ethereum
#確認
geth --help
```

#初期設定
```
mkdir eth_private_net
vim eth_private_net/genesis.json

{
"nonce": "0x0000000000000042",
"mixhash": "0x0000000000000000000000000000000000000000000000000000000000000000",
"difficulty": "0x600",
"alloc": {},
"coinbase": "0x3333333333333333333333333333333333333333",
"timestamp": "0x0",
"parentHash": "0x0000000000000000000000000000000000000000000000000000000000000000",
"extraData": "0x",
"gasLimit": "0x8000000",
"config": {
    "chainId": 13
}
}

```

```
#初期化
geth --datadir /home/ubuntu/eth_private_net init /home/ubuntu/eth_private_net/genesis.json
```

#動作確認
```
#コンソール起動
geth --networkid "13" --nodiscover --datadir "/home/ubuntu/eth_private_net" console 2>> /home/ubuntu/eth_private_net/geth_err.log

#初期状態の確認（変なとこ繋がってないかの確認)
eth.getBlock(0)
> {
  difficulty: 1536,
...
  uncles: []
}

eth.accounts
> []

eth.blockNumber
> 0

#アカウント作成。引数はパスワードで名前ではない
personal.newAccount("hogehoge01")
personal.newAccount("hogehoge02")

eth.accounts
>['一人目のID','二人目のID']

#採掘者。デフォルトは一人目
eth.coinbase
>'一人目のID'

#マイニングするアカウントの変更
miner.setEtherbase(eth.accounts[1])
eth.coinbase
>'二人目のID'

#採掘
miner.start()
> null

#採掘状況確認
eth.hashrate
> 0     #まだ掘っていない。初回だけ15分くらいかかる
> 1325  #何か値が返ってくれば掘れている

#採掘終了
miner.stop()

#現在の最新ブロック
eth.blockNumber
> 15

#ブロックの調査 
eth.getBlock(10)
>{ブロック情報}

#残高確認
eth.getBalance(eth.accounts[0])
> 0

eth.getBalance(eth.accounts[1])
> 800000000000000000

#送金者のアカウントをロック解除
personal.unlockAccount(eth.accounts[1])

#送金
eth.sendTransaction({from: eth.accounts[1], to: eth.accounts[0], value: web3.toWei(1, "ether")})

#送金されたかな
eth.getBalance(eth.accounts[1])
> 800000000000000000 #されてない

#送金するために採掘
miner.start()
> null
eth.hashrate
>4022
miner.stop()

#送金されたかな
eth.getBalance(eth.accounts[1])
> 799900000000000000 
eth.getBalance(eth.accounts[0])
>100000000000000  #された

exit

```

つづく

#メモ
####genesis.json

```
#平たく言うと設定ファイル。
#peer接続を行う場合、これが同じでないとだめ

{
"nonce": "0x0000000000000042",
"mixhash": "0x0000000000000000000000000000000000000000000000000000000000000000",
"difficulty": "0x600",
"alloc": {},
"coinbase": "0x3333333333333333333333333333333333333333",
"timestamp": "0x0",
"parentHash": "0x0000000000000000000000000000000000000000000000000000000000000000",
"extraData": "0x",
"gasLimit": "0x8000000",
"config": {
    "chainId": 13
}
}
```

- nonce
  - 識別コード。他の環境と混じらないように任意の値にするのがいい
- difficulty
  - miningの難易度。でかいほど難しい（時間がかかる）  
- config
  - geth1.6以降必須になった。書くことなくても```config: {}```でキーだけは定義する
- chainId
  - ネットワークID。被らないように任意の値で
  - 1〜4あたりは特に避けた方がいい
  

####gethのパラメータ

接続先のID。chainIDと同じにすること
`--networkid "13" `
自動で接続先を見つける機能をoffにする
```--nodiscover```


#参考
ethereum入門
https://www.gitbook.com/book/a-mitani/mastering-ethereum
Installation Instructions for Ubuntu
https://github.com/ethereum/go-ethereum/wiki/Installation-Instructions-for-Ubuntu
IonicでAndroidとiOSの見た目を統一する

# はじめに
Ionicでハイブリットアプリを作っていたところ、iOSではいい感じの見た目なのにandroidで見るとなんかださい・・・
一部の人に怒られそうだけど、全部iOSの見た目にしたいなー。

# そもそも
Ionicでは起動した端末によってスタイルが勝手に変わるようになってる。すごーい。
[Platform Specific Styles](https://ionicframework.com/docs/theming/platform-specific-styles/)
※PCで開発するときはchromeのデペロッパーツールから表示端末を選択することで、切り替えができる。
（めちゃ便利）

これでかっこよくなればいいけど、別にwebアプリだし表示一緒でよくない？って人も中にはいるはず。

# こう書く
ionicのcliで生成されたapp.module.tsに勝手に書かれてるimport文に追加。

```app.module.ts
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

@NgModule({

~~中略~~

  imports: [
    IonicModule.forRoot(MyApp, {
      mode:'ios'
    }),
  ],

~~中略~~

```

# 参考
https://github.com/ionic-team/ionic/issues/12382
https://github.com/ionic-team/ionic/pull/8017
Motion-Project/motionによる録画内容を、外部トリガをもとに動画生成する

# 前置き

RaspberryPiにカメラを接続し、録画や動画の生成を行うには、[Motion-Project/motion](https://github.com/Motion-Project/motion)が便利です。
簡単に導入することができ、また、USBカメラだけではなくRasPi純正のカメラにも対応しております [[参考](https://qiita.com/rukihena/items/95da3860f9ca86c39f8d)]。

しかし、[Motion-Project/motion](https://github.com/Motion-Project/motion)は、録画＆動画の生成を開始するトリガとして、

- motionプロセスが起動してから常に録画＆動画の生成を行う
- 動体を検知した場合に録画＆動画の生成を行う

という設定を行うことができますが、ユーザ任意のタイミングで録画＆動画の生成を行う、という設定ができません（少なくとも私の調べた限りでは）。
つまり、RasPiに向かって「今から10秒間録画してほしいんだけど・・・」とか「別のセンサが反応したときに録画を開始して」、ということができません。

それをなんとか、ワークアラウンド的に解決します。

ちなみにドキュメントの[ここ](https://motion-project.github.io/motion_config.html#Signals_Sent)にあるsignalや、[ここ](http://www.lavrsen.dk/foswiki/bin/view/Motion/MotionHttpAPI#Action_Commands)にあるAPIに、

> Motion will create an movie file of the current event. 

など、動画を作る的な内容が書いてありますが、どうやら、現在の録画内容を動画に吐き出すための機能ではないようです（よくわかりません）。

# やりたいこと

motionが録画している内容について、外部トリガをもとに動画生成します。

# 環境

- RasbperryPi3
- RasPi純正カメラ

```
$ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 9.1 (stretch)
Release:        9.1
Codename:       stretch

$ motion -h
motion Version 4.1.1, Copyright 2000-2017 Jeroen Vreeken/Folkert van Heusden/Kenneth Lavrsen/Motion-Project maintainers
```

# 方法1
motionに常に録画＆動画の生成をする設定をして、
トリガをもとに、任意秒だけmotionプロセスを立ち上げたり殺したりします。
単純ですが、motionが立ち上がるまでにラグがあります。

# 方法2
この記事を書いてる途中で見つけてしまいました。
HTTP APIのconfigに対して、emulate_motionをon/offさせることで実現できます。

```shell
# 録画開始
curl -s http://localhost:#{webcontrol_port}/0/config/set?emulate_motion=on
sleep 10
# 録画終了
curl -s http://localhost:#{webcontrol_port}/0/config/set?emulate_motion=off
```

動画は設定ファイルのtarget_dirに作られます。
motionの再起動も必要もありません。

追記：
この方法は、どうやら4.1系では動作しないようです。
https://github.com/Motion-Project/motion/issues/606

# 方法3
motionは、localhostに対して現在録画している内容をストリームで流しているため、
そこから内容を取得して動画を生成します。
以下のようなコマンドを実行し、動画を生成します。

    $ ffmpeg -i http://localhost:#{stream_port} -an -t 00:00:10 out.mp4

エンコードされているものを、再度ffmpegで動画生成しているため、motionが生成するオリジナルの動画より画質がやや悪くなります。

# 雑談
方法2のconfigをon/offする方法が、今のところ一番よさそうです。
`SIGUSER1`や`makemovie`が動作しないのが、いまいち納得できませんが・・・。
ソースコードは、途中まで追っかけてやめました。暇なときにまた見てみることにします。
UITextField でコピーやペーストを禁止にする

## やりたいこと

TextField をタップしたときに表示されるポップアップから特定の編集アクションを禁止にする

![IMG_0020.PNG](https://qiita-image-store.s3.amazonaws.com/0/230887/755b87eb-e7e1-c617-ce35-b63dd1deeefe.png)

### UITextField のサブクラスを作成する

```swift:CustomTextField.swift
import UIKit

class CustomUITextField: UITextField {
    
    // コピーとペーストを禁止にする
    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        if action == #selector(copy(_:)) || action == #selector(paste(_:)) {
            return false
        }
        return true
    }
}
```

`canPerformAction(_:withSender:)` が各編集アクションに対する操作を制御しているのでこれを override する。return false をすることで編集アクションが無効になる。
コピーやペーストといった特定のアクションを禁止にする場合は、引数の `action` が `UIResponderStandardEditActions` プロトコルの該当のメソッドと同値であるかを判断してやればよい。

## 実行結果

![IMG_0019.PNG](https://qiita-image-store.s3.amazonaws.com/0/230887/626a556f-60f9-be4a-ba4a-1ec7b8f8ca82.png)