OmniAICreator/Qiita-1.07M huggingface dataset:
【個人開発】さんまを焼くだけのアプリのさんまの焼き具合の調整方法についてまとめてみた

# はじめに
以下のアプリについて、焼き具合の調整ってどうやってるの？と何人かに聞かれたので書くことにしました。

https://gifted-curran-aecac2.netlify.app/

https://qiita.com/cabacho/items/1b3d4565f8f40aa52873

# 流れ
まず、画像を全て重なるように、positionで指定して重ねます。
そしてz-indexで画像の優先順位を指定します。
そうすることで、一番上に表示されてる画像をcssのanimationとkeyframeを使って、徐々にopacity: 0;にすると下の画像が浮き上がってきます。
生の状態のさんま(一番上に表示されるようにする)
焼きの状態のさんま(二番目に表示されるようにする)
焦げた状態のさんま(三番目に表示されるようにする)
の3枚を重ねて、時間をずらして順次表示されるようにすることで焼き色の変化を実現しています。

## コード

index.html

```html
<div class="sanma">
  <img id="nama" src="./images/nama.png" />
  <img id="yaki" src="./images/yaki.png" />
  <img id="koge" src="./images/koge.png" />
  <p id="text"></p>
</div>
```

style.css

```css
/* 魚エリア */
.sanma {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
img {
  position: absolute;
  width: 50vw;
}

.namasakana {
  animation: fade-out1 5000ms ease-in;
  animation-fill-mode: forwards;
}
#nama {
  z-index: 3;
}
@keyframes fade-out1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.yakisakana {
  animation: fade-out2 10000ms ease-in;
  animation-fill-mode: forwards;
  opacity: 1;
}

#yaki {
  z-index: 2;
}
@keyframes fade-out2 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#koge {
  z-index: 1;
}

```

## ポイント
ポイントとしては、上のコードからわかるように、idでz-indexを指定し、classでアニメーションを指定するところです。
最初モーダルが表示されてスタートしますが、animationを設定しているのはcssなので、idでanimation指定をしてしまうとモーダルの後ろで焼き始めてしまいます。
なので、id指定だけして、idにはz-indexのみを設定することでanimationはまだ実装されていないことになります。

classはどうやって作成してるかというと、javascriptで作成するようにしています。
モーダルを消すボタンを押した時に発火するように設定し、モーダルが消えるボタンを押した時にそれぞれのclassを設置するコードを記載しているため、モーダルが消えた時にclassがそれぞれ定義され、animationが始まっている形になります。

# おわりに
このアプリはcssとjavascriptがバトンを渡し合って処理をしている感じになり、cssの定義をjavascriptで行っていたりするのでなかなかややこしいのですが、作ってみるとパズルゲームみたいで楽しかったです。
イラストは自分で書くと調整できてやりやすいのでおすすめです。

最後まで読んでいただきありがとうございました。
【discord bot】失われたRhythm botを無料で復活させる

## 2021年9月15日 discord rhythm bot 終了...
discord botで有名なrhythmが終了してしまい、なんとか自分のサーバーでホストできないかと調べ始めたのが経緯です。

もちろん今の時代　〇〇 github　と検索かければソースコードなんてすぐみつかるだろうと思い検索してみると案の定見つかりました！

https://github.com/Malexion/Rhythm-Bot

※本家rhythmとは違います。

## ローカル動作確認

エラーがいくつか出ましたがなんとか動いてdiscord botとも連携させることに成功しました！

本題ではないため簡単にまとめておきます。

os: windows10 home

```bash
git clone https://github.com/Malexion/Rhythm-Bot

cd Rhythm-Bot

npm install --global --production --add-python-to-path windows-build-tools

# 途中で止まってスタッキング
# https://github.com/felixrieseberg/windows-build-tools/issues/208
# によると...

npm install --global --production --add-python-to-path --vs2015 windows-build-tools

# 正常にインストール完了

npm install node-gyp -g
npm install typescript -g

npm install

# エラー発生
# 抜粋: VCINSTALLDIR not set, not running in VS Command Prompt
# https://github.com/nodejs/node-gyp/issues/2203

set VCINSTALLDIR=C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\
npm config set msvs_version 2017 --global

npm install
```
./bot-config.json

```json
{
    "discord": {
        "token": "tokenをdiscord developerから入手"
    }
}
```

```bash
npm start
```

ここで !join, !searchなどが使えるようになり実際にチャンネルに入ってくれます。

しかし!playをしても歌ってくれません...

logを見ると、ffmpegのエラーがでたのでinstallします。

```bash
# https://stackoverflow.com/questions/60925319/i-am-getting-this-error-ffmpeg-avconv-not-found

npm i ffmpeg-static

npm install
npm start
```


ここで自分の環境では正常に動くようになりました！

途中でpermissionのエラーが出ましたがdiscordの設定でbotに管理者権限を付与すると解決しました(チャンネルにbotを招待する段階できかれる)。

discord bot関係の設定(token取得、チャンネル招待のやり方)はこちらを参考にしました。
https://qiita.com/yuto0214w/items/1ecee25efca6b5b7445b

## デプロイする

このままでは自分のpcをつけっぱなしにしておかないといけません...

なので複数人いるサーバーで皆で使いたいとなるとこのままでは使い勝手が悪いです。

お金はかけたくないので今回はherokuを使うことにしました。

githubを見ているとPR段階ですがコンテナ化して使いやすくしてくれている人がいたのでこちらを使います。

ソース: https://github.com/dudeofawesome/Rhythm-Bot/tree/feat/containerize-and-format

PR: https://github.com/Malexion/Rhythm-Bot/pull/57

`git clone https://github.com/dudeofawesome/Rhythm-Bot/tree/feat/containerize-and-format`

し、ContainerfileをDockerfileに名前変更します。(heroku container:pushするため)

```bash
cd Rhythm-Bot
heroku create app-name #任意
heroku git:remote -a app-name
heroku config:set DISCORD_TOKEN=取得したtoken
heroku container:push worker
heroku container:release worker

# worker process が動いていなればheroku ps scaleでonにしましょう。
```

これだけでデプロイできました！思ったよりすんなりいってびっくりです。

たまにbotの歌い始めにノイズが入ることがあるくらいで音質などは違和感なく使えています。（herokuの無料枠だから仕方ない（？））

rhythm bot をまた使いたい方は是非試してみてください！

注意: 各ソースコード、github リポジトリは2021/10/1の状態です。
FAXをなめるな

