OmniAICreator/Qiita-1.07M huggingface dataset:
[備忘録]Github actionsでDockerビルドするときにプライベートレポジトリからyarn installする方法

# 概要
表題の通り。
APIをOpenAPIに合わせてつくったのでその型やAPI Clientをパッケージ化して、別レポジトリのフロント側で読み込みたかった。DockerビルドするのはKubernetesに載せたいので。

Package化する方法については省略。

# 実装
Github actions secretにレポジトリアクセスできるtokenの設定が必要です。
今回は `NPM_TOKEN` で設定済み。 `secret.GITHUB_TOKEN` ではできない。

```.yarnrc
registry "https://registry.npmjs.org"
"@my-org:registry" "https://npm.pkg.github.com"
```
my-orgというチームのプライベートレポジトリのパッケージを取得する想定。

```.npmrc.docker
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
```

`.npmrc` で `NPM_TOKEN` の指定をしたままにするとローカルで動かないのでDockerビルド時にリネームして参照できるようにした。起動時に毎回 `NPM_TOKEN` を ARG で渡さないといけなくなるので `yarn install` したら削除する。

```Dockerfile:Dockerfile
FROM node:18
ARG NPM_TOKEN
WORKDIR /usr/src/app
COPY ./.npmrc.docker ./.npmrc
COPY ./.yarnrc ./
COPY ./package* ./
COPY ./yarn* ./
RUN yarn
RUN rm .npmrc
COPY . .
RUN yarn build
EXPOSE 3000
ENTRYPOINT yarn start
```

```yaml:.github/workflows/build-and-push.yml
jobs:
  build-and-push:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Build and push
        uses: docker/build-push-action@v4
        with:
          context: .
          push: true
          tags: |
            ${{ secrets.REGISTRY_URL }}:latest
          cache-from: ${{ secrets.REGISTRY_URL }}
          build-args: |
            NPM_TOKEN=${{ secrets.NPM_TOKEN }}
```
Nuxt2 / Nuxt3でredirect処理をする

## Nuxt2でリダイレクト処理を行う

リダイレクトをかけたいファイルのscriptに記述
例）`/blog/news`に来たユーザーに対して`/blog`に飛ばす時（この時newsパスは動的に変わるものとする。）

```vue:pages/blog/_id.vue
<script>
import { defineComponent, useContext, useAsync } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { redirect } = useContext()

    useAsync(() => {
      redirect(301, '/blog')
    })
  },
})
</script>
```
やっていること
- _id.vueファイル読み込み時に`useAsync`でredirectを呼ぶ
- 第一引数にリダイレクト番号の301, 第二引数に遷移先を指定

## Nuxt3でリダイレクト処理を行う

ルート直下に「middleware」ディレクトリを設置
その配下にリダイレクト用のファイルを作成
リダイレクト処理をグローバル定義するのでファイル名を「`任意の名前.global.ts`」と間にglobalを入れる。

```typescript:middleware/redirect.global.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.path === "/blog/news") {
    // optionつける場合
    return navigateTo("/blog", { redirectCode: 301 );
    // optionつけない場合
    return navigateTo("/blog");
  }
});
```
[参考:Nuxt3公式ドキュメント navigateTo](https://nuxt.com/docs/api/utils/navigate-to)

やっていること
- pathが`/blog/news`の時は`/blog`にリダイレクト処理をかける
- その時のコードは301ですよと明示的に伝える

---

Nuxt3はmiddlewareディレクトリ内にグローバル定義したら割と簡単にリダイレクト処理ができた。
簡単な処理だけだったらこれでもいけそうです。
【HTML/CSS】スマートフォンのセーフエリアの対応方法


## はじめに

PWAで`"display": "standalone"`とした場合に、画面下端に配置したボタンとホームバーが重なってしまうことがあります。

![IMG_6AF350887619-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/c9d1d6c2-7ec4-9121-573d-976715758034.jpeg)

これを改善する方法について記載します。

## ビューポートのメタ値を追加する

HTMLのメタタグに`viewport-fit=cover`を追加します。

```html
<meta name="viewport" content="viewport-fit=cover" />
```

## CSSで余白を追加する

余白が必要な要素に以下を設定します。

```css
.sample {
  padding-bottom: env(safe-area-inset-bottom);
}
```

すると以下のようにボタンの下に適切な余白ができます。

![IMG_1077BAF91629-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/6d87b2f4-4a15-3607-817c-f9ce4972a120.jpeg)

画面を横向きにした際にアイコンなどがノッチに重なるのを避けるには以下のようにします。

```css
.sample {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
```

## 参考

https://developer.mozilla.org/ja/docs/Web/CSS/env
PayPay内でシェアサイクルを使うときなどに位置情報がおかしくなった人向けのメモ

# 症状
シェアサイクルを使いたい際に，以下のページ内の現在地取得ボタンがうまく機能しないことが多々あります．その影響で，自転車を解除できずに困った経験がある方も多いはず...
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1734281/9aeb1d3c-3fdc-bfbe-8a73-b30fbf86e9b0.png">

# 解決策
面倒ですが，トップ画面に戻ります．そして，下にある`近くのお店`を押します．
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1734281/720107bf-ae37-014c-9e22-4b6024d03de5.png">
続いて，この画面内の現在地取得ボタンを押しましょう．
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1734281/9e01c6be-1d84-ee57-bb01-273db6141ff0.png">
最後に，もう一度シェアサイクルのページに戻って現在地を取得してみてください．
正しい位置情報が表示されるはずです．

# ひとこと
PayPayのミニアプリの現在地取得ボタンは，あくまでもその時点で親アプリの現在地の変数に入っている値を取ってくるだけの仕様なんですかね...
LINEBOTを使い、店舗名を送ると店コード・担当者を教えてくれる！

これまでLINEなどのアプリを使う立場だった素人がMakeを使って「店舗名」を送れば「店コード」を返してくれるLINEBOT作成に初挑戦。  

商品部なので商品を発注する時に「店コード」は必要不可欠なのですが、一覧の紙を見たり、PCで検索かけたりして調べていました。  

直ぐに「店コード」が必要な時、ラインに「店舗名」を送る事で調べられたら超便利と思い、早速作成。

比較的簡単につくれるのでは、との淡い思いもむなしく結構苦労しました。  

GooglesheetをAPI化して、JSONデータに変換してくれるサイト「SSSAPI」の存在を知
り、活用。

１．下記のグーグルスプレッドシート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494011/4d7f0299-6ce7-0a0c-c381-9563b90e23c0.png)

２．SSSAPIにてAPI化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494011/c9ab83d7-b9dc-0bd8-41b0-9a410372c4ba.png)

３．JSONができた・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494011/0cc84657-48d0-0756-5c73-a53b1f8ecc4a.png)

４．Makeを使って　ちょちょいのちょいとできると思ったが・・・
　　Name の記述が分からなくて大苦戦。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494011/6c61e08d-b89c-cb30-715f-81b39317a882.png)

やっとできました。

![Screenshot_20230814-212545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494011/e7f7c45a-036a-9677-a755-1fff47539536.png)


動かした動画はこちら
https://twitter.com/okamoto0016/status/1693100929867022567


使用ツール
・LINE
・Make
・Googlesheet
・SSSAPI

私にとっては、かなり実用的なLINEBOTがどうにか完成！　ふー。
高信頼化技術

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/a16827b7-c0dc-0f33-52a2-13a8b659fe29.png)
　信頼性の高いシステムとは、故障しにくく、２４時間３６５日動き続けるシステムです。信頼性の高いシステムはフォールトトレランスやフォールトアボイダンスという考え方に基づいて構築する必要があります。また、万が一障害が発生した場合に、市ステムを安全に停止させることが最優先なのか、それとも、性能を落としてデモシステムを動かし続けることが最優先なのかを考えて対策を取っておく必要もあります。

１：フォールトトレランス
　障害が発生してもシステムの動作を継続できるように対策しておく考え方をフォールトトレランスと言います。また、フォールトトレランスの考え方を採用したシステムをフォールトトレラントシステムと言います。フォールトトレラントシステムでは、同じ役割を担う装置を複数装備して、１つが故障しても残りの装置で代替できる構成にします。同じ役割を担う装置を複数装備する構成を助長構成といいます。

２：フォールトトレラントシステムの構成
フォールトトレランスとシステムには、デュプレックスシステムやデュアルシステムがあります。

①デュプレックスシステム
　本番系（現用系）と待機系（予備系）を用意して二重化する。通常は本番系を稼働させ、本番系に障害が発生した時に待機系に切り替える。

②デュアルシステム
　複数系統を同時に稼働させて、結果を常時照合する。障害が発生した時には、診断プログラムを実行して障害部分を特定し、障害部分を切り離して動作を継続する。デュプレックスシステムよりも高い信頼性を実現できる。同じ処理を行うシステムを二重に用意し、処理結果を照合する。
　デュプレックスシステムでの待機系の待機方法には、ホットスタンバイ、ウォームスタンバイ、コールスタンバイがあります。

　復旧までの時間：ホット>ウォーム＞コールドの順。

１：ホットスタンバイは、利用者が気づかない程度の時間で待機系に切り替える方法です。待機系には本番系と同一のOSやアプリケーションソフトウェアをインストールし、常に最新のデータを反映させておきます。待機系は常に起動してお息、即時に切り替えられるよにして障害の発生に備えます。

２：コールスタンバイは、切り替えに時間を要します。障害が発生してから、待機系にOSやアプリケーションソフトウェアのインストールを行い、その後、最新のデータを反映させる作業を行います。

　ウォームスタンバイは、ホットスタンバイとコールスタンバイの中間レベルで待機系を準備しておく方法です。

