OmniAICreator/Qiita-1.07M huggingface dataset:
【DATASaber】Vizのネタが思いつかない時に使えるDB

DATASaberに挑戦中のいぐちです！
今回はViz投稿のネタに使えるデータベースを紹介します！
DATASaberを目指す上で避けられないものとしてコミュニティポイントがあります。このコミュニティポイントを取得する上で個人的に最も取っ掛かりやすいものがTableau PublicへのViz投稿だと思います。内容としては4週間以内にvizを3回投稿するというものです。
![viz投稿紹介.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4120283/1c860f1e-41a5-4db5-82e0-af0035d31f72.png)
私もこれに取りかかったのですが、vizを作るためのネタがなかなか思いつきませんでした。そこでネタを探していたところData + Movieキャンペーンというものを目にしました。これはIMDbとtableauの提携により実現されたもので、IMDB(Internet Movie Database：インターネット・ムービー・データベース)のデータベースを使うことが出来るキャンペーンです。
"https://www.salesforce.com/jp/blog/jp-tableau-campaign-dataplusmovie/#h-data-movies%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3%E3%81%A8%E3%81%AF"
IMDbとは映画やドラマのタイトルや出演俳優、言語別の作品数などに加えてユーザーレビューも含まれているDBです。
"https://vsharer.club/2021/03/09/imdb/#:~:text=%E3%81%9D%E3%82%93%E3%81%AA%E6%99%82%E3%81%AB%E5%BD%B9%E3%81%AB%E7%AB%8B%E3%81%A4%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C,%E3%81%A6%E3%81%84%E3%82%8B%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%A7%E3%81%99%E3%80%82"
私はこのDBのおかげでVizを投稿し、コミュニティポイントを獲得することが出来ました。
　下記にこのDBを使った私のvizを紹介します。
https://public.tableau.com/views/_17500782192280/sheet16?:language=ja-JP&:sid=&:redirect=auth&:display_count=n&:origin=viz_share_link
このvizではイコライザーとジョンウィックの評価と投票数、公開年を比較してみました。すると、両作品の1作目と最新作がそれぞれ同じ年に公開されていることが分かりました。このように親しみのある映画を題材にvizを作ることが出来、新たな発見もあるDBを是非使ってみてください！
【GAS】Render.com に登録したアプリに定期アクセスして、スリープを回避したい。

# やりたいこと
Render.com に登録したWebアプリケーションのURLに定期アクセスして、スリープを回避したい。

ポートフォリオの掲載に、Render.com というサービスを使っています。無料プランの利用では、15 分間何も活動がないと自動でサーバーが スリープ状態になります。サーバーが再起動して再び動き出すまでには時間がかかるため、GASを初めて利用してみました。

- Render を無料プランで利用
- GASを無料プランで利用

# GASとは？
Google Apps Script（GAS）は、Googleが提供するツールです。
JavaScriptでコードを記述し、サービスを自動化したり、Webアプリケーションを開発したりできます。Googleアカウントを持っていれば誰でも利用可能で、インストール作業は不要です。

https://developers.google.com/apps-script/overview?hl=ja

# GASのプロジェクトを作成
PCブラウザでGoogle Drive (https://drive.google.com/drive) を開きます。

GASのプロジェクトを作成したいフォルダに移動します。
右クリックから「新規 > その他 > Google Apps Script」を選択し、プロジェクトを新規作成します。

# コード
コードを貼り付けて、タイトルを任意の名前に変更します。
```
function main()
{
  var url = 'https://{ここにアプリケーションのURL}.onrender.com';
  var data = UrlFetchApp.fetch(url).getContentText();
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784177/fe3b73d4-fe8a-4b18-8a0a-d5a950c4b154.png)


# トリガーを設定
左メニューからトリガー画面を開き、任意のスケジュールを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784177/445596ca-fb36-4c6b-b604-8dccb41bdb7b.png)

トリガーを保存する際にエラーが表示され、こちらのサイトを参考に対処しました。

https://daily-coding.com/gas_authorization/


設定完了です。
左メニューから実行数の確認もできます。


**補足＊GAS無料プランの制限について**
https://developers.google.com/apps-script/guides/services/quotas?hl=ja
無料プランでは、トリガーの合計実行時間　…　90 分/日	となっています。
今回の用途では心配なさそうです。（1回あたり数秒のスクリプト）


# 参考
以下サイトを参考にさせていただきました。

GASの使い方（初めて使う）

https://zenn.dev/kinakokyoryu/articles/6251e4edb37273

Render.comのサーバーが寝てしまうので定期的に叩き起こして寝かせないようにする

https://zenn.dev/sdb_blog/articles/002-render-okosu

Renderのスリープ対策をGASで簡単に設定

https://lifetechia.com/render-sleep/

トリガー設定のエラー対処

https://daily-coding.com/gas_authorization/
railsの外部キー記述方法



## railsの外部キー記述方法


:::note info
外部キーとは?
:::
あるテーブル（子テーブル）の列が、別のテーブル（親テーブル）の主キーや一意な列を参照するように設定された制約のこと

## railsでの書き方
referencesとadd_foreign_keyの2通りの記述方法がある。

### references
外部キーの参照先がidであればこっちの記述方法を用いる。
書き方としては
```
t.references :[外部キーのあるモデル名],null:[true or false],foreign_key:[true or false]
```
null:とは値にnullを許容するか設定できる

foreign_key:とは外部キー制約の設定　基本的にはtrue



### foreign_key
他のテーブルに対してid以外の列に外部キーを設定したいときに用いる。
書き方は
```
add_foreign_key :[外部キーを設定するテーブル名],[参照先のテーブル名],column: :[外部キーとして使う列名],primary_key: :[参照先の列名]
```
DevinにFigmaのデザインを読み込ませる方法

# はじめに
DevinにFigmaのデザインを読み込ませて、開発スピードをあげたい！と思い
連携方法を探しましたが、参考になる記事が少なかったので
自分用のメモも兼ねて書きます！

誰かのお役に立てばうれしいです。

# 連携方法
### 1. Figmaから個人アクセストークンを発行する

Figmaの個人アクセストークン（Personal Access Token）の発行方法は下記です。

1. Figmaのホーム＞設定＞セキュリティ＞個人アクセストークンより「新規トークンを発行」をクリック
2. トークン名や有効期限は任意、スコープは開発に必要な読み取り権限を付与する
3. 「トークンを発行」をクリック
4. トークンをコピーし、安全なところで保管する

:::note warn
注意点
トークンのコピーは 手順4 のタイミングのみで可能です。
わからなくなってしまった場合は、新規発行が必要です。
:::


### 2. Figmaのファイルキーを取得する

1. Devinにお願いしたいデザインがあるFigmaのURLからファイルキーを取得する

例）
```
https://www.figma.com/file/1234567890/test
https://www.figma.com/design/1234567890/test
```

`1234567890`がファイルキーです。

### 3. Devinに指示する

1. Devinで下記のような文言をつけた上で、該当のデザインを作るように指示する

```
・このFigmaのパーソナルアクセストークンを使って、デザインファイルを取得してください。

トークン:xxxxxxxxxx
ファイルキー:1234567890
```

発行したトークンをDevinのSecretsに登録することもできますが、このトークンは個人のアカウントに紐づいているため、Devinを複数人で使っている場合は注意が必要です。
できれば、必要な人がそれぞれ自分のトークンを発行して、セッション内だけで使う運用のほうが安全でおすすめです。

# プラグインについて
FigmaにDevinのプラグインが登場したので、それを使うのも一つの選択肢です。
私は検証してないですが、プラグインでもFigmaの「個人アクセストークン」は必要そうです。
[Devin Figmaプラグイン（Figma Community）](https://www.figma.com/community/plugin/1510152033792662389/devin)

# 参考リンク
[Figma API Docs](https://www.figma.com/developers/api)
Microsoft AZ-900認定試験の準備はどのようにすべきですか？

Microsoft Certified Azure Fundamentals (AZ-900) 試験は、クラウド コンピューティングの概念とコア Microsoft Azure サービスに関する基本的な理解を証明することを目的とする個人向けに設計された基礎認定資格です。この認定資格では、高可用性、スケーラビリティ、責任共有モデルなどの原則を含むクラウドの概念の説明、Azure リージョン、可用性ゾーン、コンピューティング、ストレージ、ネットワークなどの主要なサービスなどのコンポーネントをカバーする Azure のアーキテクチャとサービスの説明、Azure Resource Manager、ロールベースのアクセス制御 (RBAC)、コスト管理、コンプライアンス機能などのツールに重点を置いた Azure の管理とガバナンスの説明など、重要なドメインに関する知識が評価されます。また、さまざまなビジネス ニーズに適した Azure ソリューションの特定、価格モデルの理解、Azure ポータルとコマンド ライン ツールを使用してクラウド リソースの管理など、実際のシナリオでこれらの概念を適用する能力もテストされます。ただし、AZ-900 試験の準備は、概念的なトピックとサービス固有のトピックの両方が広範囲にわたるため、困難になる可能性があります。受験者は、Azure のコアサービスの差別化、料金体系の把握、クラウド環境のガバナンスフレームワークの理解に苦労することがよくあります。Microsoft Certified Azure Fundamentals (AZ-900) 試験の効果的な準備方法をお探しですか？

Microsoft AZ-900 認定試験の準備は、ドキュメントを読んだりトレーニングビデオを視聴したりするだけでは不十分です。この試験では、Microsoft Azure エコシステムにおけるクラウドコンピューティングの概念を理解し、適用する能力が評価されます。これには、クラウドモデル、仮想マシンや Azure Blob Storage などのコア Azure サービス、ガバナンスとコスト管理のためのツールに関する実践的な知識が含まれます。効果的な準備のためには、公式の Microsoft Learn コンテンツを受講し、体系的な AZ-900 トレーニングセッションに参加することが推奨されます。しかし、理論だけに頼るだけでは十分ではありません。AZ-900 模擬試験を学習計画に組み込むことで、実際の試験シナリオ、問題形式、時間制限に慣れることができ、受験準備を大幅に強化できます。これらの模擬試験は、Azure の料金、リソースグループ、ID 管理などの分野に関する知識を強化するために不可欠です。また、SLA 計算、サブスクリプション モデル、Azure のグローバル インフラストラクチャといった重要なトピックの理解度を評価するのにも役立ちます。Pass4Success などのプラットフォームでは、Microsoft の最新の試験目標に沿った、最新かつ現実的な [ AZ-900 試験問題を提 ](https://www.pass4success.com/microsoft/exam/az-900)供しています。これらの練習教材は、3 つの試験ドメインすべてでスキルを磨くように設計されています。クラウド コンピューティングが初めての方でも、Azure キャリアをスタートさせようとしている方でも、公式リソースと併せて練習問題を使用することで、試験当日に万全の準備を整えることができます。学習の際には、AZ-900 認定の費用を考慮し、投資を最大限に活用できるように準備計画を立ててください。Microsoft Certified Azure Fundamentals の資格を取得することは、履歴書の価値を高めるだけでなく、高度な Azure 認定資格取得のための確固たる基盤を築くことにもなります。公式トレーニング、実践的な練習、信頼できる学習ツールを適切に組み合わせることで、AZ-900 試験合格は明確かつ達成可能な目標となります。
HamaColorで環境ごとの誤操作をなくそう!

# はじめに
ローカル環境、開発環境、本番環境をタブで開いて開発を進めていると、
「あ、本番環境でテストデータを登録してしまった...まずい...」
「修正しても反映されないなぁ... あ、これ開発環境じゃん...」
といったことが発生しやすくなります...
ご紹介するツールを導入すれば、環境ごとの誤操作を減らせます!👍

以前、一緒にお仕事をしていた方に教えていただいたツールです!(knmnありがとう!!)

# HamaColorとは

[hamakou108](https://github.com/hamakou108/hama-color)さんが開発したChromeの拡張機能になります。

[ブログ](https://www.hamakou108.com/posts/hama-color-release)

# 実際にどうなるか
私が開発に携わっている [GoSTEP](https://www.gostep.biz/) の本番環境です。
画面の枠が赤くなっているのがわかると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180668/fda1a471-0a82-4fa1-b235-953c13d79d37.png)

# どのように設定するのか

## まずはDL

下記からChrome拡張をDLしましょう

https://chromewebstore.google.com/detail/hamacolor/ciofpkbhollmjpaobphhjdngaohglpgp?pli=1

## URLを設定する
Chrome拡張のアイコンをクリックすると画像にある入力画面が出てくるので、
下記のようにします。
```
https://www.google.com(※サイトのURL),red(※好きな色)
https://www.dev.google.com,cyan(※複数ある場合は改行して記載)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180668/113fe6ea-707e-4a3a-a874-69b24845f010.png)

# 最後に
誤操作でみなさんの多くの時間を取られることが減りますように!!🙏
パワポで長体をかける方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53489/4d2a0f0f-566b-46e2-a5d2-ffe02e2b0eb1.png)


