syui.ai

claude code webを使い切った

ja
.md

11/18までの無料配布のtokenがあります。今回はギリギリ使い切れました。anthropicに感謝。

https://support.claude.com/en/articles/12690958-claude-code-promotion

今回は、特に印象的だったことを紹介。

色々作っていた

全部自分の手で書いていたものをベースにclaudeに書き直してもらったり、あるいは、一緒に最初から設計を考え直したりといった作業でした。

{
    "ai" : ["gpt", "shell", "os", "app", "bot", "card"]
}

aicard for ios

ai.card, つまり、aicard for iosに関しては、ueで書いていたものを全部作り直しました。

今回はreact + expoという構成ですが、あのままueで作り続けていたら、やばかった。

build

nvm use 24
npm i

npx expo prebuild --clean

# CocoaPodsのPATH問題を解決
# echo 'export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"' >> ~/.zshrc;source ~/.zshrc
cd ios;pod install;cd ..

open ios/Aicard.xcodeproj
#    - Signing & Capabilities タブを開く
#    - Team idを指定(Apple Developer アカウント)
#    - Xcodeは開いたまま次へ

npx expo run:ios --device --configuration Release

# apple store用の.xcarchiveを作ります。
xcodebuild -workspace ios/Aicard.xcworkspace \
  -scheme Aicard \
  -configuration Release \
  -archivePath build/Aicard.xcarchive \
  -allowProvisioningUpdates \
  archive
open ./build/Aicard.xcarchive
# Distribute App ボタンをクリック
# App Store Connect を選択

atproto oauth

  1. PKCE生成 → PAR → Authorization → Callback
  2. Token Exchange（DPoP nonce自動リトライ）
  3. Profile取得（DPoP + ath）
  4. Session保存

Universal Links

{
  "applinks": {
    "apps": [],
    "details": [{
      "appID": "{apple-dev}.{id}",
      "paths": ["/oauth/callback"]
    }]
  }
}

1. ellipticへの移行

解決策: ES256署名をellipticライブラリで実装

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エラー

解決策: 自動リトライロジック実装

// 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パラメータ追加

// アクセストークンの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でやる通常の方法ではうまくテクスチャが表示されませんでした。

+ react-native-filament
- expo-three, expo-gl