３：フォールトアボイダンス
　各装置の故障率を極めて低くして、障害の発生そのものを防ぐという考え方です。故障率の極めて低い装置はコストが高くなりますから、フォールトアボイダンスでシステムを構成するとコストが高くなります。例えば、人工衛星は、スペースや重量の制約が厳しく、同じ装置を複数装備することが困難です。こういった用途では、フォールトアボイダンスでシステムを構築します。情報システムは、コストの面からフォールトトレランスで構築することが一般的です。

４：フェールセーフとフェールソフト
　フェールセーフは、故障時にシステムをできる限り安全な方向へ導くという考え方です。システムを停止させることももやむを得ないと考えます。

　フェールソフトは、故障した部分を切り離し、機能を低下させてでも、システムの動作を継続させるという考え方です。機能がした状態でシステムが動作することを縮退運転（フォールバック運転）と呼びます。

５：フールプルーフ
　ご入力や誤操作といった人偽的なミスが発生しにくいように設計するという考え方です。
試験の出題例：フールプルーフとは、「利用者が誤った操作をしても、システムに異常が起こらないように」設計する。

６：フォールとマスキング
　システムが故障した場合でも、故障していることを表面的に出ず、外部から分からないようにすることです。システムの故障が他のシステムに影響を与えないようにするのです。
AtCoder標準入力まとめ

# はじめに
AtCoderの標準入力セットは既にたくさんの方がまとめてくれていますが、int型とリスト内包表記を自分なりにわかりやすくまとめてみました。
作成途中なので随時更新していきます。

# (1, N)行列データ(リスト内包表記なし)
入力
> N
> A<sub>1 </sub>A<sub>2 </sub>A<sub>3 … </sub>A<sub>N  

入力例
> 3
> 2 3 5

コード例

```Python:sample.py
N = int(input())
A = list(map(int, input().split()))

#出力
print(A)
[2, 3, 5]

#unpackという手法を使うと以下のように出力されます
print(*A)
2 3 5
```

# (N, 1)行列データ
入力
> N M
> A<sub>1
> </sub>A<sub>2
> </sub>A<sub>3
> ︙
> </sub>A<sub>N

入力例
> 3 3
> 2
> 3
> 5

コード例1(int型)

```Python:sample.py
N, M = map(int, input().split())
A = []
for _ in range(N):
    A.append(int(input()))

#出力
print(A)
[2, 3, 5]
```
コード例2(リスト内包表記)
```Python:sample.py
N, M = map(int, input().split())
A = [int(input()) for _ in range(N)]

#出力
print(A)
[2, 3, 5]
```

# (N, M)行列データ
(N, M)行列データは行で格納する方法と列で格納する方法の2つがあります。
それぞれ、int型とリスト内包表記の2通りで格納することができます。

問題の入力部分（ABC315C)
> Nカップのアイスクリームがあります、
> iカップ目の味はF<sub>i</sub>、美味しさはS<sub>i</sub>です。

入力
> N
> F<sub>1 </sub>S<sub>1
> </sub>F<sub>2 </sub>S<sub>2 
> ︙ ︙
> </sub>F<sub>N </sub>S<sub>N

入力例
> 4
> 1 4
> 2 10
> 2 8 
> 3 6

コード例
## [x<sub>i</sub>, y<sub>i</sub>]として格納(行で格納)

int型
1変数のとき
```Python:sample.py
N = int(input())
A = []
for _ in range(N):
    a = list(map(int, input().split()))
    A.append(a)

# 出力
print(A)  
[[1, 4], [2, 10], [2, 8], [3, 6]]
```

2変数の時
```Python:sample.py
N = int(input())
ice = []
for _ in range(N):
    F, S = map(int, input().split())
    ice.append((F, S))

# 出力
print(ice)  
[(1, 4), (2, 10), (2, 8), (3, 6)]
```

リスト内包表記
```Python:sample.py
N = int(input())
ice = [list(map(int, input().split())) for _ in range(N)]

# 出力
print(ice) 
[[1, 4], [2, 10], [2, 8], [3, 6]]
```

## x,yを独立に格納(列で格納)
int型
```Python:sample.py
N = int(input())
F = []
S = []
for _ in range(N):
    f, s = map(int,input().split())
    F.append(f)
    S.append(s)

# 出力
print(F)  
[1, 2, 2, 3]
print(S)  
[4, 10, 8, 6]
```

リスト内包表記

```Python:sample.py
N = int(input())
ice = [map(int, input().split()) for _ in range(N)]
F, S = [list(i) for i in zip(*ice)]

# 出力
print(F)  
[1, 2, 2, 3]
print(S)  
[4, 10, 8, 6]
```
## 二次元配列として格納
二次元配列はグラフ問題や計算量を削減する際に使用されます。
今回の問題では味別にそれぞれ格納しています。
```Python:sample.py
N = int(input())
G = [[] for _ in range(N)]
for _ in range(N):
    f, s = map(int, input().split())
    G[f - 1].append(s)

# 出力
print(G)  
[[4], [10, 8], [6], []]
```
味が1のものは4、味が2のものは10と8...という風に格納されています。
docker-composeでNext.jsの環境構築

# 概要
- docker-composeでNext.jsの環境を作った時の備忘録です。



# 手順

## 1. ルートディレクトリ作成
- 任意の名前でディレクトリを作成します。
- 以降はディレクトリ内で作業します。


## 2. Dockerfile作成
- Dockerfileを作成します。
- nodeのバージョンは[ここ](https://hub.docker.com/_/node/tags)で調べて適切なバージョンを指定します。

```dockerfile
FROM node:20.5.1
WORKDIR /usr/src
```


## 3. docker-compose.yml作成
- docker-compose.ymlを作成します。

```yml
version: '3'
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src
    ports:
      - 3000:3000
    container_name: front
    tty: true
```

- 現状はこのようなディレクトリ構成になります。

```
hoge
├── docker-compose.yml
└── Dockerfile
```


## 4. コンテナ起動
- 一旦この状態でコンテナを起動します。

```bash
docker-compose up -d
```


## 5. アプリ構築
- コンテナに入ってアプリを構築します。

```bash
docker-compose exec front sh
yarn create next-app
```

- 対話型で作成していくので、用途に合わせて選択していきます。
- 私は以下で作成しました。
  - What is your project named? -> front（任意の名前）
  - Would you like to use TypeScript? -> Yes
  - Would you like to use ESLint? > Yes
  - Would you like to use Tailwind CSS? > Yes
  - Would you like to use `src/` directory? > Yes
  - Would you like to use App Router? > Yes
  - Would you like to customize the default import alias? > No


## 6. アプリ起動
- アプリの構築が終わったら起動します。

```bash
cd front # 作成したプロジェクト内に移動
yarn dev
```

- http://localhost:3000/ にアクセスして画面が表示されればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408785/926b7f8e-db8f-8563-0810-8f245cb5363b.png)


## 7. docker-compose.yml更新
- 最後にコンテナ起動時に自動でアプリが立ち上がるようにdocker-compose.ymlを更新します。

```yml
version: '3'
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src
    ports:
      - 3000:3000
    container_name: front
    command: sh -c "cd front && yarn dev" # ← ここを追加
    tty: true
```

# まとめ

- コンテナ起動 -> 対話形式でのアプリ構築なので、もっと効率の良い方法がありそうです。
- 良い方法ご存知の方教えていただけると幸いです。
LangChainの完全なチュートリアル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225269/8a4783fe-4b80-4c7e-9b82-4cba3072b3e9.png)
## LangChainとは
LangChain は、LLM を中心に構築されたフレームワークです。このライブラリの機能は、さまざまなコンポーネントを「チェーン」して、より高度なユースケースを作成できるということです。

## なぜLangChainなのか?
- コンポーネント - LangChain を使用すると、言語モデルを操作するために必要な抽象化とコンポーネントを簡単に交換できます。
- カスタマイズされたチェーン - LangChain は、一連のアクションがつながった「チェーン」の使用とカスタマイズをすぐに使用できるサポートを提供します
- スピード - このチームは非常に速く出荷します。 最新の LLM 機能を入手できます。
- コミュニティ - 素晴らしい Discord とコミュニティのサポート、ミートアップ、ハッカソンなど。

## LangChainの概要
チェーンは、複数のモジュールからの複数のコンポーネントで構成される場合があります。

- Prompt templates（プロンプト テンプレート）: プロンプト テンプレートは、さまざまな種類のプロンプトのテンプレートです。 「チャットボット」スタイルのテンプレート、ELI5 の質問応答など

- LLM: GPT-3、BLOOM などの大規模な言語モデル

- Agents（エージェント）: エージェントは LLM を使用して、どのようなアクションを実行するかを決定します。 Web 検索や計算機などのツールを使用でき、それらはすべて操作の論理ループにパッケージ化されています。

- Memory（記憶）：短期記憶、長期記憶。

## LangChainの完全なチュートリアル

https://github.com/jingwora/LangChain-tutorial/tree/main

実験の環境は Google Colabです。

https://github.com/jingwora/LangChain-tutorial/blob/main/01-LangChain-Completed-Tutorial-ja.ipynb

内容:
- OpenAI Overview
  - ```openai.Completion.create```
  - ```openai.ChatCompletion```
- LangChain Overview
  - ```OpenAI```
- Schema
  - ```ChatOpenAI```
  - ```Document```
- Models
  - ```OpenAI```
  - ```ChatOpenAI```
  - ```OpenAIEmbeddings```
- Prompts
- Prompt Templates
   - ```PromptTemplate```
- Example Selectors
  - ```SemanticSimilarityExampleSelector```
  - ```FewShotPromptTemplate``` 
- Output Parsers
  - ```StructuredOutputParser```
  - ```ResponseSchema``` 
- Indexes
  - ```FAISS```
