OmniAICreator/Qiita-1.07M huggingface dataset:
~ has been blocked by CORS policy: ~ の対処法 React Nestjs

Nest.jsで作ったAPIをReactからfetchしようとした時に
「CORSポリシーによってブロックされています」とエラーが表示されたので、その解決方法をメモします。

##エラー内容
```
Access to fetch at 'http://localhost:3000/item' from origin 'http://localhost:4000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```
書いてあること

* CORSポリシーによってブロックされています。
* リクエストされたリソースに 'Access-Control-Allow-Origin' ヘッダーがありません。

CORSは日本語で「オリジン間リソース共有」です。
プロトコル、ポート番号、ホストが等しい場合が、同一のオリジンと言います。

セキュリティ上の理由で、ブラウザはオリジン間の通信を制限しています。
「[同一オリジンポリシー](https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy)」に従って制限されています。

##解決方法

###サーバーサイドの実装
「Access-Control-Allow-Origin」を設定する必要があります。

(他のサイトでは⇩も設定が必要と書いて有りましたがエラーなく通信できました)
「Access-Control-Allow-Headers」 これについて後で調べてみます。

####Nest.jsで実際に実装した例

```main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // ＝＝＝＝＝＝↓が該当箇所＝＝＝＝＝＝
  app.enableCors({
    origin: 'http://localhost:4000',
    // allowedHeaders: 'Origin, X-Requested-With, Content-Type, Accept',　　←無しでもエラーなくなったが、他のサイトには必要と書いてあった↓
  });
  // ＝＝＝＝＝＝↑が該当箇所＝＝＝＝＝＝
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(3000);
}
```
「http://localhost:4000 」からのアクセスができるようになります。
自分の環境(クライアントサイドの)に合わせて、設定してください。
「origin:*」とすると全て許可です。

###クライアントサイドの実装

fetchでAPIを叩く場合は、「mode cors」の設定が必要です。

####Reactで実際に実装した例

```App.tsx
await fetch('http://localhost:3000/item', {
      mode: 'cors'
    })
    .then(// 以下省略
```

これでエラーなく通信できるようになりました。

###参考文献
[なんとなく CORS がわかる...はもう終わりにする。](https://qiita.com/att55/items/2154a8aad8bf1409db2b)
[オリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
[同一オリジンポリシー](https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy)
【vue.js】Font awesomeのアイコンを並べる【データバインディング】

##環境
Vue.js 6.14.9
Vue CLI 4.5.9
##Font awesomeを利用
[Font awesome を Vue.js で使ってみよう](https://qiita.com/kurararara/items/d76776a7dc2d763a068b)
VueでFont awesomeを利用する方法はこちらを参照させていただきました。
##アイコンを並べる
まず参照通り表示してみました。

```Vuejs:About.vue
<template>
  <div class="about">
    <font-awesome-icon icon="coffee" />
  </div>
</template>

```
ここから、次に`v-for`を使って、アイコンを複数並べたいと思います。

```Vuejs:About.vue
<template>
  <div class="about">
    <div class="item" v-for="(data, index) in hoge" :key="index">
      <font-awesome-icon :icon="{{data.icon}}" />
    </div>
  </div>
</template>
```
scriptも記述していきます。

```Vuejs:About.vue
<script>
  export default {
    data(){
      return {
        hoge: [
        {icon: "coffee"},
        {icon: "users"}
      ]};
    }
  };
</script>
```
あれ、エラーが、、、
![スクリーンショット 2021-03-21 15.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/99d61f6f-d33a-9155-8a6d-bf3ecb3d049f.png)
上記のエラーをみると、
icon="{{data.icon}}"の代わりに、icon="data.icon"を使ってねと書いてあるので、修正します。

```Vuejs:About.vue
<template>
  <div class="about">
    <div class="item" v-for="(data, index) in hoge" :key="index">
      <font-awesome-icon :icon="data.icon"/ >
    </div>
  </div>
</template>
```
これでエラーは解消できました。

↓こんなふうにアイコンを並べることができました！！
![スクリーンショット 2021-03-21 14.51.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/786e80f4-d449-f135-f9f0-7e532bdf29ab.png)
リンク先のを別タブで表示させる方法

## はじめに
外部リンクを貼り付ける際
リンクから飛ぶと戻るのがめんどくさい！
他のサイトを見ると、別タブに表示してくれる
そっちの方が都合が良いと言うことで、
今回はそのことに付いて書いて行きます😊

## 参考サイト
https://yoru9zine.hatenablog.com/entry/2017/03/17/230729

## 実装

`target: :_blank`と言うのを`aタグ`なり`link_to`に記載します

```
<%= link_to "SNS", "#",target: :_blank ,class: "burger-nav-link" %>
```

こちらでも別タブで表示してはくれます。
ですが、いくつかサイトを見ると `悪用` `フィッシング詐欺`などと
強めのワードが目につきます。

そこで`rel: "noopener noreferrer"`
をつけると大丈夫みたいで。

```
<%= link_to "SNS", "#",target: :_blank, rel: "noopener noreferrer",class: "burger-nav-link" %>   
```

これで対策できました！　笑


## 終わりに

些細なことでも疑問に思った点
解決した点など更新して行きます🤗
Raspberry Pi PicoにArduino.hをinclude

#はじめに
Raspberry Pi PicoをC/C++で開発する場合、新たにRaspberry Pi Picoの関数を覚える必要が有ります。
すでにArduinoを使いこなしている人は、delay()やdigitalWrite()なんかをPico語に置き換える度にストレスを感じるでしょう。
そこで、Raspberry Pi Picoの開発環境にArduino.hを読み込んでみました。

ここで紹介する内容はあくまで実験レベルです。
安定した動作を期待する場合はArduinoの移植プロジェクトが完了するのを待ちましょう。
https://blog.arduino.cc/2021/01/20/welcome-raspberry-pi-to-the-world-of-microcontrollers/

#関連ファイル
以下に関連ファイルをアップロードしました。
https://pione.jp/qiita/Arduino_h_test.tar.gz

ダウンロード・解凍して下さい。

```
$wget https://pione.jp/qiita/Arduino_h_test.tar.gz
$tar -zxvf Arduino_h_test.tar.gz 
$cd Arduino_h_test
$ls
Arduino.h           CMakeLists.txt  main.c
ArduinoFunctions.c  hiddenMain.c    pico_sdk_import.cmake
```

「main.c」がArduinoで言うところの「プロジェクト.ino」です。


「Arduino.h」は以下のファイルからコンパイル時にエラーとなる行をコメントアウトしたものです。
https://raw.githubusercontent.com/arduino/ArduinoCore-avr/master/cores/arduino/Arduino.h
主にマクロ定義を流用します。

「ArduinoFunctions.c」はArduino語の関数をPico語に置き換える独自関数です。
使用頻度の高い以下の関数を用意しました。
・void pinMode(uint8_t,uint8_t)
・void digitalWrite(uint8_t,uint8_t)
・int digitalRead(uint8_t)
・int analogRead(uint8_t)
・unsigned long millis(void)
・unsigned long micros(void)
・void delay(unsigned long)
・void delayMicroseconds(unsigned long)
他にもArduino関数を流用したい場合はこのファイルに追記します。

#main.c
「main.c」ファイルを雛形として編集すればArduinoライクな開発ができます。
添付の「main.c」ファイルを見てみましょう。

```
#include <stdio.h>
#include <string.h>
#include "pico/stdlib.h"
#include "hardware/i2c.h"
#include "pico/binary_info.h"
#include "hardware/gpio.h"
#include "hardware/adc.h"
#include "Arduino.h"

#define LEDPin 25
#define SW 16

void setup(){
    pinMode(SW,INPUT_PULLUP);
    pinMode(LEDPin,OUTPUT);
}

void loop(){
	if(digitalRead(SW) && millis()%1000<500){
		digitalWrite(LEDPin,HIGH);
	}
	else{
		digitalWrite(LEDPin,LOW);
	}
}
```
GPIO16番ピン(picoの21番ピン)を開放すると1秒間隔でオンボードLEDが点滅し、GNDと短絡するとLEDが消灯するプログラムです。
setup関数とloop関数はそのままArduinoに移植できます。


#応用例
「Arduino.h」をインクルードした開発環境でパルスオキシメーターを作ってみました。
https://pione.jp/products/PulseOximeter2/
プログラムについては追って解説を作成する予定です。
rails generate がうまくいかない時

原因
gem のspringがエラーを起こしている。

そもそもgem とは
・Rails4からデフォルトで入ったアプリケーションプリローダー。
・一部のタスクを前もって実行しておき、その後に必要なタスク時間を短縮する。
・アプリケーションをバックグラウンドで実行し続けてくれる。
・アプリーケーションコードを編集したら内部のリロードを自動的に実行する。


主に開発をする上で開発者に余計なタイムロスを発生させないようにするためのパッケージ。

解決方法
バックグラウンド側で動いているspringを止めてしまう。
・spring　stop

これでOK!
Raspberry PIのインストール方法が変わりNOOBSが使えない - 直接ダウンロードしてインストールする方法

## :cherries: この記事の目的

本記事は、令和3年3月21日に執筆しています。
従来はRaspberry PIのインストール方法として、NOOBSを利用したインストール方法が主流でしたが、ここにきて「**Raspberry PI Imager**」でのインストールに変わってしまいました。

本家サイトの各ページを見てもNOOBSのインストーラを取得するページにはたどり着かず、もうNOOBSは使えないと思いましたが、執筆時点で以下の方法でNOOBSを直接ダウンロードする方法を見つけましたので、記事にしたいと思います。

## :cherries: NOOBSを直接ダウンロードする

以下のURLがNOOBS関連データに直接つながっていました。

> http://downloads.raspberrypi.org/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/e148f5f2-f12b-024c-e278-2bb969da6aee.png)

NOOBSのインストールファイルを探します。

(1)[NOOBS]フォルダをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/bbbdc65e-c5cd-1bb9-9293-b18d24987ad5.png)
(2)[images]フォルダをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/9c1f5064-7391-822f-2c2a-b62a276854fb.png)
(3)好きなバージョンのフォルダをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/587ce574-e324-3f04-6501-5f025f285a9d.png)
(4)zipファイルをダウンロードする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/ad1c4e00-f413-d4fa-0809-105a1bb8fdd2.png)
(5)zipファイルを解凍すれば、NOOBSのダウンロードが完了です。

