OmniAICreator/Qiita-1.07M huggingface dataset:
初心者が開発でハマったらMacが「質問しろ」というアプリ作った

[エキサイト Advent Calendar 2018](https://qiita.com/advent-calendar/2018/excite) 10日目の記事です。

はじめまして、新入社員のaharenchiです。初投稿です。
今回は、

**「わからないよ」とつぶやいて時間が経過したらMacが「質問しろ」とアドバイスしてくれるアプリ**

を作りました。

## はじめに

作業に集中していると分からないことにハマってしまうときがありますよね？私はよくあります。

私「わからない」
私「質問したら解決できそうだけど、自分の力で頑張ってみたい...!!」

1時間後

私「ぜんぜんわからないめう...:sob:」

30分悩んだ時点で質問すべきです。
そこで、

## 「わからないよ」とつぶやいて時間が経過したらMacが「質問しろ」とアドバイスしてくれるアプリ

を作ってみました。macOSで動きます。

[デモ1] (https://youtu.be/3nALVjvsGNM)
Macの音声入力でアプリを起動して30分後にダイアログが表示される様子

[デモ2] (https://youtu.be/7E8frl_G94M)
Macの音声入力でアプリの起動と終了を行っている様子

## 作り方
Macの音声入力コマンドとAppleScriptで作りました。
 
### アラームアプリケーションの作成

(1) スクリプトエディタを起動して、File > New を選択します。
(2) AppleScriptを選択し、下記のコードを書きます。

``` 
set delayTime to 60 * 30
set timeStar to current date
repeat
	delay delayTime
	set timeLap to current date
	display dialog "あなたが悩んで" & ((timeLap - timeStar) / 60) div 1 & "分が経過しました。質問してみませんか？" buttons {"質問する", "自力で頑張る"} default button 1
	if the button returned of the result is "質問する" then
		exit repeat
		return
	end if
end repeat
```

(3) File > Exportを選択し、File FormatポップアップメニューをクリックしてApplicationを選択しスクリプトをアプリケーションとして保存します。


### Macの音声入力操作を設定
(1) System Preferences > Keyboard > Dictationを選択し、DictationをOnにします。

<img width="665" alt="Screen Shot 2018-12-09 at 2.34.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/313327/7e00f768-9168-8e2b-99a5-adae215f2425.png">

(2) System Preferences > Accessibility > Dictationを選択し、「まっく」とキーフレーズを入力します。

<img width="667" alt="Screen Shot 2018-12-09 at 2.34.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/313327/4be64bd4-163e-c8aa-511c-09902fb0ab5c.png">

(3) Dictation Commandsを選択し、アラームアプリ起動コマンドと終了コマンドを設定します。

#### アラームアプリ起動コマンド
<img width="663" alt="Screen Shot 2018-12-09 at 2.37.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/313327/5cbd8833-0e96-d3cd-8209-81c6176e7703.png">

「わからないよ」と話しかけると、Open "worryTime.app"でアラームアプリを起動するように設定します。


#### アラームアプリ終了コマンド
<img width="664" alt="Screen Shot 2018-12-09 at 2.37.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/313327/ba8ec37b-2ea9-6b3f-2950-3f09d2027c9e.png">

「わかった」と話しかけると、アプリ強制終了(command + option + shift + esc)でアラームアプリを終了します。
通常のアプリ終了(command + q)よりもAppleScriptのrepeatが優先されるので、強制終了でアプリを終了させています。

## 感想
さっそく今日から使ってみようと思っていたのですが、開発で支給されているiMacのマイクが自分と離れているので、つぶやくレベルではなく大声で話しかける必要が..。:scream:
周りの席の方に、突然大声でMacに「わからないよ！」と話しかけるやばい新卒と心配されそうなので、音声入力の方法が改良するまではやめておこうと思います。
次回のバージョンアップを楽しみになさってください。:pray:

MacBookでしたら比較的つぶやく程度で使うことができるので、ご興味のある方は使って見てください！

次のエキサイトAdvent Calendarもよろしくお願いします！

## 参考文献
+ [ようこそ Mac のスクリプトエディタへ - Apple サポート](https://support.apple.com/ja-jp/guide/script-editor/welcome/mac)
+ [タイマー機能で時間を賢く使うスクリプト（Mac版） | ライフハッカー［日本版］](https://www.lifehacker.jp/2009/04/post_715.html)
+ [音声入力コマンドで Mac に操作内容を伝える - Apple サポート](https://support.apple.com/ja-jp/HT203085)
+ [MacのSiriを「Hey Siri」で音声起動させる方法 | ハジプロ！](https://hajipro.com/apple/mac/macos-sierra-siri-hey-siri)
MySQLが起動しない(The server quit without updating PID file, PID file could not be found!)

MySQLの起動も停止もできない状態に遭遇

```
$ mysql.server start
Password:
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/****.pid).
```


```
$ mysql.server stop
 ERROR! MySQL server PID file could not be found!
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/****.pid).
```

MySQLは起動すると`.pid`というファイルにプロセスIDを保存します。
`.pid`ファイルの有無でMySQLのステータスが確認できるようになっています。

pidファイルは`[macのユーザー名].pid`のフォーマットで保存されます。

今回は、macのユーザー名を変更した場合、pidファイルが見当たらないというエラーが起きてMySQLが起動できなくなりました。

macのユーザー名は`uname -n`で確認できます。

現在利用されているPIDファイルをコピー&リネームすることで正常に起動・停止できるようになりました。
ざっくり眺める Azure Machine Learning Services

この記事は [Microsoft Azure Tech Advent Calendar 2018](https://qiita.com/advent-calendar/2018/microsoft-azure-tech) の8日目の記事です。
(正確には、その後追いで投稿しています。この季節、体調管理には十分に注意が必要ですね・・・。)

昨年は、[Workbench](https://qiita.com/yomatsum/items/3bacb6e4574c9f9b3d9c) について書いたのですが、[サポートの終了](https://docs.microsoft.com/ja-jp/azure/machine-learning/service/overview-what-happened-to-workbench) がアナウンスされています。また、数日前には [Azure Machine Learning Serviceの一般提供開始](https://azure.microsoft.com/ja-jp/updates/azure-machine-learning-service-now-generally-available/) が発表されました。(Azure の更新のお知らせも日本語翻訳版が提供されるようになりました)

そこで、今回は、新しくなった Azure Machine Learning Servicesをザックリと眺めて、チュートリアルの入り口までたどり着いてみたいと思います。

# 新しくなったサービスの内容

## 構成コンポーネント
一般提供開始前は、いくつかのサービスをAzureリソースとして作成していましたが、一般提供開始後は、以下のAzureリソースが作成されます。

- Machine Learning サービス ワークスペース    
オブジェクトを管理するための作業スペースです。 
- Storage アカウント    
ワークスペース内のオブジェクトを蓄積しています。
- KeyVault    
データやオブジェクトの保護に使用されます。
- Application Insight    
作成した予測モデルのモニタリングに使用します。
- コンテナーレジストリー    
学習、推論のそれぞれのコンテナーイメージを展開するために使用します。

## 開発のプロセス

一般的な機械学習モデルの開発プロセスを踏襲しています。

1. Pythonでモデルを作成するためのスクリプトを開発します。
1. スクリプトを動作させる計算環境を設定します。
2. スクリプトを実行します。実行結果は「実験(Experiment)」として記録されます。
3. 実行結果を分析し、期待通りのモデルが作成できているかを確認します。
4. モデルをモデル レジストリーに登録します。
5. 評価用スクリプトを開発します。
6. コンテナー展開用のイメージを登録します。
7. イメージをWebサービスとして展開します。

# チュートリアルまでの道のり

## ワークスペースの展開
Azure ポータルからワークスペースを作成します。この記事を投稿する時点では東西の日本リージョンは含まれていません。
![2018-12-10.png](https://qiita-image-store.s3.amazonaws.com/0/163305/9e04b185-10f1-415f-9c02-8f06eadec0e6.png)

## ワークスペースへのアクセス
ポータルからリソースにアクセスします。Machine Learning サービス ワークスペースの概要タブから、「ワークスペースを探索する」を選択します。

![2018-12-10 (2).png](https://qiita-image-store.s3.amazonaws.com/0/163305/46113f8d-b1be-5eff-d60c-3e434651b7d1.png)

## サンプルコードをGitHubから取得する
初めてワークスペースを開いた際には、「Azure Notebooks を開きます」ボタンが表示されます。このボタンをクリックすることで、チュートリアルを含むサンプルコードを公開済み GitHub から Clone を取ることになります。

![2018-12-10 (3).png](https://qiita-image-store.s3.amazonaws.com/0/163305/ce95af63-f053-5312-06df-0cd14ae9fbc7.png)

Clone を取る流れとしては、

- Azure Notebook にアクセスする    
Azure Machine Learning と関連付けられるように、ワークスペースにアクセス権のあるユーザーでアクセスします。
- Azure Notebook 上で Clone 元を指定する
- Clone の実行

![2018-12-10 (5).png](https://qiita-image-store.s3.amazonaws.com/0/163305/fcdd5a8e-a9d3-11cd-1d92-1bf674956f4b.png)

となります。

この記事はここまでにしておきたいと思います。
（続きはいずれ・・・）
JavaScript - babel-eslint vs eslint-plugin-babel vs eslint-plugin-react

Good answer.

* ***eslint-plugin-**** are ESLint plugins, they add some additional rules to ESLint.
 * ***eslint-plugin-babel*** add some rules for some of the Babel experimental features which are not natively supported by ESLint.
 * ***eslint-plugin-react*** add some rules specifically for React, this mostly include good practices and JSX code formatting.

* ***babel-eslint*** is a parser, it will transform your JavaScript code into an AST that will be used by ESLint to validate your code.

https://github.com/yannickcr/eslint-plugin-react/issues/446#issuecomment-184642394
NTT-TX流　AWS技術者の育て方

この記事は[NTTテクノクロス Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ntt-tx) の12日目の記事です。

こんにちは。
NTTテクノクロス青木です。

EC2が数千台稼動するアカウントの維持管理をした結果AWSにどっぷりハマりこみ、CCoE活動として以下の業務をしています。

- 開始直後のプロジェクト向け
 - アカウント管理方針検討
 - オペレーションレクチャ
 - NW設計
 - コスト見積もり

たまにトラブルシュートも行いますが、グランドデザインなどAWSを戦略的に使っていくにはどうしたら良いか検討するのが好きです。

また、他に好きなこととしては、教員関連に進む人の多い数学科出身ということもあり、物事を人に教えることも好きだったりします。

ということで、今回の記事は、NTTテクノクロスにおける技術者育成手法(AWS編)について紹介したいと思います。

# 技術者を育成する土壌が整っています

弊社では**「プロフェッショナルを育てる。」**をキャッチフレーズとした「**社員が社員を育成する**」[ソフト道場研修](https://www.ntt-tx.co.jp/products/soft_dojyo/?utm_source=qiita&utm_medium=ac2018&utm_campaign=12)があり、技術者を育成する土壌が整っています。
研修形式も講座のほとんどがハンズオン形式であり、実際にエンジニアが手を動かして技術習得することができます。
講師陣は総勢93名(2018/12/10現在)！私も講師陣の一員です。担当はもちろんAWSです。

# AWS関連講座で気をつけていること

受講者のレベル感、AWSの多種多様なサービス群、講師の得意領域を考慮し、毎年入門的な内容と応用的な内容の2種類の講座を設け、それぞれ以下観点で計画しています。

- 入門的な内容
 - VPC,EC2,RDS,S3,ELB,AutoScalingなど主要なサービス群を利用できること
 - 達成感を得られるよう、具体的なシステムを組むこと
 - 構築するシステムは、インフラ(AWS)構築に専念できるよう、手間なくインストール出来るアプリケーションであること

- 応用的な内容
 - 入門的な内容からは一歩脱した内容であること
 - AWSマネージドサービスを多用すること
 - 講師が一番好きな技術カテゴリ(NW、サーバレス・・・)であること

また、入門、応用どちらでも行う共通的な内容として以下も設けています。

- 自由課題
 - 研修日程は1日ですが、そのカリキュラムは半日で終わるくらいのボリュームにしています。進行は受講生のペースで行ってよく、進みの早い人には自由課題として**好きなAWSサービスを触っても良い！(一部のサービスを除きコスト度外視)**という時間を設けるようにしています。
- 講師に質問
 - 実際にプロジェクトでこんな課題があって、どうしたものか・・・という技術相談を受ける時間を設けるようにしています。
 - 講師は進行役のメイン講師、ハンズオンで手詰まりしている受講生のフォローに入る補助講師を含め、最大5人体制です。講師陣は得意領域がそれぞれ異なるため、お互いにフォローし合うことで盤石な体制を組むことが出来ます。
- 弊社でAWSを使うための事務手続き
 - 「PJでAWSを使うことになったけど、そもそもどうやって契約したら良いの？？費用見積もりは？？」など、技術的な課題だけでなく、事務的な疑問の解消もできるよう、情報展開をしています。

# AWS関連講座実績

[弊社ブログ](https://www.ntt-tx.co.jp/column/dojo_aws_blog.html?utm_source=qiita&utm_medium=ac2018&utm_campaign=12)にて、開催の裏話などを掲載しています。ぜひご参照ください！

|年度|入門|応用(テーマ)|
|:--|:--|:--|
|2015|開催|開催(設計・自動化)|
|2016|開催|開催(トレーサビリティ&ログ可視化ハンズオン)|
|2017|開催 [[ブログはこちら](https://www.ntt-tx.co.jp/column/dojo_aws_blog/20171017/?utm_source=qiita&utm_medium=ac2018&utm_campaign=12)]|開催(トレーサビリティ&ログ可視化ハンズオン)[[ブログはこちら](https://www.ntt-tx.co.jp/column/dojo_aws_blog/20171212/?utm_source=qiita&utm_medium=ac2018&utm_campaign=12)]|
|2018|開催|開催(サーバレスアーキテクチャ)|
GoogleAppsScriptで短縮URLを作る

こんにちは。

LocoPartnersでReluxのサーバーサイドを担当している@shintarowです。
この記事は「Relux Advent Calendar 2018」9日目の記事です。

弊社サービスではよくパラメータを付与したURLを短縮URLに変換して、シェアなどを行っています。
2,3個であれば手動で行うのもそれほど苦ではないですが、10,20となってくると単純な作業ではあるのですが、ミスも発生しやすく、何よりかなり面倒です。。。
こういった作業はできれば、自動化するほうが良いので、今回はGoogleAppsScript(以下GAS）を利用して、GoogleSpreadSheet(以下GSS)から短縮URLを生成し元のシートに書き込こもうと思います。

#### 1. bitlyAPIを利用できるようにする。
こちらのDocumentに従い、アクセストークンを取得する。
https://dev.bitly.com/v4_documentation.html

※ 他のAPIでも作れますが、今回はbitlyにしました。

#### 2. GSSに短縮したいURLのリストを作る。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37884/f368f602-2b72-645f-f55b-545df80a66b0.png)

※ 今回はA列に短縮したいURLを入れて、B列に短縮URLを書き込こむ形で作ります。

#### 3. GASのエディタを開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37884/28b1d7e8-2333-30a8-ffcf-1e337969f0e6.png)

上部にあるメニューからツールを選択し、スクリプトエディタをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37884/f8fc16f8-071a-458a-e277-58ee01c068f1.png)
↑のような画面が表示される。

#### 4. 短縮URLを生成して、GSS上に書き込む。

スクリプトエディタに以下内容を記述

```js

function wirteShortUrl() {

  //sheet名称から情報取得
  var sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
  var value = sheet.getRange('A:A').getValues().filter(String);
  var length = value.length;
  var shortUrls   = [];

  for (var i = 0; i < length; i++ ) {
    shortUrls.push([getShortUrl(value[i][0])]);
  }

  //B列に短縮URLを追加する。
  sheet.getRange('B1:B' + length).setValues(shortUrls);
}

// Bitlyで短縮URLを生成する。
function getShortUrl(longUrl) {

  const ACCESS_TOKEN = '1で取得したアクセストークンを貼り付ける';
  const ACCESS_URL   = 'https://api-ssl.bitly.com/v4/shorten';

  var payload = {
      'long_url': longUrl,
  };

  var headers = {
      'Authorization' : 'Bearer ' + ACCESS_TOKEN,
      'Content-Type': 'application/json',
  }

  var options = {
      "method"      : 'POST',
      'headers'     : headers,
      'payload'     : JSON.stringify(payload),
  }

　 var response = UrlFetchApp.fetch(ACCESS_URL, options);
　 var content = response.getContentText("UTF-8");

　 return JSON.parse(content).link;
}
```

#### 実行する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/37884/bcdd0c44-a547-2c3b-dada-ba2a7fe57aed.png)
上部メニューから、 `writeShortUrl` を選択して、実行ボタン(▶)を押します。
※ この際、シートのアクセスなどを聞かれるかもしれないので、`許可する` を押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37884/60f21103-141a-96ad-29a6-43d261f064c5.png)
こんな感じに、B列に短縮URLが表示されていれば成功




#### おわりに
汎用的に使えるものではないですが、無事短縮URLを自動生成することができました。
時間があれば、使えるAPIを増やすなどの機能追加とリファクタリングをして、ライブラリにしていくのもいいかなと思いました。
ただ、深くは言及していないですがAPIによって呼び出せる回数などがきまっていたり、GAS自体も実行時間に制限があるので、大量に発行する場合は別途対策が必要そうです。

それでは！
Elixirはじめました

# 概要
Elixirの学習を始めるにあたり、同様な人のために参考になればと残しておくことにしました。
最下部にある参考記事を読んでざっくりメモしたものですので、ぶっちゃけリンク先を読めばいいですw
2018/12/10時点での記事になります。

# なぜElixir？
### 並列処理が得意
* ElixirはErlangという言語のVM上で動作する
* Erlangは並列処理が得意（Ericssonの電話交換機で利用されている話がよく引用される）

### 耐障害性が高い
* プロセス単位での動作ができる。プロセスの取り扱いやすい。プロセス終了でメモリ解放でコスト低い。  
[こちら](https://employment.en-japan.com/engineerhub/entry/2017/06/12/110000#Docker%E3%81%A7%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B)でわかりやすく解説しています

### 効率良い
* CPUの複数コアをあまさず使える（昨今のCPUの処理速度対応はコア数を増やして対応する傾向）
* １コアあたりの処理速度も良い（Go並み）

# やってみる
### Elixirの環境構築
[こちら](https://employment.en-japan.com/engineerhub/entry/2017/06/12/110000#Docker%E3%81%A7%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B)で丁寧に詳しく解説されていますが、私はDockerでためしました。
**理由**
* Dockerの環境が既に構築済み
* 元の環境に影響をあたえずにスクラップ＆リビルドできる

```bash:Dockerで起動
docker run --rm -v ~/Documents/develop/docker/elixir:/code -p 4000:4000 -i -t trenpixster/elixir /bin/bash
```
「~/Documents/develop/docker/elixir」の部分は自分の環境にあわせてください。


### Phoenixの構築
ElixirでWebフレームワークといえば、今の所これ一択。

```bash:Phoenixのインストール＆プロジェクト作成
mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez
mix phx.new web --no-brunch --no-ecto
```

```bash:Phoenixサーバ起動
cd web
iex -S mix phx.server
```

すると下記のようなエラーが表示されます（実はここがメモしたかっただけかも）

```
（省略）
warning: please add the following dependency to your mix.exs:

    {:plug_cowboy, "~> 1.0"}

This dependency is required by Plug.Adapters.Cowboy
which you may be using directly or indirectly.
Note you no longer need to depend on :cowboy directly.

（省略）

** (Mix) Could not start application web_nodb: WebNodb.Application.start(:normal, []) returned an error: shutdown: failed to start child: WebNodbWeb.Endpoint
    ** (EXIT) shutdown: failed to start child: Phoenix.Endpoint.Handler
        ** (EXIT) "plug_cowboy dependency missing"
```

問題も解決方法も読めばわかるのですが、依存関係です。
Plug.Adapters.Cowboyが必要としているとのこと。
なので、素直に依存関係のファイル（mix.exs）に追記してください。

```config:mix.exs

（省略）
  defp deps do
    [
      {:phoenix, "~> 1.3.4"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:cowboy, "~> 1.0"},
      {:plug_cowboy, "~> 1.0"} ←ここ！！！
    ]
  end
（省略）
```

### Phoenixにアクセス
http://localhost:4000/

### まとめ
とりあえず今日はこんなところ。
高負荷なシステムには使うことが増えていくんじゃないかと思うので
覚えて損はないはず、継続していこうと思います。

# 参考
[[翻訳] Elixir - 次に来る大物Web言語](https://qiita.com/HirofumiTamori/items/0dfdbada30c7d8f183fd)
[Elixir入門「第3回：Phoenix 1.3で高速webアプリ ＆ REST APIアプリをサクッと書いてみる」](https://www.slideshare.net/piacere_ex/elixir3phoenix-13web-rest-api-81219622)
[Excelから関数型言語マスター1回目：行の「並べ替え」と「絞り込み」](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)
[Phoenix 最初の第一歩 Mix phx.serverでerrorの解決方法](https://qiita.com/Yoosuke/items/91ef4ce0ba8cf6dcb2a9)
[最速で知る！ ElixirプログラミングとErlang/OTPの始め方【第二言語としてのElixir】](https://employment.en-japan.com/engineerhub/entry/2017/06/12/110000#Docker%E3%81%A7%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B)
EC-CUBEのfavicon(サイトのアイコン)を変更しよう

EC-CUBE Advent Calendar 2018 の記事です。

ものすごい小ネタで恐縮なのですが、EC-CUBEで作成したサイトのfaviconを変更する方法を投稿したいと思います。

## faviconとは？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/113212/0b7c5d6d-e941-e25d-d7c3-cbd9dc90fadc.png)
favicon（ファビコン）とは、ウェブページに表示されるシンボルマークのアイコンです。EC-CUBEを利用してサイトを作成した場合、デフォルトだとEC-CUBEロゴのfaviconが設定されています。

せっかくEC-CUBEを利用してオリジナルなショップを作成したのに__faviconがEC-CUBEのまま__...なんてことにならないように、faviconの変更方法を共有します。

## faviconの作成
「favicon 作成」で検索するといくつかのサイトが見つかると思います。
今回は以下のサイトを利用して作成しました。画像ファイルを作成してアップロードするだけで簡単にfaviconを作成する事ができます。

ファビコン favicon.icoを作ろう!
https://ao-system.net/favicon/

**※画像サイズは48x48ピクセルを推奨**

## favicon.icoファイルの置き換え
EC-CUBEに含まれるfavicon.icoファイルを置き換えることで、サイトに表示されるfaviconを変更できます。必ず `favicon.ico` というファイル名のまま置き換えて下さい。

各バージョンごとにfavicon.icoのパスが異なるためまとめておきます。

| EC-CUBE | favicon.icoのパス |
|:-:|:--|
| 4系  | ./html/template/default/assets/img/common/favicon.ico |
| 3系  | ./html/template/default/img/common/favicon.ico |
| 2.13系| ./html/user_data/packages/default/img/common/favicon.ico <br>./html/user_data/packages/sphone/img/common/favicon.ico ※スマホ<br>./html/user_data/packages/admin/img/common/favicon.ico ※管理画面 |

## 動作確認
上記パスにあるfavicon.icoを置き換えるだけで作業は完了です。
ブラウザにキャッシュが残っているとすぐに反映されないため、ブラウザのキャッシュを削除してから動作確認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/113212/ab823f6b-c7d8-afe2-e362-e326619d0de8.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/113212/4346ddec-2503-9e26-c7f4-32a8f3da5bd7.png)
地球キャラクターのアイコンに変更してみました;)

明日は@okazyさんですー！
Vtuberみたいなビデオチャットアプリ作ってみた

# 概要
先日参加させていただいた[WebRTCハッカソン](https://ueqareer.connpass.com/event/102614/)でLive2Dを使ったアバタービデオチャットを作成しました
![uroom.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/192773/7a3937d4-df52-7512-d7f7-b11290a8460c.gif)

firebaseでデプロイしてるのでぜひ試してみてください！
[ゆる〜む](https://uroom-49e1a.firebaseapp.com/)

# 目次
- 使用技術
- 構成
- 中身

## 使用技術
- WebRTC
- live2D
- clmtrackr.js (トラッキングのライブラリ)

## 構成
![スクリーンショット 2018-12-10 20.04.16.png](https://qiita-image-store.s3.amazonaws.com/0/192773/66d8d0ae-75aa-8970-61b6-a1dbb3c9a865.png)

ビデオチャット自体は通常と同じように、skywayを通してWebRTCの通信を可能にしています
それによって音声や映像の送受信をしています

## 中身
### アバターの動き
アバターには[live2D](https://www.live2d.com/ja/)を使用しています
また、jsのライブラリである[clmtrackr.js](https://github.com/auduno/clmtrackr)を使用して送られてきた映像から顔のトラッキングをしています

手順としては以下
1. （自分の場合は自分の映像を、相手は送られてきた映像を元に）映像からclmtrackrを用いてトラッキングを行う
2. トラッキングした結果が配列として得られる
3. live2Dの各パラメータに先ほど得られた配列の対応する値を代入する

このような手順でアバターの動きを実現しています
↓のGIFは左が元の映像、真ん中がclmtrackrによる結果、右が値を反映したlive2Dのアバターです
![00.gif](https://qiita-image-store.s3.amazonaws.com/0/192773/aefadcf4-c1ad-53a8-0a79-52234c2afae0.gif)

### アバターの変更
今回は複数のアバターを用意したためユーザーが任意に変更でき、それが受信側でも変更されるようにしました
この機能を実現するためにもWebRTCのチャット機能を使用しました

![スクリーンショット 2018-12-10 20.19.04.png](https://qiita-image-store.s3.amazonaws.com/0/192773/e9ff962b-d2b0-c7ce-a884-d794928197e1.png)


1. ユーザーが使用するアバターを変更する
2. 選択したアバターのIDがwebRTC経由で相手に送信される（テキストチャットと同じ機能）
3. 受信側は受信したアバターのIDを元にlive2Dのモデルを再生成＆再描画する

このような手順でホスト側ゲスト側の使用しているモデルの同期を行なっています

## 感想
ハッカソンの結果は最優秀賞＋NTTコミュニケーションズ賞のW受賞でした！（嬉しい！！）


Skywayのおかげでほんとに簡単にWebRTCの機能を実装できちゃうのでぜひ使ってみてください！
変更を記録する

#Git commit
##git commitはファイルの変更を記録するためのコマンド
　　　- 変更としては
　　　- 変更
　　　- 新規作成
　　　- 削除
　　　- 複数ファイルの作成・変更・削除がある
　　　

##主なgit commitコマンド
##git commit 
git add <file> により、インデックス領域にステージされた変更内容をすべてまとめたコミットを作成できる。
<pre>git commit</pre>

##git commit .
「.（ドット）」で現在のディレクトリのファイルの全てをコミットすることができます。
<pre>git commit .</pre>

##git commit -m 
コメントを　git commit実行と同時に入力し、エディタを開くことなく、素早くコミットを作成できる
<pre>git commit -m 'message'</pre>

#参考文献・引用元
https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0
【Windows】お手軽なDockerの環境構築

# 概要
今更ですが、WindowsにDockerをインストールして、その環境を整えていきたいと思います。

割とお手軽にできる方法です。


## 技術要件
 - Windows 10 Pro 64bit
 - メモリ 8.00GB
 - Intel Corei7-6500U CPU 2.50GHz 2.59GHz

## Dockerをインストールするにあたっての準備

### １. CPU仮想化を有効にする

`スタートメニューを右クリック → [タスクマネージャー] → [パフォーマンス] → [CPU]` で確認できます。
矢印で示している、 **CPU仮想化** が有効になっているか、確認してください。
![taskmane_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/224939/c48db3d1-4068-66d4-ea49-a457dc6a94b1.jpeg)

### 2. Hyper-V

`スタートメニューを右クリック → [アプリと機能] → [関連設定－プログラムと機能](下の方にあります) → [Windowsの機能の有効化または無効化]` をクリックしてください。

すると、こんな画面が出てくると思います。
<img width="348" alt="win.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/224939/2c56786f-314f-a44f-cd6b-d7499a1aca41.png">

 **Hyper-V** にチェックを入れてください。
<img width="347" alt="winafter.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/224939/9f708364-c770-7c3e-b901-0234f50dcb21.png">

Hyper-V以下のもの全てにチェックが入っているか確認できたら、OKを押します。

そして、一度PCを再起動しましょう。
再起動することによって初めて、この設定の変更が適用されます。

これにてDockerをインストールするにあたっての設定が整いました。


## Dockerのインストール

### インストーラのダウンロード

[Docker Store](https://store.docker.com/editions/community/docker-ce-desktop-windows) から、インストーラをダウンロードします。
<img width="960" alt="doc.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/224939/6aa69e55-2e23-2ce7-1c54-8f88c738d2ab.png">

アカウントを作る必要があります。適当にメールアドレスを用意しておきましょう。

### インストール

インストーラを開き、書いてある通りに進めてください。

進めていくと、こんな画面が出てきます。
<img width="268" alt="docstart.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/224939/ba34ab03-1f53-367b-f5ce-59dad273261c.png">

ここには、先ほどDocker Storeで登録したアカウント情報をそのまま入力してください。
数分でDockerが完全にインストールされます。

### インストールされたかの確認

```
$ docker version
Client: Docker Engine - Community
 Version:           18.09.0
 API version:       1.39
 Go version:        go1.10.4
 Git commit:        4d60db4
 Built:             Wed Nov  7 00:47:51 2018
 OS/Arch:           windows/amd64
 Experimental:      false

Server: Docker Engine - Community
 Engine:
  Version:          18.09.0
  API version:      1.39 (minimum version 1.12)
  Go version:       go1.10.4
  Git commit:       4d60db4
  Built:            Wed Nov  7 00:55:00 2018
  OS/Arch:          linux/amd64
  Experimental:     false
```
こんな感じで表示されればOK！
Dockerは無事Windowsにインストールされました！


## (おまけ)Dockerのコマンドメモ
### Dockerの起動
```
$ docker-compose up
```
### Dockerのステータス確認
```
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
```
Dockerが動いていないと、このように表示される。
膨大な数のページに埋め込まれたタグ確認テストを自動化した話

LIFULL SETグループの木住野(きしの)です。
※ ちなみにSETとはSoftware Engineer in Testの略称です
１０月から発足された新設部署になります。よろしくお願いします。
主にテストや開発作業の自動化、高速化をメインミッションに活動しています。

話のはじまりはSETグループで開発中のテストツールを社内の開発チームに使ってもらってフィードバックをもらおうという改善活動からでした。
本稿はその活動にご協力いただいた開発チームに使ってもらったときの事例になります。

#１. E2EテストツールでUIテストを自動化する

基本的にE2Eテストツール(seleniumなど)はUIテストのために用いられることが多いと思います。

UIテストで担保したいことは
ある操作をした結果、ユーザが期待する通りに動作し、目的を達成できるかです。

**(例)**

* ログインフォームにID/パスワードを入力して、ログインボタンをクリックする→ログインできること
* 検索条件を選択肢して情報を絞り込む→ちゃんと絞り込めること

つまり **ユーザへの価値提供** がきちんとなされているかに重きをおいたテストです。
我々で元々運用しているE2Eテストも同じ目的でした。

しかし、本事例はユーザ目線というよりも、 **サービス提供者目線** での利用でした。

# ２. どんなリリースだったのか
さて具体的にどんな内容のリリースだったかというと、
**弊社サービスの様々なページにとあるHTMLタグを埋め込み、属性値をパターン別に出し分ける**
というようなものでした。

このタグはユーザデータを収集するためのものです。

ユーザにとってはこのタグの有無で動作の変化はほぼありませんが、サービス提供側からするとこの情報は大事な情報です。

実際に埋めるタグは下記のようなイメージです。

```
<div class=”class_a” hoge=”value1” fuga=”value2” gafu=”value3”  ..........>　
```

パターンによっては14個もの属性値を確認する必要があります。
また、対象ページ数はざっと350URL程度でした。

「埋まっているタグの属性値が仕様どおりか」をできるかぎり網羅的に確認することがテストで担保したいことになります。

# ３. 開発チームが懸念していたこと

* 膨大なページに埋め込まれたタグの属性値をチェックするのは工数がかかる :muscle: 
* 人なので見間違いが発生する危険もある :cry:
* テスト実施者はロボットにように単純作業をしなければならない :robot: 

# ４. どんなテストを自動化したのか
### テスト手順 ~ 手動の場合 ~
問題を解決するために自動化したテストの手順は以下になります。

1. URLを開く 
2. ソースコードを開く（DevToolかなにかで）
3. タグを検索（ひっかかりそうな文字列）
4. タグの値を見て確認 (※ 複数ある場合はすべて確認)
5. 結果記入

これを対象ページ数分実施します。
決して難しくはないですが、
ページ数も多いですし、視認して結果も記入するという手間ですし、なによりこの単純作業がとても ~~つらくて退屈~~ 大変そうですよね。
またこのサービスのテストプロセスではこれを数回実施する必要があります。:sweat_smile:

### テスト手順 ~ 自動の場合 ~
以下のようなテストケースにしてテストコードへ落とし込み自動化を行いました。
1. URLを開く
2. xpathでWeb要素を取得
3. 属性値を検証
4. 結果をDBへ登録（テストレポートに使用する）

もちろん実装コストはタダではありませんが、懸念事項はだいぶ改善されました :clap::clap: 


# ５. まとめ
* データ収集用のタグ設定確認にもE2Eテストツールが使える
* もちろん今後の回帰テストにも繰り返し利用可能
* ただブラウザを使わなくてもHTMLドキュメントをダウンロードするだけ(curlなど)のほうが速度は向上できるかも
    （ページロード後に非同期で取得されるタグなどはとれないかも）
CoreDNS の gRPC proxy サーバーを作ってみよう

# CoreDNS とは？

[CoreDNS: DNS and Service Discovery] (https://coredns.io/)
2018 年現在 CNCF で Incubating な DNS サーバーです。 
SkyDNS と互換性があり、 etcd などの多種のバックエンドを使って DNS をサービスすることができます。

ところで、社内で独自のカスタムを施した DNS サービスを作りたいと思ったことはないですか？
CoreDNS なら、 gRPC proxy 機能を用いて、独自のカスタマイズした DNS サービスに問合せを proxy することも可能です。
今回は簡単な例題を作成して、 CoreDNS gRPC proxy サービスの作成に入門してみましょう！

# 簡単な gRPC proxy サービスの例

今回は例題として、いかなるドメインの A 問合せに対しても単純に `127.0.0.1` を返すだけのサービスを作成してみましょう。
こちらが今回のサンプルです。

**main.go**

```golang
package main

import (
	"context"
	"fmt"
	"github.com/coredns/coredns/pb"
	"github.com/coredns/coredns/plugin/etcd/msg"
	"github.com/miekg/dns"
	"google.golang.org/grpc"
	"log"
	"net"
	"os"
)

type DnsSample struct {}

func (ds *DnsSample) Query(ctx context.Context, in *pb.DnsPacket) (*pb.DnsPacket, error) {
	m := new(dns.Msg)
	err := m.Unpack(in.Msg)
	if err != nil {
		return nil, fmt.Errorf("failed to unpack msg: %v", err)
	}

	r := new(dns.Msg)
	r.Question = m.Question

	q := m.Question[0]
	switch q.Qtype {
	case dns.TypeA:
		r.Id = m.Id
		r.Response = true
		serv := new(msg.Service)
		r.Answer = []dns.RR{serv.NewA(q.Name, net.IPv4(127, 0, 0, 1))}
	}

	out, err := r.Pack()
	if err != nil {
		return nil, fmt.Errorf("failed to pack msg: %v", err)
	}

	return &pb.DnsPacket{Msg: out}, nil
}

func main() {
	server := grpc.NewServer()
	pb.RegisterDnsServiceServer(server, &DnsSample{})
	listenPort, err := net.Listen("tcp", "0.0.0.0:1053")
	if err != nil {
		log.Println(err)
		os.Exit(1)
	}
	server.Serve(listenPort)
}
```

gRPC の定義は、 `github.com/coredns/coredns/pb` にありますので、これを import して用います。


**dns.proto**

```
syntax = "proto3";

package coredns.dns;
option go_package = "pb";

message DnsPacket {
	bytes msg = 1;
}

service DnsService {
	rpc Query (DnsPacket) returns (DnsPacket);
}
```

この `rpc Query` を自分で実装することで独自カスタムができます。
このように CoreDNS 側とやり取りできるデータはただの byte 列です。
`dns.Msg` を用いて、 `Unpack()`, `Pack()` することができるので、それで DNS のプロトコルをパースすることができます。
具体的にはコードを読んでみてください。

# gRPC proxy を行う設定

CoreDNS は `Corefile` というファイルに設定を記述します。
下記のように記述することで、 DNS の問い合わせを今回作成する独自の DNS サービスに proxy することができるようになります。

**Corefile**

```
.:53 {
    proxy . 127.0.0.1:1053 {
        protocol grpc insecure
    }
    debug
    log
}
```

# 動作確認

## CoreDNS を起動

設定ファイルである`Corefile` が存在するディレクトリで起動します。

```
$ sudo coredns
```

## gRPC proxy サービスを起動

今回作成した `main.go` を起動します。

```
$ go build main.go
```

## 問合せしてみる

適当なドメインへの A 問合せに対して、 `127.0.0.1` を返しています！

```
$ dig +short A @127.0.0.1 "test.com"
127.0.0.1
```

# Let's hack!

今回の記事では CoreDNS の gRPC proxy で動作する、独自 DNS サービスの例題を実装してみました。
これらの例題をもとに、バックエンドデータベース、レコードデータのフォーマット、アルゴリズム、お好きなようにカスタマイズしてみてください😉
Github上のハイライトされたコードをGoogleプレゼンテーションに貼り付ける方法

環境: MacOS, Google Chrome

そのままコピペすると表貼り付けになってしまうので下記のように工夫します。


* Github のコードをブラウザ上でコピー
* Googleプレゼンテーションで
 * メニュー > 挿入 > テキストボック
 * スライド上に空のテキストボックスが追加されたら、その中にカーソルを移動してからペースト(⌘ + v)

これで、きれいに色付きでソースコードを転記することができます。
<Gather> Tips

# &lt;Gather&gt; Tips

## &lt;Gather&gt; とは

[&lt;Gather&gt;](https://www.twilio.com/docs/voice/twiml/gather) は Twilio でアナウンスを流し、番号を受け付ける IVR を実現する仕組みです。

&lt;Gather&gt; で Twilio に問い合わせを受ける内容を Tips としてまとめてみました。もし &lt;Gather&gt; を使ったことがなければ是非[チュートリアル](https://jp.twilio.com/docs/voice/tutorials/how-to-gather-user-input-via-keypad)をご覧ください。

## 留守番電話判定

例えば障害通知で誰かが電話応答するまで連続架電したい場合、statusCallback が completed になるまで架電します。

しかし留守番電話の応答も completed になるため、その先に進みません。留守番電話は人間的には応答していないと見なしたいですが、電話的には応答したと見なされます。

そんな留守番電話の判定に &lt;Gather&gt; を利用することができます。

留守番電話はプッシュを押さないため「障害対応するには 1 を押してください。今は障害対応できないため次の方に回すには 9 を押してください。」とすることで Digits が返らなければ留守番電話と見なして次に架電することができます。

連続架電は下記を参照ください。

- [Twilio Functionsを使って、サーバーレスで連続架電を行う - Qiita](https://qiita.com/mobilebiz/items/caf5a4d1889da4cc8dfd)
- [Twilio FunctionsとStudioを使って連続架電を行う - Qiita](https://qiita.com/mobilebiz/items/8757eec854f37ce0cb2d)

なお、Twilio には[留守番電話検出 ( Answering Machine Detection )](https://jp.twilio.com/docs/voice/answering-machine-detection) がありますが、2018/12/11 現在、日本には対応していません。

## 未入力判定

&lt;Gather&gt; は電話を切ったのか、未入力で終わった ( timeout した ) のか分かりません。

[TwiMLアプリでユーザートラッキングするなら気をつけろ - Qiita](https://qiita.com/yagi_/items/ccfeda501f9351f4daef) で非常に面白い判定方法が紹介されています。

Twilio のサポートでは Digits がない場合、電話が answered になった時間から、/action に来た時間の差を求め、timeout 以下なら電話を切ったか finishOnKey だけを押したとし、timeout 後の時間であれば未入力と見なす方法を案内しています。 

ただ時間は処理時間などで数秒の誤差が生じるため完璧ではありません。

```
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Gather action="https://example.com/action" timeout="50">
    <Say language="ja-JP">四桁の認証番号を入力してください</Say>
  </Gather>
  <Redirect>https://example.com/action</Redirect>
</Response>
```

## 録音

### 受信

&lt;Gather&gt; の制約で &lt;Record&gt; を利用することができません。そのため「通話着信時」にプログラムを指定して Call SID を取得し、[Record API](https://qiita.com/twilioforkwc/items/f06c96f55696b96c8c04) をご利用ください。

### 発信

[&lt;Dial record="record-from-answer"&gt; ](https://jp.twilio.com/docs/voice/twiml/dial#record) や [Record API](https://qiita.com/twilioforkwc/items/f06c96f55696b96c8c04) をご利用ください。


皆さまが Gather で何を開発されるのか、目にするのが待ちきれません！
プライベートネットワークに設定したWi-FiにWindows10とスマホ端末を繋いで通信を取得する

# プライベートネットワークに設定したWi-FiにWindows10とスマホ端末を繋いで通信を取得する

シーエー・アドバンス [Advent Calendar 2018 ](https://qiita.com/advent-calendar/2018/ca-advance) 11日目の記事です。
おはようございます。 @inahuku_shingo です。
普段は脆弱性診断業務をしています。


ある日、社用のモバイルルータを使って診断業務をする必要がありました。
僕は、いつもと同じ感覚で、モバイルルータのWi-FiにWindowsPCとスマホ端末を繋ぎました。

スマホとPCをモバイルルータのWi-Fiに繋いで、プロキシツールの設定も完了し、さあ診断するか！と意気込んのですが、一向にスマホの通信がプロキシツールに入ってきません。
かなしい。もう帰ろうかと思いました。
……。

結論としては、Windows側でネットワークの設定をプライベートネットワークにする必要がありました。
下記に手順を記載します。

## 試した環境
 - WIndows10
 - リモート業務用に支給されているモバイルルータ
 - iPhone8(11.0.3)　※他のバージョンやAndroidでも可能です。


## 手順
1. モバイルルータのWi-Fiに、WindowsPCを接続
2. WindowsPCのWi-Fi設定から、モバイルルータのプロパティを表示
　![image01.png](https://qiita-image-store.s3.amazonaws.com/0/141077/626a6cdc-9083-c898-442d-febcf110d78c.png)
3. ネットワークプロファイルの項目をプライベートに設定
　![image02.png](https://qiita-image-store.s3.amazonaws.com/0/141077/3b56b981-55dd-75fe-27df-72f464dd373a.png)
　![image03-2.png](https://qiita-image-store.s3.amazonaws.com/0/141077/732f66f6-c202-b35f-cff2-026c8a3d4295.png)

4. 「ファイアウォールとセキュリティ設定の構成」を開く
5. 「ファイアウォールとネットワーク保護」画面で、プライベートネットワークの項目を開く
　![image03.png](https://qiita-image-store.s3.amazonaws.com/0/141077/fe03e674-2920-1745-265a-7f5fc97fe122.png)

6. アクティブなプライベートネットワークに、モバイルルータのWi-FiのSSIDが記載されていることを確認
　![image06.png](https://qiita-image-store.s3.amazonaws.com/0/141077/6d04cfa7-d9cd-ffdd-7836-f65129e4c76a.png)

7. 記載されていない場合は、「ファイアウォールとネットワーク保護」画面に戻って、「ファイアウォールによるアプリケーションの許可」を開く　
　![image07.png](https://qiita-image-store.s3.amazonaws.com/0/141077/12ac24a5-2444-0a1d-57b8-cac621504808.png)
　![image08.png](https://qiita-image-store.s3.amazonaws.com/0/141077/08375b20-fce5-1e69-42b8-3795a22a23f7.png)

8. 「Windows Defender ファイアウォール」に移動
　![image09.png](https://qiita-image-store.s3.amazonaws.com/0/141077/74b46335-d3a3-c683-6305-8ebceffb3ac4.png)
　
9. 「Windows Defender ファイアウォールの有効化または無効化」を開く
　![image10.png](https://qiita-image-store.s3.amazonaws.com/0/141077/809f8c0f-6b21-17d7-7d70-8bd784ab71c8.png)

10. 「プライベートネットワークの設定」項目で、無効にチェックしてOKを押す
11. スマホ端末をWi-Fiに接続する
12. スマホ端末のWi-Fi設定で、プロキシの設定項目にPC側のIPアドレスとポートを設定する
※手順12については、僕が昔書いた記事ですがこちらをご参考ください！
> BurpSuiteFreeを使うときの設定をサクサク書いてみた（iPhoneとAndroid）
> https://qiita.com/inahukus/items/f6e20e877d8f8a192ed2


## できました
できました。
スマホ端末の通信をWindowsPCのプロキシツールで取ることができました。


## ときどき不機嫌になる設定
プライベートネットワークにチェックが入っているけど、プライベートネットワークになっていないことがたまによくあります。
その場合は、もう一度オン・オフしてみてください！

### 注意
プライベートネットワークに設定している場合は、信頼できる端末だけWi-Fiに繋げるようにしましょう！
リーダブルコード　より良いコードを書くためのシンプルで実践的なテクニック

#諸言
　学習履歴全体のリンク
　https://qiita.com/shigural/private/444b991293e5ab1b40af
#本文
##リーダブルコード　より良いコードを書くためのシンプルで実践的なテクニック
ここのサイトがよくまとめている
https://myenigma.hatenablog.com/entry/20131111/1384175078

####1.理解しやすいコード
　具体的な名前をつけよう

###表面上の改善
####2.名前に情報を詰め込む
　変数にはsやmsなどの単位をつけよう
　すべて大文字で定数、変数名の最後に_をつけたらメンバ変数を示そう
####3.誤解されない名前
　曖昧な言葉「filter」よりselect/excludeを使う
　範囲を表すならfist-last、開始から終わりはbegin-end
　bool型は肯定文で表現する
　read_passwordよりneed_passwordなどとする。isやhasも積極的に利用するべき
　getは低コストな関数にだけつける
　size関数は軽くしておき、重たい処理はcountsizeなどと別名にしておく
####4.美しさ
　引数が複数ある時、スペースで見やすくすると良い

```
//見にくい
test("a","","test");
test("b","TestHogeHoge","offset");

//見やすい
test("a",""            ,"test"  );
test("b","TestHogeHoge","offset");
```

変数名は重要順なり、アルファベット順なり規則を持って並べる

####5.コメントすべきことを知る
　コードの欠陥についてコメントすると良い
　TODO:後ですること
　FIXME:既知の不具合
　HACK:きれいでない
　XXX:危険な不具合
　
　定数には積極的にコメントしよう
####6.コメントは正確で簡潔に
　代名詞は避ける
　誤解しないように書く
　インラインコメントを利用する。特にbool型には利用すると良い

```
　Connect(/*timeout_ms=*/ 0, /*use_excryptiona=*/ false);
```

###ループとロジックの単純化
####7.制御フローを読みやすくする
　条件式は
　「調査対象」（比較演算子）「比較対象、あまり変化しないもの」
　という並びにするとわかりやすい
　ifの中身は否定より肯定を使う
　目立つ条件や単純な条件を先に書く
　do-while文を使わない
　早くreturnする。continue文を積極的に使う
####8.巨大な式を分割する
　式が複雑なら一時変数としてようやく変数を作ると良い
　式が長いなら、否定で単純になるかを考える
####9.変数と読みやすさ
　変数はできるだけ書き込みを1回にする
Rust 2018のマクロインポート

急に小ネタができたので、[Rustその2 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/rust2)の11日目です。

# はじめに

[Rust 2018](https://rust-lang-nursery.github.io/edition-guide/rust-2018/index.html)ではマクロのインポートを以下のようにマクロ名を指定して書くことができるようになりました。

```rust
// Rust 2015
#[macro_use]
extern crate bar;

// Rust 2018
use bar::baz;

fn main() {
    baz!();
}
```

ということで、手元のプロジェクトを片っ端から書き換えてみたところ、
現時点（2018/12/10）ではうまくいかないケースがあるようです。

## うまくいくケース

最新版の`serde`や`lazy_static`など有名どころは問題ないです。

```rust
use lazy_static::lazy_static;
use serde_derive::{Deserialize, Serialize}
```

古いバージョンを使っている場合はアップデートしましょう。

## うまくいかないケース

例えば`error_chain`の0.12.0では

```rust
use error_chain::error_chain;
```

とすると以下のエラーになります。

```
error: cannot find macro `error_chain_processing!` in this scope
```

これは`#[macro_use]`では当該クレートの全マクロをインポートしていたのが、マクロ名指定になったことで
`error_chain!`マクロ内で使われているヘルパーマクロが見つからなくなったためです。

これを解決するには[Local helper macros](https://doc.rust-lang.org/edition-guide/rust-2018/macros/macro-changes.html#local-helper-macros)に書いてある通りライブラリを修正する必要があり、
ユーザコードで対応するならヘルパーマクロを1個づつ書いていくしかありません。
さすがにそれは問題あるので、ライブラリが対応するまでは`#[macro_use]`を使った方がいいでしょう。

ちなみに以下のコードは通りますが、この場合マクロ以外も含めて全てインポートされるので
何か衝突した場合は回避できません。

```rust
use error_chain::*;
```

`error_chain`の場合はすでにIssueもPRも立っているので近いうちに対応するはずですが、
マイナーなクレートで未対応なものはPRのチャンスかもしれません。
A-Frameを使ってWEBで簡単にVRを実装する 

#はじめに
こんにちは、うっちーです。
この記事は[Life is Tech! Tokai Mentors Advent Calendar 2018](https://qiita.com/advent-calendar/2018/lit-tokai-mentors)10日目の記事です。映像をメインに担当させていただいてますが、以前利用したことがあるWebVRについて書かせていただきます！

最近はRICOH THETAやinsta360など３６０°の画像や映像を撮影することが容易になってきました。今回はその画像をWebで使うことを目的にWebVRのフレームワークであるA-Frameを触っていきたいと思います。

### WebVRとは
WebでVRを表示する技術です。
スマートフォンやPCからはブラウザ内でVR空間を開くことができますし、対応HMD(ヘッドマウントディスプレイ、OculusとかViveとか)で見れば通常のVRのように表示されます。

### 今回の目的
今回は簡単にWebVRを表示できる[A-Frame](https://aframe.io/)というフレームワークの紹介と実際にA-Frameを利用してVR画像及び動画の配置を行ってみます。

### サンプル的なもの
以前自分が製作したものを置いておきます。
[手軽に宇宙VR体験！ | 360VR NAFT](http://360.naft.space/)

# 画像、動画を置いてみる
VRに使う画像はエクイレクタングラー(equirectangular, 正距円筒図法)形式である必要があります。
撮影したものがない場合はFlickrで探すといいと思います。
[Search: equirectangular | Flickr](https://www.flickr.com/search/?text=equirectangular&license=2%2C3%2C4%2C5%2C6%2C9&sort=interestingness-desc)


## A-Frameの読み込み
htmlのhead内にて以下を記述します。

```html
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
```

もちろん、ローカルに保存して読み込んでも可能です。

## 画像を配置する
`body`内に以下のコードを記述します

```html
<a-scene>
  <a-assets>
    <img src="path/to/image" id="background" />
  <a-assets>
  <a-sky src="#background"></a-sky>
</a-scene>
```

`<a-assets>`内のものはレンダリングされないので、`image`タグのidを`a-sky`タグのsrcで指定することで画像をレンダリングします。
これだけで画像をVRで見ることができるようになります！とっても簡単！

## 動画を配置する
画像を配置したときと同じように`<a-assets>`で動画を読み込みますが、レンダリングさせるタグが`<a-videosphere>`になります。

```html
<a-scene>
  <a-assets>
    <video src="back_v.mp4" id="back_v" loop="ture"></video>
  <a-assets>
  <a-videosphere src='#back_v'></a-videosphere>
</a-scene>
```

本当に簡単！！

# まとめ
今回は本当に簡単な画像や動画を表示させるものでしたが、A-Frameを使えばさらに凝ったWebVRのページを作ることもできます！
ぜひ使ってみてください！
[A-Frame](https://aframe.io/)
InSpec でデプロイを自動テスト化する

<!-- InSpec でデプロイを自動テスト化する -->

# InSpec とは

[InSpec] は環境構築が正しく行われているかどうかをテストするためのフレームワークです。 Ruby で記述されており環境構築ツールで有名な Chef が開発しています。

## serverspec との違い

InSpec と同系のツールに [serverspec] というフレームワークがあります。もともと InSpec は serverspec の拡張として作られていたため、テストコードの記述の仕方もよく似ています。しかし InSpec の方がセキュリティやコンプライアンスのテストなど serverspec よりも幅広いテストが可能となっています。

InSpec と serverspec の書き方の違いは [マイグレーションガイド] にまとまっていますので、 serverspec から InSpec に乗り換える際にはご活用下さい。

[マイグレーションガイド]: https://www.inspec.io/docs/reference/migration/

## 試した環境

- CentOS 7
- InSpec 3.0.52

## インストール

```
$ gem install inspec
```

## 使い方

Apache がインストールされているかどうかをテストしたいときは次のようなコードを書きます。

**httpd.rb**

```ruby
describe package('httpd') do
  it { should be_installed }
end
```

テストを実行するにはターミナルで次のコマンドを叩きます。下記は `httpd` が入っていない場合の結果です。

```
$ inspec exec httpd.rb

Profile: tests from tests (tests from tests)
Version: (not specified)
Target:  local://

  System Package httpd
     ×  should be installed
     expected that `System Package httpd` is installed

Test Summary: 0 successful, 1 failure, 0 skipped
```

テストを実行する対象はローカルマシンではなくリモートマシンを指定することもできます。リモートマシン上でテストを実行するには次のように ssh でログインするときのユーザ名とパスワードを指定して実行します。

```
$ inspec exec httpd.rb -t ssh://<user>:<pass>@<host>:<port>
```

**httpd.rb** 内の `package()` というのはリソースといって各種情報源へアクセスするためのオブジェクトになります。リソースには次のようなものがあります。

| リソース | 説明                           |
|----------|--------------------------------|
| package  | yum/apt などのパッケージの情報 |
| file     | ファイルの情報                 |
| http     | HTTP に関する情報              |
| port     | ポートに関する情報             |
| command  | コマンドの実行に関する情報     |

公式サイトに [リソース一覧] がまとまっていますのでご活用下さい。

ある観点でテストを作成するときには複数のリソースを使用するケースがあります。そのような場合には `control` というブロックを使って複数のリソースをまとめることができます。

```ruby
control 'command' do
  title 'コマンドに関するテスト'

  describe command('/bin/sh').exist? do
    it { should eq true }  # /bin/sh が存在するかの確認
  end

  describe command('echo hello') do
    its('stdout') { shuld eq "hello\n" }  # 標準出力の内容を確認
    its('stderr') { should eq '' }        # 標準エラー出力を確認
    its('exits_status') { should eq 0 }   # 終了コードが 0 であることの確認
  end
end
```

リソースで提供されていない情報源を参照したい場合は `command()` を使ってコマンドの実行結果をパースすることになりますが、場合によっては複数のコマンドを組み合わせる必要があったり複雑なパースが必要になることもあります。そのような場合には [osquery] というコマンドラインツールを使うと情報源の取得を SQL で記述し結果を JSON で受け取れるので記述がシンプルになります。

```ruby
require 'json'

# osquery で httpd のプロセス情報を JSON で取得
result = command('osqueryi --json "SELECT * FROM processes WHERE name = \'httpd\';"')

JSON.parse(result.stdout).each do |item|
  # httpd はポートをリッスンしているか？
  describe port(item['port']) do
    it { should be_listening }
  end
end
```

[リソース一覧]: https://www.inspec.io/docs/reference/resources/

## まとめ

ナビタイムではデプロイ時のテストとして InSpec を活用しています。InSpec を使うことで安全なデプロイができるだけでなく、デプロイに対する心理的負担が下がる効果もあるのでぜひご活用下さい。

## 参考

- [InSpec]
- [serverspec]
- [osquery]

[InSpec]: https://www.inspec.io/
[serverspec]: https://serverspec.org/
[osquery]: https://osquery.io/
Firebase で購買申請フローを作った話

# はじめに
どの会社でも業務上の申請フローがあると思いますが、そういった業務フローを整備している途中のベンチャーでは様々なフローが整っていないことがよくあります。
scouty でも少し前までは何か購買を依頼する時には **申請用の slack チャンネルに書き込んで、それを担当者が見て処理する** というやり方をしていました。

社員数が少ないうちはこのような slack だけのフローでも問題なく回せると思います。
ところが最近、弊社バックオフィス担当の業務負荷が一時的に非常に高くなり明らかに大変そうにしており、そんな時に slack でのこの発言をみて **「これを運用し続けるのはどう考えても無理がある・・・！！！」** と思いました。

![slack.png](https://qiita-image-store.s3.amazonaws.com/0/43699/4254dc6a-ffbf-9832-6cad-1f383d31f521.png)


# 抱えていた課題
これまでに行われていた slack だけでの申請フローだとざっくりとこんなところが困っていたと思います。

- 申請を処理する人たち
    - 申請が来ても気づかず見落としてしまう場合がある
- 申請する人たち
    - 自分が出した申請の対応状況が担当者に聞かないと分からない

こういう日々発生する **細かいところでいちいち気にしたり都度考える必要があると、ちょっとずつジワジワと頭のリソースが消費されてしまい** 本来やるべき本質的なことではないのに非常にもったいないですよね。

そこで、なるべくシンプルかつ今まで触ったことがない技術を使って上記の課題を解決する仕組みを作れば、 **みんな助かるし自分としてもアドベントカレンダーのネタができてみんなが幸せになっている未来しか見えない！** と思って購買申請フローを簡単にする仕組みを作ることにしました。

# 作ったもの
以下のような仕組みを作りました。

- Google フォームから購買申請を入力
- 申請内容を GitHub issue として自動作成
- 申請が登録・クローズされると処理担当者と申請者に slack で通知

![easy_workflow.gif](https://qiita-image-store.s3.amazonaws.com/0/43699/436ded53-b288-6982-2101-c24bfdf31ef6.gif)

申請者、担当者それぞれが微妙に困っていたところを解決する仕組みになっています。
![flow.png](https://qiita-image-store.s3.amazonaws.com/0/43699/f36db906-01a5-05a1-5535-805d151c2960.png)



# 仕組みの中身
Simple & Easy 購買申請フロー は以下を使って実装されています。
(くそダサいけどここではそう呼びます)

- Googleフォーム
- Gapps Script
- Firebase (Cloud Functions)
- GitHub issues
- Slack

![Group 3.png](https://qiita-image-store.s3.amazonaws.com/0/43699/15d6d032-8553-2206-f1dd-e6594b16bf59.png)

Firebase が中心となってそれぞれと連携しています。

# コード
公開用にすこしいじったコードを GitHub　で公開しています。
特に特殊なことはありませんが、似たような仕組みを作りたい方がいたら参考になれば嬉しいです。
https://github.com/Chanmoro/easy-workflow

今回 Firebase の cloud functions を初めて使いましたが、node.js で express を使って web アプリを作っているのと同じなので、コードで困ったところは特になかったです。

# ハマった点
### firebase から外部に通信できない
無料登録をした直後の課金が発生しないプランだと firebase の Cloud Functions から外部に通信できない制限がかかっていました。
クレジットカードの情報を登録して従量課金プランにするとこの制限が外れます。
無料枠の範囲があり 12万リクエスト/月までは無料で使えるので今回の用途では無料枠の範囲でまかなえると思います。

https://firebase.google.com/pricing/?hl=ja

### Gapps Script ではリクエストヘッダーにアクセスできない
当初はなるべく簡単にしたかったので Gapps Script だけで作ろうとしており、GitHub の webhook を受け取るのも Gapps Script でやろうとしていました。
セキュリティを強固にするために webhook で設定できる secret token を使った署名のチェックを実装しようとしたのですが、Gapps Script ではリクエストヘッダーにアクセスできないことが分かりこの対応はできませんでした。

https://developer.github.com/webhooks/securing/

リクエストパラメータに認証トークン的なものをつけた URL を webhook に設定するなど、自前で簡易的に認証を入れるようにすれば Gapps Script だけでも実現できると思います。

今回はアドベントカレンダー用のネタを確保するという目的も途中でプラスして、ついでに typescript にも入門したと思い firebase を使うことにしました。

こういうのを動かすのは heroku とかでもいいんですが firebase の格安さは非常に魅力だと思います。

### 初回のリクエストには起動に時間がかかる
cloud functions はコールドスタートなので、デプロイの直後やしばらく時間が経つと処理に時間がかかります。
恐らくコンテナが停止している場合の起動に時間がかかっていると思われます。

今回のケースでは手を抜いて1つの function を通常の express アプリケーションのように実装してしまいましたが、なるべくURL単位でアプリケーションを細かく分けて起動にかかる処理をコンパクトにしておく方が良さそうです。

# 最後に
この記事では、 **既存の購買申請フローにあったちょっとした課題を便利な技術で解決しました** 、ということを書きました。
もちろんこれが完璧な仕組みではないことは重々承知していますが、こういうちょっとした工夫で日々ちょっとだけ困っていることを解決できるのはエンジニアとしてとても楽しいことですよねー。

影響の小さいところでいろいろと試してみると、 **エンジニアリングでの課題解決の楽しさも新しい技術の習得もどちらも得られて非常にお得** だと思うので、これからもちょこちょこやっていこうと思います！
使うOSSは常に最新のものを使おう

とある勉強会で聞いた話をここに書くことにします

# OSSは誰が管理をするか
UnityやWindowsなどの企業が開発しているソフトウェアは誰が管理しているでしょうか？もちろん企業がしています。公式ドキュメントや機能のアップデートなどはその企業が管理をしています。

それでは、OSSは誰が管理をしているでしょう？それはコントリビュータという管理を任された人たちがOSSの機能のアップデートや公式ドキュメントを英語や日本語・中国語といったそれぞれの言葉で書いています。ユーザーが少なくなれば必然的にコントリビュータも少なくなるわけです。どんなに素晴らしいOSSでもコントリビュータが少なくなって、新しい機能が追加されなくなったりバグを直なおらなくなったりしたらそのOSSを使う人はいなくなります。

では私達はOSSを使うときに何をしたら良いでしょうか？それは最新のバージョンを使って、こんな機能がほしいとか、こんなバグが見つかったとか、この関数のドキュメントがしっかりかかれてないなど脳をの意見を言うことです。これらの意見をみてコントリビュータはOSSをきちんと改良することができます。

# OSSのバージョンをきちんとした手順で更新しよう

使うOSSのバージョンを変えるのは大変です。何も考えずにアップデートしてしまうと開発に大きな影響を与えてしまいます。今まで使えていた関数が使えなくなったり、速度が何倍も遅くなったりしますね。

例えばpythonの話なんか有名ですが、python2とpython3は使い方が全く異なります。print構文が関数になったりしたので、それに合わせてプログラムを書き直すのは大変ですよね。

では何をしたら最新のバージョンを使いやすくなるでしょうか？そのための手順は以下の３つになります。

# 1. テストを書く
テストを書くことは開発でとても重要ですね。テストを書くことでどの関数やメソッドなどを変更しなければならないかが簡単にわかります。きちんとテストが書かれていればいるほど、アップ　
デートしやすく、開発そのものもしやすくなります。長い間メンテナンスするなら絶対に書きましょう。
# 2. 問題の抽象化をする
　
開発をするのにやるべきことはたくさんあると思います。やるべきことが1000個あったらそれらを一つ一つ解決するのは大変ですね。では複数の問題を同時に解決する方法はないでしょうか？その手助けになるのが抽象化です。
この1000この中に根本的な問題が同じものはいくつか存在するはずです。その根本的な問題をみつけるために抽象化をします。

#　3. アップデートを自動化しよう

使っているOSSをアップデートするために一度アンインストールしてからもう一度インストールするのは大変です。それを避けるためにアップデートを自動化しましょう。
RGSTを通して振り返る自分とScrum

## Certified Scrum Developer

きっかけは、Certified Scrum Developer (CSD)の認定を受けたことだったと思っています。

2011年くらいから、Agile/Scrumに興味を持って、少しばかり文献をかじっていました。
今思うと、当時はAgileという概念を完全に勘違いしていたなぁと思い、恥かしくなります。

さて、そんな僕でも、色々なコミュニティなどを垣間見ていく中で、どうも思っていたようなプロセス的なものではなく、もっと奥深いものだなぁと気付き、ちょっとちゃんと知ろうと思い、Scrum Allianceの認定の研修を受けてみようと思い立ったと記憶しています。

今よりもっと青臭かった自分は、ガリガリとコードを書くエンジニアでありたいと思っていたのもあり、Scrum Masterや、Product Ownerではなく、Developerの認定を受けたいと考え、シンガポールまで、CSDの研修を受けに行きました。

この話はどこかでも書いたような気もしますが、この時の研修がとても楽しく、とても緊張感のあり、とても学びの多いものでした。この空気感を自分の現場でも実現したいというのが、その後の僕のモチベーションの一つとなっています。
残念ながら、まだ、志し半ばですが。。。

そして、Scrum Allianceの記録によると、ちょうど6年前の今日、2012年12月10日にCSDの認定を受けておりました。

## Scrum Alliance Regional Gathering Tokyo 2013

そんなこんなで、CSDの認定を受けて、1ヶ月ばかりで開催だった、「Scrum Alliance Regional Gathering Tokyo 2013」にも参加させて頂きました。
そこで、なんて周りの人は自分よりも、もっとたくさん考えているのだろうということを再度、認識しました。
とはいえ、CSD受けての興奮もあり、無謀にもオープンスペースで話をさせて頂いたり楽しく過ごしました。
また、このクローズのセッションだったと思いますが、その話が御縁で、Scrum道の活動にも関わらせて頂くきっかけとなりました。

## Regional Scrum Gathering® Tokyo 2014

CSDを取得したことをめずらしかったのではないかと思うのですが、そんなことが御縁で、「Regional Scrum Gathering® Tokyo 2014」でお話させて頂く機会を得ました。
このときは、自分が話したことはともかくとして、ちょうどお昼のタイミングで、Mike Beedleさんと同じ席でお弁当を食べるという幸運に恵まれ、会話をさせて頂いたのが、非常に印象に残っています。

## Regional Scrum Gathering® Tokyo 2015

前年の体験が忘れられずに公募をさせて頂き、幸いにも全セッションが採択されたので、この回も登壇させて頂く機会を得ました。
このときは、2014年にはガリガリとコード書くためにはなんて言ってたのですが、どうもCSDの研修の雰囲気を作れない。まだまだ、自分のチームは自己組織的なチームじゃないから、きっとあの感覚で仕事ができないんじゃないかなどと考えて、色々、模索していたことを発表させて頂きました。
まだ、ふわっとした概念なのですが、予想以上に反響を頂いたので、Scrum AllianceのArticleにも投稿して掲載して頂きました。

## Regional SCRUM GATHERING® Tokyo 2016

この回もセッションプロポーザルを出しましたが、残念ながら、採用されず。
しかし、この回は、CSM研修、CSD研修のトレーナーであった、Bas Voddeがキーノートということで、とても楽しみにしていました。
そして、やはりいい刺激を受けることができたと思っています。

## Regional SCRUM GATHERING Tokyo 2017

あいかわらずセッションプロポーザルは出し続けていたと思いますが、採択されず。
この年は、Rachel Daviesが、Mob Programingを紹介してくれていたことが印象的でした。
僕も言葉としては知っていたのですが、こんなに効果的なものだったとは思ってもいませんでした。
そして、2017年は、アジャイル界は、モブプログラミングに染まっていったと記憶しています。
僕自身も、色々なところで、モブプログラミングの手法を使うようになりました。

## Regional SCRUM GATHERING Tokyo 2018 

そして今年は別件で忙しくて、参加できなかった記憶があります。
その結果として、なんとなく、コミュニティというか、どんどん新しいものに触れようとする機会が少なくなってしまった一年だったかなと振り返って思います。

## Regional Scrum Gathering® Tokyo 2019

さあ、そして、次の「Regional Scrum Gathering® Tokyo 2019」です。
今回は、数年ぶりにセッションプロポーザルが通ったので、登壇させて頂けることになりました。

内容としては、

Regional Scrum Gathering® Tokyo 2014の話で、目指したプログラマ像を実現するためには、
Regional Scrum Gathering® Tokyo 2015の話のような概念的な課題があり、
そのために、どうやって組織をデザインするか？

というものになっているはずです。

ここまで書いて思ったのですが、年の終わりに、セッションプロポーザルを書くことで、何が今年の学びだったのかを振り返り、年の最初にRGSTに参加することで、刺激とエネルギーをもらうというサイクルはとっても僕にとって大事だったなぁと思います。

このイベントを運営してくださったみなさま本当にありがとうございます。
運営してくださっているみなさま方への感謝で、このまとまりのない記事を締めくくらせて頂きます。
同僚の結婚式でPepperに踊ってもらった

先日、同僚の結婚式でPepperにとある平成の歌姫メドレーを踊ってもらいました。その時のダンスの製作過程を備忘録的にまとめました。これからPepperでダンスを作ってみたい方の参考にしていただけると幸いです。NAOqi ver.2.5.5を前提にしています。
*※あくまで個人の活動であり社を代表するものではありません。*

![pepper_dance2.png](https://qiita-image-store.s3.amazonaws.com/0/21165/3545beb3-67db-ae7b-30ec-294ce50c764b.png)

# 1.曲の情報をまとめる
　まず、曲の歌詞をフレーズごとに分割してスプレットシート等にまとめます。開始秒数、フレーズ、進捗状況、振り付けメモを項目にすると後々管理しやすいです。

# 2.振り付けを考える
　フレーズに対して振りをつけて行きます。個人的にここが一番難しく、時間のかかるプロセスでした。私の場合、アイデアの出し方は以下の３通りがベースです。

- 原曲のダンスを参考にする
- 歌詞からパントマイム的に動きを当てる
- Pepperの他のダンスの動きを参考にする

　例えばYMCAのように、曲中に印象的な振り付けがある場合はそれを採用します。そのような振りがなかったり、再現が難しい場合は歌詞に沿った動き（例：新しい世界のドアを開く勇気〜 -> ドアを開く動作、A walk in the park -> 歩く動作）を入れます。それでも思いつかない場合は、既存のPepperダンスから良い動きを参考にし、アイデアを出します。Pepperのダンスを日頃からチェックし、動きの引き出しを多く持っておくと思いつき易くなると思います。

ダンス例：ペッパーワールド2016
[![ペッパーワールド2016のダンス](http://img.youtube.com/vi/jaTt17zWyug/0.jpg)](http://www.youtube.com/watch?v=jaTt17zWyug)

# 3.アニメーションモードでざっくり動きを作る
　今度はChoregrapheからTimelineホックスを開き動きを作ってきます。今回はメドレーでテンポが曲の中で変わるため、フレームレートを10にし事前にメモしておいた秒数とフレームを合わせやすくしました。
　Pepperをアニメーションモードにして、フレームに腕と首の動きを当ててきます。ここで作ったポーズはポーズライブラリとして保存しておき、テンポよくポーズを作成していきます。ただし、この保存したポーズは後々破棄するので、あくまでフレームの位置を調整するためと考えておいてください。音源もビヘイビアに配置し、実機で再生させ大枠で振り付けができていることを確認します。

![スクリーンショット 2018-12-10 19.17.58.png](https://qiita-image-store.s3.amazonaws.com/0/21165/28950df8-9304-8fb1-0bb8-eab596198c56.png)
実機を使いたい時はPepperアトリエ秋葉原ヘ

# 4.動きを洗練させる
　ざっくり作った動きを以下のように洗練させます。

- 腕と指をピンと伸ばす(パラメーターで調整)
- トランジションをスムーズ or/and 面白くする
- 首や指の動きでテンポを刻む
- フレーム間に緩急をつけてキレをよくする
- 腰と膝の動きをつけてダイナミックな動きにする
- 移動や回転を加える

注意点としては、機体に負担の大きい動きをさせると故障や転倒のリスクがあるので、そのあたりは[ガイドライン](https://cdn.softbank.jp/mobile/set/common/pdf/static/robot/support/document/pepper_myapp_guide02.pdf)を参考にしてください。移動や回転は move to だと動作が遅いので時系列の制御が難しいですが、フレームに余裕をもたせつつちょっとした動きを足す程度であれば問題ないです。作り込む場合は[プラナームーブ](https://qiita.com/Atelier-Akihabara/items/b21397b4814eaf6fa303#%E4%BB%BB%E6%84%8F%E3%81%AE%E8%BB%8C%E9%81%93%E3%81%AB%E3%82%88%E3%82%8B%E7%A7%BB%E5%8B%95)を使いましょう。

![pepper_pin.png](https://qiita-image-store.s3.amazonaws.com/0/21165/783d25c3-e148-9d7f-acce-3c069e1d8f28.png)
腕はピン！

# 5.動作環境を整える
　動きができたところで、実際にパフォーマンスを想定することを想定してアプリを作りこみます。

- オフラインで待機 -> 起動できるようにする
- アプリのキャンセル処理を入れる
- Pepper起動後またはキャンセル後、操作なしでアプリ起動するようにしておく
- ダンス前の予備動作(それでは始めます的な)を入れる
- 音量をアプリ内で設定する
- Basic Awarenessを切る
- ディスプレイの表示内容を曲に合わせる

動作環境ができたら、本番をイメージしつつリハーサルを繰り返し、トラブルの可能性を排除していきます。

![スクリーンショット 2018-12-10 19.17.50.png](https://qiita-image-store.s3.amazonaws.com/0/21165/4ddde01d-e169-696f-bcf5-3592c9a67d5b.png)

# 6.本番
　今回は２台をシンクロさせる想定だったので、頭のTactile Headを使って２台同時に触ることで起動させました。音源は再生環境とPepperとの間に距離があったため同期が取りづらいのでPepper本体から出すこととし、音量は2台とも100に設定し、後ろにマイクを立たせました。床の絨毯に不安があったので、回転が足りない際などは人力で修正する運用を想定しました。
　絶対に失敗できない本番でしたが、結果、大きな問題もなくPepperにダンスをしてもらうことができて大成功でした。

![pepper_kidou.png](https://qiita-image-store.s3.amazonaws.com/0/21165/ac4ae3d0-0e00-9ce2-0de3-5a80c8e1145b.png)


7.おわりに
　Pepperはプログラマブルなロボットであり、相手や状況に合わせてオーダーメイドでアプリを作れるというのは大きな魅力です。同僚や家族や親しい人に向けて、その人が喜びそうなダンスを作ってみる、そういう活動が増えると良いと思います。
![pepper_finish.png](https://qiita-image-store.s3.amazonaws.com/0/21165/517d37b0-8f37-7404-b238-9aa979072a7f.png)
おつかれさま、Pepper！