- Document Loaders
  - ```TextLoader```
  - ```CSVLoader```
  - ```UnstructuredCSVLoader```
  - ```PyPDFLoader```
  - ```DirectoryLoader```
  - ```HNLoader```
  - ```UnstructuredHTMLLoader```
  - ```JSONLoader```
- Text Splitters
  - ```RecursiveCharacterTextSplitter```
- Retrievers
  - ```get_relevant_documents```
- Memory
  - ```ChatMessageHistory```
  - ```ConversationChain```
- Chains
  - ```LLMChain```
  - ```SimpleSequentialChain```
  - ```load_summarize_chain``` 
- Agents
  - ```load_tools```
  - ```initialize_agent```

ポイント：実行する場合は OPEN_AI_KEYが必要です。
苦手な君も大丈夫？！AWS Certified Solutions Architect - Associate取得を目指そう！

# 先日2ヶ月かけてSAA-C03、取得出来ました!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287651/0ef96837-4897-1302-7bc2-d6e97cf9b7fa.png)


# しかし、当初の私は・・・
![question_head_gakuzen_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287651/796931ca-da13-45c6-0db7-61df7aa84edd.png)
まったく分からん・・・

というより

![pose_koshi_nukeru_kowai_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287651/1b394eab-8f8c-22d7-dfd7-5648a1edc781.png)

問題見るのも無理・・・という状態でした。

そのため一旦遠回りをし、勢いをつけて取得を目指しました。
※前回記事はこちら。

https://qiita.com/Kue_Lee_Jei/items/43d2d1bdb554495299b4

# まず何をしたか（0～1ヶ月目）
CLFを取得したのが2年前で、基礎知識が殆ど抜けている状態でした。
そのため土台を固める上でPing-tという学習サイトを活用しました。

https://mondai.ping-t.com/g

分野・単元毎に取り組め、問題数も自由に変えられるので気持ち的に楽でした。
最初は回答せずに全部不正解にして、答えと解説を読んで
次は覚えた知識で解いていくというサイクルで学習を進めました。
***この期間でPing-tの問題を全ヒット状態にしていきます。***
お気に入り機能があるので、
***読んで分かる問題・分からない問題に振り分けていきます。***

:::note warn
この段階ではまだ、模擬試験問題には取り組みません。やる気を失います。
:::

# 一通り終えたら（1～1.5ヶ月目）
***Ping-tのヒット状態を全コンボ状態（2回連続で正解する）にしていきます。***
その後、Ping-tの試験レベル問題（本番レベル問題）にも取り組んでいきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287651/0d7519ee-c201-91f5-5626-b194d1f1a809.png)
仕上げとして、最初にお気に入り機能で振り分けた問題中心に解いていきます。
特に読んでも分からなかった問題を優先的に取り組みました。

# いよいよ模擬試験に挑戦（1.5～2ヶ月目）
Ping-tだけだと実戦に近い問題数が足りないので、Udemyを活用します。
<font color="red">***※セール中に買ったほうがオトクです***</font>

【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）

https://www.udemy.com/course/aws-knan/

本当に難しい上、問題調整もできないので65問ぶっ続けです。
Ping-tであんなにやったのに初見4割位しか取れないのかと愕然としました・・・
***高難易度のセクションは解かなくて大丈夫です。①～④まで8・9割近く取れるよう繰り返せば十分。***
ちなみに分からない問題はスライド（パワポ）に纏めていきました。

:::note alert
一気に進めようとしないこと。
気力・体力結構つかうので思っているより疲弊します。
休日を有効活用したいところ。
:::

# 前日

今まで纏めたスライドや、Ping-tにお気に入り登録した問題を見直します。
ここで模試は解きません。不安になるだけです。

:::note warn
とにかく早く寝ましょう！！本番は長丁場かつ文章も長いです。体調万全に。
:::

# 試験当日
ホワイトボードは大いに使ったほうがいいです。
問題文に書き込みが出来ない以上、この選択肢は消しとか図解していったほうがイメージしやすいです。

ちなみに既にご存知かもしれないですが、試験後はすぐに結果が出ません。
後ほどメールで届く仕様になっています。
都市伝説では不合格者は早めに連絡が来るとか言ってますが私は嘘だと思ってます(笑)
私は翌日の夕方ごろまでかかりました。

# 無事合格！！
![happy_schoolboy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287651/8becfd8d-3afa-5714-9c08-ee744b702daa.png)
冒頭に戻る。
***ボーダー720点で745点を取得し、無事合格。
ギリギリでも合格は合格。***
当日帰宅後、寝込みました(笑)
再チャレンジは絶対避けたかったのでホッとしました。

# 振り返り
***本番の試験は、Ping-tの模試とUdemyの模試の中間レベルかなという印象でした。***
もしかするとPing-tだけでも合格しそうな勢いがありました。
文章が長くても、知識の組み合わせなのでキーとなる単語を問題文の中で抑えることができれば、選択肢は絞られるはずです。学習の軸はPing-tでいいと思います。


あと何気に試験勉強開始時に悩んだのが***テキスト（参考書）選び***です。
正直これといったものが無いです。
好きなもの買ったらいいと思いますが、***<font color="red">私のように苦手意識を抱えているタイプの方は書籍から入ると萎えます。</font>***

***個人的にはPing-tの解説だけで十分と思います。***

ちなみに隙間時間に読んでいたのはこれです。

https://amzn.asia/d/0XY7Y14

電子書籍ですが0円だったはずなのでコスパは良いです。

# 最後に
少しずつでいいです。継続することが大事だと思っています。
私は問題みただけでもう無理！という時期が最初あったので
辛くても1日2～3問は解くようにしたり、テキストに目を通したり
習慣化することで耐性をつけていけたら乗り越えられるはずです。
次回は2度落ちているJavaGoldにチャレンジしようと思います。
ではまた、お会いしましょう！
UiPath Document Understanding Process日本向けテンプレートの作り方（#4 ChatGPTを組み込んだ部分的な改良）

# はじめに

[UiPath Document Understanding Process日本向けテンプレートの作り方（#2 フォーム抽出 CJK-OCR対策）](https://qiita.com/Jun96427231/items/f3bae2ec8d4d0e773b48)において、氏名の苗字と名前の間にスペースがなくなってしまう課題が残りました。本記事ではChatGPTを組み込んで改善する方法を紹介します。その他に改善したいフィールドが発生した場合の参考にもなると思います。

# ChatGPT組み込み前と組み込み後の比較

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/2b42e4c0-4d9d-440e-e13a-98e0a2b781b6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/a8cbd1cc-2487-da1f-e94c-b15c47b00d66.png)


# 変換するタイミング
UiPath Document Understanding Process日本向けテンプレートの作り方（#2 フォーム抽出 CJK-OCR対策）で解説した変換の箇所（55_ExtractionBusinessRuleValidation）に組み込みます。ここに組み込むことで、フォーム抽出の場合は、共通に処理され、また、この変換をした後で、人による検証をすると言ったことが可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/75c6f703-f609-d7a2-91ec-d32da357d3b6.png)

# 実装方法の解説

## 利用するChatGPT
UiPathでは既にChatGPTコネクタが色々と提供されてますが、ここでは最も簡単に利用できるAsk GPTアクティビティを組み込みます。尚、Ask GPTアクティビティは現時点ではプレビュー版ですので、今後アップデートが必要になると思われます。

**＜ インストールするパッケージ ＞**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/31835265-a15a-6afd-ca5d-ef658a32913a.png)


## 氏名の苗字と名前の間に全角スペースを入れる処理
「#2 フォーム抽出 CJK-OCR対策」で解説している通り、読み取ったフィールドが画像だった場合は、OCRが機能しているので、スペースを除去する処理を行ってます。その直後に下記の処理を入れます。なんと、これだけで出来てしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639319/ada40efc-4fe5-4874-d970-9b9f97d049d8.png)

**＜ 処理の解説 ＞**
①氏名のフィールドの種類は「Name」で設定されているはずなので、フィールドの種類が「Name」だった場合に、処理を実行します。

:::note warn
会社名などを「Name」に設定していた場合は種類を「Text」へ修正してください。元のテンプレートでも、「Name」に設定しているのは氏名のみです。アルファベットの氏名であった場合、「Name」はデータ構造上、下記の様にGiven NameとLast Nameで派生フィールドが作られるフィールドでもあります。
```
DerivedFields=ResultsDerivedField[2] 
 {
    ResultsDerivedField 
   {
     FieldId="Given Name",
     Value="Taro" 
   },
   ResultsDerivedField 
   {
     FieldId="Last Name",
     Value="Fuji" 
   }
```
:::


②Ask GPTアクティビティへ渡す変数Textは、読み取ったフィールドの文字列です。冒頭のサンプルでは"富士太郎"が格納されています。Quession Listには{"苗字と名前の間に全角スペースを入れてください。"}と一つだけ質問を入れており、結果は回答リスト(0)("answer")に格納されます。
（この例では"富士　太郎"が格納されています。）

③回答リスト(0)("answer")の値を氏名のフィールド文字列に代入して、そのまま書き換えます。

# おわりに
UiPath Document Understandingは、個々の機能をアクティビティで提供しており、ローコードプラットフォームのメリットを最大に活かしてドキュメントのデジタル化をユーザーに適した仕様に細かくカスタマイズできます。このメリットを活かして、ドキュメント処理途中（人による検証を行う前）で、ChatGPTを組み込んで、精度向上や修正の手間を軽減させると言った改良が期待出来ます。デジタル化が終わってから変換しようとするのではなく、人の検証を行う前に変換することをお勧めします。

今回は、氏名の補正だけに使用しましたが、ドキュメント処理を自由にカスタマイズできるDocument UnderstandingとChatGPTの組み込みのハイブリッドは、非常に相性が良い様に感じました。使い方が地味で、一つ一つが小さいですが、ドキュメント処理においても、生成AIに補助して欲しいケースは、数多くあると思います。
ChatGPT使って”15分”でPowerPoint資料の「たたき台」作る！もう自分で作らない。Word挟めば無料で実現できる！

