OmniAICreator/Qiita-1.07M huggingface dataset:
【ChatGPT】自分の心の奥底にある願望について知り、アドバイスを受けましょう。


　どうも、カーブミラーです。

　今回は、自分の心の奥底にある願望について知り、アドバイスを受けましょう。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はありません。あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　著作権法については
　　こちらを参照するのが
　　　良いのではないかと。

　文化庁レポートをもとにした
　　著作権法についての動画（約20分）
　　　[かいちのAI大学　【警告】ChatGPTの画像生成は危険です...【4o Image Generation】](https://youtu.be/8VLUnG-iyo0?si=rAfjMboqmNqppDGq)
***
　まずは、【ニュース】です。

　OpenAIは、
　　コーディングツールである
　　　Windsurfを買収することに合意。

　[Bloomberg：OpenAI Reaches Agreement to Buy Startup Windsurf for $3 Billion](https://www.bloomberg.com/news/articles/2025-05-06/openai-reaches-agreement-to-buy-startup-windsurf-for-3-billion?utm_source=website&utm_medium=share&utm_campaign=copy&embedded-checkout=true)

　Windsurfは、
　　生成AIによるコーディングツールで
　　　AIによるリアルタイムの
　　　　コード補完や修正、
　　　　　デバッグ支援などを強化して､
　　　　　　プログラミングの効率を
　　　　　　　大幅に向上させます。

　Visual Studio Codeを
　　ベースにしている、とか。

　初心者でも自然言語から
　　コード生成が可能で、
　　　使えば使うほど
　　　　ユーザーの癖を学習し、
　　　　　より的確な支援が
　　　　　　受けられる点も
　　　　　　　大きな特徴です。
***
　では、【本題】です。

　今回は、
　　自分の心の奥底にある
　　　願望について知り、
　　　　アドバイスを受けましょう。
　　　　　そのためのPromptです。

　“自分の心の奥底にある願望”とは
　　書きましたが、それほど
　　　深刻なものではなく、
　　　　ちょっとした願望だと
　　　　　思ってください。

　それを
　　掘り下げてくれる
　　　Promptになります。

```Text:自分自身を知るPrompt
アドバイスを求めたり評価したりする前に、自分自身を明確に定義するのを手伝ってください。
まずは、私の希望、夢、そして心の奥底にある願望について、一つずつ質問してください。
最初の質問は「あなたが達成したい大きな目標は何ですか？」です。
その後、私が感じている恐れや障害を探っていきましょう。
そして、目標を概説し、野心を達成するための私の強みと弱みを評価するのを手伝ってください。
この体系的な質問を通して、目標を追求する中で、どのアドバイスが検討に値するのか、どのアドバイスを無視すべきなのかを見極めることができるようになります。
```

　質疑応答を繰り返してから
　　アドバイスをくれます。
　　　さらに続けることもできます。

　言語化するのが
　　大変そうですが、
　　　ChatGPTからも
　　　　補助的に“こうですか”的な
　　　　　発言があったりします。

　気負わずに
　　答えてみてください。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
Invariant failed: Cannot find droppable entry with id...エラーの対処法

# はじめに 
React18.2.0環境で react-beautiful-dndを使用していた際に、タイトルのエラーに遭遇しました。
生成AIをもってしても半日解決できず、重い腰を上げてググることにしました。

# 問題 

ドラッグ可能な要素（droppable）が見つからないことを意味しているらしいです。
```
Uncaught runtime errors:
×
ERROR
Invariant failed: Cannot find droppable entry with id [taskList-ce5d9a1b-c73f-469d-afa3-2dd4eaa35f5c] at handleError (http://localhost:3000/static/js/bundle.js:47055:58) at http://localhost:3000/static/js/bundle.js:47074:7
```



# 解決方法 

調べてみたところ（[参考リンクの記事](https://zenn.dev/takuty/articles/2e375cb349bfc4)、非常にわかりやすいのでお急ぎの方はどうぞ）、不具合の原因が2点ありました。

1. Reactのバージョン18以上であること（例えば、React 17.0.2であれば互換性があります。）
2. ReactがStrictModeで動いていること

React 18ではStrictModeの挙動が変更され、コンポーネントが開発モードで2回マウントされるようになりました。これがreact-beautiful-dndの内部状態管理と競合することで問題が発生しています。

1の場合はpackage.jsonの"dependencies"を書き換えてバージョンを落としてインストールしなおしで改善できるそうです。

しかし、適切なバージョンがわからなかったため、今回は2を採用しました。
index.jsの<React.StrictMode>タグをコメントアウトします。


```js
// 元のindex.js
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

```js
//修正後のindex.js
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);
```
# おわりに 
エラーも出ず、問題なく動作させることが出来ました。
ツールに頼りがちな開発環境でも、エラー解決には実際の事例と解決策の共有が不可欠だと実感しました。
また、react-beautiful-dndの代わりに@hello-pangea/dndというフォークライブラリを使用する方法もあるそうなので、またの機会に触れてみたいと思います。


# 参考
- [Reactバージョン18でreact-beautiful-dndが使えない問題を解決する](https://zenn.dev/takuty/articles/2e375cb349bfc4)
- [Invariant failed: Cannot find droppable entry with id \[...\] · Issue #2396 · atlassian/react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/issues/2396)
コンビネータ論理の基礎

数学の加法の交換法則により、全ての$x,y$に対して$$ x+y=y+x$$がなりたつ。加算を関数$A$で表すと、全ての$x,y$に対して$$A(x,y)=x+y$$と表記できる。作用素$\textbf{C}$で全ての$f,x,y$に対して$$(\textbf{C}(f))(x,y) = f(y,x)$$と定義すると、交換法則は、単純に$$\textbf{C}(A)=A$$と記述できる。$\textbf{C}$は関数を入力として関数を返す作用素（汎関数あるいは超関数）であり、**コンビネータ**と呼ばれる。

他にもいろいろな種類のコンビネータがある。
$(\textbf{B}(f,g))(x) = f(g(x))$
$(\textbf{B}’(f,g))(x) = g(f(x))$
$\textbf{I}(f)=f$　恒等作用素
$(\textbf{K}(a))(x)=a$　定数関数を生成する
$(\textbf{S}(f,g))(x)=f(x,g(x))$　強い合成作用素
$(\textbf{W}(f))(x)=f(x,x))$　二重化あるいは対角化

以下のように変数（関数も含む）$X,Y,Z$に対して還元(reduction)が行われる：
$\textbf{B}XYZ = X(YZ)$
$\textbf{B}’XYZ=Y(XZ)$
$\textbf{I}X=X$
$\textbf{K}XY=X$
$\textbf{S}XYZ=XY(YZ)$
$\textbf{W}XY=XYY$

計算の適用は項$X,Y,Z,W$とすると、
$XYZW=((XY)Z)W$のように左から計算されていく。適応順序が自明であればカッコ()は省略される。

### 参考
https://amzn.to/4m4brFa
【GraphAPI】アクセス許可について

# はじめに

Graph API で Microsoft 365 テナントの情報にアクセスする際のアクセス許可について、概要をまとめました。

# Graph API のアクセス許可

## アクセス許可の種類

Graph API は、利用者や管理者が許可したテナント内の情報にのみアクセスすることができます。

Graph API にアクセスを許可する方法には、以下の 2 種類があります。

* ユーザー委任権限
* アプリケーション許可権限

## ユーザー委任権限

ユーザー委任権限は、アプリケーションがユーザーに代わって情報にアクセスすることを許可する方法です。ユーザーがサインインして利用するアプリケーションで使用されます。

この方法では、ユーザーがアプリケーションにサインインし、アプリケーションに対して自分の代わりに情報へアクセスすることを行うことを許可します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/5350e27f-664a-45c7-bea6-2178e8388afd.png)

::: note
ユーザー委任権限では、ユーザーがアプリケーションにサインインする必要があります。
:::

::: note warn
アプリケーションがアクセスできる情報は、サインインしたユーザーが参照できる範囲に限られます。
:::

## アプリケーション許可権限

アプリケーション許可権限は、テナント管理者が Entra ID 管理センターからアプリケーション自体に対して、アクセス権限を付与する方法です。テナント内の全ユーザーの情報にアクセスしたい場合などに使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680397/7d717365-651a-4be0-b127-8533b5afa99e.png)

::: note
アプリケーション自体にアクセス権限が付与されているため、アプリケーションにユーザーがサインインする必要はありません。
:::

::: note warn
アプリケーション許可権限が付与されたアプリケーションは、テナント全体の情報を取得することが可能になります。
:::

## アクセス許可の比較

2 つのアクセス許可の違いをまとめてみました。

### 主な違い

| アクセス許可 | サインイン | 管理者による許可 | アクセスできる範囲 |
|:-:|:-:|:-:|:-:|
| ユーザー委任 | 必要 | API によっては必要 | サインインしたユーザーが参照できる範囲 |　
| アプリケーション許可  | 不要 | 常に必要 | テナント全体 |

::: note
ユーザー委任権限は一般ユーザーでも使用することができます。アプリケーション許可権限は常にテナント管理者がアクセス許可を付与する必要があります。
:::

::: note warn
ユーザー委任権限の場合でも、一部の API についてはテナント管理者の同意が必要になります。
:::


### 利用できるツールの違い

Graph Explorer は、ユーザー委任権限でのみ Graph API を実行することができます。Graph PowerShell の場合は、ユーザー委任 / アプリケーション許可のいずれの権限でも実行することができます。

| アクセス許可 | Graph Explorer | Graph PowerShell |
|:-:|:-:|:-:|
| ユーザー委任 | 〇 | 〇 |
| アプリケーション許可 | × | 〇 |

(参考：Graph エクスプローラーを使用して Microsoft Graph API を試す)
https://learn.microsoft.com/ja-jp/graph/graph-explorer/graph-explorer-overview

(参考：Microsoft Graph PowerShell SDK をインストールする)
https://learn.microsoft.com/ja-jp/graph/sdks/sdk-installation#install-the-microsoft-graph-powershell-sdk

# 関連記事

Graph Explorer からユーザー委任権限で Graph API を実行する方法については以下の記事で紹介しています。

https://qiita.com/atsmin77/items/a1d53031b120da5d9697

Graph PowerShell については以下の記事で紹介しています。

https://qiita.com/atsmin77/items/264d10bd9d7e9dfeaace
【Rails】RSpecを使用したモデルの単体テスト

# 記事概要
Ruby on Railsのモデル単体テストについて、まとめる

# 前提
- Ruby on Railsでアプリケーションを作成している
- アプリにRSpecをインストールしている
- RSpecの設定が完了している

# RSpecとは
https://qiita.com/likapantrip/items/5bff444bf5edfe4f1436

## モデルテストコードを書く方針
インスタンスを生成し、それがモデルに規定したどおりの挙動になるか、を確かめる
例）バリデーションが正しく働くか

# 手順(テストファイル作成)
1. モデルのテストファイルを生成するため、下記コマンドを実行する
    ```
    # アプリのディレクトリに移動
    % cd ~/[アプリ名]
    
    % rails g rspec:model [モデル名]
    ```
1. `spec/models/モデル名_spec.rb`が作成されたことを確認する
1. `モデル名_spec.rb`に`require 'rails_helper'`が記述されていることを確認する
    ```ruby
    require 'rails_helper'
    
    RSpec.describe モデル名, type: :model do
      pending "add some examples to (or delete) #{__FILE__}"
    end
    ```
1. 上記から`pending "add some examples to (or delete) #{__FILE__}"`を削除する
    ```ruby
    require 'rails_helper'
    
    RSpec.describe モデル名, type: :model do
      
    end
    ```

# 手順(テスト用ダミー画像の用意)
1. `public`ディレクトリに`images`フォルダを手動作成する
1. `public/images`フォルダに、ダミー画像を格納する

# 手順(テストケースの記述)
1. [[モデル名]_spec.rb](https://qiita.com/likapantrip/items/2175bae3497680319d6b)にテストケースを記述する
    1. 機能別・条件別・テスト詳細別にグループ分けを行う
    1. 保存するデータ(インスタンス)を作成する
    1. テストコードを記述する
        ※各テストコードが想定通りに実行できるかを確認するため、`rails c`コマンドでコンソールを起動して確認を行う

# 手順(テストファイルの実行)
1. テストファイルを実行するため、下記コマンドを実行する
    ```
    # アプリのディレクトリに移動
    % cd ~/[アプリ名]
    
    % bundle exec rspec spec/models/モデル名_spec.rb 
    ```
1. ターミナル.appで正常完了していることを確認する
    結果が緑色で表示されれば実行成功

# まとめ
## 画像添付した際にエラー発生
active_storageを用いたモデルの単体テストをする際に、エラー`MySQL client is not connected`が発生した場合、下記を追記する

```config/environments/test.rb
Rails.application.configure do
  # MySQLのエラーが発生する場合、追記
  config.active_job.queue_adapter = :inline
  
  # 省略
end
```

# Ruby on Railsまとめ
https://qiita.com/likapantrip/items/46b43c9d1309b6633f0a
【Rails】[モデル名]_spec.rbについて

# 記事概要
Ruby on Railsのモデル用単体テストファイルについて、まとめる

# 前提
- Ruby on Railsでアプリケーションを作成している
- アプリにRSpecをインストールしている
- RSpecの設定が完了している

# 基本情報
## ファイルパス
spec/models/[モデル名]_spec.rb

# まとめ(テストケース整理)
```モデル名_spec.rb
RSpec.describe [モデル名], type: :model do
  describe '[機能名]' do
    context '[条件]' do
      it '[テストケース]' do
        # テストケースに合わせたテストコードを記述
      end
    end
    context '[条件]' do
      it '[テストケース]' do
        # テストケースに合わせたテストコードを記述
      end
    end
  end
end
```

```user_spec.rb
RSpec.describe User, type: :model do
  describe 'ユーザー新規登録' do
    context '新規登録できるとき' do
      it 'すべてのカラムに値が存在すれば登録できる' do
        # テストケース[nicknameが空では登録できない]に合わせたテストコードを記述
      end
    end
    context '新規登録できないとき' do
      it 'nicknameが空では登録できない' do
        # テストケース[nicknameが空では登録できない]に合わせたテストコードを記述
      end
      it 'emailが空では登録できない' do
        # テストケース[emailが空では登録できない]に合わせたテストコードを記述
      end
    end
  end
end
```

# まとめ(インスタンス生成)
- [FactoryBot(Gem)](https://qiita.com/likapantrip/items/1dedea14ed93c37053c4)を使用する
    ```user_spec.rb
    RSpec.describe User, type: :model do
      before do
        # インスタンス生成
        @user = FactoryBot.build(:user)
      end
      
      # 省略
      it '[テストケース]' do
        # before処理実行後に処理
      end
      # 省略
    end
    ```
- FactoryBot(Gem)を使用しない
    ```user_spec.rb
    RSpec.describe User, type: :model do
      # 省略
      it '[テストケース]' do
        # インスタンス生成
        user = User.new(nickname: 'test', email: 'test@example', password: '000000', password_confirmation: '000000')
        
        # 処理
      end
      # 省略
    end
    ```

# RSpec
https://qiita.com/likapantrip/items/5bff444bf5edfe4f1436
LeetCode daily 1920. Build Array from Permutation

# 【LeetCode #1920】Build Array from Permutation

## はじめに
GW が終わります...
今日の daily は easy でしたので簡単に感じた方も多いかもしれませんが，早速やっていきましょう．

## 問題概要
与えられた重複のない 0~nums.length-1 の値を持つ配列に対して，下記を満たす配列を返す．
* ans[i] = nums[nums[i]]
### 例
```plaintext
nums = [2, 0, 1]
ans = [nums[nums[0]], nums[nums[1]], nums[nums[2]]]
    = [nums[2], nums[0], nums[1]] = [1, 2, 0]
```

## 解法①：実直に配列に格納パターン
単純に，**ans[i] = nums[nums[i]]** を満たす配列を作成すれば良いので，あらかじめ ans を用意しておき，forループを行う．
```python
class Solution:
    def buildArray(self, nums: List[int]) -> List[int]:
        ans = [0] * len(nums)
        for i, n in enumerate(nums):
            ans[i] = nums[nums[i]]
        return ans
```
問題なく AC になります．
ただ，問題文にこのような文言が！
> **Follow-up:** Can you solve it without using an extra space (i.e., O(1) memory)?

## 解法②：O(1) での解法（in-place）
解法①では，O(n) のメモリ使用量なので，これを O(1) に書き換えます．
### 概要
nums[i] に古い値と新しい値の両方の情報を持たせます．（直接書き換えていくと，nums が破壊されるため）
その後，新しい値のみ抽出します．

### アプローチ
nums は 0~n-1 の順列で構成される長さ **n** の配列．
各要素に，n 進数の1桁目=古い値，2桁目=新しい値を格納するイメージ．
これにより，nums[i] % n で古い値，nums[i] // n で新しい値が取得できるようになる．
具体的には **nums[i] += n * (nums[nums[i]] % n)** で2つの情報を保持する．

1. nums[i] % n で古い値が取得できる理由
```math
\displaylines{
nums[i] += n * (新しい値) \\
nums[i] = 元の値 + n * 新しい値 \\ 
nums[i] \% n = (元の値 + n * 新しい値) \% n = 元の値
}
```
となり、必ず元の値だけが抽出される．
2. nums[i] // n で新しい値が取得できる理由
```math
\displaylines{
nums[i] = 元の値 + n * 新しい値 \\ 
nums[i] // n = 新しい値
}
```
 が成立する（整数除算）.

#### 具体例
> nums = [0, 2, 1, 5, 3, 4]で，i = 4 の時
1. n = 6， nums[i] = 3， nums[nums[i]] = 5
1. nums[i] += 6 * (5 % 6) = 33
1. nums[i] %= 6 = 3 = 古い値
1. nums[i] //= 6 = 5 = 新しい値
### 実装

```python
class Solution:
    def buildArray(self, nums: List[int]) -> List[int]:
        n = len(nums)
        for i in range(n):
            nums[i] += n * (nums[nums[i]] % n)
        for i in range(n):
            nums[i] //= n
        return nums
```
実装はこうなります．

## まとめ
今回は easy 問題で，配列の中身を入れ替える問題を解きました．
普通に解けば簡単な問題ですが，in-place で解こうとすると，結構難しい問題だったのではないでしょうか？
また次回，別問題解説します！お楽しみに :)

## おまけ
TypeScript だとこうなります．
**解法①**
```typescript
function buildArray(nums: number[]): number[] {
    let ans: number[] = Array(nums.length).fill(0);
    for (let i: number = 0; i < nums.length; i++){
        ans[i] = nums[nums[i]];
    }
    return ans
};
```
**解法②**
```typescript
function buildArray(nums: number[]): number[] {
    const n: number = nums.length
    for (let i: number = 0; i < n; i++){
        nums[i] += n * (nums[nums[i]] % n);
    }
    for (let i: number = 0; i < n; i++){
        nums[i] = ~~(nums[i] / n);
    }
    return nums
};
```
AWSド初心者から始める構成図作成

##  1.はじめに

皆さん、こんにちは！
私は先日CLFを取得したので、さあ次はSAAだ！！
・・・といきたいんですが、CLFの時に感じていた「問題文のキーワードで回答は推測できるけど、ぶっちゃけ何言ってるのかよく分かんない...」
という、根本的なモヤモヤを解決できずにいます。
これを解決するには、やはり構成図を作成して全体像を掴むことが大事かな？と思ったので、今回練習内容を記事にしてAWSサービスへの理解を深める＆記憶の定着を図ります。
（自分用になってしまい読みにくいかもしれません。その場合は申し訳ありません。）

##  ２．シナリオの準備

さて、構成図作成といってもシナリオがなければ作れませんよね。
AIにいくつか聞いて、気になったものを作ってみましょう。

![スクリーンショット 2025-05-06 105138.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4074910/859e6965-618e-4bb9-945a-2117e4b54351.png)


・・・ふむふむ。
グローバル向け配信といえば、CloudFlontが思い浮かびます。
アクセス制御、トラフィック急増時のスケーラビリティといえば、ELBやAuto Scalingでしょうか。
しかし著作権保護？キャッシュ戦略？？
この辺りは見当もつきません。
私の無知を晒したところで、もう少し踏み込んで聞いてみましょう。

![スクリーンショット 2025-05-06 111411.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4074910/c9004f6a-2731-4b02-987f-6dae2268855d.png)
![スクリーンショット 2025-05-06 111427.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4074910/f8ae9cc7-e861-48d1-8455-4c012adf5579.png)

今回の構成図で使うサービスの一覧のようです。
聞き馴染みのあるサービスが多いですが、構成図となるとなかなかピンときませんね。
流れとしては、
S3に動画を保存→ユーザーからの配信リクエスト→Lambdaが起動→S3からCloudFlontでユーザーに配信をする。
といった流れでしょうか？
今回は勉強なので、これ以上のヒントは得ずに一旦構成図を作ってから答え合わせをしてみましょう。

##  ３．構成図作成～答え合わせ

それでは、私が作成した構成図がこちらです。

**どんっ！** 

![スクリーンショット 2025-05-06 123623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4074910/714470e8-e085-47dc-9800-a378c54716d3.png)

大きく２つに分けて作成しました。
①APIリクエスト・・・ログイン～動画のタイトルなどの情報を取得。

②動画配信・・・①で得た動画の情報をもとに、動画そのもののデータをユーザーへ配信する。

これだけでも色々悩みながら作成したのですが、普通に考えて当初使う予定であった
- Amazon Cognito
- Amazon API Gateway
- AWS Lambda
- IAM（Identity and Access Management）
- Amazon CloudWatch
- AWS CloudTrail

が存在していません。
不正解であることは確実なのですが、これらがどこに入ってくるのかよく分かりません・・・。
さて、この辺りで正解発表に移りましょう。


**～以下、AIからの返答です～** 

改善点・アドバイス
1. Webアプリ（SPA）の配信経路が抜けている
ユーザーはまず「Webアプリ（SPA）」にアクセスしますが、その静的ファイル（HTML/JS/CSS）はS3＋CloudFrontで配信するのが一般的です。
今回の図では「動画配信」だけになっているので、アプリ配信の流れも追加するとより実践的です。
例：
ユーザー
  ↓
Route 53
  ↓
CloudFront（ACM）
  ↓
S3（Webアプリ的ファイル）

2. Cognito（ユーザー認証）の記載
ユーザー認証・認可はCognitoを使うのが一般的です。API GatewayやWebアプリの近くにCognitoを配置し、「認証」の流れを矢印で示すとベストです。

3. CloudFrontとLambda@Edgeの関係
Lambda@EdgeはCloudFrontの「中」で動くイメージ、CloudFrontの横や下に小さく添える形が分かりやすいです。
CloudFront→Lambda@Edge→S3という直列ではなく、「CloudFrontのリクエスト時にLambda@Edgeが動く」という表現がベストです。

4. WAFの位置
WAFはCloudFrontやAPI Gatewayの「前」に配置するのが一般的です（リクエストを最初に検査するため）。

5. ACMの表現
ACMは「証明書を提供する」だけなので、CloudFrontやAPI Gatewayの横に「ACM（証明書）」と注釈で表現するのが一般的です。

6. ** GatewayとCloudFrontの関係**
APIリクエストと動画配信は別経路です。API Gatewayは動画ファイルの配信には関与しません。

**～ここまで～** 

##  ４．振り返り
さて・・・。
色々と足りない点、間違っている点がありましたね。
今回の記事はここまでにして、次回は修正～正しい構成図を完成させるところまでできればいいかなと考えています。
ここまでお読み頂き、ありがとうございました！
【React初心者メモ】relativeとabsolute

### relative クラス
要素を通常の文書の流れに従って配置しつつ、位置を調整するための基準点として機能します。使用方法としては、親要素に relative クラスを適用することで、その子要素の absolute 配置の基準となります。

### absolute クラス
要素を通常の文書の流れから取り除き、最も近い relative またはそれ以外の位置指定がされた親要素を基準に配置します。使用方法としては、子要素に absolute クラスを適用し、top-0, left-0 などの位置指定クラスを組み合わせて配置を調整します。

### 具体例：親要素の左上に子要素を配置
以下の例では、親要素に relative クラスを適用し、子要素に absolute クラスと位置指定クラスを適用しています。
```
<div class="relative w-64 h-64 bg-gray-200">
  <div class="absolute top-0 left-0 w-16 h-16 bg-blue-500">
    子要素
  </div>
</div>
```
このコードでは、親要素（灰色のボックス）の左上に、子要素（青色のボックス）が配置されます。親要素に relative クラスを適用することで、子要素のabsolute 配置の基準となります。
線形代数学の勉強法(Gilbert Strang)

MITの教授が教えた線形代数学の勉強法は、「ただ考えさせること（Just make students think）」です。

- 記号を拾い上げる（pick up on symbols）
- それが何を意味するのか考える（what does it mean）
- なぜそれが成り立つのか考える（why is it true）
- 証明を与える（give the proof）

素晴らしい考え方ですね。

美しい数式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155256/ac6b55c6-4fbf-4770-b7b7-eb65577c9ab7.png)


<iframe width="916" height="515" src="https://www.youtube.com/embed/7UJ4CFRGd-U?list=PL221E2BBF13BECF6C" title="An Interview with Gilbert Strang on Teaching Linear Algebra" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Apacheのバーチャルホストについて

## 概要
Apacheのバーチャルホストを確認する機会があったので、
備忘録がてら残します。

## バーチャルホストがある場所
バーチャルホストのconfファイルは以下ディレクトリにある
```
/etc/httpd/conf.d/
```
この配下に[hogehoge].confをいう名前でファイルを作ればいい
ファイルの中身はこんな感じにする
```
#*:80 この設定は、80番ポートで受信したすべてに対するバーチャルホスト設定という意味

<VirtualHost *:80>
    ServerName [設定したいドメイン]
    DocumentRoot [ドキュメントルート]
    CustomLog "[ログ吐かせたいディレクトリ]" combined
    ErrorLog "[エラーログを吐かせたいディレクトリ]"
    
</VirtualHost>
```

ドメインとドキュメントルートを別に設定すると、同じサーバー内に本番とテスト環境両方作成することも可能

## まとめ
最近AWS内部というより、linuxと睨めっこすることが増えてきました。
今回Apacheと睨めっこしたのですが、中々よくわからないですね～

設定Xを確認するために、ファイルA.B.Cみたいな感じであちこち確認しないといけないですね。
ぼちぼち頑張っていきます。
Pythonでファイルを読み込む3つの方法

Pythonを使ってテキストファイルを扱う際、**ファイルの読み込み処理**は非常に基本的でありながら重要な操作の一つです。本記事では、Pythonでテキストファイルを読み込む際によく使われる3つの方法、

* `read()`
* `readline()`
* `readlines()`

について、それぞれの使い方や違いを具体例とともに解説します。

---

### 1. `read()`メソッド：ファイル全体を一括で読み込む

```python
with open("my_file1.txt", "r") as f:
    content = f.read()
    print(content)
```

#### 特徴

* ファイルの内容を**すべて1つの文字列**として読み込みます。
* サイズの指定をしなければ、**全体を一括で**読み込みます。
* メモリにすべて読み込むため、**大きなファイルには不向き**です。

---

### 2. `readline()`メソッド：1行ずつ読み込む

```python
with open("my_file1.txt", "r") as f:
    line1 = f.readline()
    print(line1)
```

#### 特徴

* ファイルの内容を**1行ずつ**順番に読み込みます。
* ループ処理と組み合わせることで、行単位で柔軟な操作が可能。
* メモリ効率がよく、大きなファイルにも適しています。

```python
with open("my_file1.txt", "r") as f:
    for line in f:
        print(line.strip())
```

---

### 3. `readlines()`メソッド：すべての行をリストで取得

```python
with open("my_file1.txt", "r") as f:
    content_l = f.readlines()
    print(content_l)
```

#### 特徴

* 各行を要素とする**リスト形式**で全体を一度に読み込みます。
* 各要素が文字列として1行ずつ格納されているため、リスト処理が得意な場合に便利。
* やはり、大きなファイルには注意が必要。

---

### まとめ

| メソッド          | 説明                 | 向いているケース           |
| ------------- | ------------------ | ------------------ |
| `read`      | ファイル全体を一括で文字列として取得 | 小さめのファイルや全文処理したい場合 |
| `readline`  | 一行ずつ読み込む           | 大きなファイル、逐次処理が必要な時  |
| `readlines` | 全行をリストとして一括取得      | 行ごとにまとめて扱いたい場合     |

---

https://docs.python.org/ja/3.13/tutorial/inputoutput.html#reading-and-writing-files
【Fusion】図解｜フィレットのG1/G2/接線ウェイトのざっくり使い分け方

前からFusionを使ってて気になってた、フィレットコマンドの中の「G1」「G2」について、違いと使い分け方を図解しました。

![1746365242-QE5X1mMDJbFTwezO34Uf0lsq.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/e5ceca9f-3f00-4432-91eb-57ea228907fb.jpeg)

# G1とG2の違い
### 結論：カーブの切り替わりが、G1は急、G2はスムーズ
G1とかG2は業界標準語とのこと (後述)。
要は、急にカーブが始まるのがG1、徐々にカーブが始まるのがG2。
![フィレット曲率.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/e789586e-517b-46f4-b442-189883f8f95f.jpeg)


### G2の特徴：見た目をなめらかにできる
G2にすると、光をあてたときにハイライトの切り替わりがG1よりやわらかく、スムーズになる。
![vv.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/85f9ddfc-7d8a-474d-81e5-832feb1da8db.gif)

### G1は円弧になれるが、G2は円弧になれない
接線ウェイト(後述)が1.0のとき、G1の曲線は純粋な円弧になりますが、G2は常にいくつかの曲率を組み合わせた曲線の組み合わせになるようです。
![1746365075-s6M5jnEl9frCVQhBUW2LKP10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/fc2ff0b9-566b-4620-a01f-cd78a64dc7a5.jpeg)

# 使い分け方
自分みたいに個人で3Dプリンタを使うレベルならば、常にG1かつ接線ウェイト1.0でよい気がします。(円弧以外のものを手に負える気がしない、、、)
外見や見た目を気にする場所だけG2にして、適宜接線ウェイト(後述)を調整する、くらいでしょうか。

# 補足

### 1️⃣接線ウェイトについて
G1とG2ともに、接線ウェイトを変えると、曲線のふくらみの具合を連続的に調整できます。厳密な仕組みはよくわかりませんが、数値が大きいとぷっくり、数値が小さいとひしゃげるような格好となります。
![1746361645-yg0w8bUFxTdBJ7mZeazth2Qj.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4029866/3ac05449-6d7d-4ecd-ad86-8602e33f7118.jpeg)
なお、G1で接線ウェイト1.0のとき、曲線は純粋な円弧になるようです。

### 2️⃣そもそもG1とかG2って何の用語なのか
GPTくんに調べてもらったところ、学術界から派生した業界標準用語のようです。
Autodeskのほかのソフトだと解説がありますが、Fusion向けのものは見つかりませんでした。余裕があれば読み込んでみたいです。
参考文献
<a href="https://help.autodesk.com/view/ALIAS/2024/JPN/?guid=continuity-g0-g1-g2-g3&utm_source=chatgpt.com">Alias AutoStudio 2024のヘルプページ</a>
<a href="https://www.dptcorporate.com/ja/top-10-features-analysis-tools-and-quality-check-part-2/?utm_source=chatgpt.com">DPTという機械設計ソフトウェアのヘルプページ</a> 


い
コンビネータ論理：抽象化1 Exercise 2.26

この記事の練習問題。
https://qiita.com/Trubetzkoy/items/c55fc03a235e72022643

### Exercise 2.26
$[x,y,z].xzy$
$\equiv [x].([y].([z].(xz)y)))$

### (i) zで抽象化
$[z].(xz)y$
$\equiv S([z].xz)([z].y)$
$\equiv S(x)(Ky)\equiv Sx(Ky)$
検証する。
$Sx(Ky)z\rightarrow xz((Ky)z)\rightarrow xz(y)\rightarrow xzy$

### (ii) yで抽象化
$[y].Sx(Ky)$
$\equiv [y].(Sx)(Ky)$
$\equiv S([y].Sx)([y].Ky)$
$\equiv S(K(Sx))K$
検証する。
$S(K(Sx))Ky$
$\rightarrow S(K(Sx))y(Ky)$
$\rightarrow (K(Sx))y(Ky)$
$\rightarrow Sx(Ky)$ Q.E.D.

### (iii)xで抽象化
$[x].S(K(Sx))K$
$\equiv[x].(S(K(Sx)))K$
$\equiv S([x].S(K(Sx)))([x].K)$
$\equiv S(S([x].S)([x].K(Sx)))(KK)$
$\equiv S(S(KS)(S([x].K)([x].Sx)))(KK)$
$\equiv S(S(KS)(S(KK)S))(KK)$
となる。

右から$x$を適用して検証する。
$S(S(KS)(S(KK)S))(KK)x$
$\equiv S\underbrace{(S(KS)(S(KK)S))}\underbrace{(KK)}x$
$\rightarrow S(KS)(S(KK)S)x\\{(KK)x\\}$
$\rightarrow S\underbrace{(KS)}\underbrace{(S(KK)S)}x\\{(KK)x\\}$
$\rightarrow(KS)x\\{(S(KK)S)x\\}\\{(KK)x\\}$
$\rightarrow S\\{(KK)x(Sx)\\}\\{K\\}$
$\rightarrow S\\{K(Sx)\\}K$
$\rightarrow S(K(Sx))K$ Q.E.D.

つまり
$[x,y,z].xzy$
$\equiv [x].([y].([z].(xz)y)))$
$\equiv S(S(KS)(S(KK)S))(KK)$
となる。式は$S$と$K$のみで表現される。

第1変数$x$はそのままで、第2、第3変数の$y,z$が$zy$と順序が交替するからなのか？コンビネータにはどんな操作が隠れているのだろうか？
~~たまたま$I$コンビネータが出てこないだけだろうか？~~$I=SKK$なので$I$が現れるかどうかは重要ではないが。
足立区の安全な経路検索



足立区の安全な経路検索サービスを公開しました。

世のため人のため、東京都内でも最も危険な足立区の安全性を高めるべく作成しました。
というのは冗談で、実用性のないお遊びです。

https://keiro.onrender.com/

経路検索を行うときに、リスクがある箇所に重みづけして評価するということをやっています。学びを記載します。

# 作ったWEBサービスの説明

出発地点、到着地点、リスクの重みを指定すると、なるべく交通事故が発生していない、リスクが低そうな車両通行可能な道路を経路検索します

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4079551/5b9e6f36-cec9-403c-a131-9df016d6d929.png)

# 使用技術
- バックエンド: Flask
- フロントエンド: HTML, CSS, JavaScript
- 地図ライブラリ: Leaflet.js, OSMnx
- データ可視化: Folium
- デプロイ: Render.com


# 学び

### 交通事故発生箇所とリスク重みづけする地図情報の対応付けがムズイ

地図の道路情報はノードという点と、ノード間を結ぶエッジという線分で構成されています。
ノード、エッジの座標と交通事故発生箇所の座標が完全に一致するわけではありません。
ここで、対応付けの問題が発生します。

##### 事故発生箇所を中心に半径100メートル内のノードに重み付けする案
ノードの配置間隔は一定ではないようで、一般の車両が通れる道路だと、最大200メートル間隔くらいらしい。だから半径100メートルなら最悪でも1ノードは存在するという考えです。
範囲が広すぎて交通事故と関係ない経路にもリスクがついてしまうのでやめました。


##### 事故発生箇所を中心に半径100メートル内のノードに重み付けし、さらに中心からの距離に応じた補正係数をかける案

係数により少ない重みづけにはなるが、交通事故と関係ない経路にリスク加点してしまうのは変わらない。
おやじ狩りリスクポイントを避ける経路検索ならこれでよかったかもしれない

##### 事故発生箇所から最寄りのノードのみをリスク評価対象とする案
よさそうだったが、同じ交差点内に複数ノード存在する場合があった。
交通事故発生箇所からの最寄りノードさえ通らなければ、同じ交差点を通ってもリスク評価しないのは正しく無いように思えたので止めました。

##### 事故発生箇所から最寄りのノードに加えて、事故発生箇所からの距離が僅差かつ隣接しているノードがある場合、リスク評価する案
これにしました


### データ量が多くてムズイ
当初は、日本全国経路検索する気でいましたが、とても愚かな考えでした。
リスクの重みづけをするという独自のアルゴリズムを実行する為、自前のバックエンド処理で経路計算を行う必要があります。
個人(しかも無料のデプロイサービスプラン)で全国の経路計算は無理だったので、最も安全な経路検索に意味がありそうな足立区に絞りました。

##### 地図データ切り出し最適化
経路計算につかう地図データはOpenStreetMapから直接ファイルを取得し加工し、読み込む方法もあるようですが、
https://qiita.com/kkdd/items/b30db8fe72ad3861ad74

OSMnx(OpenStreetMapのデータをPythonで扱うライブラリ)を使用して、
下のようにOpenStreetMapから直接取得し、GraphML形式で保存する方法をとりました。

```
self.G = ox.graph_from_place('足立区, 東京都, 日本', network_type='drive')
ox.save_graphml(self.G, base_graphml_file)
```
https://github.com/shirousuda/keiro/blob/main/route_calculator.py#L271-L277

リスク評価を含めてGraphML形式で保存しておくことが可能ですので、
なるべく計算済みのデータを読み込むだけの状態にして遅くならないようにしました。

##### STRtreeがとにかく早い
~~仕組み理解していませんが~~
地理データの世界では定番の高速化手法らしいです。
事故地点から近いノード検索するときに使用しました。

```
# 空間インデックスを作成
edge_tree = STRtree(edge_geometries)

# 各事故地点について処理
for accident in accident_data_proj.iterrows():
    # 近いエッジを検索（100mバッファ）
    buffer_dist = 100  # メートル
    nearby_indices = edge_tree.query(accident_point.buffer(buffer_dist))
```
https://github.com/shirousuda/keiro/blob/main/route_calculator.py#L142-L175

### リスクの評価方法がムズイ

あまり安全な経路になってなさそうです。

大きい道路は母数が大きい分、事故が多くなるバイアスがある。
大きい道路を一直線に進むより細めの道路をくねくね進んだほうが安全という評価になってしまう。
Geminiで描いた可愛い子をまとめてみた。

# 概要

Geminiで描いた可愛い子をまとめてみました。


# 実装

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

```
炎の杖を使う魔法少女を描いてください。
```
![炎の杖を使う魔法少女_20250415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/28a224f4-4812-48c1-bba1-60b328daaaa7.png)


```
光のフルートを使う魔法少女を描いてください。
```
![光のフルートを使う魔法少女_20250426.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/2d9c246a-3004-4d34-9b26-eafce464ffbe.png)


```
光の三味線を使う魔法少女を描いてください。
```
![光の三味線を使う魔法少女_20250504.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/25b85596-6a07-4fe1-9045-f588f35b7d09.png)


```
聖なるマイクを使う魔法少女を描いてください。
```
![聖なるマイクを使う魔法少女_20250430.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/801f3b44-d525-4008-9572-22b26a79ad5a.png)


```
電撃のギターを使う魔法少女を描いてください。
```
![電撃のギターを使う魔法少女_20250422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/1e12a93a-5632-470c-a417-50703bd004c0.png)


```
電撃の弓矢を使う魔法少女を描いてください。
```
![電撃の弓矢を使う魔法少女_20250414.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/08e6f4d5-9297-40fc-97c6-dada3c5b53e4.png)


```
電撃の盾を使う魔法少女を描いてください。
```
![電撃の盾を使う魔法少女_20250419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/4cc68fcb-8519-4454-9327-0e3233a4ec13.png)


```
氷の笛を使う魔法少女を描いてください。
```
![氷の笛を使う魔法少女_20250506.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/24915096-a158-4891-9a69-da75a41114e4.png)

# まとめ

何かの役に立てばと。
【React初心者メモ】通常フロー

通常フロー（Normal Flow）は、CSSレイアウトの土台となる「要素が特別な位置指定をしない限り従う配置ルール」です。
## 通常フロー
### ブロックレベル要素
* \<div\>, \<p\> などは、親コンテナの幅いっぱいを使い、上から下へ一行ずつ積み重なる。
* 隣接するブロック同士の縦マージンは上下マージンが重なると大きい方のマージンだけが適用される。
### インライン要素
* \<span\>, テキストノードは、左から右へ文章のように並び、行末で自動的に折り返される。
* 水平のマージン／パディングを指定すると文字間のスペースとして機能しますが、垂直マージンを指定しても周囲の要素との間隔には影響を与えない。これは、インライン要素が行内での配置を基準としており、垂直方向のマージンが行の高さに影響しないため。

## 通常フローから外れるケース
### 浮動配置 - float
* 通常フローから除外
float-leftやfloat-rightを指定すると、要素は 通常フローから外れ、可能な限り左または右に寄せられます。
* 他の要素が周り込む
float プロパティを使用して要素（例えば画像）を左または右に浮かせた場合、その周囲のインライン要素（主にテキスト）が、浮かせた要素の周囲を取り囲むように配置されます。

実際の使用例・・・
画像とテキストの回り込み: 画像を左に配置し、テキストがその右側に回り込む場合。
横並びのナビゲーションバー: ナビゲーションリンクを横に並べるために使用。
複数列のレイアウト: 複数の列を横に並べるレイアウトを作成する際に使用。
広告バナーの配置: テキストの横に広告バナーを配置する場合。
### 絶対配置 - absolute
* 通常フローから除外
absoluteを指定した要素は、通常の文書の流れから取り除かれ、他の要素とは独立して配置されます。
* 最も近い「位置指定された」祖先要素を基準に配置
要素は、最も近い「位置指定された」祖先要素（position が relative, absolute, fixed, または sticky に設定されている要素）を基準にして配置されます。もしそのような祖先要素が存在しない場合、ページ全体（<html> 要素）を基準に配置されます。
* 配置の制御
top, right, bottom, left プロパティを使用して、基準となる要素からの位置を指定できます。

実際の使用例・・・
ドロップダウンメニューの作成: メニューの下にドロップダウンを表示する場合。
ツールチップの表示: 特定の要素にマウスを乗せたときにツールチップを表示する場合。
モーダルウィンドウの表示: 画面の中央にモーダルウィンドウを表示する場合。
画像ギャラリーのオーバーレイ: 画像の上にキャプションやボタンを重ねて表示する場合。
### 固定配置 - fixed
* 通常フローから除外
fixedを指定した要素も、通常の文書の流れから取り除かれます。
* ビューポートを基準に配置
要素は、ブラウザの表示領域（ビューポート）を基準にして配置されます。
* スクロールに影響されない
ページをスクロールしても、要素の位置は固定され、常に同じ位置に表示されます。
* 配置の制御
top, right, bottom, left プロパティを使用して、ビューポートからの位置を指定できます。

実際の使用例・・・
固定ヘッダーの作成: ページ上部に常に表示されるヘッダーを作成する場合。
スクロール追従のボタン: ページの右下に常に表示されるボタンを作成する場合。
通知バーの表示: 画面の上部または下部に固定された通知バーを表示する場合。
チャットウィンドウの固定: 画面の隅に常に表示されるチャットウィンドウを作成する場合。
第4回 SVG ホームアイコンの作成とhoverによる色変え

# はじめに
SVGでホームアイコンを作ります。
また、このホームアイコンの色をマウスホバーしたら色を変更します。

# 今回実施する内容
インターネットでよく見かけるホームアイコン、家のマークを作ります。
マウスホバー時に家の色を変更します。
![homeIcon.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/f717e027-3103-4284-8652-69fe5ffe04b6.gif)


# ソースコード(Git Hub)
https://github.com/Build-Mount/SVG_04_homeIcon_css

# 環境
OS: Windows 11 JP (64bit)
Edge:バージョン 136.0.3240.50 (公式ビルド) (64 ビット)

# 参考
[第2回 SVG ハンバーガーアイコン＋hover](https://qiita.com/Mount/items/7b4101afcd1c23ffb227)

[第3回 SVG ローカル環境のCORS対処](https://qiita.com/Mount/items/980291339e9c6c4144a6)

# 用語

# ホームアイコン作成
## ホームアイコンの設計
ホームアイコンのパスは、以下のように設計します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/df809979-527a-450f-9388-544017671996.png)
図の黒字部分がホームアイコンの外枠です。
アイコンのサイズ（ViewBox）は、32×32の正方形です。
hoverした時に円の表示することを想定し、円内に収まるように実際のアイコンサイズは少し小さめにしています。オレンジ色のところにアイコンが収まれば、hover時に円を表示してもきれいに円内にホームアイコンが収まります。

## ホームアイコンのソースコード
```html:homeIcon.svg
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <symbol id="homeSymbol" viewBox="0 0 32 32" >
    <path d="M16 7 L17 7 L26 16 L26 17 L23 17 L23 26 L18 26 L18 20 L15 20 L15 26 L10 26 L10 17 L7 17 L7 16 z"/>
  </symbol>
</svg>
```
ホームアイコンのパスは、`path d=・・・`に記載した通りで、これが上図の設計に従ったパスです。

# ホームアイコン呼び出し元のソース
```html:menu.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="homeIcon.css" type="text/css">
    <title>menu</title>
</head>
<body>
<svg width="48px" height="48px" class="fill">
  <use xlink:href="homeIcon.svg#homeSymbol"></use>
</svg>
</body>
</html>
```

svgタグを使用して、homeIcon.svgのhomeSymbolの呼び出しを行います。
svgタグではアイコンサイズを48px✕48pxとし、アイコンのものとのviewBox 32x32よりは少しスケールアップしました。
また、hover時にホームアイコンの入りを変えるために、classで「fill」を適用しました。

# homeIcon.cssの作成
```css:homeIcon.css
.fill {
    fill:red;
    stroke: black;
}

.fill:hover {
    fill: blue;
}
```
ホームアイコンの塗りつぶし色は、`fill`属性を使用して通常時を赤、hover時に青にしました。
ホームアイコンの枠自体は、`stroke`属性を使用して、黒にしました。

# おわりに
ホームアイコンを作成してみました。
VS Code Markdown で貼り付け画像をファイルごとに整理する設定（2025年5月）

# VS Code Markdown で貼り付け画像をファイルごとに整理する設定（2025年5月）

## はじめに
VS Code(バージョン: 1.99.3)の Markdown ノートで画像をコピペしたとき、ルートに画像の散乱が地味にストレス…
pasteImageの設定をしても、カレントに画像が保存されてしまうなど、プチハマりしていました:thinking:
拡張機能「pasteImage」は使わず、VS Code標準の設定だけで**ノートごとのフォルダに画像を整理**

---

## ✔️ 手順

1. **「pasteImage」拡張を無効化する**  
   - 拡張機能タブで「pasteImage」を検索 → 無効化

2. **VS Codeの設定を開く**  
   - macOS: `⌘ + ,`  
   - Windows: `Ctrl + ,`

3. **`settings.json` を編集**  
   以下を追加します👇

   ```jsonc
   "markdown.copyFiles.destination": {
     "**/*": "Assets/${documentBaseName}/${fileName}"
   }


4.	Markdown上で画像をコピペ → 自動で
Assets/ノート名/画像ファイル名 に保存されるように🎉

✔️ 各パラメータの意味
	•	"**/*"：全てのファイルを対象にする glob パターン
	•	${documentBaseName}：拡張子を除いた Markdown ファイル名
	•	${fileName}：貼り付けた画像のファイル名


## おわりに

- 代表的な機能拡張つかえばいいやって思ってしまったけど、VS Codeの標準機能もユーザニーズに合わせて追加させている！
  - 本体のアップデートは適時確認。プラグインが競合してたかも :speak_no_evil:
PythonでQiitaの人気記事をNotionに自動転送するCLIツールを作った


# はじめに

Qiitaの人気記事を自動で取得し、Notionデータベースに転送するCLIツールを作りました。
いいね（LGTM）またはStock数が指定した閾値以上の記事のみを対象とし、Notion DBのカラム（プロパティ）が足りなければ自動で追加する機能も実装しています。

## 作ったもの

- Qiita APIから過去N日分の記事を取得
- LGTMまたはStock数が指定値以上の人気記事を抽出
- 本文を自動要約（sumy + tinysegmenter）
- Notionデータベースにupsert（新規追加 or 更新）
- Notion DBにカラムがなければ自動で追加
- CLI対話式・自動化（定時実行）どちらも対応

## 技術スタック

- Python 3.11
- Qiita API
- Notion API
- sumy（要約）
- tinysegmenter（日本語分かち書き）
- pytest（テスト）

# 実装のポイント

## 1. CLI対話式・自動化両対応

```python
# 対話式（手動実行）
python main.py

# 自動化（定時実行）
python main.py --schedule --min-likes 500 --min-stocks 500 --backfill-days 1
```

- CLIで「最低いいね数」「最低ストック数」「バックフィル日数」を日本語で入力
- 全角/半角どちらも対応
- `--schedule`や`--no-interactive`指定時は定時実行モード

## 2. Notion DBのカラム自動追加

```python
def ensure_notion_properties(self) -> None:
    """Notion DBのプロパティが足りなければ自動で追加"""
    current_properties = self.get_database_properties()
    required_properties = {
        "title": {"title": {}},
        "url": {"url": {}},
        "author": {"rich_text": {}},
        "likes": {"number": {}},
        "stocks": {"number": {}},
        "tags": {"multi_select": {}},
        "created_at": {"date": {}},
        "summary": {"rich_text": {}}
    }
    # プロパティの追加処理...
```

## 3. エラーハンドリングとリトライ

```python
def retry_with_backoff(func):
    """指数バックオフでリトライするデコレータ"""
    @functools.wraps(func)
    def wrapper(*args, **kwargs):
        max_retries = 3
        base_delay = 1
        for attempt in range(max_retries):
            try:
                return func(*args, **kwargs)
            except Exception as e:
                if attempt == max_retries - 1:
                    raise
                delay = base_delay * (2 ** attempt)
                time.sleep(delay)
    return wrapper
```

## 4. 型ヒントとテスト

```python
from typing import Dict, List, Optional

class NotionClient:
    def get_database_properties(self) -> Dict[str, Dict]:
        """データベースのプロパティを取得"""
        pass

    def add_database_property(
        self, 
        property_name: str, 
        property_type: str
    ) -> None:
        """プロパティを追加"""
        pass
```

# 使い方

## セットアップ

1. リポジトリのクローン
```bash
git clone https://github.com/AirLabJP/QiitaNotionBridge.git
cd QiitaNotionBridge
```

2. 必要なトークンの取得
- Qiitaアクセストークン（`read_qiita`スコープ）
- Notion Integration Token
- Notion Database ID

3. 環境変数の設定
```bash
cp .env.example .env
# .envファイルを編集
```

4. 依存パッケージのインストール
```bash
pip install -r requirements.txt
```

## 実行方法

### 対話式（手動実行）
```bash
python main.py
```

### 自動化（定時実行）
```bash
python main.py --schedule --min-likes 500 --min-stocks 500 --backfill-days 1
```

### バックフィル実行
```bash
python main.py --backfill days=3 --min-likes 300 --min-stocks 200
```

# 今後の展望

- Slack通知・Webhook連携
- タグごとの閾値設定
- Web UIやダッシュボード
- 要約の精度向上

# まとめ

- Pythonで実用的なCLIツールを作成
- 型ヒント・テスト・エラーハンドリングを徹底
- 自動化と手動実行の両方に対応
- 拡張性を考慮した設計

# 参考リンク

- [GitHubリポジトリ](https://github.com/AirLabJP/QiitaNotionBridge)
- [Qiita API](https://qiita.com/api/v2/docs)
- [Notion API](https://developers.notion.com/)
汎用的なList抽出挿入メソッドを BiConsumer で作る方法

# はじめに
実装を実際にされている際、あるリストにあるモデルのフィールドから一つずつ要素を取り出し、一つのリストを作成したい場面は頻繁にあると思います。
今回は、関数型インターフェースのBiConsumerを応用し、そんなアルゴリズムを汎用メソッドにしてサービスメソッドの可読性を上げるリファクタリングテクニックを紹介します。

# サンプルコード

```java:util.java
import java.util.ArrayList;
import java.util.List;
import java.util.Collection;
import java.util.function.BiConsumer;
import java.util.function.Function;

class B { 
    String fieldB;
    public B(String fieldB) { this.fieldB = fieldB; }
    public String getFieldB() { return fieldB; }
}

public class Main {
    public static void main(String[] args) {
        List<ModelB> listA = List.of(new B("apple"), new B("banana"), new B("cherry"));
        List<String> listC = new ArrayList<>();
        // 汎用的な処理
        extrModelFieldsAndAddToList(listA, ModelB::getFieldB, listC, Collection::add);
        // 結果確認
        listC.forEach(System.out::println);
    }

    public static <T, R> void extrModelFieldsAndAddToList(
            Iterable<T> source,
　　     Function<T, R> extractor,
　　     Collection<R> target,
　　     BiConsumer<Collection<R>, R> adder) {
　      for (T item : source) {
　　        R value = extractor.apply(item);
　　        adder.accept(target, value);
　　    }
    }
}
```


BiConsumer<Collection<R>, R> を使うことで、「どのコレクションに何をどう追加するか」を外部から指定できます。
Collection::add をメソッド参照として渡せるので、非常に簡潔。
必要があれば、Set, Queue, カスタムコレクション, ログ出力用のList などにも柔軟に適用できます。
AIでIT年収チェッカーをつくってみた

## はじめに

「自分のITスキルは、今の年収に見合っているのだろうか？」
「次のキャリアステップで何を学ぶべきなのか？」

このような疑問を持ったことはありませんか？そんな悩みを解決するツールをAIで作りました。

GitHub で無料公開していますので、まずは自分のスキルを診断してみてください。

https://kaku3.github.io/workbooks/it-skill-salary-checker

- 自己診断画面
![00-診断.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/ca61a64a-6ed5-4b8d-ac93-2644fca9fa0d.png)

- 診断結果画面
![01-結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/e0ac4fcf-c6fe-4142-b8e2-367da78e1277.png)

[GitHub: ソース](https://github.com/kaku3/workbooks/tree/main/12_%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E5%B9%B4%E5%8F%8E%E8%87%AA%E5%B7%B1%E8%A8%BA%E6%96%AD/30_src)

## 開発の背景

長い間、評価面談で以下の様な課題を抱えていました。

- 自己評価に個人差が大きく生じる
- 共通の判断基準や評価指標がほしい

エンジニアスキルの評価基準やキャリアアドバイスを普遍的に定義することは非常に困難です。どんなに優れた書籍や資料を参考にしても、わたしの理解度や適用範囲には限界があり、体系化できずに思考停止していました。

「AIを使えばできるのでは？」と思い立ち、実際に作ってみたところ、予想以上に実用的なレーダーチャートによる自己診断ツールができあがりました。

## IT業界のキャリア設計の課題

レーダーチャートによる自己診断ツールを目指したのには理由があります。

未経験者からは「プログラムだけ書いていればよい」業種に見えがちなIT業界ですが、実際はまったく異なります。技術スキルだけでなく、ヒューマンスキル、業務スキル、マネジメントスキルなどをバランスよく習得していかないと、キャリアが行き詰まってしまいます。

しかも、これらのスキルは習得に時間がかかるものばかり。必要になってから慌てて学ぼうとすると業務遂行が困難になって炎上してデスマーチがはじまることもあるため[^1]、計画的なスキル習得が不可欠です。

このようなキャリア設計の見通しを立てるツールとして、レーダーチャート自体は数年前に作成していましたが、次の課題から全く活用されていませんでした。

- 具体的な採点基準が定義されていない
- 診断後のフィードバックがない

## AIの力で解決した採点基準とフィードバック

これらの課題を解決するため、Copilot + GPT-4.1 (エージェントモード)に単刀直入に依頼しました。

```
各スキルに、5段階の評価基準とそれぞれの評価に対してのスキルアップ方法を教えて。
```

驚くべきことに、AIは瞬時に詳細な採点基準とフィードバックを生成してくれました。数年間ほしかったものが、わずか数秒で手に入ったのです。

各評価の内容やフィードバック内容は、わたし自身も勉強になる内容でした。面談で言語化して伝えられなかったことが、端的に表現されていて感心しました。

## キャリアモデルの可視化

次に、IT業界の代表的な職種（テスター、PG、PL/PMなど）について、どのスキルがどの程度必要かというロールモデルをAIに作成してもらいました。

これにより、目標とする職種に必要なスキル分布がレーダーチャートに表示されるようになりました。自分の現在地と目標のギャップが視覚的に分かることで、学習の動機付けになると考えました。

## モチベーションの源泉：年収

学びの動機付けとして最も強力なのは、やはり「お金」ではないでしょうか。

わたしたちが働く主な目的は、好きなことをするためというより、生活のためのお金を得ることです。「プログラムが好き！」「IT大好き！」という方ももちろんいますが、多くの方は現実的な報酬を気にしているはずです。

そこで、各ロールモデルの推定年収もAIに作成してもらいました。自己評価がどのロールモデルに近いかを判定し、そのモデル内での相対評価によって年収を調整する仕組みです。

興味深いことに、依頼していないにもかかわらず、Claude3.7は自動的にキャリアアドバイスも生成してくれました。この点では、GPT-4.1よりもClaude3.7の方が柔軟性があり、用途によってAIを使い分けるのが効果的だと感じました。

## AIの可能性と未来

このように、診断ツール、診断データおよび診断アルゴリズムをAIで作成してみると、一つの重要な問いが浮かび上がります。

**『AIは既に、人事評価ができるだけの知識を蓄えているのではないか？』**

AIが提示する評価基準は端的で分かりやすく、人間特有の忖度や感情に左右されません。これはある意味、アニメ「機動戦士ガンダムSEED DESTINY」のデュランダル議長が提唱した「ディスティニープラン」のような世界観を思わせます。

人間の能力を客観的に評価し、適材適所に配置する—そんな未来が、既にわたしたちの目の前に迫っているのかもしれません。

## さいごに

自分のITスキルと市場価値を客観的に把握したい方は、ぜひこのツールを試してみてください。キャリアの次のステップを考える良いきっかけになるはずです。[^2]

https://kaku3.github.io/workbooks/it-skill-salary-checker

## おまけ

- [kaku3 - Qiita記事一覧](https://kaku3.github.io/workbooks/Qiita/)
ポエム多め。PM、メンター、未経験エンジニアや新卒向け記事など。

- [エンジニアのためのお仕事問題集](https://github.com/kaku3/workbooks)
2030年にIT人材が最大79万人不足するとのことで、学習用の資料をgitで無料公開してます(不定期更新)。

よろしければどうぞ。

[^1]: 案件によります。
[^2]: 記事の通り全AI製。何かを保証するものではありません。
GarminのWatchFaceアプリでやったことまとめ

# はじめに

過去に投稿した記事を遡って確認したいときに見にくかったため、本記事にまとめたいと思います。

# 過去投稿まとめ

## 環境構築
https://qiita.com/nyanko5656/items/eaf73ffa81b7c51e206f

## テキスト表示
https://qiita.com/nyanko5656/items/6177de3f5cd4d57fd7ca

## 背景画像表示
https://qiita.com/nyanko5656/items/7fd73e173559bb55c4ad

## フォント変更

https://qiita.com/nyanko5656/items/be9ffa3f096e523dd800

## Bluetoothとの接続表示

https://qiita.com/nyanko5656/items/080da5c7f471a9cce647
【セキュリティ】Basic認証


# はじめに

こんにちは。アメリカに住みながら、独学でエンジニアを目指している Taira です。
現在セキュリティについて、徳丸本を使用しながら学習中ですが、そこで出てきた Basic 認証についてまとめてみようと思います。

## Basic 認証とは？

Basic 認証（Basic Authentication）は、Web サイトにアクセスする際に**ユーザー名とパスワードで認証**を行う仕組みの 1 つです。**HTTP リクエストの`Authorization`ヘッダーに、ユーザー名とパスワードを Base64 エンコードして送信する**ことで認証を実現します。

---

## Basic 認証の仕組み

1. クライアントが保護されたページにアクセスする
2. サーバーが `401 Unauthorized` を返し、`WWW-Authenticate: Basic realm="..."` ヘッダーで認証を要求
3. クライアントは、ユーザー名とパスワードを `:` でつなぎ、Base64 エンコードした文字列を `Authorization` ヘッダーに含めて再送信

```http
Authorization: Basic dXNlcjpwYXNz
```

4. サーバーが認証情報を検証し、正しければリソースを返す

※ `dXNlcjpwYXNz` は「user\:pass」を Base64 でエンコードした例

---

## Basic 認証の注意点

| 問題点               | 説明                                                                       |
| -------------------- | -------------------------------------------------------------------------- |
| 暗号化されていない   | Base64 はエンコードであり暗号化ではないため、情報は簡単に復元可能          |
| HTTP では危険        | HTTPS を使わないと、通信中に認証情報が盗聴されるリスクがある               |
| セッション管理がない | 毎回認証情報を送る必要があり、ログアウト処理もできない                     |
| UI が固定される      | ブラウザのデフォルトの認証ダイアログしか使えないため、柔軟な UI が作れない |

---

## 実際の使用例（Apache の場合）

`.htaccess` ファイルで簡単に Basic 認証をかけられます。

```apacheconf
AuthType Basic
AuthName "Restricted Area"
AuthUserFile /path/to/.htpasswd
Require valid-user
```

`.htpasswd` ファイルには、ユーザー名とハッシュ化されたパスワードを記述します。

---

## どんなときに使う？

Basic 認証は、以下のような**限定的・一時的な用途**で使われることが多いです。

- 社内用の開発環境やステージングサイトの保護
- API への簡易的なアクセス制御（本番では推奨されない）
- 一時的に公開を制限したい静的サイト

---

## GET でも POST でも使える

Basic 認証は、HTTP メソッド（GET, POST, PUT など）に関係なく、**すべてのリクエストで共通して使用可能**です。

```http
GET /secret/page HTTP/1.1
Authorization: Basic dXNlcjpwYXNz

POST /submit HTTP/1.1
Authorization: Basic dXNlcjpwYXNz
Content-Type: application/json

{"message": "Hello"}
```

---

## ログアウトができない？

Basic 認証は**一度認証されると、ブラウザが認証情報をキャッシュ**します。明示的にログアウトする仕組みがないため、ログアウトしたい場合は以下のような工夫が必要です。

- ブラウザを再起動する
- 認証情報を含まない URL にリダイレクトする
- JavaScript で `window.location` にダミーの認証情報を埋め込む（やや強引）

---

## まとめ

| 項目         | 内容                                             |
| ------------ | ------------------------------------------------ |
| 認証方式     | Authorization ヘッダーに Base64 で認証情報を送る |
| セキュリティ | HTTPS 必須。HTTP では盗聴リスクが高い            |
| ログアウト   | 明示的に行えない（ブラウザの仕様）               |
| 用途         | ステージング環境、社内ツールなどの簡易認証       |
【React初心者メモ】justify-＊系とalign-＊系

Flexの主軸（main axis）と交差軸（cross axis）、Gridのインライン軸（inline axis）とブロック軸（block axis）およびそれぞれを制御するユーティリティクラスであるjustify-＊系とitems-＊／self-＊（align-＊ 系）の意味と使い方をまとめました。

### 主軸
主軸とは、flex-directionで決まる「要素が並ぶ方向」の軸（Gridの場合は行方向）です。

何も設定しない場合→主軸は横方向
flex-rowの場合→主軸は横方向
flex-colの場合→主軸は縦方向


### 交差軸
交差軸とは、主軸に直交する方向の軸です。

主軸が横の場合→交差軸は縦
主軸が縦の場合→交差軸は横

### インライン軸
文章の行が流れる方向、つまり横方向（行方向）

### ブロック軸
段落などのブロックが積み重なる方向、つまり縦方向（列方向）

### justify-＊系（CSSのjustify-contentに相当）
justify-＊系（justify-start, justify-centerなど）は、主軸（インライン軸）上の子要素の配置を制御します。

justify-start：左端に寄せる
justify-center：中央に寄せる
justify-end：右端に寄せる
justify-between：両端寄せ＆間を均等に配置
justify-around：各要素の前後を均等に配置
justify-evenly：要素間のスペースを等間隔に配置

### items-＊系（CSSのalign-itemsに相当）
items-＊系（items-start, items-centerなど）は、交差軸（ブロック軸）上の子要素の全体揃えを制御します。

items-start：上端に揃える
items-center：中央に揃える
items-end：下端に揃える
items-baseline：テキストのベースラインで揃える
items-stretch：高さ／幅を引き延ばして揃える（デフォルト）

### self-＊（CSSのalign-selfに相当）
self-＊系（self-start, self-centerなど）は、交差軸上で個別の子要素を揃えるときに使います。

self-start：自分だけ上端に揃える
self-center：自分だけ中央に揃える
self-end：自分だけ下端に揃える
self-auto：子要素の揃えを親のitems-＊に従う
self-stretch：自分だけ高さいっぱいに伸ばす
px、em、remの違いと使い分け

px（ピクセル）
特徴: 絶対単位であり、指定した値がそのまま適用されます。

利点: 精密なデザインが可能で、特定の要素のサイズを正確に制御できます。

注意点: ユーザーのブラウザ設定によるフォントサイズの変更が反映されないため、アクセシビリティの観点で制約があります。

em
特徴: 親要素のフォントサイズに対する相対単位です。

利点: コンポーネント内での相対的なサイズ指定が可能で、柔軟なデザインが実現できます。

注意点: ネストが深くなると、サイズの計算が複雑になり、予期しない結果を招くことがあります。

rem（root em）
特徴: ルート要素（通常はhtml要素）のフォントサイズに対する相対単位です。

利点: 全体の一貫性を保ちつつ、ユーザーの設定によるフォントサイズの変更にも対応できます。

活用例: フォントサイズやマージン、パディングなど、全体的なレイアウトに関わるプロパティに適しています。

使い分けのポイント
固定サイズが必要な要素: pxを使用して正確なサイズを指定します。

コンポーネント内での相対的なサイズ指定: emを使用して親要素に対する比率でサイズを設定します。

全体の一貫性とアクセシビリティを重視する場合: remを使用して、ルート要素に基づいたサイズ指定を行います。

使い分けのポイント
固定サイズが必要な要素: pxを使用して正確なサイズを指定します。

コンポーネント内での相対的なサイズ指定: emを使用して親要素に対する比率でサイズを設定します。

全体の一貫性とアクセシビリティを重視する場合: remを使用して、ルート要素に基づいたサイズ指定を行います。

これらの単位を適切に使い分けることで、柔軟でアクセシブルなウェブデザインを実現できます。特に、remを活用することで、ユーザーの設定に応じたレスポンシブなデザインが可能となります。

詳細なコード例や具体的な使用シナリオについては、元の記事をご参照ください。

https://wmlnote.jp/px-em-rem-difference/
Poetryチートシート

今までpythonの仮想環境管理に`venv`を使っていたのですが、最近は`poetry`使うようにしています。
使いこなせてはいませんが、**依存パッケージを除外してインストールしたパッケージが明示的に出力**されるのが好きです。以下が自動で作られるプロジェクト情報。

```toml: pyproject.toml
[tool.poetry]
name = ""
version = "0.1.0"
description = ""
authors = ["Yohei Fukuhara]
readme = "README.md"

[tool.poetry.dependencies]
python = "^3.10"
jupyterlab = "^4.3.5"
python-dotenv = "^1.0.1"


[build-system]
requires = ["poetry-core"]
build-backend = "poetry.core.masonry.api"
```

https://python-poetry.org/

# 前提

|種類|バージョン|備考|
|:-:|:--|:--|
|OS|Ubuntu 22.04.5 LTS|他のOSでもそんなに変わらないはず|
|Python|3.11.7|pyenvで管理|
|Poetry|1.7.1|少し古い|


# Install
`pipx`でインストール。PATHを通すために`exec $SHELL`もしておく。
※ `pipx`はPython のパッケージをグローバルにインストールするためのツール。Poetry のようなバージョンを超えて共通化すべきツールのインストールに使用。

```bash
pipx install poetry
exec $SHELL
```

初期設定として、仮想環境(`.venv`)がプロジェクトフォルダ内に作成されるように設定。

```bash
poetry config virtualenvs.in-project true
```

https://python-poetry.org/docs/#installation

Upgrade の場合は以下の方法。

```bash
pipx upgrade poetry
```

# 仮想環境作成時初期設定
## 新プロジェクト作成
まだプロジェクトもない(Repositoryのフォルダがない)状態の場合。

```
poetry new <project name>
```

こんな構造が作られる

```
poetry-demo
├── pyproject.toml
├── README.md
├── poetry_demo
│   └── __init__.py
└── tests
    └── __init__.py
```

https://python-poetry.org/docs/basic-usage/#project-setup

## すでにProjectあって、Poertry管理にしたい場合

```
cd pre-existing-project
poetry init
```

## pyproject.tomlもある場合
git cloneなどですでにpyproject.tomlがある場合、以下のコマンドでローカル環境に関連パッケージがインストールされる。

```
petry install
```


## パッケージ追加

```bash
$ poetry add azure.identity
Using version ^1.21.0 for azure-identity
<後略>
```

## パッケージのバージョン指定再インストール
`pyproject.toml`でバージョン指定して再インストール。ダウングレードも可能。

```bash
$ poetry update numpy
Updating dependencies
Resolving dependencies... (7.5s)

Package operations: 0 installs, 1 update, 0 removals

  - Downgrading numpy (2.2.3 -> 1.26.4)
```

# Others
## 実行
Pythonじｋｋ

```bash
$ poetry run python xxx.py
```

## 環境確認

```bash
$ poetry env info

Virtualenv
Python:         3.10.12
Implementation: CPython
Path:           /home/fukuhara/repositories/fine-tune/.venv
Executable:     /home/fukuhara/repositories/fine-tune/.venv/bin/python
Valid:          True

System
Platform:   linux
OS:         posix
Python:     3.10.12
Path:       /usr
Executable: /usr/bin/python3.10
```

## インストール済みパッケージの確認
一覧確認

```bash
$ poetry show
annotated-types           0.7.0          Reusable constraint types to use with typing.A...
anyio                     4.8.0          High level compatibility layer for multiple as...
argon2-cffi               23.1.0         Argon2 for Python
<後略>
```

個別確認。パッケージ名を最後に加える。複数パッケージを同時に指定はできなかった(やり方あるかもしれないけど未調査)。

```bash
$ poetry show pandas
 name         : pandas                                                                  
 version      : 2.2.3                                                                   
 description  : Powerful data structures for data analysis, time series, and statistics 

dependencies
 - numpy >=1.22.4
 - numpy >=1.23.2
 - numpy >=1.26.0
 - python-dateutil >=2.8.2
 - pytz >=2020.1
 - tzdata >=2022.7
```
Databricks AI/BIダッシュボードにおける時系列予測結果の可視化

こちらのアップデートです。

https://docs.databricks.com/aws/ja/ai-bi/release-notes/2025#aibi%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89-1

> **折れ線グラフでのAI予測:** 折れ線グラフの予測を生成できるようになりました (パブリック プレビュー)。[「予測の生成」](https://docs.databricks.com/aws/ja/dashboards/#ai-forecast)を参照してください。

マニュアルも追加されていました。

https://docs.databricks.com/aws/ja/dashboards/#ai-forecast

折れ線グラフで用いているデータにAI関数の[`ai_forecast`関数](https://docs.databricks.com/aws/ja/sql/language-manual/functions/ai_forecast)を適用して時系列予測結果を表示する可視化を簡単に作成できるようになっていました。

![](https://assets.docs.databricks.com/_static/images/dashboards/line-forecasting.gif)

試してみます。折れ線グラフを選択すると右下に **予測(ベータ版)** セクションが追加されています。

![Screenshot 2025-05-06 at 11.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/2a1c5ef5-fd24-4199-9351-adbff9132a32.png)

**+** ボタンを押すと確認メッセージが表示されます。

![Screenshot 2025-05-06 at 11.08.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/bceb0b94-965c-4e93-bf60-ec878ca639ad.png)

以下のようにオリジナルの可視化の下に予測結果が表示される可視化が追加されます。

![Screenshot 2025-05-06 at 11.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/acbba17c-8cac-4a56-b1ef-e84cfb2e83cc.png)

背後では`ai_forecast`関数を呼び出すデータセットが作成されていますので、SQLを変更すれば予測期間も変更可能です。

![Screenshot 2025-05-06 at 11.25.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/818b9663-4b65-4aaf-ad76-1a7d81e2ac1b.png)

気軽に時系列予測ができますので、ご活用ください

### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
RFアンプを作ってみた(BGA420編)

Amazonなどでも売っているRF(広帯域)アンプを作ってみました。

![写真（2025-05-06 10.53）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/fe67b1b8-1f4f-4533-8916-9049b12b1ea2.jpeg)

アナログ地上波の頃使っていて、使わなくなったVHFとUHFの混合器をくり抜いて作りました。シールドで囲われていて最適です。下がINで上がOUTです。

チップは秋月で120円で買ったInfineonのBGA420です。BGA420は外付け部品が少なくていいです。

データーシートを見誤って6Vが標準と思ったのですが、MAXが6Vでした。何かのジャンクに入ってたKIA78S06をつけました。UHFの端子からDCを入れます。ACアダプタはノイズの少ないトランスタイプのものが良いと思います。

ピンがわかりにくいですが、GND(2)だけ太くなってるのが目印です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/e9522888-b95d-4362-912d-6ec9d856c9bc.png)

銅箔をベタグランドにし、空中配線して、おまじないにポリアミドテープを貼りました。市販品だと輸送時のショックで壊れてしまいそうですが、自作ならこれで良いです。

米粒大でハンダ付けが難しいですが、4ピンなのでどうにかなりました。

BGA420は50Ωですが75Ωのケーブルなどを使っています。特定の長さだと問題になるようですが、大丈夫みたいです。Fコネクタを使う事がほとんどなので、Amazonのモジュールより現実的です。

BGA420は3Gまでいけるようです。

試しにコリニアアンテナでADS-Bを受信してる蟹さんにつけてみましたが、ちょっと遠くまで受信できているようです。そのうち性能比較してみます。

AISの周波数を確認してみました。

アンプなし

![direct.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/fda889bc-f1aa-483e-80c4-a990f4de3e60.png)

アンプあり

![bga420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/0b453176-8e25-4b13-9aeb-62cf15d6172b.png)

これでも受信できず、またMIPSモジュールの電源を入れるとノイズでつぶされます。

電流は18.5mAくらいでした。