OmniAICreator/Qiita-1.07M huggingface dataset:
ニュートンラフソン法と電力工学

# はじめに
電力工学では、複雑な高次方程式を解くことで物性値を解析することができる場合がある。そこで、局所解を求めることができる1次元ニュートンラフソン法を用いることで、同期発電機のV曲線とノーズカーブを描写することができるかを調査する。

# ニュートンラフソン法
ニュートンラフソン法は、高次方程式などの近似解を求めるために使用されるアルゴリズムである。細かい説明は以下の記事を参照にされたい。

https://qiita.com/arairuca/items/590c94c6db945ae7f449

# 同期発電機のV曲線
## 導入
$I_f$と起電力$V_s$は以下のような比例関係がある。

```math
V_s=kI_f
```

まず、以下の式は同期発電機の送電可能電力つまり、安定度の式である。

```math
P=\frac{E_rE_s}{X}sin \delta
```

ゆえに、

```math
sin\delta = \frac{Px}{V_rV_s}
```

次に、発電機の等価回路に余弦定理を活用すると以下のようになる。

```math
cos \delta=\frac{-(xI_c)^2+V_r^2+V_s^2}{2V_sV_r}
```

これを以下の式に代入することで、$I_c$の方程式を立式する。

```math
f(I_c)=sin^2\delta+cos^2\delta-1=0
```

ゆえに、この方程式の近似解をニュートンラフソン法を用いることでV曲線を描写する。ただし、これには初期解を上手く設定してあげる必要があり、短い範囲でしか正確な値を示さない。そこで、以下のようなプログラムを作成した。

## プログラム

``` python v_curve_newton.py
import numpy as np
import matplotlib.pyplot as plt
import math
import japanize_matplotlib

h=1.0*10**-5
n=1000

x=0.1
V_r=1.0
k=1.0

P=1.0

def equation(I_c,I_f):
    
    E=k*I_f
    c=(-(x*I_c)**2+V_r**2+E**2)/(2*V_r*E)
    s=(P*x)/(E*V_r)
    
    return s**2+c**2-1

I_f_array=np.linspace(0.6,1.4,n)
I_c_array=[]
for i in range(n): 
  I_f=I_f_array[i]
  I_c=10
  while abs(equation(I_c,I_f))>1.0*10**-9:
    diff_equation = (equation(I_c+h,I_f)-equation(I_c,I_f))/h
    
    I_c=I_c-equation(I_c,I_f)/diff_equation

    #print(abs(equation(I_c,I_f)))
    #print(x)
  if I_c>0:
    I_c_array.append(I_c)
  else:
    nan = float('nan')
    I_c_array.append(nan)
plt.title("同期発電機のV曲線")
plt.xlabel("I_f")
plt.ylabel("I_c")
plt.plot(I_f_array,I_c_array)
plt.savefig("同期発電機_V曲線.png")
plt.show()
```

![同期発電機_V曲線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/fc5e8dee-ef98-cd7d-74a9-c5879eadc72b.png)

# ノーズカーブ
## 導入
以下に電力方程式に関する電圧の式を示す。
``` math
(V_r^2+Pr+Qx)^2+(xP-rQ)^2=(V_s V_r)^2
```
これを$V_r$について得くことでノーズカーブを描写することができる。

## プログラム

``` python nose_newton.py
import numpy as np
import matplotlib.pyplot as plt
import math
import japanize_matplotlib
h=1.0*10**-10
n=10
x=1.0
r=0.0
Q=0.0
V_s=1.0
def equation(P,V_r):
    return (V_r**2+P*r+Q*x)**2+(x*P-x*Q)**2-(V_s*V_r)**2
V_r_array=np.linspace(0,1,n)
P_array=[]
for i in range(n):
  x=2.0
  V_r=V_r_array[i]
  P=1.0
  while abs(equation(P,V_r))>1.0*10**-13:
    diff_equation = (equation(P+h,V_r)-equation(P,V_r))/h
    P=P-equation(P,V_r)/diff_equation
    #print(x)
  P_array.append(P)
plt.title("ノーズカーブ")
plt.xlabel("P")
plt.ylabel("V_r")
plt.plot(P_array,V_r_array)
plt.savefig("ノーズカーブ.png")
plt.show()
```

これを実行すると以下のようなグラフが出力される。

![ノーズカーブ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/1f3fa6b0-bc77-073f-6bd6-aac90efa9b7e.png)

# まとめ

今回は、ニュートンラフソン法を用いて方程式の近似解を求めた。その操作を行うことで、ノーズカーブや同期発電機のV曲線を描写することができた。ところが、初期解を上手く選定することが重要になる。それは、経験則でプロットする必要がある。
【 自動化 】Huskyとpost-checkoutフックを使って新規ブランチのファーストコミットを自動化する方法

## はじめに
Gitフックを管理するためのライブラリ Husky を使って、post-checkout フックを活用し、新規ブランチをチェックアウトした際にファーストコミットを自動で実行する方法を紹介します。

通常、新しいブランチを作成したら、ブランチ名をコミットメッセージにして空コミットを作成する作業が必要です。

これを Husky を使って自動化する方法について解説します。

## 1. 環境設定

公式サイトを参考にしてください

https://typicode.github.io/husky/get-started.html


## 2. ディレクトリ構成

```
client/
├── .husky/
│   ├── _/
│   │   └── post-checkout.sh
│   └── post-checkout
server/
```

## 3. post-checkout フックの意味

post-checkout は、Gitのフックの一つで、ブランチやファイルをチェックアウトした直後に実行されます。

post-checkout フックは、主に次の2つのケースで役立ちます

:::note info
ブランチのチェックアウト時: 新しいブランチに切り替えた際の特定の処理を実行。
:::

:::note info
ファイルのチェックアウト時: Gitで特定のファイルをチェックアウトした後の処理を実行。
:::

## 4. ファーストコミットの自動化スクリプト

### .husky/post-checkout の内容

.husky/post-checkout ファイルに次のスクリプトを追加します。

```sh
# カスタム処理を行うcheckout.shを実行
. "$(dirname "$0")/_/checkout.sh"
```

このスクリプトでは、カスタムスクリプト checkout.sh を実行します。

### .husky/_/checkout.sh の内容

ここでは、新しいブランチがチェックアウトされた際に空コミットを作成するロジックを記述します。

```sh
#!/bin/sh

# post-checkout hooksが受け取るパラメータ
before_head=$1
after_head=$2
checkout_type=$3

# 新規ブランチがチェックアウトされた場合のみ実行
if [ "$before_head" = "$after_head" ] && [ "$checkout_type" = "1" ]; then
  # 現在のブランチ名を取得
  new_branch_name=$(git rev-parse --abbrev-ref HEAD)

  # 新しいブランチで空コミットを作成
  git commit --allow-empty -m "Initial commit on $new_branch_name"
fi

```

## 5. .husky/_/ ディレクトリの意味

Huskyでは、.husky/_/ ディレクトリが内部的な設定や共通のスクリプトを格納するために使用されます。

このディレクトリに配置されているスクリプトは、複数のGitフックで共通して使われる処理を一箇所にまとめることで、重複を避け、管理しやすくしています。

### .husky/_/checkout.sh

.husky/_/checkout.sh には、post-checkout フックに関連したカスタム処理が含まれます。このスクリプトを .husky/post-checkout から呼び出すことで、コードの整理と再利用が簡単にできます。

## 6. まとめ

Huskyのpost-checkoutフックを使って、新しいブランチがチェックアウトされた際にファーストコミットを自動で実行する方法を解説しました。

さらに、.husky/_/ディレクトリの役割についても詳しく説明し、Huskyがどのように内部的な処理を行っているかを理解していただけたかと思います。

Huskyを使うことで、チーム開発や個人プロジェクトでの作業をより効率的に自動化できるので、ぜひ活用してみてください！
ABC371をPythonで（A～E）

AtCoder Beginner Contest 371の解答等の速報的まとめ

https://atcoder.jp/contests/abc371

# A問題
https://atcoder.jp/contests/abc371/tasks/abc371_a

最初2つが異なるときAで確定する
一緒の時は３つ目を使う
```python:A
s = list(input().split())

if s[0] == s[1] == "<":
    print("BC"[s[2] == ">"])
elif s[0] == s[1] == ">":
    print("BC"[s[2]=="<"])
else:
    print("A")
```

# B問題
https://atcoder.jp/contests/abc371/tasks/abc371_b

男の子がすでに生まれているかだけを記録する
```python:B
n, m = map(int, input().split())
has_man = set()

for _ in range(m):
    a, b = input().split()
    if b == "M" and a not in has_man:
        print("Yes")
        has_man.add(a)
    else:
        print("No")
```
# C問題
https://atcoder.jp/contests/abc371/tasks/abc371_c