下期の会議体での決定により、研修の日程を変更する必要が生じました。
結果、予定されていた講師が都合が合わなくなり、私が急遽代役として講師を務めることとなりました。

〇〇基礎教育はテキストを使用して行う内容ですが、今回は集合ではなく遠隔形式での実施となります。このため、資料共有をPowerPointで行いながら進めることで、スムーズな進行が可能であると判断しました。
偶然ChatGPTを利用する機会が生まれ、PowerPointのプレゼンテーション資料の「たたき台」をChatGPTに作成してもらうことにしました。

## 1.	使用ツール
<b>Googleドキュメント</b>
　⇒Googleが無料提供する、ウェブブラウザ内で動くワープロソフト。
　⇒画像から文字が抽出できれば本ソフト以外でも構いません。
<b>ChatGPT</b>
　⇒OpenAIが2022年11月に公開した人工知能チャットボットであり、生成AIの一種。
　⇒有料ユーザになればWordを使用せずとも一括でPowerPointを作ることができる術がありますが、本ページは無料で作成する術です。
<b>Word</b>
　⇒マイクロソフトが販売している文書作成ソフトウェア。
　⇒数分で終わりますが、アウトライン表示から加工の工程があります。
<b>PowerPoint</b>
　⇒マイクロソフトが販売しているプレゼンテーションソフトウェア。
　⇒たたき台の工程では化粧にしか使いません。

## 2.	工程
### （1）文字抽出
紙の教材を文字起こしする。
　⇒GoogleドキュメントよりPDFを読み込むと自動で画像から文字を抽出する(OCR)
### （2）ChatGPTにて加工
![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469513/f9d428c7-0e85-ce02-946e-f3ed73bbb8d7.png)
以下のとおり指示する。
　⇒1行目「以下の文書を用いてPowerPointのたたき台を作成してください。」
　　2行目抽出した文字を貼り付ける。
### （3）Wordにて加工
![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469513/4ebda591-f4f3-14fc-eb11-deb014f8954b.png)
①アウトラインに表示にする。
②ChatGPTが排出した文章を貼り付ける。
　⇒「スライド〇」はレベル1にする。
　⇒他はレベル2にする。
③ファイルを保存する
④Wordを終了させる（画面を閉じないとPowerPointにインポートされません）

### （4）PowerPointにて加工
![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469513/c3b72718-f2cd-4e3d-6578-2688c68cfd2c.png)
![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469513/9ab41526-661f-de02-dc44-3d79174a40a3.png)

　①新しいスライド⇒「アウトラインからスライド」を選択する。
　②（3）にて加工したWordを選択する。
　③自動でPowerPoint資料ができる。
　④PowerPointの「デザイナー」にて化粧。

## 3.おわりに
ChatGPTの学習を通じて、たたき台以外にもメールの添削などに活用する機会が増え、ChatGPTは私にとって身近な存在となりました。
元々、Wordのアウトライン表示から自動的にPowerPoint資料を生成する仕組みは知識として持っていました。Wordを使用する場合でも最初からPowerPointで作成することが手軽だと考え、あまり活用していませんでした。
今回、試しにChatGPTにお願いしてみたところ、流用できる可能性が見えたため、積極的に活用しました。

自分でたたき台を作成する際には、早い段階でバイアスがかかってしまい、そのためにたたき台自体を客観的に評価する視点が欠けることがあります。
こうした状況を避けるため、ChatGPTに協力していただき、バイアスに影響を受けずに「たたき台」を活用して資料を作成することができました。
しかも、短時間で効果的な資料を作成できる点が大きな魅力です。

余った時間はもちろん、資料の内容をより洗練させるために活用し、更にグループワークも取り入れて、受講者が満足する充実した研修を提供いたします。

ChatGPTは単なる「手助け」のツールに過ぎません。今回の場合はPowerPoint資料の作成が焦点でしたが、「実際の処理や判断は人間が行う」という基本的な考え方は変わりません。

最後に、こちらの文章をお読みいただき、ありがとうございました。
Tailwind CSSの特徴について

## はじめに
個人開発でTailwind CSSを使っているので、特徴と使用感を書いていきたいと思います。

## Tailwind CSSとは
ChatGPTに解説してもらいました。
>Tailwind CSSは、プロのウェブ開発者向けに設計された高度なCSSフレームワークです。従来のCSSフレームワークとは異なり、予め定義されたスタイルやコンポーネントが用意されているのではなく、必要なスタイルをクラスベースで直接HTML要素に適用することで、柔軟なデザインを実現します。

>Tailwind CSSの特徴は以下の通りです：
**・ユーティリティファースト:**
 Tailwind CSSは、個々のスタイルをクラスとして提供します。これにより、デザイナーと開発者が必要なスタイルを直接指定し、再利用可能なカスタムスタイルを作成できます。
・カスタマイズ可能: Tailwind CSSは、デフォルトのスタイルセットを提供しますが、プロジェクトに合わせてカスタマイズすることができます。色、フォント、スペーシングなど、さまざまなスタイル要素を調整できます。
**・Responsiveness:** 
Tailwind CSSは、レスポンシブデザインをサポートしており、異なる画面サイズに対応するためのクラスを提供します。
**・コンポーネント指向:** 
Tailwind CSSは、シンプルなビルディングブロックを組み合わせてコンポーネントを構築することに焦点を当てています。これにより、再利用可能なコンポーネントを効果的に作成できます。
**・パフォーマンス:** 
Tailwind CSSは、ビルドプロセス中に未使用のスタイルを自動的に削除することで、最適なパフォーマンスを提供します。この機能により、必要なスタイルのみが最終的なスタイルシートに含まれるため、ページの読み込み時間が短縮されます。
・Tailwind CSSは、デザインから開発までのワークフローを効率的にするためのツールとして、多くの開発者に支持されています。ただし、独自のクラスベースのアプローチと概念に慣れるまでには少し学習のカーブがあるかもしれません。

ということです。


## メリットとデメリット
### ○メリット
**・クラス名を考える必要がない**
　これがかなりでかいです。
　画面を作っている中で、CSSを当てるためだけにクラス名を考える要素が出てきますが、Tailwind CSSではクラス名を当てていくので、その必要がなくなります。

**・柔軟性を持たせることができる**
　特にReactやNext.jsにはchakraUIなどのUIコンポーネントもあり、それを使えばかなり楽にUIを構築していくことができますが、要件に従って開発をしていく中で、柔軟的に仕様を決めていくことが困難な場合もあります。
　しかし、Tailwind CSSを使えば、柔軟性を持たせてUIを構築していくことができます。

**・ビルド時のサイズを小さくできる**
公式では以下のような説明がされています。
>大きなプロジェクトでも 10kB 以下の CSS ファイルにできる。 さらにファイルサイズを小さくするには cssnano などのツールで CSS を最小化し、Brotli で CSS を圧縮する。

大規模開発では、ファイルサイズを小さくするのは手間なので、それの心配が少なくなるのはとても良いです。

### ○デメリット
**・クラス名が長くなる**
　1つの要素にたくさんのクラス名をつけると、かなりクラス名が長くなってしまい、コードの可読性が悪くなってしまうことがあります。

## Tailwind CSSを使用する手順
以下がインストールするコマンドになります。
```
npm install -D tailwindcss
npx tailwindcss init
```
Next.jsでは、プロジェクト作成時に、Tailwind CSSを組み込むと、globals.cssファイルに以下ようなコードがあります。
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

これは、Tailwind CSSがカスタムスタイルを当てているコードです。
例えば、Tailwind CSSが使われていると、h1〜h6タグのスタイルが当たっていません。
以下が、その一部になります。
```
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
```
これを見ると、この要素にはmarginが取り除かれていることがわかります。
以下に他のデフォルトスタイルも記載されています。

https://tailwindcss.com/docs/preflight

もしも、デフォルトのスタイルを指定したい場合には、以下のようにコードを書けば設定することができます。
```global.css
@layer base {
  h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 10px 0;
  }
  h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 12px 0;
  }
  h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 12px 0;
  }
  h4 {
    font-size: 1em;
    font-weight: bold;
    margin: 12px 0;
  }
  h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin: 12px 0;
  }
  h6 {
    font-size: 0.67em;
    font-weight: bold;
    margin: 12px 0;
  }
}
```
こうすることで、全ての要素にスタイルが適用させることができます。

## 参考、チートシート等
以下に参考サイトと、チートシートサイトを載せておきます。

https://tailwindcss.com/docs/installation

チートシート2つ↓

https://segakuin.com/css/tailwind/

https://nerdcave.com/tailwind-cheat-sheet


## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
Pythonのunittestでデータ抽出SQLのテストをしてみた

データ抽出SQLの動作をPythonのunittestで確かめたいと思った。
抽出するデータはIDをキー項目として持っており、これでデータを一意に判別できる。
抽出したデータにどのIDが何個あるかが想定と実態で一致すれば、データ抽出が想定通りできたといえると考えた。

今回は連想配列dに各IDのデータの個数を入れてみることにした。
自宅の環境でサッと書きたかったので、DBに接続はせずにlistsに値が返ってきた前提で入力してみた。

