OmniAICreator/Qiita-1.07M huggingface dataset:
jQuery.on()は追加式なのでイベントの重複登録に注意しよう

# はじめに

jQuery.on()は動的に追加したDOMに対しても簡単にイベントを追加できる便利なメソッドです。一方でaddEventListenerとは異なり、全く同じイベントでも重複登録できてしまうため、注意が必要となるケースがあります。

基本的な知識かもしれませんが、見落としてしまったので備忘録として残しておきたいと思います。これ以上被害者が増えませんように......

> jQuery.click()とかでも同じです


# 目次

- はじめに
- どういった時に何が起きるか
- 重複を回避するには
  - addEventListenerを使う
  - on()と同時にoff()を使う
- おまけ
- 終わりに





# どういった時に何が起きるか

ページ読み込み時に一回イベントを設定するだけであれば、問題は起こりません。
しかし、以下のようなイベント登録が**複数回処理されうる**場合は注意が必要です。

```ボタンが押されたらDOMにクリックイベントを設定する.js
var fnc = function() {
  console.log('押された！');
};

$('button').on('click', function() {
  $('#dom').on('click', fnc);
});
```

**[動作イメージ]**
![anim.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/5a776f3e-75a5-941e-e17b-80dec011e6b2.gif)


一見問題なく動いているように見えます。
しかし連続してクリックすると......

![anim2.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/c9189ee3-5741-92a0-6e59-3eaf98aa727d.gif)




なんということでしょう......
クリックした分だけ関数が重複処理されてしまいました。

このサンプルコードは単純なためまだ気づきやすいですが、実際に複雑な処理が絡まってくると見落とすかもしれません。





# 重複を回避するには

そもそもイベント設定は一回だけの設計にすれば良いのですが、それができない・やりたくない場合もあるかと思います。そんな時には以下のような回避策を取ることができます。


## addEventListenerを使う

jQueryメソッドはやめて、普通のEventListenerを使います。それだけで重複登録を防ぐことができます。

```代わりにaddEventListenerを使う.js
$('button').on('click', function() {
  $('#dom')[0].addEventListener('click', fnc);
});
```

> [引用]
> 複数の同一の EventListener が、同じ EventTarget に同じ引数で登録された場合、重複するインスタンスは反映されません。EventListenerが2度呼び出されることはなく、重複するインスタンスは反映されない

> https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener


ただしDOM自体が動的生成される場合など、これだけでは対応しきれないケースもあります。


## on()と同時にoff()を使う

.on()実行の前に一旦.off()でイベントを削除することで重複登録を防ぐことができます。
.on()はまだ存在しないDOMへのイベント設定も可能なため、前述のaddEventListenerだけでは対応しきれないケースにも使えます。

```off()を使う.js
$('button').on('click', function() {
  $('#dom').off('click');
  $('#dom').on('click', fnc);
});
```

### .off()を使う時の注意点

.off()は指定されたセレクタに対し、jQueryで登録したイベントを全て削除するため、更に別でイベント登録していると巻き込んでしまいます。

```off()は他で登録したイベントも巻き込んで削除してしまう.js
$('#dom').on('click', function() {
  console.log('hoge');
});

$('button').on('click', function() {
  $('#dom').off('click');  // ここで
  $('#dom').on('click', fnc);
});
```

**[動作イメージ]**
![anim3.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/1283afac-0118-f44d-d34e-8e2049946c9b.gif)



最初に設定していたconsole.log('hoge');が消えてしまっています。
これは名前空間を指定することで回避できます。名前空間は以下のようにして設定することができます。

```名前空間を設定する.js
$('#dom').on('click', function() {
  console.log('hoge');
});

$('button').on('click', function() {
  $('#dom').off('click.namae');
  $('#dom').on('click.namae', fnc);
});
```

**[動作イメージ]**
![anim4.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/9a628c9c-e772-1fd5-fd3e-4110f7031359.gif)

console.log('hoge');の方は消えずに、またイベントも重複処理されていないことが分かります。





# おまけ
いつ頃からか、Chrome Devtools上でjQueryで設定したイベントを直接見ることができるようになっていました。これを使えばパッと見ておかしいことに気づきやすくなりますね！
※Framework listenersにチェックが入っている必要があります

**[動作イメージ]**
![anim5.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/e9e4a27b-873d-92b7-ef6f-6c701e8b84d5.gif)





# 終わりに

jQuery.on()を意識せず使いまくっていると困ることがあるかもしれないよ、という実体験に基づくお話でした。

※他にも既に同じイベントが登録されているかどうかで条件分岐、という手段も考えましたが処理が冗長になるだけかと思い掲載していません。
Overflowを指定した際に日付ピッカーの表示位置がずれる時は

#こんな時

