OmniAICreator/Qiita-1.07M huggingface dataset:
jestで非同期関数をテストする

[jestで非同期関数をテストする - Qiita](https://qiita.com/sand/items/3394f8a1244bd08fca3f)
[jest で React component をテストする - Qiita](https://qiita.com/sand/items/af2af0766ca00558457d)
[jest で Redux をテストする - Qiita](https://qiita.com/sand/items/72e816ef9deb1b425cae)

---


jestで非同期関数をテストする方法を、以下のドキュメントに沿って、確認します。
[Testing Asynchronous Code](https://jestjs.io/docs/ja/asynchronous)

PromiseとAsync/Awaitを扱います。コールバックはあまり脳内に残したくないので省略します。


#１．テスト環境構築

以下のコマンドでテストディレクトリを作成します。

```
mkdir async_test
cd async_test
yarn init -y
yarn add jest axios
```

package.jsonに"scripts"を追加します。

```json:package.json
{
  "name": "async_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.19.0",
    "jest": "^24.8.0"
  },
  "scripts": {
    "test": "jest"
  }
```


これでテストは以下のコマンドで実行されるようになります。jestは自動的にxxxx.test.jsという名前のファイルを見つけてテストします。

```
yarn test
```


# ２．Promise

promiseを利用するコードでは、非同期処理のテストを簡単に扱える方法があります。 **テストからpromiseを返すとJestはpromiseが解決されるまで待機します。**逆に読めばpromiseをreturnしなければJestはpromiseが解決されるまで待機しないということでしょう。実験します。 

Rest APIのテストには**JSONPlaceholder**を利用します。以下のようなJsonが取得できます。
http://jsonplaceholder.typicode.com/posts


```javascript:fetch.test.js
const axios = require('axios')

function fetchData(n) {
  return axios.get('https://jsonplaceholder.typicode.com/posts/'+n)
}

test('the res.data.id id is 3', () => {
  expect.assertions(1)               // (1)
  return fetchData(3).then(res => {  // (2)
    expect(res.data.id).toBe(3)
  })
})
```


**もしこの(2)の return 文を省略した場合、あなたのテストは、fetchDataがresolveされpromiseが返ってくる前に実行され、then() 内のコールバックが実行される前に完了してしまいます。**

returnを削って実行すると以下のようなエラーを吐きます。(2)のthen内のコールバックが呼ばれなかったので、アサーションテスト回数が0となり、(1)のテストに失敗したからです。(1)のテストはアサーションテスト回数が１であることを要求しています。



```
$ yarn test
yarn run v1.16.0
$ jest
 FAIL  ./fetch.test.js
  ? the res.data.id id is 3 (46ms)

  ● the res.data.id id is 3

    expect.assertions(1)

    Expected one assertion to be called but received zero assertion calls.

       6 |
       7 | test('the res.data.id id is 3', () => {
    >  8 |   expect.assertions(1)
         |          ^
       9 |   // return fetchData(3).then(res => {
      10 |   fetchData(3).then(res => {
      11 |     expect(res.data.id).toBe(3)

      at Object.assertions (fetch.test.js:8:10)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.547s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```


# ３．Async/Await

上のコードをAsync/Awaitで書き直すと以下のようになります。これが一番わかりやすいですね。


```javascript:fetch2.test.js
const axios = require('axios')

function fetchData(n) {
  return axios.get('https://jsonplaceholder.typicode.com/posts/'+n)
}

test('the res.data.id id is 3', async () => {
  expect.assertions(1)
  const res = await fetchData(3)
  expect(res.data.id).toBe(3)
})
```



今回は以上です。




# 参考記事
[Testing in React with Jest and Enzyme: An Introduction](https://medium.com/@rossbulat/testing-in-react-with-jest-and-enzyme-an-introduction-99ce047dfcf8)
CSRFに対するRailsのセキュリティ対策について

Railsには、悪意のある攻撃に対するセキュリティの仕組みが様々用意されている。今回は、

CSRFと呼ばれるサイトの成りすましによるクラッキングに対するセキュリティ対策について、アウトプットしてみます。

※Railsのセキュリティについては、以下の記事を参照。
https://railsguides.jp/security.html#%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%AA-csrf

#1.CSRFとは？
CSRFとは、クロスサイトリクエストフォージェリのことである。
これは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性（ぜいじゃくせい）を利用した攻撃方法のことをいう。脆弱性とは、コンピュータのOSやソフトウェアにおいて、プログラムの不具合等のミスが原因となって、発生した情報セキュリティ上の欠陥のことをいう。これにより、本来拒否すべき他サイトからのリクエストを受信して、処理してしまうという現象が生じる。


#2.クラッキングとは？
クラッキングとは、コンピュータネットワークに繋がれたシステムへ不正に侵入したり、コンピュータシステムを破壊・改竄するなど、コンピュータを不正に利用することをいう。

具体的な手段としては、IDとパスワードを不正に入手してログインするやパスワードを総当たりして特定するなどの手段がある。


#３.Rails側のセキュリティ対策
上記のような攻撃に対して、Rails側では、ApplicationController内にデフォルトで以下のようなセキュリティが組まれている。

```Ruby 
protect_from_forgery with: :exception
```
この記述により、アプリで作られたフォームに対してトークンが発行される。そして、正しいフォームからの通信なのかを判別することができ、クラッキングを防ぐことができるのである。
また、トークンとは、一度だけ使うことを前提とされた「使い捨てのパスワード」のことをいう。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　以上

＜参考記事＞
・https://www.trendmicro.com/ja_jp/security-intelligence/research-reports/threat-solution/csrf.html
・https://cybersecurity-jp.com/cyber-terrorism/24253#i
・https://cybersecurity-jp.com/security-measures/30358#i
CUIで管理！アプリケーション管理ツールのWinMac比較

# 窓もリンゴもチョコレートや自家製でアナコンダを！

はい！無理に日本語化すると意味が分かりませんよね。

アプリケーションソフトウェアをCUIで管理するためのソフトウェアが存在します。
これらを使用すると、１ライナーのコマンド一発でアプリケーションを複数インストールできたりして、
この１ライナーを仕事終わりや休憩前にやると素敵です。

例えば、以下の１ライナーはjs系とPython系の開発環境が同時に構築出来たりします。

```posh
choco install vscode github nodist miniconda nginx filezilla -y
```

ところがチームで開発をしていたりする場合には個人でOSが違うことも。
こうなると管理ツールが同じものを使用できません。
そんなときのために、チーム内での説明用も兼ねて相違点をまとめました。

- [Windows](https://www.microsoft.com/windows/features)用の[<img width="5%" src="https://chocolatey.org/content/packageimages/chocolatey.0.10.13.png" alt="chocolatey icon"/>](https://chocolatey.org/)[Chocolatey](https://chocolatey.org/about)
- [Mac](https://www.apple.com/macos/) or [Linux](https://www.linux.com/what-is-linux)用の[<img width="5%" src="https://brew.sh/assets/img/homebrew-256x256.png" alt="homebrew icon"/>](https://brew.sh)[Homebrew](https://brew.sh)

※[チーム内の個人環境の差異を吸収する方法](dc0c8cacd696154510f1.md)についてはこちらもぜひ


# インストール方法

- WindowsのChocolateyをインストール

```
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```

*  MacでHomebrewをインストール

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

どちらもコマンド１ライナーで完了します。
実行後にCUIアプリケーションの再起動が必要な点も同じです。

# アイコン

「素早く片付けて、おやつでも食べよう。」
「素早く片付けて、ビールを飲もう。」
という思いがどちらからも感じられてステキですよね。
### Chocolatey

Windowアイコンの４つに分かれた窓のマークを板チョコに見立てたもの。
日本語直訳：チョコレートのような
### Homebrew

Macアイコンのリンゴがジョッキに注がれたビールの上に浮かんでいる。
日本語直訳：自家製・家の醸造

# アプリケーションの管理単位

一つのアプリケーションをまとめた単位を`Package`と呼ぶらしいです。

# 開発言語

# 開発言語

C# 開発言語

# 開発言語

Rubyで開発されている→https://github.com/Homebrew/brew


# コマンド

基本的にはどちらも

- Chocolatey→`choco`
- Homebrew→`brew`

どちらもいい感じに略したコマンドですね。

- create
- activate
- install
- upgrade
- uninstall

そして、この５つを覚えれば使用できるようになるはずです。


# Chocolatey特有

# Chocolatey特有

Chocolateyでは、パッケージ名の後ろに`.`を付けてinstallやpotableなどとメソッドチェーンみたいになっている場合があるんです。
https://chocolatey.org/packages で検索すると7-Zipは

```
PS > choco install 7zip
PS > choco install 7zip.commandline
PS > choco install 7zip.portable
PS > choco install 7zip.install
```

と４種あることがわかります。[(参考：installとportableのどちらを選択するか)](https://qiita.com/hyt126/items/7ea279327da05a63ec23#installとportableのどちらを選択するか)

### コマンド　ショートカット

- `choco install` → `cinst`
- `choco upgrade` → `cup`

Note : 便利ではあるけど、Powershellなどでスクリプトを組んでインストールするときは控えましょう。
公式非推奨です。短いと他のコマンドと被る恐れがあるからではないでしょうか。

# Homebrew特有

GUIアプリケーションをインストールするためには`brew cask install`を使います。
CUIなら`brew install`ですね。※caskは日本語直訳でビール樽

# コマンドリファレンス

Chocolatey → https://github.com/chocolatey/choco/wiki/CommandsReference

Homebrrew → https://docs.brew.sh/Formula-Cookbook#homebrew-terminology

# 願い

HomebrewがWindowsで使えるようになるか、ChocolateyがMacで使えるようになるかして欲しいです。
PowerShellがMacで使えるようになったし、WindowsにWSL2が登場したし可能な気がします。
ユーザー目線で見てクロスプラットフォーム最高だと思うのでRubyかC#できる人はお願いします。

**Excelsior!**
rails db:migrateからridgepoleに移行しようとしたらcapistranoでつまづいた

この記事は`Rails`で`migration`を使用せず`ridgepole`でDB構築を行うようにして、`capistrano`でつまづいたのを解決した記事です。`database.yml`では`dotenv`を使用しています。

## 環境
ローカルPC: Mac
リモートサーバー: AWS EC2 amazon_linux2
Ruby 2.6.3
Ruby 5.2.3
capistrano 3.11.0

## 問題
#### cap deploy時に下記エラーで落ちる。

```
$ bundle exec ridgepole -c config/database.yml -E staging Schemafile
[ERROR] Access denied for user ''@'localhost' (using password: NO)
        /home/ec2-user/environment/base2/vendor/bundle/ruby/2.4.0/gems/mysql2-0.5.1/lib/mysql2/client.rb:90:in `connect'
```

gem dotenvを使用して**database.yml**では下記のように記述していた。

```
staging:
  <<: *default
  database: <%= ENV.fetch("DB_NAME") { 'hogehoge_app_staging' } %>
  username: <%= ENV.fetch("DATABSE_USERNAME") %>
  password: <%= ENV.fetch("DATABASE_PASSWORD") %>
```

**deploy.rb**

```
after 'deploy:publishing', 'ridgepole:ridgepole_apply'
namespace :ridgepole do
  desc 'ridgepole apply'
  task :ridgepole_apply do
    invoke 'ridgepole:apply'
  end
end
```

### 原因: デプロイ時にdotenvの環境変数が展開されなかった。

**deploy.rb**を下記のように変更

```
after 'deploy:publishing', 'ridgepole:ridgepole_apply'
namespace :ridgepole do
  desc 'ridgepole apply'
  task :ridgepole_apply do
    on roles(:db) do
      # invoke 'ridgepole:apply'
      within release_path do
        execute :bundle, :exec, :dotenv, "-f '.env'", :ridgepole, "-c config/database.yml -E #{fetch(:rails_env)} --apply -f Schemafile"
      end
    end
  end
end

```

参考にさせていただいた記事
[winebarrel/ridgepole](https://github.com/winebarrel/ridgepole)
[さらば「rails migrate」、よろしく「ridgepole」](https://re-engines.com/2017/05/03/370/)
https://qiita.com/ToqTock/items/c185a38fd4e2011ddd64
https://mozy-ok.hatenablog.com/entry/2018/06/24/004358
初めてのDocker-compose（nginx + mysql + php + vuejs）

## 0からのスタート
de:code2019に参加した際、セッション「がんばらない Vue.js 〜 Visual Studio Code + TypeScript でクールに Vue.js の開発をしよう!」を聞いてwebアプリがこんなにも簡単に作れるのかと思い、javascript完全な初心者がwebアプリを作るまでにやったことを記録した、備忘録的なページです。

今更ながら、Dockerも使ったことがなかったので勉強ついでに開発環境はDockerを使って構築すること。ある程度動かせる状態まで環境が出来上がってきたんだけど、なんせ完全初心者。やり方が正しいかもいまいち怪しいので、Qiitaに投稿して指摘してもらおうと思い書いています！

Qiita投稿も初めてなので完全手探り状態・・・。

## やろうとしていること
よくあるTodo管理のWebアプリ

- Vue.jsつかってフロントエンドを開発
- DBはmysqlを使用（最終的にはFirebase使いたい）
- バックエンドの処理はPHPで行う

上記の開発環境をDocker-compose使って構築してみよう！

## フォルダ構成

```
├── docker-compose.yml
├── dockerfile
├── nginx
│   └── nginx.conf
├── php
│   ├── Dockerfile
│   └── php.ini
├── mysql
│   └── data
└── www
    └── html
        └── index.php

```
 
いろいろなサイトを参考にさせてもらっているので、フォルダ構成は大分乱れていると思います。もう少し理解が深まってきたらすっきりさせたいな・・・。

##各種設定
### ./Dockerfile

```Dockerfile
FROM node:8.15.0-alpine
ENV NODE_ENV=development

WORKDIR /app

RUN apk update && \
    npm install -g npm && \
    npm install -g @vue/cli

CMD ["/bin/sh"]

```

### php/Dockerfile
```
FROM php:7.2-fpm
COPY php.ini /usr/local/etc/php/
```

### ./docker-compose.yml
```docker-compose.yml
version: '3'
services:
  web:
    build: .
    ports:
      - 1234:8080
    volumes:
      - .:/app
    stdin_open: true
    tty: true

  nginx:
    image: nginx:latest
    ports:
      - 8080:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
      - ./www/html:/var/www/html
    depends_on:
      - php

  php:
    build: ./php
    volumes:
      - ./www/html:/var/www/html
    depends_on:
      - db
  
  db:
    image: mysql:5.7
    ports:
      - 13306:3306
    volumes:
      - ./mysql/data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: secret
  
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    ports:
      - 8888:80
    depends_on:
      - db
```

### nginx/nginx.conf
```nginx.conf
server {
    listen 80;
    server_name _;

    root  /var/www/html;
    index index.php;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_pass php:9000;
        fastcgi_index index.php;    
        fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include       fastcgi_params;
    }
}
```

設定はこんな感じ。上記のフォルダ構成でそれぞれの設定ファイルを準備すればどこでも同じ開発環境が作れるのかなーといった認識。上記の準備が整ったら、docker-compose.ymlがある場所で

```
docker-compose build
docker-compose up -d
```

でコンテナが作成され

```
docker exec -it web /bin/sh
# vue create <project-name>
# cd <project-name>
# npm run serve
```

でとりあえずvueの動作確認が可能になる（localhost:1234）

## 不明点
今の設定だとwebコンテナとnginxコンテナの２つウェブサーバ的なコンテナができているけどひとつにコンテナにまとめなくてもいいのかよく分かっていません。コンテナを仮想サーバみたいなものと考えていること自体がそもそも間違ってるんですかね。

もう少しいろんなサイト参考にして理解を深めていきたいと思います。

なかなか本題のVue.js使った開発までたどり着けなくてもどかしい・・・。
ニートの自然言語処理100本ノック:36

おはようございます。今日は寝坊したところでとりあえず100本ノックしていくううううう。

とりあえずcollectionsのCounterメソッドを使って出現頻度を求めた。
なんか同じような関数ばかり作っている自分の頭の悪さに頭がいたい。。。


```python
"""
36. 単語の出現頻度
文章中に出現する単語とその出現頻度を求め，出現頻度の高い順に並べよ．
"""

import MeCab
from pprint import pprint
import collections
from n30_execise import maping_morphology
from n31_execise import load_mecab_file

# TODO:surfaceのリストだけを取り出す→何か関数

def extract_type_all(analyzed_list,type="Surface"):
    '''
    type(表層系、品詞、基本形など選択可能)をすべて抽出する
    default SUrface
    '''
    type_list = []

    for mapped_morphology in analyzed_list:
            type_list.append(mapped_morphology[type])
    
    return type_list

#TODO:Counter.most_common(取り出す要素数(N個):None)[要素番号][Surface] 高い順　低い順

def extract_frequent_words(words_list,reverse=0,N=None):
    '''
    words_lists:単語の群
    reverse：逆順に取り出すか
    N:取り出す個数
    '''
    if reverse == 1:
        freq_counter = collections.Counter(words_list).most_common(N)[::-1]
    else:
        freq_counter = collections.Counter(words_list).most_common(N)

    freq_value,freq_count = zip(*freq_counter)

    return freq_value,freq_count



if __name__ == "__main__":
    
    # ファイルパス
    mecab_file = "neko.txt.mecab"

    # neko.txt.mecabを読み込む
    mecab_text = load_mecab_file(mecab_file)

    # 形態解析後のマッピングリスト
    analyzed_list = maping_morphology(mecab_text)
    surface_list = extract_type_all(analyzed_list)
    freq_value,freq_count = extract_frequent_words(surface_list)

    print(freq_value)
```

```
の', '。', 'て', '、', 'は', 'に', 'を', 'と', 'が', 'た', 'で', '「', '」', 'も', 'ない', 'だ', 'し', 'から', 'ある', 'な', 'ん', 'か', 'いる', '事', 'へ', 'する', 'う', 'もの', '君', 'です', '云う', '主人', 'よう', 'ね', 'この', '御', 'ば', '人', 'その', '一', 'そう', '何', 'なる', 'さ', 'よ', 'なら', '吾輩', 'い', 'ます', 'じゃ', '…', 'これ', '\u3000', 'なっ', 'それ', '来', 'れ', '見', 'でも', '時', '迷亭', 'ませ', 'いい', '——', 'ところ', 'まで', '方', '三', '二', 'ず', '上', 'まし', '寒月', '顔', 'ぬ', '先生', '見る', '人間', 'だろ', 'くらい', '僕', 'たら', 'さん', 'なく', '気', 'あり', '猫', 'だけ', '出', '出来', '云っ', 'また', '中', '思っ', 'ばかり', '十', 'ごとく', 'あっ', 'どう', 'って', '細君', 'など', '今', '鼻', '大', 'や', '者', 'そんな', 'あの', 'しかし', 'てる', 'より', 'ながら', '自分', 'ので', '少し', '頭', 'ちょっと', 'でしょ', '訳', '前', '声', 'かい', '日', 'うち', 'ただ', '知れ', 'ほど', '聞い', 'として', '私', 'だって', '男', '思う', 'たい', '行っ', 'せ', '家', '子', '眼', 'ため', '？', '見え', 'よく', '出し', '彼', '誰', 'たり', 'かも', '間', '所', '知ら', '女', 'もう', 'られ', 'え', 'こんな', '金田', 'どこ', '東風', 'たる', 'という', '今日', 'ねえ', 'まだ', 'いや', '通り', 'なけれ', '苦', 'ざる', '的', 'さえ', 'くる', 'れる', '第', '例', 'こう', '口', 'まあ', '聞く', 'なかっ', 'なり', 'わ', '持っ', '馬鹿', 'あれ', '五', '行く', '本', '心', '年', 'ええ', '沙弥', '四', 'ぜ', 'ここ', 'とか', '手', 'やる', '大きな', '度', '話し', '分ら', 'やっ', '下', '今度', 'ちゃ', '考え', 'しまっ', 'くれ', '少々', '云わ', 'まい', 'ござい', '妙', '大変', '昔', 'る', '面白い', 'いくら', 'あ', '奴', 'あまり', 'あなた', '鈴木', 'っ', 'もっ', '云い', '仙', '出来る', '六', '独', '学校', 'なかなか', '金', 'もっとも', '出す', 'やはり', 'なるほど', 'どうも', '小', 'さあ', '話', '得', '目', 'つけ', 'すれ', 'ましょ', 'まま', '彼等', '運動', '以上
```
DockerでFacebookのリブラ(Libra)のテストネットをとりあえず触る

@hshimo さんの書かれた [Facebookのリブラ(Libra)コインの送金をテストネットを試してみる](https://qiita.com/hshimo/items/57eeac30f19072666569)(迅速!🙏)の環境構築が結構手間だったのでDocker化しました。

# 動かしてみる

- 容量めっちゃでかいのでご注意(10GB超)
- Dockerが使えるメモリを4GBくらい割り当てないと辛いかも(なぜこんなにでかいのか)

```bash
docker run -it sot528/libra-docker
```

# 使い方
- 公式: https://developers.libra.org/docs/welcome-to-libra
- 元記事: [Facebookのリブラ(Libra)コインの送金をテストネットを試してみる](https://qiita.com/hshimo/items/57eeac30f19072666569)

# Docker環境の詳細
- https://github.com/sot528/libra-docker
- https://hub.docker.com/r/sot528/libra-docker

# 環境
- macOS Mojave: 10.14.5（18F132）
- Docker version 18.09.2, build 6247962
OCIでBlock Volumeのコンパートメント間移動が可能になったので試してみた

以下のリリースノートによるとBlock Volumeのコンパートメント間移動が可能になったようなのでドキュメントを確認しながら試してみました。

[Move Block Volume resources between compartments](https://docs.cloud.oracle.com/iaas/releasenotes/changes/7a65b22d-8408-42da-bf01-8b277281a19b/)

# やること

* dev1 コンパートメントでBlock Volumeを作成
* dev2 コンパートメントに作成したBlock Volumeを移動

## コンパートメントの構成

* 今回のコンパートメントは以下のような構成になっています。

```
root
 ∟dev1
 ∟dev2
```

## やってみた

まずは dev1 コンパートメントでBlock Volumeを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62936/e51164f8-9b07-4b5a-4afa-f3be9c7d2ea0.png)

作成したBlock Volumeの画面でリソースの移動を選択します。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62936/73839b16-10b6-f4f6-2e61-bf82b910e401.png)

以下のようなダイアログが表示されるので、対象のコンパートメント(dev2)を選択しリソースの移動を実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62936/1d5ff858-8a0f-d722-e357-814e19f3ef91.png)

コンパートメントがdev2になっているのが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62936/1c1bdc05-6c3a-dcf4-e8ce-2ae4cc7806bf.png)

Block Volume の画面でdev1のコンパートメントを確認してもBlock Volumeがないことが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62936/ba8450c4-2bb4-7598-e9c8-d4e5d7d626da.png)

dev2 のコンパートメントに先ほど作成したBlock Volumeが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62936/11287e3c-aeaf-7d92-621e-bd95ed39e5e7.png)

## 感想

ドキュメントを確認するとバックアップなども移動できるようなのでいろいろ便利に使えそうだと思いました。

# 参考ドキュメント

* [Move Block Volume Resources Between Compartments](https://docs.cloud.oracle.com/iaas/Content/Block/Tasks/moveblockresourcecompartments.htm)
Railsでgem rswag使って起動しようとしたらstaging/productionでエラー

**問題**： Ruby on Railsのgem `rswag` を導入したところ、それまで動いていたstaging環境のサーバー起動(rails s)でエラーが出るようになった

**原因**： Gemfileで指定しているgroupが、そもそもテスト環境までであればいいと思い、下記のようにしていた。

```
group :development, :test do
  gem 'rswag'
end
```

**解決**： テストで使う部分と全体で読み込んでおく必要があるものを分けた。

#### 全体

```
gem 'rswag-api'
gem 'rswag-ui'
```

#### group テスト

```
group :test do
  gem 'rspec-rails'
  gem 'rswag-specs'
end
```

参考にさせていただいた記事
https://github.com/domaindrivendev/rswag/issues/77
React Native Android端末で実機ビルドの方法(Expo使用しない）

## React Native 実機ビルドの方法

Android端末を接続した状態で下記のコマンドを実行する。
※実行するときは、プロジェクト配下で以下のコマンドを実行する。

```console
$mkdir android/app/src/main/assets
$react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
$react-native run-android
```
【Laravel】サクッとRest APIを実装する

即興でLaravelアプリをローカルホストで立ち上げて、
リクエストを受け取ったらDBからデータを取得してjsonを返却する方法

## Laravelのインストール

[composer](https://getcomposer.org/)を使ってインストール

```shell
composer create-project --prefer-dist laravel/laravel api-test
```

## .envの修正

DB接続のために、以下を修正する
※ MySQL等のDBサーバが立ち上がっていることが前提

```diff:.env
DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
+DB_HOST={接続対象ホスト}
DB_PORT=3306
-DB_DATABASE=homestead
+DB_DATABASE={接続対象DBスキーマ名}
-DB_USERNAME=homestead
+DB_USERNAME={接続対象DBユーザ名}
-DB_PASSWORD=secret
+DB_PASSWORD={接続対象DBパスワード}
```

手動で`.env`ファイルを作成しようとしたら、composerを使ってインストールした場合は、いつの間にか自動で作成されるようになったんですね。便利な世の中になりました。

## DB接続用のモデル作成

以下コマンドを実行

```shell
php artisan make:model News
```

必要に応じて、生成された`app/News.php`を修正する
参考：https://readouble.com/laravel/5.8/ja/eloquent.html


## APIコントローラの作成

以下コマンドを実行

```shell
php artisan make:controller NewsController --resource
```

※`--resource`のオプションをつけると、作成されるコントローラに一般的なCRUD用のアクションを自動生成してくれる
参考：https://readouble.com/laravel/5.8/ja/controllers.html#resource-controllers

生成したコントローラを、以下のように編集する

```diff:app/Http/Controllers/NewsController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
+use App\News;

class NewsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
-        //
+        return response(News::all());
    }

// ... 略

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
-        //
+        return response(News::find($id));
    }
```


## ルーティングの設定

```php:routes/api.php
Route::resource('news', 'NewsController');
```

## 動作確認

以下コマンドを実行し、ローカルホストでWebサーバを立ち上げる
（Laravel標準のビルドインサーバ機能を利用）

```shell
$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>
```

表示されたURLに`api/news`をつけてアクセスすると、NewsControllerの`index`アクションが呼び出され、newsテーブルの全件データがjsonで返却される
http://127.0.0.1:8000/api/news

以下のように`api/news/{id}`とアクセスすると、NewsControllerの`show`アクションが呼び出され、任意のidのみ抽出したjsonが返却される
http://127.0.0.1:8000/api/news/10650

---

即興で作ったが、ちゃんとテストコードも書きたい
Terminal上でGo Playgroundの共有リンクをシュット作る

## 初めに
さらっと書いたGoソースを共有するとき、[Go Playground](https://play.golang.org/)のshare機能が便利です。
本稿では、Terminal上のGoソースの共有リンクを簡単に取得する方法を紹介します。
小技程度です。。正直あまり使わない。。
## 共有コマンド
ファイル名のところに共有したいGoソースのパスを指定してください。
### bashの場合
```bash
echo "https://play.golang.org/p/"$(curl -sSX POST -H "Content-Type: application/json" --data-binary @ファイル名 https://play.golang.org/share)
```
### fishの場合
```bash
echo "https://play.golang.org/p/"(curl -sSX POST -H "Content-Type: application/json" --data-binary @ファイル名 https://play.golang.org/share)
```

## よく使うならpetに登録しよう！
コマンドを覚えるのは面倒なので[knqyf263/pet](https://github.com/knqyf263/pet)を使って登録しておきましょう！
最後に私の[snippet.toml](https://github.com/shuntaka9576/dotfiles/blob/master/tools/pet/snippet.toml#L91-#L95)を晒しておきます。


## 参考
* [何度も同じコマンド調べ直すのやめませんか？](https://qiita.com/knqyf263/items/01ff865bbab2f5e48d1e)
* [github.com/golang/playground](https://github.com/golang/playground)  
Go Playgroundのソースは、シンプルなWebアプリの勉強になるので、お勧めです！
偏差値40の未経験プログラミング学習.ver2

〜学んだ内容〜

6月19日

ファイルの中身表示　cat
ディレクトリの作成　mkdir
ディレクトリの移動　cd 〇〇
カレントディレクトリの表示　pwd
ディレクトリの中身を表示する　ls
1つ親のディレクトリに戻るとき　cd ..
ホームディレクトリに戻る方法　cdのみ
ファイルディレクトリの移動や名前変更　mv

※Progate参照※

6月24日

ファイルやディレクトリの操作
・移動　ファイル移動　mv
・名前変更 ファイル名の変更 mv
・コピー ファイルコピー　cp ディレクトリごとのコピー cp -r
・削除 ファイルの削除　ｒｍ　ディレクトリごとの削除　rm -r
Macで消したいアプリにロックがかかっているとき

ほとんどないと思いますがたまにフォルダにロックがかかっていて消せないフォルダがあります。

以下の手順で消せると思います。
`※管理者権限で行ってください。`

---
## ロックのフラグを削除

```bash
chflags noschg [消したいフォルダ]
```

## フォルダの削除を実行

```bash
rm -fr [消したいフォルダ]
```
Firebase In-App MessagingをAndroidで実装してみてちょっとハマったこと

#問題
基本的にはこの公式Documentに従えば問題ないのですが、
一つだけ公式Documentに漏れがありました。
https://firebase.google.com/docs/android/setup?hl=ja
なのではじめてIn-App Messagingをアプリに入れようとすると公式Documentにしたがっても動きません。

この部分の漏れがあります。
https://firebase.google.com/docs/in-app-messaging/get-started?hl=ja&platform=android#add_the_sdk_to_your_project

```gradle
dependencies {
    // ...

    // Add the In-App Messaging dependency:
    implementation 'com.google.firebase:firebase-inappmessaging-display:17.1.0'

    // Check that Firebase core is up-to-date:
    implementation 'com.google.firebase:firebase-core:16.0.8'
}
```
↑ とgradleの設定が書かれているのですが、実際には `com.google.firebase:firebase-inappmessaging` も設定してあげないと動きません。 (公式Documentには `com.google.firebase:firebase-inappmessaging-display` だけ設定すれば行けるように書かれている。)

#結論
```gradle
dependencies {
    // ...

    // Add the In-App Messaging dependency:
    implementation 'com.google.firebase:firebase-inappmessaging:17.1.0'
    implementation 'com.google.firebase:firebase-inappmessaging-display:17.1.0'

    // Check that Firebase core is up-to-date:
    implementation 'com.google.firebase:firebase-core:16.0.8'
}
```
と言うことで ↑ こうすれば動きます。
Android勉強メモ[構成要素とResourceについて]

# はじめに
どうやらAndroidの勉強をする必要が生じてしまったので、今日からAndroidについての勉強メモも残すことにしました。その際に[このサイト](https://www.vogella.com/tutorials/Android/article.html)がとても勉強になったので、それの日本語版サマリ的な感じでまとめます。
今回はAndroidの構成要素とResourceについてです。

# Android applicationの構成要素

| Component | 説明 |
----|----
| Application | Applicationが持つ最終的なcomponent |
| Activity | ヴィジュアルに関係する。`views`・`fragment`を用いてUI画面を作成する |
| Service | UIを提供しない形でタスクを走らせるための要素。他のアプリとのコミュニケーションや、ユーザー通知を送ったりする |
| Broadcast receiver | システムメッセージやインテントをlistenするために登録する要素。あるイベントが発生すると、レシーバーがAndroidシステムからの通知を受け取る |
| Content provider | インターフェースの構成やアプリケーションデータを定義する。SQLiteが頻繁にプロバイダーと連結される |

# Layout filesについて
AndroidのActivityは`View`と`Fragment`を定義する。LayoutにはXMLファイルを用いて記述されており、`res/layout`のディレクトリ下にある。またLayoutは`ViewGroups`->`Views`->`widget`という関係が存在する。  
定義したLayoutは`setContentView()`というメソッドを用いてActivityから呼び出される。Layoutで一番メインとなる子要素として`android:layout_width`と`android:layout_height`が存在する。各要素に割り当てる値には以下の２つが代表される。

- match_parent -> parentの中で割り当てられる最大サイズ
- wrap_content -> widgetが適切にレンダリングされる最小サイズ

また、Layoutには以下のような種類が代表される。

- ConstraintLayout -> フラットなViewの階層になる
- FrameLayout -> 子要素がトップに描画されていく
- LinearLayout -> 子要素が水平or垂直に並んで配置される
- RelativeLayout -> widgetがお互いに相対的な位置関係になる
- GridLayout -> グリッドテーブルを用いたViewの編成をする
- ScrolView -> 子要素が多すぎる場合でもスクロールを用いてスクリーンに表示できる

# Resource filesについて
AndroidにはLayout以外にもリソースに関する設定ファイルが存在する。これらは`resource qualifiers`と呼ばれている。以下に種類を示す。

- drawables -> 画像・ベクター・XMLファイルが存在
- values -> 文字・色・大きさetcをそれぞれ独立したXMLファイルで設定
- layout -> 省略
- animator -> animation APIをXMLで定義する
- raw -> 任意のrawファイル（InputStream objectを介してアクセスできる）
- menu -> ツールバーのアクションを定義

それぞれのリソースファイルにはAndroidのビルドシステムによってIDが割り当てられる。生成されたIDは`R.java`のファイルに含まれている。もし新しいリソースファイルを追加した場合もAndroidのシステムが自動的に新しいR.javaファイルを生成してくれる。IDは`android:id`を用いて一意の値が付与される。Android SDKではIDはキャメルケース（e.g., buttonRefresh）で定義するのがグッドプラクティス。
Cordovaでcustom vision api を呼び出してみた

# 概要
Cordovaでアプリ開発を行なっています。カメラで撮った画像をcustom vision apiで分類しようとした際にajaxで画像の渡し方でハマっていたので、ご参考までに。

# Cordovaでカメラ撮影
```index.js
function takePicture () {
      navigator.camera.getPicture(
                    cameraSuccess, cameraError,
                    {
                      quality: 50,
                      destinationType: Camera.DestinationType.DATA_URL,
                      correctOrientation: true,
                      saveToPhotoAlbum: true
                    });
          }

``` 
destinaitonTypeにはFILE_URIとDATA_URLのどちらかを指定できますが、今回はbase64で返ってくるDATA_URLを指定します。

# Custom Vision Service
Custom Vision ServeiceでURLとPrediction-Keyを取得してください。Performanceの画面からPrediction URLをクリックすることで以下の画面が出てくると思います。その際出来ているモデルをPublishすることを忘れないように。
2種類のPrediction APIがありますが、今回はimage fileの方のURLを用います。
![customvision.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441037/60e75fb6-3700-df3b-a25f-e2f3e4305747.png)


# AjaxでAPI通信

今回ハマったところはAPIにbase64の形式で画像を渡そうとしていたところでした。base64ではなくblobで渡す必要がありました。

```index.js
//base64 to blob
var dataURItoBlob = function(base64_image) {
        var binary = atob(base64_image.split( "," )[1]);
        var array = [];
        for (var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {
        });
     }

function predict(image) {
        var blob = dataURItoBlob(image);
        $.ajax({
            url: "your url",
            beforeSend: function(xhrObj) {
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/octet-stream");
                xhrObj.setRequestHeader("Prediction-key","your key");
            },
            type: "POST",
            data: blob,
            processData: false,
            contentType: false
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    }

```
もっと簡単なやり方があるかもしれませんが、一応通信することが出来ました。他にもあればご教授いただきたいと思います。
C#でレトロゲームエミュレーター

#憧れ
エミュレーターを作りたいと一度はあるのでは。
C++とか難しいから遠い国の話だと思っていたらなんとC#でも進化を続けていた。

## CPS1-MAME-Emulator
<img src="https://www.codeproject.com/KB/cs/998595/cc01.png" />

[CPS1.NET: A C# Based CPS1 (MAME) Emulator](https://www.codeproject.com/Articles/998595/CPS1-NET-A-Csharp-Based-CPS1-MAME-Emulator)

## MAME.NET
<img src="https://www.codeproject.com/KB/cs/1275365/sh01.png" />
[MAME.NET](https://www.codeproject.com/Articles/1275365/MAME-NET)

## PS2-PSP Emulator

<img src="https://www.codeproject.com/KB/Emulation/1251671/5636bcb7-ae78-4f54-9155-565dc125b2d9.Png" />
[Omega Red PS2-PSP Emulator + game play streaming (YouTube, Facebook, Twitch)](https://www.codeproject.com/Articles/1251671/Omega-Red-PS2-PSP-Emulator-plus-game-play-streamin)
Babelの存在意義や比較的楽な環境構築方法について(Sassもあるよ!)

Babelに関して調べていると、いろいろと手順を踏んで環境構築しているのですが、**create-react-app**でいいじゃんと思ったので、自分でも文字に書き記したいと思います。
Babelに関しては本当に初心者なので、内容に誤りがあるかもしれません。
もし、誤りがあれば修正しますのでよろしければ指摘してください。
# Babelとは

そもそもBabelとは、トランスコンパイラの1つ(TypeScriptもそのはず)で、JavaScriptのコードを古い書き方の物に変換するためのものです。

例えば、ES6のものをES5に変換したりできます。
もちろん、Reactとかで使うJSX構文でも変換できます。

## Babelの存在理由

何でわざわざ古いバージョンに戻さないといけないの?と疑問に思いましたが、

-  ブラウザによってES6が実装されていない場合があるから
-  Node.jsの実行が、バージョンによってできない仕様になっていることがあるから

といった理由で使われているのですね。
## 環境構築

最近では、create-react-appだけで面倒な設定をすっとばせるのでこれから挑戦しようとしている方でも安心です。(私がそうだったので)

※version 4以上のNode.jsが入ってない場合は先にインストールします。 

```
sudo npm install -g create-react-app
```

その後、

```
create-react-app ???
```

としたらもろもろの環境ができあがりです。(「???」には好きなディレクトリ名を入力してください)

ちなみに、Sassなど勝手に入ってないものもあるので、それは各自入れておきましょう。(そのうち入るようになるかも)

ちなみに、Sassの場合は、

```
$ cd ??? #先ほどで作ったプロジェクトフォルダを入れる
$ npm i -D node-sass 
```

後はsrc内にある**App.css**を**App.scss**にして、**App.js**の3行目にある**import './App.css'**を**import './App.scss'**にすると使えるようになります。
Git 個人的よく使うもの纏め

## git clone～pushするまでの一覧の流れ
```
# clone
git clone [repo]
# ブランチを切る
git checkout -b [branch_name]
※リモートリポジトリを行う場合下記で実施
git checkout -b [local branch_name] origin/[remote branch_name]
# ローカル変更、テスト実施

# ファイルを追加
git add [filename]

# ファイルをコミット
git commit -m "commit message"

# ファイルをリモートリポジトリにpush
git push --dry-run origin [branch_name]
git push origin [branch_name]
```

## gitのaddを取り消す
```
git reset HEAD (filename)
```

## ローカルで削除したものをgitに反映
```
# 方法1
git add -u #u is Update
# 方法2
git rm filename
```

## 直前のコミットログ修正
```
git commit --amend
```

## push
```
//dry-runは必ず行う
git push --dry-run origin branch:branch
git push -origin branch:branch
```

## log
```
//1行のみ
git log --oneline
//graph表示
git log --graph --oneline 
```



## 参考資料
https://qiita.com/nabezokodaikon/items/7ee4900d28d8d863978e
https://qiita.com/cyokodog@github/items/c66417aacb903afb472a
Amazon ForecastのためにAWS CLIの設定をする

#はじめに
Amazon Forecastでデータをcsvダウンロードしたいけれど、コンソールでできなさそうなので、AWS CLIを使いたい。

#saml2awsでログインする
[[AWS] SAMLで認証しているユーザーの権限でAWS CLIを実行する](http://muramasa64.fprog.org/diary/?date=20180313)

#Amazon Forecast のアクセス許可を設定する
[Amazon Forecast のアクセス許可を設定する](https://docs.aws.amazon.com/ja_jp/forecast/latest/dg/aws-forecast-iam-roles.html#aws-forecast-create-iam-role-with-cli)
作成した ロール > ForecastRole のロール ARNが後で必要になるので、メモ

#確認
既にコンソールで作成済みの予測子のリストを取得して、問題なく設定できているか確認してみる
※ regionとprofileのオプションの指定が必要

```
aws --region us-east-1 --profile saml forecast list-predictors
```
作成したpredictor一覧が返ってくる

```
{
    "PredictorNames": [
        "predictor_name_xxxx",
        "predictor_name_yyyy", 
        "predictor_name_zzzz"
    ]
}
```

# S3にエクスポート

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/forecast/latest/dg/gs-cli.html)より
>a. 予測エクスポートジョブを作成します。

>```
aws forecast create-forecast-export-job \
--forecast-id forecast-id \
--output-path '{"S3Uri":"s3://bucket-name","RoleArn":"roleArn"}'
```

`forecast-id`, `S3のパス`,  `RoleArn` が必要

###forecast-id
使いたいpredictorの名前を指定して、IDを取得する

```
aws --region us-east-1 --profile saml forecast list-forecasts --predictor-name predictor_name_xxxx
```
レスポンス

```
{
    "ForecastInfoList": [
        {
            "PredictorName": "predictor_name_xxxx", 
            "VersionId": "88....b0", 
            "ForecastId": "155.........e6c"
        }
    ]
}
```

###S3のパス

```
s3://bucket-name/
```

###RoleArn

```
arn:aws:iam::9.........4:role/ForecastRole
```
Amazon Forecast のアクセス許可を設定する でメモしたロール ARNを使う

###いざエクスポート
```
aws forecast create-forecast-export-job \
--forecast-id 155.........e6c \
--output-path '{"S3Uri":"s3://bucket-name","RoleArn":"arn:aws:iam::9.........4:role/ForecastRole"}'
```

進捗はいかがか聞いてみて、

```
aws --region us-east-1 --profile saml forecast describe-forecast-export-job --forecast-export-job-id 8......2
```

`"Status": "ACTIVE"`と返ってきたら、S3に結果が出力されている！

#さいごに
saml2のせいで公式ドキュメントから外れてしまったので、初心者のわたしには難しかった
Jetson Nanoに骨格検出を実現するソフト「tf-pose-estimation」をセットアップする方法

![openpose.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/bbda27fd-6f96-6bfb-2c9c-908d41191de0.gif)

# Jetson NanoでPose Estimation
　Jetson Nanoで骨格検出の技術を動かしてみます。「tf-pose-estimation」というソフトを使うと単眼カメラで人間の骨格検出をすることができます。詳しくは以下ブログ記事を参照下さい。

[単眼カメラでKinectのように骨格検出する技術「Realtime Multi-Person Pose Estimation」を試してみた](https://karaage.hatenadiary.jp/entry/2018/02/26/073000)


# Jetson Nanoで「tf-pose-estimation」のセットアップ
　ほとんど以下の記事を参考にさせていただきました。おかげで詰まることなくセットアップできたので、本当に感謝です。

[Jetson Nano に TensorFlow版のOpenpose入れてみる](https://toramamma.blogspot.com/2019/04/jetson-nano-tensorflowopenpose.html)

　そのままだと付加価値がないので、上記のセットアップをコマンド一発で実行できるようにスクリプトにした上で、Raspberry Piカメラに対応するソフトを作成しました。

　JetPackのバージョンによってコマンドが変わりますので注意してください。JetPackのそれぞれのバージョンのダウンロード先は、以下ページ参照下さい。

[Jetson Nanoで使えるSDカードのイメージファイルまとめとイメージ書き込み方法](https://qiita.com/karaage0703/items/0583528f1f9c34911a31)

　JetPack4.5の場合は、以下4行のコマンドを実行するだけで「tf-pose-estimation」のセットアップができます。

```sh
$ git clone https://github.com/karaage0703/jetson-nano-tools
$ cd jetson-nano-tools
$ ./install-tensorflow-v45.sh
$ ./install-pose-estimation-v45.sh
```

　`install-tensorflow_xxx.sh`で「tf-pose-estimation」に必要なTensorFlowをセットアップして、`install-open-pose_xxx.sh`で「tf-pose-estimation」のセットアップ（関連ライブラリのインストール等含む）を行っています。

　JetPack4.4の場合は、以下コマンドを実行することでセットアップできます。

```sh
$ git clone https://github.com/karaage0703/jetson-nano-tools
$ cd jetson-nano-tools
$ ./install-tensorflow-v44.sh
$ ./install-pose-estimation-v44.sh
```

　「jetson-nano-sd-r32.1.1-2019-05-31.zip」の場合は、以下コマンドを実行することでセットアップできます。

```sh
$ git clone https://github.com/karaage0703/jetson-nano-tools
$ cd jetson-nano-tools
$ ./install-tensorflow.sh
$ ./install-pose-estimation.sh
```


# Jetson Nanoでの「tf-pose-estimation」の実行方法
　ラズパイカメラ v2を繋いで以下コマンドを実行します。

```sh
$ cd ~/tf-pose-estimation
$ python3 run_jetson_nano.py --model=mobilenet_v2_small --resize=320x176
```

　私の環境だと7〜8fpsの速度でした。

　ラズパイカメラではなくて、Webカメラで動かす場合は、以下コマンドを実行すればOKです。

```sh
$ python3 run_webcam.py --model=mobilenet_v2_small --resize=320x176
```

　ラズパイカメラが繋がっている場合は、以下コマンドとなります。

```sh
$ python3 run_webcam.py --model=mobilenet_v2_small --resize=320x176 --camera=1
```


# tf-pose-estimationのMacでの動かし方
　補足（個人的メモ）です。基本的にはJetson Nanoと同じです。

　Pythonのセットアップは以下参照下さい。

[Pythonで機械学習をするための環境を雑にセットアップする方法（Jupyter notebook環境、ディープラーニング環境含む）on Mac/Linux](https://karaage.hatenadiary.jp/entry/2017/10/06/073000)

　TensorFlow、OpenCVあたりをインストールしておけば良いと思います。

　swigに関しては、Homebrewで以下コマンドでインストールしました。

```sh
$ brew install swig
```

　テストは以下のコマンドでOKです。

```sh
$ python run_webcam.py --model=mobilenet_v2_small --resize=320x176
```

# まとめ
　Jetson Nano（ついでにMac）で骨格検出をする方法をまとめました。骨格検出を使って、身体を楽器にするアプリを作ったりしています。興味ありましたらこちらもごらんになってみてください。

[Jetson Nanoとディープラーニングを使って身体を楽器にする「Skeleton Sequencer」に関して趣味TECHオンラインに寄稿しました](https://karaage.hatenadiary.jp/entry/2019/07/17/073000)


# 関連ページ
[Jetson Nano関係のTIPSまとめ](https://qiita.com/karaage0703/items/b14c249aa33112669ee4)
Jetson Nano関係の情報は、上記ページにまとめていますのでよければ参照下さい。

# 変更履歴
- 2020/05/31 JetPack4.4に関して追記
【Mac】ターミナルで現在のディレクトリと同じパスをコピーする方法

# やりたいこと
- 現在のディレクトリと同じ階層の新規ターミナルを開きたい時がある
- それをコマンドだけでできるようにする

# 方法
1. ターミナルを開き任意のディレクトリに移動する
2. コマンド `pwd|pbcopy` を入力して実行
3. 新規セッションでターミナルを開く
4. コマンド `cd ` と入力し、`cmd + v` を実行

# なぜできるのか
- `pwd` コマンドは現在のディレクトリパスを出力するコマンド
- `pbcopy` コマンドはターミナルの出力結果をクリップボードにコピーするコマンド
- `cmd1 | cmd2` パイプ `|` は`cmd1`コマンドの出力結果を`cmd2`のコマンドに渡すことができる
- `pwd` で出力した現在のディレクトリパスを `pbcopy` に渡すことで現在のディレクトリパスをクリップボードにコピーできる

# ついでにエイリアスに登録しておく
いちいち `pwd|pbcopy` と入力するのは面倒臭いので、 `pwdcp` とでも登録しておく
1. `~/.bashrc` または `~/.bash_profile` ファイルを開く
2. `alias pwdcp="pwd|pbcopy"` と入力して保存
3. `source .bashrc` または `source .bash_profile` で変更を適用する

これで`pwdcp` コマンドで現在のディレクトリパスをコピーできるようになる

# ちなみに
- `pbpaste` というクリップボードの内容をターミナルにペーストするコマンドもある
【学習メモ】 glue record (ホスト情報)の登録が必要なパターン

# はじめに
ドメインのNSにそのドメインを含むFQDNを指定する場合、
いわゆるglue レコードを指定する必要があります。

例) hoge.comのNSにns1.hoge.comを指定する場合。

[グルーレコード（glue record）(jprs.jp)](https://jprs.jp/glossary/index.php?ID=0185)

レジストラでNSを変更しようとしたとき、それ以外の条件でもglueレコードの指定が必要になったのでまとめました。

以降、上記のようなドメインとNSの関係をここではネストする、と表現します。

参考資料
[RFC1034の日本語訳(www5d.biglobe.ne.jp)](http://www5d.biglobe.ne.jp/stssk/rfc/rfc1034j.html)
[RFC1035の日本語訳(www5d.biglobe.ne.jp)](http://www5d.biglobe.ne.jp/stssk/rfc/rfc1035j.html)


# glueレコードの登録
各レジストラでは様々な呼び方で、FQDNとA(AAAA)レコードの組み合わせを登録させる方法があります。

|レジストリ|glueレコードの登録方法|glueレコードの情報|
|:--:|:--:|:--:|
|お名前.com|[ホスト登録](https://help.onamae.com/app/answers/detail/a_id/14650)|ホスト情報|
|JPDirect|[ホスト情報の登録](https://jpdirect.jp/service/host.html)|ホスト情報|
|fc2|[ネームサーバーの作成](https://help.fc2.com/domain/qa/group119/1264)|?|

以降はレジストラにならい、glueレコードとは呼ばず、NSとA(AAAA)レコードの関係をホスト情報、ホスト情報をレジストラに伝えることをホスト情報の登録と呼ぶことにします。

# ホスト情報の登録が必要なパターン
本題です。
ネスト条件以外でも、TLDによってはホスト情報の登録が必要になる場合があります。
.com/.netでは、NSに設定するTLDが.com/.netの場合、ホスト情報の登録が必要になるようです。
下記の組み合わせに含まれるTLDに対し、組み合わせ内のNSを指定する場合、ホスト情報の登録が必要になります。

|ドメインの組み合わせ|
|:--:|:--:|
|.com/.net|
|.info/.mobi|
|.tokyo/.okinawa/.ryukyu <br>.kyoto/.nagoya/.yokohama|


# まとめ
文章だとわかりづらいので例でまとめます。

ホスト登録の必要な条件
不要なところは[ - ] としています。
-で始まるドメイン名は許容されていませんが、視認性のために利用します。

|↓NS設定例/→ドメイン名|-000-.com|-000-.net|-000-.jp|-000-.tokyo|
|:--:|:--:|:--:|:--:|:--:|
|nsa.-000-.com, nsb.-000-.com|必要|必要|-|-|
|nsa.-888-.com, nsb.-888-.com|必要|必要|-|-|
|nsa.-888-.net, nsb.-888-.net|必要|必要|-|-|
|nsa.-000-.jp, nsb.-000-.jp|-|-|必要|-|
|nsa.-888-.jp, nsb.-888-.jp|-|-|-|-|
|nsa.-000-.jp, nsb.-000-.tokyo|-|-|-|必要 *1|
|nsa.-000-.kyoto, nsb.-000-.okinawa|-|-|-|必要 *2|

*1 nsb.-000-.tokyoのホスト情報の登録が必要です。nsa.-000-.jpは不要です。
*2 nsa.-000-.kyoto/nsb.-000-.okinawa 両方のホスト情報の登録が必要です。

.com/.netのホスト情報の登録が必要になるのは、.com/.netのレジストリであるVeriSign Global Registry Servicesの仕様らしいです(広告の多いレジストラより)。

# おまけ
各レジストラのWebページからNSを変更しようとすると、
A社では変更できてもB社では変更できない(ホスト情報の登録が必要)、というようなことがありました。
背景にはレジストリによる仕様があるようですが、Webでできるインターフェースへの実装が各社違うようです。

上記の組み合わせの条件でホスト情報を登録しておくと、ネストしていない場合でも、TLDの権威サーバーがAdditionalレコードとしてAレコードを返してくれます。
Jest Puppeteerでスマートフォンのスクリーンショットを撮影する

# 結論

`emulate`と`UserAgent`を使う

## 環境

- macOS Mojave
- Node.js 8.15.1

## Jest Puppeteerの環境構築

[公式ドキュメント](https://jestjs.io/docs/ja/puppeteer)参照

```js
// 公式ドキュメントのサンプルコード
describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com');
  });

  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});
```

## サンプルコードに追記

UserAgentは[iOS 12 Webブラウザのユーザーエージェント (Safari, Google Chrome, LINE, Twitter など)](https://qiita.com/niwasawa/items/a2b947b24121b30d5eb6)を参照しました

```js
const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1';
describe('Google', () => {
  beforeAll(async () => {
    await page.emulate({
      viewport: {
        width: 375,
        height: 1000,
        isMobile: true
      },
      userAgent
    });
    await page.goto('https://google.com');
    await page.screenshot({
      path: `${process.cwd()}/screenshots/test.png`,
      fullPage: true
    });
  });

  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});
```
[Android] Realmを使うDAOの単体テストの方法

テストしっかりできるアプリを作ろうと絶賛奮闘しています。
Architecture Componentsで作成しているのですが、Realmをローカルデータストアとして使用しています。
RealmのDAOをどうテストするべきか調査しました。

# TLDR
androidInstrumentTestでデータをメモリに保存する設定で実際にRealmのデータを操作して単体テストを行う。

# 公式ドキュメントの方法

[公式ドキュメント](https://realm.io/docs/java/latest/#testing-and-debugging)では[このサンプルプロジェクト](https://github.com/realm/realm-java/tree/master/examples/unitTestExample)が紹介されていました。
このプロジェクトの例では必要なクラスをPowerMockとMockitoを使ってモック化する方法がとられています。
例にあるような`realm.createObject`を一度だけ実行するような関数のテストならこれでもいいのかもしれません。

しかし`realm.where(Hoge::class.java).limit(100).findAll()`のようなメソッドチェーンを使う場合、単純に`Realm`クラスをモックにするだけではNullPointerExceptionとなってしまいます。
すべてモック化するのはRealmの内部実装も調べたりする必要が出てきそうで、トライしてみましたが途中であまり現実的でないと諦めました。

まぁ完全にモック化できればwhereが意図したように呼ばれて,limitが100を引数にとって、findAllが1回呼ばれるという部分のテストができるので理想的ではあったんですが。。


# 実際にRealmを使う方法
[こちら](https://medium.com/@q2ad/android-testing-realm-2dc1e1c94ee1) の記事で紹介されていた方法。
androidInstrumentTestで実際のRealmを使う方法です。
実際のテスト対象のデータさえ準備すればテストのための準備はほとんどいりません。
メモリに保存する設定の`Realm`インスタンスをデータストアにDIするくらいですかね。

記事にも書いてあるようにモックを使う方法に比べて、デバイスでテストするので少し遅くなります。
しかしそれ以上にメンテナンスが容易で、実際のRealmを使用している分、信頼性も高いと言えます。
php-master-changes 2019-06-18

今日はテストの修正、SQLite3::backup() の追加、ドキュメントの修正、opcache の system_id をグローバル変数へ変更する修正、global register vatriables なしでの ZTS 環境で JIT がこける問題の修正、zpp variation なテストの削除、preloading 利用時に SEGV を起こす問題の修正があった！

# 2019-06-18
## nikic: Fix file clash in fgetcsv test
- https://github.com/php/php-src/commit/d924b426c90a16b954b9f17e239a105e7697a1fc
- [fgetcsv()](https://www.php.net/manual/ja/function.fgetcsv.php) のテストで他とファイル名衝突があった問題の修正

## BohwaZ: Implement SQLite3 backup API
- https://github.com/php/php-src/commit/ce22ccc77b1cfe3d922ebe485069afc61d784916
- [7.4~]
- ext/sqlite3 で、SQLite3::backup() の追加
- [Online Backup API](https://www.sqlite.org/backup.html) というやつ

## remicollet: move NEWS entry
- https://github.com/php/php-src/commit/e59b986fa7cb4da0a59df09aa4179095b9811529
- [7.2~]
- NEWS の opcache のバグ修正の項目を 7.2.21 から 7.2.20 へ移動

## krakjoe: fix flaky socket test
- https://github.com/php/php-src/commit/68785c00ef9ae8d750b1f3ebc5b251335498434f
- [7.4~]
- ext/sockets で、乱数でポート指定したり意味のなさそうな挙動を検証しているテストの修正

## cmb69: Update NEWS
- https://github.com/php/php-src/commit/740d9ecdeee42e65c311baf8beb82199659b8e20
- [7.3~]
- NEWS の opcache のバグ修正の項目を 7.3.8 から 7.3.7 へ移動

## cmb69: Turn system_id into a true global
- https://github.com/php/php-src/commit/04a6aac59beaac2ef2e91b9e3c07299f7321eae7
- [7.4~]
- ext/opcache で、system_id を素のグローバル変数へ変更
- モジュール起動時に値を突っ込んでから不変なので TSRM 経由にする必要がないとのこと

## dstogov: Fixed JIT failure, on ZTS build without global register vatriables
- https://github.com/php/php-src/commit/22b2d9d088e4a125fc4f4fc776c946c3c4a7b5bb
- ext/opcache/jit で、global register vatriables なしでの ZTS 環境で JIT がこける問題の修正

## Côme Chilliet: Remove ZPP tests from ext/ldap
- https://github.com/php/php-src/commit/a88bfff59a5f6bb79c8c1b7bcdffac2dcb6595da
- ext/ldap で、ZPP の挙動をテストしているに過ぎないテストの削除

## dstogov: Fixed bug [#78175](https://bugs.php.net/bug.php?id=78175) (Preloading segfaults at preload time and at runtime)
- https://github.com/php/php-src/commit/148eb202268b0c2786e9f541b46138e5d1271761
- [7.4~]
- ext/opcache で、preloading 利用時に SEGV を起こす問題の修正
range

rangeを使うとfor文を簡単に書ける。
mapでも同じことができるというのを併記します。

```go
func main() {
	l := []string{"python", "go", "javascript"}

	for i := 0; i < len(l); i++ {
		fmt.Println(i, l[i])
	}
	//rangeを使って書き換え
	for i, v := range l { //vは任意
		fmt.Println(i, v)
	}
	//インデックス番号使いたくないときは
	for _, v := range l {
		fmt.Println(v)
	}
	
	//mapでも同じことができます
	m := map[string]int{"apple": 100, "banana": 200}
	for k, v := range m {
		fmt.Println(k, v)
	}
	//keyだけ取り出したいとき
	for k := range m {
		fmt.Println(k)
	}
	//valueだけ取り出したいとき
	for _, v := range m {
		fmt.Println(v)
	}
}
```
>【参考】
現役シリコンバレーエンジニアが教えるGo入門(https://www.udemy.com/share/100BhMB0obeFpbTX4=/)
GPSカー　シュミレータ その11

#概要

GPSで自動走行する、コンテストがある。GPS・QZSSロボットカーコンテスト2019
実機を借りて、アプリから操作する部門が今年は無いらしい。
でも、シュミレータを作ってみた。
wemos + bt04で、作って見た。
操作するandroidアプリを改良してみた。

#写真

![DSCN0359.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/bd61488f-ca7d-a086-f4a7-05ed5b4537f1.jpeg)

以上。
arduino用シリアルXYプロッタ

#概要

arduinoのideに付属のシリアルプロッタは、XYで表示してくれない。
C#で、作って見た。

#写真

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ff76d800-bdb4-3f60-29df-6fd1ffe474c0.png)

以上。
Cognito UserPoolとFederated Identityのいろいろな呼び方のまとめ

CognitoのUserPoolとFederated Identityには、いろいろな呼び方があります。
とっても迷いやすいポイントだと思うので、整理しました。


# まとめ
| 名前が登場する場所       |       UserPool |    Federated Identity    |
|:-----------------|------------------:|:------------------:|
| [製品紹介](https://aws.amazon.com/jp/cognito/dev-resources/)             |              UserPool |        Federated Identity        |
| API Reference           |            [Identity Provider](https://docs.aws.amazon.com/ja_jp/cognito-user-identity-pools/latest/APIReference/Welcome.html) |       [Federated Identities](https://docs.aws.amazon.com/ja_jp/cognitoidentity/latest/APIReference/Welcome.html)       |
| API Reference (URL)             |              cognito-user-identity-pools |        cognitoidentity        |
| cli               |                [cognito-idp](https://docs.aws.amazon.com/ja_jp/cli/latest/reference/cognito-idp/index.html) |         [cognito-identity](https://docs.aws.amazon.com/ja_jp/cli/latest/reference/cognito-identity/index.html)         |
| SDK (JavaScript)             |             [CognitoIdentityServiceProvider](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html) |       [CognitoIdentity](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentity.html)       |
| SDK (Python)             |             [CognitoIdentityProvider](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/cognito-idp.html) |       [CognitoIdentity](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/cognito-identity.html)       |
【初心者向け】form_with, haml, enumを使ってselectによるプルダウンリストを作った話[Rails]

# はじめに

どうもこんにちは。エンジニア目指して修行中のタヌキです。

formって、viewとデータベースとの交差する点なので、色々と記述が難しいですよね。
今回は、selectによるプルダウンリストを実装するにあたり、色々と試行錯誤をしたので、自分自身の備忘のためにも記録を残しておこうと思います。



## データベースとデータ型について

前提として、今、レストラン情報を登録する食べログのようなサイトを作っています。
テーブル名はrestaurantsです。

昼の予算、"budget_d"の項について、selectでオプションを選択できるようにしたいと思います。

まず、restautrantsテーブルにbudget_dカラムを作成し、そこにinteger型でデータを入れるようにします。

```ruby
# migrationファイル

class AddColumnToRestaurant < ActiveRecord::Migration[5.2]
  def change
    add_column :restaurants, :budget_d, :integer, default: 0
  end
end

```

## まずは基本のHTML

formタグの、selectタグを用いた基本のHTMLは、こんな形になります。

```html
# view

<select name="budget_d">
  <option value="0">--</option>
  <option value="1">¥~999</option>
  <option value="2">¥1,000~¥1,999</option>
  <option value="3">¥2,000~¥2,999</option>
  <option value="4">¥3,000~</option>
</select>
```

## それを、hamlで書いてみる

それを、 hamlで書くとこんな感じ。以下、hamlで記載していきます。

```haml
# view

%select{:name => "budget_d"}
            %option{:value => "0"}  --
            %option{:value => "1"}  ¥~999
            %option{:value => "2"} ¥1,000~¥1,999
            %option{:value => "3"} ¥2,000~¥2,999
            %option{:value => "4"} ¥3,000~
```

## そして、form_with で書いてみる

そして、これをform_withを使って書くとこんな感じ。

```haml
# view

= form_with model: @restaurant, local: true do |f|
 = f.select :budget_d, [["--", 0],["¥~999", 1],["¥1,000~¥1,999", 2],["¥2,000~¥2,999",3],["¥3,000~",4]]

```

[["key", "value"], ["key", "value"]... ]
と配列の左側にキー（オプションとして表示する値）が、右側にバリュー（データベースに送る値）表示され、プルダウンリストの選択肢となります。
シンプルな実装でよければ、これで選択した内容をデータベースに登録できます。

#### 余談(1)
 form_withはデフォルトでviewにJavaScriptを呼び出してしまうので、
HTMLを呼び出したい場合にはlocal: trueが必要だそうです。

####余談(2) 
クラス属性は第３引数でないと入れることができないので、もしselect_boxにクラスを指定したい時には、以下のように書きます。

```ruby
= f.select :budget_d, [ ここに配列が入ります ], {}, {class: "クラス名"}
```

## enumを使って、使いやすく
更にこれをenumを使って、使いやすく、メンテナンスしやすく書くとこんな感じになります。
enumを使うことで、if budget_d.default? などのメソッドも使えるようになります。


```haml
# view
= f.select :budget_d, options_for_select(Restaurant.budget_ds.keys)

```

```ruby
#model

enum budget_d: {
    default: 0,
    till_1000: 1,
    till_2000: 2,
    till_3000: 3,
    over_3000: 4,
  },  _prefix: true


```

このとき、hamlの方で「budget_ds」と複数形になっているのがポイントです。
options_for_selectは配列を求めるメソッドなので複数形でないとうまく認識されません。


さて、これで無事プルダウンリストの中身が表示される（はず）...です。。。
ここまでのトライアンドエラー、色々長かったです。。。。。

## enumの日本語化

がしかし、話はここでは終わらず。。。
実は、このままだとリストのオプションおよび諸々のビューでenumに設定した値が英語で表示されます。
（下図参照）

[![Image from Gyazo](https://i.gyazo.com/8d084607bdd164671da5917cfc925c55.png)](https://gyazo.com/8d084607bdd164671da5917cfc925c55)

そこでenumを日本語化する必要があるのですが。。。。ここで書くと非常に長文になってしまうため、それはまた回を改めてご紹介したいと思います。。。

formは何かと大変ですが、試行錯誤したおかげで少し好きになれました♪
最後まで読んでくださり、ありがとうございました＾＾

## 追伸
その後、enumを日本語化した記事は、こちらに投稿しています。

[【初心者向け】i18nを利用して、enumのf.selectオプションを日本語化する[Rails]][1]
[1]:https://qiita.com/tanutanu/items/d44a92425188a4489ec6
「VScode」タグについて (タグシノニム: 「VisualStudioCode」「#vscode」「#visualstudiocode」）

### 対象
(件数は2019-06-19現在)

- https://qiita.com/tags/vscode : 1705件

### 説明

Microsoft社のエディタVisual Studio Codeに関する記事。

### タグシノニム
(件数は2019-06-19現在)

- https://qiita.com/tags/visualstudiocode : 1074件
- [https://qiita.com/tags/#vscode](https://qiita.com/tags/%23vscode) : 5件
- [https://qiita.com/tags/#visualstudiocode](https://qiita.com/tags/%23visualstudiocode) : 2件

### 所感

正式名称としてはVisualStudioCodeタグに一票。
覚えやすさとしてVScodeタグに一票。

記事数が近いため、どちらを使うのが良いか迷うところ。

twitterなどで使われる「#」付きのタグ。ユーザが間違って使う。