```python:test_example.py
import unittest

class Test(unittest.TestCase):
    def setUp(self):
        print('set up!')

    def tearDown(self):
        print('tear down...')

    def test_No1(self):
        d ={1:0, 2:0, 3:0, 4:0}
        lists = [{'id':1},{'id':2},{'id':3}]
        for l in lists :
            d[l["id"]] += 1
        print(d)
        self.assertEqual(1,d[1]) # 一致
        self.assertEqual(1,d[2]) # 一致
        self.assertEqual(1,d[3]) # 一致
        self.assertEqual(0,d[4]) # 一致

    def test_No2(self):
        d ={1:0, 2:0, 3:0, 4:0}
        lists = [{'id':1},{'id':2},{'id':4}]
        for l in lists :
            d[l["id"]] += 1
        self.assertEqual(1,d[1]) # 一致
        self.assertEqual(1,d[2]) # 一致
        self.assertEqual(1,d[3]) # 不一致
        self.assertEqual(0,d[4]) # 一致

if __name__ == '__main__':
    unittest.main()
```

出力結果はこんな感じ。
```:出力結果
set up!
{1: 1, 2: 1, 3: 1, 4: 0}
tear down...
.set up!
tear down...
F
======================================================================
FAIL: test_No2 (__main__.Test)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "c:\Users\xxxxx\test_example.py", line 28, in test_No2
    self.assertEqual(1,d[3])
AssertionError: 1 != 0

----------------------------------------------------------------------
Ran 2 tests in 0.002s

FAILED (failures=1)
```
うまいこと動作しそうでよかった。

そういえば弊社内ではdefをテスト対象の関数で分けていたけど、テストケース単位で分けた方がいい気がする。def内で複数エラーがあったとしても、最初の１つしか不一致を報告してくれないので...たとえば、
```python:test_example.py
import unittest

class Test(unittest.TestCase):
# ～略～
    def test_No2(self):
        d ={1:0, 2:0, 3:0, 4:0}
        lists = [{'id':1},{'id':2},{'id':4}]
        for l in lists :
            d[l["id"]] += 1
        self.assertEqual(0,d[1]) # 不一致
        self.assertEqual(0,d[2]) # 不一致
        self.assertEqual(1,d[3]) # 一致
        self.assertEqual(0,d[4]) # 一致
# ～略～
```
のときに不一致を全部検出してくれるのかと思いきや、

```
F
======================================================================
FAIL: test_No2 (__main__.Test)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "c:\Users\xxxxx\test_example.py", line 26, in test_No2
    self.assertEqual(0,d[1])
AssertionError: 0 != 1

----------------------------------------------------------------------
Ran 2 tests in 0.002s
```
最初の１つで止まってしまうみたい。
GCPのops-agentを使ってdocker composeのコンテナのログをLoggingに飛ばす

## 前提

 - Google Compute EngineのVMを利用
 - VM作成時にアクセススコープを `デフォルトのアクセス権を許可` に指定
 - Debianのイメージを使用

## 手順

ops-agent のインストール

```bash
curl -sSO https://dl.google.com/cloudagents/add-google-cloud-ops-agent-repo.sh
sudo bash add-google-cloud-ops-agent-repo.sh --also-install
```

config.yml 編集

```bash
sudo vim /etc/google-cloud-ops-agent/config.yaml
```

```yaml
logging:
  receivers:
    fluentbit:
      type: fluent_forward
      listen_host: 127.0.0.1
      listen_port: 24224
  service:
    pipelines:
      default_pipeline:
        receivers: []
      app_pipeline:
        receivers: [fluentbit]
        processors: [app_processor]
  processors:
    app_processor:
      type: parse_json
```

config.yml 反映

```bash
sudo service google-cloud-ops-agent restart
```

docker-compose.yml のサービスに `logging` で fluend のホストとポートを指定する。

```bash
version: '3.6'

services:
  app:
    logging:
      driver: "fluentd"
      options:
        fluentd-address: "localhost:24224"
        tag: "app01"
```

コンテナ再起動

```bash
docker-compose up -d
```

