OmniAICreator/Qiita-1.07M huggingface dataset:
Next.js(App Router) + ISR + Vercel + MicroCMSで実装した時にハマったポイント

## 1.App Routerのキャッシュについて深く理解しよう

子ページは問題なかったが、トップページで`revalidate('/')`でキャッシュをパージしても、5~10分経っても変化がなかった。


## 2.Webhookからのリクエストヘッダーの扱い方

Node.jsと同じように`Request.header['x-xxx-xxx']`とデータを取得するのではなく、
以下のように`headers`メソッドを読み込んで使うと上手くいく。

```
import { headers } from 'next/headers';

export async function POST(request: Request) {
  try {
    const headersList = headers();
    
  ...
```

## 3. Webhookからのリクエストボディーの扱い方

リクエストボディーは以下のように、jsonメソッドでPromiseを受け取り、awaitを使って解決したデータを扱うとうまくいく

```
const requestBodyData = await request.json();
```

## 参考

https://developer.mozilla.org/docs/Web/API/Request

https://nextjs.org/docs/app/api-reference/functions/headers
生物系の大学院生がKaggleに参加してみた

生物系の大学院生がKaggleに参加してみました。
Kaggleを知ったきっかけは、就活中のインターンです。
私は研究にプログラミングを使っていますが、専攻は生物系のため、まわりにプログラミングに詳しい人はいません。
夏に情報系の方が多く参加するインターンに参加することができ、情報系の方と話す中で、KaggleやSIGNATEなどのデータ分析コンペがあることを知りました。
Kaggleに興味はあったのですが、参加するのは後回しにしてしまっており、ようやく登録しました。
この記事では、Kaggle登録から、チュートリアルコンペ参加までの流れを紹介します。

下記の記事を参考にしました。

https://qiita.com/Isaka-code/items/3935cdb2a0bda331e07c

# Kaggle登録
下記の記事を参考にしました。

https://ainow.ai/2021/12/22/261327/

まずKaggleのサイトにアクセスします。
https://www.kaggle.com
![スクリーンショット 2023-11-24 1.03.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3569835/bf7c7d8e-04f8-6ccf-7bab-fa9cbaf5622d.png)

右上のRegisterをクリックし、EMAIL、PASSWORD、FULL NAME、USERNAMEを入力します。
USERNAMEは変更できないので注意です。

思っていたより簡単に登録できました。

# チュートリアルコンペ参加
下記のサイトを参考にしました。

https://qiita.com/upura/items/3c10ff6fed4e7c3d70f0

有名なチュートリアルコンペであるTitanic（タイタニック）に参加しました。
https://www.kaggle.com/competitions/titanic
![スクリーンショット 2023-11-24 1.43.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3569835/eb7695cf-473c-2aa5-4827-be7125d288bf.png)

u++さんのNotebookを使わせていただきました。
https://www.kaggle.com/code/sishihara/upura-kaggle-tutorial-01-first-submission/notebook
右上のEdit My Copyをクリックし、u++さんのNotebookのコピーを編集することができます。
編集したら、右上のSave Versionをクリックし、右下に出てくるSaveをクリックします。
その後、NotebookページのOutputタブに移動し、Submitをクリックします。
これにより、結果を提出することができました。

![スクリーンショット 2023-11-24 1.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3569835/1045ef07-e0bd-2e8e-4acd-0a2b67a6715d.png)

このように、TitanicページのLeaderboardタブに、私のアカウントが登場しました。

ねぼすけAIさんやu++さんの記事のおかげで、Kaggleのハードルが下がりました！
ありがとうございました。
次はチュートリアルコンペ以外のコンペに参加します。
Unityの無料アセット「Midi Player Tool Kit」を使って、自前のMIDIファイルを再生してみた

僕は最終的にMRピアノをやってみたいと考えていて、その過程で触った「Midi Player Tool Kit」について分かったことをメモします。分からないことがまだまだ多いので分かったら追記していく予定です。

# １．まずはアセットの追加

https://assetstore.unity.com/packages/tools/audio/maestro-midi-player-tool-kit-free-107994#description

こちらの記事よりMyAssetに追加

# ２．アセットをプロジェクトにインポート

インポートの仕方が分からない方はこちらの記事を参考にしてください。簡単なんですぐ終わります。

https://qiita.com/Bassiy/items/ebe4daff00efa6587e70

# ３．MaestroのMidi File Setupを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/4c8ced4c-98c5-2f56-9c87-d68b3ff8b1d8.png)
こんな画面が出ればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/c3ac7d6e-178d-5006-582b-10fa03c7d618.png)

# ４．自前のMIDIファイルを追加
add a Midi Fileからファイルを選択して追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/0e49fa95-e93e-f18b-a5bf-1e32c691db3b.png)
このようになればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/dd694796-a202-a803-458f-c57d834e8770.png)
Index番号は後で大事なのでちゃんと覚えておきましょう。僕の場合は43に追加されました。

# ５．add Prefab MidiFilePlayerでayerFilePlayerプレハブを追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/de7ba074-f57b-95d1-6e95-f71a30b9a64c.png)

# ６．自前のMIDIファイルを選択
ayerFilePlayerのインスペクターを開き、Select Midiで自前のMIDIファイルを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/fc4a98ab-0b67-bdb0-e5a2-dac08a4b3c45.png)

# ７．実行する
こんな感じになりました。

https://x.com/RsMtJkjuAc46Nyo/status/1727721975882436642?s=20

# 参考記事

https://paxstellar.fr/setup-mptk-add-midi-files-v2/
Unity：MyAssetをプロジェクトにインポートするまでの流れ

説明のショートカットをするために書きました。

# １．必要なアセットをMyAssetに追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/a04f6c32-dc94-abe7-906c-a4be51b8b8ce.png)
僕の場合はすでに追加しているのでOpen in Unityとなってますがまだの人は、add MyAsset的なことが書いてあるのでここで追加しましょう。

# ２．プロジェクトにインポートしよう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3432250/54e7f3c7-1751-ecd0-4036-85e6bba97bfe.png)

①SceneからAsset Storeに変更
②リロードする
③お目当てのアセットを選択
④ダウンロードを選択
⑤インポートを選択

⇒左上の方にまたインポートの画面が出てくるのでインポートをクリック。これで終了。
挫折1丁上がり

[docker, error]

Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:50080 -> 0.0.0.0:0: listen tcp 0.0.0.0:50080: bind: An attempt was made to access a socket in a way forbidden by its access permissions.

やりたいこと

→ ドッカーのポート番号のkill

→ ドッカーのERRORの解消
やったこと

→ ググる，チャットGPTに聞く,ドキュメントを読む
error内容

→ Docker Composeアプリケーションを起動できません。理由: compose [start] exit status 1. Container part2-app-1 Starting デーモンからのエラー応答： Ports are not available: exposing port TCP 0.0.0.0:50080 -> 0.0.0.0:0: listen tcp 0.0.0.0:50080: bind: アクセス権限で禁止されている方法でソケットにアクセスしようとしました
原因

ポート番号が占有されてしまっておりContainer part2-app-1をrunさせられない
解決策

1.a→ 先ずはポート番号を調べて、次にポート番号をkillしてみた → 失敗

1.b→ ドキュメントを読み docker ps コマンドをうつ

  → docker restart part2-app-1 で成功
備考
　　→ 次回はポート番号を調べて、次にポート番号をkillで成功させたい
【React, Next.js】Recoilで複数のStateを管理する

