OmniAICreator/Qiita-1.07M huggingface dataset:
LaravelのEloquent modelにカスタムフィールド(カスタムアトリビュート)

## やりたいこと

下のような`users`テーブルがあったとして

|id|sei|mei|
|:--|:---------|:----------|
|1|塩鯖|太郎|

Modelを使うと

```php
$user = User::first();
echo $user->sei; #=> "塩鯖"
echo $user->mei; #=> "太郎"
```

のようにできるのだが、

```php
$user = User::first();
echo $user->name; #=> "塩鯖 太郎";
```

のようにテーブルには存在しないが、 `sei` と `mei` をつなげた
`name` という仮想的な（テーブルには存在しない）フィールドで扱えるようにしたい。


## 方法

Userモデルを以下のようにする

```php:User.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    protected $appends = ['name'];

    public function getNameAttribute()
    {
        return $this->sei . " " . $this->mei;
    }
}

```

`$appends` に仮想的なフィールドを登録します。
返す値は `getXxxxAttribute()` に定義すればOKです。
(Xxxxは追加するフィールド名)

ちなみにJsonにした際も

```
{
    [
        "sei": "塩鯖",
        "mei": "太郎",
        "name": "塩鯖 太郎"
    ]
}

```

　のようになると思います。

わーいヽ(ﾟДﾟ*)ﾉ
Å(おんぐすとろーむ)とNFC @ Python

Near Field Communicationじゃないよ、Normalization Form Canonical Compositionだよ。

[Unicode正規化 @ Wikipedia](https://ja.wikipedia.org/wiki/Unicode%E6%AD%A3%E8%A6%8F%E5%8C%96)

UnicodeではÅとÅは違う文字です。

* Å (ANGSTROM SIGN) ... U+212B
* Å (LATIN CAPITAL LETTER A WITH RING ABOVE) ... U+00C5

後者は数値から見てLatin-1の匂いがします。事実その通りみたいです。

NFC正規化するとオングストロームは上リング付きAになります。これをPythonで確認してみます。

```shell-session
>>> import unicodedata
>>> ord(unicodedata.normalize('NFC', '\N{ANGSTROM SIGN}'))
197
>>> unicodedata.name(unicodedata.normalize('NFC', '\N{ANGSTROM SIGN}'))
'LATIN CAPITAL LETTER A WITH RING ABOVE'
```

unicodedataは標準ライブラリのモジュールです。オマケですが、macOSで時折話題になるNFD正規化だと2文字です。

```shell-session
>>> len(unicodedata.normalize('NFD', '\N{ANGSTROM SIGN}'))
2
>>> [ord(ch) for ch in unicodedata.normalize('NFD', '\N{ANGSTROM SIGN}')]
[65, 778]
>>> [unicodedata.name(ch) for ch in unicodedata.normalize('NFD', '\N{ANGSTROM SIGN}')]
['LATIN CAPITAL LETTER A', 'COMBINING RING ABOVE']
```

理屈上はこの変換で困ることが当然あり得ます。例えばShift_JISでは「オングストローム」は表現できますが「上リング付きA」は表現できません。Shift_JIS形式で保存されたテキストファイルから文字を読み込んで、NFC正規化後に再度Shift_JIS形式で保存しようとすると、問題が起きることがあります。


```shell-session
>>> with open('from.txt', encoding='shift_jis') as fr:
...    with open('to.txt', 'w', encoding='shift_jis') as fw:
...        fw.write(unicodedata.normalize('NFC', fr.read()))
Traceback (most recent call last):
  File "<stdin>", line 3, in <module>
UnicodeEncodeError: 'shift_jis' codec can't encode character '\xc5' in position 0: illegal multibyte sequence
```

本質的でないファイル読み込みを省略しますと

```shell-session
>>> '\N{ANGSTROM SIGN}'.encode('shift_jis')
b'\x81\xf0'
>>> unicodedata.normalize('NFC', '\N{ANGSTROM SIGN}').encode('shift_jis')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
UnicodeEncodeError: 'shift_jis' codec can't encode character '\xc5' in position 0: illegal multibyte sequence
```

もっと率直には次の通り

```shell-session
>>> '\N{LATIN CAPITAL LETTER A WITH RING ABOVE}'.encode('shift_jis')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
UnicodeEncodeError: 'shift_jis' codec can't encode character '\xc5' in position 0: illegal multibyte sequence

```

この例は『プログラマのための文字コード技術入門』で知ったのですが、同著では理由については不明（「なぜかそうはなっていません」p353)になっています。

で、偶然Wikipediaに以下の記述を見かけました。

