OmniAICreator/Qiita-1.07M huggingface dataset:
レビューの★の数のちょっとした計算

# あらまし
レビュー機能がサイトにあると、みんながレビューした評価を★の形で表現したい、ということがあるかとおもうのですが、その時の★の表示を例えば font awesome などで実施すると、100% の横幅の★と 50% の横幅の★しかなく、ちょっと頭をひねる必要があります。(画像で★作る時も同じような問題がでますが。)

## 補足: font awesome の★
言葉で説明するのはちょっと大変なので下記の画像をみていただきたく。[^1]
![スクリーンショット 2015-12-14 11.52.57.png](https://qiita-image-store.s3.amazonaws.com/0/103124/57e6d12b-8497-936d-5005-21b1a534e520.png)


# 課題
- レビューの値が 3.8 や 3.1 だった
- しかし、使えるアイコンは 3.5 や 4.0 のものしかない


# 解決のアプローチ

## レビューの値を標準化する

3.8 や 3.1 といったレビューの値を 3.0 や 3.5 にいい感じに寄せます。


```rb
(レビューの総得点.to_f/レビューの件数.to_f * 2).round/2.to_f
```

実行結果

```
★の標準化(18, 4) // 4.5
=> 4.5

★の標準化(17, 4) // 4.25
=> 4.5

★の標準化(13, 4) // 3.25
=> 3.5

★の標準化(15, 4) // 3.75
=> 4.0
```

## ★を font awesome を使って描きます

rating には前述した標準化された値を入れます。(0.5 で割り切れることを保証)
レビューは 5 段階評価という前提です。(5 - rating.ceil のところを書き換えれば任意に変更できるかと思います。)

```rb
  def draw_stars(rating)
    content_tag :span do
      rating.floor.times do
        concat content_tag :i, nil, class: 'fa fa-star'
      end

      if rating % 1 != 0
        concat content_tag :i, nil, class: 'fa fa-star-half-o'
      end

      (5 - rating.ceil).times do
        concat content_tag :i, nil, class: 'fa fa-star-o'
      end
    end
  end
```

[^1]: https://fortawesome.github.io/Font-Awesome/icons/
socket.ioのnginxロードバランスで気づいたこと

まとめるとip_hashはB2Cでしかロードバランスにならないので、stickyを使いましょうという話。

#socket.ioのロードバランス
socket.ioのロードバランスにおける注意点といえばXHRですね。socket.ioさんはXHRで通信することがあり、XHRの向き先がリクエストごとに分散されてしまうと通信できなくなってしまいます。

##socket.io公式の方法
公式にも複数node利用する場合の方法が書かれています。
http://socket.io/docs/using-multiple-nodes/
nginxをload balancerに使う場合はip_hashを使ってね。

##めでたしめでたし
というわけで、複数nodeでload balanceすることができました。

#と、いうわけはなく
ip_hashってproxyとかでNATされたアドレスが同じだと分散されないんじゃないの？と思ったら案の定でして。
http://nginx.org/en/docs/http/ngx_http_upstream_module.html#ip_hash
**IP先頭3オクテットでやるよ！**
って書いてあるのです。ってことは

192.168.0.xxx - 1号機
192.168.1.xxx - 2号機

なんていうレベルでしか分散されないわけです。
**1大企業からの大量アクセスは全て同じサーバーに割り振られます。って、それは負荷分散になってない！**

##sticky機能
となると、sticky機能を使うという選択になってきます。cookieなどの方法で割り振ることができるようになりますnginx Plusならな！
https://www.nginx.com/products/session-persistence/

##金がない場合
もちろん、お金がある場合はサポートも受けられるのでnginx plusを買ったほうが良いです。でも、お金がなければ仕方がない。OSSの同様なnginx moduleを利用させていただきましょう。
https://bitbucket.org/nginx-goodies/nginx-sticky-module-ng
作者さんありがとう！

##めでたし、めでたし
というわけで、今度こそ分散されて幸せになれたのでした（まる）
PhpStorm で PHPUnit を動かすために phar ファイルを指定したけどエラーになる

http://stackoverflow.com/questions/23450888/phpunit-run-problems-in-phpstorm-cannot-create-phar

PhpStorm > preference > Languages & Frameworks > PHP > PHPUnit に 設定をするが、
path to phpunit.phar で phar へのパスを設定するとき、指定するファイルの拡張子が .phar になっていないと怒られる

現在公式推薦のインストール方法が

```
wget https://phar.phpunit.de/phpunit.phar
chmod +x phpunit.phar
mv phpunit.phar /usr/local/bin/phpunit
phpunit --version
```

と、コピー先で拡張子を消すようになっているので、ハマる人いそう
inline-block 要素周りの隙間をハックしないで解決したい

したかったが、未解決で保留しているという記事です。

## 最初

この HTML だと：

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .items {
        background-color: blue;
      } 
      .item {
        display: inline-block;
        width: 20%;
        background-color: red;
      } 
    </style>
  </head>
  <body> 
    <div class="items">
      <span class="item">foo</span>
      <span class="item">bar</span>
    </div>
  </body>
</html>
```

こうなる：

![d7a427e6.png](https://qiita-image-store.s3.amazonaws.com/0/12017/2f1691e0-2928-d595-30ef-3d2659e7f873.png)


## 要素間の隙間

間の隙間は、改行文字が混入されているためだったので、

span 間の改行をなくせば：

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .items {
        background-color: blue;
      } 
      .item {
        display: inline-block;
        width: 20%;
        background-color: red;
      } 
    </style>
  </head>
  <body> 
    <div class="items">
      <span class="item">foo</span><span class="item">bar</span>
    </div>
  </body>
</html>
```

埋まる：

![bad72a64.png](https://qiita-image-store.s3.amazonaws.com/0/12017/f3d74030-7636-c057-0fac-26a5346c1678.png)



## 上下間の隙間

解決かに思えましたが、親要素の縦幅が子要素の縦幅に追随していなく、

こう書くと：

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .items {
        background-color: blue;
      } 
      .item {
        display: inline-block;
        width: 20%;
        background-color: red;
        /* 増やした */
        height: 16px;
      } 
    </style>
  </head>
  <body> 
    <div class="items">
      <span class="item">foo</span><span class="item">bar</span>
    </div>
  </body>
</html>
```

こんな様に、上下に隙間ができる：

![1fcc23b8.png](https://qiita-image-store.s3.amazonaws.com/0/12017/75d0b7c0-d8ab-6e3c-4bb7-033e1096607a.png)

一応、 `line-height: 16px;` を指定してみた場合：

![e0ec0683.png](https://qiita-image-store.s3.amazonaws.com/0/12017/7370a5cb-7c16-77dc-cf81-93118c5f020c.png)


## 試したことや疑問など

### 改行文字が混入しているのでは？

親子要素のHTMLをこの様に書いてみましたが、変わらず。

```html
<body><div class="items"><span class="item">foo</span><span class="item">bar</span></div></body>
```

というより、

- block 要素と inline-block 要素の間の改行文字
- inline-block 要素と inline 要素の間の改行文字

の取り扱いって、どうなるのだろう？

### vertical-align の問題？

隙間に関しては、特に変わらないみたい。
複数のAWSアカウント管理＋


先週こんな記事を書いたんですが、CIに関する部分が抜けてたのでこっちで追記版を記載します。

[複数のAWSアカウント管理](http://yoshidashingo.hatenablog.com/entry/2015/12/11/164217)

# AWSの複数アカウントを簡単にセキュアに管理し、利用する
CIに関する部分も追加してあります。

![plus.png](https://qiita-image-store.s3.amazonaws.com/0/11653/0218eb0e-3448-8fb8-aa8e-f943a7e8b912.png "plus.png")


# 請求を一括管理（Consolidated Billing）
- 請求はProdアカウントで一括管理します。

[複数のAWSアカウントの利用料金を代表1アカウントで支払う「Consolidated Billing」の設定方法](http://qiita.com/yoshidashingo/items/e0037c76ac21e877e2a4)

# Rootアカウントはほぼ使わない
- コンソールログインにバーチャルMFA（Authy）を設定します。
- APIでアクセス可能なセキュリティクレデンシャル（アクセスキーとシークレットキー）は発行しません。

[AWSアカウント作ったらこれだけはやっとけ！IAMユーザーとAuthyを使ったMFAで2段階認証](http://qiita.com/yoshidashingo/items/cd206daca0596659b440)

# CIでのデプロイに使う IAM User
- Rootやコンソールユーザーとは別に IAM User を作成します。
- セキュリティクレデンシャル（アクセスキーとシークレットキー）はデプロイする内容に応じて必要な範囲のみ権限を開けます。
- この IAM Usr は `password=no` でコンソールにログインできないようにしておきます。
- 注意点として、たとえば CircleCI だと、ひとつのリポジトリに設定できるAWSのクレデンシャルはひとつ（ブランチごとにデプロイ先を分けても、それはすべて同一アカウント内というユースケースなのだと思う）なので、ブランチごとにクレデンシャルを切り替えて使うようにひとひねりしてあげる必要があります。

## CircleCIでブランチごとのデプロイ先を別々のAWSアカウントに切り替える
例として、hugoなどの静的サイトジェネレーターで生成したhtmlを、AWS CLIでS3にデプロイするとしたら以下のような感じになります。
どこにどういうツールでデプロイするかによって、使うツールなどは変わってくるので、そこらへんは別途色々書きたいと思います。

- 本番アカウントのCIユーザーのクレデンシャルを「リポジトリ > AWS Permissions」に登録しておく
- ステージング、開発アカウントのCIユーザーのクレデンシャルは「リポジトリ > Environment variables」に個別登録しておき、デプロイ時に参照し、profileに追加して使う
	- 以下のcircle.ymlではステージングアカウントのキーが環境変数 `STGAWSKEY` `STGAWSSECRET` 、開発アカウントのキーが環境変数 `DEVAWSKEY` `DEVAWSSECRET` に登録されていることを前提にしてます。

```circle.yml
machine:
  timezone: Asia/Tokyo

dependencies:
  override:
    - sudo pip install awscli
  post:
    - aws configure set region ap-northeast-1

deployment:
  production:
    branch: master
    commands:
      - aws s3 sync public/ s3://sec9.co.jp/ --delete
  staging:
    branch: staging
    commands:
      - echo "[staging]" >> ~/.aws/credentials
      - echo "aws_access_key_id="$STGAWSKEY >> ~/.aws/credentials
      - echo "aws_secret_access_key="$STGAWSSECRET >> ~/.aws/credentials
      - echo "region=ap-northeast-1" >> ~/.aws/credentials
      - aws s3 sync public/ s3://stg.sec9.co.jp/ --delete --profile staging
  development:
    branch: development
    commands:
      - echo "[development]" >> ~/.aws/credentials
      - echo "aws_access_key_id="$DEVAWSKEY >> ~/.aws/credentials
      - echo "aws_secret_access_key="$DEVAWSSECRET >> ~/.aws/credentials
      - echo "region=ap-northeast-1" >> ~/.aws/credentials
      - aws s3 sync public/ s3://dev.sec9.co.jp/ --delete --profile development
```

<b>正直言うともうちょっといい方法ないかなというアイデア募集中</b>


# コンソールを利用するユーザーは IAM User か クロスアカウントでSwitchしたRole 
- 本番アカウントで IAM User を発行し、本番アカウント以外ではクロスアカウントアクセスの Role を作成しておきます。

[Swith Roleで複数のAWSアカウント間を切替える](http://qiita.com/yoshidashingo/items/d13a9b17f111d5d91a2e)


# まとめ
- 今回もこの記事は「小規模に複数アカウントを運用するとき」にいかに簡易によりセキュアに管理できるかなと考えた内容なので、運用する規模によってベスト・プラクティスは変わるでしょうし、そんなこと色々考えるのも楽しいですね。
MySQL: REPLACEは未指定フィールドがNULLに置き換わるのでON DUPLICATE KEY UPDATEを使う

MySQLの`REPLACE`構文は未指定のフィールドが`NULL`に置き換わる仕様なので、全フィールドの値を指定するか、一部だけ指定したい場合は、`ON DUPLICATE KEY UPDATE`を使うといい。

## 検証用テーブル

Nullableなカラムを2つ以上持つテーブルを用意する。

```sql
CREATE TABLE `mytable` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `foo` varchar(255) DEFAULT NULL,
  `bar` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```

## 検証

片方ずつREPLACEしてみる。

```sql

-- fooのみセットしてINSERTまたはUPDATE
REPLACE INTO mytable (`id`, `foo`) VALUES (1, 'foo');

-- barのみセットしてINSERTまたはUPDATE
REPLACE INTO mytable (`id`, `bar`) VALUES (1, 'bar');

-- この段階でfooはNULLに変化してしまう…
```

今度は`ON DUPLICATE KEY UPDATE`を使って片方ずつ更新してみる。

```sql
-- fooのみセットしてINSERTまたはUPDATE
INSERT INTO mytable (`id`, `foo`) VALUES (2, 'foo') ON DUPLICATE KEY UPDATE `foo` = 'foo';


-- barのみセットしてINSERTまたはUPDATE
INSERT INTO mytable (`id`, `bar`) VALUES (2, 'bar') ON DUPLICATE KEY UPDATE `bar` = 'bar';

-- fooもbarも値が入った状態になる
```
閑話休題

##ジーズ プチトリビア##

サプライズ発表は19日の忘年会でやる事にしたので、今日は勝手ながら閑話休題。

みなさん、「ジーズアカデミー」という学校名の由来は知ってましたか？

GEEK
GENERATOR
GLOBAL SIGHTSEEING
GROWTH HACKER
GAME DEVELOPPER

という、ジーズアカデミーが育てたい人材像の頭文字でもありますが、同時に、
"Gee！"（すげぇ！）
という驚きの意味も込めています。

毎回の授業冒頭での発表はまさに毎回が"Gee！"だと思いますが、ジーズはそういう授業にしよう！という思いを込めました。

名前は最後の最後まで悩みましたが、名付け親はデジハリ杉山学長です。

あと、トヨタが同時期にG'sというブランド名を出して驚きましたが、商標はバッチリ持ってますので心配無用です。笑

ではまた19日に！
R MarkdownでBootstrapのLabels機能を使う

## この記事の目的
私が大好きなRMarkdownについて、Tipsを集中的に連載しようという思いつきの企画です。あと自分の中で進めている別企画のメモという位置づけでもあります。なので**大した中身はありません**。

### R Markdownとは
Markdown記法をベースに、チャンクという形でRのコードを記述して評価・出力することができるものです。RStudioのクイックリファレンスでは以下のように説明してあります:

> R Markdown is an easy-to-write plain text format for creating dynamic documents and reports. 

## R MarkdownにはBootstrapが組み込まれている

色々なところで触れられていますが、R MarkdownにはBootstrapが組み込まれています。具体的には`Bootstrap.css`と`Bootstrap.js`が組み込まれていて、各種テーマ・機能が利用可能です[^1]。この辺りの流れについては、[こちらの記事](http://qiita.com/kazutan/items/27aaf29d09d4ddb1b80f)をご覧ください。

[^1]: 正確にはそれ以外の書式なども組み込まれているため、たまに打ち消されてしまっているのもあります。このため使える機能と使えない機能があります。

## BootstrapのLabelsを使ってみる

さて、Bootstrapのテーマでよく見るものとして、Labels機能があります。Bootstrap公式によると、[こうすれば](http://getbootstrap.com/components/#labels)組み込めるそうです。簡単そうです。

というわけで、R Markdownでこれを使うには、以下のようにすればOKです:

```
ほげほげ<span class="label label-default">New!!</span>

ほげほげ<span class="label label-primary">Primary</span>

ほげほげ<span class="label label-success">Success</span>

ほげほげ<span class="label label-info">Info</span>

ほげほげ<span class="label label-warning">Warning</span>

ほげほげ<span class="label label-danger">Danger</span>
```

仕上がりについては、ぜひ手元の環境で試してみてください。

ようするに、ラベル化したいテキストを、上述のように`<span class="label label-*">`で指定するとOKです。html直打ちを避ける手段を考えましたが、多分そこを工夫するよりも素直に直打ちしたほうがコストが少ないと判断しました。

Enjoy!
kimonoでページクロールしてRで傾向をグラフ化する

# はじめに
[Hamee Advent Calendar 2015](http://qiita.com/advent-calendar/2015/hamee) 14日目の記事です。
ブラウザ画面上からAPIが作れるらしい[kimono](https://www.kimonolabs.com/)を触りたいと思ってました。
これでページデータ取得して、そのデータをプロットしてみます。

# 対象

記事を評価できる値が取れれば何でも良いので、今回は[Neverまとめ](http://matome.naver.jp/)の各記事のビュー数を見て、ビュー数の傾向を視覚化してみます。
延々と記事のビューが増え続けることもないので、徐々にビューの増加傾向はなまっていく…はず。

| カラム | 内容 |
|:-----------|:------------|
| number| 記事インデックス（上から1,2,...） |
| title | 記事タイトル |
| url | 記事URL |
| view_count | ビュー数 |
| c_time | クロール時間 |


# kimonoによるクロール設定

kimonoアカウントを作成したら、目的のページを開いてkimonoをONにしてGETしたい欲しいパラメータを選択。

![スクリーンショット 2015-12-12 14.53.57.png](https://qiita-image-store.s3.amazonaws.com/0/101173/9209384f-ba02-3581-ba14-f6eebe5b3ec8.png)

選択できたらDoneするとAPIが発行されます。kimonoのクロール設定は最短の15分毎に。

![スクリーンショット 2015-12-12 15.01.44.png](https://qiita-image-store.s3.amazonaws.com/0/101173/1fc8811d-06c7-7c04-31ea-63a540cbb3ab.png)

この時点で、各言語で作成したAPIを叩くためのDocまで発行されます。
Rもありますが今回はPHPで。定期実行させてDBに突っ込みます。数時間待ってみる。

### CrawlHistory

![スクリーンショット 2015-12-12 13.49.30.png](https://qiita-image-store.s3.amazonaws.com/0/101173/12324a9f-8772-5782-ac8c-e0889ba40fb9.png)

クロール履歴。

### DB

![スクリーンショット 2015-12-12 13.30.36.png](https://qiita-image-store.s3.amazonaws.com/0/101173/6b7c7100-4f2e-25aa-494f-da5704f40021.png)

時間経過とともに溜まりました。
ページ側の挙動に揺さぶられる部分もあります（同形式の別ページに記事が移動した場合検出しない）。約15分間隔で3日計測し、10回以上のプロットが可能な記事に対してプロットすることにしました。

# データのプロット

Rを用いて、格納したデータを整理してplotしてみます。

```r:data_plot.r
# ライブラリ導入
library("DBI")
library("RMySQL")

db_connect = dbConnect(dbDriver("MySQL"), host="host", dbname="dbname", user="user", password="password")

# レコードの取得
query = "SELECT * FROM never_pickup GROUP BY url ORDER BY c_time;"
result = dbGetQuery(db_connect, query)
# 取得が10回以上の記事URLを獲得
query = "SELECT url FROM (SELECT * FROM never_pickup GROUP BY url) pick GROUP BY pick.url HAVING COUNT(url) >= 10 ORDER BY COUNT(url);"
url_list = as.matrix(dbGetQuery(db_connect, query))
news_count = length(url_list)

# 3*3 9件単位でグラフ化
par(mfrow=c(3,3))
for (i in url_list) {
    one_result = subset(result, url==i)

    # 要素の整頓
    c_date = as.matrix(one_result$c_time)
    c_time = as.POSIXlt(c_date)
    view_count = as.matrix(one_result$view_count)

    # プロット
    plot(c_time, view_count)
}
```

出力例が以下。

![スクリーンショット 2015-12-12 20.56.52.png](https://qiita-image-store.s3.amazonaws.com/0/101173/9b919d3d-deac-9449-7f84-32afac8d693d.png)

## もっと踏み込みたかった部分やメモ

* kimonoはページネーションリンクがあると複数ページまで対象にできるが、今回の対象ページに設置されていなかったので張れず。ただ、対象をポチポチする段階でタグ指定、出力形式の修正も可能な様子なので、無理すれば今回でも隔ページなAPIを作れたかも
* 1APIの対象が複数ページに及ぶとオートクロールの制限がそれに比例して厳しくなってしまう。15分単位クロールできるのは今回のような単一ページ対象の場合のみ
* 徐々にビュー数が減退していくかと思ったが、クロール対象がページTOP20件のみであったため、別ページに移行した際まで継続して検出できていない。ここまで線形な傾向かは怪しい。後続ページまで検出できるともっと見えるかも…
* （恐らく）ビュー数の増加傾向は減退していくと考えられるため、モデル方程式などに当てはめて予測できると良さそう。パンデミックモデルの[SIRモデル](https://ja.wikipedia.org/wiki/SIR%E3%83%A2%E3%83%87%E3%83%AB)とか。
* そうでなくても回帰分析で予測することもできそう。

## 参考にしたもの

kimonoの使い方 基礎編
http://qiita.com/her0m31/items/b844ff74a9d488c9dc81

R言語とMysql
http://qiita.com/pollseed/items/e1abd142eb452c31e720
iOSでHTTPSのAPIにアクセスできない。 ATS(App Transport Security)

#ATS(App Transport Security)

HTTPSのサーバーのiOS9以上からアクセスするとエラーになる。

Appleの仕様に準拠したSSLを使用しているサーバーであれば
エラーは発生しません。

対処方法：

XCodeで対象のサーバーをATSの例外に追加します。

ターミナルを開いて下記のコマンドを入力するとinfo.plistに設定するkeyが表示されます。
下記コマンドはSSLで接続を試行し、接続できた通信プロトコルのときPASSと表示します。

"nscurl --ats-diagnostics --verbose https://XXXXXXXXドメイン"

ターミナルに表示される、PASSしたkeyの値をXcodeでinfo.plistに追加します。

NSAppTransporSecurity (TypeはDictionary)
 XXXXドメイン (TypeはDictionary)
  NSExceptionDomain (TypeはDictionary)
   NSAllowArbitlaryLoads (TypeはBoolean) YES

登録したXXXXドメインのAPIと通信できるようになります。

※複数のドメインを登録する場合は、XXXXドメイン以下を繰り返します。
AWS LambdaとIFTTTでお手軽にpush通知を実現する

ひさびさにIFTTTをいじってたら、[Maker Channel](https://ifttt.com/maker)ができたことを知ったので、AWS LambdaとIFTTTでpush通知を実現してみた。
今回は単純に `Hello from Lambda!` をLambda->IFTTT経由で通知させてみる。

Maker ChannelはWebhookURLを提供してくれるので、そこにGETかPOSTでリクエストをするとトリガーとなってくれる。
## IFTTT側の設定

![Recipe_31042250_-_IFTTT.png](https://qiita-image-store.s3.amazonaws.com/0/19035/1e0e54a9-15ef-396f-36f5-f253ead2c444.png)

1. https://ifttt.com/maker でSecretKeyを取得する
2. Trigger(this)を「Maker」、Action(that)を「IF Notifications」でRecipeを作る
    - このとき入力したevent nameはWebhookURLの一部になる
3. RecipeのNotification(push通知内容)に `{{Value1}}` を入力して保存する

## Lambda(Node.js)のコード

https://github.com/kawahiro311/aws-lambda2ifttt

```js
console.log('Loading function');

var https = require('https');

var iftttEventName = 'sample_lambda_event'; // IFTTTで作ったRecipeのEventName
var iftttSecretKey = 'YOUR SECRET KEY'; // MakerChannelのSecretKey

var body = JSON.stringify({ value1: 'Hello from Lambda!' });

var options = {
    hostname: 'maker.ifttt.com',
    path: '/trigger/'
        + iftttEventName
        + '/with/key/'
        + iftttSecretKey,
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Content-Length': body.length
    }
};

exports.handler = function(event, context) {
    https.request(options, function (res) {
        res.setEncoding('utf8');
        res.on('data', function(str) {
            console.log(str);
        });
        context.succeed(res.statusCode);
    }).write(body);
};
```

### 注意点

IFTTTに渡せる変数は `value1` `value2` `value3` のみなので注意
    
## 実際のpush通知キャプチャ

![写真 2015-12-13 19 22 23.png](https://qiita-image-store.s3.amazonaws.com/0/19035/195bd91c-7bc9-ac97-d231-0f7c8cc64123.png)

## まとめ

IFTTTのMakerChannel便利！
今回は決まった文字列を通知させただけだったのでLambdaである必要性はないですが、イベントと連動して何かを通知させるのもいいし、Lambdaがcron対応したので凝ったリマインダーみたいのも作れていろいろ有用そうー

## ひとりごと

LambdaのRuby対応はやくこないかなー(´・ω・｀)
ReactNativeでupdateに備えつつindex.*.jsファイルをgitignoreする

現在のところReactNativeはとても開発が速いので（月に2度ぐらいバージョンアップがある）アプリケーションコードをフレッシュに保つのが結構大変です。RNが生成したテンプレートファイルなどに手を加えていると、毎回再生成してmergeする必要があるので、なるべくそれらに手を加えず、編集するファイルは分けてしまいたいところです。

ところで、`.gitignore`もそんなファイルの一つなのですが、現在のところ自動生成される `index.ios.js`や`index.android.js`は`.gitignore`に入っておらず、`git diff`する度に見つけたい変更がノイズに埋もれて辛い思いをすることになっていました。

`.gitignore`に手を触れずにこれらのファイルをトラッキングから除外するには、`.git/info/exclude` に以下のように記述しておけばokです。

```
/index.*.js
```
Xcodeのバージョンを上げた時、プラグインが効かない問題の対処法

Xcodeのバージョンを上げた時、XVimなどのプラグインが効かなくなるので、その際にやることを書いておきます。今回はXcode7.2(7C68)に上げた時の例です。

## 1. XcodeのUUIDを調べる
XcodeのUUIDを調べます。以下のコマンドをターミナルで実行します。

```
/usr/libexec/PlistBuddy -c 'Print DVTPlugInCompatibilityUUID' "/Applications/Xcode.app/Contents/Info.plist"
```

結果はこんな感じで出力されます。
```
F41BD31E-2683-44B8-AE7F-5F09E919790E
```

XcodeのBeta版を使っている場合は、上のコマンドのパスは/Applications/Xcode-beta.app/...とかになると思います。コピペできるようにフルコマンド書いておきます。

```
// Beta版

/usr/libexec/PlistBuddy -c 'Print DVTPlugInCompatibilityUUID' "/Applications/Xcode-beta.app/Contents/Info.plist"
```

## 2. 調べたUUIDをプラグインのInfo.plistに追記

以下のコマンドをターミナルで実行します。最後のUUIDはステップ1で調べたUUIDです。

```
find ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins -name Info.plist | xargs -IFILE defaults write FILE DVTPlugInCompatibilityUUIDs -array-add F41BD31E-2683-44B8-AE7F-5F09E919790E
```

これで準備完了です。Xcodeを再起動します。
以下のアラートが出たら成功です。間違えずに、左の「Load Bundles」を押しましょう！

![スクリーンショット 2015-12-14 11.02.44.png](https://qiita-image-store.s3.amazonaws.com/0/41667/43e3b78f-a95d-b971-5790-2ecece2ade65.png)
[Ruby] rbenvをupdateしてrubyをアップデートする

# 環境

- MacOSX Yosemite

# 手順

## 全体

```rb
$ brew update
$ brew upgrade ruby-build
$ rbenv install -l # インストール可能なバージョンを確認
$ rbenv install 2.2.3 # ↑で表示されたリストの中から選択
$ rbenv global 2.2.3
$ rbenv versions # 設定結果を確認
```

bundlerをつかっている場合は、2.2.3用に入れなおしておくといいです。

```rb
$ gem update bundler # いらない？
$ gem install bundler
```

## プロジェクトごと

以下をプロジェクトのルートディレクトリで

```rb
$rbenv local 2.2.3 # 好きなバージョンを指定

$ bundle install # gemの入れなおし（いらない？）
```
emscriptenでFOSS4Gのススメ（2年ぶり2回目）

kochizufanです。
なんと[2年前の記事](http://qiita.com/kochizufan/items/e6cef37249d48788a512)の焼き直しですが、まだそれほど認知されてないないのと、いくつか実際のプロダクトも出てきたのでそれの紹介していきます。

# 実際の使用例：奈良ハッカソン「ここ掘れワイワイ」プロトタイプ

とりあえず実際の使用例を一つ。
今年の12月奈良で開かれた、JIPDECや奈良女子大、Code for Nara等が主催共催協力したイベント、「[奈良 オープンデータ　ハッカソン／データソン](http://www.jipdec.or.jp/topics/event/20151205-06event.html)」で、私の属したチームが作成した「ここ掘れワイワイ」の[プロトタイプ](http://tilemapjp.github.io/NaraHackathon/hackathon.html)です。
奈良の現代地図と古地図が準備されて、下のタイムラインを切り替えるとある時代より前は古地図に切り替わり、また両地図の中心が同期されて動く、というものになっています[^1]。
[nyampire](http://qiita.com/nyampire)さんに「謎技術」と評していただいたこの実現方法ですが、みんな大好き[gdal](http://www.gdal.org/)のc++によるthinplatespline変換関数を、emscriptenを使ってJavaScriptに変換したものになってます[^2]。
QGISのジオリファレンサー等でも中で動作しているであろうロジックを、そのままJavaScriptに持ってきて、リアルタイムに座標変換を行っているのが、「ここ掘れワイワイ」の実現している事です。

# で、あらためてemscriptenって何

[こちら](http://kripken.github.io/emscripten-site/)で開発されている、c、c++で開発されているコードをJavaScript環境で動く形にコンパイルする技術です。
JavaScript化するといっても、cのfor文をJavaScriptのfor文に変換して...といったものではなく、c/c++をllvmで中間コードにコンパイルし、そのコンパイルされたバイナリロジックを、JavaScriptのTypedArray等を駆使して作られた仮想マシン的なものの上で動くようにするものです。
2年前に紹介して以降、Webブラウザ上で走らせるバイナリ規格のようなものも議論が進んでいて、emscriptenも吐けるasm.js規格等の延長線上に、次世代規格として[WebAssembly](http://qiita.com/KENJU/items/3ec95aebd30bc95b862c)という規格が整ったりもしていますが、これまでの経緯から考えても、WebAssemblyへのコンパイルもemscriptenでできるようになると思われます。
なので、今のうちから覚えておいても損はない技術かなと思います。

# FOSS4Gをemscriptenでコンパイル実例

実際にFOSS4Gをemscriptenでコンパイルしている実例を紹介しますが、数を紹介するよりこれ1つで十分だろみたいなのを1つ...。

[spatiasql.js](https://github.com/jvail/spatiasql.js)

これはすごいです。[proj、geos、sqlite、zlib、spatilaiteを全部emscriptenでコンパイルしてリンク](https://github.com/jvail/spatiasql.js/blob/master/Makefile)してます。
まあ、その分ファイルサイズもでかくて読み込みもデカイですがw。
実際のデモはこんな感じ：[デモ](http://jvail.github.io/spatiasql.js/)
![spatiasql.jsデモ](https://qiita-image-store.s3.amazonaws.com/0/10108/523dcef5-ee64-9542-ef1f-1189813d158f.png)
とりあえずサンプルのspatialiteファイルを読み込んでいるようですが、自分の持っているspatialiteファイルも左下から読み込ませる事ができます。
spatialiteファイルを読み込ませた(or デフォルト)上で、画面上半分の領域に空間検索クエリを入力してやって「run」すれば、右下にクエリ結果がjsonで吐かれ、左下の地図にそのjsonをマッピングしたものが出てきます。
これが全部、ブラウザサイドで動いています。

また、メンテできてませんが拙作も一つ...

[mbtiles.js](https://github.com/tilemapjp/mbtiles.js)

mbtiles仕様のsqliteファイルをクライアントサイドで読み込んで、ブラウザ側で地図タイルとして展開するライブラリです。
小さな地図であれば、タイルサーバを用意しなくても、mbtilesファイルをコロッとした地図提供媒体として、流通させてどこでも展開できます。

[デモ](http://jsfiddle.net/kochizufan/rj4Eh/)

![mbtiles.jsデモ](https://qiita-image-store.s3.amazonaws.com/0/10108/45f70c69-5e03-6675-06f4-a76dc725a4d8.png)

# FOSS4Gがどんどんブラウザサイドコンパイルされればいいな

２年前に引き続き、emscriptenのダイマさせていただきましたが、FOSS4G界隈ではWindows向けコンパイルなどコンパイル/リンクに強い人がたくさんいる印象なので、emscriptenコンパイルにも力を入れてくれて、FOSS4Gがどんどんブラウザサイドにポートされればいいなあ、と思ってます。

[^1]: 何かのサービスに似ている、とか言わない。アイデアは私じゃなく別のハッカソン参加者から出てきたものです。実現するノウハウは私が持ってたので合流しましたが。
[^2]: ベースは[ここ](https://github.com/tilemapjp/ThinPlateSplineJS)で公開してます。今回の適用にあたっては、いろいろ問題が出てきたので手を加えてますが、それはまだ反映できてません。
UnityのiOSプラグインを作成するときに毎回ぐぐってることをメモ((φ(･д･｡)

##テンプレ
```cs:Unity側のテンプレ
using System.Runtime.InteropServices;
class Foo {
  [DllImport ("__Internal")]
  private static extern float FooPluginFunction();
}
```
```mm:Xcode側のテンプレ
extern "C" {
  float FooPluginFunction();
}
```

C# とC++の関数名を一緒にする => プラグイン毎にユニークな名前にしておいた方がいい。
C++の拡張子を.mmにする。
.hファイルは作成しなくても動く。


##やりとりできる型
string <=> char*
string[] <=> char**
int <=> int


##処理関連メモ

char* => NSString

```
[NSString stringWithCString:c encoding:NSUTF8StringEncoding];
```

char* <= NSString

```
(char *) [str UTF8String]
or
strdup([str UTF8String])
```

char** => NSArray


NSMutableArray* mutableArray = [NSMutableArray array];
~~// (sizeof addObject/sizeof addObject[0])で長さが取得できる
for (int i = 0; i < (sizeof addObject/sizeof addObject[0]); ++i) {~~
for (int i = 0; i < length; ++i) {
　　　　[mutableArray addObject:_toNSString(array[i])];
}
※ポインタはサイズの取得方法ができない

UIViewControllerの取得

```
UIViewController *viewController = UnityGetGLViewController();
```

UINavigationControllerの取得

```
UINavigationController *navController = (UINavigationController*)UnityGetGLViewController();
```

Unity側にメッセージを送信する

```
UnitySendMessage("GameObjectName", "MethodName", "message");
```

import系

```
#import <objc/runtime.h> // selector使うときとか
#import <Foundation/Foundation.h> // 基本的なクラスを使うとき
```

##おまけ
[cs 側のコールバックをiOSに設定できるらしい](http://qiita.com/tyfkda/items/dc5da219d22cc55de301)
ただ、AndroidとiOSと挙動を似たような感じにして管理をしやすくしたいのなら、
~~UnitySendMessageを使うのが一番だと思う。~~
※追記2016/01/06
[AndroidJavaRunnable](http://docs.unity3d.com/ScriptReference/AndroidJavaRunnable.html)ってクラスで実現できそうです。
エラー時の備えその1(Clustre Replication / Hot Standby)

v1.3.0RC1から追加されたCluster replication機能の紹介です
![7d4a631b-2e17-abd6-66c1-ff60b4e3e22b.png](https://qiita-image-store.s3.amazonaws.com/0/103558/18779e13-eebe-9e6a-8388-23c5034ffd54.png)

# Cluster Replication
- NOSQL界では色んな意味で使われているCluster replicationですが、複数サーバでclusterを構成して冗長化するいわゆるclustering機能はROMAは初期から持っています
- 今回の機能はHot Standby機能となり、メインのクラスターのレプリカを用意しておくことが出来ます
- エラー時はAPIのアクセス先を切り替えるだけで復旧が可能になります

# レプリカクラスター
- 構成はメインのクラスターと同様にする必要はありません
  - 冗長度を低くしたり、インスタンス数の少ない低コストクラスターをレプリケーションにすることが可能です
- replicaのreplicaというように更に予備を用意しておくことも可能です

# 使用方法
## 1. メインクラスターとレプリカ用のROMAクラスターを立ち上げる  
- 特に追加のconfigの設定等は必要ありません
 
## 2. レプリケーションの開始
### コマンド
`> switch_replication <true|false> [nid] [all]`

- 1番目のオプションでreplicationの開始(true)と停止(false)を指定します
- 2番目のオプション([nid])で、レプリケーション用のクラスター情報を指定します
  - フォーマットは\${address}\_${port No.}です  
  例)`localhost_10001`
  - どれか1instanceだけ指定すればROMA側で自動的にreplica clusterのrouting情報を取得します
- 3番目のオプションのallは既存のデータをコピーするかを指定します
  - allオプションを指定すると、replicationコマンドを実行する前の過去のデータもバックグラウンドでコピーします
  - 指定しなかった場合は、コマンド実行後に変更のあったデータのみreplicationします

### 例

```rb
$ telnet ${address} ${port} # メインクラスターへtelnetでアクセスします
> switch_replication true 192.168.33.99_20001
```
- replication clusterのインスタンスが`192.168.33.99_20001`だった場合

## 3. ステータス確認
statコマンドでreplicationのステータスを確認することが出来ます

```rb
> stat replica
 write-behind.run_replication true # replication機能が実行中かどうかを示します
 write-behind.run_existing_data_replication false # 既存のデータのコピー中であることを占め島s(allオプションをつけた場合のみ)
 write-behind.replica_mklhash b645bba848c7013ec7357963a1b37d4369c11b37
 write-behind.replica_nodelist ["replicaA_11211", "replicaA_11212", "replicaB_11211", "repicaB_11212", "replicaC_112121", "replicaC_11212"] # replicatクラスターのインスタンス情報
 END
```
- replicaクラスターが3server、6instanceで構成していた場合
  - <font color='blue'>replicaA_11211</font>
  - <font color='blue'>replicaA_11212</font>
  - <font color='gren'>replicaB_11211</font>
  - <font color='gren'>replicaB_11212</font>
  - <font color='orange'>replicaC_11211</font>
  - <font color='orange'>replicaC_11212</font>

# 参照URL
ROMA Blog: http://roma-kvs.org/blogs/blog-entry-15.html
c++ builder XE4, 10.2 Tokyo > form design > Formの位置を指定する

```txt:動作確認
C++ Builder XE4
Rad Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

指定の場所にフォームを表示したい場合。

- ~~Position: poDefaultにする~~
    - Position: poDesignedにする
    - poDefaultの場合、フォームの幅、高さが自動的に変わる場合がある
        - [TForm.Position](http://docs.embarcadero.com/products/rad_studio/radstudio2007/RS2007_helpupdates/HUpdate4/JA/html/delphivclwin32/Forms_TForm_Position.html)
- FormShow()で以下のようなコードを実行する

```Unit1.cpp
this->Top = 100;
this->Left = 0;
```

Positions: poScreenCenter 指定では失敗した。

二画面構成でメイン画面の左にあわせたい場合は以下のようにする。

```Unit1.cpp
	int leftPos = Screen->Monitors[0]->Left;

	this->Top = 0;
	this->Left = leftPos;
```
Bonfire: javascriptでfactorializationメモ

またまたFreecodecampのbonfire課題より。

```
/*
Return the factorial of the provided integer.
If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n.
Factorials are often represented with the shorthand notation n!
*/

function factorialize(num) {
  return num;
}

factorialize(5);

```

最初は`if else`と`for loop`を使ってこんな感じで書いていた。

```
function factorialize(num) {
	var count = num;
	if (num === 0) {
		return 1;
	}
	else {
		for (var i = 1; i < count; i++){
			num = num * i;
		}
	}
	return num; //120
}

factorialize(5)
```
処理毎に変数`i`の値を繰り上げていくのだが`num`は処理毎に数値が変わってしまうので別の`placeholder`として`count`を用意。`i`を1から初めて`i === count(5)`になるまで`num = num * 1`と`i++`処理を繰り返して下さいってこと。

```
// こんな感じで行われている

// initially...num = 5, i = 1

5 x 1 = 5 // num = 5, i = 2 < count
5 x 2 = 10 // num = 10, i = 3 < count
10 x 3  = 30 // num = 30, i = 4 < count
30 x 4 = 120 // num = 120, i = 5 = count // stops here

```

その後も色々模索した結果、

```
function factorialize(num) {
  if (num === 0) {
    return 1;
  }
  else {
    return num * factorialize(num -1);
  }
}

factorialize(5); // 120

```
あえて`num * factorialize(num - 1);`とすることで先に`num`全ての値を出してから最後にまとめて掛け合わせる。
`for loop`を消して少しだけシンプルにしてみました。
[HTML5] <input type="file">のデザインをもっと簡単に変更

**`<input type="file">` そのものにはCSSが効かず、スタイルを変更できません。そこで、`<input>` 自体は非表示にし、`<label>` で修飾します。**

# ![](//goo.gl/tuSQrq) サンプルソース

```html:HTML
<style>
label {
  color: white;  
  background-color: red;
  padding: 6px;
  border-radius: 12px;
}
</style>

<label for="file_photo">
	＋写真を選択
	<input type="file" id="file_photo" style="display:none;">
</label>
```

⇒ <a href="http://jsfiddle.net/yasumodev/4utr63eo/" target="_blank">デモソースはこちら</a>


# ![](//goo.gl/tuSQrq) 参考URL

- <a href="http://creator.dena.jp/archives/43699692.html" target="_blank">【HTML,CSS】File inputのデザインを変える超簡単な方法！</a>
- <a href="http://qiita.com/sashimizakana/items/d505dac3394e77250f73" target="_blank">HTMLのinput type="file"を自由な見た目にする</a>
- <a href="http://qiita.com/ituki_b/items/e38ab67a00f66da4e865" target="_blank">input[type=file]をデザイン的になんとかする方法</a>
- <a href="http://qiita.com/shimayu/items/605ecac3eeec50dd4f93" target="_blank">input type="file" のボタンをオリジナルのボタンにする。</a>
stash の内容を patch form で見る


`git stash show -p [<stash>]` する

## 補足

`man git-stash` すると

```
how [<stash>]
           Show the changes recorded in the stash as a diff between the stashed state and its original parent. When no <stash> is given, shows the latest one. By default, the command shows the diffstat, but it will accept any format known to
           git diff (e.g., git stash show -p stash@{1} to view the second most recent stash in patch form).
```

と書かれていた。
Githubのmarkdownででかい画像のサイズを調整するには

tableを使えばよい！（ただし複数画像に限る）

```
![](http://cdn-ak.f.st-hatena.com/images/fotolife/c/chezou/20151205/20151205171506.jpg)
```

こうやって書くと

![](http://cdn-ak.f.st-hatena.com/images/fotolife/c/chezou/20151205/20151205171506.jpg)

でかい画像も、tableに入れると

```
|表紙|中面1|
|---|---|
|![](http://cdn-ak.f.st-hatena.com/images/fotolife/c/chezou/20151205/20151205171506.jpg)|![](http://cdn-ak.f.st-hatena.com/images/fotolife/c/chezou/20151205/20151205171532.jpg)|
```

|表紙|中面1|
|---|---|
|![](http://cdn-ak.f.st-hatena.com/images/fotolife/c/chezou/20151205/20151205171506.jpg)|![](http://cdn-ak.f.st-hatena.com/images/fotolife/c/chezou/20151205/20151205171532.jpg)|

ほら、いい感じに小さくなるでしょ！
特にiOSとかで撮ったスクリーンショットのサイズがでかくてだるい時におすすめです。
「昔からWebを知っている人には当たり前でしょ」とか言われたのですが、知らなかった僕にはライフチェンジング！
TensorFlowを理解するための基礎情報共有（４）

前回はTensorFlow.org掲載の「GET STARTED」をテンソル版に拡張した例を用いて行った学習過程および結果のデータをTensorBoardで可視化して機械の学習の様子を見てみました。

　前回　http://qiita.com/MATS_ELB/items/e5761be146a400586392

今回は「精度の高い学習」について哲学的に考えます。
ほぼ「閑話休題」レベルの話です。

我々が生活している地面について「東経○○度、北緯○○度は標高○○メートル」という実際の計測データを集めて、「それなら、行ったこと無いけど、１００メートル向こうは標高○○メートルだろう」と推測するモデルを機械学習で作る作業を考えた場合、推測の精度を考える上でいくつかの疑問が浮かびます。

　疑問１：実測データ（＝学習データ）はどれぐらいの数を集めれば良いのか？
　疑問２：計測するポイントの間隔はどれぐらいの距離が適切なのか？

つまり、ホントに正確な標高を推測したければ１ミリ間隔で標高を計測して膨大な学習データを用意していけばいいわけで、そうなるとわざわざ推測モデルを作ることに意味あるの？実際に計測しまくればいいんじゃない？となりそうです。逆に、１０メートル間隔で標高を計測していった場合、道路にあるマンホールのように１カ所だけ急激に標高が変化する場所を見落としてしまうのではということになります。と考えると、そもそもこの推測モデルは誰が何のために使うんだったっけ？という話になりそうです。象の地図に使うのであれば数十センチの段差は気にもならないでしょうし、蟻の地図に使うのであれば数センチの段差も大事な情報でしょう。使用目的によって適切な尺度というのがありそうです。

余談ですが、アラブの遊牧民達はラクダの呼び方について年齢や性別からはじまり「水を飲んでいるラクダ」「寝ているラクダ」「草を食べているラクダ」などラクダの状況によって異なる呼称を持っています。我々と異なり、彼らの生活はラクダと密接な関係にありますから、その分だけラクダを認識する尺度が繊細なのでしょう。彼らに対して我々の感覚で「ラクダとヤギを判別するシステム」を提供したとしても「どの状態のラクダかまで判別できないと困る」といわれるかもしれません。

ということで、機械学習の精度については使用目的によって適切な尺度を考慮することが大事なようですが、皮肉なことにこの「適切」は人間が判断するしかないのでしょうか？それとも、機械学習によって「このユーザーはこのレベルの違いには関心無いな」などと自動で調節するようになるのでしょうか？現時点での機械学習に対する一般的な認識を総括すると「できるだけ多くのデータを持っている方が有利」との傾向が感じられます。しかし、これは一昔前に「できるだけ多くのメールアドレスを持っている方が広告配信に有利」といわれていた状態に似ている気がします。結果として、多くの人々はメールで送られる広告に見向きもしなくなりました。闇雲にデータ量に依存するのではなく、「目的に叶った適切さか」を見極める「チューニング力」が我々に求められているのではと思います。

次回はTensorFlowの技術的な話に戻ります。皆さんからのアドバイス・ご意見をいただきたく。

　続編はこちらへ　http://qiita.com/MATS_ELB/items/db85de80c72be28fc60b
Ansible の Azure モジュールについて



パラメータと使い方をメモしています。（version 2.0.0）
Azure も含めての利用方法はこちら [Ansible で Azure 上にプロビジョニング！](http://qiita.com/tksarah/items/abd2ba0c7c51c54c35e9)

# Inventory

```ini:インベントリ（hosts）
127.0.0.1 ansible_connection=local
```

# Playbook

```yaml:プレイブック（playbook.yml）
---
- hosts: localhost
  gather_facts: no

  tasks:
  - name: Create Virtual Machine on Azure (for Windows)
    azure: 
      auto_updates: no  
      enable_winrm: yes
      endpoints: "3389" # 
      image: 'bd507d3a70934695bc2128e3e5a255ba__RightImage-Windows-2012R2-x64-v14.2'
      location: 'Japan West'
      management_cert_path: /home/vagrant/azure/manage.cer
      hostname: hogehoge
      name: hogehoge
      os_type: windows
      user: azureuser
      password: "Password_123"
      role_size: Basic_A2
      state: present
      storage_account:
      subscription_id:
```

# Azure モジュール

## Python Azure モジュール用意
Ansible で用意されている Azure モジュールは以下の環境でサポート。

* Pyhon >= 2.6
* Python azure module >= 0.8.0 （Ansible マニュアルは少し古い情報）

追加で Python の Azure モジュールをインストールしておく。

## Ansible Azure モジュールパラメータ
以下は、必須および指定しておいたほうが良いパラメータを**Bold**としている。

* auto_update
  * 自動アップデートの有無
* **enable_winrm**
  * winrm の有効化（これは基本的に yes 、デフォルトも yes）
* **endpoints**
  * 外から仮想マシンへアクセス可能にするTCPポートを指定（カンマで複数可能、デフォルト
  * パブリックとプライベートで同じポート番号になる
* **hostname**
  * /etc/hostname に書かれる、<name>.cloudapp.net の name 部
* **image**
  * 仮想マシンのイメージIDを指定（Azure CLI にて ```azure vm image list``` で確認可能）
* **location**
  * 仮想マシンを稼働させるロケーション指定（Azure CLI にて ```azure vm location list``` で確認可能）
* **management_cert_path**
  * 管理証明書のパスを指定（環境変数 AZURE_CERT_PATH で指定することも可能）
* **name**
  * 仮想マシンと関連するクラウドサービスの名前を指定
* **os_type**
  * OSタイプ windows or linux
* password
  * Linux 仮想マシンのパスワード
* reset_pass_atlogon
  * Windows 仮想マシンへ最初のログインの際に管理者バスワードをリセットするか否か
  * <font color="red">ResetPasswordOnFirstLogon パラメータは廃止されているため利用不可</font> （[Fixed](https://github.com/ansible/ansible-modules-core/pull/2711)）
* **role_size**
  * 仮想マシンのスペック（[ここで確認](https://azure.microsoft.com/ja-jp/documentation/articles/virtual-machines-command-line-tools/)）
* ssh_cert_path
  * 仮想マシンにインストールするためのSSH公開鍵を含むX509証明書のパスを指定
* **state**
  * 仮想マシンを作るのか消すか（デフォルトは present）
* **storage_account**
  * Azure のストレージアカウント名
* **subscription_id**
  * Azure のサブスクリプションID（環境変数 AZURE_SUBSCRIPTION_ID で指定することも可能）
* user
  * Linux 仮想マシンのユーザ名
* virtual_network_name
  * 仮想ネットワーク名
* wait
  * Running 状態になるまでに待つか否か
* wait_timeout
  * どのくらい待つか（秒、デフォルトは600）
* wait_timeout_redirects
  * リダイレクトのためにどのくらい待つか（秒、デフォルトは300）


# Ansible 実行

```shell-session
$ ansible-playbook -i hosts playbook.yml 
```

# 参考

* マニュアルページ：http://docs.ansible.com/ansible/azure_module.html
jackson用msgpackライブラリを差し替えてみたらエラーに遭遇

org.msgpackから提供されているjackson-dataformat-msgpack。
これは以前komamitsuさんが開発していたものが公式に統合されたとのこと。（もちろん今でも開発には関わっておられる様子）

情報を追いかけていなかったため、対応が遅くなったがライブラリの差し替えを行う。

まず行ったこと。
#### build.gradleの編集
これは https://github.com/msgpack/msgpack-java/tree/v07-develop/msgpack-jackson の記述に沿う

#### import文を編集
```java
import org.msgpack.jackson.dataformat.msgpack.MessagePackFactory;
```
を、次のように修正。

```java
import org.msgpack.jackson.dataformat.MessagePackFactory;
```

たいていのケースにおいて、おそらくこれらの修正だけで問題がないはず。

ただ私の場合はあるエラーが出たためコードを修正することになった。
エラーが出たパターンは次の使い方。

```java
ObjectMapper objectMapper = new ObjectMapper(new MessagePackFactory());
System.out.println(objectMapper.writeValueAsString(person));
```

要するに最終的な出力としてはmsgpackを扱うのだが、内容確認のためにJSONスタイルでデバッグ用出力を行う使い方をしていた箇所がアウト。
msgpackはbyte列での入出力を行うものなので論理的に考えると不思議ではない。
以前は使えていたが公式統合にあたって仕様として曖昧な処理はすぱっと切ったと思われる。
この使い方はあきらめることにした。
ただ個人的には利便性が下がったかなとも思う。もちろんクリティカルな内容ではないのであまり気にしないことにする。
【ChatDeTornado】TornadoでWebSocketを使ってチャットを作る

# はじめに
今回はPython製のWebサーバ&WebフレームワークであるTornadoを使ってチャットを作ってみます。Tornadoを使う理由は、デフォルトでWebSocketに対応しているため、リアルタイムのサービスを作りやすいからです。

# 使うもの
使うものは以下の２つです。

* Tornado
* jquery.ui.chatbox

サーバサイドにTornado、クライアントサイドにjquery.ui.chatboxを使います。jquery.ui.chatboxを使うと比較的楽にチャットを作れます。

# コード
サーバサイドでメインの処理をしているのは以下のコード。waitersとmessagesに接続している人と送られてきたメッセージを記録しています。

```py
class ChatHandler(tornado.websocket.WebSocketHandler):

    waiters = set()
    logs = []

    def open(self, *args, **kwargs):
        self.waiters.add(self)
        self.write_message({'logs': self.logs})

    def on_message(self, message):
        message = json.loads(message)
        self.logs.append(message)
        for waiter in self.waiters:
            if waiter == self:
                continue
            waiter.write_message({'img_path': message['img_path'], 'message': message['message']})

    def on_close(self):
        self.waiters.remove(self)
```

**open**メソッドでは接続してきた人の登録と、その人に対して今までのログを送信します。

**on_message**メソッドでは、メッセージが送られてきたときに送られてきたメッセージを自分以外の参加者にブロードキャストします。また、このとき送られてきたメッセージはログに追加しておきます。

**on_close**メソッドでは、接続が切断されたときにwaitersから接続者を削除します。これにより、切断された人にはメッセージをブロードキャストしないようにしています。

# 完成品
以下が完成品です。１時間くらいで作ったやっつけですが、ちゃんと動きます。上部のバーをクリックすることで、チャット画面の開閉を行えるのが特徴です。
![スクリーンショット 2015-12-14 0.17.43.png](https://qiita-image-store.s3.amazonaws.com/0/77079/edc04f76-bd77-48df-0f5d-21cc831e1130.png)

# サンプルコード
サンプルコードは以下のリンクからどうぞ。

* [サンプルコード](https://github.com/Hironsan/ChatDeTornado)

# おわりに
今回はTornadoを使ってチャットアプリを作ってみました。Pythonでちょっとしたリアルタイムのアプリケーションを作成したい場合はTornadoを使うといいと思います。
chromeの検索エンジンにevernoteを追加

chromeの検索エンジンにEvernoteのブラウザ版の検索URLを追加した。

    https://www.evernote.com/Home.action#ses=1&sh=5&sds=3&x=%s&

こんな感じになる。

![evernote_search.png](https://qiita-image-store.s3.amazonaws.com/0/55718/025f6251-dda7-179b-2c34-453b6a212a06.png)

Evernoteにいろいろ集約してるのに、むしろ何故いままで登録してなかったんだろう。
【RiotJS】preventUpdate を使いこなせ！


今回ご紹介するのは preventUpdate という riot 独自のイベントパラメーター。

```html
<todo>
	<input type="text" name="new">
	<input type="button" value="add" onclick={add}>
	
	<ul>
		<li each={text, i in list}>{text}</li>
	</ul>

	<script>
		this.list = [];
		
		add() {
			this.list.push(this.new.value);
		}
	</script>
</todo>

```

こちらのinputの文字列をひたすらリストにしていくやつを例に使います。

これ、動きます（そりゃそうでしょうが）。

ただ、ここで疑問がわくわけです。

### いつアップデート（再描画）されたんだ？？

描画を再更新するのは
明示的に自身の ``update`` 関数を発火させるか、親が ``update`` されたタイミングです。
ですが、上記のサンプルでは ``update`` 関数も発火してなければ、親でもありません（上記はrootの想定です）。

ではどこで呼ばれたのか。

### 答えは onclick イベントです

riotでは上記のように ``on***`` でDOMイベントを設定できますが
通常の ``addEventListener`` を用いて自身でイベントを設定した場合とここが異なります。

ためしに、テンプレート内でonclickを用いず、自前でイベントを設定したものをかいてみましょう。

```html
<todo>
	<input type="text" name="new">
	<input type="button" name="btn_add" value="add">
	
	<ul>
		<li each={text, i in list}>{text}</li>
	</ul>

	<script>
		this.list = [];
		
		add() {
			this.list.push(this.new.value);
			this.update();
		}
		
		this.on('mount', function () {
			this.btn_add.addEventListener('click', this.add, false);
		});
		
		this.on('unmount', function () {
			this.btn_add.removeEventListener('click', this.add, false);
		});
	</script>
</todo>

```


``mount``時と``unmount``時にイベントの処理を書いた以外で変更したのは、``add``関数で明示的に``update``を発火させている点です。

これ、``update``を発火させないといつまで経っても再描画されません（リストが増えていきません）。

これが、DOMイベントをテンプレート内で設定した場合と、自前で設定した場合の大きな違いです。

そして、テンプレートに描いたほうがコード量も減るし、イベントのremove忘れもなくなるし、いいことづくめだ！　と思うのですが、ここでさらに疑問がわきます。

### 毎回 update が発火しちゃうの？？

勝手に更新されてうれしい時もあれば、無駄に毎回updateされたら困る場合も多々あります。
例えば mousemove とか resize とか 発火回数が多いイベントならなおのこと。
再描画が頻発するとパフォーマンスにも影響してきます。

そこで登場するのがお待ちかね **preventUpdate** です。

使い方は簡単。

```js
add(e) {
    e.preventUpdate = true;
    // something to do
}
```

これだけ。
気をつけなければいけないのは、おなじみ ``preventDefault`` が関数なのに対して
``preventUpdate`` はプロパティなので、くれぐれも ``e.preventUpdate()`` としないように。

これをすることで ``update`` が発火されなくなります。
大量に発生するイベントや、イベント発生とは非同期で update を発火させたい場合に活用していきましょう。
Qiita記事タイトルの背景色を消してみた

## 消してみた

* Qiitaはタイトル背景色がインパクトあるので遠目ですぐわかりますよね。
    * [Stylish](https://addons.mozilla.org/ja/firefox/addon/stylish/)で消してみた。

![normal.png](https://qiita-image-store.s3.amazonaws.com/0/25728/f1f982c1-cdc2-0b17-1d78-b2f8198f1b31.png)

![adcal.png](https://qiita-image-store.s3.amazonaws.com/0/25728/bafba5d7-3dee-de2b-f1d3-7a9f297c3e5e.png)

## Firefox の stylishで以下カスタムCSSをコピペ

```css:
/* Qiita Title START */
.itemsShowHeader {
  background-color: white;
}
.itemsShowHeader,
.itemsShowHeaderTitle_status,
.itemsShowHeaderTitle_status li a:link,
.itemsShowHeaderStock_countText {
  color: black;
}
/* Qiita Title END */


/* Qiita Advent Calendar START */
.itemsShowHeader-adcalItem {
  background-color: white;
  color: black;
}
/* Qiita Advent Calendar END */

/* Qiita 投稿者文字色 START */
ul.list-unstyled:nth-child(4) > li:nth-child(1) > a:nth-child(2),
ul.list-unstyled:nth-child(5) > li:nth-child(1) > a:nth-child(2) {
  color: black;
}
/* Qiita 投稿者文字色 END */
```

* Qiita 投稿者文字色 の指定がよくわからなかったのでXPathで指定しました・・・。
関東第76回Cocoa勉強会のご案内

<p><b>■関東第76回Cocoa勉強会のご案内</b><br />
日時：2016/1/9(土)　13:00-17:00<br />
会場：東京都千代田区岩本町2-14-2 イトーピア岩本町アネックス3階 会議室<br />
集合：現地(セキュリティカードが必要なため、受付後入室になります）<br />
会費：無料<br />
申込：<a href="http://connpass.com/event/24210/">connpass</a></p>

関連情報
<a href="http://qiita.com/advent-calendar/2015/cocoa/">Cocoa Advent Calendar 2015</a><br />
<a href="http://www.cocoa-study.com/">Cocoa勉強会</a><br />
<a href="http://wp.cocoa-study.com/">Cocoa勉強会</a><br />
<a href="http://connpass.com/event/24210/">connpass</a><br />

【Cocoa練習帳】
<a href="http://www.bitz.co.jp/weblog/">http://www.bitz.co.jp/weblog/</a><br />
<a href="http://ameblo.jp/bitz/">http://ameblo.jp/bitz/</a>（ミラー・サイト）<br />
<a href="https://t.co/6P3h2jtbRk</a>note<br />
line monitor > 連続試験 (151214) > 連続動作試験 / バッテリーの持ちの確認 > 5200mAhで11時間動作した

line monitor
http://qiita.com/7of9/items/028556c5a819a6a8de96

```txt:動作確認
Raspberry Pi2 + raspbian
Anker Astro E1 (5200mAh)
```

line monitorの連続試験を開始。

## 試験の目的

- 連続的に問題なく動作するかの確認
- モバイルバッテリーによる動作時間の確認

## 試験条件

- 9600bps
- Tera Termマクロにて6行のテキストを送信
  - 行ごとに300msecのWaitを付加
  - 6行送信を3secごとに実行


## 試験結果

- 2015/12/14 07:03 試験開始
- 2015/12/14 18:16:59 Pi2の電源が落ちていた。

最後の書込み部分は[NULL]が並んでいる。SDを書きながら落ちたようだ。
通常はしない方がよい使い方だ。

最後の書込みまで176,070行のログを書いている。

消費電流についての整理は明日以降に行う。


![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/77b60078-04bd-23da-bae2-cdd61438e347.png)
xmonadのチートシート


xmonadのチートシート。
modはAltを意味する。

<dl>
<dt>mod-shift-return</dt>
<dd>新しいターミナルを起動する。</dd>

<dt>mod-space</dt>
<dd>タイル配置のアルゴリズムをかえる。</dd>

<dt>mod-j mod-k</dt>
<dd>フォーカスするタイルを切り替える。</dd>

<dt>mod-comma mod-period</dt>
<dd>master paneのタイル数をかえる。</dd>

<dt>mod-return</dt>
<dd>フォーカスしているタイルとmaster paneのタイルを入れ替える。</dd>

<dt>mod-shift-k mod-shift-j</dt>
<dd>フォーカスしているタイルと隣接しているタイルを入れ替える。</dd>

<dt>mod-l mod-h</dt>
<dd>master paneのタイルの大きさをかえる</dd>

<dt>mod-button1(左クリック)</dt>
<dd>フォーカスしているタイルをフロート状態にする。</dd>

<dt>mod-t</dt>
<dd>フロート状態のタイルを元に戻す。</dd>

<dt>mod-shift-c</dt>
<dd>フォーカスしているタイルを閉じる。</dd>

<dt>mod-shift-q</dt>
<dd>xmonadを終了する。</dd>

<dt>mod-p</dt>
<dd>dmenuが起動する。</dd>

<dt>mod-[1-9]</dt>
<dd>仮想デスクトップを切り替える。</dd>

<dt>mod-shift-[1-9]</dt>
<dd>フォーカスしているタイルを指定した仮想デスクトップに移す。</dt>
boot2dockerでVirtualBox5を動かせそう

## VirtualBox5の準備

* [virtualbox download](https://www.virtualbox.org/wiki/Linux_Downloads)

```bash:/dev/sda3にデータ永続化させる
mkdir /opt/VirtualBox
mkdir /mnt/sda3/VirtualBox
mount -o bind /mnt/sda3/VirtualBox /opt/VirtualBox
```

```bash:インストール
./VirtualBox-5.0.10-104061-Linux_amd64.run
```

* /opt/VirtualBox/ にインストールされる。

## X転送可能にする

* http://tinycorelinux.net/6.x/x86_64/tcz/ からパッケージ取得

```bash:パッケージダウンロード
BASE=http://tinycorelinux.net/6.x/x86_64/tcz
for i in \
  Xorg-7.7-bin libXinerama libGL libXcursor libXext libX11 libxcb libXau libXdmcp libXdamage libXfixes libxshmfence libXxf86vm libdrm libXrender fontconfig freetype libSM libICE harfbuzz libpng \
  libXmu Xorg-fonts
do
  wget $BASE/$i.tcz
  tce-load -i $i.tcz
done
```

```bash:/usr/local/etc/ssh/sshd_config 
X11Forwarding yes
X11DisplayOffset 10
```


## vboxdrvモジュールを準備すれば動きそう

![boot2docker-virtualbox.png](https://qiita-image-store.s3.amazonaws.com/0/25728/86ef2dcc-d196-69aa-106d-e8ddd67e7e51.png)
技術英語 > It's worth a shot. / Kyoto is a city worth visiting. / It doesn't hurt to give it a try.

@ Star Trek Voyager > TWISTED

迷路となった艦内で如何にしてブリッジに戻るか。パリスの提案に対してJanewayが

> It's worth a shot.

<hr>
関連して思い出したのは

> Kyoto is a city worth visiting.

http://www.icckyoto.or.jp/en/stay/sight.html

<hr>
関連して思い出したのは

> It doesn't hurt to give it a try.

http://idioms.thefreedictionary.com/it+doesn't+hurt+to
AMP(Accelerated Mobile Pages)ってなんで速いの。

##そもそもAMPってなんだ？
**A**CCELERATED
**M**OBILE
**P**AGES
PROJECT

Google主導のモバイルページ高速化プロジェクト。
AMP仕様にそってWebページを記述することでモバイルページを高速化させようというもの。
モバイルページということもあって、描画速度そのものだけでなく通信データ量の削減も重視されている。
2016年2月にはGoogle検索が対応予定らしい。Twitter,LINE等も追って対応するとか。

##3つの構成要素
###AMP HTML
拡張されたHTML。<amp-img>等、[AMP spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)に従ったHTML
###AMP JS
AMP HTMLで記述されたコードを解釈し、レンダリングを行うJavaScriptライブラリ。**各AMP要素は非同期に描画される。**
###AMP CDN
AMP JSを配信するCDN。
AMPコンテンツを発信する全てのページはこのCDNからAMP JSを読み込むので、キャッシュが効く。

使い方は割愛。この記事では高速化の仕組みについて書く。


##何処で速くなるのか
###AMP JS以外のJavaScriptを認めない
ほとんどのJavaScriptコードはdocument.writeと同期する為負荷の原因になる。
AMP JS以外のJavaScriptを許容しないことで高速化を図る。

###全ての外部リソース要素の縦幅を明示的に固定させる
```<img src='piyo.png' width='200' height='200' />```
等、サイズを固定することでスタイルの再計算・再描画の負担を減らす

###リソース読み込みの優先順位付け
ページの縦幅が長く、ある程度スクロールしないと表示されないような画像ファイル等は、読み込みの優先度が低く設定される。


###最適化されたプリレンダリング
ページを開く前に事前にレンダリングされる仕組み。
```<link rel=prerender>```では処理が重くなるため、CPU負荷・通信量が比較的少ないもののみプレレンダリングを行うように最適化される。

###その他最適化手法
- [CSSアニメーションをGPUで処理する](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)

- [Webフォント最適化](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)

##参考文献
ACCELERATED MOBILE PAGES PROJECT - https://www.ampproject.org/

ampproject/amphtml[GitHub] - https://github.com/ampproject/amphtml 

Pre Render[Qiita] - http://qiita.com/Jxck_/items/71929a11dd7ddac0e22e

Why AMP HTML does not take full advantage of the preload scanner - https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e#.szijeieji
defunkt/jquery-pjaxの使い方

こんにちは、[k_hatsushi](http://qiita.com/k_hatsushi)です。LIGアドベントカレンダーの14日目です！

今回はdefunkt版pjaxプラグインについて書こうと思います。

# pjaxとは
pushStateとAjaxの技術を組み合わせたjQeuryのプラグインのこと。
jQueryのanimateや、cssのtransition、animationを組み合わせて、遷移したように見えないのに、URLを変えることができます。

#### [pushState]
HTML5から導入されたHistoryAPIのメソッド。
ページ遷移せずにブラウザの履歴を追加できます。

#### [Ajax]
非同期通信でサーバーからデータをやりとりする技術。
jQueryだと

```
$.ajax({
　　type: 'GET',
　　url: '/parts/target.html',
　　dataType: 'html',
　　success: function(data) {
　　　...
　　},
　　error:function() {
　　　...
　　}
});
```

みたいな感じで簡単に書けますね。

#### [pjax]
上記二つの技術を合わせたもので、非同期通信をしつつURLを変更することができます。

※pushStateについてもっと詳しく知りたいという方は店長の書いた記事をご参照ください。
http://liginc.co.jp/web/js/other-js/162559

## pjaxプラグインは同名で2つある
現在pjaxでググると[falsandtru/jquery-pjax](https://github.com/falsandtru/jquery-pjax)と[defunkt/jquery-pjax](http://chibinowa.net/notebook/js/pjax-fragment-defunkt.html)の2種類がひっかかりますが、それぞれ使い方が違うのでお気をつけください。（以前ハマりました。。）

冒頭にも書きましたが、今回のご紹介は**defunkt版**です。


## 使い方
pjaxで使用するコードをざっと書いてみました。

[index.html]

```
<div class="btn">
    <a class="js-pjax" href="change_contents.html">change!</a>
</div>
<div class="contents">
// ↓ここが塗り変わる↓
    <p>変わる前</p>
// ↑ここが塗り変わる↑
</div>
```

[change_contents.html]

```
<div class="change-contents">
// ↓これに塗り変える↓
    <p>SUCCESS！</p>
// ↑これに塗り変える↑
</div>
```

[app.js]

```ruby:JS
$(document).on('click', '.js-pjax', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $.pjax({
        url: href,
        container: '.contents',
        fragment: '.change-contents',
        scrollTo: false
    });
});

$(document).on('pjax:beforeSend', function() {
    alert('ajaxリクエストが開始される前に発生');
});
$(document).on('pjax:popstate', function() {
    alert('ブラウザの戻る進むなどを行った時に発生');
});
$(document).on('pjax:start', function() {
    alert('pjaxが開始されたときに発生');
});
$(document).on('pjax:send', function() {
    alert('ajaxリクエストを開始した後に発生');
});
$(document).on('pjax:success', function() {
    alert('ajaxリクエストが成功した後に発生');
});
$(document).on('pjax:error', function() {
    alert('ajaxリクエストが失敗した後に発生');
});
$(document).on('pjax:timeout', function() {
    alert('タイムアウト時に発生');
});
$(document).on('pjax:complete', function() {
    alert('ajaxリクエストが終了した後に発生');
});
$(document).on('pjax:end', function() {
    alert('pjaxが終了したときに発生');
});
```


DOMを書き換える際イベントが消えてしまうため、
直接セレクターにではなく、全て$(document)にイベントをバインドさせています。

### option
- url
読み込むファイルのパスを指定します。

- container
index.htmlのセレクターを記述します。

- fragment
change_contents.htmlのセレクターを記述します。

- scrollTo
DOM書き換え後にページのトップにスクロールするか指定できます。

## 実行順序

### ボタンをクリックした時の実行結果の順序
alert('ajaxリクエストが開始される前に発生');
↓
alert('pjaxが開始されたときに発生');
↓
alert('ajaxリクエストを開始した後に発生');
↓
alert('ajaxリクエストが成功した後に発生'); or
alert('ajaxリクエストが失敗した後に発生'); or
alert('タイムアウト時に発生');
↓
alert('ajaxリクエストが終了した後に発生');
↓
alert('pjaxが終了したときに発生');

### ブラウザの戻るor進むを押した時の実行結果の順序
alert('ブラウザの戻る進むなどを行った時に発生');
↓
alert('pjaxが開始されたときに発生');
↓
alert('pjaxが終了したときに発生');

作りたい動きはあるが、それぞれのイベントの実行タイミングがわからない！という方の参考になれば幸いです。