OmniAICreator/Qiita-1.07M huggingface dataset:
atlas + sqlalchemy

## 準備

```bash
poetry add atlas-provider-sqlalchemy # or pip install atlas-provider-sqlalchemy
```

poetry でinstallした場合は

```
PATH=$(poetry env info --path)/bin:$PATH
```

で`atlas-provider-sqlalchemy` が使えるようにしておく


## sqlalchemy管理からatlasへ

1. `db/migrations` dirを作っておく

    ```
    mkdir -p db/migrations
    ```

1. 以下のコマンドで現状のsqlalchemyでの定義をSQLに落とせる

    ```
    poetry run atlas-provider-sqlalchemy --path ./db --dialect postgresql >> db/migrations/$(date -u '+%Y%m%d%H%M%S')_init.sql
    ```

    `db/migrations/20240907044849_init.sql`というファイルが作成される

1. applyで確認
    ```
    atlas migrate apply --env sqlalchemy
    ```

    2回目は実行しても変更なし

    ```
    atlas migrate apply --env sqlalchemy
    No migration files to execute
    ```
1. 

## Error `connected database is not clean`

```
Error: sql/migrate: taking database snapshot: sql/migrate: connected database is not clean: found table "xxx" in connected schema
```

## Ref

1. https://atlasgo.io/guides/orms/sqlalchemy
~/.ssh/configでgithub.comを特定のorg/user に対してだけ異なるssh keyを使う


```
# default
Host github.com
    HostName github.com
    User git
    IdentityFile /Users/xxx/.ssh/normal

# for specific org/user
Match host github.com exec "[[ $(git remote get-url origin | sed 's/^.*://' | sed 's/\/.*//') = <org/user>  ]]"
    IdentityFile /Users/xxx/.ssh/special
```

- https://gist.github.com/Daenyth/f7bd4d7c9325f046322ad99924fa7453
QuickSightの料金体系を把握しておらず想像以上に料金が発生してしまった話

# はじめに
　約1か月前に[YouTubeチャンネルを開設したのでAmazon QuickSightで可視化したい！](https://qiita.com/ganeharu/items/08dd0708fc1ed73543b4)を投稿しました。題名にもあるようにBIツールとして活用できるAmazon QuickSightを利用して、自分が開設したYouTubeのチャンネルを分析していました。しかし無料枠に甘えていたこと、QuickSightの料金体系を把握していなかったことが原因で想像以上に料金が発生してしまいました。2ヶ月で課金される約$13と同価値の学びに変えるべく、短いですが記事としました。

 # 自分の失敗
　3月頃、QuickSightの料金が発生していることに気が付き、Lambdaやデータセットを削除しました。当初は1ヶ月分の無料枠が切れたことによる料金だと考えていたのですが、4月になってもQuickSightの利用により引き続き料金が発生していることに気が付きました。調べたところ、QuickSightの料金体系がサブスクリプション形式であることを知りました。

 # QuickSightの料金体系について
　前述した通り、QuickSightはサブスクリプション形式で料金が発生します。[（詳細）](https://aws.amazon.com/jp/quicksight/pricing/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/88a86d26-b968-4ee4-9955-bcda686c1fc8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/a2b9fd70-3b2f-414c-998a-03977b333f62.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/11e3f9e7-3384-43ac-a546-d5af593662ca.png)
　QuickSightにはauthor権限とreader権限があります。名前の通り、ダッシュボードを作成できる権限と閲覧のみの権限で分かれています。今回は自身でダッシュボードを作成することで分析をしていたため、author権限に該当していました。QuickSight以外をほとんど利用していない自分の4月の予想月末コストは＄24近くあったことからもauthor権限で利用していたことが分かります。（正確にはEnterprise Editionにおけるauthor権限です）。

　つまり、QuickSight内にあるデータセットの数を0個にしてもサブスクリプションしている以上は料金が発生する仕組みでした。そのため、4月になっても料金が発生していたと考えられます。サブスクリプション削除の方法は[こちら](https://docs.aws.amazon.com/ja_jp/quicksight/latest/user/closing-account.html)から確認してください。

# ふとした疑問について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/a60678d4-51d1-4c1f-8495-64f3dd8a8327.png)

　サブスクリプション形式である為、無料枠が一切ない4月は＄24払う必要があると考えていました。実際に4月の上旬にQuickSightの料金が発生していることに気づいた際には月末の予測コストは約＄24でした。その後、QuickSightのサブスクリプションを解除したところ、それ以降料金が発生することなく、月末の予測コストは約＄6にまで減少しました。


　以上から、QuickSightの料金体系を月額料金と捉えることに疑問を持ちました。そこでChatGPTに聞いてみたところ以下のように返答が来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/de43968a-c47b-4720-9fb4-2c0c2f874593.png)

　サブスクリプション形式なのでサイトで記載されていた1ユーザーあたり/月 ＄24は月額料金だと考えていたのですが、実際には日割り計算されているようでした。もともとAWSには従量制料金という考え方があり、使った分だけ請求されるものなのでQuickSightでも同様だと納得することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/e000bfef-2c72-4d8a-9223-48075d9e6d5f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808088/5bd96e91-3b10-4e29-bc34-54241e0e2599.png)

　ChatGPTにも記載されているようにどれくらいの期間利用していたかはBilling and Cost Managementから確認することができました。上は3月の利用明細、下は4月の利用明細です。3月ではQuickSightを1ヶ月利用し、そのうち無料枠が約6割、有料枠が約4割利用していると使用量から確認することができます。4月では0.217 Userと使用量に記載されています。これは1ヶ月の約2割の期間利用したことを意味し、実際に自分がQuickSightのサブスクリプションを削除したのが4/7なので、使用量と一致していました。コンソール画面からもQuickSightは月額ではなく日割り計算されていることが確認できました。

# 最後に
　今回想像以上に料金が発生してしまった失敗を活かして、今後は各サービスの料金体系をしっかりと把握しようと考えました。幸いにもAWSの資格試験ではコスト最適化に関する問題も多く出る為、学んでも無駄にはならないと感じています。BIツールであるQuickSightを利用するユーザーは多いと思うので、自分と同じような失敗をしないようこの記事をみて気づいてくれたら嬉しいです。

 　記事が良かった・参考になったと思ったらいいね！を付けてくれると嬉しいです！
「初心者向け」Windows 10でNode.jsをインストールして、NVMでバージョンを管理する方法


こんにちは！今回は、Windows 10環境でNode.jsをインストールし、「NVM for Windows」を使って複数のバージョンを簡単に管理する方法を紹介します。初心者の方でも理解できるよう、一つひとつの手順を丁寧に解説しています。

## Node.js、npm、NVMとは？

- **Node.js**は、JavaScriptをブラウザ以外でも（例えばサーバー上など）実行できるようにするための実行環境です。会社のプロジェクトで使われることが多くあります。
- **npm（Node Package Manager）**は、Node.jsで利用するライブラリやモジュールを管理するためのツールです。プロジェクトに必要なパッケージを簡単にインストールできます。
- **NVM（Node Version Manager）**は、複数のNode.jsのバージョンをインストールし、簡単に切り替えるためのツールです。

## 手順①：NVM for Windowsをインストール

まずは[NVM for Windowsの公式リリースページ](https://github.com/coreybutler/nvm-windows/releases)から最新版（nvm-setup.zip）をダウンロードしましょう。

ダウンロードしたzipファイルを解凍し、中にある`nvm-setup.exe`を実行します。画面に従って進めばインストールが完了します（基本的にはデフォルト設定のままでOKです）。

## 手順②：NVMのインストール確認

NVMが正しくインストールできているか確認します。

スタートメニューから「コマンドプロンプト」または「PowerShell」を管理者として開き、以下のコマンドを入力します。

```bash
nvm list
```

まだ何もNode.jsをインストールしていないので、「インストールされたバージョンがありません」と表示されればOKです。

## 手順③：Node.jsをインストールする

プロジェクトで指定されているバージョンがあれば、そのバージョンをインストールします。例えば、バージョン16.14.0を指定された場合は次のように入力します。

```bash
nvm install 16.14.0
```

特定のバージョン指定がなければ、最新の安定版（LTS）をインストールするのがおすすめです。

```bash
nvm install lts
```

## 手順④：Node.jsのバージョンを切り替える

Node.jsをインストールしたら、そのバージョンを使用するよう設定します。

```bash
nvm use lts
```

「Now using node vx.xx.x」と表示されれば成功です。

## 手順⑤：Node.jsとnpmが使えるか確認

インストールしたNode.jsがちゃんと動くかを確認します。

```bash
node -v
```

このコマンドで現在使っているNode.jsのバージョンが表示されれば成功です。

次にnpmも確認します。

```bash
npm -v
```

こちらもバージョン番号が表示されれば、npmも使える状態になっています。

## npmが「ファイルが見つかりません」とエラーが出る場合の対処方法

npmが正しく動作しない場合は、次の手順を試してみてください。

1. **Node.jsを再インストールする**

一度現在のバージョンをアンインストールします。

```bash
nvm uninstall lts
```

再度インストールします。

```bash
nvm install lts
```

再度、バージョンを切り替えます。

```bash
nvm use lts
```

3. **npmが利用可能か再確認**

```bash
npm -v
```

再びバージョン番号が表示されれば成功です。

## NVMとNode.jsのよく使うコマンドまとめ

- `nvm list`：インストール済みのNode.jsのバージョンを表示
- `nvm install <バージョン番号>`：特定のバージョンをインストール
- `nvm use <バージョン番号>`：指定のバージョンを使用する
- `node -v`：現在のNode.jsバージョンを表示
- `npm -v`：現在のnpmバージョンを表示

## どんな時にバージョンを切り替える？

会社のプロジェクトによっては特定のNode.jsバージョンが指定されることがあります。異なるバージョンを使い分ける時、NVMを使えば簡単に切り替えられるため、開発環境を安全に管理できます。

以上でWindows 10へのNode.jsインストールとNVMの使い方は完了です。ぜひ参考にしてみてくださいね！
OACのワークブックのURLを共有する

# はじめに
OAC（**Oracle Analytics Cloud**）で作成したワークブックを共有する一番簡単な方法は、共有フォルダに保存することです。
その共有フォルダとワークブックにアクセス権があれば、他の人が作成したワークブックであっても開くことができます。（権限によっては編集することも可能です）
そのワークブックをカタログから探し当てて開く以外に、個別のURLで直接開くこともできます。

# URLでワークブックを共有
URL共有のやり方は、極めて簡単です。

1. 一度ワークブックに名前を付けて保存します
1. 保存先のフォルダやワークブックに共有したい相手が読み取れるように適切な権限設定をします
1. ワークブックをもう一度開いてURLをコピーします
1. そのURLを何らかの手段で相手に伝えます

ワークブックを開いてURLをコピーするところから紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/51b3760b-d9fb-4fd1-82fb-c23bcb772b87.png)

エクスポートアイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/96d3dc05-b60f-4fc4-9c78-b92e96449897.png)

