OmniAICreator/Qiita-1.07M huggingface dataset:
pythonを使ってブラウザでグラフを表示したい！

# はじめに
とりあえずなんかボタン作って python 経由でデータが取得したなぁって思って
ガワは割となんでもいいんだけど...。目標点としては、データを取得して動的にグラフの作成をしたい。adoのRecordset型をボンと渡せば表を作ってくれるのがあるといいなぁ。HTMLの「テーブル」はちょっと苦手感あるぜ。デザイン的に...ｗ

#参考ページ
・[Python3のインストール](https://www.python.jp/install/windows/install_py3.html)

# 開始
今回は「basic_js_graph」というフォルダを作って練習する。
chart.js は（かつては js をダウンロードして html がそこをのぞくというカタチだったが）いまは CDN という機能を利用し、ライブラリに直リンするほうがいい。

# STEP1: index.htmlを作る
https://www.chartjs.org/docs/latest/getting-started/

・index.html を新規作成
・まだ空っぽのhtmlファイル上で `!` を押して `tab` を押すと、VSCodeがhtmlテンプレートを作ってくれる。すご！
・赤い枠で囲んだ範囲が今回編集した場所（ script のタグだけは手打ちしたけどその他は getting-started からコピペした）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/0e1e814e-c009-3982-2761-869ab79e1d52.png)

## ソース
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

</head>
<body>

    <!-- chart.js -->
    <canvas id="myChart"></canvas>

    <script>

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 45]
                }]
            },

            // Configuration options go here
            options: {}
        });

    </script>

</body>
</html>
```

# STEP2: Webサーバーを起動する
Pythonは簡易Webサーバー機能を持っている。
Webサーバーを一言で説明するのは難しいが、要はブラウザに「[http://localhost:8000/](http://localhost:8000/)」と打ち込んだらさっき作ったグラフが表示されるようにしようぜってこと。

・simpleserver-startup.py を新規作成
・赤い枠で囲んだ範囲が今回編集した場所
・VSCodeのターミナルで「basic_js_graph」に移動して「python simpleserver-startup.py」と打ち込んで実行
・サーバーが起動し、待受状態になる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/7626daf2-f02a-29d3-f9b1-adbdeed3f808.png)

## ソース
```python
import http.server as server
server.test(HandlerClass=server.CGIHTTPRequestHandler)
```

# STEP3: ブラウザで確認する
これはまだ、サンプルコピペでデータが表現されているに過ぎない。しかし表現されたのは大きいね:relaxed:
これで、「ブラウザアドレスバーからのHTTPリクエストに対してHTMLファイルを返す」とこまで行ったようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/be272231-0432-04c5-65d7-0ef66cb3325e.png)

よし！いったん「Ctrl + C」でサーバを終了。
サーバを終了したあとに F5 で更新するとこの通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/79a07c8b-a7b8-55c0-5de5-52391bebe53a.png)

#つぎは？
pythonからdbにアクセスする（[A](http://qiita.com/YoshitakaOkada/items/817b0c5064f56a31541b)）、[ブラウザアドレスバーからのHTTPリクエストに対してHTMLファイルを返す（[B](http://qiita.com/YoshitakaOkada/items/6dfad94ab917053fcef7)）まで行ったので、その間の部分を作って「ブラウザアドレスバーからのHTTPリクエストに対して動的なグラフHTMLファイルを返す」をつくる
CentOSを入れたらネットにつながらなかった話


ちゃんとインフラを勉強することになったので、
仮想環境ESXi6.0上にCentOS7を入れてみました。
ネットにはつながっているだろうと思い、さっそくyumでapache入れようとしたらコケました。

pingをgoogle.comに向けて打つと死んでる。
ifconfigでipが振られてない。

ちょっと調べたらデフォルトではネットにはつなげてないらしい。

# 作業した環境
- 仮想環境ESXi(固定IPを付与)
- CentOS7

#やったこと
### 1.イーサネットインタフェースファイル（ifcfg）の確認

cat /etc/sysconfig/network-scripts/ifcfgほにゃらら

>設定ファイル
>/etc/sysconfig/network-scripts/ifcfgほにゃらら
>
>設定ファイルの詳細(ifcfgファイルの詳細)
>https://access.redhat.com/documentation/ja-JP/Red_Hat_Enterprise_Linux/6/html/Deployment_Guide/s1-networkscripts-interfaces.html

### 2.ONBOOTの値がnoになってたので修正。

「ONBOOT=no」を「ONBOOT=yes」へ

### 3.ネットワークデーモンの再起動

service netwok restart


最後にifconfigやpingコマンドでローカルIPが振られていることと疎通確認を行って完了。
今のワーキングディレクトリに影響を及ぼさずに staged と unstaged の内容を commit した branch をそれぞれ作る。

ステージしたファイルと、していないファイルの両方を、そのままに残しておきたい。
そしてできれば、まだ commit していない段階の元のブランチに戻ってきたい。

普通は、こういう用途のために stash があるはず。
自分の知るかぎりだと stash の対象は「ステージしたファイルのみ」または「ステージされてないファイルもあわせた両方」のどちらか。
そうではなくて、その時点のステージされたファイルとステージされてないファイルを別物として保存したいと思った。
そして、今のワーキングディレクトリには何の影響も及ぼさずにブランチを切りたい。

つまり、

1. 今のブランチから staged の状態のファイルを commit した場合のブランチを生やす
2. さらにそのブランチから unstaged だったファイルも commit した場合のブランチを生やす。
3. そのワーキングディレクトリの状態をとどめたまま、元の branch に戻ってくる。ステージ・非ステージの状態は最初の状態に戻す。

という感じ

checkout ではなく symbolic-ref を使ってブランチを移動するとできそうだとを買ったので、書いてみた。

```bash:autosave
#!/usr/bin/env bash
set -eu

current_branch=$(git rev-parse --abbrev-ref HEAD)
date=$(date +%Y%m%d-%H%M%S)
wip1="wip/$date/staged"
wip2="wip/$date/unstaged"
message_wip1="Autosave Staged files $date"
message_wip2="Autosave Unstaged files $date"

{
    set +e
    git checkout -q -B "$wip1"
    git commit -q -m "$message_wip1" > /dev/null 2>&1
    git checkout -q -B "$wip2"
    git add .
    git commit -q -m "$message_wip2" > /dev/null 2>&1
}
git symbolic-ref HEAD "refs/heads/$wip1"
git reset -q
git symbolic-ref HEAD "refs/heads/$current_branch"
```
__DATA__ トークンと __END__ トークンと SelfLoader


## @main

### `__DATA__`

```
$ pbpaste
print <DATA> ;

__DATA__
data token
$ pbpaste | perl -l
data token
```

### `__DATA__` & `SelfLoader`
```
$ pbpaste
use SelfLoader ;
print test() ;
#print test ; ダメ
__DATA__
sub test { 42 }

$ pbpaste | perl -l 
42
```

### `__END__`

```
$ pbpaste
print <DATA> ;

__END__
end token
$ pbpaste | perl -l
end token
```

### `__END__` & `SelfLoader`

```
$ pbpaste
use SelfLoader ;
print test() ;

__END__
sub test { 42 }

$ pbpaste | perl -l 
42
```


## @package

### `__DATA__`
```
$ pbpaste
package H ;

print <DATA> ;
1;

__DATA__
data token
$ pbpaste | perl -l
data token
```

### `__DATA__` & `SelfLoader`

```
$ cat H.pm
package H ;
use SelfLoader ;
print test() ;

1;

__DATA__
sub test { 42 }

$ cat H.pm | perl -l
42

$ perl -MH -le 'print H::test'
42
42
$ perl -MH -le 'print test'
42
```


### `__END__`

```
$ pbpaste
package H ;

print <DATA> ;
1;

__END__
end token
$ pbpaste | perl -l
Name "H::DATA" used only once: possible typo at - line 3.
readline() on unopened filehandle DATA at - line 3.
```

### `__END__` & `SelfLoader`
```
$ pbpaste
package H ;
use SelfLoader ;
print test() ;

1;

__END__
sub test { 42 }

$ pbpaste | perl -l
H doesn't contain an __DATA__ token at - line 3.
```
PythonのNumpy、Pandas、scikit-learnモジュールでの回帰分析

Pythonの勉強にいくつかのモジュールで回帰分析をおこなってみました。
参考にしたのは以下のサイト（統計学のサイトです）。


[アイスクリーム統計学にようこそ！](http://kogolab.chillout.jp/elearn/icecream/chap2/sec5.html)

データはリンク先から、CSVファイルに変換したものを使用しています。
~~（そのまま、テーブル読み込めよっていうツッコミはなしで）~~
scikit-learnモジュールの時、データ形に気がつくまで苦労しました。

##Numpy モジュール の polyfit()メソッド

```py:python2.7
#coding:utf-8
import numpy as np
import pandas as pd
dataframe = pd.read_csv('iceshop.csv')
x_data = dataframe['distance']
y_data = dataframe['custmer']

model = np.polyfit(x_data, y_data, 1)
m = np.poly1d(model)
print(m)
```

##Pandas モジュール の ols()メソッド
```py:python2.7
#coding:utf-8
import numpy as np
import pandas as pd
dataframe = pd.read_csv('iceshop.csv')
x_data = dataframe['distance']
y_data = dataframe['custmer']

