OmniAICreator/Qiita-1.07M huggingface dataset:
Node.jsでFetch APIを使うと XMLHttpRequest is not defined になる

Node.js で Fetch API を使う際、とりあえず `whatwg-fetch` を使って以下のようなコードを書いてみると `Error: XMLHttpRequest is not defined` というエラーが出る

```js
const { fetch } = require("whatwg-fetch");

fetch('https://httpstat.us/200')
  .catch(e => console.log(e))  // Error: XMLHttpRequest is not defined
  .then(r => console.log(r));
```

## 解決策
結論から言うと、Node.js では `isomorphic-fetch` を使うのが正しい。

```js
const fetch = require("isomorphic-fetch")

fetch('https://httpstat.us/200')
  .catch(e => console.log(e))
  .then(r => console.log(r));  // Response {}
```
`XMLHttpRequest` は基本的にはブラウザ固有のAPIになっている。Node.js にはこの代替として [Http API](https://nodejs.org/api/http.html) が用意されているので、ブラウザと互換な Fetch API を使うにあたっては今回の記事のように `isormorphic-fetch` や `node-fetch` などのラッパー実装が必要になる。
Ubuntu18.04での環境構築

Ubuntu18.04が正式リリースしたのでPC2台セットアップしたときのメモです。

※日本語化のやり方がわからなかったので、日本語設定でインストールしています。

## 1. Ubuntuのインストール

## 2. UPDATE + UPGRADE
ターミナルで<br>

```
$ sudo apt-get update
$ sudo apt-get upgrade -y
```

## 3. Google Chromeのインストール
- [Google Chrome](https://www.google.co.jp/chrome/index.html)をダウンロード
- `deb`ファイルを実行
- ユーザ同期で、別PCとブックマークと検索履歴を共有

## 4. sshのインストール
ターミナルで

```
$ sudo apt-get install openssh-server
```

## 5. OpenGLのインストール
ターミナルで

```
$ sudo apt-get install mesa-utils
```

## 6. Dockerのインストール

※まだ公式の方法ではインストールできないので
[ココ](https://linuxconfig.org/how-to-install-docker-on-ubuntu-18-04-bionic-beaver)を参考にインストール

ターミナルで

```
$ sudo apt install docker.io
$ sudo systemctl start docker
$ sudo systemctl enable docker
```

バージョン確認

```
$ docker --version
```

## 7. 基本的な使うものをインストール
```
$ sudo apt-get update
$ sudo apt install apt-transport-https ca-certificates curl git software-properties-common
```

## 8. `Docker`をsudoなし実行する設定
ターミナルで

```
$ sudo usermod -aG docker $USER
```

一度ログアウト

## 9. Python環境のインストール

[anaconda](https://www.anaconda.com/download/#linux)の`Python3`をダウンロード


ダウンロードしたファイルがあるフォルダでターミナルを開き

```
sh Anaconda3-5.1.0-Linux-x86_64.sh
```

※ファイル名は2018.4.28現在<br>
※いろいろ聞いてくるけど、デフォルトで<br>
※VSCodeもこのときにインストールする

とりあえず，こんなところです。
Fetch APIでネットワークエラーも含めてエラーハンドリングする

## Fetch API をラップした `fetchWithErrorHandling` を作る

fetch APIを使うにあたって、ネットワークエラーなどのハンドリングを考えると少しエラーハンドリングの順序を工夫しないといけない。結論から言うと、以下のようなコードにすることで例えばChromeの `ERR_CONNECTION_REFUSED` も含めて拾うことができる。

```js
const handleErrors = (res) => {
  if (res.ok) {
    return res;
  }

  switch (res.status) {
    case 400: throw Error('INVALID_TOKEN');
    case 401: throw Error('UNAUTHORIZED');
    case 500: throw Error('INTERNAL_SERVER_ERROR');
    case 502: throw Error('BAD_GATEWAY');
    case 404: throw Error('NOT_FOUND');
    default:  throw Error('UNHANDLED_ERROR');
  } 
};

const fetchWithErrorHandling = (url, options) =>
  fetch(url, options)
    // 1. ネットワーク周りなどのリクエスト以前の段階でのエラーを処理する
    .catch((e) => { throw Error(e); })
    // 2. サーバサイドで発行されたエラーステータスを処理する
    .then(handleErrors)
    // 3. 以上2つをパスした正常なレスポンスからJSONオブジェクトをパースする
    .then(res => res.json());
```
重要なポイントなのは `handleErrors` で**API側のエラーを拾う前**に `Promise.prototype.catch` でネットワークエラーなどの、APIへのリクエスト自体の失敗を拾っておくこと。これが必ず最初にないと、そもそもレスポンスが返されず `handleErrors` の内部で `res` を見る処理そのものがエラーになってしまう。

## `fetchWithErrorHandling` を使ってみる
以下は async/await と一緒に `fetchWithErrorHandling` を使う例。

```js
const unauthorizedRequest = async () => {
    try {
      await fetchWithErrorHandling('https://httpstat.us/401');
    } catch (e) {
      console.log(e); // Error: UNAUTHORIZED
    }
};

unauthorizedRequest();
```

## 余談: エラーステータスを例外としてcatchすべきか否か
そもそも論として、APIからのレスポンスとしての404や401を try...catch の中でエラーとしてハンドリングするべきなのか？ という点には、議論の余地がある。なぜなら、**40x系や50x系のエラーレスポンスをサーバサイドから受け取れているという点で Fetch API は処理を完了**しており、アプリケーションとしては正常であるから。

`fetchWithErrorHandling` は実装上の利便性のためにフロントエンド側のエラーとサーバサイド側のエラーをひとつにまとめて例外として処理しているが、厳密に例外処理を区分する場合には今回の実装は必ずしも適切ではない。
開発システム設計

# システム構築
趣味あるいはノマドでソフト開発を行うために以下のことを重視して開発システムの構築を行います。


- PCだけでなく，(ちょっとしたことなら)iPadでも開発できる
- 外出先でも(電波が届くとこならどこでも)開発できる
- 大きなダウンロードを外出先ですると容量が心配なので避けたい
- 外出先でもGPUをブンブン回して実行したい
- セキュリティは各コンポーネントで確保したい

まず，外部からアクセスして開発する部分の説明を。

- 開発および実行は(実際には)HostPCで行う。
- HostPCは自宅に置き，定額のブロードバンド回線に接続する。
- HostPCには`Amazon Route53`を使ってノートPCあるいはiPadからSSH接続する。
- セキュリティは図に書いてるものとかを混合で使う。

<img width="964" alt="fig_14.png" src="https://qiita-image-store.s3.amazonaws.com/0/210166/5bf3dec1-5ad0-8678-d331-ecf11496ff9f.png">

次に，ホストPCの内部の説明を。

- 実行環境を`Docker`コンテナでつくる
    - ランタイムはホストのものを使う。
    - データとコードはホストと共有しているフォルダに置いて使う。

こうすることで新規PCに環境移行する際に以下の5つの手順だけ行えばいいようになります。
    - OSのインストール
    - SSHのインストール
    - ランタイムのインストール
    - Dockerのインストール
    - ネットワーク設定

そして，この手順はGitLab上のWikiに書いておくことで作業をルーチン化します。

<img width="754" alt="fig_12.png" src="https://qiita-image-store.s3.amazonaws.com/0/210166/c06b2a8a-c530-94dc-6c32-c29ea329ef6c.png">

最後にデータの共有方法の説明を。

- Web関連は`Google Chrome`や`Firefox`のブックマーク同期
    - 開発で参考にしているサイトをPC間で共有
    - `GitLab`, `Github`でコードを共有
    - `Trello`でToDoリストを共有
- `GitLab`上のシェルをダウンロードして実行
    - ホスト内のHomeのディレクトリ構成を作り変える
    - NASからデータをダウンロードする
    - 必要なアプリケーションをダウンロード・インストールする。
- Codeを`GitLab`上からダウンロードする

<img width="880" alt="fig_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/210166/6905ab9d-e304-0cf0-34db-4212397fe48c.png">

どこでも開発できて，移植・増殖しやすく，データの喪失が少ない，そこそこセキュアでコスパがいいソフト開発環境のお話でした。
おいしい好みの順番

- (問題: q320)
- (サービス終了したし、もう時効だと思う)

## 概要

- 好みの順番の順序付け集合(グラフの有向辺)が与えられる。が、一部、順序付けに矛盾が生じている。順序付けを出来るようにするために取り除く必要がある要素の数を最小化せよ。

- 用意された入力データをgraphvizで表示すると、次のようになる。
    - ![q320.png](https://qiita-image-store.s3.amazonaws.com/0/29692/118a8cb1-048d-ffb0-0368-28acf09234eb.png)
    - この中で、矢印が循環しているのは、CJ間である。したがって、辺CJか辺JCを取り除くのが正解である。

## 解法

- 本問はつまるところ、有向辺の集合を **DAGにするために** 取り除く辺を最小化せよということである。
- これは[feedback arc set](https://en.wikipedia.org/wiki/Feedback_arc_set)と呼ばれる有名問題である。

## 疑問

- 用意された入力データはV=12だが、(CodeIQ感謝祭で聞いた話)実際にはV=100で出題する予定だったらしい。しかし、feedbac arc setはNP-hardであることが知られており、巡回セールスマン問題に類似した動的計画法を使ったとしても[V=20がせいぜい限界である(yukicoder)](https://yukicoder.me/problems/no/357)。
- トポロジカルソートを試みてソートできなかった辺を無視する解法はsub-optimalになると思うので…結局どういう解法を想定されていたのかわからないというorz
- なお、[以前yukicoderで実証実験を試みましたが失敗しています。](https://yukicoder.me/problems/no/3011)その折は大変ご迷惑おかけしましたToT

## 追伸

- DAGになっている頂点を取り出すだけなら簡単です https://qiita.com/cielavenir/items/58abf001a23632d04b69
Glueの使い方的な⑬(Glueを試してみる！チュートリアル集)

# Glueを操作するチュートリアル集です

今後、随時追加していきます

### 公式Big Data Blog関連

1. [AWS Developer Toolsを使用したサーバレスなAWS Glue ETLアプリケーションの継続的インテグレーションとデリバリの実装](https://aws.amazon.com/jp/blogs/news/implement-continuous-integration-and-delivery-of-serverless-aws-glue-etl-applications-using-aws-developer-tools/)

Glue jobに対するCI/CDの構築。CodeシリーズのCode Commit,Code Build,Code PipelineやCloudFormationを活用。
CodeCommitのプッシュの検出でCodePipleをスタートさせ、CloudFormationやCodeBuildを使いGlueやLambdaなどが含まれたテスト環境を作りテストを実施します、次にCodePipelineのApproval機能で承認フェーズを挟んだ上で手動承認を行うとテスト環境のクリーンアップし、最後に本番デプロイを行う
CloudFormationにLambdaのコードがそのまま書かれていますがそこはチュートリアルということで;

2. [AWS Glue と Amazon S3 を使用してデータレイクの基礎を構築する](https://aws.amazon.com/jp/blogs/news/build-a-data-lake-foundation-with-aws-glue-and-amazon-s3/)

ニューヨークのタクシーデータを使い、csv->parquetに変換するシンプルなGlue job実行。ジョブの実行結果をAthenaでクエリを行い、csvとparquetによる速度の差を確認すする

3. [AWS Glueを使用した解析処理のためのデータの抽出、変換、および読み込み方法 パート2](https://aws.amazon.com/jp/blogs/database/how-to-extract-transform-and-load-data-for-analytic-processing-using-aws-glue-part-2/)

4. [Data Lake ハンズオン](https://www.slideshare.net/AmazonWebServicesJapan/data-lake-119443016?fbclid=IwAR07gvfvVceJtbb01DMb3ki1DJm653a-wV112u5bKAvw_CbbNJgV5J-gkOw)

AWSでデータレイクを構築します。その過程でGlueによるETL処理を試すことができます。


### re:Invent関連

TODO

### ユーザーさん関連

TODO

## その他

Glueの使い方まとめ
https://qiita.com/pioho07/items/32f76a16cbf49f9f712f
virtualなものをまとめてみた

# virtualな用語
最近よくvirtualを見ることが多く、よく考えてみたらCS用語の中によくvirtualがprefixでつくことが多いので、まとめてみた。
どれもそれぞれのトピックの中で抽象化を表していて、上位のひとつのインタフェースで下位の異なる実装を使っていて、one-to-manyの関係を表しているのでなかなか面白い。
ハードウェアのレイヤーからソフトウェアのレイヤーの順で知っているものをまとめてみた。

# virtual machine
ハードウェアを抽象化している。特定のアーキテクチャを異なるハードウェアやソフトウェアの上で再現する
one: 特定のアーキテクチャやOSのインターフェイス
many: 色々なハードウェアやソフトウェアの実装

# virtual private server
OSレベルの抽象化。一貫性のあるOSへのサービスを変更可能なハードウェアの組み合わせで実現している。
one: 一貫したOSのサービス
many: 変更可能なハードウェアの組み合わせ上でのOSサービス

# virtual private network
ネットワークを抽象化している。プライベートネットワークのプロトコルをより一般的なインターネットプロトコル上で実装する。
one: プライベートネットワークのプロトコル
many:　インターネットのプロトコル

# virtual IP
IPアドレスを抽象化している。IPがネットワークカードとは一対一ではない。
one: IPアドレス
many: IPプールの中のアドレス

# virtual file system
IOを抽象化している。具体的にどのファイルシステムの実装を使うかを決める
one: read, writeなどのIOインタフェース
many: ext2, 3, FATなどのファイルシステムの実装

# virtual memory
メモリ番地の抽象化。メモリアクセスするときに、具体的にどのRAMのアドレスにアクセスするかを決める。
one: リニアアドレス
many: RAMの物理アドレス

# virtual function / table
実装の抽象化。関数を呼び出すときに、具体的にどの実装を呼び出すかを決める。
one: 関数のインタフェース
many: 関数の実装

# virtual agent
agent（人間？）を抽象化している。テキストや音声でSiriやAlexaなどのagentを操作する。
one: テキストや音声のインタラクション
many: Siri, AlexaなどのいろんなバーチャルAgentの実装

# virtual currency
通貨のトランザクションを抽象化している。お金のやりとりを色んな形で実装する
one: お金のやりとりのtransaction
many: 物理ベースな台帳で実現するか、暗号ハッシュベースのブロックチェーンで実現するか

# virtual reality
reality(現実？）を抽象化している。現実とのやり取りを抽象化している。
one: 現実とのやりとり（視覚、聴覚などを通じて）
many: いろんなバーチャル世界の実装
yum コマンドを調べてみた

yum コマンドでよく使いそうなコマンドをまとめてみました．

## 追加・更新する

###パッケージをインストール
最新バージョンのパッケージをインストールする．
依存関係のあるパッケージも自動的にインストールしてくれる．
-y オプションをつけることで，インストールの確認をスキップできる．

```bash
yum install パッケージ名 [パッケージ名 ...]
```

###パッケージをアップデート
パッケージ名を指定しなかった場合は，インストール済の全てのパッケージがアップデートされる．

```bash
yum update [パッケージ名] [パッケージ名 ...]
```

##確認する

###アップデート可能なパッケージを表示する
```bash
yum check-update
```

###利用可能・インストール済のパッケージの一覧を表示する

```bash
# 利用可能・インストール済のすべてのパッケージ一覧を表示する
yum list [パッケージ名 ...]

# 利用可能なパッケージ一覧を表示する
yum list available [パッケージ名 ...]

# インストール済のパッケージ一覧を表示する
yum list installed [パッケージ名 ...]

# 出力形式：
# パッケージ名.アーキテクチャ バージョン-リリース リポジトリ名
# インストール済であれば
# パッケージ名.アーキテクチャ バージョン-リリース @リポジトリ名
```
例：python, python36 の利用可能・インストール済のパッケージ一覧を表示する

```bash
$sudo yum list python python36
Loaded plugins: fastestmirror, langpacks
Loading mirror speeds from cached hostfile
 * base: www.ftp.ne.jp
 * epel: mirror.dmmlabs.jp
 * extras: www.ftp.ne.jp
 * updates: www.ftp.ne.jp
Installed Packages
python.x86_64                             2.7.5-58.el7                           @base
Available Packages
python36.x86_64                           3.6.3-7.el7                            epel 
```

### パッケージの情報を表示する
```bash
yum info [パッケージ名 ...]
```

### キーワードでパッケージを検索する
```bash
# 検索対象はパッケージ名と概要のみ
yum search キーワード

# パッケージ情報のすべてにマッチさせたいとき
yum search all キーワード
```

### インストール・アップデートの履歴を表示する
```bash
# yum トランザクションの表示
yum history

# 出力されるカラム
# ID: トランザクションのID
# Login user: yum トランザクションを開始したユーザー名
# Date and time: トランザクションが発生した日時
# Action(s): トランザクションで実行された動作
# Altered: トランザクションに影響を受けたパッケージ数

# トランザクションの詳細を表示する
yum history info トランザクションのID

# 特定のパッケージに関するトランザクションの一覧を表示する
yum history packages-list パッケージ名

# 特定のパッケージに関するトランザクションの詳細を表示する
yum history packages-info パッケージ名
```

### リポジトリの一覧を表示する
```bash
# 全て
yum repolist all

# 有効なリポジトリ（yum repolist と同じ動作）
yum repolist enabled

# 無効なリポジトリ
yum repolist disabled
```

## 削除する

### パッケージを削除する
erase でも可．

```bash
yum remove パッケージ名 [パッケージ名 ...]
```

### yum のキャッシュを削除する
`/etc/yum.conf` の `keepcache` が `1` の場合，
yum はパッケージのメタデータや，インストールしたパッケージ等を `/var/cache/yum` にキャッシュする．
yum update の中断等が原因でメタデータが破損し，インストール時にエラーが発生した時に
キャッシュ削除をすることが多いようだ．
もちろん，キャッシュが膨れてきた場合に使ってもよい．

```bash
# 全てのキャッシュを削除
yum clean all

# yum のキャッシュ用ファイルの容量確認
du -sh /var/cache/yum    
174M    /var/cache/yum/
```
XAMPPのMySQLにSSL接続

##Pref.
localの実験環境として使いやすいXAMPP
その中のMySQLでSSL接続テストをする時のメモです。
間違ってたりしたら、コメント下さい。

##Env.
macOS High Sierra version 10.13.3
XAMPP 5.6.31-0
10.1.25-MariaDB

##Method
予めXAMPPはインストールしておいてください


###証明書の発行
opensslを使って証明書を発行します。
@toshiro3 さんの[ココ](https://qiita.com/toshiro3/items/b7f6842efe9fd97f8c56)の記事を参考にさせて頂きました。ありがとうございます。

まず<font color="orange">ターミナル</font>を開き<font color="orange">/Applications/XAMPP/xamppfiles/mysql</font>に移動します。
そして適当なディレクトリ「<font color="orange">cert_pem</font>」を作ります。（果たしてココでいいのか。このディレクトリ名で良いのか。）

```bash
$ cd /Applications/XAMPP/xamppfiles/mysql
$ mkdir cert_pem
$ cd cert_pem
```

作成したディレクトリ内に移動した後、opensslコマンドで証明書を作ります。

```bash
$ openssl genrsa 2048 > ca-key.pem
$ openssl req -new -x509 -nodes -days 3650 -key ca-key.pem -out ca-cert.pem
$ openssl req -newkey rsa:2048 -days 3650 -nodes -keyout server-key.pem -out server-req.pem
$ openssl rsa -in server-key.pem -out server-key.pem
$ openssl x509 -req -in server-req.pem -days 3650 \
    -CA ca-cert.pem -CAkey ca-key.pem -set_serial 01 -out server-cert.pem
$ openssl req -newkey rsa:2048 -days 3650 -nodes -keyout client-key.pem -out client-req.pem
$ openssl rsa -in client-key.pem -out client-key.pem
$ openssl x509 -req -in client-req.pem -days 3650 \
    -CA ca-cert.pem -CAkey ca-key.pem -set_serial 01 -out client-cert.pem
```

コマンドを実行した後に証明書のあれこれを入力するときには以下のように入力。全空白だと発行されない。

```bash
Country Name (2 letter code) []:JP
State or Province Name (full name) []:tokyo
Locality Name (eg, city) []:chiyoda
Organization Name (eg, company) []:test.local
Organizational Unit Name (eg, section) []:system01
Common Name (eg, fully qualified host name) []:
Email Address []:
```

###MySQLのconfに証明書の設定
発行したオレオレ証明書をMySQLに登録します。
XAMPPのコントロールパネルからMySQLの<font color="orange">my.cnf</font>を開き、編集します。
<img width="668" alt="スクリーンショット 2018-04-30 3.50.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/181807/71f261e2-39c8-7dde-707b-17bb47e890c0.png">

<img width="292" alt="スクリーンショット 2018-04-30 3.50.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/181807/dac7b82f-f587-ac24-b1b0-27d0ea7f3bd8.png">

設定ファイルがテキストエディタ上で表示されるので、<font color="orange">[mysqld]</font>に以下を追記します。

```/etc/my.cnf
[mysqld]

ssl-ca = /Applications/XAMPP/xamppfiles/mysql/cert_pem/ca-cert.pem
ssl-cert = /Applications/XAMPP/xamppfiles/mysql/cert_pem/server-cert.pem
ssl-key = /Applications/XAMPP/xamppfiles/mysql/cert_pem/server-key.pem
```

###MySQLの再起動
XAMPコントロールパネル上からMySQLを再起動して下さい。

###MySQLにSSL接続必須のアカウントを作成
とりあえずMySQLにコマンドラインでアクセスします。

```bash
$ cd /Applications/XAMPP/xamppfiles/bin
$ ./mysql -u root
```

初期設定のままであればパスなしでrootで入れました。
以下のSQL文でssluserという名前のパスワード「pass」でssl接続必須のアカウントを作成できます。
権限、ユーザ名やパスワードは適当に好きなのに変更してもおｋです。

```sql
create user ssluser@localhost;
grant all on *.* to ssluser@localhost identified by 'pass' require ssl;
```

以下のSQL文でユーザが作成されたかを確認可能です。

```sql
select user,host,password from mysql.user;
```

###接続確認
XAMPPのMySQLのあるディレクトリに移動しておいてから

```bash
$ cd /Applications/XAMPP/xamppfiles/bin
```

MySQLコマンドでssluserで入ることが出来れば完了です。
```bash
./mysql -u ssluser -p --ssl-ca=/Applications/XAMPP/xamppfiles/mysql/cert_pem/ca-cert.pem
```
古いbitcoindと今のchainparams.cppの対応

草コインのコードって大体古いbitcoindからコード取ってきてるから、めんどくさすぎるので、今の`chainparams.cpp`との対応リストを書くよ

`base58Prefixes[PUBKEY_ADDRESS]`, `base58Prefixes[SCRIPT_ADDRESS]` はbase58.hの`CBitcoinAddress`
`base58Prefixes[SECRET_KEY]` はbase58.h の`CBitcoinSecret`
これらは数値演算しているものもあるから注意

genesis blockのブロックハッシュは main.h の`static const uint256 hashGenesisBlock`
genesis blockのマークルルートはmain.cppの
アサート部分
` assert(block.hashMerkleRoot == uint256("0xXXXXXXXX"));`

genesis blockのタイムスタンプはmain.cppの

```
CTransaction txNew;
txNew.nTime= xxxxxxx
```

`pchMessageStart`は、
メインネットはmain.cppの`unsigned char pchMessageStart[4]`
テストネットはmain.cppの`LoadBlockIndex`

genesis blockのBitsはmain.cppのコメントに書いてあったりする。多分放置しててもいいと思うよ。

DNS Seedは
```
static const char *strDNSSeed[][2] = {
     {"dnsseed.neetcoin.jp", "dnsseed.neetcoin.jp"}, 
};
```

p2pポートは
protocol.h
の
`static inline unsigned short GetDefaultPort`

rpcポートは
bitcoinrpc.cppの
```
static inline unsigned short GetDefaultRPCPort
```

**`xxxcoin-cli`はありません**

もし足りないなどありましたら教えてください。

[![Monappy](https://img.shields.io/badge/DonateMe-monappy-yellow.svg)](https://monappy.jp/users/send/@miss_monacoin?amount=39&message=%E3%82%82%E3%81%AB%E3%82%83%E3%81%AE%E5%AF%84%E4%BB%98%E3%81%A7%E3%81%99)
[![モナコイン](https://img.shields.io/badge/DonateMe-monacoin-yellow.svg)](https://monya-wallet.github.io/a/?address=MStxnMRVMHH95YPzGeR9pdc3HLrvL6pjSo&scheme=monacoin&message=%E5%AF%84%E4%BB%98%E3%82%92%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86%E3%81%94%E3%81%96%E3%81%84%E3%81%BE%E3%81%99&req-opreturn=%E5%AF%84%E4%BB%98%E3%81%A7%E3%81%99)
[![ビットコイン](https://img.shields.io/badge/DonateMe-bitcoin-orange.svg)](https://monya-wallet.github.io/a/?address=1HohzLWyA7L1ifx6hr2Xr5N1sGZrR1ZbMt&scheme=bitcoin&message=%E5%AF%84%E4%BB%98%E3%82%92%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86%E3%81%94%E3%81%96%E3%81%84%E3%81%BE%E3%81%99&req-opreturn=%E5%AF%84%E4%BB%98%E3%81%A7%E3%81%99)
[![Tipmonaで投げる](https://img.shields.io/badge/TipMe-%40tipmona-ff69b4.svg)](https://twitter.com/share?text=%40tipmona%20tip%20%40monya_wallet%2039%20%E3%82%82%E3%81%AB%E3%82%83%E3%81%AE%E5%AF%84%E4%BB%98%E3%81%A7%E3%81%99)
いいねはいらないから投げ銭をください（直球）
投げ銭バッジの作り方:[バッジを作って投げ銭をもらおう](https://qiita.com/MissMonacoin/items/61531236ff678d6653ac)
Python + Django + psycopg2でposgreSQLに接続する

####1.psycopg2をインストール

postgreSQLのドライバをインストールします

http://initd.org/psycopg/download/

```cmd.prompt
c:\python\env1>Scripts\activate
(env1) c:\python\env1>cd ..
(env1) c:\python>cd mysite
(env1) c:\python\mysite>pip install psycopg2
(env1) c:\python\mysite>python -c "import psycopg2"
```

仮想環境は、C:\python\env1に作成しています。

####2.データベースを作成する

```
create database djangodb
```

####3.setting.pyを編集

```setting.py
DATABASES = {
           'default': {
           'ENGINE': 'django.db.backends.postgresql_psycopg2',
           'NAME': 'djangodb',
           'USER': 'testuser',
           'PASSWORD': 'xxxxxxxxxxxxxxxx',
           'HOST': '127.0.0.1',
           'POST': '5432'
         }
   }
```
####3.migrate

```
(env1) c:\python>myproject1\manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying sessions.0001_initial... OK
```

サーバを起動して確認する

```
(env1) c:\python>myproject1\manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).
April 30, 2018 - 01:07:17
Django version 2.0.4, using settings 'myproject1.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```

大丈夫そうです。
Twitterのユーザーカードのアバター表示を再現したい

## Twitterの丸い縁取りアバターかっこいい

Twitterではフォロワーの一覧なんかを見ると、以下のデザインでカードが作られています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89911/69e3fef3-848c-e169-3e35-1f4da91385f7.png)

このカードのヘッダー画像とボディの部分にまたがる形でアバターが表示されてるのがクールなので自分でも試してみました。

## `position: absolute`を使う

`position: absolute`で自分のアバター画像を親の要素であるカードの位置から指定することができます。

アバター画像を`position: absolute`でまず指定して、そこに一回り大きい白円を裏に作ってやることでアバター画像の縁取りを再現しました。

<p data-height="265" data-theme-id="0" data-slug-hash="qxBBaa" data-default-tab="html,result" data-user="takahiroyte" data-embed-version="2" data-pen-title="Twitter Like Profile Card" class="codepen">See the Pen <a href="https://codepen.io/takahiroyte/pen/qxBBaa/">Twitter Like Profile Card</a> by Takahiro Ito (<a href="https://codepen.io/takahiroyte">@takahiroyte</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

思っていたよりすんなりできました。`position`をうまく使うことで、画一的なデザインから少し発展させたデザインへ近づけそうです。
M5stackで遊んでみる(オフライン用ファームへの更新〜ファイルのアップロード)

# M5Cloudからソースが見えない

GWが始まって混雑しているせいか、M5Cloudからソースが覗けないようになっていて
デバイス選択してソースを見ようとしてもFile Syncingから頑として動かなくなってしまいました。
まぁβ版とか書いてあった気がするのでまだこなれていないんでしょうね。
仕方がないのでM5Cloudを経由せずにオフラインで開発できるようにファームを更新しようと思います。

# オフライン用のファームのダウンロードと書き込み

https://github.com/m5stack/M5Cloud/tree/master/firmwares/OFF-LINE

ここに置いてありました。一番最初にファームを更新する時にいずれこっちにシフトすると思って
ちゃんとメモっておいてよかったです。繋がらなくなってソースが見れなくなっても慌てずにいられました。
ここからダウンロードして前のやつと同じようにesptools.pyで書き込めば行けました。

```sh

$ wget https://github.com/m5stack/M5Cloud/raw/master/firmwares/OFF-LINE/m5stack-20180419-v0.3.9.bin
$ wget https://github.com/m5stack/M5Cloud/raw/master/firmwares/OFF-LINE/m5stack-psram-20180419-v0.3.9.bin
$ esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART erase_flash
$ esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART write_flash --flash_mode dio -z 0x1000 m5stack-20180419-v0.3.9.bin
```

# どうやってM5stack上のファイルに書き込むのか。

ampyというシリアル通信でファイルをやりとりできるツールがあるようで
これを使うのが一般的みたいでした。
https://github.com/adafruit/ampy
これがいわゆるscpみたいなツールになっていて
コマンドラインから簡単にファイルをやりとりできるようです。


インストール、ファイルの転送

```sh
$ pip install adafruit-ampy
# デフォルトで繋ぎに行くボードのデバイスファイルを設定。これを設定することでコマンドを簡略化できる
$ export AMPY_PORT=/dev/tty.SLAB_USBtoUART

# ファイルの一覧
$ ampy ls
flash

# ファイルの取得
$ ampy get /flash/main.py ./main.py #ファイル名まで指定する必要あり

# ファイルのアップロード
$ ampy put ./main.py /flash/main.py
```

# スクリプトの実行

ファイルをアップロードしたら電源ボタンを押して再起動しないと実行できないと思ってたんですが
ampyにPythonファイルを実行するコマンドが用意されていました。

```sh

# スクリプトの実行
$ ampy run ./main.py
```

M5CloudのIDEは勝手にファイルのSyncや端末のリブートをしてくれてたんですが、
こっちはこっちで便利そうです。M5Cloudが安定するまではオフラインで開発を進めようと思います。
Pythonスクリプトの互換性改善だけでもオープンソースに寄与できる

git からオープンソースのライブラリを見つけてgit clone　（あるいはfork) する。
そのライブラリが役に立つと感じたら、ちょっとした貢献がしやすくなった。

以下、Pythonの例で述べる。


### **PEP8で推奨されている書き方にそろえていくこと**
http://pep8-ja.readthedocs.io/ja/latest/

pylint の出力が減るようにスクリプトのフォーマットを改善する。
Spyder統合環境の場合:
[Source][Run static code analysis]を実行し
[Static code analysis]のtabに表示された"Convention"の指摘項目を減らしておく。
"=", "<" の前後の半角スペースの数をそろえておくといったことも、
そのソースコードのメンテナンスをしやすくすることにつながっていく。


###  **Python2.7 固有の部分が多すぎてpython 3では動かないスクリプトを改善する**。

```
# Python 2/3 compatibility
from __future__ import print_function
```

print 文を
print() 関数の呼び出しに置き換える。


- 整数どうしの割り算の扱いをPython３の流儀にそろえる。（[python 2.7でPython 3風に書きたい](http://sucrose.hatenablog.com/entry/2013/07/21/201419)）

以下のコードをスクリプトの冒頭部分に書き加えます。
```from __future__ import division```

```
>>> 1/2
0
```

となることを期待して書いてあるコード（切り捨てが期待されているコード）は、
Python３では1/2 を　1//2 に書き換えます。
このようにしてPython3への移行がしやすくなるようにコードを直していきましょう。


### **Python3前提で書かれているスクリプトをpython2.7でも利用できるように改善する。**
ここでも、次のようなささいな変更
(Python3に移行したいとは思っているが、あまり広範囲の部分でPython2.7が使われ過ぎているので、簡単にはPython３に移行できないことがあるのです。)

```
# Python 2/3 compatibility
from __future__ import print_function
```

### **fork　したgit でcommit と push**
そのような変更を加えたものが**動作することを確認した**あとで、fork したgithub上でcommit し、 push する。

### **pull requestを作る。**
　オリジナルの作者の方が読める言語だけで書く。


### **pull requestが採用されるのを待つ**

そのような改善が、git 以降の時代はとてもやりやすくなっている。

関心をもったスクリプトが、使い勝手がよくなってさらに普及するように、手助けすることができる時代になっている。


## **付記：**

```
from __future__ import absolute_import
from __future__ import division
```

についても記述すべき。


```
>>> 1/2
0
```

となることを期待して書いてあるコードは、
Python３では


```
>>> 1/2
0.5
```

という値が返ってくるので、書き換えが必須になっています。
Python2.7, Python3に共通の書き方は'//' 演算子を使う書き方です。


```
>>> 1 // 2
0
```
goroutineの数を簡単に管理するtips

https://www.youtube.com/watch?v=yeetIgNeIkc より

```go
package concurrency

import (
	"log"
	"time"
)

var (
	concurrent    = 5
	semaphoreChan = make(chan struct{}, concurrent)
)

func DoWork(item int) {
	semaphoreChan <- struct{}{} // block while full
	go func() {
		defer func() {
			<-semaphoreChan // read to release a slot
		}()

		log.Println(item)
		time.Sleep(1 * time.Second)
	}()
}
```

```
func main() {
    for i := 0; i < 1000; i++ {
        concurrency.DoWork(i) // do task and keep concurrency by concurrency.concurrent 
    }
}
```


ラフに並列実行させたいときにいいかなと
concurrentの値はconfigか関数で動的にしてあげるとベターかと
ニューラルネットで回帰を行い、身長+3サイズでセクシー女優のカップ数を推定させる

# はじめに
前回https://qiita.com/ruteshi_SI_shiteru/items/fe3fcf96bdd322407e1c
の続きとなります。
前回はNNで分類を行わせて推定させていたのですが、精度が悪かったため、今回は回帰で推定を行いました。

# 環境
前回と同じです。

# 使用データ
前回及び先行研究と同じです。
※先行研究…https://qiita.com/kkdmgs110/items/593b9a2a270734d06070

ちなみに、cupからcup numを生み出す加工を行い、以下のようなデータとしております。(実は前回もですが)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/95458/1e04ab0b-c722-2fed-c9b7-c47548a0585d.png)


# コード全体像

```python:code
import pandas as pd

df = pd.read_csv('dataset.csv')

# 確認
df.head(3)

# 教師データ(cupnum列)
t = df.iloc[:, 6]

# 入力変数(3~6番目)
x = df.iloc[:, 2:6]

# 確認
t.head(3)

# 確認
x.head(3)

# Numpyにデータ型を変換
# 回帰バージョン
tn = (t.values - 1).reshape(t.size,1).astype('float32')
xn = x.values.astype('float32')

# 確認
tn.dtype

# 確認
tn

# 確認
xn.dtype

# 確認
xn

import chainer
import chainer.links as L
import chainer.functions as F

class NN(chainer.Chain):

    # モデルの構造を明示
    def __init__(self):
        super().__init__()
        with self.init_scope():
            self.l1 = L.Linear(4, 4)
            self.l2 = L.Linear(4, 4)
            self.l3 = L.Linear(4, 1)

    # 順伝播
    def __call__(self, x):
        u1 = self.l1(x)
        z1 = F.relu(u1)
        u2 = self.l2(z1)
        z2 = F.relu(u2)
        u3 = self.l3(z2)
        return u3

import numpy as np

# 再現性確保のためシードを固定
np.random.seed(1)

# NNモデルをインスタンス化
model = NN()

from chainer import optimizers

# 最適化にはAdamを使用
optimizer = optimizers.Adam()
optimizer.setup(model) # modelと紐付ける

# 損失関数の計算
#   損失関数には自乗誤差(MSE)を使用
def forward(x, y, model):
    t = model.__call__(x)
    loss = F.mean_squared_error(t, y)
    return loss


# パラメータの学習を繰り返す
results = []
for i in range(0,30000):
    loss = forward(xn, tn, model)
    print(loss.data)  # 現状のMSEを表示
    results.append(loss.data)
    optimizer.update(forward, xn, tn, model)
    
# 学習完了

# 誤差の推移をプロットしインライン表示
import matplotlib.pyplot as plt
%matplotlib inline
plt.yscale("log")
plt.xscale("log")
plt.plot(results)
plt.show()

# 予測 数値の見方：1 = Aカップ、2 = Bカップ… 5 = Eカップ… 
# Rioさん(C cup)
xq = np.array([[154,84,58,83]], 'f')
t1 = model.__call__(xq)+1
print(t1)
# variable([[ 4.11120224]])

# 蒼井そらさん(G cup)
xq = np.array([[155,90,58,83]], 'f')
t1 = model.__call__(xq)+1
print(t1)
# variable([[ 5.91459274]])

# 石原莉奈さん(C cup)
xq = np.array([[155,85,56,84]], 'f')
t1 = model.__call__(xq)+1
print(t1)
# variable([[ 4.56367683]])

# 野中あんりさん(A cup)
xq = np.array([[154,74,56,84]], 'f')
t1 = model.__call__(xq)+1
print(t1)
# variable([[ 2.42423582]])

# さくら柚木さん(K cup)
xq = np.array([[157,115,68,94]], 'f')
t1 = model.__call__(xq)+1
print(t1)
# variable([[ 12.39152241]])
```

# 手法
学習は4層ニューラルネットワークで行います。複雑なモデルのほうが適しているのか…と思い、前回の3層から1層増やしてみました。

# 結果
## 精度
誤差の推移を以下にプロットします。10000回を過ぎた頃から安定していることが伺えます。なお、今回はすべてのデータを学習対象としました。
![誤差の推移](https://qiita-image-store.s3.amazonaws.com/0/95458/214f412c-3c81-fd5f-4383-c7ea14a3e3b3.png)

# 予測について
予測結果はコード内に示しておりますので、ここでの再掲は省かせていただきます。

# 考察
前回、「学習に回帰ではなく分類を用いたことが精度低下の主因か」と触れましたが、概ねその通りだと考えられます。

# 所感
予測値が意外と近い値を示してくれました。さすがに、完璧に予測することは不可能なので、これくらいが関の山かもしれません。

最後までお付き合いいただき有難うございました。
Alexaスキル検討（社員情報検索）

社員情報を検索し音声で返すI/Fを検討する。
会社へ提案するネタ帳です。

#検索対象の社員情報
- 部署名
- 内線番号
- 外線番号
- 勤務地
- 役職
- 社員コード
- 所属長
- 直属長
- 現在のスケジュール（現在〜30分後までの予定）
- 今日のスケジュール
- 顔写真（EchoSpotで表示）

#質問の例
- アレクサ、社員情報検索で○○さんの内線番号を教えて
- アレクサ、社員情報検索で○○の所属長と直属長を教えて
- アレクサ、社員情報検索で○○君の情報を教えて

#社員情報テーブル（抜粋）

|No|名字|名前|部署名|内線番号|
|:--:|:--:|:--:|:--:|:--|
|1|牧|一郎|総務部|1111|
|2|山田|真紀|人事部|2222|
|3|山田|二郎|経理部|3333|
|4|鈴木|三郎|営業部|4444|
|5|鈴木|三郎|商品部|5555|

#該当者が複数存在するパターン
### まき（名字と名前）
No.1 まきじろう
No.2 やまだまき

### やまだ（同じ苗字、もしくは、同じ名前）
No.2 やまだまき
No.3 やまだじろう

### すずきさぶろう（同姓同名）
No.4 すずきさぶろう
No.5 すずきさぶろう

#会話のパターン1（通常）
ユーザ　「アレクサ、社員情報検索で牧一郎さんの内線番号を教えて」
アレクサ「牧一郎さんの内線番号は1111です」

#会話のパターン2（該当者複数）
ユーザ　「アレクサ、社員情報検索で牧さんの内線番号を教えて」
アレクサ「どの"まき"さんでしょうか、1.まきじろう、2.やまだまき」
ユーザ　「2」
アレクサ「山田真紀さんの内線番号は2222です」

#会話のパターン3（該当者複数、同姓同名）
ユーザ　「アレクサ、社員情報検索で鈴木三郎さんの内線番号を教えて」
アレクサ「どの"すずきさぶろう"さんでしょうか、1.営業部、2.商品部」
ユーザ　「1」
アレクサ「営業部の鈴木三郎さんの内線番号は4444です」
Pythonのコマンドについて

Pythonのコマンドを整理します

- 環境

Windows 10
Python 3.6.5
Django 2.0.4
仮想環境 C:\python\env1

1.仮想環境を起動する

```
env1\Scripts\activate
```

2.仮想環境を終了する

```
env1\Scripts\deactivate
```

3.Pythonのバージョンを確認する（仮想環境を起動後）

```
(env1) c:\python>python --version
Python 3.6.5
```

4.Djangoのバージョンを確認する（仮想環境を起動後）

(1)python スクリプトで確認

```
(env1) c:\python>python
Python 3.6.5 (v3.6.5:f59c0932b4, Mar 28 2018, 17:00:18) [MSC v.1900 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
>>> django.get_version()
'2.0.4'
>>>
```

(2)pipコマンドでインストールしたライブラリのバージョンを確認

```
(env1) c:\python>pip list
Package               Version
--------------------- --------------
click                 6.7
Django                2.0.4
django-bootstrap-form 3.4
django-bootstrap4     0.0.6
djangorestframework   3.8.2
ez-setup              0.9
Flask                 1.0.2
itsdangerous          0.24
Jinja2                2.10
MarkupSafe            1.0
mod-wsgi              4.6.4+ap24vc14
Pillow                5.1.0
pip                   10.0.1
psycopg2              2.7.4
pytz                  2018.4
reportlab             3.4.0
setuptools            39.1.0
Werkzeug              0.14.1
wheel                 0.30.0
```


5.プロジェクトの作成

```
(env1) c:\python>django-admin.py startproject myproject1
```

6.アプリケーションの作成

```
(env1) c:\python>python manage.py startapp myapp1
```

7.プロジェクトの起動

```
myproject1\manage.py runserver
```

8.プロジェクトの終了（プロジェクト起動中に）

```
「ctl + c」を入力する
```

9.migrations

```
python manage.py makemigrations [app名]
python manage.py sqlmigrate [app名] 0001
python manage.py migrate

```

10.管理者用ユーザ登録

```
python manage.py createsuperuser
```

11.pipでインストールしたパッケージをすべてアンインストールする。

```
pip freeze > uninstall.txt
pip uninstall -r uninstall.txt
```
Ionic3に入門してみる～その6 Angular4チュートリアル④～

# ヒーローのリストを表示する
## ヒーローのモックを作成する
mock-heroes.ts ファイルを src/app/ フォルダ以下に作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/466bcfcf-ef5f-eaa7-b078-09271dc8e3df.png)


## ヒーローを表示する
ここでやりたいことは、HeroesComponentにてmock-heroes.tsで宣言したヒーローたちのリストを表示させることです。
また、ここまでのチュートリアルでファイル名が変わっているので注意してください。
src/app/heroes/heroes.component.tsはsrc\components\heroes\heroes.tsのことです。
下記のように変更を加えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/004cdc92-3366-4b35-fddc-dfec846dbbbc.png)

html側は下記のようにします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/18874531-35f4-9e3d-5e59-1539e51b5eae.png)

なんとなく見ればわかるのですが、
*ngForがテンプレートエンジンの繰り返し構文のようなもので、
="let hero of heroes"の部分が具体的に何をもとに繰り返しが行われるかの定義です。
ここでは、heroesの各要素をheroという名前で繰り返します。
よって、その下にある要素のhero.idとhero.nameは各ヒーローのidとnameになります。

実際に動かすとこんな感じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/5b5bd7ca-dba1-cdd7-1874-44820055ff23.png)

## ヒーローを装飾する
ここではCSSを用いてHeroのListを装飾してみます。
アプリケーション全体で適用するCSSはstyles.css(app.scss)で定義しました。
heroesコンポーネントでのみ適用したいCSSは、src\components\heroes\heroes.scssに記載します。
(@Component.styles 内にインラインで定義することでも可能ですが、上記のようにしたほうがコンポーネントの再利用性が高まります。)

[前回](https://qiita.com/tokky_se/items/31449e6267395b2e8dac)に書いたようにstyleUrlsは書いてありませんがあまり気にしないでください。

# Master/Detail
## クリックイベントのバインディングを追加する
クリック時にイベントを設定してみましょう。
まずhtmlを編集します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/12d4a9c6-1ade-5c9d-a13c-d7b5e195ecd9.png)
これでクリック時のイベントとしてonSelectメソッドを、引数にheroを与えて呼び出すようにしました。
下記の通り、onSelectメソッドを書いてみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/88e49477-c25b-da08-a779-d284f80922a6.png)
見てみればわかりますが、onSelectはクラス変数selectedHeroに値をセットするセッターのようなメソッドです。
なので、selectedHeroには画面上でクリックしたhero(のオブジェクト)が入ることになります。
では、実際にselectedHero(画面上で選択されたヒーロー)を元に画面表示を行うように変えてみましょう。
htmlを下記のように編集してみてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/97d41807-fa07-a1ae-c5e6-4459124a227b.png)

*ngIf="selectedHero"はngForと同様にテンプレートエンジンで使えるIfみたいなものです。
この場合は、selectedHeroが初期状態だとundefinedであることを考慮しています。
(無いとselectedHero.nameなどでエラーになってしまう)

画面は下記のようになるはずです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/992705ed-1d46-4576-bbb2-8ade0614f127.png)

## 選択されたヒーローを装飾する
このままでは、どのヒーローが選択されたかがパット見ではわかりにくい状態です。
選択された場合は強調表示するようにしてみましょう。
htmlを下記のように修正してみてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/8e58eb65-4e72-2c74-33be-8cfac7f94009.png)
また、コンポーネントのCSSにはチュートリアルにあるように書いておきたかったのですが、そのまま書いたらあんまりよろしくない表示になっったので、適当に変えておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/79de33ed-0f2c-21b9-2cce-998e3ed5fe87.png)

こんな感じに表示されました。(チュートリアルはもっときれいに表示されるんはずなんですが…。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/5db6be0d-ad57-0647-8825-4ead7989583c.png)
Qtのmain関数内のウィジェット作成場所は・・・スタック？ヒープ？

# 1. 初めに

※ [今更聞けないシグナル・スロット総整理](https://qiita.com/argama147/items/30da69e4c1088917d522)の記事が2000PVを突破しました。この場を借りてお礼を述べさせていただきます。

さて、C++経験者が、Qt/C++をこれから学習しようとして入門書などのサンプルを見たときに、最初に気になるのは、メモリの解放は大丈夫なのか？ということではないでしょうか。
生ポインタでnewしているのに、deleteしているコードが見当たらないからです。
そこで最初に知るのが、QObjectは自身のthisを親(クラスの親という意味ではない)QObjectにparent設定すれば、親が解放された時に子も一緒に開放してくれる仕組みがあるからdelelteしなくても大丈夫
という説明です。
この説明で気になるのが、子は自動的に解放されるとして、親はどうやって解放するのか？ということです。
もっと言うと、Qt Creatorのプロジェクト作成ウィザードで作成されるmain()関数のコードは問題がないのでしょうか？
この辺りのことについて、自分なりの解が出ましたので、記事にさせていただきます。

# 2. 検証

プロジェクト作成ウィザードで、「Qtウィジェットアプリケーション選択→規定クラスをQWidgetに変更」してプロジェクトを作成します。
すると、main.cppは下記のようになります。

```main.cpp(スタック型１)
#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}
```
Widgetクラスは、QWidgetを継承したクラスです。
UIプログラミングの経験者がこのコードを見ると、画面のクラスであるWidgetをスタックに確保するはメモリの使い方がよくない。ヒープに確保すべきだ、と言って下記のように書き換えたとします。

```main.cpp(ヒープ型１)
#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget *w = new Widget;
    w->show();

    return a.exec();
}
```

まずは、この２つのコードをアプリ終了時に「Widgetクラスのデストラクタが呼ばれるか」という観点で動作確認してみます。

```widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    qDebug() << "~Widget";
    delete ui;
}
```
のようにログを仕込んで、動作させます。

すると、スタック型１はデストラクタが呼ばれますが、ヒープ型１は呼ばれません。
ヒープ型１のコードはこのままではまずいようです。
下記のように修正します。

```main.cpp(ヒープ型２)
#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget *w = new Widget;
    w->setAttribute(Qt::WA_DeleteOnClose);
    w->show();

    return a.exec();
}
```
Qt::WA_DeleteOnCloseという属性を設定すること、ウィンドウがクローズした時に自動的に解放されます。
これを設定することで、デストラクタが呼ばれました。
では、仮にこの属性をスタック型１に追加するとどうなるでしょうか？

```main.cpp(スタック型２)
#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.setAttribute(Qt::WA_DeleteOnClose);
    w.show();

    return a.exec();
}
```
これを実行すると

```
~Widget
~Widget
プログラムが突然終了しました。
The process was ended forcefully.
```
といういうように２重解放になってしまいます。
ここまでのサンプルを整理すると、

|| Qt::WA_DeleteOnCloseなし | Qt::WA_DeleteOnCloseあり |
|:-----------:|:------------:|:------------:|
| __スタック型__| OK        | NG(２重解放)         |
| __ヒープ型__| NG(デストラクタが呼ばれない)        | OK         |

となります。

# 3. 結論

結論を言うと、プロジェクト作成ウィザードで作成されるスタック型１で通常は問題ない。
スタック枯渇が気になる場合は、ヒープ型にしてQt::WA_DeleteOnCloseをセットする、です。

# 4. 書籍のサンプルコードはどうなっている？

2018/4/29現在、Qt4/C++の本は３冊出ています。（Qt5はなし。。。）

(1)入門 Qt4プログラミング（オライリー社）
(2)実践 Qt4プログラミング（オライリー社）
(3)Qtプログラミング入門（工学社）

これらのサンプルを見ると、
(1)はヒープ型１とスタック型１が混ざっている（hello worldはヒープ型１）
(2)スタック型１
(3)スタック型１

怖いのが、(1)のP.4にヒープ型１を採用している理由として、
「例をなるべくシンプルに保つために、main関数の最後でdeleteしていない。
  このサンプルのように小さいアプリケーションでは、この程度のメモリリークはさほど問題になりません。」
のようなことが書かれているのですが、
<font color="crimson">どんなコードでもリークするコードを提示するのはダメでしょう！！！</font>
とつっこみたくなる。
上記のオライリー本の説明を見て、Qtの学習意欲が削がれる人がいる気がします・・・
そんな時は本記事を読んで、やる気が復活することを祈ります。
Windows10にOpenFOAMをインストール(メモ)

Windows Subsystem For Linuxを使ってWindows10にOpenFOAMをインストールした。

参考にしたのは以下のサイト様（以下、参考サイト）
https://www.xsim.info/articles/OpenFOAM/Install-on-Windows10.html#Install-OpenFOAM
その際にいくつか躓いたところがあるので自分用にメモを作成した。

# 環境
## OS
Windows10 pro
バージョン 1709
## ハード
Surface book

# 実施内容
[参考サイト](https://www.xsim.info/articles/OpenFOAM/Install-on-Windows10.html#Install-OpenFOAM)を書かれていることを一つずつ実行していった。
すると
> Bash on Ubuntu on Windows の実行

でコマンドプロンプトからbashを実行すると、参考サイトとは違うメッセージが出てきた。
（メッセージはメモるのを忘れてしまいました）
「まだLinuxがインストールされてへんで」的なメッセージと、「ここにアクセスせえよ」というアドレスが表示され
そのアドレスをブラウザに打ち込むと、以下のような画面が出てきて好きなLinuxを選択できた。
![store.png](https://qiita-image-store.s3.amazonaws.com/0/244254/de104835-6d78-c76f-058f-787d81f9eccf.png)
迷わずubuntuを選択。
インストールが完了する。

ちなみに参考サイトでは以下のように書かれているが
> Bash が起動するとカレントフォルダ「D:\Workspace\OpenFOAM」が Unix ファイルシステムの「mnt」にマウントされます。

私の環境では、/mntの中は「c」しかいないのでcドライブ自体がマウントされている。

その後の
> OpenFOAM のインストール
> Xming のインストール

は順調にクリアー
書いてないけど、「インストールしますか？」的なメッセージが出てくるので
`y`
を入力する事

私は「windows起動時にXmingが自動起動」という設定は行わなかった
geditのインストールで全然進まなくなってしまった時にEnterを押したら進んだ。
あまりLinux触らないのでよく分からない。

> OpenFOAM 動作テスト

で環境変数に$FOAM_TUTORIALSが設定されていなかったので
`$cp -r $FOAM_TUTORIALS/incompressible/simpleFoam/pitzDaily .`
でディレクトリが見つかりませんメッセージを頂く。
とりあえず、直接アドレスを指定してコピー
`$cd /opt/openfoam4/tutorials/incompressible/simpleFoam/pitzDaily .`

計算は無事流れた。
paraFoamの起動時画面に砂嵐になっていて
アイコンもグチャグチャっとなってるのでかなり印象は悪いが結果表示は出来た。

# ターミナルの文字色変更
デフォルトのままだとディレクトリの文字が壊滅的に見づらい
![ls実行時.png](https://qiita-image-store.s3.amazonaws.com/0/244254/db906326-cd36-8fa0-6c11-f116d47f2480.png)
ターミナルの「プロパティ」→「画面の色」タブからターミナルの色の設定が出来るが
ディレクトリの表示色は設定できない
以下のコマンドで変更できる
`export LS_COLORS='di=01;35'`
変更結果
![ls実行時_変更後.png](https://qiita-image-store.s3.amazonaws.com/0/244254/c517f1ee-b096-ddb6-af1f-7547c1f02d90.png)


# 感想
面倒なところもあったが、仮想化環境よりはとっつきやすい気がする。
特に私の環境ではVurtualBoxもVMWareも画面の表示がとてつもなく小さくなる。
（Surface bookだけの現象かは知らないが何をしても直らなかった。仕方なくVurtualBoxの画面表示を200%にして使っている)
そういう仮想環境上の悩みがなくなるのは嬉しい。
また、VurtualBoxはディレクトリの共有化をして、権限もちゃんと設定しないと
Windows側にファイルを移動することが出来なかった。
（今はドラッグ&ドロップで出来るのかもしれないが）
仮想化とのメリットデメリットは色々あるがWindowsからOpenFOAMを直接触れるのは
純粋に選択肢が広がった気がする。
これまでもBlueCFDなどはあったが、どのようなOpenFOAMや関連ツールも入るのは嬉しい。
もう少し使用感を確認してみたい。

# 余談
以前にWSLを有効した後にOpenModelicaの計算を実行すると
ブルースルクリーンになる現象が発生しOSを初期化せざる終えなかった。
そしてSurface Booxの初期化はとてつもなく面倒だった。
今回もそのような問題が発生しないか戦々恐々としている。
ただ、他のWSLを有効にしていないPCでOpenModelicaの計算実行後のブルースルクリーン→初期化のコンボを体験したのでWSLは関係ないのかもしれない。
この辺はよく分からないが私のスキルではただ祈るしかない。
Hadoop入門覚え書き

# hadoop入門

ゼロからはじめる人のために！

# 番外編　超基本コマンド集
|command|意味|
|---|---|
|hadoop version|情報をチェック|
|hadoop fs -cat hdfsファイル|catの部分は ls, rm などにも変更して、LinuxCommand的なのが使える|
|hadoop job -kill job_番号|ミスしたとわかったときにJobをKillする|
|hadoop jar /path/to/hadoop-streaming.jar -input /path/to/input -output /path/to/output -mapper “python mr_test.py mapper” -reducer “python mr_test.py reducer” -file mr_test.py|streamingを使ってMRJobを実行 |




# ステップ1: 言葉の説明

- hadoopとは：MapperとReducerという２つの部分を書くだけでたくさんのデータを分散処理できるすごいもの(Mapper ReducerはMRと呼ばれたりする)
- MR:　Mapper＝解析に不要なものを捨てる。Reducer＝集計（この時点でよくわからなくても大丈夫）
- hadoop-streaming: Java以外の言語のMRを実行する方法
- スタンドアローンモード：デーモンを一切動作せず、単一のJavaプロセスとして、非分散モードで実行する（分散モードとは複数のマシーンに処理をさせること）


# ステップ2:　インストールして試してみる

これもすでにやっている人がいるので、それを参考にする！
こちらの記事[MacにHadoop入れてPHPでMapReduce書いてみる](http://qiita.com/zaburo/items/a38ee080469aea4ff19a)がとても役に立つ！

簡略化すると

1. インストール
    2. mac: `brew install hadoop`
    3. ubuntu: ちょっと面倒なので別で記載
2. wordcount 
    4. `mkdir input`
    5. `echo "a a a b b c" > input/test1.txt`
    6. `echo "a b c" > input/test2.txt`
    7. テスト
        8. Mac:`hadoop jar /usr/local/opt/hadoop/libexec/share/hadoop/mapreduce/hadoop-mapreduce-examples-2.7.1.jar wordcount input output`
        9. Ubuntu:`hadoop jar /usr/local/hadoop/share/hadoop/mapreduce/hadoop-mapreduce-examples-2.7.2.jar  wordcount input output`（インストールしたバージョンが違くなってますが適宜自分のバージョンに変更してください）
3. hadoop-streaming (php)
4. 疑似分散モード（ローカルホストを使ってローカルホストにSSHでログインするようにして疑似分散モードを試す）
    5. core-site.yml
    6. hdfs-site.yml
    7. hdfs format
    8. 起動
    9. 試し

と言った感じです。僕自身は少し自分なりに変更して、Pythonを使ったりして試しました。


## 補足

更に上のQiitaページの参照元(Macでhadoopをちょっとだけ動かしてみる)[http://qiita.com/ysk_1031/items/26752b5da1629c9db8f7]を見ると以下の点もあった。

疑似分散モードで起動したときに、`http://localhost:50070/`にアクセスすると以下のようなダッシュボードで確認することができる！

<img width="1221" alt="Screen Shot 2017-01-26 at 12.46.58 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/7059/344e8649-c36f-fcd0-8bad-4aea02575eda.png">


さらに (Yarn)[http://qiita.com/ysk_1031/items/26752b5da1629c9db8f7#yarn] についても記述があるので、チェックしたい人は軽くチェック。
Yarnを起動すると、うえのプロセスに加え、ResourceManager, NodeManagerが起動するよう。
MESHのセンサーデータをAjaxでサーバーへ

#前説
昨日今日、東京観光で進捗が出ませんでした。ですので、現在やってる事と過去の話をうまく関連づけて復習感覚で記事をかけたらなと思います。コードは過去に書いたものです。ですので今日は進捗はないです　(強調)

#Ajaxとは
Railsを書いているとAjaxを勉強することになりました。Ajaxとは非同期通信の仕組みとのことですが、いまいちピンと来ません。過去に書いたコードから文法をみていきたいと思います。次回はもう少し、踏み込んだ説明をしていきたいと思います。

#MESHとAjax

![IMG_6182.JPG](https://qiita-image-store.s3.amazonaws.com/0/253129/04260202-598c-7c78-5148-706672dbe605.jpeg)


[MESH](http://meshprj.com/jp/)とは、センサーを埋め込んだブロック状のタグを端末とBluetoothで接続できる優れたハードウェアです。2017年末よりRaspberryPiとも連携ができるようになり。筆者も試してみましたが、RaspberryPiをサーバーとのハブ代わりにできるので使いやすいです！

ここでは、独自のタグ製作を簡易的にソフトウェア開発キットを用いて行いました。その時の言語がJavaScript、通信方法Ajaxだったわけです。(当時はJavaScriptさっぱりだったので探りながら書いた)


```JavaScript:MESH_SDK.js
//エンドポイントはEC2などを借りるとデータの送信先としての機能を持ってくれます。
var endPointURL2 =  "(エンドポイントURL)"

//センサーデータ取得
//MESHのタグから数値的な値を取得してくれるメソッドです。
var temperature = messageValues.temperatureValue;
var humidity =  messageValues.humidityValue;
var nowdata =   "  humidity  :" +humidity + "  temperature  : " + temperature; 
log(nowdata);

//JSONデータ生成
var jsonData2 = {
	"temperature" : temperature,
	"humidity" : 　humidity
}

//APIを叩く際のパラメータ
//プロパティの値を渡す
var sendData2 = JSON.stringify(jsonData2);
log(sendData2);
log(nowdata);

//ajaxの中身設定
//JSONデータをURLにPOST
ajax ({
    url : endPointURL2,
    type : "post",
    data : sendData2,
    contentType : "application/json",
    dataType : "json",
    timeout : 5000,

//コールバック関数
    success : function ( contents ) {
        log("POST success");
        log(JSON.stringify(contents));
    callbackSuccess( {
        resultType : "continue"
        } );
    },

//エラー処理とエラーの形式を表示
    error : function ( request, errorMessage ) {
        log("POST error");
        log("detail: " +  JSON.stringify(request));
        callbackSuccess( {
            resultType : "continue"
        } );
    }
});

return {
    resultType : "pause"
};
```

やっぱりJavaScriptもう少し勉強しないといけない(戒め
JavaScriptでAjax採用でも書き方が全く違う...

#次回
いいね機能のAjaxとRailsの関連性、form_forとの繋がりをみていこうと思います。
【Swift】ローカライズのコードをちょっとだけスマートに

# １．はじめに
　アプリのローカライズは文字列の直書きが多くなりがち（個人的な感想）。

　例えば、、、
 
```Localizable.strings(Base)
 "language" = "English";
```

```Localizable.strings(Japanese)
"language" = "日本語";
```

``` Hoge.swift
print(NSLocalizedString("language", comment: ""))  // 日本語設定なら「日本語」、それ以外なら「English」
```

`language` という文字列を１回しか使わないならいいが、何回も使う場合はやはり文字列の直書きは避けたいもの。

# ２．列挙体にする
　ローカライズのキーとなる文字列を列挙体にまとめましょう。
　また、この列挙体に、自分の値に応じてローカライズされた文字列を返すメソッドを作ります。
　それだけです。

```LocalizeKey.swift
enum LocalizeKey: String {
    case language

    // selfの値をローカライズして返す
    func localizedString() -> String {
        return NSLocalizedString(self.rawValue, comment: "")
    }
}
```

# ３．使い方
　`Localizable.strings(Base)`, `Localizable.strings(Japanese)` 項番１と同じです。


```Localizable.strings(Base)
 "language" = "English";
```

```Localizable.strings(Japanese)
"language" = "日本語";
```

```LocalizeKey.swift
enum LocalizeKey: String {
    case language

    // selfの値をローカライズして返す
    func localizedString() -> String {
        return NSLocalizedString(self.rawValue, comment: "")
    }
}
```

``` Hoge.swift
print(LocalizeKey.language.localizedString())  // 日本語設定なら「日本語」、それ以外なら「English」
```

ポイントは`Localizable.strings(Base)`, `Localizable.strings(Japanese)` のキーと同じ値を列挙体（`LocalizeKey`）で持つことです。

これだけでも文字列の直書きを随分と減らすことができました。

他にもいい方法ないかな。。。
オフラインリアルタイムどう書く E19 の実装例(Go)

オフラインリアルタイムどう書く E19 の実装例

問題 : http://mtsmfm.github.io/2017/11/04/doukaku-e19.html
実装リンク集 : https://qiita.com/mtsmfm/items/67bf5c121ecbd9b5fab3

で。

https://qiita.com/Nabetani/items/feb89852b54886526c9f の１つ目を Go に移植した。苦しい感じ。

```go:実装
package e19

import (
	"strconv"
	"strings"
)

func makeCards(l int) []int {
	r := make([]int, l*2)
	for i := 0; i < l; i++ {
		r[i*2] = i + 1
		r[i*2+1] = i + 1
	}
	return r
}

func appended(x []int, e int) []int {
	x = append(make([]int, 0, len(x)+1), x...) // i mean copy
	x = append(x, e)
	return x
}

func toStr(x []int) string {
	var b strings.Builder
	b.Grow(len(x) * 3)
	for _, e := range x {
		if b.Len() != 0 {
			b.WriteByte(',')
		}
		b.WriteString(strconv.Itoa(e))
	}
	return b.String()
}

func combination2(done map[string]bool, x0, y0, all []int, l int, proc func(x, y []int)) {
	if 0 < len(all) {
		x := append(make([]int, 0, len(x0)), x0...) // i mean copy
		y := append(make([]int, 0, len(y0)), y0...) // i mean copy
		if len(x) < l {
			combination2(done, appended(x, all[0]), y, all[1:], l, proc)
		}
		if len(y) < l {
			combination2(done, x, appended(y, all[0]), all[1:], l, proc)
		}
	} else {
		sx0 := toStr(x0)
		if !done[sx0] {
			proc(x0, y0)
			done[sx0] = true
		}
	}
}
func combination(all []int, l int, proc func(x, y []int)) {
	combination2(make(map[string]bool), make([]int, 0), make([]int, 0), all, l, proc)
}

func toCode(x []int) string {
	var b strings.Builder
	b.Grow(len(x))
	for _, e := range x {
		if e%2 == 0 {
			b.WriteByte('x')
		} else {
			b.WriteByte('o')
		}
	}
	return b.String()
}

func solve(src string) string {
	pats := strings.Split(src, ",")
	l := len(pats[0])
	all := makeCards(l)
	cands := make([]string, 0)
	combination(all, l, func(x, y []int) {
		cx := toCode(x)
		cy := toCode(y)
		if pats[0] == cx && pats[1] == cy {
			cands = append(cands, toStr(x)+","+toStr(y))
		}
	})
	return strings.Join(cands, "|")
}
```

```go:テスト
package e19

import (
	"testing"
)

func Test(t *testing.T) {
	var tests = []struct {
		name  string
		input string
		want  string
	}{
		{"0", "xxoxo,oooxo", "2,2,3,4,5,1,1,3,4,5"},
		{"1", "ooxxo,ooxxo", "1,1,2,2,5,3,3,4,4,5|3,3,4,4,5,1,1,2,2,5"},
		{"2", "oxoxo,oxoxo", "1,2,3,4,5,1,2,3,4,5"},
		{"3", "ooxoxx,oxxoxo", "1,3,4,5,6,6,1,2,2,3,4,5"},
		// 中略
		{"24", "oooooooooooo,xxxxxxxxxxxx", "1,1,3,3,5,5,7,7,9,9,11,11,2,2,4,4,6,6,8,8,10,10,12,12"},
	}
	for _, test := range tests {
		got := solve(test.input)
		if got != test.want {
			t.Errorf("%v: solve(%q)=%q, want %q\n", test.name, test.input, got, test.want)
		}
	}
}
```

実装 82行。長い。
combination を書かざるを得なかったのが辛かった。

ruby 版では combination → uniq → rest_of としたが、Go 版は rest_of を書くのが面倒だったのと combination が独自実装だったので、rest_of に相当する処理を combination の中に入れた。uniq も combination の中に入れた。

combination2（名前が悪い）は combination の中に隠したほうが良かったね。

あと。

スライスのコピーのために `append` を呼んだり、副作用のない `append` がほしくて `appended` を作ったり。

実行すると 手元のマシンで 13秒ちょっと。ruby 版が61秒だったので、速い。速いけど、思ったほどではない感じ。
テストの実行に Goルーチンを入れたら2〜3倍ぐらい速くなるのではないかと思うけど試していない。
[Xcode]ビルドに時間がかかるときは黄色いエラーを消すこと

# はじめに
いや、めっちゃビルドに時間がかかっていたんですよ。
（クソ雑魚Mac miniでアプリ作ってるからというのもあるけど）
ほかのMacでcloneしてもらってビルドしても、3分以上とか普通にかかったり。
Archiveするときに至っては5分とかざら。

どうにかなんないかなあと思って、少しでも良くなった方法があるのでいちおうメモしておきます。

# 対象
* ビルドに2分以上かかる
* 黄色い三角マークのエラーがいっぱい出てる（ビルドの時も、通常時も）

# やるべきこと
この黄色いエラーがなかなかやっかいで、ふつう思うわけですよ。

> いや、エラー出てるけど、別にビルドできるしええやん。ほかの共同開発者も放置してるし、放置しといてええやろ。

その結果、弊社のプロジェクトファイルには述べ200件近くのエラーが。
これをひとつひとつ消していきました。

## 具体的なエラーと消し方
WIP:

# 結果
これらのエラーを170個->20個に減らすことで、ビルド時間が圧倒的に短縮されました。
はじめからそうしろよって話。

まあ、表記がずれてるだけとかならまだいいんですが、エラーには **何かしら理由があって、たいてい治しておいたほうがいいものばかり**なので（`deprecated`になっているとか、`nil`の危険性をはらんだ`forced unwrapping`とか）、必ず一つ一つ直すようにしましょう。

気が向いたら具体的な「黄色いエラー」について追記していきます。