## :cherries: MicroSDカードをフォーマットする

MicroSDカードをフォーマットするには、「SD Card Formatter」を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/48c882f7-f07c-6296-74cf-3b5faa6e0f74.png)

Micro SDカードをパソコンに接続し、フォーマットを行います。

(1)「カードの選択」欄で、フォーマットを行うドライブを選択します。
(2)「フォーマット」ボタンをクリックし、フォーマットを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/7d5372a2-23c9-aecb-aaaa-9ec3822552d9.png)
(3)終了メッセージが表示されればフォーマット完了です。
ファイルシステムが**FAT32**であることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/7d8ae57d-430b-4ed7-336a-eed9e1b4484c.png)

## :cherries: NOOBSファイルをMicro SDカードにコピーする

初めにダウンロードし解凍したNOOBSファイルの全てを、上記でフォーマットしたMicro SDカードにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399135/1170a853-a050-96ea-60ba-b06b301ebc4e.png)

## :cherries: Raspberry PIのインストールとセットアップを行う

NOOBSのダウンロードは以上です。
この後のインストール作業は、Micro SDカードをRaspberry PI本体に差し込み、セットアップを続行して下さい。

## :cherries: 関連情報

NOOBSのダウンロードURL
http://downloads.raspberrypi.org/

## :cherries: ご意見など

ご意見、間違い訂正などございましたらお寄せ下さい。
SudachiPyでユーザ辞書をビルドするときに遭遇するかもしれないエラー一覧

