OmniAICreator/Qiita-1.07M huggingface dataset:
Ionicで電卓を作成したので振り返る（仕様編）

Ionicで電卓を作成したので振り返る（始まり編）の続きです。
今回は、作った電卓の仕様についてです。

# アプリの画面
![xalc.png](https://qiita-image-store.s3.amazonaws.com/0/165335/9d8e7cae-19f7-9659-06ce-01c2f6570b1d.png)

１．履歴部分
計算結果の履歴が表示されます。Componentにて作成しています。下詰で表示します。
<img width="387" alt="Screen Shot 2017-09-09 at 16.11.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/43cf4958-2b4b-aa9b-26ff-887630e07519.png">

アニメーションします。表示からは見でた部分もスクロールで確認することができます。


２．メインディスプレイ
入力中の内容が表示されます。文字数が多い場合は可変で文字が小さくります。また、3桁ごとにカンマが自動で入ります。
<img width="376" alt="Screen Shot 2017-09-09 at 16.11.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/85d90147-1f54-378b-60a9-18bb8c56d2af.png">

文字数の自動調整にDirective。カンマの自動挿入にPipeを使っています。


３．サブディスプレイ
計算中の内容を表示します。

４．コントローラー部
各数値、四則演算の入力を受けつけます。
テーブル風レイアウトにはion-gridを使用しています。
backspaceはion-iconを使用しています。

# 使用、デザインの参考元

iPhoneの電卓に似てるとよく言われます。が、しかし、参考にしたのはXiaomiの電卓アプリです。
iPhoneの電卓によく似ているXiaomiの電卓アプリをさらに参考にした感じです。

iOS版、Android版の両方が出ているので興味があったら見てみてください。
・iOS
https://itunes.apple.com/jp/app/id1195791018?mt=8
・Android
https://play.google.com/store/apps/details?id=com.miui.calculator&hl=ja

# 目次
[・始まり編（ionic、目的、作成したソースコードの公開）](http://qiita.com/xiaca/items/b239ff42579c465d3046)
[・仕様編（アプリの仕様説明）](http://qiita.com/xiaca/items/bdddbd685f1d2d08e517)
[・Component編（ボトムアップ式のリスト実現方法、変更検知、謎のsetTimeout、アニメーション）](http://qiita.com/xiaca/items/4fef00a128314dc3116c)
[・Directive編（文字サイズの変更、変更検知、謎の計算式）](http://qiita.com/xiaca/items/38aed5b5f7b53031630e)

-----ここから下はいつか書く----
・Pipe編（カンマ）
・テスト編（環境構築、Providerのテスト）
・その他編（ion-iconって機種ごとにあったりなかったりで表示されないんですね）
・デプロイ周り編（platform直下のファイルについて、netlify、PWA）
Ionicで電卓を作成したので振り返る（始まり編）

お盆に実家に帰った際、せっかくなのでIonicで改めて何か作成しようと思いたち、電卓を作りました。何気なくはじめましたが、以外といろんなことにハマったので振り返ります。主に苦しい実装をしている箇所が中心です。

◯目次
[・始まり編（ionic、目的、作成したソースコードの公開）](http://qiita.com/xiaca/items/b239ff42579c465d3046)
[・仕様編（アプリの仕様説明）](http://qiita.com/xiaca/items/bdddbd685f1d2d08e517)
[・Component編（ボトムアップ式のリスト実現方法、変更検知、謎のsetTimeout、アニメーション）](http://qiita.com/xiaca/items/4fef00a128314dc3116c)
[・Directive編（文字サイズの変更、変更検知、謎の計算式）](http://qiita.com/xiaca/items/38aed5b5f7b53031630e)

-----ここから下はいつか書く----
・Pipe編（カンマ）
・テスト編（環境構築、Providerのテスト）
・その他編（ion-iconって機種ごとにあったりなかったりで表示されないんですね）
・デプロイ周り編（platform直下のファイルについて、netlify、PWA）

## Ionicについて

WEB系の技術でモバイルアプリを作るためのフレームワーク＆CLIツール。フレームワークとしては、Bootstrapに雰囲気が近い印象です。
とっかかりの敷居が以上に低く動くアプリがすぐに作れる印象です。
1年前は色々痒いところに手が届かない印象でしたが、昨今のWEB技術発展に伴いやれることがどんどん増えている印象です。Ionicが変わらなくても周りがどんどん変わっていくという・・・。
もちろんIonic自体も1年前と比べてかなり変わってきました。

# 目的

Ionicは今年に入って目まぐるしくアップデートしている印象で、その流れに若干ついていけていなかったので腰を据えて勉強し直そうと思ったことがきっかけです。
なるべく丁寧な実装を心がけています。が、しかし、開発が進むに連れて苦しい実装が増えていきました。

# なぜ電卓か？

当初はお盆だけで作業を終わらせるつもりだったのでなるべく仕様が決まっているものにしました。電卓なら仕様は決まっているしJavaScriptのサンプルもたくさんあると思って選びました。

# 作成したアプリ＆ソースコードについて

・Netlify
http://xcalculator.netlify.com/
※PCで見るとIonic-labが開きスマホで見るとPWAとなるはず

・Github
https://github.com/scrpgil/xcalculator
Laravelを使ったAPIの作成フロー

# 開発環境
- Laravel5.4
- Vagrant(Homestead)
- Windows（sequelProのためMacも使う）

# 目的
Laravelを使ってアプリ開発を行うための個人的な備忘録です。

# 操作フロー
1. モデルとマイグレーションの作成を行う

        // モデルの作成（モデル名はパスカルケースで単数表記を推奨）
        php artisan make:model Http/Models/モデル名

        // マイグレーションの作成（テーブル名はスネークケースの小文字で複数表記を推奨）
        php artisan make:migration create_テーブル名_table --create=テーブル名

1. テーブルの設計を考え、1で作成したマイグレーションファイルに記述する
    - sequelProのマイグレーション作成プラグインの利用がオススメです
        - http://co.bsnws.net/article/203

1. マイグレーションファイルを実行しテーブルを作成する（※仮想開発環境で実行する）

        php artisan migrate

1. コントローラーを作成する（※不要な場合は省略）

        // テーブル名はパスカルケースの複数表記を推奨
        php artisan make:controller [テーブル名]Controller

1. テストデータを作成する（※不要な場合は省略）
	1. 作成

			// シーディングファイルの名称はパスカルケースで複数表記を推奨
			php artisan make:seeder [テーブル名]TableSeeder

	1. ファイルの記述（サンプル）

			// サンプル
			// テストデータに日本語が入ってくる
			$faker = Faker\Factory::create('ja_JP');
			
			for ($i = 0; $i < 10; $i++) {
			    App\[モデル名]::create([
			        'uuid' => $faker->text(32),
			        'created_at' => $faker->dateTime('now'),
			        'updated_at' => $faker->dateTime('now'),
			    ]);
			}

	1. DatabaseSeederに実行コードを記述

			public function run()
			{
			    $this->call(UsersTableSeeder::class);
			    $this->call(PostsTableSeeder::class);
			    $this->call(CommentsTableSeeder::class);
			}

	1. シーダーファイルの実行

			// DatabaseSeederを実行する
			php artisan db:seed
	
			// 特定のクラスのシーダーのみを実行する場合
			php artisan db:seed --class=実行するシーダークラス名

1. テーブルデータに合わせてModelのデフォルト設定を変更する

        protected $table = 'hoge_data';
        protected $primaryKey = 'hoge';
        public $timestamps = false;
        // Carbonインスタンスへ自動変換したいカラムを指定する
        protected $dates = ['created_at', 'updated_at', 'deleted_at'];

1. Eloquent補完用のデータを生成（※仮想開発環境で実行する）

        // _ide_helper_models.php内に予測変換用のコメントが作成される
        // そのコメントをコピーし、作成したモデルクラスのところに貼り付ける
        php artisan ide-helper:models

1. ルーティングに記載する

        Route::post('/hoge','[コントローラー名]@メソッド名');

1. リクエストのバリデーションクラスを用意する

        php artisan make:request HogeRequest

1. テスト用クラスを用意する

        // --unitを付けるとUnitディレクトリに生成する
        // phpunitコマンドでテストを実行する
        // test◯◯というメソッドがテスト対象となる（◯◯は任意の名前を付けることが可能）
        php artisan make:test HogeDataTest

# 参考
- マイグレーションファイルの修正（データ型の変更）
    - http://laraweb.net/practice/1301/
- マイグレーションファイルのエラー対策
    - http://qiita.com/nunulk/items/abed8bf43af1bd7e6365
- マイグレーションの詳細
    - http://qiita.com/qiita-kurara/items/9a34f97a184a1d8c1c35
- モデルのデフォルト
    - http://www.larajapan.com/category/eloquent%E3%82%92%E3%82%88%E3%81%8F%E7%9F%A5%E3%82%8B/
    - http://qiita.com/S346/items/9c5718b960eb0501c91f
- マイグレーションで作成するテーブルの文字コード（照合順序など）
    - http://qiita.com/kazu56/items/6af85ffcf8d3954455ad
- Laravel 5.4でWeb APIを作る
    - http://blog.asial.co.jp/1498
- Laravel 5.4 で手軽にテストを書こう！
    - https://www.infiniteloop.co.jp/blog/2017/05/laravel-5-testing/
Anaconda+jupyterNoteBookでのTensorFlow環境構築

社内勉強会での環境構築用です。

仮想化が上手くいかない場合の方法

まずは、Anacondaをダウンロード&インストール

https://repo.continuum.io/archive/.winzip/

↑から「Anaconda2-4.4.0-Windows-x86.zip」をダウンロードして、展開後インストール


インストール後、Anaconda Navigatorを起動
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/505b30b7-a869-326a-9372-64fbf8e68eca.png)

Environmentsを選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/32f23b58-fc48-de6e-5695-47ecfc095cfc.png)

右下の「Create」を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/d355ce29-1699-2ede-4a28-c7a445fdb16f.png)

好きな名前(「TensorFlow」でいいです)を付けてPython3.5を選択し「Create」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/31013d56-35ba-90c0-adc2-2008336e00c9.png)

自分でつけた名前の環境が出来てるので、そこの「▶」から「Open Terminal」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/68adbd4f-b676-136a-9e59-a4989304fa43.png)

ターミナル上で、以下の2つのコマンドを打つ

TensorFlowのインストール
「pip install tensorflow」
MatPlotLib(グラフなどの図形を表示するためのライブラリ
「pip install matplotlib」

Homeを選択し、「Applications on」から自分で作った環境を選択後「jupyter notebook」のところにある「Launch」を選択
(最初は「Installl」になっているので、クリックするとjupyter notebookのインストールが開始されます。数分待つとLaunchになります」

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/14bccc92-82ec-05be-c33b-49dd40801c70.png)

こんな感じの画面が出たら終わりです！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123981/988e3ea1-7f28-bd1f-b2fa-eb7a7e5eeaf7.png)


環境構築お疲れ様です。勉強会で待ってます
[備忘] 複数Githubアカウントでssh接続設定(config)を使い分ける手順

会社用とプライベート用など、複数のGithubアカウントを使い分ける際の設定方法をまとめました。

# ssh鍵を作成する
まず、ssh接続に使用する鍵をローカル環境で作成します。使用したいアカウント毎に、以下のコマンドで鍵ペアを作成します。



```bash:bash
cd ~/.ssh
ssh-keygen -t rsa -C {Githubメールアドレス} -f {作成する鍵の名前}
```

パスフレーズを設定する為、任意の文字列を2回入力します。
実行後、秘密鍵（ファイル名）と公開鍵(ファイル名.pub)が作成されます。

# ssh設定ファイル(~/.ssh/config)の編集
アカウント毎にssh鍵を使い分ける為、ローカル環境のssh設定ファイルにHost(接続元)の登録を行います。

ssh設定ファイル`~/.ssh/config`を以下の通り書き換えます(存在しない場合は作成)。
今回はmainとsubでアカウントを切り替える為、２つのHostを登録します。
項目`IdentityFile`に、それぞれのアカウントで使用する秘密鍵のパスを指定します。

```:~/.ssh/config
Host github.com.main # メインアカウント
  HostName github.com
  User git
  Port 22
  IdentityFile ~/.ssh/id_rsa_main  # メインアカウント用の鍵
  TCPKeepAlive yes
  IdentitiesOnly yes

Host github.com.sub # サブアカウント
  HostName github.com
  User git
  Port 22
  IdentityFile ~/.ssh/id_rsa_sub　 # サブアカウント用の鍵
  TCPKeepAlive yes
  IdentitiesOnly yes

```

# Githubに公開鍵を登録する
作成した公開鍵をGithubに登録します。

Githubにログインして、[Settings] -> [SSH keys] -> [Add SSH key]で作成した公開鍵を登録します。（詳細は[こちら](https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/)を参照）

# ssh接続確認
ssh設定ファイルに登録したHostで、正しくssh接続ができることを確認します。

```bash:bash
ssh -T git@github.com.main
ssh -T git@github.com.sub
```

秘密鍵のパスフレーズを聞かれるので、正しく入力すると以下のメッセージが返ってきます。

```bash:bash
Hi {yourname}! You've successfully authenticated, but GitHub does not provide shell access.
```

# cloneする
リポジトリをcloneをする際には、ssh設定ファイルに登録したHostを指定します。

```bash:bash
# (メインアカウントを使う場合：)
git clone git@github.com.main:username/repository-name.git

git remote add origin git@github.com.main:username/repository-name.git
```

以下のコマンドでgitのurlが正しく設定されているか確認します。

```bash:bash
git config remote.origin.url
```

`git@github.com.xxx:~`のxxxの部分が`~/.ssh/config`に設定したHost名になっていればOKです。今後gitコマンドではHostで設定したssh鍵が使用されます。


# git設定ファイル(gitconfig)の設定
ここまでsshの鍵を設定しましたが、gitのユーザー名も設定する必要があります。以下を設定します。


普段使う名前は、以下のコマンドでglobalに設定しておきます。
（`~/.gitconfig`を直接編集してもOK）

```bash:bash
git config --global user.name {ユーザー名}
git config --global user.email {メールアドレス}
```

リポジトリ毎ににユーザ名を切り替える場合、以下を実行します。
（`{リポジトリのパス}/.git/config`を直接編集してもOK）

```bash:bash
cd {リポジトリ名}
git config --local user.name {ユーザー名}
git config --local user.email {メールアドレス}
```

# 参考
-  [gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](http://qiita.com/shizuma/items/2b2f873a0034839e47ce)
- [1台のPCで複数のGitHubアカウントを使う(SSHとhttps)](http://dackdive.hateblo.jp/entry/2015/10/12/210547)
RubyMine：導入時にやるべきオススメの設定


## 概要
2017年3月からRubyMineで開発を始めましたが、Vim + IDEのおかげで、とても快適に開発ができるようになりました。

RubyMineの初期設定だと色々と戸惑うことがありますが、以下の設定をしておけば、スムーズに開発できると思います。

簡単ではありますが、紹介します。

# 設定一覧
## メモリの割り当てを増やす
* 以下を参考にして設定してください。

### [RubyMine：メモリの割り当てを増やす方法](http://qiita.com/iwaseasahi/items/ea1af39be48a634573d0)

## 日本語化する
* RubyMineのデフォルトは、すべて英語です。
* 使いこなすためにも日本語化することをオススメします。
* 以下を参考にして設定してください。

### [RubyMine：Macで日本語対応](http://qiita.com/iwaseasahi/items/e59ac503373adf1a7f11)

## インデントを変更する
* 以下を参考にして設定してください。

### [RubyMine：インデントを調節する方法](http://qiita.com/iwaseasahi/items/62ad9b8d5bed57e663ed)

## キーマッピングの設定
* 以下を参考にして設定してください。

### [RubyMine：キーマップの設定方法](http://qiita.com/iwaseasahi/items/5a57a377d6880de6dbe9)

## ファイルの階層を表示
* 以下を参考にして設定してください。

### [RubyMine：ファイルの階層を表示する方法](http://qiita.com/iwaseasahi/items/d936bff2097e72276bcc)

## 日本語を等幅フォントに変更する
* 以下を参考にして設定してください。

### [RubyMine：日本語を等幅フォントに変更する方法](http://qiita.com/iwaseasahi/items/66601a466bb3a1b50cf2)

## ideavimの設定
* 普段Vimで開発している方のみ必要です。
* 以下を参考にして設定してください。

### [RubyMine：ideavimの設定 & ideavimrcについて](http://qiita.com/iwaseasahi/items/4b19bdf1885801649460)


## 総括
以上が、オススメの設定になります。

日本語化するだけでも、だいぶ使いやすくなると思います。

他にもオススメがあったら教えてください^^
Goの同時関数呼び出しを１回で済ませられるライブラリ 「SingleFlight」 が便利

# Goの同時関数呼び出しを１回で済ませられるライブラリ 「SingleFlight」 が便利

## tl;dr
- 高頻度に叩かれがちな重めの取得系関数呼び出しは[SingleFlight](https://godoc.org/golang.org/x/sync/singleflight) を使おう！

## 動機
- Cacheが切れた途端Mysqlに大量のアクセスが流れ込み、LAが上がる現象をどう回避しようか考えていたときに、[SingleFlight](https://godoc.org/golang.org/x/sync/singleflight) というライブラリを見つけたため使えるか計測してみた。

## SingleFlightって何？
- 複数人が同じ関数呼び出しを同時にした場合、最初の１人だけ関数を実行し、残りの人は、最初の人が実行した関数呼び出しが終了するまで待機し、最初の１人が関数呼び出しの結果を取得したら、待機してる残りの人に結果をシェアしてくれる。
- Goからリソースへのアクセスが同時に行われても、１本だけでよくなるから嬉しい。効率的。
- もちろんイミュータブルな関数じゃないと使えない。

## 計測環境
### 計測対象
- 3本のMysqlQueryを叩き、合計が500ms位かかるGo API

### 計測ツール
- [vegeta](https://github.com/tsenart/vegeta)

### 計測コマンド
- 秒間100リクエスト を１分間 (叩きすぎかな?)

```
echo "GET http://localhost:1323/hoge" | vegeta attack -duration=1m -rate=100 | vegeta report -reporter=plot > plot.html
```

### 計測パターン
1. そのまま
2. 10秒毎で切れるMemCache を挟む
3. SingleFlight を挟む
4. 10秒毎で切れるMemCache + SingleFlight を挟む 

## 計測結果
1. そのまま
	- ほぼ全部500。普通にやると耐えられない。
![vegeta-plot.png](https://qiita-image-store.s3.amazonaws.com/0/42116/a35a207a-cc75-bd63-575c-d379a6c55d7b.png)


2. 10秒毎で切れるMemCache を挟む
	- キャッシュが切れた途端、Mysqlが落ちてしまい、それ以降は全て500に。
![vegeta-plot-cache10s.png](https://qiita-image-store.s3.amazonaws.com/0/42116/cfaa1801-fe31-9703-936c-1fb5c1c9c9b1.png)

3. SingleFlight を挟む
	- リクエスト毎にレイテンシに差が出てしまうが、正しく200で返せる
![vegeta-plot-singleflight.png](https://qiita-image-store.s3.amazonaws.com/0/42116/7a081093-f448-2bb1-27a5-54af8e6b3754.png)


4. 10秒毎で切れるMemCache + SingleFlight を挟む 
	- キャッシュが切れてセットされるまでの間も、正しく200で返せる
![vegeta-plot-cache10s-singleflight.png](https://qiita-image-store.s3.amazonaws.com/0/42116/ab272cc9-ac6e-1d21-81a1-2ab3fb50ead4.png)


## 結論
- 重めのMysqlを叩く + 高頻度リクエスト => SingleFlightは必須。
テクスチャアトラスを利用する（HTML5でブラウザゲームを作る）

トランプカードの様に画像を複数用意してスプライト化する場合、それらを一枚の大きな画像にまとめて切り出しの情報と共に扱うのが最適化の定石です。
そういう形式を一般的にテクスチャアトラス(スプライトシート)と呼ぶようです。

実際にテクスチャアトラスを作ってみましょう。

#テクスチャアトラスの作成
テクスチャアトラスは画像ファイルとjsonファイルのセットで作ります。

**df5.png**
![df5.jpg](https://qiita-image-store.s3.amazonaws.com/0/198186/122d4f7f-cbbe-b38e-88c2-bb759f04818b.jpeg)

HMG大富豪ではこのようなPNGファイルを用意しました。
カード一枚のサイズは100x150ピクセルで、画像全体で1300x750ピクセルになります。
そしてこの画像データ内の左上のスペードのAから順に連番の名前(0.png ~ 55.png)を付けて情報化します。

jsonファイルの中身は以下の様になっています。

**df5.json**

```js:
{
	"frames": {
		"0.png": {　　　　　　　　　　// 参照するための名前を指定
			"frame": {
				"x": 0,
				"y": 0,
				"w": 100,
				"h": 150
			},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {
				"x": 0,
				"y": 0,
				"w": 100,
				"h": 150
			},
			"sourceSize": {
				"w": 100,
				"h": 150
			}
		},
		"1.png": {
			"frame": {
				"x": 100,
				"y": 0,
				"w": 100,
				"h": 150
			},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {
				"x": 0,
				"y": 0,
				"w": 100,
				"h": 150
			},
			"sourceSize": {
				"w": 100,
				"h": 150
			}
		},

　：
繰り返し
　：

	},
	"meta": {
		"image": "df5.png",
		"size": {
			"w": 1300,
			"h": 750
		},
		"scale": "1"
	}
}
```

テクスチャ（切り出す画像単位）の名前と位置とサイズを枚数分繰り返し、最後に参照する画像ファイル名と全体サイズを追加します。
（同じ部分の繰り返しが多いのでこれらを自動的に生成するスクリプトを組んでおくと後々楽できます）

これでテクスチャアトラスが完成しました。

#テクスチャアトラスの読み込みと使用

まず、PIXI.jsのローダー機能を使ってテクスチャアトラスを読み込みます。

```js:
PIXI.loader
	.add("assets/df5.json")　　// jsonファイルのパスを指定
	.load(function (loader, res) {
		f_cb_done();　　　　// 読み込み完了後に呼び出すコールバック関数
	});

```

読み込み完了しないとデータが扱えないのでこのようにコールバックを使用して終了後の処理をキックします。
読み込みが終わればあとは名前で参照するだけです。

```js:
var texture = PIXI.Texture.fromFrame("0.png");　　// テクスチャアトラスからテクスチャを名前で切り出す
var sprite = new PIXI.Sprite(texture);　　　　　　　// テクスチャを指定してスプライトを生成
```
あとは前回同様、ステージに追加してやればOKです。
今回は少し傾けて表示してみましょう。

```js:
var degree = 20;
sprite.rotation = degree * Math.PI / 180;
```
スプライトのrotationプロパティに角度を指定するとスプライトが回転します。
指定する単位はラジアンで、0~360度の代わりに0~2πの範囲で指定することになります。
度からラジアンに変換する自前の関数を用意しておくと便利です。

**実行結果サンプル**
![Screenshot from 2017-09-09 18-12-08.jpg](https://qiita-image-store.s3.amazonaws.com/0/198186/1f4bd516-428a-fe77-2422-7f4a9d82342f.jpeg)


**PIXI.jsを利用して作成したブラウザゲーム(ハイブリッドアプリ)**
 [リバーシ](https://play.google.com/store/apps/details?id=net.hasemonmon.rev "リバーシ")
![apple-touch-icon-180x180.png](https://qiita-image-store.s3.amazonaws.com/0/198186/4a5eb89b-ab47-8d82-8cae-9de1200d4934.png)
実際にインストールしてプレイ後にストアでレビューしてもらえると嬉しいです。
RubyMine：日本語を等幅フォントに変更する方法


## 概要
RubyMineの初期設定では、日本語フォントが等幅になっていません。

Migu 1Mをインストールして設定することで等幅になります。

その方法を紹介します。

## 手順
###  Migu 1M フォントをダウンロード
#### ・[M+とIPAの合成フォント](http://mix-mplus-ipa.osdn.jp/)にアクセスします。

#### ・MIGUをクリックします。

![スクリーンショット 2017-09-09 18.19.16.png](https://qiita-image-store.s3.amazonaws.com/0/142810/3fc02407-c637-e06e-77b5-0ae8e46a6c48.png "スクリーンショット 2017-09-09 18.19.16.png")

#### ・下にスクロールし、Migu 1Mに進みます。

![スクリーンショット 2017-09-09 18.20.43.png](https://qiita-image-store.s3.amazonaws.com/0/142810/6222696c-0b8b-8c86-860a-12da5c92ae35.png "スクリーンショット 2017-09-09 18.20.43.png")

#### ・Migu 1Mをダウンロードします。

![スクリーンショット 2017-09-09 18.20.43 2.png](https://qiita-image-store.s3.amazonaws.com/0/142810/311fc267-63b0-31fa-53ba-0f220fb66163.png "スクリーンショット 2017-09-09 18.20.43 2.png")

#### ・ファイルを解凍します。

![スクリーンショット 2017-09-09 18.23.10.png](https://qiita-image-store.s3.amazonaws.com/0/142810/972ea0c7-ba2f-a4bf-c140-83f33550baf9.png "スクリーンショット 2017-09-09 18.23.10.png")

#### ・migu-1m-regular.ttfをダブルクリックします。

![スクリーンショット 2017-09-09 18.24.12.png](https://qiita-image-store.s3.amazonaws.com/0/142810/c251b150-4895-50de-6099-ebb3573d9dc7.png "スクリーンショット 2017-09-09 18.24.12.png")

#### ・フォントをインストールします。

![スクリーンショット 2017-09-09 18.25.31.png](https://qiita-image-store.s3.amazonaws.com/0/142810/16de1dcb-0499-ff26-a8bc-73815e32bbce.png "スクリーンショット 2017-09-09 18.25.31.png")

* Font Bookが開き、Migu 1Mが表示されていなくても正常にインストールされています。

### RubyMineでフォントの設定
* RubyMineが起動している場合は、再起動してください。

#### ・Preferencesをクリックします。

![スクリーンショット 2017-09-09 15.52.59.png](https://qiita-image-store.s3.amazonaws.com/0/142810/cb88181e-4222-7d34-7aeb-89bde182db12.png "スクリーンショット 2017-09-09 15.52.59.png")

#### ・「エディター」から「フォント」をクリックします。

![スクリーンショット 2017-09-09 18.31.16.png](https://qiita-image-store.s3.amazonaws.com/0/142810/75255305-5621-4cdf-7e82-535a8d9ff7ab.png "スクリーンショット 2017-09-09 18.31.16.png")

#### ・フォントを「Migu 1M」に変更します。

![スクリーンショット 2017-09-09 18.34.01.png](https://qiita-image-store.s3.amazonaws.com/0/142810/79203d02-3330-5005-8029-a27783d3a9cd.png "スクリーンショット 2017-09-09 18.34.01.png")

#### ・「適用」をクリックします。

![スクリーンショット 2017-09-09 18.37.14.png](https://qiita-image-store.s3.amazonaws.com/0/142810/0ff464f1-df84-29c3-f9dc-95e2cc781429.png "スクリーンショット 2017-09-09 18.37.14.png")

#### ・日本語が等幅になりました。

![スクリーンショット 2017-09-09 18.38.28.png](https://qiita-image-store.s3.amazonaws.com/0/142810/39e60821-00f2-1492-b866-f38de60934f3.png "スクリーンショット 2017-09-09 18.38.28.png")

#### 以上で、設定は完了になります。
Vimのインサートモードで自動インデントさせずにクリップボードの内容をペーストする


以下の記事でも対処法を書いている方がいたのですが，この方法は記載されていなかったようなので残しておきます．

* [vimでペーストするときインデントさせない - Qiita](http://qiita.com/quwa/items/019250dbca167985fe32)
* [ペーストしたらインデントがずれてしまった時の対処法 - Qiita](http://qiita.com/yukofeb/items/1706ce18b5a21031d266)

## やり方

インサートモードで `<C-r><C-p>*` とすることでインデントされずにペーストできます．

## 環境

``` shell:shell
$ vim --version | head -4
VIM - Vi IMproved 8.0 (2016 Sep 12, compiled Aug  8 2017 03:46:05)
MacOS X (unix) version
Included patches: 1-891
Compiled by travis@Traviss-Mac-598.local
```

``` vim:vim
set autoindent
```

## 挙動の例

``` swift:クリップボードの内容
func hoge(b: Bool) {
    if b {
        print("hoge")
    } else {
        print("not hoge")
    }
}
```


ペーストした時（`i<C-r>*<ESC>`）の内容（自動インデントされちゃう場合）

``` swift:vim
func hoge(b: Bool) {
    if b {
            print("hoge")
                } else {
                        print("not hoge")
                            }
                            }
```

ペーストした時（`i<C-r><C-p>*<ESC>`）の内容（自動インデントさせない場合）

``` swift:vim
func hoge(b: Bool) {
    if b {
        print("hoge")
    } else {
        print("not hoge")
    }
}
```
bashとzshで重複したPATH内のエントリ削除

設定ファイル内で環境変数`PATH`の重複を削除する方法。

よく見かけるパターンだと、

- パスに空白が含まれていたらそこで分割されてしまう
- `PATH=""`だとエラーが生じる
- pathmergeのような専用関数を通す必要がある

とちょっと不便な部分があったため作成。

## bashの場合

```bash
# 連想配列が使えるかどうかチェック
if typeset -A &>/dev/null; then
  # 使える場合
  typeset -A _paths
  typeset _results
  while read -r _p; do
    if [[ -n ${_p} ]] && (( ${_paths["${_p}"]:-1} )); then
      _paths["${_p}"]=0
      _results=${_results}:${_p}
    fi
  done <<<"${PATH//:/$'\n'}"
  PATH=${_results/:/}
  unset -v _p _paths _results
else
  # 使えない場合はawkで
  typeset _p=$(awk 'BEGIN{RS=":";ORS=":"} !x[$0]++' <<<"${PATH}:")
  PATH=${_p%:*:}
  unset -v _p
fi
```

以上を.bashrcの最後に書いておく。

この方法では、最初のエントリだけが残る。
つまり、

```bash
/usr/local/bin:/usr/bin:/usr/local/bin
```

なら、

```bash
/usr/local/bin:/usr/bin
```

となる。

やっていることは単純。

1. コロンを改行に置き換え
2. 連想配列に登録
3. 初めて出会った行ならにパスに追加

メリットとしては、

- パスに空白やアスタリスクが含まれていても大丈夫
- 順番を維持できる
- 連想配列が使える(bash4.2以上)なら外部コマンドを使用しない

ということでちょっとお得かも。

## zshの場合

`typeset -U`を利用すれば自動で重複エントリ絞ってくれる。
変数の挙動そのものを変えるので、どこに書いても一緒。
.zshrcの最後に書くのが分かりやすくて良さげ。

```zsh
typeset -U PATH
```
GooglePlayConsoleにある翻訳サービス(有料)を試してみた

もっと海外のアプリInstall数を増やしたい。いろいろと模索していたのですが、GooglePlayConsoleに　ある「翻訳サービス」が比較的お手頃なお値段で、多言語化対応できそうだったので試してみました。

※GooglePlay ConsoleのMenuに表示されてる
<img width="297" alt="スクリーンショット 2017-09-09 13.32.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/162091/32d4893e-621a-3538-6816-588d6e0f9043.png">

## 翻訳対象としたアプリ

[![動画](http://img.youtube.com/vi/HSN7b0xnLqY/0.jpg)](http://www.youtube.com/watch?v=HSN7b0xnLqY)
３Dボール転がしー転球ー
[Android] https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere
[iOS] https://itunes.apple.com/us/app/ball-in-a-3d-maze-puzzle-tenkyu/id1189800250?l=ja&ls=1&mt=8


端末を傾けるだけのシンプルなゲーム。ボール転がしは万国共通でありそうなものなので、翻訳したらプレイしてくれる対象者が増えるんじゃないかという目論見です


## 翻訳をはじめる

1. GooglePlayConsoleの「翻訳サービス」から「新しい注文」ボタンを選択
2. 原文と訳文の言語を選択し、次へボタンを選択
  1. 原文はもちろん日本語を選択
  2. 訳文は、言語人口から考えると、英語、中国語、スペイン語あたりを抑えておくとよさそうですが、スペイン語の翻訳は若干高く見送り。今回は、英語、韓国語、繁体字（台湾）、簡体字（中国）を選択しました。アジア圏なら日本人が作ったゲームでもプレイしてくれるかなと思い優先的に入れてみました。
3. 「ストアの掲載情報テキスト」にチェックを入れると、GooglePlayに設定してあるストア掲載情報が表示されるので、内容を確認して次へ進む
 1. 文字数に応じて翻訳費用が変動するので、キチンと日本語の時点で無駄を削っておきます
4. 最後に価格が表示されるので、購入手続きに進みます。
 1. 今回は1言語あたり$35程度の費用がかかりました

## 翻訳が届くのを待つ
1週間ほどで4言語の翻訳が届きました。メールで連絡がきます。
元の日本語の文章にミスタイプがあったのですが、翻訳会社より英語で連絡がきました。単純なミスだったので、ミスタイプだった旨を英語で返信。

## 翻訳をStoreに反映する
翻訳された文章は、CSVでダウンロードすることも可能ですが、直接、GoogleStoreConsole上で反映することも可能です。

![スクリーンショット.png](https://qiita-image-store.s3.amazonaws.com/0/162091/d370603c-846c-65df-1d9b-3ad82091b787.png)

翻訳が納品されるとこのような画面が表示されますが、ここで適用を選択すると（一度確認ダイアログがでます）、直接ストアの説明文が更新されます。

## 翻訳された説明ページ
[英語] https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere&hl=en
[韓国語]https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere&hl=ko
[繁体字]https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere&hl=zh-tw
[簡体字]https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere&hl=zh-cn
[日本語]https://play.google.com/store/apps/details?id=com.keepgamesimple.rollingsphere&hl=ja

## 反省点
文字数で価格が決まるため、「LEVEL1」など見出しなどは原文から削っていて、あとから足せばいいかなと思っていたのですが、中国語や韓国語がまったく読めないため、見出しをどこに足したらいいかわからなくなりました。Google翻訳を使いながら正しい位置に入れる作業が発生したので、ケチらないで原文に入れておけばよかったです。

## 翻訳した結果
「転球」のストア情報が5ヶ国語に対応しました。これで各国のダウンロード数が増えるかは未知数ですが、しばらくウォッチしつつ、結果が上がってくれば、記事にしようと思います。

アプリ自体の翻訳も進めていて、一通りの実装が完了したら、AppStore側も多言語化対応していく予定です。
サーバーにファイルが送りづらいときの対処法

# はじめに
環境
クライアント
Windows 10

サーバー
ESXi-> PhotonOS -> Dockerコンテナ

ESXiのブラウザコンソールでDockerコンテナ内にログインできるが、ssh/ftpも立ち上がってないのでファイルを転送するのが一苦労でした。
また、大人の事情でポートが塞がれてファイルが送れない場合もあるかと思います。

このように、サーバーにはログインできるけどファイルを送るのが大変なときがあったので解決してみました。

# 設計
クライアントからサーバーに繋ぐのが難しいのであれば、サーバーからクライアントに繋いでもらう設計にしました。
具体的に言うと、クライアントでファイルサーバー/アップローダーを立ち上げ、サーバー側のwget/curlでファイルを送受信します。
さらに、クライアントがポート開放できない環境だったため、ngrokを利用してアクセスしています。

# 実装
プロジェクト一式
[github](https://github.com/junmoka/FileServer)

一部抜粋

```go
func main() {
	http.Handle("/files/", http.StripPrefix("/files/", http.FileServer(http.Dir("files/"))))
	panic(http.ListenAndServe(":8080", nil))
}
```

ファイルダウンロード

```bash
wget http://localhost:8080/files/fileName
```

ファイルアップロード

```bash
curl -X POST http://localhost:8080/upload -F "file=@filePah"
```

ブラウザが利用できる環境であればTopページでファイルアップロード
http://localhost:8080/files/ でファイル一覧の表示が可能です

# まとめ
環境構築がめんどくさかったり、ファイル転送のためだけにssh等のセキュリティリスクを増やすのであれば
このような実装もありだと思います！

もっといい方法ありましたら教えていただけると幸いです！
RubyMine：ファイルの階層を表示する方法


## 概要
RubyMineでは、ファイルの階層を画面上部に表示することができます。

Ruby on Railsでは、同じ名前のViewファイルが多くあります。

それがどの階層なのか一目でわかることは、開発スピードにおいて重要です。

設定は、非常に簡単なので常に表示しておくことをオススメします。

## 手順
### ・ファイルを1つ開きます。

![スクリーンショット 2017-09-09 18.05.44.png](https://qiita-image-store.s3.amazonaws.com/0/142810/740206a3-3975-d6a3-005e-c8d0c6109648.png "スクリーンショット 2017-09-09 18.05.44.png")

### ・「表示」から「ナビゲーション・バー」をクリックします。

![スクリーンショット 2017-09-09 18.06.43.png](https://qiita-image-store.s3.amazonaws.com/0/142810/1b360ee5-bf21-c462-e54d-393ce9447467.png "スクリーンショット 2017-09-09 18.06.43.png")

### ・画面上部にファイルの階層が表示されます。

![スクリーンショット 2017-09-09 18.08.12.png](https://qiita-image-store.s3.amazonaws.com/0/142810/8c4a2fd7-e68b-16bb-2d4a-0ef498fcc055.png "スクリーンショット 2017-09-09 18.08.12.png")

#### 以上で設定は完了です。
WebAssembly 手書きで base122.wasm を作った

## これは何か

[base122.wasm](https://github.com/KoharaKazuya/base122.wasm) は Base-122 の encoder/decoder 実装 by WebAssembly テキスト形式。

学習用に書捨てたコード。


## Base-122

みなさん [Base-122](http://blog.kevinalbs.com/base122) をご存知だろうか。
詳細はリンク先を参照してもらうとして、これを簡単に説明するなら名前からわかるように Base64 の変種だ。

私は [POSTD の翻訳記事](http://postd.cc/base122/) で知った。
初めて読んだとき、着眼点の面白さとコーディング方式のエレガントさに惚れ込んだ。私達の問題を解決するものでなくても、惚れることってあるよね……。
知らなかったら今すぐ読もう。日本語だし、明確なステップで説明が書かれている良い記事なので。


## WebAssembly

みなさん [WebAssembly](http://webassembly.org/) をご存知だろうか。
こちらは注目されている技術なので知っている方は多いと思う。これを簡単に説明するなら Web でバイナリも配布して動かせれば色々メリットあるよね、という仕様だ。

実用的な応用例はいくらでも考えられて、Unity とか WebDNN とか既に動いているらしくて「すげー」ぐらいに認識しているが、私にとっては使いたくなるシーンがなく他人事の技術だった。いつか Web フロントエンドのフレームワークのバックエンド (ややこしい……) が WebAssembly で動くようになれば、デバッグ時に読むかも、ぐらいだ。


## base122.wasm

**Base-122** + **(手書き) WebAssembly** = **「勝った」**

この組み合わせを思いついたとき、この図式が頭の中に浮かんだ。
ネタ的な面白さと勉強の題材としての丁度良さが自画自賛せざるを得なかった。

base122.wasm が何をするかというと、Base-122 をエンコード/デコードするための API を WebAssembly テキスト形式で書く、というものだ。
出力した WebAssembly はブラウザで動き、Base-122 のエンコード/デコードができる。


## 感想

WebAssembly テキスト形式 (.wat) を書いているときはツラさしかなかった。
元々、WebAssembly は C++ などの高級言語からコンパイルして出力される実行バイナリのフォーマットを決めるための仕様だ。WebAssembly テキスト形式を自分で書くというのは、言い換えればアセンブリ直書きなんだからそりゃツライ。そういったレイヤーの専門家はいるとは聞くが、私は素人なのでひたすら根気との闘いだった。

言い換えれば根気があれば普通に書ける。
他の CPU 命令や VM を知らないのでイメージでしか語れないが、WebAssembly の仕様は (現状) 非常に小さい。データ型は i32, i64, f32, f64 の 4 種しかなく、命令もサラッと読めてしまう程度のものしかない (その後 LLVM IR のフォーマットを読もうとして腰を抜かした)。
なんでそうなっているか、みたいな話も [まとめられてて](http://webassembly.org/docs/rationale/) 面白そうだが、専門外の領域なので読んでもよくわからない部分が多かった。

やって良かった点が、なぜグルーコードと呼ばれるものが必要なのか、というのが肌で感じられたことだった。
手を動かさなくても仕様をしっかり理解していればわかることだろうけど、手を動かすのが最も仕様を理解するモチベーションになるので。
グルーコードというのは WebAssembly と JavaScript を橋渡しするもの。上記通り WebAssembly にはデータ型が数値 4 種しかないため、WebAssembly で文字列を扱いたい、となっても素の WebAssembly が公開する関数は文字列を返せない。両方から触れるメモリ空間を利用したりしてやりとりするわけだけど、その変換をしたりする。その他、DOM を触ったり WebGL を呼び出したりは全部グルーコード (JavaScript) のお仕事。
今まで Emscripten で WebAssembly を出力するとなんで一緒に JavaScript がくっついてくるんだ、と謎に思っていたがわかってよかった。


## まとめ

- base122.wasm を書いた
- Base-122 が魅力的なので読んで
- WebAssembly 手書きは根気でなんとかやれる
- WebAssembly ではグルーコード (JavaScript) が必要
赤い💎を🍺にしたい

#ソース
```PHP
<?php
$beer = "ビール";
$ruby = "ルビー";
$num = 10000;
for($j=0;$j<100;$j++) {
    $count = 0;
    for ($i = 0; $i < $num; $i++) {
        if (mt_str_shuffle($ruby) === $beer) $count++;
    }

    echo $count / $num;
    echo "\n";
}

/**
 * @param  string $str  入力された文字列を
 * @return string $str2 シャッフルして返す
 */
function mt_str_shuffle(string $str):string{
    $num = mb_strlen($str);
    $arr = array_fill(0,$num,false);
    $str2 = "";
    for($i=0;$i<$num;$i++){
        do{
            $rand = mt_rand(0,$num-1);
        }while($arr[$rand]);
        $str2 .= mb_substr($str,$rand,1);
        $arr[$rand] = true;
    }
    return $str2;
}
```
# 結果
![ruby.png](https://qiita-image-store.s3.amazonaws.com/0/71557/f2dba534-5359-cbc8-c077-0cf40eab2c69.png)

#結論
🍺飲みたい
COMPRESSION OF LEADING CLOUD SERVICE PROVIDERS

||Digital Ocean|Fx Data Cloud| Lionod | Vultr | Iweb | Alibaba Cloud | Scaleway |
|:------|:-------|:---|:---|:----|:--|:--|:--|
|Infrastruture as a service|Yes|Yes|Yes|Yes|Yes|Yes|Yes|
| Database as a service|No |Yes|No|No|No|No|No|
|Block Storage|Yes |Yes |Yes |Yes |Yes |Yes |Yes |
|Object storage as a service|No|No|No|No|No|No|No|
|Linux OS|Yes|Yes|Yes|Yes|Yes|Yes|Yes|
|Window OS|No|Yes|No|Yes|Yes|Yes|No|
|Realtime Customer support|No|Yes|Yes|No|Yes|No|No|
|Basic monthly plan|$5|$1.99|$5|$2.50|$58.2|$4.5|$3.6|
|Load Balancer Service|Yes|No|Yes|No|No|Yes|No|
|Maximum vCPU (Iaas)|20 vCPU|32 vCPU|20 vCPU|16 vCPU|8 vCPU|2 vCPU|8 vCpu|
|Maximum Memory (Iaas)|64GB|128GB|200GB|64GB|8GB|8GB|50GB|
|Maximum SSD (Iaas)|640GB|2000GB|1536GB|400GB|250GB|80GB|250GB|
|Maximum Bandwidth (Iaas)|9TB|9TB|20TB|10TB|Unmetered|5TB|Unmetered|
|Mulit region support|Yes|No|Yes|Yes|Yes|Yes|Yes|
lambda式メモ

lambda式メモ。

無名関数。変数に保持してほかの関数の中で使うことができる。

```python:lamda1.py
#書き方：lamnda [引数]: [返り値]
f = lambda x: x*2
print(f(5))
#=> 10
```


辞書の中で使うには

```python:lamda2.py
value_map = {
    1: lambda num: num + 10,
    2: lambda num: num + 20,
    3: lambda num: num + 30
}

add_type = 2
num = 1
print(value_map[add_type](num))
#=> 21
```
メモ：Razer Brade 14(2017)にDebian Linux Busterをインストール

グラフィックがintelとnvidiaの２系統を持っているが、普通にインストールするとintel側のみ使用される。
HDMIポートはnvidia側のチップに接続されているため、そのままでは利用できない。

LinuxのOptimus周りはnouveau, bumblebee, nvidia, prime, render offloadingといった用語で、世代の違いと実装の違いでいろいろ系統が混沌としてて、ググるとどの記事がどの系統のものかわからなくて困った。

### /etc/modules-load.d/modules.conf
nvidia-drmを追加する。
bumblebeeのパッケージが入ってるとblacklistに入れられているので除外するかbumblebeeをapt-get removeする。

```
nvidia-drm
```

### /usr/share/X11/xorg.conf.d/20-nvidia.conf
ファイルを新しく作る。
intel側にはmodesettingsを、Nvidia側にはnvidiaのドライバを設定する。

```
Section "ServerLayout"
    Identifier     "Layout0"
    Screen      0  "Nvidia"
    Inactive       "intel"
EndSection

Section "Screen"
    Identifier     "Nvidia"
    Device         "Nvidia"
EndSection

Section "Device"
    Identifier "intel"
    Driver "modesetting"
    Option "AccelMethod" "sna"
    Option "TearFree" "True"
    Option "Tiling" "True"
    Option "SwapbuffersWait" "True"
    BusID "PCI:0:2:0"
EndSection

Section "Screen"
    Identifier     "intel"
    Device         "intel"
EndSection

Section "Device"
    Identifier "Nvidia"
    Driver "nvidia"
    Option "NoLogo" "True"
    BusID "PCI:1:0:0"
    Option "AllowEmptyInitialConfiguration"
EndSection

Section "ServerFlags"
    Option "IgnoreABI" "1"
EndSection
```
### /etc/X11/Xsession.d/98xrandr-setprovideroutputsource
ファイルを新しく作る。

```
#/bin/sh
xrandr --setprovideroutputsource modesetting NVIDIA-0
xrandr --auto
```

### xorgのモジュール周り
一部のモジュールがbumblebee用に別の場所にあるのでリンクを貼り直す。

```bash
cd /usr/lib/xorg/modules/extensions/
mv libglx.so libglx.so.orig
ln -s /usr/lib/nvidia/current/libglx.so ./

cd /usr/lib/xorg/modules/drivers/
ln -s /usr/lib/nvidia/current/nvidia_drv.so ./
```


### 参考にしたページ
- https://wiki.archlinuxjp.org/index.php/NVIDIA_Optimus
- http://zhehou.blogspot.jp/2014/07/razer-blade-14-touchpad-multitouch-in.html
- https://help.ubuntu.com/community/RazerBlade
- https://devtalk.nvidia.com/default/topic/957814/linux/prime-and-prime-synchronization/
- https://insider.razerzone.com/index.php?threads/2nd-monitor-support-for-razer-blade-1060gtx-intel-7700-on-antergos.21081/
- https://github.com/binarypie/linux-notes/wiki/Razer-Blade-14
RubyMine：インデントを調節する方法


## 概要
RubyMineの初期設定では、HTMLやCSSのインデントが半角スペース4で設定してあります。

それぞれ好みがあると思いますので、変更することをオススメします。

## 手順
#### ・Preferencesをクリックします。

![スクリーンショット 2017-09-09 15.52.59.png](https://qiita-image-store.s3.amazonaws.com/0/142810/4b92f68a-fa31-94cd-6941-0f32e75c5584.png "スクリーンショット 2017-09-09 15.52.59.png")

#### ・エディターをダブルクリックします。

![スクリーンショット 2017-09-09 15.55.20.png](https://qiita-image-store.s3.amazonaws.com/0/142810/031dfcf9-fed7-fdef-aece-4d393650f21d.png "スクリーンショット 2017-09-09 15.55.20.png")

#### ・コード・スタイルをダブルクリックします。

![スクリーンショット 2017-09-09 15.56.19.png](https://qiita-image-store.s3.amazonaws.com/0/142810/923ab0b9-ffab-5c7a-ddd9-b7f73e10e7af.png "スクリーンショット 2017-09-09 15.56.19.png")

#### ・例として、Rubyを選択します。

![スクリーンショット 2017-09-09 15.57.17.png](https://qiita-image-store.s3.amazonaws.com/0/142810/3840918c-5072-dbc8-4f50-d61bd9472106.png "スクリーンショット 2017-09-09 15.57.17.png")

#### ・ここでインデントを設定できます。

![スクリーンショット 2017-09-09 16.05.21.png](https://qiita-image-store.s3.amazonaws.com/0/142810/62f72e7d-29fd-4ce9-7bb8-b82bf053a7ec.png "スクリーンショット 2017-09-09 16.05.21.png")


#### ・連続インデントを4 → 2に変更します。

![スクリーンショット 2017-09-09 15.59.20.png](https://qiita-image-store.s3.amazonaws.com/0/142810/ae8152d6-bbfe-984a-1778-e1128aa06d9d.png "スクリーンショット 2017-09-09 15.59.20.png")

* 変更すると、右側のエディタでどのように変更されるか確認できます。

#### ・「適用」をクリックします。

![スクリーンショット 2017-09-09 16.06.52.png](https://qiita-image-store.s3.amazonaws.com/0/142810/c04d37bc-0642-af44-6e07-d46e1e1f6c18.png "スクリーンショット 2017-09-09 16.06.52.png")

・これでインデントの変更が適用されました。

#### ・他の言語も同じように設定します。
* インデントはそれぞれ自分のお好みで設定してください。
* 自分は基本的に `2` で設定しています。

![スクリーンショット 2017-09-09 16.08.41.png](https://qiita-image-store.s3.amazonaws.com/0/142810/fc4bf3eb-bd63-504c-d747-cccb9655e63c.png "スクリーンショット 2017-09-09 16.08.41.png")

#### 以上が、RubyMineでインデントを調整する方法でした。
Ubuntu16.04上で Omeka + Loris + Mirador を動かす

##1. WindowsでUbuntuを使えるようにする
以下のような手順で行う
http://www.buildinsider.net/enterprise/bashonwindows/01
##2. UbuntuにOmekaをインストールする
以下のような手順で行う
https://omeka.org/codex/Install_on_Ubuntu_using_Terminal
注）後にプラグインとしてインストールする`IiifItems`はOmeka2.3以上でないと動かないので、バージョンをしっかり確認してインストールするように。

Ubuntu16.04ではPHPはバージョン7.0が標準となっていて、そのまま`apt-get install`してもバージョン5をインストールすることができない。バージョン5をインストールしないと、UbuntuでOmekaは動かせないので、以下のようにしてPHP5.6をインストールする。
https://ja.stackoverflow.com/questions/27397/php5%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%8C%E7%84%A1%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%81%A6-ubuntu-16-04-%E3%81%ABphp%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

Omekaのインストールが完了し、指定のドメインにアクセスした際にエラー表示がされる場合がある。
ex) mod_rewrite is not enabled 
apache2のVirtualHostの設定内に以下を記述する

``` /etc/apache2/sites-available/***.conf
<Directory /var/www>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow.deny
allow from all
</Directory>
```

#3 docker上でイメージサーバLorisを動かす
まずはUbuntu16.04にDockerをインストールする
https://soralab.space-ichikawa.com/2017/04/docker-ce-install/
注) Bash on Ubuntu on Windows 環境でこの手順でインストールするとエラーが出る。

次にDocker上でLorisイメージサーバを構築する。以下のリポジトリをローカルに`git clone`する。クローンしてくる場所はどこでも良い。
https://github.com/bodleian/loris-grok-docker
`sudo git clone https://github.com/bodleian/loris-grok-docker.git`
このあと、DockerコンテナをDockerfileに従いbuildして走らせ、Lorisサーバを動かすが、cloneしてきたDockerfileでは正常にDockerコンテナが起動しない。
https://github.com/loris-imageserver/loris-docker/blob/development/Dockerfile
このDockerfileに置き換え、コンテナを起動するようにする。
`http://localhost:5004`でLorisイメージサーバが動く。

#4 OmekaにIiifToolkitプラグインをインストールする
これはOmekaでMiradorを使用するために必要なプラグインです。以下のリポジトリをcloneしてきてください。
https://github.com/utlib/IiifItems
`sudo git clone https://github.com/utlib/IiifItems.git`
cloneしてきたら、`cd /var/www`し、pluginsディレクトリ配下にcloneしてきたIiifitemsディレクトリを置く。
`http://localhost`にアクセスし、Omekaにログインする。
右上のタブ内にあるPluginsをクリックし、IiifToolkitをインストールし、完了。


###スーパーユーザを作成する際に以下のようなエラーメッセージがでる時がある。
```
Schema task failed on table 'omeka_collections' with Zend_Db_Statement_Mysqli_Exception: Mysqli statement execute error : Invalid default value for 'added'
```
スーパーユーザを作成する際にこのエラーが出たときはMySQLのバージョンを変更する必要がある。
https://github.com/omeka/Omeka/issues/678
ここに書かれてる内容によると、5.6.5以前のバージョンであれば正常に動くらしい。

下記がMySQLの全バージョンを削除し、新しいバージョンを入れる方法
https://a-zumi.net/ubuntu-mysql-server-purge/

https://askubuntu.com/questions/762384/install-mysql-5-6-on-ubuntu-16-04

#5 IiifToolkitを使用し、指定の画像をOmekaにインポートする。
http://iiif.bodleian.ox.ac.uk/manifest-editor/#/?_k=vb8leu
このサイトで画像のマニフェストファイルを作成する。
＊作成手順
`New Manifest` → `Canvas Metadata` → `Image URL`にLorisサーバ内の画像URLを指定し、`Save Manifest`で`manifest.jsonを作成する`

作成したmanifest.jsonを`/var/www`配下に置く。
下の画像のように項目を設定してimportボタンを押せば、Omekaに画像をインポートすることができる。
![Screenshot from 2017-09-20 15-24-34.png](https://qiita-image-store.s3.amazonaws.com/0/131133/94970182-6131-1f3a-9aad-b7f285144e7f.png)
Operator MonoをAtomでカッコよく使うためのカスタムCSSを紹介

## TL;DR
Operator Mono を Atomで使うときに、Syntax Highlightの特定の箇所をItalicで表示するように指定するカスタムCSSを紹介します。
**紹介したいのはこのGistなので、時間がない人はこのURLを見るとすべて解決です。**
https://gist.github.com/brandondurham/3828ac42766f9f187c8e#file-styles-less


## What's Operator
OperatorはHoefler & Co.からリリースされている等幅フォントです。
技術者がエディタで使うことも意識されており、公式サイトのキャプチャではAtomで使っているところが紹介されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123/7fa5f1dc-c91f-448c-0673-fbdbe8f9e1f4.png)
*Image from [Introducing Operator
](https://www.typography.com/blog/introducing-operator)*

上記のようになかなかイカス書体で非常にかっこよいんですが、その辺りの良さは以下の記事によく紹介されているので公式と合わせてぜひ御覧ください。

- [バレンタインにOperator Monoを贈ろう - Qiita](http://qiita.com/cognitom/items/87214ba352047f050361)
- 公式: [Introducing Operator | News, Notes & Observations | Hoefler & Co.](https://www.typography.com/blog/introducing-operator)
- 公式: [Download Operator Fonts | Hoefler & Co.](https://www.typography.com/fonts/operator/styles/operatormono)

ちなみに今回題材にしている Operator Mono は公式で199ドルとなっています。

## カスタムCSSの紹介
さて、OperatorのItalic書体は筆記体のような特徴的なものですが、これがカワイカッコイイポイントとなっているので是非こんな感じでハイライトさせたいですよね。
上記のキャプチャのように、Syntax Highlightの特定の箇所（コメント部分や、JSの`this`とか`className`とか）をItalic表示するためには、AtomではカスタムCSSを記述する必要があります。

基本的に書き方は自由ですが、以下のGistに様々な環境でのコードが紹介されているので、ここを漁るとだいたいいい感じに設定できます。というわけで冒頭に書いたとおりこのURL１行紹介すれば十分なんですが！

https://gist.github.com/brandondurham/3828ac42766f9f187c8e#file-styles-less

その中から私は、以下のSnippetを利用させてもらっています。

```css
atom-workspace,
atom-text-editor {
  font-family: "Operator Mono";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
atom-panel.tool-panel {
  font-size: 0.88em;
}
.entity.other.attribute-name {
  font-style: italic;
}
atom-text-editor::shadow{
  .entity.other.attribute-name {
    font-style: italic;
  }
  .comment {
    font-style: italic;
  }
}
```
from: https://gist.github.com/brandondurham/3828ac42766f9f187c8e#gistcomment-1903227

### 適用方法
Settingsを開き (<kbd>Cmd</kbd> + <kbd>,</kbd>)、`Open Config Folder` をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123/f3aabf31-17aa-1228-2256-0a87c0882ffb.png)

`style.less` ファイルが開くので、上記のコードを貼るなどします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123/c3edc26e-64db-8a83-5abb-7a381cd1409e.png)

Done! なはず。
うまく適用されない場合は、利用しているテーマを見直すなどしてみてください。

## ちなみに
公式のキャプチャで使われているテーマは `Oceanic Next` というものです。
あのキャプチャを再現したい！という方はこちらもどうぞ。
https://atom.io/themes/oceanic-next
Webpack + PostCSSで変数を使う

# 概要

`postcss-simple-vars` を使って、 `vue-cli` を使って初期化したプロジェクトのCSSで変数を使えるようにする。

※追記 こんなことしなくて良かった。下記のように定義できる。

```scss
:root {
  --color-primary: #d1fb3c;
  --color-secondly: #d1;
  --color-foundation: #d1;
}

.test {
  background: var(--color-primary);
}
```

※さらに追記

上記の変数表記は、ただW3Cが提唱している新しいCSSの仕様に従っているだけだった。
Chromiumでは実装済みのため、変数が適用されていると勘違いしてしまった。

`postcss-css-variables` をインストールすると、この記法が使えるらしい。

参考
https://blog.mismithportfolio.com/web/20161001postcssvar


# プロジェクトの初期化

```
vue init webpack vars_test
cd vars_test
yarn install
yarn start
```

# postcss-simple-vars 導入

まずはパッケージを追加します。

```
yarn add postcss-simple-vars
```

次に、 `.postcssrc.js` を編集してプラグインを有効化します。

```js:.postcssrc.js
// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {

    // [追加]
    "postcss-simple-vars": {
      variables: require('./src/variables.css.js')
    },
    // [/追加]

    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      "browsers": "last 2 versions"
    }
  }
}
```

最後に、変数を記述します。

```js:src/variables.css.js
module.exports = {
  info: '#40cec0',
}
```

これでもう一度 `yarn start` すれば、変数が有効になっています。

# 確認

```php:src/App.vue
<style>
body {
  background: $info;
}
</style>
```

うまくいけば、背景が青くなるでしょう。

# 所感

Webpackのプラグイン周りは、色んな書き方があって戸惑う。

postcss.config.js の記法だとこうなる。ううむ。

```js:postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-simple-vars')({
      variables: require('./src/css/variables.css.js')
    }),
  ]
}
```
C#でCognitoを利用し、ユーザー登録→認証を実装する。

.NetでCognitoを利用した認証をします。
ユーザー登録→ユーザー認証→トークンからユーザー取得の流れで記載します。

#前準備
##1:ASP.Net MVCでWebアプリケーションを作成
※Microsoft.AspNet.Identity.Coreを利用する前提です。

##2:以下をNugetで追加(Verは任意)
• AWSSDK.Core (v3.3.7.1)
• AWSSDK.CognitoIdentity (v 3.3.1.1)
• AWSSDK.CognitoIdentityProvider (v3.3.2.3)

参考ページ
https://aws.amazon.com/jp/blogs/mobile/tag/net/?nc1=f_ls
APIリファレンス
http://docs.aws.amazon.com/ja_jp/cognito-user-identity-pools/latest/APIReference/API_AdminInitiateAuth.html
.Net用リファレンス
http://docs.aws.amazon.com/sdkfornet/v3/apidocs/index.html?page=CognitoIdentityProvider/MCognitoIdentityProviderCognitoIdentityProviderAdminRespondToAuthChallengeAdminRespondToAuthChallengeRequest.html

#コード
AWS SDKの作業は、リクエストオブジェクトの仕様を調べ、リクエストを実行。
戻り値の値を確認する事につきるため、慣れると使いやすいです。

##User登録
※ClientIdは、ユーザープールにて設定したアプリクライアントのIDを設定します。

```csharp
                // リクエストオブジェクト生成
                var signUpRequest = new SignUpRequest
                {
                    ClientId = ConfigurationManager.AppSettings["CLIENT_ID"],
                    Password = user.Password,
                    Username = user.Name,
                };

                var emailAttribute = new AttributeType
                {
                    Name = "email",
                    Value = email
                };
                signUpRequest.UserAttributes.Add(emailAttribute);
　　　　　　　　　// リザルトオブジェクト取得
                var signUpResult = await _client.SignUpAsync(signUpRequest);
```
User認証

```csharp
                var authReq = new AdminInitiateAuthRequest()
                {
                    UserPoolId = _poolId,
                    ClientId = _clientId,
                    AuthFlow = AuthFlowType.ADMIN_NO_SRP_AUTH
                };
                authReq.AuthParameters.Add("USERNAME", userName);
                authReq.AuthParameters.Add("PASSWORD", password);

                AdminInitiateAuthResponse authResp = await
_client.AdminInitiateAuthAsync(authReq);
```
トークンからユーザーを取得

```csharp

                // AccessTokenを元にUser名を取得
                var getUserReq = new GetUserRequest()
                {
                    AccessToken = authResp.AuthenticationResult.AccessToken
                };

                var getUserResp = _client.GetUser(getUserReq);
                var req = new AdminRespondToAuthChallengeRequest()
                {
                    ChallengeName = ChallengeNameType.ADMIN_NO_SRP_AUTH,
                    ClientId = _clientId,
                    UserPoolId = _poolId,
                    Session = authResp.Session,
                    ChallengeResponses = new Dictionary<string,
string>() { { "USERNAME", userName },{ "PASSWORD", password},{ "SECRET_HASH ",hash } },};
                var resp = _client.AdminRespondToAuthChallenge(req);

```

セキュアにアクセストークンを管理することだけ意識すれば良くなります。
利用料金も、月間5万まで無料なので、試す分には問題ないです。
RubyMine：メモリの割り当てを増やす方法


## 概要
RubyMineの初期設定ではメモリの割り当てが少なめになっています。

快適に使用するためにも、メモリの割り当てを増やすのが良いです。

## 手順
*「Help」から「Edit Custom VM Options...」をクリックします。

![スクリーンショット 2017-09-09 15.27.44.png](https://qiita-image-store.s3.amazonaws.com/0/142810/bc9bc1fe-fd04-d336-818d-b3d8be909559.png "スクリーンショット 2017-09-09 15.27.44.png")

* 「Yes」を選択します。

![スクリーンショット 2017-09-09 15.29.40.png](https://qiita-image-store.s3.amazonaws.com/0/142810/d24be635-d64f-4da9-8ec4-05b266ee8c6a.png "スクリーンショット 2017-09-09 15.29.40.png")

* ファイルが表示されます。

![スクリーンショット 2017-09-09 15.30.51.png](https://qiita-image-store.s3.amazonaws.com/0/142810/72d35988-1b26-6f2c-2266-4db87534f16b.png "スクリーンショット 2017-09-09 15.30.51.png")

* 以下のように変更します。

```
-Xms1024m
-Xmx2048m
-XX:MaxPermSize=384m
```

* 赤囲みのようになります。

![スクリーンショット 2017-09-09 15.35.06.png](https://qiita-image-store.s3.amazonaws.com/0/142810/8d558213-2ef5-b9eb-1263-987c04232586.png "スクリーンショット 2017-09-09 15.35.06.png")

* 再起動すると、設定が反映されます。

#### 以上が、メモリの割り当てを増やす方法でした。
ブラウザからjsonをpostして結果をファイルでダウンロードするスクリプト


```js
function textSave (name, text) {
  var blob = new Blob([text], {type: 'text/plain'})
  var link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = name || 'text-save-data.txt'
  link.click()
}

function sendinfo (url, data, fileName, callback) {
  var xhr = new XMLHttpRequest()
  xhr.onload = function () {
    if (this.status === 200) {
      textSave(fileName, this.responseText)
      callback && callback()
    } else {
      console.log(this.status, this.responseText)
    }
  }
  xhr.open('POST', url)
  xhr.withCredentials = true
  xhr.setRequestHeader('Content-Type', 'application/json')
  xhr.send(JSON.stringify(data))
}

sendinfo('http://echo.jpillora.com/', {aaa: 'aaa1', msg: 'めっせーじだょ'})
```

一旦、こちらに[http://echo.jpillora.com/](http://echo.jpillora.com/)移動してから、chromeブラウザのコンソールに打てば実行できます（CORSがあるから移動は仕方ない）

npmでechoサーバでも建ててテストしようかなぁと思ったら、作者の人がechoサーバ公開してくれていたから、そのまま使わせてもらった。

[https://www.npmjs.com/package/echo-server](https://www.npmjs.com/package/echo-server)

会社等で使う場合は、自分でechoサーバ建てたほうが情報漏えいとか気にせず使えると思います。

余談ですが、コーディングスタイルはStandardStyleを使ってみました。意外とセミコロンが無い生活も快適ですね。
[JavaScriptのStandardStyleを使って手軽にフォーマットする方法](http://qiita.com/daijinload/items/21bd1b72a8ada1f310da)
JavaScriptのStandardStyleを使って手軽にフォーマットする方法

```bash
# global
npm install -g standard
standard --fix target.js

# local
npm install standard
./node_modules/.bin/standard --fix r:/target.js

# npx
npm i -g npx # npx入れてない場合
npm install standard
npx standard --fix r:/target.js
```

グローバルに入れておけば、割りとサクッと実行できますね。ローカルはフルパス感とタイプ量が気になりますね。でも、ローカル好きとしては外せないですね(・∀・)

ここから引用
[https://standardjs.com/](https://standardjs.com/)
Phoenix Frameworkインストール時の注意点


ネット上でのインストール情報が古い(ver 1.2以前)と、下記となる。

```
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
Found existing entry: /Users/xxxx/.mix/archives/phoenix_new
Are you sure you want to replace it with "https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez"? [Yn] Y
* creating /Users/xxxx/.mix/archives/phoenix_new

$ mix phoenix.new --version
Phoenix v1.2.5
```

バージョンを1.3以降にする場合は、下記のように、`phx_new`となる。

```
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez
Are you sure you want to install "https://github.com/phoenixframework/archives/raw/master/phx_new.ez"? [Yn] Y
* creating /Users/xxxx/.mix/archives/phx_new

$ mix phx.new --version
Phoenix v1.3.0
```

気を付けないと、以前インストールしている場合には、1.2のプロジェクトが作成されてしまう。プロジェクトを生成する場合には気を付けましょう。
Cybozu Tech Conference 2016

# kintone の開発プロセスとプロジェクト管理ツール

## 実装のプロセスとツール

### Flow
2ヶ月前ぐらいに実装開始-> 試験
当該バージョンの試験中に次のバージョン新規実装

太いバージョンブランチからフィーチャーブランチ（細かい実装）を切って、そのブランチをマージする

### Tools

GitHubにWebhookを設定し、Jenkinsでテストを行う。
Webアプリケーションなので、受け入れ試験を行い受け入れ試験では Selenium を使っている

- commit 時には単体テストまで
- バージョンブランチにマージされた時に受け入れテストまで走る

## プロジェクト管理とツール

チームをまたぐ情報共有が必要
- ドキュメント管理
- TODO管理
- スケジュール管理
- コミュニケーション

他ではそれぞれ下記の画像のように複数アプリケーションを使ってる
![](https://pbs.twimg.com/media/CziNKX9UUAAwoWR.jpg:large)

kintone チームなら
![](https://pbs.twimg.com/media/CziNKYEUoAQD08e.jpg:large)

kintone で管理業務に必要なアプリケーションの作成をしたり、カスタマイズを書くことで必要な機能を追加している

CSRF の対策範囲

PDF Form Calc Attack

PDFファイルがアップロードされているオリジンで任意のリクエストを発行できる攻撃

RFD(Reflected Filename Download)

# SRE チーム
## SREとは？
Site Reliability Enginer
Google が提唱

## サイボウズのSRE
- 自社データセンタのため、レイヤの低い部分まで対応している

yrmcds 0.9.0 
簡単なWebレプリケーションアプリケーション

# 生産性向上チーム

### CI(Jenkins)のカオス化 
- Jenkins にはプラグインがあり、それへの依存度が高かった
- 複数チームが１つのJenkinsを共有していた

#### 改善したこと
- 1チーム1Jenkinsに構成変更

### ビルドスクリプトのカオス化
- GitHubで管理するように
- 変更点はPRで！

##
php フォルダ丸ごと zip 圧縮

phpでフォルダごと圧縮した場合がある。
そんな時は、linux コマンドを使うべき。

```

//$dir 取得したいフォルダパス
//$zipFileSavePath 一時、zipを保存しておくフォルダパス
function getZip($dir,$zipFileSavePath){

 // zipファイル名
    $fileName = "zipFile".time();
// 圧縮対象フォルダ
    $compressDir = $dir;

// コマンド
// cd：ディレクトリの移動
// zip:zipファイルの作成
    $command =  "cd ". $compressDir .";".
        "zip -r ". $zipFileSavePath . $fileName .".zip .";

// Linuxコマンドの実行
    exec($command);

// 圧縮したファイルをダウンロードさせる。
    header('Pragma: public');
    header("Content-Type: application/octet-stream");
    header("Content-Disposition: attachment; filename=".$fileName.".zip");
    readfile($zipFileSavePath.$fileName.".zip");

//    消す
    unlink($zipFileSavePath.$fileName.".zip");
}


```


cakephp3の場合の使い方

```

        getZip(WWW_ROOT.'files/templates/hogedir,WWW_ROOT.'files/');

```

こんな感じかな。
microtime(true) vs gettimeofday(true)

PHP でちょっとした処理のベンチするときに次のようなコードで１秒間に何回実行できたか見ること、あると思います。

```php
for ($i=0, $t=microtime(true)+1; microtime(true)<$t; ++$i) {

    // なにか

}
```

一方で `gettimeofday` も引数を `true` にすれば `microtime` のように `float` が返ります。

- http://php.net/manual/ja/function.gettimeofday.php

どっちがよく使われているか・・ Qiitaでは `microtime` が圧倒的でした（`gettimeofday` は自分のよくわからん記事しか引っかからなかった）

- http://qiita.com/search?q=php+microtime&sort=rel
- http://qiita.com/search?q=php+gettimeofday&sort=rel

`gettimeofday` は引数がついたのが 5.1 からなので `microtime` の方が主流なのだと思います。

## 計測してみる

```php
for ($i=0, $t=microtime(true)+1; microtime(true)<$t; ++$i) {}
printf("%-16s%d\n", 'microtime', $i);

for ($i=0, $t=gettimeofday(true)+1; gettimeofday(true)<$t; ++$i) {}
printf("%-16s%d\n", 'gettimeofday', $i);
```

```sh
$ php -n -v
PHP 7.1.9 (cli) (built: Aug 30 2017 20:06:08) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

$ php -n a.php
microtime       13071384
gettimeofday    13269115
```

有意な差は無さそう（公平を期すために順番を入れ替えたりしてみても結果は変わらない）。

## 実装を見てみる

どちらも同じ `_php_gettimeofday` が呼ばれています。第２引数 mode の値で結果が変わるようです。

- https://github.com/php/php-src/blob/php-7.1.9/ext/standard/microtime.c#L92-L105

そして mode の値に依らず、関数の引数が true なら結果を返しています。

- https://github.com/php/php-src/blob/php-7.1.9/ext/standard/microtime.c#L54-L69

つまり実装は全く同じでした。