[原作へ](https://marat.to/posts/2021-10-01-dont-trash-the-fax/)

テレワークを阻害するFAXを河野太郎は全廃に進めている中、デジタル化が進んでいない各省から反論が殺到している。確かに、FAXは古い技術で不便なんだが、それに相当する技術は他にはない。情報セキュリティ専門家の私の論拠を聞いてほしい。

## アクセス権限

FAXは部屋に置き、鍵をかけ、キーをアクセスが必要な人のみに渡せば終わり。あなたは完璧なセキュリティシステムを完成させたのだ。こうなれば、クレジットカード情報を送っても問題はない。正に最近までVisaとMasterCardが運用しているクレジットカード情報セキュリティ委員会（PCI SSC）は会費の受金をそのように行っていた。

クレジットカード番号を含めた注文書をFAXで受けるとオンライン決済として扱われず、MOTO取引（Mail Order Telephone Order）となる。この取引の秘密性を守るための要件はPCI SAQ-Bという標準に定められている。たった１５件の要件しかないから、実施するのも容易なのだ。

一方、ウェブ上のフォームにクレジットカード情報入力欄を作ってしまうとPCI SAQ-Dに変わってくる。この要件が２３０件以上に増え、専門知識も必要になる、万葉集に近い冗長な標準を実施しなければならない。暗号、サーバー、ネットワークセキュリティの全てを意識していてもいつかハッキングされる公算大。

FAXをハッキングする技術はありえなくはないが、高校野球のチームが巨人に勝つことと同じぐらいの奇跡なのだ。

## 正確に1回配信の確認ができる

スパムに入ったり、添付ファイルがアンチウィルスに削除されたり、サイズが大きいと受信しなかったりする電子メールは届いたかどうか確認する方法がない。届いたとしても、数人の事務局全員に届いて、読む必要もない情報は何枚かコピーされる。

その一方、FAXは正確に一枚のコピーを作り出して送信者に受信結果レポートを自動的に返信することができる。つまり、FAXは正確な受領証を発行してくれる唯一のシステムなのだ。

## ユーザー登録とプライバシー

メールを送信するためにはパソコンまたはスマホが必要な上、メールサービスのアカウントも必須。今時の若者はメールを使おうとしていないし、自分のメアドを第三者に公開するのに対しても抵抗を感じている。一回メールを送ってしまったら、メルマガが進撃の巨人のように受信トレイになだれ込むという悩みには私も共感している。

FAXはちゃんと匿名性を守りながら、なんとわずか11桁の電話番号を入れるだけでなんでも送れてしまう他にない使い勝手を提供している。まだメールアドレスを持っていない小学生や未だにパソコンを使いこなしていない高齢者でもコンビニさえあればFAXを送れるという理想的なUXをもった代替システムはどこにあるだろう。

そろそろFAXは花道を飾る時期に来ている。こういった大事な特徴を上回った標準的なシステムはいつか蘇るだろうが、おそらくそれは電子メールではないのだ。
DockerとWireMockで手軽に便利なモックを立てる

# 何故WireMockにしたか
もともとスマホアプリ開発のAPI呼び出しのユニットテスト用にモックが欲しかった。
AndoroidとiOSのユニットテスト環境にモック用のライブラリを入れるのも良いのだが、
ローカル環境にモックのサーバーを立ててしまえば、両方のアプリから使えるので楽だと踏んだ。

しかもWireMockはDockerのイメージも用意されているので、
自分の環境を汚さずに手軽に入れらるのもいいなと思った。

# 環境
Windows10
Docker Desktop 3.3.1.6

# 手順
基本的には @mikankitten　さんの[WireMockをローカル環境に導入する](https://qiita.com/mikankitten/items/87b5f0a5c3c5ea45d1fe) を参考にして進めればOK。
なので基本的な流れと詰まったところだけ記載する。

1. Dockerでイメージ「rodolpheche/wiremock」を落としてコンテナ作成
2. Dockerのマウント先のディレクトリにスタブの設定を書く
3. @mikankitten さんのありがたいスクリプトでスタブを登録
4. Dockerコンテナを再起動

## 詰まったところ、その①　Dockerコンテナのマウント先が分からない
そもそもDockerを普段使ってない人の悩みに違いない。
[メモの日々](http://ogawa.s18.xrea.com/tdiary/20210312p02.html) に助けられ、下記の方法で確認出来た
> 「WSL起動中にエクスプローラのアドレスバーへ「\\wsl$」と入力する

そして以下のパスにアクセス
\\wsl$\docker-desktop-data\version-pack-data\community\docker\volumes


なので、ファイルエクスプローラーで上記パスを叩くと、こんな感じで現れる↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/8f7a0ac2-c13c-6cf0-2dcf-72b0293004c4.png)

## 詰まったところその② URLパスでのマッチング
普段、正規表現書かない人だから困った感もある。
まあ、ハマったというほどでもないがTry＆エラーでガチャガチャした。

例えば、URLで/api/GET200/ を含むアクセスにマッチさせたい場合は下記の様にする。

```GET200.json
{
    "request": {
        "method": "GET",
        "urlPathPattern": "/api/GET200/([ -~]*)"
    },
    "response": {
        "status": 200,
        "headers": {
            "Content-Type": "application/json"
        }
    }
}
```
urlPathPatternにURLパスを指定し、
GET200/の後は「いかなる文字列も含む」という意味合いで正規表現「([ -~]*)"」を記載している。

今回はこのやり方でほぼほぼ捌けたが、他のマッチング方法については[本家サイト](http://wiremock.org/docs/request-matching/)を参考にするのが良い。

## 以上
まあこんなところ。
ちなみに作ったスタブがちゃんと動いているかは、
Advanced Rest ClientからHTTPリクエストして結果確認した。

このツール、GUIで直観的に使い易いので重宝している。

それでは、このへんで。
Amplify CLIで新しく複数の環境を作成する方法

# はじめに
Amplify CLIを新しく環境を作成する機会がありましたので簡単にまとめておきます。

#Amplify CLIで環境を作成
* `amplify env list`コマンドでで現在ある環境を確認できます。

* `amplify env add`コマンドで「? Do you want to use an existing environment」今ある環境を使いたいか聞かれるので「No」を選択します。(`amplify env add (環境名)`でも作れたと思います。)
* 次に「? Enter a name for the environment」と聞かれるので、環境名を入力します。
* その後、同じように`amplify env list`コマンドで確認すると、作った環境が増えていますので、`amplify env checkout (環境名)`で変更できます。
* さいごに`amplify push`コマンドをするとAmplifyコンソールに反映されると思います。

# さいごに
途中から環境をもう一つ作りたいときや、検証用として試しに動かしてみたいといったときに複数の環境を簡単に作れるのはありがたいです！
Amplifyのバックエンド開発でハマったことと、その対処方法

# はじめに
今回、Amplifyを使っての開発でハマったことは、前回まとめた、[ AWS Amplifyで既存のCognito User Pool / DynamoDBをimportする方法 ]
　https://qiita.com/03hiro/items/118f6e0f66d6cdff439b
で作っていたアプリです。
その中で、「Cognitoでの認証機能の実装」、「AmplifyでCognitoのユーザープールからユーザー情報を取得する」、「AmplifyでDynamoDBのからユーザー情報を取得する」。また、「開発の経験がないことによってハマったこと」。この4点についてまとめようと思います。

Amplifyを使うのが慣れていなかたったこともあり、かなり作るのに時間がかかってしまい、最初の方での作業でハマったことに対する対処方法が違う点があるかもしれませんが、その際は教えていただけたら幸いです。

###1、Cognitoでの認証機能の実装でハマったこと（実践したことも）
1、`amplify import auth`コマンドで既存のCognitoをimportする
2、その後、Reactの「App.js」ファイルを書き換え、`amplify push`で更新した。
3、Amplify コンソールで確認すると、ビルドの際にエラーが発生していた。

####対処方法
環境変数が設定されていないことが原因でした。
１、Amplify コンソールを開く

２、サイドバーのアプリ設定>環境変数を選択肢する。

3、変数の管理ボタン押し、環境変数を設定する。
(今回の場合は[amplify/team-provider/info.json]から定義してある変数を設定しました)


###2、CognitoのUserPoolから自分以外のユーザー情報を取得する際にハマったこと（実践したことも）
1、APIを使ってのデータのやり取りについて未経験の為知識がなく、とりあえずそれらしいことを、片っ端から調べてみる。
2、調べると「aws-sdk」を使う必要があることは分かった。
3、以前勉強したチュートリアルでは「GraphQL API」で学習をしていたのでとりあえず、`amplify add api`コマンドで追加してみる。
4、CLIの`? Restrict API access`で「Yes」を選択するとエラーが起きる。
5、[4]をとりあえず置いといて、調べたコードを自分のに当てはめてみるが動かない。
6、自分では対処法が分からなかったので、先輩にアドバイスをもらう。

#### 対処方法
1、「aws-sdk」を`npm i aws-sdk`コマンドでインストールする。

2、「GraphQL API」でもできるが、「REST API」の方で今回は進めた。

3、上記の[4]での原因は、最初のCognitoでの設定が途中うまくいってなかった為、「Yes」にするとエラーが起きることが分かり、やり直すよりも今回は「No」を選択肢し、サーバー側の方で、設定を定義するようにした。

4、これ以降は、[前回の記事](https://qiita.com/03hiro/items/118f6e0f66d6cdff439b)の通りに進めたら取得ができました。

※ 5、作業を進めていくと、たまに「AWS IAM」がdefaultに切り替わってることがあり、最初は変わってることに気付かずにCognitoの認証が通らずハマりました。なので作業に入る前は、毎回使っているIAMを確認する必要があります。


###3、DynamoDBからユーザー情報を取得する際にハマったこと（実践したことも）
1、とりあえず、CognitoのUserPoolからユーザー情報を取得するやり方を参考にAPIの実装し`amplify push`をするとエラーが出てうまく更新されない。2、`amplify push`をするとエラーが出てうまく更新されない。
2、本来、APIを追加するとCLIの選択によってここで「Function」も作られるはずが、作られない。
3、取得方法を探すが記事などの内容のどこまでを参考にすれば良いのか分からない。
4、基本的な書き方を先輩にアドバイスをもらい実践するが動かない。
5、その後、アドバイスをもらいコードを書くが取得できない。

#### 対処方法
1、作業しているローカルの「git」や「Backend environments」などに手探りで色々と追加などをしたため、一度、`git clone`し作り直した。

2、「Function」が作られない原因はCLIの途中でエラーが起き最後まで完了していなかったことが原因でした。（ここでも「Restrict API access」が主な原因でした。。。）

3、動かなかったのは、コードを試したのがReactの方で試したのが原因でした。
`Create React App`では「　REACT_APP_（名前）　」のように一定の命名規則に則った環境変数をビルド時だけ読み込むのが仕様となっているそうです。
その為、その命名の規則ではない環境変数では読まれずに「セットした環境変数が読まれていない！」という問題が発生するみたいです。

4、2つ目の動かなかった原因は、APIのパスがもう一つのAPIのパスと同じだったのが原因でした。

5、[backend/function/app.js]に直接テーブル名を直接コードに落とし、「scan」で一括取得を試しました。
その後に「query」の書き方に変更し、取得する条件を加えていきます。（この辺りも前回の記事の通りに進めました）

### 4、開発の経験がないことによってハマったこと
正直、ここでの原因は最初の作業に入る前の環境を作る際に、あまり今後を意識しないで始めた為に後々になってから、遭遇しなくていいエラーにも遭遇したと思います。
手探りで作業を開始しので仕方がないとは思いますが、ここまで影響が出るとは思いませんでした。。。

gitやAmplify environmentsの環境を開発用（dev）と本番用（prod）として初めから分けていなかったことが、作業途中で気付き（本番用のUserPoolと開発用のUserPoolを分ける際）、environmentsではprodなのに取得しているUserPoolはdevといったおかしな事になってしまいました。

# さいごに
今回はアプリを作っていく上で一日に少なくとも3、４回ハマってしまい、作業が止まってしまいました。
それの半分は作業している環境が悪かったことが原因だと思います。
今起きているエラーの原因は、書いているコードが違いエラーが起きているのか、それともそれ以外が原因なのかが、これだと分からなくってしまいますので、環境だけはしっかりと整えた上で今後は作業していきたいと思いました。

また、今回一度だけ、「AWS Amplify」自体の不具合にも遭遇したため、今後経験を積んで行き、自分に問題があるのか、それともサービス自体に問題があるのかを見極める力も培っていきたいです。
3点を通る平面の方程式の求め方

#スタック・オーバーフローで,2行で計算できる方法を教えてもらいました。
CASIOさんの4行より短くなるとは思いませんでした。

オリジナル(３通りの求め方)

https://manabitimes.jp/math/679

2行で計算できる方法

https://ja.stackoverflow.com/questions/82776/sympy%e3%81%aelist%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9matrix-list%e3%82%92%e6%95%99%e3%81%88%e3%81%a6%e4%b8%8b%e3%81%95%e3%81%84-3%e7%82%b9%e3%81%ae%e5%b9%b3%e9%9d%a2%e3%81%ae%e6%96%b9%e7%a8%8b%e5%bc%8f


#外積と法線ベクトルを用いる方法
上記参照。

#連立方程式を解く方法
```python
from sympy import *
var('a b c d x y z')
var('Ax Ay Az')
var('Bx By Bz')
var('Cx Cy Cz')
myTitle="2：連立方程式を解く方法        "
myEq =a*x+b*y+c*z+d
myEqA=myEq.subs({x:Ax,y:Ay,z:Az})
myEqB=myEq.subs({x:Bx,y:By,z:Bz})
myEqC=myEq.subs({x:Cx,y:Cy,z:Cz})
ans=solve([myEqA,myEqB,myEqC],[a,b,c,d])
MySubs={Ax:1,Ay:1,Az:2,Bx:0,By:-2,Bz:1,Cx:3,Cy:-1,Cz:0}
myEq=simplify((ans[a]*x+ans[b]*y+ans[c]*z+d).subs(MySubs)/d)*(-4)
print("#",myTitle,myEq)
# 2：連立方程式を解く方法         x - y + 2*z - 4
```
#ベクトル方程式を用いる方法
```python
from sympy import *
var('myx myy myz')
var('x y z')
var('s t')
var('Ax Ay Az')
var('Bx By Bz')
var('Cx Cy Cz')
myTitle="3：ベクトル方程式を用いる方法   "
myx=(1-s-t)*Ax+s*Bx+t*Cx
myy=(1-s-t)*Ay+s*By+t*Cy
myz=(1-s-t)*Az+s*Bz+t*Cz
MySubs={Ax:1,Ay:1,Az:2,Bx:0,By:-2,Bz:1,Cx:3,Cy:-1,Cz:0}
eqx=x-myx.subs(MySubs)*(-1)
eqy=y-myy.subs(MySubs)*(-1)
eqz=z-myz.subs(MySubs)*(-1)
ans=solve([eqx,eqy],[s,t])
print("#",myTitle,eqz.subs({t:ans[t],s:ans[s]})*2)
# 3：ベクトル方程式を用いる方法    x - y + 2*z + 4
```

#CASIO＞3点A、B、Cを含む平面の式 

https://qiita.com/mrrclb48z/items/90e6010a2828eeda0810
[Ruby] AtCoder過去問 B - Picture Frame

##はじめに
AtCoder過去問をRubyで解いてみました。
よろしくお願いします。

問題はこちらから確認してください↓

https://atcoder.jp/contests/abc062/tasks/abc062_b

##B - Picture Frame
まずは入力を受け取ります。

```ruby
h, w = gets.split.map(&:to_i)
pics = readlines.map(&:chomp)
```

2行目以降は文字列を配列として受け取っています。
入力例1で言うと、picsは```["abc", "arc"]```となっているはずです。

続いてフレームの一番上（1行目）と一番下を作ります。
つまり```#```だけの行を作ります。

これはw+2の```#```の数を用意します。
私は配列を用意してtimesをw+2回、回して配列に#を入れていきます。

```ruby
h, w = gets.split.map(&:to_i)
pics = readlines.map(&:chomp)

top_bottom = []
(w+2).times do
  top << "#"
end
```

出力するときは```top_bottom.join```で配列の中の```#```を結合して一つの文字列にしてくれます。

```ruby
h, w = gets.split.map(&:to_i)
pics = readlines.map(&:chomp)

top_bottom = []
(w+2).times do
  top << "#"
end

puts top_bottom.join
```

続いて写真の中身を出力していきます。
picsの中の文字列にそれぞれ先頭と最後に```#```を足してあげて出力します。

each文を回して式展開を利用して#を付け加えます。

```ruby
h, w = gets.split.map(&:to_i)
pics = readlines.map(&:chomp)

top_bottom = []
(w+2).times do
  top << "#"
end

puts top_bottom.join
pics.each do |pic|
  puts "##{pic}#"
end
```

そして最後にもう一度top_bottomを出力して完成です。

```ruby
h, w = gets.split.map(&:to_i)
pics = readlines.map(&:chomp)

top_bottom = []
(w+2).times do
  top << "#"
end

puts top_bottom.join
pics.each do |pic|
  puts "##{pic}#"
end
puts top_bottom.join
```
配列や連想配列の違いとは

#最初に
私**（プログラミング初心者）**はPHPを学習していて、今までずっと理解をあやふやにしていた配列や連想配列が今となってやっと理解できたので共有致します！
役に立ったら幸いです！！

↓↓↓今回は以下の実行環境でやります↓↓↓
**PHP Version 7.4.9**

どうぞよろしくお願いします！！！

##配列や連想配列とは
変数が一つの値を保存できる箱だとすれば、**配列とは複数の値を保存できる箱**です。
また、配列はキーが数字に対して、**連想配列とはキーを好きな名前（わかりやすい名前）に設定できる配列**です。

これだけを頭に入れて、実際に下のコードの結果はどうなるかを手動かしながら自分の目で見て、配列や連想配列を感覚的に理解していきましょう！！

###配列と連想配列の書き方
```PHP
// 変数（おまけ）
$variable = 1;
echo $variable;

// （一次元）配列
$array = [1, 'プログラミング初心者'];
echo $array[1];
// 配列の中身を確認する
echo '<pre>';
var_dump($array);
echo '</pre>';

// （一次元）連想配列
$asso_array = [
  '数字' => '1',
  '文字列' => 'プログラミング初心者'
];
echo $asso_array['数字'];
// 配列の中身を確認する
echo '<pre>';
var_dump($asso_array);
echo '</pre>';

// 二次元配列
$array_2 = [
  [01, '初心者'],
  [02, '中級者']
];
echo $array_2[1][0];
// 配列の中身を確認する
echo '<pre>';
var_dump($array_2);
echo '</pre>';

// 二次元配列連想配列
$asso_array_2 = [
  '01' => [
    '特徴' => '数字'
  ], 
  '初心者' => [
    '特徴' => '文字列'
  ]
];
echo $asso_array_2['01']['特徴'];
// 配列の中身を確認する
echo '<pre>';
var_dump($asso_array_2);
echo '</pre>';
```

#最後に
ちょっとしたクイズです。
三次元配列・連想配列、四次元配列・連想配列・・・と自分で書いてみましょう〜（配列の中身は自由です）
bootstrapのモーダルとautosizeの組み合わせ

# やりたいこと

bootstrapモーダル内のtextareaに対してautosizeメソッドを適用させたい。

※autosizeとは
textareaの高さを自動調節してくれるプラグイン。詳しくはこちら。

https://www.jacklmoore.com/autosize/

# 課題

モーダル出現時にautosizeを適用させても、高さが自動調節してくれない。
適用はできているようだが、もともと長文のデータがあった場合に、それに合わせた高さにならないため、最初は全文が見えない状態になる（改行を入れると自動調節される）。

# ソースコード(失敗例)

```html
<!-- モーダルを呼びだすボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="btn">
  ボタン
</button>

<!-- モーダル内の要素 -->
<textarea id="ta"></textarea>
```

```javascript
// ボタンクリック時にautosize発動
$("#btn").click(function(){
	const ta = $("#ta")

	// textareaに長文を入れる
	ta.text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
	
	// textareaにautosize適用
	autosize(ta)
	autosize.update(ta)
})
```

これでは先ほど書いた通り、textareaの高さは自動調節されず、全文表示されない。

# ソースコード(成功)

ポイントはautosizeを発動するタイミングだった。
ボタンを押すタイミングではなく、モーダルが見えてから発動してみる。

```javascript
// モーダルが見えてからautosize発動
$("#exampleModal").on('shown.bs.modal', function(){
	const ta = $("#ta")
	// textareaに長文を入れる
	ta.text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
	
	// textareaにautosize適用で高さ自動調節
	autosize(ta)
	autosize.update(ta)
})
```

これならtextareaが自動調節され、全文が見える状態になる。
「モーダルが見えたとき」というイベントはbootstrapの公式で用意してくれている。

# 参考

https://github.com/jackmoore/autosize/issues/231

https://getbootstrap.jp/docs/5.0/components/modal/#show
【Rails】リーダブルなroute.rb

リーダブルなroute.rbの書き方

CRUDなbookコントローラと、photoコントローラ
独自アクションがそれぞれ一つづつある場合。

以下のように、コントローラ毎に分けることで、
開発者にとって読みやすくする。

``` routes.rb
Rails.application.routes.draw do
 controller :books do
  resources :books
  scope path: "hoge"
   get "subscribe", action: :subscribe
  end
 end
 controller :photos do
  resources :photos
   scope path: "hoge"
    get "unsubscribe", action: :unsubscribe
   end
 end
end
```
【個人開発】「お好み焼きをひっくり返すだけのアプリ」をPC対応にするついでにVueで作り直してみた

# はじめに

https://qiita.com/cabacho/items/38cb8ce97c877d36d4dc

について、PCでの対応をするために調整する予定でしたが、ついでにVueで作り直してみました。
約１日かかりましたが、なんとか形にしました。

https://zen-sinoussi-c18c33.netlify.app/

#　使用技術
フレームワーク：Vue.js
UIフレームワーク：Vuetify
ライブラリ：vue2-touch-events

# デプロイ
Netlify

# 作り直してみての感想
程よい感じにVueの勉強になりましたが、このくらいの規模感だと、フレームワークなしの方が動き的にもスムーズな感じがしました。
ちなみにデバイスの分岐はこんな感じにしましたが、多分もっと綺麗な書き方があると思うので順次いじっていきたいと思います。

```javascript
swipeStart: function (e) {
  const isTouchDevice = window.ontouchstart !== undefined;
  // デバイスがタッチ対応の時
  if (isTouchDevice) {
    this.startY = e.changedTouches[0].pageY;
  } 
  // デバイスがタッチ非対応の時
  else {
    this.startY = e.pageY;
  }
},
swipeEnd: function (e) {
  const isTouchDevice = window.ontouchstart !== undefined;
  if (isTouchDevice) {
    this.endY = e.changedTouches[0].pageY;
  } else {
    this.endY = e.pageY;
  }
    this.moveY = this.startY - this.endY;
    this.result();
},
result: function () {
   const moveY = this.moveY;
   if (moveY > 0) {
// 以下略
```

昭和レトロ感のあるゲームでしたが、vuetifyを使うとなんだかスタイリッシュになってる気がしますね。
vuetifyおしゃれ。

# おわりに
勉強のためと思ってやり始めましたが、こういうの作るの楽しいのでもはや趣味になってきています。
一人でお酒飲みながら何も考えずにできるアプリ、というコンセプトでこれからも作っていきたいと思います。
カスタム投稿タイプを追加する方法【Wordpress】

# プラグインを使う

こっちは調査していないのでわかりません

# function.phpに書く

`register_post_type()`を使う。これはinitアクションの中から呼び出す必要がある。

[リファレンス](http://wpdocs.m.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type)

使い方はこんな感じ

```bash
<?php register_post_type( $post_type, $args ); ?>
```

## $post_type

投稿タイプ名を定義します。最大20文字で大文字や空白はだめ。

## $args

引数の配列。

よく使いそうなのをあげてみると、

### labels

配列です。

**name：**投稿タイプの一般名、

**singular_name**：投稿タイプの複数形の名前。新規投稿と、更新の画面に表示される名前。デフォルトは↑のnameと同じになる。これは日本語だと関係ないかも。

**menu_name**：管理画面の左側のメニューに表示する名前です。デフォルトはnameと同じ。

### public

投稿タイプをパブリックにするかとうか。

trueにすると、管理画面とフロント(ユーザー)から利用することができる。

falseにするとフロントエンドと管理画面の両方とも利用できない。管理画面からのみ利用できるようにするには、後述する`show_ui`をtrueにすると、管理画面でだけ利用できるようになる。

### show_ui

デフォルトはpublicの引数。publicをfalse、show_uiをtrueにすることで管理画面でだけ利用できるようになる。

### has_archive

アーカイブ機能のON、OFF。デフォルトはfalse。

### menu_position

この投稿タイプがメニューに表示される位置。デフォルトはnullで、コメントの下に表示されるようです。

↓こんな感じで数字を指定するみたいです。

- 5 - 投稿の下
- 10 - メディアの下
- 15 - リンクの下
- 20 - 固定ページの下
- 25 - コメントの下
- 60 - 最初の区切りの下（コメントの下に区切りがある）
- 65 - プラグインの下
- 70 - ユーザーの下
- 75 - ツールの下
- 80 - 設定の下
- 100 - 二つ目の区切りの下（設定の下に区切りがある）

こんな感じに設定してみました。ニュースを追加します。

```php
// カスタム投稿タイプ ニュース の追加
function create_post_type_news()
{
  register_post_type('news',
    array(
      'labels' => array(
        'name' => __('ニュース'),
      ),
      'public' => true,
      'show_ui' => true,
      'menu_position' => 5,
    )
  );
}

add_action( 'init', 'create_post_type_news' );
```

## あらわれてるっっ
![スクリーンショット 2021-10-01 18.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490844/fcc0be9b-3677-775b-cfff-5b316288cad3.png)
[Zoom]ミーティングIDとパスコードの入力なしでミーティングに参加する

# やりたいこと
定例で開催されるミーティングに、ミーティングIDとパスコードなしで参加するショートカットを作成します。

# 構文
## URI
```
https://zoom.us/j/ミーティングID?pwd=パスコード
```
Windowsではブラウザ経由での起動となるため、個人的には好きではないです。
が、モバイルだとZoomアプリが直接起動されるので、メモアプリによく使うミーティングをまとめて記載しておいて、ホーム画面にショートカットを置いています。

## Windowsシェルスクリプト
```
zoommtg:"//zoom.us/join?action=join&confno=ミーティングID&pwd=パスコード"
```
Windowsで使うなら、こちらの構文がおすすめ。
ショートカットの場所に指定したり、エクスプローラのURI欄に貼り付けたりすることで、ブラウザを経由することなくミーティングに参加できます。
Vector3の一部を変更する時にnew Vector3を避けるべきか？

transform.position等を操作する時、「z軸だけを変更したい」といったケースが多い。

その場合
org = new Vector3(org.x, org.y, org.z + XX);
が良いのか、
org += Vector3.right * XX;
とするべきなのか。

あるいは「xz軸だけ取り出したい(y=0にしたい)」場合にも

org = new Vector3(org.x, 0f, org.z);
が良いのか、
org -= Vector3.up * org.y;
とするべきなのか。

new Vector3は処理が重いので乱用してはならないという話は良く聞くが、Vector3.up/right/forwardも重いという話を聞くので、実際に比べてみた。

(10/2追加) Vector3.rightは、内部的にnew Vector3をやっているとのコメントを受けて、あらかじめメモリ内にVector3.right結果を保管して使い回すパターンも追加。

```c#
float b = 1f;
Vector3 a;

var sw = new System.Diagnostics.Stopwatch();

for (int j = 0; j < 10; j++)
{
	sw = new System.Diagnostics.Stopwatch();
	a = new Vector3(1f, 2f, 3f);
	sw.Start();
	for (int i = 0; i < 100000f; i++)
		a = new Vector3(a.x, a.y, a.z + b);  //毎回new Vector3を実行

	TimeSpan res1 = sw.Elapsed;
	sw.Stop();

	sw = new System.Diagnostics.Stopwatch();
	a = new Vector3(1f, 2f, 3f);
	sw.Start();
	for (int i = 0; i < 100000f; i++)
		a += Vector3.right * b;  //Vector3.rightを使って計算

	TimeSpan res2 = sw.Elapsed;
	sw.Stop();

	sw = new System.Diagnostics.Stopwatch();
	Vector3 right = Vector3.right;  //あらかじめ用意したベクトルを使い回す
	a = new Vector3(1f, 2f, 3f);
	sw.Start();
	for (int i = 0; i < 100000f; i++)
		a += right * b;

	TimeSpan res3 = sw.Elapsed;
	sw.Stop();

	Debug.Log("new Vector3:" + res1 + "   +Vector3.right:" + res2 + "   +right:" + res3);
}
```

10回測定した結果は
new Vector3:00:00:00.0024888   +Vector3.right:00:00:00.0050720   +right:00:00:00.0058805
new Vector3:00:00:00.0018079   +Vector3.right:00:00:00.0048435   +right:00:00:00.0046762
new Vector3:00:00:00.0018118   +Vector3.right:00:00:00.0045480   +right:00:00:00.0050064
new Vector3:00:00:00.0018308   +Vector3.right:00:00:00.0044770   +right:00:00:00.0047784
new Vector3:00:00:00.0020278   +Vector3.right:00:00:00.0046388   +right:00:00:00.0046788
new Vector3:00:00:00.0018587   +Vector3.right:00:00:00.0045241   +right:00:00:00.0046999
new Vector3:00:00:00.0018140   +Vector3.right:00:00:00.0044989   +right:00:00:00.0051078
new Vector3:00:00:00.0019138   +Vector3.right:00:00:00.0044852   +right:00:00:00.0045006
new Vector3:00:00:00.0020559   +Vector3.right:00:00:00.0044618   +right:00:00:00.0044280
new Vector3:00:00:00.0017473   +Vector3.right:00:00:00.0044658   +right:00:00:00.0044725

new Vector3を使う方が、Vector3.rightを加算するより2倍早い。
Vector3.rightを変数に格納して使い回す方法でも変わらない様子。

計算に使うaやbを毎回ループ内で定義しなおしてみたり、乱数を入れた後に計算させてみても変わらなかった。
上記はWindows上での結果だが、android上でも同様。

これは同じframe内でループした結果であって、多数のオブジェクトがUpdate()内で毎frameに1回ずつ実行するような場合は変わるのだろうか？
Kubernetesって何？からECSでよくない？まで

## - Kubernetesとは - 
コンテナオーケストレーションツールで下記も同義

- Docker Swarm
- Cloud Foundry

## - コンテナオーケストレーションツールとは - 

下記のことを行ってくれる

- デプロイの自動化
- 複数のDockerホストの管理
- コンテナのスケジューリング
- ローリングアップデート
- スケーリング / オートスケーリング
- コンテナの死活監視
- 障害時のセルフヒーリング
- ロードバランシング


一言でいうと**複数のコンテナを統合的に管理するための技術がコンテナオーケストレーションです。**

## - 記載方法、読み方 - 

K8s ←kからsの間に8文字あるから
Kube

クバネティス
クーべネティス
クバ

## - Dockerとの違い - 

- Dockerはアプリケーションをコンテナに分離するために使用するもの。
- Kubernetesはコンテナスケジューラー/オーケストレーションツールであり、コンテナを管理するもの

なのでKubernetesとdockerはお友達のようなものなのです

## - Kubernetesのメリデメ -

### メリット

- オンプレ、クラウドどちらでも動く
- 活発な開発
- 複数のコンテナを管理できる


###　デメリット
- 学習コストが高い
- 更新が早い
- 運用上のServer台数が増える


## - Kubernetesの学習コストはなぜ高い？ - 

- 抽象的な表現が多い
- 拡張性が高すぎるので覚えることがたくさんある

### 抽象的な表現が多いの例

#### kube-controller-manager
Kubernetesのオブジェクトを処理するコントローラを実行、管理するコンポーネント
現状と理想状態を判定する

#### etcd
クラスタ内のにいくつのnodeが管理されているか、各wokernodeにどのアプリケーションが動いているのかなどの情報が格納されている。

#### kube-scheduler
アプリケーションをどのwokernodeで実行するのか
PodのNodeへの割り当てを行うスケジューラー 

#### kubelet
Nodeのメイン処理であるPodの起動・管理を行うエージェント

#### kube-proxy
Serviceが持つ仮想的なIPアドレスへのアクセスをルーティングする

## あれこれってECSで...
自分はAWS ECSを触っていたのでkubernetesってECSのほうが簡単に動かせるしEKSってなんでできたの？と疑問に思いました

### ECSとEKSの比較
- クラスターの料金がかかる0.10USD(EKS)
- VPC、Subnet、ALBの構成をマニフェストファイルをかけば自動で作成できる(EKS)
- 構築が容易(ECS)

... ECSでいいやん!
でもAWSがEKSのサービを始めたのが気になったので調べてみました

### EKSを始めた理由

ユーザーからKubernetesのサービスを始めてほしいと言われていた
**「ECSはAWSでしか動かない」**




\\\\\ **「ECSはAWSでしか動かない」** /////



## 参考にさせていただいた記事
https://qiita.com/Kta-M/items/ce475c0063d3d3f36d5d
https://dev.classmethod.jp/articles/ecs-and-eks/
https://atmarkit.itmedia.co.jp/ait/articles/1806/11/news029.html
nil slice と empty slice

sliceを扱う時、結果が入っていない空のsliceなのか、それともsliceはnilなのかを意識せずにテストを書いて、テストでこけたことがあった。

nil slice と empty slice の違いはこんな感じ。

```go
var a, b, c, d, e []int

b = nil
c = []int(nil)
d = []int{}
e = make([]int, 0)

// nil slice   --> a,b,c
// empty slice --> d,e
fmt.Printf("%#v", a) // []int(nil)
fmt.Printf("%#v", b) // []int(nil)
fmt.Printf("%#v", c) // []int(nil)
fmt.Printf("%#v", d) // []int{}
fmt.Printf("%#v", e) // []int{}
```

https://play.golang.org/p/uUvGD5xJIMy
ストロングパラメーター

ストロングパラメーターとはデータベースが全てのパラメーターを受け取ることができる状態にしておくと、意図しないデーターベースの読み書きが起こってしまうことがありそれを防ぐためのもの。悪意あるパラメーターからによるデータの改竄などのセキュリティの欠陥を防ぎ、ユーザーを守ることにつながる。
ストロングパラメーターを使って保存するパラメーターに制限をかけることは重要。
ストロングパラメーターにはrequireメソッドとpermitメソッドがある。


requireメソッドは送信されたパラメーターを持つparamsが使用できるメソッド。

```ruby
params.require(:対応したモデル名)
```

で定義できる。ストロングパラメーターとして使用する場合は主にモデル名を指定する。
これにより意図しないパラメーターをparamsが受け取った場合。エラーを返すことができ、原因特定のためにユーザーにエラーを示すことができる。
requireメソッドで必要なパラメーターを取得できるようになったが、さらにパラメーターを絞り込み、カラムに保存したい情報を指定することがpermitメソッドでできる。


permitメソッドはrequireメソッドと同じようにparamsが使用できるメソッド。

```ruby
params.require(:対応したモデル名).permit(:取得したいキー名, :取得したいキー名)
```

で定義でき、例にあるように複数指定できる。
例えばTweetモデルで、name、image、text をデータベースで受け取りたい場合は、対応したコントローラーに

```ruby
def create
  Tweet.create(tweet_params) ←ここでTweetモデルを通して新しくパラメータを保存したいという記述。
end

private
def tweet_params
  params.require(:tweet).permit(:name, :image, :text) ←受け取りたいパラメーターのキーを指定。
end
```

★privateメソッドは以下の記述がクラス外から呼び出されなくなるメソッド
Vue3 day.js で <template>内で日付のformat

# はじめに

laravelとvueでの開発において
v-forで回して習得した
日付データにformatをかける方法をメモしておきます。

日付操作はday.jsを使用しています
Moment.jsが主流だと思いますが　day.jsが日付操作系では、一番軽いので使用しています。

## 準備


```docker
$ npm install dayjs --save
```
day.jsをインストールします

```vuejs
<script>
import dayjs from "dayjs";
dayjs.locale("ja");
</script>
```
importしてあげます。
日本語利用するので
dayjs.locale("ja");も記載しましょう。

## 使用する

コントローラーからuserlistという配列を持ってくると仮定して
created_atをYYYY-MM-DDの形にしたいという場合は　下記のように書けばできます

```vuejs
<template>
          <div v-for="index of userlists" :key="index">
              <h2>
                {{ index.last_name }} {{ index.first_name }}
              </h2>
              <div>
                {{ format(index.created_at) }}
              </div>
          </div>
</template>

<script>
import dayjs from "dayjs";
dayjs.locale("ja");

export default {
  props: {
    userlists: Array,
  },

  methods: {
    format(date) {
      let created_at = dayjs(date).format(YYYY--MM-DD");
      return created_at;
    },
  },
};
</script>

```


## 最後に
自分が忘れたときようのメモ程度に書いてるので
わかりにくい所は勘弁してください。

要望があればさらに詳しく記載します。
【AI・機械学習入門】初心者のためのPython学習方法

## はじめに
こちらの記事を書くまえに簡単な自己紹介からさせていただきます。

はじめまして、**katzed**と申します。
katzeはドイツ語で猫を、dazeは英語で夢中を意味します。
はい、言わずもがな猫好きです🐱！でも、飼ったことはありません...

私は、AI搭載のコミュニケーションロボットにメンタルを癒された経験があり、
それをきっかけで、AIを強く学びたいと思いました。
**2021年7月**からAIを学びはじめ今に至ります。

## 本記事の対象となる方
- **プログラミング初心者**
- **Pythonを学習するにあたり、参考教材に悩んでいる方**

## AIを学習するなら、Pythonをまず知ろう
なぜ **Python** なのかというと、**AIを学習するのに便利なライブラリが揃っているから**です。
具体的には、**numpy, pandas, seaborn, scikit-learn, tensorflow, keras, pytorch**
などがあげられます。

これらのライブラリを駆使することで、機械学習やDeep Learningを実装することができます。
なので、**まずは Python のコードに慣れること**が大事です。

## 教材はなにがよいの？
東京大学が、無料でPythonの学習教材を公開してくださっています。
[東京大学の学習教材](https://utokyo-ipp.github.io/1/1-0.html#Colaboratory%E3%81%AE%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92)

オススメのポイントは、3点あります。
- 解説が丁寧であること
- 練習問題が付属していること
- 解答がついていること

はじめは、解けない練習問題に出会ったら、10分悩んだり調べて分からなければ、
解答をみて理解に努めるとよいと思います。
解けないことで、モチベーションが下がってしまうことよりも、
**解き方を引き出しに入れていくこと**が大事だと思います。

## はじめてのGoogle Colaboratory
**Google Colaboratory**(以後、**Google Colab**)は、Pythonを実行できるGoogleのサービスです。

オススメの理由は、3点あります。
- 環境構築が不要です
- GPUへ無料でアクセス可能です
- Jupyterノートブック形式なので、文書や数式も入力可能です

## Google Colabの立ち上げ方法
**Google Colab**をはじめて立ち上げる方に説明します。

- まずは、**Google Drive**を開いてください。
- 右クリックして、__[その他]__から__[Google Colaboratory]__を選択してください

## Google Colabの初期設定
Google Colabを開いたら、まずは初期設定をすることをオススメします。

オススメの編集ポイントは、2点です。
- Colabの画面上部から**[ツール]**をクリックして、リストから**[設定]**を選択してください
- **[編集者]**のメニューで、**[インデント幅(スペース)]**を**"4"**、**[行番号を表示]**に☑を入れる

もし、ご自身で好みの設定があれば、その設定で大丈夫です。

## コーディングすることが大事
コーディングとは、実際にコードを入力することです。
はじめのうちは、**とにかく手を動かして入力すること**が大事です。

オススメの理由は、3点あります。
- よく入力するコードを体が覚えてくれる
- 入力ミスによるエラーに遭遇することができる
- エラー内容を見て、修正する方法を学ぶことができる

コーディングは、はじめから速い人はいないと思います。
慣れれば慣れるほど、徐々に速くなるので、最初から速く入力できなくても大丈夫です！

## エラーに慣れることも大事
エラーに慣れることも大事で、はじめのうちに慣れておくと、のちのち楽になります。
オススメは、**理解しているコードをわざと書き換えてエラーを起こす**方法です。

##### 例1
```python:正常なコード
print("hello world!")
hello world!
```

では、一部を変えてみて、わざとエラーにしてみましょう。
##### 例2
```python:print->prinに変更したコード
prin("hello world!")
---------------------------------------------------------------------------
NameError                                 Traceback (most recent call last)
<ipython-input-2-433e141e0b1d> in <module>()
----> 1 prin("hello world")

NameError: name 'prin' is not defined
```
このように、**NameError**が出力されて、**prin**という名前は定義されていないですよ。
とエラーコードが教えてくれます。

##### 例3
```python:""を削除したコード
print(hello world!)
---------------------------------------------------------------------------
  File "<ipython-input-4-6135c6da936c>", line 1
    print(hello world)
                    ^
SyntaxError: invalid syntax
```
今度は、**SyntaxError**が出力されて、**構文が無効**ですよ、つまり構文にエラーがありますよ
とエラーコードが教えてくれます。

このように、簡単なコードでエラーをわざと出して、
この場合はこんなエラーが出るのかというのを、キャッチアップしておくと、
のちのち長いコードを書いたときに同様のエラーが出たときに、対応がしやすくなります。

教材どおりに学んでしまうと、場合によってはエラーに遭遇しないこともあるので、
**エラーを経験することは大事**だと思います。

## 最後に
ここまで読んでいただき誠にありがとうございます。
今回は、私自身がAIを学ぶなかで、Pythonをどのように学習したのかを記載してみました。

私もまだまだ Python に触れて3か月と経験は浅いので、同じく学ばれている方々。
一緒に勉強していきましょうね！:smile:

次回以降は、私自身が Python のコードで理解に苦戦したものを、解説したいと考えています。
[備忘録]javascriptで配列のチェックにeveryを使う時は注意

everyは配列要素が0のとき必ずtrueを返すため、知らずに使うと意図しない動作を引き起こす可能性があるので注意が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/62cacb7f-0866-a73a-a3b3-431b046bea80.png)

MDNに注意書きはしてあるが、一致するものがないんだからfalseじゃないか？と思う。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0a22e29e-ee04-aa72-3f10-fb3ad469ea94.png)
参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every
【Unity】Androidビルドができない 。IL2CPP、clang++エラー

Unityのバージョンを2019→2020に上げたらAndroidビルドができなくなりました
Unityバージョン `2020.3.19f1`, `2019.4.30f1`,　両方でできない
Mac OS Big Sur Ver11.6です
#事象
ビルド時にIL2CPPで止まる
![00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/9908d74b-68a1-44e0-fe82-13f5b4a2b456.png)
アクティビティモニタで見てみた
![0.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/4d95a7bf-7dd2-2b4b-b840-cc1aadcf2451.png)

エラーメッセージ

```
Exception: Unity.IL2CPP.Building.BuilderFailedException: clang++: error: unable to execute command: Killed: 9
clang++: error: clang frontend command failed due to signal (use -v to see invocation)
```


#確認・試したこと
+ パスに日本語が含まれていないか？
→含まれてるとIL2CPPエラーになるらしい

+ Unity>Prefarences>ExtraSetting>JDKのパスを直接入力する（チェックボックスは外す）
→これで解決した人もいるみたい（Unityのバージョンが違うっぽい）

→→どっちもエラー解消しない（；_；）
#ビルドするには
Unity Projectをエクスポートし、Android Studioでビルドする

##Unity Projectをエクスポートし、Android Studioでビルドする
###Unityのplayer Settingを確認
メニュー　File>BuildSettings>
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/b163323a-898f-6ccb-04f6-22850d5c7372.png)
Export Project　にチェックを入れます

PlayerSettings>OtherSettings
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/9628fbd5-eb3a-7ea8-d301-07daf3723e6a.png)
確認項目

+ Scripting Backendは　`IL2CPP`
+ Api Compatibility Levelは　`.NET Standard2.0`
+ Target Architectureは `ARMv7`、`ARM64`

オッケーであればExport（複数ファイル書き出されるので、新しいフォルダを作る。名前はなんでもいい）

###Android Studioでビルド
Android Studio https://developer.android.com/studio

+ エクスポートしたプロジェクトを開く（ File → Open ）
+ load完了までちょっと待つ（左メニューにunityLibraryが出てくるまで待つ）
+ ツールバー Build > Generate Signed Bundle / APK
+ APKを選択
+ Generate Signed Bundle or APK

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/d439d9cd-4572-7d05-99df-ca36bb9e9403.png)
既にGooglePlayでリリース済みの人

+ Key Store pathをChoose existingから選択 
→.keystoreファイル
　対象のUnityプロジェクト（書き出し前の）直下に保存されている（特に変更してなければ）

+ Key Store password、Key aliasを入力
→UnityのPlayerSetting> Publishing Settingsにあるよ

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258078/9d0ffd3b-f881-d9fc-670d-f49a4b055090.png)

