OmniAICreator/Qiita-1.07M huggingface dataset:
10分で始めるVue.js(基本編)

# 概要
昔に描いた[10分で始めるReact.js(v.0.14.7)](http://qiita.com/hikarut/items/98038788c4513b07bfa1)に続きVue.jsをちょっとだけ触ったので導入部分だけ簡単にまとめます。
Vue.jsを知らない人、もしくは知ってるけど実際に触ったことない人向けに、とりあえずどんなもんか短時間で体感できるようにまとめてみました。

# 0.Vue.jsとは
* [Vue.js](https://jp.vuejs.org/)とはMVVMと呼ばれる設計パターンを採用しているフレームワークです
* jsのフレームワークはたくさんありますがその中でも最もシンプルで学習しやすいフレームワークの1つとして有名です

# 1.環境のセットアップ

|環境|Mac 10.11.6(OS X EI Capitan)|
|:--|--:|

今回はVue.jsをnpmからインストールします。なのでまずはHomebrew,nodebrewを入れます。

```
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install nodebrew
$ mkdir ~/.nodebrew
$ mkdir ~/.nodebrew/src
$ nodebrew install-binary stable
$ echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.zshrc

確認
$ node -v
v6.8.0
```
参考：[NodeBrewインストール編](http://qiita.com/ebisennet/items/15c3c9fdb04e66db6323)

# 2.Vue.jsのインストール
nodeを入れたらnpmでVue.jsのインストールします。

```
$ npm install vue@csp

~/node_modules/以下にインストールされる
$ ls ~/node_modules/vue
LICENSE		README.md	dist/		package.json	src/
```
参考：[Vue.js インストール](https://jp.vuejs.org/guide/installation.html)

# 3.サンプルを試す
```html:sample.html
<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
</head>

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})
</script>

</html>
```
参考：[Vue.js はじめに](https://jp.vuejs.org/guide/index.html)

# 4.確認
ブラウザでsample.htmlを確認します。
![vuejs.gif](https://qiita-image-store.s3.amazonaws.com/0/110485/620e087f-2470-5f18-cc5b-f72ab46f75b4.gif)

# 以上です
* なんとなくのパッと見がReactよりもシンプルで分かりやすいかなと思います
* その分学習しやすかったり、運用しやすかったりする気がします
* Reactもそうですが、既存で使っているフレームワークや素のjsでも一部だけVue.jsにすることができるので試しに導入してみるとかも良さそうです
macOS Sierra でもKalabinerのvi modeでカーソル移動したい【Ctrl + h/j/k/l】

## 追記
Karabiner Elementsがかなり進化しているので、お役御免になってます。


# 背景
SierraにアップデートしたらKalabinerが使えなくなり、開発中のKalabiner Elementsで、キーのスワップはできるものの、vi modeが使えなくなったのが個人的にはとても痛い。
vi modeは、「Control_L + h/j/k/l」でカーソル移動ができる設定で、カーソルキーがないHHKBを使っている私には、とてもありがたかった。（Fnキー使ったら移動できるけどこっちのほうに手が慣れてしまっていた）

そこで、Kalabiner Elementsのissuesを見ていると、[Keyboard Maestro](https://www.keyboardmaestro.com/main/) 使って設定している方がいたので、つかってみた。
https://github.com/tekezo/Karabiner-Elements/issues/103

# 手順
ダウンロードしたzipを解凍して、出てきたappをアプリケーションにコピー。
アクセシビリティの許可が必要なので、「Keyboard Maestro」と、「Keyboard Maestro Engine」の両方を許可。

起動するとエディターが表示されるので、中央ペインの「Macros」下部の`+`ボタンからマクロを追加できる。

<img width="950" alt="スクリーンショット 2016-10-19 22.27.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/53116/ace9e40c-d5de-891d-f739-e9a305969c2f.png">


control + hjklを設定するには、`+ New Triggar`から`Hot Key Trigger`を選択し、対応するキーをタイプ。

対応するアクションとして、`+ New Action`より、`Type a keystroke`を選択し、カーソルキーをタイプすれば設定できる。

<img width="950" alt="スクリーンショット 2016-10-19 22.26.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/53116/307aa469-405f-3040-b20d-8a9cbf451613.png">

設定したところだが、問題なく使用できそう。これでSierraでもストレスなくカーソル移動ができるようになった。
これで、一安心と言いたいところだが、Keyboard Maestroはシェアウェアなようで、試用期間が終わり次第購入しなければならないっぽい。（試用期間がどれほどあるのか、少し探したところ、見当たらなかった。）

他にも便利なマクロなどが組めるようだが、vi modeの再現には少しオーバーな気がしないでもない。が、背に腹は代えられないので、試用期間中はありがたく使わせていただきます。

### 追記

key repeatやりたかったら↓みたいな感じで。
![スクリーンショット 2017-03-02 11.44.32.png](https://qiita-image-store.s3.amazonaws.com/0/53116/8028479a-e590-962d-eba5-20b574c6907e.png)
Redis で現在のオンライン人数をゆるく取得する

## 概要

たまに見かける「今このページ○人がこのページを見ています」などの人数を Redis のソート済みセット型でカウントしてみました。

完全なリアルタイムではありませんが、直近 N 秒以内にアクセスしたユーザをオンラインユーザと見なすことで比較的簡単＆低コストに取得出来ます。

## セットする内容

- キー名: 適当な固定値をセット
- スコア: 最後にアクセスしたタイムスタンプをセット
- メンバ: ユーザIDをセット

## 方法

### 1. 最終アクセス時間の追加 or 更新

アクセス時にアクセスしたユーザの UserID でメンバを追加します。
既に同じ UserID のメンバが存在する場合は最新のタイムスタンプに更新します。

（例） 2016-10-01 10:00:00 に UserID: 100 のユーザがアクセスした場合:

```text
ZADD last_access_timestamps 1475283600 100 
```

### 2. オンライン人数の取得

`ZCOUNT` を使うと指定した範囲内のスコアのメンバ数をカウントできるので、取得したいタイミングの時刻から一定秒数前の秒数を最小値にしてカウントします。
`+inf` は限界の最大値を表すキーワードです。

（例） 2016-10-01 09:50:00 以降にアクセスしたユーザをカウントする場合:

```text
ZCOUNT last_access_timestamps 1475283000 +inf
```

#### 取得時の負荷について補足

`ZCOUNT` の計算量は以下のようになっています。

http://redis.shibu.jp/commandreference/sortedsets.html#command-ZCOUNT
> 計算時間: O(log(N))+O(M) Nはソート済みセット内の要素の数、Mはコマンドによって返される要素の数です。もしMが一定ならO(log(N))となります。（たとえば LIMIT オプションを使って常に最初の要素を取ってくる場合）

オンライン人数が増えすぎると計算量が大きくなるので、場合によっては適当な人数を上限として LIMIT オプションを付けておいた方がいいと思います。
vimで文字コード確認・変更

###現在の文字コードを確認する

```
:set enc?
```

###開いているファイルを別の文字コードで表示する


```
:e ++enc=[文字コード]
```

```example
:e ++enc=euc-jp
```

###保存する文字コードを変更する

```
:set fenc=[文字コード]
```
SQL識別子を引用して謎っぽいSQLを書いてみる(PostgreSQL編)

# はじめに
今夜もまーったく役に立たないことを書いてみますよ。

# SQL識別子の引用
PostgreSQLは(というか、他のDBMSでもそうだと思うけど)、SQL識別子は二重引用符で引用することで、ほぼ文字の制約なく記述することができる。
そう、空白文字から構成されるテーブル名、型名(ドメイン名)、テーブル名もね。

# やってみた
今回は以下のSQL識別子を弄ってみた。

* ドメイン名
* テーブル名
* 列名

## ドメイン定義
まず、text型を基底とする2つのドメインを以下の名前で定義した。

```
test=# CREATE DOMAIN "  " AS text NOT NULL;
CREATE DOMAIN
test=# CREATE DOMAIN "　" AS text NOT NULL;
CREATE DOMAIN
```

最初のドメイン名は半角空白2文字、2番目のドメイン名は全角空白1文字です。
今回はやらなかったけど、``CREATE TYPE``を使って型定義をやっても同じようにできると思う。

## テーブル定義
```
test=# CREATE TABLE " " ("  " "  ", "　" "　");
CREATE TABLE
```
上で定義したドメイン名を列の型名として定義する。もちろん、列名も空白にする。

* 最初の列名は半角空白2文字
* 2番目の列名は全角空白1文字

なお、どういうわけか、表名とドメイン名(型名)は同一の名前空間(?)に属するためか、上で定義したドメイン名を表名に使おうとすると怒られる(´・ω・`)

```
test=# CREATE TABLE "  " (id int);
ERROR:  type "  " already exists
HINT:  A relation has an associated type of the same name, so you must use a name that doesn't conflict with any existing type.
```

## データ挿入

```
test=# INSERT INTO " " ("  ", "　") VALUES ('  ', '　');
INSERT 0 1
```

データ挿入のためにINSERT文を使う。

* 最初の列名は半角空白2文字
* 2番目の列名は全角空白1文字
* 最初の値は半角空白2文字
* 2番目の値は全角空白1文字

## \d コマンドでテーブル定義を確認

```
test=# \d " "
     Table "public. "
 Column | Type | Modifiers 
--------+------+-----------
        | "  " | 
 　     | "　" | 
```

## SELECTで検索

ただ、SELECTするだけじゃ面白くないので、各SELECT句を定義したドメインでキャストしてみた。

```
test=# SELECT "  "::"  ", "　"::"　" FROM " ";
    | 　 
----+----
    | 　
(1 row)
```

うん。SQLも結果もわけがわからないねｗ

# おわりに
ね、役にたたなかったでしょ？
USERPROFILE弄ったらGoogleChromeが起動しなくなった


環境変数`USERPROFILE`を変更したらGoogle Chrome(以下chrome)が立ち上がらなくなった。
標準のブラウザに設定しているのに。

## Google Chromeはどうしちゃったの

chromeは起動時に`%USERPROFILE%\AppData\Local\Google\Chrome\User Data`のユーザーデータを見に行っている。
`USERPROFILE`を変更したせいでユーザーデータのディレクトリが見えなくなってしまっている。

ユーザーデータのディレクトリは、起動オプション`--user-data-dir=<ディレクトリパス>`で明に指定できる。[^1]
つまりchromeの呼び出し時に`--user-data-dir="C:\Users\<username>\AppData\Local\Google\Chrome\User Data"`を指定すればよい。

[^1]: [起動オプション - The substitute for memo](https://sites.google.com/site/thesubstituteformemo/Home/google-chrome-chromium/kidou-opushon)

…標準ブラウザの呼び出しとは？

## 関連付けはどうなってるの

`http`プロトコルや拡張子`.html`に関連付けられているのがいわゆる「標準ブラウザ」だ。
この呼び出しはレジストリに定義されている。[^2]

[^2]: [Windowsの関連付けを決めるレジストリの優先順位とassoc ftypeが効かない問題について - イム日記](http://d.hatena.ne.jp/hotokediary/20150114/1421190538)

レジストリの値は、コマンドラインから`reg query <キー>`で参照できる。

```
$ reg query 'HKCU\Software\Microsoft\Windows\Shell\Associations\UrlAssociations\http\UserChoice'
HKEY_CURRENT_USER\Software\Microsoft\Windows\Shell\Associations\UrlAssociations\http\UserChoice
    Progid    REG_SZ    ChromeHTML

$ reg query 'HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.html\UserChoice'
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.html\UserChoice
    Progid    REG_SZ    ChromeHTML
```

変数`Progid`が定義されており、値が`ChromeHTML`になっている。[^3]

[^3]: [レジストリの直接編集によるファイルの拡張子と関連づけ - Glamenv-Septzen.net](http://www.glamenv-septzen.net/view/14)

`Progid=ChromeHTML`の場合はどんなコマンドに関連付けられるのか。それもやはりレジストリに定義されている。
キー名`HKEY_CURRENT_USER\Software\Classes\ChromeHTML\shell\open\command`の無名の変数`(Default)`がそれだ。

## どうすればいいの

都合により環境変数`USERPROFILE`は弄っている(これ自体あまり推奨されない)が、chromeは常に同じユーザーとして開きたい。
なので`ChromeHTML`のコマンド呼び出し定義に`--user-data-dir`オプションを加える。

regeditを使って`HKEY_CURRENT_USER\Software\Classes\ChromeHTML\shell\open\command`の`(Default)`を変更する。
※ regeditの使用は自己責任でお願いします。

変更した値を確認する。

```
$ reg query 'HKCU\Software\Classes\ChromeHTML\shell\open\command'
HKEY_CURRENT_USER\Software\Classes\ChromeHTML\shell\open\command
    (Default)    REG_SZ    "C:\Users\<username>\AppData\Local\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\Users\<username>\AppData\Local\Google\Chrome\User Data" -- "%1"
```

実際に設定が利いていることも確認しよう。
元々はPython経由で標準ブラウザが呼び出せなかったので調べ始めたのだった。[^4]
試してみる。

[^4]: [21.1. webbrowser — 便利なウェブブラウザコントローラー — Python 3.5.2 ドキュメント](http://docs.python.jp/3/library/webbrowser.html)

```
$ python -m webbrowser -t "http://www.python.org"
```

chromeが起動した。

---
gitのコミットメッセージのフォーマットを統一

プロジェクト毎に「コミットメッセージのフォーマットを統一します」とドキュメントに書いてもなかなか統一されてなかったりして、管理者からするとちょっとストレスになったりしますよね。

gitにはちゃんと初期設定ファイルを作れば、毎回同じコミットメッセージのフォーマットを事前に用意してくれる仕組みがあるので使いましょう。

Sampleというリポジトリで進めます。

```
$ pwd
=> /path/to/Sample
$ git init
$ git config commit.template .gitmessage.txt
$ vim .gitmessage.txt
---例）以下のようなフォーマッットを指定
subject line

what happened

[ticket: X]
---
```

これだけです。 `git config` コマンドの結果は、 `path/to/Sample/.git/config` に書かれます。

あとは、 `git commit` を叩いてみてください。以下のようにエディタが開くようになります。

```
subject line

what happened

[ticket: X]
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
# modified:   lib/test.rb
#
~
~
".git/COMMIT_EDITMSG" 14L, 297C
```
Kotlin版Javapoetっぽい「kotlincoder」を作ってみた

kotlinなプロジェクトでアノテーションプロセッサーを使いたいと思って色々調べてたのですが、
kotlinのコードを生成してくれるライブラリは見当たりませんでした。
というわけで適当に作ってみました。

#導入方法
Mavenで公開されています。
gradleならこんな

```groovy:build.gradle
repositories {
    maven {
        url  "https://dl.bintray.com/mumei-himazin/kotlincoder"
    }
}
dependencies {
    compile "org.kotlincoder:kotlincoder:0.1"
}
```

#使い方

```kotlin:sample
file = KtFile(
    ktClass = KtClass(
        packageName = "com.test",
        className = "TestClass",
        extendsClass = KtExtend(java.util.ArrayList::class.java),
        interfaceClass = arrayOf(Serializable::class.java)
    )
)
println(file.print())
```

```kotlin:result
package com.test
import java.io.Serializable

class TestClass
:ArrayList(), Serializable
{
}
```

こんな感じで出力されます。
出力方法は
Stringで取得したければ

```
file.print()
```

特定のディレクトリに展開したければ

```
val dir = File("/tmp")
file.outputFile(dir)
```

とすれば`/tmp/com/test/TestClass.kt`が生成されます。

急ぎで作ったのでバグなどありましたら、
https://github.com/mumei/kotlincoder
までプルリクお願いします！
docker image を小さくしたりするの方法の１つ

[Google Cloud Container Builder](https://cloud.google.com/container-builder/docs/) というクラウドで docker image をビルドするためのサービスがあるのですが、 2016-10-19 現在 beta で 120分/日制限があったり、ローカルで実行できなくてイヤなので、 [Build Requests](https://cloud.google.com/container-builder/docs/api/build-requests) (config) のフォーマットを読んで実行できるツールを作ったのでその宣伝です。

[cb - a container builder](https://github.com/hiroshi/cb)

基本的には docker image とそれを docker run するときの引数を指定して、順番に実行するだけなのですが、 [Build process](https://cloud.google.com/container-builder/docs/api/build-requests#build_process) に書いてあるように、 `/var/run/docker.sock` と各ステップで共有している `/workspace` を volume でマウントしてるのがキモです。

具体的にどんなことができるかというと、

- docker コマンドを含む image 実行することでコンテナ内で `docker build` できる
- ビルドした image をさらに次のステップで実行することで結果だけ /workspace に取り出したりできる
- で、その結果のファイルをビルドコンテキストとして追加した小さい image をビルドできる

たとえば、

- 普通に `golang` image を base image として普通に go のバイナリを含むimage をビルドしてから go バイナリだけを取り出して `from scratch` な image をつくる
  - cb 自体も golang で実装してるので、[サンプルとして README でも説明してます](https://github.com/hiroshi/cb#what-it-looks-like)。
- web アプリケーションのフロントエンドの javascript の bundle や transpile をした bundle.js の結果だけを取り出す
- あとは、べつに docker image を作らなくても docker run でできることはなんでもできるはず。想像力ないのでいい例が思いつかない...。

細かいことは github repo みてください。
https://github.com/hiroshi/cb
会社でDocker(Mac)を使ってて、家で触るとネットワーク繋がらない問題のメモ


状況を説明すると

1. 会社で`docker-machine start machine`としてVirtualBoxとDockerを立ち上げる
2. そのまま`docker run --rm -it --name mycontainer image`でコンテナ立ち上げる
3. 2のコンテナで色々作業
4. VM立ち上げっぱなしで家に帰る
5. 家でコンテナ立ててyumキメようとする
6. ネットワークの問題でipが解決出来ないと言われる

こんな感じでVMを立ち上げたIPと別の場所だとwgetとかyumとか全く出来なくなるのでいちいち`docker-machine stop machine`やってまた立ち上げなおしてる

この問題解決するコマンドとかあったりするのかどうなのか
バージョン1.9.1でだいぶ古いのが問題なのか(上げる
とりあえずメモでした
Nexus 5X の画面サイズを普通（360x640 dp）にする 

Nexus 5X という Android 端末があります。
この端末は iPhone 6 plus を意識したのか、ちょっと画面の文字とかが小さめで、画面を広く取れるようになっています。

具体的に言うと、同時期に発売された 5.2インチの Android 端末は [ほとんど解像度が 360x640 dp](http://qiita.com/nein37/items/0a622f7ebbbb92db93d5) なのに対し、なぜか Nexus 5X くんだけは 411x730 dp という変則的な解像度なのです。

これを他の機種と同じ 360x640 dp にする方法です。
adb で以下のコマンドを実行するだけ。

```
adb shell wm density 480
adb shell reboot
```

これで普通の端末向けアプリのデザインを確認するときにも Nexus 5X を活用できますね。
openSTFやってみた

#はじめに
有り余るAndroid実機を一元管理できるようになるOpenSTFやってみました。

https://github.com/openstf/stf
![](https://github.com/openstf/stf/raw/master/doc/shelf_closeup_790x.jpg?raw=true)

インストールは説明するほど難しくないので全カット

## グローバルで使えるようにする
--public-ip にグローバルIPを指定します。残念なことに、これをやるとローカルネットワークから使えなくなっちゃう・・・。

```sh
stf local --public-ip 216.58.221.14
```

※216.58.221.14 はサンプルです。各自準備したglobal ip をご利用ください。

## basic認証をかける
基本の状態では認証がありません。ザルです。せめてものbasic認証をかけます。
`--auth-options` を使えばbasic認証がかけれます。

```sh
stf local --public-ip 216.58.221.14 --auth-options '["--use-basic-auth", "--basic-auth-username", "username", "--basic-auth-password", "password"]'
```
SICP読書女子会 2.2.4 (#24~)


# 2.2.4 図形言語

```lisp

(print "=====2.4 図形言語=====")
(define nil ())


(define (enumerate-interval low high)
    (if 
        (> low high)
        nil
    (cons low (enumerate-interval (+ low 1) high))))

(define (accumulate op initial sequence)
    (if 
        (null? sequence)
        initial
        (op (car sequence) (accumulate op initial (cdr sequence)))))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(define wave
    (accumulate 
        (lambda (i acc) (append acc (list (enumerate-interval 0 15))))
         nil 
        (enumerate-interval 0 15)))




(define wave2 (beside wave (flip-vert wave)))
(define wave4 (below wave2 wave2))

(define (flipped-pairs painter)
(let ((painter2 (beside painter (flip-vert painter))))
(below painter2 painter2)))

(define (right-split painter n)
    (if (= n 0)
        painter
        (let ((smaller (right-split painter (- n 1))))
            (beside painter (below smaller smaller)))))

(define (corner-split painter n)
    (if 
        (= n 0)
        painter
        (let 
            ((up (up-split painter (- n 1)))
            (right (right-split painter (- n 1))))
            (let 
                (
                    (top-left (beside up up))
                    (bottom-right (below right right))
                    (corner (corner-split painter (- n 1)))
                )
                (beside (below painter top-left)
            (below bottom-right corner)))
        )
    )
)

(define (square-limit painter n)
    (let 
        ((quarter (corner-split painter n)))
        (let 
            ((half (beside (flip-horiz quarter) quarter)))
        (below (flip-vert half) half))))
```


## Ex 2.44

```lisp
(print "===Ex 2.44===")
(define (up-split painter n)
    (if (= n 0)
        painter
        (let ((smaller (up-split painter (- n 1))))
            (below painter (beside smaller smaller)))))
```

## Ex 2.45.....

```
2.2.4の内容を随時更新していきます。
```
Lambda + VPC でのoutbound通信

LINE Message APIを利用するにはLINE側にServer IP White listの登録が必要ですが、Lambdaでは実行されるたびにグローバルIPが代わるので、都度ホワイトリストの更新をしなければなりませんでした。

そこで、VPCにElastic IPを設定してグローバルIPを固定することで、ホワイトリストの更新をしないで済むようにしかったのですが、、、outbound通信が上手くルーティングされておらずタイムアウトをしてしまいました。

ネットで検索してもなかなか情報が見つかりませんでしたが、よく見てみたらものすごいチョンボをしていたので、同じ失敗ではまっている人のためにノウハウを共有しておきます。

* Private側のSubnetのRoute Tableには`0.0.0.0/0`に**NAT Gateway**を設定
* Public側のSubnetのRoute Tableには`0.0.0.0/0`に**Internet Gateway**を設定
*
Pepper for Dev開発環境のモッサリ動作時間についてメモ

# はじめに
PepperがAndroidに対応したとのことで、Android Studioで開発環境を構築してみたものの、あまりにもモッサリ過ぎてやんなっちゃったので、どのくらいモッサリかを備忘録的にメモ。

# 条件など
- PC環境
 - OS：Windows 7 Professional SP1 64bit
 - CPU：Core i7-4600U 2.10GHz 2.70GHz
 - メモリ：8GB
- 開発環境
 - Android Studio 2.2
 - Pepper SDK v0.9.0
 - HAXMインストール済み（Androidエミュレータの高速化ソフト）
- Virtual Device
 - API Level：24
 - CPU/ABI：x86
 - Multi-Core CPU：2
 - RAM：4GB
 - VM heap：128MB

# 動作時間

| 動作|時間|
|:--------------------|------------------:|
|RunしてからRobot viewerのウィンドウが立ち上がるまで　　　　　　　　|2分30秒|
|RunしてからAndroid Emulatorのウィンドウが立ち上がるまで　　　　　　|4分0秒|
|Android EmulatorのAndroid OSが起動～ロック画面表示されるまで　　　|40秒|
|Android Emulator起動後、Runしてアプリ(Hello world)が表示されるまで|40秒|

# 感想
待てなくはないけど、、、いちいち時間かかり過ぎ。
Virtual Deviceのメモリをデフォルトの1GB?から4GBにしたら少しましになった気はするけど、それでもXcodeのシミュレーターと比べると・・・Android Studioには正直期待してたけど、3年前くらいにちょっと触ってみたEclipse+ADTと大差ないという印象。
Pepper SDKが悪いわけではなく、単純にAndroid Emulatorがまだまだダメそう？
アンチウイルスソフトとか常駐アプリとかも起動してるので、それだけが悪いわけではないかもしれないけど、世の中のAndroid開発者はこのモッサリ具合は辛くないんだろうか？（爆速で開発できる術とかスペックとか持ってるのかな？）
【dmemo】リネームしたテーブルのドキュメントを男らしく引き継ぐ

Cookpad 社の dmemo、最近業務で使ってます。

- [データベースドキュメント管理システム dmemo のご案内 - クックパッド開発者ブログ](http://techlife.cookpad.com/entry/2016/08/08/103906)

とても便利に使わせていただいてるのですが、一度テーブルのドキュメントを書いたあとにテーブル名をリネームしてしまうとドキュメントを引き継げないという問題がありました。

各カラムの Markdown ドキュメントを一つ一つコピペして保存してもいいのですが、男らしく dmemo の DB を直接書き換えて引き継ぎしてみました。

### 手順

1. `table_memos` テーブルの旧レコードの `id` を一時的に負数などに置き換える (ex: 50 -> -50)
1. `table_memos` テーブルの新レコードの `id` を旧レコードの ID で置き換える (ex: 100 -> 50)
1. dmemo (Web) 上で旧テーブルが `Unlinked table` に変わっていることを確認し Delete table ボタンで削除する (旧レコードが物理削除されます)

リネーム前のレコード ID が 50、リネーム後が 100 という前提です。

今のところこの方法で特に問題は起きていませんが、バックアップ取ってから行った方がいいと思います。
この方法では `table_memos`.`description`  については引き継げないので、そこだけは個別にコピーする必要があります。
Nexus 5X + Android N で「表示サイズ」設定を変更したときの画面解像度

Android N では、ディスプレイの「表示サイズ」の変更が可能になりました。
以下は各設定ごとの画面サイズ(dp)を Nexus 5X で調査したものです。
（他の機種では異なる値になります）。

## Nexus 5X での調査結果

![Artboard.jpg](https://qiita-image-store.s3.amazonaws.com/0/43781/2385e9f6-2a94-9efa-8958-3c158d21da86.jpeg)

|設定値|画面サイズ(ナビバーを除く）|
|---|---|
|小|485x814 dp|
|デフォルト|411x683 dp|
|大|375x619 dp|
|特大|345x566 dp|
|最大|320x520 dp|

ナビバー（画面下の黒い奴）の高さは常に 48dp です。

## 余談
[Material Design](https://material.google.com/) の画面見本は 360x592 dp で書かれていて、やっぱりその時が一番バランスいいなぁと思います。なので、個人的には 360ｘ592 dp の設定が欲しかったんですけどねぇ...。

もちろん adb コマンドを使えば設定できますが。
http://qiita.com/okaxaki/items/3626a92fa6574a8b09a7
Go言語のblank typeとblank function

###ブランク
Golangにはブランク識別子というlinux系のdev/nullのようなダミーの識別子があります。

有名な使い方としては
多値の戻り値の内、不要なものだけ捨てるblank variableと
Databaseドライバを使う時などのinitだけを使用するblank importの二つだと思います。

```go
package main
import (
	_ "github.com/gopher" //gopherは無に吸い込まれ、initだけが我々の心に残る
)

func main(){
	gopher,_ := MyName() //errは無に吸い込まれ、不具合として再び我々に立ちはだかる
	_ = gopher //テスト時とかにコンパイルエラーを起こさないように使ったふりだけする
}
func MyName()(string,error){
	return "gopher",errors.New("致命的なエラー")
}

```
しかしブランクはそれだけではありません。

###ブランク型とブランク関数
実はこのブランクはタイプや関数の宣言でも使えます

```go
package main
import "fmt"

type _ struct{
	gopher string
}
type _ int //二つ目を宣言してもコンパイルが通る

func main(){
}

func _(){
	fmt.Println("I am gopher.")
}
func _(){
	fmt.Println("We are gopher.")//こちらも同様
}
```

これが何に使えるかというと
残念ながら糞ほどにも使えません。

ただblank functionの方は
go内でgoto文のテストなど、goそのものの構文のテストのために使われています。
文法だけチェックしたいという時には確かに使えますが
そんな機会は普通のプログラマには訪れないというかこんなまどろっこしいやり方をする必要はないので
まず役には立たないでしょう。

blank typeを使ってるところは探したらあるかもしれませんが見たことないです。

###存在理由
こうなるとなぜこんなことが出来るのか不思議ですが
Golangの長所として可読性のための一貫性によるものだと思います。
こういった細かいところまでブランクとして働いてくれるおかげで
blank importもblank variableもそれぞれ独立した機能でなく
"_"自体をブランクとしての役割と強く認識できます。

識別子の機能を可能な限りもっともな振る舞いをさせることで
この言語はblankとfunctionはOkだとかvarとconstは一括宣言できるだといった組み合わせを単に暗記するのではなく
ブランクならあれもできるだろうという推測でプログラミングが出来るようにすることで
一々文法をチェックする手間もなく、学習を容易にしてくれているGolangの気遣いの副産物だと思います。

普通の言語ならコンパイラ的にblank importやblank variableとは構文が全然違うので
出来ないだろうと察してしまうものだと思いますがその必要はありません。
なんかあの、ゲームでドアのテキスチャが壁のテキスチャと一体化してるからこれは開けないドアだなとか
運転免許の試験で何々してはいけないとかいう選択肢はまず間違っているだろうなとかいう
我々が現実社会で培った卑しくあさましいメタな視点は必要ないんです
ドアだから開くしブランクだから無効化してくれるんです。素晴らしいですね。
指数的に増えていく組み合わせは覚える必要ないんです。ただ一つブランクを覚えるだけで済むんです。素晴らしいですね。


###ブランク小ネタ
他の使い方としては
インターフェース等の都合で
関数の引数や戻り値を指定するときに使わないと分かっている変数をブランク

```go
func (devnull) Write(p []byte) (n int, _ error) {
	n = len(p)
	return
}
```

かなり低レベルな処理でしか使わないと思いますが、
構造体のメンバ変数にブランクを追加してpaddingもスマートにできます。

```go
package main
import(
	"fmt"
	"unsafe"
)

type Girl struct{
	_ [100]byte
}

func main(){
	const size = unsafe.Sizeof(Girl{})
	fmt.Printf("%vkg",size) //100kg
}

```

iotaをブランクで進めるなども

```go
const (
	Prime1 = iota
	_,
	Prime3
	_,
	Prime5
)
```
Shapefile を javascript だけで GeoJSON にしてみる

# はじめに

以前 [Shapefile を node.js だけで GeoJSON にして GitHub で確認するまで](http://qiita.com/frogcat/items/051572ccf92e084db378) という記事で [shapefile](http://npmjs.com/package/shapefile) という NPM モジュールを紹介したのですが、バージョンアップに伴っていろいろと変化があったのでポイントを解説します。

この記事では 2016/09 にリリースされた **version 0.5.7** を対象としています。

# 1. インストール

npm で直接インストールできます。

```text
$ npm install shapefile
shapefile@0.5.7 ..\node_modules\shapefile
├── array-source@0.0.3
├── stream-source@0.3.4
├── slice-source@0.4.1
├── text-encoding@0.6.1
├── commander@2.9.0 (graceful-readlink@1.0.1)
└── path-source@0.1.2 (file-source@0.6.1)

```

以前のバージョンでは古い iconv に依存していた関係で Shift_JIS を扱えず、独自に iconv のバージョンをアップした fork 版など紹介していたのですが、現バージョンでは [text-encoding](https://www.npmjs.com/package/text-encoding) を使うようになり、この問題が解消されました。


# 2. Node.js での使用

コマンドライン引数で指定した shp ファイルを GeoJSON に変換して加工・出力する例がこちら。

```main.js
"use strict";
var shapefile = require("shapefile");

var shp = process.argv[2];

shapefile.read(shp, undefined, {
    encoding: "shift_jis"
  }).then(function(geojson) {
    geojson.features.forEach(function(feature) {
      feature.properties["stroke"] = "#000";
      feature.properties["stroke-opacity"] = 0.8;
      feature.properties["stroke-width"] = 2;
      feature.properties["fill"] = "#ff0";
      feature.properties["fill-opacity"] = 0.5;
    });
    console.log(JSON.stringify(geojson, null, "  "));
  })
  .catch(function(error) {
    console.log(error);
  });
```

以前は `shapefile.read(shp,"shift_jis",function(error,geojson){...})` のようにコールバック関数を使用するスタイルだったのですが、 Promise を使う形に変更されました。

また、API 自体も `shapefile.read(shp,dbf,option)` のように、第一引数に shp、続いて dbf (省略可能、shp のパスから補完される)、最後に option (省略可能) を指定するように変更されています。

実際に実行するには以下のように。

```text
$ node main.js N03-20150101_02_GML/N03-15_02_150101.shp > out.geojson
```

なお、```read``` は入力を一括変換するので比較的小さなデータの処理に向いています。大きなデータについては逐次処理をする ```open``` という API も提供されています。

# 3.ブラウザでの使用

以前は node.js で動作することを前提としたモジュールだったのですが、ブラウザでも動作するようになりました。Drag & Drop API や XMLHttpRequest を介して取得した Shapefile を直接ブラウザで GeoJSON に変換することも可能になったみたいです。

Web 上にある Shapefile を取得して GeoJSON に変換してコンソールに出力する例がこちら。

```index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/shapefile@0.5.7"></script>
</head>

<body>
  <script>
    shapefile
      .read("https://cdn.rawgit.com/mbostock/shapefile/master/test/points.shp")
      .then(geojson => {
        console.log(geojson);
      })
      .catch(error => console.error(error.stack));
  </script>
</body>

</html>

```

`shapefile.read(shp,dbf,option)` の shp にはファイルパス以外にも URL やバイナリ、ストリームなどを指定することもでき、この例では shp として与えられた URL をもとに shp と dbf が XMLHttpRequest でネットワークから取得され、ブラウザ上で GeoJSON に変換されます。

# 4. まとめ

npm の shapefile ライブラリの更新ポイントを紹介しました。対応文字コードの改善や Promise を使った API のリファインなど、 Node.js から利用しやすくなったと思います。

ブラウザで Shapefile を扱うシーンはあんまり考えたくないですが、覚えておくといつか役に立つ日がくるかもしれません。
やったこと 2016/10/19

引き続き、環境のセットアップ中。現状出ているリンクエラーは以下の通り。
　=> _imp_timeGetTime()と_imp_timeSetEvent()が未解決と言われる。

上記のリンクエラーは、以下の対処を実施することで解消する点を確認。
　=> リンカーに関するプロジェクトの設定で、追加の依存ファイルに「winmm.lib」を入れること。
　　=> ただし、このライブラリの役割が何なのかは現状不明。
　　　 時刻に関するユーティリティ関数が提供されている？？

DebugモードとReleaseモードの違い
　=> 追加の依存ファイルのファイル名が微妙に違うので注意
　　=> Debug: strmbasd.lib
　　=> Relase: strmbase.lib

ただし、ReleaseモードではDebugモードでのビルド時に出なかったリンクエラー(例えば、imp_vsnwprintf()が未定義など)が出るため、現状ビルド不可能。
　=> 当面Debugモードでの動作確認を優先。上記の解決は保留。

PushSource.dllをレジストリに登録。具体的には以下のコマンドを、管理者権限で実行すること。

　> regsvr32.exe PushSource.dll

やりたいことは、デスクトップ画面のキャプチャ。これは、grapheditを使用する。

(1) grapheditを起動
(2) Graph->Insert Filtersを選択し、DirectShow Filters->PushSource Desktop Filterを選択。最後に「Insert Filter」ボタンをクリック
(3) Graph->Insert Filtersを選択し、動画用のRendererを選んで「Insert Filter」ボタンをクリック。今回はDirectShow Filters->Video Rendererを選択。
(4) グラフ中のPushSource Desktop FilterのOut端子と、Video RendererのVMR Input()端子をつなぐ
(5) Video Rendererを選択し、ツールバーの再生ボタンをクリック

これで、現在のデスクトップ画面がリアルタイムでキャプチャできる。
MySQL のテーブルカラム情報を TSV で取得する

MySQL は DB スキーマに関する情報を　`information_schema` DB から参照でき、カラムに関する情報は `columns` テーブルから参照できます。

なので、例えば以下のようなクエリでカラムに関する情報を一覧して取得できます。

```mysql
SELECT *
FROM `information_schema`.`columns`
WHERE `table_schema` = "任意DB名"
AND `table_name` = "任意テーブル名";
```

このクエリでは以下のような情報を取得できます。
必要に応じて SELECT に指定するといいと思います。
（よく使いそうなフィールドだけ太字にしました）

- TABLE_CATALOG
- **TABLE_SCHEMA: DB名**
- **TABLE_NAME: テーブル名**
- **COLUMN_NAME: カラム名**
- **ORDINAL_POSITION: スキーマ上のカラム位置**
- **COLUMN_DEFAULT: デフォルト値**
- **IS_NULLABLE: NULL許容**
- **DATA_TYPE: データ型**
- **CHARACTER_MAXIMUM_LENGTH: 最大長**
- CHARACTER_OCTET_LENGTH
- NUMERIC_PRECISION
- NUMERIC_SCALE
- DATETIME_PRECISION
- CHARACTER_SET_NAME
- COLLATION_NAME
- COLUMN_TYPE
- COLUMN_KEY
- EXTRA
- **PRIVILEGES: 権限**
- **COLUMN_COMMENT: コメント**
- GENERATION_EXPRESSION

## コマンドラインで TSV として取得する

上記のクエリを使って、コマンドラインからカラム名とそのコメントを TSV で取得してみます。

```bash
mysql -B -e 'SELECT `COLUMN_NAME` ,`COLUMN_COMMENT` FROM `information_schema`.`columns` WHERE `table_schema` = "任意DB名" AND `table_name` = "任意テーブル名";'
```

`-B` は TSV で出力するためのオプションです。

実行結果 (TSV):

```
COLUMN_NAME	COLUMN_COMMENT
id	ID
name	名前
price	価格
created	作成日時
```

これに限った話ではないですが TSV 文字列はそのままエクセルにペーストできるので何かと便利 :ok_woman:
（こんなことをしないでも Sequel Pro とかでクエリ結果を CTRL + C すると TSV としてコピーできる）
TerraformでIAMポリシーのJSONに変数を埋めたい場合はaws_iam_policy_documentを使う

# TL;DR

* TerraformでIAMポリシーのJSONに変数を埋めたい場合はaws_iam_policy_documentを使えばよい
* サンプルコードはTerraformでKMSキー作った時に、アクセス権限の管理をIAMグループで管理する例
* aws_iam_policy_documentのドキュメントはこちら => [AWS_IAM_POLICY_DOCUMENT](https://www.terraform.io/docs/providers/aws/d/iam_policy_document.html)

# サンプル
KMSのキーARNを変数参照で埋め込んだIAMポリシー作って適当なIAMユーザ/グループ/ロールに付与するtfファイルこんなかんじ

```tf
data "aws_iam_policy_document" "kms_hoge" {
  statement {
    sid = "AllowUseOfTheKey"

    actions = [
      "kms:Encrypt",
      "kms:Decrypt",
      "kms:ReEncrypt*",
      "kms:GenerateDataKey*",
      "kms:DescribeKey",
    ]

    resources = ["${aws_kms_key.hoge_kms_key.arn}"]
  }
}

resource "aws_iam_policy" "kms_hoge_policy" {
  name        = "kms-hoge-policy"
  path        = "/"
  description = ""
  policy      = "${data.aws_iam_policy_document.kms_hoge.json}"
}

resource "aws_iam_policy_attachment" "kms_hoge_policy_attachment" {
  name = "kms-hoge-policy-attachment"

  users  = ["${aws_iam_user.hoge_user.name}"]
  groups = ["${aws_iam_group.hoge_group.name}"]
  roles  = ["${aws_iam_role.hoge_role.name}"]

  policy_arn = "${aws_iam_policy.kms_hoge_policy.arn}"
}
```

※このサンプル中ではIAMユーザ/グループ/ロールの定義は省略。

上記で参照しているKMSのキーとエイリアスのtfファイルはこんなかんじ

```tf
resource "aws_kms_key" "hoge_kms_key" {
  policy = "${file("../../kms-policies/aws_kms_policies/hoge_policy.json")}"
  enable_key_rotation = false
}

resource "aws_kms_alias" "hoge_kms_alias" {
  name          = "alias/hoge"
  target_key_id = "${aws_kms_key.hoge_kms_key.key_id}"
}
```

上記で参照しているKMSのキーポリシー `../../kms-policies/aws_kms_policies/hoge_policy.json` は以下
※111122223333のところはAWSアカウントIDで読み替えて下さい

```json
{
  "Version": "2012-10-17",
  "Id": "key-policy-for-hoge",
  "Statement": [
    {
      "Sid": "Enable IAM User Permissions",
      "Effect": "Allow",
      "Principal": {"AWS": "arn:aws:iam::111122223333:root"},
      "Action": "kms:*",
      "Resource": "*"
    }
  ]
}
```
ActiveAdmin でリダイレクト先を変更する方法

登録・更新・削除 後のリダイレクト先を変更したい場合、
activeadmin は inherited_resources gem を利用しているので
https://github.com/josevalim/inherited_resources#overwriting-actions
に記載されている方法を使えば実現できる。

```rb
ActiveAdmin.register AdminUser do
  controller do
    def update
      super do |format|
        # 正常に保存された場合は所属法人の詳細画面へリダイレクト
        if resource.valid?
          format.html { redirect_to admin_company_path(resource.company) }
        end
      end
    end
  end
end
自分のアプリをApp Storeで検索上位にするためのランキングアップ術

いつの日にか、どこかで見たランキングアップのための方法まとめ。


１．アプリ名にブランド名以外のキーワードも入れる

２．説明文は最初の3行を頑張る

３．説明文に取りたいワードを入れる

４．スクリーンショットは1枚目だけで訴求する

５．アプリ内の課金アイテム名もASOを意識する

６．ユーザーが満足したタイミングでレビュー依頼する

７．iTunesキーワードに単発ワードを入れる

８．なるべく1つの会社でアプリ登録する

９．全然関係ないキーワードを入れない

１０．広告を打ってダウンロード数を増やしておく

１１．アプリをタブレットに対応する


ちなみに、アプリの審査期間が知りたい時は、
Average App Store Review Times（ http://appreviewtimes.com ）
というサイトで確認。
[Swift]ステータスバーの色の変更方法


初心者の自分が、ステータスバー（iPhoneの時刻や残バッテリーが表示されている画面の一番上のところ）の色を変える時に、少し躓いたので備忘録として。

#ステータスバーの色を変更する

ステータスバーの色を変更するには、2つの手順を踏む。

⒈ プロジェクトの設定でステータスバーを変更する

まずは、
TARGETSのGeneralのDeployment InfoのStatus Bar Styleを
Default から Lightへ変更します。

しかし、これだけではスプラッシュ（起動画面）のみステータスバーの色が変わるだけ。
ViewControllerでも変化させるためには、次の設定も行う。


⒉ Info.plistに設定を追加する

次にInfo.plistに
`View controller-based status bar appearance`
を追加し、値をNOで設定する。
 
この設定をすることで、ViewControllerでもステータスバーの色が変化します。
flexboxで上下左右中央揃え

# 目的
* こんな感じの配置がしたい

![名称未設定.png](https://qiita-image-store.s3.amazonaws.com/0/124445/b3054adc-8a8a-f7bf-ebb5-b04329379ba2.png "名称未設定.png")


# コード

```vertical-center.html
<div class="flexbox-container-vertical-center">
	<span>中央</span>
</div>
```

```vertical-center.css
.flexbox-container-vertical-center {
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    width: 100px; /* 見た目用 */
    height: 50px; /* 見た目用 */
    border: 1px solid; /* 見た目用 */
}
span {
	border: 1px solid; /* 見た目用 */
}
```

# 実行結果
![スクリーンショット 2016-10-19 17.58.43.png](https://qiita-image-store.s3.amazonaws.com/0/124445/ef37d844-2f50-f202-13eb-2051417cfeb6.png "スクリーンショット 2016-10-19 17.58.43.png")

できた。

# 解説
* display: flex; を指定することでflexboxで操作可能となった __直下の子要素（この例ではspan要素）__がflex-direction: column; を指定することで縦に並ぶようになる。
* さらに、justify-content: center;で縦方向の中央、align-items: centerで横方向中央に位置づけるようにすれば、完成。

# 応用(？)装飾
* チョットキレイにする

![スクリーンショット 2016-10-19 20.10.07.png](https://qiita-image-store.s3.amazonaws.com/0/124445/6898a034-e43c-75e9-0334-88d1450ebc33.png "スクリーンショット 2016-10-19 20.10.07.png")



```vertical-center.css
.flexbox-container-vertical-center {
    display: flex; /* 変更なし */
    flex-direction: column; /* 変更なし */
    justify-content: center; /* 変更なし */
    align-items: center; /* 変更なし */
    width: 100px; /* 変更なし */
    height: 50px; /* 変更なし */
	border: 0 ; /* 見た目用 */
    border-radius: 50px; /* 見た目用 */
    background-color: coral; /* 見た目用 */
    box-shadow: 0px 1px 1px darkmagenta; /* 見た目用 */
    }
span {
	border: 0;
	color: white; /* 見た目用 */
}
```

# その他
* 「見た目用」とコメントアウトされいている箇所は、適当な数値でＯＫです。
* 全体のCSSで.flexbox-container-vertical-center を定義しておくとらくちん。class="flexbox-container-vertical-center"とするだけで、 __直下の子要素__ をなんでも上下中央に配置できるので。

# 駄文
* flexbox超便利。bootstrap3のグリッドレイアウトは、そのままつかうにはとてもお手軽でいいけど、少しでも外れたことをやろうとするなら、flexbox一択。
* bootstrap4だとflexboxも使えるとあるけど、どういう意味なのかな。
「プログラムでシダを描画する」を JRubyFX(Canvas) + FXML で描画する

jrubyfxの学習をするために今更感があるシダを描画してみた。

jrubyfxの学習がメインなのでRubyコードはほぼ[先人](http://qiita.com/QUANON/items/d96cbea02800f97156e7)のコードをまるっと頂きました。
でもかなり勉強になりました。

shidaじゃなくてsidaなのは趣味です。

```rb:sida.rb
# coding: utf-8

require 'jrubyfx'

fxml_root File.dirname(__FILE__) + '/ui'
class SidaController
  include JRubyFX::Controller
  N = 20
  DEFAULT_WIDTH   = 500
  DEFAULT_HEIGHT  = 500
  W1x = -> (x, y) { 0.836 * x + 0.044 * y }
  W1y = -> (x, y) { -0.044 * x + 0.836 * y + 0.169 }
  W2x = -> (x, y) { -0.141 * x + 0.302 * y }
  W2y = -> (x, y) { 0.302 * x + 0.141 * y + 0.127 }
  W3x = -> (x, y) { 0.141 * x - 0.302 * y }
  W3y = -> (x, y) { 0.302 * x + 0.141 * y + 0.169 }
  W4x = -> (x, y) { 0 }
  W4y = -> (x, y) { 0.175337 * y }
  fxml "sida.fxml"
  def initialize
    gc = @sida_canvas.getGraphicsContext2D
    gc.set_stroke(Color::GREEN)
    gc.set_fill(Color::BLACK)
    gc.set_line_width(1)
    gc.fill_rect(0, 0, DEFAULT_WIDTH, DEFAULT_HEIGHT)

    f = -> (k, x, y) do
      if 0 < k
        f.(k - 1, W1x.(x, y), W1y.(x, y))
        f.(k - 1, W2x.(x, y), W2y.(x, y)) if Random.rand < 0.3
        f.(k - 1, W3x.(x, y), W3y.(x, y)) if Random.rand < 0.3
        f.(k - 1, W4x.(x, y), W4y.(x, y)) if Random.rand < 0.3
      else
        xx = (x * 490 + DEFAULT_WIDTH * 0.5).to_i
        yy = (DEFAULT_HEIGHT - y * 490).to_i
        gc.stroke_line(xx, yy, xx, yy)
      end
    end
    -> (k, x, y) {f.(k, x, y) }.(N, 0, 0)
  end
end
class Sida < JRubyFX::Application
  def start(stage)
    with(stage, title: "Sida by jrubyfx") do
      SidaController.load_into stage
      stage.show
    end
  end
end
Sida.launch
```

fxmlは`scene builder`で作った。

```xml:ui/sida.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.Group?>
<?import javafx.scene.canvas.Canvas?>

<Group xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Canvas fx:id="sida_canvas" height="500.0" width="500.0" />
   </children>
</Group>

```
![sida.png](https://qiita-image-store.s3.amazonaws.com/0/30663/bd544fd4-4ae5-c8b0-470d-fa6a846b89bc.png)

課題的ななにか
======

* プログラムで何かを描画するということがあまりわかっていない
* `stroke_line`でドットを打つってどうなのよ
* `Ruby`ぽい書き方と`Java`ぽい書き方が同居してて気持ち悪い。
* `warble`でjarファイルにして実行したら`.jrubyfx_cache`なるディレクトリでぱーみっしょんでないどする。
* つか`.jrubyfx_cache`って何！

jrubyfx + FXML情報少なすぎ。
とりあえずjrubyfxの学習という意味では成果あり。
それっぽいものが描けた。


元ネタとか参考とか
=====

* [「プログラムでシダを描画する」を Ruby で描画する](http://qiita.com/QUANON/items/d96cbea02800f97156e7)
* [「プログラムでシダを描画する」一覧](http://qiita.com/qt-luigi/items/b22204c7ef73260324bd#_reference-65516fda4feae44b8503)
* https://github.com/jruby/jrubyfx/wiki/Getting-Started
アプリ作りの際のUXについて　使いやすいアプリとは

#オイシックスさん主催のiOS Creators' Meetup vol.2に参加してきました
ゲストTalkとして三瓶亮さんが 「コンテキストを意識したアプリデザイン」として
アプリ作りの際のUXについてお話がとても参考になったので、まとめてみました。

##そもそも使いやすいアプリとは？
ユーザーに説明をしなくても使える、自然に使えるものが使いやすいアプリであるという前提です。
どう使うのか考えてしまうものは、ユーザーとしても使いにくいしそれを説明するために無駄にチュートリルを作る必要ができてしまいます。

##どうしたら使いやすいアプリが作れるか？
これがタイトルにあるコンテキストを意識するということです。
コンテキストとは前後の脈絡や背景といった意味で、三瓶さんのお話の中では
マーケティングのコンテキストを意識するということがメインでした。

マーケティングのコンテキストとはそのマーケットのトレンドやスタンダードのことです。
マーケットのトレンドに乗っかることで、ユーザーの戸惑いを減らすことができます。
キュレーションアプリを例にとると、下にタブがありスワイプさせて項目を移動するような同じような構造になっています。
このマーケットのトレンドに乗っかると、初めて使うユーザーも大体使い方がわかるだろうと思いますよね。

マーケットのトレンドに乗っかるためには既存のアプリを**プライドを捨てて真似をする**ことが良いとのことでした。

ただ、そのマーケットの主流から外れると、ユーザーは使い方に困惑してしまう可能性が高くなってしまいます。
新しい認知にユーザーが戸惑ってしまうことを認知的負荷と言い、認知的負荷の高いアプリは使いにくくなってしまいます。

##真似をする上で気をつけなきゃいけないこと
じゃあ一番人気のアプリを全部真似すれば良いのでしょうか。
もちろんそんなことはありません。気をつけるべきポイントとしては
**アプリを真似することが目的ではなく、トレンドを真似することが目的**であるということです。
そのため、同じアプリからいくつも真似をするよりも**複数のアプリを参考**に真似をすべきであり、**サービスの象徴的なもの**(ロゴや特徴的なカラーなど)を真似することは良しとされてないようです。

##さいごに
真似をするときは**複数のアプリ**から、そのマーケットの**トレンド**を真似しましょう。
それをベースにオリジナリティを出していくことで、ユーザーが使い易くイケているアプリを作る方法なのだと感じました。
Tweepyでstreaming apiを使用した自動フォロー返し

# 注意

Python3系のコードです。2系の場合は`super()`あたりをちょっと変えれば動くと思います。

# コード

```py3
import tweepy

consumer_key    = "CONSUMER_KEY"
consumer_secret = "CONSUMER_SECRET"
access_token    = "ACCESS_TOKEN"
access_secret   = "ACCESS_TOKEN_SECRET"

class StreamListener(tweepy.StreamListener):
    def __init__(self, api):
        super().__init__(api)
        self.me = self.api.me()
    def on_event(self, event):
        if event.event == 'follow':
            if self.me.id != source_user["id"]:
                source_user = event.source
                event._api.create_friendship(source_user["id"])
                print("followed　by {} {}".format(source_user["name"], source_user["screen_name"]))

if __name__ == "__main__":
    auth = tweepy.OAuthHandler(consumer_key, consumer_secret)
    auth.set_access_token(access_token, access_secret)
    api = tweepy.API(auth)

    stream = tweepy.Stream(auth=api.auth, listener=StreamListener(api))
    stream.userstream(_with="user")
```

# 説明

userstreamには、ツイート以外にイベントに関するものも流れてきます。

Tweepyの`on_event`メソッドは、`event`が流れてきた際に発火されるようです。

```py3:__init__内
self.me = self.api.me()
```

```py3:on_event内
if self.me.id != source_user["id"]:
```

とした理由ですが、仕様として`User follows someone`と`User is followed`が同じ`follow`として流れてくる上に、

| 説明 | Source | Target |
|:--|:--|:--|
| 自分が誰かにフォローされた | 	Following user | Current user |
| 自分が誰かをフォローした | Current user | Followed user |

この表のように、場合によって自分と相手の入る位置が変わってしまいます。

そのため、自分がフォローを返した際に、自分をフォローしようとしてしまいます。
その場合、エラーが発生してしまうため、それを避けるためにインスタンス作成時に自分の情報を取得しておき、`follow`イベントが流れる度に`source_user`の`id`を自分の`id`と比較しています。

また、`event`には`unfollow`というものがありますが、これは自分が他ユーザーのフォローを解除した際に流れてくるもので、他ユーザーからフォロー解除された旨を受け取ることはできません。  
なので、自動フォロー解除については、適時REST APIを叩いてやる必要があります。

# 参考

[Streaming message types | Twitter Developers](https://dev.twitter.com/streaming/overview/messages-types)

[tweepy/streaming.py at master · tweepy/tweepy](https://github.com/tweepy/tweepy/blob/cd46550b3ef068857f5de9c37bbdd0a72acb7462/tweepy/streaming.py)
Swiftで外部ライブラリを追加する(CocoaPods)

# CocoaPodsのインストール
（CocoaPods は v0.36.0 より、Swift に対応。）

MacにはデフォルトでRubyがインストールされているので、それが前提。

1.ruby gemを最新にする
`$ sudo gem update --system`

2.インストール
導入方法は簡単で、
`$ sudo gem install cocoapods`
たったこれだけ。

※ OSXがEl Capitan方は、ターミナルで以下のコマンドを打ってください。
`sudo gem install -n /usr/local/bin cocoapods`

理由は下記。
MacOSX El Capitanでcocoapodsインストールが出来ない時の対処法
http://qiita.com/AcaiBowl/items/4bb4708de03e6ee14a4a

3.セットアップ
`$ pod setup`

# CocoaPodsをつかう


次に、 Xcode のプロジェクトがあるディレクトリで、コマンドを実行します。
`$ pod init`
これで、 Podsfile が生成されるので、ここに導入するライブラリを記述します。

初期状態だと、このようになってるはず。（rensyuuプロジェクトの場合）

```
# Uncomment this line to define a global platform for your project
# platform :ios, '9.0'

target 'rensyuu' do
  # Comment this line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for rensyuu

  target 'rensyuuTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'rensyuuUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end
```

（ platfrom には ios, osx, tvos, watchos のいずれかが指定できます。）


次に、依存ライブラリを追加します。
`target 'rensyuu'` の部分は、 rensyuuプロジェクトで使うもの ということ。
全部共通で使う場合は、一番下などtarget の中でない部分に追加。

ここで、 Swift での定番ネットワークライブラリAlamofireを
rensyuu に対し導入してみます。


```
# Uncomment this line to define a global platform for your project
# platform :ios, '9.0'

target 'rensyuu' do
  # Comment this line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for rensyuu
  pod 'Alamofire', '~> 3.0'

  target 'rensyuuTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'rensyuuUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end
```

で、保存して、コマンドを実行します。
`$ pod install`
これで導入完了です。

※注意
この時にxcodeでプロジェクトファイルを開いていると、
`[!] From now on use ~~.xcworkspace.`
と怒られてしまうので、xcodeを閉じてから実行する。


*.xcodeprojではなく、生成された *.xcworkspace を
Xcode で開くと、きちんと導入されており、
`import Al`
と入力すると、 Alamofire まで、補完が出るようになります。
出なかった場合は、一度ビルドすると、出るようになります。


※ 他のライブラリをインストールするときは、先ほどのPodfileにライブラリを追加し、
`$ pod update`
を実行する。

# CocoaPodsでのブランチ指定方法

`pod 'Podでの名前', :git => 'Gitへのアドレス', :branch => 'ブランチ名'`

また、submodulesをダウンロードするにはさらに
`pod 'Podでの名前', :git => 'Gitへのアドレス', :branch => 'ブランチ名', :submodules => true`
I LOVE  F.I.S.H ~ フィッシュに夢中 ~

# FISH SHELL　- so cute shell :heart:-

シェル何使ってんの? みたいな話ができる様になり、自分もなんかそっち側の人になりつつあるなと感じていたのだけれども、```zsh``` 最強みたいな世の流れに乗っかって、わけもわからず```zsh```を使っていました。

でも、そこまでガリガリにカスタマイズしていない俺の```zsh```はそこまで使いやすくなく、いや使い難くはないのだけど、まあ、並？で、　社内にいる開発環境最適化が大好きな人(@tos-miyake )からは非難され続けていたのでした。

### そこでFISH

適当にネットサーフィンしてたら見つけた ``` FISH SHELL ```と言うシェル。

公式
http://fishshell.com

一発目からオートサジェスションのようなことが書かれていて、気を惹かれたミーハーで浮気者の俺はとりあえず入れて使ってみた。

```　$ brew install fish```

### なにこれ, 超便利。

一気に惚れてしまったので、メインにしました。マジで惚れた。

## 惚れポイント 1: 補完
![image](https://qiita-image-store.s3.amazonaws.com/0/100538/ec9748c7-be43-5364-d45b-e33a3182648f.png)

cd って打っただけで、この薄い文字で瞬間的に補完候補が出てきます。

ここで、```ctrl + F```と押すと、表示されている候補が確定。
![image](https://qiita-image-store.s3.amazonaws.com/0/100538/2b350359-8411-1b65-0f0a-d7a81ae128bd.png)

超オシャレ。

## 惚れポイント 2: TAB押しときゃなんとかなる。

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/ea57a620-8aef-0d1a-5aa4-ff9bd6222d97.png)

この段階で、TABキーを押すと

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/28cc59ce-a348-e33a-e8da-c94b9413bf3a.png)

gitのコマンドが説明文つきでブワーーーーーって出てくるわけ。

さらにTABキーを何度か押すと、循環して選択ができるよ。
![image](https://qiita-image-store.s3.amazonaws.com/0/100538/c8602594-9aea-0be6-39c2-2176cb6f41e0.png)

ディレクトリ移動も。

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/013a9a32-0791-d85d-e2a2-9cf7434b29ec.png)

ここで TABを押すと、候補がバーーーーー。

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/abf5a5cd-4e7c-bff1-ee8e-2cf62ca44a3a.png)

# 惚れポイント3: シンタックスハイライトがオシャレで素敵。

存在しないコマンドとかがあると,

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/02f2dfe1-cbb4-eab9-9130-e10c0515a31a.png)

このように真っ赤っ赤に。

パスも存在しない場合は

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/c709e864-d8a7-6888-c517-688c3a1f1e10.png)

真っ赤っ赤。

逆に存在するファイルがあると

このように、白字で下線。

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/bc12b096-f91a-dce7-1b94-c3daf544d796.png)

## 惚れポイント4: イカしたテーマやプラグインが簡単に導入できる。

``` Fish ``` のいいところは、ほとんど何も設定しなくても、便利機能が使えることなんだけど、
Fishermanっていうプラグインマネージャーがあって、非常に簡単にテーマとかプラグインを入れることができる。

Fisherman
https://github.com/fisherman


Fishermanについては@nutsinshellさんのこの記事が親切。参考にさせてもらいました。
http://qiita.com/nutsinshell/items/5f111184b50f7081c92f

## 惚れポイント5: ユーザフレンドリーは伊達じゃない。

```fish``` を立ち上げると、真っ先に出てくるメッセージ

![image](https://qiita-image-store.s3.amazonaws.com/0/100538/62ecb4d5-2079-0d16-942d-2f10512315c1.png)

あ、```friendly interactive shell ``` の略で ```fish```なのねと気がつく瞬間。

その名の通り、とってもフレンドリー。

helpもわかりやすいし、なんかエラーになった時も、すっげえ親切なエラーメッセージで間違いを教えてくれる。


### 以上

どういう設定にして使っているかとかはまた後日書きます。
とりあえず、皆さん、```fish shell```入れてみると楽しいですよ。

※ バリバリに```zsh```をカスタマイズしている人は、移行するコストの方が高いかもしれないけど、俺みたいなライトユーザーは生産性上がること間違いなし。布教していきたい。
ScrapyでWebサイトからデータ収集してみた

Scrapyを使って基本的なクローリング&スクレイピングを行いました。

# 作ったもの
以下のアニメ情報まとめサイトから2016年冬のアニメのタイトルと総合得点を取得するScrapyプロジェクト
https://www.anikore.jp/chronicle/2016/winter/

# 作成手順
## プロジェクト作成
https://doc.scrapy.org/en/1.2/intro/tutorial.html
こちらの本家チュートリアルにあるように

```
% scrapy startproject project_name
```
というコマンドを任意の場所で実行すればプロジェクトが作成されます。
今回は``project_name``を``anime``にしました。

## Spider作成
続いてプロジェクトの``spiders``ディレクトリにSpider(スクレイパーのこと)となるPythonファイルを作成します。
今回は``anime_spider.py``という名前にしました。

完成物は以下のようになります。

```python:anime_spider.py
import scrapy


class AnimeSpider(scrapy.Spider):
    name = "anime"
    start_urls = [
        'https://www.anikore.jp/chronicle/2016/winter/'
    ]

    def parse(self, response):
        for anime in response.css('div.animeSearchResultBody'):
            yield {
                'title': anime.css('span.animeTitle a::text').extract_first(),
                'score': anime.css('span.totalRank::text').extract_first()
            }

        next_page = response.css('a.next::attr(href)').extract_first()
        if next_page is not None:
            next_page = response.urljoin(next_page)
            yield scrapy.Request(next_page, callback=self.parse)

```

### Spiderの名前 
```python
name = "anime"
```
これがSpiderの名前です。
スクレイピングを実行する際にここで宣言した名前を以下のようにして使います。

```
% scrapy crawl anime
```

### クローリング始点URL

```python
start_urls = [
    'https://www.anikore.jp/chronicle/2016/winter/'
]
```
これがクローリングの始点となるURLです。
今回は2016年冬アニメの一覧を取得したいので、2016年冬アニメのトップで宣言しています。

### スクレイピング
parse( )という関数のなかでスクレイピングとクローリングを行っています。
以下がスクレイピングの部分です。

```python
for anime in response.css('div.animeSearchResultBody'):
    yield {
        'title': anime.css('span.animeTitle a::text').extract_first(),
        'score': anime.css('span.totalRank::text').extract_first()
    }
```
Scrapyではcssとxpathでデータにアクセスできますが、今回はcssで書きました。

今回のサイトではアニメの説明ごとに``animeSearchResultBody``クラスの``div``タグでわけられていたので、以下のようにしてページ内に表示されているすべてのアニメの情報を取得しています。

```python
response.css('div.animeSearchResultBody')
```
取り出したアニメ情報から更にタイトルと総合評価だけがほしいので以下のように取り出します。

```python
yield {
    'title': anime.css('span.animeTitle a::text').extract_first(),
    'score': anime.css('span.totalRank::text').extract_first()
}
```
``extract_first()``は最初の要素を取り出してくれます。

```python
anime.css('span.animeTitle a::text')[0].extract()
```
として添字でもアクセスできますが、インデックスエラー防止とNoneを返してくれることからこちらを使っています。

### クローリング
クローリングは以下の箇所で行っています。

```python
next_page = response.css('a.next::attr(href)').extract_first()
if next_page is not None:
    next_page = response.urljoin(next_page)
    yield scrapy.Request(next_page, callback=self.parse)
```
次へボタンのhrefの文字列を指定して、次ページのURLを作成しています。
再帰的にparse( )関数を呼ぶことで、次ページがなくなるまで全ページをクローリングすることになります。

## 実行
最後にプログラムを実行しましょう。
「Spiderの名前」のところでも実行コマンドを紹介しましたが、オプションを加えてjson形式でファイル出力してみます。
プロジェクトディレクトリの下で以下のコマンドを打ちます。

```
% scrapy crawl anime -o anime.json
```
2016年冬のアニメのタイトルと総合評価が取得できました。

# 宣伝
Scrapyについて簡単に説明した動画を配信しました。
こちらではXPathを使ったスクレイピングを行っています。

「Scrapy：WEBページの情報を自動取集！！クローリング&スクレイピングフレームワーク」
https://www.youtube.com/watch?v=Zfcukqxvia0&t=3s

# 参考文献

https://doc.scrapy.org/en/1.2/intro/tutorial.html
https://ja.wikipedia.org/wiki/ウェブスクレイピング
[Xcode8]CocoaPodsで外部ライブラリを追加したのにビルドできない

```
“Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be 
configured correctly for targets which use Swift. Use the [Edit > Convert > 
To Current Swift Syntax…] menu to choose a Swift version or use the Build 
Settings editor to configure the build setting directly.
```

が出て、ビルドできない時の解決策

　　　　　　　　　　　⬇︎


⒈ プロジェクトのSwiftのバージョンを2.3にする。 
⒉ Targets -> (プロジェクト名) -> Use Legacy Swift Launguage Version を Yesにする。 
⒊ latestバージョンがSwift 3で書かれているとわかるライブラリはSwift2.3で書かれたバージョンを指定する。 
⒋ Podfileの最後に以下の記述をして、自動的に各ライブラリがSwift 2.3でビルドされるようにする。  

```
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '2.3'
    end
  end
end
```

⒌ `pod install`する。 
⒍ ビルドする。 
⒎ iOS10 SDKに対応するため、ライブラリのコードを修正する。
Unityで作ったアプリをXcodeから審査に出した際にリジェクトされた時の対応

Unityで作ったゲームアプリをアップルに申請する為、
Xcodeで「Submit to App Store」すると

```
ERROR ITMS-90023: "Missing required icon file. The bundle does not
 contain an app icon for iPad Pro of exactly '167x167' pixels, in
 .png fomat."
```

というエラーが出て、申請できなかった。

167×167ピクセルの画像サイズがないとのこと。

sketch3で申請に必要なアイコンサイズは全て書きだしたつもりだったが怒られた。

83.5×83.5ピクセルのx２はあるが、うまくImages.xcassetsのAppIconに入らず
自分でアイコンサイズ167×167の画像を作って、「iPad Pro」用のアイコンとしてXcodeに追加。

そして、無事にアップルに申請ができました！！


ちなみに、
それ以外に出たリジェクト。

```
ERROR ITMS-90207: ERROR ITMS-90207: "Invalid Bundle. The bundle at
 '~~.app' does not contain a bundle executable."
```

応急処置としては、
Build settingのenable bitcodeをNOにし、
提出時にinclude bitcodeのチェックボックスをオフにしたらエラーが出なくなった。
さくらのクラウドでルータ機能を利用してみる(3)

作成したルータ機能付スイッチにサーバを接続してみます。

##サーバ作成時の指定
NICでスイッチに接続を選択して
選択肢から先ほど作成したスイッチを指定します。
![ルータ+スイッチ-サーバ追加.png](https://qiita-image-store.s3.amazonaws.com/0/140995/e9aa988f-9e75-c66e-b272-cbfc9d982af3.png)

続いてディスク修正でIPアドレスを指定します。
ルータなしのスイッチに接続した場合と異なり、IPアドレスを選択肢から選べる様になっています。
また、ルータのゲートウェイアドレス、ネットマスクが自動的に入力されます。
![ルータ+スイッチ-サーバ追加2.png](https://qiita-image-store.s3.amazonaws.com/0/140995/b55a9e23-9217-d6c4-92fb-173eb386b030.png)

![ルータ+スイッチ-サーバ追加3.png](https://qiita-image-store.s3.amazonaws.com/0/140995/5db9fd61-c451-aec9-9ea3-d3fb2e5c4fd1.png)

##サーバ作成後のスイッチのトポロジ
サーバ作成後にスイッチのトポロジを確認するとこのようになっていました。
ちょっと小さいですが、test1というサーバがスイッチとつながっているのが確認出来ます。
![ルータ+スイッチ-サーバ追加5.png](https://qiita-image-store.s3.amazonaws.com/0/140995/86ae4089-7469-5b2a-7ef3-bb90cb3c8c57.png)

##全体のマップ
このようにトポロジと同じ表示になっています。
ここではスイッチの帯域を500Mbpsに、IPを追加しています。
![ルータ+スイッチ-サーバ追加4.png](https://qiita-image-store.s3.amazonaws.com/0/140995/afd2acdb-7ca4-e795-c77a-d75c9cfa9211.png)

##通信してみる
サーバ作成時に選んだIPアドレスで通信できるようになっているはずです。
もし通信出来なかったらサーバの起動を忘れていないか、パケットフィルタの設定は正しいかなどを確認するといいかもしれません。
iOS開発で使いたいライブラリを探すなら

「iOS Cookies」はSwift製のライブラリだけをまとめたサイト。

iOSアプリ開発において便利なライブラリがそろっており、
すべてSwift製のライブラリ（Objective-Cのライブラリは含まれません）なので、
これからiOS開発をしようと思っている方にはGood。

それぞれのライブラリにGitHubなどリポジトリへのリンクや簡単な説明が載せられています。


http://www.ioscookies.com/
pythonでメソッドの処理時間を計測する関数

メソッドや関数をまるっと計測する関数です。
python2.7です。

#メソッド
引数の最後に繰り返し回数を入れます

```py
import time
def timer_handler(func, *args):
    #hiracamusさんのご指摘によりtime.time()から修正しました
    start = time.clock() 
    count = args[-1]
    args2 = args[:-1]
    for i in range(count):
        rtn = func(*args2)
    elapsed_time = time.clock() - start
    print("time = " + str(elapsed_time))
    return rtn
```

#使い方
繰り返し10000回実行した場合の処理時間

```py
def test(a,b,c):
    return pow(a,pow(b,c))

loop = 10000
v = timer_handler(test, 2,3,3, loop)
print v
```

#出力
time = 0.024491071701
134217728