model_ols = pd.ols(y=y_data, x=x_data, intercept = True)
print(model_ols)
```

##scikit-learn モジュール の linear_model.LinearRegression() メソッド
```py:python2.7
#coding:utf-8
import pandas as pd
from sklearn import linear_model

dataframe = pd.read_csv('iceshop.csv')
#dataframe型では動かないので注意
nparray = dataframe.as_matrix()
x_list = nparray[:,1]
y_list = nparray[:,2]

#1列にしないダメ
x_list2 = x_list.reshape(len(x_list),1)
y_list2 = y_list.reshape(len(y_list),1)

lm = linear_model.LinearRegression()
lm.fit(x_list2, y_list2)

print 'Coefficients :' + str(lm.coef_)
print 'Intercept :' + str(lm.intercept_)
print 'R2 :' + str(lm.score(x_list2, y_list2))
```

##参考：データの取得して、CSVファイルで書き出す処理について
```py:python2.7
#coding:utf-8
import pandas as pd

#アイスクリーム統計学の練習問題ページ
url = 'http://kogolab.chillout.jp/elearn/icecream/chap2/sec5.html'

fetched_dataframes = pd.io.html.read_html(url)
dataframe = fetched_dataframes[0]

#日本語の処理はめんどくさいのでヘッダー行を削除
dataframe.columns = ['shop_id','distance','custmer']
df2 = dataframe.drop([0])
df2.to_csv('iceshop.csv', index = False)	 
```

以下のデータがCSVファイルで出力されます。

|shop_id|distance|custmer|
|:-----:|:------:|:-----:|
|      1|      10|    795|
|      2|    1200|    213|
|      3|     500|    465|
|      4|      50|    694|
|      5|     740|    403|
|      6|      30|    782|
|      7|      10|    769|
|      8|     360|    561|
|      9|     150|    692|
|     10|     930|    361|
|     11|     620|    385|
|     12|      65|    723|
今更 Phred score の話。


メモが出て来た。
まあ、Phred の説明文の最初の数行だけど。

|item|symbol|意味|
|:-:|:-:|:-:|
|Phred quality score|Q|-|
|error probabirities|P|エラー率[^1]|


[^1]: ベースコールでミスする率

の間には、

```math
Q = -10 \log_{10} P \\
P = 10 ^ \frac{-Q}{10}
```

の関係が成り立つ

普通に、`phred score 30` のものは、

```math
\begin{align}
P = 10 ^ \frac{-30}{10} = 10 ** -3
\end{align}
```
つまり、 `0.0001` だし、

`phred score 24` のものは、

```math
\begin{align}
P = 10 ^ \frac{-24}{10} = 10 ** -2.4
\end{align}
```

`0.00081` 。

これを % 表記して 100 から引いたのが、ベースコールの正確さ。
ファイル名を小文字へ（カレントディレクトリ）

こんにちは。
カレントディレクトリの全てのファイルを、大文字混じりのファイル名から小文字に変更してみました。各種を試しました。

```console
$ rename -f 'y/A-Z/a-z/' *
$ for f in * ; do mv $f `echo $f | tr A-Z a-z`; done
$ for f in * ; do mv $f `echo $f | awk '{print tolower($0)}'`; done
$ for f in * ; do mv $f `echo ${f,,}`; done     [bash 4 以降]
$ ls | xargs -I % mv % `echo % | tr A-Z a-z`
$ echo "autoload zmv; zmv '(*)' '${(L)1}'" | zsh -s
```

* rename コマンド（正規表現版）の入手はこちら[^1]：
   * http://plasmasturm.org/code/rename　

* こちらにも、方法を見つけました →「[大文字交じりのファイル名を小文字に変換する](http://qiita.com/_shimizu/items/db30c8889de7b911f207)」

[^1]: homebrew を利用しても入手できます。
for文でアルファベットとひらがな

先日見かけた

* [PHP - for文でアルファベット - Qiita](http://qiita.com/ao_love/items/b08286c9344ab8fd33f0)
* [PHP - ぼくのかんがえた最強のfor文でアルファベット - Qiita](http://qiita.com/fukken/items/35b816778eedf01d133c)

の流れを読んで,
「それ、拙作のクラスライブラリ PEACH で似たようなことが出来るよ！」
という紹介をしたく, アルファベットに加えてひらがなもリストアップするプログラムを書いてみました.

## 下準備

PHP5.4 以上の環境を前提として, クラスライブラリ PEACH2 をインストールします.
[GitHub](https://github.com/trashtoy/PEACH2) からソースコードをダウンロードしても良いですが, 最近になって Composer にも対応したので, 今回は Composer 経由で入れてみます.
適当なディレクトリで以下を実行.

```bash
$ composer require trashtoy/peach2
```

## サンプルコード

以下のように [Utf8Codec](https://trashtoy.github.io/PEACH2/class-Peach.DF.Utf8Codec.html) というクラスを利用します.

```php:sample01.php
<?php
use Peach\DF\Utf8Codec;

require_once(__DIR__ . "/vendor/autoload.php");

$codec = new Utf8Codec();
echo "alphabet", PHP_EOL;
for ($i = 65; $i <= 90; $i++) {
	echo $codec->encode($i), PHP_EOL;
}

echo "hiragana", PHP_EOL;
for ($i = 0x3041; $i <= 0x3093; $i++) {
	echo $codec->encode($i), PHP_EOL;
}

```

実行結果はこんな感じ.

```
$ php sample01.php
alphabet
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
hiragana
ぁ
あ
ぃ
い
ぅ
う
ぇ
え
ぉ
お
か
が
き
ぎ
く
ぐ
け
げ
こ
ご

(中略)

ら
り
る
れ
ろ
ゎ
わ
ゐ
ゑ
を
ん
```

## おまけ

数値→文字列の変換だけでなく, 文字列を数値に変換することも出来ます.

```php:sample02.php
<?php
use Peach\DF\Utf8Codec;

require_once(__DIR__ . "/vendor/autoload.php");

$codec = new Utf8Codec();
var_dump($codec->decode("Test:本日は晴天なり"));
```

実行結果.

```
array(12) {
  [0]=>
  int(84)
  [1]=>
  int(101)
  [2]=>
  int(115)
  [3]=>
  int(116)
  [4]=>
  int(58)
  [5]=>
  int(26412)
  [6]=>
  int(26085)
  [7]=>
  int(12399)
  [8]=>
  int(26228)
  [9]=>
  int(22825)
  [10]=>
  int(12394)
  [11]=>
  int(12426)
}
```

この配列を再度 encode すると元の文字列が復元できます.

```php:sample03.php
<?php
use Peach\DF\Utf8Codec;

require_once(__DIR__ . "/vendor/autoload.php");

