Rork Max で日本市場向けアプリを作る設計ガイド — LINE ログイン・PayPay 決済・日本語 UX 最適化の実装と収益戦略

// src/constants/typography.ts
export const JA_TYPOGRAPHY = {
  // 見出し
  heading1: { fontSize: 20, lineHeight: 30, letterSpacing: 0.5 },
  heading2: { fontSize: 17, lineHeight: 26, letterSpacing: 0.3 },
 
  // 本文
  body: { fontSize: 15, lineHeight: 24, letterSpacing: 0.2 },
  bodySmall: { fontSize: 13, lineHeight: 20, letterSpacing: 0.1 },
 
  // キャプション・補足
  caption: { fontSize: 11, lineHeight: 17, letterSpacing: 0 },
} as const;
 
// 使用例
import { JA_TYPOGRAPHY } from '../constants/typography';
import { StyleSheet } from 'react-native';
 
const styles = StyleSheet.create({
  title: {
    ...JA_TYPOGRAPHY.heading2,
    fontWeight: '600',
    color: '#1C1C1E',
  },
  description: {
    ...JA_TYPOGRAPHY.body,
    color: '#3C3C43',
  },
});

// よくある間違い: アイコンボタンのタッチエリアが小さすぎる
// ❌ これでは実際のタップ面積が 24x24 しかない
<TouchableOpacity style={{ width: 24, height: 24 }}>
  <Icon name="close" size={24} />
</TouchableOpacity>
 
// ✅ 見た目は 24px でもタッチエリアは 44px 以上確保する
<TouchableOpacity
  style={{
    width: 44,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center',
  }}
  accessibilityLabel="閉じる"
  accessibilityRole="button"
>
  <Icon name="close" size={24} color="#3C3C43" />
</TouchableOpacity>

// カラーをハードコードせず、useColorScheme を活用する
import { useColorScheme } from 'react-native';
 
function AppText({ children }: { children: React.ReactNode }) {
  const scheme = useColorScheme();
 
  return (
    <Text
      style={{
        color: scheme === 'dark' ? '#F2F2F7' : '#1C1C1E',
        // ❌ color: '#1C1C1E' のようなハードコードは禁止
      }}
    >
      {children}
    </Text>
  );
}

// src/hooks/useLineAuth.ts
import * as AuthSession from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
import { useState, useCallback } from 'react';
 
// iOS でのブラウザセッション完了処理に必要
WebBrowser.maybeCompleteAuthSession();
 
const LINE_CHANNEL_ID = process.env.EXPO_PUBLIC_LINE_CHANNEL_ID!;
const LINE_AUTH_URL = 'https://access.line.me/oauth2/v2.1/authorize';
 
export function useLineAuth() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const redirectUri = AuthSession.makeRedirectUri({
    scheme: 'your-app-scheme', // app.json の scheme と一致させる
    path: 'lineauth',
  });
 
  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: LINE_CHANNEL_ID,
      scopes: ['profile', 'openid', 'email'],
      redirectUri,
      responseType: AuthSession.ResponseType.Code,
      usePKCE: true, // LINE は PKCE をサポート
      extraParams: {
        nonce: Math.random().toString(36).substring(2, 15),
      },
    },
    { authorizationEndpoint: LINE_AUTH_URL }
  );
 
  const signInWithLine = useCallback(async () => {
    setIsLoading(true);
    setError(null);
 
    try {
      const result = await promptAsync();
 
      if (result.type === 'success' && result.params.code) {
        // Authorization Code をサーバーサイドで Token と交換する
        const tokens = await fetch('/api/auth/line/callback', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            code: result.params.code,
            redirectUri,
            codeVerifier: request?.codeVerifier,
          }),
        }).then(r => {
          if (!r.ok) throw new Error('Token exchange failed');
          return r.json();
        });
 
        return tokens; // { jwt, user }
      } else if (result.type === 'cancel') {
        // ユーザーが自分でキャンセル — エラー表示不要
        return null;
      } else {
        throw new Error(
          result.params?.error_description || 'LINE 認証に失敗しました'
        );
      }
    } catch (err) {
      const message =
        err instanceof Error ? err.message : '不明なエラーが発生しました';
      setError(message);
      return null;
    } finally {
      setIsLoading(false);
    }
  }, [promptAsync, request?.codeVerifier, redirectUri]);
 
  return { signInWithLine, isLoading, error };
}

