OmniAICreator/Qiita-1.07M huggingface dataset:
Ruby2

# 問題

配列の内部に、複数のユーザーの情報をハッシュとして持つ変数user_dataがあります。

```Ruby
user_data = [
 {user: {profile: {name: 'George'}}},
 {user: {profile: {name: 'Alice'}}},
 {user: {profile: {name: 'Taro'}}},
]
```

user_dataを利用して、全てのユーザーの名前だけが出力されるようにRubyでコーディングしてください。
ただし、出力結果は次のようになるものとします。

```Ruby:ターミナルの表示
George
Alice
Taro
```

<br>
<br>
<br>

# 模範解答

```:模範解答１
user_data.each do |u|
  puts u[:user][:profile][:name]
end
```

あるいは

```Ruby:模範解答２
user_data.each{ |u| puts u.dig(:user, :profile, :name) }
```

# 【解説】
ハッシュから特定の値を取得する場合は、その値に対応するキーを指定します。以下の書き方で取得ができます。

```Ruby:使用例
ハッシュ[取得したい値のキー]
```

また、二重ハッシュから特定の値を取得する場合は、取得したい値のキーまで連続して指定すると取得できます。

```Ruby:使用例
ハッシュ[取得したい値のキー][取得したい値のキー]
```

今回取得したい値は、George, Alice, Taroという値です。
よって、取得したい値に対応するキーはnameというキーだということが分かります。
そのため、nameというキーまで連続して指定すると、George, Alice, Taroという値を取得できます。

```Ruby
ハッシュ[:user][:profile][:name]
```

また、今回は配列の中にハッシュが格納されています。
そのため、each文でハッシュの1つ1つを取り出した上で、上記の記述を行うことが必要です。

```Ruby:模範解答１
user_data.each do |u|
  puts u[:user][:profile][:name]
end
```

発展的な別解として、digメソッドを用いても取得できます。digメソッドはRubyに標準で組み込まれているメソッドで、多重階層にあるハッシュの値をまとめて取得できます。

まずは、簡単な解答を理解する方が大切なので興味がある方はdigメソッドを検索してみてください。
わかりやすく解説している記事がたくさんヒットすると思います。
orElse, orElseGet, orElseThrow of Optional class

orElseは、isEmpty() = trueの場合に別の値にすり替える
orElseGet()は<T>Supplier
orElseThrow()は<? extends Throw> Supplier

```java
class SampleException extends Exception {
}
public class Outer {
    public static void main(String[] args) {
        System.out.println(Optional.<String>of("A").orElse("X"));
        System.out.println(Optional.<String>empty().orElse("X"));
        System.out.println(Optional.<String>empty().orElseGet(() -> "Y"));
        try {
            System.out.println(Optional.<String>empty().orElseThrow(() -> new SampleException()));
        } catch (SampleException ex) {
            ex.printStackTrace();
        }
    }
}
```
```
A
X
Y
com.mycompany.mavenproject1.SampleException
	at com.mycompany.mavenproject1.Outer.lambda$main$1(Outer.java:18)
	at java.base/java.util.Optional.orElseThrow(Optional.java:408)
	at com.mycompany.mavenproject1.Outer.main(Outer.java:18)
```
Googleプロジェクト管理：ビジョン・ミッションとスクラムチームの役割

# はじめに

わたしが [Google プロジェクト管理:プロフェッショナル認定証で得られた素晴らしい体験][google]を、要点をまとめ小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ ***"Google プロジェクト管理:プロフェッショナル認定証"*** を受講してみてください。

[google]: https://qiita.com/mapami/items/317ae776a2268fd54c8f

https://jp.coursera.org/professional-certificates/google-project-management

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1c9e3622-d11d-e6dd-1bb7-f12b3fef8845.png" width="800">

# 製品ビジョンとミッション

スクラムはアジャイルの方法論なので、アジャイルの価値と原則を体現していることを思い出してください。

アジャイルの原則の1つにこうあります。

***<font color="MediumVioletRed">『意欲に満ちた人々を集めてプロジェクトを構成します。環境と支援を与え仕事が無事終わるまで彼らを信頼します。』</font>***

個人をやる気にさせる最善の方法は、彼らが本当に気になるミッションと製品ビジョンを与え、それに向かって気持ちよく働けるようにすることです。

アジャイルでは、

***<font color="MediumVioletRed">『ミッションはプロセスを通してチームにとって不変であり、それに向かって働く何かを与える短いステートメント』</font>***

です。ミッションに加えて、アジャイルチームは製品ビジョンも設定し、チームがどのような結果に責任を持つのか、そしてチームの境界はどこなのかをはっきりさせます。

少し経営的な話に聞こえるかもしれませんが、私はこのように考えています。

- ミッションは、***<font color="MediumBlue">なぜ</font>*** その仕事をするのかを教えてくれるものです。
- 製品ビジョンは、その仕事が終わったときに　***<font color="MediumBlue">どうなっている</font>*** のかをイメージすることができます。

#### サンプル

オフィスグリーンの新プロジェクト「Virtual Verde」を例に、ミッションと製品ビジョンについて考えてみましょう。「Virtual Verde」は、植物を自宅のオフィスに届けるプロジェクトです。

<dl>
  <dt>ミッション</dt>
  <dd>Virtual Verdeは、自宅のワークスペースを活気づけることで、ユーザーの健康と幸福を向上させる。</dd>
  <dt>製品ビジョン</dt>
  <dd>Virtual Verdeはホームオフィスを変えるリビングマーケットプレイスになる。</dd>
</dl>

この2つのステートメントは、Virtual Verdeのユーザーに楽しい体験を提供するために、チームを鼓舞することを意味しています。

# スクラムチームの役割

すべてのスクラムチームは、

- スクラムマスター
- プロダクトオーナー
- 開発チーム

という3つの定義された役割で構成されています。これらの役割は、チームの目標を達成し、ミッションとビジョンを実現するために協力し合います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/dad50c63-fcb3-8a3d-0f60-c93039a1322c.png" width="700">

### プロダクトオーナー

**『The Product Owner's job is to build the right thing』**

プロダクトオーナーは、チームが何を開発するかに責任を持ちます。また、全員が「なぜ」を理解できるようにしなければなりません。

### スクラムマスター

**『The Scrum Master's job is to build the thing fast』**

スクラムマスターは、チームがいつユーザーに価値を提供するかに責任を持ちます。この役割は、従来のプロジェクトにおけるプロジェクトマネージャーの役割とほぼ同じです。

:::note info
スクラムチームには明確に定義された役割がありますが、チーム全体が目標達成のために協力し合うということが重要です。
:::

https://youtu.be/oAY83nu5FOg

# スクラムガイド

スクラムガイドでは、次のように記述している。

スクラムチームはクロスファンクショナルである。スクラムチームが何かを成し遂げるとき、それはどのような機能または組織に属していても、チーム全体の成果である。あなたのスクラムチームには、ソフトウェア開発者、マーケティング専門家、品質保証、ロジスティクスの専門家がいるかもしれません。サッカーチームの例えを思い出してください。各選手が集まって自分のポジションでプレーすれば、最終的には、ボールをゴールに入れるために必要なものがすべて揃うのです。さらに、これらの新鮮な視点は、プロジェクトやユーザー、ビジネスに多くの価値をもたらします。

スクラムチームは自己組織化されています。これは、あなたがこれまで働いてきた、上司があなたの仕事を指示し、頻繁に更新を要求するような組織とは、根本的に異なっているように聞こえるかもしれません。しかし、スクラムチームは、確約、勇気、集中、公開、尊敬という5つの価値観に依存しているので、スクラムチームは、より有機的で柔軟な環境で、驚くべき結果を出すために協力することができるのです。

チームは自己組織化されているが、高パフォーマンスのスクラムチームには、スクラムチームの外側に座って、スクラムの自己組織化の性質を破壊することなく、戦略的リーダーシップと個人のキャリア開発を提供するマネージャがいることが多い。

私の経験では、***<font color="MediumBlue">もしマネージャーがチームに何をすべきか指示し始めなければならないと感じ、自己組織化を妨げるなら、スクラムの利点は崩壊し始める</font>*** でしょう。
.koをビルドしたけど、insmodできない

# .koをビルドしたけど、insmodできない

#### エラー
```
mozaki@shibusawa:~/001_build/201_DEVICE_DRIVER_STUDY$ make
make -C /lib/modules/5.15.0-46-generic/build M=/home/mozaki/001_build/201_DEVICE_DRIVER_STUDY modules
make[1]: Entering directory '/usr/src/linux-headers-5.15.0-46-generic'
  CC [M]  /home/mozaki/001_build/201_DEVICE_DRIVER_STUDY/hello.o
  MODPOST /home/mozaki/001_build/201_DEVICE_DRIVER_STUDY/Module.symvers
  CC [M]  /home/mozaki/001_build/201_DEVICE_DRIVER_STUDY/hello.mod.o
  LD [M]  /home/mozaki/001_build/201_DEVICE_DRIVER_STUDY/hello.ko
  BTF [M] /home/mozaki/001_build/201_DEVICE_DRIVER_STUDY/hello.ko
Skipping BTF generation for /home/mozaki/001_build/201_DEVICE_DRIVER_STUDY/hello.ko due to unavailability of vmlinux # このメッセージに着目
make[1]: Leaving directory '/usr/src/linux-headers-5.15.0-46-generic'
mozaki@shibusawa:~/001_build/201_DEVICE_DRIVER_STUDY$ 
mozaki@shibusawa:~/001_build/201_DEVICE_DRIVER_STUDY$ 
mozaki@shibusawa:~/001_build/201_DEVICE_DRIVER_STUDY$ sudo /sbin/insmod hello.ko 
insmod: ERROR: could not insert module hello.ko: Operation not permitted
mozaki@shibusawa:~/001_build/201_DEVICE_DRIVER_STUDY$
```

