Merge commit '7b7ac73169255ae569ab38756f14a139dd255b9c' into develop

The XHR interceptor baked _MOCK_TRAIN at page load time, so seeking or
advancing a playback frame only changed React state but had no effect
on the already-loaded WebView page.

- webviewXhrInterceptor.ts:
  - Expose window.__jrsMockUpdateTrain(newData) from inside the IIFE so
    the _MOCK_TRAIN variable can be updated after page load
  - Add generateMockUpdateScript(trainPositions) helper: calls
    __jrsMockUpdateTrain with fresh data + GetDateTime, then calls
    window.setReload() to trigger the page's own redraw cycle

- WebView.tsx:
  - Import generateMockUpdateScript
  - Add useEffect watching mockTrainPositions (skips first mount since
    beforeContentLoaded already has correct data)
  - When mockApiFeatureEnabled && mockTrainPositions changes, inject the
    update script via webview.current.injectJavaScript()

Result: seeking, prev/next frame, and auto-advance during playback now
immediately update the train position display in the WebView.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.gitignore

@@ -58,3 +58,5 @@ android/
 ios/
 !modules/**/ios/
 *.ipa
+*.apk
+*.aab

App.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect } from "react";
-import { Linking, Platform, UIManager } from "react-native";
+import {
+  IS_LOW_DENSITY,
+  DEX_SCALE,
+  useRealWindowDimensions,
+} from "./utils/dexDimensionOverride";
+import { Linking, Platform, UIManager, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "./utils/disableFontScaling"; // グローバルなフォントスケーリング無効化
 import { AppContainer } from "./Apps";
@@ -10,7 +15,7 @@ import { CurrentTrainProvider } from "./stateBox/useCurrentTrain";
 import { AreaInfoProvider } from "./stateBox/useAreaInfo";
 import { BusAndTrainDataProvider } from "./stateBox/useBusAndTrainData";
 import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram";
-import { SheetProvider } from "react-native-actions-sheet";
+import { SheetProvider, SheetManager } from "react-native-actions-sheet";
 import "./components/ActionSheetComponents/sheets";
 import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -20,7 +25,7 @@ import { buildProvidersTree } from "./lib/providerTreeProvider";
 import { StationListProvider } from "./stateBox/useStationList";
 import { NotificationProvider } from "./stateBox/useNotifications";
 import { UserPositionProvider } from "./stateBox/useUserPosition";
-import { rootNavigationRef } from "./lib/rootNavigation";
+import { rootNavigationRef, stackAwareNavigate } from "./lib/rootNavigation";
 import { AppThemeProvider } from "./lib/theme";
 import StatusbarDetect from "./StatusbarDetect";
 
@@ -49,32 +54,65 @@ export default function App() {
         return;
       }
 
-      rootNavigationRef.navigate("topMenu", {
+      stackAwareNavigate("topMenu", {
         screen: "setting",
         params: {
           screen: "FelicaHistoryPage",
         },
-      } as any);
+      });
+    };
+
+    const navigateWhenReady = (
+      callback: () => void,
+      url: string,
+      retryCount = 0
+    ) => {
+      if (!rootNavigationRef.isReady()) {
+        if (retryCount < 8) {
+          setTimeout(() => navigateWhenReady(callback, url, retryCount + 1), 250);
+        }
+        return;
+      }
+      callback();
     };
 
     const routeFromUrl = (url: string, retryCount = 0) => {
       const normalized = (url || "").toLowerCase();
       if (!normalized) return;
 
-      const isFelicaUrl =
+      if (
         normalized.includes("felicahistorypage") ||
-        normalized.includes("open/felica");
-
-      if (!isFelicaUrl) return;
-
-      if (!rootNavigationRef.isReady()) {
-        if (retryCount < 8) {
-          setTimeout(() => routeFromUrl(url, retryCount + 1), 250);
-        }
-        return;
+        normalized.includes("open/felica")
+      ) {
+        navigateWhenReady(() => openFelicaPage(), url, retryCount);
+      } else if (normalized.includes("open/traininfo")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("topMenu", { screen: "menu" });
+          setTimeout(() => {
+            SheetManager.show("JRSTraInfo");
+          }, 450);
+        }, url, retryCount);
+      } else if (normalized.includes("open/operation")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("information");
+        }, url, retryCount);
+      } else if (normalized.includes("open/settings")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("topMenu", {
+            screen: "setting",
+          });
+        }, url, retryCount);
+      } else if (normalized.includes("open/topmenu")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("topMenu", {
+            screen: "menu",
+          });
+        }, url, retryCount);
+      } else if (normalized.includes("positions/apps")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("positions");
+        }, url, retryCount);
       }
-
-      openFelicaPage();
     };
 
     Linking.getInitialURL().then((url) => {
@@ -97,10 +135,10 @@ export default function App() {
     StationListProvider,
     FavoriteStationProvider,
     TrainDelayDataProvider,
+    TrainMenuProvider,      // CurrentTrainProvider より先に置くことで useTrainMenu が使える
     CurrentTrainProvider,
     AreaInfoProvider,
     BusAndTrainDataProvider,
-    TrainMenuProvider,
     SheetProvider,
   ]);
   return (
@@ -108,13 +146,42 @@ export default function App() {
       <DeviceOrientationChangeProvider>
         <SafeAreaProvider>
           <StatusbarDetect />
-          <GestureHandlerRootView style={{ flex: 1 }}>
-            <ProviderTree>
-              <AppContainer />
-            </ProviderTree>
-          </GestureHandlerRootView>
+          <DensityScaleWrapper>
+            <GestureHandlerRootView style={{ flex: 1 }}>
+              <ProviderTree>
+                <AppContainer />
+              </ProviderTree>
+            </GestureHandlerRootView>
+          </DensityScaleWrapper>
         </SafeAreaProvider>
       </DeviceOrientationChangeProvider>
     </AppThemeProvider>
   );
 }
+
+/**
+ * 低密度ディスプレイ（DeX等）で全体を transform scale で拡大。
+ * Dimensions.get をパッチ済みなので、コンポーネントは内部サイズに合わせてレイアウトする。
+ */
+function DensityScaleWrapper({ children }: { children: React.ReactNode }) {
+  const { width, height } = useRealWindowDimensions();
+
+  if (!IS_LOW_DENSITY) {
+    return <>{children}</>;
+  }
+
+  return (
+    <View style={{ width, height, overflow: "hidden" }}>
+      <View
+        style={{
+          width: width / DEX_SCALE,
+          height: height / DEX_SCALE,
+          transform: [{ scale: DEX_SCALE }],
+          transformOrigin: "top left",
+        }}
+      >
+        {children}
+      </View>
+    </View>
+  );
+}

Apps.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { NavigationContainer } from "@react-navigation/native";
+import { NavigationContainer, DarkTheme, DefaultTheme } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Platform, ActivityIndicator, View, useColorScheme } from "react-native";
+import { Animated, Platform, ActivityIndicator, View, StyleSheet, StatusBar } from "react-native";
 import { useNavigationState } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { LinearGradient } from "expo-linear-gradient";
@@ -15,6 +15,8 @@ import lineColorList from "./assets/originData/lineColorList";
 import { stationIDPair } from "./lib/getStationList";
 import "./components/ActionSheetComponents/sheets";
 import { rootNavigationRef } from "./lib/rootNavigation";