- テキストBOXを配置
- 図形の書式タブ
- 「ワードアートのスタイル」の中の「文字の効果」アイコンを選択
- 「変形（T)」を選択
- 「形状」の左上の「四角」を選択

### 使い道

- ちょっとした案内パネルを作るときには紙面いっぱいに印字したい
- CanvaやGoogleSlideでは長体ができないっぽい
- コンサートとかにいくと文字変形しまくりの紙面いっぱいの看板があるよね

例えばこんなの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53489/d42fb961-31ea-4fcb-97b8-28b1080bd442.png)


### なぜ書いたか

- すぐに忘れるので備忘録
- 生成AIはスクショでは教えてくれないので書いた
- マイクロソフトの日本語サポートサイトも本件はなぜか消えてる
材料力学「ラーメン構造 いろいろ」sympyで。

・作図は未です。

# sympyで
#### 鉄棒の部材 
・2元連立方程式
```python
# ver0.1
from sympy import *
var('P,N,l,MR,EI,h')
θ1     =P*l**2/(16*EI)+MR*l/(2*EI);  δ =P*l**3/(48*EI)+MR*l**2/(8*EI)
θ2     =N*h**2/( 2*EI)-MR*h/(  EI);  y2=N*h**3/(3*EI) -MR*h**2/(2*EI)
rep_NMR=solve([Eq(θ1,θ2),Eq(y2,0)],[N,MR])                            #;print(sol_NMR)
δ      =δ.subs(rep_NMR).simplify()
print("#",rep_NMR)
print("#",      δ)
print("#",round(δ.subs({h:1,l:1.5,P:20*9.8,EI:4000})*10**3,2))
# {MR: -P*l**2/(4*h + 8*l), N: -3*P*l**2/(8*h**2 + 16*h*l)}
# P*l**3*(2*h + l)/(96*EI*(h + 2*l))
# 1.51
```
・6元連立方程式
　ver0.1と同じです。
```python
# ver0.2
from sympy import *
var('P,N,l,MR,EI,h')
var('θ1,θ2,δ,y2')
equ_θ1=Eq(θ1,P*l**2/(16*EI)+MR*l/(2*EI));equ_δ =Eq(δ ,P*l**3/(48*EI)+MR*l**2/(8*EI))
equ_θ2=Eq(θ2,N*h**2/( 2*EI)-MR*h/(  EI)); equ_y2=Eq(y2,N*h**3/(3*EI) -MR*h**2/(2*EI))
sol   =solve([equ_θ1,equ_δ , \
              equ_θ2,equ_y2, \
              Eq(θ1,θ2),Eq(y2,0)], \
             [N,MR,θ1,θ2,δ,y2])                
print("#",sol)
print("#",round(sol[δ].subs({h:1,l:1.5,P:20*9.8,EI:4000})*10**3,2))
# {MR: -P*l**2/(4*h + 8*l), N: -3*P*l**2/(8*h**2 + 16*h*l), y2: 0, δ: (2*P*h*l**3 + P*l**4)/(96*EI*h + 192*EI*l), θ1: P*h*l**2/(16*EI*h + 32*EI*l), θ2: P*h*l**2/(16*EI*h + 32*EI*l)}
# 1.51
```

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

# いつもと違うおすすめです。
#### Qiita内

https://qiita.com/mrrclb48z/items/c3274daf5f7a99cfe027#:~:text=%E4%BD%9C%E6%A5%AD%E4%B8%AD%3A-,%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D,-%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA(sympy)

#### 文献

https://www.amazon.co.jp/%E6%9D%90%E6%96%99%E5%8A%9B%E5%AD%A6-JSME%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E6%97%A5%E6%9C%AC%E6%A9%9F%E6%A2%B0%E5%AD%A6%E4%BC%9A/dp/4888981582
JavaScript（単体）だけでバックエンド開発できる？【結論：できません】

今回は「JavaScript単体でバックエンド開発ができるのか？」という疑問について、自分なりに整理して解説していきます。

僕自身、最初は「JavaScriptってWebのフロントエンドだけの言語じゃないの？」とか、「fetchとかでデータ送ったり受け取ったりできるなら、それもバックエンドじゃないの？」と思っていました。

ですが、学習を進めていく中で、「バックエンドとは何か？、JavaScript単体でできること・できないことは何か？、そしてNode.jsという存在がなぜ必要なのか？」がようやく理解できたので、備忘録も兼ねてまとめておこうと思います。

同じように「JSでバックエンドってどういう意味？」「Node.jsって結局何？」とモヤモヤしている方にとって、少しでも参考になれば嬉しいです！

## ❓ そもそもバックエンドってなに？

バックエンドとは、以下のような「裏側の処理」を担う部分です。

- データベースとのやりとり（保存・取得・更新など）
- 認証処理（ログイン、トークンの検証）
- ファイルのアップロード・管理
- 他のAPIとの連携

これらは、ユーザーのブラウザ上（フロントエンド）では実行できない処理です。

## 🧠 JavaScriptの本来の役割

JavaScriptはもともと、**Webブラウザ内での動きを制御するために生まれた言語**です。ブラウザの外では動きません。

- ボタンクリックでモーダルを表示
- 入力フォームのバリデーション
- 画面遷移のアニメーション　など

つまり、JS単体（ブラウザ実行のみ）では「**バックエンド的な処理をする環境がない**」というのが結論です。

## 💻 Node.jsでバックエンド開発をしよう

**Node.js**とは、**ブラウザの外でJavaScriptを実行できるようにした実行環境**です。

- Google ChromeのV8エンジンを使って高速に動く
- サーバーを立ち上げられる（Expressなどのフレームワークも使える）
- データベースとの接続、ファイル操作などが可能

つまり、「JavaScriptを使ってバックエンド処理がしたい」と思ったら、**Node.jsが必須**になります。コードの書き方は同じでもNode.jsを使用するとブラウザ外でも動くようになります。

## ⚠ JavaScript単体でできない理由まとめ

| 処理内容               | JS単体 | Node.jsあり |
|------------------------|--------|-------------|
| DBとの接続             | ❌     | ✅          |
| サーバーを立てる       | ❌     | ✅          |
| ファイル操作           | ❌     | ✅          |
| APIのエンドポイント作成 | ❌     | ✅          |

## ✅ まとめ

- JavaScriptだけ（ブラウザのみ）ではバックエンド処理はできない
- Node.jsなどの**実行環境**があって初めて「バックエンド開発」が可能
- フロントエンドとバックエンドは明確に役割が分かれている