## 参考

 - [GCP公式 - Ops エージェントを構成する](https://cloud.google.com/logging/docs/agent/ops-agent/configuration?hl=ja)
 - [docker-composeで体験するFluentBit
](https://zenn.dev/angelica/books/aws_cloudwatch_metrics/viewer/step4)
【Swift】TCAでの2種類のViewStoreの扱い方

# はじめに
TCAを勉強中で完全に理解しているわけではないので、間違っている箇所があればコメントで教えてください。

# Reducerはこんな感じ
```swift
import ComposableArchitecture

struct Feature: Reducer {
    struct State: Equatable {
        var text = "Hello, World!"
    }
    
    enum Action: Equatable {
        
    }
    
    func reduce(into state: inout State, action: Action) -> Effect<Action> {
        
    }
}
```

# 実装1
```swift
import SwiftUI
import ComposableArchitecture

struct ContentView: View {
    let store: StoreOf<Feature>
    
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            Text("Hello, World!")
        }
    }
}
```

# 実装2
```swift
import SwiftUI
import ComposableArchitecture

struct ContentView: View {
    @ObservedObject private var viewStore: ViewStoreOf<Feature>
    
    let store: StoreOf<Feature>
    
    init(store: StoreOf<Feature>) {
        self.store = store
        self.viewStore = ViewStore(store, observe: { $0 })
    }
    
    var body: some View {
        Text(viewStore.text)
    }
}
```

# 公式コメント
### ViewStoreの説明
> `ViewStore` は状態の変化を監視し、アクションを送信できるオブジェクトです。SwiftUI のビュー、UIView や UIViewController などのビューで最も一般的に使用されますが、状態を監視したり、アクションを送信したりする意味があれば、どこでも使用できます。
>
>SwiftUI アプリケーションでは、`ViewStore` は ``WithViewStore`` ビューを使用して最も一般的にアクセスされます。
ビューを使ってアクセスします。ビューストアとビューを返すクロージャで初期化することができます

### @ObservedObjectを使うこともできるよ
> ビューストアは、ビュー、シーン、コマンド、および `@ObservedObject` プロパティラッパーをサポートする他のコンテキストによって直接観察することもできます

### エラー出るなら@ObservedObjectを使ってみて
> ヒント: ``WithViewStore`` を使用したビューでコンパイル時に問題が発生する場合は、代わりに `@ObservedObject` プロパティラッパーを使用してビューストアを直接観察してみてください。

# おわり
https://github.com/pointfreeco/swift-composable-architecture/blob/main/Sources/ComposableArchitecture/ViewStore.swift

ここファイルに書いてあります。

基本は`WithViewStore`を使えってことでしょうか？
いまいちわからないです
使いたくなるUIを使える「shadcn/ui」の話

個人用のアプリを作ってたところ「shadcn/ui」に出会ってテンション上がったので記事にまとめてみました、さざんかです

# shadcn/ui とは？

> 公式サイトより
> This is NOT a component library. It's a collection > of re-usable components that you can copy and paste > into your apps.
>
>What do you mean by not a component library?
>
>I mean you do not install it as a dependency. It is >not available or distributed via npm.

**ざっくり翻訳**

これはコンポーネント・ライブラリではありません。あなたのアプリにコピー＆ペーストできる再利用可能なコンポーネントのコレクションです。

コンポーネント・ライブラリではないとは依存関係としてインストールしないという意味です。npm経由で利用することも配布することもできません。

すなわちMUIなどと違ってnpm installだけでは使えないみたいです
(この意味を理解して使えるようになるまでに2時間かかった...)

# どんなUIが作れるのか？

公式サイトにデモが載ってるので一度触ってみることをお勧めします
html/cssを直に書く実装してしてこなくてReact初心者だった自分は感激しました

https://ui.shadcn.com/

# 詰まったところ

## 1. components.jsonとはなんぞや

前述の通りshadcnはnpmだけで動くわけではないのでいろいろ設定してあげる必要があります

shadcn/uiではcomponents.jsonで諸々管理しています
(おそらくnodeのpackege.json的な位置どころ...?)

このファイルがないと何もできないので次のコマンドで作ってあげる必要があります

```:cmd
npx install shadcn-ui@latest init
```

いろいろ聞かれるので自分の環境に合わせて設定してください

## 2. プレフィックス...?


```:でてきたエラー
ERROR in ./src/components/ui/button.jsx 7:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'

ERROR in ./src/components/ui/input.jsx 5:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'

ERROR in ./src/components/ui/label.jsx 9:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'

ERROR in ./src/components/ui/sheet.jsx 10:0-33
Module not found: Error: Can't resolve '@/lib/utils' in '/usr/src/app/frontend/src/components/ui'

```

ご存じの方からすると「何言ってるんだこいつ...?」と思われるかもしれませんが、import文で使用されている「@/」を参照できるように設定が必要です

（Dockerから対象のERRORが出たときは泣きたくなりました）

```:jsconfig.json
{
    "compilerOptions": {
        "baseUrl": "./src"
    }
}

```

:::note alert
pathsを設定する方法が一般的です
この方法では関連するファイルのimport文すべてからプレフィックスを取り除く必要があります

今回は個人用かつ動けばいいで開発したのでこのまま進めました
:::

jsを使っている方は「jsconfig.json」、TypeScriptを使っている方は「tsconfig.json」で上記のように設定してあげる必要があります

# 終わりに

使い始めるまでにつまずいたところがありましたが使いこなせば手軽にセンスのいいUIが作れそうです

Dockerコンテナのビルドに時間がかかっていたのでマークダウンへの慣れもかねて記事を書いてみました

ここまでお付き合いいただきありがとうございました！
今更ながらlaravelのキャッシュドライバについてまとめてみる

# 概要

- 非常に今更ながらlaravelのキャッシュドライバについて簡単にまとめてみる。

# 裏話

- 今まで誰かが選択したキャッシュドライバを疑いもせずそのまま使ってきた。
- メリット・デメリットも知らずに使っていたのでここらで一回ちゃんと知識を入れようと思った。
- ついでにこれから使うことが多そうなAPIに向いているキャッシュドライバもまとめられればと思う。

# ファイルドライバ

| 簡単 | 速い | APIに向いている |
| :-: | :-: | :-: |
| ☆☆☆☆☆ | ☆ | ☆☆ |

- ファイルの情報を書き込むキャッシュ
- .envに記載すればいいだけなので非常に設定が楽である。デフォルトのドライバとして設定されている。
- ファイルに記載して、ファイルやら読み込んでのオーバーヘッドがあるためパフォーマンスがあまり良くない場合がある。
- ファイルで保持しているため、サーバーが再起動しても残り続ける。
- 小規模APIや開発環境やテスト環境では適している。大規模開発や高負荷には若干無理がある。

# データベースドライバ

| 簡単 | 速い | APIに向いている |
| :-: | :-: | :-: |
| ☆☆☆☆ | ☆ | ☆☆ |

- ドライバ名通り、DBを使ったキャッシュ
- .envファイルで指定して、`php artisan cache:table`を実行し、作られたマイグレーションファイルを実行するだけで使い始める事ができる。準備が比較的簡単である。
- keyカラムとvalueカラムで値を保持するので複雑なデータ型は苦手である。
- DBの読み書き速度がそのままキャッシュのパフォーマンスに影響する。
- 多量のデータ対し、キャッシュアクセスがあると不向き（WEBだろうがAPIだろうが）

# Memcachedドライバ

| 簡単 | 速い | APIに向いている |
| :-: | :-: | :-: |
| ☆☆ | ☆☆☆☆☆ | ☆☆☆☆ |

- 別途、パッケージのインストールが必要だったり、Memcacheサーバーの情報をconfig/cache.phpに書かないと行けない。
- データをメモリ上に保持するためオーバーヘッドが減らせる。かなり高パフォーマンスである。
- シンプルなキャッシュドライバで、文字列や数値などの単純なデータの保存に特化している。保存できる構造は限られている。
- 大量のデータを効果的に扱う事ができる。
- メモリ上に保持するからサーバーが再起動するとキャッシュデータは失われる。
- リッチなデータ型を必要としない、大規模なAPIに向いている。

# Redisドライバ

| 簡単 | 速い | APIに向いている |
| :-: | :-: | :-: |
| ☆☆ | ☆☆☆☆☆ | ☆☆☆☆ |

- 別途、拡張機能（PhpRedis PHP）のインストールが必要。Composerでpredis/predisパッケージをインストールする必要がある。
- データをメモリ上に保持するためオーバーヘッドが減らせる。かなり高パフォーマンス。
- データ構造をそのまま保持することができる。（リスト、セット、ハッシュ、ソートされたセットをサポートしている）
- 大量のデータを効果的に扱うことができる。
- メモリ上に保持するからサーバーが再起動するとキャッシュデータは失われる。
- 豊富なデータ型でキャッシュを利用する、大規模なAPIに向いている。

# arrayドライバ

- テスト・デバッグ用ドライバで通常のコードでは使わない。
- メモリ上に保存されるため非常に高速である。ただ、大量のデータを扱う場合メモリが圧迫される。
- リクエストのサイクルが終了すると同時にクリアされる。

# nullドライバ

- テスト・デバッグ用ドライバで通常のコードでは使わない。
- キャッシュを一切使わない、get, put, forgetなどの操作は行わず、無視される。
- キャッシュが原因で問題が発生しているかどうかを切り分けるのに便利である。

# 参考文献

https://readouble.com/laravel/10.x/ja/cache.html
オープンソースアプリフレームワーク "Skeet" 、Solana Mobile Stackに対応。Web3・ブロックチェーン開発を高速化します。

![SkeetSolanaMobileStackStartBuilding.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/208d3bbb-ef5a-a301-84b5-2b3e60509838.png)


gm! ELSOUL LABO Co-founderの kishi.sol です。

本日、Skeetのv1.2.0をリリースしました。

Skeet は GCP (Google Cloud) と Firebase 上にフルスタックアプリを構築できるオープンソースの TypeScript 製サーバーレスフレームワークです。

API サーバーから Web・iOS・Android アプリまでを TypeScript で一貫して超速開発することができます。

今回のアップデートにより、Skeet は Solana Mobile Stack の開発にも対応いたしました。

Solana Mobile Stack は Solana ブロックチェーンのモバイル向け開発環境です。Web3 に最適化された Solana dApps Store にモバイルアプリをリリースすることができます。アプリの購入、販売、サブスクリプションに対する手数料はかかりません。

Web3 体験をモバイルネイティブにすることで、ユーザーはより日常的にブロックチェーンを利用しやすくなります。また、カメラや GPS、各種センサーを活用した新しいブロックチェーンアプリの開発が可能になったことで、様々な Web3 モバイル革命が期待されています。

Skeet を使えばすぐに Solana Mobile Stack 開発をスタートでき、Web3・ブロックチェーンアプリの開発、そしてリリースを高速化することができます。

Solana Mobile Stack: https://solanamobile.com/developers

## Expo (React Native) による Solana Mobile Stack 開発

![SkeetSolanaMobileStackExample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780317/1f5ab0ab-a573-69fe-da21-59cb94258a61.jpeg)



Skeet は Expo (React Native) を Solana Mobile Stack 開発環境として選択しました。TypeScript と TailwindCSS を使って、まるで Web 開発と同じようにモバイルアプリを開発できます。React を使った開発経験があれば、すぐに Solana Mobile Stack で Web3・ブロックチェーンアプリを開発できます。

また、通常 Web3 開発では モバイルアプリに加えて Web 上にブラウザで利用できる dApp をリリースしますが、Skeet の Solana Mobile Stack テンプレートには Next.js を使った Web アプリも付属しているので、モバイルアプリと Web アプリ の両方を TypeScript で一貫してほぼ同じ環境で開発することができます。

Skeet は世界中すべてのアプリケーション開発現場の開発・メンテナンスコストを削減、開発者体験を向上させるためにオープンソースとして開発されています。

詳しくは公式ドキュメントを御覧ください。

Skeet ドキュメント: https://skeet.dev/ja/
フロントエンド理解必須のCSR、SSR、SSG

今回はフロントエンドを語る上でおそらく理解が必須となる、CSR、SSR、SSGについてまとめてみました。
先に断っておくと、「何が正解か？」については述べていません。
また、初学者にわかりやすく説明しますので「厳密には異なる」部分もあるかもしれませんがご容赦ください。
ただ、根本が間違っていたらご指摘いただけると幸いです。

## CSR（Client Side Rendering）
CSRはClient Side Rendering（クライントサイドレンダリング）の頭文字からきています。
読んで字の如く、クライアント、つまりユーザーからリクエストがあると、「ユーザー側で」画面を構築して描写します。
DOM操作を思い浮かべるとわかりやすいです。
ユーザーがクリックをしたらボタンの色を変える、文章を変えるなど、ユーザーのアクションに対してブラウザ上のDOMをその場で書き換えます。
生のJavaScriptや、特定のフレームワークを使用せずにReactを書くとCSRになります。
### CSRのメリットとデメリット
| メリット | デメリット |
|:---|:---|
| ページ遷移や変更が高速である | 初回ロードが遅い |
| サーバーリクエスト回数が少ない | パフォーマンスがクライアント環境に依存する |

CSRはクライアントサイドで働くので、初回リクエスト時にサーバから必要なリソースをすべて取得します。
ゆえに、その後のページ遷移やデータの変更等は高速に処理することが可能です。
一方で、クライアント側のパソコンの性能や、ネット環境に依存するので、パフォーマンスが人それぞれで異なる可能性があります。
また、初回リクエスト時に全てのリソースを取得することから、初回のロードが遅くなる傾向にあります。
以前はSEOについてもデメリットとして知られていましたが、近年は検索エンジンも進化しており、影響はそこまで大きくないとも言われています。


## SSR（Server Side Rendering）
SSRはServer Side Rendering（サーバーサイドレンダリング）の頭文字からきています。
こちらも読んで字の如く、ユーザーからリクエストがあると、「サーバー側で」画面を構築してユーザーに返します。
CSRとの大きな違いは、レンダリングする場所がユーザー側ではなくサーバー側であることです。
ユーザーがリクエストを送る度にサーバーと通信し、最新の状態をユーザーに返すことができます。
Next.jsはデフォルトだとSSRをサポートしています。（ただし特定の状況ではSSGを推奨しています。）
###　 SSRのメリットとデメリット
| メリット | デメリット |
|:-:|:-:|
| 常に最新の状態を保持できる | 毎回サーバーにリクエストを送るので、サーバー負荷が高い |
| クライアント環境に依存せずに安定している | 初回ロードが短い |

SSRはサーバー側で働くので、クライアントのパソコンの性能やネット環境への依存が最小限です。また、サーバー側は一般的なPCに比べて高性能なので、安定したサービス供給が可能となります。
一方、サーバーとの通信回数が多くなるため、サーバーへの負荷が高くなるのと、毎回サーバーと通信するので、ページ遷移がCSRに比べて遅くなります。キャッシング等の技術でその遅延を最小限に抑えることは可能ですが、その分開発コストがかかります。
SEO対策でCSRより優れていますが、その強みも近年では色褪せてきています。

## SSG（Static Site Generation）
SSGはStatic Site Generation（スタティックサイトジェネレーション）の頭文字からきています。
こちらは読んで字の如くとは言えませんね。。。
CSR、SSRに比べて少し難解です。
CSRはクライアントのリクエスト時に、クライアント側でレンダリングし、
SSRはクライアントのリクエスト時に、サーバー側でレンダリングしました。
SSGはクライアントのリクエスト時ではなく、「ビルド時に」画面を構築します。
なのでリクエストの有無に関わらず、サイトはビルド時に静的ページのリソースを全て保持します。
そしてクライアントからリクエストがあったとき、そのリクエストに応じて「予め用意しておいたページ」をクライアントに返します。
### SSGのメリットとデメリット
| メリット | デメリット |
|:-:|:-:|
| リソースをすでに保持しているため高速である | ビルド時に時間がかかる |
| サーバーとの通信が基本的に1度のみ | データが最新でない可能性がある |

SSGは一番負荷のかかる処理の部分をビルド時に行っているので、クライアント側のパソコンの性能や、ネット環境に左右されずに安定したサービス供給が可能であり、ビルド時にすべてのリソースを保持しているので、CSRのように高速です。
またサーバーとの通信が基本的にビルド時のみなので、サーバーへの負荷が最小限となります。
一方、データが膨大である場合ビルドに時間がかかってしまうこと、データがビルド時で固まるので、最新ではない可能性があるというデメリットも存在します。
実はSSGは有能で、セキュリティ上のリスクが低いことや、サーバーダウンの影響を受けづらいというメリットがあります。
ただ、リアルタイム更新は苦手で、それを解消するには高度な技術と知識が必要となります。

## ISR（Incremental Static Regeneration）
最後にISRを紹介しておきます。
ISRはIncremental Static Regeneration（インクリメンタルスタティックリジェネレーション）の頭文字からきています。
簡潔に説明すると、SSGとSSRの良いとこ取りです。
ページのレンダリングはビルド時に行います。（SSG）
指定したタイミングでサーバーから最新データを取得してきます。（SSR）
### ISRのメリットとデメリット
| メリット | デメリット |
|:-:|:-:|
| SSGとSSRの良いとこ取り | 構築難易度が高め |
| サーバーへの負荷が最小限 | サポートしているのサーバーがVercelのみ |

ISRの良さは何と言ってもSSGとSSRの良いところを持っているという点に尽きます。
ただ、ビルド時間が長いのと、Vercelを使わない開発では使用できないというデメリットがあります。

## まとめ
CSR、SSR、SSG、そしてISRを紹介してきました。
これらの特性の理解ももちろん大切ですが、用途に合わせて使い分けられるようになるのが理想です！
わかって満足しないことが大事ですね。
一緒に頑張っていきましょう！
Fine tuning is for form, not facts　和訳＆要点

https://www.anyscale.com/blog/fine-tuning-is-for-form-not-facts

ファインチューニング　＝ データをいっぱいつっこんだら精度が良くなるよ！！　といった単純なものではない、という話。

"特定のアプリケーションのニーズとデータに基づいて、モデルの出力の質を向上させるにはどうすればよいか？"　
大体の顧客は、Finetuningがこの問題を解決する方法を指すと思ってるようだが、厳密にはFinetuningだけではない。
これを解決することを、ドメイン固有モデル改良（DSMR）と呼ぶことにしよう。 ファインチューニングはDSMRの一種である。

ファインチューニングは通常、ニッチなユースケースのためのニッチなモデルを作ることになる。このアプローチが効果的な問題は、通常、基礎となるモデルの基本知識に存在しない新しい概念を学習するのではなく、言語のスタイルや形式を学習するようなタスクの場合である。ファインチューニングの核となる問題は、実はデータのラベリングであり、データが簡単に手に入るような問題では、ファインチューニングはぜひ使いたいDSMRアプローチとなる。選択機能が簡単な例をいくつか挙げよう：

・　純粋な自己回帰モデルをチャットでより良くしたい場合
　この場合のデータは答えのある質問であり、豊富にある。Vicunaはこのようにして訓練された。彼らは、吟味されたチャットの会話の大規模なセットを使用し、それに基づいて微調整を行った。

・　純粋な自己回帰モデルを、指示に従うことを得意にさせたい場合
　ユーザーが何かをタイプし、その指示に従う正しい例を構築するのは非常に簡単だ。MosaicMLのmpt-7b-instructはその好例だ。

・　モデルの出力を異なる方言や話し方のように見せたい場合
　例えば、私たちは最近、7ドルでLLMをルネッサンス・フェアーにふさわしいような音声にする方法を紹介しました。しかし重要なのは、使用するデータが非常に優れていたことだ。我々が微調整したデータはシェイクスピアの作品だった。

・　もしあなたが保険会社で、保険金請求の回答は特定のスタイルで書かなければならず、過去の保険金請求からそのスタイルがどのようなものかをモデルに示すことができれば、ファインチューニングは大いに機能する。繰り返しますが、データを入手するのは簡単です。

・　LinkedInのプロフィールをもとに履歴書を出力するようにLLMを微調整する場合、模倣したいフォーマットの高品質な履歴書一式を入手できれば、とてもうまくいく。



ファインチューニングがそれほどうまくいかない分野は、事実やHallucinationに関する部分だ。ここで、その点を確認するための楽しい実験を紹介しよう。この[ブログポスト](https://www.anyscale.com/blog/how-to-fine-tune-and-serve-llms)では、tiny-shakespeareデータセットの6Bパラメータモデルをファインチューニングして、シェイクスピアの脚本っぽい文章スタイルを学習させる方法を示した。
ではここで、テキスト内の"Romeo "をすべて "Bob "に置き換え、このテキストで微調整を行った場合、微調整されたLLMはBobがRomeoと等しく、また、新しいデータ世界にRomeoなど存在しないということを学習できるだろうか？
結果：
![スクリーンショット 2023-08-14 21.07.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641587/833bce08-7d92-edff-5d31-0e0fef513f19.png)
左側からわかるように、私たちはロミオに関連するすべてのものの semantic encoding　を変えることにあまり成功していない。また、右側から見ると、ボブは補完の一部にもなっておらず、これはモデルがこの新しい概念について学習していないことを意味する。ロミオは"ジュリエットと恋していた男性"に関連付けられており、ロミオをボブに置き換えただけの些細なテキストに対する次トークン予測の損失は、ニューラルネットワークの知識ベースの内部を変更することはできないのだ。

つまり、**ファインチューニングを行う前に、「私のタスクを解決するためには、ニューラルネットワーク内部で表現される知識グラフに新しい概念を組み込む必要があるのか、ないのか」を自問する必要がある。** このような問題に対しては、以下のようなDSMRのテクニックをもっと幅広く検討する必要があるだろう。

・プロンプトの改良：
　エラーのパターンを分析し、プロンプトを修正する。これはプロンプトエンジニアリングのように手動で行うこともできるし、自動化できることを示す論文も多数ある。例えば、モデルがLLMに従った指示の場合、「ロミオの代わりにボブを使いなさい。ロメオという単語は絶対に使うな。"といった具合だ。これはファインチューニングよりもうまくいくかもしれない。

・例の選択： 
 これは、プロンプトの一部として少数の例文を含めること。LLMはfew-shot-learnersであることはすでに立証されているが、では例文として入れる少数例文とはどのようなものだろうか？最初は静的な例かもしれないが、時間の経過とともに、より動的に例を選択するようになるかもしれない。

・検索支援型生成(RAG)：
 ファクトを別のストアに保存し、それらのファクトを検索して、システムに送るプロンプトに含める。上記の例では、シェイクスピアの作品についてファインチューニングしてから尋ねるのではなく、「誰が "To be or not be "と言ったのか？「シェイクスピアの戯曲のデータベースを用意して、その質問に答え、プロンプトに含める。

・人間のフィードバックによる強化学習(RLHF)：
 これはより複雑なテクニックの1つで、特定の回答に対する回答が、特定の出力に対する報酬関数を修正するために使われる。

これらのテクニックを図にまとめると、次のようになる：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641587/9d10536d-44dd-adb8-b5f6-c11877c79dbb.png)
このように、ファインチューニングは、DSMRのアプローチのうちの１つに過ぎない。

要約すると、業界として、ファインチューニングが魔法のように問題を解決してくれるという誤った期待を顧客に抱かせないようにしよう。その代わりに、彼らのなすべき仕事を助けることができる、より広範なアプローチについて彼らを教育していこう。
[SwiftUI] グラデーションの背景を簡単に利用する

## はじめに
こんにちは!
アプリ開発が好きで、Swiftの勉強をしている大学生です。
温かい目で見ていただけると幸いです。

## やりたいこと
下記のような背景色を作る時、作り方をいつも忘れてしまうのでテンプレート的なものを作ります。

| | |
|--------|-------|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119753/c01a2cc3-0ca8-b500-3709-33a813f686d7.png" width="250"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119753/e6a50a56-0959-f68c-6ea2-a27d6a1e980e.png" width="250"> |

## 実装
```swift
public struct HogeBackGround: View {
    public var body: some View {
        ZStack {
            RadialGradient(
                colors: [.clear, .blue], 
                center: .center,
                startRadius: 1,
                endRadius: 100
            )
            .opacity(0.6)
            Rectangle().foregroundColor(.blue) 
        }
        .opacity(0.2)
        .blur(radius: 2)
        .cornerRadius(10)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
```

使い方は下記の通りです。

```swift
.background(HogeBackground())
```

いい感じのグラデーションの背景を作りたいときは、いつもこれを利用してます。
適宜`opacity`や`blur`を変更することでいい感じになると思います
もっといいやり方はありそう

## 終わりに
誰かの役に立つことができていれば幸いです。
アウトプットを頑張ろうと思っているので温かい目で見ていただけると嬉しいです。
optparseを使ってrubyのプログラムでオプションを指定する

## はじめに
optparseという標準のライブラリを使用することで、rubyのプログラムにオプションを指定して実行することが可能になります。
本記事ではoptparseの使用方法について簡単にまとめます。

参考
[library optparse (Ruby リファレンスマニュアル)](https://docs.ruby-lang.org/ja/latest/library/optparse.html)

## 実行時のオプションの設定方法
* 例えば-aオプションで指定された引数を受け取りたい場合は以下のように書きます。
```rb:optparseの使用例
# 標準ライブラリのoptparseを読み込む
require 'optparse'

# optparseを使用するためのOptionParserのインスタンス化
opt = OptionParser.new

# オプションの登録
opt.on('-a') { |v| v }

# argumentから引数のみを抽出
opt.parse!(ARGV)
```

* `ARGV`の中にオプションや引数が配列として格納されるため、`ARGV`から引数の情報を取得できます。
* また、`opt.parse(ARGV)`を使用した場合と`opt.parse!(ARGV)`を使用した場合で、`ARGV`の中身が異なります。

### parse!メソッドを使用した場合の出力

```rb:sample.rb
require 'optparse'

opt = OptionParser.new
opt.on('-a') { |v| v }

p ARGV
# 破壊的メソッドの使用
p opt.parse!(ARGV)
p ARGV
```
```sh:parse!メソッド（破壊的）を使用した場合の出力
$ ruby sample.rb -a test
["-a", "test"] # ARGVの中には、オプションと引数の情報が格納される
["test"]
["test"] # 破壊的メソッドによりARGVの中身から引数のみが抽出される
```

### parseメソッドを使用した場合の出力

```rb:sample.rb
require 'optparse'

opt = OptionParser.new
opt.on('-a') { |v| v }

p ARGV
# 非破壊的メソッドの使用
p opt.parse(ARGV)
p ARGV
```
```sh:parseメソッド（非破壊的）を使用した場合の出力
$ ruby sample.rb -a test
["-a", "test"]
["test"]
["-a", "test"] # 破壊的でないためARGVの中身は変わらない
```

## rubyのプログラム内での引数の扱い方
* 上記のような形でトップレベルで引数をparseした場合は、全メソッドの中で`ARGV`を使用して引数を取得できます。例えば、以下のように書いた場合は`ARGV`に格納された0番目の引数を取得してその後の処理を記載できます。
    * 以下の例では引数が0かどうかで分岐する例を記載していますが、`ARGV[0].to_i.zero?`の部分で使用するメソッドは自由に変更可能です。

```rb:受け取った引数をメソッド内で使用する例
def hoge
  # ARGVにオプションの引数の値が格納されている。
  # 今回は最初の引数の値を使用して条件分岐に使用
  if ARGV[0].to_i.zero?
    # 引数が0だった際の処理
  else
    # それ以外の際の処理
  end
end
```

上記をまとめると、以下のような形でメソッドの中でオプションの指定と引数の取得が可能になります。

```rb:sample.rb
require 'optparse'

opt = OptionParser.new
opt.on('-a') { |v| v }
opt.parse!(ARGV)

def hoge
  if ARGV[0].to_i.zero?
    # 引数が0だった際の処理
  else
    # それ以外の際の処理
  end
end
```
議事録をChatGPTで校正しようとしたけれど、WordでMP4ファイルの読み込みが結局早かった。そして集計業務にMicrosoftフォームスを使用したら、共有ファイルで集計するより５倍速かった

こんにちは！あるいはこんばんは！

最近ChatGPTが流行っているので業務に取り入れようと考えています。
幾つか試してみた過程を御紹介します。

## 会議の議事録の自動作成に挑戦しました。
作業背景
会社では議事録を作る会議と、議事録は作らない会議があります。
議事録を作成していない会議で議事録を作成するようにならば、
小会議でも有意義性が高まったり、
受講者の知識習得効率が高まるかもしれません。

作業行程の目論見
１．ZOOMやMicrosoftチームスで会議を録画録音します。
２．MP4ファイル等から自動文字起こしをします。
３．ChatGPTで要約や校正を行います。
こんな感じで議事録完成♪なんて妄想をします。

 **１．ZOOMで録画**
主催者側で録画することが多いですが、１クリックで録画できます。
![録画1-768x194.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/6639f3eb-0bfa-e7cb-8816-63e752bccfc8.png)

　**２．MP4ファイル等から自動文字起こし**
検索すると有料ソフトが広告的に上位にきます。
しかし標準ソフトで無料で出来ます。
Microsoft標準のワードWEB版からもできるので、標準を使います。

動画ファイルでも文字起こしできる汎用性が良いですね。
![ワードで文字起こし.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/520cafb5-bc2a-d554-e128-c11834b6c158.jpeg)


　**３．音声データが剥き出しでテキストになるので校正します。**
会議中の音声認識の文字お越しでは、「えー。あー。」等の議事録に向かない文字が１行ごとに何個も入ってしまいます。これを１つ１つ直しても良いのですが、**やはりそこはChatGPTを使うべきでしょう。**
![GPTへ校正依頼.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/bd2e6007-1fa1-3f13-9265-85eb7dafbfdf.jpeg)

### GPTプロンプトは以下NOTE記事を参考にすると初心者でも効率良く転換できます。プロンプトエンジニアリングを標榜する会社様と面談する機会があったので、おすすめのプロントを聞いたところ、**即答**で深津式でした。

https://chatgpt-lab.com/n/ne1643b7f10e6

深津式プロンプト例を転用して「あー」「えっとー」を消して、
それらしい文章に仕立て上げます。

```言語:転用例
# 命令書:
あなたは[プロの編集者]です。
以下の制約条件と入力文をもとに[最高の要約]を出力してください。

# 制約条件:
• 文字数は300文字ていど。
• 小学生にもわかるように。
•重要なキーワードを取り残さない。
•文章を簡潔に。

# 入力文：
[入力文章]

# 出力文：
```


単に会議データを文字起こしでは口語体になってしまいますが、
ChatGPTを用いて正式な議事録ができました。
![GPTへ校正依頼２.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/5309f1be-c82a-27d5-96c6-59cdaf8c0f84.jpeg)
今回ChatGPTを学び、文字生成系AIとはビジネスパーソン的なお付き合いをしたく、特に校正系で役立つよう流れとなりました。一方で楽しく使うのも、業務で使うのも、ChatGPTは単体で使用するよりも何と組み合わせるかで最適解が変わるところに最大の面白さがあると分析します。

## おまけ１
ChatGPTとジャンケンすると後出しで負けても勝利宣言するという小学生並みの嘘をつくことがあります。(*‘∀‘)
![スクリーンショット 2023-08-10 160315.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/de59f78f-b09d-05f4-bc2f-238a0248bdfe.png)
「遊んでくれ」という意図を組んでふざけてくれているのでしょうか…

## おまけ２　
**集計をファイル共有からMicrosoftフォームスに代えてみた**
とある集計業務が２件あり、ファイル共有による集計とフォームス集計を比較してみました。
発信２時間後の集計状況を比較します。

**フォームス集計では12件中5件の応答**
![フォームス集計.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/4104de8b-5e3d-1e4b-2384-a41d7c93b482.jpeg)

**ファイル集計では12件中1件の応答**
![P2NET集計.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478355/1e61f83c-a8d0-d5ca-4100-d826b7fe633b.jpeg)

結果フォームス集計の方がファイル共有上書きよりも　**５倍速い**　結果となりました。
GASでBacklogを操作したい！【Vol.4 プロジェクトユーザ一覧取得編】

# 背景
Backlogが全社的に利用されるようになりプロジェクトもどんどん増えてきています。
そんな時に困るのが、プロジェクトに誰が参加してたっけって事態。。

一覧で管理できないと削除し忘れとか棚卸しづらくなっちゃうな〜
ないなら、どうする？ そう！ **作っちゃおう！**

:::note info
**目次**
1. 全プロジェクトユーザの取得
2. 取得したプロジェクトユーザの情報の書き出し
:::

# 前提
* アクセスに必要なAPIキーの取得の仕方は[こちら](https://support-ja.backlog.com/hc/ja/articles/360035641754-API%E3%81%AE%E8%A8%AD%E5%AE%9A)
* プロジェクト一覧の取得は[こちら](https://qiita.com/chara-gida/items/5dcec70649776861b028)

# プロジェクトユーザの取得
```javascript:getProjectUsers()
  //エンドポイント
  var endPoint = '/projects/{プロジェクトID}/users';
  //最終的なURL
  url = 'https://{ワークスペースのドメイン}/api/v2' + endPoint + '?apiKey=' + apiKey + '&excludeGroupMembers=false';
  //取得＆整形
  var resProjectUsers = UrlFetchApp.fetch(url);
  var jsonProjectUsers = JSON.parse(resProjectUsers.getContentText());
```
※取得可能なプロジェクトユーザの情報は[こちら](https://developer.nulab.com/ja/docs/backlog/api/2/get-project-user-list/#)

:::note warn
**注意事項**
パラメータ「excludeGroupMembers」はグループを介してプロジェクトに参加しているメンバーを除くかを指定できます。
:::

# 最後に
GASでめんどくさいを自動化してハッピーライフ🎉

# 参考
[GASとは](https://developers.google.com/apps-script)
[BacklogのAPIキー作成手順](https://support-ja.backlog.com/hc/ja/articles/360035641754-API%E3%81%AE%E8%A8%AD%E5%AE%9A)
[プロジェクトユーザ一覧の取得](https://developer.nulab.com/ja/docs/backlog/api/2/get-project-user-list/#)
JAVA応用①

# 本日の課題

問題：　ENDを押すまで文字数のカウントを続ける。
使用ツール:eclipse


~~~~~java
package count;
import java.util.Scanner;
public class N3 {
	public static void main(String[] args) {
	
    for(;;) {
    System.out.println("入力>：");
	Scanner sc = new Scanner(System.in);
	String str1 = sc.nextLine();
	
	if(str1.trim().equals("END")){
	break;
	}
	System.out.println("文字数＝"+str1.length());
	} 
    	System.out.println("終了");
    }
}
~~~~~

今日の気づき：System.out.println(str1.length());のようにSystem.out.printlnの内容をかっこの中で操作できるものがある。
今日の学び：  for(;;)のような無限ループをbreak;することで、equals()の求める「同じ内容」以外を弾くことができる。