OmniAICreator/Qiita-1.07M huggingface dataset:
ScalikeJDBC のミニマルストローク Hello World

# はじめに
ScalikeJDBC を使ってミニマルストローク Hello World をやったときの記録です。
環境は以下の通り。データベースは何でも良かったのですが、手元に PostgreSQL があったのでそれを使いました。

+ JDK 8.0
+ Scala 2.11.8
+ sbt 0.13.12
+ PostgreSQL 9.6

# build.sbt を作る
適当なフォルダに空の build.sbt を作ります。以降、そこがプロジェクトのルートフォルダになります。
今回 build.sbt に記述する必要があるライブラリは ScalikeJDBC 自体と PostgreSQL の JDBC ドライバですので、
[Mave Repository](https://mvnrepository.com/) で探し、以下の画像のように SBT 向けの記述をコピーしてきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/79374/74d808de-f569-78ba-801b-eb397c73424c.png)

それらを build.sbt にペーストします。また scalaVersion も明示しておいたほうが良いでしょう。
いかにも Maven Repository からコピペしただけの内容ですが、よしとします。

```scala:build.sbt
scalaVersion := "2.11.8"

// https://mvnrepository.com/artifact/org.scalikejdbc/scalikejdbc_2.11
libraryDependencies += "org.scalikejdbc" % "scalikejdbc_2.11" % "2.4.2"

// https://mvnrepository.com/artifact/org.postgresql/postgresql
libraryDependencies += "org.postgresql" % "postgresql" % "9.4.1211"
```

# PostgreSQL のテーブルを作る
どんなでもいいので適当なテーブルを作っておきます。今回は[ここ](https://www.tutorialspoint.com/postgresql/postgresql_create_table.htm)の例を使いました。

```sql
CREATE TABLE COMPANY(
   ID INT PRIMARY KEY     NOT NULL,
   NAME           TEXT    NOT NULL,
   AGE            INT     NOT NULL,
   ADDRESS        CHAR(50),
   SALARY         REAL
);
```

そして、どんなでもいいので適当なデータを投入しておきます。

```sql
INSERT INTO COMPANY VALUES (1, 'Hello', 1, NULL, NULL);
INSERT INTO COMPANY VALUES (2, 'World', 2, NULL, NULL);
```

# Hello World

以下をプロジェクトのルートフォルダ直下に HelloSaclikeJDBC.scala 等のファイル名で保存し sbt 実行しましょう。
おまじない要素多いですが、とりあえずこれで Hello と World が取得できれば OK です。
データベースの情報は自環境に合わせて変えてください。

```scala:HelloScalikeJDBC.scala
import scalikejdbc._

object HelloScalikeJDBC extends App {
  
  // データベースに接続
  val url = "jdbc:postgresql://localhost:5432/postgres"
  val user = "postgres"
  val password = "postgres"
  ConnectionPool.singleton(url, user, password)

  // クエリの実行と結果表示
  val names = DB readOnly {implicit session =>
    sql"select name from company".map(_.string("name")).list.apply()
  }
  names.foreach(println)

}
```

# この後は

ここで作ったプログラム自体に実用性は一切ありませんが、とりあえず最も単純なのが動きさえすれば
この後は公式のドキュメント（[これ](http://scalikejdbc.org/)）を参考に、いろいろ改変ながら試してゆけるのではないかと思います。
RPGツクールMVのメモリリーク・メモリブロート検証方法

ゲーム開発ではよくある話ですが、RPGツクールMVにも時々メモリリークの話が話題となります。
本体に関するメモリリークはバージョンアップでの改良を期待したいところですが、
残念ながら各種プラグインでメモリリークをしている事がたまにあり、そのようなものはこちらで調査・パッチを当ててあげた方が早いケースも存在します。
ここではその原因の調べ方を記述します。

# メモリリークが起きると何が起きるの？
メモリリークは、解放されず使用されないメモリが蓄積されていき、使用メモリがどんどん増えていくことを指します。
ちょっとしたメモリリークであればゲームに支障が出ませんが、ある一定以上メモリが蓄積されると、ブラウザや見てるページがクラッシュします。
**RPGツクールMVの場合、クラッシュはゲームの強制中断を示し、セーブデータ箇所からプレイのやり直しになるため、遊ぶのがとても辛いです。**

今回はそのようなメモリを大量に消費してクラッシュするような、困ったメモリリーク、メモリブロートについて調べていきます。

# 再現条件を調べる
実際にメモリリークがしている事が分かったら、いつメモリリークしてるのかを調べましょう。
よくあるパターンとしては以下のパターンを調べると、メモリの蓄積がされやすいでしょう。
**再現する条件を特定し、再現性を高めるのは、原因を調査する上でとても重要です。**

- シーン移動系
  - マップ移動（別の画面に移動する操作）を100回繰り返す
       - 2つのマップを交互に往復する
       - 色んなマップを移動する
  - メニューを100回出し閉じする(Esc連打する）
  - 1000歩、歩く
  - 100回バトルする
      - 単調な攻撃パターンを繰り返す
      - 魔法攻撃を繰り返す
  - たくさん画像を読み込ませる
- 会話ウィンドウ系
  - 100回会話ウィンドウを出す
      - とにかく会話させる
      - 探索系のゲームの場合、アイテムを調べまくる
- セーブ系
  - セーブを100回繰り返す
  - コンティニューを100回繰り返す

こんなことをしまくってると、メモリリークするゲームはメモリリークするでしょうし、クラッシュするゲームはクラッシュするでしょう。
最初は面倒くさいので、ただゲームを進行させてプレイを進めるだけでもいいと思います。

# デベロッパーツールの静的解析で、メモリの使用量を調べる

（検証のために、適当なゲームを作成し、意図的にメモリリークするようなコードをプラグインに仕込んでゲームを起動しています。ユーザーアクションの度に、大量にメモリが確保されるようにしてみました。）

Chromeのデベロッパーツールを使って調査をするため、ゲームはChromeを使って進めましょう。
`Windows`では`F12` を押してデベロッパーツールを開き、`[Profiles]`をクリックして下さい。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/9206/424d1965-3277-6bef-9247-c33bb3126289.png)

`[Take Heap Snapshot]`で、実際にメモリがどのように使われてるかを調べることが出来ます。
`[Take Snapshot]`をクリックしてみましょう。メモリ使用量が左に表示されます。
二回目からは、左上の●をクリックするとSnapShotが取れます。

![](https://qiita-image-store.s3.amazonaws.com/0/9206/ba45da5c-46ba-4300-10d2-fb26a9db48aa.png)

上の画像では、ゲーム開始直後にスナップショットを取ったのが、`Snapshot1`です。
その後ゲームを進めつつ`Snapshot4`まで複数回取ってみました。
ゲームを進行するだけで、40MB以上もメモリ使用量が増えてることがわかります。

# 実際に問題となる箇所を調べる。

この解析結果を見るに、1行目の`(closure)` が61MBもメモリを使用していることがわかります。
各欄はクリックして詳細を開く事で、メモリを沢山使用している場所を調査できます。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/9206/cf527fa0-ca14-7538-5402-376bd981a017.png)

同一の変数名のインスタンスがたくさん出てきました。
（最初に自分でメモリリークを仕込んでいた通りの結果が、確認できました。）
またこのインスタンスはsceneクラスのインスタンスを開放せずに持っていることが、ここから確認出来ます。

後は、問題となる変数名が分かれば、コードと照らし合わせれば、それがどこのコードのメモリリークなのか、強力な手がかりとなるでしょう。
ツクール本体や、プラグインも含め、全てのコードから検索（grep）しましょう。

原因が分かったら、報告をする・パッチを当てる・プラグインを外すなどしてみて、同じことを試してみましょう。
調べた再現条件で再現しなくなれば、メモリリークが解決したということです。
おめでとうございます！


以上となります。
なお、今回は静的な解析方法での話をしましたが、動的にメモリリークを調べることもChromeデベロッパーツールは可能です。
臨機応変に使用してみて下さい。
社内LINEで人力キュレーションを行った話

#始めに
>情報収集をするなら、一人で行うよりは複数人で行った方が効率が良いと思ったので、
>新人が研修から帰ってきた6月から若手LINEグループ上で情報交換を始めました。
>始めてから、5か月経ち、そういえばあの記事はどこだっけと探す機会が
>増えてきたので、Qiita上にまとめることにしました。

この説明は、6月編に記載されている文章です。
実際にQiitaにまとめてみたところ、以前の記事をすぐに確認できるようになり
とても助かっています。

しかし、月ごとに記事を作成してしまったため、
今後自分が投稿する記事が増えた場合に、
また探しにくくなってしまうことが予想できました。

ですので、索引と、現時点でのこの取り組みに対する知見をまとめる、
本記事を作成いたしました。

#始めた理由
もともと、面白い記事の情報共有は行うようにしていました。
しかし、そん時の方法は主にIPmessengerを使用しており、
たまにLINEで送るということを行っておりました。

しかし、送りたい相手が複数人いる場合には、
上記の方法では若干手間でした。

そこで、新卒フォロー用のグループLINEが存在していたので、
これを新人がチームに配属される6月に若手向けのグループに変更し
そこで人力キュレーションを行うようにしました。

#始めた結果
##良かった点
###自分が興味を抱かなかったり、見落とした記事を読めた点
自分が興味ない分野の記事を、厳選された状態で読めるというのは、
とてもありがたかったです。

###一回の記事投稿で複数の人に見てもらえるようになった点
個人LINEや、IPmessengerで送っていた時に比べ、
労力が格段に減りました。

また、記事を読んだその場で、すぐに知らせることができるようになったため、
さっき読んだ記事はどこにあったっけと探す手間も無くなりました。

###インプットの意識が変わった点
これまでのインプットはあくまで自分のためや、
仕事で活用するために行っていました。

しかし、人力キュレーションを行うようにしてからは、
「この記事は他の人に見てもらった方がいい記事かもしれない」
という観点でもインプットを行うようになりました。

###インプットを元に会話ができる点
これまでは、昼休憩などで、記事の話をする際に、
まず記事を知っているかどうか確認をしてから話をしていました。
(たまに自分が通知していない場合があるので)

しかし、一括で送信しているため、
今朝送ったあの記事についてだけど、という導入で
会話を始められるようになりました。

###他の人の気になっている情報がわかる点
他の人が上げてくれる記事や、投稿に対するレスポンスで、
相手がどのようなことに興味があるかというのがだんだんとわかるようになってきました。

仕事上ですと、どうしても同じ分野だけしか触れられない場合があり、
本当はどんな分野に興味があるのか不明瞭な場合があります。
(特に業界や技術に対しての視野が狭いうちの新人時代)

こうした時に興味がある点を理解してあげられると、
それ対しても記事を探してあげたり、勉強会を進めたりと
なんらかの手が打てるようになるので助かっています。

##悪かった点
###そもそも社内LINEでやるべきではなかった点
雑談と同じLINEで行ってしまっているため、
記事の投稿と雑談が被ってしまうこともありました。

###投稿する記事の量が多かった点
多い時には、1日で4件くらいの記事をあげることがありました。
これは、読んでいて、ためになるのではと思って投稿した結果でした。

しかし、投稿を元に会話をするという目的の上では情報量が多く、
会話が成り立ちにくいと感じました。

###想定よりLINE上での会話が盛り上がらなかった点
そもそもLINEで議論するという使用方法に問題があったのか、
あまり、盛り上がりませんでした。

##現時点での改善点
###Slackなどチャットツールを使用する
チャットツールを使用するれば、
カテゴリー分けも可能となり、投稿された記事の管理もしやすくなると思われる。
(他の会社さんではすでにやっているところがあるようですが)

###投稿する記事の数を抑える
最新情報は常に抑えるべきですが、
仲間内で共有しあう場合には、厳選して共有した方がいいのではないかと感じました。

厳選を行うためには、記事を比較しなければなりません。
それによって、記事への理解がより深まり、良質なインプットへと繋がるのでは、
と考えているからです。

#情報収集に使用しているサービス

* Qiita
* ブックマーク(アプリ)
* TechFeed(アプリ)
* mohikan(Slackチーム)
* teratail

#リンク

[社内LINEに人力キュレーションであげた記事 (6月編)](http://qiita.com/SatouRyou/items/5883529475b199aa4883)

[社内LINEに人力キュレーションであげた記事 (7月編)]
(http://qiita.com/SatouRyou/items/e5452cab6727137a4189)

[社内LINEに人力キュレーションであげた記事 (8月編)](http://qiita.com/SatouRyou/items/6156a6550fa9a6558f77)

[社内LINEに人力キュレーションであげた記事 (9月編)](http://qiita.com/SatouRyou/items/e2514a25bce12c2d0ff0)

[社内LINEに人力キュレーションであげた記事 (10月編)](http://qiita.com/SatouRyou/items/c0c5b0def63c0abfbd68)

[社内LINEに人力キュレーションであげた記事 (11月編)](http://qiita.com/SatouRyou/items/f5ad68776cf011ca4e1b)

[社内LINEに人力キュレーションであげた記事 (12月編)](http://qiita.com/SatouRyou/items/b7d5865e851144a017b1)

[社内LINEに人力キュレーションであげた記事 (1月編)](http://qiita.com/SatouRyou/items/fe0b60ccc690148d19fc)

[社内LINEに人力キュレーションであげた記事 (2月編)]
(http://qiita.com/SatouRyou/items/6e2604606a2c1ba437c6)

[社内LINEに人力キュレーションであげた記事 (3月編)]
(http://qiita.com/SatouRyou/items/9d4474910fc838ed1a23)
Wake on Lan で Windows 10 の PC を遠隔で起動する

# Wake on Lan とは
ネットワークにマジックパケットを送信することにより、遠隔でPCを起動する技術です。
自宅のPC電源がオフだとリモートデスクトップなどのリモート操作はまったくできません。
Wake On LAN を使えば、オフになっているコンピュータの電源を遠隔からオンにできます。

# 環境
次の組み合わせで試しました。

- ホストPC
    - OSはWindows10
    - Realtek製のネットワークアダプタ
- BUFFALO製の無線LANルータ

ホストPCと無線LANルータは有線接続する必要があります。

# Wake on Lan を有効化
- OSの設定で Wake on Lanを有効にする
   - 手順: デバイスマネージャー > ネットワークアダプターを右クリック > プロパティ
       - Realtek製のネットワークアダプタなら、Wake on Magic Packet という項目を有効にする
       - ネットワークアダプタのメーカによって名称がバラバラなので、頑張って見つけて下さい
   - 参考: [Wake On LANでコンピュータを起動する (1/2)](http://www.atmarkit.co.jp/ait/articles/0602/25/news014.html)
- BIOS/UEFIの設定で Wake on Lan を有効にする
    - これも BIOS/UEFI によって設定項目の名称はバラバラなので、頑張って見つけて下さい
    - Wake On Lan を含むメニューの名称の例
       - Power / Power Management Setup / Power Management Event
       - APM Configuration
       - Advanced
    - Wake On Lan の設定項目の名称の例
       - WOL / Wake On LAN
       - Remote Wakeup
       - PME Event Wake Up
       - Power On by PCI/PCIE Device
    - 参考: [Wake On LANでコンピュータを起動する (2/2)](http://www.atmarkit.co.jp/ait/articles/0602/25/news014_2.html)
- Realtek製のネットワークアダプタならドライバを更新する
   - 手順: デバイスマネージャー > ネットワークアダプターを右クリック > ドライバーのソフトウェア更新

これでマジックパケットを送信することで遠隔で起動できます。

Windows 10の場合、高速スタートアップを無効にする必要があるかもしれません。

- [Windows10 にアップグレードしたら、WOL出来なくなった。](http://answers.microsoft.com/ja-jp/windows/forum/windows_10-power/windows10/0cec92e4-0cb2-4e6f-a625-23a85046bc73)

## 電源OFF時にルータからコンピュータを認識できない（ルータとのリンクが切れる）場合

BIOSの設定によっては、電源がOFF時に有線LANポート部分に電力が供給がされずに、ルータとのリンクが途切れ、ルータ側からパソコンを認識できない状態となってしまいます。

電力の供給状態はLANケーブルの差込口のランプの点灯で判断できます。

BIOSの設定を以下のように変更すると、電源OFF時にも認識できるようになるかもしれません。

- Erp ReadyをEnabled(S4+S5)にする（[参考](https://ygkb.jp/1158)）
- 省エネモードをDisabledにする

私の環境では、高速スタートアップが有効のときに電力供給が止まる現象を確認したので、この場合も高速スタートアップを無効にしましょう。

# LAN内からマジックパケットを送信する
BUFFALO 製の無線 LAN ルータを利用しているなら、[http://192.168.11.1/hosts.html](http://192.168.11.1/hosts.html) からマジックパケットを送信できます。

それ以外の場合、マジックパケットを送信できるソフトを利用すると良いでしょう。

- [Wake up On Lan Tool (Windows)](http://www.vector.co.jp/soft/win95/util/se241927.html)
- [WakeOnLan (Mac)](http://www.readpixel.com/wakeonlan/)

# 自宅外（WAN）からマジックパケットを送信する
自宅外（WAN）からルータの設定ページに接続できるようにします。

**セキュリティ的には大きなリスクを伴うため、自己責任で行って下さい。**

- ルータの設定ページのパスワードをデフォルト以外に変える
- WANからルータ設定ページへのアクセスを許可する
    - BUFFALO 製の無線 LAN ルータの場合、管理設定 > アクセス から許可できる
    - セキュリティ上の観点から、ポートを80番以外へ変更すると良い
- （オプション）DDNSサービスでルータのIPアドレスの変更に対応できるようにする
    - [ieServer.Net](https://ieserver.net/) は代表的な無償のDDNSサービス

# 参考
- [Wake On LANでコンピュータを起動する](http://www.atmarkit.co.jp/ait/articles/0602/25/news014.html)
- [外出先から自宅のパソコンを電源ON(Wake ON LAN)](http://myenotes.blog.fc2.com/blog-entry-25.html)
- [無料のddnsサービス ieserver.net](https://ieserver.net/)
go-flagsでバージョン情報を表示する

`function callbacks`を使えばOK。

```main.go
package main

import (
	"fmt"
	"os"

	"github.com/jessevdk/go-flags"
)

func main() {
	var opts struct {
		Version func() `short:"v" long:"version" description:"show version"`
		Message string `short:"m" long:"message" description:"a message"`
	}

	opts.Version = func() {
		fmt.Println("1.1.1-RC1")
		os.Exit(0)
	}

	_, err := flags.Parse(&opts)

	if err == nil {
		fmt.Printf("message : %s\n", opts.Message)
	}
}
```

```
$ go run main.go --help
Usage:
  main [OPTIONS]

Application Options:
  -v, --version  show version
  -m, --message= a message

Help Options:
  -h, --help     Show this help message

$ go run main.go --version
1.1.1-RC1

$ go run main.go --message hello
message : hello
```

[go-flags](https://github.com/jessevdk/go-flags)超便利。
AWS EC2 p2.16xlarge でCUDAを使用する際に16GPUは同時に使用できない

注意 : これを書いている時点の情報です。

普段はTensorFlowで将棋を指す取り組みをしています。マルチGPU環境が欲しいためAWS EC2 p2.16xlargeインスタンスを試しました。

結論としてはp2.16xlargeはK80(GPU x2) x8で16GPUを搭載しているが１プロセスで使用できるGPUの数が8基に制限されるため使いにくいということになります。カジュアルな用途では p2.8xlarge までにとどめておくのが無難だと思います。

やったことと起きたこと
--------------------------------------------------

- p2.16xlarge に Ubuntu 16.04 をインストールし nvidia ドライバ、CUDA、TensorFlowをインストールした
  - セットアップ方法は [Ubuntu14.04にcuda 7.5をインストール](http://qiita.com/shinya_ohtani/items/f374ed0dd51737087369) に倣った
- TensorFlowを使用した自作プログラムを動かそうとした
- `CUDA_ERROR_TOO_MANY_PEERS` を含むエラーが発生してプログラムが動かなかった（ `tf.Session()` でエラーが発生する ）

16GPUを同時に使用できない
--------------------------------------------------

### 参考リンク

- [CUDA_ERROR_TOO_MANY_PEERS in tensorflow with 16x Tesla K80s](https://groups.google.com/a/tensorflow.org/forum/#!topic/discuss/Hua1KbqqLWU)
- [CUDA peer resources error when running on more than 8 K80s (AWS p2.16xlarge)](https://devtalk.nvidia.com/default/topic/970010/cuda-peer-resources-error-when-running-on-more-than-8-k80s-aws-p2-16xlarge-/?offset=3)

### 何が起きているか

どうやら9基以上のGPUを１つのプロセスで使おうとするとGPU間のP2P通信が失敗するようです。CUDA toolkitに同梱されているテストプログラム `simpleP2P` でエラーが発生しなくても実プログラムでエラーになります。参考リンクのnvidiaの掲示板では TensorFlow と Torch でエラーが出ています。これはハードウェアの制限のようです。

それでどうするの？
--------------------------------------------------

掲示板では `CUDA_VISIBLE_DEVICES` を設定して１プロセスが使用するGPUを８基に制限した上で同一マシンに8基のGPUを使用するプロセスを２つ作りクラスタ化する方法が提案されています。自分は試していないので上手くいくかどうかはわかりません。

- `CUDA_VISIBLE_DEVICES` 参考 : [TensorflowでGPUを制限・無効化する](http://qiita.com/kikusumk3/items/907565559739376076b9)

自分はクラスタ化をまだ身につけていないので p2.8xlarge を使用して１プロセスマルチGPUで製作していこうと思います。p2.8xlargeでは8GPUですので自作プログラムが正常に動作しました。またp2.8xlargeの環境作成では [P2インスタンスにpip3でTensorFlowを入れる](http://qiita.com/S_Shimotori/items/3a10b35cf64d74b6b07e) を参考にしました。今まではグラフィクスドライバからインストールしていましたが`dpkg`と`apt`でCUDAをインストールするだけでGPUが使用できるようになったようです。
webpackの設定ファイルを環境ごとに分けるには

　webpackの設定を開発環境や本番環境ごとで分けて設定ファイルを作る方法について、作成の際に参考資料が少なかったので、自分で行った方法を共有します。誰かのお役に立てば幸いです。

#  webpack
　webpackはひとことで言えば、複数のjsファイルやcssファイルを1つのファイルにまとめてくれるビルドツールです。

# 設定ファイルを分ける方法 
実際にどのように設定ファイルを分けるのか方法を説明していきます。
##1つの設定ファイルでは
　通常では1つの設定ファイル`webpack.config.js`を作成すると思いますが、
環境ごとに異なる設定をしたい場合１つのファイルだと以下のように環境で条件分岐が必要になってきます。

```webpack.config.js
 
var destPath = 'dist/';

if (process.env.NODE_ENV === 'production') {
    destPath = 'hoge/';
}

const config = {
    entry: ['./src/index.js'],
    output: {
        path: path.resolve(destPath),
        filename: 'bundle.js',
    },

... 省略

}
module.exports = config;
```

## 環境ごとに設定ファイルをもたせる

　そこで、環境ごとに設定ファイルを分けてすっきりさせます。
共通でもたせたい設定もあるのでベースとなる設定ファイルと環境ごとに設定ファイルを作成します。
今回は開発環境と本番環境の設定ファイルをそれぞれもたせます。

### 共通の設定ファイル作成
共通として使いたい設定をここに記述します

```webpack.config.base.js
const path = require('path');
const webpack = require('webpack');
const FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');
require('dotenv').config();

const config = {
    entry: ['./src/index.js'],
    output: {
        path: path.resolve('dist/'),
        filename: 'bundle.js',
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
            },
        ],
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                loaders: ['style', 'css?modules'],
            },
            {
                test: /\.json$/,
                loader: 'json',
            },
        ],
    },
    eslint: {
        configFile: './.eslintrc.yaml',
        fix: true,
    },
    plugins: [

    ],
};

module.exports = config;
```

### 開発環境用設定ファイル作成
開発環境でのみ設定したいことを記述します。
ポイントは先ほど作成した共通の設定ファイルを読み込んで、一緒にmergeさせます。
mergeにはwebpac-mergeというパッケージを使用しています。
https://www.npmjs.com/package/webpack-merge

```webpack.config.development.js
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: 'dist',
        port: 0000,
        host: '0.0.0.0',
        inline: true,
    },
});

module.exports = config;
```

実行は下記でできます。


```
webpack --config webpack.config.development.js
```


### 本番環境用設定ファイル作成
本番環境用も開発環境用と同じように作成します。

```webpack.config.production.js
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
    output: {
        path: path.resolve('hoge/'),
        filename: 'bundle.js',
    },
    eslint: {
        configFile: './.eslintrc.yaml',
        fix: false,
    },
});

module.exports = config;

```

実行は下記でできます。


```
webpack --config webpack.config.production.js
```

# まとめ
複数の環境ごとにwebpackの設定ファイルを分けたい場合は、環境ごとに設定ファイルを作成するとともに共通の設定ファイルを作成することで共通で使用したい設定をまとめておくことができます。
Atomic Chrome for Emacs - EmacsでChromeのテキストエリアをリアルタイム編集

ChromeのテキストエリアをEmacsで編集する方法としては、かなり古くからある [Edit with Emacs](https://chrome.google.com/webstore/detail/edit-with-emacs/ljobjlafonikaiipfkggjbhkghgicgoh) がメジャーなようですが、個人的に一つ不満がありました。一度編集を保存してテキストエリアに反映させてしまうと、続けて編集するには再度ブラウザ側で編集開始しないといけないことです。些細なことですが、Markdownで記述するときなどブラウザ側のプレビュー表示で確認して繰り返し編集したい場合に不便でした。

Edit with Emacs以外によい 拡張はないか調べてみると、エディタを限定すればAtom用の [Atomic Chrome](https://chrome.google.com/webstore/detail/atomic-chrome/lhaoghhllmiaaagaffababmkdllgfcmc)、SublimeText用の [Ghost Text](https://chrome.google.com/webstore/detail/ghosttext/godiecgffnchndlihlpaajjcplehddca?hl=ja) など、続けて編集できるどころか編集結果がリアルタイムにテキストエリアに反映されるものがありました。どうやら、websocketを利用してコネクション型の通信を行うことで実現しているようです。

Emacsにも以前から [websocketの実装](https://github.com/ahyatt/emacs-websocket) はあり、これを用いてMarkdownのリアルタイムプレビューを行うようなパッケージはあるので、テキストエリア編集についても既に誰かが作っているだろうと思いましたが、調べた限りなさそうでした。幸い、Chrome側の拡張は上記のAtomic Chromeのものをそのまま使わせてもらえばよいので (Chrome拡張の作り方はよく分からない...)、これと接続するEmacs側のパッケージを作ってみました。

https://github.com/alpha22jp/atomic-chrome

MELPAにも登録してあるので、 <kbd>M-x package-install [RET] atomic-chrome</kbd> でインストールできます。設定は.emacsに

```emacs-lisp
(atomic-chrome-start-server)
```

を書くだけで、後はChrome側でテキストエリアをフォーカスしてAtomic Chromeのボタンを押すとEmacs側にバッファが開き、編集結果はリアルタイムにテキストエリアに反映されます。Edit with Emacsに私と同じような不満を持っている方は、是非使ってみて下さい。

## 2016/11/8 追記

最新バージョンで、Sublime Text用の拡張 [Ghost Text](https://chrome.google.com/webstore/detail/ghosttext/godiecgffnchndlihlpaajjcplehddca?hl=ja) にも対応しました。こちらを使うと、下のコメントに書いたQiitaの記事編集でプレビューが更新されない問題もありません。お試し下さい。
ドット絵、非ドット絵の画像拡大方式の比較（RPGツクール素材向け）

#過去の素材を使いたい！

RPGツクール2000などの昔の小さいサイズの素材を最新作RPGツクールMVで拡大して使いたい、ということはよくあると思います。しかし画像をきれいに拡大出来るかどうかは、画像拡大方式に大きく左右されます。特にドット絵の拡大については、特殊なアルゴリズムもあり選択肢が多いです。せっかくですので記事にまとめてみました。

#xBR法

- ドット絵の拡大に特化したアルゴリズム
- [ドット絵をアップスケールするやつ](http://ohhiru.info/upscale/)や拙作[2000→MVキャラ素材コンバーター](https://krmbn0576.github.io/rpgmakermv/converter.html)の「きれいに拡大」における拡大手法
- 元絵を参考に二次創作したかのような独特の仕上がりが特徴
- そこそこ変換速度が早く、出来上がった画像ファイルの容量も小さい

#waifu2x

- 人工知能を使った画像拡大アルゴリズム
- [waifu2x-caffe](http://forest.watch.impress.co.jp/library/software/waifu2xcaffe/)というソフトウェアにおける拡大手法
- あらゆるジャンルの画像をきれいに拡大できるすごいやつ
- 変換速度はめちゃくちゃ遅く、筆者のノートＰＣでは一枚拡大するのに１０秒以上かかる（ゲーミングＰＣならもう少し早いかも？）

#ドット絵（キャラチップ）比較

![charaupscale.gif](https://qiita-image-store.s3.amazonaws.com/0/135524/21e7ca3a-9e7c-362b-1923-d456ee987459.gif)

※「ドットのまま」は元絵の各ドットをそのまま縦横の長さ２倍に拡大したもの。**2000→MVキャラ素材コンバーター**における「そのまま拡大」

- xBRもwaifuもそこそこ頑張ってくれるが、xBRの方が変換にかかる時間が短い
- 元絵を尊重したいなら「ドットのまま」拡大するのが最強（再現率１００％）
- xBRは元絵を大胆にアレンジする傾向にある（その点waifuはどっちつかず）

#非ドット絵（顔グラ）比較

![faceupscale.gif](https://qiita-image-store.s3.amazonaws.com/0/135524/7cb8cc10-429d-ba20-deab-3224d4dda8ff.gif)

※「工夫なし」は元絵をブラウザの標準機能で拡大したもの。アルゴリズム不明。**2000→MVキャラ素材コンバーター**における顔グラの拡大手法

- 仕上がりの綺麗さでは圧倒的にwaifuが有利。xBRと「工夫なし」はどちらもにじんでいるがxBRの方がわずかにマシ
- ドット絵と違い「ドットのまま」拡大してもうれしくない（ので比較対象にすらしていません）

#まとめ

- ドット絵（キャラチップ）では「ドットのまま」かxBR法で拡大しましょう
- →特にRPGツクールのキャラチップについては透明色指定や位置調整も行ってくれる[2000→MVキャラ素材コンバーター](https://krmbn0576.github.io/rpgmakermv/converter.html)がおすすめ！
- 非ドット絵（顔グラ、背景素材など）では[waifu2x-caffe](http://forest.watch.impress.co.jp/library/software/waifu2xcaffe/)を用いて拡大するときれいです（ただし結構時間が掛かります）
ShellScriptでECHONET Lite家電を制御

#はじめに
LinuxのコマンドでECHONET Lite家電の操作を行う。
ターミナルから一行実行することで家電の操作が出来る。

※　ECHONET Lite （ISO/IEC 14543-4-3）国際規格

#環境
対象家電　⇒　空気清浄機　[SHARP KI-EX1100](http://www.sharp.co.jp/kuusei/products/kiex100.html)

OS : Debian 4.6.3

#シェルスクリプト
以下　コマンドを実行すると空気清浄機の動作状態がONになる
```
$ echo "0x10,0x81,0x00,0x00,0x05,0xFF,0x01,0x01,0x35,0x01,0x61,0x01,0x80,0x01,0x30" | xxd -p -r | netcat -u 192.168.2.166 3610
```
![ターミナル.jpg](https://qiita-image-store.s3.amazonaws.com/0/140159/3e387d38-b7bc-cb8e-5e18-37d97c43ab14.jpeg)


###注意１
ip アドレスは各自の環境に変更すること

#ECHONET Liteの制御（言語別）
[Ruby](http://qiita.com/miyazawa_shi/items/4c645315262d5cf5b015)
[Python](http://qiita.com/miyazawa_shi/items/9384f0d2cd1ee255b1c1)
[C言語](http://qiita.com/miyazawa_shi/items/6d2bd86b19014b0ce161)

#個人的メモ
## 16進数ダンプコマンド
今回は　xxdコマンドを使用したけど、他には
```hexdump```, ```od```とかがあるみたい。
16進数から文字列変換はxxdでやることが多い！？
####参考URL　[16進数ダンプコマンドの違い](http://rintaro.hateblo.jp/entry/2014/12/14/214956)
## シェルスクリプト
```script.sh
#!/bin/sh
echo "0x10,0x81,0x00,0x00,0x05,0xFF,0x01,0x01,0x35,0x01,0x61,0x01,0x80,0x01,0x30" | xxd -p -r | netcat -u 192.168.2.166 3610
```
一行目は必要みたいで実行方法が3通り
1　```$sh script.sh
```
2　```$bash script.sh
```
3　```$chmod 755 script.sh
　　$./script.sh```

##UDPの送受信
###送信
今回のコマンドは　```netcat```を使ったけど```nc```も同じ働きをする
###受信
以下コマンドでポート3610のUDPで受信可能
```$nc -lu 3610```

※文字化けしてしまうのでRubyのunpack的なことが必要
#### 参考URL　[nc(netcat)コマンドで覚えておきたい使い方8個](https://orebibou.com/2015/11/ncnetcat%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E4%BD%BF%E3%81%84%E6%96%B98%E5%80%8B/)
Jekyll3.3 on GitHub Pages

# TL:DR
* GitHub PagesはJekyll3.2だけど、Jekyll3.3のsiteを無理やりホストさせた

# Jekyll on GitHub Pages
* GitHubはJekyllを優遇していて、Jekyll siteをpushすると勝手にbuildしてpagesにアップロードしてくれる
* 2016/10/30現在、GitHub PagesのJekyllは3.2
* 3.2から、gem経由でthemeを適用できるようになった
    * ただし、現状のGitHub Pagesでは、デフォルトのテーマであるminimaのver1.2にしか対応していない

# Jekyll 3.3
* 何も考えずにgem installすると3.3が入る
* 3.3からはcssもthemeで管理するようになった
* Jekyll3.2が参照しているminimaは1.2だが、Jekyll3.3はminima2.0を利用する

# GitHub Pagesで動かしてみる
## インストール&動作確認
[公式ページのquick start](https://jekyllrb.com/docs/quickstart/)を参考にやってみる

```shell
~ $ gem install jekyll bundler
~ $ jekyll new myblog
~ $ cd myblog
~/myblog $ bundle exec jekyll serve
```

## GitHub Pagesへpush
かつてはGitHub Pagesを利用するにはgh-pagesというブランチにpushする必要があったが、今は普通にmasterブランチの内容をpagesに反映してくれるので、何も考えずにpushすればよい。

```shell
~/myblog $ git init
~/myblog $ git add .
~/myblog $ git commit -m "first commit"
~/myblog $ git remote add origin https://github.com/yourname/yourproject.git
~/myblog $ git push origin master
~/myblog $ open yourname.github.io/yourproject
```

ただし、User PageではなくProject Pageの場合は、baseUrlの設定が必要なので、[はじめてのJekyll on Github Pages](http://takezoe.hatenablog.com/entry/20140608/p1)などを参考にやっていく。

# Jekyllのバージョンが違うと発生する問題と対策
* そのままGitHubにpushすると、cssが見つからずにエラーになる
    * 3.3まではcssをthemeで管理していなかったので、minima1.2はcssを持っていない  
    => [minima2.0のsass](https://github.com/Jekyll/minima/blob/master/_sass/minima.scss)をcss/main.sassに置く
* index.htmlが表示されない
    * minima2.0のroot pageはhomeというlayoutを参照しているが、minima1.2にはhomeがない  
    => [home layoutの内容](https://github.com/Jekyll/minima/blob/master/_layouts/home.html)をそのままrootのindex.htmlにする

これで動くはず。

# その他
* 一応手元で動かす時はGemfileのJekyllを3.2にして`bundle exec jekyll serve`とかしとくのが安心だと思う
* 普通に3.2で作り直したほうが早い説はある
* すぐにGitHub Pagesも3.3に対応すると思うので、待つのも良い
リソースベースの時のlink_toの使い方

リソースベースでルーティングを設定し、`link_to`で`destroy`を使おうとした時につまづいたので備忘録です。
#基本的な使い方
まずはURLやパスを使った基本的な使い方。

```erb
<%= link_to "Serch", 'http://www.google.co.jp/' %>
<%= link_to "Index", "/images/index" %>
```

#ルーティング
```ruby:config/routes.rb
resources image
```
確認してみると

```
$rake routes
```

```
          images GET    /images(.:format)                images#index
                 POST   /images(.:format)                images#create
       new_image GET    /images/new(.:format)            images#new
      edit_image GET    /images/:id/edit(.:format)       images#edit
           image GET    /images/:id(.:format)            images#show
                 PATCH  /images/:id(.:format)            images#update
                 PUT    /images/:id(.:format)            images#update
                 DELETE /images/:id(.:format)            images#destroy
```
こうなっています。

#ルーティング名があるアクション
`new`や`edit`などです。

```erb
<%= link_to "新規作成", new_imate_path %>
```
ルーティング名に`_path`をつけて記述します。

`edit`や`show`のようにidパラメータを指定するアクションの場合は、
モデルオブジェクトを使って記述します。

```erb
<%= link_to "更新", edit_image_path(@image) %>
```

#ルーティング名が無いアクション
create,update,destroyです。
HTTPメソッドを`mathod`オプションで指定して記述します。

```erb
<%= link_to "削除", image_path(@image), :method => :delete %>
```

#オブジェクト名だけで指定
`show`、`update`、`destroy`など、idパラメータを指定して呼び出すアクションは、オブジェクトのみで簡略化できます。

```erb
<%= link_to "Show", @image %>
<%= link_to "delete", @image, :method => :delete %>
```

こちら参考にさせていただきました。
http://www.rubylife.jp/rails/template/index8.html
Raspberry PI でNetwork Bootに挑戦

# はじめに
RaspberryPiが20台くらい手に入ったのですが、SDカードが足りない！
そんなときってよくありますよね。
RaspberyPi3からネットワークブートが可能になったようなので挑戦しました

# 公式の参考情報を見ながら進めていきます
英語を読める方は本家の手順を参考にしてください。

NETWORK BOOTING
https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/net.md
NETWORK BOOT YOUR RASPBERRY PI
https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/net_tutorial.md


# やってみた
## Server側の設定

- RaspberyPI3を用意しましょう
- SDカードにいつものRaspbianを用意する
    - いつものNOOBSをいつもの手順で準備しましょう
- OSのアップデートを掛けます

```
# If on raspbian lite you need to install rpi-update before you can use it:
$ sudo apt-get update; sudo apt-get install rpi-update
$ sudo BRANCH=next rpi-update
```
- SDカードの容量いっぱいまでfilesystemを使えるようにしましう。
終わったら再起動です

```
$ sudo raspi-config
$ sudo reboot
```

-ethoのIPアドレスをスタティックに振り直します。

```
$ sudo vi /etc/network/interfaces
```
```
auto eth0
iface eth0 inet static 
        address 10.42.0.2
        netmask 255.255.255.0
        gateway 10.42.0.1
```

- NFSサーバを建てます

```
$ sudo mkdir -p /nfs/client1
$ sudo apt-get install rsync
$ sudo rsync -xa --progress --exclude /nfs / /nfs/client1
$ cd /nfs/client1
$ sudo mount --bind /dev dev
$ sudo mount --bind /sys sys
$ sudo mount --bind /proc proc
$ sudo chroot .
$ rm /etc/ssh/ssh_host_*
$ dpkg-reconfigure openssh-server
$ exit
$ sudo umount dev
$ sudo umount sys
$ sudo umount proc
```

- dnsmasqの設定をします

```
sudo apt-get update
sudo apt-get install dnsmasq tcpdump
sudo rm /etc/resolvconf/update.d/dnsmasq
sudo reboot
sudo echo | sudo tee /etc/dnsmasq.conf
sudo nano /etc/dnsmasq.conf
```
- dnsmasq.confの作成

```
port=0
dhcp-range=10.42.0.255,proxy
log-dhcp
enable-tftp
tftp-root=/tftpboot
pxe-service=0,"Raspberry Pi Boot"
```

- /tftpboot を作ります

```
sudo mkdir /tftpboot
sudo chmod 777 /tftpboot
sudo systemctl enable dnsmasq.service
sudo systemctl restart dnsmasq.service
cp -r /boot/* /tftpboot
sudo systemctl restart dnsmasq
```

- NFS Rootのセットアップ

```
sudo apt-get install nfs-kernel-server
echo "/nfs/client1 *(rw,sync,no_subtree_check,no_root_squash)" | sudo tee -a /etc/exports
sudo systemctl enable rpcbind
sudo systemctl restart rpcbind
sudo systemctl enable nfs-kernel-server
sudo systemctl restart nfs-kernel-server

```

- /tftpboot/cmdline.txtの作成

```
root=/dev/nfs nfsroot=10.42.0.2:/nfs/client1 rw ip=dhcp rootwait elevator=deadline
```

- Server側の設定は以上です。

## Client側の設定

- RaspberyPI3を用意しましょう
- SDカードにいつものRaspbianを用意する
    - いつものNOOBSをいつもの手順で準備しましょう
- OSのアップデートを掛けます

```
# If on raspbian lite you need to install rpi-update before you can use it:
$ sudo apt-get update; sudo apt-get install rpi-update
$ sudo BRANCH=next rpi-update
```
- USB bootモードを有効にします

```
echo program_usb_boot_mode=1 | sudo tee -a /boot/config.txt
```
- USBブートモードをONにします。
ネットワークブートですが、USBブートモードをONにします。

```
$ echo program_usb_boot_mode=1 | sudo tee -a /boot/config.txt
```

- vcgencmdの結果が以下の通りならOK

```
$ vcgencmd otp_dump | grep 17:
17:3020000a
```

- 電源を停止させます。

```
$ sudo poweroff
```

- 電源がちゃんと止まってから電源とSDカードを抜きます。
- 再び電源を挿すとNetwork bootが始まります。

# Network Bootで起動したはいいが…

SSH Serverがどうしても起動せず。
さて困った・・・。
Go言語でTodoistのCLIクライアントを作ってみた

ブログのコピペです。
[Go言語でTodoistのCLIクライアントを作ってみた](https://sachaos.github.io/engineering/golang/2016/10/30/todoist-cli-client.html)

[Todoist](https://todoist.com/) というWebアプリケーションのタスク管理ツールが大好きで一年くらい使っている。

以前は[ddksr/cliist](https://github.com/ddksr/cliist)を使用してCLIで操作できていたのだが、Todoist APIのバージョンアップに伴い、使用できなくなってしまった。

アップデートをするようなのだが、いつになるか待つのも面倒だし、Go言語触ってみたかったので練習がてら新しくTodoistのCLIクライアントを作ってみたので紹介。

作成メモみたいなのはまた今度書く。

# レポジトリ

[sachaos/todoist: Todoist CLI Client. I ❤️ Todoist and CLI.](https://github.com/sachaos/todoist)

# 使い方

## タスク一覧

```bash
$ todoist l
64302291 p1 #Movie     A CLOCKWORK ORANGE
64302368 p1 #Movie     The Shining
64302395 p1 #Movie     Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb
64302507 p1 #Movie     2001:A Space Odyssey
64302581 p1 #Inbox     Do something
64302602 p1 #Personal  Read a book
64303204 p1 #Movie     test movie
64303294 p1 #Personal  something do
```

## タスク作成

```bash
$ todoist add "3 idiots"
```

## タスク削除

```bash
$ todoist list
...
64308215 p1 #Inbox     3 idiots

$ todoist close 64308215
```

# デモ (with peco)

## タスクの追加

pecoでプロジェクトを選択する。

![Add task](https://cloud.githubusercontent.com/assets/6121271/19836528/6ed99956-9ee6-11e6-85b0-7539393d803b.gif)

## タスクのクローズ

pecoでタスク一覧から選択してクローズする。

![Close task](https://cloud.githubusercontent.com/assets/6121271/19836531/7c399218-9ee6-11e6-974c-9dd59ced13a5.gif)

# pecoと組み合わせると便利

単純なサブコマンドを用意しているので、シェルスクリプトでよしなに組み合わせてくださいというスタンスです。peco使えば楽になり、生活が潤う。

```
<C-x> t p: プロジェクト選択
<C-x> t l: ラベル選択
<C-x> t c: タスクを選択してクローズ
```

```bash
# todoist find project
function peco-todoist-project () {
    local SELECTED_PROJECT="$(todoist projects | peco | head -n1 | cut -d ' ' -f 1)"
    if [ -n "$SELECTED_PROJECT" ]; then
        if [ -n "$LBUFFER" ]; then
            local new_left="${LBUFFER%\ } $SELECTED_PROJECT"
        else
            local new_left="$SELECTED_PROJECT"
        fi
        BUFFER=${new_left}${RBUFFER}
        CURSOR=${#new_left}
    fi
}
zle -N peco-todoist-project
bindkey "^xtp" peco-todoist-project

# todoist find labels
function peco-todoist-labels () {
    local SELECTED_LABELS="$(todoist labels | peco | cut -d ' ' -f 1 | tr '\n' ',' | sed -e 's/,$//')"
    if [ -n "$SELECTED_LABELS" ]; then
        if [ -n "$LBUFFER" ]; then
            local new_left="${LBUFFER%\ } $SELECTED_LABELS"
        else
            local new_left="$SELECTED_LABELS"
        fi
        BUFFER=${new_left}${RBUFFER}
        CURSOR=${#new_left}
    fi
}
zle -N peco-todoist-labels
bindkey "^xtl" peco-todoist-labels

# todoist close
function peco-todoist-close() {
    local SELECTED_ITEMS="$(todoist list | peco | cut -d ' ' -f 1 | tr '\n' ' ')"
    if [ -n "$SELECTED_ITEMS" ]; then
        BUFFER="todoist close $(echo "$SELECTED_ITEMS" | tr '\n' ' ')"
        CURSOR=$#BUFFER
    fi
    zle accept-line
}
zle -N peco-todoist-close
bindkey "^xtc" peco-todoist-close
```

# 小並感

Go言語、いろいろ自分でゴリゴリ書かないといけない部分がありつつも、周辺ツールが非常に整っていて、開発しやすいなと思いました。
React Componentを相対パスでimportするのはもう嫌なので、絶対パスでimportしてやる

#相対パスの悲劇
##実話1. 階層をさかのぼってimportするのがツラい
最初の内は相対パスでもまだ良かったんです・・
階層も少なかったしシンプルな構成だったので
`import TextBox from "./**/TextBox"`
という風に書いても別に問題なかったんですよ、ええ。

でもですよ？アプリケーションが大きく複雑になるにつれて相対パスを書くのが辛くなってきたんです・・！
commonディレクトリにアプリケーション共通のComponentを置いたのは良いんですが、そうするとパスをさかのぼってimportするのが煩わしい:weary:
`import TextBox from "../**/**/common/**/TextBox"`
もうパスを書くだけで、「えーとこのファイルは今この場所だから2階層さかのぼってからこういって・・、あ、違った！3階層だった！・・ってもうこんなんやってられんわ！」となりました(涙)

##実話2. Componentの場所が変わるとimportも修正
↑の例で
`import TextBox from "../**/**/common/**/TextBox"`
を行っているComponentの場所が変わるとしましょう。
よくある子コンポーネント化をすることになって階層が更に深くなりましたと。

すると相対パスなのでimportもわざわざ修正しなきゃいけないですね。
`import TextBox from "../**/**/**/common/**/TextBox"`

・・・うわ、めんどくーさーいー。
もう相対パスなんて嫌だ（涙)

#絶対パスでimportしてやる
というわけで今後の為にも、相対パスはやめて絶対パスでimportしましょうということになりました。
実はこれ意外に簡単に出来ました。
そう、[babel-root-import](https://www.npmjs.com/package/babel-root-import)のパッケージを使えばね(キリッ)
このパッケージを用いることによって、リンクのページに載っているように絶対パスで以下のように分かりやすくimportすることが出来ます。

```js
// Usually 
import SomeExample from '../../../some/example.js';
const OtherExample = require('../../../other/example.js');
 
// With Babel-Root-Importer 
import SomeExample from '~/some/example.js';
const OtherExample = require('~/other/example.js');
```

##babel-root-import
###導入
導入は簡単。

手順1　npmインストールを行い
`npm install babel-root-import --save-dev`

手順2　.babelrcに以下の行を追加するだけです

```json
{
  "plugins": [
    ["babel-root-import"]
  ]
}
```

###使い方
デフォルトではnode_modulesがある階層をrootとみなして絶対パスの指定を行います。

今回絶対パスでのimportを試す為にサンプルのReactアプリケーションを作りましたので、このサンプルを例に具体的な使い方を説明します。
https://github.com/endam/react-root-import

ローカルに落として頂いた後、src/index.jsxを見ると子コンポーネントを絶対パスでimportをしています。

```js
import MessageBox from "~/src/elements/MessageBox.jsx";

class App extends React.Component {
```

これだけでも良いんですが、実際はrootパスを違う場所に指定したいことがあります。
そんな時は.babelrcを修正しましょう。

```json
{
  "presets": [
    "es2015", "react"
  ],
  "plugins": [
    ["babel-root-import", {
      "rootPathSuffix": "src"
    }]
  ]
}
```

rootPathSuffixというオプションでrootパスを指定できます。
srcディレクトリがrootになったので、importもより簡潔になります。

```js
// import MessageBox from "~/src/elements/MessageBox.jsx";
import MessageBox from "~/elements/MessageBox.jsx";

class App extends React.Component {
```

もう一つ。rootを表す記号はデフォルトで「~」ですが、もし好みで変えたい場合でrootPathPrefixオプションで変更可能です。

```json
{
  "presets": [
    "es2015", "react"
  ],
  "plugins": [
    ["babel-root-import", {
      "rootPathPrefix": "@",
      "rootPathSuffix": "src"
    }]
  ]
}
```
 
試しにrootの記号を「@」に変えてみました。

```js
import MessageBox from "@/elements/MessageBox.jsx";

class App extends React.Component {
```


babel-root-importでもう相対パスに悩まされずに済むようになりました。
皆さんもゼヒお試しください:smiley:
Ansible で Windows 7 をターゲットにする準備

テストするために、Windows7 をターゲットにしたいときの準備ログ。

> 自身の環境によるので全ての環境では異なるかもしれない。

# PowerShell を上げる
Ansibleでは 3.0 以上が必要なので上げる。

# Ansible ホスト pywinrm インストール

```
# pip install pywinrm
```

# WinRM有効化
コマンドプロンプト管理者権限で実行

```
> winrm quickconfig
```
または、PowerShell管理者権限で実行

```
PS> Enable-PSRemoting
```

> WinRM 有効化コマンド実行時、ファイアウォール機能の例外処理ができない旨のエラーがでた。対処としては、ネットワーク接続の種類を「ホームネットワークへ」（どうも何かの表紙に「パブリックネットワーク」にしてしまっていたから。）

# Ansible サイトからアクセスするための準備 ps1 を落とし実行

```
PS C:\Users\hogek\Desktop> powershell.exe -ExecutionPolicy RemoteSigned .\ConfigureRemotingForAnsible.ps1
(Legacy) Self-signed SSL certificate generated; thumbprint: B9FB031157691488768722BFD6B04C5A9134E332


wxf                 : http://schemas.xmlsoap.org/ws/2004/09/transfer
a                   : http://schemas.xmlsoap.org/ws/2004/08/addressing
w                   : http://schemas.dmtf.org/wbem/wsman/1/wsman.xsd
lang                : ja-JP
Address             : http://schemas.xmlsoap.org/ws/2004/08/addressing/role/anonymous
ReferenceParameters : ReferenceParameters

OK
```

# 参考
## Ansible インベントリファイル
```ini:hosts
[win]
192.168.0.250
[win:vars]
ansible_user=hogek
ansible_password=password
ansible_ssh_port=5986
ansible_connection=winrm
ansible_winrm_server_cert_validation=ignore # 必要
````

## 実行環境

```shell-session
ubuntu@ansible:~/fetch_files$ python --version
Python 2.7.6
ubuntu@ansible:~/fetch_files$ ansible --version
ansible 2.1.2.0
  config file = /home/ubuntu/fetch_files/ansible.cfg
  configured module search path = Default w/o overrides

ubuntu@ansible:~/fetch_files$ ansible -i hosts win -m win_ping
192.168.0.250 | SUCCESS => {
    "changed": false,
    "ping": "pong"
}
```
Guzzle を使用してHTTPS(POST)通信し、リクエストを送受信する

#環境
- CentOS 7
- PHP 7
- Laravel 5.3

#やりたいこと
>curl -kv -d "email=hoge@gmail.com" https://hoge.com/registers

的なことを Laravel でやって、レスポンスを受け取りたい。

※実際にはフロントエンドからのリクエストをバックエンドに投げるBFF（Backend For Frontend）的なものを作りたい

#方法
[Guzzle](http://docs.guzzlephp.org/en/latest/)（PHPのHTTPクライアントライブラリ）を使う。

#インストール方法
AWSのSDKに Guzzle が入っているので、今回はそれを使用した。

```composer.json
...

"aws/aws-sdk-php": "3.*"

...
```


#実装方法

```routes/web.php
Route::post('registers', 'RegistersController@apply');
```

```app/Http/Controllers/RegistersController.php
use GuzzleHttp\Exception\RequestException;

class RegistersController extends Controller
{
    public function apply(Request $request)
    {
        $client = new \GuzzleHttp\Client(
            [\GuzzleHttp\RequestOptions::VERIFY => false]
        );

        $res = $client->request(
            'POST',

            // ここにはレスポンスを返却してくれるURL(API)を設定
            'https://hoge.com/registers',
            [
                'form_params' => [
                    'email' => request->get('email'),
                ]
            ]
        );

        return $res;
    }
}
```

#解説
## HTTPS通信できるようにする
>[\GuzzleHttp\RequestOptions::VERIFY => false]

`false`を指定することにより証明書の検証を回避できる。
（本番ではやらないけど）

##POSTデータの指定
`form_params`を使えばPOSTするデータを定義できる。
※[オプション一覧](http://docs.guzzlephp.org/en/latest/request-options.html)
Raspberry Pi で node-openjtalk を使う

こちらも再挑戦して上手くいきましたのでメモ的にエントリします。

## 環境
- Raspberry Pi2 ModelB
- node.js v6.8.1

## node-openjtalk 

こちらからインストールします。

[hecomi/node-openjtalk - GitHub](https://github.com/hecomi/node-openjtalk)

サンプル通り`app.js`を記述します。

```js:app.js
var OpenJTalk = require('openjtalk');
var mei = new OpenJTalk();
mei.talk('こんにちは世界');
```

```bash
$ node app.js
```

[Mai - SoundCloud](https://soundcloud.com/toshio-ohta/mai#t=0:03)

## 男性ボイスを利用する

meiちゃんも可愛らしくて良いのですが、男性の音声を`node-openjtalk`から利用する際は、音声のダウンロードが必要です。

[Open JTalk ダウンロードファイル一覧 - OSDN ](https://ja.osdn.net/projects/sfnet_open-jtalk/releases/)

こちらの`hts_voice_nitech_jp_atr503_m001-1.05`をダウンロードします。

`node-openjtalk`に音声ファイルを格納します。Raspberry Piの場合はこんな感じです。

```
/home/pi/jtalk/node_modules/openjtalk/voice/m001/m001.htsvoice
```

`app.js`はこんな感じで書き換えます。（ピッチとレートを変更しました）

```js:app.js
var OpenJTalk = require('openjtalk');
var m001 = new OpenJTalk({ htsvoice: './node_modules/openjtalk/voice/m001/m001.htsvoice',
    pitch           : 500,
    sampling_rate   : 120000});
m001.talk('こんにちは世界',180);
```

[m001 - SoundCloud](https://soundcloud.com/toshio-ohta/m001#t=0:03)

外部のAPIを利用しなくても、これでRaspberryPiがお喋りできるようになりました。
Android 7.0からDownloadProviderがJobSchedulerを使うようにしれっと変わっていた話

多くは語らないけど、DownloadProviderのアーキテクチャは単純明快で、いろいろ参考になることが多い。
そんなDownloadProviderが、Android 7.0 Nougatからしれっと実装が変わっていたので、かるくソースコード解読をしたメモです。

※ちなみにこの記事は、DownloadProviderのもともとの作りを知ってる前提で書いてます。しらないかたはまずはAndroid 6.0までのソースを読んで下さい。
　
　

## 対象のコミット

https://android.googlesource.com/platform/packages/providers/DownloadProvider/+/3a5f5eafb34eaa4963c801882148e8f61514a61b

### 消えたDownloadService

DBに書かれたイベント契機で裏でいろいろゴニョゴニョ動いていたDownloadServiceがなくなりました。
代わりに、JobScheduler発動時に動くDownloadJobServiceというのが追加されています。
「ネットワーク状態が変わったら・・・」とか、「リトライ回数が・・・」みたいなロジックは全部JobSchedulerに委ねられることになりました。

DownloadProvider経由でdownloads.dbにinsert/update/deleteされるときに、KeepAlive的な処理がされていたところは、JobSchedulerへのスケジュール処理になっています。

![image](https://qiita-image-store.s3.amazonaws.com/0/74571/2b583847-e80d-2d97-1885-ec7323c73033.png)

### DownloadThreadが純粋にThreadに

もともとは、DownloadService上にあったスレッドプール上で動くRunnableでした。

```java:Android-6.0
public class DownloadThread implements Runnable {
```

Android 7.0では、土台がJobScheduler上で動くサービスになったので、もはやスレッドプールという概念はありません。

```java:Android-7.0
public class DownloadThread extends Thread {
```

DownloadJobServiceとDownloadThreadが１対１に対応するようになりました。
ツイートを長期間収集する実験(実行直前編)

# 前回まで
- [x] プログラム準備完了
    - [x] 必須項目実装完了
    - [x] 追加項目実装完了
- [x] インフラ準備完了
- [ ] 最終実行準備
    - [ ] ライブラリに不具合？
    - [ ] それでも止まったときのために
- [ ] 取得開始！

# 最終実行準備の前に
　ここのところ不穏当な話が多くてやですね。

- Twitterの身売り話が頓挫して、なんか不穏当な方向に
- 「みんな使ってるし」という理由で使い出したTweepyが<a href="https://github.com/tweepy/tweepy/issues/803">メンテ終了とかアナウンスされた</a><br>(その後引き継ぎされた？っぽいですが)

　後者は、どうにかなるとしても前者は不安です。**いくらなんでも年末までTwitterが保たないとか無いと思いますが**、今後、というのは考えた方が良いのかなあ、河岸を移すのは苦手なタイプなのですが。
 
# ライブラリ不具合への対処
 　<a href="http://qiita.com/yuhkan/items/299b41736a221e63b43c#comment-182e5a0a18bf20108270">「プログラム準備編(2)」で指摘をされて</a>実行環境では直しておかないと、と思っていたTweepyのStream不具合に手をつけます。

```bash
# python
Python 3.5.2 (default, Sep 24 2016, 05:23:05)
[GCC 4.9.2] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import tweepy
>>> tweepy.__file__
'/usr/local/lib/python3.5/site-packages/tweepy/__init__.py'
>>>
```

　これでtweepyのインストールパスが得られました。あとは当該ファイル(streaming.py)を<a href="https://github.com/feinsteinben/tweepy/commit/d40ee87bd816dcb8c4482ee73b582e27cfe987f7#diff-07400b70c336387bf35f0433991068f0">こんな風に</a>直して、共有フォルダ経由で上書きコピー。ミッション完。
 
## 不具合対処、もう一度。
 **ところが、この対応では不十分である**という話が、ド直前になって飛び込んできました。たまたま上記修正後の不具合確認で流していた際に例外エラーが発生したことで問題発生に気づき、github上のissueをチェックして<a href="https://github.com/tweepy/tweepy/pull/797">発見。</a>
 
　<a href="https://github.com/tweepy/tweepy/pull/802/commits/3177818deba45cd0021cad3a7eda916f3a272caf">こんな感じの修正を施して</a>、再度上書きコピー。今度こそミッション完。
 
# それでも落ちる可能性への対処
 　上記の例外エラーは、プログラム内部でトラップされ、即座にTwitterに再接続されましたが、他に何が起きるかわからない事を考えると、**プログラムが、何の前触れも無く落ちる**事への対処を考えないといけません。
  幸いと言うべきか、<a href="http://qiita.com/tattsun58/items/67b0f16c86fbe49fe5d0">検索して見つかったこちら</a>を利用することにします。もう五体投地で感謝を表さざるを得ません。
　実行後、プロセスをkillしてみると、自動で立ち上げ直してくれます。なんという便利。
 
 　まあ、ここまでやっても落ちるときは落ちるよなぁ、というのは思うところなのですが、十重二十重とは言わずとも「エラー通知で初動を楽に」「例外無視して自動再接続」「プロセス監視で再起動」の3つもあれば、3ヶ月はなんとかなるでしょう。
  **自分がうっかりNASのアップデートとかルータの設定更新するとかやらない限りは。**
 
# 実行開始！
 　とりあえずこれで準備が全部そろいました。多分。
  　途中で仕事が発火して滞りましたが、まあ直前でも全部そろって、ある程度のテストも出来たのでよしとしましょう。
   
  　そんなわけで、当選発表<sub>(隠語)</sub>の2日前、10/27にテスト用データをdropし、運用を開始しました。
   　ひとまず、当選発表<sub>(隠語)</sub>のラッシュ時でも問題無く取得が出来ています。成功……っぽい？
    とりあえず1週間ほど様子を見てみることにします。
    
## このあとの予定
 　とりあえず、時間刻みベースのツイート数を集計できるようにしたい所です。できれば実行環境に下手な影響が出ないようにしたい所なのですが、どうやったらいいでしょうね？
  
 (まだ続く。)
GoogleアナリティクスのデータをGoogleスプレッドシートに取得する

## はじめに

Googleアナリティクスを使って、自分のブログやQiitaのアクセスデータをチェックしていたのですが、Googleアナリティクスのデータは、Googleスプレッドシートと連携して、データ加工分析できることをしりました。Googleスプレッドシートにデータを取り込むことで、tableauを使って分析したり、Google App Scriptでレポートを自動送信したりと行ったことが可能になります。なので、早速試してみました。

## Googleスプレッドシートに、Googleアナリティクスを追加する

まず、準備として、GoogleスプレッドシートにGoogleアナリティクスのアドオンを追加します。

Googleアナリティクスのアドオンを追加することで、スプレッドシートに、Googleアナリティクスのデータを自在に取り込んでくることができます。

まず、画面上部のメニューから「アドオン＞アドオンを取得」を選択します。

![fromGA-1.png](https://qiita-image-store.s3.amazonaws.com/0/100312/149e80d7-e797-fb5b-1957-fb868d731c3b.png "fromGA-1.png")



するとアドオンの検索ウィンドウが開きます。「Analytics」などと行ったキーワードで検索すると「Google Analytics」のアドオンが出てきますので、追加してください。
![fromGA-2.png](https://qiita-image-store.s3.amazonaws.com/0/100312/35cbe2d7-cbdc-8b4d-3155-c4549f2d36af.png "fromGA-2.png")


その後、色々と許可が求められますが、気にせず、ポチポチします。これで、Googleアナリィクスのアドオンが追加されます。

## Googleアナリティクスのレポートを作成する

次に、Googleアナリティクスアドオンを使ってデータを取得していきます。Googleアナリティクスアドオンでは、

**①最初に「レポート」を作成し、データの項目を設定**
**②そのレポートを走らせて、データを取得する**

という流れになります。そのため最初にレポートでどういったデータを取得するのか設定してきます。

メニューの「アドオン」に「Google Analytics」が追加されておりので、そこから「Create new report」を選択してください。

![fromGA-3.png](https://qiita-image-store.s3.amazonaws.com/0/100312/6b1af12a-e8a9-9685-81d5-2b0de2eb1dd7.png "fromGA-3.png")


すると「Create a new report」というウィンドウが立ち上がります。

ここでは、以下の項目を設定していきます。

**①レポート名**
適当にわかりやすい名前を設定してください。（あとで変更することも可能です）

**②アカウント情報**
取得する「アカウント」「プロパティ」「ビュー」をプルダウンメニューから選択します


**③取得する値（Metrics）**
何の値を取得したいかを指定します。ページビューを取得したければ「Pageviews」、ユーザ数を取得したければ「User」です。
適当に、それっぽいアルファベットを入力すると、該当するMetricsが表示されます。

**④値の切り口（Demesion）**
取得した値をどういう切り口で分類するのかを設定します。日毎であれば「Date」、年月毎であれば「Month of Year」、ページ毎でれば「Page」といった具合です。


![fromGA-4.png](https://qiita-image-store.s3.amazonaws.com/0/100312/ff453078-df41-80d7-55ae-bb9b6caee1a2.png "fromGA-4.png")


上記がすべて設定できれば「Create Report」ボタンを押します。

すると、以下のような「Report Configuration」というシートが作成されます。

![fromGA-5.png](https://qiita-image-store.s3.amazonaws.com/0/100312/fea19433-6e01-2c29-9af0-78ff22d3fc47.png "fromGA-5.png")


ここまでくれば作業は、ほとんど終わりです。

## アドオンを走らせてアナリティクスデータを取得する

アドオンから「Google Analytics＞Run Reports」を選択します。成功すると、以下のように先程設定したレポート名のシートが作成され、そこに指定したデータが取得されます。

![fromGA-6.png](https://qiita-image-store.s3.amazonaws.com/0/100312/b49f395c-b2be-0692-6eca-5a681e9a743e.png "fromGA-6.png")



## 参考リンク

- [Googleアナリティクスデータをスプレッドシートで自動取得する方法](http://tonari-it.com/google-analytics-spreadsheet/)
Visual Studio Codeの端末をPowerShellにする方法

## はじめに
Visual Studio Code v1.9 未満だった当時、Windows環境でデフォルト端末がcmd.exeだった為PowerShellに変更した。

Visual Studio Code v1.9 から PowerShell がデフォルト端末に変更されました。
https://github.com/ayatokura/JP-VSCode-Docs/blob/master/release-notes/v1_9_ja.md#その他-other

## 設定
[ファイル] => [基本設定] => [ユーザー設定]を選択

`settings.json`に1行追記

    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"

```json:settings.json
{
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"
}
```

## 備考
Windows10(64bit)環境でPowerShellのパスを`Windows\sysnative`ではなく`Windows\System32`に設定しても動作するが、`PSReadline モジュールを読み込めません。コンソールは PSReadline なしで実行されています。`と毎回起動時に出てくる。
EC2サーバー上にLaravel5.3のプロジェクトを初回デプロイする（git経由）

## 概要
前回は、起動済みのまっさらなEC2インスタンスに `nginx` + `PHP7` + `(php-fpm)` 環境を構築しました。
[Qiita - AWS EC2 Amazon Linux 2016.09 + nginx + PHP7.0でサーバー構築](http://qiita.com/nbapps_dev/items/3427203cb7374d34bb4c)

今回は、このEC2 + nginx + php7なサーバー上に、ローカルで作成したLaravel5プロジェクトを配置します。

LaravelプロジェクトはEC2サーバー上の`/var/www/html/MyProject`に配置することとします。
## 構成
* Amazon Linux - 2016.09.0
* nginx - 1.10.1
* PHP - 7.0
* Laravel - 5.3

## ハマりポイント
この作業、5時間ぐらいハマりました（かかりすぎ。。。）
ハマらなければ、15分もかからずに終わるのですがorz

肝は、
nginxの設定でROOTを`/var/www/html`ではなく、
`/var/www/html/MyProject/public`に設定することです。

同じサーバーに複数プロジェクトを配置するため、
`/var/www/html`をドメインのルートにしたかったのですが、断念しました。1ドメイン1プロジェクトにします。

ちなみに、どうしても複数プロジェクトにする場合は下記を参考にしてください。
[nginx+PHP-FPMが稼働中のLinuxにLaravelを導入する](http://atuweb.net/201512_laravel-instal-nginx-php-fpm-system/)

## 手順
### gitのインストール 
```
$ sudo yum install git
```

### var/www/htmlフォルダの所有者変更
デフォルトでは`root`所有になっており、この後の作業でsudoが必要になってしまいます。
composerをsudoで使うのはよろしくなく、警告が出るので所有者を`ec2-user`に変更します。

```
$ sudo chown -R ec2-user:root /var/www/html
```

### git経由でLaravelプロジェクトを取得
```
$ cd /var/www/html
$ git clone [https://user@project/~~~/~~~.git] MyProject
```
期待するフォルダ名になるよう、名前を指定してgitから取得しています。
参考：[Qiita - cloneしてきたプロジェクトの名前を変えてクローンしてくる方法](http://qiita.com/kohei_uetan/items/f7a555a1f57fa49e0ff9)


### Composer経由で依存ライブラリ取得
デフォルトの`.gitignore`では、venderフォルダが無視されていて、Gitリポジトリ内に存在しないので、Composerで取得します。gitにvenderフォルダを含めるのはLaravel的に非推奨みたいです。
#### Composerのインストール
ホームディレクトリでcomposerパッケージをDLしてからbinに移動させています。

```
$ cd
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer
```


#### Composerで依存ライブラリを取得
composer.lockで指定されているライブラリ/バージョンを取得します。
ローカルプロジェクトで使ったバージョンで固定されるので安心です。

```
$ cd /var/www/html/MyProject
$ composer install
```

### storageフォルダに書き込み権限を追加
```
$ chmod -R o+w /var/www/html/MyProject/storage
```

### nginxの設定を変更
[前回](http://qiita.com/nbapps_dev/items/3427203cb7374d34bb4c#nginx%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4)、設定したものをさらに変更します。
以下のように、rootをプロジェクトの`MyProject/public`フォルダに指定し、すべてのリクエストを`MyProject/public/index.php`で受けるようにします。これがハマらないための肝です。

```/etc/nginx/nginx.conf

# これだとうまくいかない
# root         /var/www/html;

# 今回修正
root         /var/www/html/GuideMap/public;

# 今回追加
location / {
    # リクエストURI, /index.phpの順に処理を試みる
    try_files $uri /index.php?$query_string;
}

location ~ \.php$ {
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
}
```

あとはnginxのリスタートをして完了です。

```
$ sudo service nginx restart
```

## まとめ
これでLaravelプロジェクトをEC2のサーバーに配置することができました。


次はgit + CodeDeployなどで自動デプロイを企んでます。

gitクローンした後に、`$ composer install`と**storageフォルダの書き込み権限追加**のスクリプトを流せれば自動デプロイできる気がします。
初心者Webアプリ診断員がWebアプリをpythonで一から学んで書いてみる～cgi編～

#webアプリケーションの診断員も開発ができるといい
webアプリケーションの診断作業は非常にシンプルです。私は興味があるので問題ないのですが、脆弱性診断員は飽きが来るとも言われているそうです。しかし。Webアプリケーションの仕組みをわかっていたり、様々な観点から診断ができるようになると、さらに診断の質が良くなるし飽きることもないと信じているので、試したことをメモとして残します。

##python3上でcgiを動かす
.
├── cgi-bin
│   └── cgitest.py
└── cgiserver.py

pythonのルートディレクトリから上記のようなフォルダ構成にする。

```cgitest.py
\#!/usr/bin/env python
print('Content-type: text/html; charset=UTF-8\r\n')
print('Hello, World!')
```

```cgiserver.py
\# -*- coding: utf-8 -*-
import http.server
http.server.test(HandlerClass=http.server.CGIHTTPRequestHandler)
```
ルートディレクトリ上コマンドプロンプトでサーバもどきを動かす。
```python -m http.server --cgi
```

以下のURLにアクセスするとcgitest.pyの中身が出てくる。

そして、URLを指定してアクセスする。
http://localhost:8000/cgi-bin/test.py

ローカルプロキシで通信を見てみると・・・
![burp1.png](https://qiita-image-store.s3.amazonaws.com/0/127391/6d1512b8-4cd7-eb93-a3d9-4ed6b70c8628.png)

となります。通信も見ながらだと色々見えてきて面白いかもです。

###参考サイト
http://dackdive.hateblo.jp/entry/2016/01/22/100000