すべての組み合わせで同じにするにはいくら必要か考える
```python:C
from itertools import permutations

def calc(p):
    res = 0
    for i in range(n):
        for j in range(i):
            if edge_g[i][j] != edge_h[p[i]][p[j]]:
                res += a[p[i]][p[j]]

    return res


n = int(input())
m_g = int(input())
edge_g = [[False]*n for _ in range(n)]
for _ in range(m_g):
    u, v = map(lambda x:int(x) - 1, input().split())
    edge_g[u][v] = True
    edge_g[v][u] = True

m_h = int(input())
edge_h = [[False]*n for _ in range(n)]
for _ in range(m_h):
    u, v = map(lambda x:int(x) - 1, input().split())
    edge_h[u][v] = True
    edge_h[v][u] = True

a = [[0] * n for _ in range(n)]
for i in range(n - 1):
    a_i = list(map(int, input().split()))
    for j, a_j in enumerate(a_i, i + 1):
        a[i][j] = a[j][i] = a_j

ans = float("inf")
for p in permutations(range(n)):
    ans = min(ans, calc(p))

print(ans)
```
# D問題
https://atcoder.jp/contests/abc371/tasks/abc371_d

累積和の典型のような問題

マイナス無限の時０にして累積和$acc$を取り
$acc[r] - acc[l-1]$を取得する
この時$acc[i]$は$acc[$bisect_right($x,i$)$]$にしても同じ値になるため、これを利用する
```python:D
from bisect import bisect_right


def func(i):
    ind = bisect_right(x, i)
    return acc[ind]


n = int(input())
x = list(map(int, input().split()))
p = list(map(int, input().split()))

acc = [0]
for p_i in p:
    acc.append(acc[-1] + p_i)

for _ in range(int(input())):
    l, r = map(int, input().split())
    print(func(r) - func(l - 1))
```
# E問題
https://atcoder.jp/contests/abc371/tasks/abc371_e

答えに対して各数字がどれだけ解に関与するか考える
ある数字が$i$番目から$j$番目の間に出現していないかつ$i$番目までの計算が済んでいるとすると

|端点|端点が右端にある|端点が左端にある|計|
|:-:|:-:|:-:|:-:|
|$i+a$|$1$~$i$の$i$通り|$j$の$1$通り|$i+1$通り|

このようになって、$i+1$が$j-i$回加算される
あとは、最後に出現した後からの関与を加算する
```python:E
n = int(input())
a = list(map(int, input().split()))

last = [-1] * (n + 10)
ans = 0
for i, a_i in enumerate(a):
    ans += (last[a_i] + 1) * (i - last[a_i])
    last[a_i] = i

for l_i in last:
    ans += (l_i + 1) * (n - l_i)

print(ans)
```
ABC371振り返り