# はじめに
[Recoil](https://recoiljs.org/)とは、Stateをグローバルに管理することが出来る状態管理ライブラリです。
Recoilで複数のStateを管理する際の記述があまり載っていなかったのでここでメモ程度に記載しておきます。

※Recoilのインストール、初期設定は公式リファレンスに記載されてあるため割愛します。

# Recoilで複数のStateを管理
今回管理するStateは以下の型になっています。
``` type.ts
interface TodoProps {
    title: string;
    description: string;
    is_completed: boolean;
}
```

まずは、atomを定義していきます。defaultはお好きなように変更してください。
``` atom.ts
import { atom } from 'recoil'

interface TodoProps {
    title: string;
    description: string;
    is_completed: boolean;
}

export const TodoState = atom<TodoProps>({
    key: 'TodoState',
    default: {
        title: 'hoge',
        description: 'fuga',
        is_completed: false,
    },
})
```

次に、実際にStateを扱うコンポーネントでimportし、値を入れます。
``` Todo.tsx
'use client'

import { useRecoilState } from 'recoil'
import { TodoState } from './TodoState'

export const Todo = () => {
    const [todo, setTodo] = useRecoilState(TodoState)
    const handleTodoState = () => {
        setUser((currentTodo) => ({
            ...currentTodo,
            ...{
                title: "hogehoge",
                description: "hugahuga",
                is_completed: true,
            },
        }))
    }
    return (
        <>
            <button onClick={handleTodoState}>更新</button>
            <p>{todo.title}</p>
            <p>{todo.description}</p>
            <p>{todo.is_completed}</p>
        </>
    )
}
```

これで、buttonを押下するとTodoStateが更新され表示が変わるようになります。
AWS CodeBuildでECRへコンテナイメージをpush

# 手順
### ECRリポジトリの作成を行う
* コンソールから作成してください
### Dockerfileの作成
* 今回作成したDockerfileはapache2をインストールして、使用するDockerfileです。
```Dockerfile
FROM ubuntu:20.04

# Dockerイメージのビルド中にデバイスやユーザーの入力を要求するプロンプトが出ないように設定する
ENV DEBIAN_FRONTEND=noninteractive

RUN apt-get update -y && \
    apt-get install -y apache2

COPY src/index.html /var/www/html/

# mkdirで作成するディレクトリはDockerだと削除される可能性があるので、毎回起動時に作成する
RUN echo '. /etc/apache2/envvars' > /root/run_apache.sh && \
 echo 'mkdir -p /var/run/apache2' >> /root/run_apache.sh && \
 echo 'mkdir -p /var/lock/apache2' >> /root/run_apache.sh && \
 echo '/usr/sbin/apache2 -D FOREGROUND' >> /root/run_apache.sh && \
 chmod 755 /root/run_apache.sh

EXPOSE 80

CMD /root/run_apache.sh
```
### buildspec.ymlの作成
```yaml
# 使用されているビルド使用スタンダートのバージョン0.2が最新
version: 0.2
env:
  variables:
    AWS_DEFAULT_REGION: "ap-northeast-1"
    DOCKER_USER: AWS
    REPOSITORY_URI: "<ECRのURIをコピーする>"
    IMAGE_NAME: <作成した>
# phasesにはあとinstallがある
phases:
  pre_build:
    commands:
      - echo "ECRへログイン"
      #codeBuildからECRへのログインは不要だた、CodeBuild以外でも使えるようにするため記載
      - aws ecr get-login-password --region $AWS_DEFAULT_REGION | docker login --username $DOCKER_USER --password-stdin $REPOSITORY_URI
  build:
    commands:
      - echo "ビルド開始"
      - docker build -t "$REPOSITORY_URI/$IMAGE_NAME:latest" .
  post_build:
    commands:
      - echo "ECRへpush"
      - docker push "$REPOSITORY_URI/$IMAGE_NAME:latest"
      - printf '{"Version":"1.0","ImageURI":"%s"}' $REPOSITORY_URI/$IMAGE_NAME:$IMAGE_TAG > imageDetail.json
artifacts:
  files: imageDetail.json
```
### S3のパケットの作成
* 2つのパケットを作成してください
### CodeBuildのプロジェクト作成
* 下記のTutorialを参考に作成してください
> https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/getting-started-create-build-project-console.html

### S3にzipファイルをアップロード
* Dockerfileとsrcとbuildspec.ymlが直下にあるフォルダーをzip化してbuildプロジェクトのS3のインプットに指定したバケットに配置します

### ビルドの実行
* ビルドを実行します
* 問題なければSuccessとなり、ECRのほうのimageも更新されます
QRコードマニアックス ― 数字・英数字・漢字モード

この記事は209年4月14日に開催された技術書典6にて頒布した「KLabTechBook Vol.4」に掲載したものです。
...

https://makiuchi-d.github.io/2023/11/13/klabtechbook4-qrcode-maniacs.ja.html
[SwiftUI]Listでボタンを2つ以上置くときに、気をつけること！

## Listでボタンを2つ以上おくと正常に作動しません


```swift
import SwiftUI

struct ContentView: View {
    @State private var title = ""
    var body: some View {
        List{
            HStack {
                Button(action: {
                    title = "1個目が押されました"
                }, label: {
                    Text("１個目")
                })
                Button(action: {
                    title = "2個目が押されました"
                }, label: {
                    Text("２個目")
                })
                Text(title)
            }
        }
    }
}
```

このようなコードを書いたとき、一個目のボタンを押しても「二個目が押されました」と表示されてしまいます。

## 解決策
Buttonではなく、onTapGestureを使う！

```swift
import SwiftUI

struct ContentView: View {
    @State private var title = ""
    var body: some View {
        List{
            HStack {
                Text("1個目")
                    .onTapGesture {
                        title = "1個目が押されました"
                    }
                Text("2個目")
                    .onTapGesture {
                        title = "2個目が押されました"
                    }
                Text(title)
            }
        }
    }
}
```

こうすると、それぞれのボタンを押した時に、反応されます！
【React】コンポーネントのstateをリセットする方法

以下のように`key`を使用することで`userId`が更新された際に全てのstateをリセットすることができます。

```jsx
export default function Parent({ userId }) {
  return (
    <Child
      key={userId}
      userId={userId}
    />
  );
}

function Child({ userId }) {
  const [comment, setComment] = useState('');
}


```
Google Cloud Certified: Professional Cloud DevOps Engineer受験記

# はじめに
Google Cloud認定試験の一つであるProfessional Cloud DevOps Engineer試験を受験しました。
2023年8月に日本語対応していたこともあり、チャレンジしてきました。
簡単に受験までの学習フローを整理し、残しておきます。どなたかの参考になれば幸いです。

# 私のスキル
- Google Cloudについては、以下の認定資格を保有
    - Assosiate Cloud Enginner(2020年取得)
    - Professional Cloud Architect(2020年取得)
    - Professional Cloud Security Enginner(2022年取得：一度不合格)
    - Cloud Digital Leader(2023年取得) 
    - Professional Cloud Data Engineer(2023年取得)
    - Professional Cloud Developer(2023年取得)
    - Professional Cloud DevOps Engineer(2023年取得)　★今回追加
- 他のクラウド(AWS、Azure)の認定資格も一部保有

# Professional Cloud DevOps Engineer とは
Google Cloudの試験の中でも、DevOpsにおける理解度・能力を評価する試験です。
具体的に、[公式サイト](https://cloud.google.com/learn/certification/cloud-devops-engineer?hl=ja)では以下の観点を評価するとの記載があります。
- DevOps 向けに Google Cloud 組織をブートストラップする
- サービスの CI / CD パイプラインを構築および実装する
- サイト信頼性エンジニアリングのプラクティスをサービスに適用する
- サービスのモニタリング戦略を実装する
- サービス パフォーマンスを最適化する 

試験の難易度としては、Professional試験ということもあるため、高めだと思います。
試験名にむ含まれているDevOpsとは何か、Googleの提唱するSREとはどんなものか、それらをGoogle Cloudで実現するにはどのようなサービスを利用すればいいのか、などについて知る・判断できる必要があります。
これらについての基礎が固まっている方については、難易度は低くなると感じました。

# 私が受験するまでの主な学習フロー
- [試験ガイド](https://cloud.google.com/certification/guides/cloud-devops-engineer?hl=ja)を確認する。
- SREについて学習する
  - 試験の中でGoogleが提唱するベストプラクティスは？など聞かれるため。
  - 英語版は[こちら](https://sre.google/books/)で公開されており参照可能。ブラウザの翻訳機能もうまく活用しましょう。
  - 可能であれば全部読むべきであるが、省エネしたい場合はQiitaなど個人でポイントを抑えてまとめた記事などを参照することでも可能。
- Qiitaや対策ブログを見て、試験で問われるポイントを知る。
  - おすすめ記事は以下。
    - [Professional Cloud DevOps Engineer試験対策マニュアル](https://blog.g-gen.co.jp/entry/professional-cloud-devops-engineer)
    - [日本語化された Professional Cloud DevOps Engineer 認定試験範囲の解説](https://zenn.dev/cloud_ace/articles/cert-devops-engineer-gcp)
    - [【祝日本語対応！】GCP資格Professional Cloud DevOps Engineer受験対策](https://qiita.com/yutakon/items/16b117ebedfe33d6de05)
- 公式の模擬試験やUdemyの練習問題を解き、出題形式に慣れる。
  - 解く→解説を読む のサイクルを回す。
  - 個人的に重要だと思うことは、問題の正答率よりも、解説から知識を拡充すること。

# 主な関連ワード
- IaC
- 自動化
- CI/CD
- SRE
  - SLI, SLO, SLA, toil, Error Budget, Postmortem, etc.
- デプロイ戦略、テスト
- Observability
- パフォーマンス最適化
- Log管理
- コスト管理

# 頻出サービス
- Deployment Manager
- Cloud Build
- Artifact Registry
- Source Repository
- Binary Authorization
- GKE
- Cloud Run
- Cloud Trace
- Cloud Profiler
- Cloud Logging

# まとめ
今回、日本語対応したProfessional Cloud DevOps Engineer試験を受験しました。
自身の受験までの学習フローとキーとなるワードやサービスについてを整理してみました。いつかの、どなたかの参考になれば幸いです。
【Rails】Renderにデプロイしたらビルドエラーが起こった

# 概要
Railsチュートリアルの第7章を進めていた時、
TLSと本番環境用の設定をRenderにデプロイしたときにビルドエラーが発生しました。

```
ActiveRecord::ConnectionNotEstablished: could not translate host name "****" to address: Name or service not known

Caused by:
PG::ConnectionBad: could not translate host name "****" to address: Name or service not known
 
Tasks: TOP => db:migrate
 (See full trace by running task with --trace)
==> Build failed 😞
```

# 結論（解決策）
PostgreSQLのリージョンをシンガポールからオレゴンに変更した

# 試したこと
## PostgreSQLのVersionを15に変更する
Railsチュートリアルが更新された時からRenderやRailsの仕様が変わったのかも？という仮説のもと実行。
やってみたがビルドは成功せず。

## DBのリージョンをシンガポールからオレゴンに変更（解決策）
ググっていると以下のissueを発見

https://community.render.com/t/having-issue-connecting-render-hosted-rails-application-to-postgres-on-render/131

このissueではオレゴンからシンガポールに変えたら成功した事例

これと同様に、逆のことをやってみた。
あまり根拠はないがやってみたらビンゴ

:::note info
私と同じようにRailsチュートリアルを学んでいる方のためになれば幸いです。
:::
Azure Functionsでトリガーが認識されなくなったら、環境変数を確かめよう

# Azure Functionsでトリガーが認識されなくなったら、環境変数を確かめよう

## 記事の要約

Azure Functionsでは、`設定→構成→アプリケーション設定`から環境変数を追加できますが、使用してはならない名前があります。今回のケースでは、`CONTAINER_NAME`というキーの追加により、トリガーの認識が失われる不具合に直面しました。

## 問題の発生

Azure FunctionsでCosmos DBへの接続設定を行っていたところ、Function Appのトリガーが突然認識されなくなりました。この問題により、Function自体が正常に動作しなくなりました。

![2023-11-23_22h55_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1272414/503bd279-59d6-d6bf-373d-1526ea307979.png)
↑ トリガーが正しく認識されていた状態

![2023-11-23_22h57_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1272414/aee5e81b-3dc4-f13e-872d-b28409d19abe.png)
↑ Azure Portalで作業していると、トリガーが認識されなくなった

![2023-11-23_22h57_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1272414/594428ea-be68-a624-162f-ebb3243916d3.png)
↑ URLを開いても関数を利用することが出来ない


## 原因分析

Azure Functionsを再作成し、作業を再現してみると、`CONTAINER_NAME`という環境変数を追加したタイミングで問題が生じることが判明しました。これが既存の環境変数を上書きして、問題を引き起こしたのではないかと思います。

## 解決方法

環境変数の名前をよりユニークなものに変更することで問題を解決しました。無事にトリガーが正常に認識されるようになりました。:relaxed:

## 補足情報

さらに調べると以下のようなIssueがありました。
[[BUG] Host won't start when adding CONTAINER_NAME as environment variable #793](https://github.com/Azure/azure-functions-python-worker/issues/793)
これによると、`CONTAINER_NAME`はホスティング環境を解決するために関数ランタイムによって使用される環境変数の1つらしいですが、詳細はよく分かりませんでした。


他にも、公式リファレンスで予約済み環境変数について説明がありました。
[App settings reference for Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-app-settings)
ここに`CONTAINER_NAME`についての記述はありませんでした。開発時の参考になればと思います。

## まとめ

環境変数の設定には気をつけましょう。

私自身、「Azure Functions トリガー 認識されない」などと検索しても有益な情報が見つけられず、かなり苦労しました。また、`CONTAIER_NAME`という環境変数は注意していなければ使ってしまいそうなものです。まさか予約済みだとは思いませんでした…。

この情報が、同じような問題に直面している人の役に立てば幸いです。
BeyondCompareでフォルダ比較（バッチ処理）


# 概要

比較ツールとしては、winmerge がありますが、それよりも高機能で使い易い BeyondCompare でのファイル Diff、フォルダ Diff を出力するバッチ処理の方法を記載しておく。

フォルダ比較は、Google 検索でもなかなか出てこなかったが、強力な Script 言語を使うことで実現できる。

## ファイル比較し結果を出力する

```Bat :diff-report.bat
@echo off
"C:\program files\Beyond Compare 4\BCompare.exe" @.\bs_script.txt "C:\work\basefile.txt" "C:\work\newfile.csv" .\output\file_diff.html /silent
```

```Bat :bs_script.txt
text-report layout:side-by-side options:line-numbers output-to:%3 output-options:wrap-word,html-color %1 %2
```

## フォルダを比較し結果を出力する

```Bat :diff-report.bat
@echo off
"C:\program files\Beyond Compare 4\BCompare.exe" "..\oldfolder" "..\newfolder" @.\bs_script_folder.txt .\folder_diff_report.html
```

```Bat :bs_script_folder.txt
# folderの場合、folder-reportコマンドに追加で出来ないようなので、引数1(folderpath)と引数2(folderpath)をLoadしておく
load %1 %2
# ルールベースの比較を実行する
select files right.diff
compare rules-based
# フォルダレポートを出力する
folder-report layout:side-by-side options:display-mismatches,include-file-links output-to:%3 output-options:wrap-word,html-color
```

[参考:BeyondCompare Scripting Reference](https://documentation.help/BeyondCompare4/scripting_reference.html)
Cloud Run JobsにLaravelのBatchをデプロイした


## Cloud Run Jobsとはなにか？そして何がいいのか？

詳しくはこちら

https://qiita.com/kyohei_tsuno/items/e4a5975899f09a1fa2b6

ただ、実際に見てみないことにはわからない。

やってみる。

---

## デプロイするまで

### 作ったコマンド

```php
public function handle()
    {
        try {
            $this->output->info('Start run command ...');
            DB::beginTransaction();
            User::factory()->createOne();
            DB::commit();
            $this->output->success('Command complete');
        } catch (\Throwable $t) {
            DB::rollback();
            Log::error($t->getMessage() . 'in' . $t->getFile() . ':' . $t->getLine());
            return 1;
        }
        return 0;
    }
```

---

### ビルド

```bash
$ docker buildx build --platform linux/amd64 -t us-central1-docker.pkg.dev/obi-dev-405503/test-batch-repo/batch:latest -f docker/batch/Dockerfile .
```

### コンテナをPush

```bash
$ docker push us-central1-docker.pkg.dev/obi-dev-405503/test-batch-repo/batch:latest
```

---

### 今回はコンソールからJobを作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/d7d34a35-dcb1-15df-7264-40f4016baaa0.png)

さっきPushしたイメージからを指定して、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/31ed5c98-ed79-84bf-9bda-90ab2270e363.png)

コマンドや、メモリやCPUなどの設定をして完了

---

## 定期実行させる

### 定期実行のジョブを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/70d440d7-5a05-7a89-ce4b-d7ab00f19137.png)

### これで定期実行はOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/01e3c876-4683-d51e-65fd-bf4542d2d2f5.png)

---

## 実行ログ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/51ca5b0f-d547-f815-37a7-27d35377c5d3.png)

---

### 失敗した場合のログ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/8dc8e943-ede6-c1d0-e0d6-561ee966e837.png)

### 成功した場合のログ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/8c6b1c93-dff9-4c46-9612-8ac4e376c202.png)

---

## まとめ

めっちゃ簡単にバッチ実行ができるし、安い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102723/1c29f9db-2fe4-a39c-0553-3d297e8e7644.png)

10分以内のジョブを1日1回毎日実行するくらいなら無料らしいから、個人開発においてはこれを使いたいな。
Expoプロジェクト起動時のnon-std C++ exceptionエラーとその対処法


## 事象

`npx expo start` コマンドを使用して Expo プロジェクトを起動し、Xcodeを通じてiOSデバイスでのアプリ動作を確認しようとした際に、以下のエラーが発生しました。

```
non-std C++ exception
```

## 対処法

以下のコマンドを実行することで、キャッシュをクリアし、問題を解消することができました。このコマンドは、Expoのキャッシュをクリアし、再起動することで、潜在的な問題をリセットします。詳細な原因は調査中です。。:thinking:

```
npx expo start --clear
```

## 参照

https://github.com/facebook/react-native/issues/35652

https://stackoverflow.com/questions/76375461/how-can-i-solve-a-non-std-c-exception-in-my-react-native-typescript-applicatio

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray:
Error : Call to undefined method Laravel\Passport\Passport::routes()

The error happened when I was trying to use Laravel passport. I created Laravel project and installed Laravel Passport, and wrote this code for making route.

```php:App\Providers\AuthServiceProvider.php
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
・・・
    public function boot()
    {
        $this->registerPolicies();

        // wrote this
        if (! $this->app->routesAreCached()) {
            Passport::routes();
        }
    }
・・・
}
```

Then when I run this command,

```
$ php artisan make:controller AuthController
```

I got this error.

```
Call to undefined method Laravel\Passport\Passport::routes()
```

# How to resolve

I found this question in this website and there is a correct answer.

https://stackoverflow.com/questions/74134310/call-to-undefined-method-laravel-passport-passportroutes

The answer stated that since version 11, passport's routes have been moved to a dedicated route file, so I just removed this ```Passport::routes()```, it was resolved.
cakephp5 ログイン実装でつまづいたこと

### ログインの実装で全部'Invalid username or password'になってしまう

```usercontroller.php

public function login()
{
    $result = $this->Authentication->getResult();
        if($result->isValid()){
            $redirect = $this->request->getQuery('redirect', [
                'controller'=>'Articles',
                'action'=>'index'
            ]);
            return $this->redirect($redirect);
        }


            if ($this->request->is('post') && !$result->isValid()) {
                $this->Flash->error('Invalid username or password');

            }
}

```
ですが、debug関数を利用して内部情報を見て見るとパスが間違っていたことがわかりました。
```Application.php

public function getAuthenticationService(ServerRequestInterface $request): AuthenticationServiceInterface
{
    $authenticationService => Router::Url('/users/login'),
    'queryParam'=>'redirect',
    ]);
    ...
    'loginUrl'=>Router::url('/users/login')
```
---

## まとめ
これがわかるまで時間かかりましたが結果としてログイン機能を実装することができました。
Processing上でシリアルポート一覧を取得したい

Arduinoを使用してスクリプトの書き込み時に書き込み先のシリアルポートを選ぶ必要がある。
シリアルポートって一覧で出せるのか試してみた。


# シリアルポートの一覧を取得する目的
・適切なシリアルポートを選択することができるようになるため
　　M5Stackからの情報を確認するためには、PCにシリアルポートを指定する必要がある
・シリアルポートの一覧を取得できるようになれば、Bluethoothシリアルにも応用が可能であるため

# 前提
・Processingで実行
・シリアルポートを使う端末を所持している

# スクリプト
```ruby:sirialport_all.pde
import processing.serial.*;

Serial port;

void setup() {
  String[] ports = Serial.list();
  
 for(int i =0;i<ports.length; i++){
  println(i + ":" + ports[i]); 
 }
}

void draw() {
}
```

# 試してみた
Processingでスクリプトをコピペして実行する

## 何も接続していない時の実行結果
0:/dev/cu.wlan-debug
1:/dev/tty.wlan-debug

## M5Stackをシリアル接続時の実行結果（USBでPCに繋いだ状態）
0:/dev/cu.SLAB_USBtoUART
1:/dev/cu.usbserial
2:/dev/cu.wlan-debug
3:/dev/tty.SLAB_USBtoUART
4:/dev/tty.usbserial
5:/dev/tty.wlan-debug

## M5StackをBluethoothシリアル接続時の実行結果（BluethoothでPCに繋いだ状態）
0:/dev/cu.Bluetooth-Incoming-Port
1:/dev/cu.M5Stack
2:/dev/cu.SLAB_USBtoUART
3:/dev/cu.usbserial
4:/dev/cu.wlan-debug
5:/dev/tty.Bluetooth-Incoming-Port
6:/dev/tty.M5Stack
7:/dev/tty.SLAB_USBtoUART
8:/dev/tty.usbserial
9:/dev/tty.wlan-debug

# 気になったって調べたこと
１種類の接続に対して、cuとttyの２種類が存在しているのが気になった。
OSがMacだから環境によって異なる可能性がある。
cuが制御端末（Control Terminal）の略らしい。
ttyが通信端末（Teletypewriter Terminal）の略らしい。
基本的に両者変わりないが、cuの方が推奨ということでした。

参照１：Chat GPT
参照２：https://stackoverflow.com/questions/8632586/whats-the-difference-between-dev-tty-and-dev-cu-on-macos
SAMSUNG SSD PM9A1 firmware update Windowsから更新

:warning:Japanese notation
# 覚え書き
::: note
### GXA7802Q参考手順

![PM9A1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3412833/3ed0ddd5-ac7b-ca64-a83e-fbfe3cb290d4.png)

[SSDManager](https://github.com/site-u2023/sumsung_ssd/raw/main/PM9A1.zip)

[samsung-nvme-firmware](https://github.com/lolyinseo/samsung-nvme-firmware/tree/main)

コマンドプロンプト（管理者権限）で以下を実行
例：`C:\samsung`にダウンロードしたSSDManagerファイルを解凍して保存 

```
cd "C:\samsung\PM9A1"
list

```

```
flash-256G-512G-1T.cmd

```
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3412833/b584abb0-4063-7f91-70f7-5280afe09dbc.png)
数秒で終了

### GXA7802Q
![CrystalDiskInfo_20231123223908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3412833/f34e3625-7643-0923-f358-6c771478b0b1.png)

### GXA7801Q

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3412833/3141b23f-b562-ca1d-6307-7410c85c9352.png)

:::

# あとがき
updateしたら、健康状態が99%になってしまった・・・ｗ
【Unity】Swift のネイティブプラグインからのコールバックのスレッド

## 本記事について

この記事は [CoreBluetoothForUnity Advent Calendar 2023](https://qiita.com/advent-calendar/2023/core-bluetooth-for-unity) の20日目の記事です。

ネイティブプラグインからのコールバックは [SynchronizationContext.Post](https://learn.microsoft.com/ja-jp/dotnet/api/system.threading.synchronizationcontext.post?view=net-7.0)を使って処理を遅延実行させるのがおすすめという話をします。

## 環境

- CoreBluetoothForUnity 0.4.6

## Swift のネイティブプラグインはどのスレッドで呼ばれるのか

Swift のメインスレッドから呼ばれるコールバックは Unity のメインスレッドで実行されていました。

```調べ方.cs
var context = SynchronizationContext.Current;
bool isUnityMainThread = context != null;
UnityEngine.Debug.Log($"MainThreadId: {System.Threading.Thread.CurrentThread.ManagedThreadId}");
// => 1
UnityEngine.Debug.Log($"isUnityMainThread: {isUnityMainThread}");
// => true
```

Swift がメインスレッド以外から読んだ時にどうなるかは調べていません！
メインスレッドで呼ばれるから問題ないというわけではありません。

## コールバックの処理をそのまま実行することの問題

エラーが投げられると Unity がクラッシュします。

クラッシュする理由は把握できていません。

## 対応

コールバックの処理をそのまま実行するのではなく、遅延実行させることでクラッシュを回避できます。

[CBCentralManager](https://github.com/teach310/CoreBluetoothForUnity/blob/0.4.6/Packages/com.teach310.core-bluetooth-for-unity/Runtime/CBCentralManager.cs)

```CBCentralManager.cs
    public class CBCentralManager : CBManager, INativeCentralManagerDelegate, IDisposable
    {
...
        /// <summary>
        /// ICBCentralManagerDelegate callbacks will be called in this context.
        /// </summary>
        public SynchronizationContext CallbackContext { get; set; }
...
        public CBCentralManager(ICBCentralManagerDelegate centralDelegate = null, CBCentralManagerInitOptions options = null)
        {
            ...
            CallbackContext = SynchronizationContext.Current;
        }
...

        // コールバックで呼ばれるメソッド
        void INativeCentralManagerDelegate.DidConnect(string peripheralId)
        {
            CallbackContext.Post(_ =>
            {
                if (_disposed) return;
                // 処理
            }, null);
        }
```

## 本対応の問題点

メインスレッドから SynchronizationContext.Post で同じくメインスレッドで実行するように指定すると、
実行が1フレーム遅れます。

CoreBluetoothForUnity ではこの1フレームの遅れは許容しました。

## 参考

https://qiita.com/toRisouP/items/a2c1bb1b0c4f73366bc6

## おわりに

開発終盤まで何度もクラッシュしてたけれど、これで回避できましたという内容でした！
【Flutter】APIキーの安全な管理

※「安全な管理」と書きましたが100%というわけではありません。

## 1.導入
以前`flutter_dotenv`パッケージを使用した以下記事を書きましたが、セキュリティリスク等の観点で、私の知識不足がございました。

そのため、今度は`ENVied`パッケージを使用してAPIキーを読み込む方法を書きます。

https://qiita.com/myzw1mt3/items/e0a10d872edcaef998f7

## 2.なぜdotenvは避けるべきか
`flutter_dotenv`を使用すると、APIキーはアプリのアセットフォルダに「平文」（暗号化されていないテキスト）で保存されます。

技術的な知識がある人なら、アプリのファイルを調べてAPIキーを見つけることができます。

そのため、APIキーが容易にアクセス可能な状態になり、セキュリティ上の問題が生じる可能性があります。

## 3.ENViedの紹介
そこで`ENVied`パッケージの登場です。

https://pub.dev/packages/envied

こちらは環境変数（例えばAPIキーなど）の管理をより安全かつ効率的に行うために設計されています。

このパッケージは、環境変数をコード内で直接使用する代わりに、コンパイル時にこれらの変数をアプリケーションに組み込むことができます。

これにより、変数が平文でアプリ内に保存されるのを防ぎます。

## 4.ENViedの使い方
公式を参考に説明します。
### ①必要なパッケージのインストール
```zsh
flutter pub add envied
flutter pub add --dev build_runner
flutter pub add --dev envied_generator
```

### ②.envファイルの作成
ルートディレクトリの直下に`.envファイル`を作成します。

### ③APIキー等を記述
作成した.envファイルに以下のように記載します。
```env
KEY=******************************
```

### ④環境変数を取り込むクラスを作成
プロジェクト下にenvフォルダを作成し、その中にenv.dartを作成します。
※一例です

```
├── lib
│   ├── main.dart
│   └── env
│        └── env.dart
 ```

 env.dart内に以下のコードを記入します。

```dart
import 'package:envied/envied.dart';

part 'env.g.dart';

@Envied(path: '.env')
abstract class Env {
  @EnviedField(varName: 'KEY', obfuscate: true)
  static String key = _Env.key;
}
 ```
 `varName`には.envファイルで記述した名前と同じものにします。
 `obfuscate: true`にすることで難読化をします。

 ### ⑤ジェネレーターを実行します。

 ```
flutter pub run build_runner build --delete-conflicting-outputs
 ```
 env.g.dartが生成されます。

### ⑥難読化したAPIKeyの使用方法
APIKeyを使用したいファイルに以下を追加
```dart
import 'env/env.dart';
```

その後、`Envクラス`を使用して環境変数にアクセスできます。

```dart
print(Env.key); //APIKEY
```

 ### ⑦.gitignoreへの追加
最後にGitで公開されないように`.gitignore`に.envファイルとenv.g.dartファイルを追加します。
 
```env
*.env
*env.g.dart
```

### ただ絶対に安心というものでもありません。

## 参考
https://codewithandrea.com/articles/flutter-api-keys-dart-define-env-files/
tfstateの管理 バックエンド

## `tfstate`の管理上の注意

特段、設定をしない限り`terraform apply`をしたマシン上に`tfstate`ファイルが保存される。

変更差分を正しく反映させるには**最新の`tfstate`ファイルを常に共有する必要がある。**

:::note info
`tfstate`ファイルは常に最新のものを共有する
:::

## 用語

`tfstate`を管理するストレージを`Terraform`の`バックエンド`という。

## バックエンドの設定方法

バックエンドとして汎用的に使われる例として`AWS`の`S3`がある。

### 設定手順

1. バケットの作成
1. バケットのバージョニングを有効にする（推奨）
1. `Terraform`のモジュールに公式ドキュメントを参考に以下を追記

```hcl
terraform {
  backend "s3" {
    bucket = "mybucket"
    key    = "path/to/my/key"
    region = "us-east-1"
  }
}

```

https://developer.hashicorp.com/terraform/language/settings/backends/s3

## Future work

`S3`をバックエンドに設定して`tfstate`を最新に保っていたとしても、複数人が同時に`terraform apply`してしまうことによって変更差分が正しく反映されない場合に備えて`DynamoDB`などを使用して`ロック`をかけることができるらしい。

次回はこれを実際にやってみたいところ。
vimでtexの文章を編集するときvimtex使って、出力結果をskimで表示するまで

texの文章をtexで編集して、コンパイル作業をvimtexを使って\llで実行できる様にしている。

実際やってみると、なぜかpdfがアクロバットで表示されてしまう。
skimで開きたいのでどこで設定するか調べてみた。


vimtexはlatexmkというのを使ってコンパイルしてるみたいで、latexmkを使ってコンパイルしたとき、pdfを表示するアプリを指定するため.latexmkrcを編集してみた。


$pdf_previewer = "open -ga /Applications/Skim.app";

を追記してみた。


それで\llをしたり\lvをしてみたが、やはりまだアクロバットで開かれてしまう。

試しに、ターミナルからlatexmkで実行するとそのときはpdfはskimで開かれた。


なので、vimtexで表示するときのアプリは別のところで編集するのかと思い調べてみたらどうやら.vimrcのところに書き込むことが必要みたい。


let g:vimtex_view_method = 'skim'

を追記する必要があるらしい。


それを追記してみたら、うまく表示された。
Railsでフォームから送付された画像をpublicフォルダに保存する方法

# Railsでフォームから送付された画像をpublicフォルダに保存する方法

Railsを用いてWebアプリケーションを構築する際、フォームからアップロードされた画像をサーバー上に保存する必要があることがよくあります。本記事では、フォームから送付された画像をpublicフォルダに保存する方法について詳しく解説します。この方法は、特に画像の名前をユーザーのIDに基づいて管理したい場合に有用です。

## 画像ファイル名の保存と変更

### 画像ファイル名の設定

まず、ユーザーに関連付けられた画像ファイルの名前を設定します。これは、ユーザーのレコードが作成された後、そのIDを使用して行います。

#### イメージ名の生成

```ruby
@user.image_name = "#{@user.id}.jpg"
```

上記のコードでは、ユーザーのIDを取得し、それをファイル名の一部として使用しています。これにより、各ユーザーにユニークな画像ファイル名が割り当てられます。

## フォームからの画像データの受け取り

### 画像データの取得

フォームから送信された画像データは、コントローラ内でparamsを通じて取得します。

```ruby
image = params[:image]
```

このコードは、フォームから送信された画像データを`image`変数に格納しています。

## 画像の保存

### publicディレクトリへの画像保存

最後に、取得した画像データをサーバーの`public`フォルダ内の特定のディレクトリに保存します。

```ruby
File.binwrite("public/user_images/#{@user.image_name}", image.read)
```

このコードは、`public/user_images`ディレクトリに、先に設定した画像名でバイナリデータとして画像を保存します。

## フォームの構築

### 画像アップロード用のフォーム

画像をアップロードするためのフォームも適切に設定する必要があります。

```erb
<%= form_for @user, html: { multipart: true } do |f| %>
  <%= f.file_field :image %>
  <%= f.submit "Submit" %>
<% end %>
```

このフォームは、ユーザーが画像を選択し、サーバーに送信できるように設計されています。

## まとめ

Railsでフォームから送付された画像を`public`フォルダに保存する方法は、比較的簡単です。重要なのは、画像ファイル名をユーザーのIDなどのユニークな値に基づいて設定し、適切なディレクトリに保存することです。これにより、アプリケーション内での画像管理が効率的かつシステマティックに行えます。また、フォームの構築も、画像のアップロードをスムーズにするために重要な要素です。これらの基本的な手順をマスターすることで、Railsアプリケーションにおける画像のアップロード機能を容易に実装できるようになります。
生成AI標準搭載のコードエディタでAzureOpenAIのAPIキーを登録する方法

# はじめに
最近話題の生成AI標準搭載のコードエディタ"Cursor"に、AzureOpenAIServiceのAPIキーを登録する方法をまとめます。
Cursorは無料でも利用可能ですが、使用許容量に制限があり、フルで活用するには有料プランが必要になります。
ただ、ChatGPTやAzureOpenAIServiceのAPIキーの登録が可能で、そちらのサブスクリプションをしていれば、実質追加金なしで有償版とほぼ同じ機能が使えます。
料金プランなど、詳細は公式ページを参照ください。

公式ページ：https://cursor.sh

# Cursorとは
ここでは詳細は省略します。以下の記事などを参照してください。

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

https://weel.co.jp/media/cursor

# AzureOpenAIとは
ここでは詳細は省略します。以下の記事などを参照してください。

https://note.com/npaka/n/n46e6ad252ce1?rt=email&sub_rt=daily_report_followee_notes

# API登録方法
Cursorアプリはインストール済を前提にします。
このままでもBasicプラントして利用可能ですが、AzureOpenAIServiceのAPIキーを登録していきましょう。

## 1. AzureOpenAIServiceの必要情報入手
AzureOpenAIService内で利用するリソースの、以下の情報を控えておいてください。
チャットセッションの「コードの表示」の部分をクリックすると、いずれの情報も出てきます。
- Base URL
- Deployment Name
- API Key  

※ Base URLはエンドポイントのURLとは別なので注意してください。
※ Deployment Nameはリソース内でデプロイしたモデルの名前を入れてください。


## 2. CursorにAPIを登録
Cursorアプリの右上の歯車マーク（ギアマーク）をクリックします。
すると以下のような画面が出てきて、OpenAIのAPIキーが登録できる画面が出てきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355664/9db29011-8263-ec42-394f-205d2190da92.png" width="500">
下にスクロースすると、「Advance」というボタンが出てくるので展開します。
すると一番上にAzure APIを入力する部分が出てくるので、前の手順で控えた各情報を以下に入力していきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355664/91e2143c-e121-31b6-42a1-99c406fdfb8b.png" width="500">

## 3. APIキーを有効化する
入力が完了したら、右下のスイッチをONにします。
このとき、有効化されるのに少し時間がかかるので、辛抱強く待ちましょう。
スイッチが緑色になったら、有効化完了です。

このとき、もし`Invalid credentials. Please try again.`のようなメッセージが出たら、登録した情報になにか不具合があります。もう一度[1つ目](https://qiita.com/YujiMatsu/items/0034e31b7e8a335ff407#1-azureopenaiserviceの必要情報入手)の手順に戻り、情報の確認から始めてください。
以下は適当な文字列を入力したときの画面です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355664/3488d8cc-498b-8bfe-19fa-2ec170b528da.png" width="500">

# 注意点：APIキーが丸見え
上のエラー画面で見せているように、API keyが普通に見える状態になっています。
そのため、Advancedのボタンは、むやみに開かないようが無難だと思います。
普通ののWindows11（ノートPC）でllama.cppが動く

ごく普通のノートPCで、大規模言語モデルを動かしてみました（動かしてみた、だけです）。
# 使ったPCのスペック
- Windows11
- プロセッサ	11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz   2.42 GHz
- 実装 RAM	8.00 GB (7.71 GB 使用可能)
- システムの種類	64 ビット オペレーティング システム、x64 ベース プロセッサ
# llama.cpp
https://qiita.com/tags/llama.cpp
などをご参照ください。
インストール方法などは、
https://note.com/npaka/n/n0ad63134fbe2
などを参考にさせていただきました。
# 準備
- w64devkit の最新版（今回は1.20.0を使用）をダウンロードして適当なところに解凍（私はC:\Program Files\w64devkit に置きました）
- w64devkitと、直下の「bin」のパスをWindowsの環境変数のPATHに追加
- ./w64devkit\w64devkit.exe を実行
　　- w64devkitについては、[w64devkit - Portable C and C++ Development Kit for x64 Windows](https://end0tknr.hateblo.jp/entry/20230820/1692484336)を参考にしました。
- llma.cpp をダウンロード
```
　git clone https://github.com/ggerganov/llama.cpp
　cd llama.cpp
　make
```
- モデルをダウンロード
　- 今回は、[llama-2-7b-chat.Q4_K_M.gguf](https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/blob/main/llama-2-7b-chat.Q4_K_M.gguf) を使用
　- llama2 量子化モデルの違いは、[【ローカルLLM】llama.cppの量子化バリエーションを整理する](https://note.com/bakushu/n/n1badaf7a91a0)を参考にしました、
　- cf.[Llama.cppで扱えるモデル形式が GGMLからGGUFに変更になりモデル形式の変換が必要になった話](https://qiita.com/rairaii/items/1c5c322f66b1423a74a0)
　- llama.cpp\models\llama-2-7b-chat.Q4_K_M.gguf に置く

 # 実行
 ```
 ./main -m .\models\llama-2-7b-chat.Q4_K_M.gguf --temp 0.1 -p "### Instruction: What is the height of Mount Fuji?### Response:"
```
という風に富士山の高さを聞くと、
```
Log start
main: build = 1550 (8e672efe)
main: built with cc (GCC) 13.2.0 for x86_64-w64-mingw32
(中略)
### Instruction: What is the height of Mount Fuji?### Response: The height of Mount Fuji is 3,776 meters (12,421 feet) above sea level. It is located on Honshu Island in Japan and is considered one of the country's most iconic landmarks. [end of text]
（後略）
```
という風に、回答がちゃんと表示されました。
    日本語で質問もできますが、私のPowerShellの設定の問題か、日本語が文字化けして、回答が得られないので、
```
echo "### Instruction: 富士山は何県にありますか？### Response:" > prompt.txt
```
というファイルを作成し、
```
./main -m .\models\llama-2-7b-chat.Q4_K_M.gguf --temp 0.1 -f prompt.txt
```
とすると。以下の回答が得られました。
```
 ### Instruction: 富士山は何県にありますか？### Response: 富士山は静岡県にあります。

富士山は、日本の最高峰であり、標高3,776mの山です。その位置は、静岡県の富士五湖地方にあります。この地方は、富士山を中心として、周辺に数多くの湖沼が含まれています。
富士山は、日本の文化的・religiousな象徴であり、年間を通じて多くの観光客が訪れます。特に、新春や晩秋の照明の優美な景色は有名で
す。
富士山は、静岡県の自然的資源として重要な存在であり、日本国内外からの観光客が多く訪れます。 [end of text]
```
(山梨県の方には怒られそうな回答ですが...)

# rinna
[rinna-youri-7b-chat-q4_K_M.gguf](https://huggingface.co/mmnga/rinna-youri-7b-chat-gguf)
で、
```
./main -m .\models\rinna-youri-7b-chat-q4_K_M.gguf --temp 0.1 -f prompt.txt  
```
と試してみると、
```
 ### Instruction: 富士山は何県にありますか？### Response: 静岡 [end of text]
```
というそっけない回答。

# 今後
Llama.cppのPythonバインディングがあるようなので、それを試してみたい。
いずれにせよ、手元の ~~GPUもない(一応デフォルトのが入ってた)~~ 非力なPCで、大規模言語モデルで遊べるのは、楽しいですね。
SQLを書く中で自分が何度かしたミスをまとめる

# はじめに
SQLを勉強し始めて、現在は教材サイトの課題を進めている。
そのうえで何点か同じようなミスをしてしまったので再発防止のためにここに残す。

# SELECT文のカラム間「,」忘れ
エラーになるので注意
AS句とか絡んでくると切れ目がわかりにくくなったりするよね。
気を付けるしかないな、がんばれ。

# WHERE内にAVG,SUM,COUNTは使えないぞ
AVG,SUM,COUNTは文が全処理が完了したのちにようやく使える構文。
ただし、WHEREは1行1行の処理で経由する場所なので、その段階では全処理が完了していないため使用できない。

。。。？？？

もう少し噛み砕いていうと、グループ化された後でないと使えない
つまり、処理順としてGROUP BYのあとでしか使うことができない関数という理解をする。

```
FROM句
↓
JOIN句
↓
**WHERE句**
↓
**GROUP BY句**
↓
HAVING句
↓
SELECT句
↓
ORDER BY句
↓
LIMIT句
```

WHEREってORDER BYの前に読まれるところなのか！なのでNG！

AVG,SUM,COUNTを使いたければ、HAVINGを使うべし。

▼めっちゃわかりやすい参考サイト

https://qiita.com/k_0120/items/a27ea1fc3b9bddc77fa1

https://it-kyujin.jp/article/detail/787/

# スペルミス
まじで多い。構文見直して絶対あってるっていうときは大体これ
bookとbooksとかそういうのが多い。愛を持ってコーディングをしよう。
そうすればミスが減るはず。

# 定義書の読み込みが甘く内容が理解できていない
当たり前だけど、定義書を読まないとコードなんてかけるわけないでも
「たぶんこれでしょ」「いつものやつでしょ」みたいなコーディングをすると
見当違いのコマンドを書いていたりするので、ちゃんと定義書を読もう。
そしてテーブルの内容やER図もちゃんと見てイメージを構築してからコードを書くべし。

# 随時更新！
【Flutter】chatGPTに学習のためのスケジュールを考えてもらった

アドベントカレンダー25記事に挑戦したいので、chatGPTに相談してみた。
25日分聞けばいいのに間違えて30日分考えて、と伝えてしまったため30日分あります。
これから勉強予定のかた、参考にしてみてください。
私もこれを参考に勉強してみます
# chatGPTの回答
以下は、初心者が30日でFlutterをマスターするためのタスクの提案です。
- Day 1: Flutterの基礎を学ぶ
    - Flutterのインストールとセットアップ
    - Flutterの基本的な概念とアーキテクチャの理解
    - FlutterのHello Worldアプリを作成して実行する
- Day 2: Flutterウィジェットの学習
    - Flutterのウィジェットツリーの概念を理解する
    - レイアウトウィジェットの使用法を学ぶ
    - サンプルアプリを作成してレイアウトを設計する
- Day 3: Flutterパッケージの利用
    - Flutterパッケージの探索と選択の方法を学ぶ
    - 使用頻度の高いパッケージの導入と使用方法を学ぶ
    - サンプルアプリにパッケージを組み込む
- Day 4: ユーザーインターフェースのカスタマイズ
    - テーマのカスタマイズ方法を学ぶ
    - ウィジェットのスタイルとデザインのカスタマイズ方法を学ぶ
    - サンプルアプリでカスタマイズを試す
- Day 5: Flutterの状態管理
    - 状態管理の必要性とFlutterの提供する方法を学ぶ
    - 状態の共有と更新の方法を理解する
    - サンプルアプリに状態管理を実装する
- Day 6: リスト表示とルーティング
    - リスト表示を作成する方法を学ぶ
    - Flutterのルーティングシステムを理解する
    - サンプルアプリにリスト表示とルーティングを組み込む
- Day 7: フォームバリデーションとユーザー入力
    - フォームのバリデーションとサブミットの処理方法を学ぶ
    - ユーザーからの入力を正しく処理する方法を学ぶ
    - サンプルアプリにフォームとユーザー入力を組み込む
- Day 8: データの取得と表示
    - REST APIからデータを取得する方法を学ぶ
    - 取得したデータを表示する方法を学ぶ
    - サンプルアプリにデータ取得と表示を実装する
- Day 9: データの永続化
    - ローカルデータベースとの連携方法を学ぶ
    - データの永続化と復元を実装する
    - サンプルアプリにデータ永続化を追加する
- Day 10: Flutterアプリのテスト
    - ユニットテストとウィジェットテストの基本を学ぶ
    - シンプルなテストケースの作成と実行方法を学ぶ
    - サンプルアプリにテストケースを追加する
- Day 11-30: プロジェクト開発
    - 自分が興味を持つトピックやアイデアをもとに、実際のアプリを開発する
    - 適切なウィジェットやパッケージを選択し、実装する
    - 状態管理やユーザーインタラクション、データ永続化などを実装する
    - フィードバックを受けて修正や改善を行い、完成度
# 参考にしてみた
※ アドベントカレンダーで予約投稿にしている記事があります
- Day 1: Flutterの基礎を学ぶ
  - [Flutterのインストールとセットアップ](9acb9698756d587884b4)
    なんかわかんないけど苦戦した。何
- Day 2: [Flutterウィジェットの学習](16c3ad04e83e79a8a37b)
  - 余白についても勉強になった。おもしろ
- Day 3: [Flutterパッケージの利用](26fe17c1b0c10f7ef9e4)
- Day 4: [ユーザーインターフェースのカスタマイズ](312925d6f15dd6a38328)
- Day 5: [Flutterの状態管理](e644e7fbbd602d6fb833)
- Day 6: [リスト表示とルーティング](c7e8450b531efc888bed)
- Day 7: [フォームバリデーションとユーザー入力](7a462642ceb0a94c8a33)
- Day 8: [データの取得と表示](116cbbc89e0da47b0451)
- Day 9: [データの永続化](76d118691b6b5da7a601)
- Day 10: [Flutterアプリのテスト](fdd4e6ec9056af245cb0)
- Day 11-30: プロジェクト開発
複数のLLMモデルファイルを保存しておいて、いちいちHuggingFaceからDLしなくて済むようにする

## 環境
- Macbook Pro(M3チップ)
- Visual Studio Code
- pyenv
- poetry

## 概要
複数のLLMをいちいちHuggingfaceからDLしなくて済むように、`models`ディレクトリにモデルファイルとトークナイザのファイルを置きつつ、作業用の`work`ディレクトリからモデルファイルを呼び出せるようにしたい
```
├── models
│   ├── model1
│   │   ├── model
│   │   │   ├── config.json
│   │   │   ├── generation_config.json
│   │   │   └── model.safetensors
│   │   └── tokenizer
│   │       ├── special_tokens_map.json
│   │       ├── tokenizer.config.json
│   │       └── tokenizer.json
│   └── model2
│       ├── model
│       │   ├── config.json
│       │   ├── generation_config.json
│       │   └── model.safetensors
│       └── tokenizer
│           ├── special_tokens_map.json
│           ├── tokenizer.json
│           └── tokenizer_config.json
├── poetry.lock
├── pyproject.toml
└── work
    └── work.py
```

## 手順
ライブラリをインポート
```python
import torch
from transformers import AutoTokenizer, AutoModelForCausalLM
import transformers
```
huggingfaceからモデル、トークナイザをダウンロード（以下はTinyllamaの例）
```python
tokenizer = AutoTokenizer.from_pretrained("TinyLlama/TinyLlama-1.1B-step-50K-105b")
model = AutoModelForCausalLM.from_pretrained("TinyLlama/TinyLlama-1.1B-step-50K-105b")
```
HuggingFaceから読み込んだモデルファイル、トークナイザのファイルを保存
```python
dir_name = 'models'
model_name = 'tinyllama-1.1B'
tokenizer.save_pretrained(f'{dir_name}/{model_name}/tokenizer')
model.save_pretrained(f'{dir_name}/{model_name}/model')
```
呼び出す時は以下
```python
tokenizer = AutoTokenizer.from_pretrained(f'{dir_name}/{model_name}/tokenizer')
model = AutoModelForCausalLM.from_pretrained(f'{dir_name}/{model_name}/model')
```
ちなみに推論はメモリ不足で出来ず…Colabで動かしてみようかな？
AtCoder初心者 DailyTrainingメモ 2023/11/23

# ABC239 A-問題
https://atcoder.jp/contests/abc239/tasks/abc239_A

![239A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547298/edb15042-0c81-fa94-3d63-ef3381737a5f.png)

**ポイント**
Pythonで平方根を取り扱うときは、math　をインポートして　math.sqrt() を使う

````Python:239A.py
import math,sys,datetime,random,glob,os,re,bisect,itertools
import numpy as np

# 入力
H = int(input()) 

ans = (12800000+H) * H

print(math.sqrt(ans))
````

# ABC288 B-問題
https://atcoder.jp/contests/adt_easy_20231122_2/tasks/abc288_b

![288B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547298/3612aea5-47fd-cd0c-65aa-323f78bb22c6.png)

**ポイント**
・はじめからTOPのK番目だけをリストに格納してソートする
・改行しながら出力は、「 print("\n".join(S)) 」と書く（テンプレ）

````Python:288B.py
N,K = map(int,input().split())
S = [input() for _ in range(K)]

S.sort()

# リストを改行しながら出力する
print("\n".join(S))
# print(*S, sep="\n")
````
### 参考リンク
https://qiita.com/T_death/items/c415728b309173c2521f
ウェブ検索と季節商品の関連性を可視化し分析してみた。

# 最初に
　この記事は、Microsoft Power BI Advent Calendar 2023　12月2日の記事となります。

 https://qiita.com/advent-calendar/2023/powerbi
 

# 自己紹介
　佐賀県の小売業（和服）で情シスをしています。 
　  
　去年は佐賀県のＤＸフラグシップモデル、今年は日本ＤＸ大賞を受賞をすることができ、とても慌ただしい１年だったような気がします。 来年こそはゆっくりしたいと思っています。


 
 
 　

# 内容
 
 
 Googleのウェブ検索（Googleトレンド)と季節商品販売の関連性を、2019年のコロナ前から2023年のコロナ後の11月までの間で

季節商品の代表格である、浴衣と七五三を元に販売データとトレンド検索との関連性を調べてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/8d9747d9-44e5-e935-cdbe-a9011784a44d.png)



## データソース

### Googleトレンドからデータをダウンロード

Googleトレンドから、コロナ前の1999年1月から2023年11月までの浴衣、七五三それぞれのトレンド検索データをダウンロードします。

https://trends.google.co.jp/trends/




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/74158b58-d3ba-ae32-ac98-bfdf3486ef56.png)



Power Queryにて、日付、分類（浴衣、七五三）、人気度をファクトテーブルとする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/5d892e8e-b8a2-f4cb-84cf-15e941864aab.png)


### 販売データから対象データを抽出
　Power Queryにて、売上データから浴衣・七五三のデータのみをデータ抽出してSalesDataのファクトテーブルを作成する。
Power Query側で、SalesDataに浴衣・七五三以外のデータは入らないするのは重要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/a63d3852-150e-07a1-e20b-3b36d88c4786.png)


## データモデリングとメジャー作成
### データモデリング
ファクトテーブルが売上データ（SalesData）とGoogleのウェブ検索(Trenddata)、ディメンションテーブルが、カテゴリと日付テーブルを作成しリーレーションシップで結びつけスタースキーマにします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/b95d8510-3caa-b722-6089-1773921e04b3.png)


### メジャーの作成　最大の日付を
 
　販売実績は販売数量をベースにメジャーを作成

　販売数量が一番多い日付を算出するメジャーも作成とウェブ検索で人気度が一番高い日付を算出するメジャーを作成します。


```r:
最大販売数量日付 = 
MAXX(
    TOPN(
        1,
        VALUES('Calendertbl'[Date]),
        [販売数量]
        ,DESC
    )
    ,'Calendertbl'[Date]
)

```




## 可視化・分析をしてみる。



### 浴衣


2022年以外は、ウェブ検索の最大人気度の日付と販売数量一番多い日付とあまり差がさほどない。
2021～2022年はウェブ検索と販売実績共にコロナ渦の影響を受けている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/7e5a4295-107d-314f-6ae3-573d59e78ae9.png)




2023年は全国で夏祭りの開催や8月下旬も暑かったこともあり、2019年はウェブ検索での人気度のピークを過ぎると一気に下がっていたが、2023年はウェブ検索での人気度のピークが続いていた分、販売実績もよくなったと考えられる。ただその分来年が予測しづらい。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/0ba287a5-cdc1-fcc9-e2ea-d20d4271a339.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/9f096061-628e-c850-c20f-b39d6232f7ed.png)




### 　七五三

コロナ禍の影響を多少は受けてはいるが、浴衣ほどではない。
コロナ期間は１０月上旬～中旬にかけての販売実績が多いのは、密を避けるためにピーク前にお参りしているのが考えられる。ただ２０２３年は、分散はしているがピークである11月に戻りつつある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/bb070f0a-8ee9-7c78-b056-0e4a39294b7c.png)


ウェブ検索人気度と販売実績が比例しており、ウェブ検索の人気度も年々下がっているので、少子化の影響が多少あるかもしれない、ただ浴衣と違い来年も予測しやすい。

２０２１年のウェブ検索と販売実績が両方高い原因を調査する必要がある。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277732/ecad5c59-fcaf-e4b3-2e8d-06ef49a7bffe.png)





### まとめ

Googleトレンドデータと季節商品の販売実績との関連性について、Power BIにて可視化・分析してみました。
アフターコロナで浴衣は今後の需要やウェブ検索と販売実績の関連性も把握することが出来たが、グラフがまだ見にくいので改良する余地がたくさんある。

来年こそは業務部門自ら調査しレポート作成・分析出来るように社内人材を増やして行きたいと思う。
Vue3のプロパティ(props)のデフォルトはnull

## 遭遇した課題

下記のように親コンポーネントから子コンポーネントに変数nameを渡したときのことです。nameの値がundefinedで渡された時、子コンポーネント側でprops.nameの値を確認するとundefinedかつstringであることがわかりました。

```vue:親コンポーネント
<script setup lang="ts">

const name = ref<string>("")

onMounted(async () => {
  name.value = undefined
});

</script>

<template>
    <Child :name="name">
</template>
```

```vue:子コンポーネント
<script setup lang="ts">

const props = defineProps<{
  name?: string;
}>();

watch(()=>props.name, (newName)=>{
    const result = newName === undefined
    console.log("newName": newName) 　　　　　　　　　　　　　　　　　　　　　　 // undefined
    console.log("result": result) 　　　　　　　　　　　　　　　　　　　　　　　　　 // false
    console.log("result type": typeof result)  // string
})

</script>
```

コンソールにundefinedと表示されるのにString型....????


## undefinedがstring型になった理由


どうやらVue3 のプロパティ (props) において、props.name === undefined が false を返すのは、Vue3 がデフォルトでプロパティの undefined な値を null に変換するためだそうです。これはリアクティブプロパティの機能の一環らしいのです。

つまりprops.nameはnullに変換されたためprops.name !== undefined が falseになったみたい。

## 解決方法

個人的にnullを許容してしまうとundefinedとnullが混在して型の管理が面倒くさくなってしまうので、そもそもundefinedを子コンポーネントに渡さないようにする処理を入れることにしました。
fishを約1年使用してみて

# fishを使用した感想

基本的にはとても優秀なShellです。非の打ち所が無いと言っても過言ではないほど使い勝手が良いです。
ですが、最近ではZshに逆戻りしてしまっています。

# 良い点
* 設定なしで高機能シェルが使える

私はPC間の移動が多いため、fishをインストールしてchshすれば簡単に環境が元通りになる点がとても強力だと感じています。zshでは.zshrcなどにつらつら書いたり、プラグインをインストールしたり、PC間の移動は相当面倒です。

* 設定が簡単

```
fish_config
```
上記のコマンドだけで見た目など変えられるのは手軽で良かったです。

* 動作が非常に軽量

これはC++で書かれているだけあって高速過ぎると思います。Bashはあまり使わないのでほぼカスタマイズなしです。fishと似た使い勝手になるようにzshにはauto-suggestions, zsh-autocomplete, zsh-syntax-highlightingを入れています。
以前にoh-my-posh等入れていたときはさらに遅かったです。
-> bash

![bash.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/b6a5d910-55dd-435c-b932-b9857ad89ecd.gif)

-> zsh

![zsh.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/9184342f-2393-5c78-27db-3b920cc1a108.gif)

-> fish

![fish.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/f42f9a64-e752-9f1f-0c72-423896ad40e1.gif)

-> sh

![sh.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/240db465-ff80-7a53-fb68-f4ee8d9bd87e.gif)

# 良くなかった点

* 構文に慣れない

この一つに尽きると言っても過言ではないです。
bash, zsh, shはPOSIX準拠でほぼ同じ構文が使用できますが、fishは構文がそもそも違います。
そのため、`sudo !!`などが使いたくても使えないんです。

色々な記事を見て、fishの設定ファイルに記述したり、キーバインドで解決したり等ありますが、やはり使っている側は、基本的な文法が使えないのやはり使いにくいです。

また、fishを改良していくとそれこそPC間の移動が大変になるため、それならzshで良いのではという考えになりました。ZshはPOSIX準拠なので使い勝手は非常に良いです。(遅いですが...)

また、zsh-autocompleteが便利すぎるのもfishから離れてきている理由です。

* NVMが使えない

これはNVMがそもそもPOSIX準拠のシェルしか対応していなかったためだと思います。いつもシェルを切り替えてNVMしていました。

以上です。