$codec = new Utf8Codec();
$arr   = [84, 101, 115, 116, 58, 26412, 26085, 12399, 26228, 22825, 12394, 12426];
var_dump($codec->encode($arr));
```

出力結果.

```
string(26) "Test:本日は晴天なり"
```

以上です. もしも使えそうな機会があれば使ってみてください. (MIT License)
複雑さと前提条件が増えすぎるとメンテナンス不能になる。

　関数の引数が増えていったり、その関数の前提条件が増えすぎると、メンテナンスが不能になる。
　複雑になりすぎてしまった関数を移植すると期待した動作をしなくなってしまう。だから、機能を詰め込みすぎないことです。不幸にして既に複雑になりすぎた関数を引継いだときには、その複雑さを減らしていきましょう。
　期待する動作をしなくなってしまったときには、成功するはずのデータを用意し、どの段階で期待した結果と乖離するのかを確かめていくことです。関数の引数が多ければ多いほど、関数を正常に動作させるのが難しくなります。引数が増えていけばいくほど、引数の組み合わせで矛盾を生じやすくなります。

　そのあたりの事情は、Unixでシェルスクリプトを書く際にも出てくるようです。シンプルだったUnixは他国語対応によって環境変数によって動作が変わってしまった。lsやdateコマンドの出力がロケールによって変わってしまったので、以前だったらそのまま動いたスクリプトでももはや動かなくなってしまう。複雑さが自分の手に負える範囲から逸脱してしまうとメンテナンス不能になってしまうのです。（１０数年前まではシェルスクリプトを書いていたが、もうずいぶん書いていない。）

[どの環境でも使えるシェルスクリプトを書くためのメモ ver3.91](
http://qiita.com/richmikan@github/items/bd4b21cf1fe503ab2e5c)

[UNIXという考え方 The UNIX philosophy]
(https://gist.github.com/koudaiii/82e4f8869705e5be065f)

　あると便利かもしれない機能を１つ余分に加えたとたんに、単純さをぶち壊し、移植性を悪くして、メンテナンスを不能に陥れることが可能だ。


cksumの互換性のない"改良版"が作られたことによる問題は、cksumの利用を不可能にする状況を引き起こした。カーニハンの著書にそのことが書いてあった。


複雑さと前提条件が増えすぎると、その機能をテストするためのデータの入手からして厄介な状況になってしまうのです。テストが実行できない環境ではなかなかコードの改変の勇気がもてなくなります。できるだけ、それぞれのライブラリに余分な機能を追加しないようにして、単体テストが出来る条件を取り戻していきましょう。単体テストが可能なインタフェースを取り出していくことで、品質の確保ができる状況に移行していきましょう。

## 追記(2023.08)：100倍複雑なシステムを僕たちは扱いきれない。
- 複雑さが増大したものを今までと同じやり方で処理しきれる人はいない。
- ファイル単位のバージョン管理システムである[RCS](http://nenya.cis.ibaraki.ac.jp/TIPS/rcs.html)(ci, co コマンド)を今の状況で使いたい人はいますか？
- RCSでは、テキストファイルをファイル単位で履歴を管理するバージョン管理システムである。
- RCSの時代からgitの時代への変化
    - ファイル単位ではなく、リポジトリ単位の管理
    - テキストファイルだけではなく、バイナリファイルも管理できる。
    - ファイル名の変更への対応
    - スタンドアローンの利用からサーバーのあるネットワークへの対応
    - branchの管理とPR(Pull Request)の仕組み
    - Git LFS, DVC(Data Version Control) の利用
 
 - こういった拡張が利用できることで、日々の生産性が向上している。
 - つまり、RCSしか使えないままだったら、今の生産性は確保できない。
    
    
## 複雑性の高いシステムは、システム開発に問題を生じやすい
- 過去に問題が指摘されたシステム
- 例: ガラケーのソフトウェア開発
- 例: 某銀行のシステム（合併前の銀行のシステムのしがらみのために、複数のシステム業者が関わっているシステム）

プロジェクト・マネジャーが知るべき97のこと [複雑よりもシンプルな方がいい](https://xn--97-273ae6a4irb6e2h2k6c0ec7tvc3h1e0dwi7lj952k.com/%E3%82%A8%E3%83%83%E3%82%BB%E3%82%A4/%E8%A4%87%E9%9B%91%E3%82%88%E3%82%8A%E3%82%82%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E6%96%B9%E3%81%8C%E3%81%84%E3%81%84/)
ESP-WROOM-02 の Arduino 環境で I2C 制御 お試し編


[ESP-WROOM-02 の Arduino 環境で I2C 制御](http://qiita.com/ikesato/items/92f4cb143e7aeb5e0f9b)を試してみた。

# ツール
![貼り付けた画像_2015_11_12_21_47.png](https://qiita-image-store.s3.amazonaws.com/0/2432/b2a5d8ea-b10c-8a95-2ff5-6392e7c986f1.png "貼り付けた画像_2015_11_12_21_47.png")

# 書き込み成功時
![sketch_nov12a___Arduino_1_6_5.png](https://qiita-image-store.s3.amazonaws.com/0/2432/4a5a287b-c5cf-b4f2-27e0-019a3f64d21d.png "sketch_nov12a___Arduino_1_6_5.png")

# Trouble Shoot

## トラブル1

マイコンボードに書き込むとき、以下のエラーがでた。

```
error: no matching function for call to 'TwoWire::begin(int, int)'
```

### 原因
BoardManaegerにESP8266がインストールされていなかった。

### 解決
Boards ManagerにESP8266をインストールする

インストール方法：
参考資料：https://www.mgo-tec.com/blog-entry-50.html

パッケージ：
https://github.com/esp8266/Arduino

![Boards_Manager_と_sketch_nov12a___Arduino_1_6_5_と_sketch_nov12a.png](https://qiita-image-store.s3.amazonaws.com/0/2432/59081129-c5c3-90b5-f500-da48df07eebb.png "Boards_Manager_と_sketch_nov12a___Arduino_1_6_5_と_sketch_nov12a.png")


## トラブル2

マイコンボードに書き込むとき、以下のエラーがでた。

```
warning: espcomm_sync failed
error: espcomm_open failed
```

### ヒント
http://stackoverflow.com/questions/31371969/cannot-program-esp8266

### 解決
ESP8266を書き込みモードにする
注意点として、一回書き込むとプロテクトされるので、都度リセットする必要がある

※ [ファームウェアの書き込み方](http://qiita.com/ikesato/items/92f4cb143e7aeb5e0f9b#%E3%83%95%E3%82%A1%E3%83%BC%E3%83%A0%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E6%96%B9)


# 資料
https://github.com/esp8266/Arduino
Babel6(babel-preset-es2015)以降は() => {}()がParse errorになる

```js
// ok
(() => {})()
(function(){})()
(function(){}())
// parse error
(() => {}())
```

これはES2015の仕様として正しい挙動で、むしろ5.xまで動いていたのがバグとのことです。

https://github.com/babel/babel/issues/2118
Ruby on Rails 環境構築メモ

# Ruby・Railsをインストール
いろいろなツールが使用できます。
OS毎に使えるツールが異なるので、下記から選択してインストールする
https://www.ruby-lang.org/ja/documentation/installation/

※今回はmacにrvmを使用して両方一気にインストールします。
http://rvm.io/

1. homebrewをインストール(Javaと、XCodeもしくはCommand Line Toolsが必要)
`ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`

2. gp2をインストール
`brew install gpg2`

3. rvmのページに記載されているpublic keyをインストール
`gpg2 --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3`

4. rvmとrailsをインストール
`\curl -sSL https://get.rvm.io | bash -s stable --rails`

5. bashを反映
`source ~/.profile`

# SQLite3をインストール

macの場合、インストール不要
Windowsの場合は下記からダウンロードしてインストールするらしい
http://www.sqlite.org/

# node.jsをインストール

ここからダウンロードして、インストールする
http://nodejs.jp/nodejs.org_ja/
CocoaPodsを0.38以降にする時にdeduplicate_targetsをfalseにして重複排除を無効化する


CocoaPodsを0.39.0にアップデートしたらAFNetworking v2.5.3で下記のようなビルドエラーが出た。

```
Pods/AFNetworking/UIKit+AFNetworking/AFNetworkActivityIndicatorManager.m:118:21: 'sharedApplication' is unavailable: not available on iOS (App Extension) - Use view controller based solutions where appropriate instead.
```

# 最初に解決法