日本語形態素解析エンジンSudachiのPython実装である[SudachiPy](https://github.com/WorksApplications/SudachiPy)では、`sudachipy ubuild`コマンドを使って、ユーザ辞書をビルドすることができます。

```
$ sudachipy ubuild -h
usage: sudachipy ubuild [-h] [-d string] [-o file] [-s file] file [file ...]

Build User Dictionary

positional arguments:
  file        source files with CSV format (one or more)

optional arguments:
  -h, --help  show this help message and exit
  -d string   description comment to be embedded on dictionary
  -o file     output file (default: user.dic)
  -s file     system dictionary (default: linked system_dic, see link -h)
```

ビルド時に遭遇するかもしれないエラーをリスト化しておきます。

# ValueError: invalid format

`reading the source file...`中に発生。

```
reading the source file...Traceback (most recent call last):
  (トレースバック省略)
ValueError: invalid format
```

#### 列が足りていない

Sudachiのユーザ辞書は、各エントリ18列のフィールドがあるはずだが、列が足りていないエントリが存在するために発生。

#### 余分な空行
ソースCSVファイルに余分な空行が存在したために発生。とくに、最後のエントリの行のあとは、改行させないか、改行しても1回までにさせておく。

# ValueError: invalid literal for int() with base 10: 'なんちゃら'

`reading the source file...`中に発生。`なんちゃら`の部分は空文字の場合もある。

```
reading the source file...Traceback (most recent call last):
  (トレースバック省略)
ValueError: invalid literal for int() with base 10: 'なんちゃら'
```

#### 左連接ID または 右連接ID の未指定

左連接ID(CSVの左から2列目)または右連接ID(CSVの左から3列目)が未指定、または文字列になっているエントリが存在するために発生。

#### 余分な列

Sudachiのユーザ辞書は、各エントリ18列のフィールドがあるはずだが、余分な列が存在し、そこになにか文字列を入力しているエントリが存在するために発生。（ちなみに、余分な列が存在しても、その値が数値や`*`(アスタリスク)であればエラーとはなりませんでした。）

# ValueError: headword is empty

`reading the source file...`中に発生。

```
reading the source file...Traceback (most recent call last):
  (トレースバック省略)
ValueError: headword is empty
```

#### 見出し語が空

見出し語(CSVの左から1列目)の値が空であるエントリが存在するために発生。

# OverflowError: int too big to convert

`writing the word parameters...`中に発生。

```
reading the source file...64 words
writing the POS table...24 bytes
writing the connection matrix...4 bytes
building the trie...done
writing the trie...3076 bytes
writing the word-ID table...324 bytes
writing the word parameters...Traceback (most recent call last):
  (トレースバック省略)
OverflowError: int too big to convert
```

#### 左連接ID・右連接ID・コスト値の不正

左連接ID・右連接ID・コスト値(CSVの左から2～4列目の値)のいずれかの値が、「`-32768`または`-32767`～`32767`」以外範囲の値を指定しているエントリが存在するために発生。私は、コスト値で`-32768`と指定しているつもりが、マイナスが取れて`32768`になっていることがありました。

# ValueError: too few columns

`writing the word_infos...`中に発生。

```
reading the source file...64 words
writing the POS table...24 bytes
writing the connection matrix...4 bytes
building the trie...done
writing the trie...3076 bytes
writing the word-ID table...324 bytes
writing the word parameters...388 bytes
writing the word_infos...Traceback (most recent call last):
  (トレースバック省略)
ValueError: too few columns
```

#### 不正な列

エントリの一番最後の列(未使用フィールド)には、`*`(アスタリスク)を入力しておかなければならないが、それ以外の値が入っているために発生。未使用だから、適当なメモ書きでも入れておこうと思ったのですが、許してくれませんでした。
AWS Fault Injection Simulator (FIS)

#AWS Fault Injection Simulator#

https://aws.amazon.com/jp/fis/

わざと障害を発生させて、復旧のテストをし、実際の復旧に備えるためのツールになります。
所謂、カオスエンジニアリングサービスになります。


#対象のリソースとアクション#

https://docs.aws.amazon.com/fis/latest/userguide/fis-actions-reference.html

随時更新されるかと思いますので、ドキュメントを参考にしましょう。

今回指定するリソースとアクションは、`aws：ec2：stop-instances` にしてみます。

#やってみる#

EC2インスタンスの1つを停止し、次に両方のインスタンスを停止する実験テンプレートを作成してみます。

基本的な手順としては、実験テンプレートを作成　→　実験する

##IAMロール##

https://docs.aws.amazon.com/fis/latest/userguide/getting-started-iam.html#getting-started-iam-service-role

まずは、ドキュメントの通り、FISサービスがユーザーに代わってアクションを実行する権限を付与するIAMロールを作成しておきます。

##CloudWatchアラーム##

Cloudwatch アラームがトリガーされた場合に実験を停止するといったこともできますが、今回この停止条件を指定しないものとします。

##実験テンプレートを作成する##

**説明とアクセス許可**
適当な「説明」と先程作成した「IAMロール」を指定。
![fis-t1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/a321f7f1-ff2f-c95c-c41c-6a72c84627de.png)

**アクション1**
「名前」に適当なアクション名を入力、「アクションタイプ」は "aws:ec2:stop-instances"、「アクションパラメータ」は ”5” とします。
![fis-t2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/d2702080-c487-ae2c-1b94-df51184ae5d6.png)

**ターゲット**
「ターゲット」に適当なターゲット名を入力、「リソースタイプ」は "aws:ec2:instance" を選択。 
「ターゲットメソッド」で、リソースIDを選択し、「選択モード」は ”数”、「リソースの数」は ”1” とします。
![fis-t3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/dcbd506a-6e1a-7872-5e7a-db5f81b51795.png)

「ターゲット」に適当なターゲット名を入力、「リソースタイプ」は "aws:ec2:instance" を選択。 
「ターゲットメソッド」で、リソースIDを選択し、「選択モード」は ”すべて” とします。
![fis-t4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/26937dea-ce3e-1343-7ea7-425825d3b221.png)

**アクション2**
「名前」に適当なアクション名を入力、「アクションタイプ」は "aws:ec2:stop-instances"。
「次の後開始」では、アクション1で作成したものを指定し、「ターゲット」は、ターゲットで作成した2つ目のターゲットを指定します。
「アクションパラメータ」は ”5” とします。
![fis-t5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/218ed560-f79f-49ff-8c93-82690537b4cf.png)

**停止条件**

先述の通り、今回は指定しないものとします。

##実験##

「実験を開始」する。
![スクリーンショット 2021-03-21 14.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/f2df6296-20aa-9580-deeb-0be920a6948c.png)

実験結果は、「実験」のアクションタブで表示される。
![スクリーンショット 2021-03-21 15.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/8d3a56ce-d5d7-0e75-ea69-22588651bc25.png)

実験結果の、状態については、ドキュメントを参考に。

https://docs.aws.amazon.com/de_de/fis/latest/userguide/experiments.html#experiment-states
rails urlパス変更

コントローラー名とは違う命名でルーティングを指定したい！
そんなことが起きた時に使えるコマンドを紹介します。

## resourcesとネスト

Railsのルーティング記法の基本は、複数形のresourcesメソッドと単数形のresourceメソッドです。また、Railsのルーティングにはネストを含む多くのオプションがあり、自由度が飛躍的に高まっています。

## 始めに

![スクリーンショット 2021-03-21 15.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/67a7a74f-aaf9-fb75-a4f3-f2f9afb97feb.png)

```
resources :notifications, only: [:show]
```

notificationコントローラーのshowアクションにと、ごく普通の記述です。

`/notifications/:id`の部分を違う名前に変更したいと思い。

`path`オプションを使用する。

```
resources :notifications, only: [:show], :path => "articles" 
```
![スクリーンショット 2021-03-21 15.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/3ad2173a-ccdc-b98d-eb8c-47c46f2578d1.png)


## おわりに
些細なことでも疑問に思った点
解決した点など更新して行きます😁
【初心者備忘録】PLSQL編(1)：ストアドプロシージャ、ストアドファンクションとは？

※この記事は、初心者プログラマの私が、業務で扱った内容に関連した箇所を
自身の学習用にまとめたものです。
##ストアドプロシージャ、ストアドファンクションとは？
ストアドプロシージャ、ストアドファンクションは、ともにデータベースに対しての複数の命令をまとめた関数のこと。
例えば、SELECT文やUPDATE文など、複数の命令文を実行するのに
ストアドプロシージャ、ストアドファンクションを用いなかった場合、

**命令1.**SELECT文実行
**命令2.**UPDATE文実行
**命令3.**〇〇実行
**命令4.**…
**命令5.**…

のように、命令される回数だけ

・クライアント(データベースを利用するプログラム)
・サーバー(データベースを読み書きするプログラム)
・データベース(データを保存してるところ)

を行き来しなければならず、通信量が多くなってしまうが、
ストアドプロシージャ、ストアドファンクションを使用すれば、行いたい処理を1度の通信で行うことができる。

##ストアドプロシージャ、ストアドファンクションの違いは？
2つの大きな違いは、

・ストアドプロシージャ…戻り値がない
・ストアドファンクション…戻り値がある

つまり、ストアドプロシージャは、データベースに対して一連の処理を行ってそれで終了だが、
ストアドファンクションは、データベースに対して一連の処理を行って、その結果得られた値を戻り値として返す。(戻り値として返すということは、あらかじめ変数を用意しておいて、そこに戻り値を代入するといったように、何らかの準備が必要)
***
今のところはこのような認識。
今後理解がもっと深まったら、都度更新しようと思います。
サービス開発前に準備したこと

# 新規登録したサービス
今まで使ってきたアカウントごっちゃになると管理に困るので以下のサービスに改めてアカウント作成しました。

## Gmail
言わずと知れたメールサービス。
以下のサービスに登録するメールアドレスを取得。
## Qiita
基本的には自分のメモ用途と情報収集に使用。
## GitHub
開発したコードを管理するために使用。
##Twitter
進捗状況などの情報発信や情報収集に使用。
Fluxフローとは

#はじめに
Reduxを勉強するにあたり、その元となるFlux思想を学習しました。
私の健忘録であり、誰かの役に立てれば嬉しいです。

#Fluxとは
- Facebook社が提唱している、クライアントサイドのWebアプリケーション開発のためのアプリケーション・アーキテクチャ(設計思想)です。
- Reactとの併用を主に想定して作られているため、Reactとの相性が良いです。
- 大きなメリットとしては、MVCモデルなどと比較したときに、データの見通しが良いという点です。



Fluxは次の３つの要素から成り立っています
1. Store: アプリケーションの状態データを保持するオブジェクト、状態の更新を実施する
2. Action: 状態の更新をするための指示内容を表すメッセージ
3. Dispatcher: Storeに対してActionによる更新指示を行う関数

単方向データフローは、ここにUIである「View」を加え、表示されます。↓

```
Action → Dispatcher → Store → View(React)
```
実際にアプリケーションに組み込んだ場合にはユーザーの操作に応じて新たなActionをdispatchし、状態と画面を更新していきます。↓

```
　　　　　　　　　　←　　　Action　 ← 
               ↓                 ↑
Action → Dispatcher → Store → View(React)
```
処理の流れを一通り説明すると…

1. ユーザーがviewを操作(onClick,onChange等)
2. 更新するものをまとめてDispatcherへ渡す
3. DispatcherからActionを渡されたStoreが、状態を更新
4. Storeの状態が変化したことによりViewが書き換わる

#おわりに
FluxはMVCモデルなどと比べ、単一方向にデータが進んでいくので見通しがよく、大規模開発になればなるほど効果を発揮します。
このFlux思想を元に作られたのがReduxということです。


#参考
https://codezine.jp/article/detail/10751
pyyamlを使ったyamlの読み込み書き込み

# はじめに
pythonでの基本的なYAMLの読み書きを解説します。  
環境: python 3.12

## ライブラリ
pythonでYAMLを読み書きするには、基本は`PyYAML`(6.0.2)を使います。
ただし、PyYAMLはYAMLのv1.1までしか対応していないため、v1.2で書かれたYAMLを読む別のライブラリが必要です。
ドキュメント: https://pyyaml.org/wiki/PyYAMLDocumentation

# 使用例
## 読み込み
### 基本
```python
import yaml

with open('document.yaml', encoding='utf-8')as f:
    document = yaml.safe_load(f)
```
### 複数のドキュメントが含まれているとき
イテレータが返ります。
```python
import yaml

with open('documents.yaml', encoding='utf-8')as f:
    documents = list(yaml.safe_load_all(f))
```
## 書き込み
### 基本
```python
import yaml

document: Person = {
    "name": "John Doe",
    "age": 30,
    "skills": ["Python", "Django", "Machine Learning"],
}
with open('document.yaml', mode='w', encoding='utf-8')as f:
    yaml.safe_dump(document, f)
```
:::note info
PyYAMLは無指定で書き込んだときはjsonのようなフロースタイルとして書き込みます。  
`safe_dump`の引数に`default_flow_style=False`を指定することで、よく見るYAMLのようなブロックスタイルとなります。
:::

:::note info
日本語等をエスケープしたくない場合には`safe_dump`の引数に`allow_unicode=True`を指定してください。
:::

### 複数のドキュメントに書き込みたいとき
イテラブル(つまりlistやイテレータ、ジェネレータ)を指定するとその要素ごとに分けられて書き込まれます。
```python
import yaml

documents: list[Person] = [
    {"name": "Alice", "age": 28, "skills": ["Java", "Spring", "Docker"]},
    {"name": "Bob", "age": 35, "skills": ["Go", "Kubernetes", "AWS"]},
]
with open('documents.yaml', mode='w', encoding='utf-8')as f:
    yaml.safe_dump_all(documents, f)
```

## ファイルではなく文字列を読み書きしたい
文字列からの読み込みは、ファイルを渡していた引数にyamlのドキュメントになっている文字列を渡すと文字列を解釈して結果を返します。  
文字列への書き込みは、ファイルを渡さないようにすると代わりに文字列を返します。  

## 動作例
コード片全体です。
```python:test.py
# 型付けのため
from collections.abc import Iterator
from typing import TypedDict

import yaml


# 型付けのため
class Person(TypedDict):
    name: str
    age: int
    skills: list[str]


print("書き込み")
document: Person = {
    "name": "John Doe",
    "age": 30,
    "skills": ["Python", "Django", "Machine Learning"],
}
with open('document.yaml', mode='w', encoding='utf-8')as f:
  yaml.safe_dump(document, f, allow_unicode=True, default_flow_style=False)
# age: 30
# name: John Doe
# skills:
# - Python
# - Django
# - Machine Learning
print("###")

print("読み込み")
with open('document.yaml', encoding='utf-8')as f:
  loaded_document: Person = yaml.safe_load(f)
print(loaded_document)
# {'age': 30, 'name': 'John Doe', 'skills': ['Python', 'Django', 'Machine Learning']}
print("###")

print("書き込み(複数のドキュメント)")
documents: list[Person] = [
    {"name": "Alice", "age": 28, "skills": ["Java", "Spring", "Docker"]},
    {"name": "Bob", "age": 35, "skills": ["Go", "Kubernetes", "AWS"]},
]
with open('documents.yaml', mode='w', encoding='utf-8') as f:
  yaml.safe_dump_all(documents, f, allow_unicode=True, default_flow_style=False)
# age: 28
# name: Alice
# skills:
# - Java
# - Spring
# - Docker
# ---
# age: 35
# name: Bob
# skills:
# - Go
# - Kubernetes
# - AWS
print("###")

print("読み込み(複数のドキュメント)")
with open('documents.yaml', encoding='utf-8') as f:
  loaded_documents: list[Person] = list(yaml.safe_load_all(f))
for doc in loaded_documents:
    print(doc)
# {'age': 28, 'name': 'Alice', 'skills': ['Java', 'Spring', 'Docker']}
# {'age': 35, 'name': 'Bob', 'skills': ['Go', 'Kubernetes', 'AWS']}
print("###")
```
THE文系の俺が機械学習コース無職転生  ~Part2 CNNの分からなさが凄い~

またまた、題目の通りそんな私がCNNをほんのちょっっとだけわかるようになったきっかけを記載します。(相当短いよ)

# 分からない場合のアプローチ方法は人それぞれ
元も子もないことを言いますが(元も子もないって初めて文字にしたな・・・)、勉強のアプローチ方法は人それぞれだと思うんです。
例えば・・・

①動画で学ぶ
②人に聞く
③ググってわかりやすそうなのを探す
④本読む
⑤渚にまつわるエトセトラ(意味わからなかったらすみません)

おそらくその人の脳みその作りとか、生きてきた経験値に、その学びの習熟度によって、どういう学び方をしたほうがいいのかは、それぞれかと。

ですので、今回は③に絞ってのみお伝えしようと思います。(どこらへんが’ですので’なのかはスルーして下さい。)

# 分からないとはっきり伝える
正直ニューラルネットワークに入ってからほぼほぼ内容が分からず、DNN,CNNと進んでしまい、沼にはまっていました。自己嫌悪に陥り、自分には機械学習は向いていないんじゃないか・・・とか思ったり、思わなかったり。
そんな私でも色んなこと、色んな方に協力いただき少しずつ分かってきたのですが、最近あることに気がついたんです。

### もっと端的に調べてみたら分かりやすく学べる方法が見つかるんじゃないか・・・(*´ω｀*)

![スクリーンショット 2021-03-21 14.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031281/5d17853d-dd62-1566-49dd-7ac995638921.png)

こんな感じです。

当たり前のことなのかもしれないのですが、この検索ワードに辿り着くまで２ヶ月半かかりました笑

難しいことを没頭して勉強したり、それを調べたりという経験もなく、こんなことにも気が付きませんでした。

おかげさまで、１ページ目で３件ほど、理解がぬるぬる進む記事がありまして、CNNが身近になってきております。(記事を書いた人の優しさを感じながら学べています)

# 結論
CNNだけの問題ではないですね！折角なので、参考にさせていただいたサイトのURLを貼らせていただきます！


https://udemy.benesse.co.jp/data-science/ai/convolution-neural-network.html#:~:text=%E7%95%A5%E3%81%97%E3%81%A6CNN%E3%81%A8%E3%82%88,%E3%81%A8%E3%81%84%E3%81%86%E7%B5%90%E5%90%88%E3%82%92%E3%82%82%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

https://www.randpy.tokyo/entry/cnn

https://www.codexa.net/cnn-mnist-keras-beginner/
文字列を2進数に変換してファイル出力する

ASCIIコード表に基づいて最大8バイトの文字列を2進数(文字として出力)に変換する。
例)変換対象文字列がABCDEFGの場合
01000001,01000010,01000011,01000100,01000101,01000110, 01000111
に変換する。

