OmniAICreator/Qiita-1.07M huggingface dataset:
M1 MacでCoreMLを使ってStable Diffusionを動かす

## はじめに
AppleがGitHubで公開している「Core ML Stable Diffusion」を使ってみたという記事です。M1 MacでもPyTorchのバグを引かずに画像生成ができるおすすめの方法です。

https://github.com/apple/ml-stable-diffusion

## 記事の流れ
1. 環境構築
2. 任意のモデルをCoreMLモデルへ変換
3. 画像生成(t2i) 

## 環境構築
以下が使用可能な環境想定して進みます。
- 最新バージョンのXcode
- pyenv
- git

**git clone**
リポジトリをクローンします。
```shell
git clone https://github.com/apple/ml-stable-diffusion.git
cd ml-stable-diffusion
```
**インストール**
pyenvで環境を作ってからインストールします。python3.8.16を使用してますが3.8系統ならなんでも良いです。
```shell
pyenv install 3.8.16
pyenv local 3.8.16
python3 --version #一応確認します。
python3 -m venv coreml_env
source ./coreml_env/bin/activate
python3 -m pip install -U pip
python3 -m pip install -e .
```

**huggin faceの設定など**
以下を実行するとhugginfaceのアクセストークンを要求されるので入力してログインします。
```
huggingface-cli login
```

## CoreMLモデルへの変換
基本的には以下の通りです。自分の使いたいモデルに合わせて変えてください。
```
python -m python_coreml_stable_diffusion.torch2coreml --convert-unet --convert-text-encoder --convert-vae-decoder --convert-safety-checker --model-version <HugginfaceModelCard> -o <output-mlpackages-directory>
```

例(Anything-V4)
```
mkdir -p ./model/anything-v4
python -m python_coreml_stable_diffusion.torch2coreml --convert-unet --convert-text-encoder --convert-vae-decoder --convert-safety-checker --model-version andite/anything-v4.0 -o ./model/anything-v4
```

## 画像生成(t2i)
基本的には以下の通りです。モデル変換の際に使用したものに合わせて変えてください。
```
python -m python_coreml_stable_diffusion.pipeline --prompt "プロンプト" -i <モデル変換の際に指定したディレクトリ> --model-version <モデル変化の際に指定したモデル> -o <画像の出力先> --compute-unit ALL --seed <シード値>
```

例(Anything-V4)。*先ほどのモデル変換の例の続き
```
mkdir ./image
python -m python_coreml_stable_diffusion.pipeline --prompt "masterpiece, best quality, 1girl, white hair, medium hair, cat ears, closed eyes, looking at viewer, :3, cute, scarf, jacket, outdoors, streets" -i ./model/anything-v4 --model-version andite/anything-v4.0  -o ./image --compute-unit ALL --seed 93
```
生成されたもの
![randomSeed_93_computeUnit_ALL_modelVersion_andite_anything-v4.0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/899689/c1f8dc84-2f81-d749-0d28-bf3e572e6516.png)
Notion AIで創作ストーリ作って遊んでみた

# この記事について
Twitterとかでちょくちょく見かける「Notion AI」について気になったので、実際触ってみた感想と
「Notion AI」で創作ストーリ作って遊んでみたのでそれを書いていこうと思います

# NotionAIとは
>NotionAIは、人工知能技術を活用したタスク自動化ツールです。NotionAIを使用することで、繰り返し行う単純作業や、手間のかかる複雑な作業を自動化することができます。たとえば、NotionAIを使って、毎週のレポート作成や、膨大なデータの分析作業を自動化することができます。NotionAIは、時間の節約や生産性の向上につながる優れたツールです。

らしいです、簡単にいうとお願いしたら大体の作業はやってくれるめっちゃ便利なサポーターってことですね、、大雑把
ちなみに、らしいです無責任な文面なのはNotionAIに聞いて返ってきた文章を使ってるせいです。
![スクリーンショット 2023-03-01 22.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/9161ac1a-49c9-5a17-afc2-b4cf582e1147.png)