+ release　を選択してFinish
+ プロジェクトフォルダが書き出されます
+ フォルダ> launcher> release> `launcher-release.apk`←これ

ビルドできました！（；＿；）
Android実機、エミュレーターで動きました

GooglePlayで未リリースの方はこちらを参照ください
参照記事
https://naoyu.dev/【unity】急にビルドができなくなった時の解決方法/
Beanstalk+Docker+JavaアプリでタイムゾーンをJSTに変更したかった日

微妙に嵌ったのでメモ

* AWS Elastic Beanstalk web applications
* Multicontainer Docker
* Java8 Spring Boot

# .ebextensions で設定する方法

```yml:.ebextensions/timezone.config
# Dockerホスト(EC2インスタンス)のタイムゾーンを変更
commands:
  timezone:
    command: ln -f -s /usr/share/zoneinfo/Japan /etc/localtime
```
- EC2インスタンスのタイムゾーン: 変更される
- Dockerコンテナのタイムゾーン: 変更されない
- Javaアプリのタイムゾーン: 変更されない

# Dockerfile に RUN を記述する方法

```dockerfile:Dockerfile
# ゲストOSのタイムゾーンを変更
RUN ln -f -s /usr/share/zoneinfo/Japan /etc/localtime
ENTRYPOINT ["java", "-jar", "helloworld.jar"]
```

