OmniAICreator/Qiita-1.07M huggingface dataset:
Rails ネストした関連先のテーブルもまとめて保存する (accepts_nested_attributes_for、fields_for)

ひとつのフォームの中で複数のフィールドの登録をまとめて行いたいことがあります。そんなときに便利な方法を紹介します。
has_many関連の子レコードをまとめて登録出来るようになります。
キーワードは「accepts_nested_attributes_for」と「fields_for」です。

# 入れ子のフォームを扱うための下準備
テーブルをまとめて登録するために入れ子のフォームを作成することになります。それを可能にするために```accepts_nested_attributes_for```というメソッドを使いましょう。

今回はteamsテーブルとmembersテーブルで話を進めたいと思います。
以下のような関係となります。

```rb:app/models/team.rb
class Team < ActiveRecord::Base
  has_many :members
end
```

```rb:app/models/members.rb
class Member < ActiveRecord::Base
  belongs_to :team
end
```

それでは```accepts_nested_attributes_for```の設定を行いますが、設定は簡単です。
以下のようにteam.rbに追記するだけです。

```rb:app/models/team.rb
class Team < ActiveRecord::Base
  has_many :members
  accepts_nested_attributes_for :members #この行を追加
end
```

# 実際にフォームを使って登録する

```rb:app/controller/teams_controlelr.rb
class TeamsController < ApplicationController
  def new
    @team = Team.new
    @team.members.build
  end
end
```


以下のように、fields_forを使ってフォームの中に入れ子を作ることが出来ます。



```haml:views/groups/new.html.haml
.row.form
  %p= '新規グループ作成'
  .col-lg-8
    = form_for @team do |f|
      = f.text_field :name, placeholder: 'グループ名を入力してください', cols: '30', rows: '10', autofocus: 'true', class: 'form-control'
      = f.text_area :description, placehoder: 'グループの説明を入力してください', autofocus: 'true', class: 'form-control'
      = f.file_field :logo
      = f.fields_for :members do |m|
        = m.text_field :nickname
        = m.file_field :avatar
      = f.submit '作成する', class: 'btn btn-primary'
```

以下のようにコントローラーを記述することで、まとめて2つのテーブルのレコードを追加出来ます。

```rb:app/controller/teams_controlelr.rb
class TeamsController < ApplicationController
  def create
    Team.create(team_params)
  end
end

private
def team_params
  params.require(:team).permit(:name, :description, :logo, members_attributes: [:nickname, :avator])
end
```

参考
[Railsでaccepts_nested_attributes_forとfields_forを使ってhas_many関連の子レコードを作成/更新するフォームを作成](http://ruby-rails.hatenadiary.com/entry/20141208/1418018874)
github/gitignoreを使って, 複数のパッケージからなるgitignoreをpecoで作る

**複数のgitignoreパッケージからなるgitignoreファイルを手軽に作りたいとき**

ローカルにクローンしたgithub/gitignoreとpecoを使って, 複数のパッケージからなるgitignoreファイルを生成する.

```zsh:zsh
$ cd GIT_DIR
$ git clone https://github.com/github/gitignore.git

$ mkdir NEW_PRJ

$ cd NEW_PRJ

# xargsがJオプションをサポートしない場合は, "xargs -I% cat % >> .gitignore" に変更
$ ls -d GIT_DIR/gitignore/**/* | peco | xargs -J% cat % > .gitignore
```

### MEMO
#### pecoで複数行を選択する
`ctrl`+`space`で複数行を選択できる.
javascriptを使って複数のYoutube動画を貼り付けても重くならないようにする方法

昔**「◯◯な動画100選」**っていう記事を開いたら1ページにYoutubeが100個掲載されていて、
パソコンが爆発した事があったので、これ以上被害者を増やさない為に紹介をします。

#動作
1. iframeタグを見つけたら全てその動画のサムネイル(img)に置換する。
2. サムネイルをクリックすると、その動画のiframeが呼び出されてimgがiframeに置換される。

#コード
```js:movies.js
$(function (){
    var movies = [];
    var images = [];
    //全てのiframeタグに対して処理を実行する。
    $('iframe').each(function(index, element) {
        //iframeの中のsrc(埋め込みタグのURL)を取得。
        var movie_src = $(this).attr('src');
        //取得したURLはmovies配列に格納。
        movies[index] = movie_src
        //URLから動画idのみを取得して、文字連結をしてサムネイルを取得。
        images[index] = 'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/")) + '/maxresdefault.jpg'
        //iframeをサムネイル画像に置き換える。
        $(this).after('<img src="' + images[index] + '" class="movie" width="560">').remove();
    });

    $('.movie').each(function(index, element) {
        //サムネイルがクリックされた時の処理
        $(this).click(function (){
            //iframeに置き換え。
            $(this).after('<iframe src="' + movies[index] + '?autoplay=1" width="560" height="315"></iframe>').remove();
        });
    });
});
```

```html:movies.html
<iframe width="560" height="315" src="https://www.youtube.com/embed/aAeLkFjaFgQ" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/EpjcgOz_uQ0" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/_YrYCRYR-ig" frameborder="0" allowfullscreen></iframe>
```


# 動画IDの抽出
以下のコードで、movie_srcに入ったURLの一番最後の`/`を見つけてそれ以降の文字列を取得。

```js
movie_src.substring(movie_src.lastIndexOf("/")
```

```js:実行結果
movie_src = "https://www.youtube.com/embed/aAeLkFjaFgQ";
movie_src.substring(movie_src.lastIndexOf("/")
//=> /aAeLkFjaFgQ
```
**参考**
substringメソッド:http://www.ajaxtower.jp/js/string_class/index7.html
lastIndexOfメソッド：http://www.red.oit-net.jp/tatsuya/js/string.htm#lastIndexOf

#動画のサムネイル
Youtubeに動画をアップすると自動でサムネイルが作成される。
その時のそれぞれのURLは以下のようになる。

| サイズ | URL |
|:--------|:------------|
|120x90|http://i.ytimg.com/vi/動画ID/default.jpg|
|120x90(パターン1)|http://i.ytimg.com/vi/動画ID/default.jpg|
|120x90(パターン2)|http://i.ytimg.com/vi/動画ID/2.jpg|
|120x90(パターン3)|http://i.ytimg.com/vi/動画ID/3.jpg|
|320x180|http://i.ytimg.com/vi/動画ID/mqdefault.jpg|
|480x360|http://i.ytimg.com/vi/動画ID/hqdefault.jpg|
|480x360|http://i.ytimg.com/vi/動画ID/0.jpg|
|640×480|http://i.ytimg.com/vi/動画ID/sddefault.jpg|
|1280x720|http://i.ytimg.com/vi/動画ID/maxresdefault.jpg|

参考サイト：http://emiac-works.com/coding/youtube-get-thumbnail-easy-way/

今回のコードでは以下のようにして、サムネURLを生成している。

```js
'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/")) + '/maxresdefault.jpg'
//=> http://i.ytimg.com/vi/aAeLkFjaFgQ/maxresdefault.jpg
```

# 最後に
この記事によって、動画大量貼り付けテロの被害者が一人でも減れば嬉しいです。
Chainerで機械学習と戯れる: Treasureゲームの強化学習を50日程続けた経過メモ


はじめに
========

[Chainerで機械学習と戯れる: JumpゲームとTreasureゲームをChainerで強化学習した過程と結果のメモ](http://qiita.com/mokemokechicken/items/cc9b2c96f6e4a43c123c) から 1ヶ月以上経ちました。

その間ずっと放置して学習していたので、覗いてみることにします。

現状
======

現在のハイスコア時の動きを動画にキャプチャしました。
https://youtu.be/kCLG2bTp3po

気がついたことを書きます。

ハイスコア更新にかかる時間
--------------
ハイスコアだけでなく、ハイスコアと同じ得点を出した時の記録も含んでいますが、その時の延べ学習回数（≒延べTurn数）がおよそ
「27万回」「107万回」「192万回」「207万回」「269万回」「297万回」「371万回」
となっています。70〜80万Turnくらい経験すると何か新境地を悟る感じですかね。

最初は数万回に1回くらいスコアが伸びていたのですが、徐々に80万回に1回とかになって、指数関数的に伸びてしまうのかなぁと思っていたのですが、意外と一定の経験値でレベルアップするようです（＾＾；

もう少し、刺激的な経験をさせてあげればレベルアップが速かったりするんでしょうか。。
＃ 今は宝の出現位置や敵の動きが全て同じなので。

新しい動き方
----------

269万回目くらいの時（動画でいうと2:15〜のPlay)に、
端っこに追い詰められて細かく上下するだけでなく、「大きく上下」「完全にYを馬鹿にしたような 'D' みたいな動き」をしています。もう少し頑張れば右上に抜けられるのになー、とおもいますが、これはこれで面白いです。

371万回目くらいの時（3:43〜)は、左下の定位置に収まったかと思ったらおもむろに右上に抜けだして、今度は右上で上下を繰り返していました。やっと自分の殻を破ってくれたみたいで嬉しいです。