[前回の振り返り](https://qiita.com/comet725/items/ed6db6534025d56d8ea0)

今日はABC開催日だったので参加結果を振り返る

https://atcoder.jp/contests/abc371

今週はA,B,Dの3完(0ペナ)


# A

判定の実装に時間がかかる問題ですね

## ソースコード

```python:main.py
import sys
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

T = (0,1),(0,2),(1,2)
def main():
    S=rLS()
    old = [0]*3
    for t,s in zip(T,S):
        if s == ">":
            old[t[0]] += 1
        else:
            old[t[1]] += 1
    for i,a in enumerate("ABC"):
        if old[i] == 1:
            print(a)
    
if __name__ == '__main__':
    main()

```


# B

フラグをデフォルトで立てといて
生まれたのが男子かつフラグが立っているときのみYesと出力する
男子が生まれたらフラグを折る

## ソースコード

```python:main.py
import sys
from collections import defaultdict
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)


def main():
    _, M = rLI()
    d = defaultdict(lambda: True)
    for _ in range(M):  
        A, B = rLS()
        if B=="M" and d[A]:
            d[A] = False
            print("Yes")
        else:
            print("No")
    
if __name__ == '__main__':
    main()

```


# C

グラフの拒絶反応がでてとけなかった😅
そっちよりD解いてる人多かったし許して

# D

累積和と二分探索の合わせ技

## ソースコード

```python:main.py
import sys
from bisect import bisect_left,bisect_right
def rI(): return int(sys.stdin.readline().rstrip())
def rLI(): return list(map(int,sys.stdin.readline().rstrip().split()))
def rS(): return sys.stdin.readline().rstrip()
def rLS(): return list(sys.stdin.readline().rstrip().split())
def err(*args): print(*args, file=sys.stderr)

def main():
    N = rI()
    X = rLI()
    P = rLI()
    S = [0]+P[:]
    for i in range(N):
        S[i+1] = S[i+1]+S[i]
    
    Q = rI()
    
    for _ in range(Q):
        L,R = rLI()
        i=bisect_left(X,L)
        j=bisect_right(X,R)
        print(S[j]-S[i])
                
    
if __name__ == '__main__':
    main()

```


# E

動的計画法とか累積和の応用かなとおもって
色々試したけどできなかったorz

余事象を考えるのかYO！

# F

動的計画法かと思ったけど遅延セグ木とかの方なのね

# G

解説チラ見したら$2^{2367}$とかいう巨大数がでて戦慄

# まとめ

今回はD問題が解けたから良いが
グラフの問題の拒絶反応をなんとかしないといけないですね
投稿 76 Docker Image 2024/09/14

本日の勉強時間　3H

導入する環境のこと、
レシピのようなもの。

よく、Docker Imageはレシピ　、　Docker Containerは料理と例えられる。

Docker ImageはDocker Repositoryにいくつも収納されている。
Docker Repositoryは棚のようなもの。
投稿 75 仮想環境とDockerの地台 2024/09/13

本日の勉強時間　3.5H

仮想環境でもいいけど、仮想環境でローカルホスティングをしても
他のPCで起動する際には、環境を準備しなければならない。
それを解消するのがDocker。

本番環境、複数人の開発をする上ではDockerが便利・。
【データベーススペシャリスト試験対策】外部キーと参照制約

## この記事は何の記事 ?
データベーススペシャリスト試験対策の記事です
外部キーと参照制約について書いてます
また問題になる例も挙げてます

## 外部キーとは
### 簡単に
簡単にいうと別のテーブルの主キーのことです
例を見てみましょう
下線が主キーで，点線が外部キーです
![テーブル構造_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/7a7a2b47-7ae9-b361-61ac-58159c78fdc0.png)



### だから何だ
別のテーブルの主キーなので，
別のテーブルに**存在しない主キー**が，
外部キーとして**存在している**時に怒られたり怒られなかったりします

下図の例の場合，背景が黄色のセルに注目してください
参照元の外部キーとして，参照先コードを使用するわけですが，
「先9」は**参照先テーブルに存在しません**
これが問題になったりならなかったりします
![テーブル中身5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/bce05518-82a3-238a-d808-4871c443b730.png)




## 参照制約
参照元の外部キーが，参照先の主キーに存在していることが参照制約です

大事なのが以下です
- どのタイミングで（実行契機）
- 外部キーをどう処理するか（挙動）
- いつ参照制約の確認をするのか（検査契機）

## 実行契機
主に以下の 3 つです
- 挿入（INSERT）
- 更新（UPDATE）
- 削除（DELETE）

注意したいのは，試験で実行契機について**記載がない場合**は，
そのタイミングでは**外部キーに対して特に何もしない**ということです

例えば，更新と削除についてのみ記載があった場合は，
挿入については外部キーが何だろうと何もしないというわけですね

因みに当然ですが，挿入と更新は別物なので気を付けてください...

## 挙動
実行契機のイベントが発生した時に，
定められたアクションをします
アクションは主にこんな感じです

|アクション|説明|
|--|--|
|NO ACTION|参照元のテーブルにイベントが発生したとき，参照先のテーブルに対して何もしない|
|CASCADE|参照元のテーブルにイベントが発生したとき，参照先のテーブルにもイベントを連鎖させる|

他にも，参照先のテーブルに NULL をセットだったり，デフォルト値をセットだったり，するアクションもあります
こちらが参考になります

https://qiita.com/suin/items/21fe6c5a78c1505b19cb

https://www.postgresql.jp/document/16/html/ddl-constraints.html

## 検査契機
SQL 実行終了ごとだったり，トランザクション終了時だったりします
いずれにせよ**確認はしている**わけです（ここが大事）

## 表の見方
試験で出る表の見方です
1. イベントが発生した「参照先」を参照している「参照元」を探します
1. 実行契機と挙動モードを確認します

![表1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/d2191a4f-3c03-7ea5-d6dc-4c223fa45787.png)

具体例を見てみましょう
最初に，「参照先」の指定した行を「更新」した場合です
1. 「参照先」を参照している「参照元」を特定
1. 実行契機と挙動を確認
    1. 今回は「更新」なので「UPDATE」を確認
    1. 挙動モードは「NO ACTION」でした
1. NO ACTION なので参照元のデータはそのまま残しておきます

![表2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/68e7735c-4bed-8d3b-ace9-cc155de31af9.png)


## 問題になる例

### なぜお前がここに居る
削除時のアクションが，NO ACTION だった場合ですね
下記をご覧ください
「参照先」の「先1」が削除された時に，
NO ACTION なので「参照元」の外部キー「先1」が残ってしまっています
![noaction_delete2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/d4f9f5ad-c168-3675-19d5-9bdc174ecab1.png)


この状態で参照元テーブルをもとに集計などをしていると，
参照先テーブルにいないデータもいることになってしまい，
なぜお前がここに...と不具合が起きてしまうわけですね

### 霊圧が…消えた…？
削除時にアクションが，CASCADE だった場合ですね
下記をご覧ください
「参照先」の「先1」が削除された時に，
CASCADE なので「先1」を参照している「元a」が削除されます
![cascade_delete2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/9ec664ad-ddfe-ca69-0214-a8bd90729473.png)


例えば，
参照先の「先1」を削除して，
参照元で外部キーが「先1」の子を「先2」に変更したいとします

ここで，最初に参照先の「先1」を削除すると，
CASCADE で参照元で外部キーが「先1」の子も削除されます
すると，参照元で外部キーが「先1」の子を「先2」に変更しようとしても，
既に削除されているので変更できない...
というか削除されちゃいけない子なのに...
という事態になります
投稿 72 ソフトウェアとアプリケーションの仕組み 2024/09/10

本日の勉強時間　3H


-上にあるほど上流-

アプリケーション（フロントエンド、バックエンド）
↓
ミドルウェア（データベース）
↓
OS（Windows Mac Linux）

ハードウェア（PC）

-下にあるほど下流-
【プログラミング初心者】0から始めるReact学習 #9 ~Web開発の基本編~

# 1-3. 課題1
## 9月11日
本日は学習記録アプリの機能を実装していきました。

inputタグの値の取り出し方は[こちら](https://ralacode.com/blog/post/get-value-of-input-using-react/)の記事を参考に。
if文の書き方は[こちら](https://x-tech.pasona.co.jp/media/detail.html?p=2619)の記事を参考にしました。

どちらも講義の中で習ったことではありますが、すっかり抜け落ちていました。。（笑）
また、自分の思いつくままにコードを書いたのですが、正常に動作しません。

1時間ほど思い当たる点を修正していたのですが、
全く動かなかったため止む無くChatGPTに頼ることにしました。
すると、完璧なコードを出してくれました。

私があんなに悩んでいたコードをほんの数秒で。。。（笑）
少し情けない気持ちになりましたが、試行錯誤した成果か出てきたコードを読解することができました。

**お手本を参考にして作ったコードが下記となります**
~~~
import { useState } from 'react';

export const App = () => {
  const [title, setTitel] = useState('');
  const [time, setTime] = useState('');
  const [records, setRecords] = useState([
    { title: '勉強の記録1', time: 1 },
    { title: '勉強の記録2', time: 3 },
    { title: '勉強の記録3', time: 5 },
  ]);
  const [error, setError] = useState('');

  const onChangeTitle = (e) => setTitel(e.target.value);
  const onChangeTime = (e) => setTime(e.target.value);

  const onClickAdd = () => {
    if (title === '' || time === '') {
      setError('入力されていない項目があります');
      return;
    }

    setRecords([...records, { title, time: parseInt(time, 10) }]);

    setTitel('');
    setTime('');
    setError('');
  };
　//★reduceの使い方
  const totalTime = records.reduce((sum, record) => sum + record.time, 0);

  return (
    <>
      <div>
        学習記録
        <input value={title} onChange={onChangeTitle} />
      </div>
      <div>
        学習時間
        <input
          placeholder="0"
          type="number"
          value={time}
          onChange={onChangeTime}
        />
        時間
      </div>
      <div>入力されている学習内容：</div>
      <div>入力されている学習時間：</div>
      <button onClick={onClickAdd}>登録</button>
      <div>{error}</div>
      <div>合計時間：{totalTime}/1000(h)</div>
    </>
  );
};
~~~

## まとめ
個人的にreduceの使い方（上記コードの中の『//★reduceの使い方』←この部分）に関する説明がされた[記事](https://www.sejuku.net/blog/69622)が勉強になったので載せておきます。

正直、お世辞にも自分で書いたとは言えませんが、
とにかく進めることが大事だ！と言い聞かせて次の章に進むこととします。

明日は、ロードマップの「[2.CI/CDの導入](https://qiita.com/Sicut_study/items/7d8c6f309dddda1a3961#1-1-%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88)」をやっていきます。
AWS Certified AI Practitioner (AIF-C01) 合格記

Beta版　AIプラクティショナー試験受験してきました！
無事に試験を受験してきました。ここでは、試験の具体的な内容はお伝えできませんが、私が勉強してきたことや活用した教材についてお話します。これから受験される方の参考になれば幸いです。

# 参考にした教材

https://www.shoeisha.co.jp/book/detail/9784798157559

https://www.sbcr.jp/product/4815626440/

AWSスキルビルダー

https://skillbuilder.aws/jp

勉強期間
2024年8月15日〜9月14日

AWSの経験
•AWS専門のクラウドスクールにて構築・設計勉強中
•実務経験ALB・EIP・EC2・S3

試験は、AWSのガイドが非常に大事です！

https://d1.awsstatic.com/ja_JP/training-and-certification/docs-ai-practitioner/AWS-Certified-AI-Practitioner_Exam-Guide.pdf

ガイドに沿って勉強した方が近道です！

### AWSスキルビルダー
初めてスキルビルダーに有料加入しAIFを学びました！
全て英語だったので理解しきれなかった部分もあるかと思います。

翻訳しながらまとめて→模擬試験

そして模擬試験で間違ったところをひたすら調べて理解を繰り返しました。

## 勉強方法とポイント
1. AWS Certified AI Practitioner Exam Guide

AWSの公式試験ガイドが非常に重要です！ガイドに沿って学習を進めることが、最も効率的な勉強方法だと感じました。試験範囲やキーポイントが網羅されているため、これをベースに勉強を進めることを強くお勧めします。

2. AWS Skill Builder

初めて有料プランを利用し、スキルビルダーでAIFの学習を行いました。
全て英語の教材だったため、理解しづらい部分もありましたが、翻訳ツールを活用しつつまとめを作成しました。その後、模擬試験を受け、間違えた箇所を重点的に復習していくというサイクルを繰り返しました。

### 振り返り
AI分野に全く触れたことがない状態からのスタートだったため、専門用語に非常に苦戦しました。初心者の方には、まずG検定などで基本的なAIの知識を身につけ、その後でAWS Skill Builderを利用すると、理解がスムーズになると思います。

また、試験では自分の勉強内容とは異なる問題が多く出題されることもあるので、何度も繰り返しますが AWS公式の試験ガイド に沿った勉強が一番の近道です。

次の試験に向けて、さらに頑張ります！
wslからもgithubにプッシュしたい


# はじめに
今までwindows terminalでgit使用していて、wsl側でもそのままgithubにプッシュしよーて思ってたらできなくて詰まった。


# 手順
※以下はwindows terminalでgithubにpushできる場合を前提

#### ◯ WSLとWindowsのファイルシステムの共有とSSHキーの設定

WSL（Windows Subsystem for Linux）とWindowsのファイルシステムを共有することで、WSLとWindows間でのファイル管理やSSHキーの共有が可能になるっぽい


#### ◯ WindowsのSSHキーの使用

Windowsに保存されたSSHキーをWSLで使用する場合、キーが保存されている場所（例えば、`C:\Users\your_username\.ssh\id_ed25519`）にWSLからアクセス。

#### ◯ WSLでキーのコピー

WSLにキーをコピーして、WSLの ~/.ssh フォルダーに配置することができる。

```sh
# wslに.sshなかったら作成
mkdir -p ~/.ssh

# id_ed25519の場合
cp /mnt/c/Users/your_username/.ssh/id_ed25519 ~/.ssh/
cp /mnt/c/Users/your_username/.ssh/id_ed25519.pub ~/.ssh/

# パーミッション変更
chmod 600 ~/.ssh/id_ed25519
chmod 644 ~/.ssh/id_ed25519.pub
```

# 注意事項
#### ◯ パーミッションの設定
SSHキーのパーミッション（権限）が正しく設定されていることを確認。特に、プライベートキー（id_ed25519）には 600 のパーミッションが必要。これにより、ファイルが他のユーザーからアクセスできないようにする。

```bash
chmod 600 ~/.ssh/id_ed25519
```
#### ◯ セキュリティの考慮
SSHキーを共有する場合は、セキュリティに注意。キーが他のユーザーからアクセスされるリスクがあるため、適切な権限設定を行い、必要な場合はパスフレーズを設定するのがおすすめ。



# まとめ
wslで作業するようにしたので、これで捗る。
【HomeAssistant】TP-Link Tapo のデバイスを追加する

# はじめに
HomeAssistant に自分が持っている Tapo デバイスを接続したかったので、その手順を簡単だが書き残しておく。
Homebridge とは違い、データを収集、グラフ化までしてくれるので非常に便利だった。

https://qiita.com/waigoma/items/fd6fc15350ce29d47cc9

# 手順
1. 設定 > 統合 > 統合を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/0e9957ff-8311-2d7b-14f5-280517b77b1c.png)
2. Tapo を検索し、TP-Link を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/337b3176-5490-5479-7d2e-3f4b8778cff9.png)
3. Tapo を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/14f8ebd8-55d7-fb3e-294c-f69df71e2f56.png)
4. TP-Link Smart Home アカウントが必要になるが問題ないので、OK を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/9fa55473-8150-3afb-f0be-81c57ef11736.png)
5. 何も入力しなければ自動で接続デバイスを検索してくれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/3fd17d2c-35b3-ef44-ebcb-f127710e21a6.png)
6. 接続済みのデバイスが表示されるので、接続するデバイスにチェックを入れて送信
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/2925e119-8d63-5719-7fb8-08dc75f274aa.png)
7. TP-Link Smart Home のアカウント情報を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/f1ebd8d4-e723-c74d-7636-48b931308ce4.png)
8. 接続成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/409c8f71-80d0-b223-30f3-1bf89cbb1920.png)