適用状態を「元の状態」「現在の状態」のいずれかから選択し、「リンクのコピー」をクリックします。
クリップボードにURLがコピーされるので、これをチャットやメールで相手に伝えます。

当然のことながら、受け取った相手がワークブックを開くには認証を求められます。

元の状態とは、ワークブックを保存したオリジナルのフィルターの状態です。
現在の状態とは、ダッシュボードフィルターを変更後の現在のフィルターの状態です。

# ドキュメント

https://docs.oracle.com/pls/topic/lookup?ctx=en/cloud/paas/analytics-cloud/acswn&id=ACUBI-GUID-9164B186-617B-4F46-8EF6-D5E3716EFFFD
Ansible の使い方

Ubuntu 24.10 で確認した方法です。

## インストール

```bash
sudo apt install ansible
```

確認

```text
$ ansible --version
ansible [core 2.16.3]
```

```text
$ ansible-community --version
Ansible community version 9.2.0
```

## MariaDB のインストール

```text:host.ini
# hosts.ini
[local]
localhost ansible_connection=local
```

```yml:install_mariadb.yml
# install_mariadb.yml
---
- name: Install MariaDB on Ubuntu
  hosts: localhost
  become: true

  tasks:
    - name: Update apt cache
      apt:
        update_cache: yes

    - name: Install MariaDB server
      apt:
        name: mariadb-server
        state: present

    - name: Install pymysql (required for mysql_user module)
      apt:
        name: python3-pymysql
        state: present

    - name: Ensure MariaDB is started and enabled
      service:
        name: mariadb
        state: started
        enabled: yes

    - name: Set root password (optional)
      mysql_user:
        name: root
        host_all: true
        password: tiger123
        login_unix_socket: /var/run/mysqld/mysqld.sock
```

実行

```bash
ansible-playbook -i hosts.ini install_mariadb.yml
```

インストールされたことの確認

```bash
sudo systemctl status mariadb
```

MariaDB の動作確認

```text
$ mysql -uroot -ptiger123
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 10
Server version: 10.11.11-MariaDB-0ubuntu0.24.04.2 Ubuntu 24.04

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]> exit
Bye
$
```

## MariaDB の削除

```text:host.ini
# hosts.ini
[local]
localhost ansible_connection=local
```

```yml:remove_mariadb.yml
- name: Remove MariaDB from Ubuntu
  hosts: localhost
  become: true

  tasks:
    - name: Purge multiple packages
      apt:
        name:
          - mariadb-server
          - mariadb-client
          - python3-pymysql
        state: absent
        purge: yes

    - name: Remove MariaDB data directory
      file:
        path: /var/lib/mysql
        state: absent
```

実行

```bash
ansible-playbook -i hosts.ini remove_mariadb.yml
```

## MariaDB の停止

```yml:stop_mariadb.yml
- name: Stop MariaDB on Ubuntu
  hosts: localhost
  become: true

  tasks:
    - name: stop mariadb
      service:
        name: mariadb
        state: stopped
```

実行

```bash
ansible-playbook -i hosts.ini stop_mariadb.yml
```

確認

```bash
sudo systemctl status mariadb
```

## MariaDB の起動

```yml:start_mariadb.yml
- name: Start MariaDB on Ubuntu
  hosts: localhost
  become: true

  tasks:
    - name: Start mariadb, if not started
      service:
        name: mariadb
        state: started
```

実行

```bash
ansible-playbook -i hosts.ini start_mariadb.yml
```

確認

```bash
sudo systemctl status mariadb
```
Knative Function + Gmail通知を使ったイベント駆動メール送信システム構築手順

# Knative Function + Gmail通知を使ったイベント駆動メール送信システム構築手順

この記事では、Knative Functionを使って、外部からのHTTPアクセスに応じて自動的にPodが起動し、Gmail経由でメール通知を送信する構成を紹介します。

## 🔰 Knative Functionとは？

Knative Functionは、Knative Servingの上に構築された軽量な関数実行フレームワークです。

func CLI を使って簡単に関数を初期化、ビルド、デプロイできる

コンテナ化やKubernetesの知識がなくても関数をKubernetesクラスタ上で動作可能

イベントドリブン or HTTPアクセスで自動スケールしながら実行できる

今回の構成では「HTTPアクセス時にPodが自動起動してメール通知を送る」動作を実現します。

## 🎯 目的構成

外部アクセス（curlなど）
   ↓
Knative Function（Go関数）
   ↓
📧 Gmail経由で通知メール送信

## ✅ 使用環境構成

OS: Ubuntu 22.04

環境: AWS VM / オンプレミス

Kubernetes クラスタに Knative Serving が導入済

Docker Hub にアカウントがあり、docker.io/<yourname> にPushできる

Gmailのアカウントを保有している

### ステップ1: Gmail アプリパスワードの発行

アプリパスワード発行ページ にアクセス

二段階認証を有効にする

「メール」 + 任意のデバイス名を選んで発行

16桁のアプリパスワードをメモ（後で使います）

### ステップ2: 関数(handle.go)にメール送信処理を記述

```
package function

import (
	"fmt"
	"io"
	"net/http"
	"net/smtp"
	"os"
)

func Handle(w http.ResponseWriter, r *http.Request) {
	body, _ := io.ReadAll(r.Body)
	fmt.Println("📨 イベント受信:", string(body))

	from := os.Getenv("MAIL_FROM")
	pass := os.Getenv("MAIL_PASS")
	to := os.Getenv("MAIL_TO")

	msg := "From: " + from + "\n" +
		"To: " + to + "\n" +
		"Subject: 📨 Knative Functionから通知\n\n" +
		"イベントが届きました: " + string(body)

	err := smtp.SendMail("smtp.gmail.com:587",
		smtp.PlainAuth("", from, pass, "smtp.gmail.com"),
		from, []string{to}, []byte(msg))

	if err != nil {
		fmt.Println("メール送信失敗:", err)
	} else {
		fmt.Println("✅ メール送信成功")
	}

	fmt.Fprintln(w, "📧 メール送信処理完了")
}
```

### ステップ3: Gmail認証情報をSecret化（.env.yaml）
```
apiVersion: v1
kind: Secret
metadata:
  name: mail-secret
  namespace: skupper
stringData:
  MAIL_FROM: "your@gmail.com"
  MAIL_PASS: "your_app_password"
  MAIL_TO: "recipient@example.com"
```
```
kubectl apply -f .env.yaml
```
### ステップ4: func.yaml に環境変数をマウント
エディタ等でfunc.yamlを編集します。編集後は適用されるのでapplyの必要はありません。
```
envVars:
- name: MAIL_FROM
  valueFrom:
    secretKeyRef:
      name: mail-secret
      key: MAIL_FROM
- name: MAIL_PASS
  valueFrom:
    secretKeyRef:
      name: mail-secret
      key: MAIL_PASS
- name: MAIL_TO
  valueFrom:
    secretKeyRef:
      name: mail-secret
      key: MAIL_TO
```