###こうしたいのに
![スクリーンショット 2016-02-01 13.55.36.png](https://qiita-image-store.s3.amazonaws.com/0/26378/0941ed7e-c715-e236-e0bb-615f19552aa3.png)

###こうなって困っちゃう
![スクリーンショット 2016-02-01 13.55.11.png](https://qiita-image-store.s3.amazonaws.com/0/26378/b23cfe9d-2e33-0d29-393b-5322750274ab.png)


#問題
日付ピッカーの表示位置を計算する際に、位置の基準となるエレメントを正しく指定できていないため起こる現象です。

#対処法
基準としたいエレメントに`position`スタイルを指定します。

```html:LognWidthTable.vfp
<apex:page standardController="Account">
    <apex:pageBlock title="My Content">
        <apex:form>
            <!-- これだと日付ピッカーが飛んで行く
            <apex:outputPanel  layout="block" style="overflow:auto;width:300px;height:250px;" >-->
            
            <!-- これだと日付ピッカーが正しい位置にくる -->
            <apex:outputPanel  layout="block" style="overflow:auto;width:300px;height:250px;position:relative;" >
                <apex:pageBlockTable value="{!account.Contacts}" var="item">
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/>  
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column value="{!item.name}"/> 
                    <apex:column headerValue="誕生日">
                        <apex:outputField value="{!item.Birthdate}">
                            <apex:inlineEditSupport event="ondblclick" showOnEdit="update"/>
                        </apex:outputField>    
                    </apex:column>
                </apex:pageBlockTable> 
            </apex:outputPanel>
        </apex:form>
    </apex:pageBlock> 
</apex:page>

```
Rails研修課題

## 知識
* HTML
* CSS
* Ruby
* Javascript

## スケージュル
### 一週目
* Rails環境セットアップ
* RailsのMVC知識を勉強する
* Railsアセット知識を勉強する
* パーフェクト Ruby on Railsの実践の通り勉強会のサイトを作る

### 二週目
* connpassサービスのAPIを使って、勉強会サイトの機能を充実する

## 内容

### 第一週月曜日
* 環境セットアップ：http://qiita.com/Xiangshen-Meng/items/e98a89db80e86e43662c
* Linuxコマンド入門：http://dotinstall.com/lessons/basic_unix
* Coffeescript入門：http://coffeescript.org/
* Sassの勉強：http://sass-lang.com/guide （練習であれば、railsプロジェクトを作成して、gem 'sass-rails'を入れて、練習しましょう）
* Bootstrapの勉強：http://getbootstrap.com/css/

### 第一週火曜日
* GitとGithubの開発流れ：本「GitHub実践入門」または https://www.atlassian.com/git/tutorials/setting-up-a-repository
* 勉強会のRailsプロジェクトを作る、githubにデプロイする（Organizationのレポを作成する）
* developmentブランチを切り替えする
* Helloページを作って、commitする
* MasterにPull Request（PR）を作成する
* コードレビューして、マージする
下記はForkの練習
* Organizationのレポから自分のレポにforkする
* Organizationのレポにコードを更新する
* 自分のレポを同期して、OrganizationのレポにPRを出す

### 第一週水曜日
* 詳しく「パーフェクト Ruby on Railsの実践」に参考してください。
* Bootstrapを使って、twitterログイン機能を実装する
* イベントを作成、編集、削除機能を実装する

### 第一週木曜日
* 詳しく「パーフェクト Ruby on Railsの実践」に参考してください。
* イベントの申し込み、キャンセル（Bootstrapのモーダルを使う）
* 退会機能を作る
* Railsの基本を復習する：http://guides.rubyonrails.org/getting_started.html
* Rubyの基本コードStyle：https://github.com/bbatsov/ruby-style-guide

### 第一週金曜日
* Deviseを導入、Userモデルを修正する：https://github.com/plataformatec/devise
* Github連携のログインを実装する

### 第二週月曜日
* データベースのSeedファイルを作成して、50個のイベントデータを作成する
* will_paginateを導入して、イベントのページネーションを実装する：https://github.com/mislav/will_paginate
* refileを導入して、イベントの紹介画像機能を追加する（backendはfile systemにする）：https://github.com/refile/refile

### 第二週火曜日
* connpassのAPIを確認する：http://connpass.com/about/api/
* APIを取得できるrake taskを作る：http://guides.rubyonrails.org/command_line.html#custom-rake-tasks （2.10 Custom Rake Tasks）
* wheneverを導入して、API取得タスクを定期的（１０分間一回などテストで）に実行する：https://github.com/javan/whenever

### 第二週水曜日
* Railsのjavascriptを勉強する：http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html
* イベントに”いいね”機能を追加する
* 自分の”いいね”一覧とイベント”いいね”ユーザー一覧を追加する（Option、時間があれば）

### 第二週木曜日
* Railsメーラー：http://guides.rubyonrails.org/action_mailer_basics.html
* mailtrapを導入する：https://mailtrap.io/
* イベントの申し込み後、メール通知機能を作る （Option、時間があれば）
* メール送信機能を非同期処理でやる：http://guides.rubyonrails.org/active_job_basics.html （Option、時間があれば、sidekiqなども試して)

### 第二週金曜日
* レビュー＋振り返
* 未完成の部分を完成する、自分が作りたいところを作る

## 参考資料
* Linuxコマンド入門ビデオ：http://dotinstall.com/lessons/basic_unix
* Sassドキュメント：http://sass-lang.com/guide
* Rails入門資料：http://guides.rubyonrails.org/getting_started.html
node.jsでUnicodeテキストだけをエスケープする

#はじめに
TinyMCEの本体やプラグインなどでは、言語リソースファイルは Unicode 文字がエスケープされて書かれていますが、

```javascript:ja.ls
tinymce.addI18n('ja',{
        moxiemanager_insert:"\u30D5\u30A1\u30A4\u30EB\u306E\u633F\u5165"
});
```

素の UTF-8 のテキストをこんな感じに変換してくれる方法がちょっと検索しても見つけられなかったので書いてみました。java で言う native2ascii みたいなものです。

#使い方
こんな感じです。出力ファイル名は省略可能で、その時は標準出力に書き出します。
```bash
% node escapeUnicode.js [入力ファイル] [出力ファイル(省略可)]
```

# ソースコード
```javascript:escapeUnicode.js
var argc = process.argv.length;

if (argc != 3 && argc != 4) {
    console.log("node escapeUnicode.js [nameFileRead] [nameFileWrite]");
    return;
}

var nameFileRead = process.argv[2];
var nameFileWrite = process.argv[3];

var fs = require("fs");

var text = null;
try {
    text = fs.readFileSync(nameFileRead, "utf8");
} catch (e) {
    console.log("fs.readFileSync(): Caught exception: " + e);
    return;
}

text = text.replace(/[\u0080-\uffff]+/g, function (match) {
    return escape(match).replace(/%u/g, "\\u");
});

if (nameFileWrite == undefined || nameFileWrite == "-") {
    console.log(text);
    return;
}

try {
    fs.writeFileSync(nameFileWrite, text, "utf8");
} catch (e) {
    console.log("fs.writeFileSync(): Caught exception: " + e);
    return;
}

console.log("Wrote to " + nameFileWrite);
```

#「それ…でできるよ」
ツッコミ頂けると嬉しいです。
経験的にもこういうのは投稿した直後に既存の(しかももっと良い)方法が見つかることが多かったので敢えて投稿してみました(苦笑)
Parse から Growth Push への移行方法

<img width="1217" alt="Screen Shot 2016-02-01 at 11.07.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/5559/1d99b83a-d635-9561-2c0e-f1ec59317745.png">

Parse が 2017年の1月28日にサービスが終了することでこれまで Parse でプッシュ通知を送ってた人が次にどの通知サービスを使えばいいか悩んでいると思います。そこでプッシュ通知サービスである [Growth Push](http://ja.growthpush.com/) への移行方法について説明します。
**1\. parse-migration-tool をインストール：**

```bash
$ npm i -g parse-migration-tool
```

**2\. `credential.json` を作成：**

```json
{
  "parse": {
    "applicationId": "<application id>",
    "masterKey": "<master key>"
  }
}
```

**3\. `ios.csv` と `android.csv` を書き出す**

```bash
$ parse migrate credential.json -s growthpush
ios.csv android.csv
```

**4\. Growth Push アカウント作成**

<img width="1052" alt="Screen Shot 2016-02-01 at 13.37.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/5559/b951f2ad-1cd1-1329-df6d-87c881ce0dee.png">

**5\. デバイストークンインポート**

デバイス画面で各プラットフォームと環境ごとにデバイスのインポートしてください：

<img width="1014" alt="Screen Shot 2016-02-01 at 13.38.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/5559/c585e67e-561d-c5fa-12d7-a3dab89c43f4.png">

これでデバイストークンのインポートは完了です :tada: インポートの際にしようした [parse-migration-tool](https://github.com/sotayamashita/parse-migration-tool) は GitHub で公開しているので何かバグがあれば issue を作っていただけると幸いです。
RailsのEngineでmigrationを幾分シンプルにする方法

railsでengineを利用する際に、migrationを実行する場合、

```shell-session
$ rake railties:install:migrations
$ rake db:migrate
```

[RailsGuide](http://railsguides.jp/engines.html)だとこのような感じで、
一旦engine側のmigrationファイルをコピーしてから実行するというフローになっているのですが、
正直面倒だったりします。

そこで、`rails db:migrate`一発で済ます方法が[この記事](https://blog.pivotal.io/labs/labs/leave-your-migrations-in-your-rails-engines)にある通り。
ただ、これだと `rake db:migrate:reset` 叩いた時にengine側のmigrationが走ってくれないという問題があり、
最終的に以下に落ち着きました。

```ruby
module EngineWithMigrations
  class Engine < ::Rails::Engine
    isolate_namespace EngineWithMigrations

    initializer :append_migrations do |app|
      unless app.root.to_s.match root.to_s
        config.paths['db/migrate'].expanded.each do |expanded_path|
          app.config.paths['db/migrate'] << expanded_path
        end
        ActiveRecord::Tasks::DatabaseTasks.migrations_paths = app.config.paths['db/migrate'].to_a # これがないと db:migrate:reset がうまく動かない
      end
    end
  end
end
```

動作環境: ruby2.3.0, rails4.2.5
intra-mart Accel Platformのログをlogstashで何とかしたい

# 目的

- intra-mart Accel Platformのログをlogstashを使ってelasticsearchに入れて遊びたい

で、以下その履歴です。


# requestログ編

リクエストログは、デフォルトでは、C:/%resin%/webapps/imart/WEB-INF/log/platform/request*.log　に出力される。
以下、C:\resinにresinを入れたとする。
ログの書式については、デフォルト値のままとしたいので、こんな感じで定義されているとする。

``` ruby
[d{yyyy-MM-dd HH:mm:ss.SSS}]	[thread]	X{log.report.sequence}	-5level                                                         	logger{255}	X{tenant.id}	X{log.id}	-	X{client.session.id}	X{request.remote.host}	X{request.method}	X{request.url}	X{request.query_string}	X{request.url.referer}	X{request.page.time}	X{request.accept.time}	X{request.id}nopexn<
```

で、実際のlogstashの設定ファイル例

``` ruby
# 入力ファイルの設定
input { 
	file {
		type => "resinlog"
		path => "C:/resin/webapps/imart/WEB-INF/log/platform/request*.log"
		tags => "request_log"
	}
}
filter {

    #resinのRequestログ用の処理
    grok {
        match => ["message", "\[%{TIMESTAMP_ISO8601:log_timestamp}\]	\[%{DATA:resin_thread}\]	%{NUMBER:sequence}	%{LOGLEVEL:log_level}[\s]*	%{NOTSPACE:logger}	%{WORD:tenant_id}	%{NOTSPACE:log_id}	-	%{NOTSPACE:session_id}	%{IPORHOST:remote_host}	%{WORD:request_method}	%{URI:request_url}	%{NOTSPACE:query_string}	%{DATA:url_referer}	%{NUMBER:page_time}	%{TIMESTAMP_ISO8601:accept_time}	%{NOTSPACE:request_id}"]
    }
}

output {
    # よしなにどうぞ
}

```

# アクセスログ編

同じようにして、アクセスログも取得します。


``` ruby
input { 
    file {
        type => "resinlog"
	path => "C:/resin/log/access.log*"
	tags => "access_log"
    }
}

filter {
    grok {
        match => ["message", "%{IPORHOST:remote_ip_address} %{NOTSPACE:request_header} %{NOTSPACE:remote_user} \[%{HTTPDATE:log_timestamp}\] \"%{DATA:request_url}\" %{NUMBER:status_code} %{NUMBER:content_length} \"%{DATA:referer}\" \"%{DATA:useragent}\""]
    }
}

output {
    # よしなにどうぞ
}
```


# 個人メモ

http://grokdebug.herokuapp.com/ はやっぱり便利。
COBOLの使い手はCOBOLerじゃないでしょ

COBOLの使い手をCOBOLer（コボラー）、PHPの使い手をPHPer（ペチパー？）などなどという呼び方、意味はわかるけどもやっとします。
中学校で習ったでしょう！ 「～する人」を表すのに-erをつけるのは、動詞ですと。
ドライバとかプログラマとか。
では名詞に付けて「～を使う人」を表すサフィックスは？
-ist がまず思いつきますけど、これがつく名詞ってだいたい楽器じゃありません？ ピアニスト、ギタリスト、バイオリニスト、ドラムニスト。まあタイピストは事務機だけど。
我々にとってプログラミング言語は武器、得物。武器に付けて「使い手」を表すサフィックスはなかったっけか。

-man
----
- ボウマン（弓手）
- ソーズマン（剣士）
- ガンマン

-eer
----
- マスケティアー（マスケット撃ち、あの三銃士の「銃士」）
- ミサイリアー（ミサイルを撃つのが専門の軍用機）

-man と -eer だ。
というわけでCOBOLの使い手は「コボルマン」もしくは「コボリヤー」であると相成りました。
underscoreコードリーディング（wrap）



underscoreに詳しくないので、勉強半分でソースコードを読む。



##利用するバージョン
[underscore.js(v1.8.3)](https://github.com/jashkenas/underscore/tree/1.8.3)


##wrapとは


###[underscorejs.orgのwrap](http://underscorejs.org/#wrap)

こんな説明。
>####_.wrap(function, wrapper) 
>Wraps the first function inside of the wrapper function, passing it as the first argument.
>This allows the wrapper to execute code before and after the function runs, adjust the arguments, and execute it conditionally.


```javascript
var hello = function(name) { return "hello: " + name; };
hello = _.wrap(hello, function(func) {
  return "before, " + func("moe") + ", after";
});
hello();
=> 'before, hello: moe, after'
```
------------- 
1つ目の関数を最初の引数として渡すことで、ラッパー関数でラップします。
関数を実行する前後のコードに、引数を調整することで、ラッパーに条件付きで関数を実行することを可能にします。


これは、関数を実行する前と後のコードを実行する引数を調整し、条件付きでそれを実行するためのラッパーを可能にします。


###[underscore.wrap](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L894)
コード的にはこのあたり。

```javascript
  // Returns the first function passed as an argument to the second,
  // allowing you to adjust arguments, run code before and after, and
  // conditionally execute the original function.
  _.wrap = function(func, wrapper) {
    return _.partial(wrapper, func);
  };
```
_.partialを用いて、wrapperの第一引数にfuncを渡す
温度センサーMCP3421をArduinoで制御する(I2C)

# MCP3421

# Datasheet

[MCP3421 Datasheet](http://ww1.microchip.com/downloads/jp/DeviceDoc/22003E_JP.pdf)

# Slave address

| Slave Address | 0x69 |
|:--|:--|

# Register map

| Address | Name | Type | Default |概要 |
|:--|:--|:--|:--|:--|
| どこでも | CONFIGURATION | W | 00000000 | コンフィグレーション |
| どこでも | DATA | R | 00000000 | データ |


# CONFIGURATION 

| Configuration | 0x00 |
|:--|:--|

| Bit7 | Bit6 | Bit5 | Bit4 | Bit3 | Bit2 | Bit1 | Bit0 |
|:--|:--|:--|:--|:--|:--|:--|:--|
| RDY | C1 | C0 | O/C | S1 | S0　| G1 | G0 |

## RDY

Ready Bit

- 1 Initiate a new conversion.
- 0 No effect.

## C1-C0

ここは利用していない

## O/C

Conversion Mode Bit

- 1 = Continuous Conversion Mode (Default). 
- 0 = One-Shot Conversion Mode.

## S1-S0

Sample Rate Selection Bit

| Bit3<br>S1 | Bit2<br>S0 |  Sample Rate  |
|:--|:--|:--|
| 0 | 0 | 240SPS(12bits). |
| 0 | 1 | 60SPS(14bits). |
| 1 | 0 | 15SPS(16bits). |
| 1 | 1 | 3.75SPS(18bits). |

## G1-G0

PGA Gain Selection Bits

| Bit1<br>G1 | Bit0<br>G0 | PGA Gain |
|:--|:--|:--|
| 0 | 0 | x1(Default). |
| 0 | 1 | x2. |
| 1 | 0 | x4. |
| 1 | 1 | x8. |


# Data 

| Data | 0x00 |
|:--|:--|

データの始まり

| Bit7 | Bit6 | Bit5 | Bit4 | Bit3 | Bit2 | Bit1 | Bit0 |
|:--|:--|:--|:--|:--|:--|:--|:--|
| 1 | 0 | 1 | 1 | x | x　| x | x |

2Byte目

| Bit7 | Bit6 | Bit5 | Bit4 | Bit3 | Bit2 | Bit1 | Bit0 |
|:--|:--|:--|:--|:--|:--|:--|:--|
| x | x | x | x | x | x　| D17 | D16 |

3Byte目

| Bit7 | Bit6 | Bit5 | Bit4 | Bit3 | Bit2 | Bit1 | Bit0 |
|:--|:--|:--|:--|:--|:--|:--|:--|
| D15 | D14 | D13 | D12 | D11 | D10　| D9 | D8 |

4Byte目

| Bit7 | Bit6 | Bit5 | Bit4 | Bit3 | Bit2 | Bit1 | Bit0 |
|:--|:--|:--|:--|:--|:--|:--|:--|
| D7 | D6 | D5 | D4 | D3 | D2　| D1 | D0 |
PCL trunk (v1.8) をvtk trunk（v7.1) と一緒にビルドするには、VTK_RENDERING_BACKENDをOpenGL (NOT OpenGL2）にする必要がある

現状、`OpenGL2`（vtk v7.1のデフォルト）にするとPCLのコンパイルに失敗するので、気をつけましょう。

参考までに、OSX 10.10.4 で検証しています。

## 参考

- [Cannot build PCL against VTK with OpenGL2](https://github.com/PointCloudLibrary/pcl/issues/1275)
Scalaインストール（Mac編）


# 0. インストール対象

以下の環境を対象とした、超初心者向けのインストール及び設定手順です。バージョンに特に記載のない場合、2016/1/18現在での最新バージョンを使用しています。
vagrantなどの仮想環境については、現状Scalaを実行するにはかなり重くて使い物にならない場合が多い、との情報＆やってみたらやっぱり重かった為使用しない前提としています。
軽くなったらやるかもね。

* Mac OS X Yosemite(El Capitanは対象外としています。)
* Java 1.8
* Scala
* ScalaIDE
* Intellij IDEA（参考）

# 1. Javaのインストール

Scalaを使用する場合、実行環境としてJVMが必要になります。JREだけでも動くのですが、JavaとScalaの連携なんかも必要になる場合があるかと思いますので、汎用性を考えてJDKも同時にインストールしておくのが無難でしょう。
また、MacOSのバージョンによっては最新のOracle Java以外がプリインストールされています。更新状況なども含め、最新のOracle Javaをインストールしなおしてください。
Javaのインストールについては、Oracleの最新情報を確認してください。
[MacでのJavaのインストール方法-Oracle](https://www.java.com/ja/download/help/mac_install.xml)

複数バージョンのJDKを切り替える場合については、
こちらの記事が参考になるかと。
[MacでJDKのバージョンを切り替える-Qiita](http://qiita.com/mas0061/items/2fe9333f045800d00b5c)


# 2. Scalaのインストール

Scalaの公式サイトから、必要なバージョンのScalaをダウンロード・インストールします。
[Download|The Scala Prigramming Language](http://www.scala-lang.org/download/)

![スクリーンショット 2016-02-01 11.34.49.png](https://qiita-image-store.s3.amazonaws.com/0/71222/88f1c67e-ceb4-0cbd-b6a7-daa89ca5f045.png "スクリーンショット 2016-02-01 11.34.49.png")

# 3. ScalaIDEのインストール

Scalaの公式サイトのリンクより、ScalaIDEのサイトへ移動します。
[Download|The Scala Prigramming Language](http://www.scala-lang.org/download/)

![スクリーンショット 2016-02-01 11.42.03.png](https://qiita-image-store.s3.amazonaws.com/0/71222/8367d29c-120e-719d-01f9-ad758817aec8.png "スクリーンショット 2016-02-01 11.42.03.png")

ScalaIDEのサイトより、Eclipseを含めたダウンロードが可能です。
Eclipseをすでに持っている場合は、Scala Pluginをインストールすることで同様の機能を使用することができます。
![スクリーンショット 2016-02-01 11.44.42.png](https://qiita-image-store.s3.amazonaws.com/0/71222/52143937-051f-c34c-d900-80123ddb0cc4.png "スクリーンショット 2016-02-01 11.44.42.png")

# 4. ScalaIDEの日本語化

Pleiadesプラグインをダウンロードしてインストールします。

Pleiadesプラグイン（pleiades.zip）を、公式サイトよりダウンロードします。
http://mergedoc.osdn.jp
![pleiades.png](https://qiita-image-store.s3.amazonaws.com/0/71222/04e1adbf-01df-a515-72d9-a8cba78c24ee.png)

解凍したpleiadesの中身を全てコピーし、先ほどインストールしたScalaIDEの **「eclipse」フォルダに上書きコピー（フォルダの結合）**します。
![pleiades2.png](https://qiita-image-store.s3.amazonaws.com/0/71222/5550b91b-2d3f-7385-3ead-899b9ad4dcef.png)


上書き後、`eclipse.app`を右クリックして「パッケージの内容を表示」を選択します。
![package.png](https://qiita-image-store.s3.amazonaws.com/0/71222/8d5ba583-30e4-ea7a-43e2-bd8825159bff.png)

eclipse.app/Contents/MacOS/eclipse.iniファイルをテキストエディタで開きます。
![eclipse3.png](https://qiita-image-store.s3.amazonaws.com/0/71222/49dc43c4-dd1d-b6ec-641d-e2a3cbc68789.png)

eclipse.iniに以下の内容をファイルの最後に追記し、上書き保存します。

```text:eclipse.ini
    -Xverify:none
    -javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
```

iniファイルの編集まで完了したら、`eclipse.app`を起動します。
メニューなどが日本語化されていたら完了です。

# 5. IntelliJ IDEAのインストール（参考）

フレームワークやWebアプリの作成に使用しない場合は、IntelliJ IDEA Community Editionでも十分な機能が使用可能です。
EclipseベースのScalaIDEより軽量ですので、英語環境に抵抗がなければこちらで十分かと。

[IntelliJ IDEA](https://www.jetbrains.com/idea/)
![スクリーンショット 2016-02-01 11.50.22.png](https://qiita-image-store.s3.amazonaws.com/0/71222/703d11d3-fd2b-5cf5-0120-80534537f757.png "スクリーンショット 2016-02-01 11.50.22.png")

起動後、PluginインストールでScalaをインストールすることで使用可能です。
Windowsでシンボリックリンク

# Windowsでシンボリックリンク
```
mklink /D [リンク] [ターゲット]
```

大量にファイルがあったり物理的なコピーがあってほしくないけれど、全く同じものが別のディレクトリにも存在しているように振舞ってほしいことが間々あります。
Linuxならシンボリックリンク `ln -s` がよく知られているけれど、実はちゃんとWindowsにもシンボリックリンクは用意されています。

データを1つのディレクトリに収納しておき、必要に応じてシンボリックリンクでつなげてあげるとなかなかに便利だったりします。

詳しくはヘルプを参照してください。

```
C:>help mklink
シンボリック リンクを作成します。
MKLINK [[/D] | [/H] | [/J]] リンク ターゲット
        /D          ディレクトリのシンボリック リンクを作成します。既定では、
                    ファイルのシンボリック リンクが作成されます。
        /H          シンボリック リンクではなく、ハード リンクを作成します。
        /J          ディレクトリ ジャンクションを作成します。
        リンク       新しいシンボリック リンク名を指定します。
        ターゲット   新しいリンクが参照するパス (相対または絶対)
                    を指定します。
```

## 補記 (linuxとwindowsではsourceとdestが逆さま)

```
ln -s source [dest]

source リンク元 (windowsでの「ターゲット」)
dest リンクファイル名 (windowsでの「リンク」)
```
Railsエンジニア-Mac開発環境ガイド

## 適応OS

Mac OS

## 開発ツール


### iTerm 便利な開発terminal [Option]

iTermをインストール

公式サイト：[https://www.iterm2.com/](https://www.iterm2.com/)

### oh-my-zsh terminalをカラフルに [Option]

oh-my-zshをインストールする

公式サイト：[https://github.com/robbyrussell/oh-my-zsh](https://github.com/robbyrussell/oh-my-zsh)

``` sh
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```

### Homebrew - Macパッケージ管理ツール

homebrewをインストールする

公式サイト：[http://brew.sh/](http://brew.sh/)

``` sh
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

## Ruby環境
### rbenv - Rubyバージョン管理ツール

rbenvをインストールする

公式サイト：[https://github.com/rbenv/rbenv](https://github.com/rbenv/rbenv)

``` sh
brew update
brew install rbenv ruby-build
```

### ruby - 指定のRubyバージョンをインストール

Rubyをインストール（社内デフォルトバージョン：2.1.4）

``` sh
rbenv install 2.1.4
rbenv global 2.1.4
```

## Mysql環境

### Mysqlインストール
homebrewでMysqlをインストールする

``` sh
brew install mysql
```

Mysqlを起動する

``` sh
brew tap homebrew/services
brew services start mysql
brew services list
```

### Sequel Pro
sequelproをインストールする

公式サイト：http://www.sequelpro.com/

## Git設定[Option]

git設定ファイル~/.gitconfigの参考例です

```
[user]
       name = xxxx
       email = xxxxx@gmail.com
[push]
       default = simple
[alias]
       up = !git pull --rebase --prune $@ && git submodule update --init --recursive
       co = checkout
       cob = checkout -b
       cm = !git add -A && git commit -m
       s = status
       d = diff
```
TESTのupdateに has_many で指定した where が効かない


また、TESTの際、update しても where でフィルターが効かず、下記テストが通らない

```album_spec.rb
photos_attribute = attributes_for(:photo)
album_0 = Album.create!(attributes_for(:album, photos_attributes: [attributes_for(:photo)]))
photos_attributes[0][:active] = false
album_0.update(photos_attributes: [photos_attribute])
expect(album_0.photos[0]).to be_nil
```


``` album.rb
  has_many :album_photo, dependent: :destroy
  has_many :photos, ->{ where(album_photos: {active: true}).order('created_at asc') }, through: :album_photo
```

```photo.rb
  has_many :album_photo, dependent: :destroy
  has_many :albums, ->{ where(album_photos: {active: true}).order 'created_at asc' }, through: :album_photo
```

```
  belongs_to :album
  belongs_to :photo
```


`album_0.reload`を追加したら更新された。

```album_spec.rb
photos_attribute = attributes_for(:photo)
album_0 = Album.create!(attributes_for(:album, photos_attributes: [attributes_for(:photo)]))
photos_attributes[0][:active] = false
album_0.update(photos_attributes: [photos_attribute])
album_0.reload
expect(album_0.photos[0]).to be_nil
```


こちらの対応時にはまった。：
http://qiita.com/yahsan2/items/f8083bc3e145c655f4e1
中間テーブルに追加したカラムによって、has_manyで関連するデータをフィルターする




`rails　4.2.5`

album と photo を `has_many` で関連付けさせたうえで、
明示的に紐付いていないという関係を作りたかったので、`album_photo` のテーブルに `active` のカラムを追加

`has_many` のオプションに `where` を追加することで解決



``` album.rb
  has_many :album_photo, dependent: :destroy
  has_many :photos, ->{ where(album_photos: {active: true}).order('created_at asc') }, through: :album_photo
```

```photo.rb
  has_many :album_photo, dependent: :destroy
  has_many :albums, ->{ where(album_photos: {active: true}).order 'created_at asc' }, through: :album_photo
```

```
  belongs_to :album
  belongs_to :photo
```


参考：
http://blog.falconsrv.net/articles/415
Dockerでcould not resolve archive.ubuntu.comって出た時にやること


# Dockerでcould not resolve archive.ubuntu.comって出た時にやること

`sudo vim /etc/default/docker`
かなにかでファイルを開き(ファイルがない場合は新規作成)
```
DOCKER_OPTS="--dns 8.8.8.8 --dns 8.8.4.4"
```

を書き込めばok
docker-machineを使っている場合は`docker-machine restart [envname]`で再起動しよう
Wordpressサイトを作った時のメモ

#childテーマを作成すること
[WordPressで子テーマを作りました。 - Qiita](http://qiita.com/pugiemonn/items/4e8d489b1a4308b92bfb)

テーマを直接変更するとアップデートされた時にリセットされるという間抜けなことが起きるので必ず実施すること。

#カテゴリーごとにサイドバーの表示を自動的に変えたいとき

カテゴリーごとにサイドバーの表示を自動的に変えたいときはindex.phpのサイドバー読み込み部分を変更し自動的にカテゴリーに応じたサイドバーのファイルが読み込まれるようにすること

```php:index.php
$scat = explode("/", $wp_query->query['category_name']);
hybrid_get_sidebar( $scat[0] );
```

#ログイン済みかどうかで表示するコンテンツを切り替える、且つ投稿時はPHPの記述を必要としないshort_codeを使った方法

```php:functions.php
/**
 * ログイン済みかどうかのチェック
 */
//ログイン済みの時に表示するコンテンツ
function if_is_logedin($atts, $content = null)
{
    $content = do_shortcode( $content);
    if(is_user_logged_in())
        {
        return $content;
    }
}
add_shortcode('logedin', 'if_is_logedin');

//まだログインしていない時に表示するコンテンツ
function if_is_yetlogin($atts, $content = null)
{
    $content = do_shortcode( $content);
    if( ! is_user_logged_in())
        {
        return $content;
    }
}
add_shortcode('yetlogin', 'if_is_yetlogin');
```

WordPressの記事側

```
[logedin] 会員のみなさま、ようこそ！ [/logedin] [yetlogin]ここは会員限定のページです [/yetlogin]
```

#記事をIDやカテゴリー名から件数を指定してリンクする方法

記事のカテゴリが`catname`なものを2件表示する


```
[display-posts category="catname" posts_per_page=2]
```

[ショートコード「display-posts」でできる主なこと](https://comemo508.wordpress.com/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89%E3%80%8Cdisplay-posts%E3%80%8D/)

#会員制ページ、マイページを作るには、wp-members

[WordPress 会員制サイトの作り方 WP-Members](http://hijiriworld.com/web/wordpress-wp-members/)

固定ページ`my`などに以下のショートコードで実現できます。

```
[wp-members page="members-area"]
```

#各種フォームをさくっと作る

[Contact Form 7プラグインの使い方](http://www.adminweb.jp/wordpress-plugin/list/index10.html)

これまでの機能を統合すると・・・

```
[logedin] 会員限定の機能へようこそ [contact-form-7 id="233" title="会員専用フォーム"] [/logedin] [yetlogin]ここは会員限定の機能です。 [wp-members page="login"] [/yetlogin]
```

#メールアドレスによるログインの実現

http://kachibito.net/wordpress/using-an-email-address.html


#記事データの一括登録

http://liginc.co.jp/web/wp/plug-in/58046
golangでellipsis

Goで文字の省略処理（Ellipsis）しようとしたら、初歩的なことで躓いたのでメモ程度に。

# 結論

```ellipsis.go
package main

// Ellipsis a text
func Ellipsis(length int, text string) string {
	r := []rune(text)
	if len(r) > length {
		return string(r[0:length]) + "..."
	}
	return text
}
```

# 要点

* `len(string)`は鬼門
    * バイト数返す。考えてみたら当然だよね☆
* `string[n:m]`は鬼門
    * バイト位置で切る。考えてみたら当ｚ

# 蛇足

`string` 系の関数作るときは、`func(params..., string)`の形に作るとちょっとだけ便利。

`text/template`の`FuncMap`にそのまま放り込めたりする。些細だなー！

```sample.go
package main

import (
	"bytes"
	"fmt"
	"text/template"
)

func main() {
	var buf bytes.Buffer
	template.New("text").
		Funcs(template.FuncMap{"ellipsis": Ellipse}).
		Parse(`{{.value | ellipsis 5}}`).
		Execute(buf, map[string]string{"value": "みんみんみらくる☆"})
	fmt.Println(buf.String())
}
```
Arduino・Milkcocoa・ESP-WROOM-02で明るさ監視

# Arduino・Milkcocoa・ESP-WROOM-02の組み合わせ
Arduinoに光センサーとESP-WROOM-02をつなげてMilkcocoaに値を送信。WebブラウザからHTML/JavaScriptを開きMilkcocoaにアクセスして光センサーの値を受信。サクッとできてしまったので、ICS MEDIAの記事「[IoTを使ってトイレを監視！ 電子工作でトイレが使用中かチェックする仕組みを作ってみた](https://ics.media/entry/10746)」にて作ってみたネタを公開しました。

![demo.gif](https://raw.githubusercontent.com/ics-creative/160125_arduino_ESP-WROOM-02_v2/master/demo.gif)

# Arduinoは「Arduino M0」を使った
Arduino UNOではなく、[Arduino M0](https://www.switch-science.com/catalog/2304/)を使いました。一番の理由はメモリ問題です。UNOですとスケッチが書き込めず先に進めませんでした。。。

- メモリ容量が多い
- ESP-WROOM-02と動作電圧が3.3Vで同じ

# 途中でMilkcocoaのpushからsendへ変更した
最初、Milkcocoaのデータストアにデータを貯めてくれるpushを使っていたのですが、Arduinoが安定せず3分も立たず反応しなくなりました。そこをsendに変更すると安定して動作するようになりました。動作負荷の問題なのか、原因はまだ特定できていないので詳しい方ご教授いただければと、、、

# 詳しくは
全体の構成などは記事「[IoTを使ってトイレを監視！ 電子工作でトイレが使用中かチェックする仕組みを作ってみた](https://ics.media/entry/10746)」にて公開しています。よろしかったらご覧ください！
勉強会JS編＜7＞ yeoman + backbone.router


## 関連記事

* [勉強会JS編＜1＞ オブジェクト指向言語としてのJavaScriptを理解](http://qiita.com/park-jh/items/1887d87f33474cf7d733)
* [勉強会JS編＜2＞ クライアントサイドMVCフレームワーク](http://qiita.com/park-jh/items/8b0a21e09223e3a8d0bc)
* [勉強会JS編＜3＞ フロントエンド開発環境構築](http://qiita.com/park-jh/items/319cacc28850c9fd4898)
* [勉強会JS編＜4＞ yeoman + backbone.model + grunt](http://qiita.com/park-jh/items/78bc01b93fe6d4167624)
* [勉強会JS編＜5＞ yeoman + backbone.collection + backbone.localStorage](http://qiita.com/park-jh/items/49fefe30cdf57de7b6f0)
* [勉強会JS編＜6＞ yeoman + backbone.view](http://qiita.com/park-jh/items/44fb4faac997c71201a0)
* 勉強会JS編＜7＞ yeoman + backbone.router
* [勉強会JS編＜8＞ yeoman + backbone.js 実践 - その１](http://qiita.com/park-jh/items/bad19e1c6b502ef0d0fa) 
* [勉強会JS編＜9＞ yeoman + backbone.js 実践 - その２](http://qiita.com/park-jh/items/55d62bc58b94b12835c3)

## Backbone.Routerとは

* ブラウザのハッシュとそれに対応するコールバック関数をマッピング
* ViewがDOMイベントを監視し対応するメソッドを実行するのに対してRouterはブラウザのハッシュを監視し対応するメソッドを実行する。

## 実習

### オブジェクトの定義

* yeomanでBackbone.Routerの雛形を生成する。

```sh
  [devnote@hooni:~/documents/study/js/sample] % yo backbone:router contact
     create app/scripts/routes/contact.js
     create test/routers/contact.spec.js
```

* 生成されたルータを下記のように修正する。

```javascript
  // app/scripts/routers/contact.js
  /*global Sample, Backbone*/

  Sample.Routers = Sample.Routers || {};

  (function () {
    'use strict';

    Sample.Routers.Contact = Backbone.Router.extend({

      initialize: function() {
        console.log('Routerを初期化されました。');
      },

      // http://example.com/#state1
      // http://example.com/#state2
      routes: {
        'state1': 'state1',
        'state2': 'state2',
        'contacts/:id': 'showContact'
      },

      showContact: function(id) {
        console.log(id);
      },

      // http://example.com/#state1
      // アクセスした場合に呼び出される
      state1: function() {
        console.log('state1');
      },

      // http://example.com/#state2
      // アクセスした場合に呼び出される
      state2: function() {
        console.log('state2');
      }

    });

  })();

  // app/scripts/main.js
  ...snip...

  routes_ex01: function() {
    // ルートの初期化
    var router = new Sample.Routers.Contact();

    // Backbone.historyの初期化
    Backbone.history.start();
  }

  ...snip...

  $(document).ready(function () {
    'use strict';
    var c = Sample.init();
    Sample.routes_ex01();
  });
```

* routes
  - ブラウザのハッシュとメソッドを紐付ける。

* Backbone.history
  - hashchangeイベントによる状態遷移の履歴を取り扱う。
  - Backbone.Routerで定義したルーツに紐づけられたメソッドを呼び出す。
  - Backbone.historyの初期化が済んでいないとBackbone.Routerに定義したルーティングが機能しない。

## 参考書籍

* JavaScriptエンジニア養成読本
AWS SDK for PHPで特定のELBのEC2 instanceを取得

capistranoで特定のELBに紐づくEC2 instanceに対してスクリプトを実行させたかったので、書きました。

参考URL（[http://docs.aws.amazon.com/aws-sdk-php/v2/api/index.html](http://docs.aws.amazon.com/aws-sdk-php/v2/api/index.html)）

まず、aws-sdk-phpは最新の3系を使用

```json:composer.json
{
    "require": {
      "aws/aws-sdk-php": "3.3.3"
  }
}
```

```php:util_ec2.php
<?php

require_once('vendor/autoload.php');

use Aws\ElasticLoadBalancing\ElasticLoadBalancingClient;
use Aws\Ec2\Ec2Client;

class Util_Ec2 {

  private $elb_client = null;
  private $ec2_client = null;

  function __construct() {
    date_default_timezone_set("Asia/Tokyo");
    $config = [
      'version' => 'latest',
      'region' => region,
      'credentials' => [
        'key'    => access_key,
        'secret' => secret_key,
      ]
    ];
    $this->elb_client = new ElasticLoadBalancingClient($config);
    $this->ec2_client = new Ec2Client($config);
  }

  public function get_instances() {
    $elb_name = elb name;
    $instance_ids = [];
    $instances = $this->elb_client->describeInstanceHealth([
      'LoadBalancerName'=> $elb_name
    ]);
    foreach ($instances['InstanceStates'] as $instanceState) {
      $instance_ids[] = $instanceState['InstanceId'];
    }    
    $instances = $this->ec2_client->describeInstances([
      'InstanceIds' => $instance_ids
    ]);
    return $instances;
  }

}

$util_ec2 = new Util_Ec2();
$instances = $util_ec2->get_instances();
```
HTML内で、クリックした時にファイルを開くのではなくダウンロードするようなボタンを作る

クリックすることで、画像やPDF、テキストファイルなどをブラウザ上で開くのではなくダウンロードできるようにするボタンを作成したい。

# **下準備**
予め、以下の様なファイルを作成しておく。

```/var/www/html/php/download.php
<?php

 /* ディレクトリトラバーサル対策 */
 $DIR_PATH='/var/www/html';
 ini_set('open_basedir',$DIR_PATH);
 function get_name($str){
  if(strpos($str, '..') !== false){
    echo '相対パスは使用不可';
    exit();
  }
 return str_replace('\0','',$str);
 }
 $file=get_name(basename($_POST['dlfile']));  //ファイル名取得
 $dir=get_name(dirname($_POST['dlfile']));    //ディレクトリ名取得
 /* ディレクトリトラバーサル対策 */

 /* CSRF対策 */
 session_start();
 if(session_id() !==  $_POST['token']){
   echo '不正な処理です';
   exit();
 }
 /* CSRF対策 */

 chdir($DIR_PATH.$dir);      //当該ディレクトリに移動
 $mime_name=mime_content_type($file);  //ダウンロードするファイルのMIMEタイプを取得
 $file_length=filesize($file);
 header("Content-Disposition: attachment; filename=$file");
 header("Content-Length:$file_length");
 header("Content-Type:$mime_name");
 readfile($file);
?>
```
以上で下準備は完了。

# **実際にボタンを作成する**
例えば
`/var/www/html/content/file.pdf`
がダウンロードできるようなボタンを
`/var/www/html/hoge/fuga/index.html`
上に作成したい場合には、

```/var/www/html/hoge/fuga/index.html
  <?php session_start(); ?>
  <form action="/php/download.php" method='post'>
   <input name="dlfile" type="hidden" value="<?php echo htmlspecialchars('/content/file.pdf',ENT_COMPAT,'UTF-8'); ?>" />
   <input name="token"  type="hidden" value="<?php echo htmlspecialchars(session_id()       ,ENT_COMPAT,'UTF-8'); ?>" />
   <input type="submit" value='クイックダウンロード' />
  </form>
```
とすればよい。
<img width="138" alt="スクリーンショット 2016-01-31 23.58.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/88804/9ff95ff0-60f7-3ec1-ef3d-a8dae5118167.png">
上記のようなボタンが作成されるはずである。
これをクリックすると、ファイルがブラウザ上で開かれず、代わりに
<img width="448" alt="skitch.png" src="https://qiita-image-store.s3.amazonaws.com/0/88804/89f10a1f-0c4e-2bda-39e2-3a2506128501.png">
上記のようなウィンドウが表示され、直接ファイルをダウンロードできるはずである。


# **ボタンではなくて通常のリンクにしたい場合**
<img width="170" alt="スクリーンショット 2016-02-01 00.20.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/88804/5a72c39c-d7a3-1a66-6c22-4ea245fd9a3f.png">
上記みたいにリンク形式にしたい場合は、

```/var/www/html/hoge/fuga/index.html
　<?php session_start(); ?>　　
  <form action="/php/download.php" method='post' name='formName'>
   <input name="dlfile" type="hidden" value="<?php echo htmlspecialchars('/content/file.pdf',ENT_COMPAT,'UTF-8'); ?>" />
   <input name="token"  type="hidden" value="<?php echo htmlspecialchars(session_id()       ,ENT_COMPAT,'UTF-8'); ?>" />
  </form>

  <a href="javascript:void(0)" onclick='document.formName.submit();return false;' >クイックダウンロード</a>
```
のように書き換える。

# **参考URL**
http://www.webmagazine.kakisiti.co.jp/?p=690
http://e-words.jp/w/MIME%E3%82%BF%E3%82%A4%E3%83%97.html
http://d.hatena.ne.jp/kaitoh07/20090422/1240385880
http://qiita.com/addictionwhite/items/4e9c9cc4570c0bcaa656
http://qiita.com/mpyw/items/2f9955db1c02eeef43ea
http://www.sssg.org/blogs/hiro345/archives/14795.html
コミット数ランキングを発表するボットを作った


# 経緯

今社内でSlackを使っていて、無料プランだと10000件のメッセージまでしか残せなくて、先日ついに上限に達してしまいました。そこで上の人に有料プランをお願いして課金してもらったので、有効利用しなくちゃ申し訳ないということでボットを作り始めました。

ほとんどのエンジニアの人はレガシーなPHPとjQueryしかいじったことがないので、このボット開発を通して社内のエンジニアの人に少しでも新しいものに触れて欲しいというのも狙いです。

第一弾としてモチベーションに繋がりそうな、リポジトリ名を入力すると１週間のコミット数をランキング表示するボットを作りました。

# コード
```coffee:commend.coffee
token = 'your token'
apiUrl = "https://api.github.com/repos/Organization名"

module.exports = (robot) ->
  robot.respond(/commend (.*)/i, (msg) ->
    repository = msg.match[1]

    oneWeekAgo = new Date()
    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
    year = oneWeekAgo.getFullYear()
    month = ("0" + (oneWeekAgo.getMonth() + 1)).substr(-2)
    day = ("0" + oneWeekAgo.getDate()).substr(-2)

    since = "#{year}-#{month}-#{day}T00:00:00Z"

    request = robot.http("#{apiUrl}/#{repository}/commits")
      .query(since: since)
      .query(access_token: token)
      .get()

    committers = {}
    request((err, res, body) ->
      if err
        msg.send("何かエラーになっちゃいました...")
        return

      commits = JSON.parse body

      if commits.message == "Not Found"
        msg.send("#{repository}が見つかりませんでした...")
        return

      for commit, index in commits
        committer = commit.committer.login
        if committers[committer] == undefined
          committers[committer] = 0
        ++committers[committer]

      respond = "発表します!\n\n#{since}から今までで\n\n"
      commended = []
      for i in [0..Object.keys(committers).length - 1]
        max = 0
        nextCommitter = ''
        for committer, count of committers
          if (commended.indexOf(committer) == -1)
            if count >= max
              nextCommitter = committer
              max = count
        commended.push(nextCommitter)
        respond += "#{i + 1}位: #{nextCommitter} #{max} commits\n"

      msg.send(respond)
    )
  )
```

普段JavaScriptを全然描かないのでもっと効率的にソートする方法があると思うのですが、ここではバブルソートを書いてしまいました笑。githubotというのがあるらしいのですが、見た感じそこまで便利になった感じがしなかったので普通にAPIを呼び出しています。

# 実行した感じ
![slack-bot.png](https://qiita-image-store.s3.amazonaws.com/0/72360/418164fc-9e4e-5540-9288-aa16c941b1fb.png "slack-bot.png")

これでなんかモチベーションが上がる気がしますね！笑
GoogleアラートでPHPをなるべく効率よく探す方法

#GoogleアラートでPHPを設定すると何が問題か？

公開されているURLの末尾にある拡張子が「.php」だと一緒に拾われて、PHPに関する記事が埋もれてしまいます。

[Google Alerts - php](https://www.google.co.jp/alerts?q=php#1:0)

#なるべく効率よく探せるように

Google Alerts で設定する検索キーワードを以下のようにします。
拡張子が`.php`の記事だけ除外します。

```
php -filetype:php
```

[Google Alerts - php -filetype:php](https://www.google.co.jp/alerts?q=php%20-filetype:php#1:0)

#問題点

- 拡張子で弾いているので`.php`で終わるPHPに関する記事が取得できないｗ

- `.php`で終わらない通常の記事が取得されてしまう

といった問題点があります。

でも`PHP`で設定するよりは効率よくPHPに関連した記事が見つかるかと思います。
AWS TranscoderでSmoothの変換のサンプル

AWS TranscoderでPHPでHLSのSampleはあったけどSmoothの変換サンプルがどこにもなかったので書いてみた。とりあえずWatermarkとサムネイルもつけてみた。
HDSが良さそうなんだけど・・これ別途お金が必要なのでSmoothで対応。
HLSとSmoothができればiPhone,Android,WindoswPC,MACが対応できる。（Windows,MacはSilverlightが必要だけどこれも無料でダウンロードできるので我慢）

追記)HLSでVideo.js使えばデバイス関係なく見れそうなことをあとで発見・・・orz

```php
	$config		= array(
			'key'		=> XXXXX
		,	'secret'	=> XXXXXX
		,	'region'	=> Region::US_EAST_1
		,	'default_caching_config'	=> '/cache'
	);
        // ここらへんはSAMPLEにあるHLSを参考
	$etClient 	= ElasticTranscoderClient::factory($config);
	$input_key	= 'XXXXXX.MOV';	
	$input		= array('Key' => $input_key);
	$output_key	= hash('sha256', utf8_encode($input_key));
	$outputs 	= array();
	$segment_duration 	= '2'; 
	$output_key_prefix = 'test/smooth/';

        // Preset情報生成（AWS Transcoder のページからPresetsを参照するといい。）

	$smooth_0400k_preset_id		= '1351620000001-400080';
	$smooth_0500k_preset_id		= '1351620000001-400070';
	$prsets		= array(
		'smooth0400k'		=> $smooth_0400k_preset_id
	,	'smooth0500k'		=> $smooth_0500k_preset_id
	);
	foreach ($prsets as $prefix => $preset_id) {
		array_push($outputs, 
			array(
				'Key'				=> "$prefix/$output_key.ismv"
			,	'PresetId'			=> $preset_id
			,	'SegmentDuration'	=> $segment_duration
			,	'ThumbnailEncryption'	=> array(
					'Mode'			=> 's3'
					)
			,	'ThumbnailPattern'	=> 'thumbnail-{count}'
			,	'Watermarks'		=> array(
					array(
						'InputKey' 			=> 'logo.png'
					,	'PresetWatermarkId'	=> 'TopLeft'
					)
				)
			,	'Width'				=> 72
			)
		);
	}

	$playlist = array(
		'Name'			=> $output_key,
		'Format'		=> 'Smooth',
		'OutputKeys'	=> array_map(function($x) { return $x['Key']; }, $outputs)
	);
	$create_job_request = array(
		'PipelineId'		=> 'XXXXXXX',
		'Input'				=> $input,
		'Outputs'			=> $outputs,
		'OutputKeyPrefix'	=> $output_key_prefix,
		'Playlists'			=> array($playlist)
	);
	$create_job_result = $etClient->createJob($create_job_request)->toArray();

```
Flux を 初めて使った時のメモ

# Flux まとめ
Flux は、コールバック関数やプロパティを延々と引き継がなくてはならない pure な React 構造を補助するフレームワークで、利用することで記述量を減らしたり、モジュールの役割を分散できる。ここでは、Fluxに登場するそれぞれの役目についての概説と、実装した時の覚書をメモしておく。

## Action
ディスパッチャは、ストアに対するデータ更新のトリガーを引くための関数を公開している。アクションは、意味的なまとまりで構成されたヘルパー関数によってラップされディスパッチャに送信される。このヘルパー関数は、ビューに公開される。

ActionCreator と呼ばれるヘルパー関数を利用することで、ユーザインタラクションを発生させるビューに対して、`props`を伝搬する必要がなくなる。

ビューが直接ストアの状態を操作することはなく、アクションのみがそれを許されている(single-direction)。

## Store
ストアは、MVC のモデルに相当するが、単一のテーブルにとどまらず、意味のあるデータのかたまりを丸ごと取り扱う。
またオブザーバパターンの`Subject`として、特定のイベントを発火する。状態を保つビュー（コントロール・ビュー）は、ストアの`CHANGE_EVENT` を Listen することで、イベントに合わせて状態を更新することができる。ビューコンポーネントがマウントされた時点での`state`の初期値も、このストアから取得することができる。

## Dispatcher
アクションは、特定の情報を含んだペイロード。ユーザによるインタラクションや、システムによるイベントで アクション が発生する。この アクション は、 ディスパッチャ を経由して、 目的の ストア に対してデータを更新するように通知する。

なお、ディスパッチャ は、すべての ストア に対して、UI またはシステムからの アクション を通知する。ストア は、`actionType`属性から、それが自分に関係するアクションかどうかを判定して処理を決める。

> actionType属性に設定する値は、定数として外部に定義しておくと良い。その際、`keyMirror`というモジュールが便利。

ディスパッチャ は、ストア間の依存関係を管理できる。 `waitFor()`関数を用いて、それを行う。


## 実装上の勘所
![Structure and Data flow](https://facebook.github.io/flux/img/flux-simple-f8-diagram-explained-1300w.png)

次のような基本原則を用いて、コーディングしていく。まず pure な React を作ってからリファクタリングしても良いし、いきなり Flux を適用しても良い。後者の場合は設計作業を少々丁寧に行うと良い。

1. ユーザインタラクションが発生するビューは、アクションに依存する
1. コントロール・ビューは、ストアに依存する
1. ストアは、それが管理する情報を必要とするビュー向けにAPIを公開する
1. ストアは、通知されるペイロードを正しく処理するために`actionType`を使って制御した関するをディスパッチャに渡す
1. アクション（ヘルパー関数）は、ディスパッチャにペイロード（`actionType`と値）を渡す
Bootstrap Studioとやら

なにやらBootstrap Studioというツールが出ていたのでご紹介。

【サイトURL】
http://bootstrapstudio.io/

bootstrapでUI構築できるフロントエンドIDE、みたいなことなのかな？
年間25ドルみたいです。

取り敢えずデモを触ってみようと思います！
Reactネタ

# 雑多なネタ集

## reactコンポーネントのlifecycle図
http://www.mybridge.co/view/33364

## jsx変換
HTML to JSX Compiler
[https://facebook.github.io/react/html-jsx.html](https://facebook.github.io/react/html-jsx.html)
既存のWEBサイトを時間をかけずにReactに置き換える時に、使えるのか？？

## 速度改善
### Shallow Compare
[https://facebook.github.io/react/docs/shallow-compare.html](https://facebook.github.io/react/docs/shallow-compare.html)

shouldComponentUpdateメソッドでこのアドオンを使用することにより、props及びstateの変更があった場合のみtrueを返すため、コンポーネントの描画処理を必要最小限にとどめることができるようになる。

### とあるツイートから
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Improving React Performance with Babel: <a href="https://t.co/booMSwl748">https://t.co/booMSwl748</a></p>&mdash; JavaScript Daily (@JavaScriptDaily) <a href="https://twitter.com/JavaScriptDaily/status/719687769287704576">2016年4月12日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
[JAWS-UG CLI] ReadOnly IAMユーザ + AssumeRoleの活用

常時Administrator権限を持つユーザが存在することは、権限を奪われるリスク(セキュリティの面)からもミスをした場合の影響度(運用の面)からも避けるべきこととされています。

ここでは、普段はReadOnlyユーザを利用し、必要なときに必要な権限を一時的に付与する環境の構築をします。

# 環境の構築

## 1. 全体準備編

AWSアカウント1つにつき1回行う準備作業です。

1.1. AssumeRole利用者ポリシの作成: http://qiita.com/tcsh/items/16f621ca10d95a5a7c81
1.2. AssumeRole利用者グループの作成 (ユーザ管理ポリシ: ReadOnly + AssumeRole): http://qiita.com/tcsh/items/1f48b9f8c5dfa4200d38

## 2. IAMユーザ作成編

実際に利用するIAMユーザを作成します。

2.1. AssumeRole利用者ユーザの作成: http://qiita.com/tcsh/items/9ab1aad97c3a358e1b68
2.2. (任意) ログインプロファイルの作成: http://qiita.com/tcsh/items/8b8b2906ce326f0f110a

以上で環境の構築は完了です。
普段はReadOnlyユーザで作業をし、作業内容に応じて必要な権限を一時的に付与して作業をします。


# [参考] 一時的な権限付与 (例)

実際にIAMユーザに権限を一時的に付与するには、必要な権限を割り当てたロールを作成し、そのロールを使うための一時トークンの発行して利用します。

## Administrator

- AssumeRole用管理者ロールの作成: http://qiita.com/tcsh/items/933a2b75c4c381b19e7f
- AssumeRoleによる権限の付与(Administrator): http://qiita.com/tcsh/items/4ef9174902c545c760dd 

## S3(Full)

- AssumeRole用S3管理者ロールの作成: http://qiita.com/tcsh/items/02abc9067c80719c1d66
- AssumeRoleによる権限の付与 (S3管理者): http://qiita.com/tcsh/items/51d6ff301bc75e90e5e1
Qiita の人気記事をつぶやく Twitter BOT を作りました

## 概要

[qrank](http://qrank.wbsrv.net/) という Qiita の記事のストック数とはてブ数を集計してランキング形式で提供しているサービスを作っています。このサイトで提供している 7 日間のストック数ランキングを Twitter にも配信するようにしました。

https://twitter.com/qrank_bot

## 仕様

- 過去 7 日間のストックランキングの上位 20 件のうち 1 件がランダムに選ばれます。
- 1 時間に 2 回の定刻( 15 分と 45 分)につぶやかれます。
c++ > STL勉強 > : count_limit(count_limit), checker(predicate), establish_count(0) {

http://qiita.com/SaitoAtsushi/items/d26a5cfa5453d8d91b63
のコードを参考に STL や template を勉強中。

```cpp
template<class T>
continuous<T>::continuous(int count_limit, std::function<bool(T)> predicate)
  : count_limit(count_limit),
    checker(predicate),
    establish_count(0) {
}
```

上記の `checker(predicate)` の部分がぱっとわからなかった。

checkerが関連するコードは

```
private:
  ...
  std::function<bool(T)> checker;
```

```
  if(checker(datum)) {
    establish_count++;
  } else {
  ...
```

一番上のコードはコンストラクタで : の後は基底クラスという勘違いをしていた。

そうではなくて、初期化リストの方だった。
http://www.geocities.jp/bleis_tift/cpp/init.html

```
count_limit(count_limit),
    checker(predicate),
    establish_count(0)
```
の意味としては、以下の方だった。

- count_limitというconst intのメンバ変数にはcount_limitを代入する
- checkerというstd::function<bool(T)>にはpredicateを割り当てる
- establish_countというintのメンバ変数には0を代入する

predicateの定義は「利用例兼テストケース」のコードで

```
continuous<double>
    continuous_inrange(3, [](double x){return x>2.7182 && x<3.1415;});
```

とあるうちの`{return x>2.7182 && x<3.1415;}`などが対応しそうだ。

STLやtemplate以前にC++の文法を忘れている今日このごろ。
技術英語 > I hope you had a passing grade. / B-minus. / That's not very encouraging.

@ Star Trek Voyager > PARTURITION

ある技術についてアカデミーでの授業の話をNeelixとトム・パリスがやりとりしている。

補足情報としては、アカデミーは連邦が運営する大学のようなもので、そこで連邦の規律や技術・技能を身につけるという設定。トム・パリスはアカデミーに通った経験がある。トムが卒業したかどうかは僕は覚えてない。

Neelix > `I hope you had a passing grade.`
Tom > `B-minus.`
Neelix > `That's not very encouraging.` (不安を取り繕おうとするNeelix)

a passing gradeは「合格点」。

B-minusと言われた時に、どう突っ込むのがいいか。

`That's not very encouraging.`は今後使おうと思った。
札幌市消防局の災害出動一覧[Python]

札幌市消防局がここ数日分のデータをweb上で公開しているので
Pythonで取得してみます。
今回は、その日のデータを取得するので
URLはここになります。
http://www.119.city.sapporo.jp/saigai/keihon.html

最終的にこうなります
![スクリーンショット 2016-02-01 10.57.49.png](https://qiita-image-store.s3.amazonaws.com/0/111385/2d9c1afc-6da8-1652-e183-08cc1ff3fa95.png)

ぱっと見たところ、
![スクリーンショット 2016-02-01 06.49.05.png](https://qiita-image-store.s3.amazonaws.com/0/111385/4cece298-f713-61d4-5a3f-241be2606701.png)
ここが取得する際に不要になりますね。
「トップへ戻る」
は普通に文字列削除でできるでしょう。
その下の
「昨日(31日)分へ」
は日付を-1して文字列として削除すれば行けるでしょう。

```py:出動状況取得.py
#coding: utf-8
import urllib2, re, datetime

def GET_status():
	GET_URL = "http://www.119.city.sapporo.jp/saigai/keihon.html"
	req = urllib2.Request(GET_URL)
	response = urllib2.urlopen(req)
	the_page = response.read().decode('shift_jis')
	tabu_pY_ =  re.sub("<.*?>","",the_page)
	one = tabu_pY_.replace(u"ﾄｯﾌﾟへ戻る", "")
	try:
		todaydetail = datetime.date.today() -datetime.timedelta(1)
		return one.replace(u"昨日(%s日)分へ" % todaydetail.strftime("%d"), "")
	except Exception, e:
		print e

if __name__ == "__main__":
	i = GET_status()
	print i
```
Linuxの基礎知識 - アクセス権まわりについて


# アクセス権限 / Permission
初心者向けのまとめサイトをさらに噛み砕いてまとめた。メモ用。

## SUID
#### SUIDとは
SUID（Set User ID）は、実行権のあるファイルに設定される特殊なアクセス権。
通常実行ファイルを実行すると、そのファイルを実行したユーザーの権限で実行されるが、SUIDが設定されたファイルでは、その実行ファイルの所有者のアカウント権限で実行される。
もともとLinuxに入っているコマンド類にもSUIDが設定されているコマンドがあり、例えば`passwd`コマンドがこれにあたる。
注意すべきは。*コマンドに対してSUIDを付加する*という点。少しわかりにくい、、、


#### 確認方法
所有者の部分が`rws`となっており、実行権の部分が通常の`x`ではなく`s`になっている。

  ```bash
 $ ls -l /usr/bin/passwd
 -rwsr-xr-x 1 root root 9214  3月  12  2013 /usr/bin/passwd
  ```
  
  passwdコマンドは、`/etc/passwd`や、`/etc/shadow`の様な一般ユーザーでは通常変更できないファイルを更新する。一般ユーザーがこのコマンドを実行し、`/etc/passwd`や`/etc/shadow`を更新できるのは、passwdコマンドにSUIDが設定されていて、root権限で実行されているから。

#### 設定方法
1. シンボルモード
   `chmod`コマンドで

   ```bash
   chmod u+s file
   ```
2. 数字モード
   数字モードで設定するには、アクセス権を表す数字に`4000`を足す。
   
   ```bash
   chmod 4755 dir
   ```

## SGID
#### SGIDとは
SGID（Set Group ID）は実行権のあるファイルに設定される特殊なアクセス権で、SUIDと異なり、ディレクトリにも設定される。

実行ファイルにSGIDが設定されていれば、実行ファイルの所有グループの権限でファイルが実行される。
ディレクトリにSGIDが設定されている場合は、そのディレクトリ配下に作成されたファイル・ディレクトリの所有グループが、SGIDを設定されたディレクトリの所有グループと同じものになる。SUIDのグループ版だが少し違う。

#### 確認方法
Permissionのグループの部分が、「r-s」となっている。実行権の部分は、通常`x`だがここが`s`になっているとSGIDが設定されている事を意味する。

  ```bash
  # ls -l file
  -rwxr-sr-x 7 root group1 4096  7月 30 14:32 /tmp/
  ```

#### 設定方法
1. シンボルモード
   `chmod`コマンドで

   ```bash
   chmod g+s file
   ```
2. 数字モード
   アクセス権を表す数字に`2000`を足す。
   
   ```bash
   chmod 2755 file
   ```


## Sticky Bit
#### Sticky Bitとは
ディレクトリに設定される特殊なアクセス権のこと。
Sticky Bitが設定されたディレクトリでは、すべてのユーザーがファイル・ディレクトリに書き込めるが、所有者だけ（rootは除く）しか削除できなくなる。/tmp ディレクトリは、Sticky Bitが設定されている。

#### 確認方法
その他のアカウントに対しての実行権限に`t`が付加されている。

  ```bash
  # ls -ld /tmp/
  drwxrwxrwt 7 root root 4096  7月 29 04:02 /tmp/
  ```

#### Sticky Bitの設定方法
1. シンボルモード
   シンボルモードSticky Bitを設定するには、`chmod`コマンドで、「その他」の権限に対し`t`を＋する。

   ```bash
   chmod o+t dir
   ```
2. 数字モード
   アクセス権を表す数字に`1000`を足す。
   
   ```bash
   chmod 1777 dir
   ```