OmniAICreator/Qiita-1.07M huggingface dataset:
業務コミュニケーションをHipChatのみ⇒Slack併用にした所感

[株式会社オズビジョン](http://www.oz-vision.co.jp/)の@terra_yuccoです。
今まで社内のチャットツールはHipChatだったのですが、最近外部の方との協業を始めた関係で、Slackを導入しました。使ってみたら、かなり便利だったので、それを今回共有させていただきたいと思います。

なお本稿はオズビジョン初☆エンジニアによる**[アドベントカレンダー](https://qiita.com/advent-calendar/2017/ozvision)**内の一記事となっております。よろしければぜひ購読いただき、他メンバーの記事もご覧ください。

# Slackとは
- ビジネス向けのチャットツール
    - とはいえ、無料プランがあるので、個人利用ももちろん可能
    - そういえば某Pitでも使っていた気がする
- なぜかエンジニアやデザイナーといったクリエイター職に人気
- かっこいいデザインが好きな人にも人気
- 有料になるとHipChatの2倍くらいの価格
- 前はIntegrationの豊富さが武器だった、今はHipChatも頑張っているが…？

## 個人的に思う良いところ
- 発言が修正できる
- オープンチャンネルなら、joinしなくてもpreviewができる
- ステータスが柔軟に設定できる
- 投稿をURLでシェアできる
- 投稿をチームでブックマークできる
- 投稿を個人でブックマークできる

以下に、1つずつちょっと詳細に思いを語ってみようと思います。

### 発言が修正できる
最近、海外の方との協業チャレンジを始めたことにより、[英語を使う機会がとても増えています](https://qiita.com/terra_yucco/items/0967ea827f308ebabbb3)。
ですが英語は私にとって母国語ではないので、もう悲しいくらいにtypoが頻発します。あと、カタカナ英語と意味が違ったりする場合、後であわてて修正したりします。
HipChatの場合、発言が修正できないのでだいたいこんな感じになります。

```
[5:42 PM] y-terashima: あそこの項目なんですが動きがおかしい木がするんです
[5:43 PM] y-terashima: 気がするんです
```

ですがSlackならできるので、余計なログが増えないメリット。

```
y-terashima [5:45 PM] 
あそこの項目なんですが動きがおかしい気がするんです (edited)
```

※これがチャットの面白いところだったり、誤字からコミュニケーションが広がったり、というのももちろんあるんですが。特に英語だと1文字の違いで全く意味が通じなくなったりするのでやはりありがたいです。

### オープンチャンネルなら、joinしなくてもpreviewができる
HipChatはチャンネルに参加することで会話を見ることができますが、Slackは参加しなくてもプレビューができます。
もちろんリアルタイム更新はされませんが、このチャンネルどんなこと話してるチャンネルなんだろう？って思った時のキャッチアップがかなり気楽です。

### ステータスが柔軟に設定できる
弊社の今の設定はこうなっています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/95030/2e106a85-cf00-c7fc-44ea-fd910e11783c.png)
デフォルトでは :zzz: Not working は、:bus: Commuting でしたが、
通勤時間にこまめにステータスを変えるとは思えなかったため、上がるときに :zzz: にすればいいように変更しました。
しかしこうなると :palm_tree: Vacationing は必要ないような気もちょっとしています。

### 投稿をURLでシェアできる
ポストしたメッセージのひとつひとつにリンクが設定されるため、Copy Linkで取得したURLをどこかに転記しておくだけで、決めたことリストが作れたりします。とはいえ、実際のところは外部に転記するのが面倒なので、もっぱら下に示すブックマーク機能を使っています。

### 投稿をチームでブックマークできる
ピン留め機能:pushpin:は、ルーム内で共有できるブックマーク機能なので、チームの決めごとなどを刺しておくのにいいなあと思っています。
実際、現状は開発中のQAなどはきちんとしたドキュメントを作っておらず、Slackでざーっと話した内容がそのまま決まりごとになるので、大事なものをコルクボードに留めておくようなイメージでピンを刺すのは良いなと思っているところ。

### 投稿を個人でブックマークできる
そして個人的に便利に使っているのがスター:star:です。これは自分でつけるものなので、すぐには返答できないけれども後で答えないといけないQAや、MTGのアジェンダなどにつけています。
うまく使うことでSlackがタスクリスト代わりにもできそうだなと思っています。(とはいえ、実際はSlack以外にもコミュニケーションチャネルはあるので、そうはいかないのですが)

## まだ活用していないけれども活用したい機能
- /remind - [slack の /remind 機能まとめ](https://qiita.com/takesato/items/335061d7945ebd5c23f7)
- 外部連携 - [大流行中・Slackの使い方【外部サービス連携】隅々まで徹底解説！](https://seleck.cc/456)
    - 特にIFTTT。Slackは公式対応しているので、使い倒したいところです:thinking:

## 個人的に思う微妙なところ
- プライベートチャンネルをオープンにできない
- 費用がお高め
- 長めのチャットログを複数件コピペしたときに読みやすくない
- スレッド機能には可能性を感じるが、チームでうまく使うの難しい

このあたりは改善を望みたいところです:confused:

# おわりに
現状では社内にいろいろなコミュニケーションツールがありますが、チャットだとやはりダントツでSlackが使いやすいな、と感じています。というか、冷静に見返すと、チャット以上の価値をもたらす機能が多いからなんだとは思いますが…
まだメインはHipChatなのですが、徐々に移行していけたらいいなあ、と思っています。

アドベントカレンダーの次の更新は、日本人より日本語の上手い野鳥好きエンジニア、@kasia-some より。お題は、[OODA](https://ja.wikipedia.org/wiki/OODAループ) (Observe - Orient - Decide - Act) についての記事になる予定です。よろしければ明日もぜひご覧ください。
【おしまい。】
APIゲートウェイとしてKongを立ち上げる

ラクスアドベントカレンダー14日目！！

最近どこかのサイトで見かけたのを機にちょっと触っているKongというミドルウェアについてのお話です。

マイクロサービスの勉強がてら、ちょっとしたツールをREST APIとして作ろうとしたとき、各サービスのAPIをまとめて管理する仕組みがほしいなぁ...と探していた時に見つけたのが、このKongでした。


# Kongとは？
OSSとして開発が進められているAPI GateWayのためのミドルウェアです。
https://getkong.org/
マイクロサービスのデザインパターンである"API Gatewayパターン"では、クライアントは直接サービスとやり取りせず、下図のように必ずAPI GateWayを介して接続します。

![gw.PNG](https://qiita-image-store.s3.amazonaws.com/0/176262/687f36bd-2639-9973-7d6c-71872f894091.png)


これによるメリットは、ざっと以下の通りでしょうか。

* APIの所在がすぐわかるため管理しやすい
* 複数回のAPI呼び出しを一度の呼び出しで済ませることができる
* 認証などの共通作業を一括して行える

この"API GateWayパターン"の中核となる、GateWayの役割を果たすのがKongです。

# Kongを立ち上げる
今回はDockerを用いてKongを使います。
基本的に、こちらに書いてある通りで立ち上げることができます。
https://getkong.org/install/docker/?_ga=2.39172262.425030684.1513175023-410250169.1513175023

私が利用したdocker-compose.ymlはこんな感じです。

```:docker-compose.yml
version: '2'
services:
  kong_vol:
    image: busybox
    volumes:
      - /var/lib/postgresql/data

  kong-database:
    image: postgres:9.4
    environment:
      - POSTGRES_USER=kong
      - POSTGRES_DB=kong
    volumes_from:
      - kong_vol

  kong-migration:
    image: kong
    depends_on:
      - kong-database
    environment:
      - KONG_DATABASE=postgres
      - KONG_PG_HOST=kong-database
    command: kong migrations up

  kong:
    image: kong:latest
    depends_on:
      - kong-database
      - kong-migration
    environment:
      - KONG_DATABASE=postgres
      - KONG_PG_HOST=kong-database
      - KONG_PG_DATABASE=kong
    ports:
     - "8000:8000"
     - "8443:8443"
     - "8001:8001"
     - "8444:8444"

```

ただし、Kongは依存するDBが立ち上がっていないと、起動に失敗します。。。
そのため、立ち上げる時は`docker-compose up -d`を時間をおいて2回実行する必要があります。。。
（これ、なんとかならないのかな）

# Kongのキホン
立ち上げ方だけではあんまりなので、使い方を簡単に。

Kongでは、管理者とそれ以外で接続ポートが分けられています。

* 8001：管理者が接続するポート
* 8444：一般ユーザがAPIリクエストを投げてくるポート

管理者は、以下に説明する通り8001ポートにリクエストを送ることで、Kongの設定や操作を行うことができます。（これらのポートは設定で変更することも可能です。）

# Kongを使う
Kongへの操作はAPIで行うことができます。
詳しくは公式ドキュメントをご覧ください。ここでは代表的なもののみ紹介します。
https://getkong.org/docs/0.11.x/admin-api/

## API一覧表示
登録したAPI一覧は以下のURLにHTTPリクエストをGETメソッドで送ることで取得できます。

```
GET：/apis/
```


## 登録されているAPIについて
### API情報の取得

登録されたAPIについては以下のようなリクエストを送ることで詳細を取得できます。

```
GET：/apis/{name or id}
```

### APIの登録

APIはそれぞれ以下URLに対して、リクエストパラメータを指定することで登録できます。

```
POST：/apis/
```
|パラメータ|内容|
|:--|:--|
|name|APIの一意な名前|
|uris|APIの一意なURL。このURIが指定されたときにこのAPIが呼ばれる。|
|upstream_url|APIが呼ばれたときに実行されるAPI|

ここでのパラメータは一部です。
他にも、HTTPリクエストのメソッドを指定するためのパラメータなど様々な設定をすることができます。

### APIの削除

登録したAPIの削除は以下の通りです。

```
DELETE：/apis/{name or id}
```

# Kongの活用方法
Kongを触ってみてまず驚いたことは、Kongの設定や操作自体がRestの概念で出来ていることでした。
Restは知識としては知っていましたが、実際に「登録時にはPOSTでリクエスト」や、「削除時にはDELETEメソッド」などの指定方法を触ることで、知識だけでなくRestの学習ができた感じです。
私的には、今後Kongを用いたAPIアプリケーションを作成して遊んでみようと思うのですが、このそもそも、API GateWayを用いたデザインパターンでは、API GateWayがすべてを担うため、

1．API GateWayが落ちた時にすべてが不通となる
2．API GateWayがファットになる

といった問題点があります。
解決策としては、BFFを用いた機能の細分化などが挙げられるので、こちらもあわせて勉強しようと考えています。
ownCloudを10.0.4にしたらIDC Frontierのオブジェクトストレージが読めなくなった

ハマったのでメモ．

事象
====

- ownCloudで外部ストレージとしてIDC Frontierのオブジェクトストレージを指定していた．
- ownCloudを10.0.3から10.0.4にアップデートしたら外部ストレージを使っていたディレクトリ以下にアクセスできなくなった

環境
====

item       | description
:----------|:-----------
OS         | debian jessie
repository | deb http://download.owncloud.org/download/repositories/stable/Debian_8.0/ /
version    | owncloud-files:amd64 (10.0.3-1.1, 10.0.4-1.1)

原因
====

この修正があたったこと．
[S3 External Storage \- Athentication mechanism v4 not supported? · Issue \#14893 · owncloud/core](https://github.com/owncloud/core/issues/14893#issuecomment-279639422)

対策
====

インストール先を`/var/www/owncloud`とする．

```diff:/var/www/owncloud/apps/files_external/lib/Lib/Storage/AmazonS3.php
--- AmazonS3.php.orig
+++ AmazonS3.php
@@ -573,7 +573,7 @@
 			'secret' => $this->params['secret'],
 			'base_url' => $base_url,
 			'region' => $this->params['region'],
-			'signature' => 'v4',
+			//'signature' => 'v4',
 			S3Client::COMMAND_PARAMS => [
 				'PathStyle' => $this->params['use_path_style'],
 			],
```
[ios]segueを使わずに、Navigationbarを残しつつ、画面遷移する方法

下記の画像のように画面遷移をしたいと考えたところ。
遷移先のVCにはNavigationbarがないので、遷移元のNavigationbarを残しつつ、遷移することにする。

<img width="1057" alt="スクリーンショット 2017-12-14 18.03.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/175906/5f967717-28a7-4beb-9499-c9fd55fab83e.png">

```swift:sample.swift
let vc = storyboard!.instantiateViewController(withIdentifier: "detail") as! GroupDetailViewController
            //遷移先のtabbarを非表示にしている
            vc.hidesBottomBarWhenPushed = true
　　　　　　　　　　　　　　　　　　　　　　　　//遷移先に渡す変数を宣言
            vc.groupimage = (groupimage?.image)!
            vc.namelabel = item.name!
            vc.joinnumber = String(item.memberofnumber!)
            vc.amountlabel = String(item.payment!)
            vc.groupid = item.groupid!
　　　　　　　　　　　　　　　　　　　　　　　　//このメソッドでNavigationbarを残しつつ、遷移する
            self.navigationController?.pushViewController(vc, animated: true)

```

ただ、このまんまだと、Navigationcontrollerを通らず遷移することになり、Navigationbarの「戻る」をタップすると、「そんなアクションは設定されていない」と怒られてしまいます。
そこで、遷移先で下記のように実装します。特殊なことはしておらず、Navigationbarにボタンを設定して、タップしたら遷移元に戻るように処理を行います。

```swift:sample.swift
override func viewDidLoad() {
        super.viewDidLoad()
let leftButton = UIBarButtonItem(title: "戻る", style: UIBarButtonItemStyle.plain, target: self, action: #selector(GroupDetailViewController.gotoback))
                leftButton.tintColor = UIColor.white
                self.navigationItem.leftBarButtonItem = leftButton
    --中略--
}


@objc func gotoback() {
        if UserDefaults.standard.string(forKey: "tappedgroupname") == nil {
          //遷移元に戻る  
          self.navigationController?.popViewController(animated: true)
        } else {
            --中略--
        }
    }

```

NavigationControllerを取得して、その上で遷移すればいいんだろうけど、やり方がよくわからず力技で実装しました。
docker-composeで一瞬でwordpress環境を作る


久しぶりにwordpressのローカル環境作ることがあって、過去にdocker-composeでつくったやつがあったのを思い出したのでメモ

作成したdocker-composeはgithubに上げてあります
https://github.com/megaya/docker_compose_for_wordpress


フロントの人がいじりやすいように、クライアントにあるファイルをいじれるようにしたいので`./wordpress`ディレクトリをマウントするようにしました


## 環境

今のところmacでしか試していませんが、どこでも動くと思います

* docker
* docker native(if mac or win)
* docker-compose


## 使い方


```
$ git clone https://github.com/megaya/docker_compose_for_wordpress
```

```
$ ./init.sh

# or

$ ./init.sh 3.4.1
```

cloneしたあとに./init.shを叩くようにしてください。

シェルが使える環境であれば、`./init.sh`を叩けばwordpressを自動で落とせます
現状では`4.5.2`がダウンロードされます
他のバージョンが良い方は、引数にバージョンを指定してください

これを叩くと`./misc/datastore`というディレクトリが作成されます。そこをホストのvolumesにしています。


```
$ docker-compose up
```


docker nativeであれば以下で開くと思います
違う場合はipを指定してください

http://localhost:8080


## ほんの少しの解説

docker-composeに落とし込んだだけなので、ほぼありません
公式を見ればほぼのってます

dockerhub
https://hub.docker.com/_/wordpress/

github
https://github.com/docker-library/wordpress/tree/61dd78ce4fa9ccd592ead1edb379f209533b850c


### パスやホストの指定など


公式のDockerfileで下記のように、`wp-config.php`がないときは作成してくれるようです

https://github.com/docker-library/wordpress/blob/61dd78ce4fa9ccd592ead1edb379f209533b850c/fpm/docker-entrypoint.sh


```
if [ ! -e wp-config.php ]; then
	 wp-config-sample.php > wp-config.php
```

それと環境変数の`password`などで、wp-config.phpを書き換えてくれる

```
set_config 'DB_HOST' "$WORDPRESS_DB_HOST"
```



## 参考

公式dokcerhub
https://hub.docker.com/_/wordpress/

公式github
https://github.com/docker-library/wordpress
AWS CLI で VPC のネットワーク環境構築するメモ

こんな感じにしたい

![VPC構成 (2).png](https://qiita-image-store.s3.amazonaws.com/0/13148/628de2f4-55f3-6a0f-7340-88f4c343f538.png)



## VPC を作成

```
aws ec2 create-vpc --cidr-block 10.0.0.0/16
aws ec2 create-tags --resources vpc-XXXXXXXX --tags Key=Name,Value=sample-vpc
```

## gateway サブネット側設定

### サブネット作成

```
aws ec2 create-subnet --vpc-id vpc-XXXXXXXX --cidr-block 10.0.0.0/24
aws ec2 create-tags --resources subnet-gwXXXXXX --tags Key=Name,Value=sample-vpc-gw
```

### インターネットゲートウェイ作成 ~ VPC に紐付け

```
aws ec2 create-internet-gateway
aws ec2 create-tags --resources igw-XXXXXXXX --tags Key=Name,Value=sample-vpc-igw
aws ec2 attach-internet-gateway --vpc-id vpc-XXXXXXXX --internet-gateway-id igw-XXXXXXXX
```

### ルートテーブル作成

```
aws ec2 create-route-table --vpc-id vpc-XXXXXXXX
aws ec2 create-tags --resources rtb-gwXXXXXX --tags Key=Name,Value=sample-vpc-gw-rtb
aws ec2 create-route --route-table-id rtb-gwXXXXXX --destination-cidr-block 0.0.0.0/0 --gateway-id igw-XXXXXXXX
aws ec2 associate-route-table --subnet-id subnet-gwXXXXXX --route-table-id rtb-gwXXXXXX
```

### NATゲートウェイ作成

```
aws ec2 allocate-address --domain vpc
aws ec2 create-nat-gateway --subnet-id subnet-gwXXXXXX --allocation-id eipalloc-XXXXXXXX
aws ec2 create-tags --resources nat-XXXXXXXXXXXXXXXXX --tags Key=Name,Value=sample-vpc-nat-gw
```

### サービス側サブネット作成

### サブネット作成

```
aws ec2 create-subnet --vpc-id vpc-XXXXXXXX --cidr-block 10.255.1.0/24
aws ec2 create-tags --resources subnet-service1X --tags Key=Name,Value=sample-vpc-service1
```

### ルートテーブル作成

```
aws ec2 create-route-table --vpc-id vpc-XXXXXXXX
aws ec2 create-tags --resources rtb-serviceXX --tags Key=Name,Value=sample-vpc-service1-rtb
aws ec2 create-route --route-table-id rtb-serviceXX --destination-cidr-block 0.0.0.0/0 --nat-gateway-id nat-XXXXXXXXXXXXXXXXX
aws ec2 associate-route-table --subnet-id subnet-service1X --route-table-id rtb-serviceXX
```
AzureのSQL Serverにテーブルの内容を書き出す

[この内容](https://qiita.com/kyoro1/items/87b9f9bf29c6a057c1de)で、Azure SQL Serverからデータを抜き出せまして、`python`で扱えるようにしましたが、逆に書き込む場合のメモです。

## 試行前提

- PC OS: `Windows 10`
- Python: `python 3.5`
- Python libraries: `pandas`, `sqlalchemy`
- Azure上のテーブル設定(SQL Server)
    - server: `abc_server.database.windows.net`
    - database: `abc_database`
    - username: `abc_user`
    - password: `abc_password`
        - それぞれの`abc..`は適宜書き換えて下さい。
- Azure SQL ServerのFirewall設定を許可しといて下さい(認証でコケます)

## 何はともあれinstall

```sh
pip install sqlalchemy
```

## 接続 & export

```python3
## initial setting
server = 'abc_server.database.windows.net'
database = 'abc_database'
username = 'abc_user'
password = 'abc_password'

def export_sql_sv(DF, TABLE_NAME, username=username, password=password, server=server, database=database):
    ## 接続確認
    engine = sqlalchemy.create_engine(
    'mssql+pyodbc://'+ username +':'+ password + '@' + server + '/' + database + '?driver=SQL+Server+Native+Client+11.0')
    ## SQL DBにDataFrameをexport
    DF.to_sql(TABLE_NAME, engine, if_exists='replace')
```

で、もろもろ作業して作った`DataFrame`が`df`、`SQL Server`内のテーブル名を`table_abc`で設定するなら、、、

```python3
export_sql_sv(df, 'table_abc')
```

で`SQL server`にexport出来ると思います。
C++ Builder > Error > [ilink32 エラー] Fatal: ファイル '[化けた文字].OBJ'を開けません > 親フォルダ名での対処

```txt:動作環境
C++ Builder XE4
```

> [ilink32 エラー] Fatal: ファイル '瞹桦Ś젖E.OBJ' を開けません

プロジェクトフォルダの親フォルダ名に日本語を含めた場合に上記のエラーが出るようだ(例：Winソフト)。

親フォルダの名前を英数字(と"-"や"_"など)にすることでエラーは出なくなった。

別途、日本語名のフォルダを持つ他のプロジェクトではビルドエラーは出ない。オプション設定などで違いがあるのかもしれない。

### 「.OBJを開けません」シリーズ

- [c++ builder / FastReport > [ilink32エラー] Fatal: ファイル'FRXCLASS.OBJ'を開けません](https://qiita.com/7of9/items/3e7597dfec3485f26856)
- [C++ Builder > Error: [ilink32 エラー] Fatal: ファイル 'SPIN.OBJ' を開けません > #pragma link "Spin"を消す](https://qiita.com/7of9/items/8ffbda8612ac3fad5f27)
- [C++ Builder > Error > [ilink32 エラー] Fatal: ファイル '*.OBJ' を開けません](https://qiita.com/7of9/items/3ac48a2785d6abec855b)
vue.jsでFirebase Realtime Databaseを使ったシンプルなログ通知機能

最近、少しずつvue.jsを扱うようになってきたのですが、Firebase Realtime Databaseでデータベースの内容をストリーミングして、リアルタイムで通知機能みたいなのを作れないかなとやってみたことの備忘録です。

vuexを使って状態管理しています。なのでしれっと、説明なしでstore使ってますがそこはそれぞれ補完してください。$store.logの中身は、Booleanで未読既読の状態を保管てします。

# FirebaseConfigをコンソールから取得
ここはお決まりですね。

```firebase-config.js
export const firebaseConfig = {
  apiKey: 'your_apiKey',
  authDomain: 'your_authDomain',
  databaseURL: 'your_databaseURL',
  projectId: 'your_projectId',
  storageBucket: 'your_storageBucket',
  messagingSenderId: 'your_messagingSenderId',
}

```
# FirebaseをInitialize

config.jsはmain.jsと同じところにおきました。（それがいいかはさておき）

```main.js
import {firebaseConfig} from './firebase-config'
var fb = firebase.initializeApp(firebaseConfig)
export var firebaseDatabase = fb .database()
```
# mountされたら、Firebaseに接続
これでストリーミングしてくれます。簡単
`import {firebaseDatabase} from '../../main'`
という感じでscriptの中でimportします

```Log.vue
export default {
    name: 'log',
    mounted() {
      firebaseDatabase.ref('logs/').on('value', (snapshot) => {
        this.$store.state.logUnRead = snapshot.val()
      })
    }
}
```
storeの中はこんな感じです

```store/log.js
export default {
  state: {
    logUnRead: false,
  },
}
```

# 表示
通知そのものは簡単な赤ポチです。未読ログがある場合は出る、それ以外は表示しないというシンプルな感じです

```Log.vue
<span v-show="$store.state.log.logUnRead" class="unread-badge"></span>
```

```Log.vue
.unread-badge {
    background-color: red;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 10px;
  }
```

# Firebaseの更新
読んだよ！というのはここではわかりやすくボタンを設置しました

```Log.vue
<template>
 <a href="" @click.prevent="readLogs">読んだよ</a>
</template>

・・・（略）
<script>
  export default{
    name: 'log',
    methods: {
      readLogs() {
        let updates = {}
        updates['/logs/'] = true
        firebaseDatabase.ref().update(updates)
      },
    }
  }
</script>
```
npm の package.json の bin の意味とパッケージ公開

今日は、なんとなく使っていた npm をちょっと深堀してみた。自分のためのメモ。


# npm アカウントの用意

npm のサイトに、アカウントを作っておく。ユーザ名とパスワード。


<img width="1145" alt="2017-12-14_17h43_14.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/5b5331ea-af6d-772d-c88a-8a534737b2ab.png">

# 最初のプロジェクトを作成。

npm のパッケージは、git とうまく連携できるようになっている様子。npm init の前に先に github でリポジトリを作っておくのが吉。

[TsuyoshiUshio/hello-ushio](https://github.com/TsuyoshiUshio/hello-ushio)

で作ってみた。先にローカルにgitリポジトリを作ってから、パッケージを作る。

```
git init
git remote add origin git@github.com:TsuyoshiUshio/hello-ushio.git
npm init
```

あとは指示に従って作成。下記のような、package.jsonが出来た。bin の項目のみ追加した。

_package.json_

```json
{
  "name": "hello-ushio",
  "version": "1.0.0",
  "description": "NPM experiment project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "hello-ushio": "index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/TsuyoshiUshio/hello-ushio.git"
  },
  "keywords": [
    "experiment"
  ],
  "author": "Tsuyoshi Ushio",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/TsuyoshiUshio/hello-ushio/issues"
  },
  "homepage": "https://github.com/TsuyoshiUshio/hello-ushio#readme"
}

```

サンプルのこんな感じの`index.js` を作っておく

```js
#! /usr/bin/env node

function main() {
    console.log("Hello ushio!");
}

main();
```

# bin の意味合い

この`bin` の意味が知りたかった。

* [npm/bin](https://docs.npmjs.com/files/package.json#bin)
* 
設定をかいておくと、コマンド名を実際のコードにマップしてくれるらしい。

```
  "bin": {
    "hello-ushio": "index.js"
  },
```

今回はリポジトリは `package.json` と `index.js` だけなので、どこにも、`hello-ushio` コマンドは書いていない。
実際にこのnpm リポジトリをインポートすると

```
npm install hello-ushio --save
```

node_modules の下に `.bin` ディレクトリが出来て、そのなかに、ファイルが出来ている。

```
$ ls -a
./  ../  .bin/  hello-ushio/

 ~/Codes/npm/test/node_modules
$ cd .bin

 ~/Codes/npm/test/node_modules/.bin
$ ls
hello-ushio*  hello-ushio.cmd

```

こんなのが出来ている！ちなみに、linux ベースのOS用のファイルもできます。

_hello-ushio.cmd_

```
@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\hello-ushio\index.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\hello-ushio\index.js" %*
)
```

グローバルの方もインストールしてみてみます。

```
$ npm list -g
C:\Program Files (x86)\Nodist\bin
$ which hello-ushio
/c/Program Files (x86)/Nodist/bin/hello-ushio
```

global にインストールしたら、bin ディレクトリに同じくできています。

# npm パッケージを push する

最後にこのnpm パッケージを公開してみます。

```
git tag 1.0.0
git push --tags
npm add-user
npm publish
```

みたいな感じで公開されます。

これは簡単ですね。
なるほどー
HTTPテスト > Postman


# Postman

HTTP送信を簡単にシミュレートできるPostmanをインストールして使ってみます。
以下のページからダウンロードします。環境に応じてダウンロードしてください。

[Postman | API Development Environment](https://www.getpostman.com/)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/27ad7294-27fa-2202-e492-ea17e837a831.png)


ダウンロードの画面にすごく簡単に使うイメージ画像があります。
すごく簡略化してありますが、理解してしまえば、この画像の通りだなと腑に落ちます。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/01b67b7e-8e92-c1bf-b295-bd0871809d81.png)

## インストール

インストーラーを実行するとインストール始まります。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/9e03a357-42b0-caf9-2aa8-269999dc34df.png)


しばらく待つとPostmanが立ち上がります。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/9c424bbc-67e8-ef56-5a77-bf56c1fac0b5.png)

Postmanが立ち上がりました。
これでインストール終了です。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/e4d2d1b7-7dc5-f914-d89f-0faccd43848e.png)


## POSTMANでのPOSTテスト

以下、IBMのLanguage Translatorを例に説明します。
細かい設定は以下に記載しています。
[Language Translator > IBM Language Translator > チュートリアル Step1 \- Qiita](https://qiita.com/sugasaki/items/cac1d19874bba79cce81)

### Authの入力
新規設定、Autuorizationタブにて以下を入力します。

* HTTPメソッドからPOSTを選びます。
* URLには　https://gateway.watsonplatform.net/language-translator/api/v2/translate
* TYPEはBasic Authを選択
* ユーザー名とパスワードは資格情報にて取得したものをセット
* 

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/4de6f0fb-62c8-93a1-836b-0bf1da4b8ecc.png)

### Headerの入力
Headerタブにて以下を入力します。（順不同）
* Accept：application/json
* Content-Type：application/json

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/76b2a8ae-cf4b-2a31-7845-5aefed84c369.png)

※Authorizationは自動で登録されます。

### Bodyの入力
Bodyタブで以下のように入力します。
* text：Hello
* source：en
* target：ja

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a0bb0558-350d-bba3-cf9c-bfbe43b60d3d.png)


### 実行

Sendボタンを押します。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d3c6b828-fc9f-ed57-544b-ca2e9743dafa.png)

しばらく待つと画面下部に応答結果が表示されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/fb26dbc2-bc50-169b-0e93-cf4a7045dd31.png)
プロセスのメモリ使用量が少ないのにサーバのメモリが枯渇しているという障害の調査ログ

## 概要:
とあるサーバで使用されているメモリが90%を超えているというアラートが発生。
調査依頼が来たために対応した際のログと反省点になります。

## 原因:

結論から言ってしまうと原因は`slab`にありました。
この`slab`という存在が恥ずかしながら初耳だったのでなにを行っているものなのか把握していなかったのですがこの`slab`が持つ`dentry cache`に問題がありました。


## やったこと
当たり前ですがサーバに入ってどういう状態かを確認します。

## ロードバランサから対象のサーバを切り離し

作業が影響してしまうといけないのでロードバランサから対象サーバを切り離します。
その際のメモリの使用量を確認したところ確かに危険域にあり、リクエスト由来でメモリを使うなにかが影響してはいないように見えました。

## topコマンド

まず最初に`top -a`でメモリ使用量の多い順にソートしたプロセス一覧を表示します。
ところが`php-fpm`が複数立ち上がってこそいるもののメモリ使用量はそれぞれ0.x%と非常に少なく、MySQLなども問題ないレベルの使用量でどうやっても90%使っていそうなプロセスは見つかりませんでした。

## freeコマンド

`free -tm`でスワップや物理メモリの合計も表示するようにして確認。
スワップはなしでbuffers/cacheがメモリを圧迫しているのを確認。

## Meckerelを確認

ここ1ヶ月ほどのメモリ使用量などを確認、インスタンス起動から徐々にメモリ使用量が上昇していることを確認。
問題となる日付前のデプロイで影響がありそうな日時を確認、3GBほど増加しているがその後は多少の増減はあるがほぼ横ばい傾向であることを確認。

## ミス1:

今にして思えばここで大きなミスをしてしまいました。
徐々にメモリ使用量が増加していたという点に着目してしまい、アプリケーション側がキャッシュしすぎているのではないか？
もしくはミドルウェアかアプリケーション側にメモリリークするような実装があるのではないか？と疑ってしまいます。

疑い自体はいいのですがそのせいで視野狭窄に陥ってしまったと感じていてそれが原因究明の妨げになってしまったと考えています。

## ミス2

ぼくはtopコマンドの結果とfreeコマンドのusedの値がほぼ同一だったこと。
そして上記の考えに囚われてしまっていたためPHP側で使用しているAPC(OPCache)のメモリ解放方法を検索していました。

その間に同僚氏が`proc/meminfo`を実行します。

結果、`slab`がメモリの大半を使用しているという結果が出ます。

この情報をチーム全体に共有したことでこの`slab`がなにをしているものか、キャッシュデータを削除しても問題のないものか、キャッシュ削除するにはどうすればいいのか？という具体的な行動に移ることができるようになりました。

## 実行

今回はページキャッシュは残して、slabオブジェクト(dentryとinodeを含む)だけを消すという方針を取ることが決定したため以下のコマンドを実行しました。
実行を行う前に実行前の`free`コマンドと`meminfo`コマンド、`slabtop`コマンドを実行して内容をログとして残しておくことをオススメします。

```bash
# slabオブジェクト(dentryとinodeを含む)の解放(ページキャッシュは残す)
$ sync; echo 2 > /proc/sys/vm/drop_caches
```

実行後に再度`free`コマンドなどの確認作業を行います。
メモリがきちんと開放されていればOKです、お疲れ様でした。

## 参考:

- [サーバーのメモリが少しずつ圧迫される原因と対策を調べてみた](https://qiita.com/bezeklik/items/7e1ac9e5da39261be7bd)
- [プロセスのメモリ使用量が少ないのにメモリ使用量が増加していた時に調査、対応したこと](https://dev.classmethod.jp/cloud/aws/dentry-cache/)
- [slab肥大化とdentry_cacheに辿り着くまでの話](https://qiita.com/joe_hrmn/items/f0fb72b4598607403f2f)

## 今回の反省点:
### 反省ポイント1
当日中に対応完了が必須なタスクが別であったことから焦っていたのがまずかったと考えています。
障害だ！と思い、作業を中断して最優先で対応していたのですがクライアントに後ほど確認したところ今のところ問題は問題だが作業中のタスクを止めて対応するほどでないということを確認、調査開始前に一度どれくらい緊急かを確認しておくべきだったと思っています。

平常心で対応していれば、後述する反省ポイントも回避できた可能性があるなと思っています。

### 反省ポイント2
`top`と`free`で同じ結果だったから`proc/meminfo`をみてもどうせ対して変わらないだろうと勝手に判断してしまい、実行をスキップしていたのが最大の反省点だと考えています。

そもそも`proc/meminfo`がどういうものかをきちんと理解していなかったのも駄目だったと思っていてプロセスのメモリ使用量が少ないんだからその情報をみても意味がないと勝手に判断していました。
実際にはしっかりと答えがのっており、思い違いも甚だしかったわけですが。

障害児は愚直なまでに一つ一つの作業内容を確認していくことが最重要だということを改めて思い知りました。

### 反省ポイント3
今回と同様の`slab`問題が実は過去に別案件で発生していたらしく、もっと広く障害状況を報告しておけばよかったと思っています。
こういうときに分報のような仕組みがあると見てくれている人からヒントが貰えるかもしれないなと思いました。
障害対応というチャンネルがあれば誰がなにを対応していて、どういう状況か把握しやすくいいのかもしれないと感じました。


## 良かった点:
### メンバーを巻き込んだ
障害発生時にまずチームメンバーに「このような障害が発生している、あわせてこちらでも調査するが緊急度が比較的高いので優先的になにが原因か調べてほしい」と共有したことは良かったことかなと思っています。

当たり前といえば当たり前なのですが結果としてそれが原因究明に繋がったという意味では良かったと思います。
逆に言うとそれくらいしか良かった点がない。

## まとめ:
障害対応時にもっとも必要なことは冷静さ、そして1つ1つの作業を確認し現在の状態をしっかりと把握する、その際に憶測でものを考えない愚直さが必要ということを改めて学ぶことになりました。

定期的に障害対応を行わないと焦ってしまって、大事なことをすっ飛ばしてしまうのだなと反省しています。
カオステストはそういう意味では非常に理にかなったテスト手法なのかもしれないと思いました。
Bitcoinの将来の値段を予測してみた（できなかった）

Nuco Advent Calendar 13日目の記事です。


# Bitcoin
最早毎日のようにニュースやSNSで仮想通貨の話題を目にするようになりました。
私も個人的に投資目的でいくつか仮想通貨を購入していますし、
マイニングリグを組み立ててマイニングもしています。

価格が不安定なので、通貨としてというよりも投資目的で仮想通貨を購入している人が今は多いと思います。
多少デイトレードも行ってますが、基本的には長期的に保持して資産が増えていくのを楽しんでます。

そうなれば気になるのは将来的にBitcoinがいくらくらいになるのかが知りたいですね。
よし、やってみようではないか。


# ロジスティック方程式
僕は経済学などには特に詳しくないのですが、
通貨の価値が高まれば高まるほど、通貨を欲しがる人は増えるでしょう。
通貨を欲しがる人が増えれば増えるほど通貨の価値は高まります。
と考えられます。

そうなれば線形な関数よりも非線形に増えていくほうが自然な気がします。
実際に過去のBitcoinは線形関数よりも指数関数の方がよく近似できます。
Excelなどで対数目盛を使うと直線に近づくのがわかると思います。

**通常の目盛り**
![ダウンロード (3).png](https://qiita-image-store.s3.amazonaws.com/0/183295/9f74c92c-9f6d-4956-5f91-210ab9d38463.png)

**対数目盛り**
![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/183295/48863712-c978-f2bc-fb85-3cd259ac01c5.png)
指数関数よりも強いな…

指数関数で近似しても良いのですが、
感覚的に将来の価格はどこかのタイミングで頭打ちになると考えた方が自然でしょう。
それがどのくらいの価格になりそうなのか知りたいですね。
そこで出て来るのが**ロジスティック方程式**です。

[wikipedia](https://ja.wikipedia.org/wiki/%E3%83%AD%E3%82%B8%E3%82%B9%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E6%96%B9%E7%A8%8B%E5%BC%8F)

生物の個体数増加のモデルとして知られます。
生物の個体数は個体数が増えれば増えるほど、増加率も大きくなりますが、
環境収容力（土地や食料など）によって制限がかかり、やがて増加が頭打ちになります。
このロジスティック方程式にフィッティングさせれば、将来どのくらいの価格になるか、予想できるかもしれません。


# フェルフルストモデル

1838年にベルギーの数学者Pierre Verhulst(フェルフルスト)によって考案されたモデルです。
具体的には下記の微分方程式になります。

$\frac{dN}{dt}=r_{0} N(1 - \frac{N}{K})$

上記の解は、
$N_{t} = \frac{N_{0}K}{N_{0} + (K - N_{0}) e^{ - r_{0}t}}$

|記号|意味|
|:---|:---|:---|
|$r_{0}$|平衡水準に近づく速さ|
|$K$|環境収容力|
|$N_{0}$|$t=0$のときの値|
|$N_{t}$|時間$t$のときの値|

こちらのモデルのパラメータを最小二乗法で求めてみます。


# 最小二乗法
ライブラリはScipyを用います。
Scipyにはleastsqという最小二乗法フィッティングソルバがありますので、こちらを使います。

下記が実際のソースコードです。
実行環境はUbuntu14.04, python3, jupyter notebookです。

```python3:predict.ipynb
df = pd.read_csv('./btc_jpy.csv', thousands=',')
df = df[0:-2]
high = df['高値'].apply(lambda x: x.replace(',','')).astype(np.int)
low = df['安値'].apply(lambda x: x.replace(',','')).astype(np.int)
median = ((high + low) / 2).astype(np.int)
df = DataFrame({'date': df['日付け'], 'median': median})
df = df[::-1]
df.index = range(len(df))
```
データをいい感じに整形します。
1日ごとの高値と安値の平均を使います。


```python3:predict.ipynb
def logistic_model(param, x, y):
    N0 = 49107
    r0 = param[1]
    K = param[0]
    y0 = 0
    Nx = y - N0 * (K/(N0+(K-N0)*np.exp(-r0*x)))
    return Nx

r, info = leastsq(logistic_model, [100000, 0.1], args=(df.index, df['median']))
r
>[  4.60186206e+12   2.53551510e-03]
```
こちらでparameterを算出します。
このパラメータを用いて、

```python3:predict.ipynb

def predict(x):
    N0 = 49107
    r0 = 2.85628441e-03
    K =6.53673303e+12
    y0 = 0
    return N0 *  (K/(N0+(K-N0)*np.exp(-r0*x)))

fig = plt.figure()
ax1 = fig.add_subplot(1,1,1)
ax1.scatter(df.index, df['median'], label='actual', color='blue', marker='o')
ax1.scatter(df.index, predict(df.index), label='predict', color='red',marker='x')
fig.show()
```

実際にプロットして比べてみます。

![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/183295/85f22450-e556-96c1-d3b2-2e59bd2f39e3.png)

うーん。。あまり上手くいきませんね。。
ビットコインの価格の上がりが強すぎるのと、変曲点を越えて頭打ちになり始めないとフィッティングは難しいようです。。


#　まとめ

目的は果たせませんでしたが、Scipyなどのパッケージを使った非線形関数へのフィッティングの実装ができたので、
何かおもしろい題材があればまたやってみたいと思います。
Windows７系のOSでMYSQLをaccessで参照しようとした話

#windows7の管理ツールではデータソース(ODBC)は64bitの物しか出ない！！
これのせいでしばらく積んでたのが解決したので記憶があるうちに書いとくことにする。
![ICOPY000.jpg](https://qiita-image-store.s3.amazonaws.com/0/176029/a1655b08-723c-5664-a270-68e045ec70e7.jpeg)
上の画像はWindows７(実際はWindowsserver2008だが）のコントロール パネル\システムとセキュリティ\管理ツールのスクショである。
赤線で示したデータソース(ODBC)は64bit版のものでaccess用にインストールした32bit版のmysql　odbc　がシステムDNSに追加できない。
なので32bit版のデータソース(ODBC)を探して実行した。
##わかりにくい置き場所
目的のブツのファイル名は　odbcad32.exe　これがどこにあるかというとC:\Windows\SysWOW64と一見32bit版の物が置いてあるとは思わないような名前をしている。
調べたところここは32bit版のプログラムの置き場らしい。クッソ解りずらいにもほどがある。
なんにせよ見つけたファイルを実行してやれば32bit版のデータソース(ODBC)の設定ができる。
Windows8からは64bit、32bit両方の物が表示され解り易くなっているので楽なんだが...
##ついでに
ODBCインストールでちょいと気になったところを書いておこう。
普通にインストーラを公式からダウンロードしてやるだけではダメらしい。
インストール先のmyodbc-installer.exeを実行しなきゃならんとのことだが、実行しても一瞬コマンドプロンプトが見えるだけで何がどう変わったのかがわからなかった。
詳細が解ったら追記したいと思う。
WebAssemblyで実装された仮想DOM asm-dom でWeb Componentsを使ってみた


## asm-domとは
https://github.com/mbasso/asm-dom

asm-domはWebAssemblyで実装された仮想DOMライブラリです。

asm-domのさわりの記事はこちら
https://qiita.com/kwst/items/e8a2505ec20c5021087b

## Web Componentsとは
Web技術で再利用可能でカプセル化されたパーツを作るためのAPI群です。
<strong>ライブラリではなくAPI</strong>なのでpure JSで書くことができます。各ブラウザでやっと実装が進んできた段階なので、ブラウザに寄ってはまだ実装されていないAPIがあったりします。

MDNによる解説
https://developer.mozilla.org/ja/docs/Web/Web_Components
> Web Components は、いくつかの独立したテクノロジーで構成されています。 Web Components は、オープンなウェブテクノロジーを使用して作成された再利用可能なユーザーインターフェイスウィジェットと考えることができます。これらはブラウザーの一部であるため、jQuery や Dojo などの外部ライブラリーは必要ありません。 HTML ページにインポートステートメントを追加するだけで、既存の Web Components をコードを記述することなく使用できます。 Web Components は、新規または今も開発中の標準ブラウザー機能を使用します。

## サンプル
サンプルとしてshadow　domとcustom elementsを使ったクラスをasm-domでレンダリングします。

コンポーネントクラスは`attachShadow`でshadow domを使えるようにして、`shadowRoot`の子要素をpatchにかけます。

```js:web-component.js
export default class WebComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const n = document.createElement('div');
    this.shadowRoot.appendChild(n);
    const { h, patch } = window.asmDom;
    const vnode = h('div', {}, [ 'This is Web Components' ]);
    patch(n, vnode);
  }
}
```

コンポーネントを使う側では、`customElements.define`でcustom elementを定義してbodyに追加します。

```js:index.js
import init from 'asm-dom';
import WebComponent from './components/web-component';
customElements.define('web-component', WebComponent);

init({
  unsafePatch: true
}).then(asmDom => {
  const { h, patch } = asmDom;
  const root = document.getElementById('root');
  const vnode = h('web-component', {}, []);
  patch(root, vnode);
});
```

サンプルレポジトリ
https://github.com/SatoshiKawabata/asm-dom-example
[デモページ](https://satoshikawabata.github.io/asm-dom-example/)

### unsafePatchプロパティ
はじめ、asm-domの`init()`の引数に何も入れずに立ち上げたら`patch()`が上手く動かず、何も表示されませんでした。
`unsafePatch`をtrueにすることで、[oldVnodeではないvnodeを`patch()`に渡すことができます。](https://github.com/mbasso/asm-dom/blob/master/docs/js.md#patch)

ここのコードで空の`div`要素と新しいvnodeを`patch()`に渡しているので、`unsafePatch`が必要でした。

```js
const n = document.createElement('div');
const vnode = h('div', {}, [ 'This is Web Components' ]);
patch(n, vnode);
```

これは[Web Componentsのissue](https://github.com/mbasso/asm-dom/issues/12#issuecomment-351528727)でが動かないよって言ったら教えてくれました。
Railsを使ってWebアプリを作ってみよう

#早速やってみよう
Windows10　pro　64bit　
Rails version: 5.1.4
Ruby version: 2.4.2 (x64-mingw32)

##１．アプリケーションの置き場を決める
Railsを使うことによって**簡単にWeb系の開発ができる**ということなのだが、その理由は「ひな型」つまりテンプレート的な、決まっている**最低限の部分をコマンド一発で作成してくれる**ところにあるんだそう。開発を加速させたい方や、学生にはもってこいな話ですね！！
早速コマンド一発撃って始めたいところなんだが、まずはコマンドによって必要なファイルが自動で作られていくわけなんだから、「置き場所」を決めないとね！！
どこにしたにいいかって？それは・・・**自由だぁぁぁぁ(=ﾟωﾟ)ﾉ**
私は、とりあえずDesktopに「WebApp」というフォルダを作ったよ。

##２．コマンドを実行
コマンドプロンプトを起動して「１」で作ったフォルダに移動します。
カレントディレクトリを移動するのは　
>cd　行きたい場所のパス

でＯＫ。例えば私の場合は　「cd c:\users\ユーザー名\desktop\webapp」
そこでコマンドを一発撃つわけです。

>rails new アプリケーション名 [option]
※アプリケーション名は好きなものに決めてやりましょう。[Option]は省いてもok

コマンドを入れると何やら色々やってくれます。
>Bundle complete! 13 Gemfile dependencies, 67 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

こんなのが最後に出てくれば成功！！

##３．ローカルホストを立ち上げよう
さてアプリケーションのひな型はコマンド一発出てきたわけなんだが、実際に**どんなのができているのか見たくなぁぁぁぁい？？？( ･´ｰ･｀)**やっぱり見たいよねぇぇぇぇ。
でもホームページサーバ持ってる？持ってないよねぇぇぇぇ( ;∀;)普通持ってないよね( ;∀;)
そんな開発者(?)の為に、**自分のパソコンをサーバーにする**そんなツールが世の中にはあるんだってさ。例えば「Apache」とか。でもApache構成するの結構大変だったな・・・またやらなくちゃいけないのか・・・って思ってたけど、なんか**そんなツールも入っちゃってるんだってさぁぁぁ！！**それが**「WEBrick」**
これがもう入っちゃってるんだっとさ。なんて便利なんでしょう。先駆者に感謝。
では、**「これからローカルサーバー立ち上げます」**っていうコマンドを実行してみよう。
コマンドを実行する際には、どのアプリケーションを対象にサーバーするかツールが理解する必要がある。だからまたコマンドプロンプトで対象となるアプリケーションのフォルダに移動だ。さっきアプリを作ったのが・・・
c:\users\ユーザー名\desktop\webapp\アプリケーション名

だったからコマンドプロンプトには

>cd c:\users\ユーザー名\desktop\webapp\アプリケーション名

と打つ。

そこで、**「これからローカルサーバー立ち上げます」**っていうコマンドを実行
そのコマンドは>**rails　sever**でok。つまりコマンドプロンプトはこうなる。

>c:\Users\ユーザー名\Desktop\webapp\アプリケーション名>**rails server**
※強調部分だけ入れるんだよ。わかってると思うけど。

起動にはしばらく時間がかかる(１分くらいかな？)これでローカルホストにアプリケーションが立ち上がった事になる。・・・**見たくなぁぁぁい？( ･´ｰ･｀)**やっぱり見たいよねぇぇぇ( ･´ｰ･｀)

##４.見てみよう！！
お使いのブラウザを開いて、アドレスの欄にこれを入れよう！！
>http://localhost:3000/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222774/efb7ef81-c871-d0fa-5301-169a91753410.png)

おめでとう！！
これでスタートラインだね！！(よくこれで満足して終了してしまうことが多いのは気のせいか・・・)

まんぞくしたら、**サーバーを止めるのを忘れずに！！**(結構負荷があるみたい)
※マンドプロンプト上で[Ctrl]+[c]を押して下さい。
indexからcolumnへ、columnからindexへ

`SQL`で作成したテーブルと、`python`で`pandas`のdataframeを行き来する場合、
`pandas`の`index`が登場するとどうも頭がこんがらがってしまう性格なので(滝汗)、
`index`の生成、`index`の内容をカラムに持たせる部分のメモ。

# まずは簡単なdataframeを作ってみる(準備)

```python3
import pandas as pd

df = \
pd.DataFrame({ 'date' : ['2017-12-14','2017-12-15','2017-12-16'],
               'symbol' : ["A","B","C"],
               'number' : [1,2,3]})
```
すると、

```python3
>>> df
         date  number symbol
0  2017-12-14       1      A
1  2017-12-15       2      B
2  2017-12-16       3      C

>>> df.index
RangeIndex(start=0, stop=3, step=1)

>>> df.columns
Index([u'date', u'number', u'symbol'], dtype='object')
```
という感じですね。


# カラム内容をindexに持たせる

`set_index()`の引数に、`index`に持たせるカラムを指定します。

```python3
## "date"カラムの内容をindexに指定
df1 = df.set_index("date")

>>> df1
            number symbol
date
2017-12-14       1      A
2017-12-15       2      B
2017-12-16       3      C

>>> df1.index
Index([u'2017-12-14', u'2017-12-15', u'2017-12-16'], dtype='object', name=u'date')

>>> df1.columns
Index([u'number', u'symbol'], dtype='object')
```


# indexの内容をカラムに持たせる
`reset_index()`メソッドで、`index`の内容をカラムに戻します。

```python3
df2 = df1.reset_index()

>>> df2
         date  number symbol
0  2017-12-14       1      A
1  2017-12-15       2      B
2  2017-12-16       3      C

>>> df2.index
RangeIndex(start=0, stop=3, step=1)

>>> df2.columns
Index([u'date', u'number', u'symbol'], dtype='object')
```
今回の例で言えば、`df`と`df2`の内容は同じですかね。


# Reference(official documents)
- [pandas.index](https://pandas.pydata.org/pandas-docs/stable/generated/pandas.Index.html)
- [pandas.DataFrame.set_index](https://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.set_index.html)
- [pandas.DataFrame.reset_index](https://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.reset_index.html)
Slick Table(with MySQL)のコード自動生成

Slick3.2 のTable Class コードを自動生成できる `slick-codegen` だが、サンプルがあるようでなくて地味に時間がかかったのでコードメモ。

mysqlのversionを6以上にするとコンパイルが通らなかったり、依存系な罠が多かった。
なお、時間がTimeStampやDateとして出力されるのが微妙すぎたので、`slick-joda-mapper` を使用し、
Option[DateTime]として出力している。また、AutoIncrementもautoIncLastAsOption = true によりOption化した。

`application.conf` にDB設定を記述することで使用できる。

* http://tototoshi.hatenablog.com/entry/20130323/1364013170
* https://github.com/tototoshi/slick-joda-mapper

詳しくは https://github.com/EudyptesCapital/slick-table-code-generator


```build.sbt
import sbt._

lazy val root = (project in file("."))
  .settings(
    inThisBuild(List(
      scalaVersion := "2.12.4",
      version := "1.0.0"
    )),
    name := "SlickTableCodeGenerator",
    libraryDependencies ++= List(
      "com.typesafe.slick" %% "slick" % "3.2.0",
      "com.typesafe.slick" %% "slick-codegen" % "3.2.0",
      "joda-time" % "joda-time" % "2.7",
      "com.github.tototoshi" %% "slick-joda-mapper" % "2.3.0",
      "org.scalatest" %% "scalatest" % "3.0.3" % Test,
      "org.slf4j" % "slf4j-nop" % "1.6.4",
      "mysql" % "mysql-connector-java" % "6.0.5",
      "org.scala-lang" % "scala-reflect" % scalaVersion.value,
      "org.joda" % "joda-convert" % "1.7",
      "com.typesafe" % "config" % "1.3.1"
    ),
    dependencyClasspath in Runtime += baseDirectory.value / "config"
  )
```

```SlickTableCodeGenerator.scala
object SlickTableCodeGenerator extends App {

  val config = ConfigFactory.load
  val tablesName = config.getString("db.name") + "Tables"

  val db = Database.forURL(
    config.getString("db.url"),
    driver = config.getString("db.jdbc.driver"),
    user = config.getString("db.user"),
    password = config.getString("db.password")
  )

  val model: Model = Await.result(db.run(MySQLProfile.createModel()), Duration.Inf)
  new CustomSourceCodeGenerator(model).writeToFile(
    config.getString("db.slick.profile"),
    config.getString("output.dir"),
    config.getString("package.name"),
    tablesName,
    tablesName + ".scala"
  )
}

class CustomSourceCodeGenerator(model: Model) extends SourceCodeGenerator(model) {

  override def code = "import com.github.tototoshi.slick.MySQLJodaSupport._\n" + "import org.joda.time.DateTime\n" + super.code

  override def Table = new Table(_) {
    override def autoIncLastAsOption = true // AutoIncrement to Option

    override def Column = new Column(_) {

      override def rawType = model.tpe match {
        case "java.sql.Timestamp" => "Option[DateTime]"
        case "java.sql.Date" => "DateTime"
        case _ => super.rawType
      }
    }
  }
}
```

```application.conf
db = {
  name: "Database"
  url: "jdbc:mysql://localhost/database?useSSL=false&nullNamePatternMatchesAll=true"
  jdbc.driver: "com.mysql.cj.jdbc.Driver"
  slick.profile: "slick.jdbc.MySQLProfile"
  user="root"
  password=""
}
package.name: "package"
output.dir: "./output"
```
Gradle の Task.leftShift() を Task.doLast() に置き換える

# このエントリを読むと分かること

Gradle の `task hoge << { ... }` は `task hoge doLast { ... }` に置き換えましょう、ということが分かる。
ついでに本題も上記一文で終了したので以下はおまけ。

# 非推奨になった `Task.leftShift(Closure)`

久々に Gradle(4.2) を触ったらタスク定義で警告メッセージが。

```groovy:build.gradle
task hoge << { // '<<' は Task.leftShift(Closure) のエイリアス
    ...
}
```

```text:警告メッセージ
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0.
Please use Task.doLast(Action) instead.
```

* `Task.leftShift(Closure)` は非推奨になりました。
* Gradle 5.0 で削除予定です。
* 代わりに `Task.doLast(Action)` を使ってください。

Gradle 3.2 で非推奨になったらしい。

[Gradle 3.2 のリリースノート](https://docs.gradle.org/3.2/release-notes.html#deprecations) から抜粋：

> The last change we want to bring to your attention has been a long time coming and will affect a large number of builds: the shortcut syntax for declaring tasks (via <<) has **now been deprecated.**
> The eagle-eyed among you will notice that the user guide examples have been updated to use doLast() and we strongly recommend that you follow suit. This feature will be removed in Gradle 5.0!
> See the [Deprecations section](https://docs.gradle.org/3.2/release-notes.html#deprecations) for more details.


# `Task.doLast(Action)` に置き換える

置き換え案としては下記のいずれかになると思う。

## 案1

恐らくこれが一番楽。
`group` や `deprecation` を設定してる場合はよくないかもしれない(未調査)。

```groovy:build.gradle
task hoge doLast {
    ...
}
```

もしくは

```groovy:build.gradle
task(hoge).doLast {
    ...
}
```

## 案2

タスクオブジェクトの作成と処理の定義を分ける。
既存タスクへの追加であればこれで。

```groovy:build.gradle
task hoge
hoge.doLast {
    ...
}
```

## 案3

Gradle 公式で提示されてるのはこれ。
個人的にネストが深くなるのが嫌なので、前述の案で問題がない限りは使わないかも。

```groovy:build.gradle
task hoge {
    doLast {
        ...
    }
}
```

## ダメなパターン

最初にやったしょっぱいミス。

```groovy:build.gradle
task hoge.doLast {
    ...
}
```

```text:実行結果
FAILURE: Build failed with an exception.

* Where:
Script 'build.gradle' line: XX

* What went wrong:
A problem occurred evaluating script.
> Could not get unknown property 'hoge' for root project 'HogeProject' of type org.gradle.api.Project.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
```

未定義の `hoge` に対して `doLast()` を呼び出している形になるのでエラーとなる。
Ruby で hash の配列から、特定の key の value のみの配列を作成する

# やりたいこと

```ruby
hoge = [{a: 1, b: 2}, {a: 3, b: 4}]
```

から、

```ruby
[1, 3]
```

を作る。

# やり方

```ruby
hoge.map { |h| h[:a] }
```

こんな簡単に実現できるとは思わなかった。。。情けない。
コーディングにも便利なPugの変数についてまとめといたよ

# 概要

プロジェクトで使うレベルでなくても、HTMLのコーディングに変数使いたい時ってあるよね？:writing_hand:

Codepenとか使えばすぐに書き出せるので、僕はいつも使ってます。

内容はだいたいこのへん:dog:
https://pugjs.org/language/iteration.html

# さっそく書くね

これが

```index.pug
.container

  h1 Variable
  -var variable = "a variable"
    p This is #{variable}.

  h1 Array
  -var array = ["This","is","a","array"]
    p #{array[0]}
      strong #{array[1]}
      small #{array[2]}
      mark #{array[3]}
    h2 -each
    ul
      each val in array
        li #{val}

  h1 Object
  -var object = {subject:"This", verb:"is", complement:"a object"}
  ul
    each val, index in object
      li #{index} : #{val}
      
```

こうなるよ

```index.html
<div class="container">
  <h1>Variable</h1>
  <p>This is a variable.</p>
  <h1>Array</h1>
  <p>This<strong>is</strong><small>a</small>
    <mark>array</mark>
  </p>
  <h2>-each</h2>
  <ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>array</li>
  </ul>
  <h1>Object</h1>
  <ul>
    <li>subject : This</li>
    <li>verb : is</li>
    <li>complement : a object</li>
  </ul>
</div>
```

コーディングを楽したい時に便利ーーすごーーーい:relaxed:

動いてるやつこれ
https://codepen.io/ksyunnnn/pen/gobNZP
Kubernetes-powered Docker for mac is released! 

> この記事は https://blog.web-apps.tech のcross postです。

 ![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/kubernetes_logo.png)

DockerCon EU 2017で、DockerがKubernetesを統合・サポートすると[発表されました](http://www.publickey1.jp/blog/17/dockerkubernetesdockercon_eu_2017.html)が、本日ついにKubernetesサポート版Docker for macが(Edgeリリースですが)リリースされました！

これにより、macを使用している場合は(おそらく過去最も簡単に)開発用Kubernetesクラスタを起動することができるようになりました！

この記事では、Docker for macでKubernetesを立ちあげる手順をまとめておきます。

## Kubernetesの起動手順

Docker for macのStable版を利用している場合、Edge版をインストールする必要があります。  
[Install Docker for mac](https://docs.docker.com/docker-for-mac/install/)のページから、Edge Channelのインストーラをダウンロードし、インストールします。  
Dockerを終了させておけば、Stable版を自分でアンインストールする必要はありません<sup><a href="#fn1" id="fnref1">[1]</a></sup>。  
Edge版をインストールし、Dockerの設定画面を開くと、以下の様にKubernetesタブが追加されています！！

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-general.png)

Kubernetesタブで、Kubernetesの有効化・無効化を簡単に切り替えることができます。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-kubernetes.png)

`Enable Kubernetes`にチェックを入れ(`Show system containers`はお好みで)、`Apply & Restart`ボタンを押すと、「Kubernetesの初回インストールは少し時間かかるけど、インストールする？」という確認画面が出るので、`Install`を押します。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-progress-kubernetes.png)

一応プログレスバーが出るのですが、余り意味はありませんでした・・・  
数分でインストールが終わります。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-done-kubernetes.png)

無事インストールが終了したら、`Close`を押したあと、設定画面を閉じます。

この時点で、DockerメニューにもKubernetesのステータスが表示されています。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-menu-kubernetes-is-running.png)

今回私は`Show system containers`をオンにしたので、`docker ps`<sup><a href="#fn2" id="fnref2">[2]</a></sup>するとKubernetesの動作に必要なコンテナが起動しています。  
DNS、API Server、Etcd、Scheduler、Proxyと最小限の構成ですね。

kubectlが自動でインストールされるのかどうかは・・・・わかりませんでした。(すでにインストール済みだったため)  
kubectlがインストール済みの場合、自動でコンフィグが追加され、以下のコマンドでcontextを選択することで操作できるようになります。

```
$ kubectl config use-context docker-for-desktop
```

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-kubectl-get-nodes.png)

`kubectl get nodes`すると、確かに1ノード構成でクラスタが立ち上がっているのがわかります。

* * *
<section>
<ol>
<li id="fn1">
<p>Edge版の初回起動時にアンインストールされます <a href="#fnref1">↩︎</a></p>
</li>
<li id="fn2">
<p><code>docker container ls</code>と打つのは面倒ですね <a href="#fnref2">↩︎</a></p>
</li>
</ol>
</section>
【Scratch】ベクターモードでできること

##1.「選択」
　選択ボタンをクリックしてから、パレット上におかれているものをドラッグしてみよう！
scratchに元から入っているキャラクターの絵をクリックすると、次の３つのボタンが追加されます。
　＊レイヤーをさげる
　　選択されたものを１層前にだすことができます。
　＊レイヤーをあげる
　　選択されたものを１層うしろにさげることができます。
　＊グループ解除
　　選択されたものを、レイヤー別に分解します。
　　グループ解除をうまく使うと、キャラクターの手や足の位置などをかえることができます。

##2.「形を変える」
　形を変えるボタンをクリックしてから、パレット上におかれているものをクリックすると、丸いものがいくつか表示されます。
　表示された丸いものをドラッグすると、形を変えることができます。左下の「滑らか」ボタンを押すと、丸の数が減り、曲線をなめらかにしてくれます。
　形を変えておもしろキャラクターをつくってみてね！

##3.「鉛筆」
　自由に描くことができます。オリジナルキャラクターを作りたい人、自分だけの絵を作りたい人におすすめ。「鉛筆で描いたもの」＋「形を変えるボタン」を組み合わせると、綺麗な曲線でオリジナルキャラクターがつくることができます。
　左下のメーターでペンの太さが変えられます。

##4.「直線」
　まっすぐな線（直線）を描くことができます。描いた線の端の丸から、さらに線を描くと最初に描いた線とつながります（一つのオブジェクトになる）。
　左下のメーターでペンの太さが変えられます。

##5.「四角形」
　四角形を描くことができます。Shiftキーを押しながら描くと、正方形になります。左下のボタンで「枠だけモード」と「ぬりつぶしモード」の切り替えができます。
　左下のメーターでペンの太さが変えられます。

##6.「楕円」
　楕円（だえん）を描くことができます。Shiftキーを押しながら描くと、きれいなまる（円）になります。左下のボタンで「枠だけモード」と「ぬりつぶしモード」の切り替えができます。
　左下のメーターでペンの太さが変えられます。

##7.「図形の色」
　図形のぬりつぶしができます。マウスポインターをオブジェクトに近づけると、ぬりつぶした状態をみることができます。クリックして、ぬりつぶし完了です。　

##8.「複製」
　選択されたものを複製することができます。複製ボタンを押してから、増やしたいものをクリックしても複製することができます。
　Ctr+C、Ctr+Vでも複製することができます。

##9.「テキスト」
　文字を入力することができます。左下でフォントが変えられます。英・数のみ入力可。
　選べるフォント↓
　・Donegal
　・Gloria
　・Helvetica
　・Marker
　・Mystery
　・Scratch
railsでvueをwebpack無しで使う。

全面的にSPAにするのでは無くて、部分的にvueの恩威を受けたい時に。


#事前準備

```Gemfile
gem 'vuejs-rails'

#ES6で書く場合、必要
gem "sprockets"
gem "sprockets-es6"
```

```application.js
//= require vue
```

#画面追加
```routes.rb
get 'hoge/:id' => 'moge#hoge'
```

```app/controllers/moge_controller.rb
class MogeController
  def hoge
  
    # html表示とjson返却を同じアクションにしてみる。
    # format htmlはテンプレート / jsonはデータ
    respond_to do |format|
      format.html { render :hoge }
      format.json { render json: Hoge.find(params[:id]) }
      end
    end
  end
end
```

```assets/javascripts/moge_hoge.es6
//vueコントローラ
function vue_hoge_moge(id){
	new Vue({
		el: '#moge_hoge_app',
		data: {
		  hoge:null
		},
		created(){
			$.get(`/hoge/${id}`).then(data=>this.hoge = data)
		},
	});
}
```

```app/views/moge/hoge.haml
#moge_hoge_app
  %p {{hoge.name}}
:javascript
  vue_hoge_moge(#{params[:id]})
```
Python で end と入力されるまで入力を受け取り続ける


input をイテレートして iter の第二引数(sentinel)に'end' を渡します。
https://docs.python.jp/3/library/functions.html#iter

```py3
for line in iter(input, 'end'):
   # TODO
   pass
```

```py3
In [1]: for line in iter(input, 'end'):
   ...:     print(">" + line)
   ...:
Hello
>Hello
a
>a
yo
>yo
end
```
ResultSetのgetXxxxがプリミティブ型なせいでハマった件(Java)

DB的にはNULLが入っているところを↓のコードで取得したら、
なんとnullではなく0になった。

```java
Double d = rs.getDouble(1);
System.out.println(d);//"0.0"と出力される
```

確認してみると、getDoubleの戻り値はDoubleではなくdouble…
↓ソース
[ResultSet (Java Platform SE 8 )](https://docs.oracle.com/javase/jp/8/docs/api/java/sql/ResultSet.html#getDouble-int-)

```
戻り値:
列値。値がSQL NULLの場合、返される値は0
```

洗い出したところ、以下メソッドがnullがnull以外を返すようです。

* getBoolean
* getByte
* getShort
* getInt
* getLong
* getFloat
* getDouble

[wasNull](https://docs.oracle.com/javase/jp/8/docs/api/java/sql/ResultSet.html#wasNull--)なんていうgetXxxxで読み取った後に
それがnullかチェックできるメソッドも用意されてるが、
isNullではなく過去形ってあたりが使いづらい…。

結局、↓で解決した

```java
Double d = (Double)rs.getObject(1);
System.out.println(d);//nullと出力される
```

# 結論
JDBCを直接使わないで、なんかしらの永続化フレームワークつかえ。
Riot.jsで<Raw>が更新されない問題

Riot.jsで素のHTMLを埋め込むのに公式では以下のような`Raw`カスタムタグを作る事を推奨しています。
[エスケープしないでHTMLを表示する](http://riotjs.com/ja/guide/#%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%97%E3%81%AA%E3%81%84%E3%81%A7html%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)

```html
<raw>
  <span></span>

  this.root.innerHTML = opts.content
</raw>

```

この`Raw`、初回実行時には上手く動くのですが、親要素が`content`を変更しても再描画は走りません。

もちろん、同じ事にひっかかる人はいるのでRiot.jsのGithubに何個かIssue立ってました。
[\<raw> tag that supports updates in riotjs guide #2139](https://github.com/riot/riot/issues/2139)
[innerHTML value does not update, script doesn't refire #1283](https://github.com/riot/riot/issues/1283)

# 解決策
普通に変数の変更を検知すればいいので以下のような感じにすれば動きます。

```html
<raw>
  <span></span>

  this.root.innerHTML = opts.content
  this.on('update', function() {
    this.root.innerHTML = opts.content
  })
</raw>

```


公式にPR出してみますわ...

## 追記
[ Add note for unescaped HTML on japanese doc #202](https://github.com/riot/riot.github.io/pull/202)

ドキュメント更新のPR出したので近く更新されると思います。

masterに取り込まれたのでドキュメント更新されます、この記事もう必要ないですねｗ はい。
windows 10 64bit で python + mecab

環境として。

```
$ python --version
Python 3.6.3
```

後は、よく書かれているのは、C++ですが「Visual C++ 2015」でした。

やったこと。

ここから、mecab 64bit版を入手
https://github.com/ikegami-yukino/mecab/releases

インストーラーを実行するだけ。
辞書も入ってるとな。

python用モジュールをインストール
上記が終わってないとエラーが出ます。

```
pip install mecab-python-windows
```
環境変数「Path」に以下を追加

```
C:\Program Files\MeCab\bin
```
→　ないと　「ImportError: DLL load failed:　～～～」がエラー出る。

とりあえず以下で動作確認

``` test.py
import MeCab
import sys

t = MeCab.Tagger('mecabrc')  # -O chasen, -O wakati, -O yomi, mecabrc
print(t.parse("pythonが大好きです"))
```

うごいたけど。。。
まだよくわかりません。
pyファイルの書き方

#pyファイルの書き方

バージョン3をベースに記載していきますが、冒頭は2でも3でも同じです。
基本的なファイルのパスやエンコード指定は下記の冒頭2行となります。
importはファイル内のどこでもかまいませんが、一般的には冒頭に記載します。
(今回のサンプルにはimportは必要ありません。)

```python3:base_sample.py
#!usr/bin/python
# -*- coding: UTF-8 -*-
import sys, os

print('Hello Python!')
```
```
# python3 base_sample.py
Hello Python!
```

補足：バージョン2のprint関数の場合は``print 'Hello Python!'``となります。

```python:base_sample.py
#!usr/bin/python
# -*- coding: UTF-8 -*-
import sys, os

print 'Hello Python!'
```
```
# python base_sample.py
Hello Python!
```


#インデックス

前回：[Pythonインストール](https://qiita.com/billy-attack/items/017cb7d9c1524a6cb908)　　次回：[基本構文](https://qiita.com/billy-attack/items/c16c6ff13d65812a2d11)

[Topのインデックスに戻る](https://qiita.com/billy-attack/items/89e410a4a218a09b89c4)