OmniAICreator/Qiita-1.07M huggingface dataset:
【React】Uncaught Error: Objects are not valid as a React child

# はじめに
Reactでイベントに関数をセットする際に発生したエラーについてまとめました


# 問題
以下、```input```タグの ```onChange``` イベントにstateのセットを設定しようとすると **Uncaught Error: Objects are not valid as a React child**というエラーが出ました。
```jsx
  const [studyContent, setStudyContent] = useState("");
  const changeContent = (value) => {
    setStudyContent(value);
  };
  return (
      <>
          <input value={studyContent} onChange={changeContent} />
          ...
      </>
  );
```
入力ホームに入力するとタイトルのエラーが出て、画面が真っ白になる

# 解決方法
ラムダ式で記述し、```e.target.value``` を受け取るようにする。
```jsx
<input value={studyContent} onChange={(e) => changeContent(e.target.value)}/>
```

# おわりに
イベント時に発生する ```value``` の変更は ```e.target.value``` で受け取ること

# 参考
https://scrawledtechblog.com/react-input/
めちゃめちゃでかいtarファイルが送られて困った時の対処法

# めちゃめちゃでかいtarファイルが送られて困った時の対処法

巨大な `.tar` ファイル（Tape Archive形式）を受け取ったとき、全部展開すると時間もディスク容量も無駄になってしまうことがあります。  
そんなときは、**必要なファイルだけをピンポイントで抽出**しましょう。

---

## 特定のファイルを抽出する基本

たとえば、`archive.tar` の中から `path/to/file.txt` だけを取り出したい場合は、次のように実行します：

```
tar xf archive.tar path/to/file.txt
```

---

## パスの確認方法

注意点として、指定するパスは **tarアーカイブ内の構造に一致している必要** があります。  
まずは以下のコマンドでアーカイブの中身を確認しましょう。

```
tar tf archive.tar
```

これでファイルの正確なパスが分かります。

---

## 抽出先のディレクトリを指定したい場合

`-C` オプションを使うことで、ファイルの展開先を指定することができます。  
例えば、`/tmp/extract_here` に展開するには次のようにします：

```
tar xf archive.tar path/to/file.txt -C /tmp/extract_here
```

※ 指定先ディレクトリ（この例では `/tmp/extract_here`）は事前に存在している必要があります。

---

## コマンドまとめ
```
+--------------------------+-----------------------------------------------------------+
| 操作                     | コマンド例                                                |
+--------------------------+-----------------------------------------------------------+
| アーカイブの中身を確認   | tar tf archive.tar                                        |
| 特定ファイルを抽出       | tar xf archive.tar path/to/file.txt                       |
| 展開先を指定して抽出     | tar xf archive.tar path/to/file.txt -C /tmp/extract_here  |
+--------------------------+-----------------------------------------------------------+
```

---

## おまけ：中身を展開せずに確認したい場合

ファイルを実際に展開せずに中身だけ見たいときは、`--to-stdout` オプションを使います：

```
tar xf archive.tar path/to/file.txt --to-stdout | less
```

このコマンドで、ファイルの内容を標準出力に流し、`less` でページング表示できます。
FirebaseHostingに自動デプロイ出来るようにする

## はじめに
CI/CDの実現にかなり苦戦したので、手順とどこで詰まったのかを残しておこうと思います

## 実現したかったこと
- push時、GithubActionsから自動でビルド・デプロイされること

## 前提
- Firebaseのプロジェクトは作成済みであること
- 今回は手動デプロイが出来る段階から開始しています(以下の記事を参照)

https://zenn.dev/yumemi_inc/articles/2020-10-06-react-firebase-deploy

## 手順
### 認証周りの設定
- GoogleCloudでサービスアカウントを作成
  - `FirebaseDevelop管理者`のロールを割り当てる
- 作成したサービスアカウントの鍵を`FIREBASE_KEY`としてGithubに登録

こちらの記事の2までを参考に進めました

https://zenn.dev/jinwatanabe/articles/4026d373383739

### GithubActionsのワークフローを設定
- ワークフローを記載する
- `FIREBASE_TOKEN`を作成し、Githubに登録する

https://qiita.com/asa129/items/1bac1010abf11ac44b8d

### プッシュしてみる
- buildとdeployが行えているかGithubActionsで確認

![ 2025-04-16 1.23.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683820/6e8c38f2-c3b0-41b1-a30e-03f1480091b4.png)


## 詰まったポイント
### 1. Googleのアカウントが途中で切り替わっていた
  - FirebaseDevelop管理者のアカウントではなく、オーナーロールのGoogleアカウントでログインしていることになっていた

![ 2025-04-16 1.31.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683820/5a04b192-f779-4422-b16b-1f96414b71e9.png)

```
Error: Failed to get Firebase project study-record-****. Please make sure the project exists and your account has permission to access it.
```

ログインし直して解消しました

https://myscreate.com/firebase-deploy-error/


### 2. ワークフローの`--project=`でFirebaseのプロジェクトIDではなくプロジェクト名を設定していた
```
// プロジェクト名であるstudy-recordを設定してた故のエラー
Error: Failed to get Firebase project study-record. Please make sure the project exists and your account has permission to access it.
```

### 3. 非推奨となった古い書き方をしていた
ワークフローで`firebase deploy --token $FIREBASE_TOKEN`と記載すると、今は推奨していないよと警告が出てdeployが失敗しました

https://qiita.com/hiroyuki_0507/items/e86b8660c212e7e0cfbd

書き方を変えて解消しました
```
- name: Deploy to Firebase
  uses: joinflux/firebase-tools@v9.16.0
  with:
    args: deploy --project=study-record-*** --only hosting
  env:
    FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```
応用情報技術者試験対策：SQL文の基本構文まとめ（DDL/DML/DCL）

# 応用情報試験データベース試験範囲SQL

もうすぐ春の応用情報技術者試験の受験日なので、範囲内のSQLの記載方法についてまとめました
記述問題で、短くはあるもののSQLの記載を求められる問題は多いので、ざっとおさらいします


