OmniAICreator/Qiita-1.07M huggingface dataset:
Nuxt3でPWA対応する

少し躓いたのでメモとして残します。

nuxt v3.1.2
@vite-pwa/nuxt v0.0.7

## 1. [@vite-pwa/nuxt](https://github.com/vite-pwa/nuxt)をインストール

```
yarn add @vite-pwa/nuxt
```

## 2. それぞれのサイズのアイコンを作成し、/public配下に格納
それぞれのサイズのアイコンを作成するのに「icon ジェネレーター」で検索して出てきたサイトを使いました。

## 3. nuxt.config.tsに以下を追記
```
export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    registerType: "autoUpdate",
    includeAssets: ["favicon.ico"],
    client: {
      installPrompt: true,
    },
    manifest: {
      name: 'name',
      description: "description",
      theme_color: "#ffffff",
      lang: "ja",
      short_name: "short_name",
      start_url: "/",
      display: "standalone",
      background_color: "#ffffff",
      icons: [
        {
          src: "icons/36x36.png",
          sizes: "36x36",
          type: "image/png"
        },
        {
          src: "icons/48x48.png",
          sizes: "48x48",
          type: "image/png"
        },
        {
          src: "icons/72x72.png",
          sizes: "72x72",
          type: "image/png"
        },
        {
          src: "icons/96x96.png",
          sizes: "96x96",
          type: "image/png"
        },
        {
          src: "icons/128x128.png",
          sizes: "128x128",
          type: "image/png"
        },
        {
          src: "icons/144x144.png",
          sizes: "144x144",
          type: "image/png"
        },
        {
          src: "icons/152x152.png",
          sizes: "152x152",
          type: "image/png"
        },
        {
          src: "icons/192x192.png",
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: "icons/256x256.png",
          sizes: "256x256",
          type: "image/png"
        },
        {
          src: "icons/384x384.png",
          sizes: "384x384",
          type: "image/png"
        },
        {
          src: "icons/512x512.png",
          sizes: "512x512",
          type: "image/png"
        }
      ]
    },
    workbox: {
      navigateFallback: null
    },
    devOptions: {
      enabled: true,
      type: "module"
    },
    icon: {
      source: "icon.png",
    }
  },
})
```

本来はこれでOKのはずですが、manifestが読み込まれないので以下の工程を追加。

## 4. nuxt.config.tsにmanifest.webmanifestを読み込ませる
```
export default defineNuxtConfig({
  app: {
      link: [
        { rel: "manifest", href: "/manifest.webmanifest" },
      ]
  }
})
```

以上でPWA化が完了です。
Laravelでemailが他人と重複していた時に登録できないようにするには

# この記事の背景
Laravelでユーザー編集画面を作っていた時に実装したことです。
バリデーションの設定をする時にemailを設定していました。

```UserRequest.php
public function rules()
    {
        return [
            #省略,
            'email' => [
                'required', 'string', 'email', 'max:255']
            #省略,
        ];
    }
}
```
しかしこれだとemailが他人と重複していても登録できてしまいます。
アドレスがわかったら勝手にログインされて勝手に他人に編集されたりします。

# 解決法
下のコードを追記します。

```
Rule::unique('users')->ignore($this->id)
```
これはLaravelフレームワークのバリデーションルールです。


> Chat GPIより参照　　　これは、「table_name」という名前のデータベーステーブルにおいて、特定のIDを持つレコードを除いて、指定されたカラムの値が一意であることを検証するために使用されます。具体的には、ignore($this->id)は、バリデーション中に現在のモデルインスタンス（例えば、フォーム送信時に更新されるユーザープロファイル）を除外するために使用されます。つまり、同じ「table_name」テーブル内で、そのカラムの値が他のレコードと重複することを検証するために使用されますが、現在のモデルインスタンス自体は重複を検証しないようになります。

コードにするとこうなります。
```UserRequest.php
public function rules()
    {
        return [
            #省略
            'email' => [
                'required', 'string', 'email', 'max:255',Rule::unique('users')->ignore($this->id)
            ],
            #省略
        ];
    }
```
バリデーション のテストしてみたらログイン時に登録済みのユーザーはログインできなくなりました。
Next.jsにemotionを導入する時にstorybookにスタイルが当たってくれない問題

## この記事について
以下の条件を満たす時、アプリ側とstorybookのemotionの設定が異なっててめんどくさかったので自分なりの対処法を記事にしました。
* Next.jsでbabelを使いたくない
* storybookのビルダーがwebpackの場合

## 環境

| ライブラリ | バージョン |
|:-:|:-:|
| Next.js  | 13.3  |
|  storybook | 7.0.2  |
|  @emotion/react | 11.10.6  |

## 本題
突然ですが`Next.js`で`emotion`を動かす方法は現状2種類あります。
* `babel`を入れて`@emotion/babel-preset-css-prop`を使う
* `ts.config.js`で以下のように設定する
```tsconfig.json
"compilerOptions": {
    "jsxImportSource": "@emotion/react",
}
```

## Next.js側とstorybook側の設定

### Next側の設定
nextはswcを使っていたのでbabelを入れたくありません。よって2番目を使いました。
なぜtypescriptで設定できるかについてはこちらの記事をどうぞ

https://qiita.com/kyntk/items/db5ec6fea3b70bf06dec

### storybook側の設定
できれば同じようにtsconfigからやりたかったのですが、`StorybookConfig`の`typescript`のプロパティに`jsxImportSource`がなかったので諦めました。
storybookには元々babel/coreが入ってるということで以下のような設定でプラグインをいれたら動きました。

```bash
$ npm install --save-dev @emotion/babel-preset-css-prop
```


```.storybook/main.ts
import type { StorybookConfig } from '@storybook/nextjs'
import path from 'path'

const config: StorybookConfig = {
// 中略
  babel: async (options) => {
    options.presets?.push('@emotion/babel-preset-css-prop')
    return options
  },
}
export default config
```

## 感想
ちなみに、`storybook`のビルダーを`vite`にする場合はtsconfig.tsと同じように設定できるらしいです。

https://zenn.dev/chot/articles/5c466461fd55d8
Windows上で LLVM のインタプリタ lli.exe を使う

msys2 を使っていて、以下のコマンドで clang (mingw-w64-x86_64-clang) と llvm (mingw-w64-x86_64-llvm) がインストールされますが・・・

```
pacman -S mingw-w64-x86_64-clang
```

llvm に含まれる lli.exe を(ちゃんと)起動するための手順(作法)をいつも忘れてしまうのでメモを残しておきます。

```
$ ls
main.cpp

$ clang -emit-llvm -S main.cpp

$ ls
main.cpp main.ll

$ lli ./main.ll
JIT session error: Symbols not found: [ __main ]
C:/ProgramData/.software/msys2/mingw64/bin/lli.exe: Failed to materialize symbols: { (main, { __orc_init_func../main.ll, $../main.ll.__inits.0, main }) }
```

`lli ./main.ll` として起動してもエラーになってしまいます。

正しい起動の仕方(MINGW64専用)はこれです・・・

```
lli --extra-archive=/mingw64/lib/gcc/x86_64-w64-mingw32/12.2.0/libgcc.a --extra-archive=/mingw64/lib/libmingwex.a ./main.ll
```

`--extra-archive=/mingw64/lib/libmingwex.a` はなくても起動しますが、見つけたサイト(失念してしまいましたが)に書いてあった通りにやってます。

libgcc.a があるフォルダが 12.2.0 というバージョン番号の下なので、バージョンが上がっても起動できるように起動シェルを作って利用しています：

```bash:run-lli.sh
#! /usr/bin/env bash
set -uvx
set -e

clang -emit-llvm -S main.cpp

LIBGCC=`find /mingw64/lib/gcc/x86_64-w64-mingw32 -name libgcc.a`
lli --extra-archive=$LIBGCC --extra-archive=/mingw64/lib/libmingwex.a ./main.ll
```

lli を使ってインタプリタやコンパイラ・トランスパイラを開発してね。

それでゃ！
Laravelで403のエラーが出た時の対処法

# この記事の背景
ユーザー編集の画面を作成していた時に、発生しました。
更新ボタンをクリックしてユーザー情報を更新した時に403のエラーが出ました。

![スクリーンショット 2023-04-16 23.32.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/8260dcbf-bfc4-70c4-8a0a-28b9f5e88a41.png)

原因は資料を見てわかりました。

# 原因
このフォームリクエストを送信するための認証情報がないことが原因でした。


# 解決策
⚫︎⚫︎Request Request.phpのpublic function authorize()の中の```falseをtrue```に変えます。
これで解決しました。

```⚫︎⚫︎Request Request.php
* Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; //ここを修正
    }

```


# 資料

https://zenn.dev/kazushino/articles/aabe171816c73153b8c3

https://qiita.com/miriwo/items/41381c6d5df7e860a608
Synology DiskstationのOpenVPNでiPhoneから接続できない

# 前書き
今までラズパイのpivpnでVPN環境を作っていたのですが、
SynologyのDS220+を購入したことをきっかけにこちらに巻き取りたいなと思って構築しました。

が、iPhoneからVPN接続できない…。
ポート開放もできている。
参考にしたサイトと同じ設定になっている…。
でも証明書が不正と怒られる…。

# 急いでいる人向けに結論から

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341017/a99248e7-106b-fd09-5d87-d419c29a12cd.png)
サーバーCNを証明　のチェックを外しましょう。
これで何故解消するのか？は謎です。

OpenVPN2.3以降でサポートされる機能です。というInformationはありますが、
現時点でのiOS版の最新Verは3.3.0。
ライブラリのことを指しているのかな？と思いましたが、3.3.0のリリースノートには
> Updated OpenVPN3 library to 3.6.

