OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】カラムの追加

1. カラムの追加
2. カラムの削除

#カラムの追加
テンプレートは下記です。

```
 rails g migration Addカラム名Toテーブル名 カラム名:型名
```

実際にテーブルにカラムを追加する際の一例を記載いたします
ターミナルを開き下記のものを記述いたします。

```
rails g migration AddNameToLists name:string
```
Lists（テーブル）にstring型のNameカラムを追加することになります。
最後は下記で更新。

```
rails db:migrate
```

これで\db\migrateに新しいマグレーションファイルが格納されているはずです。

#カラムの削除
テンプレートは下記です。

```
 rails g migration Removeカラム名Fromテーブル名 カラム名:型名
```

実際にカラムを削除する際の一例を記載いたします
ターミナルを開き下記のものを記述いたします。

```
 rails g migration RemoveNameFromLists name:string
```
Lists（テーブル）からstring型のNameカラムを削除します。
最後は下記で更新。

```
rails db:migrate
```

これで\db\migrateから消えてるはずです。
ラズパイマウスのWi-Fi初期設定で「power managementを切る」方法

ラズパイマウス用の Raspberry pi model 3b にubuntu 18.04 をインストールしました。
初期セットアップの際、無線の設定をしてから、cron では power management を切る設定がうまくいかず、再起動して iwconfig で確認すると設定がオンに戻る現象が発生しました。