// Cloudflare Workers + Hono での実装
// src/api/auth/line/callback.ts
import { Hono } from 'hono';
 
type Env = {
  LINE_CHANNEL_ID: string;
  LINE_CHANNEL_SECRET: string;
  DB: D1Database;
};
 
const app = new Hono<{ Bindings: Env }>();
 
app.post('/api/auth/line/callback', async (c) => {
  const { code, redirectUri, codeVerifier } = await c.req.json();
 
  if (!code || !redirectUri) {
    return c.json({ message: 'パラメータが不正です' }, 400);
  }
 
  // Step 1: Authorization code → Access token 交換
  const tokenRes = await fetch('https://api.line.me/oauth2/v2.1/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: redirectUri,
      client_id: c.env.LINE_CHANNEL_ID,
      client_secret: c.env.LINE_CHANNEL_SECRET,
      ...(codeVerifier ? { code_verifier: codeVerifier } : {}),
    }),
  });
 
  if (!tokenRes.ok) {
    const error = await tokenRes.json() as { error_description?: string };
    return c.json(
      { message: error.error_description || 'トークン取得失敗' },
      401
    );
  }
 
  const { access_token } = await tokenRes.json() as { access_token: string };
 
  // Step 2: LINE プロフィール取得
  const profileRes = await fetch('https://api.line.me/v2/profile', {
    headers: { Authorization: `Bearer ${access_token}` },
  });
 
  if (!profileRes.ok) {
    return c.json({ message: 'プロフィール取得失敗' }, 500);
  }
 
  const profile = await profileRes.json() as {
    userId: string;
    displayName: string;
    pictureUrl?: string;
  };
 
  // Step 3: D1 DB に UPSERT（初回はレコード作成、2回目以降は更新）
  await c.env.DB.prepare(`
    INSERT INTO users (line_user_id, display_name, avatar_url, last_login_at)
    VALUES (?, ?, ?, CURRENT_TIMESTAMP)
    ON CONFLICT(line_user_id) DO UPDATE SET
      display_name = excluded.display_name,
      avatar_url = excluded.avatar_url,
      last_login_at = CURRENT_TIMESTAMP
  `).bind(profile.userId, profile.displayName, profile.pictureUrl ?? null).run();
 
  const user = await c.env.DB.prepare(
    'SELECT * FROM users WHERE line_user_id = ?'
  ).bind(profile.userId).first();
 
  // Step 4: 自社 JWT 発行（実装は省略）
  const jwt = await generateJWT({ userId: (user as any).id });
  return c.json({ jwt, user });
});

# Cloudflare Workers のシークレットとして設定
wrangler secret put PAYPAY_API_KEY
wrangler secret put PAYPAY_API_SECRET
wrangler secret put PAYPAY_MERCHANT_ID
 
# サンドボックス / 本番の切り替えは環境変数で管理
# wrangler.toml
[env.staging.vars]
PAYPAY_BASE_URL = "https://stg.paypay.ne.jp"
 
[env.production.vars]
PAYPAY_BASE_URL = "https://api.paypay.ne.jp"

// src/lib/paypay.ts
interface CreateQRCodeParams {
  orderId: string;       // ユニークな注文 ID（べき等性確保のため必須）
  amount: number;        // 金額（円）
  description: string;   // PayPay アプリ上に表示される説明
  redirectUrl: string;   // 決済後のリダイレクト先 URL
}
 
interface PayPayQRResult {
  deeplink: string;      // PayPay アプリを起動するディープリンク
  webUrl: string;        // PayPay アプリ未インストール時の Web 決済 URL
  paymentId: string;
}
 
