OmniAICreator/Qiita-1.07M huggingface dataset:
raspberry piでPCの電源オンオフ

![pc_power_unit.png](https://qiita-image-store.s3.amazonaws.com/0/133915/5ee986cb-69db-0246-7a99-44c19b1fc048.png)



自宅の環境ですが、メインのwindowsマシンは常に動いていて、その他にpiを簡単なテスト用に動かしています。
重い処理とかテスト用にメイン機お下がりのubuntuマシンが一台ありまして、非力ですがGTX650がついています。大体のことはクラウドでどうにかなりますし、こいつを常に動かすと電気代が高くなって部屋が更に暑くなるので、ほとんど動かしていません。
でもGPUやマシンパワーを必要とする時とかたまには使います。あと、外部から使っていてハングさせた時にどうにもならないのでそれもどうにかしたいと思ってました。

ということで、piから電源を直接オンオフ出来るユニットとスクリプトを作成しました。

#ちょっと説明
+ GPIOの操作はRPi.GPIOモジュールを使用します。
+ 簡易的にpingの確認もするので、subprocessを使用します。(私の場合、ポート閉じているので、本当はSSHでチェックしなきゃいけないです。)
+ 電源オンのときpingの前にちょっと長め(2分くらい)待機するようにしています。
+ サンプルでは16番ピンを使用しています。
+ スクリプトの終了時にはGPIOをしっかり開放します。

#コード
```py:power.py
#!/usr/bin/env python

import RPi.GPIO as GPIO
import time
import subprocess

#out put gpio pin
OUTPUT=16

#host ip
HOST="宛先IP"

#initialize
def init():
        GPIO.setmode(GPIO.BOARD)
        GPIO.setup(OUTPUT,GPIO.OUT,initial=GPIO.LOW)

#finalize
def finalize():
        GPIO.cleanup()

#gpio power on
def on():
        GPIO.output(OUTPUT,GPIO.HIGH)
        time.sleep(2)
        GPIO.output(OUTPUT,GPIO.LOW)

#gpio power off
def off():
        GPIO.output(OUTPUT,GPIO.HIGH)
        time.sleep(10)
        GPIO.output(OUTPUT,GPIO.LOW)

#ping check
def ping_check():
    pcheck = subprocess.Popen(["ping", "-c", "1", HOST],stdout = subprocess.PIPE,stderr = subprocess.PIPE )
    time.sleep(10)
    pcheck_out, pcheck_error = pcheck.communicate()
    out_line = pcheck_out.split("\n")
    for i in range(0,len(out_line)):
        print out_line[i]
    if "1 received, 0% packet loss" in pcheck_out:
        print "ping success!!"
    else:
        print "--ping fail--"

#power on main
def power_on():
        print "power on y/n"
        input_line = raw_input()
        if input_line == "y":
                print "power on please wait"
                on()
                time.sleep(120)
                print "ping check please wait"
                ping_check()
        elif input_line == "n":
                print "power on cancel"
        else:
                print "input error"

#power off main
def power_off():
        print "--CAUTION---"
        print "power off? y/n"
        input_line = raw_input()
        if input_line == "y":
                print "power off please wait"
                off()
                print "ping check please wait"
                ping_check()
        elif input_line == "n":
                print "power off cancel"
        else:

                print "input error"

#main
if __name__ == '__main__':
        try:
                init()
                print "please input power on/off "
                input_l = raw_input()
                if input_l == "on":
                        power_on()
                elif input_l == "off":
                        power_off()
                else:
                        print "input error"
                finalize()
        except:
                finalize()
```

#回路図
![pc_pwer_unit.png](https://qiita-image-store.s3.amazonaws.com/0/133915/37d5395a-f2e8-8879-7330-af552269c296.png)
プロセス間通信で DeadObjectException が起きる状況を手軽に作る

# `DeadObjectException`とは

`DeadObjectException`とは、死んでしまったプロセスを相手にプロセス間通信を試みた場合に投げられる例外です。
プロセス間通信では、相手のプロセスが生きているかどうかを考慮する必要があります。この例外が発生した場合、呼び出し元（自分）のプロセスは代替手段で処理を続行するか、新しい相手のプロセスにバインドして、死んでしまったプロセスを相手にプロセス間通信をしないようにしなければなりません。

一方で、プロセスがいつ死ぬかはシステムに委ねられているため、自分ではどうしようもない部分でもあります。ただし、強制的にプロセスを殺して、相手のプロセスが死んだ状況を作り出すことはできるので、意図的に相手のプロセスを殺すことで、`DeadObjectException` が発生した時のハンドリングをテストすることができます。

# 設定からプロセスを殺す

Android の設定には、アプリケーションの管理をする項目のなかに、アプリケーションを強制終了する機能があります。
この機能を使えば、プロセスをまるごと止めてしまうことができるので、`DeadObjectException`をテストできます。

# adb shell からプロセスを殺す

より手軽に相手のプロセスを殺す場合は、`am`コマンドを使用します。
`am force-stop <package-name>`で、アプリのパッケージを指定することでもプロセスを殺すことができます。

# 相手のプロセスが死んだことを検知する

相手のプロセスが死んだ場合、メソッド呼び出しで投げられる例外をキャッチする以外にも、プロセスの死亡を検知することができ、このために用意されたインタフェースが
[IBinder.DeathRecipient](https://developer.android.com/reference/android/os/IBinder.DeathRecipient.html)です。

# IBinder.DeathRecipient の実装例

大まかな仕組みや使い方は「(Yukiの枝折: Android:DeathRecipientで他プロセスの死亡を検知する)[http://yuki312.blogspot.jp/2013/02/androiddeathrecipient.html?m=1]」をご覧ください。

サポートライブラリ内にも実装クラスがあります。[`MediaControllerCompat.Callback`](https://developer.android.com/reference/android/support/v4/media/session/MediaControllerCompat.Callback.html)では、`IBinder.DeathRecipient#binderDied()`で`MediaControllerCompat.Callback#onSessionDestroyed()`を呼び出すようになっています。
Swift 3からのアクセスコントロール

Swift 3でクラスやメソッドにつける `public` や `private` などのアクセスコントロールが見直されました。新しいキーワードが増えただけでなく、これまでのキーワードの意味も変わったので、何がどう変わったのか、それらをどう使い分けていくのかというところを自分なりにまとめました。

# これまでのアクセスコントロール

Swift 2までは次の3つのアクセスレベルがありました。何もつけなければ `internal` が指定されたことになります。

- `public`: 同じモジュール内だけでなく、別のモジュールからでもアクセスできる
- `internal`: 同じモジュール内からのみアクセスできる
- `private`: 同じソースファイル内からのみアクセスできる


# Swift 3からのアクセスコントロール

Swift 3からは次の5つのアクセスレベルになります。何も付けなければ `internal` になる点はこれまでと同じです。

- `open`: 同じモジュール内だけでなく、別のモジュールからでもアクセスでき、別モジュールで継承またはオーバーライドができる（Swift 2までの `public` と同じ振る舞い）
- `public`: 同じモジュール内だけでなく、別のモジュールからでもアクセスできるが、別モジュールでは継承、オーバーライドはできない
- `internal`: 同じモジュール内からのみアクセスできる
- `fileprivate`: 同じソースファイル内からのみアクセスできる（Swift 2までの `private` と同じ振る舞い）
- `private`: 定義されたスコープ内でのみアクセスできる

キーワードとしては `open` と `fileprivate` が増えたわけですが、これらはそれぞれSwift 2までの `public` と `private` に相当する点に注意です。むしろ、Swift 3では `public` と `private` の意味が変わったと考えた方がいいでしょう。

新しい `public` がSwift 2までの `public` と異なるのは、別モジュールでの継承・オーバーライドを認めない点です。クラスに `public` を付けると、別のモジュールからでもそのクラスを使うことはできますが、そのクラスを継承することはできません。同じように、 `public` を付けたメソッドは、別のモジュールからでも呼び出すことができますが、継承したクラスでそのメソッドをオーバーライドすることができません。

新しい `private` はSwift 2までの `private` と異なり、それが定義されたスコープ内にしかアクセスを許可しなくなりました。こちらはJavaやC#の `private` に近づいた感がありますね。

# どう使い分けるのか

さて、Swift 3からの5つのアクセスレベルをどのように使い分けたらいいでしょうか。
そのヒントは今回の変更点のプロポーザルにあるように思います。

- [SE-0025 Scoped Access Level](https://github.com/apple/swift-evolution/blob/master/proposals/0025-scoped-access-level.md) …… `private` と `fileprivate` を分ける理由
- [SE-0117 Allow distinguishing between public access and public overridability](https://github.com/apple/swift-evolution/blob/master/proposals/0117-non-public-subclassable-by-default.md) …… `public` と `open` を分ける理由

SE-0025の方には、従来の `private` では、完全に隠したいのか、それとも関連するコード間でのみ共有したいのかが明確でなかったということが書かれています。
SE-0117の方では、サブクラス化やオーバーライドを許すことでライブラリ設計上の問題を起こしやすいことや、オーバーライドを許さなければコンパイラのコード生成における最適化がもっと期待できるというようなことが書かれています。

これらを踏まえると、私は次のように使い分けるのがいいと思いました。

- アクセスレベルを特に意識しないプログラム → 何もつけない or `internal`
- アクセスレベルを意識する場合
    - 別のモジュールからも使えるようにしたい → `public`
        - そのうち、継承させたりオーバーライドさせることが前提のもの → `open`
    - 実装を他からは隠したい → `private`
        - でも特定のコード間では共有したいとき → `fileprivate` にして共有したいコードを同じソースファイルにまとめる（うまくextensionを使うのが良さそうですね）
    - それ以外 → 何もつけない or `internal`

つまり、普段は `public`, `internal`, `private` の3つを使うようにして、特定の意図があるときにのみ `open` や `fileprivate` を使うというのがいいんじゃないでしょうか。
新しいキーワードを増やすだけでなく、既存のキーワードの意味を変えてきたことからも、普段は `public` や `private` を使えということだろうと思います。

既存コードをXcode 8のコードマイグレーションでSwift 3にマイグレートすると、従来の `public` は `open` に、 `private` は `fileprivate` に書き換えられてしまいます。しかし、ここは注意して `public` や `private` に戻していきたいところです。
クリップボード・ツール　Copyq ショートカットの設定　toggle

　高機能クリップボード・ツール　Copyq　紹介はあっても、肝心のことが書かれていなくて。使うときには、ショートカットでtoggleのオプションをつけて使用しないと窓が開きません。

### LXDEショートカットキーの場合

/home/UserID/.config/openbox/lxde-rc.xml　キーバインドの追加。

~~~
  <keybind key="W-p">
      <action name="Execute">
          <command>gnome-screenshot -i</command>
      </action>
  </keybind>
 
  <keybind key="W-0">
      <action name="Execute">
          <command>copyq toggle</command>
      </action>
  </keybind>
~~~
Elasticsearchの運用は大変（HEAPメモリ防衛戦編）

GYAOの窓際エンジニア　玉利です。

我らチーム、ちょっとした炎上案件に巻き込まれてしまい、３ヶ月ほど大変な感じでした。夏は休日出勤が続き、気がついたら秋になってました。

食べ歩きのほうも全く捗らず、暑気払いすらできませんでした。唯一、別の会社に勤めていた元上司が早期退職していて、お祝いの会をやったりしたのですが、久々に横浜まで行って本場の中華を頂きました。美楽一杯という、中華街コックが仕事あがりにくる居酒屋です。


<img width="605" alt="スクリーンショット_2016_09_09_10_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/113049/c1154394-b263-2d83-bddd-c78b2ccbbb8b.png">
美楽一杯のアワビ蒸し(1個1,000円) かなりいけてるけど、大珍樓の宴会スペシャルのほうが美味しいかな。。。宴会やりたい。

日曜にその宴会をやってる最中も、私の携帯はアラートがなりまくり。これはちょっとやばい、月曜までもつかなー、、、と思っていたのですが、案の定出社中、会社につく２駅前に一気にElasticsearchのレスポンス速度が悪化し、フロントサービスが障害発生的な展開になってしまいました。

![JVM_-_New_Relic.png](https://qiita-image-store.s3.amazonaws.com/0/113049/0d77104d-de88-32f0-d285-bec786b30b43.png)

これはローンチ前にはわからないことでした。実際にサービスに利用しはじめると、GC(Garbage Collection)がはたらいてメモリを回収するのですが、どうやら完全に開放するのは難しいみたいでどんどん空きがたりなくなってきます。

実は、その前にもいちどメモリ不足でトラブっていまして、メモリ追加と設定改善を入れたのですが、時間稼ぎに過ぎませんでした。

![JVM_-_New_Relic.png](https://qiita-image-store.s3.amazonaws.com/0/113049/1215d87c-5097-cfb5-bb56-6afce9d4f29b.png)

対処療法的なのですが、定期的にESを再起動してやることでメモリ不足問題の時間稼ぎを行うことにしました。

我々のshade=10,replica=2の大体、再起動して40秒くらいでconditionがgreenに戻るので、サーバを1台1台、再起動コマンドを流していきます。最初は手作業だったので大変でした。

つづく
ChatWork から Slack へ移行するときに 過去ログもそれっぽく移行した話

## goodbye_chatwork

ChatWork のログは，（通常は）エクスポートできない．
なので，[swdyh/goodbye_chatwork](https://github.com/swdyh/goodbye_chatwork)を使って抽出する．

参考： [チャットワークのチャットログと添付ファイルをまるっとダウンロード : swdyh](http://swdyh.tumblr.com/post/93581891675/%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%AD%E3%82%B0%E3%81%A8%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%81%BE%E3%82%8B%E3%81%A3%E3%81%A8%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)

## cw2slack

**この記事の本題．**

ChatWork の記法は，

```
[info][title][dtext:file_uploaded][/title][download:610XXX36]iOSガイドライン.pptx (1.18 MB)[/download][/info]
```

```
[qt][qtmeta aid=87XXX9 time=144963XXX1]最後のページに、気づき、わからなかったこと、考察などをまとめる（スライドで読めない文字サイズレベルでも OK 共有したときに読めればよい）
ってあるけど皆さんなにか書くことありますか[/qt]
```

って感じで，見づらい．
適当に整形してやる必要がある．

**適当に整形するプログラムを [3846masa/cw2slack] にあげた．**
これを使うと，

![](https://gyazo.com/cbec10f341fa808053991607c4dcc2d0.png)

![](https://gyazo.com/8700bb77e5f410b3cd89e5f0da7e4632.png)

**ちょっとはマシになる :tada:**
引用だけは見栄えが悪いが，それ以外はそれなりに移植できているはず．

雑なコードのままなので，他の環境で動く保証はあまりないが是非．
（正直，使い捨てのコードなので.... 移行作業って何度もやらないし）

[3846masa/cw2slack]: https://github.com/3846masa/cw2slack

### 実装

ChatWork 記法は，BBCode に似ているので BBCode のパーサを使う．
https://www.npmjs.com/package/bbcode-parser
変換後は，HTML形式になってしまうので元に戻す．

``[download:610XXX36][/download]``みたいなのは，パースできない．
なので，あらかじめ``[download attr="610XXX36"][/download]``のようにしておく．

閉じタグのない ChatWork 記法は，正規表現で適当に置換する．
絵文字も適当に置換する．

ちなみに，Slack の CSV インポートでは，Slack 記法で入れるとちゃんと適応される．
``<@3846masa>`` とか書くと，ちゃんとリプライになる．

## おわりに

今までありがとう，ChatWork
Quantum Chemistry - Postulates of Quantum Mechanics 5: Schrodinger Equation

関連 http://qiita.com/7of9/items/d3a1799928734375f34f

CG分野で使われるSpherical Harmonics。自分の数値シミュレーション計算に用いたいと思い調べると、量子化学の講義にたどり着く。

短く分かりやすそうな159本のビデオを少しずつ消化中。

Quantum Chemistry - Postulates of Quantum Mechanics 5: Schrodinger Equation
https://www.youtube.com/watch?v=XjIBIc-Ldok&index=28&list=PLm8ZSArAXicL3jKr_0nHHs5TwfhdkMFhh

- 量子力学での5つ目のPostulates 
- Postulates とは何か?
  - [このビデオから](https://www.youtube.com/watch?v=ppvk2hSYcG4&index=24&list=PLm8ZSArAXicL3jKr_0nHHs5TwfhdkMFhh)
     - trueとして証明されていない
     - trueとして考えられている(given)
     - predictionの妥当性を見てチェックされる
- 白文字
  - wavefunctionは時間依存するSchrodinger Equationにそって時間進化(変化)する
  - Schrodinger Equation
     - http://qiita.com/7of9/items/e1d711685ac92f729fc9
- 緑の式
  - T.D.S.E
     - Time dependent Schrodinger Equationの略
  - 左側
     - 位置r(ベクトル表記;矢印)と時間tの関数プサイに
     - Hハット (ハミルトンオペレータ)が作用している
  - 右側
     - プサイの時間微分に
     - iヘイチバーがかかっている
          - ヘイチバー: h / (2 pi)
- 紫の式
  - 緑の式を解く特に「変数分離法」を使う
  - プサイの関数を以下の関数に分離する
     - 位置rだけの関数
     - 時間tだけの関数
- 黄色の式
  - 緑の式に紫の式を代入した
- 水色の式、白の文字
  - 黄色の式から変形し、tに関するものとrに関するものを並び替えた
     - ハミルトンオペレータはtime independentなので位置rと一緒に扱う
- オレンジの式
  - 左側に「位置r」に関する項を
  - 右側に「時間t」に関する項を整理した
  - あらゆる位置r, あらゆる時間t でこの式が成り立つには、式の値が定数Eとなること
- 緑の式
  - オレンジの式の一番左と、定数Eの等式から変形
  - これがTime independent Schrodinger Equation
      - 時間tが入っていない
- 紫の式
  - オレンジの式の真ん中と、定数Eの等式から変形
- ピンクの式
  - dファイ(t)での積分を左に
  - dtでの積分を右に整理
- 黄色の式
  - (1/y)の積分はlognormal(y)となる ( http://mathtrain.jp/integral_matome の2つ目の公式)ので
  - (1/ファイ(t))の積分はlognormal(ファイ(t))となる
  - 右側は定数の積分なので時間t がかかるだけ
- 水色の式
  - 黄色の式から導出
  - lognormal(A) = Bから A = exp(B) となる
     - A=exp(B)の両辺のlognormalを取れば確認できる
  - 水色の式で面白いのは 
     - ファイ(t) = exp(-iEt / ヘイチバー)
     - ファイ(t)の複素共役ファイ*(t) = exp(+iEt / ヘイチバー)
     - ファイ*(t) と ファイ(t)の積は exp(-定数) * exp(+定数) = exp(-定数+定数) = exp(0) = 1
     - つまり、「ファイ(t)とその複素共役の積は1となる」
- オレンジの式
  - ファイ(r,t)の式を変数分離して求めた結果で書いた
     - 位置rに関する関数はファイ(r)
     - 時間tに関する関数は水色の式から
技術英語 > You can [forestall] these problems by observing two practices.

@ Code Complete (No. 12427 / 36077)

> You can <font color=red>forestall</font> these problems by observing two practices.

http://ejje.weblio.jp/content/forestall
> (…に)先んずる、(…の)機先を制する、(…を)出し抜く、買い占める

「問題に対して先んずる」、つまり「未然に防ぐ」ということなのだろう。
css position:fixedで縦横中央に要素を配置する

## `translate`を使う方法

```css
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
```

元記事はこちら：
http://stackoverflow.com/a/26962247/5209556

元記事によると、`translate`を使うと3Dアクセラレーションが有効になるため、divの中の文字がぼやける、そこで対策として`-webkit-font-smoothing`を使えと書いてある。
確かにMacのChromeでぼやける現象が発生した。

```css
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; /* Safari での Default値 */
```

いずれを指定しても直らなかった。

## `calc`を使う方法

```css
.center{
    position: fixed;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2);
    left:calc(50% - 50px/2);
}
```


## jQueryを使う方法

```js
$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}
```
Deep PredNetを学習させてみる

過去９回でパソコンを自作した後に、Ubuntu14.04、CUDA、cuDNN、chainer、dqn、LIS、Tensorflow、OpenAIGymを順次インストールし、いくつかモデルを走らせた。特に前回はDeep PredNetの学習済みモデルを使って未来を予測してみた。
http://qiita.com/masataka46/items/4de1a294323ed7b3100c

W.Lotter氏らのPredNet論文はこちら。
https://arxiv.org/abs/1605.08104
HPはこちら
https://coxlab.github.io/prednet/
日本語の解説としてはochiai氏がまとめてくれている。
http://karasunoblog.blog20.fc2.com/blog-entry-46.html
GitHub上のコードはこちら。
https://github.com/coxlab/prednet
全能アーキテクチャによるPredNet実装のハッカソン記事はこちら。私も出てます。
http://wba-initiative.org/1472/

せっかく160GBのデータをダウンロードしたので、今回は１，２回でもいいから学習させてみる。

##Deep PredNetを学習させる
まずはパラメータ等の調整をせずに「えいや！」で学習を試みる。

```
THEANO_FLAGS=mode=FAST_RUN,device=gpu,floatX=float32 python kitti_train.py
```

すると

```
device=gpu,floatX=float32 python kitti_train.py
Using Theano backend.
Using gpu device 0: GeForce GTX 1070 (CNMeM is disabled, cuDNN 5005)
Epoch 1/150
500/500 [==============================] - 172s - loss: 0.0625 - val_loss: 0.0476
```

などと表示され、学習が始まった。１回の学習におよそ３分で１５０回学習するので、トータル７〜８時間かかりそう。

いったん止めて、学習回数を減らす。kitti_train.py内３４行を以下に修正する。

```py
nb_epoch = 30
```

１時間半ほどで学習が終了した。３０回の学習でlossが0.0243、val_lossが0.0317。
Cloud9でHelloWorld確認までの流れをキャプチャ付きで詳しく紹介

#はじめに
[前回](http://qiita.com/YujiTsushima/items/ff5d0d154b6d591c6d00)、Cloud9アカウントを作成したので、ありきたりですがHelloWorldを確認するまでの流れを紹介したいと思います。

# 実際の手順
1. Cloud9の[ログイン画面](https://c9.io/login)にアクセスし、メアドとパスワードを入力し、Sign inをクリック　
![a.png](https://qiita-image-store.s3.amazonaws.com/0/123420/68e5a436-228e-d297-d120-6bf5253c57d6.png)

2. ワークスペース画面が表示されるので、画面中央のCreate a new workspaceをクリック
![g.png](https://qiita-image-store.s3.amazonaws.com/0/123420/964ec0db-619a-c315-950d-52e0b4bb638a.png)

3. ワークスペース名の入力と公開設定をPrivateにする以外はデフォルトのままで、Create workspaceをクリック
![b.png](https://qiita-image-store.s3.amazonaws.com/0/123420/77afadb6-4700-b2f9-2055-a71d82d7d1f4.png)

4. 少し待つと、作成されたワークスペースの画面が表示される。よくあるIDEっぽい画面になっている。
![c.png](https://qiita-image-store.s3.amazonaws.com/0/123420/3cd82f35-2922-7bcd-5c39-a2219719b3e0.png)

5. 左にあるhello-world.htmlをダブルクリックしてみると既に、「hello-world!」と表示するjavascriptが書かれていたので「こんにちわ、世界」に変えてみて、上にあるPreview＞Live Preview Fileをクリック
![d.png](https://qiita-image-store.s3.amazonaws.com/0/123420/7c3c2b15-8917-e2d6-845f-0e543bac7d9c.png)

6. 右側にPreview画面が出てきたのでclick meをクリックすると「？」のところが「hello-world!」と表示されてしまったのでhello-world.html上のどこかで適当に右クリック＞Run This Fileを実行し、PreviewのRefreshボタンをクリックしてから改めてclick meをクリックで無事「こんにちわ、世界」が表示された。
![e.png](https://qiita-image-store.s3.amazonaws.com/0/123420/efa46edf-d835-1d89-8d9c-14904744c7b2.png)

以上。

# 補足とか
Previewの隣にあるRunをクリックすると
https://helloworld-brcyt.c9users.io/hello-world.html
といったURLでアプリケーションが動いてくれました。
Stopすると「No application seems to be running here!」と、そんなアプリケーション見つかりませんよという画面が表示されます。
ほんとすごく簡単にアプリケーションが作れるしWeb上で開発までできるなんてCloud9は素晴らしいですね！！（チラッ）
JavaScriptで参照を切る/切らないメモ

最近、ReactのshallowCompareみたいに参照を気にする場面が多いですね。
Immutable.jsを使わずにimmutabilityを実現したりするときにどうぞ。

一部のproposalを除き、コードはNode v6.2.2で実行を確認しています。
実行環境には十分注意してください。

# 参照を切らずに要素を削除する
## Object

1. `delete`演算子を使う

```js
const obj = {a: 1, b: 2, c: 3};
delete obj.b;
'b' in obj; // false
```

undefinedを書き込んでも値の参照は消せますが、`in`演算子によるキーの存在判定は`true`を返し続けます。

全部一気に消したい場合は何かしらのキー列挙と合わせて使用してください。

## Array

### 部分削除

- 頭から
    - .shift()
- 末尾から
    - .pop()
    - .lengthの値を減らす
- どこでも
    - .splice([消したい最初のidx], [消したい個数])
        - 添字は詰まる
        - 返り値は「削除した要素の配列」になる
    - `delete`演算子を使う
        - 添字は詰まらない

```js
const arr = [1,2,3,4,5,6,7,8,9];

arr.shift(); // 1
console.log(arr); // [2,3,4,5,6,7,8,9]
arr.pop(); // 9
console.log(arr); // [2,3,4,5,6,7,8]
arr.length--;
console.log(arr); // [2,3,4,5,6,7]

arr.splice(1, 3); // [3,4,5]
console.log(arr); // [2,6,7]

delete arr[1]; // true
console.log(arr); // [2,,7]
```

### 全削除

1. lengthを0にする
2. spliceする

```js
const arrA = [1,2,3];
arrA.length = 0;
console.log(arrA); // []

const arrB = [1,2,3];
arrB.splice(0); // [1,2,3]
console.log(arrB); // []
```

# 参照を切って複製する
## Object

1. 何かしらのコピーをする（割愛）
2. Object.assignする
3. Object Rest/Spread Propertiesを使う（Stage 2）

Object Spread Propertiesは、実にObject.assignの糖衣構文です。

```js
const obj = {a: 1, b: 2, c: 3};

const obj2 = Object.assign({}, obj);
const obj3 = {...obj};
```

## Array

1. 何かしらのコピーをする（割愛）
2. concatする
3. sliceする
4. Array Spreadを使う（ES2017）

※mapとfilterでも新たな配列が生成されるため、複製にはなります

```js
const arr = [1,2,3];

const newArr2 = arr.concat();
const newArr3 = arr.slice(0); // 
const newArr4 = [...arr];
```

ちなみにObject.assignも使えます。

```js
const newArr5 = Object.assign([], arr);
```

## Primitive Types(String, Number, Boolean)

値は同じだがどうしても参照は別にしたいという場合は、ラッパーオブジェクトを使いましょう。
用法用量を守って正しくお使いください。

```js
123 === 123; // true
new Number(123) === new Number(123); // false
Number(123) === Number(123); // true <- 注意
123 === (new Number(123)).valueOf(); // true
```
GitHub連携でCloud9を使えるようになるまでの流れをキャプチャ付きで詳しく紹介

#はじめに
[前回](http://qiita.com/YujiTsushima/items/514a8c990d79c3f300b3)の続きです。
GitHubアカウントさえあれば使えるはずだったCloud9が2016年7月にクレジットカード登録が必須化されてしまっており、前回挫折しましたが、クレジットカード登録を行い、Cloud9アカウントを作成しましたので前回と一部内容が被りますが、流れを詳しく紹介していきたいと思います。

# 前提条件
- GitHubにログインした状態のブラウザで操作していること

# 実際の手順
1. Cloud9にアクセス　https://c9.io/

2. 右上のGitHubアイコンをクリック
![2016-07-13_001509.png](https://qiita-image-store.s3.amazonaws.com/0/123420/c472653f-7031-34dc-fc02-14b13eb35e20.png)

3. 左下のAuthorize applicationをクリック 
![2016-07-13_000952.png](https://qiita-image-store.s3.amazonaws.com/0/123420/ea305c76-faaa-2730-e1d1-ca2bf101240d.png)
※2016年7月にクレジットカード必須化されるまではこの時点でもうCloud9が使える状態になっていた模様。

4. 右のCreate new Cloud9 accountをクリック
![2016-07-13_001957.png](https://qiita-image-store.s3.amazonaws.com/0/123420/5fc3cf24-b2af-3b8f-b62a-ffe85d0df00b.png)
※左のSign in to Cloud9または右上のSign Inをクリックすると**Cloud9のアカウント**でログインしてねという画面が出るだけで、GitHubアカウントではログインできないので注意。

5. Create an accountという画面が表示され、メールアドレス、名前などなどを入力していき、最後に**入力必須**のクレジットカード情報入力画面が出てくるので入力しNextをクリック
※CVCはいわゆる3桁のセキュリティーコードのこと。
※Postal codeは郵便番号のこと。
![d.png](https://qiita-image-store.s3.amazonaws.com/0/123420/00e51e19-0bda-d49e-859b-24cf06ea7e05.png)
6. そして自分がロボットではないことにチェックを入れ、Create accountをクリック
![e.png](https://qiita-image-store.s3.amazonaws.com/0/123420/c633f7af-999f-55f3-5dd8-43123a6b8abc.png)
7. 少し待つと完了画面が表示されアカウント作成完了。
![f.png](https://qiita-image-store.s3.amazonaws.com/0/123420/749c2708-642b-da85-04f6-bd5dcb2640f8.png)
8. Connect your Github accountをクリックで自分のワークスペース画面に到達。
※右上のDashboardでも同じ画面に遷移しました。
![g.png](https://qiita-image-store.s3.amazonaws.com/0/123420/913ecc19-2a4d-bbaa-133f-13f8f51bdae4.png)
9. 以上でアカウントの作成は完了。ただし、最後にCloud9のアカウントとしてのパスワードを設定する必要があり、手順5にて入力したメールアドレス宛にパスワードを設定してくださいという案内が来ているはずなので、URLを開いて新しくパスワードを設定。

以上。
Proxmox VE 4.2のKVMでLVM thinを試す

Proxmox VE 4.2からLVM thinがサポートされました。LVM thinは仮想的に大容量のボリュームを作り、実際には使われた分しか容量を消費いという機能を実現します。KVMの仮想HDDにはもってこいです（LXCは今後検証します）。

Proxmox VE 4.2をLVMでクリーンインストールすれば、ストレージにLVM thinが表示されます。仮想HDDを作成するときには、ストレージにLVM thinを指定し、Discardオプションをオンにしてください。

その動作を試してみましょう。まず、KVM上で1GiBのランダムなファイルを作って削除します。

```
$ openssl rand 1073741824 > dummy.tmp && rm dummy.tmp
```

ホストで容量を確認します。

```
# lvs
```

KVM上でTrimを実行します。Trimによってゲストからホストに領域を解放するよう伝えます。

```
$ sudo fstrim /
```

ホストで容量を確認します。使用量が減っているはずです。

```
# lvs
```

これでTrimが機能しているなら、もう仮想HDDの容量をいくつにするか悩む必要がありません。
フロントエンジニアのWordpress抹殺術(Express+Prismic.io)

(追記,2016/9/16)
タイムリーにも本家からprismic.iov vs wordperssの記事が出てました。
[prismic.io vs. WordPress](https://medium.com/@prismicio/prismic-io-vs-wordpress-3d30ff55ad0e#.q3b389jvi)
ま、僕が良いと思ったのはフロント開発との親和性なんですが。

---

今回は前置きのみです。
※深夜の駄文です。流し読み程度にしてください。怒らないでください。

 - 前書き（今回）
 - Prismic.ioの使い方（予定）
 - EC2にNode環境構築。お名前.comで取得したドメイン当てる。（予定）
 - Nginxリバースプロキシ設定 pm2でデーモン化（予定）


## 前書き
まず、フロントエンドの開発ディレクトリを見てもらいたい。

ついこないだまで

```
.
├── css
├──　　images
├── index.html
└── js
```

今日この頃

```
.
├──.babelrc
├──.editorconfig
├──.eslintignore
├──.eslintrc
├──.git
├──.gitignore
├── config
├── deploy_config.json
├── gulpfile.babel.js
├── node_modules
├── package.json
├── prismic-configuration.js
├── public
├── server
└── source
```

「ふぁ!!??」

昨今のフロントエンド開発は、ご存知の通りすごいことになっており、nodeなりなんなりでいろんなものを自動化してる。
もはやhtmlを素書している古代文明の人はいないだろう。汗
静的サイトをつくったり、ajaxでapi叩く程度ならフロントで完結するので話は簡単なのだが、
サーバーと連携したシステムを構築する場合、フロントエンジニアとサーバーエンジニアはどうやって仲良くしたらよいのだろうか。

そしてCMSについて考えてみる。
こんなに世の中進化したというのに、CMSとなるとなぜか今もwordpressが根強い。
モダンなwordpressのテーマを作るフローはどうなっているのだろうか。
フロントエンジニアがnode環境で吐き出したhtmlにサーバーサイドエンジニアがphpのタグを組み込んでいるのだろうか？
考えただけでも吐き気がする。jadeなりslimなりで作ったhtmlをその後いじるというのはどう考えてもやばい。
（実際の作業を知らないのでそんなことないと思う。偏見で喋っていますごめんなさい。あったら知りたいです教えてくださいお願いします。切実）

そして苛立ったフロントエンジニアは言った。
「えーい！全てnodeでつくってやる！php消え去れ！」
そしていきついたのが

Express + Prismic.io
である。

AWS EC2でnode環境を構築し
ExpressをたちあげNginxでリバースプロキシを。デーモン化にはpm2のお世話に。
Expressのtemplate Engineにはjadeを使い、
コンテンツ管理にはPrismic.ioを使う。

「こ、これだ！！」

通常静的なサイトを作る時コンテンツ管理はyamlを使っている。（その昔、師匠に教わった）
Prismic.ioを使えば、yamlで使っていたjadeをほとんどそのまま利用できたりする。神のようだった。

ちなみにNodeで作られたCMSはけっこうある。GhostだとかKeystoneだとか他にもたくさんある。
しかし色々試してみたもののなかなかしっくりくるものがなかった。
Ghostはいい感じだったのだが、template engineにデフォルトではjadeが使えず、handlebarsというtemplateを使っていた。pluginでjadeも使えそうだったけれど、ghostの開発者がjadeはロジックが中に書き込めてしまうからよくないみたいなことを言っていたが、使い方次第だと思うし、
僕にとってhtmlにタグが書けますよ的なtemplateは全く求めていなかったので思想が合わないと感じて止めた。
[https://github.com/TryGhost/Ghost/issues/1131](https://github.com/TryGhost/Ghost/issues/1131)

そして行き着いたのが [prismic.io](https://prismic.io/)だった。
日本語での情報は全く出てこなかったがgoodpatchが社内blogで使っている様子だったので信頼が置けた。
Rubyで利用している様子。
[Prott Blog : 新しいCMS、prismic.ioを使ってみよう](https://blog.prottapp.com/post/ja/how-to-create-a-blog-with-prismic.io)

Prismic.io自体はNodeでの開発にも重きを置いている様子？だった。（勝手な偏見かも）
実用的かどうかはサービスの信頼度が不明なのでよく分からないが、使い勝手はとてもすぐれていた。

フロントエンジニアの皆様はCMSをどうしているのでしょうか。


次回は
実際に組み込みの作業をメモがてら書こうと思いますす。深夜の駄文ですた。
Elastic Beats と ElasticSearch と Kibana で NewRelic ぽいものを作ってみる

# はじめに
システム構成やセキュリティガイドラインで、NewRelicなどの外部サービスが利用できない、でも、システムのボトルネックを確認したいと言った場合があるかと思います。

そこで、ElasticBeats と ElasticSearch と Kibana を組み合わせ、簡単なシステムモニターを作ってみます。


# インストール
## Packetbeat
```
rpm -Uvh https://download.elastic.co/beats/packetbeat/packetbeat-1.3.0-x86_64.rpm
```
##　Topbeat
```
rpm -Uvh https://download.elastic.co/beats/topbeat/topbeat-1.3.0-x86_64.rpm
```

## ElasticSearch
```
rpm -Uvh https://download.elastic.co/elasticsearch/release/org/elasticsearch/distribution/rpm/elasticsearch/2.4.0/elasticsearch-2.4.0.rpm
```
## Kibana
```
rpm -Uvh https://download.elastic.co/kibana/kibana/kibana-4.6.1-x86_64.rpm
```
# ElasticSearch と Kibana の起動とセットアップ
```
service kibana start
```
```
service elasticsearch start
```

# Packetbeat の設定
## インデックステンプレートの作成
ElaticSearch内にインデックステンプレートを作成します。

```
curl -XPUT 'http://localhost:9200/_template/packetbeat' -d@/etc/packetbeat/packetbeat.template.json
```

* 上記では、elasticsearch が　localhost で稼働しています。別サーバーで稼働している場合は、適時変更ください。

## 設定
設定ファイルは [/etc/packetbeat/packetbeat.yml] になります。
現時点ではディフォルトのままで問題ありませんが、ElaticSearchが別サーバーで稼働する場合は変更しましょう。

```
output:
  elasticsearch:
    hosts: ["localhost:9200"]
```

# topbeat の設定
## インデックステンプレートの作成
ElaticSearch内にインデックステンプレートを作成します。

```
curl -XPUT 'http://localhost:9200/_template/topbeat' -d@/etc/topbeat/topbeat.template.json
```
- 上記では、elasticsearch が　localhost で稼働しています。別サーバーで稼働している場合は、適時変更ください。

## 設定
設定ファイルは [/etc/topbeat/topbeat.yml] になります。
現時点ではディフォルトのままで問題ありませんが、ElaticSearchが別サーバーで稼働する場合は変更しましょう。

```
output:
  elasticsearch:
    hosts: ["localhost:9200"]
```
# topbeat と Packetbeat の起動
```
service packetbeat start
```
```
service topbeat start
```
しばらくすると、ElasticSearch内にデータが保存されていきます、KibanaのDashBoardにて必要なデータを表示させます。

# まとめ
特に難しい設定もなく、データの取得までが行えました。

下記のサンプルを見ていただくとわかる通り、MySQLのスロークエリ、URLの一覧、サーバーの負荷状況などが一見で表示されます。
それ以外にも、filebeatを組み合わせ、PHP-FPMのスローログを取り込むことで、PHPの実行時間も表示できるようになり、さらに詳細な情報が得れます。

NewRelicほどリレーショナルに情報の閲覧はできませんが、各データを一見として見れるので、各ログを順次見ていくことに比べれば調査がより簡単に行えると思います。

# サンプル：
![screencapture-192-168-184-167-5601-app-kibana-1473703008678.png](https://qiita-image-store.s3.amazonaws.com/0/37550/5c17d8e7-2509-7264-9163-c09c57833050.png)
【Swift 3】UIStoryboardSegue をコードから呼んで画面遷移

`UIStoryboardSegue` をコードから呼ぶ時の記述をメモ。
`FirstViewController` から `SecondViewController` へ画面遷移したいとする。

# Storyboard で `UIStoryboardSegue` を作成
Storyboard で `FirstViewController` を Ctrl + ドラッグで `SecondViewController` へつなぐ。
`identifier` を設定しておく。ここでは `toSecondViewController` とする。

# 画面遷移したいタイミングで `performSegue`
画面遷移を行いたいタイミングで `performSegue` を呼ぶ。

```swift:FirstViewController.swift

class FirstViewController: UIViewController {

    // Anything...

    func segueToSecondViewController() {
        self.performSegue(withIdentifier: "toSecondViewController", sender: nil)
    }

}


```

# 画面遷移先に何かしらを受け渡したい場合

`performSegue` の `sender` 引数は `Any?` 型。
画面遷移先に何かしらを受け渡したい場合は `sender` にセットし、以下のようにする。

```swift:FirstViewController.swift

class FirstViewController: UIViewController {

    let parameters = ["hello": "こんにちは", "goodbye": "さようなら"]

    // Anything...

    func segueToSecondViewController() {
        self.performSegue(withIdentifier: "toSecondViewController", sender: self.parameters)
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "toSecondViewController" {
            let secondViewController = segue.destination as! SecondViewController
            secondViewController.parameters = sender as! [String : String]
        }
    }

}


```
`sender` のダウンキャストの時に、画面遷移先と型が一致するようにする。

```swift:SecondViewController.swift

class SecondViewController: UIViewController {

    var parameters: [String : String] = [:] // 画面遷移後は ["hello": "こんにちは", "goodbye": "さようなら"]

    // Anything...
}
```
IPointerUpHandlerを実装しても呼ばれなかった

# 概要
EventSystemのIPointerUpHandlerを実装してイベントを受け取ろうとしたところ、うまくいかなかった時の解決方法メモ

# バージョン
Unity5.4.0f3

# 問題
マウスボタンを離した時のイベントがほしかったので、IPointerUpHandlerを継承して、OnPointerUpを実装したところまったく呼ばれなかった。

```csharp
public class PointerUpHandler : MonoBehaviour, IPointerUpHandler
{
    public void OnPointerUp(PointerEventData eventData)
    {
        Debug.Log("呼ばれない！");
    }
}
```

EventSystemコンポーネントはあるし、
3Dオブジェクトにイベントを飛ばすために、CameraにはPhysicsRaycasterを付けていたのだが呼ばれなかった。

# 解決方法
[サポートされているイベント](https://docs.unity3d.com/ja/current/Manual/SupportedEvents.html)を見ると、
> IPointerUpHandler - OnPointerUp - ポインターを離したときに呼び出されます（押下されているオブジェクトで呼び出されます）

とある。

どうやら、IPointerDownHandlerが実装されていないと押下されている状態にならず、
Upイベントも呼ばれないらしい。
IPointerDownHandlerを実装することで呼ばれるようになった。

```csharp
public class DownUpHandler : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    public void OnPointerDown(PointerEventData eventData)
    {
    }
    public void OnPointerUp(PointerEventData eventData)
    {
        Debug.Log("呼ばれる！");
    }
}
```

またDrag系のイベントも、IDragHandlerが実装されていないとドラッグ対象にならないため、関連のイベントが呼ばれなかった。
関係のあるイベントは空でも実装しておいたほうがよさそう。
JSONでlong値を読み書きすると・・

JSONの数値表現はdoubleなので、longは丸まります。
要注意。
※どうしてもlongを使いたい場合は、文字列として処理する。

Androidの場合は、
JSONObject.getLong (String name)
のリファレンスなどを参照で。
※ソースも見ておいた方が吉。

ちなみに、PHPやデータベースを使用する場合も要注意。
データベースの場合は、演算中の暗黙のキャストでdoubleになって丸まる事が多い。
(一見、正常に動作しているように見えるので、多くの場合、後になって発覚する。)

PHPの場合は、条件が複雑(環境依存)なので、リンク先を参照で。

### 参考(PHPの場合)
[PHP マニュアル - 整数]
http://php.net/manual/ja/language.types.integer.php

[PHP マニュアル - 浮動小数点数]
http://php.net/manual/ja/language.types.float.php
Python QTアプリ Standalone App化メモ

pythonアプリをstandaloneアプリ化する必要がでたので色々と調べた。
変換ツールはいろいろあったけれど、結局pyinstallerを使うことにした。
ちなみにqtcreatorをつかうとGUI作るのまじで楽。(無料期間過ぎたらお金かかる。)


## OUTLINE
 - 環境
 - pyenvで環境作る
 - PyQt5
 - pyinstaller
 - qtアプリケーションを作成
 - standaloneアプリ生成

---


## 環境
```
MacOSX El Capitan 10.11.5   
python3.5.0 (homebrew pyenv-virtualenv)   
qt5,pyqt5 (homebrew)    
```
mac環境でpythonのバージョンをpyenvで管理している人はたくさんいる気がするし、pyenvやqtをhomebrewで入れている人は多い気がするのに、まとまった情報は探してもなかなか出てこなかった。


## pyenvで環境作る

何も考えずpyenvで入れたpython3.5.0で pyinstaller使おうとしたら 
libpython3.4.dylibがないよ！的なエラーが出た。 
pythonをframeworkとして入れておかないといけないらしい。   
コンパイル周りにも気を使ってpythonをインストールする必要があった。

```
env PYTHON_CONFIGURE_OPTS="--enable-framework" pyenv install -v 3.5.0
~いろいろいんすとーるする。~
pyenv virtualenv 3.5.0 stand_app
```

そしてこれも。
```
pip install --upgrade pip
```

## PyQt5
とりあえずinstall

```
brew install pyqt5 --with-python
```

pyqtはpipでinstallできないぽいので、brewでインストールしたpyqt5をpyenv環境にシンボリックリンクして使えるようにする。

```
ln -s /usr/local/Cellar/pyqt5/5.6/lib/python3.5/site-packages/PyQt5/ /usr/local/opt/pyenv/versions/stand_app/lib/python3.5/site-packages/
```

とりあえずこれで使える。 若干きもいが。。 

## pyinstaller
pyinstaller はpipからinstallできる。

```
pip install pyinstaller
```

## qtアプリケーションを作成
とりあえず簡単なqtアプリをかく。

以下をqt.pyとして保存

```

import sys
from PyQt5.QtWidgets import (QWidget, QToolTip,
    QPushButton, QApplication)
from PyQt5.QtGui import QFont
from PyQt5.QtCore import QCoreApplication


class Example(QWidget):
  def __init__(self):
      super().__init__()

      self.initUI()


  def initUI(self):

      QToolTip.setFont(QFont('SansSerif', 10)) #font-familyとfontsizeの指定
      self.setToolTip('This is a <b>QWidget</b> widget')#マウスオンでツールチップを入れる。

      btn = QPushButton('Button', self) #ボタンの生成
      btn.setToolTip('This is a <b>QPushButton</b> widget') # マウスオンでツールチップを入れる。
      btn.clicked.connect(QCoreApplication.instance().quit) # ボタンを押すと画面が閉じる
      btn.resize(btn.sizeHint()) # いい感じのボタンサイズとボタンのエフェクトを指定してくれる。
      btn.move(50, 50)#ボタンのポジションの設定

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle('Tooltips')
      self.show()

if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

```
## standaloneアプリ生成
そしてやっとお待ちかねのこれ。
コマンドラインから

```
pyinstaller --onefile --windowed qt.py
```

どりゃ。
./dist/に
qt.app
ができる！！！！


やったぜ！！
Johnny-FiveとFirmataでArduinoスケッチをデバッグする

Arduinoスケッチのデバッグをするとき、通常は`Serial.print("hoge");`とか書いて、シリアルモニターを見ながらprintデバッグをするわけですが、Firmataのスケッチを使っているとシリアルポートがFirmataプロトコルの通信に使われるため、シリアルモニターを見ることができません。Firmataを改造とかするときにSerial.printデバッグできないのはとても不便で、ドキュメントにもデバッグ方法は載ってないしでずっと悩みの種だったわけですが、重い腰をあげてちゃんと調べたら意外と簡単に見つかったので、その方法を書いておきます。なおFirmataのクライアント側はJohnny-Five（もしくはfirmata.js)を想定しています。

クライアント側(Johnny-Five)

```js
var five = require('johnny-five');
var board = new five.Board();
board.on('ready', () => {
	console.log('ready');
});
board.on('string', function (message) {
	console.log(message);
});
```

ホスト側(Arduino)

```c
Firmata.sendString("Insert your debug message here.");
```

このように、クライアント側で`string`イベントを待ち受けると、ホスト側で`Firmata.sendString`した内容をそのまま文字列として受け取ることができます。簡単ですね！
Higher Order Componentのテストをrecompose/createSinkでキレイ目に記述する


Higher Order Componentは、コンポーネントというドメイン固有になりがちな部分から一歩切り離されたものなので、うまく作ればテストとの相性はだいぶ良い。（Dependency Injectionと近しい感じがあるかもしれない）

Componentの装飾に依存しない部分などをHigher Order Componentに外出しすれば、独立的にテストが書ける。
しかしComponentのMockを作るという性質上、若干そのままテストを書こうとすると若干の気持ち悪さがあったりしたので調べた

# 今回用意するサンプル

```js
// barで受け取った変数をbazにするHOC。
export const myEnhancer = (Component) => {
  return (props) => {
    const hocsProps = Object.assign({}, {
      baz: props.bar
    }, props)
    return <Component {...hocsProps} />
  }
}

// 通常の使い方はこんな感じとしてみる。
const Item = ({foo, baz}) => {
  return <div>
    <div>{foo}</div>
    <div>{baz}</div>
  </div>
}

export default myEnhancer(Item)
```

ざっくりテスト書いてみると、こんな感じになる

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { myEnhancer } from './Item';

it('renders ', (done) => {
  const div = document.createElement('div');
  // 通常のItemとは別なMockItemを作る。
  const MockItem = (props) => {
    // renderの内部でassertをする。
    assert.equal(props.baz, 'bar value')
    done()
    // returnは適当
    return <noscript>
  }
  // MockItemをmyEnhancerで囲ってrenderする。
  const Mock = myEnhancer(MockItem)
  ReactDOM.render(<Mock bar={'bar value'} />, div);
});
```

上記だと、renderするタイミングの部分でpropsをassertする形。悪くはない。

# もうちょっといい感じに

しかしなんかこうもうちょっといい感じにしたいという場合に [recompose/createSink](https://github.com/acdlite/recompose/blob/master/docs/API.md#createsink)を使うと良い。
[ソースコード](https://github.com/acdlite/recompose/blob/master/src/packages/recompose/createSink.js)を見ると、何もrenderしないReact Componentを返してくれる事がわかる。

```
$ npm install recompose
```

こんな具合で書き換える。

```js
import createSink from 'recompose/createSink'

it('renders ', (done) => {
  const div = document.createElement('div');
  // createSink(callback) という形で、callback内でテストを書く
  // これがmockのItemになる。
  const MockItem = createSink((props) => {
    assert.equal(props.baz, 'bar value')
    done()
  })
  const Mock = myEnhancer(MockItem)
  ReactDOM.render(<Mock bar={'bar value'} />, div);
});
```

だいぶ綺麗な感じになる。良い。
`createSink`なんて何に使うんだ？と思っていたがこういう所で使えるらしい。
`props`以外のLifecycleをテストするような場合ではちょっとこれだと足らなそう
iTunesで再生した曲をtweetするAppleScript

#iTunesで再生した曲をtweetする
と思ったけど、よく考えたら通知センターに表示された内容はtweetされちゃうな……

10.9上で[Twitter Scripter](http://www.mousedown.net/mouseware/TwitterScripter.html)を利用してます。

``` AppleScript

on idle {}
	main()
	return 4
end idle

on main()
	set {aTitle, Artist_Album} to my getNotfication()
	my tweet(aTitle, Artist_Album)
end main

on tweet(aTitle, Artist_Album)
	tell application "Twitter Scripter"
		tweet aTitle & "\n" & Artist_Album using account "Twitter Accounts"
	end tell
end tweet

on getNotfication()
	tell application "System Events"
		tell process "通知センター"
			
			set notificationWindow to window 1 whose subrole is "AXNotificationCenterAlert" or subrole is "AXNotificationCenterBanner"
			
			tell scroll area 1 of notificationWindow
				--曲名
				set aTitle to the value of static text 1
				--アーティスト — アルバム
				set Artist_Album to the value of static text 2
			end tell
			return {aTitle, Artist_Album}
		end tell
	end tell
end getNotfication

```
Bash on Ubuntu on Windows上でTeXLiveのコンパイル&プレビュー環境を構築する（その1）

# やりたいこと

原稿を書くのに、今は[MSYS2](https://msys2.github.io/)上でEmacsとTeXLiveを使っていて、その環境自体には特段の不満はないのだけど、せっかくなのでBash on Ubuntu on Windows上でどこまでできるのか試してみる。

# Windows Subsystem on Linux のインストール

すでにいろんなところで紹介されているので省略。特に注意点もない（と思う）

# wsl-terminal

このままだと日本語表示や入力がアレな状態なので、[Bash on Ubuntu on Windows + オールインワンmintty](http://qiita.com/shiena/items/b8036514c217000a221e)の記事を参考にして、[wsl-terminal](https://github.com/goreliu/wsl-terminal)をインストールする。

cbwinを有効にするとWindowsのcmdとstartが使えるようになるとあるのだけど、Bash on Ubuntu on Windows側のディレクトリで実行しようとするとエラーが出るので後述するwstartを使用することにして、ここでは何も設定しないでおく。

# GNU Emacs

普通にapt-getでインストールする。バージョンは24.3。

```
$ sudo apt-get install emacs
```

X Windows上で表示する方法も試してみたけどうまくいかなかったので、ひとまずはwsl-teminal上で動かすことにする。

## 関連するelispのインストール

個人的な趣味として日本語入力はSKK、TeXファイルの表示はYaTeXが好みなので、それぞれ手動でインストールした（多分apt-getでもインストールできると思うけど）。また、YaTeXの色が好みではないということで、packageを使ってAUCTeXもインストールした。

Ubuntuはすべてapt-getでelispをインストーすることを想定しているようで、手動でインストールするとautoloadしてくれないので、/usr/local/share/emacs/24.3/site-lispなどにsubdir.elをコピーしておく。

# TeXLive

こちらは、apt-getではなく、CTANからinstall-tl-unx.tar.gzをダウンロードしてネットワーク経由でインストールした。

```
$ platex
This is e-pTeX, Version 3.14159265-p3.7-160201-2.6 (utf8.euc) (TeX Live 2016) (preloaded format=platex)
 restricted \write18 enabled.
**
```

ということで、TeXLive2016になった。

# [wstart](https://github.com/retorillo/wstart)のインストール

Bash on Ubuntu on Windows側からWindowsのアプリケーションを呼び出したいのは、pLaTeX->dvipdfmxで作成したpdfファイルをプレビューするため。

```
wstartはBash on Ubuntu on WindowsからWindowsのコマンドを呼び出すことができるNode.jsパッケージです。

wstartはサーバーとクライアントで構成され、Windows上ではサーバー、Bash上ではクライアントとして起動します。

BashからWindowsアプリケーションを新しいウィンドウで開いたり、Bash内でWindows上のコマンドを実行することが可能です。
```

ということで、目的に適いそうなのでインストールしてみる。Node.jsが何をするものなのかは実はよく知らない(爆)。

## Node.jsのインストール

- Windows版

単純に[Node.js](https://nodejs.org/en/)から安定版（4.5.0）をダウンロードしてインストール。

- Linux版

Bash on Ubuntu on Windows上のapt-getでインストールされるnodejsとnpmはバージョン条件を満たさないようなので、[Ubuntuに最新のNode.jsを難なくインストールする](http://qiita.com/seibe/items/36cef7df85fe2cefa3ea)を参考にして[n package](https://github.com/tj/n)を使ってインストール。

## wstart

[READMEファイル](https://github.com/retorillo/wstart/blob/master/README-ja.md)を見ながらその通りにインストール。ただし、上記の方法でNode.jsをインストールしていると、npmでインストールされるアプリケーションは/usr/local/binに置かれるようなので、sudoつけないとダメだった。

```
$ wstart .
```

でエクスプローラーが起動すればひとまずは成功。Windows側のwstartは常時起動させておく必要があるので、スタートアップフォルダ（C:\Users\xxxxx\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup）に

```wstart-server.cmd
CreateObject("WScript.Shell").Run "C:\Users\xxxx\AppData\Roaming\npm\wstart.cmd",0
```

というファイルを作成しておいておくと、ウィンドウが開いたりすることなく起動できて便利。

長くなったので、その2に続く。
[SQLServer] deleted/insertedテーブルを用いて変更前、変更後の条件で更新を行うUPDATEトリガー

# 概要
SQLServerにおける、変更前と変更後の条件をもとにUPDATEを行うトリガー
※ 本来は、アプリで制御するべきだが、本記事は技術ネタとして紹介

# 機能仕様
USER_TBL

| 項目名 | 備考 |
|:--|:--|
|ID|PRIMARY|
|USER_CODE|KEY|
|USER_NAME|   |
|START_DATE|KEY|
|END_DATE||
|INVALID_FLG|無効（1）、有効（0）|

USER_CODE（ユーザコード）とSTART_DATE（開始日）がキー
USER_TBLには、INVALID_FLG（無効フラグ）があり、
開始日＜＝現在日時＜＝終了日の有効期間を外れた更新の場合に、INVALID_FLGをたてる更新を行う

参考：[inserted テーブルと deleted テーブルの使用](https://msdn.microsoft.com/ja-jp/library/ms191300.aspx) と、[SET NOCOUNT](https://technet.microsoft.com/ja-jp/library/ms189837(v=sql.110).aspx)

```sql
CREATE TRIGGER TR_USER_TBL ON USER_TBL
AFTER UPDATE
AS
BEGIN
  -- 現在日時
  DECRARE @currentTime DATETIME
  SET NOCOUNT ON
  SET @currentTime = GETDATE()
  -- START_DATEもしくはEND_DATEが更新されたとき
  IF UPDATE(START_DATE) OR UPDATE(END_DATE)
  BEGIN
    BEGIN TRY
      UPDATE USER_TBL
      SET
        INVALID_FLG = '1'
      FROM USER_TBL t
      INNER JOIN deleted d
      ON
        d.USER_CODE = t.USER_CODE
        AND d.START_DATE = t.START_DATE
      INNER JOIN inserted i
      ON
        i.USER_CODE = t.USER_CODE
        AND i.START_DATE = t.START_DATE
      WHERE
        -- [変更前]
        -- 開始日 <= 現在日時 <= 終了日 かつ、
        -- INVALID_FLG（有効）
        (
          d.START_DATE <= @currentTime
          AND @currentTime <= d.END_DATE
          AND d.INVALID_FLG = '0'
        )
        OR 
        -- [変更前]
        -- 開始日 <= 現在日時 かつ、
        -- INVALID_FLG（有効）
        (
          d.START_DATE <= @currentTime
          AND d.END_DATE IS NULL
          AND d.INVALID_FLG = '0'
        )
        AND
        -- [変更後] 現在日時 < 開始日
        -- もしくは、終了日 < 現在日時
        (
          @currentTime < i.START_DATE
          OR (
            i.END_DATE IS NOT NULL
            AND i.END_DATE < @currentTime
          )
        )
    END TRY
    BEGIN CATCH
      THROW
    END CATCH
  END
END
```
Mautic 1.4.1 から 2.1.1 へのアップグレード方法

## 2.x 系の動作条件
mautic 2.0 から動作条件として下記バージョン以上が必要となりました。
mautic アップグレード前に各バージョンをチェックしておきましょう。
* PHP 5.6.19
* MySQL 5.5.3

## 手順

### (1) アップグレード用のスクリプトをダウンロードする
こちら（https://raw.githubusercontent.com/mautic/mautic/master/upgrade.php ）からアップグレード用のスクリプトをダウンロードします。

### (2) upgrade.php を実行
upgrade.php は mautic をインストールしたディレクトリで実行します。

```bash
$ cd /var/www/html
$ sudo wget https://raw.githubusercontent.com/mautic/mautic/master/upgrade.php
$ sudo php upgrade.php
Checking for new updates...updating to 2.1.1!
Extracting the update package...done!
Moving files...done!
Clearing the cache...done!
Rebuilding the cache...done!
Applying migrations...done!
Cleaning up...done!

Success!
$ 
```

## 参考
[2.0.0 Released! - Mautic Community](https://www.mautic.org/community/index.php/4823-2-0-0-released)
(https://www.mautic.org/community/index.php/4823-2-0-0-released)
テクスチャにvideoを使用


デモ：https://mo49.github.io/qiita/20160908/video.html

```javascript
const video = document.getElementById('video');
const texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false; // 動画は正方形ではないので無効にする
```

DOMに用意したvideoタグ自体はdisplay:none;で非表示にする

```
<video id="video" style="display: none; position: absolute; left: 15px; top: 75px;"
       src="movie/sample.mp4" controls="true" autoplay="true"></video>
```

最後にマテリアルのmapにセットする
RESTful APIのエラー設計


[RESTful APIのレスポンスデータ設計](http://qiita.com/NagaokaKenichi/items/cb04af4f2c71e36bb670)の最後でも述べたが、APIでエラーが発生した時のレスポンスデータも検討する必要がある。

# エラー発生時のレスポンスデータの考え方
APIのレスポンスデータはほとんどの場合プログラムで処理されるため、エラーが発生した時も、


* どんなエラーが発生したのか
* そのエラーはなぜ発生したのか
* そのエラーはどうすれば解決できるのか

をプログラムが分かるようにしておく仕組みが必要。

# エラー発生時のレスポンスデータ

##### 1. HTTPステータスコードの設定
エラーが発生したら、レスポンスボディにエラー情報を設定するだけでなく、([RESTful APIのHTTPステータスコード設計]
(http://qiita.com/NagaokaKenichi/items/eb85b5fbb719d60c6627)でも書いた通り)適切なHTTPステータスコードを設定する必要がある(エラーが発生しているのに200を設定したりしないこと、200はリクエストが成功した時のみしか返してはいけない)。

##### 2. レスポンスボディの検討
適切なHTTPステータスコードを設定すればOKなのかというとそれだけでは不十分。HTTPステータスコードはあくまでエラーのカテゴリや概要であり、冒頭で述べた

* どんなエラーが発生したのか
* そのエラーはなぜ発生したのか
* そのエラーはどうすれば解決できるのか

までを知ることは難しい。そのため、レスポンスボディに上記を設定してあげる必要がある。設定する情報としては、エラーコード、エラーの詳細情報またはエラーの詳細情報へのリンクがあれば、APIを利用する側に最低限の情報を伝えることができる。

以下は、TwitterとGREEのAPIのエラー発生時のレスポンスボディの例(参考:[WebAPIでエラーをどう表現すべき？15のサービスを調査してみた](http://qiita.com/suin/items/f7ac4de914e9f3f35884))。

```Twitter.
{
  "errors": [
    {
      "message": "Bad Authentication data",
      "code": 215
    }
  ]
}
```

* message: エラーメッセージ
* code: エラーコード

```GREE.
{
   "code":1001,
   "message":"Message API (batch type) to same user is called 
             several times by official user in a certain period of time. Service unavailable.",
   "ref_url":"http://docs.developer.gree.net/error.html"
}
```

* code: エラーコード
* message: エラーメッセージ
* ref_url: エラーの詳細が記述されたページのURL

※エラーコードとは、エラーの内容に応じた独自のエラーコード。
なお、レスポンスボディにエラー情報を設定する以外にも、独自ヘッダを定義してレスポンスヘッダにエラー情報を設定する、というやり方もあるが以下の理由により自分はレスポンスボディに設定したい。

* 個人的に独自ヘッダは好きでない
* 多くのAPIがレスポンスボディにエラー情報を設定している(参考:[WebAPIでエラーをどう表現すべき？15のサービスを調査してみた](http://qiita.com/suin/items/f7ac4de914e9f3f35884)) 

# エラー発生時のレスポンスデータの注意点

##### 1. エラー発生時にHTMLを返さない
エラー発生時に、APIの構築に利用しているWebサーバやFWがデフォルトでHTMLをレスポンスボディに設定して返すことがある。APIを利用する側はAPIにリクエストしている以上、XML形式やJSON形式のレスポンスを期待しているので、HTMLを返されるとパースエラーが発生したりしてしまう。そういったことを防ぐためにも、エラー発生時にHTMLを返さないよう留意する必要がある。

##### 2. メンテナンスとステータスコード

APIをメンテナンス等で停止することは極力避けるべきだだが、どうしても停止する必要がある場合は、HTTPステータスコードとして503を返しAPIが停止していることを伝える必要がある。もしメンテナンス終了時刻が分かっているのであれば、[Retry-Afterヘッダー ](https://wiki.suikawiki.org/n/Retry-After)に終了時刻も設定することで、いつ頃になればメンテナンスが終了して通常通り稼働するかを伝えることが可能となる。

# 参考
[RESTful Webサービス](https://www.oreilly.co.jp/books/9784873113531/)
[Web API: The Good Parts](https://www.oreilly.co.jp/books/9784873116860/)
アップルからのiOS Developer Programの継続の催促メール、無視してたらアップルから電話がかかってきた（※2013年12月執筆：懐古録）

**※本内容は2013年12月に自分でメモしていた内容です。2年以上経過しているので現在とは異なっているかもしれませんが、当時と現在との違いを認識していただければと思い、アップしました。**

<hr>

先月、アップルからiOS Developer Programの継続催促のメールを黙殺し、
アップルからの搾取に決別したことをお知らせしました。
　→<a href="http://qiita.com/teapipin/items/c424724a1416c172fdf4">搾取に決別！アップルからiOS Developer Programの継続催促のメール来てたけど無視！</a>

ところが、本日9時に<font color="#ff0000">アップルから電話がかかってきていました。</font>
<a href="http://blog-imgs-42.fc2.com/t/e/a/teapipin/Windows-Live-Writer_0656d5d28c87_11A2C_Screenshot_2013-12-23-19-56-57up_2.png"><img title="Screenshot_2013-12-23-19-56-57up" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 5px; border-left: 0px; display: inline; padding-right: 0px" alt="Screenshot_2013-12-23-19-56-57up" src="http://blog-imgs-42.fc2.com/t/e/a/teapipin/Windows-Live-Writer_0656d5d28c87_11A2C_Screenshot_2013-12-23-19-56-57up_thumb.png" border="0" height="375" width="238"></a>

＋19で始まるなんて国際電話でしょうか？！
当初はどこからの電話か知る由もなく、知らない番号の電話には出ない主義なので
そのまま放置しておきました。
しばらくすると留守番電話にメッセージが入ったようなので確認してはじめて
アップルからということが分かりました。

てぃーの更新期限は12月24日までらしいのですが、実は前年もアップルから
催促の電話があったので今回も同様にしたのかと思いました。

留守電の内容は次のような感じでした。
<blockquote> ・この1週間はiTunes Connectが停止する。
・そのため継続の更新が行えなくなる。
・よって更新期間を延長し、アメリカ時間で1月3日までとなる。
・だから更新よろしくね♪</p></blockquote>

あの手この手を使って来ますね。。。
iTunes Connectが停止するのはアメリカは長いクリスマスホリデーになるからでしょう。
それとてぃーの更新期間が重なるのは偶然ですが、もう3年もやってきてこの1か月間、
しぶとい更新の催促のメールを無視し続けているんですから、諦めればいいものを
わざわざ電話までしてくるなんて。。。

アップル製品を使っているからといって、また開発者登録をしているからといって、
別に全員がアップル信者ではないことを分かってほしいものです。
<strong>これではアップルは守銭奴の単なる一営利企業に過ぎないですね。。。</strong>

なおさらこの搾取構造にピリオドを打つ決心をしましたｗ
iOSアプリの広告まとめ

# 概要
個人でiOSアプリを開発している人、しようと思っている人向けに広告についてまとめて見ました。アプリ作って広告入れてお小遣い稼ぎでもできたらいいですよね。

# [ADPRESSO（アドプレッソ）](https://adpresso.valuecommerce.com/)
収益性の高い広告を自動で最適化して配信。 運用の手間が一切かからないクリック課金型アドネットワーク。

* 広告の種類
 * バナー広告
 * アイコン、テキスト広告
 * インタースティシャル広告(アプリの上にオーバーレイで表示されるフルスクリーン広告)
* 最低報酬支払額
 * 1,000円
* 実装
 * 謎
* 総評
 * 実装方法が謎でした。最低報酬支払額が1,000円なのは良さそうです。あとは収益情報などをリアルタイムに見れるレポートツールもあるのは良さそうです。

# [AdMob(アドモブ)](https://www.google.co.jp/admob/)
Googleが提供する広告プラットフォーム。

* 広告の種類
 * ネイティブ広告が特徴的
 * アプリに合わせてUIをカスタマイズ可能
* 最低報酬支払額
 * 8,000円
 * ※詳細は不明ですがAdSenceが8,000円以上から受け取り可能だったと思います
* 実装
 * SDKあり(pod対応)
 * Swift対応
 * 資料
     * [スタートガイド](https://firebase.google.com/docs/admob/ios/quick-start?hl=ja#prerequisites)
     * [Swift製iOSアプリの広告をiAdからAdMobへ](http://qiita.com/itosho/items/a6cfa77cd2a95450f151)
* その他
 * 無料で制限なく使えるFirebaseで様々な分析できる
 * 自社広告も掲載可能
 * Googleアカウントと[AdSense](https://www.google.co.jp/adsense/start/#?modal_active=none)、[AdWords](https://www.google.co.jp/adwords/)の登録が必要
* 総評
 * Googleが提供しているだけあって一番良さそうな感じでした。Swiftでも実装でき、Firebaseとも組み合わせて色々できそうなのが良さそう。

# [AMoAd(アモアド)](http://www.amoad.com/)
株式会社AMoAdの提供するアドネットワーク広告

* 広告の種類
 * インライン広告
 * オーバーレイ広告
* 最低報酬支払額
 * 1,000円
* 実装
 * SDKあり
 * Swift未対応
 * 資料
     * [SDK Guide](http://www.amoad.com/manuals/sdk/amoad/isdkguide250/index.html)
* 総評
 * 最低報酬支払額が1,000円なのは良さそうです。ドキュメントもありましたが割と古そうでSwiftには対応してなさそう。

# [AppBankNetwork](http://nw.appbank.net/)
AppBank Networkは、レビューサイト「AppBank」が運営するスマートフォン広告です。AppBank Networkの広告を表示することで、広告収益が得られるだけでなく、アプリのダウンロード数も増やす事ができます。iOS・Androidアプリへの広告配信に対応しています。
広告の実装もかんたん。それだけでなく、アプリのダウンロード増もかんたんに行える。それが AppBank Networkです。

* 広告の種類
 * バナー広告
* 最低報酬支払額
 * 10,000円
* 実装
 * SDKあり
 * 資料
     * [iPhoneアプリにAppBank Networkの無料アプリ用の広告を実装する方法](http://www.appbank.net/2013/08/29/iphone-news/647237.php)
* その他
 * AppBankに掲載される可能性がある
 * 100％の広告表示が保証されているため、広告の在庫切れによって非表示期間が生じるというような機会損失を招くことがない
* 総評
 * AppBankのネットワークを持っているのは強みだと思います。最低報酬支払額は他と比べてちょっと高めな印象です。


# [iAd](https://developer.apple.com/iad/)
**iAdサービスの提供は2016年6月30日で終了**

# [i-mobile](http://www.i-mobile.co.jp/)
アイモバイルアドネットワークとはスマートフォン・タブレット・PCに対応した国内最大級のアドネットワークです。

* 広告の種類
 * バナー広告
 * ネイティブ広告
 * ネイティブワイド広告
 * フルスクリーン広告
* 最低報酬支払額
 * 3,000円
* 実装
 * SDKあり
 * Swift対応
 * 資料
     * [SDK設定手順](https://sppartner.i-mobile.co.jp/downloads/sdk/i-mobile_SDK_manual_for_iOS.pdf#search='imobile+sdk+swift')
* 総評
 * なんとなくwebのイメージが強そう。アプリでも色々な広告の種類が実装できそう。

# [nend](http://nend.net/)
『nend』はスマートフォンユーザーが訪れるサイトやアプリ内に、関連性の高い広告を自動的に掲載するサービスです。
市場のニーズに応えて変化し、全てのスマートフォンユーザーに信頼されるアドネットワークを目指します。

* 広告の種類
 * バナー型広告
 * インタースティシャル広告(アプリの上にオーバーレイで表示されるフルスクリーン広告)
 * ネイティブ広告
* 最低報酬支払額
 * 3,000円
* 実装
 * SDKあり
 * Swift対応
 * 資料
     * [nendSDK iOS 設定ガイド](https://github.com/fan-ADN/nendSDK-iOS/wiki/nendSDK-iOS-%E8%A8%AD%E5%AE%9A%E3%82%AC%E3%82%A4%E3%83%89)
* 総評
 * スマホ専用のアドネットワークなのでアプリとも相性が良さそう。ドキュメントもGithubにまとまっておりSwiftでも実装できるのは良さそう。

# まとめ
一番良さそうなはやはりAdMobかなぁという気がしました。自分が調べた限りではSwiftで実装できるものが結構限られている印象でした。広告の種類やレポーティングなども含めAdMobが使いやすそうです。