OmniAICreator/Qiita-1.07M huggingface dataset:
念願のKCGコンピュータミュージアムに行った話

# KCGコンピュータミュージアムとは？ 
京都コンピュータ学院(KCG)に併設されている、情報処理学会の分散コンピュータ博物館の一つ。
『パーソナルコンピュータ博物史』という本に書いてあって私がずっと行きたかった念願のところです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/e4fe3059-b998-4bd8-943d-af4e8cb66b9f.png)

情報処理学会の全国大会で関西に旅行することになったのでその機会に尋ねました。
高田さんという先生が丁寧に解説をしてくれました。

# 見聞録
見聞きしたことを忘れないうちに纏めます。

## 自由な校風
創立当初からコンピュータを学生が自由に使って良いよという方針で、他のコンピュータが置いてある大学の大学生からも羨ましがれたそう。
例えばコンピュータが繋いで縦横に並べて置いてある実習室で、一つの画面をマスに見立てて大きくコマを描いてオセロをしたりしてたそう

ハッカー精神に満ち溢れている。

## 最初のコンピュータ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/dd1cc213-b833-47c1-9d97-38cfd982adbf.png)

ディスプレイがなく出力装置はプリンタで、重ねて印字して濃くするなどのテクがあったそう。今のターミナルでは到底真似できない。

## ラップトップ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/ddbd26c6-5dd9-45d5-b86a-9ed9101bde00.png)

画像左側のJ-3100のラップトップ、それでも重くて膝に乗せたら痛めることから「ラップクラッシャー」と呼ばれていたようです。

## キット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/8ae4f644-fce0-4fcc-85ed-dab4a83e3bd2.png)

ハード実習という授業で実際にこのキットを組み立てていたそうです。

## 独自マシン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/3481dc83-4c04-4361-ac48-43c2127cc0f3.png)

京都コンピューター学院が制作したパソコン。それ用のドライバを作らないといけないので、Microsoftと契約を結んでMS-DOSのソースコードを手に入れて弄っていたようです。

## パンチカード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/130e636f-11a9-479e-8f25-884a4fc1b32b.png)

プログラムの文一行がパンチカード一枚だったようです。
高田先生曰く、三十行のプログラムで三十枚になり、持ち運ぶ時落としたら順番を直すのが大変だったそう。

![IMG_20250314_195906(1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952107/3791267d-4bdb-4ae4-9f45-a89c65fb082c.jpeg)

お土産にFORTRANとCOBOLの一枚ずつ貰えました。ﾔｯﾀｰ

# 高田先生はかく語りき
- 元々高田先生はKCGの学生だった
- コンピュータ室は空調を効かせてあり涼しいので、学生時代は夏休みは毎日学校に通ってた。
- そうしているうちに先生に顔が知れて、卒業の時に肩叩かれてKCGで働くようになった。
- 昔はNECや富士通、東芝、沖電気など多くの企業が独自のマシンを開発し、ハードウェアに独自性/個性があった。
- 昔は商用のソフトウェアでも自由だった
同期処理と非同期処理の違い

# はじめに

プログラミングにおいて、同期処理と非同期処理は重要な概念です。この記事では、両者の違いを詳しく解説し、それぞれの特徴や使用場面について説明します。

# 同期処理とは

同期処理（Synchronous Processing）は、タスクを順番に実行する方式です。

### 特徴:
- タスクが順序通りに実行される
- 一つのタスクが完了するまで次のタスクは待機する
- コードの流れが予測しやすい

### 使用例:
- 単純な計算処理
- ファイルの読み書き（小規模の場合）
- データベースクエリ（単純な場合）

### メリット:
- デバッグが容易
- コードの可読性が高い
- 順序依存のタスクに適している

### デメリット:
- 長時間のタスクでプログラム全体がブロックされる
- リソースの効率的な利用が難しい

# 非同期処理とは

非同期処理（Asynchronous Processing）は、複数のタスクを並行して実行する方式です。

### 特徴:
- タスクが独立して実行される
- 長時間のタスクでもプログラムがブロックされない
- コールバック、Promise、async/awaitなどを使用して実装

### 使用例:
- ネットワークリクエスト
- 大規模なファイル操作
- ユーザーインターフェースの更新

### メリット:
- システムリソースの効率的な利用
- 応答性の向上
- 複数の操作を同時に処理可能

### デメリット:
- コードの複雑性が増す
- デバッグが難しくなる場合がある
- エラー処理が複雑になる可能性

# 同期処理と非同期処理の比較

| 特徴 | 同期処理 | 非同期処理 |
|------|---------|-----------|
| 実行順序 | 順序通り | 不定 |
| ブロッキング | あり | なし |
| コードの複雑さ | 低い | 高い |
| リソース効率 | 低い | 高い |
| 適した用途 | 単純な処理、順序依存のタスク | I/O操作、並列処理が必要なタスク |

## まとめ

同期処理と非同期処理はそれぞれ長所と短所があり、適切な使用場面が異なります。プロジェクトの要件や性能目標に応じて、適切な処理方式を選択することが重要です。最後まで読んでくださり、ありがとうございました。もし改善点や質問があれば、ぜひコメントしてください！
Lambda のローカル実行環境を構築する。

# はじめに

# 前提条件
- Ubuntu 22.04.3 LTS（wsl2）

# AWS CLI インストール
次の URL を参考にインストールします。

https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html


``` sh
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
```

# SAM CLI インストール
次の URL を参考にインストールします。

https://github.com/aws/aws-sam-cli/releases/latest/download/aws-sam-cli-linux-x86_64.zip

```sh
wget "https://github.com/aws/aws-sam-cli/releases/latest/download/aws-sam-cli-linux-x86_64.zip"
unzip aws-sam-cli-linux-x86_64.zip -d sam-installation
sudo ./sam-installation/install
```

# Dockerのインストール
次の URL を参考にインストールします。

https://docs.docker.com/engine/install/ubuntu/


# 確認

以下が出たら準備完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601976/d23fbb64-be9d-4fd0-9189-ff2040918d92.png)


# やってみる。

とりあえず、`7 - Serverless API`を作ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601976/73eba57a-9b4f-4e2a-8e29-dd4de46ad0b8.png)

作成されるファイル群は以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601976/bb86783a-ddb5-479e-9f4b-1c1f8d592289.png)
Next.jsで技術ブログを作成してみた

# new article body

今回技術ブログを作成するにあたって。初めてNext.jsを使ってみました。

## 使用技術

```json
"dependencies": {
  "@testing-library/dom": "^10.4.0",
  "@testing-library/react": "^16.2.0",
  "biome": "^0.3.3",
  "firebase": "^11.4.0",
  "jest": "^29.7.0",
  "next": "latest",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"devDependencies": {
  "@biomejs/biome": "1.9.4",
  "@tailwindcss/postcss": "^4.0.10",
  "@testing-library/jest-dom": "^6.6.3",
  "@types/bun": "latest",
  "@types/node": "20.8.10",
  "@types/react": "^19.0.10",
  "@types/react-dom": "^19.0.4",
  "daisyui": "^5.0.0",
  "jest-environment-jsdom": "^29.7.0",
  "postcss": "^8.5.3",
  "tailwindcss": "^4.0.10",
  "ts-node": "^10.9.2",
  "typescript": "^5.2.2"
},
```

## 機能

QiitaとmicroCMSのAPIを使って記事を取得し、記事カードとして表示する機能を実装しました。
クリックすると、Qiitaは元記事のページ、microCMSは専用のビューページに遷移するようにしています。

![画面収録 2025-03-14 6.57.47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456603/56293359-62f0-49cc-a0be-2c5781354a3c.gif)
![画面収録 2025-03-14 7.03.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456603/7dd4faea-e3f2-4ddc-b05a-96715fbe3055.gif)

## つまずいた点

普段使用していたuseStateなどがSSRだと使用できず、対象のコンポーネントがCSRかSSRかによってReactの書き方を変えないといけなかったところに躓きました。

また、APIとJsonデータを扱うことがあまりなかったので、API通信時の非同期の処理とシリアライズをすべきタイミングがよくわからず、どこで問題が起きているのか切り分けることに苦戦しました。

## 学んだこと

CSRやSSRなどがどういうものかは知っていましたが、実際にプログラミングをする際、何が使えて何が使えないかを学ぶことができました。

また「APIを使用してデータの送受信を行う」ということを、今までなんとなくでやっていましたが、Next.jsでAPIというものを意識的に扱ったおかげで、かなり解像度を深めることができました。

## まとめ

今回はNext.jsを使って技術ブログを作成しAPIという仕組みの理解を深めることができました。

そのため、APIを肌感覚で学びたい場合は、フォルダ単位でAPIとUIが分かれているフレームワークを使用して何か作ってみるのことが、大分APIの理解に役立つと思います。

## JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからお願いします👇

https://projisou.jp
「sympyのmaximum 関数の引数に Piecewise関数を使いたい。」をAI先生に聞きました。

# sympyのdoc
・sympy.calculus.util.**maximum**(f, symbol, domain=Reals)
https://docs.sympy.org/latest/modules/calculus/index.html#sympy.calculus.util.maximum
・class sympy.functions.elementary.piecewise.**Piecewise**(*_args)
https://docs.sympy.org/latest/modules/functions/elementary.html#piecewise

