120 lines
3.6 KiB
Markdown
120 lines
3.6 KiB
Markdown
---
|
||
title: "claude code webを使い切った"
|
||
slug: "aicard"
|
||
date: "2025-11-18"
|
||
tags: ["react", "ios"]
|
||
language: ["ja", "en"]
|
||
draft: false
|
||
---
|
||
|
||
11/18までの無料配布のtokenがあります。今回はギリギリ使い切れました。`anthropic`に感謝。
|
||
|
||
[https://support.claude.com/en/articles/12690958-claude-code-promotion](https://support.claude.com/en/articles/12690958-claude-code-promotion)
|
||
|
||
[msg type="info" content="claudeは性能劣化、limitの多発、突然動かなくなる現象が多発した時期があり、`plan:max`でもほとんど使えない期間がありました。1ヶ月間、ほとんど使わなかったのに`plan:max`は無駄だったという経験から、それ以降は`plan:pro`に切り替えています。claudeが使えなくなった期間は他のサービスを使っていました。"]
|
||
|
||
今回は、特に印象的だったことを紹介。
|
||
|
||
## 色々作っていた
|
||
|
||
全部自分の手で書いていたものをベースにclaudeに書き直してもらったり、あるいは、一緒に最初から設計を考え直したりといった作業でした。
|
||
|
||
```json
|
||
{
|
||
"ai" : ["gpt", "shell", "os", "app", "bot", "card"]
|
||
}
|
||
```
|
||
|
||
## aicard for ios
|
||
|
||
`ai.card`, つまり、`aicard for ios`に関しては、ueで書いていたものを全部作り直しました。
|
||
|
||
今回は`react + expo`という構成ですが、あのままueで作り続けていたら、やばかった。
|
||
|
||
<iframe width="100%" height="415" src="https://www.youtube.com/embed/KIwzBlluVKc?rel=0&showinfo=0&controls=0" 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>
|
||
|
||
### atproto oauth
|
||
|
||
1. PKCE生成 → PAR → Authorization → Callback
|
||
2. Token Exchange（DPoP nonce自動リトライ）
|
||
3. Profile取得（DPoP + ath）
|
||
4. Session保存
|
||
|
||
`Universal Links`
|
||
|
||
```json:apple-app-site-association.json
|
||
{
|
||
"applinks": {
|
||
"apps": [],
|
||
"details": [{
|
||
"appID": "{apple-dev}.{id}",
|
||
"paths": ["/oauth/callback"]
|
||
}]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1. ellipticへの移行
|
||
|
||
**解決策**: ES256署名を`elliptic`ライブラリで実装
|
||
|
||
```js
|
||
import elliptic from 'elliptic';
|
||
|
||
const EC = elliptic.ec;
|
||
const ec = new EC('p256');
|
||
const key = ec.genKeyPair();
|
||
```
|
||
|
||
**成功**: DPoP proof JWTの生成に成功
|
||
|
||
#### 2. DPoP nonce対応
|
||
|
||
**問題**: トークン交換時に`use_dpop_nonce`エラー
|
||
|
||
**解決策**: 自動リトライロジック実装
|
||
|
||
```js
|
||
// 1回目失敗 → DPoP-Nonceヘッダー取得 → 2回目成功
|
||
if (errorData.error === 'use_dpop_nonce') {
|
||
const nonce = response.headers.get('DPoP-Nonce');
|
||
// nonceを含めてリトライ
|
||
}
|
||
```
|
||
|
||
#### 3. プロファイル取得エラー
|
||
|
||
**問題**: `DPoP "ath" mismatch`エラー
|
||
|
||
```
|
||
{"error":"invalid_dpop_proof","message":"DPoP \"ath\" mismatch"}
|
||
```
|
||
|
||
**原因**: プロファイル取得時のDPoPプルーフにaccess token hash (`ath`) が欠落
|
||
|
||
**解決策**: `generateDPoPProof`に`accessToken`パラメータ追加
|
||
|
||
```js
|
||
// アクセストークンのSHA-256ハッシュを計算
|
||
if (accessToken) {
|
||
const tokenHash = await Crypto.digestStringAsync(
|
||
Crypto.CryptoDigestAlgorithm.SHA256,
|
||
accessToken,
|
||
{ encoding: Crypto.CryptoEncoding.BASE64 }
|
||
);
|
||
payload.ath = base64UrlEncode(tokenHash);
|
||
}
|
||
```
|
||
|
||
### glb
|
||
|
||
結論から言うと、`react-native-filament`を使います。
|
||
|
||
`three`でやる通常の方法ではうまくテクスチャが表示されませんでした。
|
||
|
||
```diff
|
||
+ react-native-filament
|
||
- expo-three, expo-gl
|
||
```
|
||
|