CocoaPodsでターゲットごとのライブラリ重複を許可するには、`~/.cocoapods/config.yaml`に`deduplicate_targets: false`を[記述するようになっている](https://github.com/CocoaPods/CocoaPods/releases/tag/0.38.0.beta.1)のでこれを設定するとビルドできる。

ただもし、`~/.cocoapods/`以下に設定ファイルを置きたくない場合、環境変数`CP_HOME_DIR`に設定ファイルのパスを設定する。具体的にはプロジェクトがあるカレントディレクトリ以下に.cocoapodsを設定し`./.cocoapods/config.yaml`のファイルを読みこませたい場合

```
$ env CP_HOME_DIR=./.cocoapods pod install
```

のようにし、一時的に環境変数をセットした状態でpod installを行う。

## その他解決法

「CocoaPods 0.38からのtarget重複排除を無効化する」
http://qiita.com/Branch_Dev/items/74c746d4563c07ffa096

にすでに他の方法が書かれてあるんだけど自分にはピンとこなかった。

# どういう時に重複排除を無効化したいのか

CocoaPodsは[0.38.0beta1からinstallするライブラリの重複を許さなくなってるっぽい](https://github.com/CocoaPods/CocoaPods/releases/tag/0.38.0.beta.1)。

これは特にExtensionでAFNetworkingを利用する際に厳しい仕様変更になっている。

Extension側では`AF_APP_EXTENSIONS`をdefineしAFURLConnectionOperation.mで下記のように処理を分岐している。defineしてないとExtension側ではビルドエラーになってしまう。

```objc
#if defined(__IPHONE_OS_VERSION_MIN_REQUIRED) && !defined(AF_APP_EXTENSIONS)
    if (_backgroundTaskIdentifier) {
        [[UIApplication sharedApplication] endBackgroundTask:_backgroundTaskIdentifier];
        _backgroundTaskIdentifier = UIBackgroundTaskInvalid;
    }
#endif
```

そのため、もともと自前のプロジェクトにあるPodfileでは、`Pods-ShareExtension-AFNetworking`という名前で生成されたTARGETの時のみ`AF_APP_EXTENSIONS`を有効にする、という処理を書いていた。

# 俺はこう思ったっス

そもそも

- CocoaPodsでinstallの設定を変える手段が~/.cocoapods/config.yamlなのが何かおかしい気がするんだけど
	- pod install時に都度パラメータで指定するほうが自然じゃないだろうか
- AFNetworkingをExtensionで使うときにdefineしてるかどうかで分岐させるの何かおかしい気がする

# 追記

## AFNetworking v2.6で対応されてた

AFNetworking v2.6で[対応されてた](https://github.com/AFNetworking/AFNetworking/blob/ee89cc988e2709a025908ef952a7377ce7ba83b8/CHANGELOG.md#260-08-19-2015)。

NS_EXTENSION_UNAVAILABLE_IOSを使うことで、Extensionからはコンパイル時に見えないようになっている。
CentosにPHP7をyumでインストールする

ソースからのインストールがじゃまだからやりたくない、ということで
Centos の yumでインストールする方法を探してみました。

参考サイト）
https://webtatic.com/packages/php70/


**１. CentOS/RHEL 6.x:用のrpmを登録しておきます。**

```lang:
rpm -Uvh https://mirror.webtatic.com/yum/el6/latest.rpm
```

Centos7の場合は登録するrpmが違う模様です。
参考サイトのCentOS/RHEL 7.x:を参考にしてください。


**２. YumコマンドでPHP7をインストールする**
いつものどおりのインストールですが、
有効なリポジトリを”webtatic-testing”に指定すること！
パケージはphp70wとなっていることを意識してください。

```lang:
yum install --enablerepo=webtatic-testing php70w php70w-opcache
```

**３. パケージを確認**
出てくるなかから、必要なものをチェックしてインストールすれば良いです。
上記の参考サイトにパケージ一覧が掲載されていますので
そちらをご参考にしてもＯＫです。

```lang:
yum list --enablerepo=webtatic-testing | grep php70w*
```

実行速度が結構重くていやだったPHPExcelも、PHP7が使えるように
なったらかなり活躍できるのではないかと期待しています。

まだまだ開発中のものなので開発用ＰＣとかマイＰＣ以外で
試す際には十分にお気を付けましょう。
好きな長さのLANケーブルを自作したい


# はじめに

作品制作のために空間的に数十ｍ離れたArduinoたちを有線で接続する必要に迫られた。

ぴったりサイズのLANケーブルを作りたくなった時のために、LANケーブル自作について検討した。

なおyodobashi.comでは[20mLANケーブル](http://www.yodobashi.com/ec/category/index.html?count=24&disptyp=02&sorttyp=COINCIDENCE_RANKING&cate=&word=LAN%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB+20m&ginput=LAN%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB%2B%2B15m)が1200円ほどで購入可能である。



# 必要なもの

[LANケーブル自作キット](
http://www.amazon.co.jp/LAN%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB%E4%BD%9C%E6%88%90%E3%82%BB%E3%83%83%E3%83%88-CAT5%E7%94%A8-%E7%9A%AE%E3%82%80%E3%81%8D%E5%B7%A5%E5%85%B7-RJ45%E3%83%97%E3%83%A9%E3%82%B0-LANSET-x/dp/B002P2RMSO/ref=sr_1_2?ie=UTF8&qid=1447329815&sr=8-2&keywords=lan%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB%E8%87%AA%E4%BD%9C%E3%82%AD%E3%83%83%E3%83%88)

[エレコムLANケーブル100m](http://www.amazon.co.jp/ELECOM-LAN%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB-RoHS%E6%8C%87%E4%BB%A4%E6%BA%96%E6%8B%A0-LD-CT6-BU100/dp/B0010P69BS/ref=sr_1_19?ie=UTF8&qid=1447329815&sr=8-19&keywords=lan%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB%E8%87%AA%E4%BD%9C%E3%82%AD%E3%83%83%E3%83%88)

大量にLANケーブルを必要とする時（いまいちどんな時かわからないが）にはこの検討が役に立つことと思う。
AWS MFAの設定


#0.MFAとは
Multi-Factor Authentication の略で多要素検証の意味。
登録ユーザーがAWSにログインする際、アカウントとパスワードに加え、ユーザーが所有しているデバイスから発行される6桁の数字（ワンタイムパスワード）を入力することで、セキュリティをより強固なものにできる。
AWS公式ページの情報はこちら　→　http://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_mfa_enable_virtual.html

#1.MFAデバイスの用意
ワンタイムパスワード発行用に
1.仮想MFAデバイス（スマホやタブレット用の無料アプリケーション）
2.物理MFAデバイス(専用デバイス）
がある。2.のほうが堅牢だが、通常1.で十分。

今回は、iphoneにGoogleAuthenticator https://itunes.apple.com/jp/app/google-authenticator/id388497605?mt=8 をインストールして利用

#2.AWSにMFAの設定

1. AWSマネジメントコンソールのIdentity &Access Managementを選択
![Kobito.vL9JFm.png](https://qiita-image-store.s3.amazonaws.com/0/72578/03e8676b-c5dd-8fd1-27f4-03d9e06ea1dc.png "Kobito.vL9JFm.png")

2. 仮想MFAデバイス　を選択
![Kobito.p36z3W.png](https://qiita-image-store.s3.amazonaws.com/0/72578/83f63608-0e5c-9217-4464-3c08b8b5a4c0.png "Kobito.p36z3W.png")

3. 表示されたバーコードをiphoneにインストールしたGoogle Authenticatorで読み取る
![Kobito.RyiMV8.png](https://qiita-image-store.s3.amazonaws.com/0/72578/6877dd43-d77e-aeb3-96ae-bb87359e0fed.png "Kobito.RyiMV8.png")

4. 認証コード1,2を登録して仮想MFAの有効化ボタンを押す
Google Authenticatorに表示される認証コードを2つ続けて、認証コード1,2に登録する。

#3.MFAを使ってサインイン
1. AWSコンソールから一旦サインアウト
2. 次回からユーザ、パスワードでサインイン後に以下のような認証コード入力欄が出てくるので、Google Authenticator表示のワンタイムパスワードを入力してログインする
![Kobito.cr0AsD.png](https://qiita-image-store.s3.amazonaws.com/0/72578/68a8c967-69a8-2e56-616e-77b5d0875e61.png "Kobito.cr0AsD.png")


#4. ちなみに・・・
これでセキュリティばっちり！だが、万が一仮想MFAデバイスを紛失してしまった場合は、Amazonサポートに連絡して無効化してもらい・・・など面倒な事になるので、くれぐれも管理は気をつける必要あり。
http://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_mfa_lost-or-broken.html
PL/Pythonの実行環境にpyenvでインストールしたPythonを使う

## はじめに

Pythonは、[chainer](https://github.com/pfnet/chainer)や[tensorflow](https://github.com/tensorflow/tensorflow)などの分析パッケージが公開され、ますますデータ分析ツールとして注目を集めています。
そんなPythonをPostgreSQLのファンクション実装言語として利用できる機能に「PL/Python」というものがあります。

デフォルトでPL/PythonはシステムのPythonを使ってしまいます。
一方でシステムのPythonを汚したくない場合などでは、pyenvでPython環境を分離して分析パッケージを入れる場合がありそうです。

そこで、PL/Pythonの実行環境に、pyenvでインストールしたPythonを使う方法を調べました。

## 1. pyenvでのPythonインストール

PL/Pythonは`libpython~~.so`を参照します。
通常の`pyenv install`では共有ライブラリはインストールされないので
以下のようにします。

```
CONFIGURE_OPTS="--enable-shared" pyenv install 2.7.10
```

これでpyenv側はOK


## 2. PostgreSQLでのPL/Pythonコンパイル

PostgreSQLはソースからコンパイルします。
https://github.com/postgres/postgres
ここから、`git clone`すればいいと思います。

そして、`configure`で以下のようにします。

```
./configure --prefix=/home/user/pgsql/pgsql9_5 --with-python=yes PYTHON=/home/user/.pyenv/versions/2.7.10/bin/python
```

`--prefix`はつけてもつけなくてもいいです。
重要なのが
`--with-python=yes`
と
`PYTHON=/home/user/.pyenv/versions/2.7.10/bin/python`

`--with-python=yes`はつけないと、そもそもPL/Pythonがコンパイルされません。
`PYTHON=/home/user/.pyenv/versions/2.7.10/bin/python`はpyenvでインストールした
Pythonバイナリの場所を指定します。
するとpyenvのPythonを利用するようにPL/Pythonがコンパイルされます。

`configure`を実行すると、生成される`Makefile.global`に以下の記述がされます。

```
python_includespec  = -I/home/user/.pyenv/versions/2.7.10/include/python2.7
python_libdir       = /home/user/.pyenv/versions/2.7.10/lib
python_libspec      = -L/home/user/.pyenv/versions/2.7.10/lib -lpython2.7
```

※記述の先がpyenvのパスになっていなかったら直します。


あとは、PostgreSQLを`make; make install`すればPL/Pythonの実行環境がpyenvでインストールされたPythonとなっています。

## 補足

PostgreSQLごとコンパイルしたが、本来はPL/Pythonのみコンパイルしてもいいはず？
Spreeの後継ECシステム、Solidusのインストールメモ

## Solidusとは

[solidusio/solidus](https://github.com/solidusio/solidus)

SpreeというEコマースのライブラリからフォークした後継ライブラリです（一時期はSpreeの開発が終了すると噂されていましたが、まだ活発に開発が続けられていますね）

[参考 : Spree is Dead](http://tech.degica.com/ja/2015/11/10/spree-is-dead/)

設計思想はSpreeのそれを受け継ぎ、ブラッシュアップしたものとありました。2018年12月現在、バージョン2.7が公開されており、現在も活発に開発が続けられています。

またエクステンションをインストールすることで様々な機能を追加することもできます。

http://extensions.solidus.io/

## インストールしてみます

折角なのでSolidusをインストールして起動してみましょう。

まずはRailsプロジェクトを作ります。

    $ rails new myshop --skip-bundle

Gemfileに以下を記載

```rb
gem 'solidus'
gem 'solidus_auth_devise'
```

あとはいつものコマンドです。

```
$ bundle install
$ bundle exec rails g spree:install
```

私の場合は特にエラーもなくここまで終えられました。サーバーを起動してみます。

    bundle exec rails s

こちらがトップ画面（バージョン2.7）

![Sample_Store.png](https://qiita-image-store.s3.amazonaws.com/0/7323/c9a709df-f496-6813-f0d1-db2c06a34cf2.png)

管理画面です。

![Orders.png](https://qiita-image-store.s3.amazonaws.com/0/7323/59e6f14a-c217-f35d-88fc-0ae3272439bc.png)


## Spree、Solidusどちらを選ぶべきか？

これからRailsでECサイトを構築しようという人にとっては悩ましい問題ですね。。

冒頭でも触れたとおり、開発が終了するという噂も流れたSpreeですが、現在も活発に開発が続けられています。またSolidusもプロジェクトがはじまって3年以上経ちますがこちらも開発が活発です。将来性という点では現時点では評価しかねます。

また設計思想についても元々1つのライブラリだったこともあり、大きくは違わないといった印象です。

アーキテクチャに関しては次の記事でSolidusとSpreeの最近の比較がまとめられていますので、こちらを参考にしてみても良いかもしれません。

[Best Rails Ecommerce Platform: Spree Commerce vs Solidus](https://rubygarage.org/blog/spree-commerce-vs-solidus)

またSolidusを使ってECサイトを構築する際のテクニックや考え方を別記事でまとめていますので、よければそちらもどうぞ。

https://qiita.com/yuskamiya/items/32f383cb8d18ceb751d7
MacでLinuxへssh -Xする

ちょっとだけハマったのでメモ。
Linux上でGUIアプリケーションを使うために`ssh -X`で接続してアプリを起動しようとしても、エラーが出て失敗した。
`echo $DISPLAY` とか `xhost` とかやってもX11関連の設定がされていなくて焦った。

## 要約

Macで`ssh -X`で接続する前に**XQuartz入れてMacを再起動させる。**

`brew cask`なら一発。

```bash
brew cask install xquartz
```

## 原因

Macには`X11`がデフォルトだとインストールされてない。

## 対処

`spotlight`で`X11`を検索するとアプリがあるが、起動させると

「アプリケーションからX11へのアクセスを要求されました。X11を今すぐインストールしますか？」

とダイアログが出るのみ。`続ける`を押すと`XQuartz`の説明ページヘ飛ばされる。
`XQuartz`公式サイトへのリンクがあるので、そこを辿って`XQuartz`を導入する。

`brew cask`でインストールできるので、使っている人はこっちのほうが楽。

```bash
brew cask install xquartz
```

インストール後、**必ずMacを再起動**させること。
インストール直後にターミナルで`ssh -X` やっても`XQuartz`は反応してくれなかった。
UIImagaPickerControllerで強く押した時にクラッシュする

## 追記:12/21 2015
もっとちゃんと直してる人がいました。
http://stackoverflow.com/questions/33331758/uiimagepickercontroller-crashing-on-force-touch
MSDPreventImagePickerCrashOn3DTouch.h
MSDPreventImagePickerCrashOn3DTouch.m
を自プロジェクトに突っ込んで、
```MSDPreventImagePickerCrashOn3DTouch()```
を呼ぶだけです。

## 追記前
UIImagePickerがまだpeekとpop(?)に対応していないらしく、3Dタッチ用のメソッドを呼ぼうとしてそんなもんねーよって怒られちゃいます
てことで、カスタムUIWindowでタッチイベントをフック&アッパー（はい、ごめんなさい。）

Movedかつforceが2ぐらいのときに呼ばれる感じだったので、こんな感じに。

```swift
class CustomWindow: UIWindow {
    override func sendEvent(event: UIEvent) {
        let touches = event.allTouches()
        if touches?.count == 1 {
            if let touch = touches?.first, _ = touch.view {
                if touch.phase == .Moved && "\(touch.view!.classForCoder)" == "PUPhotoView" {
                    if #available(iOS 9.0, *) {
                        let force = touch.force
                        if force < 1.5 {
                            super.sendEvent(event)
                        } else {
                            //  (   -з) 無視
                        }
                    } else {
                        super.sendEvent(event)
                    }
                } else {
                    super.sendEvent(event)
                }
            } else {
                super.sendEvent(event)
            }
        } else {
            super.sendEvent(event)
        }
    }
}
```

[if..](https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&ved=0CEgQtwIwBmoVChMI8pf8oeWKyQIVxq2mCh0PIwTg&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNDQXcgUkkC8&usg=AFQjCNFsHIsbzkKQhICSjTjeHx5dAbBwjA)だらけだったのでごにょごにょしてこうなりました。

```swift
override fun sendEvent(event: UIEvent) {

    if #available(iOS 9.0, *) {
        if let touches = event.allTouches() where touches.count == 1 {
            if let touch = touches.first, let view = touch.view where touch.phase == .Moved && "\(view.classForCoder)" == "PUPhotoView" {
                if touch.force > 1.5 {
                    return
                }
            }
        }
    }

    super.sendEvent(event)
}
```

もうちょっと綺麗にならないものか、、、
DataprocのHadoopでdistcpがエラーになる対処法

DataprocのHadoopでS3からGCSへdistcpしようとすると、
VerifyErrorになったり、YARNのVirtual Memory使用量チェックに引っかかったりして失敗する。

これらのエラーを回避するには以下のスクリプトをinitialization-actionsに指定する。

```
#!/bin/bash

echo "Remove bigquery-connector-*.jar because VerifyError occurrs when discp is executed."
rm /usr/lib/hadoop/lib/bigquery-connector-0.7.2-hadoop2.jar

echo "Add property to yarn-site.xml."
perl -i -pe 's#</configuration>#
  <property>
    <name>yarn.nodemanager.vmem-check-enabled</name>
    <value>false</value>
  </property>
</configuration>#m' /etc/hadoop/conf/yarn-site.xml

echo "Restart hadoop-yarn-nodemanager"
ROLE=$(/usr/share/google/get_metadata_value attributes/role)
if [[ "${ROLE}" == "Master" ]]; then
  # pass
  echo "pass"
else
  pid=`cat /var/run/hadoop-yarn/yarn-yarn-nodemanager.pid`
  echo "kill $pid"
  kill $pid
fi
```

こんなかんじ。

```
% gcloud beta dataproc clusters create <CLUSTER NAME> --zone <ZONE> --initialization-actions gs://<BUCKET>/<PATH TO FILE>
```

これでS3からGCSへのdistcpができる！

```
% hadoop distcp 's3n://<SOURCE BUCKET>/...' 'gs://<DESTINATION BUCKET>/...'
```

以上
メディアクエリは詳細度を変えない

レスポンシブなWeb開発に欠かせないメディアクエリですが、うまく考えて使わないと失敗することがあります。

# 失敗事例
Bootstrapで幅が狭まると2段から1段に変わる、というようなスタイルを使っていたのですが、その中で「2段の時は右寄せだけど、1段の時は左寄せにしたい」ということになって、自分でスタイルを書きました。その過程で、段の変わる位置を変数として書けたほうがいいな、と考えて、メディアクエリが必要な方だけBootstrap本体を呼び出すのと同じSCSSに入れました。

```scss:失敗例
//Bootstrap本体を呼ぶファイルからimport
@media(max-width:$screen-md-max){
  #some_div{
    float: left;
  }
}

//別のファイルで定義
#some_div{
  float: right;
}
```

そもそも論を言えば、1つのセレクタにかけるCSSを複数ファイルで定義するなんてこと自体、どう考えても適当ではないのですが…それはさておいても、このように書いたCSSは、**常に右寄せ**となってしまいました。

# 失敗要因〜詳細度
CSSの「かかり具合」、正しい用語を使えば「詳細度」という概念があります。[詳しい説明をしてくれている記事](http://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4)があるので自分からは省略しますが、何がどれだけセレクタとして指定してあればどう優先されるか、という基準となっています。

そして、メディアクエリは、この詳細度を考える上で**考慮されません**。ということで、同列と判定された結果、あとから書いたメディアクエリなしのほうに上書きされてしまったということでした。

# 正しいかけ方
このような事態を防ぐには、

* メディアクエリ自体を、排他的になるようにかける
* メディアクエリありのCSSをあとから書く

ことで回避できます。`!important`や詳細度を変えるのは、あまり対策としておすすめできない感じはします。
WEB Apiの話 (Restful)



# いろいろなAPIの種類

|API 名| プロトコル  | データの形式 | 通信 |
|:-----------:|:------------:|:-----:|:-----:|
| REST | REST |JSON、XML    |同期|
| SOAP| SOAP|XML    |同期|
| Streaming| Bayeux|JSON|非同期|
| XML-RPC| RPC|XML|同期|
| JSON-RPC| RPC|JSON|非同期|

>[Twitter streaming api](https://dev.twitter.com/streaming/public)
>[cybozudev api](https://cybozudev.zendesk.com/hc/ja/categories/200157770)

# Restとは
- RESTはREpresentational State Transferの略。
- RESTの原則に従って実装されているシステムのことを、RESTfulと呼ぶ。
- RESTの世界では、ネットワーク上のコンテンツ(リソース)を一意なURLで表すのが基本。
- 各リソース（URL）に対してPOST、GET、PUT、DELETEでリクエストを送信する。
- 上のリクエストは、CRUD（Create、Read、Update、Delete）に紐付ける。
- 大体、レスポンスをXMLやjsonの形式で受け取る。

# Restの設計
- URL設計
  - リソースを名詞であらわす。**例**: /user/10  /song/5  video/7
  - POST は create, GET は read, PUT は update, DELETE は delete。HTTPのメソッドをリソースの操作する。
  - リソースを名詞で表現できない場合、動詞使う。**例**: /search /convert
  - リクエストのパラメータを活用し、URLの階層を浅く保つこと。
  - リソースの関係の階層の表現。**例**: user/999/friends
- version設計
  - バージョンをつけること。(API改修は必ずある)　**例**:`/v1/user`
  - バージョンは URL にいれると, HTTP ヘッダにいれると、2 パターンがある。
  　ブラウザ開発しやすいのは、URLにいれるほう。
- エラーハンドリング
  - 成功: 200, 201
  - client error: 400, 401, 403, 404
  - server error: 500
  - 変更なし: 304
- パラメータの表現
  - パラメータにカンマ区切りで指定　**例**: /shop?fields=name,category,location
  - offse 番目から limit 件取得　　　　**例**: /shop?limit=25&offset=10`



# RestのDOCの便利ツール
>[iodocs](http://www.mashery.com/api/io-docs)
>[Swagger](http://swagger.io/)
>[Apiary.io](https://apiary.io/)
AndroidStudioで実行時にCannot reload AVD list: ~ と出る時の対処法

先日AndroidStudioでプロジェクトを実行しようとしたら、
`Cannot reload AVD list: cvc-enumeration-valid: Value '280dpi' is not facet-valid with respect to enumeration 以下省略`
というエラーがでて動かなくなってしまった。

対処法は
`/Users/ユーザ名/Library/Android/sdk/tools/lib/devices.xml`
のファイルをコピーし、それをエラー画面に書いてあるandroidverフォルダの中と置き換える。

例 android-22のandroid-wearのarmeabi-v7aの時

`/Users/ユーザ名/Library/Android/sdk/system-images/android-22/android-wear/armeabi-v7a/devices.xml`
と置き換え
PHPTALからTwigへ移行するための対応表

XHTMLと親和性の高いテンプレートエンジン[「PHPTAL」](http://phptal.org/)を使っていました。
慣れてくると共にPHPTALの機能を使い出し、とうとう使い方がTwigっぽくなってきたので、いっそのこと移行してしまえと思ったのはいいものの･･･
似てたり違うところがあったりするので、慣れるまでの間のため、互いの対応をまとめました。

##Twigで新しく出てきた概念

###テンプレートファイル継承
`{% extends 'filename' %}`
http://twig.sensiolabs.org/doc/tags/extends.html

###同名blockの継承
`{% use 'filename' %}`
http://twig.sensiolabs.org/doc/tags/use.html

###ファイル読み込み割りいれ
`{% include 'filename' %}`
http://twig.sensiolabs.org/doc/tags/include.html

---

##対応するものもしくは、それに近いもの

###METAL
####define-macro

```twig:
{% macro 'macroname'(arg1, arg2) %}
...
{% endmacro %}
```

####use-macro

```twig:
{% import 'filename' as ailias %}
{{ ailias.macroname(arg1, arg2..) }}
```

####define-slot

```twig:
{% block 'blockname' %}
...
{% endblock %}
```

####fill-slot

```twig:
{% embed 'filename' %}
{% block 'blockname' %} filled contents {% endblock %}
{% endembed %}
```

###TAL

####block

```twig:
{% block %}
...
{% endblock %}
```
####repeat

```twig:
{% for row in rows %}
...
{% endfor %}
```
####define

```twig:
{% set var = 'value' %}
````

####condition

```twig:
{% if boolean %}
...
{% elseif boolean %}
...
{% else %}
...
{% endif %}
```

###TALES

####exists:

```twig:
{% if var is defined %}
...
{% endif %}
```

####true:

```twig:
{% if var is not empty %}
...
{% endif %}
```

####structure
`{{ var|raw }}`

####default
`{{ var|default('defaultValue') }}`

####php:
これが必用な時は大抵FilterもしくはFunctionなので、Twig_SimpleFilterなどのTwig_Simple*系クラスが用意されています。
これを利用してcallableで手軽に追加しましょう。

方法はこちらを参考に：
http://twig.sensiolabs.org/doc/advanced.html
jacocoを使ってカバレッジを取得するGradleタスクを作る

Android Studioでライブラリプロジェクトのカバレッジを測定した時のメモです。

カバレッジを取りたいモジュールのbuild.gradleに以下を追加して、Run>Edit ConfigurationsからGradleタスクを登録しました。JsonPullParserを利用しているので、自動的に生成される*Genを除外するようにしました。

```groovy

apply plugin: 'jacoco'

// カバレッジ測定タスク
task jacoco(type: JacocoReport, dependsOn: "testDebug") {
    reports {
        // CIツール上で実行する場合
//        xml.enabled = true
//        html.enabled = false
//        xml {
//            destination "${project.rootDir}/build/reports/jacoco/${project.name}/jacoco_report.xml"
//        }
        // AndroidStudioでタスクを単体実行する場合
        xml.enabled = false
        html.enabled = true
        html {
            destination "${project.rootDir}/build/reports/jacoco/${project.name}"
        }
    }
    classDirectories = fileTree(
            dir: './build/intermediates/classes/debug',
            excludes: ['**/R.class',
                       '**/R$*.class',
                       '**/BuildConfig.class',
                       '**/*Gen.class',
            ])
    sourceDirectories = files('src/main/java')
    executionData = files('build/jacoco/testDebug.exec')
}

```
Espresso v2:IncompatibleClassChangeErrorの対処

kotlinとEspresso v2によるテストの

```lang:MyActivityTest.java
@Rule @JvmField
 val activityRule = ActivityTestRule<MyActivity>(MyActivity::class.java,true,true)
```

と書いた行で
`java.lang.IncompatibleClassChangeError: my.package.name.MyActivity
at my.package.name.MyActivityTest.<init>
`
のエラーが発生。試行錯誤して別端末で試したらエラーメッセージが違うことも発見。
上記がNexus5で発生したもので、XperiaZ3では`java.lang.NoClassDefFoundError: my/package/name/MyActivity`となりました。

原因はRecyclerViewのテストのために追加した`com.android.support.test.espresso:espresso-contrib:2.2`の設定漏れで、

http://qiita.com/Yuki_312/items/bd6ad60a32b4e8c42022
こちらを参考にbuild.gradleを修正したら直りました。
Rebuild.fm 116単語帳

この前カッとなってRebuild.fmのオレオレ単語帳を書いたのですが、案の定というか結局というか単語帳が必要なのは（現時点では）naoyaさん回だけということに気付きました。

# 116: Sinatra On Rails (Naoya Ito)
今回のゲストは伊藤直也さん。前半は開発合宿の話が中心で、後半はElectronの話からWeb開発〜DDDの話まで幅広い内容でした。

## フォーカスなんとか
* Twitterの閲覧を制限できるChrome拡張
* [StayFocusd](https://chrome.google.com/webstore/detail/stayfocusd/laankejkbhbdhmipfmgcngdelahlfoji "StayFocusd")のことかな。

## 中田さん
* Rubyのコミッター
* https://github.com/nobu
* と思ったら、Show Notesに書いてありました。

## ジャック・ドーシー
* Twitter創業者のひとり。
* 最近暫定的にTwittrのCEO復帰。

## Delicious
* 一瞬なんだっけと思ったらソーシャルブックマークサイトだった。大学生の時使ってたな。
* https://delicious.com/

## ユビキタス言語
* 開発者とユーザーとの間で使われる共通言語。
* DDDで重要と言われている。

# まとめ
今回は知らない単語も殆どなくスムーズに聴けました。とは言え退屈というわけではなく、面白い内容でとても勉強になりました。
知らない単語数が少ない時は、もうちょっと深掘りしてまとめようかな。

http://rebuild.fm/116/

## 参考サイト
戻ってきた、ジャック・ドーシー：Twitter暫定CEOに：
http://wired.jp/2015/06/12/twitter-jack-dorsey-in/
UbiquitousLanguage：
http://capsctrl.que.jp/kdmsnr/wiki/bliki/?UbiquitousLanguage
ngrokを使ってローカルの開発環境を一時的に外部に公開する

```
この記事ではMac OSX(10.10.4)をつかっています。
nmp(2.5.1)を使ってngrokをインストールします。またnpmはインストール済みの前提です。
インストールしているngrokのバージョンは2.0.19です。
```
## はじめに
サイト制作の過程でクライアントにちょっとした確認をしてもらいたいけど、タイミングによってはテストサーバを準備したりアップロードする作業が煩わしい時があるのではないでしょうか。
そんなときはngrokを使うと、いくつかのコマンドを打つだけで自分のローカル環境を外部に公開することができます。

まずはngrokをインストールします。

**インストール**

```
$ npm i -g ngrok
```

## ローカルサーバをたてる
このくだりはMAMPなどを使ってローカルサーバを立てる場合は不要です。

```
$ python -m SimpleHTTPServer
```
ポート番号を省略すると8000が用いられます。

```
$ python -m SimpleHTTPServer 8888
```
ポート番号8888を指定する場合

##ngrokの起動
ローカルサーバを立ち上げたらngrokを起動してみましょう

```
$ ngrok http 8888
```
ローカルサーバを立てたポートを指定してngrokを起動します。
以下の様な画面になると思います。

```
Tunnel Status                 online                                            
Version                       2.0.19/2.0.19                                     
Web Interface                 http://127.0.0.1:4040                             
Forwarding                    http://decd3d2a.ngrok.io -> localhost:8888        
Forwarding                    https://decd3d2a.ngrok.io -> localhost:8888       
                                                                                
Connections                   ttl     opn     rt1     rt5     p50     p90       
                              7       0       0.00    0.00    0.00    0.00      
                                                                                
HTTP Requests                                                                   
-------------                                                           
```
確認を依頼したい相手に、``http://xxxxxxxx.ngrok.io``の部分を伝えます。自分自身のスマホで確認したい時にも便利かもしれません。
終了したい場合は``ctl + C``を入力。

認証のパスワードを設定したい場合は、[公式サイト](https://ngrok.com/)にメールアドレスの登録を行うことで設定ができます。
登録が済んだらDashboardのmainタブにあるYour Tunnel Authtoken(英数字の長い文字列)をコピーします。

```
$ ngrok AUTHTOKEN(←ここをコピーした文字列にする)
```

もう一度ngrokを起動してみましょう。今度は認証も設定します。

```
$ ngrok http -auth="id:pswd" 8888
```
「id」と「pswd」の部分を任意のidとパスワードにおきかえてください。



##参考にさせていただいた記事
[開発用ローカルサーバを立ち上げる方法](http://qiita.com/higuma/items/b23ca9d96dac49999ab9)
UITextView内の特定文字を文字装飾してタップイベントを追加する

## 概要
以下のような画面で、名前（wrbss）にだけタップイベントを追加したい場合にとった方法です。文字列はUITextViewで表示しています。

<img width="341" alt="スクリーンショット 2015-11-12 18.46.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/57610/8edb00ca-cf09-d36d-59c3-a34d203a4d62.png">



## やり方
NSAttributedStringにリンクを仕込んで、リンクタップイベントを上書きすることで実装しました。

### 対象クラスにUITextViewDelegateを実装

```objc:SampleViewController.h
@interface SampleViewController : UIViewController<UITextViewDelegate>

@property (weak, nonatomic) IBOutlet UITextView *comment;

@end
```

### NSAttributedStringで表示文字列を生成
文字列をNSAttributedStringで生成して、タップイベントを付けたい箇所にNSLinkAttributeNameを設定

```objc:SampleViewController.m
    // タップ可能文字列
    NSMutableAttributedString *tappableText = [[NSMutableAttributedString alloc] initWithString:@"wrbss" attributes: @{
        NSForegroundColorAttributeName:[UIColor lightGrayColor],
        NSFontAttributeName:[UIFont systemFontOfSize:13.5f],
        NSUnderlineColorAttributeName: [UIColor clearColor],
        NSUnderlineStyleAttributeName: @(NSUnderlineStyleNone)
    }];

    // 識別するために適当なURLスキームを設定
    [tappableText addAttribute:NSLinkAttributeName value:@"sample://user" range:NSMakeRange(0, tappableText.length)];

    // 非タップ文字列
    NSAttributedString *normalText = [[NSAttributedString alloc] initWithString:postRecord.comment attributes:@{
        NSForegroundColorAttributeName:[UIColor blackColor],
        NSFontAttributeName:[UIFont systemFontOfSize:13.0f]
    }];

    NSMutableAttributedString *comment = [NSMutableAttributedString new];
    [comment appendAttributedString:tappableText];
    [comment appendAttributedString:normalText];

    _comment.attributedText = comment;
    _comment.linkTextAttributes = @{NSForegroundColorAttributeName:[UIColor lightGrayColor]};
    // リンクタップイベントをoverrideするためにdelegate
    _comment.delegate = self;
```

URLタップ時のイベントをoverrideして、上記で設定したURLの場合に実行したい処理を書く

```objc
- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange
{
    if ([[URL absoluteString] isEqualToString:@"sample://user"]) {
        // ここにタップ時の処理を書く
    }
    
    return NO;
}
```

## 参考
http://stackoverflow.com/a/21630187
フォグマシンによる煙噴出タイミングの自動制御に向けて




# はじめに
作品制作の際に、「やかんの沸騰」を擬似的に再現する必要に迫られた。。
自由なタイミングで煙と音をだして、やかんの沸騰を再現したい。

このページでは、煙のタイミング制御に向けた検討とHACK例について述べる。


# フォグマシンの機能について
細かい霧や煙をスイッチが押されたタイミングで噴出する。
ステージ演出や科学実験（空気砲の可視化）、消防訓練などに利用されるの一般的。

サウンドハウス社による[フォグマシンまとめ](http://www.soundhouse.co.jp/howto/light/smoke/)がわかりやすい。

動作のしくみは[こちら](https://www.rosco.com/japan/fog/how_mach_work.cfm)にくわしい。
目詰まりが故障の第一位（個人見解）なので、電源を入れっぱなしにして加熱をし過ぎないなどの対策が読み取れるかもしれない。


結論からして、一番安いものは[SMOKE STREAM JR](http://www.soundhouse.co.jp/products/detail/item/90444/)。

ラインナップとしては、web小売のサウンドハウス社が幅広く取り揃えている。
一覧は[こちら](http://www.soundhouse.co.jp/search/index/?s_maker_cd=&s_category_cd=1980&s_mid_category_cd=&s_large_category_cd=&s_product_cd=&search_all=&sSeriesCd=&sPriceFrom=0&sPriceTo=9999999&i_type=c&i_sub_type=&i_page=1&i_sort=Price_ASC&i_page_size=30&i_ListType=type1&tag=)。
目の粗いスモーク水溶性のリキッドなら5k円くらいから。目の細かな油性の霧が出るものなら100kくらいで存在している。


# スモークマシンHACKの先駆者たち
スモークマシンを[改造している記事](http://joshualawn.blog.fc2.com/blog-entry-12.html)はこちら。

改造後のフォグマシン熱くなった銅管の温度を見るためにも、[非接触温度計](http://www.amazon.co.jp/%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%BD%E3%83%8B%E3%83%83%E3%82%AF%EF%BC%88SainSonic%EF%BC%89-%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%BD%E3%83%8B%E3%83%83%E3%82%AF-%E9%9D%9E%E6%8E%A5%E8%A7%A6%E5%BC%8F%E3%80%80%E8%B5%A4%E5%A4%96%E7%B7%9A%E6%94%BE%E5%B0%84%E6%B8%A9%E5%BA%A6%E8%A8%88%E3%80%80%E3%83%AC%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%9D%E3%82%A4%E3%83%B3%E3%82%BF%E4%BB%98-%E3%80%90-32~%EF%BC%8B380%E2%84%83%E8%A8%88%E6%B8%AC%E5%8F%AF%E3%80%91/dp/B012M91P5U/ref=sr_1_2?ie=UTF8&qid=1447322858&sr=8-2&keywords=%E8%B5%A4%E5%A4%96%E7%B7%9A%E9%9D%9E%E6%8E%A5%E8%A7%A6%E6%B8%A9%E5%BA%A6%E8%A8%88)の購入も考えている。2k円ほど。
Rubyでできるあんなことこんなこと

[範囲オブジェクト編]

頭のいいRubyならこうしてくれるんじゃ？
勉強を兼ねて、どうなるかやってみました。
irbで試してみてください！
[version: 2.1.5]

* 範囲指定のおさらい
` 1..5  => 1 2 3 4 5 `
` 1...5 => 1 2 3 4 `
...とすると最後は含まないです。

* やってみよう

たとえば

```
(1..5).each do |i|
  puts i
end
```

結果は

```
1
2
3
4
5
=> 1..5
```

1から5までをカウントしてくれます。
では他の場合は？
` (1..5) `の部分をいろいろ変えてみよう！

* 文字列の場合

` ("a".."e") `
=> a b c d e となってほしいけど..?

```
("a".."e").each do |i|
  puts i
end
```

結果は

```
a
b
c
d
e
=> "a".."e"
```

ちゃんとなりました(´∀`*)

* ほかのものでもためしてみよう

その他いろいろ試してみました。


```
("z".."a")
```

=>z x y ..ってなるかなぁ

```
=> "z".."a"
```
逆はだめか..


```
"a".."Z"
```
```
=> "a".."Z"
```
小文字→大文字もなにも返ってこない。

```
"Z".."a"
```
```
Z
[
\
]
^
_
`
a
=> "Z".."a"
```
お？
返ってきた..けどASCIIコードになっているみたい


```
"first".."third"
```

これはどうでしょう

```
first
firsu
firsv
firsw
firsx
firsy
firsz
firta
firtb
firtc
firtd
firte
firtf
firtg
firth
.....

```
あわわわわ
文字列として扱ってしまいますね

では時刻はどうでしょうか

```
"10:30".."11:30"
```
```
10:30
10:31
10:32
10:33
10:34
...(省略)...
10:59
10:60
10:61
10:62
10:63
...(省略)...
10:97
10:98
10:99
11:00
11:01
...
```
時刻も文字列として扱ってしまうみたいですね〜

ほかにも、こんなことしたらこうだった！とか
ありましたらコメントしていただきたいです。
Array literal でカンマを書き忘れても SyntaxError にならないことがある件

## 期待通りに SyntaxError になるコード

```rb
[1 2]
# => SyntaxError: (irb):1: syntax error, unexpected tINTEGER, expecting ']'

[true false]
# => SyntaxError: (irb):1: syntax error, unexpected keyword_false, expecting ']'

[nil nil]
# => SyntaxError: (irb):1: syntax error, unexpected keyword_nil, expecting ']'
```

## 予想に反して SyntaxError にならないコード

```rb
["foo" "bar"]
# => ["foobar"]
```

カンマを書き忘れたら二つの `String` が結合されてひとつになってしまいました！
確認したところ `String` だけでも同じ挙動らしい。

```rb
"foo" "bar"
# => "foobar"
```

`String` の挙動には `#+` が必要かと思っていましたが、そうではなかったようです。

結構驚きあるように思いますがどうでしょう?
あとで ML にでも投げてみようかな。
(とっくに誰かつっぱねられてそうなので気が重い)
ncコマンドを使ってクライアントが投げ込んでくるHTTPを平文で取得する

RailsとかでAPIサーバー書いてる時、ローカルでRails(とか)を立ち上げるじゃないですか。

```
bin/rails s -p 3030
```

…と、こんな感じで仮に3030ポートで立ち上げてるとします。

ここで、iOS側とかのクライアントサイドソフトを、デバッグしたい通信の直前の状態まで遷移させます。
UIで止めるのが難しいなら、ブレークポイントで止めちゃっても良いと思います。

ここでncコマンドの出番。
まずは先のrailsサーバーをCtrl+Cで止めてから…

```
nc -l 3030
```

この状態で、クライアントの通信を走らせると、ncコマンドの方にHTTPリクエストが平文で流れてくるので、
プログラムから通信の詳細が分かりにくいときに便利です。

## 余談

僕は、iOSアプリで使っていたAlamofireのバージョンを上げたらバイナリファイルのアップロード部分が動かなくなって、原因究明したくでこの手段にたどり着きました。
rss開発でドハマりしたことで身を以て知った、phpソースの末尾を「?>」で閉じない方が良い理由

# rss開発でエラー

rssを開発するにあたり、以下のエラーにぶつかることに
> error on line 2 at column 6: XML declaration allowed only at the start of the document

# 原因特定

ソースを確認したところ、rssの先頭に空行が入ってエラーが起きている。

色々ググッて調べてみたところ、先頭の「<?xml version="1.0" encoding="UTF-8"?>」はPHPで記述した方が良いですよ等々
調べたところは全部試し尽くしたのにもかかわらず、相変わらずエラーが解消せずに途方に暮れる。
こういう時はとりあえず実装に関係する箇所を部分的に消してはリロードを地道に繰り返してみるのである。

そして、require_once 云々の行を消すとエラーが解消されることを発見。
require_onceで呼び出しているソースを見たところ、末尾を「?>」で閉じているPHPのソースだった。

このように、「?>」で閉じているPHPのソースを読み込むと何が起こるのかというと、
出力するページの意図しない箇所に不要な空行が入ったりするのである。
これが原因で、rssの出力時にエラーが起きていたのだった。

※ググると閉じちゃイケない理由がたくさんでてくる
http://itpro.nikkeibp.co.jp/article/COLUMN/20070307/264114/

# 解決方法

require_onceで呼び出しているソースの末尾「?>」を削除し、解決。
Ubuntu14.04にMySQL5.7を入れてみる

備忘を兼ねて、Ubuntu 14.04にMySQL 5.7をインストールする方法を紹介します。

## リポジトリの確認

[MySQL :: Download MySQL APT Repository](http://dev.mysql.com/downloads/repo/apt/)からmysql-apt-config_X.X.X-X_all.debのファイルのバージョンを確認する。

![tejun1.png](https://qiita-image-store.s3.amazonaws.com/0/100291/da75b76e-4862-33ed-2815-7cff46f53a28.png)

※執筆時点では、mysql-apt-config_0.5.3-1_all.debが最新。

## MySQLのインストール

MySQLをインストールしていく。　

```lang:Command
$cd /MySQLをダウンロードするディレクトリ
#.debファイルのダウンロード
$ wget http://dev.mysql.com/get/mysql-apt-config_0.5.3-1_all.deb
#パッケージのインストール
$ sudo dpkg -i mysql-apt-config_0.5.3-1_all.deb
```
　

![tejun2.png](https://qiita-image-store.s3.amazonaws.com/0/100291/5bed3cf5-f2cc-3ec7-252c-d6cf4560800e.png)
　
「Server」を選択。


![tejun3.png](https://qiita-image-store.s3.amazonaws.com/0/100291/acf6a334-faab-1bfd-25d8-b28e9c3d9252.png)
　
「mysql-5.7」を選択。

![tejun4.png](https://qiita-image-store.s3.amazonaws.com/0/100291/8819bb2e-2828-21d9-a593-d29565e69e75.png)
　
「Apply」を選択。


パッケージをアップデート & インストールする。

```lang:Command
$ sudo apt-get update
$ sudo apt-get install mysql-server

#もし↑でエラーが出たら↓コマンドを実行する。
$ sudo apt-get -f install
```

　
![tejun5.png](https://qiita-image-store.s3.amazonaws.com/0/100291/c7fa0416-2912-1154-aaf4-baa8ca1deb31.png)
　
「OK」を選択。

![tejun6.png](https://qiita-image-store.s3.amazonaws.com/0/100291/54f592e0-04fc-bf17-3fee-68b61e3023ea.png)

　
MySQLで使用するrootユーザのパスワードを入力する。

![tejun7.png](https://qiita-image-store.s3.amazonaws.com/0/100291/31c363b0-af70-811f-1f79-5d97c0030d0c.png)
　
再度、パスワードを入力する。


## MySQLにログインする

```lang:Command
$ mysql -u root -p
# 先ほど設定したrootパスワードを入力する。

Copyright (c) 2000, 2015, Oracle and/or its affiliates. All rights reserved.
　
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
　
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 
#上記のように表示されればOK
```

 
以上になります。
　
他にもmysql用のOSユーザ作ったり、文字コード変更したり色々やりますが、とりあえずここまで。
たったこれだけの作業ですが、ぺーぺーのインフラエンジニアにはこたえます。。
これくらいササッと作業できるようになったらカッコいいですね。

次回は今回インストールしたMySQL使ってZABBIXを入れていきます。

### (参考)
■MySQL APT repositoryからMySQL 5.7.xをインストールするスクリプト
https://hnakamur.github.io/blog/2015/09/22/noninteractive_install_from_mysql_apt_repository_on_ubuntu_trusty/
　
おしまい。
Chromeがキャッシュしているfaviconを削除する。


ファビコンの変更をしたのにリロードしても反映されなくてむずむずした。
ググったらキャッシュや履歴やらを削除すればいいと書いてあったけど、ファビコンだけピンポイントで削除したかった。

Chromeのアプリケーションのローカルに保存されているファビコンのファイルを直接削除した。

#win

```
C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default
```



#mac

```
/Users/ユーザー名/Library/Application Support/Google/Chrome/Default/
```


上記ディレクトリにある
**Favicons**というファイルを削除。
Chromeを **再起動**すればOK
"Unity"+"leap motion" [練習三つ]: VRGUI Project

<h2>VRGUI Project： 「メニュができる！」</h2>
<h3>Goal: 空間に浮かぶGUIを作る</h3><ul>
<li>Step 1: UnityでLeap Motionを使ってGesture Motion認識ができる。</font></li>
<li><font color=red>Step 2: uGUIでメニューを作って空間に浮かべる</font> </li>
<li>Step 3:メニュー選択。任意のGameObjectからRaycastを飛ばしてメニューを選択できる。選択状態で色を変える。できたら音も。</li>
<li>Step 4:メニューで選択した項目を実行。メニューに任意のアクションを割り当てられるように実行する。</li>
</ul>
<hr/>
Step２.
<h3>メニュができる/消える</h3>
Swipe gestureのscriptでsetAtctiveを使った。

＊下の方のSwipe motionをする時、メニュができる。
<img width="1436" alt="Screen Shot 2015-11-12 at 17.58.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/99307/e062c787-b3a8-b3a3-be43-aaba0d3503fd.png">

＊上の方のSwipe motionをする時、メニュが消える。
<img width="1440" alt="Screen Shot 2015-11-12 at 17.58.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/99307/3fb1c3ed-40b5-d303-6b51-9a033f256e65.png">

※ユーチューブ
https://youtu.be/I9V_VmQ9dMM