- EC2インスタンスのタイムゾーン: 変更されない
- Dockerコンテナのタイムゾーン: 変更される
- Javaアプリのタイムゾーン: 変更されない -> タイミングの問題？

# Beanstalk環境プロパティに `TZ=Asia/Tokyo` を追加する方法

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49459/4759df6a-438f-019a-bd7c-13a2d12bebc3.png)

- EC2インスタンスのタイムゾーン: 変更されない
- Dockerコンテナのタイムゾーン: 変更されない
- Javaアプリのタイムゾーン: 変更される

# ENTRYPOINT で起動時引数を渡す方法

```dockerfile:Dockerfile
# Javaアプリのタイムゾーンを変更
ENTRYPOINT ["java", "-Duser.timezone=Asia/Tokyo", "-jar", "helloworld.jar"]
```

- EC2インスタンスのタイムゾーン: 変更されない
- Dockerコンテナのタイムゾーン: 変更されない
- Javaアプリのタイムゾーン: 変更される

## ※CMDで渡すとオプションの位置が悪い

```dockerfile:Dockerfile
CMD ["-Duser.timezone=Asia/Tokyo"]
ENTRYPOINT ["java", "-jar", "helloworld.jar"]
```

- EC2インスタンスのタイムゾーン: 変更されない
- Dockerコンテナのタイムゾーン: 変更されない
- Javaアプリのタイムゾーン: 変更されない
Netlify form、用意したThanksページに飛ばしてくれ頼む。