# ChatGPT先生へ
・質問リストの追番は無視して下さい。１個ずつです。途中の回答表示は省略しています。
・相変わらずの **「本当ですか。」** の連発です。
```
# 質問リスト
1. sympy の maximum 関数の引数に Piecewise 関数が使えますか。使えない時の方法を教えて下さい。  
2. 上記の Piecewise を明示的に Max に変換で、複数個の引数に対応したユーザー定義関数を教えて下さい。  
3. 上記の、数学的に正確な最大値を求める形にして下さい。  
4. 本当ですか。  
5. 本当ですか。  
6. 本当ですか。  
7. 本当ですか。  
8. 上記で値がでません。  
9. 最後のソースコードを出力するために、1回の質問で回答をもらうための、質問文を教えて下さい。  
10. 私の質問を Markdown 形式でリスト化して出力して。Markdown 形式でリストからアスタリスクは削除して。1行目に、# 質問リスト の文字を出力して。  
```
・(私)そうかあ。以下**私自身が何だかバージョンした気分です。**
```
最後のソースコードを出力するために、１回の質問で回答をもらうための、質問文を教えて下さい。
```
>質問文の例として、以下のように聞いていただければ、最適な回答を1回で提供できます。

>質問文（例）
「SymPy の Piecewise 関数の最大値を正しく求める関数を作りたいです。
複数の Piecewise 関数を入力として受け取り、数学的に正しい Piecewise の形で最大値を求める Python 関数を教えてください。」
これで、正しい Piecewise の最大値を求める関数を 一発で お伝えできます！ 🚀

・私は恐ろしくて未実行です。



>ChatGPT の回答は必ずしも正しいとは限りません。重要な情報は確認するようにしてください。(回答抜粋)
#### 修正後の piecewise_maximum
```python
from sympy import symbols, Piecewise, Max, simplify

def piecewise_maximum(*pws):
    """
    複数の Piecewise 関数の数学的に正確な最大値を求める関数。
    各条件ごとに最大値を考慮し、新しい Piecewise を構築する。
    """
    # `pws` 内のすべての条件を集める
    all_cases = []
    for pw in pws:
        if isinstance(pw, Piecewise):
            all_cases.extend(pw.args)
        else:
            all_cases.append((pw, True))  # 通常の式は `True` 条件で追加
    
    # 条件を整理（条件ごとの区間を作る）
    conditions = [cond for _, cond in all_cases]
    unique_conditions = list(set(conditions))  # 重複を除去
    
    # 各条件での最大値を計算
    max_cases = []
    for cond in unique_conditions:
        applicable_values = [expr for expr, c in all_cases if c == cond or (c == True and cond != False)]
        max_value = Max(*applicable_values)  # その条件内での最大値
        max_cases.append((max_value, cond))  # `Piecewise` に追加
    
    # `Piecewise` を作成し、簡約化
    return simplify(Piecewise(*max_cases))

# 変数の定義
x = symbols('x')

# `Piecewise` 関数の定義
f1 = Piecewise(
    (x, x < 1),
    (2 - x, x < 2),
    (x - 1, True)
)

f2 = Piecewise(
    (3 - x, x < 1.5),
    (x - 2, True)
)

# 変換
max_f = piecewise_maximum(f1, f2)

print(max_f)  # 数学的に正確な `Piecewise` の最大値
```

# Gemini先生へ


# copilot先生へ

# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

https://qiita.com/mrrclb48z/items/b6351b48e47bcf6265c0

# いつもと違うおすすめです。
【論文まとめ】SURF(Speeded Up Robust Features)

## Fast-Hessian Detector
```math
\begin{align}
\mathcal{H}(\mathbf{x}, \sigma) &= \left(\begin{array}{cc} L_{xx}(\mathbf{x}, \sigma) & L_{xy}(\mathbf{x}, \sigma) \\ L_{yx}(\mathbf{x}, \sigma) & L_{yy}(\mathbf{x}, \sigma) \end{array} \right) \\
L_{xy}(\mathbf{x}, \sigma) &= L_{yx}(\mathbf{x}, \sigma)
\end{align}
```

SURF(Speeded Up Robust Features)では上記で定義されるヘッセ行列に基づいて特徴量抽出を行います。式における$L_{xx}(\mathbf{x}, \sigma)$はスケール$\sigma$のガウス分布を用いた畳み込み処理の結果を$x$方向に2階微分した導関数に対応します。

![SURF1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936087/b2ace410-39ec-47cc-a301-18290ed1325a.png)
SURF論文 Fig.1

SURFでは計算量の削減にあたって上図のようなフィルタで近似的な処理を行います。上記の理解にあたっては下記のように標準正規分布の確率密度関数の1階と2階の導関数の計算とグラフの描画を行うとわかりやすいです。

```math
\begin{align}
f(x) &= \frac{1}{\sqrt{2 \pi}} \exp{ -\frac{2 x^2}{2} } \\
f'(x) &= \frac{1}{\sqrt{2 \pi}} \exp{ -\frac{2 x^2}{2} } \times (-x) \\
  &= -\frac{x}{\sqrt{2 \pi}} \exp{ -\frac{2 x^2}{2} } \\
f^{''}(x) &= -\frac{1}{\sqrt{2 \pi}} \exp{ -\frac{2 x^2}{2} } - \frac{x}{\sqrt{2 \pi}} \exp{ -\frac{2 x^2}{2} } \times (-x) \\
  &= \frac{(x^2-1)}{\sqrt{2 \pi}} \exp{ -\frac{2 x^2}{2} }
\end{align}
```

```python
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns

sns.set_theme()

x = np.arange(-5., 5.01, 0.01)
y1 = -x*np.exp(-x**2/2.)/np.sqrt(2*np.pi)
y2 = (x**2-1)*np.exp(-x**2/2.)/np.sqrt(2*np.pi)

plt.plot(x, y1)
plt.savefig("SURF1.png")

plt.plot(x, y2)
plt.savefig("SURF2.png")
```

・実行結果
![SURF1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936087/c9485dfb-5204-43c2-9d90-4ebcda4aa556.png)
![SURF2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936087/75beab9c-3f82-496f-8b09-d01c36f2481e.png)
Docker DesktopからRancher Desktopへ

Docker Desktopをこれまで使って来ましたが、費用がかかっていたので無料で使えるRancher Desktopを導入してみました。
少し手こずったところがあって解決できたので、誰かのお役に立てれば幸いです。

### Docker Desktopをアンインストール
こちらでアンインストールします。
```
/Applications/Docker.app/Contents/MacOS/uninstall
```
https://docs.docker.com/desktop/uninstall/

### Rancher Desktopをインストール
```
brew install --cask rancher
```
上記でするか、こちらでインストールしてください。
私はm3 macなのでApple Silliconをインストールしました。
https://rancherdesktop.io/

### 設定
インストールが終わったら、Rancher Desktopを起動します。
dockerd(moby)
Automatic
を選択（デフォルトのまま）

次をOKで進めまると起動完了します。

### 詰まった部分と解決方法
これで、起動できると思いpycharmに設定している起動スクリプトを実行すると、
```
ERROR: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
```
と出てきました。
確認していきます。
```
$docker context ls
```
でrancher-desktopにアスタリスク（*）がなかったら
```
$unset DOCKER_HOST
```
でアスタリスクが移動すると思います。
次に、
Rancher Desktopの設定で、Preferences > Appliction > Behavior の、
- Automatically start at login
- Start in the background
にチェックを入れてApplyをクリック

これで無事実行できるようになりました。
めでたく移行完了！🎊
HP作成備忘録：事業サイトのナビゲーションをスムーズにする画面遷移図を自分なりに考えてみた

## はじめに
この記事では、特定の事業サイトの画面遷移図について説明します。

ウェブサイトの構造を理解しやすくするため、各ページの役割や内容を詳しく解説します。

内容はすべて個人的な備忘録となりますこと、何卒ご容赦ください。

## どんな遷移図なのか？
この画面遷移図は、特定の事業サイトの構造を示したものです。

:::note info
**トップページを起点とし、各種情報ページやサービス内容ページへ遷移できる構成になっています。**
:::

シンプルで直感的なナビゲーションを提供し、ユーザーが求める情報に素早くアクセスできるよう設計されています。

### 画面遷移の構成

```sh
[トップ画面]
    ├── 新着情報
    ├── お知らせ
    ├── 代表挨拶
    ├── [ホーム画面] → [トップ画面] に遷移
    ├── [事務所案内]
    │      ├── ご挨拶
    │      ├── プロフィール
    │      ├── 事務所概要
    │      ├── 理念/行動指針
    │      └── アクセス（地図の表示）
    ├── [サービス案内]
    │      ├── 労働保険・社会保険の手続き
    │      ├── 給与計算・勤怠管理
    │      ├── 人事労務コンサルティング
    │      ├── 年金の請求代行・ご相談
    │      └── 各種助成金の申請手続き
    ├── [料金案内]
    │      ├── 報酬料金
    │      ├── 顧問契約
    │      ├── 就業規則、各種規定の作成・変更
    │      ├── 労働保険・社会保険の新規適用・適用廃止
    │      ├── その他スポット業務（顧問契約なし）
    │      └── 助成金申請
    ├── [お問い合わせ]
    │      └── お問い合わせフォーム
    └── [就労支援A型「xxx」]
           ├── 就労支援A型とは？
           ├── 支援内容
           ├── 利用対象者
           ├── 1日の流れ
           ├── 事業所の特徴
           ├── 利用料金
           ├── 申し込み方法
```