---

お疲れさまでした！JavaScriptとバックエンドの関係について、少しでも理解が深まったら嬉しいです😊
【超初心者向け】JavaScriptでランダムな整数を出す簡単サンプルコード（HTML内に記述）

JavaScript を初めて学ぶ人向けに、**HTMLファイルに直接 JavaScript を書いて動かす方法**と、**ランダムな整数を表示する方法**を紹介します。

---

## 📌 こんな人におすすめ

* JavaScript の書き方がまだあやふやな方
* 「;（セミコロン）ってなに？」「Math.random()って何してるの？」というレベルから始めたい
* とにかく手を動かして試してみたい！

---

## ✅ サンプルコード全文（コピーして使えます）

```html
<!DOCTYPE html> <!-- HTML5であることを示す宣言 -->
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript練習</title> <!-- ブラウザのタブに表示されるタイトル -->
</head>

<body>

  <script>
    // 最大値を3に設定（今回は0〜3未満の整数を出したい）
    const limit = 3;

    // Math.random() は 0以上1未満のランダムな小数を返す（例：0.1234）
    // limitを掛けると 0以上3未満の値になる（例：0.1234 * 3 = 0.3702）
    let randomValue = Math.random() * limit;

    // 小数点以下を切り捨てて整数にする（例：Math.floor(2.8) → 2）
    let result = Math.floor(randomValue); // → 0, 1, 2 のどれか

    // 開発者ツールのコンソールに表示する（画面には表示されません）
    console.log("出た数字は: " + result);
  </script>

</body>
</html>
```

---

## 🧠 覚えておきたいポイント

| キーワード              | 説明                          |
| ------------------ | --------------------------- |
| `Math.random()`    | 0以上1未満のランダムな小数を作る関数         |
| `Math.floor(x)`    | 小数点以下を切り捨てて整数にする関数          |
| `console.log(...)` | 結果を「開発者ツール」のコンソールに表示するための関数 |
| `const`            | 一度決めた値を変えたくないときに使うキーワード     |

---

## 👀 実行方法（超シンプル）

1. 上のコードを `.html` ファイルとして保存（ファイル名は何でもOK）
2. ブラウザで開く
3. キーボードで `F12` を押す（もしくは右クリック →「検証」）
4. 「Console」タブを開くと、結果が出ている！

---

## 🎯 まとめ

* JavaScript は `<script>` の中に書く
* `Math.random()` × `Math.floor()` を組み合わせると簡単に整数のランダム数が作れる
* `console.log()` はテスト出力に便利！

---

## 🚀 次に学ぶなら？

* `if` 文（条件によって処理を変える）
* `for` 文（同じ処理を何度も繰り返す）
* `document.getElementById()` で HTML と連動させる方法

---
アーチ構造 第11章 薄肉曲りはりとばねの力学 基本例題11.05 p353「材料力学演習(20221021)」をsympyでやってみたい。


・計算結果の表示があと少しです。
・作図は未です。
・タイトルを変更予定です。

# オリジナル
[基本例題11.05 p353](http://zairikiweb.starfree.jp/zai_enshuh/zai_enshuh_ver.3.3.pdf#page=358)＜[「材料力学演習(20221021)一括(ver.3.3)」を勉強したい。#sympy](https://qiita.com/mrrclb48z/items/c3274daf5f7a99cfe027#%E4%BD%9C%E6%A5%AD%E4%B8%AD%E7%A7%81%E3%81%AE%E8%A7%A3%E7%AD%94sympy)
　　？？？タブレット等で、pdfを開く事ができないかも。？？？　
# sympyで
・ver0.1
```python
# p353 基本例題11.05
from sympy import *
var('θ0,θ,RH,a,P,EI')
MAC=-(cos(θ0-θ)-cos(θ0))*RH*a-(sin(θ0-θ)-sin(θ0))*P/2*a
RH =solve(Eq(a**3/EI*integrate(MAC/a*(-1)*MAC.subs({RH:1,a:1,P:0}),(θ,0,θ0)),0),RH)[0]
nu =-Poly(numer(RH),P).args[0]; de=-denom(RH).factor() 
print("#" ,nu)
print("# ",de)
# -P*(2*θ0*sin(2*θ0) - 4*cos(θ0) + 3*cos(2*θ0) + 1)
#  2*(2*θ0*cos(2*θ0) + 4*θ0 - 3*sin(2*θ0))
```

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

# いつもと違うおすすめです。

#### 参考文献

~~＞一部に等分布荷重を受ける単純支持はり~~
~~＞JSME p89~~
　
~~＞単純支持ばり 7)~~
~~＞構造力学公式集 p136~~
Karabiner-Elementsを使ってマウスにSafariのブラウザバック機能を設定する

## 経緯🏞️
Mac純正のマウスではなく、バッファローのマウスを使用したいと思い、今回Karabiner-Elementsを使って実装したのでその内容を展開します。

## 実装内容🗒️
BUFFALOのマウスのサイドボタンを使ってSafariでブラウザバック、進むを設定する。

## 実装コード✏️
``` json
{
    "description": "Button 4: BrowserBack, Button 5: BrowserForward for Safari",
    "manipulators": [
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.apple\\.Safari$"
                    ],
                    "type": "frontmost_application_if"
                }
            ],
            "description": "button4",
            "from": { "pointing_button": "button4" },
            "to": [
                {
                    "key_code": "close_bracket",
                    "modifiers": ["command"]
                }
            ],
            "type": "basic"
        },
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.apple\\.Safari$"
                    ],
                    "type": "frontmost_application_if"
                }
            ],
            "description": "button5",
            "from": { "pointing_button": "button5" },
            "to": [
                {
                    "key_code": "non_us_pound",
                    "modifiers": ["command"]
                }
            ],
            "type": "basic"
        }
    ]
}
```
## 参考📕

公式Documentation
https://karabiner-elements.pqrs.org/docs/

Karabiner-Elementsで特定アプリの使用時のみキーバインドを変更する
https://www.870labo.com/posts/change-key-bind-with-karabiner-elements/

## 最後に
よかったら👍いただけると励みになります！
2025年にSAP認定を取得しましょう – SAP C_C4H51_2405 PDF問題集

最新かつ最も正確な SAP C_C4H51_2405 試験問題を活用して、自信を持って認定試験に臨みましょう。CertsTime が厳選して提供するこの問題集は、平均で満足しない意欲的なプロフェッショナルのために設計されています。専門家が開発した SAP C_C4H51_2405 学習資料は、従来の試験対策とは一線を画す新しいアプローチを提供します。

当社の C_C4H51_2405 認定試験問題は、業界の専門家によって最新の試験形式に基づいて厳選・検証されており、常に本番試験に対応できるようになっています。CertsTime では、単なる練習問題を超えた深い解説、シナリオベースの学習、そしてパフォーマンス追跡を通じて、より効率的かつ効果的な学習をサポートします。

昇進を目指す方も、キャリアチェンジを考えている方も、自分のスキルを証明したい方も、CertsTime のリソースはあなたに明確な競争優位を提供します。CertsTime とともに、あなたはただ準備するのではなく、「目的を持って」準備するのです。しっかりとしたスタートを切り、集中力を保ち、SAP C_C4H51_2405 試験に自信を持って合格しましょう。

購入前にお試し – 無料デモ質問にアクセス: www.certstime.com/cheat-sheet-c-c4h51-2405-dumps
MediaPipeのフェイストラッキングを使ってUnity上のキャラクターを動かす

(2025/06時点の記事です)
# 経緯
・OpenCV＋Dlibでフェイストラッキングを行っていたら、キャラクターを動かしたくなった
・でもDlibの顔検出って片目隠れるくらい横向くと外れるよね…じゃあ他のヤツ使おうか！
・MediaPipeいいじゃん！でもC#でラッパー？一応あるけどこれいつの？？？
・MediaPipeが正式にサポートしてるのはPythonか…
# 開発環境
・Python 3.12.10
・Unity 6.1
# 大まかな設計
　とりあえず、カメラ処理をPythonで、Unity処理をC#で行うことだけは決まった。
　問題はどうやってやりとりするかだが…
### 正直Pythonは詳しくない
　正直Pythonは詳しくない。トラッキングはリアルタイム処理だ。それなりの速度が求められる。
　そんな中、パフォーマンスの悪い書き方も最適化の手段もわからん。そんな手探り状態で長々と処理を書くやる気は私にはない…
　つまり、Python部分は出来る限り少なく書きたい。
　というわけで、Python部分をどうするか、いくつか挙げてみる
　・Python部分をライブラリ化
　　メリット　→任意のタイミングでトラッキングデータを収集できる。構成がわかりやすい。
　　デメリット→Nugetで取得出来るラッパーライブラリのほうがよくないか。dll作成方法も知らないし、調べるのが面倒。その割に作り始めたらエラー処理考えたり…やっぱ面倒…
　・Python部分を実行ファイル化
　　メリット　→ほとんどサンプルソースのまま作れる。非同期なのでCPU資源とか効率的に使えるかも。
　　デメリット→やりとりが面倒。同期処理が必要。

　私はPython部分を楽に処理したいためだけに実行ファイル化を選択しました。
### Python−Unity間通信はどうするか
　プロセス間通信をどうするか
　同じようにいくつか候補を挙げる
　・共有メモリ
　　メリット　→最速
　　デメリット→今時使っていいのか？
　・名前付きパイプ
　　メリット　→標準
　　デメリット→Pythonのパイプ処理調べなきゃ
　・TCP
　　メリット　→サンプルが豊富。別のPCに任せてもいい。
　　デメリット→速度が…。と言うか今回の用途ではもっといいプロトコルがあるじゃろう？
　・UDP
　　メリット　→TCPと一緒、TCPよりはやーい
　　デメリット→やっぱ速度が…。