##当初試してみた方法
[引用: ryuichiueda/raspimouse_book_info/ubuntu18.md](http://github.com/ryuichiueda/raspimouse_book_info/blob/master/ubuntu18.md)
> 
$ sudo apt install wireless-tools
$ sudo crontab -e 
...（次の1行を追加）...
@reboot /sbin/iwconfig wlan0 power off
$ sudo reboot
$ iwconfig 
....
wlan0     ...
         Power Management:off    <---- 確認

この方法で設定して「確認」すると、リブート後に`Power Management:on`のままでした。

## コマンドラインでは、直接設定変更可能

`iwconfig`では普通に`Power Management:off`が変更できます。

```
$ sudo /sbin/iwconfig wlan0 power off
$ iwconfig 
....
wlan0     ...
         Power Management:off 
```

## reboot 後も Power Management:off にする設定

まず、crontabで再度ファイルを開いて追加した一行を削除して元に戻します。
その後、`default-wifi-powersave-on.conf`を`vi`で修正します。

```
$ sudo vi /etc/NetworkManager/conf.d/default-wifi-powersave-on.conf 
```

開いたファイルは次のようになっていました。

```
[connection]
wifi.powersave = 3
```

上記の数字の「3」を「2」に変更して保存し vi を閉じます。そして、リブート後に`iwconfig`で再度確認し、`wlan0`が`Power Management:off`となっているかを確認してください。

##その他

試しに、手動で`power management`を`on` にしてから、リブートしてみました。

```
$ sudo /sbin/iwconfig wlan0 power on
$ iwconfig 
....
wlan0     ...
         Power Management:on
$ reboot
```
リブート後には、自動的に`power management:off`に戻りました。

```
$ iwconfig 
....
wlan0     ...
         Power Management:off
```


[参考: https://askubuntu.com/questions/85214/how-can-i-prevent-iwconfig-power-management-from-being-turned-on]
Next.jsで環境変数を利用する

# とりあえずやり方教えて！
`.env`を用意します。

```env:.env
TEST='HOGEEEEEE'
```

`next.config.js`を編集します。ない場合はプロジェクトのルートディレクトリで`vim next.config.js`して作ります。

```js:next.config.js
module.exports = {
  env: {
    TEST: process.env.TEST
  }
}
```

indexかなんかで表示してみます。

```jsx:index.tsx
export const Index = () => {
  const fuga = process.env.TEST;

  return (
    <p>{ fuga }</p>
  )
};
```

あとは`yarn dev (OR npm run dev?)`をして...

＿人人人人人人＿
＞　HOGEEEEEE　＜
￣Y^Y^Y^Y^Y^Y^￣

# 概要
## 環境
- Fedora 31 Workstation
- nodejs 13.14.0
- yarn 1.22.4
- next 9.4.4 **※9.4以上じゃないとできません**
- react 16.13.1
- reac-dom 16.13.1

## 解説
参考元は公式ドキュメントです: https://nextjs.org/docs/basic-features/environment-variables

さて、Next.js 9.4から`.env.local`系の環境変数ファイルを読み込む、またブラウザに直接変数を読み込ませる機能を使うことができるようになりました。
後者については本題とずれるので割愛させていただきますので、詳細はドキュメントをお読みください。

これにより、例としてHeadコンポーネントを使用した、サイトタイトルの設定などがよくわからない設定を書かずに行えます。

また公式の文言によると、
> **Note**: `.env`, `.env.development`, and `.env.production` files should be included in your repository as they define defaults. `.env*.local` should be added to `.gitignore`, as those files are intended to be ignored. `.env.local` is where secrets can be stored.

ようは、「`.env`、`.env.development`、`.env.production`はリポジトリに含まれなければならない、そして`.env*.local`(末尾に.localがついているものですね)は`.gitignore`によって除外されなければならない。」となっているので、基本的にはその運用になるかと思います。

また、

> In general only one .env.local file is needed. However, sometimes you might want to add some defaults for the development (next dev) or production (next start) environment.

「next dev(yarn dev)では`.env.development`(.localも)、next startでは`.env.production`、が使われます」とあるので、こちらも有効活用しましょう。

# 参考
https://nextjs.org/docs/basic-features/environment-variables
引用【Google Play Developerに登録する】

#Google Play Developerに登録する方法
（2020年6月28日現在：下の記事通りにやれば３分で登録完了できます。）

下の記事がとてもわかりやすかったのであえて新規に書きません！

https://qiita.com/minuro/items/f1eba5b3a14fd3110085
リロードやキャッシュを消しても更新されない場合は、ローカルオーバーライドを疑う

この投稿は**Safariで開発中にファイルの更新が上手くいかない**時に試す方法を紹介します。
多くの記事で紹介している**スーパーリロード**や**キャッシュを消しても**解決しない場合に見てください。

私の場合、新しくURLを踏んだときは更新されていましたが、リロードすると古い更新履歴に戻っていました。
原因が分からず困った..

##解決策
InspectElement（検証ツール）でSourcesの欄を見てみます。
Local Overrides（ローカルオーバーライド）にチェックが付いてます。

<img width="463" alt="Screen Shot 2020-06-28 at 12.05.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569715/05cf4bce-c0ac-883a-51ab-e327486e5928.png">

これが**更新しても反映されない理由**です。
**このチェックを外したらいつも通りに更新されるようになります。**
UE4 ミニマップ上の座標とワールド座標を変換する


※表現上適切で無い点や質問などいただけましたら記事を修正します。

PlayerController を引数に取るノードを使用せずに
Widgetをクリックした点をワールド座標に変換する方法について書きます。



UE4にはじめからある、サードパーソンのプリセットを使用しています。
UE4.24 を使用しています。
厳しいご意見を頂けたら幸いです。
BPやリファレンスの名前がひどすぎるのは許してください。

![6b488ffe0361d18fecaef4703db468be (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/afb5cd6e-46e8-b660-21be-e0315afe120b.gif)

#動機

- MOBAのミニマップみたいなものを作りたい 
- FigureHeadsのようなミニマップを作りたい [公式動画（マップ説明部分)](https://youtu.be/n0PQeUO7ZFg?t=330 "「フィギュアヘッズ」チュートリアルムービー vol.2「自機操作と僚機指示」編")

#動作概要

Widgetの画像サイズでクリック座標を正規化する
正規化したクリック座標をマップ床面(Grandfloor)サイズをかける
マップ床面のローカル座標に変換 (Z座標は適当に持ってくる)
ワールド座標から見たローカル座標の原点位置を足しておわり

# レベル
![HighresScreenshot00000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/fd2ae861-fbf7-afcf-4f30-dac6fc8a5d3c.png)

# レベルブループリント 
![BP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/b779df85-21b5-d6d2-aa3e-b6a868cd2eff.png)

やってること

- 0～1で正規化されたクリック座標を -1～1に変換
-  -1～1の座標にマップサイズをかけることで、スケール変換
-  画面では左上が原点である座標をワールド空間上の方向に変換
-  画面座標(x,y)とワールド座標(x,y,z)で足りないz座標の値をプレイヤー位置から拝借
- Grandfloorのスケールを無視する。Grandfloorのローカル座標に変換するため前段の(x,y,z)を逆行列に掛ける
- Grandfloorの原点位置（オフセット）を足す
- 結果の確認のために適当なActorを変換後の位置にスポーンさせる

## NewBlueprint1 (固定カメラ)
### Construction Script
![BP_CAM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/362ca90e-d4d8-db23-4c70-754e9690e2bc.png)

やっていること

- GetActorBoundsにより、マップの床面(Tag: grandfloor)の大きさを取得
- Map Size Halfにマップ床面の大きさを格納


## TP_UI (ウィジェットBP)
ここの画面中央のミニマップ部分は[[UE4] SceneCapture2Dの平行投影でミニマップを作る](https://historia.co.jp/archives/5567/)を参考にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/a480f86d-01a0-6aad-1253-a5c66983b0af.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/7006777a-bcb0-ccba-c618-6bcc48e15fda.png)
Image_129に下図に示す Get Mouse Pos 関数をバインドしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153064/3e480d27-c43c-e39e-0226-f14d39b9a009.png)

やっていること

- Imageのサイズでクリックされた箇所の座標(x,y)を0～1で正規化している
- 正規化座標を Normalized Position on Map に格納

#　座標変換ついて
同次変換行列や逆行列を掛けるとなぜローカル座標になるかという点につきましては
[ロボティクス 日本機械学会](http://shop.jsme.or.jp/shopdetail/000000000063/)が豊富な図付きで説明されているので分かりやすいと思います。

YTTM WORKさんもわかりやすく説明されています。
https://yttm-work.jp/gmpg/gmpg_index.html

## アクタのワールド座標からミニマップ座標への変換

- Actorのワールド座標をカメラのTransformの逆行列につっこむ(上空のNewBlueprint1がカメラ)
- カメラ座標の任意の軸を画面座標のx,y軸と置く
- 座標をGrandfloorのサイズで正規化(0～1)する
- Widgetのミニマップサイズを掛ける(ミニマップの原点は左上に置く0～1の正規化で原点位置を考えなくて良い)
PowerCMSX稼働サーバをUbuntu18.04→20.04へ更新する際の注意とPHP7.4インストール手順

# はじめに
## 対象読者
* [PowerCMS X](https://powercmsx.jp/) ユーザー
* Ubuntu 18.04 → 20.04 へ更新しようとしている人
    * かつ、更新の過程で古いパッケージ削除をおこないたい人

## 環境
* PHP 7.3 以前
    * おそらく PHP 7.4 環境の場合は古いパッケージ削除に該当しないので問題が起きないものと思います
* nginx で PHP-FPM
    * apache 環境の人は完全にはあてはまらないかもしれません


# 注意
## PHP が消されるので入れ直す
### 前提
* 更新時に古いパッケージを削除しますか？　と訊かれるが、その際に yes として進めると、 PHP7.3 以前のものとそれに関連する PHP-FPM を削除されてしまう
* つまり no として進めれば特に問題は起こらない

## PHP の ver. について
* 現時点 2020/06/28 では PowerCMS X 側が対応していませんので PHP 8.x 系は避けましょう
    * PHP 8 の α 版は 2020/06/25 にリリースされました


# PHP7.4 インストール
## 本体インストール
### コマンド
```sh
apt install php
```

## 他モジュールのインストール
### コマンド
```sh
apt install php-fpm php-json php-gd php-mbstring php-mysql php-xml php-zip
```

### path 確認
* 以下の path にファイルが存在していることを確認

```sh
/run/php/php7.4-fpm.sock
```

### owner, group の確認
* もし nginx ユーザーを www-data 以外のもの ( たとえば nginx など ) にしている場合は、上記 php7.4-fmp.sock の owner, group をそれに準じて chown してください
* また、以下の設定を書き換えてください

```conf:/etc/php/7.4/fpm/pool.d/www.conf
; 前略

user = nginx
group = nginx

; 中略

listen.owner = nginx
listen.group = nginx

; 後略
```

### PHP-FPM 再起動
```sh
systemctl restart php7.4-fpm.service
```

## apache2 無効化
### コマンド
```sh
systemctl disable --now apache2
```

## nginx
### 設定書き換え
* 以下のように 7.4 へ書き換える

```nginx
    # 前略

    fastcgi_pass unix:/run/php/php7.4-fpm.sock;

    # 後略
```

### 再読込
* さいごに nginx の再読込をおこなうと、ダッシュボードが表示されるようになるはずです

```sh
nginx -s reload
```


# おわりに
## 感想
* まったく予期していなかったので、更新後にダッシュボードが表示されなくなってギョッとしました……
* また、他モジュール ( php-mbstring やら php-mysql やら php-xml やら ) をインストールすることを忘れていたり、 php7.4-fpm.sock ファイルの owner, group の書き換え忘れで permission denied くらったりで、何ヶ所もハマりポイントが出てしまい、複合的にやられたので対応に時間がかかってしまいました
* PowerCMS X は 2018/06 の初回環境構築以来、ずっと Ubuntu 18.04, PHP 7.2 という状態で走ってきていたので、綺麗な身にする良い機会となりました
* また、初回環境構築の際に手順を残していなかったので、それもまた良い機会となりました……猛省

## 次の記事
* [PowerCMSX+Ubuntu20.04+nginx環境におけるPHP7→8移行](https://qiita.com/Hi_Noguchi/items/7fa4e90a38b1a112d4d7)
  * さらに PHP 8.0 へ ver.up したい方はこちらもあわせてご覧ください
マウス・キーボード・ディスプレイを使わないラズパイのセットアップ

**作業に必要なもの**

- Raspberry Pi本体
- SDカード
- SDカードリーダー
- 電源

**不要なもの**

- ディスプレイ
- microHDMIアダプター
- マウス
- キーボード

# raspbianのインストール

- SDカードをPCに挿入する
- raspbianをダウンロードしてSDカードにインストール
https://www.raspberrypi.org/downloads/

# wifiでのアクセス設定

- ルートディレクトリにsshという名前の空のファイルを作成

```
cd /Volumes/boot
touch ssh
```

- ルートディレクトリにwifi設定用のファイルを作成する。<>の中に各自のwifi接続情報を書く

```
vi wpa_supplicant.conf
```

```
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=JP

network={
    ssid="<WIFI_NETWORK_NAME>"
    psk="<WIFI_PASSWORD>"
    key_mgmt=WPA-PSK
}
```

# sshで接続

- SDカードをPCから抜いてラズパイに挿入。電源を接続して起動する。点滅が落ち着くまで２分ほど待つ。
- 接続先のIPを探す。

```
arp -a
```

```
? (192.168.10.10) at 68:fe:f7:8b:62:9d on en0 ifscope [ethernet]
? (192.168.10.17) at b0:fc:d:3d:c5:bb on en0 ifscope [ethernet]
? (192.168.10.39) at b8:27:eb:a5:e1:ec on en0 ifscope [ethernet]
setup.netvolante.jp (192.168.10.221) at 0:a0:de:e8:a5:5c on en0 ifscope [ethernet]
? (224.0.0.251) at 1:0:5e:0:0:fb on en0 ifscope permanent [ethernet]
? (239.255.255.250) at 1:0:5e:7f:ff:fa on en0 ifscope permanent [ethernet]
```

- 上記コマンドで複数ipアドレスが見つかるので、順に下記コマンドを実行していきログインできそうなものを探す。yes/noが聞かれたらyes。パスワードはraspberry

```
ssh pi@[IPアドレス]
```

# デスクトップへのアクセス

- VNCサーバーをインストール

```
sudo apt-get install tightvncserver
```

- サーバーの起動

```
sudo tightvncserver
```

- （Macの場合） Finderを開いている状態で、メニュー > 移動 > サーバー で下記で接続

```
vnc://[IPアドレス]:5901
```
デシジョンテーブルで抜け漏れのないテストケースの設計をしよう

# はじめに

この記事ではデシジョンテーブルを用いたテスト設計(テストケース作成)についてざっくりに説明します。

業務で開発と同時にテストケースの作成を任されることが増えてきました。
観点だけを箇条書きで書き出して組み合わせを考え作成していましたが、
パターンに考慮漏れが起こること、今回のテストでは全部でどのくらいのテストケースで網羅できるのかが不明瞭なため、デシジョンテーブルを用いてテストケース作成をするようにしました。

デシジョンテーブルの存在は知っていたのですが、しっかり理解しておらず活用できずにいました。
理解するのは難しくなく、効率的に網羅性の高いテストケースを作成することが可能になり、
全てのケースをデシジョンテーブルで可視化して見通せるので資料としても有用なものになると思います。

# デシジョンテーブルとは
- 論理関係を表形式整理するために使用する
- 行方向に条件と動作を記載し、列方向にルールを記載して組み合わせる
- [決定表(JIS X 0125)](https://webdesk.jsa.or.jp/books/W11M0090/index/?bunsyo_id=JIS+X+0125%3A1986)としてJISで規格が定義されている表

文章だけではよく分からないので,
下記の仕様の時のテストケースをデシジョンテーブルで表します。

**仕様**

```
映画館のチケット料金
・割引券提示の場合は10%OFF
・平日は20%OFF
※割引の併用は不可
※割引条件が重なる場合は割引率の高い方が適用される
```

**デシジョンテーブル**
![スクリーンショット 2020-06-28 11.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/070cd84a-f86d-7f5e-774e-00cebbbea2f8.png)




# デシジョンテーブルの構成要素
- **条件記述部(condition stub)**  
考慮すべき条件・原因を列挙する部分。
![スクリーンショット 2020-06-28 11.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/700d5e60-a3c7-da6e-7d04-dc938faf7e3c.png)


- **動作記述部(action stub)**  
考慮すべき動作・結果を列挙する部分。
![スクリーンショット 2020-06-28 11.21.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/e25a8031-e8d0-e7fc-2ee1-0b1674c460fb.png)


- **条件指定部(condition entry)**  
条件・原因を特定の値や意味で表現して、ルールとして関連付けます。
条件指定部での書き方は下記。
![スクリーンショット 2020-06-28 11.23.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/42a6d7de-2afe-e70d-37ce-76c351c83d44.png)

| 表記 | 意味|
|:-----------|:------------|
| Y(YES)     |行に対する条件・原因が真であることを表す|
| N(No)      |行に対する条件・原因が偽であることを表す|
| 値や語句など |行に対する条件・原因が記載された値や語句となることを表す|
| -          |行に対する条件・原因が無関係であることを表す|

- **動作指定部(action entry)**  
動作・結果を特定の値や意味で表現して、ルールとして関連付けます。  
動作指定部での書き方は下記。

![スクリーンショット 2020-06-28 11.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/dd2e2c11-a117-fa5b-9e64-38f3f987fb3d.png)

| 表記 | 意味|
|:-----------|:------------|
| X(eXecute) |列に指定された条件・原因の真偽値に全て適合する場合に、行に対する動作・結果が生じることを表す|
| -      |列に指定された条件・原因の真偽値に全て適合する場合に、行に対する動作・結果が生じないことを表す|
| 値や語句など | 列に指定された条件・原因の真偽値に全て適合する場合に、行に対する動作・結果が記載された値や語句となることを表す |

- **規則**  
条件・原因の組み合わせ & 対応する動作結果の組み合わせ。  
規則の1つ１つがテストケースとなります。  
「平日で割引券提示の場合→割引率は20%」  

テストカバレッジ(網羅率)も
**実施した規則数 / 全規則数**で簡単に算出できます。

![スクリーンショット 2020-06-28 11.26.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/eacbfa9c-115b-fe16-8eb7-420534194d0b.png)


# まとめ
このようにデシジョンテーブルを使うことで、
全てのパターンを洗い出して網羅的なテストケースを作成することができます。

途中で仕様が追加になった場合も、条件記述部と動作記述に追加すれば簡単にテストケースの追加ができます。

反面、ケースがどんどん増加してしまいます。
網羅性が高い故に、テストケース数が多くなってしまう部分があるので、本当に実施が必要なテストなのかは見極める必要があります。

視覚的にも組み合わせが把握しやすいので、観点が多く複雑な条件が絡むテスト設計の際には
是非デシジョンテーブルを活用してみてはいかがでしょうか。

最後まで読んで頂きありがとうございます。
Amazon Linux2にDockerをインストールする

Docker初心者の私がAmazon Linux2(AMI)イメージから作成したEC2インスタンスに
Dockerをインストールし色々と触ってみたので備忘録として残します。

### ・インスタンスで使用するパッケージを更新する   
すでに実施済みのインスタンスであれば不要です

実行コマンド

```
sudo yum update -y
```
実行結果

```
・・・
Updated:
  amazon-linux-extras.noarch 0:1.6.11-1.amzn2             amazon-linux-extras-yum-plugin.noarch 0:1.6.11-1.amzn2
  ca-certificates.noarch 0:2019.2.32-76.amzn2.0.2         cloud-init.noarch 0:19.3-3.amzn2
  kernel-tools.x86_64 0:4.14.181-140.257.amzn2            python.x86_64 0:2.7.18-1.amzn2
  python-devel.x86_64 0:2.7.18-1.amzn2                    python-libs.x86_64 0:2.7.18-1.amzn2
  selinux-policy.noarch 0:3.13.1-192.amzn2.6.2            selinux-policy-targeted.noarch 0:3.13.1-192.amzn2.6.2

Complete!
```

### ・Amazon Linux ExtrasからDockerをインストールする 
Amazon Linux Extrasとは何ぞやということについては[AWS(公式)-Amazon Linux 2-よくある質問](https://aws.amazon.com/jp/amazon-linux-2/faqs/)の[Amazon Linux Extras]を確認してください。

実行コマンド

```
sudo amazon-linux-extras install docker
```
実行結果

```
・・・
Installed:
  docker.x86_64 0:19.03.6ce-4.amzn2

Dependency Installed:
  containerd.x86_64 0:1.3.2-1.amzn2                  libcgroup.x86_64 0:0.41-21.amzn2  pigz.x86_64 0:2.3.4-1.amzn2.0.1
  runc.x86_64 0:1.0.0-0.1.20200204.gitdc9208a.amzn2

Complete!
```

この時点ではまだインストールしただけなのでDockerホストは起動していません。
試しに稼働中のDockerコンテナを表示するコマンドを実行してみます。

```
sudo docker ps
```
「Dockerデーモンにアクセス出来ません」とエラーになります。

```
Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
```

### ・Dockerデーモンを起動する  

実行コマンド

```
sudo service docker start
```
実行結果

```
Redirecting to /bin/systemctl start docker.service
```

Dockerデーモンが起動したのか、再度確認してみます。

```
sudo docker ps
```
まだ一つもコンテナを起動していないので一つも表示されませんが、Dockerデーモンが稼働していることは確認できました。

```
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
```

### ・Dockerコマンドをsudo無しで実行出来るようにする
毎回Dockerコマンド(psなど)を実行するのに"sudo"を付けるのは面倒なので、Dockerグループに
Dockerを利用するユーザーを登録します。
今回はデフォルトで作成される"ec2-user"で行います。

実行コマンド

```
sudo usermod -a -G docker ec2-user
```
実行結果(/etc/groupの登録内容を確認)
dockerグループのサブグループにec2-userが含まれていることが確認できる

```
cat /etc/group | grep docker

docker:x:993:ec2-user
```

一度ログアウトしてから先程実行した`docker ps`を実行すると、エラーとならずに実行できる
ことが確認できる。
※ログアウトしないと上記グループ登録が反映されていないことがある


---
これで作成したEC2インスタンスでDockerを利用する準備が整いました。
Dockerを利用して色々と試して行こうと思います。
Learning React #3 yarn startは何をしている？

一旦は実行できるようになった最初のReactアプリケーション"hello-world"ですが、実行する時には何やらバックエンドでウニュウニュ動いてますね。
これって何を実行しているんでしょうかね。
探ってみたいと思います。

# yarn startは何をしている？
それでは実行時のコンソール出力を見てみましょう。
前回同様にメッセージに括弧付きの番号"()"を付けてから１つ１つ確認していきます。

```console:yarn_start
satom@W1007018N182 MINGW64 ~/src/react-app/hello-world (master)

(1)
$ yarn start

(2)
yarn run v1.22.4

(3)
$ react-scripts start
i ｢wds｣: Project is running at http://192.168.3.8/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\satom\src\react-app\hello-world\public
i ｢wds｣: 404s will fallback to /

(4)
Starting the development server...
Compiled successfully!

(5)
You can now view hello-world in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.8:3000

(6)
Note that the development build is not optimized.
To create a production build, use yarn build.
```

## (1) React開発サーバーの実行
単純に、yarnからReact開発サーバーを実行しています。内部的には(3)で説明している通り```react-script start```が実行されています。
何故```yarn start```が```react-script start``になるのかは、別の記事で説明しますね。

## (2) 実行したyarnコマンドのバージョン
単純なので割愛します。

## (3) React開発サーバー（webpack-dev-server）起動時のステータス表示
内部的には"webpack-dev-server"(wds)という、フロントエンド開発時に使用できるWEBサーバーが起動しているようです。

参考までに、公式のwebpack-dev-serverの情報はこちらです。
https://github.com/webpack/docs/wiki/webpack-dev-server

複数メッセージが表示されていますが、開発サーバー起動時以下の内容をコンソールに出力しています。

* wds実行時のURLを通知
* webapckにより生成されたコンテンツのURL
* webpackに存在しない静的コンテンツのURL
* 404エラー発生時はエラーとせずに"/"へフォールバックする

このように設定されるのは分かりました。ですが、これってどこで指定されているんでしょうね。これも別の記事で確認結果を書きたいと思います。
今は先に進みましょう。

と、その前に、```webpack```というキーワードが気になりますので、少しだけ調べてみました。

### webpackとは
クライアント側のパッケージツールでした。私たちが作成したJavaScriptファイル（jsファイル）から参照している他のjsファイルやcssファイルやimageファイルをまるっと１つのjsファイルにまとめるためのJavaScriptライブラリです。（イメージファイルはbase64に符号化されて保存されるようです）
これを使うメリットは、

* ネットワークトラフィックの負荷を軽減
* レンダリングが高速化
* モジュール管理が容易

デメリットは、CSSやイメージもパックされるので、デザイナーとの協業で苦労するようです。
とりあえず調べた内容をザックリ紹介しましたが、詳細は別の記事で書きたいと思います。


## (4) WDSの起動
先ほど説明したwdsがここで起動されています。

## (5) ReactアプリケーションへのアクセスURL
起動したReactアプリケーションにアクセスするためのローカルURLとネットワークURLが表示されます。
ただ、便利なことにwdsが実行されると、デフォルトブラウザが自動起動され、ここに表示されたURLにアクセスしてくれます。

## (6) ビルドオプションの注意書き
最後に、開発用ビルドなので最適化されていないよーって通知してくれてます。
最終的に別環境にデプロイする時は```yarn build```を使う事で配布用パッケージという形で生成されるようです。

以降の記事では、作成されたReactアプリケーションのプロジェクトファイルを１つ１つ確認していきたいと思います。Reactアプリケーションというのがどのようなファイル構成になっており、どのような原理で動作しているのか、あまり深く入りすぎず、理解できる程度の深度で追ってみたいと思います！
MacBookPro買った時にしたい初期設定を雑にメモする

元々会社でMacBookPro使ってたのですが、改めてプライベート用に購入して、
「うわ、なんか絶妙に使いづらいな。前の設定どんなだっけ、、」
ってなったので、最低限必要なマイ初期設定を雑にメモ。

## 設定項目一覧

今回設定したのは以下。

- トラックパッドのカーソルスピードを最速にする
- トラックパッドのスクロールの方向を変更する
- Touch Barのデフォルト表記をFキーにする
- Touch Barにスリープボタンを表示
- 画面整列アプリ(Spectacle)をインストールする
- Google日本語入力をダウンロードして、かな変換のデフォルトに設定する
- Dockの不要物を削除する
- Chromeをインストールして、デフォルトブラウザにする
- ターミナルをiTermにして、いい感じにする
- 【US配列限定】日本語変換のキーを変更する（入力ソース設定で、Command+Spaceに設定）
- 【US配列限定】caps lockとctrlを入れ替え


## 【余談】US配列キーボードについて
見た目の美しさに惹かれて、100%勢いだけでUS配列キーボードにしました。
今のところ、

- キー配列が美しい！かっけー！
- Enter小さい、かな変換がない等、ちょっと慣れがいるなあ

という感じです。
キー配列は設定いじれば、日本語の時とかなり配置を近づけられるので、あとは慣れの問題かなと。

なんだかんだ、新しいMacBookProはテンション上がりますね。
良いMacライフを！


##  参考
- [Mac初心者におすすめの設定と使いこなし方](https://takakojima.com/mac%E5%88%9D%E5%BF%83%E8%80%85%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E8%A8%AD%E5%AE%9A/)
- [CLIをカスタマイズしてモチベーションを上げる \| メンバーズエッジカンパニーブログ](https://www.membersedge.co.jp/blog/how-to-customize-cli/)
- [Homebrewのインストール \- Qiita](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)
- [お前らのターミナルはダサい \- Qiita](https://qiita.com/kinchiki/items/57e9391128d07819c321)
インスタンスメソッドの呼び出しについて

インスタンスメソッドの呼び出しの書式についての備忘録です。

# メソッド呼び出しの書式について
- 同じインスタンスに定義されているメソッドの場合は[メソッド名（引数）]
- インスタンスに定義されているメソッドの場合は[変数.メソッド名（引数）]
- staticなメソッドの場合は[クラス名.メソッド名(引数)]

# 同じインスタンスに定義されているメソッド


```java:Test.java
public class Test {
  public void SayHello() {
    System.out.println("Hello World");
  }
  public void Display() {
    SayHello();
  }
}
```
# 異なるインスタンスに定義されているメソッド

新しくインスタンスを作成して、変数が格納されている参照を使う（hello.SayHello();）。

```java:Hello.java
public class Hello{
  public void SayHello() {
    System.out.println("Hello World");
  }
}
```
```java:Test.java
public class Test {
  public static void main(final String[] args) {
    Hello hello = new Hello();
    hello.SayHello();
  }
}
```
# staticなメソッド

クラス名の参照を使う（Hello.SayHello();）。

```java:Hello.java
public class Hello{
  public static void SayHello() {
    System.out.println("Hello World");
  }
}
```
```java:Test.java
public class Test {
  public static void main(final String[] args) {
    Hello.SayHello();
  }
}
```
# おまけ

後ろにカッコがつかないのはインスタンスのフィールドへのアクセスです。

# 参考文献
徹底攻略Java SE11 Silver問題集
ネットワークアドレス計算の思考プロセスを、フローチャートにしてみた

##はじめに
Q. IPアドレスの計算が速くなるには、どうすればいいですか？
A. 習うより慣れろ。
…ではあまりに乱暴なので、IPアドレス計算の思考プロセスをフローチャートにしてみた。

##宣伝
思考プロセス・概念ではなく、Excelの実用的な関数を知りたい場合は、下記を参考に。

**【Excel】IPアドレスの各オクテット・Prefixを抜き出す関数**
https://qiita.com/AnPanda/items/93390f43b7115873c4e5

##事例
あるホストアドレスからネットワークアドレスを計算したい。これを計算するとき、頭の中でどういう処理が行われているか。

##まずは日本語で
####対象ホストアドレス①：192.168.100.203/28
>クラスCか。じゃあ第2オクテットまではNWアドレスで確定。
レンジが/24より細かいから、第3オクテットもNWアドレスだ。
/28だから、16個単位のNWね。
第4オクテットが203だから、128が引けるな。残りは75。
64も引ける。残りは11。
NWの単位である16より小さくなったから、これ以上は引けない。
元の第4オクテット203から、残った11を引くと、192だ。これが第4オクテットになるから、

**<u>答え：192.168.100.192/28</u>**

####対象ホストアドレス②：172.31.163.32/22
>クラスBね。16<x<24だから、第2オクテットまではNWアドレスで確定。
/24よりも広いレンジなので、NWアドレスの第4オクテットは必ず0になるってこと。
/22は、/24：256よりも2段階大きい、つまり/24が4つ分だ。これがNWの単位になる。
第3オクテットから128を引くと、35。
64は引けない、次は32を引いて、残りは3。
NWの単位である4よりも小さい。計算終了。
残った3を、元の第3オクテットである163から引いた、160がNWアドレスの第3オクテットになる。
また、第4オクテットは0になるので、

**答え：172.31.160.0/22**

##フローチャート
![subnet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/969c0ec3-9fc2-8092-192a-d11696d2a955.png)

###説明
※メインは図解なので、言葉での説明は補足程度(いい加減)です。

まず、/0だったら0.0.0.0/0として即終了。

続いて、レンジが8で割り切れる場合(/8,/16,/24,/32)、オクテットごとで区切れるので、以降の処理は不要。別処理として終了させる。
割り切れない場合は、商を[A]、あまりを[B]とする。
第[A+1]オクテットが計算対象になるので、これを[C]と置く。

2の(8-[B])乗を[D]と置く。これは、ネットワークの単位になる値。/28だったら、28÷8なので、3あまり4。2の(8-4)乗で、16になる。/28のネットワークアドレス・ホストアドレス・ブロードキャストアドレスを足した範囲が16個分なので、これは直感的にわかる。
例②のような/24より広いレンジの場合はちょっと考え方を変える必要あり。22÷8で、2あまり6。2の(8-6)乗は4。この4は、/24単位(256)のネットワークが4つ分ある、という意味だと考える。計算対象以外のオクテットのことをいったん忘れてしまった方が、計算は楽になる。

繰り返しが一番理解しにくいところ。
言葉で説明すると、128、64、32…と引いていき、引けなくなるまで繰り返す。引けなくなった残りはホストアドレスとしての値なので、それを元のオクテットから引けば、ネットワークアドレスになる。

##まとめ
####図解は大事
「慣れる」というのは、自分の頭の中でプロセスが明確になるということ。それを人に説明するには、プロセスをフローチャートなどの図で表現する必要がある。
####暗算でもできるように、仕組みを理解するべき
サブネットを計算するようなツールは世の中にすでにたくさん出回っており、業務でIPアドレスを扱うなら、暗算ではなくツールに頼ることは合理的な選択。ただ、ツールが使えないときの対応や、スピード感の向上につながるので、できるだけ計算の仕組みを理解するようにしておくべき。
令和元年🎉 JavaScript International Date フォーマットで和暦を表示させるには （再）

*この記事は 平成最後の日、2019年4月31日に別のアカウントからポストしたものをこちらに移行した記事です。今更感があるかもしれないですが ECMA 402 について知るのは悪くないと思います〜。*

---
令和元年おめでとうございます 🎉

さて、今回は新年号にふさわしく International Date format で和暦を表示する方法について書いていきたいと思います。

JavaScript `Intl.DateTimeFormat` オブジェクトを使えば、言語とローケルに特化した日付と時刻のフォーマットが可能になります。

[The ECMAScript Internationalization API](https://tc39.github.io/ecma402/)（国際標準化 API） は、日付と時刻そして貨幣の表示のローカライズを JavaScript で可能にするために作られたもので、2010 年に初版が発行されて現在は第６版が最新です。この API は最新のブラウザではすでにサポート済です。(参照 [Can I use](https://caniuse.com/#search=Intl))

`Intl` オブジェクトのプロパティの一つ、`DateTimeFormat` が言語に応じた日付と時刻のフォーマットを可能にします。

ということは日本のローカルタイムを令和で表現できるということなのです。ただし、ブラウザがアップデートされていればの話ですが。

> ~~結論を言っておきますと、現時点で最新の Chrome ではまだ令和が和暦に追加されていませんので、この先のコードを正式にアウトプットするには、Chrome Canary 版が必要です。（この記事を急いで書いたので、しかも私のローケルでは時差でまだ平成ということもあり他のブラウザを試していませんが🙇‍♀️　Firefox では今のところまだのようです。Mozilla の Emma さん情報ありがとうございました。）~~
（現在はサポート済）

## 🗓 Using DateTimeFormat
ローケルと言語が設定されていない場合は `DateTimeFormat` はデフォルトの設定で表示されます。

ですので、米国サンフランシスコにいる私が自分のマシン上のブラウザでこのコードを動かすとこのように今日の日付を en-US で表示します。

```js
new Intl.DateTimeFormat().format(Date.now())
```
（本当は私のタイムゾーンではまだ4月31日なのですが、日付が変わった程で😉）

```
"5/1/2019"
```

### 🇯🇵 Specifying Locales
ここでlocales 引数を使い、ローケル識別子（言語コードと、国、地域コード）を設定することによって日付と時刻をローカライズしてみましょう。

例えば、ロシアの場合。

```js
new Intl.DateTimeFormat('ru-RU').format(Date.now())
// "02.04.2019" と表示される
```

そして日本の場合。

```js
new Intl.DateTimeFormat('ja-JP').format(Date.now())
// "2019/5/1"
```

しかし、これではグレゴリオ暦のままです。完全に和暦で表示するにはどうしたらいいでしょうか。

ローケル識別子 `ja-JP` だけでは足りませんので `-u-ca-japanese` という拡張キーを追加し、 `ja-JP-u-ca-japanese` としましょう。

なんだか長いのですが、
`-u` 拡張キーの識別は
`-ca` カレンダー・タイプの
`-japanese` 日本のカレンダーを表示

という意味になります。詳しくは [Unicode Technical Standard #35](http://www.unicode.org/reports/tr35/#Locale_Extension_Key_and_Type_Data) で。

（[エラリー　ジャンクリストフ](https://twitter.com/brandelune) さん、拡張キーについて詳しい情報のあるリンクを教えてくださって、ありがとうございました！）

```js

new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(Date.now())
// 昨日までは、"31/4/30"
// 今日は "1/5/1"  
```

さて和暦っぽい年号ではありますが、元号が表示されていません。どうしたら良いでしょうか。

元号を表示するには options 引数の、この場合 `era` を `long` に設定しましょう。

```js
new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era:'long'}).format(Date.now())
// "令和1/5/1"
```

さてこれで、"令和1/5/1" と表示されたら、お使いのブラウザが無事に令和をサポートしています🐥

"平成31年5月1日" と表示された方はブラウザをアップデートをする（もしくは出るまで待つ）。待てども待てども表示されないブラウザはバグを提出しましょう。

**(注、令和にはいってから Chrome 上でのこの和暦の表記が「令和n年n月n日」から「令和n/n/nn」のように変更になったようです。いつ変更になったのかは私はわかりませんがたぶん元年の途中からだと思います。)**

せっかくですのでタイのローケルでも試してみましょう。

```js

new Intl.DateTimeFormat('th-TH-u-nu-thai', {era:'long'}).format(Date.now())
// "๑ ๕ พุทธศักราช ๒๕๖๒"
```

なんか読めないけどイイ！🤩
タイはお釈迦様が入滅した翌年を仏滅紀元元年としており今年は 2562 年のようです。

というわけで、もっと詳しく知りたい方は [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) をどうぞ。

ちなみに、*Is it Reiwa (令和) yet?* というしょぼいテストサイトも作ってみました。
https://reiwa-yet.glitch.me/.

それでは、今元号ともよろしくおねがいします。

---
元記事は、4月1日に元号が発表された直後に英語で書いたものです。今回、令和元年のはじまりを記念して日本語でも書きました。
[https://girliemac.com/blog/2019/04/02/javascript-i18n-reiwa-era/](https://girliemac.com/blog/2019/04/02/javascript-i18n-reiwa-era/)
TypeScriptのコンパイルからブラウザ反映までを自動でやりたい

# 目的
TypeScripはそのままでは実行できないので、コンパイルしてJavaScriptに変換しなければならない。
またローカルサーバで開発している場合、コンパイルされる毎にブラウザの更新もかけないといけない。
めんどい！！--->自動化したい！！！

# 環境
環境
windows10
node.js v12.13.0
npm v6.12.0
typescript v3.9.5

今回はnode.jsを使ってTypeScripがインストールされている状態を前提とする。
環境構築にはこちらも参考に。
・[TypeScriptのインストールから実行まで](https://qiita.com/eiji-noguchi/items/8c1d3741ac9f2857b230)

初期フォルダ構成はこんな感じ。

```
TS_Project
  ├─ node_modules
  ├─ app.ts
  ├─ index.html
  ├─ package-lock.json
  └─ package.json
```

# コンパイルの自動化
TSファイルに変更があった場合、自動でコンパイルされるようにする。

まずTypeScript(以下TS)プロジェクトを初期化する
`package.json`が存在するディレクトリで以下のコマンドを実行

```terminal:コマンドプロンプト
npx tsc --init
```

`tsconfig.json`が追加されていることを確認。
これにはTSファイルがどのようにコンパイルされるかなどをコントロールする設定が記載されている。

```
TS_Project
  ├─ node_modules
  ├─ app.ts
  ├─ index.html
  ├─ package-lock.json
  ├─ package.json
  └─ tsconfig.json  <- 追加
```

後は簡単。

```terminal:コマンドプロンプト
npx tsc --watch
```
を実行するだけ。これでTSプロジェクト内のTSファイルに変更が起きた場合、自動でコンパイルしてくれる監視下になる。
`--watch`は`-w`でも可。

コンパイルまでは自動でできた。

# ブラウザを更新の自動化
次にローカルサーバを立てている場合に、ファイルを更新すると自動的にブラウザを更新するようにしたい。
そこで「Lite-Server」をインストールする。

```terminal:コマンドプロンプト
npm install --save-dev lite-server
```

`package.json`に追加されていることを確認する。

```
  "devDependencies": {
    "lite-server": "^2.5.4"
  }
```

「Lite-Server」をインストールしたら、`package.json`のプロパティにある`"scripts"`配下に以下を設定する。

```
 "scripts": {
    "start": "lite-server"  <- 追加
  }
```

設定後はコマンドプロンプトに`npm start`と打ち込むことでサーバが立つようになる。
もちろん、ファイルの更新があったときは自動でブラウザを更新してくれるようになる。

# 実際の動き
`npx tsc -w`と`npm start`で常に監視状態にしておく。
htmlとtsを用意する。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./app.js" defer></script> <!-- 追加！！ -->
    <title>初めてのTypeScript</title>
</head>
<body>
    
</body>
</html>
```

```typescript:app.ts
console.log('Hello TypeScript')
```

`app.ts`ファイルを編集すると自動でコンパイル->ブラウザ更新までをしてくれている。

![img.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/890387ac-fd17-553a-ff63-202cc8d1e114.gif)

# 「Live Server」を使う手もある
今回はブラウザの自動更新に「Lite-Server」を使ったが、「Visual Studio Code」を使った開発をしているなら[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)を使う方がお手軽かもしれない。VSCodeの標準拡張機能なので。
まぁそれはまた別のお話で。
【備忘録】本番環境への更新[heroku]

#はじめに
本番環境へ更新する時、毎回緊張しているたかしです。
今回はherokuで初の本番環境へ更新しました。
初めてということで案の定エラーが出て焦りまくりだったんですが、原因はとても簡単でした。。

今回はその解決方法を自分が忘れないためにも、他の人がこのエラーに遭遇してすぐ解決できるように記事として投稿いたします。

##エラー画面

<img width="452" alt="6ae4049abac24c612af7c9f06c3aa624.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569660/399ff34a-a7df-40b0-8420-abaa8220a61c.png">

現状では、pushできる環境ではありません的なことを言っています。

##解決方法
herokuでのデプロイはgitと連動しているため、変更内容があった場合は下記コマンドを実行して変更内容を反映できるようにしましょう。

 ``` ruby
$ git add
$ git commit -m "Update application"
$ git push heroku master

#マイグレーションの変更等をした際は下記コマンド実行
＄ heroku run rails db:migrate
 ```

##終わりに
上記のとおりすごい簡単な話でした。
毎度本番環境には変な緊張感を持ってしまいます。

手順的にはすごい簡単なんですが、もしつまずいてる人がいたら是非参考にしてみてください。
gem 'rails-i18n', '~> 6.0.0'を追加し、bundle install でエラーが出た時の解決方法



# エラーの出現
`Rails５`でエラーメッセージの日本語化をするために
`Gemfile`に下記を追加

```Gemfile
gem 'rails-i18n', '~> 6.0.0'
```


次に、ターミナルにて

```
$ bundle install
```

を実行したところ、下記のエラーが発生しインストールができない。

```実行結果

The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "railties":
  In snapshot (Gemfile.lock):
    railties (= 5.2.4.3)

  In Gemfile:
    coffee-rails (~> 4.2) was resolved to 4.2.2, which depends on
      railties (>= 4.0.0)

    rails (~> 5.2.4, >= 5.2.4.3) was resolved to 5.2.4.3, which depends on
      railties (= 5.2.4.3)

    rails-i18n (~> 6.0.0) was resolved to 6.0.0, which depends on
      railties (>= 6.0.0, < 7)

    sass-rails (~> 5.0) was resolved to 5.1.0, which depends on
      railties (>= 5.2.0)

    web-console (>= 3.3.0) was resolved to 3.7.0, which depends on
      railties (>= 5.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

```

#エラー原因
```
gem 'rails-i18n', '~> 6.0.0'
```
のバージョン指定が間違っていた。
上記バージョンは`rails6`の場合だった。



#解決方法
今回の`rails`のバージョンは`rails5`だったので、その場合は、

```
gem 'rails-i18n', '~> 5.1'
```
とすればOK！！

その後、

```
$ bundle install
```
を実行したら無事インストールできた。
mac（Catalina）にOpenPoseをインストール

OpenPoseをMac(macOS Catalina, 10.15.5)で動かそうとしたとき、各ツールのバージョンを指定してインストールすることで動作まで辿り着けたので、そのメモ。

# OpenPoseとは
[OpenPoseとは | ディープラーニングで人のポーズを解析](https://ledge.ai/openpose/)
<img width="349" alt="スクリーンショット 2020-06-28 10.26.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37048/f587ee0a-24a7-2dcd-9802-441146444c36.png">
>[[arXiv]OpenPose: Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields](https://arxiv.org/abs/1812.08008)
>[[GitHub]openpose](https://github.com/CMU-Perceptual-Computing-Lab/openpose)


#Openposeのインストール(mac)
下記手順に沿ってインストールしてみた。
[Openposeのインストール(mac)](https://qiita.com/piyopiyohiyoko/items/a9220c3b2f0e75e1a460)
ただ2020/06/28現在、依存関係のライブラリ等のバージョンで動作しなかったので、「Python」「TensorFlow」を変えてインストールした。

###Python 3.6.10
オススメ：仮想環境構築時に、[pyenv](https://github.com/pyenv/pyenv)でpythonのバージョン管理可能な形式で入れると便利。
※[参考サイト](https://qiita.com/koooooo/items/b21d87ffe2b56d0c589b)

###TensorFlow 1.5.0

```shell:バージョンを指定してTensorFlowインストール。
pip3 install tensorflow==1.5 
```
※[参考サイト](https://qiita.com/egplnt/items/c5055f821a4770edbf8a)

#実行
###画像を実行

```
cd ~/tf-openpose
python run.py --model=mobilenet_thin --resize=432x368 --image=../Desktop/soccer.jpg
```
※[参考サイト](https://qiita.com/piyopiyohiyoko/items/a9220c3b2f0e75e1a460#3%E3%81%84%E3%82%88%E3%81%84%E3%82%88%E5%AE%9F%E8%A1%8C)

###MacBook内蔵カメラを使ったリアルタイム映像を実行

`run_webcam.py`を実行しても動かなかったが、`--camera=1`にしたらできた。
（複数カメラが設定されてると0じゃないのかも。

```python
python run_webcam.py --model=mobilenet_thin --resize=432x368 --camera=1
```
※[参考サイト](https://qiita.com/mdo4nt6n/items/d9523aff14dd9fb70c37#macbook%E5%86%85%E8%94%B5%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E6%98%A0%E5%83%8F%E3%81%A7%E3%81%AE%E5%AE%9F%E8%A1%8C)

モデル（`--model`）は4種類ある。cmuはけっこうスペックが必要そうなので、mobilenetがオススメ。
※[参考サイト](https://qiita.com/kayu0516/items/754c6719fb55d2a6d563#%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)

##[Tips]ModuleNotFoundError: No module named 'XXX'が出たとき
pipでインストールしよう
※[参考サイト](https://qiita.com/shimajiri/items/df4338913d76f6c76adb)

#他、参考にしたサイト
[【TensorFlow版】MacBookで行うOpenPose （osx Mojave対応）](https://qiita.com/mdo4nt6n/items/d9523aff14dd9fb70c37)
vimで:buffersなどの結果を絞り込む

# 諸元

`:buffers`や`oldfiles`などを絞り込みたくて、夏。

# 解決策

`:filter`を使う。

## 例

```
:fileter /.py$/ oldfiles
```

# 余談

過去に開いたファイルを絞り込みつつプロンプト指定ができる。
Uniteとか使えない環境で重宝する。

```
:filter /.py/ bro[wse] ol[dfiles]
```
〔JavaScript〕indexOfの文字列、配列での使い方まとめ

#はじめに
JavaScriptの`indexOf`で躓いてしまったので、備忘録として残しておきます
#**indexOfとは**
文字列に含まれる部分文字列を検索する為に、`indexOfメソッド`を利用します。`indexOfメソッド`は、指定された部分文字列が<font color="Tomato">**最初に**</font>登場した位置を、**文字列の先頭を0**としたインデックス番号で返します。<font color="Tomato">**文字列が見つからなかった場合、戻り値は-1**</font>となります。
#使い方

- `indexOf`の第1引数には、**検索したい文字を指定**します。
- そして、文字列の先頭（0番目）から順番に1文字ずつ検索をしていき、最初に一致した<font color="Tomato">**位置（index番号）を数値**</font>で返してくれます。※（大文字・小文字は区別します）

```javascript

const str= 任意の文字列
 
str.indexOf( 検索したい文字, 検索開始位置 );
// ※検索開始位置は省略可能
```


##indexOfの文字列(String)検索方法
例で説明します

```javascript
//①数列'123547'から７を取り出したい場合
const numbers = '123547';
const result = numbers.indexOf(7);
console.log(result);
//②文字列 'dog,shark,hamster,fox'からhamsterを取り出したい場合
const animals ='dog,shark,hamster,fox';
const result = animals.indexOf('hamster');
console.log(result);
```
出力結果

```
//①の場合
 5
//②の場合
 10
```
- ①の場合はインデックス番号5番なので正しいことがわかりました！
- ②の場合は文字列の`hamster`の`h`の位置がインデックス番号10番目なことを教えてくれています。

- **文字列にすると`,`で一つ一つ区切られていると認識されている訳てはない**ので気を付けましょう。
(私はここで躓きました)

###検索開始位置を指定する
(例)

```javascript
//9番から指定
const animals = 'dog,fox,shark,hamster,fox';
const result = animals.indexOf('fox', 9);
 
console.log(result);
```
出力結果

```
22
```

##lastIndexOfで後ろから検索する
- `lastIndexOf`での「後方検索」について学習しましょう！

- 「後方検索」とは、<font color="Tomato">**任意の文字列を後ろから検索していくこと**</font>で「`indexOf()`」と反対の検索方法になります。
- 使い方説明します、

```
var str = 任意の文字列
 
str.lastIndexOf( 検索したい文字, 検索開始位置 );
```
- indexOf()構文は同じです。
- 違うところは、「`indexOf()`」が文字列の先頭から1文字ずつ順番に検索していたのに対して、この「`lastIndexOf()`」は文字列の後ろから先頭に向かって検索していくという点です！
(例)

```javascript
// 任意の文字列
const animals = 'dog,fox,shark,hamster,fox';
 
// 「apple」を末尾から検索する
const result = animals.lastIndexOf( 'fox' );
 
console.log( result );
```
出力結果

```
22
```
- 文字列内の後ろから一致するまで検索をしていきます。
- 先ほどの「`indexOf()`」の場合だと、文字列の先頭から検索するので5番目から始まる「fox」が一致しましたが、「`lastIndexOf()`」は後ろから検索するので22番目が一致します。

- 後ろから検索しても返ってくる「値」は「`indexOf()`」と同じく<font color="Tomato">**先頭から順番に数えた文字位置**</font>になるので注意してください。

#「indexOf」の配列(Array)検索方法
- これまでは文字列内のキーワードを検索してきましたが、実は**配列に格納されているキーワードの検索**も「`indexOf()`」を使うことが可能です。

```javascript
const animals =['dog','shark','hamster','fox'];
const result = animals.indexOf('hamster');
console.log(result);
```
出力結果

```
2
```
文字列の場合と同様に、<font color="Tomato">**最初に一致したインデックスのみ返す点**</font>と、見つからなかった場合は「`-1`」が返り値になるという点を覚えておきましょう！


#まとめ
indexOfの文字列の初めから一文字ずつ数えて出力するとこで躓いたので
記事を書きました
参考にしていただけると嬉しいです！
##参考リンク
[JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)](https://www.sejuku.net/blog/21049/"【JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)")
pgrep

LPIC101難しすぎるぞ、問題数が足りないのか。。

####pgrepとは
実行中のプロセスから特定の名前を持つプロセスIDを検索することができるコマンド
∟プロセス：プログラム
∟プロセスID：（Unix系などで使われている番号で、ある時点で存在するプロセスを一意に識別するために用いられる。優先順位を調整したり、終了させたり等、プロセス（群）を操作する様々な関数の引数（＝識別子）

####pgrepコマンド

書式　pgrep [オプション]　検索パターン

例1　-U：ユーザー名やユーザー識別子を指定すると、そのユーザーが実行したプロセスを検索可能
∟検索パターンにユーザー名やユーザー識別子が入る

例2　-u：実行ユーザー名や実行ユーザー識別子を指定すると、その権限で動作性ているプロセスを検索可能
∟検索パターンに実行ユーザー名や実行ユーザー識別子が入る

※rootユーザーの識別子は0
＝EUID

####参考文献
https://eng-entrance.com/linux-process

いつも同じ資料使ってる、これ以外のを探してみよう
npx react-native doctorで❌が出たときに確認したこと

## 概要
React Native　～JavaScriptによるiOS／Androidアプリ開発の実践という本の、開発環境の構築（3章）のコマンドを順番に実行していった時に、発生したエラーを解消するために行ったことの個人的メモです。

### 環境
* macOS Catalina

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295868/c315bed0-ca56-a2dd-04e1-ab03e5ecab5c.png)


## npx react-native run-androidコマンドでエラーが出たときに確認すること
基本的は、本に記載されているコマンドと設定を順番に実行していけば、問題ないです。npx react-native runでエラーが発生してビルドが成功しなかったので、npx react-native doctorのコマンドを確認したところ、以下のエラーが出てきました。

![react-narive doctor error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295868/b3c3e156-c4b8-6ff8-0340-61157878c8a7.png)


### ANDROID_HOMEに❌がついている場合

ターミナルの設定ファイル(.bash_profile)にパスが通っているか確認します。

```bash
#.bash_profileが現在のディレクトリにあるか確認する。
#ターミナルを起動したときは、ホームディレクトリで起動するので、存在するはず
ls -a

#エディタを起動して、ファイルの冒頭にアンドロイドのパスを通す
nano .bash_profile
```


```bash:.bash_profile
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```

control + x を入力し、ファイルを編集していた場合は保存するか聞かれるため、yを入力してファイルを保存して終了します。


ファイルの更新した後、コマンドラインを更新します。

```bash
source ~/.bash_profile
```

パスが通っているか以下コマンドで確認します。
ターミナルに先程記載したパスが表示されれば大丈夫です。

```bash
echo $PATH
```

SDKのパスはAndroid Studioの Tools > SDK Managerから確認することができます。
![android sdk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295868/88467bd4-5f22-02a0-9352-1b00a1f81c12.png)

## ANDROID SDKに❌がついている場合
以下コマンドでサンプルプロジェクトを作成したと思います。

```bash
npx react-native init MyApp --template ract-native-template-typescript@6.3.16
```
作成したプロジェクトのMyApp\android\gradle\wrapper\gradle-wrapper.propertiesの設定を変更します。

```bash:gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
- distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-bin.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
```


npx react-native doctorを実行するとANDROID SDKに❌がつきますが、Andoroid Studioでエミュレータを起動して、以下コマンドを実行すると、エミュレータ上で起動することが確認できます。

```bash
npx react-native run-android
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295868/140edf93-1ee3-ceea-3f8d-f3076a8f1354.png)



### 参考
https://note.com/ahiruchanco/n/ne7e8d0d05f78
https://taktak.jp/2020/04/02/4275
https://qiita.com/tekoneko1997/items/ab1254e4472802514190
(自分用)Flask_AWS_1(AWS仮想環境にPHP,MySQL,phpMyAdmin,Pythonのインストール)

# 項目
1. PHPのインストール
2. MySQLのインストール
3. PHPMyAdminのインストール
4. Pythonのインストール

# 1.PHPのインストール
```bash:ターミナル
# まずLinux仮想マシンに接続、ここを覚えてないなら１つ前のやつを見て
$ ssh -i ~/.ssh/FirstKey.pem ec2-user@(パブリックIP)

# 管理者権限に変更
$$ sudo su

# PHPをインストール
$$ yum install -y php

# PHPの設定を変える前にバックアップを取っておく
$$ cp /etc/php.ini /etc/php.bak

# viでPHPの設定変更
$$ vi /etc/php.ini
```

- `:set number`で行番号を表示
- `:520`で520行目に移動
- `i`にて記述モードにし、`error_reporting = E_ALL & ~E_DEPRECATED`という行を、`error_reporting = E_ALL & ~E_DEPRECATED & ~E_NOTICE`に変更する
- `esc`でコマンドモードに戻る
- `:537`で537行目へ
- `i`からの`display_errors = Off`を`On`に変更、`esc`
- `:wq`で保存終了

```bash:ターミナル
# Apacheを再起動し適用
$$ service httpd restart

# [OK]*2出たら多分大丈夫
```

# 2.MySQLのインストール
- 前回に引き続き管理者権限でログインしてる前提

```bash:ターミナル
# MySQLのインストール
$$ yum install -y mysql-server

# MySQLをPHPがいい感じに動かせるものを入れる
$$ yum install -y php-mysqlnd

# Pythonでいい感じにね
$$ yum install mysql-connector-python

# MySQLを起動
$$ service mysqld start

# MySQLの設定をあれこれ
$$ mysql_secure_installation
# 一発目のrootパスワード聞いてくるところはそのままEnter
# rootパスワード新しくするか聞かれるので、yes
# 好きなパスワードを入力
# anonymousユーザ消すか聞いてくるのでyes
# あとは全部yでも良さげ

# MySQLでの文字コードを設定
$$ vi /etc/my.cnf

# `:set number`で行数を表示し空白の10行目に
$$ character-set-server = utf8
# と入力する、繰り返すが`i`で入力モードにし、入力後`esc`でコマンドモード
# `:wq`で保存終了

# MySQLを再起動
$$ service mysqld restart
#[OK]と出れば`OK`
```

# 3.PHPMyAdminのインストール
- 前回に続き仮想環境の管理者権限内を前提

```bash:ターミナル
# phpMyAdminのインストール先を作成
$$ yum-config-manager --enable epel

# phpMyAdminをインストール
$$ yum install -y phpmyadmin

# phpMyAdminの設定を開く
$$ vi /etc/httpd/conf.d/phpMyAdmin.conf
# ここで127.0.0.1って書いてあるところをグローバルIPに変更すると、自分のローカルなマシンだけが接続変更出来る様になる
# やらなくていいと思う
# もし変えたい場合は、`:%s/127.0.0.1/自分のグローバルIP/g`で変更

# Apacheの再起動
$$ service httpd restart
```
- `http://前に設定したAWSのパブリックIP/phpmyadmin/`に接続すると、`phpMyAdmin`のページが出てくる
- ユーザ名は`root`、パスワードはMySQLインストールで設定したやつを入れる

# 4.Pythonのインストール
- 前に続き仮想環境内(管理者権限ではない)

```bash:ターミナル
# 一回Linux環境アップデート
$$ sudo yum -y update

# Pythonインストール
$$ sudo yum install python36-devel python36-libs python36-setuptools
# もうMySQLをPythonでいい感じにするやつはインストール済み

# Apacheを再起動
$$ service httpd restart
```

# 5.終わりに
- 環境構築がいっっっちばんつまらない最悪
Apache2.4 で x-httpd-php を使った時の不可解な挙動

次のような文字化けの問題です。
EUC_JP で記述しているのに、UTF-8 と認識されて文字化けを起こします。
![f01_jun28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ae367302-1877-554b-8e16-9275f4a7920b.png)

ページ情報です。
![f01_contents_jun28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/82f4d3a6-da38-55ca-2d64-41ba427e7dff.png)

問題は、apache2.conf で次の設定をした時に発生します。

```text:/etc/apache2/apache2.conf
（省略）
<Directory /var/www/>
        AddType application/x-httpd-php .htm
</Directory>
（省略）
```

問題を起こすファイルの作成方法
UTF-8 で u01.htm を作成してから、nkf で EUC-JP に変換します。

```html:u01.htm
<!DOCTYPE html>
<HTML lang="ja-JP">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>Test Page Jun/28/2020</title>
</HEAD>

<BODY>
<H1>テスト / Test Page</H1>

<hr/>

<H2>テスト</H2>

<blockquote>
	Hello<p />
</blockquote>

<H2>おはようございます。</H2>

<a href="test02/">こんにちは</a><p />

<a href="test03/">今晩は</a><p />

<a href="test04/">さようなら</a><p />

<hr />
Jun/28/2020 AM 09:21<p />
</BODY>
</HTML>
```

変換方法

```bash
nkf -e u01.htm > f01.htm
```

u01.htm をブラウザーで見た場合
![u01_jun28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/22bbeba6-b479-0c59-ad14-74f00b8039dd.png)

f01.htm に対して、シンボリックリンクを張った場合


```bash
ln -s f01.htm f01.html
```

![f01_html_jun28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b0ebe9a8-8d42-e55c-3a83-c5bfcbfe4860.png)

ページ情報
![info_f01_html_jun28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7673055e-adde-581d-8f36-8a9000ca28d5.png)


 文字化けしている時の応答ヘッダー
![header_jun28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/6b75ae46-89bb-36d7-b8f8-ec6e21b951c5.png)

問題の解決方法
サーバーで、/etc/php/7.3/apache2/php.ini を修正します。


```text:/etc/php/7.3/apache2/php.ini
（省略）
;default_charset = "UTF-8"
default_charset = "EUC-JP"
（省略）
```
Laravelでユーザー情報画面のアクセス制限を実装~Middlewareの活用~

##はじめに
LaravelのMiddlewareを活用して、カート画面のような、ユーザー情報画面へのアクセス制限を実装していきます。


##ユーザー情報画面のアクセス制限とは
ユーザー情報画面など、ログインユーザー自身だけが閲覧できるページです。
例えば、カート画面は、カート作成者とログインユーザーが一致した場合のみアクセス可能になります。

カートを作成したAさんのページは、Aさんのみが見れるようにする制御を実装していきます。
Aさんのページを、Aさん以外がアクセスした場合は、特定のページにリダイレクトさせます。


##実行環境
Laravel 5.5


##目次
 -Middlewareとは
 -実装コード＆解説

##Middlewareとは

>ミドルウェアを把握する一番良い方法は、HTTPリクエストがアプリケーションに届くまでに通過する、数々の「レイヤー（層）」なのだと考えることです。それぞれのレイヤーは、リクエストを通過させるかどうかテストし、場合により完全に破棄することさえできます。

[公式 ミドルウェア](https://readouble.com/laravel/5.7/ja/middleware.html)より

こちらも、参考になると思います。

[Laravelのミドルウェアの実施順検証と小技](https://qiita.com/niisan-tokyo/items/663300f8df1c6c89f0ae)

##実装コード＆解説


今回作成するミドルウェアは、LoginUserCheckとします。

###1.middlewareを作成


ターミナル上で、下記コマンドを実行します。

```
$ php artisan make:middleware LoginUserCheck
```

app/Http/Middleware/LoginUserCheck.phpが作成されます。


###2.LoginUserCheck.phpに処理を記述


```php:LoginUserCheck.php

<?php
 
namespace App\Http\Middleware;
 
use Closure;
use Illuminate\Support\Facades\Auth;
 
class LoginUserCheck
{
     /**
      * Handle an incoming request.
      *
      * @param  \Illuminate\Http\Request  $request
      * @param  \Closure  $next
      * @return mixed
      */
      public function handle($request, Closure $next) {

         //ログインユーザーIDを取得
         $loginId = Auth::id();
         //カート情報のユーザーIDを取得
         $requestId = $request->user_id;
 
         //ログイン者とカート情報作成者が一致しなければ別のページにリダイレクト
         if ($loginId != $requestId) {
            return redirect(route('home'));
         }
 
      //チェックに合格し次の処理に進むことができる
      return $next($request);
      }
}
```


###3.ミドルウェアの登録


app/Http/Kernel.phpでミドルウエアの登録を行います。

```php:app/Http/Kernel.php

<?php

namespacenamespace App\Http;
 
use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{

//~~中略~~

   protected $middlewareGroups = [
      'web' => [
         //~~中略~~
      ],

      'api' => [
         //~~中略~~
      ],
      
      //ここから追記箇所
      'loginUserCheck' => [        
          \App\Http\Middleware\LoginUserCheck::class,
      ],
      //ここまで
  ];
```


###4.Routeで名前指定


```php:route/web.php

Route::group(['middleware' => ['loginUserCheck']], function() {
  //ここに実行したい処理を記述
}
```

以上で、特定のページは、ログインユーザーと情報作成ユーザーが一致した場合のみ表示させることができるようになります。


##おわりに

ご覧いただきありがとうございました。
修正箇所、ご指摘等ございましたらご意見いただけますと幸いです。
ある範囲内の整数にカプレカ数があるかRubyで調べてみた

# 背景

高校までは数学が一番得意で、大好きでした。
なのに文系の大学に入った私は数学とは縁遠い生活を送り
そして社会人になり早十年…
微積分も三角関数も忘れてしまった左脳だけ発達してる系エンジニアですが、
最近はYouTubeのおかげで数学に触れる機会が少しずつ増えました。
入試問題を解いたり、知られざる大学数学の世界を気軽に触れられるいい時代です。

本日は以下の動画で紹介されていた面白い性質を持った整数「**カプレカ数**」について
Rubyを使って検証していきます。

※元ネタ
[予備校のノリで学ぶ「大学の数学・物理」
最大から最小を引いて元通り！【カプレカ数】](https://youtu.be/GtKVrd-ap84)

# カプレカ数とは
> カプレカ数（カプレカすう、Kaprekar Number）とは、次のいずれかで定義される整数である。
1. 2乗して前の部分と後ろの部分に分けて和を取ったとき、元の値に等しくなるもの。
2. 桁を並べ替えて最大にしたものから最小にしたものの差を取ったとき、元の値に等しくなるもの。

> 引用元：[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%83%AC%E3%82%AB%E6%95%B0)

今回調べるのは定義2の方です。


例えば**495**を例に考えてみます。

495を並べ替えて作れる最大の数は954、最小の数は459です。
954 - 459 = 495ですから、元の数字**495**と等しくなりました！
面白いですね！

このような数字をカプレカ数といい、
我々が普段目にする桁数の数字では数えられるほどしかありません。

では本題のRubyプログラムに入っていきましょう。


# 任意の整数がカプレカ数かどうかを判定する

```kaprekar.rb
num = 627

# 配列に格納
arr = num.to_s.split('').map!(&:to_i)
p arr   # => [6, 2, 7]

# 並べ替えて最大と最小を作る
max = arr.sort{ |a, b| a <=> b }.join('').to_i
min = arr.sort{ |a, b| b <=> a }.join('').to_i
p max   # => 762
p min   # => 267

# 最大 - 最小が元の数字と同じかどうかの判定
diff = max - min
p diff == num   # => false
```

これで`num`を書き換えることで**任意の整数1つのみ**の判定を行えるようになりました。


# 特定の範囲の中にカプレカ数かどうかを判定する

ここから繰り返し処理を用いて**特定の範囲の中**にカプレカ数があるかどうかを探してみましょう。

```kaprekar.rb
result = []
num = 1
final = 1_000_000

while num < final do
  arr = num.to_s.split('').map!(&:to_i)
  min = arr.sort{ |a, b| a <=> b }.join('').to_i
  max = arr.sort{ |a, b| b <=> a }.join('').to_i
  diff = max - min

  if diff == num
    result.push("【#{num}】 #{max} - #{min} = #{diff}")
  end

  num += 1
end

if result.empty?
  result.push("該当なし")
end

puts result
```

（可読性重視で敢えて三項演算子は使っていません）

```:terminal
【495】 954 - 459 = 495
【6174】 7641 - 1467 = 6174
【549945】 995544 - 445599 = 549945
【631764】 766431 - 134667 = 631764
```
上記例では6桁の整数までで試したところ、4つのカプレカ数が見つかりました。
5桁には存在しないというのもまた不思議！

# 余談
PCのスペックにもよりますが、100万回も繰り返し処理したら結構時間かかります。

冒頭で紹介した495という数字を見て
495 = 99 × 5がすぐに思いついたあなたは数学的センスをお持ちですね。
そう、カプレカ数はどれも**9の倍数**です。

なので100万回やらなくても、9の倍数のみ検証すればもっと処理は軽減できます。



もっといい書き方がありましたらコメントで教えてください！

**(2020/06/29 追記)**
早速コメントをいただき改良版をコメント欄に投稿しました！
マウス「Logicool M546」の改造

# マウスが壊れたので、7ボタン搭載で安価な「Logicool M546」を購入しました

しかし購入前からわかっていたことですが、ホイールボタンの「抵抗感が小さい」。
（もちろん、これで良いんだ！という層もいると思うので批判する気は毛頭ない）

ただ、ウェブページをスクロールすると止めるタイミングでページが上下に震える...

Windows10では、ホイールボタンのスクロールする量が「1.0:1.0」までしか設定できず、「1.0:0.5」や「2.0:1.0」にできるようにはプログラミングされていませんでした。

そこでハードウエア側を調整してみました。
[人間] ⇔ [マウス(HW)] ⇔ [OS(SW)]

# 改造します(自己責任)

1) 該当箇所を「つまようじ」で押し上げてホイールボタンの抵抗感が変わることを確認しました。
![13837.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662099/268a772e-cc30-b025-c56f-5a7a75430dcd.jpeg)

2) 所望の結果が得られたので何を挟むか考えたけれど何もなかったので「つまようじ」のままにしました。
![13841.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662099/cf78068e-8964-66fc-c0e8-d686db8636cb.jpeg)
※ぱっと思いつくのは、絶縁ワッシャーなら手に入れやすそうなので良いかなと思いました。

・分解については以下の動画(Logicool M545)で予習しました。
[マウスホイールが上手く動かない！？マウスを分解・清掃してみた](https://www.youtube.com/watch?v=6XSxE8oNTfQ)


・ホイールボタン部分の仕組みは以下のサイトで予習しました。
[Logicool M545 のホイール回転とクリック感を調整してみた](http://laniusbucephalus.blog49.fc2.com/blog-entry-618.html)
※型番は545と546で異なるが製品は同じものらしいです。