OmniAICreator/Qiita-1.07M huggingface dataset:
RIZAPトレーニングを通して自社サービスのユーザー体験をしてみた話

この記事は[Classi AdventCalendar 2018](https://qiita.com/advent-calendar/2018/classi)１９日目の記事です。
はじめまして、Classi人事の今村です！
初参加でドキドキしています笑

「RIZAPのトレーニングをして健康になりながらユーザー体験もしてみる！」という取り組みを社内ではじめて、1ヶ月半ほど経ちました。その途中経過について紹介させていただきます。

## 目次

- なぜRIZAPなの？
- 実際どんなことをしているの？
- 取り組みの途中経過
- 最後に・・・

## なぜRIZAPなの？
社内でこんな声がちらほら聞こえてくる中で、何か会社としてできることはないかな？と考えていました。

- 仕事で座ってばっかりで運動不足、不摂生（エンジニアにありがち）
- 会社の規模が少しずつ大きくなってみんなの顔が見えにくくなった（ベンチャーあるある）

そんな時に出逢ったのがRIZAPの法人向けプログラムでした。
これは、「生活習慣改善を行い健康的な生活を習慣化させ、健康経営を促進する」というもの。
上記の課題が解決できて、みんな楽しみながら取り組んでくれるのでは、と感じました。
加えて、「学びの習慣化」を大人になってから体験できる機会は稀で、Classiのサービスと親和性があると考えました。
そこで、気付きや振り返りを記録していく[ポートフォリオ機能](https://classi.jp/portfolio/)が使えるのでは、とRIZAPの通常プログラムではないプラスアルファの取り組みとして進めていくことにしました。

ちなみに、「みんなにムキムキになってほしい！」なんてことは微塵も思っていません（笑）
**「RIZAP」**という響きだけで、説明する前は完全に引いている人もいましたが、みんなが健康でご機嫌にお仕事をしてほしいな、という想いで、トレーニングを通した目指したい姿は、個人それぞれにお任せしています。

## 実際どんなことをしているの？
RIZAPの法人向け出張トレーニングプログラムは、1〜2週間に1回の講義＋トレーニングを合計8回、3ヶ月間で実施するプログラムとなっています。また、RIZAPの食事管理アプリを利用して食事の指導もしていただけます。加えて、Classiアプリの[ポートフォリオ機能](https://classi.jp/portfolio/)を使って、参加者が日々の気付きの共有を行なっています。

まずはご想像通り**トレーニング**の様子です！フォームのチェックはもちろん、人に合わせて負荷を変えられるよう指導してくれます。そしてみんなでやると頑張れます！
![出張トレーニング.png](https://qiita-image-store.s3.amazonaws.com/0/322184/442d2503-0ec4-ad48-0609-7375794d9f3c.png)

トレーニングと合わせて**講義**も受けています。しっかりと目標の設定や振り返りなどもしてくださって「RIZAPの習慣化メソッド」を実感させてくれます。
![講義.png](https://qiita-image-store.s3.amazonaws.com/0/322184/8bad4061-96e6-6962-2251-de1e0deba720.png)

そして大事な**アプリ入力**！こんな感じで入力しています。
（左：Classiポートフォリオ、右：RIZAPアプリ）
![アプリ３.png](https://qiita-image-store.s3.amazonaws.com/0/322184/180cee7f-78fa-adf7-f2d9-ad14b8240ba0.png)
ポートフォリオの入力で自社サービスの**ユーザー体験**をしながら、気付きをチームごとにシェアしています。アプリに日頃触れていても、継続的に入力し続ける体験をすることはなかなか難しいです。なので、この取り組みを通して、本当に入力しやすいのか、入力を習慣化できるのか、など今まで気付きにくかったことから、ボタンの位置なども含め、より良いアプリを目指しながら入力しています。そして、RIZAPアプリの入力も、ポートフォリオと比較してどうか、という観点も持ちながら利用させていただいています。

そして、その他、メンバーによって様々な取り組みをしています。

- 昼ザップ：お昼にみんなでトレーニングをすること
- 階段チャレンジ：オフィス（14階）まで階段を使う取り組み
- アップルウォッチ対決：ヘルスケア機能で消費カロリーや歩数を競い対決すること

などなど。

こちらは昼ザップの様子です。
![昼ザップ.png](https://qiita-image-store.s3.amazonaws.com/0/322184/53c61dd9-7a7c-ec0c-71b6-95997ddff9ef.png)
1人で目標を達成するのはやっぱりなかなか難しいものです。そして、家で１人で黙々とやるのもなんだかシュール。ということで、みんなでわいわいお昼休みを利用してトレーニングをしています。

## 取り組みの途中経過

### 成果として見えてきたこと
- 体重の変化が見えてきている！
まずはとっても大事なことですね。体力が付いてきて仕事もスムーズになったという声も。とはいえまだ残り半分なので気が抜けません！

- 社内で様々なコミュニケーションが生まれている！
RIZAPのSlackチャンネルでの会話や、参加メンバーとランチにいったり、昼ザップをしたりと、オンラインでもオフラインでも今までにないコミュニケーションも生まれはじめています。

- ユーザー体験を通した意見が色々と出てきた！
Slackの一例です。気付いたことをみんなでどんどん記入しています。
![ポートフォリオ.png](https://qiita-image-store.s3.amazonaws.com/0/322184/bbfd77bf-28d9-b07c-8e1d-f3dc0dc1f9ec.png)



### もっと頑張らないといけないこと
- アプリの入力の継続ができていない人もいる
これってClassiを使っている学生も同じことが起こっているんじゃないの？という声があがっています。この経験を逆手にとってより良いサービスに変えていけるようにしていきたいと思っています。

- 結果が見え始めた人ほど気をぬく時期になってきている
ダイエットにおいてありがちなことですね。みんなで励まし合いながら残り半分も頑張ります！

## 最後に・・・
実際に体験してみて学びが多い毎日です。この取り組みは1月までとなるので、それまでに見える成果がユーザー体験においても、トレーニングにおいてもとっても楽しみです！
不摂生になりがちな年末年始。健康な体で仕事始めを迎えられるよう、身体に気を付けながら楽しく過ごしてもらえたらと思います！！


明日は＠seiyakozakaiです。
お楽しみに！！
fluentdでGKEコンテナから送られたログを正規表現で分解する

# はじめに
前回fluentdからelasticsearchにログを格納して、あとはkibanaでレスポンスタイムとかを解析しようとしたらコンテナの標準出力で出されるnginxのアクセスログがlog要素に全部入っていて解析できなくてこまりました。なので正規表現で分解して解析できる形にログを整形します。

# nginxのlogformat

```nginx:default.conf

log_format  main2  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for" $request_time';
...skip

server {

...skip

   access_log /var/log/nginx/access.log main2;

...skip

```

## 吐き出されるログはこんな感じですね。

```
10.**.**.** - - [19/Dec/2018:06:58:09 +0000] \"GET /foo/bar?zoo=1 HTTP/1.1\" 200 433 \"-\" \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36\" \"-\" 0.020\n
```

## これがlog要素の中に全て入ってしまうため、うまくkibanaが解析できない形になってしまう

```json
{
    "log":"10.**.**.** - - [19/Dec/2018:06:58:09 +0000] \"GET /foo/bar?zoo=1 HTTP/1.1\" 200 433 \"-\" \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36\" \"-\" 0.020\n",
    "stream":"stdout",
    "time":"2018-12-19T06:58:09.634970634Z"
}
```

# fuentdからElasticsearchに送る時に整形する

```conf

    # コンテナ名でフィルタリングする
    <filter kubernetes.var.log.containers.my_continer_name**.log>
      @type parser
      @id my_continer_filter
      # GKEの標準出力されたログはlogキーに全部入っている
      key_name log
      reserve_data true
      remove_key_name_field true
      <parse>
        @type multi_format
        #アクセスログを分解
        <pattern>
          format /^(?<remote>[^ ]*) - - \[(?<utc_time>[^\]]*)\] "(?<method>\S+) (?<path>\S+) (?<http>\S+)" (?<code>[^ ]*) (?<size>[^ ]*) "(?<referer>[^\"]*)" "(?<agent>[^\"]*)" "(?<http_x_forwarded_for>[^\"]*)" (?<request_time>\S+)$/
          # request_timeはfloatにする
          types size:integer,request_time:float
          time_format %Y-%m-%dT%H:%M:%S.%N%:z
        </pattern>
        # 他の形式のログが増えた場合は<pattern>を追加していく
        <pattern>
            ...skip
        </pattern>

```

# jsonを確認

```json
{
...skip

    "remote": "10.**.**.**",
    "utc_time": "19/Dec/2018:08:05:00 +0000",
    "method": "GET",
    "path": "/foo/bar?zoo=1",
    "http": "HTTP/1.1",
    "code": "200",
    "size": "433",
    "referer": "-",
    "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36",
    "http_x_forwarded_for": "-",
    "request_time": "0.021",
    "@timestamp": "2018-12-19T08:05:00.763071925+00:00",
  },

...skip
}
```

　これで各APIの平均レスポンスタイムや分布、などを作ることができるようになりました。

正規表現苦手なんで間違ってる可能性がありますw
ご意見、マサカリなどお待ちしておりますm(_ _)m
飲みたみを支える技術🍺🍺🍺

# はじめに

[クソアプリ2 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/kuso-app2) 21日目の記事です。

飲みたい盛りの多感な30歳[@kuronekopunk](https://twitter.com/kuronekopunk)です。
毎日の飲みたみが過ぎるのでTL上で『**飲みたみ**』を可視化し欲望を満たすためのChrome拡張機能を作りました。

# 開発動機

- なんだか飲みたい
- どうしても飲みたい
- 同じ飲みたみを抱えている仲間を見つけたい

そうしたアツい思いがありこのツールは生まれました。

# 作ったもの

Web版Twitterで「飲みたい」「のみたみ」などの言葉を見つけやすくなります。

[**Nomitami for Twitter** - Chrome ウェブストア](https://chrome.google.com/webstore/detail/nomitami-for-twitter/kjehgicdoefnfghjbabnbipdpnggflfb?hl=ja)


[![Image from Gyazo](https://i.gyazo.com/c6294c769ed41cd99bd48bb931f08f79.gif)](https://gyazo.com/c6294c769ed41cd99bd48bb931f08f79)

これだけ！

はい！解散！

# 技術的な話

Chrome拡張のためJSで実装されています。

毎回Chrome拡張を作るときはフロント側のJsをTampermonkeyで軽く実装して動きを確かめてからChrome拡張に移植しています。

## Tampermonkeyとは

[Tampermonkey \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja)

Jsを登録して任意のURLで動かすことが出来るChrome拡張です。
画像だけを開いているときに回転させるJsなどを登録して横向き画像を見やすくしたりなんかもできます。
Gistに上げておけば一発で登録もできるので簡単なツールの共有にも使えます。
https://gist.github.com/akinov/96c1c5c95460412f9eb29d958ac88a49

## DOMの変化を監視する

新しいツイートが増えた際の対応でDOMの変化を監視するために`MutationObserver`を使いました。
監視対象のノードを指定し、コールバックを設定するだけの簡単仕様に感動。
オプションで監視対象の子孫ノードや属性値を指定できるため使いまわしやすそう。

```js
// 対象とするノードを取得
const target = document.getElementById('some-id');
 
// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type);
  });    
});
 
// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };
 
// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);
 
// 後ほど、監視を中止
observer.disconnect();
```

引用元：[MutationObserver \| MDN](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)

# おわりに

そして私は気づいてしまったのです。

TLで「飲みたい」と検索すれば済むことに。

多感な30歳の戦いは続く…！
pythonで使用メモリを確認する方法

メモリの使用量を減らすために，部分部分のメモリの使用量を確認したくなることが多々あります．
pythonではmemory_profilerを使うことで，メモリの使用量を確認できます．
ここでは簡単な使用方法について説明します．
詳しくは参考文献のサイトをご覧ください．

#memory_profiler のインストール

```
pip install memory_profiler
```

[このサイト](http://www.sakito.com/2012/09/python-memoryprofiler.html)によると，psutilもインストールすると速度が速くなるらしいです．

#memory_profiler の使用方法
##各行でのメモリ使用量を確認したい場合
以下のようにして各行でのメモリ使用量が確認できます．

```python:memory1.py
from memory_profiler import profile

@profile
def test1(index):
  a = range(index)

if __name__ == "__main__":
  test1(2**20)
```

このようにすると，test1の各行のメモリ使用量が確認できます．メモリリークの確認がしたい時などに有効でしょう．

```
python memory1.py
Filename: memory1.py

Line #    Mem usage    Increment   Line Contents
================================================
     3     30.5 MiB     30.5 MiB   @profile
     4                             def test1(index):
     5     63.1 MiB     32.6 MiB     a = range(index)
```

##使用メモリ量をプログラム中で使用したい場合
以下のようにして関数実行時のメモリ使用量が確認できます．

```python:memory2.py
from memory_profiler import memory_usage

def test1(index):
  a = range(index)

if __name__ == "__main__":
  memory_out = memory_usage((test1, (2**20,)))
  print(memory_out)
```

```
python memory2.py
[63.0390625, 63.0390625, 63.0390625, 63.0390625, 63.0390625, 63.0390625, 63.0390625, 63.0390625, 63.0390625, 63.0390625]
```

memory_usageの使い方は，
memory_usage(proc=-1, interval=.1, timeout=None)
- proc: メモリを確認する関数等と引数をtupleにしたもの (↑での(test1, (2**20,)))
- interval: メモリを確認する時間幅
- timeout: いつまでメモリを確認するか Noneだと関数等が終わるまで

#その他
mprofを使うと，matplotlibを使用して結果をプロットしてくれたりするらしい．
詳しくは[ここのサイト](https://pypi.org/project/memory-profiler/)を確認してください
#参考文献
http://www.sakito.com/2012/09/python-memoryprofiler.html
https://pypi.org/project/memory-profiler/
https://code.activestate.com/pypm/memory-profiler/
https://githubja.com/pythonprofilers/memory_profiler
Donkey Carを香港から輸入して作ってみる

#Donkey Car kitを香港から輸入した
しかし、ラズパイのセットアップすらままならない。
色々調べながらやって見るので、備忘録として残しておきます。

##Donkey Car Store
https://www.robocarstore.com/products/donkey-car-starter-kit

販売元はここ。
日本円で35000円くらいで購入出来ますが、税関で課税されたりします。
消費税1300円と収入印紙200円がかかりました。

##RaspberryPi3

同梱されていたコントローラはRaspberryPi3。
組立は後回しにするとして、まずはRaspberryPi3を動くようにします。
いつも使っているのはRaspberryPi3B+をVNCで動かしているのですが、どうやら勝手が違うようです。

http://docs.donkeycar.com
のInstall　Softwareのページを参考にします。
![スクリーンショット 2018-12-19 23.05.03.png](https://qiita-image-store.s3.amazonaws.com/0/328520/fe4325e8-abba-e156-cb63-1f7e250d2732.png)

balenaEtcher を使用してディスクをつくります。
ダウンロードしたdonkey_2.5.0のイメージファイルを使います。
恥ずかしながら、balenaEtcherなるツールを知らなかったので、使い方は適当です。
コマンドラインを叩いて動かすよりも、かなり楽ですね。

ルートディレクトリに「ssh」の空ディレクトリを作成し、
無線LANアクセスポイントのSSIDとPSKを記述した「wpa_supplicant.conf」をSDカードのルートディレクトリに作成。
（この辺りはマニュアル通り）

```wpa_supplicant.conf
country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
    ssid="<your network name>"
    psk="<your password>"
}
```
コマンドラインから

```コマンド
ping donkeypi.local
```

ユーザーはpi
パスワードはraspberry
で、SSHで接続する。

```コマンド
$ssh 192.168.1.19 -l pi
$raspberry
```

なぜかうちの環境ではHDMIモニターに映らないので、sshで繋いでモニターの設定が変更出来ないかやってみます。

試行錯誤の結果、ラズパイからのUSB電源で液晶ディスプレイを駆動していると画面が映らなくなるらしい。
USBを外して起動してからUSBを繋いだら問題なく動きました。
３b＋では問題なかったのですが。

##インストール続行
SSHでは繋がるのでディスプレイに頼らずインストール続行。
基本、公式ページのガイドに沿ってインストール

```コマンド
$pip install donkeycar[pi]
$python -c "import donkeycar as dk; print(dk.__version__)"
using donkey version: 2.5.8 ...
2.5.8
```

バージョン2.5.8と返ってきたのでこれでOK。

仮想環境を作ろうとして異常発生。
なにやらエラーが・・・

```
$virtualenv env -p python3
Running virtualenv with interpreter /home/pi/env/bin/python3
Please use the *system* python to run this script
Traceback (most recent call last):
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 2375, in <module>
    main()
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 724, in main
    symlink=options.symlink)
  File "/usr/lib/python3/dist-packages/virtualenv.py", line 946, in create_environment
    site_packages=site_packages, clear=clear, symlink=symlink))
  File "/home/pi/env/lib/python3.5/posixpath.py", line 358, in abspath
    if not isabs(path):
  File "/home/pi/env/lib/python3.5/posixpath.py", line 64, in isabs
    return s.startswith(sep)
AttributeError: 'NoneType' object has no attribute 'startswith'
```
対処法として、こんなのがあった
```
I encountered this issue too, and it worked for me when I changed the command to virtualenv --python /usr/local/bin/python ~/.virtualenvs/chalice-demo.
```
他はpython2.7使えば、など

(描きかけ作業中）
ActiveRecordのSanitization　初心者→中級者へのSTEP19/25

##はじめに
[前回](https://qiita.com/kamohicokamo/items/571c58f2d6738a7dfe6a)、sanitizeについて書きましたね。そしたら、「ActiveRecordのsanitizeも書くのじゃ」という神のお告げがあったので書きます。


##　SQLインジェクションとは
前回はXSSでしたが今回はSQLインジェクションです。こちらも悪意ある攻撃です。パラメータを操作してデータベースクエリに影響を与える攻撃です。
`find`,`find_by`などは自動的に対策がされてますが、`where`やsqlを生で書く場合がある時、パラメータはちゃんとサニタイズする必要があります。

##sanitize_sql_array

```rb
sql = ActiveRecord::Base.send(
  :sanitize_sql_array,
  ['SELECT * from users WHERE name=?', "tarou"]
)
```
Rails5.１系では`sanitize_sql_array`はパブリックではないので、上記のようにsendを使ってサニタイズします。（Rails5.2系ではパブリックになったらしいです。→https://techracho.bpsinc.jp/hachi8833/2018_08_13/60583）
また他にも、where句用の`sanitize_sql_for_conditions`、order句用の`sanitize_sql_for_order`,like用の`sanitize_sql_like`があります。

```console
irb(main):010:0> sql = ActiveRecord::Base.send(
irb(main):011:1*   :sanitize_sql_array,
irb(main):012:1*   ['name=?', 'tarou']
irb(main):013:1> )
=> "name='tarou'"
irb(main):014:0> User.where(sql)
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE (name='tarou') LIMIT ?  [["LIMIT", 11]]
=> #<ActiveRecord::Relation [#<User id: 10, created_at: "2018-12-19 13:42:23", updated_at: "2018-12-19 13:42:23", name: "tarou">]>
```

##まとめ
セキュリティ系調べてるとSQL力の足りなさを痛感....
とりあえずユーザーが入力するパラメータを使ったsql文を使うときはサニタイズを意識しておきましょう。



##参考にしたの

ActiveRecord::Sanitization::ClassMethods
https://api.rubyonrails.org/classes/ActiveRecord/Sanitization/ClassMethods.html

Rails セキュリティガイド
https://railsguides.jp/security.html#sql%E3%82%A4%E3%83%B3%E3%82%B8%E3%82%A7%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3
MacターミナルからGoogle driveにアップロードする

## 背景
Webブラウザ経由で4GB以上のデータをGoogle Driveにアップロードしようとすると、処理が停止してしまったため、ターミナルからアップロードを行ったところうまくいったのでその手順について書きます。

## インストール
```shell
$ brew install gdrive
```

## OAuth キーの取得
```shell
$ drive list
Authentication needed
Go to the following url in your browser:
https://accounts.google.com/o/oauth2/auth?access_type=xxxxxxxxxxxxxxxxxx
```
上記のURLにアクセスしてverification codeをコピーして入力する。

```shell
Enter verification code: xxxxxxxxxxxxxxxxxx
```

## アップロード
```shell
$ gdrive upload test.csv 
```
unityにおけるfutureパターンのススメ

この記事は，Unity Advent Calendar 2018の20日目の記事です．
https://qiita.com/advent-calendar/2018/unity

##はじめに
こんにちは、突然ですが非同期処理、どういう風に実装していますか？

unirx？　coroutine？ delegate？
うーん、確かにどれもこれも実績があって安定してるんですが本当にそれでいいんでしょうか？
皆さんメリットを感じて使ってると思うんですが
僕が開発中にぶち当たった悩みを聞いてください

## unirxやdelegate系
####メモリリークの危険性
http://baba-s.hatenablog.com/entry/2017/06/29/100000

####eventは解除しにくい（unirxならdisposeできるけど
https://ufcpp.net/study/csharp/MiscEventSubscribe.html

####前シーンのコールバックが呼ばれる危険性
globalなassetbundle managerにdelegate渡して、別シーンに遷移したら処理が完了して呼ばれるけど、前シーンのリソースは死んでるのｄnull error
unirxならdisposeで消えてくれるのでちゃんと実装すれば安全

####リアクティブスパゲッティ化
ボタン押されたら通信して～みたいのをイベント駆動で実装しちゃうのを多く見てきました
そしてボタン同時押し問題や通信中にボタン押せちゃう問題をguardパターンや透明な板などで無理くり実装してコードが複雑化して保守困難になったケースを多く見てきました
（運営始まったら既存コードをフリーズしてglobal変数追加しまくって機能実装とか不具合隠蔽とかやっちゃだめですよ、絶対ですよ

##coroutine
####yield return 1フレーム待ちによるパフォーマンス問題
>foreach( )
 yield return op

単体で呼び出したら1msにも満たないのにyield return しばっかりに1フレーム(60fpsなら16.66ms）も時間かかっちゃった
これをforloopで回すととんでもない時間待つことになります
（メインスレッド止めてるわけではないし、負荷を複数フレームにわたって分散したいときは逆に便利

####ゾンビコルーチン問題
global monobehaviourでStartCoroutineして何か分からないけど処理が終わらない場合、そのコルーチン生きてますよ？
ある時突然処理が進みメンバ変数にアクセスして死亡
裏でいくつコルーチンが動いているのか可視化できないため予期せぬ不具合の原因になります

####止めるのが難しい
MonoBehaviourや自前のupdateであれば、enable=Falseや呼ばない事でupdateさせずにすみます
一方コルーチンを止めるにはgameobject.SetActive(false)やStopCoroutineしなくてはいけません、enable=falseでは止まりません
前者はSetActive(true)しても再開しないというややこしい問題があります

####実行するのが難しい
~~そもそもなんでMonoBehaviour.StartCoroutine呼ばなくちゃ~~

####デバッグしにくい
ブレークポイントがはりにくいです、初期化をコルーチンでやるとかアリガチなんですが
なんか分からないけど初期化終わらない時にどうデバッグしますか？
ブレークポイントで止めたらコールスタック呼び出し元がコルーチンだった時は本当につらいです
普通のstatemachineならルートupdateにブレーク貼って問題を切り分けるのが簡単なのですがコルーチンはそうはいきません
他にも引数返せないことによるコードの複雑化がありますね

だんだん怖くなってきましたね…
##そこでfutureパターン
future(promise)パターン使いましょう
https://www.hyuki.com/dp/dpinfo.html#Future

レガシーになっちゃいましたが、unity社のAssetBundleManager参考になります
https://bitbucket.org/Unity-Technologies/assetbundledemo
callbackと違い、globalなAssetBundleManagerは自分が作ったfuture objectしか知りません
そのため余計な参照がなくメモリリークしません、当然前シーンのコールバックが呼ばれるなんてこともありません
coroutineの1フレーム待ちもないのでパフォーマンスは最高です（コールバックが最速はいったん置いといて
pure C#クラスなのでブレークポイントはれば処理を止めることができます、いいことしかありません

そのそもこのパターン、unityのwebrequestやassetbundle.loadAsyncをはじめ、ほとんどの関数で使われてるんですよね（むしろコールバックの方が少ない
unity社の信頼と実績のfutureパターン
ぜひ自分のプロジェクトに導入して堅牢なクラス設計をして、デバッグ期間中であっても心穏やかに過ごしましょう

##明日は
Unity Advent Calendar 2018，明日の記事は @Takaaki_Ichijo  さんの記事です．

##雑談
#####async await
期待してます
運営中プロジェクトなので導入できなくて悲しいです
#####unity2018.3がきたあ
クラス設計しまくって飽きてきたのでECS jobSystem burstとかで高速化とか、compute shader + PositionBasedDynamicsで軟体シミュとか流体シミュとかやる仕事ないですか？
Heroku で動かしてる Twitter bot の環境を buildpack から Docker に移行した

この記事は[Okinawa.rb Advent Calendar 2018](https://qiita.com/advent-calendar/2018/okinawarb)の22日目の記事です。

去年 [Heroku で Twitter bot を運用する](https://qiita.com/yono@github/items/7ce0977fca43dadd5d26) という記事を書いたのですが、今年はその環境を移行したという話です。特にRubyの話は出てきません。

## 背景

* [heroku-buildpack-mecab](https://github.com/diasks2/heroku-buildpack-mecab) を使って Heroku 環境で mecab を使えるようにしていました
* ですが、buildpack は可搬性が低いため、何らかの理由で Heroku が使えなくなった場合に移行に苦労するのが予想されました
* そんなわけで Docker 環境に移行しました

## 詳細

## ローカル環境

```Dockerfile:Dockerfile
FROM ruby:2.5.3
ENV LANG C.UTF-8
RUN apt-get update && apt-get -y install mecab libmecab-dev mecab-ipadic-utf8
RUN gem install bundler
ADD . /yonobot
WORKDIR /yonobot
RUN bundle install
```

HerokuではmLabというアドオンを使っていますが、ローカルでは公式のMongoDBのDockerイメージを使っています。アドオンの環境にあわせてMongoDB3.6を指定しています。

```yaml:docker-compose:yml
version: '3'
services:
  web:
    build: .
    tty: true
    stdin_open: true
    volumes:
      - .:/yonobot
    depends_on:
      - mongo
  mongo:
    image: "mongo:3.6-stretch"
    ports:
      - "27020:27017"
    volumes:
      - mongo:/data/db
volumes:
  mongo:
    driver: local
```

これで`docker-compose up` するだけで開発環境が準備できるようになりました。

### Heroku

Herokuで独自のDockerイメージを使いたい場合、ローカルでbuildしたDockerイメージを[HerokuのDocker Registryにpushする](https://devcenter.heroku.com/articles/container-registry-and-runtime)方法と[heroku.ymlを使う](https://devcenter.heroku.com/articles/build-docker-images-heroku-yml)方法があります。

今回はheroku.ymlを使う方法を選びました。Heroku側で自動的にDockerイメージをbuildしてくれるので、運用を考えるとこちらのほうが手軽そうだと考えてのことです。

```yml:heroku.yml
setup:
  addons:
    - plan: mongolab:sandbox
    - plan: scheduler:standard
build:
  docker:
    web: Dockerfile
run:
  web: bundle exec bin/yonobot
```

最後の `run:` の部分は、何かしら指定しないといけないのでやむなく書いてます。実態は help を表示するだけのコマンドです。

環境変数は従来どおりherokuのWebもしくはCLIから設定します。

## まとめ

- Herokuにてbuildpack環境からDocker環境に移行しました
- ローカルの開発環境もあわせてDockerに移行しました
- RubyのDockerイメージ使ってるということ以外一切Rubyと関係ない話でした:bow:
ルーラーを表示して文字位置を揃える

# はじめに

ルーラー使ってますか?

この記事は、ルーラーのことをもっと多くの人に知って貰いたいという願いを込めて書きました。
WordやPowerPointでスペースをダダダダーッと入力して文字位置を調整している人は、ルーラーを知ると幸せになれるでしょう。

この記事の目的は、ルーラーの存在を知って貰うことです。ですから、ルーラーの使い方の詳細はこの記事では説明しません。
使い方はググればたくさん出てきます。大事なのは、ググるためのキーワード「ルーラー」を知っていることです。

以下の説明ではWordの画面を使用します[^word]がPowerPointでも大体同じです。なお、残念ながらExcelにはルーラーはありません[^excel]。

[^word]: スペースやタブ等の編集記号を表示できるため
[^excel]: ページレイアウトビューに余白調整用のルーラーはありますが、タブ位置の調整等はできません


# ルーラーの表示とタブ位置の設定

まずはルーラーを表示しましょう。
メニューから、[表示]-[表示]-[ルーラー]をOnにすればルーラーが表示されます。
一旦ルーラーを表示したら、もう二度と非表示にする必要はありません。

ルーラーでよく使うのは、「タブ位置の設定」でしょう。
ぱっと見では「インデントの設定」が目立つのでこいつをいじりたくなりますが、今回は無視しましょう。

タブ位置を設定することで、`[Tab]`直後の文字位置を設定できます!

## 左揃えタブ
文字位置を合わせたい段落を選択した状態で、「左揃えタブ」を追加すると…ビシッと揃う!!
![左揃えタブ](https://qiita-image-store.s3.amazonaws.com/0/81235/f9073d80-d6c4-7fb9-cb0e-26d80464a4bd.gif)

## 中央揃えタブと右揃えタブ
中央揃えや右揃えも楽々。
タブ位置の種類を変更するためのタブセレクタは、ルーラーの左にあります。
![中央揃えタブと右揃えタブ](https://qiita-image-store.s3.amazonaws.com/0/81235/a3b42417-ac23-9e69-f798-52d53ce11ef0.gif)

## 小数点揃えタブ
小数点揃えもできますよー。
数値の桁を揃えたければ、これを使いましょう。
![小数点揃えタブ](https://qiita-image-store.s3.amazonaws.com/0/81235/0b1fc0d4-0274-f4ed-d802-a6a4f8c4748c.gif)


# おわりに

スペースがダダダダーッってなってるドキュメントは何かと辛いですね。半角カナや全角英数が混ざったドキュメントぐらいの辛さがあります。
![space.png](https://qiita-image-store.s3.amazonaws.com/0/81235/2c128ee7-3e95-e52f-5a1a-b3b92d319ef3.png)
こういう↑ドキュメントが少しでも減ることを願って。

では、よいクリスマスを。

# 参照
- [タブ位置を設定、クリア、削除する - Office サポート](https://support.office.com/ja-jp/article/タブ位置を設定、クリア、削除する-06969e0f-2c81-4fe0-8df5-88f18087a8e0?ui=ja-JP&rs=ja-JP&ad=JP)
- [タブとインデントの設定を表示する - PowerPoint](https://support.office.com/ja-jp/article/タブとインデントの設定を表示する-3D4B97EE-306F-48D1-88F8-BFB5A2855996)
Oculus Go で開発する初めの一歩 (tip集)

## 概要

Oculus Go Unity 開発にあたり、 tips 的なものを集めるというのが目的です。

これを元に開発スピードの向上に繋がったり、新規 developer の役に立てると幸いです。

どんどん充実させていきたい

## adbコマンドを使って録画

adbが使える状態になっていることが前提です

録画可能 **最大時間３分**
音声は記録されません
(どうしても音声を入れたい場合はこちらを [Oculus Goで録音&録画【Oculus Go】 - (:3[kanのメモ帳]](http://kan-kikuchi.hatenablog.com/entry/OculusGo_Capture))

```shell:デバイスが接続されている事を確認する
$ adb devices

List of devices attached 
0123455789abcde device
```

```shell:おまじない的な
$ adb logcat -s Unity ActivityManager PackageManager dalvikvm DEBUG
```

```shell:録画
$ adb shell screenrecord {oculus上の保存したいパス}
```

| オプション | 説明 | 例 |
|:--|:--|:--|
| --size  | 解像度<br>幅x高さ 指定  | screenrecord --size 1080x1980 |
| --bit-rate | ビットレート<br>4Mbps=4000000bps | screenrecord --bit-rate 4000000 |
| --time-limit | 録画最大時間<br>秒 指定 | screenrecord --time-limit 60 |

中止は `Ctrl+C`

```shell:動画の取り出し
$ adb pull {oculus上の保存したパス} {ローカルパス}
```

## UnityをGitHubで管理する

[GitHub for Unity - Asset Store](https://assetstore.unity.com/packages/tools/version-control/github-for-unity-118069?aid=1101lGoY&utm_source=aff)

### 基本 setup編

Macの方は brew より `git-lfs` をinstall しておきましょう

```shell
$ brew install git-lfs
...
$ git lfs version
git-lfs/2.5.2 (GitHub; darwin amd64; go 1.11)
```

Assets StoreからImport する

1. Importが完了すると `Windowタブ` 配下に `GitHub` というのが表示されるようになるのでクリック。<br><img width="640" alt="スクリーンショット 2018-11-01 19.56.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/4d86569c-c763-996b-b35a-e139fa4a6ce9.png">

2. 右に GitHub のメニューが出るので `initialize a repository for this project` をクリック<br><img width="640" alt="スクリーンショット 2018-11-01 20.07.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/f214686e-6c35-ae62-2797-6e7c56be909d.png">

3. 上の `Sing in` を押すと 下に小さい枠が出てくるので GitHubアカウントを記入して `Sign in` をクリック<br><img width="640" alt="スクリーンショット 2018-11-01 20.11.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/a9399ceb-a420-0057-c043-182357c34926.png">


4. `Publish` を押すとこのprojectを自分の GitHub Repository として登録してくれます <br><img width="640" alt="スクリーンショット 2018-11-01 20.13.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/9bda25e6-f36d-a64e-42b5-8603f740f760.png">

5. あとは commit 詰んで push したりコマンドラインからとか好きにやったらええよ。

### pull して開く場合

```shell:pull
$ git lfs clone {リポジトリ}
```

1. Cloneしたプロジェクトを Unity で開く
2. Build Settingを忘れずに行う
3. Unityのオブジェクトをダブルクリックで展開する<br><img width="640" alt="スクリーンショット 2018-11-01 20.18.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/73d04a38-d587-ef1f-0fd1-e4f9b1243beb.png">
4. 必要であればAssetsなどをImportしたりBuilder使ったりして読み込む
5. 以上

よい開発ライフを〜。
クライアントワークにおけるUXエンジニアの役割

[Goodpatch Advent Calendar 2018](https://qiita.com/advent-calendar/2018/goodpatch)、19日目の記事です！

先日開催された[Cookpad Product Kitchen \#1 with Takram](https://cookpad.connpass.com/event/107374/)の中で、CookpadのUXエンジニアの方が、事業会社におけるUXエンジニアの役割について発表されていました（スライドは[こちら](https://speakerdeck.com/dex1t/the-intersection-of-design-and-engineering)）。

非常におもしろい発表だったのですが、「じゃあクライアントワークの場合はどうなんだ」ということで、実際にGoodpatchでUXエンジニアとして働いていた経験から、僕なりの考えを書いてみます。

## 基本的なスタンスは変わらない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12352/a8eff348-8d37-ac96-78a9-c2e151fc9a49.png)
https://speakerdeck.com/dex1t/the-intersection-of-design-and-engineering?slide=18 より

## 自社サービス開発の場合
解き方が不明で正解がわからない「Wicked Problem」に対して、プロトタイピングを行います。作っては試すのを繰り返すことで、プロダクトの輪郭を描いていきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12352/57e9a544-4286-5842-c601-975d17bcd6ca.png)
https://speakerdeck.com/dex1t/the-intersection-of-design-and-engineering?slide=22 より

その際、仕様はFixしないものと捉えます。後からでも閃きが生まれれば取り入れ、より良いユーザー体験を追求します。その分、期限は絶対のものではなくあくまで目安とします。

実際には、１つのプロダクトの中でも「Wicked Problem」にあたるものと、デザインや実装方針がすぐ決まる機能（例：アプリ内課金機能）があるので、役割分担をします。

## クライアントワークの場合
クライアントワークの場合、POはクライアントの中にいます。自分たちに「何をどういう優先順位で作るか」の決定権があるわけではありません。そのため、Wicked Problemに取り組めるとは限らず、例えばマンガアプリのようにある程度は定番パターンが決まっている案件も多いです。

また、クライアントワークでは自社サービス開発に比べて締切が決まっている場合が多いです。ビジネス的な都合で決まる場合もありますし、アジャイル開発等の文化がなくて締切ベースになる場合もあります。とはいえ、締切が悪ではありません。ビジネスにとって期日やスピードもまた重要だからです。

そのような環境で、UXエンジニアはプロジェクトのスタートから参加し以下のように振る舞います。

### 解き方が不明な課題（Wicked Problem） と 自明な課題 の切り分けを行う
* 解き方が不明な課題があれば、プロトタイピングを繰り返しながら、クォリティをあげていきます
* 解き方が自明な課題に対しては、デザインが固まっていなくても、できるところから早く実装し、あとからブラッシュアップする余裕をつくります

### スケジュールの問題でユーザー体験をないがしろにしない
* 余裕をもった見積もりを行ったり、開発プロセス・スケジュールの認識をあわせることで、より良いユーザー体験を追求できる環境をつくります
    * 炎上してしまうと、いわゆる当たり前品質すら危うくなり魅力品質まで手が回らなくなってしまうので、絶対に防ぎます
    * 余裕を持ちすぎると、スピードが落ちたり必要以上に凝ってしまうため、バランス感は重要です
    * エンジニアリングだけでなく、PM的な目線も重要になってきます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12352/a12dfb3e-8832-df52-f54b-f4cb2d5dfb7a.png)
https://speakerdeck.com/sagaraya/development-process-for-better-ux?slide=20 より


### 細部にこだわる
* ユーザー体験やビジネス価値のコアとなる部分を見極め、アニメーションやマイクロインタラクションの実装、細かいUIや文言の改善、パフォーマンスチューニングなどを実施し、徹底的にクォリティを上げます
    * それによってプロダクトへの愛着を高めたり、KPIの達成につなげます
    * エンジニアリングだけでなく、デザイナー的な目線も重要になってきます


## おわりに
UXエンジニアはそもそも少なく、その中でクライアントワーク経験がある人はもっと少ないです。僕が書いたのはあくまでGoodpatchでの経験を経て考えたことなので、ぜひ他の会社での経験を経て考えたことも知りたいです。そんな方はぜひ [UX Engineer Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ux-engineer) へ！
YuMake気象情報APIのご紹介

### YuMake気象情報APIとは？

気象データを取得することができるAPI「YuMake気象情報API」について、中の人がご紹介します。

YuMake気象情報APIは、YuMake（ユメイク）合同会社が提供するAPIサービスです。天気予報、防災情報、日の出日の入り情報など、気象に関する様々なデータを使いやすい形で取得することができます。データの出処は気象庁。普段気象庁のサイトで見ることができないデータも、APIでは取得することができます。
無料で公開されているAPIは海外で予測されたものであり、日本国内の精度が悪いことがあるため、YuMakeのAPIに移ってくるという方もおられます。

---

###気象データの種類には、どんなものがあるの？
単に「気象データ」といっても、多くの種類があります。目的に応じて、適したデータを選ぶことが必要です。

（天気予報）
・今日明日天気予報：今日明日の天気予報
・時系列天気予報：1時間毎の天気予報
・週間天気予報：7日先までの週間天気予報
・日射量予測：時系列天気予報に日射量が加わったもの

（観測系情報）
・推計気象分布：毎時の天気と気温を、1kmメッシュで推定したデータ
・降水ナウキャスト：1kmメッシュで10分毎、60分先までの降水予測
・雷ナウキャスト：1kmメッシュで10分毎、60分先までの雷の活動度予測
・竜巻ナウキャスト：10kmメッシュで10分毎、60分先までの竜巻の発生確度予測
・日の出日の入り情報：日の出・日の入り時刻を取得
・潮汐情報：港毎に1時間単位で潮汐情報を取得

（防災情報）
・特別警報・警報・注意報：最新の発表状況を取得
・地震情報（震度速報）：震度3以上の地震速報
・土砂災害警戒情報：土砂災害に対する警戒情報
・竜巻注意情報：竜巻注意情報の発表状況と対象エリア
・噴火警報：噴火警報と対象の火山
・指定河川注意情報：発表状況と対象の河川

こちらも参考にしてください。それでも分からなかったら、お気軽にご相談くださいね！
https://www.yumake.jp/api/weather-api

---

### 特徴
・json形式で取得できるため、使いやすい
・お客様のご利用頻度に合わせた、従量制での料金システム
・ご利用目的に合わせた気象データの提案
・気象と他分野の掛け合わせによる企業間コラボレーションの促進

上記以外にも柔軟に対応しているので、まずはご相談を！

---

### 導入事例
・釣果アプリでの利用：釣りの成果とともに、その時の気象状況を記録する「クリンチノット」
　https://play.google.com/store/apps/details?id=com.flatfisher.note&hl=ja
　
・観光系アプリでの利用：オススメの週末お出かけスポットを紹介するコーナーで利用
　https://www.ozmall.co.jp/app/article/3927/

・ホームページでの利用：トップページに現在の天気状況を掲載。毎時更新。
　https://www.ginzasonypark.jp/

・アウトドア観光サイトでの利用：天気予報と現地の気象状況を表示。お客さんが現地に行く前の確認に。
　https://otaru.cc/
　
ほか

---

### YuMakeのAPIをお試ししたい！
2週間のお試しが可能です。ご希望の方は、YuMake合同会社（下記メールアドレス）までお問い合わせください。下記のフォームからお問い合わせください。
https://www.yumake.jp/inquiry

---

### AI・Deeplerningの分野で気象データを活用したい方に

YuMake合同会社は、AI・DeeplearningのプラットフォームであるABEJA Platform（アベジャ・プラットフォーム）のパートナーとなっており、プラットフォーム上に過去の気象データを蓄積していっています。プラットフォームでは手軽に分析できる環境が整っていますが、分析の際に気象データも容易に使えるようになっています。

ABEJA Platformについての詳細はこちら
https://abejainc.com/platform/ja/

---

これ以外についても、お天気に関すること・システム開発に関することなど、お気軽にご相談ください！
YuMake合同会社
https://www.yumake.jp/
【新卒エンジニア向け】便利なgitツールtigの使い方を紹介する


## 導入
どうも、こんにちは。新卒エンジニアのfumiです。
1年弱働いてきて、色んなツールを使ってきました。
その中でも今回は、特に僕が便利だと感じたgitブラウザtigの紹介をしていこうと思います。
tigを使うことでターミナル上でのgit操作がスムーズに行えるようになりますよ。


## 対象とする読者
gitやgithubは使ったことがあるけれど、まだgitの操作が不慣れな若手エンジニア


# tigとは
TigはGitのためのテキストユーザインターフェース。Gitリポジトリの変更内容を、Vimに近い操作で見ることができる。


# tigをおすすめする理由
・gitリポジトリの変更内容を直感的に理解できる
・経験の浅いエンジニアでも容易に導入ができる


## tigのインストール
`brew install tig`


## tigの使い方
`h`を押すとtigの基本コマンドが見れる
hを押したときの画像を載せる


## tigのビュー
main view(デフォルトのビュー)
diff view
log view
refs view


# tigの基本コマンド
 ・q 前に戻る
 ・Enter git diffが見れる
 ・ctrl + u
 ・ctrl + d
 ・S main viewにて使うとgit statusの結果が見れる
 ・Enter git statusの結果が見れる状態でuを押すとそのファイルの差分が見れる
 ・u 好きなファイルを選択した状態でuを押すとaddされる
 ・C status viewの画面でCを押すとコミットされる
 ・tigでpushはできない
 ・H tigでbranch一覧を見る
DevTools tips — day 3: コンソールメソッド

この記事は[Tomek Sułkowski](https://medium.com/@tomsu)さんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事は[こちら](https://medium.com/@tomsu/devtools-tips-day-3-console-methods-783791e91990)。
 
---

*休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。[昨日](https://qiita.com/rena_m/items/b3e13dd4952fe74a06b2)までで計8個なので今日は9番から始めます。*

# 9. console.assert
![9.png](https://qiita-image-store.s3.amazonaws.com/0/318825/4fc7a0ec-6840-67a8-9f03-ca2b07dfc52b.png)from: https://developer.mozilla.org/en-US/docs/Web/API/console/assert
`console.assert`は最初の引数(assertion)がfalseだった場合に以下の値を表示します。特定の条件下でのみメッセージをログに表示したいときに便利です。これで、そのためだけのifを書かずとも目的を達成できるようになったほか、コストをかけることなくスタックトレースも手に入ります(*' ')
ただし、NodeJSのバージョンが≤ 10.0だと、その後のコードの実行を邪魔してしまいます。バージョン10で修正されています。(もちろんブラウザでも安全です。)。
![10.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/418128c6-baf1-c9e0-3d0b-4b2660c9aa8f.gif)

# 10. console.table
この機能はびっくりするほど開発者の間で知られていません。配列(または配列のようなオブジェクトや…普通のオブジェクト)を持っているときに、`console.table`メソッドを使うとコンソールにそのデータを綺麗なテーブルを使って表示することができます。配列の持つオブジェクトにある全てのプロパティに基づいてカラムの名前を埋めてくれるだけでなく、カラム幅が変更できて…なんとソートもできます！:wink:
カラムが多すぎる場合は第二引数を使って表示するカラム名を配列で指定することができます。
![11.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/88b2b107-67cf-9f91-6db7-76b564bd9611.gif)
*時々バックエンドも触るという人には、console.tableはnodeのバージョン10以降も対応しているということもお伝えしておきます！*

# 11. console.dir 
最も有名な`console.log`メソッドはデータをほぼどんな開発でもどんな場合でも意味のわかるように表示してくれます。しかし、時にそれは見たいものではないときがあります。典型的な例をあげるなら、DOM nodeを表示するときです。`console.log`はこのインタラクティブな要素をElementsタブから抜き出してきたかのように表示します。では、その要素が参照している実際のJavaScript *object*を検査したい場合はどうしたら良いでしょうか？プロパティを見てみますか？
そういった忠実なデータの表示が欲しい場合は代わりに`console.dir`を使いましょう。
![12.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/5d772077-1f6f-3948-2263-256e975351e0.gif)


---

今日はここまで！(3つだけ？と思いましたか？今日は月曜日ですから、残りの日にむけてエネルギーをとっておきましょう:smile:)
ここからはいつも通り。**なにか新しいことを学べたらぜひ**
→ もっと多くの人の目に止まるように**拍手👏ボタンをお願いします！**
→ 他の投稿も見逃さないように**[Twitter (@sulco)をフォロー](https://twitter.com/sulco)**してください！
VRでアプリ作成！・VRで動画を見る！！！

#自己紹介
Zerodivの@kyoedaです。宜しくお願い致します。
Zerodivは今年の4月より、オークファングループの一員として一緒に働かせて頂いております。
皆さんにはゲーム会社として認知頂いておりますが、ゲーム以外もVR・ARのアプリの開発や
SESなども行っております。
今回はVRのアプリについて、紹介させて頂きます。

#VR開発のついて

ゲームで培った経験や技術から様々なVRでの開発を行っております。
ゲームに近しいエンターテイメント分野から、某国立大学のARを用いた研究アプリまで、
幅広く開発を行っております。
今回はVRコンテンツを手軽に作成可能な手順をお伝え致します。

__開発環境__
Unity

#VRアプリでお化け屋敷を作ろう
通常のアプリからVRアプリに切り替える方法
![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/44a8a3a5-aab3-c916-aea9-f0dc5f167b2c.jpeg)




####１．カメラ変更
　通常カメラ→VRに変更
Unity上でVirtual Reality SupportedをONにします。
Player Settings...からVirtual Reality Supportedのチェックボックスにチェックを入れます。
![VR設定.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/ace3280e-5ad6-8bc2-b6a5-695d6a4d1812.jpeg)
![VR設定後apuri .jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/15b2027c-b3ae-ebde-6d6f-2fd5bd36953c.jpeg)

####２．移動の変更
　プニコン等→視点
　カメラの変更を行った際に、ジャイロにリンクする様に自動変更されます。
　カメラの傾きで移動可能となります。

####３．３Ｄサウンド
　立体的なサウンドに変更
Spatial Blend を3Dに振ることで3DSoundSettingsが有効になります。
3DSoundSettingsではAudioListenerとの距離と音量の相関や、
ドップラー効果の効き具合が調整出来ます。
![3Dサウンド設定.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/990d58a3-7210-88f2-6e8e-b341fae67456.jpeg)

####４.３Ｄモデル
   （通常モードから使用しています）

　モデルアセットの紹介
　・廃屋の病院
　　なるべく気味の悪そうなものを選択！
![750x750bb.jpeg](https://qiita-image-store.s3.amazonaws.com/0/327772/59ce4948-62ab-7192-8269-7c2bc77cca43.jpeg)
　・クリーチャー
　　出来が良さそうで、手軽な価格ものを選択。
![fe6470a9-7607-4695-a03a-2b85db6b458b_scaled.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/9bc732ff-c25f-a6c1-e407-69740ab02d3c.jpeg)

<b>VRアプリでお化け屋敷完成！</b>
![Screenshot_20181219-214952.png](https://qiita-image-store.s3.amazonaws.com/0/327772/231f9a17-1cc3-89cd-d2e6-e3beda9970b9.png)
![Screenshot_20181219-221524.png](https://qiita-image-store.s3.amazonaws.com/0/327772/5fccd517-95e9-f655-a3d2-714815c38136.png)

#３Ｄ動画をVRで見てみよう
####１．ムービーの撮影
　Ricoh THETA等で３６０度の動画を撮影します。

![photo360_top.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/9ab35f2c-82ce-41d0-722b-381837a2d996.jpeg)

####２．球体に動画を張り付ける
360度動画を再生するには、法線が内側を向いた球体を用意します。
シーンを作成し球体を配置、その中心にカメラをセットします。
![360度Unity画面サンプル.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/1a7e6d9c-c854-b857-6208-aebef60bc2d2.jpeg)

####３．再生を行います
VideoPlayerコンポーネントを設定行います。
Render ModeをRenderTextureにして、
上で作ったVideoTextureをVideoPlayerのTargetTextureにドラッグアンドドロップします。
![動画設定.jpg](https://qiita-image-store.s3.amazonaws.com/0/327772/c166250b-d000-19b9-3718-5d55c5bfcb35.jpeg)
<b>以上で360度の動画が見る事ができます。</b>
ざっくりとではありますが、この様な感じでVRの世界が楽しめます。
宜しかったらお試しください！！！
最近プリンタから変なものが出てくる。

数日前から、研究所のプリンタが変な状態になった。

![20181219_212644.jpg](https://qiita-image-store.s3.amazonaws.com/0/137182/55b0e182-172a-14ba-5050-39d0369880f5.jpeg)

どうした？
PewDiePieさん


## 一応問題を調べてみた。

記事

1. [PewDiePie printer hackers strike again](https://www.bbc.com/news/technology-46552339)
2. [PewDiePie printer hacker strikes again: subscribe and sort out your security](https://www.zdnet.com/article/pewdiepie-printer-hacker-strikes-again-subscribe-and-sort-out-your-security/)
3. [PewDiePie printer hackers launch second attack](https://www.itproportal.com/news/pewdiepie-printer-hackers-strike-again/)
4. [PewDiePie printer hackers launch further attack](https://www.techradar.com/news/pewdiepie-printer-hackers-launch-further-attack)
5. [Someone Hacked 50,000 Printers to Promote PewDiePie YouTube Channel](https://thehackernews.com/2018/11/pewdiepie-printer-hack.html)


Youtube

1. [PewDiePie Printer Spam](https://www.youtube.com/watch?v=sRfCD10fXqU)
2. [TheHackerGiraffe & PewDiePie Printer Predicament Using The Printer Exploitation Toolkit PRET](https://www.youtube.com/watch?v=GMMou8kwEG8)

なるほど
全体最適解と局所最適解

# 全体最適解と局所最適解

* 問題提起
   * 局所最適解と全体最適解について確認する
   * 機械学習などで`最適化`が行われる。この際に局所最適解を求めているのか、全体最適解を求めているのかを把握したほうがよい。

* 全体最適解と局所最適解
   * そもそも最適化とは？
      * 目的関数を設定し、その最小値(あるいは最大値)を求めること。
      * 目的関数の値が下記のようなグラフになる場合、最も値の低い`A地点`の解を求めること。
      * 図1($y = x^2+10$のグラフ)
         * 横軸: $x$ 値(解の範囲)
         * 縦軸: $y$ 値(目的関数の値)
         ![局所最適解と全体最適解_図1.png](https://qiita-image-store.s3.amazonaws.com/0/321994/e5bd70a6-df87-8610-ed22-55846ebe49ff.png)


   * 全体最適解とは？
      * NWなどを含め一般的な最適化問題では、目的関数のグラフは複雑になる。 イメージとしては、下記のようないくつもの谷があるグラフになる。
      * その場合、最も値の低い`赤い矢印で示す地点`の解。(この場所は他の谷より微妙に値が低い)
      * 図2
         * 横軸: 解の範囲
         * 縦軸: 目的関数の値
         ![全体最適解と局所最適解_図2.png](https://qiita-image-store.s3.amazonaws.com/0/321994/6a8beb8e-bae7-e034-b848-569cd73e51c7.png)


   * 局所最適解とは？
      * ある範囲においての最適解。
      * 下記の図では、`ある範囲`が黄色い丸で囲まれた範囲。その範囲での最適解は、`青い矢印で示す地点`。
      * 図3
      ![全体最適解と局所最適解_図3.png](https://qiita-image-store.s3.amazonaws.com/0/321994/3d69b1ba-0f34-23ce-b6ee-0211373291a6.png)


   * 全体最適解と局所最適解
      * 局所最適解は、いくつも存在する。
         * ※目的関数のグラフに谷がいくつもある場合。
      * 局所最適解は、全体最適解とほぼ変わらない値が得られることがあるが、それが可能であるかどうかは問題次第。


* 局所最適解を求めるときと、全体最適解を求めるとき
   * 全体最適解を求めることが可能であれば、そのほうがよい。
   * 局所最適解を求めるケース
      * 全体最適解を求めようとすると、計算時間が長くかかりすぎて不可能な場合。
      * 局所最適解を求めれば、十分な精度が得られる場合。
   * 局所最適解を求めるケース
      * NWにおいて、エッジの重みやノードのバイアスといったパラメータを求めるとき。

* その他
   * 遺伝アルゴリズムについて
      * 全体最適解を求めることが難しい場合に、なるべくよい解を得るために行われる解法の一つ
      * 以下を繰り返す。
         * 近傍における局所最適解を求める。
            * ※ 近傍: 図3の黄色で囲まれた範囲をイメージするとよい。
         * 突然変異を行い、これまで解を探索していたのとは別の場所から解の探索を行う。
【初心者向け】プルリクエストを出すときに意識したほうが良いこと

# はじめに
こんにちは
最近某プログラミングスクールを卒業し、Webエンジニアとして転職活動している。@k4ssyi と申します。
スクール受講中の時は課題を実装したら現役のエンジニアの方にコードレビューを行って頂いてました。

その際、自分なりにちょっとした心がけでレビュアーの方に褒められたことがあったので記事にしてみました。
この記事がキッカケでプルリクエストの質が上がってコードを見る方も見られる方も気持ちよく開発出来れば良いと思います。


### 1. レビュー前にプルリクエストにコメント入れる

コード内に入れる程ではないけど、レビュアーにコードの意図を説明する時に記述
なぜこのような実装にしたのかコメントを入れると、レビュアも理解が早いし、よりより実装のしかたのフィードバックがもらえます。


### 2. 他人のコードからコピペした場合、理由をつける。

プログラミング始めたての頃は、よくわからないけどコレ使えば動くっぽいっていうロジックを書きがちだと思います。
コピーするにしても必要な部分を意味がわかった上で判断して理由を書けばレビュアーも意図がわかりやすいと思います。

### 3. リンターやテストは必ず通過してからレビューしてもらう

当たり前ですが、エラーが出たままこれはご法度。そもそもレビューする前にエラー出てるじゃん！って話。
でも、スクールの時はそれでプルリク出してた人もいて即突き返されたりしていたので時間の損！

### 4. コンフリクトしてる状態でレビュー依頼出さない。

コンフリクト起こしていると、かなり失礼と受け取られちゃいます。

初心者のころは、そもそもGitの使い方が慣れていないってのもありますが
コンフリクトはエラーみたいなもの（厳密には違いますが）なので、絶対直してからプルリク出しましょう。


### 5. レビュアーの時間を奪っているという認識を持つ

当たり前かも知れませんが、業務時間も限られていて
自分より上位のエンジニアに自分のクソコードを見る時間を割いてもらっていると認識することで、
レビュアーに感謝の気持ちが生まれ丁寧なプルリクが生まれると思います。


# 終わりに

開発はチームで行うことがほとんどですし、働き方もリモートワークを導入する企業が多くなってきたりと
何かと文字だけのコミュニケーションになりがちです。
なのでコードや文字だけで意図を明確に伝える能力が大事になりますし、
技術だけでなく、なるべくわかりやすいコミュニケーションが今後重要になってくるのかなと思います。
JavaScriptのプロパティ列挙の3原則

JavaScriptには、いくつもプロパティ列挙の方法があります。ただ、原則と歴史的な経緯を踏まえれば、どれが何を返すかは比較的わかりやすく整理できます。

## TL; DR（今北産業）

* プロトタイプをたどるのは演算子だけ
* `own`の付くメソッドは`enumerable`を見ない
* `enumerable`を見るものは`Symbol`を通さない

ただし、`Reflect`にあるメソッドの中には一部例外も存在します。

## `Symbol`の歴史的経緯

まずはそれぞれの手法が何を返すのかピックアップする前に、`Symbol`について掘り下げておきます。

`Symbol`はES6から導入された、「プロパティのキーとして使える特殊な値」ですが、これは`Symbol.iterator`のような特殊メソッドを、**既存のJavaScriptの動作に影響しないように**導入するために作られました。

そのため、ES5に存在した`for-in`、`Object.keys`などでは`Symbol`は扱わないようになっています（`in`演算子や`hasOwnProperty`にシンボルを与えることはES5では不可能ですので、これらはシンボルで呼んでも正常動作しますが、互換性に影響はありません）。また、`Symbol`をキーにしたプロパティについて、`enumerable`によって動作を変えるものもありません。

## 各手法について

### `for-in`

`for-in`は、**プロトタイプまでさかのぼって**、`enumerable`な文字列キーのプロパティをリストアップしていきます。

### `Object.keys`、`Object.values`、`Object.entries`

`Object.keys`では、自分自身にある`enumerable`な文字列キーのプロパティを詰めた配列を返します。

`Object.values`や`Object.entries`はES6以降で入ったものですが、ピックアップするキーの基準は`Object.keys`と同じです。

### `Object.getOwnPropertyNames`

`Object.getOwnPropertyNames`では、自分自身にある（`enumerable`でないものも含めた）文字列キーのプロパティを詰めた配列を返します。`Symbol`は入りません。

### `Object.getOwnPropertySymbols`

`Object.getOwnPropertySymbols`は名前の通り、自分自身にある`Symbol`のキーの一覧を返します。`enumerable`は影響しません。

### `Reflect.ownKeys`

`Reflect.ownKeys`は`Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target)) `と同じ値、つまり自身にあるプロパティすべて（文字列のあとに`Symbol`）を返します。

## その他

プロパティの順序は、どの手法をとっても表示されるものについては一貫していますが、どのような順序になるかは**規定されていません**。また、プロトタイプが存在するオブジェクトで、プロトタイプと違う`enumerable`を設定すると[わけのわからないことになる](https://qiita.com/cocottejs/items/66eef8fef22c0082a15f)こともありますので、要注意です。

## 外部リンク

* [Enumerability and ownership of properties - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)（日本語版には`Symbol`への言及がありませんでした）
DevTools tips - day2：コピーと保存

この記事は[Tomek Sułkowski](https://medium.com/@tomsu)さんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事は[こちら](https://medium.com/@tomsu/devtools-tips-day-2-copying-saving-6aa9bbdadbe2)。
 
---

*休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。[昨日](https://qiita.com/rena_m/items/2d28f0aedf897d46b43a)は4つのことを学びましたね。今日は5番から始めますよ！*

# 5. Copy(....)
コンソールのグローバルコピー機能を使えば、コンソールで利用できるものであればなんでもOSのクリップボードにコピーすることができます。これまで[話してきた変数](https://qiita.com/rena_m/items/2d28f0aedf897d46b43a)もここに含まれます。例えば、`copy(_$)` or `copy($0)`といった要領です。

![5.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/fcab1d3a-6e30-5e1b-57ac-820fed651aa6.gif)

# 6. globalとしてストアする
データの欠片(例えばアプリケーションで計算した配列など)をもっているとして、コンソールに表示してそこで何かの操作をしたいとします。一つ前に学んだばかりのことを活かして`copy`を使えば簡単にコンソールからデータをグローバル変数化できます。
右クリックして、””を選択するだけです。1回目は`temp1`という変数が生成されます。その次は`temp2`といったように続きます。これで他の変数を上書きする心配なく複数のグローバル変数を利用できるというわけです。
![6.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/2ab8171b-4127-170d-ccb4-9146d0531630.gif)

# 7. スタックトレースを保存する
スタックトレースはあなたにとっても、そして同僚にとっても役に立つものです。(例えば、他のフロントエンド開発者やQAエンジニアと共に働いている場合など)。スクリーンショットをとるかわりに、スタックトレースをファイルに保存しましょう。
![7.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/4255b6e4-d7dc-58dd-7b8e-852849dc119b.gif)


# 8. HTMLをコピーする(より速い方法)
右クリックするか、html要素の傍にある三点リーダーをクリックるすることでOSのクリップボードにその要素をコピーすることができるということはおそらくご存知でしょう。ですが、実は古くからお馴染みの`[ctrl] + [c]` (Macでは`[⌘] + [c]`)ショートカットでも同じことが出来るのです！
![8.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/c570d122-17b7-589a-5ac1-6b67297c6aa2.gif)


---

今日はここまで。短く、楽しくやっていきましょう。
ここからはいつも通り。なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします！
→ 他の投稿も見逃さないように[Twitter (@sulco)をフォロー](https://twitter.com/sulco)してください！
カットシーン実装で知っておくべきTips

この記事は、[KLab Engineer Advent Calendar 2018](https://qiita.com/advent-calendar/2018/klab) 22日目の記事です。

# 概要
昨今におけるスマートフォンのゲームアプリもリッチ化が進んでおり、家庭用ゲーム機同様のフィーチャーが求められるようになりました。
3Dゲームに登場するカットシーン実装ですが、検討を失敗すると大きな調整リスクが発生します。
弊社では各種タイトルにおいてストーリーや必殺技などの各種演出などで多く扱っています。

そこで今回はプログラマーがカットシーン実装で検討するべきTipsを紹介します。

* 基礎知識
* 役者アセットの見積もり
* ワークフロー
* エディットキャラクターの登場
* インゲームとのスムースな連携

<img src="https://qiita-image-store.s3.amazonaws.com/0/100161/a8deaffe-e7ae-4c77-c58b-4c5ec96e4316.png" width=50%>

# 基礎知識
カットシーンを作るにあたって、UnityやUE4などのゲームエンジンでは作成する機能が提供されています。
しかし基礎知識を知っておくとアニメーターとのやり取りをスムーズになりますし、必要なカメラ操作やポストエフェクトのテクニックを理解することができます。

様々な本やサイト記事が多数存在しますが一つ紹介します。
https://www.amazon.co.jp/dp/4768305385/

# 役者アセットの見積もり
ここでいう見積もりは何をどれだけ用いてカットシーンを作れるのかという洗い出しです。
これをデザイナーに打診・相談して決めます。

例えばゲームで使う予定のポリゴンを約15万ポリゴンとした場合、下記な感じで決めていきます。
（単位はポリゴン）
* 背景 40000
* キャラクター 10000 * 10
* モブ、演出素材 10000

シェーダーやポストエフェクトによっては、CPUかGPUの何かで頭打ちになることはあるので
考慮する必要はあります。
また、一部シーンではどうしてもポリゴンを超過したいという要望はよく受けます。
その場合ポリゴンを減らしたアセットを用意するのが理想ですが、困難な場合はFPSを落とすなどで対応することも検討します。

# ワークフロー
カットシーンは、下記の複数のアセットで構成されます。
* 3Dモデル
* アニメーション
* BGM
* SE(SFX)
* 音声
* ポストエフェクト
* 字幕
* etc...

複数の要素はすべて一人の担当者では作るのではなく、複数の担当者が組み込んでいくことになります。
用意するシーン数やアセット数が一定以上ある場合に、どうやってコンポジットを行い、動作確認のイテレーションを高速に行えるかがデザイナーにとって重要になります。

UnityのTimelineでは[こちらで紹介されているように](http://tsubakit1.hateblo.jp/entry/2018/08/29/014007#%E8%A4%87%E6%95%B0%E3%81%AE%E5%AD%90Timeline%E3%82%92%E4%B8%80%E6%B0%97%E3%81%AB%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)
大まかな作業カテゴリごとにサブTimlineとして分けることで、各作業担当者が並行してアセット更新作業できるなどのアイデアが考えられます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/100161/e8c727ec-6e17-ef42-80e3-647bf3d23918.png" width=50%>

# エディットキャラクターの登場
カットシーンにエディットキャラクターを登場させる場合は、エディットの仕様には注意するべきです。
スキンのカラーや、身長や体格のスケールが変更可能である場合、調整における作業コストが一定以上に発生するので計上しておくべき要素になります。

スキンのカラーなどであれば露出補正などポストエフェクトの調整。

身長や体格のスケールであれば複数キャラクターが並ぶようなカメラショットの場合、
被写体がフレームから見切れることがあるので、カメラ位置、視野角などでの調整。

また、地面の接地や、登場するエディットキャラクターと別キャラクターが手など触れ合う箇所などにおいては
スケールによってメッシュ間の貫通が起こり得るので、IKなどで適切に処理する必要が発生します。

# インゲームとのスムースな連携
既存のゲームで良く見かけるのが、カットシーンからインゲームにスムースにつないでそのままプレイするような内容です。
カメラについては[こちらで紹介されている](http://tsubakit1.hateblo.jp/entry/2017/06/15/225504)
UnityのTimelineとCinemachineを用いれば、イース補間でスムースにつなぐことが可能です。

アニメーションについては、アニメーターがMayaなどのDCCツールを使ってアニメーションを作成する際、繋ぐカットシーンとインゲーム両方のアニメーションのルートが合うように考慮、場合にょっては対応する必要があります。

Unityではゲーム内容によってAnimatorコンポーネントのApply Root Motionを有効にするかどうかによって異なると思いますので、それも含めてアニメーターと事前と相談しておきます。

# 最後に
ここに上げた内容は一例だと思いますが、カットシーン実装時にご参考になれば幸いです。

# 参考サイト様
[テラシュールブログ](http://tsubakit1.hateblo.jp/)
Codelabで学ぶFirebaseとその先

## Codelabに触れよう！
Firebaseを学ぶ手段の1つとして[Codelab](https://codelabs.developers.google.com/)がある。実際に手を動かしながら学ぶことができるので、何ができて何ができないのか学ぶことができます。

数多くのCodelabでもオススメのハンズオンが [こちら](https://codelabs.developers.google.com/codelabs/firestore-web/#0)のCloud Firestore Web Codelabです。このハンズオンは少ない時間でFirebaseの基礎となるAuth, Firestore, Rulesを学ぶことができます。Node.jsの環境があればすぐ試せるのも魅力のひとつです。

## Cloud Firestore Web Codelabで学べること
- Firestoreの読み書き
- Firestoreとのリアルタイム通信
- Auth認証
- セキュリティルールの設定
- Firestoreの複雑なクエリ
- Firebase CLIツールの使い方

## できあがるもの
レストランの検索やレーティング、レビュー、フィルタリングをFirebaseを使って簡単に実装できます。こんな豪華な機能が数行のコードで実装できるのもFirebaseの魅力のひとつですね。

<img width="500" alt="Screen Shot 2018-12-19 at 21.41.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/0db409b1-de00-e76b-3fa5-5f4f73fd6353.png">

## このコードラボの可能性
今回はレストラン検索とどこでもありそうなWebアプリですが、このレストランという項目を変えるだけで自分オリジナルのWebアプリを作ることができると思います。たとえば、スポーツ選手図鑑、何かのイベント情報、商品レビューなどなど。

## 完成したら公開したい
完成したら公開したいですよね。Codelabでは公開の方法を解説していませんが、いくつか注意点をおさえれば簡単に公開できます。

### 承認済ドメインの確認
`Authentication > ログイン方法 > 承認済ドメイン`
のlocalhost を削除しましょう。

### Rulesの確認
誰でもデータへフルアクセスできる状態になっていないか今一度確認しましょう。Auth認証を利用し必要な機能にのみ権限を付与しましょう

### Pricingの確認
料金プランが自分の意図しているものか確認しましょう。

### Firebase Hostingで公開
下記のコマンドで簡単にデプロイできます。

```
$ firebase deploy
```

デプロイ後 Hosting URL: の xxxxx.firebaseapp.com にアクセスし localhost と同じ機能ができていれば成功です！

### Firebase Hostingの特徴
Firebase Hosting ではカスタムドメインも簡単にあてることができるほか、強力なCDNによりウェブアプリ、静的コンテンツ、動的コンテンツ向けの高速で安全性の高いホスティングを提供します。

### デプロイしたものを無効にしたい

```
$ firebase hosting:disable
```

## まとめ
- CodelabでFirebaseのプロダクトを体系的に学ぶことができる
- 自分のアイディア次第でオリジナルコンテンツを作成できる可能性を秘めている
- Firebase Hostingを使えばスケールアップ可能な環境にWebアプリをデプロイすることができる
docker-compose の mem_limit オプションが効かない

docker-compose (version:2) の `mem_limit` オプションが効かなかったので
解決策をメモ

# やりたかったこと

Macでdocker-composeのPHPの開発環境を作成していますが
ApacheのDockerコンテナの中で `comopser update` を実行中に `OOM Killer` によってkillされしまう
なのでコンテナのメモリーリミットを増やして回避したかった。


# 試したこと

`docker-compose.yml` で `mem_limit` オプション（version2で使える）があるんですが、そこで指定します、例えばこんな感じで4Gにしたかった。

```
version: '2'
services:
  apache:
    mem_limit: '4096m'
    build: ./apache
    volumes:
      - ./www:/var/www/html
    environment:
        VIRTUAL_HOST: sample.local.host
```

設定後、`docker-compose down && docker-compose up -d` して設定を反映させて、`docker stats {container-name}` を実行して確認すると。

```
$ docker stats {container-name}
CONTAINER ID        NAME                                   CPU %               MEM USAGE / LIMIT     MEM %               NET I/O             BLOCK I/O           PIDS
a6418763c519       {container-name}   0.01%               14.87MiB / 1.952GiB   0.74%               928B / 0B           28MB / 8.19kB       11
```

あれ、設定が反映されてない。。。

# 解決策

MacのDockerの設定で制限してました。。。それだけ。。。気づくまでにめっちゃ時間かかったのでメモしときます。

<img width="500" alt="スクリーンショット 2018-12-19 22.23.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/56193/e556f332-6d64-735b-2986-21883e67ca59.png">
DevTools tips - day1：コンソールの$

この記事は[Tomek Sułkowski](https://medium.com/@tomsu)さんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事は[こちら](https://medium.com/@tomsu/devtools-tips-day-1-the-console-dollars-3aa0d93e923c)。
 
---

*休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。さあ始めましょう！*

# 1. $0
`$0`はElementsページで現在選択されているhtml nodeを参照します。`$1`は一つ前に選択されていたもの、`$2`は更にその1つ前…と続き`$4`まで存在します。

こうした参照を利用して親戚関係を持たせるような操作を行うこともできます。
(例:`$1.appendChild($0)`)

![1_rl9MCcGVeT8meIE3Dcy5Tg.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/528c4a2d-6fd4-587a-9ac8-4f746fb3d91f.gif)


# 2. $と$$

コンソールにおける`$`は`document.querySelector`メソッド(長い！)を示すものです。
アプリケーションの中で`$`を変数として定義(例:jQuery)していなくても使用できます。
`$$`はさらに時間を節約してくれます。これは`document.QuerySelectorAll`を実行するだけでなく、返り値としてNodeListではなくnodeの配列を返すのです。
基本的には`Array.from(document.querySelectorAll('div')) === $$('div')`
ということです。とても短くなりましたね！
![2.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/85c17904-f01d-9964-9b23-f5a0b1725f10.gif)


# 3. $_
`$_`変数は最後に評価された表現の結果を参照します。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/318825/f9485d80-b644-1aed-463a-2119a50961a2.png)


# 4. $i
[Console Importer](https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie)というChrome向けのブラウザ拡張機能を使えば、コンソールで瞬時に**npmライブラリ**をインポートして遊ぶことができます。
例えば`$i('lodash')`や`$i('moment')`を走らせるだけで良いのです。数秒後には*lodash*/*momentjs*が使えるようになります。
![4.gif](https://qiita-image-store.s3.amazonaws.com/0/318825/b39611ae-ab6d-6576-c4ad-e6af81b7c746.gif)

---

今日はここまで。短く、楽しくやっていきましょう。
ここからはいつも通り。なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします！
→ 他の投稿も見逃さないように[Twitter (@sulco)をフォロー](https://twitter.com/sulco)してください！
deep learning で画像解析がしたい　＃1

#はじめに
[ここ](https://github.com/AlexEMG/DeepLabCut)にあるようなことを当研究室でもやれないか？と，言われたので頑張ってみる．
anacondaはインスコしてあるが，機械学習関連で使うのは初めて．

環境：
macOS mojave 10.14.1
homebrewでpyenvを，pyenvでanaconda3-4.0を導入済み

#気合い入れてけー
[ここ](https://github.com/AlexEMG/DeepLabCut/blob/master/docs/installation.md)を見ながらやっていく．
まず，anacondaで仮想環境を作成，立ち上げる．

```terminal
conda create -n <仮想環境の名前> pyton=3.6
conda info -e #作成した環境名があるか確認デフォルトはroot
source activate <仮想環境の名前>
conda info -e #作成した仮想環境が立ち上がっているか確認
```


deeplabcutをpipでインストール

```terminal
pip install deeplabcut
```


TensorFlowをpipでインストール

```terminal
pip install tensorflow==1.10
```

どうやらここまでで，環境構築は終了らしい．

#動けよぉぉぉ！！！
次は[こんな感じ](https://github.com/AlexEMG/DeepLabCut/blob/master/examples/Demo_labeledexample_MouseReaching.ipynb)でやれと書いてあるので，やってみる
ipythonを立ち上げてみて，

```terminal
import deeplabcut
```

としてみると，wxという名前のモジュールが見当たりません！とエラーが出た．
調べてみると，wxというのはwxpythonのことらしい．

なので，もう一度仮想環境上で，

```terminal
pip install wxpython
```

としてから再度ipythonを立ち上げて，import deeplabcutすると，さっきのエラーは出なかった．（うまくいってるのかどうかは不明）

```terminal
import tensorflow as tf
tf.__version__
```

さっきtensorflowをpipでインスコした時には'==1.10'としたのに，なぜか公式の方は「1.8.0と出るはず」と書いてある（どっかで読み間違えてるか？）．まぁ，大丈夫そう．

この次からは明日やってみる．

追記：
Macで環境構築する際の，開発者からのお言葉（https://github.com/AlexEMG/DeepLabCut/issues/101）