さいごに
=========

継続は力なり、なんでしょうかね。
ここまで2ヶ月弱かかっていますが、もっと高速なマシンで動かせば時間自体は短縮できるはずです。
あと、Pythonのプロセスも実行しっぱなしでメモリが800MBくらい消費していて、いつかプロセスは再起動しないといけなさそうです（笑）。

今後の進展も期待できそうなので、また1ヶ月くらい放っておこうと思います。


続き：[Chainerで機械学習と戯れる: Treasureゲームの強化学習を110日程続けた経過メモ](http://qiita.com/mokemokechicken/items/9c933a4c580d00fc8cb9)
slickで自作の移動するボタンを作るときのメモ

便利な[slick](http://kenwheeler.github.io/slick/)で自作の移動するボタンを作ろうと
ググったら以下のようなのが引っかかる

```
$(".slideshow").slick({
	dots: true
});
$(".menu a").click(function(e){
	e.preventDefault();
	slideIndex = $(this).index();
	$(".slideshow").slickGoTo(parseInt(slideIndex));
});
```

しかし動かない・・・

#もしかしてバージョンが新しくない？
新しいとこうなる

```
var slick = $(".slideshow").slick({
	dots: true
});
$(".menu a").click(function(e){
	e.preventDefault();
	slideIndex = $(this).index();
	slick.slick('slickGoTo', parseInt(slideIndex));
});
```
bitbucketからgithubにリポジトリを1分で移すための4ステップ


bitbucketにプライベートリポジトリつくって開発してたけど、公開したくなったときにやった手順。

## 1.--mirrorオプションでclone

```
git clone --mirror https://bitbucket.org/username/repository-to-mirror.git
```

## 2.githubにリポジトリを用意

もし作ってない場合は作成しておく必要あり。

## 3.remote set-urlで移動先のリポジトリと指定

`cd repository-to-mirror.git` で移動したら、remote urlを設定


```
git remote set-url --push origin https://github.com/username/mirrored
```

## 4.最後に--mirrorをつけてpush

username/passwordが聞かれたらgithubアカウントのものを入力すればOK。

```
git push --mirror
```

思ったより簡単。

### 参考
[Duplicating a repository - User Documentation](https://help.github.com/articles/duplicating-a-repository/)
[How to move git repository with all branches from bitbucket to github? - Stack Overflow](http://stackoverflow.com/questions/22906917/how-to-move-git-repository-with-all-branches-from-bitbucket-to-github)
vinyl-fsでUNCのファイルを引く


vinyl-fsでUNCのファイルを引く
=====================================

nodejsでfsからはUNCパスのファイルは参照できるのにvinyl-fsからは引けないので調べてみた。

## 調査結果

### おもたる原因

* minimatchはrootからパスをたどるのに`opt.root`を使用する
* なのでglobでUNCを引くときは`opt.root`の指定が必要
* しかしglob-streamはglobに送る前にcwdでresolveしている(複数ファイルに対応するため?)

globで`opt.root`を指定する必要があるのに、それよ入りも前段階で`C:`をrootにされるのが引けない原因でした。
つまり`glob-stream`が悪い(暴論)~~~そもそも'\\\\'という表記自体が~~~


### 解決法

* rootにUNCを指定する(globで動作するように)
* glob-streamでresolveさせないように一部修正

### 手順

##### vinyl-fsをinstall

~~~
npm install vinyl-fs 
~~~

##### glob-streamを修正

~~~javascript
//glob-stream/index.js

// 57行目
// NegativeMatchのためにopt.rootを追加
  create: function(globs, opt) {
    if (!opt) opt = {};
    if (typeof opt.cwd !== 'string') opt.cwd = process.cwd();
    if (typeof opt.root !== 'string') opt.root = process.cwd(); // 追加
    if (typeof opt.dot !== 'boolean') opt.dot = false;

// 77行目あたり
      if (globArray === negatives && typeof glob === 'string') {
        // glob = new Minimatch(unrelative(opt.cwd, glob), opt); // original
        glob = new Minimatch(unrelative(opt.root, glob), opt); // cwd->rootに変更
      }

// 119行目あたり
function unrelative(cwd, glob) {
  var mod = '';
  if (glob[0] === '!') {
    mod = glob[0];
    glob = glob.slice(1);
    glob = path.resolve(cwd, glob); // 不一致はglobに流れないので絶対パスにする
  }
  // return mod+path.resolve(cwd, glob); // original
  return mod+glob; // resolveをはずす
}
~~~ 

以上で修正完了
不一致の情報はglobには流さず、globの結果に対してフィルターをかける動きになっているので絶対パスに直す。

## 使うとき

`\\PC名\共有名`までをrootに指定する

~~~javascript
var vfs = require('vinyl-fs');
vfs.src("/*", {root:"//PCNAME/share"})
~~~

## 感想

glob-streamがnpm上のとgithub上のでコードが違ったり(version表記は同じ)だったり、なにやら面倒な雰囲気がしたので簡単にできる範囲で終わらせました。
そもそもwindows上でnodejsからUNCでファイルを参照するという状況自体が少ないよなぁ...。
Storyboard上でViewにプロジェクトで定義した色を指定する方法

# Problem

* Storyboard上で、UILabelに独自に定義したUIColorを指定したい

# Solution

* カラークラスを作成する。そしてcolorCodeからUIColorを取得するためのメソッドを定義しておく。

```MyColor.swift
extension UIColor {
  convenience public init(hex: Int, alpha: CGFloat = 1.0) {
    let red = CGFloat((hex & 0xFF0000) >> 16) / 255.0
    let green = CGFloat((hex & 0xFF00) >> 8) / 255.0
    let blue = CGFloat((hex & 0xFF)) / 255.0
    self.init(red:red, green:green, blue:blue, alpha:alpha)
  }
}

public struct MyColor {
  public static let Gray      = UIColor(hex: 0x808080)
  public static let RoyalBlue = UIColor(hex: 0x416931)

  static func fromCode(code: String) -> UIColor {
    switch code {
    case "Gray"      : return Gray
    case "RoyalBlue" : return RoyalBlue
    default:
      return UIColor.whiteColor()
    }
  }
}

```

* カスタムLabelを作成し、`backgroundColorCode`と`textColorCode`をStoryboard上で指定できるようにする

```MyLabel.swift
import UIKit

@IBDesignable
class MyLabel: UILabel {
  @IBInspectable internal var backgroundColorCode: String = "" {
    didSet {
      backgroundColor = MyColor.fromCode(backgroundColorCode)
    }
  }
  
  @IBInspectable internal var textColorCode: String = "" {
    didSet {
      textColor = MyColor.fromCode(textColorCode)
    }
  }
}
```

* StoryboardでUILabelを選択した状態でIdentity Inspectorを開き、Classを「MyLabel」にする
* Attribute Inspectorを開き、`BackgroundColorCode`を「RoyalBlue」にして、storyboardを保存する。
* Storyboard上でUILabelの背景色が青になったら成功です。
Enterprise APIs Hack Night #1に行ってきました

※なぜか限定公開になっていたので公開

Enterprise分野での（主に）WebAPIの利用についての勉強会に行ってきました。
発表資料がアップされるのを待っていたのですがEnterpriseな文化なのか全然アップされない……。

Enterprise APIs Hack-Night #1
http://eahn.connpass.com/event/18013/

Timeline https://twitter.com/search?f=tweets&vertical=default&q=%23entapihack
Ustream http://www.ustream.tv/channel/VgCu5hYB4jY

講演雑感
===

ビジネスのデジタル化におけるAPI活用事例 by Apigee Japan 清水さん
---

* AP通信では社内でサービスを作成するために既存システムのAPI化を行っている(B2E = Business-to-Employee)
* Salseforceは業務効率改善をサービスにしているだけあって自社の業務効率改善には意欲的。B2EでのAPI活用が活発
* BECHTEL（建設エンジニアリング会社）では現場からiPadを利用したシステムを構築している。アクセス元によって権限制御を行っている。Appleで事例が紹介されていた

### 感想

外部との通信よりもしがらみの少ない社内でのI/FとしてWebAPIを実装することで新しいサービスを生み出す速度を高めていく、みたいな話が印象的でした。

APIがNTTコミュニケーションズのサービスを変える！ by NTTコミュニケーションズ 緒方さん
---

* 通信キャリアはトラフィックを増やすためにAPIの提供には積極的
* 主要顧客は代理店で販売契約系のAPI（契約情報、サービス発注など）を優先して提供
* 次いで通信系API（SMS, 音声, 位置情報など）を提供

* 使ってもらうためのAPIに必要なこと
    * APIの仕様・ルールを統一
    * APIをマネジメントする
        * 認証、ログ、セキュリティ、権限制御を一元的に管理できるようにする
* APIのセキュリティ
    * Credential方式
    * Source IPアドレス
    * （閉域網）

* 複数APIを組み合わせたトランザクション処理など必要になった場合のロールバックなどはどうするのかという質問に対して
    * やり方はいろいろ考えられるが、モノによっては「失敗したらゴミデータを掃除すればよい」という割り切りも必要

### 感想

基本的には「常識的な仕様のAPIを作りましょう」という話でした。
トランザクション管理についてはまだ最適解が見えていない様子。考えられるのはこんな感じでしょうか。

* バルクAPIを用意
    * 複数APIを呼ぶAPI
* 非同期処理
    * 処理IDだけ返しておいて従来の仕組みでトランザクション処理
    * 終了通知はポーリングなり、サーバプッシュなりで
* 同期処理＝APIのレスポンスを待たせる
    * ごく軽い処理なら選択肢に入るかも？


IoT/M2M分野におけるWeb APIの使い方とデモ by MOONGIFT 中津川さん
---

IoTの話だったので一旦省略。
IoTシステム構築する際のネットワーク技術の選択が主テーマでした。


LT
===

発表資料『レガシーなアプリにWebAPIを実装してなみだ目になったのでちょっといろいろ教えてください』
http://www.slideshare.net/isamusuzuki54/web-api-52380754

### Q. WebAPIのレスポンス形式(JSON/XML/...)

* もうXMLはいらないとおもう
* JSONだけでいい

### Q. WebAPIのドキュメントってどう作る？

* Word/Excelは会場のウケが取れました
* MarkdownでPDFなりWEBなりに変換（版管理しやすい）
* curlでの実行例があるといいのでは？

### Q. apigeeさんの「WEB API DESIGN」をよいしょしたら

※WEB API DESIGN : 無料の電子書籍。WEBAPI設計のノウハウがまとめられている

* apigeeさん「近々改訂予定、日本語版も出せるかも」


---


来場者の傾向
===

* 来場者はNTT系列色がずいぶん強かったです
* Enterpriseを謳っているせいかタイムラインの盛り上がりには欠ける感じでした
* 現場レベルでの導入実例とかがもっとあると嬉しかったのですが……
ssh ログイン 出来なくてハマって調べた事例集

新しいユーザーを作って鍵認証ログインが出来なかったりしたら、このあたりを調べればまぁ大体わかるんじゃないかって話し。

# 結論

全部対応したとおもったのに、ログイン出来なかったら`/var/log/auth.log` を見よう

## 調べた事

* `~/.ssh/` のパーミッション700
* `~/.ssh/authorized_keys` のパーミッション600
* `/etc/ssh/sshd_config` の設定

```
RSAAuthentication yes
PubkeyAuthentication yes
AuthorizedKeysFile      %h/.ssh/authorized_keys
```

* keyが一致しているか（他の鯖に置いて試してみるとか）
* 違うユーザーのkeyを追加してもログイン出来ないか
* `authorized_keys`ファイルのtypo
* `ssh -vvvv {user}@{hostname}` とかしてログ眺める

## 今回の解決の経緯

Debian,UbuntuでのApacheの実行ユーザーである`www-data`でログインしようとしていた。
「調べた事」に書いてあった事は全部調べて、vvvvしたログをググった

[ssh sign_and_send_pubkey we sent a publickey packet, wait for reply - Google 検索](https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=ssh%20sign_and_send_pubkey%20we%20sent%20a%20publickey%20packet%2C%20wait%20for%20reply)

そしてここを見つけた

[debian - SSH keys fail for one user - Server Fault](http://serverfault.com/questions/220788/ssh-keys-fail-for-one-user)

`/var/log/auth` とか書いてあるじゃないか。

```
Authentication refused: bad ownership or modes for directory /var/www
```

oops
ggplot2で透明な背景にする方法

**2016/04/12追記: ggplot2 v2.1.0にて動作を確認しました**

## Q
`ggplot2`で作成したグラフィックを、背景が透明なPNGに出力する必要があります。基本Rグラフィックならうまくいくのですが、`ggplot2`だと透明になりません:

```r
d <- rnorm(100) #ランダムデータ生成

# これなら透明背景のPNGができます
png('tr_tst1.png',width=300,height=300,units="px",bg = "transparent")
boxplot(d)
dev.off()

# ggplot2でオブジェクト作成
df <- data.frame(y=d,x=1)
p <- ggplot(df) + stat_boxplot(aes(x=x,y=y)) 
p <- p + theme(
    panel.background = element_rect(fill = "transparent",color = NA),
    panel.grid.minor = element_line(color = NA), 
    panel.grid.major = element_line(color = NA)
)
# でもこれだと背景が白くなります
png('tr_tst2.png',width=300,height=300,units="px",bg = "transparent")
p
dev.off()
```

※ 評価させていません

`ggplot2`で透明背景を出力させる方法はあるのでしょうか。

## A
上記の`theme()`設定では、`plot.background`を透明指定していません。まずは以下のように`ggplot2`のオブジェクトを作成します:


```r
d <- rnorm(100)
df <- data.frame(y=d,x=1)
p <- ggplot(df) + stat_boxplot(aes(x = x,y=y)) 
p <- p + theme(
    panel.background = element_rect(fill = "transparent",color = NA),
    panel.grid.minor = element_line(color = NA), 
    panel.grid.major = element_line(color = NA),
    plot.background = element_rect(fill = "transparent",color = NA)  #ここを追加
)
p
```

![OK_example1.R-1.png](https://qiita-image-store.s3.amazonaws.com/0/35118/bf492ca7-f07f-a8e2-20d7-735f9475c77d.png)


これで、背景要素が透明になります。これをPNG形式に出力するには`ggsave`が便利です:


```r
ggsave("tr_tst3.png", p, bg = "transparent")
```

※ 評価させていません

`?ggsave`には`bg`という引数はありませんが、その他の引数はこの場合graphics deviceにそのまま送られるため、透明処理が働きます。逆にこの引数を設定しないと透明にならず白色になります。

また、knitrなどで出力する場合には、チャンクオプションとして`dev.args=list(bg='transparent)`の記述が必要です:
```
{r hogehoge, dev.args = list(bg = 'transparent')}
```

この際も、出力する`ggplot2`のオブジェクトには、背景要素を全て透明に設定しておいてください。


## 参照
この記事は、StackOverflowに投稿された以下の記事を参考に、現在の`ggplot2`のバージョンにあうようにコードを編集し、一部内容を変更して作成しました:
- [How to make graphics with transparent background in R using ggplot2? - Stack Overflow](http://stackoverflow.com/questions/7455046/how-to-make-graphics-with-transparent-background-in-r-using-ggplot2)

関連記事・ドキュメント:
- [How to use a &quot;R-generated&quot; plot as a semi-transparent background in an HTML5 slide made by knitr? - Stack Overflow](http://stackoverflow.com/questions/13813471/how-to-use-a-r-generated-plot-as-a-semi-transparent-background-in-an-html5-sli/13826154#13826154)
- [theme. ggplot2 0.9.3.1](http://docs.ggplot2.org/current/theme.html)
hoge(deferのテスト)

## コード

```go
package main

import "fmt"

func main() {
	defer fmt.Print("ほげぇ！")
	fmt.Print("ほげぇ")
	return
}
```

## 出力

```
ほげぇほげぇ！
```

## 追伸

```go
package main

import (
	"fmt"
	"log"
)

func main() {
	defer fmt.Print("ほげぇ！")
	fmt.Print("ほげぇ")
	log.Fatal("エラー")
}
```

```
ほげぇ2009/11/10 23:00:00 エラー
```

__ほげぇ!?__ →ほげぇ!

```go
package main

import (
	"fmt"
	"log"
)

func main() {
	var err interface{}
	defer func(){
		if err != nil {
			log.Fatal(err)
		}
	}()

	defer fmt.Print("ほげぇ！")
	fmt.Print("ほげぇ")

	err = "エラー"
}
```

```
ほげぇほげぇ！2009/11/10 23:00:00 エラー
```

ほげぇ！
textareaにdatepickerで選択した日付を表示する

jQueryのdatepickerをtextareaで使おうとしてうまくいかなかったのでメモ

もともとinputでdatepickerを使っていたんですが、一つの入力ボックスで日付と改行がある文字列を入力したかったのでtextareaに変更しました。しかし、カレンダーはそれ以降顔を出してくれません...
少し調べてみると同じ問題にぶちあったってる方を発見！しかも回答付です。さすがstackoverflowです!
どうやらdatepickerはtextareaをサポートしていないみたいですね...残念です。
http://stackoverflow.com/questions/4117727/why-jquery-datepicker-doesnt-work-on-textarea-but-only-on-input

上記記事を参考にtextareaにではなくinputを経由してdatepickerのカレンダーで選択された日付を取得する。

```html:calendar.html
<textarea id="display">ここにカレンダー日付が出力されるよ！</textarea>
<input id="datepicker" type="hidden">
```

```js:calendar.js
$(function () {
    $('#datepicker').datepicker({
        dateFormat: "yy/mm/dd",
        showOn: "button", // inputは非表示にしているのでボタンを表示させる
        buttonText: "カレンダー",
        onSelect: function (selected_date) {
            $('#display').val(selected_date);
        }
    });
});
```
動作確認用にjsfiddleのリンクも載せときます。
http://jsfiddle.net/rukurx/9qyzsh47/
印刷機能のないAtomでコードを印刷するたった1つのマシな方法

# INTRO

**「自分で印刷機能を実装する。以上。」**

と言ってもいいくらいいろいろ自由度の高いAtomですが、さすがに印刷機能の実装はレベルが高すぎるので直接印刷ではなくHTMLへ出力するというパッケージを作成してみました。

[export-html package for Atom](https://atom.io/packages/export-html)

直接印刷する機能だったりPDFへの変換というのは非常に魅力的ですが、なかなか実装が大変だったりしますし途中の工程がブラックボックス化されてしまうので痒いところに手が届かなくなってしまいます。

ということで、パッケージではHTMLへの出力のみにおさえて、実際の印刷はWebブラウザ経由でしたらいいんじゃない？というおもいつきで作ったのがこのパッケージになります。

![screenshot](https://raw.githubusercontent.com/nobuhito/atom-export-html/master/screen-cast.gif)

# INSTALL

使い方は簡単で、インストールした後に `export-html:export` を実行すると開いてるバッファのHTMLが一時フォルダに作成され、デフォルトブラウザでそのHTMLを開きますので、ブラウザから印刷してください。PDF出力でもいいですし。

# SETTINGS

シンタックスハイライトについては [highlight.js styles](https://github.com/isagalaev/highlight.js/tree/master/src/styles) にあるものから自由に選べますので、、設定ページで.minや.cssを抜いた名称を指定することで好みの色合いにすることができます。
その他に、デフォルトのフォントサイズと出力後に自動的にWebブラウザで開くかどうかを設定ページで調整できます。

# Specification

## ハイライトされる言語

コードのハイライト自体は `highlight.js` を利用していますので、135言語をサポートしています。詳しくは [こちら](https://github.com/isagalaev/highlight.js/tree/master/src/languages) を御覧ください。 

## インターネット回線

Chromeの [仕様](https://code.google.com/p/chromium/issues/detail?id=47416) によりローカルのファイルにアクセスできませんので、 `highlight.js` はCDNを利用しています。これによりインターネット回線がない環境ではシンタックスハイライトが機能しません。

## ハイライトされる言語の決定順序

ハイライトに利用する言語については、

 1. 開いてるファイルの拡張子
 2. 開いてるファイルのGrammar
 3. `higlight.js` の自動判定

の順で決定されます。

## HTMLファイルとMarkdownファイルについて

HTMLファイルとMarkdownファイルについてはソースではなくHTMLをレンダリングされた状態で表示されます。


# SUMMARY

やっぱり印刷の必要性ってのは依然としてあるもので、インターネットを探してもそれなりに四苦八苦してるポストが見られるし、パッケージを探してもPDFへ出力できるもの等が見つかります。

直接印刷できれば便利は便利なんですが、HTMLであればDevToolsを使って気に入らない所を修正したり不要な部分を削除したりも出来ますのでこれはこれで非常に便利な感じです。
印刷前にHTMLやMarkdownがレンダリングされるのもなかなかいい感じですし。
ネットにあるサンプルを印刷するときも便利ですし。

もしかしたらAtomに印刷機能がついてもこの方法のほうが良かったりするかもしれないかも。
docker-composeでetcd/registratorを構成する

まだetcdバージョン0.4.6系の情報が結構残っていますが、etcd-2.1.x系とregistratorを使った構成をdocker-composeで行ってみました。以下 `docker-compose.yml`:

```yaml
etcd:
  image: quay.io/coreos/etcd
  ports: ["2379:2379", "2380:2380"]
  command: >-
    -listen-client-urls http://0.0.0.0:2379
    -listen-peer-urls http://0.0.0.0:2380
    -advertise-client-urls http://etcd:2379
registrator:
  image: gliderlabs/registrator:latest
  command: --internal=true etcd://etcd:2379
  volumes:
    - /var/run/docker.sock:/tmp/docker.sock
  links:
    - etcd 
```

とりあえず1台構成ですが、

```shell-session
curl -L http://<host ip>:2379/v2/keys | jq .
```

等とすれば registrator がきちんと動作しているのが確認できます。
git add -p を使おう

```git add -p``` を常用するようになってから、 commit 履歴をずっときれいに保てるようになった。 Index の存在意義もよくわかるようになった。しまいには `a` を `add -p` の alias にした。使い方は

http://qiita.com/crifff/items/1abf08bca4ce51db4775

がとてもわかりやすく書いてあるのでおすすめ。
dylib がいなくなった、tbd ってなんだ？

# tbd ?

昔のプロジェクトを iOS 9 SDK でビルドをしようとしたら `libz.dylib` が見つからないと怒られてしまいました。調べてみると、どうも dylib は基本的に直接参照することはなくなり、その代わりとして `libz.tbd` なるファイルを参照するようになったようです。
![ss.png](https://qiita-image-store.s3.amazonaws.com/0/3603/f6d2d265-5b8e-d8b5-b6bc-ac55852f42dd.png)

これを開いてみると単なるテキストファイルだということがわかりました。tbd = Text Based Dynamic Library といったところでしょうか。
![ss2.png](https://qiita-image-store.s3.amazonaws.com/0/3603/ca3285f6-0608-78ad-cad0-30dd585761c0.png)

`install-name: /usr/lib/libz.1.dylib` という記述があるので、どうやら実体として dylib が SDK の外側に別にあり、tbd はそれらをロードするための設定を記述したテキストファイルのようです。SDK の容量を減らす目的で Mac 側のライブラリを参照する仕組みにしたということでしょうか？（詳しい資料が見つからないので憶測ですが。）

# エラーが出る場合

おそらくこれはベータ版ゆえの現象だとは思いますが、tbd を参照してもライブラリが見つからないというエラーが出てしまうことがあるようです。フォーラムに対処療法の投稿がありましたので URL を記載しておきます。
> https://forums.developer.apple.com/thread/4572
[memo] autohotkey

key を remap したとき、

- sc は不変
- vk は変わる

-> 本当か？

```
<#d::{Left} ;; 連続入力NG
<!d::{Left} ;; 連続入力NG
<^d::{Left} ;; 連続入力OK
```

```
sc01D::LWin ;; tab -> LWin
LWin::Return
```
本来の LWin (keytop に窓 mark が書いてある key) は無効化される。しかし本来の tab (keytop に Tab と書いてある key) は無効化されない。

` と {} の効果の違いがわからない。

ノート PC に HHKB Pro 2 をつないでいる。ノート本体の keyboard は jp 排列、 HHKB は us 排列。 OS 側では排列を jp にしたままで、 ahk で排列をいじっている。これは悪いやり方？

OS 側での排列の変更について http://answers.microsoft.com/ja-jp/windows/forum/windows_8-ime/windows/6df7547e-c550-48ef-9569-c100bb9b8147?auth=1に記述があるが、これに倣ってもうまくゆかなかった。
Gitのリモートブランチがローカルでゾンビ化した場合の対処法

とあるプロジェクトで、気まぐれにブランチ一覧を確認したら消したはずのブランチが残って見えた。

```
$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
  remotes/origin/old_branch
```

消し忘れかな？と思って消そうとしたけど、やっぱりリモートリポジトリからは消えてるみたい。

```
$ git push origin :old_branch
error: unable to delete 'old_branch': remote ref does not exist
error: failed to push some refs to 'https://github.com/xxx/yyy'
```

調べてみるとリモートリポジトリ上で直接ブランチを消す等するとこんな状態になるみたい。
直すには`git remote prune`コマンドを使うと良い。

```
$ git remote prune origin
Pruning origin
URL: https://github.com/xxx/yyy
 * [pruned] origin/old_branch

$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
```

おお、消えた！

pruneって単語は聞き慣れないけど~~ミキプｒ~~「余計な枝を切り払う」という意味があるそうな。まさにイメージ通りですね・・・勉強になりました。
Loggerを使用している場合にFakeFSを使ったらNotImplementedErrorが発生する


# Intro

FakeFS

- https://github.com/defunkt/fakefs
- https://rubygems.org/gems/fakefs

[tee_logger](https://rubygems.org/gems/tee_logger)というGemのテストをしていて、RSpecでFakeFS使ったらはまったのでメモしておく。

```rb
require 'logger'
require 'fakefs'

Logger.new('log.log') # => NotImplementedError: NotImplementedError
```

# 原因

```
NotImplementedError: NotImplementedError
{your_app_path}/vendor/bundle/ruby/2.2.0/gems/fakefs-0.6.7/lib/fakefs/file.rb:462:in `flock'
```

`flock`はFakeFSではエラーを返すように実装されている。
https://github.com/defunkt/fakefs/blob/master/lib/fakefs/file.rb#L461

```rb
    def flock(*)
      fail NotImplementedError
    end
```

なぜにLogger.newで怒られるのかというと、ログファイルを文字列で指定したため、Loggerの中でファイル作成、オープンした際に`flock`を実行しているため。

# 対応

とりあえず下記のようにして回避した。
`file.sync  = true`はファイルを閉じるか`file.flush`とかしないとファイルに書き込まれないため。
Loggerの中でファイル操作した場合も`@dev.sync = true`とか`logdev.sync = true`とかしてる。

```rb
require 'logger'
require 'fakefs'

file = File.open('log.log', 'w+')
file.sync  = true
logger = Logger.new(file)
logger.debug 'hello'
```


# Loggerのソースを追ってみる

まず`Logger.new`で下記の`initialize`が実行される。
https://github.com/ruby/ruby/blob/ruby_2_2/lib/logger.rb#L311

```rb
  def initialize(logdev, shift_age = 0, shift_size = 1048576)
    @progname = nil
    @level = DEBUG
    @default_formatter = Formatter.new
    @formatter = nil
    @logdev = nil
    if logdev
      @logdev = LogDevice.new(logdev, :shift_age => shift_age,
        :shift_size => shift_size)
    end
  end
```

で、`LogDevice.new`で下記の`initialize`
https://github.com/ruby/ruby/blob/ruby_2_2/lib/logger.rb#L578

```rb
    def initialize(log = nil, opt = {})
      @dev = @filename = @shift_age = @shift_size = nil
      @mutex = LogDeviceMutex.new
      if log.respond_to?(:write) and log.respond_to?(:close)
        @dev = log
      else
        @dev = open_logfile(log)
        @dev.sync = true
        @filename = log
        @shift_age = opt[:shift_age] || 7
        @shift_size = opt[:shift_size] || 1048576
        @next_rotate_time = next_rotate_time(Time.now, @shift_age) unless @shift_age.is_a?(Integer)
      end
    end
```

`logdev`にファイル名の文字列を渡しているので`log`も文字列。
よって`if log.respond_to?(:write) and log.respond_to?(:close)`はfalseなので`open_logfile`が実行される。
https://github.com/ruby/ruby/blob/ruby_2_2/lib/logger.rb#L626

```rb
    def open_logfile(filename)
      begin
        open(filename, (File::WRONLY | File::APPEND))
      rescue Errno::ENOENT
        create_logfile(filename)
      end
    end
```
で、ファイルが存在しないので`rescue`で`crate_logfile`の実行になり
https://github.com/ruby/ruby/blob/ruby_2_2/lib/logger.rb#L626

```rb
    def create_logfile(filename)
      begin
        logdev = open(filename, (File::WRONLY | File::APPEND | File::CREAT | File::EXCL))
        logdev.flock(File::LOCK_EX)
        logdev.sync = true
        add_log_header(logdev)
        logdev.flock(File::LOCK_UN)
      rescue Errno::EEXIST
        # file is created by another process
        logdev = open_logfile(filename)
        logdev.sync = true
      end
      logdev
    end
```

で、`flock`。

# 未確認事項

https://github.com/ruby/ruby/blob/ruby_2_2/lib/logger.rb#L680
上記でも`flock`が見えるけど、そこまでは追いかけてません。
gitのdiff / 差分を zip 出力するコマンドをエイリアスに指定

## やりたいこと
1. gitで、特定のコミットからHEADまでの差分ファイルを
zipファイルにまとめる。

2. その処理を任意のコマンド名で実行する。

## モチベーション
1. 差分ファイルのみ納品・アップロードが必要な時に、
該当ファイルを目視確認でピックアップするのは大変。

2. 普段GUIのGitクライアント利用していて、コマンドを覚えておらず、
簡易な記述でコマンド実行したい。

## 一つのやり方
gitコマンドのAliasに実行したい関数を指定する。

### - 設定
僕の現時点での記述はこんな感じ。

```git-config:.gitconfig
[alias]
    ziff = "!f() { git archive --format=zip HEAD `git diff --diff-filter=d --name-only $1 HEAD -- $3` -o $2.zip;}; f"

    # git ziff [コミットのハッシュ] [zipのファイル名] [特定のディレクトリのみzipにまとめたい場合はディレクトリ名を指定]
```

今のところ引数を最低2つ指定して実行させる仕様。

### - 実行
``` git:
$ git ziff HEAD^ 20150909
```

このように実行すると、
HEADとその一つ前のコミットの差分ファイルが格納された、
20150909.zip が カレントディレクトリに生成される。
なお各ファイルはディレクトリ構造を保ったまま入ってる。

``` git:
$ git ziff HEAD^ 20150909 public
```

こう実行すると、``./public/``フォルダ内の差分ファイルのみが格納される。

## TODO 
- 引数にデフォルトの値を渡したい

## ドキュメント
[Git - git-diff Documentation](https://git-scm.com/docs/git-diff)
Railsにおける命名規則


## 目的

Railsのコントローラとかモデルを`rails generate`コマンドで生成するときに、特に複数単語のときにキャメル、スネークのどちらがいいのかなどに困ったので、まとめておく。
参考URL忘れた。


## コントローラ

### 単一単語の場合

|名称|例|
|:--:|:--:|
|コントローラ名|items|
|コントローラクラス名|ItemsController|
|ファイル名|items_controller.rb|

### 複数の単語の場合

|名称|例|
|:--:|:--:|
|コントローラ名|sales_point|
|コントローラクラス名|SalesPointController|
|ファイル名|sales_point_controller.rb|


### 詳細
* rails generateコマンドには、キャメルケースでもスネークケースでもどちらでも良い

	```次の結果が同じ
	rails g controller sales_point
	rails g controller SalesPoint
	```


## モデル

### 単一単語の場合

|名称|例|解説|
|:--:|:--:|:--:|
|モデル名|user|
|モデルクラス名|User|先頭大文字・単数形|
|ファイル名|user.rb|先頭小文字・単数形|
|テーブル名|users|先頭小文字・複数形|

### 複数単語の場合

|名称|例|解説|
|:--:|:--:|:--:|
|モデル名|cancel reason|
|モデルクラス名|CancelReason|先頭大文字・キャメル・単数形|
|ファイル名|cancel_reason.rb|先頭小文字・スネーク・単数形|
|テーブル名|cancel_reasons|先頭小文字・スネーク・複数形|

### generation構文

```
rails g model <model name> <column name>:<type> <column name>:<type> ...

例)
$ rails g model CancelReason user_id:integer reason_id:integer memo:text
      invoke  active_record
      create    db/migrate/20150908052600_create_cancel_reasons.rb
      create    app/models/cancel_reason.rb
      invoke    rspec
      create      spec/models/cancel_reason_spec.rb
```
lodash(Underscore.js)を使って複合キーでUniqueする


# キーが1つの場合

例: idキーでユニークにする
-> uniqメソッドにキーの文字列を渡す

```js
var objA = {
    id: 1,
    foreignKey: 1,
    name: 'objA',
    sort_order: 1
};
var objB = {
    id: 2,
    foreignKey: 1,
    name: 'objB',
    sort_order: 2
};
var objC = {
    id: 1, // idがobjAと重複!
    foreignKey: 1,
    name: 'objB',
    sort_order: 3
};


var result = _.uniq([objA, objB, objC], 'id'); 

// result
// [Object, Object]
// result[0]
// Object {id: 1, foreignKey: 1, name: "objA", sort_order: 1}
// result[1]
// Object {id: 2, foreignKey: 1, name: "objB", sort_order: 2}
```

# 複合キーの場合

例: foreignKeyとnameの複合キーでユニークにする
-> 比較するキーのオブジェクトを作成 -> JSON.stringifyして比較

```js
var objA = {
    foreignKey: 1,
    name: 'objA',
    sort_order: 1
};
var objB = {
    foreignKey: 1,
    name: 'objB',
    sort_order: 2
};
var objC = {
    foreignKey: 1, // foreignKeyがobjAと重複!
    name: 'objA',  // nameがobjAと重複!
    sort_order: 3
};

var result = _.uniq([objA, objB, objC], (obj) => {
    return JSON.stringify({
        foreignKey: obj.foreignKey,
        name: obj.name
    });
});

// result
// [Object, Object]
// result[0]
// Object {foreignKey: 1, name: "objA", sort_order: 1}
// result[1]
// Object {foreignKey: 1, name: "objB", sort_order: 2}
```

# 参考

* [lodash](https://lodash.com/docs#uniq)
* [Removing duplicate objects with Underscore for Javascript](http://stackoverflow.com/questions/9923890/removing-duplicate-objects-with-underscore-for-javascript)
Unity：テクスチャをGIF画像のようにアニメーションする（フォルダから読み込み）


UnityにてテクスチャをGIF画像のようにアニメーションする方法は、[「テクスチャをGIF画像のようにアニメーションする方法（直接設定）」](http://qiita.com/a_nishimura/items/330d246ad901f744f5c6)でも投稿しましたが、画像数が多いとかなり面倒。
なのでフォルダに格納してある画像を読み込む方法も作成したので、別の方法として投稿します。

#今回使用する機能
今回はUnityに用意されている「Resources.Load("対象のアセット名")」メソッドを使用します。
このメソッドは「Assets/Resources」内のアセットに直接アクセスするためのメソッドになるので、アセット名が間違えていると読み込みができないので注意してください。

#事前準備
**Resourcesフォルダの作成**
Resources.Load("対象のアセット名")」は「Resources」フォルダにアクセスするため、まず「Assets」以下に「Resources」フォルダを作成してください。

**イメージ画像用フォルダを準備**
イメージ画像を格納するフォルダを作成し、先ほど作成した「Resources」フォルダ内に置いてください（フォルダ名は任意）。
そのフォルダにアニメーションするイメージ画像を置いてください。

**イメージ画像のファイル名設定**
アニメーションしたい順に、ファイル名を１から連番で設定してください。
例：gif_1、gif_2、gif_3 ...
※このファイル名の「gif_」部分は任意ですが、必ず統一してください。
 


#Script
ではスクリプトになります。

```csharp:C#
using UnityEngine;
using System.Collections;

public class GifTextureFolderScript : MonoBehaviour {
	
	public GameObject obj;
	public float changeFrameSecond;
	public string folderName;
	public string headText;
	public int imageLength;
	private int firstFrameNum;
	private float dTime;
	
	// Use this for initialization
	void Start () {
		firstFrameNum = 1;
		dTime = 0.0f;
	}
	
	// Update is called once per frame
	void Update () {
		dTime += Time.deltaTime;
		if (changeFrameSecond < dTime) {
			dTime = 0.0f;
			firstFrameNum++;
			if(firstFrameNum > imageLength) firstFrameNum = 1;
		}
		Texture tex = Resources.Load(folderName + "/" + headText + firstFrameNum) as Texture;
		obj.renderer.material.SetTexture ("_MainTex", tex);
	}

}
```

#設定方法
※参考画像
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/86347/1e76b4ec-962c-6448-05e3-0ac128508381.jpeg)

それでは設定です。
今回は「faceFolder」フォルダにある[face_1, face_2, face_3]画像を切替アニメーションしていきます。

（設定手順）
適当なオブジェクトに「GifTextureFolderScript」を設定。
　↓
「obj」欄にテクスチャを貼る対象のGameObjectをセットする。
　↓
「Change Frame Second」に切替間隔の秒数をセットする。
　↓
「Folder Name」にイメージ画像が格納されているフォルダ名をセットする。
　↓
「Head Text」に連番前のファイル名をセットする。
※例：ファイル名が"face_1"なら「face_」と記述する。
　↓
「Image Length」にイメージ画像の数をセットする。

***

設定が完了したので、実機、もしくはエミュレータで確認してください。
アニメーションができていればOKです。

#まとめ
今回は画像数が多いものに対応するため、このスクリプトを作成しました。
[前回](http://qiita.com/a_nishimura/items/330d246ad901f744f5c6)のものより簡単ですが、アニメーションする画像数が多くなるほどメモリ不足の心配が出てくるので注意してください。
開発チームで利用するXCodeバージョンを固定する


XCodeのマイナーバージョン違いでも微妙に挙動が違う事があるので、開発メンバー・CI環境はバージョンを統一しておいたほうが無難。

Run Script Phaseにこのようなスクリプトを仕込んでおくと、うっかり古いXCodeバージョンでプロジェクトをビルドしようとするとエラー終了させられる。

```
# 6.4
if [[ $XCODE_VERSION_ACTUAL != "0640" ]]; then
  echo "error: Check your XCode version."
  return -1
fi
```

この例だとXCode6.4以外でビルドするとエラー終了。

Run ScriptでXCodeビルドをエラーで落とす方法は"error:"で始まる文字列をechoするだけで良いらしい。warningを出したい場合も似たような感じで、ここを参考にした。
[Run Script Phase reporting - NSHint](http://nshint.io/blog/2015/07/23/run-script-phase-reporting/)

特にCI用のMacサーバとかはXCodeのアップデートを忘れやすいので、こういうのを入れておくと便利かもしれない。
Atom.ioで公開しているパッケージのダウンロード数をGoogleAppsScriptで可視化する

最近Atomのパッケージを何個か作って公開しています。

[nobuhito's Packages](https://atom.io/users/nobuhito/packages)

Atom内からもパッケージの検索ができるので特に宣伝しなくてもダウンロード数が増えたりするのですが、なんでも可視化したい可視化坊としては増えていく推移を見ながらニヤニヤしたくなるわけですね。

ということで、手っ取り早くGoogleSpreadsheetとGoogleAppsScriptで実装してみました。

まず事前準備として、適当な名前でSpreadsheetを作成して「ツール > スクリプトエディタ...」を選択して「空のプロジェクトを作成」でプロジェクトを作成。

開いたScriptEditorの「コード.js」に以下のコードを貼り付ける。

```gas
function main() {
  var api = "https://atom.io/api";
  var sheet = SpreadsheetApp.getActiveSheet();
  var lastCol = sheet.getDataRange().getLastColumn();
  if (lastCol > 1) {
    sheet.insertRowAfter(1);
    var datetime = Utilities.formatDate(new Date(), 'JST', 'yyyy/MM/dd HH:mm');
    sheet.getRange(2, 1).setValue(datetime);
    for (i=2; i <= lastCol; i++) {
      var packageName = sheet.getRange(1, i).getValue();
      var json = JSON.parse(UrlFetchApp.fetch(api + "/packages/" + packageName));
      sheet.getRange(2, i).setValue(json["downloads"]);
    }
  }
}
```

「ファイル > 保存」を選択して適当な名前で保存。
「リソース > 現在のプロジェクトのトリガー」を選択して、main関数を任意の時間で起動するように設定。

ScriptEditorを閉じてSpreadsheetに戻り、1行目のB列以降にパッケージの名前を列挙。

そして、指定した時間待つとどんどんデータが入ってくるはずですので、適当にグラフを作るとこんな感じになります。

![Graph](https://docs.google.com/spreadsheets/d/1QHBtUYfijjswbdHcVhJYMxuS-mrcxpeeqc9o9hkc10k/pubchart?oid=1505923416&format=image)

グラフの公開も含めてお手軽すぎて涙が出てきそうですね。
unity > 時系列グラフの描画 > timeGraph > UDPでデータを受信

```txt:実装
Unity 5.1.2-f1 on MacOS X 10.8.5
```

http://qiita.com/7of9/items/0a393470123815775617
の続き。

UDPで受信したデータをグラフにしたいというのが目指しているところ。

##code

[v0.2 @ github](https://github.com/yasokada/unity-150908-udpTimeGraph/releases/tag/v0.2)

UDPからの受信したデータをグラフにセットする実装をした。

スクリプトは以下がある

- dataSetterScript.cs : 徐々に減少する線のデータをtimeGraphにセット
- MyNetUtil.cs : IPアドレスの取得に使用
- timeGraphScript.cs : 時系列グラフの描画
- udpReceiverScript.cs : UDP受信。受信した数値をtimeGraphにセット


## 実行例

12時48分頃にUDP(ポート6000)にて以下を送信した。
`-0.3`

![example.png](https://qiita-image-store.s3.amazonaws.com/0/32870/edb5fcd8-5df8-b8a9-142b-35d80e9b479c.png)

12時48分頃のところで線が垂直に折れ曲がっている。
これは、もともと徐々に減少していく線の描画に加えて、UDP送信したデータが混ざったのでこうなっている。

とりあえず、UDP送信したデータをグラフの点としてセットできるのがわかった。
度数分布


ハンバーガー統計学をRで解いてみました。
http://kogolab.chillout.jp/elearn/hamburger/chap1/sec2.html

2015/09/11追記
hist関数利用時のオプションをbreaksからrightに変更しました。
@r-de-r さん、アドバイスありがとうございました。

## 分布を調べる

hist関数を利用することで分布図を作成することが可能。
参考:biostatistics(2015.05.04) [ヒストグラム](http://stat.biopapyrus.net/graph/hist.html)

なお、
>breaks＝階級の仕切り、mids＝階級値、counts＝度数　であり
>左開き(＜)～右閉じ(≦) として度数を数えますので、これを以下の度数分布表が得られます

出典:[備忘録 はじめてのR（その４）](http://www.econ.hokudai.ac.jp/~kakizawa/R/R_4.html)

とのこと。ハンバーガー統計学の問題では≦ ~ <(以上～未満)の仕切りとなっているため、~~breaksオプション~~ rightオプションの設定が必要。

> right:
> logical; if TRUE, the histogram cells are right-closed (left open) intervals.

出典: [マニュアルより](https://stat.ethz.ch/R-manual/R-devel/library/graphics/html/hist.html)



### ワクワクバーガーの分布

```r:waq2_potato_hist
> waq_h <- hist(waq2$V1, right=FALSE)
> waq_h$count
[1]  0  0  1 12 19 14  3  0
```

### モグモグバーガーの分布

```r:mog2_potato_hist
> mog_h <- hist(mog2$V1, right=FALSE)
> mog_h$count
[1]  1  0  5 13 10  9  7  4
```

## 所感

この程度の処理であればExcelの方が早いかもな。
Unity：テクスチャをGIF画像のようにアニメーションする（直接設定）

UnityではオブジェクトのテクスチャにGIF画像を設定できないみたいなので、テクスチャをGIF画像っぽく切り替えるスクリプトを作成してみました。
※もしテクスチャにGIF画像を設定する方法があれば、ご教授ください f^_^

#Script (C#)

```csharp:C#
using UnityEngine;
using System.Collections;

public class GifTextureScript : MonoBehaviour {

	public Texture[] textures;
	public GameObject obj;
	public float changeFrameSecond;
	private float dTime;
	private int frameNum;
	
	// Use this for initialization
	void Start () {
		dTime = 0.0f;
		frameNum = 0;
	}
	
	// Update is called once per frame
	void Update () {
		dTime += Time.deltaTime;
		if (changeFrameSecond < dTime) {
			dTime = 0.0f;
			frameNum++;
			if(frameNum >= textures.Length) frameNum = 0;
		}
		gameObject.renderer.material.SetTexture ("_MainTex", textures[frameNum]);
	}

}
```


#設定方法
作成したスクリプトをUnityのオブジェクトに設定します。

※参考画像
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/86347/07ccbc5a-360f-6fff-7044-6919758ddbfc.jpeg)


（手順）
作成したスクリプトを適当なオブジェクトに組み込む。
　↓
「Textures」のSizeに画像数をセットする。
　↓
Sizeの数に合わせて「Element」の欄が表示されるので、０から切り替える順に画像をセットする。
　↓
「obj」欄にテクスチャを貼る対象のGameObjectをセットする。
　↓
「Change Frame Second」に切替間隔の秒数をセットする。

***

これで設定が完了です。
実機及びエミュレータで確認してみて、GIF画像のようにアニメーションしていればOKです。

#他の方法
今回はイメージ画像をUnityのインターフェースから直接設定しましたが、画像数が多いと面倒になります。
以下の投稿に画像数が多いとき用の方法も投稿したので、良ければご参考にしてください。
>[【投稿】テクスチャをGIF画像のようにアニメーションする（フォルダから読み込み）](http://qiita.com/a_nishimura/items/d1c33b3c3e3c5189f36a)
UIViewを非表示にしたときに、位置を縦詰めする方法

2016/7/8追記: 現在なら、UIStackView(iOS9.0未満の場合は、FDStackView)を使えばとても簡単に実現できます。
UIStackViewなら、非表示時にアニメーションをすることも簡単にできます。

- [Easy Animation with UIStackView](https://medium.com/@nrewik/easy-animation-with-uistackview-8878b2856ae2#.bf7r7c6hk)

# Problem

* 表示/非表示を切り替えられるViewがあり、非表示にしたときは空間を開けないように位置を縦詰めしたい。

# Solution

* Viewを非表示にするときはAutoLayoutのHeightの制約の高さを0にし、表示するときは高さを元に戻すように実装します。

## 実装例
```swift
  @IBOutlet weak var label: UILabel!
  @IBOutlet weak var labelHeightConstraint: NSLayoutConstraint! // Storyboardのlabelのheightの制約と関連づける
    
  // 表示/非表示を切り替え
  func setVisible(visible: Bool) {
    if visible {
      label.hidden = false
      labelHeightConstraint.constant = 44
    } else {
      label.hidden = true
      labelHeightConstraint.constant = 0
    }
  }
```
IT女子のゼロから始めるIoTーステップ2: Raspberry pi2とNodejsでボタン+Lチカ

[前回の投稿](http://qiita.com/aikumi/items/d9627aa46cbb2eb2b9b0)からの続きです。

前回はLEDを光らせるまででした。今回はそれにボタンをつけ、
ボタンを押す → LEDが光る というものを作成しました。

# 習得できた知識
* Linuxコマンド
* Node.js + JavaScript でchild_process.execの実行
    * 以下のコードのように処理結果を受け取ることができる

```lang:child_process
var exec = require('child_process').exec;
exec('[コマンド]', function (error, stdout, stderr) {
     //[コマンド]の実行結果をfunctionの中で受け取り、処理することができる
});
```
* Node.js + JavaScript でファイルを書く
    * 以下のようにファイルへの書き込みができる

```lang:writeFileSync
var fs = require('fs');
fs.writeFileSync('[ファイル]', '[内容]');

→ これで [ファイル] に [内容] が書き込まれる
```

# 用意したもの
* Raspberry pi2
* LEDライト その他 → [Raspberry Pi 電子工作入門キット](http://www.amazon.co.jp/%E3%83%8F%E3%83%83%E3%82%AF-%E3%83%A9%E3%82%BA%E3%83%99%E3%83%AA%E3%83%BC%E3%83%91%E3%82%A4-Raspberry-Pi-%E9%9B%BB%E5%AD%90%E5%B7%A5%E4%BD%9C%E5%85%A5%E9%96%80%E3%82%AD%E3%83%83%E3%83%88%E3%80%82/dp/B00G86DOP8#productDetails)を購入

# Raspberry piとLEDライトとボタンをつなぐ
私はここでとても苦戦しました。
LEDとボタンってどんな風につなぐのだろう・・・？
と思うままに繋いでみると、LEDから煙が出ました。
そこで、以下のように2つに分けて考えてつなぎました

* 1つめ:LEDが光る経路を作る(青で示した経路)
    * 8番ポートとGNDを使う
    * 8番ポート → LED → GND と電気が流れてLEDが光る
    * 繋ぎ方は[前回の投稿](http://qiita.com/aikumi/items/d9627aa46cbb2eb2b9b0)参照

* 2つめ:ボタンのON, OFFの流れをつくる（赤で示した経路）
    * 25番ポートと5Vを使う
    * 5V → ボタン → 25番ポートを繋ぐ
    * → これでボタンが押されたら25番に電気が流れるようになる
    * 25番ポートのdirectionを入力(in)と設定
    * 電気が25番ポートに流れたら(ボタンが押されたら) → 25番ポートの出力が「1」
    * 電気が8番ポートに流れたら(ボタンが離されたら) → 25番ポートの出力が「0」

* 上の二つをつなげてみる
![button.jpeg](https://qiita-image-store.s3.amazonaws.com/0/76550/5bad935a-0206-fac0-8db9-c94ddc021786.jpeg)

# 実行する
* ボタンが押されているかどうか確認する
    * 押されていたらLEDを光らせる
    * 押されていなかったらLEDを消す

```lang:button_sample.js
// 8番にoutを指定する
var fs = require('fs');
fs.writeFileSync('/sys/class/gpio/export', '8');
fs.writeFileSync('/sys/class/gpio/gpio8/direction', 'out');

var exec = require('child_process').exec;

function kurikaesiFunc(){
    exec("cat /sys/class/gpio/gpio25/value", function(error, stdout, stderr){
    //"cat /sys/class/gpio/gpio25/value"の実行結果(0 or 1)はstdoutに入る

    if(1 == stdout){
         // ボタン押されている
         fs.writeFileSync('/sys/class/gpio/gpio8/value', '1');
    } else {
         // ボタン押されてない
         fs.writeFileSync('/sys/class/gpio/gpio8/value', '0');
    }
    setTimeout(kurikaesiFunc, 0); //繰り返し実行させる
    });
}

exec("echo 25 > /sys/class/gpio/export",function(){
exec("echo in > /sys/class/gpio/gpio25/direction",kurikaesiFunc);
});
```
# ボタンで光った

![20150908_124839_259.jpeg](https://qiita-image-store.s3.amazonaws.com/0/76550/0ffed032-e05c-fc3e-c624-0000a7750a3c.jpeg)
JavaScriptでカタカナをひらがなに変換する(その逆も)

よく忘れるのでメモ。


カタカナをひらがなに変換する

```javascript
var str = 'アイウ';
kanaToHira(str); //あいう

function kanaToHira(str) {
	return str.replace(/[\u30a1-\u30f6]/g, function(match) {
		var chr = match.charCodeAt(0) - 0x60;
		return String.fromCharCode(chr);
	});
}
```

ひらがなをカタカナに変換する

```javascript
var str = 'あいう';
hiraToKana(str); //アイウ

function hiraToKana(str) {
	return str.replace(/[\u3041-\u3096]/g, function(match) {
		var chr = match.charCodeAt(0) + 0x60;
		return String.fromCharCode(chr);
	});
}
```
UINavigationControllerとUITabBarControllerを組み合わせてるときのUITabBarItemのバッジの出し方

直接TabBarItemを参照してバッジがセットできないときはTabBarがnavigationControllerにembeddedされてるからなので下記のように設定してあげるとOKです。

```swift
override func viewDidLoad() {
    self.navigationController.tabBarItem.badgeValue = @"GO";
}
```
2015年いっぱいでOpenSSL0.9.8のアップデートが無くなる？

## CentOS5をまだ使っているリスク～OpenSSLのサポート期限

CentOS5で普通にyumでOpenSSLをインストールしてWebサーバと使っているものがあるのですが、ちょっと気になるニュースがありました。

* CentOS5の提供しているOpenSSLは0.9.8系ですが、OpenSSL 0.9.8のメンテナンスは2015いっぱいとなります。
https://www.openssl.org/blog/blog/2014/12/23/the-new-release-strategy/
* CentOSのサイトでも話題になっていて、Redhat/CentOS系は重大な脆弱性はbackport修正はするようです
https://www.centos.org/forums/viewtopic.php?f=24&t=51408

## クレジットカード処理におけるTLS 1.0の使用が非推奨に

PCI SSC（クレジットカードのセキュリティ標準を定める団体）発表
http://pcireadycloud.com/blog/2015/06/02/283/
http://security.srad.jp/story/15/06/01/0555202/
<del>※クレジットカード系のシステムはTLS1.0は2016/6/30で使用禁止のようです</del>
→2015/12/18付けで非推奨期限が2016/6/30→2018/6/30に延期されたようです。
（苦情が多くて折れたという噂）
https://www.pcisecuritystandards.org/pdfs/15_12_18_SSL_Webinar_Press_Release_FINAL.pdf

それに伴い、予定していた仕様変更を撤回する決済業者も出てくるかもしれません。。。

## SSLのプロトコルの設定は厳しくすればするほどいいのか？

### そんなことはない

http://www.ipa.go.jp/files/000045645.pdf
のp19～プロトコルバージョンの設定参照

* 高セキュリティ型
* 推奨セキュリティ型
* セキュリティ例外型
    
 とあるように、SSL導入しているものの中でも、どのレベルの要求があるのか検討した上で対応したい

### まとめ

* CentOSのOpenSSLは2015-12-31を過ぎても脆弱性修正はしてくれる
* CentOS5のサポート期限（2017-03-31）を迎えるので早い目にOSを新しくしておいた方が無難でしょう   
* クレジット決済システムなど、高セキュリティ要求のある場合は注意が必要

### 参考: 対策としてCentOS6以上に載せ替えの場合

| Version | OpenSSL | Apache | 注意点 |
|:-------:|:-------:|:------:|:------|
|       CentOS 5.X | 0.9.8e   | 2.2.3  | OpenSSL0.9.8（TLS, SHA1）が2016/12/31終了、SNIが使えない、TLS1.1以上が使えない |
|       CentOS 6.X | 1.0.1e   | 2.2.15 |  |
|       CentOS 7.X | 1.0.1e   | 2.4.6  | Apache2.4系から設定ががらっと変わる |
Qiitaの記事タイトルとURLを楽にコピーするブックマークレット作ってみた

Qiitaの記事を知人、友人に紹介する時がありますよね？
そんな時twitterなどではなくメールで送信する際に使えるかと思い、作成しました。

実行すると小さなテキストエリア付きウィンドウが出てきて、テキストエリアをクリックすると全選択できます。
右側に削除ボタンがあるのでウィンドウはそこをクリックし削除してください。

即時関数の中なのでtextNodeを使わず、innerHTMLを使っていたり、
内部で作成したelementに対してイベントリスナー等を使わずにそのままイベントをつけていたりします。
以下のコードをブックマークする事で使用できます。

```js
javascript:void (function (document){
  var _url=location.href;
  
  if(_url.split("/")[4]!="items"){return;}
  
  _url=_url.split("?")[0] || _url;
  var _title=document.getElementsByTagName("h1")[0].innerHTML;
  var _body=document.body || document.getElementsByTagName("body")[0];
  var _window=document.createElement("div");
  _window.setAttribute("style","z-index: 9999;position: fixed;top: 0px;bottom: 0px;left: 0px;right: 0px;width: 50%;height: 50%;margin: auto;padding: 1%;border-radius: 5px;background: #666;");
  var _closeButton=document.createElement("div");
  _closeButton.setAttribute("style","z-index: 9999;position: absolute;width: 5%;height: 100%;top: 0px;right: 0px;background: #f93;text-align: center;border-radius: 5px;font-size: 150%;cursor: pointer;");
  _closeButton.onclick=function (){
    var _parent=this.parentNode;
    _body.removeChild(_parent);
  };
  _closeButton.onmouseover=function (){
    this.style.backgroundColor="#fa6";
    this.style.color="#666";
  };
  _closeButton.onmouseout=function (){
    this.style.backgroundColor="#f93";
    this.style.color="#000";
  };
  var _closeButtonIcon=document.createElement("p");
  _closeButtonIcon.setAttribute("style","position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;height: 1em;width: 1em;margin: auto;padding: 0;font-weight: bold;user-select: none;");
  _closeButtonIcon.innerHTML="×";
  _closeButton.appendChild(_closeButtonIcon);
  var _textArea=document.createElement("textarea");
  _textArea.innerHTML=_title+"\r\n"+_url;
  _textArea.setAttribute("style","width: 95%;height: 100%;padding: 1%;text-align: center;border-radius: 5px;border: none;resize: none;");
  _textArea.onfocus=function (){
    this.select();
  };
  _window.appendChild(_textArea);
  _window.appendChild(_closeButton);
  _body.appendChild(_window);
}(document));
```

思いついてガリガリ書いたものの使うことあるのだろうか……？

追記:
GreaseMonkeyスクリプトにもしてみた
[Qiitaの記事タイトルとURLを楽にコピーするブックマークレットをGreaseMonkeyスクリプトにしてみた](http://qiita.com/Cf_cwd/items/a2f5a131fa852fb21d4f)

更に追記:
マークダウン記法のコピーとEscキーで閉じる機能が追加されました
[Qiitaの記事タイトルとURLを楽にコピーするブックマークレットを改良してみた](http://qiita.com/Cf_cwd/items/08cabafd0bface17bd55)
CSSのみでボーダーをスタイリッシュにアニメーションさせる

#はじめに
何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :)

**[動作イメージ]**
![mouse-over1.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/86064bd9-3dfa-7e7b-df06-3015349d5494.gif)



> なお実際の動作・ソースは以下で確認ができます
> http://codepen.io/nekoneko-wanwan/pen/EVjdvX
> http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/


#仕組み
実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に`::before`, `::after`を設定して、それぞれ四隅に配置し、`:hover`でサイズを100%にする動作をtransitionしているだけです。


#コード
```.html
<a href="#" class="button change-border01">
  <span class="change-border01__inner">mouse over</span>
</a>
```

```.css
a {
  display: inline-block;
  color: #3498db;
  text-decoration: none;
}
.button {
  border: 1px solid #eee;
  padding: 10px 40px;
  position: relative;
}
/* Effect1
 *************************************** */
/* 擬似要素の共通スタイル */
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #3498db;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.change-border01::after {
    width: 0px;
    height: 1px;
    top: -1px;
    left: -1px;
}
/* 右下へ配置 */
.change-border01::before {
    width: 0px;
    height: 1px;
    right: -1px;
    bottom: -1px;
}
/* 左下へ配置 */
.change-border01__inner::after {
    width: 1px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}
/* 右上へ配置 */
.change-border01__inner::before {
    width: 1px;
    height: 0px;
    top: -1px;
    right: -1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 1px);
}
```


#ポイント

- 色を変える場合は、擬似要素の`background-color`を変更します
- borderの太さを変える場合は、擬似要素の`height` or `width`を変更します
- `calc(100% + 1px)`は、隙間を埋めるために指定しています
- 四隅だけでなく配置する位置を変えるとまた面白い動きができるかもしれません
- 角丸には対応できないのが残念

**[逆バージョン]**
![mouse-over2.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/0a874ff9-9184-f65e-b080-329d64001cd2.gif)



#応用
応用として少しアニメーションの仕方を変えてみます。

**[動作イメージ]**
![mouse-over3.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/4773bc4b-5c8c-75a5-79ff-2976f135d162.gif)


- 各擬似要素の発動タイミングを`duration-delay`でズラす
- hover時は`transition:none;`をすることで、マウスアウトのみにアニメーションさせる

```.css
.change-border01::after {
// 省略
  transition-delay: .9s;
}
.change-border01::before {
// 省略
  transition-delay: .3s;
}
.change-border01__inner::after {
// 省略
  transition-delay: 0s;
}
.change-border01__inner::before {
// 省略
  transition-delay: .6s;
}
/* hover */
.change-border01:hover::after,
.change-border01:hover::before,
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  transition: none;
}
```