OmniAICreator/Qiita-1.07M huggingface dataset:
<form>のCSSについておさらい（スタイルを乗せる下準備）

ざっくり&lt;input&gt;にCSSを適用してしまうと、あまり使われないマイナーなtypeにまで意図せず影響が出てしまうので、いくつかのtypeのデフォルトスタイルを温存しつつ使いたいformパーツのスタイルを揃えるCSSを考えました。

## できたもの

[Demo](https://codepen.io/torosalmon/pen/GOWGNr)
type color, range, checkbox, radioへはCSSが干渉しません。

### 解説

`-webkit-appearance: none;`
主にスマホのデフォルトスタイルを無効化します。

`box-sizing: border-box;`
レスポンシブ用にwidth:100%;を入れますが、width+paddingの併用時にボックスを飛び出してしまわないように。

`font-size: 16px;`
実寸16px以下の場合、iOSでフォーカス時にページズームが掛かってしまう。

`vertical-align: top;`
textareaがわかりやすいですが下部に余白が発生しています。vertical-alignを指定すると解消します。

```
input[type='text'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='email'],
input[type='password'],
input[type='datetime'],
input[type='datetime-local'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='time'],
input[type='number'],
input[type='file'],
textarea,
select {
    width: 100%;
    height: 2em;
}
```
type="text"系に対してwidth/heightを指定。

```
input[type='image'] {
    max-width: 100%;
}
```
type="image"のみ実寸以上に拡大してしまわないように専用指定。

```
input[type='submit'],
input[type='reset'],
input[type='button'],
button {
    height: 2em;
}
```
ボタン系は横幅いっぱい指定から除外しました。
width:100%で構わない場合はtype="text"系指定にマージできます。

```
textarea {
    min-height: 2em;
    resize: vertical;
}
```
textareaには右下をドラッグすることでユーザー側でリサイズできる機能があります。リサイズの利便性を確保しつつレイアウトへ干渉しないように縦リサイズのみ許可する制御を入れました。必要以上に縮めてしまう事も可能な為、min-heightで最小値を確保しました。

```
input[type='text'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='email'],
input[type='password'],
input[type='datetime'],
input[type='datetime-local'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='time'],
input[type='number'],
textarea,
select {
    padding-left: .4em;
    background: #fff;
    border: none;
    border-radius: 0;
}

input[type='submit'],
input[type='reset'],
input[type='button'],
button {
    background: #000;
    border: none;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
}
```
主に見栄えに関する指定。内側がキツキツなのでpaddingを設けましたが、rightに掛かるとselectの右矢印が内側に寄ってしまうのでleftのみとしました。
cursor: pointer;はtype="image"のみカーソルがpointerに変わるので、他のボタンも挙動を揃える目的です。

## type="file"について
background-colorやborderを入れてしまうとデフォルトスタイルが死ぬ上に意図したCSSも乗らないブラウザがあります。（IE,Edge系）
デザイン性を求める場合、input本体はdisplay: none;として、対応したlabel要素としてスタイリングするのが主流のようですのでここでは頑張るのをやめました。

## type="checkbox" / type="radio"について
type="file"同様、labelを用いた代替要素による表現が主流のようです。

## :valid/:invalidに関しての疑問
CSSクラス「:invalid」を使うことでエラー時のスタイル指定が可能ですが、デフォルト挙動を完全に置き換えることができずにいます。

ブラウザデフォルトの挙動

- ページアクセス状態ではエラー表示をしない
- 一度フォーカスが当たり、フォーカスが外れた際に内容に不備があるとエラースタイルが適用される

:invalid指定による問題

- ページアクセス初期状態でエラースタイルが掛かってしまう

そこで、以下の複合指定を試みました。

```
input[type='text']:not([value='']):not(:focus):invalid,
textarea:not(:empty):not(:focus):invalid {}
```

inputとtextareaでは文字列の扱いが違うので二種類セレクタを用意しました。

- 「要素が空ではない」
- 「フォーカスが外れている状態」
-  「内容に不備がある」

の条件を満たした場合に合致するはずですが、inputについては意図通りの挙動になりましたがtextareaは:not(:empty)の判定が動いていないようです。
ionicでアプリ名変更

### configファイルを修正

プロジェクトルート直下にある config.xmlファイルの<name>タグ修正する。


```
<?xml version='1.0' encoding='utf-8'?>
　　<widget id="com.hogehoge" ~~~ >

　　　　<name>before_app_name</name>
         ・
         ・
         ・
```

↓↓↓


```
<?xml version='1.0' encoding='utf-8'?>
　　<widget id="com.hogehoge" ~~~ >

　　　　<name>after_app_name</name>
         ・
         ・
         ・
```

これだけ。
あとは build するなり run するなりで修正される。


### マルチバイト文字もいける。

`<name>ほげほげ</name>`
Windows環境でMySQL Workbenchが起動できないとき

Windows環境下でMySQL Workbenchを使っていたら、起動できなくなったときの対処メモ。

# 背景

使っていたらなぜだか起動できなくなった。ダブルクリックしても管理者権限で実行しても、タスクマネージャにプロセスが現れない。

しょうがないので、アンインストールしたあとに最新版をインストールしようとしたら、「msvcr120.dllがない」というエラーが...

# 結論

https://www.microsoft.com/ja-JP/download/details.aspx?id=40784　から	
vcredist_x64.exeをダウンロードしてインストール

多分、自分のマシンのVisual Studio 2013が足りないものがあったもよう。

公式サイトの下記部分に、必要なものについて記載がありました。
http://dev.mysql.com/downloads/workbench/

```
To be able to install and run MySQL Workbench on Windows your system needs to have libraries listed below installed. The listed items are provided as links to the corresponding download pages where you can fetch the necessary files.

Microsoft .NET Framework 4 Client Profile
Visual C++ Redistributable for Visual Studio 2013
```

# 参考サイト

http://dba.stackexchange.com/questions/107052/missing-msvcr120-dll-during-the-installation-of-mysql-workbench-6-3-ce

http://loumo.jp/wp/archive/20151010000051/
Node.jsでBASIC認証

簡易的に認証をかけたいときに便利なBASIC認証。Expressでは標準の機能に用意されているようですが（使ったこと無いので詳しくは不明）ノーマルのNode.js＋httpモジュールでBASIC認証を使う方法をメモ。
## basic-auth
要は[basic-auth](https://www.npmjs.com/package/basic-auth)というモジュールがあるのでそれを使いたいのですが、サンプル通りだと動かなかった。

こんな感じにすると動く。

```js:basic_auth.js
const http = require('http')
const auth = require('basic-auth')

const name = 'username'
const password = 'pass'

const server = http.createServer(function (req,res) {
    const credential = auth(req)

    if (!credential || credential.name !== name || credential.pass !== password) {
        res.writeHead(401,{'WWW-Authenticate':'Basic realm="secret zone"'})
        res.end('Access denied')
    } else {
        res.end('Access granted')
    }
}).listen(8080)
console.log('Server listening...')
```

サンプルだと200が返ってきてしまってうまく行かなかった。なんでやろ。
ChromeBookでNode.js開発環境作成

# はじめに
もともとChromeBookに興味があったことに加えて、新しいMacノートが発売されるまでの繋ぎも兼ねて購入してみました。
（ノートが必要だったのですが購入当時新製品の発売間近との噂もあったので）
あわよくば開発できればというのがありましたが、最低限勉強会などでのメモ取りやウェブサイトの閲覧ができれば元は取れるのでダメ元だったのですが。。。

結果はいろいろハマったりもありましたが
- vim, ssh, gitが使える（vim上での日本語は使えていないですが）
- Node.jsとMongoDBも使えた
- さらにherokuのToolbeltも利用できる
- Node.jsで書いたコードをheroku localで実行できる
- もちろんデプロイもできた

JS系の勉強会であればハンズオンもいけるのではないかという大満足の結果となりました。

# 端末スペック
購入したのは
Dell Chromebook 11 (Cel2955U/2GB/16GB/11.6インチ/ChromeOS) 15Q31
Amazonにて新古品を22,800円で入手しました。

作りがおもちゃのような心許なさですが、、、値段を考えれば十分。
重さも1.3kgで十分持ち運べます。
バッテリーも10時間可能なので
土日勉強会に持っていく程度ならバッテリーを安心して置いていけます。

#セットアップ
詳細な手順については既に多くのサイトでまとめられているので流れ以外は省略します。
固有の事象に絞って記述をしようと思います。
私が行った作業はだいたい末尾の参考サイトに記載されています。

** これからインストールしようとされている方は、先に末尾の参考サイトを参考にしていただいた方が良いと思います。 **

## 開発者モード
最初から開発用に使いたいと思っていたので購入後にすぐやりました。
後で切り替えるとデータが消えるらしいのでエンジニアなら迷わずやってしまいましょう。

## crewのインストール
必要に応じてパッケージを入れます。
なお、nodeはcrewでinstallできませんでした。
パッケージは存在するようなのですが。。。
※後述する /home/chronos/user/ の再マウント（実行権限付与）をやっていなかったからのような気がします。

参考までに出力されたエラーはこちら

```
sh: npm: not found chown: cannot access ‘/{lib/node_modules,bin,share}’: No such file or directory node failed to install: `sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}` exited with 1
```

## nvmでNode.jsインストール

１点ハマったのは
NVM_DIRが /home/chronos以下になったいたのでnmv install がこけました

`export NVM_DIR="/usr/local/bin/.nvm" && nvm install v6.x.x`
 (xは任意の番号)
で解決
※こちらも /home/chronos/user/ の再マウント（実行権限付与）をしていれば発生していなかったと思います。

## heroku Toolbelt
インストール自体は成功したのですがheroku loginしようとすると
以下のようなエラーが。

```
/home/chronos/user/.local/share/heroku/cli/bin/heroku: Permission denied ! Heroku client internal error. ! Search for help at: https://help.heroku.com ! Or report a bug at: https://github.com/heroku/heroku/issues/new
```

```
Error:       Permission denied - /home/chronos/user/.local/share/heroku/cli/bin/heroku (Errno::EACCES)
Command:     heroku 
```

結局末尾の参考サイトに助けられ

`sudo mount -i -o remount,exec /home/chronos/user/`

これでherokuがinstallされたディレクトリに実行権限を与えて解決しました。

## MongoDB
crewであっさりinstallできたのですが
ディスク容量の問題で
journal機能をoffにしました。

mongod.conf

```
storage:
  dbPath: .db
  journal:
    enabled: false
```

# 最後に
上記でサンプルコードを動かしたり、既存のPJは上手く動いてくれていますが、ゴリゴリ実装に利用しているわけではないので、また何か不具合に遭遇したら追記していければと思っています。

# 参考
作業時に参考にさせていただいたページです
[Chromebookで開発環境を整えるためにしたこと](http://qiita.com/HirokiMiyaoka@github/items/f72acbee69fcea2fa297)
[chromebookにnode.jsを入れる](http://qiita.com/y__sama/items/a54608fbdb63dc6cccbc)
MacのC++11環境においてグローバル名前空間でwaitがぶつかる

# はじめに

Macの`g++ -std=c++11`と`clang++`で、グローバルな名前空間で`wait`というシンボルが、 `/usr/include/sys/wait.h`に定義されているwaitとぶつかったことの覚書。

# 環境

* g++ (MacPorts gcc49 4.9.4_0) 4.9.4
* clang++ Apple LLVM version 7.0.2 (clang-700.1.81)

# 現象

MacOSXのターミナルで、以下のようなソースコードをコンパイルする。

```cpp:test.cpp
#include <iostream>
int wait; //←これがエラーになる
```

すると、g++では`-std=c++11`をつけた時、clang++ではそのまま食わすとエラーとなる。

```shell-session
$ g++ -c test.cpp # 問題無くコンパイルできる

$ g++ -std=c++11 -c test.cpp # エラーになる
test.cpp:2:5: error: 'int wait' redeclared as different kind of symbol
 int wait;
     ^
In file included from /usr/include/stdlib.h:65:0,
                 from /opt/local/include/gcc49/c++/cstdlib:72,
                 from /opt/local/include/gcc49/c++/ext/string_conversions.h:41,
                 from /opt/local/include/gcc49/c++/bits/basic_string.h:2848,
                 from /opt/local/include/gcc49/c++/string:52,
                 from /opt/local/include/gcc49/c++/bits/locale_classes.h:40,
                 from /opt/local/include/gcc49/c++/bits/ios_base.h:41,
                 from /opt/local/include/gcc49/c++/ios:42,
                 from /opt/local/include/gcc49/c++/ostream:38,
                 from /opt/local/include/gcc49/c++/iostream:39,
                 from test.cpp:1:
/usr/include/sys/wait.h:248:7: note: previous declaration 'pid_t wait(int*)'
 pid_t wait(int *) __DARWIN_ALIAS_C(wait);
       ^

$ clang++ -c test.cpp #エラーになる
test.cpp:2:5: error: redefinition of 'wait' as different kind of symbol
int wait;
    ^
/usr/include/sys/wait.h:248:7: note: previous definition is here
pid_t   wait(int *) __DARWIN_ALIAS_C(wait);
        ^
1 error generated.
```

他の環境(LinuxやCygwin)ではエラーにならないが、'wait.h'をインクルードすればもちろんぶつかる。

```cpp:test5.cpp
#include <wait.h>
int wait; // ← MacOSX 以外でもエラーになる
```

# まとめ

(少なくともうちの)MacOSXでは、C++11環境に限り`iostream`をインクルードすると`wait.h`がインクルードされ、結果として`wait`がグローバル名前空間に放り出されるらしい。他のLinuxやCygwinなんかではこの問題が起きない。なにこれ？うちだけ？
ubuntu 16.04 or raspberry pi 3 でのNFSの設定

# はじめに
以下の説明は、IPアドレス 192.168.1.1 のサーバーと IPアドレス 192.168.1.2 のクライアントでNFS共有をする時の設定を意図しています。

# サーバー側
まず、サーバーをインストールします。
``
sudo apt-get install nfs-common nfs-kernel-server
``
次に、/etc/exportsを編集します。
/home 以下を共有することを想定しています。
``
sudo vi /etc/exports
``
中身に以下の行を追加します。
``
 /home 192.168.1.0/255.255.255.0(rw,async,no_roo_squash,no_subtree_check)
``
サービスを起動します。
``
sudo service rpcbind start
sudo service nfs-kernel-server start
``
ubuntuでも、raspberry piでもrpcbindがデフォルトでは動いていないみたいです。そのため、最初にrpcbind を起動しています。
その後、nfsサーバーを起動しています。

# クライアント側
まず、クライアントをインストールします。
``
sudo apt-get install nfs-common
``
次に、/etc/fstabを編集します。
``
sudo vi /etc/fstab
``
また中身に以下を追加します。
``
192.168.1.1:/home /home nfs defaults,soft,intr,clientaddr=192.168.1.2
``
以下のコマンドで確認してください。
``
sudo service rpcbind start
sudo mount -a
``
ubuntuでも、raspberry piでもrpcbindがデフォルトでは動いていないみたいです。そのため、最初にrpcbind を起動しています。

# 参考
http://askubuntu.com/questions/771319/in-ubuntu-16-04-not-start-rpcbind-on-boot
http://qiita.com/hdoi/items/9cff4f840939636df807
digdag変数の評価

以下、同じ現場の方に教えていただいた内容
digファイルの中にJS処理を書いたときは型に要注意

---

```test1.dig
_export:
  foo: ${1 + 1}
  typeOfFoo: ${typeof foo}

+task:
  echo>: var 'foo' is '${foo}'. type of var 'foo' is '${typeOfFoo}'.
```

```test1.digの結果
var 'foo' is '2'. type of var 'foo' is 'string'.
```

足し算した後はstringになった

---

```test2.dig
_export:
  foo: ${1 + 1}
  typeOfFoo: ${typeof foo}
  incr: ${foo + 1}

+task:
  echo>: type of var 'foo' is '${typeOfFoo}'. Then, var 'incr' is concatenated '${foo}' and '1' = '${incr}'.
```

```test2.digの結果
type of var 'foo' is 'string'. Then, var 'incr' is concatenated '2' and '1' = '21'.
```

stringに対する「+」は文字列連結の意味になる
数値計算したかったら「incr: \$\{parseInt(foo) + 1\}」だと2になる

---

```test3.dig
_export:
  foo: 1
  typeOfFoo: ${typeof foo}
  incr: ${foo + 1}

+task:
  echo>: type of var 'foo' is '${typeOfFoo}'. Then, var 'incr' is ${incr}.
```

```test3.digの結果
type of var 'foo' is 'number'. Then, var 'incr' is 2.
```

YAMLの中で単純に評価するとそれはstringになる
ベタに書いてたら、ちゃんと型変換される
なので、incr: ${parseInt(foo + 1)} とかしてもincrはString
JSでコールバック関数を外に定義するときに使えるbind関数

#JSで無名関数を外に出すときに使えるbind関数

例えばnodeJSで書かれた以下のようなコードがあり、
start関数の引数に指定されている無名関数をonRequest()として外に定義したいとします。

```js
var http = require('http');
var url = require('url');

var start = function(router) {
	http.createServer(function(req,res) {
	// routerにパスを渡す
	var pathname = url.parse(req.url).pathname;
	router.route(pathname)

	res.writeHead(200, {"Content-Type": "text/plain"});
	res.write("hey");
	res.end();
}).listen(8888);
	console.log('Server has started.');
};

exports.start = start;
```

無名関数にはrouterというオブジェクトを渡してあげないといけないけど、
reqやresという引数がすでにあるので onRequest(router) のような書き方では渡せません。

そこで、以下のようにbind関数を使うと引数を渡すことができます。

```js
var http = require('http');
var url = require('url');

var onRequest = function(router,req,res) {    // 引数としてrouterを前に追加する
	// routerにパスを渡す
	var pathname = url.parse(req.url).pathname;
	router.route(pathname)

	res.writeHead(200, {"Content-Type": "text/plain"});
	res.write("hello");
	res.end();
};

var start = function(router) {
	http.createServer(onRequest.bind(this, router)).listen(8888);    // 関数のbind関数を使用してrouterを渡す
	console.log('Server has started.');
};

exports.start = start;
```
matplotlibのanimation.FuncAnimationを用いて柔軟にアニメーション作成

pythonのmatplotlibには、

- animation.FuncAnimation

という柔軟にアニメーションを作成することが出来る関数が存在する。
この関数の使用方法。


# **サンプルプログラム**
```sample_animation.py
import matplotlib.animation as anm
import matplotlib.pyplot as plt
import numpy as np

fig = plt.figure(figsize = (10, 6))
x = np.arange(0, 10, 0.1)

def update(i, fig_title, A):
	if i != 0:
		plt.cla()                      # 現在描写されているグラフを消去

	y = A * np.sin(x - i)
	plt.plot(x, y, "r")
	plt.title(fig_title + 'i=' + str(i))


ani = anm.FuncAnimation(fig, update, fargs = ('Initial Animation! ', 2.0), \
	interval = 100, frames = 132)

ani.save("Sample.gif", writer = 'imagemagick')
```



以上のコードを実行すれば、以下のようなアニメーションのファイル"Sample.gif"が生成されるはず。
![Animation.gif](https://qiita-image-store.s3.amazonaws.com/0/88804/97a44cfe-e767-6e57-ba91-41057e8d56c0.gif)


## **サンプルプログラムの解説**
肝となるのは

```py
ani = anm.FuncAnimation(fig, update, fargs = ('Initial Animation! ', 2.0), \
	interval = 100, frames = 132)
```
の一文。


### 第1引数 fig
figureオブジェクト。このオブジェクトに、図(アニメーション)に関する命令を与えていく。

### 第2引数 update
アニメーションを構成する図1枚1枚を作成するコールバック関数。
アニメーションを作成するということは複数の図を作成してそれをつなぎ合わせるということであるが、```FuncAnimation```関数では、それを「図を作成する関数を複数回呼び出す」という方法で実現している。
```update```関数の決まりは以下の通り。

 - ```FuncAnimation```関数よりも前で定義しておく。
 - 2回目以降にこの関数が呼び出されるときに、図が初期化されるようにしておく。
    - 上記サンプルプログラムの```plt.cla()```の部分がそれに対応
 - この関数には少なくとも1つ引数を設ける。
    - この関数の第1引数(上記サンプルプログラムでは```i```)は、この関数が呼び出される毎に0から1ずつ増えていく整数である。
    - この関数に2つ以上の引数を設けたい場合には、```fargs```で指定してやる(後述)。


### オプション fargs
第2引数の```update```関数に2つ以上の引数を設けたい場合に、2つ目以降の引数を指定することが出来るオプション。
上記のサンプルプログラムの例だと、```update```関数の第2引数```fig_title```に```"Initial Animation!"```が、第3引数```A```に```2.0```がそれぞれ渡される。

### オプション interval
アニメーションで図が切り替わる時間間隔を指定することが出来る(単位はミリ秒)。
```interval = 100``` とすると、「100ミリ秒に1回図が切り替わる」ようになる。

### オプション frames
update関数を呼び出す回数を指定する。
```frames = 132``` とすると、```update```関数は132回呼び出され、これによって生成されたgifアニメは132枚の静止画を繋ぎ合わせたものになる。
(```update```関数の第1引数の```i```はその間0,1,...,131の値をとる)


# 参考URL
 - http://matplotlib.org/api/animation_api.html
 - http://cflat-inc.hatenablog.com/entry/2014/03/17/214719
 - http://qiita.com/Tatejimaru137/items/3fdcc38cf8247b7056aa
 - http://qiita.com/yubais/items/c95ba9ff1b23dd33fde2
サブディレクトリをループ

### サブディレクトリすべてになんらかの処理


```bat:サブディレクトリへの処理.cmd

pushd %~dp0

timeout /t 10

for /f "delims=;" %%i in ('dir /ad /b ') do @(
	echo %%i

	pushd %%i

	rem 何らかの処理

	popd
)


timeout /t 60

```
pingが通るときだけexe起動

## 社内や家にいるときだけ起動

WINDOWSのスタートアップなどで、PCの起動時にメーラーなどが立ち上がるようにしてある方も多いかと思います

普段からノート型PCを使用していて、たまに外に持っていった場合、社内のメールサーバーに接続できないのにいちいちメーラーが立ち上がって、メールサーバーに接続できないとアラートが上がってきたりしてうっとおしいです

社内にいるのかをメールサーバーが見つかるかどうかで判別しています

家の場合でもNASやルーターが見つかるかどうかで判別できるはずです

外で使用するときはポケットルーターやテザリングで使用するので通信料節約のためにメーラーが立ち上がってほしくない場合などにも利用できると思います




```vbnet:社内でのみ起動.vbs

'Const vbHide = 0             'ウィンドウを非表示
'Const vbNormalFocus = 1      '通常のウィンドウ、かつ最前面のウィンドウ
'Const vbMinimizedFocus = 2   '最小化、かつ最前面のウィンドウ
'Const vbMaximizedFocus = 3   '最大化、かつ最前面のウィンドウ
'Const vbNormalNoFocus = 4    '通常のウィンドウ、ただし、最前面にはならない
'Const vbMinimizedNoFocus = 6 '最小化、ただし、最前面にはならない

Const targetAddress = "192.168.11.1"         '社内LAN内のアドレスやルータのアドレス
Const targetExe = """C:\Program Files\Windows Live\Mail\wlmail.exe"""    '起動するexeのフルパス

Set objWMIService = GetObject("winmgmts:")
Set PingSet = objWMIService.ExecQuery ("Select * From Win32_PingStatus Where Address = '" & targetAddress & "'")

For Each Ping In PingSet

  Select Case Ping.StatusCode
    Case 0
      ''' WScript.Echo "Success"
      CreateObject("WScript.Shell").Run targetExe, 6, False
    Case 11010
      ''' WScript.Echo "Request Timed Out"
    Case Else
      ''' WScript.Echo "エラー"
  End Select

Next

```
[Android]AndroidでGeocoderを利用しようとして、java.io.IOException: Service not Availableになった

Android アプリで位置情報の緯度経度を取得後、住所を得るため、Geocoder クラスを利用。
` Geocoder.java
public List<Address> getFromLocation(~)
`
java.io.IOException : Service not Availableになって、住所が取得できない...
一定の確率?で起こりうることらしく、端末を再起動したら治った。
端末はNexus6P、Android6.0

以下リンクより
[Android Geocoder を利用しようとすると java.io.IOException Service not Availableになる](http://onlineconsultant.jp/pukiwiki/?Android%20Geocoder%20%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E3%81%99%E3%82%8B%E3%81%A8%20java.io.IOException%20Service%20not%20Available%E3%81%AB%E3%81%AA%E3%82%8B)
[stackoverflow](http://stackoverflow.com/questions/18249094/geocoder-service-not-available)
フロントエンドのデバッグ



## IE環境

### [modern.ie](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)

実機、F12で開発者ツール

> 参考
[MacのVirtualBoxで起動したWindowsで:や@が出せない場合の出し方](http://hacknote.jp/archives/7710/)


## iOS環境

### [Web Inspector](https://developer.apple.com/safari/tools/jp/)

XcodeのSimulatorを立ち上げる
safariを開いて、開発 > Simulator > ページ選択
Simulator画面で表示されているサイトのインスペクタが見られる

実機のログを見る場合はこちら参照
https://www.islog.jp/entry/ios-safari-web-inspecter/


## Android環境

### [Genymotion](https://www.genymotion.com/)

あるに越したことはないが、あまり信用できない

### chrome

端末で「 端末設定 > 開発者向けオプション > USBデバッグ 」

USB接続して`chrome://inspect/`を開く

> 参考
[AndroidのChromeでフロントエンドを高速デバッグ](http://qiita.com/okkunokkun18/items/2e6cc3088f6933238a77)



## SP共通

### [Browsersync remote debug](https://www.browsersync.io/)

ログの見られない端末をリモート操作するときに便利

`http://localhost:3000/`で作業中なら`http://localhost:3001/`にアクセス

`Remote Debugger (weinre)`をオンにするとインスペクタを見られるようになる

オプション
https://www.browsersync.io/docs/options/

> 参考
[【追記・訂正あり】【試してみた】BrowserSyncが2.0.1にバージョンアップしてた【超絶進化が止まらない】](http://wp-e.org/2015/02/12/5773/)
[BrowserSyncが2.0になって設定画面ができてた](http://qiita.com/katapad/items/3b1725d8fa52c7c32214)


## キャッシュ

### chrome

- シークレットモード

`command + shift + N`


- リロード

通常は`command + shift + R`で「ハード再読み込み」

インスペクタを表示した状態でリロードボタンを右クリックすると
「キャッシュの消去とハード再読み込み」でキャッシュを強めに消去できる


> その他の参考
[JavaScript開発における多段式エラープルーフについて](http://orgachem.hatenablog.com/entry/2016/05/24/213807)
[デバッグの技術](http://postd.cc/the-art-of-debug/)
カラム型TINYINTの場合にActiveRecord::Enumを使いたい

ハマったのでメモ。
まあRailsで１から作っている場合は遭遇しないかもしれませんが・・・。
## ActiveRecord::Enumとは
割愛。
http://ruby-rails.hatenadiary.com/entry/20150710/1436461745

## 問題
``` ruby
class User < ApplicationRecord
  enum state: { pending: 0, active: 1 }
end


user = User.new(state: :pending)
# => #<User:0x007fbdbf882a78 id: nil, state: 'pending'>
user.save!
# => true
user
# => #<User:0x007fbdbf882a78 id: 1, state: nil>
``` 
例外も発生せず、データベースを直接覗いてもデータはきちんと入っているのに、`save!`すると`state`が`nil`になった!?!?

## 原因
`state`カラムがTINYINTだった。ActiveRecordは、カラムがTINYINT(1)の場合、自動的にbooleanとみなしてキャストするらしい。今回の場合（enumの場合）、enumのvalueにしていたのが数値だったために「（キャストした値）true/falseに該当するlabelがない」=> `nil`となっていた様子。

## 解決策
``` ruby
class User < ApplicationRecord
  attribute :state, ActiveRecord::Type::Integer.new
  enum state: { pending: 0, active: 1 }
end
```
これでActiveRecordが`state`カラムを整数値としてキャストしてくれるようになる。
参考（https://blog.kazu69.net/2015/10/22/active-record-tinyint/）
（ちなみにリンク先で「TINYINT(1)はbooleanと同じなので0 か 1 しかとらない」とありますが、TINYINT(1）は場合-128~127 の値をとれます。booleanも同様）
PHPのSlim3でアンエスケープ処理

# はじめに
仕事関係で軽量のフレームワークを使いたく、先日Slim3を使い始めた未熟者。
そのため、間違ってる箇所があるかもしれません。あしからず。

# やりたいこと
routes.phpなどから渡された値をViewで出力する際に、デフォルトではサニタイジング(エスケープ)される。
サニタイジングしたくない場合もありますよね？ 今回は、渡された値をアンエスケープする方法を記述。

``` lang:変更前のView
<div class="row">
   {{ value }}
</div>
```
これを

``` lang:変更後のView
<div class="row">
   {{ value|raw }}
</div>
```

こうじゃ！
これだけ。SlimというかTwigで解決。

# 参考
[【 Stack Overflow 】 Unescape or html decode in Twig (PHP Templating)](http://stackoverflow.com/questions/15453579/unescape-or-html-decode-in-twig-php-templating)
誰得、バーコードの13桁目を生成するLambdaで動くNodeスクリプト

# 概要
JANコードのチェックデジットを生成したくてnodeで書いてみた（誰得

# 前提条件
http://www.dsri.jp/jan/check_digit.html
ここに書いてある計算方法を元に13桁目（チェックデジット）を計算します。

[計算方法]
①与える12桁の数値を逆順にする（与えた数の先頭を2とする-チェックデジットが１番めとなるため-）
②逆順の偶数番目の数を全て足しあわせ、３倍するa
③逆順の奇数番目の数を全て足し合わせるb
④aとbを足し合わせた数の下一桁が0なら末尾は0となる
④’ aとbを足し合わせた数の下一桁(c)が0以外なら10-cが末尾となる


# 実装
Lambdaファンクションから呼び出す関数として実装したかったので呼び出される側として書きました。

```txt:構成
index.js
function/checkDigit.js
```

#### 呼び出し元

```javascript:index.js
'use strict';

var aws = require('aws-sdk');
var CheckDigit = require('./function/CheckDigit.js');

exports.handler = function (event, context) {
    var janCode = '123456789012';
    CheckDigit(janCode, function(data){
        console.log(data);
        context.succeed();
    });
};
```

#### チェックデジット生成関数

```javascript:checkDigit.js
//12桁の数字を与える

var CheckDigit = function (jan, callback) {
    getReverse(jan, function (req) {
        getTotal(req, function (sumEven, sumOdd) {
            getDigit(sumEven, sumOdd, function (digit) {
                callback(jan + digit);
            });
        });
    });
};
module.exports = CheckDigit;


// 逆順にする
function getReverse(req, callback) {
    callback(req.split("").reverse().join(""));
}

// 偶数列、奇数列をそれぞれ足し合わせて返す
function getTotal(req, callback) {
    var arr = req.split("");
    var evenList = [];
    var oddList = [];
    var len = arr.length;
    var lim = 0;
    for (var i = 0; i < len; i++) {
        lim++;
        var num = arr[i];
        if (i % 2 !== 0) {

            evenList.push(Number(num));
        } else {
            oddList.push(Number(num));
        }
        if (lim === len) {
            var eve = evenList.reduce(function(a, b){ return a + b });
            var odd = oddList.reduce(function(a, b){ return a + b });
            callback(eve, odd * 3);
        }
    }
}

// 偶数の合計と奇数の合計を足した末尾を使ってチェックデジットを返す
function getDigit(sumEven, sumOdd, callback) {
    var sum = sumEven + sumOdd;
    var end = Number(String(sum).slice(-1));
    if (end === 0) {
        callback('0');
    } else {
        var req = 10 - end;
        callback(String(req));
    }
}
```
5分でやっつけるシェルスクリプト（DBバックアップ編）

DBを定期的にバックアップする必要があったので簡易的に実装。
初心者感溢れるスクリプトになったが改良は未来の自分に託すことに。超がんばれ

まず最低限必要な知識
#crontab
定期的にコマンドを自動実行してくれる勤勉な子。
http://www.server-memo.net/tips/crontab.html

#シェルスクリプト
コマンドを複数書き連ねてプログラムのように実行できる。

##スクリプトの基本的な書き方
http://qiita.com/zayarwinttun/items/0dae4cb66d8f4bd2a337

##曜日取得
`date +%w`でいけた
http://qiita.com/bsdhack/items/2884a232bf49dbd7988c

##変数の使い方
ちょっと癖があります
http://shellscript.sunone.me/variable.html


#mysqldump
DBをバックアップするコマンド
http://qiita.com/morizyun/items/f45dc580bac0ebba79ab


```bash
#!/bin/sh
# 曜日で連番しながらバックアップを保存する
# 一週間したら情け容赦なく上書きされていくよ

# 改行コードはLinux(LF)にしないと死に至る
# プログラミングのノリでイコールの前後にスペース入れると死に至る
# コマンドの返り血を変数に渡したいときはコマンドを``で包囲する
w=`date +%w`
f=/var/usr/hoge/backup_${w}.sql

# -pの後ろに半角スペースを入れると死に至る
mysqldump -u username -ppaswwwwwword tablename > $f

# バックアップ日のログを保存する
l=/var/usr/hoge/backup.log
d=`date`
echo backup as ${f} at ${d}>>$l
```
後はこの子をcrontabでぐるぐるしてあげればよさげ。

```bash
crontab -e

# DBバックアップタスク
34 3 * * * /bin/sh /var/usr/hoge/backup.sh
```

実行されると
`/var/usr/hoge/backup_0.sql`、`/var/usr/hoge/backup_1.sql`、と１週間分連番で保存されます。
翌週以降は上書きされます。
実行ログは`/var/usr/hoge/backup.log`に保存されます。延々と追記するだけの簡易版なので実運用する際はファイル切り替えしないと（何かあったとき）つらい。
CentOS7 に最新の tmux を導入



CentOS7から tmux が CentOSの標準レポジトリの仲間入りして、
yum で簡単にインストール出来るようになりましたが、1.8系と古く、
最新機能が使えないので、2.x を CentOS7の最小環境に導入す 
るための必要最低限のコンパイルメモです。

## 前提(実行環境)

* 以下の環境で実施しました。

```
[centos@ip-172-31-17-XXX ~]$ cat /etc/redhat-release
CentOS Linux release 7.2.1511 (Core)
[centos@ip-172-31-17-XXX ~]$ uname -a
Linux ip-172-31-17-111 3.10.0-327.10.1.el7.x86_64 #1 SMP Tue Feb 16 17:03:50 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
```

## 手順


### 最新のソースコードを入手
   
   公式ページ(https://tmux.github.io/) から最新のソースコードを入手します。
   
   ```
   curl -kLO https://github.com/tmux/tmux/releases/download/2.9/tmux-2.9.tar.gz
   ```

### コンパイルに必要な依存のモジュールインストール

   ```
   sudo yum -y install gcc libevent-devel ncurses-devel
   ```

### 解凍とコンパイル

   ```
   tar -zxvf tmux-2.9.tar.gz
   cd tmux-2.9
   ./configure
   make
   sudo make install
   ```

### 完了
   
   インストールできました！
   
   ```
   [centos@ip-172-31-17-XXX tmux-2.9]$ tmux -V
   tmux 2.9
   ```
Windows7 > zipファイルの解凍 > ファイル日付が現在にならないように

```txt:動作環境
Windows 7 pro 32bit
```

270MBのzip圧縮されたファイルの解凍。
ファイルはdropboxからダウンロードしたもの。

### ダブルクリック + 移動

zipファイルをダブルクリックして、移動をしてみた。

処理が終わらない。失敗。

### ダブルクリック + コピー

zipファイルをダブルクリックして、コピーしてみた。

処理が終わるが、ファイル日付がすべて「現在」になる。失敗。

### 右クリック + すべて展開

zipファイルを選択し、右クリックして「すべて展開」してみた。

処理が終わるが、ファイル日付がすべて「現在」になる。失敗。

### その他

7-Zipを使って展開したところ、ファイル本来の日時として展開できた。成功。
プライベートDocker-Registryにhttpで接続 [Docker-Toolbox Windows]

##対象のプライベートDocker-Registry

my-docker-registry:5000
とした場合

##Linuxの場合

```file:/etc/sysconfig/docker
INSECURE_REGISTRY='--insecure-registry my-docker-registry:5000'
```

##Docker-Toolbox Windowsの場合

例)DockerToolbox-1.12.2.exe

C:\Program Files\Docker Toolbox\start.sh
の60行目に　**--engine-insecure-registry my-docker-registry:5000** を追加する。

```file:start.sh 
  "${DOCKER_MACHINE}" create --engine-insecure-registry my-docker-registry:5000 -d virtualbox $PROXY_ENV "${VM}"
```

※既にViertualBoxにdefaultという名前のdocker-machineがある場合
--

1. Virtualboxで停止→削除
2. ![docker-quickstart.jpg](https://qiita-image-store.s3.amazonaws.com/0/71525/a167abbd-5d8e-1b05-69cf-5510851f40d3.jpeg)を再びダブルクリック

これで **--engine-insecure-registry**　指定した、docker-machineが作り直される。
半角ハイフンのつらみ


見た目にはほとんどわからないけど全部別物だしもちろんSQLやなんかの文字列比較にはヒットしないハイフンがこの世には多すぎるよ.
DBに混ざって入ってたりしたら大変だね.

自分が今いじってるDBには以下の4種類が入ってたよ. しばらく気付けなかったよ.


```bash
$ echo '-' | od -i
> 0000000                10                                                
> 0000001

$ echo '‐' | od -i
> 0000000         177242338                                                
> 0000004

$ echo '−' | od -i
> 0000000         177375458                                                
> 0000004

$ echo '—' | od -i
> 0000000         177504482                                                
> 0000004
```
【ニコ生駆動開発】会社の人たちとUnityでクソゲー作ってニコ生配信した話

こんにちは  

株式会社ソノリテでエンジニアをやっているt-zouchiです。

先日より、会社の人たちとタイトルに書いてある通り、Unityでクソゲーを作ってニコ生配信を行っています。(まだ1回しかやってないけど…)

今回は、配信に向けて自分のやったことを中心にまとめたいと思い、ペンを握った次第です。
何かイベントを開こうと思っている方の参考になれば幸いです。

ニコ生配信に向けて開発を行う手法のことをニコ生駆動開発と名付けた
毎月１回ニコ生をやるからそれまでにゲーム一本作るというのが基本コンセプト
「月末のクソゲー」と覚えて頂けるとありがたいです。
#登場人物とか
- 自分  
発案者、Maker Fairとかが好き、かみのけがもじゃもじゃ
Unityはズブの初心者
- 社長  
偉い、ヒゲ、カイザー、ティンカーゲス、  
独裁者気取りたくて赤いマントをたまに着る
- 元プロゲーマー  
イタリア人、マネージャー  
エロ漫画家志望で壁サー目指している
- ゲーム作るひとたち  
 会社の同僚、何人かいる  
Unityの経験の有無は人それぞれ
- 専務  
ねこ、たまに椅子を毛だらけにする  
社長と同伴出勤しているが、社長の椅子を狙っている  
今回は特に出番はない
- ゲーム部屋  
オフィスの物置を改造して作った部屋  
普段はガンダム動物園とかを配信している

#事の発端
自分が早めの夏休みを取得したが、実家に帰ったがやることも特になかったため、Unityで遊んでいた。
サンプルコード写経しながらゲーム簡単に作れるな～すごいな～(小並感)
なんて思っていた。

色々ググっていたら
【Unity】素人が7日間クソゲーを作り続けてわかったこと
http://uinyan.com/unity_7days_kusoge_challenge/
に目が止まった
ほうほう、
>人に見てもらうのは大切
>モチベーションの維持は大変

一人でゲーム作ってもあんまりおもしろくないしと思い
休み明け、社内SNS(Yammer)に
「Unityでクソゲーを作り、プレイ実況を配信するニコ生をやるのはどう？」的なことを書き込んだら、結構反応があった。
社長に「こういうのやっていい？」って聞いたらノリノリでOKが出た、マジか…!!
そして、とりあえずやってみることになった。

# 配信に向けてやったこと
### 人を集める  
Yammerに書き込んだ時点で元プロゲーマーが配信してくれることになった。
ゲーム作るひとたちには、全社メールで情報を連絡してから、興味持っていると言ってくれた人に直接コンタクトをとった。
### 開発環境とかを決める  
自分はゲーム開発経験は無いから、ほんのちょっとだけ触った事のあるUnity一択だった  
Unity経験のある人は数人いた。
バージョン管理は社内でGitLabは使っているが全員が使っていない&ゲーム作るのは仕事ではないということでGitHubを使うことにした
### 情報共有手段を考える  
Slackを使っている、チャンネルを作ってそこでやり取りしている
### ゲームの公開方法を決める  
よくわかんないサイトに作ったものを上げるのは嫌だったから
WebGLビルドしてGitHubのgh-pagesブランチで公開することにした
参考：http://qiita.com/tanaka_lit/items/c32760e1cc2ba01e8f9a
フォルダ階層分けてindex.html上げればひとつのリポジトリに複数のページを置くこともできることが分かった
せっかくだからnikonamakugou というorganizationを作った
今は、配信日ごとにリポジトリを作成し、それぞれの配信日ごとにゲームを格納している。
ひとつのリポジトリに作ったゲーム全部ぶら下げていきたかったけど、容量が恐ろしいことになると思ったから運用で回避する方針にしている
### 環境構築の手順書を作る  
開発していない部署の人も参加してくれる事になったので、READMEを書いた
UnityとGitの環境構築の手順とかをまとめた
README：https://github.com/nikonamakudou/introduction
実際にやってみるとうまくいかないから、フォローに走り回った
### ゲームを作る
README書いたりしてたら時間が溶けて行ったけどなんとか作り上げた
素晴らしきクソゲーが生まれた

# ニコ生配信を行う  
第1回配信は9月末にやった
場所は会社のゲーム部屋
ソノリテ公式チャンネルでやっている
集まったゲームは2本、最初だしこんなもんだろう

配信内容は元プロゲーマーがゲームをプレイしツッコミに開発者が答えていく感じ 
元プロ「ここクソじゃねーかよ」
ぼく　「あーここは時間なかったからですね」
こんな感じの雑なやり取りを1時間ぐらいダラダラとやった、
見た人からはおもしろいと言ってもらえた

30分持たなかったらどうしようって思っていたけど、案外なんとかなった
作ったゲームはこちらで公開中
https://github.com/nikonamakudou/games

#まとめ
ふと思いついたことを実際にやってみて、ゲームを作るっていう作業は案外簡単で、その準備とか、参加者との調整のほうが大変だった
特にREADMEとかREADME
ニコ生やる環境があって、話がサクサク進んでいったのは大きいと思っている

配信やっていたら覗きに来てくれた人も楽しそうにしていたのがすごく印象的だった
ヘボコンとかの楽しさに近い感じじゃないかと勝手に思っている
クソゲーと銘打って自分からハードルを下げたのが良かったのかもしれない

近況としては一回やってみて、ゲーム作りたいって言ってくれる人が少し増えた
あと、何故か音ゲー作るから作曲するとか、萌えキャラ作ろうみたいな話も出ていておもしろい
配信もそのうちやるので見て欲しい

最後になりましたが、ご協力いただいているみなさまにお礼申し上げます
fileIO > ファイルの日付 > 取得方法によるファイル日付の違い > コピー処理に注意

```txt:動作環境
Windows 7 pro
```

Dropboxに限らないかもしれないが、フォルダ階層を持つファイルをzip圧縮したものを取得した場合。

1. zip圧縮ファイルを解凍し移動
   - ファイル更新日時は「元の日時」のまま
2. zip圧縮ファイルを解凍しコピー
   - ファイル更新日時は「現在の日時」になる

上記の2つの場合において、「ファイル更新日時をチェックして最近1週間のファイルをコピー」処理をした時

1. すべてのファイルをコピー
   - 例：700MBのコピーが発生
2. 最近1週間のファイルのコピー
   - 例：数MBのコピー

運用上は2の処理になると思われるが、1のようなファイルの取得をした場合は処理が固まったようになる。

ファイルコピー時のプログレスバーを表示するなど何らかの検討が必要かもしれない。

ファイルやフォルダの命名規則に日時情報を含む場合はそれをコピー時のファイル選択に使えばいいが、一方でそれをするとコピー処理の汎用性はなくなる。
【Android】GCMとFCMを両方入れるとPush通知が2回届く問題

GCM(Google Cloud Messaging)とFCM(Firebase Cloud Messaging)を共存して使おうとしたらハマった点があったのでそのメモ

## 背景
- 今回、FCMの端末単位でサーバーからPush通知を送る仕組みがほしいためFCMを導入することになった
- 今まではGCMを使ったPush通知サービスを導入して利用していた
  - 全体や一部のセグメント向けのPush通知はこのサービスを使うため残しておく
  - まだFCM対応しておらずGCMを残しておく必要がある

## 問題
- FCMからPush通知を打つと通知が2回出てしまう
  - ただし、GCMを使ったPush通知サービスからPush通知を打っても1回しかでない

## 原因
- GCMのReceiverがFCMのPush通知をフックしてPush通知を表示させていた

## 対処法
- `GcmReceiver`を継承したReceiverクラスを作成し、FCMからのPush通知だった場合は通知を出さないように制御する

### コード
```kotlin
class AppGcmReceiver : GcmReceiver() {
    private val firebaseSenderId: String = "xxxxxxxxxxxx" // FirebaseのSenderId

    override fun onReceive(context: Context?, intent: Intent?) {
    　　val senderId = intent?.getStringExtra("from") // senderIdはExtraにfromというkeyで格納されている
    　　
        // Firebaseからの通知だった場合は弾く
        if (intent?.getStringExtra("from") == this.firebaseSenderId) {
            return
        }
        
        super.onReceive(context, intent)
    }
}
```
FirebaseのSenderIdはコンソールの設定 -> クラウドメッセージング -> 送信者 ID で確認することができる

### AndroidManifest
通常通りGCMを設定すると、`android:name`には`com.google.android.gms.gcm.GcmReceiver`が設定されているので、
今回作成した`GcmReceiver`を継承したクラスのパスに置き換える

```kotlin
<receiver
    android:name= ".app.receiver.AppGcmReceiver"
    android:exported="true"
    android:permission="com.google.android.c2dm.permission.SEND" >
    <intent-filter>
        <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        <category android:name="${applicationId}" />
    </intent-filter>
    <intent-filter>
        <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
        <category android:name="${applicationId}" />
    </intent-filter>
</receiver>
```

以上でFCMからのPush通知は1回しか表示されないようになる

他に良い方法がある気もするのであれば知りたい...
Macbook Pro 13インチでも疑似解像度1920x1200を使えるようにする(Sierra版)

今までEl Capitanを使っていましたが、なんか勝手にSierraのインストーラーを突っ込まれ、Twitterでも「Sierraのほうがいい」と言われたのでSierraにしました。

TimeMachineのバックアップもありましたし、更新自体は問題なく終わったのですが......

#なんか解像度がおかしくね？
今までEl Capitanではタイトルのように疑似解像度1920x1200で使用してました。
それがSierraにしたら勝手に設定ファイルが元に戻され、解像度も1280x800に戻されていました。
これでは非常に使い勝手が悪いです。ということで1920x1200に戻すことにしました。

#うまくいかない......
El Capitanのときも参考にさせてもらったサイトを確認しながら行ったのですが、なぜかうまく行きません。
その後、試行錯誤を行い、うまく出来たのでその方法を示します。

#方法
###1.自分の画面を確認する
まずは自分の画面がどの設定ファイルを書き換えれば動くのかを確認する作業から始めます。
ターミナルを開いて次の2つのコマンドを順番に実行して下さい。(多分grepをうまく使える人なら1回で出来るかと)

`ioreg -lw0 | grep DisplayVendorID`
`ioreg -lw0 | grep DisplayProductID`

この2つのコマンドを実行すると僕のMBP Early 2015の場合、次のようになりました。

`| | | | | |       "DisplayVendorID" = 1552`
`| | | | | |       "DisplayProductID" = 41002`

この数字がファイルを書き換えるときに必要なのでメモしておきます。

###2.SIPを無効化する
次にSIPを無効化します。SIPとはEl Capitanから導入されたシステムファイルの書き換えを防止する機能です。
今回はシステムファイルを書き換えるため一時的に無効化します。
まず、Macの電源を切りCommand+Rを押しながらMacを起動させます。これでMacがリカバリモードで起動するはずです。
次にメニューバーの「ユーティリティ」から「ターミナル」を起動します。そして、次のコマンドを入力します。

`csrutil enable --without fs`

これでSIPが無効化されました。これで通常起動に戻ります。
僕の場合はrEFIndをインストールするために無効化した状態で放置していたのでこの作業は行っていません。SIPが無効化されているかどうかは次のコマンドで確認できます。

`csrutil status`

###3.書き換えるファイルを見つける
通常起動に戻りましたら、ターミナルを開いて次のコマンドを実行します。これで設定ファイルが保管されているディレクトリに移動します。

`cd /System/Library/Displays/Contents/Resources/Overrides/`

移動した後にlsコマンドを実行するとDisplayVendorID-から始まるディレクトリが複数あると思います。
ここで先程調べたDisplayVendorIDが必要になってきます。
ですが、ディレクトリ名のほうは16進数になっています。調べた値は10進数で出てるので変換が必要になります。
ここでサクッと10->16進数変換をしてしまいましょう。すぐに出来ない人は電卓のプログラマーモードを使うと便利かもしれません。
1552は0x610となるのでDisplayVendorID-610がお目当てのディレクトリとなります。では、移動しましょう。

`cd DisplayVendorID-610`

移動したらまたlsコマンドを実行します。すると次はDisplayProductID-から始まる大量のファイルがあります。
そして、先程同様16進数で書いてあります。ここでまた変換を行います。
今回は41002ですので0xa02aとなります。
つまり、DisplayProductID-a02aがお目当てのファイルです！

###4.書き換える
やっとこれで設定ファイルを書き換えられます。その前にバックアップを一応のためにとっておきます。sudo実行が必要です。

`sudo cp DisplayProductID-a02a DisplayProductID-a02a.bak`

これでバックアップが出来ました。では、このファイルを好きなエディタで開きます。今回はVimを使用しました。これもsudo実行が必要です。

`sudo vim DisplayProductID-a02a`

開くと分かる人ならすぐにplistファイルだと分かるはずです。まあ、分からなくても書き換えには影響しません。
重要なのは`<array></array>`で囲まれたエリアにある`<data></data>`の行です。
ここに解像度の情報が書いてあります。では、1920x1200の情報を追加しましょう。`</array>`の上の行に次の1行を追記します。
この際、他の行とインデントをあわせておきましょう。

`<data>AAAPAAAACWAAAAAB</data>`

これで1920x1200の情報が入りました。これでファイルを保存してエディタを閉じます。

###5.設定の確認
再起動して、設定が出来ているかを確認します。システム環境設定からディスプレイを開き、解像度を確認します。
1680x1050の上にもう一つ解像度があれば成功です。ない場合は多分書き換えるファイルを間違えていると考えられます。

###6.SIPを有効化する
無効化したSIPを有効化します。正直、これはどっちでもいいと思います。僕もずっと無効ですが特に問題は起きてないので......
有効化するには2.の手順でターミナルを開いて次のコマンドを実行すれば有効化されます。

`csrutil enable`

#これで広い環境が手に入った
13インチで1920x1200っていうと今のノートパソコンなら普通かもしれません。(普通は1920x1080か)
ですが、この作業を行わないと1680x1050止まりになっています。せっかくのRetinaディスプレイなのですからもっと上の解像度でもいいと思うんですけどね。

あと、この投稿が僕の初めての投稿ですがMarkdownに全く慣れてません。
なのでところどころおかしなところがあるかもしれませんが大目に見てください。

#参考にしたサイト
[13inch MacBookPro Retina で解像度 1920×1200 を HiDPI モードで使う方法](https://blog.shiftky.net/mackbookpro-13inch-retina-1920x1200-hidpi-mode/)
[MacBook Pro Retina 13で、擬似解像度をWUXGA相当(Retina)に設定可能にする](http://sudoovi.hatenablog.com/entry/2015/12/06/231554)
GoogleのAPIを使う時の準備

APIはプロジェクトごとに使えるAPIを選んで、
そのプロジェクトにアクセスできるサービスアカウントを取得します。
このため、

* プロジェクト作成
* サービスアカウント取得

という作業を行う必要があります。
APIによってはAPIキーでアクセスできますが、
OAuth認証が必要なGoogle Analytics Reporting APIを使いたかったので、
サービスアカウントを取得しています。

補足ですが、OAuthクライアントIDというものもありますが、
こちらはユーザがブラウザ上で自分のアカウントでログインするような
Webサービスに使用します。

# プロジェクト作成

[Google APIs Projects](https://console.developers.google.com/iam-admin/projects?authuser=1)ページで、プロジェクトを作成します。

1. ロゴの横のProjectを選択して、「プロジェクトを作成」をクリック
![スクリーンショット 2016-10-25 14.47.56.png](https://qiita-image-store.s3.amazonaws.com/0/48439/dbda4527-35e1-9b43-e13d-f09d378943e5.png)

2. 以下のモーダルが出るので、
プロジェクト名（なんでもよい）を入力して作成をクリック
![スクリーンショット 2016-10-25 14.48.19.png](https://qiita-image-store.s3.amazonaws.com/0/48439/f50ac12e-8446-3b0f-11b3-6b6a1bf1e9b7.png)

3. しばらくするとプロジェクトができて、プロジェクト画面に遷移します
![スクリーンショット 2016-10-25 14.49.09.png](https://qiita-image-store.s3.amazonaws.com/0/48439/c0728dd2-7303-51d6-75a6-a1f1776fd277.png)

# サービスアカウント取得

1. メニューからライブラリを選択して、"Google Analytics"とか入れて
「Google Analytics Reporting API」を選択
![スクリーンショット 2016-10-25 15.01.26.png](https://qiita-image-store.s3.amazonaws.com/0/48439/d4a52864-3394-ed60-24fa-8bf6fa7bf584.png)

2. 「有効にする」をクリック
![スクリーンショット 2016-10-25 15.01.40.png](https://qiita-image-store.s3.amazonaws.com/0/48439/14758de0-6402-41e1-e1fa-f84798dcc36e.png)

3. 自動でダッシュボードに遷移し、レイ○ンの広告のように
認証情報の作成を強く推奨してくるので、「認証情報に進む」を
クリックして作成に行きます。
![スクリーンショット 2016-10-25 15.09.31.png](https://qiita-image-store.s3.amazonaws.com/0/48439/e816fb8d-63f6-0eed-5e07-b1395c157d3b.png)

4. 今回はバッチで使用したいので以下のように選択して「必要な認証情報」をクリック
![スクリーンショット 2016-10-25 14.50.53.png](https://qiita-image-store.s3.amazonaws.com/0/48439/a3218266-b253-2922-eef2-865a5dd1b6d0.png)

5. サービスアカウントを作成するため適当に入力します
キーのタイプはJSONがナウいみたいなのでそのままで「次へ」をクリック
![スクリーンショット 2016-10-25 14.51.38.png](https://qiita-image-store.s3.amazonaws.com/0/48439/0c9cb33f-72d8-8578-3a62-d34687cb83cb.png)

6. するとjsonが断りも無くダウンロードされます
秘密鍵を含む大事なキーなので、取り扱いは十分注意してください
![スクリーンショット 2016-10-25 14.51.50.png](https://qiita-image-store.s3.amazonaws.com/0/48439/5dc44802-dccb-720f-c77e-5176883fabd9.png)

7. 認証情報のページに遷移するので、
「サービスアカウントの管理」のリンクをクリックします
![スクリーンショット 2016-10-25 14.52.20.png](https://qiita-image-store.s3.amazonaws.com/0/48439/3527332e-1da1-e847-ce77-05caa59e0559.png)

8. いましがた作成したサービスアカウントのIDが一覧にでますのでメモっておきます。
![スクリーンショット 2016-10-25 14.52.43.png](https://qiita-image-store.s3.amazonaws.com/0/48439/48877e29-fd3f-76c8-1fd7-2ac4bf68b033.png)

以上です。
link_toでPOSTする際にパラメータを渡す方法

# 問題
Ruby on Railsでlink_to　ヘルパーを利用する際に、updateアクションへパラメータを渡す方法が分からない

# 解決方法

例えばUserコントローラのupdateメソッドに、params[:user][:age]を渡す際には、user_pathの第二引数にハッシュ形式でパラメータを記述すれば良い

```
<% link_to "更新", user_path(@user, params: { user: { age: 19} }), :method => :put %>
```

どこに書けばいいのかだいぶ迷ってしまいました
Vagrantの起動時に発生するUID競合を修正してみた


# 概要
Vagrantを使用して仮想マシンを起動していると、稀にVMの作成ユーザのID(UID)が競合してしまい、起動できない事があります。

作成したVMを壊して(vagrant destroy)、再作成(vagrant up)すると起動できるようになりますが一から構成し直すのは面倒です。
そこで、競合しているUIDを修正してみました。

# 症状
仮想マシンを起動すると、以下のようなエラーが発生します。

```bash
$ vagrant up
The VirtualBox VM was created with a user that doesn't match the
current user running Vagrant. VirtualBox requires that the same user
be used to manage the VM that was created. Please re-run Vagrant with
that user. This is not a Vagrant issue.

The UID used to create the VM was: 0
Your UID is: 1001
```

仮想マシンが認識しているユーザは**UID:0**なのですが、実際の現在のUIDは**UID:1001**となっています。
そのため、競合が発生しています。

# 対応
Vagrantの構成情報でVMを作成したUIDを保有しているファイルを修正します。
対象は以下のファイルです。

- **<Vagrantfile配置ディレクトリ>/.vagrant/machines/default/virtualbox/creator_uid**

creator_uidを開くと以下のようにVagrantが認識しているUIDが記載されています。

```text
0
```

このファイルを以下のように現在のUIDに変更します。

```text
1001
```

# 結果
creator_uidファイルを修正した後に仮想マシンを起動(vagrant up)します。
すると以下のように、エラーなく仮想マシンの起動が始まります。

```bash
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
    default: Adapter 2: hostonly
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Running 'pre-boot' VM customizations...
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
```
機械学習論文読みメモ_8

[The Kendall and Mallows Kernels for Permutations](http://jmlr.org/proceedings/papers/v37/jiao15.pdf), ICML2015
置換に関する正定値カーネルについて考える。
このカーネルは２つの順位間の相関性を扱う。
置換は順位予測問題において活躍する。
しかし単純には要素数の階乗個パターンを考慮するため計算量が問題になる。
置換に関するカーネルを利用する事でこの問題に取り組む。
カーネルトリックの利用で、計算オーダーを下げる事ができ、大きな順位データを扱う上で有用である。

[MRA-based Statistical Learning from Incomplete Rankings](http://jmlr.org/proceedings/papers/v37/sibony15.pdf), ICML2015
変数が多い場合において、一部の順位データが得られる時の解析を扱う。
この時の順位モデルとして、multi resolution analysis(MRA)に基づくモデルをこの一部だけ得られているデータ群に適用する。
このモデルは今回の問題設定に良くあっており、統計的な推論精度とそのモデル複雑性は、データそのものの複雑性と直接依存する。
MRAは、ある集合に関する関数が、その部分集合に関する周辺化された関数が持つ情報の和として表されるような構造を用いる。
この構造を用いて、部分的な情報を階層的(multi resolution)に扱う事を可能にする。

[Removing systematic errors for exoplanet search via latent causes](http://jmlr.org/proceedings/papers/v37/scholkopf15.pdf), ICML2015
興味のある潜在変数を抽出するために交絡変数の影響を除去する手法を提案する。
この手法は、従来の有向グラフに基づく推論ではなく、additive noise modelを用いる。
この手法では結合分布から始めるのではなく、複数のノイズ変数を仮定し、各ノードがそれぞれ、決定的関数で決まるノイズと親ノードに依存して決まるstructual equationを用いる。
このモデルの利用で、従来の検定やグラフ推論では難しかった2変数の因果推論も可能にした。
MySQLの基本的な使い方(個人用メモ)

自分用メモ

#データベース

###データベースの新規作成
    create database データベース名;

###データベースを選ぶ
    use データベース名;

###データベースを削除する
    drop database データベース名;

#テーブル

###テーブルの新規作成
    create table テーブル名(フィールド名 データ型);

###テーブルのデータを削除する
    delete from テーブル名;

###テーブルを削除する
    drop table テーブル名;


#フィールド

###フィールドを追加する
    alter table テーブル名 add フィールド名 データ型;

###フィールドを追加する(挿入位置を指定する)
    alter table テーブル名 add フィールド名 データ型 after 挿入したい前のフィールド名;

###フィールドを変更する
    alter table テーブル名 change 変更するフィールド名 変更後のフィールド名 変更後のフィールドの型;

###フィールドを削除する
    alter table テーブル名 drop フィールド名;



#レコード

###レコードに値を入れる
    insert into テーブル名 (フィールド名, フィールド名) values (レコード, レコード);

    insert テーブル名 set フィールド名=レコード, フィールド名=レコード;

###レコードを変更する
フィールド名1がフォールド値の時のフィールド名2のレコードをレコード値にする

    update テーブル名 set フィールド名2=レコード値 where フィールド名1=フィールド値;

###レコードを削除する
フィールド名のレコード値を削除する

    delete from テーブル名 where フィールド名=レコード値;


#表示

###データベース一覧
    show databases;

###テーブル一覧
    show tables;

###テーブルの構造を表示
    desc テーブル名;

###テーブルの中身を表示する
    select * from テーブル名;

###テーブルの中身を表示(フィールドを指定)
    select フィールド名 from テーブル名;

###テーブルの中身を表示(条件を指定)
フィールド名がレコード値の時のデータを表示

    select * from テーブル名 where フィールド名＝レコード値;

###テーブルの中身を表示(条件を指定したもの以外)
フィールド名がレコード値の時以外のデータを表示

    select * from テーブル名 where フィールド名!＝レコード値;


###テーブルの中身を表示(○○を含む)
フィールド名に○○を含むデータを表示

    select * from テーブル名 where フィールド名 like '%○○%';

###テーブルの中身を表示(逆順に)
フィールド名を基準として逆順に並び替えて表示

    select * from テーブル名 order by フィールド名 desc;
githubで特定のbranchをcloneする方法

## 目的
・ローカルのフォルダAの下にRemote repositoryのbranchをcloneしたい

状況的にmasterはcloneしているだろうからそこで"$git branch"してみる．
そうすると，branchが色々でてくる．

origin/a
origin/b
origin/c/d

上記の３番目のbranchをcloneした場合は以下のようにする．

$ git clone -b < c/d > <https://github.com/対象となるgithubアドレス>
iPhone iPad 端末での 一般名と内部名の対応表

# iPhone

|一般名|InternalName|
|---|---|
|iPhone|iPhone1,1|
|iPhone 3G|iPhone1,2|
|iPhone 3GS|iPhone2,1|
|iPhone 4|iPhone3,1|
|iPhone 4|iPhone3,2|
|iPhone 4|iPhone3,3|
|iPhone 4S|iPhone4,1|
|iPhone 5|iPhone5,1|
|iPhone 5|iPhone5,2|
|iPhone 5c|iPhone5,3|
|iPhone 5c|iPhone5,4|
|iPhone 5s|iPhone6,1|
|iPhone 5s|iPhone6,2|
|iPhone 6|iPhone7,2|
|iPhone 6 Plus|iPhone7,1|
|iPhone 6s|iPhone8,1|
|iPhone 6s Plus|iPhone8,2|
|iPhone SE|iPhone8,4|
|iPhone 7|iPhone9,1|
|iPhone 7|iPhone9,3|
|iPhone 7 Plus|iPhone9,2|
|iPhone 7 Plus|iPhone9,4|
|iPhone 8|iPhone10,1|
|iPhone 8|iPhone10,4|
|iPhone 8 Plus|iPhone10,2|
|iPhone 8 Plus|iPhone10,5|
|iPhone X|iPhone10,3|
|iPhone X|iPhone10,6|
|iPhone XR|iPhone11,8|
|iPhone XS|iPhone11,2|
|iPhone XS Max|iPhone11,6|



# iPad

|一般名|InternalName|
|---|---|
|iPad|iPad1,1|
|iPad 2|iPad2,1|
|iPad 2|iPad2,2|
|iPad 2|iPad2,3|
|iPad 2|iPad2,4|
|iPad 3|iPad3,1|
|iPad 3|iPad3,2|
|iPad 3|iPad3,3|
|iPad 4|iPad3,4|
|iPad 4|iPad3,5|
|iPad 4|iPad3,6|
|iPad Air|iPad4,1|
|iPad Air|iPad4,2|
|iPad Air|iPad4,3|
|iPad Air 2|iPad5,3|
|iPad Air 2|iPad5,4|
|iPad Pro (12.9 inch)|iPad6,7|
|iPad Pro (12.9 inch)|iPad6,8|
|iPad Pro (9.7 inch)|iPad6,3|
|iPad Pro (9.7 inch)|iPad6,4|
|iPad (5th generation)|iPad6,11|
|iPad (5th generation)|iPad6,12|
|iPad Pro (12.9-inch, 2nd generation)|iPad7,1|
|iPad Pro (12.9-inch, 2nd generation)|iPad7,2|
|iPad Pro (10.5-inch)|iPad7,3|
|iPad Pro (10.5-inch)|iPad7,4|
|iPad (6th generation)|iPad7,5|
|iPad (6th generation)|iPad7,6|

# iPad mini

|一般名|InternalName|
|---|---|
|iPad mini|iPad2,5|
|iPad mini|iPad2,6|
|iPad mini|iPad2,7|
|iPad mini 2|iPad4,4|
|iPad mini 2|iPad4,5|
|iPad mini 2|iPad4,6|
|iPad mini 3|iPad4,7|
|iPad mini 3|iPad4,8|
|iPad mini 3|iPad4,9|
|iPad mini 4|iPad5,1|
|iPad mini 4|iPad5,2|

# iPod

|一般名|InternalName|
|---|---|
|iPod touch|iPod1,1|
|iPod touch 2G|iPod2,1|
|iPod touch 3G|iPod3,1|
|iPod touch 4G|iPod4,1|
|iPod touch 5G|iPod5,1|
|iPod touch 6G|iPod7,1|

# 備考

参考サイトから一個一個コピペするのが辛かったのでシンプルな表を作った。

# 参考

- https://www.theiphonewiki.com/wiki/Models


# 旧タイトル

- iPhone系端末での一般名と内部名 ( InternalName ) の対応表









<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Development cannot be enabled while your device is locked.

iOSアプリを実機テストする際、iPhoneがロックされていないにも関わらず、

Development cannot be enabled while your device is locked
Please unlock your device and reattach.
(0xE80000E2).

というエラーが出るときの直し方の備忘録。



iOSデバイスの接続を外す
↓
設定->一般->リセット->位置情報とプライバシーをリセット
↓
つなぎ直す
↓
信頼
丸い画像をtransitionでフワッと大きくさせたかった

言葉で伝えるのが難しいので画像を使うと、
カーソルをあわせた時、このようなエフェクトがフワッとかかるようにしたかった。

![スクリーンショット 2016-10-25 14.24.53.png](https://qiita-image-store.s3.amazonaws.com/0/45187/91644576-15f8-6f74-b226-ea0ca04d4fce.png)

検証環境はchromeです。

## 最初の実装

丸い `<div>` の背景に画像を指定して、
背景画像の大きさを変えてみる。

```html:HTML
<div class="image"></div>
```

```css:css
.image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-image: url('/path/to/image.png');
  background-size: 100%;
  background-position: center;
  transition: 0.2s; /* これでフワッとするはず */
}

.image:hover {
  background-size: 110%;
}
```

### 結果

大きくはなったけど、フワッとしてくれなかった。（アニメーションしなかった。）
`background-size` には `transition` が効かない…？

**追記**
コメントで頂いたのですが、普通はこちらのコードで問題なく動くようです。
なんで動かなかったんだろう…　私と同じようにうまくいかなかった方は以下をどうぞ。

## 2番目の実装

丸い `<div>` の中に `<img>` をいれて、
`<img>` のほうを拡大してみる。

```html:HTML
<div class="image">
  <img src="/path/to/image.png" />
</div>
```

```css:css
.image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden; /* これを書かないと四角くなる */
}

.image img {
  transition: 0.2s; /* これでフワッとするはず */
  width: 100%;
}

.image img:hover {
  transform: scale(1.1); /* scaleを使って拡大 */
}
```

### 結果

拡大のアニメーションの最中に丸くない画像がチラついた。
`transition` 中に `overflow: hidden` がうまく動いていないらしい。
とても困ったのでググった。

## 解決策

ここに書いてあった。
http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome

```html:HTML
<div class="image">
  <img src="/path/to/image.png" />
</div>
```

```css:css
.image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;

  position: relative; /* absoluteとかでも可、z-indexを効かせるため */
  z-index: 2; /* 指定されてれば良いらしい。適当な数字で */
}

.image img {
  transition: 0.2s;
  width: 100%;
}

.image img:hover {
  transform: scale(1.1);
}
```

### 結果

成功した。やったぜ。
他の解決策を知っている人がいたらおしえてください。
背景画像拡大の方でできれば、コードがスッキリしていいんだけどなあ。
WHATWG Streams の Source と Sink

# 概要

[WHATWG Streams](https://streams.spec.whatwg.org/) のことを何回かに分けて書く。[Kyoto.js #11](http://kyotojs.connpass.com/event/39462/) の『 [WHATWG Streams をためした](http://bouzuya.net/slides/2016-10-22/) 』という発表のために調べたものだ。発表だけで終わらせるのはもったいないので、再整理して共有する。

前回は『 [WHATWG Streams の Stream と Pipe chain - Qiita](http://qiita.com/bouzuya/items/6a84e9fa349eeaae2ae3) 』。今回は (Underlying) Source と (Underlying) Sink のことを書く。

また Source / Sink については概要に留め、それぞれの使いかたなどの詳細は別途記載する。

## Source

- データの発生源
- ReadableStream に wrap される
- Push / Pull の 2 種類の違いを吸収し、ひとつの interface で表す
  - Push Source 例: TCP ソケット
  - Pull Source 例: ファイルハンドル
- ReadableStream は queue の空き状況に応じて `pull()` してくれる
- Source は ReadableStreamController を通じて ReadableStream に enqueue (これが push) できる

```javascript
// イメージ
interface Source {
  type?: 'bytes' | undefined;
  start?(controller: ReadableStreamController): Promise<void> | undefined;
  pull?(controller: ReadableStreamController): Promise<void> | undefined;
  cancel?(reason: any): Promise<void> | undefined;
}
```

## Sink

- データの行き先
- WritableStream に wrap される
- WritableStream は queue にあれば `write()` してくれる

```javascript
// イメージ
interface Sink {
  start?(controller: WritableStreamController): Promise<void> | undefined;
  write?(chunk: any): Promise<void> | undefined;
  close?(): Promise<void> | undefined;
  abort?(reason: any): Promise<void> | undefined;
}
```

## なぜ Source と Sink が重要か？

- なぜクラスとしては提供されない Source と Sink が重要なのか
- ReadableStream / WritableStream を継承するような使いかたはしない
- constructor に Source / Sink を指定する
  - `new ReadableStream(source, options)`
  - `new WritableStream(sink, options)`
- Source / Sink はクラスとして提供されないが、そのインタフェースをしばしば実装する

```js
const data = [1, 2, 3];
new ReadableStream({ // **Source**
  pull(controller) {
    const chunk = data.shift();
    controller.enqueue(chunk); // 1, 2, 3
  }
})
  .pipeThrough(new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk * 2);
    }
  }))
  .pipeTo(new WritableStream({ // **Sink**
    write(chunk) {
      console.log(chunk); // 2, 4, 6
    }
  }));
```

# 参考

- [WHATWG Streams](https://streams.spec.whatwg.org/)
- [WHATWG Streams をためした](http://bouzuya.net/slides/2016-10-22/)