+import { fixedColors } from "./lib/theme/colors";
+import { useThemeColors } from "./lib/theme";
 
 type RootTabParamList = {
   positions: undefined;
@@ -36,6 +38,17 @@ const Tab = createBottomTabNavigator<RootTabParamList>();
 export function AppContainer() {
   const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo();
   const { selectedLine } = useTrainMenu();
+  const [isExtraWindowOpen, setIsExtraWindowOpen] = React.useState(false);
+
+  // フェードアニメーション用 (0=通常, 1=追加ウィンドウ青)
+  const fadeAnim = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: isExtraWindowOpen ? 1 : 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [isExtraWindowOpen]);
 
   const lineColor = selectedLine && stationIDPair[selectedLine]
     ? lineColorList[stationIDPair[selectedLine]]
@@ -48,17 +61,14 @@ export function AppContainer() {
     const b = Math.round(parseInt(h.slice(4, 6), 16) * factor);
     return `#${[r, g, b].map((v) => Math.min(255, v).toString(16).padStart(2, "0")).join("")}`;
   };
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
+  const { isDark } = useThemeColors();
   const lineColorDark = lineColor ? darkenHex(lineColor, 0.78) : null;
   const linking = {
     prefixes: ["jrshikoku://"],
     config: {
       screens: {
         positions: {
-          screens: {
-            Apps: "positions/apps",
-          },
+          screens: {},
         },
         topMenu: {
           screens: {
@@ -107,8 +117,16 @@ export function AppContainer() {
     );
   }
   return (
-    <NavigationContainer ref={rootNavigationRef} linking={linking}>
-      {/* @ts-expect-error - Tab.Navigator type definition issue */}
+    <NavigationContainer
+      ref={rootNavigationRef}
+      linking={linking}
+      theme={isDark ? DarkTheme : DefaultTheme}
+      onStateChange={(state) => {
+        const activeRoute = state?.routes?.[state?.index ?? 0];
+        const hasExtra = (activeRoute?.state?.index ?? 0) > 0;
+        setIsExtraWindowOpen(hasExtra);
+      }}
+    >
       <Tab.Navigator
         initialRouteName="topMenu"
         screenOptions={({ route }) => {
@@ -118,21 +136,34 @@ export function AppContainer() {
           const defaultInactive = isDark ? "#8e8e93" : "#8e8e93";
           return {
             lazy: false,
-            tabBarHideOnKeyboard: Platform.OS === "android",
-            animation: "shift",
-            tabBarActiveTintColor: showGradient ? "white" : defaultActive,
-            tabBarInactiveTintColor: showGradient ? "rgba(255,255,255,0.75)" : defaultInactive,
-            tabBarStyle: showGradient
-              ? { backgroundColor: "transparent" }
-              : { backgroundColor: defaultBg },
-            tabBarBackground: showGradient ? () => (
-              <LinearGradient
-                colors={[lineColor!, lineColorDark!]}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 0, y: 1 }}
-                style={{ flex: 1 }}
-              />
-            ) : undefined,
+            sceneContainerStyle: { backgroundColor: defaultBg },
+            tabBarActiveTintColor: (showGradient || isExtraWindowOpen) ? "white" : defaultActive,
+            tabBarInactiveTintColor: (showGradient || isExtraWindowOpen) ? "rgba(255,255,255,0.75)" : defaultInactive,
+            tabBarStyle: { backgroundColor: "transparent" },
+            tabBarBackground: () => (
+              <View style={{ flex: 1 }}>
+                {/* 路線カラー or デフォルト背景 */}
+                {showGradient ? (
+                  <LinearGradient
+                    colors={[lineColor!, lineColorDark!]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{ ...StyleSheet.absoluteFillObject }}
+                  />
+                ) : (
+                  <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: defaultBg }} />
+                )}
+                {/* 追加ウィンドウ時の青グラデーション（フェードイン/アウト） */}
+                <Animated.View style={{ ...StyleSheet.absoluteFillObject, opacity: fadeAnim }}>
+                  <LinearGradient
+                    colors={[fixedColors.primary, fixedColors.primaryDark]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{ flex: 1 }}
+                  />
+                </Animated.View>
+              </View>
+            ),
           };
         }}
       >

GeneralWebView.tsx

@@ -1,9 +1,18 @@
-import React, { CSSProperties } from "react";
-import { Alert, BackHandler, View, ViewProps } from "react-native";
+import React from "react";
+import { Alert, ActivityIndicator, AppState, AppStateStatus, BackHandler, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { WebView } from "react-native-webview";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { BigButton } from "./components/atom/BigButton";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { useThemeColors } from "@/lib/theme";
+import { AS } from "./storageControl";
+import { STORAGE_KEYS } from "@/constants";
+import {
+  DEFAULT_JR_DATA_SYSTEM_ENV,
+  normalizeJrDataSystemEnvironment,
+  rewriteJrDataSystemUrl,
+} from "@/lib/jrDataSystemEnvironment";
+
 export default ({ route }) => {
   if (!route.params) {
     return null;
@@ -13,6 +22,88 @@ export default ({ route }) => {
   const { fixed } = useThemeColors();
   const webViewRef = React.useRef<WebView>(null);
   const [canGoBack, setCanGoBack] = React.useState(false);
+  const [selectedEnvironment, setSelectedEnvironment] = React.useState(
+    DEFAULT_JR_DATA_SYSTEM_ENV,
+  );
+  const [resolvedUri, setResolvedUri] = React.useState("");
+  const [isEnvironmentReady, setIsEnvironmentReady] = React.useState(false);
+  const hasAlerted = React.useRef(false);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState("");
+  // WebViewをforce remountするためのkey
+  const [webViewKey, setWebViewKey] = React.useState(0);
+  // バックグラウンド移行時刻の記録
+  const backgroundedAt = React.useRef<number | null>(null);
+  // RN-side watchdog: WebViewプロセスの死活確認用
+  const lastPongAt = React.useRef<number>(Date.now());
+  const isLoadingRef = React.useRef(true);
+  const hasErrorRef = React.useRef(false);
+  // コンテンツ消失検知用: bodyLen の最大値と連続白画面カウント
+  const maxBodyLenRef = React.useRef(0);
+  const blankCountRef = React.useRef(0);
+
+  const remount = React.useCallback(() => {
+    lastPongAt.current = Date.now(); // remount直後に誤検知しないようリセット
+    maxBodyLenRef.current = 0;
+    blankCountRef.current = 0;
+    setHasError(false);
+    hasErrorRef.current = false;
+    setIsLoading(true);
+    isLoadingRef.current = true;
+    setWebViewKey((k) => k + 1);
+  }, []);
+
+  React.useEffect(() => {
+    let isMounted = true;
+
+    const applyEnvironment = (value: unknown) => {
+      if (!isMounted) return;
+      const nextEnvironment = normalizeJrDataSystemEnvironment(value);
+      setSelectedEnvironment(nextEnvironment);
+      setResolvedUri(
+        rewriteJrDataSystemUrl(
+          typeof uri === "string" ? uri : "",
+          nextEnvironment,
+        ),
+      );
+      setIsEnvironmentReady(true);
+    };
+
+    AS.getItem(STORAGE_KEYS.JR_DATA_SYSTEM_ENV)
+      .then(applyEnvironment)
+      .catch(() => applyEnvironment(DEFAULT_JR_DATA_SYSTEM_ENV));
+
+    return () => {
+      isMounted = false;
+    };
+  }, [uri]);
+
+  const handleReload = () => {
+    lastPongAt.current = Date.now();
+    setHasError(false);
+    hasErrorRef.current = false;
+    setIsLoading(true);
+    isLoadingRef.current = true;
+    setWebViewKey((k) => k + 1);
+  };
+
+  // AppState監視: バックグラウンド10秒超で復帰したらWebViewを再マウント
+  React.useEffect(() => {
+    const onAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState.match(/inactive|background/)) {
+        backgroundedAt.current = Date.now();
+      } else if (nextState === "active" && backgroundedAt.current !== null) {
+        const elapsed = Date.now() - backgroundedAt.current;
+        backgroundedAt.current = null;
+        if (elapsed > 10_000) {
+          remount();
+        }
+      }
+    };
+    const subscription = AppState.addEventListener("change", onAppStateChange);
+    return () => subscription.remove();
+  }, [remount]);
 
   useFocusEffect(
     React.useCallback(() => {
@@ -31,27 +122,171 @@ export default ({ route }) => {
   );
   return (
     <View style={{ height: "100%", backgroundColor: fixed.primary }}>
-      <WebView
-        source={{ uri }}
-        allowsBackForwardNavigationGestures
-        ref={webViewRef}
-        onNavigationStateChange={(navState) => {
+      {isEnvironmentReady && (
+        <WebView
+          key={webViewKey}
+          source={{ uri: resolvedUri }}
+          contentMode="mobile"
+          allowsBackForwardNavigationGestures
+          ref={webViewRef}
+          onLoadStart={() => {
+            isLoadingRef.current = true;
+            setHasError(false);
+            hasErrorRef.current = false;
+            maxBodyLenRef.current = 0;
+            blankCountRef.current = 0;
+          }}
+          onLoadEnd={() => {
+            setIsLoading(false);
+            isLoadingRef.current = false;
+            lastPongAt.current = Date.now();
+          }}
+          onError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            setIsLoading(false);
+            isLoadingRef.current = false;
+            setHasError(true);
+            hasErrorRef.current = true;
+            setErrorMessage(nativeEvent.description || "ページを読み込めませんでした");
+          }}
+          onHttpError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            if (nativeEvent.statusCode >= 500) {
+              setIsLoading(false);
+              isLoadingRef.current = false;
+              setHasError(true);
+              hasErrorRef.current = true;
+              setErrorMessage(`サーバーエラー (${nativeEvent.statusCode})`);
+            }
+          }}
+          onRenderProcessGone={() => {
+            // クラッシュ・メモリ回収どちらも自動remount
+            remount();
+          }}
+          // iOS: コンテンツプロセスがメモリ圧迫で終了した場合
+          onContentProcessDidTerminate={() => remount()}
+          onShouldStartLoadWithRequest={(request) => {
+            if (request.isTopFrame === false) {
+              return true;
+            }
+
+            const rewrittenUrl = rewriteJrDataSystemUrl(
+              request.url,
+              selectedEnvironment,
+            );
+            if (rewrittenUrl !== request.url) {
+              setResolvedUri(rewrittenUrl);
+              return false;
+            }
+            return true;
+          }}
+          onNavigationStateChange={(navState) => {
           setCanGoBack(navState.canGoBack);
+          // SPA内遷移中は白画面誤検知を防ぐためblankCountをリセット
+          if (navState.loading) blankCountRef.current = 0;
           if (navState.url === "https://unyohub.2pd.jp/integration/succeeded.php") {
-            goBack();
-            Alert.alert("鉄道運用HUBへの投稿完了", "運用HUBからのこのアプリへのデータ反映には暫く時間がかかりますので、しばらくお待ちください。", [
-              { text: "完了" },
-            ]);
+            webViewRef.current?.goBack();
+            if (!hasAlerted.current) {
+              hasAlerted.current = true;
+              Alert.alert("鉄道運用HUBへの投稿完了", "運用HUBからのこのアプリへのデータ反映には暫く時間がかかりますので、しばらくお待ちください。", [
+                { text: "完了" },
+              ]);
+            }
           }
         }}
-        onMessage={(event) => {
-          const { data } = event.nativeEvent;
-          const { type } = JSON.parse(data);
-          if (type === "back") return webViewRef.current?.goBack();
-          if (type === "windowClose") return goBack();
-        }}
-      />
-      {useExitButton && <BigButton onPress={goBack} string="閉じる" />}
+          onMessage={(event) => {
+            const { data } = event.nativeEvent;
+            const parsed = JSON.parse(data);
+            const { type } = parsed;
+            if (type === "pong") {
+              lastPongAt.current = Date.now();
+              const bodyLen: number = parsed.bodyLen ?? 0;
+              // innerTextベース: 最大値を更新
+              if (bodyLen > maxBodyLenRef.current) maxBodyLenRef.current = bodyLen;
+              // 一度200文字超の表示テキストがあった後に20文字未満になったら白画面と判定
+              // SPA遷移中の一時的な空白を避けるため3回連続(15秒)で発火
+              if (maxBodyLenRef.current > 200 && bodyLen < 20) {
+                blankCountRef.current += 1;
+                if (blankCountRef.current >= 3) {
+                  blankCountRef.current = 0;
+                  maxBodyLenRef.current = 0;
+                  remount();
+                }
+              } else {
+                blankCountRef.current = 0;
+              }
+              return;
+            }
+            if (type === "back") return webViewRef.current?.goBack();
+            if (type === "windowClose") return goBack();
+          }}
+        />
+      )}
+      {isLoading && !hasError && (
+        <View style={wvStyles.loadingOverlay} pointerEvents="none">
+          <ActivityIndicator size="large" color="#fff" />
+        </View>
+      )}
+      {hasError && (
+        <View style={wvStyles.errorOverlay}>
+          <MaterialCommunityIcons name="wifi-off" size={48} color="#ccc" />
+          <Text style={wvStyles.errorText}>{errorMessage}</Text>
+          <TouchableOpacity style={wvStyles.reloadButton} onPress={handleReload}>
+            <MaterialCommunityIcons name="reload" size={18} color="#fff" />
+            <Text style={wvStyles.reloadButtonText}>再読み込み</Text>
+          </TouchableOpacity>
+          {useExitButton && (
+            <TouchableOpacity style={wvStyles.backButton} onPress={goBack}>
+              <Text style={wvStyles.backButtonText}>閉じる</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+      {useExitButton && !hasError && <BigButton onPress={goBack} string="閉じる" />}
     </View>
   );
 };
+
+const wvStyles = StyleSheet.create({
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0,0,0,0.25)",
+  },
+  errorOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#1a1a2e",
+    gap: 16,
+    paddingHorizontal: 32,
+  },
+  errorText: {
+    color: "#aaa",
+    fontSize: 14,
+    textAlign: "center",
+  },
+  reloadButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: "#0099CC",
+    borderRadius: 10,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  reloadButtonText: {
+    color: "#fff",
+    fontSize: 15,
+    fontWeight: "bold",
+  },
+  backButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+  },
+  backButtonText: {
+    color: "#888",
+    fontSize: 14,
+  },
+});

MenuPage.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useWindowDimensions, Platform } from "react-native";
+import { useWindowDimensions, Platform, useColorScheme } from "react-native";
 import Constants from "expo-constants";
+import { useResponsive } from "@/lib/responsive";
 
 import { Dimensions, StatusBar } from "react-native";
 
@@ -27,9 +28,12 @@ const Stack = createStackNavigator();
 export function MenuPage() {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { height, width } = useWindowDimensions();
+  const { verticalScale } = useResponsive();
   const tabBarHeight = useBottomTabBarHeight();
   const navigation = useNavigation<any>();
   const { addListener } = navigation;
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
   useEffect(() => {
     AS.getItem(STORAGE_KEYS.START_PAGE)
       .then((res) => {
@@ -63,8 +67,8 @@ export function MenuPage() {
       height -
       tabBarHeight +
       (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
-      100 -
-      ((((width / 100) * 80) / 20) * 9 + 10 + 30);
+      verticalScale(100) -
+      ((((width / 100) * 80) / 20) * 9 + verticalScale(10) + verticalScale(30));
     setMapHeight(MapHeight);
     mapHeightRef.current = MapHeight;
   }, [height, tabBarHeight, width]);
@@ -80,9 +84,16 @@ export function MenuPage() {
     setMapFullHeight(MapFullHeight);
   }, [height, tabBarHeight, width]);
   useEffect(() => {
-    const unsubscribe = addListener("tabPress", (e) => {
+    const unsubscribe = addListener("tabPress", (e: any) => {
+      if (navigation.isFocused() && stackNavRef.current) {
+        if (stackNavRef.current.getState()?.index > 0) {
+          e.preventDefault();
+          stackNavRef.current.goBack();
+          return;
+        }
+      }
       scrollRef.current?.scrollTo({
-        y: mapHeightRef.current - 80,
+        y: mapHeightRef.current - verticalScale(80),
         animated: true,
       });
       setMapMode(false);
@@ -102,8 +113,17 @@ export function MenuPage() {
 
     return unsubscribe;
   }, [navigation]);
+  const stackNavRef = useRef<any>(null);
+
   return (
-    <Stack.Navigator id={null}>
+    <Stack.Navigator
+      id={null}
+      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
+      screenListeners={({ navigation: stackNav }) => {
+        stackNavRef.current = stackNav;
+        return {};
+      }}
+    >
       <Stack.Screen
         name="menu"
         options={{

README.md

@@ -175,7 +175,63 @@ export const API_ENDPOINTS = {
 };
 ```
 
-## 📱 ビルド
+## <EFBFBD> 外部からのアプリ起動（ディープリンク）
+
+本アプリは複数の方法で外部から起動・画面遷移できます。
+
+### カスタムURLスキーム
+
+スキーム `jrshikoku://` を使って特定の画面を直接開くことができます。
+
+| URL | 遷移先 |
+|---|---|
+| `jrshikoku://open/felica` | FeliCa履歴ページ |
+| `jrshikoku://open/traininfo` | 遅延速報EX |
+| `jrshikoku://open/operation` | 運行情報 |
+| `jrshikoku://open/settings` | 設定 |
+| `jrshikoku://open/topmenu` | トップメニュー |
+| `jrshikoku://positions/apps` | 走行位置 |
+
+URLの処理は `App.tsx` の `routeFromUrl` で実装されています。
+
+### Androidウィジェット
+
+ホーム画面に配置可能なウィジェットからアプリを起動できます。
+
+| ウィジェット名 | 説明 |
+|---|---|
+| `JR_shikoku_train_info` | 遅延速報EX |
+| `JR_shikoku_apps_shortcut` | クイックアクセス（各機能へのショートカットタイル） |
+| `JR_shikoku_felica_balance` | ICカード残高表示 |
+| `JR_shikoku_info` | 運行情報 |
+| `JR_shikoku_train_strange` | 怪レい列車 |
+
+ウィジェットのタップ時は `jrshikoku://` スキームでアプリ内画面へ遷移します。
+実装: `components/AndroidWidget/widget-task-handler.tsx`
+
+### iOSウィジェット（WidgetKit）
+
+WidgetKit拡張としてホーム画面ウィジェットを提供しています。Live Activities にも対応しています。
+設定: `targets/widget/Info.plist`
+
+### プッシュ通知
+
+通知タップ時に対応する画面へ遷移します。
+
+| アクション | 遷移先 |
+|---|---|
+| `delay-ex` | 遅延速報EX |
+| `strange-train` | 走行位置（怪レい列車） |
+| `information` | 運行情報 |
+
+実装: `stateBox/useNotifications.tsx`
+
+### NFC（FeliCa）
+
+NFC-Fを利用した交通系ICカードの読み取りに対応しています（Android）。アプリ内からスキャンを開始する形式です。
+実装: `modules/expo-felica-reader/`
+
+## <20>📱 ビルド
 
 ```bash
 # APKビルド（Android）

StatusbarDetect.tsx

@@ -1,10 +1,8 @@
 import React, { FC } from "react";
-import { Platform, StatusBar, useColorScheme } from "react-native";
+import { Platform, StatusBar } from "react-native";
 
 const StatusbarDetect: FC = () => {
-  const isDark = useColorScheme() === "dark";
-  const barStyle = isDark ? "light-content" : "dark-content";
-  return <StatusBar barStyle={barStyle} translucent backgroundColor="transparent" />;
+  return <StatusBar barStyle="light-content" translucent backgroundColor="transparent" />;
 };
 
 export default StatusbarDetect;

Top.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
+import { useColorScheme } from "react-native";
 import Apps from "./components/Apps";
 import TrainBase from "./components/trainbaseview";
 import HowTo from "./howto";
@@ -15,10 +16,13 @@ import { news } from "./config/newsUpdate";
 import { Linking, Platform } from "react-native";
 import GeneralWebView from "./GeneralWebView";
 import { StationDiagramView } from "@/components/StationDiagram/StationDiagramView";
+import { positionsStackNavRef } from "./lib/rootNavigation";
 const Stack = createStackNavigator();
 export const Top = () => {
   const { webview } = useCurrentTrain();
-  const { navigate, addListener, isFocused } = useNavigation();
+  const { navigate, addListener, isFocused } = useNavigation<any>();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
 
   //地図用
   const { mapSwitch } = useTrainMenu();
@@ -35,14 +39,22 @@ export const Top = () => {
     return unsubscribe;
   }, []);
 
-  const goToTrainMenu = useCallback(() => {
+  const stackNavRef = positionsStackNavRef;
+
+  const goToTrainMenu = useCallback((e: any) => {
     if (Platform.OS === "web") {
       Linking.openURL("https://train.jr-shikoku.co.jp/");
       setTimeout(() => navigate("topMenu", { screen: "menu" }), 100);
       return;
     }
-    if (!isFocused()) navigate("positions", { screen: "Apps" });
-    else if (mapSwitchRef.current == "true")
+    if (!isFocused()) return;
+    const stackNav = stackNavRef.current;
+    if (stackNav && stackNav.getState()?.index > 0) {
+      e.preventDefault();
+      stackNav.goBack();
+      return;
+    }
+    if (mapSwitchRef.current == "true")
       navigate("positions", { screen: "trainMenu" });
     else webview.current?.injectJavaScript(`AccordionClassEvent()`);
     return;
@@ -54,7 +66,14 @@ export const Top = () => {
   }, [addListener, goToTrainMenu]);
 
   return (
-    <Stack.Navigator id={null}>
+    <Stack.Navigator
+      id={null}
+      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
+      screenListeners={({ navigation: stackNav }) => {
+        stackNavRef.current = stackNav;
+        return {};
+      }}
+    >
       <Stack.Screen
         name="Apps"
         options={{

app.json

@@ -24,7 +24,7 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "58",
+      "buildNumber": "63",
       "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "appleTeamId": "54CRDT797G",
@@ -39,7 +39,10 @@
         ],
         "ITSAppUsesNonExemptEncryption": false,
         "NSSupportsLiveActivities": true,
-        "NSSupportsLiveActivitiesFrequentUpdates": true
+        "NSSupportsLiveActivitiesFrequentUpdates": true,
+        "UIBackgroundModes": [
+          "audio"
+        ]
       },
       "entitlements": {
         "com.apple.developer.nfc.readersession.formats": [
@@ -105,6 +108,7 @@
     },
     "plugins": [
       "./plugins/with-android-local-properties",
+      "./plugins/with-nfc-widget-guard",
       "@bacons/apple-targets",
       [
         "expo-font",
@@ -140,17 +144,7 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "JR四国列車遅延速報EXのウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
-              "previewImage": "./assets/icon.png",
-              "updatePeriodMillis": 1800000,
-              "resizeMode": "horizontal|vertical"
-            },
-            {
-              "name": "JR_shikoku_train_strange",
-              "label": "怪レい列車",
-              "minWidth": "70dp",
-              "minHeight": "50dp",
-              "description": "JR四国怪レい列車BOTのウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_train_info.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             },
@@ -160,7 +154,7 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "JR四国運行情報のウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_info.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             },
@@ -170,7 +164,7 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "JR四国非公式アプリの各種リンクを表示するウィジェットです。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_apps_shortcut.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             },
@@ -180,7 +174,7 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "Felica対応ICカードの残高をホーム画面に表示するウィジェットです。タップでスキャン画面を開きます。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_felica_balance.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             }
@@ -509,6 +503,454 @@
               "foregroundImage": "./assets/icons/ef210.png",
               "backgroundColor": "#001413"
             }
+          },
+          {
+            "name": "32ns",
+            "ios": "./assets/icons/s32ns.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32ns.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32s",
+            "ios": "./assets/icons/s32s.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32s.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32kpuy1",
+            "ios": "./assets/icons/s32kpuy1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32kpuy1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32kpuy2",
+            "ios": "./assets/icons/s32kpuy2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32kpuy2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32thtk",
+            "ios": "./assets/icons/s32thtk.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32thtk.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32oni1",
+            "ios": "./assets/icons/s32oni1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32oni1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32oni1k",
+            "ios": "./assets/icons/s32oni1k.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32oni1k.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32to4",
+            "ios": "./assets/icons/s32to4.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32to4.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32toai",
+            "ios": "./assets/icons/s32to_ai.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32to_ai.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54s",
+            "ios": "./assets/icons/s54s.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54s.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54to0ys",
+            "ios": "./assets/icons/s54to0ys.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54to0ys.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54nany1",
+            "ios": "./assets/icons/s54nany1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54nany1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54nany2",
+            "ios": "./assets/icons/s54nany2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54nany2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54smek1",
+            "ios": "./assets/icons/s32smek1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32smek1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "40s",
+            "ios": "./assets/icons/s40.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s40.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "40w",
+            "ios": "./assets/icons/w40.png",
+            "android": {
+              "foregroundImage": "./assets/icons/w40.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185cm",
+            "ios": "./assets/icons/s185cm.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185cm.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185g",
+            "ios": "./assets/icons/s185g.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185g.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185tu_uzu",
+            "ios": "./assets/icons/s185tu_uzu.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185tu_uzu.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185ap1",
+            "ios": "./assets/icons/s185ap1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185ap1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185mm2",
+            "ios": "./assets/icons/s185mm2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185mm2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185ym2",
+            "ios": "./assets/icons/s185ym2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185ym2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1200",
+            "ios": "./assets/icons/s1200.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1200.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1201",
+            "ios": "./assets/icons/s1201.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1201.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1501",
+            "ios": "./assets/icons/s1501.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1501.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1550",
+            "ios": "./assets/icons/s1550.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1550.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1551",
+            "ios": "./assets/icons/s1551.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1551.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000uwa",
+            "ios": "./assets/icons/s2000_uwa.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000_uwa.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000nl",
+            "ios": "./assets/icons/s2000nl.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000nl.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000-3",
+            "ios": "./assets/icons/s2000-3.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000-3.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000ganp1",
+            "ios": "./assets/icons/s2000ganp1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000ganp1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2600apr",
+            "ios": "./assets/icons/s2600apr.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2600apr.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2600apb",
+            "ios": "./assets/icons/s2600apb.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2600apb.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700asi",
+            "ios": "./assets/icons/s2700_asi.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700_asi.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700smn",
+            "ios": "./assets/icons/s2700_smn.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700_smn.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700uzu",
+            "ios": "./assets/icons/s2700_uzu.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700_uzu.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700apy1",
+            "ios": "./assets/icons/s2700apy1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700apy1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700apr1",
+            "ios": "./assets/icons/s2700apr1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700apr1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "3600",
+            "ios": "./assets/icons/s3600.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s3600.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "6000f",
+            "ios": "./assets/icons/s6000f.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s6000f.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "7001",
+            "ios": "./assets/icons/s7001.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s7001.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "8001nr",
+            "ios": "./assets/icons/s8001nr.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s8001nr.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9000",
+            "ios": "./assets/icons/s9000.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s9000.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640ht",
+            "ios": "./assets/icons/tosa9640ht.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640ht.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640mo1",
+            "ios": "./assets/icons/tosa9640mo1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640mo1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640mo2",
+            "ios": "./assets/icons/tosa9640mo2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640mo2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640tyg",
+            "ios": "./assets/icons/tosa9640tyg.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640tyg.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640tyb",
+            "ios": "./assets/icons/tosa9640tyb.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640tyb.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640jbl",
+            "ios": "./assets/icons/tosa9640jbl.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640jbl.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "W741",
+            "ios": "./assets/icons/w741.png",
+            "android": {
+              "foregroundImage": "./assets/icons/w741.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210a",
+            "ios": "./assets/icons/ef210a.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210a.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210n",
+            "ios": "./assets/icons/ef210n.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210n.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210n1",
+            "ios": "./assets/icons/ef210n1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210n1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210l3",
+            "ios": "./assets/icons/ef210l3.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210l3.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "T45000",
+            "ios": "./assets/icons/s150001to.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s150001to.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "Wk141",
+            "ios": "./assets/icons/w141jg.png",
+            "android": {
+              "foregroundImage": "./assets/icons/w141jg.png",
+              "backgroundColor": "#001413"
+            }
           }
         ]
       ],
@@ -537,4 +979,4 @@
       ]
     ]
   }
-}
+}

assets/icons/icons.ts

@@ -1,45 +1,124 @@
+export const series: { key: string; title: string; ids: string[] }[] = [
+  { key: "32",     title: "キハ32形",          ids: ["32ns", "32s", "32kpuy1", "32kpuy2", "32tht", "32thtk", "32oni1", "32oni1k", "32toai", "32at"] },
+  { key: "54",     title: "キハ54形",          ids: ["54s", "54st", "54nany1", "54nany2", "54smek1"] },
+  { key: "40",     title: "キハ40",            ids: ["40s", "40w"] },
+  { key: "185",    title: "キハ185系",         ids: ["185mrt", "185cm", "185g", "185tu", "185tu_uzu", "185iyor", "185iyoy", "185toai", "185mm1", "185mm2", "185ym1", "185ym2", "185ap1"] },
+  { key: "1000",   title: "1000形",            ids: ["1000"] },
+  { key: "1200",   title: "1200形・1201形",    ids: ["1200", "1201"] },
+  { key: "1500",   title: "1500形",            ids: ["1501", "1550", "1551"] },
+  { key: "2000",   title: "2000系・N2000系",   ids: ["2000asi", "2000uwa", "N2000", "2000nl", "2000-3", "2000ganp1", "2002a"] },
+  { key: "2600",   title: "2600系",            ids: ["2600", "2600apr", "2600apb"] },
+  { key: "2700",   title: "2700系",            ids: ["2700", "2700asi", "2700smn", "2700uzu", "2700apy", "2700apr", "2700apy1", "2700apr1"] },
+  { key: "3600",   title: "3600系",            ids: ["3600"] },
+  { key: "5000",   title: "5000系",            ids: ["5001", "5001k"] },
+  { key: "6000",   title: "6000系",            ids: ["6000f"] },
+  { key: "7000",   title: "7000系",            ids: ["7000"] },
+  { key: "7200",   title: "7200系",            ids: ["7200"] },
+  { key: "8000",   title: "8000系",            ids: ["8000no", "8000nr", "8001nr", "8000ap", "8000nn"] },
+  { key: "8600",   title: "8600系",            ids: ["8600"] },
+  { key: "9000",   title: "9000系",            ids: ["9000"] },
+  { key: "9640",   title: "9640形",            ids: ["9640", "9640ht", "9640mo1", "9640mo2", "9640tyg", "9640tyb", "9640jgr", "9640jbl"] },
+  { key: "other",  title: "JR西日本・他",      ids: ["285", "213w", "W741", "Wk141", "EF65", "EF210a", "EF210n", "EF210n1", "EF210l3", "T45000"] },
+];
+
 export default () =>{
   return [
-    { "id": "32", "name": "キハ32形", "icon": require("./32.png") },
-    { "id": "32kpuuy", "name": "キハ32形かっぱうようよ号", "icon": require("./32kpuuy.png") },
+    //{ "id": "32", "name": "キハ32形", "icon": require("./32.png") },
+    { "id": "32ns", "name": "キハ32形(標準色)", "icon": require("./s32ns.png") },
+    { "id": "32s", "name": "キハ32形(新塗装)", "icon": require("./s32s.png") },
+    //{ "id": "32kpuuy", "name": "キハ32形かっぱうようよ号", "icon": require("./32kpuuy.png") },
+    { "id": "32kpuy1", "name": "キハ32形かっぱうようよ号①", "icon": require("./s32kpuy1.png") },
+    { "id": "32kpuy2", "name": "キハ32形かっぱうようよ号②", "icon": require("./s32kpuy2.png") },
     { "id": "32tht", "name": "キハ32形新幹線ホビートレイン", "icon": require("./32tht.png") },
+    { "id": "32thtk", "name": "キクハ32形新幹線ホビートレイン", "icon": require("./s32thtk.png") },
+    { "id": "32oni1", "name": "キハ32形特別塗装①", "icon": require("./s32oni1.png") },
+    { "id": "32oni1k", "name": "キハ32形特別塗装①(連結)", "icon": require("./s32oni1k.png") },
+    //{ "id": "32to4", "name": "キハ32形(土讃色)", "icon": require("./s32to4.png") },
+    { "id": "32toai", "name": "キクハ32形藍よしのがわトロッコ", "icon": require("./s32to_ai.png") },
     { "id": "32at", "name": "キクハ32形アンパンマントロッコ", "icon": require("./32at.png") },
-    { "id": "54", "name": "キハ54形", "icon": require("./54.png") },
+    //{ "id": "54", "name": "キハ54形", "icon": require("./54.png") },
+    { "id": "54s", "name": "キハ54形(四国色)", "icon": require("./s54s.png") },
     { "id": "54st", "name": "キハ54形しまんトロッコ", "icon": require("./54st.png") },
-    { "id": "40", "name": "キハ40", "icon": require("./40.png") },
+    //{ "id": "54to0ys", "name": "キハ54形(ゆとりすと)", "icon": require("./s54to0ys.png") },
+    { "id": "54nany1", "name": "キハ54形なんよ号①", "icon": require("./s54nany1.png") },
+    { "id": "54nany2", "name": "キハ54形なんよ号②", "icon": require("./s54nany2.png") },
+    { "id": "54smek1", "name": "キハ54形しまんトロッコ(連結)", "icon": require("./s32smek1.png") },
+    //{ "id": "40", "name": "キハ40", "icon": require("./40.png") },
+    { "id": "40s", "name": "キハ40(四国色)", "icon": require("./s40.png") },
+    { "id": "40w", "name": "キハ40(JR西日本色)", "icon": require("./w40.png") },
     { "id": "185mrt", "name": "キハ185系四国色", "icon": require("./s185_mrt.png") },
+    { "id": "185cm", "name": "キハ185系普通列車色", "icon": require("./s185cm.png") },
+    { "id": "185g", "name": "キハ185系(緑帯)", "icon": require("./s185g.png") },
     { "id": "185tu", "name": "キハ185系剣山色", "icon": require("./s185tu.png") },
+    { "id": "185tu_uzu", "name": "キハ185系剣山色(うずしお)", "icon": require("./s185tu_uzu.png") },
     { "id": "185iyor", "name": "キハ185系伊予灘ものがたり(赤)", "icon": require("./s185iyor.png") },
     { "id": "185iyoy", "name": "キハ185系伊予灘ものがたり(黄)", "icon": require("./s185iyoy.png") },
     { "id": "185toai", "name": "キハ185系藍よしのがわトロッコ", "icon": require("./s185to_ai.png") },
     { "id": "185mm1", "name": "キハ185系四国まんなか千年ものがたり(緑)", "icon": require("./s185mm1.png") },
+    { "id": "185mm2", "name": "キハ185系四国まんなか千年ものがたり(赤)", "icon": require("./s185mm2.png") },
     { "id": "185ym1", "name": "キハ185系時代の夜明けのものがたり(茶)", "icon": require("./s185ym1.png") },
+    { "id": "185ym2", "name": "キハ185系時代の夜明けのものがたり(緑)", "icon": require("./s185ym2.png") },
+    { "id": "185ap1", "name": "キハ185系アンパンマン", "icon": require("./s185ap1.png") },
     { "id": "1000", "name": "1000形", "icon": require("./s1000.png") },
-    { "id": "1200n", "name": "1200形", "icon": require("./s1200n.png") },
-    { "id": "1500", "name": "1500形", "icon": require("./s1500.png") },
-    { "id": "5001", "name": "5000系(二階建て)", "icon": require("./s5001.png") },
-    { "id": "5001k", "name": "5000系(平屋側)", "icon": require("./s5001k.png") },
-    { "id": "6000p", "name": "6000系", "icon": require("./s6000p.png") },
-    { "id": "7000", "name": "7000系", "icon": require("./s7000.png") },
-    { "id": "7200", "name": "7200系", "icon": require("./s7200.png") },
+    //{ "id": "1200n", "name": "1200形", "icon": require("./s1200n.png") },
+    { "id": "1200", "name": "1200形(旧塗装)", "icon": require("./s1200.png") },
+    { "id": "1201", "name": "1201形", "icon": require("./s1201.png") },
+    //{ "id": "1500", "name": "1500形", "icon": require("./s1500.png") },
+    { "id": "1501", "name": "1500形 1501", "icon": require("./s1501.png") },
+    { "id": "1550", "name": "1500形 1550", "icon": require("./s1550.png") },
+    { "id": "1551", "name": "1500形 1551", "icon": require("./s1551.png") },
     { "id": "2000asi", "name": "2000系", "icon": require("./s2000_asi.png") },
+    { "id": "2000uwa", "name": "2000系(宇和海色)", "icon": require("./s2000_uwa.png") },
     { "id": "N2000", "name": "N2000系", "icon": require("./s2000n.png") },
+    { "id": "2000nl", "name": "N2000系(南風色)", "icon": require("./s2000nl.png") },
+    { "id": "2000-3", "name": "N2000系(試作)", "icon": require("./s2000-3.png") },
+    { "id": "2000ganp1", "name": "2000系(復活塗装)", "icon": require("./s2000ganp1.png") },
     { "id": "2002a", "name": "2000系アンパンマン", "icon": require("./s2002a.png") },
     { "id": "2600", "name": "2600系" , "icon": require("./s2600.png")},
+    { "id": "2600apr", "name": "2600系アンパンマン(赤)", "icon": require("./s2600apr.png") },
+    { "id": "2600apb", "name": "2600系アンパンマン(青)", "icon": require("./s2600apb.png") },
     { "id": "2700", "name": "2700系", "icon": require("./s2700.png") },
+    { "id": "2700asi", "name": "2700系(あしずり色)", "icon": require("./s2700_asi.png") },
+    { "id": "2700smn", "name": "2700系(しまんと色)", "icon": require("./s2700_smn.png") },
+    { "id": "2700uzu", "name": "2700系(うずしお色)", "icon": require("./s2700_uzu.png") },
     { "id": "2700apy", "name": "2700系アンパンマン(黄)", "icon": require("./s2700apy.png") },
     { "id": "2700apr", "name": "2700系アンパンマン(赤)", "icon": require("./s2700apr.png") },
+    { "id": "2700apy1", "name": "2700系アンパンマン(黄)①", "icon": require("./s2700apy1.png") },
+    { "id": "2700apr1", "name": "2700系アンパンマン(赤)①", "icon": require("./s2700apr1.png") },
+    { "id": "3600", "name": "3600系", "icon": require("./s3600.png") },
+    { "id": "5001", "name": "5000系(二階建て)", "icon": require("./s5001.png") },
+    { "id": "5001k", "name": "5000系(平屋側)", "icon": require("./s5001k.png") },
+    //{ "id": "6000p", "name": "6000系", "icon": require("./s6000p.png") },
+    { "id": "6000f", "name": "6000系(Fライナー)", "icon": require("./s6000f.png") },
+    { "id": "7000", "name": "7000系", "icon": require("./s7000.png") },
+    //{ "id": "7001", "name": "7000系 7001", "icon": require("./s7001.png") },
+    { "id": "7200", "name": "7200系", "icon": require("./s7200.png") },
     { "id": "8000no", "name": "8000系(オレンジ)", "icon": require("./s8000no.png") },
     { "id": "8000nr", "name": "8000系(赤)", "icon": require("./s8000nr.png") },
+    { "id": "8001nr", "name": "8000系(赤) 8001", "icon": require("./s8001nr.png") },
     { "id": "8000ap", "name": "8000系アンパンマン", "icon": require("./s8000ap.png") },
     { "id": "8000nn", "name": "8000系リニューアル改", "icon": require("./s8000nn.png") },
     { "id": "8600", "name": "8600系", "icon": require("./s8600.png") },
+    { "id": "9000", "name": "9000系", "icon": require("./s9000.png") },
     { "id": "9640", "name": "9640形(白)", "icon": require("./tosa9640.png") },
+    { "id": "9640ht", "name": "9640形(赤帯)", "icon": require("./tosa9640ht.png") },
+    { "id": "9640mo1", "name": "9640形もみじ号①", "icon": require("./tosa9640mo1.png") },
+    { "id": "9640mo2", "name": "9640形もみじ号②", "icon": require("./tosa9640mo2.png") },
+    { "id": "9640tyg", "name": "9640形(緑)", "icon": require("./tosa9640tyg.png") },
+    { "id": "9640tyb", "name": "9640形(青)", "icon": require("./tosa9640tyb.png") },
     { "id": "9640jgr", "name": "9640形オープンデッキ(緑)", "icon": require("./tosa9640jgr.png") },
+    { "id": "9640jbl", "name": "9640形オープンデッキ(青)", "icon": require("./tosa9640jbl.png") },
     { "id": "285", "name": "285系サンライズ瀬戸", "icon": require("./w285.png") },
     { "id": "213w", "name": "ラ・マル・ド・ボァ", "icon": require("./w213w.png") },
+    { "id": "W741", "name": "DEC741系", "icon": require("./w741.png") },
+    { "id": "Wk141", "name": "キヤ141系", "icon": require("./w141jg.png") },
     { "id": "EF65", "name": "EF65", "icon": require("./ef65.png") },
-    { "id": "EF210", "name": "EF210", "icon": require("./ef210.png") },
+    //{ "id": "EF210", "name": "EF210", "icon": require("./ef210.png") },
+    { "id": "EF210a", "name": "EF210(300番代)", "icon": require("./ef210a.png") },
+    { "id": "EF210n", "name": "EF210(新塗装)", "icon": require("./ef210n.png") },
+    { "id": "EF210n1", "name": "EF210(新塗装①)", "icon": require("./ef210n1.png") },
+    { "id": "EF210l3", "name": "EF210(L3編成)", "icon": require("./ef210l3.png") },
+    { "id": "T45000", "name": "トラ45000", "icon": require("./s150001to.png") },
   ]
-  
-}
+
+}

assets/originData/spots.ts

@@ -0,0 +1,21 @@
+/**
+ * 観光スポットデータ
+ * StationNumber は "SP" プレフィックスで管理（路線とは別系統）
+ * Station_JP の先頭ドット（.）はダイヤデータのキーと一致させるための命名規則
+ */
+export default [
+  {
+    Station_JP: ".与島",
+    Station_EN: "Yoshima",
+    MyStation: "0",
+    StationNumber: null,
+    DispNum: "3",
+    StationTimeTable: "",
+    StationMap: "https://www.google.co.jp/maps/place/34.389472,133.816444",
+    JrHpUrl: "https://www.jb-honshi.co.jp/yoshimapa/",
+    jslodApi: "spot",
+    lat: 34.389472,
+    lng: 133.816444,
+    isSpot: true,
+  },
+];

components/ActionSheetComponents/EachTrainInfo.tsx

@@ -1,21 +1,35 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { EachTrainInfoCore } from "./EachTrainInfoCore";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 export const EachTrainInfo = ({ payload }) => {
-  if (!payload) return <></>;
   const actionSheetRef = useRef(null);
+  const maxHeight = useSheetMaxHeight();
+  const [sheetOpened, setSheetOpened] = useState(false);
+
+  const handleOpen = () => {
+    setSheetOpened(true);
+  };
+
+  const handleClose = () => {
+    setSheetOpened(false);
+  };
+
+  if (!payload) return <></>;
   return (
     <ActionSheet
       gestureEnabled={true}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
-      isModal={Platform.OS == "ios"}
-
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{ maxHeight }}
+      onOpen={handleOpen}
+      onClose={handleClose}
       //useBottomSafeAreaPadding={Platform.OS == "android"}
     >
-      <EachTrainInfoCore {...{ actionSheetRef, ...payload }} />
+      <EachTrainInfoCore {...{ actionSheetRef, sheetOpened, ...payload }} />
     </ActionSheet>
   );
 };

components/ActionSheetComponents/EachTrainInfo/DataConnectedButton.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { View, Text, TouchableWithoutFeedback, Alert } from "react-native";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 export const DataConnectedButton: FC<{
   i: string;
@@ -10,6 +11,7 @@ export const DataConnectedButton: FC<{
   const [station, se, time] = i.split(",");
   const { keyList } = useAllTrainDiagram();
   const { colors } = useThemeColors();
+  const { fontScale, moderateScale } = useResponsive();
   // 列番が有効かどうかをチェックする関数
   const isValidTrainNumber = (trainNum: string): boolean => {
     return keyList.includes(trainNum);
@@ -44,19 +46,19 @@ export const DataConnectedButton: FC<{
         >
           <View
             style={{
-              width: 35,
+              width: moderateScale(35),
               position: "relative",
               marginHorizontal: 15,
               flexDirection: "row",
               height: "10%",
             }}
           />
-          <Text style={{ fontSize:16, fontFamily: "DiaPro", color: colors.text }}>
+          <Text style={{ fontSize: fontScale(16), fontFamily: "DiaPro", color: colors.text }}>
             {se === "増" ? "⬐" : "↳"}
           </Text>
-          <Text style={{ fontSize: 20, color: colors.textLink }}>{time}</Text>
+          <Text style={{ fontSize: fontScale(20), color: colors.textLink }}>{time}</Text>
           <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 18, width: 50, color: colors.text }}>
+          <Text style={{ fontSize: fontScale(18), width: moderateScale(50), color: colors.text }}>
             {se === "増" ? "増結" : "解結"}
           </Text>
         </View>

components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/utils/seUtils";
 import type { SeTypes } from "@/types";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type seTypes =
   | "発編"
@@ -65,6 +66,7 @@ export const EachStopList: FC<props> = ({
   isNotService = false,
 }) => {
   const { colors: themeColors, isDark } = useThemeColors();
+  const { fontScale, moderateScale } = useResponsive();
   const [station, se, time, platformNum] = i.split(",") as [
     string,
     seTypes,
@@ -197,7 +199,7 @@ export const EachStopList: FC<props> = ({
       >
         <View
           style={{
-            width: 35,
+            width: moderateScale(35),
             position: "relative",
             marginHorizontal: 15,
             flexDirection: "row",
@@ -222,7 +224,7 @@ export const EachStopList: FC<props> = ({
           <View style={{ position: "relative", height: 25 }}>
             <Text
               style={{
-                fontSize: 20,
+                fontSize: fontScale(20),
                 position: "absolute",
                 textAlignVertical: "center",
                 left: -15,
@@ -247,7 +249,7 @@ export const EachStopList: FC<props> = ({
             <View style={{ flex: 1 }} />
             <Text
               style={{
-                fontSize: 20,
+                fontSize: fontScale(20),
                 color: colors.text,
                 fontStyle: isCommunity ? "italic" : "normal",
                 textAlignVertical: "center",
@@ -308,20 +310,21 @@ const TimeText: FC<{
   normalTextColor,
 }) => {
   const [seString, seType] = parseSeString(se);
+  const { fontScale, moderateScale } = useResponsive();
 
   return (
-    <View style={{ flexDirection: "row", alignItems: "center" }}>
+    <View style={{ flexDirection: "row", alignItems: "center", opacity: isBefore ? 0.5 : 1 }}>
       {!!currentTrainData?.delay &&
         currentTrainData?.delay != "入線" &&
         currentTrainData?.delay != 0 && (
           <Text
             style={{
-              fontSize: isBefore ? 14 : 15,
+              fontSize: fontScale(isBefore ? 14 : 15),
               marginVertical: isDouble ? -2 : 0,
               color: normalTextColor,
-              width: 60,
+              width: moderateScale(60),
               position: "absolute",
-              right: isBefore ? 125 : 120,
+              right: isBefore ? moderateScale(125) : moderateScale(120),
               textAlign: "right",
               textDecorationLine: "line-through",
               fontStyle: seType == "community" ? "italic" : "normal",
@@ -341,8 +344,8 @@ const TimeText: FC<{
       />
       <Text
         style={{
-          fontSize: isBefore ? 14 : 18,
-          width: 50,
+          fontSize: fontScale(isBefore ? 14 : 18),
+          width: moderateScale(50),
           color: textColor,
           marginVertical: isDouble ? -2 : 0,
           fontStyle: seType == "community" ? "italic" : "normal",
@@ -356,6 +359,7 @@ const TimeText: FC<{
 const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
   const { stn, se } = props;
   const { fixed } = useThemeColors();
+  const { fontScale } = useResponsive();
   const lineColor = lineColorList[stn.charAt(0)];
   const hasThrew =
     se == "通過" ||
@@ -375,7 +379,7 @@ const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
         style={{
           color: fixed.textOnPrimary,
           textAlign: "center",
-          fontSize: 10,
+          fontSize: fontScale(10),
           fontWeight: "bold",
         }}
       >
@@ -400,6 +404,7 @@ type StationTimeBoxType = {
 
 const StationTimeBox: FC<StationTimeBoxType> = (props) => {
   const { delay, textColor, seType, se, time, isDouble, isBefore } = props;
+  const { fontScale, moderateScale } = useResponsive();
   const dates = dayjs()
     .set("hour", parseInt(time.split(":")[0]))
     .set("minute", parseInt(time.split(":")[1]))
@@ -408,10 +413,10 @@ const StationTimeBox: FC<StationTimeBoxType> = (props) => {
   return (
     <Text
       style={{
-        fontSize: isBefore ? 14 : 20,
+        fontSize: fontScale(isBefore ? 14 : 20),
         marginVertical: isDouble ? -2 : 0,
         color: textColor,
-        width: 60,
+        width: moderateScale(60),
         fontStyle: seType == "community" ? "italic" : "normal",
       }}
     >

components/ActionSheetComponents/EachTrainInfo/LongHeader.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { ScrollView } from "react-native";
+import { View } from "react-native";
 import { TrainDataView } from "./TrainDataView";
 import { trainDataType } from "@/lib/trainPositionTextArray";
 import type { NavigateFunction } from "@/types";
@@ -18,12 +18,13 @@ export const LongHeader:FC<props> = ({
   navigate,
 }) => {
   return (
-    <ScrollView
+    <View
       style={{
         flexDirection: "row",
+        flex: 1,
+        width: "100%",
+        alignSelf: "stretch",
       }}
-      horizontal
-      pagingEnabled
     >
       <TrainDataView
         currentTrainData={currentTrainData}
@@ -33,6 +34,6 @@ export const LongHeader:FC<props> = ({
         navigate={navigate}
         key={"LongHeader"}
       />
-    </ScrollView>
+    </View>
   );
 };

components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

@@ -1,7 +1,8 @@
 import { trainPosition, trainDataType } from "@/lib/trainPositionTextArray";
 import React, { FC } from "react";
-import { View, Text, TextStyle, ViewStyle } from "react-native";
+import { View, Text, ViewStyle } from "react-native";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type stateBox = {
   currentTrainData: trainDataType | undefined;
@@ -23,6 +24,7 @@ export const PositionBox: FC<stateBox> = (props) => {
     lineNumber,
   } = props;
   const { colors } = useThemeColors();
+  const { fontScale } = useResponsive();
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -49,11 +51,11 @@ export const PositionBox: FC<stateBox> = (props) => {
   }
   return (
     <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
-      <Text style={{ fontSize: 12, color: colors.textAccent }}>{title}</Text>
+      <Text style={{ fontSize: fontScale(12), color: colors.textAccent }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
         {firstText && (
-          <Text style={[mode == 2 ? boxTextStyle2 : (isBetween ?  boxTextStyle : boxTextStyleBig), { color: colors.textAccent }]}>
+          <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : (isBetween ? { fontSize: fontScale(25), textAlign: "right" as const } : { fontSize: fontScale(28), textAlign: "right" as const }), { color: colors.textAccent }]}>
             {firstText}
           </Text>
         )}
@@ -63,7 +65,7 @@ export const PositionBox: FC<stateBox> = (props) => {
           </Text>
         )}
         {secondText && (
-          <Text style={[mode == 2 ? boxTextStyle2 :(isBetween ?  boxTextStyle : boxTextStyleMini), { color: colors.textAccent }]}>
+          <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } :(isBetween ? { fontSize: fontScale(25), textAlign: "right" as const } : { fontSize: fontScale(16), textAlign: "right" as const }), { color: colors.textAccent }]}>
             {secondText}
           </Text>
         )}
@@ -72,8 +74,8 @@ export const PositionBox: FC<stateBox> = (props) => {
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
           <Text
             style={{
-              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
-              fontSize: 10,
+              ...(mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }),
+              fontSize: fontScale(10),
               color: colors.textAccent,
             }}
           >
@@ -97,23 +99,3 @@ const boxStyle2: ViewStyle = {
   padding: 5,
   margin: 5,
 };
-const boxTextStyle2: TextStyle = {
-  fontSize: 18,
-  textAlign: "right",
-};
-const boxTextStyleBig: TextStyle = {
-  fontSize: 28,
-  textAlign: "right",
-};
-
-
-const boxTextStyleMini: TextStyle = {
-  fontSize: 16,
-  textAlign: "right",
-};
-
-
-const boxTextStyle: TextStyle = {
-  fontSize: 25,
-  textAlign: "right",
-};

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { View, Text, LayoutAnimation, TouchableOpacity } from "react-native";
+import { View, Text, TouchableOpacity } from "react-native";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 export const ScrollStickyContent = (props) => {
   const { currentTrainData, showThrew, setShowThrew, haveThrough } = props;
   const { colors } = useThemeColors();
+  const { fontScale } = useResponsive();
   return (
     <View
       style={{
@@ -22,13 +24,13 @@ export const ScrollStickyContent = (props) => {
           flex: 1,
         }}
       >
-        <Text style={{ fontSize: 20, color: colors.text }}>停車駅</Text>
+        <Text style={{ fontSize: fontScale(20), color: colors.text }}>停車駅</Text>
         <View style={{ flex: 1 }} />
         <View style={{ flexDirection: "row" }}>
           {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
             <Text
               style={{
-                fontSize: 15,
+                fontSize: fontScale(15),
                 color: colors.text,
                 position: "absolute",
                 right: 110,
@@ -41,7 +43,7 @@ export const ScrollStickyContent = (props) => {
           )}
           <Text
             style={{
-              fontSize: 20,
+              fontSize: fontScale(20),
               color: isNaN(currentTrainData?.delay)
                 ? colors.text
                 : currentTrainData?.delay == 0
@@ -55,17 +57,13 @@ export const ScrollStickyContent = (props) => {
           <TouchableOpacity
             onPress={() => {
               if (!haveThrough) return;
-              LayoutAnimation.configureNext({
-                duration: 200,
-                update: { type: "easeInEaseOut", springDamping: 0.6 },
-              });
               setShowThrew(!showThrew);
             }}
           >
             <View style={{ flex: 1 }} />
             <Text
               style={{
-                fontSize: 12,
+                fontSize: fontScale(12),
                 width: 50,
                 paddingBottom: 0,
                 margin: "auto",

components/ActionSheetComponents/EachTrainInfo/ShortHeader.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { ScrollView } from "react-native";
+import { View } from "react-native";
 import { TrainDataView } from "./TrainDataView";
 import { trainDataType } from "@/lib/trainPositionTextArray";
 import type { NavigateFunction } from "@/types";
@@ -18,13 +18,13 @@ export const ShortHeader:FC<props> = ({
   navigate,
 }) => {
   return (
-    <ScrollView
+    <View
       style={{
         flexDirection: "row",
         flex: 1,
+        width: "100%",
+        alignSelf: "stretch",
       }}
-      horizontal
-      pagingEnabled
     >
       <TrainDataView
         mode={2}
@@ -35,6 +35,6 @@ export const ShortHeader:FC<props> = ({
         navigate={navigate}
         key={"ShortHeader"}
       />
-    </ScrollView>
+    </View>
   );
 };

components/ActionSheetComponents/EachTrainInfo/StateBox.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, FC } from "react";
-import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { View, Text, StyleProp, ViewStyle } from "react-native";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type stateBox = {
   text: string;
@@ -12,19 +13,20 @@ type stateBox = {
 export const StateBox: FC<stateBox> = (props) => {
   const { text, title, style, mode, endText } = props;
   const { colors } = useThemeColors();
+  const { fontScale } = useResponsive();
   return (
     <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
-      <Text style={{ fontSize: 12, color: colors.textAccent }}>{title}</Text>
+      <Text style={{ fontSize: fontScale(12), color: colors.textAccent }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
-        <Text style={[mode == 2 ? boxTextStyle2 : boxTextStyle, { color: colors.textAccent }]}>{text}</Text>
+        <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }, { color: colors.textAccent }]}>{text}</Text>
       </View>
       {endText && (
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
           <Text
             style={{
-              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
-              fontSize: 10,
+              ...(mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }),
+              fontSize: fontScale(10),
               color: colors.textAccent,
             }}
           >
@@ -47,12 +49,3 @@ const boxStyle2: ViewStyle = {
   padding: 5,
   margin: 5,
 };
-const boxTextStyle2: TextStyle = {
-  fontSize: 18,
-  textAlign: "right",
-};
-
-const boxTextStyle: TextStyle = {
-  fontSize: 25,
-  textAlign: "right",
-};

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, FC } from "react";
-import { View, TouchableOpacity, useWindowDimensions, Text } from "react-native";
+import { View, TouchableOpacity, Text } from "react-native";
 import { StateBox } from "./StateBox";
 import { PositionBox } from "./PositionBox";
 import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
@@ -13,6 +13,7 @@ import { useStationList } from "../../../stateBox/useStationList";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { customTrainDataDetector } from "@/components/custom-train-data";
 import type { NavigateFunction } from "@/types";
+import { stackAwareNavigate } from "@/lib/rootNavigation";
 
 
 type props = {
@@ -33,7 +34,6 @@ export const TrainDataView:FC<props> = ({
 }) => {
   const { stationList } = useStationList();
 
-  const { width, height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
   const { setInjectData } = useCurrentTrain();
 
@@ -155,7 +155,7 @@ export const TrainDataView:FC<props> = ({
           flexDirection: "row",
           //minHeight: 200,
           //height: heightPercentageToDP("20%"),
-          width: isLandscape ? (width / 100) * 40 : width,
+          width: "100%",
           flex: 1,
         }}
       >
@@ -164,16 +164,16 @@ export const TrainDataView:FC<props> = ({
           //disabled={!onLine}
           //onLongPress={openEditWindow}
           onLongPress={()=>{
-            if (!onLine) return;
+            if (!currentTrainData) return;
             setInjectData({ type:"train", value:currentTrainData?.num, fixed:true});
-            navigate("positions", { screen: "Apps" });
+            stackAwareNavigate("positions");
             SheetManager.hide("EachTrainInfo");
           }}
           onPress={() => {
             if (!onLine) return;
             setInjectData({ type: "station", value: currentPosition[0], fixed: false });
             
-            navigate("positions", { screen: "Apps" });
+            stackAwareNavigate("positions");
             SheetManager.hide("EachTrainInfo");
           }}
         >

components/ActionSheetComponents/EachTrainInfoCore.tsx

@@ -22,8 +22,10 @@ import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
 import { HeaderText } from "./EachTrainInfoCore/HeaderText";
 import { useStationList } from "../../stateBox/useStationList";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { useThemeColors } from "@/lib/theme";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useResponsive } from "@/lib/responsive";
 
 // Custom hooks
 import { useTrainDiagramData } from "./EachTrainInfoCore/hooks/useTrainDiagramData";
@@ -33,7 +35,6 @@ import { useStopStationIDs } from "./EachTrainInfoCore/hooks/useStopStationIDs";
 import { useTrainPosition } from "./EachTrainInfoCore/hooks/useTrainPosition";
 import { useAutoScroll } from "./EachTrainInfoCore/hooks/useAutoScroll";
 import { useExtendedStations } from "./EachTrainInfoCore/hooks/useExtendedStations";
-import { LiveActivityButton } from "./EachTrainInfo/LiveActivityButton";
 
 export const EachTrainInfoCore = ({
   actionSheetRef,
@@ -41,13 +42,16 @@ export const EachTrainInfoCore = ({
   openStationACFromEachTrainInfo,
   from,
   navigate,
+  sheetOpened = false,
 }) => {
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
   const { colors, fixed } = useThemeColors();
+  const { verticalScale, moderateScale } = useResponsive();
   const { setTrainInfo } = useTrainMenu();
   const { height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
+  const { getCurrentStationData } = useCurrentTrain();
 
   const scrollRef = useRef<any>(null);
   // Custom hooks for data management
@@ -71,7 +75,9 @@ export const EachTrainInfoCore = ({
   } = useExtendedStations(trainData, setTrainData);
 
   // UI state
-  const [showThrew, setShowThrew] = useState(false);
+  // 走行中の列車は初期状態から通過駅を表示する（後から showThrew を true に変更すると
+  // ActionSheet の onSheetLayout が再発火してスプリングアニメーションが途中でリスタートするため）
+  const [showThrew, setShowThrew] = useState(() => !!getCurrentStationData(data.trainNum));
   const [isJumped, setIsJumped] = useState(false);
 
   // Auto scroll to current position
@@ -81,7 +87,7 @@ export const EachTrainInfoCore = ({
     scrollRef,
     isJumped,
     setIsJumped,
-    setShowThrew
+    sheetOpened
   );
 
   // Back button handler
@@ -125,7 +131,6 @@ export const EachTrainInfoCore = ({
     } else {
       SheetManager.hide("EachTrainInfo").then(() => {
         setTimeout(() => {
-          // @ts-expect-error - SheetManager payload type is too restrictive
           SheetManager.show("EachTrainInfo", { payload });
         }, 200);
       });
@@ -142,11 +147,11 @@ export const EachTrainInfoCore = ({
         borderWidth: 1,
       }}
     >
-      <View style={{ height: 26, width: "100%" }}>
+      <View style={{ height: verticalScale(26), width: "100%" }}>
         <View
           style={{
-            height: 6,
-            width: 45,
+            height: verticalScale(6),
+            width: moderateScale(45),
             borderRadius: 100,
             backgroundColor: colors.borderLight,
             marginVertical: 10,
@@ -173,7 +178,7 @@ export const EachTrainInfoCore = ({
         scrollRef={scrollRef}
         containerProps={{
           style: {
-            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
+            maxHeight: height * 0.7,
             backgroundColor:
               customTrainType.data === "notService" ? "#777777ff" : colors.surface,
           },
@@ -206,12 +211,8 @@ export const EachTrainInfoCore = ({
           />
         }
       >
-        <LiveActivityButton
-          currentTrainData={currentTrainData}
-          currentPosition={currentPosition}
-        />
         {customTrainType.data === "notService" && (
-          <Text style={{ backgroundColor: colors.surface, fontWeight: "bold" }}>
+          <Text style={{ backgroundColor: colors.surface, color: colors.text, fontWeight: "bold" }}>
             この列車には乗車できません。
           </Text>
         )}

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -16,6 +16,7 @@ import type { NavigateFunction } from "@/types";
 import { useUnyohub } from "@/stateBox/useUnyohub";
 import { useElesite } from "@/stateBox/useElesite";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -49,6 +50,7 @@ export const HeaderText: FC<Props> = ({
   const { limited, trainNum } = data;
 
   const { fixed } = useThemeColors();
+  const { fontScale } = useResponsive();
   const { updatePermission } = useTrainMenu();
   const { allCustomTrainData, getTodayOperationByTrainId } =
     useAllTrainDiagram();
@@ -57,6 +59,7 @@ export const HeaderText: FC<Props> = ({
     getUnyohubByTrainNumber,
     getUnyohubEntriesByTrainNumber,
     useUnyohub: unyohubEnabled,
+    unyohubData,
   } = useUnyohub();
   const { getElesiteEntriesByTrainNumber, useElesite: elesiteEnabled } =
     useElesite();
@@ -156,11 +159,10 @@ export const HeaderText: FC<Props> = ({
           result,
         ];
     }
-  }, [trainData]);
+  }, [trainData, trainNum, allCustomTrainData]);
 
-  const todayOperation = getTodayOperationByTrainId(trainNum).filter(
-    (d) => d.state !== 100,
-  );
+  const allTodayOperation = getTodayOperationByTrainId(trainNum);
+  const todayOperation = allTodayOperation.filter((d) => d.state !== 100);
 
   let iconTrainDirection =
     parseInt(trainNum.replace(/[^\d]/g, "")) % 2 == 0 ? true : false;
@@ -168,11 +170,35 @@ export const HeaderText: FC<Props> = ({
     iconTrainDirection = directions ? true : false;
   }
 
-  const unyohubFormation = getUnyohubByTrainNumber(trainNum);
-  const unyohubEntries = getUnyohubEntriesByTrainNumber(trainNum);
+  const unyohubLookupNum = customTrainData?.train_number_override || trainNum;
+  const isFreightRetsuban = unyohubLookupNum.includes("レ");
+  const unyohubTrainNumForSourceScreen = isFreightRetsuban
+    ? unyohubLookupNum.replace(/レ/g, "")
+    : unyohubLookupNum;
+  const freightUnyohubCandidates = (() => {
+    const digits = unyohubTrainNumForSourceScreen.replace(/[^\d]/g, "");
+    const candidates = new Set<string>();
+    if (!digits) return candidates;
+    candidates.add(digits);
+    if (/^\d{2}$/.test(digits)) {
+      candidates.add(`30${digits}`);
+      candidates.add(`90${digits}`);
+    } else if (/^(30|90)\d{2}$/.test(digits)) {
+      candidates.add(digits.slice(-2));
+    }
+    return candidates;
+  })();
+  const unyohubFormation = getUnyohubByTrainNumber(unyohubLookupNum);
+  const unyohubEntries = isFreightRetsuban
+    ? unyohubData.filter((unyo) =>
+        unyo.trains?.some(
+          (t) => !!t.train_number && freightUnyohubCandidates.has(t.train_number),
+        ),
+      )
+    : getUnyohubEntriesByTrainNumber(unyohubTrainNumForSourceScreen);
   const elesiteEntries = getElesiteEntriesByTrainNumber(trainNum);
 
-  // 車番(formations)が空でないエントリが1件以上あれば「運用Hub情報あり」と判定
+  // 車番(formations) がある場合のみ「運用Hub情報あり」と判定
   const hasUnyohubFormation = unyohubEntries.some(
     (e) => !!e.formations && e.formations.trim() !== "",
   );
@@ -197,7 +223,7 @@ export const HeaderText: FC<Props> = ({
         width: "100%",
       }}
       onTouchStart={() =>
-        scrollRef.current?.current?.scrollTo({ y: 0, animated: true })
+        scrollRef.current?.scrollTo({ y: 0, animated: true })
       }
     >
       <TrainIconStatus
@@ -217,7 +243,7 @@ export const HeaderText: FC<Props> = ({
       >
         <Text
           style={{
-            fontSize: 20,
+            fontSize: fontScale(20),
             color: fixed.textOnPrimary,
             fontFamily: fontAvailable ? "JR-Nishi" : undefined,
             fontWeight: !fontAvailable ? "bold" : undefined,
@@ -258,7 +284,7 @@ export const HeaderText: FC<Props> = ({
           style={{
             ...textConfig,
             color: fixed.textOnPrimary,
-            ...(trainName.length > 10 ? { fontSize: 16 } : {}),
+            ...(trainName.length > 10 ? { fontSize: fontScale(16) } : { fontSize: fontScale(17) }),
             flexShrink: 1,
           }}
           onTextLayout={(e) => {
@@ -266,11 +292,11 @@ export const HeaderText: FC<Props> = ({
             }}
         >
           {trainName}
-          <InfogramText infogram={infogram} />
         </Text>
+        <InfogramText infogram={infogram} />
       </TouchableOpacity>
       <View style={{ flex: 1 }} />
-      <Text style={{ ...textConfig, color: fixed.textOnPrimary }}>
+      <Text style={{ ...textConfig, fontSize: fontScale(17), color: fixed.textOnPrimary }}>
         {showHeadStation.map((d) => `${headStation[d].id} + `)}
         {trainNum}
         {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
@@ -285,6 +311,7 @@ export const HeaderText: FC<Props> = ({
             (SheetManager.show as any)("TrainDataSources", {
               payload: {
                 trainNum,
+                unyohubTrainNum: unyohubTrainNumForSourceScreen,
                 unyohubEntries,
                 elesiteEntries,
                 todayOperation,

components/ActionSheetComponents/EachTrainInfoCore/hooks/useAutoScroll.ts

@@ -1,5 +1,4 @@
-import React,{ useEffect, MutableRefObject } from 'react';
-import { LayoutAnimation, ScrollView } from 'react-native';
+import { useEffect, MutableRefObject } from 'react';
 
 
 export const useAutoScroll = (
@@ -8,24 +7,15 @@ export const useAutoScroll = (
   scrollRef: MutableRefObject<any>,
   isJumped: boolean,
   setIsJumped: (value: boolean) => void,
-  setShowThrew: (value: boolean) => void
+  sheetOpened: boolean = false
 ) => {
   useEffect(() => {
-    if (isJumped || !points?.length || !scrollRef) return;
+    // ActionSheetのスプリングアニメーション完了後まで待機
+    if (!sheetOpened || isJumped || !points?.length || !scrollRef) return;
 
     const currentPositionIndex = points.findIndex((d) => d === true);
     if (currentPositionIndex === -1) return;
 
-    setShowThrew(true);
-
-    const isPassingThrough = trainDataWithThrough[currentPositionIndex]?.split(',')[1] === '通過';
-    if (isPassingThrough) {
-      LayoutAnimation.configureNext({
-        duration: 400,
-        update: { type: 'easeInEaseOut', springDamping: 0.6 },
-      });
-    }
-
     // 5駅以内の場合はスクロールしない
     if (currentPositionIndex < 5) {
       setIsJumped(true);
@@ -33,9 +23,11 @@ export const useAutoScroll = (
     }
 
     const scrollPosition = currentPositionIndex * 44 - 50;
-    setTimeout(() => {
-      scrollRef.current?.current?.scrollTo({ y: scrollPosition, animated: true });
+    const timer = setTimeout(() => {
+      scrollRef.current?.scrollTo({ y: scrollPosition, animated: true });
       setIsJumped(true);
-    }, 400);
-  }, [points, trainDataWithThrough, scrollRef, isJumped, setIsJumped, setShowThrew]);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [sheetOpened, points, trainDataWithThrough, scrollRef, isJumped, setIsJumped]);
 };

components/ActionSheetComponents/EachTrainInfoCore/hooks/useStopStationIDs.ts

@@ -1,25 +1,25 @@
 import { useState, useEffect } from 'react';
 import { useStationList } from '@/stateBox/useStationList';
 
+const computeStopStationIDs = (data: string[], stationList: any[][]): string[][] =>
+  data.map((item) => {
+    const [stationName] = item.split(',');
+    return stationList
+      .map((lineStations) => lineStations.filter((s) => s.StationName === stationName))
+      .reduce((acc, s) => acc.concat(s), [])
+      .map((s) => s.StationNumber);
+  });
+
 export const useStopStationIDs = (trainDataWithThrough: string[]) => {
   const { stationList } = useStationList();
-  const [stopStationIDList, setStopStationIDList] = useState<string[][]>([]);
+
+  // 初回レンダリング時に同期的に計算することでActionSheetのアニメーション中の高さ変化を防ぐ
+  const [stopStationIDList, setStopStationIDList] = useState<string[][]>(() =>
+    computeStopStationIDs(trainDataWithThrough, stationList)
+  );
 
   useEffect(() => {
-    const stationIDs = trainDataWithThrough.map((item) => {
-      const [stationName] = item.split(',');
-      
-      const matchingStations = stationList
-        .map((lineStations) => 
-          lineStations.filter((station) => station.StationName === stationName)
-        )
-        .reduce((acc, stations) => acc.concat(stations), [])
-        .map((station) => station.StationNumber);
-
-      return matchingStations;
-    });
-
-    setStopStationIDList(stationIDs);
+    setStopStationIDList(computeStopStationIDs(trainDataWithThrough, stationList));
   }, [trainDataWithThrough, stationList]);
 
   return stopStationIDList;

components/ActionSheetComponents/EachTrainInfoCore/hooks/useThroughStations.ts

@@ -2,107 +2,114 @@ import { useState, useEffect } from 'react';
 import { lineListPair, stationIDPair } from '@/lib/getStationList';
 import { useStationList } from '@/stateBox/useStationList';
 
-export const useThroughStations = (trainData) => {
-  const { originalStationList, stationList } = useStationList();
-  const [trainDataWithThrough, setTrainDataWithThrough] = useState([]);
-  const [haveThrough, setHaveThrough] = useState(false);
+const computeThroughStations = (
+  trainData: string[],
+  stationList: any[][],
+  originalStationList: Record<string, any[]>
+): { trainDataWithThrough: string[]; haveThrough: boolean } => {
+  if (!trainData.length) return { trainDataWithThrough: [], haveThrough: false };
 
-  useEffect(() => {
-    if (!trainData.length) {
-      setTrainDataWithThrough([]);
-      return;
+  let haveThrough = false;
+  const isCancel: boolean[] = [];
+
+  const stopStationList = trainData.map((item, index, array) => {
+    const [station, se] = item.split(',');
+    const [, nextSe] = array[index + 1]?.split(',') || [];
+
+    if (nextSe) {
+      // 運休判定ロジック：
+      // 1. 両方が休系（休編、休発、休着など）→ 運休区間
+      // 2. 着/着編 → 休発/休発編：到着後に運休開始 → 通過駅は通常運行
+      // 3. 休着/休着編 → 発/発編：運休終了後に出発 → 通過駅は通常運行
+      // 4. その他の休の組み合わせ → 運休区間
+      const bothCanceled = se.includes('休') && nextSe.includes('休');
+      const normalArrivalToSuspendStart =
+        (se === '着' || se === '着編') && (nextSe.includes('休') && nextSe.includes('発'));
+      const suspendEndToNormalDeparture =
+        (se.includes('休') && se.includes('着')) && (nextSe === '発' || nextSe === '発編');
+
+      isCancel.push(bothCanceled && !normalArrivalToSuspendStart && !suspendEndToNormalDeparture);
     }
 
-    const isCancel = [];
-    const stopStationList = trainData.map((item, index, array) => {
-      const [station, se] = item.split(',');
-      const [, nextSe] = array[index + 1]?.split(',') || [];
+    if (se === '通編') haveThrough = true;
 
-      if (nextSe) {
-        // 運休判定ロジック：
-        // 1. 両方が休系（休編、休発、休着など）→ 運休区間
-        // 2. 着/着編 → 休発/休発編：到着後に運休開始 → 通過駅は通常運行
-        // 3. 休着/休着編 → 発/発編：運休終了後に出発 → 通過駅は通常運行
-        // 4. その他の休の組み合わせ → 運休区間
-        const bothCanceled = se.includes('休') && nextSe.includes('休');
-        const normalArrivalToSuspendStart = 
-          (se === '着' || se === '着編') && (nextSe.includes('休') && nextSe.includes('発'));
-        const suspendEndToNormalDeparture = 
-          (se.includes('休') && se.includes('着')) && (nextSe === '発' || nextSe === '発編');
-        
-        const isCanceled = bothCanceled && !normalArrivalToSuspendStart && !suspendEndToNormalDeparture;
-        isCancel.push(isCanceled);
+    return stationList.map((a) => a.filter((d) => d.StationName === station));
+  });
+
+  const allThroughStationList = stopStationList.map((firstItem, index, array) => {
+    if (index === array.length - 1) return [];
+
+    const secondItem = array[index + 1];
+    let betweenStationLine = '';
+    let baseStationNumberFirst = '';
+    let baseStationNumberSecond = '';
+
+    Object.keys(stationIDPair).forEach((lineName, lineIndex) => {
+      if (!lineName) return;
+      const haveFirst = firstItem[lineIndex];
+      const haveSecond = secondItem[lineIndex];
+
+      if (haveFirst?.length && haveSecond?.length) {
+        betweenStationLine = lineName;
+        baseStationNumberFirst = haveFirst[0].StationNumber;
+        baseStationNumberSecond = haveSecond[0].StationNumber;
       }
-
-      if (se === '通編') setHaveThrough(true);
-
-      return stationList.map((a) => a.filter((d) => d.StationName === station));
     });
 
-    const allThroughStationList = stopStationList.map((firstItem, index, array) => {
-      if (index === array.length - 1) return [];
+    if (!betweenStationLine) return [];
 
-      const secondItem = array[index + 1];
-      let betweenStationLine = '';
-      let baseStationNumberFirst = '';
-      let baseStationNumberSecond = '';
+    const allThroughStation: string[] = [];
+    let reverse = false;
 
-      Object.keys(stationIDPair).forEach((lineName, lineIndex) => {
-        if (!lineName) return;
-        const haveFirst = firstItem[lineIndex];
-        const haveSecond = secondItem[lineIndex];
+    originalStationList[lineListPair[stationIDPair[betweenStationLine]]]?.forEach((station) => {
+      const throughStatus = isCancel[index] ? '通休編' : '通過';
 
-        if (haveFirst?.length && haveSecond?.length) {
-          betweenStationLine = lineName;
-          baseStationNumberFirst = haveFirst[0].StationNumber;
-          baseStationNumberSecond = haveSecond[0].StationNumber;
-        }
-      });
-
-      if (!betweenStationLine) return [];
-
-      const allThroughStation = [];
-      let reverse = false;
-
-      originalStationList[lineListPair[stationIDPair[betweenStationLine]]]?.forEach((station) => {
-        const throughStatus = isCancel[index] ? '通休編' : '通過';
-        
-        if (
-          station.StationNumber > baseStationNumberFirst &&
-          station.StationNumber < baseStationNumberSecond
-        ) {
-          allThroughStation.push(`${station.Station_JP},${throughStatus},`);
-          setHaveThrough(true);
-          reverse = false;
-        } else if (
-          station.StationNumber < baseStationNumberFirst &&
-          station.StationNumber > baseStationNumberSecond
-        ) {
-          allThroughStation.push(`${station.Station_JP},${throughStatus},`);
-          setHaveThrough(true);
-          reverse = true;
-        }
-      });
-
-      if (reverse) allThroughStation.reverse();
-      return allThroughStation;
+      if (
+        station.StationNumber > baseStationNumberFirst &&
+        station.StationNumber < baseStationNumberSecond
+      ) {
+        allThroughStation.push(`${station.Station_JP},${throughStatus},`);
+        haveThrough = true;
+        reverse = false;
+      } else if (
+        station.StationNumber < baseStationNumberFirst &&
+        station.StationNumber > baseStationNumberSecond
+      ) {
+        allThroughStation.push(`${station.Station_JP},${throughStatus},`);
+        haveThrough = true;
+        reverse = true;
+      }
     });
 
-    let mainArray = [...trainData];
-    let offset = 0;
+    if (reverse) allThroughStation.reverse();
+    return allThroughStation;
+  });
 
-    trainData.forEach((_, index) => {
-      offset += 1;
-      const throughStations = allThroughStationList[index];
-      
-      if (!throughStations?.length) return;
+  let mainArray = [...trainData];
+  let offset = 0;
 
-      mainArray.splice(offset, 0, ...throughStations);
-      offset += throughStations.length;
-    });
+  trainData.forEach((_, index) => {
+    offset += 1;
+    const throughStations = allThroughStationList[index];
+    if (!throughStations?.length) return;
+    mainArray.splice(offset, 0, ...throughStations);
+    offset += throughStations.length;
+  });
 
-    setTrainDataWithThrough(mainArray);
+  return { trainDataWithThrough: mainArray, haveThrough };
+};
+
+export const useThroughStations = (trainData) => {
+  const { originalStationList, stationList } = useStationList();
+
+  // 初回レンダリング時に同期的に計算することでActionSheetのアニメーション中の高さ変化を防ぐ
+  const [state, setState] = useState(() =>
+    computeThroughStations(trainData, stationList, originalStationList)
+  );
+
+  useEffect(() => {
+    setState(computeThroughStations(trainData, stationList, originalStationList));
   }, [trainData, stationList, originalStationList]);
 
-  return { trainDataWithThrough, haveThrough };
+  return { trainDataWithThrough: state.trainDataWithThrough, haveThrough: state.haveThrough };
 };

components/ActionSheetComponents/EachTrainInfoCore/hooks/useTrainDiagramData.ts

@@ -2,28 +2,34 @@ import { useState, useEffect } from 'react';
 import { useAllTrainDiagram } from '@/stateBox/useAllTrainDiagram';
 import { searchSpecialTrain } from '@/lib/eachTrainInfoCoreLib/searchSpecialTrain';
 
+const parseTrainData = (trainNum: string, trainList: Record<string, string>) => {
+  if (!trainNum) return { data: [], trueIDs: [] };
+  const TD = trainList[trainNum];
+  if (!TD) {
+    const specialTrainActualIDs = searchSpecialTrain(trainNum, trainList);
+    return { data: [], trueIDs: specialTrainActualIDs || [] };
+  }
+  return { data: TD.split('#').filter((d) => d !== ''), trueIDs: [] };
+};
+
 export const useTrainDiagramData = (trainNum) => {
   const { allTrainDiagram: trainList } = useAllTrainDiagram();
-  const [trainData, setTrainData] = useState([]);
-  const [trueTrainID, setTrueTrainID] = useState([]);
   const [isManuallyExtended, setIsManuallyExtended] = useState(false);
 
+  // 初回レンダリング時にコンテキストから同期的にデータを取得することで
+  // ActionSheetのアニメーション中に高さが変わるのを防ぐ
+  const [trainData, setTrainData] = useState(() => parseTrainData(trainNum, trainList).data);
+  const [trueTrainID, setTrueTrainID] = useState(() => parseTrainData(trainNum, trainList).trueIDs);
+
   useEffect(() => {
     if (!trainNum) return;
-    
+
     // 手動で拡張されている場合は上書きしない
     if (isManuallyExtended) return;
-    
-    const TD = trainList[trainNum];
-    
-    if (!TD) {
-      const specialTrainActualIDs = searchSpecialTrain(trainNum, trainList);
-      setTrueTrainID(specialTrainActualIDs || []);
-      setTrainData([]);
-      return;
-    }
-    
-    setTrainData(TD.split('#').filter((d) => d !== ''));
+
+    const { data, trueIDs } = parseTrainData(trainNum, trainList);
+    setTrueTrainID(trueIDs);
+    setTrainData(data);
   }, [trainNum, trainList, isManuallyExtended]);
 
   const setTrainDataExtended = (data) => {

components/ActionSheetComponents/EachTrainInfoCore/hooks/useTrainPosition.ts

@@ -25,7 +25,7 @@ export const useTrainPosition = (
     const trainPosData = getCurrentStationData(trainNum);
     if (trainPosData) {
       logger.debug('Train position data:', trainPosData);
-      setCurrentTrainData(trainPosData);
+      setCurrentTrainData(trainPosData as TrainData);
     }
   }, [currentTrain, trainNum, getCurrentStationData]);