> オングストロームの単位記号はこの文字だが、UnicodeやJIS X 0213 では本来の文字とは別の文字として定義されている。ただし、Unicodeのオングストローム記号 U+212B は古い規格との後方互換性維持のためだけに使える互換文字であり、使用は推奨されない。
> ([Wikipedia](https://ja.wikipedia.org/wiki/%C3%85)より)

「後方互換性のみに使えよ？」という理由が一応あるのかー、と理解しました。

とはいえUnicode正規化はどれも結構心配な感じ。文字は難しいのです。

おまけですが、ブラウザでどちらか片方で検索をかけると双方ひっかかります。多分4種類のどれかの正規化後に検索してる気がします。検索動作にブラウザ共通の仕様があるかはよく分かりません。

「この文字、化けるんだけど」というエンドユーザさんの素朴なクレームがこのあたりに出てくると「ひぃっ」てなります。Windows上でCP932とshift_jisとUTF-8が入り乱れるシステムに付き合わされたりするので、他人事ではないのです。
jsdoでdeeplearn.js その4

#概要
jsdoでdeeplearn.jsやってみた。
xorを学習させてみた。
リベンジした。学習しても、セーブする術が無い。

#サンプルコード

```
var dl = deeplearn;
var g = new dl.Graph();
var math = new dl.NDArrayMathCPU();

var inputTensor = g.placeholder('input', [2]);
var labelTensor = g.placeholder('label', [1]);

var w = g.variable('w', dl.Array2D.randNormal([2, 2]));
var w1 = g.variable('w1', dl.Array2D.randNormal([2, 1]));
var b = g.variable('b', dl.Array1D.randNormal([2]));
var b1 = g.variable('b', dl.Array1D.randNormal([1]));
var h = g.sigmoid(g.add(g.matmul(inputTensor, w), b));
var h1 = g.sigmoid(g.add(g.matmul(h, w1), b1));

var s0 = g.multiply(labelTensor, g.log(h1));
var s1 = g.subtract(g.constant(1.0), labelTensor);
var s2 = g.log(g.subtract(g.constant(1.0), h1));
s1 = g.multiply(s1, s2);
var cost2 = g.reduceSum(g.add(s0, s1));
cost2 = g.subtract(g.constant(0), cost2);

var learningRate = 0.1;
var optimizer = new dl.SGDOptimizer(learningRate);

var inputs = [dl.Array1D.new([1.0, 0.0]), dl.Array1D.new([0.0, 1.0]), dl.Array1D.new([0.0, 0.0]), dl.Array1D.new([1.0, 1.0])];
var labels = [dl.Array1D.new([1.0]), dl.Array1D.new([1.0]), dl.Array1D.new([0.0]), dl.Array1D.new([0.0])];
var shuffledInputProviderBuilder = new dl.InCPUMemoryShuffledInputProviderBuilder([inputs, labels]);
var [inputProvider, labelProvider] = shuffledInputProviderBuilder.getInputProviders();
var feedEntries = [{
    tensor: inputTensor,
    data: inputProvider
}, {
    tensor: labelTensor, 
    data: labelProvider
}];
var sess = new dl.Session(g, math);
var batchSize = 2;
for (var i = 0; i < 4001; i++)
{
    math.scope(() => {
        var cost = sess.train(cost2, feedEntries, batchSize, optimizer, dl.CostReduction.MEAN);
        if (i % 2000 == 0)  alert('last average cost: ' + cost.get());
    });
}
math.scope((keep, track) => {
    var testInput = track(dl.Array1D.new([1.0, 1.0]));
    var testFeedEntries = [{
        tensor: inputTensor, 
        data: testInput
    }];
    var testOutput = sess.eval(h1, testFeedEntries);
    alert('xor 1 1 -> ' + testOutput.getValues());
});
math.scope((keep, track) => {
    var testInput = track(dl.Array1D.new([1.0, 0.0]));
    var testFeedEntries = [{
        tensor: inputTensor, 
        data: testInput
    }];
    var testOutput = sess.eval(h1, testFeedEntries);
    alert('xor 1 0 -> ' + testOutput.getValues());
});
math.scope((keep, track) => {
    var testInput = track(dl.Array1D.new([0.0, 1.0]));
    var testFeedEntries = [{
        tensor: inputTensor, 
        data: testInput
    }];
    var testOutput = sess.eval(h1, testFeedEntries);
    alert('xor 0 1 -> ' + testOutput.getValues());
});
math.scope((keep, track) => {
    var testInput = track(dl.Array1D.new([0.0, 0.0]));
    var testFeedEntries = [{
        tensor: inputTensor, 
        data: testInput
    }];
    var testOutput = sess.eval(h1, testFeedEntries);
    alert('xor 0 0 -> ' + testOutput.getValues());
});

```


#成果物

http://jsdo.it/ohisama1/QTRl
[クイズ]javascriptと仲良くなるための一歩　第３７話「配列の要素アクセス」

#問題

```js
var arr = [0,1,2,3,4,5,6,7,8,9,10,11]
var str = "1"
arr[str]   //=> ?
arr[str+1] //=> ?
```

:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:
:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:


#答え

文字列でも数値になるようにしてくれる

```js
var arr = [0,1,2,3,4,5,6,7,8,9,10,11]
var str = "1"
arr[str]   //=> 1
arr[str+1] //=> 11
```
circleci2.0のconfig.ymlのデバッグ

# これは
circleci2.0の`.circleci/config.yml`の設定がうまくできずに困っていたときに、サーバの設定を確認するためにしたこと。

## やったこと
stepのなかに、runでサーバの状態を確認するコマンドを入れただけ。

```.circleci/config.yml
version: 2
jobs:
  build:
    :
    steps:
      :
      - run:
          name: Process List
          command: ps aux
  :
  :
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/14380/3409425f-6860-fa97-1138-a0aac8fecb47.png)

## なんで
手元の手慰みのプロジェクトのDBMSをSQLiteからPostgreSQLにしようとしたときに、うまくせつぞくできなくて…。それでサーバの状態を見ながら`config.yml`を見ていった次第でした。
sshでログインして確認したかったけど、`2.0`はまだないので、こんなにまだるっこしい方法でやったのでした。
pythonでx86コンパイラ自作

pythonでコンパイラを自作してみた。

##コンセプトはこんな感じ

 - pythonで実装　（C言語とかじゃなくて）
 - x86_64アセンブラコードを出力　（自作仮想マシン上で動くとかじゃなくて）
 - パーサも自作　（yaccに頼るとかじゃなくて）
 - 実用性はとくに考慮しない　（楽しく作って動けばOK）

##実装した順に紹介

第一段階
[とりあえず動くものを実装](https://github.com/s0sasaki/x86compiler/tree/master/old/compiler_minimal)
変数宣言や代入や四則演算を実装。パーサも簡単なものなので、ほとんど抽象構文木を手書きしてる感じ。

第二段階
[バックエンドを実装](https://github.com/s0sasaki/x86compiler/tree/master/old/compiler_backend)
パーサは貧弱なままだけど、配列とか名前空間とか関数呼び出しとかを実装。末尾再帰ぽい機能もオレオレ実装。

第三段階
[フロントエンドを実装（完成版）](https://github.com/s0sasaki/x86compiler)
BNF記法で文法を定義し、SLRパーザを実装。


*補足（追記）
Linux環境、python3系で実行してください。
出力はGNU Assemblerです。
また、ソースコードも少し修正しました。*


##参考資料

 - 滝本宗宏「実践コンパイラ入門」
Ocamlでコンパイラを実装する本。バックエンドは主にこの本を参考にした。

 - 宮本衛市「はじめてのコンパイラ」
C言語でコンパイラを実装する本。フロントエンドを実装するときに参考にした。

 - Peter Norvig 「[(How to Write a (Lisp) Interpreter (in Python))](http://norvig.com/lispy.html)」
PythonでLispインタプリタを実装する記事。

 - Abdulaziz Ghuloum 「Compilers: Backend to Frontend」
SchemeでSchemeコンパイラを実装する資料。

 - Rui Ueyama 「[簡単なプログラミング言語を作るライブコーディング](https://www.youtube.com/watch?v=JAtN0TGrNE4)」
C言語でライブコーディングする動画。
gitでpushするときに"remote: Permission to ユーザー名1/リポジトリ名 denied to ユーザー名2."と表示され、pushできないときの対処法。

githubのアカウントを複数使い分けているときに発生したトラブルの解決法。

githubアカウントをユーザー名2からユーザー名1に移行したときに、

`remote: Permission to ユーザー名1/リポジトリ名 denied to ユーザー名2.`
`fatal: unable to access 'https://github.com/ユーザー名1/リポジトリ名/': The requested URL returned error: 403`

と表示され、プッシュできなくなりました。

`$ git config --global user.name <username>`
`$ git config --global user.email <mailaddress>`

など設定を変更してみましたが、結果は変わらず(T_T)

[こちら](https://stackoverflow.com/questions/5335197/gits-famous-error-permission-to-git-denied-to-user)を参考に、Keychain Access から
旧アカウントに紐付いてたgithub.comを削除することで解決しました！

手順としては、

1. spotlightを開いて`Keychain Access.app`を開きます。
2. カテゴリから[すべてのアイテム]を選択します。
3. 検索の欄に`git`と入力する。
4. 日付をチェックして古いものを右クリックメニューから削除する。
5. pushしてみる。

となっていて、僕はこれで解決しました。
[Swift]シングルトンとは？

## シングルトンとは？

**クラスが一つのインスタンスしか持てない**デザインパターンの一つです。
インスタンスがグローバルに使えるので、初期化のプロセスがないのが便利。Singletonは初期化が一回しかいらない時などによく使う：データベースコネクター、ログインハンドラーなど。


```.swift
class SomeManager {
    static let shared = SomeManager()
    private init() {}
}

//With usage:
SomeManager.shared
```

メモ書き：[この記事によると](https://krakendev.io/blog/the-right-way-to-write-a-singleton)、初期化にprivateにすると、シングルトンの唯一性が保証されるみたいです。さらには、コンストラクタを作るとエラーを出してくれるのでこれも便利。

## シングルトンのデメリット

インスタンスをパスしたくないから、という理由でシングルトンを作るのは、バッドプロクティスらしいです。なぜなら、初期化がクラスに依存しているのでテストし辛いからです。
Gitでローカルリポジトリを作成して、後にリモートリポジトリへ反映する


ちょっとgithub慣れてないのでメモとして残します。

## ①作業場所:ローカル
ターミナルを開く
リポジトリを作成したいディレクトリで以下を行う

```git
git init
git add .
git commit -m "hogehoge"
```

## ②作業場所:リモート
githubでリモートリポジトリを作成する
リモートリポジトリのSSHをcopyする

## ③作業場所:ローカル
ターミナルを開く

```git 
git remote add origin [リモートリポジトリのSSHのcopy]
git push --set-upstream origin master
```

これでリモートリポジトリへ反映される
あれ、これってgithubでリポジトリ作成の際にQuick setupに書かれていることと同じでした。。。
CentOS7 + SCL 環境で新しめ && サポート期間の長いWordpress環境

# 目的

 * サポート期間はなるべく長い方がうれしいですよね
 * 言語環境自体もなるべく新しい方がなんとなくいいですよね
 * (ただしSCL自体のサポート期間は3年のようです(情報提供ありがとうございます: http://qiita.com/k12u/items/3dbe6b402c6c30103920#comment-bac84b281bdae404719d))
 * PHP 7.1 を使っていないのは現在のSCLでモジュールの対応があまり進んでいないように見えた(深い調査はしていない)ためです

## 補助説明 (SCLとは何か)

https://wiki.centos.org/AdditionalResources/Repositories を見ると説明が書いてありますが、よくこのての説明に出てくるEPELやREMIと違って、CentOSチームのSIGによってメンテされているレポジトリです。公式の信頼感はありますが、使い方にちょっと癖があるようです(*)。

(*) 著者がよく理解・調査できていない部分もあるのでフェアな物言いではないかもしれません。

### よりよい説明

https://www.hogarthuk.com/?q=node/15

# インストールするもの

 * CentOS 7に
   * MySQL 5.7
   * PHP 7.0
   * Apache httpd 2.4
      * (普段はnginxを使っていますが今回は指定があったので)

# 実行手順

`sudo -s`してからの実行手順。

```
# 競合するMariaDBを削除
yum remove mariadb-libs

# MySQL Community Server の yum repositoryを追加
yum localinstall -y https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm

# MySQL Community Server をインストール
yum install -y mysql-community-server

# SCLを追加
yum install -y centos-release-scl

# PHP (+ 依存関係によりApache)をインストール
yum install -y rh-php70-php rh-php70-php-pear

# サービスの起動設定と起動
systemctl enable httpd24-httpd
systemctl start httpd24-httpd
```

# 注意事項

## DocumentRoot
DocumentRoot は
```
/opt/rh/httpd24/root/var/www/html/
```

になります。(あまり調査できていないですが、不便なら別の場所にsymlinkを貼るのもいいかもしれないです。)

## PHP コマンド

cli で PHPを利用したい場合は

```
$ scl enable rh-php70 bash
```

で起動したshellを経由してPHPを利用することになります。
初めてのAnsible


## 概要
Chef, Puppetなどと同様に構成管理ツールと呼ばれるツールである。
サーバ構築のコスト削減やサーバ構築時に発生する差分を抑える事ができるメリットが有る。

何台もあるサーバに一々コマンドを打つ必要がなくなる上に、サーバ間での差分も撲滅できるので人気らしい。

## インストール
スーパーユーザ or sudoをつけて実行。
今回はCentOSに入れたので不要だったが、実行前にpythonをインストールしておく必要がある。

```
yum -y install epel-release
yum -y install ansible
ansible --version
```
## 構成
### Inventory
対象サーバのIPを記載する。
グルーピングも可能で、Webサーバ・DBサーバのIPを1つのファイルで管理できる。

### ansible.cfg
設定ファイル

### Playbook
インストールやディレクトリ作成など実行する処理を記載する。

## お試し
物は試しということで、普段よく使う locate コマンドをインストールする Playbook を作成してみる。

```locate.yml
- hosts: 127.0.0.1
  become : true
  tasks:
    - name: install locate
      yum : name=mlocate state=latest
 
    - name: locate updatedb
      command : updatedb
```

では、実行してみる。

```
$ ansible-playbook locate.yml
 
PLAY [local] ************************************************************************************************************************************************************************************
 
TASK [Gathering Facts] **************************************************************************************************************************************************************************
ok: [127.0.0.1]
 
TASK [install locate] ***************************************************************************************************************************************************************************
changed: [127.0.0.1]
 
TASK [locate updatedb] **************************************************************************************************************************************************************************
changed: [127.0.0.1]
 
PLAY RECAP **************************************************************************************************************************************************************************************
127.0.0.1                  : ok=3    changed=2    unreachable=0    failed=0
```

これでコマンドのインストールと実行準備ができた。
今回はお試しなのでここまで。
GeoIPを使って送信元アドレスの地理情報を可視化する

GeoIPというIPアドレスから地理情報を確認することができるサービスをご存知でしょうか。以前の記事で、[Fluent,Elasticsearch,Kibanaを利用したVyOSのNetFlow監視](http://qiita.com/nl0_blu/items/82d5ff8d4864beab6efb)の環境を構築したので、これを応用させてVyOSにアクセスしてくる端末の位置情報をGeoIPを使って、Kibanaに可視化していきたいと思います。

# GeoIPの設定

GeoIPコンパイルに必要なパッケージをインストールする。

```
$ sudo apt-get install libgeoip-dev
```

fluent-plugin-geoidのインストール

```
$ sudo /opt/td-agent/embedded/bin/fluent-gem install fluent-plugin-geoip
```

Fluentdのconfファイルにgeoipタグの設定を書く

```
$ sudo vim /etc/td-agent/td-agent.conf
--省略--

<match geo.netflow.**>
  type geoip
  geoip_lookup_key ipv4_src_addr
  <record>
    geoip_country ${country_code['ipv4_src_addr']}
    geoip_city ${city['ipv4_src_addr']}
    geoip_lat ${latitude['ipv4_src_addr']}
    geoip_lon ${longitude['ipv4_src_addr']}
    geoip_pin ${latitude["ipv4_src_addr"]},${longitude["ipv4_src_addr"]}
  </record>
  remove_tag_prefix geo.
  add_tag_prefix es.
  skip_adding_null_record
</match>

<match es.netflow.**>
  type elasticsearch
  host localhost
  port 9200
  type_name netflow
  logstash_format true
  logstash_prefix flow
  logstash_dateformat %Y%m%d
</match>

<source>
  type netflow
  tag geo.netflow.event
  port 5141
  versions [5, 9]
</source>
```

今までに受信したflowのIndexを削除(しなくても良い。すぐに有効化するため)

```
curl -XDELETE 'localhost:9200/flow-*'
```

受信するflowのIndexに"type" : "geo_point"のフォーマットを追加

```
$ curl -XPUT http://localhost:9200/_template/flow -d '
{
  "template" : "flow-*",
  "mappings" : {
    "netflow" : {
      "properties" : {
        "@timestamp" : {
          "type" : "date",
          "format" : "dateOptionalTime"
        },
        "geoip_pin" : {
          "type" : "geo_point"
        }
      }
   }
  }
}'
```

以上、fluend(td-agent)を再起動する

```
$ /etc/init.d/td-agent restart
```

# 動作確認

以下のコマンドでflow-yyyymmddのIndexフォーマットにgeoipのタグがあるか確認

```
$ curl -XGET 'localhost:9200/_mapping?pretty'
```

実際のIndexにgeoipのタグがあるか確認

```
$ curl "http://localhost:9200/flow-yyyymmdd/_search?pretty"
```

Kiabnaで確認

<img width="367" alt="スクリーンショット 2017-08-24 1.09.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/161771/e56bc450-b2f4-da1f-6a0e-aa16f39a729f.png">

geoid_pinバーのVisualizeをクリックすれば、以下のように地理情報として可視化できる。

<img width="1280" alt="スクリーンショット 2017-08-23 21.26.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/161771/2bc1ddbc-eb30-b0a8-e587-344f317220e3.png">
WEBページで画面が一時的に操作を受け付けなくなる現象について

JavaScriptでOpenStreetMapから画像を取得してきて表示するような地図ツールを使っていた際にスクリプト実行中に地図ツール以外のテキストフィールドが操作を受け付けなくなる現象がありました。カーソルは動かせるがフォーカスしないような現象です。試しもしないで安易に考え、画像のレンダリング中は反応しなくなるのかな程度の考えを持ちましたが、気になって考えて直してみるとJavaScriptで画像をレンダリングしたところでそのようなが現象は今まで起きたこともないし何だろうなと色々と調べてみたところ、この現象はブラウザのデベロッパーツールのCPU使用率が100%で数秒間張り付いていてその間に起きる現象だということが分かりました。

---

#### IE11 デベロッパーツールの例

（この画像では現象は起きていませんが以下の赤枠のところが100%で数秒間張り付いていました）
![IE11.png](https://qiita-image-store.s3.amazonaws.com/0/156195/e5b44436-62bc-ea29-3ae1-8256e2e6c440.png)

---

#### Chrome デベロッパーツールの例

（Chromeでは100%で数秒間張り付くことはありませんでした300msくらいで処理が終わっていました この画像では現象は起きていません）
![chrome.png](https://qiita-image-store.s3.amazonaws.com/0/156195/333f3245-3ee8-75ff-40b4-435e6cdefb31.png)

---
色々試している途中にこの現象が起きている際に他のウィンドウでは操作を受け付けるのか確認してみたところ問題なく操作を受け付けていたのでブラウザのデベロッパーツールのCPU使用率が何を意味しているのかよくわかりませんでした。（タブだとタブ移動すら受け付けなかったのでウィンドウは切り離して試しました）以下の考えくらいしか浮かびませんでした。

* そのウィンドウの使用可能なCPUがあってその中でのことだから大丈夫なのかもしれない
* JavaScriptがシングルスレッドだから別のCPUを使っているから大丈夫なのかもしれない

CPUの動作に関してはよくわかりませんでしたが、初期読み込み時以外で画面が反応しなくなる際はスクリプト周りのパフォチューが必要かもしれません。
Emacsでintellij風のbackspaceを実現する

# やりたいこと
普段AndroidStudioを使っていて便利だなあと思うのが、コードのインデントに合わせて最適なbackspaceをしてくれることなのですが、それをEmacsで実現できないかなと思っていました。Hungry deleteというパッケージがよさそうだと思って試したのですが、ほんとに全部のホワイトスペースを削除してしまいやりすぎ。
EmacsLispを勉強したのでせっかくだし書いてみることにしました。
# できた
```el
  (defun smart-backspace ()
    (interactive)
    (let* ((current (save-excursion
                      (point)))
           (beginning (save-excursion
                        (beginning-of-line)
                        (point))))
      (if (string-match "^[ \t]*$" (buffer-substring beginning current))
          (progn
            (kill-line 0)
            (delete-backward-char 1)
            (indent-for-tab-command))
        (delete-backward-char 1))))
```
おもいのほか簡単にかけました。使い方は下のように好きなキーにキーバインドをあてるだけ。
`(global-set-key (kbd "backspace") 'smart-backspace)`
自分はC-hにもbackspaceをあてたかったので
`(global-set-key (kbd "C-h") 'smart-backspace)`
としてみたのですが、これでは補完の際にhelpがでてしまいうまく行きませんでした。
仕方がないのでbackspaceにキーバインドを当てて`key-translation-map`でC-hにも同じキーバインドを適用することにして一件落着となりました。
最終的な使い方はこんな感じです。

```el
(global-set-key [?\C-?] 'smart-backspace)
(define-key key-translation-map [?\C-h] [?\C-?])
```
まだElisp初心者なので修正点などあればぜひ教えてください。

## 2017/10/14 追記
パッケージ化してmelpaに登録しました。-> https://github.com/itome/smart-backspace
node-svmのインストールで手間取ったのでメモ




```
sudo npm install -g node-svm  
```

これがひたすらエラー

```
npm WARN deprecated minimatch@1.0.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
/usr/local/bin/node-svm -> /usr/local/lib/node_modules/node-svm/bin/node-svm

> node-svm@2.1.8 install /usr/local/lib/node_modules/node-svm
> node-gyp rebuild
gyp ERR! clean error 
gyp ERR! stack Error: EACCES: permission denied, rmdir 'build'
gyp ERR! System Darwin 16.7.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/node-svm
gyp ERR! node -v v7.3.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-svm@2.1.8 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the node-svm@2.1.8 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/XXXXXXXX/.npm/_logs/2017-08-20T16_00_14_808Z-debug.log

```

npm自体を更新したりしたけど、最後はこれで通った・・・ようです。

```
sudo npm install -g --unsafe-perm node-svm
```

正直、unsafe-permの説明、全然意味がわからん・・・

[npm-config](https://docs.npmjs.com/misc/config)


#####追記

上記のインストールでコマンドからnode-svmを打てるようにはなったけど、jsファイルからrequireで呼び出そうとするとエラーになった。

```
Error: Cannot find module 'node-svm'
```

で、node-svmのgithubのread.meの方法でインストールしたらrequireで呼び出せるようになった。

```
npm install --save node-svm
```

githubのnode-svmのページ
[node-svm](https://github.com/nicolaspanel/node-svm)


あれ？て事は最初からそうすれば良かったのか？でももう分からんしな・・・
なんにせよ、以上でコマンドからもjsファイルからでもnode-svmを呼び出せるようになりました。
オブジェクト指向分析の基本的な思考法

#はじめに
普通、私たちは「ものを考える」とき頭の中で行います。
でも、頭の中だけだと**空中戦**になってしまって、整理がつかないことが多々あります。
そんなとき、ポンチ絵を描いてみると、スムーズに思考できることがありますよね。
オブジェクト指向分析は、これをポンチ絵ではなくUML表記法で行います。

ここでは、
**オブジェクト指向分析は、
「ものを考える」工程をUML表記法を使って行っている**
ことを説明してみたいと思います。

#ものを考えるときは、認識＋考え
私たちは普段、ものを考えます。
**ものを考える**とは、どういうことでしょうか？

たとえば、
**目の前に人がいるので、挨拶しようとします。**
このとき、自分と相手を**認識したうえ**で、
**挨拶する**ことを考えます。

たとえば、
**コップに水を汲もうとします。**
このとき、コップ・水道の蛇口・水・自分の手などを**認識したうえ**で、
**それらを組み合わせてコップに水を注ぐ動き**を考え、実行します。

このように、私たちは、ものを考えるとき、
**「前提として、いくつかのものを認識したうえで、
その動き」**を考えます。

まず、この考えかたを抑えましょう。
ここまで良ければ、次に進みましょう。

#ものづくりも、認識＋考え
これを**ものづくり**に置き換えて考えてみましょう。

あなたが、とあるメーカーに就職したとします。
洗濯機の設計部に配属されました。
仕事は、洗濯機の動作のリニューアルです。

洗濯機の新しい動きをプログラミングしようとするとき、まず、どう考えますか？

あなたが、以前から洗濯機の専門家ではなければ、
おそらく、先に、洗濯機の構造について理解してから、
洗濯機をどう動かすかを理解/検討しようとするでしょう。

実際にそのイメージ
　**洗濯機の構造理解（認識）**と
　**動かし方の理解（考え）**を
絵に描くと、

**1. 認識する**
![washer.png](https://qiita-image-store.s3.amazonaws.com/0/197297/09e655fe-2251-5da2-bfaa-33049f55af83.png)

**2. 動きを考える**
![washer_move.png](https://qiita-image-store.s3.amazonaws.com/0/197297/9b0561d3-a39e-7819-7ef3-fd8ec3165e5c.png)

といった感じになります。
**認識したうえで考え**ますね。

当たり前すぎる気はしますが、これも意識的に抑えるべき大切なところです。
ここまで抑えられましたか？
抑えられたら、次に進みましょう。

#オブジェクト指向分析も、認識＋考え

さて、はじめに書きましたが、
オブジェクト指向分析は、
この「認識＋考え」のステップをUMLモデル（UML表記法によるモデル）を描きながら行います。

よく、オブジェクト指向開発のUMLモデリングで、
**ドメインモデル・分析モデル**と言いますが、
ドメインモデルは、**認識する**の部分で、
分析モデルは、**動きを考える**の部分に該当します。

##ドメインモデル（認識のモデル化）
　：動きはあまり意識せずに、そのもの対象の把握・理解をモデルにしたもの

ドメインモデルでは、対象をどのように認識しているか描き出します。
プログラマとしての自分がどう認識しているかではなく、
洗濯機の動きを考える専門家の人が、洗濯機をどう認識しているかを描きます。
![washerclass.png](https://qiita-image-store.s3.amazonaws.com/0/197297/5cf94c59-239f-b7c0-19b7-39c5632eecf3.png)

##分析モデル（ドメインモデルを使用した、動きのモデル化）
　：ドメインモデルを使って、その動きをモデル化したもの

ドメインモデルの要素を使って、全体の動きを模擬的に動かしてみます。
これもまた、洗濯機の動きを考える専門家の人が、認識している洗濯機を頭の中でどう動かして考えるのかを描きます。
その手段として、ここではシーケンス図を使っています。

ちょっと乱暴な説明かもしれませんが、感覚としては、
子供のころ、ウルトラマンや怪獣の人形を手で動かして遊んだ要領です。
クラス図の要素は、登場人物ですから、ウルトラマンや怪獣です。
その戦いの様子を、シーケンス図で描いているようなものです。
![washer_seq.png](https://qiita-image-store.s3.amazonaws.com/0/197297/9019f526-60fc-c092-dce9-a0dd2faac8b5.png)
![washer_analysis.png](https://qiita-image-store.s3.amazonaws.com/0/197297/91f2e1f8-e9f1-3dcb-27f9-92e2f53fb69e.png)

#まとめ
今回は、**オブジェクト指向分析は、「認識＋考え」のステップをUMLモデルを描きながら行うものなのだ**、という説明をしました。
これが最重要ポイントです。

ドメインモデルや分析モデルの描きかたについては、今回のポイントではなかったので、踏み込んで説明していません。ご注意ください。

#参考
『これだけでわかる!初歩のUMLモデリング―基礎から各種テクニックまで第一人者が伝授!!』　萩本 順三  著　技術評論社

『ゼロからわかる UML超入門』河合 昭男 著　技術評論社
【MATLAB】配列内のユニークな要素、それぞれの数を数える方法


## 使用環境

MATLAB R2017a


## 課題

例えば

```m
v = [1,2,3,4,2,2,1];
```

という配列があった時に、1が2つ、2が3つ、、というように数え上げるとします。

意外と分かりやすい名前の関数がなく、泣く泣くforループでプログラムを組んでいました。こんな感じ。

```matlab
v = [1,2,3,4,2,2,1];
vq = unique(v);
N = length(vq);

numvq = zeros(N,1);
tic
for ii=1:N
    numvq(ii) = sum(v==ii);
end
toc
```

やりたいことは実現できているんですが、配列数が巨大になると時間がかかるし、**なにより美しくない**。
そこで、forループを使わずに実現できないかと調べた３つの方法を紹介します。


それぞれの方法で計算にかかった時間の目安として、手元のlaptopで tic/toc を使用して計測した時間を書いておきます。


| 関数名 | 処理時間 |
|:-----------------:|:------------------:|
| arrayfun           | 0.16 秒 | 
| accumarray             | 0.0013 秒|
| histcounts             | 0.0016 秒|

for ループ 使用した場合は 0.18 秒程度でした。accumarray 関数いいですね。

実行時間計測のために、1から1000までの整数をランダムに持つ 10万 x 1 のベクトル v を作って、それぞれの整数が何回現れるかを求めてみました。

以下それぞれのコードです。


## [arrayfun 関数](https://jp.mathworks.com/help/matlab/ref/arrayfun.html?s_eid=PSM_29435)

```m
N = 1e5;
v = randi(1000,N,1);
numvq = arrayfun(@(x) sum(v == x), unique(v));
```
これは for ループは避けられましたが、速度はいまいち。


## [accumarray 関数](https://jp.mathworks.com/help/matlab/ref/accumarray.html?s_eid=PSM_29435)

```m
N = 1e5;
v = randi(1000,N,1);
numvq = accumarray(v,1);
```
関数の挙動を理解するのに時間がかかりましたが、計算速度はこれが最も速かった。



## [histcounts 関数](https://jp.mathworks.com/help/matlab/ref/histcounts.html?s_eid=PSM_29435)


```m
N = 1e5;
v = randi(1000,N,1);
numvq = histcounts(v,'BinMethod','integers');
```

histcounts 関数は R2014b で導入された比較的新しい関数ですが、このオプションは意識したことありませんでした。



### 参考
Q&Aサイト[MATLAB Answers](https://jp.mathworks.com/matlabcentral/answers/index?s_eid=PSM_29435)より
- [how can I count the number of elements on a vector?](https://jp.mathworks.com/matlabcentral/answers/282986-how-can-i-count-the-number-of-elements-on-a-vector?s_eid=PSM_29435)
- [Can I use UNIQUE to get a count of the number of times each element is repeated?](https://jp.mathworks.com/matlabcentral/answers/96776-can-i-use-unique-to-get-a-count-of-the-number-of-times-each-element-is-repeated?s_eid=PSM_29435)
- [How can I count the number of elements of a given value in a matrix?](https://jp.mathworks.com/matlabcentral/answers/181613-how-can-i-count-the-number-of-elements-of-a-given-value-in-a-matrix?s_eid=PSM_29435)
を参照しました。
iconvに関する自分用覚書(基本文法/ 利用できる文字コードを調べたい/変換エラーの文字を無視・置換したい)


日本社会で働くプログラマ、もとい非英語圏のプログラマにとって避けて通れないものが文字コード。とりわけ日本企業向けの受託開発を主とするSIerに勤めていると「年代物のメインフレームシステムが送ってくる、聞いたこともない文字コードのファイルをUnixベースのシステムに取り込む」「日本人大好きExcelで文字化けしないようにUTF-8のCSVをSJISに変える必要がある」などなど、文字コード変換を行う場面に出くわすことが多々あります。SIer勤めでなくとも、プログラマであれば文字コード周りのつらさはわかってもらえると思いますが、一方で文字コードほど非情報技術者にそのつらさがわかってもらえないものも珍しく、炎上とまではいわないものの、トラブルに発展することもないことではありません。

前置きはさておき、UnixやLinux環境において文字コード変換を行いたいときに利用するコマンドが`iconv`。個人的にはよく利用するコマンドなので、その利用法やTipsなどを簡単にまとめておきたいと思います。

# 基本文法

たとえば「CP932のファイル`cp932.txt`をUTF-8に変換し、その結果を`utf8.txt`に出力したい」場合は次のように書きます。

```bash
iconv -f CP932 -t UTF-8 cp932.txt > utf8.txt
```

`-f`オプションで変換元文字コードを、`-t`オプションで変換後の文字コードをそれぞれ指定します。`-f`が"FROM"、`-t`が"TO"というわけです。なお__`iconv`は変換結果を標準出力に出力します__。よって結果をファイルに書き出したい場合はリダイレクトしてやるか、あるいは以下のように`-o`オプションを利用することになります。

```bash
iconv -f CP932 -t UTF-8 -o utf8.txt cp932.txt
```

__2017-08-29 追記__

書き忘れていましたが、`iconv`は標準入力を取ることも可能です。

```bash
echo "stdin text" | iconv -f UTF-8 -t CP932 
```


# 利用できる文字コードを調べたい

__「手元の環境にインストールされている`iconv`が変換できる文字コードを知りたい」という場合には`-l`オプションを利用します。__

```bash
root@mypc$ iconv -l
The following list contains all the coded character sets known.  This does
not necessarily mean that all combinations of these names can be used for
the FROM and TO command line parameters.  One coded character set can be
listed with several different names (aliases).

  437, 500, 500V1, 850, 851, 852, 855, 856, 857, 860, 861, 862, 863, 864, 865,
  866, 866NAV, 869, 874, 904, 1026, 1046, 1047, 8859_1, 8859_2, 8859_3, 8859_4,
  8859_5, 8859_6, 8859_7, 8859_8, 8859_9, 10646-1:1993, 10646-1:1993/UCS4,
  ANSI_X3.4-1968, ANSI_X3.4-1986, ANSI_X3.4, ANSI_X3.110-1983, ANSI_X3.110,
  ARABIC, ARABIC7, ARMSCII-8, ASCII, ASMO-708, ASMO_449, BALTIC, BIG-5,
  BIG-FIVE, BIG5-HKSCS, BIG5, BIG5HKSCS, BIGFIVE, BRF, BS_4730, CA, CN-BIG5,
  CN-GB, CN, CP-AR, CP-GR, CP-HU, CP037, CP038, CP273, CP274, CP275, CP278,

(以降も文字コードの一覧が並ぶが、長すぎるので省略)
```
 
 つまり`iconv -l`は利用できる文字コードのリストを標準出力に出力します。あとは`grep`などを利用して、目当ての文字コードを探し`-f`や`-t`に指定するだけです。
 
# 変換エラーになるとき(変換エラーの文字を無視・置換したい)
 
さて機嫌よく`iconv`による文字コード変換を行っていると、次のようなエラーに出くわすことがあります。

```bash
root@mypc$ iconv -f UTF-8 -t CP932 utf8.txt > cp932.txt
iconv: 位置 4 に不正な入力シーケンスがあります
```
これは文字コードの変換に失敗した、上の例でいえUTF-8にあってCP932にない文字をCP932に変換しようとしたということを意味します。

__`iconv`は通常、変換できない文字に出くわした場合「変換できたところまでを標準出力に出力したのち、エラーメッセージを標準エラー出力に出力して終わり」という形をとります__。このような仕様は情報を損失を防ぐという点で「あり」なのかもしれませんが、多くの場合文字コード変換は情報損失を覚悟のうえで行っており、途中でやめてしまうよりは無視もしくは置換して変換を続行するほうが理にかなっていることも少なくありません。つまり変換できない文字の無視もしくは置換を`iconv`で実現するにはどうすればよいでしょうか?

まず__無視したい場合は、`-t`に指定する文字コードの後ろに`//IGNORE`を付与するか、`-c`オプションを利用するかのどちらかです。__

```bash
iconv -f UTF-8 -t CP932//IGNORE utf8.txt > cp932.txt
iconv -c -f UTF-8 -t CP932 utf8.txt > cp932.txt
```

次に__置換する場合、具体的には変換できない文字をそれらしい文字に置換する場合は`-t`に指定した文字コードの後ろに`//TRANSLIT`を付与します。__

```bash
iconv -f UTF-8 -t CP932//TRANSLIT utf8.txt > cp932.txt
```

たとえば「変換できない文字に出くわした場合は一律`?`に置換したい」などなど、もっと細かく制御を行いたい場合はおとなしくPerlやRubyなどを利用しましょう(´・ω・`)
PostgreSQLからMySQLへ(Taps)

# ■背景
今本業を持ちつつも，知人企業のサービスも運用したりしています．
最近AWS,AWSって話が多いですが，実はHerokuも多い(副業で運営しているサイトもHeroku).

今回，知人から依頼されたサイトもサービスイン前ですが，Herokuで構築されていました．
また既に別で開始しているメディアはAWS上とのことで，運用上まとめたいと思い，AWSへに移行をきめました．

Herokuの場合よくあるのですが，DBはだいたいPostgreSQL．一方で既存のメディアはRDS.これも同じにしたいと考え，DB移行をどうするかを検討しました．
(副業のサイトはHeroku＋MySQLなので使えないこともない)

# ■目的
Heroku提供のPostgreSQLからRDSへの移行．

# ■調査
最初は，PostgreのDumpを取って中身をエディタで書き換え，それをMySQLにインポートしようと思いました．が，よくよく調べてみるとこんなgemが．

[taps](https://github.com/ricardochimal/taps)

これを使えば，簡単にDB移行ができそうです．ただし*Known Issues*にあてはまると使えません．
また一部手動でソースを書き換えました．
[参考](https://github.com/stickymess/taps/commit/2ef963235ff1abcd275f0df1a152025ca3769a1f)

# ■実施
早速DBを移行してみました．実施時間はサービスイン前でデータもほとんどなく，参考になりませんが，準備から実施まで1時間もいりません．

### 手順
今回行った手順です．
(1) HerokuのPostgreからDumpファイルを取得
コマンドラインならこんな感じ

```
heroku login
heroku pg:backups capture --app {AppName}
heroku pg:backups --app {AppName}
curl -o latest.dump `heroku pg:backups public-url -a {AppName}`
```

また接続情報を取得しておく．
もしくは，[PGAdmin](https://www.pgadmin.org/)で接続してバックアップファイルを取得してもOK.

(2) 開発用のEC2にSCP
適当なツールでPostgreをリストアするサーバにアップ．

(3) 開発用サーバでPostgreSQLを起動してDBをインポート

１で取得したDumpをインポート.このDBは移行元になります．

(4) 開発用MySQLに移行先のDBを作成
`create database {DB_NAME}`
これは移行先のDBになります．

(5) taps起動
まずはtapsの起動．HTTP経由でデータをコピーするようです．

```taps server postgres://{postgreのユーザ}:{postgreのパスワード}@localhost/{移行元のDB名}?encoding=utf8  {basic認証ID} {basic認証PASS}```

この状態で移行先指定のコマンドを実行．

```taps pull mysql://{mysqlのユーザ}:{mysqlのパスワード}@localhost/{4で作ったDB} http://{basic認証ID} {basic認証PASS}@localhost:5000```

これで移行が始まります．

(6) DBの確認
最後に移行されたDBに接続して，テーブルやINDEX，データなどを確認しておしまい．

# ■考察
どのクラウドサービスを選ぶかは「慣れている」とか「やってみたい」など色々な理由があると思います．
その中でHerokuの良さは環境をある程度容易に構築できる点ではないかと．ちょっとしたサービスを作って素早く世に出したいと考えるアントレプレーナブルなエンジニアの方たちには，かなり素晴らしいサービスだと思います．

もちろん，サービスが成功し巨大化した場合もHerokuを続ける場合もありますし，違うサービスに乗り換えることもあると思います．(すみません，Herokuで大規模サービスを運用した経験がないため乗り換え前提になってしまっています・・・．)

その際ネックになるのがDBに移行ではないかと．
少し前にオンプレからAWSへ移行プロジェクトを行いましたが，やはりネックはDBで・・・．
さらに今回のようなDBMSも変わってしまう移行になると，これは大変な状況で，たまたまサービスイン前だから，片手間でやれた感が強いです．

お金や時間をかけずにフィジビリティスタディではじめつつ，将来の構成も考える必要があるのが，今のWebサービスを作るうえでのたのしさではないかと．
ニューラルネットワークでマスキングをしても勾配のことは気にしなくて良い

## 疑問

ニューラルネットワークで可変長の行列を扱うときに図のようにデータをマスキングすることがある。

![mask.png](https://qiita-image-store.s3.amazonaws.com/0/152362/fff02e12-8c54-5083-c40f-5d9f8c93d086.png)

$W$や$x$の勾配がマスクされた場所がまるでなかったように振る舞うことを期待する。
このとき、 各$x_{i, j}$に対する$W$の勾配は、マスクがある場所では0、ない場所では適当な数字になるはずなので、平均をとると$W$の勾配がマスク分"薄められて"しまうのではと疑問に思った。

## 結論

影響をうけない。なぜならば、勾配の計算は平均ではなく加算だから。

## 確認

確認のためにやったのではなく、やってみている途中で気づいた。
下記はchainerを使った確認。

```python
import chainer
import chainer.functions as F
import numpy as np

>> x_orig = np.random.random((3, 2)).astype(np.float32)
>> W = chainer.Variable(np.random.random((2, 1)).astype(np.float32))
>> x = chainer.Variable(x_orig)
>> print x
variable([[ 0.45719743  0.99944282]
          [ 0.6675607   0.33180818]
          [ 0.37650901  0.48325235]])

>> y = F.matmul(x, W)
>> print y
variable([[ 0.26743633]
          [ 0.2829439 ]
          [ 0.18782631]])

>> loss = F.squared_error(y, np.zeros(y.shape, dtype=np.float32))
>> mask = np.array([[True], [True], [False]])
>> loss_masked = F.where(mask, loss, np.zeros(loss.shape, dtype=loss.dtype))
>> print loss_masked
variable([[ 0.07152219]
          [ 0.08005726]
          [ 0.        ]])

>> loss_tot = F.sum(loss_masked)
>> loss_tot.grad = np.array(1.0, dtype=np.float32)
>> loss_tot.backward(retain_grad=True)
>> print loss.grad
[[ 1.]
 [ 1.]
 [ 0.]]

>> print W.grad
[[ 0.62230688]
 [ 0.72234082]]
```

次に、マスキングを行うかわりに、本当にその行をなくしてしまう。

```python
>> W.cleargrad()
>> x = chainer.Variable(x_orig[:2, :])
>> print x
variable([[ 0.45719743  0.99944282]
          [ 0.6675607   0.33180818]])

>> y = F.matmul(x, W)
>> loss = F.squared_error(y, np.zeros(y.shape, dtype=np.float32))
>> print loss
variable([[ 0.07152219]
          [ 0.08005726]])

>> loss_tot = F.sum(loss)
>> loss_tot.grad = np.array(1.0, dtype=np.float32)
>> loss_tot.backward(retain_grad=True)
>> print loss.grad
[[ 1.]
 [ 1.]]

>> print W.grad
[[ 0.62230688]
 [ 0.72234082]]
```

このとおり、勾配はかわっていない。

## 考察

考えてみたらあまりにも当たり前だった。ニューラルネットワークまわりで平均を使う処理はほとんどない。
一応、batch normalizationだとかを使うときは少し気をつけたほうがよいかもしれない。
Leaflet で circleMarker を手前側に表示

こんにちは。
[Leaflet](http://leafletjs.com) で GeoJSON データなどを表示させる際に、[circleMarker](http://leafletjs.com/reference-1.2.0.html#circlemarker) が手前側に来るように表示させました。[pane](http://leafletjs.com/reference-1.2.0.html#map-pane) を指定する方法です[^1]。

[^1]: これは "[How to set the zIndex layer order for geoJson layers?](https://stackoverflow.com/questions/39767499/how-to-set-the-zindex-layer-order-for-geojson-layers)" (stackoverflow) の中の方法を参考にしました。

<img width="247" alt="map.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/54617/3e94ff41-4615-700e-96a6-583325f3bf04.jpeg">

なお、指定しない場合には：

<img width="246" alt="map2.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/54617/eb9a29a6-ec0c-a7d0-997b-f3dcbc2fab92.jpeg">

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
</body>
<script>
var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
map.setView([50.16, 2.3], 9);

var geojson = L.layerGroup([
	L.marker([50.16, 2.3]),  // "Point"
	L.marker([50.20, 2.3]),  // "Point"
	L.polyline([[50.16, 2.1], [50.16, 2.5]]),  // "LineString"
	L.polyline([[50.20, 2.1], [50.20, 2.5]]),  // "LineString"
]).toGeoJSON();

<!-- https://stackoverflow.com/questions/39767499/how-to-set-the-zindex-layer-order-for-geojson-layers -->
map.createPane("pane620").style.zIndex = 620;

var circleMarker = function(feature, latlng) {
    return new L.CircleMarker(latlng, {
     	pane: "pane620",
    	radius: 4,
    	color: "#ff8",
    	fillColor: "#f20",
    	fillOpacity: 1,
    })
    .bindPopup("marker in pane620")
    .bindTooltip("tooltip").openTooltip();
};

L.geoJson(geojson, {pointToLayer: circleMarker}).addTo(map);

</script>
</html>
```
セルの高さを自動設定にするでつまづいた( できない )時

//参考にさせていただいたURL: http://www.swift-study.com/uitableview-auto-cell-height/

今回セルの高さを自動設定するを見ていて自分はちょっとつまづいたので、記事を書いて見ました。:shamrock:

今回ここに来る前に、おそらく設定をするのに。

・XIb上のセルの(高さ調節したい)ラベルの制約(上下、左右つける。)※heightは設定しない。
・viewDidLoad内に

```.swift
tableView.estimatedRowHeight = 20 //セルの高さ
tableView.rowHeight = UITableViewAutomaticDimension //自動設定
```
・高さを調節するラベルの行数の制限を0にする

まで行ってきたかと思います。

本当にこれだけ書いていればできるのですが、
セルの高さを決める

```.swift
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {}
```
メソッドに何か高さを指定していたらできません。

なのでviewDidLoad内に書いてあった

```.swift
tableView.estimatedRowHeight = 20 //セルの高さ
tableView.rowHeight = UITableViewAutomaticDimension //自動設定
```
の記述は、

```.swift
    /*
     セルの高さを設定
     */
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { 

        tableView.estimatedRowHeight = 20 //セルの高さ
        return UITableViewAutomaticDimension //自動設定
     }
   
```

に書き直してください。

セルの高さの設定(デリゲートメソッド)を消すかどっちかにしてください。
当たり前なのか、こういう書き方を見つけられなかったからなのか？見当たらない気がしたので書いて見ました。

一人でもあ~!!ってなってくれる方がいたら嬉しいです。:sunny:
暗号通貨のウェブウォレットっぽいものをPHPで作る その０

# 追記@2018/03/20
このプロジェクトは一旦休止とさせていただきます。
理由としては、

- フロントエンドの知識を頭に詰める
- バックエンドの知識を頭に詰める (フロントエンドとは別言語)
- それらを使って、動作するサイトを完成させる
- 以上を予備知識なしで遂行

という計画を実現する説明を、簡潔に書けるビジョンが見えなくなってしまったということが挙げられます。また、最後の投稿から半年ほど放置してしまい、情報が少し古くなっていることも理由の一つです。

(´・ω・｀) oO(現代Webプログラミング、学習コスト高すぎ…)

とは言っても、フロントエンドとバックエンドを分けて学ぶことができれば、その後2つを組み合わせて開発するのは比較的容易だと考えています。
今後の予定としては、フロントエンドのみのプロジェクトを今月中にスタートし、それが完成した後このプロジェクトを作り直すことを計画しています。
こうすることで、この投稿を参考に学習する際の負担を減らすことができ、また投稿そのものも冗長になることなく簡潔に書くことができる…と期待しています。

ただしバックエンドに関しては、この記事をリスタートする際に大幅な変更を予定しています。その時のWeb開発の風潮にもよりますが、使用する言語から変更することも考えています。PHP&Laravelが好きな方、申し訳ございません…。

リスタートさせる際は新規の記事として投稿する予定です。そのため、この記事は今回の追記が最後の編集となります。
最後になりましたが、最新の投稿から半年間も連載を放置してしまい、申し訳ございませんでした…！次回からは、このようなことが起こらないよう、十分なプロットを立ててから投稿していきたいと思います。

# 追記は以上となります。以下は追記前の本文です。

はじめまして、@syoboon77と申します。この記事がQiita初投稿です。ﾖﾛｼｸｵﾈｶﾞｲｼﾏｽ
このページ(連載？)はWeb開発もしくは暗号通貨をまだ本格的に学んでいない方でもググれば分かる程度の解説を目指しています。Web開発に慣れている方からすれば当たり前のような環境構築なども記述する予定です、予めご了承ください。

また、誤った記述を発見したり、何か勘違いしてそう…などありましたらコメントや編集リクエストをお願いします！

# Monacoinで遊んでたら高機能なFaucetみたいなのを作りたくなった
Monacoinという暗号通貨があります。日本で作られた最初の暗号通貨なので日本語で情報交換できたり、某巨大掲示板で生まれたので遊び的な要素が多かったりと、他の暗号通貨にはない特徴を色々と持っています。
日本の人であれば恐らくは(暗号通貨の中で)一番とっつきやすいのではないでしょうか。その一方で、世界で2番目にSegwitをアクティベートするなど、技術開発も盛んだったりします。

- [segwitってmonacoinに使えないの？ - Ask Mona](http://askmona.org/4787)
- [【号外】モナコイン、Segwit可決！！ - 暗号通貨界隈の賑わい](http://cryptocurrencynote.hatenablog.com/entry/2017/04/16/093330)

詳しい説明は省きますが、一言。Monacoin楽しいです。それが乗じて何か作ってみたくなり、Faucet(少量の暗号通貨を配布するサービス)が付いたウェブウォレットを作成することにしました。
…のですが、情報収集が難しく何をすべきか迷うことがあり、途中まで作ったにも関わらず作り直すこともあって情報を整理する必要性を感じ、最終的に「文に起こすなら公開しておけば誰かの役に立つかも」と考え、Qiitaで投稿することを決めました。

# …で、何をどうすれば作れるのか
想像するだけではWebサービスは作れません。かといって何の準備もなしでは何から始めれば良いのかさえも分かりません。
前列を探せばMonacoinのウェブウォレットはいくつか存在しますが、完成品としてのものであり製作工程を公開しておらず、Bitcoinなどは英語の文献が殆ど…
苦労しながらも断片的な情報を収集し、作りやすさを最重視して組み上げた結果が以下の構想・構成です。

-サーバOSはUbuntu。Windows上の開発環境はVagrantを使用して差異を吸収
-Web周りとしてはApache、PHP、MariaDBを使用。フレームワークはLaravelで
-ウォレットにmonacoindを使用、その監視にsupervisorを使う
-Ajaxなどは極力使用せず、送金などの画面も専用のページを用意する。フロントエンドの改良は完成後でもできるので
-作業が一段落する毎にGitリポジトリへコミットする。極力シンプルにしたいので、完成するまではmasterブランチ以外使わない
-実用レベルまで完成したらVPSを契約し、ソースコードをGitリポジトリからをpullして公開。これを本番環境とする

このくらいでしょうか。作るプログラムの設計などは後ほど解説する予定です。
OSやサーバソフトウェアなどの選定も、扱いやすさを最重視した結果です。嘘です。CentOSはmonacoindのビルドが上手く行かなかったトラウマがあり、Ubuntuが有名なので使ってるだけです。Nginxに至ってはインストールしたこともありません。なんだか申し訳ない…

# もくじ
## その０
このページです。計画の経緯と全体像の説明。
## その１（環境構築編）
[WindowsにVagrantとか入れてLAMPサーバ+αを立てるまでを１から説明する - 暗号通貨のウェブウォレットを(ry その１](http://qiita.com/syoboon77/items/72f6a426f562befbe0e8)
LAMPサーバ、monacoind、supervisorなどをインストールする、いわば環境構築編です。
Vagrant CentOS7 Ruby開発環境構築


# Vagrantを入れる
https://www.vagrantup.com/
ここからインストール

# Vagrantfileを作成
好きなところにフォルダを作成
そのフォルダ直下で

```
vagrant init
```

生成したVagrantfileを一行修正

```
config.vm.box = "centos/7"
```

# Vagrant起動
### 生成したVagrantfileの階層で
```
vagrant up
```

# vagrantに接続
```
vagrant ssh
```

# rbenvを入れてruby実行環境を作る
## gitを入れる
```
sudo yum -y install git
```

## rbenvをもってくる
```
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
```

## pathに追加
```
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
```

## bash再起動
```
source .bash_profile
```

## ruby-buildを持ってくる
```
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
```

## 必要なものを入れる
```
yum install -y openssl-devel readline-devel zlib-devel
```

## 好きなバージョンを入れる
```
rbenv install バージョン
```
結構時間かかる

## 読み込み
```
rbenv rehash
```

## 使いたいrubyを決める
```
rbenv global バージョン
```
これを指定しない場合すでにあるシステムのrubyを使用します

## .bash_profileに追記＆再読み込み
```
# 追記
eval "$(rbenv init -)"
#再読み込み
source .bash_profile
```
Fast inequality joins of Presto

Inequality joinというのはカラムの完全一致ではない比較でレコードをjoinしていく方法です。多くの場合、下記のように特定のカラム(e.g. `bucket`)が一致しているレコードをつなげていきます。

```SQL
SELECT * FROM t1, t2 WHERE t1.bucket = t2.bucket
```

この`bucket`が一致した中でも特にある範囲条件を満たすようなものだけjoinしたい場合には下記のように書けます。

```SQL
SELECT * FROM t1, t2 WHERE t1.bucket = t2.bucket AND t1.val1 < t2.val2;
```

これをinequality joinといいます。Prestoではequal条件の方でまずinner join([Hash join](https://en.wikipedia.org/wiki/Hash_join))を行い、それらのレコードに対してinequality条件の方でfilterしていきます。

このアルゴリズムの問題はfilterのときにレコードをすべて走査していかないとinequality条件を満たすレコードを見つけられないことです。t1の1レコードに対してequal条件にかかったレコードが膨大になると例えinequality条件でほとんど弾かれるとしても、とても効率が落ちてしまいます。

## fast_inequality_join
そこでPrestoの0.174から`fast_inequality_joins`というsession propertyが追加されました。デフォルトではオフになっていますが(バグのため0.177からオフにされています)、これをオンにするとequal条件でひっかかったレコードをsortして持ってきてくれます。

```java
if (filterFunctionFactory.isPresent() &&
      filterFunctionFactory.get().getSortChannel().isPresent() && 
      isFastInequalityJoin(session)) {
  positionLinksBuilder = 
      SortedPositionLinks.builder(addresses.size(), new PositionComparator(pagesHashStrategy, addresses));
}
else {
  positionLinksBuilder = ArrayPositionLinks.builder(addresses.size());
}
```

sortされたため、inequality条件(`t1.val < t2.val`)を比較する際は二分探索を行い、高速に範囲を決定することができます。計算量はすべてのt1レコードに対してマッチするbucketのサイズ分だけ走査する必要があった

```
O(t1のサイズ * bucketのサイズ)
```

からt1のレコードそれぞれに対して二分探索にマッチしたbucketのlogとそのマッチした部分までの走査が必要なので

```
O(t1のサイズ * (log(bucketのサイズ) + バケット中にマッチしたレコード数))
```

inequality条件で当てはまるレコードがbueketのサイズとくらべて少なければ少ないほど速くなります。

## Reference

* [Use SortedPositionLinks in LookupJoinOperator](https://github.com/prestodb/presto/commit/df71be7e7a9e3a72ad16a7114f21a3d3adb744c2)
* [fast inequality joins](http://prestodb.rocks/internals/fast-inequi-joins/)
Haskell Stackでエラー「Failed to download template new-template: to create project ...」の対処法

# stackのバージョン

```
$ stack --version
Version 1.5.1, Git revision 600c1f01435a10d127938709556c1682ecfd694e (4861 commits) x86_64 hpack-0.17.1
```

## エラーの発生状況

`stack new hogehoge`すると、**`Failed to download template new-template...`**というエラーがでる。

```sh
$ stack new hogehoge
Downloading template "new-template" to create project "hogehoge" in hogehoge/ ...
Failed to download template new-template: unknown reason, status code was: 500
```

何回もやるとstatusコードは500番台の他のコードもでました。


# 解決方法

```sh
# テンプレートのファイルがあるリポジトリをクローンする
$ git clone https://github.com/commercialhaskell/stack-templates.git
# クローンしたリポジトリのファイルをテンプレートして指定して、stack newする
$ stack new hogehoge ./stack-templates/new-template.hsfiles 
```

templateをダウンロードで落ちるようなので、
テンプレートファイルを明示的に指定して、作成してみました。


# 発生時間

2017/08/23 22:20頃

# 考えられる原因

ちょうど現在、https://raw.githubusercontent.com/ が落ちていて、`stack`がGithub rawからダウンロードしているかは、知りませんが、ちょうど落ちていますし、stackのデフォルトのテンプレートをGithubで管理している感じなので、もしかすると原因かもしれません。

![Screen Shot 2017-08-23 at 10.35.05 pm.png](https://qiita-image-store.s3.amazonaws.com/0/84451/c560bdea-f22e-8de7-af0b-cb5b9266e954.png)



<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">GitHub raw が死んでる</p>&mdash; Takeshi Shinoda (@takeshinoda) <a href="https://twitter.com/takeshinoda/status/900337474190180352">2017年8月23日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">github氏〜raw fileが見れないでござるよ</p>&mdash; 本格手打ち麺 (@tyage) <a href="https://twitter.com/tyage/status/900332330979475456">2017年8月23日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


# 参考にしたところ

* [stackのオレオレテンプレートを作って楽をする - Qiita](http://qiita.com/techno-tanoC/items/72d188cd19d8e3ac890d)
そして、父になったエンジニアが18時退社を強行した話

今年の2月に子供が産まれました。

子供が産まれる前は
仕事 <<<<<< ｜越えられない壁｜ << ドラクエ10 <<<  飲み会
だったのが

子供が産まれてからは、
仕事 <<<<<< ｜越えられない壁｜ <<<  飲み会 << ドラクエ11 <<  子供
という状況に陥ってしまい、どうしても仕事と両立出来ない状態が続きました。

特に、晩御飯の時間が実は一番家族に迷惑をかけていて、
19時を過ぎて帰宅すると、子供のお風呂＆寝かしつけ時間に差し掛かってしまい
結局晩御飯を21時以降にするか、ヨメが２回晩御飯を作らないといけないという状態になってしまいます。
弊社は18:30が就業時間なので、どう頑張っても帰宅は19時過ぎてしまいます。

ただでさえ育児にはパワー使うのに晩飯の時間を制限したり、２回作らせるとか言語道断。
これでは精神安定上良くないと思い、何か打つ手が無いか考えました。
そして、ITという職種と就業規則を全力で利用する方法を思いつきました。

まず就業規則には

```
就業時間は午前9:30から午後6:30までとし、このうち午前12:00から午後1:00までを休憩時間
とする。
2.季節･職種､職場および社員の事情によって前項によらず別の定めをすることがある｡ 
```

とあり、基本的には9:30～6:30らしいが社員の事情によって別の定めをすることが出来ると。
（既に拡大解釈）

そして更に、フレックス制度があり、そこには

```
 1 日の標準労働時間は、8 時間とする。なお、会社が別途指定した者については、この限
りでない
```

つまり、8時間働けばOKですよと。

じゃあ、**9:00～18:00** で働くのはOKですね。
何も変わっていないようで実はぜんぜん違う世界が広がっていました。


というわけで30分のサマータイムを導入することで
一日の動きがこんな感じになりました。

6:30 起床
6:50 ミルク
7:00～8:20 朝食、新聞、準備、出発
9:00 始業

18:00 退社
18:40 帰宅
18:45 晩御飯、その後あやしつけ
19:30 お風呂（子供と共に）
20:00 ミルク
20:30 子供就寝、業務開始
23:45 就寝

というサイクルです。
表面上18時帰宅、終業なのですが、実際は20:30から残業開始
短いときで22時頃まで、繁忙期で2時くらいまで仕事しています。
これを**二次業務開始**と勝手に呼んでいます。

#メリット

## 18時退社のメリット１
これはなんといっても、子供に顔を忘れられないことでしょう。
今のところまだ一度も「あんただれ？」って顔はされていないです。
帰ったら笑顔の出迎えをしてくださいます。

## 18時退社のメリット２
これは予想外だったのですが、残業して深夜2時とかになっても次の日疲れていません。
何故かといえば、メシも済んでてそこが寝床なわけなので
歯磨きしてすぐ寝れる、これは非常に大きいです。

## 18時退社のメリット３
18時を過ぎて本気を出す人って実は意外と多くて、19時とか20時とかに
お客さんからメールが来ることも多々あります。しかも緊急とか。
その場合でも、20:30から二次業務開始なので、ゆとりを持って対応を出来ます。
また、残業無くてもこんな感じでqiita書いたり本読んだりする時間がゆったり取れます。

## 18時退社のメリット４
人間らしい生活が送れます。
18時台に晩御飯を食べて、朝は6:30に小鳥のさえずりとともに
（実際には子供の叫び声）爽やかな朝を満喫できます。

# デメリット
## 18時退社のデメリット
子供が顔を覚えていてくれる分、会社の人に顔を忘れられます。
あれ、今日居ましたか？なんて聞かれるのは当たり前。
最悪は仕事をしていないんじゃないか、暇なんじゃないかと思われることもあります。

## 残業する上でのデメリット
子供がちゃんと寝てくれればいいのですが、何か起きて相手をするハメになると
途端に１時間、２時間持って行かれます。
今はヨメ様が全部その辺は担ってくれているので非常に助かりますが

という感じで、18時退社は健康にも家族にも優しい働き方だと思います。
次は8:00～17:00を目指したいなと思ったり思わなかったり・・・
Go言語のhttp.StripPrefix()等をひとつずつ確認


よくわからなかったので1つずつコメント書いてみた。考え方の補助に。

```go
package main

import (
	"net/http"
)

func main() {
	// string型のディレクトリ名 "html" を http.Dir型 にキャストする
	dir := http.Dir("html")

	// http.Dir型 は FileSystemインターフェースを満たすので
	// これを http.FileServer() に渡して 静的ファイルを返すハンドラ html_hdlr を得る
	html_hdlr := http.FileServer(dir)

	// html_hdlr を元に、先頭の "/file/" を除外するハンドラ split_prefix_hdlr を作成する
	split_prefix_hdlr := http.StripPrefix("/file/", html_hdlr)

	// DefaultServeMux に URLパス "/file/" と split_prefix_hdlr のペアを追加する
	http.Handle("/file/", hdlr)

	// サーバーを起動する
    // nilを指定すると DefaultServeMux が使われる
	http.ListenAndServe(":8081", nil)

	// -> ブラウザで http://localhost:8081/file/index.html にアクセスすると
    //    静的ファイル html/index.html が得られる
}
```
OpenShift Online3 STARTERでNode.js 6.0 x MongoDB 環境を公開してみた③

# ③OpenShift実践編

今回はNode.jsのバージョンアップ（４⇒６）とGitリポジトリの変更までをやってみたいと思います。

## Node.jsのバージョンアップ&ソースリポジトリ変更

BuildConfigから設定できます。
設定方法としては
1. Builds - Builds画面を開く
2. ビルド設定を更新するアプリケーションを選択する
3. 画面右上のActionsからEditを選択する
4. 画面左下に「Show advanced options」があるのでここを押して詳細設定を展開する
5. 「Source Secret」の項目に「Resources - Secrets」画面で事前に作成しておいたssh秘密鍵のResourceを設定する（プライベートGitアクセス設定）
6. Image Configuration項目でNode.jsバージョンを指定する場所があるのでこれを6にする

↓の図は設定済みの図になります。
![Payload Too Large](https://goo.gl/MFHLRS)

## Webhook設定

同じくBuildConfigから設定できます。
まぁ空気読めばいけるかと。
1. Add WebhookからWebhookURLのタイプを選択し、（今回はBitbucket）addするとURLが追加されます。
2. このURLをBitbucketのリポジトリのwebhook設定に追加します。

設定したけど試してないです。
![Payload Too Large](https://goo.gl/USoHUX)

## 構成管理

BuildConfigはyamlで出力できます。
これを専用のGitRepositoryで管理すればイイ感じに
「Infrastructure as a Code」になりそう。
yaml取り込めばアプリケーション構築完了～みたいな。

Resource関連のみ別途設定する必要はあるっぽい。
yamlの中見てたらReource参照値っぽい謎の文字列が書いてあった。
な～んかこのあたり微妙ですね。。。（本来のやり方が別にあるのだろうか？）
ResourceはResourceで別途yaml管理できるっぽい。（Resource開いて右上のActionからEdit yamlを選択）

「Infrastructure as a Code」について
http://mizzy.org/blog/2016/04/22/1/

## まとめ

ここまでやれば

1. Bitbucketでソース修正
2. webhookで自動ビルド・デプロイ
3. テスト実行
4. Route切り替えしてBlueGreenデプロイ実施

という形でアプリケーションのイテレーションを実践できるんじゃないかなぁとなんとなーく思います。

とはいえまだComingSoonが多く実践投入にはまだまだ早いと思います。

## 検討・検証しきれてない点
1. データ領域のバックアップとかどうすればいいのかなー
2. 操作ユーザーの管理（たぶんResourceのMemberships）
3. コンフィグ管理（たぶんConfigMaps）
4. そもそもドキュメントあんまり見ずに書いてるから見なければ。。。
5. アプリケーション規模が大きくなった時のデプロイ速度（事前にビルドしておくので作成済イメージを立ち上げるだけなのだろうか。）
6. 他にも色々と。時間かけて考えてないのでRedhatに聞いてみるのが近道なのではないかと思う。

# 関連記事
+ [①OpenShift導入編](http://qiita.com/kimura-y/private/ecf92a80fd5fe8dabde3)  
+ [②OpenShiftコンソールまとめ編](http://qiita.com/kimura-y/private/96a45ba51e9184729224)