OmniAICreator/Qiita-1.07M huggingface dataset:
アプリケーション開発手順

本日は、アプリケーションが開発される手順について、
復習したので記事に残したいと思います。
手順については以下になります。

1.企画
2.要件定義
3.設計
4.開発
5.保守運用

こちらの手順でアプリケーションは開発されます。
それぞれについて深堀してみたいと思います。

## 企画
「どのようなアプリケーションを作成するか?」から「開発をスタートさせる」までを
考えることであり、ターゲットを絞ったり、プロトタイプを作ったりと様々な工程が
あります。
ここで、ペルソナやユーザーストーリーを決めます。

・ペルソナ
ペルソナとは、「サービスを使用するユーザー」のことで、
性別、年齢、趣味、仕事などを決めていきます。

・ユーザーストーリー
ペルソナの課題に対してどのような機能で解決していくかを明確にしたもの。

例えば、音楽好きの方がCDを集めるのが趣味だったとします。
CDは多くなると管理が大変になるので、1つにまとめて管理したい。
というのが、ペルソナだとしたら、そのために「音楽の一覧表示」機能
をつけるというのが、ユーザーストーリーになります。

## 要件定義

要件定義とは、アプリケーションの使用や要件を洗い出します。
アプリケーションを詳細に言語化することにより、
複数人で開発する際に完成のイメージのズレがなくなります。

## 設計
開発に必要なDBの設計を行います。
設計には基本設計と詳細設計があります。

・基本設計
要件定義の内容を開発に必要な内容にまとめること、外部設計とも呼ばれる。

・詳細設計
実際に書くべきコードを洗い出す作業。
要件定義や基本設計の情報を元にユーザーが行う操作に対しての処理を
全て書き出す。

次に、どの画面でどんな操作をしたらどのページに移動するかを図で表記した「画面遷移図」を作成します。
紙に書いたり、専用のアプリを使ったりします。
例えば、
「トップページには」ログイン、新規登録ボタンがあり、ログインをクリックすると
ログインページに遷移するなどを図に表す。

次にDB設計を行います。
具体的には「テーブル」や「カラム」、「関連付け（アソシエーション）」などです。
保存する項目を全て洗いだし、どのようなテーブルがあれば管理しやすいかを考慮しつつ
テーブル同士の関連づけを考えていきます。

DB設計は、エンティティをを抽出します。
エンティティとはデータのことです。
エンティティを抽出したら、エンティティの分類や関連づけを行う
モデリングを行います。



DB設計では、制約の設定も行います。

制約とは、データを扱う時に制限をかけることで、バリデーションに似ています。
制約には、以下のものがあります。

・NOT NULL制約
空のデータが入らないようにする制約

・一意性制約
テーブル内で同じデータが入らないようにする制約

・主キー制約
データが空にならずに、同じデータが入らないようにする制約。
NOT NULL制約と一意性制約を合わせたもの

・外部キー制約
外部キーの対応するデータが必ず存在しなくてはいけないという制約。
関連性のあるテーブル同士を結びつける場合に、対応する外部キーのカラム名の後に記述します。

例

```
t.型 :カラム名,  foreign_key: true
```

・チェック制約
値が保存される際に条件を満たしているかチェックできる制約.
例えば、名前が6文字以下になる条件をつければ、それ以上では
保存できなくなる。

そして、ER図を作成します。
ER図とは、DBのテーブルを図に現したもので下記の写真がER図です。