とありますし…。
詳しい人教えてください…。

# 超ざっくり構築手順

意外と情報がなかったのでやったことをサラッと書いておきます。

1. パッケージセンターからVPN Serverをインストールする
1. 全般設定　の　新しく追加したローカルユーザにVPN権を与える　のチェックを外す
1. 特権　で必要なユーザにのみOpenVPNにチェックを入れる
1. OpenVPNタブにて以下設定する
    1. OpenVPNサーバを有効にする　にチェック
    1. ポートはUDP1194。ルーターも忘れずに穴を開けておく。
    1. 暗号化：AES-256-CBC
    1. 認証：SHA512
    1. Mssfixオプション値：1450
    1. クライアントにサーバのLANにアクセスさせる　にチェック
    1. TLS authキーを認証　にチェック
    1. サーバCNを認証　のチェックを外す
1. エクスポートしてVPNConfig.ovpnの以下の行を編集
`remote YOUR_SERVER_IP 1194` の `YOUR_SERVER_IP` をドメインなりIPに置き換える
`#redirect-gateway def1`の先頭の`#`を削除する
1. iPhoneにOpenVPNアプリをインストールして、何らかの方法でiPhoneにVPNConfig.ovpnを送ってOpenVPNに送り込む。
私はSynology Driveを使ってファイルを開き、共有でOpenVPNを指定してインポートしました。
1. OpenVPNアプリで上記ファイルを登録する際に、ユーザ名とパスを入れる。証明書はNoneでOK。
1. 接続する。めでたしめでたし
文学部卒社会人が大学院で人工知能研究に挑戦〜6日目〜

本日は授業はお休みです。

Qiitaがあまりよくわかってないまま、日記のように使ってしまって他のですが、以下のような記事もあることから、あまり良くないことのように思い始めました。プログラミングに関する内容を投稿する場のため、不愉快に感じられてしまう方がいるかもしれないのでちょっと考えようと思いました。※とりあえず一週間はこの形で継続します。

[Qiitaでよく見る、よくない記事](https://qiita.com/sax_/items/3c4d902fff257bf5fe66)

## 本日の学習内容＆時間
自習：120分
-　研究テーマ検討
計：120分（約2時間）
Webの画面をPDFにしようとした話

はじめに
=

先日こんなことを言われました

Webの画面をそのまんまPDFにして
DLしたい！！！


「（え、Webの画面なら印刷画面開いて
PDFをDLしたらよくない・・・？？？）
わかりました！！！」

ということで考えていく

1.画面を画像として保存
2.メモリに保存した画像をPDFに変換

これで行こうと思ったのですが
画面の比率がひどいことになりました
原因は画像化する際に解像度が著しく落ちるためです
画像なんてひどくて
見れたもんじゃない

初期の白黒のテレビくらい画像がぶれています
現代っ子の僕にはとても見れたものではない

じゃあ
JavaScriptでごり押しできないか・・・？

調べたらたくさんありました
そういう便利なやつ

方法としては
Html2canvasでcanvasに画面を画像として保持
jsPDFでPDF出力
というお手軽簡単！！
キューピーもびっくり！！！

ということでやっていきましょう

以下はHTMLに埋め込むスクリプトです


```javascript
function [任意の名前](){
		html2canvas(document.querySelector("#[後述1]"),{
            scale:1
			allowTaint:true,
			useCORS:true,
		}).then(canvas => {
            //canvasに保持
		    var img = canvas.toDataURL("image/png");
            //PDFを作成
		    var doc = new jspdf.jsPDF();

		    var width = doc.internal.pageSize.width;
			doc.addImage(img,'PNG',0,0,width,0);
			doc.save("[任意の名前]");
		});
	}
```
とざっくりこんな感じ

後述1の部分には
PDF化したいHTMLの<div id=~~~~>
の部分を#~~~~という形式でぶち込もう

また、事前準備として
・jsPDF
・HTML2canvas
が必要なので

URLをScriptに入れ込むか
事前にフォルダに入れておこう

どちらの場合でも動くことは確認できたので
問題ないかと思われる

tymleafなどを使用しているとタグがやや
tymleaf寄りになってしまうので
その部分だけ注意が必要かもしれない。

以上、覚書
【Python】「デコレータ」「ジェネレータ」「イテレータ」まぎわらしい用語を見比べてみた

## それぞれの意味を整理してみる

### デコレータ
すでに存在する関数に対して、処理の追加や変更を行うための機能
Python には以下のデコレータが標準で用意されている

- `@classmethod` ・・・　クラスメソッド(インスタンス化しなくても直接呼び出せるメソッド)を定義
- `@staticmethod` ・・・ 静的メソッド(クラスメソッドと同じくインスタンス化せずに呼び出し可能)を定義
- `@property` ・・・ 変更できないプロパティを定義

### ジェネレータ
リストやタプルと同じ機能を持つオブジェクトを生成することができる機能
リストやタプルと同じように　for で取り出すことが可能

### イテレータ
要素を1つずつ取り出せるオブジェクト
リストにできなくて、イテレータオブジェクトにできる機能は、次の要素を尋ねること

## それぞれの基本形を見比べる

### デコレータ
'Before the...' と 'After the...' の間に、'Hello!' を表示されるように、 @my_decorator の部分で デコレート(修飾)しています。
```py
def my_decorator(func):
  def wapper():
    print("Before the function is called.")
    func()
    print("After the function is called.")
  return wapper

@my_decorator
def say_hello():
  print("Hello!")
  
... say_hello()
...
Before the function is called.
Hello!
After the function is called.
```

### ジェネレータ
yield で1つずつ要素を作っています。
変数 items に格納し、for文で繰り返し取り出しています。
```py
def generator_items():
    yield 'a'
    yield 'b'
    yield 'c'

items = generator_items()
for item in items:
...    print(item)
...
a
b
c
```

### イテレータ
iter() で直前に作ったリストと同じ要素が入っているイテレータオブジェクトを生成しています。
next() で次の要素を尋ねています。次の要素が無くなったので、最後に 'StopIteration' と返ってきています。
```py
list = ['a', 'b', 'c']
items = iter(list):
for item in items:
...    print(next(item))
...
a
b
c
StopIteration
```
クラウド環境の根本的な意味とは？

お疲れ様です。キムです。
(日本語がおかしくて少し文章を修正しました。2024-05-24)

---
今回は自分がインフラエンジニアとして約１年間ほど働きながら感じたことと自分なりに考えたことを投稿します。話題はタイトルの通り、クラウドに関する内容です。


#### システムエンジニアとクラウドエンジニアの違い
クラウドエンジニアはシステムエンジニアの中に含まれていると思います。
最初はシステムエンジニアとクラウドエンジニアの業務範囲を把握する必要があります。

そもそも、同じエンジニア職だけど一体何が違うんだろう。。と自分も思いましたが、
最近、とあるブログを見てようやく何となく分かるようになりました。

この記事では、「クラウド」という言葉がマーケティング的な言葉だと言っています。
クラウド環境にサーバーを構築したと言え、結局クラウド環境の基盤になるローカルマシンがあり、そのローカルマシンのリソースを借りることに過ぎないと思います。
まとめすぎちゃったのですが、基本的にリソースを販売している概念は変わらず、
誰がリソースを売っているのかがポイントです。

よく使っているクラウド環境は　AWS、GCP、Azureがあり、
各ベンダーことに名前が違うので難しいのではないかと思いますが、
簡単にオンプレミスの環境がそのままクラウドに行った。。と思えればいいかと思います。
AWSであればVPC、EKS、EBSなどをオンプレミスだと思えば理解が早いと思います。
(※VPC＝社内ネットワーク、EBS=HDD　みたいに)

##### では、難しいことは何でしょうか。
答えは、このクラウド環境をどれだけ上手く使えるのかです。

VPCのデザインをどれだけしなければならないのか、パブリックとプライベートの違いは何か、どうすればよりセキュリティを強化できるのか。どのようなパターンがコスト的にメリットがあるかなど、ベストプラクティスに行くまでの過程が相当難しいです。

これらは IaaS / SaaS / PaaS に分けられますが、
この区分の基準は管理領域が誰にあるかに区分します。
IDC　ー＞　Hosting
OS　ー＞　IaaS
App　ー＞　PaaS
data ー＞　SaaS
例えば、AWSのEC2にWindowsServerを建てると？　これはIaaSです。
PaaSは？ECS、EKS　/　SaaSはAWSのRDSなどになります。

では、ベンダーが具現して提供しているクラウドサービスをうまく使うのがクラウドエンジニアでしょうか。私が考えているエンジニア像は、提供しているサービスをうまく使えるとしても、もっと良いサービスがあったら乗り換えて新しいサービスにすぐ慣れる能力が最も重要だと思っております。

その為、自分も最近Linux勉強に力を入れているところです。
IaCやKubernetesなど一つのベンダーに従属せずに、オンプレミスが効率であればオンプレミスを、半分はオンプレミス、半分はクラウドのハイブリッド環境、もし既にAD環境があってM365導入も検討している場合はAADなどで十分行けますので、々AWSにこだわる必要がないということです。


----
#### まとめ
話が広がったのでまとめます。

1. クラウドエンジニアはシステムエンジニアの中に含まれている概念
2. クラウドエンジニアでも、Linuxは重要だ。
3. クラウドが難しいのは、サービス名が違うからだ。
4. 最終的にはオンプレミス・クラウド両方構築できるエンジニアを目標にする。
　（自分にとってもエンドユーザーにとっても。。)

以上です。
classを＜div＞でつけるか、＜h＞や＜p＞などでつけるか迷ったときの考え方　Part2

