OmniAICreator/Qiita-1.07M huggingface dataset:
CSSでローディングのぐるぐるの大きいやつを作ってみた


この画像が延々とぐるぐるしてくれます
![loading.png](https://qiita-image-store.s3.amazonaws.com/0/111862/b3d8431f-37df-af89-3b02-6d8dea2abacc.png)

```html:html
<div id="loading"></div>
```

```css:css3
	#loading{
		width: 200px;
		height: 200px;

		/* 色の設定 */
		background-color: #fff;

		/* 円にする*/
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-o-border-radius: 50%;

		box-shadow: 150px 0px 0px -90px #0ee, 105px 105px 0px -90px #0ee, 0px 150px 0px -85px #0ee, -105px 105px 0px -85px #0ee, -150px 0px 0px -80px #0ee, -105px -105px 0px -80px #0ee, 0px -150px 0px -75px #0ee, 105px -105px 0px -75px #0ee;
		position: absolute;

		top: 37%;
		left: 45%;

	    animation: spin 3s linear infinite;
	}

	@keyframes spin{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
```
XMLHttpRequest の readyState 値 の定数値

JavaScript 第6版 にこんなサンプルコードがある。

```javascript:P544
  if (request.readyState === 4 && request.status === 200) {
```

「4」って何だ、定数は無いのか、と思ったら前のページに XMLHttpRequest のコンストラクタで定義されていると書いてあった。
なんで使わないのかというと、古いブラウザやIE8で動かなくなるからとのこと。

古いブラウザを気にしない場合は XMLHttpRequest.DONE と書ける。
名前が長過ぎると思ったら、変数からDONEを参照してもいいかな。

```javascript:P544変更版
  if (request.readyState === request.DONE && request.status === 200) {
```
NavigationControllerをStoryboardで追加する


StoryboardにNavigationControllerを追加します。

Editor > Embed In > Navigation Controller
![スクリーンショット 2016-04-27 16.03.47.png](https://qiita-image-store.s3.amazonaws.com/0/97925/ff8ebef5-0919-f83f-a0f0-e96220e612af.png)


![スクリーンショット 2016-04-27 16.05.32.png](https://qiita-image-store.s3.amazonaws.com/0/97925/eff60975-25d2-1786-3006-9c37d0a54e97.png)

右側のViewControllerに NavigationItemをドラッグ&ドロップすると、NavigationBarにTitleが追加されます。
![スクリーンショット 2016-04-27 16.06.38.png](https://qiita-image-store.s3.amazonaws.com/0/97925/f2a51a5e-d710-5ac8-fb08-b6827c9aa5c7.png)

追加、キャンセルボタンなどを追加したい時はBarButtonItemをNavigationBarの左右にドラッグ&ドロップすると追加されます。
BarButtonItemを選択　> 野球のホームベースアイコン > BarButtonItem > SystemItem
でボタンの種類を選択できます。
![スクリーンショット 2016-04-27 16.12.53.png](https://qiita-image-store.s3.amazonaws.com/0/97925/600a5bc1-710a-f7db-dcc3-31719993e36a.png)

ちなみに、BarButtonItemを遷移先のViewControllerと紐付けすると、遷移先のNavigatoinBarに戻るボタンを置かなくても自動で前の画面に戻るボタンを生成してくれます。

##もう一つの方法
NavigationControllerをドラッグ&ドロップ
![スクリーンショット 2016-04-27 16.19.16.png](https://qiita-image-store.s3.amazonaws.com/0/97925/57c9716d-65ad-a988-7a1a-db71ecc1b24c.png)

NavigationControllerと一緒に勝手に追加されたTableViewを削除。
（下の画像では中央のViewController）
![スクリーンショット 2016-04-27 16.18.46.png](https://qiita-image-store.s3.amazonaws.com/0/97925/7b53be7f-065c-e40f-b1e4-b265d33aa0b5.png)

NavigationControllerから、controlを押しながら（または右クリックをしたまま)ViewControllerへドラッグ。
![スクリーンショット 2016-04-27 16.24.44.png](https://qiita-image-store.s3.amazonaws.com/0/97925/9c417752-5ebd-41b7-b7ba-164af1f3e576.png)
root view controllerを選択して、ViewControllerを画面遷移のrootに設定。
このやり方だと自動でTitleとBarButtonItemが追加されています。
semaphoreを使ってみる 前編

# はじめに
インフラ構築を自動化したい人です。
そこでansibleをWebから実行できるツールのsemaphoreというものを試してみました。
細かいことはさておき、とりあえず動かします。

[GitHub - ansible-semaphore/semaphore: Open Source Alternative to Ansible Tower](https://github.com/ansible-semaphore/semaphore)

# 環境
Windows7 64bit
Vagrant
Virtualbox

# やってみた
基本的にREADMEの通りですが・・・

## 準備(細かいところは省略)
- Vagrantをインストール
- Virtualboxをインストール
- ansible-playbook コマンドが動くようにする

## セットアップ
だいたいREADMEの通りですね。ちなみに一番下から2個のコマンドはsudoでないと動きませんでした。

- ソースをダウンロードして適当なところに展開
- rsync関係がうまく動かなかったのでVagrantfileのrsync部分をコメントアウト
- `vagrant up` 
- 仮想マシンが立ち上がるので、WinSCPか何かで/opt/semaphore以下に展開したソースの中身をコピー(rsyncでされるはずだった作業)
- `/opt/semaphore/lib/scripts/pullGit.sh` に実行権限をつける
- `vagrant ssh`
- `cd /opt/semaphore`
- `npm install`
- `bower install`
- `npm install -g nodemon`
- `nodemon bin/semaphore`

あとは http://localhost:3000 で見れます。
ログイン画面になりますが、[ここ](https://github.com/ansible-semaphore/semaphore/blob/master/README.md)に書いてあるメアドとパスワードでログインしましょう。

実際にansibleを実行するのはまた次回の記事に書こうと思います。
優れたVR体験のための教訓

http://gamasutra.com/blogs/JesseSchell/20150626/247113/Making_Great_VR_Six_Lessons_Learned_From_I_Expect_You_To_Die.php
の、自分に都合のよい部分だけを要約しました。


#VR酔いは防げる

##フレームレートは最低限でも60fps
90ｆｐｓならなおよい。

##仮想カメラはなるべく動かさないように
レーシングゲームやフライトシュミレータなどを１人称視点で作りたくなるが、VRでは三半規管は重力を感じないので、視覚から予測される重力と実際の差を脳は感じ、気持ち悪くなる。

##どうしてもカメラ移動する場合は、加速せずに一定速度で移動せよ
三半規管は加速度は感じるが、速度は感じることはない。そのため、カメラが一定速度で動いているのであれば、視覚から予測される重力と実際の差はないので気持ち悪くならない。

##水平レベルは維持せよ
水平方向の回転は、かならず気分が悪くなる。回転させるのは、ユーザが周りを見渡した時にその動きに合わせて映像を更新するときだけである。




#新しいメディアのために設計せよ
テレビ画面などのメディアのためのコンテンツの設計をそのままVRというメディアに適用することは時間の無駄である。
##VRに不適切なこと
・１人称の仮想動作
・スクリーン上の位置が固定のHUD
・可変フレームレート
##VRに適切なこと
・その場にいるように感じさせること
・映像内のものに触らせたりいじらせること
・対面インターフェース

#没入感はゲームプレイよりも重要である
##没入刊を阻害するものとして以下のようなものがある

### ・物の相互作用が浅い
### ・非現実的な音
#####ものを落とした時などに音が鳴らないなど

##深部感覚(体の各部位の位置・角度の感覚）とのずれ
現実では座っているのに、ゲーム内では立っている視点
##制約に注目させること
今のVRではできない部分を無理やりほかの方法で解決させるとよくない。むしろ、そのできない部分は省かれるか、ユーザにとって重要ではないものにされるべきである。

#周りを見回すには慣れが必要
ユーザは、テレビなどのスクリーンメディアで映像を見るときのように頭を固定してみるのに慣れている。動かすのに理由が必要。

＃顔の近くの物体は没入感が高い
顔の近くに仮想のしかも高精度の３ｄ物体をみることは未経験なので面白い

#入力プラットフォームにより体験は大きく異なる
省略

#反復的なプロセスが必須
事前に考えて面白いとおもったアイディアでも、VRで実現するとつまらなくなることもあるし、その逆もある。「早く失敗し、楽しいと思う部分を追求せよ」
SoftLayerで月額課金のVMware NSXやSRMをオーダーする方法

# NSXやSRMがSoftLayerでオーダー可能に。
本日(2016年4月27日)から、SoftLayerで、月額課金のVMware NSXやSRMをオーダーできるようになりました！

# オーダー画面
ESXiは、ベアメタルサーバーのオーダー画面で、ハイパーバイザーとして選択しますが、NSXやSRMのライセンスは、サーバーのオーダー画面からのオーダーではなく、専用のオーダー画面が用意されています。

管理ポータル画面の、Devices > Manage > VMware Licenses から、VMwareライセンスの管理画面に入れます。

![vmware_order.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/cd45b2e3-235c-0f7c-acdd-1ea3169e713c.jpeg)

右上の「Order VMware Licenses」をクリックします。

![vmware_order2.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/d02e0463-c057-dbdb-80d9-c2d943c4c743.jpeg)

![vmware_order3.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/07bd2be8-ad54-ac70-be5a-02b8c6515688.jpeg)

プロセッサー課金のため、CPU数に応じた製品メニューが用意されています。

![vmware_order4.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/74580663-3263-430f-d3b7-37697388261b.jpeg)

![vmware_order5.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/d6e7c820-45f2-7172-de1d-7f9cb36e7ac1.jpeg)

価格を見るため、目ぼしいものを選んでみました。（この価格は、2CPUにすると単純に2倍、4CPUにすると4倍でした。）

![vmware_order6.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/22b030f2-ab78-0bc2-2a94-f7644384315f.jpeg)

次の画面。ライセンスも、最初の月は日割り計算となります。

![vmware_order7.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/b297f0b3-6e49-0a4e-6a20-18d346fa4eff.jpeg)

試しに無償のvCenter Server Applianceだけ、オーダーしてみました。
ここでは、ライセンスキーだけが払い出されます。

![vmware_order8.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/1310bbec-a157-b5c5-7753-94ec690a5612.jpeg)

# モジュールのダウンロード

モジュールのダウンロードページは、下記のリンクからアクセス可能です。（リンク先がプライベートNWのURLなので、SSL VPNやIPSec VPNでSoftLayerのプライベートNWにアクセスできる状態になっている必要があります）

![vmware_order9b.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/2e2b7c23-a338-d4da-5091-f823d93d3da2.jpeg)

![vmware_order10.jpg](https://qiita-image-store.s3.amazonaws.com/0/59627/981e2097-f79c-deee-d9dd-320efa24a47c.jpeg)

モジュールは、上記ファイルサーバーからユーザーがダウンロードしてインストールし、オーダーしたライセンスキーを入力してActivateするというやり方のようです。

新たにSoftLayerでオーダー可能になったVMwareモジュールのオーダー方法について簡単にご紹介しました。
VMwareの最新機能についても、月額課金で必要な時に必要なだけ使え、不要になったらキャンセルすれば次月以降の利用をやめられるようになった事は、クラウド環境でVMwareを使う上で、大きなメリットだと思います。
Rspec | ハッシュに対してのモックを作る

`:[]` に対してモックを作れば良い。

## 例

```rb
describe 'Mock Hash Test' do
  let(:hash) { { a: 1, b: 2, c: 3} }

  before do
    allow(hash).to receive(:[]).with(:a).and_return('Over written!')
  end

  it { expect(hash[:a]).to eq 'Over written!' }
end
```

## 結果

```bash
Mock Hash Test
  should eq "Over written!"

1 examples, 0 failures
```

# 問題点

ただし、このやり方だと、モックを作っていない `b:` と `c:` に対しての検証は怒られる。
`and_call_original` を使えば問題は解決だ。

## 例

```rb
describe 'Mock Hash Test' do
  let(:hash) { { a: 1, b: 2, c: 3} }

  before do
    allow(hash).to receive(:[]).and_call_original
    allow(hash).to receive(:[]).with(:a).and_return('Over written!')
  end

  it { expect(hash[:a]).to eq 'Over written!' }
  it { expect(hash[:b]).to eq 2 }
  it { expect(hash[:c]).to eq 3 }
end
```

## 結果

```bash
Mock Hash Test
  should eq "Over written!"
  should eq 3
  should eq 2

3 examples, 0 failures
```

## 補足

この場合、モックは「後から作られた方」が優先順位が高い。
なので `and_return` と `and_call_original` の行を逆にすると、検証は失敗する。

# 参考

- [RspecでENVをどうstubするのがよいのか](http://qiita.com/vivid_muimui/items/5e0bc229a688afefbce2)

# 環境

- rspec (3.4.0)
  - rspec-core (3.4.4)
  - rspec-mocks (3.4.1)
  - rspec-rails (3.4.2)



<!-- Update From Qiita API -->

# チャットメンバー募集


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

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


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
【Git基礎】git push origin masterのmasterはローカル/リモートどっちのこと？


`git push origin master` のコマンドにてmasterブランチはローカル側のやつかリモート側のやつかどっちことだかわからなかったので調査した。

## はじめに結論

`git push/fetch origin master`の`master`は**ソース元**を意味している。
なので
`git push origin master`の`master`は **ローカル側**のmasterブランチを指していて、
`git fetch origin master`の`master`は **リモート側**のmasterブランチを指している。


## 理屈

### そもそも
git pushとかgit fetchのヘルプを見ると
`git push/fetch [<repository> [<refspec>...]]`
とある
つまり`origin`が`<respository>`にあたり、`master`が`<refspec>`にあたる

### `<refspec>`ってなんですか

git pushとかgit fetchとかのヘルプで`<refspec>`の部分を探すと共通して書いてあるのが、
> The format of a `<refspec>` parameter is an optional plus +, followed by the source ref `<src>`, followed by a colon :, followed by the destination ref `<dst>`. The colon can be omitted when `<dst>` is empty.

`<refspec>`の形式は`+`オプション`<src>``:``<dst>`らしい。  
これでわかるのが、`<refspec>`はソース元と提供先を示すためのもの(`+`オプションをつけることでfast-forwarded状態でなくても提供先のものを更新する)
でも普段は`:`を使って分けたりしないし(他の人はしてるのかな)、結局`git push/fetch origin master`のmasterはソース元なのか提供先なのか。
git push、git fetchのヘルプを見てみると共通して書いてあるのが、
> `:<dst>` part can be omitted

つまり`git push/fetch origin master`の`master`では`:<dst>`の部分を省略していた！
ので、`master`は`<src>`意味していて、冒頭の結論ということになる。

## 補足(使い方など)

#### git push

##### プルリクエスト送信

> The `<src>` is often the name of the branch you would want to push, but it can be any arbitrary

とあり、任意のブランチをリモート先にpushすることができ、リモート先のレポジトリに名前がない場合は作成される。これはGitHubではこれはコマンドライン上でプルリクエストを送ることを意味する。  

##### リモートブランチ削除

```
git push origin :branch2
```

では`<src>`が空のものがリモート先の`<dst>`へプッシュするので、リモート先の`branch2`ブランチをコマンドライン上で削除することを意味する。

#### git fetch

git fetchでもローカル側のリモートトラックに`<src>`が無い場合は、新しく作成される。

##### masterも省略するとき

masterも省略するとき、`remote.<repository>.fetch`という変数を`<refspec>`としてgitが参照する。
デフォルトでこの変数は以下の様になっている。(`git config --list`とかでも見れる)

```
[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
```

git fetchのヘルプによると
> The example above will fetch all branches that exist in the origin (i.e. any ref that matches the left-hand side of the value, refs/heads/*) and update the corresponding remote-tracking branches in the refs/remotes/origin/* hierarchy.

リモート上の全てのブランチ(`refs/heads/*`)分を、ローカルのリモートトラックブランチ(`refs/remotes/origin/*`)に対して更新するということ。
つまり

```
git fetch origin
```

とすると、ローカル上のリモートトラックブランチがすべて更新される
ghqでGithubの複数アカウントに対応する例

会社で使っているGithubのアカウントと個人のGithubのアカウントが別なので、よく間違えてコミットするのを何とかしたい。複数アカウント管理に軽く調べてみると色々方法があるんだけど、URLの書き換えとか、cloneした後に手順が必要だったりしていつも忘れてしまうので、cloneした時に雑にユーザー切り替えてみる。

sshの設定は必要なので適当に設定しておく。下の例では個人のアカウントの方を`private.github.com`にしている。

```ruby:private-ghq
#!/usr/bin/env ruby

github_host = "private.github.com"

username = "xxxx"
email = "xxxx"

if ARGV[0] == "get"
  args = []
  repo = ""

  ARGV[1..-1].each do |arg|
    repo = arg if arg.match(/^git@github.com/)
    args << arg.gsub(/^git@github.com/, "git@#{github_host}")
  end
  system "ghq", "get", *args
  exit_code = $?.to_i

  unless repo.empty?
    dir = repo.match(/^git@github.com:([^.]*)(\.git)?/)[1]
    ghq_root = `ghq root`.chomp

    Dir.chdir(File.join(ghq_root, "#{github_host}/#{dir}/")) do
      system "git config user.name '#{username}'"
      system "git config user.email #{email}"
    end
  end

  exit exit_code
else
  exec "ghq", *ARGV
end

```

後はこのファイルを`private-ghq`とか適当な名前で保存する。cloneしてくる際にはこんな感じになる。

```sh
$ private-ghq get git@github.com:hogehgoe/fugafuga
```

ポイントとしてはURLを書き換えなくてもいいし、最初のghqコマンドを変えるだけでcloneしてきた後はユーザーが切り替わっているので自分で特に何もする必要がない所。

今の所これで困っていないので、管理に困ってる人がいればぜひ試してみてください。
ESP8266で静的なIPをわりふってみる

家のネット環境によってはDHCPでIPアドレスを取得するより、静的（static）なIPで割り振りたいという要望を聞きましたのでソースコードを公開します。

#表示内容
ESP8266のlocalIP
ゲートウェイのIP
サブネットマスク
ESP8266のmacAddress
#コード
```cpp:ip.ino
#include <ESP8266WiFi.h>
#define debug Serial
/*
IPアドレスをDHCPではなく手動で割り振ることをすることができる。
localIP:moduleのIP gateway:デフォルトゲートウエイ subnet:サブネットマスク DNSは指定しなくてよい。
config(IPAddress local_ip, IPAddress gateway, IPAddress subnet, IPAddress dns1 = (uint32_t)0x00000000, IPAddress dns2 = (uint32_t)0x00000000)
*/
void setup(){
  debug.begin(115200);
  WiFi.config(IPAddress(192,168,1,2),IPAddress(192,168,1,1),IPAddress(255,255,255,0));
  debug.print("Local IP  :");debug.println(address(WiFi.localIP()));
  debug.print("Gateway IP:");debug.println(address(WiFi.gatewayIP()));
  debug.print("SubnetMask:");debug.println(address(WiFi.subnetMask()));
  debug.print("macAddress:");debug.println(WiFi.macAddress());
}

void loop(){

}
String address(IPAddress ip){
  String ipStr = String(ip[0]) + '.' + String(ip[1]) + '.' + String(ip[2]) + '.' + String(ip[3]);
  return ipStr;
}
```
groupしたら「Hash can't be coerced into Fixnum」が出たけど、pしたら大丈夫だったのはなぜ？

総件数が表示される一覧画面を作っていたところ、エラーが発生。
総件数の部分はhelperで定義されていて、今まで特に問題なく動いていたのに・・・

```
  def page_navi(objects, class_name = 'per_page')
   return if objects.nil?
   html  = objects.total_count.to_s
   html += '件中&nbsp;'
   html += "#{ objects.limit_value * objects.offset_value / objects.limit_value + 1 }"
   html += '～'
   html += "#{ objects.limit_value * objects.offset_value / objects.limit_value + objects.size }"
   html += '件を表示&nbsp;&nbsp;'
   html += select_tag :per_page, options_for_select(per_pages_for_select, params[:per_page]), class: class_name
   html += '件毎に表示にする'
   html.html_safe
  end
```

エラーを見るとどうやらobjects.sizeが怪しい・・・

よくわからないけど、とりあえずobjectsの中身を確認してみようと思って、

```
  def page_navi(objects, class_name = 'per_page')
   return if objects.nil?
   p objects
   html  = objects.total_count.to_s
```

と書いて確認してみたところ、


なんとエラーが発生しなくなった！！

おいおい意味わかんねーぞといろいろ試してみたところ、

```
   html += "#{ objects.limit_value * objects.offset_value / objects.limit_value + objects.length }"
```

にしたら大丈夫だった
ちなみに objects.count にすると p をやってもダメだった


sizeとcountとlengthで違いがあるというのは噂レベルで知っていたけど、
いい機会なのでちょっと調べてみたら、
[【Rails】sizeとcountとlengthについて](http://d.hatena.ne.jp/masterpiyo/20111013/1318532274)
こちらのページがわかりやすかった

```
カウンタキャッシュを使っていない場合、
sizeは、ロード時には配列の要素数を返し、未ロード時にはcount文を発行しますし、
lengthは、ロード時には配列の要素数を返しますが、未ロード時にはselect * ～を発行したのち配列の要素数を返します。
そんでもって、
countはどんなときであれ毎回count文を発行します。
```

詳しくはわかってないけど、どうやら自分の作ったクエリではcount文がうまく作れないため、
sizeで作っていたときには未ロード時にcount文を作ろうとしてエラーになっていたらしい。

ちなみに今回作ったクエリはグルーピングしてました。
（グルーピングの部分を外すとsizeでも問題なく動きました。）

lengthを使うとパフォーマンスに影響が出るそうだけど、
今回lengthを使う場面は必ず一覧画面とセットなので、
まぁそれほど影響は出ないと信じ、とりあえずlengthで突っ走ります。
Clocksource tsc unstableで仮想ゲストの時刻がずれた

時刻がずれたエラーがでたということで備忘録を。
うるう秒対策の-xオプションのせいで一気にあわないのと
ハードウェアクロックとの同期もできないのでどんどんずれてってました。

```
Apr 13 13:36:40 localhost kernel: Clocksource tsc unstable (delta = 170074632 ns).  Enable clocksource failover by adding clocksource_failover kernel parameter.
```
参考：
[第15章 タイムスタンプ](https://access.redhat.com/documentation/ja-JP/Red_Hat_Enterprise_MRG/2/html/Realtime_Reference_Guide/chap-Realtime_Reference_Guide-Timestamping.html)
[カーネルにおけるタイマー事情 ～第4回 タイマーハードウェアの抽象化～ | VA Linux Systems Japan株式会社](http://www.valinux.co.jp/technologylibrary/document/linuxkernel/timer0004/)
[とあるSEの備忘録: kernel: Clocksource tsc unstable](http://blog.developerlabs.net/2012/12/kernel-clocksource-tsc-unstable.html)

遭遇したのはパブリッククラウドで起きた問題で
仮想ゲストと仮想ホストの相性が悪かった風でstop/startしたところなおりました。

/etc/grub.confとかにclocksource_failover的なカーネルパラメータ追記する修正をマシンイメージに念のためいれるのも手間だなーとかそれよりは監視強化で即切り離して対応でいいんじゃないかなとかいろいろ。
監視的な度合いでいうとPingおちたレベルって話も。

監視は起動時にすぐ同期できないからアラートでるかなという心配も聞こえましたがiburstついてれば8回いって即合うから大丈夫じゃないかなと思いました。あとzabbix的にはsystem.localtime.fuzzytimeだとアイテム多いからsystem.runがよさげとかそんなかんじです。
[NTP設定 - とあるSIerの憂鬱](http://d.hatena.ne.jp/incarose86/20110505/1312522379)

時刻がずれるとバッチサーバや課金系のシステムだと大問題(不整合とかシステム停止とか)というのもあるでしょうし過去から手紙がとどいたり生まれてないひとや故人からなにかとどいたりするホラーが起きたり、あらゆるものが意図した時間のとおり動かないとかいろいろアレなんで、根源的に時計は合っているのがとても大事だなと思う次第です。
Google Developers Summit - Android 参加メモ


## タイトル
Google Developers Summit - Android

## 開催日
2016/04/25 Mon. 13:00 - 17:30

## ハッシュタグ
 #GDSTokyo


## 内容
### 1. Overview of Android Beta Program

N Preview 5 まで出る予定


### 2. Android Studio 2.0

・複数バージョンの共存方法

・ツールのバージョン追従の考え方
compileSdkVersion,buildToolsVersionは23系
Gradleは2.4以上（できれば2.8）
Pluginは2.0系に早めにあげたい
targetSdkVersionはゆっくりでよい

・SDKインストールディレクトリについて
基本的には共用でOK

・新しいエミュレータ
速い
設定画面の刷新
Instant Run は速い

・Android Studio 2.1
Android N Developer Preview のサポート
Java8ランタイム一部サポート
JDK8必須
Jack and Jill必須

・Jack and Jill
正式採用される見通し
Android N は Jack でコンパイルされている

・Android Studio 2.1の問題
いろいろある

・Android Studio 2.1のフィードバックお待ちしています
Android Studio bug　や Jack bug report を選択して投稿

・DEX生成時のメモリ不足対応
gradle.propertiesで指定するように変更された

・シュリンク機能
シュリンク機能だけつけた
 minifyEnabled
 useProguard

・ADBによるデプロイ高速化
5倍速くなった

・Instant Run
接続されていること
デバッグビルドのみ
APIレベル15以上(Cold Swapは21以上)

問題あり
MultiDex利用時にパフォーマンスが落ちる場合がある
DEXに含まれるメソッド名が増える
Jackと併用不可

Instant Run 自体の仕組みは DroidKaigi の Enoさんのセッションを参照

・Android Emulator 2
速い
マルチタッチ
設定項目、画面の刷新

・GPU Profiler
各フレームごとのプロファイラ情報が確認できます


### 3. Android N What's New + Support Library update

Lollipop から Developer Preview 出した

予定
Preview 4 までは APIが変更される可能性がある
Preview 4 で APIレベル24となります

新機能

マルチウィンドウ
 2分割
 自由形式
 PinP(TV only)

 レイアウトはこれまで通り
 ライフサイクルはこれまで通り
  画面リサイズは画面回転と同じ挙動
  アクティブ/非アクティブ
  UI更新の停止は onPause ではなく onStop で →広告のリフレッシュも同じ

 マルチウィンドウはデフォルトで有効（過去のバージョンのアプリも同様）
 最低の高さ、幅は設定できる
 マルチウィンドウの判定用メソッドあり(Preview 2から)

 マルチウィンドウの切り替え
  アプリ側から制御できない。ユーザーが操作する
  PinPだけは制御できる
 ドラッグアンドドロップ
  制御コールバックメソッドあり

通知
 ほぼ同じ
  Android Wear用のAPIがphoneでも使えるようになった。
  グループ化
  カスタムビュー
   setContent()はdepricated

Java8
 jackじゃないとAndroid向けのJava8は動かない
 ラムダは後方互換あり(過去のバージョンでも動く)
 　→ただし、必ずオブジェクトを new するので、メモリリークに注意
 それ以外の機能は Android N 以降じゃないと動かない

データセーバー
 場合分け出来る

クイック設定
 カスタム出来るようになった
　
特定のディレクトリへの権限を要求

その他の新機能 
 Direct Boot
 ShortcutManager
 ICU4J
 NFC Type-F Host Card Emulation
 Android for Work

Doze
 軽いDozeモードが追加
  →ネットワークアクセスのみを遮断する
 しっかりしたDozeもあります
→ JobScheduler or GCM を使ってください

暗黙のブロードキャスト
 マニフェストに書いても動かない
 ・CONNECTIVITY_ACTION
 廃止
 ・ACTION_NEW_PICTURE
 ・ACTION_NEW_VIDEO

表示サイズ
 設定で表示サイズを変更することが可能
 → dp と px の比率が変わる
 → sw320dp で表示できることを確認すること

複数の言語設定を選択
 LocaleList.getDefault() でリストを取得できる


### 4. Android NDK/Game/Vulkan Updates

挙動の変更
・バックグラウンドの挙動
・低メモリデバイスへの対応
・新しいセキュリティ

Vulkan 対応
 対応済み
 ・Nexus6P
 ・Nexus5X
 今後予定
 ・NexusPlayer
 ・Nexus9

NDK対応
 NDK r11c
  Clang がデフォルトコンパイラに
  SDK マネージャからダウンロード可
  開発はAOSP上で
  バグ報告は github 上で

 NDK r12 Beta
  Vulkanに対応

  Betaは5週間に1回、Stableは1Qに1回を目指す

Google Play Games
 Google+ と決別した
 Gamer ID, アバターを作成可能
 Gamer フレンズ機能
 ビデオ録画API
  ゲームプレイを動画配信できる
  実況機能も追加予定
 Cardboard SDK : 3DオーディオAPI
  VRゲーム対応の3DオーディオAPI

Android Studio 2.0
 デバッグ

Vulkan について
・新しい汎用描画API

Android の Vulkan 対応
・対応デバイス
・APIのダイナミック・ロード推奨

FPL
Fun Propulsion Labs
 FlatBaffer
 FlatUI
find で巨大なファイルを検索する

とあるプロジェクトのコードをまとめてgithubに放り込もうとしたところ

```
remote: error: GH001: Large files detected. You may want to try Git Large File Storage
```

でかいファイルをあげちゃいけないんですね。
すかさずググる。

> GithubとBitbucketのストレージ周りのお話
http://qiita.com/t_yamatoya/items/fec5c5285f56eb4def99

ほほう。100MB以上はアウトとな。
では早速検索してみましょう。


# findのmanから抜粋

```man
-size n[ckMGTP]
     True if the file's size, rounded up, in 512-byte blocks is n.  If n is followed by a c, then the primary is
     true if the file's size is n bytes (characters).  Similarly if n is followed by a scale indicator then the
     file's size is compared to n scaled as:

     k       kilobytes (1024 bytes)
     M       megabytes (1024 kilobytes)
     G       gigabytes (1024 megabytes)
     T       terabytes (1024 gigabytes)
     P       petabytes (1024 terabytes)
```

というわけで

```sh
find ./ -size +100M; # 100Mbyte以上のファイルを検索する
```

そんだけです。

# おまけ:カレントディレクトリのファイルをファイルサイズの逆順にソート

```sh
ls -Slr
```

でかいファイルがターミナルの一番下に表示されるので便利。
YAMAHA RTXルーターをNGN網を利用してIPv4接続する

##はじめに
FLET'S NEXTでは、NTT東日本・西日本の総合通信網であるNGN（以下NGN網）にて追加料金なしでIPv6を使用したデータ通信が可能となる。この機能を利用して、FLET'S NEXTを使用する拠点間をVPN接続する手段を模索する。
拠点間のルーターはYAMAHA RTXシリーズが入手が容易であり、また参考文献が充実しているため、これを使用する。

##環境
IPアドレスは仮定とする
#####拠点1
回線：FLET'S ネクスト　インターネットおよびひかり電話にて使用
社内LAN：IPv4 192.168.0.0/18
ルーター：
機器：RTX1200 firmware version 10.01.65
インターネット側ポート：LAN2
インターネット接続方法：PPPoE
IPv4グローバルアドレスの状態：可変アドレスをリース
IPv6グローバルアドレスの状態：NGN網より割り当て
IPv6アドレス：1111:2222:3333:4444:5555:6666:7777:8888

LAN側ポート：LAN1
IPv4アドレスの状態：固定
IPv4アドレス：192.168.1.1

######拠点2
回線：FLET'S ネクスト　インターネットおよびひかり電話にて使用
社内LAN：IPv4 192.168.64.0/24
ルーター：
機器：RTX810 firmware version 11.01.25
インターネット側ポート：LAN2
インターネット接続方法：PPPoE
IPv4グローバルアドレスの状態：可変アドレスをリース
IPv6グローバルアドレスの状態：9999:aaaa:bbbb:cccc:dddd:eeee:ffff:1111

LAN側ポート：LAN1
IPv4アドレスの状態：固定
IPv4アドレス：192.168.64.1

##接続設定
######拠点1側
IPv4のルーティングを許可し、拠点2向けの通信をトンネルに向ける

```
ip routing on
ip route default gateway pp 1
ip route 192.168.64.0/24 gateway tunnel 1
```

IPv6のルーティングも許可する

```
ipv6 routing on
```

トンネル設定として、各エンドポイントを「ipsek ike * address」を使用して設定する。
IPSecの場合、「tunnel endpoint address」コマンドは使用しない。 

```
tunnel select 1
 tunnel name [任意のテキスト]
 ipsec tunnel 1
  ipsec sa policy 1 1 esp aes256-cbc sha256-hmac
  ipsec ike keepalive log 1 off
  ipsec ike keepalive use 1 on heartbeat 10 6
  ipsec ike local address 1 1111:2222:3333:4444:5555:6666:7777:8888
  ipsec ike pre-shared-key 1 text [任意のテキスト ※1]
  ipsec ike remote address 1 9999:aaaa:bbbb:cccc:dddd:eeee:ffff:1111
 ip tunnel remote address 192.168.64.1
 ip tunnel tcp mss limit auto
 ipv6 tunnel tcp mss limit auto
 tunnel enable 1
```

※1 共有鍵テキストは拠点で合わせること

IPSecにて必要なパケットの通過を許可する。

```
ip filter 200080 pass * 192.168.1.11 esp * *
ip filter 200081 pass * 192.168.1.11 udp * 500
ip filter 200082 pass * 192.168.1.11 udp * 4500
```
######拠点2側
基本は拠点1と同様の設定となるが、例として設定内容を挙げる。

```
ip routing on
ip route default gateway pp 1
ip route 192.168.0.0/18 gateway tunnel 1
ipv6 routing on
tunnel select 1
 tunnel name [任意のテキスト]
 ipsec tunnel 1
  ipsec sa policy 1 1 esp aes256-cbc sha256-hmac
  ipsec ike keepalive log 1 off
  ipsec ike keepalive use 1 on heartbeat 10 6
  ipsec ike local address 1 9999:aaaa:bbbb:cccc:dddd:eeee:ffff:1111
  ipsec ike pre-shared-key 1 text [任意のテキスト ※1]
  ipsec ike remote address 1 1111:2222:3333:4444:5555:6666:7777:8888
 ip tunnel remote address 192.168.1.1
 ip tunnel tcp mss limit auto
 ipv6 tunnel tcp mss limit auto
 tunnel enable 1
ip filter 200080 pass * 192.168.64.1 esp * *
ip filter 200081 pass * 192.168.64.1 udp * 500
ip filter 200082 pass * 192.168.64.1 udp * 4500
```

##まとめ
この設定で拠点間の通信がIPv4にて行うことができる。が、あくまで私の実験結果によるものであるため、不要な設定がある恐れがある。よりブラッシュアップと検証を行う必要があるだろう。
プログラマの考えが・・身につく本より(Python)：条件付きの検索(最大値)

[前回](http://qiita.com/teratera/items/6db925423f275ec774d0)に引き続き、検索問題を読んでいます。
ここでは、他の値との関係性のなかから値を検索し最大値を求めています。

<h1>条件付きの検索(最大値)</h1>
C++の解答コードがこちら

```
const int ARRAY_SIZE = 10;
int intArray[ARRAY_SIZE] = {4,5,9,12,-4,0,-57,30987,-287,1};
int highestValue = intArray[0];
for (int i = 1; i < ARRAY_SIZE; i++) {
    if (intArray[i] > highestValue) highestValue = intArray[i];
```

<h3>自分の解答</h3>
Python3

```
#!/usr/bin/env python
#coding:utf-8

def MaxSearch():
    ARRAY_NUMBER = [4,5,9,12,-4,0,-57,30987,-287,1]
    maxValue = ARRAY_NUMBER[0]
    for x in range(len(ARRAY_NUMBER)):
        if ARRAY_NUMBER[x] > maxValue:
            maxValue = ARRAY_NUMBER[x]

    print(maxValue)

・・・（ターミナル実行)
>>> from test31 import MaxSearch
>>> MaxSearch()
30987
>>> 
```
前回コメントを参考に
自分なりに短くしたつもりですが、最大値は求められました！

前回コメントより参考に
Pythonのメソッドがないか[Python標準ライブラリ](http://docs.python.jp/3/library/array.html)こちらで調べてみましたが、最大値を求めるメソッドらしきものはみあたらなかったので最大値は順に見ていく方がいいんでしょうかね?
Node.js v6.0がリリース！ 大幅にサポートされたES2015の新機能を使ってみよう

サーバーサイドで動作するJavaScript「[Node.js](https://nodejs.org/en/)」の最新バージョンv6.0が本日（2016/4/27）リリースされました。特筆すべきは**JavaScriptの新標準仕様であるECMAScript 2015(以下、ES2015)の大幅なサポート**です。本エントリではNode.js v6.0をインストールし、Node.jsでES2015の新機能を使うところまでを紹介します。

# Node.js v6.0の変更内容
Node.js v6.0の変更点については、次の記事に詳しくまとまっています。

- 公式ドキュメント「[Node v6.0.0 (Current)](https://nodejs.org/en/blog/release/v6.0.0/)」（英語）
- 日本Node.jsユーザグループ代表 @yosuke_furukawa 氏の解説記事「[Node.js v6.0 (Current) がリリースされました。 - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2016/04/27/110027)」（日本語）
 
ES2015の対応状況([Node.js ES2015/ES6 support](http://node.green/))を見るとわかりますが、90%以上のES2015(ES6)の機能がNode.js v6.0でサポートされています。

# インストールにはnodebrewかnodistがおすすめ
早速Node.jsのv6.0をインストールしたいところですが、既存のプロジェクトでNode.jsを使用している場合、バージョン変更により予期せぬエラーを招く場合があります。よって、Node.jsを使う場合はバージョン管理ツールである[nodebrew](https://github.com/hokaccha/nodebrew)(OS X)や[nodist](https://github.com/marcelklehr/nodist)(Windows)を使うのがよいでしょう。以下、macOSのnodebrewでの説明をします。nodistの方は適宜読み替えてください。

# Node.js v6.0をインストール
nodebrewがインストールされた環境において、次のコマンドでNode.js v6.0をインストールします。

```bash:コマンド(インストール)
$ nodebrew install-binary 6.0
```

インストールが完了したら、Node.js v6.0を使う設定をします。

```bash:コマンド(バージョン指定)
$ nodebrew use 6.0
```

Node.js v6.0が使えるようになっていることを確認します。

```bash:コマンド（バージョン確認）
$ node -v
```

# Node.js v6.0でES2015を使ってみよう
では、Node.js v6.0でES2015の新機能を使ってみましょう。

## let編
まずはブロック単位のスコープが可能な変数宣言`let`です。任意の場所にJavaScriptファイル「hoge.js」を作成して、次のコードを記述します。

```js:JavaScript
let message = "letが動作しました。";
console.log(message);
```

`cd (フォルダ名)`でJavaScriptの格納されているフォルダに移動し、`node (JavaScript名)`を実行することでNode.jsが動作しますが、Node.js v5系で実行すると、エラーが発生し、動作しません（※）。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/94f423a8-ff93-f868-304e-91d970f45d50.png)

※ `"use strict"`をJavaScript冒頭で宣言すると動作します。

Node.js v6.0では標準サポートされているため、`node hoge`で実行すると「letが動作しました。」という文字列が出力されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/91e65e61-ac56-c485-fd7b-d0d68f03027f.png)

## Rest パラメータ編
可変長パラメータのための`Rest`を試してみましょう。hoge.js内に次のコードを記述します。可変長パラメータを受け取る`testRest()`メソッドを定義しています。


```js:JavaScript
testRest("Restが", "動作", "していますね");

function testRest(...values) {
	console.log(values);
}
```

Node.js v6.0では`Rest`が標準サポートされているため、`node hoge`で実行すると「[ 'Restが', '動作', 'しています。' ]」という配列が出力されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/36fee849-1770-04e4-6f75-8ca2f93a73e7.png)

# Node.js v6.0でES2015を使った次世代のプログラミングをしよう
ブラウザでES2015を使用する場合は、そのサポート状況に注意する必要がありますが、サーバーサイドでは全く気にする必要はありません。ES2015は、従来のものと違いJavaScriptでプログラミングをしていく上での便利な機能が数多く揃っています。**Node.js v6.0でサポートされたES2015の便利な機能を積極的に使いこなしましょう**。
CSV型式で MySQL のデータを取得する


SELECT の結果を CSV に変換する場合など、空白を含むデータの扱いが面倒なので、MySQL の SELECT 文の段階で値をクォートして CSV 型式で出力しています。
カラム名の取得は information_schema.columns を利用しています。


```
table="テーブル名"
where="WHERE 条件"
user="-uユーザ"
host=""
mysql="mysql -s -r -B -N ${user} ${host}"
g=""

mksql()
{
	echo "SELECT "

	for i in `${mysql} -e "SELECT column_name FROM information_schema.columns WHERE  table_name = '${table}'"`
	do
		echo "${g}CONCAT('\"', $i, '\", ')"
		g=", "
	done

	echo " FROM ${table}"
}

mksql | ${mysql}
Slackでアプリレビューを流すいろんなBot

いろんなBotが出てますね〜。
自分用メモとして残しておきます。
メモなので正しい情報じゃないかもしれません。その時はお叱りをください

#[LaunchKit](https://launchkit.io/reviews/)
iOSだけならLaunchKitがいいぽい
基本は全レビュー流すんだけど、量が多かったら条件しぼって流すことも可能みたい。

AppStoreと連携して、レビュー以外にも、便利な機能がいろいろ揃ってる
Android版も出るらしい？けど有料になりそうだとか??

- [参考記事1](http://qiita.com/midori004/items/663ce29d1cdbea111aca)
- [参考記事2](http://dev.classmethod.jp/smartphone/launchkit/)

#[appBot](https://slack.com/apps/A03HHTUN5-appbot)
iOS, Mac, Google Play, Windows Phone, Amazon 対応
よく使われてるワードの頻度なんかをグラフでまとめてくれるようです。
https://support.appbot.co/help-docs/how-to-use-words/

おしゃ。
<img width="723" alt="スクリーンショット 2016-04-27 13.35.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/bd22f08e-082a-3018-2632-1f722964d0d7.png">

レビューに特化したBotってかんじです。
https://appbot.co/ からアプリを登録して使います。
14日間フリー。安いプランで15アプリ登録制限付きです。

#[AppFollow](https://slack.com/apps/A0MEQBTD3-appfollow)
AppStore, GooglePlay, WindowsPhone対応!
フィルターして☆１だけをひたすら流すという鬼畜ができます
<img width="360" alt="____________________________2016-04-27_17.27.43_720.png" src="https://qiita-image-store.s3.amazonaws.com/0/80770/444d9e6a-a95d-abf9-d999-870693966171.png">

星の数によって色分けできるのが地味にいい
![スクリーンショット 2016-04-27 18.02.47.png](https://qiita-image-store.s3.amazonaws.com/0/80770/b2da2e68-9319-d8d4-4b90-672860e037c7.png)

レビュー以外にも検索ワード・アップデート・ランキングなんかも管理できる
LaunchKitのプラスGooglePlay版ってかんじですかね
![スクリーンショット 2016-04-27 17.23.54.png](https://qiita-image-store.s3.amazonaws.com/0/80770/eb82e40c-064c-89e8-ca14-084ce4352f8a.png)

なんと2アプリ監視までならフリーなのだとか！！

#[Bell Apps App Review Notification](https://slack.com/apps/A0HCC2Z0F-bell-apps-app-review-notification)
超シンプルな機能ですね。
レビューをただ流したいだけならこれがよさそう。
多分フリー！

#[ReviewBot](https://slack.com/apps/A0VN4GMBL-reviewbot)
AppStore, GooglePlay対応
これもシンプルな機能。
1アプリだけですが14日間フリー
２アプリ登録で`$3.99/month`なので、目的によってはコスパいいかも
ロボットがかわいい。
https://reviewbot.io/
Ruby on Rails で開発・保守をしている会社の一覧 / 開発事例集

久しぶりの更新です。
昨年度までのデータの分析が〜みたいな話ではないです。

Ruby on Rails での開発・保守案件を受託している会社の一覧をまとめます。

## 開発・保守会社

- [ビヨンド・パースペクティブ・ソリューションズ株式会社](http://www.bpsinc.jp/ruby_on_rails.html)
- [バレアル](https://www.lancers.jp/profile/mate)
- [エアーズ](http://www.airs.co.jp/)
- [アークウェブ](http://www.ark-web.jp/ruby_on_rails/system_operation_maintenance.html)
- [テクノロジックアート](http://www.tech-arts.co.jp/technologies/new-technologies/ruby-on-rails.html)
- [万葉](https://everyleaf.com/tips-on-ruby)
- [ゼネット](https://www.zenet-web.co.jp/component/flexicontent/79-our-service/58-ruby)
- [ハートレイルズ](http://www.heartrails.com/)

## 事例

- [Ruby Association 事例](http://www.ruby.or.jp/ja/showcase/)
- [Ruby 開発事例集](https://www.transnet.ne.jp/success/)

## おまけ

- [Ruby on Rails のメンテナンスポリシー](http://railsguides.jp/maintenance_policy.html)
- [Ruby 2.0.0 および Ruby 2.1 について](https://www.ruby-lang.org/ja/news/2016/02/24/support-plan-of-ruby-2-0-0-and-2-1/)

他にあったらぜひ教えてください。皆様からの情報をお待ちしております。
DockerのAuthorization Pluginを試してみる

デフォルトのままのDocker Engineでは、ユーザーはすべての機能を使うことができます。そこでAuthorization Pluginを有効にすることで、システム管理者はどのユーザにどの機能を許可するかなどのポリシーを設定することができる、ようになるらしいです。

といっても、可能にしてくれるだけで、Pluginは自分で作るか誰かが作ったものを使わせてもらうしかないようです。そこで[Docker No volumes Plugin](https://github.com/projectatomic/docker-novolume-plugin)というものを見つけたのでCentOS ７で試してみました。

## 準備

Dockerのインストールはオフィシャルのドキュメントのとおり行いました。
- [Installation on CentOS](https://docs.docker.com/engine/installation/linux/centos/)

`docker-novolume-plugin`はGoで書かれていてGithubからとってくるので、そのために必要なパッケージをインストールします。(* 簡略化のためこの先はすべてrootでコマンドを実行します。)

```
yum install git go golang-github-cpuguy83-go-md2man
```

## docker-novolume-pluginをインストールする

```
# ソースをとってきてインストールします
export GOPATH=~
mkdir -p ~/src/github.com/projectatomic
cd ~/src/github.com/projectatomic && git clone https://github.com/projectatomic/docker-novolume-plugin
cd docker-novolume-plugin
make
make install

# サービスを有効にします
systemctl enable docker-novolume-plugin
```

## Docker EngineにAuthorization Pluginの設定を加える

`/usr/lib/systemd/system/docker.service`をエディタで開いて`/usr/bin/docker daemon`の隣に`--authorization-plugin=docker-novolume-plugin`を付け加えます。

```
ExecStart=/usr/bin/docker daemon --authorization-plugin=docker-novolume-plugin -H fd://
```

設定を反映するためにDocker Engineをリスタートします。

```
systemctl daemon-reload
systemctl restart docker
```

## Volumeが使えないことを確認する

```
docker volume create --name vol1
docker run --rm -v vol1:/root/vol1 -it alpine sh
```

下記のメッセージが出れば、docker-novolume-pluginがしっかり機能しています。

```
docker: Error response from daemon: authorization denied by plugin docker-novolume-plugin: volumes are not allowed.
```

今後はもっといろいろと柔軟に設定できるプラグインが出てくると思うので、今後に期待します。

## 参考リンク

- [Docker No volumes Plugin](https://github.com/projectatomic/docker-novolume-plugin)
- [Create an authorization plugin](https://docs.docker.com/engine/extend/plugins_authorization/)
- [Docker Engine 1.10 Security Improvements](https://blog.docker.com/2016/02/docker-engine-1-10-security/)
AWSでどのサービスがどれぐらい使われているか？の調査サイトを作ってみた

AWSを使う時にズラーっと並ぶたくさんのアイコン列を見て「みんな一体この中のどれをどのぐらい使ってるんだろ？」は前からの疑問としてあった。で、そういうデータがあまり見当たらないので自分でカンタンな調査サイトを作って、みなさんからの投票を元に把握しようと思いましたよ、と。

単純な調査サイトとその結果が表示されるだけだけど、これはAWSを使う人達が「ちょっと気になっていたこと」だと感じている。自社で使っているAWSはなにかと同じサービスの使い回しになってしまいがち。「アタシっていっつもEC2とS3があって、データベースはRDSってパターンだけど、このままでいいのかしら？」は誰もが一度は思うことだろう。
最近では「クラウドネイティブ」などというオシャレな用語が出てきて「API GatewayとLambdaを使って、EC2なんて使わねーんだよ」なんて言われると「それはスゴそうだな」とは思いつつも「次々に出てくるAWSの新サービスを全部は把握しきれない」という問題がある。

そこでデータとして「＊＊％の人が＊＊のサービスを使っている」や「最近、急上昇しているトレンドのAWSサービスは＊＊」と数字と共に出てきたら、より検討の材料になると考えた。

**AWSサービスの利用動向を調査して結果を表示するサイト**
http://aws-survey.herokuapp.com/
<img width="512" alt="20160427121304.png" src="https://qiita-image-store.s3.amazonaws.com/0/108761/bbabb0d0-02de-e8b6-b8bd-d4f191ea4182.png">


ただしAWSの調査サイトでありながら、デプロイ先はAWSではなくHerokuの無料プランというシュールな状況。

そして今回は初めてReactを使って実装した。いまだにReactというのはこうあるべき、という姿がイマイチ見えていない。GitHubでソースも閲覧できるので、もしReactマスターの方からの改善点あればご指摘いただければ幸いです。

当たり前のことだけど、サイトは立ち上げたばっかりで投票数もまったくゼロからのスタート。結果の表示を見たところで、初期段階では小さな数字だけであまり意味がない。でも、そこはみなさんひとりひとりの投票が集まればそれなりの有益な情報になる、と思ってしばしお待ちください。しばらく放置しといて、マシなデータが取れればいいなーと思ってる。

http://aws-survey.herokuapp.com/
Phoenixガイドラインを読んでみた(8) - Channel -

## はじめに

[前回](http://qiita.com/dynamitecoolguy/items/3abb3b698020283f5c60)は、Templateを見てきました。
今回は、[Channel](http://www.phoenixframework.org/docs/channels)についてです。
次回は、[Ecto](http://qiita.com/dynamitecoolguy/items/ca540af7f47ef0411340)です。

## 側溝

Channelは、Phoenixの強力な機能の一つです。この機能によって、容易にリアルタイム性を実現することができます。
Channelは、単純なメッセージ通信によって構成されます。送り手がメッセージをブロードキャストし、受け手は必要に応じてメッセージを受け取るという仕組みです。送り手と受け手は、それぞれ同時に別の役割を果たすこともできます。

Elixirには元々メッセージパッシングの機構があるのですが、ChannelではElixirのプロセスを直接扱う必要はありません。受け手と送り手ともに、Channelを介して通信を行うことができます。また、Channelの場合、Elixirのプロセスモデルと異なり、メッセージをブロードキャストすることができます。

なお、ここでいう"Channel"という言葉は、複数のコンポーネントからなるシステムを指す言葉です。

### 構成要素

ここでは、Channelを構成する各要素について見ていきます。

+ **Socket Handler**
Phoenixではサーバ側で単一コネクションだけを確立し、それを多重化して使っています。Socket Handlerは、このコネクションを使用するためのモジュールで、認証や識別を行うことができます。
例えば、HelloPhoenix.UserSocket(`web/channels/user_socket.ex`)では、全チャンネルで誰でも使用することできるデフォルトソケットとして設定されています。

+ **Channel Route**
Channel Routeは、Socket Handler内で定義されており、他のRouteとはそれぞれ独立しています。これは、メッセージを、Topic文字列に応じたChannelに振り分けるためのルールを表しています。
Topic文字列には、ワイルドカード(*)をしていすることができます。例えば、以下の例では、`sample_topic:pizza`と`sample_topic:oranges`の両方とも、SampleTopicChannelに送られることを示しています。

```
channel "sample_topic:*", HelloPhoenix.SampleTopicChannel
```

+ **Channel**
Channelは、クライアントからのイベントを処理するという点ではControllerに似ています。
ただし、違う点が二点あります。一つに、Channelのイベントには、incomingとoutgoingの両方の向きがあるという点です。
もう一つは、Channelのコネクションは、リクエスト/レスポンスのサイクルを超えて存在するという点です。
Channelは、次の四つのコールバック関数について、一部またはすべてを実装することができます。`join/3`, `terminate/2`, `handle_in/3`, `handle_out/3`です。

+ **PubSub**
PhoenixのPubSubレイヤーは、`Phoenix.PubSub`モジュールと、そのためのアダプタ、アダプタの`GenServer`からなります。これらのモジュールは、Topicの購読(Subscribe)、Topicの購読解除(Unsubscribe)、Topicに関してブロードキャストなどの関数を含みます。
必要であれば、独自のPubSubアダプタを作成することもできます。
なお、これらのモジュールは、Phoenixが内部的に使用し、ユーザが直接操作する必要がありません。

+ **Message**
`Phoenix.Socket.Message`モジュールは、以下のキーと値を持っています。

 - topic - Topicやtopic:subtopicの文字列 (例) "messages", "messages:123"
 - event - イベント名 (例) "phx_join"
 - payload - メッセージの本体
 - ref - unique文字列

+ **Topic**
Topicは文字列による識別子です。メッセージが正しい場所に届けられるようにさまざまなレイヤーで使用されます。
上で書かれている通り、Topicにはwilcardを使用することもできます。これは、"topic:subtopic"という記載方法を用いるときに便利です。また、"users:123"のようにTopicと何らかのIDをセットにするという方法もよく用いられます。

+ **Transport Adapter**
Transportレイヤーは、メッセージの送受信を担当します。`Phoenix.Channel.Transport`モジュールは、Channelを出入りする全メッセージをハンドルするモジュールです。

+ **Client Library**
PhoenixではJavaScriptのクライアントが付属されています。また、iOS、Android、C#用クライアントもPhoenix1.0でリリースされています。

### Chatアプリの例

ガイドにあるChatアプリの例は、別建てで記事を書きます(予定)。
毎日どんな風にDockerを使って開発しているかまとめてみた

開発環境をDocker化してだんだん慣れてきたので日々の使い方をまとめてみる。ちなみにWindows環境。

# 利用するために必要なもの

Docker Toolbox（必須）
https://www.docker.com/products/docker-toolbox

ConEmu（任意。なくてもいいけどターミナルがしょぼいとやる気が出ないので）
https://conemu.github.io/

# 毎日実行するコマンド

毎日使ってるコマンドはこれぐらい。Compose 使うとコマンドがシンプルになるので便利。

Docker Toolbox 起動

```
$ docker-machine start default
```

Docker Toolbox にログイン

```
$ docker-machine ssh default
```

Docker Compose を使って起動

```
$ export WORK='my working directory'
$ docker-compose -f docker-compose.yml up -d
```

ブラウザで以下にアクセスして開発
http://localhost/

ログとか確認するためにDockerにログインしたいとき

```
$ docker exec -it 'container name' bash
```

ログインするのもめんどくさいとき

```
$ docker exec -it 'container name' tail /var/log/httpd/httpd-error.log -f
```

# Compose

volumes を使ってローカルのソースをコンテナにマウントしてる。

```
servera:
  build: ./servera
  ports:
    - "8080:80"
    - "8443:443"
  volumes:
    - ${WORK}/xxxxx:/xxxxx
  environment:
    - XXXXX=xxxxx
```

# ポイント

- シンプルなコマンドしか使わない
 - Compose使うとポートとかマウントとかの設定が隠ぺいできるので良い
- すべてコミットする
 - Dockerfileとかdocker-compose.ymlとかはGitで管理
- ユーザーとか環境に依存しない
 - AさんとBさんで異なる設定などは環境変数で吸収する
 - docker-compose.ymlだけ修正すればいいようにしてる
久々に個人的にwebアプリをローンチしてみたので利用したサービスとか言語とかを列挙

とりあえず個人レベルでもこの程度使えばサービスは世に送り出せるという一例として列挙しておきます。
費用はドメインの購入費用（1000円程度）ぐらいです。
AWSはローンチ時点では誰も使わないんでroute53の0.01$ぐらい。

なんとなく使う順で上から並んでます。

# バージョン管理

git前提ですが、無料でprivateリポジトリ持てるのは大きいのでbitbucketです。

[bitbucket](https://bitbucket.org/)

# ドメイン購入

個人的にお名前.comより手軽なんでこっち派。
今割引中期間です。

[ムームードメイン](https://muumuu-domain.com/)

# DNS

今回は概ねAWS利用なのでDNSもAWSです。

[Route53](http://aws.amazon.com/jp/route53/?sc_channel=PS&sc_campaign=acquisition_JP&sc_publisher=google&sc_medium=route_53_b&sc_content=route_53_e&sc_detail=route53&sc_category=route_53&sc_segment=76744854145&sc_matchtype=e&sc_country=JP&sc_brand=brand&ef_id=VtVs9wAABCiObCtf:20160427032536:s)

# サーバー

今回は概ねAWS利用なので、、、

[AWS(EC2)](https://aws.amazon.com/jp/ec2/)

# サーバーOS

開発してるときは16.04使ってたんですが、AWS無料枠では14.04が上限だったので14

ubuntu14.04

# webサーバー

phoenixのwebサーバーにリバースプロキシするためだけのnginx

[nginx](http://nginx.org/en/)

# サーバー監視

今だとNewRelicかどっちかという選択だと思いますが、
Mackerelの方がElixirに関しては手軽かなという印象です。

[mackerel](https://mackerel.io)

# アクセス解析

とりあえず入れますよね、っていう。

[Google Analytics](https://www.google.com/intl/ja_JP/analytics/)

# SSL証明書

めっちゃ普通ですが無料は強いです。

[Let's Encrypt](https://letsencrypt.jp/)

# 言語とフレームワーク

Elixir on Phoenixを実践するためだけにサービス作ったんで、
当然ここはこれになります。

[Elixir1.2.3](http://elixir-lang.org/)
[Phoenix1.1.4](http://www.phoenixframework.org/)

# DB

RDS使ってないんで普通にMariaDBです。
Postgresqlは仕事で多用するんで、使ってないものを使った感じ。

[MariaDB](https://mariadb.org/)

# UIフレームワーク

これもとりあえず一回使っておきたかったので使いました。
感想としては、現時点ではデザインの幅とか自由度とか考えるとbootstrapの方がいいですね。

[MaterialDesignLite](https://getmdl.io/)

# jsフレームワーク

Reactは試しに使ってみたという感じですが、既存のHTMLと組み合わせるとめんどくさいことしかないので、ReactならReactだけで作る覚悟決めた方が良さそうです。

[ReactJS](https://facebook.github.io/react/)
[jQuery](https://jquery.com/)

---

といったところで、とりあえずこれだけ使えばローンチまでは漕ぎ付けます。
もちろん、上記のさえなくても作れますが、一例として。
テスト > 左手入力

Test 投稿

左手だけで入力してみてどのキーが必要かチェック中

codingになるとShift keyは欲しい

あとは入力間違い時にBackspaceキー

Altは左手のホームポジションで使えば良さそうなので不要

Enterはあれば便利程度

カーソルは使用時に左手で押せば良さそう

ブラインドタッチができない点は目が疲れそう。

ctrl+sfhift+f: sublimeでの検索でよく使いそう。指がしんどいので割当てを検討
ctrl+u: マルチ選択(ctrl+d)の失敗時に使いそう。片手では手を目いっぱい伸ばさないといけない
slackでアンケートを取る

###備忘録

```:コマンド
/poll "好きな季節" "春" "夏" "秋" "冬"
```

これで
![Slack.jpg](https://qiita-image-store.s3.amazonaws.com/0/52141/05990fc2-8d54-2ea2-56fe-7ef1194ceb2b.jpeg)
こんな感じになる


###追記
これと連携しています
https://www.getsubcurrent.com/
WordPressの.htaccessで「www」URL正規化が上手く行かなかったときの対処法


wwwありか無しにURLを統一したくて、.htaccessに追記したが、
プラグインや、テーマのfounctions.phpに邪魔されて、
うまくリダイレクトされない場合がある。

##対応方法
■プラグインをすべてOFFにして、.htaccessを書き換えてみる
または、
■デフォルトのテーマ（公式テーマのTwenty Sixteenとか）に切り替えてから、.htaccessを書き換えてみる


上記の方法を1つずつやってみて、上手くリダイレクトがかかれば、
リダイレクトがかからない原因が
プラグインなのかテーマなのか判別ができる。
sedでiniファイルを操作する

iniファイルは複数のセクションが同じ名前のキーを持つことがあり、そのような場合1箇所だけ変更したくしても単純なsedの置換を使用するとまとめて変更されてしまう。

そのようなiniファイルの例としてはCentOSの/etc/yum.repos.d/CentOS-Base.repoなどがある。
これを例えばextrasセクションのenabledだけを0にしたい、ということがあるわけだ。[^1]

[^1]: 実際のところこれを行う場合、yum-utilsがインストールされていれば`yum-config-manager --disable extras`、あるいはdnfなら`dnf config-manager --set-disabled extras`で良いが、この記事の俎上に載せるのにふさわしいiniファイルの例として他にあまり良いものが思いつかなかった。

```ini:/etc/yum.repos.d/CentOS-Base.repo(コメント行を省略)
[base]
name=CentOS-$releasever - Base
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=os&infra=$infra
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
enabled=1

[updates]
name=CentOS-$releasever - Updates
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=updates&infra=$infra
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
enabled=1

[extras]
name=CentOS-$releasever - Extras
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=extras&infra=$infra
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
enabled=1

[centosplus]
name=CentOS-$releasever - Plus
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=centosplus&infra=$infra
gpgcheck=1
enabled=0
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
```

このような状況でsedを使って変更したい場合、アドレスの範囲指定を使うと良い。
例えば以下のようになるだろう。

```
# sed -ri '/^\[extras\]$/,/^\[/ s/^(enabled)( *)=.*$/\1\2=\20/' /etc/yum.repos.d/CentOS-Base.repo
```

範囲指定を行っている箇所は`/^\[extras\]$/,/^\[/`である。
つまり`/^\[extras\]$/`にマッチする行から、それ以降の`/^\[/`までにマッチする行までをsedの処理対象にするというわけである。

つまり上記iniファイルだと以下の行だけが処理対象になる。
この範囲にはenabledという名前のキーは1回しか現れないため、1箇所だけを変更することが可能である、というわけである。

```ini
[extras]
name=CentOS-$releasever - Extras
mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=extras&infra=$infra
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7
enabled=1

[centosplus]
```

なお、この方法はiniファイルの一番最後のセクションに対しても使用できる。
範囲指定の前半の正規表現にマッチする行以降に、後半の正規表現にマッチするものが現れない場合は最終行までが範囲になるからである。

従ってcentosplusセクションのenableを1にしたい場合はこのように書くことができる。

```
# sed -ri '/^\[centosplus\]$/,/^\[/ s/^(enabled)( *)=.*$/\1\2=\21/' /etc/yum.repos.d/CentOS-Base.repo
```

extrasとcentosplusを2つ同時に変更したければsedスクリプト内で単純に;で区切れば良い。

```
# sed -ri '/^\[extras\]$/,/^\[/ s/^(enabled)( *)=.*$/\1\2=\20/; /^\[centosplus\]$/,/^\[/ s/^(enabled)( *)=.*$/\1\2=\21/' /etc/yum.repos.d/CentOS-Base.repo
```

---
dotenvを利用して、Ansibleタスク中で環境変数を取得する

表題の通り、`.env`に書いた環境変数をAnsibleから取得する方法です。

dotenvをインストールしていない場合は、インストールして下さい。

```
gem install dotenv
```

読み込みたい環境変数を`.env`ファイルに記述します。

```:.env
DB_HOST=example.com
```

Ansibleのタスクでは`lookup`関数を利用して環境変数を取得します。

```yaml
- name: echo
  shell: bash -lc "echo {{ lookup('env', 'DB_HOST') }}"
```

playbook実行時に、`dotenv`コマンドとつけて実行すれば、`.env`ファイルに書いた環境変数が`lookup`コマンドで取得出来るようになります。

```
dotenv ansible-playbook playbook.yml -i inventory
```

[ansible-dotenv](https://github.com/crushlovely/ansible-dotenv)というプラグインも存在しているようですが、環境変数の読み込みとansibleは別々の機能と考えたいので、個人的には先頭にdotenvコマンドをつけて実行するほうが好みです。

---

`.env`ファイルはコミットしないように気をつけましょう！
Pageオブジェクトパターン Selenideのお作法

以下記事の続きです。

> Selenide～Javaで超簡単・簡潔にUIテストを書く～
> http://qiita.com/tatesuke/items/589e30ab9b3dc7037e26

SelenideではPageオブジェクトパターンを利用することを薦められているようです。
なんだか仰々しい感じがしますが、  
  
**1つのページを1つのオブジェクトとして表現しよう**  
  
ということです。つまり

~~~java
/* 検索ページ */
open("/login");
//"selenide"で検索
$(By.name("q")).setValue("selenide").pressEnter(); 

/* 検索結果ページ */
// 検索結果が10件あること
$$("#ires li.g").shouldHave(size(10));
// 先頭の結果がSelenideのページであること。
$$("#ires li.g").get(0).shouldHave(text("Selenide: Concise UI Tests in Java"));
~~~

のようにテストコードでロケータを使うのではなく、

~~~java
// テストコード
GoogleSearchPage searchPage = open("/login", GoogleSearchPage.class);
GoogleResultsPage resultsPage = searchPage.search("selenide");
resultsPage.results().shouldHave(size(10));
resultsPage.results().get(0).shouldHave(text("Selenide: Concise UI Tests in Java"));

-------

// 検索ページのPageオブジェクト
public class GoogleSearchPage {
  public GoogleResultsPage search(String query) {
    $(By.name("q")).setValue(query).pressEnter();
    return page(GoogleResultsPage.class);
  }
}

// 検索結果ページのPageオブジェクト
public class GoogleResultsPage {
  public ElementsCollection results() {
    return $$("#ires li.g");
  }
}
~~~

のように、ページごとにオブジェクトを作り、そのオブジェクト経由でテストを実施しましょうということです。

見ての通りPageオブジェクトは単なるPOJOで、`open`メソッドの第二引数にclassを渡して生成します。

これの利点は以下です。

* テストコードからロケータが消える  
→ページの構造や処理をPageオブジェクトに隠す（カプセル化）ことでテストコードはテストに専念できる
* Pageオブジェクトを複数テストで使いまわすことができる。


## SelenideのPageオブジェクトサポート
フィールドが多いフォームだと、Pageオブジェクトのなかで大量のロケータを記述する必要がでてきます。

そこでSelenideでは、以下のように`@FindBy`アノテーションを使ってフィールドを宣言するだけでPageオブジェクトとHTMLのフィールドを関連付けることができるようになっています。

```java
public class GoogleSearchPage {
  @FindBy(how = How.NAME, using = "q")
  private SelenideElement searchBox;
  
  public GoogleResultsPage search(String query) {
    searchBox.setValue(query).pressEnter();
    return page(GoogleResultsPage.class);
  }
}

public class GoogleResultsPage {
  @FindBy(how = How.CSS, using = "#ires li.g")
  public ElementsCollection results;
}
```

当然ながら単純に`new`をしてしまっては関連付けはされません。`open`メソッドや`page`メソッド経由でインスタンス化してください。

## まとめ
Pageオブジェクトをつかってテストコードからセレクタを追い出しましょう。
sprintfで桁指定してるときに桁あふれの数字を渡したらどうなるのか


```php
<?php
$num = 1;
printf('%03d', $num); // 001

$num = 1000;
printf('%03d', $num); // 1000
```

単純に桁あふれするだけでした。

phpの[sprintfのマニュアル](http://php.net/manual/ja/function.sprintf.php)にも

>オプションの数字。これは表示幅指定子です。 結果を（最低）何桁にするかを指定します。

と「最低何桁」かの指定って書いてありました〜
Atom エディタのdotfiles とパッケージを管理する

# Atom のdotfiles 管理

[Adding Atom to Your Dotfiles](http://jbranchaud.github.io/splitting-atoms/adding-atom-to-dotfiles.html) を参考にしたところ、以下の5つを管理すれば大丈夫らしい。

- config.cson
- init.coffee
- keymap.cson
- snippets.cson
- styles.less

こんな感じでシンボリックリンク貼ってます。

```
% ls -lF ~/.atom
total 40
drwxr-xr-x   5 yulii  staff   170  4 26 19:30 blob-store/
drwxr-xr-x  34 yulii  staff  1156  4 25 22:26 compile-cache/
lrwxr-xr-x   1 yulii  staff    48  4 26 19:30 config.cson@ -> /Users/yulii/projects/dotfiles/.atom/config.cson
lrwxr-xr-x   1 yulii  staff    48  4 26 19:30 init.coffee@ -> /Users/yulii/projects/dotfiles/.atom/init.coffee
lrwxr-xr-x   1 yulii  staff    48  4 26 19:30 keymap.cson@ -> /Users/yulii/projects/dotfiles/.atom/keymap.cson
drwxr-xr-x  13 yulii  staff   442  4 26 19:12 packages/
lrwxr-xr-x   1 yulii  staff    50  4 26 19:30 snippets.cson@ -> /Users/yulii/projects/dotfiles/.atom/snippets.cson
drwxr-xr-x  14 yulii  staff   476  4 10 19:54 storage/
lrwxr-xr-x   1 yulii  staff    48  4 26 19:30 styles.less@ -> /Users/yulii/projects/dotfiles/.atom/styles.less
```

## config.json の userId について

`config.json` に `userId` というハッシュ値が入っているがセキュリティ的には公開しても問題ないらしい。ちょっと気持ち悪い感じがしますが。

https://github.com/atom/exception-reporting/issues/7
https://github.com/atom/metrics/issues/18

# Atom のパッケージ管理

`apm list` でインストール済みのパッケージを一覧化できるのでそれを適当なファイルに出力して管理します。リストからインストールするには `apm install --packages-file` でファイルを指定すればOK.

```
# パッケージリストを保存
apm list --installed --bare packages.list

# パッケージリストからインストール
apm install --packages-file packages.list
```

という形です。出力した `packages.list` をGit 管理すればPC 間でパッケージを共有できます。

## お手製シェルスクリプト

今のところコマンド覚えるのが面倒なので、シェルスクリプトにまとめてます。

```atom/apm.sh 
#!/bin/sh
set -eu
# set -x

CWD=$(pwd)
SWD=$(cd $(dirname $0) && pwd)
LWD=$(cd $(dirname $0) && cd .. && pwd)

# trap
trap 'echo -e "\nabort!" ; exit 1' 1 2 3 15

# config {{{
PACKAGES_FILE="$SWD/packages.list"
# }}}

function apm_link() {
  cd $HOME/.atom
  ln -nfs $LWD/.atom/config.cson    config.cson
  ln -nfs $LWD/.atom/init.coffee    init.coffee
  ln -nfs $LWD/.atom/keymap.cson    keymap.cson
  ln -nfs $LWD/.atom/snippets.cson  snippets.cson
  ln -nfs $LWD/.atom/styles.less    styles.less
}

function apm_install() {
  apm install --packages-file $PACKAGES_FILE
}

function apm_dump() {
  [ -f $PACKAGES_FILE ] && rm $PACKAGES_FILE
  apm list --installed --bare > $PACKAGES_FILE
}

function apm_save() {
  git checkout master
  apm_dump
  git add $PACKAGES_FILE && git commit -m 'update apm installed list' && git push
}

case "$1" in
  link)    apm_link    ;;
  install) apm_install ;;
  dump)    apm_dump    ;;
  save)    apm_save    ;;
  *)       apm_install ;;
esac

exit 0
```

構成変わってしまうかもしれないので、現時点のコミットファイルへリンクしておきます。
[yulii/dotfiles](https://github.com/yulii/dotfiles/tree/1675f54fd4a72192ab1ce98c168546162be1f638)
Firefoxで、float:right が落ちる


# 実装例
https://fiddle.jshell.net/cn0bLwnf/

## firefox
![スクリーンショット 2016-04-27 10.52.47.png](https://qiita-image-store.s3.amazonaws.com/0/55145/5e6be242-240a-b9d5-90d8-e019b2114bfc.png "スクリーンショット 2016-04-27 10.52.47.png")
"with nowrap"の方で、"test"という文字が次の行に行ってしまっている。

## chrome
![スクリーンショット 2016-04-27 10.52.41.png](https://qiita-image-store.s3.amazonaws.com/0/55145/076d62b3-f755-6d4a-39d1-a57b3086bb32.png "スクリーンショット 2016-04-27 10.52.41.png")
"with nowrap"の方でも、その左端に"test"という文字列がある。

# 状況
上記 fiddle をみてもらうのが一番わかり易いが…

- [HTML] どちらも、divタグの中に、テキスト（"with nowrap" or "flow"）が入っているだけ
- [CSS] そのdivに、cssの ":after" で、"test"という文字列を記載している
- [CSS] この要素には、 _float:right;_ が付加されている。
- [CSS] "with nowrap"側と"flow"側との違いは、 __大外のdivに"white-space: nowrap;"がついてるかどうか__ だけ。

# 所感
- どうも、nowrapをつけると、インライン要素（with nowrapの部分）もしくは floatされた要素が、display: block; に近い挙動になるっぽい。
- これはFirefoxのバグなのか、それとも他のブラウザがイレギュラー実装なのか…
LaravelのDBをSQLiteに変更する


Laravelではデータベース（DB）としてHomesteadを簡単に使える。
でも重いので今回は **SQLite** を使います。

##手順

###データベースの設定変更

初期状態では **MySQL** になっているので `.env` ファイル内の 

- `DB_CONNECTION` を `= sqlite` に書き換える
- `DB_HOST` `DB_PORT` `DB_DATABASE` `DB_USERNAME` `DB_PASSWORD` の前に `#` をつけてコメントアウト

###SQLiteファイルの作成

```
$ touch database/database.sqlite
```

###migration実行

```
$ php artisan migrate
```

これでSQLiteの中に勝手に **users** と **password_resets** のテーブルが作成される。
（Laravelの認証機能を `$ php artisan make:auth` で実装するとこの中にユーザー情報が保存できるようになります）

##補足

私は **PhpStorm** を使っているので **Database** のところも設定し直しました。