OmniAICreator/Qiita-1.07M huggingface dataset:
ES6でreact.js使う

# 元記事

- まんま流用です。自分のメモ用に投稿しただけです。

babelとwebpackを使ってES6でreactを動かすまでのチュートリアル
http://qiita.com/akirakudo/items/77c3cd49e2bf39da79dd

# 用語

- nodebrew:node.jsのバージョン管理(mac用)
- nodist:node.jsのバージョン管理(windows用)
- npm:node.jsのパッケージ管理
- babel:新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換してくれるツール
- webpack:WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール

# 手順

## for mac
```
brew install nodebrew
nodebrew ls-remote
nodebrew install-binary stable
nodebrew use stable
node -v
```

## for windows

### todo

## プロジェクト作る

```
mkdir sample-project
cd sample-project
git init
npm init
mkdir src dist

```

## babel入れる

```
# babelのインストール
npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react
# .babelrcファイルの設定
touch .babelrc
```

```
-Dは--save-devで、package.jsonにdevDependenciesとして入れる
-Sは--saveで、package.jsonにdependenciesとして入れる
```

- `.babelrc`

```
{
  "presets": [
    "es2015", "react"
  ]
}
```

## webpack入れる

```
npm i -D webpack
```

```
touch webpack.config.js development.js
```

- `webpack.config.js`

```
require('babel-core/register'); // development.jsでES6を使えるようにする
module.exports = require('./development');
```

- `development.js`

```
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

const src  = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

export default {
  entry: src + '/index.jsx',

  output: {
    path: dist,
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },

  resolve: {
    extensions: ['', '.js']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: src + '/index.html',
      filename: 'index.html'
    })
  ]

}
```

## reactパッケージ入れる

```
npm i -S react react-dom
```

## index.jsxを作成

```
touch src/index.jsx
```

- `index.jsx`

```
import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));
```

## webpack-dev-server入れる

```
npm i -D webpack-dev-server html-webpack-plugin
```

## index.htmlを作る

```
touch src/index.html
```

- index.html

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>
```

## package.jsonに追記する

```
"scripts": {
  "start": "webpack-dev-server" 
}
```

## npm startでwebpack-dev-serverを起動

```
npm start
```

- http://localhost:8080

## `npm start`した状態で、ソースを修正すると、即座に反映する

- `index.jsx`

```
import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
  constructor(props) { 
    super(props)
    this.state = { message: 'something' }
  }

  onChange(e) {
     this.setState( {message: e.target.value} )
  }

  render() {
    return (
      <div>
        <input type="text" onChange = { this.onChange.bind(this) } />
        <p>{ this.state.message }</p>
      </div>
    )
  }
}

render(<App/>, document.getElementById('app'))
```
bluetootキーボードの共有

現在のPC環境はwindows10とCentOSのデュアルブート

そして、キーボードはbluetoothのキーボード

windowsとCentOSで毎回ペアリングするのが面倒なので

どうにかして毎回ペアリングしないでできないかと色々調べたところありました！

参考というか、そのまま実行しただけですが、、、URLを、、、

http://plumthegoodman.hatenablog.jp/entry/2014/01/29/125746

結論はwindowsでペアリングしてレジストリに書かれている**32桁のキー**をCentOSに書いただけ

私の場合windowsのキーは

```ruby:
HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\B THPORT\Parameters\Keys\
```

に書かれていました。

そしてCentOSは

```ruby:
/var/lib/bluetooth/＊＊:＊＊:＊＊:＊＊:＊＊/＊＊:＊＊:＊＊:＊＊:＊＊/info
```

に書かれていました。(＊＊は恐らく、人によって違う数字）

以上

覚書でした
Twitterで@（アットマーク）をエスケープする方法

### Twitterで@をエスケープしたい

開発に行き詰まってTwitterに愚痴をこぼす時にちょろっとコードを書いたら
アットマークがエスケープされなくて知らない人にメンションを飛ばしてしまったことありませんか？
もしくは諦めてアットマークの後に半角スペースを入れてみたり。ださい。
ちょっとググっても見つからなかったのでその方法（無理やり）をご紹介します。
誰でもできちゃいます。これが広まってしまうとあまりよくない気もしますが。

### 非文字コードを使う

結論から言いますと、アットマークの後に非表示な非文字コードを入れてツイートしてください。

```
@Autowired private Hoge hoge;
 ^
ここに非文字コードを入れる
```

### 非文字コードって？

正直なんて呼ぶのが正しいかわかりませんがこのあたりを見てください。

http://www.unicode.org/charts/
http://www.unicode.org/charts/PDF/UFFF0.pdf

要するに、表示されないけど認識される文字を入れてあげましょうということです。

### どうやって入力する？

Mac（Google日本語入力）の場合は下記のように入力できます。Windowsでもおそらく簡単にできると思います。

1. 文字入力パレットを起動します  
<img width="674" alt="スクリーンショット 2016-12-05 22.04.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/60494/d0baf8a5-0c94-8d67-2ba9-19ff523b6c45.png">
2. 適当に非表示な非文字コードを選択します（Unicode > 特殊用途文字）  
<img width="669" alt="スクリーンショット 2016-12-05 22.06.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/60494/1fad4a03-dcd3-2800-c353-2de895604ca3.png">
3. アットマークのすぐ後ろにペーストしてツイートします  
<img width="590" alt="スクリーンショット 2016-12-05 22.05.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/60494/1f8b74ea-35a3-fa23-1c37-33b5000ccbe9.png">

### アットマークのエスケープができた

ええ、できましたね。（無理やり）

<img width="640" alt="スクリーンショット 2016-12-05 22.24.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/60494/2dc3ae32-ad43-b76e-5b18-6a97c7b96685.png">
続・CodeIgniter ネタを集め続けて約2年

この記事は<a href="http://qiita.com/advent-calendar/2016/code_igniter" target="_blank">CodeIgniter Advent Calendar 2016</a>の5日目です。

貯めていたネタを[昨日の記事](http://qiita.com/ayato/items/56934e24e383a14140bc)で消化しきれなかったので続きです。

---

## Twitter編 その2

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">あとで試したい  RT <a href="https://twitter.com/lf_ur_">@lf_ur_</a>: codeigniter 3のlibrariesディレクトリとmodelsディレクトリをcomposerのPSR-4 autoload対象にしてみたけど、そこそこ使いやすくて捗る。名前空間が別でもgetinstance関数は普通に使える。</p>&mdash; NEKOGET (@NEKOGET) <a href="https://twitter.com/NEKOGET/status/685661107441119232">2016年1月9日</a></blockquote>

僕はautoloaderはまだなんとなく触れることが出来る程度なので、ちょっと実際に手を動かしてどういう点が便利なのかを言葉にしてみたいです。

### [#cicon2016 Twitter検索](https://twitter.com/search?f=tweets&vertical=default&q=%23cicon2016%20lang%3Aja&src=typd)

今年の9月3日に浅草で行われたCodeIgniterカンファレンスというイベントの実況ツイートです。
当日はHTML5カンファレンスが行われており、そちらに参加していた為に行けなかったのですが、実況ツイートから少しずつ情報を汲み取れました。

イベントの発表内容は[こんな感じ](http://cicon.codeigniter.jp/2016/home/programs/details)の様ですが、発表資料の枠が空白のままなので、僕が確認できた分は以下に混ぜて並べてしまいます。

## スライド編

### [PHPCON fukuoka 2015 CodeIgniter update](http://www.slideshare.net/NEKOGET/phpcon-fukuoka-2015-codeigniter-update)
CodeIgniter3が出た時にバージョンアップで変わった事等がまとまっています
### [PHPでのテスト関連の資料.pdf - Google ドライブ](https://drive.google.com/file/d/0B_XVonuYHbBsQ2lxV05aLXBxcGM/view)
先程のカンファレンスで発表された資料①
### [Codeigniter4の比較と検証](http://www.slideshare.net/tetsuroy/codeigniter4)
先程のカンファレンスで発表された資料②
同じ方が[こんなスライドもupしていた](http://www.slideshare.net/tetsuroy/code-igniter-ci-phpunittest)のですが、なんのイベントだったんでしょう...？


---

以上で僕がサラッと見ただけの情報（＝どなたか詳しくご存知だったり、同じ事をやった知見がある方がいたら記事書いて欲しい）のネタは吐きつくしました。
次のアドベントカレンダー6日目も僕ですが、6日目以降で飛び入り参加の方をお待ちしています！
x86_64でpopcnt / tzcnt / lzcntする【ビット演算テクニック Advent Calendar 2016 5日目】

* これは[ビット演算テクニック Advent Calendar 2016](http://www.adventar.org/calendars/1403) 5日目の記事です

最初はもう少し別のことを書こうと思っていたのですが、時間がなくなってしまったので諦めました。みんな大好きpopcntの話をします。

## popcnt (tzcnt / lzcnt) とは?

レジスタ内で1の立っているビットの数を数える命令です。

```
popcnt(0x00) == 0
popcnt(0x01) == 1
popcnt(0x55) == 4
popcnt(0xffffffff) == 32
```

といった具合です。最近の多くのプロセッサにはこれを計算する命令が実装されています。

ついで tzcnt / lzcnt も紹介しておきます。それぞれ、レジスタ内で LSb / MSb から連続する0の個数を数えます。以下に、64bitのレジスタに対し発行した場合の例を示します。

```
tzcnt(0x01) == 0
tzcnt(0x04) == 2
tzcnt(0x00) == 64
lzcnt(0x01) == 63
lzcnt(0x04) == 61
lzcnt(0x00) == 64
```

## x86_64 で使う

これらの命令を x86_64 環境で使うにはどうすれば良いか、簡単にまとめます。

### そもそもどう書けばこの命令に落ちるの?

gcc系の C / C++ 環境を想定します。それ以外の環境でビット演算をやりたいという人はいないと思うので... (MSVCの人はごめんなさい)

#### gccのintrinsicsを使う

いわゆる `#include <x86intrin.h>` するやつです。[Intel Intrinsics Guide](https://software.intel.com/sites/landingpage/IntrinsicsGuide/) によると、`_popcnt64`、`_mm_popcnt_u64`、`_tzcnt_u64`、`_mm_tzcnt_64` などがあるようです。`_mm`のプレフィクスつきの方は {gcc, clang} on {linux, mac} でコンパイルが通らないようで、msvcもしくはicc独自のものなのかもしれません。(確認はしていません) コンパイルする際に`-march=native`オプションを与えれば、その環境でそれらの命令が使える場合、いい感じにやってくれます。