[![Image from Gyazo](https://i.gyazo.com/653294a86757b7a74229dedd3f50c67d.png)](https://gyazo.com/653294a86757b7a74229dedd3f50c67d)

ER図を描くことで、テーブル同士の関係が1目でわかるようになります。
【JavaScript】特定のvalueが合致するオブジェクト同士で配列

備忘録。
目的：__場所ごと__にデータを分けて使用したい。
#前提
勉強に付随するデータを見える化するアプリを作っているため、

+ 日にち
+ 場所
+ 集中度
+ 勉強内容
+ 勉強時間

入力した回数分オブジェクトを複数生成。 __posts = []__ に格納。

※一例 (axiosを利用しているため型の宣言付)

```js
const obj = {
nowTime: {stringValue: "2021年2月26日19時47分"},
studyArea: {stringValue: "マクドナルド"},
studyDensity: {stringValue: "普通"},
studyContent: {stringValue: "JavaScript"},
studyTime: {integerValue: "3"} //hour
}

const posts = [{obj}, {obj}, {obj}...];
```

場所を被りなしで抽出して配列にしている。

```js
const areas = ['マック', 'イオン', 'タリーズ', 'サンマルク'];
```

##解答

```js
const separateArea = [];

const separate = function() {
      let sortObj = [];
      for (let i = 0; i < areas.length; i++) {
        posts.forEach(post => {
          // index→0
          if (post.studyArea.stringValue.indexOf(areas[i]) !== -1) {
            sortObj.push(post);
          }
        });
        separateArea.push(sortObj);
        sortObj = [];
      }
    }
```

##解説
1. 分けたオブジェクトを最終的に格納する __separateArea__ を定義。
2. 同値の__studyArea__をもつオブジェクトを配列にするため __sortObj__ を定義。
3. postsの要素（post）にareasの__i番目__と同じ名前の__studyArea__があればsortObjにそのオブジェクトをpush.これをpostsの要素数分行う。(forEach, __indexOf__)
4. studyAreaが一致するオブジェクトを__洗い出したら__sortObjを__separateAreaにpush__.
5. sortObjを空に。
6. areasの要素数分ループ。

##ポイント
__indexOf__
>indexOf() メソッドは、呼び出す String オブジェクト中で、 fromIndex から検索を始め、指定された値が最初に現れたインデックスを返します。値が見つからない場合は -1 を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

特定のvalueが合致するオブジェクト同士で配列を作りたかったためvalue同士を比べるために使用。
もっといい方法があれば教えてください。
huskyが動かない時の対処法

2021年2月以降に新しく`husky`と`lint-staged`をインストールして、以下のような設定を`package.json`に書いたのに動かなかった。

そんな時の対処法です。

```pakcage.json
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "src/**/*.{gql,graphql,json}": [
      "prettier --write"
    ]
  },
```

## 結論

既存の書きぶりのまま動かしたい場合は、v4をインストールしましょう。

```bash
# huskyをアンインストール
yarn remove husky
# v4をインストール
yarn add -D husky@4
```

これで動くようになります。

husky最新版で動かしたい場合は、適宜ドキュメントを見て設定を変更する必要があります。

以下、詳細です。

## huskyのメジャーバージョンが6に

~~いつのまにかhuskyのメジャーバージョンが `5` になってました。~~
2021年3月末にhuskyバージョン`6`がリリースされました。

https://github.com/typicode/husky/releases/tag/v6.0.0

v5から設定方法がガラッと変わったのが動かなかった原因でした。
v5,v6では、v4の書き方だと動きません。

## 対処方法

~~設定方法が変わった他に、ライセンスにも変更がありました。
現状でhusky v5を自由に使えるのは、OSSのみです。~~

v5では限定的なライセンスでしたが、v6で再びMITになりました。
以下のドキュメントを参考に、v4からv6にアップデートすれば動くようになるでしょう。

[Migrate from v4 to v6](https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v6)


## おわりに

従来どおりの書き方がよければv4を使いましょう。

```bash
yarn add -D husky@4
```

さすれば今までの設定のままいけます。
npmとyarnって結局どっちが早いの？

# はじめに
npmとyarn、結局どっちが早いの？そんな疑問を抱いた方も結構多いと思います。
個人的にはyarnのほうがいいと思いますね。なんだか言葉の響きが...「やーん」おっと失礼。
そこで、npmとyarnを対決させてみました。

環境によって変わるとは思いますがそこは承知の上で。

# つかうもの
今回は以下を使うことにしました。

* init
* bulma
* JQuery
* Material-Icons
* Material-UI

# init
まずは最初にinit！

```sh
npm init -y
```
```sh
yarn init -y
```

### 結果
![init.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/cfba6197-4310-ec39-fbd5-e46e74e136ac.jpeg)
yarnが上、npmが下です。
yarn 0.26秒
npm 約5秒

0.26秒？おそらく待機時間は含めていないのでしょう。実際にyarnが早かったのでなんでもいいですよね？:sweat_smile:

# bulma
cssフレームワークです。

```sh
npm i bulma
```
```sh
yarn add bulma
```

###結果
![bulma.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/1ebda506-9800-cd7d-ec41-b43f82da9b8f.jpeg)
yarn 3.30秒
npm 8.812秒

yarn早い。

# JQuery
いままでJqueryだと思っていました。qは大文字なんですね。

```sh
npm i jquery
```
```sh
yarn add jquery
```

### 結果
![jquery.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/8216b225-a21c-e556-85a3-984b76e49ed3.jpeg)
yarn 9.21秒
npm 3.94秒

npmが早くなった

# Material-Icons
```sh
npm i material-icons
```
```sh
yarn add material-icons
```

### 結果
![material-icons.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/fdf675fc-2d66-ba2e-8887-0a6edf55b297.jpeg)
yarn 7.97秒
npm 6.362秒

# Material-UI

```sh
npm i @material-ui/core
```
```sh
yarn add @material-ui/core
```

### 結果
![material-ui.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053860/ddc877ad-98c2-85a3-ed5e-6ceb4c867a1a.jpeg)
yarn 91.21秒
npm 56.043秒

# 全体結果

* initは完全にyarn
* ほかは種類によって違う

実際はnpmよりyarnがレスポンス早かったりします。Material-UIはnpmの圧勝でしたが。

とりあえずyarnが早いということにしておきましょう。一回だけで決めつけるのは良くないですけど。
【Ruby】Hashまとめ

# Hashまとめ
PaizaでHashを使うことがあったので、整理がてらまとめました。

## Hashとは
* みなさんお馴染みのKey,Value配列
    * なんだかんだでよく使う。実務でも割と。
    * 2次元配列が個人的には嫌いなので、Hashに逃げがち
* Hash使えたら、Rubyを「完全に理解した」レベル。チョットデキルには程遠い。

## Hash作成

```ruby
hash = {}
```

## 要素の検索

### Key検索

```ruby
hash = { "Apple" => 1, "Orange" => 5 }
print hash.find {|k,v| k == "Apple"}
# { "Apple" => 1 }
```

### Value検索
* やり方は上と同じなので割愛。気が向いたら書く

## 要素の追加

```ruby
hash = { "Apple" => 1, "Orange" => 5 }
hash.store( "Grape" , 3 )
print hash
# { "Apple" => 1, "Orange" => 5, "Grape" => 3 }
```

## 要素の削除

```ruby
hash = { "Apple" => 1, "Orange" => 5 }
hash.delete("Apple")
print hash
# { "Orange" => 5}
```
PHP8(Laravel8)でデスクトップアプリケーションを作る方法

今回はPHP8,Laravel8にてデスクトップアプリケーションを作る方法を紹介します。

phpdesktop( https://github.com/cztomczak/phpdesktop )を使うことによってWEB技術によってデスクトップアプリケーションを作ることが可能になります。

早速、起動するまでの手順を書いていきます。
ちなみに自分はwindows環境です。


## phpdesktopをダウンロードする

https://github.com/cztomczak/phpdesktop

githubのreadmeにOSごとの最新バージョンのReleaseへのリンクがあるので自分の環境に合わせたものをダウンロードして解凍します。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242711/d4f49290-ce28-302f-694d-155f9fe7b7f3.png)

中身はこんな感じ

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242711/6a77a5c7-c530-f71d-7b6e-629803965f1b.png)

## phpのバージョンを8.0にする

　そのままだと、PHPのバージョンが古くてLaravel8が使えません。
　Laravel8では最低でもバージョン7.3以上が必要です。
　今回はphp8にしたいと思いますがバージョ使いたいバージョンでも大丈夫です。

 https://www.php.net/downloads.php

　PHPのダウンロードページに行き、使うバージョンをダウンロードします。
　
　**Windowsの場合はhttps://windows.php.net/download#php-8.0 にあるx64 Non Thread Safeでないと行けないので注意!**

　そして、phpdesktopフォルダ内にあるphpフォルダの中身をダウンロードしたものに置き換えます。

## Laravel8を用意する

　laravel8のprojectを用意します。
　自分はwindows環境なのですが、windowsにcomposerやら何やら入れるのがめんどくさかったので
  vagrantのcentos7上で色々やってます。
　予め環境が用意されている場合はwindows上でやっても問題ないかと思います。

　まず、gitからlaravel8を落としてくる
  デフォルトブランチが8.xなのでそのままで。

```
[root@localhost vagrant]# git clone https://github.com/laravel/laravel
```
  laravelフォルダに行きcomposerで色々インストールする

```
[root@localhost vagrant]# cd laravel/
[root@localhost laravel]# composer install
```

.env ファイルを用意する

```
[root@localhost laravel]# cp .env.example .env
```

アプリケーションのkeyを発行する

```
[root@localhost laravel]# php artisan key:generate
```

これでOK

##phpdesktopの設定

phpdesktopのwwwフォルダ内に

laravelフォルダ内のものを全部移動させます。

settings.jsonをいじる

```
"web_server": {
    ...
    "www_directory": "www/public",
    ...
    "404_handler": "/index.php"
```

phpdesktop-chrome.exeを実行すると

![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242711/a0c755bd-d2d3-edc3-34b4-35d30f23a414.png)

起動できました!!
毎日投稿（React）TODOアプリ学習

#React(TODOアプリ作成）

今日もReactの学習しました。U-demyの動画学習です。
以下オススメです！！

**モダンJavaSciptの基礎から始める挫折しないためのReact入門**
https://www.udemy.com/course/modern_javascipt_react_beginner/

昨日、Reactの基本的な書き方など学んだ上で、
今回はReactでTODOアプリを作成しました。

動画学習の進め方としては、以下のような流れが一番です！
機能追加などセクション毎に分かれいるので、まずは自分で実装してから出来なかったら、
動画を見る！という流れで実践したら、理解度が格段に違ってきます！

例

・タスク追加機能
・タスク削除機能
・タスク完了機能など、、、


まずは自分で考えて実装となると、時間がかかりますが、
これは絶対にすべきですね。

どうやって、引数を渡すのだろう？
どうやってuseStateを更新すればいいかなど考えて実装するうちに、わからないにぶち当たります。
そして答えとなる動画を見ると「あ！こんな風にやるのか！」面白くなります！

私の場合、削除ボタンを押すとタスクが削除される時に、どうやったら、引数を渡すかわからなくなり、答えとなる動画を見ました。

最初の実装⬇️

```
<button onClick={onClickRemove(index)}>削除</button>
```


答え⬇️

```
 <button onClick={() => onClickRemove(index)}>削除</button>
```


なるほど！ということ実感出来たので、とても楽しかったです！

##感想
JavaScriptで作ったTODOアプリより、Reactで作ったTODOの方格段にコード量が少なく、また使い回しが効くなどメリットがありすぎるので最高でしたね。
まだまだReact初心者ですが、これから学習していきます！

以上、ありがとうございました。
Google ColaboratoryでSpresenseビルド環境を構築する

# はじめに
Spresense SDKに限らないですが、ビルド環境の構築はLinuxで行うのが一番簡単だし、ビルド時間もLinuxが最速です。それなら Google の Colab 環境でビルドしてしまえ、という記事です。
Google Colab についての詳細は別の記事を参照してください。

* [Google Colabの使い方まとめ](https://qiita.com/shoji9x9/items/0ff0f6f603df18d631ab)
* [90分ルールと12時間ルール](https://qiita.com/tomo_makes/items/b3c60b10f7b25a0a5935#2-シャットダウンまでの残時間は90分ルールと12時間ルール)

# Spresense SDK ビルド環境構築

ツールのインストールから Spresense SDK をビルドして、nuttx.spk を作成します。
ツールのインストールスクリプトが用意されているので簡単に環境を構築できます。

Google Colab と接続して、コードを順番に実行してください。

https://colab.research.google.com/github/baggio63446333/spresense-colab/blob/main/spresense_sdk.ipynb

# Spresense Arduino パッケージ作成

さきほどの応用編で、Spresense Arduino 環境で使用される SDK prebuilt パッケージを Colab 上で作成します。Spresense Arduino の開発に、普段、Windows PCを使っているユーザは、Windows だと SDK 環境の構築とビルドに時間がかかるので、Colab を使えば簡単にオリジナルの Arduino パッケージを作成することができます。

Google Colab と接続して、コードを順番に実行してください。

https://colab.research.google.com/github/baggio63446333/spresense-colab/blob/main/spresense_arduino_prebuilt.ipynb
Android StudioでエミュレータをIDE内に表示する

# 概要
Android 4.1 より、Android Studio の IDE 内にエミュレータを表示できるようになりました。
IDEの上にエミュレーターが重なって手動で移動させたり、アクティブにしたりなどの手間もなくなるので、ディスプレイのサイズが広い場合は、こちらが使いやすいかもしれません。

また、デフォルトでは無効となっているので、設定を調整する必要があります。

![スクリーンショット 2021-02-28 14.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/4a78e66b-2f0c-5f6e-2a22-beaaf1a58664.png)

# 必要環境
- Android Studio 4.1 以降
- Android Emulator の バージョン 30.0.10 以降

# やり方
以下OS毎のメニュー箇所を参照に **[Launch in a tool window]** にチェックを入れてください。
次回エミュレーター起動時からIDE内に表示されるようになります。

## mac
**[Android Studio] > [Preferences] > [Tools] > [Emulator]**
の項目を開いて、 **[Launch in a tool window]** にチェック

![スクリーンショット 2021-02-28 13.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/605596e2-d2c1-6730-8f77-a6ed74fdf453.png)
![スクリーンショット 2021-02-28 13.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6d070637-66fa-58f6-6303-d7ad4af0aec1.png)
## Windows
**[File] > [Settings] > [Tools] > [Emulator]**
の項目を開いて、 **[Launch in a tool window]** にチェック

# エミュレーターのタブが自動的に表示されない場合
**[View] > [Tool Windows] > [Emulator]** で表示できます。
![スクリーンショット 2021-02-28 14.09.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/8ab8b6f3-2d9e-d1a4-7cdc-b89890cae468.png)

# 公式情報
こちらの情報は公式ページより参照しました。
詳しくはこちらをご覧ください。

**■ Android Studio で Android Emulator を直接実行する**

https://developer.android.com/studio/run/emulator?hl=ja#run-emulator-studio
amplifyの作法 その6

#概要

amplifyの作法、調べてみた。
pyqubo使ってみた。

#サンプルコード

```
import numpy as np
from matplotlib import pyplot as plt
from pyqubo import Array
from scipy.spatial import distance_matrix
from amplify import (BinaryPoly, BinaryQuadraticModel, gen_symbols, Solver, decode_solution, )
from amplify.client import FixstarsClient

data = []
for i in range(12):
    p = np.random.uniform(0, 1)
    cls = 1 if p > 0.5 else -1
    data.append(np.random.normal(0, 0.5, 2) + np.array([cls, cls]))
df1 = pd.DataFrame(data, columns = ["x", "y"], index = range(len(data)))
df1.plot(kind = 'scatter', x = "x", y = "y")
plt.show()
d_ij = distance_matrix(df1, df1)
spin = Array.create("spin", shape = len(df1), vartype = "SPIN")
H = -0.5 * sum([d_ij[i, j] * (1 - spin[i] * spin[j]) for i in range(len(df1)) for j in range(len(df1))])
model = H.compile()
sp = ["spin[0]", "spin[1]", "spin[2]", "spin[3]", "spin[4]", "spin[5]", "spin[6]", "spin[7]", "spin[8]", "spin[9]", "spin[10]", "spin[11]"]
qubo, offset = model.to_qubo()
Q = {}
for i in range(len(df1)):
  for j in range(len(df1)):
    if ((sp[i], sp[j]) in qubo):
      Q[(i, j)] = qubo[(sp[i], sp[j])]
f = BinaryPoly(Q)
model0 = BinaryQuadraticModel(f)
solver = Solver(client)
result = solver.solve(model0)
solution = result[0].values
for idx in range(0, len(df1)):
  if solution[idx] == 1:
    plt.scatter(df1.loc[idx]["x"], df1.loc[idx]["y"], color = "b")  
  else:
    plt.scatter(df1.loc[idx]["x"], df1.loc[idx]["y"], color = "r")

```

以上。
無料SSL証明書 Let's Encryptの更新をcronで自動化する

## 実現したいこと
- lets encryptのSSL証明書の更新を自動化する

独自ドメインのサイトをhttps化したのですが、3ヶ月で期限が切れてしまうようです。
手動で更新していると忘れることがあるので、早めに自動更新するように変更します。
その手順をシェアというかメモというか記事にしたいと思います。
cronを使ってやるのでcronの書き方もまとめました。

## 作業環境
- OS
    - CentOS7
- webサーバー
    - Nginx
- SSL
    - Let's Encrypt

## 参考サイト
- [certbot](https://certbot.eff.org/lets-encrypt/centosrhel7-nginx)
- [crontabの書き方](https://www.server-memo.net/tips/crontab.html#crontab)
- [certbot(Letsecnrypt)コマンド・オプションを真面目に理解する](https://qiita.com/s-katsumata/items/629222b24113d7a49b79)

## 手順
1. certbotのページへアクセスする
2. cronへ登録する


### 1. certbotのページへアクセスする

[certbot](https://certbot.eff.org/lets-encrypt/centosrhel7-nginx)のページ下部にある
**8.Test automatic renewal**に書いてあるコマンドを実行します。

```
sudo certbot renew --dry-run
```

#### 補足説明
- --dry-run:「更新」または「証明書のみ」をテスト実行。証明書をディスクに保存しない

[certbot(Letsecnrypt)コマンド・オプションを真面目に理解する](https://qiita.com/s-katsumata/items/629222b24113d7a49b79)より抜粋

コマンドを実行して成功になれば更新はできるので、cronに登録していきます。

```成功時のターミナル.
Congratulations, all simulated renewals succeeded: 
  /etc/letsencrypt/live/your_domain_name.com/fullchain.pem (success)
```

### 2. cronへ登録する
cronとは定期的に実行したいコマンドなどを登録することで、自動実行してくれる便利なものです。
lets encryptの証明書は3ヶ月ごとに更新が必要なため3ヶ月ごとに自動実行するよう設定していきます。

```
0 0 1 */3 * certbot renew
#3ヶ月ごと、1日0時0分にcertbot renewコマンドを自動実行します
#3月1日0時0分 6月1日0時0分 9月1日0時0分
```

#### cron書き方
\* * * * * [実行コマンド]となっており、左の*から分、時、日、月、曜日となっています
\*は全ての時間を設定したことになります。
もし\* * * * * [実行コマンド]を登録すると毎分コマンドが実行されることになります。
定期的に実行したい場合は\*/[間隔]としてください。

0 0 1 */3 * certbot renewこのコマンドでは、
分→0
時→0
日→1
月→3ヶ月ごと
曜日→月〜日(1~7)の全て
certbot renewを実行する
となります。

## 参考サイト

- [certbot](https://certbot.eff.org/lets-encrypt/centosrhel7-nginx)
- [crontabの書き方](https://www.server-memo.net/tips/crontab.html#crontab)
- [certbot(Letsecnrypt)コマンド・オプションを真面目に理解する](https://qiita.com/s-katsumata/items/629222b24113d7a49b79)
Raspberry pi pico と Arduino micro を比較してみた

# Raspberry pi とはなんなのか
Raspberry piと聞くと、なんだか難しい物を取り扱わなければならないような気になる方が多いと思う。
なんかちっちゃいコンピュータで色々とできるらしい、ということが漠然とわかるだけで、具体的なイメージがわかないのは、実際に使用し始める前までは私もそうだった。
実際は、普通の小さなデスクトップPCと変わらない。
最近のものではWifiやBluetoothも内蔵しているし、内部ではOSだって稼働しており、ブラウザでYoutubeを見ることのみならず、なんとデフォルトでマインクラフトまで遊べてしまったりもする（機能限定版）。
場合によってはOS自体をWindowsやiOSに変える事もできるようだ。

さて、そんな Raspberry pi だが、それ単体ではできないことがあった。
それは「アナログ信号」の取り扱いである。

# Raspberry pi pico の登場
Raspberry pi をどのような場面で使用することが考えられるかというと、そのうちの一つにセンサー値のインターネット共有がある。
受け取ったセンサー値をインターネットに送信し、遠隔で対象を観察することを可能にする。
しかし、各種センサーから送られてくる信号は、基本的にはアナログ信号であることが多く、Raspberry pi 単体ではその信号を受け付けることができない。
なので、その役目を外部のデバイスへ委ねる必要がある。
これまでは、その役目は MCP3008マイコンや各種 Arduino などが担っていたが、いよいよ Raspberry pi シリーズからマイコンが登場した。
それが、Raspberry pi pico である。

# Arduino micro との比較
姿形が似ている物を3つ取り寄せて並べてみた。
![IMG_0058.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235422/74eb90e3-66ae-0f65-89d0-244b59a49b37.jpeg)
真ん中が、今話題となっている Raspberry pi pico で、右が Arduino micro である。
左はついでに買ってみたSTM32F103、こちらも一応マイコン。

これまでは、どうやらアナログ入力制御のマイコンは Arduino というくらいには、Arduinoが幅を利かせていたらしい。
現に、アナログ制御を色々と調べてみたが、真っ先に出てきたのは Arduinoだった。

なので今回は、 Raspberry pi pico と Arduino micro を比較してみることにする。

|  | Raspberry pi pico | Arduino micro |
|:-----------|------------:|------------:|
| 使用言語| MicroPython, C, C++  | Arduino言語 |
| 出力電源| 3.3V | 3.3V, 5V  |
| アナログ入力端子数 |3|12|
| デジタル入出力端子数 | 25  | 12 |
| 初期設定 | 必要 | 不要 |
| クロック周波数 | 133 MHz | 16 MHz |
| 初期設定 | 必要 | 不要 |
| 価格（税込）| 550円 | 2,851円 |

Raspberry pi pico は以下のようにして初期設定を必要とする。
https://qiita.com/izuki_y/items/93a86c3de203acb82317

USBメモリーライクに使うことができるということだが、容量がそこまで大きくはないだろうからそのように使用するのは避けたほうがいいだろう。
Raspberry pi には Thonny という IDE が標準で備わっており、Raspberry pi pico をUSB接続すれがそのままプログラム開発を開始することができるという親和性の高さも魅力だ。
なお、MicroPython は python3互換の言語である。
出力電源に5Vがなく、アナログ入力ピンも3つしかないのが気になる点ではあるが、クロック周波数は8倍近く開きがある。

そして何より気になるのがお値段である、pico は何故こんなに安いのか。

# appendix
アナログ入力3つしかないの結構厳しくないか。
JavaScriptでPDFのファイルサイズを取得して表示させる方法

実務で使う機会があったので、忘れないように投稿。


```ruby:html
<a href="" class="js-pdfSize" target="_blank" data-filepath=""><p>PDFダウンロード<span class="file_size">0.0MB</span></p></a>
```

```ruby:js
jQuery(function () {

jQuery.each(jQuery(".js-pdfSize"), function () {
  b(jQuery(this))
});

function b(d) {
  var h = "-";
  var g = d.data("filepath");
  if (!g) {
    d.find(".file_size").html(h);
    return
  }
  var e = g.split(".");
  if (e[e.length - 1].toLowerCase() !== "pdf") {
    d.find(".file_size").html(h);
    return
  }
  var f = $.ajax({
    type: "HEAD",
    url: g,
    dataType: "text"
  }).done(function () {
    var i = f.getResponseHeader("Content-Length");
    d.find(".file_size").html(c(i))
  }).fail(function () {
    d.find(".file_size").html(h)
  })
}

function c(d) {
  if (d < 1024) {
    return d + "B"
  } else {
    d = a(d)
  }
  if (d < 1024) {
    return d + "KB"
  } else {
    d = a(d)
  }
  if (d < 1024) {
    return d + "MB"
  } else {
    return a(d) + "GB"
  }
}

function a(d) {
  return (Math.ceil((d * 10) / 1024)) / 10
}
});

});
```
[Rails]管理画面をActiveAdminで作りたいのは俺だけか？

# はじめに
とあるプロジェクトで管理画面を作る！ってなったのですが、管理画面を作るのは初めてで、どうしたものかと調べると、ActiveAdminという便利なgemを見つけました。
それを使った経験を忘れないように備忘録を踏まえて、発信したいと思います。

## 導入手順
1.Gemfileに以下を記述し、ActiveAdminとDeviceのインストール。

```ruby

gem 'activeadmin'
gem 'devise'
```

こちらも忘れず実行する。

```ruby

$ bundle install
```

2.インストール完了後、ActiveAdminに必要なファイルを生成する。

```ruby

$ rails g active_admin:install
```

※既存のユーザークラスを使用する場合は、引数として指定します。

```ruby

$ rails g active_admin:install Staff
```

3.マイグレーションの実行と初期データの作成を行う。
※先ほどのコマンドでマイグレーションファイルが作成され、seeds.rbに記述が追記されています。

```ruby

$ rails db:migrate

$ rails db:seed
```

4.サーバを起動した後に[こちら](http://localhost:3000/admin)にアクセスすると、ログイン画面が表示されるので、下記のユーザ情報でログインする。
※もし、サーバーを起動していた場合は再起動する。

User ... admin@example.com
Password ... password

5.必要なモデルに対する管理ページを作成する。

```ruby

$ rails g active_admin:resource User # 任意のモデル名
```

6.先ほどのコマンドで作成されたファイルに、許可したいパラメータのみを記述する。

```app/admin/user.rb

ActiveAdmin.register User do
  permit_params :name, :age, :email, { images_attributes: [ :image, :id, :_destroy ] }
end
```

7.ページが作成されるので、データを打ち込んでいく。

## 役立つ知識
ここでは、より使いやすい管理画面を作成するためのテクニックを記載しています。

### フォームをカスタマイズしたいとき
- input
    - テキストフィールド。
    - asを使うことで、file_fieldなど、指定したinputのtype属性を指定できる。
 
- allow_destroy: true
    - 削除ボタンを生成。

- input_html
    - inputタグに詳細情報を設定する。

- hint
    - 注釈を入れる。

- f.has_many
    - has_manyな関係のテーブルについてのフォームを作成。

- f.actions
    - submitタグの生成。

```ruby

ActiveAdmin.register User do
  permit_params :name, :age, :email, { images_attributes: [ :image, :id, :_destroy ] }

  form do |f|
    f.inputs  do
      f.input :name
      f.select :age
      f.input :email
    f.inputs do
      f.has_many :images , allow_destroy: true do|t|
        t.input :image, as: file, input_html: { accept: 'image/*' },
                        :hint => t.object.new_record? ? "プロフィール画像を指定して下さい" : image_tag(t.object.image.url{:thumb})
      end
    end
    f.actions
  end
end
```

# 終わりに
いかがでしたでしょうか？
一から管理画面作成となると、なかなか骨が折れる作業ですが、gemを使うとかなりスピーディに作成できるので、機会があれば使ってみてください！！

## 参考
[Railsで最速で管理画面を作る！]
(https://qiita.com/enomotodev/items/5f6d9348207124a41bf9)

[Active Admin 徹底解説]
(https://qiita.com/MariMurotani/items/aed93986e29249fd65e5)

[ActiveAdminでちょっと使い勝手の良い管理画面を作るTips]
(https://blog.mmmcorp.co.jp/blog/2015/02/18/activeadmin/)

[公式ドキュメント]
(https://github.com/activeadmin/activeadmin/wiki)

[activeadmin.info]
(https://activeadmin.info/0-installation.html)

[ActiveAdmin を導入します-関連モデルの導入]
(https://ccbaxy.xyz/blog/2019/11/11/ruby13/)

[Active Adminのデザインをちょっとカッコよくするgemまとめ]
(https://blog.mmmcorp.co.jp/blog/2016/04/18/active_admin_design/)

[Ruby on Rails "Active Admin" + "CarrierWave"で画像アップロード]
(https://teki-com.hateblo.jp/entry/2019/05/14/124107)

[Rails に ActiveAdmin で管理画面を追加してみた]
(https://qiita.com/yutackall/items/2b16d1ac2bd64dedd16e)
Arduino UNO アンド AQM0802(液晶) アンド DS1307(リアルタイムクロック) の 時計


stm32g031,stm32l010用に最軽量化したもの

x時間合わせは、別

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり


```c++

#include <Wire.h> //I2C library

#define ADDR    0x68  // 2進数 1101000
#define I2Cadr  0x3e  // 固定

int     ii;           //ループカウンター
char    data_read[8]; //i2cバッファー

//初期レジスター
char INIT_com[]={0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

//画面クリアレジスター
char INIT_cls[]={0x0,0x1};

//時間をLCD表示形式に変換
char ch_hex_a_b[5];
char *ch_hex_a(int l_num)
{
    ch_hex_a_b[0] = '@';
    ch_hex_a_b[1] = '0' + (l_num >> 4);
    ch_hex_a_b[2] = '0' + (l_num & 0xf);
    ch_hex_a_b[3] = ':';
    ch_hex_a_b[4] = 0;
    return(ch_hex_a_b);
}

//i2c書き込みルーチン 2と4のみ
void i2c_led_w(char *buff1,int n){
  Wire.beginTransmission(I2Cadr);
  Wire.write(buff1[0]); //rs 0がレジスター rs 1がデータ
  Wire.write(buff1[1]); //値1
  if( n == 4 ) {
    Wire.write(buff1[2]); //値2
    Wire.write(buff1[3]); //値3
  }
  Wire.endTransmission();
  delay(2);
}//i2c_led_w

void setup()
{
  Wire.begin(); //uno

  //液晶の初期化
  for(ii=0;ii<11;ii++){
    i2c_led_w(&INIT_com[ii*2],2);
  } //for
} //end setup

void loop()
{
  //液晶のクリア
  i2c_led_w(INIT_cls,2);

  // レジスタのアドレスを先頭にする
  Wire.beginTransmission(ADDR);
    Wire.write(0x00);
  Wire.endTransmission();

  // I2Cスレーブに8byteのレジスタデータを要求する
  Wire.requestFrom(ADDR, 8);

  // 8byteのデータを取得する
  for (ii = 0; ii < 8; ii++) {
    while (Wire.available() == 0 ) {}
    data_read[ii] = Wire.read();
  }//for

  //画面に表示
  i2c_led_w(ch_hex_a(data_read[2]) ,4);
  i2c_led_w(ch_hex_a(data_read[1]) ,4);
  i2c_led_w(ch_hex_a(data_read[0]) ,4);
  
  delay(1000);  //1秒待つ

}//loop


```

時間合わせ

```

#include <Wire.h> //I2C library

#define ADDR    0x68  // 2進数 1101000

char    data_read[8]; //i2cバッファー

#define HH  12
#define MM  34

void setup()
{
  Wire.begin(); //uno

//i2c書き込み
  Wire.beginTransmission(ADDR);

  Wire.write((char) 0    ); //0 レジスターの位置は0
  Wire.write((char) 0    ); //1 秒
  Wire.write((char) ( MM /10)*16+( MM %10) ); //2 分
  Wire.write((char) ( HH /10)*16+( HH %10) ); //3 時

  Wire.write((char) 3    ); //4 曜日
  Wire.write((char) 1    ); //5 日
  Wire.write((char) 1    ); //6 月
  Wire.write((char) 0x20 ); //7 年

  Wire.endTransmission();

} //end setup

void loop()
{

} //loop


```

![uno_i2c_led_ds1307_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/5090045f-b42c-27a7-3cf0-eb7133437693.jpeg)
AutoScaling/ELB/CloudWatchの組み合わせについて整理してみた 

#はじめに
AWSにて冗長性かつスケーラビリティのあるシステム構成を構築するにあたり、「AutoScaling」、「ELB (Elastic Load Balancing)」、「CloudWatch」の組み合わせが可能ですが、個人的に各々の設定の関連性で時に混乱してしまうため、整理をしてみました。

#前提
整理をするにあたり、今回構築したAWSの構成図は以下の通りです。
![構成図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/1be2665e-88a6-a9d3-e629-a216bb3a6aeb.png)

「ELB (Elastic Load Balancing」、「AutoScaling」、「CloudWatch」を同時に考えると混乱してしまいますので、以下の2つの組み合わせごとに分解して整理をしてみます。

<table>
<tr>
 <td><b>番号</b></td>
  <td><b>組み合わせ<b></td>
</tr>
<tr>
  <td><b>１</b></td>
  <td>AutoScalingとALB</td>
</tr>
<tr>
  <td><b>２</b></td>
  <td>AutoScalingとCloudWatch</td>
</tr>
</table>

※1. 今回、ELBの種類としてはALB (Application Load Balancer) を選択しました。

※2. Private SubnetにマルチAZでのRDSを配置し、EC2インスタンスにはWordPressをインストールすることで、ブログサービスとして構築しましたが、今回のテーマにフォーカスするため、以降の図ではPrivate Subnetは省略します。

###1. AutoScalingとALB
AutoScalingとALBについて主要な設定項目を構成図に記載しました。
各々の設定で関連性のある項目を赤字としています。
![構成図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/bf372c61-0c46-5102-65bf-9b3d2c857ccb.png)

**■ ALB側の設定 ～冗長化/負荷分散～**
ALBでターゲットグループを設定することで、冗長性を実現し、ユーザからくるHTTPリクエストをターゲットグループ内で負荷分散します。仮にEC2#1がシャットダウンされた場合も、EC2#1のヘルスチェックステータスは「unused」になり、以降のHTTPリクエストはEC2#2のみで処理します。
以上のように、**ALBのみでは冗長化/負荷分散が可能ですが、スケーラビリティは備えていません。**
そこでスケーラビリティを加えるためにAutoScalingの設定を組み合わせます。

**■ AutoScaling側の設定 ～スケーラビリティ～**
上図のAutoScaling Groupで赤字の設定をすることにより、ALBのターゲットグループにスケーラビリティを加えることができます。その際、AutoScaling GroupのヘルスチェックとしてALBの設定を指定します。以上より、仮にEC2#1がシャットダウンされて、HTTPリクエストを処理できるインスタンスがEC2#2の1台に減ったとしても、希望する容量として「2」に設定しているため、新たなインスタンスを1台、自動生成することが可能になります。

### 2.AutoScalingとCloudWatch
AutoScalingとCloudWatchについて主要な設定項目を構成図に記載しました。
各々の設定で関連性のある項目を赤字としています。
![構成図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067765/de596d92-9356-e6c1-f2f6-c67834f39e47.png)

上図の構成のように、AutoScalingとCloudWatchアラームを組み合わせることにより、より柔軟にスケーリング設定をすることができます。

**■ CloudWatch側の設定**
CloudWatch側ではAutoScalingGroupの名前とスケーリングのアクションを指定して、アラームを作成します。
今回の場合は、AutoScalingGroup内の平均CPU使用率が70%以上の時にアラームする「CPU_High」と30%以下の時にアラームする「CPU_Low」を作成しました。各々について、アラーム発動時にAutoScalingのアクション「CPU_Add」、「CPU_Remove」が実行されます。

**■ AutoScaling側の設定**
AutoScaling側ではCloudWatchアラームを指定して、スケーリングポリシーを作成します。
今回の場合は、「CPU_High」のアラームが発動された際にインスタンスを1台追加する「CPU_Add」と、「CPU_Low」のアラームが発動された際にインスタンスを1台削除する「CPU_Remove」を作成しました。

以上により、CloudWatchとAutoScalingを組み合わせることにより、AutoScaling内の平均CPU使用率に応じて、インスタンス数を最小2台、最大4台にスケールする構成とすることができました。


#まとめ
今回の記事作成を通し、「AutoScaling」、「ELB (Elastic Load Balancing」、「CloudWatch」を組み合わせた構成における、各々の役割と設定項目の関連性を整理することができました。

以上、最後まで読んで頂きありがとうございました！

※この記事はAWS初学者を導く体系的な動画学習サービス「AWS CloudTech」の課題カリキュラムで作成しました。
FlutterでMultiple targets match implicit dependency for linker flagsが出たとき

# エラー内容
```
 Multiple targets match implicit dependency for linker flags '-framework GoogleUtilities'. Consider adding an explicit dependency on the intended target to resolve this ambiguity. (in target 'Runner' from project 'Runner')
```

# 解決方法
- Podfileに以下を定義

```
def google_utilites
  pod 'GoogleUtilities'
  pod 'GTMSessionFetcher'
end
```

- target 'Runner' doの内側に入れる

```

target 'Runner' do
  use_modular_headers!
  use_frameworks!

  google_utilites
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end
```

- 他にも使っているtargetがあればその中にも入れる

```
target 'NotificationServiceExtension' do
  use_frameworks!

  google_utilites
  pod 'Firebase/Messaging'
end
```

# 終わり
- これの解決にめ数時間を取られてしまったので誰かの役に立てば幸いです
iTerm2 v3 終了時に確認ダイアログを表示させない方法

![スクリーンショット 2021-02-28 12.43.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113895/4f7fb45a-3f6f-d9af-ccbc-364bb4d1053c.png)

iTerm2 終了時に上記の確認ダイアログを表示させない方法です。

# 手順
1. `⌘ + ,` で環境設定を開く
2. `General` > `Closing` と進み、不要な確認をする項目のチェックを外す
3. `Profiles` > `Session` と進み、`Prompt before closing?` の選択項目で `Never` を選択する

![スクリーンショット_2021-02-28_12_46_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113895/4911def8-0981-95d3-61e7-a7b128135dfb.png)
![スクリーンショット_2021-02-28_12_47_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113895/cd435730-2f10-e934-aafe-193fce4aa96f.png)

# 各項目について
- Quit when all windows are closed
  - すべての iTerm2 のウィンドウが閉じられた際に iTerm2 を自動的に終了させたい場合はチェックします
  - 今回の確認ダイアログの話とは関係ありません
- Confirm closing multiple sessions
    - 複数のセッション (複数タブや複数ウィンドウを開いている状態) で iTerm2 を終了させようとしたときのみダイアログを表示する場合はチェックします
- Confirm "Quit iTerm2 (⌘Q)"
    - メニューバーまたはショートカット (`⌘ + Q`) で iTerm2 を終了させようとしたときにダイアログを表示する場合はチェックします
    - うっかり `⌘ + Q` で終了させてしまうのを防ぐためのオプションですが、自動アップデートの際は不便です
    - iTerm2 の環境設定ではなく Karabiner-Elements などで汎用的な対応をするほうがおすすめです
- Even if there are no windows
  - Confirm "Quit iTerm2 (⌘Q)" にチェックを入れた状態で、ウィンドウが一つも開かれていなくても iTerm2 を終了させる場合にダイアログを表示する場合はチェックします

# なぜ確認ダイアログを表示させたくないか
macOS の自動アップデートのときに、iTerm2 終了の確認ダイアログのせいで自動アップデートができないからです。
Laravel 6* ui で新規ユーザー登録後のリダイレクト先をデフォルトから変更

ド初心者です。認識の違いや問題点等ありましたら、どうぞご連絡ください。。。お願いします
<h2>やりたいこと</h2>
Laravel uiを使って新規登録したユーザーを任意のURLにリダイレクトしたい

<h2>これでいけた！</h2>
登録系をつかさどるRegisterControllerの中に、<h4>RouteServiceProviderをuse。</h4>
そして、同コントローラの中に、、、 <h4>protected $redirectTo = RouteServiceProvider::HOME;</h4>を追加！

```php

<?php
namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;
use App\Providers\RouteServiceProvider;//追加

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;//追加
//以下省略
```
RouteServiceProviderをuseして、その中にあるHOMEに定義してあるリダイレクト先へ飛べるようにするわけですね

んじゃあ、今度はそのリダイレクト先を任意の場所に指定してあげればOK

というわけで、
<h4>RouteServiceProviderに行って指定したいリダイレクト先を追加してあげよう！</h4>

app/Providers/RouteServiceProvider

```php
<?php

namespace App\Providers;

use Illuminate\Support\Facades\Route;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;

class RouteServiceProvider extends ServiceProvider
{
    /**
     * This namespace is applied to your controller routes.
     *
     * In addition, it is set as the URL generator's root namespace.
     *
     * @var string
     */
    public const HOME = '/';//任意のリダイレクト先を追加

    protected $namespace = 'App\Http\Controllers';
//以下省略
```
定数HOMEを作ってあげて、そこにリダイレクト先を指定すればOK。
public const HOME = '/';とすることで、今回は「/」というURLを設定しました。


一旦は以上とさせていただきます・・・
MAX30102のデータシート読んでみた-4

# Temperature Sensor
- Max30120センサーの中には温度センターもあります。

```
[English]
The MAX30102 has an on-chip temperature sensor for
calibrating the temperature dependence of the SpO2 subsystem. 
The temperature sensor has an inherent resolution of 0.0625°C.

[翻訳]
MAX30102には、以下の温度センサーが搭載されています。
SpO2サブシステムの温度依存性を較正します。
温度センサーの固有の分解能は0.0625°Cです。

```

```
[English]
The device output data is relatively insensitive to the
wavelength of the IR LED, where the Red LED’s wavelength is 
critical to correct interpretation of the data. 

[翻訳]
デバイスの出力データは、
IR LEDの波長。ここで、赤色LEDの波長は、データの解釈を修正するために重要です。
```

```
[English]
An SpO2 algorithm used with the MAX30102 output signal
can compensate for the associated SpO2 error with ambient
temperature changes

[翻訳]
MAX30102出力信号で使用されるSpO2アルゴリズム周囲温度に関連するSpO2エラーを補正できます
温度が変化します。
```

# Register Maps and Descriptions 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/d646d222-350d-9986-1c50-631784a69b52.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/4284ab2d-2608-80e9-ce2b-6c32ffed50fc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/5f3e9dfd-fd75-9b1c-ee3b-168c1386cdf6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/e113102d-396d-f700-fb37-0c31d48e130d.png)
【kapt】Intellij IDEAでkaptの処理をデバッグする【Gradle】

`Gradle`プロジェクトで、1プロジェクト内に以下の2モジュールが有るとします。

- `processor`: アノテーション処理を行うモジュール
- `test`: アノテーション処理を使うモジュール

この状況で、`kapt`から呼び出される`processor`モジュール内の処理をデバッグします。

# やり方
以下の画像の通り、`Run/Debug Configurations`から、処理対象となるモジュールに対する`clean build`タスクを指定して定義し、それをデバッグ実行すればできます。
今回は処理対象が`test`モジュールなので、それを指定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/70e994a2-0acb-73d6-17f4-63b72bef2e67.png)
Jetpack Compose の依存関係を alpha → beta にあげた時の setContent の Deprecated を解消する

## はじめに
最近 Jetpack Compose が beta 版になったということで早速 Hello World してみたのですが、 元々 alpha 版で作っていたプロジェクトを beta 版にした途端、 `setContent` が参照できなくなってしまったのでその備忘録です。

## 結論
結論から書いてしまいます。
以下を追加すると `setContent` が参照できるようになります。

```build.gradle
implementation 'androidx.activity:activity-compose:1.3.0-alpha03'
```

`androidx.compose.ui.platform.setContent` から `androidx.activity.compose.setContent` に変更されていたために参照できなかったようです。

## 最後に
Android Developers は日本語にすると情報が古かったりするので、English でまずは読む癖をつけたいですねぇ。。

## 参考
[Announcing Jetpack Compose Beta!](https://android-developers.googleblog.com/2021/02/announcing-jetpack-compose-beta.html)

[Add Jetpack Compose toolkit dependencies](https://developer.android.com/jetpack/compose/setup#compose-compiler)
Flutterでテキスト内リンクを作る

#はじめに
業務でテキスト内リンクを作成するためにRichTextを使ったので、備忘録代わりにまとめてみます。

#動作イメージ
![スクリーンショット 2021-02-26 16.19.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/817871/a0fad271-8505-2d63-0e08-73ad1c073fce.png)

#実装

```
RichText(
    text: TextSpan(children: [
  const TextSpan(
      text: 'お問合わせは',
      style: TextStyle(color: Colors.black)),
  TextSpan(
      text: 'こちら',
      style: const TextStyle(color: Colors.blue),
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          // タップ時
        }),
  const TextSpan(
      text: 'からお願いします。',
      style: TextStyle(color: Colors.black))
]))
```
#その他
テキストの一部をイタリック体にしたり、下線を引くこともできるようです。
mac mini(Appleシリコン)のパスワードリセット

#経緯
mac mini(Appleシリコン)にThinkキーボードwを接続してセットアップしたところ、起動時にはmac miniがキーボードを正しく認識していなかった。よって、認識されていないキーボードでパスワードを入力してしまったため、自分が認識して打鍵したものと異なる文字列が入力された模様。mac mini起動後にキーボードを正しく認識させてしまった(？)ため、同じキーを打鍵しても同じ文字列が入力できなくなってしまった。

(キーボードが正しく認識されていない状態で打った文字列)
ex)123_
(キーボードが正しく認識されている状態で打った文字列)
ex)123=

自分は、"123="と入力したつもりだったのに、mac miniの中には、"123_"と記憶されている状態。キーボードが正しく認識された状態で、パスワードを元と同じキータッチで入力すると"123="となりパスワード不一致となってしまう。

#方法
一度電源を切り、シャットダウン。電源ボタンを押して起動、このときずっと電源ボタンは押したまま。そうすると、mac OSユーティリティのモードに入れる。
http://tokyo.secret.jp/macs/mavericks-reset-password.html
ここでターミナルを開き、passwordresetコマンドを投入

#雑感
・windowsキーボードにはcommandキーがないので、windowsキーで代用しようとしたが、「command + R」による方法はとれなかった。
・本記事のような事象にならぬよう、windowsキーボードで初期セットアップするときは、英数字のみでパスワードを設定した方がよい？
・私はmac超初心者なので、もっと良い方法があるのかもしれません。
MySQL global の wait_timeout は、必ずしも session の wait_timeout に適用されない

テストの為に wat_timeout を極端に短く設定したい場面があったのですが、少しまごついたのでメモ。

# TL;DR
global の `wait_timeout` の設定を変更すれば、session の `wait_timeout` にも適用されると思い込んでいたけど、実際には `interactive_timeout` の値が適用されたという話。

# MySQL の variable 設定の、global と session
まずデフォルトの wait_timeout 値。global の設定はこちら。

```
mysql> show global variables like 'wait_timeout';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| wait_timeout  | 28800 |
+---------------+-------+
1 row in set (0.01 sec)
```

一方、session の設定はこちら。同じ値です。

```
mysql> show variables like 'wait_timeout';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| wait_timeout  | 28800 |
+---------------+-------+
1 row in set (0.00 sec)
```

## 設定変更その１
その場で設定変更すると、即時反映されます。まずは global の設定変更。例では 10秒に変更しています。

```
mysql> set global wait_timeout=10;
Query OK, 0 rows affected (0.00 sec)
```

session の設定を変更するならこちら。

```
mysql> set wait_timeout=10;
Query OK, 0 rows affected (0.00 sec)
```

先ほどと同じく `show variables like 'wait_timeout';` などのクエリで正しく反映されたことが確認できます。

## 設定変更その２（つまづき有り）
設定を固定化する為に、設定ファイル `/etc/mysql/my.cnf` に以下の記述を追記しました。

```
[mysqld]
wait_timeout = 10
```

`sudo service mysql restart` でサービスを再起動し、変更した設定が反映されていることを確認します。

```
mysql> show global variables like 'wait_timeout';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| wait_timeout  | 10    |
+---------------+-------+
1 row in set (0.01 sec)
```

よしよし。では session の方も確認。

```
mysql> show variables like 'wait_timeout';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| wait_timeout  | 28800 |  <---  28,000 のまま？
+---------------+-------+
1 row in set (0.00 sec)
```

10になってないですね。これが想定外です。global を変更したのだから、session にも適用されるはずだと思っていたのですが、調べてみるとクライアントの実装によっては、必ずしもそうではないようです。で、結論を言うと、私の環境では globalの `interactive_timeout` の設定値が session の `wait_timeout` に適用されていました。
改めて設定ファイル `/etc/mysql/my.cnf` に以下の通り修正しました。区別がつくように 11秒としています。

```
[mysqld]
wait_timeout = 10
interactive_timeout = 11
```

`sudo service mysql restart` でサービスを再起動し、session の `wait_timeout` を確認してみると、無事 11が反映されていました。

```
mysql> show variables like 'wait_timeout';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| wait_timeout  | 11    |  <---  interactive_timeout に設定した 11が適用された。
+---------------+-------+
1 row in set (0.01 sec)
```

リファレンスにも書かれてる話でした。
https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_wait_timeout

_On thread startup, the session wait_timeout value is initialized from the global wait_timeout value or from the global interactive_timeout value, depending on the type of client (as defined by the CLIENT\_INTERACTIVE connect option to mysql\_real\_connect()). See also interactive\_timeout._


# まとめ
環境によっては、global の `interactive_timeout` が、session の `wait_timeout` に適用される場合がある。
ポートフォリオ要件定義

ポートフォリオ事前レビュー

【テーマ】
働く上で発生する様々な悩みを解決する。

【ターゲット】
悩みをもつ働く人々

【サービス内容】
・悩みを投稿して、それに対してコメント(解決方法)をいただき、悩みを解決することができる。
・過去に同じような悩みを経験した人や、同じような悩みを解決した人に対して、個別相談することができる。
・悩み検索によって、過去の悩みから自分が抱えている悩みと似通った悩みを探すことができる。
・悩みへの解決方法が浮かばず、ユーザーの力になってあげることができなくても、悩みを応援することで、「よく応援されている悩み一覧」へ表示され、他のユーザーの目にとまりやすくなり、悩み解決率を上げることができる。

【テーマ背景】
私は現在、金融及び保険の営業をしています。しかし、先日、右膝の古傷が悪化したことで歩くことが難しくなり、営業活動が長期間できないという状態です。そんな時に色々と悩みが出てきました。
①怪我した状態で出勤してよいのか？
②出勤しない場合、どういった休暇扱いになるのか？
③補助金のような援助はでるのか？
④有給を使い切ってしまった場合はどうなるのか？
⑤結局どのように活動するのが、会社と自分にとって一番よいのか？
もちろん会社の人たちにも相談はしましたが、私のように仕事が長期間できなくなるという経験した方はいないので、解決方法を見出すことはできませんでした。
このような時に、自分の会社内の方だけではなく、会社外の方からも意見を頂戴することができれば、一番ベストな解決方法にたどり着くことができるのでは？と思いました。
その他にも、転職を考えている方であれば、具体的な退職手続きや退職前後の流れなど、社内の方には相談しにくいことが多々出てくると思います。そんなとき、自社とは全く関係のない社外の方であれば、気軽に相談することができると思います。
まとめると、悩みを解決する時に、情報収集の一つとしてご活用いただけるようなサービスになればと思い、今回「働く上で発生する様々な悩みを解決する。」というテーマに決定いたしました。
また、「悩み　社会人」とGoogleで検索したとき、転職サービスを運営している企業が作成したまとめサイトのようなものしかなく、生のユーザーの声をそのまま使ったサイトはあまり見られませんでした。なので、生のユーザーの声を大切にしたサービスにしたいと強く思っています。

【機能一覧】
《基本機能》
・ユーザー新規登録/ログイン/ログアウト（devise）
・ユーザープロフィール登録/編集/詳細機能（名前/プロフィール文）
・プロフィール画像アップロード機能（carrierwave）
・悩み新規投稿/編集/削除/詳細機能
・悩みへのタグ付け機能
・この悩み応援します機能（いいね）
・よく応援されている悩み順に一覧表示
・悩みを新着順に一覧表示
・悩みへのコメント機能
・個別相談機能（非同期通信）
・悩みキーワード検索機能（ransack）
・悩みをタグから検索できる機能（ransack）

《応用機能》
・かんたんログイン
・悩み一覧にページネーションを使う
・レスポンシブ対応
・通知機能

《その他》
・単体テスト
・結合テスト

【使用技術一覧】
《フロントエンド》
・HTML/CSS
・JavaScript
・Bootstrap(5.0)(カスタマイズして使用する)

《バックエンド》
・Ruby(3.0.0)
・Ruby on Rails(6.0.3.1)
・MySQL(8.0)

《インフラ》
・heroku(開発初期)
・AWS(VPC/EC2/S3/RDS)
・Nginx（Webサーバー）
・Puma（アプリケーションサーバー）

《テスト》
・RSpec

《CI/CD》
・CircleCI（自動テスト）
・Capistrano（自動デプロイ）
・Rubocop（コーディングチェック）

《バージョン管理》
・Git/GitHub

《開発環境》
・VScode
・Docker

【開発フェーズ】
《第一段階》
・基本機能実装
・テストの作成
・UI/UXのブラッシュアップ
・コーディングチェック
・herokuへのデプロイ

《第二段階》
・応用機能実装
・UI/UXのブラッシュアップ
・コーディングチェック

《第三段階》
・インフラをherokuからAWSに変更（VPC/EC2/S3/RDS）
・Docker/docker-composeの導入
・CI/CDの導入

《第四段階》
・EC2からECSに変更
DM機能

#参考にしたサイト

https://qiita.com/rui-watanabe/items/6790c91f374acc25bea2

https://qiita.com/nojinoji/items/2b3f8309a31cc6d88d03

https://qiita.com/mmmasuke/items/36365bcdf30eaea65250

https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27

#新しく覚えたこと

https://railsdoc.com/page/model_where

#アソシエーション

[![Image from Gyazo](https://i.gyazo.com/837df113fd3623d6bfd47de4a65d282d.png)](https://gyazo.com/837df113fd3623d6bfd47de4a65d282d)
【Laravel】名前付きルートの使い方について

#名前付きルートとは
>名前付きルートは特定のルートへのURLを生成したり、リダイレクトしたりする場合に便利です。ルート定義にnameメソッドをチェーンすることで、そのルートに名前がつけられます。
（[公式より](https://readouble.com/laravel/7.x/ja/routing.html)）

ルート定義に名前を付ければ、命名したルート名を指定することでURLの呼び出しができます。
つまり、コントローラーやビューの中でURLを呼び出すときは直にパスを書く必要はありません。ルート名を指定することでURLを呼び出すことができます。

#使い方
名前付きルートの設定、呼び出しの方についてまとめました。

##名前付きルートの設定
かなりシンプルです。各ルート定義の行末にnameメソッドでルート名を付けるだけです。
（※ルート名は一意である必要があります）

```web.php
// ルート名の書き方
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/user/{id}/profile', [App\Http\Controllers\UserProfileController::class, 'show'])->name('profile.show');
Route::post('/user/{id}/profile', [App\Http\Controllers\UserProfileController::class, 'create'])->name('profile.create');
```

設定が出来たら、あとは呼び出し側でルート名を指定します。

##Controllerで名前付きルートの呼び出し

```
// URLの生成
$url = route('home');

// リダイレクトの生成
return redirect()->route('profile.show', ['id' => 1]);
```
名前付きルートでパラメータを定義している場合は、`route`関数の第2引数でパラメーターを指定する必要があります。指定されたパラメーターは自動的にURLの正しい場所へ埋め込まれます。

##Viewで名前付きルートの呼び出し

```
// formでのルート指定
<form method="post" action="{{ route('profile.create', ['id' => 1]) }}">

// hrefでのルート指定
<a href="{{ route('profile.show', ['id' => 1]) }}">プロフィールを見る</a>
```

##注意点
**注意すべき点は、ルート名は常に一意である必要があります。**
重複があると、あとに命名されたルートが優先されてしまいます。

```web.php
// 重複のあるルート
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('profile');
Route::get('/user/{id}/profile', [App\Http\Controllers\UserProfileController::class, 'show'])->name('profile');
```

```
// リダイレクトでルート名を呼び出し
return redirect()->route('profile');
```

この場合、リダイレクトで呼ばれるルートは
`Route::get('/user/{id}/profile', [App\Http\Controllers\UserProfileController::class, 'show'])->name('profile')`になります。呼び出しの時にパラメータを渡していないので、エラーが生じます。

#メリット
名前付きルートを利用するメリットは挙げてみました。

* URLを指定する時に、長々とパスを書く必要がなくなりますのでタイプミスを回避できます。
* パス変更があっても、変更箇所はルート定義ファイルの`web.php`のみ。影響範囲が小さく済みます。

#参考
[Laravel 7.x ルーティング
](https://readouble.com/laravel/7.x/ja/routing.html)
ActiveRecordまとめメモ

# はじめに
　最近Railsの独学をはじめたので備忘録として記事にしていきます。普段は業務でphpを使っていて、データのやりとりにはSQL文を書いてるんですが、SQLを書かずに簡単にデータ操作ができる「ActiveRecord」について学習したので記事を書いていきたいと思います。アドバイスなどがあればコメントお願いします。

# ActiveRecordとは？
結論から言うとActiveRecordとは、「DB操作を行うSQLを使わず、Rubyでデータ操作を可能にする仕組み」です。例えば、Userテーブルからidが1の顧客を取得する場合、SQLでは

「SELECT * FROM users WHERE id = 1」

と長いコードを書かなければいけないんですが、ActiveRecordであれば

「User.find(1)」

と書けばID=1のユーザー情報を簡単に取得することができます。

# ActiveRecordを使用するメリット
### ■短いコードで直感的に書くことができる
　上記の例のように、ActiveRecordのメソッドを使えば簡単にDB操作を行うことができ、僕みたいな駆け出しエンジニアや初学者の方の心理的なハードルは下がると思います。まずはActiveRecordを使えばこういうことができるというのを経験的に学んで、そこから深く掘り下げてSQLなどを学んでいくと理解が深まると思うのでおすすめです。

# よく使うメソッド

## 作成系(Create)

#### ■newメソッド
インスタンスの生成を行う。newメソッドは新しいオブジェクトを作成するだけで、データベースへの保存はできない。

```rb
# インスタンスの生成
user = User.new
user.name = "yamada"
user.email = "example@mail.co.jp"
```

#### ■saveメソッド
上記のnewメソッドでインスタンスを作成し、代入した値をデータベースに保存するのがsaveメソッド。
保存に成功すればtrue、失敗すればfalseを返す。

```rb
# 作成したオブジェクトの保存
user.save
```

#### ■createメソッド
　インスタンスの生成とデータベースの保存を行うメソッド。newメソッドとsaveメソッドが行なっている処理を一括で行う。Userモデルにnameとemail属性があればデータベースに新しいレコードを作成する。

```rb
# インスタンスの生成 + オブジェクトの保存
user = User.create(name: "yamada", email: "example@mail.co.jp")
```

## 取得系(Read)

####■allメソッド
指定したモデルの全てのオブジェクトを取得する。

```rb
# ユーザーモデルの全てのレコードを取得
users = User.all
```

####■findメソッド
指定したidから一件のレコードを取得する。

```rb
# ユーザーモデルからidが1のレコードを取得
user = User.find(1)
```

####■find_byメソッド
指定した属性、値の最初のレコードを一件取得する。

```rb
# ユーザーモデルからname属性が山田のレコードの最初の一件を取得
user = User.find_by(name: "yamada")
```

####■firstメソッド
指定したモデルの最初のレコードを一件取得する。

```rb
# ユーザーモデルの最初のレコードを取得
user = User.first
```

####■whereメソッド

指定した属性、値に一致するレコードを全て取得する。先ほどのfind_byメソッドは一致するレコードを一件取得するが、whereメソッドは全て取得する。

```rb
# ユーザーモデルのname属性で値が山田のレコードを全て取得
users = User.where(name: "yamada")
```
## 更新系(Update)
####■updateメソッド
指定したレコードの値を変更する。

```rb
# idが1のレコードのname属性を田中に変更する
user = User.find(1)
user.update(name: "tanaka")
```

下記のコードと上記のコードは同じ意味。

```rb
user = User.find(1)
user.name = 'tanaka'
user.save
```

####■update_all
指定した属性のレコードを全て更新する。一回のSQLで全て更新できるので一括で値を更新する場合に便利。

```rb
# ユーザーモデルの性別属性を全て男に更新
user.update_all(sex: "male")
```

## 削除系(Delete)
####■destroyメソッド
指定したレコードを削除する。

```rb
# idが1のレコードを削除
user = User.find(1)
user.destroy
```

####■destroy_byメソッド
指定した属性、値と一致するレコードを全て削除する。

```rb
# name属性の値が山田のレコードを全て削除
User.destroy_by(name: "yamada")
```

###■destroy_all
指定したモデルの全てのレコードを削除する。

```rb
# ユーザーモデルのレコードを全て削除
User.destroy_all
```

# 参考記事
[Raileガイド Active Record の基礎](https://railsguides.jp/active_record_basics.html)
Vue.js(Vuex)についてstoreについてまとめる

見て頂きありがとうございます。

今日はVue.jsの状態管理ライブラリであるVuexについてまとめたいと思います。

知識の定着のために書くもので、めちゃくちゃ基本的なことなので、参考にしないほうが良いと思います（笑）


# そもそも状態管理とは

サービスがそれなりに大きくなってくる、コンポーネントが複数、当然親子関係にあるコンポーネントも作成されます。
その分コンポーネント間のデータの受け渡しも発生します。
Vuexを使用しない方法だと`props`で親から子へデータを受け渡し、`$emit`で子から親にデータを送ることができます。
このようにデータの受け渡しが増えてことで、データがどこで変更されたのか等追いづらくなり、コードの可読性が悪くなってしまいます。

このデータの状態流れを管理することを状態管理といい、上記のような問題を解決するために使用するのが、Vuexです。


# Vuexの中心となるStoreについて
ストアはアプリケーションの状態(state)を管理するためのコンテナである。
データを保持しておく場所のことですね。
ストアの状態は直接変更することはできません。
後述するmutationをcommitすることによってのみ変更することができます。
Storeには４つの概念があります。

- state→アプリケーションの状態（情報）
- mutation→stateを更新（変化）させる
- action→非同期通信や外部APIとのやりとりを行う
- getter→stateの一部やstateから返された値を保持する

この４つをひとまとまりにしたものをモジュールといい、モジュールでこの４つを守っているイメージです。

![スクリーンショット 2021-02-28 12.14.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626370/cc988566-a357-4369-4ef4-86e633393473.png)


## state
stateはアプリケーション全体のデータの状態を管理します。
現在のデータの状態を確認したり、特定のデータの状態を見つけるために役立ちます。
呼び出し：`store.state.state名`

## mutations
mutationsはstateの更新だけを行います。
stateの更新が行えるのはこのmutationだけです。
呼び出し：`store.commit('mutation名', payload)`
(引数)
mutation => 第一引数：　`state`(渡されたstateを更新)
commmit => 第二引数：　`payload`(第二引数のことをpayloadと呼び、これを使用することで同じmutationsで異なるstateを変更することができる)
※原則として、mutation以外でstateの更新を行うことは禁止されている。
stateの状態を追跡しやすくするため。
また、全ての処理は同期的である必要があり、非同期処理を行いたい場合はactionsで定義する。

# action
actionは非同期処理や外部APIとの通信を行い、最終的にmutationを呼び出す為に使われます。
呼び出し：`store.dispatch(action名)`
(引数)
ctx(context)
contextとは特別なオブジェクトで、次の内容が含まれています。

- state: 現在のstate
- getters: 定義されているgetter
- dispatch: 他actionを実行するメソッド
- commit：他のmutationを実行するメソッド

## getter
getterはstateから別の値を算出する為に使われます。
gettersは算出プロパティcomputedと同様の働きをします
呼び出し：`store.getters.getters名`






Vuexの中心となるStoreの４つの概念についてまとめてみました。
【ネスぺ/CCNA】IEEE規格チートシート

IEEEの規格が覚えにくいので自身の備忘として整理します。
誤記や過不足あればコメントにてご指摘いただけましたら幸いです。

## IEEE802.3 委員会
>IEEE 802委員会はLAN (Local Area Network)およびMAN (Metropolitan Area Network)分野の標準化を行う。 802は最初の会合が開かれた1980年2月に由来する。この委員会の3番目の作業グループ802.3がイーサネットを担当している。  

https://www.vtv.co.jp/intro/tech/glossary/ieee802_3.html

# IEEE 802.1Q
タグVLANの規格
##### VLANタグ
容量：4バイト
イーサネットフレームのMACアドレスとタイプの間にVLANタグを挿入する。
##### ネイティブVLAN
スイッチのトランクポートごとに1つ選択できるVLANで
ネイティブVLANに指定されたVLANはVLANタグ不要で通信できる。

## IEEE 802.1D
スパニングツリーアルゴリズムなどを含むIEEEのMACブリッジの規格。
一部のポートをブロックすることによって、<br>冗長化によるブロードキャストストームを防ぐことができる。

## IEEE802.1s
IEEE 802.1Dと同じく、スパニングツリーアルゴリズムの規格。
IEEE 802.1DではVLANごとにスパニングスリーを構築することができないが、
IEEE 802.1sではMSTPを使用することでVLANごとにスパニングツリーを構築することができる

## IEEE802.1w
IEEE 802.1D、IEEE 802.1sと同じく、スパニングツリーアルゴリズムの規格。
IEEE802.1wはより高速なコンバージェンスを可能とするRSTPの規格。

## IEEE802.11
ワイヤレスLANの規格。

| 規格名 | 周波数 | 最高速度 |
|:------------:|:------:|:------------:|
| IEEE802.11a|5GHz  |54Mbps|
| IEEE802.11ac|5GHz | 6.9Gbps|
| IEEE802.11n|2.4GHz / <br>5GHz        |600Mbps|
| IEEE802.11ax|2.4GHz / <br>5GHz| 9.6Gbps|
| IEEE802.11b| 2.4GHz   | 11Mbps|
| IEEE802.11g|2.4GHz   |54Mbps |


#### 使用されるフレーム
・管理フレーム
・制御フレーム
・データフレーム

## IEEE802.1X
ワイヤレスLANにおけるユーザ認証の規格。
ユーザの認証情報をEAPというデータリンク層のプロトコルを使用して送受yシンされる。
IEEE802.1X認証を実装するには以下3つの要素が必要。

|要素名 | 概要 |
|:--:|:--------|
|サプリカント|ユーザが入力した認証情報を<br>オーセンティケータに送信するPC側のソフトウェア　|
|オーセンティケータ|PCから送信されてくるユーザ名やパスワードなどの<br>認証情報をRADIUSサーバに中継する機器　|
|認証サーバ|ユーザの認証を行うサーバ<br>IEEE802.1XではRADIUSのみをサポート　|

## IEEE802.3ad 
リンクアグリゲーションの規格。LACPを定義している。
複数の物理ポートを論理的に束ねることで冗長化・負荷分散・帯域幅増強を実現することができる。




# まとめ
| 規格名 | 概要|
|:------------:|:------------|
| IEEE802.11|無線LANの規格|
| IEEE 802.1Q|タグVLANの規格|
| IEEE 802.1D|スパニングツリーアルゴリズムなどを含む<br>IEEEのMACブリッジの規格|
|IEEE802.1s|VLANごとにスパニングツリーを<br>構築することができるSTPの規格|
|IEEE802.1w|RSTPの規格|
| IEEE802.1X|ワイヤレスLANにおけるユーザ認証の規格|
|IEEE802.3ad |リンクアグリゲーションの規格|


この記事は以下の情報を参考にして執筆しました。

- [シスコ技術者認定教科書 CCNA 完全合格テキスト&問題集[対応試験]200-301](https://www.amazon.co.jp/%E3%82%B7%E3%82%B9%E3%82%B3%E6%8A%80%E8%A1%93%E8%80%85%E8%AA%8D%E5%AE%9A%E6%95%99%E7%A7%91%E6%9B%B8-CCNA-%E5%AE%8C%E5%85%A8%E5%90%88%E6%A0%BC%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-%E5%AF%BE%E5%BF%9C%E8%A9%A6%E9%A8%93-200-301/dp/4798165778)
- [情報処理教科書 ネットワークスペシャリスト 2019年版
](https://www.shoeisha.co.jp/book/detail/9784798159973)