OmniAICreator/Qiita-1.07M huggingface dataset:
gem install rmagick でインストール失敗

数々の解決方法が、Webには転がっていた.

http://qiita.com/hiroara@github/items/6b1c6c7257042a159cc9
http://qiita.com/tomomomo1217/items/79f516fc0c483e68f444
http://qiita.com/shunhikita/items/4a2afd978742c9d3cc7f
http://qiita.com/KTakata/items/f4a632207af0a8078c06

しかし、今回のケースはどれにも当はまらなかったので、独自の解決方法を記す。

## 環境
Mac : 10.12.2
Ruby: 2.2.2
ImageMagick : 6.9.1

## 経緯
最初、brew によって、ImageMagic をインストールして、gem install rmagick を実行していたが、下記のエラーが頻発する。

```
$ gem install rmagick -v '2.16.0'
Building native extensions.  This could take a while...
ERROR:  Error installing rmagick:
        ERROR: Failed to build gem native extension.

    /Users/xxxx/.rbenv/versions/2.2.2/bin/ruby -r ./siteconf20170121-33287-t9qj7o.rb extconf.rb
checking for clang... yes
checking for Magick-config... no
checking for pkg-config... yes
checking for outdated ImageMagick version (<= 6.4.9)... no
checking for presence of MagickWand API (ImageMagick version >= 6.9.0)... no
checking for Ruby version >= 1.8.5... yes
checking for stdint.h... yes
checking for sys/types.h... yes
checking for wand/MagickWand.h... no

Can't install RMagick 2.16.0. Can't find MagickWand.h.
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/Users/xxxx/.rbenv/versions/2.2.2/bin/$(RUBY_BASE_NAME)

extconf failed, exit code 1
```


