OmniAICreator/Qiita-1.07M huggingface dataset:
【React】ViteでPWA対応させたWebサイトを作成する

# はじめに
PWAを使用する事でWebアプリをネイティブアプリのように振る舞わさせることができます。
本記事では、React、Viteを使用してPWA対応のサイトを作成してみます。


# PWAとは？
プログレッシブウェブアプリ (PWA)を利用する事でホーム画面のアイコンを追加し、Webアプリをネイティブアプリのように起動できます。以下のような点が便利です。
- アドレスバーを消したフルスクリーン表示、プッシュ通知を行うことができる点
- アプリストアを介さずにWebアプリをネイティブアプリのように提供できる点
- クロスプラットフォームに提供できる点

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames#%E3%83%97%E3%83%AD%E3%82%B0%E3%83%AC%E3%83%83%E3%82%B7%E3%83%96%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A8%E3%81%AF


# 環境
- react： 18.3.1
- vite： 5.3.1
- vite-plugin-pwa：0.20

# Viteのプラグインをインストール

vite-plugin-pwa をインストールします。

```
npm install -D vite-plugin-pwa
```

https://vite-pwa-org.netlify.app/guide/

# Viteの設定にPWAプラグインを追加
VitePWAの設定をvite.configに追加します。`registerType` とすることでブラウザがアプリの更新を検知し、キャッシュの更新とリロードを自動で行ってくれます。
publicフォルダ内に `assets`フォルダを作成し192x192と512x512サイズの画像を配置。

```ts:vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
  react(),
  VitePWA({
    registerType: 'autoUpdate',
    includeAssets: ['assets/favicon.ico'],
    manifest: {
      name: 'PWA Hoge App',
      short_name: 'App Name',
      description: 'test app',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'assets/192_sample_img.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: 'assets/512_sample_img.png',
          sizes: '512x512',
          type: 'image/png'
        }
      ]
    }
  })
  ]
});
```


# 実行結果
今回はvercelにデプロイしてみました。
iphoneの実機で確認すると、アドレスバーのなくフルスクリーンで表示されている事を確認。

![IMG_3635.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/f37e480c-3f76-25a1-b85c-d703084fe5b5.jpeg)


# 参考

https://vite-pwa-org.netlify.app/guide/auto-update

https://zenn.dev/yoshihiro_tada/articles/9c245bccde260c

https://zenn.dev/dev_commune/articles/3b3134406e1fd1
Render.comにchromaDBと使ったプロダクトをデプロイするときにError: Your system has an unsupported version of sqlite3. Chroma requires sqlite3 >= 3.35.0と出る

## 背景
langchainとFastAPIを使ったアプリを作成し、Dockerでデプロイしようとしたときにエラーが出た。

## エラー本文
Render.comに作ったアプリをデプロイするとこんなエラーが出た。
```
Error: Your system has an unsupported version of sqlite3. Chroma requires sqlite3 >= 3.35.0
```
どうやらChromadbにはsqlite3のバージョンが3.35.0以上のものが必要らしい。
調べてみるとRenderで使えるsqliteのバージョンは3.27.2らしい。
こりゃ古くてエラー出るわけだ。


## 解決策
sqliteのバージョンが古いならchromadbのバージョンを下げればいいじゃない。
ということで、sqliteのバージョンが3.27.2で使えるchromadbのバージョンを探す。
と、こんな質問板が海外にあった。
https://community.render.com/t/your-system-has-an-unsupported-version-of-sqlite3-chroma-requires-sqlite3-3-35-0/13807/4
chromadbは0.3.29のものをインストールする。
```
$ pip install "chromadb==0.3.29"
```
pydanticのバージョンも下げないといけないのでfastAPIもバージョンを下げる。
```
$ pip install "fastapi==0.85.1"
```
これでデプロイしようとしたら次はこんなエラーが出てきた。
くそ長いので重要そうなところだけ書いておく。
```
#10 17.30 Building wheels for collected packages: hnswlib, PyPika
#10 17.30   Building wheel for hnswlib (pyproject.toml): started
#10 17.62   Building wheel for hnswlib (pyproject.toml): finished with status 'error'
#10 17.63   error: subprocess-exited-with-error
#10 17.63   
#10 17.63   × Building wheel for hnswlib (pyproject.toml) did not run successfully.
#10 17.63   │ exit code: 1
#10 17.63   ╰─> [60 lines of output]
#10 17.63       running bdist_wheel
#10 17.63       running build
#10 17.63       running build_ext
#10 17.63       creating tmp
#10 17.63       gcc -pthread -Wsign-compare -DNDEBUG -g -fwrapv -O3 -Wall -fPIC -I/usr/local/include/python3.11 -c /tmp/tmpl3bnonxs.cpp -o tmp/tmpl3bnonxs.o -std=c++14
・
・
(省略)
・
・
#10 17.63       RuntimeError: Unsupported compiler -- at least C++11 support is needed!
#10 17.63       [end of output]
#10 17.63   
#10 17.63   note: This error originates from a subprocess, and is likely not a problem with pip.
#10 17.63   ERROR: Failed building wheel for hnswlib
#10 17.63   Building wheel for PyPika (pyproject.toml): started
#10 17.80   Building wheel for PyPika (pyproject.toml): finished with status 'done'
```
どうもchromadbに使うであろうhnswlibのビルドにC++11以上をサポートするgccが必要らしい。
今回筆者はdockerを使っていたのでdockerfileに追記する
```
# Pythonのベースイメージを作成
FROM python:3.11.3-slim

# 必要なパッケージとGCCをインストール
RUN apt-get update && \
    apt-get install -y --no-install-recommends gcc g++ && \
    rm -rf /var/lib/apt/lists/*

# 作業ディレクトリを指定
WORKDIR /app

# 依存関係ファイルをコピー
COPY requirements.txt .

# 依存関係をインストール
RUN pip install --upgrade pip && \
    pip install --no-cache-dir -r requirements.txt

# アプリケーションファイルのコピー
COPY . .

# Uvicornを使用してアプリケーションを実行
CMD sh -c "uvicorn app.main:app --host 0.0.0.0 --port ${PORT:-8080}"
```
ここまでやったところで筆者は正常にデプロイできた
やったね

## 余談
もしかしたらDockerとかのコンテナをうまく使えばライブラリのバージョンを下げたりとかいうめんどくさいことなんかしなくていいのかもしれない。
https://community.render.com/t/any-chance-of-choosing-or-upgrading-the-sqlite3-version/17282

この記事書いてるときに
**「gccインストールできるならsqliteも新しいバージョンインストールするようにdockerfileを書き換えればよかったんじゃないか」**
なんて思ったのは秘密の話。
筆者はDocker触って3日のペーペーなのでよくわかりませんでした。
もしわかる最強のつよつよエンジニアの方いらっしゃったら連絡ください泣いて喜びます。
コミットテンプレートをGUI使おうとしたがやはりCLIからやるのが一番いい