#### 解決方法

Step1 ビルドエラーの改善
https://askubuntu.com/questions/1348250/skipping-btf-generation-xxx-due-to-unavailability-of-vmlinux-on-ubuntu-21-04
```
sudo apt install dwarves
sudo cp /sys/kernel/btf/vmlinux /usr/lib/modules/`uname -r`/build/
```

Step2 Certificateされていないモジュールのロードの許可を設定(Secure bootを無効化)
https://support.avira.com/hc/en-us/articles/360003038074-How-do-I-disable-UEFI-Secure-Boot-modules

#### 改善後

```
mozaki@shibusawa:~/001_build/201_DEVICE_DRIVER_STUDY$ sudo insmod ./hello.ko 
```
paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript 太巻きを分けよう (おなかいっぱい)

太巻きを分けよう (おなかいっぱい) (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search/binary_search__application_step3

# 解答例
太巻き１つ１つの大きさを求め配列Bとする。太巻きを左端から１本１本長さがmid以内のできるだけ長い長さにする。分けた本数がnを超えるか以下で分けて、範囲を狭めていく。

```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");
//長さ L [cm] の太巻き, n 人で分け, k 個の切れ目
const [L, n, k] = lines[0].split(" ").map(Number);
const A = lines[1].split(" ").map(Number);
//太巻きのそれぞれの長さB
const B = A.map((v, i, arr) => {
  if (i === 0) {
    return v;
  } else {
    return v - arr[i - 1];
  }
});
B.push(L - A[A.length - 1]);

//最も長い太巻きの長さについて二分探索する
let [left, right] = [1, L];//太巻きの長さの範囲

//最も長い太巻きの長さは、太巻き１本１本の中で最も長い太巻き以上になるので、
//これの-1を範囲の左端(最長の長さの範囲の最短)leftに設定する
left = B.reduce((a, b) => Math.max(a, b), left) - 1;

while (right - left > 1) { //制約により整数なので1以下になればよい

  let mid = Math.trunc((left + right) / 2);//最長の長さの上限を仮に決める

  let tmp = 0;//一時的な長さ
  let num = 0;//太巻きの本数
  
  //最長を求めるので１本ができるだけ長くなるようにする
  for (let j = 0; j <= k; j++) {
    tmp += B[j];//１本の長さに加えて検討する
    
    //太巻き１本の長さが最長を超えそうなら
    if (tmp > mid) {
      num += 1;//そこで切って1本
      tmp = B[j];//新しく更新
    }
    //最後まで行ったら
    if (j === k) num += 1;//残ったものを１本にする
  }

  //切った本数がnより多かったら、最長の長さをもっと長く
  if (num > n) {
    left = mid;
  //切った本数がn以下なら、最長の長さをもっと短く
  } else {
    right = mid;
  }

}
console.log(right);
```


# 解答例(Python3の場合参考)
太巻きの両端を含む切れ目の配列Aを作る。最も短い太巻きの長さについて二分探索する。左端から切り身がmid以下でできるだけ長くなるように、切れ目を選ぶ。切り出した本数がnを超過するか以下かで分け、範囲を狭めていく。
```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");
//長さ L [cm] の太巻き, n 人で分け, k 個の切れ目
const [L, n, k] = lines[0].split(" ").map(Number);
const A = lines[1].split(" ").map(Number);

A.unshift(0);
A.push(L);

//最も短い太巻きの長さについて二分探索する
let [left, right] = [0, L];

/*どんなに短くしようと工夫しても、最も長い太巻きの長さは 
max(a[i]-a[i-1]) (1 ≦ i ≦ k+1) 以上になるので、具体的に計算*/
for (let i = 1; i < k + 2; i++) { //i=1:太巻き2つめからスタート
  left = Math.max(left, A[i] - A[i - 1]);
}

left -= 1;//探索範囲の左端を上の値から-1したものにしている。
while (right - left > 1) { //答えは整数なので差が1以下まででよい
  let mid = Math.trunc((left + right) / 2);//整数なので切り捨て

  let last_index = 0;//最後に切った切れ目の番号
  let index = 0;//今切った切れ目の番号
  /*太巻きの切れ目は、左端がlast_index、右端がindexとなる。*/
  let parts = 0;//太巻きの本数

  //太巻きを端から切り出していく
  while (true) {
    //できるだけ１本の太巻きが長くなるように切り出す
    //切れ目の位置が最後に到達する前、かつ、切った太巻きの長さがmid以下、ならば
    while (index + 1 < k + 2 && A[index + 1] - A[last_index] <= mid) { //index+1次切ろうとしている切れ目
      index += 1;//次の切れ目へ
    }
    parts += 1;//切れ目の探索が終わったら、切って1本の太巻きに
    if (index === k + 1) {//太巻きの右端まで行ったら
      break;//終わり
    } 
    last_index = index;//切ったら、最後の切れ目は、今切った切れ目になる
  }
  
  //切った本数が多かったら、最も長い太巻きはもっと長くできる
  if (parts > n) {
    left = mid;
  } else {
    right = mid;
  }
}
console.log(right);
```
Rembgでレシート画像を切り抜き

# 目的
- レシートと背景が写った写真からレシートをくりぬきたい
- Rembgってすごいらしい
- なんか画像処理っぽいことしたい

# 前回のあらすじ

https://qiita.com/kazzzu/items/d9684319d2d0b64d6f31

https://qiita.com/kazzzu/items/ebaa3f42c91d9ade3ee5

今回はrembgをやってみたいと思いました。原理とか理論とかは参考文献を参照してください。
最近のDeepleaningはすごいですね。恐ろしく簡単に背景消せるんだ、と思いました。

# 環境
- Windows11 Home
- VSCode
- Python3.10
- pip
 rembg

# 本編
参考：

https://github.com/danielgatis/rembg

https://dev.classmethod.jp/articles/python-rembg/

## Rembgをpipでインストールします

```
pip install rembg
```
## プログラムを作成します
基本的に１行で切り抜きしてくれます。めちゃくちゃ楽。

```python
import cv2
import os
import glob
import rembg

def save(name, image, format='.jpg'):
    cv2.imwrite( name + format, image)

def doTrim(filename):
    img = cv2.imread(DATA_DIR + filename)
    output = rembg.remove(img)
    save(filename+'1', output)

DATA_DIR='data/'

for p in glob.glob(DATA_DIR+'*.jpg'):
    if os.path.isfile(p):
        target=os.path.basename(p)
        print(target)
        doTrim(target)
```
## 変換結果
前回うまくいかなかったものもあっさり良い感じに切り抜けました。
（こんなに簡単にできてしまうと逆につまらない感じ。。。）
元画像
![20220303_084409.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245578/b0442cea-bcd4-a53f-4d01-bc15d285db63.jpeg)
変換後
![20220303_084409.jpg1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245578/0bd87ace-203b-d20c-e226-be2e80838a4a.jpeg)

元画像2（前回失敗した）
![20191015_134133.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245578/63e051a5-6bd0-fbe1-3087-204fb94829b5.jpeg)

変換後
![20191015_134133.jpg1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245578/98d40f40-7f20-5809-ea69-31ca81f36ad9.jpeg)


## 終わりに
今回GPUを使用しないで実行しましたが、1枚当たり3秒くらいの処理時間でした。
GPU使うともっと速くなるかも。
プロジェクトで行ったVoiceOver対応(読み方の変更)

# はじめに

2021年6月に障害者差別解消法の改正により、民間事業者でも義務化され、公布から3年以内に対応が求められるようになりました。
そのため、自分の参画しているプロジェクトでもアクセシビリティの対応が増えました。
今後のためにも備忘録的に取り組んできた対応の一部を書いておこうと思った次第です。

自分の参加しているプロジェクトでは[Apache Cordova](https://cordova.apache.org/)というモバイルアプリ開発向けのフレームワークをベースに開発を行っています。
技術的には3割ほどネイティブの実装で他はwebの技術を利用しています。
なので、iOS,Androidとタグにありますが、この記事ではHTML,TypeScriptでの対応方法です。

また、利用した一部の例を取り上げるだけなので、根本的な技術の理解みたいなのはこの記事ではできません。。

# テキストやボタンの読ませ方の基本的な対応

基本的にはWAI−ARIAに定義されているaria-labelを利用します。
[WAI-ARIAについて](https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics)はこちらを見ていただけると良いと思います。
自分もここに述べられるほど詳しくはないですが、要はスクリーンリーダにその要素について連携するくらいで認識しています。
公式だと

>HTMLだけでは表すことのできない構造や状態などを明示することができます。

とのことです。

#### 実際の使い方

```html
<button aria-label="xxエリアの続きを見る">続きを見る</button>
```

のような感じで指定してあげるだけ。


### 読ませたくないもの

例えば独自実装したグラフのUIを読ませないようにする際に`aria-hidden`を利用します。
後述しますが、もちろんグラフに載っている内容を別途違う方法で読み上げるようにはしています。


#### 実際の使い方

`aria-label`と同様に要素を追加し、読ませたくない場合trueを設定します。

```html
<div id="hoge" class="graph-container" ~省略~ aria-hidden="true"></div>
```


### 読み上げる専用の隠しUIを作る。

上記のaria-labelを利用してもうまくいかないものがありました。
独自実装したグラフのUIであったり、「GB」などが指定しても片方のOS（例えばiOS）では「ジービー」と読まれてしまうなど。

そういった場合は、読ませない・ユーザーに見せるUIと、読み上げる・ユーザーに見せないUIを作成しました。


#### 実際の使い方

SCSSで`hidden`属性を持たせたクラスを作成し、それを指定してあげることで見た目にはないがスワイプしたりすると読み上げるようなものを用意しました。
実際の見えているUIには`aria-hidden="true"`を指定しました。

```html
<span id="hoge" aria-hidden="true">GB</span>
<span id="hogehoge" class="sr-only">ジービー</span>
```

```scss
// class設定
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 1px;
}
```

# 最後に

この対応をした箇所が全て正しいかはわからないので、自分でも
https://www.w3.org/WAI/ARIA/apg/patterns/
のようなサイトを見て推奨されているものを引き続き勉強していけたらなと思います。
これ以外にも多言語対応、キーボード利用対応、デザイン的な対応も行いましたので、その内容も当てはまるかはわかりませんが余裕のある際に書いていきます。
Windowsとpython3.11で"delimiter" must be a 1-character stringというエラー

次のようなプログラムをwindowsで実行

```diff_python
import csv

raw_data_path = 'hoge.txt'

with open(raw_data_path) as raw_data_file:
    reader = csv.reader(raw_data_file, delimiter='¥t')
    for row in reader:
        print(row[0], row[5],row[6])
```
その結果タイトルのエラーが発生
```
    reader = csv.reader(raw_data_file, delimiter='¥t')
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
TypeError: "delimiter" must be a 1-character string
```
原因は`delimiter`の引数が`¥t`になっていること。`delimiter='\t'`にすることで解決。

単なるコピペには注意
エンジニア初学者の勉強振り返り

# はじめに

2022.11〜から勉強を行なっているのですが、振り返りを行いたいと思い書いています。
やってきた勉強をまず書き出します。

* HTML
* CSS
* Bootstrap
* JavaScript
* jQuery
* DOM操作
* Sass
* Ruby
* Ruby on Rails
* CRUD機能
___

# HTMLの学習
基本ルール
1, タグで囲む
2, 見出しと段落
3, リンクの付け方
4, 画像を表示
5, リストを表示
6, コメントの入れ方
7, グループで整理
8, ブロック要素とインライン要素
9, タグに属性
___
1,タグで囲む
開始タグと終了タグの間にコンテンツを書く
```
<p>HELLO</p>
```

2,見出しと段落
見出しは、h1からh6まで
段落には、pタグ
```
<h1>h1タグ</h1>
<P>pタグ</P>
```

3, リンクの付け方
リンクは、""の間に入れる
```
<a href=””></a>
```

4, 画像を表示
imgタグに終了タグはいらない
```
<img src=”画像のURL”>
```

5, リストを表示
ulは、囲んだ範囲がリストであることを示す
liは、リストの中で表示する項目の一つを作る
数字つきのリストは、ol
```
<ul>
  <li>はれ</li>
  <li>くもり</li>
  <li>あめ</li>
</ul>
```

6, コメントの入れ方
コメントアウト（注釈を入れる）
ブロックの区切りをわかりやすくしたりする
```
<!-– コメントアウト -–>
```

7, グループで整理
グループ化をする時の代表的なタグ
```
<div>
<P>divタグでグループ化</p>
</div>
```

8, ブロック要素とインライン要素
タグは2種類
ブロック要素（div,h1,p,ul）
インライン要素（a,span）
ブロック要素同士を連続で書くと縦に並ぶ
インライン要素のタグを連続で書くと横に並ぶ

9, タグに属性
属性の書き方
<タグ名 属性=”属性値”>
属性の種類
（id,class,src,href）

# おわりに
HTMLコードを記述していて、グループ化がとても重要だと思いました。
CSSがうまく反映されないーー。
コードが何だか綺麗にならない。。など悩みがありました。
グループの重要性＝運用しやすさ

に繋がると思うので、もう少し掘り下げた内容を
次回は振り返れるといいなあと思います。
【Android】Mocopi でトラッキングセンサーとペアリングできない場合の対処法

# Mocopi とは
SONYが2023年1月にリリースしたモーショントラッキング用デバイスです。

https://www.sony.jp/mocopi/

Perception Neuron や VICON, OptiTrack といった数あるモーションキャプチャシステムの中では破格の¥49800という低価格で販売されていることと、また低価格なのにトラッキング精度がよさそうということでVR界隈やVTuber界隈で特に注目されています。

# セットアップ

セットアップは単純でMocopi のアプリをスマホに入れてその指示通りにやるだけで完了します。

# 遭遇したトラブル

mocopi のアプリ上で、各マーカーとスマホをBluetoothでペアリングさせます。

しかし、このペアリングで `マーカー単体の検知フェーズでは問題なかった` が、最後に `マーカー全体をペアリングする` フェーズでエラーになって失敗するという事象に遭遇しました。


## 解決方法
今回は `Bluetooth イヤフォンの接続を解除する` で治りました。

一般的にBluetooth は何台でもペアリングはできますが、利用可能は7台までと言われていたりします。

一応マーカー6個 + イヤフォンで理論上は問題なく動きますが、たまたまペアリング環境的にbluetoothが不安定ということもあって、同時接続デバイス数を減らしたところうまくいきました。

一度ペアリングの設定完了後はbluetoothイヤフォンをつないでいてもマーカーは機能することを確認できたので、
必ずしもイヤフォンが原因とは言い切れませんが、初期セットアップ時は接続を切っておいた方が無難です。


## 検証環境

今回は検証デバイスとして Pixel 6 (公式には動作保証環境リストには掲載されていない) を利用したので
たまたま機器との相性が出た可能性はあります。
ただ、もしかすると他のAndroid端末でも同様の事象が発生するかもしれないため備忘録として記載しております。
NGINXのローカル環境の作成   【yum-utils】編

### cd local_01
```javascript
ディレクトリを作成して移動
```
### vagrant init centos/7
```javascript
vagrantfile作成
```
#### (gc Vagrantfile) -replace '# config.vm.network "private', ' config.vm.network "private' | sc Vagrantfile; (gc Vagrantfile) -replace "192.168.33.10", "192.168.66.10" | sc Vagrantfile
```javascript
コメントを外して新しいIPに編集する
```

### vagrant up
```javascript
.vagrantファルダが生成されている事を確認
```
### vagrant status
```javascript
default  running (virtualbox)になっている事を確認
```
### vagrant ssh
```javascript
作成した仮想マシンに接続
```

### cd /etc/selinux/
```javascript
selinuxのディレクトリへ移動
```

### ls -la
```javascript
configディレクトリがあるか確認
```

#### sudo sed -i 's/^SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config

### sudo vi /etc/selinux/config

```javascript
config編集
SELINUX=enforcing
↓
SELINUX=disabled
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/689fa941-1327-3c61-476d-6f9f9a7298fb.png)
### exit
### vagrant reload
```javascript
vagrantをリロード
```
### vagrant ssh
### cd /etc/selinux/
```javascript
selinuxのディレクトリへ移動
```
### getenforce
```javascript
【Disabled】になっていることを確認
※SELinuxの動作モードが【Disabled】(SELinuxが無効)になっていることを確認
```

### sudo yum install yum-utils
```javascript
ひたすら【y】を打つ
Complete!が出たらOK
```

### sudo yum -y update 
```javascript
VM内のモジュールを最新にする
```
### exit
### vagrant reload
```javascript
vagrantをリロード
```
### vagrant ssh
次は

https://qiita.com/panda-chibi/items/1a9a241a99156e0da014
テックキャンプ卒業から現在まで

## テックキャンプに関して

未経験からエンジニアを目指す上で、プログラミングスクールに通うというプロセスを選択する事は、世論として賛否両論あるかと思うが、結論として私個人としては選択して良かったと思える環境であった。
今からお話しする内容は、他人からすると間違っていると感じる事や納得して貰えない事はあると思うが、プロセスなど人其々違って当たり前だと感じる。それが間違っていたか正解かは本人が決める事だとも感じる。

具体的に、私がテックキャンプに通って良かった点を下記にてざっくばらんに述べさせて頂く。

# １点目：　クラス単位での取り組み(アウトプットの習慣化)

実際は、クラスと言えど、勿論カリキュラムをこなすのは己自身ではあるが1日に数回、クラスの仲間とZOOMでコミュニケーションを取る。コミュニケーションの内容としては、カリキュラムの進捗具合などもあるが、メインとしては学んだ事をアウトプットし合う、そして不明点をクラスで共有し、皆で教え合うという習慣が構築されていた事は、自分自身非常に有意義であった。
今までの人生を振り返ると、学ぶ事に対する推進力や探究心などはある方ではないかと自負していたが、インプットだけをとにかく繰り返し、アウトプットに同じ時間を掛けられていなかった事に気づけたのは、紛れもなく収穫であった。また、教え合う時などもどのように言語化をすれば他人に理解してもらい易いかを考えると余計に、知識が頭に記憶されていく事を実感出来、改めて言語化してみると自分の理解の相違や浅さなども客観的に気づく事が出来、学びの環境としては自分の新しくより効率的な勉強の型を身に付ける事が出来、充実していた。
また、個人的には誰かと切磋琢磨出来る事こそが、負けず嫌いの性格が働き、初日から最終日まで1日も無駄にする事なく勉強に取り組めた一番のエネルギーとなっていた為、ありがたかった。

## ２点目：　メンター制度

　メンター制度に関して、賛否両論ある点だと予想するが私はこの制度に関しても非常に満足した。なぜかというと、私はメンターに頼るではなく、メンターを逆に利用するような気持ちでこの制度を利用していた事で、間近で実務経験者の知識や技術を見聞きする事が出来、大変為になった。
前述の通り、カリキュラムで躓いたポイントをメンターに教わる為に使用していたというよりも、メンターの考え方やソフトウェアの使い方、現場で使用頻度の高いショートカットなど、カリキュラムには載っていないような知識をメンターから学べたのは非常に実践を常に意識して取り組めていた為、私はこの制度に満足していた。
また、メンター制度に関して否定的な意見があるのも理解できる。現場に出ると常に教えてもらえる人なんていないや結局、エンジニアは自分で解決出来る力を磨く必要があるなどもわかる為、鼻からメンター制度を答え合わせや受け身の体制で使用しているような方には正直、学びになっているのかは疑問が生じる点があるのかも知れないと思う。

# 3点目：　卒業後の転職サポート

　この制度も非常に利用させて貰い、大変助けられた。
エンジニア未経験且つ転職自体も初めてということで、転職に関してやエンジニア界隈・IT業界に関して、CAの方のノウハウ共有は非常に今後の進路を決めていく上で、参考になる点が多かった。その中でも、面接対策や書類の添削など、私が就活の時に対策していた内容と転職時ではまるで異なり、自己分析の甘さや過去の就業経験をどのように相手に分かりやすく伝えるかといった事も、主観だけでは到底クオリティを上げていく事は難しかったと、今感じている。

以上、テックキャンプに通う事は非常に有意義な期間であったと思う。繰り返しお伝えするが、プログラミングスクールに通う事に関して賛否両論あって当たり前だが、仮に通うという事で有れば、どこで学ぶというよりかもその環境を利用して自分がどう学ぶのかにフォーカスする事も大事な要素だと私は感じる。
中国のノーコードツール「宜搭(YiDA)」をさわってみた

# 宜搭(YiDA)
中国のノーコードサービス  [https://www.aliwork.com/](https://www.aliwork.com/)

# プラン
:::note info
2023年1月24日時点の情報です。
:::
　
[https://www.aliwork.com/price.html](https://www.aliwork.com/price.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/b7936748-bd07-336d-d55a-27f6c53dc32b.png)

釘釘のユーザー体験版の使用が可能な様ですね。
標準版でほぼほぼの機能をカバーしている印象ですが、サーバーサイドにコードを組み込もうとするとより上位のプランが必要そうです。

標準版が 1,988元/年 ～
30 User で 1,988元/年
50 User で 2,988元/年
この様な感じで、User数に応じて費用が変化する様です。かなり抑えられた価格ですね。

# 使ってみた所感
## アカウント開設・ログイン
釘釘とアカウントが統合されている様です。釘釘のアカウントを持っていればそれでログイン可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/0132f2c2-929d-5a4b-79e8-298dc3d7fbf2.png)

## アプリを追加してみます。

テンプレートから・空白から・エクセルからの３種類の作成方法があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/8197c256-57ec-480a-9c3a-7726a7aa4e8b.png)

## フォーム設計
おおよそノーコード系のフォーム設計画面はこの様な感じですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/e74753ab-7c3e-b755-052e-8670d49e637d.png)

項目を設置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/6abc5c96-45f7-8de6-674a-1522a22ae91c.png)

各項目に関数を記述できるようなインターフェースがあります。結構コーディング寄りの印象を受けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/f92c1dc8-f640-f8d1-8c47-eac28ddf5ee7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/1a1033b0-bbef-5f3d-fb1a-6b2e6d350f79.png)

## 画面設置は１列か2列の選択のみ？

まだ初見ですので、違うかもしれませんが、画面レイアウトは１列か2列という選択しかみつかりませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/7996c505-4da0-173e-91f1-d788906c52fb.png)

## 一覧はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/b49a3e5a-e93e-603e-de89-349971e73fd3.png)

ユーザーサイドで表示項目を設定できますが、管理側で一覧項目を定義する箇所はみつかりませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/9bf86649-4311-6f0d-3a11-93f46da13be1.png)


## そのほか所感

日付項目の関数候補例です。かなりの関数が準備されていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/90eb5159-55fb-9583-ae09-cb5ebe573abe.png)

別アプリを参照して値を代入することもできそうです。選択肢をその場で追加できるUIがいいですね。下図の赤枠から可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/30951516-6f1c-3bb9-1cf0-466a345a81d9.png)

別アプリを参照する際の検索条件も柔軟に選択できますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/ff6184ec-e941-5d4a-65c1-2b462ae74d9a.png)

帳票も定義可能な様。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/8f4d2515-2664-81cd-3e64-2f67efebee4e.png)


サードパーティの電子契約サービスと連携も可能な様子。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79724/99f0a3af-16c5-69a4-8b45-a5a179b6356b.png)

# 総評

必要時にコードを追記することで、より柔軟性が高い対応が可能なノーコードプラットフォームという印象を受けました。テンプレートも豊富ですが、テンプレートを有効化したあとに、自分で調整できるかは不明です（今の所編集メニューがみつからず）。
git-simコマンドでGitを視覚化する 


Git コマンドの操作を視覚的にシミュレートしてくれるおもしろそうなツールがあったので入れてみた。commit や merge は実際に実行されるのではなくあくまでシミュレートなので、例えば利用頻度が比較的低い revert や reset の前にちょこっと使ってみるとコマンド実行前に動きが見えるので良い。下図は git reset を視覚化しシミュレートしたもの。
![git-sim-reset.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/fc61274b-ff6d-7afc-51db-7f7ee369fb4f.jpeg)

## 前提

- macOS Big Sur 11.7.2 (Catalina 以下だと動かない模様)
- Homebrew 3.6.20
- Python 3.8
- pip 21.1.3

## 事前準備

git-sim を使うにあたっての依存関係をインストール。

```bash
# manim の依存関係をインストール
$ brew install py3cairo ffmpeg
# manim をインストール
$ pip3 install manim
```

OS やバージョンによってインストール方法が変わるので他の環境を使っていれば下記を参考にインストールすること。

https://docs.manim.community/en/stable/installation/macos.html

## git-sim のインストール

```bash
$ pip3 install git-sim
```

## git-sim 使い方

ほぼ Git コマンドと同じように使える。

```bash
git-sim log
git-sim branch
git-sim status
などなど
```

より詳細はドキュメントを参照。

https://initialcommit.com/tools/git-sim
PhotonFusionでRebuild Prefab TableをScriptから実行する方法

PhotonFusionではNetworkPrefabRefなどの関係で、Prefabなどを独自のテーブルに保持しています。
たまにそれがおかしくなってしまい、NetworkRunnerのSpwawnで生成する際にエラーが出てしまうことがよくあります。

そんな時はEditorのメニューからFusion/Rebuild Prefab Table を押すことでテーブルを再構築することでエラーを解消することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159111/a4ed81cc-26fb-5c5a-0db1-e755b96c6278.png)


# 本題

これをビルドスクリプトなどで毎回実行するようにしたい。

# 解決法
これを書け
``` build.cs
//using Fusion.Editor が必要
NetworkProjectConfigUtilities.RebuildPrefabTable();
```

# 結果
これでビルド時やEditor拡張で好きなタイミングでRebuild Prefab Tableを行うことができます。
便利だね。
git configで参照しているユーザがコミットしているのにpush時のみ別ユーザになる時は~/.netrcを消せ

# 結論: ~/.netrcにGitHubなどの認証情報が置いてあったりするからそこを消せ
 
# きっかけ

- 会社用アカウントと個人アカウントをディレクトリ別でgitconfigを分けて読み込んでいた
- 会社用アカウントしかしばらく使ってなかった
- 久しぶりに個人アカウントでpushしようとしたら、コミット時は個人アカウントが反映されるのにpush時は会社用アカウントが参照されてしまう

これで2日ぐらい無駄にしました。

## やったこと

### pushするときにユーザ指定

エラーが発生した、そしてそもそもpushするたびにやってたらキリがないのでやめた

### gitconfigの参照ユーザを全部個人アカウントに変える

gitconfigに会社用アカウントが一切ないのになぜか会社用アカウントが参照される

### gitconfigのcredential.helperを消す

効果なし、push時に会社用アカウントが参照される

### usr/local/etc配下のgitconfigとgitconfig.defaultで関係ある内容を消す

絶対これだと思ったのに意味無し、push時に会社用アカウントが参照される

### キーチェーンアクセスからGitHubの認証情報を消す

意味なし、push時に会社用アカウントが参照される
でもパスワード認証が廃止されてるから情報が古かったら消してたほうが良い

## 答え: ~/.netrcの認証情報を消す

なんか過去の自分が入力をサボるために多分置いたんであろうファイルが悪さをしていた、最悪
とりあえず2ユーザ分ける場合はnetrcを使うのはあんまり良くなさそうです。

```vim
  1 machine github.com
  2   login github-username
  3   password hashhashhashhash
```

## git pushしてみる

```zsh
❯ git push
Username for 'https://github.com':
```

これで正しくユーザ名が求められました。ありがとうございました。
この記事を見てくださっている方はあとはもう自分でどうにか出来ると思います。
インプリムで利用しているAzureとは・・・？

 # はじめに
Azureというものを初めて触ることになりまして、今まで調べたこともないため、今更調べてみようと思います。そもそも、クラウドというのも何なのかよくわかっていませんので、私を含めて初心者エンジニアに向けた記事です。

 # Azureとは・・・？
AzureとはITインフラといわれるものをクラウド上で利用できるものです。難しい単語が多い(個人的に・・・)ので細かく噛み下して説明します。

 ### ITインフラとは・・・？
ITインフラとはコンピュータやサーバーなどの機器、OSやデータベース、LANなどのネットワークなどのことを指します。おそらく、今回の解釈では、通常会社に置かなくてはいけないサーバーなどの機械類をさすものかと思われます。

 ### クラウドとは・・・？
クラウドとはITインフラを持たなくても、ネットを通じて、必要な時に必要な分だけ利用する考え方のことです。

 # つまり、Azureとは・・・？
Azureとはサーバーなどの機械類といわれるものをネットを通じて必要な時に必要な分だけ利用できるようにしたものという解釈があっているようでした。そのため、ハードウェアなどの機械類を買いそろえなくても、ネットが使えるのであれば使いたいときに使いたい分だけ利用できます。また、セキュリティも万全なようで、利用者とプロバイダでセキュリティの担当が分かれているようです。そのため、Azureのセキュリティが万全だからと利用者が何もしなくてもよいというわけではなく、利用者もセキュリティ対策をしなくてはいけないということですね。ただいま勉強中なので、詳しくは記載しません。平たく言ってしまうと、ツールが豊富なのに、低予算でいろいろできてしまうというのがAzureなわけですね！今回、私がこの記事で調べたいのはここから先です！

 # 1.スワップとは・・・？
スワップとは簡単に言うとスロットというものを入れ替える(swap)ことのようです。

 ### スロットとは・・・？
スロットというのは開発環境や本番環境などのそれぞれの環境のことを言うようです。

 ### デプロイスロットとは・・・？
デプロイスロットとは開発環境と本番環境というような複数の環境を1つのアプリ内で運用することのようです。

 # つまりスワップとは・・・？
スワップとは開発環境スロットと本番環境スロットを入れ替えることを指すようです。そして、Azureに関してはデプロイスロットという仕組みを使い、1つのアプリ内で複数スロットを運用できるようですね！さらに、このような複数の環境を利用して切り替える手法をブルーグリーン・デプロイメントといいます。

 # ブルーグリーン・デプロイメント
ブルーグリーン・デプロイメントとは現本番環境（ブルー）と新本番環境（グリーン）を、ロードバランサーの接続先を切り替えるなどして新本番環境をリリースする運用方法のことです。この方法の利点としては、システムを停止させて切り替える時間(システムのダウンタイム)を短くできる点です。さらに、新本番環境でエラーなどで問題が生じた場合、すぐに現本番環境に戻すことができるというのも利点の1つです。これらによって、システムの可用性が飛躍的に向上するわけですね！現状の本番環境を変更しない運用方法は「イミュータブル（不変の）インフラストラクチャー」と呼ばれ、ブルーグリーン・デプロイメントはイミュータブルインフラストラクチャーの1つです。

 # 最後に
今回の記事ではAzure全般についての記事ではありませんでしたが、概要を文字に起こしました。さらに、本題であった「スワップ」と「ブルーグリーン・デプロイメント」についても記事にまとめられたので良かったです。今後の業務でこの知識が役に立ってくれると嬉しいです。また、誰かの役立ってくれたらさらにうれしいです。

 # 参考文献

https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2343

https://masavlog.com/engineer/study-it-infrastructure/

https://altus.gmocloud.com/suggest/cloud/

https://xtech.nikkei.com/atcl/nxt/keyword/18/00002/070800077/

https://www.isoroot.jp/blog/3904/


https://www.amazon.co.jp/%E5%85%A8%E4%BD%93%E5%83%8F%E3%81%A8%E7%94%A8%E8%AA%9E%E3%81%8C%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8B-Microsoft-Azure%E5%85%A5%E9%96%80%E3%82%AC%E3%82%A4%E3%83%89-%E5%B1%B1%E7%94%B0-%E8%A3%95%E9%80%B2/dp/4863543689
【rails】日付でのDB検索を行いたい


例)
start_atカラムで開始時間を管理している。
指定した日付に該当するデータを確認したい。

~~~:railsコンソール
search_date = '2021-06-15'
ExamSchedule.where(start_at: search_date.in_time_zone.all_day)
~~~


参考記事
https://tech.pla-cole.co/rails-db-action/
公共座標のデータだけ抽出(登記所備付地図)

1月23日にG空間情報センターにて公開されました。
当日はアクセスが殺到してまともにダウンロードできる状態ではなかったです、
それだけ注目度の高いデータなのかなと思います。

https://www.moj.go.jp/MINJI/minji05_00494.html

https://front.geospatial.jp/

同日にデジタル庁から法務省のxml形式をgeojsonに変換するpythonプログラムも公開されています。

https://www.digital.go.jp/news/4b7250a3-3fcf-4b83-8d52-4bb131e1ba9d/

# とりあえず変換してみた
ほえ～すっごいと思って早速データをダウンロードしてmojxml2geojsonを利用し、
データの変換をかけました。WSLとAnaconda環境、どちらでも変換できました。
自分の場合GDALでこけたのですが、バージョン下げたら無事に変換することができました。
QGISに取り込んでみると…

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/96998b3c-0e62-1b2e-09fc-0a926fb02168.png)
はるか彼方に表示されているであろう筆ポリゴン(見えない)


はっと思ってxmlファイルの中身を確認すると…
任意座標のデータもそのままxmlで公開されているようです。

同梱されているcsvファイルでもどれが公共座標なのかわからないので文字列検索で公共座標のファイルのみを抽出することにしました。

# 公共座標のxmlファイルのみ抽出する
まずG空間情報センターからデータをダウンロード、解凍するとさらに圧縮ファイルがたくさんできます。
これを一括解凍、私は7-zipを使いました。
大量に解凍されたフォルダが作成されます。

この中から公共座標のxmlファイルをコピーしてこようと思います。
まずPowershellでこれらのフォルダがあるディレクトリに移動します。

```
select-string “公共座標” (dir -recurse *.xml)|%{Copy-Item $_.Path ./}
```

そしたら上記のコマンドを実行、現在のディレクトリ以下のサブディレクトリも含めて
xmlファイルの中に公共座標と記載のあるものを現在のディレクトリにコピーしてきます。

あとはmojxml2geojsonを利用してgeojsonに変換をかけます。
xmlファイルがあるフォルダに移動して下記コマンドを実行(WSLでの操作です)。

```
ls -1 *.xml|xargs -I{} mojxml2geojson -e ./{}
```

オプションで-eをつけているのは地番が地図外、別図の筆を除外して出力するためです。
ファイル数が多いとそれなりに時間がかかるのでしばし待ちます。

公共座標のみのデータを抽出して表示することができました。

![「登記所備付地図データ仙台市太白区 」をmojxml2geojsonで変換](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/ab2fcff4-a515-b4d5-06d6-0288e11e34dd.png)
「登記所備付地図データ仙台市太白区 」をmojxml2geojsonで変換  

# 余談

https://www.vector.co.jp/soft/dl/winnt/business/se523305.html

いろいろと調べてみるとExcelのマクロがありました。
解凍したフォルダごと入力すればシェープファイルを作ってくれます。
任意座標と公共座標とでシェープファイルを分けてくれるので大変便利です。
mojxml2geojsonの場合Python環境は必須なので、場合によってはこちらも選択肢としてあると思います。

順次geojsonでも公開されるようなので楽しみです。
その際に任意座標のファイルはどのような形で公開されるのか気になっているところであります。
wiki作成やBacklog課題作成に役立つMarkdown記法　参考リンク


【REDMINE】Markdown で折りたたみを表現する方法
https://qiita.com/tetusan/items/7fb0e3c934b5ff904c88

テキスト整形のルール (Markdown 記法)
https://support-ja.backlog.com/hc/ja/articles/360036145833-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E6%95%B4%E5%BD%A2%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB-Markdown-%E8%A8%98%E6%B3%95-#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB
Javascript (ES5) オブジェクト指向（？） の書き方

# ES5でのオブジェクト指向

ES6以降では、Class構文が書けるようになったのでクラスを用いたプログラミングも簡単にできるようになってきました。
ただ、保守的な開発現場では、まだまだES5の書き方を使っているところもあるようです。

自分用としてES5でのクラスの作成～継承までをメモ

1. 親クラス作成
1. 子クラス作成
1. 継承


### 1. 親クラス　Personを作成
まずは、親クラス（基底クラス）になるオブジェクトを作成


``` javascript:親クラス Person
/**
 * 親クラス
 * Person
 *  
 */
function Person(name, age) {
    this.name = name;
    this.age = age;
    console.log("Construct Person Class!");
};

// Personクラスにプロトタイプメソッドを追加
Person.prototype.greeting = function() {
    alert("Hi!, Im "+this.name +".");
};


// Personクラスインスタンスを生成
var tarou = new Person("tarou", 25);
```

親クラスのコンストラクタには、プロパティを宣言。
プロトタイプメソッド　greetingを追加

※プロトタイプに格納するとインスタンスで共通したメソッドやプロパティを使うことができ、メモリの消費を抑える


### 2. 子クラスの作成

親クラスを作成した後に、継承先となる子クラスを作成

``` javascript:子クラス Enginnerクラス
/**
 * 子クラス
 * Enginner
 * 
 * コンストラクタ
 */
function Enginner(name, age, work, langage) {
    // 親クラスのコンストラクタを結ばせる
    Person.call(this, name, age);　// 重要
    this.work = work;
    this.langage = langage;

    console.log("Construct Enginner Class!");
};
```

call関数は、外部のオブジェクトが持っているメソッドを自身のオブジェクトに結びつかせる関数。


### 3.継承
call関数でも、PersonクラスのコンストラクタをEnginnerクラスに結びつかせてはいるけど、
プロトタイプメソッドたちは結びついていない。
プロトタイプメソッドも子クラスのほうで使いたい（継承ってそういうもんだと思う）

``` javascript: 継承
/**
 * PersonクラスのプロトタイプオブジェクトをEnginnerクラスのプロトタイプオブジェクトにコピーする
 * 
 */
Enginner.prototype = Object.create(Person.prototype, {
    // ただしPersonクラスのコンストラクタの設定は下記のようにする
    constructor: {
        // プロパティを変更（削除や追加）できるように設定
        configurable: true,
        // オブジェクトのプロパティを列挙表示できるように設定
        enumerable: true,
        // プロパティに関連付けられた値を書き換えれるようにする
        writable: true,
        //　プロパティに関連付けられた値を設定（よくわかっていない。）
        value: Person
    }
});


/**
 * 子クラスのプロトタイプメソッド
 */
Enginner.prototype.showMyWork = function() {
    console.log("My Work is "+ this.work + " And I use " + this.langage);
};
```



### 親クラス子クラスが使える
あとは、親クラスと同様に子クラスのインスタンスを生成して使うだけ。

```javascript: 使用
// Personクラスインスタンスを生成
var tarou = new Person("tarou", 25);
// Enginnerクラスインスタンスを生成
var keita = new Enginner("keita", 25, "Enginner", "JavaScript");

tarou.greeting(); // 親クラスのメソッド
keita.greeting(); // 親クラスのメソッド

keita.showMyWork(); // 子クラスのメソッド
```


### まとめ
javascriptのクラス化＋継承をやってみました。
ES5の書き方をしているところ自体あんまりないと思うので、本当に自分用のメモ
vue.jsでシンプルなアコーディオンメニュー(2)

配列にあったら表示、無かったら非表示する
```javascript:index.vue
// Composition API
const showBox = ref([])
const open = (data) => {
  if (showBox.value.includes(data) === false) {
    showBox.value.push(data)
  } else {
    showBox.value = showBox.value.filter(n => n !== data)
  }
}
```
```html:index.vue
<div @click="open('q1')">
    質問
</div>
<div v-if="showBox.includes('q1')">
    答え
</div>
<div @click="open('q2')">
    質問
</div>
<div v-if="showBox.includes('q2')">
    答え
</div>
```
Laravelでアプリを作成してみた【ミニ受注入力システム】

## 環境

① project の表すデータベースを『phpMyAdmin』で作成する。

② コマンドプロントでlaravelプロジェクト　project を作成する

※ project　をc:¥xampp¥laravel デレクトリ下に作成するものとする。

```
composer create-project laravel/laravel <project> --prefer-dist
<プロジェクト名>
cd <プロジェクト名>

//バージョンを確認する

php artisan -v

//開発用のサーバーを立ち上げる

php artisan serve
```

③.envファイルを編集する

```.env
DB_DATABASE=bunbougu_db
```
④ bunbougus の情報を保存する bunbougus テーブルを作成する

```
php artisan make:migration create_bunbougus_table
```
⑤ コードを加えて編集する

```databese/migrations/table.php
{
        Schema::create('bunbougus', function (Blueprint $table) {
            $table->id();
            $table->string("name");
            $table->integer("kakaku");
            $table->integer("bunrui");
            $table->text("shosai");
            $table->timestamps();
        });
    }
```
```
php artisan migrate
```
⑥文房具の分類を識別するテーブル bunruis を作成する(マイグレーションファイルを作成する)
```
php artisan make:migration create_bunruis_table
```
```create_bunruis_table.php
Schema::create('bunruis', function (Blueprint $table) {
            $table->id();
            $table->string("str");　//追加
            $table->timestamps();
        });
```
```
php artisan migrate
```

```
php artisan make:seeder BunruisSeeder
php artisan make:seeder BunbougusSeeder 
```
```seeder/BunruisSeeder.php

 public function down()
    {
        DB::table('bunruis')->insert([
    [
        'create_at' => date('Y-m-d H:i:s'),
        'updated_at' => null,
        'str'=> '鉛筆',
    ],
    [
        'create_at' => date('Y-m-d H:i:s'),
        'updated_at' => null,
        'str'=> 'ボールペン',
    ],
    [
        'create_at' => date('Y-m-d H:i:s'),
        'updated_at' => null,
        'str'=> '消しゴム',
    ],
    
        ]);
    }
};
```
```
php artisan db:seed --class=BunruisSeeder
```

## 参考サイト
[Laravel9でミニ受注入力システムを作成（前編）。文房具マスター一覧表示・登録・編集・削除、まずはWEBアプリを作ってLaravelを学習。基本的なCRUD](https://www.youtube.com/watch?v=rHf-PYfJ2lU)
ChatGPTにコードレビューしてもらったらサンドバッグにされた件

# ChatGPTが良すぎる
最近Twitterやらニュース記事やら、ChatGPTの話題を目にしない日はない。
ちょっと興味があり今回VSCode用プラグインがリリースされたということで使わせて頂きました。

# 感想
神

# とりあえず
色々試したいことはあるが、一旦落ち着いてその辺（デスクトップ）にあ
るコードをレビューしてもらうことにした。
（ChatGPTの開始方法については[こちら](https://zenn.dev/waarrk/articles/a6868cea7549de)を参照）

通称「神の力」と呼ばれる機能（範囲選択 -> 右クリック）を使用し、コードレビューを依頼してみた

##### ChatGPT：Find bugsを選択![Find bugs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424984/3541b514-1ceb-dbff-ed00-9a8e5a406c4d.png)


けちょんけちょんにされました。。。![フルボッコ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424984/b633a74c-37f3-dff7-c37f-30e6b3df9de3.png)


他にもアイデア次第でやれることはたくさんあり可能性の塊でしかない。
しばらくはChatGPTで遊べそうですね。

おしまい
【DVA資格勉強】VPCピアリング接続してみた

## 概要
AWS認定DVA資格勉強時にまとめたものです。
実務でVPCピアリング接続する機会があったので主にその内容です。

## VPCピアリング接続とは
VPCピアリング接続は、プライベート IPを使用して2つのVPC間でトラフィックをルーティングすることを可能にするネットワーク接続です。どちらのVPCのインスタンスも、同じネットワーク内に存在しているかのように、相互に通信できます。別AWSアカウント、リージョンでも接続可能です。

## 手順
### 今回作成するもの
VPC AとVPC Bをピアリング接続します。

![](https://storage.googleapis.com/zenn-user-upload/59b4f8cff028-20230112.png)

### VPCピアリングに必要なもの
別AWSアカウントにVPCピアリングするために必要な情報は以下になります。
|                 |                  | 
| --------------- | ---------------- | 
| AWSアカウントID | xxxxxxxxxxxxxxxx | 
| VPC ID          | vpc-xxxxxxxx | 
| VPC CIDR        | x.x.x.x/x | 
| リージョン        | 東京 | 

### VPCピアリング申請
VPCピアリングに必要なものを相手方と共有しVPCピアリング申請を行っていきます。
申請は簡単で「ピアリング接続するローカルVPCを選択」で自分側のVPCを選択します。「ピアリング接続するもう一方のVPCを選択」で相手方のAWSアカウントIDとVPC IDを入力します。入力後、作成ボタンを押せば申請完了です。

![](https://storage.googleapis.com/zenn-user-upload/eac7627f4ced-20230112.png)

### VPCピアリング申請の承認
申請した相手方のピアリング接続ページで「承諾の保留中」となっているので事前に共有されたVPCであるか確認し承認します。

### ルートテーブルの設定
ルートテーブルで、送信先:ピアリング接続したVPC CIDR、ターゲット:ピアリング接続IDを追加します。

![](https://storage.googleapis.com/zenn-user-upload/19ead5794a45-20230112.png)


### 疎通確認
pingコマンドで疎通の確認をします。
```
ping 172.16.0.0
```

## ありそうなハマりどころ
### 戻りのルーティング設定がされていない
pingが返ってこない時に、ありそうな例として、相手方でルーティング設定がされていないことが挙げられます。相手方に確認しましょう。

### セキュリティグループで許可されていない
インバウンドにICMPが許可されておらず弾かれるケース。ICMPを許可する。

### サブネットの関連付け
ルートテーブルとサブネットが関連付けられていないケース。「サブネットの関連付け」タブから関連付ける。

## 参考資料
* [公式ドキュメント](https://docs.aws.amazon.com/ja_jp/vpc/latest/peering/create-vpc-peering-connection.html)
* [異なるAWSアカウントでのVPCピア接続を試してみた！](https://dev.classmethod.jp/articles/vpc-peering-different-awsaccount/)
二重ハッシュ

- ハッシュから特定の値を取得するときは、その値に対応するキーを指定する必要があります。

```
ハッシュ[取得したい値のキー]
```

- 二重ハッシュから特定の値を取得するときは、取得したい値のキーまで連続して指定する必要があります。

```
ハッシュ[取得したい値のキー][取得したい値のキー]
```

例
```ruby
user_data = [
 {user: {profile: {name: 'George'}}},
 {user: {profile: {name: 'Alice'}}},
 {user: {profile: {name: 'Taro'}}},
]
```
上記、複数のユーザーの情報をハッシュとして持つ変数があります。
全てのユーザーの名前だけが出力されるようにコーディングする場合どうしたら良いか？

模範解答
```ruby
user_data.each do |u|
  puts u[:user][:profile][:name]
end
```
あるいは
```ruby
user_data.each{ |u| puts u.dig(:user, :profile, :name) }
```
【超入門】Kubernetesの自己回復機能を試す

## はじめに
Kubernetesは近年のマイクロサービス化の流れに伴い使用されている技術です。
42Tokyoの課題でKubernetesを学ぶ機会がありました。
当時の自分にはハードルが高かったですが、触れるには良い機会だったと思います。

## 環境
```
XUbuntu 18.04.5
minikube v1.14.2
kubectl v1.18.0
docker v19.03.6
```

## Kubernetes(K8s)とは
Kubernetesとは、コンテナオーケストレーションツールの一つです。
コンテナオーケストレーションとは、複数あるDockerコンテナの管理をする技術です。
図のPodはデプロイできる最小単位のリソースで、１つ以上のコンテナをまとめたものです。
Nodeは1つのVMまたは物理的なマシンを表します。
Clusterはコンテナ化されたアプリケーションを実行するNodeの集合体を表します。

![](https://storage.googleapis.com/zenn-user-upload/c42eeeef0ab5-20230117.png)

## Kubernetesで出来ること
* 複数のDockerホストの管理
* コンテナのスケジューリング
* ローリングアップデート
* スケーリング / オートスケーリング
* コンテナの死活監視
* 障害時のセルフヒーリング(自己回復)
* サービスディスカバリ
* ロードバランシング
* データの管理
* ワークロードの管理
* ログの管理
* Infrastructure as Code
* その他エコシステムとの連携や拡張

## 自己回復機能を試す
#### 準備
ローカル環境でKubernetesクラスタを立ち上げるために[Minikube](https://minikube.sigs.k8s.io/docs/start/)を使いました。

#### マニフェスト
Podの設定はマニフェストに記述します。
`replicas`を設定していることによってPodが死んでも、その数になるようにPodを立て直します。
```
apiVersion: apps/v1
kind: Deployment
metadata:
    name: nginx-deployment
    labels:
        app: nginx
spec:
    replicas: 3                     #レプリカ数。この数だけPodを立てる。
    selector:
        matchLabels:
            app: nginx              #このラベルに一致するPodを立てる
    template:
        metadata:
            name: nginx-pod         #Pod名
            labels:
                app: nginx          #ラベル
        spec:
          containers:
          - name: nginx             #コンテナ名
            image: nginx:latest     #Docker image
```

#### Podを起動させる
```
kubectl apply -f nginx.yaml
```
起動されたPodをダッシュボード上で確認します。
３つのPodが立てられました。
![](https://storage.googleapis.com/zenn-user-upload/26dc62c9862b-20230117.png)

#### Podを削除する
起動しているPodのうちの１つをコマンドで削除し、自己回復機能を試します。
```
kubectl delete pod nginx-deployment-85ddd67557-4pgkd
```

削除後に新しいPodが立てられました。これが自己回復機能です。
今回は試してませんが、Podを同時に削除されても合計３つになるように復活します。
![](https://storage.googleapis.com/zenn-user-upload/6d9789c39114-20230117.gif)

## おまけ
Youtubeにローリングアップデートのデモがあったので共有です。
https://youtu.be/ObA1OEVdrQY

## 参考資料
* [Introduction to Kubernetes](https://cybozu.github.io/introduction-to-kubernetes/introduction-to-kubernetes.html)
* [Kubernetesとは何かを図でわかりやすく解説！Pod、Namespace](https://udemy.benesse.co.jp/development/system/kubernetes.html)
* [今さら人に聞けない Kubernetes とは？](https://qiita.com/MahoTakara/items/85096f8b2632c802ab22)
Vue3で別オリジンからデータを取得する【備忘録】

別オリジンから情報を入手する際に毎度躓くので、取得の仕方の例をここに記そうと思う。

# 環境
- Windows
- Vue3
# 取得方法
vue.config.jsファイルを用いてプロキシの設定をする。
```devServer```の```proxy```にプロキシサーバのurlを設定する。

```javascript:vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:"https://example.com"
  }
})
```

```axios.get(url)```を用いて同一オリジンの変数```url```に指定してあるエンドポイントにリクエストを送り、404エラーが投げられる前にプロキシサーバを経由して、再度変数```url```に指定してあるエンドポイントへリクエストを行い、レスポンスを取得する。

```vuejs:hoge.vue
<script>
import axios from "axios";
export default {
  mounted(){
    const url = "/api"; 
    axios.get(url)
    .then(response => {
        console.log(response.data)
    })
    .catch((error)=>{
        console.log(error);
    })
  }
}
</script>
```

# まとめ
今回は別オリジンからデータを取得するために、vue.config.jsファイルを用いてプロキシの設定を行い、プロキシサーバを経由してデータを得る方法を記した。
始めての投稿でうまく書けていないと思うので、ご指摘等ありましたらよろしくお願いしたい。
Account Engagement(旧Pardot)のメールテンプレートの統計情報がログインユーザによって数値が0になる


# Account Engagement(旧Pardot)のメールテンプレートの統計情報がログインユーザによって数値が0になる

+ [Account Engagement(旧Pardot)のメールテンプレートの統計情報がログインユーザによって数値が0になる](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000JfuKnSAJ)

Pardotの権限回りの問題かなと思ったけど違うみたいです。


# 関連資料

+ [How To Build Your First Email Template in Pardot’s Lightning Email Builder⚡️](https://insights.levdigital.com/blog/how-to-build-your-first-email-template-in-pardot-s-lightning-email-builder)

こんな画面のことだろうか？

[Pardot レポート] > [メール] > [メールのリスト] に移動するか、[メール コンテンツ] からメール レポートに移動し、エンゲージメント データを表示する送信済みメールを選択して移動するなど、従来の Pardot ルートを介してレポートを表示できます。下部の [エンゲージメント指標] に移動するか、上部の [関連] タブをクリックして Pardot レポートにアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/bc655279-9d08-c6a0-7d21-dd1fe3e6e24d.png)

+ [Discrepancies between Pardot Engagement Studio email report and Email Template Report](https://help.salesforce.com/s/articleView?id=000383021&type=1)

Engagement Studio プログラムで使用される電子メール テンプレートのレポートと比較すると、Engagement Studio レポートの数値に不一致が見られる場合があります。
個人的に管理しやすいterraformディレクトリ設計

個人的に管理しやすいterraformのディレクトリを考えてみました。
3レイヤードアーキテクチャとかありますが、最小限の個人的に使ってるディレクトリの構造を紹介します。

### ディレクトリ構造
```terraform
.
├── entrypoint #entry point。基本ここをapplyすればok
│   └── <プロジェクトの名前> #プロジェクトの名前を記述し、必要な環境分ディレクトリを作成する
│       ├── dev
│       │   └── main.tf #環境別にterraform applyする
│       ├── prod
│       │   ├── main.tf
│       │   ├── <credential>.json #credentialはここに置く
│       └── stg
│           └── main.tf
├── modules //各モジュールを配置する
│   ├── aws
│   └── gcp
│       ├── gcr
│       ├── gcs
│       ├── gke
│       ├── networking
│       └── redis
└── readme.md //ドキュメント
```

### entrypoint/<project名>/<環境名>/main.tfの中のtemplate
```terraform
# 環境別の変数を入れる
locals {
  gcp_project = "gcpプロジェクトID"
  env         = "dev"
  project     = "プロジェクト名"
  region      = "asia-northeast1"
  zone        = "asia-northeast1-a"
}