　はい、UDPでいきましょう！
# カメラ側処理の作成
・カメラ側処理(Python処理)でフェイストラッキングが正常に実行出来ているか確認
　この部分はサンプルコードをそのまま利用した。
　サンプルURL:
・UDPの送信処理を実装
　IPアドレスとポート番号は固定。
　約470箇所の座標情報を転送フォーマットに変換して送信
・不要な箇所を削除
　フェイストラッキングが正常に出来ているか、画面上に表示していたコードをコメントアウトしておく(うまくトラッキングできないときの確認用)
# Unity側処理
・UDP受信部分の作成
　起動メソッドでUDP受信スレッドを作成
・受信した座標データを保管する変数を作成
　ここの読み書きをロックしてスレッドセーフとする。
・アップデートメソッドでモデルに座標データを渡す。

 # 完成物
![Test3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741278/0e6c624c-61bc-4e8f-bca5-cf480de40c8a.gif)

(Dlibの名称間違えてましたので直しました)
composer.jsonとcomposer.lock

## composerとは
**PHPのパッケージ・ライブラリ管理ツール**
- パッケージのインストールが楽にできる
- パッケージの依存関係を考えなくてよくなる
- チーム開発でパッケージやパッケージのバージョンを統一できる

## composer.jsonとcomposer.lockの役割
最初に使用されるのが**composer.json**
composer installをしたら、composer.jsonに書かれた情報を基にパッケージやライブラリがvendorディレクトリ配下にまとめてインストールされる。

このとき同時に**composer.lock**ファイルが生成される。
composer install時に参照したパッケージやパッケージのバージョン情報がcomposer.lockに書き込まれる。

そして**二回目以降 composer installをした際は、composer.jsonではなくcomposer.lock　が参照される。**

つまり、composer.lockがある場合は、composer installをしても、単にcomposer.lockを参照してライブラリをインストールするだけで、何かパッケージの情報（パッケージの追加とかバージョン情報とか）が書き換わることはない。

## composer install
**composer.lockがない場合**　
→ composer.jsonを元にライブラリをインストールし、composer.lockを生成

**composer.lockがある場合**　
→ composer.lockを元にライブラリをインストール

## composer update
composer.jsonにパッケージを追加する等の変更を加えて、composer updateをすると、composer.jsonの情報を基にライブラリが最新の状態に更新される。

そしてこのとき、最新にしたパッケージやライブラリの情報がcomposer.lockに書き込まれる（composer.lockが更新される）
 
これ以降は、先ほどまでと同様に、composer installをすると、composer.lockを基に最新のライブラリがアプリにインストールされる。
## まとめ
- `composer.json`	
→ 使用するパッケージとバージョンの指定。手動で編集する。
- `composer.lock`
→	実際にインストールされたパッケージのバージョンを固定化する。自動生成。

- `composer install`	
→ composer.lock があればそれを参照してインストール。なければ .json を元に生成
- `composer update`
→	.json の内容を元にパッケージを更新し、composer.lock を上書き

## 参考記事
[composer.jsonとcomposer.lockの役割について分かりやすくまとめてみた](https://www.engilaboo.com/about-composer/)
ラーメン構造 第6章 はりのたわみと不静定はり 発展例題6.36 p189「材料力学演習(20221021)」をsympyでやってみたい。

・計算結果の表示があと少しです。
・作図は未です。
・タイトルを変更予定です。

# オリジナル
[発展例題6.36 p189](http://zairikiweb.starfree.jp/zai_enshuh/zai_enshuh_ver.3.3.pdf#page=194)＜[「材料力学演習(20221021)一括(ver.3.3)」を勉強したい。#sympy](https://qiita.com/mrrclb48z/items/c3274daf5f7a99cfe027#%E4%BD%9C%E6%A5%AD%E4%B8%AD%E7%A7%81%E3%81%AE%E8%A7%A3%E7%AD%94sympy)
　　？？？タブレット等で、pdfを開く事ができないかも。？？？　
# sympyで
```python
# ver0.1 [発展例題6.36 p189]
from sympy import *
var('P,MB,θA,θB,EI1,EI2,x1,x2,l1,l2,RA')
RA      =MB/l1
MAB     =RA*x1
vAB     =θA*x1-1/EI1**1/6*RA*x1**3
θAB     =diff(vAB,x1)
sol_θA  =solve(Eq(vAB.subs({x1:l1}),0),θA)[0]                          #;print(sol_θA)
sol_θB  =θAB.subs({x1:l1,θA:sol_θA})                                   #;print(sol_θB)
MBC     =MB+Rational(1,2)*P*x2                                         #;print(MBC)
vBC     =θB*x2-1/EI2*(Rational(1,2)*MB*x2**2+Rational(1,12)*P*x2**3)   #;print(vBC)
θBC     =diff(vBC,x2).subs({θB:sol_θB})                                #;print(θBC)
sol_MB  =solve( Eq(θBC.subs({x2:l2}),0),MB)[0]                         #;print(sol_MB)
sol_θB  =sol_θB.subs({MB:sol_MB})                                      #;print(sol_θB)
vBC     =vBC.subs({x2:l2,MB:sol_MB,θB:sol_θB}).simplify()        
print("#",vBC)
com=Rational(1,24)*(l2**3*P)/EI2
print("#",com," * ",vBC/com)
# P*l2**3*(3*EI1*l2 + 4*EI2*l1)/(24*EI2*(3*EI1*l2 + EI2*l1))
# P*l2**3/(24*EI2)  *  (3*EI1*l2 + 4*EI2*l1)/(3*EI1*l2 + EI2*l1)
```

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

# いつもと違うおすすめです。

#### 参考文献

~~＞一部に等分布荷重を受ける単純支持はり~~
~~＞JSME p89~~
　
~~＞単純支持ばり 7)~~
~~＞構造力学公式集 p136~~
Databricks新機能紹介（2025年6月20日まで）

こんにちは！**株式会社マクニカ**でDatabricksのエンジニアをしています。@satoshy2です。
[Databricksとは？（マクニカ紹介ページ）](https://www.macnica.co.jp/business/dx/manufacturers/databricks/)

2025年6月20日までにリリースノートでリリースがアナウンスされている新機能をいくつかご紹介します。
せんしゅうは大きな機能アップデートはありませんでした。

#### 1. [パイプライン間でストリーミングテーブルとマテリアライズドビューが移動可能に（パブリックプレビュー）](https://docs.databricks.com/aws/en/release-notes/product/2025/june#moving-streaming-tables-and-materialized-views-between-pipelines-is-in-public-preview)
パイプライン間でストリーミングテーブルとマテリアライズドビューを移動できるようになりました。
主な利用用途は以下になります。
* 大きいパイプラインから複数の小さいパイプラインに分割
    * 特定のテーブルの更新頻度を変更
* 複数の小さいパイプラインを統合して1つのパイプラインを作成

制限事項としては、以下があります（全ては細かすぎるので、代表的な内容のみ記載）。
* Databricksランタイム16.3以上が必要
* Databricks SQLで作成されたストリーミングテーブルとマテリアライズドビューは対象外
* 移動前と移動先が同じワークスペースにあり、Unity Catalogを使用しているパイプライン

#### 2. [画面左サイドメニューの「ワークフロー」と「パイプライン」が削除され、「ジョブとパイプライン」に変更 (未確認)](https://docs.databricks.com/aws/en/release-notes/product/2025/june#jobs--pipelines-in-the-left-navigation-menu)
Databricksのトップ画面で表示される画面左サイドのメニューから「ワークフロー」と「パイプライン」が削除され、「ワークフロー」があった場所に「ジョブとパイプライン」が表示されるようになります。
`但し、弊社環境では2025年6月20日時点でメニューの変更は確認出来ていません。`

#### 3. [Unity Catalogのテーブルとカラムの説明を生成するAIモデルをDatabricksがホストするモデルに変更](https://docs.databricks.com/aws/en/release-notes/product/2025/june#ai-documentation-for-unity-catalog-tables-and-columns-now-uses-the-same-model-as-databricks-assistant)
Unity Catalogのテーブルとカラムの説明を生成するAIモデルがAzure OpenAIからDatabricksがホストするモデルに変更されました。
Databricksがホストするモデルを使用するようにすでに変更している人は影響ありません。
Databricksがホストするモデルを使用するためには以下の設定が必要でした（この設定をすると、テーブルとカラムの説明以外の機能についてもDatabricksがホストするモデルを使用するようになります。詳細は、[パートナーが提供する AI 支援機能 の設定によって管理される機能](https://docs.databricks.com/aws/ja/databricks-ai/databricks-ai-trust#-%E3%83%91%E3%83%BC%E3%83%88%E3%83%8A%E3%83%BC%E3%81%8C%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B-ai-%E6%94%AF%E6%8F%B4%E6%A9%9F%E8%83%BD-%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E7%AE%A1%E7%90%86%E3%81%95%E3%82%8C%E3%82%8B%E6%A9%9F%E8%83%BD)を確認して下さい）。
1. アカウント管理にログインして、[設定] -> [機能の有効化] -> [partner-powered AI機能を有効化]と移動して無効化します。
1. 変更したいワークスペースに移動した後で、画面右上の自分のイニシャルアイコンをクリックして[プレビュー]を選択します。
1. [Use Assistant with Databricks-hosted models]を[オン]にします。

#### 4. [FIPS準拠の機能拡張](https://docs.databricks.com/aws/en/release-notes/product/2025/june#expanded-feature-support-for-fips-compliant-environments)
モデルサービングのCPUとGPUワークロード、Llama4を除く基盤モデルAPI、AIゲートウェイ、外部モデルがFIPS準拠の機能になりました。
また、これらの機能は、以下のコンプライアンス要件にも準拠しています。
* FedRAMP Moderate
* IRAP
* Canada Protected B

FIPSとは？
FIPS（Federal Information Processing Standards：連邦情報処理規格）は、米国国立標準技術研究所（NIST）が制定した情報処理やセキュリティに関する標準規格です。FIPS 140-2と最新のFIPS 140-3はソフトウェアやハードウェアの暗号化モジュールが満たすべき要件を規定しています。米国連邦政府機関では、FIPS準拠が調達基準で要求されています。
Calva Paredit 使い方  (macOS) [ 備忘録 ]

## 参考
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077353/0ec978b8-ae00-4bf0-8b67-579e834d0c9e.png)

- control + option + -> : 左側の括弧の中に入れる
- control + option + <- : 括弧の中から要素を出す
- control + option + S : 括弧を削除する
KMP初心者がiOSと繋げるまでの防備

本人
iOS6年くらい
kotlinはほぼ初学（6年前くらいにUIちょろっと作ったことある）

困ったところ。
コードはある程度生成AIが作ってくれるのでそれを読むだけで理解できないとこはそんななかった。
どっちかというとグレイドル周りで苦戦した。

期間は１０日くらい。

グレイドルのざっくり理解。

settings.gradle.kts 
⇩

ここが大元




plugins {
    id("com.android.library") version "8.3.2"
    id("org.jetbrains.kotlin.multiplatform") version "2.1.21"
    id("org.jetbrains.kotlin.native.cocoapods") version "2.1.21"
}
みたいにKMPを行う為の「最も元になる部分を管理する」ところ。
また、マルチモジュール化とかアプリの根底を触るときに触るところ。


tomlファイル

各ライブラリ（1st-3rdパーティのダウンロードやバージョンの管理）をエイリアス定義するとこ。

 

ルートのグレイドル

ルートのグレイドルからtomlのエイリアスを呼び出す。

（なおここではalias(libs.plugins.kotlinSerialization).apply(false)）のように
定義だけしてバージョン管理はtomlファイルに任せるべき。（これを徹底しないと多分バージョン管理がグダる。apply(false)がバージョン管理しないよって意味らしい。）


プロジェクトのグレイドル

KMPはライブラリをビルドするプロジェクトなので、iOS,Android両OSにどんな形で成果物を渡すかを設定するところ！

↑
を理解するのに時間かかった。

やったこととしては
簡単なHTTP通信による
ポストとゲットのサンプルを作り
realmで内部データベースを持った。

アーキテクチャは
クリーンアーキテクチャ

データソース
（実際の通信部や内部データベースアクセス部）
⇩
リポジトリ
（複数のデーターソースのデーターを加工する役割。今回は土管）
⇩
ユースケース
(Xcode側から見えるとこ。データソースから取得したデータをマッパーなどでただの構造体にする役割)
みたいな感じ。

以下使用したツール
Kotor(通信部)
Realm-kotlin(内部データベース)
koin(DI)
小ネタのメモ： micro:bit の LED での数字表示の方法を変えて高速化

↓この作品を試作した際に、「micro:bit の LED での数字表示の更新が、ルーレットのほうの変化に全く追いつかず」ということがあって、高速に表示を変える方法を探してみた時のメモです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/1S-dUi5jsDg?si=hw277IkkU2UA2g04" 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>


ちなみに、PC でルーレットからの情報（Joy-Con を HIDデバイスとして扱い、無線経由でデータを受信してます）を描画に反映させた場合は、↓これくらいの頻度では更新が行われる感じです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/zr4KoYUvT1c?si=RDylD6e48VgxvM7G" 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>


## 結論

まずは、結論から書いてみます。


### 表示が遅くなるもの

↓ここにあるブロックを使うと、手軽に LED表示を活用できるのですが、一方で、これだと表示の更新を高速に行えないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ebc186e9-d6d0-4b31-8948-52c2d80751e5.png)

簡単に表示内容を設定できて便利なブロックなのですが、どうやら高速な LED の点灯・消灯を行えないようでした。


### 表示を高速にする方法

それで、「LED を直接扱うブロックもあったな」と思ってそれを試し、高速な点灯・消灯が行えました。具体的には以下のブロックです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c842954b-0462-4f43-ae5f-0ed5ad9a91d6.png)