# おわり
オーバービュー or 履歴で、接続したデバイスのデータを閲覧できるようになる！
履歴からなら過去のデータも参照できるので、非常に便利！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2348896/5f4c454d-c413-084a-bb91-ebbf29f97235.png)


# 参考
https://www.home-assistant.io/integrations/tplink_tapo/
全リージョンのCloudTrailのログを検索する

# 概要
- 調査で利用した
- AWSコンソールだとリージョンごとにフィルタしないと確認できないから面倒なのでAWS CLIを利用する
- その時のメモ


# 準備

- Dockerでやった
- 認証情報は試したディレクトリに `aws/config` を用意した

```bash
$ mkdir aws
$ touch aws/config

# 内容保存（省略）

$ cat aws/config
```

```configuration
[default]
aws_access_key_id = xxx
aws_secret_access_key = yyy
```

# 作ったやつ

```bash
#!/bin/bash

ALL_REGION=(`docker run --rm -w /app -e AWS_PAGER="" -v $(pwd):/app -v $(pwd)/aws:/root/.aws -it amazon/aws-cli:latest --region us-west-1 ec2 describe-regions --all-regions --query 'Regions[].[RegionName]' --output text`)
for region in ${ALL_REGION[@]}
do
    echo '-----------'
    echo "[${region}]"
    docker run --rm -w /app -e AWS_PAGER="" -v $(pwd):/app -v $(pwd)/aws:/root/.aws -it amazon/aws-cli:latest cloudtrail lookup-events --lookup-attributes "AttributeKey=EventName,AttributeValue=StartLogging" --start-time 2024-01-01 --region ${region} --query "Events[*].[Username, EventName, EventTime, Resources]"
    echo '-----------'
done
```

Dockerのコマンド部分を変数にできたらもっと省略できそう（当時一旦よし！でやっちゃった）

# 補足

* 全リージョン取得するコマンドに `--region us-west-1` がついているけど、リージョン指定しないとなぜかコマンドが動かない
* CloudTrailで検索したい対象と値を変更したい場合は `--lookup-attributes "AttributeKey=xxx,AttributeValue=yyy"` を変更すればよい
* https://docs.aws.amazon.com/awscloudtrail/latest/userguide/view-cloudtrail-events-cli.html#look-up-events-by-attributes


# 参考URL

https://dev.classmethod.jp/articles/create_aws_region_name_list/
【Android】2Dアプリに3Dの輝きを施す登壇で本当に光輝いていた話

# はじめに
みなさん、DroidKaigi2024お疲れ様でした！
今回もとても収穫が多いイベントだったと感じましたが、みなさんはいかがでしたでしょうか？
特に今回はキャリアの話も多く聞く事ができ、一石二鳥以上の収穫でした。
そんな中でDaniele Bonaldoさんが登壇されていた【2Dアプリに3Dの輝きを】という登壇がとても印象的な内容でしたので、振り返りも兼ねて記事にできたらと思います。

https://2024.droidkaigi.jp/timetable/693695/

# Filamentが凄すぎる話
まずは以下をご覧ください

![screen-20240914-195743.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/3175ae1e-e425-de09-ec27-f2d61345aa81.gif) ![screen-20240914-195954.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/34768177-decd-2388-065a-0afc4884ca6d.gif)

上記はこの度の登壇者であるDaniele Bonaldoさんにて作成されたサンプルプロジェクトを実際に動かして撮影したものになります。
実際に登壇されていた際にも使用されていたサンプルです。

https://github.com/danybony/filament-demo-3d-printer

こちらのサンプルプロジェクトはFilamentというGoogleが作成したオープンソースのリアルタイムレンダリングエンジンを使用しています。

登壇の際にも上記gifのような動きは見せていただいていたのですが、実際に触ってみるとカクツキなどなく本当にスムーズで、まさかAndroidアプリでここまで3Dリソースを扱えるとは思いませんでした・・・

ちなみにFilamentに関して少し実装の話をすると、FilamentにはUnityなどのゲームエンジンでは非常にポピュラーな照明とカメラという概念があり、照明も以下5種類から選択ができます。

```LightManager.java
public enum Type {
        /** 太陽光のような指向性のライト */
        SUN,

        /** 指定された方向を照らす指向性ライト */
        DIRECTIONAL,

        /** ある位置から全方向に照らすライト */
        POINT,

        /** 照らしたいポイントのみを照らすスポットライト */
        FOCUSED_SPOT,

        /** 外側の円錐と照明の結合が無効になっているスポットライト */
        SPOT

    }
```
上記照明のうち、太陽光以外は複数を自由に配置可能です。
また、カメラの位置も細かく指定が可能な為、特定のアクションを行ったタイミングである点から点へカメラを動的に動かす、といったような表現も可能になります。

また、上記gifにもあるように、リスト上のUIにも簡単に組み込む事ができ、3Dリソースを使用することへのハードルが非常に低くなった印象です。
ただし、リストへ組み込むという都合上、3Dリソースに対して複雑な操作は難しそうな印象でした。

ちなみにFilamentはモバイルファーストな物理エンジンですが、マルチプラットフォーム対応ということでios側やWebでも使用する事が可能です。

https://google.github.io/filament/posts/cocoapods/

上記はiosのサンプルになりますが、気になる方は是非上のリンクより触ってみてもらえればと思います。

最後に、Daniele Bonaldoさんにて作成されたサンプルプロジェクトは最初のコミットから一つ一つ取り込んでいくことで、過程からより深くFilamentに関する実装を理解できるよう準備されています。

もしサンプルの動作確認をされる際には是非コミットを辿る形で確認してみてください。

# さいごに
本当に学びの深い2日間でした、次回もとても楽しみです！
ビッグデータ時代の必須スキル　Hadoop/Spark/Kafkaの超概要についての振り返りについて

# はじめに
　ビッグデータが広く普及する現代、データ処理の効率化は不可欠です。その解決策の一つが「並列分散処理基盤」です。本記事では、Hadoop、Spark、Kafkaといった主要なオープンソース技術を中心に、並列分散処理基盤の基本から応用までを詳しく解説します。初心者でもわかりやすいように、各技術の概要と活用事例、導入時の注意点など簡単に整理していきます。

## 1. 並列分散処理とは
 並列分散処理とは、「データを複数のサーバに分散して蓄積・処理する手法」です。大規模なデータ（ビッグデータ）の処理を効率化し、数分から数時間で現実的な時間内に処理を完了することができます。

### 単体サーバでの限界:
大規模データの保管: 単一サーバのディスク容量には限界があり、ビッグデータを保管できない。
処理時間の問題: 単体サーバではデータ処理に長時間を要するため、現実的な利用が難しい。

### 並列分散処理の必要性:
ビッグデータの保管と迅速な処理を行うためには、複数のサーバを組み合わせて処理する並列分散処理が必要不可欠です。
## 2. 並列分散処理基盤の進化
　オープンソースの並列分散処理基盤の歴史はHadoopの誕生に始まります。その後、用途に応じてさまざまなプロダクトが登場し、多様なニーズに対応するよう進化してきました。

### Hadoopの登場
Hadoopは、Googleが発表したGFSやMapReduceの技術に基づいて開発されたオープンソースの分散処理フレームワークです。巨大なデータセットを数時間単位で処理するためのバッチ処理を主な目的としています。

### 新たなニーズへの対応
Hadoopの登場後、分散処理基盤の用途は多様化。リアルタイム処理など、より低レイテンシでのデータ処理が求められるようになりました。これにより、**Spark**や**Kafka**など、Hadoopの限界を補完するプロダクトが登場しました。

## 3. Hadoopとは
Hadoopは、大規模なデータを並列分散処理するためのフレームワークであり、次の2つの役割を担っています。

#### データの保存
複数台のサーバにデータを分散して保存し、ディスクのスループットを向上させます。

#### データの処理
MapReduceを用いて、複数のサーバで並列処理を行います。しかし、**繰り返しの多い処理や複雑な処理にはやや不向き**です。Hadoopの登場により、現実的なコストで大規模データの処理が可能となりましたが、処理の効率化やリアルタイム性においては制約が存在します。

## 4. Sparkとは
Sparkは、Hadoopの弱点であった繰り返し処理や複雑な処理を高速化するために開発されたフレームワークです。

### 特徴
メモリ上での処理を行うことで、ディスクI/Oを削減し、高速な処理を実現。
処理計画を事前に最適化することで、リソースの効率的な利用を可能にしています。