```
#include <x86intrin.h>

uint64_t popcnt(uint64_t n)
{
	return(_popcnt64(n));
}

uint64_t tzcnt(uint64_t n)
{
	return(_tzcnt_u64(n));
}

uint64_t lzcnt(uint64_t n)
{
	return(_lzcnt_u64(n));
}
```

#### gccのinline assemblyを使う

```
uint64_t popcnt(uint64_t n)
{
	uint64_t res;
	__asm__( "popcntq %1, %0" : "=r"(res) : "r"(n) );
	return(res);
}
```
のように書く方法もあります。しかし、コンパイラの最適化が効かなくなるので可能なら避けた方が良さそうです。

### 自分の環境では使えないよ...😢

popcntはNehalem以降、tzcnt / lzcntはHaswell以降のプロセッサにしか実装されていません。これらの演算をサポート外のプロセッサ上でどうしても使いたい場合は、利用可能な演算の組み合わせに落とす方法を考えます。

#### popcnt

よく知られたテクニックを使いましょう。

```
uint64_t popcnt(uint64_t n)
{
	uint64_t c = 0;
	c = (n & 0x5555555555555555) + ((n>>1) & 0x5555555555555555);
	c = (c & 0x3333333333333333) + ((c>>2) & 0x3333333333333333);
	c = (c & 0x0f0f0f0f0f0f0f0f) + ((c>>4) & 0x0f0f0f0f0f0f0f0f);
	c = (c & 0x00ff00ff00ff00ff) + ((c>>8) & 0x00ff00ff00ff00ff);
	c = (c & 0x0000ffff0000ffff) + ((c>>16) & 0x0000ffff0000ffff);
	c = (c & 0x00000000ffffffff) + ((c>>32) & 0x00000000ffffffff);
	return(c);
}
```

#### tzcnt

popcnt命令が利用可能な場合は、

```
uint64_t tzcnt(uint64_t n)
{
	return(popcnt(~n & (n - 1)));
}
```

とするのが良さそうです。

また、x86_64 (x86) には、tzcntとほぼ同様の命令bsf (bit scan forward) が実装されています。tzcntとの違いは入力レジスタの値が0の場合の出力が未定義となっている点です。というわけでpopcnt命令すら利用できない場合は、

```
uint64_t tzcnt(uint64_t n)
{
	if(n == 0) {
		return(64);
	} else {
		int64_t res;
		__asm__( "bsfq %1, %0" : "=r"(res) : "r"(n) );
		return(res);
	}
}
```

とします。

#### lzcnt

tzcntと異なり、上手い演算でpopcntに帰着させることはできません。常にbsr (bit scan reverse) 命令に帰着します。

```
uint64_t lzcnt(uint64_t n)
{
	if(n == 0) {
		return(64);
	} else {
		int64_t res;
		__asm__( "bsrq %1, %0" : "=r"(res) : "r"(n) );
		return(63 - res);
	}
}
```

### 環境の差異を考えるのは面倒ですね...