terraform {
  required_providers {
    google = {
      source  = "hashicorp/google"
      version = "4.50.0"
    }
  }
}

provider "google" {
  credentials = file("<credentialを入れる>.json")
  project     = local.gcp_project
  region      = local.region
  zone        = local.zone
}


#####ここからmoduleを呼び出す。
module "networking" {
  source  = "../../../modules/networking" #相対パス注意
  project = local.project
  env     = local.env
}
```

### Terraform Cloudを利用した記事

https://www.sink-capital.com/blogs/terraform_cloud_hello_world/
【SAA資格勉強】Kinesisについて

## 概要
AWS認定SAA資格勉強時にまとめたものです。
Kinesisとは、動画とデータストリームをリアルタイムで容易に収集、処理、分析するサービス。
[公式ドキュメント](https://aws.amazon.com/jp/kinesis/)

## Kinesisの特徴
### Kinesis Video Streams
分析、機械学習等のために、接続されたデバイスからAWSへ動画を簡単かつ安全にストリーミングできる。ビデオストリームデータを収集することに特化したサービス。

![](https://storage.googleapis.com/zenn-user-upload/dc807fa1f372-20230112.png)

#### ユースケース
・監視カメラ等の膨大な量の動画データをリアルタイムで取り込み、Amazon AI Servicesで分析する。

![](https://storage.googleapis.com/zenn-user-upload/1ff0ddb37b6a-20230112.png)

### Kinesis Data Streams
あらゆる規模のデータストリームを簡単にキャプチャ、処理、保存することを可能にするストリーミングデータサービス。

![](https://storage.googleapis.com/zenn-user-upload/9f44789715c6-20230112.png)

####  特徴
・一連のデータレコードを持つシャードのセットであり、各データレコードには Kinesis Data Streams によって割り当てられたシーケンス番号があるため、 メッセージが失われず、重複されず、到着と同じ順序で伝送することが可能([公式ドキュメント](https://docs.aws.amazon.com/streams/latest/dev/key-concepts.html))
・デフォルトで24時間データを保持する。(最大365日)

#### ユースケース
・IoTデバイスから生成される継続的なストリーミングデータを収集する。
・クリックストリームデータなどの高頻度のイベントデータ用のアプリケーションを構築し、数秒でインサイトにアクセスできるようにする。


### Kinesis Data Firehose
リアルタイムのストリーミングデータをS3やRedShift、Elasticsearchなどのデータストア、分析ツールに配信できるサービス。

![](https://storage.googleapis.com/zenn-user-upload/19e4eb57d69a-20230112.png)

#### ユースケース
・複数のWebサイトから収集したストリームデータを、リアルタイムにAmazon Redshiftへ転送する。


### Kinesis Data Analytics
ストリーミングデータを標準的なSQLクエリでリアルタイムに分析できるサービス。

![](https://storage.googleapis.com/zenn-user-upload/0283ec4621f5-20230112.png)


#### ユースケース
・ストリーミングソーシャルメディアデータの分析 
 
 ![](https://storage.googleapis.com/zenn-user-upload/001bbaaf3d2f-20230112.png)

### StreamsとFirehoseの違い
・Streamsの方が速い
・Firehoseの方が設定が少ない
参考: [Amazon Kinesis StreamsとAmazon Kinesis Firehoseは何が違うのか](https://dev.classmethod.jp/articles/difference-between-kinesis-streams-and-kinesis-firehose/)

### 例題
[無料WEB問題集＆徹底解説 問2](https://aws-exam.net/saa/saa_q.php?q_id=30&q_num=2&service=Kinesis)
[無料WEB問題集＆徹底解説 問8](https://aws-exam.net/saa/saa_q.php?q_id=117&q_num=8&service=Kinesis)
[無料WEB問題集＆徹底解説 問9](https://aws-exam.net/saa/saa_q.php?q_id=117&q_num=9&service=Kinesis)
[無料WEB問題集＆徹底解説 問11](https://aws-exam.net/saa/saa_q.php?q_id=135&q_num=11&service=Kinesis)
DartでもTableDrivenTests

# はじめに
Unitテストを書くとき、いろいろなテストケースで書く場合テストコードが煩雑になりがちなことがあるかと思います。

例えば、ログイン状態だとある値を返すけど、非ログイン状態だとnullで返すメソッドのテストをするときや、朝昼夜など時間帯によって結果が変わるようなメソッドの場合など様々なケースでテストを書きたいときはよくあります。

そのときに役立つのがGolangの界隈にある[TableDrivenTests](https://github.com/golang/go/wiki/TableDrivenTests)です。

TableDrivenTestsとは、テストケースをテーブル状に宣言しておいて、あとはそのテストケースを順番にテストコードのパラメータとして流すだけで、可読性も高く網羅的に比較的簡単にテストをかけるようにする手法です。

# やっていき
言葉だとイマイチわからないと思うので、実際に紹介していきます。

## 用意するもの
google.devが公開している[tuple](https://pub.dev/packages/tuple)というpackageを使います。
その名の通りTupleのデータ構造を定義できるようになります。

## 書いてみる
今回はTableDrivenTestsの紹介なので、テストの内容は適当です。
ログイン済みかどうかの `isAuthenticated`がtrueかfalseかで挙動が変わる`int? sample()`のテスト書きたいとします。

`tuple` packageを使ってるので、`Tuple`型を使えます。 `Tuple7`まで対応しているようです。
今回は`Tuple2`を使って、`item1`にログイン済みかどうかのboolと`item2`に期待しているmatcherを格納しています。

```dart
void main() {
  // テストケースのテーブル定義
  final testCases = [
    Tuple2(true, 1),
    Tuple2(false, null),
  ];

  // テストケースを順番に実行
  for (final testCase in testCases) {
    test('authenticated is ${testCase.item1}', () {
      expect(sample(testCase.item1), testCase.item2);
    });
  }
}

