OmniAICreator/Qiita-1.07M huggingface dataset:
ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った

__2017年3月26日追記__
bpushは2年弱の運営の後、OSSとして生まれ変わりました。詳しくは下記の記事をご覧ください。
[国内初のウェブプッシュサービスbpushのOSS化と運営して学んだことについて](http://qiita.com/devneko/items/0a18e1072e1a5245c58e)


##ブラウザだけでプッシュ通知ができるようになった
Chromeのバージョン42からプッシュ通知が可能になったという記事は読まれましたでしょうか？

[「Google Chrome 42」安定版リリース　プッシュ通知機能追加と45件の脆弱性対](http://www.itmedia.co.jp/news/articles/1504/15/news043.html)

Chrome 42から、Service Workerという新しい仕組みによって、ブラウザを閉じていても、スマートフォンのプッシュ通知のようにサービス側からお知らせを届けることができるようになりました。この機能はデスクトップ版とAndroid版のChromeに導入されています。通知の仕組みにGoogle Cloud Messaging(GCM)を使っているためiPhone版は非対応です。

##これまでとの違い
スマートフォンアプリではプッシュ通知は当たり前の機能ですが、ウェブでは当たり前ではありません。
これまではサービス側からユーザーにメッセージを送る手段はメールしかありませんでした。メールを送るにはメールアドレスを登録してもらう必要がありますし、もはやメールは即座にチェックするようなものではなくなってきています。
プッシュ通知が使えるようになれば、ユーザーがボタンをクリックして通知を許可するだけでメッセージを届けられるようになります。メールアドレスを登録するよりもずっと登録のハードルが低くなります。そしてたぶん、メッセージが届いたら題名くらいはすぐに読んでもらえるでしょう。

##ウェブサイトのオーナーにとって非常に強力なツール
ウェブサイトのオーナーであれば、イベントや更新をユーザーに伝えることで、多くのユーザーにウェブサイトにアクセスして欲しいと考えるでしょう。
しかし、そのためだけにメールアドレスを登録してもらうのは、サービス側にもユーザー側にも負担が発生します。RSSを配信する方法もありますが、RSSを購読してくれるユーザーというのは、かなりITリテラシーの高い人たちで、そう多くはないでしょう。
専用のソフトやキーボードを使った登録フローなどなくても、すぐにサービス側からユーザーにメッセージを送れるようにできる方法があったらとても便利です。
それがプッシュ通知です。プッシュ通知は登録のハードルが低く、メールよりも即座に見てもらいやすい。（少なくとも題名くらいまでは）
ウェブサイトのオーナーにとっては非常に強力なツールになるでしょう。

##大手サービスも導入
いまのところ、すべてのユーザーが恩恵を受けられるわけではありませんが、Android版も対応したことから、それなりの規模のユーザーにプッシュ通知という強力な手段を使ってお知らせを届けることができるようになりました。RSSクライアントをインストールしているユーザーよりは大きい規模のはずで、既に導入には十分な価値があるでしょう。
その証拠に、FacebookやPinterestなど、多くの大手サービスがChromeのプッシュ通知に対応するそうです。
それも数週間で対応するとのこと。

[「Chrome 42」、ウェブサイトからのプッシュ通知をAndroid端末に--Facebookなどが対応](http://japan.cnet.com/news/service/35063460/)

##誰でも簡単に導入できる？
なんだかとても便利そうなこのChromeのプッシュ通知ですが、導入の難易度はどれくらいでしょうか。
自分のウェブサイトに導入しようと思うと、次のことが必要になります。

- SSL(HTTPS)に対応したウェブサーバーの用意
- JavaScriptを使ったクライアントのプログラム
- プッシュ通知の送信を行うサーバーサイドプログラム

特にJavaScriptのプログラムはまだ情報が少ない新しいAPIを使う必要があります。
コード片のコピー＆ペーストでは対応できません。
プログラマでなければこれらをこなすのは難しいでしょう。

##誰でもプッシュ通知を導入できるサービス「bpush」を作った

前置きが長くなりましたが、難しい知識なしにプッシュ通知を導入できるサービスを作成しました。

https://bpush.net/

ソーシャルボタンやブログパーツなどを設置する感覚で、簡単にプッシュ通知を導入することができます。
ウェブサイトのユーザーは、プッシュ通知に対応したブラウザからボタンをクリックすることで通知を受けられるようになります。
サイトのオーナーは「bpush」にログインし、オーナーページから通知を送信できます。

もしあなたがウェブサイトのオーナーであれば、一度試してみてください。
FacebookやPinterestのような大手サービスよりも早くプッシュ通知対応できますよ。
Slack から Hubot 経由で GitHub のプルリクを作る

Slack から Hubot 経由で GitHub のプルリクを作れるようにしました。[【ChatOps用】Github上のプルリクを作るHubotスクリプト](https://gist.github.com/s-kiriki/d18fd2be18040e0718d6) を参考にさせていただきながら、ブランチが階層掘ってある場合に対応させて、リポジトリも指定できるようにしています。

# Hubot スクリプト
githubot を使うのでいれておく。
`$ npm install githubot --save`

```coffeescript:github-create-pull.coffee
#
# Description:
#   create pull requests in a Github repository
#
# Dependencies:
#   "githubot": "0.4.x"
#
# Configuration:
#   HUBOT_GITHUB_TOKEN
#   HUBOT_GITHUB_API
#
# Commands:
#   hubot pr <base> from <compare> [repo:<repo_name>]
#

module.exports = (robot) ->

  github = require("githubot")(robot)

  unless (url_api_base = process.env.HUBOT_GITHUB_API)?
    url_api_base = "https://api.github.com"
    
  _getDate = ->
    theDate = new Date
    yyyy = theDate.getFullYear()
    mm = theDate.getMonth()+1 #January is 0!
    if mm < 10
      mm = "0" + mm
    dd = theDate.getDate()
    if dd < 10
      dd = "0" + dd
    yyyy + "." + mm + "." + dd
    
  robot.respond /pr (([-_\.0-9a-zA-Z]+\/)?([-_\.a-zA-z0-9\/]+)) from (([-_\.0-9a-zA-Z]+\/)?([-_\.a-zA-z0-9\/]+))(\srepo\:([-_\.0-9a-zA-Z]+))?$/i, (msg)->
    repo = msg.match[8] || "<デフォルトのリポジトリ>"
    head = msg.match[4]
    base = msg.match[1]
    environment = msg.match[1]
    
    url = "#{url_api_base}/repos/<自分のGitHubアカウント>/#{repo}/pulls" #GitHubAPIのURL
    
    account_name = msg.envelope.user.name || "anonymous" #このスクリプトを呼び出した人のSlackアカウント名
    channel_name = msg.envelope.room || "anonymous" #このスクリプトを呼び出したSlackのChannel
    
    title = "#{_getDate()} #{environment} deployment by #{account_name}"
    
    body = """
      ・Created By #{account_name} on #{channel_name} Channel
    """
    
    data = {
      "title": title
      "body": body
      "head": head
      "base": base
    }
    
    github.post url, data, (pull) ->
      msg.send "プルリク作ったよ！ " + pull.html_url
```

<デフォルトのリポジトリ>、<自分のGitHubアカウント> をそれぞれ設定。

# 使い方
`hubot pr <base> from <compare> [repo:<repo_name>]`
例：`hubot pr deployment/production from master repo:my-repo`

`<base>` と `<compare>` はそれぞれブランチ名。オプションの `repo:<repo_name>` でリポジトリ指定ができます。`repo:<repo_name>` が省略されている場合は <デフォルトのリポジトリ> を対象リポジトリとします。

記法は GitHub 上でプルリクを作った時「`into <base> from <compare>`」という形で表示されるので、それにならいました。

# おわり
Slack からプルリクを作ると次のようなメリットがあるかな～と思ってます。

- プルリクしたときのタイトルなどが自動で設定できてルールの統一がしやすい
- 誰かがプルリク作ったのに気づきやすい
- プルリクに不慣れな人でもコマンド辞書登録でもしておけばなんとでもなる

リポジトリやブランチが固定でよい場合はそのあたりハードコーディングしてしまって、もう少し短いコマンドでプルリクができるようにしてもいいかもしれません。自分の環境ではブランチが固定ではないのでこのようにしました。

## 余談
テスト環境用のブランチに変更があった場合 [dploy.io](
http://dploy.io/) から自動でテストサーバーへデプロイされるようにしています。Slack からプルリク -> GitHub でマージ -> デプロイされる、という流れで、さらにテストサーバーへデプロイされたら dploy から Slack へ通知が飛ぶようにしています。便利。デプロイ目的のシンプルな運用なら CI 回さず dploy あたりもいいなと思います。

![slack-pr.png](https://qiita-image-store.s3.amazonaws.com/0/64249/718ac7f5-8b4a-8dcf-ae26-44a387413f50.png)


# 参考
- [【ChatOps用】Github上のプルリクを作るHubotスクリプト](https://gist.github.com/s-kiriki/d18fd2be18040e0718d6)
React.jsのチュートリアルでつまらないひっかかり方をした


React.jsのチュートリアルをやってみようと読み進めながら写経していたらわずか3ステップ目(tutorial3.js)の段階で次のエラーがChrome Javascript Consoleで出ました。

__Uncaught TypeError: Cannot read property 'toUpperCase' of undefined__

ググっても情報でないし、ソースをコピペしても解決しないし、
でもうReact.jsの体験はしばらく見送ろうと思った矢先にふと「もしかしたら」とダメ元でtutorial2.jsをtutorail1.js(tutorial3.js)の前に書いたらあっさり解決しました。

## 正しく動いた方(text/jsx内のみ記載）

```
<script type="text/jsx">
  var CommentList = React.createClass({
    render: function() {
      return (
        <div className="commentList">
          Hello, world! I am a CommentList.
        </div>
      );
    }
  });

  var CommentForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });

  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          <h1>Comments</h1>
          <CommentList />
          <CommentForm />
        </div>
      );
    }
  });
  React.render(
    <CommentBox />,
    document.getElementById('content')
  );
</script>
```

## ダメな例

```
<script type="text/jsx">
  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          <h1>Comments</h1>
          <CommentList />
          <CommentForm />
        </div>
      );
    }
  });
  React.render(
    <CommentBox />,
    document.getElementById('content')
  );
  
  // ここから下はCommentBoxの前に定義しないとダメ
  var CommentList = React.createClass({
    render: function() {
      return (
        <div className="commentList">
          Hello, world! I am a CommentList.
        </div>
      );
    }
  });

  var CommentForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });
</script>
```
技術英語 > To be more specific. > 具体的には

star trek voyagerにて、ナオミワイルドマンが7of9に話しかけてきた時の7of9の返答。

[Linguee](http://www.linguee.jp/%E8%8B%B1%E8%AA%9E-%E6%97%A5%E6%9C%AC%E8%AA%9E/%E7%BF%BB%E8%A8%B3/to+be+more+specific.html)に記載の例では「具体的には」という翻訳となっている。
secureCoding > strcpy_s > 問題点 > 領域を超えてコピーしようとすると例外が発生する

[10 million bugs in my code. @ nanoris](http://blog.livedoor.jp/nanoris/archives/51737052.html)さんのページにstrcpy_s使用上の注意が記載されている。

対策の部分を引用させていただく。
> 1. strcpy_s の代わりに strncpy_s を使用する。
2. コピー先の長さは \0 を含めた文字数を指定する。
3. コピー元の長さは \0 を含めない文字数 sizeof(a)-1 を指定する。
4. または _TRUNCATE を指定する。
5. 必ず \0 終端になるのでメモリを初期化する必要がない。
secureCoding > C11附属書K > strcpy_s() > コピー先配列のサイズを指定する

引用: C/C++ セキュアコーディング 第2版 by Robert C. Seacordら

```
errno_t strcpy_s(
  char * restrict s1, rsize_t s1max, const char * restrict s2
);
```

s1maxとしてサイズを指定する。
strcpy()の代替関数 > strncpy() > null終端エラーやその他のエラーを起こしやすく、strcpy()の安全な代替関数とはみなせない。

引用: C/C++ セキュアコーディング 第2版 by Robert C. Seacordら

>残念ながら、strncpy()はnull終端やその他のエラーを起こしやすく、strcpy()の安全な代替関数とはみなせない。

とはいうものの、strcpy()そのままよりは多少はましだろうと思う。
メンバーの誕生日にお祝いメッセージをHubotからSlackに流す

メンバーの誕生日にお祝いのメッセージを Slack に流す Hubot スクリプトです。リモートワークでなかなか会わないメンバーもいるので、賑やかにチーム感を出したいなと思って作りました。

# Heroku 側
タイムゾーンを指定。Heroku の Config Variables に次の内容を設定。Heroku 管理画面 > Setting からでも、コマンドラインからでも設定可能。

TZ
…Asia/Tokyo

コマンドラインから `$ heroku config:add TZ=Asia/Tokyo` でも可。

# Hubot スクリプト

[node-cron](https://github.com/ncb000gt/node-cron) を使うので入れておく。
`$ npm install cron --save`

```coffeescript:birthday.coffee
# 
# Description:
#   誕生日を祝うよ
#
# Commands:
#   
#

cronJob = require('cron').CronJob

module.exports = (robot) ->

  bdSay = (slackname, name, month, day) ->
    # 「秒」「分」「時」「日」「月」「曜日」
    # 月は0～11
    month2 = Number(month)-1
    cronTime = "0 0 9 #{day} #{month2} *"
    new cronJob(cronTime, () =>
      envelope = room: "<メッセージ流したいチャンネル>"
      say = """
      ```
      #{month} 月 #{day} 日は #{name} の誕生日！
      　　　 .｡☆.ﾟ。.。
      　　｡:☆・。ﾟ◇*.ﾟ｡
      　 ･◎.★ﾟ.＠☆｡:*･.
      　.ﾟ★.｡;｡☆.:*◎.ﾟ｡
      　 :*｡_☆◎｡_★*･_ﾟ
      　　＼ξ　＼　 ζ／
      　　　∧_∧＼ ξ
      　　 (`･ω･)／
      　　 /　 つ∀o　ｵﾒﾃﾞﾄｳ!!
      ```
      HAPPY BIRTHDAY! @#{slackname}
      """
      robot.send envelope, say
    , null, true
    )

  bdSay('a-san', 'Aさん', 6, 25)
  bdSay('b-san', 'Bさん', 11, 18)
```

## 設定
<メッセージ流したいチャンネル> を自分の環境にあわせて変更。

`bdSay('a-san', 'Aさん', 6, 25)` をメンバーの数だけ指定。
a-san となってるところは該当メンバーの Slack 名。
この例だと「Aさん」「Slack 名は a-san」「誕生日6/25」。

cron 部分 Timezone は、Heroku 側でタイムゾーンを指定しているため省略しています。

# おわり
お祝いメッセージは AA にしてみました。AA 部分はヒアドキュメントで囲んでいるので、Slack 上で `<pre>` で囲まれて表示されます。表示は次のような感じ。AA を入れて楽しい雰囲気になればいいなあと。

![slack-bd.png](https://qiita-image-store.s3.amazonaws.com/0/64249/92c7f3e4-8d1a-0173-fdc5-046d04846e85.png)

# 参考
- [node-cron](https://github.com/ncb000gt/node-cron)
LivaPCにUbuntu 15.04をインストールしたときのISO選択メモ

LivaPCにLinuxをインストールするには以下が条件となる。

* DISKの認識 (mmc_block モジュールの有無)
* UEFI 対応 (ISOをUSBにddしたものでbootするかどうか)

## ubuntu

* ubuntu-15.04-server-amd64.iso (DISK認識しない)
* ubuntu-15.04-desktop-amd64.iso  (OK)
* xubuntu-15.04-desktop-amd64.iso (OK)
* lubuntu-15.04-alternate-amd64.iso (DISK認識しない)
* lubuntu-15.04-desktop-amd64.iso (OK)

## debian

* debian-live-8.0.0-amd64-xfce-desktop.iso (DISK認識しない)


## 結果

* lubuntu-15.04-desktop-amd64.iso でインストールした。
  * インストーラで日本語が豆腐になって表示出来なかったためEnglishでインストール
  * 日本語化は ibus-mozc, ttf-takao, LANG=ja_JP.UTF-8 くらいか
* 内蔵の無線LANやBluetoothは使えなかった。
* スリープからの復帰時、xubuntu14.04.2だとモニターに画面が表示されない現象に遭遇。
  * lubuntu 15.04 では問題ない様子。
JavaScript(系言語)のススメ

JavaScript(系言語)のススメ

この記事はプログラミングを始めようとしている人など、初心者的な人に向けた記事ですが、疑問や突っ込みなどありましたら是非コメントをいただけたらと思います。

僕は最近プログラミング習得における第一言語はJavaScriptが適していると考えています。

* ブラウザ上で動きを指示することができる言語であり、どうせプログラミングやるなら動きを指示できた方がやれることが広がってハッピーでしょう
* バックエンドは違う言語にするというのは手だけど、どうせならしっかりJavaScriptやりこんだ方が応用も利くだろうしハッピーでしょう
* ブラウザ側でJavaScriptを動かす場合でも、バックエンド側のJavaScriptの知識はあった方がいいです

JavaScriptにも難点はあって、ライブラリに定番がない、変化の早すぎる世界だというあたりはしんどいです。知識を常にアップデートし続けるのがつらい人はJavaとかやった方が幸せになれるかもしれません。

どの言語・バージョンを選べばいいのか？
--------------------------------------

JavaScriptの言語としての仕様がECMA Scriptです。2015/5/2現在のウェブブラウザでの標準はECMA Script 5です。

JavaScriptの世界には方言(AltJS)がいくつかありますが、好みや、周りの人が使ってるモノとかでいいと思います。

### ECMA Script 5

一番スタンダードな JavaScript です。利点はブラウザでそのまま動くことで、欠点はちょっと書き方が冗長なことです。

```js
var hoge = 'hoge'
if (hoge === 'hoge') {
	console.log(hoge)
}
```

```js
var fuga = function(arg) {
	return arg + 1
}
```

### ECMA Script 6 or 7

未来バージョンの JavaScript です。利点は将来のメインストリームであり、書き方もECMA Script 5 よりは書きやすいこと、欠点は(現状のウェブブラウザでは)コンパイルが必要なことです。

```js
var hoge = 'hoge'
if (hoge === 'hoge') {
	console.log(hoge)
}
```

```js
var fuga = (arg) => {
	return arg + 1
}
```

### CoffeeScript

書き方が独特な方言です。コンパイルが必要になります。利点は覚えればすごく描きやすいことやRuby/Python経験がある人にはなれやすいことで、欠点はコンパイルが必要なことと、メインストリームではないってことと、文法が独特な点でしょうか。

```coffee
hoge = 'hoge'
if hoge == 'hoge'
	console.log(hoge)
```

```coffee
fuga = (arg) => arg + 1
```

### TypeScript

ECMA Script 6 にほどよく近い感じの方言です。オブジェクト指向をちゃんとやりたい人向きです。利点は将来のメインストリームに近く、素のJavaScriptとの違いがそんなになく、それでいて書きやすいこと。欠点はやはりコンパイルが必要なことでしょうか。

```ts
var hoge = 'hoge'
if (hoge === 'hoge') {
	console.log(hoge)
}
```

```ts
var fuga = (arg: number) => {
	return arg + 1
}
```

おすすめ習得方法
----------------

### Hubotをいじる

Hubotは汎用的なチャットbotです。Twitter, IRC, Slack などに対応してます。題材として楽しいというのが理由ですね。最近流行のChatOpsにも役立つかもしれません。

難点になるかもしれないのは、主に使われてる言語がCoffeeScriptという点でしょうか。(JavaScriptでも書けますが、標準のスクリプトがCoffeeで書かれてます)

### (TODO: Ajaxネタで何か)

### (追加案募集)

ほかに楽しいおすすめの習得方法があれば、是非コメントをお願いします。

どんなライブラリ・フレームワーク・ツールがおすすめなのか
-------------------------------------------------

基本的にJavaScript界隈はほかの言語と比較して流行廃りが圧倒的に早いです。なので、いろいろなライブラリ・フレームワークに対応できた方がいいです。そして、基本的には小さいライブラリを使うことをおすすめです。

### NodeJS

非ウェブブラウザ(コマンドライン)で動くJavaScript処理系です。様々な非ブラウザ系ツールが動く母体となるものです。クライアント側のJavaScriptにしか興味のない人でも触っておくことをおすすめします。ウェブサービスをNodeJSなどで運用すべきという意見ではないですが経験値はあって損はないってところです。

### npm

NodeJS向けのパッケージマネージャ(CentOSで言うところのyumみたいなもの)です。必須のツールです。

インストールするライブラリは大体ジャンル名 + npm でぐぐれば見つかります。

### webpack or browserify

複数のJavaScriptを統合したり、様々なコンパイルしたり、npm でインストールしたパッケージを統合したりするのに使えます。

### ウェブブラウザのデバッグツール

ChromeやFirefoxには、デバッグツールと言われるものが入っています。console やデバッガがあり、それらはきわめて有用です。JS開発では是非ともなれておきましょう。
AngularJSのコネタ：クリックされたときのカーソル位置を間接的に取得する。

## はじめに

AngularJSを知って１年半以上経過して、Angular2での刷新についていくかどうか頭を悩ませる時期になってます。しかし、個人的にはそんなこと関係なくここ3ヶ月でようやく本格的に実装する機会を見つけて、IE8から動作する1.2系の実装を楽しんでいるところです。

その機会を通じて、得たクリックイベント発火時のマウスのカーソル位置を取る方法について、いろんな意味で勉強になったことをご紹介です。

## 参照記事

[ここと](http://www.bennadel.com/blog/2423-exposing-a-mouse-service-for-click-events-in-angularjs.htm)
[ここ](https://gist.github.com/bennadel/3743310)

## 利用する技術

利用するAngularJSの技術は下記の通り。

* factory
    * 自前のサービスを登録するAPIで、基本中の基本。
* directives
    * 効果的なイベントや画面構成を実現するには活用すべきAPI
* $event
    * AngularJSにおけるEventインスタンスと同等のサービス

## 今回、マウス位置を取得することにした経緯

記事一覧の任意の記事毎のパネルを開く操作結果をRoutingを利用してURI指定で制御できる仕組みを作りたかった。

例えば、フィード画面で記事一覧があって、各記事にはコメント履歴タブとその他の履歴を開くタブ（初期表示時は閉じている）が複数備わっているとする。そして、記事一覧の記事ID:3のコメント履歴タブを開くなら

```
http://localhost/feeds/#/articles/3/tabs/comments
```

みたいに指定すれば、URIからいつでもコメント履歴を見れるようにという感じ。
こうすることで、メーリングリストや他のページからいつでも見たい記事の任意のタブを開いた状態を作ることができるようになる。
よくあるJavaScriptのonclickでパネルを開いたりするやり方だと画面表示した後に必ず閉じた状態から始まりユーザに開く操作を強いることになるのが嫌で、できれば見せたいタブを開いた状態をいつでも実現できるタブ機能をフィードという記事一覧画面でも作りたかった。

AngularJSで、ControllerとRoutingだけで上記を実現する場合、表示場所がng-viewに限られてしまうためそのままでは難しい（これは私のAngularJSに対する知識の無さもあるかも？）。
そこで、ユーザがクリックした位置を取得した後、topおよびleft制御していい感じの位置に操作パネルを表示できるし、かつその状態をURIでいつでもアクセスできるようにしたかったのでした。

これには、作業開始時点の課題として、

* マウスの位置情報を取得する方法を知ること
* 一度開いたパネルの位置を永続的に保存する方法を知ること
* 指定された記事の表示位置へ移動する方法を知ること

というのがありました。

### マウスの位置情報を取得する

最初にこの方法を調べていたら上記の記事を見つけました。記事単位に$eventを埋め込む必要もなく、大本となるControllerで定義するだけでいつでもユーザがクリックしたマウス位置を取得できます。

ただ、この記事に書かれている方法の課題としては、パネルを開く処理を書いたControllerの操作が実行されるタイミングではマウスの位置を取得できない点です。
しょうが無いので、パネルのスタイル定義を記載した&lt;style&gt;タグを作りleftとtop属性をmouseX,mouseYで動的に書き換わるようにして暫定対応を行うことにしました。

### クリックされた位置情報を永続的に保存する

ユーザがクリックされた情報を永続的に保存して、ブラウザのりロード時でも同じ表示状態を保持て切るように考えて、
$cookiesサービスを利用することにしました。

（URIで記事指定された時にどの位置で表示するか？についてはノーアイデアでしたorz）

### URIで指定された記事の位置へ移動する

アンカー移動するには、AngularJSの場合、
$locationサービスのhash属性と、$anchorScroll()サービスを利用することになるようです。

## コメント

具体的なソースの説明などは、時間的な問題から割愛しています。
今回、結局のところうまく行きませんでした。URIして時の表示位置はどうする？とか実際に動かしてみると思ったより操作性が悪かったり。など。
時間があれば、根本的に改善して、加筆してソースの情報も載せる予定です。
Play Frameworkのリモートデバッグが動作しない

解決したのでメモ。

## 問題

[ここ](http://ja.stackoverflow.com/questions/8573/) で質問投げた内容。

> `activator -jvm-debug 9999 run` でプロジェクトが起動できなくなった。
以前だと `Listening for transport dt_socket at address: 9999` というメッセージの後に
リッスンまで稼働していたと思うのですが、原因不明ですが↑のメッセージで止まってしまい、
それ以上動作しなくなってしまいました。
プロジェクトを新規作成してそちらで同じコマンドを叩いても変わらなかったので、ソースや
ライブラリ依存性ではないと思っています。

というので1ヶ月ぐらいハマって困っていた。

## 原因

activator のバージョンが `1.2.2` だと動かないらしい。※ソース未確認
`1.2.2` => `1.3.2` に更新したところ、無事WEBの起動まで行ったようで。

どこかで過去にインストールしたバージョンを下手に拾ってきていたのが原因っぽい。。
iPhoneでFacebook認証したTokenをNode.jsのサーバで受けてサーバ側で認証してみる

# はじめに（ごめんなさい的な）
自分なりにいろいろ調べてやってるんですが、もっと効率的な方法はある気がしてます。
そもそも間違っているところもあるかもしれないので、気づかれた方は是非ツッコミをお願いします。

# やりたいことのイメージ
やりたいことはこれ。

+ iPhoneアプリをFacebook認証を使って使用させたい。
+ Facebook認証の後、アプリ操作でFacebook友達情報を取得したり、その友達とのつながりを使った機能を提供したい。

ちょっと図示してみました。
この記事でのポイントは、下記の**④**と**⑤**です。
Facebook認証の話なんかは他にもいっぱいあるので、特に触れません。
（ただ、やってるときにFacebook SDKのバージョンが上がっちゃって面倒だったけど…）

![figure.png](https://qiita-image-store.s3.amazonaws.com/0/19870/33bb0083-788d-b072-1ba0-373746e4f922.png)

①iPhoneアプリ上で、Facebook SDKを使ってAuth Requestを送信
②FacebookからAccess Token(図中はAuthToken)を受け取る
③取得したAccess Token(図中はAuthToken)をサーバ(Node.js)に送信
**④受け取ったAccess Tokenを使って、iPhoneユーザの情報を取得するようFacebook graphにリクエストする**
**⑤Facebookからユーザ情報を受け取る**

AccessTokenは同一アプリの範疇なら使い回しOKなので、この方法で認証してみたいと考えました。

# サーバ側の実装で困っていたこと
これはただ自分が無知ゆえに困っちゃってたんですが。。

Node.jsはノンブロッキング処理でポンポン進んじゃうわけで、
④のFacebook Graph APIにアクセスしたときに、⑤が返ってくる前に先に進んでしまう。
Callback関数の使い方とか、いまいちちゃんとわかっていない証拠ですな。

試行錯誤して次のような実装にしました。

# サーバ(Node.js側)の実装

asyncモジュールのseries、といっても１個だけなんですが、
⑤が返ってくるまで待つようにしたつもりです。実際、下記でちゃんと取れています。

なお、Facebook Graph APIのアクセスにはHTTPアクセスをするのにいろんな方法があるっぽいが、
requestモジュールを使いました。
（返って深くなっちゃう理由になった気もしますが。。。）

```js
var async = require('async');

var accessToken = "FACEBOOKのACCESS_TOKEN";

async.series([
    function(callback) {
        var qs = require('querystring');
        var request = require('request').defaults({strictSSL:true});

        debug('ACCESS_TOKEN: ' + accessToken);

        var apiUrl = 'https://graph.facebook.com/v2.3/me?' +
            qs.stringify({ access_token: accessToken });

        var options = { url: apiUrl, json: true };

        request.get(options, function(err, resp, data) {
            if(err) {
                // (1) Error handling
                debug('ERROR');
                callback(err, null);
            } else if(resp.statusCode !== 200) {
                // (2) Unsuccessful handling
                debug('UNSUCCESSFUL');
                callback(new Error('Unsuccessful'), null);
            } else {
                // (3) SUCCESSFUL
                debug('SUCCESSFUL');
                callback(null, data);
            }
        });
    }
],function(err, results) {
    if(err) {
        //Case in (1) and (2)

        //[A] ERROR PROCESS
    } else {
       //Case in (3)

       //[B] SUCCESSFUL PROCESS
    }
});
```

(1)はrequest.get()処理のなかでエラーが起きた状態。
(2)はちゃんと答えが返ってきたけど、ResponseCode:200以外なので、APIから期待する結果が返ってこない状態。
(3)は期待通りの答えが得られている状態。

(1),(2)はエラーの類として[A]で処理をします。
(3)のみが正常系として[B]で処理されます。

そんな流れです。

# 課題というか、理解不足
要はAPIからResponseが返ってきたら次にいくような同期処理だったらいいわけなんですが、
requestモジュールを使うと、すでに非同期で取ってくるので全体として非同期になってしまいます。

本来Nodeのいいところは、イベント駆動・ノンブロッキング処理ができるところだという理解なんですが、
これをうまく制御できないと、いいところがうまく生かせないもんね。

もっとちゃんと勉強していきたいと思います。

※自身の理解度確認も含めてこの記事を書いています。しつこいようですが、謝りに気づかれた方は是非ご指摘いただけると幸いです。
Codeforces用Pythonテンプレート ～手動テスト～

# 背景
> 問題の背景は意外と読んでて楽しい。

久しぶりに競プロ熱が高まってきたので、ここ数日リハビリとして簡単な問題を解いています。
折角なので、昔使っていたC++ + Emacsの環境を改め、Python + PyCharmにしてみました。

その際、テストが（それなりに）簡単に追加できるテンプレートが出来上がったので、ここに掲載します。
以下、作成したテンプレの説明です。


# 対象と制約
> まず制約条件をチェックするのは競プロの鉄則。

今回は、数ある競プロサイトの中でも、[Codeforces](http://codeforces.com/)を対象とします。
Codeforcesには、以下の特徴があります。
1. 標準入出力でやりとりする
2. テストケースは多くて3つくらいしか用意されていない
3. ファイルをそのまま提出することができる

まず、用意されているテストケースが少ないため、自作テストをいかに楽に追加できるかが肝になります。
（逆に言えば、問題文からテストケースを自動生成する必要性は薄い、ということです）

その際にネックになるのが1番の特徴です。
関数の引数と返り値でやりとりする（TopCoderなどのコンテスト）場合は、単体テストを普通に書けばよいため、IDEのサポートも受けやすいです。
しかし、標準入出力はなんだかあんまりサポートされておらず、jUnitなどでもテストしにくい印象です。
そのため、少し面倒な方法を取る必要があります。

また、ファイルをそのまま提出すると楽できるので、そのまま提出できる形にしたいです。

# 作ったテンプレ
> 型に嵌る。

前置きが長くなりましたが、作ったテンプレをここに貼っておきます。
2ファイルがありますが、
1つはコードを記述しそのまま提出できるファイル、
もう1つはテストを記述するファイルです。

まず、コードを記述するファイル。
見ちゃダメ！（CV:ウメス）以降は、問題を解いている最中見る必要の無い箇所です。

```py:main.py
# -*- coding: utf-8 -*-
import sys
# 必要なimportを増やす


class Solver(object):

    def run(self):
        ### ここに回答を記載 ###


####################################
# ここからは見ちゃダメ！

### ここにライブラリを記載 ###

if __name__ == '__main__':
    Solver().run()
```

次に、テストを書くファイル。

```py:test_solver.py
# -*- coding: utf-8 -*-
from unittest import TestCase


data = [
    (
        """
入力1
""".strip()
        ,
        """
回答1
""".strip()
    ),

    (
        """
入力2
""".strip()
        ,
        """
回答2
""".strip()
    ),
]


########################################
# ここからは見ちゃダメ！

class TestSolver(TestCase):
    def test_run(self):
        import os
        import sys
        from StringIO import StringIO
        import main

        for i, testdata in enumerate(data):
            print(str(i) + " test...")
            saved_stdout = sys.stdout
            try:
                with open("temp_data.txt", "w+") as temp:
                    temp.write(testdata[0])

                fd = os.open("temp_data.txt", os.O_RDONLY)
                os.dup2(fd, sys.stdin.fileno())

                out = StringIO()
                sys.stdout = out

                main.Solver().run()
                output = out.getvalue().strip()

                self.assertEquals(output, testdata[1])
            finally:
                sys.stdout = saved_stdout
```

## 説明
test_solver.pyのTestSolver.test_run()を実行すると、ファイルの先頭辺りで定義したテストケース郡が走ります。
この関数では、
標準入力をファイルから受け取り、
標準出力を変数にリダイレクト
しています。
これにより、標準入力と標準出力を置き換えて扱うことができます。

## 工夫点
テストケースはヒアドキュメントを使っているため、コピペで簡単に追加できます。
マウスの練度は不要です。

標準入力はファイルを経由しなくてもいいんじゃない？と思いましたが、何故か出来なかったので諦めました（詳しい人plz）。
また、tempfileを使えば書けそうな所をわざわざ実ファイルに書き出していますが、Windows？とかいうマイナーOSではtempfileの読み込み権限が無いとかで怒られてしまいます。
回避するのも面倒…もとい出来なかったので、諦めました（詳しい人plz）。

## 使い方
ほとんど見ての通りです。
基本的にファイルの上の辺りを編集すれば済むようにしています。


# まとめ
> [recursive call](#背景)

テンプレートはただのファイルなので、お好きなエディタと組み合わせて使えます。
ゆとりコーダーとしては、PyCharmが楽でいいです。
自動補完もありますし、実行もショートカットキーで楽ちんです。
無論、EmacsやVimと組み合わせて慣れたエディタで戦うのも良いでしょう。
Emacsが先に来ている事に一切意味はございません。

## 最後に
こうすればもっと便利やで！という知見をお持ちの方は、ぜひコメントください。
Bracketsでjslintを無効にする

# 概要
BracketsでNode.jsのファイルを編集しようとしたところ、JSLintの警告が出っぱなしでちと邪魔くさいので無効化した(JSHintのみ有効にする)。

# 参考
[Brackets][jshint]Brackets で jslint を無効化したい。(jshintのみを有効にしたい)
http://d.hatena.ne.jp/GOT4416/20150113/p1

Adobe Brackets disable jslint but allow jshint
http://stackoverflow.com/questions/27584301/adobe-brackets-disable-jslint-but-allow-jshint/27612348#27612348
# 手順
メニューの「デバッグ」→「環境設定ファイルを開く」でbrackets.jsonを開いて、下記を追記する。

``` brackets.json
"language":{
    "javascript":{
        "linting.prefer": ["JSHint"],
        "linting.usePreferredOnly":true
    }
}
```

で、Bracketsを再起動する。


# 追記(2016/01/07)
これを書いたときはJSの勉強中だったのでJSLintウザいなーって思ってたんですが、エラーの出そうなコードを警告してくれて、良いコードの書き方を教えてくれるような感じがしてすごくありがたいことがわかりました。
Beautifyと一緒に使うと修正も楽なので、JSLintを無効にする設定にするよりも、JSLintについて勉強[^1]したほうが有益と思います。

[^1]: 『[JavaScriptパターン 優れたアプリケーションのための作法](http://www.oreilly.co.jp/books/9784873114880/)』を読むのがオススメです。
Ansibleのオプションとシェルスクリプトに対する優位性

Ansibleを使うと、シェルスクリプトと比べて何がうれしいのでしょうか。
超基本ですが、あえて書いてみます。

Ansibleでは、Inventoryで対象ホストを指定し、Playbookと呼ばれるスクリプトに書いたタスクを実行します。
その際に、実行オプションを指定することで、内容確認や、タスク実行方法を変える事が出来ます。
つまり、シェルスクリプトより柔軟に作業を行う事ができます。

```
$ ansible-playbook (オプション) -i (Inventory) (Playbook)
```

以下に、具体的なオプションを挙げてみます。

## 確認

これから実行しようとしている作業を確認する事ができます。

|オプション|意味|
|---|---|
|--list-hosts|実行対象ホストを確認する|
|--list-tasks|実行タスクを確認する|
|-C, --check|タスクを実行せずに実行チェックのみ行う(ドライラン)|

## 実行方法

タスクの実行方法を指定する事が可能です。

|オプション|意味|
|---|---|
|--step|タスクをステップ実行する|
|-t TAGS, --tags=TAGS|指定したタグが付いたタスクを実行する|


対象ホストとタスクが分離されており、さらにオプションも充実しているので、シェルスクリプトのように、秘伝のタレ化する事を防ぐことができます。

ちなみに、Ansibleのオプションは、以下のコマンドで確認可能です。

```
$ ansible-playbook
```
RxAndroid + retrolambda でお手軽にラムダでFRPを試す

まだまだ勉強中なんですが、[RxAndroid](https://github.com/ReactiveX/RxAndroid)でFRPとても楽しいです。  
ラムダ式が使えるとJavaでもRxがイイ感じに書けるので、Androidに導入してみたら意外とお手軽だったので紹介します。

# Rx面白いけど
[RxAndroid](https://github.com/ReactiveX/RxAndroid)を使えば、Androidの開発でもRxExtensionの恩恵を得ることができます。  
しかし、冗長なんですね。。。匿名クラスを書き続けるの。。。
ここでラムダ書きたくなるんですが、Androidだと、2015年4月の時点ではまだJava8をサポートしていないので、ラムダできないんですね。

# そこでretrolambda
[retrolambda](https://github.com/orfjackal/retrolambda) ってのは、所謂バックポーティングをやってくれるライブラリでして、いくつかのJava8の文法をJava7環境でも使えるようにしてくれます。

gradleでビルドするには[gradle-retrolambda](https://github.com/evant/gradle-retrolambda) が便利です

# お手軽導入
1. JDK8をセットアップします。

2. プロジェクト/app/build.gradleにﾁｮﾛっと書いてビルド。

```build.gradle
//retrolambda
apply plugin: 'me.tatarka.retrolambda' // apply retrolambda plugin
android {
    compileOptions {  // set compliler level
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
repositories {
    mavenCentral()
}
buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'me.tatarka:gradle-retrolambda:3.0.1'
    }
}

// RxAndroid
dependencies {
    compile 'io.reactivex:rxandroid:0.24.0'
}
```
詳しくはそれぞれのUsageを見てください。
[retrolambda](https://github.com/evant/gradle-retrolambda#usage)
[RxAndroid](https://github.com/ReactiveX/RxAndroid#binaries)

# こんな感じ
例えば、Switchをタップした時に何かアクションしたい時なんかは、、、、
### ラムダ無しのRxAndroidだけですと
なんか長い。。。

```java
ViewObservable.clicks(switchObject)
.map(new Func1<OnClickEvent, CharSequence>() {
    @Override
    public CharSequence call(OnClickEvent onClickEvent) {
        return ((TextView) onClickEvent.view()).getText();
    }
}).subscribe(new Action1<CharSequence>() {
    @Override
    public void call(CharSequence t1) {
        System.out.println(t1);
    }
});
```

### RxAndroid + ラムダ!!(+メソッド参照)
すっきり!

```java
ViewObservable.clicks(switchObject)
.map(onClickEvent -> ((TextView)onClickEvent.view()).getText())
.subscribe(System.out::println);
```

と言う感じで導入もお手軽でコードもスッキリ!

#### 参考
[RxAndroidとRetrolambdaで大体Java8をAndroidに持ち込む](http://sys1yagi.hatenablog.com/entry/2015/01/02/101350#fn-dfb63df2)
[retrolambda](https://github.com/orfjackal/retrolambda)
[RxAndroid](https://github.com/ReactiveX/RxAndroid)

※ RxAndroidは便利なんですが、まだVersion 0.24ということもあって結構インターフェースがコロコロ変わってるみたいです。
導入するときは注意した方がよさそうデス。

見てくださってありがとうございました。

Enjoy Rx
Pythonのfakerで日本語テストデータを生成する

# fakerとは
## 概要
ダミーデータ（テストデータ）を生成するライブラリです。PHPやRubyにも同名のものがあり、デファクトっぽい雰囲気があります。
https://github.com/joke2k/faker

この度、僕の方で住所データを日本語で生成できるように対応したので紹介します。

## どんなデータが生成できるか

fakerでどんなデータが生成できるのか？まずシンプルな例を書いてみます。

```python:sample.py
from faker import Factory
f = Factory.create()
print f.name()
print f.address()
print f.phone_number()
print f.date()
```

```bash:実行結果
Jennie Homenick
Petramouth, WI 21918-9349
177.513.9541
1998-12-21
```

良い感じにデータを生成してくれますが、デフォルトは英語圏の表記です。
`Factory.create`の引数で`location`を指定してやると他言語のデータも生成できます。

# 日本語対応について

気になる日本語対応ですが、一月ほど前の@ta2xeoさんのコミットで名前や電話番号は日本語表記で生成できるようになりました。

そして今回、僕の方で住所も生成できるように対応しました。
併せて見てみましょう。

```python:sample_ja_JP.py
from faker import Factory
f = Factory.create('ja_JP')
print f.name()
print f.phone_number()
print f.date()
print f.address()
print f.address()
print f.zipcode()
print f.prefecture()
print f.city()
print f.town()
print f.chome()
print f.ban()
print f.gou()
print f.building_name()
```

```bash:実行結果
松本 明美
070-1472-1794
2011-03-04
福島県横浜市鶴見区花川戸11丁目4番20号 コーポ三ノ輪553
富山県山武市氏家新田31丁目24番20号
121-0122
秋田県
小金井市
台東
11丁目
8番
13号
パレス
```

見てわかる通り、良くも悪くも実在する住所はほぼ出ません。
整合性のあるデータを生成するところまではいけてなかったり、日本の多様な住所表示形式に対応していなかったりしますが、とりあえず英語表記よりはマシになりました。

## 使用するにあたって

~~日本語対応版はまだPyPIにリリースされていないようです。~~
~~使われる場合はGitHubリポジトリからインストールしてください。~~

[v0.5.1でリリースされた](https://github.com/joke2k/faker/compare/v0.5...v0.5.1)のでこの節の手順は不要です。

# データマスクツール作成中

fakerなどのライブラリでテストデータを生成できますが、ダミーデータだけだとうまくいかないケースもあります。そういう場合はたいてい本番環境のデータの一部をマスクして使いたくなるので、そのためのツールを作りました。もちろんfakerを使っています。

CSVの特定の列だけをマスクする[Hermes](https://github.com/ohbarye/Hermes)というツールです。まだまだ貧弱ですが地道に改良していくつもりです。
https://github.com/ohbarye/Hermes
VimDiff for MacVim を設定してわかった事

MacでVimDiffを使ってみようといろいろ調べた結果を共有します。

# 結論

普通にvimdiffを起動するとデフォルトのvimdiffが起動するので、適時設定を変更する必要があります。
MacVimの設定をしたから大丈夫と考えていたため、意外な盲点でした。

# 設定例

cmdの設定をしなくてもvimdiffは機能しますが、ターミナル上ではsyntax highlightがうまく機能せず、それ以外にも問題があったので、MacでVimDiff使っている方は設定した方が幸せになれると思います。

```bash:.bash_profile
alias vimdiff='/Applications/MacVim.app/Contents/MacOS/vimdiff'
```
```ini:.gitconfig
[diff]
    algorithm = histogram
    tool      = vimdiff
[difftool "vimdiff"]
    cmd = /Applications/MacVim.app/Contents/MacOS/vimdiff $LOCAL $REMOTE
```

※ブログからの転載です。
一発でMySQLのrootユーザーにすべてのホストからすべてのデータベースにすべての権限を与えるコマンド


環境
MySQL-Server: 5.5.43
User: root
Pass: なし

## 恐ろしいコマンド

```bash:example
mysql> grant all privileges on *.* to root@"%";
```
	
せいっ
開発環境なんかでは、細かく設定するのがめんどくさくていつもこれ打っちゃう。  
パスワードを設定している場合は

```bash:example
mysql> grant all privileges on *.* to root@"%" identified by 'ぱすわーど';
```

設定反映させて終了

```bash:example
mysql> flush privileges;
```
Goで`uname -m`の値を取得する

    $ uname -m
    x86_64

みたいなやつ。

`syscall.Uname()`で`syscall.Utsname`を取得し、そのうちの`Machine`を文字列として取得する。

```go:main.go
package main

import (
  "fmt"
  "os"
  "syscall"
)

func main() {
  m, err := machine()
  if err != nil {
    fmt.Println(err.Error())
    os.Exit(1)
  }

  fmt.Println(m)
  os.Exit(0)
}

func machine() (string, error) {
  u := syscall.Utsname{}
  err := syscall.Uname(&u)
  if err != nil {
    return "", err
  }

  var m string
  for _, val := range u.Machine {
    m += string(int(val))
  }

  return m, nil
}
```

なお`syscall.Uname`および`syscall.Utsname`の実装はOSに依存しており、Linuxでは動くけどWindowsやOSX、BSDなどではそもそもこのコードのビルドが通らない。

なので複数OSを前提としたコードを書くなら、`syscall.Uname`や`syscall.Utsname`を呼び出す部分はOSごとにファイルを切り分けるなのの必要が出てくる。

### 参考

- [Package syscall](https://golang.org/pkg/syscall/)
- [Int array to string #golang](https://gist.github.com/justincase/5487625)
- [Build constraints](http://golang.org/pkg/go/build/#hdr-Build_Constraints)の"If a file's name,〜"のあたり
Dockerでnode-stacicの静的コンテンツ用Webサーバーを起動する

テスト用に手軽な静的Webサーバーを使いたかったので[node-static](https://github.com/cloudhead/node-static)をDockerコンテナで起動しました。ちょっとしたJavaScriptのアプリを簡単にデプロイして確認することができます。

## node-staticコンテナ

最初にプロジェクトに作成したファイル一覧です。

``` bash
$ cd ~/node_apps/node-static
$ tree
.
├── Dockerfile
├── app.js
├── package.json
└── public
    └── index.html
```

Dockerfileは[google/nodejs-runtime](https://registry.hub.docker.com/u/google/nodejs-runtime/)をベースイメージに使います。

``` bash:~/node_apps/node-static/Dockerfile
FROM google/nodejs-runtime
VOLUME /app/public
EXPOSE 80
```

app.jsのメインプログラムでは静的ファイルをデプロイするディレクトリとして`public`を指定します。

``` js:~/node_apps/node-static/app.js
var static = require('node-static');
var file = new static.Server('./public');

require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        file.serve(request, response);
    }).resume();
}).listen(80);

console.log("Server running at http://localhost");
```

`package.json`では`node-static`パッケージをインストールします。

``` json:~/node_apps/node-static/package.json
{
  "name": "node-static-app",
  "description": "node static app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "node-static": "0.7.6"
  },
  "scripts": {"start": "node app.js"}
}
```

[A Minimal HTML Document (HTML5 Edition)](http://www.sitepoint.com/a-minimal-html-document-html5-edition/)を参考にしてミニマルな`index.html`を用意します。

``` html:~/node_apps/node-static/public/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>
```

## コンテナの起動と確認

Dockerイメージをビルドします。

``` bash
$ docker build -t node-static . 
```

Dockerコンテナを起動します。

``` bash
$ docker run -d \
  --name node-static \
  -p 80:80 \
  -v $PWD/public:/app/public \
  node-static
```

localhostから簡単に確認してみます。

```
$ curl localhost
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>
```

`public`ディレクトリはVOLUMEにマウントしているのでDockerコンテナが起動中にファイルを編集することができます。
DroidKaigiまとめ


こんにちは、4月からAndroidエンジニアになった[@shihochandesu](https://twitter.com/shihochandesu)です。
先日、4月25日にDroidKaigiに参加してきたので、忘れないうちにもろもろまとめておきたいと思います。

## DroidKaigiについて

http://droidkaigi.github.io/

日時：2014/04/25(火) 10:00~18:00
場所：場所：東京都渋谷区道玄坂一丁目12番1号 サイバーエージェント本社 13F

”DroidKaigiは、エンジニアが主役のAndroidカンファレンスです。有志によって主催し、Android技術情報の共有とコミュニケーションを目的に開催します。”

上にもあるように開発者のためのカンファレンスでした。
内容がコードや開発に関するものばかりで、ひよっこには難易度高めでしたがとても刺激になるイベントでした。
いくつか印象に残っている公演をまとめたいと思います。


## 講演まとめ

### Activity, Fragment, CustomView の使い分け -マッチョなActivityにさよならする方法- あんざいゆき

資料：http://www.slideshare.net/yanzm/droid-kaigi2015-yanzm


基調講演は、ブログやライブラリでお世話になった、あんざいゆきさん([@yanzm](https://twitter.com/yanzm))さんの公演でした。

個人的に肥えてるActivityのリファクタリングに乗り出したところだったのでおもしろかったです。
そもそも飛び入りでAndroidエンジニアになったので、Activity, Fragment, CustomViewの特徴なども深く理解していなかったなあ(´；ω；｀)といきなり反省することも多いセッションでした。
以下、資料から抜粋。

###### マッチョなActivityはなぜダメか
1. Activityはテストがしにくい
2. いろんな機能がごちゃまぜで存在するため、読みにくくデグレが起こりやすい

###### Activity, Fragment, CustomViewまとめ
* Activity
 - スクリーンに関することを管理
 - ActionBar, メニュー, Fragmentの管理, Intentの処理, 画面遷移など
* Fragment
 - CustomViewでできないことを実装
 - ネットワーク処理, DB,ファイル操作, Loader, メニュー, 画面回転を超えて継続する処理など
* (Custom)View
 - パーツとして利用
 - 値の前処理,後処理, バリデーション, アニメーション, フォーカス,Selector処理

個人的には理解が深まった講演でした。
後日、Androidエンジニアの共有会で話したんですが、CustomViewをパーツごとに作成して、それぞれのCustomViewにPresenterを作成してクリックイベント等の処理はそこに記述する。ActivityではそのCustomViewをinflateするだけという実装が、自分的には

* viewのパーツ化による再利用性の向上
* クリック処理などのロジックをViewに閉じ込めることができる

などのメリットがあってActivityをスリムにできそうだなと。
まだわかってないことも多いのでダイエットさせながら良い方法を模索しようと思います。

### JellyBeanとKitKatで実現するマテリアルデザイン

資料：https://speakerdeck.com/androhi/jellybeantokitkatdeshi-xian-surumateriarudezain

最近、自分が担当アプリにToolbarを導入してそれからすぐのActionBarActivity死亡のお知らせにoh...(@_@)となっていたので、SupportLibrary v22.1の解説は非常にうれしいものでした。
以下、資料から抜粋。

###### Zaimのバージョンシェア
* Kitkatが圧倒的に多い、次いでJellyBean
* 上記２つで全体の **77%** を占める

###### マテリアルデザインのGOAL
* 良いデザインの原則となるようなビジュアル言語をつくる
* プラットフォームやデバイスサイズ全体で統一された体験を可能にする

###### まとめ
1. Android 4.x系ではSupportLibraryを中心に実装する
2. ブランドカラーはきちんと検討・設定する
3. GoogleI/Oに注目する

マテリアルデザインは個人的にすきで、自分が携わっているアプリでもlollipop以前のOSのシェアも多いので、SupportLibraryで積極的に導入していこうと思います。
Mavenをyumからインストール


# 手順

```
sudo wget http://repos.fedorapeople.org/repos/dchen/apache-maven/epel-apache-maven.repo -O /etc/yum.repos.d/epel-apache-maven.repo
sudo sed -i s/\$releasever/6/g /etc/yum.repos.d/epel-apache-maven.repo
sudo yum install -y apache-maven
mvn --version
```

# 参考資料
* https://gist.github.com/sebsto/19b99f1fa1f32cae5d00
Let's Chat の gravatar がみんな同じでつらい→Surrogator 使ってみた

# はじめに

Let's Chat を立てて色々遊んでいるのだけれど、会社のメールアドレスだと [gravatar](http://ja.gravatar.com/) のメールアドレス確認メールが SPAM 扱いされててそのままだと届かない。「チャットのアイコンに」とも言いづらくて解除申請もしにくい。それと、いつ Web プロキシで遮断されるかも分からない。

⇒[Surrogator](http://cweiske.de/tagebuch/surrogator.htm) https://github.com/cweiske/surrogator を立てて内部でアイコンを提供すれば良い。

# 問題

Let's Chat の gravatar イメージはデフォルト画像を指定していないので、未登録の人が並ぶと以下のようになる（画像はテスト環境。hubot だけは登録したメールアドレスを使っている）。

![LetsChat-gravatar.png](https://qiita-image-store.s3.amazonaws.com/0/53147/4aa06669-fe3e-082d-a5d8-c8a419acdb1d.png)

# 解決法1: デフォルト画像の指定

gravatar のリンクを埋め込んでいるところを探して、`&d=identicon`などと、デフォルト画像の指定を埋め込んで回る

## 問題点

1. Web プロキシで遮断される恐れが残る
2. 自由に設定できない

ということでこの案はイマイチ

# 解決法2: Surrogator を使う

Surrogator を使うと

1. HTTP サーバに PHP が入ってれば OK（Bitnami を使うので今回は OK）
2. gravatar 互換の API なので、Let's Chat の gravatar の URL を書き換えまくればそのまま動く
3. ローカルに<メールアドレス>.png または.jpg をおいてコマンドを実行すれば準備が整う（外部とメールのやり取りが不要）
4. [Github Enterprise のガイド](https://help.github.com/enterprise/2.0/admin/guides/user-management/enabling-avatars-and-identicons/)にも Surrogator使えるよ、みたいなことが書いてあるくらいにはメジャー（？）

便利。

# Surrogator の導入

1. surrogator-0.2.0 を落としてどっか適当なフォルダに置く
2. data/surrogator.config.php.dist を surrogator.config.php にリネームする
3. surrogator.config.php の下の方にある`$sizes   = array(16, 32, 48, 64, 80, 96, 128, 256, 512);`に、20, 30, 50, 100 を追加する（Let's Chat で使う大きさ）
3. www/ 以下にある .htaccess と avatar.php を htdocs ルートに置く
4. avatar.php のsurrogator.config.php を参照しているパスを書き換える
5. Apache の設定で PHP と mod_rewrite が有効なことを確認する（必要ならば設定変更して Apache の再起動をする）
6. raw/default.png と raw/<メールアドレス>.png を用意する
7. コマンドラインから、`php surrogator.php`を実行して縮小画像の準備をする

気が向いたら raw フォルダの指定を書き換えて共有フォルダにして好き勝手に置いてもらったり、Jenkins さんか Hubot さんにお願いすると`php surrogator.php` してもらうようにしたりとか。
Python で画像付きツイート

以前書いた「[Python で Twitter API にアクセス](http://qiita.com/yubais/items/dd143fe608ccad8e9f85)」だが、2014年3月頃に複数画像投稿が可能になり、それに伴って画像ツイートまわりの仕様が変更になったようなので追記。

それまでは通常ツイートの [statuses/update](https://dev.twitter.com/rest/reference/post/statuses/update) API と、画像つきツイートの [statuses/update_with_media](https://dev.twitter.com/rest/reference/post/statuses/update_with_media) があっだが、新たに [media/upload](https://dev.twitter.com/rest/reference/post/media/upload) というのが追加され、それまでの update_with_media は非推奨になった模様。

旧APIでは画像とテキストを同時に投稿していたが、新APIではまず画像をアップロードし、その media ID を取得してテキストをツイートする、という形になったようだ。

コードは大体こんなかんじ。`CK,CS,AT,AS` は適宜自分のキーに置き換えること。Python2, 3 どっちでも動く。

```py:upload_media.py
#!/usr/bin/env python
# coding: utf-8

import json
from requests_oauthlib import OAuth1Session

CK = 'XXXXXXXXXXXXXXXXXXXXXX'                             # Consumer Key
CS = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'         # Consumer Secret
AT = 'XXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' # Access Token
AS = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'         # Accesss Token Secert

url_media = "https://upload.twitter.com/1.1/media/upload.json"
url_text = "https://api.twitter.com/1.1/statuses/update.json"

# OAuth認証 セッションを開始
twitter = OAuth1Session(CK, CS, AT, AS)

# 画像投稿
files = {"media" : open('image.jpg', 'rb')}
req_media = twitter.post(url_media, files = files)

# レスポンスを確認
if req_media.status_code != 200:
	print ("画像アップデート失敗: %s", req_media.text)
	exit()

# Media ID を取得
media_id = json.loads(req_media.text)['media_id']
print ("Media ID: %d" % media_id)

# Media ID を付加してテキストを投稿
params = {'status': '画像投稿テスト', "media_ids": [media_id]}
req_media = twitter.post(url_text, params = params)

# 再びレスポンスを確認
if req_media.status_code != 200:
	print ("テキストアップデート失敗: %s", req_text.text)
	exit()

print ("OK")
```

4枚画像つきツイートをする場合 media/upload を4回やって、全部の media id をリストに並べてテキストを投稿するんだと思う。試してないけど。
Promiseに関するパターンや命名規則


やや自己流含む。

## getXxx/fetchXxx

getXxxは同期、fetchXxxはPromiseということにしている。とくに非同期の取得系はfetchということに決め打ってる。

GETリクエストであることを明示したいときにややこしいという問題はあるが、そのケースは少なく、JS内で同期/非同期を明示したいことの方が多い。

例:

```js
fetchMyObject().then(data => console.log(data));
```

非同期の副作用系はput/post/sync/send/uploadとかそのあたりを適当に使う。

## Promise( (done, reject) => {..})

恐らく仕様的に正しいワードは fulfill, reject なのだが、fulfillはタイプ数が妙に多いのと、llが多くタイポしやすく、またタイポが発見しづらいので、自分は慣習的にdoneを使っている。

追記: fulfillよりもresolveの方が仕様に沿ってるっぽいhttp://people.mozilla.org/~jorendorff/es6-draft.html#sec-promise-executor

例:

```js
new Promise(done =>{
  setTimeout(done, 1000);
});
```

これはjQuery.deferredの風習を真似ているといえばそう。結構悩ましいところではある。

## ~ing

promiseを変数に入れる必要がある際は進行形にする。自己流。あんまりみない。そもそも一次変数に入れる必要がある際が少ないのだが、Promise.allとか使う時にやる。

例:

```js
let fetching = fetch('/hoge/fuga');
fecthing.catch()
```

jQuery.deferredでよくみたコードは dfd とか単に dを使っていた。あれはd.resolve()みたいなAPIで、正確には対応するのはPromise.deferだろうが…


## .ready

あるオブジェクトが使用可能かどうかで, `.ready` にpromiseオブジェクトを持たせておくケースがある。こういうパターン。

```js
class MyFetcher {
  constructor(){
    this.ready = Promise.defer();
    setTimeout(() => this.ready.resolve(), 1000);
  }
}
let fetcher = new MyFetcher();
fetcher.ready.then(()=>{});
```

これは ServiceWorkerのAPIで `navigator.serviceWorker.ready.then(...)` みたいになってるのを真似した。標準APIを真似るのは統一感をもたらすので良い。
とはいえファクトリメソッドでもいいといえばそう。ライブラリ提供側で裏側で初期化プロセス走らせたい時に使うかもしれない。

## インデント

行頭.thenになるような形。単純な関数コールの時はArrowFunctionのブロックを取らない形を許す。

```js
fetch(url)
.then(data => {
  console.log(data);
  return fetch(url2, data);
})
.then(data => fetch(url3));
```

結果的にブロックを取らないような関数コール一行になるようにリファクタすることでコードの見通しがよくなることが多かった。あくまで制御フローだけを扱えると綺麗。

## 一行目でPromiseを返す関数

coffeeや関数をarrow functionで書く時にやる。

```js
let func = () => new Promise(done => {
  // 長い関数
});
```

この関数がPromiseであることが自明になる反面、どこが非同期なのかわかりづらいという問題がある。
人によって好き嫌いがあると思う。


ツッコミ待ちです。
[Groovy]複数のリストから全ての組み合わせを持ったリストを生成する

#概要
数学で言うところの順列（Permutation）と組み合わせ（Combination）です。
それぞれ`eachPermutation`と`eachCombination`というメソッドがあります。

今回の例は単純に数字を使っていますが、例えば何かしらの検索サービスを実装する際に、Aの検索結果は100件で、AにBという検索条件を足した場合は80件、AにBとCとう検索条件を追加した場合は20件、といった使い方が出来るんじゃないのかな。。。と想像します。


```groovy

// 組み合わせ
List combinationList = []
[[1,2], [3,4]].eachCombination { combinationList << it }
assert [[1,3], [2,3], [1,4], [2,4]] == combinationList


// 順列
List permutationList = []
[1, 2, 3].eachPermutation { permutationList << it }
assert  [[1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]] == permutationList

// 組み合わせから順列を生成
List combinationToPermutation = []
combinationList.each { List combination ->
    combination.eachPermutation{ combinationToPermutation << it }

}

assert [[1, 3], [3, 1], [2, 3], [3, 2], [1, 4], [4, 1], [2, 4], [4, 2]] == combinationToPermutation
```

#参考
[eachCombination](http://docs.groovy-lang.org/latest/html/groovy-jdk/java/lang/Iterable.html#eachCombination(groovy.lang.Closure))
[eachPermutation](http://docs.groovy-lang.org/latest/html/groovy-jdk/java/lang/Iterable.html#eachPermutation(groovy.lang.Closure))
Adaptive payments 支払いエラーの理由について

PayPal Adaptive Payments chained paymentで第2受取人への支払を実施すると、下記エラーが発生してしまいます。

[errorId] 520002
[message] PA_Long_Error_Payment_Request_Invalidated

支払処理が出来なかった理由を取得することが可能ですか？
例えば口座の残高不足の為、など。
なぜBaas (Backend as Service)はアプリ開発する際に無視できないのか

今の時代ではアプリの開発に際して何年間もかける余裕はありません。わずかな期間で開発を完了し市場に出さなければなりません。より良いアジャイルモデルを用いてコアの専門に基づき、アプリをリリースしなければいけません。いわゆる「non-invented-here 」シンドロームに拘ることは最悪な状況に至ります。

想像するアプリはいずれも、いずれかの「アップストア」に存在するか、どちらかの大手企業或いは小規模な会社で開発中であるかもしれません。Time-to-Marketは重要なパラメータであり、遅れて市場にアプリを出すことは関連性のないものになり、存在する競争相手にキャッチアップすることは大変になります。

単純でないアプリを開発する為にアーキテクチャ及びプラットホームの複数な層におきましては専門知識を持たなければなりません。

デバイス: モバイルデバイス用の
サーバ側 : その他
データベース: その他
クラウド•コンピューティング : その他
開発者はファイアウォールポート、セキュリティ、パッチ、高可用性、スケーラビリティ、パフォーマンスなどについて適切に設定する知識を持つ必要があります。

システム監視及び管理　–　サーバのヘルスチェック及びサーバ管理・データ（即ちバックアップ）、地理的な冗長など

開発者が実行するタスクにおいては幅広いプラットホーム及びアーキテクチャ層のスキルの発育の為に多くの時間がかかり、コアの機能に集中する時間が短縮されてしまいます。
最終的に開発者の想像より開発期間が長引いてしまいます。

開発者は専門知識を持っていても想定予算と期間より莫大な工数が掛かってしまいます。
サービス提供者より提供される仮想マシンが高いということもあり、開発者においては費用効果のある解決法として見えません。なお、アプリが市場にリリースする前にその費用を負担することは全体予算に大きい影響を与えてしまいます。
-　サーバ側の開発はデバイス開発と比較すると全く違う分野である為、特別なスキルを要するほか、莫大な工数及び期間がかかります。社内開発することを決定しても費用をつり上げることに繋がります。
- アプリ開発を委託するサービス会社においてはデバイス・クライアント側とサーバ側の開発は別々のチームで実施することになります。クライアント側開発を実施するチームはサーバチームに依存することもあり要望するインタフェースを実現するために頻繁な仕様変更が実施されることで喧嘩に至る場合もあります。
この依存性はスケジュールに間に合わせる為に必要のない圧力及びチームのやる気を低下することに繋がります。
- 非機能要件を達成する為にサーバ及びインフラの管理は複雑すぎます。実例としては
拡張性、性能、高可用性、セキュリティーなどに関連する非機能要件は莫大な工数及び時間がかかりますし、特別なスキルも必要となります。

サービスプロバイダは上記の面倒を見ることになるとどうなるでしょう。バックエンドアプリを管理するものはその面倒を見てくれるとどの程度楽になるでしょう。

-　継続的に新しい機能の追加及びバージョン管理されているインタフェースの保守は簡易にできます。
-　クラウド環境においてはアプリの展開する複雑性、サーバインストール及び管理は開発者にとって気にしないことになります。
-　大抵の場面においては創造的な機能が提供可能になります。
-　カスタムロジックが必要となる場合はカスタムソースの配置が可能になり、既存サーバと共に稼動可能になります。
-　デバイスとウェブ用で人気のあるプラットホーム全てに対してネイティブSDKか提供可能になります。
-　バックエンドが同一となり、同様なインタフェースを持つネイティブSDKのみの変更が必要とのことで一つ以上のプラットホームに対して簡易にサポートが可能になります。
-　管理コンソールを提供することでSDKを用いて生成された全データにアクセス及び管理が可能になります。

Backend as a Service – BaaSが救助にきます。Platform as a Service – PaaSの論理的発展であり、上記の弱点の解決法となります。BaaSはPaaS上に載せることになります。全てのサービスに対してRESTのインタフェースが提供される、ネイティブSDKを通してアクセス可能です。モバイル開発に対して更に特定のプラットフォームはMobile Backend as a Service – MBaaSとなります。

- 開発者が開発する技術に該当するSDKライブラリを追加し、結合の為に僅かのソースコードを作成することで仕事完了です
- 利用開始日よりその創造的な機能が使用可能になります。サーバ管理が不要ですし、ボイラプレートソースコードを作成する必要はありません。
- カスタムソースコード作成の為に柔軟性を持ちます。
- サーバ側の機能の必要となる勉強・募集・開発が入りません。
- 上記と共に時間・工数・費用が確保できます

Backend as a Serviceは毎日のように発展していきます。「MEAP vision」に参加しアプリ開発者の成功に貢献します。MEAPは Mobile Enterprise Application Platformと略され、GartnerよりGartner Magic Quadrantにて造語されました。

使い古された80-20ルールを適用します。アプリ開発に際してサーバ側に必要となる80%の機能をカバーし、残りの20%については幾つかのBaaS提供者はクラウド上にカスタムソースコードを実行するセットアップの提供を開始しています。二つ以上のAPIをすりつぶすことで上位層のfaçade APIの作成は可能です。
BaaS提供者が提供する普段のサービスは以下となります。
- ユーザ管理
- ストレージ
- プッシュ通知
- ソーシャル
- 地理空間（Geo Spatial）

複数のドメインの間、更に多いサービスを提供する提供者も存在します。
既に[Backend as a Service](http://api.shephertz.com/)は多数の開発により利用中です。発展するペースを参考にすることで無視できない技術と確信し、配慮しなければなりません。
iptablesでround robin

# 概要

tcp-serverを、3つ走らせ、それぞれ、port 12125,12225,12325をlistenさせる。
クライアントが、port25に投げてきたら、それぞれに分配する。
* mangle-PREROUTINGで、新しいconnectionについて、CONNMARKをつける
* nat-PREROUTINGでCONNMARKによってip/portを書き換える
* 反対方向のトラフィックについても、POSTROUTINGで、一応ip/portを元に戻しておく。


# 設定

```
echo 1 > /proc/sys/net/ipv4/ip_forward
smtp_ip='192.168.100.1'
smtp_port='25'
smtp_port1='12125'
smtp_port2='12225'
smtp_port3='12325'
/sbin/iptables -F
/sbin/iptables -t nat -F
/sbin/iptables -t mangle -F
iptables -t mangle -A PREROUTING -p tcp -d $smtp_ip --dport $smtp_port -m state --state NEW -m statistic --mode nth --every 3 --packet 0 -j CONNMARK --set-mark 1
iptables -t mangle -A PREROUTING -p tcp -d $smtp_ip --dport $smtp_port -m state --state NEW -m statistic --mode nth --every 3 --packet 1 -j CONNMARK --set-mark 2
iptables -t mangle -A PREROUTING -p tcp -d $smtp_ip --dport $smtp_port -m state --state NEW -m statistic --mode nth --every 3 --packet 2 -j CONNMARK --set-mark 3

iptables -t nat    -A PREROUTING -p tcp -d $smtp_ip --dport $smtp_port -m connmark --mark 1 -j DNAT --to-destination $smtp_ip:$smtp_port1
iptables -t nat    -A PREROUTING -p tcp -d $smtp_ip --dport $smtp_port -m connmark --mark 2 -j DNAT --to-destination $smtp_ip:$smtp_port2
iptables -t nat    -A PREROUTING -p tcp -d $smtp_ip --dport $smtp_port -m connmark --mark 3 -j DNAT --to-destination $smtp_ip:$smtp_port3

iptables -t nat   -A POSTROUTING -p tcp -s $smtp_ip --sport $smtp_port1 -j SNAT --to-source $smtp_ip:$smtp_port
iptables -t nat   -A POSTROUTING -p tcp -s $smtp_ip --sport $smtp_port2 -j SNAT --to-source $smtp_ip:$smtp_port
iptables -t nat   -A POSTROUTING -p tcp -s $smtp_ip --sport $smtp_port3 -j SNAT --to-source $smtp_ip:$smtp_port
```
Volleyでcookieをちゃんと扱う（あるいはHttpURLConnectionの話）

# 前回までのあらすじ 
以前[VolleyでCookieとUserAgentをまとめていじりたい](http://qiita.com/YukiAsu/items/2ed3dc6e780bfe93af29)とは言ったのだけれど、どうにもcookieの扱いが無理やりすぎてコレジャナイ感があった。実際"responseを拾えばSet-Cookieを回収できる"とは言ったものの、単純なString扱いなので例えばDomainごとに制御したりとかができないのだ。

Volleyの同じQueueで自分のAPIとTwitter両方ともつついたりしてると、双方に双方のCookieを流し込むことになる。そんなの気持ち悪い！なんとかしたい！（というかセキュリティ的にアカン）

# HurlStack、あるいはHttpURLConnectionをちゃんと考える
そもそもVolleyを使う為に仕方なくHurlStackを使ってる、という意識だったので理解が薄すぎた。どう考えても標準でCookieを扱う仕組みがあるべきだし、あるだろう。HurlStack方面でそれを調べて見る。

HurlStack。とはいえこいつの中ではHttpURLConnectionを使っているにすぎない。そしてこれにはきちんとCookieを操作するための標準的な仕組みが存在する。それが `CookieHandler`や`CookieManager`だ。

CookieManagerを使えばCookieStoreが取得できる。中身はHttpCookieというのが詰まっていて、もうこれはほぼゴールだ。getName()やgetValue()だけじゃない、getDomain()もできちゃったりしてやりたい放題だ。これに任せよう。

きちんと設定してあげればVolley以外でもHttpURLConnectionを使っている箇所すべてにCookieが染み渡るのも素晴らしい。

# RequestQueueに入れてみる
以上の点を踏まえ、前回同様RequestQueueをこう書き換えてみた

```java:RequestQueueWithCookie
// CookieManagerを作ってDefaultに設定
final CookieManager cookieManager = new CookieManager();
CookieHandler.setDefault(cookieManager);

// Volleyのリクエストキューを生成
RequestQueue mRequestQueue = Volley.newRequestQueue(getApplicationContext(), new HurlStack(){
    @Override
    public HttpResponse performRequest(Request<?> request, Map<String, String> additionalHeaders)
            throws IOException, AuthFailureError {
        Map newHeaders = new HashMap();
        newHeaders.putAll(additionalHeaders);
        // セッション維持のためcookieとUserAgentを設定する
        newHeaders.put("User-Agent", "ユーザーエージェント");
        // 実際はoldCookieはどこからともなく持ってきてStoreに登録する
        CookieStore store = cookieManager.getCookieStore();
        HttpCookie oldCookie = new HttpCookie("クッキーのname", "クッキーのvalue");
        store.add(URI.create("domain"), oldCookie);

        // responseを待ってCookieを回収する
        HttpResponse response = super.performRequest(request, newHeaders);
        // cookieの回収
        List<HttpCookie> cookies = store.getCookies();
        if (cookies.size() > 0) {
            // あればクッキーを保存
            // cookies.get(0)とかをどうにかこうにか保存します
        }

        return response;
    }
});
```

これならたぶん有効期限とかもよしなに処理してくれるし、絶対こっちのほうが健全だと思った。

# 参考
[どうしてJaveでCookieが取得できないんだろう？](http://tomott.cocolog-nifty.com/blog/2010/08/javecookie1-87d.html)
もうだいぶ昔の話で表題のバグはなおってるっぽいけれど、中の動きがよくわかった。（気がする）
これで決まり。Macユーザーのためのシェル環境を整えるための環境

# 最終的に行き着いたシンプルな環境
今回紹介するのは環境を整えるための環境。
例えばMacユーザーでHomebrewを入れていない人はいないと思うが（いるとすればMacports派か）、今回はそういったものをいくつか紹介するわけでbrewコマンドで何を入れればいいかなんてのは既に多くの方が記事にしているし個人の趣味によるので割愛する。

では紹介する。

## zshell
zshellはシェルの一種で俺みたいにシェルを使いこなせていないハナクソから見ても最強なシェル。この他にシェルは存在しないと思ってもいいくらいだが標準ではbashとかいうのになっているのでzshにchsh（チェンジシェル）するべし。

## oh-my-zsh
これは俺みたいにzshellを使いこなせてないやつでも達人達の使うzshellと同等レベルにカスタマイズされたzsh環境を使うためのもの。おかげで豚に真珠状態である。
だがそんな俺でもこのoh-my-zshが非常に有用であることはわかるので是非入れておきたい。

##oh-my-vim
これは俺みたいvimでカーソル移動ができなかったりモードってなんぞやってやつでもプロっぽい感じのオーラを放つvim環境を使うためのもの。おかげで猫に小判状態である。
だがそんな俺でもこのoh-my-vimが非常に有用であることはわかるので是非入れておきたい。

## homebrew
説明不要過ぎるがMacでコマンドライン系アイテムを入手、管理するためのもの。昔MacPortsも使っていたが、これからどちらかを選ぶ人は絶対にこっちにしたほうがいい。理由は使えばわかってくる。

## brew-cask
これはhomebrew入手後brew install brew-caskでインストールできる。brewコマンドはコマンドラインアプリのためのものだがbrew-caskを入れることでMac向けGUIアプリも入手、管理が可能になる。

## anyenv
これがとてもいい。これを紹介したくて記事を書いたくらいだ。
環境を整えるための環境を整えるための環境。envのenv、大演舞だ。
例えばrubyという言語環境の複数バージョンを管理する環境がrbenv、phpならphpenvだが、なんたらenvというのは今では無数にあるためenv系を管理するための環境が用意されている。
anyenvでは
Renv, erlenv, goenv, jenv, ndenv, nodenv, plenv, rbenv, denv, exenv, hsenv, luaenv, nenv, phpenv, pyenv, scalaenv
を管理することができる。
これらのうちいくつかはbrewコマンドからインストールできるが、俺の場合はenv系はすべてこちらでまとめて管理している。超オススメ。
これによって一度インストールされたenvやanyenv自体のupdateはアドオンが必要である。アドオンはgithubのanyenvのページにてインストールコマンドが公開されている。

## percol
からのpercolである。さきほどのanyenvでpyenvをインストールしpyenvでpython環境を整える。そしてpipコマンドを使いpercolをいれる。これによりディレクトリ移動が光の速さを超える。

各環境はそれぞれのサイトでインストールコマンドが公開されているがここにそのコマンドをハードコピーすると、コマンドが変わったりした時に都合が悪いので詳細は各自ググってもらうということで。

とりあえず浅ーく紹介したがこの辺で。