テスト的に、このブロックでの点灯・消灯を、まずは LED 1つの点灯・消灯（＋ 座標移動）という内容でやってみたところ、かんり高速な点灯・消灯が行えたので、それを数字の表示に用いました。


#### 高速な数字の切り替え表示

高速な切り替えをさせた例は、以下になります。

動画の最初の部分で表示の切り替え速度が変わっているところは、数字の切り替えの遅延を「200ミリ秒 ⇒ 100ミリ秒 ⇒ 0秒」と変えてみています。その数字を小さくしていくごとに表示の変化が高速になっているのが分かります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/9QItmc9BIVI?si=eXHpIuoiUX-sxePE" 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>


## 実装例

実装については、とりあえずサクッと試したかったので、力業でやっています。


### 点灯

例えば 数字の 0 や 1 は、「基本 ⇒ 数を表示」のブロックで 0 や 1 を指定した時に表示されるパターンを、以下のようにそのまま xy座標指定で列挙した感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/da370304-0001-4a33-92dd-73c136a22140.png)

同様に、2 から 9 のパターンも、「基本 ⇒ 数を表示」のブロックで表示されるパターンに合わせました。

10 については、「数を表示」ブロックでやると横スクロールするような表示方法になるようだったので、自分で 5x5 におさまるパターンを設定しました。


### 消灯

消灯に関しては、念のため数字の切り替えの時に全消灯させています。それに関しては、x:0, y:0 から x:4, y:4 までの 25パターンをきそく作ってやれば良いので、以下のように 2重ループで消灯する座標を指定していくようにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/da7ff1ed-35cb-4aa0-80fb-8219f283d4a5.png)
a11y MCP を作成して登壇までした話

## はじめに
今年の5月23日と24日に TSKaigi が開催されました。
そこで登壇できなかったのですが、その後にフリー株式会社さんで開催されたアフタートークに登壇させていただきました。
そこでの内容を記事にしてなかったなぁと思ったので、今回記事にしようかと思います。

## 登壇に関する資料
発表資料：https://gamma.app/docs/MCP--ibrd92jgmyanm2l
発表の際のアーカイブ：https://www.youtube.com/watch?v=yx5kUww0fpg

Youtube に関してはいつ削除されるかわからないので、発表している一部のスクショを載せておきます。

![IMG_5146.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341734/ce21453c-046a-488c-9513-eb91395c3063.jpeg)