言っておくけどNetlifyはいいぞ。

使用したもの

* Vue.js
* Vuetify
* Veevalidation
* Netlify


### Netlify formを使う。
導入は簡単で、`<form>`タグに決まった属性を追加するだけ。
この辺りのことは色んな方が記事にしてくださっているので詳しくは書きません。
参考にしたのは下記ページ。

[Forms機能を利用して問い合わせフォームを作成する](https://qiita.com/NaokiIshimura/items/bce2f0b865ec1bc16a53"【Netlify】Forms機能を利用して問い合わせフォームを作成する")

普通なら静的ページならこれで完結。超簡単。
Vueを使ったページのなら下記のページがとても参考になりました。（今回はこちらの方法を使わせていただきました）

[Vue.js+axiosでNetlifyのFormsを使ってハマった話](https://qiita.com/miiina016/items/e86c0bf4f8808dd6b6ae"Vue.js+axiosでNetlifyのFormsを使ってハマった話")

## 本題：用意しておいたthanksページに飛ばない

[Form要素にaction属性を付けて、値をオリジナルthanksページのパスにすればいいよ](https://docs.netlify.com/forms/setup/#success-messages"Form要素にaction属性を付けて、値をオリジナルthanksページのURLにすればいいよ")

ドキュメントにそう書いてあリました。だからそうした。
結果飛ばない。なんでじゃ！！

ちなみにその時のディレクトリ構成は下記のようになっていました。

```
src
  |
 public
  |--index.html
 component
  |-Form.vue
 views
  |--contact
      |--index.vue
      |--thanks.vue

```

/src/views/contact/index.vueには/src/component/Form.vueがimportされていた状態です。
その/src/component/Form.vueには下記のように記述しました。

```
<v-form v-model="valid" data-netlify="true" ref="form" method="POST" action="/contact/thanks">
```

vuetifyではこの`v-form`が`<form>`になりますのでaction属性を付けて作成しておいたthanksページに飛ぶように設定しました。そしてデプロイ。

しかし。Netlify Formのデフォルトで用意されているthankyouページに飛ばされてしまう・・・なぜ！！
そうならないようにaction属性に設定しているんでしょうが！！

色々試したり調べたりしたけどこれといった解決方法は見つからず・・・いや！！絶対に何か方法はあるはず。

Netlifyは静的ページホスティングに強い・・・逆にコンパイルされるようなページには弱いのでは・・・

なので下記のようにしました。

```
src
  |
 public
  |--index.html
　　　　|--thanks.html//←静的thanksページを追加で作ってみた
 component
  |-Form.vue
 views
  |--contact
      |--index.vue
      |--thanks.vue

```

そして先ほど紹介したページ（[Vue.js+axiosでNetlifyのFormsを使ってハマった話](https://qiita.com/miiina016/items/e86c0bf4f8808dd6b6ae"Vue.js+axiosでNetlifyのFormsを使ってハマった話")）にでてきたコードにaction属性を加え、デプロイ。

```
<form name="contact" netlify netlify-honeypot="bot-field" hidden action="/thanks.html">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>
```

設置していたお問い合わせフォームからテストでメールを飛ばしてみたら！！！
デフォルトじゃない先ほど作ったthanks.htmlがデデデで出てきた〜〜〜〜！！！
コンパイルされてできた`<form>`タグにaction属性を付けてthanksページに飛ばそうとしてもダメだったのね。
びっくりしたけど、いやそうだよね、と。元々そういうものだったよねNetlify Form。


## だがthanksページがしょぼい

だって動作を確かめるためだけに作ったhtmlだもの・・・`<p>`タグしかありません。
どうにかVueやVuetifyを使って、他ページと統一された綺麗なthanks.htmlが作りたい・・・

なんとか、なんとか・・・・

**CDNでthanks.htmlにぜーーーーんぶ読み込んじゃえばいいじゃん！！**

フォントもvueもveutifyもアイコンもCDN！！

結果的には意図した見た目のthanks.htmlができてとりあえずは完成。

## だが果たしてこれは正解なのか
いやそんなことないと思う。結果的にSPAじゃなくなってるじゃん。
せめて、public/index.htmlと同じところにthanks.htmlが書き出されるようにしたい。

>せめて、public/index.htmlと同じところにthanks.htmlが書き出されるようにしたい。

やり方が分かったのでそれは後ほどまた記事にします。
[書きました。](https://qiita.com/AS-box/items/dcc105e2aaaaef3c42c1)
Certificate verification failed: The certificate is NOT trusted. The certificate chain uses expired certificate.

## このページについて
passenger-ruby のdocker imageが突然ビルドに失敗するようになったので調査した。
エラーの原因と解決方法についてまとめる。

## 事象
Dockerのビルド時に `apt-get update && apt-get install` で以下エラーが発生する

```
Err:5 https://oss-binaries.phusionpassenger.com/apt/passenger bionic Release
  Certificate verification failed: The certificate is NOT trusted. The certificate chain uses expired certificate.  Could not handshake: Error in the certificate verification. 

E: The repository 'https://oss-binaries.phusionpassenger.com/apt/passenger bionic Release' does not have a Release file.
```
#### 使用していたDockerfile

```
FROM phusion/passenger-ruby26@sha256:c187cae81ba7b0b3aba0f67f0aad4c24fb1352857dcbaf598301fdd2220ea32f

RUN apt-get update && apt-get install -y shared-mime-info \
    && apt-get clean
・・・
```
## 原因
passengerでは証明書に Let's Encrypt を使用しており、その証明書が2021/9/30で期限切れとなった。
docker image 内で新しい証明書である `ISRG RootX1` をサポートしていなかったため証明書エラーが発生した。

https://letsencrypt.org/docs/dst-root-ca-x3-expiration-september-2021/

## 対処方法
passengerのissueを確認したところ、同事象でのissueが上がっており、`ca-certificates` をアップデートすることで解消できるとのこと。

````
apt update && apt install -y ca-certificates
```
https://github.com/phusion/passenger/issues/2381

しかし、自分の場合はそもそも `apt update` の段階で証明書エラーが発生してしまいアップデートできなかった。
そのため解消方法を漁っていたところ、以下issueを発見。
https://github.com/phusion/passenger-docker/issues/322

```
RUN mv /etc/apt/sources.list.d /etc/apt/sources.list.d.bak
RUN apt update && apt install -y ca-certificates
RUN mv /etc/apt/sources.list.d.bak /etc/apt/sources.list.d 
```
`apt update` の前に `/etc/apt/sources.list.d` を退避させるとうまくいくとのことで、試して見たところビルドに成功した。
#### 修正後のDockerfile
```
FROM phusion/passenger-ruby26@sha256:c187cae81ba7b0b3aba0f67f0aad4c24fb1352857dcbaf598301fdd2220ea32f

RUN mv /etc/apt/sources.list.d /etc/apt/sources.list.d.back

RUN apt-get update && apt-get install -y \
        libnginx-mod-http-headers-more-filter shared-mime-info \
    && apt-get clean

RUN mv /etc/apt/sources.list.d.back /etc/apt/sources.list.d
...
```
## まとめ
今回の事象の原因は、Let's Encryptの新しい証明書にコンテナが対応していなかったことだった。
事象を解決するには `ca-certificates` の更新が必要。
しかし docker image として使用していた passenger-ruby の場合、 `/etc/apt/sources.list.d/passenger.list` がデフォルトで含まれているため、 apt update 時にこのファイルが読み込まれ証明書エラーが発生してしまっていた。
そのため `ca-certificates` の更新前に `/etc/apt/sources.list.d/` を退避させて読み込まれないようにすることで解決した。
【Django】GitHubからクローンして開発環境を整え、プロジェクトに参加するまで

#概要
既にDjangoで開発中のプロジェクトに参加した際の手順を覚書としてまとめておきます。

#手順
###【下準備編】
#####①ローカルに開発用ディレクトリを作成
ご自分のPCで好きな場所にディレクトリ（ファイル）を作成します。
#####②GitHubからクローンする
GitHubからクローン用のURLをコピーします。
![スクリーンショット 2021-09-30 174747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280658/6fc3d3ba-83ae-7d0a-6a50-45af9d5de33e.png)

コマンドプロンプトを開きます。
作成したディレクトリに移動し、下記コマンドを実行します。

```terminal                                  
$ git clone コピーしたクローン用GitのURL
```

#####③作業用ブランチを切る
```terminal
$ git branch                               //現在いるbranchを確認
$ git branch hogehoge                      //ブランチを切る
$ git checkout hogehoge                    //先ほど切ったブランチに移動
```
#####④仮想環境を構築する
```terminal
$ python -m venv .venv                      //仮想環境構築
$ .venv\Scripts\activate　　　　　　　　　　 //仮想環境に入る（コマンドは環境によって異なる場合がある）
```
###【ファイル作成編】
#####①.gitignoreファイル作成
.gitignoreをプロジェクト直下に作成します。
下の内容に加え、Git管理から外したいファイルを書き込みます。

```terminal:.gitignore
.venv
.env
*.log
*.pyc
__pycache__/
db-volumes/
db.sqlite3
```

#####②requirements.txtの作成
.gitignoreと同様、プロジェクト直下に作成します。
コマンドプロンプトで以下を実行してrequirements.txtを作成してください。

```terminal
$ pip install -r requirements.txt
```

#####③.envファイルを作成
プロジェクト直下に、.envファイルを作成します。
適当な文字列を作成し、SECRET_KEYを書き込みます。

```python:.env
SECRET_KEY="hogehogehogehoge&%hogehogehogehoge&%hogehogehogehoge"
```

###【データベースの設定編】
#####①mysqlを起動し、データベースを作成する
コマンドプロンプトで以下を実行してください。
（環境によってコマンドが異なる場合があります）

```terminal
$ mysql -uroot -p                             //mysqlを起動し、パスワードを入力
$ show databases;                                       
$ create database hoge;                       //データベース作成
$ exit                                        //mysqlを抜ける
```

#####②local.pyを作成
local.pyをプロジェクト内のsettingsフォルダ下に作成します。
本番環境用のsettings.pyを参考に、以下内容を追加していきます。

```python:settings.py
DEBUG = True
ALLOWED_HOSTS = ['localhost', '127.0.0.1]
DATABASES = {
        'NAME': 'hoge',
        'USER': 'root',
        'PASSWORD': 'xxxxx',
        'HOST': 'localhost',
        'PORT': '0000',
}
```
###【アプリを動かす編】
#####①makemigrationsする
コマンドプロンプトで、以下コマンドを実行します。

```terminal
$ python manage.py makemigrations
$ python manage.py migrate
```
#####②アプリを動かす
ここまでできたら、```runserver```して完了です。

```terminal
$ python manage.py runserver
```
Pytorch 畳み込み　転置畳み込み　動作　忘備録

```
# 次元の計算について, 公式サイト通りとする.
    # ex. 
    # kernel_size = (2, 3) ならば, kernel_size[0] = 2, kernel_size[1] = 3
    # kernel_size = 5      ならば, kernel_size[0] = 5, kernel_size[1] = 5
    # padding = (3, 5)     ならば, padding[0] = 3, padding[1] = 5
    # padding = 2          ならば, padding[0] = 2, padding[1] = 2
    # stride = (4, 5)      ならば, stride[0] = 4, stride[1] = 5
    # stride = 3           ならば, stride[0] = 3, stride[1] = 3
    # dilation は, ここでは, 初期値 (1, 1) を 使用するため, dilation[0] = 1, dilation[1] = 1
    # output_padding は, ここでは, 初期値 0 を 使用するため, output_padding[0] = 0, output_padding[1] = 0
    
    # Conv2d
    # Input:  (N, Cin, Hin, Win)
    # Output: (N, Cout, Hout, Wout)
    # Hout = (Hin + 2 × padding[0] − dilation[0] × (kernel_size[0] − 1) − 1) / stride[0] + 1
    # Wout = (Win + 2 × padding[1] − dilation[1] × (kernel_size[1] − 1) − 1) / stride[1] + 1
 
    # ConvTranspose2d
    # Input:  (N, Cin, Hin, Win)
    # Output: (N, Cout, Hout, Wout)
    # Hout = (Hin − 1) × stride[0] − 2 × padding[0] + kernel_size[0] + output_padding[0]
    # Wout = (Win − 1) × stride[1] − 2 × padding[1] + kernel_size[1] + output_padding[1]
    
    # 1. Conv2d
    # Input:  (1, 3, 128, 128)
    # Hout =  (128 + 2 × 1 − 1 × (4 − 1) − 1) / 2 + 1 = 64
    # Wout =  (128 + 2 × 1 − 1 × (4 − 1) − 1) / 2 + 1 = 64
    # Output: (1, 256, 64, 64)
```

<h5>参考</h5>
https://start0x00url.net/2018/10/30/pytorch-%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%88%EF%BC%91%EF%BC%91%EF%BC%89/
HTML5プロフェッショナル認定試験レベル1 合格記録



#はじめに
自分のメモ代わりに、記録に残したいと思います。
HTML5プロフェッショナル認定試験　レベル1を受験しました。

#目次
1：使用教材
2：勉強方法
3：受験日当日
4：合格後の流れ　

#1：使用教材
使用した教材は下記２つになります。

①HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.0対応
https://www.shoeisha.co.jp/book/detail/9784798154619

![B829839F-FB2C-4683-BF0B-D5192705569A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110568/b2c06657-c999-9f90-fa92-5234054098dc.jpeg)

②公式サイトサンプル問題
（https://html5exam.jp/measures/sample.html）

#2：勉強方法
私の勉強方法は、とにかく知らない知識を問題を解いて叩き込んでいきました。

勉強期間は業務をしながらだったので3ヶ月ほどかかりました。

ポイントは３つあります。

★問題集は3周以上
★問題集の解説に載っているワードも覚える
★サンプル問題で足りない知識を補填する

私の場合ですが、3周しても覚えられない知識もあったので間違えた問題は正解するまで解いていました。

また、問題集を解き終わってサンプル問題をやったら**ほぼ初見問題**でした。

問題集は他にもあるのでお好きなもので良いと思いますが、問題集だけではなく**サンプル問題も解く**ことが必須だと思います。

#3：受験日当日
受験方法には２つ方法があります。
オンラインで受験or会場で受験です。

受験申し込みにはピアソンVUEとEDUCO-IDに登録する必要があります。

ピアソンVUE
https://www.shoeisha.co.jp/book/detail/9784798154619

EDUCO-ID
https://ma.educo-j.or.jp/caf/Xamman/register?_ga=2.208460178.1654366735.1633069241-576293210.1633069241

私は会場受験を選択しました。
（オンラインだと無線LANの場合ラグなどがひどいと聞き、、）

会場受験にあたっての注意点は2点です。

★私物を会場に持ち込めない
★顔写真を撮るなど手続きがあるので早めの訪問がよい

会場の私物持ち込み不可については、受付にロッカーがあるので入れやすい形で準備しておくと良いでしょう。

#4：合格後の流れ
パソコンで問題を解く形なので、解き終わり終了ボタンを押すと**自分のスコア**と**合否**がすぐに表示されます。

そのあと受付にてスコアシートを貰い終了です。
(無事に合格できました、、)

そのあと認定証とカードがもらえます。
3週間以内に自宅へ送られるのですが、宅急便でのお届けなのでご注意下さい。

#終わりに
忘れないように合格までの流れをまとめさせていただきました。私はコーダーとして働いていたので半分くらい知っていましたが、それでも中々難しかったです。

初めて記事を書いたので、少しずつ更新して読みやすいようにしていきたいと思います。
AzureVMを別のVnetへ移動させてみた。

#はじめに
Azureでは作成したVMを別のVnetへ移動させることができます。
本記事ではその手順の紹介をしたいと思います。

##Vnet移動手順
###１．移動したいVMの削除
移動したいVMを削除します。
※VMを削除してもVMにアタッチされていたOSディスク、Dataディスク、パブリックIPアドレスやnicは残ります。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/2fab11c5-e3b7-fe3d-c1f0-958d399d0f7b.png)|
|:--|

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/e4d96f64-dc04-3cda-88a9-c63f643da4d3.png)|
|:--|

###２．VMを移動したい先に作成
削除したVMにアタッチされていたOSディスクへ移動する。

|![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323039303332322f32643231643565652d663261382d326664642d653336332d6632623465363738616563392e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/9c09b541-8cef-38ad-ed59-d0d99dbc1477.png)|
|:--|


「＋VMの作成」よりVMを作成する。

|![コメント 2021-09-30 101600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/e2d6e30f-9fe7-9e9f-2b2b-416204ab3d83.png)|
|:--|

ネットワークの設定にて移動したい先のVnetを選択する。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/47320264-1539-e065-e011-1a43f84a7b1e.png)|
|:--|

他各種設定をしてVMを作成する。

|![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323039303332322f36356337613736312d363339382d333331632d333463342d6164623934393334336166622e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/a9a27f25-7c20-f9de-6257-f66fb7ba0002.png)|
|:--|



以上でVMを別のVnetに移動できます。
この移動方法ではnicが別のものに変わってしまうので、macアドレスやIPアドレスが変わってしまいます。
もし変えたくない場合はnicを元のnicに差し替える必要があります。



#サブネット移動手順
サブネットだけであればもっと簡単な移動方法があるので紹介いたします。
##手順
###１．サブネットを移動したいVMを選ぶ
|![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323039303332322f38333632363038342d366130382d306136382d346632652d6264376264383863663962342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/f0c398bc-9778-b50d-75e5-54291861a832.png)|
|:--|



###２．ネットワークインターフェースのIP構成の設定画面に移動
ネットワーク＞ネットワークインターフェース＞IP構成と押下していく。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/382a553b-4b8c-66ef-d6c6-774ea66d76f5.png)|
|:--|

###３.サブネットを変更
サブネットの欄より移動したい先のサブネットを選択し、設定を保存する。
※ここでプライベートIPアドレスが静的になっている場合はサブネットを変える前に動的へ変更する必要がある。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2090322/65cb62fb-0baa-6471-a2b2-6c1ccbb9b2fd.png)|
|:--|

以上がサブネットを移動する手順となります。


#まとめ
たまたまVMを移動させる機会があったのでメモがてら記事にしてみました。
今回ポータル上での簡単なVMの移動を紹介しましたが
また機会があれば、CLIを使用したVMの移動についてまとめようと思います。
Rasppbery Pi のオレオレ初期設定備忘録

目的
Rasppbery Piをサーバとして利用しているが、Rasppbery Pi OSの64bitが正式リリースされたときに再セットアップすると思うので今のうちに記録を残しておく。

【Cockpit（WebGUI）】
本体のインストール
$ sudo apt install cockpit

modulesディレクトリがないと、警告メッセージが出るので所定の場所に作成
$ sudo mkdir -p /usr/lib/arm-linux-gnueabihf/udisks2/modules


【スワップの無効化】
$ sudo swapoff --all
$ sudo apt-get remove dphys-swapfile

【/tmpをtmpfsに変更】
$ sudo vim /etc/fstab
>tmpfs	/tmp	tmpfs	defaults,noatime	0	0

【log2ramでログファイルのramdisk化】
https://github.com/azlux/log2ram
$ echo "deb http://packages.azlux.fr/debian/ bullseye main" | sudo tee /etc/apt/sources.list.d/azlux.list
$ wget -qO - https://azlux.fr/repo.gpg.key | sudo apt-key add -
$ sudo apt update
$ sudo apt install log2ram
$ sudo vim /etc/log2ram.conf
>USE_RSYNC=false → USE_RSYNC=true
>SIZE=40 → MSIZE=128M

【WiFiとBluetoothの無効化】
config.txtの最終行に無効化の記述を追加
$ sudo vim /boot/config.txt
>dtoverlay=disable-wifi
>dtoverlay=disable-bt

【nodejs関連】
ユーザ権限でのPM2の自動起動設定
$ pm2 startup
コマンドの出力結果をコンソールで叩く
>sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u ユーザー名 --hp /home/ユーザー名

【標準で使うpythonを2から3へ変更】
一応設定を確認
$ ls -l /usr/bin | grep python

$ cd /usr/bin
$ sudo unlink python
$ sudo ln -s python3 python

順次追記予定