Open7

WEBフロントエンドエンジニアがReactNativeでAIキャラチャットIOSアプリをvive codingしていく日記

isseyissey

ハートレベル（好感度機能）を実装中。
キャラクターから自分へ対する好感度をレベル形式で視覚的に見れる。

isseyissey

ハートレベルの技術選定メモ

lottie-react-native

React Native アプリで Lottie（ロッティ） アニメーションを再生するためのライブラリ。
Lottieアニメーションが何なのかわよくわからないが、アニメーションのデータを事前に作成用意しておかないと使えないようだ。

今自分にその技術はないので使うのはやめておく。

アプリ独自の個性的でリッチなアニメーションを追加したくなった時に採用を検討する

UIの叩き台を作っているフェーズなのでもうちょっと簡易なアニメーションを簡易に実装していきたい

Tamagui Animtions

Tamaguiに内蔵されているアニメーションを指定するためのAPI
クロスプラットフォーム対応でReactNativeやWEB両方で動く

Tamagui自体が「スタイル＋コンポーネント＋アニメーション」を統合したUIライブラリ

簡易なアニメーションをカンタンに作成できるので、MVPではこちらを中心にアニメーションは実装していく。（そもそもTamaguiを使ってるので）

宣言的でシンプルに書ける。TamaguiコンポーネントのAPIとして記述できる

import { YStack } from 'tamagui'

export function Example() {
  return (
    <YStack
      animation="quick"
      enterStyle={{ opacity: 0, scale: 0.9, y: -10 }}
      exitStyle={{ opacity: 0, scale: 0.9, y: 10 }}
    >
      Hello, Tamagui!
    </YStack>
  )
}
isseyissey

なぜこのスクラップをやっているのか

バイブコーディングしているとアプリは形になるんだけど、自分でコード書いてアウトプットしないから、知識が定着しないので学んだことの概念的なところはアウトプットしていきたい

コードを書くのはAIの仕事なので細かいコードの書き方まで深追いしなくてもいいかなーっておもうけど、これが何なのかくらいは理解しときたい

isseyissey

react-nativeで画像の読み込み時にエラーになる

エラー内容

Error: UnableToResolveError Unable to resolve module 

None of these files exist:
  * corridor.png
  * src/assets/screens/main/episode/001/corridor.png
  29 |     switch (scene.backgroundImage) {
  30 |       case 'corridor':
> 31 |         return require('@/assets/screens/main/episode/001/corridor.png')
     |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  32 |       default:
  33 |         return null
  34 |     }]

原因

tsconfig.jsonとbabel.config.jsにエイリアスの設定が正しく行われていないため

解決策

自分はassetsをルードディレクトリにおいて、srcディレクトリの配下にassetsディレクトリを置いていなかったので、エイリアスに設定されているパスが違いエラーとなっていた

そのため@assetsエイリアスを作成した。

ts.config.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["assets/*"]
    }
  }
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@': './src',
            '@assets': './assets',
          },
        },
      ],
      
      'react-native-reanimated/plugin',
    ],
  };
};

用語解説

  • ts.config.json
    • typescriptコンパイラがコードをどう解釈するか設定する場所
    • 解釈できない（設定していない）エイリアスがコードにあるとエラーを吐く
    • 設定しておくとコードの実行前にエディタがエラーを赤線で出して教えてくれる
  • babel.config.js
    • 実行時に解決できるエイリアスの設定をできる場所
    • ここに設定していないエイリアスがコード上に存在すると実行時にエラーになってクラッシュする
isseyissey

expo-auth-sessionとは

ExpoのアプリでOAuth認証を行うためのライブラリ
OAuth認証とは、Google、Facebook等を利用したサードパーティ認証を行う仕組み

isseyissey

Oauthの認証フローについてまとめたい

  • インプリシットフロー（セキュリティ弱めで非推奨）と認可コードフロー（推奨）
  • PKCEをつかうと認可コードフローを使える。インプリシットフローでは使えない。
  • Google認証をIOSアプリで実装する際はリダイレクトURLをIOS許可形式にする必要がある
const redirectUri = AuthSession.makeRedirectUri({


  native: 'com.googleusercontent.apps.<REVERSED_CLIENT_ID>:/oauthredirect',
});
  • app.config.ts を新規作成して CFBundleURLSchemesってなんだ？なんで必要なんだ？

TODO:書く

isseyissey

SDKってなんだ

SDK = Software Development Kit（ソフトウェア開発キット） の略
「アプリの特定の機能を開発しやすくするための道具セット」
SDKには特定の機能を開発しやすくするためのライブラリやドキュメントやサンプルコードが入っている

具体例

  • RevenueCat SDK
    • アプリにIAP決済関連機能を簡単に組み込める
  • Vercel AI SDK
    • アプリにAI機能を簡単に組み込める

結論

アプリに特定の機能を追加するためのスターターセットのようなもの