[gitmoji](https://gitmoji.dev/)を参考にcommit templateを作りましたがCLIで使うのが一番いいという結論に落ち着きました。

## GitHub Desktopの場合

GitHub Desktopではコミットテンプレートを使うことができません。

いつになったらできるのでしょう

https://github.com/desktop/desktop/issues/8698

## Sourcetree

Sourcetreeも対応していません。
メンテナも対応する気がないのと使用している人も少ないようです。

https://jira.atlassian.com/browse/SRCTREE-5947

## 結論

おとなしくgitクライアントをそのまま使いましょう
Avroの中身をサクッと確認したい

[## Apache Avroとは

システム間でデータをやりとりすることを目的としてデータをシリアライズするフォーマットです。  
以下のような特徴があります。  

- ネストした構造を定義できるなど、スキーマの柔軟性が高いです
- バイナリでエンコーディングされます[^1]
- 行志向です
- 圧縮をサポートしています

[^1]: デバッグを目的としたJSONでのエンコーディングもサポートされているとのこと

Apache Icebergのメタデータの一部がAvroファイルで出力されるため、その内容をサクッと確認する方法を調べてみました。  

## Apache Avroの仕様

Apache AvroのWebサイトで確認できます。  

https://avro.apache.org/docs/

https://avro.apache.org/docs/1.11.1/specification/

## 方法1：Avroを表示するWebサービスを利用する

いくつか存在するようです。  
ググって出てくるものだと、[TablepadのAvro Viewer](https://tablepad.io/viewer/avro)が使いやすかったです。  

## 方法2：Visual Studio CodeのAvro Viewer拡張機能を利用する

Visual Studio Marketplaceで公開されています。  

https://marketplace.visualstudio.com/items?itemName=yasunari89.avro-viewer

こちらについては残念ながら私の見たいAvroファイルを開くことができませんでした。  
ソースコードなどが公開されているので、必要に応じて修正してみてもいいかもしれません。  

## 方法3：Pythonで読み込む

こちらの方法が意外と簡単でした。  
Avroファイルを書き込むときはスキーマが必須ですが、読み込むときはなくても読み込めるようです。  
また、Avroファイルのメタ情報```avro.schema```にスキーマが保存されているので、それを読めばスキーマを取得することも可能です。  

```py:read_avro.py
import avro.io
import avro.datafile
import pprint
import json

filename = "1718983580864000000-gwKYQzQ4AzUgJGvoqZOlmg.avro"

# ファイルをバイナリモードで読み込む
with open(filename, "rb") as f:
    # リーダーを作成
    reader = avro.datafile.DataFileReader(f, avro.io.DatumReader())

    # データを取得。dict型で取得できる
    for data in reader:
        pprint.pprint(data)

    # スキーマを取得
    schema_str = reader.meta['avro.schema']
    schema_json = json.loads(schema_str)
    pprint.pprint(schema_json)
```
Go言語によるPDFからテーブル情報を抽出するCLIアプリの制作で詰まったこと

:::note info
この記事は制作途中です．
随時コードブロックなどを追加して見やすくしていきます．
:::

# 概要
大学の奨学金一覧のPDFをスクレイピングで取り込んで，それを適切に処理して欲しいデータだけを抽出したいという思いでCLIアプリの制作を始めたが，色々詰まったので備忘録として残しておきます．
成果物（途中） -> https://github.com/Acu4git/pdfxtractor

# 当初の構想
* Go言語のみで実装したい（個人的に重要）
* 奨学金一覧のPDFが掲載されている場所は固定されており，PDFファイル名は決まったフォーマットに従っているため，スクレイピングライブラリと正規表現を用いることで取得できそう
* PDFからの表データの抽出は，PDFからテキストを抽出できるライブラリがあればいけそう
* ついでにCSV変換が出来れば嬉しい
* 後は構造体にマッピングして，処理を加えればいけそう

スクレイピングは問題なく成功し，GoのPDFライブラリによるCSV変換も無事できたため，幸先が良い．．．かのように思えた

# 突如PDFライブラリがエラーを吐く
使用していたのはunipdf (https://github.com/unidoc/unipdf) で，最初はCSV変換まで問題なくいけた．しかし，ある日から以下のようなエラーがでた．
```bash
Error: NewPdfReaderLazy failed. "sample.pdf" err=ciphertext too short
exit status 1
```
NewPdfReaderLazy関数でエラーが出てるようだが，どうも様子がおかしい．Chat-GPTにて質問を投げかけたところ以下のような解答が得られた．
1. PDFファイルが壊れている
2. PDFファイルが暗号化されている
3. ライブラリのバグや制限
4. ファイルパスが間違っている

1に関しては問題なくPDFが読めるし，2に関してはそもそも暗号化を施していない．4に関しても勿論問題ない．また，回数制限には達していない．そのため，3のライブラリ側のバグが原因の可能性がある．unipdfは一応有償のライブラリなのだが，回数制限付きで無償利用ができる．そのため，このライブラリに拘らなくても他に解決策があればそちらを使う方が利用面でも経済面においても安心できるのではないかと思い，一先ず手放すことにした．

# 代替ライブラリの限界
Go言語には他にもPDF用のライブラリがあるが，テキスト抽出が可能なライブラリの数に限りがあり，1つ1つ神頼みしながら利用しなければならない．（つよつよエンジニアならPDFのフォーマットを解読して自作ライブラリを作ってしまうのかもしれないが）
代替案として挙げられたのが，pdfcpu (https://github.com/pdfcpu/pdfcpu) やledongthuc (https://github.com/ledongthuc/pdf) である．


pdfcpuはGoのPDF用ライブラリではそこそこ有名らしく機能も充実してそうだった．しかし，テキストの抽出の仕方が分からなず断念した．（海外のユーザーも同じことに詰まっていたが未解決のままだった）

ledongthucはテキストの抽出は問題なくできたが，テキストの間に余分な空白があったり，区切り位置がバラバラであったためパースをするのが限りなく困難に近くて挫折．

# OCRでの試み
私は大事なことを忘れていた．
「PDFからの抽出が困難なら，画像にしてOCRを通して抽出すればええやんけ！」
すかさず行動に移し，gosseractによるOCRによる抽出を試みた！
　
　

　
　
　



  　 　　　
失敗した．
日本語のPDFとの相性が悪かったのか，余白と途中改行の嵐でとてもパースできたものではなかった．

# 悩んだ末
Go言語は比較的新しい言語であるため，PythonやJavascriptなどの言語に比べると情報やライブラリが少ない．そこで，PDFからの抽出部分は他の言語でやってみることにした．ライブラリによって抽出の精度が変わるらしく，それが解決できるかもしれないと思った．

# Pythonによる抽出
「ライブラリの宝石箱や～（by 某摩呂）」と言わんばかりにライブラリに恵まれたPythonを使うことにした．ライブラリもそれなりに候補が見つかり，pdfplumberを使用した．

すると普通に成功した．今までの血の滲む努力により達成できなかったものが，ぽっと出のキャラに翻弄されるが如く解決できてしまった．

# ほぼ完成へ
その後のCSVからのマッピングはGo言語で問題なく行うことができ，無事形にはなった．ここから色々機能を追加していくつもり．

# 課題
もともとはGo言語のみで実装する予定であったが，Pythonも使用することになった．そのため，このCLIアプリの起動にはGoとPythonの2つの実行環境が必要になってしまい，利用者のハードルが少し上がる．これを解決するために，Pythonで統一するか，Web上で公開することが候補にある．

今回はGo言語でのアプリ制作の練習も踏まえての実装であったため，途中までGoに拘っていたが，技術選定はもっと柔軟に行うべきだなぁと実感した．
Cloudflare R2のオブジェクトを直接インターネットに公開してみる（r2.devのサブドメイン使用 本番環境非推奨）

## 概要

R2のオブジェクト（htmlファイル）を直接インターネットに公開し、ブラウザからアクセスしてみる。

## 前提

下記のindex.htmlをアップロードして公開してみる。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1>Hello Cloudflare R2</h1>
</body>
</html>
```

## 注意

本設定を施すとインターネットにつながっている全世界の全端末からアップロードするオブジェクトが閲覧されることになる。
さらには一部機能が制限される。そのため本番運用では本方法は使わないことが推奨される。

## 方法

1. 公開用バケット（筆者の場合バケット名は「public-r2-dev」）を追加
    - 位置情報： 自動
    - デフォルトのストレージ クラス： Standard
1. バケットの詳細画面で「設定タブ」を開き下部の「r2.dev サブドメイン」の「アクセスを許可」をクリック

    ![CleanShot 2024-06-29 at 00.56.15@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/feaf3ebf-c494-16b1-3b0c-1a1d44358837.png)

    ![CleanShot 2024-06-29 at 01.06.42@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/78504187-7ad9-e32e-8e15-605a21467fb6.png)

1. ドラックアンドドロップでindex.htmlをバケットにアップロード
1. アップロードしたオブジェクトの詳細を開き、URLをコピー

    ![CleanShot 2024-06-29 at 01.10.20@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/1c65b463-382a-b409-e82b-9088dd49f931.png)

1. コピーしたURLをブラウザに貼り付けて、下記のようなページが表示されれば完了

    ![CleanShot 2024-06-29 at 01.11.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/52c3a648-a8e2-d78b-bdb9-21565a2d4e1f.png)

1. 大した事ないファイルだが、世界中からアクセスできることは避けたいので本体験が終わったらバケットのr2.dev サブドメインの公開設定を「アクセスを許可しない」ボタンをクリックして公開しないように設定




## 参考文献

https://developers.cloudflare.com/r2/buckets/public-buckets/
簡単なPythonのC++コード生成ツール #2

## code-generationの利用

Pythonパッケージ[code-generation](https://pypi.org/project/code-generation/)について解説しています。前記事は以下です。

https://qiita.com/joule/items/e579c83f839204284ddd

前回の記事では具体的な用途を書けていませんでした。
このツールの利点は、あるルールに従ってコードを多数生成できることだと思います。例えば、以下のケースでは役立つことがありそうです。

- テストコード作成
- 実行時のコード生成
- ランダムなコード生成

### テストコード生成

実装が一部異なる関数は簡単に作成できるため、テストケースを水増しできます。

```python
from code_generation import code_generator
from code_generation.cpp_function import CppFunction

cpp = code_generator.CppFile("example.cpp")

# テスト対象に与える引数、戻り値の解
factorial_arguments, factorial_answers = \
  ["-5", "-1", "2", "3", "8"], ["1", "1", "2", "6", "40320"]

for arg, ans in zip(factorial_arguments, factorial_answers):
  def testBody(self, cpp):
    cpp("EXPECT_EQ(" + ans + ", Factorial(" + arg + "));")
  
  factorial_function = CppFunction(name="Test",
                                   ret_type="",
                                   implementation_handle=testBody)
  factorial_function.add_argument("IntegerFunctionTest, Factorial")
  factorial_function.render_to_string(cpp)
  cpp.newline()
```
↓
```cpp
 Test(IntegerFunctionTest, Factorial)
{
	EXPECT_EQ(1, Factorial(-5));
}

 Test(IntegerFunctionTest, Factorial)
{
	EXPECT_EQ(1, Factorial(-1));
}

 Test(IntegerFunctionTest, Factorial)
{
	EXPECT_EQ(2, Factorial(2));
}

 Test(IntegerFunctionTest, Factorial)
{
	EXPECT_EQ(6, Factorial(3));
}

 Test(IntegerFunctionTest, Factorial)
{
	EXPECT_EQ(40320, Factorial(8));
}

```

### 実行時のコード生成

用途は特に限られると思いますが、実行時にコードが作られるのを利点と考えることもできます。

```python
from code_generation import code_generator
import datetime

cpp = code_generator.CppFile("example.cpp")

JST = datetime.timezone(datetime.timedelta(hours=9), "JST")
now = datetime.datetime.now(JST)

cpp("// Generated at " + now.strftime('%Y/%m/%d %H:%M:%S'))
```
↓
```cpp
// Generated at 2024/06/29 00:01:00
```

### ランダムなコード生成

規則的またはランダムなコードを作りたい時には、簡単に作成できます。

```python
from code_generation import code_generator
from code_generation.cpp_function import CppFunction
import random

# 10個ファイルを作成
for i in range(10):
  cpp = code_generator.CppFile("code_"+str(i)+".cpp")

  def funcBody(self, cpp):
    cpp("double tmp = 0;")
    with cpp.block("for(int i=0; i<n; ++i)", ""):
      for _loop in range(random.choice(range(1,5))):
        # この処理は1~5回繰り返す、演算は"*/+-"からランダムに選ぶ
        cpp("tmp += a[i] " + random.choice("*/+-") + " b[i];")
      cpp("c[i] = tmp;")
  
  factorial_function = CppFunction(name="f",
                                   ret_type="void",
                                   implementation_handle=funcBody)
  factorial_function.add_argument("const double* a, const double* b, double* c, int n")
  factorial_function.render_to_string(cpp)
```
↓（以下のようなコードが10個生成される）
```cpp
void f(const double* a, const double* b, double* c, int n)
{
    double tmp = 0;
	for(int i=0; i<n; ++i)
	{
		tmp += a[i] - b[i];
		tmp += a[i] * b[i];
		tmp += a[i] + b[i];
		tmp += a[i] - b[i];
		c[i] = tmp;
	}
}
```
EC2のパブリックIPが変わった時にRoute53にすること(一応確認)

前回、Route 53 + お名前.comを使うことで、インターネット経由でAWSのリソースに対して独自ドメインを使ってアクセスすることが出来る環境を構築しました。

https://qiita.com/ohtsuka-shota/items/af39a7c40c61ec13c5cd

この環境ではEC2にEIPを設定していない為、EC2の停止→起動が走るタイミングでパブリックIPが変わってしまいます。
以下のスクショはパブリックIPが変わったことを示す図です。EC2停止前は"35.76.125.147"というIPアドレスでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/27ebb65a-409d-6432-5f30-a6118c6ec332.png)

パブリックIPが変わった後にRoute 53のAレコードの修正をしないまま、例えばWebブラウジングを試みると、以下のようにアクセスできないことがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/7c9f0186-b07d-446a-a81c-ce9c0f307c00.png)
pingコマンドを使って疎通確認もしてみます。見事に前のパブリックIPに対して疎通を取りに行こうとしていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/4e906249-6a84-3715-3312-4cebf3b318ae.png)

EIPを使用していない環境で、EC2の停止→起動を行う場合、Route 53のAレコードに登録されているIPアドレスを変わった後のものに変更しましょう。（当たり前ですが。。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/e4f3e767-dbff-2c2b-a8d9-b53f22f9ed7b.png)

名前解決の結果が修正後のものになっているかを確認してみます。まずはpingです。疎通確認をする前に、flushdnsを実施して名前解決に関わるキャッシュをクリアします。
結果、AレコードのIPアドレスに対して疎通確認をしていることがわかりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/79d88182-fa70-7481-e226-ee3656257c73.png)
Webブラウジングに関しても3,4分待機すれば自動で名前解決が成功し、以前指定したindex.htmlの内容が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/794a9694-5c85-191a-af42-5afbd9027bfc.png)
GitHub Copilotでコミットメッセージのスタイルを変えようとしてもできない


コミットメッセージにgitmojiを必ず使ってほしいということがあったのでやり方を調べてたら以下のissueに当たりました。

https://github.com/microsoft/vscode-copilot-release/issues/526

恐ろしいほどのリアクションがついています。

当のissueの内容はこうです。

> I love the new auto generated commit message feature in the VSCode 1.84 release that's just come out.
> 
> What I would love to see to make it even better is the ability to customize the style of commit message, for example conventional commits: ci: added yaml build definition or feat: added test controller etc.
> 
> Some of our projects at work require conventional commits for example, and given that the underlying tech is just based on prompts I can imagine this being pretty easy to add with a prompt tweak.
> 
> It would be even more amazing if you could give it any style by having the option for a custom pre-prompt e.g. "Use conventional commit styling" or "Use relevant emojis at the start of the message".
> 
> A suggestion by @digitarald also is that VSCode could be aware of previous commit messages and copy their style too which I think is also a great idea.
> 
> Thank you!



> 先日リリースされたVSCode 1.84の新しいコミットメッセージ自動生成機能が気に入っています。
> 
> より良いものにするためにぜひ欲しいのは、コミットメッセージのスタイルをカスタマイズできる機能です。
コミットメッセージのスタイルをカスタマイズできることです。
例えば、ci: yamlのビルド定義を追加しましたとか、feat: テストコントローラを追加しましたとか。
> 
> 私たちの仕事では、従来のコミットが必要なプロジェクトもあります。
を必要とするプロジェクトがあります。
>  プロンプトを微調整するだけで、かなり簡単に追加できると想像できる。
> 
> プロンプトに手を加えるだけで、このようなことが簡単にできると想像できます。
> カスタムプリプロンプトのオプションがあれば、さらに素晴らしいだろう。
> 従来のコミットスタイルを使用する"、"メッセージの冒頭に関連する絵文字を使用する
> 
> また、@digitaraldの提案によると、VSCodeは以前のコミットメッセージを認識して、そのスタイルをコピーすることができるそうです。
> 
> ありがとうございます！

VSCodeのチームはこの問題を認識しているようですが、実装できるのはいつになるか
M5Unified・LovyanGFXでspriteを鏡像反転するには

# 経緯
M5Stackで車のHUDを作ってみたいと思い、画面を鏡像反転させようとして、画面バッファに使っているspriteを反転させる方法がわからず調べ回ったので、メモです。

M5Toughで確認。

```cpp
canvas.createSprite(M5.Display.width(), M5.Display.height());
// ～描画～
canvas.pushSprite(&M5.Display, 0, 0); //画面に反映
```

の場合において、pushSpriteをpushAffineに以下のように置き換える。

```cpp
    // X倍率, 横傾, X座標, 縦傾, 縦倍率, Y座標
    //float matrix[6] = {1.0, 0.0,0.0, 0.0, 1.0, 0.0}; //正像
    //float matrix[6] = {1.0, 0.0,0.0, 0.0, -1.0, M5.Display.height()}; //垂直鏡像
    float matrix[6] = {-1.0, 0.0,M5.Display.width(), 0.0, 1.0, 0.0}; //水平鏡像
    canvas.pushAffine(&M5.Display,matrix);
```

# 参考資料

https://lang-ship.com/blog/work/lovyangfx-6-sprite-base/

https://imagingsolution.net/imaging/affine-transformation/
【UE5】今さらUnrealC++でブレークポイントを置いてみる　3日目

# 0.最初
UnrealEngine5とVisialStudioでBreakPointを使用する方法を書きます

UE5.32
VisialStudio2022

# 1.手順
0.エディタを閉じる
1.「Unreal Engine Project File」を右クリック「Generate Visial Studio Projct File」をクリックで.slnファイルを生成「Visial Studio」を開く
3.「Solution Configurations」を「DebugGameEditor」に変更
4.「Solution Explorer」の「Gamesフォルダ」から「自分のプロジェクト名」を探す
5.「プロジェクト」から「Set as Start Project」をクリック
7.画面上部の「Debug」タブから「StartDebugging」または「F5」でエディタを開く

# 2.エディタを閉じる
エディタを開いてる場合一度閉じてください

# 3.slnファイルを生成
デバッグを行う「Project File」を右クリックし
「Generate Visial Studio Projct File」で「.sln」ファイルを生成します
![無題の動画-‐-Clipchampで作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/7058ec06-4693-4919-ab44-a1254773e50c.gif)


# 4.Solution Configurations」を「DebugGameEditor」に変更
「.sln」を開きVisialStudio2022を立ち上げます
画面上部の「Solution Configurations」から
「DebugGameEditor」に変更項目を変更してください
![DebugGameEditorへ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/2b547596-54a0-bd65-55c7-3b0f920aa787.gif)


# 5.「Solution Explorer」から「Set as Start Project」を設定
画面右の「Search Solution Explorer」から「Game」→「自分のプロジェクト」を探し
「Set as Start Project」をクリックします

![無題の動画-‐-Clipchampで作成-_1_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/a7481b03-adaf-6757-2012-91929afaf4ad.gif)


# 6.ブレークポイントを配置
自分が確認したい場所に「F9」で配置して
「F5」または「Debug」タブから「StartDebugging」を押下します
![ブレークポイント.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/68e11c40-e891-c23d-03d2-9e41b9c84132.gif)


# 7.エディタで確認
自動起動したエディタで「Play」をするとブレークポイントでエディタが止まるので
そこで確認できます
![無題の動画-‐-Clipchampで作成-_2_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1918199/f8e33c60-6ab4-85c4-ea9f-9ad19d1de348.gif)


# 8. エラー問題 
5番の「Set as Start Project」をしない場合エラーが表示されます

[Unreal Engine 5.3 How to fix "Unable to start debugging"](https://www.youtube.com/watch?v=rgGTOZmJv9g)
脆弱性の現状と課題

# 脆弱性管理の現状と課題整理

## はじめに

皆さんの会社では、脆弱性をどのように管理していますか？
今回は、自社で実施している脆弱性管理の現状と課題について整理し、
改善のヒントにしていきたいと思います。

## 現状

### 脆弱性診断の実施状況

脆弱性管理の第一歩は、脆弱性診断の実施です。
どのような診断をいつ行っているかを以下にまとめました。

| 診断種類            | 実施タイミング                                      | 診断詳細                              | 実施担当                       | レポート形式                     |
|-------------------|-------------------------------------------------|-----------------------------------|-------------------------------|-------------------------------|
| Webアプリケーション診断       | 修正リリース時、大規模リリース時、年1回の定期診断         | 内製: ZAP Proxy、外部委託          | 開発・運用保守担当、外部委託先     | ZAPレポート、外部委託レポート    |
| モバイルアプリ診断   | 大規模リリース時、年1回の定期診断                     | 外部委託のみ                        |                                | 外部委託レポート                 |
| プラットフォーム診断 | 大規模リリース時、月1回の定期診断                     | 内製: NESSUS Professional         | セキュリティ担当、開発担当        | NESSUSレポート                 |
| クラウド診断        | 年1回の定期診断                                    | 外部委託のみ                        |                                | 外部委託レポート                 |
| SaaS診断ツール      | 不定期、月1回に変更予定                              | 内製:SaaS型診断ツール        | セキュリティ担当、開発担当        | 診断ツールレポート               |

### 脆弱性診断結果の管理方法

診断結果は以下のデータで管理しています。これに基づき対策を進め、次の診断実施計画を立てています。

| データ名         | 概要                                | 管理項目の例                                           |
|----------------|-----------------------------------|--------------------------------------------------|
| サイト一覧       | 社内の全サイトをFQDN単位で管理         | FQDN、URL、サイト名、サイトオーナー名、サービス開始日、終了日など |
| 診断状況一覧     | 脆弱性診断の実施状況を管理             | IP制限情報、実施対象、実施日、レポートファイルパス、次回予定日など    |
| 対策状況一覧     | 脆弱性診断の検出結果と対策状況を管理     | レベル、脆弱性名、対策ステータス、対策予定日、確認日、確認エビデンスパス |

## 課題

### 実施環境

Webアプリケーション診断は、開発チームとステージング環境を共用しているため、負荷やゴミデータが発生します。
通常のテストの妨げにならないよう、定期診断のスケジュールを調整したりしています。
最新バージョンがリリースできて、テストデータが初期設定で入っていて、診断後に破棄できる環境がほしいところですが、
現在のところ、できる見込みはありません。

### 実施タイミング

自動で定期実行できるのがよいですが、
ゴミデータが残ることで費用が増加することも課題です。

### 結果管理

現在、専用の管理ツールではなくスプレッドシートで管理していますが、
データの破損を防ぐためセキュリティ担当以外の更新を制限しています。
そのため、更新が滞り最新情報が反映されないことがあります。
管理ツールの導入により、担当者が最新情報を更新できるようにしたいです。

### サイト一覧の完全性

自社開発のサイトだけでなく、各事業部が外部委託やホスティングを利用して運用しているサイトも存在します。
セキュリティチームが全サイトを網羅的に把握できる仕組みを整備することが必要です。
自社開発のサイトについては、定期的な棚卸も必要ですが、現状では十分に行えていません。

## おわりに

今後、今回整理した課題を解決し、後日その結果を共有できるとよいなと思います。
Sequence Makerでとりあえず最初に書いておくと幸せになれる専用コマンド

## はじめに
Sequence MakerはExcelから測定器を制御可能にするアドインです。Sequence MakerはExcelのシートにコマンドを書くだけで、測定器と通信できる手軽さがあります。コマンドはワークシート上のどのセルに書いても良いのですが、測定器のコマンドの前に書いておくと幸せになれる専用コマンドを紹介します。Sequence Makerについての詳細は以下の記事を参照ください。

https://qiita.com/sequencemaker/items/8e6a370ab0a793a06a3b

:::note warn
***お断り***
本記事の内容はSequence Maker開発元の公式見解ではなく、あくまでも個人が趣味の範囲内で執筆しているものです。記事の内容について開発元へ問い合わせることはお控えください。ご質問・要望などは各記事のコメント欄へお願いいたします。
:::

## おすすめ専用コマンド
| コマンド | 内容 |
|:-|:-|
| #START	  |  「コマンド送受信」ボタンを押した際に#STARTと書かれたセルから開始します。<br>セルの選択状態に関わらず、常に同じセルから開始したい時に使用します。 |
| #DISP(OFF)	  | 実行中のセルの塗りつぶしと自動スクロールを抑制することで処理速度を上げることができます。  |
| #OW	  | データの上書き出力を強制します。<br>シーケンスの最初に#OWと書くことで、上書き確認のメッセージボックスを出さずに実行することができます。  |
| #DATETIME?	  | 現在の日付や時刻を出力します。  |
| #VERSION?	  | Sequence Makerのバージョン番号を出力します。  |
| #SPLIT(OFF)| 「コンマとセミコロンで分割」の設定を一時的に無効にします。|
| #| 何もせずに次の行の処理に移ります。|

（https://sequencemaker.hioki.com/manual/ja/#command より引用）

### コピペ用
```
#START
#DISP(OFF)
#OW
#DATETIME?
#VERSION?
#SPLIT(OFF)
#
#
#
*IDN?
```

## 実際の使用例
実際に上記のコマンドを使用して実行した例は以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821782/5b3813c1-5cc3-cbbe-f9db-dccccd88300e.png)

なお、この例ではC3のセルからコマンドを書き始めていますが、これはB列にインターフェイス番号を記載する可能性があるので、空けてあります。
#SPLIT(OFF)は、シーケンスを作った人が想定した設定になっていないと、データを受信した際にワークシート内が破壊されて悲しいことになりますので、環境に合わせてONまたはOFFを指定しておくのがおすすめです。
またC9～C11は後から追加でコマンドを書くことを想定して予備スペースを確保しています。#はコメント行として認識されるので、#だけ書けば何もせずに次の行へ進んでいきます。

## まとめ
今回はとりあえず最初に書いておくと幸せになれる専用コマンドをご紹介しました。コマンドはキツキツに記入するのではなく、コメントの#を活用して、余裕を持った形にしておくと後から変更する際にも便利です。
[Dify] v0.6.12でリリースされた目玉機能「LangSmith(or Langfuse)連携」を紹介

どうも、山口です。
本日Difyのv0.6.12がリリースされましたね！
今回はLangSmith連携に関して紹介したいと思います。では始めます。

## 新バージョンへのアップデート

`docker/.env.example`をコピーして`docker/.env`を作成してください。
これをしないとDify起動しないので気をつけてください。

今までdocker-compose.ymlに書き込んでカスタマイズしていた方はアップデートが入るたびにカスタマイズを初期化しないといけなくて面倒だったと思いますが、`.env`に値を切り出したおかげでその影響が受けなくなりました。

あとは今まで通りのアップデートです。
　
```
docker compose down
docker compose pull
docker compose up -d
```

## LangSmithとの連携

まずはChatbotを作成してください。そしてChatbotの設定画面にいくと以下のような表示が出てると思います。
そしたらConfigをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376115/a0386c63-f530-5979-3a01-0d4a64d16a16.png)

そしたらLangSmithかLangfuseの好きな方を選んでください。
今回私はLangSmithを選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376115/a165d130-63e7-8531-9f2f-d52a0d188bd7.png)

そしたらLangSmithの設定できるので、　[LangSmith](https://smith.langchain.com/)で発行したAPIキーと管理したいプロジェクトを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376115/1541687e-5932-fc62-d0e2-6369acdcbd77.png)


設定が完了すると以下のようになります。これでおわりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376115/81c295c0-e59c-4f74-9ddd-af5021a40b25.png)

では実際に反映されてるのか試してみましょう。以下のように質問してみました。
![スクリーンショット 2024-06-28 23.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376115/9a9abeec-2777-5a45-3cdd-57de446772ee.png)

LangSmithを見にいくと...
反映されてますね！いい感じです。
![スクリーンショット 2024-06-28 23.48.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376115/b1ce65a9-c256-3c1d-1c49-93b2ba094a4f.png)

これでいろいろと評価などがしやすくなっていいですね。
Dify単体でもGood or Badはできますが、現状それは直接データベース見に行かないと集計できないのでDify→LangSmith→評価みたいなフローが評価するには一番やりやすいでしょうか。

## リリースまとめ 
最後に今回のリリースをまとめて終わりにします。こちらはClaude 3.5-Sonnetで作成しています。　
### 🚀 新機能

1. **LangSmithとLangfuseによるトレーシング**
   アプリケーションのパフォーマンスと動作を詳細に追跡できるようになりました。

2. **ワークフローエディタの元に戻す/やり直し機能**
   ワークフローの編集がより柔軟になり、ミスを簡単に修正できるようになりました。

3. **ワークフローDSLのインポートと上書き**
   DSLのエクスポートとインポートを通じて、間接的にバージョン管理ができるようになりました。

4. **新しいアイコン**
   ユーザーインターフェースが新しいアイコンで刷新され、より洗練された外観になりました。

5. **ワークフローステップの非表示オプション**
   WebApp設定でワークフローステップを非表示にする選択肢が追加されました。

6. **Firecrawlツールのセルフホスティング**
   Firecrawlツールを自前のサーバーでホストできるようになりました。

7. **チャットメッセージでのLaTeX表示**
   数式や科学的表記をより正確に表現できるようになりました。

8. **引用と属性表示のデフォルト有効化**
   情報の出所をより明確に示すことができるようになりました。

### 🛠️ 新しいツール

1. **JSONプロセスツール**
   JSON形式のデータを効率的に処理できるツールが追加されました。

2. **Serply検索ツール**
   Web、求人、学術情報、ニュースの検索オプションが拡大しました。

3. **Novita AI画像生成ツール**
   モデル検索、テキストから画像生成、タイル作成など、画像生成の機能が強化されました。

### 🤖 モデルサポートの拡大

- Jina新事前定義リランカー
- Bedrock Command Rモデル
- Claude-3-5-Sonnet-20240620
- Vertex AI Claude-3-5-Sonnet@20240620
- OpenRouter用の事前定義モデル
- Qwen LLM
- Spark 4.0

これらの新しいモデルのサポートにより、より多様で高度な自然言語処理タスクに対応できるようになりました。

### 🗄️ ベクトルデータベースとストレージの改善

- OpenSearchをベクトルデータソースとしてサポート
- Oracle23aiをベクトルデータソースとしてサポート
- Tencent COSストレージのサポート

これらの追加により、データの管理と検索の柔軟性が大幅に向上しました。

### 🏗️ APIサービスインフラストラクチャの改善

- Docker Composeに.envを追加し、デプロイメントフローを改善
- 設定の定義と検証にPydantic Settingsを導入
- APIのDockerfileでPoetryを依存関係ツールとしてサポート
- APIサービスのPipサポートを削除

これらの変更により、開発とデプロイメントのプロセスがよりスムーズになりました。
ReactのuseStateで対象の値が更新されない

## はじめに
ReactでuseStateが更新されずに困ったのでこの機会に知ったことを残しておきます。
かなり初歩的な内容です。

## useStateで監視している変数が更新されなかったコード
setRecordsで値を入れているが、その直後のrecordsは[]とログが出る
```
  const [records, setRecords] = useState([])
  const [totalValue, setTotalValue] = useState(0)
  
  const onClickRegister = () => {
    console.log(value) // valueは10
    setRecords([...records, { value }])

    console.log(records); // valueの10が入らず、[]とログが出る

    setTotalValue(records.reduce((total, value) => total + value, 0))

  }
  ```

## 原因
useStateの状態更新が次のレンダリングサイクルまで適用されないためrecordsが更新されない

## 値の状態を適切に監視するにはuseEffectを使う
```
  const [records, setRecords] = useState([])
  const [totalValue, setTotalValue] = useState(0)
  
  const onClickRegister = () => {
    setRecords([...records, { value }])
  }
  
  useEffect(() => {
    const newTotal = records.reduce((total, value) => total + value.time, 0)
    setTotal(newTotal)
  }, [records]) // recordsが更新されるたびにtotalValueを再計算する
  ```

  ## おわりに
  Reactの初歩の初歩な内容でしたが大事な基本なので残しておきます。
  読んでいただきありがとうございました。
Pandasで気象庁XMLから気象特別警報・警報・注意報を抽出

```python
import pandas as pd

url = "https://www.data.jma.go.jp/developer/xml/feed/extra.xml"

ns = {"atom": "http://www.w3.org/2005/Atom"}

df = pd.read_xml(url, namespaces=ns, xpath="//atom:entry", parse_dates=["updated"])

df["updated"] = df["updated"].dt.tz_convert("Asia/Tokyo").dt.tz_localize(None)

df

# 愛媛県の気象特別警報・警報・注意報を抽出
filterd_df = df[
    (df["title"] == "気象特別警報・警報・注意報")
    & (df["content"].str.contains("愛媛県"))
].copy()

filterd_df
```

# 参考

https://qiita.com/Ri-chan041213/items/fbb5423e422bf533766d
【VSCode】ファイルが未保存の場合にタイトルバーにマークを表示する方法

`settings.json`に以下の設定を記述することでファイルが未保存の場合にタイトルバーにマークを表示できます。

```settings.json
  "window.title": "${dirty}${activeEditorMedium}",
```

![スクリーンショット 2024-06-28 23.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/874009c2-5f07-98d3-21be-12f1e647dac1.png)
Windows 10を起動可能なUSBメモリーの作成方法

# 1. はじめに

この記事では，Windows 10を起動可能なUSBメモリーを作成し，持ち運ぶ方法を解説します．しかし，USBメモリーでは書き込み速度が遅いため，USB3.0接続であってもはっきり言って使い物になりません．そのため，外付けHDDを使用することを強く推奨します．

<br>

参考：USBメモリーからWindows 10を起動した際の測定結果

![CrystalDiskMark_20240621150702.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/29eaa30c-14d1-e22e-576f-35138adc6357.png)

# 2. 必要なもの

* 32GB以上のUSBメモリー（外付けHDD推奨）
* Windows 10のisoイメージファイル ※
* Rufus

※ お持ちでない方のために，22H2の64bit日本語版をアップロードしておきました．（[直リンク](https://drive.google.com/file/d/1PcftRGlBImOqw4I3kEsi0kygm-K3AHPR/view)）

# 3. 手順

### 1. BIOS設定

コンピューターのBIOS設定画面に入り，以下のように変更します．

* セキュアブート：無効
* 起動優先順位： USB ＞ HDD

<br>

### 2. パーティションシステムの確認

コマンドプロンプトを起動し，

`diskpart` `[ENTER]`
`list disk` `[ENTER]`

と入力します．

![20240617-174446_884.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/d1c9783e-f789-5c39-ae6f-f69312a6affa.png)

現在Windowsを起動しているディスク（通常はディスク0）のパーティションシステムがMBR・GPTのどちらであるか確認します．プロンプトの「GPT」欄に「*」が表示されていればGPT，そうでなければMBRです．上の例では，ディスク0のパーティションシステムはGPTです．

<br>

### 3. Rufusによる作業

Rufusを [公式HP](https://rufus.ie/ja/) からダウンロードして実行します．

#### ドライブプロパティ

* 「デバイス」：USBメモリーを選択（外付けHDDの場合は，「USB接続のHDDを一覧表示」をチェック）
* 「ブートの種類」：「選択」ボタンをクリックしてisoイメージファイルを指定
* 「イメージオプション」：「Windows To Go」を選択
* 「パーティション構成」：手順2で調べたパーティションシステムを選択

#### フォーマットオプション

* 「機能拡張されたラベルとアイコンファイルを作成」のチェックを外す

<br>

以下のようになったら，「スタート」をクリックします．

![20240621-094930_020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/6b8b7ac4-216c-fc2c-c83a-24a50aae5d94.png)

<br>

Windowsのバージョン（エディション）は，現在実行しているものと合わせましょう．

![20240621-094951_854.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/015f5714-a0e9-faf6-2039-53f3c7eb1c45.png)

<br>

USBメモリーを選択した場合，このようなメッセージが表示されますが，「はい」をクリックして構いません．

![20240621-094959_845.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/94e48d3f-d3da-9e17-cff5-50781236ce98.png)

<br>

インストーラーのカスタムはお好みに合わせて行ってください．よく分からない場合は，すべてチェックするのがお勧めです．

![20240621-095043_556_edited.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/88626cbe-cf9b-4fec-2e83-7417c142178e.png)

<br>

ブートローダーに関するメッセージが表示されることがありますが，「OK」をクリックして構いません．

![20240621-095101_013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/70f1a13c-e200-db66-b3b2-3e91c7645f17.png)

<br>

フォーマットしてよいか訊かれるので，確認の上「OK」をクリックします．

![20240621-095108_050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/30a5227c-2044-411c-be53-8e8eb4cf2459.png)

<br>

プログレスバーの表示が「準備完了」となれば完了です．作業には数時間かかるので気長に待ちましょう．

![20240621-131227_872.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695801/106c4d77-3d62-8fa6-dad8-ff8654ccdc3b.png)

<br>

コンピューターを再起動し，USBメモリーからWindowsが立ち上がれば成功です．お疲れ様でした．


# 4. 注意点

アクティベーションは，現在実行しているWindowsで済んでいれば同様に通るようです．両者のエディションを一致させることが重要かと思われます．

また，この方法でUSBメモリーにインストールしたWindowsは「更新とセキュリティ」からアップデートすることができないようですので，サポート期間にご注意ください．
【Node.js v22 の新機能を試す】node --run で package.json scripts を実行する

公式のブログ記事の中で、「Running package.json scripts」という項目で以下のように紹介されていた `node --run <script-in-package-json>` という形式で package.json scripts を実行するというものを試してみます。

●Node.js — Node.js 22 is now available!
　https://nodejs.org/en/blog/announcements/v22-release-announce#running-packagejson-scripts

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/25502824-64e2-0238-9640-44a3a228c8da.png)

上記以外に、以下の記事でも紹介がされていたりします。

●Node.js v22の主な変更点 - 別にしんどくないブログ
　https://shisama.hatenablog.com/entry/2024/05/13/083000

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e7b81acf-0985-a7e6-c93c-654644b47a5b.png)

## これまでのやり方
これまでも npmコマンドを使った方法はありました。
例えば、以下の記事に書かれたようなことができます。

●scripts | npm Docs
　https://docs.npmjs.com/cli/v10/using-npm/scripts

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cea03a45-a467-1be2-0dc5-5f9279d6055c.png)

●Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
　https://ics.media/entry/12226/

## 実際に試してみる
それでは、Node.js v22 の新機能を使ったお試しです。

package.json の中に scripts として、以下の内容を追加します。

```javascript
  "scripts": {
    "ws": "npx wscat -l 8080"
  }
```

ここで使っているコマンドは、以前、以下の記事で書いていた内容の一部を流用しています。

●WebSocket のサーバー・クライアントをコマンドラインで簡単に実行する（npx と wscat） - Qiita
　https://qiita.com/youtoy/items/72bbd5f6b0893756da36

以下のコマンドを実行することで、WebSocketサーバーを一時的に用意できるようになります。

```zsh
$ node --run ws
```

上記を実行した後、以下の記事で書いていた WebSocketクライアントのプログラムを実行してみます。

●Node.js と ws でシンプルな WebSocketサーバー ＋ Node.js v22 でフラグなしで使える WebSocket - Qiita
　https://qiita.com/youtoy/items/9e1eeae728dc98f15679

その結果、以下のように WebSocket を使った通信を行えたことが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b8f343b9-66fc-5cf2-288a-562a043fb017.png)

現状、 `node --run` を使うと「ExperimentalWarning: Task runner is an experimental feature and might change at any time」という Warning がでる状況のようです。

## npm run を使った場合
以下のコマンドでサーバー側を用意した場合も試してみて、その結果を掲載しておきます。

```zsh
$ npm run ws
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c57e0281-3a61-a2e7-7f58-61de93c489f8.png)
自己紹介ページ　進捗

お疲れ様です。

1時間ほどjsの勉強と課題をしていましたので、その後に昨日進めた自己紹介ページを少しだけ更新しました。

![スクリーンショット 2024-06-28 234236.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/6c56f97a-023a-b915-ff49-528abe64228e.png)
![スクリーンショット 2024-06-28 234753.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/2eb5c79f-8ff8-4721-b349-a3c19f9be2e3.png)

本当に少しだけですが、「自己紹介」と「職歴」の下に短い線を加えました。
コードはスクショの通りです。
これは参考書にあったものをそのまま引用・実装したのですが、線を引くというわけではなくて、 display: block を使って線に見えるものを作るんだなと感心しました。こういう方法もあるのですね。
LUXONIS OAK camera について調査中

## はじめに
OAK はOpenCV AI KIT として発表されたカメラだ。
[コンピュータービジョン開発キット「OpenCV AI KIT」の紹介](https://aicam.jp/tech/oak/)

そのカメラはluxonisで取り扱っているので、調査してみることとした。

## luxonis
https://shop.luxonis.com/collections/oak-cameras-1

[DEPTH ACCURACY COMPARISON: LUXONIS OAK VS STEREOLAB™ ZED VS INTEL® REALSENSE™](https://discuss.luxonis.com/blog/3734-depth-accuracy-comparison-luxonis-oak-vs-stereolab-zed-vs-intel-realsense)

![](https://discuss.luxonis.com/assets/files/2024-03-19/1710866288-291804-depth-error-columns.webp)

- 理想的なテクスチャでのdepthの精度（小さいほどよい）
- 理想的なテクスチャを入力としているので、dot projector の効果が現れない。
- D435は基線長が 5cm と短いことを考慮に入れると、かなりいいと言える。
- OAK-D Proは7.5 cmの基線長である。OAK-D Proはstereo計算をon device で実行できるだけでなく、他の処理もできる（AI, video encoding, CV 関数など）

![](https://discuss.luxonis.com/assets/files/2024-03-25/1711398345-837259-comparison-table.webp)
OAK-D
#### 注意
理想的なテクスチャを想定しているので、ZED2iにとっては有利な状況になっている。
変化に乏しいテクスチャが与えられたときには、Active StereoではないZED2iはdepthのエラーが大きくなりやすい。

### 推測
- ZED2i をbaseline(基線長)の短いzed miniにしたときには、depthのerrorが増加することを想定する


### OAK-D とZED2iとの比較
- OAK-Dの場合：内蔵のASICによるdepthの計算
- 特定のGPUがないボードでも動作する。RaspberryPIでOAK-Dの組合せで動作する。
- ZED2iの場合：NVIDIA のGPUによる計算

## [Computer Vision Real-time on chip processing](https://www.luxonis.com/#computer-vision)

https://www.luxonis.com/videos/object/1200.webm
https://www.luxonis.com/videos/segmentation/1200.webm
https://www.luxonis.com/videos/ocr/1200.webm
https://www.luxonis.com/videos/pose/1200.webm

この４つの動作例の動画が用意されている。

----
- https://github.com/luxonis/depthai

DepthAI Python API utilities, examples, and tutorials.

- https://github.com/luxonis/tools
Various tools for OAK-D camera
This application is used for exporting Yolo V5, V6 and V7 object detection models for OAKs.


- https://pypi.org/project/depthai-sdk/

- https://pypi.org/project/depthai/

## ROS2
https://github.com/Serafadam/depthai_ros_driver
ROS2 driver for OAK cameras

## Jetson
[Deploy with NVIDIA's Jetson](https://docs.luxonis.com/hardware/platform/deploy/to-jetson/)

## IMU
以下のサイトにドキュメントがある。
Python, c++ の両方の例が書いてある。
https://oak-web.readthedocs.io/en/latest/components/nodes/imu/

## [OAK vs RealSense?](https://www.luxonis.com/#oak-vs-realsense)

OAK-D Pro とRealSense D455 との比較を載せている。

## EOL については次のように考えている。
[End of Life (EOL) Policy](https://docs.luxonis.com/hardware/platform/deploy/eol)

## SEE ALSO
[OpenCV AI Kitの到着に備えよう](https://qiita.com/dandelion1124/items/ef226b3c234ec933ccac)


https://x.com/i/status/1815725081118876132
AWS SOA-C02受験記

## はじめに
AWS SOA-C02に受験し、800/1000で合格しましたので、振り返り・備忘録のため記録を残します。
![スクリーンショット 2024-06-24 212520.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3758619/031765ba-6f68-6141-c740-70e9bd194a92.jpeg)


## 筆者について
- AWS資格はCLF, SAA, DVAを取得済み
- 実務ではLambda, API Gateway, CloudFormation、CloudWatch等を見たり触ったりします

## 学習方法
- CloudTech
まず問題を1周。解きながら、分からない用語や概念について随時メモし、BlackBeltで内容を調べ理解を深めました。
2週目以降は、なぜその選択肢が正しいのか？誤っているのか？を意識しながら解き、全問通して8割以上取れるまで繰り返しました。
  <br>
- AWS Certified SysOps Administrator - Associate 公式練習問題集

https://explore.skillbuilder.aws/learn/course/external/view/elearning/12555/aws-certified-sysops-administrator-associate-practice-question-set-soa-c02-japanese?syops=sec&sec=prep

- AWS Certified SysOps Administrator - Associate のサンプル問題

https://d1.awsstatic.com/ja_JP/training-and-certification/docs-sysops-associate/AWS-Certified-SysOps-Administrator-Associate_Sample-Questions.pdf

　CloudTechが7割ぐらい取れるぐらいになった頃合いに、上記2つの問題集を解きました。
　公式だけあって、実際に出題される問題と形式や難易度がほぼ同じでした。無料ですし、
 　本番の雰囲気が掴めるのでやっておくべきかと思います。
  <br>
-  Udemy 
  [【SOA-C02対応】AWS認定 SysOpsアドミニストレーター アソシエイト 模擬問題集＋詳解 【2024年版】
](https://www.udemy.com/share/10arKa3@F30Z-H8eDY6QuAjE8wBFHuCzS9TCiakGtVhjdfwW6bAZXRFUoCBYPZkGYo8825sWLw==/)
受験日程の2週間前に「そういえばやってなかった！」と思い出し、慌てて実施。
結局4回分しか解く時間がありませんでしたが、本番ではよく似た問題がたくさん出題されました。やっておいて良かったです。
  この問題集の良いところは、解説がとても丁寧なところ。CloudTechも各問図解付きで分かりやすいですが、こちらは正解/不正解の選択肢の理由だけでなく、問題に登場する概念や、何を問われているかのポイントも記載されており、使用した教材の中で一番腹落ちしました。

## 勉強時間
3ヶ月。
内訳はCloudTech8割越えまで2ヶ月、その他問題集を並行して1ヶ月。

## 所感
Associate試験の中ではSOAは比較的難しい、という声をよく見かけており、それにビビッていたのですが、蓋を開けてみたら先に受験したSAA、DVAよりも高得点で合格できました。
なぜ良い点を取れたのかを考えたのですが、実際に使ったことのあるサービスがSAA、DVAに比べて多かったのが理由かもしれません。
CloudFormationやCloudWatch等、実務で使用しているサービスに関しては、一発で設定できず何度もミスやエラーを繰り返し、調べて設定、デプロイできたという経験があるので、問題集で学習している時も特に困ったことはありませんでした。逆に使ったことがないサービスについては内容の定着が遅かったように思います。
やはり実際に手を動かす以上に良い学習方法は無いのかもしれません。ということで、これから受験する方は問題集だけでなくハンズオンも併せて実施するのが良いかと思います。

https://aws.amazon.com/jp/events/aws-event-resource/hands-on/

こちらのハンズオン資料は以前に一通り実施したのですが、正直忘れている内容もあるのでまた復習したいと思います。
<br>

最後までお読みいただき、ありがとうございました！
エンジニア特化部門の管理職が考えるプログラミング教育　名は体を表していますか?

結構、サボってしまったのですが、開発生産性カンファレンスに参加し、色々刺激をもらったので、コツコツと書いていこうと思いました。
次の考え方です。

## 考え方4
* 名は体を表していますか？

前提として、私はクラス名であったり、メソッド名変数名はかなり気をつけて設定すべきだと考えています。特に今後一定期間運用で利用されることが想定されるものはそうです。
私は、Javaのプロダクトに携わることが多いのですが、過去にオフショア拠点へ開発委託したソースコードの納品で、下記のようなものがありました。
※Xxxx部分、条件の詳細は忘れました

```
private boolean isXxxx(引数){
   引数がXxxxの場合  return false;
   それ以外         return true;
}
```

このメソッドを利用している別メソッド(それほど難しくない)をリファクタリングしている際に、思った通り動かず数時間を浪費しました。
メソッドは名前と振る舞い(戻り値)が逆になっていたことが原因です。boolean型だったことも気づくのが遅れた要因だったかもしれません。booleanは結果が2択でシンプルであるため、私は利用することを好みますが、シンプルが故に一度誤解すると、それが解けにくいように思っています。

他の人、将来の自分に誤解を与えないためにも、用途と名前は一致するように実装しましょう。
名称に関することは、あと2つほどあるのですが、それは別途書きます。
git cloneしたあと，編集したコードをアップロードしたい時

# gitコマンド
今回は、クローンしたコードを編集した後、自分のgithubにアップロードする方法です。おそらく、自分で一からコードを組むよりも、コード公開してくださっている方のコードをクローンして動かしてみることの方が多いと思うので、ぜひ参考にしてください．

---
### 方法1
1. githubのサイトでnew repositoryで自分の新しいリポジトリを作ります
1. githubにアップしたい自分のコード（VScode）を開く
1. terminalを開く
1. ```git remote -v``` //これで一応、誰かのから持ってきたのか確認できます
:::note info
これでもし何も表示されなかったら、おそらくディレクトリの階層を間違っています．
:::
1. ```rm -rf .git```  //これで元々あったgitの情報を削除します
1. ```git init```
1. ```git add .```
1. ```git commit -m 'Initial commit with custom settings'``` //コメントは何でもOK
1. 最後に先ほど作成したrepositoryの下の方にある「…or push an existing repository from the command line」の中にある3つのコマンドをコピーして実行すれば完了！

この方法を自分は使っていたのですが、もしこれでうまくいかない場合、以下の方法でやってみてください。

---
### 方法2
2. とりあえず、new repositoryで新しいの作る
2. ```git remote -v``` //これで誰かのから持ってきたのか確認できる
2. ```git remote set-url origin git@github.com:****/****.git```
2. ```git push origin main```　//これで自分のにコピー完了

---

もし、どちらの方法も上手くいかなかったら教えてください！
また、まだ自分には経験がないのですが、実際に研究発表の時に自分のコードを公開する場合、ライセンスなどもいじる必要があるらしいので、またその機会があったときに、その方法も書きたいと思っています。
pklを使ってみた

個人的「質はともかく継続する」21日目です

# pklを使ってみた

少し前に話題になった、珍しいappleのオープンソース言語です。
一つのファイルから、jsonやyaml等のファイルに変換して出力することができます。
ちょっと気になっていたので、試してみました。
公式サイトのチュートリアルを進めてみます。

https://pkl-lang.org/main/current/index.html

## 準備

環境はM2のMac、インストールはbrewでやります。
```sh
brew install pkl
```

updateもわすれずに
```sh
brew update
brew upgrade pkl   # or just `brew upgrade`
```

## サンプルを作成

次はサンプルを作成してみます。
intro.pklというファイル名にします。

```pkl
name = "Pkl: Configure your Systems in New Ways"
attendants = 100
isInteractive = true
amountLearned = 13.37
```

とりあえず実行。
```pkl
pkl eval ./intro.pkl
```

値が返ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/112af059-b086-a725-c5e6-8a13ccfe56da.png)

## いろんなフォーマットを出力してみる

階層構造がうまく出るか見たいので、
ちょっとだけ内容を変えてみます。

```pkl
sample {
name = "Pkl: Configure your Systems in New Ways"
attendants = 100
isInteractive = true
amountLearned = 13.37
label {
    type = "todo"
    color = "blue"
  }
}
```

#### まずはみんな大好きjson
```sh
pkl eval -f json ./intro.pkl
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/c37f05ce-a93f-fbd8-4c9e-77597d5512cf.png)


#### javaユーザー御用達のxml
```sh
pkl eval -f xml ./intro.pkl
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/87269f02-dde6-cf43-b21a-d8dfd70aba22.png)


#### 個人的に一番好きなyaml
```sh
pkl eval -f yaml ./intro.pkl
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/4616d873-78df-d1d5-f1f0-f866b4f5b532.png)

どのフォーマットも、ちゃんと階層が表現されてますね。

## まとめ
正直、私の業務で活躍する場面は全然なさそうですが、
ちょっと面白いので、また続きを書きたいと思います。

そういうタスクが溜まっていくなぁ。
【個人開発】歩数計アプリ「StepSnap」をリリース！

## はじめに
こんにちは、sin3 です。本業は大阪にあるスタートアップでWebエンジニアをしています。
主にバックエンドの開発を担当し、Javaをメイン言語として使用しています。
最近は、より効果的なシステム構築のためにドメイン駆動設計（DDD）の学習にも取り組んでいます。

趣味としてスマホアプリの開発をしていて、先日「StepSnap」というアプリをリリースしたので紹介させていただきます。

https://apps.apple.com/jp/app/stepsnap/id6475646106

## 「StepSnap」とは？

「StepSnap」は、日々の歩数や移動距離を簡単にトラッキングできる歩数計アプリです。歩数等の情報はiOSのヘルスケアから取得し、見やすいUIで表示します。サーバーを利用せず、アプリ単体で完結するため、プライバシーにも配慮しています。

## 主な機能

- **日々の歩数の記録と表示**
    - 日々の歩数を自動で記録し、グラフで表示します
    - 時系列で累積歩数を表示しているので1日の歩数の推移が見えます

- **カレンダー形式で歩数を表示**
    - カレンダー形式の画面に、歩数を円グラフで表示します
 
- **週・月・年単位での歩数の表示**
    - 週、月、年の３つの期間で歩数を表示します
    - 歩行の傾向の確認がしやすいです

- **視覚的なユーザーインターフェース**
    - シンプルで直感的なデザインを採用しており、誰でも簡単に使えます

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270947/e18c2b2f-4589-7cc5-b77e-50b3c193a768.png)

![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270947/fa722714-3803-2e1c-3113-381437dee8d0.png)

## 技術スタック

下記の技術を使用して開発しました。

- 言語: Swift
- UIデザイン: Storyboard
- データベース: Realm
- アーキテクチャ: MVP(Model View Presenter)

## なぜ作ったのか？

歩数計アプリはストアにたくさんありますが、私が本当に欲しいと思う機能を備えたアプリに出会えませんでした。そこで、「自分が使いたいアプリを自分で作ろう」というシンプルな動機から「StepSnap」を開発しました。

歩数計アプリの市場は非常に競争が激しく、多くのアプリが存在します。しかし、趣味としての開発というスタンスがあったからこそ、自分の理想を追求し、妥協することなくリリースまで辿り着くことができました。

## 開発で大変だったこと

思い返すとコードを書くこと以外の事の方が大変でしたが、色々便利なものがあるので個人開発では大変助かりました。

- アプリアイコンやストアに掲載する画像の作成
    - デザインについては専門外のためかなり苦労しました。
      Figmaで作ったのですが、素人の私にとっては無料枠でも十分使えてとても便利です。
- ストアに掲載するアプリの説明文
    - ChatGptに手伝ってもらいました。
      文章を考えるのも得意ではないのでAIに提案してもらったものをベースにしました。


## 今後の展望

「StepSnap」は今後も継続的にアップデートを予定しています。ユーザーからのフィードバックを元に、さらなる機能追加や改善を行っていきます。今後のアップデート予定としては、以下のような機能を考えています。

- **ウィジェットの充実**
    - シンプルなウィジェットは実装していますが、よりリッチなウィジェットも追加したい

- **目標達成の通知**
    - 目標歩数の設定機能は実装していますが、達成したことを通知する機能

## おわりに

今回、個人開発したアプリ 「StepSnap」を紹介しました
以下のリンクから「StepSnap」をダウンロードできます。もしよければぜひお試しください！

https://apps.apple.com/jp/app/stepsnap/id6475646106
CUIとは？ - CUI は誤用（和製英語） だって知っていますか？

## はじめに

CUI は英語圏では通用しないようです。CLI という正しい用語を使いましょう。というか CUI のことしか書いていない初心者向け記事、量産させすぎ😡

- ❌ CUI （キャラクターユーザーインターフェース）なんて言葉は英語にはありません
- 🟢 CLI （コマンドラインインターフェース）が正しい用語です
- 🟢 GUI （グラフィカルユーザーインターフェース）も正しい用語です

なんども繰り返されている話題ですが、ふと書きたくなったので書きます。

## CLI (コマンドラインインターフェース)ってなに？

CLI とはその名の通り、コマンドラインを使ったインターフェースのことです。つまり一般的にはシェルを使うユーザーインターフェースです。よく見るコレ↓です。

```console
$ ls
bin   dev  home  lib64	mnt  proc  run	 srv  tmp  var
boot  etc  lib	 media	opt  root  sbin  sys  usr
```

コマンドラインインターフェースとは、**コマンドラインにコマンドを入力することでコンピュータを使うインターフェース**です。ちなみにコマンドとは日本語で命令のことです。大抵の場合、コマンドは文字です。

https://en.wikipedia.org/wiki/Command-line_interface

初期のコンピュータでは（CUI ではなく）CLI が使われていました。これは初期の頃はディスプレイがまだできておらず、処理結果は紙に印字されていたからです。画面に出力 (output) するプログラミング言語の関数名が `print` や `printf` だったりするのはその時代の名残でしょう。**紙に印字された文字は消すことができません**。そのためコンピュータに命令を出す→その結果が出力されるというインターフェースでなければコンピュータを使うことができませんでした。

## CUI (キャラクターユーザーインターフェース）とは

CUIは誤用です。誤用に対して説明するのもおかしな話ですが、CUI とはキャラクターユーザーインターフェースの言葉通りに解釈すると、文字を使ったインターフェースのことです。GUI という言葉グラフィカルユーザーインターフェースなので、それに対応して CUI という言葉が日本で生まれたというのが一般的な説だと思われます。

CLI も CUI も文字を使うのだから同じ意味なのでは？と考えるかもしれませんが、コマンドではない文字もありますよね？ 例えばターミナルの中で動くテキストベースのテキストエディタなどです。テキストエディタはコマンドを入力して操作するわけではないので CLI ではありません。ちなみにこの**テキストベースのアプリケーションを英語圏では TUI (テキストベースドユーザーインターフェース）と呼ぶ**ようです。実質的に TUI = CUI です。

https://en.wikipedia.org/wiki/Text-based_user_interface

コマンド入力で操作できるテキストエディタも一応ありますが、その話は置いておきましょう。それは CLI でも使えるテキストエディタというだけの話です。

ちなみに CUI はコンソールユーザーインターフェースの略であるという説もあるようですが、こちらはその言葉通り解釈するとコンソール（≒ターミナル）を使うユーザーインターフェースのことです。そういや最近のターミナルは画像を表示できるようになっているのですが、もしターミナルの中で GUI (?) を動かすようになったら、それは TUI (Text-based ... ) ではないので CUI (Console ...) と呼ぶのが適切なのではないかと思ったり思わなかったり。

## GUI（グラフィカルユーザーインターフェース）とは

説明するまでもなく、画像を使ったインターフェースのことですね。簡単に言えば Windows や Mac です。マウスやタッチパッドなどのポインティングデバイスを使って操作するインターフェースです。

## CLI はシェルスクリプトで自動化できるが CUI は無理

実はこの記事はシェルスクリプトに関係する記事です。というのもシェルスクリプトで使用できるコマンドは CLI 用のコマンドであって、CUI (TUI) 用のソフトウェアではないからです。CUI では文字だけを使いますが、だからといってシェルスクリプトで CUI 用のソフトウェア（例えばテキストエディタ）が使えるわけではありません。GUI の登場で CUI は廃れつつありますが、CLI はそうではありません。

シェルスクリプトからコマンドを呼び出せるのは、そのコマンドが文字だけを使っているからではなく、コマンドラインインターフェースから実行するコマンドで呼び出せるようになっているからです。文字ではなくコマンド（命令）であることが重要なのです。

と書いたもののなんでも手段はあるわけで、`expect` コマンドのようなものを使えば CUI (TUI) 用のソフトウェアでもシェルスクリプト操作できてしまいます。ただし CUI (TUI) 用のソフトウェアはシェルスクリプトから操作できるように考慮されておらず、無理やり操作する形になって面倒なことになるので可能な限り避けることをおすすめします。

## さいごに

昔から言われているのにいつまで経っても正しい用語が普及しないので書いてみました。

英語圏でも CUI が使われている例はあるよなどという話は (∩ﾟдﾟ)ｱｰｱｰきこえなーい なのであしからず。https://en.wikipedia.org/wiki/Character_user_interface でリダイレクトされるぐらいには認知されています。

それにしても一体どういう経緯で CUI という用語が普及してしまったんでしょうかね。
Active Recordってなんだろう？

Rails学習中に出てくるActive Recordについて、自分なりに調べたことを簡単にまとめます。

# Active Recordとは何か？
MVCのM、つまりモデルに関わる仕組み。ORMフレームワークとしてさまざまな機能を備えています。

## ORM（オブジェクト/リレーショナルマッピング）
 アプリケーションが持つオブジェクトを、リレーショナルデータベースのテーブルに接続すること。
 Railsでは、これを取り入れることで、SQL文を直接書く代わりにアプリケーションにおけるオブジェクトの属性やリレーションシップをデータベースに保存することも、データベースから読み出すこともできるようになります。

# 主な機能
## CRUD（データの読み書き）
 controllerのアクションでよく見るコード、これにもActive recordが活用されています。
 Create（データの作成）
 ```
 user = User.new(name: "Michael Hartl", email: "mhartl@example.com")
 user.save　　
 /*Userテーブルに、名前とメールアドレスを設定。その後、saveメソッドでテーブルにデータを保存している。*/
```
Read（データの読み込み）
```
users = User.all 
/*データベースからすべての値を取得*/
```
```
user = User.find(params[:id])
/*Railsのshowアクションやeditアクションなどで使用する記法。params[:id]でクライアントから送信されたURLやフォームで送信された情報をもとに、該当のIDのデータを取得している。*/
```
Update(データの更新)
```
user = User.find(params[:id])
user.update(name: "Foo Bar", email: "foobar@example.com")
/*取得したクライアントの情報を、updateメソッドで書き換えている。*/
```
Delete（データの削除）
```
user = User.find(params[:id])
user.destroy
/*取得したデータをdestroyメソッドで破棄している。*/
```

## バリデーションの設定
　モデルにバリデーションを記述することで、テーブルに保存する際の様々なルールを作ることができます。
 ```
class User < ApplicationRecord
  validates :name, presence: true, length: { maximum: 50 }
end
```
例えば、このように書くと、nameカラムに値を保存する際には、入力必須（presence: true）、長さは５０文字以内（length: { maximum: 50 }）のように細かい指定が可能。

他にも、Acrive Recordには、コールバックやマイグレーションなどの機能もあります。

## まとめ
・Active Recordを活用することで、簡単にモデルとのやり取りを行うことができる！

参考
https://railsguides.jp/active_record_basics.html
https://railstutorial.jp/
https://qiita.com/ryokky59/items/a1d0b4e86bacbd7ef6e8
app service が起動しないので調べたら asyncio を上書きしてた :p

# 背景

app service での失敗談

# 状況

<code>import asyncio</code> を書いたあと、
馬鹿の一つ覚えで requirements.in(txt) に記入じゃーってやったものだから
App Service の起動時にエラー

しかも、エラーについてもメモし忘れてるし・・ :sweat: 


で、最初は、え？ どういうこと？と思い、エラーメッセージを読んで、公式とか見に行って、気付いた

- asyncio は python 3.4 から標準ライブラリ化
- pip install は可能だが、当然標準ライブラリを使わなくなる

慌てて、requirements.in から削除して事なきを得た・・ :sweat_smile: 

https://pypi.org/project/asyncio/

# 問題点

- パターン化された行動

効率を求めて、非効率になる典型ですね。

理解を進め、闇雲に手を動かさない、というのも大切ですね :laughing: 

# あとがき

- 手を動かして覚える事
- 体系的に理解する事

どちらも大切だとは思う、あとはバランスじゃないのかな？と