// サンプル用のメソッド
int? sample(bool isAuthenticated) {
  return isAuthenticated ? 1 : null;
}
```

今回は純粋にboolによる挙動のみのテストをサンプルに書きましたが、複数のboolで挙動が変わるテストも`Tuple3`を使ってテーブルのパラメータを増やせばかけますし、enumで挙動が変わるものなども可読性高くかけそうです。

どんなテストケースに対応しているかも、テーブル定義を見れば一覧で見れるので、メンテナンス性も高いと感じています。

# Dartの今後
今回は、`tuple`というpackageを使ってTableDrivenTestsを実現しましたが、この機能がDartの言語機能として検討されています。
https://github.com/dart-lang/language/issues/68

そのうちpackageに頼らなくても良くなるかもしれません。

# おわりに
複雑なコードのUnitテスト書きたい場合、既存で複雑なテストケースによって煩雑なテストコードになっている場合、ぜひTableDrivenTestsを検討してみてください。
Tkinterのスクロールバー(ttk.Scrollbar)が上下しない場合の対処法

## 問題
Tkinterの`ttk.Scrollbar`でテキストボックスにスクロールバーを設置したところ、ドラッグしても上下しませんでした。

### スクロールバーが機能しない様子
![scroll_ng.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115387/2dc5492e-d53b-ea6e-80a8-2266d83a84c2.gif)

### 元のコード
```python
from tkinter import *
from tkinter import ttk