### 多機能性
SQLを使ったデータクエリや機械学習、ストリーム処理など、多様なデータ処理に対応。
メリットとしては、SQLに対応しており、専門知識がなくても分散処理アプリケーションの開発が可能。
Sparkは、複雑な処理を高速かつ効率的に行うことができるため、幅広いデータ処理に利用されています。

## 5. Kafkaとは
Kafkaは、ストリーム処理をサポートするためのメッセージングシステムです。

### 役割
データ生成元から収集したデータを、処理基盤に効率よく転送します。
データを失わないようにディスクに記録し、必要に応じて処理側がデータを取り出せるようにします。
### 特徴
高いスループットを持ち、大量のデータをリアルタイムで処理するための基盤として機能します。
Kafkaは、リアルタイムデータ処理において欠かせない要素として、データの受け渡しを効率的に行う役割を果たしています。

## 6. 活用事例
### 6.1. 事例1: 賃貸経営におけるデータ分析（大東建託）
背景
賃貸経営におけるリスクを可視化し、戦略的な意思決定を行うために大量の運営データを分析する必要がありました。
導入後の効果:
Hadoopを導入し、大規模データを用いたリアルタイムな分析を実現。
BIツールと連携し、迅速かつ簡単に収益傾向やリスク予測を行えるようになりました。

### 6.2. 事例2: ECサイトのリアルタイム分析（リクルートライフスタイル）
背景:
ECサイトにおいて、ユーザーのリアルタイムな行動を把握し、購買意欲を高めるための情報提供が必要でした。
導入後の効果:
KafkaとSparkを活用し、ユーザーの閲覧ログをリアルタイムに収集・分析。
「現在何人が閲覧中」「何人が予約中」といった情報をリアルタイムで表示し、購買行動を促進しました。

### 7. 導入時のポイント
並列分散処理基盤を導入する際には、以下の3つのポイントを考慮する必要があります。

データ量と処理量:
大規模なデータを処理するための基盤であるため、少量のデータには向きません。
サーバの台数による調整:
スケールアウトが容易であるため、サーバの台数を増やして性能を調整できます。
適材適所の利用:
Hadoop、Spark、Kafkaにはそれぞれ得意な領域があるため、用途に応じて使い分けることが重要です。

### まとめ
本記事では、**「Hadoop、Spark、Kafka」**を中心に、並列分散処理基盤の基礎から概要なでの説明をしました。データ量の増加に伴い、ビッグデータを効率的に処理するための技術はますます重要になっています。これらの技術を適切に活用することで、大規模なデータ分析やリアルタイムなデータ処理を実現し、ビジネスにおける意思決定をサポートすることが可能です。
モバイルでReactNodeやDOMをスクショしてダウンロードする方法

ReactNodeやReactElementをスクショしたくなった人のためのメモ。

結論、modern-screenshotを使っておけば基本は問題ない。

## フロントエンド完結でDOMをスクショできるライブラリ

