OmniAICreator/Qiita-1.07M huggingface dataset:
【Unity】動画で見るLerp

Vector3のLerpを動画にしました。
Lerpをなんとなく使っている人に見ていただけると幸いです。
#動画
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">投稿用<br>Lerpサンプル <a href="https://t.co/WrcG27dAld">pic.twitter.com/WrcG27dAld</a></p>&mdash; TANUKEINA (@FH1b4mzzirXPoiM) <a href="https://twitter.com/FH1b4mzzirXPoiM/status/1305129524275736576?ref_src=twsrc%5Etfw">September 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
オブジェクトの色も線形補間(Color.Lerp)によって変化させています。
#Lerp(Vector3 a, Vector3 b, float t)
####引数
* Vector3 a :開始点
* Vector3 b :終了点
* **float t :二点の補間値**

二点間を**線形補間**するメソッド。
$y=f(x)$上の二点$(x_1,y_1),(x_2,y_2)$に対して、

```math
y = y_1 + \frac{y_1-y_2}{x_2-x_1}(x-x_1) 
```
で近似を行う。

二点の補間値**t**は以下の式となる。

```math
 t = \frac{x-x_1}{x_2-x_1}
```

すなわち、$y=f(x)$上の点$(x,y)$が、どのくらい終点に近づいているかを表している。
この辺は以下の記事に大変わかりやすい図が載っています。