```c
int main(void)
{
	char filedata[8] = "ABCDEFG";	// 変換対象文字列
	char str[72]     = "";			// 変換後文字列
	int  storeNum    = 0;			// 格納位置
	int  bitCnt;					// 変換対象ビット
	int  byteCnt;					// 変換対象バイト
	char tmpBitChar;				// 変換後ビット一時格納先
	
	// 8文字分ループ(変換対象が終端ではない間)
	// && filedata[byteCnt]が無い場合は、文字のないバイトは0で出力される
	for (int byteCnt = 0; byteCnt < 8 && filedata[byteCnt]; byteCnt++) {
		// 8ビット分ループ
		for (int bitCnt = 8 - 1; bitCnt >= 0; bitCnt-- )
		{
			// 変換対象位置へシフトして1ビット分抜き出す
			tmpBitChar = filedata[byteCnt] >> bitCnt & 1;
			// 抜き出したビットを文字に変換(ASCII文字コードに対応)
			str[storeNum++] = tmpBitChar | '0';
		}
		// 8ビット区切りで[,]を入れる
		str[storeNum++] = ',';
	}
	// 末尾に終端文字格納
	str[storeNum - 1] = '\0';

	// ファイルオープン
	FILE *fp = fopen("./bitFile.txt", "w");
	// ファイルオープン確認
	if (!fp)
	{
		return 1;
	}
	// 文字列出力
	fprintf(fp, "%s\n", str);
	// ファイルクローズ
	fclose(fp);
}
```
arduinoで、WDTによるリセットが繰り返しちゃう問題

arduinoで、WDTによるリセットが繰り返しちゃう問題

http://milkandlait.blogspot.com/2014/06/avr_3.html

ここと同じ問題が発生して、困っていました。

使っていた、ICは、
ATtiny84
です。

どんな問題か。

正解にたどりついているか、わからないが、私の症状はこう。
\#include \<avr/wdt.h>

をつかって、プログラムを作成中、妙な挙動に気が付いた。
wdt_enable(WDTO_8S);

をつかって、WDTを起動。　その後　WDTを止めるべく、（スリープ状態にするため）
wdt_disable();
を入れるが、そのコマンドが実行された後も
WDTの最小時間である、15msでリセットがかかり続ける

再び、wdt_enable(WDTO_8S);を実行すると、
WDTは、8秒おきにかかるので、wdt_enableのコマンドは受け付けているようだ。
wdt_disable();で、８秒のWDTは無効化されるものの、　その後は、
15msでリセットがかかり続ける謎現状。これでは、8秒以上のディレイを入れたい時に困る。

しかも驚いた事に、wdt_enableの記述の無い、まったく別のプログラムを書き込んでも、
その石では、WDTが15msで動き続けるという謎現象が発生した。

つまり、プログラム領域とは別に、この石のどこかにWDTを常時ＯＮの状態に設定してしまったようで、　その影響で、wdt_disable();だけでは、WDTを完全に無効にすることが出来なくなってしまったようだ。

トリガーはスリープを走らせたところっぽい。

そういう場合は、Arduino　IDEのツールのボードマネージャのどこかに、WDT Disable　的な
config設定がありそうなのだが、無かった。。

で、よくよくデータシートを読んでいたら、
コード例に
void WDT_off(void)
{
 _WDR(); /* ｳｫｯﾁﾄﾞｯｸﾞ ﾀｲﾏ ﾘｾｯﾄ */
 MCUSR = 0x00; /* MCUSRのWDRFを解除(0) */
 WDTCSR |= (1<<WDCE)|(1<<WDE); /* WDCEとWDEに論理1書き込み */
 WDTCSR = 0x00; /* ｳｫｯﾁﾄﾞｯｸﾞ禁止 */
}

というのがあったので、

 MCUSR = 0x00; /* MCUSRのWDRFを解除(0) */
 WDTCSR |= (1<<WDCE)|(1<<WDE); /* WDCEとWDEに論理1書き込み */
 WDTCSR = 0x00; /* ｳｫｯﾁﾄﾞｯｸﾞ禁止 */

を、プログラム冒頭に入れたところ、勝手に動いている15MSのWDTを止める事ができ、
無限リセットは収まった。

電子牛乳のサイトのコメント欄のやり取りを見ると、
ブートローダを一緒に書き込むと、無限ループが発生しないとあるので、
無限ループを完全に止めるには、やはり、プログラム領域外にWDTのON/OFFのconfigがあると
思われる。

　なので、wdt_disable();だけでは、WDTが止まらなくなるのだろう。　
たしか、PICのライタを使っていたころも、ＷＤＴのオンオフは、コンフィグ設定にあったから、
別のライタをつかえば、問題の根本にはたどり着けるとは思う。
再新規登録はできません　勝手にredirectされます


初めてrailsでポートフォリを作りをしています。
index画面と新規登録画面を作って
deviseをインストールして
画面表示もindex、新規登録画面ともに表示され
新規登録１度行ない、その時入力した情報が
データベースにも保存されていたことを確認しました。