前回に続いてのclassについての記事です。
初めてのジーズでの課題でこの点に非常に苦しめられたので、備忘録として記載します。

悪戦苦闘している自分の姿が、プログラミングを始めようとしている誰かの参考や励みになれば幸いです。
（今日の昼くらいにわからなくて泣きそうになりました…でも泣いてません。）

<h2>結論

最初にデザイン（CSS）を考えた際に、「インライン要素が良いか。ブロック要素が良いか。」を考えてclassの付け方を判断する。

3日前の自分とは結論が打って変わっています。
divだけで戦える限界は思ったより近かったです…笑
（というよりほとんど戦えていません。）

とはいえ自分もやっとマサラタウンでポケモンを選ぶことができ、今から物語を開始できるのかと思うと感無量です！

<h2>具体例

基本的には、初学者は量を書くために「迷ったらdiv」で進める方法で最初は問題ないかと考えております。
ただ勉強を進めていくとサイトを作る（デザイン）にあたって、インライン要素かブロック要素かを見極める必要があります。
これを見極めれないと、一生作りたいものは作れないです。

私はこれに2日かかりました…:skull:

例えば、画像の上にテキストを乗せる場合です。
この場合は、デザインによって①divでclassをつけないといけない場合、②＜p＞タグ等でないといけない場合があるので要注意です！

私はず〜っと、
「なんか画像の横にテキストがいくんだけど！」
「今度はテキストが消えた…！？（本当は画像の下にいっているだけ）」
「頼むから画像の上にいってくれ…:bride_with_veil_tone2:」
「まじでだめだ…わからなすぎる」

など悩みまくり、神頼みまくりでした。

<h2>ブロック要素とインライン要素

とはいえインライン要素かブロック要素かを上記を取り組むためには、見極める能力が必要です。
見極め方ではないですが、2つの要素について特徴を下記にて記載します。

・インライン要素…同世代なら誰とでも対等に話せる人（親には無理…）
→改行が入らない、高さや幅の指定ができない。

・ブロック要素…天皇の息子（どんな時も親と一緒、親が決めたルールを守りまくる。）
→改行が入る、高さや幅の指定ができる。

めっっちゃくちゃ厄介なことはどちらも「中央配置できる」ということです！
下記は私が散々、やられてきたcssですので皆様くれぐれもお気をつけください！

align-items: center;
margin:auto;
justyfy-contents:center 

彼らについては私ももっと理解が深まったら、共有させていただきます！

<h2>まとめ

classを＜div＞でつけるか、＜h＞や＜p＞などでつけるか迷ったときの考え方としては下記です。

①迷ったらdiv！（量を書くために、修正しやすい）
②デザインの構成からインライン要素、ブロック要素のどちらであるべきかを見極める。（←今ここ）

これ以降があるかわかりませんが、プログラミング初学者にとってステップの可視化になれば幸いです。
【PHP】オブジェクトを連想配列にキャストする

オブジェクトを配列にキャストすると、オブジェクトのプロパティに対して連想配列のようにアクセスすることができるようになる。
```php
class MyClass {
    public    string $pub = 'public';
    protected string $pro = 'protected';
    private   string $pri = 'private';
}

$myClass = new MyClass();

// オブジェクトを配列にキャスト
$arrayMyClass = (array)$myClass;
echo $arrayMyClass['pub'];

```
出力結果
```
public
```

※クラス外部からアクセスできるのは`public`プロパティに限る、というルールは変わらないため、`protected`および`private`のプロパティにアクセスすることはできません。
「デカ文字英語大文字まとめ」(Arduino UNO)(SSD1306)




「YEAH」とデカ文字32x32で表示する Arduino UNOとSSD1306


https://qiita.com/caa45040/items/487216eebfe4a77a111e


「YEAH」とデカ文字32x48で表示する Arduino UNOとSSD1306


https://qiita.com/caa45040/items/e535434020b3671b1ffc


「HELLO」とデカ文字24x48で表示する Arduino UNOとSSD1306


https://qiita.com/caa45040/items/8e6997e3750100dd10ab


「HELLO」とデカ文字24x32で表示する Arduino UNOとSSD1306(128x32)


https://qiita.com/caa45040/items/174c5dcd594a51f3dde3
iframe内でリンクを貼り、そのリンクをクリックするとiframe内で遷移する方法

メインページでiframe内の遷移を管理し、戻るボタンを実装する方法をchatGPTに聞く。
chatGPT「・・・動作確認をするためには、ローカルサーバーで実行することをお勧めします。さらに、この例ではすべてのファイルが同じオリジン（同じドメイン）に配置されていることを前提としています。親ページのHTMLファイル(index.html)を作成し、iframe要素と戻るボタンを追加します。」
# 親ページの作成
index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iframe Navigation</title>
</head>
<body>
  <iframe id="my-iframe" src="iframe-content.html" width="600" height="400"></iframe>
  <button id="iframe-back">戻る</button>
  <script src="main-script.js"></script>
</body>
</html>
```

# iframe-content.htmlファイルを作成し、リンクを追加する。
iframe-content.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iframe Content</title>
</head>
<body>
  <a href="https://example.com" class="controlled-link">Visit Example.com</a>
</body>
</html>
```

# main-script.jsファイルを作成し、メインページでiframe内のリンクの遷移と戻るボタンを制御する。
```javascript
const iframe = document.getElementById("my-iframe");
const iframeBackButton = document.getElementById("iframe-back");

let iframeHistory = ["iframe-content.html"];

iframe.addEventListener("load", function () {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const links = iframeDoc.querySelectorAll("a");

  links.forEach((link) => {
    link.addEventListener("click", function (event) {
      event.preventDefault();
      iframeHistory.push(link.href);
      iframe.src = link.href;
    });
  });
});

iframeBackButton.addEventListener("click", function () {
  if (iframeHistory.length > 1) {
    iframeHistory.pop(); // 現在のページを履歴から削除
    const previousUrl = iframeHistory[iframeHistory.length - 1];
    iframe.src = previousUrl;
  }
});
```
#### ＜感想＞
iframeを自分のホームページのファイルツリーの表示とファイルの中身の表示に使おうと思う。
戻るボタンと進むボタンも入れる。
読書研修ーWEBを支える技術 第２章 ウェブの歴史

## ２．２ ウェブ以前のハイパーメディア
#### Memex
ハイパーメディアの起源

#### Xanadu
ハイパーメディアという言葉の誕生

#### HyperCard
　APPLE開発した。「カード」という文書を単位に相互にリンクを張り、スクリプト言語HyperTalkによるプログラムを実行できる、いわばスタンドアロンのWebサービス

 

#### ウェブ以前のハイパーメディア（Memex、Xanadu、HyperCard）の問題点：
:::note alert
` 複雑さ` 
:::
 
 

## ２．３ウェブ以前の分散システム：
#### RPC　
**`Remote Procedure Call`**  は分散システムを実現するための技術の一つです。閉じたネット環境で、予め想定した数と種類のクライアントを相手にサービスを提供するとして、RPCを用いるとリモートのサーバで実行しているプログラムをクライアント側から呼ひ出せます。
RPCはその名のとおりリモートの手続き(Procedure)、つまり関数を呼び出すしくみです。

**`有名なRPCシステム`** ：
①Sun MicrosystemsのSunRPC(ONCRPC)やアポロ

②IBMとDECが共同開発したDCE(Distributed Computing Environment)

##### CORBA、DCOM-----分散オプジエクトへの進化

#### ウェブ以前の分散システムの問題点：
| 問題点|具体例|
|:-:|:-:|
|  性能劣化 | 	ネットワーク越しのかんすう呼び出すとき時間  |
|  データ型変換 |  複数言語混在環境 |
|  インタフェースバージョンアップときの互換性 |  古いクライアントに対して下位互換性保てない |
|  負荷分担 |   RPCページは多数のサーバーで負荷分担しにくい|


## ２．４web誕生
#### ハイパーメディアとして

**`利点`**：インターネットを用いているため不特定多数の情報をリンクさせ合うことができ、しすてむをおおきぼ化しやすいという重要な利点を持ってる。

**`欠点`**：情報集中管理はむずい、リンク切れ起こしやすい

 

#### 分散システムとして

オープンで不特定多数を相手にするシステム　
世界中のユーザ　
世界中のサービス　（HTTP）

## ２．５標準化

#### ウェブ仕様策定

１９９４年　W3C（world wide web Consortium) はHTML、XML、HTTP、URI、CSS（cascading　style　Sheet）などの標準化作業が行われた。

特に **`HMTL、CSSの標準化が重要`**

 

#### REST（Representational　State　Transfer）  `リソースの状態の表現`


## ２．６web　APIをめぐる議論
#### SOAPとWS-*　

１．**`SOAP`**：　RPC/分散オブジェクトグループの動きの中で最も基本的なプロトコル

* HTTPをアプリケーションプロトコルではなくトランスポートプロトコルとして扱い、HTTPの上で独自のメッセージを転送

* microsoftがW3Cに提案

* メッセージ転送の方法だけ

２．**`WS-* `**：WS-security、WS-Transaction、WS-ReliableMessagingなどの周辺仕様群

**`敗因`**：
* 技術：インタフェース互換性欠如（けつじょ）　複雑なプロトコル・スタック　ネットワークこしのインタフェースよびだしによるオーバーヘット

* 政治：おなじSOAPやWS-* でも解釈違い相互運用性欠けている

#### SOAP対REST
| 1 | プロトコル | 特徴|
|:-:|:-:|:-:|
|   SOAP|  HTTP、HTTPS、TCP、SMTP、XMPP のような任意の通信プロトコルで動作する |  SOAPAPIはより構造化されています |
|   REST | HTTP プロトコルのみ |   かさばる形式のデータを使用します|