# NotionAI使い方
[NotionAIのサイト](https://www.notion.so/ja-jp)にて登録すればすぐ使用することができます！
Notion AI には現状、無料枠も用意されていて、1ユーザー当たり 20回まで Notion AI を使うことができるみたいです。

## NotionAIで創作ストーリ作っていきます
まずはNotionAIのホームから「使ってみる」を選択
![スクリーンショット 2023-03-01 15.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/80917f11-82ca-3797-1182-73c933bd640b.png)
次に「AIを使用して文章を作成」を選択
![スクリーンショット 2023-03-01 15.59.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/810dcd71-2b0f-4a0f-dd21-57732b4d893f.png)
いくつか選択が出てくるので今回は「創作ストーリー」を選択。
ちなみに何も選択せず投げても「NotionAIとは」で記載したように文章を返してくれます
![スクリーンショット 2023-03-01 15.59.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/bef1e329-f33b-271e-bb99-e20636ace2c6.png)
テキトーに創作したいストーリーのタイトルを入れていきます。
タイトルを入れて投げるとすぐにNotionAIがストーリーを創作してくれます！！
こんなテキトーなタイトルでも真面目に作ってくれるのはすごい
![NotionAI1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/20e3ce96-3359-3a57-44b4-84cbcfcfd57d.gif)


### 創作されたストーリ
>もしも雲が綿飴だったら
ある日、あなたが突然、外を見ると、そこには空が見えました。しかし、その空にはいつもと違うものがありました。それは、雲が綿菓子のように膨らんでいるのです。
あなたは、その光景に驚きましたが、同時に、すごくお腹が空いたのです。なぜなら、あなたは綿菓子が大好きだったからです。あなたは、そのまま飛び出して、雲に向かって走りました。
そして、あなたは雲に到着し、すぐに綿菓子を口にしました。それは、とても美味しいものでした。しかし、あなたはすぐに気づきました。この綿菓子は、普通の綿菓子と違って、空気を吸い込むと膨らんでしまうのです。
あなたは、膨らんで行く綿菓子に驚き、恐怖を感じました。しかし、同時に、あなたはこの綿菓子を使って何か面白いことができるかもしれないと考えました。
そこで、あなたは大きく口を開け、綿菓子を吸い込み始めました。そして、あなたは口の中で綿菓子を膨らませ、巨大な綿菓子を作りました。それは、あなたが見た中で最も大きな綿菓子でした。
あなたは、その綿菓子で遊び始めました。それは、まるで巨大なトランポリンのようで、とても楽しいものでした。あなたは、空高く跳び上がり、雲の上で遊び続けました。
そして、あなたは気づきました。もしも雲が綿菓子だったら、とても楽しい世界が広がるだろうと。あなたは、その世界で遊び続けることを決め、雲の上で新しい冒険を始めたのでした。

## まとめ
使ってみた感想、、、めっちゃ便利！！
今回はテキトーすぎる創作ストーリーを作るために使いましたが、単純に調べ物やブログ記事のベースを作成したい時とかにめっちゃ使えるなと思いました。
あとはコードについても投げる文章を工夫すれば例題みたいな感じで返してくれるので、普段の勉強にも使うのありかなと思いました。

AIを有効に使用できる人間になりたい、、、
DB接続ユーザのパスワードを変更したら、特定クエリだけエラーになるようになった件

## 結論
VIEW定義にはDEFINERなどの定義があることがあるため、データベースのユーザのユーザ名を変更した場合、そのVIEWを使用しているクエリが失敗することがある
【Swift】メソッドを非推奨にする

# はじめに
個人開発アプリで機能を更新しました。
今後、以前まで使用していたメソッドに戻す可能性があると思ったので一応メソッド自体は残しています。
しかし、使用はしたくないので非推奨メソッドにしたいです。
やりかたを記録しておきます。

# 実装
```swift
@available(*, deprecated, message: "Use fetchSearchAdaptive()")
func fetchSearchUniversal() {
    // 処理...
}

func fetchSearchAdaptive() {
    // 処理...
}
```

# どのようになるか
以下のように非推奨メソッドを使用すると警告が表示されます
![スクリーンショット 2023-03-01 22.12.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/3928682a-7e8d-4500-f996-5264a102cb83.png)

# おわり
使用していないメソッドを残すこと自体良くない気がします笑
しかし、規模が大きくなると一気にリプレイスできないと思うので、今回の方法は便利だと思いました。
Windowsコマンドチートシート

# 概要
よく使うコマンドのチート

## 
* cd xx
  * ディレクトリxxに移動
* dir
  * ファイル一覧表示
* dir /s /b xx
  * ファイルxxを検索
* cls
  * コマンドラインをクリア
* set
  * 環境変数一覧表示
* ping x.x.x.x
  * パケット送信
* fc arg1 arg2
  * arg1とarg2の比較
* taskkill pid xx
  * プロセスIDxxを終了
p5.js Web Editor で JavaScript のモジュール（ES Modules）を扱う【その2】： simplex-noise.js の CDN からの import でダイナミックインポートを使う

以前、以下の記事で取り扱った内容と、似た内容の話です。

●【完走賞ゲット-7】p5.js Web Editor で JavaScript のモジュール（ES Modules）を扱う： simplex-noise.js の最新版（4.x）を CDN から import する - Qiita
　https://qiita.com/youtoy/items/6f6522e2df781a200b39

上記の記事と今回の差分は、以下の記事などに出てくる「ダイナミックインポート」を使うかどうかという点です。

●Dynamic imports(ダイナミックインポート)
　https://ja.javascript.info/modules-dynamic-imports

今回はダイナミックインポートを使うことで、前回の記事・今回の記事で出て行くる HTML・JavaScript のそれぞれの内容に少し違いが生じます。具体的な話は、この後に書いていきます。

## p5.js で JavaScript のモジュール（ES Modules）を扱う
まず、「p5.js で JavaScript のモジュール（ES Modules）を扱う」という目的のために、前回対応した内容の概略から説明していきます。

### 前の記事で取り扱った内容
前回の記事では、simplex-noise.js を JavaScript のプログラム内でインポートして利用するため、HTMLファイルの scriptタグの部分で以下の対応を行いました。

`<script src="sketch.js"></script>`
　　　　　　↓ 「type="module"」を追加
`<script src="sketch.js" type="module"></script>`

これは、ブラウザの JavaScript のプログラムで ES Modules　を利用するための対応です。

あとは simplex-noise.js をインポートするだけで OK、という状態になれば良かったのですが、p5.js の処理がうまく動かなくなりました（※ p5.js　は Instance mode ではなく、Global mode で利用しています）。

その原因は、「上記の　scriptタグに関する対応を行ったことで、プログラムのスコープに影響が出たため」でした。これにより、グローバルスコープにある p5.js の関数の呼び出しが、デフォルトの記述方法では行えなりました。具体的には、例えば p5.js でよく使われる「setup()」・「draw()」などの記述方法が、以下の書き方だと呼び出せなくなりました。

```javascript
function setup() {
  ...
}

function draw() {
  ...
}
```

前回の記事では、この問題に対処するため、以下のように「windowオブジェクト」を使う形にしました。これにより、呼び出しができなくなっていた p5.js の関数を呼び出すことができるようになりました。

```javascript
window.setup = () => {
  ...
};
```

### 今回扱う内容
今回用いる方法は、前回と少し違いがあります。「インポートを行う」という部分は同じなのですが、その際に「ダイナミックインポート」を利用します。

細かな説明については、以下のページをご参照ください。

●Dynamic imports(ダイナミックインポート)
　https://ja.javascript.info/modules-dynamic-imports

これにより何が変わるかというと、前回の記事で行った「`type="module"` の記載を scriptタグに追加する対応」が不要になります。そのため、前回発生していたスコープ絡みの問題への対処が不要になります。

#### ダイナミックインポートで simplex-noise.js を読み込む
それでは、ダイナミックインポートを使って simplex-noise.js を読み込んでみます。やり方についてざっくり書くと、非同期処理を用いた読み込みを行います。

実際に用いたコードを以下に掲載して、それに続けて内容の補足を書きます。

```javascript
let noise2D;

async function preload() {
  const { createNoise2D } = await import(
    "https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/dist/esm/simplex-noise.js"
  );
  noise2D = createNoise2D();
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);

  if (noise2D) {
    background(220);
    console.log(noise2D(10, frameCount));
  }
}
```

ダイナミックインポートを使っているのは、preload() の中です。
そこで async/await を使った処理を用いていますが、この読み込み方法だと scriptタグに「type="module"」を追加しなくても良くなります。

なお、インポートは、p5.js の関数である「preload()」の中で行いましたが、そこに async をつけているため、この関数自体も非同期処理になります。
そのため、その後の部分（draw() の中）で simplex-noise.js の処理を用いる際には、読み込みが完了している状態かどうかを if文で判別するようにしています。

#### 前回と今回のインポート処理の部分を比較する
前回と今回のインポート処理の部分を、並べて書いてみます。

```javascript:前回の記事でのインポート処理
import { createNoise2D } from "https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/dist/esm/simplex-noise.js";

...
```

```javascript:今回の記事でのインポート処理
async function preload() {
  const { createNoise2D } = await import(
    "https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/dist/esm/simplex-noise.js"
  );
  ...
}
```

記述方法は少し変わりますが、大幅な変更・処理の追加が必要になる感じはありません。個人的には、p5.js側に影響が出ない、今回の方法を利用していこうかと思っています。
Windows 11 / Windows Server 2022はVB6.0ランタイムのサポートを継続する

# はじめに

Qiitaの記事で[Windows 11はVB6.0アプリのサポートを継続するか](https://qiita.com/yaju/items/1ba0fd5466230c963052)というのを発見した。
確定情報は追記されてないようなので、記事にしておきました。

## この記事内容の作業目的
自作言語Re:Mindのターゲット言語としてVisualBasic6.0を含めるか検討します。（開発環境はEOSしてるのを知らないとか勘違いしているとかではないです。）
## この記事内容の作業環境
Windows 11 22H2
## この記事内容の保証
※この記事にはMicrosoft社の公表情報が含まれます。引用ソース情報の妥当性は保証されません。
# Windows 11/ Windows Server 2022はVB6.0ランタイムのサポートを継続する

参考リンクからの引用
The Visual Basic team is committed to "It Just Works" compatibility for Visual Basic 6.0 applications on the following supported Windows operating systems:

Windows 11
Windows Server 2022

## Windows 11 22H2に格納されているバージョン
msvbvm60.dll
6.00.98.48
2022/05/07 14:20:00

## Windows 11 22H2に格納されているフォルダ
C:\Windows\SysWOW64
C:\Windows\WinSxS\wow64_microsoft-windows-msvbvm60_31bf3856ad364e35_10.0.22621.1_none_2e6e3ad979d8cfb7

# おわりに
マイクロソフト社による長期サポートには頭の下がる思いです。
わたしはVisual Basic6.0の直前バージョンVisual Basic5.0/Visual Studio 97を自費購入しました。けっこう高かったです。Let's Noteがまだ銀色でなく30万円強した時代でした。VisualC++で書くよりGUIやデータベースがシンプルに書けるのに驚いた記憶があります。
.NETではないクロスコンパイラのVisual Basicって見てみたいな。
# 参考リンク

https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-basic-6/visual-basic-6-support-policy


https://qiita.com/yaju/items/1ba0fd5466230c963052
Gitコマンドについてまとめてみた（merge, revert, rebase）

## はじめに
こんにちは、まさやんです。

■運営サービス一部
https://smart-wordpress.com
業界特化、スマートなWordPressテーマ販売サイト『SMART WP』
業務の中で学んだことをコツコツまとめていきます。
今回はGitのコマンド（merge, revert, rebase）についてです。
​
## git merge
現在のブランチ（HEADの指している場所）へ他のブランチを取り込む。
​
たとえば、自分がブランチAにいて、ブランチBを取り込みたい時、
```
git merge ブランチB
```
上記のコマンドを実行することで、ブランチAにブランチBの変更内容を取り込める。
    
## git revert
既存のコミットを取り消すコマンド。
新しくコミットを追加するので、既存のコミット履歴は消えない。revertした履歴が残る。
​
使い方は下記の通り
```
git revert <commitID>
```
指定したコミットを打ち消すコミットが新しく作成される。
​
## git rebase
コミット履歴を移動したり修正、削除したりするコマンド。
マージ前にコミット履歴をきれいにする目的で使用するのが一般的らしい。（プルリク出す時など）
​
mainブランチと作業中のブランチがあるとして、作業中ブランチで、
```
git rebase main
```
を実行すると、作業ブランチを切った後のmainへのコミット内容を取り込める。
作業ブランチにmainのコミット内容を取り込んで、mainブランチにプルリクを出すのが一般的とのこと。
​
※rebaseよりもmergeを使うべきみたいな記事もちょこちょこ見たので、もし使う機会があれば最新の注意を払って使います
​
## おわりに
最後までご覧いただきありがとうございました。
今後も学んだことを積極的にまとめていきます。
​
参考：
https://backlog.com/ja/git-tutorial/stepup/09/
https://qiita.com/KTakata/items/d33185fc0457c08654a5
https://doha-front.appspot.com/why-you-should-stop-using-git-rebase-535fa30d7e25
Windows ローカルの Git リポジトリと WSL2 上の Git リポジトリをお互いにリモートとして登録する

WSL2 は WSL1 と比較して Linux との互換性が向上している半面、ファイルシステム間でのパフォーマンスには優れていません[^1]。そのため、以下のパターンでは動作が遅くなってしまい、開発者体験がよくありません：

[^1]: https://learn.microsoft.com/ja-jp/windows/wsl/compare-versions

* Windows ローカル上にある Git リポジトリを WSL2 上のアプリケーションで操作する
* WSL2 上にある Git リポジトリを Windows 上のアプリケーションで操作する

従って、 Windows ローカルと WSL2 上のそれぞれに Git リポジトリを作成し、独立して運用することが望まれます。しかし、社内リポジトリとの通信に WSL2 との相性が悪い VPN クライアントを必須とする場合など、WSL2 上の Git リポジトリ運用が難しいケースもあります。そんなときは、Git の分散バージョン管理システムとしての利点を活用し、お互いをリモートとして登録してみましょう。

## Git のリモートとしてファイルシステム上のリポジトリを登録する

Git のリモートとして登録できる URL の形式はサポートされているプロトコルにより異なります：

* Git
  * `git://host.xz[:port]/path/to/repo.git/`
  * `git://host.xz[:port]/~[user]/path/to/repo.git/`
* HTTP / HTTPS
  * `http[s]://host.xz[:port]/path/to/repo.git/`
  * `ftp[s]://host.xz[:port]/path/to/repo.git/`
* SSH
  * `ssh://[user@]host.xz[:port]/path/to/repo.git/`
  * `ssh://[user@]host.xz[:port]/~[user]/path/to/repo.git/`
  * `[user@]host.xz:path/to/repo.git/`
  * `[user@]host.xz:/~[user]/path/to/repo.git/`
* ファイルシステム
  * `/path/to/repo.git/`
  * `file:///path/to/repo.git/`

Git プロトコルや HTTP / HTTPS 、SSH を通じたリモートホスト上のリポジトリだけではなく、ファイルシステム上のローカルリポジトリもリモートとして登録できます。ローカルリポジトリをリモートとして登録することは GitHub や GitLab が普及した現代ではそう多くないと思われますが、今回はこちらを利用します。

## WSL2 上の Git リポジトリに Windows ローカルの Git リポジトリをリモートとして登録する

まずは WSL2 上の Git リポジトリに Windows ローカルの Git リポジトリをリモートとして登録する方法です。Windows の `C:\path\to\windows\repo` は WSL2 上で `/mnt/c/path/to/windows/repo` にあるように見えますので、以下の通りになります：

```bash
# Windows の C:\path\to\windows\repo にリポジトリがある場合
git remote add windows /mnt/c/path/to/windows/repo
```

この状態で `git fetch` や `git pull` をすると、Windows 側の情報を取り込めます。注意点ですが、`git push` するとメインとなる Windows 側のリポジトリに思わぬ影響が出てしまう可能性があるため避けるべきです。

## Windows ローカルの Git リポジトリに WSL2 上の Git リポジトリをリモートとして登録する

では WSL2 上でコミットした内容は取り込めないのかというとそんなことはなく、逆に WSL2 側のリポジトリから `git fetch` して安全にマージすればいいのです。WSL2の `/path/to/wsl2/repo` は Windows 上で `\\wsl$\<ディストロ名>\path\to\wsl2\repo` にあるように見えますので、以下の通りになります：

```powershell
# Debian 上の /path/to/wsl2/repo にリポジトリがある場合
git remote add wsl2 \\wsl$\Debian\path\to\wsl2\repo
```

この状態で `git fetch` や `git pull` をすると、WSL2 側の情報を取り込めます。

## 参考リンク

* [Linux 用 Windows サブシステムで Git の使用を開始する](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-git)
* [git-remote - Manage set of tracked repositories](https://git-scm.com/docs/git-remote)
* [Windows および Linux ファイル システム間での作業](https://learn.microsoft.com/ja-jp/windows/wsl/filesystems)
* [GIT URLS](https://git-scm.com/docs/git-fetch#_git_urls)
* [ファイアウォールの影響で WSL2 からインターネットアクセスができないときの対処法](https://qiita.com/yokra9/items/6cf0068557ff62afb551)
* [Microsoft Store に繋がらない環境でも WSL2 で Linux ディストリビューションを利用したい](https://qiita.com/yokra9/items/e25fb4f459e6bd620a8d)
DRFのDjangoFilterBackend使ったらTemplateDoesNotExistと出たときの対処法


DRFでAPIを書いてるので、テンプレートなんて使うことなんて絶対ないのに、
TemplateDoesNotExist
ってでてきて結構調べたのでメモです。

今まではなんともなかったのですが、タイトルにもあるとおりDjangoFilterBackendを入れた瞬間にエラーが出た始めたんですよね。

いろんなサイトに書かれてあるとおりにやってるはずなんだけどなぁ。と思ってたのですが最終的に、
https://django-filter.readthedocs.io/en/stable/guide/migration.html

を見ましたら、

```
Templates are now provided by django-filter. 
If you are receiving this error, you may need to add 'django_filters' to your INSTALLED_APPS setting.
Alternatively, you could provide your own templates.
```

とかかれてあるではないですか。

というわけで、settings.pyのINSTALLED_APPSに、
django_filters
を追加したら無事エラーも消えて希望通りの動作をしてくれました。

めでたしめでたし。
AWS Hands-on for Beginners　スケーラブルウェブサイト構築編：学習メモ

## はじめに

AWSハンズオン for Beginnersシリーズとして提供されている「[AWS Hands-on for Beginnersスケーラブルウェブサイト構築編](https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-Scalable-2022-reg-event.html?trk=aws_event_page)」を実施した際のメモです。
サーバにホストされているアプリケーションは可用性、負荷分散、耐障害性を確保するため、スケーラブルな設計をする必要があります。
今回のハンズオンではEC2インスタンスにWordPressをインストールし、マルチAZ構成で可用性確保、ELBで負荷分散を行います。また、RDSもマルチAZ配置をし、障害に備える構成を構築します。

## アジェンダ

1. 本コースで構築するアーキテクチャとハンズオン全体の流れの紹介
2. Amazon VPCの作成 ～ WordPress用Webサーバ・データベースを配置するための仮想ネットワークを作成する ～
3. Amazon EC2の作成 ～ WordPressがインストールされたWebサーバを作成する ～
4. Amazon RDSの作成 ～ WordPress用のMySQLデータベースを作成する～
5. ELBの作成 ～ 負荷分散用のロードバランサーを作成する ～
6. WordPressの初期設定 ～ WordPressの初期設定を行い簡単なブログを作る ～
7. AMIの作成と作成したAMIから2つ目のEC2インスタンスの起動
8. RDSのマルチAZ配置 〜 すでに作成済みのRDS DB インスタンスのマルチAZ化を行う 〜
9. Webシステム全体の可用性の確認 〜 EC2インスタンスの停止やRDSのフェイルオーバーを行う 〜
10. 補足 & まとめ & 今後のラーニングパスについて

## メモ

### 画面UIについて

Nameに日本語入力ができませんでした。
具体的にいうと、入力欄でローマ字入力し、ひらがなをカタカナに変換し、エンターを押下した時、内容が反映されず、入力欄が閉じてしまうという事象が発生しました。
対応策として、変換した後、エンターを押さず、マウスで「保存」ボタンを押下することでなんとか対応できました。しかし、不便に感じました。

### ユーザーデータについて

ユーザーデータとは、EC2インスタンス初回起動時のみ実行するスクリプトのことです。これによって起動中にApacheをインストールし、サーバ起動と同時に実行できます。
また、以下のリンクの通り起動毎に実行できるようです。
今回のハンズオンではApacheやWordpressのインストールをサーバ初回起動時に行えば良いので前者の方法で行います。

https://dev.classmethod.jp/articles/execute-ec2-cloud-init-user-data-for-every-start/

### 4.Amazon RDSの作成 について

RDSインスタンスを起動する際は以下2つの手順を実施します。

①EC2からRDSインスタンスにアクセスできるようにするセキュリティグループの作成
まず、RDS用のセキュリティグループを作成します。
インバウンドルールは、**MYSQL/AURORA**を選択、ソースはEC2インスタンスにアタッチされているセキュリティグループを選択します。

②RDSインスタンス作成
まず、RDSインスタンス群をデプロイするサブネットグループを作成します。
次に、サブネットグループにRDSインスタンスをデプロイします。

### 5.ELBの作成 について

ELBの作成は以下3つの手順で行います。
①最初に、ELB用のセキュリティグループを作成します。
インバウンドルールにHTTPを指定します。ソースは**0.0.0.0/0**を指定します。

②次に、ELBの負荷分散対象のグループであるターゲットグループを作成します。ターゲットグループに前工程(03 Amazon EC2の作成)で作成した、EC2インスタンスを含めます。

③次に、ELBを作成します。負荷分散するAZ、サブネットおよびターゲットグループを選択します。
ELBとターゲットグループを紐づけるとターゲットグループ作成時に設定したヘルスチェックが実行され、ターゲットグループの画面で確認ができます。ヘルスチェックが正常であれば**Helthy**と表示される。

### 7.AMIの作成と作成したAMIから2つ目のEC2インスタンスの起動 について

最初に、1つのAZ(AZ1)にWordPressをインストールしたEC2インスタンスを作成しました。冗長構成を取りたいため、別のAZ(AZ2)に同じEC2インスタンスをデプロイしたいです。
AZ1のインスタンスからAMIを作成し、それをAZ2にデプロイする方法を使用します。
まず、AMIの作成は、EC2インスタンスの一覧から作成したいインスタンスをチェックし、アクションから行うことができます。
次に、AMIからインスタンスを生成する際は、AMI画面から「AMIからインスタンスを起動」を選択することで実施可能です。

上記手順で作成したEC2インスタンスを、ELBのターゲットグループに追加することで複数AZに跨る高可用性を持った構成をとることができます。

### 8.RDSのマルチAZ配置 について

RDSコンソールから、既存データベースを選択し、変更します。
マルチAZ配置を「スタンバイインスタンスを作成する（本稼働環境向けに推奨）」を選択することで、DBインスタンスを複数AZにデプロイでき、高可用性を担保できます。

### 9.Webシステム全体の可用性の確認 について

Webレイヤーとデータベースレイヤーが可用性を確保できているか以下の手順で確認しました。

#### Webレイヤー

複数EC2インタンスのうち1つを停止させる。その後、ELBエンドポイントにブラウザからアクセスし、WordPressが表示されることを確認します。

### リソース削除時の注意点

AMIの削除の際、まず、削除対象AMIの登録を解除する必要があります。
次に、EBSのスナップショットからAMIの本体であるスナップショットを削除します。

## ハンズオンの感想

ECサイトなど可用性が求められるサービスを作成する際に必要な構成を学習できました。
ELBのターゲットグループについてはあまり触ったことがなかったので、大変勉強になりました。
パソコン（Windows）のめちゃくちゃ使うショートカットキー

# よく使うショートカットキーをまとめてみた(windows)

## Ctrl+○○
Ctrl+home→文書の先頭に移動する
Ctrl+end→文書の末尾に移動する
こちらは共に、Ctrlを抜くと行頭、行末に行く。
Ctrl+z　元に戻す。
Ctrl+c　コピー
Ctrl+T　タブ追加
Ctrl+W　タブを閉じる
Ctrl+L　検索窓にカーソル移動
Ctrl+Shift+T タブ復活
Ctrl+リンククリック　別タブで開く
Ctrl+Tab タブの移動（前）
Ctrl+Shift+Tab　タブの移動（後）
Ctrl+F11　全画面表示

## Shift+○○
Shift+→で選択する
windows+shift+s　スクリーンショット

## alt+○○
alt+→、←　ページを戻す、進める
←、→に右クリックで一覧見れる


## エクスプローラ編

Windows+E　エクスプローラ起動
f2　名前の変更
最初のファイル名を入力した後にTabを押す　複数のファイル名を変える時に便利です
新しいフォルダ作成　ctr+shift+N
ファイルやフォルダの削除　delete
複数のフォルダを開く　shiftで複数選択後に右クリックで開くを選択

## ターミナル編

control + A: 行頭にカーソル移動
control + U: 1行削除

## cloud9編

Ctrl-D　行を削除
Alt-Delete　カーソルから行末までを削除
Ctrl-Shift-End	文末までを選択
Alt-Shift-Right	　行末までを選択
Alt-Shift-Left	行頭までを選択
Ctrl-Shift-P　括弧など（ブラケット）の間を選択
Ctrl-Shift-Home	文頭までを選択
Shift-Up　上の行まで選択
Ctrl-Shift-Left	単語毎に左側に選択
Ctrl-Shift-Right　単語毎に右側に選択

## その他
deleteで右側を１文字削除。
L+文字で小文字作成。






自身の備忘録を兼ねて都度更新します!
【技術書まとめ】HTML&CSS コーディング・プラクティスブック 8 実践シリーズ

引き続き現在のCSSを整理するために本書を手に取った。10冊目。

`clamp()`でのfluidタイポグラフィ、CSS GridとFlexboxの使い分け、containerによる基本余白とfigmaから値を取得する装飾方法などが参考になった。


- デモサイト
    - Netlify
        - https://rococo-licorice-d48c71.netlify.app/
    - Cloudflare Pages
        - https://demo08.pages.dev/


# vw, clamp()を使ったFluidタイポグラフィ

```css
h1 {
  font-size: clamp(53px, 8.73239vw + 20.2535375px, 146px);
}
```

![スクリーンショット 2023-02-13 9.27.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282504/74815648-a578-3a4f-2235-2d328c20baea.png)


```css
/* Clamp */
*,
*::before,
*::after {
  /* 最小サイズ、最大サイズ、最小画面幅、最大画面幅（単位px） */
  --min-size: 53;
  --max-size: 146;
  --min-viewport: 375;
  --max-viewport: 1440;

  /* a 傾き */
  --slope: calc(
    (var(--max-size) - var(--min-size)) /
      (var(--max-viewport) - var(--min-viewport))
  );
  /* b 切片 */
  --intercept: calc(var(--min-size) - var(--slope) * var(--min-viewport));
  /* y = ax + b 可変サイズ */
  --fluid-size: calc(var(--slope) * 100vw + var(--intercept) / 16 * 1rem);  

  /* clamp(最小サイズ, 可変サイズ, 最大サイズ） */
  --clamp-size: clamp(
    var(--min-size) / 16 * 1rem,  /* 1rem = 16px のため */
    var(--fluid-size),
    var(--max-size) / 16 * 1rem
  );
}

/* テキスト（Fluid Typography) */
h1 {
  font-size: var(--clamp-size);
  font-family: "Lora", serif;
  font-weight: 400;
}
```


# 7列カラムのグリッドレイアウトにする

```css
/* 7列のグリッド */
.container {
  display: grid;
  grid-template-columns: repeat(3, var(--size1)) auto repeat(3, var(--size1));
  row-gap: 44px;
}

.container > * {
  grid-column: 2 / -2;
}
```


# 親要素figureのサイズに合わせてimgを切り抜いて、高さは固定する（グリッド内）

```css
/* 基本設定 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```


# 可変なフォントサイズに合わせて幅や余白が変わるようにする

```css
.hero .body {
  width: 21em;
  margin-block-start: 2em;
}
```

# before擬似要素で背景に装飾をつくる

```css
.decor::before {
  content: "";
  background-color: var(--secondary);
  position: absolute;
  inset: 0; /* 内側「0」の距離に揃える */
  z-index: -1;
}
```

# 縦並びのflexboxでgapで間の余白を設定する

```css
.posts {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
```


# オーバーレイの下のページが不要にスクロールするのを防ぐ

```css
.open {
  position: fixed;
  overflow: hidden;
  width: 100%;
}
```
初めてのアプリ開発：鳥分類アプリをつくってみた

<h1>はじめに</h1>
今回、初めてのアプリ開発で「鳥分類アプリ」作成しました。

この記事では、作成したアプリの紹介や学んだことなどについてまとめます。

<h1>経緯</h1>
半年前からプログラミングを学び始め、その実践編として作成しました。


学んだ言語などは、HTML＆CSS、Python、Flask、(SQL)です。

<h1>開発したアプリについて</h1>
<p>今回作成した鳥分類アプリは、ヒヨドリ・ムクドリ・ウグイスの３種を分類することができます。

アプリにはログイン機能を実装しました。
ユーザー新規登録、またはログインを行うことでアプリを使用できるようになっています。
<img width=400px src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193035/463f961a-cd27-adaa-b292-d74c67dc23e0.png"><img width=400px src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193035/35ca56d9-4141-d761-296a-719d71f10487.png">

検知したい画像を「ファイルを選択」からアップし、「判定開始」をクリックすると、上部に分類結果が表示されます。
Google colaboratotyを用いて分類モデルを作成し、VScodeにてFlaskで実装しました。

<br>
<img width=400px src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193035/ed9bbe41-3d4e-0ab9-bdf8-e1377c9c059c.png">

<img width=400px src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193035/99d9b67d-f678-12b9-330d-4d85e1fc4ee1.png">
</br>

学習テキストでユーザー新規登録・ログイン機能、2種の分類アプリの作成方法を学んだため、
今回のアプリ作成では、
<ul>
<li>分類を３種にすること</li>
<li>ログイン機能等を分類アプリに紐づけること</li>
<li>CSSの記述</li>
</ul>
に関して主に頭を使いました。



<h1>この半年で出来るようになったこと</h1>
学び始め〜4ヶ月くらいまでの頃はインプット中心で右も左もわからないような状況でした。

エラー等わからないことがある度に、先生には本当にお世話になりました。

自身で成長を実感できたのは5ヶ月目後半にFlaskの復習を行なった時。
Flask学習テキスト1周目では環境開発からつまづき、エラーが出れば頭が真っ白な状況でしたが、
2周目では、1周目で出なかったエラーも自力で対処出来るようになっていました。
また、わからない部分を調べられるようにもなりました。

今回の実践編では、テキストを参考にしながら作成したため、完全に全てを自力で記述出来るようになったわけではない一方、
Flaskのテキスト復習だけでは理解しきれなかった部分、アプリ開発の全体の流れ、ディレクトリ構成、CSSの記述などの理解をより深めることができました。

この半年で確実に、プログラミング学習のポテンシャルを高めることができたと感じています。

<h1>最後に</h1>
半年間に渡りサポートしてくださった先生、本当にありがとうございました！

今後もレベルアップできるよう、日々学習を続けていきたいです！
ITパスポート学習記録

# 5つの組織形態

|組織形態　　　　　　　　　　　|経営陣の役職名|
|-----------|------------|
|(1)職能別組織    |CEO        |
|(2)事業部制組織  |CIO        |
|(3)マトリックス組織 |
|(4)プロジェクト組織 |
|(5)持株組織

***試験では、組織形態の図がよく出題されるそうです！***

(1)職能別組織
機能別組織とも言います。
業務を専門的な機能に分けて、各機能を単位として構成する組織。
社員の専門性を活かせるメリットがある。


(2)事業部制組織
事業部を単位として構成する組織です。「国内事業部」「海外事業部」など。
規模の大きい企業は、複数の事業を展開している場合があります。そんな時に、職能別組織の1つ上に「〇〇事業部」という階層を増やして表現されています。

- 事業部制組織の特徴
1. 事業を、「製品別」「顧客別」「地域別」で分ける。
1. 利益責任がある。


職能別組織は、事業が1つしかないため、経営者が意思決定を行います。
事業部制組織は、複数の事業部があり、それぞれの事業部で意思決定権を持ちます。
それと共に、***利益責任***を追います。

※ITパスポート特有の定義を知っておく！
事業とは、複数の業務のこと。
業務とは、手作業、システムのこと。
システムとは、ハードウェアとソフトウェアのこと。


(3)マトリックス組織
社員が、職能部門と事業部門の両方に所属する組織。


(4)プロジェクト組織
ある問題を解決するために、各部門から専門家を集めて結成する「一時的な組織」。


(5)持株組織
子会社の株式を保有する親会社のこと。


## CEO
chief executive officer.最高経営責任者。社長を指します。


## CIO
chief information officer.最高情報責任者。情報システムの統括。

## CFO
chief financial Officer.最高財務責任者。


## COO
chief operating Officer.最高執行責任者。


# 参考文献
以下の参考書を活用して学習しています。
読むだけでなく、アウトプットしながら学習を進めています。

https://www.amazon.co.jp/%E3%80%90%E4%BB%A4%E5%92%8C%EF%BC%95%E5%B9%B4%E5%BA%A6%E3%80%91-%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84-IT%E3%83%91%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88-%E7%B5%B6%E5%AF%BE%E5%90%88%E6%A0%BC%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8%EF%BC%8B%E5%87%BA%E3%82%8B%E9%A0%86%E5%95%8F%E9%A1%8C%E9%9B%86-%E9%AB%98%E6%A9%8B-%E4%BA%AC%E4%BB%8B/dp/4815618402/ref=sr_1_1?adgrpid=65519955036&gclid=CjwKCAiAjPyfBhBMEiwAB2CCIi5EcZVNZVZ0LIhMccP22i4kwxNHK4IbOca46EA-HTAu5C8rIIGgSRoCCkkQAvD_BwE&hvadid=649142365336&hvdev=c&hvlocphy=1009398&hvnetw=g&hvqmt=e&hvrand=11053243073770748755&hvtargid=kwd-640942117857&hydadcr=26609_11742492&jp-ad-ap=0&keywords=%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84+it%E3%83%91%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88&qid=1677672731&sr=8-1
Eclipseで使用するショートカットが表示されるのを消したい


# 事の始まり
ずっとC#での開発を行っていて、Visual Studioを使っていたんですが、久しぶりにJavaを使うことになってEclipseを使用したら、ショートカットを使うたびにその内容が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1098117/b6e79a65-64f4-5441-eb50-ce461bb5a284.png)

しばらくはそのままで使っていたんですけど、ショートカットを使うたびに表示されるのが地味にストレス……！となり、消す方法を探すことにしました。

# 消す方法
「ウィンドウ」→「設定」→「一般」→「キー」の、「コマンドが呼び出されたときにキー・バインドを表示する」のチェックを外す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1098117/3751f027-f630-aef1-9d71-ebf804e760ab.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1098117/8157f219-6acb-ad6e-713c-e486ff8f9d6a.png)

たったこれだけなんですが、表示される設定のことをなんというのか分からず、方法を見つけるのに苦労しました……
正規表現では文字コードに注意！！フラグを指定しよう

# 正規表現
正規表現で特定の文字を置き換える際に沼った。

## 状況
「〇〇1階」を「〇〇１階」に変換したい。(半角を全角に)

※ 説明用のため、やりたいことに矛盾があるかもしれません。。

### 環境
Laravel8

## 起こったエラー
ときどき文字化けする。

## 原因
正規表現で文字コードを指定していなかった。

```
preg_replace_callback('/[1階]/', 
    function ($matches) {
        // 半角を全角に変換
        return mb_convert_kana($matches[0], 'N', 'UTF-8'),
    },
    $address);
```

数字の部分は簡略化して「1」と表現。

## 解決方法
文字コードを指定する。

今回はUTF-8とする。
```
'/[1階]/u'
```

```
preg_replace_callback('/[1階]/u', 
    function ($matches) {
        // 半角を全角に変換
        return mb_convert_kana($matches[0], 'N', 'UTF-8'),
    },
    $address);
```


## まとめ

解決してみれば、すごく簡単なことだったが無駄に時間を浪費してしまった。

## 参考
[正規表現（RegExp）](https://www.tohoho-web.com/js/regexp.htm)
AndroidNDKを使ってC言語を動かす

## AndroidNDKをつかってＣ言語を動かす
- Hello World的なものは出たので、次は独自コードを書いて動かしたい

## 環境
Android Stuido Dolphin

## やっていく
方針：C言語でバブルソートを書いて処理が終わったら配列最初の数字をエミュレータに出す

### とりあえずhello worldまで出せる
以下記事でとりあえずhelloworld的なものが出せるようにする

https://qiita.com/misuzz/items/c619d55a35d50e36e22a

### Cのファイルを作成する
cppの下でcファイルを作成
ファイル名に.cを付けてください

![スクリーンショット 2023-02-28 11.19.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/560ccda7-7bfc-a8f5-3489-44204fe2fe5c.png)

![スクリーンショット 2023-02-28 11.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/dffd433d-ea79-d43a-8747-0a0a1a956e0e.png)

### CMakeLists.txtを編集
ライブラリの設定をCMakeLists.txtに以下追加します
```CMakeLists.txt
...
add_library( # Sets the name of the library.
        ndktest

        # Sets the library as a shared library.
        SHARED

        # Provides a relative path to your source file(s).
        native-lib.cpp
        bubble_sort.c)  //<-自分の作ったファイル名を追加
...

```

### MainActivity.ktで呼び出す

下の方に
```
external fun stringFromJNI(): String
```
とあるので、その下に関数を作る

```MainActivity.kt
...
external fun stringFromJNI(): String
external fun bubbleSort(): Int
...
```

### エラーになる
赤くなるのでカーソルを当てると"Create JNI function for bubbleSort"って出てくるのでクリックして作ってもらう

![スクリーンショット 2023-02-28 12.25.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/bd69a798-60a5-70f6-1372-3836b7bf464e.png)


先程自分で作ったcファイルを選択
![スクリーンショット 2023-02-28 12.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/3b7576f1-de7b-5f10-5302-0b132f120316.png)


### Cファイル
勝手に途中まで作成してくれるので、処理を書いてください。
コードはJNIで書いてください（Java Native Interface）
JNI → Wikipedia: https://ja.wikipedia.org/wiki/Java_Native_Interface　

とりあえず配列を作ってバブルソートで並び変えてもらう

```bubble_sort.c
#include <string.h>
#include <stdio.h>
#include <stdlib.h>
#include <jni.h>

JNIEXPORT jint JNICALL Java_com_example_ndktest_MainActivity_bubbleSort(JNIEnv *env, jobject thiz)  {
    int array[10] = {10,9,8,7,6,5,4,3,2,1};
    int i, j, temp;
    for (i = 0; i < 10; i++) {
        for (j = i + 1; j < 10; j++) {
            if (array[i] > array[j]) {
                temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
        }
    }
    return array[0];
}
```

### MainActivity.ktでbubbleSort()を呼ぶ
今回はもともと合った関数が``binding.sampleText.text``に設定されていたので、
ここをbubbleSort()にして、配列の最初のデータを表示させる。

```MainActivity.kt
...
        // Example of a call to a native method
        binding.sampleText.text = bubbleSort().toString()
...

```

### 実行
バブルソートができているので配列の一番小さい数字が表示された。
![スクリーンショット 2023-02-28 12.30.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/7824f912-95fd-bd91-bb71-f7cc2b8221c1.png)

### おしまい
いつもどおりxmlを変更して表示する場所を変えたりできます。
ですが、Kotlin -> C , C -> Kotlin で引数や戻り値を使うときは書き方がちょっと変わります。

Kotlin -> C　へ配列を引数として渡すときは以下の記事でどうぞ

https://qiita.com/misuzz/items/0c0a95c75a60c79ba066
php-cs-fixer 自動でdeclare(strict_types=1)を付与する

# 概要

- php-cs-fixerを用いて自動で`declare(strict_types=1);`を付与する方法をメモ的にまとめる。

# 方法

- php-cs-fixer本体の設定を変更する。

    ```.php-cs-fixer.dist.php
    <?php 
    
    declare(strict_types=1);
    
    $finder = PhpCsFixer\Finder::create()
        // チェックするディレクトリの指定
        ->in([
            __DIR__ . '/app',
            __DIR__ . '/config',
            __DIR__ . '/database/seeders',
            __DIR__ . '/routes',
            __DIR__ . '/tests',
        ]);
    
    $config = new PhpCsFixer\Config();
    
    return $config
        ->setRiskyAllowed(true)
        ->setRules([
            '@PSR12' => true,
            'declare_strict_types' => true, // こちらを追加
        ])
        ->setFinder($finder);
    ```

- 整形を実行する。
- vscodeの拡張を使っている方はそちらも修正する。

    ```setting.json
    {
        "i18n-ally.localesPaths": [
            "lang"
        ],
    
        // php-cs-fixer
        "php-cs-fixer.executablePath": "${workspaceFolder}/tools/php-cs-fixer/vendor/bin/php-cs-fixer",
        "php-cs-fixer.executablePathWindows": "",   //eg: php-cs-fixer.bat
        "php-cs-fixer.onsave": true,
        "php-cs-fixer.config": ".php-cs-fixer.dist.php;",
        "php-cs-fixer.allowRisky": true, // こちらをtrueに変更
        "php-cs-fixer.pathMode": "override",
        "php-cs-fixer.exclude": [],
        "php-cs-fixer.autoFixByBracket": true,
        "php-cs-fixer.autoFixBySemicolon": false,
        "php-cs-fixer.formatHtml": false,
        "php-cs-fixer.documentFormattingProvider": true
    ```
アニメとマンガの影響で仕事を選ぶ時代かもしれない

マンガとアニメが好きな小野です。

将来パソコン関係の仕事に就きたいと思ったキッカケは、今思い返せばアニメだったと思います。
そのアニメは、デジモンです。

デジモンというと、今でもシリーズが続いていますが、私の時は当然初代です！
年齢がバレますね（笑）

インターネットを分かりやすく異世界の舞台にしたデジモンは、いろんな意味で画期的だったなぁと思います。
同い年くらいの少年少女が主人公で、みんなのパソコンを使っている姿を見ていたらシステムエンジニアになっていました。

中でも「泉光子郎」は記憶に強く残ってます。
賢いし、続編からは会社経営してますからね。
自分も会社の代表取締役になろうと思いましたね。

## ぼくらはマンガとアニメから大きな影響を受けている
こういうことを考えると、**今の世代（30代未満）はマンガやアニメから影響を受けて、将来の職業を選択するの増えていると感じます。**
実際、この後に他のマンガ「東京トイボックス」でも影響を受けました。
ドラマ版では、要潤が主人公を演じていましたね。

さらに「東京トイボックス」で憧れたのは、東京で働くということ！
秋葉原の雑居ビルで朝から晩まで家にも帰らずゲーム開発をする姿は、「カッコいいなー！」と焼き付きました。
いまだに読み返すと、感動するマンガです。

https://amzn.asia/d/75bBmdy

その後は、FaceBookやAppleなどが話題となり、映画化。
今思い返せば、完全にITブームの波に乗っかっていました（笑）

スティーブジョブズの映画はおすすめです。
歴史的な勉強にもなりますし、ジョブズの仕事を成功させる姿勢が学びになります。

https://www.amazon.co.jp/%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%83%BB%E3%82%B8%E3%83%A7%E3%83%96%E3%82%BA-%E5%90%B9%E6%9B%BF%E7%89%88-%E3%82%A2%E3%82%B7%E3%83%A5%E3%83%88%E3%83%B3%E3%83%BB%E3%82%AB%E3%83%83%E3%83%81%E3%83%A3%E3%83%BC/dp/B00KG0X9XE/ref=sr_1_5?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3A9A2J7KLKN4M&keywords=%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%82%B8%E3%83%A7%E3%83%96%E3%82%BA&qid=1677670878&sprefix=%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%82%B8%E3%83%A7%E3%83%96%E3%82%B9%2Caps%2C341&sr=8-5

最近だと、山崎賢人が主役のドラマ「アトムの童」もやってましたねー。
これも「東京トイボックス」と同じでゲーム開発の物語でした。

### さいごに
映画、アニメ、ドラマ、マンガ。
今は色々なものから影響を受けて、将来の道を選択できて良いですね！

ひと昔前だと、親の仕事や商店街にあるお店からしか仕事を選ぶのが当たり前だったのに。。

昔の日本を知るなら、こちらの映画が分かりやすいですよ。
濱田岳さん、演技が上手すぎます。

https://amzn.asia/d/2Ilb2EB
Springでポートフォリオを作る　3-1.画面設計

# 前回まで
前回までは基本設計の概念を整理しました。

https://qiita.com/Jackoguro/items/7b00cea2514f485a72c3

# 参考資料
https://www.udemy.com/course/digisaku_requirements_definition_and_system_design/

# この記事の目的
この記事では画面設計の内容をまとめます。

# 画面設計の順序
1. 項目の洗い出し
1. 骨組み作り
　1. オブジェクト指向UI or タスク指向UIを決める
　1. 画面遷移図を作成する
1. 肉付け
　1. 洗い出したタスク(ユーザー操作)を各画面に割り当てる
　1. 情報(オブジェクト)の配置を決めてレイアウトを作成する

## 項目の洗い出し
ここでは登録するオブジェクト(モノ、情報)とユーザーのタスク(操作)を洗い出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/e93791ec-6874-29e9-71df-72a287cf9336.png)

## 骨組み作り
### オブジェクト指向UI or タスク指向UIを決める
今回はオブジェクト指向UIにしました。
理由として、扱うものの対称(オブジェクト)が多いため、対象→タスクの方が良いと考えたためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/e92d62e5-ff40-6775-9919-420667ff6bc0.png)

### 画面遷移図を作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/c6e7654c-4049-0763-d0d0-40a828a29432.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/60d8f2da-9014-1860-1db2-01d78fa4390a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/01961d84-02e1-aa17-79f6-ea629b7343eb.png)

## 肉付け
### 洗い出したタスク(ユーザー操作)を各画面に割り当てる
ここでは、項目の洗い出しで出したタスクがどの画面で行われるかを割り当てます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/780773c8-88dd-0723-cb87-ef69e00a9a69.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/1142d4fa-1768-81c3-001b-f79cfce46d0f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/27375c29-ed37-f68b-65a1-b76b853fb3f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/3e6791c8-fb04-1636-4403-ee0ece982b6b.png)


### 情報(オブジェクト)の配置を決めてレイアウトを作成する
画面遷移図全体を貼ると大きすぎるため、Figmaで作成した画面遷移図のリンク載せておきます。

https://www.figma.com/file/KyHWjfiJVET9GSJBm2MMUg/Untitled?node-id=0%3A1&t=iofjXkhMRohYjUMR-1

また、画面レイアウトの作成はAdobe XDで行ったので、そのリンクも載せておきます。

https://xd.adobe.com/view/76a0c1e1-73a7-466a-8737-39b3360776c1-23f3/

ホバーやトグルステートを部分的に実装しているため、多少見づらくなっていると思いますがご了承ください

# 最後に
これで基本設計の概念整理を終了します。
次回から画面設計に入って行きます。
テスト89

```vb
Public Sub PDF_Rotate()
'-----------------------
'参照設定：Acrobat(Adobe Acrobat 10.0 Type Library)
'有料のAcrobat Proを使えるようにしておく必要がある
'-----------------------
'メモ
'PDFを回転させる...〆(･ω･ )ﾒﾓﾒﾓ
'-----------------------
Dim FSO As Variant
Dim objAcroApp As New Acrobat.AcroApp
Dim objAcroAVDoc  As New Acrobat.AcroAVDoc
Dim objAcroPDDoc As New Acrobat.AcroPDDoc
Dim objAcroPDPage As Acrobat.AcroPDPage
Dim objAcroAVPageView As Acrobat.AcroAVPageView
Dim objAcroPdAnnot As Acrobat.AcroPDAnnot
Dim lRet  As Long
Dim lCnt  As Long
Dim i  As Long
Dim lPage  As Long
Dim F As Variant
Dim str_Path As String
Dim output_Path As String

Set FSO = CreateObject("Scripting.FileSystemObject")
str_Path = "C:\Users\User\Desktop\VBA関連\VBA練習\PDF\PDF回転\"
output_Path = "C:\Users\User\Desktop\VBA関連\VBA練習\PDF\PDF回転\出力先"
 
'Acrobatを起動表示する
lRet = objAcroApp.Show

'フォルダ内にあるPDFを順番に見ていく
For Each F In FSO.GetFolder(str_Path).Files
    'PDF表示
    lRet = objAcroAVDoc.Open(F, "")
    
    Set objAcroPDDoc = objAcroAVDoc.GetPDDoc()
    Set objAcroAVPageView = objAcroAVDoc.GetAVPageView()
    lPage = objAcroPDDoc.GetNumPages - 1
    
    lRet = objAcroApp.Show
    
    For i = 0 To lPage
        'ページ移動する。
        lRet = objAcroAVPageView.Goto(i)
        '現在のページのPDPageオブジェクトを取得する
        Set objAcroPDPage = objAcroAVPageView.GetPage
    
        '右に90度ごとに回転
        With objAcroPDPage
        
            lRet = .setRotate(90)

'            lRet = .setRotate(180)
'
'            lRet = .setRotate(270)

        End With
            
    Next i
    
    With FSO
        'PDFを別名で保存する(別名じゃないと回転させた状態で保存できないので別名で保存する)
        lRet = objAcroPDDoc.Save(PDSaveFull + PDSaveLinearized + PDSaveCollectGarbage, _
                                .BuildPath(output_Path, .GetBaseName(F) & "_90度回転" & ".pdf"))
                                                
    End With
    
    'メッセージを表示しないでPDFファイルを閉じる
    lRet = objAcroAVDoc.Close(-1)
    
Next F

'Acrobatを閉じる
lRet = objAcroApp.Hide
lRet = objAcroApp.Exit

Set objAcroAVDoc = Nothing
Set objAcroPdAnnot = Nothing
Set objAcroPDPage = Nothing
Set objAcroAVPageView = Nothing
Set objAcroPDDoc = Nothing
Set objAcroApp = Nothing
Set FSO = Nothing

MsgBox "処理が終了しました。", vbInformation

End Sub
Android NDKの使い方、さくっととりあえずHello world出す

## NDKを入れるとできること
https://developer.android.com/ndk?hl=ja
- CとC++言語ファイルが作れ、Kotlinから実行できる。
- 処理速度を早めたりC,C++で書いたコードを再利用できる

## 私の環境
Android Studio Dolphin


## やってみる
### new projectする
Android StudioでNew projectする

### 画像右下のNative C++を選択してnext
![スクリーンショット 2023-02-28 10.30.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/cae77ac7-c199-8182-1b0f-a86b7ab8cab3.png)

### すきなプロジェクト名をつけて好きな場所に置いてnext
minimumSDKはいじらなくて大丈夫です

![スクリーンショット 2023-02-28 10.32.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/2497e0c0-73bd-59be-d552-1760cd3e95d1.png)

### いじらずfinish
プロジェクトが立ちあがるので待っててください
![スクリーンショット 2023-02-28 10.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/87ee866c-79c5-cad6-8b9d-a48a64525a79.png)

### 上の緑▷マークを押してとりあえずrun

![スクリーンショット 2023-02-28 10.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/b3f69eb0-c471-1632-499e-40927535c7bd.png)

### なんかエラーが出た
compileSDKversionを33にしてほしいっぽいのでgradle開いて33に変更
![スクリーンショット 2023-02-28 10.42.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/c9384917-c16a-c512-1ce5-5820c1ac070d.png)

### syncしてもう一回run
build successしてるけどエミュレータに何も出ない
![スクリーンショット 2023-02-28 10.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/1c8e2b27-7946-2145-dd07-e48b69d915b6.png)

### 起動されないのでSDKツールを確認
右上Tools > SDK Manager > SDK Toolsのタブ
![スクリーンショット 2023-02-28 10.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/d276486e-cccd-6096-3363-a0e0f7495250.png)

### NDK(side by side)を選択してApply
![スクリーンショット 2023-02-28 10.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/51dbd25d-ed25-450c-933b-3f94413b0397.png)


### 終わったら閉じる
終わったらfinish押して、OK押してSDKマネージャーを閉じる
![スクリーンショット 2023-02-28 10.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/6daba3cb-951c-936b-4d2f-2d2bda7bc91e.png)


### もう１回runしてみる
"Hello from C++"が出現する
![スクリーンショット 2023-02-28 10.49.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/ea848244-6465-a0b9-c38a-b71acd0cdd97.png)

### コードをとりあえず変更する
app > cpp > native-lib.cppを開くと"Hello from C++"があるので、
好きな文字列を入れてもう一回実行してみる

![スクリーンショット 2023-02-28 10.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/9dc117fb-c63e-9b91-5fb5-199ae4111527.png)

### でた
![スクリーンショット 2023-02-28 10.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/bb37df8c-6b1d-1a2a-b121-8f14996c3fcf.png)


### おしまい
次の記事で新しいc言語ファイルを作成して実行する方法書きます
【JavaScript】プルダウンから値を取得する

## やりたいこと
プルダウンからスポーツ名を選択して、選択完了ボタンを押下すると、選択したスポーツ名が表示させるようにしたいと思います。
以下が、参考にしたページのURLになります。
https://itsakura.com/js-selectbox

## 実際の画面
1.こちらのプルダウンから選択します。
![スクリーンショット 2023-03-01 20.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f1418ba1-8223-c154-2897-5761b08d66e8.png)

2.プルダウンメニューから、今回は「サッカー」を選択して、「選択完了」ボタンを押下。
![スクリーンショット 2023-03-01 20.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/fac7d00f-58f3-c3fe-76ec-e4d42a744ccd.png)

3.選択した「サッカー」が画面に表示。

![スクリーンショット 2023-03-01 20.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f29c50b1-76c6-bc39-fe28-2da0dc984b9b.png)

## ソースコード
こちらが、今回のソースコードになります。
```:index.html
<!DOCTYPE html>
<html lang="js">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>練習</title>
</head>
<body>
    <select class="form-select" required aria-label="select example" id="selectSport" style="width: 30%;">
        <option value="">テニス</option>
        <option value="">野球</option>
        <option value="">サッカー</option>
        <option value="">バスケ</option>
    </select>
    <button id="btn">選択完了</button>
    <p id="setSport"></p>
</body>
<script src="index.js"></script>
</html>
```

```:index.js
// 「選択完了」ボタンと選択した値を表示するidを取得
const btn = document.getElementById('btn');
const setSport = document.getElementById("setSport");
const selectSport = document.getElementById("selectSport");
// メニューから値を選択して、ボタンを押した後の処理
btn.addEventListener('click', () => {
    const num = selectSport.selectedIndex;
    // 選択した要素のテキストを取得する処理
    const getSportName = selectSport.options[num].innerText;
    // 取得した要素をHTMLに埋め込む
    setSport.innerText = getSportName;
});
```
プルダウンからのデータ取得は結構使えるので、ぜひ参考にしてください。
Ruby countメソッドを使ったプログラムの作成

# 特定の数値の個数を算出するプログラムを作成します

- 条件1:配列の中の数字に対して、9の個数を数える
- 条件2:数えた9の個数を出力する

```ruby
def array_count9(nums)
  count = nums.count(9)
  puts "配列の中には9が#{count}個です"
end
# 呼び出し例
array_count9([1, 2, 9])
```
ターミナル出力結果は以下の通りです。
```ruby
配列の中には9が1個です
```

## 解説
- countメソッドについて
引数に指定した数字に一致するものの個数を数え、その結果を返すメソッドです。

（例）
```ruby
ary = [1, 2, 4, 2]
ary.count(2)
 # => 2
 ```
 
 今回は、特定の数字「９」がいくつあるのかcountメソッドを使って数えてもらいます。
fedora 37にfirefoxをインストール

# ダウンロード・実行

https://www.mozilla.org/ja/firefox/new/

```
tar jxf firefox.tar.bz2
```

上記コマンドで解凍してなかにあるfirefoxファイルを実行すれば起動できる。

# 設定

毎回コマンド叩くのは面倒なので、gnomeのランチャーにfirefoxを登録する。

https://support.mozilla.org/ja/kb/install-firefox-linux

上記urlの

```
wget https://raw.githubusercontent.com/mozilla/sumo-kb/main/install-firefox-linux/firefox.desktop
```

のこのファイルを~/.local/share/applications/以下に保存する。

このファイルのExecの項目とIconの項目のパスを環境に合わせて変更する。

自分の場合、ランチャーに既にfirefoxがインストールされていて、これが上記の手順で.desktopファイルを作成した途端に、今回インストールしたものに切り替わった。
Auth0 API認可制御の検証手順 メモ


* Auth0でのAPI認可制御について検証した際の手順をメモしておく。

## Auth0各要素の関係性

![auth0_api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/4ad1ce80-6d1a-a956-c01e-1c52a44de492.png)



## 検証準備

### APIを定義する

1. ダッシュボード画面 -> Applications -> APIsを選択する。
2. 「Create API」を押下する。
3. Name、Identifierを入力する。
   * `Name`:API名
   * `Identifier`:APIエンドポイント
     * 今回は`http://localhost:3000/users`とする。
4. Permissionsを選択する。
5. API呼び出しに必要なPermission（スコープ）を設定する。
   * 今回は`test`とする。

### アプリケーション(クライアント)を定義する

1. ダッシュボード画面 -> Applications -> Applications を選択する。
2. 今回は「Single Page Application」を選択する。※任意
3. Settingsの下記項目を設定する。
   * `Allowed Callback URLs` : `http://localhost:3000`
   * `Allowed Logout URLs` :  `http://localhost:3000`
   * `Allowed Web Origins` :  `http://localhost:3000`



## 動作検証
※認可コードグラントで取得したアクセストークンのペイロードを確認する。
1. 認可エンドポイントへアクセスする。

   * `https://{tenant_url}/authorize?client_id=....&redirect_uri=http://localhost:3000&scope=read:test&state=....&response_type=code&audience=http://localhost:3000/users`

     <u>※`audience`にAPI定義の`identifier`を指定し、`scope`にAPI定義の`Permission`を設定する。</u>

2. ログインする。

3. 同意画面で同意する。※スコープ`test`が表示される。

4. 3後に`http://localhost:3000`へリダイレクトされた際に指定された認可コードを取得する。

5. 認可コードを指定してアクセストークンを取得する。

   ```http
   POST /oauth/token HTTP/1.1
   Host: {tenant_url}
   Content-Type: application/x-www-form-urlencoded
   Content-Length: 256
   
   code=...&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=test&client_id=...&client_secret=...&grant_type=authorization_code
   ```

   

6. アクセストークンをデコードする。

![auth0_access_token_jwt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/a336cda6-9db2-b19e-1ef2-74d236ad9bea.png)


   ※**`aud`にAPI定義の`Identifier`、`scope`にAPI定義の`permission`が設定されていることを確認できる。**※認可リクエスト時に指定したもの。

   ※呼び出されたAPI側は[こちら](https://auth0.com/docs/secure/tokens/access-tokens/validate-access-tokens)の手順に従って、アクセストークンの検証を行う。





## 参考情報

* [Validate Access Tokens](https://auth0.com/docs/secure/tokens/access-tokens/validate-access-tokens)
FXのデータをPythonで取得するために知っておきたい基本的なこと

以下の文章は、トレーダーが日々の取引に利用できる無料の株価・為替・仮想通貨データを提供しているAlphaVantageについて、その利用方法について説明したものです。

まずは、FXとは何かと知りたい方は以下のサイトが参考になります。
初心者はこういったサイトで基礎知識を身に付けるのです。
[株やｆｘのやり方を紹介し、トレードで儲かるよう応援するブログ](https://fx-trade.site)

トレーダーは、1日単位でトレードをすることが多く、そのためには常に最新の情報を取得する必要があります。AlphaVantageは、多くの研究者、エンジニア、ビジネス専門家が使用する無料のストックAPIです。AlphaVantageは、株価、為替（FX）、仮想通貨のデータを提供しています。さらに、テクニカル指標や経済指標も含まれています。

AlphaVantageの利用方法は、APIキーを取得することから始まります。APIキーを取得するには、メールアドレスを登録する必要があります。AlphaVantageのホーム画面にアクセスし、「GET YOUR FREE API KEY TODAY」というボタンをクリックすると、必要な情報を入力するだけでAPIキーを取得することができます。

APIキーを取得したら、次にAlphaVantageのDOCUMENTATIONを開きます。DOCUMENTATIONには、APIを利用するための詳しい説明が記載されています。トレーダーが利用するデータを取得するためには、DOCUMENTATION内で適切なAPI関数を見つける必要があります。たとえば、FXの過去レートを取得する場合は、「Forex(FX)のintraday」という関数を使用する必要があります。AlphaVantageの過去データの一覧を確認するためには、参考URLをブラウザのURL欄に貼り付けることができます。参考URLには、APIキーが含まれていますので、自分のAPIキーに変更して使用する必要があります。

取得したデータは、Pythonのpandasを使用して分析することができます。データは、json形式のデータをpandasのデータフレームに入れていきます。APIキーを取得したら、適切なAPI関数を使用して、必要なデータを取得することができます。取得したデータを適切な形式に整形してから、pandasに渡すことができます。

このようにして、トレーダーはAlphaVantageを使用して、必要なデータを取得することができます。データの取得には、APIキーを取得することが必要であるため、事前に登録する必要があります
【livewire 2.0】二層のルートモデルバインディングが出来ずにハマったが解決した

## 概要

ルートモデルバインディングで、以下のように手前のモデルで絞り込みをする際

```php
Route::get('/users/{user}/posts/{post:slug}',\App\Http\Livewire\Post\Edit::class);
```

livewireコンポーネント内で

```php
class Edit extends Component
{
  public Post $post;
```

のようにpostだけの定義だと手前の``user``で絞り込まれない



```php
class Edit extends Component
{
  public User $user;
  public Post $post;
```

コンポーネント内で使わなくとも手前の``user``を定義しないと多層のモデルバインディングがちゃんと動いてくれません。
はぁ。



https://laravel-livewire.com/docs/2.x/rendering-components#route-model-binding
Swift FirestoreのMAP型の特定のKeyのValueを消す


SwiftでfirestoreのMap型の特定のKeyのValueを消すには、
以下のコードで消すことができる。


```

let db = Firestore.firestore()
let ref = db.collection("コレクション名").document("ドキュメントID")

ref.updateData([
            "フィールド名.\(Key)": FieldValue.delete(),
])

```

ちなみに追加するときは


```
let db = Firestore.firestore()
let ref = db.collection("コレクション名").document("ドキュメントID")
        
        ref.updateData([
            "フィールド名.\(Key)": Value,
        ])

```


FirestoreのMap型は

フィールド名.key

でデータの更新ができるので便利。
LINE Messaging APIの登録〜アクセストークンを発行

# はじめに
LINE MEssaging APIの登録からアクセストークンの発行までをまとめました

# LINE MEssaging APIの登録
LINE Developpersのサイトにアクセスして会員登録をします

https://developers.line.biz/ja/services/

会員登録の方法は省略します

Messaging APIの「詳細はこちら」をクリックします
![スクリーンショット 2023-03-01 19.57.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/e953375b-124e-347b-f1ca-3baff16adfad.png)

「今すぐはじめよう」をクリックします
![スクリーンショット 2023-03-01 19.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/61004441-728a-9481-5206-928d17caaf95.png)

「Create a new channel」の画面が開くので項目を適宜埋めていきます


これでMessagingAPIの登録は完了です。

次にアクセストークンを発行します

# アクセストークンの発行
今回は30日有効なアクセストークンを発行することにします

下記のサイトが参考になりました
https://developers.line.biz/ja/reference/messaging-api/#revoke-channel-access-token-v2-1

```shell
curl -v -X POST https://api.line.me/v2/oauth/accessToken \
-H "Content-Type: application/x-www-form-urlencoded" \
--data-urlencode 'grant_type=client_credentials' \
--data-urlencode 'client_id={channel ID}' \
--data-urlencode 'client_secret={channel secret}'
```
上記のコマンドの4行目{channel ID}、5行目の{channel secret}に
先ほど登録が完了したMessaging APIのコンソール画面のBasic settingタブに記載がある値をセットしてcurlをターミナル等で実行します

```shell
$ curl -v -X POST https://api.line.me/v2/oauth/accessToken \
> -H "Content-Type: application/x-www-form-urlencoded" \
> --data-urlencode 'grant_type=client_credentials' \
> --data-urlencode 'client_id=12345' \
> --data-urlencode 'client_secret=q3904tguvj03932d'
...
* successfully set certificate verify locations:
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384
* ALPN, server accepted to use h2
{"access_token":"fjqi3o48gf2a3","expires_in":12345,"token_type":"Bearer"}
```
コマンドを実行すると、出力結果の最後に"access_token"が出力されます
これのvalue値がアクセストークンです

以上です