export async function createPayPayQRCode(
  params: CreateQRCodeParams,
  env: {
    PAYPAY_BASE_URL: string;
    PAYPAY_API_KEY: string;
    PAYPAY_API_SECRET: string;
    PAYPAY_MERCHANT_ID: string;
  }
): Promise<PayPayQRResult> {
  const timestamp = Math.floor(Date.now() / 1000);
  const nonce = crypto.randomUUID().replace(/-/g, '');
 
  const payload = {
    merchantPaymentId: params.orderId,
    amount: { amount: params.amount, currency: 'JPY' },
    codeType: 'ORDER_QR',
    orderDescription: params.description,
    redirectUrl: params.redirectUrl,
    redirectType: 'APP_DEEP_LINK',
    isAuthorization: false,
    requestedAt: timestamp,
    expiryDate: null, // null = デフォルト 15 分
  };
 
  const bodyStr = JSON.stringify(payload);
 
  // HMAC-SHA256 署名（Web Crypto API を使用 — Node.js の crypto モジュール不要）
  const bodyHash = await computeBodyHash(bodyStr);
  const signatureBase = ['POST', '/v1/codes', String(timestamp), nonce, bodyHash].join('\n');
  const signature = await computeHMAC(signatureBase, env.PAYPAY_API_SECRET);
 
  const authHeader = [
    'hmac OPA-Auth',
    env.PAYPAY_API_KEY,
    nonce,
    String(timestamp),
    bodyHash,
    signature,
  ].join(':');
 
  const res = await fetch(`${env.PAYPAY_BASE_URL}/v1/codes`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      Authorization: authHeader,
      'X-ASSUME-MERCHANT': env.PAYPAY_MERCHANT_ID,
    },
    body: bodyStr,
  });
 
  if (!res.ok) {
    const err = await res.json() as { resultInfo?: { message?: string } };
    throw new Error(`PayPay エラー: ${err.resultInfo?.message ?? 'Unknown'}`);
  }
 
  const result = await res.json() as {
    data: { paymentId: string; deeplink: string; url: string };
  };
 
  return {
    paymentId: result.data.paymentId,
    deeplink: result.data.deeplink,
    webUrl: result.data.url,
  };
}
 
// Web Crypto API で HMAC-SHA256 を計算
async function computeHMAC(data: string, secret: string): Promise<string> {
  const enc = new TextEncoder();
  const key = await crypto.subtle.importKey(
    'raw',
    enc.encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign']
  );
  const sig = await crypto.subtle.sign('HMAC', key, enc.encode(data));
  return btoa(String.fromCharCode(...new Uint8Array(sig)));
}
 
async function computeBodyHash(body: string): Promise<string> {
  const enc = new TextEncoder();
  const hash = await crypto.subtle.digest('SHA-256', enc.encode(body));
  return btoa(String.fromCharCode(...new Uint8Array(hash)));
}

// src/screens/PaymentScreen.tsx
import * as Linking from 'expo-linking';
import { useState } from 'react';
import { Alert, ActivityIndicator, TouchableOpacity, Text } from 'react-native';
 
export function PayPayButton({
  amount,
  orderId,
  productName,
}: {
  amount: number;
  orderId: string;
  productName: string;
}) {
  const [isLoading, setIsLoading] = useState(false);
 
  const handlePayPay = async () => {
    setIsLoading(true);
    try {
      // サーバーサイドで QR コードを作成
      const { deeplink, webUrl } = await fetch('/api/payment/paypay/create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          orderId,
          amount,
          description: productName,
          redirectUrl: 'your-app-scheme://payment/complete',
        }),
      }).then(r => r.json());
 
      // PayPay アプリが起動可能かチェック
      const canOpen = await Linking.canOpenURL(deeplink);
 
      if (canOpen) {
        // PayPay アプリが入っていればディープリンクで起動
        await Linking.openURL(deeplink);
      } else {
        // 未インストールの場合は Web 決済ページへ
        await Linking.openURL(webUrl);
      }
 
      // 決済完了は Webhook で受信するため、ここでは待機しない
    } catch (err) {
      Alert.alert(
        '決済エラー',
        'PayPay 決済の開始に失敗しました。しばらくしてから再試行してください。'
      );
    } finally {
      setIsLoading(false);
    }
  };
 
  return (
    <TouchableOpacity
      onPress={handlePayPay}
      disabled={isLoading}
      style={{
        backgroundColor: '#FF0033', // PayPay ブランドカラー
        borderRadius: 8,
        paddingVertical: 14,
        alignItems: 'center',
      }}
    >
      {isLoading ? (
        <ActivityIndicator color="#fff" />
      ) : (
        <Text style={{ color: '#fff', fontWeight: '700', fontSize: 16 }}>
          PayPay で支払う
        </Text>
      )}
    </TouchableOpacity>
  );
}