#### RESTの誤解
> RESTを否定の主張は、「Amazon のようにセキュリティが必要ない簡単な Web APIでは、URIをGETするだけのシンプルな方式のほうか利用される。しかし、基幹システムなどでトランザクションや信頼性か必要なときは、REST では機能が不十分である」。

#### RESTの普及

2004年から始まったWeb2.0の流れの中で、GoogleやAmazonといった企業はREST形式のWeb APIを提供し始めます。

Web2.0で重要だったのは**`マッシュアップ(Mashup)`**です。

> マッシュアップとはいろいろなWeb APIが提供する情報を組み合わせて1つのアプリケ-ションを実現する手法のことです。マッシュアップでは手軽さが求められたため、Web APIが提供するリソ-スをHTTPやURIで簡単に操作できる RESTスタイルのほうが受け入れられたのでした。

## ２．７全てがwebへ

ユーザインタフエースはすべてWebで統一され始め、エンドユーザーはWeb だけを意識するようになりました。

**`Ajax(Asynchronous JavaScriptand XML)やComet`**などの技術的ブレークスルーがあります。

これらの技術により、それまではあり得なかったユーザインタフエースと使い勝手が、Webの良さと相まって実現されつつあります。

| 地図ソフト | データボリューム | 扱い方|
|:-:|:-:|:-:|
|  以前 | 	ローカルのハードディスクにインストールして利用  |  １台のPCにインストールできるだけのデータしか扱えない |
| 現在  |  全世界の衛星写真と地図をいつでも最新の状態で利用 | サーバ側で地図データをまとめて保管し、必要に応じて Web を通じて画像をダウンロ-ドしている  |
【Android】アプリ内のGoogleMapでマーカー全てが表示されるようにズームアウトする方法【kotlin】


# はじめに
今回はタイトルにもある通り、Androidアプリ内で使われるGoogleMapで表示されるマーカーを画面内に全て押されたい！と思い調べたところ、ちょうど良いkotlinの記事が見つからなかったので、自分で記事にしようと思いました。

# マーカーの全体表示

マーカーのリストを作り、リストに現在設定されているマーカーを入れます
```
    private val markerList: ArrayList? = null

    private fun googleMapMarkerCreate(location: LatLng) {
        val marker = googleMap.addMarker(
            MarkerOptions().position(location)
        )
        markerList.add(marker)
    }

```

あとはマーカーの全体表示をしたいタイミングで下のコードを入れます。
CameraUpdateFactory.newLatLngBoundsの第二引数の数字はマーカーの全体表示をする際のpaddingを指定します。
個人的にマーカーが複数ある場合は300くらいがちょうどいいかなと思います。
（これより小さい数字だとマーカーと画面の外側が近すぎてマーカーが見にくくなってしまうなと思いました。）

```
   val builder = LatLngBounds.Builder()
   for (marker in markerList) {
       builder.include(marker.position)
   }
   googleMap.animateCamera(
       CameraUpdateFactory.newLatLngBounds(
           builder.build(), 300
       )
   )
```
# 参考
https://blue-bear.jp/kb/android-googlemapsdk%E3%81%AE%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E5%85%A8%E9%83%A8%E8%A1%A8%E7%A4%BA%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%82%BA%E3%83%BC%E3%83%A0%E3%82%A2/
オフラインリアルタイムどう書く問題作成リハビリ #0 の問題

オフラインでリアルタイムに「どう書く」をやるイベントは、私は今主催していません。

そのうちまたやりたいなと思い、問題作成のリハビリということで問題作りました。

問題は「正方形を谷に詰める」という名前で、詳細は
https://nabetani.github.io/q/pages/r0/
です。

実装ができた方はこちらのコメント欄からリンクを張っていただくと見つけやすくて助かります。

似たような問題をもっと解きたいという方は、
https://nabetani.hatenadiary.com/entry/yhpg_list
や
https://nabetani.github.io/q/
に過去問リンク集がありますので、そちらをご覧になると良いと思います。

---
# 補足

イベントは

1. 問題発表
1. みんなで解く
1. 乱数で発表順を決める
1. 時間が来たら休憩（会場の雰囲気で適宜延長する）
1. ひとりひとり、自分の書いたコードを解説

という流れでやっていました。

自分の解説のタイミングでテストが通っていなければ完敗。
休憩までに解けていて、解説のときに決定的にまずい点（バッファオーバーランとか）が指摘されなければ完勝。
それ以外はグレー。　という感じ。

実行時間の制限はないものの、テストを全部通すのに数日を要するということだと解説のタイミングでテストが終わっていないことになるので負け。

入力値の範囲は明示しないけど、テストケースが現実的な時間で終わればいいという気持ち。

解説のときに、要素数やら値やらがすごく大きくても大丈夫なアルゴリズムだという話をすると称賛されるし「テストケース全部通すのにふつうにやったら1時間以上かかるので、マルチコアマルチスレッドを活用してテスト回して、それでも 10分かかってさっき終わったところです。PCホカホカです。」とかだと別の称賛されるとかそういう感じ。
Orange Pi 5 + PX-W3U4 (Armbian 23.02) にてドライバインストールでエラーになる

Orange Pi 5 (Armbian 23.02) に PX-W3U4 をセットアップした記録です。