## 現場紹介
今回の記事にも Organization として紐づけさせていただいてますが、[株式会社うるる](https://www.uluru.biz/)と言うところで働かせていただいております。
今回の Qiita Tech Festa でもものすごいたくさんの記事が投稿されており、技術にもイケイケな企業だと思っております。
自分のいるチームでは、有志で土日にもくもく会を開いてたりしてます。
働いていてとても楽しい現場です。

## 発表内容

### 概要
現在、X を見ていると Claude Code の話題ばっかりですが、その Claude で使用する MCP サーバを作成した話をさせていただきました。
中身は a11y のテストをしてくれるものとなっています。

npm: https://www.npmjs.com/package/a11y-test-mcp?activeTab=readme

[lobehub](https://lobehub.com/ja/mcp) といった MCP のレジストリみたいなところにも提出してるんですが、まだ一覧に出てこず・・・

### MCP とは？
こちらは、さすがに説明はいらないと思いましたが、念の為記載しておきます。
MCPサーバーは、AIが外部ツールやデータと連携するための「橋渡し役」となる技術です。
要は AI Chat と外部ツールを繋ぐアダプタみたいなものですね。

### 技術構成
* a11y test
  * playwright
  * @axe-core/playwright
* base
  * typescript（こちら、発表資料に抜けております）
* MCP
  * @modelcontextprotocol/sdk
* validation
  * zod
* Architecture
  * ↓

![sukurinsiyotuto-2025-05-28-16.23.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341734/971100cf-de9b-4cdf-8e1e-399f8c46d116.png)

### 入力値
AI Chat の文字列から URL と a11y の指標を取得するようにしました。

* URL（必須）
* a11y 指標（任意）
  * default
    * WCAG 2.0 level A
    * WCAG 2.0 level AA
    * WCAG 2.1 level A
    * WCAG 2.1 level AA

上記の入力値から playwright を用いて a11y のスコア等のテストを実施します。
その結果を文字列にまとめて、AI に返し、分析してもらうといった流れになります。

### 実際の動き
下記の画像は URL と a11y の指標を渡した際の結果になります。

![GpbmMUSbEAQ9ed4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341734/0a754ea1-ecb7-40c5-9da0-d0da3a06a178.jpeg)

画像を見てわかる通り、しっかりテストされてますね🙌
上記のテスト結果を踏まえて、どこに問題があるのかを続きの Chat で聞いたのが下記になります。

![sukurinsiyotuto-2025-04-26-13.58.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341734/953844b6-1819-4c2f-9f14-5d2672ad84d1.png)

テスト結果をしっかりまとめる実装にしたので、上記のような結果で返ってくるようになりました。

### ハマりポイント
今回、Claude で 作成した MCP サーバを登録して動作確認を行ったのですが、修正をした後に再度動きを確認しようとしたら、古いソースでずっと動き続けると言うことにハマりました・・・
そのため、VSCode の Copilot で追加して、削除してを繰り返す方法でなんとかデバッグをとるようなことをしました。

今であれば、VSCode v1.101 で watch モードがリリースされたので、比較的簡単にデバッグが取れるようになったかと思われます。

https://code.visualstudio.com/updates/v1_101#_mcp-development-mode

## まとめ
今回、MCP サーバを作成したもそうですが、何よりも、外部での登壇が初の経験でした。（本当に貴重な機会でした）
次は Vue Fes Japan の LT 枠として応募しており、結果を楽しみに待っています。

MCP サーバや、気になるけど手が出せないようなものは他にもあると思います。
ですが、今の AI の時代、簡単に手が出せるようにもなっているので、AI に大枠を作ってもらう・作ってもらった後に自分で手を入れるみたいな開発手法で、皆さんもぜひいろんな技術に手を出してみていただければと思います！
エラーの解析とSuspenseについて

## useSearchParams() should be wrapped in a suspense boundary エラーについて
実装中、以下のようなエラーが表示されたため、原因と対処法をまとめました。

```
useSearchParams() should be wrapped in a suspense boundary at /xxx
```
### エラーの原因
ざっくり言うとuseSearchParams() はクライアント限定のフックなのに、それをサーバーコンポーネント（例：page.tsx） で使おうとしたからエラーが出ているという状況です。
Next.js（特に App Router モード）では、各ファイルが自動的に「サーバーコンポーネント」として扱われます。そして、useSearchParams() は URL クエリをブラウザ側から取得するフックなので、Node.js（サーバー環境）では実行できません。
Next.js はこれを検知して、「クライアント側で実行させる準備（＝Suspenseでラップ）をしてね」と警告してくれているわけです。

### Next.js の App Router モードとは？
Next.js 13以降、app/ ディレクトリ構造を使うと「App Router モード」になります。
このモードでは、コンポーネントが次のように分類されます：
Server Component（デフォルト）：基本はサーバーで実行される
Client Component：先頭に 'use client' と書いたもの

たとえば app/page.tsx は特に指定しない限り サーバーコンポーネント です。
その中で useSearchParams() を直接使おうとすると、window オブジェクトがないためエラーになります。

###  Suspenseとは？
わかりやすく言うと…「まだ準備できてないから、ちょっと待っててね」と言える仕組みです。
たとえば、以下のようなコードは

```
<Suspense fallback={<p>読み込み中...</p>}>
  <MyComponent />
</Suspense>
```
MyComponent の中で何かデータ取得やルート解析をしていて
その準備が終わるまでの間
<p>読み込み中...</p> を表示しておくという機能を持ちます。つまり、「非同期処理を含むコンポーネントに対する待機機能」です。

###  なぜSuspenseでラップしなきゃいけないの？
React や Next.js の一部の機能は、「今のページの情報」などクライアント側でしか取得できないデータを扱います。

useSearchParams()：クエリパラメータを取得
useRouter()、usePathname()：現在のルートの情報を取得
React.lazy()：コンポーネントの遅延読み込み

これらはすべて「非同期的に値を取得する」必要があります。にもかかわらず、サーバーで即時に使おうとするとエラーになるため、Suspenseを使って待機処理を明示する必要があるわけです。
お金の支払い　硬貨の最小枚数



今回は、一円玉とX円玉、Y円玉の3種類の硬貨しかないpaiza国での支払いを計算する問題に挑戦！

<br>

# 問題概要

1円・X円・Y円の3種類のコインだけを使って、Z円をぴったり支払う。その時の最小の枚数を求めよ。

<br>

入力例：

    50 100 855

出力例：

    14

<br>

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__payment

<br><br><br>

# ✅ OK例：
```js
const rl = require('readline').createInterface({ input: process.stdin });

rl.once('line', (input) => {
  const [X, Y, Z] = input.split(' ').map(Number);
  let minCoins = Infinity;

  for (let i = 0; X * i <= Z; i++) {
    for (let j = 0; X * i + Y * j <= Z; j++) {
      const rest = Z - (X * i + Y * j); // 1円玉の数
      const total = i + j + rest;
      if (total < minCoins) minCoins = total;
    }
  }

  console.log(minCoins);
});
```
- X円とY円硬貨をいろんな枚数で使ってみて、残りは全部1円玉。
- すべての組み合わせを試して、いちばん少ない枚数を探している。

<br><br>

## 💡比較：if文 vs Math.min

### 1️⃣ if 文で書くと：
```js
if (total < minCoins) {
    minCoins = total;
}
```
### 2️⃣ Math.min() で書くと：
```js
minCoins = Math.min(minCoins, total);
```

<br><br><br>

## 🗒️気づきメモ
- `X * i + Y * j <= Z` にして、「ピッタリ以下」だけを調べるのが大事。
- `Z - (X*i + Y*j)` で残りを1円玉で計算する。（初め一円玉を忘れてたミスった）
- 最小値の更新は `minCoins = Math.min(minCoins, 新しい枚数)` という書き方もある。


<br><br><br>[僕の失敗談(´;ω;｀)と解決法🐈](https://paizabeginner.wordpress.com/2025/06/23/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9a%e3%81%8a%e9%87%91%e3%81%ae%e6%94%af%e6%89%95%e3%81%84%e3%80%80%e7%a1%ac%e8%b2%a8%e3%81%ae%e6%9c%80%e5%b0%8f%e6%9e%9a/)
SageMaker Multi-Model Endpoints（MME）における並列推論について

小規模なLLMを１つのコスト効率よく動かすにはどうすればいいのか気になったのでメモ

SageMakerではMulti-Model Endpoints（MME）が用意されており、このMMEには[NVIDIAのTriton Inference Server](https://www.nvidia.com/ja-jp/ai-data-science/products/triton-inference-server/) が活用されております。
by [Run multiple deep learning models on GPU with Amazon SageMaker multi-m...](https://aws.amazon.com/jp/blogs/machine-learning/run-multiple-deep-learning-models-on-gpu-with-amazon-sagemaker-multi-model-endpoints/)

なお、SageMaker Multi-Container Endpoints（MCE）はGPUインスタンスを選ぶことができません。（2025/06/23現在）

Triton Inference Serverの機能、「[Concurrent model execution](https://docs.nvidia.com/deeplearning/triton-inference-server/user-guide/docs/tutorials/Conceptual_Guide/Part_2-improving_resource_utilization/README.html#concurrent-model-execution)」を利用することで同一モデルの複数インスタンスをGPU上に並列に立ち上げることができます。
Triton Inference Serverがモデルをロード・実行する際に必要な設定情報を記述するファイル `config.pbtxt`  に `instance_group`  を設定することで実現できます

```
例）
instance_group [
  {
    count: 2. # GPU 0上に2インスタンス
    kind: KIND_GPU
    gpus: [0]  
  },
  {
    count: 3
    kind: KIND_GPU
    gpus: [1, 2]  # GPU 1と2上に3インスタンスずつ
  }
]
```

また、同時に「[Dynamic Batching](https://docs.nvidia.com/deeplearning/triton-inference-server/user-guide/docs/tutorials/Conceptual_Guide/Part_2-improving_resource_utilization/README.html#what-is-dynamic-batching)」を利用することで複数の推論を１つのバッチに統合してスループットを向上させることができます。
Triton Inference Serverがモデルをロード・実行する際に必要な設定情報を記述するファイル `config.pbtxt`  に `dynamic_batching`  を設定することで実現できます

```
例）
dynamic_batching {
max_queue_delay_microseconds: 100   # 100ms毎にバッチ処理
}
```

Dynamic Batchingを利用した例
![dynamic_batching (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319433/b39815eb-987f-4bdc-ab7e-a3bb17e42a9f.png)
by https://docs.nvidia.com/deeplearning/triton-inference-server/user-guide/docs/tutorials/Conceptual_Guide/Part_2-improving_resource_utilization/README.html#what-is-dynamic-batching

Dynamic BatchingとConcurrent model executionを組み合わせた例
![multi_instance (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319433/c2767247-479b-4eca-89ef-1275fae77997.png)
by https://docs.nvidia.com/deeplearning/triton-inference-server/user-guide/docs/tutorials/Conceptual_Guide/Part_2-improving_resource_utilization/README.html#concurrent-model-execution


以下パフォーマンス測定では、何もしていない状態と比べ4倍近くスループットが上昇しレイテンシも約70%改善しておりGPUをより効果的に利用しています

https://docs.nvidia.com/deeplearning/triton-inference-server/user-guide/docs/tutorials/Conceptual_Guide/Part_2-improving_resource_utilization/README.html#measuring-performance

このことから、必要なGPUリソースが少ないモデルを推論するときは、モデルの必要なサイズに合わせるのではなくDynamic BatchingとConcurrent model executionを加味したインスタンス選定をすることでよりコスト効率の高い環境を用意することができます。




Qiita上の私の記事・コメントは個人的な意見に基づくものであり、所属する組織、団体とは一切関係ありません。
gitでトピックブランチをmainブランチに綺麗にリベースする方法

# はじめに
gitでトピックブランチをmainブランチにリベースした時 git のlogが汚くなってしまわないためのメモ

前提:我々のチームではトピックブランチはmainにリベースを行いlogを直線的に保っています。

# 結論
--ff-only feature/my-topic
をつけないと下記手順の場合logが汚れてしまう。


## 1 ローカルを最新の状態に更新し、トピックブランチをmainでリベース

```
git checkout feature/my-topic
git fetch origin
git rebase origin/main
```

## 2 mainブランチに移動し mainブランチにマージ

```
git checkout main
git merge --ff-only feature/my-topic
```


## ※mainへのマージが禁止されPull Request (PR) を使う運用の場合
base main 
compare feature/my-topic


✅ Rebase and merge
を選択する。
[Ruby] to_iメソッドで基数(進数)を指定する

# はじめに
Rubyシルバーの勉強をしている中でto_iメソッドを用いて基数を指定する部分があったのでまとめていきます。

# to_iメソッドで基数を指定する

to_iメソッドは、文字列を整数に変換するメソッドです。
引数を指定しない場合は10進数として解釈されますが、基数(進数)を指定することで2進数や16進数などとして解釈し、整数に変換することができます。

``` ruby
# 何も指定しないと10進数として解釈される
"12".to_i # => 12

# 基数(2)を指定すると2進数として解釈される
"10111".to_i(2) # => 23

# 基数(8)を指定すると8進数として解釈される
"070".to_i(8) # => 56

# 基数(16)を指定すると16進数として解釈される
"A61".to_i(16) # => 2657
```

# まとめ
今回はto_iメソッドにおける基数の指定方法について解説しました。
進数を適切に指定することで、さまざまな表現の文字列を整数に変換することができます。
最後まで読んでいただきありがとうございました。
本当のAI OCR、ついに実現しました！【kintone×Geminiで手軽にAI-OCR体験】

> 「御託はいいから、まずはサンプルを見せて！」という方はこちら👇

 **[ダウンロードサイト（LP）はこちら](https://ai-ocr-plugin-d2bpocg.gamma.site/)**
「無料プラグインをダウンロード」ボタンから今すぐ試せます。

<iframe height="400" src="https://www.youtube.com/embed/Z8L8OPTAd_8"></iframe>

---

### 💡 開発背景

ふと、「本当のAI OCR」を作りたいと思いました。

巷にはAI OCRが溢れていますが、AI OCRと名乗っていても、AI OCRと聞いて想像するものとは程遠いものがほとんどです。皆さんもそんな経験ありませんか？

具体的には、識字率が低かったり、事前の設定（主にテンプレート）が面倒だったり…。書類を読み込ませれば思った通りに出力できると思っていたら、心がくじけます…。

ただ、OCRの仕組みを調べると、これがなかなか難しいことだと気づきます。正直、単純なルールベースの考え方では不可能です。

しかし、救世主となるLLM（大規模言語モデル）の登場によって、本当のAI OCRを作れるのではないかと思いました！✨

---

### 🛠️ 本当のAI OCRの実現プロセス

まず、「本当のAI OCR」という抽象的な概念を手順ごとに具体的に考えました。

①画像データの文字を認識して変換する。
②①で取得した文字情報を（座標等の情報から）つなぎ合わせて単語を作る。
③②で作った単語の意味を理解し、値と項目に整理する。
④項目のなかから、ユーザーが必要としているものを抽出する。
⑤ユーザーが求める形式（書式）で④を返す。

この中で①と②はディープラーニングの発達によりかなりの高水準で実現できていました。特にGoogle社のVision APIは手書き文字を含めて高精度です。

ただ、③以降についてはまだ難しく、ここにLLMを組み合わせることで実現したいと思いました。

---

### 🎨 UIはkintoneを選定

UI選定基準は以下の通りです。

①ユーザーが直感的に操作できる。
②構造（操作結果）を簡単に取得できる。
③開発工数を抑えて構築できる。

以上の点から **kintone** を採用しました。

kintoneならユーザー側で「アプリ構築＝取得したいデータ」と仮定でき、アプリの構造もAPIで簡単取得可能。プラグインで手軽にカスタマイズもでき、低予算・早期開発が可能です。

kintoneについて：[kintone公式サイト](https://kintone.cybozu.co.jp/)

---

### 🔍 LLMエンジンはGeminiを採用

LLMエンジン選定にあたり、ChatGPT・Claude・Geminiの3つを比較しました。

| LLM       | 文字認識精度 | レスポンスの正確性    | APIでの使い勝手 |
| --------- | ------ | ------------ | --------- |
| ChatGPT   | ⭕️     | △（JSONに難あり）  | △         |
| Claude    | ⭕️     | ❌（JSONに制限あり） | ❓（実用難）    |
| 🌟 Gemini | ⭕️     | ⭕️           | ⭕️        |

ChatGPTはレスポンスの安定性が低く、ClaudeはプロンプトでしかJSON制限できなかったため、Geminiを採用しました。

---

### 📐 システム構成概要

構成は以下の通りです。

①kintoneでアプリ構築または既存アプリ選定（ユーザーがOCRで取得したい情報を特定）。
②アプリの構造データを取得。
③OCR対象ファイルと構造データをLLM（Gemini）へ送信。
④結果を構造データに合わせて取得。
⑤結果をkintoneアプリに登録。

### 🚩 結果まとめ

🎉 個人的には大成功です！

下記、当初要件は網羅できたと思います。

<iframe height="400" src="https://www.youtube.com/embed/Z8L8OPTAd_8"></iframe>


事前設定なしの取得や追加項目の自動取得、テーブル内データの取得も想像以上でした。

＊詳細なプログラムコードや省略した部分（PDF→画像変換）は別の記事で紹介していきたいと思います。

---

### 📥 サンプル公開中！

実際に試したい方は無料プラグインをご利用ください。

* 1ドメインあたり **ファイル20枚またはGemini利用100万トークンまで** 無料。
* 複数ファイルや複数ページの場合は1ファイル目・1ページ目のみ変換。

🔗 [無料プラグインをダウンロード](https://ai-ocr-plugin-d2bpocg.gamma.site/)

🛠️ [kintoneプラグイン導入方法はこちら](https://jp.cybozu.help/k/ja/app/plugin/manage/plugin.html)

ぜひ業務効率化にお役立てください🚀✨
なぜ「パスキー」はセキュリティに強いのか？


## 〜仕組みと処理フローから読み解く、現実的にハッキング不可能な理由〜

　
つい最近、ForbesJapanでGoogleがユーザーへ認証方式をパスキーへ移行するよう推奨しているという記事を見て、改めて調べてみました。


## はじめに

「パスキー（Passkey）」は、Apple・Google・Microsoftなどが推進する**次世代の認証方式**で、従来のパスワードによるログインを根本から置き換えるものです。

- ✅ パスワードを覚えなくていい  
- ✅ フィッシング耐性がある  
- ✅ デバイスだけで認証が完結する  

などのメリットがよく語られますが、この記事では特に **「なぜセキュリティに強いのか」** を重点的に、**実際の処理フロー**と合わせてわかりやすく解説します。



## パスキーとは何か？

パスキーは、「公開鍵暗号方式」を使った認証手段です。  
ユーザーがサービスにアカウントを登録する際に、以下のような鍵ペアが生成されます：

- 🔑 **秘密鍵（private key）**：ユーザーのデバイス内に保存（外部に出ない）  
- 🗝️ **公開鍵（public key）**：サービス側に送信・保存  

> ✅ 秘密鍵は絶対に外部に出ないのが大前提です。



## 認証の処理フロー

以下に、ユーザーがログインする際の一般的な処理フローを説明します。

1. **ログイン開始**  
   ユーザーがサービスのログイン画面で「パスキーでログイン」を選択

2. **チャレンジ送信**  
   サービスが「チャレンジ（乱数）」をブラウザに返す  
   → ブラウザはそのチャレンジをOS/認証デバイスに渡す

3. **生体認証 or PIN**  
   デバイス側で秘密鍵にアクセスする前に、ユーザーの認証（顔/指紋/PIN）を実施

4. **署名処理**  
   秘密鍵を使ってチャレンジにデジタル署名を行う

5. **署名検証**  
   ブラウザが署名と公開鍵をサーバーに送信  
   → サーバー側で公開鍵を用いて署名を検証  
   → 一致すればログイン完了！




## パスキーが強力なセキュリティを実現できる理由

### ✅ 1. 秘密鍵が外に出ない

最大の強みはここです。  
秘密鍵はユーザーのスマホやPCの**セキュア領域**（例：Secure Enclave / TPM）に保存され、外部には一切出ません。

> 🔓 仮にサーバーがハッキングされても「秘密鍵がない」ため、なりすましログインは不可能です。

---

### ✅ 2. 生体認証によるデバイスロック

ほとんどのパスキー対応デバイスでは、**秘密鍵へのアクセスに生体認証が必要**です。  
つまり、デバイスを盗まれても、**指紋や顔認証を突破しない限り使えません**。

> 🧠 パスワードのように「知識」ではなく、「本人の身体」を使った認証です。

---

### ✅ 3. フィッシングに強い

フィッシングサイトは「見た目だけ本物」ですが、**パスキーはドメイン単位で公開鍵を識別**しています。  
つまり：

- `google.com` に登録したパスキーは  
- `g00gle-login.com` では絶対に使えない（チャレンジ拒否）

> 📛 これにより、パスワードを盗む系の攻撃は通用しません。



## クロスデバイス認証とは？

例えば「ネットカフェのPCから自分のGoogleアカウントにログインしたい」とします。  
このPCにはあなたの秘密鍵はありません。でもログインは可能です。

### 🔄 処理イメージ

1. ネットカフェのPCで「パスキーでログイン」を選択  
2. QRコードが表示される  
3. あなたのスマホでQRコードを読み取る  
4. スマホで生体認証 → チャレンジに署名 → ネットカフェPCに送信  
5. PC側でログイン成功

この仕組みを **クロスデバイス認証** と呼びます。

> 🔐 秘密鍵は常に「あなたのデバイスの中」だけに存在しており、  
> リモートで安全に署名処理が可能になります。



## まとめ：パスキーの安全性は現実的に破られにくい

| 特性 | セキュリティ上の利点 |
|------|------------------|
| 🔒 秘密鍵が外に出ない | サーバーがハッキングされても漏洩なし |
| 🧑‍💻 生体認証が必須 | なりすましが現実的に不可能 |
| 🌐 ドメイン制限 | フィッシング対策が組み込まれている |
| 📱 デバイス署名方式 | オフラインやクロスデバイス対応も万全 |




## 参考

- [FIDO Alliance: What is a Passkey?](https://fidoalliance.org/passkeys/)
- [Google セキュリティブログ: パスキーとは](https://security.googleblog.com/...)
【Python】scikit-learnの主成分分析に関して

主成分分析は主にデータの前処理で利用します。元のデータの特徴を抽出して次元数（説明変数）を削減することもできますし、次元数は変えずに特徴を抽出することもできます。

次のirisのデータは、「がく片の長さ」など4つの次元数（説明変数）があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/1f79b331-fa92-4b35-88f0-9df495254093.png)




主成分分析のPCAクラスを利用すると、4つの説明変数の特徴を抽出しながら、説明変数を減らすことができます。


from sklearn.decomposition import PCA
from sklearn.datasets import load_iris

# irisデータをロード。
iris = load_iris()

# 4つの説明変数をXに代入。
X = iris.data

# 主成分分析のPCAクラスをインスタンス化。「n_components=2」で説明変数を2つに削減することを指定。
pca = PCA(n_components=2)

# 4つの説明変数の主成分を分析し（fit）、2つの説明変数に削減（transform）。
X_trans = pca.fit_transform(X)

▶︎
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/b3fff041-9ff2-44ad-afc7-17fd59a6c7b2.png)



引数「n_components」を付けなかった場合は、次元数は変えずに主成分を抽出します。この場合は、左にある列ほどデータの特徴を表した説明変数になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/7a786e21-8df3-4ff7-9be6-24b9bdb59243.png)





データの前処理には「分散正規化（StandardScaler）」や「最小最大正規化（MinMaxScaler）」もありますが、これらはデータのスケール（単位）を変換するだけで、次元数は削減されません。

【主成分分析】
次元数が多いデータに対して、データが散らばっている方向を探して、元の次元数と同じか、低い次元数に変換。

【分散正規化】
平均が0、標準偏差が1になるようにデータを変換。データの次元数（説明変数の数）は変わらず。

【最小最大正規化】
最小値が0、最大値が1になるようにデータを変換。データの次元数（説明変数の数）は変わらず。



主成分分析は目的変数（正解データ）を使わないため、教師なし学習の一種です。
【Python】scikit-learnの決定木の特徴

決定木はモデルの内容が理解しやすいアルゴリズムです。

次のツリーは、決定木でirisの花を4つに分類したときの過程です。


from sklearn.datasets import load_iris
from sklearn.model_selection import train_test_split
from sklearn.tree import DecisionTreeClassifier

iris = load_iris()
X, y = iris.data, iris.target
X_train, X_test, y_train, y_test = train_test_split(X, y, random_state=42)

tree = DecisionTreeClassifier(max_depth=3)
tree.fit(X_train, y_train)





このように分類の過程が可視化できるため、決定木は内容が理解しやすいモデルです。




不純度は上のツリーの「gini」の数値です。この数値が下がる場合は、データを分割したほうが良いと判断され分割されます。

引数「max_depth」は決定木の深さを指定します。上の例は「max_depth=3」で指定しているため、親ノードの下が3層になっています。

「max_depth」は指定しなくても学習モデルを作成できますが、その場合は次のツリーのようにすべての不純度が「0」になるまで分割し続けます。




これは訓練データに過剰適合しているため、テストデータに対する精度が下がります。過剰適合した場合は、「グリッドサーチ」で最適な深さを探るか、決定木を複数作るアルゴリズム「ランダムフォレスト」を採用します。
Google Colabで画像ファイル（PNG→JPEG）を自動変換・リサイズする方法



# Google Colabで画像ファイル（PNG→JPEG）を自動変換・リサイズする方法

Webサービスへの画像アップロードで以下のような制限がある場合：

* **ファイル形式は JPEG（拡張子 .jpg / .jpeg）**
* **横600px以上・縦730px以上**

スクリーンショットやスマホ画像などで要件を満たさないことがあります。本記事では、**Google Colabを使って画像ファイルを一括チェック＆変換＆リサイズ**するPythonコードを紹介します。

---

## ✅ 必要なライブラリの準備

Colabにて以下のライブラリをインストールします。

```python
!pip install -q Pillow
```

---

## ✅ Colabで動作する画像変換スクリプト

以下のPythonコードをColabにコピー＆実行してください：

```python
# Program Name: convert_to_jpeg.py
# Creation Date: 20250623
# Overview: Convert uploaded image (e.g., PNG) to JPEG format with required dimensions.
# Usage: Upload an image and convert it to a valid JPEG with .jpg extension.

!pip install -q Pillow

# === パラメータ定義 ===
MIN_WIDTH = 600
MIN_HEIGHT = 730
OUTPUT_FILENAME = "converted_image.jpg"

from PIL import Image
import os
from google.colab import files

uploaded = files.upload()  # ファイルアップロード

for filename in uploaded.keys():
    try:
        with Image.open(filename) as img:
            print(f"元のサイズ: {img.size}")

            # RGBAやPモードの透過PNGに対応（白背景で合成）
            if img.mode in ("RGBA", "P"):
                background = Image.new("RGB", img.size, (255, 255, 255))
                background.paste(img, mask=img.split()[-1] if img.mode == "RGBA" else None)
                img = background
            else:
                img = img.convert("RGB")

            # サイズが小さい場合は拡大
            width, height = img.size
            new_width = max(width, MIN_WIDTH)
            new_height = max(height, MIN_HEIGHT)
            if (width, height) != (new_width, new_height):
                img = img.resize((new_width, new_height))
                print(f"→ リサイズ後: {img.size}")

            # JPEGで保存
            img.save(OUTPUT_FILENAME, format="JPEG")
            print(f"[OK] JPEG形式に変換・保存: {OUTPUT_FILENAME}")

            # Colab上でダウンロード可能に
            files.download(OUTPUT_FILENAME)

    except Exception as e:
        print(f"[ERROR] 変換失敗: {e}")
```

---

## ✅ 使い方

1. 上記コードをColabに貼り付けて実行
2. `Upload` ダイアログで `.png` や `.bmp` などの画像を選択
3. 自動で `.jpg` へ変換・保存され、ダウンロードが開始されます

---

## ✅ 処理内容まとめ

| 機能            | 内容                       |
| ------------- | ------------------------ |
| 拡張子変換         | PNG → JPEG（拡張子 `.jpg`）   |
| 透過処理          | 白背景に変換して透過解除             |
| 最小サイズチェック     | 幅600px・高さ730px未満なら自動リサイズ |
| Colabでのダウンロード | 自動で `.jpg` ダウンロード開始      |

---

## ✅ 応用例

* スマホのスクショが `.png` → 一括変換
* パスポート・証明写真を要件に合わせて自動整形
* ウェブ申請や就活サイトへのアップロード前の前処理
【Python】scikit-learnの教師あり学習で、データ間のマージンを最大化して分類するモデル(サポートベクタマシン)

サポートベクタマシンは、各データの距離が最大になる境界線を求めることでパターン分類を行います。この距離を最大化することを「マージン最大化」と呼びます。

次のデータの分類を考えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/652d1d5c-2502-4ca3-b184-9768aca0373e.png)




線だけで分類しようとすると、何本も線が引けるためどれが最適か分かりません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/1f1b7e6a-e4fe-4de9-b357-2551bb1b49a2.png)




サポートベクタマシンはこの線に幅を持たせて、幅が最大になるポイントを見つけて分類します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/08878904-8aa8-4fb4-9b87-3c2769c5868a.png)





この場合は中央の線のマージンが最も広いため、ここで分類します。
【#4】ジャンプ力300！60秒で作るスーパージャンプ床【Roblox Lua】

# 【#4】ジャンプ力300！60秒で作るスーパージャンプ床【Roblox Lua】

こんにちは、うのっちです🍝  
この記事は、[Medium英語記事](https://medium.com/@unocyp/make-a-super-jump-pad-in-roblox-in-just-60-seconds-9355fd7461dd)の日本語版です。  
**たった60秒で、ジャンプ力が一時的に爆上がりするジャンプ床**を作る方法を紹介します！

---

## 🎬 実際の動作を見たい？
https://www.youtube.com/watch?v=-G7t926glkY

---

## 🛠️ この教材で学べること

- プレイヤーがパーツに触れたか検出する方法
- ジャンプ力を一時的に上げる方法
- 一定時間後にジャンプ力を元に戻す方法

---

## 🧱 ステップ1：ジャンプパッドを設置

1. `Part` を1つ設置し、名前を `JumpPad` にする  
2. `Anchored = true` に設定して、地面に固定  
3. `CanCollide = true` のままでOK（床として機能）

---

## 🧠 ステップ2：スクリプトを追加

`JumpPad` に `Script` を挿入し、以下のコードを貼り付けます：

```lua
local part = script.Parent

part.Touched:Connect(function(hit)
 local character = hit.Parent
 if character and character:FindFirstChild("Humanoid") then
  character.Humanoid.JumpPower = 300
  character.Humanoid:ChangeState(Enum.HumanoidStateType.Jumping)

  -- Reset after 2 seconds
  task.delay(2, function()
   if character and character:FindFirstChild("Humanoid") then
    character.Humanoid.JumpPower = 50
   end
  end)
 end
end)
```

## 💡 解説ポイント
Touched：プレイヤーが床に触れた瞬間に反応

JumpPower = 300：ジャンプ力を爆上げ！（通常は約50）

ChangeState(Jumping)：ジャンプ状態に即移行させる

task.delay：2秒後にジャンプ力を元の値（50）に戻す安全な非同期処理

## 🧪 ボーナスヒント
JumpPower や delay 時間はゲームに合わせて自由にカスタマイズOK！

床の色やエフェクトを派手にするともっとゲームっぽくなります✨

## 👤 作者について
うのっち・ピーター・ぺーたー 🍝
60秒で学べるRobloxスクリプト講座をTikTokとMediumで連載中！
フォローしてくれると超よろこびます🙌