OmniAICreator/Qiita-1.07M huggingface dataset:
CALayer概要

# はじめに
この記事は [リクルートライフスタイル Advent Calendar 2016](http://qiita.com/advent-calendar/2016/recruitlifestyle) の21日目の記事です。
AirレジのiOSアプリ開発を担当している山口です。

CALayerと聞くと、Viewを角丸にしたり枠線を描画するために利用するシーンが思い浮かぶのではないでしょうか。CALayerを深く理解すれば、より多彩なカスタムUIやアニメーションを実現することができます。今回はCALayerの種類についてざっくりまとめてみました。


# CALayer
普段アプリのUIを作る場合は、UIViewやそのサブクラスであるUILabelやUIImageViewなどを利用して実装するかと思います。View自身が描画コンテンツを管理しているように見えますが、実際にはCALayerがモデルオブジェクトとして描画する内容を管理しています。
詳しい内容については、[Core Animationプログラミングガイド](https://developer.apple.com/jp/documentation/CoreAnimation_guide.pdf) に記載されているのでご参照ください。

CALayerには用途に応じた様々なサブクラスが用意されています。また、UIViewと同様にLayerオブジェクト同士を階層構造で管理できるため、これらを組み合わせて利用することで表現豊かなカスタムUIを実現することができます。利用頻度の高いCALayerサブクラスをいくつか紹介します。

## CAGradientLayer
レイヤー自身をグラデーションで塗りつぶす機能を提供するレイヤーです。これを利用すれば画像リソースを使用することなくグラデーションを実現することができます。

<img width="550" alt="スクリーンショット 2016-12-18 18.07.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/33433/0fb2bf8f-2636-9488-119f-38965401fb3b.png">

## CAShapeLayer
CGPathベースでコンテンツを描画する機能を提供するレイヤーです。pathの作成には多少慣れが必要ですが、使いこなせば多彩な図形を描画することが可能です。CAShapeLayerを利用してカスタムViewを作成したので、参考までにご紹介します。

### [KYShutterButton](https://github.com/ykyouhei/KYShutterButton)
iOS標準カメラアプリのシャッターボタンに似せたカスタムButtonです。CAShapeLayerをいくつか組みわせて実装しています。IBDesignableにも対応しているので、InterfaceBuilder上で確認することもできます。

![KYShutterButton2.gif](https://qiita-image-store.s3.amazonaws.com/0/33433/14a2089c-fc1e-0a16-899b-90e5bf1e7356.gif)

![KYShutterButton1.gif](https://qiita-image-store.s3.amazonaws.com/0/33433/8660e7e8-65ff-6a26-fad8-12249334071e.gif)

### [KYDigitalFontView](https://github.com/ykyouhei/KYDigitalFontView)
電卓などの液晶モニタで表示されるような文字を描画するカスタムViewです。利用用途は謎ですが、、遊びで作ってみました。

![KYDigitalFontView1.gif](https://qiita-image-store.s3.amazonaws.com/0/33433/a0e003cf-2207-e0bc-df2e-f00cf5781a9e.gif)

![KYDigitalFontView2.gif](https://qiita-image-store.s3.amazonaws.com/0/33433/49743173-0a29-aa7e-674b-fd9780aa358b.gif)


# おわりに
CALayerを使えば上記のようなカスタムUIを作成することができます。本記事では紹介していませんが、アニメーションについても細かな設定が可能ですので、興味のある方はぜひ深く調べてみてください
アート・音楽生成 magentaプロジェクトの概観

# はじめに

本記事は、TensorFlow Advent Calendarの21日目の記事です。

今年は機械学習、DeepLearningがニュースなどでも取り上げられるようになり、また書籍もたくさん出るなど、大変話題になった一年だったと感じています。
活用事例としても、Google翻訳の刷新や、Everfilterのような(問題のある)アプリなど、良くも悪くも賑わっていたように思います。

今回ご紹介するのは、TensorFlowを活用してアート・音楽を作成するmagentaというプロジェクトです。


# magentaとは
magentaはGoogleBrainチームによるプロジェクトです。
DeepLearningを用いて芸術作品、音楽を作ろうとしています。

ブログ: https://magenta.tensorflow.org/
Github: https://github.com/tensorflow/magenta

2016/6/1に発表され、更新が続けられています。


# モデル

magentaには現時点で、モデルが6つあります。
主に音楽生成のモデルで、1つ画風生成のものがあります。

[magenta/magenta/models](https://github.com/tensorflow/magenta/tree/master/magenta/models)

## 音楽生成
音楽も言語などのように、それまでどのような音が出ていたかが、その次の音を決めるのに影響を与えます。そのため、magentaではRNNが用いられています。
また、用いるデータはMIDIデータのため、学習させたい音楽のMIDIを準備する必要があります。

1.  melody_rnn
    - magentaの中でも一番初めに(?)公開されたモデル
    - LSTMでメロディを生成する
    - 1音ずつメロディを与えていき、次の音符を予測する。
    - 読み込む音、鳴る音は1つのみ
    - `melody_rnn`には3つの種類がある
        - `Basic`
        - `LookBack` : 1小節、2小節前のメロディが繰り返されやすくなっており、より音楽らしくなる
        - `Attention` :  ある時点でのステップから出力する際に、直近のいくつかの出力を参考にする


2. polyphony_rnn
    - 複数の同時音のモデリングが可能になっている。(後述のimprov_rnnも可能)
    - 複数音の響きを1つのかたまりとして捉えて学習している

3. improv_rnn
    - 基本的には前述の`melody_rnn　Basic`と似ていますが、音をコード(C7等)に変換し学習するところが異なっている
    - `Basic Improv` : MIDIから48のコードにベクトル化し学習している。(48というのは、ドからシの音まで黒鍵白鍵の数が12で、それぞれにつき、major/minor/augmented/diminishedの4パターンあるから。)
    - `Attention Improv` : `melody_rnn Attention`を基とし、コードで学習させたもの
    - `Chord Pithces Improv` : `Basic Improv`と近いですが、コードのベクトルではなく、ドからシまでの音のどれが鳴っているかの長さ12のベクトルに変換し、学習する

4. rl_tuner
    - 強化学習 DQN で実装されたモデル
    - LSTMで学習した内容と、音楽理論の2つを報酬とし、強化学習を行う。

5. drums_rnn
    - ドラムのトラックを生成するモデル
    - `One Drum` : すべてのドラムの音を1つのドラムに集約して、何かしらのドラムが叩かれたかどうかだけを学習する
    - `Drum kit` : バスドラムやスネアなど9つのドラムの叩かれる組み合わせを512行のOne-hot vectorにして学習
    
## 画像生成
1. image_stylization
    - ある画像を、別の画像の様式を真似て、新たな画像に変換するモデル(画風を真似る)
    - スマホアプリの[PRISMA](http://prisma-ai.com/)のようなことができる
    - 学習済みのモデルとしては、モネやその他の数十名の画家のものが準備されている
    - [A Learned Representation For Artistic Style](https://arxiv.org/abs/1610.07629)の論文を参考にしたもの
    - 自分で準備した画像での、モデルのトレーニングも可能。例えば新海誠さんの画像を集めれば、ある画像を新海誠さんテイストに変換できそうですね。


# 開発への参加方法
2016/12/20時点では、外部メンバーによるContributionはできないようです。
ただし、[GoogleGroup](https://groups.google.com/a/tensorflow.org/forum/#!forum/magenta-discuss)では議論が行われており、自由に参加可能です。質問もこちらで受け付けられてます。


# 難しさと終わりに

音楽データ、MIDIデータは、画像データと比べて収集が難しいのがネックかなと思います。アーティストを絞るとなると、さらに厳しくなるのではないでしょうか。
また、音楽理論の知識や基本用語などを知っている方は、より開発を進めやすいかと思います。

実装まで落とし込みたかったのですが、ここまでとなります。
ありがとうございました。
Dockerを使ってOSコマンドインジェクションが出来るSlack botを作った話

# はじめに
この記事は[Docker2 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/docker2) の20日目の記事です．  
所属している部活の部内コンテストで，部員にDockerの宣伝も兼ねてOSコマンドインジェクションが出来るSlack botを作ったので，そのことについて書きます．

# 動機
元々オンラインジャッジに興味があり[Docker実戦活用ガイド](https://www.amazon.co.jp/exec/obidos/ASIN/4839959234/paiza07-22/) を読んで自分も似たようなものを開発したい，部活のメンバーにDockerを布教したいなどの思いから開発しました．
またideoneのようなオンラインコンパイラのAPIを利用しなかったのは自身の勉強のためです．

# Dockerとは
Dockerとはコンテナ型仮想化を行うソフトウェアのことで，起動が早く軽量なことが特徴です．オンラインジャッジは任意コードを実行可能なサービスであり，環境が破壊されないように仮想化技術などで保護してやる必要があります．また，レスポンスの速さを考えるとDockerはその軽量さからオンラインジャッジに向いていると言えます．

# OSコマンドインジェクションとは
ググると次のように書いてありました．
> 閲覧者からのデータの入力や操作を受け付けるようなWEBサイトで、プログラムに与えるパラメータにOSに対する命令文（コマンド）を紛れ込ませて不正に操作する攻撃。

http://senmon.cfc.ac.jp/studentreport/report2/OS.html

# 作ったもの
[odanado/slackbot-os-command-injection](https://github.com/odanado/slackbot-os-command-injection) においてあります．


## botアカウントの取得
https://slack.com/apps/build を開きます．
![スクリーンショット 2016-12-20 23.31.24.png](https://qiita-image-store.s3.amazonaws.com/0/119143/185165b7-5a9b-7280-202f-4819f5344f3d.png)
右の`Make a Custom Integration`を選択します．
![スクリーンショット 2016-12-20 23.31.16.png](https://qiita-image-store.s3.amazonaws.com/0/119143/65a34afb-944b-9914-b4d9-6b036de28ec5.png)
`Bots`を選択します．
![スクリーンショット 2016-12-20 23.31.40.png](https://qiita-image-store.s3.amazonaws.com/0/119143/a667e398-29cd-1d7f-5396-ceb8e174d34d.png)
作りたいbotの名前を入力します．今回は`os-command-injection`という名前にしました．
これでbotアカウントの取得は完了です．
`API Token`を控えておきます．



## Docker in Docker
Dockerコンテナの中でDockerを利用することはDocker in Dockerと呼ばれ公式のリポジトリでそのイメージが配布されていました．
https://hub.docker.com/_/docker/
Docker in Dokcerを実現する方法には2種類あり http://qiita.com/sugiyasu-qr/items/85a1bedb6458d4573407 で解説されています．
今回は，ホストマシン上の Docker daemon を共有することでDockerの中でDockerを利用しました．
そのため`docker-compose.yml`ではホスト側の`docker.sock`をコンテナにマウントしています．


## python-rtmbot
言語は普段書き慣れている`python`を使い，Slack botのフレームワークを調べると`python-rtmbot`がヒットしたのでこれを利用しました．
使い方としては`plugins`以下に自分のbot用のディレクトリを掘り，その中にメソッド`process_message`を持つpythonスクリプトを配置するだけです．`process_message`の引数`data`にbotが参加しているメッセージが流れてくるのでそれを処理してやります．

## リソースの割り当て
任意コマンドを実行するコンテナには[Docker実戦活用ガイド](https://www.amazon.co.jp/exec/obidos/ASIN/4839959234/paiza07-22/)を参考にある程度の制限を設けています．

```python:constant.py
StartArgs = {}
StartArgs['--net'] = 'none'
StartArgs['--cpuset-cpus'] = '0'
StartArgs['--memory'] = '128m'
StartArgs['--memory-swap'] = '128m'
StartArgs['-w'] = '/workspace'
StartArgs['--hostname'] = 'os-command-injection'
StartArgs['--ulimit'] = ['fsize=1000000']
StartArgs['--pids-limit'] = '10'
```
今回の場合だと，ネットワークは無効，CPUは0番目を割り当てる，メモリとスワップは128MB，生成できるファイルの上限は1MB，プロセスの上限は10個となっています．

## 実行方法
```bash
$ git clone https://github.com/odanado/slackbot-os-command-injection
$ cd slackbot-os-command-injection/
$ docker-compose run -d -e SLACK_TOKEN=$SLACK_TOKEN bot
```
OSのコマンドを実行する環境だけでなく，botが動作する環境もDokcer上で構築したため，新しいソフトウェアのインストールをすることがなく，少ないコマンドをただ叩くだけで動作します．~~美しい~~

# 動作の様子
![スクリーンショット 2016-12-20 23.57.15.png](https://qiita-image-store.s3.amazonaws.com/0/119143/e638032d-24d0-ec20-e4f6-370951052d4e.png)
このようにbot宛にメンションを飛ばしてやると実行結果を返してくれます．
staticおじさんにならないために

#はじめに
Javaのことを少し勉強したので、修飾子のstaticについて書いていきたいと思います。
この記事は、[SLP_KBITその2 Advent Calendar 2016 - Qiita](http://qiita.com/advent-calendar/2016/slp_kbit2)の20日目の記事です。

間違った点がありましたらご指摘お願いします。

#staticおじさんとは
staticメソッドはインスタンスを生成しなくてもクラスから直接呼び出せるのでstaticを多用する人がいます。
そのような人を「staticおじさん」と呼んだり呼ばなかったりします。

#staticとは
メソッドやメンバ変数にstatic修飾子を付けると、staticメソッド、static変数になります。
static修飾子を付けると何が変わるかというと、newしなくてもそのメソッドやメンバ変数にアクセスできるようになります。
つまりstaticとは、
・共通のメソッドを定義する場合
・共通のプロパティを定義する場合
・複数クラス間で共通のプロパティを共有したい場合
に使う修飾子ということです。

#なぜstaticを乱用してはいけないのか
これには様々な理由がありますが、一例をあげると、staticメソッドや変数は、ある所で変数の値を変更されたら他に参照しているところ全てに影響が出ることになります。
よって、staticを乱用することは、混乱の原因になります。

#staticはどのように使うべきなのか

##staticではないプロパティ・メソッド
では実際にコードを見ながら説明していきます。

```java:Human.java

public class Human {
	private String name;
	private int satiety;	//満腹度
	
	public Human(String name, int satiety) {
		this.name = name;
		this.satiety = satiety;
	}
	
	public void eat(int amountfood) {
		this.satiety += amountfood;
	}
}

```

上のコードは、人間オブジェクトを作るためのHumanクラスです。
このクラスには2つのプロパティと2つのメソッドがありますが、全て非staticなプロパティとメソッドです。
非staticなプロパティ・メソッドは、インスタンス固有のものです。「名前」は「人間」が共通の名前を持っているのではなく「個人」一人一人が持っているものなのでインスタンス固有のものです。また、「空腹度」や「食べるという動作」も一人一人個別に持っていたり行ったりするので、インスタンス固有のものです。

##staticなプロパティ・メソッド
では、先ほどのHumanクラスにstaticなプロパティを追加してみます。

```java:Human.java

public class Human {
	static int count_Human = 0;
	private String name;
	private int satiety;	//満腹度
	
	Human(String name, int satiety) {
		this.name = name;
		this.satiety = satiety;
		count_Human++;
	}
	
	public void eat(int amountfood) {
		this.satiety += amountfood;
	}
}
```

staticなプロパティ「人数」を追加しました。
Humanメソッドが呼ばれると、「人数」を増やします。
では何故「人数」はstaticなのでしょうか。
それは、「人数」は、インスタンス固有のものではなく、クラス固有のプロパティだからです。
「人間」の「名前」はなんですか？と聞いても分かりません。なぜなら「名前」は「個人」のものだからです。では、「人間」の「人数」は何人ですか？と聞かれると答えることができます。なぜなら「人数」は「人間」のクラスのプロパティだからです。
このように、クラス固有のプロパティやメソッドを作りたいときにはstaticを使うようにしましょう。

#まとめ
staticは便利ではありますが、乱用すると値が上手く合わなかったり、自分でどのようなコードを書いていたか分からなくなったりと混乱を招きます。
なので、staticを上手に使って、staticおじさんにならないように頑張りましょう。

引用: [【Java】 staticって何？](http://nobuo-create.net/java-beginner-21/)
Jupyter Notebook + nbpresentでプレゼンテーションをスマートに作成したかった

# はじめに

この記事は[jupyter notebook Advent Calendar 2016](http://qiita.com/advent-calendar/2016/jupyter) 20日目の記事です．

---

# この記事の内容とモチベーション

* 内容
    * Jupyter Notebookを使ったプレゼンテーションの作成方法の話
* モチベーション
    * 普段Jupyterで科学計算やったりノート作ったりしてるので，プレゼンも作れたら最高じゃない？ということで調べてみました
    * 正直あまりうまくいってないです…

---
# 筆者のPythonの開発環境

* Windows 10
* Miniconda (Python 3.5)

---
# プレゼンを作るためのプラグイン

* RISE : https://github.com/damianavila/RISE
* nbpresent : https://github.com/Anaconda-Platform/nbpresent
    * 今回はこっちを試してみる

---
# nbpresentのインストール

下記コマンドでインストール可能

```
conda install -c conda-forge nbpresent
```

---

# スライドの作り方 (1)

* メニューから[View] -> [Cell Toolbar] -> [Slideshow] を選択する
* セルの[Slide type]を`Slide`に変更する

![fig1.gif](https://qiita-image-store.s3.amazonaws.com/0/83161/8dfb9f4d-79ea-efb9-4c78-44ed1f46a9b0.gif)

---

# スライドの作り方 (2)

* 適当にセルにスライドに載せたい内容とかプログラムを書いていく

![fig2.PNG](https://qiita-image-store.s3.amazonaws.com/0/83161/d1f66516-f21a-e3ab-ac28-a74e955c3290.png)

---

# スライドの作り方 (3)

* [プレゼントみたいなマーク] -> [Slides] -> [Basic] の順に選択する

![fig3-iloveimg-compressed.gif](https://qiita-image-store.s3.amazonaws.com/0/83161/20a8a7b2-8689-fb33-6214-926ce6ee5524.gif)

---

# スライドの作り方 (4)

* Basicを選択するとスライドがはじめから追加されているが，一番目以外を一旦消す
    * 被ってるスライドがあったり，いらないスライドがあったりするため

![fig4.PNG](https://qiita-image-store.s3.amazonaws.com/0/83161/f3fdc96c-2838-516b-55e1-33cc1f788f99.png)

---

# スライドの作り方 (5)

* [+ Slide]からスライドを追加する
* 追加されたスライドについて，[Link]を選択し，スライドに追加したいセルの[Source], [Outputs]または[Whole]を選択する
    * [Whole]はプログラムの[Source]と[Outputs]を両方含むという意味
    * Linkを取り消したい場合は[Unlink]を選択する
* これをスライドに載せたいセルすべてについて行う

![fig5-iloveimg-compressed.gif](https://qiita-image-store.s3.amazonaws.com/0/83161/e179f3b3-f604-d5c6-298e-384a5339d42b.gif)

---

# スライドの作り方 (6)

* [themes] からCommunity Themesを適当に選択する

![fig7.gif](https://qiita-image-store.s3.amazonaws.com/0/83161/bb10fef7-6ef2-ca75-c5fc-8754259b7bfe.gif)

---

# スライドの作り方 (7)

* 右上の[Present]を押すとそれっぽいスライドが再生される

![fig8.png](https://qiita-image-store.s3.amazonaws.com/0/83161/b67a22c4-8952-5d71-7e9a-081a6d04974e.png)

---

# 解決できなかったこと

* たまに意図していたのと違うセルがスライドにLinkされることがあるっぽい？
    * 何度やりなおしても3番目のスライドにまとめのセルが現れる現象が発生した
* スライドを並べ替えるとき，たまに意図しない並びに変化する

---

# まとめ

* あまりスマートな感じではないですが，以上がJupyter + nbpresentでのスライドの作成方法について調べた結果です
* 他にもひとつのスライドに複数のセルを追加したり，レイアウトの変更もできたりしますが，時間の都合上割愛致します
    * 後日追記するかもしれません
wxWidgetsの紹介

# wxWidgetsとは
wxWidgetsはクロスプラットフォームなGUIライブラリです。
現時点の最新版は3.1で、去年からはGitHubが開発の中心になりました。
https://github.com/wxWidgets/wxWidgets
GitHubのREADME.mdには必要なことが簡潔に書かれていて良いですね。
特にライセンスのところで「静的リンクしていてもソースコードを公開しなくていいようにしたLGPLだよ」とだけ書かれているのが親切ですね。

基本的にはどのOSでも同じコードで書くことができます。
TATEditorでもほとんどのコードをWindows, Ubuntu, macOSで共有できています。
ただし、もともとがwxWindowsという名前であったことからも分かるように、WindowsのWin32 APIの影響が多々見受けられます。
また、Windowsには実装されているけど、他のプラットフォームでは使えないということも時々あります。

## wxWidgetsの魅力
同じく有名なクロスプラットフォームなGUIライブラリにはQtがありますが、こちらはwxWidgetsとは異なり、ボタンなどの部品を独自に描画してしまいます。
wxWidgetsではそうしたUIの部品はネイティブのものが使われ、私はそこが気に入ってこちらを選択しています。

私はXP時代からwxWidgetsを利用しているのですが、当時からUnicode対応がけっこうしっかりしていたこともポイントが高いです。
（むしろ最初はクロスプラットフォームであることよりも「WindowsソフトがちゃんとUnicode対応で作れる」というところで使い始めました）

# ビルド+α
主に静的ライブラリについて。

- Windows
    - `build/msw/wx_vc14.sln`あたりを開いてビルドしましょう
- macOS
    - `build/osx/wxcocoa.xcodeproj`を開いてビルドしましょう
- Ubuntuなど
    - GTK+3の場合
        - `sudo apt-get install libgtk-3-dev`
        - `./configure --with-gtk3 --with-gtk=3 --disable-shared`
        - `make`
        - `sudo make install`

# 最小サンプル
wxWidgetsはsamplesがかなり充実しており、多くのサンプルも提供されています。
リポジトリの`samples/minimal`がそれなので、まずはこれを見ておくといいと思います。
特にVisual StudioやXcodeを使って開発をする場合には`minimal_vc14.sln`, `minimal_cocoa.xcodeproj`がとても役にたつと思います。
そして何か機能を使いたいと思った時には、それっぽい名前のサンプルのソースコードを見れば大まかな実装方法が載っているので便利です。

# 基本

- `wxApp`の継承クラス
    - 起動すると`OnInit`、終了すると`OnExit`が呼ばれる
    - ここからウィンドウとかを出す
- `wxTopLevelWindow`の継承クラス
    - いわゆるウィンドウ
    - 最小サンプルは`wxTopLevelWindow`を継承する`wxFrame`を継承したウィンドウを定義してる
    - ダイアログとかもこれを継承してる
- `wxWindow`の継承クラス
    - ボタンとかテキストとかのUI部品
    - ウィンドウの中に表示するもの全般
    - TATEditorのテキストビューはこれを直接継承している

全体的に、上のクラスのインスタンスのイベントに関数を登録して呼び出してもらう感じです。
クラスの定義内で`DECLARE_EVENT_TABLE()`を書いてイベントテーブルを宣言して、

```cpp
class xxxxFrame : public wxFrame
{
public:
    void OnClose(wxCloseEvent &event);
    DECLARE_EVENT_TABLE()
};
BEGIN_EVENT_TABLE(xxxxFrame, wxFrame)
    EVT_CLOSE(TatFrame::OnClose)
END_EVENT_TABLE(xxxxFrame, wxFrame)
```

とか、あるいは

```cpp
class xxxxDialog : public wxDialog
{
public:
    xxxxDialog() : wxDialog(......)
    {
        Connect(wxID_CANCEL, wxEVT_BUTTON, wxCommandEventHandler(xxxxDialog::OnButton), NULL, this);
    }
    void OnButton(wxCommandEvent &event);
};
```

とか。

# おわりに
本当はwxWidgetsの使い方を書くつもりだったのですが、ハマりポイントも少なく、wxWidgets固有の難しい箇所もあまり思いつかなかったので紹介のみになりました。
TATEditorはWindows, Ubuntu, macOSのバイナリをほぼ分離せずに書いていますがそれほど問題にはなっていません。
むしろ分離している場所を列挙すると

- IME APIの実装
    - 一応、共通のAPIを通してやりとりしている
    - ただ、ウィンドウの初期化時にはどうしても細かい書き分けが必要になる
- 文字以外透明なウィンドウ
    - 各ピクセルにアルファ値を持たせるようなクラスが提供されていない
    - 各OSで異なる実装になっている
- `wchar_t`からUTF-16への変換
    - Windowsの`wchar_t`はUTF-16
    - UbuntuやmacOSの`wchar_t`はUTF-32
- フォント名からフォントを取得する部分
    - OSごとに固有の取得方法がある

という感じです。

明日はJavaScriptエンジンであるv8のことを書きます。
IDCFクラウドを使ってさくっと負荷試験

本記事は [IDCF Cloud Advent Calendar 2016](http://qiita.com/advent-calendar/2016/idcfcloud) に参加しています。

初めてQiitaに記事書きました。noriko3 と申します。
モフモフしたもの、特に猫が好きです。赤いリボンした白猫なんかもうかわいくて仕方ないですね。

それは置いといて。

時々仕事で負荷試験っぽいものをしたりするんですが、いちいち環境作ってやるのはめんどくさいしなーとか思ってたら、[ec2-bench](https://github.com/manabusakai/ec2-bench) というものがあるということを知ったのですが、abした結果も欲しいしなぁ、もっと大量にアクセスしたいんじゃあああ！となり、[ec2-ab-bench](https://github.com/noriko3/ec2-ab-bench) というものを作ったんですが、

これって別にどこのクラウドでもよくない？っていうか、AWSはネットワーク料金怖いからIDCFクラウドでやったらちょっと安心出来ないかしら？というわけで、[idcf-ab-bench](https://github.com/noriko3/idcf-ab-bench) というものを作ってみました。

cloudstack-api を叩いて、ssh で ab コマンドを投げるだけといういたってシンプルなものです。

とりあえず使い方なんぞを解説したいと思います。

## まず、cloudstack-api を使えるようにする。

参考: http://docs.idcf.jp/cloud/introduction/
python3系だとエラーが出て色々面倒そうだたったので結局2系使いました。
ここで結構時間とられました。pythonとか随分触ってないので追う気力が(
このスクリプトのために、テンプレートを公開していますので、リージョンは東日本リージョン2を使って下さい。


## idcf-ab-bench.conf を設定する

### サービスオファーリング(service_offering_id)
`cloudstack-api listServiceOfferings -t id,name,displaytext`

好きなのを選んでください。

### テンプレートID(template_id)
`dc91e704-c03d-45c2-8353-4247846de388`
公開テンプレートをご利用ください。
デフォルトのは ab 入ってないし ulimit -n が 1024 だったのでその辺ちょっと手を入れた程度ですが。
`# というか他の人もちゃんと使える・・・よね？！`

### ゾーンID(zone_id)
`e8ebfccb-eb38-43ed-8abf-80b5f37c3aa9`
waber 有効にしてください

### SSHのキー(keypair) 
ここに記載されたキー名でSSHします。
ない場合はポータルから作成してください。
秘密鍵は `$HOME/.ssh/${keypair}` という名前にして 600 で置いてください。

### IPアドレスのID(ipaddress_id)
`cloudstack-api listPublicIpAddresses -t id,ipaddress`

### IPアドレス(ipaddress)
↑で取得したものを記載

### VM作成数(count)
作成するVM数を指定します

### ab -n ココ(request_number) -c ココ(client_number)
はじめは少なめで
10000とか指定したい場合は、スペック高めのタイプにするといいかも


これで多分準備は完了です。


## やってみる

```
norikos-MacBook-Air-3:idcf-ab-bench noriko$ sh idcf-ab-bench.sh http://example.com/asdf
work_dir: /Users/noriko/tmp/idcf-ab/1220-2325

destroy command:
 cloudstack-api destroyVirtualMachine --id a88543fc-0e14-4f61-b03a-7636c24beff4
 cloudstack-api destroyVirtualMachine --id d1b7fcc4-2be5-4f7a-8a53-89b8fd609910
norikos-MacBook-Air-3:idcf-ab-bench noriko$ 
```

削除コマンドを表示していますので、不要でしたらコマンド実行して削除してください。
work_dir の中に ab-数字.log というファイルが作成されていて、そこに ab の実行結果が入っています。

よしなに調理してください。

## いろいろ仕組みとかなんとか

### ssh するポート

1つのIPを使いまわしたかったので(新しいIP取るとお金かかるし)、適当なポートを開けて ssh するようにしてあります。コマンド実行時に UNIXTIME の下4桁とって、VM作成毎に ++ していってるだけなんで、時々かぶるかもしれません。
こまめにVMを完全削除すれば多分大丈夫です。

### VM名

idcf-ab-bench-月日-時分-n

という感じです。1回やるのに1分はかかるんで、被らない想定。
同名で作成出来たらよかったんだけど、これはこれでいいのかな？

### VM1つでだいたい1分使ってる

VM作成して、作成したかどうかのチェックをしないで sleep してます(
ポートフォーワードの設定も同じです。20秒だと時々足らなかったので30秒にしました。
この辺はどうにかしたいというか、VM作成時にネットワークの設定も一緒に出来るといいんですが。



## 感想

結構たくさん作っちゃいました。

![Screen Shot 2016-12-20 at 11.38.15 PM.png](https://qiita-image-store.s3.amazonaws.com/0/155965/fd798506-efae-91bf-cd72-3cedb1864b5d.png)

3時間くらいでスクリプト〜記事まで書いたので結構雑です。ご利用は個人の責任でお願いします。

またなんか思いついたら記事書きたいと思います。それではまたーノ


## 追記

![Screen Shot 2016-12-21 at 7.33.20 PM.png](https://qiita-image-store.s3.amazonaws.com/0/155965/ef233381-dd22-b6a5-ff4b-b304425b3c86.png)

スクリプト書いてあれこれしてかかったお値段は5円でした。公開テンプレートはどうなるんだろう(あとで調べる)
Rubyにおけるsize, length, countの違いについて

配列などの集合インスタンスの要素数を取得する時に `#size` `#length` または `#count`を使っているコードをよく見ます。よく見るが故に、違いがなんなのか気になったので調査・検証してみました。

## 結論
- `#size`, `#length` はレシーバがすでに持っている要素数情報を参照する
- `#count`はEnumerableモジュールで定義されているメソッドで、実際にeach処理を回してカウントした結果を出力している

よって、まとめると **要素数が多いインスタンスで `count` を実行すると遅くなる**

## 解説
### 実際に計測してみた
こんなコードを書いて検証してみた。
100万の要素数を持つ配列を使って、それぞれ100万回繰り返して各メソッドを実行してみました。

``` ruby
require 'benchmark'

num = 1_000_000
a = []
num.times.to_a

Benchmark.bm 10 do |r|
  r.report '#size' do
    num.times do
       a.size
    end
  end

  r.report '#length' do
    num.times do
       a.length
    end
  end

  r.report '#count' do
    num.times do
       a.count
    end
  end
end
```

結果がこのようになりました。

``` bash:1回目
                 user     system      total        real
#size        0.060000   0.000000   0.060000 (  0.066027)
                 user     system      total        real
#length      0.050000   0.000000   0.050000 (  0.054165)
                 user     system      total        real
#count       0.080000   0.000000   0.080000 (  0.080645)
```

``` bash:2回目
                 user     system      total        real
#size        0.050000   0.000000   0.050000 (  0.051824)
                 user     system      total        real
#length      0.050000   0.000000   0.050000 (  0.055952)
                 user     system      total        real
#count       0.070000   0.000000   0.070000 (  0.081042)
```

``` bash:3回目
                 user     system      total        real
#size        0.050000   0.000000   0.050000 (  0.054816)
                 user     system      total        real
#length      0.050000   0.010000   0.060000 (  0.056448)
                 user     system      total        real
#count       0.080000   0.000000   0.080000 (  0.085763)
```

以降、繰り返ししても `#count` が遅いことに変わりはありませんでした。

### なぜ `#count` は遅いのか？
`#size``#length` はレシーバの持っている要素情報を参照しているから早いです。一方で `#count` は `#each` を実行して数え上げているので、前者と比べて余計な処理をしていることになる。なので、時間がかかってしまいます。

### `#count` は使わないほうがよいのか？
いえ、そういうわけではありません。結果をみると、わずかに遅いだけなので致命的な問題になることはあまりないでしょう。また、繰り返し処理を実行しているということが役立つときもあります。例えば、条件に一致した要素だけ数えあげる、といった場合などですね。

``` ruby
a = [1,3,5,7,9,11,13,17,19,23].count { |i| i > 9 }
puts a # 5
```

`#count` はブロック引数を持たせることができるので、このような抽出が可能なのです。
ただし、単純に要素数を参照したいだけであれば `#size`, `#length` を使うのが好ましいですね。
RStudioで入力も出力も記録の出力も、やってみます。

#イントロ

＊この投稿は[RStudio　アドベントカレンダー　2016](http://qiita.com/advent-calendar/2016/rstudio-ide)、21日目の記事です。
アドベントカレンダーは、初めてですが楽しそうですので、投稿させて頂きます。
タイトル、
『RStudioで入力も出力も記録の出力も、やってみます』
各種のパッケージのグラフ作成した時のオプションの記録などにも便利ですよねーってことを書いてみようと思います。
　（私は、非プログラマな初心者で、既に書かれていて重複した内容もあるかと思います。何かあれば、温かい目で見て頂けたら幸いです。）


#概略

![スライド2.jpg](https://qiita-image-store.s3.amazonaws.com/0/22082/2a97176b-94a0-5152-3bee-3c1319a8a237.jpeg)
RMarkdown記法について、さしたる知識がなくとも、htmlやマイクロソフト製品オフィスのワードでの文書作成ができますよ、という話です。　どなたかに、報告する作業でなくとも、自分の作業の記録を残すことであれば、簡単な方法でも出来ました、という報告です。

###なぜ、こんな記事を書いたのか。(概略の補足)
私はMacユーザーなのですが。一時期、TextMateというエディター（WindowsならNotpad++のようなソフトウェア）で、カラーリングされたRのコードを一度開いてプリントアウトをしてノートに貼ったりしていました。
　紆余曲折の後、そんなことをしなくても、Rstudioなら、簡単にコードの記録も出力の記録も出来てしまいました。
　パッケージや技術によっては、`ggplot`などは開発が盛んなせいか、去年まで使えていたコードが使えなくなることもありますが。ある程度の記録が出来ると良いですねってことです。

####下準備・インストール
RStudioのインストール用のpaneより、packages
または、Tools>Install Packages...を利用してRMarkdownやknitをインストールしておきましょう。
![スクリーンショット 2016-12-20 21.52.00.png](https://qiita-image-store.s3.amazonaws.com/0/22082/de8c7540-ecc1-977e-0da2-084c21cf0ddb.png)
![スクリーンショット 2016-12-20 21.52.32.png](https://qiita-image-store.s3.amazonaws.com/0/22082/bd4d3627-850c-8751-3a46-d82eb59af40f.png)


#文書化のやり方
　文書化したいコードをエディターのpane（小窓）で開きます。
　カーソルを動かして、選択しておきます。
　
　File > Knit Document または、Compile Report... をクリック。
　スクリーンショットです。
![スクリーンショット 2016-12-20 22.06.53.png](https://qiita-image-store.s3.amazonaws.com/0/22082/21bb7023-75f2-58da-16e9-4c9f5df6b0f9.png)

その後で、html, pdf, MS Wordと選べるのですが、自分のノートや作業記録にはhtmlかMS wordで充分に利用に耐えうるかと思います。

（操作としては。GUIの操作以外にも。他にも、幾つか方法があるようです。 ショートカットキー　cmd + shift + K。エディターpane のsource の左隣から本のアイコンをクリック）

　なお、pdf化はTex(Latex、MacならMacTex)というソフトウェアのインストールが必要だったりで、初心者にはハードルが高いようです。

　
#どんな文書が出来るのか。

　●　console画面（pane）に出力される結果とコードが一緒の文書としてアウトプットされます。ワーキングディレクトリ、作業しているフォルダ内にhtmlのファイルなどが出来ます。
　　
##html化の一例
手前味噌ですが、私の[以前に書いた記事(相関図)](http://qiita.com/ryotenabe/items/a35ffdae762254367b82)より、ggplotを使ったグラフの結果をリポートします。
私が[以前に書いた記事](http://qiita.com/ryotenabe/items/a35ffdae762254367b82)の一部を日本語化して、html化したもののスクリーンショットです。
（なお、pdfへ出力する内容でしたから、pdf化とdev.off()というおまじないの二つの行は#でコメントアウトしております。)
ファイルの名前やパソコンでのユーザー名、出力日時が自動で挿入されております。ファイルの名前が一番大きい字になってます。


![スクリーンショット 2016-12-20 23.15.01.png](https://qiita-image-store.s3.amazonaws.com/0/22082/fcd43992-27e1-a0a6-c6d9-0c6434c95940.png)
(...略‥.)
![2016-1 2-20 23.00.11_2.png](https://qiita-image-store.s3.amazonaws.com/0/22082/7d362498-29e5-509a-72ba-36bd6029d887.png)

こんな出来上がりでした。
結論を言うと、Macの`HirakakuProN-W3`の指定を使えば、日本語の文字も、`ggplot`を組み込んだhtml文書に入りました。
MS wordへも同じように出来ると思います。

##この他にも。
`base` の`plot`関数の結果はもちろん、`summary`関数の集計結果なんかも出ます。
ということで。
コンソール画面で出力されうる結果は、knit, rmarkdownがよろしく対応してくれるようですね。
`ggvis`や`VennDiagram`のようなグラフ作成`library`もhtml出力は出来ました。（ggvisは、htmlだけでした。（static/静的なHTMLなので、スライダーとはつかない状態でした）MS wordでの出力は出来なかったです）

#RstudioのCompile Report...機能はコードと出力の両方を一体化して記録をするのに、便利ですね。
以上、偏った内容だったかもですが、RstudioのCompile Report...を使うことで、便利にRを利用できそうです。
Servletの中で@Autowiredを利用したい


Webアプリケーション構築にあたっては原則として「単一言語/単一フレームワーク」であるべきだとは思いますが、現実としてそれが許されない場合もあります。なかでも業務システムの開発などにかかわっていると、つぎはぎのような開発を強いられることもある――と聞いています(血涙)

その延長としてSpringで作られたクラスをServletで利用する、つまり__Servlet内で`@Autowired`せねばならない__ということがありました。簡単にできると思いきや、かなりはまったので、メモとしてサンプルを示しておきます。

```java
@WebServlet("/hoge")
public class HogeServlet extends HttpServlet {
	
    @Autowired private HogeService hogeService;
    
	@Override
	protected void init(ServletConfig config) throws ServletException {
		super.init(config);
		SpringBeanAutowiringSupport.processInjectionBasedOnServletContext(this, config.getServletContext());
	}
    
    @Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException {
		hogeService.doSomething();
	}
}
```

「各種Beanの生成や消滅をSpringに任せる」というのがSpringの原則であり、`@Autowired`はその典型といえます。逆にいえば__Springの外にいるServletの中で`@Autowried`を利用するにはそのServletをSpringのライフサイクルの中に組み込んでやる必要があり、具体的にはオーバライドした`init`メソッドにおいてその設定を行っています。__
ブログのインフラ周りのお話

2016年初め、私は、[自分だけのブログ](http://wkwkrnht.gegahost.net)を開設しました。自己満足のためです。その時から、少しずつインフラの方で変化があったので、書き残しておきたいと思います。
##開設当初
| 名前 | 使用サービス |
|:-:|:-:|
| メインのサーバー | gegahost.netの無料プラン |
| 死活監視 | automatic提供のjetpack for wordpressの機能 |
| プッシュ通知 | なし |
この時は、まだプッシュ通知を導入していませんでした。
##プッシュ通知導入後
そのブームに乗り、Onesignalというプッシュ通知サービスを導入しました。登録している人、私以外にいらっしゃるのかな……。

| 名前 | 使用サービス |
|:-:|:-:|
| メインのサーバー | gegahost.netの無料プラン |
| 死活監視 | automatic提供のjetpack for wordpressの機能 |
| プッシュ通知 | Onesignal |
この体制がしばらく続きます。
##jetpack for wordpress廃止後しばらく
| 名前 | 使用サービス |
|:-:|:-:|
| メインのサーバー | gegahost.netの無料プラン |
| 死活監視 | モニタリング・プラス |
| プッシュ通知 | Onesignal |
jetpack for wordpress内の機能を、ほとんど使わなくなっていたので、とうとう廃止してしまいました。そこで、代替として、無料で使える、モニタリング・プラスを導入しました。このサービスは、シンプルで、通知も即座にメールで来るという形でした。HTTP系プロトコルとSSL、ドメインは監視できたはずです。
##OnesignalからPush7へ
| 名前 | 使用サービス |
|:-:|:-:|
| メインのサーバー | gegahost.netの無料プラン |
| 死活監視 | モニタリング・プラス |
| プッシュ通知 | Push7 |
Onesignalも非常にいいサービスではあるのですが、なにせ登録画面に直リンができません。それが、私の思い描いているブログデザインと合わなかったので、Push7に乗り換えました。結局高頻度でブログを書くこともないので、制限に引っかからなくて済んでいます。
##モニタリング・プラスも解雇
| 名前 | 使用サービス |
|:-:|:-:|
| メインのサーバー | gegahost.netの無料プラン |
| 死活監視 | StatusCake |
| プッシュ通知 | Push7 |
あるときを境に、モニタリング・プラスからアラートメールが頻繁に届く事態に陥ってしまいした。ただし、通常アクセスで問題は見受けられず。そういう感じだったので、思い切ってStatusCakeに移行してみました。Slackへアラートが、週次報告がメールで届くようにしました。これで、多い日も安心です。また、ダッシュボードも見やすくなったので、移行して正解かなと思っています。
TeX Live, W32TeX のセキュリティ上の問題とその対策

# 問題点

[TeXWiki](https://texwiki.texjp.org/) のトップページにて，

> 【重要】2016/11/30より前の TeX Live と W32TeX において TeX 実行時に任意の外部コマンドが実行できてしまうセキュリティ上の問題が発覚しました． **可能な場合は，速やかに TeX Live のアップデートを実行してください．** この問題についての詳細は[こちら](https://texwiki.texjp.org/?%E5%A4%96%E9%83%A8%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E5%AE%9F%E8%A1%8C#security)を参照してください．

また，リンク先のページにて

>  **このセキュリティホールはかなり危険なものなので，可能な限り速やかにアップデートを実行するようにしてください．**

とのことでした．関連するウェブページより詳細を一度確認されるといいかと思います．

# 解決策

> この問題を回避するため，2016/11/30 以降の TeX Live および W32TeX では，「texmf.cnf ファイルの shell_escape_commands のリストから mpost (, pmpost, upmpost) を外す」という対策が施されています． したがって，TeX Live（MacTeX, BasicTeX も含む）や W32TeX を 2016/11/30 以降のものに更新することによってこの問題を解決することが可能です（TeX Live のアップデート方法は [tlmgr](https://texwiki.texjp.org/?tlmgr#update) の項を参照してください）．

ということで，TeX Live や W32TeX を最新のものにアップデートすることで解決するそうです．


## TeX Live の場合
私は複数の端末すべてで TeX Live で TeX 環境を構築していたので，tlmgr によりアップデートすればよいということでした．

###  Windows の場合
コマンドプロンプトで
```
tlmgr update --self --all
```
を実行．

###  macOS, Linux の場合
ターミナル，端末で
```
sudo tlmgr update --self --all
```
を実行．
Todo.lyのToDoがすこし進んできた。

ToDoがすこし進んできた。Todo.lyをジャンル分けして表示し、ジャンルをタイトルとして先頭に表示し、タイトルを左右にスワイプすると、別のジャンルを表示できるようになった。
項目を詳細表示できたりもする。
細かいところを詰めれば、もうちょっとで「そこそこ」になりそう。
Swift Evolution の Commonly Proposed がすごい勉強になる

Swift ユーザーの皆様ならすでにご存知かもしれませんが、Swift Evolution の Commonly Proposed という文書がすごい勉強になりました。

https://github.com/apple/swift-evolution/blob/master/commonly_proposed.md

**この文書に書かれていることは、頻繁にリクエストされた機能をなぜ採用しなかったのかという理由です**。例えば、「_`Array<T>` に添字でアクセスすると、`T?` や `T!` ではなく `T` が返ってくるのイケてなくね？_」という質問に対して、「_それやると遅くなるし、そもそもロジックエラーだから_」と理由を説明しています:

> Make Array<T> subscript access return T? or T! instead of T: The current array behavior is intentional, as it accurately reflects the fact that out-of-bounds array access is a logic error. Changing the current behavior would slow Array accesses to an unacceptable degree. This topic has come up multiple times before but is very unlikely to be accepted.

他にも、「_`{}`構文を Python みたいなインデントの記法へ変えようぜ_」という質問に対して、「_それ宗教だから変えません_」というバッサリとした回答が書かれています:

> Replace {} brace syntax with Python-style indentation: Surely a polarizing issue, but Swift will not change to use indentation for scoping instead of curly braces.

他にも、「`A` または `B` の型を意味する `A | B` みたいなの」を導入しないと決めていることなど、興味深い内容が多く書かれています。このように、おもしろコンテンツがたくさん詰まっているので、ぜひ見てみてはいかがでしょうか？
Rubyiestのカノジョできる予定のエンジニアからカノジョできてるエンジニアになる

これは [カノジョできてるエンジニア Advent Calendar 2016](http://qiita.com/advent-calendar/2016/yes-girlfriend) の20日目の記事です！

といっても僕、カノジョができる予定で登録しました！！
必ず出来ると思っていましたので。

ふふふ、さてお待ちかねの結果です。


## 何をしたのか

全身 `ikka` のコーディネイトを行って、仲のいい女性の友人に告白をしました。


その結果は……


**ダメでした。**

相手に好きな人が別にいたのです。

そうなんだ……。じゃぁどうして僕と一緒に二人で旅行に行ってくれたんですか……。


## 何をしたかったのか

`Ruby` 書ける彼女が欲しかった。

`Rubyist` にしかできないピロートークとかしてみたかった。

**俺の `Fixnum` が `Bignum Class` になっちゃうぜ、とか言いたかった。**
**俺と彼女の `between?` が `true` になるよおお！！！　とか言いたかった。**
**俺の `String` が `upcase!` でとか言いたかった。**

## どうすべきだったのか

きっと私がゲーム実況を見ていた時間の半分でも外に出て
自分磨きを行っていれば良かったのです。

そうすればこのような生き恥をさらすこともなかったのだと痛感しております。

## 次どうするのか

来年はまず家事代行サービスをお願いしようかと思います。



明日は [mdstoy](http://qiita.com/mdstoy) さんが彼女が絶対に出来る方法を投稿してくださる予定です。

勉強させて頂きます。
[Swifty]Self要件

<p>本件、プロジェクトの構成の違いから、最後はグダグダになってしまったので、一通り巡ったということで、その中で気になったことを調べてみることにする。</p>

<p>プロトコルでSelfを返すように変更したが、何となく意味は分かるのだが、何なんだろう。The Swift Programming Languageを読み返してみたが、それらしい記述がない。検索したところ、おそらく、WWDCの発表からだろうか。Self要件と説明しているサイトを見つけた。</p>

<pre><code>protocol DataType {
    var numberOfItems: Int {get}
    func addNewItemAtIndex(index: Int) -> Self
    func deleteItemAtIndex(index: Int) -> Self
    func moveItem(fromIndex: Int, toIndex: Int) -> Self
}
</code></pre>

<p>このプロトコルを適用したクラスの型として扱われるということのようだ。</p>

<p>ただ、これはプロトコルでのみ許されているようで、適用したクラスでは、そのクラスで宣言しないとエラーとなった。</p>

<pre><code>struct Hand: DataType {
    public var numberOfItems: Int {
        return cards.count
    }
    
    public func addNewItem(at index: Int) -> Hand {
        return insertCard(card: deck.nextCard(), at: index)
    }
    
    private func insertCard(card: Card, at index: Int) -> Hand {
        var mutableCards = cards
        mutableCards.insert(card, at: index)
        return Hand(deck: deck, cards: mutableCards)
    }
    
    public func deleteItem(at index: Int) -> Hand {
        var mutableCards = cards
        mutableCards.remove(at: index)
        return Hand(deck: deck, cards: mutableCards)
    }
    
    public func moveItem(fromIndex: Int, toIndex: Int) -> Hand {
        return deleteItem(at: fromIndex).insertCard(card: cards[fromIndex], at: toIndex)
    }
}
</code></pre>

<p>Self要件によって、プロトコルは、総称型のように、適用した型を抽象的に記述できるということのようだ。</p>

ソースコード
GitHubからどうぞ。<br />
<a href="https://github.com/murakami/workbook/tree/master/ios/Hand">https://github.com/murakami/workbook/tree/master/ios/Hand</a> - GitHub<br />

関連情報
<a href="https://realm.io/jp/news/tryswift-daniel-steinberg-blending-cultures/">文化を調和させる</a><br />

【Cocoa練習帳】
<a href="http://www.bitz.co.jp/weblog/">http://www.bitz.co.jp/weblog/</a><br />
<a href="http://ameblo.jp/bitz/">http://ameblo.jp/bitz/</a>（ミラー・サイト）<br />
<a href="https://t.co/6P3h2jtbRk</a>note<br />
.NETCoreで.exeファイルを書く


[Macで.NETのプログラムを書いてみる](http://qiita.com/fukuit/items/b2adbe4c89e036bb6f12)の続き。

# .NETCoreのコードはportable？
.NETCoreで書いたコードは、ちゃんと確認してないんだけれど、WindowsでもMacでも、```dotnet run```すれば動くんだと思う。Javaのbyte code がportableであるように。

project.jsonにもそう書いてある。

	"version": "1.0.0-*",
	  "buildOptions": {
	    "debugType": "portable",
	    "emitEntryPoint": true
	  },

# もしものすごく便利なアプリを書いたらどうする？
例えば、万人にとって便利なアプリを.NETCoreのフレームワークを使って書いたとして、ソレを配布するにはどうする？「まず、.NETCoreをインストールしてください」とは言いにくい。
Javaで言えば、Javaのアプリを使う人全員がjavaのSDKをインストールするワケじゃない。Windowsで言えば、.exeを作りたい。

方法はないだろうか？と思ったら、そういうドキュメントがあった。
[.NET Core Application Deployment](https://docs.microsoft.com/en-us/dotnet/articles/core/deploying/)

### project.jsonを編集する。

まず、```"type": "platform",```の行を消して、以下の項目を追加する。

	"runtimes": {
		"osx.10.12-x64": { }
	}

というワケで、修正したproject.jsonはこんな感じ。

	{
	  "version": "1.0.0-*",
	  "buildOptions": {
	    "debugType": "portable",
	    "emitEntryPoint": true
	  },
	  "dependencies": {},
	  "frameworks": {
	    "netcoreapp1.1": {
	      "dependencies": {
	        "Microsoft.NETCore.App": {
	          "version": "1.1.0"
	        }
	      },
	      "imports": "dnxcore50"
	    }
	  },
	  "runtimes":{
	    "osx.10.12-x64": { }
	  }
	}

### restore と build と publish
後は、```dotnet restore```して、```dotnet build```して、```dotnet publish```する。
```dotnet restore```には、そこそこ時間がかかる。

```dotnet run```ではなく、コマンドとして起動できるようになった。んだけれど、ちょっと釈然としない。

	% ./bin/Debug/netcoreapp1.1/osx.10.12-x64/hello
	Hello world.

ちなみに、これを実行するためのランタイムだと思うんだけれど、122 個もの.dllファイルができていた。別のマシンにコピーする時は、これまるごとコピーするんですかね。

Windowsでいう.exeができるのを期待してたんだけどな。
【Sinatra】Ajaxでサーバーへpost送信し戻り値(JSON)を受け取って表示

Sinatraにて、Ajaxでサーバーへデータをpost送信し戻り値(JSON)をJavaScriptで受け取って表示するやり方です。
##本体
```main.rb
require 'sinatra'
require 'sinatra/reloader'
require 'json'

get '/' do
  erb :index
end

post '/post' do
  #ここで入力データを処理する
  foo = params[:foo]
  bar = params[:bar]
  data = {
    "foo" => foo,
    "bar" => bar
  }
  content_type :json
  @data = data.to_json  
end
```

##ビュー
```public/index.erb
<body>
  <!--データ入力フォーム-->
  <input type="text" id="foo">
  <input type="text" id="bar">
  <input id="submit" type="button" value="submit">
  <p id="result"></p>
  
  <!--jQuery召喚-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
  
  <!--submitボタンをおすと以下のAjax通信-->
  <script type="text/javascript">
    $(function(){
      $("#submit").click(function(){
        var foo = $("#foo").val();
        var bar = $("#bar").val();
        $.ajax({
          type: "POST",
          url: "/post",
          dataType: "text", //dataTypeをちゃんと指定する
          data: {
            foo: foo,
            bar: bar
          },
        //以下、コールバック関数で戻り値を受け取り、id="result"に表示
        success: function(json) {
        dataType: "json",  //dataTypeをちゃんと指定する
        $('#result').append(json);
        },
        error: function() {
        $('#result').append('error');
        }
        });
      });
    });
  </script>
</body>
```
##結果
####before
![before](https://qiita-image-store.s3.amazonaws.com/0/155786/09b4eb05-59ff-d752-8bfe-f47acf16f20d.png)

####[submit]をおすと
![submit](https://qiita-image-store.s3.amazonaws.com/0/155786/cb9478be-3b75-231f-004e-4dde51655254.png)

###できた！
PHPMyAdminインストール（CentOS6.8 yum）

## PHPMyAdminをCentOSへインストールする

yumが楽だったのでyumでインストールします。
Apache2.2系です。

### インストール

```
yum --enablerepo=epel install -y  phpMyAdmin
```

うにょうにょとPHPやら何やら一緒にインストールされます。

### httpdのconfigファイルを修正

インストールすると、/etc/httpd/conf.d/phpMyAdmin.conf
というファイルが作成されています。
これに必ずIP制限を書き込みましょう。

```
# phpMyAdmin - Web based MySQL browser written in php
#
# Allows only localhost by default
#
# But allowing phpMyAdmin to anyone other than localhost should be considered
# dangerous unless properly secured by SSL

Alias /phpMyAdmin /usr/share/phpMyAdmin
Alias /phpmyadmin /usr/share/phpMyAdmin

<Directory /usr/share/phpMyAdmin/>
   AddDefaultCharset UTF-8

   <IfModule mod_authz_core.c>
     # Apache 2.4
     <RequireAny>
       Require ip 127.0.0.1
       Require ip ::1
     </RequireAny>
   </IfModule>
   <IfModule !mod_authz_core.c>
     # Apache 2.2
     Order Deny,Allow
     Deny from All
     Allow from 127.0.0.1
     Allow from ::1
     Allow from 111.222.333.444  # ここを追加

   </IfModule>
</Directory>

<Directory /usr/share/phpMyAdmin/setup/>
   <IfModule mod_authz_core.c>
     # Apache 2.4
     <RequireAny>
       Require ip 127.0.0.1
       Require ip ::1
     </RequireAny>
   </IfModule>
   <IfModule !mod_authz_core.c>
     # Apache 2.2
     Order Deny,Allow
     Deny from All
     Allow from 127.0.0.1
     Allow from ::1
     Allow from 111.222.333.444  # ここを追加。
   </IfModule>
</Directory>

# These directories do not require access over HTTP - taken from the original
# phpMyAdmin upstream tarball
#
<Directory /usr/share/phpMyAdmin/libraries/>
    Order Deny,Allow
    Deny from All
    Allow from None
</Directory>

<Directory /usr/share/phpMyAdmin/setup/lib/>
    Order Deny,Allow
    Deny from All
    Allow from None
</Directory>

<Directory /usr/share/phpMyAdmin/setup/frames/>
    Order Deny,Allow
    Deny from All
    Allow from None
</Directory>

# This configuration prevents mod_security at phpMyAdmin directories from
# filtering SQL etc.  This may break your mod_security implementation.
#
#<IfModule mod_security.c>
#    <Directory /usr/share/phpMyAdmin/>
#        SecRuleInheritance Off
#    </Directory>
#</IfModule>
```

### DB接続情報を編集

DBが別のサーバにある場合は
/etc/phpMyAdmin/config.inc.php
を編集します。
ローカル環境にDBがある場合は必要ありません。

```
$cfg['Servers'][$i]['host']          = '111.222.333.111'; // MySQL hostname or IP address
```
あとは、Apacheの設定を再読込しましょう。

```
/etc/init.d/httpd configtest
/etc/init.d/httpd graceful
```

### アクセスする

URLは、

```
http://111.222.333.444/phpMyAdmin/
```

のような、インストールしたサーバのIP/phpMyAdmin/となります。
実際に使う際は、phpMyAdmin.conf のalias設定でURLを変更するのがいいでしょう。
BigQuery Standard SQLで棒グラフを書いてみる	


指定した数値の数の`*`を返す関数を作ってみました。
この関数を使うことで、BigQueryのweb UIで簡単なデータの可視化を行うこともできます。

```sql
#standardSQL
CREATE TEMPORARY FUNCTION BAR_GRAPH(val INT64, char STRING)
RETURNS STRING AS ((
  SELECT ARRAY_TO_STRING(ARRAY(SELECT char FROM UNNEST(GENERATE_ARRAY(1, val))), '')
));

SELECT x, BAR_GRAPH(x, '*') FROM UNNEST([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) AS x ORDER BY x ASC
```
CakePHP3新機能 View Cell の利用手順

# 公式ドキュメント
_http://book.cakephp.org/3.0/ja/views/cells.html_

# 利用手順

## 1. bakeを実行
プロジェクトルートで以下のコマンドを実行すると、必要なファイルが生成されます。

```bash
bin/cake bake cell hoge
```

テストコードも生成してくれるので、きちんと活用していきましょう。

```bash
[root@vagrant-centos65 test-project]# bin/cake bake cell hoge
Welcome to CakePHP v3.3.6 Console
---------------------------------------------------------------
App : src
Path: /var/www/test-project/src/
PHP : 7.0.11
---------------------------------------------------------------

Creating file /var/www/test-project/src/Template/Cell/Hoge/display.ctp
Wrote `/var/www/test-project/src/Template/Cell/Hoge/display.ctp`

Creating file /var/www/test-project/src/View/Cell/HogeCell.php
Wrote `/var/www/test-project/src/View/Cell/HogeCell.php`

Baking test case for App\View\Cell\HogeCell ...

Creating file /var/www/test-project/tests/TestCase/View/Cell/HogeCellTest.php
Wrote `/var/www/test-project/tests/TestCase/View/Cell/HogeCellTest.php`
```

## 2. TemplateにCellの呼び出しコードを配置
TemplateにCellを配置しましょう。
あとは表示したい内容に合わせて編集していくだけです。

```php:Template/Pages/home.ctp
<?= $this->cell('Hoge')->render() ?>
```

## 3. View\Cellの編集
View\Cell以下に以下のようなクラスが生成されているので、Controllerと同じ感覚で編集します。
$_validCellOptionsについては、[補足資料](http://qiita.com/morisuke/items/068d798d1c12af809e0a#%E8%A3%9C%E8%B6%B3%E8%B3%87%E6%96%99-cell%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AE%E8%A9%B3%E7%B4%B0)を参照してください。

Cellを呼び出す際はdisplayメソッドが呼び出されます。
公式ドキュメントにはdisplayメソッド以外を呼び出す方法も記述されていますが、
ただでさえMVCからMVCを呼ぶという複雑なことをしているので、避けたほうが無難でしょう。

```php
<?php
namespace App\View\Cell;

use Cake\View\Cell;

/**
 * Hoge cell
 */
class HogeCell extends Cell
{

    /**
     * List of valid options that can be passed into this
     * cell's constructor.
     *
     * @var array
     */
    protected $_validCellOptions = [];

    /**
     * Default display method.
     *
     * @return void
     */
    public function display()
    {
        // loadModelも使える
        $hoge_entity= $this->loadModel('Hoges')->get(1);
        
        // controller同様、setメソッドで登録する
        $this->set('hoge_entity', $hoge_entity);
    }
}
```

## 4. Template\Cellの編集
bakeを叩いた直後の状態では、Template\Cellにdisplay.ctpが格納されています。
こちらを通常のTemplateと同様に編集していきます。

```php:Template\Cell\display.ctp
<div><?= $hoge_entity->id ?></div>
```

```html:result
<div>1</div>
```

## 補足資料. Cellメソッドの詳細
__http://qiita.com/morisuke/items/c7b8fda6588108a55f3f__
Angular2のIE対応

# Angular2のIE対応

## IEでは下記2点が動作しないです。
1. アニメーションが動作しません。
2. バリデーション周りが動作しません。

## 対処方法
下記2点のJSを読み込ませれば対応完了となります。

```html:index.html
<script src="node_modules/systemjs/dist/system-polyfills.src.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
```

```json:package.json
"dependencies": {
  "web-animations-js": "2.2.1"
}
```

## サンプルコード
https://github.com/MakotoTaniguchi/Sample_Angular2/commit/d78d678444928fe8e4233a17466dfc774af47e94
Python3.4以降標準のpip

# Python3.4以降ではpipが標準でついてる
この意味を```pip install hoge```がいきなり叩けるという意味だと思っていた。。。

本当は```python -m pip install fuga```とかできるということだった。

普通に考えたら当たり前で、python入れただけでパスも切ってないしね。。。
もちろん、```freeze```でもなんでも使える。
カレントブランチを調べることなくgit push origin hogeを一発で行えるaliasを作成した

<font color="Red">フィードバックをいただくまで知らなかったのですが、以下で説明する設定などはgit push origin HEADコマンドで済む内容となっております。(参考: [まだ git push origin するときに current branch 名を入力して消耗しているの?](http://qiita.com/mabots/items/76d48aa33720287253bf))</font>



gitを使っていると、`git push origin hoge`というコマンドをよく使うと思います。
この`hoge`に当たる部分は現在のブランチ名である場合がほとんどだと思いますが、`git branch`で確認したり、ブランチ名をコピペしたり若干面倒です。
なので、現在のブランチ名を調べることなくカレントブランチをpushするエイリアスを作成しました。
以下が設定ファイルの抜粋です。(git push originの略でgpoでエイリアスを作成してあります)

```zsh:.zshrc
function _git-push-current-branch() {
  current_branch=`git rev-parse --abbrev-ref HEAD 2> /dev/null`
  git push origin ${current_branch}
}
alias gpo="_git-push-current-branch"
```

`git rev-parse --abbrev-ref HEAD 2> /dev/null`の部分は現在のブランチ名を取得するコマンドです。

初めは単純に以下のようにエイリアスを作成していました。

```
alias gpo="git push origin `git rev-parse --abbrev-ref HEAD 2> /dev/null`"
```
ただ上記の場合、カレントブランチが動的に取得できないため、ブランチをチェックアウトした場合にうまく動作しませんでした。ですので、冒頭で説明したようなファンクションを呼び出すという形にしました。

これで、今までよく実行したであろう

```
$ git branch 
* hoge
master
$ git push origin hoge
```
というコマンドが

```
$ gpo
```
一発で済むようになりました。

**参考**
[gitでカレントブランチをpushする](http://qiita.com/tkengo/items/5bae50fb7531d5a6bbcf)
[alias で 引数を動的に指定するためのやり方](http://isann.hatenablog.com/entry/2013/05/21/122404)
CakePHP3新機能 Cellメソッドの引数について

# Cellメソッド
引数は3つ。
最後のオプションについては```View\Cell::$_validCellOptions```による特殊なコントロールが可能。

```php:Template/xxx/index.ctp
<?= $this->cell(string $cell_name, array $data, array $options)->render() ?>
```
## 第一引数
呼び出したいCellの名前

```php
<?= $this->cell('Hoge')->render() ?>
```

## 第二引数
Cellに渡したいデータ群。
HogeCell::displayの引数として配列への指定順に渡される。

```php:Template
<?= $this->cell('Hoge', ['aaa', 'bbb', 'ccc'])->render() ?>
```

```php:View\Cell
class HogeCell extends Cell
{
     public function display($aaa, $bbb, $ccc) {}
}
```

## 第三引数
Cellに渡したいオプション。
```View\Cell::$_validCellOptions``` によって渡せるオプションを制御できる。

```php:Template
<?= $this->cell('Hoge', [], ['xxx' => 1, 'yyy' => 2])->render() ?>
```

オプションは$thisからプロパティとして呼び出せる。

```php:View\Cell
class HogeCell extends Cell
{
     protected $_validCellOptions = ['xxx'];

     public function display()
     {
         echo $this->xxx;
         echo $this->yyy;
     }
}
```

```$_validCellOptions``` においてxxxのみが許可されているため、$this->yyyは呼び出せない。

```text:result
1
Notice (8): Undefined property: App\View\Cell\HogeCell::$yyy[APP/View/Cell/HogeCell.php, line 28]
```
Linuxで外部ストレージの自動マウント@2018

### ネットワークドライブのマウント方法
---
#### まえがき
[最新版](https://red-full-moon.com/automount-to-nas-on-linux/)を用意しましたので、よければリンク先ものぞいてみてください。


Linuxでログインしたときに、いちいちマウントコマンドを打つのも面倒なので、
指定のユーザーがログインした時に自動でマウントされるようにする。

---
#### マウント方法
- マウント自体は以下のシェルスクリプトを実行
	- シェルスクリプトである必要はない

```sh:mount_foo.sh
#!/bin/sh
sudo mount -o username=who,password=hogehoge //192.168.xxx.xxx/home /mnt/foo
```

---
#### 自動化
- ~~上記のシェルスクリプトがログイン時に有効になるように、以下のディレクトリに格納~~
	- ~~/etc/profile.d/~~
- 上記に置いただけではダメだったので、`.bash_profile`に以下を記載
	- `sh /etc/profile.d/mount_foo.sh`
	- shファイルの場所はどこでも大丈夫です

---
#### アンマウント方法
- `umount /mnt/foo`

---
#### シンボリックリンク
最後にせっかくなので、ホームディレクトリにシンボリックを作るともっと便利になる。
(/mntにマウントしなければいいだけなんですが…)

- 作成
	- `ln -s /mnt/foo foobar`
	- シンボリックリンクの名前の最後に「/」をつけるとエラーになる
- 解除
	- `unlink bar`
	- こちらもシンボリックリンクの最後に「/」をつけるとエラーになるので注意


以上です。

ブログ始めました、よかったら遊びに来てください
https://red-full-moon.com/
Milkcocoaでミルクココアの飲み頃を教えてくれる何かを作ってみたい

この記事は[Milkcocoa Advent Calendar 2016](http://qiita.com/advent-calendar/2016/milkcocoa)の20日目の記事です。

昨日は[gonshi_com](http://qiita.com/gonshi_com)さんの、milkcocoaで作る[リアルタイムオセロ](http://qiita.com/gonshi_com/items/c499eb9a03642f7a316d)でした。

「ターン制を排除したオセロ」ってなんだと思いながらコンピュータ相手でためしてみました。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/f0c12039-d657-d548-5bb8-b853194554c2.png)
圧勝しましたよｗ
（たまたま相手が打てないような局面に持ち込めたので、あとは主導権を握って追い込むことができました。）

こういう新感覚の対戦ゲームがMilkcocoaで作れてしまうんですね、素晴らしい。

#はじめに

実は、Milkcocoaは前から知っていたのですが、実際に試してみるのは初めての超初心者です。

ということで、Milkcocoaと聞けばおそらく最初に思いつくのはこのミルクココアだと思います。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/b80b8aa3-bb24-b1ba-5695-39e519fcf206.png)

やはり最初に扱う素材はこれだと決め、何をしようか少し考えました。

そして出した答えが、**「ミルクココアの飲み頃を教えてくれる」**というお題です。

＃　ありがちな発想なので、既にやっている人もいるかもしれませんが。。。

#システム案

このお題を実現するためのシステム案は以下になります。

![image](https://qiita-image-store.s3.amazonaws.com/0/51272/ef5dae62-13e6-0f96-c5f3-c659966ea418.png)


### 1. 温度測定
温度センサーとしてお手軽な[TMP102](https://www.switch-science.com/catalog/1474/)をRaspberry piに接続して値を取り、Node.jsでMilkcocoaにデータをアップしてみようと思います。
（念のため、[LM35DZ](https://www.switch-science.com/catalog/2508/)という温度センサーICも用意しておきました。）

TMP102はI2Cを使って簡単に値を取得することができます。

- [Raspberry pi 2から、mobile backendに温度データをアップする（TMP102版）](http://qiita.com/lutecia16v/items/63cc34e97d12c66c2080)


温度センサーは、１００円均一で買ってきたコルクコースターを何枚か重ねてその中に埋め込みます。
![image](https://qiita-image-store.s3.amazonaws.com/0/51272/5ef66c85-6264-6238-db57-94d26210d068.png)

この温度センサー入りコースターの上にミルクココアを入れたカップを置いて、ミルクココアの（カップの）温度を測定し、Milkcocoaにsend()します。

### 2. 温度監視

PCブラウザから、on()で温度の情報を監視します。

最初は、飲み頃が何度であるかわかりませんので、ミルクココアを飲みながら、ここだ！というときにボタンを押して、現在の情報をMilkcocoaに保存（push）して記録します。

次回からは、記録した値をブラウザ起動時に取得(get)して、ミルクココアの温度情報を監視(on)し、適温になったらダイアログでその旨を知らせます。


さて、上手くいくでしょうか。


#そして実装へ、、、

さて、実装なんですが、<font color="Red">**これに使用しようと思っていた温度センサーが故障してしまいました。。。**</font>

ということでただいま注文中です。

到着後、実装して続きを記載いたします。なんとかクリスマスまでには記載しようと思います。m(_ _)m

#まとめ

ということで、まだ未実装なため未来予想図ですが、簡単に「ミルクココアの飲み頃を教えてくれる何か」が作れると思います！
CakePHP3で楽なマイグレーション

# CakePHP3 マイグレーションの基本

CakePHP3でマイグレーションの流れは以下の通り。
よくある記事では、DBAがやるべき作業なのか、開発者がやるべきなのか
曖昧に書いて有ることが多いのでそこをはっきりさせて書いていきます。

## DBAのお仕事

### 1.DB、テーブルを作る。

兎にも角にもDB、テーブルを用意しましょう。
普通に作って大丈夫です。

### 2.一発目のマイグレーションファイル作成

一発目のマイグレーションは、このコマンドで作りましょう。
CakePHP3本家のドキュメントURLはこちら。
http://book.cakephp.org/3.0/ja/migrations.html#id14

```
bin/cake bake migration_snapshot Initial
```

はい、これで、Config/Migration/ にYYYYMMDDHHMMSS_Initial.phpというファイルが
出来ました。DBAの最初のお仕事はここまで。
gitにpushするなり何なりして共有しましょう。

### 3.テーブル定義を変更したらやること

テーブル定義を変更したら、マイグレーションファイルを作りましょう。
以下のコマンドで、今のDB状態と直前のマイグレーションを行った際のDBの状態を
比較して差分のマイグレーションファイルを作成できます。
（正確にいうと、DBとconfig/Migrations/schema-dump-default.lock の差分になります）

```
bin/cake bake migration_diff add_hogehoge_fugafuga
```
※add_hogehoge_fugafuga は任意の文字列。ファイル名になるので分かりやすい名前を。

これで、テーブル定義を変更した内容で、マイグレーションファイルを作成出来ました。


## DBを使いたい人がやること（プログラマ等）

### 1.テーブルをまだ何も作っていない場合

先ほどDBAが作ったマイグレーションファイルよりテーブルを作成出来ます。

```
bin/cake migrations migrate
```

これ以降、DBAがマイグレーションファイルを作る度に、このコマンドを行うことで
テーブル情報を同期し続けることが出来ます。

### 2.既にテーブルがあって、DBAと同じ状態の場合

既にテーブルがあって、DBAと同じ場合は、
「マイグレーションはしていないけれどDBAと同じ状態」になっているので
「ここまでマイグレーションしたんだよ！信じてくれよ！」とCakeを騙すことが出来ます。
そのコマンドがこちら。

```
bin/cake migrations mark_migrated
```

これで、「今のDBの状態はマイグレーションを全て反映した状態である」という
状態を作り出せます。
正確には、「phinxlog」というテーブルが作成され、その中にマイグレーションした
ログが作成されます。


### 3.DBAの持っているテーブルの状態と違う場合

DBAの持っているテーブルの状態と違う場合は、２パターンの対応方法があります。

* 一度全部消してmmigrateする
* alter tableや、create tableを行って、DBAの状態に合わせる

前者の場合は、一度まっさらにして、マイグレーションを全て実行します。

```
bin/cake migrations migrate
```

後者の場合は、DBAと同じ状態になっているので、Cakeを騙しましょう。

```
bin/cake migrations mark_migrated
```
chibi:bit正式版到着

ついにchibi:bitの正式版が発売となったので、早速購入。

![IMG_0361.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/15e3057a-32b6-78f2-92ae-de643c24db0f.jpeg)

BBC micro:bitに付属している電池ケースが付いてくるのをちょっと期待していたのですが付いてきませんでした。
USBで接続して遊んでも良いのですが、せっかくの飛び道具なので、コードレスにしたいところです。
ちなみに、micro:bitについてくる電池ケースは、ebayあたりを「battery box Micro:Bit」で検索すると500円前後で見つかるようです。ただ、この電池ケース、使ってみると判るのですが、USB接続よりはマシですがわりと邪魔くさいです。子供達が遊ぶ事を考えると、乾電池がベストだと思いますが、出来れば、chibi:bit本体と合体できる乾電池ケースがあったらいいなと思いました。
 あと、動作電圧の範囲外かもしれませんが、昔スイッチサイエンスで売っていたEdison用のリポバッテリー3.7Vでも動作しました。（コネクタ形状は同じ）　（追記：ごめんなさい。今でも売っていました ~~https://www.switch-science.com/catalog/2993/~~ さらに訂正：私が使っていたのは110mAタイプ https://www.switch-science.com/catalog/2817/ でした。）

続いて、本体の見た目の比較です。

![IMG_0365.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/897fb0a7-bc8f-463c-bcd2-afa787dd33eb.jpeg)

![IMG_0362.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/ddef5997-877e-6741-aab1-5b400ece2958.jpeg)

chibi:bitテスト版と印刷の文字以外、違いを見つけられませんでした。（Bボタンが使えるぐらい^^

今回、特筆すべきは、スイッチサイエンスは、なんと、独自IDEを公開しました。

http://chibibit.io/ide/

これは凄いです。
互換機を販売する際のBBC側の条件だったりしたのかは判りませんが、スイッチサイエンスの本気度に、恐れ入りました。