## トップ画面
ウェブサイトの入り口となるページで、以下の情報が含まれます。
- **新着情報**：最新のお知らせやニュースを表示。
- **お知らせ**：事務所からの公式情報や重要なお知らせを掲載。
- **代表挨拶**：代表者からのメッセージを紹介。

## ホーム画面
- トップ画面へ遷移するためのナビゲーション機能を持つ。

## 事務所案内
事務所の基本情報を提供するページで、以下のセクションが含まれます。
- **ご挨拶**：事務所の方針や理念を伝えるメッセージ。
- **プロフィール**：代表者やスタッフのプロフィール。
- **事務所概要**：事務所の設立情報や所在地。
- **理念/行動指針**：企業としての方針や行動基準。
- **アクセス（地図の表示）**：所在地の地図と交通手段の案内。

## サービス案内
提供している各種サービスの詳細説明。
- **労働保険・社会保険の手続き**：各種保険関連のサポート。
- **給与計算・勤怠管理**：企業の給与計算や勤怠管理の支援。
- **人事労務コンサルティング**：労務管理に関するアドバイス。
- **年金の請求代行・ご相談**：年金に関するサポート。
- **各種助成金の申請手続き**：助成金の取得をサポート。

## 料金案内
各種サービスの料金体系を明確に説明。
- **報酬料金**：基本的な料金プラン。
- **顧問契約**：定期契約の詳細。
- **就業規則、各種規定の作成・変更**：社内規則の作成・変更支援。
- **労働保険・社会保険の新規適用・適用廃止**：新規適用や廃止の手続き。
- **その他スポット業務（顧問契約なし）**：単発でのサービス提供。
- **助成金申請**：助成金を受けるための申請サポート。

## お問い合わせ
- **お問い合わせフォーム**：訪問者が事務所に連絡できるフォーム。

## 就労支援A型「xxx」
障がい者の就労支援を行うA型事業所の情報。
- **就労支援A型とは？**：A型就労支援の概要。
- **支援内容**：提供されるサポート内容の詳細。
- **利用対象者**：支援を受けられる人の条件。
- **1日の流れ**：支援を受ける際の1日のスケジュール。
- **事業所の特徴**：他の事業所との違いや特色。
- **利用料金**：サービスの利用料金について。
- **申し込み方法**：利用するための申し込み手順。

## まとめ
今回は個人的な備忘録的な内容となりましたが、今後も同様の投稿を続けていこうと思っています。

目標は、フロント部分を設計からデザインまで1人で挑戦し、素敵なホームページを作成することです！
Phalconについて



## はじめに
ちょっとした切欠で、Phalconというフレームワークの存在を知りました。
Laravel以外のフレームワークを調べた際は、Phalconについてはノーマークだったこともあり調べていなかったので、Phalconについて調べました。

## Phalconとは
2012年にリリースされたC拡張として記述されたフルスタックPHPフレームワークで、他のフレームワークに比べて処理速度が速く、また、オーバーヘッドやメモリ使用量が少ないことが特徴です。
バージョンが1.xの頃はC言語で開発されていましたが、保守などの問題から、バージョン2以降はZephirという言語で殆ど開発されています。

## Zephirとは
Zephir(Zend Engine PHP Intermediateという単語の短縮形)とは、PHPの拡張モジュールをC言語を書かずに開発できる言語で、Phalconの開発チームによって作られました。
C言語の知識がなくともPHP拡張が作れ、PHPスクリプトではなく、ネイティブなCコードにコンパイルされるため、通常のPHPコードより高速に動作するようです。Phalconが高速な理由の一つは、Zephirで開発されているから、と言えるでしょう。

## Phalconの機能はどんなものがあるか
* MVC、HMVCアーキテクチャ
2012年リリースということもあり、他のフレームワークに倣ってMVCパターンが搭載されています。また、HMVCも使用できます。
他にも
* DI(Dependency Injection)
* ORM(Object-Relational Mapping)
といった機能も搭載されています。

また、テンプレートエンジン(Volt)という独自のテンプレートエンジンもあり、こちらは高速に動作して、ビューを簡単に作成出来るテンプレートエンジンです。SymfonyのTwigに似ているようなので、そちらが扱えるとさほど苦労せずにこのテンプレートエンジンを扱えそうです。

他に、PHQLというPhalcon クエリ言語があり、SQLのように記述出来るオブジェクト指向のクエリ言語です。SQLに近い構文でクエリを記述することができ、クエリ結果をモデルのオブジェクトとして返す特徴があります。

## Phalconで開発する際にネックになりそうな点
ここまで調べたところで、Phalconは他のフレームワークに比べて軽量で動作が高速である点を意識して開発されていたことが分かりましたが、同時にPhalconを使用する際にネックになりそうな点もありました。

* ドキュメントや情報が少ない
公式のドキュメントはありますが、LaravelやSymfonyなどのフレームワークに比べて情報が少ないです。また、Laravelなどと比べてPhalconを扱う人が少ないので公式ドキュメント以外で情報を集めるのも苦労する場面がありました。そのため、学習には一苦労しそうです。

* 導入が一手間かかる
他のフレームワークのようにComposerで簡単にインストールできるわけではなく、サーバーにPhalconの拡張をインストールする必要があります。また、php.iniファイルを編集する必要があり、その反映のためにサーバーを再起動の必要があります。

## まとめ
Phalconというフレームワークは処理速度が速い「らしい」というのは調べてパッと出てきましたが、速い理由が他のフレームワークはPHPのスクリプトとして実行するのに対してPHP拡張として動作するからだと知れてよかったです。
また、情報を集めるのに苦労しそうだ、と知ることが出来たのも良かったです。
現在はPhalconを本格的に使用していませんが、本格的に使用する際には、行った作業を一つ一つ備忘録として記録するようにしたいですね。