色々試した感じ、modern-screenshotが最強。
- [modern-screenshot](https://github.com/qq15725/modern-screenshot)（綺麗、速い）
- [html-to-image](https://github.com/bubkoo/html-to-image)（綺麗、遅い）
- [html2canvas](https://github.com/niklasvh/html2canvas)（表示崩れあり、めっちゃ速い）

## 大きなサイズをスクショしようとすると問題がある

とはいえ、スクショのサイズが大きくなるとバグって止まる。4000pxあたりに境界がある。
どうやらDOMサイズのハードリミットがあるらしい。

## 問題を回避する方法

- バックエンド側でレンダリングする。レンダリング対象のDOMを表示するページを作成し、lambda等からPuppeteerを用いてアクセスする 
    - Chromiumがランタイム制限の50MBに収まらないため、Nextjsのapiルートで実行するのは非現実的。[Chromiumを別でホスト](https://github.com/Sparticuz/chromium/issues/147)すれば可能だが、通信の無料枠をすぐに使い潰してしまう。
    - Cloudflareの[Browser Rendering API](https://developers.cloudflare.com/browser-rendering/platform/puppeteer/)を使えば、別でホストする必要がないため楽。ただし、毎月５ドル課金する必要がある。
WebディレクターがReactを勉強し始めた理由

# 私について
webディレクターやっています。
昔はコーダーをやっていました。JavaScriptがちょっと触れるくらい。
11月に新しい会社に転職します。

# なんでReactやりたいか？
今まで、ディレクターでお仕事する中で、技術の話ができるディレクターはクライアントからもエンジニアからも重宝されるという実感があった中、古にコーダーをやっていたJavaScriptの知識ではそろそろついていけず…
新しい会社に入るし、いっちょ学び直しますか！と一念発起したのがきっかけ。

Reactを選んだのは、今一番勢いがあって、憧れがあったから（ミーハー）
あと、自分の業務を楽にするアプリとか作りたいから。

# どうなってきたいのか
エンジニアとしてReactをバリバリやっていきたい！みたいなのはあんまりなくて、ただ理解を深めて、仕事に活かせれば良いなと。
「あの人に相談すると、いい感じに技術のことも、クライアントニーズもまとめてくれるよね」というディレクターになりたい。

あと「こんなアプリあったらいいのに、、、」というのをよく思うので、自分でさらっとプロトタイプでも作れると仕事が爆速になるから。

# 目標
- 短期
Reactでできること、できないことの線引きをできるようになる。
- 中期
これまで色んな理由で納得がいかなかったディレクションをした過去のアプリケーションを作り直してみる。
- 長期
自他どちらもの「こういうのできるかな？」を、プロトタイプでさらっと作れるようになる。
network

# network

ネットワークの全体像としては4つのレイヤー（アプリケーション層、トランスポート層、インターネット層、リンク層）に分かれている(IETFのRFC1122で規定)が、各層に変更があってもそれはほかの層には影響しない。例えばインターネット層のプロトコルのIPv4とIPv6はアプリケーションから利用するIPの種類を意識する必要はない。

IETF: Internet Engineering Task Force
RFC: Request For Comments
これら以外にも国際標準化機構(ISO)や国際電気通信連合(ITU)が定めた7階層のOSI参照モデルもある。

アプリケーションからアプリケーションまでのデータを渡す流れとしては、
1. アプリケーション - （アプリケーションデータ）
2. TCP処理ソフト - TCPセグメント（アプリケーションデータ、TCPヘッダー）
3. IP処理ソフト - IPパケット（アプリケーションデータ、TCPヘッダー、IPヘッダー）
4. イーサネット - イーサネットフレーム（アプリケーションデータ、TCPヘッダー、IPヘッダー、MACヘッダー）
これらがそれぞれのヘッダーを足して、渡した先ではこの逆の操作を行う

---



---

参考文献
- 日経BPムック, 『これ1冊で丸わかり 完全図解 ネットワークプロトコル技術』
UNO)二個のサイコロの目の合計の期待値を求める



目的
合計、平均の応用のアルゴリズム


いろいろ
ドラクエ1だとレベル55+++ぐらい、ぼほ真ん中
元ネタは、放送大学のアルゴリズム(いつの?)、単位は、当然単位取得済み
おまけ(あんない)として動画圧縮(フーリエ級数)や暗号(素数)が例として出ていた。
暗号にかんしては、キーがないと解けないのが暗号だからムズイ
ハードゲット

型番 110060131

Grove Starter Kit for BeagleBone Green

![o_coq397.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/be8c57ec-da7d-0eb9-66af-3bfb789377e9.jpeg)



結果


![o_coq396.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f8525049-c810-8d2b-c3ee-697012b3b329.jpeg)


プログラム


```c++


//niko_no_me_kitaiti_UNO_1
//二個のサイコロの目の合計の期待値


//初期化
// the setup routine runs once when you press reset:
void setup() {

  //シリアルポートの初期化
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);

}//setup


//メインループ
// the loop routine runs over and over again forever:
void loop() {

  //総和を求める
  int z = 0; int a;
  for (int i = 1; i <= 6; i++) {
    for (int j = 1; j <= 6; j++) {
      z = z + i + j;
    }//for j
  }//for i

  //総和で割って平均を求める
  a = z / (6 * 6);

  //結果の表示
  // print out the value you a:
  Serial.println(a);
  delay(1000);        // delay in between reads for stability

}//loop


```
gitHubのプッシュ時に毎回パスフレーズ聞かれて面倒くさい

# はじめに

gitHubにプッシュする場合、セキュリティ強化のためにSSHキーを生成した際に設定したパスフレーズの入力を求められていた。
学習用では毎回プッシュするのはしんどいので、パスフレーズを削除したい。

# 解決
コマンド実行中に現在のパスフレーズを入力し、新しいパスフレーズとして空を設定することで、パスフレーズなしで使用できます。
```sh
# id_rsaの場合
ssh-keygen -p -f ~/.ssh/id_rsa
# id_ed25519の場合
ssh-keygen -p -f ~/.ssh/id_ed25519
```
id_ed25519 は、より新しい暗号化アルゴリズムを使用したSSHキーです。id_ed25519 での設定やパスフレーズの管理は、id_rsa とほぼ同じ方法で行います。

~/.ssh以下は自分の環境を確認してください。
```sh
ll ~/.ssh
```

# まとめ

※ id_ed25519 は、id_rsa よりも強力なセキュリティを提供するため、セキュリティを高めたい場合には ed25519 を使用することが推奨されているらしい。

仕事なのか学習なのかで使い分けたほうが無難なのかも。
VSCodeのCtrl+DとvimのCtrl+Dを共存させる

VSCodeのCtrl+D(同じ文字列を複数選択するやつ)もvimのCtrl+D(emacsのC-vみたいな機能)も好きだったので、うまいこと両立できないかなとあれこれしたらとりあえずできたので報告です。

setting.jsonは一番下なので、とにかく設定が欲しい方は下まで行ってください。

## どんな挙動？

![vscode-vim-setting.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3114109/5f852800-fcf4-ab97-643c-598fb88b29fc.gif)

## 解説

- ノーマルモード
    - Ctrl+U: 上スクロール
    - Ctrl+D: 下スクロール
- 挿入、ビジュアルモード
    - Ctrl+D: 同じ文字列を選択
    - Ctrl+U: 選択したものを戻す

## setting.json
vimプラグインの設定の近くにコピペしてあげてください
```json
"vim.normalModeKeyBindingsNonRecursive": [
		{
			"before": ["<C-d>"],
			"after": ["<C-d>"]
		}
	],
	"vim.insertModeKeyBindings": [
		{
			"before": ["<C-d>"],
			"commands": ["editor.action.addSelectionToNextFindMatch"]
		},
		{
			"before": ["<C-u>"],
			"commands": ["cursorUndo"]
		}
	],
	"vim.visualModeKeyBindingsNonRecursive": [
		{
			"before": ["<C-d>"],
			"commands": ["editor.action.addSelectionToNextFindMatch"]
		},
		{
			"before": ["<C-u>"],
			"commands": ["cursorUndo"]
		}
	],
 ```
 
## 参考サイト
- [Undo editor.action.addSelectionToNextFindMatch? - StackOverflow](https://stackoverflow.com/questions/36613291/undo-editor-action-addselectiontonextfindmatch)
Android デバッグで強制的に値を変更する方法

普段開発をしていると、サーバーの関係で希望するレスポンスでは無い場合があると思います。

今回は強制的に値を変更する方法です。

`getName`の返却値を`Greeting`のnameに渡して表示します。

```.kt
private fun getName(): String {
    return "World"
}
```

```.kt
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}
```

アプリを起動するとこんな感じです。

![Videotogif (12).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/ad51eb47-c51c-d4c4-626f-cf7509ee5843.gif)

こちらの`getName`の返却値を強制的に変えてみようと思います。

まずはブレークポイントを設定します。

![スクリーンショット 2024-09-14 20.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/2398d80d-a278-57f6-7f46-eedb2ac90241.png)

デバッグで実行してブレークポイントまで処理が進み、止まったら値を変更したい関数のところで右クリックします。

![スクリーンショット 2024-09-14 20.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/30ecef06-8fec-6817-cf3a-668c703833a3.png)

Force Returnをクリックします。

![スクリーンショット 2024-09-14 20.17.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/b06b5c8c-2e81-5e83-460b-3c941604cc07.png)

返却したい値を入力してOKをクリック
![スクリーンショット 2024-09-14 20.17.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/bc157655-5e17-f528-07bb-8d1e8037eeb3.png)

処理を進めていくと値が変わってます。
![Screenshot_20240914_204238.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/64d4043b-49eb-c1a4-67ca-f354ec6dae76.png)
Laravel11で作成したAPIをReactで叩く

## やりたいこと
LaravelでAPIを作成してReactで叩く

## Laravelプロジェクト作成
#### 環境構築
こちらの記事を参考にDockerで構築しました。

https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4

Laravel11を使いたかったのでDockerfileではphp8.2を指定し、インストールのコマンドでもバージョン11を指定します。
``` :infra/php/Dockerfile
FROM php:8.2-fpm-buster
```
```
composer create-project --prefer-dist "laravel/laravel=11.*" .
```
### APIの実装
下記のコマンドでAPIルーティングを有効にします（api.phpが作成されます）。
```
php artisan install:api
```
公式：https://readouble.com/laravel/11.x/ja/routing.html

#### コントローラー実装

コントローラーを作成します。
```
php artisan make:controller SampleController --api
```
indexメソッドを編集
```app/Http/Controllers/SampleController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        return response()->json(
            ['hello world!'],200
        );
    }
```

#### ルーティング実装
```routes/api.php

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SampleController;//追記

Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:sanctum');

Route::apiResource('/sample', SampleController::class);//追記
```
http://localhost:8080/api/sample にアクセスしてみる
![helllo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3847661/ae4e9f3e-df11-d02f-bf0e-a13f17efb3da.png)


## Reactプロジェクト作成
```
npx create-react-app {プロジェクト名}
```
axiosをインストール
```
npm install axios
```
app.jsを編集
``` app.js
import "./App.css";
import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [response, setResponse] = useState([]);
  useEffect(() => {
    axios
      .get("http://localhost:8080/api/sample")
      .then((response) => setResponse(response))
      .catch((error) => console.log(error));
  }, []);
  return (
    <>
      <h1>{response.data}</h1>
    </>
  );
}

export default App;
```
### Laravelで作成したAPIをReactで叩く

http://localhost:3000/
Laravelで作成したAPIからのレスポンスを受け取りブラウザに表示することができました！
![helllo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3847661/58bbebce-f430-eb39-c631-28b2ba76805e.png)

## 参考にした記事

https://qiita.com/masakichi_eng/items/af50d9a3e6a975b601e6
[Elixir]Plugを自作してみる[Phoenix]

# 今回の目標
- Plugを作る
  - `user-agent`で判定してiPadであればiPadのベージにリダイレクト
  - 上記以外は通常のアクセスできる

特に意味はないがPlugの勉強の題材にしたまでです
昔のガラケー時代は、着メロは機種依存するからこんな感じで判定してましたね

# プロジェクト作成
```
$ mix phx.new plug_experiment --no-ecto
$ cd plug_experiment
```

# 他の端末でもアクセス可能にする

```diff_elixir:config/dev.exs
# 〜省略〜
- http: [ip: {127, 0, 0, 1}, port: 4000],
+ http: [ip: {0, 0, 0, 0}, port: 4000],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  # 〜省略〜
```

# Plug作成

```elixir
defmodule PlugExperimentWeb.Plugs.Ymn do
  import Plug.Conn
  alias Phoenix.Controller

  def init(opts \\ []) do
    IO.inspect("------------ #{__MODULE__}.init ------------")

    opts
    |> IO.inspect()
  end

  def call(conn, _opts) do
    IO.inspect("------------ #{__MODULE__}.call ------------")

    os =
      conn.req_headers
      |> Enum.filter(fn {key, _val} -> key == "user-agent" end)
      |> List.first()
      |> elem(1)
      |> IO.inspect()
      |> get_os_name()
      |> IO.inspect()

    conn
    |> redirect(os)
  end

  defp redirect(conn, "iPadOS") do
    IO.inspect("redirect https://www.apple.com/jp/ipad/")

    conn
    |> Controller.redirect(external: "https://www.apple.com/jp/ipad/")
    |> halt()
  end

  defp redirect(conn, _), do: conn

  defp get_os_name(agent) do
    cond do
      String.match?(agent, ~r/iPad/) -> "iPadOS"
      String.match?(agent, ~r/X11/) -> "Linux"
      String.match?(agent, ~r/Android/) -> "Android"
      true -> "unknown"
    end
  end
end

```

```diff_elixir:lib/plug_experiment_web/router.ex
defmodule PlugExperimentWeb.Router do
  use PlugExperimentWeb, :router
  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, {PlugExperimentWeb.Layouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
+   plug PlugExperimentWeb.Plugs.Ymn
  end
# 〜省略〜
```

# 実行
```
$ mix phx.server
```

`http://サーバーのIP:4000`にアクセス

サーバーのログ

```:iPad
"------------ Elixir.PlugExperimentWeb.Plugs.Ymn.init ------------"
[]
"------------ Elixir.PlugExperimentWeb.Plugs.Ymn.call ------------"
"Mozilla/5.0 (iPad; CPU OS 17_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/128.0.6613.98 Mobile/15E148 Safari/604.1"
"iPadOS"
"redirect https://www.apple.com/jp/ipad/"
```

```:Android
"------------ Elixir.PlugExperimentWeb.Plugs.Ymn.init ------------"
[]
"------------ Elixir.PlugExperimentWeb.Plugs.Ymn.call ------------"
"Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36"
"Android"
```

```:Ubuntu
"------------ Elixir.PlugExperimentWeb.Plugs.Ymn.init ------------"
[]
"------------ Elixir.PlugExperimentWeb.Plugs.Ymn.call ------------"
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36"
"Linux"
```
# ソース(github)

https://github.com/ymn-t-yamanashi/plug_experiment
propsとは

## propsについて
Reactのpropsとはコンポーネント間でデータを受け渡すための重要な機能。
様々な型のデータや関数を Props として渡せます。
書き方が複数ケースあり、プロジェクトによって異なる可能性があるため下記に記載


## 書き方例
例1
```jsx:
export const propsExample = (props) => {
  const example = {
    age: props.age,
    name: props.name,
  };

 return <p>{props.age}{props.name}</p>;
};
```

例2
```jsx:
export const propsExample = (props) => {
  const { age, name } = props;
  const example = {
    age,
    name,
  };

  return <p>{age}{name}</p>;
};
```

例3
```jsx:
  export const propsExample = ({ age, name }) => {
  const example = {
    age,
    name,
  };

  return <p>{age}{name}</p>;
};
```

##所感
便利な機能である反面さまざまな書き方があり、しっかり把握をしておかなくては実際の案件やプロジェクトに入る際混乱する恐れがあるため、しっかりこちらをメモとして残しておいていつでも確認出来るようにする必要があると感じた。
SVNを基本からまとめてみた【入門】

## バージョン管理ツールとは

- ファイルの変更履歴を管理するためのツール

### **(リポジトリ)**
- 誰がいつどのように変更したかを記録
- ローカル端末のデータを消失しても任意の時点に復元可能
- チケット管理ツールなど他ツールと連動させることもできる

⇨ 手戻りや課題の特定をしやすくするツール(デグレーションの回避・開発効率の向上)

## GitとSVN(エスブイエヌ)

- バージョン管理での２大勢力。集中型(SVN)と分散型(Git)

## SVN(エスブイエヌ)

#### **(リポジトリ)**
- 全員で共有しているリポジトリへコミット
- 整合性が保たれた状態でないとコミットできない
- 中途半端なものをコミットするとメンバー全員の開発が止まることもある

## Git

#### **(リモートリポジトリ)**　←  **(ローカルリポジトリ)**

- 1人1つローカルリポジトリを保持し、ローカルリポジトリの内容をリモートリポジトリの内容をリモートリポジトリへコミットする
- 中間成果物もコミット可能
- ローカルリポジトリがあり、作業途中の内容をコミット（保存）できる
- こまめにコミット（保存）できて、ミスを探しやすいし、戻りやすい
- ブランチを簡単に切れる

## 参考サイト
[バージョン管理ツールの2大勢力！Git VS SVN](https://www.youtube.com/watch?v=jOFSn59q6IY)
MindBEMding を学んで使うまで

## やったこと
MindBEMding を勉強して、自作サイトに適用した。

## なんでやったの
やりたかったからです！  

## MindBEMding ってなに？
↓のサイト見て勉強しました。  

https://gist.github.com/juno/6182957
https://qiita.com/masaki632d/items/0e6eb00e9d8611c4d8b7

理解した内容としては以下の通り、
- 目的はだれが見てもすぐに理解できるクラス名にすること
- block, element, modifier の要素で命名する
- block は親
- element は子孫
- modifier は状態を表す。

なんとなく分かったような気がするが、ふわふわもしている。  
特にmodifier の使い方がびみょい。  
まあ使って見たらわかることもあるだろうと手を動かしてみる。  

## 実際に適用する
今回は自作サイトのヘッダーに適用します。  
（というかサボっていてそれ以外適用できる箇所がない。）  
作業前のソースは...汚すぎるので、リンクだけおいときます。  

https://github.com/magurouhiru/mysite/blob/dfcd5ea26d4e533ab169246cc9b51877c1411538/src/app/article/article-base.component.html

作業後のcss はちょっと長いのでリンクを貼っときます。  

https://github.com/magurouhiru/mysite/blob/03f9b95274ccabcdf56c456ffb83cbdc83282b36/src/app/article/article-base.component.scss

html はこちらです。
```
  <header class="header header--article">
    <nav class="header__nav">
      <a class="header__a" [routerLink]="'/article'">
        <div class="header__home header__home--article">
          <span
            class="pi pi-pen-to-square header__icon header__icon--home"
          ></span>
          <span>article</span>
        </div>
      </a>
      <div class="header__icons">
        <a href="https://github.com/magurouhiru/mysite">
          <div class="pi pi-github header__icon header__icon--article"></div>
        </a>
        <a href="https://twitter.com/magurouhiru7">
          <div class="pi pi-twitter header__icon header__icon--article"></div>
        </a>
      </div>
    </nav>
  </header>
```
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822099/db6e3cc8-f56e-b3e0-3f65-61755975494d.png)
切り分けはヘッダーがblock でそれ以外がelement としました。  
また、以下はmodifier に切り出しました。  
- `--article`色関係(今後色とか変えて使いまわす予定があるので)
- `--home`左のアイコンと`article`との間のちょっとした隙間(右のアイコンには不要)

## 感想
前のコードが汚いからすごい大変でした。  
ただ、クラス名を考える中で自然と整理され、(前と比べて)シンプルな構造にできました。  
私のような初級者にはそういう意味でも有効な気がしました。  

今回の記事は以上です。  

前回記事はこちら  

https://qiita.com/magurouhiru/items/300a8641b28a419eab98

詳細見たい人はこちら  

https://github.com/magurouhiru/mysite/pull/30

https://magurouhiru.github.io/mysite/
はじめまして

はじめましてSEIと申します。

現在、公務員からエンジニアへ業界移籍するため勉強中となります。

pythonやjsのアウトプットするため記事を書くことにしました。

徐々にレベルアップできればと思っているので暖かい目で見ていただければ幸いです。

よろしくお願いします
0から統計の勉強 箱ひげ図と幹葉表示

# 学習サイト
統計web
- https://bellcurve.jp/statistics/course/

# 箱ひげ図
データがどのあたりの値に執しているかを一目で捉えるためのグラフ
↓ 男性15人の体重を測定した結果

| No | 体重 [kg] |
| - | - |
| 1	| 52 |
| 2	| 55 |
| 3	| 65 |
| 4	| 80 |
| 5	| 73 |
| 6	| 63 |
| 7	| 68 |
| 8	| 59 |
| 9	| 60 |
| 10 | 57 |
| 11 | 61 |
| 12 | 77 |
| 13 | 79 |
| 14 | 54 |
| 15 | 110 |

上記の結果を箱ひげ図にすると以下のような箱ひげ図が作られる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906633/fc9b2607-acd7-5fe2-b772-76e46842afab.png)

この箱ひげ図を確認すると、以下のことが容易に確認できる
- 最小値 = 52
- 最大値 = 110

### パーセンタイル
- データを小さい順で並べた時、ある数値がデータの小さい方から見て何%の位置にあるかを表すもの
- 最小値は0、最大値は100を表す
- Nパーセンタイルは、データ全体をN%と100-N%で分ける値

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906633/99c37850-2f3b-5097-42a8-b5d066b22a01.png)

### 四分位数
- 25%(全体の1/4の部分) = 25パーセンタイル = **第一四分位数**
- 50%(全体の2/4の部分 = 全体の1/2の部分) = 50パーセンタイル = **第二四分位数**
- 75%(全体の1/4の部分) = 75パーセンチタイル = **第三四分位数**
- **5数要約**
    - 最小値、第一四分位数、中央値、第三四分位数、最大値の５つの値の総称
- 範囲
    - 最大値から最小値を引いたもの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906633/685a59b2-bc1f-6200-158d-008802650556.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906633/dd86cd1a-bf0d-0fb0-8ed4-4aa8d2d3b770.png)

四分位数の値を箱ひげ図に当てはめると以下の通りになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906633/c17f362e-fa8c-dc41-117f-3534216536c8.png)

### 箱ひげ図とデータの数
四分位数によってデータは次の4つに区分できる

- 区間D
    - ひげの上端（最大値）から箱の上端（第三四分位数）まで
- 区間C
    - 箱の上端（第三四分位数）から箱の中央の線（中央値）まで
- 区間B
    - 箱の中央の線（中央値）から箱の下端（第一四分位数）まで
- 区間A
    - 箱の下端（第一四分位数）からひげの下端（最小値）まで

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906633/b5f76b0f-2898-8863-8d3b-b59d2d06b093.png)