root = Tk()
style = ttk.Style()

frame1 = ttk.Frame(root, padding=10)
frame1.grid()

txt = Text(frame1, height=12, width=85)
txt.grid(row=1, column=0)

scrollbar = ttk.Scrollbar(
    frame1,
    orient=VERTICAL,
    command=txt.yview)
txt["yscrollcommand"] = scrollbar.set
scrollbar.grid(row=1, column=1)

root.mainloop()
```

## 解決法
下部の`scrollbar.grid`にstickyオプションを付与。

`scrollbar.grid(row=1, column=1, sticky=(N, S))`

![scroll_ok.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115387/6fd05155-ca74-ad60-2518-dd55a23ac0f8.gif)
ruby on railsでapi作る覚書


## プロジェクト作成
-apiオプションで、apiモードと呼ばれるファイル群で構成してくれる（不要なものは削いでくれる）

```
rails new sample-api --api
```

## モデル作成
データスキーマのこと
ここで定義したものがDBに反映することになる

```
rails g model Movie name:string category:string description:string year:integer
```

スキーマ作成
db/migrate/の中にできているスクリプトが実行される

```
rails db:migrate
```

## 初期データ登録


```db/seeds.rb
movies = [
  ["cube", "cube", "in the cube", 2000],
  ["saw", "bathroom", "jigsaw", 2004],
]