# 目次
1. [データ定義言語（DDL）](#1-データ定義言語ddl)
2. [データ操作言語（DML）](#2-データ操作言語dml)
3. [データ制御言語（DCL）](#3-データ制御言語dcl)
4. [その他](#4-その他)
5. [JOIN: テーブルの結合](#5-join-テーブルの結合)
6. [副問い合わせ（サブクエリ）: クエリ内のクエリ](#6-副問い合わせサブクエリ-クエリ内のクエリ)

## 1. データ定義言語（DDL）
- **CREATE TABLE**: 新しいテーブルの作成
````sql
CREATE TABLE テーブル名 (
  カラム名1 データ型,
  カラム名2 データ型,
  カラム名3 データ型
);
````

- **ALTER TABLE**: 既存テーブルの構造変更
````sql
ALTER TABLE テーブル名
ADD COLUMN カラム名4 データ型;
````

- **DROP TABLE**: テーブルの削除
````sql
DROP TABLE テーブル名;
````

## 2. データ操作言語（DML）

- **SELECT**: データの照会
````sql
SELECT カラム名1, カラム名2
FROM テーブル名
WHERE 条件;
````

- **ORDER BY**: 結果の並べ替え
`ORDER BY`句は、クエリ結果を指定したカラムの値で並べ替える際に使用します。

```sql
SELECT * FROM employees ORDER BY salary DESC;
```

- **HAVING**: グループ化後の条件指定
`HAVING`句は、`GROUP BY`でグループ化した後に、そのグループに対する条件を指定する際に使用します。

```sql
SELECT department_id, AVG(salary) AS avg_salary
FROM employees
GROUP BY department_id
HAVING AVG(salary) > 5000;
```

- **INSERT**: データの挿入
````sql
INSERT INTO テーブル名 (カラム名1, カラム名2)
VALUES (値1, 値2);
````

- **UPDATE**: データの更新
````sql
UPDATE テーブル名
SET カラム名1 = 新しい値
WHERE 条件;
````

- **DELETE**: データの削除
````sql
DELETE FROM テーブル名
WHERE 条件;
````

## 3. データ制御言語（DCL）

- **GRANT**: ユーザーへの権限付与
````sql
GRANT 権限 TO ユーザー名;
````

- **REVOKE**: ユーザーからの権限剥奪
````sql
REVOKE 権限 FROM ユーザー名;
````

## 4. その他

- **CASE式**: 条件式の使用
````sql
SELECT CASE 
  WHEN 条件 THEN 結果1 
  ELSE 結果2 
END AS エイリアス
FROM テーブル名;
````

- **COALESCE関数**: NULL値の処理
````sql
SELECT COALESCE(カラム名, デフォルト値) AS エイリアス
FROM テーブル名;
````

- **NULLIF関数**: NULL値の比較
````sql
SELECT NULLIF(カラム名1, カラム名2) AS エイリアス
FROM テーブル名;
````

## 5. JOIN: テーブルの結合

- **内部結合（INNER JOIN）**: 両方のテーブルに一致するデータのみを取得します。

  ```sql
  SELECT employees.first_name, departments.department_name
  FROM employees
  INNER JOIN departments ON employees.department_id = departments.id;
  ```

- **外部結合（OUTER JOIN）**: 片方のテーブルにのみ存在するデータも含めて取得します。

  ```sql
  SELECT employees.first_name, departments.department_name
  FROM employees
  LEFT OUTER JOIN departments ON employees.department_id = departments.id;
  ```

- **自己結合（SELF JOIN）**: 同じテーブルを2回使用して、関連するデータを結合します。

  ```sql
  SELECT e1.first_name AS Employee, e2.first_name AS Manager
  FROM employees e1
  LEFT JOIN employees e2 ON e1.manager_id = e2.id;
  ```

## 6. 副問い合わせ（サブクエリ）: クエリ内のクエリ

```sql
SELECT first_name, salary
FROM employees
WHERE salary > (SELECT AVG(salary) FROM employees);
```
VueとTailwindv4.0でフロント画面を構築する

Vueと今年の1月23日にリリースされたばかりのTailwindv4.0を使って簡単にフロントを構築してみる。

### v3との違い
- 完全ビルドが3.5倍、高速な増分ビルドは8倍以上
- セットアップが簡単に
-  `.gitignore`が自動的に追加される
- JavaScriptファイルいらず、CSSだけでカスタマイズできる ... etc

詳しくは[公式ブログ](https://tailwindcss.com/blog/tailwindcss-v4)を見てください。




## プロジェクト作成の準備

### 1\. フォルダを作成
```
mkdir プロジェクト名
```

### 2\.Nodeのバージョン確認
バージョンが古すぎると動かない、v18以上がいいかも。
```
node -v
```
もし入っていない場合はmacだったら`brew install node`とか
[Node公式サイト](https://nodejs.org/ja)からインストールしてください。

ちなみに私は`v20.18.1`を使用しています。

### 3\.asdfでローカル環境にNodeを設定(使っている場合)

```
asdf local nodejs 使いたいnodeのバージョン
```
これで`.tool-versions`というファイルが作成され、ディレクトリごとにNode.jsのバージョンを管理できます。

VSCodeとかでフォルダの中に入ってターミナルで操作


## Vueプロジェクトの作成
```
npm create vue@latest 作成するVueプロジェクトの名前
```

`y`でcreate-vueをインストールを許可、あとは`Enter`を押して進める。
プロジェクトディレクトリに移動して、VSCodeなどで開く。

## Tailwind CSS v4のインストール
```
npm install tailwindcss @tailwindcss/vite
```

## Vite の設定ファイルを編集

`vite.config.js`を以下のように編集。
```js:vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite' //追加

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(), //追加
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
```


## Tailwind のスタイルを読み込む
### 1\.`src/style.css` を作成し、以下を記述
```css:style.css
@import "tailwindcss";
```

### 2\.`main.js` にインポートを追加
```js:main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import './style.css' // ← これを追加

createApp(App).mount('#app')
```

## 起動して確認
```
npm run dev
```

## Tailwind が反映されているか確認
```vue:App.vue
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
    <!-- テスト用のtailwindsを追加 -->
    <div class="bg-purple-400 text-white text-xl">
      これはTailwindv4でつくられました!
    </div> 
  </header> 
```

こんな感じで紫の部分が表示されれば成功です！🎉
![Monosnap Vite App 2025-04-15 23-50-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982231/bbb1f61a-7727-4f22-a5e6-b821b0a4fad7.png)
OpenRestyで必要な時だけ任意のファイルにlogを出力する方法

## これは何?

NGINXを使用していて，イベント発生時のみログを出力する要件を満たすために，`ngx_http_log_module`のif機能がうまく使えたので防備録的に書いておきます。

- 常時必要なログではない。特定のタイミングのみログを出力したい。
- error.logとは出力先を分けたい

こういったケースでのテクニックです。

---

## 環境

OpenResty(NGINX + Lua)

---

## やり方

### nginx.confで`log_format`を定義する

以下の例ではlogs/auth_fail.logにログを出力する設定をします。
`time`は定義済みの変数ですが，カスタム変数(user_id)も使用可能です。

```nginx
 log_format auth_fail_log 'time: $time_iso8601\t'
                           'user_id: $user_id;

  map $status $loggable {
    default 0;
  }
  access_log logs/auth_fail.log auth_faile_log if=$loggable;
```

> The if parameter (1.7.0) enables conditional logging. A request will not be logged if the condition evaluates to “0” or an empty string. [^1]

とのことなので`if=0`以外だとこのlogが出力される仕組みです。

:::note info
`log_format`内で`set`を使って変数(`loggable`)を定義するとエラーになるので，`map`を代わりに使っている。 
:::

### Lua Scriptでloggableの値を変えてやる

現状のままだと，ずっと`if=0`になってしまうので必要な時だけ値を0以外にしてやります。

以下のnginx.confの設定で/配下にアクセスした際にmain.luaが実行されるようにします。このmain.luaの中からnginx.confの変数を書き換えます。

```nginx
        location / {
            root /usr/local/openresty/reverse_proxy/html;
            default_type 'text/html';
            set $user_id ""; # カスタム変数を定義
            access_by_lua_file /usr/local/openresty/reverse_proxy/src/main.lua;
        }

```

```lua
-- 認証するスクリプトは省略...
if err then
  --CASE=認証失敗
  ngx.var.loggable = 1
  ngx.var.user_id = user
end  
```

---

## なぜこのやり方をするのか

- Lua Scriptでファイルをopen closeして読み書きするよりもパフォーマンスが良いはず。
- Lua Scriptの`ngx.log()`で出力できるのは基本的にerror.logになるので出力先は変えられない。

---

## Reference

[^1]: https://nginx.org/en/docs/http/ngx_http_log_module.html
Cloud Digital Leaderの合格体験記

## はじめに

2025年3月に`Cloud Digital Leader`に合格することができました。  
もともと`AWS認定ソリューションアーキテクト - アソシエイト`は保有しておりましたが、
他のクラウド系資格は持っていなかったので、取得できて嬉しいです。  
ここでは、合格までの流れや対策のポイントをまとめておきます。

## やったこと

### 1. 知識のインプット

インプットに関しては、参考書を買うなり、Udemyを受講するなり、選択肢は豊富にあるかと思います。
ただ、最低限の知識を入れたら、すぐに`2. 問題演習の実施`へ進み、不足を補っていく方法が効率的だと思います。
私は、2025年3月4日と5日に開催されたイベント「[Google Launchpad for Women](https://cloudonair.withgoogle.com/events/launchpad-for-women-2025)」内の
`Cloud Digital Leader 認定資格の取得に向けた、大規模なオンライン研修`を受講しました。

### 2. 問題演習の実施

問題演習は、Udemyの[GCP：Google Cloud Digital Leader模擬試験問題集（6回分320問）](https://www.udemy.com/course/google-cloud-digital-leader6320)を使用しました。問題数も十分で、クーポンを使えば2,000円弱で購入可能です。  
問題演習のポイントは下記の通りです。

- 模擬試験の①～③を2-3周解く
  - ④以降は知らない用語が増えて難易度が上がる印象でした
- 模擬試験を解説を読みながら1問ずつじっくり解く
  - 「なぜ、その選択肢が答えなのか？」がわからないと、本番で点を取れない
  - 本番で即答できる問題は結構少なかった印象です

## 対策ポイント

以下のようなトピックは、シナリオ形式の選択問題として出題されやすいため、事前に理解しておくことをおすすめします（用語の説明は省略します）。

- データ管理ソリューション
  - データベース
  - データウェアハウス
  - データレイク
- ストレージプロダクト
  - Cloud Storage
  - Cloud SQL
  - Cloud Spanner
  - BigQuery
  - Firestore
  - Cloud Bigtable
- ML オプション
  - BigQuery ML
  - 事前トレーニング済みAPI
  - AutoML
  - カスタムトレーニング
- サーバーレスコンピューティングプロダクト
  - App Engine
  - Cloud Run
  - Cloud Functions

## さいごに

- Cloud Digital Leader は、Google Cloudのサービスだけを問う資格かと思いきや、
人工知能（AI）や機械学習（ML）に関する内容も含まれており、非常に勉強になりました。
SourceTree(またはGitBash)からGitLabリポジトリのHTTP通信でのクローンができないときの対処法

#### 注意
※Windows環境でのお話なので、Unix系統のOSは参考程度でお願いします。
※本記事は根本解決には至らず、対処療法です。

## 状況
SourceTreeから、GitLabのリポジトリをHTTPでクローンしようとする際に、リポジトリのURL記載後に、「ソースパス/ソースURLとして正しくありません」というメッセージが表示されてしまいました。詳細を確認すると、HTTPSが推奨されているということと、認証にてFatal errorということでした。
(今回クローンしたいリポジトリのURLはhttpでした。)

試しにGitBushのターミナルからクローンコマンドを打ってみましたが、うまくいかず、、、

## 解決
通常のコマンドプロンプトからクローンのコマンドを打つと問題なくクローンが可能でした。

```
$ git clone http:// ～
```

任意のパス上でクローンしたディレクトリをGitLab上で読み込みます。
その後は通常通り使用することが可能です。

## 余談
http通信でのクローンの場合、PAT(Personal Access Token)で認証を行う必要があるそうです。GitLabのプロフィール編集から生成できるらしいので、根本の解決をしたい方はそちらも調べてみてください。
出来ない場合はおとなしくSSHでクローンしてみるのも手です。その際は鍵関連にご注意を。
開発手法について

## ウォータフォール開発
ウォーターフォール開発とは、システム開発の各工程を順番に遂行していく開発手法です。滝（Waterfall）のように上流工程から下流工程へと開発が進められることから、この名前がつきました。
### ○フロー
![39AE3405-F8B3-4AA0-8253-A1FCFC64A505.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037521/a33cf3f0-d38e-4d70-afef-0cf511792532.jpeg)

## アジャイル開発
アジャイル開発とは、ソフトウェアやシステム開発において、短期間のサイクルを繰り返しながら開発を進める手法です。アジャイル（Agile）は英語で「素早い」「機敏な」という意味で、従来の開発手法に比べて開発期間が短縮できるという特徴があります。﻿
### ○フロー
![2AD7D074-103C-49E8-B42A-155A048E1B24.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037521/a5be98e4-cde3-4acb-b864-fb895bdac53d.jpeg)

### ○スクラム
スクラムは、ソフトウェア開発などのプロジェクトで使われるアジャイル開発手法の一つで、チームが協力しながら短い開発サイクル（スプリント）を繰り返し、変化に柔軟に対応しながら価値の高い成果物を継続的に生み出すことを目的としています。

・フロー
スプリント計画→デイリースクラム(朝会)→スプリントレビュー(成果物の発表)→スプリントレトロスペクティブ(振り返り)

・ストーリーポイント
ストーリーポイントは、ある作業（ユーザーストーリー）をどれくらいの「大変さ（負荷）」で完了できるかを数値で見積もる手法です。ストーリーポイントにはしばしばフィボナッチ数列(1,2,3,5,8,13,21)が使用されます。これは微妙な差に悩まないというメリットがあります。

・ベロシティ
ベロシティとは、スプリントでチームが実際に完了できたストーリーポイントの合計のことで、将来の作業量を見積もる際に使用されます。
Firebase StudioでUber Eatsを作ってみた

細かいバグ修正が厳しい

仕様を詳しく記載する必要ありそう

<iframe width="560" height="400" src="https://www.youtube.com/embed/pMfjcxVGEFQ?si=1OyY2FBdUHAl9E_z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
GitHub 公式ドキュメントで Eclipse と Visual Studio Code の機能を比較する

GitHub 公式ドキュメントで Eclipse と Visual Studio Code の機能を比較してみます。  
ついでに先日の本ブログの記事で行った比較も添えて。  

基本は GitHub 公式ブログの各機能各 IDE の見出しレベルの有無で○×しています。

# ■ 公式ブログのページたち



https://docs.github.com/ja/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot
https://docs.github.com/ja/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot?tool=vscode

https://docs.github.com/ja/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide?tool=eclipse
https://docs.github.com/ja/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide


# ■ 本ブログ先日の記事

https://rksoftware.hatenablog.com/entry/2025/04/13/230000

# ■ 機能比較表

## コード補完機能の比較

Eclipse では UI の必要な機能は実装されていない感じですね。  

| 機能 | Visual Studio Code | Eclipse |
|:-|:-:|:-:|
| コード補完 | ○ | ○ |
| コードの提案の取得 | ○ | ○ |
| コード補完を手動でトリガーする | ○ | ○ |
| 代替候補を表示する | ○ | × |
| 新しいタブに複数の候補を表示する | ○ | × |
| 部分的な提案の受け入れ | ○ | ○ |
| 次の編集候補 | ○ | × |
| 提案のナビゲーションと承認 | ○ | × |
| AI モデルを変更する | ○ | × |

## チャット機能の比較

基本のチャット機能のほか、チャット欄での UI 上で完結する機能だけが実装されているイメージですね。  
サーバーサイドでの様々な追加機能や、IDE上でもチャットとエディタのアクティブタブ以外のコンテキストについて未実装という印象。  
あと、メインのチャットビュー以外の UI も未実装ですね。

| 機能 | Visual Studio Code | Eclipse |
|:-|:-:|:-:|
| チャット | ○ | ○ |
| プロンプトの送信 | ○ | ○ |
| チャットの提案のクリップボードへのコピー | ○ | ○ |
| エディタへの反映 | ○ | ○ |
| ファイル添付 | ○ | ○ |
| 新規セッション | ○ | ○ |
| チャット参加者 | ○ | × |
| Copilot Extensions チャット参加者 | ○ | × |
| スラッシュ コマンド | ○ | ○ |
| チャット変数 | ○ | × |
| Copilot の GitHub スキルの使用 | ○ | × |
| Copilot Chat の AI モデル | ○ | ○ |
| クイック チャット | ○ | × |
| インライン | ○ | × |
| スマート アクション | ○ | × |
| Copilot Edits | ○ | × |
| 編集モードの使用 | ○ | × |
| エージェント モードの使用 | ○ | × |
| Copilot Chat での画像の使用(Visons) | ○ | × |
| チャット プロンプトへの画像の添付(Visons) | ○ | × |
| プロンプト履歴 | ○ | × |

# ■ いかがでしたか？
Eclipse と Visual Studio Code の機能比較、いががでしたか？
Power Apps と Power Automate それぞれのライセンスの権利をマージできるのかテスト

# 前提
- ユーザーには以下のライセンスを付与：
    - Power Apps for Office 365
    - Power Automate Plan 2 Trial
- Power Apps から Power Automate のフローを実行
- フローにはプレミアムコネクタあり

「Power Apps for Office 365」にはプレミアムコネクタの利用権がないが、「Power Automate Plan 2 Trial」にはそれがある。

Power Apps からフローを実行した場合、そのフローは Power Apps のライセンスの権利で動作する。従って、「Power Apps for Office 365」ライセンスではプレミアムコネクタが組み込まれたフローを実行できないハズである。

しかーし、もしも所有しているライセンスの権利を裏でマージしてくれるなら、上述の前提のフローを実行できてしまうのである。それが気になってちょっと実験。

# 結果
アプリを実行できない。

![スクリーンショット 2025-04-16 002023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629955/a828cd58-e534-4054-a298-1100bcc4f55b.png)

Power Automate メーカー側でフローを実行すれば問題なく走るので、結果的に権利はマージしてくれないっぽい。

# 余談
Power Apps アプリ作成中にプレミアムコネクタを追加すると、プレミアムコネクタの使用権があるライセンスが必要であることを教えてくれる。

![スクリーンショット 2025-04-16 001743.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629955/2613654c-c38a-4a2a-a5a1-64ff693df2de.png)
レンダリングエラーの解決方法

## エラー発生
動画編集後の書き出し中に「<font color="darkred">GPUレンダリングエラー</font>」というエラーが発生し書き出しが途中で終了してしまう...
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663360/3235ba0a-355b-4e04-b900-a660dd4042c0.png" width=60%>

## 解決方法
<font color="#1e90ff">⒈　</font>ファイル> プロジェクト設定> 一般　を押下。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663360/c34187eb-c9a8-4112-bcfc-f7ecb38a8596.png" width=60%>

<font color="#1e90ff">⒉　</font>プロジェクト設定画面が開かれたら、[一般]タブ が開かれていることを確認。

<font color="#1e90ff">⒊　</font>[ビデオレンダリングおよび再生]枠内の [レンダラー]プルダウンから
[Mercury Playback Engine - ソフトウェア処理]を選択し、右下の「<font color="blue">OK</font>」を押下。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663360/aed8c342-7f86-40d1-b87d-1106a8f2ca5c.png" width=100%>

## リトライ
再度書き出しを実行！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663360/7f1ffbe2-4d78-417c-a3cd-d452b6ddc66d.png" width=90%>

エンコード中(成功するよう祈る🙏)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663360/016ab42f-7375-4b55-af4c-41b26a8c93fb.png" width=60%>

書き出し成功✨
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663360/42f9ec15-40ef-4d96-9273-36f84b34aa5d.png" width=60%>
　
　

 　
最後までご覧いただき、ありがとうございました♪
Firebase Studioでマッチングアプリを作ってみた

指示どおりには実装できてそう。DB登録実装できるとよさそう

<iframe width="560" height="400" src="https://www.youtube.com/embed/5-iI4H-wxPA?si=DnsyGhGIC0mpiJoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
エンジニア転職して1年が経ったので振り返ってみた

2024年の4月1日に未経験からエンジニア転職しました。

え？なぜエンジニア転職したかって？
それは学生の頃に勉強してたプログラミングが好きだったからです。

ゴールは決まってるけど、辿り着くまでを自分で考えて切り開いていく感じがたまらなく楽しかったのを覚えています。

じゃあなんで新卒で...ほんとそれです。
でもこれから挽回していくぜっっ！！


ということで今回は
エンジニア転職して1年経ったので振り返ってみました。

### 転職前の状態

ある程度プログラミングについては人並みよりかは理解していましたので、なんとなくプログラミングってこういうもんだというのはわかってました。

そこで出会ったのがProGate君
おっと、JSでよく使うキャメルケースで書いてしまった。

ここでは比較的ポンポンと進み、HTWLとCSSは理解しました。
Webってこんな感じで作られてるんだ！感心感心と思ってましたね。あの頃は。

で、そこからはRuby on Railsを使ってWeb開発を進めてました。
Rubyを選定した理由は、プログラミングスクールでよく使われてるからです。

余談ですが、僕の会社の先輩はRuby on Railsを「ルビー・オン・ライラズ」と言っていてこの人まじかっ！と思いました笑
せめて名前くらい……

そこからポートフォリオを作って転職したという過去があります。

### 未経験から転職後、研修を受ける

受託開発の会社に入社しました。
そこでは、なんと同期が3人もいたので、よっしゃぁ！と思いながら研修を進めました。
研修期間は1ヶ月と短いですがありました。

そこでは実務で使うDjango（Pythonのフレームワーク）とReact、サーバー研修を行いました。

まずReactからですが、ここではReactとは？を学んでから実際に手を動かして完成品を作るという流れでした。
まぁよくわからん！状態が続き、終わった後も結局あのコードってなんだったんだろう…がほぼ7.8割くらいでした。ﾄﾎﾎ

続いてDjango研修ですが、ここは入社前に勉強していたので楽勝でした。

最後にサーバー構築研修ですが、ここが1番楽しかったかもですね。
1からサーバーを構築しき、最後はWordPressで記事を作りました。

てな感じで研修は終わり、2ヶ月目から実務に入りました。

### 実務に入ってから半年間の間

ここでは実際に会社のGitHubにアクセスしたり、プルリクエストのルールだったり、開発をしていく上での基礎やルールを学びました。

ほぇーと思うことが多く、毎日が勉強盛りでした。

で、まずはみんな大好きテストからですね。

僕の会社はテストコードを書かずに手動でテストを行う会社だったので、テストシートというものをスプレッドシートで作り、画面を見てポチポチする作業がメインでした。

要はテスターですね。
それが半年間ほど続いたので、まぁ辛かったです。
開発がしたい。。。とずっと感じていました。

あとは雑用とか結構多かったです。
色々振り回されたり、訳わからん資料作ってと言われたりで、とにかく覚えることが多くて大変でした。

### 半年後から1年の間について

ようやくこの辺りから開発を任されるようになりました。
ちなみに、残念ながら新規開発ではなかったです。
既存の機能の修正や簡単なWab修正がメインでした。

でもコードに関われるだけマシでしたね。
徐々にテストと開発が半々くらいになっていき、開発スキルも伸びてきたなと思っています。

あとはこの辺りから個人開発をバリバリ進め、実務には全く関係ないスキルを磨いていました。
え？なんで実務と関係ない技術を学んでるのかって？それは後でご説明しますので。

開発するにあたっての考え方や、色々な先輩にコードレビューしていただき、「そんな視点もあったのか！」と勉強になることが多かったですが、割と小さい会社ですのであんまり技術力というのは他者と比べて低いなと思ってました。

そんな感じで1年があっという間なのか、長かったのかはわかりませんが終わりました。

### そして現在

現在は会社の体制がガラッと変わり、開発体制も大きく変化しました。
僕のポジションはというと……あまりよくありません。
会社が開発系から保守・運用系になるとのことだったので、開発に携わる機会が減ってきています。
＋僕のポジションは主に「検証エンジニア」なので、うーん…開発できないのかなぁと思ってます。

会社で開発ができない分、個人開発でバリバリ開発してます。
前述した会社で扱ってない技術を使って個人開発を進めており、平気で24時超えとかするので翌日の仕事がキツイです笑
（ちなみに今記事を書いてるのも24時くらいです笑）

それくらい技術には貪欲で、やっぱり開発はワクワクしますよね！
へぇー！こんなこともできるんだ！とか、前までめちゃくちゃ難しかったことが別の言語ではこんなに簡単になるのか！などと楽しめてます。

あとは、会社では主にDjangoを扱ってますが、個人開発ではバックエンドはnode.jsやBaas（バックエンドレス）を使い、フロント側はReactというようにモダンな技術を学んでいます。

なんで会社とは無関係の技術を学んでいるかというと、理由は2つあります。1つ目は単純に好きだからです。
2つ目は転職を視野に入れているからです。
まだまだ経験の浅いヒヨッコ2年生ですが、このままでは開発経験もろくに積めず、エンジニアとしてどうなのかという方向性になりそうなので、早め早めに行動しています。

他のエンジニアの方と比べると技術力が劣っているように感じしてしまい悔しいです。なのでそれをバネとして頑張ってます！

### 今後の展望

正直ですが、今の会社には期待していないので1年半〜2年くらいを目処に転職する予定です。

未経験から転職した会社は技術力が低いって話を聞きますので、もっとスキルアップできる環境に行きたいです。
なので、今の会社で吸収できることは全て吸収してから旅立ちます！

あとは個人開発を今後もバリバリ進めていきます。
作りたいサービスあるので自分で作って自分だけで使って満足してるかもですね笑

以上で「エンジニア転職して1年経ったので振り返ってみた」の話を終わります。

次は転職してみた！を書けるといいな！！
Copilot Studioで阿部寛ヲタをノーコードで作れる


# Copilot Studioの"全般的な指示？"

日々Copilot Studioが進化しており、カスタム指示（振る舞いの生成AI指示）によって、より簡単により便利なエージェントが作れるようになりました！

※ちょっと前まで、こんなのなかったはず・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/caaa6e2b-ad62-421b-baa6-257735750baf.png)

2025/4/20 追記
こんなメニューが増えていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/e1d75f19-4dae-4f8b-8f22-d31fc9941e84.png)

https://learn.microsoft.com/ja-jp/microsoft-copilot-studio/advanced-generative-actions


## 阿部寛ヲタを作ってみる

#### 1.Copilot Studioで[新しいエージェント]を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/6fef1a6f-e0cd-49ef-abdd-5e47ebd21b77.png)

#### 2.対話形式でも作成できますが、今回は[構成に進む]から作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/93c2c3be-df21-4053-b3e1-a4edeafaa734.png)

#### 3.構成画面が開くので、入力していきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/33078d32-3c36-4e8a-b4da-efd44b737d6f.png)

#### 4.[全般的な指示]が"カスタム指示"にあたります。
ここで振る舞いや役割、ステップを簡単に定義することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/419cb963-68cf-4066-826e-3b45cd4b694b.png)

#### 5.[ナレッジの追加]でデータソースを指定します。
ここでは公開Webサイトから阿部寛のホームページを参照させていただきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/67ca0dc9-7056-4e1b-a82f-9ca4aaf2a486.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/5f56cf47-0eed-43a2-aa33-f9915a68ddff.png)


## 阿部寛ヲタと会話してみる
一瞬で阿部寛にすごく詳しいヲタができました！完全ノーコードです！

<p><img alt="image.png" height="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/abb31575-a7e2-4203-a1a8-ae6a4bd7a01a.png" width="200"/></p>

<p><img alt="image.png" height="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/063f30f3-89f2-4e99-91fa-a1ac3b3e38d4.png" width="200"/></p>

<p><img alt="image.png" height="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/e16a0155-d872-4afe-a8c0-ae07f68ca3af.png" width="200"/></p>

※阿部寛のホームページは無断転載・引用禁止とのことなので、ホームページをソースにした回答は伏字にします

# 阿部寛さん、ほんとに素晴らしい俳優だよね
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/338b57a5-4b8e-4548-8568-163f7fe7b969.png)

続き

https://qiita.com/Oyu3m/items/fa39d334ca31172e4475
Power Platform の所有者チーム (Owner team)、アクセス チーム (Access team)、Microsoft Entra グループ チーム (Microsoft Entra group team) の違い

# ソース
テーブルのタイプ
https://learn.microsoft.com/ja-jp/power-platform/admin/manage-teams#types-of-teams

# メモ
### 所有者チーム
- Dataverse のレコードを直接所有
- チーム単位でセキュリティ ロールを適用
- メンバー追加は手動管理

### アクセス チーム
- レコードを所有しない
- セキュリティ ロールもチーム自体には割り当てられない
- メンバーには個別に付与された権限や、チーム共有による権限（読み取り、書き込み、追加）が適用される

### Microsoft Entra グループ チーム
- 所有者チームに似た仕組みでレコード所有が可能
- メンバーシップは Microsoft Entra のグループ管理に連動して動的に更新
- グループの種類によって（セキュリティ、オフィス）異なる管理が可能

また、環境ピッカー上でユーザーが認識されるのは、直接セキュリティ ロールが割り当てられているユーザーや、Microsoft Entra グループ チームのメンバーに限定される。
[Python]FastAPIの基本構造とひな形

## はじめに
　Pythonを用いた簡易的な画面表示として、別アプリとも連携可能なFastAPIが一般的に利用されているらしく、GPT4oを用いてFastAPIプログラムを作成した。
 　今回その内容をもとに、基本的な構造やファイルの役割、型を備忘録としてまとめていく。FastAPIについて詳細説明をしているサイトは多々あるが、細かすぎて実際に構築するにあたり情報整理に労力がとられてしまうため、構築するにあたっての最低限度の内容を記載する。

## FASTAPIの基本
### 基本構造

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1391358/1275f5b3-5257-4299-ad2e-676abae8f1c2.png)

```
.app
├─.api
|  └─XX.py ← APIルーター（POST/GETなどの入口）
├─.services
|  └─YY.py ← 処理ロジック（サービス層）
├─.db
|  └─zz.py（必要に応じて）
└main.py
```

### 役割
①main.py
他のアプリから呼び出しを受ける玄関口。
ルーターとしてグループ分けされた各機能を呼び出すためのもの。

②.api
実際にAPIが呼びだれたとき、GET,POSTのレスポンスを定めている。

③.services
GET,POSTのレスポンスをするにあたり、レスポンスするための具体的な処理（裏方の実装）を行っている。

④.db
.servicesの機能と、必要に応じてやり取りをするDB。

### ひな型

```main.py
from fastapi import FastAPI
from app.api import XX  

app = FastAPI()

# ルーターをFastAPI本体に登録
app.include_router(XX.router)

```

```.api
from fastapi import APIRouter
from app.services.YY import 関数名

router = APIRouter(tags=["タグ名"])

@router.post(
    "/URLの末尾",
    summary="概要説明",
    description="詳細説明"
)
async def 関数名(
    #変数の場合
    変数名: 型 = Form(
    ..., #←必須の場合
    description=(
      "説明"
    ),
  ),
    #ファイルの場合
    変数名: UploadFile = File(
    ..., #←必須の場合
    description=(
      "説明"
    ),
  ),
):
    result = await 関数名(引数)  # ← services層の関数呼び出し
    return result


@router.get(
    "/URLの末尾",
    summary="概要説明",
    description="詳細説明"
)
async def 関数名():
    result = await 関数名(引数)  # ← 同上
    return result
```

```.services
async def 関数名(引数):
    # ここでデータベースアクセス・前処理・変換などを実施
    result = ... 
    return result
```

## 参考資料
[1]iharu , 『Pythonのasync/awaitを理解したい【asyncio】』, https://zenn.dev/iharuoru/articles/45dedf1a1b8352
[2]徳田 啓 , 『GET／POSTの違い＆実際の使い分け方』, https://blog.senseshare.jp/get-post-method.html
[3]tiangolo, 『FastAPI』, https://fastapi.tiangolo.com/
【第3回】登山＆キャンプ記録アプリ開発｜投稿の詳細表示・編集・削除機能を実装！

# 【第3回】登山＆キャンプ記録アプリ開発｜投稿の詳細表示・編集・削除機能を実装！

こんにちは、Soraです！  
前回は投稿機能や画像アップロードについて紹介しました。

今回は、投稿内容の「**詳細表示」「編集」「削除」**を実装したので、その内容をまとめていきます！

---

## 🔎 詳細ページでできること

- タイトル・感想・日付・住所を表示
- 複数枚の画像をスライド的に表示（予定）
- Googleマップの埋め込み

---

## 🛠 編集・削除機能でできること

- 投稿者だけが編集・削除可能
- ログインしていないとアクセスできない（@login_required）
- 編集後は自動的に詳細ページにリダイレクト

---

## 💡 使用技術＆ポイント

| 機能             | 技術 or 工夫                       |
|------------------|------------------------------------|
| 編集・削除制限     | `post.user_id != current_user.id` |
| アクセス制御      | `@login_required`                 |
| 編集フォーム表示  | 既存データをフォームに渡す        |
| 削除確認          | GET/POSTの両対応                  |

---

## 🧩 実装コード（抜粋）

### 詳細ページ

```python
@app.route('/post/<int:post_id>')
def post_detail(post_id):
    post = Post.query.get_or_404(post_id)
    return render_template('post_detail.html', post=post)
```

### 編集ページ
```python
@app.route('/edit/<int:post_id>', methods=['GET', 'POST'])
@login_required
def edit_post(post_id):
    post = Post.query.get_or_404(post_id)
    if post.user_id != current_user.id:
        abort(403)

    if request.method == 'POST':
        post.title = request.form['title']
        post.date = datetime.strptime(request.form['date'], "%Y-%m-%d").date()
        post.address = request.form['address']
        post.description = request.form['description']
        post.map_iframe = request.form.get('map_iframe')
        db.session.commit()
        return redirect(url_for('post_detail', post_id=post.id))

    return render_template('edit.html', post=post)
```
### 振り返り☑️
- 他人の投稿を編集できてしまう → post.user_id != current_user.id で制御！
- 非ログイン状態で編集URLを直打ち → @login_required でブロック！
- 削除後のリダイレクト先に迷った → 一覧（home）に戻すのが自然！
- 投稿毎のページを見られるようになってアプリ感UP！

### 次回予告ッ‼️
次回は”Flask-admin”の活用法を紹介予定です！

### ソースコードはこちら💁
https://github.com/soragraming/portfolio-app
【Git】リモートの変更を作業ブランチに取り込む方法

## ブランチを移動

下のコマンドで`main`ブランチに移動します。

```terminal
git switch main
```

## `main`ブランチにリモートの変更を取り込む

```terminal
git pull
```

## 作業ブランチに移動

```terminal
git switch feature
```

## 変更を取り込む

```terminal
git merge main
```

または

```terminal
git rebase main
```

## 参考

https://docs.github.com/ja/get-started/using-git/getting-changes-from-a-remote-repository#merging-changes-into-your-local-branch
～【社内講習】Excel講習オンライン～


# 初めに
Excel講習の講師を担当している@harris1992です。
オブジェクティブグループ(以下、OBG)で毎月行われている講習会の様子をお届けする記事となります。
今回はVBAの学習内容の一部をご紹介いたします。

# Excel講習とは?
OBGで毎月第2土曜日11:00～19:00に実施している講習会となります。
基本的にオンライン開催となりますが、3ヶ月に1回OBG本社にてオフラインでの開催も行っております。
PC初心者からある程度触ったことがある方まで様々な方が受講されるので、Excelの画面の見方や簡単な操作方法から業務で使用するような関数、VBAの学習まで受講者の学習状況に合わせて幅広い範囲の学習を行っております。
また、Excel講習の他にもフロントエンド講習、SQL講習も開催されており、受講者が受講したい講習を選択して参加できる形となっております。

# VBA講習
今回は3名の方に御参加いただきました。
2名の方は前回の講習から引き続きExcel講習を受講していただいたので、VBAの設定から基礎的な部分の学習を行うこととなりました。
また、もう1名の方は継続して参加していただいている方なので、自分で取り組んでいる課題を行っていただき、進捗状況の確認やアドバイスを適宜行う形で取り組んでいただきました。

# 変数
2名の方はVBAを初めて触れるとの事だったので、変数についてから説明を行いました。
データ型については、**Long型**、**String型**、**Variant型**について主に説明を行い、その他のデータ型については一覧で説明を行いました。
※Long型：整数を扱うときに設定するデータ型
　String型：文字列を扱うときに設定するデータ型
　Variant型：値に縛られずに代入可能とするデータ型

```
'変数宣言
Dim 変数名 as データ型

'変数への値の代入
変数名 = 代入したい値

```

# For文、IF文
VBAのプログラムを作成する中で必須となってくる繰り返し処理(For文)と分岐処理(IF文)の説明も行いました。
※For文：任意の回数繰り返し処理をする際に利用するもの
　IF文：条件の真偽(あてはまっているか、あてはまっていないか)によって処理を分岐する際に利用するもの

```
'繰り返し処理
For 繰り返し変数 = 初期値 to 終了値
　　処理
Next

'分岐処理
IF 条件式 Then
　　処理
else
　　処理
End If

```

VBAのプログラムでは、繰り返し処理と分岐処理を非常に多く使用することになるので、ステップインで1行ずつ処理の流れを見せながら理解を深めていただいております。


# 練習問題
最後に講習内で学習した内容を基に自分で簡単な処理のプログラムを作成する問題を実施しております。
実際に自分でプログラムを作ることでどういう処理でプログラムを組めばいいのか練習していただいております。

# おわりに
Excelは現場で使用する機会が多いので、この機能はどうやってやれるかなと気になる事があったら是非学習してみてください。
「DeepSite」使ってみた


# DeepSite とは

DeepSite は、Hugging Face が提供する AI を活用したウェブ開発ツールです。
テキストで指示を入力するだけでウェブサイトや簡単なゲームを自動生成することができます。
無料で使用ができ、[オープンソース](https://huggingface.co/spaces/enzostvs/deepsite/tree/main)も公開されています。

# 生成物

DeepSite は HTML/CSS/JavaScript のコードを生成して、一つの index.html として出力されます。裏のモデルは、「DeepSeek V3-0324」が使用されています。
試しに[テニスゲーム](https://huggingface.co/spaces/ogison9/tennis-game)を作成しましたが、相手の CPU がボールに合わせて動いてなかなか失敗してくれないので、全然勝てませんでした....
![スクリーンショット 2025-04-15 231318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/7b58c960-bdd0-4913-af9b-d9bd863bf811.png)

ゲーム時、音声が鳴るように実装したら、[mixkit](https://mixkit.co/)の音声データを利用して実装していました。

# 機能

### デプロイ

DeepSite で作成したサイトは、画面右上の「Deploy to Space」ボタンをクリックするだけで、Hugging Face Spaces 上に簡単にデプロイ（公開）できます。自分の Hugging Face アカウントのスペースとしてホスティングされ、公開後は URL を他の人と共有したり、[コミュニティギャラリー](https://huggingface.co/spaces/victor/deepsite-gallery)に投稿して作品を披露することも可能です。

### 推論プロバイダ選択

DeepSite のバックエンドでは、超大規模モデル DeepSeek を動かすために Fireworks AI や Nebius AI Studio など複数のクラウド推論サービスが利用されています。ユーザーが意識する必要はなく、入力内容に応じて最適なプロバイダが自動で選択されます。
![スクリーンショット 2025-04-15 232333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/327f56f4-3751-426d-a35b-483b39b0e7e1.png)

# 使用した温度感

無料で使用できるのは魅力出来ますが、他のプロンプトでサイトやゲームを作るサービスと比較すると、劣っている印象があります。サイト作成だと、機能としては中途半端なイメージがあるので、パッと何か形として見せたい時とかに使えるのかなと考えてます。（頭の中のイメージをなんとなく形にして見せたいなど）
Firebase Studioで勤怠管理システムを作ってみた

仕様があいまいなのか上手くいかない

<iframe width="560" height="400" src="https://www.youtube.com/embed/m0aKbaQdWls?si=dxuyAxO_jXgHzk6k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Gitにcommitしたものを取り消したい時

### コミットだけ取り消したい（コード変更は残す）
直前のコミットを「やり直し可能」な状態に戻す場合に使う
* ファイルの変更内容はそのままステージング済み（add状態）
* git commit をやり直せる
```
git reset --soft HEAD~1
```

### コミット＋ステージも取り消したい（コード変更は残す）
コミットも```git add```も取り消して、編集だけ残す
* 変更内容は残る（作業ツリーはそのまま）
* ステージ（add）はされていない

```
git reset --mixed HEAD~1
または
git reset HEAD~1
```


### 完全に消す（コード変更もコミットもすべて消す）
何もなかったことにする
```
git reset --hard HEAD~1
```
::: note warn
注意：この操作をすると、コードもコミットも元の状態には戻せません。
:::


### 初回コミットを間違えた時
初回コミットをリセットしようとしても、以下のコマンドは使えません。
```
git reset --soft HEAD~1
```
なので、こっちを使います。
```
rm -rf .git
git init
```
そのあとは```git remote -v```でリポジトリを確認します。
次に、```git remote add origin リポジトリ```などで、リポジトリを指定してaddしましょう。

### まとめ

個人開発で主に使いましょう。
会社での作業等では極力使いたくないですね。ミスったら終わる。。。
【Notion MCP × Claude】VSCodeにプロジェクトを自動生成

# はじめに

こちらの続きです

https://qiita.com/does_not_exist/items/e473f92af3273f5637c1

今回は、Notion MCP × Claude Desktop × VSCodeを連携させ、

Notionに作成したタスク内容をもとに、VSCodeにプロジェクトやファイルを自動生成してみました。

ちなみにClaudeからNotionにプロジェクトの"内容"を自動生成することも試してみましたが、
Notion AIを使用する方が生成速度早かったです。

# 試してみた

まず、サイト構築のタスク内容をNotionに作成しておきます。今回はNotion AIを使用しています。

![スクリーンショット 2025-04-15 23.08.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/1282d84e-f47a-43c3-b8c4-9b7baa464c93.png)


Claudeを使ってVSCode上にプロジェクトを生成するよう命令してみます。

![スクリーンショット 2025-04-15 23.10.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/80dbd940-b5ac-48ea-a1bf-760f1239b0c4.png)


なんと、できてます！
無料版は生成する文章の長さに制限があるため、全て生成してもらうことは叶いませんでしたが...

![スクリーンショット 2025-04-15 23.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/58cbb4a2-1b3a-429a-9aca-ddaa59e481e6.png)



# Notion MCPとClaude Desktop連携方法

公式サイトで丁寧な説明がされています！

https://notion.notion.site/Notion-MCP-1d0efdeead058054a339ffe6b38649e1

# おわりに
Notion上で完結するような命令ならNotion AIで事足りそうですが、上手くNotionと外部サービスを連携させることができれば、大きな恩恵を受けられそうですね。
デフォルトVPCというのがあるらしい

EC2を作ると特にVPCを自分で作ったわけでもないのにVPCができていた。
デフォルトVPCについて調べていくうちに色々と調べものをしたのでまとめていく

## EC2ってVPCの中にあるの？自分でVPCなど作ってない
EC2インスタンスは必ずVPC（仮想ネットワーク）の中に存在している。
たとえ自分で明示的にVPCを作ってなくても、AWSが自動で「デフォルトVPC」を作っていて、そこに配置される。
AIに構成図を書いてもらうとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4057141/1941d017-8fd4-4a31-8233-397fc61521bd.png)

AWSコンソールでEC2の詳細を見こともできる
①EC2画面で、インスタンスを選択
②下部にある「ネットワーク」タブを開く
③表示される内容：以下
| 項目 | 内容 | 
| ------- | ------- | 
| VPC ID   | vpc-xxxxxxxxxxxxxx（←これが今のVPC）   | 
| サブネット   | subnet-xxxxxxxxx（AZも表示される）   | 
| パブリックIP   | 54.xxx.xxx.xxx（これでアクセスしてる）   | 

##  インターネットゲートウェイ（IGW）も自動で作られる？
デフォルトVPCにはインターネットゲートウェイ（IGW）が自動で作成＆関連付けされる

そもそもデフォルトVPCには以下のような特徴があるらしい
|  項目  |  内容  |
| ------- | ------- | 
|VPC本体 |  	自動作成される
|サブネット（各AZ） |	各リージョンに1つずつ自動作成
|インターネットゲートウェイ |	 自動で作成＆VPCにアタッチ済み
|ルートテーブル |	自動で作成（0.0.0.0/0 → IGWが設定済み）
|セキュリティグループ |	初期で1つあり、自分で追加・編集可能

##  サブネットも自動で作られる？
各AZごとに１つずつサブネットが自動作成される。
東京リージョン（ap-northeast-1）には３つのAZがあるので以下のような感じになる
|AZ|	自動作成されるサブネット
| ------- | ------- | 
ap-northeast-1a|	subnet-xxxxxxxxa 
ap-northeast-1c|	subnet-xxxxxxxxc 
ap-northeast-1d|	subnet-xxxxxxxxd 

デフォルトサブネットの特徴は以下

|項目|	内容
| ------- | ------- | 
所属AZ|	1つのAZに1つずつ属する
ルートテーブル設定|	0.0.0.0/0 → インターネットゲートウェイ が設定済み（つまりインターネットに出られる）
自動でパブリックIP|	EC2起動時に 自動でパブリックIPを割り当てる 設定がON（重要！）
名前|	例：default などと表示されることが多い

VPCの中で大枠のセグメントがきまっていて、その範囲から各サブネットに割り当てが行われる。

例えば、VPC全体のアドレス範囲のときには以下の感じ


|サブネット|	AZ|	CIDRブロック
| ------- | ------- |  ------- | 
|subnet-xxxxxxx1|	ap-northeast-1a|	172.31.0.0/20
|subnet-xxxxxxx2|	ap-northeast-1c|	172.31.16.0/20
|subnet-xxxxxxx3|	ap-northeast-1d|	172.31.32.0/20

このときに、ルートテーブルは下記のようになっている

|宛先|	ターゲット|	説明|
| ------- | ------- |  ------- | 
|172.31.0.0/16|	local|	VPC内の通信（他サブネット含む）
|0.0.0.0/0|	igw-xxxxxxxx|	インターネット通信用

疑問だったのは、なぜ172.31.0.0/16という宛先になっていたら各サブネットのIPどうしが通信できるのかということ。

これは、172.31.0.0/16＝172.31までがあっていたら同一NWとみなすからというのはなんとか理解した。

ルートテーブルについても疑問があったので、AIに聞いてみたのでそれもまとめる

|質問|	答え
| ------- | ------- |
|ルートテーブルはサブネットごとにある？|実体としてはない。サブネットがどのルートテーブルを使うか関連付ける方式
|サブネット同士で同じテーブルを使っていい？|	 OK！よくある構成
|サブネットごとに別のルートテーブルを使える？|	 もちろん可能。設計次第

とりあえず、構成図を作ってみたので最後にそれを載せて今回は終了とする。

![Study.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4057141/7b153bdb-fbe3-44b5-91fb-de5a13b96580.png)
studyMemo_20250415

## Git、GitHubについて
### **・Fork**
GitHub上でリポジトリを自分用にコピーすることを示す用語。
リポジトリに寄与したい(Pull Requestする)ときや気になるリポジトリを自分用に保管したいときに利用する。
※cloneはローカルリポジトリにコピーを作りたいとき使うコマンド

### **・git commit コマンドにおける「-am」オプション**
```sample.bash
git commit -am "コミットメッセージ"
```
本題に入る前に各パーツの意味を含種を兼ねて記載します。
「git」…ツール名を表す「親コマンド」
「commit」…ツール内のどの機能かを示す「サブコマンド」
「-am 」…-aオプションと-mオプションを兼ねた「オプション」
「"コミットメッセージ"」…-mオプションに対する「メッセージ」

-aオプションと-mオプションとは
「-aオプション」は追跡済み(一回でもaddされた)のファイルを自動でadd(ステージ)。
「-mオプション」はcommitにつけるメッセージを指定する。

まとめ
上記の「git commit -am "コミットメッセージ"」は「作業中の追跡されたファイルをすべてステージ(add)してコミットメッセージを指定しながらコミットを行う」という意味に当たる。
Git怖くないシリーズその5(全5回)：マージ(orプル)リクエストとは

## マージ(orプル)リクエスト

* 自分の修正を本家にマージするよう依頼すること
* マージ元ブランチをマージ先ブランチを指定して依頼することで修正内容が「差分」として見える化される
* GitHubでは「プルリクスト」、GitLabでは「マージリクエスト」と呼ぶ
* 実際にマージする前に差分をレビューできる
  ソースの差分の任意箇所にレビューアがコメントを付けられる

----

## GitHubの発明「プルリクエスト」

* GitHubのリポジトリは公開が基本
* 他人のリポジトリを自分のところに派生させられる（フォークと呼ぶ）
* 自分の修正を本家に採用するよう依頼できる
  → これがプルリクエスト

OSSとの親和性が高く多くのOSSがGitHubにホスティング先を移行することとなった。

----

## 「プル」の意味するところ

* 本家を主体に考える
* 他人の修正を本家が「引っ張って」くるイメージ
* 業務プロジェクトでは「マージリクエスト」がしっくりくると思う

----

## 業務プロジェクトでの有用性

* ソースコードレビューの機会を明確に作れる
* **マージ作業の履歴が残る**

----

## マージ(orプル)リクエストの活用

* ものすごく大変だが、**ちゃんと目を通す！**
  プログラムへの理解が深まる
  →　この恩恵は大きい
* 差し戻しを恐れない＆差し戻し前提にスケジュールを組む

----

## レビューの負荷を減らすには

* スタイルに関する指摘は無駄な時間
  ・Formatterで自動整形
  ・Linterにルール違反を指摘させる
* マージリクエスト前にFormatter/Linterを適用するのをルール化する
* Formatterはプッシュ時に自動でかけることが出来る・・・かも
  (稀にFormatterがロジックを変えてしまうので個人的には怖い)

----

## 最後に

* プルリクエストは発明！
* マージ(orプル)リクエストをうまく使って品質を高めたい
Gitで異なるユーザーでcommit pushしたい時

### 現在グローバルでgitにログインしているユーザーの確認コマンド
```
git config --global user.name
git config --global user.email
```

### リポジトリ単位での確認コマンド
```
git config user.name
git config user.email
```

### gitのグローバル設定の変更コマンド
```
git config --global user.name "新しいユーザー名"
git config --global user.email "新しいメールアドレス"
```


### リポジトリ単位での設定確認コマンド（推奨）
```
git config user.name "リポジトリ用ユーザー名"
git config user.email "リポジトリ用メールアドレス"
```

個人開発だけの用途では、グローバル設定も変えていいが、
会社でのパソコンを使って個人開発などする方はリポジトリ単位で切り替えた方が良い。
Firebase Studioでぷよぷよを作ってみた

画像あると結構いい感じ。GIFはだめみたい

# 画像なし
<iframe width="560" height="400" src="https://www.youtube.com/embed/ma2jLzb-Z3g?si=OMFhRCno4F3IFu3i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 画像あり 28:32~ 結構じょうできかな

<iframe width="560" height="400" src="https://www.youtube.com/embed/-nZgeR2J8_8?si=pZFFaaKnd66U0_Or" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# GIF画像あり

<iframe width="560" height="400" src="https://www.youtube.com/embed/7mEa-xveYy0?si=HAoHJCK75nEgZ3qd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
yarn lint が動かなくなった話 〜原因から解決まで〜

## はじめに
とある日、何気なくコードを書いている時に今まで動いていた ESlint の警告が出なくなっていることに気がつきました。
原因の特定と解決までに少し時間がかかったので、備忘録としてまとめておきます。

## エラー

警告が出ない事象には時々遭遇しており、普段は VSCode を立ち上げ直すと解消していました。しかし今回は VSCode を再起動しても PC を再起動しても解消しません。。
`yarn lint` コマンドを叩くと、このようなエラーが出ていました。

```bash
Plugin "react-hooks" was conflicted between ".eslintrc.json >> plugin:react-hooks/recommended" and ".eslintrc.json >> eslint-config-next/core-web-vitals >> Users/user/hoge-app/node_modules/eslint-config-next/index.js >> plugin:react-hooks/recommended"
```

なんだか、プラグインが競合していると言われているぞ...？

## 原因

**yarn.lock ファイルを削除して yarn install をやり直していたことが原因だった**

実は、少し前にパッケージのインストール・アンインストールなど、パッケージ周りの操作をごちゃごちゃと行っていました。
その修正を一度リセットしたく、インストール済みのパッケージを一度全て消して再インストールを試みました。

```bash
rm -rs node_modules yarn.lock
yarn install
```

ここで、依存パッケージ（特に eslint や plugin:react-hooks）が複数バージョンで重複してインストールされてしまったようです。

結果、.eslint.json の設定で plugin:react-hooks/recommended を指定している部分と、eslint-config-next 側で内部的に同じものを読み込もうとしてバージョンが衝突し、エラーが発生していました。

**なぜ、このようなことが起こる？**

以下、 ChatGPT さんによる解説です。

*yarn.lock は、依存関係の正確なバージョンや解決結果をロック（固定）してくれている重要なファイルです。
これを削除してしまうと、同じ package.json を使っていても、環境や依存の状態によって異なるバージョンのパッケージがインストールされる可能性があります。<br/>
特に ESLint のように、プラグインや共有設定（extends）を多段で読み込むツールは、同一のプラグインが複数の場所に存在すると衝突を起こしやすいのです。*

なるほど、、そんなことがあるんですね。

## 解決方法

ファイルは全て Git 管理していたので yarn.lock の変更内容を元に戻し、再度 `yarn install` 実行と必要なパッケージの追加を行いました。

結果、無事に `yarn lint` も動作するようになり問題は解消しました。

## 終わりに

今回、エラーの原因は「依存関係の衝突」でしたが、エラー文からの原因特定がすぐには進まず、結局のところは自分の直前の操作が問題となっていました。

エラーだけを必死に読み解こうとするのではなく、まずは直近の自分がやったことを振り返ることも大事だなと、改めて感じました。
意外と近くに答えがあるという事象、よくありますよね。

もし同じような問題が起きた方の参考になれば、幸いです。
ここまでお読みいただきありがとうございました！
いま話題の生成AIまとめ：モデルの違いと活用事例をやさしく解説！

# いま話題の生成AIまとめ：モデルの違いと活用事例をやさしく解説！（2025年4月現在）

生成AIっていろんな種類があって、「結局どれを使えばいいの？」って迷っちゃうことありませんか？  
この記事では、代表的なAIの名前・制作会社・搭載モデル・特徴と活用例を、わかりやすく整理してみました！

---

## 主要な生成AIの一覧

| AIの名前 | 提供会社 | モデル名 | 主な特徴 |
|----------|-----------|-----------|--------------------|
| ChatGPT | OpenAI | GPT-3.5 / GPT-4 / GPT-4 Turbo | 会話、文章生成、翻訳、コード、要約、画像入力など。GPT-4 Turboは高速＆低コスト。 |
| Copilot（旧Bing Chat） | Microsoft | GPT-4 | Web検索連携あり。最新情報の取得も得意。画像生成も可能。 |
| Claude | Anthropic | Claude 3 (Haiku, Sonnet, Opus) | 数百ページの長文読解が得意。安全性・透明性重視の設計。 |
| Gemini（旧Bard） | Google | Gemini 1.0 / 1.5 pro | Googleサービス（Gmail, Drive等）と連携。コードにも強く、画像や音声も処理可能。 |
| Perplexity | Perplexity AI | Mix of Experts | 検索エンジン型AI。リンク付きの情報ソースがわかる。学習・調査に最適。 |
| Llama | Meta（Facebook） | Llama 2 / 3 | オープンソースのAIモデル。企業が自社でAIを開発する際に使用されることが多い。 |
| その他（Notion AI / Canva Magic Write など） | 各社 | GPTなど | 各種アプリに組み込まれたAIアシスタント。文章作成、アイデア出し、要約などをサポート。 |

---

## モデル別の特徴と活用事例

### GPT-3.5（OpenAI）
- **特徴**：軽量・高速・無料。日常会話や簡単な文書作成向け。
- **活用例**：議事録の要約、カジュアルな相談、メールの下書き。

---

### GPT-4 / GPT-4 Turbo（OpenAI）
- **特徴**：高精度。Turboは高速・コストパフォーマンス◎。画像入力にも対応。
- **活用例**：業務マニュアルの改善提案、複雑なコード生成、画像からの分析。

---

### Claude 3 (Haiku, Sonnet, Opus)
- **特徴**：長文ドキュメント対応。PDFや規約なども読み込み可。
- **活用例**：社内規程の要点抽出、長めのメール返信ドラフト作成、Q&A用AIボット。

---

### Gemini 1.5（Google）
- **特徴**：コード生成、マルチモーダル（画像・音声など）処理。Google連携が強み。
- **活用例**：Gmailの自動返信提案、YouTube台本作成、Google Sheetsの関数説明。

---

### Mix of Experts（Perplexity）
- **特徴**：Web検索特化。根拠リンクも提示してくれる。
- **活用例**：技術情報の比較調査、資格学習の調べもの、最新ニュースの深掘り。

---

### Llama 3（Meta）
- **特徴**：オープンソース。開発者や企業が独自のAIを作るのに適している。
- **活用例**：自社チャットボット開発、業務特化型AIツールの構築。

---

## どのAIを選ぶべき？

目的別におすすめをまとめてみました！

- **雑談・文章生成・要約がしたい**：ChatGPT（GPT-4 Turbo）
- **長文PDFの読み込みをしたい**：Claude 3
- **最新情報を調べたい**：Copilot / Perplexity
- **Googleと連携して作業したい**：Gemini
- **自分のサービスにAIを組み込みたい**：Llama

---

## さいごに

どのAIも日々進化中なので、触ってみるのが一番！  
「どのAIが何に向いているのか？」を知っておくと、業務効率化も加速します！

**ぜひコメントで、あなたの推しAIも教えてくださいね〜！**

---
【365日後にPredictive Master】大企業の平社員がAlteryx Weekly Challengeに挑む #002

## はじめに
こんにちは、積立お兄さんです。
大企業新卒３年目のAlteryx初心者です。
ひょんなことから「**365日後にPredictive Masterになる！**」という目標を掲げて、公式のWeekly Challengeにコツコツ挑戦しています。

この記事では、Alteryx歴3か月の平社員が、実務で生かせそうなノーコード分析力をどうやって身につけていくかを記録＆共有していきます。

- 目標：ETLツールを自在に使いこなせるようになる
- 対象読者：Alteryxを始めたばかりの方/Weekly Challengeの解説が欲しい方

---

## 今回のチャレンジ：Weekly Challenge #002

- タイトル：[Weekly Challenge #002：区切られたデータの準備] [LINK](https://community.alteryx.com/t5/%E3%82%A6%E3%82%A3%E3%82%AF%E3%83%AA%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8-2-%E5%8C%BA%E5%88%87%E3%82%89%E3%82%8C%E3%81%9F%E3%83%87%E3%82%BF%E3%81%AE%E6%BA%96%E5%82%99/m-p/390480)
- レベル感：中級者向け
- ゴール：出力ファイルと同じフォーマットに入力ファイルを変換する。
- 入力１
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658349/5e50a0f5-8388-4a0a-9a27-ad04f6f43ff5.png
">
- 出力
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658349/c112ae83-3735-4fe0-8094-ae84ca1ecda3.png
">

---

## 解いた流れと使用ツール

### ワークフロー全体

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658349/4c1f35f9-e8ae-4c0d-868e-69381160dc7b.png
">

### 処理の手順と解説
1. **列分割ツール**　：Field_1列の中にカンマ区切りで3つのデータがあるため、それを３列に分ける。
1. **セレクトツール**：分割前の列を削除、および分割後の列の列名を定義する。
1. **データクレンジングツール**："と'を削除するために、「句読点」にチェックを入れる。
1. **フォーミュラツール**：Poem_Read_Date列の値が16JUN01のようになっている。これを2001-06-16という見た目に変換する。

もう１パターン作成した。
1. **列分割ツール**　：Field_1列の中にカンマ区切りで3つのデータがあるため、それを３列に分ける。
1. **セレクトツール**：分割前の列を削除、および分割後の列の列名を定義する。
1. **フォーミュラツール**：Poem列の"、Poem_Read_Date列の'をReplace関数で消す。それと同時に、以下のような２重関数を使用して、Poem_Read_Date列の値を指定の日付の形に変形する。
DateTimeParse(Replace([Poem_Read_Date], "'", ""),"%d-%b-%y") 

---

## 詰まったポイントとその解決

- **問題１：フォーミュラツールで使用する関数わからない**
→ 元も子もないが、ぶっちゃけChatGPTで調べれば簡単にわかる。
---

## 結果と出力確認
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658349/c112ae83-3735-4fe0-8094-ae84ca1ecda3.png">

→正しい出力フォーマットで、指定要件を満たしていました！
ただ、２つの方法でデータ量に違いがあったので、より効率の良いフローが大事なのだとわかった。

---

## 今日の学び・振り返り

- **新しく覚えたツール**：データクレンジングツール
- **新たな知識１**：データクレンジングツールの「不要な文字の削除」欄で「句読点」を指定すると、「!" # $ % & ' ( ) * + , \ - . / : ; ?@ [ / ] ^ _ ` { | } ~」が削除される。これによって"も'も同時に削除することができる。
- **新たな知識２**：%bは英語略語の月を表している。
- **新たな知識３**：Replace関数で「"」を置換するようにしたい場合、「'"'」と指定すると変換できる。逆もしかり。

---

## 次回予告
次は【Weekly Challenge #003】に挑戦予定！
フォーミュラツールで使用する関数を覚えたらいろいろできそうだなーと。
今年のAlteryx Inspireに参加するので、それまでにいろいろ覚えておきたいです。

今日もお疲れ様でした！

---
## タグ
`Alteryx` `weekly Challenge` `データ分析` `Predictive Master` `365日チャレンジ` `ノーコード`
google colabを使用してきれいにhtml出力する方法

# Google ColabでノートブックをきれいにHTML化する方法　（初心者向け解説）

## 概要

ローカル環境(ブラウザ上でなく、PC上)でJupyterのHTMLエクスポートがうまくいかない人向けに、Google Colabを使ってノートブックをHTMLに変換する方法を紹介します。

以下の手順を踏めば、Colab上で課題を作成し、HTMLファイルとして出力できます。

## ステップ 0: google Colabとはなにか
google Colabは接続すると、仮想環境(自分のpcとは切り離されたリモート環境)に接続されるので、自分のpc環境に依存せずに開発できます！

[google colabって打つと出てくるページ][link_colab]にアクセスするともうプログラミングできます。楽。

[link_colab]: https://colab.research.google.com/



:::note info
ページ上でファイル(.ipynb)を保存すると基本的にログインしてるgoogleアカウントのdrive上の`/MyDrive/Colab Notebooks`に保存されます。
:::

---

## ステップ 1: 課題用ノートブックの作成

まず、Colabで課題を記述したノートブック `assignment.ipynb` を作成します。
(ファイル名は自由、以下`assignment.ipynb`として話を進めます。)  
![Screenshot from 2025-04-15 22-38-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4058538/53ef164d-3c14-4e6e-ac0e-2be0a474ee3e.png)

※ コード・テキスト・図などを使って課題を作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4058538/5e808f41-57e1-4139-8f20-dfd0fcd8d77c.png)




---

## ステップ 2: HTML化用のノートブックを作成

別のノートブック `to_html.ipynb` を作成し、以下のコードを実行します。


```python
# Google Driveをマウント（保存先として）
from google.colab import drive
drive.mount('/content/drive')

# nbconvert を使用するためにjupyterをインストール
!pip install notebook

# assignment.ipynb を HTML に変換　assignment.ipynbの部分は自分で読みかえてください
!jupyter nbconvert ./drive/MyDrive/Colab\ Notebooks/assignment.ipynb --to html
```

:::note warn
`!jupyter nbconvert ./drive/MyDrive/Colab\ Notebooks/assignment.ipynb --to html`の部分はhtml化したい.ipynbファイル名に各自置き換えてください。
:::

:::note info
`このノートブックにGoogle ドライブのファイルへのアクセスを許可しますか？`というポップアップはすべて許可してください。
:::

エラーなく実行できたら、接続しているgoogleアカウントのGoogle drive上のの`/MyDrive/Colab Notebooks` 上に`assignment.html`があるはずです。これをダウンロードして、インストールしたブラウザで開いて、pdfとして出力して完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4058538/c6ec332f-ad06-4d4f-b2b6-4562d275485d.png)


# おわりに
いかがでしたか？この方法ならブラウザ上で完結できますし、`to_html.ipynb`は毎週、課題ごとに使い回せていいですね。
@firebase/analytics: TypeError: gtagFunction is not a function のエラー調査

こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。

先日、`@firebase/analytics: TypeError: gtagFunction is not a function`というエラーに出くわして、ネットでいい情報が見つからなかったので、その解決方法をメモしておきます。

# 事象
- `@firebase/analytics: TypeError: gtagFunction is not a function` というエラーがブラウザのコンソールに表示される
- Google Analyticsのデフォルトのイベントは問題なく送信されるが、[カスタムイベント](https://support.google.com/analytics/answer/12229021?hl=ja)は送信されない

# 解決方法
- angularfireを19.0.0以上に上げる場合は、firebase sdkのバージョンを11.2.0以上に上げる

package.jsonのdependenciesの抜粋
```js
    "@angular/fire": "^19.1.0",
    "firebase": "^11.6.0",
```

# 調査の経緯
- Google Analyticsの一部の集計データが見られないと報告を受ける
- 調査してみると、ある日を境にカスタムイベントのデータだけが送られていないことに気づく
- githubの履歴を追ってみると、その日にリリースをした形跡がある
- コミットを一つ一つ見ていくと、どうやら@angular/fireのバージョンを18.0.1から19.0.0に上げている
- 19.0.0の不具合の可能性もあるため、よく調べもせずに19.1.0にバージョンを上げてみるが解消せず
- [18.0.1から19.0.0](https://github.com/angular/angularfire/compare/18.0.1...19.0.0)の差分をチェックしてみると、google analyticsの初期化に関するサンプルコードが追加されていた
- サンプルコードに従い、ScreenTrackingService、UserTrackingServiceを追加してみるが解消せず
- 切り分けのため、強制的にangular/fireのバージョンを18.0.1まで戻してみると解消
  - `npm install @angular/fire@18.0.1 --legacy-peer-deps`
- これはやはりangular/fireのバージョンが怪しいということで、[18.0.1から19.0.0](https://github.com/angular/angularfire/compare/18.0.1...19.0.0)の差分をもう一度読み直す
- すると、firebase sdkのバージョンも一緒に上がっていることに気づく
- "firebase": "^10.12.4"だったものを、"firebase": "^11.6.0"に変えて晴れて問題解決

# 反省
- google analyticsにカスタムイベントを送っているクラスは、結合テストの結果が自動で検証しづらいため、モックを用いた単体テストだけを行っている。これはあんまり変えたくない
- ブラウザのコンソールのログをちゃんと見ずにリリースしてしまったｎよくなかった。とはいえ毎回目で見る運用は避けたいので、e2eでコンソールログを取得するかspyするようにしよう
- バージョンアップの際にangular/fireのドキュメントをちゃんと読んでなかった。「Bumped Angular, Firebase, and other dependencies」と書いてあり、これを見落としてなければもっと早く気付けたかもしれない