区間A, B, C, Dの4つの区間の中にはそれぞれ**同じ数だけのデータ**が入っている
しかし、同じ個数であっても、その区間の長さが異なることから、**データのばらつき具合を知ることができる**

例えば、区間Bと区間Dでは、区間Bの方が区間が短いことからデータが集中していることがわかる
また箱の高さは、全データの半分のデータを表すことから、およそ57から78の範囲に全体の半分のデータが存在することがわかる

### 外れ値の扱い
**外れ値**とは、データの分布において、他の観測地から大きく外れた値のこと

外れ値は、測定ミスや異常があって観測された場合などが考えられるため、データの解釈を困難にさせることがあるため注意が必要

# 幹葉表示（みきはひょうじ）
- データの値そのもを用いて作成するヒストグラムに似た図のこと
- 幹葉図ともいう

例えば「27, 30, 33, 33, 37, 41, 45」というデータがあった場合、幹葉表示は次のようになる

| 幹 | 葉 |
| - | - |
| 2 | 7 |
| 3 | 0 3 3 7 |
| 4 | 1 5 |
【Android】アプリの対応バージョンを決める際の考え方

前職でAndroidのアプリケーションに携わる業務が多く、要件生理時に作成するアプリの対応バージョンについて話し合う場合が多かったので、
対応OSバージョンを決める際に抑えてたポイントを備忘録がてら書き出します。
iOSアプリ開発やWebアプリ開発でも同等の考えはできると思います。