嬉しくなって再度新規登録画面を開け再度、登録ようとしました。
何度も。。。
http://localhost:3000/users/sign_up
を開いても
http://localhost:3000/が開きます。

何度も

エラーは出ていないのでターミナルを見て考えました。


```rb
Started GET "/users/sign_up" for ::1 at 2021-03-21 14:07:01 +0900
Processing by Devise::RegistrationsController#new as HTML
  User Load (36.8ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
Redirected to http://localhost:3000/
```

```
GET "/users/sign_up" 
```

でアクセスしましたが

```
devise：：RegistrationsController
```

によって
UserがLoadされ

```
SELECT `users`.* FROM `users` WHERE `users`.`id` = 1（SQL文）
```

⇨id番号１番のuserなのでログインしているとして

```
Redirected to http://localhost:3000/
```

元の画面（localhost:3000/）にリダイレクトされているとのことでした。
無駄なことをしていました。
早くログアウト機能つけよう。残念！
【GAS】 スプレッドシートの項目(カラム)位置の可変に対応できる列指定

#はじめに

スプレッドシートで読み書きを行う際、セル位置を固定で指定していると、スプレッドシートが変更され項目の位置が可変した場合に、誤った箇所に読み書きされてしまいます。

そこで、項目(カラム)の位置が変わっても対応できるようなコードにしていきます。

#処理したいこと
今回は以下のような表の **「済フラグ」 という項目の列に「済」と入力する** という処理をします。
※行も可変すべきですが、分かりづらくならないよう4行目のみ指定します。
![書き込み表.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557347/f44abce0-0b7f-df6e-639c-569c0f3c5bb5.png)

#可変に対応できない固定の指定
まずは可変に対応できない固定の指定方法を記載しておきます。
「済フラグ」はD列にあるので 4 列目を指定します。

```javascript:カラム位置_固定
function column_hard() {
  // スプレッドシート取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();    
  const sheet = ss.getSheetByName('シート1');

  // 書き込み
  sheet.getRange(4,4).setValue("済");
}
```

問題なく、意図したところに書き込まれます。
![固定指定書き込み.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557347/051771b7-5afb-3b72-1056-9b773b61827c.jpeg)



##スプレッドシートが変更され 位置が変わる
B列に日付を記載するための列が追加されたとします。
![列追加.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557347/5af23a2a-5c32-e712-1c23-22dc1e06628f.jpeg)

すると列を4列目に固定していたため、意図しない列に書き込まれてしまいます。
![列固定_誤記入.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557347/5ddfee78-ac14-a52c-26c6-64659da403a4.jpeg)
このように固定で指定してしまうと、スプレッドシートが変更された際にGASもメンテナンスしないといけません。

# 可変に対応できる指定方法
項目(カラム)位置が可変した場合にも対応できるようにしたのがこちら

```javascript:カラム位置_可変
function column_soft() {
  // スプレッドシート取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();    
  const sheet = ss.getSheetByName('シート1');

  // ヘッダー(項目)行の指定
  var headerRow = 3; // ここを変える

  // 最終列取得
  var lastCol = sheet.getLastColumn();

  // ヘッダー行を範囲取得
  var header = sheet.getRange(headerRow, 1, 1,lastCol).getDisplayValues();

  // 項目名の指定
  var colName = "済フラグ"; // ここを変える
 
  // カラム位置を取得
  var colIndex = header[0].indexOf(colName) + 1;

  //  書き込み
  sheet.getRange(4,colIndex).setValue("済");
}
```

すると、列が追加されても
![カラム追加正常書き込み.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557347/ee170c99-321b-de2b-8fc2-410e552f6083.jpeg)
減っても対応できます。
![カラムが減っても正常書き込み.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557347/d3a428e8-350e-afc1-47c8-c25436ff1c36.jpeg)


##解説
書き込み処理を行う前に、項目名が何列目にあるかを確認するようにしています。
確認用にまず、ヘッダー行を範囲取得し配列に入れます。

```javascript:ヘッダー行範囲取得
  var header = sheet.getRange(headerRow, 1, 1,lastCol).getDisplayValues();
```
以下のように２次元配列で取得されます。

|header |[0]|[1]   |[2]  |[3]|[4]     |
|-----:|:-:|:----:|:---:|:-:|:------:|
|[0]    |No |請求日|請求先|金額|済フラグ|

そして、取得した配列の何列目に指定したい項目名が存在するか確認します。

```javascript:カラム位置を取得
  var colName = "済フラグ";
  var colIndex = header[0].indexOf(colName) + 1;
```

.indexOfメソッドを使い、配列の何列目に存在するか確認します。
変数 colName に "済フラグ" が入っているので、「**4**」が帰ってきます。
配列の開始値は「**0**」列番号の開始値は「**1**」からなので、 +1 して列番号にしています。

※colNameが "請求先" であれば「2」、存在しない項目名の場合「0」になります。

あとは、取得したカラム位置を使って書き込みするだけ。

```javascript:取得したカラム位置を使って書き込み
  //  書き込み
  sheet.getRange(4,colIndex).setValue("済");
```

#おわり
ひと手間加えて、メンテナンスしやすいコードにしましょう。
仮引数と実引数

###実引数
渡す値の事

```Sample.java
 List<String> list = new ArrayList<>();
finalSample(list);//これ

add(100,200)//これ
```


###仮引数
受け取る変数(変数名はなんでもいい)

```Sample.java
 public static void finalSample(List<String> list)//これ
public static void add(int x , int y) //これ

```
Platform IO でESP32ボード LOLIN32 を動かす (deep sleepを使ったLチカ)

Amazonを徘徊していたときにたまたま見つけたボードです。

https://www.amazon.co.jp/gp/product/B07N4KDQ5T/ref=ppx_yo_dt_b_asin_title_o01_s01?ie=UTF8&th=1

![2021-03-21_135804.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/fd81e832-c04e-90ed-11fa-4c9127c6e570.png)