[ヘッダファイル](https://gist.github.com/ocxtal/b2b4fab0373cae118bf98da0aa9822d8)にまとめました。 `-march=native`つきでご利用ください。

## まとめ

* 最近のx86_64プロセッサでは、popcnt / tzcnt / lzcnt命令が実装されている。
* 使える場合は`#include <x86intrin.h>`と`-march=native`を組み合わせれば大体良い感じになる。
* サポートされていないプロセッサでは、ごにょごにょする。

明日はYSRKENさんの連珠の話だそうです。連珠ってなに...?
OpenSSL代替ライブラリの有名どころを挙げてみる

# 趣旨
OpenSSLへの一極集中が進む昨今、そもそも他のSSLライブラリって何があるのか知っておこうと思い、有名どころをまとめます。

# OpenSSLからフォークしたもの
## BoringSSL

Googleが主体な、OpenSSLからフォークしたライブラリ。

> BoringSSL is a fork of OpenSSL that is designed to meet Google's needs. 

公式：https://boringssl.googlesource.com/boringssl/

## LibreSSL

OpenSSLのハートブリード脆弱性が契機となり、OpenSSLからフォークされたライブラリ。OpenBSDプロジェクトが主体。

公式：http://www.libressl.org/
Wikipedia：https://ja.wikipedia.org/wiki/LibreSSL

参考：「LibreSSL の意義」http://qiita.com/kinichiro/items/3108e950b056963c33ad

# その他
## mbed TLS

OpenSSL代替手段を謳うライブラリ。
Androidなども含め、対応環境が多いのが特徴かと。

公式：https://tls.mbed.org/
Wikipedia：https://en.wikipedia.org/wiki/Mbed_TLS (英語)

## GnuTLS

Gnuのアプリから使うためのTLSライブラリ。
LGPLライセンスを採用しているのが特徴。

公式：http://www.gnutls.org/
Wikipedia：https://en.wikipedia.org/wiki/GnuTLS

# 全体の参考

あれこれ調べていたところ、そもそもWikipediaに一覧表がありました(ﾅﾝﾃｺｯﾀ。ざっと比較するのにはこれでも良さそう。

https://en.wikipedia.org/wiki/Comparison_of_TLS_implementations

# 次があれば

実際にOpenSSLと置き換えられるのか試してみたい。
LibreSSLを入れた方は、Gentooじゃないと(自分で全部ビルドしないと)ツライかもとのこと。果たして。
Unityで非アクティブなゲームオブジェクトを取得する方法

using UnityEngine.SceneManagement;

〜

SceneManager.GetActiveScene ().GetRootGameObjects ()

これで現在のシーンのルートに配置してあるオブジェクトの一覧を取得できます。（非アクティブ含む）
あとはここから好きなGameObjectを取り出しましょう！
Excelマクロで特殊文字を削除するメモ

どうも、COBOLerです。

メインフレームのデータを某開発支援ソフトでエクスポートすると、
シフトアウト（SO）・シフトイン（SI）が特殊文字で置き換わってしまいます。

エクセルに貼り付けたとき特殊文字が邪魔になるので、マクロで消したくなりました。

VBEに特殊文字を入力できず困ったのでメモします。

# やりたいこと

選択範囲に含まれる特殊文字（SO・SIが置き換わったもの）を削除する
![image](https://qiita-image-store.s3.amazonaws.com/0/149257/00dc32f6-9fa5-f3c8-9e9d-24efe89d6c3f.png)

# やったこと

```vbnet:SOSI削除
Sub SOSI置換()

    For Each mycell In Selection
        ' SOの削除
        mycell.Value = Replace(mycell.Value, ChrW(&HBB), "")
         ' SIの削除
        mycell.Value = Replace(mycell.Value, ChrW(&HAB), "")
    Next mycell
    
    MsgBox "置換しました"
    
End Sub
```

# これなにしてんの？

削除したい特殊文字をソース上に記述できないので、文字コードで指定することで解決します。
文字コードのコード体系はUnicode(16進)です。

* ChrW関数

「文字コード=>文字」の変換
16進で指定するときは、&h[16進]

## 特殊文字の文字コードを調べる方法は２通り。

①「挿入」タブ=>「記号と特殊文字」

![image](https://qiita-image-store.s3.amazonaws.com/0/149257/ed908044-6238-ea49-f332-7de2a4265951.png)

②AscW関数

「文字=>文字コード」の変換
0～65535の値が返ってくるのでHex関数で16進に変換する

セルを選択して下記を実行

```vbnet:Unicode取得
Sub Unicode取得()
    MsgBox Hex(AscW(ActiveCell.Value))
End Sub
```

# 参考リンク
▼MSDNライブラリ
[Chr 関数、ChrW 関数](https://msdn.microsoft.com/ja-jp/library/613dxh46(v=vs.90).aspx)
[Asc 関数、AscW 関数](https://msdn.microsoft.com/ja-jp/library/zew1e4wc(v=vs.90).aspx)
NSLでの非同期回路の書き方

NSLでの非同期回路の書き方について私なりに書いてみたいと思います。
この記事はNSLの構文をある程度知っていることを前提に書いています。
ですが、わからなくても読めるように後日補足説明は入れたいと思っています。

#NSLでの非同期回路の書き方
NSLは基本的には単相クロックをサポートするため
同一モジュール内で複数のクロックを記述することはできないそうです。

そのため以下のような2つ以上のクロック(今回はclk1,clk2)を持つ回路を書きたい場合は
![2016-12-05_21h23_00.png](https://qiita-image-store.s3.amazonaws.com/0/152330/364df261-4fa6-a0d4-25be-4a00f19a4617.png)

以下の図のようにクロックごとにモジュールを分割して
![2016-12-05_21h29_06.png](https://qiita-image-store.s3.amazonaws.com/0/152330/160c2aea-b856-387a-f7ab-f104497c7c4d.png)


そして、上位の階層(今回はtop)からクロックを供給することで書くことができます。

コードで書くと

```nsl
declare FF_clk1 {

  input  in1[4];
  output out1[4];

  func_in set(in1);
  func_in get():out1;
}

module FF_clk1 {

  reg FF[4] = 0;

  func set { FF := in1; }
  func get { return FF; }
}

declare FF_clk2 {

  input  in2[4];
  output out2[4];

  func_in set(in2);
  func_in get():out2;
}

module FF_clk2 {

  reg FF[4] = 0;

  func set { FF := in2; }
  func get { return FF; }
}

declare top interface {　// interface修飾子を付けることで
                         // クロックとリセットを明示的に宣言することができます。

  input clk1;
  input clk2;
  input p_reset;

  input in1[4];
  input in2[4];

  output out1[4];
  output out2[4];

  func_in set(in1, in2);
  fucn_in get();
}

module top {

  FF_clk1 ff_clk1;
  FF_clk2 ff_clk2;

  ff_clk1.m_clock = clk1;　// 重要なのはここ
  ff_clk2.m_clock = clk2;

  func set {
  ff_clk1.set(in1);
  ff_clk2.set(in2);
  }

  func get {
  out1 = ff_clk1.get();
  out2 = ff_clk2.get();
  }
}

```
そしてこのNSLのソースコードをnsl2vlでコンパイルしてできたVerilogHDLのコードを見ると

```
(抜粋)
FF_clk2 ff_clk2 (.p_reset(_ff_clk2_p_reset), .m_clock(_ff_clk2_m_clock), .get(_ff_clk2_get), .set(_ff_clk2_set), .out(_ff_clk2_out), .in(_ff_clk2_in));
FF_clk1 ff_clk1 (.p_reset(_ff_clk1_p_reset), .m_clock(_ff_clk1_m_clock), .get(_ff_clk1_get), .set(_ff_clk1_set), .out(_ff_clk1_out), .in(_ff_clk1_in));

   assign  _ff_clk1_p_reset = p_reset;
   assign  _ff_clk2_p_reset = p_reset;
   assign  _ff_clk1_m_clock = clk1;
   assign  _ff_clk2_m_clock = clk2;

```
各モジュールのm_clockにclk1,clk2が接続されています。

このようにすればNSLでも多相クロックの回路を記述することができます。
今回書いた方法は我流なのでもっとスマートな方法があったら追記したいと思います。

かなりざっくり書いたのでわかりずらいとは思いますので質問がありましたらぜひ聞いてください。
そして、もっとやりやすい方法があったら教えてください。
部分文字列を取得する2

#始めに
昨日、[文字列の部分配列を取得するプログラムを掲載しました](http://qiita.com/triple4649/items/b15448bd381a911c06e9)が、もっと改良するべき箇所があったので改良版を掲載します
#改良点

- 切り出し位置の座標を列挙し、決定した座標をもとに文字列を切り出す実装に変更した
- Java8のストリームAPIを使ってみた

#実装コード
```TestClaoo.java
package test;

import java.awt.Point;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

public class MyFuncTest2 {
	public static void main(String args[])throws Exception{
		String sample = "ABCDE";
		System.out.println(
			makeList(sample.length()) //文字列の要素分、切り出し位置を決定する座標のListを生成する
			.stream()                 //Listをストリームに変換する
			.filter(a-> a.x <= a.y)   //x座標がy座標より小さいものをListから抽出し
			.map(mapper -> sample.substring(mapper.x,mapper.y+1)) //抽出した座標を用いて部分文字列を切り出し
			.collect(Collectors.toList()) //streamをリストに変換する
		);
	}
	
	//引数で指定した数値の分、座標を生成する
	public static List<Point>  makeList(int num)throws Exception{
		List<Point> kridashi = new ArrayList<Point> (); 
		//外側のループは切り出し位置の開始を決定しています
		for(int KIRIDASHI_START =0; KIRIDASHI_START<num;KIRIDASHI_START++){
			//内側のループは切り出し位置の終了を決定しています
			for(int KIRIDASHI_END =0; KIRIDASHI_END < num; KIRIDASHI_END++){
				Point point = new Point();
				//切り出し位置の先頭をリストに格納する
				point.x = KIRIDASHI_START;
				point.y = KIRIDASHI_END;
			    kridashi.add(point);
			}
		}
		return kridashi;
	}
}

```
CSSでテキストを書き換える方法

#CSSでテキストを書き換える方法

下記のコードを参考にしてください。
まず書き換えたい要素のfont-sizeを0に設定します。
次に書き換え後の文字列を疑似要素で作成し、そちらはfont-sizeを任意の値に設定してください。以上です。
サーバーサイドのプログラムを変更せずに、表示されるテキストだけ変えたいときにおすすめです。
SEOには書き換え前のテキストの内容しか反映されないと思いますので注意です。

```html:source.html
<html>
<head>
<style type="text/css">
<!--
p {font-size:0;}
p:before {font-size: 12px; content: "かきくけこ";}
-->
</style>
</head>
<body>
<p>あいうえお</p>
</body>
</html>
```

表示結果
`かきくけこ`
Alfred Custom Searches のおすすめ一覧[随時更新]

Alfred にはサイト内のキーワード検索をサポートする Custom Search という機能がついています。（無料版でも）
https://www.alfredapp.com/help/features/web-search/


よく使う検索を設定しておくと「ブラウザのウィンドウをアクティブに→新しいタブを開く→目的のサイトを開く」の手順を省略して、**ランチャーから一発で検索結果を開けます。**
![kayano.gif](https://qiita-image-store.s3.amazonaws.com/0/40717/424506f5-30ea-8cdd-a364-c05a94980993.gif)



大きなサービスだと [Workflow](https://www.alfredapp.com/workflows/) が公開されていてランチャー上に検索結果を一覧で表示出来たりします。

# デフォルトで入ってるリスト
* YouTube
* Wikipedia
* Twitter, Twitter user
* Amazon
* Gmail, Drive
* Facebook

# おすすめリスト
Alfred.app がインストールされていれば'open [share で習得した URL]'コマンドで追加できます。
Keyword は自分好みに変えて使ってください。
おすすめあれば追加リクエストもお待ちしてます。

## Github
コード検索: `github キーワード`

```
open alfred://customsearch/Search%20for%20Github/github/utf8/nospace/https%3A%2F%2Fgithub.com%2Fsearch%3Futf8%3D%25E2%259C%2593%26q%3D%7Bquery%7D
```

[これは workflow のが上位互換かも](https://github.com/gharlan/alfred-github-workflow)

## Qiita 検索
技術記事検索: `qiita キーワード`

```
open alfred://customsearch/Search%20for%20Qiita/qiita/utf8/nospace/http%3A%2F%2Fqiita.com%2Fsearch%3Fq%3D%7Bquery%7D
```

## Twitter 関連
フォローしてる人の Tweet キーワード検索:`tf キーワード`

```
open
alfred://customsearch/Search%20for%20Friends%20Tweet/tf/utf8/nospace/https%3A%2F%2Ftwitter.com%2Fsearch%3Fs%3Dfollows%26vertical%3Ddefault%26q%3D%7Bquery%7D%26src%3Dtypd`
```

Twilog 自分のツイートを検索: `twilog キーワード`

```
open alfred://customsearch/Search%20for%20Twilog%20%27elzup%27/twilog/utf8/nospace/http%3A%2F%2Ftwilog.org%2F_elzup_%2Fsearch%3Fword%3D%7Bquery%7D%26ao%3Da
```

Favolog お気に入りツイートを検索: `favolog キーワード`

```
open alfred://customsearch/Search%20for%20Favolog%20%27elzup%27/favolog/utf8/nospace/http%3A%2F%2Ffavolog.org%2Ftweets.rb%3Fid%3D_elzup_%26w%3D%7Bquery%7D%26k%3Dtw
```

## Annict
アニメ情報収集: `an キーワード`
声優の参加作品調べる

```
open alfred://customsearch/Search%20for%20Annict/an/utf8/nospace/https%3A%2F%2Fannict.com%2Fsearch%3Fq%3D%7Bquery%7D
```


## はてなブックマーク
はてブ記事検索: `hatebu キーワード`

```
open alfred://customsearch/Search%20for%20Hatena%20Bookmark/hatebu/utf8/nospace/http%3A%2F%2Fb.hatena.ne.jp%2Fsearch%2Ftext%3Fq%3D%7Bquery%7D
```

## いらすとや
いらすとや検索: `irasuto キーワード`

```
open alfred://customsearch/Search%20for%20%E3%81%84%E3%82%89%E3%81%99%E3%81%A8%E3%82%84/irasuto/utf8/nospace/http%3A%2F%2Fwww.irasutoya.com%2Fsearch%3Fq%3D%7Bquery%7D
```

## Thingverse
3D モデル検索: `thingverse キーワード`

```
open alfred://customsearch/Search%20for%20Thingverse/thingverse/utf8/nospace/http%3A%2F%2Fwww.thingiverse.com%2Fsearch%2Fpage%3A2%3Fq%3D%7Bquery%7D%26sa%3D
```

## Tumblr
Tumblr 検索: `tumblr キーワード`

```
open alfred://customsearch/Search%20for%20Tumblr/tumblr/utf8/nospace/https%3A%2F%2Fwww.tumblr.com%2Fsearch%2F%7Bquery%7D
```


## Google Scholar
論文検索: `scholar キーワード`

```
open alfred://customsearch/Search%20for%20Google%20Scholar/scholar/utf8/nospace/http%3A%2F%2Fscholar.google.dk%2Fscholar%3Fhl%3Den%26q%3D%7Bquery%7D
```
LiT!memberのmemberによるmemberのための記事まとめ Android編

##はじめに
Day5ではAndroid開発に役に立った記事やAndroidcourseに参加したことがある人におすすめの記事をまとめています。特に開発をある程度やったことがある人に読んでもらいたい記事が中心ですが、始めたばかりの人もすでにいくつもReleaseしている人にとっても新たな発見があるかもしれません。
## Android開発をしたことがあるかこれからしようとおもっている人におすすめ！

[Androidアプリ開発を独学で学ぶ人への効果的な勉強法]
(http://qiita.com/Reyurnible/items/5e57e44baeddd2149833)
[Androidエンジニアが開発する上で知っておきたいこと]
(http://qiita.com/suzukihr/items/fdd7f72c1da3075ba5df)
開発をする上での考え方やどのように知識を深めていったらいいのかを知ることができます。


[Androidコードディング規約]
(http://qiita.com/Reyurnible/items/2de397b80391189af8e4)
誰かに質問して教えてもらうためにも、コードを公開したり一緒に開発したりするためにも分かりやすいコードや名前などにしたいですね。

##Android開発になれてきたりそろそろオリジナル作品をつくろうと思った人におすすめ！
[中高生のうちに知れると楽だったかもしれないエンジニア的な考え方](http://qiita.com/Reyurnible/items/8596a6c9974d6f151f72)
開発に対する考え方に関する記事です。
この記事が**開発を続けるきっかけ**になってくれることもあるかもしれません。

[Web な人もアプリな人も、これから新しく Android アプリを作るなら抑えておきたいポイント3選]
(http://qiita.com/KeithYokoma/items/fb6872a72a75e9b6f2e6)
[AndroidDeveropers]
(https://developer.android.com/design/index.html)
**Googleは最強ですね！**


[Android開発でスタンダード的なライブラリ一覧]
(http://qiita.com/granoeste/items/008fd62bde21d1df3fa3)
[イマドキなイカした Android のオープンソースライブラリ集]
(http://qiita.com/KeithYokoma/items/fb6872a72a75e9b6f2e6)
どんなものをつくるのか考えるきっかけとしてライブラリの一覧を見ておくのもよさそうですね。

[中級以上のAndroid開発者がAndroidらしい開発のために見たほうが良いURL一覧]
(http://qiita.com/yuya_presto/items/ab2162078e5d5076c718)
記事まとめでURL一覧を紹介するのはあれかもしれませんが、
こちらの記事もすてきな記事が数多く紹介されています。

[エンジニアの為の、アイデア効率化]
(http://qiita.com/Reyurnible/items/342352a0b145a4736ae0)
つくるアプリを思いつかなかったりそろそろネタが切れてきたころに**開発を続ける**ためのTipsです。

## すでにReleaseしたことがある人におすすめ！
[アプリ公開時の説明文は感情や得られる利益を訴えるべき]
(http://qiita.com/aikawa_Japan/items/6323a06560edf53fe999)
[AndroidStudioでいかにラクしてローカライズするかを考えた（しかも無償で）]
(http://qiita.com/okey01/items/e2cfd9f1264f3b7a81f2)
Localizeはしたいですね。

[Android開発はGoogleから学ぼう]
(http://qiita.com/sakebook/items/d8fa57830fd5db4b71a0)
**Googleの記事は参考になります。**

[Android開発を受注したからKotlinをガッツリ使ってみたら最高だった](http://qiita.com/omochimetaru/items/98e015b0b694dd97f323)
[Kotlin 0.12からKotlin 1.0.2にアップグレードした際にやったこと](http://qiita.com/omochimetaru/items/0b455d34a7ea2721d1b8)
最後はKotlinに関する記事です。~~機会があったら~~やってみたいなー


##最後に
いかがでしたでしょうか？
すでに読んだこともある記事が多かったこともあるかもしれませんが、
改めて目を通してみて新たな気づきを得ることもあるのではないでしょうか？

さて、Day6はkawakawaritsukiさんによる「Clashlyticsを活用しよう」です。
Day6の記事はAndroidに関する内容ですがClashlyticsはiOS開発でも利用できるようです。
AndroidではAndroidStduioからすぐに導入することができ、
問題発生時にはMailで詳細なReportが通知されるなど
とても便利なServiceなのでどんな記事になっているのか楽しみですね！

<!---さて、Day6はなぽるんさんとくーさんによるLiT!なおもいでです。
ChatCastを使ったContentsなのでどうなるか楽しみですね！--->
Perl6の累乗の書き方

こんにちは:whale2:

Ruby, Python, PHP, そしてもちろんPerl5などと同様に、
Perl6 でも累乗は `**` です。

```pl:例
use v6;
say 2 ** 0 ; #=> 1
say 2 ** 1 ; #=> 2
say 2 ** 2 ; #=> 4
say 2 ** 3 ; #=> 8
say 2 ** 4 ; #=> 16
say 2 ** 5 ; #=> 32
say 2 ** 6 ; #=> 64
say 2 ** 7 ; #=> 128
say 2 ** 8 ; #=> 256
say 2 ** 9 ; #=> 512

say 2 ** -0 ; #=> 1
say 2 ** -1 ; #=> 0.5
say 2 ** -2 ; #=> 0.25
say 2 ** -3 ; #=> 0.125
say 2 ** -4 ; #=> 0.0625
say 2 ** -5 ; #=> 0.03125
say 2 ** -6 ; #=> 0.015625
say 2 ** -7 ; #=> 0.007813
say 2 ** -8 ; #=> 0.003906
say 2 ** -9 ; #=> 0.001953
```



Perlのスローガンは"There's More Than One Way To Do It."[^hoge]ということで、以下のような書き方もできます。

```pl:この発想は無かった
use v6;
say 2⁰ ; #=> 1
say 2¹ ; #=> 2
say 2² ; #=> 4
say 2³ ; #=> 8
say 2⁴ ; #=> 16
say 2⁵ ; #=> 32
say 2⁶ ; #=> 64
say 2⁷ ; #=> 128
say 2⁸ ; #=> 256
say 2⁹ ; #=> 512

say 2⁻⁰ ; #=> 1
say 2⁻¹ ; #=> 0.5
say 2⁻² ; #=> 0.25
say 2⁻³ ; #=> 0.125
say 2⁻⁴ ; #=> 0.0625
say 2⁻⁵ ; #=> 0.03125
say 2⁻⁶ ; #=> 0.015625
say 2⁻⁷ ; #=> 0.007813
say 2⁻⁸ ; #=> 0.003906
say 2⁻⁹ ; #=> 0.001953
```

## おわり
上付き文字の文字コードを覚える日がやってきたようだな。

## 参考と注釈

* [上付き文字 - Wikipedia](https://ja.wikipedia.org/wiki/%E4%B8%8A%E4%BB%98%E3%81%8D%E6%96%87%E5%AD%97)

[^hoge]: 略してTMTOWTDI. 「やり方はひとつじゃない」
ツイート時にリンク先の概要や画像を表示させるための設定手順

メモで書き留め。
![スクリーンショット 2016-12-05 21.11.10.png](https://qiita-image-store.s3.amazonaws.com/0/113764/48d39b67-a01a-d7a8-57df-01355551e83c.png)

利用するのはTwitterの「Twitter Cards」

head内に下記のコードを参考にして入れる。

```index.html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
```
|プロパティ|概要|
|----------|--------------------------|
|**twitter:card**  |ツイート時のカードタイプの指定(https://dev.twitter.com/cards/types)|
|**twitter:site**|Twitterのアカウント(自分のアカウントでOK)|
|**twitter:title**|記事のタイトル|
|**twiiter:description**|記事の概要|
|**twitter:image**|画像のURL|

---
画像が表示されない場合はrobots.txtに下記のコードを追加。

```robots.txt
User-agent: Twitterbot
Disallow: *

Allow: /images
```
imagesを画像が入っているディレクトリにする。

まぁツイートボタンを入れろって話なんだけどね（笑）
R版MXNetのインストール時メモ

# 概要
MXNetはディープラーニング向けフレームワークのひとつです．様々なAPIが用意されていて、統計ソフトで有名なR言語にも対応しています．
自分は深層学習には普段Chainerを使っていますが、Rを使う機会があったのでインストールしてみました．　

Linuxの場合R版MXnetライブラリをインストールするのに少し手間がかかるのでここに書いておきます．
あと Chainer Advent Calendar 2016に参加しているけど、そこでQiita初投稿はちょっと怖いのでここで練習…  
※ちなみに、win OR mac なら以下の様にすれば入るらしい（簡単…）
　Rのコンソールで
> install.packages("drat", repos="https://cran.rstudio.com")
> drat:::addRepo("dmlc")
> install.packages("mxnet")

### My環境
ubuntu 14.04LTS
R 3.3.1 
# 本題
1. ターミナル上でgitクローンしてmakeとか
`sudo apt-get install build-essential git libatlas-base-dev libopencv-dev`
`git clone --recursive https://github.com/dmlc/mxnet`
`cd mxnet`
`make`

2. Rコンソールでpakインスコ＋よくわからん操作

 入ってないなら下のパッケージ入れる
> install.packages("devtools")
> install.packages("methods")
> install.packages("httr")


　で読み込み
>require(devtools)
>require(methods)
>require(httr)

続けて

>setwd("mxnet/R-package/")
>
>options(repos=c(CRAN='https://cran.rstudio.com'));
>install_deps(dependencies = TRUE)

　※プロキシ使っているならoptions〜の前に
>set_config(use_proxy(url="任意のアドレス",port=8080))

　がいるらしい（自分はやってない）

###※ここでなんかよくわからんエラー発生
>ERROR: configuration failed for package ‘curl’〜〜（省略）

ターミナルから
`sudo apt-get install curl`
`sudo apt-get install libcurl4-gnutls-dev`
とやったら解決（下だけでよかった可能性アリ）

3.　しあげ
ここまで終わったらターミナルで
`cd mxnet`
`make rpkg`
`R CMD INSTALL mxnet_0.7.tar.gz`

で作業終了

4.　確認
Rコンソールで
>require(mxnet)

とやってエラーが出なければ恐らく成功

以上

## 参考サイト
http://kato-kohaku-0.hatenablog.com/entry/2016/08/23/224131
http://blog.aicry.com/r-devtools-and-rcurl/
http://qiita.com/lukapla/items/e164a77c7bdb2460225d
オフラインリアルタイムどう書くE10 の問題の ruby による実装例


問題 : http://mtsmfm.github.io/2016/12/03/doukaku-e10.html
実装リンク集 : http://qiita.com/mtsmfm/items/8a78b895910a89e3012d

時間内に書いたのはスタッオーバーフローするので、スタックサイズを調整して無理やり実行するという酷いものだった。
ここに載せるにあたってそれはあんまりだと思うので、スタックオーバーフローを回避したものを：

```ruby
require "pp"
require "benchmark"

def docmd( o, cmd )
  r=o.size*3
  Array.new(r){ |y|
    Array.new(r){ |x|
      if o[y/3][x/3]==1
        (cmd=="X") == ((x%3+y%3)%2==0) ? 0 : 1
      else
        0
      end
    }
  }
end

def paint( f, x, y )
  s=[[x,y]]
  loop do
    x,y=s.pop
    if (0...f.size)===x && (0...f.size)===y && f[y][x]==0
      f[y][x]=1
      s.push( [x, y+1] )
      s.push( [x, y-1] )
      s.push( [x+1,y] )
      s.push( [x-1 ,y] )
    end
    return if s.empty?
  end
end

def count(f)
  r=0
  f.size.times do |y|
    f.size.times do |x|
      if f[y][x]==0
        r+=1
        paint( f, x, y )
      end
    end
  end
  r
end

def solve( src )
  field = src.chars.inject( [[1]] ){ |acc, cmd|
    acc = docmd( acc, cmd )
  }
  count(field)
end

$stdout.sync=true

DATA.map do |line|
  /(?<num>\w+)\s+(?<src>[XO]+)\s+(?<expected>\S+)/=~line
  actual = nil
  tick = Benchmark.realtime{  actual = solve( src ).to_s }
  okay = actual==expected
  puts( "%s %s %s->%s ( e:%s ) tick=%.3f" % [ ( okay ? "ok" : "**NG**" ), num, src[0,70], actual, expected, tick] )
  okay
end.all?.tap{|x| puts( x ? "everything is ok" : "something wrong" ) }

__END__
0 X 5 
1 O 4 
2 XX  5 
```

手元のマシンで、テストをすべて通すのに1分ぐらい。
もっと素晴らしい実装が公開されているけど、私は 1時間ではこれ（の、スタックオーバーフローするバージョン）が限界。

会場では、
・00〜01分→上記の実装のアイディア浮かぶ。
・01〜15分→よりよい実装があるはずだと思い、迷走する。
・15〜50分→諦めて最初のアイディアで実装する。スタックサイズをいじればテストは通った。
・50〜60分→よりよい実装があるはずだと思い、迷走する。
という感じだった(時間は記録していないので適当です)。

解けたか解けなかったでいえば解けてはいるものの、敗北感がある。ぐぬぬ。
【追記あり】アトミックアップデートの改修が入ったSolr-6.3.0でパフォーマンスを検証

[Solr Advent Calendar 2016](http://qiita.com/advent-calendar/2016/solr) の5日目です。

2016年12月17日 追記
設定に間違いがあり、アトミックアップデートが正常に動いていなかったので、再検証しています


# アトミックアップデートとSOLR-9592
[前回](http://qiita.com/tkondo/items/6daad82ed3c5d644a0f7)の記事でアトミックアップデートのパフォーマンスについて良くないことに触れましたが、どうやら[SOLR-9592](https://issues.apache.org/jira/browse/SOLR-9592)でパフォーマンスの改善があり、既にSolr-6.3.0に取り込まれているようです。
チケットとソースを読むとフィールドの補完をするためにフィールド値を取得するところが、遅かった？ようです。
せっかくなので、前回からの続きでどれだけ高速になったか調査したいと思います。


# 調査に使ったインデックス
概ね前回と同じですが、unique_key以外をstored=falseかつdocValues=trueにしたものを使います。
理由は補足の項を参照。

# Solrのバージョン
6.3.0

# 調査したパターン
これも前回のアトミックアップデートの検証と同じく、optmize済みのインデックス100万件が有る状態から、1万件づつ更新リクエストを発行します。

1. 全てのフィールドを揃えて更新
2. sort_int1だけアップデート(set)で更新


# 結果と考察
|            |  処理時間(秒)|
|:-----------|------------:|
|    パターン1|          ~~138~~145|
|    パターン2|          ~~136~~317|

~~アトミックアップデートが通常の更新とほぼ同等のパフォーマンスになりました。
6.3系以降ではアトミックアップデートの更新速度でのデメリットは解消とされた言っても良いのでは無いでしょうか。~~
依然として処理コストがかかるものの、Solr-5.5.2では3倍以上かかっていたものが2倍ほどまで短縮されました。

# 補足
~~今回のパフォーマンス改善はstored=falseかつ、useDocValuesAsStored=trueのフィールドに対して有効なようです。
当初はstored=trueで検証していたのですが、パフォーマンスが変わらなかったので、ソースをデバッグしたところ、stored=falseかつ、useDocValuesAsStored=trueの場合にパッチのパスに入っていました。
調査したのが結構前なのと、この辺りは詳しく終えていないので、ちょっと自信が無いですが・・・。~~
上記、正しくはstored=falseかつdocValues=trueの場合です。

# Solr 5.5.2へのバックポート
下記はSOLR-9592のdiffです。
https://github.com/apache/lucene-solr/commit/cae6b49a065bfbc5789d8bdcf3706c158c0fc10d
実際にパフォーマンスへ影響しているコードはSolrIndexSearcherへのものです。

下記がbranch_5_5のSolrIndexSearcherのコードです。
https://github.com/apache/lucene-solr/blob/branch_5_5/solr/core/src/java/org/apache/solr/search/SolrIndexSearcher.java#L792-L864

SOLR-9592の改善が入るまで、いくつかのパッチが当たっているため、そのまま適用はできませんが、バックポートするのも難しくなさそうです。
本当は5.5.2にバックポートしてパフォーマンスを調査した結果で記事を書くつもりでしたが、記事を書く段階で
ソースを見直すとパッチを雑に当てすぎていたので、今回は断念しました・・・。


# まとめ
~~SOLR-9592によるアトミックアップデートの改修は大きなものがありました。
実際にSolrを使った開発をすると、大量のドキュメントに対して特定のフィールドのみを更新したい要件があったりします。
今までは大量のドキュメントをアトミックアップデートで更新するには負荷が大きかったため、使用を断念せざるを得ない時もありましたが、6.3以降は気にせず使っていけそうです。~~
依然として更新速度はかかっているものの、大きくパフォーマンスの改善がされたので利用検討が視野に入るケースも増えているのは無いでしょうか。
炎の型工房 火の型 5日目 : プログラムをするために、フログラムをする!! 「イカのインクゲーム」をハックする -1-

[<ruby>炎<rt>ほのお</rt></ruby>の<ruby>型<rt>かた</rt></ruby><ruby>工房 <rt>こうぼう</rt></ruby>ScratchとDartでゲームプログラム<ruby>入門<rt>にゅうもん</rt></ruby> Advent Calendar 2016](http://qiita.com/advent-calendar/2016/firefirestyle-studio)
の<ruby>記事<rt>きじ</rt></ruby>です



<img width="400" alt="magic.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/40931c89-e081-f6ed-2963-2d7cf2682df5.png">

うーむ、また<ruby>失敗<rt>しっぱい</rt></ruby>した。

イライラ

よく、こんな<ruby>事<rt>こと</rt></ruby>を<ruby>続<rt>つづ</rt></ruby>けられますね。

..

そこが、いいんじゃないか。


# SplatoonをHackしよう


## Scratchを<ruby>開<rt>ひら</rt></ruby>こう



まずは、このページは、<ruby>開<rt>ひら</rt></ruby>けていますか?
<ruby>開<rt>ひら</rt></ruby>けてなければ、<ruy>前回<rt>ぜんかい</rt></ruby>の<ruby>記事<rt>きじ</rt></ruby>を<ruby>見<rt>み</rt><ruby>てください。


## インクを<ruby>塗<rt>ぬ</rt></ruby>りながら、キャラクターが<ruby>動<rt>うご</rt></ruby>き<ruby>回<rt>まわ</rt></ruby>るゲームだね

### <ruby>右<rt>みぎ</rt></ruby>キーを<ruby>押<rt>お</rt></ruby>したら、<ruby>右<rt>みぎ</rt></ruby>に<ruby>移動<rt>いどう</rt></ruby>するようにする。

<ruby>以下<rt>いか</rt></ruby>のコードを、<ruby>追加<rt>ついか</rt></ruby>してみよう
<img width="372" alt="z001a.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/c9f576e4-51fe-af87-90b8-39bf432bd184.png">



  　

### <ruby>動作確認<rt>どうさかくにん</rt></ruby>してみよう!!

https://scratch.mit.edu/projects/133004465/

<img width="571" alt="z002.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/37e1c7b3-e64d-5401-1e89-58fcb7c15df5.png">



1. <ruby>旗<rt>はた</rt></ruby>をクリック
2. <ruby>右矢印<rt>みぎやじるし</rt></ruby>キーを<ruby>押<rt>お</rt></ruby>すと、キャラクターが<ruby>右<rt>みぎ</rt></ruby>に<ruby>動作<rt>どうさ</rt></ruby>することを、<ruby>確認<rt>かくにん</rt></ruby>してください



### Good!!
![good.png](https://qiita-image-store.s3.amazonaws.com/0/54192/fa48a697-528c-9583-5b60-dce11f4e94b6.png)

　
　
　
　
　
　
　
　
## <ruby>上下左右<rt>じょうげさゆう</rt></ruby>に<ruby>移動<rt>いどう</rt></ruby>できるようにしよう

<img width="363" alt="z003.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/2733539e-f388-0e6d-dfe4-5874763fd845.png">



### <ruby>動作確認<rt>どうさかくにん</rt></ruby>してみよう!!
https://scratch.mit.edu/projects/133006409/
<img width="857" alt="z004.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/c249066c-e7ed-a895-d597-5f3c9e107192.png">


1. <ruby>旗<rt>はた</rt></ruby>をクリック
2. <ruby>上下左右<rt>じょうげさゆう</rt></ruby>のキーを<ruby>押<rt>お</rt></ruby>すと、キャラクターが<ruby>上下左右<rt>じょうげさゆう</rt></ruby>に<ruby>動作<rt>どうさ</rt></ruby>することを、<ruby>確認<rt>かくにん</rt></ruby>してください


### Good!!
![good.png](https://qiita-image-store.s3.amazonaws.com/0/54192/fa48a697-528c-9583-5b60-dce11f4e94b6.png)

　
　　
　　
　　
　　
　
## Thanks

<div>
ここまで、<ruby>読<rt>よ</rt></ruby>んでくれてありがとう!!
</div>
<div>
では、<ruby>次回<rt>じかい</rt><ruby>、また
<ruby>会<rt>あ</rt></ruby>えることを、
<ruby>楽<rt>たの</rt></ruby>しみにしています。
</div>

そして、<ruby>次回<rt>じかい</rt></ruby>は、この続きをやります。

<div>
ではでは
</div>
React Native の ListView でつまづきがちなこと

React Nativeでリスト構造のビューを実装する際、基本的には `ListView` を使います。
使っている中で地味につまづきがちなところを、今回は紹介したいと思います。

## 表示が遅い
少ない件数を扱っているときには気になりませんが、100件とかを一気に表示しようとすると、下記のような問題が起きてきます。

- 1行ずつパラパラと描画される
- 操作がブロックされてしまうため、レンダリングが終わるまで他のアクションが動作しない

パフォーマンスの改善には下記のプロパティを使うことができます。

| プロパティ | 説明 | デフォルト |
|:-----------------|:------------------|:------------------:|
| initialListSize | 初期レンダリングする行数を指定。 | 10 |
| pageSize | `initialListSize` で指定した行数の初期レンダリング後、一度にレンダリングする行数を指定。 | 1 |
| scrollRenderAheadDistance | スクロールが発生する場合、先読みで行のレンダリングをしておく範囲をピクセル数で指定。 | 1000 |

`pageSize` のデフォルトが `1` なので、1行ごとにレンダリングされてパラパラと表示されていたんですね。
`initialListSize` と `pageSize` に適切な数値を設定してレンダリングの回数を減らすだけでも、表示速度はかなり改善できます。
`scrollRenderAheadDistance` は他と比べて調整しても効果を実感しにくいかもです。
数値の最適化は、動かしながら調整してみましょう。

## リストに追加できない
下記のようにリストを定義しているとき、みなさんだったら、後からリストに要素を追加する関数をどのように実装するでしょうか。

```js
constructor() {
  this.rawArray = [
    { id: 1 },
    { id: 2 },
  ];
  this.state = {
    dataSource: ds.cloneWithRows(this.rawArray),
  };
}
```

大体の方は、まず下記のように実装するのではないかと思います。

```js
// NGパターン
addItem(item) {
  const {rawArray} = this;
  rawArray.push(item);
  this.setState({
    dataSource: ds.cloneWithRows(rawArray),
  });
}
```

これだとリストが再評価されず、表示に反映されません。
再評価させるためには、リストのインスタンスを新たに作り、`cloneWithRows` に渡す必要があります。

```js
// OKパターン
addItem(item) {
  const newArray = this.rawArray.slice(); // ここ注目。シャローコピーしている
  newArray.push(item);
  this.setState({
    dataSource: ds.cloneWithRows(newArray),
  });
  this.rawArray = newArray;
}
```

これで表示に反映されます。
リスト要素の更新や、削除の場合にも同様の実装が必要なので要注意です。

## 参考
https://facebook.github.io/react-native/docs/performance.html#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists
https://github.com/facebook/react-native/issues/4104
TF-Slim > link > fully_connected() > activation_fn / normalizer_fn / weights_regularizer / biases_regularizer

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

sine curveを学習した時のweightとbiasをC言語のツールで使うために出力しようとしている。

slim.fully_connected()の使い方を学ばないといけない。

https://github.com/tensorflow/tensorflow/tree/master/tensorflow/contrib/slim
上記のslim.fully_connectedのリンク先が以下となっている (TensorFlow v0.12)。
https://github.com/tensorflow/tensorflow/blob/r0.12/tensorflow/contrib/layers/python/layers/layers.py

```layers.py
...
@add_arg_scope
def fully_connected(inputs,
                    num_outputs,
                    activation_fn=nn.relu,
                    normalizer_fn=None,
                    normalizer_params=None,
                    weights_initializer=initializers.xavier_initializer(),
                    weights_regularizer=None,
                    biases_initializer=init_ops.zeros_initializer,
                    biases_regularizer=None,
                    reuse=None,
                    variables_collections=None,
                    outputs_collections=None,
                    trainable=True,
                    scope=None):
  """Adds a fully connected layer.
  `fully_connected` creates a variable called `weights`, representing a fully
  connected weight matrix, which is multiplied by the `inputs` to produce a
  `Tensor` of hidden units. If a `normalizer_fn` is provided (such as
  `batch_norm`), it is then applied. Otherwise, if `normalizer_fn` is
  None and a `biases_initializer` is provided then a `biases` variable would be
  created and added the hidden units. Finally, if `activation_fn` is not `None`,
  it is applied to the hidden units as well.
```

こちらで使っているのは以下のようにしている。

```py
hiddens = slim.stack(input_ph, slim.fully_connected, [7,7,7], 
  activation_fn=tf.nn.sigmoid, scope="hidden")
...
prediction = slim.fully_connected(hiddens, 1, activation_fn=tf.nn.sigmoid, scope="output")
...
```

slim.stack()は複数のslim.fully_connected()の簡略表記。

normalizer_fn, weights_regularizer, biases_regularizerは使っていないことになる。
activation_fnはデフォルトのReLUでなくsigmoidを使っている。

まとめると,3つの中間層と最後の出力層、それぞれにおいてweightがかけられて、biasが加算され、sigmoidを適用されている。

weight, biasの値を使ってC実装(python実装?)で出力の計算をするときは同じように処理をすればいいはず。
typescript-mode.el でカンマとかコロンを打った際にカーソル移動が発生して"ウガガガゥヮー"となる件について

<img width="288" alt="2__tmux.png" src="https://qiita-image-store.s3.amazonaws.com/0/2424/9d35dc03-d662-d50b-d203-7960d7d96ffb.png">

`typescript-insert-and-indent` がバインディングされているせいです。

仕方ないのでソースを眺め `(custom-set-variables '(typescript-auto-indent-flag nil))` セットすることで OFF にできるのを発見したことをここにご報告します。かしこ
Datadogで NVIDIA GPUのモニタリング

# Datadog で NVIDIAのGPUをモニタリングします

この記事はDatadog Advent Calendar 2016の5日目の記事です。

![screencapture-app-datadoghq-dash-89079-nvidia-gpus-1480926991287.png](https://qiita-image-store.s3.amazonaws.com/0/103734/c319c5c4-d5dc-69b7-625d-c6b631662679.png)


普段，NVIDIA DIGITSを使っています。このツールは，使用中のGPUのステータスを表示しているポートレットがあります。私はGPUのステータスをリモートで監視したかったので，Datadogによる監視をしてみようと考えました。DatadogのAgentは，デフォルトではGPUのモニタリング項目はありません。しかし，Datadogは，AgentのCheckスクリプトを自分で簡単に作成・追加することができます。そこで，GPUの状態を監視するスクリプトを作成しました。 NVIDIA Management Libraryを使うことでGPUの詳細なステータスを取得することができます。このAPIをPythonからは `nvidia-ml-py` モジュールを使うことで取得ができます。下記がメトリクスとなります。


一年前に書いた当初は4つのメトリクスしかなかったのですが，今では，７項目の取得するが可能となりました。今後は使用電力等を取得したいですね。

### メトリクス

- nvml.util.gpu: GPUの使用率
- nvml.util.memory: メモリの使用率
- nvml.mem.total: トータルメモリ
- nvml.mem.used: 使用中メモリ
- nvml.mem.free: 空きメモリ
- nvml.temp: 温度
- nvml.process.used_gpu_memory: プロセス毎の使用メモリ

### タグ

- name: GPU名-GPU番号(例: quadro_k1200-1)

## コードは以下にあります

現在は，Linuxでしか動きません。

- <a href="https://github.com/ngi644/datadog_nvml">https://github.com/ngi644/datadog_nvml</a>

## リファレンス

- <a href="https://developer.nvidia.com/digits">https://developer.nvidia.com/digits</a>
- <a href="https://pypi.python.org/pypi/nvidia-ml-py/">https://pypi.python.org/pypi/nvidia-ml-py/</a>
- <a href="http://pythonhosted.org/nvidia-ml-py/">http://pythonhosted.org/nvidia-ml-py/</a>
- <a href="http://docs.datadoghq.com/guides/agent_checks/">http://docs.datadoghq.com/guides/agent_checks/</a>
PostgreSQL has many を一行だけ連携する

PostgreSQL has many を一行だけ連携する方法

table1 has many table2 の関係で
table2 を最新の１行だけ連携させたい場合のSQL

```sql
SELECT *
FROM table1 t1
LEFT JOIN table2 t2 ON t2.id = ( 
	SELECT max(id) FROM table2 t3 
	WHERE t1.id = t3.table1_id
)
```
Schooの生放送配信のカメラから見切れた側

#はじめに
本投稿は、Schooの2016年末特別企画「[Schoo advent calendar 2016](http://qiita.com/advent-calendar/2016/schoo)」の6日目の記事になります。
エンジニアはエンジニアでも、放送技術的な意味でのエンジニアをやっています。なので、この記事もQiitaの皆さんのようなシステム開発的お仕事の領域ではなく、ライブストリーミングやスタジオの運用的お仕事についてのお話となることをあらかじめご了承ください。


#配信機材構成図
まずは弊社で使用している機材構成についてご紹介します。
***
![配信システム.png](https://qiita-image-store.s3.amazonaws.com/0/142253/1416575c-ba16-9b47-94de-b60de37f5e70.png)

右から登壇者に近く、一番左からエンコードされた映像がエントリーポイントに流れていくイメージです。
***
細かいところにはいろいろな仕掛けがあるのですが、映像・音声周りの機材を簡略化するとご覧のような構成を使っています。
###自由な入力ソースを一つ
登壇者に一番近いところからご説明すると、まず生放送で授業を実施してくださる先生のお持ち込みになったPCをとにかくCerevoさんのLivewedgeに入力するようにしています。
これにはいくつかのメリットがあり、

- 先生が複数台のPCを持ち込んでも適宜切り替え可能になる
- 進行役(弊社では学生代表と呼称しています)のPCも適宜切り替えて使用できる
- Livewedgeが内部でスケーラも持っているため、次のコンバータに入力する信号が統一できる

というように、入力側では接続するデバイスを自由に、出力側では出力される信号を揃えて吐き出せるようになります。

###1080iに統一された映像信号を4系統設ける
次に紹介するのはTriCasterに直接映像信号を送りこむための機器です。
HPX175は放送用、特に弊社のような小さなスタジオに向いた機材なので直接接続してもいいのですが、LivewedgeはHDMIの出力しかないためSDIにコンバートしなければなりません。これをGrass ValleyのG1で解像度と信号を1080iに整えて送り込んています。
もう少し解像度の選択肢はありますが、720やSD解像度にするメリットはあまりないため、だいたいこのあたりの設定で皆さんお使いかと思います。

###音声は混信リスクの高いワイヤレスマイクは使わない
弊社が渋谷のにぎやかなところにあるので、いつどこで誰が無線を利用するかはわかりません。
他にもいろいろと事情はあるのですがATWシリーズの2.4GHz帯を使用するタイプは送信機と受信機がペアリングするタイプのマイクなので、他のマイクから音が紛れ込む、という事故が防げるというメリットがあります。(もちろん、Wifiと混信してノイズとなってしまうリスクはあるのですが、他所から音がまぎれるよりは、だいぶだいぶマシです)

###最終的にはFMLEで3種類のエンコード
[Schooの録画配信の裏側](http://qiita.com/hiro32itou/items/67f4b27bc0ec1f9415b8#%E5%8B%95%E7%94%BB%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E5%87%A6%E7%90%86)にあるように、基本として用意されている三つのビットレートは生放送でも同様にTriCaster460でエンコードしております。
このTriCasterはWindows7がOSとして入ったパソコンでして、一般的な放送機器でいうところのスイッチャーとは多少異なる作られ方をしています。
イメージとしてはWirecastやXsplitのような配信用アプリをインストールし、それに見合ったハードウェアを積んだスゴイオモイPC、という感じのやつです。配信する際はスイッチングに使用するTriCasterアプリがFMLEの仮想ビデオソースになり、かつTriCasterアプリがFMLEを立ち上げつつスイッチング用アプリケーションの裏でFMLEを動かすことで配信を行っています。
なお、内部に記録したmp4ファイルを動画として再生したリ、透過のpngファイルをテロップにするというようなことも可能です。
※バージョンや機種によってはTriCasterは独自のエンコーダーを用意しているので、今回の説明と異なる場合があります。ご注意ください。
エンコードの設定は動きに弱い代わりにある程度はっきり解像度をとれるような向きで調整しています。


#まとめ
スタジオ側の機材構成にあたっては、

- 3つのエンコード設定を設定ごとにストリーム設定しなくていい
- 機器全体の構成はなるべくシンプルにして、なるべくトラブルシュートやメンテナンスを容易に

ということが求められていました。
Wirecastなどの導入も検討した時期があったのですが、配信設定ごとにrtmpURL/streamなどを都度設定することになるため、一つの設定を3ストリームまで使い倒せるFMLEが最終的に便利だったのですね。
とはいえTriCaster内でのFMLEはなかなかトラブル時の現象を把握できない不安があるため、途中までの機器数を減らし、放送までの経路は可能な範囲でコンパクトに、また、柔軟性を要求する箇所にはスケーラを持った機器を優先的に投入し、多少厳しい環境でも安全に動きそうな構成にしておきました。

中々独自の配信システムに配信する例はそう多くないので、多少苦労もありますが楽しく配信しております。
開発でも配信でも、ご興味がございましたらば[Wantedlyの採用ページ](https://www.wantedly.com/companies/schooWEBcampus/projects)より、ぜひご応募くださいませ。
Google Apps Scriptでテスト品質管理できる仕組みを作ろう〜第１章 概要紹介〜

この記事は[フロムスクラッチ Advent Calendar 2016](http://qiita.com/advent-calendar/2016/fromscratch)の5日目の記事です。

# 自己紹介
1987年の三重県人です。関西の人間（特に大阪）からはよく虐げられます。くやしいのぅ。
現在は[フロムスクラッチ](https://f-scratch.co.jp/)の開発部隊にいます。主にはテストチームのマネージメントをしていますが、要件定義のお手伝いをしたり、AIのためのデータモデルの設計のお手伝いをしたり、テストデータ自動生成の仕組み考えたり、などとやってることは様々です。なんでもやったるぞと。
今日はテストチームでテスト品質評価できる仕組みを作成したので、その概要をお話します。三部構成の予定。

# はじめに
テストチームのドン的存在、@take_chan_man 先生（品質管理責任者）はある日言いました。
**「楽にテスト品質を管理・確認できる仕組みがあったらいいなぁ。。」**
詳しく聞いてみると、つまりこういうこと。

- テスト進捗状況をパッと見で確認したい。
    - プロジェクト全体とテスト担当者単位どちらの視点からでもテスト進捗状況が確認できると麗しいよね。
    - 進捗状況と不具合発生状況とかの内訳が確認できるとありがたいよね。
- 品質情報をパッと見で確認したい。
    - テスト結果の集計（未消化のテストケース数や不具合発生数など）や発生事象（動作不正など）、不具合を埋め込む原因となった工程（要件、詳細設計など）とかが確認できたら喜ばしいよね。
    - 不具合の検出密度とかPB曲線とかが確認できると嬉しいよね。

とかとか、、
ふむなるほど。ちょっと調べてみると[redmine impasse](http://kawasima.github.io/redmine_impasse/user_manual.html)など、いくつか製品がみつかった。でもテストケース作るのがredmineとかにシバられちゃうのも嫌だな。自由度が少なくなる。それに、WBSとかテストケースとか基本的にGoogleスプレッドシート使ってんだよな。しゃーない、じゃあ作っちゃおう。

# システム概要
WBS、テストケースと結果、不具合報告、などすべて Googleスプレッドシートで書かれていることもあり、各データの集計・見える化にはGoogle Apps Scriptを使うことにしました。システム概要は以下の感じです。
<img width="650" src="https://qiita-image-store.s3.amazonaws.com/0/103674/6b9a5c90-f644-4641-a0f2-406974ee1b22.png">

# IPO
input と処理内容、outputについてそれぞれ説明します。
## インプット
インプットファイルはWBSとテストケースと結果と不具合報告です。
収集するデータそれぞれ以下の通り。

| インプットファイル名 | 収集するデータ |
|:--|:--|
| WBS | 各個人のテスト進捗、残テスト数などテスト進捗データ |
| テストケースと結果 | 未消化のテストケース数や不具合発生数などテストケース進捗データ |
| 不具合報告 | 現在の不具合数や解決済の不具合数などの不具合の消化に関する進捗データ |

## プロセス
インプットファイルはgoogle spreadsheetで、google apps scriptと連携する必要があります。連携方法については以下と本家のドキュメントを参考にしました。

- [Google Apps Script 実践メモ（スプレッドシート）](http://qiita.com/nurburg/items/744ec53477f4ae328555)

収集したデータをもとにデータテーブルを作成し、表やグラフを作成します。
作成方法は本家のリファレンスを参考にしました。

- [表作成](https://developers.google.com/apps-script/reference/document/table)
- [グラフ作成](https://developers.google.com/apps-script/reference/charts/)

## アウトプット

アウトプットとしてテスト進捗状況表と品質情報表を作成します。アウトプットの形式としてはHTMLです。アウトプットの作成と公開方法については以下を参考にしました。

- [
「Google Apps Script」で社内システムをつくってみた～GASとの出会い編～](http://www.symmetric.co.jp/blog/archives/1087)

アウトプットとその説明はそれぞれ以下の通り。

| アウトプット名 | 概要 |
|:--|:--|
| テスト進捗状況表 | テストの基本情報（テストケース数や不具合発生数、テストケース、不具合の密度）、不具合の発生事象、不具合の原因工程を集計し表示する。 |
| 品質情報表 | テストケース・不具合を縦軸、時系列、残テストケース数・検出不具合数・解決不具合数を集計し、PB曲線を表示する。（今のところはPB曲線のみ）  |

# まとめ
ということで本日は、テストチームで考えたテスト品質を管理するための仕組みの概要紹介でした。
「なんだよ、ここで終わりかよ」と言われそうですが、安心してください。
次の週（12月12日）に「テスト進捗状況表」を、、、
さらに次の週に（12月19日）に「品質情報表」を、、、
それぞれ詳しく紹介しようと思います。そうです。引き伸ばし作戦です。

さてさて次回は @jkkitakita 先生。とがった投稿を期待しております！
それでは〜
[JAWS-UG CLI] EC2 #12 ec2 Elastic IPの削除・解放


前提条件
========


EC2への権限
-----------

EC2に対してフル権限があること。


AWS CLIのバージョン
-------------------

以下のバージョンで動作確認済

- AWS CLI 1.11.24

```bash:コマンド:
aws --version
```

結果(例):

      aws-cli/1.11.19 Python/2.7.10 Darwin/15.6.0 botocore/1.4.76

バージョンが古い場合は最新版に更新しましょう。

```bash:コマンド:
sudo -H pip install -U awscli
```


0. 準備
=======


0.1. リージョンの決定
---------------------

```bash:変数の設定:
export AWS_DEFAULT_REGION='ap-northeast-1'
```


0.2. 変数の確認
---------------

プロファイルが想定のものになっていることを確認します。

```bash:変数の確認:
aws configure list
```

結果(例):

            Name                    Value             Type    Location
            ----                    -----             ----    --------
         profile       ec2as_full-prjZ-mbp13        env    AWS_DEFAULT_PROFILE
      access_key     ****************XXXX shared-credentials-file
      secret_key     ****************XXXX shared-credentials-file
          region        ap-northeast-1        env    AWS_DEFAULT_REGION


0.3. インスタンスIDの指定
-------------------------

既存のインスタンスに割り当てられているIPアドレスを確認します。

ここでは、10.192.0.8を割り当てられているインスタンスを選択します。

```bash:変数の設定:
EC2_PRIVATE_ADDR='10.192.0.8'
```

インスタンスIDを取得します。

```bash:コマンド:
EC2_INSTANCE_ID=$( \
        aws ec2 describe-instances \
          --filters Name=private-ip-address,Values=${EC2_PRIVATE_ADDR} \
          --query 'Reservations[].Instances[].InstanceId' \
          --output text \
) \
        && echo ${EC2_INSTANCE_ID}
```

結果(例):

      i-xxxxxxxxxxxxxxxxx


1. 事前作業
===========


1.1. パブリックIPアドレスの確認
-------------------------------

```bash:コマンド:
EC2_PUBLIC_IP=$( \
        aws ec2 describe-instances \
          --instance-id ${EC2_INSTANCE_ID} \
          --query "Reservations[].Instances[].PublicIpAddress" \
          --output text \
) \
        && echo ${EC2_PUBLIC_IP}
```

結果(例):

      xxx.xxx.xxx.xxx

```bash:変数の設定:
VPC_EIP_ADDR="${EC2_PUBLIC_IP}" \
        && echo ${VPC_EIP_ADDR}
```


1.2. アロケーションIDの取得
---------------------------

```bash:変数の設定:
VPC_EIP_ALLOC_ID=$( \
        aws ec2 describe-addresses \
          --query "Addresses[?PublicIp == \`${VPC_EIP_ADDR}\`].AllocationId" \
          --output text \
) \
        && echo ${VPC_EIP_ALLOC_ID}
```

結果(例):

      eipalloc-xxxxxxxx


2. EIPのディアソシエイト
========================

```bash:コマンド:
aws ec2 disassociate-address \
        --public-ip ${VPC_EIP_ADDR}
```

結果(例):

      (戻り値なし)


3. EIPの解放
============

```bash:変数の確認:
cat << ETX

        VPC_EIP_ALLOC_ID: ${VPC_EIP_ALLOC_ID}

ETX
```

```bash:コマンド:
aws ec2 release-address \
        --allocation-id ${VPC_EIP_ALLOC_ID}
```

結果(例):

      (戻り値なし)


4. 事後確認
===========


完了
====
pix2pixでポップアートから写真を復元してみた (追記あり)

# はじめに

先日、[pix2pix](https://phillipi.github.io/pix2pix/)という画像から画像への変換問題に包括的に使用できるアルゴリズムが発表されました。サンプルを見ると、白黒写真のカラー化から、航空写真からの地図の生成、さらには、地図からそれっぽい航空写真を生成するということもできたと書かれています。さらに、素晴らしいことに、実装もすべて[GitHub](https://github.com/phillipi/pix2pix)に公開されており、データさえ用意すればすぐに使える状況となっています。

そこで、ロイ・リキテンスタインのポップアートを写真風に変換するというモデルを作ってみました。写真をポップアート風にするシステムはいろいろありますが、ポップアートを写真風にするシステムはあまりないと思うので、その分pix2pixの強さが見えてくるんじゃないかと思います。

# pix2pixについて

pix2pixは、GAN (Generative Adversarial Network)という仕組みを基にしています。GANの詳細は、[こちらの記事](http://qiita.com/mattya/items/e5bfe5e04b9d2f0bbd47)などを参照していただくとして、pix2pixで使用されているConditional GANとの違いを少し紹介したいと思います。

最も大きな違いは、GANではGeneratorに乱数zしか与えていなかったのが、Conditional GANではGeneratorに変換元となる画像も与えるようになっているという点です。そして、Discriminatorについても、GANでは1つの画像が与えられ、学習データに含まれている画像かGeneratorが生成した画像かという判断を下すだけだったのですが、Conditional GANでは2つの画像が与えられ、学習データに含まれている `(変換元画像, 変換先画像)` というペアなのか、 `(変換元画像, 変換元画像からGeneratorが生成した画像)` のペアなのかという判断を下すようになっています。

航空写真から地図を生成する例を考えてみると、以下のようになります。
<img width="500" alt="cgan.png" src="https://qiita-image-store.s3.amazonaws.com/0/153033/2b6bd069-5194-b347-65fb-0d7b904d9094.png">

さらに、pix2pixではよりリアルな画像を生成するために、目的関数へのL1正則化項の追加と、PatchGANと呼ばれる仕組みの導入を行っています。L1正則化項は、変換先画像とGeneratorが生成した画像がピクセル単位でどれくらい違っているかということを表しており、これを最小化するということは、ピクセル単位で正解画像に近いような画像を生成するようになるということです。これにより、Discriminatorによって大域的な正しさを判定しつつ、L1正則化でピクセル単位での正しさも勘案する、ということが可能になります。

PatchGANは、Discriminatorに画像を与える際に、画像すべてではなく、16x16や70x70といった小領域(=Patch)を切り出してから与えるようにするという仕組みです。これにより、ある程度大域的な判定を残しながらも学習パラメータ数を削減することができ、より効率的に学習することができるそうです。

つまり、ここまでの話を総合して考えると、ピクセル単位で対応が取れるような変換にはとても向いているアルゴリズムということになります。実際に、サンプルとして挙げられている白黒写真のカラー化や地図の生成はすべてピクセル単位で揃うような問題となっています。一方で、画像の回転や反転を含むような変換はあまり得意ではなさそうです。実際に、[風景写真を拡大したものをデータセットとした学習](http://liipetti.net/erratic/2016/11/25/imaginary-landscapes-using-pix2pix/)では、あまりうまく生成できていないようです。

# 実験結果

![out.png](https://qiita-image-store.s3.amazonaws.com/0/153033/54430ba7-3d68-07b9-a01b-79df4510fe28.png)

学習データ1159枚で、1200 epochまで回したときの結果が上のものです。データ数が少なくてもそれなりに学習してくれるのでGTX 970でもメモリサイズは余裕でしたが、1200 epochまで回すと70時間弱ほど掛かりました。

入力画像と出力画像を見比べてみると、物体の場所はある程度維持したまま、写真っぽい雰囲気に変換できていることが分かるかと思います。一方で、局所的に白く飛んでしまっているところもあり、劣化した古い写真のような感じになってしまっているという点もあります。

# 宣伝

ポップアートと写真のパラレルデータセットなんて無い中で学習データをどうやって生成したのかなど、具体的な手法が気になる方もいらっしゃるかもしれませんが、詳細はコミックマーケット91 木曜日 西み-29bで頒布される「SunPro会誌」に書く予定ですので、よろしければお立ち寄りください。
(ここに全部書いちゃうとコミケのネタが無くなるので許してください :bow:)

# 追記 (2016/12/31)

コミックマーケット91にて印刷版の「SunPro会誌」は完売してしまいましたが、電子版を[BOOTH](https://sunpro.booth.pm/items/396886)で公開しました。サンプル紙面も掲載しておりますので、ぜひご覧ください！