当時抑えていたものはこの2点+αでした。
(+αについては最後に記載します)
1. 機種の制限の有無
2. 各端末でのシェア率による検討

## 1. 機種の制限の有無
対応OSを決めてから要件を整理することは原則ありません。
機能等の要件を整理したうえで、開発の要件を抑えるのが基本なので要件が固まり次第、決まるのが定石です。

いくら開発側が「Android 13で開発したい！」といっても顧客側が「この機種で動くものを作ってほしい」と言われたら該当機種に搭載されているOSで頑張るしかありません。

ただし、上記のような事象は業務用で利用するアプリ開発でのみ発生するパターンです。
世の中に出るアプリの場合は1種のみの指定等はまずありません。ですので「じゃあこの記事書いてること意味ないやないか！」ということはありませんので、気楽に読んでいただければ幸いです。

## 2. 各端末でのシェア率による検討

シェア率の検討にはStatcounter GlobalStatsを利用してターゲットのOSの各バージョンのシェア率を確認しています。
こちらのサイトのデータは基本無料で利用できるので商用で利用しても問題ありません。
- Statcounter GlobalStat: https://gs.statcounter.com/
- 統計データについて: https://gs.statcounter.com/factsheet

国内向けのAndroidアプリを作成する際にはこちらの表から各OSの利用率を確認していました。
https://gs.statcounter.com/android-version-market-share/mobile-tablet/japan

顧客の方もプロの人ではないため、「サポート期間がまだ残っているOS」とか「全員に触られるようにしたいからとりあえず全部！」と要求する顧客もいます。

そんな方たちと対峙したときには、ぜひこちらのサイトのデータを利用して対応OSの検討をすることをおすすめします。
※私が担当していた際には上位80%に含まれるOSを対象にする場合が多かったです。

Androidの場合はカスタムROMを搭載した機種も少なくないため、MMD研究所様の調査結果から上位のAndroid機種で利用されているROM(OPPOの場合、Color OSなど)も対応OSの定義に利用していました。
https://mmdlabo.jp/investigation/detail_2288.html

+α分は技術的問題か観点により開発側に負担や条件を振りにさせないため、必ず考えていた観点です。

## minSDKへの影響
アプリによっては一回開発しただけでそのあとOSアップデート対応を行わない場合がありますが、原則サービス終了するまでOSアップデートは行います。
AndroidではtargetSdkVersionに付随してminSdkVersionの設定が必要となり、targetSdkVersionのバージョンによってminSDKVersionのバージョンが決まっています。例えばAndroid 10の際にはAndroid 5.1が必要になるため、Android 5.1未満にしている場合はストアにも公開できない可能性があります。
そのため、開発対象のアプリケーションの対象バージョンに対するminSdkVersionは都度確認する必要があります。


## 対応OSを増やしたことによる影響
パッと思い浮かぶリスクは以下になります。
- OSバージョン毎の処理
- テスト項目の増加

### OSバージョン毎の処理
OSによってはDeprecateにより古いAPIを使用できない場合や新しいAPIが使用できずにエラーが発生するため、各OSバージョンによって処理を分岐する必要がある場合があります。
（特にハードウェアを動かす処理やManifest, Permissionまわりで体感多い気がします）

またカスタムROMの場合、特殊なAPIが挙動が通常のAndroidと異なる場合が存在するので、機能によっては考慮する幅が広がってしまうリスクがあります。


### テスト項目の増加
OSバージョンごとに挙動を変える場合、その分テスト項目が増えてしまい、潜在的なリスクが単純に増加します。
また、古いOSが増えれば増えるほど入手が困難になってしまう可能性があります。
結合テスト、システムテストではテスト要員が必要になり、スケジュールへの影響も大きくなるので、このあたりのことを考えると必要のないOSは対応しないのが良策だと思います。

# 最後に
Androidメインになってしまいましたがアプリ開発時の対応OSバージョンを決める考え方について述べました。
適切に対応バージョンを決めることで開発含め、その後の運用保守も負担のかからないものになりますので、バージョン設定についてはかなり重要だと思います。
この記事で少しでもお役に立てられば幸いです。

話変わりますが、「劇場版 ぼっち・ざ・ろっく！ Re:」 見た後に泣きました。
OP曲数え切れないくらいに聞き返しました。
[番外編 #4] イマジナリーライン

<!--
 <font color="c00000"></font> 赤
-->
## はじめに
皆様お疲れ様です。
今回の **「番外編」** では<font color="c00000"> **「イマジナリーライン」** </font>ついて紹介いたします。

:upside_down: これは **「動画撮影」** の分野で登場する言葉になります。**イマジナリー（想像上の、架空の、非実在的な）** がどういう意味を表しているのかを一緒に見ていきましょう。

## イマジナリーライン
よくアニメ、ドラマ、映画など何でもよいのですが一例として対話や戦っているなどのシーンを思い浮かべてみてください。きっと下図のようなシーンがあると思います。
![S__9043977.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/b47c8310-9624-28e4-eca0-45c844437f2d.jpeg)

<font color="c00000"> **「イマジナリーライン」** </font>とは一連のシーンをいくつもの**カット**に分けて撮影する場合に **「カメラ配置のルールとなる<font color="c00000">**基準線**</font>」** のことを言います。カメラを置く範囲がイマジナリーラインから見て **「180°以内」** に設定されているため、**「180度ルール」** とも言われています。

## イマジナリーラインの原則
こちらの２つの図を見て下さい。
Qiita猫とひつまぶしの疑似的な対話シーンのカットとカメラの位置を作成してみました。
![bangai04_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/ef79ecf2-df8f-ad00-5ee7-f95e0d252f03.png)
![bangai04_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/dc9e757b-d6c4-085a-3cbe-5a32a39d4281.png)
:upside_down: では皆様ここで一つ質問します。
AとBのシーンどちらの方が「違和感無く」見えますか？

:rolling_eyes: うーーん...「A」ですね。「B」の方はなんか違和感がありますね。なんででしょうか？

:upside_down: 恐らく大半の方が「B」のシーンに違和感があると感じるかなと思います。図の場合、①②③のカットを撮影できる位置（両図「C」）にカメラを配置したとしましょう。この時にQiita猫とひつまぶしを結んだ線が「イマジナリーライン」です。同じシーンにおいては、原則としてカメラもキャラクターも一度設定したイマジナリーラインを**越えてはいけません。**

:rolling_eyes: この原則を守らないとどうなるのですか？
:upside_down: 登場キャラクターの<font color="c00000">**「位置関係が不明確」**</font>になり、見ている観客、視聴者を**混乱**させてしまいます。（このキャラどっちにいるんだろう？というイメージですね）

---
先ほどの図に戻りましょう。

![bangai04_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/ef79ecf2-df8f-ad00-5ee7-f95e0d252f03.png)
イマジナリーラインのルールに従って撮影したカットAを「①②③」の順に繋げてみると、①のカットで設定された登場キャラクターの位置関係が②③になっても **「同じ」** になっているため、視聴者は登場キャラクターの位置関係を矛盾無く把握できます。

では一方で、③のカットを同じ図[C]の「カメラ③´」の位置から撮影したものと差し替えると、Qiita猫の向いている方向がひつまぶしと同じになるため「Qiita猫はどちらを向いているんだ？:thinking:」と**位置関係が分からなくなってしまいます。**

なお、カメラはイマジナリーラインを越えない限りは自由に設定ができます。

### ちなみに
:upside_down: 図[C]の「カメラ①、②、③」のカメラ配置は **「三角配置法」** とも呼ばれています。これは実際の撮影現場ではよく取り入れられているとのこと。

実写撮影の場合、ロケーションの関係でどうしてもイマジナリーラインを越えなくてはならない事態が発生することもあります。しかし。観客を混乱させないためには、極力この**原則を守る**方策を検討するべきですね。

## おわりに
ちょっとしたまとめになります。

:::note info
イマジナリーラインはカメラ配置のルールとなる <font color="c00000">**基準線**</font>のこと
:::
:::note info
位置関係が不明確になり、**観客が混乱しないように**この原則は破ってはならない
:::

今回はまたちょっとジャンルが変わった内容でした。映像分野のネタにも興味があるため今後も作成していくかもしれませんね。今回はこのQiita猫とひつまぶしに登場してもらいました！
![S__9043985.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/5006f3d3-628d-a4e6-ca7b-1b86c2a1ccb5.jpeg)

最後まで読んで頂きありがとうございました！
>> 参考
[CGクリエイター検定エキスパート　動画撮影](https://www.cgarts.or.jp/books/cc/)
[イマジナリーラインとは？](https://tech.pepabo.com/2017/06/26/imaginary-line/)


>>過去の番外編はこちら
[#1 ばねのような動きを再現](https://qiita.com/aoiku/items/19cf51605f80c60d4004)
[#2 関節を動かしてみた](https://qiita.com/aoiku/items/c500c4cb65499d11027a)
[#3 軸回転をしてみよう](https://qiita.com/aoiku/items/24a63ba63349c07a235c)