// src/api/payment/paypay/webhook.ts
export async function handlePayPayWebhook(
  request: Request,
  env: { PAYPAY_API_SECRET: string; DB: D1Database }
): Promise<Response> {
  const body = await request.text();
 
  // 署名検証（必ず行うこと — 偽の Webhook を拒否する）
  const signature = request.headers.get('X-PAYPAY-SIGNATURE');
  if (!signature) {
    return new Response('Unauthorized', { status: 401 });
  }
 
  const expected = await computeHMAC(body, env.PAYPAY_API_SECRET);
  if (signature !== expected) {
    return new Response('Invalid signature', { status: 403 });
  }
 
  const event = JSON.parse(body) as {
    notification_type: string;
    merchant_payment_id: string;
    payment_id: string;
    status: string;
  };
 
  if (
    event.notification_type === 'transaction_payment_completed' &&
    event.status === 'COMPLETED'
  ) {
    // べき等性確保: 同じ merchant_payment_id が既に処理済みならスキップ
    const existing = await env.DB.prepare(
      'SELECT id FROM payments WHERE merchant_payment_id = ?'
    ).bind(event.merchant_payment_id).first();
 
    if (!existing) {
      // 新規: DB に記録してサービスを付与
      await env.DB.prepare(`
        INSERT INTO payments (merchant_payment_id, payment_id, status, completed_at)
        VALUES (?, ?, 'COMPLETED', CURRENT_TIMESTAMP)
      `).bind(event.merchant_payment_id, event.payment_id).run();
 
      // ここでサービス付与処理（例: KV にアクセス権を書き込む）
      await grantServiceToUser(event.merchant_payment_id, env);
    }
    // 既に処理済みの場合は 200 を返すだけ（再試行への適切な応答）
  }
 
  // PayPay は 200 が返らないと同じ Webhook を再送する
  return new Response('OK', { status: 200 });
}

// ❌ 問題のある実装: 高速入力で文字落ちが発生する
import { useState } from 'react';
import { TextInput } from 'react-native';
 
function BadInput() {
  const [value, setValue] = useState('');
  return (
    <TextInput
      value={value}
      onChangeText={setValue} // state 更新のたびに re-render が走る
    />
  );
}
 
// ✅ 改善された実装: ref でバッファリングして安定化する
import { useRef, useState, useCallback } from 'react';
import { TextInput, StyleSheet } from 'react-native';
 
function StableJapaneseInput({
  onSubmit,
  placeholder,
}: {
  onSubmit: (text: string) => void;
  placeholder?: string;
}) {
  const inputRef = useRef<TextInput>(null);
  const internalValue = useRef('');
  const [isFocused, setIsFocused] = useState(false);
 
  const handleChangeText = useCallback((text: string) => {
    // ref に値を保持することで re-render を抑制
    internalValue.current = text;
  }, []);
 
  const handleSubmit = useCallback(() => {
    const text = internalValue.current.trim();
    if (text) {
      onSubmit(text);
      inputRef.current?.clear();
      internalValue.current = '';
    }
  }, [onSubmit]);
 
  return (
    <TextInput
      ref={inputRef}
      onChangeText={handleChangeText}
      onSubmitEditing={handleSubmit}
      placeholder={placeholder}
      placeholderTextColor="#8E8E93"
      returnKeyType="send"
      autoCorrect={false}   // 日本語には自動補正不要
      spellCheck={false}    // スペルチェック無効
      multiline={false}     // multiline では onSubmitEditing が動作しない
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
      style={[
        styles.input,
        isFocused && styles.inputFocused,
      ]}
    />
  );
}
 
const styles = StyleSheet.create({
  input: {
    fontSize: 15,
    borderWidth: 1,
    borderColor: '#C6C6C8',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    color: '#1C1C1E',
  },
  inputFocused: {
    borderColor: '#007AFF',
  },
});

// 日本時間で通知スケジュールを組む例（Cloudflare Workers Cron）
// NG: UTC 15:00 を指定してしまい、JST 00:00 に配信
// OK: UTC 01:00 を指定して JST 10:00 に配信
 
// wrangler.toml
// [triggers]
// crons = ["0 1 * * *"]  ← JST 10:00