Rork Max × Expo Router Web 対応 — iOS・Android・Web を1つのコードベースで展開する

import { Platform, StyleSheet } from 'react-native';
 
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      web: {
        maxWidth: 768,
        marginHorizontal: 'auto',
        paddingHorizontal: 24,
      },
      default: {
        flex: 1,
        paddingHorizontal: 16,
      },
    }),
  },
  header: {
    ...Platform.select({
      web: {
        position: 'sticky',
        top: 0,
        zIndex: 100,
        backdropFilter: 'blur(12px)',
      },
      default: {
        // ネイティブはデフォルトスタイル
      },
    }),
  },
});

// VideoPlayer.web.tsx
export const VideoPlayer = ({ uri }: { uri: string }) => (
  <video
    src={uri}
    controls
    style={{ width: '100%', maxHeight: 480, borderRadius: 8 }}
  />
);
 
// VideoPlayer.native.tsx
import { Video, ResizeMode } from 'expo-av';
 
export const VideoPlayer = ({ uri }: { uri: string }) => (
  <Video
    source={{ uri }}
    resizeMode={ResizeMode.CONTAIN}
    useNativeControls
    style={{ width: '100%', height: 240 }}
  />
);

import { Link, useRouter } from 'expo-router';
 
// Link コンポーネント（Web では <a> として出力される）
<Link href="/articles/my-article" asChild>
  <TouchableOpacity>
    <Text>記事を読む</Text>
  </TouchableOpacity>
</Link>
 
// programmatic navigation
const router = useRouter();
router.push('/articles/my-article');

// app/articles/[id].tsx
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import { Platform } from 'react-native';
 
export default function ArticleScreen() {
  const { id } = useLocalSearchParams();
  const article = useArticle(id as string);
 
  return (
    <>
      {Platform.OS === 'web' && (
        <Head>
          <title>{article.title} | My App</title>
          <meta name="description" content={article.description} />
          <meta property="og:title" content={article.title} />
          <meta property="og:description" content={article.description} />
          <meta property="og:image" content={article.coverImage} />
          <meta property="og:type" content="article" />
          <meta name="twitter:card" content="summary_large_image" />
          <link
            rel="canonical"
            href={`https://myapp.com/articles/${id}`}
          />
        </Head>
      )}
 
      <Stack.Screen
        options={{
          title: article.title,
          headerBackTitle: '記事一覧',
        }}
      />
 
      <ArticleContent article={article} />
    </>
  );
}

// scripts/generate-sitemap.ts
import { writeFileSync } from 'fs';
 
const BASE_URL = 'https://myapp.com';
 
const generateSitemap = async () => {
  const articles = await fetchAllArticles();
 
  const staticRoutes = ['/', '/explore', '/settings'];
  const dynamicRoutes = articles.map(a => `/articles/${a.id}`);
  const allRoutes = [...staticRoutes, ...dynamicRoutes];
 
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${allRoutes
  .map(
    route => `  <url>
    <loc>${BASE_URL}${route}</loc>
    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>${route === '/' ? '1.0' : '0.8'}</priority>
  </url>`
  )
  .join('\n')}
</urlset>`;
 
  writeFileSync('dist/sitemap.xml', sitemap);
  console.log(`Sitemap generated: ${allRoutes.length} URLs`);
};
 
generateSitemap();

# ビルド
npx expo export --platform web
# dist/ フォルダにHTMLファイルが生成されます
 
# Wrangler でデプロイ
npx wrangler pages deploy dist/ --project-name my-app-web

# .github/workflows/deploy.yml
name: Build & Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  # iOS / Android は EAS Build
  mobile-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: eas build --platform all --non-interactive
 
  # Web は Cloudflare Pages
  web-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install
      - run: npx expo export --platform web
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy dist/ --project-name my-app-web

import { Image } from 'expo-image';
import { Platform } from 'react-native';
 
// expo-image は Web でも自動的に WebP/AVIF を使用し、
// Lazy Loading と Blur Placeholder をサポート
const OptimizedImage = ({ uri, ...props }: ImageProps) => (
  <Image
    source={{ uri }}
    placeholder={{ blurhash: 'L6PZfSi_.AyE_3t7t7R**0o#DgR4' }}
    contentFit="cover"
    transition={200}
    {...props}
    style={[
      props.style,
      Platform.OS === 'web' && { maxWidth: '100%' }
    ]}
  />
);

// app/_layout.tsx
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
 
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  const [loaded] = useFonts({
    'SpaceMono-Regular': require('../assets/fonts/SpaceMono-Regular.ttf'),
  });
 
  useEffect(() => {
    if (loaded) SplashScreen.hideAsync();
  }, [loaded]);
 
  // Web では、フォント未ロード中も fallback フォントでコンテンツを表示する
  if (!loaded && Platform.OS !== 'web') return null;
 
  return <Slot />;
}