OmniAICreator/Qiita-1.07M huggingface dataset:
pecoでHit-a-Hint

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/12235/0a90a3d4-2202-8aa5-4f09-abd9be486175.gif)


[peco](https://github.com/peco/peco/) version v0.3.4で Hit-a-Hint機能が実装されました. これにより, 行移動をすることなく候補を選択することができます. (Hit-a-Hintを有効にすると行頭に Hint文字が現れ, それを入力するとその候補が選択されます)


## インストール

各プラットフォーム向けバイナリは[こちら](https://github.com/peco/peco/releases)からダウンロードすることができます.

### ソースコードからインストール

v0.3.4から Go 1.5以上が必要になりますので, 古い Goを使っている方は注意が必要です. 基本的にはバイナリの利用を推奨します.

```
% go get -u github.com/peco/peco/cmd/peco
```

## 設定

Hit-a-Hint機能はデフォルトでは利用できません. 利用する場合は設定ファイルにキーとコマンド(`ToggleSingleKeyJump`)を追加します. 設定ファイルは `~/.config/peco/config.json`, `~/.peco/config.json`等に置きます. 詳しくは[こちら](https://github.com/peco/peco/#configuration-file)参照してください.


設定例を以下に示します.

```json
{
    "Keymap": {
        "C-q": "peco.ToggleSingleKeyJump"
    }
}
```

この場合 `C-q`を押すと Hint文字が行頭に現れます(再度押すと消え, 通常通り絞り込みが行えます). Hint文字はページ移動の間も有効です(実装上そうなっている). 絞り込んでから利用することももちろんできます.

![output2.gif](https://qiita-image-store.s3.amazonaws.com/0/12235/4750f769-7acd-293f-1620-6624e95ff238.gif)



## 制約

現在のところターミナルエミュレータの縦のサイズ(表示できる文字数が多い)とすべての候補に対して Hint文字が表示されません. 大文字も使えばもう少しは問題を回避できるでしょうが, 根本的な解決ではないのでこれについては検討する必要があると考えています.


## おわりに

pecoの Hit-a-Hintについて紹介しました.

問題, 要望等ありましたら [github issues](https://github.com/peco/peco/issues)までお願いします
vulture で未使用のクラス/メソッド/関数/変数を探す

pypi_updateのTLに更新情報が上がってきたので使ってみました。

# vulture

vultureは使われていないクラス/メソッド/関数/変数を指摘します。
https://pypi.python.org/pypi/vulture

## インストール

pipでインストールできます。

```shell-session
$ pip install vulture
```

## 実行

インストールが完了するとvultureコマンドが使えるようになっています。そのコマンドを使って実行します。

### 全てのオブジェクトが使われている状態

定義されている全てのオブジェクトが使われているサンプルコードを作りました。

```use.py:py
# -*- coding: utf-8 -*-
USE = 'use'


class Use(object):
    use_attr = 'use'

    def use(self, value):
        self.use_attr = value
        return self.use_attr


def use():
    Use.use(USE)

if __name__ == '__main__':
    use()
```

このサンプルコードに対してvultureを実行します。

```shell-session
$ vulture use.py
$ echo $?
0
```

何も指摘されずに終了しました。

### 全てのオブジェクトが使われていない状態

今度は逆に全てのオブジェクトが使われていない状態のサンプルコードを作りました。

```unuse.py:py
# -*- coding: utf-8 -*-
UNUSE = 'unuse'


class UnUse(object):
    unuse_attr = 'unuse'

    def unuse(self, value):
        data = None


def unuse_func():
    func_data = None

```

このサンプルコードに対してvultureを実行します。

```shell-session
$ vulture unuse.py
unuse.py:2: Unused variable 'UNUSE'
unuse.py:5: Unused class 'UnUse'
unuse.py:6: Unused variable 'unuse_attr'
unuse.py:8: Unused function 'unuse'
unuse.py:9: Unused variable 'data'
unuse.py:12: Unused function 'unuse_func'
unuse.py:13: Unused variable 'func_data'
$ echo $?
1


```

7件指摘されて異常終了しました。
グローバル変数(UNUSE)、クラス(UnUse)、クラス変数(unuse_attr)、インスタンスメソッド(UnUse.unuse)、関数(unuse_func)、ローカル変数(dataとfunc_data)に対して指摘されました。関数やメソッドの引数に対しては未使用かどうかは指摘されません。

### 設定のみのメンバー変数は指摘される

以下の例では `self.data` に値を設定していて、全くの未使用というわけではありません。ただその値を取得してはいません。

```unuse2.py:py
# -*- coding: utf-8 -*-


class Use(object):
    def __init__(self):
        self.data = 1

    def set_(self, value):
        self.data = value

Use()
Use.set_(2)
```

このサンプルコードに対してvultureを実行するとどうなるのでしょうか?

```
$ vulture unuse2.py
unuse2.py:6: Unused attribute 'data'
$ echo $?
1
```

コンストラクタの `self.data = 1` の箇所を指摘されました。
値を設定しているだけの場合指摘されます。
ソケットと割り込みとTSS

### socket
擬似ファイル・システムのためにディスクなどに実態はない。よってopenできないのでsocket()でソケット(パケットを入れる箱)とプロセスを結びつける。

### 割り込み
* ハードウェア割り込み
* ソフトウェア割り込み

### 例外もあるよ！
* トラップなどなど

### TSS
* trレジスタにTSSの場所がかかれている
* ユーザモードプロセスのカーネルモードスタックの番地が書かれている。プロセス生成時にTSSにかく？モードが変更された時に他にもレジスタを保存できる
* SS,EIP,CS,EFLAGS,ESP,SSは特権の変更にいくつか保存されるされないがあったような
* SAVE_ALLでその他レジスタはスタックに保存される
* カーネルモードの時の割り込みはその時使用しているカーネルスタックをネストして使用される。だからいっぱいネストしまくったらオーバーフローおこしちゃう？？
Fuelphp install に困ったら

コマンドでインスコしようしたがgithubのトークンが必要だったり、コマンドが途中でコケたり（phpのライブラリが足りない?）

まぁ、何にしてもぱっとみブラックボックスなコマンドよりGUI操作で簡単にやってしまおうと、
要するにzipを落としてきて上げる。

linux環境に上げた際には権限問題が発生するらしくちょっと調整がいる。

と、言うわけで無事にうぇ～るかむページが出たので追記開始・・・

結局コマンドラインで入れました。
なぜかというと出てたエラーがどうもphpのバージョンが古い感じだったので
上げてみました。
環境はあんまり書きたくないのですが、さくらのVPSです。

出てるエラーは、、、

PHP Warning:  PHP Startup: Unable to load dynamic library '/usr/lib64/php/modules/php_mysqli.dll' - /usr/lib64/php/modules/php_mysqli.dll: cannot open shared object file: No such file or directory in Unknown on line 0
Could not open input file: composer.phar


とりあえず、phpのバージョンをyumであげる！！
http://youngforever.hatenablog.com/entry/2013/03/06/212633
参考にさせてもらいました。

が、しかし。。。。

PHP Warning:  PHP Startup: Unable to load dynamic library '/usr/lib64/php/modules/php_mysqli.dll' - /usr/lib64/php/modules/php_mysqli.dll: cannot open shared object file: No such file or directory in Unknown on line 0
Could not open input file: composer.phar

う～～ん、いったんおいとこ・・・・

と、言うわけで再度イスコマンドを

oil create hoge

しかしやっぱり上のワーニングがまだ出る。
そして、いきなり真っ赤な

Error - date_default_timezone_get(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in COREPATH/classes/fuel.php on line 162

こわいこわ。
でも、よくみたらこれどっかの記事でみたぞ・・・そうタイムゾーン問題！！

こいつは比較的簡単に解決。

hoge/fuel/app/config/config.php

ここに
  // 'default_timezone'   => null,

こんな行があるので

ここにnullがあるじゃろ？

( ＾ω＾) 
⊃ null ⊂ 

これを こうじゃ
( ＾ω＾) 
⊃)　Asia/Tokyo (⊂ 

'default_timezone'   => 'Asia/Tokyo',


気をつけなきゃいけないのはケツの「,」こいつな
これ、いるからね。ね。

あとはインスコした場所のURLを入れればきっと迎えられるとおもうよ！！
ちょっとでも役に立てば、、、、
map[key1,key2]形式で複数キー用マップを操作する（Groovy）

##やりたいこと

ペア（やセット）に対して値（やオブジェクト）を設定したい場合があります。
（例）

- ニューラルネットワーク計算での２ユニット間の「重み」
- ソーシャルネットワークにおけるユーザ間の距離とか

一致や比較について特別な要件がある場合は、ペアやグループを保持する専用クラスを作って、equals()やhashcode()をoverrideするようにし、comparatorも設定し、その専用クラスをMapのキーにする、という感じだと思います。

しかし、ただペアやセットを、別の何かと一対一対応させたいだけなら、Listをキーにすれば済み（順不同にする工夫は必要）、それもよくやられていると思います。

今回は、それをGroovyでやってみると、**値を登録／取得するコードがシンプルで気持ちいい**という話です。

##実装例

複数キー対応マップクラス：  

```groovy
class MultiKeyMap extends HashMap<List,Object>{
    @Override
    Object put(List key, Object value) {
        super.put(key.sort(false), value)
    }
    @Override
    Object get(Object key) { // get(List key)とすると呼ばれなくなってしまう
        super.get((key as List).sort(false))
    }
}
```

使用例：  

```groovy
class Neuron{} // ネットワークのニューロン（ユニット）、中身は省略
```
があるとして、

```groovy
def w = new MultiKeyMap() // ニューロン間の重み（ペアごとに設定される）マップ

def n1 = new Neuron()
def n2 = new Neuron()
def n3 = new Neuron()

w[n1,n2] = 0.2 // 値をセット
println w[n1,n2] // 取得できる
assert w[n1,n2] == w[n2,n1] // もちろん順不同
.
w[n1,n2,n3] = 0.5 // ３要素以上の組でもOK
println w[n1,n2,n3]
```

##ポイント

Groovyのマップにおいて、```mapObj[a,b,c]```は、```mapObj[[a,b,c]]```と同じで、
つまり「[a,b,c]というリストをキーにしてmapObjから値を取得する」動きになります。
複数キーマップとして使い勝手のよい最小表現は、

1. mapObj[a,b] **← 今回はこれ**
2. mapObj[a][b] // 二次元配列、numpyの行列とか
3. mapObj(a,b)

かなと思うのですが、1.の形は比較的簡単に実現できて便利だな、というところです。

※2.も実装できないことはないのですが、速度やメモリに無駄な部分が出てくる予感です。
また、numpyの行列が一層便利だと思う点は、ワイルドカードを使って、w[a][*]（aを含むすべてのペアの値を返す）のような書き方ができることです。
gcloud confing configurations コマンドでconfig設定を切り替える

# 機能が追加されたみたい
`gcloud 2015.09.21` から`gcloud config configurations`コマンドがGAになり、`gcloud config list`実行時に以下設定が追加されるようになった。

```
[meta]
active_config = default
```

どうも`gcloud config list`で設定している設定ごと切り替えられるようになったらしい。
業務で複数のprojectやzoneを`glcoud config set`コマンドで行ったり来たりしていたので使えそうだ、ということで使えるのか設定・検証してみた。

# 設定方法
## configurationの作成
`gcloud config configurations create CONFIGURATION名`
兎にも角にもまずはconfigurationを作ってみる。名前は適当でいいだろう。

```
% gcloud config configurations create hoge                                       
Created [hoge].
To use this configuration, activate it using `gcloud config configurations activate`.
```

命名規則違反するとクッソ怒られる。

```
% gcloud config configurations create HOGE                                                                
ERROR: (gcloud.config.configurations.create) Invalid name [HOGE] for a configuration.  Except for special cases (NONE), configuration names start with a lower case letter and contain only lower case letters a-z, digits 0-9, and hyphens '-'.
```

## configurationの切り替え
`gcloud config configurations activate CONFIGURATION名`
長い。alias必須だろこんなもん。

```
% gcloud config configurations activate hoge                                                              
Activated [hoge].
```

ちなみに作ったばっかりのconfigurationにはactive_config以外の設定は入っていない。

```
% gcloud config list                                                                                      
[meta]
active_config = hoge
```

gcloud config set コマンドで記載してもいいんだけど（本来はそれが正攻法のはず）だが、面倒なのでファイルに直接書いちゃう。
`~/.config/gcloud/configurations`の中に`config_CONFIGURATION名`のファイル名があるので今までの設定である`config_default`を真似て直接書いちゃえます。

## configurationの確認
`gcloud config configurations list`
作ったconfigurationsと今どのconfigurationが有効なのか確認できます。

```
NAME                  IS_ACTIVE
default               False
hoge                  True
```

これ情報どこから取ってきてるかというと`~/.config/gcloud/configurations`からのようです。
`touch ~/.config/gcloud/configurations/config_fuga`って実行したらfuga出てきちゃったからね。内緒だよ。

```
% touch ~/.config/gcloud/configurations/config_fuga
% gcloud config configurations list
NAME                  IS_ACTIVE
default               False
fuga                  False
hoge                  True
```

# この機能の使い所とは
今持ってるサービスではenvironment/partitionごとにVMインスタンス群を持っていて、複数存在するGCP projectとzoneの組み合わせと紐付けて作業をする必要があります。
今回environment/partitionの名前でconfigurationを作ってしまえばGCP projectやzoneが何かを気にすることなく作業ができそうだな、ということで使い始めています。
あとはGKEのcluster(`[container]cluster`)の切り替えなんかにも使えそうですね。

ちなみにaliasはgcloud config configurationsを略したら`gcc`なのでこれはないな、と思い`gcfg`あたりが妥当かなぁと思ってます。
ISUCON5に参加したのでその雑記

## はじめに

[ISUCONとは](http://isucon.net/)、「お題となるWebサービスを決められたレギュレーションの中で限界まで高速化を図るチューニングバトル」です。 3人でチームを組んで参加し、レギュレーションの中であれば自由にアプリケーションに手を加え、出題者が用意したベンチマークでもっとも優れたスコアをたたき出したチームが優勝となります。
要するにあるお題のアプリケーション・サービスが渡され、それをいかに早く・速くするか、というコンテスト。

## 今回の問題の概要

ログイン制のSNSサービスがテーマだった。

* ユーザ同士が友達となる
* 自分の日記が公開できる
* 友達の日記が読める
* 友達からの日記へのコメントが読める

今回はISUCON4の時の問題に比べてとにかく画面数とテーブル数が多かった。
（ちなみに前回のISUCON4の時はテーブル2つ、今回は7つ）
制限時間内もあるのでどこをチューニングしていくかの当たりをつけていくのが大事かと思われる。

## チーム

会社の先輩2人とチームを組んで参加をした。
私が1番下っ端だったので雑用や相談人形になることが主な役割だった。
1番上の先輩がインフラ・ミドルウェアまわり、私と1つ上の先輩でアプリケーションまわりを担当した。
言語は3人とも触れている`Ruby`にした。

## やったこと

* アプリケーションのソースコードを読み、挙動の理解
* `MySQL`のテーブルを眺めてデータの構成の把握
* `GCP`上に`SSH`した先の`ISUCON`ユーザのログインシェルを`bash`に変更（これをやらないとタブ補完もヒストリも効かずにひたすら辛かった）
* スロークエリを見てクエリの改善（なお大した成果は得られなかった模様）
* 冗長なソースの改善、N+1やLIMIT1000のクエリ（なお大した成果はry）
* アプリ担当の先輩のソースレビュー（アプリ2人で擬似プルリク駆動開発）
* お弁当の買い出し
* 当日のサポートチャット（`idobata`）のチェック・報告

とまぁ大したことはやってなく、本当に雑用という感じ
アプリケーションの改修の方も「ここだ！」と思った箇所を改修したがむしろスコアが下がりすぐにリバート。

## 結果

|初期スコア|最終スコア|
|:-----------:|:------------:|
|65|1864|

他チームに比べて初期スコアが低すぎるような…まぁ初日はベンチマークにバグがあったようだし気にしない。
当初の目標が「初期スコアの2倍・3倍」だったのでその点に関しては大幅に達成できた。
とは言えこの体たらく…どうやったら5桁もスコアいくんだ…。

## 感想

インフラ・ミドルウェアまわりの一切を任せてしまった（よく言えば役割分担がしっかりできていた）のでそっちまわりはさっぱり分からず終わってしまった。
そちら側の改修で大幅に点数が上がり、アプリケーション側の改修では微々たる程度しか上げることができなかった。
後から知ったことなのだが、ソースの修正をしてベンチマークを走らせる前にrubyのリスタートをしないとソースが反映されないらしく、もしかしたら修正が反映されていなかった可能性が終わり際に浮上し青ざめたことはここだけの話。
とはいえ反映されていても微々たるものだっただろうな…。

## おわりに

今回ISUCON初参戦だったが、競技自体がとても面白かった。
自分の不出来さを痛感する意味で参戦した意義はあった。

というクソザコエンジニアの参戦記録でした！
【Monaca】ローカル通知Pluginをインストールしてもビルドが通らない場合の対応



AsialBLOGさんの「[プラグインで簡単に実装できるローカル通知機能！！](http://blog.asial.co.jp/1403)」の記事を読んで実際にやってみたらビルドでエラーが出ました。
無事解決できたのでメモしておきます。※Android版のみで確認しました。
> 2015.9.30追記
DeviceプラグインはダウンロードでなくMonaca初期プラグインのDevice(org.apache.cordova.device)を有効にすることでも動作しました。citherさんありがとうございました。

> 2015.10.02 追記
そもそも足りていないプラグインをダウンロードしてインストールする必要はなく設定ファイルを書き換えることで対応可能とのことでした。
citherさんありがとうございました。
下記大幅に修正しています。


# はじめに結果だけ
* プラグインをZIPファイルからインストール（GitHubのURLのからのインポートはファイルの修正ができないのでNG)
* 「cordova-plugin-local-notifications」の設定ファイルの変更

上記でビルドが通るようになりました。

# 理由
ビルドが通らないのは「cordova-plugin-local-notifications」が「cordova-plugin-device」と「cordova-plugin-android-support-v4」を別途インストールしようとするのですが、パスが違うのか404を返していたためでした。（恐らく命名規則が変更されプラグイン名が変わったため）
そのため上記２つのプラグインをインストールできるようにファイルの変更を行います。

# 対応
## 「cordova-plugin-local-notifications」プラグインをZIPインストール

下記のファイルを直接ダウンロードします。（右下のDownloadZIPから）

* [cordova-plugin-local-notifications](https://github.com/katzer/cordova-plugin-local-notifications)

## 「cordova-plugin-local-notifications」の設定ファイルの書き換え
ここに気づけませんでしたが[aktuehr](http://qiita.com/aktuehr)さんに教えてもらえました。わからないときは力を借りるのも重要！ｗ

Monacaの以下ファイルを修正します。

* plugins/de.appplant.cordova-plugin-local-notifications/plugin.xml


27行目くらい

```
<dependency id="cordova-plugin-device" />
```
↓

```
<dependency id="org.apache.cordova.device" />
```

82行目くらい

```
<dependency id="cordova-plugin-android-support-v4" />
```
↓

```
<dependency id="android.support.v4" />
```
idをorg.apache.cordova.deviceやandroid.support.v4にします。

上記でビルドするとエラーがなくなります。
アプリを実機にインストールすると無事LocalPushが来ました！

----

恐らく「cordova-plugin-local-notifications」が他２つのプラグインを取得するURLが異なることが原因かと思います。
※cordovaの命名ルールが変更になっているらしくそれらの影響かと思われます。

インストールが失敗したプラグインは以下URLにあるか確認して、存在すればPlugin IDをdependencyのidに指定することでダウンロードができるようです。
無い場合はZIP形式でダウンロードし設置することも可能で、対象プラグインをダウンロードし設置したフォルダ名と同じIDにすれば問題ないようです。難しい。。。

* http://plugins.cordova.io/
    * http://registry.cordova.io/ plugin.name
c3.jsの標準機能だけでは賄いきれない仕様に出会ったら


javascriptで簡単に様々なグラフを描画できるc3.jsですが、
絶妙に機能が足りない・・・いや逆に多い・・・
だがd3.jsで一から作る余裕も無い・・・



そんなことありますよね。
そんな時にとった方法がこんな感じ。

###html
```html
<div id="chart"></div>
```

###js
```
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 1, 2, 3, 4, 5],
            ['data2', 5, 4, 3, 2, 1]
        ],
        type: 'area'
    },
    onrendered: function () {
        // d3で取得
        var svg = d3.select('#chart').select('svg')
        
        // jQueryで取得はコチラ
        // var svg = $('#chart svg')
        
        // 今回はグラフの背景色を編みかけ調やドット調にするためdefsにパターンを追加していきました。
        svg.select('defs').append('pattern')
        //・・・以下省略
    }
});
```

描画完了のコールバックで生成されたSVGを取得煮るなり焼くなりしてみました。
初期表示だけ処理を行う場合は『oninit』、リサイズ時のみの場合は『onresized』で。

他に良い方法ある気がするなぁ。
ご存知の方いらっしゃいませんか？
よく使うのにすぐ忘れる 行末の空白削除コマンド


コードレビューなどで
「ここに余計な空白があるね」
みたいな指摘を受けてですね
「ま・・・また・・・またやってしまった・・・」ﾎﾟﾛﾎﾟﾛ 
と言う気持ちになって、当然
「消して 以下全部」
と言われるわけですよ
「ちくしょう・・・なんで俺がこんな目に・・・ちくしょう・・・・ちくしょう・・・！！！！」ﾎﾟﾛﾎﾟﾛ
で、本来、レビューして頂きたいロジックのことなんて、すべてどうでも良くなっちゃうんです(ならない)

# 空白行を削除
``` :g/^ *$/d ```

行頭から行末までにある半角空白だけで構成されている行と、改行コードのみの行を削除します
![1.gif](https://qiita-image-store.s3.amazonaws.com/0/45349/2c89fa33-b28d-1e60-004a-ca5d44e5787e.gif "1.gif")
* ライトブルーの'_'(アンダースコア)が半角の空白です

# 空白のみの行の空白を削除
```:%s/^ *$//g```

行頭から行末までにある半角空白だけで構成されている行の半角空白を削除します。改行コードは残します
![2.gif](https://qiita-image-store.s3.amazonaws.com/0/45349/a3a0bd45-52de-16b6-43ec-b7dda73e5878.gif "2.gif")

# 行末の空白を削除
```:%s/ *$//g```

ファイルすべての行末にある半角空白を削除します
ほとんどこれしか使いません

![3.gif](https://qiita-image-store.s3.amazonaws.com/0/45349/cbce53c1-4677-0260-8f8d-464d1ff4941a.gif "3.gif")


「・・・・・よし・・・成功だ・・・・！！！！！」
「よかった・・・・よかった・・・・・！！！！！」ﾎﾟﾛﾎﾟﾛ
atomで見つけたcsv editorの出来が異常

どうしてもゲーム制作を仕事でやってたらやってくるcsv編集。
はあExcel開きたくない。
はあNumbers開きたくない。

そのためだけにcsv editorインストールするのもあれだし、というかmacだと無料でないし(多分)、秀丸とかにあるような列合わせて表示してくれるだけでいいんだけどなーと思いながらplugin探したらありました。


## tablr

pluginのinstall画面で`tablr`で検索してインストールする。
ファイル開いた直後が以下

![スクリーンショット 2015-09-29 20.02.24.png](https://qiita-image-store.s3.amazonaws.com/0/31127/4d85de47-c192-5c2c-f558-31345db7db4e.png)

あ、やばい
なにこれatom editor内でこんなことできんの

![スクリーンショット 2015-09-29 20.03.10.png](https://qiita-image-store.s3.amazonaws.com/0/31127/fbf8f947-f018-a9ca-0cf4-2455a087874a.png)

昇順降順とかできるし

![スクリーンショット 2015-09-29 20.03.24.png](https://qiita-image-store.s3.amazonaws.com/0/31127/1720218b-e258-09f7-d4e7-f2ebe55ea0e6.png)

予想外すぎる・・・
display: flex 使う時のメモ

`display: flex` は、もうそろそろ使えそうですよねーと思っていますが、まだ、フォールバックというか、「グチャグチャにならない程度には何かしようか」と思うことも多いサポート状況です（Sep 9, 2015）。

[Can I use](http://caniuse.com/#search=flex)

* IE9以下 ... No
* IE10 ... Only supports the 2012 syntax
* Safari8 ... 要 `-webkit-`
* iOS Safari7,8 ... 要 `-webkit-`
* Android4.3以下 ... Only supports the old flexbox

Android4.3以下は wrapping ができないので、そのように組みたい場合は、使えません。

## inline-block でフォールバック的な

これらを踏まえて、 `inline-block` でなんとなくレイアウトしよう！とするとどうなるか。

<p data-height="350" data-theme-id="0" data-slug-hash="yYgBRK" data-default-tab="result" data-user="nagomu" class='codepen'>See the Pen <a href='http://codepen.io/nagomu/pen/yYgBRK/'>Flex grid</a> by nagomu (<a href='http://codepen.io/nagomu'>@nagomu</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

* 33.333% とかしてると、ちょっと不足する
* （もちろん）高さは揃わない

と、まあ、ここまではまだ問題ないという判断が出るケースもありそうです。

## Autoprefixer 使う時

Android4.3 以下は Old Syntax が書き出されてしまうと、困る場合があります（wrapping したい時）。
しかし、Android3 以下のために `-webkit-` 出て欲しいとかいう場合は……困った……っていうのが今。

## その他

* wrapping しなくて良くて、古いブラウザにも対応したい場合は、 `display: table` 使っとけと思います
* IE9 はサポートポリシーが変更になったら、Vista 上の IE9 だけがサポート対象になるはずなので、もう、良くね？と思ってます

というメモ。
numpy  の配列を wave モジュールを使って wav ファイルに保存

# 何をしたいか

numpy で保持されている音の波形データを、ファイルに保存したい。
ただし、scikits.audiolab ではなくて、標準のモジュールだけを使ってしたい。

# 詰まったところと解決策

### Wave_write クラスのパラメータ
[Wave_write クラスのドキュメント](http://docs.python.jp/2/library/wave.html#wave-write) に
setparams で渡すパラメータのうち４番目のフレーム数は、
「あとからフレームが書き込まれるとフレーム数は変更されます。」
と書かれているが、0 にするとうまく行かなかった。

### バイナリの作り方
wave の writeframes に渡す波形を表すバイナリの作り方。
numpy.tostring() だとダメで、 array で 'h' に変換したあと、tostring するとうまくできた。

# コード

```
import numpy, wave, array
filename = "wave_file_name.wav"

# save wav file
buf = <numpy の波形データが入っている>
w = wave.Wave_write(filename)
w.setparams((
    1,                        # channel
    2,                        # byte width
    16000,                    # sampling rate
    len(buf),                 # number of frames
    "NONE", "not compressed"  # no compression
))
w.writeframes(array.array('h', buf).tostring())
w.close()
```
usermodでユーザーをサブグループに追加するときの注意

ある`user`をサブグループ`hoge`に追加したい時に`usermod`コマンドで追加するときの注意点

単純に

```
# usermod -G hoge user 
```

とすると、**元々`user`が所属していたグループに`hoge`を追加するのではなく、`hoge`のみが`user`が所属するグループになる**。
もしadminユーザーなどでこれを行ってしまうと、`sudo`できるユーザーがいなくなりたいへんなことに。
`usermod`コマンドで追加したいときは、`-G`オプションで所属させたいすべてのグループを列挙するか、さらに`-a`オプションを追加する。

```
# usermod -aG hoge user
```

もしくは`gpasswd`コマンドも使える。

```
# gpasswd -a user hoge
```

`usermod`コマンドとはuserとgroupの引数の順番が逆なのに注意。


## 間違って-Gオプションのみで実行してしまったときの復旧方法
groupの設定は、`/etc/group`に記述されており、一世代前の設定は末尾に`-`をつけたファイル、`/etc/group-`としてバックアップが自動的に取られている。これを`/etc/group`として上書きしなおせば復旧可能。
ただし、`/etc/group-`はパーミッションが600になっているのに対して、`/etc/group`は644なので、パーミッションに注意する。600のままだとroot以外の一般ユーザーで`groups`コマンドを実行すると設定が読み込めず、グループ名がみつからないといったエラーになるので注意。

```
# mv /etc/group- /etc/group
# chmod 644 /etc/group
```
memcachedの同時接続数に余裕があるのに接続できなかった原因

ソーシャルゲームのインフラ担当をしていた時の失敗談です。

## なぜか接続が混みあう
・運用開始後は特に問題なく動いていたが、イベント開始した次の日にユーザから接続できないというお問い合わせが大量にくる。
↓
・イベントだったので、サーバ台数を増やしていたこともありサーバの負荷には問題がない。
↓
・アプリ開発者にインフラは問題ないと伝える。
↓
・memcachedサーバがアクセス数に比べて負荷が低いのがおかしいと言われる。
↓
・memcachedの何かがおかしい。調べることにする
　下記が調べた結果になります。

## memcachedの設定値
```
memcached -d -p 11211 -m 2048 -c 10000
```

同時接続数：10000
メモリ割当：2GB

memcachedの設定は問題なさそう
やっぱりインフラに問題ないと言おうかと思ったが、アクセス数とmemcachedサーバの負荷が比例していないのがおかしい。もしかしたら、memcachedにうまく接続できていないのじゃないかと思い、接続関係を調べなおす。

## 原因
ググっていたら同じような現象がおきたブログを発見。
どうも「net.core.somaxconn」の設定が原因の可能性があるとわかり、調べてみる

```
# sysctl net.core.somaxconn
net.core.somaxconn = 128
```

この設定だと128に切り詰められてしまい、負荷が高いサーバでは接続要求を取りこぼしてしまうことがあるとのこと

## 対応
/etc/sysctl.conf

```
net.core.somaxconn = 10000
```
memcachedを再起動

設定変更後は、接続できないというお問い合わせはこなくなりました。


net.core.somaxconnは大量コネクションを必要とするサーバ設定の定番チューニングみたいです。


## net.core.somaxconnの影響
net.core.somaxconnはOSレベルの接続キューの最大長として、TCPソケットで待ち受けるサービス全般に影響を与えます。具体的には、アプリケーションレベルで指定した接続キューの最大長 > net.core.somaxconnの場合、接続キューの大きさは暗黙にnet.core.somaxconnに切り詰められている可能性があります。

## 参考
http://tetsuyai.hatenablog.com/entry/20111220/1324466655
http://dsas.blog.klab.org/archives/51977201.html
fuel-qrcodeを使ってQRコードを生成する

久々にQRコードを作る用事が出たので、FuelPHPでどう簡単に作ろうかと探した結果、
https://github.com/steadweb/fuel-qrcode
こういうのがあった。

GitHubのページではソースコードでの書き方は書いてあるけど、どこに配置すればいいのか良く分からなかったので、自分用にメモ。

# FuelPHPに配備する

[steadweb/fuel-qrcode](https://github.com/steadweb/fuel-qrcode)からダウンロードしてきたZIPの中身は

~~~
├ bootstrap.php
├ README.md
└ classes
　├ qrlib.php
　└ (etc...)
~~~

という感じになっているので、bootstrap.php があることから fuel/packages/ 配下に qrcode というディレクトリを作って、そこに展開。

~~~
└ fuel
　└ packages
　　├ bootstrap.php
　　├ README.md
　　└ classes
　　　├ qrlib.php
　　　└ (etc...)
~~~

こんな感じに配置される。

あとは、README.md に記載されている感じで

~~~php
// load the package
\Package::load("qrcode");

echo \QRCode::png('http://qiita.com/');
~~~

としちゃえば、使える。


もしくは、 fuel/app/config/config.php で

~~~php
return array(
	'always_load' => array(
		'packages' => array(
			'qrcode'
		),
	),
);
~~~

とすれば常に読み込んでくれそうだけど、いつも使うわけじゃないので都度 Pakage::load でいいかなと。


# ライブラリを見てて

ちなみに、今回使った [steadweb/fuel-qrcode](https://github.com/steadweb/fuel-qrcode) は、実際には bootstrap.php でFuelPHP向けにラップしているくらいで、呼び出している QRCode クラスは
https://github.com/t0k4rt/phpqrcode
ここで配布されているものでした。

さらにこの [t0k4rt/phpqrcode](https://github.com/t0k4rt/phpqrcode) 自体は
https://github.com/fukuchi/libqrencode
http://fukuchi.org/works/qrencode/
この方のライブラリを移植したものになるみたい。

ありがたや(-人-)

# お決まりの

QRコードは、株式会社デンソーウェーブの登録商標です。
(↑書いてみたかっただけ)
PHPで「○月●日以降にこれを切り替えて表示してほしい」と言われたら

*A.「このバナー、○月●日になったら切り替えてほしいんだけど」*
*B.「お正月のあいさつを元日に出して、15日過ぎたら消してほしい」*
*C.「○月●日×時以降に表示してほしい」*

そのあたりに対応したコードをいつも忘れるのでメモ。

```php:Aのとき
<?php if ('20151001'<=date('Ymd')) { ?>
    <img src="images/20151001.jpg" />
<?php } else { ?>
    <img src="images/20150930.jpg" />
<?php } ?>
```

```php:Bのとき(1月1日から15日の間)
<?php if ('20150101'<=date('Ymd') && date('Ymd')<='20150115') { ?>
    <img src="images/20150101.jpg" />
<?php } else { ?>
    <img src="images/20151230.jpg" />
<?php } ?>
```

```php:Cのとき(12月1日の9時以降の場合)
<?php if ('201512010900'<=date('YmdHi')) { ?>
    <img src="images/20151201.jpg" />
<?php } else { ?>
    <img src="images/20151130.jpg" />
<?php } ?>
```


こちらの記事のコメント欄で書いてあることではあるけれど。
シンプルに書きたかったので自分用メモです。
[【PHP】日付比較](http://qiita.com/konweb/items/233a7fefe3f33ec595ae)
Redmine3.1.0 新機能の紹介(No.2)

# 「Redmine3.1.0」バージョンの6種の新機能を紹介します。 No.2

## 4.親チケットの値の算出方法の指定(#5490) 
Option for independent subtask priority/start date/due date/done ratio

以前のバージョンでは、「親チケットの値の算出方法」は、「子チケットの値から算出」されていましたが、3.1.0バージョンから、「子チケットの値から算出」と「子チケットから独立」を選択できるようになりました。
選択方法は「管理」->「設定」->「チケットトラッキング」->「親チケットの値の算出方法」で、「開始日」、「優先度」、「進捗率」において、「子チケットの値から算出」と「子チケットから独立」を選択できます。


![Redmine3.1.0-4.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/d3edfc39-eb1e-be3a-943f-c12f430b7803.jpeg)


## 5.Gravatarのアイコンを使用時、個人設定ページにGravatar追加(#5418) 
Add Gravatar and edit link to "My account" page

「管理」->「設定」->「表示」->「Gravatarのアイコンを使用する」にチェックを入れると、以前のバージョンでは、個人設定ページでGravatarを確認できませんでしたが、3.1.0バージョンから、Gravatarが個人設定ページで表示され、確認できるようになりました。また、Gravatarにハイパーリンクが張られて、Gravatarの編集が可能になりました。


![Redmine3.1.0-5.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/febc4d68-116a-aff0-5c02-7653d95f6686.jpeg)

![Redmine3.1.0-5 1.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/3f43bb3f-f632-a29f-3b4c-925f678b448e.jpeg)



## 6.「ロールと権限」で「表示できる作業時間」追加(#8929) 
Permission to view only your own time logs

「管理」->「ロールと権限」で->「新しいロール」もしくは既存のロールを編集すると、以前のバージョンでは、「表示できる作業時間」という欄がなかったが、3.1.0バージョンからは「表示できる作業時間」という欄が表示され、「全ての作業時間」、「自身が登録した作業時間」を選択できるようになりました。


![Redmine3.1.0-6.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/9c6802bb-2ee3-2f60-f786-2b432e8e2786.jpeg)

下図のように同じ「test」IDで同じプロジェクトを表示しているが、

A. 「自身が登録した作業時間」を選択時、権限がないので、他人の作業時間を参照できません。

![Redmine3.1.0-6 1.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/0ab6a3ca-3450-7d29-da49-e9ec2d8b7c51.jpeg)

B. 「全ての作業時間」を選択時、権限があるので、他人の作業時間を参照できます。

![Redmine3.1.0-6 2.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/dccc9f41-630a-5fe5-0465-9836006e1b24.jpeg)


（この資料は [「Ankosoft」](http://www.ankosoft.co.jp/) 社の[「Redmine3.1.0 新機能のご紹介」](http://www.ankosoft.co.jp/wp-content/uploads/2015/08/Redmine3.1.0.%E6%96%B0%E6%A9%9F%E8%83%BD%E3%82%AC%E3%82%A4%E3%83%89-Ankosoft.pdf)より引用して作成しました。）
Estimation of Average Latent Waiting and Service Times of Activities from Event Logs

I have presented my study "Estimation of Average Latent Waiting and Service Times of Activities from Event Logs" at BPM2015.

[paper](http://link.springer.com/chapter/10.1007/978-3-319-23063-4_11)

[pdf](http://researcher.watson.ibm.com/researcher/files/jp-NOGAYAMA/BPM2015_Nogayama.pdf)
Redmine3.1.0 新機能の紹介(No.1)

# 「Redmine3.1.0」バージョンの6種の新機能を紹介します。 No.1

Redmineの公式ホームページである「http://www.redmine.org/ 」の「ロードマップ」ページでRedmineの各バージョン別の機能を調べることができます。
2015年7月26日にリリースされた「Redmine3.1.0」バージョンの新機能は全部で15種あります。

## 1.文書のタイトルの文字数制限を60文字から255文字に引き上げ(#12312)
Raise 60-character limit for document titles

以前のバージョン※１では、文書のタイトルを60文字以内で入力する必要がありましたが、3.1.0バージョンから255文字まで入力まで入力できるようになりました。
※１：本書で使用する「以前のバージョン」は「3.0.4.stable」バージョンで確認しました。

![Redmine3.1.0-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/bb0c60fb-b990-b092-ccb0-3026e99bdadc.jpeg)

## 2.パスワードの有効期限を設定する機能 (#19458)
Add the ability to expire passwords after a configurable number of days 

以前のバージョンでは、パスワードの有効期限を設定する機能がありませんでしたが、3.1.0バージョンから、「管理」->「設定」->「認証」->「パスワードの有効期限」という項目が追加され、パスワードの有効期限を設定できるようになりました。これにより、強制的にセキュリティーを高めて運用することが可能になります。
デフォルト値は「無効」で設定されており、7日から365日の間で選択できます。

![Redmine3.1.0-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/465034e2-b6d8-88b8-f0ea-dff41b0af0b2.jpeg)

## 3.フィルターで親チケット、子チケットによる検索 (#6118)
Filter by parent task or subtasks

以前のバージョンでは、「チケット」、「ガントチャート」、「カレンダー」などで利用できるフィルター機能で親チケット、子チケットで検索ができませんでしたが、3.1.0バージョンから、検索できるようになりました。

![Redmine3.1.0-3 0.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/5d9dbd25-3627-cb8d-7cc2-dac2e1421f03.jpeg)

条件項目は、下図のように、「等しい」、「含む」、「なし」、「全て」を指定することができます。
下記では親チケットの場合に関して、説明をしていますが、子チケットの場合も原理は同じです。

![Redmine3.1.0-3 1.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/410d564a-dd58-418c-e295-7f4fb8ff74df.jpeg)

A.「等しい」の場合：検索用のテキストボックスに検索したい親のチケット番号を入力すると、検索された親チケットを持つ子チケットが表示されます。
※検索できるのは、チケット番号のみです。

![Redmine3.1.0-3 2.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/22f853b6-8290-6fe2-495a-58e8690c2b76.jpeg)

B.「含む」の場合：検索用のテキストボックスに検索したい親のチケット番号を入力すると、検索された親チケットに所属する配下の全ての子チケットが表示されます(孫チケット、ひ孫チケットなど)。
![Redmine3.1.0-3 3.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/06d5ca40-1873-cb0e-eb1d-128a1c50cd53.jpeg)

C.「なし」の場合：親チケットを持たない全てのチケットが表示されます。

![Redmine3.1.0-3 4.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/6e463bb5-3916-dd05-0c53-32204d339afd.jpeg)

D.「全て」の場合：親チケットを持つ全てのチケットが表示されます。

![Redmine3.1.0-3 5.jpg](https://qiita-image-store.s3.amazonaws.com/0/94912/dc412410-c96a-5ff2-60f0-593ee1ea348f.jpeg)


（この資料は [「Ankosoft」](http://www.ankosoft.co.jp/) 社の[「Redmine3.1.0 新機能のご紹介」](http://www.ankosoft.co.jp/wp-content/uploads/2015/08/Redmine3.1.0.%E6%96%B0%E6%A9%9F%E8%83%BD%E3%82%AC%E3%82%A4%E3%83%89-Ankosoft.pdf)より引用して作成しました。）
PHPでWindowsを区別する方法

# 概要
日本語でファイル名を保存する時に、WindowsとLinuxで文字コードを切り替える処理が必要だったので調べました。

# 判別方法

その1

```php
function isWindows(){
    $result = (substr(PHP_OS,0,3) == 'WIN');
    return $result;
}
```

その2

```php
function isWindows() {
    return PHP_OS === 'WIN32' || PHP_OS === 'WINNT';
}
```

その3

```php
function isWindows(){
    return defined('PHP_WINDOWS_VERSION_MAJOR');
}
```



# 文字コードの変換
```php
if ($this->isWindows()) {

    // windowのファイル名(sjis)を、utf-8に変換する
    $fname = mb_convert_encoding($fname, 'utf-8', 'sjis-win');
}
```
SMS送信API比較【2016/08/23現在】

SMS送信API比較~~【2015/09/29現在】~~
Twilioの価格が大幅に変更されていたので記事を修正【2016/08/23】
KDDIが「安心ブロック」を終了したのに合わせて価格等を変更しているサービスもあり。
新しいサービス等の調査はしていません！
SMS送信サービスでAPIを提供しているところを比較。
HPから引用+比較表と雑感

# サービス一覧
## [Twilio](http://twilio.kddi-web.com/)
SMS送信サービスというより、APIそのものを提供しているサービス
付加サービスがない分、料金は安い
~~URLや電話番号を含むSMSはauの場合キャリアで弾かれる~~[^ez2]
SMS送信にはアメリカ番号が必要で、その電話番号料は月額150円
SMS送信料金は対象キャリアによって異なる

|キャリア|SMS送信料| 
|:-:|:-:|
|au 宛|~~9.6~~　8 円（税込）|
|NTT ドコモ宛|9.6 円（税込）|
|ソフトバンクモバイル宛|~~1.5~~　8 円（税込）|
|イー・モバイル宛|~~6~~　8 円（税込）|

## [EZSMS](https://www.ezsms.biz/ja/)
無料登録ですぐ配信が可能
初期費用、月額なしの従量課金(前払いによるポイント購入[^#])
1通いくら、という計算でなくポイント制になっている
ポイントは一度に買うと単価が安くなる
発信前に少ないポイントで電話番号の存在確認ができるAPIもある
~~KDDIのフィルターを通すためには通常の2倍のポイントがいる~~
KDDIが「安心ブロック」を終了[^ez2]したためサービスが発番号通知を1.2ポイントで行うものに変更に。

もともと海外のサービスなので、FAQやドキュメントなどの日本語が少し不自然。
APIについてのドキュメントは登録をしなくても閲覧することができる。
サポートはメールのみ。
料金体系やドキュメントなどHP上での情報開示量はとても多い。

[^#]: 法人の場合は所定の審査をクリアすれば個別契約による後払いも可能

## [EXLINK-SMS](http://www.ex-sms.com/)
送信元表示名(Sender ID)のアルファベット表示が無料(auは非対応)。
~~au安心ブロック通過設定無料~~[^ez2]
au以外は未達の場合リトライ発信無料
国内５キャリア完全対応(DOCOMO,ａｕ,SoftBank,Y!mobile,ａｕ沖縄セルラー)
管理画面から送信結果を確認できる
2001通以上１通＠12円（税別）の従量課金

サイト内に情報が多い。FAQなども充実していてわかりやすい。親切な印象。

## [Media SMS](http://media-sms.net/)
IVR（自動音声応答）認証の補完機能
送達成功分のみ課金
基本料金1通15円の従量課金
初期費用や月額料金なし

## [SMS DIRECT](http://www.sms-d.net/)
双方向メッセージが可能(受信側が返信できる)
IVRとの連携可能
料金については、うちは安いよ！と書いてあるだけで具体的な表記はなし。

## [AOSSMS](http://aossms.com/)
到達率が高い
双方向メッセージが可能
双方向メッセージを利用して、アンケートや投票などを行うことができる

料金に関わることはHPではほとんどわからない

# 比較表
|サービス名|双方向通信|送信料金|au宛てのURL送信| 利用開始までの期間|
|:-:|:-:|:-:|:-:|:-:|
|Twilio|×|~~1.5~~ 8～9.6円/通|×|即時|
|EZSMS|×|10円～50円/通|○|即時|
|EXLINK-SMS|×|12円/通[^ex]|○|最短7営業日|
|Media SMS|×|15円/通|○|表記なし|
|SMS DIRECT|○|表記なし|○|表記なし|
|AOSSMS|○|表記なし|○|表記なし|

[^ex]: 2001通以上の場合。それ以外は問い合わせ

# 雑感
HPから費用が分かるのはTwilio,EZSMSのみ。
その他のサービスについては全くのブラックボックスであったり、利用方法や送信数で料金が変わるので個別に問い合わせる必要がある。

APIさえあればシステムは自前でつくれる、URLの送信は必要ないということであればTwilioが一番安く、利用者も多いので情報も多い。が、SMS利用の場合はアメリカ番号になるので、**送信相手が海外からのSMSを拒否している場合は届かない**。
[^ez2]: [2015年11月(中旬予定)で安心ブロックサービスが終了](http://www.au.kddi.com/information/topic/mobile/20150817-01.html)
Mac + Joystic Mapper で DualShock4 を使う場合のボタン認識一覧

Mac に DualShock4(PS4のコントローラー)を接続し，
Joystick Mapper Version 1.1.3 をインストールして
ボタンを認識させた結果の一覧が以下の結果．

| Handle | Status |
|:---|:---:|
| Axis #0 - | L-Stick ← |
| Axis #0 + | L-Stick → |
| Axis #1 - | L-Stick ↑ |
| Axis #1 + | L-Stick ↓ |
| | |
| Axis #2 - | R-Stick ← |
| Axis #2 + | R-Stick → |
| Axis #5 - | R-Stick ↑ |
| Axis #5 + | R-Stick ↓ |
| | |
| Hat #0 Left | ＋Key ← |
| Hat #0 Right | ＋Key → |
| Hat #0 Up | ＋Key ↑ |
| Hat #0 Down | ＋Key ↓ |
| | |
| Button 0 | □ |
| Button 1 | × |
| Button 2 | ○ |
| Button 3 | △ |
| | |
| Button 4 | L1 |
| Button 5 | R1 |
| | |
| Axis #3 + | L2 |
| Axis #4 + | R2 |
| | |
| Button 10 | L3 |
| Button 11 | R3 |
| | |
| Button 8 | SHARE |
| Button 9 | OPTIONS |
| | |
| Button 12 | PS |
| Button 13 | TouchPad Button |

Joystic Mapper の URL は以下の通り．
http://joystickmapper.com/
CSP用のonclickへの対処

# はじめに
Content-Security-Policy(CSP)に関する話です(それだけじゃないけれども)
FireFoxOSのアプリで適用されるデフォルトの認定アプリのCSP

```html
Content-Security-Policy default-src *; script-src 'self'; object-src 'none'; style-src 'self';
```
ではいろいろ制限がありますがonclickが制限されます。それに対する対処法を自分用にまとめたものです。
ついでにCSPの記述方法も書いておきます(ほぼ自分用)

ここの[ページ](http://itpro.nikkeibp.co.jp/article/COLUMN/20071001/283380/?ST=develop&P=1)でどうしてこれでいいのかとかは載ってるのでそれを丁寧に、どの部分をどう分離するのかというのをまとめます

# CSPの設定

いろいろなやり方はありますが、汎用性のあるmetaタグに記述します

```html
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self'; object-src 'self' style-src 'self';">
```

http-equivにContent-Security-Policyと
contentに追加したいポリシーを記述します。

※注意
CSPは後方互換性なので間違っていると何も動きません。
スペルミスとかは注意したほうがよいです

# 通常のonclickの状態

```html
<html>
<head>
</head>
<body>
<div id="box" onclick="alert('onclick')">CSPを利用しない</div>
</body>
<html>
```

こうするとテキストの部分をクリックするとalertが出ます。
これをonclickを使わないようにします。

# CSPでonclickを別表記

```js:event.js
var  addListener = function(elm, type, func){
	if (!elm){ return false; }
	if(elm.addEventListener) {
		elm.addEventListener(type, func, false);
	}else if(elm.attachEvent) { 
		elm.attachEvent('on'+type, func);
	}else {
		return false;
	}
	return true;
};

var init = function() {
	var div = document.getElementById('box');
	var popup = function () { alert("clicked!"); };
	addListener(div,"click",popup);
};

addListener(window,"load",init);
```

```html
<html>
<head>
<script type="text/javascript" src="event.js"></script>
</head>
<body>
<div id="box">CSPを利用する</div>
</body>
</html>

```

<head>タグの中で記述したevent.jsを呼び出しておき、onclick部分はCSPを利用しない場合のonclickが消えただけになります。
理論については[こ↑こ↓](http://itpro.nikkeibp.co.jp/article/COLUMN/20071001/283380/?ST=develop&P=1)を見たほうがいいです。ですが一応説明をします。

## addListener部分

サイトにあるとおりここの部分は汎用的に作られてあるのでhtmlハイブリッドアプリの場合はブラウザ固定なのでここの部分は別に最初からelm.addEventListenerを呼び出してしまえば問題ないです。

動作としてはイベントリスナのAPIがあればそのイベントリスナを動かして実行させるという構成になります。
イベントリスナは引数にどんな動作が来た時,及び関数を必要とするので引数としてそれらとどの要素でイベントリスナを待つのかを引数として渡す関数となります。




## init部分

init部分ではまずonclickの属性を付けたい部分を抜き出します。ここではid="box"の部分に付けたいので

```js
var div = document.getElementById('box');
```
で取ります。
そのあとonclickした時に動作させたいjavascriptの関数を作ります。今回の場合はvar popupになります
最後に下記のように記述することで

```js
addListener(div,"click",popup);
```

addListenerにdiv(つまりboxのところ)にclickというイベントが来た時にpopupという関数を実行するようになります

## その他

最後のaddListenerはwindow(ページ)がload(読み込まれた)時にinit関数を動かす部分を記述してあるだけです。

## おまけ

addListenerの部分で別にこの関数はなくても問題はないのでその表記を書きます。



CSPを適用させるのであればW3Cのブラウザになるのでまとめられますその場合は

```js
var init = function() {
    var div = document.getElementById('box');
    var popup = function () { alert("clicked!"); };
    div.addEventListener("click",popup,false);
};

window.addEventListener("load",init,false);

```
となります。

# 最後に

今回onclickだけですが他のイベントハンドラでも多分同じように分離できると思います(試してない)
機会があればonclickなどのイベントハンドラをのっけるタグとイベントハンドラの対処のまとめでもします。
あと自分誤入力が多いです。もしなんかここちょっとおかしいんじゃね？とかあったらコメントなり編集リクエストなりいただけるとありがたいです(自分のためにも)
hostsとかのIPアドレス一覧がほしい

```bash
grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}' /etc/hosts | sort | uniq
```

[引用元] (http://superuser.com/questions/202818/what-regular-expression-can-i-use-to-match-an-ip-address)
ECCUBE3.03の管理画面「商品マスター」の検索件数と表示結果の数が合いません

ECCUBE3.03をインストールをし、商品を30件くらい登録したのですが、「商品マスター」から検索するのボタンを押すと、左上の検索件数は「30件」と表示されるのに対し、表示されている商品は3件しかありません。
また、表示件数を「10件」から「20件」に変更しても、表示されている商品が5件に増えるだけで、改善されません。
どこをどう直せばいいかわかりませんので、もし分かる方がいらっしゃいましたらお教え頂けますでしょうか。
どうぞ宜しくお願い致します。
MdNoteからQiitaを更新しよう

[MdNote](http://md-note.com/ja)からリモート投稿された記事です。

# MdNoteからブログを更新しよう

対応しているブログ

- Wordpress API
- Metaweblog API
- Atom Publishing Protocol
- Tumblr
- Qiita

詳しい設定方法は別途手順ページをみてくださいね

http://md-note.com/ja/help
AWSのEC2+ELBで、ロードバランサへのアクセス時点で特定IPからのアクセスを弾く

http://hinashiki.hateblo.jp/entry/2015/02/19/161258

ネットワークACLが使えるらしい
http://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_ACLs.html
jQueryでラジオボタンの選択値を変更する、直後イベントを発火する


タイトルの件。
ただ単に下記（１）のように書いて、一応は動いていたのですが

```
$("input[name='class']").val("[値]");
```


教えてもらって下記（２）に書き直した。

```
$("input[name='class']").prop('checked',false);
$("input[name='class'][value='"+値+"']").prop('checked',true);
```

HTMLを見てみると、
（１）のときは、
inputタグの中の checked が変更されず、見た目だけ変わってたのですが、
（２）のようにすれば、
ちゃんと checked が移動する。

変化したらイベントを発火するには、triggerを使う。

```
$("input[name='class'][value='"+値+"']").prop('checked',true).trigger('change');
```

毎回迷うので書いておきます。感謝とともに
ConsulをDNSとしてOSから見る


## したいこと

Consulに登録したサービス名で ``$ host xxx`` とか、``$ curl xxx``, ``$ ping xxx`` みたいに、Unix OSから普通にアクセスしたい。


## note

* ``sudo`` とかは省略してます
* Amazon Linux (AWS) で試しています
* 簡単の為 ``/etc/resolv.conf`` を直接弄っています (あまり良くない)
* Amazon Linuxの ``/etc/resolv.conf`` はnetwork再起動で元に戻っちゃいます


## 手順

[docker-consul] が無いと始まらないので、Runする.

```
$ docker run -d -p 8400:8400 -p 8500:8500 -p 8600:53/udp -h node1 --name consul progrium/consul -server -bootstrap -ui-dir /ui
```

立ち上がったdocker containerのIPを知りたい.

```
$ docker inspect -f '{{.NetworkSettings.IPAddress}}' consul

172.17.0.1
```

ConsulのIPを ``/etc/resolv.conf`` に ``nameserver xxx.xxx.xxx.xxx`` と書く.
Consulが管理するドメインが ``service.dc1.consul`` なので、``search ...`` に追記する.

```
; generated by /sbin/dhclient-script
search ap-northeast-1.compute.internal service.dc1.consul  ; service.dc1.consulを追加.
nameserver 172.17.0.1  ; この行を追加.
nameserver 172.31.0.2
```

> Amazon Linuxの場合、ConsulのIPを既存のnameserver ``172.31.0.2`` より先に記述しないと、名前解決できなかった。

## アクセスしてみる

```
$ host any-service-name

any-service-name.service.dc1.consul has address 172.17.0.2
```


## サービスの登録方法は？

[ConsulをDNSサーバーとして使う] に書いています。



[docker-consul]:https://github.com/gliderlabs/docker-consul
[ConsulをDNSサーバーとして使う]:http://qiita.com/megmogmog1965/items/2c1e72932ea958fb1831
Rails: bundler の gem をすべて削除して、インストールしなおす一番簡単な方法

ディレクトリごと削除してから、インストールしなおせば良い。

`$ rm -rf /path/to/project/vendor/bundle`

`$ bundle install`



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
Linux Mintにnodejsをインストールしたがnodeコマンドが通らない

# 現象
Linux Mint 17.2 Rafaelaにnodejsをインストールしたが`node`コマンドが通らなかったので、その際の対処をメモ。

## 対処法
以下のコマンドを実行する。
```
sudo install nodejs-legacy
```
これで`/usr/bin/node`へのシンボリックリンクが生成される。
boostでxmlを読み込んで扱う

自分用メモ。

```cpp:a.cpp

#include <stdio.h>

#include <boost/property_tree/ptree.hpp>
#include <boost/property_tree/xml_parser.hpp>

#include <sstream>
#include <string>

const static std::string XML = "\
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\
<soapenv:Envelope xmlns:soapenc=\"http://schemas.xmlsoap.org/soap/encoding/\" xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\">\
	<soapenv:Body>\
		<RetrievePropertiesResponse xmlns=\"urn:vim25\">\
			<returnval>\
				<obj type=\"Datacenter\">datacenter-2</obj>\
				<propSet>\
					<name>hostFolder</name>\
					<val type=\"Folder\" xsi:type=\"ManagedObjectReference\">group-h4</val>\
				</propSet>\
				<propSet>\
					<name>name</name>\
					<val xsi:type=\"xsd:string\">vDatacenter</val>\
				</propSet>\
			</returnval>\
			<returnval>\
				<obj type=\"Datacenter\">datacenter-968</obj>\
				<propSet>\
					<name>hostFolder</name>\
					<val type=\"Folder\" xsi:type=\"ManagedObjectReference\">group-h970</val>\
				</propSet>\
				<propSet>\
					<name>name</name>\
					<val xsi:type=\"xsd:string\">新規データセンター</val>\
				</propSet>\
			</returnval>\
		</RetrievePropertiesResponse>\
	</soapenv:Body>\
</soapenv:Envelope>\
";

int main( int , char ** ) {
	
	boost::property_tree::ptree pt;
	std::stringstream ss( XML );
	boost::property_tree::read_xml( ss, pt );
	
	for( auto &it : pt.get_child( "soapenv:Envelope.soapenv:Body.RetrievePropertiesResponse" ) ) {
		
		if( it.first != "returnval" ) {
			
			continue;
			
		}
		
		std::string type = it.second.get<std::string>( "obj.<xmlattr>.type" );
		std::string entity = it.second.get<std::string>( "obj" );
		
		printf( "%s\t%s\n", type.c_str(), entity.c_str() );
		
		for( auto &itt: it.second ) {
			
			if( itt.first != "propSet" ) {
				
				continue;
				
			}
			
			std::string name = itt.second.get<std::string>( "name" );
			std::string val = itt.second.get<std::string>( "val" );
			
			printf( "\t%s\t%s\n", name.c_str(), val.c_str() );
			
		}
		
	}
	
	return( 0 );
	
}

/*
[todanano@localhost tmp]$ ./a.out
Datacenter      datacenter-2
        hostFolder      group-h4
        name    vDatacenter
Datacenter      datacenter-968
        hostFolder      group-h970
        name    新規データセンター
[todanano@localhost tmp]$
*/


```
Windows Vim 導入

# WindowsのVimを導入

※[訂正]2016/09/02 64bit版なのでインストールフォルダは「C:\Program Files (x86)\vim」ではなく「C:\Program Files\vim」。Nao000様の指摘により修正。

Ruby on Railsの研修でviを使う必要がでたのでWindowsマシンにVimを導入することにしました。
Vimドキドキしちゃいます(●´ω｀●)

## ダウンロード

日本語版のVimが [Kaoriya - Vim](http://www.kaoriya.net/software/vim/)  というサイトで配布されています。
[Kaoriya - Vim](http://www.kaoriya.net/software/vim/) の「Windows 64bit版 ダウンロード」からVimのZipファイルをダウンロード。

## インストール

ファイルを解凍。
できたフォルダ名にはダウンロードサイト名や日付などが入っているので、フォルダ名を「vim」に変更

C:\Program Files フォルダへ移動。
vimのフォルダパスは、C:\Program Files\vim になる。

C:\Vim がいいというサイトのアドバイスは気にしない (○｀ε´○)
[vim-jp » Vimのユーザーと開発者を結ぶコミュニティサイト - Windowsへのインストール方法](http://vim-jp.org/docs/install_windows.html)

インストールしたディレクトリ C:\Program Files\vim を環境変数のPATHに設定。
`コントロールパネル > システムとセキュリティ > システム > システムの詳細設定`

![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/89307/9d67f727-4a63-6233-5796-e439059faaeb.jpeg)


## 画面サイズ変更



画面サイズが小さかったので変更。
Vimは画面サイズもコマンドで変更するらしいヽ(ﾟДﾟ;)ﾉ!! 
[さわさわと - Vim Windowサイズ変更　設定](http://sawasawato.blog.fc2.com/blog-entry-19.html)

幅を変更。
`:set columns=130`

![WS000002.JPG](https://qiita-image-store.s3.amazonaws.com/0/89307/627cfb50-d223-a7bb-9881-62a5c3bec693.jpeg)

ビヨーンと横に伸びる。

高さを設定。
`:set lines=40`

![WS000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/89307/57b48bec-a8a6-fa1f-fa26-566b1c40446d.jpeg)

うむ。まあ、いい感じの縦横比率。
黄金比とか白銀比とかは無視無視。

# Vimの終了

何も変更していないので以下のコマンドで終了。
`:q`
何か変更しちゃったけど保存したくない場合は以下のコマンドで終了。
`:q!`

今日は以上。
画面サイズの設定は一旦終了して、もう一回立ち上げると元に戻ってしまう。
設定の保存の仕方を次はやってみたい。
iPhone + Apple Watch の実機転送時の問題の作業記録


## Ineligble Devices になっているとき

とりあえず、`Device` > `Destination` > `デバイス名` から選択できる

しかしインストールには失敗

```
App Installation failed
The Host is not paired with the device.
```

![Kobito.uP6G72.png](https://qiita-image-store.s3.amazonaws.com/0/9751/0be1e961-d161-75b8-82f6-9d94973b7a1d.png "Kobito.uP6G72.png")

デバイス名の表示はこのような感じ

![Kobito.ZxSgRW.png](https://qiita-image-store.s3.amazonaws.com/0/9751/ebdbf9d9-c352-5983-24b9-7a0ddc373631.png "Kobito.ZxSgRW.png")

Watchも認識出来てそうだけど、unavaliableに、、、
iPhoneとWatchはペアリング済みだけど、できないのでペアリングを切ってみる。
※ Apple Watch側でリセットがかかるので10分くらいかかる・・・。

再度ペアリングした際に「このコンピュータを信頼しますか？」のメッセージがでてきたとこで、「信頼する」を選択（前回ここで「信頼しない」を選択してたかも。。。）

![写真 2015-09-29 15 16 36.png](https://qiita-image-store.s3.amazonaws.com/0/9751/de04e2a4-9b39-2daa-95ae-b3a6c9185b97.png "写真 2015-09-29 15 16 36.png")

Xcode、iPhoneをそれぞれ再起動すると無事、選択可能状態に。
![Kobito.43fNYA.png](https://qiita-image-store.s3.amazonaws.com/0/9751/2778b5c1-76c6-6a4c-b058-2a07a81d5381.png "Kobito.43fNYA.png")

アプリも問題なく起動できました。

![写真 2015-09-29 15 27 15.png](https://qiita-image-store.s3.amazonaws.com/0/9751/ffcf50e9-df0c-ecb9-b039-bea7523aeac7.png "写真 2015-09-29 15 27 15.png")
レビュー支援ツール Reviewable 紹介


## Reviewableとは
GitHubでホスティングされているプロジェクトにレビュー機能を提供するWebサービスです。
https://reviewable.io/

![スクリーンショット 2014-12-10 16.25.28.jpg](https://qiita-image-store.s3.amazonaws.com/224/55406/c90fbe00-6dca-f401-7c80-2a9e2cf72744.jpeg "スクリーンショット 2014-12-10 16.25.28.jpg")

## 機能
- プルリクエスト単位でレビュー
- ソースコード単位&プッシュ単位でレビュー済みかどうか記録できる
- コメントをソースコード単位&プッシュ単位で付けることができる
- 同じプルリクエスト内でもプッシュ毎に差分を表示できる

## 使い方
### 開発チームでの例
1. Aさんが出したプルリクエストにBさんがレビューし、コメントを付ける
2. Aさんがコメントを見て、ソースコードを修正し、コミット＆プッシュ
3. Bさんが、最初にレビューしたコードと2で修正されたコードの差分のみを再レビュー
4. 問題なければマージ

## うれしいところ
- ファイル単位で見たかどうかを記録できるので、見忘れ防止
- プッシュ単位で差分を表示できるので、レビュー後修正の再レビューがしやすい

## いまいちなところ
- ちょっとアニメーションがちらちらしてうざい
CircleCIでDockerデーモンのバージョンを変更する


この記事時点でCircleCIのDockerは1.6.2のcircleciエディション(Docker version 1.6.2-circleci, build 2f3236d)が標準で動きます。
ただ、諸事情でもうすこし新しいDocker使いたいので差し替えの方法。


CircleCIがフォークしているDockerはこちらにありました。 [circleci/docker](https://github.com/circleci/docker)

## バージョン差し替えのcircle.yml

じゃあこれをビルドすればイイのかなーとgit cloneしてきた所、`circle.yml`を発見。

https://github.com/circleci/docker/blob/docker-1.8.2/circle.yml

```circle.yml
machine:
  pre:
    - echo 'DOCKER_OPTS="-s btrfs -e lxc -D --userland-proxy=false"' | sudo tee -a /etc/default/docker
    - sudo curl -L -o /usr/bin/docker 'https://s3-external-1.amazonaws.com/circle-downloads/docker-1.8.2-circleci'
    - sudo chmod 0755 /usr/bin/docker
  services:
    - docker
```

おお、結合テスト用に差し替えの手順が。

ありがとう。

```
ubuntu@box124:~$ docker -v
Docker version 1.8.2-circleci, build a8b52f5
```

----

追記：

CicleCIの中の人に『(さっきの問い合わせの件は)フォークで動いたッス。Thanks』 などと伝えた所、それはテスト中なんでお客さん向けにはお知らせはしてないのですわと。

> Glad it worked!
> We haven't notified docker1.8.2 to customers because we are still testing but it should work for you. 

言うまでもないけど、正式にリリースされないうちは自己責任でどーぞ。
R for Windows Compile the given source files 

# R for Windows ソースコードのコンパイル方法
## Rtoolsのインストール
* [こちら](http://www.murdoch-sutherland.com/Rtools/)からRtoolsをインストール
* Building R for WindowsからVersionにあわせてdownload ⇨インストール
* インストールするとPathに追加されます。

## コマンドプロンプトの実行
* コマンドプロンプトの文字コードの変更
    * R　CMD実行時文字化けしない為に下記コマンドを実行
    * Shift_jis →　UTF-8
    * ```chcp 65001```

## R CMD SHLIBにてビルド
* オブジェクトファイルとライブラリが作成される
   * 
```R  CMD SHLIB src/C/pagerank.c -o lib/pagerank.so```
* 複数ファイルの場合はこんな感じ
    * 
```R  CMD SHLIB src/C/util.c src/C/factor_model_util.c src/C/pagerank.c src/C/hierarchical.c src/C/factor_model_multicontext.c src/C/factor_model_util2.cpp -o lib/c_funcs.so```
blockerList.json（コンテンツブロッカー）のサンプル


## Content blocking extensionsの実装について

__Content blocking extensions__ が実装可能になり、iOS9よりSafariに広告ブロック機能が追加されたみたいな話しになっています。

この記事では細かい話しはさておき、blockerList.jsonを書く所だけピックアップします。
省略した分は下記記事などをご参照ください。

[[iOS9]広告ブロック(Content Blocking Safari Extensions)の作り方
](http://qiita.com/noir/items/599b7b8032a18c1e00a7)

## blockerList.jsonを書いてみる

`action` と `trigger` で制御します。
下記例では、`css-display-none` で画面表示上から消すパターンと
`block` でそもそもアクセスしないパターンで書いてみました。

前者なら該当セレクタ部分が表示されず、後者なら該当リソースが読み込まれません。
どっちでも広告ブロックできちゃうね。

```
[
  {
    "action": {
      "type": "css-display-none",
      "selector" : "div.hoge-box-content"
    },
    "trigger": {
      "url-filter": ".*"
    }
  },
  {
   "action": {
     "type": "block"
   },
   "trigger": {
     "url-filter": "fuga\\.min\\.js"
   }
  }
]
```


詳しくは[コチラ](https://www.webkit.org/blog/3476/content-blockers-first-look/)

## 打倒、広告ブロック！？

Appleがコンテンツブロック機能を提供しているのに対し、アンチ広告ブロックという発想は短絡的だと思いますが、対抗手段が全くないのもどうかと思うので。

ちょっと前から話題になっている[FuckAdBlock](https://github.com/sitexw/FuckAdBlock)なんて、どうでしょうか。

最近ではQiitaに記事が上がっていました。
[iOS9 Safariのコンテンツブロッカーなどのアドブロックしていることを検知するFuckAdBlock.js](http://qiita.com/osamu1203/items/c0e92b3ac661046dfd79)

ご参考まで。
td-agentのpermissionとyum update nginxで失敗した話

備忘のための失敗の記録

運用しているサービスの構成（の一部）

* amazon linux
* nginx （yumで入れた最新のもの
* td-agent2 （amazon linuxサポートされて便利

nginxのログをtd-agent経由でs3に送る的なよくあるやつ。

素直にインストールしただけの状態だと、パーミッションの都合、td-agentがnginxのログに触れないので、読めるように設定してる。

```
$ ls -al /var/log/
drwxr-x---  2 nginx    td-agent    4096  9月 29 03:19 nginx
```

先日、nginxがアップデートされて何も考えないでyum updateしたら、/var/log/nginxがリセットされてしまった。

```
$ ls -al /var/log/
drwx------  2 nginx    nginx    4096  9月 29 03:19 nginx
```

これに気がつくまでの結構な間、アクセスログがとれない＆Permission deniedがログにたんまり...

update内容はよく確認しましょう、というオチ。
Spark CSVの導入

# 環境
mac osx 10.9.5
scala 2.10.4


# spark-csvのざっくりとした紹介
・Apache sparkでCSVデータをパースできるようにする
・パースしたものはSpark SQLやDataFrameで使えるようになる


# github
https://github.com/databricks/spark-csv


# 必要なものと今回使用したバージョン
spark-core 1.4.0
spark-sql 1.4.0
spark-csv 1.0.3


# build.sbtの抜粋
```scala
libraryDependencies ++= Seq(
  "org.apache.spark" %% "spark-core" % "1.4.0",
  "org.apache.spark" %% "spark-sql" % "1.4.0",
  "com.databricks" %% "spark-csv" % "1.0.3"
)
```

# 実際のコード
```scala

// initialize spark
val conf: SparkConf = new SparkConf().setMaster("local").setAppName("test")
val sc: SparkContext = new SparkContext(conf)
val sqlContext: SQLContext = new SQLContext(sc)

// 読み込みたいファイルのパスをload()の引数に設定する
val df = sqlContext.read.format("com.databricks.spark.csv").option("header", "true").load("xxxx/yyyy/zzzz.csv")

```

これで指定したファイルのCSVデータを解析。
optionの引数はCSVデータのヘッダ(データの1行目にある項目名)を含めるかどうか。


# 解析したCSVを実際に取得
※「name」「address」の2項目を持つCSVがあったとして

```scala

// RDD取得
val rdd = df.select("name", "address")

// 中身を見てみる
rdd.foreach(pritnln)

```


簡単な使い方は以上になります。
これが便利で実際にmysqlに投げるようなSQLが実行でき、
GROUP BYできたり、JOINできたりもします。
時間あるときにサンプル載せたいと思います。


動かない等ありましたらご指摘下さいm(__)m
http://からhttps://に切り替えるときに気をつけること

だんだん```https://```でのアクセスがスタンダードになってきました。
SEOで有利だったり、iOS9で通信できなくなっていたり、サービスワーカーが使えなかったりでもうやらなきゃいけない雰囲気・・・

そんなわけで先日https化の対応しました

はじめは証明書入れてリダイレクトかけるだけだろ、
って思っていたのですがいろいろと面倒だったのでまとめました。

![スクリーンショット 2015-09-29 13.11.25.png](https://qiita-image-store.s3.amazonaws.com/0/7132/a4827ed6-c08f-d103-70af-5e88c850c5cb.png)


## httpからhttpsにハードコーディングされていた部分を変える
RSSとかOGPとか内部リンクとかもろもろ

## httpからhttpsにリダイレクトさせる
恒久的な移転となるので302ではなく**301リダイレクト**させましょう。


## 読み込みリソースをすべてhttpsに変更する
CDN、WebFont、画像、API、計測のJS、広告などなどたくさんのリソースを今のWebサイトは読み込んでいます。
外部から読み込んでいるリソースも例外ではないので、httpの接続が含まれているとChromeではこんな三角の表示になってしまいます。
![スクリーンショット 2015-09-29 13.10.16.png](https://qiita-image-store.s3.amazonaws.com/0/7132/bdd26e1c-96c9-d3f1-88d1-47cd7c860133.png)

Google Analyticsなど大抵のものは自動で切り替えてくれたりしますが、
WordPressなんかだと絶対パスで持っているので、全部の``http://``を``https://``に変更しなければなりません。

``src="//~"``と始めるとプロトコルに応じてブラウザが勝手に切り替えてくれるので楽です。

```html
<script src="//cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot.min.js"></script>
```


## Cookieにsecure属性を設定する
セキュリティ上、Cookieにはsecure属性を設定しておいたほうが良いです。
指定するとhttpsでの通信でしかCookieを送らないようになります。

```java:java
Cookie cookie = new Cookie(name, value);
cookie.setSecure(true);
```


## WebStorageが消える
localStorageとsessionStorageの中身が取得できなくなります。
WebStorageの仕様上、同一オリジン単位（プロトコル://ドメイン名:ポート番号）での使用しかできないためです。

ちなみにCookieはデフォルトの挙動はホスト名で判別されるため切り替え後も残ります。

localStorageにどうしても引き継ぎしなければならない場合は、Cookieに保存するかサーバーへ送っておく必要があります。

## ソーシャルボタンのカウントが消える
URLが変わるのでシャルボタンのカウントも0になります。
![スクリーンショット 2015-09-29 13.08.46.png](https://qiita-image-store.s3.amazonaws.com/0/7132/c10bf7f1-27e6-0d6f-b1e9-0d907e296ed9.png)

残す方法としては、ogpタグに過去の**http://**のURLを指定することで対応可能です。

```html:html
<meta property="og:url" content="http://example.com/old" />
```

Twitterはどのみち来週にはなくなる
[https://twittercommunity.com/t/a-new-design-for-tweet-and-follow-buttons/52791](https://twittercommunity.com/t/a-new-design-for-tweet-and-follow-buttons/52791)


## 外部の連携サイトのURLを変える
TwitterなどOAuthログインなどのコールバック先など