格安といったほどでもないですが、リチウム電池ソケットや充電ICがのっていて、[USB給電しながらバッテリーチャージもできる](https://macsbug.wordpress.com/2017/05/08/battery-and-battery-interface-of-lolin32/)ようなので購入してみました。

サイズは横幅が[ESP32-DevKitC](https://blogimg.goo.ne.jp/user_image/75/ca/af23fd82d8f81dbc33e2ed5b571d7862.jpg)より1ピン分狭いため、ブレッドボードに差したときに、[片側のピンにジャンパーピンを差す余裕がない](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F128298%2F16d045f6-23c2-b9b6-c6fe-c5562ccbc96c.jpeg?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=bfc5b6bfe1f91e939e691ea6e68e1b36)といったこともありません。

![IMG_9823.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/18f977c0-adcc-9f8a-ea52-1f9b1e75f24a.jpeg)

![IMG_9824.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/290518e5-bff4-19e8-7760-5af4b2aa9607.jpeg)

情報が少なめのボードでしたが、PlatformIOを調べるとしっかり対応していました。

```
[env:lolin32]
platform = espressif32
board = lolin32
framework = arduino
monitor_speed = 115200
```

せっかくなので両側のピンを使ってLチカしてみました。

```main.cpp
#include <Arduino.h>

RTC_DATA_ATTR bool bootCounter = false;

void setup() {
  pinMode(4,OUTPUT);
  pinMode(13,OUTPUT);
  Serial.begin(115200);
  Serial.println("ON");
  digitalWrite((bootCounter = !bootCounter)?13:4,HIGH);
  delay(100);
}

void loop() {
  esp_sleep_enable_timer_wakeup(400 * 1000);  // wakeup every 0.4secs
  esp_deep_sleep_start();  
}
```

[動画](https://youtu.be/NK3pnsaTpdE)

![2021-03-21_142208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/571fcd74-f314-54ad-749c-e69654ed4b98.png)
参照+値渡し+String+オブジェクトの場合+List

###Stringクラスのオブジェクトの場合
Stringクラスのオブジェクトをメソッドに渡した場合、メソッド側の引数には同じオブジェクトの位置が渡されるのは配列と同じですが、文字列変数に新しい文字列を代入するとまったく別の場所にオブジェクトが新しく作成され、その新しい場所の位置がメソッド内の変数に代入されます。その為、元の場所には元の文字列が格納されたままなのでメソッド呼び出し元の文字列には何も影響を与えません。



```String.java

	public static void main(String[] args) {
		String str = "abc";
		test(str);//先にここのtext()が実行される
		System.out.println(str);
	}
	private static void test(String str) {
		str = "def";
		System.out.println(str);
	}
実行
def
abc


```
###List

参照型の変数の場合は、final修飾子をつけても値の変更が可能になってしまいます。
このように参照型の変数を引数に使う場合は、呼び出し元の値が変わるため注意してください。

```List.java

 public static void main(String[] args) {
        List<String> list = new ArrayList<>();
        list.add("a");
        list.add("b");
        list.add("c");
        System.out.println(list);
        
        finalSample(list);
        System.out.println(list);
    }
     
    public static void finalSample(final List<String> list) {
// public static void finalSample(List<String> list)
        list.set(0, "A");
        list.set(1, "B");
        list.set(2, "C");
    }
実行
[a, b, c]
[A, B, C]

```
GCCの関数の引数の評価順序は右から左？！

#はじめに
右から右からやってくる。僕はそれを左へと受け流す・・・というお笑いソングがありました。また、リバイバルしてるみたいですけど。
https://www.youtube.com/watch?v=f2kj6gOYPPI
![Screenshot at 2021-03-21 14-04-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33927/6289c558-fdc4-bf69-4bba-17fdbe85dac1.png)


なんと！GCCも右から左へと受け流していたのでした。

ご参考
https://cloud6.net/so/c/1927896


#発端
自作Easy-ISLispはLispからGCCの拡張機能を利用したCコードに変換、GCCにより動的オブジェクトを生成、リンクする方式です。この度、ベンチマークテストをしていて、どうやらGCCの関数の引数の実行順序は左から右ではないらしいことがわかりました。ISLispは規格により引数は左から右へ評価することが定められています。ですからこれに依存した副作用を伴うコードも可能です。しかし、これがGCCでは成り立たないらしいのです。


#実験
次のコードを書いて試してみました。

```common_lisp

(defun foo ()
    (bar (format (standard-output) "~A " 1)
         (format (standard-output) "~A " 2)
         (format (standard-output) "~A " 3)))

(defun bar (x y z) nil)


```

インタプリタだと次のように期待通りです。

```common-lisp

Easy-ISLisp Ver1.83
> (load "tests/order.lsp")
T
> (foo)
1 2 3 NIL
> 

```
ところがコンパイラだと

```common-lisp

> (load "tests/order.o")
T
> (foo)
3 2 1 NIL
> 
```

#対策
さあ、どうしましょう？　GCCも左から右へと評価してくれるようなオプションがあると助かるのですが・・・

あのムーディーさんの歌、　左から左からだとなんだかサマにならないんでしょうね。
Unityを始める - オブジェクトの物理処理 -

# はじめに
今までの学習で、Unityを触ったことがないという状態から、Unityで開発を始められるようになりました。
今回は、Unityでの開発で、「**ピンボールゲーム**」や「**コイン落としゲーム**」のような、物理演算を使うシンプルなゲームが作成できるようになる方法をまとめます。

Unityでは**rigidbody**を使えば、非常に簡単に物理演算を行うことができます。

## 過去の記事

- *[Unityを始める - Unityインストールからプロジェクト作成 -](https://qiita.com/nekoharuyuki/items/cd845d58ecbac9ea4768)*
- *[Unityを始める - Unityの画面構成 -](https://qiita.com/nekoharuyuki/items/629ec2e07fb28a930e62)*
- *[Unityを始める - オブジェクトの操作 -](https://qiita.com/nekoharuyuki/items/4aae8cc8e305c0aefbc2)*

## Rigidbodyとは
Rigidbody を使うと、ゲームオブジェクトを物理特性によって制御する事ができるようになります。リジッドボディがフォースやトルクを受けると、オブジェクトはより現実的な動きをします。重力をうけたり、スクリプトを使ってフォースを与えたり、 NVIDIA PhysX 物理エンジンを通して他のオブジェクトの影響を受けるようにするためには、ゲームオブジェクトに Rigidbody を追加する必要があります。

参考サイト ： https://docs.unity3d.com/ja/2020.2/Manual/class-Rigidbody.html

# 事前準備
1. 新規でプロジェクト作成の作成を行います。
2. Hierarchy に Cube を追加します。
3. Hierarchy に Sphere を追加します。

# 実装

![c5vle-743bs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229633/a042a698-6c3e-e2c8-a776-a8108978295d.gif)

Sphere に Add Component で Rigidbody を追加します。

![スクリーンショット 2021-03-21 14.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229633/a6b35898-c90c-94d4-802c-95e059174144.png)

実行すると Sphere が Cube へ落下します。

# まとめ
Rigidbody を使う事で、ゲームオブジェクトに物理特性を加える事ができました。
Sphere が Cube へ落下後、跳ね返りには Physic Material を使用しています。

Physics の内容を把握する事で、よりリアルな表現が出来るようになります。
0から始めるterraform生活

# 概要
terraformの知識はほとんどなく、初めて触るレベルの人間がterraformでAWSでインフラを構築するまでの手順を記し残す

# githubリポジトリ
https://github.com/koheishimadutsu/teraform_for_ec2_instance

# terraformをinstall

HashiCorpのチュートリアルに沿ってインストール

1. https://www.terraform.io/docs#get-started
2. https://learn.hashicorp.com/terraform?utm_source=terraform_io&utm_content=terraform_io_hero AWS
3. https://learn.hashicorp.com/collections/terraform/aws-get-started
4. https://learn.hashicorp.com/tutorials/terraform/install-cli?in=terraform/aws-get-started

install

```bash
$ brew tap hashicorp/tap
$ brew install hashicorp/tap/terraform
$ brew upgrade hashicorp/tap/terraform
```

autocomplete

```bash
$ terraform -install-autocomplete
```

```hcl:main.tf
terraform {
  required_providers {
    docker = {
      source = "terraform-providers/docker"
    }
  }
}

provider "docker" {}

resource "docker_image" "nginx" {
  name         = "nginx:latest"
  keep_locally = false
}

resource "docker_container" "nginx" {
  image = docker_image.nginx.latest
  name  = "tutorial"
  ports {
    internal = 80
    external = 8000
  }
}
```

docker起動

```bash
$ terraform init
$ terraform apply
```

`http://localhost:8000/` 
これでアクセスできない場合、ESETなどのセキュリティソフトが起因していることがあります。
spacemacsのdevelop更新に伴うcondition-case: Variable関連の変更に追従する

Spacemacsのdevelopブランチで更新している時まあまあ発生する壊れの1つ `condition-case: Variable`

たとえば

```
condition-case: Variable: "dotspacemacs-read-process-output-max" has value: "nil" that doesn’t match its type: "(integer)". Validator message: "(user-error Looking for `(integer)' in `nil' failed because:
  not a integer)"
```

`dotspacemacs-read-process-output-max`がnilだけどintegerを入れてくれよ＾～

こういうエラーは「 [.spacemacsに便利な変数 (dotspacemacs-~~~)が追加された](https://github.com/syl20bnr/spacemacs/commit/d314cc7eefe1771218fd04255652cd3e9d82b1a0)けど僕らのlocal上にある `.spacemacs`はdevelop更新の影響を受けないから定義されない (その変数を呼ぶとnilになる)」という理由で起きる気がする。


## 追従する方法
.spacemacsにその変数を追加する (さっきの例なら `dotspacemacs-read-process-output-max`)

developに変数が追加されたなら [.spacemacsのtemplateファイル](https://github.com/syl20bnr/spacemacs/blob/develop/core/templates/.spacemacs.template)も更新されているはずなので、該当箇所をコメントごとコピペすれば良さそう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201962/c0ebf618-477c-1cc9-8170-669064fd0123.png)
ラズパイのSDカード　フォーマットについて

SDカードをフォーマットする手順
①SD Card Formatter
このソフトを起動し、「boot」を選択し、フォーマットボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593111/ccfec33b-95a7-7c8f-0b57-101e7c29cfdb.png)
※クイックフォーマットの設定したままでよい。

②フォーマットボタンをクリックすると下記メッセージが表示されるがはいボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593111/11e30442-0e18-a9f1-4c47-fc65b0c6337b.png)

③はいボタンをクリックするとフォーマットが始まる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593111/61856dea-c466-7b52-36c5-59513458ea4d.png)

④フォーマットが完了すると下記メッセージが表示されるため、OKボタンを押して完了となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593111/8fc80678-1af8-f75f-c1d8-b9d4d6e551c0.png)

⑤SDカードを取り出す際は安全な取り外しを選択する。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
上記で用いたソフトウェアのインストールURL
https://www.sdcard.org/ja/downloads-2/formatter-2/
Flutterで長いログを全て出力する方法

Flutterでコンソールにログを出力したい場合、基本的には`print`を使用します。

```dart
print('Hello');
```

ですが、APIのレスポンスデータなどの長いログを同じように`print`で出力しても、途中までしかコンソールに出力されません。

## ログを全て出力したい場合

``` dart
// dart:developerをimport
import 'dart:developer' as developer;

developer.log('Hello...');
```

`developer.log()`では、長いログでも出力することができます。
VBA(Excelの最速の使い方することによって仕事効率化up)

プログラミングというのは、難しいように思います。

VBA エクセルの催促の仕方を使い方することになって仕事効率化プログラムがするのは全然難しいことでありません。 その理由としましては 三つほど覚えることによって可能だからです。 三つ覚えることで自動仕事の効率化忘れられる丸第1位10 配列を覚える第二に繰り返し覚える第3にサブファンクションはいるその三つを覚えることによってセルをセルにこのデータを繰り返し打つとまた 令和で行ったり平成であったりっていう変換というのも簡単にすることができます。 それはやはり難しいことではありません。

 第１に、配列というものを説明していきたいと思います。 配列というのは配る列と書きます。例としましては、貨物列車です。 ひとつひとつ列を持った貨物列車に、１つの列に１つのデータを送るというものです。他の例としましてはマンションが挙げられます。マンション1階ごとに１つデータを送るというものです。30階の高層マンションというのは30個データが送れます。指定したとすれば一つの一階に一つのデータ2階に一つのデータ3階に一つのデータという風に1階に一つの部屋という考えなんです。

第２に、繰り返し覚えるというものです。繰り返しとは例えば社員番号なんかでわかるというミスが何番と名前に次の人の番号と名前社員番号名前社員番号名前社員番号名前名前社員番号名前という風に社員番号というチーム名前というチームていうのはチーム自体は一個ずつ一個づつが二つずつですねすいません二つ作ることによって繰り返されるとそこの番号ってな1番2番3番4番目名前っていうのも上から俳優さん今井さん上田さんっていう風に住んでいくっていうのは違うデータが入ってくるってのは事実なんですけども大きく見た時に社員番号チーム社員番号っていうのは無限に続くとそのような時に繰り返すことによって同じうつ繰り返しが起きるので自動カス一回書けばできるという風になります

第３に、sub,functionを覚えるというものであるんですが,これを使うメリットとしましては見やすくするためです。 他の人が次エラーを直す時などに見やすくするために使います。例えば R 3年3月とくられてきたデータを感じの令和3年3月に直す機能をファンクションがしたり郵便番号独立 もちろんそこに書いてもいいんですけども見やすくするために下に置くとそういうことが大事であると考えられています。
laravel 姓 名が別カラムなので結合したり、キーワードが空白で区切られていても検索できるwhere節の作り方（全文検索を使わない）

laravelで、DBのカラムがfirst_nameとlast_nameに分かれている。
しかし検索キーワードはいろんなパターンに対応させるように検索させたい場合。
でも全文検索は使えない。

そんな時に役立つかもしれない記事です。

### DBの例

| id | last_name | fist_name |
|:-:|:-:|:-:|
|1|山田|太郎|
|2|田中|花子|

### ユーザーからの検索クエリ

1. 山田 太郎
2. 山田太郎
2. 山田
3. 太郎

という感じで、どんなパターンでも検索をヒットさせたい。
でも全文検索は使わない場合は、このように書けば解決できます。

### 解決コードのEuloquent Where節部分です

前提
usersには検索したいEuloquentモデルが入っているものとします。
keywordsには検索クエリが入っているものとします。

```php
$users->Where(function ($query) use ($keywords) {
     $splited_keywords = extractKeywords($keywords);
     foreach($splited_keywords as $keyword){
        $query->orWhere('last_name', 'LIKE', "%{$keyword}%")
              ->orWhere('first_name', 'LIKE', "%{$keyword}%")
              ->orWhereRaw('CONCAT(last_name, "", first_name) LIKE ? ', '%' . $keyword . '%');
      }
});
```

という感じで、送られてきたkeywordを空白文字列で分割しながら、各列を検索し、かつ、CONCATで結合したカラムを検索します。どれかにHITすればOK。

空白文字列が含まれる配列を分割するのはこちらの記事を参考にしました。
https://qiita.com/mpyw/items/a704cb900dfda0fc0331

```php
function extractKeywords(string $input, int $limit = -1): array
    {
        return array_values(array_unique(preg_split('/[\p{Z}\p{Cc}]++/u', $input, $limit, PREG_SPLIT_NO_EMPTY)));
    }
```

この記事があなたの生産性を少しでも上げることができたならば
LGTMボタンお願いします！
attr_accessor

①エラーが起きるパターン

user.rb

class User
  def initialize(name, age)
    @name = name
    @age = age
  end
end

tanaka = User.new('田中太郎', 18)
tanaka.name
# => undefined method `name' for #<User:0x00007fd0f5880658 @name="田中太郎", @age=18> (NoMethodError)

tanaka.age = 33
# => undefined method `age=' for #<User:0x00007fc289084730 @name="田中太郎", @age=18> (NoMethodError)



②attr_accessorメソッド　を使ったパターン

user.rb

class User
  # 以下の記述でクラス外部から@name,@ageにアクセスが可能になる
  attr_accessor :name, :age

  def initialize(name, age)
    @name = name
    @age = age
  end
end

tanaka = User.new('田中太郎', 18)
p tanaka.age #=> 18

tanaka.age = 33
p tanaka.age # => 33


このように、attr_accessorメソッドはインスタンス変数にアクセスするためのメソッドを裏側で定義してくれる。attr_accessorメソッドに指定されたインスタンス変数は、クラス外部から参照と変更の両方を行う事が出来るようになる。
「既定のアプリ」がグループポリシーによって非表示の場合に一時的に再表示してみよう

Windows10の「既定のアプリ」がADのグループポリシーで非表示になっているときに
一時的に「既定のアプリ」を操作したいことがあってバッチファイルで操作できるか試してみました

まず社内で困ったときはIT担当者に相談しましょう。
ただしIT担当者が分かっていないこともあるのでググって調べた結果も相談した方が良いです。

それでもどうにもならない場合は自分で試してみるのが良いでしょう。



#バッチファイルでリスク少なく簡単操作

「既定のアプリ」が非表示の場合に、表示させるにはレジストリを操作します。

レジストリというと通常はリスクを伴うので触れないのですが、今回はバッチファイルで操作するため、また「規定のアプリ」が非表示になっているところを表示させるだけなので万が一失敗しても影響は少ないです。

それに今回の作業ではレジストリをバックアップしますのでリスクは少ないです。

下記が「既定のアプリ」が非表示の状態の画像です。

![既定のアプリ1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226233/155876ac-d0f7-cf0e-f198-d4e5b725677d.jpeg)

普通はあるはずの「規定のアプリ」がない場合はあせりますよね。

今回はグループポリシーで「規定のアプリ」が非表示されているのが原因でした。

#下記が「既定のアプリ」を表示させるため作成したバッチファイルです。

コマンドプロンプトが良く分からない方はデスクトップに「アプリ表示」というフォルダを作成して枠内の文字をメモ帳に張り付けて、拡張子を「.bat」にしたファイルを実行すればOKです。

```

@echo off

echo. ##############################################
echo. ##                                          ##
echo. ##                                          ##
echo. ##      既定のアプリを表示する作業です        ##
echo. ##                                          ##
echo. ##                                          ##
echo. ##############################################


@echo.
@echo.
@echo.
SET /P ANSWER="「規定のアプリ」の設定値をバックアップしますか (Y/N)？"

if /i {%ANSWER%}=={y} (goto :yes)
if /i {%ANSWER%}=={Y} (goto :yes)
if /i {%ANSWER%}=={n} (goto :no)
if /i {%ANSWER%}=={N} (goto :no)

:yes

@echo.
@echo.
reg export HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Explorer CExplorer.reg

timeout 1　> nul 2>&1

reg export HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Explorer UExplorer.reg

timeout 1　> nul 2>&1


@echo.
@echo.
start %UserProfile%\Desktop\アプリ表示

@echo.
@echo. フォルダ内に「CExplorer.reg」「UExplorer.reg」がバックアップされました
@echo.

SET /P ANSWER="「規定のアプリ」の設定を削除しますか (Y/N)？"

if /i {%ANSWER%}=={y} (goto :yes)
if /i {%ANSWER%}=={Y} (goto :yes)
if /i {%ANSWER%}=={n} (goto :no)
if /i {%ANSWER%}=={N} (goto :no)

:yes

@echo.
@echo.
reg delete "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Explorer" /f

timeout 1　> nul 2>&1

reg delete "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Explorer" /f

timeout 1　> nul 2>&1

@echo.
@echo. 「既定のアプリ」の設定を削除しました
@echo. 設定から「既定のアプリ」が表示されるか確認してください
@echo.
pause

@echo.
SET /P ANSWER="「規定のアプリ」の設定を戻しますか (Y/N)？"

if /i {%ANSWER%}=={y} (goto :yes)
if /i {%ANSWER%}=={Y} (goto :yes)
if /i {%ANSWER%}=={n} (goto :no)
if /i {%ANSWER%}=={N} (goto :no)

:yes

@echo.
@echo.
reg import "%UserProfile%\Desktop\アプリ表示\CExplorer.reg"

timeout 1　> nul 2>&1

reg import "%UserProfile%\Desktop\アプリ表示\UExplorer.reg"

timeout 1　> nul 2>&1

gpupdate /force > nul 2>&1


@echo.
@echo. コマンド終了します。お疲れさまでした
@echo.
timeout 3　> nul 2>&1

pause

:no

@echo.
@echo. コマンド終了します。お疲れさまでした
@echo.

timeout 3　> nul 2>&1

```

コマンドプロンプトは対話式にしました。基本的に「yes」です。「no」にすると作業をスキップします。

「yes」は「Y」「y」どちらでも問題ないです。

「timeout」のコマンドはなくても良いと思いますが、念のためコマンド間の時間を空けるため記載しました。

あまり役に立つことは少ないと思いますが、何かの役に立てると嬉しいです。

では。
クイズアプリを作るぞ（その1）

どうも合原です。
最近、現行のサービスサイトとは、全く別で、クイズアプリ作成の緊急要請があり、どう作ろうかなと悩んでいる次第です。

せっかくなので、nuxtjsを使って楽にいい感じに...
かつ、
一部websocketを使って、テレビ番組であるような画面切り替えありのクイズアプリにしたい

と思います。

あとは、せっかくなので、サーバレスアプリで、コスト書けずに行きたいなと　。。firebaseも使う想定です。
イベントフックなど便利そうなので。

（現時点の未来予想図）

と言うことで、まず本稿では、久々に`docker`使っての環境構築をしたので、簡単にまとめます。

# 構成
```sh
├── Dockerfile
├── LICENSE
├── README.md
├── docker-compose.yml
└── nuxt
```
と言った形で、nuxt　配下に　nuxtjsを配置します。

# docker-compose.yml

```yml
version: '3'
services:
  nuxt:
    build: .
    command: yarn run dev
    working_dir: /nuxt
    volumes:
      - ./nuxt:/nuxt
    ports:
      - "3000:3000"
      - "9229:9229"
```

## setup
### build image
`docker-compose build nuxt `

### create nuxt app
`docker-compose run nuxt create-nuxt-app`

nuxtjs初回インストーる時の各種項目設定に答えて、完了。


※UIにはvuetifyを使います
※テストはnone

そのほかについても、後からでも変更可能なので、適宜対応してきます。

以上！まだ、なんてことはない内容ですが、
今後、開発工程を寄稿して行きたいと思います！乞うご期待！
そんな弊社では、現在フロントエンジニアを全力で募集中です！
我こそはという方、ぜひ！お待ちしております！

https://www.wantedly.com/companies/playlife/post_articles/313307
参照渡し+Method


##参照渡し（引数にアドレスを渡す）
#####基本型変数などではなく配列など引数としてアドレスを渡していることを参照渡し、参照渡しを行うと呼び出し先で加えた変更が呼び出し元にも影響を与える
『配列をメソッド呼び出しで渡すと』
.呼び出し元の配列のアドレスが、呼び出し先の引数にコピーされる
.呼び出し先で配列の実体を書き換えると、呼び出し元にも影響を与える


##値渡し（値そのものが渡されること）
『基本型の変数をメソッド呼び出しで渡すと』
.呼び出し元の変数の内容が、呼び出し先の引数にコピーされる
.呼び出し先で引数の内容を書き換えても呼び出し元の変数は変化しない


##参照渡しと値渡しの例

```MethodArray.java

	public static void main(String[] args) {
			  int num = 8;
			  int array[] = {10, 4};

			  System.out.println(num);
			  System.out.println(array[0]);

			  test(num, array);

			  System.out.println(num);
			  System.out.println(array[0]);
			}

			private static void test(int num, int array[]){
			  num = 5;//ここで代入しても変わらない値渡し
			  array[0] = 12;//アドレスを渡すので変わる
実行
8
10
8
12

```
メタデータ API 

#目次

[WaveDataflow](#WaveDataflow)
[WaveDashboard](#WaveDashboard)
[WaveApplication](#WaveApplication)
[WaveDataset](#WaveDataset)
[WaveLens](#WaveLens)
[WaveXmd](#WaveXmd)
[WaveRecipe](#WaveRecipe)
[WaveTemplateBundle](#WaveTemplateBundle)
[Tableau CRM REST API の概要](#Tableau CRM REST API の概要)

#WaveDataflow
###PROJECT PATH

```
force-app/main/default/wave/aaaaa
```
###構成ファイル
- wdfファイル
- meta.xml

#WaveDashboard
###PROJECT PATH

```
force-app/main/default/wave/aaaa
```
###構成ファイル
- wdashファイル
- meta.xml

#WaveApplication
###PROJECT PATH

```
force-app/main/default/wave/aaaaa
```
###構成ファイル
- meta.xml

#WaveDataset
###PROJECT PATH

```
force-app/main/default/wave/aaaaa
```
###構成ファイル
- meta.xml

#WaveLens
###PROJECT PATH

```
 force-app/main/default/wave/aaaa
```
###構成ファイル
- wlensファイル
- meta.xml

#WaveXmd
###PROJECT PATH

```
  force-app/main/default/wave/aaaaa
```
###構成ファイル- meta.xml

#WaveRecipe
###PROJECT PATH

```
  force-app/main/default/wave/aaaaa
```
###構成ファイル
- wdprファイル
- meta.xml

#WaveTemplateBundle
###PROJECT PATH

```
force-app/main/default/waveTemplates/aaaaaa
```
###構成ファイル
- wdfファイル
- meta.xml

#Tableau CRM REST API の概要

###Tableau CRM REST API を使用して、次の機能を実行できます。
- クエリを Tableau CRM Platform に直接送信する。
- Tableau CRM Platform にインポートされたデータセットにアクセスする。
- Tableau CRM レンズを作成および取得する。
- Tableau CRM ダッシュボード、レンズ、およびデータフローの以前のバージョンをバックアップおよび復元する。「履歴 API を使用した Tableau CRM アセットの以前のバージョンのバックアップおよび復元」を参照してください。
Tableau CRM のデータフロー、レシピ、接続を実行、スケジュール、同期します。「Tableau CRM データの実行、スケジュール、および REST API との同期」を参照してください。
- データフロージョブノードのリストと各ノードの詳細を取得する。
- XMD 情報にアクセスする。
- 標準データセットを作成および取得する。
- データセットバージョンのリストを取得する。
- Tableau CRM アプリケーションを作成および取得する。
- Tableau CRM ダッシュボードを作成、更新、および取得する。
- アプリケーションの連動関係のリストを取得する。
- ユーザが使用可能な機能を決定する。
- Tableau CRM レポートスナップショットのトレンドを使用およびスケジュールする。
- 同期済みデータセット (接続済みオブジェクトともいう) を操作する。
- 「eclair」地図グラフを取得、追加、更新、削除する。
- データコネクタを操作する。
- レシピメタデータを取得または更新する。
- オブジェクトおよび特定のデータセットバージョンが継承共有をサポートしているかどうかを確認する。
- 組み込み Tableau CRM アプリケーションの自動インストール要求を作成、更新、取得する。
- SmartDataDiscovery API により、Salesforce オブジェクトの Einstein Discovery 予測を取得する。詳細は、「Einstein 予測サービス」を参照してください。



#参考文献
[メタデータAPI](https://developer.salesforce.com/docs/atlas.ja-jp.api_meta.meta/api_meta/meta_intro.htm)
[Tableau CRM REST API 開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.230.0.bi_dev_guide_rest.meta/bi_dev_guide_rest/bi_rest_overview.htm)
[Tableau CRM REST API の概要](https://developer.salesforce.com/docs/atlas.ja-jp.230.0.bi_dev_guide_rest.meta/bi_dev_guide_rest/bi_rest_overview.htm)
GCPのGCR(Container Registry)にイメージをデプロイする

GCRにコンテナをデプロイしてみよう！と思ってやってみたら意外とつまづいたので、記事にしたいと思います。

前提として、
- dockerのimageが作成済みである
- gcloudコマンドが使用できる
としております。

# Container Registry のタグ付け
ローカルでビルドしたイメージにはリポジトリ名が明示されていないため、以下に示す`docker tag`コマンドでGCRにpushできる別名を設定する必要があります。
※以下のサンプルは、postgresのimageです。

```
# タグ付け前
$ docker images

REPOSITORY                              TAG         IMAGE ID       CREATED      SIZE
postgres                                11-alpine   05602e6d633a   8 days ago   156MB
```
では、タグを付けていきます。

```
$ docker tag 05602e6d633a gcr.io/GCPのプロジェクトID/postgres
```
結果を見てみましょう

```
$ docker images

REPOSITORY                              TAG         IMAGE ID       CREATED      SIZE
postgres                                11-alpine   05602e6d633a   8 days ago   156MB
gcr.io/wikijs-ttk-start/postgres        11-alpine   05602e6d633a   8 days ago   156MB
```
これでタグをつけることができました。
次は、Container Registry にアップロードしていきます。

# Container Registryへアップロード
以下のコマンドを実行して、アップロードしていきます。
※ここで、GCPの接続についてエラーが出る方は、GCPの接続が済んでいないことが原因として考えられるので、エラー内容で検索してみてください。
APIを有効にしていないことも考えられます。

```
$ gcloud docker -- push {gcr.ioから始まるimage名}

# 今回のsample
$ gcloud docker -- push gcr.io/wikijs-ttk-start/postgres
```

これでアップロードが完了しました。
GCPのコンソールから確認してみると、アップロードしたimageができているはずです。