movies.each do |movie|
  Movie.create(name: name, category: category, description: description, year: year)
end
```

流し込む

```
rails db:seed
```

Railsコンソールでデータ流し込めているか確認

```
rails c --sandbox
```

```
3.1.2 :001 > Movie.all
  TRANSACTION (0.0ms)  begin transaction
  Movie Load (0.1ms)  SELECT "movies".* FROM "movies"
 =>
[#<Movie:0x00007f185000dd30
  id: 1,
  name: "cube",
  category: "cube",
  description: "in the cube",
  year: 2000,
  created_at: Wed, 25 Jan 2023 03:47:26.029657000 UTC +00:00,
  updated_at: Wed, 25 Jan 2023 03:47:26.029657000 UTC +00:00>,
 #<Movie:0x00007f184bc32f48
  id: 2,
  name: "saw",
  category: "bathroom",
  description: "jigsaw",
  year: 2004,
  created_at: Wed, 25 Jan 2023 03:47:26.034091000 UTC +00:00,
  updated_at: Wed, 25 Jan 2023 03:47:26.034091000 UTC +00:00>]
3.1.2 :002 >
```

## ルーティング作成
uriパスを定義してあげる

```config/routes.rb
Rails.application.routes.draw do
  resources :movies, only: :index
end
```

## コントローラ作成

```
rails g controller Movies
```
/moviesに来た時に返却するレスポンスを定義する

```controllers/controller/movies_controller.rb
class MoviesController < ApplicationController
  def index
    movies = Movie.all
    render status: 200, json: { movies: movies }
  end
end
```

アクセスして確認

```
curl localhost:3000/movies
```

ちゃんと取れている

```json
{"movies":[{"id":1,"name":"cube","category":"cube","description":"in the cube","year":2000,"created_at":"2023-01-25T03:47:26.029Z","updated_at":"2023-01-25T03:47:26.029Z"},{"id":2,"name":"saw","category":"bathroom","description":"jigsaw","year":2004,"created_at":"2023-01-25T03:47:26.034Z","updated_at":"2023-01-25T03:47:26.034Z"}]}⏎
```