そこで、このサイトから、直接ダウンロードしてインストールした。
[http://cactuslab.com/imagemagick/](http://cactuslab.com/imagemagick/)

デフォルトでは、下記のディレクトリにインストールされる。

```
/opt/ImageMagick
```


## brewでのインストール

参考までに、brew でインストールした場合は、下記にインストールされる。

```
/usr/local/Cellar/imagemagick
```

今回は重複しない為に、以前brewでインストールしたものはアンインストールした。

```
$ brew uninstall ImageMagick
```


## ImageMagickの確認

念の為、ImageMagickが、想定通りのものか確認するために、下記コマンドにて確認。

```
$ convert --version
Version: ImageMagick 6.9.1-0 Q16 x86_64 2015-03-22 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2015 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: DPC OpenCL
Delegates (built-in): bzlib fftw jng jpeg lcms lzma png tiff webp xml zlib
```

```
$ which convert
/opt/ImageMagick/bin/convert
```



## 環境変数設定
環境変数 `PKG_CONFIG_PATH `にpkgconfigを追記する。

```
$ vi .bash_profile

# Setting PATH for ImageMagick
export PKG_CONFIG_PATH=/opt/ImageMagick/lib/pkgconfig

$ source .bash_profile
```

## rmagickのインストール

```
$ gem install rmagick
Building native extensions.  This could take a while...
Successfully installed rmagick-2.16.0
Parsing documentation for rmagick-2.16.0
Installing ri documentation for rmagick-2.16.0
Done installing documentation for rmagick after 10 seconds
1 gem installed
```

## まとめ
ポイントとしては、
　1. brew で、ImageMagic をインストールしない。
　2. PKG版のImageMagicをインストールして、pkgconfig ディレクトリを環境変数に追記する。

なかなか、しんどかった。
Gradleで実行するタスクをコントロールする

Gradle,使っていますか？
Javaの開発にとってもべんりです。
ただ、以前から一つだけ不満がありました。
それはJavadocを作ったり、Jarを作ったりする毎にコンパイルが実行されること。

すでにキャッシュがあったりするので、それほど時間はかからないのですが、もう少しスマートにコントロールしたいと考えておりました。

時間のある時に調べたところ、キーは下の図にありました。

![image](https://qiita-image-store.s3.amazonaws.com/0/77722/16b28f84-3b7e-affc-9361-e68ac3be7c0a.png)
https://docs.gradle.org/current/userguide/java_plugin.htmlから拝借

この図によると、gradle buildを実行すると、assemble,checkとそれに関連するタスクが次々と実行されること、また、コンパイルをするにはclassesを実行すれば良さそう…と言ったことが分かります。

また、test系のタスクを実行したい場合はtestを実行すれば良く、これを実行するとclassesが実行される様です。

結果、以下のことがわかりました。
コンパイルだけを実行したい場合は下記のコマンドを実行

```groovy
gradle classes
```

テストだけを実行したい場合は下記のコマンドを実行（コンパイルがすでに完了している必要あり）

```groovy
gradle test -x classes
//-x はそのタスクを除外する
```

この図を頭に入れておくことで、不要なタスクをじっこうしなくてすみそうです。
helm-gtag setup

不備があったので種々修正

# Descritpion
- 対象環境
    - Mac Sierra
    - python 2.x.x
    - 対象言語 : ruby / python / go
    - Emacs 24 or higher.
    - helm 1.7.7 or higher (helm設定済みとする)
    - GNU Global 6.2.3 or higher


- helm-gtagとは
    - 関数定義へ M-g などで飛べる (関連箇所の list up)



# install
```bash:console
# pythonはinstall済みとする
brew install ctags
brew install global --with-exuberant-ctags --with-pygments
```

# tag作成
```bash:console
sudo cp /usr/local/share/gtags/gtags.conf /etc/

cd [project root] # gtagを作成するdirへ移動

# gtags -v --gtagslabel=exuberant-ctags --gtagsconf=/usr/local/share/gtags/gtags.conf
gtags -v --gtagslabel=pygments --gtagsconf=/usr/local/share/gtags/gtags.conf
global -x -t ignore_missing
```

```bash:console
# 検索テスト
global -ax -t [関数名]
```

# install emacs package
```emacs:emacs_packages
# package install
helm-gtags
exec-path-from-shell
```

# init.el
```emacs:init.el
# 以下書き込み
(exec-path-from-shell-initialize)
```

```
(require 'helm-gtags)

;; Enable helm-gtags-mode
(add-hook 'go-mode-hook (lambda () (helm-gtags-mode)))
(add-hook 'python-mode-hook (lambda () (helm-gtags-mode)))
(add-hook 'ruby-mode-hook (lambda () (helm-gtags-mode)))

;; gtag setting
(setq helm-gtags-path-style 'root)
(setq helm-gtags-auto-update t)

;; key bind
(add-hook 'helm-gtags-mode-hook
          '(lambda ()
             (local-set-key (kbd "M-g") 'helm-gtags-dwim)
             (local-set-key (kbd "M-s") 'helm-gtags-show-stack)
             (local-set-key (kbd "M-p") 'helm-gtags-previous-history)
             (local-set-key (kbd "M-n") 'helm-gtags-next-history)))
```
以上

# Jump

- 当該directoryの何らかのfileを開く
- 任意のsymbolの上にカーソルをのせ, M-gで関数定義箇所へ飛ぶ. (もしくは, list up)

# 補足
tagはfile保存時に自動で再生成される (はず)


# helm-gtag readme / 参考記事
https://github.com/syohex/emacs-helm-gtags
http://emacs-jp.github.io/packages/helm/helm-gtags.html
http://qiita.com/sonatard/items/672df1259a76f082ce42
http://qiita.com/5t111111/items/c14ac68f762ce71a7760

http://qiita.com/catatsuy/items/3dda714f4c60c435bb25
Linuxのシステムの文字コードを確認/編集する

AWS EC2インスタンスで文字コードを変更する機会があったので備忘です。

■現状の文字コードを確認
echo $LANG
en_US.UTF-8

■文字コードを変更
sudo vi /etc/sysconfig/i18n

en_US.UTF-8 ⇒ ja_JP.UTF-8

■インスタンス再起動

■変更後の文字コードを確認
echo $LANG
ja_JP.UTF-8

以上です。
Tween.jsのイージングをカスタマイズする



```javascript:自作したイージング関数
function(t, b, c, d) {
	var ts=(t/=d)*t;
	var tc=ts*t;
	return b+c*(11.845*tc*ts + -39.2825*ts*ts + 50.18*tc + -30.69*ts + 8.9475*t);
}
```

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

## パターン１

```javascript:customEasing.js
export function customBounceLikeSlime(k) {
  var t = k;
  var d = 1;
  var b = 0;
  var c = 1;

  var ts=(t/=d)*t;
  var tc=ts*t;
  return b+c*(11.845*tc*ts + -39.2825*ts*ts + 50.18*tc + -30.69*ts + 8.9475*t);
}
```

```javascript:script.js
import {customBounceLikeSlime} from "./lib/customEasing";
```


## パターン２

```javascript:customEasing.js
TWEEN.Easing.Custom = {};

TWEEN.Easing.Custom.BounceLikeSlime = function( k ) {
  var t = (k*100);
  var d = 100;

  var ts=(t/=d)*t;
  var tc=ts*t;
  return (11.845*tc*ts + -39.2825*ts*ts + 50.18*tc + -30.69*ts + 8.9475*t);
}
```

```javascript:script.js
import "./lib/customEasing";
```

> 参考
https://github.com/tweenjs/tween.js/issues/28
https://tweenjs.github.io/tween.js/examples/03_graphs.html
[JavaScript] 意図的に汎用な関数

# 概要

ECMAScript  (ECMAScript 2016)を元に「**意図的に汎用**」の意味を解説します。

# Array.prototype.forEach

> The forEach function is **intentionally generic**; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method.
>
> - [22.1.3.10 Array.prototype.forEach - ECMAScript® 2016 Language Specification](http://www.ecma-international.org/ecma-262/7.0/#sec-array.prototype.foreach)

(意訳) 「forEach関数は**意図的に汎用**です。`this` 値がArrayオブジェクトである必要はありません。従って、別種のオブジェクトのメソッドとして使用する為に委譲することができます。」

例えば、次のように書けます。

```JavaScript:疑似配列オブジェクト
var arrayLikeObject = {0: 1, 1: 2, 2: 3, length: 3};  // 配列ではないけど配列と同じプロパティを持つオブジェクト
Array.prototype.forEach.call(arrayLikeObject, function (value) {
  console.log(value); // 1 -> 2 -> 3
});
```

また、次のように別のコンストラクタの `prototype` に入れる事も出来ます。

```JavaScript:疑似配列コンストラクタ
function ArrayLike () {
  for (var i = 0, len = arguments.length; i < len; ++i) {
    this[i] = arguments[i];
  }

  this.length = arguments.length;
}

/**
 * NOTE: サンプル故に簡略化しましたが、実用では Object.defineProperty で {enumerable: false} を指定する事を推奨します
 * コード例として Array.prototype.concat の節を参照して下さい。
 */
ArrayLike.prototype.forEach = Array.prototype.forEach;

new ArrayLike('a', 'b', 'c').forEach(function (value) {
  console.log(value);  // "a" -> "b" -> "c"
});
```

# Array.prototype.concat

> NOTE2: The concat function is **intentionally generic**; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method.
> 
> - [22.1.3.1 Array.prototype.concat - ECMAScript® 2016 Language Specification](http://www.ecma-international.org/ecma-262/7.0/#sec-array.prototype.concat)

(意訳) 「concat関数は**意図的に汎用**です。`this` 値がArrayオブジェクトである必要はありません。従って、別種のオブジェクトのメソッドとして使用する為に委譲することができます。」

`Array.prototype.forEach` と同様の記述です。同じようにコードを書いてみましょう。

```JavaScript:疑似配列オブジェクト
var arrayLikeObject = {0: 1, 1: 2, 2: 3, length: 3},  // 配列ではないけど配列と同じプロパティを持つオブジェクト
    array = Array.prototype.concat(arrayLikeObject, [4, 5, 6]);

console.log(JSON.stringify(array)); // [{"0":1,"1":2,"2":3,"length":3},4,5,6]
```

`Array.prototype.concat` は `Array.prototype.forEach` と違い、疑似配列を配列とみなしません。
従って、疑似配列コンストラクタの `prototype` に入れても期待通りに動かない、という欠点があります。

```JavaScript:疑似配列コンストラクタ
function ArrayLike () {
  for (var i = 0, len = arguments.length; i < len; ++i) {
    this[i] = arguments[i];
  }

  this.length = arguments.length;
}

Object.defineProperty(ArrayLike.prototype, 'concat', {
  writable: true,
  configurable: true,
  enumerable: false,
  value: Array.prototype.concat
});

var arrayLike = new ArrayLike('a', 'b', 'c').concat({0: 'd', 1: 'e', length: 2});
console.log(JSON.stringify(arrayLike)); // [{"0":"a","1":"b","2":"c","length":3},{"0":"d","1":"e","length":2}]
```

`Array.prototype.concat` には次の性質があります。

- `this` 値が配列でなくても良い
- `this` 値が配列でなかった場合、配列としては扱わず、配列内の要素として扱う
- 返り値は配列である (※上記コードでは `ArrayLike` のインスタンスとはならない)

従って、他のコンストラクタの `prototype` に入れる関数としては不向きで互換コードを自前で書く必要があります。

# まとめ

ECMAScript 規定のメソッドの大半は「意図的に汎用」に設計されています。
汎用性の度合いに違いはあれど、関数を単体として利用したり、他のコンストラクタの `prototype` に入れる事を考慮した設計になっています。

もし、prototype上にユーザ定義関数を作ろうとするなら、「汎用性」をどこまで維持するか、考えてみると面白いかもしれません。
jenkins が他のプロセスによってダウンするのを防ぐ

#背景

https://wiki.jenkins-ci.org/display/JENKINS/HudsonUbuntuLinuxStartupScript
この用に、`/etc/init.d/jenkins`にinit scriptを書いて、Jenkinsをうごかしていたが、同じサーバ上で他のプロセスがMemoryを使ったときか、CPU使用率が高いときかに、勝手にダウンして、`systemctl status jenkins` では、Activeとなっているのに、実際には、死んでいて、Jenkinsを開こうとして初めて、Bad Gatewayとなっていた。

#解決策： init.d -> systemdへ変更

https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkins+as+a+Unix+daemon を参考に、
`/etc/systemd/system/jenkins.service`をRootで作る。
ExecStartには、/etc/init.d/jenkinsの中の do_start関数内の起動している部分のスクリプトをだいたい書くことになる。daemonの部分はいらないので、注意。

```
[Unit]
Description=Jenkins Daemon
 
[Service]
ExecStart=/usr/bin/java -Djava.awt.headless=true -jar /usr/share/jenkins/jenkins.war --webroot=/var/cache/jenkins/war --httpPort=8080
User=jenkins
Restart=always
RestartSec=300s
Environment="JENKINS_HOME=/var/lib/jenkins"
 
[Install]
WantedBy=multi-user.target
```

だいたいこんな感じである。

Serviceの中に、ExecStartにスタートのコマンドを書く。
Restartをalwaysにすることで、落ちても勝手に再起動できる。
RestartSecは好みで決める。
EnvにJenkinsのホームを書いておかないと今までのJenkinsをちゃんと参照できない。

#ハマったところ

Environment="JENKINS_HOME=/var/lib/jenkins"を書かないと、JenkinsのSecretキーを入れさせられて、全くまっさらなJenkinsが起動して、全て消えたかと思って焦った。
【Webデザイン】HTML5テンプレートの比較

# はじめに
しばらくWebフロント技術の勉強をしていなかったので、ホームページのSPA化とデザインを変更しました。
その中でも「デザイン変更」の部分で何個かHTML5テンプレートを試したのでその感想です。
①純正Bootstrap
②HTML5UP
③FreeHTML5.co

# 必要要件
- レスポンシブ対応（あたりまえですね）
- ドロップダウンメニューがある（いろいろメニュー追加したいので）
- お勉強のためなのでWordPressとかのCMSはNG

# 昔のホームページ
デモページ：　http://v1.ishino.info/

今どき化石ですね...
レスポンシブでも無いですし、APIとかもない普通のリクエストベースのPHP

# その① 純正Bootstrap
デモページ：　http://v2.ishino.info/

色だけはちょっと変えたいので、下記でカスタマイズしました。
http://bootstrap-live-customizer.com/
(ロード重いです)

良い点：
　・Bootstrapは王道なので、触っといて損は無いです。
　・グリッドシステムわかりやすくて良いです。
　・シンプルな作りなのでカスタマイズしやすいです。
悪い点：
　・やっぱ見た目がちょっとショボい

内部で利用しているもの
　・jQuery 1.11.3 (Bootstrap3系にはjQuery1系が必要)

# その② [HTML5UP](https://html5up.net/)
　デモページ：　http://v3.ishino.info/
　テーマ「Editorial」を利用

　良い点：
　　・タブレットVerもあるし見た目がやはり良い
　悪い点：
　　・Bootstrapより軽量のレスポンシブルモジュールのSkelのサイトが無くなってる...

　内部で利用しているもの
　　・html5shiv.js / Respond.js　（IE8以前の対応用）
　　・Skel.js　（レスポンシブ用）
　　・FontAwsome　（アイコン）
　その他：
　　・CCA3.0ライセンスなのでカスタマイズ自由ですが、サイトに明記しましょう

# その③ [FreeHTML5.co](https://freehtml5.co/)
　デモページ：　http://ishino.info/
　テーマ「Shift」を利用

　良い点：
　　・Bootstrap製
　　・エフェクトが効いててオシャレ
　悪い点：
　　・エフェクト効かせてるのもあり、色々なモジュールがありカスタマイズが大変

　内部で利用しているもの
　　・jQuery　（npmからの最新モジュールに変更）
　　・jQuery Easing　（npmからの最新モジュールに変更）
　　・jQuery Waypoint　（npmのものは古すぎるので、ダウンロードしたものを利用）
　　・Modernizr　（npmのものは古すぎるので、ダウンロードしたものを利用）
　　・Respond JS　（IE8以前の対応用）
　　・Google Fonts　（Font）
　　・Icomoon　（アイコン）
　　・animate.css　（エフェクト・アニメーション）
　その他：
　　CCA3.0ライセンスなのでカスタマイズ自由ですが、サイトに明記しましょう

# 最後に
やはりBootstrapベースのFreeHTML5.coが良いと思ってます。
あと個人的にですが、ブログをiframeで表示しているので、上部にメニューがあるのがうれしい。
他に良いテンプレートあったら教えてください。

参考ソース
Unity/C#~　VRアプリで、ゲームオブジェクトを操作する(コードメモ)

Unityで作るVRアプリで、Rayを飛ばすことで衝突判定を行い、様々なアクションを可能にすることができます。

【事前準備】
・https://www.durovis.com/en/sdk.html から「Dive Unity Plugin Package」をダウンロード。

・Hierarchyビューの"MainCamera"を削除しにステージ上にダウンロードしたパッケージの中から"DiveCamera"を配置。


#1.デバイス上で、Gyroセンサーを感知、またDiveCamera自身を動かすためのScriptを用意。

```GyroScript.cs
using UnityEngine;
using System.Collections;

public class GyroScript : MonoBehaviour {

	Quaternion currentGyro;

	void Start(){
		Input.gyro.enabled = true;
	}

	void Update () {
		currentGyro = Input.gyro.attitude;
		this.transform.localRotation = 
			Quaternion.Euler(90, 90, 0) * ( new Quaternion (-currentGyro.x, -currentGyro.y, currentGyro.z, currentGyro.w)); 
	}
}
```
これを、配置したDiveCameraにアタッチします。

次に、「Edit」->「Projects Setting」->「Editor」からDeviceを接続している携帯端末にしてください。

これにより、端末の動きを感知しVR空間を自由に見回すことが可能になります。

【補足】
以前、GyroScriptをさらに編集してVR空間を動き回れるコードを実装しているので、よかったら参考にしてください。

Unity/C#~DiveCameraを使用しVR空間内で動く(コードメモ)
http://qiita.com/wtb114/items/5e390e850d43a6f3a1fe

#2.カメラの視線によってゲームオブジェクトの衝突判定を行うため、RayControlerを配置。

DiveCameraからRayという光線のようなものを出しColliderを持つゲームオブジェクトに当てることで、衝突判定が可能になります。

1.まず、Hierarchyビューの「Create」をクリック後、「Create Empty」をクリックしてからのゲームオブジェクトを配置します。
名前を"RayController"に変更してください。

2.ステージ上に、Cubeなどを適当に配置、そしてその直下にQuadを配置してください。
TransformはDiveCameraから見える位置に調節してください。

3.後で衝突判定を行うため、2.で配置しているゲームオブジェクトのColliderのTagを設定しておきます。
「Edit」->「Project Settings」->「Tags and Layers」から、「Tag」の入力欄に"DifficultyCollider"を追加してください。そして、ゲームオブジェクト直下に配置したQuadにinspectorビューから、「Tag」を"DifficultyCollider"に設定してください。

#3.RayControllerスクリプト作成。

```RayController.cs
using UnityEngine;
using System.Collections;

public class RayController : MonoBehaviour {

	public GameObject  diveCamera;

	void Start () {
	}

	void Update () {
		Ray ray = new Ray (diveCamera.transform.position, diveCamera.transform.forward);
		RaycastHit hit;



		if (Physics.Raycast (ray, out hit)) {
			Debug.DrawLine (ray.origin, hit.point, Color.black);

			if (hit.collider.gameObject.tag == "DifficultyCollider") {
		　　     　　print("hit");
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
		}
	}
}
```

このスクリプトを、HierarchyビューのRayControllerにアタッチします。
最後に、HierarchyビューにあるRayControllerオブジェクトを選択後、RayControllerスクリプ トの欄の「Dive Camera」の部分に、Hierarchyビューにある「Dive_Camera」をドラッグ＆ドロップしましょう。

ゲームを起動すると、DiveCameraから黒い線が出ているともいます。
端末を動かして、配置したゲームオブジェクトに黒い線を当ててみましょう。
コンソールに"hit"と出力されていれば、無事衝突判定ができています。

以上で、Rayの基本的な実装になります。

これを応用して、UIの操作などVRでのアクションを今後紹介していきたいと思います。
golangで順列

```go
package main

import "fmt"

func perm(head []int, rest []int) {
	if len(rest) == 0 {
		fmt.Println(head)

	} else {
		for i, v := range rest {

			restx := make([]int, len(rest))
			copy(restx, rest)

			restx = append(restx[:i], restx[i+1:]...)
			headx := append(head, v)

			perm(headx, restx)
		}
	}
}

func main() {
	perm([]int{}, []int{1, 2, 3, 4})
}
```
Hierarchy上からコンポーネントを操作する

# 機能
ヒエラルキー上からコンポーネントの内容を操作するためのUnityエディタ拡張です。

# サンプル
![icon.png](https://qiita-image-store.s3.amazonaws.com/0/164066/86061f54-fcc0-8611-6c17-7e1854f9a134.png)

# 使用用途
RaycastTargetなどのboolタイプの値をHierarchy上から操作することができます

# サンプルソースコード
```csharp:ExampleEditorClass.cs
#region

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

#endregion

/// <summary>
/// 特定の条件を満たす場合にHierarchy上に画像を表示する
/// </summary>
public static class ExampleEditorClass
{
    private const int IconSizeWidth = 16;

    private static Texture2D buttonImage;

    // Awakeよりも先に呼ばれる
    // https://anchan828.github.io/editor-manual/web/callbacks.html
    [InitializeOnLoadMethod]
    private static void Example()
    {
        EditorApplication.hierarchyWindowItemOnGUI += ExampleEditorClass.OnGui;
    }

    private static void OnGui(int instanceId, Rect selectionRect)
    {
        // Project全体からデータをロードできる(対象の画像がなければエラー)
        // http://kan-kikuchi.hatenablog.com/entry/AssetDatabase_LoadAsset
        ExampleEditorClass.buttonImage = AssetDatabase.LoadAssetAtPath("Assets/Image/img.png", typeof(Texture2D)) as Texture2D;

        // InstanceIDをオブジェクトに変換
        var gameObject = EditorUtility.InstanceIDToObject(instanceId) as GameObject;

        if (gameObject == null)
        {
            return;
        }

        // 探したい対象の処理(ex:イメージのRaycast)
        var imageObject = gameObject.GetComponent<Image>();

        if (!imageObject)
        {
            return;
        }

        var searchTarget = gameObject.GetComponent<Image>().raycastTarget;

        if (!searchTarget)
        {
            return;
        }

        // 画像の表示位置
        var imagePos = selectionRect;
        imagePos.x = imagePos.xMax - ExampleEditorClass.IconSizeWidth;
        imagePos.width = ExampleEditorClass.IconSizeWidth;

        // Inspector上に画像を表示する
        if (GUI.Button(imagePos, ExampleEditorClass.buttonImage, GUIStyle.none))
        {
            gameObject.GetComponent<Image>().raycastTarget = false;
        }
    }
}
```

# 参考サイト、その他情報
[コドモのころの夢](http://childhooddream.sakura.ne.jp/)
[コガネブログ](http://baba-s.hatenablog.com/entry/2015/05/04/171926)
[エディタ拡張入門](https://anchan828.github.io/editor-manual/web/callbacks.html)
[kanのメモ帳](http://kan-kikuchi.hatenablog.com/entry/AssetDatabase_LoadAsset)
[Unifred](https://github.com/syrntms/Unifred)
[Hierarchy上に画像を表示する](http://qiita.com/yunomi/items/d4e708b34fee6f9a7015)
JavaScript で a 要素を使用したダウンロードでネットワークエラーが起きた

JavaScript で生成（`canvas`で描画するなど）したファイルなどをダウンロードするときは HTML の [`a` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)の[`download` 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#attr-download)にファイル名を設定し、その要素をクリックすることでできます。

```js:download-example.js
const downloader = document.createElement("a");
downloader.download = "ファイル名";
downloader.href = "data:..."; // URL (Data URI scheme や object URLも可能)
downloader.click();
```

しかし、ファイルのURLを[ Data URI scheme ](https://ja.wikipedia.org/wiki/Data_URI_scheme)で指定した場合、しばしばネットワークエラーが起こりダウンロードできないことがあります。

これは、ファイルサイズが大きい時に、Data URIも長くなり、`a`要素における`src`属性の文字数が許容範囲を超えたことが原因です。

これを避けるためには、[オブジェクト URL](https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Using_object_URLs)を利用します。

`canvas` の `toBlob` など、何らかの方法で `Blob` オブジェクトを取得できるなら、その `Blob` オブジェクトを [`URL.createObjectURL()`](https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL) メソッドに渡して実行することでオブジェクトURLが得られますが、データが`Data URI scheme`でしか得られないこともあります。

その場合は、`Data URI scheme` を `Blob` オブジェクトに変換してからオブジェクトURLを取得します。

```js
// Data URL -> Blob Object convert
// 参考: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
// uri: Base64エンコードされたデータURI, type: ファイルのMIMEタイプ

const base64ToBlob = uri => {
  const parse = uri.slice(5).split(/[,;]/);
  const binStr = atob(parse.pop());
  const l = binStr.length;
  const array = new Uint8Array(l);

  for (let i = 0; i < l; i++) {
    array[i] = binStr.charCodeAt(i);
  }

  return new Blob([array], {type: parse[0]});
}
```

上の関数などでできた`Blob`オブジェクトを`URL.createObjectURL()`でオブジェクトURLに変換し、先述のダウンロードする`a`要素に設定すればうまく行くはずです。

また、オブジェクトURLは[MDNにもある通り、](https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Using_object_URLs)一時的なものなので、`click()`を実行後に開放しましょう。

```js
// blob: Blobオブジェクト
const download = blob => {
  const url = URL.createObjectURL(blob);
  const downloader = document.createElement("a");
  downloader.download = "ファイル名";
  downloader.href = url;
  downloader.click();
  URL.revokeObjectURL(url); // オブジェクトURLを開放
}
```

## 参考資料
[javascript - Download Canvas as PNG in fabric.js giving network Error - Stack Overflow](http://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error)
chrome拡張作り

#前提
- mac 10.9.5
- 2017/2/15現在

#動機
ふと思いついたのでgoogle chrome拡張作りたい。何か簡単で意味のあるものを作ってストアにアップすることを目指す。

#手順
リポジトリ作りましたよ〜
https://github.com/kanokanoka/chrome_ext001

参考文献1.によると、html,css,javascriptにmanifest file(json形式)の組み合わせを書けば良いらしい。かつ、chrome.*APIというものがあるらしい。おそらく便利なAPIがたくさんあるんでしょうね(参考文献3.)。

参考文献4.によると、ブラウザの右上に付くアイコンとか、アドレスバーのとこにくるやつとか、ページ内のDOMに手を入れるもの、右クリックから実行するようなものがあるようですが、やはりまずは拡張と言えばアイコンのやつでしょう。

では、「アイコン押して何か確認して、そっ閉じしてネットサーフィンに戻る」
ものを作ることを目指しましょう。

公式文書がいずれも英語なのは、オワコンの極みですね。ただやるしかありません。

んで、書いている通りにmanifest.jsonとindex.htmlとiconを適当に数行書いて行くだけで。。
![スクリーンショット 2017-02-09 23.38.15.png](https://qiita-image-store.s3.amazonaws.com/0/37393/06233869-6287-e96a-a309-b20d4441083b.png)

まじっすか！本当にめちゃ簡単だ！
もう少しがんばってみます。

#APIいくつか試すの会
以下の奴らを、manufest.jsonに書いて行く。

 - browser_action

```json
"browser_action": {
　"default_popup": "index.html",
　"default_icon": "icon19.png",
　"default_title": "title"
}
```

こんなのを書くと、アイコンをクリックしたらindex.htmlをポップアップできる。

 - background

```json
"background":{
 "scripts":["background.js"]
}
```

こんなのを書くと、実行時にbackground.jsが読み込まれる。

#参考文献
1.Chrome拡張の開発方法まとめ　その1：概念編
http://qiita.com/edit-mode/items/26d7a22233ecdf48fed8

2.公式のmanifestフォーマット
https://developer.chrome.com/extensions/manifest

3.公式のAPI集(javascript)
https://developer.chrome.com/extensions/api_index

4.初めてでも理解できるようになる「Google Chrome機能拡張の開発」
http://oxynotes.com/?p=8836
　→どんなことができるかがわかりやすい


#加筆予定
まだまだ発展途上なのでどんどん追記
react_railsでes6を使うときのプラクティス

前に[draftjsをrailsで利用する記事](http://qiita.com/iwsksky/items/092e58ea4f0707bea2bf)を書きましたが、あまりしっくり来ていなかったので試行錯誤した結果を記します。

結論から言うとjsのトランスパイルはgulpで行うことにしました、railsの設定系ファイルと完全に分離して表側のアセットを管理できるようになったので今のところ使い勝手は良いです。

やることとしてはgulpでes6で記述されたreact_componentをトランスパイルするだけなので結構シンプルです。

[前回](http://qiita.com/iwsksky/items/092e58ea4f0707bea2bf)draft-jsを使いましたが[よりreactに最適化されているっぽいやつ](https://github.com/jpuri/react-draft-wysiwyg)があったので今回はこちらを使っています。

#動作環境
rails ５系 or ４系
npm
package.json参照


#手順
- 必要なnpmpackageのインストール
- react_component作成
- gulpfile作成とトランスパイル


#実装
- 必要なnpmpackageのインストール

下記パッケージのインストール

```package.json
略
"dependencies": {
    "browserify": "~> 10.2.4",
    "coffee-script": "^1.12.3",
    "draft-js": "^0.10.0",
    "glob": "^7.1.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-coffee": "^2.3.3",
    "gulp-plumber": "^1.1.0",
    "gulp-uglify": "^2.0.1",
    "gulp-watch": "^4.3.11",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-draft-wysiwyg": "^1.7.0",
    "vinyl-source-stream": "^1.1.0"
  }
略
```

- react_component作成

どんなコンポーネントでも良いのですが、react-draft-wysiwygで試してみます。react_railsのヘルパーを使いたいのでwindow.DraftEditorと最後に書いてますがもっといい方法を知っている方がいたら教えてくださいm(__)m

```DraftEditor.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Editor } from 'react-draft-wysiwyg';
import {EditorState} from 'draft-js';


class DraftEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onEditorStateChange = (editorState) => this.setState({editorState});
  }
  render() {
    const { editorState } = this.state;
    return (<Editor
      editorState={editorState}
      onEditorStateChange={this.onEditorStateChange}
    />)
  }
}
window.DraftEditor = DraftEditor
```

- gulpfile作成とトランスパイル

最後にes6で書かれたreact_componentをトランスパイルした上でuglifyで1つにします。今回はappと並列にreact_component用のディレクトリを作成しトランスパイル後のjsファイルはreact_railsの規約に則りasset以下のcomponentディレクトリに吐き出します。
coffeescriptなのはなんとなく気分なので特に理由はないです笑

```gulpfile.coffee
gulp          = require 'gulp'
babel         = require 'gulp-babel'
browserify    = require 'browserify'
source        = require 'vinyl-source-stream'
glob          = require 'glob'
plumber       = require 'gulp-plumber'

gulp.task 'build', ->
  files = glob.sync './components/*.{js,jsx,coffee}'
  browserify
    entries: files,
    debug: true
  .transform 'babelify'
  .bundle()
  .pipe plumber((err) ->
      console.log(err)
      this.emit('end')
    )
  .pipe source 'bundle.js'
  .pipe gulp.dest 'app/assets/javascripts/components'

gulp.task 'watch', ->
  gulp.watch('./components/*.{js,jsx,coffee}', ['build'])

gulp.task 'default', ['build', 'watch']

```


#所感
新しいツールの導入が多くある程度労力はかかりますがレールから外れると割り切ると途端に楽になります。

[github](https://github.com/sdsd08013/draft-rails)にあげておいたので参考までにどうぞ
githubでリポジトリ作成

#前提
- 2017/2/10時点
- 無料の範囲
- 僕の環境のmac(10.9.5)
- git version 1.8.5.2 (Apple Git-48)

#github
https://github.com/

#手順
githubにいく

「New repository」

>自分のID/test
descriptionは適当
public

「Create repository」

その後ターミナルへ。

```sh
mkdir test
cd test
git init
vim aaa  (testとかかいとく)
git add aaa
git commit -m "test commit"
git remote add origin https://github.com/kanokanoka/test.git
git push -u origin master
```

これでうまくいっている。
githubに書いていた通り。
僕はsshのkeyとかはいつ登録したのだろう。必要らしいです。

いろいろと読んだところ、originのところはなんでもいいらしい。#defineみたいなものなのかな。
あとは、bbbとかいうファイルを作ったら、同じようにaddしてcommit してpushしたらいい感じ。

#加筆計画
- 文をもうちょっとまともに
- 鍵の話とか
- 例をもうちょっとまともに
- remoteのあたりとか記法多そう
- 試した感じだと、リポジトリ作ってgit clone 〜〜.gitしたほうが簡単かも〜
AWS CLI を使ってタスクを複製する方法

# はじめに
AWS DMS で既存のタスクと同一の設定を持つ別のタスクを作成したい場合には、AWS CLI を使うと容易に複製することが出来ます。

# 手順
既存タスクの設定を input.json に書き出します。

```bash
$ DMS_TASK_NAME=TEST
$ aws dms describe-replication-tasks --filters "Name=replication-task-id,Values=${DMS_TASK_NAME}" --query "ReplicationTasks[0].{SourceEndpointArn: SourceEndpointArn, ReplicationTaskIdentifier: ReplicationTaskIdentifier, ReplicationInstanceArn: ReplicationInstanceArn, TableMappings: TableMappings, MigrationType: MigrationType, TargetEndpointArn: TargetEndpointArn, ReplicationTaskSettings: ReplicationTaskSettings}" > input.json
```

書き出した input.json の ReplicationTaskIdentifier の値を既存タスクと重複しないよう変更します。以下の例では "TEST" を別の文字列に変更します。

```json:input.json
{
    "SourceEndpointArn": "arn:aws:dms:ap-northeast-1:xxxxxxxxxxxx:endpoint:XXXXXXXXXXXXXXXXXXXXXXXXXX",
    "ReplicationTaskIdentifier": "TEST",
    "ReplicationInstanceArn": "arn:aws:dms:ap-northeast-1:xxxxxxxxxxxx:rep:XXXXXXXXXXXXXXXXXXXXXXXXXX",
    "TableMappings": ...
...
```

そして input.json を引数として、新規タスクを作成します。

```bash
$ aws dms create-replication-task --cli-input-json file://input.json
```

# 参考情報
・[describe-replication-tasks](http://docs.aws.amazon.com/cli/latest/reference/dms/describe-replication-tasks.html)
・[create-replication-task](http://docs.aws.amazon.com/cli/latest/reference/dms/create-replication-task.html)
proftpd ftps

# 作業メモ
とある問題切り分けのため、AWS上にFTPサーバを立てて、FTPSでの疎通確認
※運用するための構築手順ではないので、きちんとした設定ができていないですが
※部分部分で何らかお役に立てれば嬉しいです。
　

# 環境
amzn-ami-hvm-2016.09.1.20170119-x86_64-gp2 (ami-56d4ad31)

#

1.事前準備

```
yum install gcc
yum install openssl-devel
```

2.proftpd install

```
cd /usr/local/src
wget ftp://ftp.proftpd.org/distrib/source/proftpd-1.3.5d.tar.gz
tar -zxvf ./proftpd-1.3.5d.tar.gz
cd proftpd-1.3.5d
./configure --with-modules=mod_tls
make
make install
```

3.設定

```
vim /usr/local/etc/proftpd.conf
```

```
PassivePorts                  10000 10003(passiveModeで使うデータ転送用ポートです)
Group                           nobody (nogroupから変更)
MasqueradeAddress FTPサーバのグローバルIP
```



4.ホスト名を引けるようにしておく（そのまま起動したらエラーになったので）

```
vim /etc/hosts
```

5.確認用ユーザを追加

```
useradd -d /ftp/ftp_user -s /sbin/nologin ftp_user
passwd ftp_user
```

起動

```
/usr/local/sbin/proftpd
```

一旦、FTP接続確認（WinSCP利用）　→OK

６.TLS/SSL化(FTPS)

オレオレ証明書
※参考にさせていただきました
http://d.hatena.ne.jp/ozuma/20130511/1368284304


```
openssl genrsa 2048 > ftps.key
openssl req -new -key ftps.key > ftps.csr
openssl x509 -days 3650 -req -signkey ftps.key < ftps.csr > ftps.crt
cp ./ftps.crt /etc/pki/tls/certs/ftps.crt
cp ./ftps.key /etc/pki/tls/private/ftps.key
chmod 600 /etc/pki/tls/certs/ftps.crt
chmod 600 /etc/pki/tls/private/ftps.key
```


```
vim /usr/local/etc/proftpd.conf
```

以下追記

```
<IfModule mod_tls.c>
    TLSEngine on
    TLSRequired off

    TLSLog  /var/log/proftpd/tls.log
    TLSProtocol TLS1.2
    TLSCipherSuite HIGH:MEDIUM
    
    TLSRSACertificateFile /etc/pki/tls/certs/ftps.crt
    TLSRSACertificateKeyFile /etc/pki/tls/private/ftps.key
    TLSOptions NoCertRequest
    TLSVerifyClient off
</IfModule>
```


proftpd上げ直し
TLS接続確認（WinSCP）→OK(鍵マーク確認)

# 疎通確認を通して、きちんとしなきゃなと思ったこと
・chrootの制御（FTP接続後、普通に上位ディレクトリが見えてしまってた）
・TLSCipherSuiteがよくわからんまま、なるべく安全そうなのを並べたが確証がない
Capistrano 3 でデプロイサーバから対象サーバにコピー 

デプロイサーバはインターネットとやりとりできる環境にあるけど、デプロイ対象のサーバはプライベートなネットワークで、外には繋がらない（デプロイサーバとはsshで繋がる）、というような環境で、Capistranoを使ってデプロイする場合。


これを使うのが良さげ。

https://github.com/ydkn/capistrano-git-copy

>Creates a tar archive locally from the git repository and uploads it to the remote server.

とのことで、ローカルでgitリポジトリの内容をアーカイブしてからリモートサーバに転送するよ、とのこと。

## 背景

同じ目的で、 https://github.com/xuwupeng2000/capistrano-scm-gitcopy もあるが、ReadMe通りに設定すると、現行のバージョン（3.7）では次のような警告が出る。
なので、代替物を探してみた。

```
[Deprecation Notice] `set :scm, :gitcopy` is deprecated.
To ensure this custom SCM will work with future versions of Capistrano,
please upgrade it to a version that uses the new SCM plugin mechanism
documented here:

http://capistranorb.com/documentation/advanced-features/custom-scm
```

## セットアップ

ReadMeに従って設定。

#### Capfile

```rb:Capfile
# Load the SCM plugin appropriate to your project:
#
# require "capistrano/scm/hg"
# install_plugin Capistrano::SCM::Hg
# or
# require "capistrano/scm/svn"
# install_plugin Capistrano::SCM::Svn
# or
# require "capistrano/scm/git"
# install_plugin Capistrano::SCM::Git

# Capistrano::GitCopy plugin
# https://github.com/ydkn/capistrano-git-copy
require 'capistrano/git_copy'
install_plugin Capistrano::GitCopy::SCM
```

通常は、この部分、

```rb
# require "capistrano/scm/git"
# install_plugin Capistrano::SCM::Git
```

が活きているが、コメントアウトして、 `git_copy` のものに設定する。


## 実行

あとは、通常通り、デプロイすればOK。

```
$ bundle exec cap develop deploy
00:00 git_copy:check
      01 git ls-remote --heads ssh://precure@git.example.com:11234/hoge/fuga.git

...

00:10 git_copy:create_release
      01 /home/precure/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/capistrano-git-copy-1.3.0/vendor/git-archive-all/git_archive_all.py --prefix='' /tmp/hogefuga…
    ✔ 01 precure@localhost 0.172s
      02 mkdir -p /var/www/magical.example.com/releases/20170209132532
    ✔ 02 precure@app-magical-001 1.146s
    ✔ 02 precure@app-magical-002 1.158s
      Uploading /tmp/hogefuga_develop_7a0eea46_43432c0e/archive.tar.gz 12.81%
      Uploading /tmp/hogefuga_develop_7a0eea46_43432c0e/archive.tar.gz 25.62%
      Uploading /tmp/hogefuga_develop_7a0eea46_43432c0e/archive.tar.gz 38.44%
      ...
```

といった感じで、固めた上でコピーしてくれる。
VisualStudioCodeにTSLintを導入したメモ

[dockerでtslintを試してみた](http://qiita.com/hibohiboo/items/d3d5976f38e05110e2e7)ので、普段使っているvscodeにも導入してみた。

## 必要なnpmパッケージのインストール

```
npm install -g --save-dev gulp typescript
npm install --save-dev tslint gulp gulp-tslint
```

## tslint設定ファイルの用意

```
project
 - .vscode
   - tasks.json # vscodeからgulpを実行する設定
 - tslint.json  # チェックする項目のルール
 - gulpfile.js  # tslintを実行するタスク
 - package.json
 + node_modules
```


```json:.vscode/tasks.json
{
	// See https://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"args": [
		"--no-color"
	],
	"tasks": [
		{
			"taskName": "tslint",
			"args": [],
			"problemMatcher": {
				"owner": "tslint",
				"fileLocation": [
					"relative",
					"${workspaceRoot}"
				],
				"severity": "warning",
				"pattern": {
					"regexp": "^(\\S.*)\\[(\\d+), (\\d+)\\]:\\s+(.*)$",
					"file": 1,
					"line": 2,
					"column": 3,
					"message": 4
				}
			}
		},
		{
			"taskName": "tslint-fix",
			"args": [],
			"problemMatcher": {
				"owner": "tslint-fix",
				"fileLocation": [
					"relative",
					"${workspaceRoot}"
				],
				"severity": "warning",
				"pattern": {
					"regexp": "^(\\S.*)\\[(\\d+), (\\d+)\\]:\\s+(.*)$",
					"file": 1,
					"line": 2,
					"column": 3,
					"message": 4
				}
			}
		}
	]
}
```

```js:gulpfile.js
'use strict';

const gulp = require('gulp');
const gulp_tslint = require('gulp-tslint');

gulp.task('default', ['tslint']);

gulp.task('tslint', () => {
    return gulp.src(['**/*.ts', '!**/*.d.ts', '!node_modules/**'])
      .pipe(gulp_tslint())
      .pipe(gulp_tslint.report());
});


gulp.task('tslint-fix', () => {
    return gulp.src(['**/*.ts', '!**/*.d.ts', '!node_modules/**'])
      .pipe(gulp_tslint({fix:true}))
      .pipe(gulp_tslint.report());
});
```


``` json:tslint.json
{
	"rules": {
		"no-unused-expression": true,
		"no-duplicate-variable": true,
		"no-duplicate-key": true,
		"no-unused-variable": true,
		"curly": true,
		"class-name": true,
		"semicolon": ["always"],
		"triple-equals": true
	}
}
```

## 実行

[ctrl] + [shift] + [p] でコマンドパレットを開く。

run taskと入力して[enter] → tslintを選択して[enter]でtslintでのチェック。
tslint-fixを選択した場合は、tslintで出たエラーの中から修正できるものを自動で修正する

## 参考

[tslint][*1]
[vscode-tslint][*2]
[Visual Studio Codeの使い勝手をよくするツール (1/5)][*3]
[qiita vscode moca][*4]
[Visual Studio Code を使う上で良くわかっていなかった(基本的な)用語とか][*5]
[tslint-json][*7]
[tslint-cli][*8]
[VSCodeでTypescriptの型定義ファイルを適用][*9]

[*1]:https://marketplace.visualstudio.com/items?itemName=eg2.tslint
[*2]:https://github.com/Microsoft/vscode-tslint
[*3]:http://www.atmarkit.co.jp/ait/articles/1509/08/news019.html
[*4]:http://qiita.com/xingyanhuan/items/46ab06dc6ad9ffaec4f2
[*5]:http://qiita.com/satokaz/items/dd2f16fc953e7bdb6d2f
[*6]:https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
[*7]:https://palantir.github.io/tslint/usage/tslint-json/
[*8]:https://palantir.github.io/tslint/usage/cli/
[*9]:http://qiita.com/hibohiboo/items/cc0d0fc9fecf12d30951
redis で because protected mode is enabled が出た場合の対処

redis サーバに接続した際に

>
(error) DENIED Redis is running in protected mode because protected mode is enabled, no bind address was specified, no authentication password is requested to clients. In this mode connections are only accepted from the loopback interface. If you want to connect from external computers to Redis you may adopt one of the following solutions: 1) Just disable protected mode sending the command 'CONFIG SET protected-mode no' from the loopback interface by connecting to Redis from
the same host the server is running, however MAKE SURE Redis is not publicly accessible from internet if you do so. Use CONFIG REWRITE to make this change permanent. 2) Alternatively you can just disable the protected mode by editing the Redis configuration file, and setting the protected mode option to 'no', and then
restarting the server. 3) If you started the server manually just for testing, restart it with the '--protected-mode no' option. 4) Setup a bind address or an authentication password. NOTE: You only need to do one of the above things in order for the server to start accepting connections from the outside.

と出た場合は、エラーメッセージにある通り

1. ローカルホストから接続して、`CONFIG SET protected-mode no` コマンドを実行するか
1. 設定ファイルに `protected-mode no` を追加するか
1. コマンドラインオプションに `--protected-mode no` を指定するか
1. Setup bind address (設定ファイルの bind 設定？)か、パスワード認証を行うか

のいずれかを実行しないと、操作ができなくなっている。

Redis 3.2 で実装されたセキュリティ機能らしく、redis は基本的に無防備でパスワード認証を使う以外はパケットフィルタでアクセス制限を設定する必要があったが、少しだけ改善されたということか。

https://redis.io/topics/security#protected-mode
>
Protected mode
Unfortunately many users fail to protect Redis instances from being accessed from external networks. Many instances are simply left exposed on the internet with public IPs. For this reasons since version 3.2.0, when Redis is executed with the default configuration (binding all the interfaces) and without any password in order to access it, it enters a special mode called protected mode. In this mode Redis only replies to queries from the loopback interfaces, and reply to other clients connecting from other addresses with an error, explaining what is happening and how to configure Redis properly.
We expect protected mode to seriously decrease the security issues caused by unprotected Redis instances executed without proper administration, however the system administrator can still ignore the error given by Redis and just disable protected mode or manually bind all the interfaces.
[Unity]サイズをシーン上で変えられるGrid

## 結果
![Grid.gif](https://qiita-image-store.s3.amazonaws.com/0/113504/932623b0-056d-5680-b2df-0054db15ae09.gif "Grid.gif")


## GridLayoutGroupの問題点
GridLayoutGroupにはCellのサイズをScene上で調整できない


## スクリプト

```
using UnityEngine;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
#endif

/// <summary>
/// Scene上でGridのサイズを変更できるようにする拡張
/// </summary>
public class CustomGrid : GridLayoutGroup {
	#if UNITY_EDITOR
	// 子のRectTransformを更新するタイミング
	public override void SetLayoutHorizontal ()
	{
		UpdateCellSize ();
		base.SetLayoutHorizontal ();
	}

	// CellSizeを更新
	void UpdateCellSize(){
		// シーン上のオブジェクトであるか
		var obj = Selection.activeGameObject;
		if (!obj) {
			return;
		}

		// RectTransformを持っているか
		var tran = obj.GetComponent<RectTransform> ();
		if (!tran) {
			return;
		}

		// 親が自身であるか
		if (tran.parent == this.transform) {
			cellSize = new Vector2 (tran.rect.width, tran.rect.height);
		}
	}
	#endif
}
```
【簡単】サイトのiPhone表示をWindowsでデバッグする方法

スマホサイトのiPhone表示をWindowsでデバッグする方法です。
iPhoneのWebインスペクタをWindowsで表示できます。
簡単な方法が意外と見つからなかったのでまとめました。
ブラウザはChromeが必要です。

参考

- [How To View iOS Console on Windows](http://franklysean.com/view-ios-console-windows/)

# 環境構築

まず、WindowsにiTunesがインストールされている必要があります。
入ってない場合はインストールしましょう。
ブラウザはChromeです。

次に、[ios-webkit-debug-proxy-win32](https://github.com/artygus/ios-webkit-debug-proxy-win32)をインストールします。
上のリンクの「Binaries」からダウンロードできます。
<img width="507" alt="20.png" src="https://qiita-image-store.s3.amazonaws.com/0/50996/c81dbad5-b86f-b893-bd12-1933dddd79a9.png">
このソフトはインストーラーはありませんので、zipを解凍したらインストール完了です。

iPhoneの方では、Webインスペクタを有効にする必要があります。
この設定は、設定アプリ→Safari→詳細にあります。

環境構築はこれだけで完了です。

# Webインスペクタを表示する

iPhoneをWindowsにUSB接続します。
iPhoneで「このコンピュータを信頼しますか」と聞かれたら「信頼」をタップします。

Windowsで、先程解凍したios-webkit-debug-proxy.exeを起動します。
うんともすんとも言わないコンソールが出てきて面食らいますが、これはそれで合っています（iPhoneと通信できなくなったりするとエラーが表示されます）。
起動したときにWindowsのセキュリティ警告が出た場合は「アクセスを許可する」をクリックしてください。

iPhoneでデバッグしたいサイトを開きます。

WindowsのChromeで[localhost:9221](localhost:9221)を開きます。
iPhoneのデバイス名のリンクが表示されるので、それをクリックします。
さらに、safariで開いているページの一覧が表示されるので、デバッグしたいサイトをクリックします。

ChromeにWebインスペクタが表示され、デバッグできるようになりました。

# TIPS

Macの場合がどうなのか知りませんが、このWebインスペクタは結構使いづらいです。うまく付き合うコツをいくつか紹介します。

## 1. 要素の開閉

要素をダブルクリックするとサブノードが開いて見られるようになりますが、二度と閉じることはできません。目を瞑りましょう。

## 2. 要素の選択方法
要素をクリックしても詳細は表示されません。次のようにすると狙った要素の詳細を見られます。
1. インスペクタの左下の虫眼鏡アイコンをクリック
2. iPhoneで要素を選べるようになるので、狙いの要素をタップ
<img width="228" alt="30.png" src="https://qiita-image-store.s3.amazonaws.com/0/50996/d3f2e75c-5535-c67f-6b82-c12e3a893788.png">

## 3. 要素の選択方法（タップできない場合）
iPhoneで狙いの要素をタップするのが難しい場合は、その子孫をタップしてからインスペクタの下部のノードパスから狙いの要素を探してクリックすると詳細が表示されます。
<img width="439" alt="40.png" src="https://qiita-image-store.s3.amazonaws.com/0/50996/e2cdf994-3962-e79c-2381-a40c0548e853.png">


# まとめ

以上のように、Windowsでもかなり簡単にiPhone向けのデバッグ環境を構築することができます。
Windowsを普段使いしている方は試してみてはいかがでしょうか。
Fitbit Zip の時間がずれる時の対処法

Fitbit Zip の時間がずれてしまうようになった．
同期して直しても，スグにずれてしまう．
時間がずれると採れるデータもずれてしまう．

保証期間中だったのでサポートに問い合わせたところ，

> いつも弊社製品をご愛用いただきまして誠にありがとうございます。
お問い合わせいただきました不具合は、同期データから推測するとボタン電池を固定するバネ圧が弱いことで電源がON/OFFを繰り返していることが原因かと思われます。
つきましては、トラブルシューティングとしまして以下の方法をお試しくださいませ。

![-ZIP-1.png](https://qiita-image-store.s3.amazonaws.com/0/65919/0dc3e495-11e2-d9dc-3e4d-6393a5f05f48.png)

という返信があった．
同じ問題を抱えたユーザーのお役に立てたら嬉しいです．
JavaScript の Number() は副作用がある可能性がある

たまたまTwitterを見てたら以下のようなツイートを見かけました。

![image](https://qiita-image-store.s3.amazonaws.com/0/6031/a0be6101-9f1d-a780-3e3c-5948412e82de.png)


つまり、 `isNumber` っていう関数を作るなら一旦`Number`でキャストした値と同一かどうかを比較すれば良いと。おそらく `NaN` を省いた `number` 型を `true` にしたいのかなという感じがする (NaN === NaN は必ず false)。

ただこれには問題があるらしく、 V8 のOptimizerリーダーである bmeurer から下記のようなレスが付いてました。

![image](https://qiita-image-store.s3.amazonaws.com/0/6031/9d8accf8-5417-56de-4123-5602785ac275.png)


「 `Number()` では意図しない副作用があるかもしれない」という意味のレス。最初意味がわからなくて、「おや？」と思ったんですけど、その後で補足が。

![image](https://qiita-image-store.s3.amazonaws.com/0/6031/425e3218-61e8-32cb-1015-07da159755b1.png)

「`ToPrimitive`関数が呼ばれてしまい、意図しないJSの動きをするかも。」とのこと。

つまり、

```javascript
var a = {
  x: 1,
  [Symbol.toPrimitive]: function() {
    this.x++;
    return this.x;
  }
};
```

みたいなオブジェクトがあったら、 `Number` 関数が呼ばれる度に `a.x` がインクリメントされてしまう。

```
$ node > Number(a)
<- 2
$ node > Number(a)
<- 3
$ node > Number(a)
<- 4
```

これだけじゃなくて、 `+a` でも呼ばれるはず

```
$ node > +a
<- 5
$ node > +a
<- 6
$ node > +a
<- 7
```

上記の条件（NumberだけどNaNをfalseにしつつ、副作用を伴わない）を満たす`isNumber`関数を作るなら、横着せずにちゃんと `typeof a === 'number'` と `Number.isNaN` でチェックするのがいいんだろう。 

いやでも待てよ、それだとすると、副作用を伴わずにNumber型にキャストするっていう手段はないのか・・・？どうしよう、って思ったら Dr. Axel 先生からの締め。

![image](https://qiita-image-store.s3.amazonaws.com/0/6031/717af2ec-a545-a3d7-33ed-91aaa4f0693a.png)

`parseNumber` っていう関数あるといいのかもねーっていう。こうしてJSにまた1つ関数が追加されるのかしら。
Lombokをいざ使おうとしたときに確認するメモ

Lombokについて、いろいろまとめてみました。
プロジェクトで採用する際の参考になるかもです。

# Lombokについて簡単に説明
Lombok（ロンボク。ロンボックでも可）とは、
Java特有の冗長なコード（ボイラープレートコード）を簡潔にしてくれるオープンソースのライブラリです。
アノテーションを付けるだけで、 getter, setter, toString, equals など
「何度も繰り返し書くコード」をコンパイル時に自動生成してくれます。

# メリット
- ボイラープレートコードをコード上から排除できる。
- フィールド名変更の際にアクセサメソッドが古いままにならない。
- アクセサメソッド内のロジックが埋もれない。
- テストのカバレッジで適正な値が出やすい。

# デメリット（注意事項）
- `@ToString`で循環参照になる危険性がある。<br>
→その場合、excludeで除外設定できる。<br>
詳しくはこちらを参照 → [Lombok利用時のStackOverflow - toStringメソッド](http://blog.beaglesoft.net/entry/2016/01/04/060000)
- フィールド名を変更する際、アクセサメソッドの参照先が変更できない。<br>
→IDEのGetter/Setterの自動生成したものからリファクタリング機能で変更するなどの対応が必要。<br>

# インストール方法
Eclipse：
以下のサイトからlombok.jarをダウンロードして実行。
https://projectlombok.org/download.html
Specify Locationでeclipse.exeと同じディレクトリを指定して、Install/Updateする。

NetBeans：
※NetBeansの場合は、jarとか何も操作しなくてもMavenとか使えば、普通に使用できる。

以下、Mavenの書き方。
※scopeをprovidedとすること。

```xml
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.16.12</version>
    <scope>provided</scope>
</dependency>
```

# コーディング規約
Lombokはその性質上、これまでのコーディング感を一変させることが考えられるため、
プロジェクトで使用する際は、コーディング規約を用いたほうがよいでしょう。
以下、使用可能とするアノテーション、および、クラスを記載します。
※あくまで、私の好みですので、参考までに。

## 動的型付け
val list = new ArrayList\<String>();  //不変的なローカル変数
※ArrayListオブジェクトを代入した場合、List型ではなく、ArrayList型扱いとなる。
※右辺の型情報を省略した場合は、List<Object>になる。
## データモデル関連

```java
@Getter, @Setter, @ToString, @EqualsAndHashCode, @Data, @Value
@NoArgsConstructor, @RequiredArgsConstructor, @AllArgsConstructor
```

※アノテーションの引数として、AccessLevel, lazy, exclude, staticName="of"を使用可能とする。
## オブジェクト生成関連

```java
@Builder, @Singular, @NonNull, @Wither, @CleanUp
```

※Builderの場合、生成するクラス名とインスタンスを返す静的メソッド名の名前を変更できたりするが、
原則、その設定は行わないこととする。
※CleanUpはtry-with-resouces文を優先的に使用すると、ほとんどの場合は不要だが、
まだClosableを実装していないものはあるので、そのケースが出てきた場合に限り使用できることとする。
## その他

```java
@Synchronized, @Log4j2, @SneakyThrows
```

※SneakyThrowsを使用する場合は、非検査例外とする対象のThrowableを指定すること。

## 使用禁止
lombok.experimentalパッケージ配下
→実験的な機能が多く、今後仕様変更が入る可能性が十分に高いため。
例）Accessors(fluent = true), UtilityClass, など。

# 参考
[Lombok 使い方メモ](http://qiita.com/opengl-8080/items/671ffd4bf84fe5e32557)
[JavaでIDEのアクセッサ生成よりlombokを使ったほうがいい理由](http://d.hatena.ne.jp/nowokay/20130730)
Rails で Missing 'secret_key_base' 真っ白な画面

Ruby on Rails で開発中のプロジェクトに中途から参加．

【環境】
- Ruby 2.3.1
- Rails 5.0.1

.ova ファイルをもらい VirtualBox にインポートして rails を起動すると，
192.168.56.102:3000 にて，エラーメッセージ
> Puma caught this error: Missing 'secret_key_base' for > 'development' environment, set this value in 'config/secrets.yml' (RuntimeError)

と共に以下の真っ白な画面が出た．

![20170209_RoR_SecretKeyError.png](https://qiita-image-store.s3.amazonaws.com/0/158903/fde1d020-0ebc-01bc-5e91-5bb16f9511b3.png)

config/secrets.yml
が存在していなかったので作成する．
中身は他のプロジェクトからコピペした．

```ruby:config/secrets.yml
development:
 secret_key_base:  8***7

test:
 secret_key_base:  3***e

production:
 secret_key_base:  <%= ENV["SECRET_KEY_BASE"] %>
```

これで無事に起動した．

![20170209_RoR_SecretKeyErrorSolved.png](https://qiita-image-store.s3.amazonaws.com/0/158903/50d53aa8-9f33-0378-9a1e-c60b4f5d4d9f.png)


ちなみに Puma は，Production 環境で nginx と併せ使うためレポジトリに含まれているが，ローカル開発環境では未使用．
JavaScriptのメソッド定義する時に引数どうしようか悩んだ話

## JavaScriptのメソッド定義する時に引数どうしようか悩んだ話

ライブラリを作成しようとしている人の参考になれば。。。

### 案1: 1オブジェクトにまとめてしまう

paramsで渡された内容を元に、HTTPリクエストを行うメソッドの例

```
sendRequest(params) //url, method, headerなどが全部入り
  .then((res)=>{})
  .catch((err)=>{});
```

- メリット
 - メソッド呼び出しもとは、すっきり書ける
 - 仕様が変わっても、呼び出しもとを変更をせずに済むかも
- デメリット
 - sendRequestの必須パラメータがすぐ分からない
 - パラメータが設定されているかメソッド内で調べるのが大変

### 案2: 全パラメータをそれぞれ引数にしてしまう

案1と同じく、引数をもとにHTTPリクエストを行うメソッドの例

```
sendRequest(url = "", method = "GET", header = {}, query = {}, body = {})
  .then((res)=>{})
  .catch((err)=>{});
```

- メリット
    - 必要なパラメータが一目瞭然
    - [デフォルトパラメーター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Default_parameters)を設定しやすい
        - nullチェックなどが楽になる
- デメリット
    - 省略可能なパラメーターもちゃんとnullとかを設定しないといけない
      - 上の例だと、GETメソッドでリクエストするのにbodyパラメータも必要になるという感じ


### 案3: （たぶんベストプラクティス）必須パラメータ + オプションのオブジェクト


```
sendRequest(url, method, opts = {}) //optsにheader, query, bodyを入れる
  .then((res)=>{})
  .catch((err)=>{});
```

- メリット
   - 案2よりすっきり呼び出せる
       - オプションパラメータは全部or一部を省略できる
       - ここでもデフォルトパラメータを使うとちょっと楽になれる
- デメリット
 - オプションパラメーターの存在確認とかが必要


## その他

- 悩んでいる途中に以下の記事にたどり着いて解決した
 - [Best practices for JavaScript function parameters \| CodeUtopia](https://codeutopia.net/blog/2016/11/24/best-practices-for-javascript-function-parameters/)
 - [bookshelf.js](http://bookshelfjs.org/#section-Model)とかが実はそうなってたのにも後から気づいた
IntelliJ IDEAがspring-bootの起動を高速化してくれるようになった

## 対象のIDEAのバージョン

IntelliJ IDEA 2017.1 EAP
Build #IU-171.3019.7, built on February 8, 2017

かそれ以降（たぶん）

## 対象の人

![スクリーンショット_2017-02-09_18_30_04.png](https://qiita-image-store.s3.amazonaws.com/0/28162/92c4ad88-1869-ccdf-3a07-7e943e44098e.png)

↑の青い丸から起動してる人
※ `gradlew bootRun`からだと変化なしだった

## 起動するとどうなる？

以下の2つのオプションが付与された状態で起動する（多分それだけ）

- `-XX:TieredStopAtLevel=1`
- `-Xverify:none`

## gradleで起動してる人はどうすればいいの？

```groovy
bootRun {
  jvmArgs '-XX:TieredStopAtLevel=1', '-Xverify:none'
}
```

## どれ位速くなるの？

spring-bootが起動時間出してくれるのでそれを比較してみれば分かります。

![スクリーンショット_2017-02-09_18_54_43.png](https://qiita-image-store.s3.amazonaws.com/0/28162/59b1a876-93e9-f693-40a9-dd59d9def8ed.png)

## 参考

- IntelliJ IDEAのissue
> https://youtrack.jetbrains.com/issue/IDEA-166527

- spring-bootのissue
> https://github.com/spring-projects/spring-boot/issues/7571
chatworkの未読ルームを全て既読にするスニペット

# ブクマ

## 以下をブックマークに入れて押すだけ

```javascript
javascript:var d=new Date();var rid;$('ul#_roomListItems > li').each(function(i, element){rid = $(element).data('rid');$.getJSON('https://'+window.location.hostname+'/gateway.php?cmd=read&myid='+myid+'&_v='+client_ver+'&_av=4&_t='+ACCESS_TOKEN+'&ln=ja&room_id='+rid+'&last_chhkkt_id='+$('._message[data-rid='+rid+']:last  ').data('mid')+'&_='+d.getDate());});
```

# 履歴:
## 2017/02/10:
 - css構造が変わったので修正