ウィジェットのテーマカラーを追加し、各ウィジェットでの色の適用を改善

- Introduced multiple new PNG icons in the assets/icons directory, including:
  - s40.png
  - s54nany1.png
  - s54nany2.png
  - s54s.png
  - s54to0ys.png
  - s6000f.png
  - s7001.png
  - s8001nr.png
  - s9000.png
  - tosa9640ht.png
  - tosa9640jbl.png
  - tosa9640mo1.png
  - tosa9640mo2.png
  - tosa9640tyb.png
  - tosa9640tyg.png
  - w141jg.png
  - w40.png
  - w741.png

These icons are essential for enhancing the visual representation of the application.

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";
@@ -137,13 +142,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, DarkTheme, DefaultTheme } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Animated, Platform, ActivityIndicator, View, StyleSheet, useColorScheme } from "react-native";
+import { Animated, Platform, ActivityIndicator, View, StyleSheet } from "react-native";
 import { useNavigationState } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { LinearGradient } from "expo-linear-gradient";
@@ -16,6 +16,7 @@ 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;
@@ -60,8 +61,7 @@ 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://"],

GeneralWebView.tsx

@@ -33,6 +33,7 @@ export default ({ route }) => {
     <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <WebView
         source={{ uri }}
+        contentMode="mobile"
         allowsBackForwardNavigationGestures
         ref={webViewRef}
         onNavigationStateChange={(navState) => {

MenuPage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useWindowDimensions, Platform, useColorScheme } from "react-native";
 import Constants from "expo-constants";
+import { useResponsive } from "@/lib/responsive";
 
 import { Dimensions, StatusBar } from "react-native";
 
@@ -27,6 +28,7 @@ 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;
@@ -65,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]);
@@ -84,7 +86,7 @@ export function MenuPage() {
   useEffect(() => {
     const unsubscribe = addListener("tabPress", (e) => {
       scrollRef.current?.scrollTo({
-        y: mapHeightRef.current - 80,
+        y: mapHeightRef.current - verticalScale(80),
         animated: true,
       });
       setMapMode(false);
@@ -107,7 +109,7 @@ export function MenuPage() {
   return (
     <Stack.Navigator
       id={null}
-      screenOptions={{ contentStyle: { backgroundColor: bgColor } }}
+      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
     >
       <Stack.Screen
         name="menu"

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,8 +1,9 @@
 import React, { FC } from "react";
-import { Platform, StatusBar, useColorScheme } from "react-native";
+import { Platform, StatusBar } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 const StatusbarDetect: FC = () => {
-  const isDark = useColorScheme() === "dark";
+  const { isDark } = useThemeColors();
   const barStyle = isDark ? "light-content" : "dark-content";
   return <StatusBar barStyle={barStyle} translucent backgroundColor="transparent" />;
 };

Top.tsx

@@ -19,7 +19,7 @@ import { StationDiagramView } from "@/components/StationDiagram/StationDiagramVi
 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";
 
@@ -59,7 +59,7 @@ export const Top = () => {
   return (
     <Stack.Navigator
       id={null}
-      screenOptions={{ contentStyle: { backgroundColor: bgColor } }}
+      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
     >
       <Stack.Screen
         name="Apps"

app.json

@@ -24,7 +24,7 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "60",
+      "buildNumber": "61",
       "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.png",
               "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.png",
               "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.png",
               "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.png",
               "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,101 @@
 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") },
   ]
-  
-}
+
+}

components/ActionSheetComponents/EachTrainInfo.tsx

@@ -2,16 +2,19 @@ import React, { useRef } 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();
+  if (!payload) return <></>;
   return (
     <ActionSheet
       gestureEnabled={true}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
-      isModal={Platform.OS == "ios"}
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{ maxHeight }}
 
       //useBottomSafeAreaPadding={Platform.OS == "android"}
     >

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/LiveActivityButton.tsx

@@ -0,0 +1,144 @@
+import React, { FC, useCallback, useEffect } from "react";
+import { Platform, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { useTrainFollowActivity } from "@/lib/useTrainFollowActivity";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { trainDataType } from "@/lib/trainPositionTextArray";
+
+type Props = {
+  currentTrainData: trainDataType;
+  currentPosition: string[] | undefined;
+};
+
+export const LiveActivityButton: FC<Props> = ({
+  currentTrainData,
+  currentPosition,
+}) => {
+  const liveActivity = useTrainFollowActivity();
+  const { allTrainDiagram } = useAllTrainDiagram();
+
+  const onLine = !!currentPosition?.toString().length;
+
+  const handleLiveActivity = useCallback(async () => {
+    if (liveActivity.status === "active") {
+      await liveActivity.end();
+      return;
+    }
+    if (!onLine) return;
+
+    const diagramStr: string =
+      (allTrainDiagram as Record<string, string>)[currentTrainData?.num] ?? "";
+    const stations = diagramStr
+      .split("#")
+      .filter(Boolean)
+      .map((s) => s.split(",")[0]);
+    const destination =
+      stations.length > 0 ? stations[stations.length - 1] : "";
+
+    const curSt = currentPosition?.[0] ?? currentTrainData?.Pos ?? "";
+    const curIdx = stations.indexOf(curSt);
+    const nextSt =
+      curIdx >= 0 && curIdx + 1 < stations.length
+        ? stations[curIdx + 1]
+        : currentPosition?.[1] ?? "";
+
+    await liveActivity.start({
+      trainNumber: currentTrainData?.num ?? "",
+      lineName: currentTrainData?.Line ?? "",
+      destination,
+      currentStation: curSt,
+      nextStation: nextSt,
+      delayMinutes:
+        typeof currentTrainData?.delay === "number"
+          ? currentTrainData.delay
+          : 0,
+      scheduledArrival: "",
+    });
+  }, [
+    liveActivity,
+    onLine,
+    allTrainDiagram,
+    currentTrainData,
+    currentPosition,
+  ]);
+
+  // 列車位置が変わったら Live Activity を自動更新
+  useEffect(() => {
+    if (liveActivity.status !== "active") return;
+    if (!currentTrainData?.Pos) return;
+
+    const diagramStr: string =
+      (allTrainDiagram as Record<string, string>)[currentTrainData?.num] ?? "";
+    const stations = diagramStr
+      .split("#")
+      .filter(Boolean)
+      .map((s) => s.split(",")[0]);
+
+    const curSt = currentPosition?.[0] ?? currentTrainData.Pos;
+    const curIdx = stations.indexOf(curSt);
+    const nextSt =
+      curIdx >= 0 && curIdx + 1 < stations.length
+        ? stations[curIdx + 1]
+        : currentPosition?.[1] ?? "";
+
+    liveActivity.update({
+      currentStation: curSt,
+      nextStation: nextSt,
+      delayMinutes:
+        typeof currentTrainData.delay === "number"
+          ? currentTrainData.delay
+          : 0,
+      scheduledArrival: "",
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    currentTrainData?.Pos,
+    currentTrainData?.delay,
+    currentPosition?.toString(),
+  ]);
+
+  if (Platform.OS !== "ios" || !liveActivity.available || !onLine) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={handleLiveActivity}
+      disabled={liveActivity.status === "loading"}
+      style={[
+        styles.liveActivityButton,
+        liveActivity.status === "active" && styles.liveActivityButtonActive,
+      ]}
+    >
+      <Text style={styles.liveActivityButtonText}>
+        {liveActivity.status === "active"
+          ? "🔴 列車追従 Live Activity 終了"
+          : liveActivity.status === "loading"
+          ? "⏳ 開始中..."
+          : "🟢 列車追従 Live Activity 開始"}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  liveActivityButton: {
+    marginHorizontal: 10,
+    marginVertical: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    backgroundColor: "rgba(0, 153, 204, 0.12)",
+    borderWidth: 1,
+    borderColor: "rgba(0, 153, 204, 0.5)",
+    alignItems: "center",
+  },
+  liveActivityButtonActive: {
+    backgroundColor: "rgba(220, 50, 50, 0.1)",
+    borderColor: "rgba(220, 50, 50, 0.5)",
+  },
+  liveActivityButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0099cc",
+  },
+});

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";
@@ -33,7 +33,6 @@ export const TrainDataView:FC<props> = ({
 }) => {
   const { stationList } = useStationList();
 
-  const { width, height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
   const { setInjectData } = useCurrentTrain();
 
@@ -155,7 +154,7 @@ export const TrainDataView:FC<props> = ({
           flexDirection: "row",
           //minHeight: 200,
           //height: heightPercentageToDP("20%"),
-          width: isLandscape ? (width / 100) * 40 : width,
+          width: "100%",
           flex: 1,
         }}
       >

components/ActionSheetComponents/EachTrainInfoCore.tsx

@@ -24,6 +24,7 @@ import { HeaderText } from "./EachTrainInfoCore/HeaderText";
 import { useStationList } from "../../stateBox/useStationList";
 import { useThemeColors } from "@/lib/theme";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useResponsive } from "@/lib/responsive";
 
 // Custom hooks
 import { useTrainDiagramData } from "./EachTrainInfoCore/hooks/useTrainDiagramData";
@@ -44,6 +45,7 @@ export const EachTrainInfoCore = ({
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
   const { colors, fixed } = useThemeColors();
+  const { verticalScale, moderateScale } = useResponsive();
   const { setTrainInfo } = useTrainMenu();
   const { height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
@@ -124,7 +126,6 @@ export const EachTrainInfoCore = ({
     } else {
       SheetManager.hide("EachTrainInfo").then(() => {
         setTimeout(() => {
-          // @ts-expect-error - SheetManager payload type is too restrictive
           SheetManager.show("EachTrainInfo", { payload });
         }, 200);
       });
@@ -141,11 +142,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,
@@ -172,7 +173,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,7 +207,7 @@ export const EachTrainInfoCore = ({
         }
       >
         {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();
@@ -156,7 +158,7 @@ export const HeaderText: FC<Props> = ({
           result,
         ];
     }
-  }, [trainData]);
+  }, [trainData, trainNum, allCustomTrainData]);
 
   const todayOperation = getTodayOperationByTrainId(trainNum).filter(
     (d) => d.state !== 100,
@@ -168,8 +170,9 @@ 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 unyohubFormation = getUnyohubByTrainNumber(unyohubLookupNum);
+  const unyohubEntries = getUnyohubEntriesByTrainNumber(unyohubLookupNum);
   const elesiteEntries = getElesiteEntriesByTrainNumber(trainNum);
 
   // 車番(formations)が空でないエントリが1件以上あれば「運用Hub情報あり」と判定
@@ -217,7 +220,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 +261,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) => {
@@ -270,7 +273,7 @@ export const HeaderText: FC<Props> = ({
         <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 +288,7 @@ export const HeaderText: FC<Props> = ({
             (SheetManager.show as any)("TrainDataSources", {
               payload: {
                 trainNum,
+                unyohubTrainNum: unyohubLookupNum,
                 unyohubEntries,
                 elesiteEntries,
                 todayOperation,

components/ActionSheetComponents/EachTrainInfoCore/hooks/useAutoScroll.ts

@@ -1,5 +1,5 @@
-import React,{ useEffect, MutableRefObject } from 'react';
-import { LayoutAnimation, ScrollView } from 'react-native';
+import { useEffect, MutableRefObject } from 'react';
+import { InteractionManager } from 'react-native';
 
 
 export const useAutoScroll = (
@@ -16,26 +16,23 @@ export const useAutoScroll = (
     const currentPositionIndex = points.findIndex((d) => d === true);
     if (currentPositionIndex === -1) return;
 
-    setShowThrew(true);
+    // ActionSheetの開閉アニメーション完了後にレイアウト変更を行う
+    const handle = InteractionManager.runAfterInteractions(() => {
+      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);
+        return;
+      }
 
-    // 5駅以内の場合はスクロールしない
-    if (currentPositionIndex < 5) {
-      setIsJumped(true);
-      return;
-    }
+      const scrollPosition = currentPositionIndex * 44 - 50;
+      setTimeout(() => {
+        scrollRef.current?.scrollTo({ y: scrollPosition, animated: true });
+        setIsJumped(true);
+      }, 100);
+    });
 
-    const scrollPosition = currentPositionIndex * 44 - 50;
-    setTimeout(() => {
-      scrollRef.current?.scrollTo({ y: scrollPosition, animated: true });
-      setIsJumped(true);
-    }, 400);
+    return () => handle.cancel();
   }, [points, trainDataWithThrough, scrollRef, isJumped, setIsJumped, setShowThrew]);
 };

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]);
 

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -2,10 +2,10 @@ import React, { ComponentProps, FC, useEffect, useState } from "react";
 import { View, Image, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
-import { useInterval } from "../../../lib/useInterval";
 import { SheetManager } from "react-native-actions-sheet";
 import { customTrainDataDetector } from "../../custom-train-data";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useInterval } from "@/lib/useInterval";
 import type { NavigateFunction } from "@/types";
 import { OperationLogs } from "@/lib/CommonTypes";
 
@@ -53,7 +53,7 @@ export const TrainIconStatus: FC<Props> = (props) => {
                 ...(operation.train_ids || []),
                 ...(operation.related_train_ids || []),
               ];
-              
+
               // data.trainNumの接頭辞と一致するものを探す
               for (const trainId of allTrainIds) {
                 const prefix = trainId.split(',')[0]; // カンマ前の部分
@@ -63,18 +63,18 @@ export const TrainIconStatus: FC<Props> = (props) => {
               }
               return null;
             };
-            
+
             const aTrainId = findMatchingTrainId(a);
             const bTrainId = findMatchingTrainId(b);
-            
+
             // マッチしたものがない場合は元の順序を保持
             if (!aTrainId || !bTrainId) {
               return aTrainId ? -1 : bTrainId ? 1 : 0;
             }
-            
+
             const aOrder = extractOrderNumber(aTrainId);
             const bOrder = extractOrderNumber(bTrainId);
-            
+
             return aOrder - bOrder;
           })
           .map((op) => ({
@@ -87,7 +87,34 @@ export const TrainIconStatus: FC<Props> = (props) => {
       setTrainIcon([{ vehicle_info_img, vehicle_info_right_img: vehicle_info_img, vehicle_info_url }]);
     }
 
+    // アンパンマンステータスAPIのエンドポイント判定
+    let anpanmanApiPath: string | null = null;
     switch (data.trainNum) {
+      // 予讃線 → yosan-anpanman
+      // しおかぜ 8000 アンパン
+      case "10M":
+      case "22M":
+      case "9M":
+      case "21M":
+      // いしづち 8000 アンパン
+      case "1010M":
+      case "1022M":
+      case "1009M":
+      case "1021M":
+      // いしづち 三桁 アンパン
+      case "1041M":
+      case "1044M":
+      // 宇和海 2000 アンパン
+      case "1058D":
+      case "1066D":
+      case "1074D":
+      case "1053D":
+      case "1059D":
+      case "1067D":
+        anpanmanApiPath = "yosan-anpanman";
+        break;
+      // 土讃線 → dosan-anpanman
+      // 南風 2700 アンパン
       case "32D":
       case "36D":
       case "44D":
@@ -98,33 +125,39 @@ export const TrainIconStatus: FC<Props> = (props) => {
       case "45D":
       case "49D":
       case "57D":
-        fetch(
-          `https://n8n.haruk.in/webhook/dosan-anpanman?trainNum=${
-            data.trainNum
-          }&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
-        )
-          .then((d) => d.json())
-          .then((d) => {
-            if (d.trainStatus == "〇") {
-              //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
-            } else if (d.trainStatus == "▲") {
-              setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
-            } else if (d.trainStatus == "×") {
-              setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
-            }
-          });
+        anpanmanApiPath = "dosan-anpanman";
         break;
     }
+    if (anpanmanApiPath) {
+      fetch(
+        `https://n8n.haruk.in/webhook/${anpanmanApiPath}?trainNum=${
+          data.trainNum
+        }&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
+      )
+        .then((d) => d.json())
+        .then((d) => {
+          if (d.trainStatus == "〇" || d.trainStatus == "○") {
+            //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
+          } else if (d.trainStatus == "▲") {
+            setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
+          } else if (d.trainStatus == "×") {
+            setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
+          }
+        })
+        .catch(() => {});
+    }
   }, [data.trainNum, allCustomTrainData, todayOperation]);
-  const [move, setMove] = useState(true);
-  useInterval(
-    () => {
-      // anpanmanStatusがデータを持っているなら実行
-      if (anpanmanStatus) setMove(!move);
-    },
-    1000,
-    true
-  );
+
+  // JSスレッドでの点滅（useInterval + useState）
+  // reanimated の withRepeat はUIスレッドで毎フレーム更新し続けるため
+  // ActionSheetのスプリングアニメーションと競合する
+  const [showIcon, setShowIcon] = useState(false);
+  useInterval(() => {
+    if (anpanmanStatus) {
+      setShowIcon((prev) => !prev);
+    }
+  }, 1000, !!anpanmanStatus);
+
   return (
     <>
       {trainIconData.map(
@@ -140,26 +173,30 @@ export const TrainIconStatus: FC<Props> = (props) => {
             }}
             disabled={!address}
           >
-            {move ? (
-              <Image
-                source={{ uri: direction ? trainIcon : trainIconRight || trainIcon }}
-                style={{
-                  height: index > 0 ? 15 : 30,
-                  width: index > 0 ? 12 : 24,
-                  marginRight: 5,
-                  marginLeft: index > 0 ? -10 : 0,
-                  marginTop: index > 0 ? 10 : 0,
-                  //display: index == 0 ? "flex" : "none", //暫定対応：複数アイコンがある場合は最初のアイコンのみ表示
-                }}
-                resizeMethod="resize"
-              />
-            ) : (
-              <Ionicons
-                {...anpanmanStatus}
-                size={24}
-                style={{ marginRight: 5 }}
-              />
-            )}
+            <View>
+              <View style={{ opacity: anpanmanStatus && showIcon ? 0 : 1 }}>
+                <Image
+                  source={{ uri: direction ? trainIcon : trainIconRight || trainIcon }}
+                  style={{
+                    height: index > 0 ? 15 : 30,
+                    width: index > 0 ? 12 : 24,
+                    marginRight: 5,
+                    marginLeft: index > 0 ? -10 : 0,
+                    marginTop: index > 0 ? 10 : 0,
+                  }}
+                  resizeMethod="resize"
+                />
+              </View>
+              {anpanmanStatus && showIcon && (
+                <View style={{ position: "absolute", top: 0, left: 0 }}>
+                  <Ionicons
+                    {...anpanmanStatus}
+                    size={24}
+                    style={{ marginRight: 5 }}
+                  />
+                </View>
+              )}
+            </View>
           </TouchableOpacity>
         )
       )}

components/ActionSheetComponents/EachTrainInfoCore/trainViewIcon.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useEffect, useState } from "react";
 import { Ionicons } from "@expo/vector-icons";
-import { LayoutAnimation } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
 import { useThemeColors } from "@/lib/theme";
@@ -23,7 +22,6 @@ export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
     );
   }, [data.limited]);
   const onPressTrainView = () => {
-    LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
     navigate("trainbase", {
       info: "train.html?tn=" + data.trainNum,
       from,

components/ActionSheetComponents/JRSTraInfo.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef } from "react";
 import {
   View,
-  LayoutAnimation,
   ScrollView,
   Linking,
   Text,
   TouchableOpacity,
   Platform,
   BackHandler,
+  useWindowDimensions,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import dayjs from "dayjs";
@@ -22,14 +22,18 @@ import * as Sharing from "expo-sharing";
 import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
 import { BottomButtons } from "./JRSTraInfo/BottomButtons";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 export const JRSTraInfo = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
     useTrainDelayData();
   const { colors, fixed } = useThemeColors();
+  const { fontScale, moderateScale, verticalScale } = useResponsive();
   const timeData = dayjs(getTime).format("HH:mm");
   const actionSheetRef = useRef(null);
-  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+  const scrollHandlers = useScrollHandlers();
   const insets = useSafeAreaInsets();
+  const maxHeight = useSheetMaxHeight();
   const viewShot = useRef(null);
 
   const onCapture = async () => {
@@ -49,29 +53,31 @@ export const JRSTraInfo = () => {
       gestureEnabled
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
-      isModal={Platform.OS == "ios"}
-      containerStyle={
-        Platform.OS == "android" ? { paddingBottom: insets.bottom } : {}
-      }
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{
+        ...(Platform.OS == "android" ? { paddingBottom: insets.bottom } : {}),
+        ...(maxHeight != null ? { maxHeight } : {}),
+      }}
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <Handler />
       <View
         style={{
           backgroundColor: fixed.primary,
-          borderTopRadius: 5,
+          borderTopLeftRadius: 5,
+          borderTopRightRadius: 5,
           borderColor: colors.border,
           borderWidth: 1,
         }}
       >
         <ViewShot ref={viewShot} options={{ format: "jpg" }}>
           <View
-            style={{ height: 26, width: "100%", backgroundColor: fixed.primary }}
+            style={{ height: verticalScale(26), width: "100%", backgroundColor: fixed.primary }}
           >
             <View
               style={{
-                height: 6,
-                width: 45,
+                height: verticalScale(6),
+                width: moderateScale(45),
                 borderRadius: 100,
                 backgroundColor: colors.borderLight,
                 marginVertical: 10,
@@ -87,24 +93,24 @@ export const JRSTraInfo = () => {
               backgroundColor: fixed.primary,
             }}
           >
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
+            <Text style={{ fontSize: fontScale(30), fontWeight: "bold", color: fixed.textOnPrimary }}>
               列車遅延速報EX
             </Text>
             <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
+            <Text style={{ fontSize: fontScale(30), fontWeight: "bold", color: fixed.textOnPrimary }}>
               {timeData}
             </Text>
             <Ionicons
               name="reload"
               color={fixed.textOnPrimary}
-              size={30}
+              size={moderateScale(30)}
               style={{ margin: 5 }}
               onPress={() => {
-                LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
+                setLoadingDelayData(true);
               }}
             />
           </View>
-          <ScrollView {...scrollHandlers}>
+          <ScrollView {...scrollHandlers as any}>
             <View
               style={{
                 padding: 10,
@@ -125,11 +131,11 @@ export const JRSTraInfo = () => {
                   let data = d.split(" ");
                   return (
                     <View style={{ flexDirection: "row" }} key={data[1]}>
-                      <Text style={{ flex: 15, fontSize: 18, color: colors.text }}>
+                      <Text style={{ flex: 15, fontSize: fontScale(18), color: colors.text }}>
                         {data[0].replace("\n", "")}
                       </Text>
-                      <Text style={{ flex: 5, fontSize: 18, color: colors.text }}>{data[1]}</Text>
-                      <Text style={{ flex: 6, fontSize: 18, color: colors.text }}>{data[3]}</Text>
+                      <Text style={{ flex: 5, fontSize: fontScale(18), color: colors.text }}>{data[1]}</Text>
+                      <Text style={{ flex: 6, fontSize: fontScale(18), color: colors.text }}>{data[3]}</Text>
                     </View>
                   );
                 })
@@ -140,7 +146,7 @@ export const JRSTraInfo = () => {
 
             <View style={{ padding: 10, backgroundColor: fixed.primary }}>
               <Text
-                style={{ fontSize: 20, fontWeight: "bold", color: fixed.textOnPrimary }}
+                style={{ fontSize: fontScale(20), fontWeight: "bold", color: fixed.textOnPrimary }}
               >
                 列車遅延情報EXについて
               </Text>

components/ActionSheetComponents/SocialMenu.tsx

@@ -7,30 +7,32 @@ import { MaterialCommunityIcons, Foundation } from "@expo/vector-icons";
 import { Linking } from "react-native";
 import TouchableScale from "react-native-touchable-scale";
 import { useThemeColors } from "@/lib/theme";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 export const Social = () => {
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();
   const { colors, fixed } = useThemeColors();
+  const maxHeight = useSheetMaxHeight();
 
   return (
     <ActionSheet
       gestureEnabled
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
-      isModal={Platform.OS == "ios"}
-      containerStyle={
-        Platform.OS == "android"
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
-      }
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{
+        ...(Platform.OS == "android"
+          ? { paddingBottom: insets.bottom }
+          : {}),
+        ...(maxHeight != null ? { maxHeight } : {}),
+      }}
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
         style={{
           backgroundColor: fixed.primary,
-          borderTopRadius: 5,
+          borderTopLeftRadius: 5,
+          borderTopRightRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
           height: "100%",
@@ -65,6 +67,7 @@ export const Social = () => {
           <ListItem
             bottomDivider
             onPress={() => Linking.openURL("tel:0570-00-4592")}
+            // @ts-ignore: TouchableScale props passed through Component
             friction={90}
             tension={100}
             activeScale={0.95}
@@ -80,7 +83,8 @@ export const Social = () => {
                 0570-00-4592（8:00〜20:00 年中無休）
               </ListItem.Subtitle>
             </ListItem.Content>
-            <ListItem.Chevron color={fixed.textOnPrimary} />
+            {/* @ts-ignore: ListItem.Chevron doesn't expose color prop */}
+            <ListItem.Chevron color={"white"} />
           </ListItem>
           <ScrollView
             style={{
@@ -150,6 +154,7 @@ export const Social = () => {
                 bottomDivider
                 onPress={() => Linking.openURL(d.url)}
                 key={d.url}
+                // @ts-ignore: TouchableScale props passed through Component
                 friction={90} //
                 tension={100} // These props are passed to the parent component (here TouchableScale)
                 activeScale={0.95} //

components/ActionSheetComponents/SpecialTrainInfo.tsx

@@ -5,6 +5,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
 import { useThemeColors } from "@/lib/theme";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 
 type props = {
   payload: { navigate: (screen: string, params?: object) => void };
@@ -14,26 +15,27 @@ export const SpecialTrainInfo: FC<props> = ({ payload }) => {
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();
   const { colors, fixed } = useThemeColors();
+  const maxHeight = useSheetMaxHeight();
 
   return (
     <ActionSheet
       gestureEnabled
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
-      isModal={Platform.OS == "ios"}
-      containerStyle={
-        Platform.OS == "android"
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
-      }
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{
+        ...(Platform.OS == "android"
+          ? { paddingBottom: insets.bottom }
+          : {}),
+        ...(maxHeight != null ? { maxHeight } : {}),
+      }}
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
         style={{
           backgroundColor: fixed.primary,
-          borderTopRadius: 5,
+          borderTopLeftRadius: 5,
+          borderTopRightRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}

components/ActionSheetComponents/StationDeteilView.tsx

@@ -23,13 +23,16 @@ import { StationTrainPositionButton } from "./StationDeteilView/StationTrainPosi
 import { StationDiagramButton } from "./StationDeteilView/StationDiagramButton";
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
 import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 
 export const StationDeteilView = (props) => {
   if (!props.payload) return <></>;
   const { currentStation, navigate, onExit, goTo, useShow } = props.payload;
   const { width } = useWindowDimensions();
+  const { verticalScale, moderateScale } = useResponsive();
   const { busAndTrainData } = useBusAndTrainData();
-  const [trainBus, setTrainBus] = useState();
+  const [trainBus, setTrainBus] = useState<any>(undefined);
   const { colors } = useThemeColors();
 
   useEffect(() => {
@@ -38,7 +41,7 @@ export const StationDeteilView = (props) => {
       (d) => d.name === currentStation[0].Station_JP
     );
     if (data.length == 0) {
-      setTrainBus();
+      setTrainBus(undefined);
     }
     setTrainBus(data[0]);
   }, [currentStation, busAndTrainData]);
@@ -53,18 +56,18 @@ export const StationDeteilView = (props) => {
       ? getPDFViewURL(currentStation[0].StationTimeTable)
       : currentStation[0].StationTimeTable);
   const insets = useSafeAreaInsets();
+  const maxHeight = useSheetMaxHeight();
   return (
     <ActionSheet
       gestureEnabled
       CustomHeaderComponent={<></>}
-      isModal={Platform.OS == "ios"}
-      containerStyle={
-        Platform.OS == "android"
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
-      }
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{
+        ...(Platform.OS == "android"
+          ? { paddingBottom: insets.bottom }
+          : {}),
+        ...(maxHeight != null ? { maxHeight } : {}),
+      }}
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <Handler />
@@ -72,16 +75,17 @@ export const StationDeteilView = (props) => {
         key={currentStation}
         style={{
           backgroundColor: colors.sheetBackground,
-          borderTopRadius: 5,
+          borderTopLeftRadius: 5,
+          borderTopRightRadius: 5,
           borderColor: "dark",
           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,

components/ActionSheetComponents/TrainDataSources.tsx

@@ -13,6 +13,8 @@ import {
 import ActionSheet, { SheetManager, ScrollView } from "react-native-actions-sheet";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { getTrainType } from "@/lib/getTrainType";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
+import { TRAIN_TYPE_CONFIG } from "@/lib/webview/trainTypeConfig";
 import type { NavigateFunction } from "@/types";
 import type { OperationLogs, CustomTrainData } from "@/lib/CommonTypes";
 import type { UnyohubData, ElesiteData } from "@/types/unyohub";
@@ -24,6 +26,8 @@ import * as Sharing from "expo-sharing";
 
 export type TrainDataSourcesPayload = {
   trainNum: string;
+  /** UnyoHub検索用列番（上書き列番があればそちら） */
+  unyohubTrainNum?: string;
   unyohubEntries: UnyohubData[];
   elesiteEntries: ElesiteData[];
   todayOperation: OperationLogs[];
@@ -46,8 +50,8 @@ export type TrainDataSourcesPayload = {
   destinationStation?: string;
 };
 
-const HUB_LOGO_PNG = require("@/assets/icons/hub_logo.png");
-const ELESITE_LOGO_PNG = require("@/assets/icons/elesite_logo.png");
+const HUB_LOGO_PNG = require("@/assets/relationLogo/unyohub_logo.webp");
+const ELESITE_LOGO_PNG = require("@/assets/relationLogo/elesite_logo.png");
 
 /** ISO 8601 日時文字列を "HH:MM" 形式にフォーマット */
 const formatHHMM = (iso: string): string => {
@@ -89,6 +93,7 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
   const { height: windowHeight } = useWindowDimensions();
   const viewShot = useRef(null);
   const [isCapturing, setIsCapturing] = useState(false);
+  const maxHeight = useSheetMaxHeight();
 
   if (!payload) return null;
 
@@ -108,6 +113,7 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
 
   const {
     trainNum,
+    unyohubTrainNum: unyohubTrainNumProp,
     unyohubEntries,
     elesiteEntries = [],
     todayOperation,
@@ -122,6 +128,8 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
     destinationStation,
   } = payload;
 
+  const hubTrainNum = unyohubTrainNumProp || trainNum;
+
   // 進行方向の確定:
   // 1. payload.direction が明示されていればそれを使う
   // 2. customTrainData.directions が設定されていればそれを使う
@@ -136,8 +144,8 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
   const close = () => SheetManager.hide("TrainDataSources");
 
   const openWebView = (uri: string, useExitButton: boolean) => {
-    SheetManager.hide("EachTrainInfo");
     SheetManager.hide("TrainDataSources");
+    SheetManager.hide("EachTrainInfo");
     navigate("generalWebView", { uri, useExitButton });
   };
 
@@ -261,7 +269,7 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
   //   outbound → position_forward 昇順 (pos=1 が宇和島/南端側)
   //   inbound  → position_forward 降順 (pos=MAX が宇和島/南端側)
   const matchedDirection = nonEmptyFormationEntries[0]?.trains?.find(
-    (t) => t.train_number === trainNum,
+    (t) => t.train_number === hubTrainNum,
   )?.direction;
   const hubSortDescending = matchedDirection === "inbound";
 
@@ -269,10 +277,10 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
     [...nonEmptyFormationEntries]
       .sort((a, b) => {
         const posA =
-          a.trains?.find((t) => t.train_number === trainNum)
+          a.trains?.find((t) => t.train_number === hubTrainNum)
             ?.position_forward ?? 0;
         const posB =
-          b.trains?.find((t) => t.train_number === trainNum)
+          b.trains?.find((t) => t.train_number === hubTrainNum)
             ?.position_forward ?? 0;
         return hubSortDescending ? posB - posA : posA - posB;
       })
@@ -409,8 +417,8 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
     <ActionSheet
       gestureEnabled
       CustomHeaderComponent={<></>}
-      isModal={Platform.OS === "ios"}
-      containerStyle={{ backgroundColor: colors.sheetBackground }}
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{ backgroundColor: colors.sheetBackground, ...(maxHeight != null ? { maxHeight } : {}) }}
     >
       <View pointerEvents={isCapturing ? "none" : "auto"}>
       <ViewShot ref={viewShot} options={{ format: "jpg" }}>
@@ -419,7 +427,15 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
           <View style={[styles.handleBar, { backgroundColor: colors.border }]} />
           <View style={styles.headerRow}>
             <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>運用情報ソース</Text>
-            <Text style={[styles.headerSub, { color: colors.textTertiary }]}>{trainNum}</Text>
+            {customTrainData?.train_number_override ? (
+              <CyclingHeaderTrainNum
+                original={trainNum}
+                override={customTrainData.train_number_override}
+                color={colors.textTertiary}
+              />
+            ) : (
+              <Text style={[styles.headerSub, { color: colors.textTertiary }]}>{trainNum}</Text>
+            )}
           </View>
         </View>
 
@@ -480,7 +496,7 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
             disabled={unyoCount === 0}
             onPress={() =>
               openWebView(
-                `https://jr-shikoku-data-system.pages.dev/unyohub-connection-train-data/${trainNum}`,
+                `https://jr-shikoku-data-system.pages.dev/unyohub-connection-train-data/${hubTrainNum}`,
                 true,
               )
             }
@@ -558,6 +574,47 @@ const DirectionBanner: FC<{ direction: boolean }> = ({ direction }) => {
   );
 };
 
+/* ------------------------------------------------------------------ */
+/* CyclingHeaderTrainNum: 上書き列番と通常列番をフェードで切り替え       */
+/* ------------------------------------------------------------------ */
+const CyclingHeaderTrainNum: FC<{
+  original: string;
+  override: string;
+  color: string;
+}> = ({ original, override, color }) => {
+  const [showOverride, setShowOverride] = useState(true);
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {
+        setShowOverride((prev) => !prev);
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }).start();
+      });
+    }, 3000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Animated.View style={[styles.headerTrainNumWrap, { opacity }]}>
+      <Text style={[styles.headerSub, { color }]}>
+        {showOverride ? override : original}
+      </Text>
+      <Text style={[styles.headerTrainNumLabel, { color }]}>
+        {showOverride ? "上書" : "通常"}
+      </Text>
+    </Animated.View>
+  );
+};
+
 /* ------------------------------------------------------------------ */
 /* RefDirectionBanner: 基準方向ラベル                                   */
 /* ------------------------------------------------------------------ */
@@ -756,11 +813,13 @@ const TrainInfoDetail: FC<{
     uwasa,
     optional_text,
   } = data;
-  const { color: typeColor, fontAvailable } = getTrainType({
+  const { fontAvailable } = getTrainType({
     type: data.type,
     whiteMode: false,
   });
-  const resolvedTypeColor = typeColor === "white" ? "#333333ff" : typeColor;
+  // 位置情報表示と同じ種別色を使用（視認性向上）
+  const trainTypeCfg = TRAIN_TYPE_CONFIG[data.type];
+  const resolvedTypeColor = trainTypeCfg ? trainTypeCfg.typeColor : "#333333ff";
   // to_data がなければダイヤの終着駅をフォールバック
   const destDisplay = data.to_data || destinationStation || "";
   const hasAny =
@@ -1018,6 +1077,15 @@ const styles = StyleSheet.create({
   headerSub: {
     fontSize: 14,
   },
+  headerTrainNumWrap: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 4,
+  },
+  headerTrainNumLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+  },
   trainHeaderRow: {
     flexDirection: "row",
     alignItems: "center",

components/ActionSheetComponents/TrainIconUpdate.tsx

@@ -18,6 +18,7 @@ import { getAppIconName } from "expo-alternate-app-icons";
 import { AS } from "@/storageControl";
 import { STORAGE_KEYS } from "@/constants";
 import { useThemeColors } from "@/lib/theme";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 export const TrainIconUpdate = () => {
   const [iconList] = useState(icons());
   const [currentIcon] = useState(getAppIconName());
@@ -25,6 +26,7 @@ export const TrainIconUpdate = () => {
   const insets = useSafeAreaInsets();
   const viewShot = useRef(null);
   const { colors, fixed } = useThemeColors();
+  const maxHeight = useSheetMaxHeight();
 
   const onCapture = async () => {
     const url = await viewShot.current.capture();
@@ -46,22 +48,22 @@ export const TrainIconUpdate = () => {
         AS.setItem(STORAGE_KEYS.ICON_SETTING, "false");
       }}
       ref={actionSheetRef}
-      isModal={Platform.OS == "ios"}
-      containerStyle={
-        Platform.OS == "android"
-          ? {
-              paddingBottom: insets.bottom,
-            }
-          : {}
-      }
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{
+        ...(Platform.OS == "android"
+          ? { paddingBottom: insets.bottom }
+          : {}),
+        ...(maxHeight != null ? { maxHeight } : {}),
+      }}
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <Handler />
       <View
         style={{
           backgroundColor: fixed.primary,
-          borderTopRadius: 5,
-          borderColor: "dark",
+          borderTopLeftRadius: 5,
+          borderTopRightRadius: 5,
+          borderColor: colors.border,
           borderWidth: 1,
         }}
       >
@@ -117,7 +119,7 @@ export const TrainIconUpdate = () => {
                   resizeMode="contain"
                 />
               </View>
-              <Text>JR四国非公式アプリ</Text>
+              <Text style={{ color: colors.text }}>JR四国非公式アプリ</Text>
             </View>
           ) : (
             <></>

components/ActionSheetComponents/TrainMenuLineSelector.tsx

@@ -13,6 +13,7 @@ import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import lineColorList from "../../assets/originData/lineColorList";
 import { stationIDPair, lineListPair } from "../../lib/getStationList";
 import { useThemeColors } from "@/lib/theme";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 
 export const TrainMenuLineSelector = () => {
   const {
@@ -25,13 +26,17 @@ export const TrainMenuLineSelector = () => {
   const insets = useSafeAreaInsets();
   const platformIs = Platform.OS == "android";
   const { colors, fixed } = useThemeColors();
+  const maxHeight = useSheetMaxHeight();
   return (
     <ActionSheet
       gestureEnabled
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
-      isModal={Platform.OS == "ios"}
-      containerStyle={platformIs ? { paddingBottom: insets.bottom } : {}}
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{
+        ...(platformIs ? { paddingBottom: insets.bottom } : {}),
+        ...(maxHeight != null ? { maxHeight } : {}),
+      }}
       useBottomSafeAreaPadding={platformIs}
     >
       <Handler />

components/ActionSheetComponents/sheets.d.ts

@@ -0,0 +1,14 @@
+import { SheetDefinition } from "react-native-actions-sheet";
+
+declare module "react-native-actions-sheet" {
+  interface Sheets {
+    EachTrainInfo: SheetDefinition<{ payload: any }>;
+    JRSTraInfo: SheetDefinition;
+    StationDetailView: SheetDefinition<{ payload: any }>;
+    TrainMenuLineSelector: SheetDefinition<{ payload: any }>;
+    TrainIconUpdate: SheetDefinition<{ payload: any }>;
+    SpecialTrainInfo: SheetDefinition<{ payload: any }>;
+    Social: SheetDefinition;
+    TrainDataSources: SheetDefinition;
+  }
+}

components/ActionSheetComponents/sheets.ts

@@ -1,4 +1,4 @@
-import { registerSheet } from "react-native-actions-sheet";
+import { registerSheet, SheetDefinition } from "react-native-actions-sheet";
 import { EachTrainInfo } from "./EachTrainInfo";
 import { JRSTraInfo } from "./JRSTraInfo";
 import { StationDeteilView } from "./StationDeteilView";
@@ -18,3 +18,16 @@ registerSheet("Social", Social);
 registerSheet("TrainDataSources", TrainDataSources);
 
 export {};
+
+declare module "react-native-actions-sheet" {
+  interface Sheets {
+    EachTrainInfo: SheetDefinition<{ payload: any }>;
+    JRSTraInfo: SheetDefinition;
+    StationDetailView: SheetDefinition<{ payload: any }>;
+    TrainMenuLineSelector: SheetDefinition<{ payload: any }>;
+    TrainIconUpdate: SheetDefinition<{ payload: any }>;
+    SpecialTrainInfo: SheetDefinition<{ payload: any }>;
+    Social: SheetDefinition;
+    TrainDataSources: SheetDefinition;
+  }
+}

components/ActionSheetComponents/useSheetMaxHeight.ts

@@ -0,0 +1,11 @@
+import { useWindowDimensions } from "react-native";
+
+/**
+ * スマホ（短辺 < 600dp）のみ maxHeight を返す。タブレットでは undefined。
+ */
+export function useSheetMaxHeight(ratio = 0.7): number | undefined {
+  const { width, height } = useWindowDimensions();
+  const shortSide = Math.min(width, height);
+  if (shortSide >= 600) return undefined; // タブレット
+  return height * ratio;
+}

components/AllTrainDiagramView.tsx

@@ -26,7 +26,7 @@ import { getStringConfig } from "@/lib/getStringConfig";
 
 export const AllTrainDiagramView: FC = () => {
   const { colors, fixed } = useThemeColors();
-  const { goBack, navigate } = useNavigation();
+  const { goBack, navigate } = useNavigation<any>();
   const tabBarHeight = useBottomTabBarHeight();
   const {
     keyList,
@@ -344,11 +344,12 @@ export const AllTrainDiagramView: FC = () => {
         >
           <TextInput
             placeholder="列番・列車名を入力してフィルタリングします。"
+            placeholderTextColor={colors.textTertiary}
             onFocus={() => {}}
             onEndEditing={() => {}}
             onChange={(ret) => setInput(ret.nativeEvent.text)}
             value={input}
-            style={{ flex: 1 }}
+            style={{ flex: 1, color: colors.text }}
           />
         </View>
       </View>