[ホームページ](https://github.com/nns779/px4_drv) の通り実行すると、ドライバのインストールでエラーとなります。

```
$ sudo dkms install px4_drv/0.2.1
    :
cleaning build area...
cd ./driver; make KVER=5.10.110-rockchip-rk3588 px4_drv.ko.......(bad exit status: 2)
Error! Bad return status for module build on kernel: 5.10.110-rockchip-rk3588 (aarch64)
Consult /var/lib/dkms/px4_drv/0.2.1/build/make.log for more information.
```

エラーの中身は以下の通り。

```
$ cat /var/lib/dkms/px4_drv/0.2.1/build/make.log
DKMS make.log for px4_drv-0.2.1 for kernel 5.10.110-rockchip-rk3588 (aarch64)
Sun 16 Apr 2023 09:53:08 PM JST
'revision.h' was updated.
make[1]: Entering directory '/usr/src/linux-headers-5.10.110-rockchip-rk3588'
  CC [M]  /var/lib/dkms/px4_drv/0.2.1/build/driver/driver_module.o
        :
  CC [M]  /var/lib/dkms/px4_drv/0.2.1/build/driver/px4_drv.mod.o
make[3]: *** No rule to make target 'scripts/module.lds', needed by '/var/lib/dkms/px4_drv/0.2.1/build/driver/px4_drv.ko'.  Stop.
make[2]: *** [scripts/Makefile.modpost:175: __modpost] Error 2
make[1]: *** [Makefile:1896: single_modpost] Error 2
make[1]: Leaving directory '/usr/src/linux-headers-5.10.110-rockchip-rk3588'
make: *** [Makefile:19: px4_drv.ko] Error 2
```

Orange Pi 5 向け `linux-kernel-header` には `module.lds.S`はあるが、`module.lds`がないためこのエラーが発生します。

```
$ ls /usr/src/linux-headers-5.10.110-rockchip-rk3588/scripts/module.lds*
/usr/src/linux-headers-5.10.110-rockchip-rk3588/scripts/module.lds.S
```

以下の手順で module.lds を生成しました。

```
$ su
# cd /usr/src/linux-headers-5.10.110-rockchip-rk3588
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/arch/arm64/kernel/vdso/vdso.lds.S -P arch/arm64/kernel/vdso
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/arch/arm64/kernel/vdso/vgettimeofday.c -P arch/arm64/kernel/vdso
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/lib/vdso/gettimeofday.c -P lib/vdso
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/arch/arm64/kernel/vdso/note.c -P arch/arm64/kernel/vdso
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/arch/arm64/kernel/vdso/note.S -P arch/arm64/kernel/vdso
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/arch/arm64/kernel/vdso/sigreturn.S -P arch/arm64/kernel/vdso
# wget https://raw.githubusercontent.com/torvalds/linux/v5.10/arch/arm64/kernel/vdso/gen_vdso_offsets.sh -P arch/arm64/kernel/vdso
# chmod +x arch/arm64/kernel/vdso/gen_vdso_offsets.sh
# make olddefconfig && make modules_prepare
```

もう一度ドライバインストールすると、今度は成功しました。

```
$ sudo dkms install px4_drv/0.2.1

Kernel preparation unnecessary for this kernel.  Skipping...

Building module:
cleaning build area...
cd ./driver; make KVER=5.10.110-rockchip-rk3588 px4_drv.ko.......
cleaning build area...

DKMS: build completed.
    :
```
静止画像などから自動で動画化、モーション付与、改変などをできる人工知能サービスはあるのか

少し検索してみたが、全自動で完結できるようなものはない.
meta の animated drawingsはさっとキャラクターに動きをつけられる.


# それっぽいサービス
## stable diffusion + multi controlnet
https://gigazine.net/news/20230413-stable-diffusion-multi-controlnet-movie/

<iframe width="560" height="315" src="https://www.youtube.com/embed/CCH9yMVaefw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

- できること
    - 実写映像をアニメ化した動画に変換できる様子
- 所管
    - 凄い.  
    - 記事中の複数の動画を見ると驚異度がわかると思います
    - 実行するにはかなりの手間が必要そう




## dreamix
https://dreamix-video-editing.github.io/?ref=allthingsai

- できること抜粋
    - image to video: 画像とプロンプトを入力し、動画を生成する
        - 例1だと、消防士のおもちゃの写真から、消防士が筋トレしている動画を生成
        - 例2だと、静止画のウミガメが泳ぎ、サメが追加されている
    - video editing: 入力した動画を改変する
        - 例だと、猿がクマに変更されている
        - その他様々改変した比較動画ある

- 所管
    - 製品はまだ無さそう
    - 使用できるようになったら、だいぶ面白そう
    - アニメ特化出来たら、独自アニメとかさくっと作れたりするのでは



## meta animated drawings
https://sketch.metademolab.com/

https://gigazine.net/news/20230414-meta-animated-drawings/

- できること
    - 人間っぽい画像を与えると様々なモーションを付けられる
    - 公式ページから実際に試行できる
    - github から DL して、自分で色々調整できる

- 所管
    - 人間っぽいデザインにちょっとした動きを与えるには良さそう
    - 画像が異様に変形する場合もあるので、スキルが必要そう




## deepmotion
https://garagefarm.net/jp-blog/automatic-motion-capture-with-deepmotion-and-blender

動画から motion capture し, model へ動きを反映するとの事.
忠実に動作を再現できている



## wonder studio
https://3dnchu.com/archives/wonder-studio/

動画内の人物を別のキャラクターへ自動で置き換えられるらしい.
紹介動画を見ると凄いハイクオリティ




## gen-1
https://ascii.jp/elem/000/004/124/4124022/

wonder studioと似ている.
まだ製品としてはない様子だが, 人物入れ替え, キャラクター化など色々できる様子




## d-id
https://www.d-id.com/

- できること
    - 人物画像をアップロードし, その画像の人物が,　ある程度自然に喋る動画を作成できる
    - 人物画像はサービス中でプロンプトで作成することも可能
- 所管
    - 若干不気味の谷が残ってはいるが, だいぶ良い感じ



## monster mash
https://youtu.be/EVMbcXb9b6s

https://monstermash.zone/

- できること
    - 画像から3Dモデルを作成し, 簡単なモーションをつけられる
- 所管
    - 複雑な絵だと難しいかも
    - 動きをつけるにも慣れが必要そう


## deepanime
https://lp.deepanime.com/

- できること
    - アニメ画像の顔に瞬きや口パクを追加できる模様

- 所管
    - 実際に試せないので何とも分からないが、確かに動いている



## crypkoo
https://crypko.ai/ja/

- できること
    - 種となる画像から色々とキャラクターを自動生成できるらしい
    - 紹介動画を見ると、作成したキャラクターが動いているが、サービスとしてはまだの様子
【Linux】構築時の初期設定メモ

Linuxサーバ(CentOS, Almalinux)構築後に行う設定作業をメモしておく。

```bash
yum update -y

# Sudo can be used no password. (Just Intranet.)
visudo

# Create User
useradd <username>
passwd <username>

# Give sudo Authority to created user
usermod -aG wheel almalinux

# Install software packages
tar # For VS Code.
tmux
git
wget
vim
python (miniconda, pyenvy or From AppStream)

# SELinux is disabled. (Just Intranet.)
vim selinux # Disabled

# Auto log.
mkdir ~/logs
vim ~/.bash_profile に script ~/logs/$(date +%Y%m%d_%H%M%S).log を追記

# Enable access with key authentication.
mkdir .ssh
chmod 700 ~/.ssh
vim ~/.ssh/authorized_keys # Register private key of LOCAL
chmod 600 ~/.ssh/authorized_keys

# Disable firewall. (Just Intranet.)
sudo systemctl stop firewalld
sudo systemctl disable firewalld

# Setting static IP.
sudo yum install net-tools
route # Check default gateway
cat /etc/resolve.conf # Check DNS IPadress
sudo nmcli connection modify <NIC> ipv4.addresses "192.168.x.x/24"
sudo nmcli connection modify <NIC> ipv4.gateway 192.168.x.0
sudo nmcli connection modify <NIC> ipv4.dns 192.168.x.0
sudo nmcli connection modify <NIC> ipv4.method manual
sudo nmcli connection down <NIC>
sudo nmcli connection up <NIC>
```
既存WEB APPをDOCKER-CONPOSEを用いてDOCKER化する

# 前提条件
![](https://knowledge.sakura.ad.jp/wp-content/uploads/2019/04/docker-compose-01-04-fix-680x445.png)
- 既存のWEBAPPがあること。今回はrails x postgresql環境で行っています。
- dokcerがinstallされている、ある程度操作方法がわかる
- docker-composeがinstallされている。
- 本記事ではただDOCKER化するだけがゴールです
# DOCKER化してみよう！

今回はこのような至って普通なrails appをdocker化してみます。
![image](https://i.gyazo.com/0ac504e0180da186729aa4af072ef77b.png)
こちらを参考に環境構築しています。
僕はrailsやpostgresqlの知識さっぱりですが、docker化することができたので初心者も是非やってみましょう。


https://docs.docker.jp/compose/rails.html
## ここに用意するもの
docker-composeを利用し、docker化を行うために新たに必要なものは以下のとおりです。
- Dockerfile
- docker-compose.yml
`$touch コマンド`で作成しましょう！
![image](https://i.gyazo.com/139f02594ed3e1c9425a2bef070b5f1e.png)
## Dockerfileを記述しよう
Dockerfileとはdocker化を行うためのコンテナの設計図みたいなものです。
今回はこのように記述しました。
nodeやyarn,rubyとpostgresqlのためにlibpq-devをインストールしたりrailsを起動するコマンドを設定したりしてます。既存のWEB APPによって異なります。

![image](https://i.gyazo.com/cde63c0fb709ca3a37a970cf6924ea87.png)

# docker-compose.ymlを記述しよう
このようなに記述しました。
![image](https://i.gyazo.com/90ca2919ece227926c5b7dd4b6486c17.png)
# config/database.ymlに追記しよう
Rails側のデータベースの設定をしていきます
ENVでdocker-composeで記述した環境変数を読み取っています。
![](https://i.gyazo.com/0c2a65a13dd255d02d44b99dd267e365.png)
# コマンドを打ち込んでいく
準備できたのでコマンドを打ち込んでいきます。手始めに`$docker-compose build`。

:::note info
info
Gemfile.lockでエラーが発生したら、空のGemfile.lockを作成し再度実行して下さい
:::
buildが完了しました。
![image](https://i.gyazo.com/c2f912081254f0ee0d3dc4806a097ec2.png)
## コンテナをrunする
次に`$docker-compose up`でコンテナをrunします。お好みで`-d`でデタッチで起動してもかまいません。
3000ポートでサーバー起動までできたら成功です。
![](https://i.gyazo.com/6da7530e28b604c35b6ef6ad15b16e5c.png)
webコンテナとdbコンテナがrunしているところが確認できます。
![](https://i.gyazo.com/4a2d971c8f6044e84510fb8fb4a32eb5.png)
# データベースの生成
最後にデータベースの生成を行います。`$docker-compose run web rake db:crate`後に`$docker-compose exec web bash`でターミナルの中に入り、`rails db:migrate`します。
![](https://i.gyazo.com/6cffe3bc2fd6dab9ffdb5bef8bb782d7.png)
localhost:3000で確認できたらdocker化成功です！おめでとうございます！
###  (エラーを解消する)
僕の場合、migrate後railsのエラーが発生したのでググって解決します。
![](https://i.gyazo.com/7cdd41ff5c4be03256f3455d11406a56.png)
色々やって
![](https://i.gyazo.com/e7d45d390ea76795c34230eccb1db81d.png)
しっかりレンダリングされました。データの保持も確認できます。
VC++でXMLファイル操作

# はじめに
ベースはネイティブだったのですが、結局タイムアップでVC++ CLIで妥協してしまった...
最初の実装キーワードは持っているんだけど、うまくサイトが見つけられなかったんですよね。
次からはGPTに相談しながら対応してみようかな
（一応、さっきサイト調べ直してこれかぁ～と納得）

# サンプルコード
VC++ CLIならそのまま動くのですが、ネイティブベースだと取得データを加工しないとダメだった
※参考サイトの
```cpp:CppSettingFileOperation.cpp
#include "pch.h"
#include <iostream>

#include <tchar.h>

#using <mscorlib.dll>
#using <System.xml.dll>

using namespace System;
using namespace System::Xml;

void Write(XmlDocument^ doc, String^ target)
{
	XmlNodeList^ list = doc->GetElementsByTagName(target);

	Console::WriteLine(target);

	for each( XmlElement^ element in list )
	{
		Console::WriteLine(L"\t{0}", element->InnerText);
	}
}

int main()
{
    std::cout << "Hello World!\n";

	XmlDocument^ doc = gcnew XmlDocument();
	doc->Load(L"test.xml");

	Write(doc, L"名前");
}
```

# vcxproj設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88262/0626f18a-a25f-a5f2-5a77-5ebd5e292e10.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88262/2ff6e84a-ae3f-40b4-6fd9-9d65b5f42dfc.png)
※vcxprojファイル内の定義
```xml:CppSettingFileOperation.vcxproj
    <PostBuildEvent>
      <Command>copy $(ProjectDir)test.xml $(OutDir)</Command>
    </PostBuildEvent>
```

# 参考サイト
◆C++CLIでXDocumentでXML
　https://suzulang.com/ccli-xdocument-xml/
◆VC++でのXMLの読み込み
　https://dixq.net/forum/viewtopic.php?t=794
　　※この辺りを参考にCLIで対応してしまった。

◆Visual C++ で System::String から Char に変換する
　https://learn.microsoft.com/ja-jp/troubleshoot/developer/visualstudio/csharp/language-compilers/convert-systemstring-char
　　※変換周りとかも考慮しなくちゃいけないから大変だった...

◆プログラム備忘録 C++ での Xml パーサー
　https://ohwhsmm7.blog.fc2.com/blog-entry-441.html
◆C/C++のXML Parserについてよくまとまっているサイト - PIYO - Tech & Life -
　https://blog.piyo.tech/posts/2014-07-21-193000/
　　※これらのサイトで色々種類があることがわかった。

◆MSXML 6.0を使ってみた - Gobble up pudding
　https://gup.monster/entry/2014/02/28/005654
◆XmlLite プログラミング
　https://docs.solab.jp/xmllite/
　　※次はこのサイトベースで作成してみる...かな
読書研修ーWEBを支える技術　第１章

### １．ブラウザ(Browser)-----Webを観覧するソフトウェア
### ２．用途：
<dl>
  <dt>webサイト</dt>
  <dt>ユーザーインタフェース</dt>
  <dt>プログラム用API</dt>
</dl>
    
    
    

### ３．webを支える技術：
| 技術 |  解釈 |
|:-:|:-:|
| HTTP　 |  プロトコル・情報を取得、発注 |
| URI　  |   世界中のあらゆる情報を指し示せる|
|HTML   |  情報を表現する文書フォーマット |
|  ハイパーメディア　 |  テキストや画像、音声、映像など様々なメディアをハイパーリンクで結び付けて構成したシステム |
|  分散システム |  多数のコンピューターをネットワークで接続し、複数のコンピューターが連携して一つの作業を分担するコンピューターシステム |
chatGPT拡張機能(WebChatGPT、Glarity-Summary)を試してみる

## はじめに
ChatGPTに関する情報があふれる中、**[ChatGPT-AIメディア](https://chatgpt-ai-media.com/home)** というサイトを見つけました。
**「世界一わかりやすくchatGPTとAIの使い方がわかる場所」**
・・ありがたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/f764454d-0ee5-fe93-52af-80de11e2e9d8.png)


このサイトの [ChatGPTの基礎〜活用領域を整理！どんな実務に活かせるのかを徹底解説！](https://chatgpt-ai-media.com/posts/other)
という記事を読みました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/d6e8b891-6ac4-abc8-9def-5f2010c0c808.png)
参考になる記事で、その中でChromeの拡張機能がまとめられていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/f5ba622f-ef42-2a39-8630-89ef2da3beb3.png)
拡張機能の追加は導入のハードルが低いのが最大のポイントです。
今回は表の中から、気になった **[WebChatGPT](https://chrome.google.com/webstore/detail/webchatgpt-chatgpt-with-i/lpfemeioodjbpieminkklglpmhlngfcn)** と **[Glarity-Summary](https://glarity.app/)** の2つを試すことにしました。

※今回の実験はOpenAIのChatGPTにサインインできていることを前提とします。
※chrome拡張機能への具体的な追加方法については、[こちら](https://support.google.com/chrome_webstore/answer/2664769?hl=ja)などを参考にしてください。

## WebChatGPT
ChatGPTは2021年までのデータを学習させていると言われています。
WebChatGPTは、Webから関連する結果を使用して、ChatGPTのプロンプトを拡張し、2021年以降の情報を踏まえた答えを返してくれます。
(WebChatGPTの内部で使用している検索エンジンは、ユーザーの個人情報を保存しないことで知られる[DuckDuckGo](https://duckduckgo.com/)とのこと)

早速追加してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/98b9f62b-5531-1662-1bc0-92a0245d1f6f.png)

追加しても、ChatGPTの画面上変化がありませんが、ChatGPTの応答結果が変わります。
**「日本の流行語を教えてください」** を例に見てみます。

* **WebChatGPTを使用していない場合**
![拡張機能off.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/ceeaa6ea-97ce-decd-6c86-70a100cbfd59.png)
2021年までの情報しか学習していないため、2022年についての記述がありません。

* **WebChatGPTを使用した場合**
![拡張機能on.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/ad64b8ed-bf8c-2967-62fa-614bd68def75.png)
追加したことで、2022年の情報が反映されるようになりました。

## Glarity-Summary
この機能は、Google検索結果やYouTube動画と一緒にChatGPTの要約を表示してくれます。
早速使ってみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/41905321-0d58-ffea-abd6-5f342a5ac256.png)
現在行われている統一地方選挙関連で **「統一地方選挙 2023」** で検索してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/f949a818-3030-53f6-55b6-3671957aee12.png)

画面の右側にGlarity-Summaryによる要約が表示されます。
以下のようなことが見えました。
* 2023年の情報が反映されている（要約を読む限り、内容に誤りがなさそう）
* 要約文の中に引用が記載されており、詳細が見たい場合にはリンクをクリックすることで元のソースにたどれる
* 検索の都度右側に要約が表示されて、若干わずらわしく感じるところがある

このGlarity-Summaryの大きな特徴は、検索だけでなく、Youtubeの要約もしてくれる点です。
試しに、毎週金曜日に配信される、芸人のプチ鹿島さんとラッパーのダースレイダーさんが政治を面白おかしく語る **[ヒルカラナンデス](https://www.youtube.com/hashtag/%E3%83%92%E3%83%AB%E3%82%AB%E3%83%A9%E3%83%8A%E3%83%B3%E3%83%87%E3%82%B9)** の動画で試してみました。
![ヒルカラナンデス.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684711/c49dcaa6-ca38-3a77-3bdc-e25ffa05957a.png)
検索と同様、動画の右側に要約が出ることが見えます。
以下のようなことが見えてきました。

* 登壇者の情報誤り（×　「俳優のダースレイダーさん」　→　〇　「ラッパーのダースレイダーさん」　など）
* 1時間以上の動画を3行程度のハイライトでまとめてくれるものの、誤った内容を含んでいる場合もある
* ハイライトの冒頭に、関連する絵文字がつく

## まとめ
今回のトライアルにより、2022年以降の情報を踏まえた応答や要約ができる拡張機能があることがわかりました。
一方で、誤った内容を含む場合があることがわかりました。
ネガティブポイントを知った上で、使い方を考えていこうと思います。

## 参考
* [ChatGPTの基礎〜活用領域を整理！どんな実務に活かせるのかを徹底解説！](https://chatgpt-ai-media.com/posts/other)
next/fontでemotionを使って全体に適用するフォントを設定する


next.js 13.3からnext/fontのインストールが必要なくなりました。
こいつをemotionで設定をする部分でちょっとハマったので備忘録も兼ねての記事です。

## next/fontとは

next/fontの新しいフォントシステムは、自動自己ホスティングとGoogle Fontsの便利な利用を提供します。最適なウェブフォント読み込みとレイアウトシフトゼロを実現し、パフォーマンスとプライバシーに優れています。これにより、ブラウザからGoogleへのリクエストもなく、効率的なフォント管理が可能です。

## emotionのGlobalコンポーネントと組み合わせて使う方法
next/fontをemotionと一緒に使いたいのですが、少し難航しました。
所々省略してますが、以下のスニペットでうまくいきました

```src/styles/global.ts
import { Zen_Kaku_Gothic_Antique } from "@next/font/google";

const Zen_Kaku_Gothic_Antique_Normal = Zen_Kaku_Gothic_Antique({
  weight: '400',
  subsets: ['latin'],
})

export const style = {
  body: Zen_Kaku_Gothic_Antique_Normal.style,
}
```

```app.tsx
import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'
import { style } from 'src/styles/global'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={style} />
      <Component {...pageProps} />
    </>
  )
}
```


## 備考
`Globalタグ`に入れるスタイルはオブジェクトスタイルと違ってセレクタも指定する必要があります。ここで勘違いしてハマってましたw

https://emotion.sh/docs/globals
Power Automateでデスクトップフローとクラウドフローで同じファイルに対してロックを回避して処理を行う方法

## 背景
複雑にPowerAutomateのデスクトップフローとクラウドフローを連携しなければいけない事例が発生した。
大まかに言うとデスクトップフローとクラウドフローで同じファイルを見に行こうとして場合にロックがかかってしまう事への回避策について記す。
状況としてはかなり特殊であり、おそらく同様のことで悩む人はいないと思うが、自分用のメモとしての意味合いを込めてこの記事を残しておく。

## 要件
- SharePointOnline(以下SPOとする)上にあるエクセルファイルをPowerAutomateDesktop(以下PADとする)を使い、ローカル上のSQLiteのテーブルに内容をインポートする。
- インポートが完了したファイルはSPO上の元のフォルダから別のフォルダに移す。
- なお、PADのプレミアムライセンスは使えないため、PADのSPO用のコネクタは使えない。


PADのプレミアムライセンスが使えないというのが今回の問題のキモとなっている。このコネクタさえ使えればそもそもロック問題は発生しなかったはず。

## 実装方針
- エクセルファイルを入れるフォルダ(以下テンプフォルダとする)ローカルフォルダとSPOフォルダはリンクフォルダを使って同期を取る。
- テンプフォルダからエクセルファイルを読み込んでSQLiteへインポートするのはPADフローを使う。
- PADフローでインポートが完了した時にインポート完了用のファイルを作成し、インポート完了用フォルダに入れる。これもSPOとのリンクフォルダにする。
- SPO側のインポート完了用フォルダにインポート完了用のファイルが作成された事をトリガーにして、クラウドのファイル移動フローを起動しファイルを格納先フォルダに移動する。

## 問題発生
インポートフローは問題なかったのだが、その後のクラウドでファイルを移動する時にファイルにロックがかかっているというエラーが発生した。
実際に対象のファイルを手動で移動や削除をしようとしても操作ができなかった。
時間が経てば(10分ほど)ファイルの操作は可能になるが、ただでさえフロー自体は遅い上にどれだけ待てばいいか不確かなため待機処理を入れて解決する方法は避けたかった。

## 解決方法
後述でいくつか試してもうまくいかなかったアプローチ方法も記載する。
うまくいった方法としてはシンプルにローカルのテンプフォルダから別のローカルの作業フォルダの方にコピーしてそこからインポートを行うという方法だ。
インポートフローの中で作業フォルダの作成とファイルコピーを行う処理を追加している。

## うまくいかなかったアプローチ

### ファイルの移動
そもそもこれでうまくいかなかったのが事の発端だ。
この方法だと対象のファイルに対しロックがかかっているということで、エラーが発生した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332385/1a19c9e2-c1d5-697f-659e-04f580494540.png)

### HTTPリクエストの送信
http://www.cleverworkarounds.com/2021/02/21/how-to-clear-annoying-excel-file-locks-in-power-automate/
上記の記事を参考にし、HeaderにPrefer:bypass-shared-lockを追加して移動リクエストを送信する。
この方法を使えばロック状態を無視してファイル移動ができるはずだったが、、、結局ロックは解除できず。ロックがかかっていない状態ならファイル移動自体はできた。

### チェックイン・チェックアウト
https://powerusers.microsoft.com/t5/Building-Flows/Unable-to-Delete-file-File-is-locked-for-shared-use-by-me/td-p/762698
上記の記事を参考にし、チェックイン・チェックアウト処理を試みた。
チェックアウトを行おうとした時点でロックエラーが発生してしまった。
Windows Terminal + Vim 使用時の諸問題（91 文字問題、 1c 問題）の解決策

# 動機

Windows Terminal (Windows 11 + WSL + Ubuntu) で Vim を使おうとしたときに、タイトルに記載したとおり 2 つの障壁（ここでは 91 文字問題および 1c 問題と呼びます）に当たりました。しばらく不便な思いをしながら使っていましたが、文献を漁ってみたところなんとか解決策に行きつくことができたため記録しておきます。

# 環境

```sh
Windows ターミナル
バージョン: 1.16.10262.0

$  cat /etc/*release | grep pretty
PRETTY_NAME="Ubuntu 22.04.2 LTS"

$ vim --version # ローカルや ssh 接続先の複数環境で再現
VIM - Vi IMproved 7.4
VIM - Vi IMproved 8.2

$ echo $TERM
xterm-256color

 # Vim 上で :set ttymouse した時の応答
ttymouse=xterm
```

# 『91 文字問題』

`set mouse=a` ありで Vim を使用する際に各行の 91 文字目までがマウス操作可能、それ以降が不可能となる問題です。文字数については 93, 222, 224 と論じられている文献もあります。

下記 Stack Overflow の質問に対する回答に記載されているとおり、 ~/.vimrc に `set ttymouse=sgr` を追加することで解決されます。

https://stackoverflow.com/questions/71078813/cannot-click-to-move-the-cursor-after-the-column-91-in-vim-in-windows-terminal

# 『1c 問題』

Vim で何らかのファイルを開くといきなり `1c` というコマンドが入力された状態となってしまい、これを消さないままキー入力やマウス操作をすると望まない文字列入力・削除が発生してしまうという問題です。起動直後のみの問題でそれ以降は通常通り使えます。

Windows Terminal の GitHub リポジトリのとある issue でも論じられています。

https://github.com/microsoft/terminal/issues/12164

技術的な詳細は理解できていませんが、環境変数 `TERM` の変更が効果を持つらしいのでこれを利用します。

利用できる `TERM` の選択肢は `toe -a` コマンドで閲覧できます。デフォルトでは `xterm-256color` となっていて、私は古い環境に ssh 接続して作業することが多いためどの環境にもありそうなものを選びたい一方で 256 色は使いたいということを勘案して、なんとなく `screen-256color` を選んでみます。

最初はローカルで `export TERM=screen-256color` してみたところ、 Vim 自体は問題なく動き同問題も解消されましたが、 `less` コマンドなどで見た目が良くない方向に変わってしまったので、下記のとおり Vim 実行時のみ利用することにしました。少し使用してみた感じでは見た目に全く違いはなく、使い勝手に関する問題も発生していません。

```sh
alias vim="TERM=screen-256color vim"
```
文系卒3年目令和5年春応用情報技術者試験合格体験記（受験記）

# 自己紹介
文系大学卒3年目になったばかりのインフラエンジニアです。業務では運用作業をしています。
保持資格：AWS SAP,LPIC2,ITパスポート


# 使用教材
- 応用情報過去問道場
誰もが知っているであろう定番サイト。これが無料なのは本当にありがたいです。
- 午後問題の重点対策
誰もが知っているであろう定番参考書。午後問題はこれを中心に学習しました。
- Udemy
d..理解が乏しいものは動画で学習しました。
- 出るとこだけ！応用情報[午後]
青い午後参考書。少し利用しました。
- 午前テキスト
最後にちょっと使いました。
- ChatGPT PLUS
試験勉強期間中にGPT4がリリースされました。本当に素晴らしいです。
- Notion
教材ではないですが、知識をまとめるのに利用しました。

# 学習期間
2ヶ月弱。ちょくちょくサボりつつ毎日4時間ほど勉強したので200時間強くらい。
ちなみに学習計画はChatGPT3.5に立ててもらってその通りにやってみました。
午前と午後の比率は2:1が良いとのことだったのでその比率でやりました。ちょうど良かったです。
200時間という時間についてもちょうど良かった。AIすごい。

# 試験結果
正式にはまだ出ていませんが、各サイトで公開されたものを参考に自己採点しました。
午前：59/80 = 74%
午後：70%くらい

# 学習記録
最初に午前試験に取り組み、過去問道場で指定した範囲の過去問を分野別に解いていきました。最初は全て調べながら回答し、2週間かけて1周しました。その間に復習を挟み、1週間をかけて復習しました。3周目で得点率が8-9割に上がり、1ヶ月経過しました。

午後の勉強では、1週間で重点対策テキストを使って5分野を4年分1周しました。過去問道場の午後問題は解きづらかったので、紙で解くことを選びました。ネットワークとセキュリティの得点率が低かったので、1週間でUdemyで学習しました。特にセキュリティではインシデント発生映像が役立ちました。

最後の1週間では、午前の模試で57.5%だったため、得点率の低かった分野をテキストで復習しました。各チャプターの練習問題で不足している部分を特定し、テキストとUdemyで学習しました。2日後の模試では77.5%に上がりました。最後に午後問題を解き、セキュリティ、アーキテクチャ、プログラミングでそれぞれ90%、100%、70%を達成し、初めて完答できて嬉しかったです。


# 試験本番
試験の2時間前に、マクドナルドで最後の復習を行いました。9時に会場に到着しました。午前試験は120分で途中退出し、近くのカフェで74%の自己採点結果に安心しました。

午後試験ではプログラミングに40分を費やしましたが、解けなかったため一瞬不安になりました。他の分野もいつもより解けない感じがしました。しかし、自己採点の結果、7割程度の得点率が予想されたので安心しました。8割を目指して勉強していたため、少し下振れても合格圏内に入ることができました。

# 今後について
秋はセキスペを取得したいと思います。
やはり、IPA試験は半年に一度しか受けられないので、下振れたとしても合格圏内にいる必要があります。
秋も余裕を持って受験したいです。


# 余談
模試を実施している機関があるそうなので、モチベーション維持のためにも秋は受けてみようかと思います。
ちなみに今回は途中でITパスポートを挟みました。学習記録と試験本番の部分はGPT4が書きました。
AWS経験1年のインフラエンジニアが10時間でAWS Certified Data Analytics に合格した方法

## はじめに
AWS Certified Data Analytics- Specialtyに短期間の学習で合格できたので、最短で合格したい方向けに記事を投稿します。

## 筆者のレベル
・データレイクとデータウェアハウスの違いがわかっていない
・QuickSightのハンズオンは一度したことがある
・AWS Solutions Architect Professionalを半年前に取得済み
・普段の業務はインフラメインで担当しており、AWSに触れることは多いがデータ分析経験はほぼなし

## 成果
勉強時間は10時間で、795点でした。
決していいスコアではないですが、思ったよりも短い時間で合格できました。

## 勉強スケジュール

以下の表にまとめたように、10時間の勉強で合格できました。

|時間(h) |行ったこと　　　  |
|---------|-------------|
|2  | Qiita合格体験記を読んだり、社内で試験に合格していた人にヒアリング|
|3  | 『AWSではじめるデータレイク』を読んで基礎概念をインプット |
|4  | 過去問演習 |
|1  | 間違えた問題の再復習 |

## Qiita合格体験記を読んだり、社内で試験に合格していた人にヒアリング
「AWS DataAnalytics」などでキーワード検索し、合格体験記を読みました。記事内で紹介されている、書籍や動画にはすべて目を通していないのですが、他の方がどのような方法で勉強をしているのかを確認しました。また、重点的に問われる分野についてインプットしました。

## 『AWSではじめるデータレイク』を読んで基礎概念をインプット
* 基礎知識が不足している状態で過去問を解いてもただの暗記になってしまうので、 『AWSではじめるデータレイク』の1~4章を読んでから過去問演習をしました。(5章以降はハンズオンについての記載であったため飛ばしました）

『AWSではじめるデータレイク: クラウドによる統合型データリポジトリ構築入門』
https://www.amazon.co.jp/dp/491031301X/ref=cm_sw_em_r_mt_dp_1V71AVN1SBECRADRH0GB

## 過去問演習
* 本試験は問われる分野が狭いため少量の過去問演習でも問題がなさそうだと考え、一年分まとめて解くのではなく、各論から3~6問選び、20問程度演習しました。

『1週間で攻略！AWS認定データ分析 – 専門知識 本番用問題集 140問（65問 × 2セット + 10問） 詳解付き AWS認定本番用問題集シリーズ 』
https://www.amazon.co.jp/1%E9%80%B1%E9%96%93%E3%81%A7%E6%94%BB%E7%95%A5%EF%BC%81AWS%E8%AA%8D%E5%AE%9A%E3%83%87%E3%83%BC%E3%82%BF%E5%88%86%E6%9E%90-%E5%B0%82%E9%96%80%E7%9F%A5%E8%AD%98-%E6%9C%AC%E7%95%AA%E7%94%A8%E5%95%8F%E9%A1%8C%E9%9B%86-140%E5%95%8F%EF%BC%8865%E5%95%8F-AWS%E8%AA%8D%E5%AE%9A%E6%9C%AC%E7%95%AA%E7%94%A8%E5%95%8F%E9%A1%8C%E9%9B%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-ebook/dp/B09HH9WQ2Q

## 合格してみての感想
良くも悪くも短時間の勉強で合格できたので粗いインプットになってしまい、実務で使うには程遠いレベルという感触です。実際にデータ分析をしてAWSのサービスやデータ分析手法を身につけていきたいと思います。
CSVの最後のN行を抽出してヘッダーも追加する

CSVが大きすぎて、最後の方だけ欲しい場合がある。時刻順に並んでいて、最近のデータだけ欲しいときなど。
最後の方だけ抽出するのは、`tail`コマンドを使って、
```bash
tail -n 100 sample.csv > sample_tail.csv
```
とすると`sample.csv`の最後100行が`sample_tail.csv`に保存されるが、CSVヘッダーも欲しいときは
```bash
sed -i -e "1i $(head -n 1 sample.csv)" sample_tail.csv
```
として`sample.csv`の1行目を`sample_tail.csv`の先頭に追加する。
Windows 11でフロッピーディスクをコピーする

# やりたいこと

- Windows上でフロッピーディスク(FD)をディスクコピー（クローン）する
- お金はかけたくない
- フロッピーディスクドライブは持っている

# 方法

1. VMware上でUbuntuを起動する。
1. UbuntuにFDドライブを接続する。
1. デバイス名を確認（Ubuntuに標準で入っているDisksを使えば簡単。`/dev/sdb`みたいなやつ）
1. ddコマンドでコピー
    - FDドライブが2つある場合
        1. コピー元とコピー先のFDを各ドライブに挿入。（この際、それぞれどのデバイス名に対応するかを要確認）
        1. ddコマンドでコピー元のドライブからコピー先のドライブへコピー（[コマンド](#fdドライブが2つある場合)）
    - FDドライブが1つしかない場合
        1. コピー元のFDをドライブに挿入
        1. ddコマンドでコピー元のFDのデータを保存（[コマンド](#fdドライブが1つしかない場合読み取り)）
        1. コピー先のFDと入れ替える
        1. ddコマンドで1で保存したデータをFDに書き込む（[コマンド](#fdドライブが1つしかない場合書き込み)）

## コマンド

|option|説明|
|-|-|
|`if`|入力デバイスor入力ファイル名|
|`of`|出力デバイスor出力ファイル名|
|`status=progress`|コピー状況を出力してくれる。<br>これがないとコピーが終わるまで何も出力されないので不安になる。|
|`conv=noerror,sync`|壊れかけたFDでも救済しやすくなる|

### FDドライブが2つある場合

```
dd if=/dev/aaa of=/dev/bbb status=progress conv=noerror,sync
```

### FDドライブが1つしかない場合：読み取り

```
dd if=/dev/aaa of=fdtmp status=progress conv=noerror,sync
```

### FDドライブが1つしかない場合：書き込み

```
dd if=fdtmp of=/dev/aaa status=progress conv=noerror,sync
```

## エラーが起きたとき

### `No space left on device`

このエラーが起きたときはフォーマットされてないだけかもしれません。自分の場合、エレクトーン本体でフォーマットしてから再度コピーするとエラーが出なくなりました。


# おわりに

なぜこんなご時世にFDなんてコピーしたくなったのか。
エレクトーンのせいです。

昔のELシリーズと呼ばれるエレクトーンは、記憶媒体がFDでした。
もちろん、古の楽譜に付属しているデータはFDです。

そしてFDは特性上壊れやすいんですね。なので、壊れる前にコピーしておきたいというわけです。
~~壊れかけたFDを扱うこともあるので一応convオプションは設定しましたが、気休め程度ですね。~~
`conv`設定なしでコピーできなかったFDも`conv=notrunc,sync`を設定したらコピーできて読み込みもきちんとできるようになりました！optionは大事。

<details><summary>ちなみに</summary>
ちなみに（エレクトーンの）市販のFDをこの方法でコピーすると、プロテクトソングもコピーできます。試したことないけど多分USBでも。
</details>
新人プログラマのための分かった気になれるトランザクション分離レベル



# はじめに
データベースシステムで、複数の処理が同時に行われる場合、それらの処理が共有できるデータのレベルを定義したものが「トランザクション分離レベル」です。適切に設定することで、データベースシステムの処理性能を最適化し、データの整合性を保証できます。

しかし、トランザクション分離レベルは複雑な概念であり、初心者にとっては理解するのが難しいことがあります。そこで本記事では、トランザクション分離レベルの各種レベルについて、その説明と問題点、そしてPostgreSQLにおける設定方法について解説します。

# トランザクション分離レベルの種類
トランザクション分離レベルには、以下の4つの種類があります。

## READ UNCOMMITTED
最も低い分離レベルで、他のトランザクションが未コミットのデータを参照できるレベルです。このレベルでは、複数のトランザクションが同じデータを同時に更新すると、データの整合性が崩れる可能性があります。

## READ COMMITTED
他のトランザクションがコミットしたデータしか参照できないレベルです。このレベルでは、他のトランザクションが更新したデータを参照することはできませんが、同じトランザクション内で複数回同じクエリを実行すると、異なる結果が返されることがあります。

## REPEATABLE READ
他の並行するトランザクションがコミットしたデータも参照できないレベルです。このレベルでは、トランザクション開始時点のスナップショットを用いてデータを読み取るため、同じトランザクション内で複数回同じクエリを実行しても、常に同じ結果が返されます。ただし、このレベルではPhantom Readと呼ばれる現象が発生することがあります。Phantom Readとは、トランザクションが同じクエリを実行した際に、他のトランザクションが挿入した新しい行が見えてしまう現象のことです。

## SERIALIZABLE
最も高い分離レベルで、トランザクション同士が直列化されたかのように動作します。このレベルでは、トランザクション同士が競合することがなく、データの整合性が保たれます。ただし、競合が発生しないため、同時に実行できるトランザクションが減少し、処理性能が低下する可能性があります。

# 各分離レベルの問題点
各分離レベルには、それぞれの問題点があります。

## READ UNCOMMITTED
他のトランザクションが未コミットのデータを参照できるため、Dirty Readと呼ばれる現象が発生する可能性があります。Dirty Readとは、未コミットのデータを参照したために、後でそのデータがロールバックされた場合に、読み込んだデータが無効になってしまう現象のことです。

## READ COMMITTED
並行する他のトランザクションがコミットしたデータを参照できるため、Non-repeatable Readと呼ばれる現象が発生する可能性があります。Non-repeatable Readとは、同じトランザクション内で複数回同じクエリを実行した場合に、異なる結果が返される現象のことです。

## REPEATABLE READ
Phantom Readという現象が発生する可能性があります。Phantom Readとは、同じトランザクション内で複数回同じクエリを実行した場合に、他のトランザクションが挿入した新しい行が見えてしまう現象のことです。

## SERIALIZABLE
同時に実行できるトランザクションが減少するため、処理性能が低下する可能性があります。

# PostgreSQLにおけるトランザクション分離レベルの設定方法
PostgreSQLでは、トランザクション分離レベルはSET TRANSACTION文を使用して設定することができます。以下に、各分離レベルの設定方法を示します。

## READ UNCOMMITTED
:::note warn
PostgreSQLでは`READ UNCOMMITTED`は`READ COMMITTED`として扱われます。
:::
```
SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;
```

## READ COMMITTED
```
SET TRANSACTION ISOLATION LEVEL READ COMMITTED;
```

## REPEATABLE READ
```
SET TRANSACTION ISOLATION LEVEL REPEATABLE READ;
```

## SERIALIZABLE
```
SET TRANSACTION ISOLATION LEVEL SERIALIZABLE;
```

## デフォルトのトランザクション分離レベルの設定

また、PostgreSQLでは、データベースの設定ファイルであるpostgresql.confを編集することで、デフォルトのトランザクション分離レベルを設定することもできます。以下は、postgresql.confファイルでデフォルトの分離レベルを設定する例です。

デフォルトのトランザクション分離レベルをREPEATABLE READに設定する
```
default_transaction_isolation = 'repeatable read'
```


# まとめ

トランザクション分離レベルは、データベースの並行処理性能やデータの整合性を保つために重要な概念です。各分離レベルには、それぞれの問題点があるため、適切な分離レベルを選択することが必要です。PostgreSQLでは、SET TRANSACTION文やpostgresql.confファイルを使用して、トランザクション分離レベルを設定することができます。適切なトランザクション分離レベルを選択し、設定することで、データベースの安定性や処理性能を向上させることができます。

:::note info
本記事の大部分はChatGPTに書いてもらいましたが、微妙に間違っている箇所もあったので修正したものをお届けしています。

依頼内容
> 「新人エンジニアのためのわかった気になれるトランザクション分離レベル」というタイトルの記事を書いてください。
:::