[[Unity] Vector3.Lerpの使い方](https://qiita.com/aimy-07/items/ad0d99191da21c0adbc3)
#LerpExample

```cs:LerpExample.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LerpExample : MonoBehaviour
{
    //始点
    public Transform startMarker;
    //終点
    public Transform endMarker;
    //速度
    public float speed = 1.0f;

    //ColorLerpクラスのために非表示public
    //二点の補間値
    [System.NonSerialized]
    public float fractionOfJourney;

    private float startTime;

    private float distance;

    private void Start()
    {
        //動き出した時間
        startTime = Time.time;
        //二点間の距離
        distance = Vector3.Distance(startMarker.position, endMarker.position);
    }

    private void Update()
    {
        //移動距離 =　経過時間　*　速度
        float distCovered = (Time.time - startTime) * speed;

        //移動距離の割合 = 移動距離 /　二点間の距離
        fractionOfJourney = distCovered / distance;

        //線形補間による移動
        transform.position = Vector3.Lerp(startMarker.position, endMarker.position, fractionOfJourney);
    }
}

```
#ColorLerp

```cs:ColorLerp.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ColorLerp : MonoBehaviour
{
    private LerpExample lerpExample;
    
    private Material mat;

    private void Start()
    {
        //LerpExampleから補間値を取得
        mat = this.GetComponent<Renderer>().material;
        lerpExample = GetComponent<LerpExample>();
    }

    void Update()
    {
        //青色→赤色へLerpExampleと同じ補間値で推移
        mat.color = Color.Lerp(Color.blue, Color.red, lerpExample.fractionOfJourney);
    }
}

```

#まとめ

* Lerpは線形補間をするメソッド。
* 補間を行ってくれるので、これを使用すると動きが滑らかになる。
* 次回はSlerpの記事を書くつもり
ディープラーニングで似顔絵生成。WarpGANをiOSで使う。

似顔絵を生成できる[WarpGAN](https://github.com/seasonSH/WarpGAN)。

<div align="center">
<img width="256" alt="スクリーンショット 2020-08-13 22.38.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/0e1a17af-ab4f-c67f-7ad2-ebd951c137f2.png">
</div>
![スクリーンショット 2020-09-14 20.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/1ada8c64-e3e8-a361-330d-142afd0110a3.png)

Core MLに変換すれば、Image Picker Controllerなどから画像を入力するだけで似顔絵が生成できます。
CoreMLTools4.0になって変換できるようになりました（tfcoremlでは変換できなかった）。
**[変換済みCore ML モデル](https://github.com/john-rocky/CoreML-Models)**

１、グラフをpbtxt形式にする。

```python:warpgan.py
tf.io.write_graph(self.sess.graph_def, '', 'warpgan.pbtxt')
```

*allow_pickleを設定する必要がありました

```python:detect_face.py
data_dict = np.load(data_path, encoding='latin1',allow_pickle=True).item()
```

２、チェックポイントから凍結グラフを作る。

```python
from tensorflow.python.tools.freeze_graph import freeze_graph

graph_def_file = 'warpgan.pbtxt'
checkpoint_file = 'warpgan_pretrained/ckpt-100000'
frozen_model_file = './frozen_model.pb'
output_node_names = 'Decoder/Decoder/images_rendered'

freeze_graph(input_graph=graph_def_file,
             input_saver="",
             input_binary=False,
             input_checkpoint=checkpoint_file,
             output_node_names=output_node_names,
             restore_op_name="save/restore_all",
             filename_tensor_name="save/Const:0",
             output_graph=frozen_model_file,
             clear_devices=True,
             initializer_nodes="")
```

3、coremltoolsで変換する。

```python
import coremltools as ct
image_input = ct.ImageType(shape=(1, 256, 256, 3,),
                             scale=2/255,bias=[-1,-1,-1])

coreml_model = ct.convert(
        "frozen_model.pb",
        inputs=[image_input],
        )
coreml_model.save("warpgan.mlmodel")
```

Visionで顔まわりでクロップしてからモデルにかけると綺麗に変換できます。

![result_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/ab9b3d8f-ceb7-6dd9-71c7-afa9fbf3a646.jpeg)

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[MLBoysチャンネル]
(https://www.youtube.com/channel/UCbHff-wfjTnB3rtXIP6y0xg)
[Medium](https://medium.com/@rockyshikoku)

[相棒](https://twitter.com/oka_yuuji)
[note](https://note.com/oka_yuuji)
Web Design & Development Service

We are a result driven company with over 6 years of experience making professional website, doing SEO & Optimizing and powerful designs. Irrespective of the size of a project, from an early stage, we have gone all out to deliver quality work keeping results paramount. We always use  latest and best methods and technology to optimize and build websites. We create personalized strategies and take a dedicated hands on approach to each project that we work on. And we deliver exceptional results with 100 % client’s satisfaction every time!

We walk through the whole process with our clients so to make them satisfied and run the project successfully. Our clients remain clients for decades because we offer them the long-term support, experience-honed guidance, and supportive technological infrastructure that they need to propel their business into uncharted territories rich with hidden value. We lay the foundation for years of sustainable growth.
https://webdesignerxx.online/
一部分が重複している２つの配列の、差分を取得する（JavaScript)

###一部分が重複している配列の差分を取得します（JavaScript)

```javascript:sample.rb

function arr_diff (a1, a2) {

    var a = [], diff = [];

    for (var i = 0; i < a1.length; i++) {
        a[a1[i]] = true;
    }

    for (var i = 0; i < a2.length; i++) {
        if (a[a2[i]]) {
            delete a[a2[i]];
        } else {
            a[a2[i]] = true;
        }
    }

    for (var k in a) {
        diff.push(k);
    }

    return diff;
}

console.log(arr_diff(['a', 'b'], ['a', 'b', 'c', 'd']));
console.log(arr_diff("abcd", "abcde"));
console.log(arr_diff("zxc", "zxc"));
```

引用元では他の方法も記載されているようでした。

__引用元__
https://stackoverflow.com/questions/1187518/how-to-get-the-difference-between-two-arrays-in-javascript
PhpStorm（Windows）にCodeSnifferを追加してPSR-12のチェックをしたい

# 目的
PhpStormでPSR-12に準拠したコーディング規約のチェックを行いたい。

# 前提条件
- Windows環境
- PHP導入済（XAMPP）
- Composer導入済

# 設定手順
## ComposerでCodeSnifferをインストール

   ```bash
   $ composer global require squizlabs/php_codesniffer
   
   # インストールができたらバージョン情報を表示して動作するか確認
   $ phpcs --version
   PHP_CodeSniffer version 〇.〇.〇 (stable) by Squiz (http://www.squiz.net)
   ```
## PhpStomの設定を変更
1. PhpStomの[ファイル] -> [設定] を開く
2. [言語 & フレームワーク] -> [PHP] -> [品質ツール] -> [PHP_CodeSniffer]を開く。
![ss1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604718/febfaceb-e608-8d9d-bab6-de494551adfa.png)

3. [...]ボタンをクリックし、[PHP_CodeSniffer path] に```phpcs.bat```と入力。
4. [検証]ボタンを押して
    ```OK, PHP_CodeSniffer version 〇.〇.〇 (stable) by Squiz (http://www.squiz.net)```
と出るか確認。
![ss2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604718/80d8a4a3-4be7-f9a3-8433-4f8267d0ed14.png)
5. [エディター] -> [インスペクション] -> [品質ツール] -> [PHP_CodeSniffer validation]を開く。

6. [Coding standard]に「PSR12」を選択する。
![ss3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604718/f5b6c585-8467-37c0-c2a0-ba5ec4608e91.png)


7. [OK]ボタンを押して完了
AWS ルートテーブルについて

**AWS基礎_2**
[基礎_1に戻る](https://qiita.com/gen10717913/items/ed2a6efd3c66b57c03e3)


##ルートテーブル
・サブネットに関連づけて使用
・サブネットから外に出る通信を
　どこに向けて発信するかルール、定義
・ルートと呼ばれるルールで構成される
・もっとも明確なルールが優先されて適用

|送信先|ターゲット|
|:----:|:----:|
|10.0.0.0/21|local|


※上記localルートはルートテーブルにデフォルトに設定せれており削除できない。





|送信先|ターゲット|
|:--:|:--:|
|10.0.0.0/21|local|
|0.0.0.0/0|インターネット|
※上記はインターネットに向かうルートを設定した場合

ルートテーブルはどのIPアドレスの範囲をどの方向に向けるかは設定するもの


**Internet gateway**
---
VP内のAWSリソースとインターネットを繋げる
自働でスケールし、可用性が高い
サブネットのルートテーブルを設定し使用する


EC2インスタンスをインターネットと繋ぐにはルートテーブルに設定を追加する


|送信先|ターゲット|
|:---:|:---:|
|10.0.0.0/21|local|
|0.0.0.0/0|Internet gateway|

サブネット内にあるAWSリソースはEC2インスタンスのVPC内部の通信はlocalルートによってVPC内部に通信が飛び、それ以外の通信はinternetgatewayに向く。

Private subnetからネットワークに繋ぐにはどうするのか？

##NAT gateway
Privatesubnetからインターネット接続を可能する
アウトバウンドはできるが、インバウンドはできない

発信はできるが、外からの受信はできない。
PrivatesubnetのEC2にログインするにはPublicsubnetにログインしそこからPrivatesubnetにログインしなければならない。


##ENI（Elastic network interface）
仮想ネットワークインターフェース
EC2インスタンスのIPアドレスはENIに付与される
同じAZ内のインスタンスにアタッチ/デタッチできる
インスタンスに複数のENIをアタッチできる

このENIとインターネットゲートウェイが繋がる事によってインターネット接続する

外部IPアドレスが必要になってくる。


##Public IP address
AWSのIPアドレスプールより割り当てられる

インスタンスが再起動、停止、終了した場合このアドレスは解放される。


##Elastic IP address
インスタンスにアタッチ/デタッチ可能で静的なパブリックIPアドレス

インスタンスが再起動、停止、終了しても同じアドレス



##セキュリティグループ
AWSの仮想ファイアーウォールサービス

IPアドレスの範囲または、セキュリティグループとどのポートを許可するのかを設定する。
インバウンドルール（受信）とアウトバウンドルール（送信）が設定できる。
セキュリティーグループ単位で設定可能。




##Network ACL
サブネット単位で設定するファイアーウォール
セキュリティグループで対策し、対策仕切れない所を補助する感じ。

許可するIPアドレスの範囲とポートのみを指定する。
サブネットはNetwrokACLを一つしか持つ事が出来ません。
サブネットに所属するインスタンス、コンポーネント全てにルールが適応される。

[詳しくは公式サイトへ](
https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/vpc-network-acls.html)
配列の重複削除（バニラJS）

###生JavaScriptを使って配列から重複を削除する

```javascript:qiita.rb
var fruits  = ['りんご', 'バナナ', 'りんご', 'バナナ', 'パイナップル', 'スイカ', 'りんご', 'バナナ'];
var deduped = Array.from(new Set(fruits));

console.log(deduped);  // -> ["りんご", "バナナ", "パイナップル", "スイカ"]
```

**引用元**
https://gomakethings.com/removing-duplicates-from-an-array-with-the-vanilla-js-set-object/
GMOペイメントゲートウェイで全角文字を送信したい

# 罠にハマって苦しんだのでメモ


```memo.php
// コンストラクタインジェクションでGuzzle Clientを設定とか、色々とな処理

        $params =  [
            // いろいろな設定が必要です。
            'gmoPaymentGatewaySomeItem1'     => '日本語ひらがな・カタカナを入れたい',
            'gmoPaymentGatewaySomeItem2'     => '日本語ひらがな・カタカナを入れたい',
        ];

        mb_convert_variables('Shift_JIS', 'UTF-8', $params);

        $response = $this->client->request(
            'POST',
            'https://gmo-payment.hogehoge/some/endpoint.extention',
            [
                'form_params' => $params,
            ]
        );


// 処理が続く
```
Django + Docker でImageFieldを反映させる方法(pillow)

#はじめに
今回の記事では、僕が実際に「ImageField」の反映の際に悩まされたエラーについて解決方法を通して書いていきたいと思います。

#kadaikun.Image.image: (fields.E210) Cannot use ImageField because Pillow is not installed.HINT: Get Pillow at https://pypi.org/project/Pillow/ or run command "pip install Pillow"
最初はこのエラーで悩まされていました。
pillowをインストールしたのに、インストールされていないと言われ「？」状態でした。
とりあえず次のコマンドで対処を試みました。

```terminal:terminal
$ python3 -m pip uninstall pillow

$ python3 -m pip install pillow
```
そしてマイグレイトしました。

```terminal:terminal
$ python manage.py migrate
```
結果...

```terminal:terminal
kadaikun.Image.image: (fields.E210) Cannot use ImageField because Pillow is not installed.
        HINT: Get Pillow at https://pypi.org/project/Pillow/ or run command "pip install Pillow"
```
ダメでした...。

このときに自分がDockerを使っていることに気がつきました...。

Dockerは今回が使うのは初めてだったので、「Dockerfile」とか「requirementes.txt」あたりを変更させればいいのかなくらいしかわかっていませんでした。

そのためググりにググって出てきたものは片っ端からDockerfileに書き込んで、「docker-compose up」をひたすら繰り返していました。

#/bin/sh: 1: apk: not found

繰り返した結果...

```terminal:terminal
/bin/sh: 1: apk: not found
```
とエラーが出るだけで、全く解決しませんでした。

そんな中ついに解決しそうな記事を見つけました。

それがこの記事です。
[Docker+djangoで詰まった所
](https://note.com/hamigakitanuki/n/n2c66200a8c66)

この記事のようにDockerfileに

```Dockerfile:Dockerfile
RUN pip install pillow
```
と記入し、「equirementes.txt」に、

```equirementes.txt:equirementes.txt
Pillow==7.2.0
```
と記入します。

そしてターミナルに次のように打ち込みます。

```terminal:terminal
$ python manage.py makemigrations

$ python manage.py migrate

$ docker-compose up
```
これで完了！と言いたいところなのですが、ブラウザを開いたときにエラーが出ました...。

#OperationalError
エラーが出たものの、この対処法は簡単でした。

```terminal:terminal
$ rm -d -r db.sqlite3
$ rm -d -r app/migrations/*
$ python manage.py migrate
```
これでOKです！

最後に

```terminal:terminal
$ docker-compose up
```
と打ち込むときれいに反映されているはずです。

ちなみに参考にした記事はこちらです。

[webページを開くと django.db.utils.OperationalError: no such column: app_action.author_idエラー
](https://teratail.com/questions/87239)

#最後に
今回は僕が体験したエラーについて書いていきました。
Djnagoについての記事もこれから上げていくので、参考になれば幸いです。
【Nginxエラー解決】Job for nginx.service failed because the control process exited with error code.

# 問題

Nginxを起動する以下のコマンドを叩いたら、

```
$ sudo service nginx start
```
以下のエラーが出ました。

```
Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details.
```
制御プロセスがエラーコードで終了したため、nginx.serviceのジョブが失敗しました。詳細については、「systemctl status nginx.service」および「journalctl -xe」を参照してください。

とのこと。

# 解決法
こちらの記事（[Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details.などのnginx周りのファイルのエラーを知るコマンド](https://qiita.com/shota0701nemoto/items/a6929ef6f396cf3bede4)）で教えてもらったのですが、

```
$ sudo nginx -t
```
これで何が問題なのかが表示されました。

```
nginx: [emerg] unknown directive "(#アプリのElastic" in /etc/nginx/conf.d/pfc-master.conf:14
nginx: configuration file /etc/nginx/nginx.conf test failed
```
/etc/nginx/conf.d/pfc-master.confファイルに誤りがあるようです。

修正する誤りの内容は違いますが、/etc/nginx/conf.d/pfc-master.confファイルを修正すればいいんだということは、この記事のおかげでわかりました。
[nginxの接続で「nginx: [emerg] unknown directive "　"」が表示された時の対処法]
(https://qiita.com/Takao_/items/6481f1a783423dce596c)  

vimで/etc/nginx/conf.d/pfc-master.confファイルを開きます。

```
$ sudo vim /etc/nginx/conf.d/pfc-master.conf
※pfc-masterはアプリケーション名です
```
ここが間違ってました↓

```
server {
  server_name 11.111.11.11;(#アプリのElastic IPに変更してください)
}
```
こちらの記事にそって進めていて、
[(デプロイ編②)世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで](https://qiita.com/naoki_mochizuki/items/5a1757d222806cbe0cd1#mysql%E3%81%AE%E8%A8%AD%E5%AE%9A)
コピペした時に本来消すべきところが消えずに残ったままになっていたのが原因でした。  
(#アプリのElastic IPに変更してください)という箇所を消して

```
server_name 11.111.11.11;
```
に修正したら解決しました。

# ちなみに
```
Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details.
```
このエラー言われたこと（詳細については、「systemctl status nginx.service」および「journalctl -xe」を参照してください。）をそのまま実行しただけでは解決しませんでした。
```

実際にエラーに言われたとおり

```
$ systemctl status nginx.service
```
と叩いてsystemctl status nginx.serviceを参照しましたが、

```
● nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: failed (Result: exit-code) since 月 2020-09-14 10:34:31 UTC; 11min ago
  Process: 15185 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=1/FAILURE)
  Process: 15184 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
```
と表示されるだけで、解決すべき修正点は教えてもらえませんでした。


```
nginx: [emerg] unknown directive "(#アプリのElastic" in /etc/nginx/conf.d/pfc-master.conf:14
nginx: configuration file /etc/nginx/nginx.conf test failed
```

# 今回学んだこと

- 必ずしもエラーに言われたことをそのままやっただけでは解決できないこともある。やっぱりエラー文でググってみることは大切。
- 参考記事をコピペする時はコピペしちゃいけないところコピペしたりしてないか、しっかり確認することが必要。
ほどほどに光る大人なVR READYの自作PC

コロナで自宅にいらっしゃる皆様いかがお過ごしでしょうか？
ほどほどに光る大人な自作PCを作って過ごしてみた的な、長めの所感です。
お得に買うポイントも書いてみたので、お役に立てば幸いです。
ちなみに VR READY です。

# 完成品
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/fd6a18f3-90fa-3eb6-c2e6-44eed1bdba6f.jpeg" width="512" />
※一番下に明るい状態の一枚もあるのであそちらを参照ください。

# コスト
合計金額はポイント間引いて15.6万円（税込）ぐらいです。

パーツ名                                                   | 価格
----------------------------------------------------------|---------------------
AMD Ryzen 7 3700X BOX Wraith Prism Cooler付属              | セット
ASUS TUF B450-PLUS GAMING（CPUとセットで）                  | 51000円
G.SKILL LF4-3200C16D-32GTZR [2枚組]                        | 16000円
NZXT H510 Elite CA-H510E-B1   　                          | 16000円
玄人志向 AMD Radeon RX5700XT RD-RX5700XT-E8GB/DF           | 46000円
Western Digital WD BLUE 3D NAND SN550 NVMe WDS100T2B0C    | セット
Microsoft Windows DSP版（M.2 とセットで）                  | 26000円
TOUGHPOWER GX1 RGB GOLD 700W                              | 7500円
楽天ポイント                                               | -7000円

# お得に購入するポイント
* セットで買えるものは、セットで買う
  * CPUとマザボ、あるいはCPU、マザボ、メモリのセットがあったりする
  * Ryzen ならファン付きBOXがある
  * Windows OS は何かのパーツと一緒に購入すると DSP版（比較的安い）が買える
  * メモリも二枚セットがある
  * 今回のケースは4枚ファン、しかも内2つはLED付きのセット
* 楽天のお買い物マラソンみたいなキャンペーンにかぶせる

# 大人に光らせるポイント
* NZXT H501 Elite
  *  このケースがスモークガラスなので、これで直接LEDがギラギラするのが防げる
* 乳白色のプラスチック製パーツ
  * メモリも前面のファンも直接光るLEDではなく、カバーが付いている

# しくじりポイント
* ネット通販あるあるではないが、ケースが思ったよりでかかった・・・
* 電源も光るのだが、ケースの仕様上逆さまにしかつけれないため、ケースの下を照らすことに・・・
* マザボ（というかCPU）にモニタ出力機能がないことを知らずに、うまくいかないなと3時間ぐらいロスした・・・
* ファンのコネクタの挿し口が複数あるが、本当の正解は1個だけ・・・
  * 正常に動作するが、BIOS 画面でError と言われる気持ち悪さ

# 参考
明るい部屋だとこんなものなので光っていることは強く気になりません。
普通にキレイだなって感じで過ごせるレベルになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/6134eefb-bbca-0177-79cc-9dd88e0d36d5.jpeg" width="512" />
【Java開発】第1回 変数

#はじめに

皆さん。こんにちは！

DreamHanksの254cmです。

今回は変数について説明させていただきます。

Java記事のまとめは[こちら](https://qiita.com/DreamHanks/items/6b1996e1f8ed66bbd456)です。

前回の記事は[【Java開発】JAVA開発のための環境構築 - 3](https://qiita.com/DreamHanks/items/09044abec21c16762f9e)です

##変数

プログラムを作成する際、プログラムの動作に必要なデータを保存する必要があります。

Javaではそういうデータをメモリーに保存します。

変数はデータが保存された空間に名前を付けたものです。

変数を変数と呼ぶ理由は保存されているデータが処理によって変わるのでです。

変数は一つのデータしか保存できません。

##変数の宣言と初期化

Javaで変数を使うためには「**変数の宣言**」と「**変数の初期化**」を行う必要があります。

###・宣言

**宣言**はプログラム上で使用したい変数をプログラムに知らせることです。

プログラムは宣言された変数のみを制御することができます。

###・宣言の方法および構造

![添付1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/458d1ba7-7450-defc-503b-53594242d34f.png)

変数を宣言するためにはデータ型①と変数名②を作成する必要があります。順に説明すると

* データ型：入力されるデータの種類を決定するもの
* 変数名：変数の名前。重複禁止。

以上になります。

###・初期化の方法

初期化は宣言したばかりの変数にデータを保存させる動作です。

初期化する方法は下記のような2種類の方法が存在します。

* 宣言と初期化を別の列で行う方法

```java
int value;

value = 10;
```

* 宣言と初期化を同じ列で行う方法

```java

int result = 5;
```
上記の方法の中でどんな方法を使っても構いません。

※数学では'='の意味が同じだという意味で使われますが、プログラミングでは代入の意味で使われます。なので、int result = 5 というコードの意味はint型のresult変数に5を代入するっていう意味です。

##Java言語のデータ型

Java言語のデータ型は8種類の基本型と参照型で構成されています。

###・基本型
基本型は以下の表のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/daa74d53-cea9-27d6-1c66-6ed1e7fbfd79.png)

各データ型を簡単に説明すると、														

* 整数型：byte,short,int,long
* 浮動小数点型：float, double
* 文字型：char
* 論理型：boolean

になります。今のところではこれまで分かるとOKです。

今後の記事でもっと詳しく扱います。

###・参照型

参照型は基本型8種類を除くすべてのデータ型です。

参照型の変数はデータをそのまま保存していなく、データを保管しているメモリーのアドレスのみを保存しています。

つまり、参照型の変数はデータを他の領域に保存していてそのアドレスのみを利用します。

#終わりに

今回の記事は以上になります。

次回はJavaの[演算子](https://qiita.com/DreamHanks/items/44bc9c06dc355f9ce60c)を学びましょう。

私たちの最新の記事は[こちら](http://blog.dreamhanks.com/java%e5%85%a5%e9%96%80%e8%ac%9b%e5%ba%a7/)で確認することができます。

見てくださりありがとうございます。
【macOS】Virtual BoxにCent OSのインストール後、起動させるとクラッシュする問題

仮想環境の構築に死ぬ程ハマったので、備忘録として書きます。

・環境
macOS catalina Ver10.15.6

Virtual Box 6.1.14

CentOS-8.2.2004-x86_64-dvd1.isoをインストールしようとした。

・状況
OSインストール後の再起動で、Virtual Box VMがクラッシュ。
その後起動しようとしても同様にクラッシュ。

結論:Virtual Boxを6.0.14にダウングレードしたら起動できた

<a href="https://www.udemy.com/share/102dIuAEITcVZWTXUB/" style="text-decoration: none;">もう怖くないLinuxコマンド。手を動かしながらLinuxコマンドラインを5日間で身に付けよう</a>

山浦先生のLinux講座を学ぶために環境構築しようとしたところ、何をやってもクラッシュした。

ダウングレードしてようやく成功したので、

・設定→ディスプレイ→グラフィックコントローラをVboxVGAに
・設定→ストレージ→光学ドライブアイコンクリック→仮想ドライブからディスクを消去
![スクリーンショット 2020-09-14 19.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709031/2a752ca6-b30d-69d0-d2d1-6311a80fc1e3.png)

でやっと起動。

・試した事
仮想メモリ1024B→2048B　×
<a href="https://qiita.com/4EAE_Learner/items/01cd1a63aa7f5022c7d4" title="ブートメディアの順番変更" rel="noopener noreferrer" target="_blank">ブートメディアの順番変更</a>　×
<a href="https://haloechoes.com/server-operations/home-server/install-centos-on-virtual-machine/" title="仮想マシンにCentOSをインストールする" rel="noopener noreferrer" target="_blank">仮想マシンにCentOSをインストールする</a>　×
<a href="https://qiita.com/KANTU/items/0cf39aacdecc48cda4e2" title="実機のメモリクリア">実機のメモリクリア</a>　×
<a href="https://qiita.com/yoshi0518/items/41ec512ef04dd7f3dbed" title="VirtualBoxへCentOS7をインストール" rel="noopener noreferrer" target="_blank">VirtualBoxへCentOS7をインストール</a>　×
【Android】Kotlinで電卓作成 デザイン編

xmlで電卓の位置調整が難しいので、調べてみた。
&lt;LinearLayout
 android:orientation="vertical"&gt;

で縦方向を指定し、

&lt;LinearLayout
  android:orientation="horizontal"&gt;

で横方向を入れ子にして書いていくことで解決した。

デザイン部分ソースコード
https://github.com/CoffCookie/calcApp/blob/master/app/src/main/res/layout/activity_main.xml

全コード
https://github.com/CoffCookie/calcApp.git

プログラム編
https://qiita.com/clipbord/items/b0b4c55f15ea49452f30
Javaでページングしてるときのページの総数の求め方

たまに使うのでメモ。

全体の件数 / ページあたりの件数　を、小数点以下切り上げで、ページの総数が得られます。

やり方自体は色々ありますが、上のをそのまま実装するとこんな感じです。

```Java
        int totalSize = 30;
        double pageSize = 10.0;
        int totalPage = (int) Math.ceil(totalSize / pageSize);
        System.out.println(totalPage);
        >> 3  
```

```Java
        int totalSize = 35;
        double pageSize = 10.0;
        int totalPage = (int) Math.ceil(totalSize / pageSize);
        System.out.println(totalPage);
        >> 4  
```


```Java
        int totalSize = 40;
        double pageSize = 10.0;
        int totalPage = (int) Math.ceil(totalSize / pageSize);
        System.out.println(totalPage);
        >> 4  
```

```Java
        int totalSize = 41;
        double pageSize = 10.0;
        int totalPage = (int) Math.ceil(totalSize / pageSize);
        System.out.println(totalPage);
        >> 5  
```

`Math#ceil` が切り上げなのですが、割ったときに少数点がでるように、ページあたりの件数をdoubleで定義します。

返り値がdoubleですが、小数点以下はいらないので、intにキャストにします。
primitive型だと、non-nullが担保されますが、「Doubleの整数部分だけ取り出す」みたいなことはオブジェクトになっていないと、やや不自然になる印象。
Rails6で非同期処理を実装する際、コンソールでUncaught ReferenceError: $ is not definedというエラーが出た時の対処法

#はじめに
今回は私がオリジナルアプリの非同期処理のいいね機能を作成中にハマったエラーの解決方法を書かせて頂きます。
今回ご紹介するこちらの解決法は他に記事がなく（私が見つけられなかっただけかもしれませんが）、私自身かなり苦労しました。
なので、この記事がRails6での非同期処理の実装にお困りの方の助けになれば幸いです。


#バージョン
Rails６
(Rails5の方は対象外となります。）

#前提
JQueryの導入が完了していることを前提とします。

#エラー内容

```Console.
VM108:1 Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:13
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
```

このエラー文の内容としては
「`create.js.erb`に書いてあるJQueryのコードが読み込めませんよ」という内容です。

#解決法

JQueryを読み込ませるには`javascript/packs/application.js`に下記の記述をします。

```application.js
window.$ = $;
```
これでJQueryをグローバルに使用できるようになり、
`js.erb`ファイルでもJQueryを読み込むことができるようになります。

以上です。

いいね機能を作る際のコントローラやビューやルーティングのコードはたくさんの方が投稿してくれていますので
そちらをご覧いただければと思います。
AndroidStudioにOpenCV_ContribのArUco導入

AndroidでARマーカーを使ったアプリを作ることになり、OpenCV_ContribのArUcoを導入することに。
OpenCVとかArUcoについては別記事で書くかも。

###ダウンロード
OpenCV_ContribのAndroid版をダウンロードする。
※OpenCVのみだとArUcoがない & Android版じゃないとAndroidStudioでうまく動かないので注意
https://github.com/Mainvooid/opencv-android-sdk-with-contrib
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/86e3f70b-e0a6-de7c-5950-a17aea876f8b.png)
Download ZIPでダウンロードして、適当なところで解凍する。
私は以下に解凍した。（フォルダ名が重複しちゃってるけど面倒でそのまま）
C:\Program Files\opencv-android-sdk-with-contrib-master\opencv-android-sdk-with-contrib-master

###ArUcoをAndroidStudioに取り込む
・メニューバーからFile -> New -> Import Module
・Source directory: には解凍した先のパスを参照するように設定する
・Module name: にはなんのモジュールなのか分かりやすいように名前をつける（今回はopencvとした）
![AndroidStudio_OpenCV_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/0a6fb2cd-a595-cc1a-728e-47a1bf48e1f2.png)
画像は設定し終わった後なので押せないが、入力完了したら**Finish**を押す。
index構築で時間がかかるので終わるまで待機。

・メニューバーから File -> Project Structure
・Modulesにあるappを選択し、Dependenciesタブを表示
・右側にある+ボタンを押す
・3: Module dependencyを選択
・opencvを選択してOKを押す
![AndroidStudio_OpenCV_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/f35c17bc-04eb-24f4-6031-2b07dd6a7a8e.png)
上画面のようになってればOK。
VisualforceでCookieを利用する

## Cookieに登録
```java:登録
public void writeCookie(String key, String value) {
    Cookie c = new Cookie(key, value, null, -1, true);
    ApexPages.currentPage().setCookies(new List<Cookie>{c});
}
```

#### コンストラクタの引数
* `Cookie(name, value, path, maxAge, isSecure)`
    * `String name` ― Cookieの名前。
    * `String value` ― Cookieの値。
    * `String path` ― ブラウザがCookieを送信するURLのディレクトリ。
    * `Integer maxAge` ― Cookieの有効期限(秒)。負の値を設定するとブラウザが閉じるまで有効。0を設定するとCookieが削除される。
    * `Boolean isSecure` ― trueを設定するとHTTPSのみCookieにアクセスできる。
* `Cookie(name, value, path, maxAge, isSecure, sameSite)`
    * `String sameSite` ― クロスドメイン時の動作。有効な値は`None`、`Lax`、`Strict`。

#### 注意
* ブラウザに保存されるCookie名はプレフィックス`apex__`が追加される。


## Cookieを取得
```java:取得
public string getCookie(String key) {
    Cookie c = ApexPages.currentPage().getCookies().get(key);
    return c?.getValue();
}
```

#### 注意
* ApexのsetCookiesメソッドによって設定されたCookieのみ取得可能。
* setCookiesメソッドによって設定されたCookieはプレフィックス`apex__`が追加されるが、`getCookies`メソッドはプレフィックスなしの状態で取得される。


## Cookieを削除
```java:削除
public void removeCookie(String key) {
    Cookie c = new Cookie(key, '', null, 0, true);
    ApexPages.currentPage().setCookies(new List<Cookie>{c});
}
```


## 参考
* 公式リファレンス
    * [Cookieクラス | Apex開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_classes_sites_cookie.htm)
    * [getCookies() | Apex開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_System_PageReference_getCookies.htm)
* SameSiteについて
    * [Chrome 80 の変更への準備 | Salesforce Spring '20 リリースノート](https://releasenotes.docs.salesforce.com/ja-jp/spring20/release-notes/rn_general_chrome_samesite.htm)
    * [Google Chrome ブラウザリリース 80 | ヘルプ](https://help.salesforce.com/articleView?id=000351874&language=ja&mode=1&type=1)
* Salesforceプラットフォームで使用されるCookieについて
    * [Salesforce プラットフォームのセキュリティに関する FAQ | ヘルプ](https://help.salesforce.com/articleView?id=000318378&language=ja&type=1&mode=1)
メディアクエリメモ

# 指定例
## js で指定

```javascript
if (window.matchMedia( "(min-width: 400px)" ).matches) {
  /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
  /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}
```
[引用元：MDN window.matchMedia](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia)

## linkタグでcss読み込み時に指定
```html
<link rel="stylesheet" href="test.css" type="text/css" media="screen and (max-width: 64em)"/>
```

## css内で記述
```main.css
@media screen and (max-width: 64em) {
  html {
    background-color: cornsilk;
  }
}
```
`max-width`や`min-width`を指定する例が多い。
また、これらは`<=`や`>=`として扱われるため、指定した値を含む。

# 指定はem
Safariでの動作が違うようで、px指定はNG。em指定。
em指定の場合、`px/16=em`になる。

# テスト画面(codesandbox)
https://codesandbox.io/s/mediaquerytest-4pbmo?file=/src/styles.css

幅を適当に変えると色が変わります。


# CSS例
```main.css
.App {
  font-family: sans-serif;
  text-align: center;
}
/* タブレット 横は	パソコンと同じ and (orientation: portrait)*/
@media screen and (max-width: 64em) {
  html {
    background-color: cornsilk;
  }
}
/* */
@media screen and (max-width: 40em) {
  html {
    background-color: coral;
  }
}
/* 480px */
@media screen and (max-width: 30em) {
  html {
    background-color: aqua;
  }
}
/* 320px */
@media screen and (max-width: 20em) {
  html {
    background-color: blue;
  }
}

```
## モバイルファーストとデスクトップファースト
### モバイルファースト
モバイル向けのCSSを標準として扱う。
PC向けは、メディアクエリで制御する。

### デスクトップファースト
PC向けのCSSを標準で扱う。
モバイル向けのCSSをメディアクエリで制御する。

### 完全棲み分け
メディアクエリの配下でしかCSSを定義しない。とはいっても、レイアウトに関係しないところはメディアクエリの外で全く問題ないか。

# ブレークポイントの場合分け
2つか3つかに分けるのが精々だと思う。
タブレットを強く意識するなら、3つパターンだし、意識しないなら2つパターン。
3つは相当大変では・・・。

## 2つパターン
| デバイス | ブレークポイント |
|:--|:-:|
| <ul><li>PC</li><li>タブレット横</li></ul> | 896px<=<br/>(56em<=) |
| <ul><li>タブレット縦</li><li>スマホ横</li><li>スマホ縦</li></ul>  | <=896px <br/>(<=56em) |

## 3つパターン
| デバイス | ブレークポイント |
|:--|:-:|
| <ul><li>PC</li><li>タブレット横</li></ul> | 896px<=<br/>(56em<=) |
| <ul><li>タブレット縦</li><li>スマホ横</li></ul>  | 481px<=895px <br/>(30.0625em<=55.9375em) |
| <ul><li>スマホ縦</li></ul>  | <=481px <br/>(<=30.0625em) |
【2020年版】Flutterの環境構築をしてHelloWorldする

細か事は抜きにして**3ステップ**使って、iOSシミュレータで**Flutter**のHelloWorldをやってみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/3a1ac157-8739-7858-eab7-a8475aabc848.png" width=200 />
Android版はコチラ
[【2020年版】FlutterのHelloWorldをAndroidでやってみる - Qiita](https://qiita.com/ohbashunsuke/items/d2a823ca2fa819bffc23)


## ステップ1.Flutter SDKのインストール

[公式サイト](https://flutter.dev/docs/get-started/install)に沿って進めていきます。

いくつか方法が提供されていますが、gitでFlutterSDKをダウンロードします。

```sh
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1
```


## ステップ2.Flutterの開発環境を整える

FlutterSDKへのパスを通します。

```
export PATH="$PATH:【絶対パス】/flutter/bin"
```
僕はzshを使用しているので、`~/.zshrc`に以下のパスを追加してFlutterSDKへのパスを通します。
※パスが通っているかは`which flutter`で確認してください。何も出力されなければパスは通っていません

```
$ flutter precache
```
ちょっと時間がかかりますが、開発バイナリの事前キャッシュをします。
(公式に記載があるので実行しています)


## ステップ3.アプリ作成から実行

以下のコマンドでHelloworldという名のFlutterプロジェクトを作成し、カレントディレクトリをプロジェクトフォルダに移動させておきます。

```
$ flutter create Helloworld
$ cd Helloworld
```

### iOSシミュレータで実行

```
$ open -a Simulator
```
iOSシミュレータで実行するために以下のコマンドで事前にシミュレータを起動させておきます。

```
$ flutter run
```
runコマンドを実行し、シミュレータでFlutterアプリが起動します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/3a1ac157-8739-7858-eab7-a8475aabc848.png" width=200 />

特にトラブルなくアプリ実行できました。

## まとめ

今回は細かいことは抜きにして**動くことを最優先**でFlutterのHelloworldをやってみました。
僕は慣れているからという理由で今までゲームじゃないものもUnityで作ってたのですが、 **ゲームではないアプリケーションの開発手段の幅**をFlutterで広げてみようと思います。

最初気づかなかったのですが、**ホットリロードが出来る**ことを知ってイテレーションを早く回せて開発しやすそう！って思いました(始めたばかりだけど)。

## 環境

```
- macOS Catalina 10.15.5
- Flutter 1.20.3 • channel stable • https://github.com/flutter/flutter.git
- Framework • revision 216dee60c0 (11 days ago) • 2020-09-01 12:24:47 -0700
- Engine • revision d1bc06f032
- Tools • Dart 2.9.2
```
さくらvpsでnode.jsでSocket.ioする

##Node.jsインストール
[さくらVPSでNode.jsが動く環境を作ってみた - Qiita](https://qiita.com/Purindle/items/978d8403398e75018734)

```bash
curl -L git.io/nodebrew | perl - setup
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
nodebrew install-binary stable
nodebrew use stable
node -v
v14.10.1
```
##Socket.ioインストール
```bash
npm install socket.io
npm -v
6.14.8
```
##Node.jsでHTTPSサーバ（https://〜）
[node.jsによるHTTPSサーバの作り方 - Node.js/JavaScript入門 ](https://kaworu.jpn.org/javascript/node.js%E3%81%AB%E3%82%88%E3%82%8BHTTPS%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)

```javascript
var https = require('https');
var fs = require('fs');
var ssl_server_key = 'server_key.pem';
var ssl_server_crt = 'server_crt.pem';
var port = 8443;
 
var options = {
        key: fs.readFileSync(ssl_server_key),
        cert: fs.readFileSync(ssl_server_crt)
};
```
[Let's EncryptのSSL証明書などの場所 - nwtgck / Ryo Ota ](https://scrapbox.io/nwtgck/Let's_Encrypt%E3%81%AESSL%E8%A8%BC%E6%98%8E%E6%9B%B8%E3%81%AA%E3%81%A9%E3%81%AE%E5%A0%B4%E6%89%80)

```
証明書: /etc/letsencrypt/live/ドメイン名/fullchain.pem
秘密鍵: /etc/letsencrypt/live/ドメイン名/privkey.pem
```

※サーバを立ち上げるときは

```bash
sudo node saver
```
としないと証明書等が読み込めないので注意

##テスト用のコンテンツ
[Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモ - ICS MEDIA] (https://ics.media/entry/4320/)
ここのソースを丸ごといただいてごにょごにょと・・・

##サーバとクライントでポートが違う場合

```html
<script src="https://planet-ape.net:5000/socket.io/socket.io.js"></script>
```
　socket.io.jsを読み込むときにポート指定

```javascript
// サーバーに接続
//var socket = io.connect(location.origin);
var socket = io.connect("https://planet-ape.net:5000");
```

connectするときもポート指定

##foreverで起動したままにするときの注意
[foreverコマンドでNodeJSアプリを起動したままにする - Qiita] (https://qiita.com/h1y0r1n/items/a2cf8f2e8d3d31ccba49)
※suしてから実行しないとhttps://〜で動かないので注意（起動自体しない）

##ログの出力
console.log('ほげほげ')でも出力できるけど、もうちょいカッコよくしたい。
[【Node.js入門】ログ（logger）の管理を効率化するlog4js-nodeの使い方まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト] (https://www.sejuku.net/blog/82816)

lessでログを見てみる

```bash
ESC[36m[2020-10-08T14:53:32.388] [DEBUG] default - ESC[39m5000でサーバーが起動しました
error: Forever detected script was killed by signal: SIGKILL
error: Script restart attempt #4
ESC[36m[2020-10-08T15:00:47.169] [DEBUG] default - ESC[39m5000でサーバーが起動しました
ESC[32m[2020-10-08T15:01:09.671] [INFO] default - ESC[39m8082
error: Forever detected script was killed by signal: SIGKILL
error: Script restart attempt #5
ESC[36m[2020-10-08T15:11:11.267] [DEBUG] default - ESC[39m5000server start
```
・・・なんか、変な文字が・・・
[lessで制御文字を表示 | technote] (https://tech.withsin.net/2017/07/05/less-r/)

``` 
-r[enter]
```

```bash
[2020-10-08T14:53:32.388] [DEBUG] default - 5000でサーバーが起動しました
error: Forever detected script was killed by signal: SIGKILL
error: Script restart attempt #4
[2020-10-08T15:00:47.169] [DEBUG] default - 5000でサーバーが起動しました
[2020-10-08T15:01:09.671] [INFO] default - 8082
error: Forever detected script was killed by signal: SIGKILL
error: Script restart attempt #5
[2020-10-08T15:11:11.267] [DEBUG] default - 5000server start
```

消えた！！（色もついてご満悦です）
RaspberryPiでCO2測定


amazonで買ったわけじゃないけどモノはコレ。
https://www.amazon.co.jp/dp/B07JF4YTTB

ピンホールしかないので適当にぶった切って半田付け
https://www.amazon.co.jp/gp/product/B0785KPQZJ/

ピンアサインは以下
`4 -> Vin
6 -> Gnd
8 -> Vout
10 -> RXD`

#導入
適当にピンアサインを合わせて配線。

#インストール
pipでいけるが3が必要なので3を指定。

```
sudo pip3 install mh-z19
```

#出力準備
動作確認

```
sudo python -m mh_z19
```
数字だけ返ってくる。

#自動出力用スクリプト
スクリプトフォルダ作って。

```
cd /git
mkdir sh
```
スクリプトを作成。

```/git/sh/co2.sh
#!/bin/bash

#取得
aco2=`sudo python3 -m mh_z19 --all`

#出力
sudo echo ${aco2} > /tmp/tmpfs/co2.txt

#出力をapacheに移動
sudo cp /tmp/tmpfs/co2.txt /mnt/src/co2.txt
sudo chown pi:pi /mnt/src/co2.txt
```

#自動更新
5分もあれば十分だよね？

```:/etc/crontab:
*/5 * * * * root cd /git/sh; /git/sh/co2.sh > /dev/null
```
PostgreSQLで処理時間の長いクエリを実行中に「Broken pipe」になっても処理中か確認する方法

## まずは結論

```sql
SELECT
    procpid,
    start,
    now() - start AS lap,
    current_query
FROM
    (SELECT
        backendid,
        pg_stat_get_backend_pid(S.backendid) AS procpid,
        pg_stat_get_backend_activity_start(S.backendid) AS start,
        pg_stat_get_backend_activity(S.backendid) AS current_query
    FROM
        (SELECT pg_stat_get_backend_idset() AS backendid) AS S
    ) AS S
WHERE
    current_query = '{実行したクエリ}'
ORDER BY
    lap DESC;
```

## 背景
かなりデータ数が多いデータベースに `REINDEX DATABASE` をかけて完了を待っていたが途中で `Broken pipe` してしまった。
PostgreSQL12なら INDEXの進捗を `pg_stat_progress_create_index`ビューから確認できるが、 PostgreSQL10だったため確認できなかった。

## 補足
上記SQLのWHERE句を `current_query <> ''`とすれば全ての実行中のクエリが表示される。
また、進捗確認のためにを毎回SQLを叩くのが面倒な場合はシェル+cronで自動化すると楽。

・シェルスクリプトの例

```shell:output_process_log.sh
#!/bin/bash


export PGPASSWORD={postgresパスワード}

psql -h {db_host} -d {db} -U{user} -p{port} -c "SELECT procpid, start, now() - start AS lap, current_query FROM (SELECT backendid, pg_stat_get_backend_pid(S.backendid) AS procpid, pg_stat_get_backend_activity_start(S.backendid) AS start, pg_stat_get_backend_activity(S.backendid) AS current_query FROM (SELECT pg_stat_get_backend_idset() AS backendid) AS S ) AS S WHERE current_query <> '' ORDER BY lap DESC;" -A -F, >> {出力先}
```

・cronの例

```bash
*/1 * * * * sh {path}/output_process_log.sh
```
【python】listのスライス操作を秒で理解

#初めに
僕がスライスをどう読んでるかの解説になると思います。
初心者がサッサとスライス使いたいと思ったら読んで見てください。

「python　スライス　使い方」でググると、細かく書いてる記事ばっかりだったので、ざっくり書きます。

#解説
3点だけおさえれば大丈夫です。
###１. インデックスの理解
インデックスが文字と文字の間を指しており、最初の文字の左端が 0 になっていると考えましょう。

```python
 +---+---+---+---+---+---+
 | P | y | t | h | o | n |
 +---+---+---+---+---+---+
 0   1   2   3   4   5   6
-6  -5  -4  -3  -2  -1
```
###２. 指定の仕方は、”リスト名[から：まで：間隔]”

頭の中で、コメントのようにコードを読めます。

```python
>>> num_list = [1, 5, 2, 3, 4]
>>> num_list[1:4:1] #１番目「から」４番目「まで」を1「間隔」で選択 
[5, 2, 3]
```

###３.「：」が一つのときは「から:まで」の間の「：」

```python
>>> num_list = [1, 5, 2, 3, 4]
>>> num_list[-4:] # 後ろ4番目「から」選択
[5, 2, 3]
```

これでざっくりコードを読めます。

#練習
あとは、例を二点をおさえながら読んで見てください。
書き方を網羅できるはずです。

```python
>>> num_list = [1, 5, 2, 3, 4]
>>> num_list[:4:1] # 「から」を省略すると最初の要素から選択
[1, 5, 2, 3]
>>> num_list[1::1] # 「まで」を省略すると最後の要素まで選択
[5, 2, 3, 4]
>>> num_list[1:4:] # 「間隔」を省略することで1個間隔で選択
[5, 2, 3]
>>> num_list[1:4] # 「から：まで」の「：」（「間隔」を省略する場合は2つ目のコロンを省略可能）
[5, 2, 3]
>>> num_list[-4:] # 後ろ4番目から選択
[5, 2, 3, 4]
```

#終わりに
わかりにくかったらすみません。
Rubyの便利だと思ったメソッド

やっていて便利だと思ったメソッドをメモ書き。
※ 本当にただのメモです。

## 文字列の出現回数を数える
#### 一文字
`str = "aaabbbcccabc"
　str.count("a")
=> 4`
#### 複数文字
`str = "aaabbbcccabc"
　str.scan("ab")
=> [ab, ab]
　str.scan("ab").length
=> 2`

##　絶対値を取得
`num = 5
　num.abs
=> 5`
`num = (-5)
　num.abs
=> 5`

##　文字列の一部を置き換え
`str = "aabbcc"
　str.gsub("aa", "")
=> str = bbcc`
> aaを空文字に置き換え

## 文字列の一部を削除
#### 末尾から削除
`str = "aabbcc"
　str.chomp("cc")
=> aabb`

#### どこでも削除
`str = "aabbcc"
　str.delete("bb")
=> aacc`

## 大文字　⇄　小文字
`str = "abc"
　str.upcase
=> ABC
　str.downcase
=> abc`

##　配列
### 生成
`(1..5).to_a
=> [1, 2, 3, 4, 5]`

### 追加
#### 末尾
`array = ["a", "b", "c"]
　array.push("e");
array = ["a", "b", "c", "e"]`
#### 先頭
`array = ["a", "b", "c"]
　array.unshif("e");
array = ["e", "a", "b", "c"]`

### 削除
`array = ["a", "b", "c", "e"]
　array.delete("e")
array = ["a", "b", "c"]
　array[0,2] = []
array = ["c"]`
> 添字０から2つ削除

### 置き換え
`array = ["a", "b", "c"]
　array.map!{|x| x=="a" ? "z" : x}
=> ["z", "b", "c"]`

### 二つの配列の結合
`arrayX = [1, 2, 3]
　arrayY = ["a", "b", "c"]
　arrayX.concat(arrayY)
arrayX = [1, 2, 3, "a", "b", "c"]`

### 重複を削除
`array = [1, 1, 2, 2, 3, 3]
　array.uniq
=> [1, 2, 3]`

### 反転
`array = ["a", "b", "c"]
　array.reverse!
=> ["c", "b", "a"]`

## 文字列を一文字ずつ分割
`str = "abc"
　str.chars
=> ["a", "b", "c"]`
`num = 12345
　num.chars
=> [1, 2, 3, 4, 5]`

### 結合した文字列の作成
`array = ["a", "b", "c"]
　array.join
=> "abc"`
Chromebook で Common Lisp の学習環境を構築する

この記事では、Chromebook の Linux Crostina 環境に Common Lisp の学習環境を構築します。

[記事：「ChromebookにHomebrew（Linuxbrew）をインストールする」](https://chromebooker.net/topics/b6je3stmw5/) を参考にしました。

## Chromebook に Homebrew（Linuxbrew）をインストール

まず、Chromebook に Homebrew（Linuxbrew）をインストールします。

```bash
# 事前準備
sudo apt update
sudo apt-get install build-essential curl file git

# インストールする
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

# PATHを通す
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
```


## Roswell のインストールと起動

Common Lisp の処理系のインストールのため、また Common Lisp 製のライブラリをターミナルから利用しやすくするために、[Roswell](https://github.com/roswell/roswell) をインストールします。

```bash
brew install roswell
```

インストールが完了したら、Roswell で REPL を起動してみます。初回は、処理系 (SBCL) のインストールと Quicklisp 等のツール群がダウンロードされるので、少し時間がかかります。気長に待ちましょう。

```bash
padds1st@penguin:~$ ros run
Installing sbcl-bin...
No SBCL version specified. Downloading sbcl-bin_uri.tsv to see the available versions...
[##########################################################################]100%
Installing sbcl-bin/2.0.7...
Downloading https://github.com/roswell/sbcl_bin/releases/download/2.0.7/sbcl-2.0.7-x86-64-linux-binary.tar.bz2
[##########################################################################]100%
Extracting sbcl-bin-2.0.7-x86-64-linux.tar.bz2 to /home/padds1st/.roswell/src/sbcl-2.0.7-x86-64-linux/
Building sbcl-bin/2.0.7... Done.
Install Script for sbcl-bin...
Installing Quicklisp... Done 5633
Making core for Roswell...
* (+ 1 1)
2
* 
```

Roswell でインストールしたライブラリの ros コマンドがターミナルで利用できるように、PATH を通します。Common Lisp 製のライブラリを、curl や wget のようなコマンドのように利用することができるようになります。

```bash
echo 'export PATH="$HOME/.roswell/bin:$PATH"' >> ~/.bashrc
```

## エディタ/IDE のインストール

Lem をインストールします。

Crostina Linux のデフォルトに ncurses が入っていないので、ncurses のパッケージをインストールします。

```bash
sudo apt-get install libncurses5-dev libncursesw5-dev
```

Lem をインストールします。

```
ros install cxxxr/lem
```

Lem を起動します。

![Screenshot 2020-09-14 at 18.08.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292473/6e460157-a962-3524-5209-4c7a038753ee.png)


これで、Common Lisp の学習環境が構築できました。

今後、日本の小学校から高校まで、Chromebook が配布されていくようなので、教育現場で Common Lisp を学ぶ子どもが出てくるように、Chromebook での知見を深めていければと考えています。

それではまた会う日まで。
php-jwtで使用する秘密鍵・公開鍵の作成

## 目的
* php-jwt で使用できる鍵ペアの作成
* php-jwt で公開鍵認証


## 環境
* php 7.3
* composer
* [firebase/php-jwt](https://github.com/firebase/php-jwt)

## 秘密鍵の作成、公開鍵の作成
```bash
$ openssl genrsa -out id_rsa_jwt.pem 2048
$ openssl rsa -in id_rsa_jwt.pem -pubout > id_rsa_jwt.pub
```

### openssl genrsa の説明（秘密鍵を作成する）
|ワード  |意味  |
|---|---|
|openssl genrsa |RSA秘密鍵を作成|
|-out {file}|出力ファイルの指定|
|2048|暗号鍵の大きさを2048ビットに指定|

### openssl rsa の説明（秘密鍵から公開鍵を作成する）
|ワード  |意味  |
|---|---|
|openssl rsa |RSAキー管理|
|-in {file}|入力ファイルの指定|
|-pubout|公開鍵を出力|
|> {file}|リダイレクト|

## 実際の使用例（暗号化と復号）
事前に `composer require firebase/php-jwt` で `php-jwt` をインストールしておくこと。

```php:index.php
<?php

require_once('vendor/autoload.php');

use \Firebase\JWT\JWT;

$now = time();
$payload = [
    "iss" => "http://example.org",
    "aud" => "http://example.com",
    "iat" => $now, // issued at
    "nbf" => $now, // not before
    "exp" => ($now + (60 * 60 * 2)), // expire, 2時間
];

// 事前に作成した秘密鍵・公開鍵を読込
// テストなので同じ階層に鍵を置いているがもっとセキュアな場所に置くべき
$pte_key = file_get_contents('id_rsa_jwt.pem');
$pub_key = file_get_contents('id_rsa_jwt.pub');

// 暗号化
$jwt = JWT::encode($payload, $pte_key, 'RS256');
echo '<h1>encode pass!</h1>';

// 復号化
$decoded = JWT::decode($jwt, $pub_key, ['RS256']);
echo '<h1>decode pass!</h1>';

```

公開鍵を別のサーバーにコピーすれば、そのサーバーでも使用できるようになる想定。

## 参考
* [firebase/php-jwt](https://github.com/firebase/php-jwt)
* [Error using RS256](https://github.com/firebase/php-jwt/issues/98#issuecomment-269682383)
Sunaba講座 #1 Hello Sunaba!  ＆ メモリについて

## はじめに

sunabaの導入については、「[Sunaba講座 #0 導入編](https://qiita.com/gmasa/items/62ae871d1f017d4cc682)」をご覧ください。各講座へのリンクも貼ってあります。

## 課題00 Hello Sunaba!
1. まずはテキストエディタの準備です。Sunabaのプログラムはメモ帳でも作成できますが、オススメしません。私は背景が白いと眼が疲れます。好みはあるかと思いますが、ここでは[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)を推薦します。インストール方法と使い方は、丁寧に教えてくれるWebサイトがあるはずです。探しましょう。
1. 次に作業フォルダを用意します。デスクトップ等の好きな場所にフォルダを作成し『Sunaba_works』というフォルダ名にします。ここに課題ごとのプログラムファイルを格納していきます。
 - <details><summary>研修では…</summary><div>
   研修では『Sunaba_works_氏名』というフォルダ名にしてください。提出エリアに作業フォルダごとアップロードしてもらうことがあります（その都度指示します）
 </div></details>

1. 作業フォルダ内でテキストファイルを新規作成し、ファイル名を『Kadai00.txt』とする。
1. ファイルをダブルクリックして開く。
1. １行目に **memory[65050] -> 999999** と書いて上書き保存。
1. Sunaba.exe を実行してSunabaウィンドウを表示、そこに Kadai00.txt をドラッグ＆ドロップ。
1. 黒い表示画面中央に白い点が表示されたなら正常に動作されたことになります。

### memory[65050] -> 999999 の意味
memoryは記憶領域のメモリのことです。memory[`...`] の大かっこ内の数値は、メモリの番号を意味します。
入門書でメモリを箱に例えることが多いですが、Sunabaのメモリはダイヤルに例えます。
<font color=gray>**＜メモリのイメージ挿入予定＞**</font>
言葉で表現すると、上のプログラムは**『65050番のダイヤルを 999999 に合わせるよ』**という意味になります。
Sunabaにおいて、メモリをダイヤル式に例えているのは**『メモリは空っぽ状態にならないぞ』**と理解してもらうための比喩です。箱だと空っぽの状態がありえますから。**0（ゼロ）**は数字の一つであって空っぽではありません、注意しましょう。

これだけ書いておいて何ですが、私はメモリを箱に例えるしゃべることが多く、本講座でも**箱**と書くことがあるかもしれません。この辺は柔軟に受け止めてください。『メモリは**空っぽにならない箱**なんだろうねぇ』という感じで。


### メモリなのに画面表示？
メモリには種類があります。
0～39999番は一般的な記憶領域で、数値を記憶するだけ。***<font color = 'orange'>読み書き可</font>***です。ただし、39999番から遡るように作成したプログラム自体が格納される点に注意が必要です。（後述します）
60000～69999番は画面につながっています。各ダイヤルから信号線が出ていて、ディスプレイの画素に繋がっているイメージです。***<font color = 'orange'>書き込みのみ可</font>***、 ***<font color = 'red'>読み込み不可！</font>*** となります。以下、**画面メモリ**と呼びます。60000番台のメモリと画素との対応関係はSunaba早見.pdf(※)を参照してください。
　※ Sunaba早見.pdfは、Sunaba160413\文書フォルダ内にあります。

メモリは一度書き込んだ数値を保持します。もちろん、異なる値で上書きするまでです。ですから、画面メモリであれば格納した数値の色を『ずっと』表示します。色を変えたい時は違う数値を上書きすれば良いということになります。

---
次回は、[Sunaba講座 #2　複数行の実行 ＆ メモリメップド I / O について](https://qiita.com/gmasa/items/0d7cb7f1afb0709f1446) です。
ディクショナリ型１

#ディクショナリ型
ディクショナリ型
ディクショナリ型は、1組のデータを「キー」と呼ばれる識別子とそれに対応する「値」とともに管理するデータ型。
タプルは「 () 」カッコ、リストは「 [] 」大カッコで作成しますが、ディクショナリは「 {} 」波カッコを使用します
オブジェクトを作成するには以下のように記述します。

> hatamoto = {"kokugo":65,"suugaku":82,"eigo":70"}
次の要素との間は「 , 」で区切ります。
自分はSQLのテーブル操作の様な使い方だと認識しています。

dict()
> hatamoto = {"kokugo”:65,”suugaku”:82,”eigo”:70}
> print( hatamoto)

実行結果：
>   {"kokugo":65,"suugaku":82,"eigo":70"}

dict()を使ってコピーなどもできる。
> hatamoto = {"kokugo":65,"suugaku":82,"eigo":70"}
>hatamoto2 = dict(hatamoto)
>print(hatamoto2)

>{"kokugo”:65,”suugaku”:82,”eigo”:70}

同じキーとバリューのディクショナリが作成される。


 len()
Python のディクショナリはリストと同じように len で長さが確認できます。

> hatamoto = {"kokugo":65,"suugaku":82,"eigo":70"}
> len(hatamoto)

実行結果：
>3

update()

ディクショナリ.update(結合するディクショナリ)

>hatamoto = {"kokugo":65,"suugaku":82,"eigo":70"}
>hatamoto2 = {"rika":"90", "syakai":"51"} 
>hatamoto.update(hatamoto2)
 
>print(hatamoto)

実行結果：
{'kokugo':'65','suugaku':'82','eigo':70,'rika':'90','syakai':'51'}

新規キーを指定した場合は項目が追加され、既存のものを指定すると上書きされる。

キーを指定して要素を削除

>hatamoto = {"kokugo":65,"suugaku":82,"eigo":70"}

>del hatamoto['kokugo']
>print(hatamoto)

実行結果：
>{'suugaku':'82','eigo':'70'}

存在しないキーを指定すると「KeyError」が発生する。

keys()
すべてのキーを取得する
> hatamoto = {"kokugo":65,"suugaku":82,"eigo":70"}
> print(hatamoto.keys())

>dict_keys(['kokugo', 'suugaku', 'eigo'])
create-react-appでtsyringeを使う方法


「create-react-app」で作ったプロジェクトに「tsyringe」を導入する際に、
「TypeInfo not known for ~」というエラーが出てしまい、解決に苦戦してしまったので備忘録として残します。

## create-reacdt-appでプロジェクトを作成
``` zsh
$ npx create-react-app sample --template typescript
$ yarn add tsyringe reflect-metadata
```

``` tsconfig.json
{
  "compilerOptions": {
    ~
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  ~
}
```

## cracoでbabelプラグインを追加する
「create-react-app」そのままでは「tsyringe」は使用できないため、「craco」というパッケージを使いました。
これは「Create React App Configuration Override」の略で、babelの構成などを上書きできるパッケージです。

https://github.com/gsoft-inc/craco

```
yarn add -D babel-plugin-transform-typescript-metadata craco
```

``` package.json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}
```

``` craco.config.js
module.exports = function ({ env: _env }) {
  return {
    babel: {
      plugins: ["babel-plugin-transform-typescript-metadata"],
    },
  };
};
```
AndroidStudio導入

またAndroidアプリ開発をすることになったけど、導入方法をすっかり忘れてたので。
基本的にAndroidStudioがおすすめしてる指示の通りにボタン押してけばOK。

####ダウンロード
既存プロジェクトを読み込めるように最新ではなく過去のものを選択。（初めての人は最新選んでください）
Ver3.2.1　android-studio-ide-181.5056338-windows.exe
https://developer.android.com/studio/archive?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/99f80d33-9440-9c89-59d3-d3f395132e9a.png)

####インストール
![AndroidStrduio_Install_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/b77e6936-068a-dfa1-1ccd-f2ff066bc350.png)
**Next**を押す

![AndroidStrduio_Install_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/a23d9952-0359-1216-539c-43bcf06a9ae0.png)
**Android Virtual Device**にチェックいれて**Next**を押す

![AndroidStrduio_Install_3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/193cd427-63da-0810-96b6-6da16a70bfcb.png)
特に変更せずに**Next**を押す

![AndroidStrduio_Install_4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/fa672bb7-1e5e-b003-ab49-96182488b2cf.png)
特に変更せずに**Install**を押す
インストールが始まるので、Completedになったら**Next**を押す

![AndroidStrduio_Install_6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/d371970d-9299-a611-45d8-d747d52cfd44.png)
**Finish**を押してAndroidStudioを起動する

![AndroidStrduio_Install_7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/5730b0c4-c39e-dd82-c3ff-38e2fa170600.png)
**Do not import settings**を選択し**OK**を押す

![AndroidStrduio_Install_8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/5e3cc428-6e2f-cf7b-ea30-35371caa3d42.png)
**Next**を押す

![AndroidStrduio_Install_9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/98878ba6-adf6-c704-bbdd-a74daaa12860.png)
**Standard**を選択し**Next**を押す

![AndroidStrduio_Install_10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/43b1a63e-c980-36e5-2634-79319bd0c885.png)
暗いのか明るいのか、お好みで選択し**Next**を押す(あとで変更可能)

![AndroidStrduio_Install_12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342106/54750cbd-2d13-e016-e936-371d1cc58160.png)
**Finish**を押す

あとは既存プロジェクトか新規プロジェクトを開いてビルド通るか確認して、
足りないものがあったら追加していく。
人によってこの部分は異なるので今回は割愛。
（AndroidStudioが、「これ必要だよ」ってだいたい教えてくれるからそれに従えばうまくいくはず）