OmniAICreator/Qiita-1.07M huggingface dataset:
生成AIの巨象、Googleが放つ二枚刃　動画生成 Veo と Meet 同時通訳が切り拓く新競争地図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4006596/d5427b4a-7a5a-45a9-b40a-7d6a8ed39b86.png)


Googleはわずか1年あまりの間に、テキスト→高解像度動画を生成する**Veo**と、話者の声色を保ったまま他言語へリアルタイム変換する**Google Meet同時通訳**を相次いで実装しました。
前者は「創る」を、後者は「伝える」を**無料で当たり前の機能**へ押し上げ、市場の**標準仕様**を塗り替えつつあります。
結果として、専業スタートアップは機能開発での差別化余地が急速に縮小し、「**深い業務課題**へ寄り添う価値設計」こそが生存戦略の本丸なのではないでしょうか。

今回はビッグテック企業の牽引する世界に、中小や個人の開発者がどのように生き抜いていくかを検討してみます。

---

## 1. Googleが放った二つの衝撃

### 1-1 動画生成モデル **Veo 3**
* 2024 年の [Google I/O](https://blog.google/technology/ai/google-generative-ai-veo-imagen-3/) で高解像度動画生成 *Veo* が初公開。  
* 2025 年 5 月には 4K＋音声付きへ進化した **Veo 3** が登場し、[PetaPixel](https://petapixel.com/2025/05/20/googles-veo-3-and-imagen-4-generative-ai-models-crank-the-realism-dial-to-11/) が「実写級リアリズム」と評した。  
* API は Vertex AI から呼び出せ、既存の GCP ワークフローにそのまま統合可能。  

### 1-2 Google Meet 同時通訳
* 2025 年 I/O で披露された新機能は、英語⇔スペイン語を**話者の声色を保ったまま**（っぽく）リアルタイム翻訳するデモを実現 — [Aqlier レポート](https://aqlier.com/2025/02/08/google_meet_translation/)。  
* [Google サポートページ](https://support.google.com/meet/answer/10964115) によれば、順次 Workspace 全プランへ拡大予定。日本語対応は未定も「数週間ごとに言語を追加」とロードマップを明示。  

---

## 2. **なぜ**スタートアップにとって脅威なのか ― *5 Whys*

| Why (問い) | 真因 |
|-----------|------|
| 1. 大手の機能追加が脅威？ | 「翻訳も動画生成も標準機能」という期待値が形成され、課金ポイントが蒸発する。 |
| 2. 期待値が一気に引き上がる？ | Google は 8 兆円規模の AI 投資と自社クラウドで **コストを圧縮**し、低価格でも収益化できる。 |
| 3. 小規模企業は追随できない？ | 同等品質を得るには学習データと GPU 投資が指数関数的に増大、VC 調達中央値では賄いきれない。 |
| 4. 差別化が難しくなる？ | 汎用ユースケースは *スケール戦*（スピード / コスト）が支配し、改良サイクルを大手が独占。 |
| 5. それでも顧客は専業を必要とする？ | 医療・法務など **専門語と機密**を要する領域で、汎用モデルの平均精度や利用規約が要件を満たさない。 |

---

## 3. 中小・ベンチャーが取るべき **4 つの戦略オプション**

### 3-1 **垂直特化モデル**で“深い課題”を解く  
業界特有の規制・専門用語に合わせた高精度モデル（例：HIPAA 準拠の医療翻訳、治験動画の自動要約）。

### 3-2 **プラットフォーム横断プラグイン**  
Zoom / Teams / CMS API にワンクリックで導入できるマイクロ SaaS で「ツール依存リスク」を回避。

### 3-3 **共創コミュニティ＋OSS**  
モデル本体は OSS で公開し、専門辞書やワークフロー拡張をコミュニティに委ね、大手が拾えないニッチ要求を吸収。

### 3-4 **成果コミット型サービス**  
API 販売ではなく「翻訳→商談成約率」「動画→広告 CTR」などビジネス KPI 連動課金で中抜きを防ぐ。

---

## 4. リスクとトレードオフ

| リスク | 説明 | 代替手段 |
|--------|------|-----------|
| **市場規模の細分化** | ニッチ化で市場規模が小さすぎる | 大手と OEM 提携し、専用レイヤを共同運営 |
| **技術追随遅延** | Google の週次アップデートに追いつけない | OSS / コミュニティで分散開発サイクル短縮 |
| **規制コスト増** | 業界規制に合わせ開発コスト増 | モジュラー設計で再利用率を高める |

---

## 5. まとめ ― “巨象の歩幅”を利用する！
Google の怒涛の拡張は **汎用ユースケースの無料化** と **差別化ハードルの爆上げ** を同時にもたらしています。しかも今後も加速度的に進化していくでしょう。  

スタートアップが勝ち残る鍵は、この三段跳びにあります。

1. 誰も拾えない **深い業務課題** を見つける
2. 規模の経済ではなく **専門性の経済** で戦う
3. 他人の褌上等！ **巨象のインフラを加速装置** に変える  

守りではなく“共生戦略”で、ポスト生成 AI 時代を生き抜いていきましょう！！
テックリード/リードエンジニアとは？ 役割や責務を雑に解説

## はじめに

現在、私は東京のとあるフィンテック企業で働いています。2023年8月にソフトウェアエンジニアとして入社し、それ以来 Go を用いたクレジットカード決済システムの開発に従事してきました。2024年3月からは前任者から **テックリード** の役割を引き継ぎ、5人のエンジニアが所属するチームを率いています。

[Dodaさんの記事](https://doda.jp/engineer/guide/it/056.html?msockid=23022a15b138673a2d873950b042666f)では、テックリードは「技術面でのチーム牽引役に加えて、他のチームや部署との連携を担う窓口役」と説明されています。他多くの記事でも似たような説明がされていますが、実際にどのような業務を行っているのか、具体的に語られることは少ないように感じます。

そこでこの記事では、この1年間私がテックリードとして行ってきた業務の内容について紹介していきます。
この記事が読者のキャリア形成の一助となれば幸いです。


> 本記事では、**テックリード** と **リードエンジニア** を同義として扱います。企業によっては別の役職として扱う場合もありますが、本稿では違いについては触れていません。
> また、本文の内容はあくまで私の経験に基づくものです。一般論として受け取らないようお願いします。

---

## テックリードの責務

業務内容の紹介の前にまずはテックリードの責務について解説します。

私が所属する会社におけるテックリードの責務は、**「所属チームにおける開発プロジェクトの成功」**を実現することであるとされています。

ここでいう「開発プロジェクト」とは、新機能の開発や既存機能の改善などのチームが取り組むあらゆる業務を指し、「成功」は期限内に品質を維持しながらプロジェクトを完遂することを意味します。

つまり、テックリードとはチームの成功を支えるために必要な業務全般に取り組みながら、文字通りリーダーとしてチームを牽引していく役割を担うことになります。


---

## テックリードとしての具体的な業務内容

以下に、私がテックリードとしての1年間に行ってきた業務内容を紹介します。
これらの業務は、前述のテックリードの責務を果たすための手段として行ってきたものとなります。

### 開発チームの窓口業務

開発チームの窓口業務では、CS、マーケティング、デザイン、PdMなど他のチームと連携を図ります。

特にPdMとのコミュニケーションは頻繁に発生します。
PdMとは中長期的な開発ロードマップの整理や目下のタスクの優先順位調整や要件のすり合わせを行います。

また、CSからは緊急度の高い突発的な問い合わせが飛んでくることが多いです。
この際の一次受けも基本的にはテックリードが対応し、不具合の有無や原因の特定などを行います。

また、外部ベンダーなどの社外のパートナーとの連絡もテックリードが引き受ける事が多いです。

### PRD（Product Requirements Document）の作成

PRDの作成自体は基本的にはPdMの担当領域であるイメージですが、タスクのスコープが比較的小さい場合やPdMのキャパが逼迫している場合にはテックリードがPRDの作成を行います。

PRDとは開発要件をまとめたドキュメントで、実装担当者はこのドキュメントを元に実装を行います。
UIの変更が絡む際には、デザイナーを巻き込んでPRDの作成に取り組むこともあります。

### 設計

設計業務においては、開発タスクの要件定義や基本設計を行い、開発の方向性を示します。

この時にコードレベルなどの過度に詳細な設計を行ってしまうとメンバーが開発に取り掛かる際の創造性が抑制されるため、適度な粒度でのを意識しています。

### タスクアサイン

タスクの割り振りの際には、各メンバーのスキルや志向、タスク間の依存関係や優先度を考慮して行います。

たとえば、複雑なドメイン知識が必要なタスクは、その分野に経験のあるメンバーに任せることで、リードタイムの短縮や知識の深化を狙います。逆にスケジュールに余裕がある時には、メンバーのできることの幅を広げるためにあえて経験が浅い分野のタスクを割り振ることもあります。

メンバーごとの嗜好やスキルを考慮しながらアサインを行うのは何とも言えない地味な難しさがありますが、『このタスクを通して実装担当する人がこんな学びを得てくれたら嬉しいな』と思いを巡らせられるのが個人的には楽しいところでもあります。

### コーディング

テックリードでありながら私自身もコーディングに取り組んでおり、業務時間の30%前後をこの作業に充てています。

テックリードとしての業務に時間を割くべきだという意見もあるかもしれませんが、これは私自身のキャリア形成と技術力の維持のための重要な活動だと考えています。

### 監査対応

現職ではISMSなどの監査を定期的に行っています。現職では情シスチームが主導して諸々の準備も含めて対応してくれているのでやることは多くないのですが、監査時には私がリードしているチームの開発フローについて監査官に説明しセキュリティー面での問題がないことを伝えました。

### 1on1ミーティング

以下を目的にチームメンバーとの1on1を行います。
- 信頼関係の構築（と言いつつ雑談するだけのことも）
- チームや会社についての情報の共有（今後の開発計画や制度変更などの頭出し）
- 今後挑戦したいタスクのヒアリング
- フィードバックを通じたパフォーマンスの向上や期待値の調整

メンバーの特性によって、1on1の時間内にどこを深堀りするべきかは異なると考えています。
そのため、1on1の開催頻度や話す内容はメンバーごとに調整しています。

---

## まとめ

以上が、私がテックリードとしての1年間に行ってきた業務内容の一部です。ちなみに今後は採用面接官としての業務も加わる予定です。
1年テックリードをやってもまだまだ新しい業務が増えているので、これからも日々の業務に取り組む中で新たなスキルや知識を身につけていきたいと考えています。

この記事が、皆さんのキャリア形成において参考となる情報を提供できればと思います.
React FCが使わない流れがきてるっぽい

## はじめに
業務でTypeScriptを記述していて、フロントエンドの設計方針についてどうするか議論した。

現場のフロントエンドエンジニアと話をしていたところ、近年は、TypeScriptのReact FCという記述を使わなくなっているということを耳にしたので記事にあらためておきたい。

## React FCってなんなん？
Function Component（関数コンポーネント）の略で、Reactの関数コンポーネントに型をつけるための型定義の一つとされています。

```.tsx
type Props = {
  text: string;
};

const MyComponent: React.FC<Props> = ({ text }) => {
  return <p>{text}</p>;
};
```

この関数は「Reactのコンポーネントだよ〜」っていうのを伝えるのに使用されますよね。（書いた本人が納得しているが....）

これを定義することで....

- この関数はReactのコンポーネントであることを明示できる
- Propsの型を明確に定義できるので、エラーのデバックがしやすくなる

などといったメリットがあります。

## なぜ最近は使われない波にきているのか？

React.FCは、React18以降のプロジェクトで、見かけなくなっているようです。

`children`がReact17までは含まれていたものの、React18以降では含まれなくなりました。

コンポーネントの中身の要素を含むプロパティが不要なときにも使わらなくてはならなくなったこともあり、自動に含まれないことでより柔軟性が増したのではないでしょうか？

```.tsx
/** React17まで */
type Props = {
  text: string;
};

const MyComponent: React.FC<Props> = ({ text }) => {
  return <p>{text}</p>;
};
```

```.tsx
/** React18以降 */
type Props = {
    text: string
};

const MyComponent = ({ text }: Props) => {
    return <p>{text}</p>
};
```

Reactのバージョンが1つ違うだけでこんなに違うものですね。


https://zenn.dev/manase/scraps/0f28cd27eb74c2

## React VFCっていうのもあるらしい
VFCはVoid Function Component の略で、React.FCと似たように関数コンポーネントの型を定義するためのもの。

ただし、FCとの大きな違いは「children（子要素）」をpropsに自動で含めないという点です。

```.tsx
type Props = { title: string };

// childrenを受け取らない場合
const MyComponent: React.VFC<Props> = ({ title }) => {
  return <div>{title}</div>;
};
```
`children`を受け取りたいときは明示的に含める必要がありそうです。

ただ、このVFCもReact18以降はVFC自体が非推奨となり、FCからもchildrenが削除されましたようです。

https://qiita.com/tanimoto-hikari/items/71dd783b1b6bb49a808c


## おわりに
プロジェクトによるとは思いますが、React.FCという記述を見つけたらなるべく使わないように心がけたいですね。

ReactのVerが18以降かその前なのかも要チェックです
乗除優先の非関数電卓

今回もXから拾ったネタ。

https://x.com/R18sok/status/1924824179695599931

定期的に流れてくる、スマホ電卓アプリと一般電卓の演算順位の違いである。
乗除優先のスマホ電卓アプリに対し、一般電卓（実務電卓を含む）は優先順位無く先に入れたものから順に演算する。

このツイートに対し、

https://x.com/4seasons_wind/status/1925129212408758391

「関数電卓のように一般事務と家庭用とを分けて欲しい」と書いている人がいた。

ではそんな人が考える乗除優先の電卓とは…

https://x.com/4seasons_wind/status/1925061312322920750

https://x.com/4seasons_wind/status/1925074635990921451

「50 + 50 = x 2」「358 + 680 + 258 = + 10% =」

加減部分を優先したい場合、そのタイミングで[=]を押させるんだと。
この人は算数の式でも途中にイコールを書いていいと思っているのだろうか。
さすがにこれは「おれのかんがえるさいきょうのでんたく」の域を出ず、ダメである。

この人が考えるまでもなく、乗除優先の非関数電卓は存在する。主として算数学習用電卓のような機種に搭載されている。が、その場合必ず括弧キーが存在する。
算数で式を表記するのと同様、加減の優先順位を上げるために括弧を使う。

この記事では乗除優先の非関数電卓をいくつか紹介する。他にも見つけた方はぜひコメント欄に記載していただきたい。
中でも括弧キーの無い乗除優先の非関数電卓が存在したらぜひ教えて下さい。

※この記事では加算器方式やRPN方式のような演算子後置型の電卓は扱いません。

## 分数表示のできる算数学習用電卓
最初は、これまで何度も記事にしてきた、分数表示のできる算数学習用電卓である。
これらの機種は関数電卓に近いボタン数があるため、非関数電卓と言っても説得力は無いかもしれないが、そうはいっても関数電卓ではないので候補に上がるだろう。特に中国では今でも入手が容易である。

 [分数計算のできる算数学習用電卓について調べてみた](https://qiita.com/harycurl/items/79503bb1aeceee9f575e)のうち、括弧キーの付いている機種は全て乗除優先である。
裏を返せば、国内モデルは括弧キーの付いているAZ-90Jを除いて乗除優先ではない（NU-60で確認）。

## Texas Instruments TI-7 Math Mate Solar Calculator
たまたま数日前にRedditでもこの機種を取り上げる人がいた。

https://www.reddit.com/r/calculators/comments/1krkkln/pulled_this_out_of_a_box_i_havent_opened_since/

DATAMATH CALCULATOR MUSEUM にも製品画像がある。

http://www.datamath.org/Sci/Modern/MathMate.htm

四則演算、+/-、メモリ関連と括弧キーしかない。
先述の方が最も好みそうな電卓である。

## Asmix C1242/C1258 リーサムルフト 計算式表示電卓
計算式表示機能付き電卓。
[C1242が掲載されているカタログもある](https://www.asmix.co.jp/%E3%83%AA%E3%83%BC%E3%82%B5%E3%83%A0%E3%83%AB%E3%83%95%E3%83%88/)が、現行品はC1258。
黒(C1258BK)と白(C1258W)の2色展開。

https://www.asmix.co.jp/iteminfo/c1258w/

キーは四則演算、+/-、メモリ関連、%、税計算に加え、括弧キー、矢印キー、INS/DELキーがある。

このタイプの電卓は計算式を1行に収めなければいけないため、1行の許容範囲を超える加減算が苦手である（2行機以上の関数電卓も同じ）。
幸いこの電卓には[M+][M-]のキーが付いているため、大量の加減算はメモリ計算で代用させることもできる。

## 創＆遊 スクール電卓

https://www.soandyou.co.jp/product/list/?contents_type=91

ピンクとブルーの2色。
四則演算、+/-、ルート、%と、括弧キー、矢印キー、INS/DELキーがある。

計算式表示機能付き電卓であり、基本的にはC1258と同様と考えてよいだろう。
小学生用電卓にも関わらず12桁あるのがすごい（これもC1258と同じであるため、中身も同一の可能性が高い）。

先述の方もこれなら家庭用として文句はないだろう（色が派手とか言い出しそうだけど）。

## とはいえ、主要機種となるには至らず
他にも探せば括弧キー付き1行機があると思うが、国内の現行機種の範囲では見当たらない。
スクール電卓は直販価格1280円（送料別）と手頃であるにも関わらず、通販サイトでも扱いは少ない。
乗除優先の一般電卓を出したところで大して売れない。これが答えである。

関数電卓も1・2行機は十分手頃な価格で入手することができ、乗除優先の用途はこれで十分満たせる。
算数における電卓活用が始まったころはカシオも分数機能付きなど様々な機種を出したが、ほとんどが終売となった。算数における電卓活用は大きな数の計算など補助的に使うことが中心で、電卓に演算順序の確認まではさせるつもりがないのだろう。

それでも乗除優先の一般電卓がいいんだというのであれば、そういう人が自ら電卓を販売してみてはいかがだろうか。
Python3エンジニア認定基礎試験 にPython未経験で2週間で合格した話

## 受験のきっかけ
・業務が落ち着いてきて自己研鑽の時間を確保できる機会があり、転向や転職を見据えてPythonを学習したいと思ったため。
・実務で使っているJavaに関しては、レガシー系のプロジェクトに参加している側の視点だと言語知識よりも業務理解度が重要視されている印象があり、JavaSilverぐらいのレベル感の資格があっても評価に繋がらない印象だった。
・たまたまおすすめに流れてきたYoutube　に感化された。
https://www.youtube.com/watch?v=PjKVqj7hN-w
この資格を取っただけで年収1000万なんて夢のような話だけど、可能性を広げたい気分だった。
・短期間で資格を取得した経験がないため、成功体験を得るという意味でもチャレンジしてみたかった。
・私的利用したいプログラムやポートフォリオの構想があり、Pythonを学べば作成に取り掛かることができたため、同時進行で資格取得を目指した。


## スペック
・Javaでの実務経験が1年ほど、HTML/CSSならハンズオンの学習サイトで学んだことがある程度
・Pythonに関しては触ったことがなく全く未経験

## 結果
受験日の調整の兼ね合いで期間が延びてしまったが、2週間ほどの期間で合格
合格基準70%正解に対して正答率85%ほど(満点を取る気持ちで受験に挑んだため、不甲斐ない気持ちになった)

## 勉強方法

勉強法の説明の前に書籍の購入の有無についてですが、私の場合は購入しなくても特に問題ありませんでした。WEB上でPythonチュートリアルと模擬試験が無料で公開されているため、書籍の方が勉強が捗ったりするタイプや状況というわけでもなければ書籍の購入は必要ないと思います。

### 出題率を知る
公式などであらかじめ出題率が公開されているのでそちらを参考
出題率に偏りがあるため復習するにしても、出題率が高いところを重点的に学習する方針とした。

### 模擬試験
プログラミング未経験者ではないため、いきなり模擬試験を受けてもなんとなく回答できると思って
後述する「Pythonチュートリアル」での学習についても効率よく学習できると思った。

使用した無料の模擬試験サイト

#### DProEXAM
https://diver.diveintocode.jp/dive_into_exam/1
概要:出題形式は時間制限ありで章通りには出題されずランダム(本試験と同様)　受験履歴が確認できるため、間違いやすい問題の傾向が分かる。難易度は中程度

#### ExamApp
https://python-basic.com/
概要:章通りの出題で一文ごとに正誤の判定と解説があるため、取っ掛かりとしては一番おすすめ。難易度が初級から上級まで設定されているが、上級になって数問細かい部分についての問題が出題されるぐらいで全体的な難易度はそこまで変わらない印象。アカウントを作成すれば前回の試験との比較ができる。時間制限がないためまとまった時間を確保できない場合でもやりやすい。

#### PRIMESTUDY
https://study.prime-strategy.co.jp/#exam-list
概要：DProEXAMtと似て時間制限ありだが、出題はランダムではない。
解答表がメールで送られてくるため、前回との比較はしづらい。また自分の選んだ選択肢と問題の解答のみ返ってくるため復習には不向き。ただ問題の難易度が絶妙なため総仕上げ向き

ExamApp→DProEXAM→PRIMESTUDYの順番で模擬試験を受けていくのが効率良さそうです。
本番試験を受けるにあたってどの模擬試験も90点以上は取れるようにしておくことをおすすめします。

#### Pythonチュートリアル
https://docs.python.org/ja/3.13/tutorial/

処理結果ではなく「次の記述のうち、正しいものはどれか」のような文章ベースの問題は必ず出題されるためPython経験者でも通読は必須だと思います。
私は模擬試験を受けてからPythonチュートリアルを通読し、出題されそうなところはNotionにメモしていました。

#### AIに壁打ち
わからない問題や正解してもなぜそうなるか言語化が難しい問題に関してはChatGPTに投げて解説や別の問題パターンを出力させていました。模擬試験を何度も解いていると問題で覚えてしまって応用が効かなくなってしまうのでこの方法はとても有効でした。

#### 実際にコードを書いてみる
勉強中の息抜きがてらに環境構築して実際にコードを書いてました。
Pythonを学習するにあたって漠然とですがWebスクレイピングをやってみたいと思っていたため、挑戦してみました。私的に利用するだけなので品質はそこまで高くないですが、書いて動かしてみるところまで実際にやってみることによって体系的にPythonを学ぶことができました。


##試験を受けるにあたって
色々な会場を探しましたが、最短受験日が申し込み日の一週間後以降が多いので、学習理解度が合格ラインに達してからだと、忘れないためだけの無駄な勉強時間の確保が必要になってしまうかもしれません。(自分がそうでした)
模擬試験を一通り触ったぐらいのタイミングで申し込みをすることをおすすめします。

##実際に試験を受けた感想
本番では模擬試験のようなPythonチュートリアルの解説そのままのような問題はほぼなかったので、しっかり基礎を抑えておく必要があります。模擬試験でも一度も触れたことがないような問題は一問だけありましたが、消去法で考えて正解していたようです。合格するだけなら12問以上落とさなければいいので試験途中に確信を持てない問題がそれを越えなければいいというメンタルで受験していました。不安な部分は見直しても確信を持てるわけじゃないので、自身があるところを落とさないことの方が大事だと思います。
【Automation Anywhere COMMUNITY EDITION】Chatgptにしりとりさせてみた


# ◆下準備
Chatgptを2画面で用意（chatA、chatB）


ルールをそれぞれに伝え、chatAにりんごを入力したところからRPAをスタート（chatAの初期入力が誤って、りんごりんごとなっています）


![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523511/90f14fee-d06e-407c-9c62-9296e69acbec.jpeg)




chatA⇒chatB⇒chatA⇒chatB...　と
しりとりが続くようにロボ開発。

![003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523511/7cbde858-4027-4435-885b-4fc4ba0fdeda.jpeg)








# ◆ロボット実行

順調にロボットがしりとりを行うも

chatA側が　まさかの反則「らいおん」
それにより、chatB側が継続不可能になり、ロボット終了。

![002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523511/c6c9492f-a45f-4c6d-94a9-1fed4123d786.jpeg)



# ◆ロボットフロー

### 数字：代入
コピーのボタン位置がはじめ4のため、「4」に設定
### ループ
回数上限を「10」に設定
### 数字:文字列に変換
コピーのボタン位置で使うにはテキスト型の変数にする必要があるため、変換
![004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523511/dc1af236-e110-424b-b88f-7331b02ffd62.jpeg)


### レコーダー:キャプチャ
chatAの回答をコピーするボタンをクリックする

### エラー　ハンドラー
RPAでコピーボタンを押した際、テキストコピー許可を問うメッセージが表示されたため、出る場合は許可。出ない場合は次へ進むよう設定。

### レコーダー:キャプチャ
chatBの入力欄へコピー結果を　Ctrl+V　で貼りつける。

### レコーダー:キャプチャ
chatBで送信ボタンを押す。

### 遅延

### レコーダー:キャプチャ
chatBの回答をコピーするボタンをクリックする

### レコーダー:キャプチャ
chatAの入力欄へコピー結果を　Ctrl+V　で貼りつける。

### レコーダー:キャプチャ
chatAで送信ボタンを押す。

### 遅延

### レコーダー:キャプチャ
chatAの回答をコピーするボタンをクリックする

### 数字：代入
数字の変数に「+2」する

### ループに戻る


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━




◆注意点
FireFoxで実行をしたところ、RPAによるテキストコピーが許可されず弾かれた。

![000_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523511/d69377ef-4db4-48b0-82b6-2a6499b293bd.jpeg)

Chromeでは表示された許可メッセージが出なかったため、今回はchrome開発に切り替えた。
スミレ畑、やってみた。 その2

# 概要
日本語プログラミング言語、スミレ畑、見つけたので、やってみた。
練習問題やってみた。

# 練習問題
forthインタープリターを書け。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7fde21d8-b337-446c-9b0b-49d3a0662d62.png)


# サンプルコード

```

［文字列：文字列］を［区切り文字：文字列］で分割する手順：配列
	【配列】は，｛｝。
	【現在位置】は，1。
	【次の位置】。
	繰り返す
		次の位置は，文字列の現在位置文字目から区切り文字を探したもの。
		もし次の位置が0なら
			文字列の現在位置文字目以降を配列に加える。
			繰り返しから抜ける
		でないなら
			文字列の現在位置文字目から次の位置-現在位置文字，取り出したものを配列に加える。
			現在位置は，次の位置＋1。
		もし終わり
		もし現在位置が文字列の文字数より大きいなら，
			繰り返しから抜ける
		もし終わり
	繰り返し終わり
	配列を返す。
終わり

[ソース]を、実行する手順
	SP = 1
	stackは{}
	行は，ソースを「 」で分割したもの。
	//行を表示
	行を要素へそれぞれ繰り返す
　　		//要素を表示する
		要素が「9」なら
			sp = sp + 1
			stack(sp) = 9
		他で要素が「+」なら
			stack(sp - 1) = stack(sp - 1) + stack(sp)
			sp = sp - 1
		他で要素が「-」なら
			stack(sp - 1) = stack(sp - 1) - stack(sp)
			sp = sp - 1
		他で要素が「/」なら
			stack(sp - 1) = stack(sp - 1) / stack(sp)
			sp = sp - 1
		他で要素が「*」なら
			stack(sp - 1) = stack(sp - 1) * stack(sp)
			sp = sp - 1
		他で要素が「dup」なら
　　　			sp = sp + 1
　　　			stack(sp) = stack(sp - 1)
		他で要素が「drop」なら
	　　　		sp = sp - 1
		他で要素が「.」なら
		　　　	stack(sp)を報告する
		そして
	そして
終わり

「9 9 - 9 9 / .」を、実行する
「9 9 / 9 9 / + .」を実行
「9 9 + 9 + 9 / .」を実行
「9 9 9 + 9 / dup + .」を実行
「9 9 9 + 9 / dup + - .」を実行
「9 dup 9 + 9 + 9 / - .」を実行
「9 9 9 + 9 / - .」を実行
「9 9 9 drop 9 / - .」を実行
「9 9 - 9 * 9 + .」を実行
「9 9 / 9 dup 9 / + .」を実行
「9 9 9 + 9 / + .」を実行
「9 dup 9 9 + + 9 / + .」を実行
「9 9 9 + 9 / dup + + .」を実行
「9 dup 9 9 + 9 / dup + - + .」を実行
「9 dup dup 9 + 9 + 9 / - + .」を実行



```

# 実行結果

```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```

以上。
【第4回】Cursor vs Windsurf 徹底比較！Vibe Coding時代のAI開発ツール選び

## ⚔️ Cursor vs Windsurf、実際に1ヶ月使って比較してみた

AIと一緒に開発する時代において、エディタ選びはプロダクティビティを左右します。

今回は、私が実際に**Proプランで1ヶ月ずつ使ってみた**、話題のAIコーディングツール **Cursor** と **Windsurf** を、実体験を元に比較してみます。

---

## 🧪 比較環境と評価対象

* **期間**：それぞれ1ヶ月、実際のプロダクト開発にて使用
* **用途**：主に以下を実施

  * `user-story.md` を元にコード生成（Vibe Coding前提）
  * バグ修正／提案の精度確認
  * 簡単なUIの作成

---

## 🔍 Cursor の使用感と強み

### ✅ 良かった点

* **初期体験がスムーズで自然**：何も考えずにとりあえず書いてみる → AIが補完してくれる感覚が優秀
* **Agents機能が強力**：複数ファイルを跨いでリファクタ提案や修正を行ってくれる
* **コード生成の精度が高い**：とくにMVP立ち上げ時のコード起こしが非常にスムーズ
* **英語での会話は精度高め**：細かいニュアンスも比較的うまく拾ってくれる

### ❗気になった点

* GUIでのUI生成や図的表現は少し弱い（主にテキストベース）
* 月額\$20のPro料金はやや高め（コスパ面での検討余地）
* 使用中にエディタがフリーズするケースあり：私の環境（Mac M1）では、Cursorが長時間contextを保持していると、CPU使用率が急上昇し、フリーズ・クラッシュを経験しました。特にAgentsに修正依頼を出すときに落ちることが多かったです

---

## 🌊 Windsurf の使用感と強み

### ✅ 良かった点

* **とにかく軽量＆レスポンスが早い**：入力に対しての反応速度が優秀
* **UIがシンプルで馴染みやすい**：余計な機能が少ないため集中できる
* **月額\$5という価格の手軽さ**：試しに使うにも負担が少ない
* Markdownやドキュメント生成にも向いている

### ❗気になった点

* 複雑なコードの意図や修正提案はやや弱め
* 複数ファイルを跨いだ作業はまだ苦手（改善中との声あり）

---

## 💡 私の結論：目的に応じて使い分け

| シーン           | おすすめツール                   |
| ------------- | ------------------------- |
| MVPを一気に立ち上げたい | 🎯 **Cursor**（生成力と補完が強い）  |
| 軽快に長期運用したい    | 🌱 **Windsurf**（軽さとコスパ重視） |

現在は、私も**Windsurfを選択中**ですが、
「ゼロから何かを立ち上げたい時」は**Cursorが圧倒的に強い**と感じています。

実際のところ、Vibe Codingベースで`user-story.md`から開発を回す際、
CursorのAgents機能による**設計→実装→リファクタ**の流れは非常に頼もしいものでした。

Windsurfも頻繁にアップデートされており、今後さらに期待できるツールです。

---

## 🔮 次回予告

次回は、\*\*「Vibe Codingで実際にどんな課題があったか？」\*\*をテーマに、

* Promptが効かない時どうしたか？
* 設計のズレをどう検出したか？
* AIと人間の役割分担は？

を赤裸々にシェアします！

---

📌 フォロー & コメントお待ちしています！
開発の生々しい現場を一緒に体感しましょう！
mPDFで日本語が文字化けする問題を解決する方法【IPAフォントで対応】

# 解決したい事項

PHPのPDF出力ライブラリ「[mPDF](https://github.com/mpdf/mpdf)」を使ってPDFを生成した際に、「日本語が□になる」といった**文字化けの問題**に直面しました！

この記事では、`'mode' => 'ja'` を設定していても文字化けしてしまう原因と、**IPAフォントを使って日本語を正しく表示する方法**を紹介します。

-  [mPDF GitHub](https://github.com/mpdf/mpdf)
-  [mPDF Manual](https://mpdf.github.io/)


---

# ❓ なぜ文字化けが起きるのか？

mPDFは多言語対応のPDFライブラリですが、**日本語のフォントを内蔵していないことが多いため**、明示的にフォントを指定しないと日本語が文字化けします。
補足ですが、今回は「□」に文字化けしてしまいましたが、「直」「角」などの表示が日本語の表示と異なる文字で出力されることもあるみたいです。

---

# 📄 文字化けした例

以下は、mPDFで日本語を表示しようとしたが、フォント設定がされておらず文字化けしてしまった例です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517030/27329e69-9f11-44ff-834b-baf81ea98f96.png" width="400" />


---

# ✅ 解決策：IPAフォントを導入して設定する

文字化けを解消するには、日本語対応のフォントを読み込むようにmPDFを設定する必要があります。

## 1. IPAから日本語のフォントをダウンロード

IPA公式サイトから 日本語のフォントファイルの`ipaexg.ttf` をダウンロードできます。

- [IPAexフォント Ver.004.01 | 一般社団法人 文字情報技術促進協議会](https://moji.or.jp/ipafont/ipaex00401/)

## 2. プロジェクトにフォントを配置

例：以下のような構成で配置します。
※プロジェクトに合わせたパスにしてください。

```
your_project/
└── resources/
    └── font-mpdf/
        └── ipaexg.ttf
```

## 3. mPDFの設定を変更

以下のように、mPDFにフォントの場所とデータを明示的に指定します。
※プロジェクトに合わせたパスにしてください。

```php
$mpdf = new \Mpdf\Mpdf([
    'mode'         => 'ja',
    'fontDir'      => [YOUR_APP_ROOT . '/resources/font-mpdf'],
    'fontdata'     => [
        'ipa'  => ['R' => 'ipaexg.ttf'],
    ],
    'default_font' => 'ipa',
]);
```

# 🎉 解決後の出力結果
フォント設定を追加することで、日本語が正しく表示されるようになりました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517030/d6ba5b81-8b83-45a4-9283-ec49fc4d6c75.png" width="400" />

# 📝 結言
もし、同じ状況が発生した際の解決にこの記事が役立てば幸いです！
Next.jsでPWA対応


# はじめに

こんにちは、エンジニアのkeitaMaxです。

Next.jsでPWA対応してみようと思います。

# install

以下コマンドでpwa対応できるライブラリをインストールします。
```
npm install next-pwa
```

# manifestの作成
https://progressier.com/pwa-manifest-generator

このサイトで作れるっぽいです。
```json
{
  "name": "ケイタMAXの冒険",
  "short_name": "ケイタMAXの冒険",
  "description": "ケイタMAXの忘れた記憶を取り戻す冒険物語",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#2EC6FE",
  "theme_color": "#8936FF",
  "orientation": "any",
  "dir": "auto",
  "lang": "ja",
  "icons": [
    {
      "src": "/icon512_maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon512_rounded.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}
```

こんな感じになりました。

これをpublicフォルダ配下におきます。

# next.config.jsの修正

以下のように修正しました

```js:next.config.js
/** @type {import('next').NextConfig} */
const nextPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
})

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: 'export',
  basePath: process.env.NODE_ENV === 'production' ? '/my-site' : '',
  images: {
    unoptimized: true,
  },
}

module.exports = nextPWA(nextConfig)
```

# 起動して確認

以下コマンドで起動します。
```
npm run dev
```

`localhost:3000`にアクセスして、ブラウザ以下のようなマークが出てくれば成功です！

![スクリーンショット 2025-05-22 18.09.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/9bfa5cd4-ed14-4f3f-8529-f0151e534dd4.png)

![スクリーンショット 2025-05-22 18.08.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/95410fcc-b92c-46da-acaf-0ed2dc285abf.png)

このボタンを押すとアプリがインストールされます！

# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://www.npmjs.com/package/next-pwa

https://qiita.com/Coa3/items/c81c8c7984bd5fc4ec69
Reactで作ったタスク管理アプリでローカルストレージの処理が上手くいかなかった話

Reactを使って簡単なタスク管理アプリを作っていて、ローカルストレージの処理が上手くいかなかったので、その時の対処方法を載せておきます。

## 修正前
```App.jsx
const [tasks, setTasks] = useState([]);

useEffect(() => {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    setTasks(JSON.parse(savedTasks));
  }
}, []);

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);
```

`[tasks]`が変更された時にローカルストレージにタスクを保存し、ページが読み込まれた時にローカルストレージから読み込んで`setTasks`で`tasks`に格納する処理を組んでいました。

ローカルストレージの保存・読み込み処理自体は正常に動作しましたが、なぜかタスク一覧には表示されませんでした。

## 修正後
```App.jsx
const [tasks, setTasks] = useState(() => {
  const savedTasks = localStorage.getItem('tasks');
  return JSON.parse(savedTasks ?? '[]');
});

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);
```

ローカルストレージへの保存はそのままで、読み込むときに`useState`の初期値に直接設定するように組み直しました。

## 最後に
結局原因わからずで先に進んでしまいましたが、色々な方法があるのを知れてよかったです。参考までに。
基本情報技術者試験受けてきた【落ちた】

# 5/17基本情報技術者の試験を受けてきました。
結果は、落ちてしまいました。（A, B）=（590, 580）でした。2科目ともそれぞれ、あと1問とれば受かるというところでしたね。かなしー
とはいえ、何だか一ヶ月前と比べてソフトウェアのことが色々キャッチアップしやすくなった感じはあるのは良し。

勉強期間は一ヶ月くらい
平日3時間、休日4時間くらいかな～

Aは過去問5年分1周くらい、Bはサンプル問題のみ

まあ、もうちょっとでしたわ。

友達が、2ヶ月後くらいに受ける予定らしいので、そのときに再受験します！

# 余談
基本情報の試験勉強にほぼ全ての時間使っていたので、web制作とかコーディングができてなかった！
久しぶりにできるのクッソ楽しい！！！！！！！！！
冒頭でも述べましたが、資格勉強で学んだのが、役立ってる感じもありますね
真核生物鞭毛（繊毛）運動の動画データセットをZenodoで公開しました

# 公開したデータセット
https://zenodo.org/records/15098911

## 内容
- 単細胞緑藻クラミドモナス単鞭毛変異株の鞭毛運動を200 fpsで撮ったaviファイル
    - 暗視野顕微鏡を使用
    - 約1分間の動画が生細胞46個体、除膜モデル（ゾンビ）56個体分
- DeepLabCutでのトラッキング結果のcsvファイル（鞭毛先端・基部・細胞体後端）

# 何に使えそうか？
- 鞭毛繊毛運動・細長い物体の動きの解析手法の評価

# DeepLabCutでのトラッキング例
<iframe width="568" height="562" src="https://www.youtube.com/embed/z5iF1l2Ay8U" title="DeepLabCut tracking of Chlamydomonas flagellum (Kage et al., 2025, microPublication Biology)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
紫：鞭毛先端、緑：鞭毛基部、赤：細胞体後端

# 公開したデータセットを使った論文
https://www.micropublication.org/journals/biology/micropub-biology-001535
- Azusa Kage, Ken H. Nagai, Takayuki Nishizaka, Kenta Ishimoto. 2025. Revealing Rotational Characteristics of the Uniflagellate Mutant of *Chlamydomonas reinhardtii* through DeepLabCut-Based Autotracking. microPublication Biology. 10.17912/micropub.biology.001535.
- 実験条件などは上記を参照してください
ChatTempMailの新機能：AI搭載のメール送信機能が利用可能に

![Screenshot 2025-05-22 at 15.48.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3908420/302d0768-8766-48c6-881b-dbd4691aff2f.png)

[ChatTempMail](https://chat-tempmail.com)プラットフォームがメール送信機能に対応したことを発表できることを嬉しく思います！この大幅なアップデートにより、サービスは単なる一時メール受信サービスから完全なメールソリューションへと進化しました。新機能によって、メールの受信だけでなく、返信や新規メールの送信も可能になり、一時メールの真の総合体験を実現します。

## AI駆動のスマートメール作成

メール送信機能の最大の特徴は、先進的なAIテクノロジーを統合し、ユーザーがプロフェッショナルで適切なメール内容を簡単に作成できるようサポートすることです。ビジネスメール、学術的な問い合わせ、日常のコミュニケーションなど、どのようなメールでも、AIアシスタントが貴重なサポートを提供します：

- **インテリジェントなコンテンツ生成**：簡単なプロンプトを入力するだけで、AIが完全なメール本文を生成
- **多様なスタイルオプション**：フォーマル、フレンドリー、簡潔など、さまざまな文章スタイルをサポート
- **多言語対応**：日本語、英語、中国語、韓国語など、複数の言語でメールコンテンツを生成可能
- **スマートな文章洗練**：既存の内容の文法チェックとスタイル最適化
- **コンテキストに応じた提案**：メールの件名や受信者に基づく関連提案

## 新機能の使い方

[ChatTempMail](https://chat-tempmail.com)のメール送信機能の使用方法はシンプルで直感的です：

1. ChatTempMailアカウントにログイン（未登録ユーザーは簡単な登録が必要）
2. ナビゲーションバーの「メール送信」オプションをクリック
3. 送信ページで受信者、件名、本文を入力
4. または「AI生成」ボタンをクリックし、簡単なプロンプトを入力してAIにメール内容を作成させる
5. メールをプレビューして送信ボタンをクリックして完了

全プロセスはシンプルで効率的、メール初心者でも簡単に使いこなせます。

## 使用制限と注意事項

この無料サービスを提供するために、現在はResendの無料メール送信サービスを利用しています。以下の使用制限にご注意ください：

- **1日の送信クォータ**：Resendの無料アカウントポリシーにより、1日あたり最大100通のメールが送信可能
- **適正利用**：このサービスを責任を持って使用し、スパムや悪意のあるコンテンツの送信を避けてください
- **不正利用の警告**：頻繁に大量のメールを送信したり、利用ポリシーに違反したりすると、アカウントが一時的または永久に停止される可能性があります
- **コンテンツモデレーション**：すべてのメール内容は自動的に審査され、不正利用を防止します

すべてのユーザーに送信制限を守り、この機能を責任を持って使用することを強くお勧めします。不正利用は個人アカウントだけでなく、サービス全体の持続可能性にも影響します。

## 技術的実装とアーキテクチャ

新しいメール送信機能は最新のテクノロジーアーキテクチャを採用しています：

- **Resend API統合**：Resendの安定したメール配信インフラストラクチャを活用
- **AIモデル統合**：高度な大規模言語モデルを接続し、インテリジェントなコンテンツ生成機能を提供
- **安全な通信**：すべてのメール通信はTLS暗号化を使用し、送信セキュリティを確保
- **送信キュー管理**：ピーク時の送信リクエストを処理するインテリジェントなキューシステム
- **パフォーマンス最適化**：さまざまなネットワーク状況に最適化された送信プロセス

## アプリケーションシナリオ

[ChatTempMail](https://chat-tempmail.com)の送信機能により、ユーザーにより多くの使用シナリオが開かれます：

- **一回限りの返信**：一時メールボックスで受信したメールに、他のメールアカウントを使わずに直接返信
- **匿名コミュニケーション**：実際の身元を明かさずに一時的な連絡が必要な場合に使用
- **クイックテスト**：開発者がメール機能をテストする場合に使用
- **プロフェッショナルなコンテンツ作成**：AIアシスタントを使用して高品質のメールコンテンツを迅速に生成
- **言語の壁を克服**：母国語でないメールを作成する際にAIアシスタンスを活用

## 今後の開発計画

メール送信機能を継続的に改善・拡張していく予定です：

- より多くのプロフェッショナルなシナリオをカバーする追加のAIテンプレートの提供
- 送信時間を事前に設定できる高度なスケジューリング機能の開発
- より大きな添付ファイルとより多くのファイルタイプをサポートする機能強化
- 複数の受信者管理とグループ送信機能の最適化
- 高需要ユーザー向けにより大きな送信クォータを提供する有料プランの検討

## ユーザーフィードバックとサポート

新機能として、ユーザー体験とフィードバックを非常に重視しています。使用中に問題が発生した場合や、改善のご提案がある場合は、以下のチャネルからお問い合わせください：

- ウェブサイトの「お問い合わせ」フォームを使用
- フィードバックメールをselenium39@qq.comに送信
- ソーシャルメディアでフォローしてダイレクトメッセージを送信

寄せられるすべてのフィードバックが、サービスの継続的な改善と、すべてのユーザーへのより良い体験の提供に役立ちます。

## まとめ

メール送信機能のリリースは、ChatTempMailの発展における重要なマイルストーンです。この機能により、プラットフォームの使用シーンが大幅に拡大され、ユーザーにより完全で便利な一時メール体験を提供できると確信しています。

また、すべてのユーザーに、便利さを楽しみながらも送信機能を責任を持って使用し、健全なメール環境の維持にご協力いただくようお願いします。1日100通というメール制限は少なく感じるかもしれませんが、一時メールの使用シナリオには十分であり、無料サービスを継続して提供するための重要な条件でもあります。

**今すぐ[ChatTempMail](https://chat-tempmail.com)にログインして、AI駆動の新しいメール送信機能をお試しください！**
Download ExpressVPN Mod Apk 12.5.0: Fast, Secure VPN for Android 

Get ExpressVPN Mod Apk with Unlimited Accounts For Free. Enjoy Premium Unlocked features and Unlimited Trial with the latest Version v12.1.0-beta. Stay secure and anonymous online with this powerful VPN solution. Download now! Link web: https://apklite.org/expressvpn-mod-apk
AndroidX Navigation3 1.0.0-alpha01 メモ

# AndroidX Navigation3 1.0.0-alpha01 について

Jetpack Compose向けナビゲーションライブラリがalphaにて公式からリリースされた

いくつかのNavigation3に関する公式ドキュメントなどが公開された

ただしそのalpha(1.0.0-alpha01) に致命的な不具合があるため、後述するスナップショットを代わりに用いる必要があり、ここにそのメモを残す


# Navigation3 に関する公式ドキュメント

・ Android Developers Blog : Announcing Jetpack Navigation 3

https://android-developers.googleblog.com/2025/05/announcing-jetpack-navigation-3-for-compose.html

・ AndroidX Navigation3 : Overview

https://developer.android.com/guide/navigation/navigation-3

・ AndroidX Navigation3 : リリースページ

https://developer.android.com/jetpack/androidx/releases/navigation3

・ AndroidX Navigation3 : 公式サンプル

https://github.com/android/nav3-recipes

# AndroidX Navigation3 1.0.0-alpha01 にて問答無用でアプリがクラッシュする

1.0.0-alpha01 にてアプリのクラッシュの不具合がある。

・ NoSuchMethodError: No static method serializableSaver running basic Nav3 app

https://issuetracker.google.com/issues/419049149

なお、問題の修正はスナップショットにて既に行われた。

https://android-review.googlesource.com/#/q/I4b4edbf046a62164e56e1871ca9918d9683a2abf

AndroidXライブラリは二週間のサイクルで更新されるため、来月の６月には問題を修正した1.0.0-alpha02がリリースされる見込み。

追記（2025/05/24 22:33）

問題を修正した1.0.0-alpha02 が緊急的にリリースされました。

# スナップショットを使う

問題を修正したバージョンのおいてあるmavenレポジトリをプロジェクトに登録する

```kotlin:settings.gradle
pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

dependencyResolutionManagement {
    repositories {
        maven {
            url = uri("https://androidx.dev/snapshots/builds/13529801/artifacts/repository")
        }
        google()
        mavenCentral()
    }
}
```

```kotlin:app/build.gradle

plugin { /* anything */ }

android {
    compileSdk 36
    /* anything */
}

dependencies {
    implementation "androidx.activity:activity-compose:1.12.0-SNAPSHOT"
    implementation "androidx.compose.material3:material3:1.3.2"
    implementation "androidx.navigation3:navigation3-runtime:1.0.0-SNAPSHOT"
    implementation "androidx.navigation3:navigation3-ui:1.0.0-SNAPSHOT"
    implementation "org.jetbrains.kotlinx:kotlinx-serialization-core:1.8.1"
}
```

動作確認のためのレポジトリ

https://github.com/oikvpqya/nav3-check-20250522

Navigation 3 の How to use は公式サンプルにて確認できる

https://github.com/android/nav3-recipes


以上
ubuntu22.04にAndroid Studioをインストール

`Times New Roman`などのフォントを使いたい
# 環境
- ubuntu22.04



## インストール
以下シェル

```zsh
cd Downloads
tar -zxvf android-studio-2024.3.2.14-linux.tar.gz
```
これでDownloadsフォルダにandroid-studioフォルダができる。
これを```/usr/local```に移動させる。

```zsh
sudo mv android-studio /usr/local/
cd /usr/local/android-studio/bin
```
これで```studio.sh```を実行すればAndroidStudioが起動される。そのあとはGUIの支持にしたがって適当にAcceptしてたら完了。

## エイリアスの設定

毎回cd /usr/local...なんて打つのは嫌すぎるため、エイリアスを設定する。
```zsh
alias studio="/usr/local/android-studio/bin/studio.sh"
```
を`.zshrc`に書き込んでエイリアスを追加
```zsh
source ~/.zshrc
```
で設定を反映。

これ以降は
```
android-studio
```
で起動できる。

## デスクトップエントリの作成
アプリ一覧にAndroidStudioを表示する

```zsh
nano ~/.local/share/applications/android-studio.desktop
```
で```.desktop```のなかに
```
[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Icon=/usr/local/android-studio/bin/studio.png
Exec="/usr/local/android-studio/bin/studio.sh" %f
Comment=Android IDE
Categories=Development;IDE;
Terminal=false
```
↑を書き込んで
```zsh
update-desktop-database ~/.local/share/applications
```
をデスクトップに反映。

終わり。


↓↓↓↓↓↓↓↓ここの動画にほとんど同じ内容が書いてある

https://developer.android.com/studio/install?hl=ja#64bit-libs
【AWS】爆速！AWSでWebサイトを公開する！

# 1. HTMLを作成する

HTMLファイルの名前は`index.html`としてください。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <p>もうね、適当に作っちゃってくださいな！</p>
  </div>
</body>
</html>
```


# 2. S3に公開する

## 2-1. S3バケットを作成する

S3の汎用バケットのページから、「バケットを作成」をクリックします。

![スクリーンショット 2025-05-22 18.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/e6aaaede-6809-4f88-8845-dffc6755dcad.png)

## 2-2. S3バケットの中にフォルダを作成します。

今回は、「test」というフィルダを作成しました。

![スクリーンショット 2025-05-22 18.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/db5a799f-422f-4802-9f1c-52d3486e4214.png)

## 2-3. 作成したフォルダに`index.html`をアップロードする。

![スクリーンショット 2025-05-22 18.13.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/895e11d4-3fc6-448a-97f9-7a1e70bbcc45.png)

# 3. Amplifyで公開する

## 3-1. 「新しいアプリを作成」をクリックする

![スクリーンショット 2025-05-22 18.11.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/69ec24a1-b741-4492-b5af-019fe3c48412.png)

## 3-2. ファイルの指定方法を選択

「Gitなしでデプロイ」を選択して、「次へ」をクリックします。

![スクリーンショット 2025-05-22 18.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/a269791d-0f30-40cd-ae25-6a7a8a265a13.png)

## 3-3. 各項目を入力して、ファイルの場所を指定

「Amazon S3」を選択して、2-2で作成したフォルダを指定します。

例: `s3://test-bucket/test/`

![スクリーンショット 2025-05-22 18.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/655d3629-4255-42d2-b998-931b1635abf3.png)

## 3-4. デプロイ実行

「保存してデプロイ」をクリックします。少し待つとデプロイが完了します。

![スクリーンショット 2025-05-22 18.25.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/902411d5-b856-45d8-9d79-899bf99c34e3.png)

## 3-5. デプロイされたURLにアクセス

「デプロイされたURLにアクセス」をクリックします。

![スクリーンショット 2025-05-22 18.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711491/1b39e5b3-02d6-47a6-80a7-482b316b9c7c.png)

これでWEBサイトが見れるようになります！

# おまけ

「カスタムドメインの追加」からRoute53に設定されているドメインを使用してURLを設定することができます。

以上
Spring BootでHTTPSリダイレクトがHTTPになってしまう場合の応急処置

## 概要

Spring Bootアプリケーションでリバースプロキシサーバー（例：Nginx）を介して通信している場合、本来は **HTTPS** でアクセスされているにも関わらず、アプリケーション側では **HTTP** として認識されてしまい、**リダイレクト時にHTTPで返ってしまう** ことがあります。

このような場合の **応急処置** として、`HandlerInterceptor` の `postHandle` メソッドで **強制的にHTTPSに書き換える方法** を実装したので、備忘録として残しておきます。



## 応急処置として記述したコード

```java:応急処置コード
public class HandlerInterceptorImpl implements HandlerInterceptor {

    @Override
    public void postHandle(
            @NonNull HttpServletRequest request,
            @NonNull HttpServletResponse response,
            @NonNull Object handler,
            @Nullable ModelAndView modelAndView) throws Exception {

        if (modelAndView != null) {
            String viewName = modelAndView.getViewName();

            if (StringUtils.hasLength(viewName) && viewName.startsWith("redirect:")) {
                // 「redirect:」を除いた元のリダイレクト先URLを取得（例: "redirect:/login" → "/login"）
                String originUrl = viewName.replace("redirect:", "");
                // 元のリダイレクト先URLをURIとして分解（パス、クエリを取り出せるようにする）
                UriComponents originComponents = UriComponentsBuilder.fromUriString(originUrl).build();

                // HTTPS用にリダイレクトURLを再構築
                String secureRedirectUrl = "redirect:" + UriComponentsBuilder.newInstance()
                        .scheme("https")
                        .host(request.getServerName())
                        .port(request.getServerPort())
                        .path(request.getContextPath() + "/" + originComponents.getPath())
                        .query(originComponents.getQuery())
                        .build()
                        .toUriString();

                // 再構築したURLをmodelAndViewにセット
                modelAndView.setViewName(secureRedirectUrl);
            }
        }
    }
}
```


## 参考
- [リバースプロキシサーバーがいるときのSpring BootのリダイレクトURL作成](https://qiita.com/nogitsune413/items/f47d07f2250c874e6e3e)
iOSのリマインダーとメモ帳を使ったタスク管理ショートカット作成方法

突然だが皆さんはどのようにタスク管理を行なっているだろうか．

>タスク管理手法やツールは世の中に溢れており，何を選択すればいいかわからない．

私はそのような状態になっていた．
そんな中タスク管理ツールについてChatGPTに聞くと以下のような答えが返ってきた：

>🛠️ よく使われるツール（ToDo管理アプリ）
>- 紙のノートや手帳：アナログ派におすすめ
>- Google Keep / メモ帳アプリ：シンプル派に
>- Todoist / Microsoft To Do / Notion：デジタル管理派におすすめ

Notionとかよく聞くし使ってみようかなと思い，調べ始めた．
*データベースを使って管理する*
そんな記事を見つけふと思った．

>これ別にリマインダーとメモ帳でもおんなじようなことできるんじゃ？

そう思った私が実装したショートカット作成方法を紹介する．

---

まず作成するショートカットの機能について説明する．
基本機能は以下の2つ：
・その日の実行すべきタスクをレポートで出力する（←今回作成するショートカット）
・その日実行したタスクをレポートで出力する
2つのショートカットを作成し，1ポチでレポートを作成してもらう．

構成は以下の通り：
![スクリーンショット 2025-05-22 17.50.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/f9cccbe7-1a19-495f-8ee2-55a444ab6901.png)
今回はメモ帳に出力するようにしているが，それ以外に出力しても良い．

以下に「その日の実行すべきタスクをレポートで出力する」ショートカット作成手順を示す．

---
1．まずメインタスクのリストをリマインダーから探し出す．
![スクリーンショット 2025-05-22 17.54.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/45379298-5959-4559-8486-410f29b89b9e.png)

2．探し出したメインタスクに対して各項目を繰り返す．
![スクリーンショット 2025-05-22 17.58.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/4523a6a6-ff4a-4a09-b3a0-45e1adc1e4dd.png)

3．メインタスクリストと名前が同じリストを探し，完了済みでない項目を抽出する．
![スクリーンショット 2025-05-22 17.59.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/5997767e-1f0a-42ab-b0c9-59c52488b5c9.png)

4．取得した項目をテキストで整形する．（例えば期限の表記を加える）
![スクリーンショット 2025-05-22 18.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/46c22068-08dc-4efb-bb3f-b8f4f90cc7fa.png)

5．作成したテキストを改行で結合する．
![スクリーンショット 2025-05-22 18.04.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/7a2a85e9-2e2c-4de4-85a6-0b26b95fb645.png)

6．各メインタスクごとに作成したテキストをさらに結合してレポートにまとめる．
![スクリーンショット 2025-05-22 18.05.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/dec553f1-50a2-41a4-a567-15575396b303.png)

7．最後に作成したテキストをメモ帳に出力する．
![スクリーンショット 2025-05-22 18.07.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4094631/10276971-e344-4f54-ab73-79a6d1059623.png)

---

これでその日に実行すべきタスクを抽出することができる．同様に「その日実行したタスクをレポートで出力する」もこのショートカットを応用することで作成することができる
1日の始まりに実行することで今日何をするべきかがわかる上に，検索条件をカスタマイズすることで自分なりのレポートにすることもできる．
テキストベースなのでChatGPTと連携させたり，Siriに読み上げさせたりすることもできるぞ．

さあより良いタスク管理を！
[VRChat] AvatarMenuCreater for Modular Avatarでアイテムの出し入れ

## ⭐️目的

- アイテムの出し入れ機能を漬ける




## ⭐️参考

https://metacul-frontier.com/?p=13390

https://vrnavi.jp/costume-onoff/

### ☂️公式

https://booth.pm/ja/items/4419509

https://avatar-menu-creator-for-ma.vrchat.narazaka.net/




## ⭐️インストール

https://avatar-menu-creator-for-ma.vrchat.narazaka.net/

![スクリーンショット 2025-05-22 15.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/1ce8a86d-1fdf-4812-a61f-f45f395e7330.png)



:::note info
VCCだといっぱい読み込むので容量と相談してください
:::


## ⭐️使い方

### ☂️ツールから呼び出してセットする

![スクリーンショット 2025-05-22 15.24.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/4961a860-3d45-4910-bf7a-ccbfbc849c7c.png)


![スクリーンショット 2025-05-22 15.25.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/60cb861e-31d1-4135-bd77-9d9d0b2ed28f.png)

- avatarの部分に使うアバターをセットする

![スクリーンショット 2025-05-22 17.37.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/022b5b8d-2bef-4f98-8bdb-452f83fdd7ac.png)

- itemを選択して名前をつけてcreateする

### ☂️フォルダの構成を作る

![スクリーンショット 2025-05-22 17.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/2eca21aa-1a9d-4e3e-8431-f5c0e8c9a3b7.png)

- オブジェクトができるので親オブジェクトをToggleSwitchなどの名前のものを作ってフォルダのようにする

### ☂️コンポーネントの設定

![スクリーンショット 2025-05-22 17.39.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/192fd613-07b8-43aa-8e97-e0ed3110474e.png)

- コンポーネントの中で設定を作る ON=表示 ON=非表示など

## ⭐️グループ化(途中までしかやっていない)

![スクリーンショット 2025-05-22 17.44.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/4cc03830-47d5-49f5-ae1c-74b74559cbad.png)

- 親オブジェクトの部分に2つのコンポーネントを作る

![スクリーンショット 2025-05-22 17.43.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/a5b9b910-7c1f-42d9-81a1-e41f015f1eb0.png)

- 作る

![スクリーンショット 2025-05-22 17.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/ef4f449c-715a-498a-8285-82ecb73e0351.png)

- 作る

### ☂️EX Menuにまとめる

![スクリーンショット 2025-05-22 17.47.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/44702bbb-32ed-48f3-a316-8f09b184cff0.png)

- sub menuに変更
- 子オブジェクトから生成を選択

### ☂️アイテム追加(多分ここらへんで調整?)

### ☂️ 二重になるのを削除

- コンポーネントを削除して重複するめにゅーにしないように直す
【かゆい所に手が届く】HTMLとCSSだけでレンジバーを作ってみる

## えっっ？？シンプル...
今回は、HTMLとCSSだけでレンジバーを作ってみようの記事です！

完成図はこれ↓
![Qiita用写真.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/f436a474-9f52-c209-c5e1-896ddbfab4f7.png)

「え～、なんかめんどくさそう...」って思った人、手を挙げて～！
視聴者A：「はい！」
視聴者B：「はい！」
視聴者C：「はい！」
視聴者D：「オレも～、はい！」
視聴者E：「私も～、はい！」
視聴者F：「ボクも、はい！」

だよね～...でも、だいじょぶ！下記のソースコードをコピペするだけで作れちゃいます！
```@html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTMLのレンジバー</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div class="container-fluid">

    <b>0</b><input id="rangeA" type="range" min="0" max="10" step="1" list="rangebar"><b>10</b>
        <datalist id="rangebar">
            <option value="0"></option>
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option value="7"></option>
            <option value="8"></option>
            <option value="9"></option>
            <option value="10"></option>
        </datalist>
</div>
</body>
</html>
```
AWS Amplifyで始めよう、スピーディなSPA開発

## はじめに

シングルページアプリケーション（SPA）の開発では、フロントエンドとバックエンドをスムーズに連携させることが求められます。AWS Amplify は、クラウドネイティブなアプリケーションを簡単に構築できるフルスタック開発プラットフォームです。
バックエンドの構築、デプロイ、ホスティング、認証、データ管理などを一元化し、開発の効率化を図れます。

本記事では、AWS Amplify を活用した SPA 開発の手順を紹介し、スピーディにアプリを構築する方法を解説します。

## 対象読者

- フロントエンド開発者で AWS を活用したアプリ構築に興味がある方
- クラウド環境を活用して迅速に SPA を開発したい方
- AWS のサーバーレス技術を活用したバックエンド開発に関心がある方
- 認証・データ管理・ホスティングを統合的に管理したい開発者

## 事前準備

AWS Amplify を利用する前に、以下の環境を準備してください。

- **AWS アカウント**: Amplify の各種機能を利用するために必要
- **Node.js (推奨: 最新 LTS 版)**: Amplify CLI の実行に必要
- **npm または yarn**: パッケージ管理ツール
- **AWS CLI**: AWS サービスとの連携をスムーズに行うため
- **Amplify CLI**: AWS Amplify の操作に必要 (`npm install -g @aws-amplify/cli`)

## AWS Amplify の特徴

AWS Amplify は、以下のような特徴を持つ開発者向けのプラットフォームです。

- **フルマネージドなホスティング**: CI/CD パイプラインを備えた簡単なデプロイ
- **認証機能の提供**: AWS Cognito を活用したユーザー認証
- **GraphQL API & REST API**: AWS AppSync や API Gateway を利用可能
- **データストレージ**: DynamoDB や S3 をシームレスに統合
- **リアルタイム機能**: WebSocket や Pub/Sub による双方向通信
- **多様なフロントエンドフレームワークに対応**: React, Vue.js, Angular, Next.js など

## Amplify を使った SPA 開発の手順

### 1. AWS Amplify のセットアップ

まず、AWS Amplify CLI をインストールします。

```sh
npm install -g @aws-amplify/cli
```

AWS の認証情報を設定します。

```sh
amplify configure
```

### 2. React プロジェクトの作成

```sh
npx create-react-app my-amplify-app
cd my-amplify-app
```

Amplify をプロジェクトに追加します。

```sh
amplify init
```

### 3. 認証機能の追加（AWS Cognito）

```sh
amplify add auth
```

React に Amplify の認証コンポーネントを組み込みます。

```sh
npm install aws-amplify @aws-amplify/ui-react
```

`src/App.js` に以下のコードを追加。

```jsx
import React from 'react';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { withAuthenticator } from '@aws-amplify/ui-react';

Amplify.configure(awsExports);

function App() {
  return (
    <div>
      <h1>Welcome to Amplify SPA</h1>
    </div>
  );
}

export default withAuthenticator(App);
```

認証機能が有効になり、ユーザー登録とログインが可能になります。

### 4. API の追加（GraphQL）

GraphQL API を作成。

```sh
amplify add api
```

スキーマを定義し、デプロイ。

```sh
amplify push
```

GraphQL クエリをフロントエンドで使用。

```jsx
import { API, graphqlOperation } from 'aws-amplify';
import { listTodos } from './graphql/queries';

async function fetchTodos() {
  const todoData = await API.graphql(graphqlOperation(listTodos));
  console.log(todoData);
}
```

### 5. アプリのデプロイ

Amplify のホスティングを追加。

```sh
amplify add hosting
amplify publish
```

これで SPA が AWS 上でホストされます。

## まとめ

AWS Amplify を活用することで、SPA の開発がスピーディに行えます。
私は主にモックページやサクッとページを用意したいときに大変重宝しています！

ぜひ活用して、クラウドネイティブなアプリ開発を加速しましょう！:smirk_cat:
【書籍紹介】『Web制作者のためのCSS設計の教科書』第3章・第4章を読んだ感想

---

同じようにサイト制作を学習されている方や、本書の購入を検討されている方の参考になれば幸いです。

---

## 紹介者の現状

- サイトコーディングを学習中  
- 複数のデザイン案をもとに Web サイトを制作した経験あり  
- **HTML／CSS／JavaScript** 初心者  


## 第3章　コンポーネント設計のアイデア

第3章では、コンポーネント設計における**命名規則**について学べます。私自身の課題は次のとおりでした。

- クラス名を決める際にいつも迷ってしまう  
- 似たスタイルの要素が増えるたびに命名で時間を消費  
- 後から見返すと「何のクラス？」となりがち  

本章で紹介されている **BEM** や **FLOCSS** を採用することで、  
要素の役割が明確になり、読みやすく保守しやすい CSS が書けそうと感じました。


## 第4章　コンポーネント設計の実践

第4章は、第3章のアイデアを踏まえ、**実際にどのように CSS を設計するか**を解説しています。 **YAGNI**（You Aren't Gonna Need It）を意識し、段階的にコンポーネントを設計する重要性をあらためて認識しました。代表的なコンポーネントの設計・実装パターンを具体例で学習することができました。途中の内容はやや高度ですが、行き詰まったら第3章と行き来しながら読み進めると理解が深まります。



## まとめ

初心者の視点で特に参考になったポイントを共有しました。  
詳細はぜひ本書を手に取ってご確認ください。  

用語や解釈に誤りがあれば、ご指摘いただけると幸いです！
ターミナルプロセスの起動が失敗して Cursor のターミナルが起動しなくなった


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/6a2d553d-8970-43e3-9928-354e3128bbf4.png)


というエラーが出て、ターミナルが新規に起動しなくなりました。
一度 Cursor を閉じて再度開いても同じだったので下記の手順を実行し解決したのでメモとして残します。



1 . 実行中のターミナルプロセスを確認

```bash
 % ps aux | grep -i terminal

username    947   0.9  0.2 1623835424  32624   ??  S    11 525   70:03.44 Cursor Helper: terminal pty-host                 
username  91092   0.0  0.0 410218816   1344 s491  S+    5:08AM   0:00.00 grep -i terminal
 %
```

「`Cursor Helper: terminal pty-host`」というプロセスをが原因でターミナルの起動に問題が発生している可能性があるので、問題のプロセスを kill します。

2 . 問題のプロセスを終了させる

```bash
% kill 947
※947はプロセスIDの例。実際のIDは環境により異なります
 ```

そうすると

```bash
 * シェル プロセスへの接続が失われたため、ターミナルを再起動しています... 
```

となりターミナルが再起動されるのが改善したか確認してみてください。

私はこれで改善しましたが、もし変わらなかった場合は強制終了という手もありそう。
```bash
kill -9 947
※ -9 は SIGKILL シグナルを表していて強制終了という意味を持つ
※947はプロセスIDの例。実際のIDは環境により異なります
```

これでもダメなら、再起動
それでもダメなら、シャットダウン
それでもダメなら、初期化
それでもダメなら、[こちら](https://www.apple.com/jp/mac/?afid=p240%7Cgo~cmp-218435781~adg-13140809061~ad-724302765732_kwd-12217801~dev-c~ext-~prd-~mca-~nt-search&cid=aos-jp-kwgo-Mac--) から New Mac はいかがでしょうか。
tailwindCSS v4 (css構成) で拡張機能intellisenseが動かない問題

## はじめに
tailwindCSS intellisenseってtailwindの初学者にとってありがたい機能ですよね。
しかーし、v4をcss構成で使用しようとすると全く機能しなかったので今回はその解決方法を紹介します。

## tailwindcss intellisense[拡張機能]
[![Image from Gyazo](https://i.gyazo.com/34e325e15938213f9d6e26e2a35d49d4.png)](https://gyazo.com/34e325e15938213f9d6e26e2a35d49d4)
[![Image from Gyazo](https://i.gyazo.com/ab805f910114eab29b07f70cd2c164c9.gif)](https://gyazo.com/ab805f910114eab29b07f70cd2c164c9)
htmlファイル内で以下のことを行ってくれる拡張機能です。
- カスタムクラスの補完
- カラーパレットやフォントなどの補完
- ホバーで設定内容のツールチップ表示



## Tailwind CSS v4 と CSSベース設定
これまではtailwindのテーマの設定なんかはtailwind.config.jsに記述していましたよね。
しかし、v4以降はCSSベースの構成も可能になり、設定とスタイルをtailwind.config.jsではなくCSSファイル1つに直接記述できるようになりました。

- 設定とスタイルの分離をなくす→ 開発者がCSSを書く場所でそのまま設定も完結
- 簡単で直感的な開発体験の提供→ 設定を別ファイルで管理する必要がなく、構成がシンプルに


※従来の tailwind.config.js も引き続き利用可能です。ダークモードの設定などスタイルの条件分岐なんかの複雑な処理はこれまで通り、tailwind.config.jsが必要みたいです。





## intellisenseが効かない？？
intellisenseは標準でtailwind.config.jsを解析して機能する拡張機能なので、v4をcssベースで利用する場合は標準では機能しません。なので、vscodeの設定を変更します。

## settings.json


#### settings.jsonの開き方
コマンドパレット(Command+Shift+P)に`>Preferences: Open Workspace Settings (JSON)`
※ワークスペースの設定なら`Workspace`ユーザーの設定なら`User`にしてください。

jsonファイルの中で **Tailwindの設定はJSファイルじゃなくて、cssファイルだよ！** と指定してあげましょう。

```json:settings.json
"tailwindCSS.experimental.configFile": "Tailwind の設定を書いたCSSファイルの相対パス"

// 例
"tailwindCSS.experimental.configFile":  "app/assets/stylesheets/application.tailwind.css"
```

これで拡張機能が今まで通り機能するはずです。
Ubuntu（Docker環境）でspaCyをGPUで使うための前提【備忘録】

# 環境
Dockerイメージ　：nvidia/cuda:12.3.2-cudnn9-runtime-ubuntu22.04
Pythonバージョン：3.10.12

# 困ったこと
GPUでspaCyを使おうとして`spacy.require_gpu()`を実行すると、以下のエラーが出た。
```python
import spacy
spacy.require_gpu()
```
```bash
---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
Cell In[1], line 2
      1 import spacy
----> 2 spacy.require_gpu()

File /workspace/.venv/lib/python3.10/site-packages/thinc/util.py:230, in require_gpu(gpu_id)
    228     raise ValueError("Cannot use GPU, PyTorch is not installed")
    229 elif platform.system() != "Darwin" and not has_cupy:
--> 230     raise ValueError("Cannot use GPU, CuPy is not installed")
    231 elif not has_gpu:
    232     raise ValueError("No GPU devices detected")

ValueError: Cannot use GPU, CuPy is not installed
```

# 確認したこと
spaCyはちゃんとCUDA対応でインストールしている。
```bash
pip install spacy[cuda12x]
```
実際、`pip freeze`でもcupyのCUDA対応版が入っている。
```bash
pip freeze
spacy==3.8.6
cupy-cuda12x==12.3.0
```

# 原因
どうやら、Docker側にlibgomp1が入ってないとそもそも`import cupy`すら通らないらしい。
というわけで、Docker側に入れる。
```bash
apt install -y libgomp1
```

これでもう一度`spacy.require_gpu()`をやってもエラーが出なくなった。
kcalcをPLUS-80で動かしてみた

twitterでkcalcというCP/M用のコマンドがあることを知り[PLUS-80 EX](https://qiita.com/yamori813/items/edaaaa9a638e156cea2d)で動かしてみました。

https://github.com/kevinboone/kcalc-cpm

![IMG_20250522_090035.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/9dcf304c-8603-4413-bbbc-86865760eea3.jpeg)

PC-9801FA2のMS-DOS 3.3CでハードディスクはFreeBSD/i386(ValueStar)のesp-targです。

ファイルは3.5incフロッピーでコピーしました。HDイメージにmtoolsでコピーする事もできます。

CPM8266でも動かしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/26e26301-2569-4b92-8467-23558883bcb5.png)

CPM8266のxrコマンドで15872バイト(124ブロック)以上のファイル転送が出来なかったので10Kでsplitして転送して、PIPコマンドのOパラメータで連結してコマンドを再構築しました。
Puppeteerで日本語文字化け【2025年度版GitHub Actions】

`sudo apt-get install -y fonts-noto-cjk`を実行しよう。WebサイトがWebフォントを読み込んでいる場合はインストール不要です。

```yaml:workflow.yml
name: Screenshot

on:
  push:

jobs:
  screenshot:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: browser-actions/setup-chrome@v1
      - run: |
          sudo apt-get install -y fonts-noto-cjk
          chrome --headless --disable-gpu --no-sandbox --screenshot=screenshot.png https://www.yahoo.co.jp/
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/79b18ffe-f39a-4d1b-93bd-1230c027869d.png)