### ステップ5: 関数をビルド・デプロイ
```
func deploy --registry docker.io/あなたのユーザ名
```
デプロイ成功後、関数は以下のようなURLで公開されます：
```
http://myfunc.<namespace>.<your-domain>.sslip.io
```
### ステップ6: curl でアクセス & メール通知を確認

関数にアクセスするだけで、メール送信が実行されます：
もし、クラスタ外からのアクセスをしているなら、NodePort番号を指定する必要があります。

```
curl http://myfunc.skupper.1.2.3.4.sslip.io -d:port番号(必要があれば）
```
関数ログを確認：
```
kubectl logs -l serving.knative.dev/service=myfunc -n user-namespace -c user-container -f

📨 イベント受信: {"message":"手動メール送信"}
✅ メール送信成功
```


# 🎉 おわりに

Knative Function は、Kubernetesクラスタ上でHTTPアクセスをトリガーにPodを自動起動して関数実行できる強力な仕組みです。
今回の例では「メール通知」でしたが、knative eventingと組み合わせたりすることで

**Slack通知**

**LINE通知**

**GitHub Webhook連携**

**外部API連携**

などにも応用できます。軽量な自動通知システムを構築したい方にはぜひおすすめの技術です！
JAVA_HOMEが変更されない時

AndroidやサーバーサイドでJavaの設定を可変にしたい時があると思います。
JAVA_HOMEが変わらなくて色々別の場所を疑ってしまったので備忘録として記載します。

## 起こったこと
JAVA_HOMEがJDK21のまま固定される。

## 原因

```batch
$ /usr/libexec/java_home -V
Matching Java Virtual Machines (2):
    21.0.6 (arm64) "Oracle Corporation" - "Java SE 21.0.6" /Library/Java/JavaVirtualMachines/jdk-21.0.6.jdk/Contents/Home
    17.0.11 (arm64) "Amazon.com Inc." - "Amazon Corretto 17" /Library/Java/JavaVirtualMachines/amazon-corretto-17.jdk/Contents/Home

$ vi ~/.zshrc
export JAVA_HOME=`/usr/libexec/java_home -v "Java SE 21.0.6"`
rem これだと、JDK21のPathを返してしまう
export JAVA_HOME=`/usr/libexec/java_home -v "Amazon Corretto 17"`
rem これだと、JDK17のパスを返す
export JAVA_HOME=`/usr/libexec/java_home -v "17.0.11"`
$ source ~/.zshrc

$ /usr/libexec/java_home -v "17.0.11"
/Library/Java/JavaVirtualMachines/amazon-corretto-17.jdk/Contents/Home

rem Java17を使用中の段階は正しいものと勘違いしてしまう
$ /usr/libexec/java_home -v "Amazon Corretto 17"
/Library/Java/JavaVirtualMachines/jdk-21.0.6.jdk/Contents/Home
```

## 疑ってしまった範囲
1. InteliJが上流のJAVA_HOMEを作ったのか?
2. Oracleがインストーラー経由で新しいJAVA_HOMEを作ったのか?
(初めてインストーラー経由でJavaをインストールしたため、
Oracleが消せない呪いをMacに残したのかと思って狂気でした)

## 結論
Amazonが独自のJDKを作ってその対応が不完全だった。
CodeCommmitも新規サービス消えたけど、Amazon嫌いです。
Agentforce を Slack と統合し、エージェントの展開の準備をします。




https://trailhead.salesforce.com/content/learn/projects/connect-your-agentforce-org-with-slack/complete-the-connection-in-slack


# Trailhead に基づくカスタム メタデータでエージェント設定が表示されません


+ [メタデータでエージェント設定が表示されません](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000MahVq)
ハッカソン個人備忘録㉚：FastAPIでのマイグレーションをMakefileに登録してみた記録

## はじめに
FastAPI + SQLAlchemy 構成で Alembic を使用している場合、MySQL に対するマイグレーション処理を `Makefile` に追加しておくと便利です。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

ここでは `docker compose` を利用した開発環境において、簡単にマイグレーション操作ができるようにするためのコマンドを紹介します。

## 書こうと思ったきっかけ
FastAPI と SQLAlchemy を使った開発において、毎回手動で Alembic コマンドを実行するのが手間だと感じたため、`Makefile` に定義して効率的に操作できるようにしようと考えました。

## Makefile に Alembic マイグレーション処理を追加する方法

### 追加する Makefile のコマンド
以下の2つのターゲットを `Makefile` に追記してください。

```makefile
migrate:
	docker exec -it fastapi-app alembic upgrade head

makemigration:
	docker exec -it fastapi-app alembic revision --autogenerate -m "New migration"
```

### コマンドの説明
| コマンド名       | 内容                                                                 |
|------------------|----------------------------------------------------------------------|
| `make migrate`        | Alembic によるマイグレーションを実行します（最新の状態へ）                      |
| `make makemigration`  | 現在のモデルの状態を元に新しいマイグレーションファイルを自動生成します            |

### 使用例
```bash
# モデルを変更したらマイグレーションファイルを作成
make makemigration

# DBにマイグレーションを適用
make migrate
```

### 補足
- `fastapi-app` は Alembic がインストールされているコンテナ名です。プロジェクトによって異なる場合は適宜変更してください。
- `alembic.ini` と `migrations` ディレクトリが適切に設定されている必要があります。

## まとめ
Alembic のマイグレーション操作を `Makefile` に登録することで、開発時のコマンド実行が簡潔になり、作業ミスの防止や効率化に繋がります。

***特にチーム開発では、共通の操作方法を提供することで、作業の統一性も保つことができます！***
gitのイニシャルコミット備忘録

# タイトル
laravelアプリをデプロイするためにgitに上げたくて、gitの初期ブランチを作成したい

## 概要
githubのアカウント、リモートリポジトリはある前提で
gitの初期化からコミット、プッシュまでを行います