## 参考資料
[Phalcon Framework: High Performance PHP Framework](https://phalcon.io/en-us)


## 採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！

少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！

お問い合わせはこちらから↓
[https://official.assisteng.co.jp/contact/](https://official.assisteng.co.jp/contact/)
「GeminiとChatGPTのどちらが...？各ツールの特長を徹底分析」様を参考に、私も追加で???徹底分析しました。

# オリジナル
tamikina000 様

https://qiita.com/tamikina000/items/7a0a93a5bfa2c06f78ff

(私のパクリ)＞今後、効果的に生成AIを活用したいと考えている方はぜひ参考にしてみてください。

# ???分析方法。質問文で
・ChatGPT先生へ
```
ChatGPT先生はGemini先生をどのように評価されていますか。ChatGPT先生とGemini先生の違いを教えて下さい。
```
・Gemini先生へ
```
Gemini先生はChatGPT先生をどのように評価されていますか。Gemini先生とChatGPT先生との違いを教えて下さい。
```
(回答抜粋は、次のセクションで)
**もし、ChatGPT先生とGemini先生だけで会話が盛り上がったら、私の居場所が無くなるかも。**

# ChatGPT先生の回答抜粋
>...ChatGPT（私）とGemini（GoogleのAI）の違いを比較すると、...
>...Geminiは情報検索や**マルチモーダル** 処理に強い。,,,

・私も気になっていました。
**・ChatGPT先生が解けなくて、Gemini先生が解ける問題をたまに見ます。**
(参考)YouTubeの私のコメントより
【正答率1%】三角関数の超難問（有名な解法です）＜ PASSLABO 様
>(Sin[x]+2Sin[y])/(cos(x)+2cos(y)+5)
上の式をwolframalphaに貼り付けました.最小値と最大値がでました。
(本日の?)ChatGPT先生は調子が悪い。(Sin[x]+2Sin[y])/(cos(x)+2cos(y)+5) 最大値
(本日の?)Gemini   先生へ。                     (Sin[x]+2Sin[y])/(cos(x)+2cos(y)+5) 最大値
https://youtu.be/jxZbc91xf_Q?list=LL

# Gemini先生の回答抜粋
>...Geminiは、マルチモーダルな情報を扱うことを前提に設計されています。一方、ChatGPTは、主にテキストベースの処理に強みを持っています。
...自然な会話、創造的な文章生成、多様なテキスト生成...

# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

https://qiita.com/mrrclb48z/items/b6351b48e47bcf6265c0

# いつもと違うおすすめです。
【ショートカットの達人】 仕事効率化のためのショートカット検索アプリ

こんにちは！
私は日々業務でパソコンと格闘しており、効率よく仕事をするためにショートカットをできるだけ覚えたいと思っています。しかし、使わないとすぐに忘れてしまう...

ショートカット一覧マウスパッドや壁紙といった便利なものもありますが、自分が実際に知りたいショートカットが載っていなかったり、使いたいときにいちいちWeb検索するのも手間です。そこで、サクッとショートカットを検索できるWebアプリを作ってみました！

## WEBアプリ完成品:dizzy:

https://script.google.com/macros/s/AKfycbwMennAKJQST4An4ZjtizEgUoYBAYnpHmUo-3orIq4aLMYt6sTcOqMgY-XfKiS1UIBCPQ/exec

※試作品の為、ショートカットのカテゴリは整理途中。登録は現在中止しています。

## このアプリで何ができるの？

シンプルに言うと、使いたいアプリのショートカットをサクッと調べられ、
自分でショートカットも記録することができます。

名付けて<b>【ショートカットの達人】</b>✨

**できること**
* 📱 使いたいアプリのショートカットをパパッと検索
* 🔍 メニュー別に「コピー系」「編集系」などカテゴリで絞り込み
* ✏️ 新しく見つけたショートカットを追加・保存
* 📋 「全部見せて！」モードでアプリごとのショートカット一覧表示

## 使った技術

* Google Apps Script（GAS）
* Google スプレッドシート（データベースとして活用）
* HTML / CSS（フロントエンド）
* ChatGPT（コード生成支援）

## 作り方

### 1. 検索の元データをスプレッドシートで作成 📊

![スプレッドシートのデータ構造](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/4296c107-8a22-4eee-9584-6642035dbbd4.png)

スプレッドシートには以下の列を設けています：
- アプリ名（Excel、Word、Chrome など）
- メニュー（ファイル操作、編集、表示など）
- 操作内容（コピー、貼り付け、全選択など）
- ショートカットキー（Ctrl+C、Alt+Tab など）

### 2. Webアプリ用コードの作成 📝

Google Apps Script(GAS)で2つの主要ファイルを作成します。

**１．検索用のGASコード（コード.gs）**  
Webアプリを動作させるバックエンドスクリプト

**２．Webアプリ表示用のHTMLコード（index.html）**  
ユーザーインターフェースを提供するフロントエンド

![Google Apps Scriptの編集画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/03aec222-9a09-4865-967f-7ca43d8a6e73.png)

各コードは、ChatGPTなどの生成AIを活用して効率的に作成しました。

### 3. 階層構造で直感的な検索を実現 🔍

![階層構造による検索](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/a73f480c-f1d4-4012-8669-a164904d64d9.png)

単にアプリの一覧を表示するだけでは、目的のショートカットを見つけるのが大変です。
そこで、スプレッドシートのデータを**アプリ名 ➡ メニュー ➡ 操作内容**という階層構造で整理し、ユーザーがステップバイステップで絞り込める設計にしました。最終的に必要なショートカットだけが表示されるので、効率的に情報を見つけられます。

### 4. ユーザー自身によるショートカット追加機能 ✏️

![ショートカット登録画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/f6fc9f41-ffae-43ae-9df0-cbb931764341.png)

新しく発見したショートカットや、特に覚えておきたいショートカットをアプリ上から直接登録できる機能を実装しました。アプリを選択し、各項目（メニュー、操作内容、キー組み合わせ）を入力して登録ボタンを押すと、元データのスプレッドシートに自動的に追加されます。

### 5. 「全部見せて！」機能で一括表示 📋

「このアプリのショートカットを全部見たい」というニーズに応えるため、アプリ名をクリックするだけで全ショートカットを一覧表示する機能も追加しました。

![全ショートカット一覧表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/2d5e78c0-d1bf-4b6e-b83c-4a0ebe156d36.png)

## 作ってみた感想 🎉

今までありそうでなかった、自分専用のショートカット検索Webアプリを作ることができました。
特にこだわった点は

- 操作手順をシンプルに最小化
- スマホでもパソコンでもサクッと調べられるレスポンシブデザイン
- 自分が覚えたいショートカットを登録・管理できる柔軟性
- 覚えたショートカットはスプレッドシートから削除して、常に「覚えるべきリスト」を最新に保てる

また、スプレッドシートのデータ内容を変更すれば、英単語帳や資格試験の暗記用アプリなど、様々な学習ツールとしても応用できると考えています。

## 今後の展望 💭

* 検索APIや生成AIのAPIを組み込んで、より高度な検索機能を追加
* ショートカット登録画面のUX/UI改善
* デザインをよりモダンで使いやすいものに刷新（現状はシンプルすぎる...😅）
* よく使うショートカットのお気に入り登録機能
* ユーザー別プロファイル機能の追加

生成AIの活用により、WebアプリはGASを使って比較的簡単に作れるようになりました。完全自動生成のAIツールもありますが、自分専用の便利ツールを作るなら、GASとスプレッドシートの組み合わせがコスト面でも開発スピードの面でもちょうど良いバランスだと実感しています。

この「ショートカットの達人」ぜひご自身の業務に合わせてカスタマイズし、最強の相棒としてご活用ください！
[Power page]「You don't have access to this 」エラー対応について

# Power Pagesの「You don't have access to this」エラー出たときの対応方法について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322851/c94bd584-4426-4626-aa2d-b0fdd91862c7.png)

ヘッドフォン猫ちゃん（Power Pages Cat？）が出てきたときの対応が、
かなり困難で、サポート問合せまで使って対応を進めました。

開発環境などで、再現すればいいのですが、再現せず、
お客様環境でかなり制限されている本番運用しているとほぼお手上げです(´；ω；`)ｳｩ
※自分の開発力の無力さを感じた..

結局のところ、自分で発見したのですが、
本来、Pagesのテーブルの列として設定されているはずの「取引先企業（Account）」が設定されておらず、
取引先企業アクセスにしていたので、そんなデータないぞという、エラーでした(;´д｀)トホホ

備忘録として残しておきます。
尚、サポートから以下の回答も可能性として残しておきます。

# サポートからの回答
■事象のエラーから想定されるエラーのパターン：

1. 認証エラー : ユーザーがログインしていない、または認証が失敗しています
2. アクセス権限の不足 : ユーザーのアカウントに必要なアクセス権限やロールが付与されていない
3. セッションの問題：ユーザーのセッションが期限切れになっているか、無効になっている
再度ログインするか、ブラウザのキャッシュをクリアで解消が見込まれます
4. コンテンツの制限：アクセスしようとしているコンテンツが制限されているか、削除されている


# (参考ページ) テーブルのアクセス許可を構成する
https://learn.microsoft.com/ja-jp/power-pages/security/table-permissions#view-table-permissions
統計検定1級　2021　統計応用(理工学)　問4　解説

![img20250314_11402390.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/b243f1e1-d54b-4477-9209-717815410582.jpeg)
![img20250314_11404900.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/963c4567-f980-4dbe-8d2b-28bd520f56a4.jpeg)
![img20250314_11412045.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/d14766bb-69e5-4b3b-842b-6b92ffd7b047.jpeg)
![img20250314_11414569.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/cb31dc1e-4981-4820-920e-5290e901ae64.jpeg)
統計検定1級　2021　統計応用(理工学)　問1　解説

![img20250314_09400444.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/91a60c51-9dbb-4250-b675-8cfb6bf99f3a.jpeg)
![img20250314_09402968.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/d65f72a5-3c47-463b-adf9-46344af8a00f.jpeg)
kustomizeのConfigMapGeneratorを使ってる時に簡単にConfigMapの名前を取る方法

# 要約

```
kubectl get deployment 'your deployment name' -o jsonpath='{.spec.template.spec.containers[*].env[?(@.name=="YOUR_TARGET_ENV_NAME")].valueFrom.configMapKeyRef.name}'
```

# 対象読者

* kustomizeのConfigMapGeneratorを使ってる方

# はじめに

kustomize便利ですね。複数の環境のk8s manifestをまとめられますし。ただConfigMapGeneratorを使うと少し面倒になることがありますよね。

環境変数を変更してrollout restartしたいとき、 `kubectl edit configmap` などを使って環境変数を変更すると思います。ConfigMapGeneratorを使っているとこのConfigMapの名前を取るのが面倒になります。ConfigMapだと設定した名前をそのまま使えますが、ConfigMapGeneratorだとそうはいきません。ConfigMapGeneratorは毎回名前を生成するためです。名前の末尾に接尾辞がはいるためです。

名前をさがすとなると `kubectl get pods -o yaml` や `kubctl get deployment -o yaml` などでmanifestを目視しなければいけなくなります。毎回やるにはなかなか面倒です。

そこで `-o jsonpath` オプションです。このオプションは取得したい要素を [jsonPath](https://kubernetes.io/docs/reference/kubectl/jsonpath/) で指定できます。 `less` などを使って調べるよりより手早く対象を見つけられます。

# もうすこし細かい説明

要約のjsonPath部分を抽出すると以下になります。

```
.spec.template.containers[*].env[?(@.name=="YOUR_TARGET_ENV_NAME")].valueFrom.configMapKeyRef.name
```

大体の部分はなんとなくわかるかなおもいます。以下の部分が少し分りづらいかなと思うので追加で説明します。

* `.env[?(@.name=="YOUR_TARGET_ENV_NAME")]`

こちらはfilterという機能になります `?()` で囲まれた部分がフィルタです。 `@` で自分の要素を指定し、その子要素の `name` が `==` で指定された名前の要素のみを取り出します。

# まとめ

DeploymentからConfigMapの名前を取る方法を記載しました。
基本、概要部分をコピペして適切に修正して使っていただければと思います。
VMにDockerでCUDA環境を作成するまでの手順

## 本記事の趣旨
基本的に本記事は，研究室内の引き継ぎを目的として資料作成しております．
自分用にも残したいので記事として公開します．

## 環境
学校から提供されているVMを利用します．

OS: Ubuntu 22.04.3 LTS x86_64
CPU: Intel(R) Xeon(R) Gold 6338 CPU @ 2.00GHz
GPU: NVIDIA 07:00.0 NVIDIA Corporation Device 2331
Memory: 684MiB / 62723MiB 

## Dockerを用いたCUDA環境の作成
学習に利用するCUDAとcuDNNの導入手順を示します．
nvidia driverはすでにあたっているので特に触る必要はありません．今回はDockerを利用して仮想環境内でCUDAとcuDNNを導入します．

### Docker Engine のインストール
dockerのインストールを行います．

```terminal:terminal
sudo apt update
sudo apt install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
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
sudo apt update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

これでDockerのインストールが完了するはずです．
以下のコマンドで確認してください．
```terminal:terminal
sudo docker version
```
バージョンが表示されれば成功です．

### NVIDIA Container Toolkitインストール
Docker内でのGPU動作に必要なNVIDIA Container Tooolkitをインストールします.

まず，以下のコマンドでリポジトリ登録を行います．
```terminal:terminal
 curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | \
    sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-keyring.gpg   && curl -s -L      https://nvidia.github.io/libnvidia-container/stable/deb/nvidia-container-toolkit.list | \
    sed 's#deb https://#deb [signed-by=/usr/share/keyrings/nvidia-container-toolkit-keyring.gpg] https://#g' | \
    sudo tee /etc/apt/sources.list.d/nvidia-container-toolkit.list
```
登録したリポジトリを反映してnvidia containerをインストールし，Dockerデーモンを設定し再起動を行います．
```terminal:terminal
sudo apt update
sudo apt install -y nvidia-container-toolkit
sudo nvidia-ctk runtime configure --runtime=docker
sudo systemctl restart docker
```

以上で環境構築は完了となります．
CDK Destroy時に不要なリソースを残さないようにしよう

# はじめに
最近CDKを触っていて、```cdk destroy```でスタックを削除したにも関わらず、料金が発生していることがありました。
原因は、スタック削除後にもリソースが残ってしまっていたことでしたので、今回はその対応について記載をしていきます。
今回対応したリソースはS3とRDSになります。


## 1. S3
以下のようにデフォルト値でS3バケットを作成すると、スタックを削除してもS3バケットは残る設定となっています。
※DeletionPolicyが ```Retain```のため
```typescript
    new s3.Bucket(this, 'Bucket', {
    });
```

スタック削除時にバケットも削除するには以下のようにパラメータを追加します。
これにより、DeletionPolicyが ```Delete```に変更され、スタック削除時にバケットも削除する挙動となります。
```typescript
    new s3.Bucket(this, 'Bucket', {
        removalPolicy: cdk.RemovalPolicy.DESTROY,
    });
```

ただし、S3バケットはバケット内のオブジェクトが空でないと削除ができません。
そのため、スタックが削除される際に、すべてのオブジェクトを自動的に削除されるよう```autoDeleteObjects```パラメータを追加します。
```typescript
    new s3.Bucket(this, 'Bucket', {
        removalPolicy: cdk.RemovalPolicy.DESTROY,
        autoDeleteObjects: true,
    });
```

:::note info
```autoDeleteObjects: true```を設定することにより、削除処理用のLambda関数が自動生成されます。
スタック削除時にLambda関数自体は削除されますが、Lambdaの実行ログ(CloudWatch ロググループ)は削除されないようでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780496/fe9027fa-9a71-4672-b760-b15ccb89a5be.png)

そのため、現在は必要に応じてスタック削除後に手動でロググループを削除するようにしています。
:::

## 2. RDS
デフォルト値でRDSのデータベースを作成すると、スタックを削除時に最終スナップショットが取得され、料金が発生します。
※DeletionPolicyが ```Snapshot```となっているため。
スナップショットを取得せずに削除するには、以下のようにremovalPolicyを```DESTROY```に設定します。
```typescript
    new rds.DatabaseInstance(this, 'RdsInstance', {
      removalPolicy: cdk.RemovalPolicy.DESTROY, // default: SNAPSHOT
      engine: rds.DatabaseInstanceEngine.mysql({
        version: rds.MysqlEngineVersion.VER_8_0_40,
      }),
      vpc: props.vpc,
      vpcSubnets: {
        subnetType: ec2.SubnetType.PRIVATE_ISOLATED,
      },
    });
```
これによりDeletionPolicyが ```Delete```に変更され、スタック削除時にスナップショットを取得せずにRDSインスタンスが削除されるようになります。

# まとめ
CDKは、少ない記述量でリソースを設定できるだけでなく、リソース間の権限を自動的に適切な設定を行ってくれるため、細かく記述する手間を省ける点が便利です。
一方で、コードに明示的に記述していないリソースが生成されることもあり、その把握が難しいと感じることがあります。
今回の対応についてはCloudFormationの仕様に関する部分が大きかったですが、ナレッジを蓄えられてよかったです。
Map の辞書順ソートでハマらない方法

Paizaの問題を解いていたら、「攻撃された人のダメージを記録し、名前の辞書順で出力せよ！」という指示に見事にハマった。`Map` は順番を保持しないので、そのまま `forEach()` すると順番が崩壊する！辞書順って何！？ `Map` にソート機能がない！？試行錯誤の末、「キーを配列化してソートすればいい」 という学びを得たので、その知見をシェアする！

<br>**問題概要**
攻撃された人のダメージを記録し、名前の辞書順で出力。

入力例:
```
3　　　　　//n
PAIIZA
PAIZA
PAIIIZA
2　　　　　//m
PAIIZA 2
PAIIIZA 3
```
出力例:
```
3
2
0
```


<br><br><br>**NG例**: Map に頼りすぎたコード
```js
const damageMap = new Map();
for (let i = 1; i <= n; i++) {
    damageMap.set(lines[i], 0);
}
for (let i = n + 2; i < n + 2 + m; i++) {
    let [person, damage] = lines[i].split(" ");
    damageMap.set(person, damageMap.get(person) + Number(damage));
}
damageMap.forEach((value, key) => console.log(value)); // 辞書順にならない！
```
ミスのポイント
✅ Map の挿入順に保証されている（辞書順にならない）

<br><br>**OK例1**: `Array.from()` でソート
```js
const sortedNames = Array.from(damageMap.keys()).sort();
sortedNames.forEach(name => console.log(damageMap.get(name)));
```
✅ Array.from() でキーを取り出し、sort() で辞書順ソート
✅ get() を使い、順番に出力


<Br><br>**OK例2**: `slice()` で無駄を省く
```js
const sortedNames = lines.slice(1, n + 1).sort();
sortedNames.forEach(name => console.log(damageMap.get(name)));
```
✅ すでに lines に名前があるので Map.keys() 取得不要
✅ キーアクセス回数が減り、わずかにパフォーマンス向上

<Br><br>**まとめ**
Map は順序を保証しない！辞書順ソートが必要なら、

・Array.from(damageMap.keys()).sort()
・もともとのリストを slice().sort() で利用

これで Map の罠にはまらない！

[僕の失敗談と解決話！](https://paizabeginner.wordpress.com/2025/03/14/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%e5%90%8d%e5%89%8d%e9%a0%86%e3%81%ab%e3%83%80%e3%83%a1%e3%83%bc%e3%82%b8%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%9b%e3%82%88%ef%bc%81map/)
【読書感想】イシューからはじめよ――知的生産の「シンプルな本質」

ランニングしながらAudibleで聴いた本の感想です。
本のまとめというより、自分が心に残ったことを3つだけ書いてます。
とりあえず思ったことをメモするのが大切と思い、なるべく30分以内で書き上げています。

# 読んだ本

イシューからはじめよ――知的生産の「シンプルな本質」
安宅和人 (著)

個人的には若手社会人にベースとして読んでほしい、名著だと感じました。（個人的満足度３／３、一般的なおすすめ度３／３）
仕事は全部が全部問題解決ではないとも思いますが、本書の考えが生産性のベースだと思うため、必ず必要になる概念かなと思いました。

# 心に残ったこと

## イシュー度×解の質

世の中には大小様々な問題・課題があります。しかし、それらの問題は「今じゃなくていい」というものが大半で、今、取り組むべき問題は2%とのことでした。また、解が出るのは1%とのことでした。
そのため、問題に取り組む前に、その**問題の重要度（イシュー度）を正しく評価すること**が重要です。

さらに、取り組む問題を決めたら、その問題に対して正しくアウトプットを出す・質の高い解を出すことが重要とのことです。

この「解の質」と「イシュー度」の両立が重要で、生産性が高い人とは「解決すべき問題に、集中して取り組んでいる人」です。**無駄な仕事をせず、中途半端な解を出さないこと**こそが、生産性の本質だと感じました。

逆に、「解を出さなくていい問題」を98個思いつかない・言われた問題に取り組んでいる段階では、問題発見力がまだまだ、と考えることもできるのかなと思いました。

## 「悩む」と「考える」の違い。仮説ドリブン

筆者いわく、「悩む」は答えが出ないことに脳を使うことで、「考える」は答えが出る前提で取り組む行為、とのことです。
**仕事の際は「悩む」というのは時間の浪費なので、「考える」をすべき**とのことでした。

上記の「悩む」を避けるのに必要な概念として、「仮説ドリブン」の重要性・手法がこの本では紹介されています。「**問題に取り組むときは、仮説から始めよ**」、とのことです。
最初に仮説を立てれば、それを証明する手法・アイデアを出して、手を動かして解を出すことができます。一方、仮説がない場合、「どうしよう」を堂々巡りして「悩む」という状態になりがちで、これは避けるべきです。

また、最初に立てる仮説の質は高いほど良い、初心者などで仮説の質が低いときはベテランに聞くと良い、とのことでした。
（若干理系みたいな話になりますが、、）最適化問題などでは初期状態が最適状態に近いと、すぐに最適状態に収束します。この概念の応用で、「よい仮説を立てる」ことが、少ない手間で質の高い解に辿り着くコツのかなと感じました。

## 分析は比較・構成・変化

「分析」という作業には、比較する、構成を分解する、変化を見る、の3つが主にあるそうです。
私はデータ分析を仕事にしている・・・ところがありますが、恥ずかしながら普段の分析は思いつきで仮説を立てていたので、この「3通り」を軸に考えることで、**MECEに分析軸を設定**できそうだなと思いました。
10倍の高速化をするTypeScript7はなぜGoを選んだのか

こんにちは！秋霜堂の石川です。
数日前、衝撃的なニュースが飛び込んできました。Microsoftが発表したTypeScript7です。
https://devblogs.microsoft.com/typescript/typescript-native-port/

## TypeScript7 コンパイラ言語の変更
最大の変更点はTypeScriptコンパイラがJavaScriptからGo言語に移行したこと。つまり、TypeScript 6（JavaScript版）とTypeScript 7（Go版）が共存する形になります。この大胆な変更は、特に大規模プロジェクトでのスケーラビリティ問題を解決し、処理速度を劇的に向上させるために行われたのこと。

初期のテスト結果では新バージョンは一部のケースで処理速度が10倍も向上しているとのことです。これは実用面で大きな意味を持ち、例えば開発体験の大幅な改善が期待できそうです。最新のハイスペックCPUを持っていない開発者や、性能が控えめなノートPCを使っている方には特に朗報でしょう。

小規模なアプリケーションだと恩恵が少なそうですが、例えば、Next.jsで100ページ、1000ファイルを扱うプロジェクトを考えるとその差は歴然かと思います。

## なぜGo言語が選ばれたのか
なぜRustなど他の高性能言語ではなくGoだったのでしょうか？

それは「新しいコードベースを可能な限り互換性のあるものにし、構造を維持する必要があった」ｔで、Goのコーディングスタイルは既存のTypeScriptコードベースのパターンと非常に似ており移行作業をスムーズに進められる利点が買われたそうです。

また、TypeScriptコンパイラでは多態的なノードを含むツリー構造の処理や上下方向のトラバーサルといったグラフ処理が頻繁に行われます。Goはこのような処理を効率的に行うことができるため、JavaScript版のコードに近い形で実装する必要があることから選ばれたのでしょう。

## 新バージョン導入時の注意点
大規模な変更にはトラブルはつきものです。

### 未成熟なコードベース
このプロジェクトは公開されてからまだ日が浅く、TypeScript 5.8などの古いバージョンと比べるとコードベースの成熟度が低いのは確実です。例えば、新しいTypeScript 7についてChatGPTなどに聞いても精確な回答は期待できませんし、Qiitaなどでの情報も十分とは言えません。

問題に直面した人が「パイオニア」として新たな発見をインターネットへ共有する立場になるかもしれないということで、これは開発者として刺激的ではありますが既存プロジェクトでは一定のリスクをがついてくることを理解しておく必要があります。

### Go言語の導入
これは長所かつ短所ですが、JavaScript向けに作られた膨大なコードやモジュールが存在する中でコンパイラの基盤となる言語が変わるということは、Go言語特有の課題がウェブ開発の世界に持ち込まれることを意味します。

Go言語の詳細について詳しいWeb系エンジニアはおそらく少ないため、必然的に新たな課題や問題の発生は不可避と言えそうです。

## まとめ
個人的には非常に革新的で魅力的な変更で期待しています。処理速度は早いに越したことがないということはもちろん、Webの世界にJavaScriptの枠を超えた他言語の新しいアイデアを取り入れることにも繋がりますし、何しろコミュニティの活発化が期待できます。

---

秋霜堂株式会社はWebを中心としたソフトウェア開発企業です。エンジニアとして案件を探している方 / 発注先を探している方など、少しでも気になった方はぜひお問い合わせください！
https://syusodo.co.jp
365日目 真の社畜となった僕たち

## 概要
[365 日後に〇〇する社畜の成長日記](https://qiita.com/QiiTaro_/items/a48fa846d7316ad5a45c)
IT 企業に就職した新米社畜3人（途中で2人増員）が日々の成長日記を綴って早1年。
僕たちはこの1年間の社会人経験を通して真の社畜となりました。その中で学んだこと思ったことを各々思い思いに書いていこうと思います。

## 社畜たち
### 社畜 S
今思うと、365日間とにかくAWSとTerraformを触り続ける日々でした。
どちらも完全に0からのスタートでしたが、他の言語などに触れることがほとんどなかった分AWSとTerraformの学習に本腰を入れることができたので、Terraformもなんとなくわかるようになったし、AWS試験もAssociate試験を３種も合格することができました！

AWS仙人、Terraform仙人にはまだ程遠いですが、AWS一般人くらいにはなれたかと思います。
これからも仙人目指して資格学習、技術習得に力を入れて立派な**~~社畜~~**エンジニアになれるように頑張っていきたいと思います！

### 社畜 M
個人的には社畜たちのなかでAWSを触ってないのは僕だったと思いますが、いざ触ってみると新しいことを知れたりする日々でした。
社畜Sも言っていましたが私も同じで言語のひとつであるTypeScriptを触り続けていたのでTypeScriptを１から学び多くの知識を得ることができました。そして、自分が知ったことややったことをここでアウトプットしてさらに知識として取り込めた気がします。

資格に関してはうまくいきませんでしたが、エンジニアとしては少しは成長できたと思いたいです！
今後もエンジニアとしての技術や資格取得に日々之精進（ひびこれしょうじん）頑張っていきます！

### 社畜 L
入社前はSEにはいろいろ種類があると知識としては知っていましたが、
そうは言っても全部一緒だと考えていました。
ですが、実際に仕事をしてみるとそれぞれに役割が全く異なり、
それぞれの作業が密接に関連していることが分かりました。
自分はその中で言うとインフラエンジニアとしての作業が多かったですが、
バックエンドの構築等の作業も経験できたことでインフラエンジニアとシステムエンジニアの作業連携について学んだことが、この一年で学んだ最も大きなことだと考えています。

### 社畜 ♀
入社前はほぼ素人で覚えが悪かったらどうしようとか理解出来なかったらどうしようとかの不安がありましたが今はなんとか食らいつけてはいるのでもっと余裕が出せるようにもっといろいろな言語やフレームワークなどをもっと知りたいと常日頃感じています。まだまだ未熟者ですが力はついてるとは自負しているので向上心を忘れずもっともっといろいろなことに触れて自分の力にしていきたいと考えております。
きっと3年後はできるプログラマーになってるだろうことを願いながらこれからも頑張っていきます。

### 社畜 ママ
入社前はエンジニアの仕事をこなすことができるかとても不安でしたが、事前に勉強していたことを生かすことができたり、失敗を繰り返してもあきらめずにトライしているといつの間にか解決できたりして、日々成長を感じています。
PHPとVue.jsのwebアプリ開発の実務と今携わっているFlutterでスマホアプリの保守・運用の実務を通して、チーム開発の流れ、バックエンドからフロントエンドへの値の渡し方や値の管理、フロントエンドの非同期処理実装、Flutterのスマホアプリ開発、Android,iOSそれぞれのアプリリリースなど、たっくさんの経験をさせていただきました。
今後もこれまでの経験を活かしながら、新しい壁にぶつかっても試行錯誤して、泥臭く成長していきたいです。

## 終わりに  
社畜というのはホント冗談ですが、ほとんど何も知らない状態からスタートし、今では先輩社員たちと一緒に仕事ができるまでになって毎日充実しています。
SEになりたいと思っているそこのアナタ！私たちと一緒に学んでいきませんか？ぜひいつでもご連絡お待ちしています💌
Starting point of IT journey 

When i feel start my IT feild journey its amazing and wonderful point.First of all i m foreigner in japan tokyo and also hard to struggle with every step everythings but its feel risky and enjoy.And i decide i want to go my passion way then i started learn from youtube everyday 2 hours its hard for me from save the time others parts so but its hard not to impossible and i Write first one paragraph about my aim goal in IT field then i made one Roadmap i choosed in Finally Web Development And i had heard little from social media too and feeling fun too. then i need to start one roadmap like first frontend Html Css Javascript But i m zero level nothing to know before about IT faculties so its really challenges for me.I didnt think about future like In IT specially in japan i cant get job, i have nihongo problem, IT is really tough subject, Its need motivate And its can also earn good income nothing juat i thought about my passion and goal and i did start from Html language ...Finally i started and i didnt seen before like html tags and codes programming languages its feeling different planet.
SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo for mysql failed: 

# Laravelのマイグレーション時に発生したエラーとその解決策

## 発生したエラー

```bash
php artisan migrate
```
laravelで上のようにマイグレーションをしようとしたら以下のようなエラーに出会した。

![スクリーンショット 2025-03-13 22.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4034432/a1766ca1-84b7-4152-8bf2-0c11870e407c.png)

この問題は、Laravel の migrate コマンド実行時に MySQL データベースに接続できないことが原因のようだ。エラーメッセージ php_network_getaddresses: getaddrinfo for mysql failed は、mysql というホスト名が解決できないことを示している。

## 解決策
結論から述べると以下のように実行コードを変更したらうまくいった。

```bash
./vendor/bin/sail artisan migrate --path=database/migrations/2025_03_08_132630_add_test_column.php
```
2025_03_08_132630_add_test_column.phpの部分は任意のファイル名にして個別でマイグレーションを行うと以下のようにうまくいった。

![スクリーンショット 2025-03-14 17.13.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4034432/bd8410b7-9747-40c3-ad73-56647632544b.png)

データベースの問題なので、.envファイルのDB_HOSTの名前が問題かもしれないが今後の課題とする。
🚀 LINE集客マニュアルサイト構築！使いやすさ＆メンテナンス性を両立💡

![LINE集客システムのマニュアルサイト.jpg](https://yushiyamamoto.vercel.app/images/2.webp)

[LINE集客システムのマニュアルサイト](https://libot-document.vercel.app/)

## LINE集客システムのマニュアルサイト構築プロジェクト ～ユーザーフレンドリーな情報検索システムの実現～

本記事では、私が携わった「LINE集客システムのマニュアルサイト構築」プロジェクトについてご紹介します。ユーザーが必要な情報をスムーズに検索できることを第一に考え、UI/UXの充実とメンテナンス性を両立させるために、最新のWeb技術を活用してサイトを設計・構築しました。

---

## プロジェクト概要

- **プロジェクト名**: LINE集客システム マニュアルサイト構築  
- **目的**: LINEを活用した集客システムの運用マニュアルを、ユーザーが直感的に検索できるサイトとして提供  
- **背景**: LINE公式アカウントを用いた集客施策が各業種で注目される中、システムのマニュアルや運用方法を分かりやすく整理し、利用者の業務効率化をサポートするため

---

## プロジェクトの目的と背景

多くの企業がLINE公式アカウントを活用して集客に成功していますが、システムの効果的な運用には、しっかりとしたマニュアルが不可欠です。今回のプロジェクトでは、以下の点を重視しました。

- ユーザーが必要な情報にたどり着きやすい設計
- 社内外の利用者がすぐに最新の運用手法を理解できるようなコンテンツ構成
- 将来的な機能追加や改修を容易にする柔軟なアーキテクチャ

---

## 採用技術とその理由

プロジェクトでは、最新のフロントエンド技術や開発ツールを活用して、効率的かつ高品質なサイト構築を実現しました。以下の技術スタックを採用しています。

| 技術            | 特徴・活用理由                                                                                                                                  |
|-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| **Vue.js**      | 動的なコンポーネント設計を可能にし、ユーザーの操作に対するレスポンスの良いインターフェースを実現。                                                 |
| **Vitepress**   | ドキュメントサイトやマニュアルの構築に特化しており、シンプルで高速な静的サイトジェネレーターとして活用。                                           |
| **TypeScript**  | 型安全性を高め、開発中のバグを未然に防ぎ、より堅牢なコードベースの構築をサポート。                                                             |
| **Tailwind CSS**| ユーティリティファーストなCSSフレームワークを採用することで、スタイルのカスタマイズが容易になり、統一感のあるUIデザインの実現に寄与。                 |
| **Docker**      | 開発環境や本番環境のコンテナ化により、環境依存の問題を解消し、スムーズなデプロイと運用を実現。                                                     |

---

## 開発プロセスと設計のポイント

### ユーザー体験を重視した情報設計

- **直感的なナビゲーション**: ユーザーが迷わず目的の情報に辿り着けるよう、シンプルかつ論理的なメニュー構成を採用。
- **レスポンシブデザイン**: デスクトップだけでなく、スマートフォンやタブレットからも快適に閲覧できるレイアウトを実現。

### 各技術の役割と統合

- **Vue.js と Vitepress**  
  ユーザーが閲覧するコンテンツは、動的な部分をVue.jsで実現しつつ、ドキュメント全体の生成はVitepressに任せることで高速表示を可能にしました。

- **TypeScript による安心設計**  
  プロジェクト全体にTypeScriptを導入し、型チェックを通じてコードの安定性を向上。これにより、将来的な機能追加時にもリファクタリングが容易になりました。

- **Tailwind CSS での効率的なスタイリング**  
  デザインの統一性と迅速な開発を両立するため、Tailwind CSSを利用してプロジェクト全体のスタイルガイドラインを確立しました。

- **Docker で再現性のある環境構築**  
  開発から本番環境まで一貫した動作を保証するため、Dockerコンテナを利用し、環境依存性のリスクを最小限に抑えました。

---

## 導入効果と今後の展望

### 導入効果

- ユーザーからは「必要な情報へのアクセスが迅速」「操作が直感的で使いやすい」というフィードバックを多数獲得
- 社内の運用コスト削減に寄与し、トレーニング時間の短縮と業務効率の向上を確認

### 今後の展望

- **機能拡張**: ユーザーのフィードバックをもとに、FAQの自動更新やチャットサポートの導入検討
- **UX/UI 改善**: 継続的な改善を図り、さらに使いやすく、魅力的なインターフェースを目指す
- **コンテンツの充実**: 最新の集客事例や活用ノウハウを逐次更新し、常に最新情報を提供

---

## まとめ

「LINE集客システムのマニュアルサイト構築」プロジェクトは、最新技術を駆使してユーザーに寄り添った情報検索システムを実現するための取り組みでした。Vue.js、Vitepress、TypeScript、Tailwind CSS、Dockerといった技術を統合することで、開発効率と安定性を両立し、高品質な成果物を提供できました。今後もユーザー視点に立ち、さらに使いやすく進化するシステムの実現を目指していきます。

この記事が、同様のプロジェクトに携わる方々の参考になれば幸いです。

---
### 最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)
OSS版 Dify のワークスペース名変更方法

OSS版Difyを使用している場合、ワークスペース名を変更する方法について説明します。以下の手順は、ローカル環境やDocker環境でDifyを運用しているユーザー向けです。

# データベースを直接修正する方法
この方法は、ローカル環境でDifyを使用している場合に適しています。

## 手順
1. データベースに接続: PostgreSQLデータベースに接続します。
2. SQLコマンドを実行: 次のSQLコマンドを使用してワークスペース名を変更します。

```sql
UPDATE tenants SET name = '新しいワークスペース名' WHERE id = 'ワークスペースのID';
```
ここで、'新しいワークスペース名'は変更したい名前、'ワークスペースのID'は変更対象のワークスペースのIDです。

# Docker環境での変更方法
Dockerを使用している場合、以下の手順で変更できます。

## 手順
Dockerコンテナに接続: 次のコマンドでDockerコンテナに接続します。

```bash
docker compose exec db psql -h 127.0.0.1 -d dify -U postgres
```
SQLコマンドを実行: 次のSQLコマンドでワークスペース名を変更します。

```sql
UPDATE tenants SET name = '新しいワークスペース名' WHERE id = (SELECT id FROM tenants LIMIT 1);
```
または、特定のIDを指定することもできます。

変更を確認: 更新が成功したか確認するために、次のSQLコマンドを実行します。

```sql
SELECT * FROM tenants;
psqlセッションを終了: 作業が完了したら、\\qコマンドでpsqlセッションを終了します。
```

# 設定ファイルを変更する方法
Difyの設定ファイル（例: docker-compose.yaml）を編集することで、アプリケーションの設定を変更することも可能です。具体的には、APP_WEB_URLの項目を新しいワークスペース名に変更します。ただし、この方法は主にURLの変更に使用されます。

# 注意事項
データベースを直接操作する際は、バックアップを取ることをお勧めします。
Docker環境では、コンテナの再起動後に変更が反映されることがあります。
スタックチャンSSD1306、時計(M5StampS3)ガジェットメイドカフェ展示0326


注意、いろいろ
----

- 過去ログを見よ!!!
- 3.1.3
- 時間あわせは、別
- 展示

https://x.com/maruiTTR/status/1892101699428343890


https://x.com/maruiTTR/status/1899817844445241732


結果
----

![image_original(9).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/1254ba6f-0927-4442-aa49-21f2b209ef24.jpeg)


![image_original(10).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/a409c09f-07fb-4786-9255-5640b97c22dd.jpeg)


プログラム
----


```c++


//balloon_ds1307_1_M5StampS3_1


//インクルド
#include <Arduino.h>
#include <Wire.h>
#include <M5UnitGLASS2.h>
#include <M5Unified.h>
#include <Avatar.h>


//定義
using namespace m5avatar; //ネームスペース

Avatar avatar; //アバターの実体の定義
const char* lyrics[] = {"今何時","何時カナ","時間"};//ポインター配列
const int lyricsSize = sizeof(lyrics) / sizeof(char*);//配列の個数
int lyricsIdx = 0;//カウンター



//初期化
void setup(){


  auto cfg=M5.config();
  cfg.unit_glass2.pin_sda=13;
  cfg.unit_glass2.pin_scl=15;
  M5.begin(cfg);//M5の初期化

  avatar.setScale(.45);
  avatar.setPosition(-88-17,-96);
  avatar.init();//アバターの初期化 (アバターは、バックグランドで動く)

  //avatar.setSpeechFont(&fonts::lgfxJapanGothic_12);//日本語フォント
  avatar.setSpeechFont(&fonts::lgfxJapanGothicP_16);//日本語フォント

  delay(3000);//決め打ちなので、おかしかったら調整してね! wifiの待ち0.5*6


}//setup


//メインループ
void loop(){


  //M5.update(); 
  //if (M5.BtnA.wasPressed()){//ボタンが押された場合

    //lyricsIdx++は、後で1プラスする
    //余りを求める処理は、0から文字列のポインター配列サイズぶん繰り返す
    //「l」に文字列のポインターが入る
    const char* l = lyrics[lyricsIdx++ % lyricsSize];

    avatar.setSpeechText(l); //テキストの表示

    avatar.setExpression(Expression::Happy); //表情を変える

    avatar.setMouthOpenRatio(0.7); //口を動かす

    delay(200);//0.2秒待つ

    avatar.setMouthOpenRatio(0); //口を閉じる

    delay(2000);//1秒待つ

    //時間
  avatar.stop();
  //時計の処理 ↓ここから
  // レジスタのアドレスを先頭にする
  Wire.beginTransmission(0x68);
  Wire.write(0x00);
  Wire.endTransmission();
  delay(1);

  // I2Cスレーブに8byteのレジスタデータを要求する
  Wire.requestFrom(0x68, 8);

  // 8byteのデータを取得する
  char data_read[16] = {0x88, 0x88, 0x88}; //データバッファー
  int ii = 0;
  while (Wire.available())  {   // 要求より短いデータが来る可能性あり
    data_read[ii++] = Wire.read();       // 1バイトを受信
  }//while
  delay(1);

  //表示変換する パック二進化十進を文字列にする
  char cn1[16];  //桁
  cn1[0] = '0' + (data_read[2] >> 4);  //0 時 上位
  cn1[1] = '0' + (data_read[2] & 0xf); //1 時 下位
  cn1[2] = ':';
  cn1[3] = '0' + (data_read[1] >> 4);  //2 分 上位
  cn1[4] = '0' + (data_read[1] & 0xf); //3 分 下位
  cn1[5] = 0;
  //時計の処理　↑ここまで
  avatar.start();
  
    avatar.setSpeechText(cn1); //テキストの表示

    avatar.setMouthOpenRatio(0.7); //口を動かす

    delay(200);//0.2秒待つ

    avatar.setMouthOpenRatio(0); //口を閉じる

  //}//if

  delay(4000);//3秒待つ

}//loop



```
Next.js のビルド時に Error: Cannot find module '/vercel/path0/node_modules/.pnpm/bcrypt エラーが出たときの対処法

Next.js のビルド時に「**Error: Cannot find module '/vercel/path0/node_modules/.pnpm/bcrypt**」エラーが出たときの対処法です。

[Next.js の公式チュートリアル Chapter 6](https://nextjs.org/learn/dashboard-app/setting-up-your-database) を進めていくと、Vercel のデプロイでこのエラーが出てしまいます。

チュートリアルをちゃんと読むと書いてあるのですが、分かりづらかったので忘備録として残しておきます。

>The script uses bcrypt to hash the user's password, if bcrypt isn't compatible with your environment, you can update the script to use bcryptjs instead.
>
>[DeepL翻訳]
スクリプトはbcryptを使用してユーザーのパスワードをハッシュしています。bcryptがあなたの環境と互換性がない場合は、代わりにbcryptjsを使用するようにスクリプトを更新することができます。

#### ビルドコマンド
```sh
pnpm run build
```

#### エラーメッセージ
```
[Error: Cannot find module '/vercel/path0/node_modules/.pnpm/bcrypt@5.1.1/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node'
Require stack:
- /vercel/path0/node_modules/.pnpm/bcrypt@5.1.1/node_modules/bcrypt/bcrypt.js
- /vercel/path0/.next/server/app/seed/route.js
- /vercel/path0/node_modules/.pnpm/next@15.1.6_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/server/require.js
- /vercel/path0/node_modules/.pnpm/next@15.1.6_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/server/load-components.js
- /vercel/path0/node_modules/.pnpm/next@15.1.6_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/build/utils.js
- /vercel/path0/node_modules/.pnpm/next@15.1.6_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/build/worker.js
- /vercel/path0/node_modules/.pnpm/next@15.1.6_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/jest-worker/processChild.js] {
  code: 'MODULE_NOT_FOUND',
  requireStack: [Array]
}
> Build error occurred
[Error: Failed to collect page data for /seed] { type: 'Error' }
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1
```

#### 修正箇所

app/seed/route.ts
```diff
-import bcrypt from 'bcrypt';
+import bcrypt from 'bcryptjs';
```

package.json
```diff
-"bcrypt": "^5.1.1",
+"bcryptjs": "^3.0.2",
```
USBケーブルの修理に挑戦してみた

こんにちは。船井総合研究所のいっちーです。

# 猫飼いあるある？
我が家のお猫様は紐状のものが大好きで、釣り竿型のおもちゃはすぐに紐を噛みちぎってダメにしてしまいます。それだけなら下僕の私が気を付けていれば済む話ですが、寝ている間にスマホの充電ケーブルなどを噛みちぎられてしまうような事故は、可能な限りの対策を講じても、どうしようもなく発生してしまいます。幸い誤飲はしていないので、やられるたびにブツクサ言いながら新しいものを買いに行くことになります。

# ついにやられた…
そして先日、仕事で使っているShokzの充電ケーブルをやられてしまいました。

![IMG_8677.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/e60f3c1a-6089-460a-8636-284290defcd5.jpeg)

このShokzは、今の会社に転職して初のボーナスで買ったご褒美だったのでちょっとショック…ということ以上に、Shokzの充電ケーブルは専用ハードなので買い直しをしないといけません。純正品は高いし、とはいえ、互換品はあまり使いたくない…。

# よし、DIYで修理しよう
食いちぎられたケーブルのUSBブラグ側を分解してみると、どうやらV-BUSとGNDをシンプルに接続しているだけのようでした。これなら、USBのプラグだけ交換すれば直るはずです。

:::note warn
ご注意
自己修理が原因の故障は補償の対象外となります。本記事を参考に作業をしたことで事故や不具合が発生しても、作業された方の自己責任となります。
:::

 ~~ん？自己修理したら純正品とは言えなくなる？細かいことは気にしない。~~ 

### ケーブル修理

まずは生きているコードを残して噛みちぎられた部分を除去し、コードの被覆を剥がします。

![IMG_8681.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/346b8049-4119-4196-84ea-427679b0f149.jpeg)

V-BUSに赤いコードを、GNDに黒いコードをハンダ付け。はんだごてを握るのは10年ぶりぐらいです。
シェルが分解式でない場合、あらかじめケーブルに通しておくことを忘れずに…。

![IMG_8682.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/1ae4f330-edc5-491a-b1f5-0c9165f36de9.jpeg)

きれいに付きました。

![IMG_8684.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/154d68c1-8c99-4fa7-89ce-a78b42938f73.jpeg)

### 動作確認

Shokz本体と接続して、きちんと通電していることを確認。本来であればテスターで確認するべきところですが、横着しました。

![IMG_8685.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/c539a875-0ed2-4d36-b71c-e839f0460139.jpeg)

うまく修理できたことが分かったので、シェルを被せて完成です。

![IMG_8687.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/c540142e-d0b9-49db-86a2-71da37e18c7e.jpeg)

# おまけ

さて、この記事の一連の写真の中に、1箇所変なところがあります。それはどの部分でしょうか…？私も、作業が終わってから気が付きました。気付いた方はコメントして頂けると嬉しいです。

# 後日談

お猫様のケーブル噛り対策に[ビターアップルスプレー](https://amzn.asia/d/78wxQRh)を試してみました。個体によっては全く効かない場合がある(昔、実家で飼っていたお犬様はビターアップルを噴霧した家具を平気で舐めていました)のと、薬剤に頼るのは最終手段と思って今まで控えていましたが、今回の一件で導入を決意。その後の様子を見るに我が家のお猫様には効果があったようです。

# まとめ

ということで、USBケーブルをDIYで修理してみたというお話でした。

それではまた。