OmniAICreator/Qiita-1.07M huggingface dataset:
[OpenStreetMap] Overpass APIで地点検索


お店レビューのようなロケーションベースのサービスを作るときに悩ましいのが、ランドマークの地点情報をどこから持ってくるのかということだと思うのですが、[OpenStreetMap](http://www.openstreetmap.org/)のデータとAPIが便利だったので、簡単に紹介します。

## ライセンス

まずデータのライセンスから。ライセンスは次のようになっています。データの再配布をしないようなサービスであれば、クレジット表記のみでコピーを含めて利用可能なようです。

[Copyright](http://www.openstreetmap.org/copyright)より

> OpenStreetMapとその協力者をクレジットすれば、データを自由にコピー、配布、送信、利用することができます。変更したり翻案したりしたデータは、同じライセンスに従って提供することができます。

[FAQ](http://wiki.openstreetmap.org/wiki/JA:Legal_FAQ)より


> 3b.OSMデータから派生したデータを持っている場合、それを配布しなければならないのでしょうか？
> - ライセンスはあらゆるデータを配布したり、利用可能な状態にしておくことは強制していません。

## Overpass API

OpenStreeMapのデータは、[Overpass API](http://wiki.openstreetmap.org/wiki/JA:Overpass_API)を通して検索することができます。

> Overpass API(別名 OSM3S)とは、OSM地図データに含まれる情報のなかから指定した部分のみを抜き出す機能をもつ、読み出し専用のAPIです。サービスはWebを介したデータベースとして提供されています。APIに対してクエリを行うことで、クライアントはクエリの内容に従った結果データを受け取ることができます。

Overpass APIのコードは[公開](https://github.com/drolbr/Overpass-API)されていて、自分でインスタンスを立てて使うことができますが、ありがたいことにいくつかパブリックに利用な可能なインスタンスが用意されています。目安の制限が書かれていますので、これを越えるリクエストを投げる場合は、自分でインスタンスを用意しましょう。

> http://overpass-api.de/ クエリ用アドレスは http://overpass-api.de/api/ (4 cores, 64 GB RAM).
http://overpass.osm.rambler.ru/ クエリ用アドレスは http://overpass.osm.rambler.ru/cgi/ (8 cores, 64 GB RAM).
openstreetmap.frサーバの Overpass API
どのサーバも、1日に合計おおよそ1.000.000リクエストまでを受け付けることが可能です。また、1日に10.000クエリ、あるいは5GB以下のデータ転送量であれば、他のサービス利用者に影響をあたえることはほぼ無いでしょう。

## Overpass APIサンプル

ある場所の近くの名前のあるランドマークを検索してJSONで取得する、というようなケースのサンプルを示します。Overpass APIのクエリは、XMLあるいは Overpass QL形式で投げることができます。

クエリ

```XML
<osm-script output="json">
  <query type="node">
    <around lat="51.249" lon="7.148" radius="100.0"/>
    <has-kv k="name" />
  </query>
  <print />
</osm-script>
```

結果

```
{
  "version": 0.6,
  "generator": "Overpass API",
  "osm3s": {
    "timestamp_osm_base": "2014-11-27T16:26:02Z",
    "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
  },
  "elements": [

{
  "type": "node",
  "id": 677518646,
  "lat": 51.2486074,
  "lon": 7.1485793,
  "tags": {
    "bus": "yes",
    "highway": "bus_stop",
    "name": "Unterer Grifflenberg",
    "public_transport": "platform"
  }
}

  ]
}
```

クエリ実行は、[Overpass Tourbo](http://overpass-turbo.eu/)を使うと簡単に結果を確認できて便利です。
無線LANでandroidアプリの実機デバッグ

## 事前準備

* adbコマンドを使えること
* データの送受信が行えるUSBケーブルでpcと端末を接続しておくこと
* 端末のwi-fiで無線環境に接続しておくこと


## 例(ケーブル接続)

    adb tcpip 5260 // 任意のポート
    adb connect 端末に割り当てたれたIP:5260

## 確認(ケーブル非接続)

    adb devices
    
上記を入力して、デバイスが出てくれば接続完了

## 切断(ケーブル非接続)

    adb disconnect 端末に割り当てたれたIP
CodeIQ 中学入試から：数字の個数をRubyで解く

問題はこちら
http://nabetani.hatenablog.com/entry/codeiq_digicount_q1138
愚直にプログラムして「処理時間かかり過ぎ！！」となって枝刈り(?)を入れてみました。

```rb
def solve(q)
  from,to,n = q.split(',')
  c = 0
  i = from.to_i
  while i <= to.to_i
    s = i.to_s
    if s =~ /(.*?)(0+)$/
      j = ($1.to_i.succ.to_s + $2).to_i
      if j <= to.to_i
        c += $2.size * (10 ** ($2.size - 1))
        c += $1.to_s.count(n) * ('1' + $2).to_i
        i = j
        next
      end
    end
    c += s.count(n)
    i += 1
  end
  c
end

DATA.readlines.each do |line|
  no,q,a = line.strip.split(/\s+/)
  ans = solve(q)
  print no + "\t" + ans.to_s + "\t"
  puts ans == a.to_i ? ' o' : ' x'
end
__END__
T00	1,5,0	0
T01	3,10,0	1
T02	3,10,1	1
T03	3,10,2	0
T04	99,101,0	3
T05	44,47,0	0
T06	65,68,4	0
T07	11,197,0	28
T08	75,282,1	141
T09	327,613,0	59
T10	2164,2628,7	97
T11	1766,2962,2	1303
T12	6361,11230,2	1408
T13	2486,6359,0	1177
T14	8596,38338,7	11945
T15	74734,134542,0	33961
T16	35477,233687,6	99529
T17	57717,732021,7	371649
T18	1188295,1249712,2	84100
T19	1469212,3488445,8	1215635
T20	1971725,2661431,9	374216
T21	3612664,11115935,9	5550993
T22	14021897,25915307,0	8125192
T23	16293079,79748373,0	44031581
T24	28956229,51465735,0	16553801
T25	248756187,326622620,3	81348604
T26	496085002,813777251,0	262561749
T27	281965927,449705381,2	155699961
T28	1590046604,5080813125,4	4093479299
T29	1469893985,5806174047,2	4865742016
T30	10729668540,17385889964,9	6019040872
T31	18441674861,20552568857,5	1942654772
T32	20943752548,37404293118,8	15772376218
T33	89760914524,252602641040,8	172818046478
T34	372685143205,614738979818,0	271847213926
T35	311092013160,715558286719,8	443966022456
T36	877055283034,1133075167341,0	386433827635
T37	3577552059505,5721254585526,0	2564361501302
T38	4331884268509,7172807178391,9	3420845753971
T39	10780555984037,13077075322734,3	2803888910108
T40	11143750221034,57629812742206,9	59736266200544
T41	29685680401357,40863763369545,4	15261031155724
T42	64950491092189,162957102289964,4	136656405514980
T43	285614939702627,671352472291019,0	541907823592872
T44	1632688493048891,1807370260549929,4	247551524502452
T45	1090991911151983,3757645126492252,9	3934937225560395
T46	6429165733121302,6728431846418458,0	419096488948133
T47	10833228364507232,15236979472080112,7	6564530459749872
T48	1,100000000000000000,9	170000000000000000
T49	1,100000000000000000,0	158888888888888906
```
Underscore.jsで配列中の同じ文字列や数値の出現回数を取得


##Javascriptでの配列操作は割と骨が折れますね。

投票システム的なものを作っているのですが、配列から投票数を取得したメモです。

underscore様々です。
http://underscorejs.org

##_.countByで集計

```vote.js

var data = ['岩手','のびすけ','岩手','のびすけ','n0bisuke','LIG','LIG','岩手',4,4,4,4];
var vote = _.countBy(data, function(num) {
	return num;
});
console.log(vote);
/*
{
	LIG: 2,
	n0bisuke: 1,
	のびすけ: 2,
	岩手: 3,
	4: 4
}
*/
```

## for inで取り出す

連想配列になるので for文ではなく `for in`にします。

```vote.js
for(var key in vote){
	console.log(key +'の投票数は'+vote[key]+'です。');
}

/*
4の投票数は4です。
岩手の投票数は3です。 
のびすけの投票数は2です。
n0bisukeの投票数は1です。
LIGの投票数は2です。
*/
```

## 疑問

これを

```
{
	LIG: 2,
	n0bisuke: 1,
	のびすけ: 2,
	岩手: 3,
	4: 4
}
```

こうしたいのですが

```
{
	4: 4,
	岩手: 3,
	LIG: 2,
	のびすけ: 2,
	n0bisuke: 1
}
```

ソートのスマートなやり方ご存知の方がいればご教授頂きたいです汗
Drone をインストールしてみる

## インストール

https://github.com/drone/drone に従ってインストールします

```
$ curl -LO  downloads.drone.io/master/drone.deb
$ sudo dpkg -i drone.deb
```


## OAuth application への登録

GitHub の OAuth application に登録します

https://github.com/settings/applications/new


- ``Homepage URL``: drone インストールしたホストを指定します
    - 例: http://example.com/
- ``Authorization callback URL``: ``Homepage URL`` /api/auth/github.com を指定します
    - 例: http://example.com/api/auth/github.com


## 設定

設定ファイルは /etc/drone/drone.toml です

GitHub の OAuth application に登録した際に表示された ``Client ID`` を ``client`に、 ``Client Secret`` を ``secret`` に指定します

```drone.toml
[github]
client=""
secret=""
```


## 起動

下記で再起動させます

```
$ sudo service drone restart
```


## Login

http://example.com/login にアクセスします

![スクリーンショット 2014-11-27 21.56.51.png](https://qiita-image-store.s3.amazonaws.com/0/36202/ca55a73f-9b78-f027-a7bf-1526be0e7b0c.png)


``GitHub`` を押下して、認可処理を進めると、dashboard にリダイレクトされます


![スクリーンショット 2014-11-27 21.58.03.png](https://qiita-image-store.s3.amazonaws.com/0/36202/58acedad-ca42-e96d-7a68-0239efb019a8.png)


## Activate

``BROWSE ALL`` を押下し、テスト対象のリポジトリを選択して activate します

activate すると、選択したリポジトリの GitHub Webhooks が設定され、リポジトリに push すると GitHub から POST リクエストが送信されるようになります



## git push

GitHub に push すると .drone.yml の内容に従って script が実行されます

![スクリーンショット 2014-11-27 23.56.14.png](https://qiita-image-store.s3.amazonaws.com/0/36202/863af594-5345-017d-2311-f0b2aee2e239.png)
AngularJS Level4


1. **list-group**

```コード
<ul class="list-group">
  <li class="list-group-item" ng-repeat="product in store.products">
  <h3>
  // この部分を別ファイルに
    {{product.name}}
    <em class="pull-right"> ${{product.price}}</em>
    
  //  
  </h3>
  <section ng-controller="PanelController as panel">
..

```


------
Lollipopへのバージョン更新対応

Lollopopが出て、結構時間が経った。
最近、Google Play ConsoleのExceptionログがまずいことになりつつあったので、いい加減対応することにした。

その時のメモ

# 前提条件

Android Studio 0.8.14
Mac OS X 10.9.5
(Mac OS X 10.10でも確認済み)

SDKのバージョンをあげる
---

build.gradleに記載されている、各種SDKのバージョンをあげた。

```build.gradle
android {
    compileSdkVersion 21
    buildToolVersion "21.0.0"
...
}
```

supportライブラリなどを利用しているのであれば、そちらも。

# JDKのバージョンをあげる。

LollipopからJDK7にあがった。
Yosemiteならすでにあげているから問題ないが、Yosemiteを回避している人はJDK7にあげる必要がある。
[Oracle](http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html)からjdk-7u72-macosx-x64.dmgをダウンロードしてぽちぽち押してインストールした。

## JDKロケーションを変更する

Android StudioのFile > Project Structure > JDK Locationで変更する。

/Library/Java/Home

JDK6は/System配下にあったが、変わってた。

# Objectにprivateなtransient変数が追加された

Reflectionを使って、全メンバー変数からQueryを作成するような処理が存在していたのだけど、そこで落ちた。
よーくログを見てみると、```shadow$_klass_, *shadow$_monitor_```なんてのが含まれた変なQueryになってた。

原因は以下の変数がObjectクラスに追加されたこと。

```java:Object.java
private transient Class<?> shadow$_klass_;
private transient int shadow$_monitor_;
```

transient変数を無視することを完全に忘れてた！

こんな感じで案外すんなりいけた。
主な機能が動いたってだけで、細かいviewが動いてなかったりしてるかもしれないけど、一旦Exceptionログはこれで落ち着きました。
（結局最後のやつだけしか活躍してないけどね！）

http://stackoverflow.com/questions/23205426/requestfeature-must-be-called-before-adding-content-error-on-super-oncreate
sortあるある

欲しい結果はこれじゃない…
=======================
```
0
1
10
2
3
4
5
6
7
8
9
```
あのRubyの生みの親**まつもと ゆきひろ**さんも言っていました
「こうなるからRubyのバージョンには2桁の番号を付けない」と。

追記(2014/11/29)
----------------
`:sort n`で整数順でソートが出来ました。@thincaさんありがとうございます。Vimステキ:heart:

Vimスクリプトで解決しよう
======================
せっかくスクリプトにするのでついでに小数のソートにも対応しましょう

```vim:FSort.vim
command! -nargs=? -range=% -bang FSort :<line1>,<line2>call s:FSort(<bang>0, <q-args>)

function! s:FComp(lhs, rhs)
    let l:lhs = str2float(substitute(a:lhs, s:pat, "", ""))
    let l:rhs = str2float(substitute(a:rhs, s:pat, "", ""))
    return l:lhs == l:rhs ? 0 : l:lhs < l:rhs ? -1 : 1
endfunction

function! s:FCompBang(lhs, rhs)
    return -s:FComp(a:lhs, a:rhs)
endfunction

function! s:FSort(bang, ...) range
    if (a:1 != "")
        let s:pat = matchstr(a:1, '/\@<=.*/\@=')
    else
        let s:pat = '.\{-}\%\(\d\|-\)\@='
    endif

    let lines = []
    for i in range(a:firstline, a:lastline)
        call add(lines, getline(i))
    endfor
    if (a:bang)
        call sort(lines, "s:FCompBang")
    else
        call sort(lines, "s:FComp")
    endif
    for i in range(a:firstline, a:lastline)
        call setline(i, lines[i - a:firstline])
    endfor
endfunction
```

vim内臓の`:sort`同様に`:FSort!`で逆順とか、
`:FSort！ /\(\(\d\|\.\)\+\s*,\s*\)\{2}/`で以下のように
2つ目のカラムまで読み飛ばして小数で逆順ソートなどできます。

```
1,  0, 2.4 , 2
4,  1, 2.3 , 0
5, 11, 2.1 , 1
0,  0, 1.4 , 0
6,  9, 1.12, 2
3,  0, 1.1 , 1
8,  1, 0.9 , 1
9,  0, 0.1 , 2
6, 10, 0.03, 0
```

### Vim8がリリースされたのでlambdaを使ってみる

```vim
command! -nargs=? -range=% -bang FracSort :<line1>,<line2>call s:FracSort(<bang>0, <q-args>)

function! s:FracSort(bang, ...) range
    if (a:1 != "")
        let l:pat = matchstr(a:1, '/\@<=.*/\@=')
    else
        let l:pat = '\v.{-}%(-?%(%(\.%(\d)@=)|\d))@='
    endif

    let lines = []
    for i in range(a:firstline, a:lastline)
        call add(lines, getline(i))
    endfor

    let l:Fn = { x -> str2float(substitute(x, l:pat, "", "")) }

    if (a:bang)
        call sort(lines, { a, b -> l:Fn(a) == l:Fn(b) ? 0 : l:Fn(a) < l:Fn(b) ? 1 : -1 })
    else
        call sort(lines, { a, b -> l:Fn(a) == l:Fn(b) ? 0 : l:Fn(a) < l:Fn(b) ? -1 : 1 })
    endif
    for i in range(a:firstline, a:lastline)
        call setline(i, lines[i - a:firstline])
    endfor
endfunction
```
隣接セレクタの使い時

リストを並べる際に下記みたく仕切り線を引きたい。

A　|　B　|　C　|　D　|　E　

こんな表示をしたい時は隣接セレクタ「+」を使うと便利。

### よく見る方法

```html:list.html
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li class="last">E</li>
</ul>
```

```css:style.css
li {
  display: inline-block;
  border-right: 1px solid #000;
}

li.last {
  border-style: none;
}
/*** CSS3対応ブラウザであれば .last は撤去し last-childに置き換え可能 ***
/*
li:last-child {
  border-style: none;
*/
```

### 隣接セレクタを使用した方法

```html:list.html
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>
```

```css:style.css
li {
  display: inline-block;
}

li + li {
  border-left: 1px solid #000;
}
```

### メリット

* クラスを付与しないので、htmlの更新が楽
* CSS2なのでIE7にも対応ok ;)

### ポイント
「最後の要素だけ打ち消し」
ではなく
「2番目以降は全て同じ」
ことに注目する。


リスト以外にも幅広く使えるので便利。
Processingでコマンドライン引数を受け取る

# 概要
Processingで作成したアプリケーションをコマンドラインから実行した際、引数を受け取って何かをさせたいと思いザックリ調べた。

# 手順
PDEで作成したアプリケーションをコマンドラインから実行した時のコマンドライン引数argsという変数に格納されるので、それを利用する。

```
void setup(){
  println(args);
}
```

コマンドライン引数を使用して何かする場合にはエラー処理を作りこむ必要はあると思う。

# 資料
http://processing.org/reference/javadoc/core/processing/core/PApplet.html#args
RailsのTransactionの使い方


#なぜTransactionが必要なのか
Transationの目的は、あるいコードブロックにあるSQL文の変更を、全部成功することを守るための存在である。Transactionにより、データの統一性を保ことができる。銀行などの受け入れと引き出しの処理には必要でしょう。二つの処理の中一つが失敗すると、コードブロークにあるSQL処理を全部ロールバックされるのが、Transactionの特徴である。

```ruby
ActiveRecord::Base.transaction do
  david.withdrawal(100)
  mary.deposit(100)
end
```

#Transationのロールバックが発火条件
Railsでは、ロールバックが発火するには、「例外」が必要である。これがTransactionを使うときのもっとも重要なことである。

例えば、Railsでは `#update_attribute`は例外を発火せずに、`false`に返すとなる。そのため、`#update_attribute`を使うには、結果を見て、例外をスローする必要がある。Railsではびっくりマーク`!`がついているメソッドは、失敗したら例外をスローすると意図するので、transactionを使うときは、`save`ではなく`save!`、`destroy`ではなく`destroy!`を使うべきでしょう。

例外が発生するときは、transactionがまず受け取って、ロールバックを行う。ロールバックが終わった後は、例外がそのまま外にスローされるため、アプリケーション側もその例外を対応する必要がある。

例外を使わずに、Transactionをロールバックさせたい場合は、`ActiveRecord::Rollback`を使えばよい。`ActiveRecord::Rollback`は外側にスローされないため、アプリケーション側は対応しなくてもいいという利点がある。

#いつNested Transactionを使うべき
Nested Transactionの例ですが：

```ruby
User.transaction do
  User.create(username: 'Kotori')
  User.transaction do
    User.create(username: 'Nemu')
    raise ActiveRecord::Rollback
  end
end
```
Nested Transactionを使うときの最も重要な注意点は、一番中の処理が`ActiveRecord::Rollback`が投げても、子transactionで受け取った後広められず、親Transactionは受け取れないことである。広めたいときは、子transactionに `:require_new => true`を設定する必要がある。

じゃいつNested Transactionを使うべきかの話ですが、マルチデータベースをマルチモデルで使うときは、メソッドをNested Transctionの中で囲まれる必要がある：

```ruby
Client.transaction do
  Product.transaction do
    product.buy(@quantity)
    client.update_attributes!(:sales_count => @sales_count + 1)
  end
end

```

#Transactionsでのコールバック
もし`#save`と`destroy`がTransactionで使う場合、`#after_save`もTransactionの中で実行されてしまう。そのため
Transactionの外で実行したい場合は、`#after_commit`と`#after_rollback`で実装してください。

#Transactionで細かいの注意点
Transactionの中で `ActiveRecord::Invalid`をしない方がよい。なぜなら、Postgresではその例外をキャッチしたら、囲まれるTransactionもロールバックされてしまう振る舞いがある。

#結論
Transactionを使うときのアンチパータン

- シングルレコードを更新するときにTransaction使う
- Nested Transactionを使いすぎる
- Transactionにある処理がどうしてもロールバックを発火できない
- ControllerでTransactionを使う

#参考資料
http://markdaggett.com/blog/2011/12/01/transactions-in-rails/
越境しても変わらないもの


このエントリーは、[DevLOVE Advent Calendar 2014「越境」](http://devlove.doorkeeper.jp/events/14580)の20日目の記事です。
昨日の[kimKimmy](http://kimkimmy.hatenablog.com/entry/2014/11/26/230822)さんよりバトンを受け取り書いております。

# これまでを振り返って思う越境

これまでを振り返ってみて越境だなと感じることを列挙してみます。

- 学術界から産業界へ
- 転職
- コード書きからマネジメントへ

## 学術界から産業界へ

大学に入ったころは、学術界でコンピュータサイエンスの研究者を目指していたのですが、とある事情で、在学中に個人事業主としてソフトウェア開発をすることになりました。知り合いの方々が色々と気にかけて仕事を出してくださったので、幅広く色々と興味深いお仕事もさせて頂きました。
そんなこんなをしているうちに、産業界での仕事が面白くなり、学術界ではなく産業界での道を選び、医用系のシステムを開発する会社に就職しました。

## 転職

医用系のシステムを開発する会社にいたエンジニアの方々は高いスキルを持っていた方ばかりでしたので、とてもいい刺激を受けました。ただ、社の中で学べる分、社の外に対してのアクティビティはあまり推奨されない感じでした。

一方、そんな中でエンジニアのコミュニティを知り、少しずつ社の外での刺激も受けるようになりました。
なんとなく名前は知っていたけど、「アジャイル」に関して興味を持ち始めたのもこのあたりからでした。

社の中でも学ぶところはあるのですが、もっとコミュニティの活動などにも参加したいと思い始めたところで、声をかけてくれたのが、今の会社の社長でした。
今の会社は、前の会社よりも小さい会社ですが、自社にとって社の外で活動することはプラスになるから、どんどんやってよいと言われたことも転職を決めた1つの理由でした。

## コード書きからマネジメントへ

そんなこんなで会社を変わったのですが、前職はかなりフラットな組織ではありましたが、立場的には一兵卒でしたが、これまで自社のソフトウェア開発は強くなかったので、そこを強化するということで、引っ張ってもらったのもあり、社員の教育や、新しい企画の立案、さらには経営などにも口を挟ませてもらう機会が増えました。というよりも、そちらも主たる業務になってきています。

もととも常に第一線でコードを書いていたいという願望はあり、今でもプレイングマネージャ的な動きをしていますが、意識として変わってきたなと感じています。

# それって本当に越境？

ここまでざっと自分の越境を考えてみたら、実は越境してなかったのでは？という疑問が湧いてきました。

学術界から産業界に主軸はシフトしたとしても、今でも学術界での動きをしていますし、学術界と産業界の間で仕事がしたいと思って活動しています。なかなかできていませんが・・・。

会社は変わりましたが、よいソフトウェアを開発したい、よりよい現場で仕事がしたい、という思いは同じだと思っています。そのための手法、というより文化が変わってきたのかなと思います。

コードを書くこととマネジメントは仕事としては大きく違う訳ですが、会社を大きくしたい、世の中にインパクトを与えたい、そういった思いは同じだと思っています。

そうすると、肩書きとか、所属とか、そういったものは越境しましたが、自分にとっての、自分の中の理想というのはあまり変わっていないのかなと思います。


# まとめ

とりとめもない話になってきたので、そろそろまとめたいのですが、何が言いたいかというと、

越境は大きな変化です。それにより変わることはたくさんあると思います。でも、少なくとも自分で選んだ越境であれば、そこで変わらないことに目をやると、自分にとって大切にしたいことが見えてくるのかなと思います。

まだまだ、僕自身でそこにしっかりと目を向けられておらず、うまく言葉で言い表せず抽象的なのですが、僕にとっては「ソフトウェアを開発することが楽しくなること」がいくつかの越境を通して、再認識することです。

みなさんが越境しても変わらなかったことは何ですか？



さて、明日は[bangucs](http://bangucs.tumblr.com/post/103714554412)さんです。
よろしくお願いします。
React.jsのJSXを使ってみる

前回のHello React.jsでコード自体は紹介したのですが、今回はその辺りをもう少し詳しく見ていきたいと思います。

# JSX

```
var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
})
```

こんな感じで一見HTMLに見える部分`<div>...</div>`がJSXのSyntaxです。

詳しくは↓に書いてある通りなのですが、XML likeにタグを書いていく感じです。覚えることはほとんどないです。

http://facebook.github.io/jsx/

注意点としてはHTMLではないということで、例えば`div`に`container`というクラスを指定したい場合は、`<div class="container">...</div>`ではなくて、`<div className="container">...</div>`となります。(classはJavaScriptの予約語のため)

その他ではlabelのfor属性は`htmlfor`にする必要があったりもします。

HTMLはタグがちゃんと閉じてなくてもエラーなったりしないですが、JSXではタグが閉じられてない場合エラーになるので事前に気づけるというのもいい点ですね。

## 使い方

### オンラインで変換する

* JSXTransformer( http://fb.me/JSXTransformer-0.12.1.js )を事前に読み込んでおくことで使うことが出来ます。
* ただ、オンライン変換なのでproduction環境で使うのはパフォーマンス的にも推奨されていません。

```html
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script type="text/jsx;harmony=true">
...
</script>
```

### precompileする

* `npm i -g react-tools`してreact-toolsをインストールすることで`jsx`コマンドを使用することが出来ます。

```
% jsx --harmony src/ build/
```

watchさせておくことも出来ます。

```
% jsx --harmony --watch src/ build/
```

### browserifyやwebpackを使って変換する

* browserifyの場合は、[reactify](https://www.npmjs.org/package/reactify)を使うことで変換することが出来ます。

```package.json
  "browserify": {
    "transform": [
      ["reactify", {"harmony": true} ]
    ]
  }
```

### node-jsxを使う

* server-side-renderingをする時など、node.jsの中で変換したいような場合は、[node-jsx](https://www.npmjs.org/package/node-jsx)を使うことで変換することが出来ます。
* requireしてinstallするだけなので簡単です。

```js
require('node-jsx').install({harmony: true});
```

## JSXを使う意味

* JSXを使うことでHTMLに近い感じで記述出来て非エンジニアにもわかりやすいメリットがあります。
  * 好みもあるかと思いますが、`React.DOM.div(null, 'hello')`よりは`<div>hello</div>`の方が...
* 裏でいい感じにやってくれる。
  * 例えばv0.11からv0.12で`React.createClass`の挙動が変わったのですが(これは明日書きます...)、JSXを使っている場合はコードはそのままで問題なかったりとか。

まぁそんなものかなと思うので、JSで書きたい人は書いてもいいのかなとは思います。

JSX以外ではcoffee-scriptと組み合わせることを想定して作られるreact-kupなんてのもあったりします。

https://github.com/snd/react-kup

## 確認

ちょっと変換を確認したい場合は↓などを活用すると便利です。

* JSXの変換結果の確認
  * http://facebook.github.io/react/jsx-compiler.html
* HTMLをもとにどうJSXを書けばいいのかの確認
  * http://facebook.github.io/react/html-jsx.html

# ES6,7

JSXの変換するときに`harmony`optionというものがあって、それを有効にすると`Class`や`Arrow Function`など一部のES6,7のfeatureを使用することが出来ます。こんな感じで書けて気持ちいいので個人的には有効にして使ってます。

```js
var Items = React.createClass({
  itemName(item) {
    return `${item.name}:${item.count}`;
  },
  render() {
    var items = this.props.items.map(item => <span>{this.itemName(item)}</span>);
    return (
      <div>{items}</div>
    );
  }
});
```

この辺りのfeatureを使用することが出来るようです。

* es6-arrow-functions
* es6-object-concise-method
* es6-object-short-notation
* es6-classes
* es6-rest-params
* es6-templates
* es6-destructuring
* es7-spread-property

https://github.com/facebook/react/blob/master/vendor/fbtransform/visitors.js#L30-L37

というわけでReact.jsについて聞いたときにJSXという謎の言語を使う必要があって敬遠する人もいるかと思いますが、Componentの定義をわかりやすく書くためのものなので怖くないよという話でした。

明日はComponentについてもう少し書いてみたいと思います。
～Java7とJava8では、HashMapとHashSetでiterationの順番が変わる。

順番に依存していると危ないよ、という話。

仕事でkey ringから任意の鍵を取得して暗号化/複合化するような状況でコケたという話を耳にして調べてみた。

* Collections Framework Enhancements in Java SE 8

https://docs.oracle.com/javase/8/docs/technotes/guides/collections/changes8.html

例えばコレとか危ない。

* bc-java/PGPExampleUtil.java at master · bcgit/bc-java

https://github.com/bcgit/bc-java/blob/master/pg/src/main/java/org/bouncycastle/openpgp/examples/PGPExampleUtil.java

まさにbouncycastleで起きたので、誰かのための備忘。
Hello React.js

というわけで、今回はHello World的なComponentを作ってみたいと思います。

基本的には`React.createClass`でComponentを作って、それらのComponentを組み合わせてページを作って`React.render`でDOMと紐付けることで表示を行います。

## JSXを使う

JSXについては明日のAdvent Calendarで書きますが、こんな感じでJSの中にXML likeにマークアップを直接書くことが出来ます。

といってもこのままブラウザで実行すると当然エラーになるので、react-toolsを使って事前にcompileするか、http://fb.me/JSXTransformer-0.12.1.js にあるようなJSXTransformerを事前に読み込んでおく必要があります。

また、browserifyで[reactify](https://www.npmjs.org/package/reactify)を使うなどして変換する方法もあります。

```js
var React = require('react');

var Hello = React.createClass({
  render: function() {
    return (
      <div className="container">Hello {this.props.name}</div>
    );
  }
})

React.render(<Hello name="React" />, document.getElementById("app"));
```

ちなみに`div`もReactのComponentです。


## JSX +  ES6, 7のsyntax(一部)

JSXのtransformにはharmony optionがあって、これを有効にすることで一部のES6, 7のsyntaxを使用することが出来ます。

```js
var React = require('react');

var Hello = React.createClass({
  render() {
    return (
      <div className="container">Hello {this.props.name}</div>
    );
  }
})

React.render(<Hello name="React" />, document.getElementById("app"));
```

ArrowFunctionなんかはmapと組み合わせて使うととても便利です。

```js
var items = this.props.items.map((item) => {
  return <div>{item.name}</div>;
});
```

## without JSX

JSXなしで書くとこんな感じです。Hello Componentのrenderメソッド以外にも`React.render`でのHello Componentの指定も変わっているのがわかると思います。

```js
var React = require('react');

var Hello = React.createClass({
  render: function() {
    return React.DOM.div({className: 'container'}, 'Hello ' + this.props.name);
  }
})

React.render(
  React.createFactory(Hello)({name: 'React'}), document.getElementById("app")
);
```

このAdvent Calendarで紹介するコードはJSXでharmony optionを有効にした状態で書いていきます。

というわけで、明日はJSX周りについてもう少し説明したいと思います。
React.jsとは

# このAdvent Calendarについて

今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。

React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。

http://qiita.com/advent-calendar/2014/virtual-dom

※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。


# React.jsについて

http://facebook.github.io/react/

なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。

http://blog.atom.io/2014/07/02/moving-atom-to-react.html


React.jsはFacebookが作っていて、いわゆるMVCフレームワークでいうところのViewの部分をComponentとして作っていくためのライブラリです。(Handlebarsみたいなtemplate engineではないです)
facebookやinstagramはもちろん、AirBnBやYahoo、Atlassianなど色々なところで使われるようになってきています。


# 特徴

公式サイトでは下記が特徴として紹介されています。

* JUST THE UI
* VIRTUAL DOM
* DATA FLOW

それぞれについてはこれから書いていきますが簡単に。

## JUST THE UI

React.jsはComponentを作るためのライブラリです。Component志向なフレームワークは色々あるのですが、React.jsは本当にComponentを作るだけです。しかしながらそれによってアプリケーションの作り方を変えることが出来るというが面白いです。

また、Component作るだけなので覚えることも少ないので導入もしやすいかと思います。
(Backbone.jsのViewの部分をReact.jsにするとか、Angular.jsでReact.jsを使ったdirectives作るとか。)


## VIRTUAL DOM

React.jsではJavaScript内にVIRTUAL DOMとしてDOM Treeのような構造体を持っています。rerenderされる際に、その構造体の前後の状態を比較し、最小限の変更で実際のDOMに反映します。なので雑にrerenderしても必要最低限のDOMしか実際には更新されないので高速に処理することが出来ます。


## DATA FLOW

React.jsを使ってもAngular.jsなど2wayデータバインディングなフレームワークのようにはっきりと書くコードの量が減ったりするわけではありません。ですが、アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向なデータの流れでわかりやすくアプリケーションを作っていくことが出来ます。
(これだけの説明だとわかりにくいと思いますが...)


## その他

### JSX

その他で特徴的なものはJSXというXML likeなSyntaxを使用することが**出来る**ということです。
**出来る**という通り、optionalなので気持ち悪くてどうしていやだという人はJavaScriptで書いていくことも出来ます。
JSXについてはまた別の日に紹介します。

### Flux

あと、React.jsとセットでFluxという言葉も聞くと思いますが、これはMVCのようなアーキテクチャの話で、React.jsに含まれるものではないです。
ただFluxの構成要素としてReact.jsがあるので、これも別の日に書きたいと思います。

--------------

というわけで、React.jsをどう使っていくかについてを明日から書いていきたいと思います。

あ、あと何か試すときは公式にリンクのあるjsfiddleでちょいちょいと動かすと便利です。

* with JSX
  * http://jsfiddle.net/vjeux/kb3gN/
* without JSX
  * http://jsfiddle.net/vjeux/VkebS/


明日はまずHello WorldとしてComponentを作ってみたいと思います。
TextView の一部のリンク化＋クリックイベントの指定、をサクッと作る


## はじめに

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/39324/b251688a-3d12-f3e1-679a-bcb765fc31b3.png "ss.png")


利用規約やプライバシーポリシーなど、テキストの一部にリンクを付けてブラウザに飛ばしたいときなどにコピペして使えるメモです。SpannableString を使いますが、これが結構面倒なのでまとめました。

リンク対象のテキストの指定には正規表現を使っていて、複数のリンクをまとめて同時につけられます。onClick の中身を変えれば、ブラウザに飛ばす以外のアクションにも使えます。


## コード


```java:SampleFragment.java

private void setSpannableString(View view) {

    String message = "利用規約、プライバシーポリシーに同意する。";

    // リンク化対象の文字列、リンク先 URL を指定する
    Map<String, String> map = new HashMap<String, String>();
    map.put("利用規約", "http://hogehoge.com/rules");
    map.put("プライバシーポリシー", "http://hogehoge.com/policies");

    // SpannableString の取得
    SpannableString ss = createSpannableString(message, map);

    // SpannableString をセットし、リンクを有効化する
    TextView textView = (TextView) view.findViewById(R.id.text);
    textView.setText(ss);
    textView.setMovementMethod(LinkMovementMethod.getInstance());
}

private SpannableString createSpannableString(String message, Map<String, String> map) {

    SpannableString ss = new SpannableString(message);

    for (final Map.Entry<String, String> entry : map.entrySet()) {
        int start = 0;
        int end = 0;

        // リンク化対象の文字列の start, end を算出する
        Pattern pattern = Pattern.compile(entry.getKey());
        Matcher matcher = pattern.matcher(message);
        while (matcher.find()) {
            start = matcher.start();
            end = matcher.end();
            break;
        }

        // SpannableString にクリックイベント、パラメータをセットする
        ss.setSpan(new ClickableSpan() {
            @Override
            public void onClick(View textView) {
                String url = entry.getValue();
                Uri uri = Uri.parse(url);
                Intent intent = new Intent(Intent.ACTION_VIEW, uri);
                startActivity(intent);
            }
        }, start, end, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
    }

    return ss;
}

```

## 参考
http://developer.android.com/reference/android/text/SpannableString.html
http://developer.android.com/reference/android/text/Spanned.html
dockerでvpnサーバーをたてる

# え、Dockerで?
いくらdocker好きだからって、これは意味が無いだろうと思った人、かなり正解かもしれません。
そもそも、pritunl自体インストールが容易なので、dockerを使うと発生する作業のオーバーヘッドの方が大きいと思うかもしれません。
わたし自身これについてはあまり大きな意義を見いだしていませんが、やってみたら結構簡単にできたのでっと言い訳しておきます。

## きっかけ
この記事（ http://qiita.com/sue71/items/7b30766ddf070d4e3f25 ）が目に入ったからです。
そもそもVPNサーバーを立ち上げたいと考えていたのですが、http://centossrv.com/openvpn.shtml このサイトを探しただけで止まっていました。証明書をいっぱい作るってだけで抵抗感w

## 目から鱗
pritunlを使うとかなり簡単に構築できそう！
http://pritunl.com
管理がをwebベースでできるオープンソース（PythonとJavascript）
https://github.com/pritunl/pritunl

なので、ファイアウォールさえ気をつけて、どのポートを利用するかを考慮するだけになります。

とはいえ、まだそれ専用マシンを用意できません。

ググれ　→ [pritunl docker]

dockerイメージ発見です
https://github.com/lifeeth/docker-pritunl

# dockerでやる
やっと本題のようです。

ローカルに持ってくる
$ sudo docker pull lifeeth/pritunl

最低二つのTCPポート＆VPNで利用するUDPポートが動作には必要。ファイアウォールの関係があるので、あらかじめ明確にしておくと後々楽です。
管理用のポートはデフォルトで以下の通り
(1) 9700：pritunlが利用するweb用のポート
(2) 1194：OpenVPNが利用するポート
dockerの場合、ポートマッピングが容易なので、都合の良いTCPポート２つあればOK
VPNで利用するポート番号も設定で決められるので、あらかじめ決めておくだけ。
※とはいえ、とりあえずデフォルトで話を進めます。

例えばDMZとかに置く場合、TCPポートは内向きのみあけておけばOK
※外から管理する場合は別ですが。

VPNで利用するUDPポートを1150とかにしておきます。

## 整理

| service | protocol   | port |
|---------|------------|------|
| web     | tcp        | 9700 |
| OpenVPN | tcp        | 1194 |
| VPN     | udp        | 1150 |

### firewall
centos7の場合以下のように簡単に穴をあけられます。

```bash
$ sudo firewall-cmd --add-port 9700/tcp
$ sudo firewall-cmd --add-port 1194/tcp
$ sudo firewall-cmd --add-port 1150/udp
```

※その他の場合は個別に調べてね :grin: 

### 注意点
dockerでインスタンス生成する前に、Webで設定した情報は/var/lib/pritunl以下に保存される
dockerインスタンス内に保存された場合、dockerが落ちたりすると、設定を再度やり直す必要がでてきます。
設定のバックアップなども取れないので、これらの情報はホスト側に保存されるようにします。

格納場所：[ホスト側のカレントディレクトリ]/vpn

## インスタンス生成

ホスト側では以下のコマンドで実行する

```bash
$ sudo docker run -d -v `pwd`/vpn:/var/lib/pritunl --privileged -p 1150:1150/udp -p 9700:9700 -p 1194:1194 lifeeth/pritunl
```

## その他
後はブラウザで以下にアクセスして各種設定を行ないます。
`https://[hostname]:9700/`
以降の使い方はぐぐれば結構でてくると思います。
 http://christina04.hatenablog.com/entry/2014/11/01/141627
 
Organizationsでユーザーをグルーピングして、Serversでネットワーク設定。
ServerにOrganizationをアタッチすれば、ネットワークの利用ユーザーを
管理できるのはすごい分かりやすいです。

また、利用できるクライアントも幅広く対応
http://pritunl.com/tutorial.html
ubuntu、Windows、Android、iOS、Tunnelblick（mac）

webでユーザー設定をすると、keyをダウンロードできるようになります。
拡張子は.ovpn
このファイルを各クライアントアプリに設定すれば良いのです。
スマホの場合、対応するクライアントをインストールした後で、gmailとかで送付してダブルクリックすれば良いです。
macの場合、拡張子が、.ovpnだとTime Machineが起動したりするので、その場合、拡張子をtblkとかconfとかに変更すると良いようです。

## 謝意
重ねてになりますが、pritunlを紹介してくれたsue71（ http://qiita.com/sue71 ）さんに感謝いたします。
Ruby | 西暦年をもとに十二支（文字列 / emoji ）を取得する eto gem を作成した #ruby

# Ruby | 西暦年をもとに十二支（文字列 / emoji ）を取得する eto gem を作成した #ruby
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
西暦年をもとに十二支（文字列 / emoji ）を取得する eto gem を作成します。
## <i class="fa fa-file-text-o" style="font-size:1em;"></i> 仕様
* CLI / require して直接利用の 2 つのユースケースをサポート
* 西暦を入力とする
* 十二支名には以下を使用

~~~
[子, 丑, 寅, 卯, 辰, 巳, 午, 未, 申, 酉, 戌, 亥]
~~~

* 十二支 emoji には以下を使用

~~~ruby
[:mouse:, :cow:, :tiger:, :rabbit:, :dragon:, :snake:, :horse:, :sheep:, :monkey:, :chicken:, :dog:, :boar:]
~~~

![etos.png](https://qiita-image-store.s3.amazonaws.com/0/43480/72db8d96-0d54-8980-4c6e-49192cc1913f.png)

### ModuleName
Eto
### gem name
eto
### Module Functions
|name|args|memo|
|:--|:--|:--|
|names|--|全ての十二支を配列で返却|
|eto_hash|--|全ての十二支を {eto名: emoji名} 形式の Hash で返却する|
|name|year|year の十二支名を取得|
|emoji|year|year に対応する十二支の emoji を取得|

## <i class="fa fa-cube" style="font-size:1em;"></i> Installation

~~~bash
$ gem install eto
~~~

## <i class="fa fa-files-o" style="font-size:1em;"></i> Usage ( Command Line Interface)
### names
~~~bash
$ eto names
子丑寅卯辰巳午未申酉戌亥
~~~

### name year
~~~bash
$ eto name 1977
巳
$ eto name 1978
午
~~~

### emoji year
~~~bash
$ eto emoji 1977
:snake:
$ eto emoji 1978
:horse:
~~~

## <i class="fa fa-files-o" style="font-size:1em;"></i> Usage ( require gem )

### Eto.names
~~~ruby
require 'eto'
Eto.names #=> ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥']
~~~

### Eto.eto_hash
~~~ruby
require 'eto'
Eto.eto_hash
__END__
output
{
  '子' => ':mouse:', 
  '丑' => ':cow:', 
  '寅' => ':tiger:', 
  '卯' => ':rabbit:', 
  '辰' => ':dragon:', 
  '巳' => ':snake:', 
  '午' => ':horse:', 
  '未' => ':sheep:', 
  '申' => ':monkey:', 
  '酉' => ':chicken:', 
  '戌' => ':dog:', 
  '亥' => ':boar:'
}
~~~

### Eto.name(year)
~~~ruby
require 'eto'
Eto.name(1977) #=> '巳'
Eto.name(1978) #=> '午'
~~~

### Eto.emoji(year)
~~~ruby
require 'eto'
Eto.emoji(1977) #=> ':snake:'
Eto.emoji(1978) #=> ':horse:'
~~~

## <i class="fa fa-arrow-circle-right" style="font-size:1em;"></i> 参照
<i class="fa fa-github" style="font-size:1em;"></i> [eto GitHub](https://github.com/tbpgr/eto)
<i class="fa fa-external-link" style="font-size:1em;"></i> [eto RubyGems](http://rubygems.org/gems/eto)
uGUI スクロールしてないときはバーをフェードアウト

# Scroll Rect
- スクロールバーを簡単に指定できるが、スクロールバーは常に表示されてて、Scrollbar の intaractable もマウスオーバーの時のリアクションしかないっぽい?
- 以下を見るとOnBeginDrag や OnEndDrag などの Functionはある。
    http://docs.unity3d.com/460/Documentation/ScriptReference/UI.ScrollRect.html

- ということで ScrollRect を継承して、ドラッグされてない時はスクロールバーを非表示にするようにスクリプトを組んでみる。

# Image
- スクロールバーのハンドルは Image で表示されていて、フェードイン/アウトは以下でできる。
    http://docs.unity3d.com/460/Documentation/ScriptReference/UI.Graphic.CrossFadeAlpha.html

- 入力があったらフェードイン。
- 入力のないときにスクロールの velocityが一定値以下になったらフェードアウトにする。

# スクリプト
```csharp:ScrollRectPlus.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ScrollRectPlus : ScrollRect {　// ScrollRectを継承
	private Image scrollHandle; // スクロールバーのHandle(Image)
	private bool isScroll = false, isDrag = false; // フラグ

	protected override void Awake (){
		base.Awake ();
		// HandleのImageを取得
		scrollHandle = verticalScrollbar.gameObject.GetComponentInChildren<Image>();
	}

	protected override void OnEnable(){
		base.OnEnable ();
		scrollHandle.CrossFadeAlpha (0.0f, 0.0f, true);
	}

	void Update(){
		if (Mathf.Abs(velocity.y) < 10f) {
			if(!isDrag && isScroll){
				scrollHandle.CrossFadeAlpha (0.0f, 0.25f, true); // フェードアウト
				isScroll = false;
			}
		}
	}

	public override void OnBeginDrag(PointerEventData eventData){
		base.OnBeginDrag (eventData);
		isDrag = true;
		isScroll = true;

		scrollHandle.CrossFadeAlpha (0.5f, 0.25f, true);  // フェードイン
	}

	public override void OnEndDrag(PointerEventData eventData){
		base.OnEndDrag (eventData);
		isDrag = false;
	}
}

```

# 使い方
- ScrollRect の代わりに上記スクリプトをコンポーネントに追加。オペレーションはScrollRect と同様。
- Scrollbar の Image コンポーネントは削除する。(Image は Handleのみ)
- Scrollbar の intaractable は Off にする。

# 課題
- 上記はドラッグベースでありスクロールベースではないので、スクロールホイールに対応していない。
AWS SNS Platformエンドポイントの作成


## cliから

```bash

arn="arn:aws:sns:ap-northeast-1:xxxxx:app/APNS_SANDBOX/XXXX"
device_token="7746672f9de13....."

aws sns create-platform-endpoint \
    --platform-application-arn $arn \
    --token $device_token

```

## PHP SDKから

```php
<?php

$aws = Aws::factory(__DIR__.'/config.php');
$sns = $aws->get('Sns');

$arn = "arn:aws:sns:ap-northeast-1:xxxxx:app/APNS_SANDBOX/XXXX";
$device_token = "7746672f9de13.....";

$result = $sns->createPlatformEndpoint([
    'PlatformApplicationArn' => $arn,
    'Token'                  => $device_token,
    'CustomUserData'         => 'userdata!',
    'Attributes'             => ['Enabled' => 'true']
]);


$request_id   = $result->getPath('ResponseMetadata/RequestId');
$endpoint_arn = $result->getPath('EndpointArn');

// or $result->toArray();

```

## 参考

Amazon Simple Notification Service
http://docs.aws.amazon.com/aws-sdk-php/guide/latest/service-sns.html
[Swift]Stringから1文字目を取り出す方法メモ



たったこれだけのことなのに、

ひと手間必要だったので、メモ


## 方法

以下のようなString型の変数があるとします。

```swift

let str: String = "HelloWorld"

```

ここから１文字目だけを取り出すには、以下のようにします。

```swift

let str: String = "HelloWorld"

let nsStr: NSString = str as NSString

let firstChar: String = nsStr.substringToIndex(1)

println(firstCha)	/// "H"


```

## 方法２ ※追記


[sora0077](http://qiita.com/sora0077@github) さんにコメントで教えていただきました。

こちらの方が簡単でわかりやすいですね！


```swift

var str = "Hello, playground"
//1文字目（0文字目）
str[str.startIndex]

//n文字目
let n = 5
str[advance(str.startIndex, n)]


```
Windowsローカル環境で使う、elasticsearch-1.4.1 + kibana-4.0.0-BETA2.0  導入編

#はじめに
* WEBシステムに不具合が発生したときなどにApacheのアクセスログを調査した経験のある方
* 巨大なアクセスログをgrepやExcelを駆使してなんとか解析結果を作成した経験のある方
* 担当しているシステムには、OSSなんて導入できないからどうせ使えないと思っていた方

Windowsローカル環境にelasticsearchとkibanaを導入する方式でもログ解析がグンと簡単にそして楽しくなりますよ！

# 1. ダウンロード（ZIP）
## elasticsearch-1.4.1.zip

http://www.elasticsearch.org/overview/elkdownloads/
適当なディレクトリに展開する。
(例) C:\work\elasticsearch-1.4.1

## kibana-4.0.0-BETA2.zip
http://www.elasticsearch.org/overview/kibana/installation/
適当なディレクトリに展開する。
(例) C:\work\kibana-4.0.0-BETA2

#2. JAVA_HOME設定（未済の場合）
システムのプロパティ－詳細設定－環境変数
ユーザ環境変数またはシステム環境変数にJAVA_HOMEを追加
※Java実行環境がインストールされていない場合は、Javaのインストールも必要。
  https://java.com/ja/download/

#3. elasticsearch起動
##3-1. コマンドプロンプト起動
##3-2. ディレクトリ移動
   (例) cd C:\work\elasticsearch-1.4.1
##3-3. バッチ実行
   .\bin\elasticsearch.bat
##3-4. 起動確認
   コマンドプロンプトに"started"が表示されたら
   ブラウザから http://localhost:9200/  にアクセスする。
   下記のようなメッセージが出力されれば起動完了。
   ※nameタグの値は起動の度に変更される。
#####ブラウザに表示される内容
---
``` 
{
  "status" : 200,
  "name" : "Trump", 
  "cluster_name" : "elasticsearch",
  "version" : {
    "number" : "1.4.1",
    "build_hash" : "89d3241d670db65f994242c8e8383b169779e2d4",
    "build_timestamp" : "2014-11-26T15:49:29Z",
    "build_snapshot" : false,
    "lucene_version" : "4.10.2"
  },
  "tagline" : "You Know, for Search"
 }
``` 
---

#4. Kibana起動
##4-1.コマンドプロンプト起動
##4-2.ディレクトリ移動
   (例) cd C:\work\kibana-4.0.0-BETA2
##4-3.バッチ実行
   .\bin\kibana.bat
##4-4.起動確認
*   コマンドプロンプトに以下が表示されると起動完了。

``` 
{"@timestamp":"2014-11-27T20:59:01+09:00","level":"INFO","name":"Kibana","message":"Kibana server started on tcp://0.0.0.0:5601 in production mode."}
``` 
*   ブラウザから http://localhost:5601/  にアクセスすると
「Configure an index pattern」の画面が表示される。
 
以上でセットアップ完了。
[次回](http://qiita.com/Aco-gt/items/b588f11d1242b27a7c42)はログデータのインポート方法について投稿します。
cocos2d-x 3.2の新規プロジェクト生成時にiOSのBundle Identifierを設定する


どうも、マキシの人です。
cocos newでプロジェクトを作成する時に、
"org.cocos2dx.hellocpp"ってBundle IDが設定されてて、
Xcodeから手作業で直してたのでちょっとおかしいと思ってまして・・・

**cocos new コマンドのオプションにありました。**

```bash
$ cocos new TestGame -p com.maxigundan.TestGame -l cpp --ios-bundleid com.maxigundan.TestGame
```

これで問題ありませんでした。

Webで調べてみたら、
あまりこの記事が見当たらなかったので、
今一度情報共有してみました。
いちいち入力が面倒なので、以下のようなシェルスクリプト作ってもいいですね。

```makeproject.sh
#!/bin/bash
CMPREFIX=com.maxigundan.
if [ $# -ne 1 ]; then
  echo “usage: this.sh GameName” 1>&2
  exit 1
fi
GAMENAME=$1
GAMEPKG=$CMPREFIX$1

cocos new $GAMENAME -p $GAMEPKG -l cpp --ios-bundleid $GAMEPKG
```

ではでは。


↓cocos new 参考

```bash
usage: cocos new [-h] [-p PACKAGE_NAME] -l {cpp,lua,js} [-d DIRECTORY]
                 [-t TEMPLATE_NAME] [--ios-bundleid IOS_BUNDLEID]
                 [--mac-bundleid MAC_BUNDLEID] [--no-native]
                 [PROJECT_NAME]
```
elasticsearchのindexバックアップ


・elasticsearchのデータのバックアップをesclientを使用してダンプ取得する
・easy_installだと楽だけど、クローズドなオンプレミス環境向けにローカルインストールする手順
・python 2.6.6環境向けです（2.7だとargparse不要）

## 必要なものの配置
下記3本のtar.gzファイルをダウンロードして、インストール先サーバの/tmpに配置する
__argparse__

http://goo.gl/5OGtJl

__requests__
http://goo.gl/dyOy4a

__ESClient__
http://goo.gl/lNkt4n




## インストール
### argparseインストール

```
# cd /tmp

# tar zxvf argparse-1.2.2.tar.gz

# cd argparse-1.2.2

# python setup.py install
〜省略〜
Installed /usr/lib/python2.6/site-packages/argparse-1.2.2-py2.6.egg
Processing dependencies for argparse==1.2.2
Finished processing dependencies for argparse==1.2.2
```

### requestsインストール

```
# cd /tmp

# tar zxvf kennethreitz-requests-v2.4.3-44-g9dc6602.tar.gz

# cd kennethreitz-requests-9dc6602/

# python setup.py install
〜省略〜
Installed /usr/lib/python2.6/site-packages/requests-2.4.3-py2.6.egg
Processing dependencies for requests==2.4.3
Finished processing dependencies for requests==2.4.3
```

### ESClientインストール

```
# tar zxvf ESClient-0.5.8.tar.gz

# cd ESClient-0.5.8

# python setup.py install
〜省略〜
Installed /usr/lib/python2.6/site-packages/ESClient-0.5.8-py2.6.egg
Processing dependencies for ESClient==0.5.8
Searching for argparse==1.2.2
Best match: argparse 1.2.2
Processing argparse-1.2.2-py2.6.egg
argparse 1.2.2 is already the active version in easy-install.pth

Using /usr/lib/python2.6/site-packages/argparse-1.2.2-py2.6.egg
Searching for requests==2.4.3
Best match: requests 2.4.3
Processing requests-2.4.3-py2.6.egg
requests 2.4.3 is already the active version in easy-install.pth

Using /usr/lib/python2.6/site-packages/requests-2.4.3-py2.6.egg
Finished processing dependencies for ESClient==0.5.8
```

### 日本語対応
データに日本語があるとesimportする時にこんなエラーが出ます

```
UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-3: ordinal not in range(128)
```

その対策で、pythonのデフォルトエンコードをUTF8に変更

```
# vi /usr/lib/python2.6/site-packages/sitecustomize.py
import sys
sys.setdefaultencoding("utf-8")
```



## インストール確認
esdumpコマンド、esimportコマンドがインストールされてる事を確認

```
# which esdump
/usr/bin/esdump
# which esimport
/usr/bin/esimport
```

## 使い方
usage参照

```
# esdump
usage: esdump [-h] --url URL [--file FILE] [--mappingfile MAPPINGFILE]
              [--indexes INDEXES [INDEXES ...]] [--gzip] [--bzip2]
              [--stored-fields STORED_FIELDS [STORED_FIELDS ...]] [--count]
esdump: error: argument --url/-u is required

# esimport
usage: esimport [-h] --url URL [--file FILE] [--index INDEX]
                [--doctype DOCTYPE] [--recreate] [--mappingfile MAPPINGFILE]
esimport: error: argument --url/-u is required
```

## 特定のインデックスのバックアップ
例）kibanaのダッシュボード情報が入ってるkibana-intのバックアップ

```
# esdump --url http://localhost:9200/  --indexes kibana-int --bzip2 --file /tmp/esdump_kibana-int.bz2
```

## バックアップファイルからのリストア

```
# esimport --url http://localhost:9200/  --file esdump_kibana-int.bz2
```
外部のGoogle Spreadsheetのセルを参照する

Google Spreadsheetのあるセルから別ファイルのシートを参照するときは`IMPORTRANGE()`セル関数を使う。

### IMPORTRANGE

```
=IMPORTRANGE("abcd123abcd123", "sheet1!A1:C10")
```

* 第1引数 = スプレッドシートキー(URLに含まれるキーの部分)か新しいバージョンのシートであればURL全体を指定する
* 第2引数 = 参照先スプレッドシートのレンジ


### VLOOKUPと組み合わせる

VLOOKUPとIMPORTRANGEを組み合わせることで、別ファイルにあるマスタテーブルをあるキーで検索し、隣の列を持ってくることが出来る。

```
=VLOOKUP(A1, importrange("abcd123abcd123", "services!A2:B"), 2)
```

なお、古いバージョンのGoogle Spreadsheetだとこの方法に対応していなくてエラーになるので、[spreadsheetのバージョンアップ](https://support.google.com/docs/answer/3544847?hl=ja)をするのが良さそうだ。


### 参考
* [vlookup and importrange](http://www.youtube.com/watch?v=6wKOGMtZEhY)
aws cli の generate-cli-skeleton オプションが便利！


aws コマンドパラメータを json形式で手で書くのしんどいですが、
--generate-cli-skeleton というオプションつけて実行すると、
パラメータのひな形を生成してくれます。


例）

```
$ aws dynamodb create-table --generate-cli-skeleton

{
    "AttributeDefinitions": [
        {
            "AttributeName": "",
            "AttributeType": ""
        }
    ],
    "TableName": "",
    "KeySchema": [
        {
            "AttributeName": "",
            "KeyType": ""
        }
    ],
    "LocalSecondaryIndexes": [
        {
            "IndexName": "",
            "KeySchema": [
                {
                    "AttributeName": "",
                    "KeyType": ""
                }
            ],
            "Projection": {
                "ProjectionType": "",
                "NonKeyAttributes": [
                    ""
                ]
            }
        }
    ],
    "GlobalSecondaryIndexes": [
        {
            "IndexName": "",
            "KeySchema": [
                {
                    "AttributeName": "",
                    "KeyType": ""
                }
            ],
            "Projection": {
                "ProjectionType": "",
                "NonKeyAttributes": [
                    ""
                ]
            },
            "ProvisionedThroughput": {
                "ReadCapacityUnits": 0,
                "WriteCapacityUnits": 0
            }
        }
    ],
    "ProvisionedThroughput": {
        "ReadCapacityUnits": 0,
        "WriteCapacityUnits": 0
    }
}
```

こいつをファイルとかに書き出して、編集し、それを--cli-input-json で食わせるとよい。


```
$ aws dynamodb create-table --generate-cli-skeleton > table.json

$ vi table.json

{
    "AttributeDefinitions": [
        {
            "AttributeName": "user_id",
            "AttributeType": "S"
        },
        {
            "AttributeName": "timestamp",
            "AttributeType": "N"
        }
    ],
    "TableName": "user_log",
    "KeySchema": [
        {
            "AttributeName": "user_id",
            "KeyType": "HASH"
        },
        {
            "AttributeName": "timestamp",
            "KeyType": "RANGE"
        }
    ],
    "ProvisionedThroughput": {
        "ReadCapacityUnits": 1,
        "WriteCapacityUnits": 1
    }
}
```

```
$ aws dynamodb create-table --cli-input-json file://table.json \
--endpoint-url http://localhost:8000
```

この file:// というのを 付けないと、下記のようなイミフなエラーが出てしまいます。
JSONが正しくないのか、何度も見なおしてしまったよ…

```
Error parsing parameter 'cli-input-json': Invalid JSON: No JSON object could be decoded
JSON received: skel.json
```

で、ぐぐったら↓ にたどり着きました。

http://dev.classmethod.jp/cloud/aws-cli-params-from-json/

というか、書こうとしてたこと全部書いてあるじゃんね。

ちゃんちゃん。
Gradleのプラグインへの引数を-Dプロパティで渡すと型違反するので型を気にせず値を渡せるようにする方法

grettyに渡す引数を、以下のように渡したかった。

```zsh
./gradlew appRun -Dgretty.port=8080 -Dgretty.xxx=xxxx
```

ほんで、以下のようにSystem.propertiesを回す。

```groovy
System.properties.findAll { it.key.indexOf('gretty.')==0 }.collect{
  new MapEntry("${it.key.replaceFirst('^gretty\\.','')}",it.value)
}.each{
  gretty[it.key]=it.value
}
```

なぜだか、portの引数でCast出来ない例外が発生して(ﾟДﾟ)ﾊｧ?ってなった。
（ちなみに、Groovyコンソール上だと、Integer型の引数を受けるpropertyにString型のオブジェクトを突っ込んでも、Cast出来ない例外は発生しない）

とりあえず、以下の様なことを試してみる。

```groovy
class Dog{
  int age = 1
  String name = 'taro'
  boolean isMale = true
  Integer id = 1
  void setName(String name){
     this.name = name.toLowerCase()
  }
  void setId(Integer id){
     if(id == null || id < 0){
        throw new Exception('bad id')
     }
     this.id = id
  }
  String toString(){
    "{$name:{'age':$age,'sex':'${isMale?'m':'f'}'}}"
  }
}
def setPropValue(target,kv){
  try{
    def setter="set${kv.key.replaceFirst('^(.)'){it[1].toUpperCase()}}"
    target.class.methods.each{
      if(it.name == setter && it.parameterTypes.length == 1){
        if(it.parameterTypes[0].isPrimitive() ||
           it.parameterTypes[0].methods.find {
             it.name=='valueOf' &&  it.parameterTypes.length == 1
           } &&
           it.parameterTypes[0] != String.class
        ){
          println "p : $kv.key"
          target[kv.key]=Eval.me(kv.value)
        }else{
          println "o : $kv.key"
          target[kv.key]=kv.value
        }
      }
    }
  }
  catch(e){println e}
}

def dog=new Dog()
['gretty.id':'2','gretty.name':'Hanako','gretty.isMale':'false','gretty.age':'2'].
collect{
  new MapEntry("${it.key.replaceFirst('^gretty\\.','')}",it.value)
}.each{
  setPropValue(dog,it)
}
```

うまいこと値を放り込めそう。

上の関数をそのまま使って、

```groovy
def setPropValue(target,kv){
  try{
    def setter="set${kv.key.replaceFirst('^(.)'){it[1].toUpperCase()}}"
    target.class.methods.each{
      if(it.name == setter && it.parameterTypes.length == 1){
        if(it.parameterTypes[0].isPrimitive() ||
           it.parameterTypes[0].methods.find {
             it.name=='valueOf' &&  it.parameterTypes.length == 1
           } &&
           it.parameterTypes[0] != String.class
        ){
          println "p : $kv.key"
          target[kv.key]=Eval.me(kv.value)
        }else{
          println "o : $kv.key"
          target[kv.key]=kv.value
        }
      }
    }
  }
  catch(e){println e}
}
System.properties.findAll { it.key.indexOf('gretty.')==0 }.collect{
  new MapEntry("${it.key.replaceFirst('^gretty\\.','')}",it.value)
}.each{
  setPropValue(gretty,it)
}
```

とする。

これで./gradlewにGrettyの設定を指定することができるようになった。

実際にはデフォルトの設定が上につらつら書いてあります。

Jenkinsにintegration testさせているとき、project毎にportを変更したりできるので便利です。
無名関数

# 無名関数
> **無名関数:** 名前がないの関数。その代わりに、プログラミング言語によって特別なシンタクスを使う。

一般的に、そのシンタクスは**ラムダ式**を使います。以下は様々なプログラミング言語でA+Bを計算(けいさん)する無名関数です。

#### C++ (C++11以後) ####
    [](int a, int b) {
        return a + b;
    }

#### C# ####
    (a, b) => a + b

#### JavaScript ####
    function(a, b) {
        return a + b;
    }

#### PHP ####
    function($a, $b) {
        return $a + $b;
    }

## 使用
無名関数も色々あります。例えば、一般的なソートの関数を作りたかったら、順番はパラメーターにある無名関数に任せば、色んな順番出来ます：`(a,b) => (a < b)`で昇順(しょうじゅん)が出来て、`(a,b) => (a > b)`は降順(こうじゅん)になります。コールバックでも良く使います。

## 変数捕捉(へんすうほそく)
変数捕捉は無名関数で良くある問題ですが、たまに使用もあります。
> **例題：**このJavascriptのコードのアウトプットは何？
>
>     var anonFuncs = [];
>
>     function createAnonFuncs() {
>         for(var i = 0; i < 3; ++i) {
>             anonFuncs[i] = function() {
>                 console.log(i);
>             };
>         }
>     }
>
>     function executeAnonFuncs() {
>         for(var i = 0; i < 3; ++i) {
>             anonFuncs[i]();
>         }
>     }
>
>     createAnonFuncs();
>     executeAnonFuncs();
>
> **正解**
>
>     3
>     3
>     3

`i`の変数は補足されています。`createAnonFuncs`が終わる時に、`i`は3、そしてそれぞれの無名関数は`console.log(i)`をするですから、皆`console.log(3)`になりました。

### 解決
プログラミング言語毎で解決があります。例えば、PHPは`closure`という物を使います。
以上の場合は、このままで解決が出来ます：

    var anonFuncs = [];

    function createAnonFuncs() {
        for(var i = 0; i < 3; ++i) {
            anonFuncs[i] = createSingleAnonFunc(i);
        }
    }

    function executeAnonFuncs() {
        for(var i = 0; i < 3; ++i) {
            anonFuncs[i]();
        }
    }

    function createSingleAnonFunc(i) {
        return function() {
            console.log(i);
        }
    }

    createAnonFuncs();
    executeAnonFuncs();
**アウトプット**

    0
    1
    2
Javascriptは変数のスコープが関数用です。新しい変数を使って、別なスコープになります。
GoogleDocs SpreadSheetのExport機能

Webアプリでの設定ファイルやデータをGoogleDocsのSpreadSheet内に置いて気軽に編集を行いたい場合に便利な機能です。

```lang:import.php
$data = file("https://docs.google.com/feeds/download/spreadsheets/Export?key=XXXXXXXXXXXX&exportFormat=csv&gid=0");
$csv = array();
foreach($data as $vals){
  $vals = trim($vals);
  $csv[] = explode(",",$vals);
}
```

XXXXには参照したGoogleDocsのFileIDを指定します。
これはURLを見てあげれば解ると思います。

`https://docs.google.com/spreadsheets/d/この部分/edit#gid=0`

なぜか読み込んだデータは改行コードがおかしいので上記コードではtrimをしてから配列に入れています。

ちょっとしたデータなどはGoogleDocsで管理して、それをサーバで読み込んで表示するとかにとても便利なのでお試しあれ。

**参照するファイルは[リンクを知っている全員が閲覧可]で公開されている事が前提です**
Google ChromeにHTTP2の時代が来ていた

気がついたらGoogle ChromeでHTTP/2が使えるようになっていた。Google Chrome 39ではSPDY/4 (HTTP/2 Draft 14)に対応しており、www.google.comを閲覧する際にHTTP/2が使用できる。

有効にするには[chrome://flags](chrome://flags)から`Enable SPDY/4`を有効にしよう。なお、未だ実験的実装であることを忘れずに。

![141127-0001.png](https://qiita-image-store.s3.amazonaws.com/0/5218/dfa3641e-ffbf-c2c2-cfba-2e10a5cc99ef.png)

[SPDY Indicator](https://chrome.google.com/webstore/detail/spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin?hl=ja)を有効にしていれば稲妻が青色になって格好いいです。

![141127-0002.png](https://qiita-image-store.s3.amazonaws.com/0/5218/c10a0652-5d28-5719-47e7-fe262a697b4a.png)

[nghttp2.org](http://nghttp2.org/)は青くならなかったが、これはHTTPで接続しているからだった。[https://nghttp2.org/](http://nghttp2.org/)ではHTTP/2が有効になっていることを確認出来る。