## 目次
- [Gitの初期化](#Gitの初期化)
- [GitHubリポジトリをリモートに設定](#GitHubリポジトリをリモートに設定)
- [変更をステージしてコミット](#変更をステージしてコミット)

## はじめに
この記事を書く背景や目的について説明します。
業務では、初めからブランチやリポジトリに対してのプッシュが多く、
作成したばかりのリポジトリに対するアクションがあまり見えてなかったので
今後の自己開発に向けて試してみて備忘録を残したい

## (環境) or (前提条件)
使用したソフトウェアやハードウェアの環境について記載します。

- githubのアカウントがあること
- ローカルリポジトリは作成済みであること

## 手順
具体的な手順をステップバイステップで説明します。

### ステップ1: Gitの初期化
プロジェクト直下でgitを初期化
git init は 「ここからこのフォルダをGitで管理しますよ！」 って宣言するコマンドです。
```bash
cd /path/to/your/laravel-project
git init
```
↓git 情報管理フォルダができる
Initialized empty Git repository in C:/project/11dev/.git/


### ステップ2: GitHubリポジトリをリモートに設定
```bash
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
```
※一応クローンのURLをコピーすればhttps://...リポジトリ名.gitの形式になっている
成功したか確認するコマンド
```bash
git remote -v
```
出力結果
```bash
origin  https://github.com/ユーザー名/リポジトリ名.git (fetch)
origin  https://github.com/ユーザー名/リポジトリ名.git (push)
```


### ステップ3: 変更をステージしてコミット
```bash
git add .
git commit -m "initial commit"
```

※git add .した際に警告がでます。
```bash
 CRLF will be replaced by LF the next time Git touches it
 ```
 Gitは「改行コード（CRLF）をLFに変えるよ～」ってお知らせしてるだけ。
 Windowsでは改行が「CRLF（\r\n）」
Linux / macOSでは「LF（\n）」
Gitは基本LFで管理したい派

※ステージングの認識
コミットに含めたいものを上げる作業
GUIを用いる場合は、チェックボックスでファイルを選択する箇所が該当すると思う。

### ステップ4:GitHubにpush
```bash
git branch -M main
git push -u origin main
 ```

✅ git branch -M main
💡 意味：
現在のブランチ名を "main" に変更する というコマンド。

🔍 オプション解説：
-M は --move --force の略。つまり、

既存のブランチ名がすでに "main" でも強制的に上書きして変更する

-m だと既に "main" が存在していたらエラーになるけど、-M は問答無用で置き換える

📝 よくある使い方：
最近は master より main を標準にしてることが多いので、最初に作られたブランチ（たとえば master）を main にリネームする時に使う。


✅ git push -u origin main
💡 意味：
ローカルの "main" ブランチを、GitHub の "origin"（リモート）に push（アップロード）する
しかも、今後このリモートをデフォルトにする設定も同時にやってくれる！

🔍 オプション解説：
origin：GitHubに作ったリモートリポジトリの名前（普通は最初 "origin" になる）

main：リモートに送るブランチ名

-u（または --set-upstream）：

「このローカルの main ブランチと GitHub の main ブランチをひもづけておくよ」

これを付けておくと、次回から git push や git pull だけで自動で「main に push/pull」してくれる

※もしrejectされた場合はGitHubのリポジトリ側にすでに何かコミットが存在していて、それとあなたのローカルが同期していない可能性あり
そのため、一度プルする
```bash
git pull --rebase origin main
 ```

 ※プルでコンフリクトした場合、おそらくREADME.mdが競合してるので、vsCode等でマージする
 コンフリクト解消後、Gitに「解決したよ！」と伝える
 ```bash
 git add README.md
  ```
リベースの続きを続行
 ```bash
git rebase --continue
  ```
ハッカソン個人備忘録㉙：Gitでよくある操作「pull後のブランチ切り替え」を整理してみた

## はじめに

Gitで作業を進めていると、pullした内容を確認したり、別のブランチに移動して作業を続けたくなることがあります。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

この記事では、pull後にブランチを切り替える基本的な手順についてまとめます。

## 書こうと思ったきっかけ

実際のチーム開発でGitを使っている際に、pull後に他のブランチへ移動したくなった時、正しい方法をすぐに思い出せなかった経験がありました。その備忘録として、よく使う切り替えコマンドを整理しました。

## Gitでpullした後にブランチを切り替える方法

### すでにローカルに存在するブランチに切り替える場合

```bash
git checkout ブランチ名
```

例：
```bash
git checkout feature/login-page
```

### ローカルに存在しない（リモートにだけ存在する）ブランチに切り替える場合

```bash
git checkout -b ブランチ名 origin/ブランチ名
```

例：
```bash
git checkout -b feature/login-page origin/feature/login-page
```

## ブランチの確認方法

- ローカルブランチ一覧の確認：
```bash
git branch
```

- リモートブランチ一覧の確認：
```bash
git branch -r
```

## 補足：`git switch` コマンドについて

Gitのバージョンが2.23以降であれば、`git checkout`の代わりに `git switch` を使うこともできます。

```bash
git switch ブランチ名
```

もしくは、新しいブランチを作って切り替える場合：
```bash
git switch -c 新しいブランチ名
```

**参考文献**

https://envader.plus/article/300

https://zenn.dev/gmomedia/articles/d9366fa84aadfd

## まとめ

pull後にブランチを切り替えるには、`git checkout` あるいは `git switch` を使い分けることでスムーズに作業を進めることができます。ブランチの状態や存在場所（ローカル or リモート）によって、適切なコマンドを選びましょう！
遠隔サーバーに接続してコードを実行している場合、ログインしてもコードを実行し続ける方法

※色々実験した内容をgptでまとめているので、不足内容があるかもしれないです

### 参考
- [早く帰りたいのにリモートでコマンドを実行してしまった時に、バックグラウンド実行に変える方法](https://qiita.com/koudaiii/items/26d7bef49706556e4188)
- [既に実行中のジョブを走らせたまま端末を閉じる際の手順メモ](https://yuki-koyama.hatenablog.com/entry/2019/08/01/222418)
- [ログアウトしてもバックグラウンド ジョブを継続する方法](https://www.codereading.com/nb/ignore-the-hangup-signal.html)


# 1.これからコマンドを実行する

### **方法1.1：`nohup` コマンドを使う（Linuxサーバーの場合）**
これでセッションが切れても処理は続く。

```bash
nohup python your_script.py > output.log 2>&1 &
```

- `your_script.py` を自分のスクリプトに置き換える
- 実行後にターミナルを閉じてもスクリプトは動き続ける
- `output.log` に出力されるので、後で確認可能

```bash
tail -f path/to/output.log
```
を行うと、実行時の出力を確認できる。ctrl+cで抜ける。


### **方法1.2：`tmux` や `screen` を使う（ターミナル多重化）**
仮想的なターミナルセッションを使って、外出先からも再接続可能。

#### `tmux` の基本的な使い方：

```bash
tmux           # 新しいセッションを開始
python your_script.py   # コードを実行
Ctrl + b → d   # セッションをデタッチして戻る
```

- 外出先でも `tmux attach` で戻れる



### **方法1.3：Jupyter Notebook + `nohup` または `tmux`**
Jupyterで実行している場合も、サーバー側で `tmux` を併用するのがおすすめ




# 2.すでに通常のコマンドを実行している場合

### **方法2.1：`tmux` や `screen` を使っていない場合**
すでにターミナル上でコードを実行していて、`tmux` や `nohup` などを使っていないなら：

#### ● 今すぐできること（Linux/Mac ターミナルの場合）：
**プロセスをバックグラウンドに移す**→ **セッション切断後も動作させる**

1. 実行中のコードに対して `Ctrl + Z` を押して一時停止（中断）
2. 以下のコマンドでバックグラウンドに送る：

```bash
bg
```

3. さらに `disown` を使ってシェルとの関連を切る：

```bash
disown -h %1
```

これでセッションが切れてもコードは動き続ける。

> ※ `%1` はジョブ番号（通常は1、`jobs` で確認可能）

```bash
ps x | grep sleep | grep -v grep
```
```bash
ps aux | grep python
```

などでプロセスが動き続けているのかを確認できる。



### **方法2.2：VPNが切れる前にtmuxへ「移植」する（少し難易度高）**
一度起動したプロセスを `tmux` に「移す」ことは原則できないが、方法はある：

- `reptyr` というLinuxツールを使って、プロセスを別のセッションに引き継ぐ
    - 例：`reptyr [PID]`
    - ただし、インストールが必要でサーバーによっては使えない


# 【まとめ】
| 方法                     | セッション切断後も実行されるか | 難易度 |
|--------------------------|------------------------------|--------|
| `nohup` + `&`            | ◎                            | 低     |
| `tmux` や `screen`       | ◎                            | 中     |
| `Ctrl + Z` → `bg` → `disown` | ○                            | 中     |
| `reptyr` を使って移行    | ◎（ただし環境依存）            | 高     |


**今実行しているコードを止めずに出かけたい場合は、`Ctrl + Z` → `bg` → `disown` の手順が最速で現実的**
LT会に初めて参加してみて感じたこと

# はじめに
今回は初めて社内のLT会に参加したので感じたことをまとめてみます。エンジニアとして技術的な学びだけでなく、人前で話すという経験からも多くのことを学ぶことができました。

# 参加しようと思った理由
今回LT会に参加しようと思った理由は主に2つあります。

+ ***成功体験の共有***
+ ***自身の考えの言語化***

## 成功体験の共有
私が今回LT会で話した内容は「***勉強を習慣化させるために行なったこと***」というテーマでした。多くの人は何かを習慣化することはとても難しいと感じているのではないでしょうか？私も社会人になってからなかなか自己学習をすることができませんでした。

しかし、私が実践して効果があった方法を共有することで、同じような悩みを抱えている方の役に立てるのではないかと考えました。<font color="red">**一人でも「これなら自分もできそう」と思ってもらえれば嬉しいです。**</font>

https://qiita.com/masafumi1073/items/d4d91f020be7d167deac

## 自身の考えの言語化
自分自身の考えを言語化するという行為は、思考を整理する上で非常に貴重な機会だと思います。私は定期的にQiitaに記事を投稿することで、文字媒体では自身の考えを言語化する習慣がありました。

しかし、それを「言葉」にして他者に直接伝えるということは、記事を書くのとは全く異なる難しさがありました。言葉で伝える場合は、話すトーンや表情、間の取り方など、文字では表現しきれない要素も含めて伝える必要があります。そういった<font color="red">**総合的なコミュニケーションスキルを磨く機会**</font>として、LT会は非常に価値があると感じました。

# 参加してみて感じたこと
## よかったこと
私の考えを実際に他の人に直接伝えることができたのは大きな収穫でした。今回のLT会はエンジニアだけではなく、デザイナーなど他職種の方も参加する場でした。「勉強の習慣化」というテーマは職種に関係なく共通の課題です。このような普遍的なテーマを選んだことで、より多くの人に自分の考えを共有することができたと思います。

また、発表後の質問タイムでは「具体的にどのような勉強をしているのか」「モチベーションが下がったときはどう対処しているのか」など、記事では触れていなかった部分についても質問をいただき、さらに考えを深める機会となりました。

## 反省点
一方で、私の場合は「発表」という側面が強くなってしまい、事前に準備した原稿を読むだけになってしまった点は反省しています。せっかく対面で話す機会をいただけたのに、これでは記事を書いているのとあまり変わりません。

今後は以下の点を改善していきたいと考えています：
+ ***スライドに頼りすぎず、聴衆の反応を見ながら柔軟に話を展開する***
+ ***一方的な発表ではなく、インタラクティブな要素を取り入れる***
+ ***緊張しすぎず、自然な表情や話し方を心がける***

## これからの挑戦
今回の経験を踏まえ、次のステップとして外部のLT会やカンファレンスにも参加してみたいと思います。社内という比較的安全な環境から一歩踏み出し、より多くの人に自分の考えを伝える機会を作っていきたいです。

また、今回のテーマである「習慣化」を活かして、定期的にLT会に参加することも自身の成長のための習慣にしていきたいと考えています。

# 終わりに
今回は初めてLT会に参加してみた感想を記事にしてみました。人前で話すことの難しさと楽しさを同時に体験し、新たな自己表現の場を見つけることができました。これからも継続的に挑戦し、アウトプットの質を高めていきたいと思います。
ハッカソン個人備忘録㉘：開発スピード激上がり！？Next.jsとTailwind CSSで作るシンプルSPAについて

## はじめに
Next.jsとTailwind CSSを組み合わせてSPA（シングルページアプリケーション）を構成する方法について、簡単に紹介します。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

ReactベースのNext.jsと、ユーティリティファーストなTailwind CSSの組み合わせは、モダンなフロントエンド開発において非常に人気があります。

---

## Next.jsとは？
- Reactのフレームワーク
- サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）が得意
- ただし、SPAとして使うことも可能（`pages/_app.js`で状態管理などを統一）

**参考文献**

https://nextjs.org/

https://qiita.com/tomy0610/items/f07d586c08a0a2aadb01

https://zenn.dev/cloud_ace/articles/nextjs-basics-for-non-frontend-devs

---

## Tailwind CSSとは？
- クラス名でスタイリングを行うユーティリティファーストなCSSフレームワーク
- 例：`<div className="text-center p-4 bg-blue-500 text-white">Hello</div>` のように使う

**参考文献**

https://tailwindcss.com/

https://qiita.com/Yuki_Oshima/items/708986d62ea3a773d6a5

---

## SPA構成とは？
- ページ全体をリロードせず、JavaScriptで画面遷移する構成
- Next.jsでは、`<Link href="/about">` のように書くことでページ遷移がSPAとして動作する

**参考文献**

https://www.profuture.co.jp/mk/column/28468#:~:text=%E3%81%95%E3%81%9B%E3%81%BE%E3%81%97%E3%82%87%E3%81%86-,SPA%E3%81%A8%E3%81%AF,%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%AB%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

https://qiita.com/shinkai_/items/79e539b614ac52e48ca4

---

## 導入手順（概要）
1. **Next.jsプロジェクトの作成**
```bash
npx create-next-app my-app
```

2. **Tailwind CSSの導入**
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
`tailwind.config.js`に以下を設定：
```js
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]
```
`globals.css`に以下を記述：
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

3. **SPAとしてのページ遷移を実装**
`pages/index.js`や`pages/about.js`を作り、以下のようにリンクを設置：
```jsx
import Link from 'next/link';

<Link href="/about">
  <a>Aboutページへ</a>
</Link>
```

---

## メリット
- **開発スピードが速い**：Tailwind CSSでスタイルを素早く適用できる
- **保守性が高い**：Next.jsのファイルベースルーティングで管理しやすい
- **UXが良いSPA**を簡単に構築可能

---

## おわりに
Next.jsとTailwind CSSを使ったSPA構成は、シンプルながら拡張性が高く、学習コストも比較的低い構成です。

:::note info
***受講しているITスクールのハッカソンでも、今後さらに開発を進めていきたいと考えています！！***
:::

まずは簡単なプロジェクトから始めて、モダンなフロントエンド開発の一歩を踏み出してみましょう！
MATLAB/Simulinkのマルチボディは面白い

# サンプルモデルから学ぶ
いきなり複雑なロボットを０から作るのは，はっきり言って無理があります．
そこで，もしMATLAB/Simulinkが使える環境にあるなら，是非ともダウンロードしてみてほしいモデルがあります．
![backhoe.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1979979/5a99c008-41cd-8f44-7fef-82a0ead628bf.gif)

このようなアニメーションを見ながら，
アウトリガー（機体を安定させるために地面に対して油圧シリンダで突っ張る構造物）やフロント作業機のリンケージ構造を考えるのも楽しい．

モデルのパラメータを変更して，どんどんシミュレーションしてみる．

FreeCADで構造強度などを考慮しながら，新しいデザインが生まれるかも．

![スクリーンショット 2025-02-08 9.32.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1979979/a1076619-513a-07e2-f0e1-0d29cdf38eea.jpeg)

https://jp.mathworks.com/help/sm/ug/backhoe.html
Lightning Experience Customization



https://trailhead.salesforce.com/content/learn/modules/lex_customization/lex_customization_page_layouts


+ [the Lightning Experience Customization > Set Up Your Org training](https://qiita.com/Keiji_otsubo/items/e61b41a2795d108cdd8d)
+ [Admin Beginner - Lightning Experience Customization - Create and Customize List Views](https://qiita.com/Keiji_otsubo/items/64ef04a2a4f41d33d934)


# Customize Record Page Components and Fields

+ [To create the customized "Record Page, the "Edit Page" option is not displayed in the Setup](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000PYTRJ)

:::note
Open any record then click on gear icon you will get the edit page option. 


https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007eq8enSAA
:::
WSL2にDockerEngineをインストールする

# はじめに
開発環境を整えるためにDocker Engineのインストールを実施しましたので、記録しておきます。
Docker Desktopを利用することも考えましたが、勉強の意味も込めて、あえて使用しないことにしました。ちなみに、Docker Desktopは個人で利用する範囲では無料で使用できますが、一定の規模以上の企業だと使用できません。

> 従業員 250 人を超える企業または年間収益が 1,000 万ドルを超える企業で Docker Desktop を商用利用するには、有料サブスクリプション (Pro、Team、または Business) が必要です。
https://www.docker.com/ja-jp/products/personal/

# 実行環境
以前記事にした環境を使っています。

https://qiita.com/hiohio25/items/f12be83e817c87cf09b9

- Windows 11
- Ubuntu 22.04 LTS（WSL2）

# 参考サイト
https://docs.docker.com/engine/install/ubuntu/

# Docker Engineのインストール
## Linuxバージョンを確認する
参考サイトのOS要件に適していることを確認します。
> Ubuntu Oracular 24.10
Ubuntu Noble 24.04 (LTS)
Ubuntu Jammy 22.04 (LTS)
Ubuntu Focal 20.04 (LTS)

実行したディストリビューションで```lsb_release -a```を実行するなどの方法でUbuntuのバージョンを確認します。
```
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.3 LTS
Release:        22.04
Codename:       jammy
```
利用する環境のUbuntuバージョンは`22.04`ですので、要件に適しています。

## aptリポジトリを使ってDockerをインストールする
https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository

基本的には上記URLの内容をそのまま実行すれば問題ないです。が、内容を理解しながら進めてみます。

### Docker公式のGPGキーを追加する
#### パッケージのアップデートと必要なパッケージのインストールを行なう
```
$ sudo apt-get update
$ sudo apt-get install ca-certificates curl
```
#### ディレクトリを作成する
```
$ sudo install -m 0755 -d /etc/apt/keyrings
```
```install```コマンドは```-d```オプションをつけるとそのディレクトリを作成します。
```-m```は権限を指定するオプションです。
このコマンドを実行する前後で```ls -l /etc/apt/```などを実行すれば、権限```rwxr-xr-x```の```keyrings```ディレクトリが追加されることを確認できると思います。
#### GPGキーをダウンロードする
```
$ sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
```
先ほど作成したディレクトリにDocker公式のGPGキーをダウンロードします。

GPG（GnuPG）は`GNU Privacy Guard`の略称です。

> GnuPG uses public-key cryptography so that users may communicate securely.
https://www.gnupg.org/gph/en/manual.html

> GnuPGはユーザーが安全に通信できるように公開鍵暗号を使用します。
（筆者訳）

つまりは、Dockerが用意したキーペアの公開鍵をダウンロードしているということですね。

#### GPGキーの権限を変更する
```
$ sudo chmod a+r /etc/apt/keyrings/docker.asc
```
実行前後に`ls -l /etc/apt/keyrings/`で権限を確認してみたのですが、もともとファイルの読み取り権限は全ユーザーにあったので特に変更されませんでした。確実にするために念のため実行しましょう。
### リポジトリをaptソースに追加する
#### Dockerのaptリポジトリをaptソースに追加する
```
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```
#### 更新してDockerパッケージを取得する
```
$ sudo apt-get update
```

## Dockerパッケージをインストールする
参考サイトには最新（Latest）バージョンと特定のバージョンのインストール方法が記述されていますが、今回は特にこだわりがないので最新バージョンにします。
```
$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

## インストールが成功したことを確認する
`hello-world`イメージからコンテナを起動します。起動ができるということはDockerエンジンのインストールに成功したということになります。
```
$ sudo docker run hello-world
（中略）
Hello from Docker!
This message shows that your installation appears to be working correctly.
（後略）
```
成功メッセージが表示されました。

# おわりに
以上がUbuntuにDocker Engineをインストールする手順でした。
最後までご覧いただきありがとうございました。
今後、Dockerの使い方などについても記事にしていく予定です。
Docker + Next.js + Goで開発するときにnext/imageでハマった話

こんにちは。最近、Docker上でNext.js（フロントエンド）とGo（バックエンド）を使ってアプリを開発しているのですが、画像表示に使っていた next/image で結構ハマったので、原因と解決方法をまとめておこうと思います。

# 環境構成
Next.js（フロント）: ポート3000

Go（バックエンド）: ポート8080

画像: Goサーバー側で /uploads に静的ファイルとして保存

Docker Compose: Next.js と Go をそれぞれ別サービスとして定義

フロントからは、http://localhost:8080/uploads/xxx.jpg のように画像を参照したい状況です。

# 発生したエラー
Next.js 側の <Image> コンポーネントで以下のように画像を表示しようとすると…
```
<Image
  src="http://localhost:8080/uploads/sample.jpg"
  width={500}
  height={300}
  alt="サンプル画像"
/>
```
ビルド時、もしくは表示時にこんなエラーが出ました：
```
Error: Invalid src prop (http://localhost:8080/uploads/xxx.jpg) on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`
```
原因は next.config.js の images.domains（または remotePatterns）
next/image はセキュリティとパフォーマンスの理由から、外部ホストの画像を使う場合に 事前にホワイトリスト登録が必要です。

これを解決するため、next.config.ts に以下を追加しました：
```
images: {
  remotePatterns: [
    {
      protocol: 'http',
      hostname: 'localhost',
      port: '8080',
      pathname: '/uploads/**',
    },
  ],
}
```
これで一旦はOK！…かと思いきや、Docker コンテナ内で Next.js を動かしたら画像が表示されない問題が発生しました。

# Docker コンテナにおける localhost の罠
ここが最大のハマりポイントです。

Next.js を Docker コンテナで動かすと、localhost は「コンテナ自身」を指します。つまり：

http://localhost:8080 → frontend コンテナ内の8080ポートを見に行く

でも Go は別の backend コンテナで動いている

よって 接続できない（ECONNREFUSED エラー）

### 正しい解決方法：ホスト名は backend にする
Docker Compose では、サービス名が内部の DNS 名として解決されるので、
Next.js から Go にアクセスするには http://backend:8080 のように指定する必要があります。

例）next.config.ts
```
images: {
  remotePatterns: [
    {
      protocol: 'http',
      hostname: 'backend', // ←ここが重要
      port: '8080',
      pathname: '/uploads/**',
    },
  ],
}
```
そして <Image> の src も
```
<Image
  src="http://backend:8080/uploads/sample.jpg"
  width={500}
  height={300}
  alt="サンプル画像"
/>
```
ローカルでも動かしたい？ → 環境変数で切り替えよう
開発中（Dockerを使わず手元で動かすとき）には localhost でアクセスしたくなることもあります。

その場合は、環境ごとに hostname を切り替えられるようにすると便利です：

`` .env.local（ローカル開発用）``
```
IMAGE_HOST=localhost
```
`` .env.docker（Docker用）``
```
IMAGE_HOST=backend
```
``next.config.ts``
```
const IMAGE_HOST = process.env.IMAGE_HOST || 'localhost';

images: {
  remotePatterns: [
    {
      protocol: 'http',
      hostname: IMAGE_HOST,
      port: '8080',
      pathname: '/uploads/**',
    },
  ],
}
```
# まとめ
| 状況 | 使うホスト名 |
|:-:|:-:|
|  ローカルで開発中（PC） | localhost  |
| Docker Compose 環境  |  backend（サービス名） |
	
# おわりに
普段何気なく使っている localhost が、Docker の中では全く違う意味を持つことにあらためて気づかされました。
同じような構成でハマっている人の助けになれば幸いです

※当記事は一部、ChatGPTを参考に執筆しています。
Geminiで杖を使う魔法少女を描いてみた。

# 概要

Geminiで杖を使う魔法少女を描いてみました。

# 実装

プロンプトと実行結果は以下の通りでした。

```
炎の杖を使う魔法少女を描いてください。
```

![炎の杖を使う魔法少女_20250415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/920e23f6-b673-40fc-8348-b1b0b91fb575.png)


```
氷の杖を使う魔法少女を描いてみてください。
```

![氷の杖を使う魔法少女_20250415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/9af4f9c4-6a39-405a-a73a-ffb0b1134545.png)


```
電撃の杖を使う魔法少女を描いてみてください。
```

![電撃の杖を使う魔法少女_20250415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/c19b55c6-5ce6-4d31-95b4-96ab585c4ef2.png)

炎の子が可愛いかも。

# まとめ

何かの役に立てばと。
【rails初学者】Rails8でログインページが表示されない問題と406エラーの対処法

そろそろ、転職活動に向けてポートフォリオアプリを作成しようと思い、ユーザー管理のために Devise を導入しました。
Rails 8で新しくアプリを作成し、ログインページを作ろうとしたところ、`/users/sign_in` にアクセスしても画面が表示されず、「406 Not Acceptable」エラーが発生しました。

この問題は、Rails 8から追加されたブラウザ制限機能 `allow_browser` によるもので、ローカル開発中でも発生するようです。

## 使用環境

- Ruby 3.4.2（rbenv）
- Rails 8.0.2
- Node.js 18.x（nvm）
- PostgreSQL
- Devise

## Railsアプリ作成

```bash
rails new my_app -d postgresql --css bootstrap
cd my_app
```

## Devise 導入
```ruby
bundle add devise
bin/rails generate devise:install
bin/rails generate devise User
bin/rails db:create db:migrate
```

## `/users/sign_in` にアクセス → 406エラー発生
Railsサーバー起動後に以下のURLへアクセスする
```ruby
http://localhost:3000/users/sign_in
```
画面は表示されず、サーバーログに以下が出力される。
```ruby
Rendering public/406-unsupported-browser.html
Completed 406 Not Acceptable
```
## 原因：Rails 8 の`allow_browser`によるアクセス制限
Rails 8では、特定のUser-Agent（古いブラウザや不明なもの）を拒否する
`allow_browser`機能がデフォルトで有効になっている。

ローカル開発中であっても、IPv6などでアクセスするとUser-Agentが不明とされ、拒否されてしまう。

## 解決方法
`config/environments/development.rb`を編集
次の1行を`Rails.application.configure do`ブロックの末尾に追加する。
```ruby
config.action_dispatch.allow_browser = ->(user_agent) { true }
```
## サーバー再起動
```ruby
# サーバーを停止
Ctrl + C

# サーバー再起動
bin/dev
# または
rails server
```

## 再度アクセス
```
http://localhost:3000/users/sign_in
```
ログインページが正しく表示されれば成功。

## まとめ

| 内容                         | 対処法                                                  |
|------------------------------|----------------------------------------------------------|
| ログインページが406で表示されない | `allow_browser = -> { true }` を追加                       |
| 修正後も変化なし             | サーバーの再起動が必要                                   |
| 本番環境では？               | 特定の古いブラウザだけ除外する設定を推奨                 |
Python 仮想環境 venv

# はじめに
python3でパッケージが無いと怒られる。
嘗ては`pip`でインストールしていたけど、`venv`を使うのが推奨されている。

```
$ python3
Python 3.12.3 (main, Feb  4 2025, 14:48:35) [GCC 13.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import numpy
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ModuleNotFoundError: No module named 'numpy'
>>> quit()
```

# 仮想環境の構築
`python3 -m venv hoge`
というコマンドで仮想環境を構築しようとし、venvがインストールされてなくて失敗する場合、エラーメッセージの指示に従いvenvをインストールする。
`sudo apt install python3.12-venv`

改めて仮想環境を構築（少し時間かかる）
`python3 -m venv hoge`

# 仮想環境でpipを使う

```
$ source hoge/bin/activate
(hoge) $ pip install numpy
```
のように仮想環境に入り、パッケージをインストールする。

```
(hoge) $ python3
Python 3.12.3 (main, Feb  4 2025, 14:48:35) [GCC 13.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import numpy as np
>>> np.arange(3)
array([0, 1, 2])
>>> quit()
(hoge) $ deactivate
$
```

python3でパッケージが使用できることを確認する。
`deactivate`コマンドで仮想環境を抜ける。
2025/4/15主にITとかセキュリティの記事

サイバー攻撃　情報発信　警視庁公安部がＸ開設(4/13)
https://topics.smt.docomo.ne.jp/article/tokyo/region/tokyo-398174

プルデンシャル生命に報告命令＝詐欺や漏えい相次ぐ―金融庁(4/11)
https://www.risktaisaku.com/articles/-/101571

欧州 EDPB AIプライバシーのリスクと緩和 大規模言語モデル（LLM) (2025.04.10)(4/13)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2025/04/post-46d5ad.html

必ずしもマルウェアではない、アダクテンスシリーズは子供のための新しいサイバー脅威の形を明らかにします(4/13)
https://voi.id/ja/teknologi/475191

ChromeとEdgeの併用が最強の選択肢である理由 – 完璧なブラウザを求めない実用主義(4/13)
https://innovatopia.jp/uncategorized/51390/

脱・机上セキュリティ！開発未経験CSIRTが挑むWeb技術習得記(4/13)
https://qiita.com/spooooNN/items/2eee90b3a4924c4cd73d

国連特別報告者と会談(4/12)
https://montsame.mn/jp/read/366530

AIで“別人”になりすまし…急増する“ディープフェイク就活”、韓国企業も急ピッチの対応(4/13)
https://www.afpbb.com/articles/-/3572712?cx_part=top_category&cx_position=4

ニセの楽天証券から「フィッシング詐欺対策」を装った詐欺メールが！(4/13)
https://ascii.jp/elem/000/004/263/4263005/?rss

口座乗っ取りで　証券６社が被害　各社が対策急ぐ(4/13)
https://www.okinawatimes.co.jp/articles/-/1563655

供給網のサイバー防御強化　政府調達の要件に　対策を外部評価(4/13)
https://www.nikkei.com/article/DGKKZO88007580S5A410C2EA1000/

ブログに長期間アクセスできない理由(4/13)
https://agora-web.jp/archives/250410144004.html

＜社説＞サイバー法案衆院通過　恣意的な運用に歯止めを(4/13)
https://ryukyushimpo.jp/editorial/entry-4148410.html

セッション認証とは？React × Expressでハンズオンしながら学ぶ(4/12)
https://qiita.com/t_maki/items/c70148bf2f66415ddb91

日本の桜を保護する人工知能ツール(4/12)
https://entrevue.fr/ja/un-outil-dintelligence-artificielle-pour-preserver-les-cerisiers-en-fleurs-au-japon/

電話の男「PCウイルス、遠隔修理で直す」　神戸の70歳男性、350万円だまし取られる(4/12)
https://www.kobe-np.co.jp/news/jiken/202504/0018863870.shtml

「能動的サイバー防御」考える　クレヨンハウスで来月18日　小倉利丸さんが講演(4/13)
https://topics.smt.docomo.ne.jp/article/tokyo/region/tokyo-398168?utm_source=dnews&utm_medium=article&utm_campaign=contentsmatch1

宇宙産業再興へ、日本が取り戻すべき産業基盤とは──5つの戦略視点(4/13)
https://blogs.itmedia.co.jp/business20/2025/04/5_6.html?ref=rss

違法電波を垂れ流す偽移動基地局カー、日本への潜入が目視される(4/12)
https://kabumatome.doorblog.jp/archives/66026630.html

共通鍵暗号をTypeScriptで学ぶ(4/13)
https://zenn.dev/stin/articles/5e0870eaaf9bb0
【Flutter】AIチャットアプリのソースコード販売中💡即導入OK・商用利用可（iOS/Android対応）

はじめに
Flutter製のAIチャットアプリのソースコードを販売開始しました。
ChatGPT・GeminiなどのAIを組み込んで、即アプリとして動作可能な完成コードです。
商用利用もOKで、改造・カスタマイズ・リリースすべて自由にできます。

主な機能・UI特徴
🎨 アバター＆名前の変更機能つき
　→ 3種類のプリセットアバターから選択、名前も自由に設定可能

🌙 ダークモード／ライトモード対応
　→ スタイリッシュで使いやすい外観に切り替え可能

💬 LINE風チャットUI
　→ シンプルで親しみやすいUI、AIとのやりとりが直感的にできる

🆓 有料プラン機能のUI枠あり（未実装）
　→ 有料版への拡張用コードベースつき。個人で自由に機能を追加・展開可能

🛠️ Flutter製でAndroid/iOS両対応
　→ モバイル向けにすぐリリース・販売可能。改造も簡単です

こんな人におすすめ
・AIチャットアプリをすぐ作りたいFlutterユーザー

・ChatGPTやローカルモデルを組み込みたい開発者

・Vtuberやキャラ会話アプリを作りたい方

・有料版アプリをリリースしたいが時間が足りない方

・プレゼンや案件用のUIが今すぐ必要な方

【アプリ画面サンプル】
![Screenshot_20250301-151406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4024147/6495b835-ab3f-4503-a6a8-8d98ecd9d0a7.png)
![Screenshot_20250301-151427.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4024147/2c289edc-2e2d-48d2-bf32-9f36c0b41b20.png)
![Screenshot_20250301-151747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4024147/210e7a4d-1f43-48db-9c96-8b7ca7b7b3f7.png)

購入はこちら
📦 BOOTH（Flutter製AIチャットアプリ ソースコード）
https://forte-corp.booth.pm/items/6770950

最後に
このアプリは、
「時間がないけど、すぐに形になるAIチャットアプリが欲しい」
そんな開発者のために設計しました。

カスタマイズ自由、商用OK、即導入可能――
あなたの“次のアプリ開発”のスタート地点になれたら嬉しいです。
ご質問や導入サポートはX(旧twitter)でも受け付けてますので、お気軽にどうぞ！
⇨ https://x.com/fortecorp_1126
クラメルの公式と連立方程式と素因数分解

##  はじめに
連立方程式をクラメルの公式で解くことにします
##  Pythonコード
```python
from sympy import factorint
import matplotlib.pyplot as plt
import numpy as np

# --- 係数の設定 / Coefficients ---
a1, b1, c1 = 2, 3, 8
a2, b2, c2 = 4, -1, 2

# 係数のプリント / Print Coefficients
print(f"a1 = {a1}, b1 = {b1}, c1 = {c1}")
print(f"a2 = {a2}, b2 = {b2}, c2 = {c2}")

# --- 積の計算 / Products for D, Dx, Dy ---
ab1 = a1 * b2
ab2 = a2 * b1
cb1 = c1 * b2
cb2 = c2 * b1
ac1 = a1 * c2
ac2 = a2 * c1

# --- 出力 / Print results ---
print(f"a1 * b2 = {a1} * {b2} = {ab1} → 素因数分解 / Prime factors: {factorint(abs(ab1))}")
print(f"a2 * b1 = {a2} * {b1} = {ab2} → 素因数分解 / Prime factors: {factorint(abs(ab2))}")
print(f"→ D = a1*b2 - a2*b1 = {ab1} - {ab2} = {ab1 - ab2}")

print(f"\nc1 * b2 = {c1} * {b2} = {cb1} → 素因数分解 / Prime factors: {factorint(abs(cb1))}")
print(f"c2 * b1 = {c2} * {b1} = {cb2} → 素因数分解 / Prime factors: {factorint(abs(cb2))}")
print(f"→ Dx = c1*b2 - c2*b1 = {cb1} - {cb2} = {cb1 - cb2}")

print(f"\na1 * c2 = {a1} * {c2} = {ac1} → 素因数分解 / Prime factors: {factorint(abs(ac1))}")
print(f"a2 * c1 = {a2} * {c1} = {ac2} → 素因数分解 / Prime factors: {factorint(abs(ac2))}")
print(f"→ Dy = a1*c2 - a2*c1 = {ac1} - {ac2} = {ac1 - ac2}")

# --- 連立方程式をクラメルの公式で解く / Solve the system ---
D = ab1 - ab2
Dx = cb1 - cb2
Dy = ac1 - ac2

# 結果を表示 / Show results
if D == 0:
    print("\n 解なしまたは無数の解 / No unique solution")
else:
    x = Dx / D  # x value
    y = Dy / D  # y value
    print(f"\n 解 / Solution: x = {x}, y = {y}")

# --- 最小二乗法での解法 (Least Squares Method) ---
# 最小二乗法を使って連立方程式を解く
A = np.array([[a1, b1], [a2, b2]])  # Coefficient matrix
b = np.array([c1, c2])  # Constants vector

# Solve using Least Squares Method (lstsq)
x_ls, residuals, rank, s = np.linalg.lstsq(A, b, rcond=None)
y_ls = x_ls[1]  # y value is the second element
x_ls = x_ls[0]  # x value is the first element

# 最小二乗法による解を表示
print(f"\n 最小二乗法で解く / Solution using Least Squares: x = {x_ls}, y = {y_ls}")

# --- 連立方程式の式に対応する直線の定義 / Define lines from equations ---
def line1(x):
    return (c1 - a1 * x) / b1

def line2(x):
    return (c2 - a2 * x) / b2

# --- プロットの準備 / Prepare to plot ---
x_vals = list(range(-10, 11))
y1_vals = [line1(x) for x in x_vals]
y2_vals = [line2(x) for x in x_vals]

# --- グラフ描画 / Plot the graph ---
plt.figure(figsize=(6, 6))
plt.plot(x_vals, y1_vals, label=f"{a1}x + {b1}y = {c1}", color='blue')
plt.plot(x_vals, y2_vals, label=f"{a2}x + {b2}y = {c2}", color='red')

# --- 解を描画 / Plot the solution point ---
plt.plot(x, y, 'go', label=f"Solution: ({x}, {y})", markersize=8)
plt.plot(x_ls, y_ls, 'bo', label=f"Least Squares Solution: ({x_ls}, {y_ls})", markersize=8)

# --- 装飾 / Decorate ---
plt.axhline(0, color='black', linewidth=0.5)
plt.axvline(0, color='black', linewidth=0.5)
plt.grid(True)
plt.xlabel("x")
plt.ylabel("y")
plt.title("Graph of Two Linear Equations and Their Intersection")
plt.legend()
plt.tight_layout()
plt.show()


```
結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4046871/d0eba75d-883e-456b-bd3c-a3fa4b10002b.png)
競プロ日記#25/04/14

# AtCoderの自動テスト、自動提出などの環境構築に数時間を費やしたので今日は特に問題解きはなし！（簡単な問題はいくつか消化しました）
- ちなみにちゃんと動くようになったのだがAtCoderProblemsにはなぜか反映されない。原因わかる方いらっしゃれば教えてください。
春のデートに行きたい桜のワールド　

※一旦Qiitaを間借りしていますが、いずれ自分のブログにこの記事は引っ越す予定です。
ブログができたらtwitterで告知しますので、私のtwitterフォローお願いします。

https://x.com/vrc_machida0312

https://x.com/vrc_machida0312/status/1911409634214093195

https://x.com/vrc_machida0312/status/1911406130796061154

https://x.com/vrc_machida0312/status/1912561186576691604
夜桜と川のみ

https://x.com/vrc_machida0312/status/1912558753951674833
異世界への道
桜あり
空飛ぶでっけえ鯉がいる

https://x.com/vrc_machida0312/status/1911412628577984663
大人数でもわちゃわちゃ遊べる広いワールド
ひなだんでみんなでちっさくできる集合写真によさそう

https://x.com/vrc_machida0312/status/1911403024896893267
１つの公園で花見できるワールド　せまい


https://x.com/vrc_machida0312/status/1911409634214093195
ひろい　街中を見れる　

https://x.com/vrc_machida0312/status/1911406130796061154
キレイ　しゃしんｙ
AzureDevOpsのパイプライン上でFirebaseEmulatorをdocker-composeを使って起動したメモ

# 概要
[前回](https://qiita.com/hibohiboo/items/24fcb7f729a4edcfcf2a)はserviceを使ってパイプラインがうまく動かなかった。今回は、taskとしてdocker-composeを実行し、FirebaseEmulatorを試すことにする。

[この時点のソース](https://github.com/hibohiboo/odyssage/blob/2e46be623707b28de4d8c635de644b464388bf2d/packages/bdd-e2e-test/azure-pipeline.yml)

# 追加したソースコード

```yml:packages/bdd-e2e-test/azure-pipeline.yml
      - bash: |
          sudo mkdir $(dockerComposePath)
          sudo curl -SL https://github.com/docker/compose/releases/download/v2.35.0/docker-compose-linux-x86_64 -o $(dockerComposePath)/docker-compose
          sudo chmod 755 $(dockerComposePath)/docker-compose
        displayName: Download docker-compose

      - script: |
          # Firebaseディレクトリに移動
          cd infra/local/firebase
          
          # docker-composeを直接使用してFirebaseエミュレータを起動
          $(dockerComposePath)/docker-compose -f docker-compose.ci.yml up -d firebase

        displayName: 'Wait for Firebase emulators'
        timeoutInMinutes: 3  # タスク全体のタイムアウト
```

# 実行
立ち上げるのに2分程度と少々時間はかかるが、立ち上げられることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/cecccc77-7b9c-4bf3-860e-4d391b5e59a8.png)

# 毎回ビルドするのではなく、Imageを使う
時短のため、[前回](https://qiita.com/hibohiboo/items/24fcb7f729a4edcfcf2a)のImageを使用するようにする。
```diff:infra/local/firebase/docker-compose.yml

# https://qiita.com/ppco/items/87682b3a14ceb3702dbb
services:
  firebase:
-    build:
-     context: ./docker
-     dockerfile: Dockerfile
+    image: docker.io/hibohiboo66/ubuntu24-firebase-tools:latest
    volumes:
      - ./ci/firebase_ci.json:/opt/firebase/firebase.json
      - ./ci/.firebaserc_ci:/opt/firebase/.firebaserc
    ports:
      - 9099:9099 # Firebase Authentication
      - 9005:9005 # Firebase login
    working_dir: /opt/firebase
    command: firebase emulators:start
    tty: true

```


# 実行
40秒程度と短くなった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/277edd30-c334-43e2-b98a-9abf24699d11.png)


# 参考

[Docker Compose インストール](https://docs.docker.com/compose/install/linux/)
1回めの外部LTの振り返りポエム記事 2025年4月 #QiitaBash

## これは何?

https://increments.connpass.com/event/347388/

こちらのイベントで運良く，LTの機会をいただき登壇させていただきました。
皆様に対して，感謝申し上げますm(_ _)m

今回私にとってオープンな勉強会での発表は初だったのでこの記事を通して，発表してみた感想や次回に向けての反省点をKPTを使ってふりかえりを行いたいと思います。

アドレナリンと勢いだけでさくっと書いているので乱文ご容赦ください。

---

## KPIとは

>  KPT法は「ケーピーティ法」または「ケプト法」と呼ばれるフレームワークです。課題の洗い出しをしたり、改善のためのアクションを明確化したりすることが得意です。KPT法は以下の3つの要素から成り立っています。
> - Keep：継続すべき良かった点
> - Problem：改善すべき課題や問題点
> - Try：解決のためにこれから実施すること[^1]

おそらく，一般的な振り返り方法だと思うので今回はこれを採用します。

---

## Keep

- とりあえず，LTやってナイス!
- シュタゲネタは結構通じそうなので今後も自己紹介に使えそう
- 緊張したけど，思ったよりもラフに話すことができた
- 構成はそんなに悪くなかったし，多少笑いを取れた

---

## Problem

主にYoutube Liveを見返してみた自分の感想

- ぶっつけ本番は良くなかった
  - 時間の超過
  - 「まあ，なんか」「ちょっと」や擬音語など無駄なワードがめちゃくちゃ多い。30秒に3回はある。
- 声が小さい。Youtube Liveだとだいぶ聞き取りにくい
- Marpで資料作ってみたが，他の参加者のスライドより圧倒的にクオリティが低かった。
    - Marpは図を入れる気がなくなるのが特に良くない。文字だらけになる

---

## Try

- 練習をもっとする
    - 資料は1週間前には作る(ここはMarpでもいいかも?)
    - 友人に聞いてもらう or 録画して見返す
    - 「まあ，なんか」「ちょっと」を減らすためにカウントしてn回以下ならOKとか決めてみる
- Marp以外で図の多さを意識して資料を作る
    - @Sicut_study さんが[Canva](https://www.canva.com/)を使っていたので真似しようと思う
    - 時間がなかったらパワポに回帰するでもok
- 余裕があれば，聞いている人に挙手せいで質問をしてみる
- 想像の2倍大きな声で話す or マイクの持ち方検討

### 他の登壇者の方の発表を受けて活かしたいことなど

- @Sicut_study さんがあまりにプレゼンがうまくて，椅子からひっくり返りそうでした。正直今まで，難しい内容を話せることの方を重要視すればいいやと思っていましたが，こんなに違うならプレゼン技術にコミットすべきだなと考えを改めさせられました。エラーの記事のも書きます。
- @infra365 さんの発表資料をQiitaに使うのが割と目からウロコでした。(Qiitaで壁打ちして発表するイメージでいた)。あと，スライドが図式化されていて(特に仕事と得意分野を書いてた図と初心者向けの記事の書き方のスライド)真似させてください。
- @mercury_dev0517 一つの記事からここまで掘り下げて話されていて，このパターンで話しきれるのすごいなとおもいました。思考の整理学も読み返そうと思いました。
- Tochikawaさん(すみません，Qiitaが見つからず) 「読みての課題解決をする記事が良い記事」というのがシンプルかつ本質的でした。読まれる記事と良い記事という分け方をする時点で抽象度が高そうなんですが，こういう伝えたいことが短文でまとめられるように自分もなりたいです。
- rocky_manobi さん(こちらもQiita見つからず) Laprasには大変お世話になっております。自分はまだ，知り合いに読んだよと言われたことはないですが，それを期待して頑張ろうと思います。自分のためにアウトプットするという考え方(違ったらすみません)が自分に近いなと思いました。自分もトイレに行く感覚でQiita書いてるみたいなところがあるので(活かしたいことというよりも感想ですみません)

---

## 感想

- 良くも悪くも普段どおりの自分がお出しできた。
- やはり発表したほうが懇親会で話かけられる率が上がるなと思った。自分は人に話を盛り上げたりするのが得意なわけではないので，発表した側になるのはお得だなと思った。
- この経験を次回につなげたい
- 大事なこと忘れてた。楽しかったです！

---

## Reference

- [^1]: https://www.ntt.com/business/services/xmanaged/lp/column/kpi-management.html