Merge commit '83539d5df30b6569bf7259d7ef79400b6f88a5e3' into patch/6.x

App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Platform, UIManager } from "react-native";
+import { Platform, UIManager, Text } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { AppContainer } from "./Apps";
 import { UpdateAsync } from "./UpdateAsync";
@@ -18,6 +18,7 @@ import { TrainMenuProvider } from "./stateBox/useTrainMenu";
 import { buildProvidersTree } from "./lib/providerTreeProvider";
 import { StationListProvider } from "./stateBox/useStationList";
 import { NotificationProvider } from "./stateBox/useNotifications";
+import { UserPositionProvider } from "./stateBox/useUserPosition";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -31,11 +32,17 @@ if (Platform.OS === "android") {
 }
 
 export default function App() {
-  useEffect(() => UpdateAsync(), []);
-
+  useEffect(() => {
+    UpdateAsync();
+  }, []);
+  if (Text.defaultProps == null) {
+    Text.defaultProps = {};
+    Text.defaultProps.allowFontScaling = false;
+  }
   const ProviderTree = buildProvidersTree([
     AllTrainDiagramProvider,
     NotificationProvider,
+    UserPositionProvider,
     StationListProvider,
     FavoriteStationProvider,
     TrainDelayDataProvider,

Apps.js

@@ -28,6 +28,7 @@ export function AppContainer() {
     "JR-Nishi": require("./assets/fonts/jr-nishi.otf"),
     Zou: require("./assets/fonts/DelaGothicOne-Regular.ttf"),
     "JNR-font": require("./assets/fonts/JNRfont_pict.ttf"),
+    "DiaPro": require("./assets/fonts/DiaPro-Regular.otf"),
   });
   return (
     <NavigationContainer ref={navigationRef}>

GeneralWebView.tsx

@@ -0,0 +1,30 @@
+import React, { CSSProperties } from "react";
+import { View, ViewProps } from "react-native";
+import { WebView } from "react-native-webview";
+import { BigButton } from "./components/atom/BigButton";
+import { useNavigation } from "@react-navigation/native";
+export default ({ route }) => {
+  if (!route.params) {
+    return null;
+  }
+  const { uri, useExitButton = true } = route.params;
+  const { goBack } = useNavigation();
+  return (
+    <View style={styles}>
+      <WebView
+        useWebKit
+        source={{ uri }}
+        onMessage={(event) => {
+          const { data } = event.nativeEvent;
+          const {type} = JSON.parse(data);
+          if (type === "windowClose") return goBack();
+        }}
+      />
+      {useExitButton && <BigButton onPress={goBack} string="閉じる" />}
+    </View>
+  );
+};
+const styles: ViewProps["style"] = {
+  height: "100%",
+  backgroundColor: "#0099CC",
+};

MenuPage.js

@@ -1,93 +0,0 @@
-import React, { useEffect } from "react";
-import { createStackNavigator } from "@react-navigation/stack";
-import { SheetManager } from "react-native-actions-sheet";
-import { AS } from "./storageControl";
-import TrainBase from "./components/trainbaseview";
-import HowTo from "./howto";
-import Menu from "./menu";
-import News from "./components/news";
-import Setting from "./components/Settings/settings";
-import { useFavoriteStation } from "./stateBox/useFavoriteStation";
-import { optionData } from "./lib/stackOption";
-import AllTrainDiagramView from "./components/AllTrainDiagramView";
-import { useCurrentTrain } from "./stateBox/useCurrentTrain";
-import { useNavigation } from "@react-navigation/native";
-import { news } from "./config/newsUpdate";
-const Stack = createStackNavigator();
-
-export function MenuPage() {
-  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
-  const { getCurrentTrain } = useCurrentTrain();
-  const navigation = useNavigation();
-  const { addListener } = navigation;
-  useEffect(() => {
-    AS.getItem("startPage")
-      .then((res) => {
-        if (res == "true") navigation.navigate("positions");
-      })
-      .catch((e) => {
-        //6.0以降false
-        AS.setItem("startPage", "false");
-      });
-
-    //ニュース表示
-    AS.getItem("status")
-      .then((d) => {
-        if (d != news) navigation.navigate("topMenu", { screen: "news" });
-      })
-      .catch(() => navigation.navigate("topMenu", { screen: "news" }));
-    AS.getItem("isSetIcon")
-      .then((isSetIcon) => {
-        if (isSetIcon == "true") SheetManager.show("TrainIconUpdate");
-      })
-      .catch((error) => console.error("Error fetching icon setting:", error));
-  }, []);
-  useEffect(() => {
-    const unsubscribe = addListener("tabPress", (e) => {
-      AS.getItem("favoriteStation")
-        .then((d) => {
-          const returnData = JSON.parse(d);
-          if (favoriteStation.toString() != d) {
-            setFavoriteStation(returnData);
-          }
-        })
-        .catch((d) => console.log(d));
-    });
-
-    return unsubscribe;
-  }, [navigation]);
-  return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="menu"
-        options={{
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-        }}
-        children={() => <Menu getCurrentTrain={getCurrentTrain} />}
-      />
-      <Stack.Screen name="news" options={optionData} component={News} />
-      <Stack.Screen
-        name="setting"
-        options={{
-          ...optionData,
-          gestureEnabled: false,
-          cardOverlayEnabled: true,
-        }}
-        component={Setting}
-      />
-      <Stack.Screen
-        name="trainbase"
-        options={{ ...optionData }}
-        component={TrainBase}
-      />
-      <Stack.Screen
-        name="AllTrainIDList"
-        options={{ ...optionData, gestureEnabled: false }}
-        component={AllTrainDiagramView}
-      />
-      <Stack.Screen name="howto" options={optionData} component={HowTo} />
-    </Stack.Navigator>
-  );
-}

MenuPage.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { useWindowDimensions, Platform } from "react-native";
+import Constants from "expo-constants";
+
+import { Dimensions, StatusBar } from "react-native";
+
+import { SheetManager } from "react-native-actions-sheet";
+import { AS } from "@/storageControl";
+import TrainBase from "@/components/trainbaseview";
+import HowTo from "@/howto";
+import { Menu } from "@/menu";
+import News from "@/components/news";
+import Setting from "@/components/Settings/settings";
+import { useFavoriteStation } from "@/stateBox/useFavoriteStation";
+import { optionData } from "@/lib/stackOption";
+import AllTrainDiagramView from "@/components/AllTrainDiagramView";
+import { useNavigation } from "@react-navigation/native";
+import { news } from "@/config/newsUpdate";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import GeneralWebView from "@/GeneralWebView";
+import { StationDiagramView } from "@/components/StationDiagram/StationDiagramView";
+const Stack = createStackNavigator();
+
+export function MenuPage() {
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const { height, width } = useWindowDimensions();
+  const tabBarHeight = useBottomTabBarHeight();
+  const navigation = useNavigation();
+  const { addListener } = navigation;
+  useEffect(() => {
+    AS.getItem("startPage")
+      .then((res) => {
+        if (res == "true") navigation.navigate("positions");
+      })
+      .catch((e) => {
+        //6.0以降false
+        AS.setItem("startPage", "false");
+      });
+
+    //ニュース表示
+    AS.getItem("status")
+      .then((d) => {
+        if (d != news) navigation.navigate("topMenu", { screen: "news" });
+      })
+      .catch(() => navigation.navigate("topMenu", { screen: "news" }));
+    AS.getItem("isSetIcon")
+      .then((isSetIcon) => {
+        if (isSetIcon == "true") SheetManager.show("TrainIconUpdate");
+      })
+      .catch((error) => console.error("Error fetching icon setting:", error));
+  }, []);
+
+  const scrollRef = useRef(null);
+  const [mapMode, setMapMode] = useState(false);
+  const [mapHeight, setMapHeight] = useState(0);
+  useEffect(() => {
+    const MapHeight =
+      height -
+      tabBarHeight +
+      (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
+      100 -
+      ((((width / 100) * 80) / 20) * 9 + 10 + 30);
+    setMapHeight(MapHeight);
+  }, [height, tabBarHeight, width]);
+  const [MapFullHeight, setMapFullHeight] = useState(0);
+  useEffect(() => {
+    const MapFullHeight =
+      height -
+      tabBarHeight +
+      (Platform.OS == "android" ? Constants.statusBarHeight : 0);
+    setMapFullHeight(MapFullHeight);
+  }, [height, tabBarHeight, width]);
+  useEffect(() => {
+    const unsubscribe = addListener("tabPress", (e) => {
+      scrollRef.current.scrollTo({
+        y: mapHeight - 80,
+        animated: true,
+      });
+      setMapMode(false);
+      AS.getItem("favoriteStation")
+        .then((d) => {
+          const returnData = JSON.parse(d);
+          if (favoriteStation.toString() != d) {
+            setFavoriteStation(returnData);
+          }
+        })
+        .catch((error) => {
+          if (__DEV__) {
+            console.warn("お気に入り駅の読み込みに失敗しました:", error);
+          }
+        });
+    });
+
+    return unsubscribe;
+  }, [navigation, mapHeight, favoriteStation, setFavoriteStation]);
+  return (
+    <Stack.Navigator id={null}>
+      <Stack.Screen
+        name="menu"
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+        children={() => (
+          <Menu
+            scrollRef={scrollRef}
+            mapHeight={mapHeight}
+            MapFullHeight={MapFullHeight}
+            mapMode={mapMode}
+            setMapMode={setMapMode}
+          />
+        )}
+      />
+      <Stack.Screen
+        name="stDiagram"
+        options={{ ...optionData, gestureEnabled: false }}
+        component={StationDiagramView}
+      />
+      <Stack.Screen name="news" options={optionData} component={News} />
+      <Stack.Screen
+        name="setting"
+        options={{
+          ...optionData,
+          gestureEnabled: false,
+          cardOverlayEnabled: true,
+        }}
+        component={Setting}
+      />
+      <Stack.Screen
+        name="trainbase"
+        options={{ ...optionData }}
+        component={TrainBase}
+      />
+      <Stack.Screen
+        name="AllTrainIDList"
+        options={{ ...optionData, gestureEnabled: false }}
+        component={AllTrainDiagramView}
+      />
+      <Stack.Screen name="howto" options={optionData} component={HowTo} />
+      <Stack.Screen
+        name="generalWebView"
+        options={optionData}
+        component={GeneralWebView}
+      />
+    </Stack.Navigator>
+  );
+}

Top.tsx

@@ -13,13 +13,15 @@ import { useTrainMenu } from "./stateBox/useTrainMenu";
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { Linking, Platform } from "react-native";
+import GeneralWebView from "./GeneralWebView";
+import { StationDiagramView } from "@/components/StationDiagram/StationDiagramView";
 const Stack = createStackNavigator();
 export const Top = () => {
   const { webview } = useCurrentTrain();
   const { navigate, addListener, isFocused } = useNavigation();
 
   //地図用
-  const { injectJavaScript, mapSwitch } = useTrainMenu();
+  const { mapSwitch } = useTrainMenu();
 
   const goToFavoriteList = () =>
     navigate("positions", { screen: "favoriteList" });
@@ -36,7 +38,8 @@ export const Top = () => {
       return;
     }
     if (!isFocused()) navigate("positions", { screen: "Apps" });
-    else if (mapSwitch == "true") navigate("positions", { screen: "trainMenu" });
+    else if (mapSwitch == "true")
+      navigate("positions", { screen: "trainMenu" });
     else webview.current?.injectJavaScript(`AccordionClassEvent()`);
     return;
   };
@@ -44,10 +47,10 @@ export const Top = () => {
   useEffect(() => {
     const unsubscribe = addListener("tabPress", goToTrainMenu);
     return unsubscribe;
-  }, [addListener, mapSwitch, injectJavaScript]);
+  }, [addListener, mapSwitch]);
 
   return (
-    <Stack.Navigator detachInactiveScreens={false}>
+    <Stack.Navigator id={null} detachInactiveScreens={false}>
       <Stack.Screen
         name="Apps"
         options={{
@@ -63,7 +66,17 @@ export const Top = () => {
         options={{ ...optionData }}
         component={TrainBase}
       />
+      <Stack.Screen
+        name="stDiagram"
+        options={{ ...optionData, gestureEnabled: false }}
+        component={StationDiagramView}
+      />
       <Stack.Screen name="howto" options={optionData} component={HowTo} />
+      <Stack.Screen
+        name="generalWebView"
+        options={optionData}
+        component={GeneralWebView}
+      />
       <Stack.Screen name="news" options={optionData} component={News} />
       <Stack.Screen
         name="trainMenu"

app.json

@@ -7,7 +7,7 @@
       "android",
       "web"
     ],
-    "version": "6.0.1",
+    "version": "6.0.4",
     "orientation": "default",
     "icon": "./assets/icons/s8600.png",
     "splash": {
@@ -22,7 +22,7 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "47",
+      "buildNumber": "50",
       "supportsTablet": false,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "config": {

assets/四国旅客鉄道徳島線.json

@@ -1,6 +1,29 @@
 {
   "type": "FeatureCollection",
   "features": [
+    {
+      "properties": {
+        "name": "阿波池田",
+        "uri": "https://uedayou.net/jrslod/四国旅客鉄道/土讃線/阿波池田",
+        "color": "E25885"
+      },
+      "type": "Feature",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [133.80429, 34.02714],
+          [133.80515, 34.02656]
+        ]
+      }
+    },
+    {
+      "properties": {
+        "name": "阿波池田",
+        "uri": "https://uedayou.net/jrslod/四国旅客鉄道/土讃線/阿波池田"
+      },
+      "type": "Feature",
+      "geometry": { "type": "Point", "coordinates": [133.80429, 34.02714] }
+    },
     {
       "properties": {
         "name": "佃",
@@ -561,6 +584,29 @@
       "type": "Feature",
       "geometry": { "type": "Point", "coordinates": [134.53819, 34.08082] }
     },
+    {
+      "properties": {
+        "name": "徳島",
+        "uri": "https://uedayou.net/jrslod/四国旅客鉄道/高徳線/徳島",
+        "color": "9ACD32"
+      },
+      "type": "Feature",
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [134.55251, 34.07404],
+          [134.55049, 34.07498]
+        ]
+      }
+    },
+    {
+      "properties": {
+        "name": "徳島",
+        "uri": "https://uedayou.net/jrslod/四国旅客鉄道/高徳線/徳島"
+      },
+      "type": "Feature",
+      "geometry": { "type": "Point", "coordinates": [134.55251, 34.07404] }
+    },
     {
       "properties": {
         "name": "徳島線",

components/ActionSheetComponents/EachTrainInfo/EachStopList.js

@@ -1,157 +0,0 @@
-import React from "react";
-import { View, Text, TouchableWithoutFeedback } from "react-native";
-import dayjs from "dayjs";
-import lineColorList from "../../../assets/originData/lineColorList";
-
-export const EachStopList = ({
-  i,
-  index,
-  stationList,
-  points,
-  currentTrainData,
-  openStationACFromEachTrainInfo,
-  showThrew,
-}) => {
-  if (!showThrew && i.split(",")[1] == "通過") return null;
-  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
-  const Stations = stationList
-    .map((a) => a.filter((d) => d.StationName == station))
-    .reduce((newArray, e) => newArray.concat(e), []);
-  /*Array [
-        Object {
-          "StationName": "佐古",
-          "StationNumber": "T01",
-        },
-        Object {
-          "StationName": "佐古",
-          "StationNumber": "B01",
-        },
-      ] */
-  const StationNumbers =
-    Stations &&
-    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
-  // Array [  "T01",  "B01",]
-  const lineIDs = [];
-  const EachIDs = [];
-  StationNumbers.forEach((d) => {
-    const textArray = d.split("");
-    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
-    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
-  });
-  // Array [  "T",  "B",]
-  // Array [  "01",  "01",]
-
-  const dates = dayjs()
-    .set("hour", parseInt(time.split(":")[0]))
-    .set("minute", parseInt(time.split(":")[1]))
-    .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
-  const timeString = se == "通過" ? "" : dates.format("HH:mm").split(":");
-  const onClickStateText = (string) => {
-    if (string != "通過") return;
-    alert("この駅は通過駅です");
-  };
-  return (
-    <TouchableWithoutFeedback
-      onPress={() =>
-        openStationACFromEachTrainInfo &&
-        openStationACFromEachTrainInfo(station)
-      }
-      key={station}
-    >
-      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
-        <View
-          style={{
-            width: 35,
-            position: "relative",
-            marginHorizontal: 15,
-            flexDirection: "row",
-            height: "101%",
-          }}
-        >
-          {lineIDs.map((lineID, index) => (
-            <View
-              style={{
-                backgroundColor: `${lineColorList[lineID]}${
-                  se == "通過" ? "80" : ""
-                }`,
-                flex: 1,
-              }}
-              key={lineID}
-            >
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{
-                  color: "white",
-                  textAlign: "center",
-                  fontSize: 10,
-                  fontWeight: "bold",
-                }}
-              >
-                {lineIDs[index]}
-                {"\n"}
-                {EachIDs[index]}
-              </Text>
-              <View style={{ flex: 1 }} />
-            </View>
-          ))}
-        </View>
-        <View
-          style={{
-            padding: 8,
-            flexDirection: "row",
-            borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
-            flex: 1,
-          }}
-        >
-          <Text
-            style={{ fontSize: 20, color: `#000${se == "通過" ? "5" : ""}` }}
-          >
-            {station}
-          </Text>
-          <View style={{ flex: 1 }} />
-          <View style={{ position: "relative", width: 0 }}>
-            {points ? (
-              <Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
-                🚊
-              </Text>
-            ) : null}
-          </View>
-
-          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
-            <Text
-              style={{
-                fontSize: 15,
-                color: "black",
-                width: 60,
-                position: "absolute",
-                right: 120,
-                textAlign: "right",
-                textDecorationLine: "line-through",
-              }}
-            >
-              {time}
-            </Text>
-          )}
-          <Text
-            style={{
-              fontSize: 20,
-              color: isNaN(currentTrainData?.delay)
-                ? "black"
-                : currentTrainData?.delay == 0
-                ? "black"
-                : "red",
-              width: 60,
-            }}
-            onPress={() => onClickStateText(se)}
-          >
-            {se == "通過" ? "レ" : `${timeString[0]}:${timeString[1]}`}
-          </Text>
-          <Text style={{ fontSize: 18, width: 50 }}>
-            {se?.replace("発", "出発").replace("着", "到着")}
-          </Text>
-        </View>
-      </View>
-    </TouchableWithoutFeedback>
-  );
-};

components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

@@ -0,0 +1,237 @@
+import React, { FC } from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import dayjs from "dayjs";
+import lineColorList from "../../../assets/originData/lineColorList";
+
+type seTypes =
+  | "発編"
+  | "着編"
+  | "通編"
+  | "頃編"
+  | "発"
+  | "着"
+  | "休編"
+  | "通休編"
+  | string;
+
+type currentTrainDataType = {
+  Index: number;
+  num: string;
+  delay: "入線" | number | undefined;
+  Pos: string;
+  PosNum: number;
+  Direction: number;
+  Type: string;
+  Line: string;
+};
+type props = {
+  i: string;
+  index: number;
+  stationList: { StationName: string; StationNumber: string }[][];
+  points: boolean;
+  currentTrainData?: currentTrainDataType;
+  openStationACFromEachTrainInfo?: (station: string) => void;
+  showThrew: boolean;
+};
+export const EachStopList: FC<props> = ({
+  i,
+  index,
+  stationList,
+  points,
+  currentTrainData,
+  openStationACFromEachTrainInfo,
+  showThrew,
+}) => {
+  const [station, se, time] = i.split(",") as [string, seTypes, string]; // 阿波池田,発,6:21
+  if (!showThrew) {
+    if (se == "通過") return null;
+    if (se == "通編") return null;
+    if (se == "通休編") return null;
+  }
+  const Stations = stationList
+    .map((a) => a.filter((d) => d.StationName == station))
+    .reduce((newArray, e) => newArray.concat(e), []);
+  /*Array [
+        Object {
+          "StationName": "佐古",
+          "StationNumber": "T01",
+        },
+        Object {
+          "StationName": "佐古",
+          "StationNumber": "B01",
+        },
+      ] */
+  const StationNumbers =
+    Stations &&
+    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
+  const [seString, seType] = (() => {
+    switch (se) {
+      case "発":
+        return ["出発", "normal"];
+      case "着":
+        return ["到着", "normal"];
+      case "発編":
+        return ["出発", "community"];
+      case "着編":
+        return ["到着", "community"];
+      case "通編":
+        return ["通過", "community"];
+      case "頃編":
+        return ["頃", "community"];
+      case "休編":
+      case "通休編":
+        return ["運休", "community"];
+      default:
+        return [se, "normal"];
+    }
+  })();
+  // Array [  "T01",  "B01",]
+  // Array [  "T",  "B",]
+  // Array [  "01",  "01",]
+
+  const textColor = `#${seType == "community" ? "44f" : "000"}${
+    se == "通過" || se == "通編" || se == "通休編" ? "5" : ""
+  }`;
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        openStationACFromEachTrainInfo &&
+        openStationACFromEachTrainInfo(station)
+      }
+      key={station}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          backgroundColor: (se != "休編" && se != "通休編") ? "#ffffffc2" : "#474747c2",
+        }}
+      >
+        <View
+          style={{
+            width: 35,
+            position: "relative",
+            marginHorizontal: 15,
+            flexDirection: "row",
+            height: "101%",
+          }}
+        >
+          {StationNumbers.map((stn, index) => (
+            <StationNumbersBox stn={stn} se={se} key={index} />
+          ))}
+        </View>
+        <View
+          style={{
+            padding: 8,
+            flexDirection: "row",
+            borderBottomWidth: 1,
+            borderBottomColor: "#f0f0f0",
+            flex: 1,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 20,
+              color: textColor,
+              fontStyle: seType == "community" ? "italic" : "normal",
+            }}
+          >
+            {station}
+          </Text>
+          <View style={{ flex: 1 }} />
+          <View style={{ position: "relative", width: 0 }}>
+            {points && (
+              <Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
+                🚊
+              </Text>
+            )}
+          </View>
+
+          {!!currentTrainData?.delay &&
+            currentTrainData?.delay != "入線" &&
+            currentTrainData?.delay != 0 && (
+              <Text
+                style={{
+                  fontSize: 15,
+                  color: textColor,
+                  width: 60,
+                  position: "absolute",
+                  right: 120,
+                  textAlign: "right",
+                  textDecorationLine: "line-through",
+                  fontStyle: seType == "community" ? "italic" : "normal",
+                }}
+              >
+                {time}
+              </Text>
+            )}
+          <StationTimeBox
+            delay={currentTrainData?.delay}
+            textColor={textColor}
+            seType={seType}
+            se={se}
+            time={time}
+          />
+          <Text style={{ fontSize: 18, width: 50, color: textColor }}>
+            {seString}
+          </Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
+  const { stn, se } = props;
+  const lineColor = lineColorList[stn.charAt(0)];
+  const hasThrew = (se == "通過" || se == "通編" || se == "通休編") ? "80" : "";
+  const backgroundColor = `${lineColor}${hasThrew}`;
+  return (
+    <View style={{ backgroundColor, flex: 1 }} key={stn}>
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          fontSize: 10,
+          fontWeight: "bold",
+        }}
+      >
+        {stn.charAt(0)}
+        {"\n"}
+        {stn.slice(1)}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </View>
+  );
+};
+
+type StationTimeBoxType = {
+  delay: "入線" | number | undefined;
+  textColor: string;
+  seType: seTypes;
+  se: string;
+  time: string;
+};
+
+const StationTimeBox: FC<StationTimeBoxType> = (props) => {
+  const { delay, textColor, seType, se, time } = props;
+  const dates = dayjs()
+    .set("hour", parseInt(time.split(":")[0]))
+    .set("minute", parseInt(time.split(":")[1]))
+    .add(delay == "入線" || delay == undefined ? 0 : delay, "minute");
+  return (
+    <Text
+      style={{
+        fontSize: 20,
+        color:
+          delay != "入線" && delay != undefined
+            ? delay != 0 && "red"
+            : textColor,
+        width: 60,
+        fontStyle: seType == "community" ? "italic" : "normal",
+      }}
+    >
+      {se.includes("通") && time == "" ? "レ" : dates.format("HH:mm")}
+    </Text>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js

@@ -1,47 +0,0 @@
-import React from "react";
-import { View, Text, ScrollView, useWindowDimensions } from "react-native";
-
-export const LandscapeTrainInfo = (props) => {
-  const { leftContent, topStickyContent, children, scrollHandlers } = props;
-  const { height, width } = useWindowDimensions();
-  return (
-    <View
-      style={{
-        flexDirection: "row",
-        backgroundColor: "blue",
-        width: width,
-        height: (height / 100) * 70,
-        marginBottom: 50,
-      }}
-    >
-      <View
-        style={{
-          flexDirection: "column",
-          height: (height / 100) * 70,
-          width: width / 2,
-        }}
-      >
-        <Text>{width / 2}</Text>
-        {leftContent}
-      </View>
-      <ScrollView
-        {...scrollHandlers}
-        style={{
-          width: width / 2,
-          height: "auto",
-        }}
-        stickyHeaderIndices={[1]}
-        scrollEventThrottle={16}
-        onScroll={(d) => {
-          console.log(d.nativeEvent.contentOffset.y);
-        }}
-      >
-        <View style={{ height: 0 }} />
-        <View style={{ flexDirection: "column" }} index={1}>
-          {topStickyContent}
-        </View>
-        {children}
-      </ScrollView>
-    </View>
-  );
-};

components/ActionSheetComponents/EachTrainInfo/LongHeader.tsx

@@ -1,8 +1,15 @@
-import React from "react";
+import React, { FC } from "react";
 import { ScrollView } from "react-native";
 import { TrainDataView } from "./TrainDataView";
-
-export const LongHeader = ({
+import { trainDataType } from "@/lib/trainPositionTextArray";
+type props = {
+  currentTrainData: trainDataType;
+  currentPosition: string[] | undefined;
+  nearTrainIDList: string[];
+  openTrainInfo: (f: string) => void;
+  navigate: (screen: string, data?: any) => void;
+}
+export const LongHeader:FC<props> = ({
   currentTrainData,
   currentPosition,
   nearTrainIDList,
@@ -11,14 +18,8 @@ export const LongHeader = ({
 }) => {
   return (
     <ScrollView
-      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
       style={{
         flexDirection: "row",
-        //width: widthPercentageToDP("200%"),
-        // minHeight: 200,
-        //height: heightPercentageToDP("20%"),
       }}
       horizontal
       pagingEnabled

components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

@@ -0,0 +1,122 @@
+import { trainPosition } from "@/lib/trainPositionTextArray";
+import React, { FC } from "react";
+import { View, Text, TextStyle, ViewStyle } from "react-native";
+
+type stateBox = {
+  currentTrainData: any;
+  platformNumber: any;
+  title: string;
+  style?: ViewStyle;
+  mode?: number;
+  platformDescription: string;
+  lineNumber: string;
+};
+export const PositionBox: FC<stateBox> = (props) => {
+  const {
+    currentTrainData,
+    platformNumber,
+    title,
+    style,
+    mode,
+    platformDescription,
+    lineNumber,
+  } = props;
+  let firstText = "";
+  let secondText = "";
+  let marginText = "";
+  let externalText = "";
+  const { isBetween, Pos: PosData } = trainPosition(currentTrainData);
+  if (isBetween === true) {
+    const { from, to } = PosData;
+    firstText = from;
+    secondText = to;
+    marginText = mode == 2 ? "→" : "↓";
+  } else {
+    const { Pos } = PosData;
+    if (Pos !== "") {
+      firstText = Pos;
+      if (platformNumber) {
+        secondText = `${platformNumber}番乗り場`;
+        if (lineNumber) {
+          externalText = `${lineNumber}番線`;
+        }
+      } else if (lineNumber) {
+        secondText = `${lineNumber}番線`;
+      }
+    }
+  }
+  return (
+    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
+      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+      <View style={{ flex: 1 }} />
+      <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
+        {firstText && (
+          <Text style={mode == 2 ? boxTextStyle2 : (isBetween ?  boxTextStyle : boxTextStyleBig)}>
+            {firstText}
+          </Text>
+        )}
+        {marginText && (
+          <Text style={{ color: "#0099CC", textAlign: "right" }}>
+            {marginText}
+          </Text>
+        )}
+        {secondText && (
+          <Text style={mode == 2 ? boxTextStyle2 :(isBetween ?  boxTextStyle : boxTextStyleMini)}>
+            {secondText}
+          </Text>
+        )}
+      </View>
+      {(platformDescription || externalText) && (
+        <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
+          <Text
+            style={{
+              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
+              fontSize: 10,
+            }}
+          >
+            {" " + externalText}
+            {" " + platformDescription}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+const boxStyle: ViewStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxStyle2: ViewStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 5,
+  margin: 5,
+};
+const boxTextStyle2: TextStyle = {
+  fontSize: 18,
+  color: "#0099CC",
+  textAlign: "right",
+};
+const boxTextStyleBig: TextStyle = {
+  fontSize: 28,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
+
+const boxTextStyleMini: TextStyle = {
+  fontSize: 16,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
+
+const boxTextStyle: TextStyle = {
+  fontSize: 25,
+  color: "#0099CC",
+  textAlign: "right",
+};

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.js

@@ -7,7 +7,7 @@ export const ScrollStickyContent = (props) => {
     <View
       style={{
         alignItems: "center",
-        backgroundColor: "white",
+        backgroundColor: "#ffffffc2",
         flexDirection: "row",
       }}
     >
@@ -16,7 +16,7 @@ export const ScrollStickyContent = (props) => {
           padding: 8,
           flexDirection: "row",
           borderBottomWidth: 1,
-          borderBottomColor: "#f0f0f0",
+          borderBottomColor: "#ffffffc2",
           flex: 1,
         }}
       >

components/ActionSheetComponents/EachTrainInfo/ShortHeader.tsx

@@ -1,8 +1,15 @@
-import React from "react";
+import React, { FC } from "react";
 import { ScrollView } from "react-native";
 import { TrainDataView } from "./TrainDataView";
-
-export const ShortHeader = ({
+import { trainDataType } from "@/lib/trainPositionTextArray";
+type props = {
+  currentTrainData: trainDataType;
+  currentPosition: string[] | undefined;
+  nearTrainIDList: string[];
+  openTrainInfo: (f: string) => void;
+  navigate: (screen: string, data?: any) => void;
+}
+export const ShortHeader:FC<props> = ({
   currentTrainData,
   currentPosition,
   nearTrainIDList,
@@ -11,15 +18,9 @@ export const ShortHeader = ({
 }) => {
   return (
     <ScrollView
-      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
       style={{
         flexDirection: "row",
         flex: 1,
-        //width: widthPercentageToDP("200%"),
-        // minHeight: 200,
-        //height: heightPercentageToDP("20%"),
       }}
       horizontal
       pagingEnabled

components/ActionSheetComponents/EachTrainInfo/ShowSpecialTrain.js

@@ -14,24 +14,29 @@ export const ShowSpecialTrain = ({
   };
   return (
     <>
-      {isTrainDataNothing && trueTrainID && (
-        <TouchableOpacity
-          onPress={() => replaceSpecialTrainDetail(trueTrainID)}
-          style={{
-            padding: 10,
-            flexDirection: "row",
-            borderColor: "blue",
-            borderWidth: 1,
-            margin: 10,
-            borderRadius: 5,
-            alignItems: "center",
-          }}
-        >
-          <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
-            本来の列車情報を表示
-          </Text>
-        </TouchableOpacity>
-      )}
+      {isTrainDataNothing &&
+        trueTrainID?.map((ids) => {
+          return (
+            <TouchableOpacity
+              onPress={() => replaceSpecialTrainDetail(ids)}
+              style={{
+                padding: 10,
+                flexDirection: "row",
+                borderColor: "blue",
+                borderWidth: 1,
+                margin: 10,
+                borderRadius: 5,
+                alignItems: "center",
+              }}
+            >
+              <Text
+                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+              >
+                本来の列車情報候補を表示:({ids})
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
     </>
   );
 };

components/ActionSheetComponents/EachTrainInfo/StateBox.tsx

@@ -15,21 +15,7 @@ export const StateBox: FC<stateBox> = (props) => {
       <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
-        {text?.match("～") ? (
-          <>
-            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
-              {text.split("～")[0]}
-            </Text>
-            <Text style={{ color: "#0099CC", textAlign: "right" }}>
-              {mode == 2 ? "→" : "↓"}
-            </Text>
-            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
-              {text.split("～")[1]}
-            </Text>
-          </>
-        ) : (
-          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
-        )}
+        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
       </View>
       {endText && (
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -1,187 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View, TouchableOpacity, useWindowDimensions } from "react-native";
-import { StateBox } from "./StateBox";
-import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
-import { getStationList2 } from "../../../lib/getStationList";
-import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
-import { SheetManager } from "react-native-actions-sheet";
-import { trainPosition } from "../../../lib/trainPositionTextArray";
-import { TrainPositionDataPush } from "../../発車時刻表/LED_inside_Component/TrainPositionDataPush";
-import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
-import { useStationList } from "../../../stateBox/useStationList";
-
-export const TrainDataView = ({
-  currentTrainData,
-  currentPosition,
-  nearTrainIDList,
-  openTrainInfo,
-  mode = 0,
-  navigate,
-}) => {
-  const { stationList } = useStationList();
-
-  const { width, height } = useWindowDimensions();
-  const { isLandscape } = useDeviceOrientationChange();
-  const { inject } = useCurrentTrain();
-  const [mapsStationData, setMapsStationData] = useState(undefined);
-
-  const [platformNumber, setPlatformNumber] = useState();
-  const [platformDescription, setPlatformDescription] = useState();
-  useEffect(() => {
-    //currentTrainData.Pos = "鴨川～端岡"; //test
-    if (!currentTrainData) return;
-    fetch(
-      `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        setPlatformNumber(data?.type == "Station" ? data?.platform : undefined);
-        setPlatformDescription(
-          data?.type == "Station" ? data?.description : undefined
-        );
-      });
-  }, [currentTrainData]);
-  useEffect(() => {
-    getStationList2().then(setMapsStationData);
-  }, []);
-  const onLine = !!currentPosition?.toString().length;
-  const trainPositionText = (trainData) => {
-    const { isBetween, Pos: PosData } = trainPosition(trainData);
-    const { from, to, Pos } = PosData;
-    if (isBetween === true) return `${from}～${to}`;
-    if (Pos == "") return "";
-    return `${Pos}${platformNumber ? ` ${platformNumber}番線` : ""}`;
-  };
-  const [dialog, setDialog] = useState(false);
-  const [deleteDialog, setDeleteDialog] = useState(false);
-  const [posInput, setPosInput] = useState("");
-  const [descInput, setDescInput] = useState("");
-  const [stationInput, setStationInput] = useState("");
-  const [stationNumberInput, setStationNumberInput] = useState("");
-  return (
-    <>
-      <TrainPositionDataPush
-        dialog={dialog}
-        setDialog={setDialog}
-        currentTrainData={currentTrainData}
-        stationInput={stationInput}
-        stationNumberInput={stationNumberInput}
-        posInput={posInput}
-        descInput={descInput}
-        setPosInput={setPosInput}
-        setDescInput={setDescInput}
-        station={{
-          Station_JP: trainPositionText(currentTrainData),
-          StationNumber: currentPosition[0],
-        }}
-      />
-      <View
-        style={{
-          flexDirection: "row",
-          //minHeight: 200,
-          //height: heightPercentageToDP("20%"),
-          width: isLandscape ? (width / 100) * 40 : width,
-          flex: 1,
-        }}
-      >
-        <TouchableOpacity
-          style={{ flex: 1, flexDirection: "row" }}
-          //disabled={!onLine}
-          onLongPress={() => {
-            const { isBetween, Pos } = trainPosition(currentTrainData);
-            if (isBetween === true) {
-              if (
-                platformNumber == undefined &&
-                platformDescription == undefined
-              )
-                return;
-              setStationInput(`${Pos.from}→${Pos.to}間`);
-              setStationNumberInput(
-                getStationID(currentTrainData?.Pos, stationList)
-              );
-              setPosInput(platformNumber?.toString() || "");
-              setDeleteDialog(true);
-            } else {
-              setStationInput(Pos.Pos);
-              setStationNumberInput(
-                getStationID(currentTrainData?.Pos, stationList)
-              );
-              setDescInput(platformDescription || "");
-              setPosInput(platformNumber?.toString() || "");
-              setDialog(true);
-            }
-          }}
-          onPress={() => {
-            if (!onLine) return;
-            const test = [];
-            Object.keys(mapsStationData).forEach((d) => {
-              mapsStationData[d].forEach((x) => {
-                if (x.StationNumber == currentPosition[0])
-                  test.push({ line: d, station: x });
-              });
-              if (currentPosition[0] == "M12") {
-                test.push({
-                  line: "seto",
-                  station: { Station_JP: "児島", MyStation: "0" },
-                });
-              }
-            });
-            if (!test.length) return;
-            navigate("positions", { screen: "Apps" });
-            inject(
-              `MoveDisplayStation('${test[0].line}_${test[0].station.MyStation}_${test[0].station.Station_JP}');document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
-            );
-            SheetManager.hide("EachTrainInfo");
-          }}
-        >
-          <StateBox
-            mode={mode}
-            title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
-            text={trainPositionText(currentTrainData)}
-            endText={platformDescription ? `${platformDescription}` : ""}
-            style={
-              onLine
-                ? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
-                : {}
-            }
-          />
-        </TouchableOpacity>
-
-        <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
-          <View style={{ flex: 1, flexDirection: "row" }}>
-            <StateBox
-              mode={mode}
-              title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
-              text={`${currentTrainData?.delay}${
-                isNaN(currentTrainData?.delay) ? "" : "分"
-              }`}
-            />
-          </View>
-          <TouchableOpacity
-            style={{ flex: 1, flexDirection: "row" }}
-            disabled={nearTrainIDList.length == 0}
-            onPress={() => {
-              if (nearTrainIDList.length == 0) return;
-              openTrainInfo(nearTrainIDList[0]);
-            }}
-          >
-            {nearTrainIDList.length == 0 ? (
-              <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
-            ) : (
-              <StateBox
-                mode={mode}
-                title="増解結相手を表示▶️"
-                text={`${nearTrainIDList}`}
-                style={{
-                  borderWidth: 1,
-                  borderColor: "red",
-                  borderStyle: "solid",
-                }}
-              />
-            )}
-          </TouchableOpacity>
-        </View>
-      </View>
-    </>
-  );
-};

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect, FC } from "react";
+import { View, TouchableOpacity, useWindowDimensions } from "react-native";
+import { StateBox } from "./StateBox";
+import { PositionBox } from "./PositionBox";
+import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
+import { getStationList2 } from "../../../lib/getStationList";
+import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+import { SheetManager } from "react-native-actions-sheet";
+import { trainDataType, trainPosition } from "@/lib/trainPositionTextArray";
+import { StationPosPushDialog } from "../../発車時刻表/LED_inside_Component/TrainPositionDataPush";
+import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
+import { useStationList } from "../../../stateBox/useStationList";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { customTrainDataDetector } from "@/components/custom-train-data";
+
+
+type props = {
+  currentTrainData: trainDataType;
+  currentPosition: string[] | undefined;
+  nearTrainIDList: string[];
+  openTrainInfo: (f: string) => void;
+  mode?: 0 | 1 | 2; //0:通常,1:コンパクト,2:横並び
+  navigate: (screen: string, data?: any) => void;
+}
+export const TrainDataView:FC<props> = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+  mode = 0,
+  navigate,
+}) => {
+  const { stationList } = useStationList();
+
+  const { width, height } = useWindowDimensions();
+  const { isLandscape } = useDeviceOrientationChange();
+  const { setInjectData } = useCurrentTrain();
+
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const [mapsStationData, setMapsStationData] = useState(undefined);
+
+  const [platformNumber, setPlatformNumber] = useState();
+  const [lineNumber, setLineNumber] = useState();
+  const [platformDescription, setPlatformDescription] = useState();
+  type data = {
+    type: string;
+    lineNumber: string;
+    platformNumber: string;
+    position: string;
+    stationName: string;
+    description: string;
+  };
+  const [database, setDatabase] = useState<data>(null);
+  useEffect(() => {
+    //currentTrainData.Pos = "鴨川～端岡"; //test
+    if (!currentTrainData) return;
+    fetch(
+      `https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3?PosId=${currentTrainData?.PosNum}&lineName=${currentTrainData?.Line}&StationName=${currentTrainData?.Pos}`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        if (!data) return;
+        const {
+          type,
+          stationName,
+          lineNumber,
+          platformNumber,
+          position,
+          description,
+        } = data;
+        setDatabase(data);
+        if (type == "Station") {
+          setLineNumber(lineNumber);
+          setPlatformNumber(platformNumber);
+          setPlatformDescription(description);
+        } else {
+          setLineNumber(undefined);
+          setPlatformNumber(undefined);
+          setPlatformDescription(undefined);
+        }
+      });
+  }, [currentTrainData]);
+  useEffect(() => {
+    getStationList2().then(setMapsStationData);
+  }, []);
+  const onLine = !!currentPosition?.toString().length;
+
+  const [trainNumber, setTrainNumber] = useState(currentTrainData?.num);
+  useEffect(() => {
+    const { TrainNumberOverride } = customTrainDataDetector(
+      currentTrainData?.num,
+      allCustomTrainData
+    );
+    if (TrainNumberOverride) {
+      setTrainNumber(TrainNumberOverride);
+    }else{
+      setTrainNumber(currentTrainData?.num);
+    }
+  }, [currentTrainData?.num, allCustomTrainData]);
+  // 投稿システム関係
+  // Dialog表示関係
+  const [dialog, setDialog] = useState(false);
+  const [deleteDialog, setDeleteDialog] = useState(false);
+  //固定値
+  const [PosNum, setPosNum] = useState<number | undefined>();
+  const [Pos, setPos] = useState<string>("");
+  const [Line, setLine] = useState<string>("");
+  const [StationNum, setStationNum] = useState<string>("");
+
+  //編集情報
+  const [lineInput, setLineInput] = useState<string>("");
+  const [posInput, setPosInput] = useState<string>("");
+  const [descInput, setDescInput] = useState<string>("");
+
+  const openEditWindow = () => {
+    const { isBetween, Pos } = trainPosition(currentTrainData);
+    if (isBetween === true) return;
+    //固定値
+    setPosNum(currentTrainData?.PosNum);
+    setPos(currentTrainData?.Pos);
+    setLine(currentTrainData?.Line);
+    setStationNum(getStationID(currentTrainData?.Pos, stationList));
+
+    //入力欄
+    setPosInput(database?.platformNumber?.toString() || "");
+    setDescInput(database?.description || "");
+    setLineInput(database?.lineNumber?.toString() || "");
+    setDialog(true);
+  };
+
+  return (
+    <>
+      <StationPosPushDialog
+        // Dialog表示関係
+        dialog={dialog}
+        setDialog={setDialog}
+        // 固定情報
+        PosNum={PosNum}
+        Pos={Pos}
+        Line={Line}
+        StationNum={StationNum}
+        // 入力欄
+        lineInput={lineInput}
+        setLineInput={setLineInput}
+        posInput={posInput}
+        setPosInput={setPosInput}
+        descInput={descInput}
+        setDescInput={setDescInput}
+      />
+      <View
+        style={{
+          flexDirection: "row",
+          //minHeight: 200,
+          //height: heightPercentageToDP("20%"),
+          width: isLandscape ? (width / 100) * 40 : width,
+          flex: 1,
+        }}
+      >
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          //disabled={!onLine}
+          //onLongPress={openEditWindow}
+          onLongPress={()=>{
+            if (!onLine) return;
+            setInjectData({ type:"train", value:currentTrainData?.num, fixed:true});
+            navigate("positions", { screen: "Apps" });
+            SheetManager.hide("EachTrainInfo");
+          }}
+          onPress={() => {
+            if (!onLine) return;
+            setInjectData({ type: "station", value: currentPosition[0], fixed: false });
+            
+            navigate("positions", { screen: "Apps" });
+            SheetManager.hide("EachTrainInfo");
+          }}
+        >
+          <PositionBox
+            mode={mode}
+            title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
+            currentTrainData={currentTrainData}
+            platformNumber={platformNumber}
+            lineNumber={lineNumber}
+            platformDescription={platformDescription || ""}
+            style={
+              onLine
+                ? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
+                : {}
+            }
+          />
+        </TouchableOpacity>
+
+        <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
+          <View style={{ flex: 1, flexDirection: "row" }}>
+            <StateBox
+              mode={mode}
+              title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+              text={`${currentTrainData?.delay}${
+                isNaN(currentTrainData?.delay) ? "" : "分"
+              }`}
+            />
+          </View>
+          <TouchableOpacity
+            style={{ flex: 1, flexDirection: "row" }}
+            disabled={nearTrainIDList.length == 0}
+            onPress={() => {
+              if (nearTrainIDList.length == 0) return;
+              openTrainInfo(nearTrainIDList[0]);
+            }}
+          >
+            {nearTrainIDList.length == 0 ? (
+              <StateBox mode={mode} title="列番" text={trainNumber} />
+            ) : (
+              <StateBox
+                mode={mode}
+                title="増解結相手を表示▶️"
+                text={`${nearTrainIDList}`}
+                style={{
+                  borderWidth: 1,
+                  borderColor: "red",
+                  borderStyle: "solid",
+                }}
+              />
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </>
+  );
+};

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -42,20 +42,19 @@ export const EachTrainInfoCore = ({
   from,
   navigate,
 }) => {
-  const { currentTrain } = useCurrentTrain();
+  const { currentTrain, getCurrentStationData, getPosition } =
+    useCurrentTrain();
   const { originalStationList, stationList } = useStationList();
-  const { allTrainDiagram: trainList } = useAllTrainDiagram();
+  const { allTrainDiagram: trainList, allCustomTrainData } =
+    useAllTrainDiagram();
   const { setTrainInfo } = useTrainMenu();
   const [currentTrainData, setCurrentTrainData] = useState();
 
   useEffect(() => {
-    if (!currentTrain.length) return;
-    setCurrentTrainData(
-      checkDuplicateTrainData(
-        currentTrain.filter((d) => d.num == data.trainNum),
-        stationList
-      )
-    );
+    const stationData = getCurrentStationData(data.trainNum);
+    if (stationData) {
+      setCurrentTrainData(stationData);
+    }
   }, [currentTrain, data.trainNum]);
 
   useEffect(() => {
@@ -84,27 +83,36 @@ export const EachTrainInfoCore = ({
   const [haveThrough, setHaveThrough] = useState(false);
 
   // 使用例
-  const stopStationIDList = trainDataWidhThrough.map((i) => {
-    const [station, se, time] = i.split(",");
-    const Stations = stationList.map((a) =>
-      a.filter((d) => d.StationName == station)
-    );
-    const StationNumbers =
-      Stations &&
-      Stations.reduce((newArray, e) => {
-        return newArray.concat(e);
-      }, []).map((d) => d.StationNumber);
-    return StationNumbers;
-  });
+  const [stopStationIDList, setStopStationList] = useState([]);
   useEffect(() => {
-    const stopStationList = trainData.map((i) => {
+    const x = trainDataWidhThrough.map((i) => {
       const [station, se, time] = i.split(",");
+      const Stations = stationList.map((a) =>
+        a.filter((d) => d.StationName == station)
+      );
+      const StationNumbers =
+        Stations &&
+        Stations.reduce((newArray, e) => {
+          return newArray.concat(e);
+        }, []).map((d) => d.StationNumber);
+      return StationNumbers;
+    });
+    setStopStationList(x);
+  }, [trainDataWidhThrough]);
+
+  useEffect(() => {
+    const isCancel = [];
+    const stopStationList = trainData.map((i, index, array) => {
+      const [station, se, time] = i.split(",");
+      const [nextStation, nextSe, nextTime] =
+        array[index + 1]?.split(",") || [];
+      isCancel.push(se.includes("休") && nextSe.includes("休"));
+      if (se == "通編") setHaveThrough(true);
       return stationList.map((a) => a.filter((d) => d.StationName == station));
     });
     const allThroughStationList = stopStationList.map((i, index, array) => {
       let allThroughStation = [];
       if (index == array.length - 1) return;
-
       const firstItem = array[index];
       const secondItem = array[index + 1];
       let betweenStationLine = "";
@@ -129,7 +137,9 @@ export const EachTrainInfoCore = ({
           d.StationNumber > baseStationNumberFirst &&
           d.StationNumber < baseStationNumberSecond
         ) {
-          allThroughStation.push(`${d.Station_JP},通過,`);
+          allThroughStation.push(
+            `${d.Station_JP},${isCancel[index] ? "通休編" : "通過"},`
+          );
           setHaveThrough(true);
           reverse = false;
         } else {
@@ -137,7 +147,9 @@ export const EachTrainInfoCore = ({
             d.StationNumber < baseStationNumberFirst &&
             d.StationNumber > baseStationNumberSecond
           ) {
-            allThroughStation.push(`${d.Station_JP},通過,`);
+            allThroughStation.push(
+              `${d.Station_JP},${isCancel[index] ? "通休編" : "通過"},`
+            );
             setHaveThrough(true);
             reverse = true;
           }
@@ -170,12 +182,12 @@ export const EachTrainInfoCore = ({
     const position = points.findIndex((d) => d == true);
     let isThrew = false;
     if (position == -1) return () => {};
+    setShowThrew(true);
     if (trainDataWidhThrough[position].split(",")[1] == "通過") {
       LayoutAnimation.configureNext({
         duration: 400,
         update: { type: "easeInEaseOut", springDamping: 0.6 },
       });
-      setShowThrew(true);
       isThrew = true;
     }
     if (position < 5) {
@@ -196,15 +208,18 @@ export const EachTrainInfoCore = ({
   const scrollHandlers = actionSheetRef
     ? useScrollHandlers("scrollview-1", actionSheetRef)
     : null;
-  const [trueTrainID, setTrueTrainID] = useState();
+  const [trueTrainID, setTrueTrainID] = useState([]);
   useEffect(() => {
     if (!data.trainNum) return;
     const TD = trainList[data.trainNum];
     setHeadStation([]);
     setTailStation([]);
     if (!TD) {
-      const specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
-      setTrueTrainID(specialTrainActualID || undefined);
+      const specialTrainActualIDs = searchSpecialTrain(
+        data.trainNum,
+        trainList
+      );
+      setTrueTrainID(specialTrainActualIDs || []);
       setTrainData([]);
       return;
     }
@@ -245,72 +260,37 @@ export const EachTrainInfoCore = ({
   }, [trainData, data]);
 
   useEffect(() => {
-    //currentTrainData.Pos = "鴨川～端岡"; //test
-    if (!currentTrainData) return;
-    if (!currentTrainData?.Pos) return;
-    if (currentTrainData?.Pos.match("～")) {
-      const pos = currentTrainData?.Pos.replace("（下り）", "")
-        .replace("（上り）", "")
-        .replace("（徳島線）", "")
-        .replace("（高徳線）", "")
-        .split("～");
-      const direction = parseInt(currentTrainData?.Direction) || 0;
-      if (pos[0] == "児島" && pos[1] == "宇多津") {
-        setCurrentPosition(["M12", "Y09"]);
-        return;
-      } else if (pos[1] == "児島" && pos[0] == "宇多津") {
-        setCurrentPosition(["Y09", "M12"]);
-        return;
-      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予白滝") {
-        setCurrentPosition(["S18", "S14"]);
-        return;
-      } else if (pos[0] == "伊予白滝" && pos[1] == "伊予若宮") {
-        setCurrentPosition(["S14", "S18"]);
-        return;
-      } else if (pos[0] == "伊予大洲" && pos[1] == "伊予若宮") {
-        setCurrentPosition(["U14", "U14"]);
-        return;
-      } else if (pos[0] == "伊予若宮" && pos[1] == "伊予大洲") {
-        setCurrentPosition(["U14", "U14"]);
-        return;
+    const position = getPosition(currentTrainData);
+    if (stopStationIDList.length == 0) return;
+    if (position) {
+      if (position.length > 1) {
+        if (position[0] == "-Iyo") {
+          position[0] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) - 1
+            ][0];
+        } else if (position[0] == "+Iyo") {
+          position[0] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) + 1
+            ][0];
+        }
+        if (position[1] == "+Iyo") {
+          position[1] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) + 1
+            ][0];
+        } else if (position[1] == "-Iyo") {
+          position[1] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) - 1
+            ][0];
+        }
       }
-      const currentPosID = Object.keys(originalStationList).map((key) => {
-        let firstStation = false;
-        let firstStationID = "";
-        let secondStation = false;
-        let secondStationID = "";
-        originalStationList[key].forEach((station) => {
-          if (station.Station_JP === pos[0]) {
-            firstStation = true;
-            firstStationID = station.StationNumber;
-          }
-          if (station.Station_JP === pos[1]) {
-            secondStation = true;
-            secondStationID = station.StationNumber;
-          }
-        });
-        if (firstStation && secondStation) {
-          return [firstStationID, secondStationID];
-        } else return false;
-      });
-      const currentPos = currentPosID.filter((d) => d != false)[0];
-      if (currentPos) {
-        setCurrentPosition(direction == 0 ? currentPos.reverse() : currentPos);
-      } else if (direction == 0) {
-        setCurrentPosition([
-          getStationID(pos[1], stationList),
-          getStationID(pos[0], stationList),
-        ]);
-      } else {
-        setCurrentPosition([
-          getStationID(pos[0], stationList),
-          getStationID(pos[1], stationList),
-        ]);
-      }
-    } else {
-      setCurrentPosition([getStationID(currentTrainData?.Pos, stationList)]);
+
+      setCurrentPosition(position);
     }
-  }, [currentTrainData]);
+  }, [currentTrainData,stopStationIDList]);
 
   useEffect(() => {
     //列車現在地アイコン表示スイッチ
@@ -320,21 +300,23 @@ export const EachTrainInfoCore = ({
       })
       .catch(() => AS.setItem("trainPositionSwitch", "true"));
   }, []);
+  const customTrainType = getTrainType({
+    type: customTrainDataDetector(data.trainNum, allCustomTrainData).type,
+  });
 
   const openTrainInfo = (d) => {
-    const train = customTrainDataDetector(d);
+    const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =
         parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
       TrainNumber = timeInfo + "号";
     }
+    const limitedData = getTrainType({ type: train.type });
     const payload = {
       data: {
         trainNum: d,
-        limited: `${getTrainType(train.type).data}:${
-          train.trainName
-        }${TrainNumber}`,
+        limited: `${limitedData.data}:${train.trainName}${TrainNumber}`,
       },
       navigate,
       from: from == "LED" ? "LED2" : "NearTrainDiagramView",
@@ -391,6 +373,8 @@ export const EachTrainInfoCore = ({
         containerProps={{
           style: {
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
+            backgroundColor:
+              customTrainType.data === "notService" ? "#777777ff" : "white",
           },
         }}
         shortHeader={
@@ -421,6 +405,11 @@ export const EachTrainInfoCore = ({
           />
         }
       >
+        {customTrainType.data === "notService" && (
+          <Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
+            この列車には乗車できません。
+          </Text>
+        )}
         {headStation.length != 0 &&
           headStation.map((i, index) =>
             showHeadStation.findIndex((d) => d == index) == -1 ? (
@@ -440,6 +429,7 @@ export const EachTrainInfoCore = ({
                   borderRadius: 5,
                   alignItems: "center",
                 }}
+                key={i.station + "-head"}
               >
                 <Text
                   style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
@@ -469,6 +459,7 @@ export const EachTrainInfoCore = ({
               margin: 10,
               borderRadius: 5,
               alignItems: "center",
+              backgroundColor: "#ffffffc2",
             }}
           >
             <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
@@ -478,7 +469,7 @@ export const EachTrainInfoCore = ({
         )}
         {trainDataWidhThrough.map((i, index) =>
           i.split(",")[1] == "提" ? (
-            <DataFromButton i={i} />
+            <DataFromButton i={i} key={i + "-data"} />
           ) : (
             <EachStopList
               {...{
@@ -490,9 +481,13 @@ export const EachTrainInfoCore = ({
                 openStationACFromEachTrainInfo,
                 showThrew,
               }}
+              key={i + "-stop"}
             />
           )
         )}
+        <Text style={{ backgroundColor: "#ffffffc2" }}>
+          時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
+        </Text>
         {tailStation.length != 0 &&
           tailStation.map(({ station, dia }, index) =>
             showTailStation.findIndex((d) => d == index) == -1 ? (
@@ -533,6 +528,7 @@ export const EachTrainInfoCore = ({
               flexDirection: "row",
               borderBottomWidth: 1,
               borderBottomColor: "#f0f0f0",
+              backgroundColor: "#ffffffc2",
               flex: 1,
             }}
           >

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -1,14 +1,18 @@
 import React, { CSSProperties, FC, useEffect, useMemo, useState } from "react";
-import { Text, View, LayoutAnimation, TextStyle } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
+import { Text, View, TextStyle, TouchableOpacity } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
-import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
 import { migrateTrainName } from "../../../lib/eachTrainInfoCoreLib/migrateTrainName";
 import { TrainIconStatus } from "./trainIconStatus";
 import { TrainViewIcon } from "./trainViewIcon";
 import { OneManText } from "./HeaderTextParts/OneManText";
 import { customTrainDataDetector } from "@/components/custom-train-data";
 import { InfogramText } from "@/components/ActionSheetComponents/EachTrainInfoCore/HeaderTextParts/InfogramText";
+import { useTrainMenu } from "@/stateBox/useTrainMenu";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useNotification } from "@/stateBox/useNotifications";
+import { getStringConfig } from "@/lib/getStringConfig";
+import { FontAwesome, MaterialCommunityIcons } from "@expo/vector-icons";
+import { getPDFViewURL } from "@/lib/getPdfViewURL";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -38,90 +42,119 @@ export const HeaderText: FC<Props> = ({
   tailStation,
   navigate,
   from,
-  scrollHandlers
+  scrollHandlers,
 }) => {
   const { limited, trainNum } = data;
 
+  const { updatePermission } = useTrainMenu();
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const { expoPushToken } = useNotification();
+
   // 列車名、種別、フォントの取得
-  const [typeName, trainName, fontAvailable, isOneMan, infogram] =
-    useMemo(() => {
-      const customTrainData = customTrainDataDetector(trainNum);
-      const [type, fontAvailable, isOneMan] = (() => {
-        switch (customTrainData.type) {
-          case "LTDEXP":
-            return ["特急", true, false];
-          case "Rapid":
-            return ["快速", true, false];
-          case "Normal":
-            return ["普通", true, false];
-          case "OneManRapid":
-            return ["快速", true, true];
-          case "OneMan":
-            return ["普通", true, true];
-          case "NightLTDEXP":
-            return ["特急", true, false];
-          case "SPCL":
-            return ["臨時", false, false];
-          case "SPCL_EXP":
-            return ["臨時特急", false, false];
-          case "SPCL_Rapid":
-            return ["臨時快速", true, false];
-          case "SPCL_Normal":
-            return ["臨時", true, false];
-          case "Freight":
-            return ["貨物", false, false];
-          case "Other":
-            switch (true) {
-              case !!trainNum.includes("T"):
-                return ["単機回送", false, false];
-              case !!trainNum.includes("R"):
-              case !!trainNum.includes("E"):
-              case !!trainNum.includes("L"):
-              case !!trainNum.includes("A"):
-              case !!trainNum.includes("B"):
-                return ["回送", false, false];
-              case !!trainNum.includes("H"):
-                return ["試運転", false, false];
-            }
-            return ["", false, false];
-        }
-      })();
-      switch (true) {
-        case customTrainData.trainName !== "":
-          // 特急の場合は、列車名を取得
-          // 列番対称データがある場合はそれから列車番号を取得
-          const distance = customTrainData.trainNumDistance;
-          const number =
-            distance !== null ? ` ${parseInt(trainNum) - distance}号` : "";
-          const trainName = customTrainData.trainName + number;
-          return [
-            type,
-            trainName,
-            fontAvailable,
-            isOneMan,
-            customTrainData.infogram,
-          ];
-        case trainData[trainData.length - 1] === undefined:
-          return [type, "", fontAvailable, isOneMan, customTrainData.infogram];
-        default:
-          // 行先がある場合は、行先を取得
-          return [
-            type,
-            migrateTrainName(
-              trainData[trainData.length - 1].split(",")[0] + "行き"
-            ),
-            fontAvailable,
-            isOneMan,
-            customTrainData.infogram,
-          ];
-      }
-    }, [trainData]);
+  const [
+    typeName,
+    trainName,
+    fontAvailable,
+    isOneMan,
+    infogram,
+    isEdit,
+    uwasa,
+    vehicleFormation,
+    trainInfoUrl,
+  ] = useMemo(() => {
+    const {
+      type,
+      trainName,
+      trainNumDistance,
+      infogram,
+      isEdit,
+      uwasa,
+      vehicleFormation,
+      trainInfoUrl,
+    } = customTrainDataDetector(trainNum, allCustomTrainData);
+    const [typeString, fontAvailable, isOneMan] = getStringConfig(
+      type,
+      trainNum
+    );
+    switch (true) {
+      case trainName !== "":
+        // 特急の場合は、列車名を取得
+        // 列番対称データがある場合はそれから列車番号を取得
+        return [
+          typeString,
+          trainName +
+            (trainNumDistance !== null
+              ? ` ${parseInt(trainNum) - trainNumDistance}号`
+              : ""),
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+      case trainData[trainData.length - 1] === undefined:
+        return [
+          typeString,
+          "",
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+      default:
+        // 行先がある場合は、行先を取得
+        return [
+          typeString,
+          migrateTrainName(
+            trainData[trainData.length - 1].split(",")[0] + "行き"
+          ),
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+    }
+  }, [trainData]);
 
   return (
-    <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}  onTouchStart={()=>scrollHandlers.ref.current?.scrollTo({ y: 0, animated: true })}>
+    <View
+      style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+      onTouchStart={() =>
+        scrollHandlers.ref.current?.scrollTo({ y: 0, animated: true })
+      }
+    >
       <TrainIconStatus {...{ data, navigate, from }} />
-      <View
-        style={{ borderRadius: 5, flexDirection: "row", alignItems: "center" }}
+      <TouchableOpacity
+        style={{
+          borderRadius: 5,
+          flexDirection: "row",
+          alignItems: "center",
+          ...(trainInfoUrl
+            ? {
+                borderWidth: 0,
+                borderBottomWidth: 1,
+                borderStyle: "solid",
+                borderColor: "white",
+              }
+            : {}),
+        }}
+        onPress={() => {
+          if (!trainInfoUrl) return;
+          const uri = trainInfoUrl.includes("pdf")
+            ? getPDFViewURL(trainInfoUrl)
+            : trainInfoUrl;
+          navigate("generalWebView", { uri, useExitButton: true });
+          SheetManager.hide("EachTrainInfo");
+        }}
+        disabled={!trainInfoUrl}
       >
         <Text
           style={{
@@ -135,16 +168,48 @@ export const HeaderText: FC<Props> = ({
           {typeName}
         </Text>
         {isOneMan && <OneManText />}
-        <Text style={textConfig}>{trainName}</Text>
+        <Text style={{...textConfig,...trainName.length >10 ?{fontSize:14}:{} }}>{trainName}</Text>
         <InfogramText infogram={infogram} />
-      </View>
+        {/* {trainInfoUrl && (
+          <MaterialCommunityIcons
+            name={"open-in-new"}
+            color="white"
+            size={15}
+          />
+        )} */}
+      </TouchableOpacity>
+      {isEdit && (
+        <FontAwesome
+          name="commenting-o"
+          size={20}
+          color="white"
+          style={{ marginLeft: 5 }}
+          onPress={() =>
+            alert(
+              `[このアイコン、列車データはコミュニティによってリアルタイム追加されています。]\n使用車両情報:\n${vehicleFormation}\n投稿者メモ:\n${
+                uwasa || "なし"
+              }`
+            )
+          }
+        />
+      )}
 
       <View style={{ flex: 1 }} />
-      <Text style={textConfig}>
-        {showHeadStation.map((d) => `${headStation[d].id} + `)}
-        {trainNum}
-        {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
-      </Text>
+      <TouchableOpacity
+        onLongPress={() => {
+          if (!updatePermission) return;
+          const uri = `https://jr-shikoku-data-post-system.pages.dev?trainNum=${trainNum}&token=${expoPushToken}`;
+          navigate("generalWebView", { uri, useExitButton: false });
+          SheetManager.hide("EachTrainInfo");
+        }}
+        disabled={!updatePermission}
+      >
+        <Text style={textConfig}>
+          {showHeadStation.map((d) => `${headStation[d].id} + `)}
+          {trainNum}
+          {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
+        </Text>
+      </TouchableOpacity>
 
       <TrainViewIcon {...{ data, navigate, from }} />
     </View>

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -6,6 +6,7 @@ import { useInterval } from "../../../lib/useInterval";
 import { Icon } from "@expo/vector-icons/build/createIconSet";
 import { SheetManager } from "react-native-actions-sheet";
 import { customTrainDataDetector } from "../../custom-train-data";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 
 type GlyphNames = ComponentProps<typeof Ionicons>["name"];
 
@@ -22,11 +23,14 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
   const [trainIcon, setTrainIcon] = useState(null);
   const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
   const [address, setAddress] = useState("");
+  const { allCustomTrainData } = useAllTrainDiagram();
   useEffect(() => {
     if (!data.trainNum) return;
-    const { trainIcon, infoUrl } = customTrainDataDetector(data.trainNum);
-    if (trainIcon) setTrainIcon(trainIcon);
-
+    const { img, infoUrl } = customTrainDataDetector(
+      data.trainNum,
+      allCustomTrainData
+    );
+    if (img) setTrainIcon(img);
     if (infoUrl) setAddress(infoUrl);
 
     switch (data.trainNum) {
@@ -47,7 +51,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
         )
           .then((d) => d.json())
           .then((d) => {
-            console.log(d);
             if (d.trainStatus == "〇") {
               //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
             } else if (d.trainStatus == "▲") {
@@ -57,31 +60,30 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
             }
           });
         break;
-        case "2074D":
-        case "2076D":
-        case "2080D":
-        case "2082D":
-        case "2071D":
-        case "2073D":
-        case "2079D":
-        case "2081D":
-          fetch(
-            `https://n8n.haruk.in/webhook/dosan-anpanman-first?trainNum=${
-              data.trainNum
-            }&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
-          )
-            .then((d) => d.json())
-            .then((d) => {
-              console.log(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" });
-              }
-            });
-          break;
+      case "2074D":
+      case "2076D":
+      case "2080D":
+      case "2082D":
+      case "2071D":
+      case "2073D":
+      case "2079D":
+      case "2081D":
+        fetch(
+          `https://n8n.haruk.in/webhook/dosan-anpanman-first?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" });
+            }
+          });
+        break;
     }
   }, [data.trainNum]);
   const [move, setMove] = useState(true);
@@ -104,17 +106,18 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
             });
             SheetManager.hide("EachTrainInfo");
           }}
+          disabled={!address}
         >
           {move ? (
             <Image
               source={{ uri: trainIcon }}
-              style={{ height: 34, width: 30, marginRight: 5 }}
-              resizeMethod="scale"
+              style={{ height: 30, width: 24, marginRight: 5 }}
+              resizeMethod="resize"
             />
           ) : (
             <Ionicons
               {...anpanmanStatus}
-              size={30}
+              size={24}
               style={{ marginRight: 5 }}
             />
           )}

components/ActionSheetComponents/SocialMenu.tsx

@@ -0,0 +1,146 @@
+import React, { useRef } from "react";
+import { View, Platform, Text } from "react-native";
+import ActionSheet ,{ ScrollView } from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ListItem } from "@rneui/themed";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Linking } from "react-native";
+import TouchableScale from "react-native-touchable-scale";
+export const Social = () => {
+  const actionSheetRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+          height: "100%",
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+
+          <View
+            style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+          >
+            <MaterialCommunityIcons
+              name="web"
+              style={{ padding: 5 }}
+              color="white"
+              size={30}
+            />
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              JR四国公式SNS一族
+            </Text>
+          </View>
+          <ScrollView
+            style={{
+              padding: 10,
+              backgroundColor: "white",
+              borderBottomLeftRadius: 10,
+              borderBottomRightRadius: 10,
+              flex:1
+            }}
+          >
+            {[
+              {
+                url: "https://twitter.com/jr_shikoku_info",
+                name: "ＪＲ四国列車運行情報",
+              },
+
+              {
+                url: "https://twitter.com/JRshikoku_eigyo",
+                name: "JR四国営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_tokyo",
+                name: "JR四国 東京営業情報【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_osaka",
+                name: "JR四国 大阪営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/jrs_matsuyama",
+                name: "JR四国 松山駅 【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_kochi",
+                name: "JR四国 高知駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jr_tokust",
+                name: "JR四国 徳島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_uwjm",
+                name: "JR四国 宇和島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_wkama",
+                name: "JR四国 ワープ高松支店【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_wkoch",
+                name: "JR四国 ワープ高知支店【公式】",
+              },
+              {
+                url: "https://twitter.com/Yoakemonogatari",
+                name: "志国土佐　時代の夜明けのものがたり【公式】",
+              },
+              {
+                url: "https://twitter.com/Smile_Eki_Chan",
+                name: "すまいるえきちゃん♡JR四国【公式】",
+              },
+              {
+                url: "https://twitter.com/sper_ponchan",
+                name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
+              },
+            ].map((d) => (
+              <ListItem
+                bottomDivider
+                onPress={() => Linking.openURL(d.url)}
+                key={d.url}
+                friction={90} //
+                tension={100} // These props are passed to the parent component (here TouchableScale)
+                activeScale={0.95} //
+                Component={TouchableScale}
+              >
+                <ListItem.Content>
+                  <ListItem.Title>{d.name}</ListItem.Title>
+                </ListItem.Content>
+                <ListItem.Chevron />
+              </ListItem>
+            ))}
+          </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/SpecialTrainInfo.tsx

@@ -0,0 +1,55 @@
+import React, { FC, useRef } from "react";
+import { View, Platform } from "react-native";
+import ActionSheet from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
+
+type props = {
+  payload: { navigate: (screen: string, params?: object) => void };
+};
+export const SpecialTrainInfo: FC<props> = ({ payload }) => {
+  const { navigate } = payload;
+  const actionSheetRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <SpecialTrainInfoBox navigate={navigate} />
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/StationDeteilView.js

@@ -2,19 +2,14 @@ import React, { useState, useEffect } from "react";
 import {
   View,
   Linking,
-  Text,
-  TouchableOpacity,
   BackHandler,
   Platform,
+  useWindowDimensions,
 } from "react-native";
-import AutoHeightImage from "react-native-auto-height-image";
-import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ActionSheet, { SheetManager } from "react-native-actions-sheet";
 import Sign from "../../components/駅名表/Sign";
 
-import { TicketBox } from "../atom/TicketBox";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { getPDFViewURL } from "../../lib/getPdfViewURL";
 import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
 import { AS } from "../../storageControl";
@@ -23,23 +18,28 @@ import { TrainBusButton } from "./StationDeteilView/TrainBusButton";
 import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
 import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
 import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";
+import { StationTrainPositionButton } from "./StationDeteilView/StationTrainPositionButton";
+import { StationDiagramButton } from "./StationDeteilView/StationDiagramButton";
+import { useTrainMenu } from "@/stateBox/useTrainMenu";
 
 export const StationDeteilView = (props) => {
   if (!props.payload) return <></>;
   const { currentStation, navigate, onExit, goTo, useShow } = props.payload;
+  const { width } = useWindowDimensions();
   const { busAndTrainData } = useBusAndTrainData();
   const [trainBus, setTrainBus] = useState();
+  const { updatePermission } = useTrainMenu();
 
   useEffect(() => {
     if (!currentStation) return () => {};
-    const data = busAndTrainData.filter((d) => 
-      d.name === currentStation[0].Station_JP
+    const data = busAndTrainData.filter(
+      (d) => d.name === currentStation[0].Station_JP
     );
     if (data.length == 0) {
       setTrainBus();
     }
     setTrainBus(data[0]);
-  }, [currentStation]);
+  }, [currentStation, busAndTrainData]);
 
   const [usePDFView, setUsePDFView] = useState(undefined);
   useEffect(() => {
@@ -89,73 +89,89 @@ export const StationDeteilView = (props) => {
         </View>
         <View>
           {currentStation && (
-            <View style={{ margin: 10, marginHorizontal: wp("10%") }}>
-              <Sign
-                currentStation={currentStation}
-                oP={() => {
-                  usePDFView == "true"
-                    ? Linking.openURL(currentStation[0].StationTimeTable)
-                    : navigate("howto", {
-                        info,
+            <>
+              <View style={{ margin: 10, marginHorizontal: width * 0.1 }}>
+                <Sign
+                  stationID={currentStation[0].StationNumber}
+                  oP={() => {
+                    usePDFView == "true"
+                      ? Linking.openURL(currentStation[0].StationTimeTable)
+                      : navigate("howto", {
+                          info,
+                          goTo,
+                          useShow,
+                        });
+                    onExit();
+                  }}
+                  oLP={() =>
+                    Linking.openURL(currentStation[0].StationTimeTable)
+                  }
+                />
+              </View>
+              <View style={{ flexDirection: "row" }}>
+                <StationTrainPositionButton
+                  stationNumber={currentStation[0].StationNumber}
+                  onExit={onExit}
+                  navigate={navigate}
+                />
+                {currentStation[0].JrHpUrl &&
+                  currentStation[0].StationNumber != "M12" && (
+                    <駅構内図 //児島例外/
+                      navigate={navigate}
+                      goTo={goTo}
+                      useShow={useShow}
+                      address={currentStation[0].JrHpUrl}
+                      onExit={onExit}
+                    />
+                  )}
+              </View>
+              <View style={{ flexDirection: "row" }}>
+                {!currentStation[0].JrHpUrl || (
+                  <WebSiteButton
+                    navigate={navigate}
+                    info={currentStation[0].JrHpUrl}
+                    goTo={goTo}
+                    useShow={useShow}
+                    onExit={onExit}
+                  />
+                )}
+                {updatePermission &&<StationDiagramButton
+                    navigate={navigate}
+                    onExit={onExit}
+                    currentStation={currentStation}
+                  />}
+                {!currentStation[0].StationTimeTable || (
+                  <StationTimeTableButton
+                    info={info}
+                    address={currentStation[0].StationTimeTable}
+                    usePDFView={usePDFView}
+                    navigate={navigate}
+                    onExit={onExit}
+                    goTo={goTo}
+                    useShow={useShow}
+                  />
+                )}
+                <StationMapButton
+                  stationMap={
+                    currentStation[0].StationMap ||
+                    `https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`
+                  }
+                />
+                {!trainBus || (
+                  <TrainBusButton
+                    address={trainBus.address}
+                    press={() => {
+                      navigate("howto", {
+                        info: trainBus.address,
                         goTo,
                         useShow,
                       });
-                  onExit();
-                }}
-                oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
-              />
-            </View>
-          )}
-          {currentStation &&
-            currentStation[0].JrHpUrl &&
-            currentStation[0].StationNumber != "M12" && (
-              <駅構内図 //児島例外/
-                navigate={navigate}
-                goTo={goTo}
-                useShow={useShow}
-                address={currentStation[0].JrHpUrl}
-                onExit={onExit}
-              />
-            )}
-          {currentStation && (
-            <View style={{ flexDirection: "row" }}>
-              {!currentStation[0].JrHpUrl || (
-                <WebSiteButton
-                  navigate={navigate}
-                  info={currentStation[0].JrHpUrl}
-                  goTo={goTo}
-                  useShow={useShow}
-                  onExit={onExit}
-                />
-              )}
-              {!currentStation[0].StationTimeTable || (
-                <StationTimeTableButton
-                  info={info}
-                  address={currentStation[0].StationTimeTable}
-                  usePDFView={usePDFView}
-                  navigate={navigate}
-                  onExit={onExit}
-                  goTo={goTo}
-                  useShow={useShow}
-                />
-              )}
-              {!currentStation[0].StationMap || (
-                <StationMapButton stationMap={currentStation[0].StationMap} />
-              )}
-              {!trainBus || (
-                <TrainBusButton
-                  address={trainBus.address}
-                  press={() => {
-                    navigate("howto", {
-                      info: trainBus.address,
-                      goTo,
-                      useShow,
-                    });
-                    onExit();
-                  }}
-                />
-              )}
-            </View>
+                      onExit();
+                    }}
+                  />
+                )}
+              </View>
+            </>
           )}
         </View>
       </View>

components/ActionSheetComponents/StationDeteilView/StationDiagramButton.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from "react";
+import { Linking } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
+import { TicketBox } from "@/components/atom/TicketBox";
+type Props = {
+  navigate: (screen: string, params?: object) => void;
+  onExit: () => void;
+  currentStation: {
+    Station_JP: string;
+    Station_EN: string;
+    StationName?: string;
+    MyStation?: string;
+    StationNumber: string;
+    DispNum?: string;
+    StationTimeTable: string;
+    StationMap?: string;
+    JrHpUrl?: string;
+    lat: number;
+    lng: number;
+    jslodApi: string;
+  }[];
+};
+export const StationDiagramButton: FC<Props> = (props) => {
+  const { navigate, onExit, currentStation } = props;
+  return (
+    <TicketBox
+      backgroundColor={"#8F5902"}
+      icon={<FontAwesome name="table" color="white" size={50} />}
+      flex={1}
+      onPressButton={() => {
+        navigate("stDiagram", {
+          currentStation,
+        });
+        onExit();
+      }}
+    >
+      時刻表v2
+    </TicketBox>
+  );
+};

components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx

@@ -19,6 +19,7 @@ export const 駅構内図:FC<Props> = (props) => {
         alignContent: "center",
         alignItems: "center",
         margin: 2,
+        flex: 1,
       }}
       onPress={() => {
         navigate("howto", { info, goTo, useShow });

components/ActionSheetComponents/StationDeteilView/StationTrainPositionButton.tsx

@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { TouchableOpacity, View, Text, Linking } from "react-native";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import AntDesign from "react-native-vector-icons/AntDesign";
+type Props = {
+  stationNumber: string;
+  onExit: () => void;
+  navigate?: (screen: string, params: { screen: string }) => void;
+};
+export const StationTrainPositionButton: FC<Props> = (props) => {
+  const { stationNumber, onExit, navigate } = props;
+  const { setInjectData } = useCurrentTrain();
+  return (
+    <TouchableOpacity
+      style={{
+        height: 50,
+        backgroundColor: "#0099CC",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+        margin: 2,
+        flex: 1,
+      }}
+      onLongPress={() => {
+        navigate("positions", { screen: "Apps" });
+        setInjectData({ type: "station", value:stationNumber, fixed: true });
+        onExit();
+      }}
+      onPress={() => {
+        navigate("positions", { screen: "Apps" });
+        setInjectData({ type: "station", value: stationNumber, fixed: false });
+        onExit();
+      }}
+    >
+      <View style={{ flex: 1 }} />
+      <AntDesign
+        name={"barchart"}
+        size={20}
+        color={"white"}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+      />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        走行位置に移動
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/ActionSheetComponents/TrainMenuLineSelector.js

@@ -73,6 +73,7 @@ export const TrainMenuLineSelector = () => {
               });
             });
           }}
+          key={d+"TrainMenuLineSelector"}
         >
           <View
             style={{

components/ActionSheetComponents/sheets.ts

@@ -4,11 +4,15 @@ import { JRSTraInfo } from "./JRSTraInfo";
 import { StationDeteilView } from "./StationDeteilView";
 import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
 import { TrainIconUpdate } from "./TrainIconUpdate";
+import { SpecialTrainInfo } from "./SpecialTrainInfo";
+import { Social } from "./SocialMenu";
 
 registerSheet("EachTrainInfo", EachTrainInfo);
 registerSheet("JRSTraInfo", JRSTraInfo);
 registerSheet("StationDetailView", StationDeteilView);
 registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
 registerSheet("TrainIconUpdate", TrainIconUpdate);
+registerSheet("SpecialTrainInfo", SpecialTrainInfo);
+registerSheet("Social", Social);
 
 export {};

components/AllTrainDiagramView.js

@@ -10,6 +10,7 @@ import {
   Keyboard,
   ScrollView,
   Linking,
+  Image,
 } from "react-native";
 import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
 
@@ -19,9 +20,12 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "./atom/BigButton";
 import { Switch } from "react-native-elements";
+import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
+import { OneManText } from "./ActionSheetComponents/EachTrainInfoCore/HeaderTextParts/OneManText";
+import { getStringConfig } from "@/lib/getStringConfig";
 export default function AllTrainDiagramView() {
   const { goBack, navigate } = useNavigation();
-  const { keyList, allTrainDiagram } = useAllTrainDiagram();
+  const { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [useStationName, setUseStationName] = useState(false);
@@ -53,14 +57,14 @@ export default function AllTrainDiagramView() {
   }, []);
 
   const openTrainInfo = (d) => {
-    const train = customTrainDataDetector(d);
+    const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =
         parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
       TrainNumber = timeInfo + "号";
     }
-    const type = getTrainType(train.type).data;
+    const type = getTrainType({type:train.type}).data;
     const limited = `${type}:${train.trainName}${TrainNumber}`;
     const payload = {
       data: { trainNum: d, limited },
@@ -71,16 +75,96 @@ export default function AllTrainDiagramView() {
       payload,
     });
   };
+
+  const Item = ({ id, openTrainInfo }) => {
+    const { img, trainName, type, trainNumDistance, infogram } =
+      customTrainDataDetector(id, allCustomTrainData);
+
+    const [typeString, fontAvailable, isOneMan] = getStringConfig(type, id);
+    const trainNameString = (() => {
+      switch (true) {
+        case trainName !== "":
+          // 特急の場合は、列車名を取得
+          // 列番対称データがある場合はそれから列車番号を取得
+          const distance = trainNumDistance;
+          const number =
+            distance !== null ? ` ${parseInt(id) - distance}号` : "";
+          return trainName + number;
+        case allTrainDiagram[id] === undefined:
+          return "";
+        default:
+          // 行先がある場合は、行先を取得
+          const s = allTrainDiagram[id].split("#");
+          const hoge = s[s.length - 2].split(",")[0];
+          return migrateTrainName(hoge + "行き");
+      }
+    })();
+    return (
+      <TouchableOpacity
+        style={{
+          padding: 5,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 5,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => openTrainInfo(id)}
+      >
+        {img && (
+          <Image
+            source={{ uri: img }}
+            style={{ width: 20, height: 20, marginLeft: 10, marginRight: 10 }}
+          />
+        )}
+        {typeString && (
+          <Text
+            style={{
+              fontSize: 20,
+              color: "white",
+              fontFamily: fontAvailable ? "JR-Nishi" : undefined,
+              fontWeight: !fontAvailable ? "bold" : undefined,
+              marginRight: 5,
+            }}
+          >
+            {typeString}
+          </Text>
+        )}
+        {isOneMan && <OneManText />}
+        {trainNameString && (
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {trainNameString}
+          </Text>
+        )}
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+          {id}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
   return (
     <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
       <FlatList
+        contentContainerStyle={{ justifyContent: "flex-end", flexGrow: 1 }}
         style={{ flex: 1 }}
         data={keyList?.filter((d) => {
           if (useStationName) {
-            const ls = input.split(",").map((stationName) => {
-              return allTrainDiagram[d].includes(stationName);
+            const EachStopInfo = allTrainDiagram[d].split("#");
+            const ls = input.split(",").map((inputStationValue) => {
+              const isHit = EachStopInfo.find((dx) => {
+                if (!dx) return undefined;
+                const returnData = dx.split(",")[0] == inputStationValue;
+                if (returnData) {
+                  const isThrew = dx.split(",")[1].includes("通");
+                  if (isThrew) return undefined;
+                }
+                return returnData;
+              });
+              return isHit;
             });
-            return !ls.includes(false);
+            return !ls.includes(undefined);
           }
           if (useRegex) {
             try {
@@ -90,9 +174,17 @@ export default function AllTrainDiagramView() {
               return false;
             }
           }
-          return d.includes(input);
+          const { img, trainName, type, trainNumDistance, infogram, TrainNumberOverride } = customTrainDataDetector(d, allCustomTrainData);
+          return d.includes(input) || trainName.includes(input) || (TrainNumberOverride && TrainNumberOverride.includes(input));
         })}
         renderItem={({ item }) => <Item {...{ openTrainInfo, id: item }} />}
+        ListEmptyComponent={
+          <View style={{ flex: 1, alignItems: "center", marginTop: 50 }}>
+            <Text style={{ color: "white", fontSize: 20 }}>
+              検索結果がありません。
+            </Text>
+          </View>
+        }
         keyExtractor={(item) => item}
         //initialNumToRender={100}
       />
@@ -196,7 +288,7 @@ export default function AllTrainDiagramView() {
           }}
         >
           <TextInput
-            placeholder="列番を入力してフィルタリングします。"
+            placeholder="列番・列車名を入力してフィルタリングします。"
             onFocus={() => setKeyBoardVisible(true)}
             onEndEditing={() => {}}
             onChange={(ret) => setInput(ret.nativeEvent.text)}
@@ -216,25 +308,3 @@ export default function AllTrainDiagramView() {
     </View>
   );
 }
-const Item = ({ id, openTrainInfo }) => {
-  return (
-    <TouchableOpacity
-      style={{
-        padding: 5,
-        flexDirection: "row",
-        borderColor: "white",
-        borderWidth: 1,
-        margin: 5,
-        borderRadius: 5,
-        alignItems: "center",
-      }}
-      onPress={() => openTrainInfo(id)}
-    >
-      <View style={{ flex: 1 }} />
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        {id}
-      </Text>
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};

components/Apps.js

@@ -4,6 +4,7 @@ import {
   Platform,
   useWindowDimensions,
   LayoutAnimation,
+  Text,
 } from "react-native";
 import Constants from "expo-constants";
 import * as Updates from "expo-updates";
@@ -23,6 +24,7 @@ import { MapsButton } from "./Apps/MapsButton";
 import { ReloadButton } from "./Apps/ReloadButton";
 import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
 import { useStationList } from "../stateBox/useStationList";
+import { FixedPositionBox } from "./Apps/FixedPositionBox";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -30,14 +32,13 @@ var Status = StatusbarDetect(); */
 const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
 
 export default function Apps() {
-  const { webview } = useCurrentTrain();
+  const { webview, fixedPosition, setFixedPosition } = useCurrentTrain();
   const { height, width } = useWindowDimensions();
   const { navigate } = useNavigation();
   const { isLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
   const { originalStationList } = useStationList();
-  const { setInjectJavaScript, mapSwitch, trainInfo, setTrainInfo } =
-    useTrainMenu();
+  const { mapSwitch, trainInfo, setTrainInfo } = useTrainMenu();
 
   const openStationACFromEachTrainInfo = async (stationName) => {
     await SheetManager.hide("EachTrainInfo");
@@ -60,7 +61,7 @@ export default function Apps() {
         useShow: () => SheetManager.show("StationDetailView", { payload }),
         onExit: () => SheetManager.hide("StationDetailView"),
       };
-      setTimeout(()=>SheetManager.show("StationDetailView", { payload }),50);
+      setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
     } else {
       SheetManager.hide("StationDetailView");
     }
@@ -110,7 +111,6 @@ export default function Apps() {
       {isLandscape || (
         <MapsButton
           onPress={() => {
-            setInjectJavaScript("");
             navigate("trainMenu", { webview });
           }}
         />
@@ -127,6 +127,10 @@ export default function Apps() {
           }}
         />
       )}
+      {fixedPosition.type && (
+        <FixedPositionBox />
+      )}
+
       {mapSwitch == "true" ? (
         <ReloadButton
           onPress={() => Updates.reloadAsync()}

components/Apps/FixedPositionBox.tsx

@@ -0,0 +1,45 @@
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { View, Platform } from "react-native";
+import { useKeepAwake } from "expo-keep-awake";
+import Constants from "expo-constants";
+import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
+import { FixedStation } from "./FixedPositionBox/FixedStationBox";
+import { useState } from "react";
+import { useTrainMenu } from "@/stateBox/useTrainMenu";
+
+export const FixedPositionBox = () => {
+  const { mapSwitch } = useTrainMenu();
+  const { fixedPosition } = useCurrentTrain();
+  const [displaySize, setDisplaySize] = useState(mapSwitch == "true" ? 76 : 80);
+
+  useKeepAwake();
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        borderRadius: 5,
+        zIndex: 1500,
+        width: "100%",
+        height: displaySize,
+        flexDirection: "row",
+      }}
+      pointerEvents="box-none"
+    >
+      {fixedPosition.type === "station" && (
+        <FixedStation
+          stationID={fixedPosition.value}
+          displaySize={displaySize}
+          setDisplaySize={setDisplaySize}
+        />
+      )}
+      {fixedPosition.type === "train" && (
+        <FixedTrain
+          trainID={fixedPosition.value}
+          displaySize={displaySize}
+          setDisplaySize={setDisplaySize}
+        />
+      )}
+    </View>
+  );
+};

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -0,0 +1,381 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
+import { checkDuplicateTrainData } from "@/lib/checkDuplicateTrainData";
+import {
+  CustomTrainData,
+  eachTrainDiagramType,
+  StationProps,
+} from "@/lib/CommonTypes";
+import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
+import { getTrainDelayStatus } from "@/lib/getTrainDelayStatus";
+import { getTrainType } from "@/lib/getTrainType";
+import { objectIsEmpty } from "@/lib/objectIsEmpty";
+import { getTime, trainTimeFiltering } from "@/lib/trainTimeFiltering";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useAreaInfo } from "@/stateBox/useAreaInfo";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useStationList } from "@/stateBox/useStationList";
+import { useTrainMenu } from "@/stateBox/useTrainMenu";
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+
+import { FC, useEffect, useState } from "react";
+import { LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+
+type props = {
+  stationID: string;
+  displaySize: number;
+  setDisplaySize: (size: number) => void;
+};
+
+export const FixedStation: FC<props> = ({
+  stationID,
+  displaySize,
+  setDisplaySize,
+}) => {
+  const { mapSwitch } = useTrainMenu();
+  const { currentTrain, setFixedPosition } = useCurrentTrain();
+  const { getStationDataFromId } = useStationList();
+  const { navigate } = useNavigation();
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromId(stationID);
+    setStation(data);
+  }, [stationID]);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "white";
+  ////
+
+  const { allTrainDiagram } = useAllTrainDiagram();
+  const { areaStationID } = useAreaInfo();
+  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
+  const [isInfoArea, setIsInfoArea] = useState(false);
+
+  useEffect(() => {
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
+    if (!allTrainDiagram) {
+      setStationDiagram({});
+      return;
+    }
+    if (station.length == 0) {
+      setStationDiagram({});
+      return;
+    }
+    let returnData = {};
+    Object.keys(allTrainDiagram).forEach((key) => {
+      if (allTrainDiagram[key].match(station[0].Station_JP + ",")) {
+        returnData[key] = allTrainDiagram[key];
+      }
+    });
+    setStationDiagram(returnData);
+    setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
+  }, [allTrainDiagram, station]);
+
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState<
+    eachTrainDiagramType[]
+  >([]);
+
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, station[0]);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
+  const [selectedTrain, setSelectedTrain] = useState<eachTrainDiagramType[]>(
+    []
+  );
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train)) //現在の列車に絞る[ToDo]
+      .filter((d) => trainTimeFiltering({ d, currentTrain, station })) //時間フィルター
+      .filter((d) => !d.isThrough)
+      .filter((d) => d.lastStation != station[0].Station_JP); //最終列車表示設定
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
+
+  return (
+    <View
+      style={{ display: "flex", flexDirection: "column", flex: 1 }}
+      pointerEvents="box-none"
+    >
+      <TouchableOpacity
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          borderBottomColor: lineColor,
+          borderBottomWidth: 2,
+          position: "relative",
+        }}
+        activeOpacity={1}
+        onPress={() => {
+          const payload = {
+            currentStation: station,
+            navigate,
+            goTo: "menu",
+            onExit: () => SheetManager.hide("StationDetailView"),
+          };
+          //@ts-ignore
+          SheetManager.show("StationDetailView", { payload });
+        }}
+      >
+        <View
+          style={{
+            flex: 3,
+            flexDirection: "column",
+            alignContent: "center",
+            alignSelf: "center",
+            alignItems: "center",
+            height: "100%",
+            backgroundColor: "white",
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: lineColor,
+              flexDirection: "row",
+              width: "100%",
+              alignContent: "center",
+              alignItems: "center",
+              height: 22,
+              overflow: "hidden",
+              paddingLeft: 5,
+            }}
+          >
+            <StationNumberMaker
+              currentStation={station}
+              singleSize={18}
+              useEach={true}
+            />
+            <Text
+              style={{
+                fontSize: 14,
+                textAlignVertical: "center",
+                margin: 0,
+                padding: 0,
+                paddingLeft: 5,
+                flex: 1,
+                color: "white",
+              }}
+            >
+              {station[0]?.Station_JP}
+            </Text>
+            <View
+              style={{
+                backgroundColor: "white",
+                width: 6,
+                borderLeftColor: lineColor,
+                borderTopColor: lineColor,
+                borderBottomColor: "white",
+                borderRightColor: "white",
+                borderBottomWidth: 18,
+                borderLeftWidth: 10,
+                borderRightWidth: 0,
+                borderTopWidth: 5,
+                height: 20,
+              }}
+            />
+          </View>
+          <View
+            style={{
+              height: "100%",
+              backgroundColor: "white",
+              flex: 1,
+            }}
+          >
+            <Text style={{ fontSize: 18 }}>次の発車予定：</Text>
+          </View>
+        </View>
+
+        <View
+          style={{
+            flex: 5,
+            flexDirection: "column",
+            backgroundColor: "white",
+            borderTopWidth: 5,
+            borderTopColor: lineColor,
+            overflow: "hidden",
+          }}
+        >
+          {selectedTrain.length > 0 ? (
+            selectedTrain.map((d) => (
+              <FixedStationBoxEachTrain
+                d={d}
+                station={station[0]}
+                displaySize={displaySize}
+                key={d.train + "-fixedStationBox"}
+              />
+            ))
+          ) : (
+            <View style={{ backgroundColor: "white", flex: 1 }}>
+              <Text style={{ fontSize: parseInt("11%") }}>
+                当駅を発着する走行中の列車はありません。
+              </Text>
+            </View>
+          )}
+        </View>
+      </TouchableOpacity>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          borderTopColor: lineColor,
+          borderTopWidth: 2,
+        }}
+        pointerEvents="box-none"
+      >
+        <TouchableOpacity
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+          onPress={() => {
+            setFixedPosition({ type: null, value: null });
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: lineColor,
+              paddingHorizontal: 5,
+              height: 26,
+            }}
+          >
+            <Ionicons name="lock-closed" size={15} color="white" />
+            <Text
+              style={{
+                color: "white",
+                fontSize: 15,
+                paddingRight: 5,
+              }}
+            >
+              駅位置ロック中
+            </Text>
+            <Ionicons name="close" size={15} color="white" />
+          </View>
+
+          <View
+            style={{
+              backgroundColor: "#0000",
+              width: 6,
+              borderLeftColor: lineColor,
+              borderTopColor: lineColor,
+              borderBottomColor: "#0000",
+              borderRightColor: "#0000",
+              borderBottomWidth: 26,
+              borderLeftWidth: 10,
+              borderRightWidth: 0,
+              borderTopWidth: 0,
+              height: 26,
+            }}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+          onPress={() => {
+            LayoutAnimation.configureNext({
+              duration: 500,
+              update: { type: "spring", springDamping: 0.7 },
+            });
+            if (displaySize === 226) {
+              setDisplaySize(mapSwitch == "true" ? 76 : 80);
+            } else {
+              setDisplaySize(226);
+            }
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: "#0000",
+              width: 6,
+              borderLeftColor: "#0000",
+              borderTopColor: lineColor,
+              borderBottomColor: "#0000",
+              borderRightColor: lineColor,
+              borderBottomWidth: 26,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+              borderTopWidth: 0,
+              height: 26,
+            }}
+          />
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: lineColor,
+              paddingHorizontal: 5,
+              height: 26,
+            }}
+            pointerEvents="none"
+          >
+            <Ionicons
+              name={displaySize == 226 ? "chevron-up" : "chevron-down"}
+              size={15}
+              color="white"
+            />
+            <Text
+              style={{
+                color: "white",
+                paddingRight: 5,
+                backgroundColor: lineColor,
+                fontSize: 15,
+              }}
+            >
+              {displaySize == 226 ? "時刻表を縮小する" : "時刻表を展開する"}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
+  const { currentTrain } = useCurrentTrain();
+  const { stationList } = useStationList();
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const currentTrainData = checkDuplicateTrainData(
+    currentTrain.filter((a) => a.num == d.train),
+    stationList
+  );
+
+  const trainDelayStatus = `${getTrainDelayStatus(
+    currentTrainData,
+    station.Station_JP
+  )}`;
+  const [train, setTrain] = useState<CustomTrainData>(
+    getCurrentTrainData(d.train, currentTrain, allCustomTrainData)
+  );
+  useEffect(() => {
+    setTrain(getCurrentTrainData(d.train, currentTrain, allCustomTrainData));
+  }, [currentTrain, d.train]);
+  const { name, color } = getTrainType({ type: train.type, whiteMode: true });
+  return (
+    <View
+      style={{
+        backgroundColor: "white",
+        flexDirection: "row",
+        height: displaySize == 226 ? "7.5%" : "33%",
+        overflow: "visible",
+      }}
+    >
+      <Text style={{ fontSize: parseInt("11%"), flex: 3 }}>{d.time}</Text>
+      <Text style={{ fontSize: parseInt("11%"), flex: 4, color }}>{name}</Text>
+      <Text style={{ fontSize: parseInt("11%"), flex: 4 }}>
+        {d.lastStation}行
+      </Text>
+      <Text style={{ fontSize: parseInt("11%"), flex: 3 }}>
+        {trainDelayStatus}
+      </Text>
+    </View>
+  );
+};

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -0,0 +1,847 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useStationList } from "@/stateBox/useStationList";
+import { StationProps } from "@/lib/CommonTypes";
+import { FC, useEffect, useState } from "react";
+import {
+  Text,
+  TouchableOpacity,
+  View,
+  Image,
+  LayoutAnimation,
+  ScrollView,
+} from "react-native";
+import { getTrainType } from "@/lib/getTrainType";
+import { trainDataType, trainPosition } from "@/lib/trainPositionTextArray";
+import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
+import { lineListPair, stationIDPair } from "@/lib/getStationList";
+import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
+import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
+import { Ionicons } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { useTrainMenu } from "@/stateBox/useTrainMenu";
+
+type props = {
+  trainID: string;
+  displaySize: number;
+  setDisplaySize: (e: number) => void;
+};
+
+export const FixedTrain: FC<props> = ({
+  trainID,
+  displaySize,
+  setDisplaySize,
+}) => {
+  const {
+    fixedPosition,
+    setFixedPosition,
+    currentTrain,
+    getCurrentStationData,
+    getPosition,
+  } = useCurrentTrain();
+
+  const { mapSwitch } = useTrainMenu();
+  const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
+
+  const [train, setTrain] = useState<trainDataType>(null);
+  const [customData, setCustomData] = useState<CustomTrainData>(
+    getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
+  );
+  useEffect(() => {
+    setCustomData(
+      getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
+    );
+  }, [currentTrain, trainID]);
+  useEffect(() => {
+    const stationData = getCurrentStationData(trainID);
+    if (stationData) {
+      setTrain(stationData);
+    } else {
+      alert("追跡していた列車が消えました。追跡を終了します。");
+      setFixedPosition({ type: null, value: null });
+    }
+  }, [trainID, currentTrain]);
+
+  const { getStationDataFromName, stationList, originalStationList } =
+    useStationList();
+
+  const [trainDataWidhThrough, setTrainDataWithThrough] = useState<string[]>(
+    []
+  );
+
+  useEffect(() => {
+    const trainData = allTrainDiagram[trainID]?.split("#");
+    if (!trainData) return;
+    //let haveThrough = false;
+    //
+    const stopStationList = trainData.map((i) => {
+      const [station, se, time] = i.split(",");
+      //if (se == "通編") setHaveThrough(true);
+      return stationList.map((a) => a.filter((d) => d.StationName == station));
+    });
+    const allThroughStationList = stopStationList.map((i, index, array) => {
+      let allThroughStation = [];
+      if (index == array.length - 1) return;
+
+      const firstItem = array[index];
+      const secondItem = array[index + 1];
+      let betweenStationLine = "";
+      let baseStationNumberFirst = "";
+      let baseStationNumberSecond = "";
+      Object.keys(stationIDPair).forEach((d, index2) => {
+        if (!d) return;
+        const haveFirst = firstItem[index2];
+        const haveSecond = secondItem[index2];
+        if (haveFirst.length && haveSecond.length) {
+          betweenStationLine = d;
+          baseStationNumberFirst = haveFirst[0].StationNumber;
+          baseStationNumberSecond = haveSecond[0].StationNumber;
+        }
+      });
+      if (!betweenStationLine) return;
+      let reverse = false;
+      originalStationList[
+        lineListPair[stationIDPair[betweenStationLine]]
+      ].forEach((d) => {
+        if (
+          d.StationNumber > baseStationNumberFirst &&
+          d.StationNumber < baseStationNumberSecond
+        ) {
+          allThroughStation.push(`${d.Station_JP},通過,`);
+          //setHaveThrough(true);
+          reverse = false;
+        } else {
+          if (
+            d.StationNumber < baseStationNumberFirst &&
+            d.StationNumber > baseStationNumberSecond
+          ) {
+            allThroughStation.push(`${d.Station_JP},通過,`);
+            //setHaveThrough(true);
+            reverse = true;
+          }
+        }
+      });
+      if (reverse) allThroughStation.reverse();
+      return allThroughStation;
+    });
+    let mainArray = [...trainData];
+    let indexs = 0;
+    trainData.forEach((d, index) => {
+      indexs = indexs + 1;
+      if (!allThroughStationList[index]) return;
+      if (allThroughStationList[index].length == 0) return;
+      mainArray.splice(indexs, 0, ...allThroughStationList[index]);
+      indexs = indexs + allThroughStationList[index].length;
+    });
+    setTrainDataWithThrough(mainArray);
+  }, [allTrainDiagram, stationList, trainID]);
+  const [stopStationIDList, setStopStationList] = useState([]);
+  useEffect(() => {
+    const x = trainDataWidhThrough.map((i) => {
+      const [station, se, time] = i.split(",");
+      const Stations = stationList.map((a) =>
+        a.filter((d) => d.StationName == station)
+      );
+      const StationNumbers =
+        Stations &&
+        Stations.reduce((newArray, e) => {
+          return newArray.concat(e);
+        }, []).map((d) => d.StationNumber);
+      return StationNumbers;
+    });
+    setStopStationList(x);
+  }, [trainDataWidhThrough]);
+  const [currentPosition, setCurrentPosition] = useState<string[]>([]);
+
+  useEffect(() => {
+    let position = getPosition(train);
+    if (stopStationIDList.length == 0) return;
+    if (position) {
+      if (position.length > 1) {
+        if (position[0] == "-Iyo") {
+          position[0] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) - 1
+            ][0];
+        } else if (position[0] == "+Iyo") {
+          position[0] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) + 1
+            ][0];
+        }
+        if (position[1] == "+Iyo") {
+          position[1] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) + 1
+            ][0];
+        } else if (position[1] == "-Iyo") {
+          position[1] =
+            stopStationIDList[
+              stopStationIDList.findIndex((d) => d.includes("U14")) - 1
+            ][0];
+        }
+      }
+
+      setCurrentPosition(position);
+    }
+  }, [train,stopStationIDList]);
+
+  const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
+  const [untilStationData, setUntilStationData] = useState<StationProps[]>([]);
+  const [probably, setProbably] = useState(false);
+  useEffect(() => {
+    //棒線駅判定を入れて、棒線駅なら時間を見て分数がマイナスならcontinue;
+    const points = findReversalPoints(currentPosition, stopStationIDList);
+    if (!points) return;
+    if (points.length == 0) return;
+    let searchCountFirst = points.findIndex((d) => d == true);
+    let searchCountLast = points.findLastIndex((d) => d == true);
+
+    const delayTime = train?.delay == "入線" ? 0 : train?.delay;
+    let additionalSkipCount = 0;
+    for (
+      let searchCount = searchCountFirst;
+      searchCount < points.length;
+      searchCount++
+    ) {
+      const nextPos = trainDataWidhThrough[searchCount];
+
+      if (nextPos) {
+        const [station, se, time] = nextPos.split(",");
+
+        if (searchCountFirst == searchCountLast) {
+          if (se.includes("通")) {
+            continue;
+          }
+          setNextStationData(getStationDataFromName(station));
+          break;
+        }
+        //棒線駅判定
+        let distanceMinute = 0;
+        if (time != "") {
+          const now = dayjs();
+          const hour = parseInt(time.split(":")[0]);
+          const distanceTime = now
+            .hour(hour < 4 ? hour + 24 : hour)
+            .minute(parseInt(time.split(":")[1]));
+          distanceMinute = distanceTime.diff(now, "minute") + delayTime;
+          if (now.hour() < 4) {
+            if (hour < 4) {
+              distanceMinute = distanceMinute - 1440;
+            }
+          }
+        }
+        if (distanceMinute >= 0) {
+          if (se.includes("通")) {
+            continue;
+          } else {
+            setNextStationData(getStationDataFromName(station));
+            break;
+          }
+        } else {
+          additionalSkipCount++;
+          continue;
+        }
+      }
+    }
+    let trainList = [];
+    for (
+      let searchCount = searchCountFirst - 1;
+      searchCount < points.length;
+      searchCount++
+    ) {
+      trainList.push(trainDataWidhThrough[searchCount]);
+    }
+    if (additionalSkipCount > 0) {
+      trainList = trainList.slice(additionalSkipCount);
+      setProbably(true);
+    } else {
+      setProbably(false);
+    }
+    setUntilStationData(trainList);
+  }, [currentPosition, trainDataWidhThrough]);
+  const [ToData, setToData] = useState("");
+  useEffect(() => {
+    if (customData.ToData && customData.ToData != "") {
+      setToData(customData.ToData);
+    } else {
+      if (trainDataWidhThrough.length == 0) return;
+      setToData(
+        trainDataWidhThrough[trainDataWidhThrough.length - 2].split(",")[0]
+      );
+    }
+  }, [customData, trainDataWidhThrough]);
+
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromName(ToData);
+    setStation(data);
+  }, [ToData]);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "black";
+  //const lineColor = "red";
+  const customTrainType = getTrainType({
+    type: customData.type,
+    whiteMode: true,
+  });
+  const trainNameText = `${customData.trainName}${
+    customData.trainNumDistance !== null
+      ? ` ${parseInt(customData.TrainNumber) - customData.trainNumDistance}号`
+      : ""
+  }`;
+  return (
+    <View
+      style={{ display: "flex", flexDirection: "column", flex: 1 }}
+      pointerEvents="box-none"
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: displaySize === 226 ? "column" : "row",
+          backgroundColor: "black",
+          //borderBottomColor: "black",
+          //borderBottomWidth: 2,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: displaySize === 226 ? "row" : "column",
+            flex: 1,
+            backgroundColor: "white",
+            height: displaySize === 226 ? 200 : 50,
+            overflow: "hidden",
+          }}
+        >
+          <View
+            style={{ flex: displaySize === 226 ? 5 : 1, flexDirection: "row" }}
+          >
+            <View
+              style={{
+                backgroundColor: customTrainType.color,
+                flexDirection: "row",
+                alignContent: "center",
+                alignSelf: "center",
+                alignItems: "center",
+                height: "100%",
+              }}
+            >
+              <Image
+                source={{ uri: customData.img }}
+                width={displaySize === 226 ? 23 : 14}
+                height={displaySize === 226 ? 26 : 17}
+                style={{ margin: 5 }}
+              />
+              <View
+                style={{
+                  flexDirection: displaySize === 226 ? "column" : "row",
+                  alignContent: "center",
+                  alignSelf: "center",
+                  alignItems: "center",
+                  maxWidth: displaySize === 226 ? 80 : 100,
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: trainNameText.length > 4 ? 12 : 14,
+                    fontFamily: customTrainType.fontAvailable
+                      ? "JR-Nishi"
+                      : undefined,
+                    fontWeight: !customTrainType.fontAvailable
+                      ? "bold"
+                      : undefined,
+                    marginTop: customTrainType.fontAvailable ? 3 : 0,
+                    color: "white",
+                    textAlignVertical: "center",
+                    textAlign: "left",
+                  }}
+                >
+                  {customTrainType.shortName}
+                </Text>
+                {customData.trainName && (
+                  <Text
+                    style={{
+                      fontSize: trainNameText.length > 4 ? 8 : 14,
+                      color: "white",
+                      maxWidth: displaySize === 226 ? 200 : 60,
+                      textAlignVertical: "center",
+                    }}
+                  >
+                    {trainNameText}
+                  </Text>
+                )}
+              </View>
+              <View
+                style={{
+                  backgroundColor: customTrainType.color,
+                  width: 10,
+                  borderLeftColor: customTrainType.color,
+                  borderTopColor: lineColor,
+                  borderBottomColor: lineColor,
+                  borderTopWidth: displaySize === 226 ? 50 : 14,
+                  borderBottomWidth: displaySize === 226 ? 50 : 14,
+                  borderLeftWidth: displaySize === 226 ? 30 : 10,
+                  borderRightWidth: 0,
+                  //height: displaySize === 226 ? 20 : 100,
+                  height: "100%",
+                }}
+              ></View>
+            </View>
+            <View
+              style={{
+                flexDirection: "row",
+                alignContent: "center",
+                alignSelf: "center",
+                height: "100%",
+                backgroundColor: lineColor,
+                flex: 1,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignContent: "center",
+                  alignSelf: "center",
+                  alignItems: "center",
+                }}
+              >
+                <StationNumberMaker
+                  currentStation={station}
+                  singleSize={18}
+                  useEach={true}
+                />
+                <Text
+                  style={{
+                    fontSize: customData?.ToData?.length > 4 ? 9 : 12,
+                    color: "white",
+                    fontWeight: "bold",
+                    textAlignVertical: "center",
+                    margin: 0,
+                    padding: 0,
+                    height: "100%",
+                  }}
+                >
+                  {ToData}行
+                </Text>
+              </View>
+            </View>
+          </View>
+          {displaySize === 226 && (
+            <View
+              style={{
+                backgroundColor: "white",
+                width: 10,
+                borderLeftColor: "black",
+                borderTopColor: lineColor,
+                borderBottomColor: "white",
+                borderRightColor: "black",
+                borderTopWidth: 50,
+                borderBottomWidth: 0,
+                borderLeftWidth: 0,
+                borderRightWidth: 20,
+              }}
+            ></View>
+          )}
+          <View
+            style={{
+              backgroundColor: "black",
+              flex: displaySize === 226 ? 4 : 1,
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <View style={{ flexDirection: "column" }}>
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontWeight: "bold",
+                  color: "white",
+                  marginHorizontal: 5,
+                  paddingVertical: 0,
+                  marginVertical: -1,
+                }}
+              >
+                {nextStationData[0]?.Station_JP == train?.Pos
+                  ? "ただいま"
+                  : "次は"}
+              </Text>
+              {probably && (
+                <Text
+                  style={{
+                    fontSize: 5,
+                    color: "white",
+                    fontWeight: "bold",
+                    marginHorizontal: 5,
+                    paddingVertical: 0,
+                    marginVertical: -1,
+                  }}
+                >
+                  (時刻推定)
+                </Text>
+              )}
+            </View>
+            <StationNumberMaker
+              currentStation={nextStationData}
+              singleSize={20}
+              useEach={true}
+            />
+            <Text
+              style={{
+                fontSize: 18,
+                fontWeight: "bold",
+                color: "white",
+                flex: 1,
+              }}
+            >
+              {nextStationData[0]?.Station_JP || "不明"}
+            </Text>
+            {displaySize !== 226 && (
+              <View
+                style={{
+                  backgroundColor: "white",
+                  width: 10,
+                  borderLeftColor: "black",
+                  borderTopColor: "black",
+                  borderBottomColor: "white",
+                  borderRightColor: "white",
+                  borderTopWidth: 21,
+                  borderBottomWidth: 0,
+                  borderLeftWidth: 0,
+                  borderRightWidth: 7,
+                }}
+              ></View>
+            )}
+          </View>
+        </View>
+        <CurrentPositionBox
+          train={train}
+          lineColor={lineColor}
+          trainDataWithThrough={untilStationData}
+          isSmall={displaySize !== 226}
+        />
+      </View>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          borderTopColor: "black",
+          borderTopWidth: 2,
+        }}
+        pointerEvents="box-none"
+      >
+        <TouchableOpacity
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+          onPress={() => {
+            setFixedPosition({ type: null, value: null });
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: "black",
+              paddingHorizontal: 5,
+              height: 26,
+            }}
+          >
+            <Ionicons name="lock-closed" size={15} color="white" />
+            <Text
+              style={{
+                color: "white",
+                fontSize: 15,
+                paddingRight: 5,
+              }}
+            >
+              列車追跡中
+            </Text>
+            <Ionicons name="close" size={15} color="white" />
+          </View>
+
+          <View
+            style={{
+              backgroundColor: "#0000",
+              width: 6,
+              borderLeftColor: "black",
+              borderTopColor: "black",
+              borderBottomColor: "#0000",
+              borderRightColor: "#0000",
+              borderBottomWidth: 26,
+              borderLeftWidth: 10,
+              borderRightWidth: 0,
+              borderTopWidth: 0,
+              height: 26,
+            }}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+          onPress={() => {
+            LayoutAnimation.configureNext({
+              duration: 200,
+              update: { type: "easeInEaseOut", springDamping: 0.4 },
+            });
+            if (displaySize === 226) {
+              setDisplaySize(mapSwitch == "true" ? 76 : 80);
+            } else {
+              setDisplaySize(226);
+            }
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: "#0000",
+              width: 6,
+              borderLeftColor: "#0000",
+              borderTopColor: "black",
+              borderBottomColor: "#0000",
+              borderRightColor: "black",
+              borderBottomWidth: 26,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+              borderTopWidth: 0,
+              height: 26,
+            }}
+          />
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: "black",
+              paddingHorizontal: 5,
+              height: 26,
+            }}
+          >
+            <Ionicons
+              name={displaySize == 226 ? "chevron-up" : "chevron-down"}
+              size={15}
+              color="white"
+            />
+            <Text
+              style={{
+                color: "white",
+                paddingRight: 5,
+                backgroundColor: "black",
+                fontSize: 15,
+              }}
+            >
+              {displaySize == 226 ? "列車情報縮小" : "列車情報展開"}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const CurrentPositionBox = ({
+  train,
+  lineColor,
+  trainDataWithThrough,
+  isSmall,
+}) => {
+  let firstText = "";
+  let secondText = "";
+  let marginText = "";
+  const { isBetween, Pos: PosData } = trainPosition(train);
+  if (isBetween === true) {
+    const { from, to } = PosData;
+    firstText = from;
+    secondText = to;
+    marginText = "→";
+  } else {
+    const { Pos } = PosData;
+    if (Pos !== "") {
+      firstText = Pos;
+    }
+  }
+  const delayTime = train?.delay == "入線" ? 0 : parseInt(train?.delay);
+  return (
+    <View
+      style={{
+        flex: isSmall ? 1 : 3,
+        backgroundColor: "white",
+        flexDirection: "row",
+      }}
+    >
+      {isSmall && (
+        <View style={{ flexDirection: "column" }}>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: lineColor,
+              borderTopColor: lineColor,
+              borderBottomColor: "white",
+              borderRightColor: "white",
+              borderTopWidth: 28,
+              borderBottomWidth: 0,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+            }}
+          ></View>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: "white",
+              borderTopColor: "white",
+              borderBottomColor: "white",
+              borderRightColor: "white",
+              borderTopWidth: 18,
+              borderBottomWidth: 0,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+            }}
+          ></View>
+        </View>
+      )}
+      <ScrollView
+        style={{ flex: 1, flexDirection: "row" }}
+        horizontal
+        overScrollMode="always"
+      >
+        {trainDataWithThrough.length > 0 &&
+          trainDataWithThrough.map((d, index) => (
+            <EachStopData
+              d={d}
+              index={index}
+              key={d}
+              delayTime={delayTime}
+              isSmall={isSmall}
+              secondText={secondText}
+            />
+          ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+type eachStopType = {
+  d: string;
+  delayTime: number;
+  isSmall: boolean;
+  index: number;
+  secondText: string;
+};
+
+const EachStopData: FC<eachStopType> = (props) => {
+  const { d, delayTime, isSmall, index, secondText } = props;
+  if (!d) return null;
+  if (d == "") return null;
+  const [station, se, time] = d.split(",");
+  let distanceMinute = 0;
+  if (time != "") {
+    const now = dayjs();
+    const hour = parseInt(time.split(":")[0]);
+    const distanceTime = now
+      .hour(hour < 4 ? hour + 24 : hour)
+      .minute(parseInt(time.split(":")[1]));
+    distanceMinute = distanceTime.diff(now, "minute") + delayTime;
+    if (now.hour() < 4) {
+      if (hour < 4) {
+        distanceMinute = distanceMinute - 1440;
+      }
+    }
+  }
+  return (
+    <>
+      <View
+        style={{
+          flexDirection: "column",
+          backgroundColor: se.includes("通") ? "#6e6e6e77" : "#6e6e6eff",
+          borderRadius: 30,
+          marginHorizontal: isSmall ? 2 : 4,
+          marginVertical: isSmall ? 0 : 2,
+          padding: isSmall ? 2 : 4,
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+        }}
+        key={d + "CurrentPositionBox"}
+      >
+        {station.split("").map((i, index, array) => {
+          return (
+            <Text
+              key={i + index}
+              style={{
+                fontSize:
+                  array.length < 5 ? (isSmall ? 5 : 12) : isSmall ? 3 : 10,
+                color: "white",
+                margin: 0,
+                padding: 0,
+                fontWeight: "bold",
+              }}
+            >
+              {i}
+            </Text>
+          );
+        })}
+        <View style={{ flex: 1 }} />
+        {isSmall ||
+          (time != "" && (
+            <Text
+              style={{
+                fontSize: isSmall ? 8 : 12,
+                color: "black",
+                backgroundColor: "white",
+                fontWeight: "bold",
+              }}
+            >
+              {distanceMinute}
+            </Text>
+          ))}
+        <Text
+          style={{
+            fontSize: isSmall ? 8 : 14,
+            color:
+              index == 1 && secondText == ""
+                ? "#ffe852ff"
+                : se.includes("通")
+                ? "#020202ff"
+                : "white",
+            marginTop: isSmall ? 0 : 3,
+            height: isSmall ? "auto" : 17,
+            fontWeight: "bold",
+          }}
+        >
+          {index == 1 && secondText == ""
+            ? "→"
+            : se.includes("通")
+            ? null
+            : "●"}
+        </Text>
+      </View>
+      {index == 0 && secondText != "" && (
+        <View
+          style={{
+            flexDirection: "column",
+            backgroundColor: "#0000",
+            borderRadius: 10,
+            marginHorizontal: isSmall ? 2 : 4,
+            padding: isSmall ? 2 : 4,
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden",
+          }}
+        >
+          <View style={{ flex: 1 }} />
+          <Ionicons
+            name="arrow-forward"
+            size={isSmall ? 8 : 14}
+            color="black"
+            style={{ marginTop: isSmall ? 0 : 3 }}
+          />
+        </View>
+      )}
+    </>
+  );
+};

components/Apps/MapsButton.tsx

@@ -37,6 +37,7 @@ export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
       alignSelf: "center",
       alignItems: "center",
       display: mapSwitch == "true" ? "flex" : "none",
+      zIndex: 1000,
     },
     text: {
       textAlign: "center",

components/Apps/ReloadButton.tsx

@@ -38,6 +38,7 @@ export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
       alignSelf: "center",
       alignItems: "center",
       display: mapSwitch,
+      zIndex: 1000,
     },
     text: {
       textAlign: "center",

components/Apps/WebView.jsx

@@ -2,7 +2,13 @@ import React from "react";
 import { Platform, LayoutAnimation } from "react-native";
 import { WebView } from "react-native-webview";
 
-import { lineList, stationNamePair } from "../../lib/getStationList";
+import {
+  lineList,
+  lineList_LineWebID,
+  lineListPair,
+  stationIDPair,
+  stationNamePair,
+} from "../../lib/getStationList";
 import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
@@ -17,7 +23,8 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape } = useDeviceOrientationChange();
-  const { originalStationList, stationList } = useStationList();
+  const { originalStationList, stationList, getInjectJavascriptAddress } =
+    useStationList();
   const {
     setSelectedLine,
     mapsStationData: stationData,
@@ -45,7 +52,6 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
         break;
     }
   };
-
   const onMessage = (event) => {
     const { data } = event.nativeEvent;
     /**
@@ -129,20 +135,13 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
   const onLoadEnd = () => {
     if (once) return () => {};
     if (!stationData) return () => {};
+    if (!originalStationList) return () => {};
     if (favoriteStation.length < 1) return () => {};
-    const getStationLine = (now) => {
-      const returnData = Object.keys(stationData).filter((d) => {
-        const cache = stationData[d].findIndex(
-          (data) => data.Station_JP == now.Station_JP
-        );
-        return cache != -1;
-      });
-      return returnData[0];
-    };
-    const lineName = getStationLine(favoriteStation[0][0]);
-    webview.current?.injectJavaScript(
-      `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')`
+    const string = getInjectJavascriptAddress(
+      favoriteStation[0][0].StationNumber
     );
+    if (!string) return () => {};
+    webview?.current.injectJavaScript(string);
     once = true;
   };
 

components/DynamicHeaderScrollView.js

@@ -159,7 +159,7 @@ export const DynamicHeaderScrollView = (props) => {
           ref={scrollHandlers.ref}
           onLayout={scrollHandlers.onLayout}
           scrollEventThrottle={scrollHandlers.scrollEventThrottle}
-          style={{ backgroundColor: "white", zIndex: 0 }}
+          style={{ zIndex: 0 }}
           stickyHeaderIndices={[1]}
           onScroll={onScroll}
         >

components/FavoriteList.tsx

@@ -8,11 +8,13 @@ import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { FavoriteListItem } from "./atom/FavoriteListItem";
 import { BigButton } from "./atom/BigButton";
+import { useStationList } from "@/stateBox/useStationList";
 export const FavoriteList: FC = () => {
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
   const { mapsStationData: stationData } = useTrainMenu();
+  const { getInjectJavascriptAddress } = useStationList();
 
   useEffect(() => {
     const unsubscribe = addListener("tabPress", goToTrainMenu);
@@ -38,30 +40,20 @@ export const FavoriteList: FC = () => {
       </Text>
       <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
         {favoriteStation
-          .filter((d) => d[0].StationMap)
           .map((currentStation) => {
             return (
               <FavoriteListItem
                 currentStation={currentStation}
                 onPress={() => {
-                  const getStationLine = (now) => {
-                    const returnData = Object.keys(stationData).filter((d) => {
-                      const cache = stationData[d].findIndex(
-                        (data) => data.Station_JP == now.Station_JP
-                      );
-                      return cache != -1;
-                    });
-                    return returnData[0];
-                  };
-                  const lineName = getStationLine(currentStation[0]);
-
-                  webview.current?.injectJavaScript(
-                    `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}');
-                    document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
+                  const scriptString = getInjectJavascriptAddress(
+                    currentStation[0].StationNumber
                   );
+                  if (!scriptString) return;
+                  webview.current?.injectJavaScript(scriptString);
                   goBack();
                   if (canGoBack()) goBack();
                 }}
+                key={currentStation[0].StationNumber + "FavoriteList"}
               >
                 <View
                   style={{

components/Menu/Carousel/CarouselBox.tsx

@@ -0,0 +1,186 @@
+import Sign from "@/components/駅名表/Sign";
+import React, { useEffect, useRef, useState } from "react";
+import { AS } from "@/storageControl";
+import {
+  useWindowDimensions,
+  View,
+  LayoutAnimation,
+  TouchableOpacity,
+  Text,
+  ScrollView,
+} from "react-native";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import { SheetManager } from "react-native-actions-sheet";
+import { StationNumber } from "../StationPagination";
+import { SimpleDot } from "../SimpleDot";
+export const CarouselBox = ({
+  originalStationList,
+  listUpStation,
+  nearPositionStation,
+  setListIndex,
+  listIndex,
+  navigate,
+  stationListMode,
+  isSearchMode
+}) => {
+  const carouselRef = useRef<ICarouselInstance>(null);
+  const { height, width } = useWindowDimensions();
+  const [dotButton, setDotButton] = useState(false);
+  const carouselBadgeScrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    if (!carouselBadgeScrollViewRef.current) return;
+    const dotSize = dotButton ? 28 : 24;
+    const scrollToIndex = dotSize * listIndex - width / 2 + dotSize - 5;
+    carouselBadgeScrollViewRef.current.scrollTo({
+      x: scrollToIndex,
+      animated: true,
+    });
+  }, [listIndex, dotButton, width, carouselBadgeScrollViewRef]);
+  const oPSign = () => {
+    const payload = {
+      currentStation: listUpStation[listIndex],
+      navigate,
+      goTo: "menu",
+      //@ts-ignore
+      useShow: () => SheetManager.show("StationDetailView", { payload }),
+      onExit: () => SheetManager.hide("StationDetailView"),
+    };
+    //@ts-ignore
+    SheetManager.show("StationDetailView", { payload });
+  };
+  const oLPSign = () => {
+    LayoutAnimation.configureNext({
+      duration: 600,
+      update: { type: "spring", springDamping: 0.5 },
+    });
+    AS.setItem(
+      "CarouselSettings/activeDotSettings",
+      !dotButton ? "true" : "false"
+    );
+    setDotButton(!dotButton);
+  };
+
+  useEffect(() => {
+    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
+      setDotButton(data === "true");
+    });
+  }, []);
+  const RenderItem = ({ item, index }) => {
+    return (
+      <View
+        style={{
+          backgroundColor: "#0000",
+          width,
+          flexDirection: "row",
+          marginLeft: 0,
+          marginRight: 0,
+        }}
+        key={item[0].StationNumber}
+      >
+        <View style={{ flex: 1 }} />
+        {item[0].StationNumber != "null" ? (
+          <Sign
+            stationID={item[0].StationNumber}
+            isCurrentStation={item == nearPositionStation}
+            oP={oPSign}
+            oLP={oLPSign}
+          />
+        ) : (
+          <TouchableOpacity
+            style={{
+              width: width * 0.8,
+              height: ((width * 0.8) / 20) * 9,
+              borderColor: "#0099CC",
+              borderWidth: 1,
+              backgroundColor: "white",
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Text style={{ color: "#0099CC", fontSize: 20 }}>
+                {!!isSearchMode ? "路線検索モードです。入力欄に駅名やナンバリングを入力したり、上に並んでいる路線を選んでみましょう！" :stationListMode == "position"
+                  ? "現在地の近くに駅がありません。"
+                  : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        )}
+        <View style={{ flex: 1 }} />
+      </View>
+    );
+  };
+  return (
+    <View style={{ flex: 1, paddingTop: 10 }}>
+      <Carousel
+        ref={carouselRef}
+        data={
+          listUpStation.length > 0
+            ? listUpStation
+            : [[{ StationNumber: "null" }]]
+        }
+        height={(((width / 100) * 80) / 20) * 9 + 10}
+        pagingEnabled={true}
+        snapEnabled={true}
+        loop={false}
+        width={width}
+        style={{ width: width, alignContent: "center" }}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 1,
+          parallaxScrollingOffset: 100,
+          parallaxAdjacentItemScale: 0.8,
+        }}
+        scrollAnimationDuration={600}
+        onSnapToItem={setListIndex}
+        renderItem={RenderItem}
+        overscrollEnabled={false}
+        defaultIndex={listIndex >= listUpStation.length ? 0 : listIndex}
+      />
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignContent: "center",
+          alignItems: "center",
+          paddingVertical: 2,
+          paddingHorizontal: 10,
+          minWidth: width,
+        }}
+        ref={(scrollViewRef) => {
+          // ScrollViewのrefを保存
+          if (scrollViewRef) {
+            carouselBadgeScrollViewRef.current = scrollViewRef;
+          }
+        }}
+      >
+        {originalStationList &&
+          listUpStation.map((d, index) => {
+            const active = index == listIndex;
+            const numberKey = d[0].StationNumber + index;
+            return dotButton ? (
+              <StationNumber
+                onPress={() => setListIndex(index)}
+                currentStation={d}
+                active={active}
+                key={numberKey}
+              />
+            ) : (
+              <SimpleDot
+                onPress={() => setListIndex(index)}
+                active={active}
+                key={numberKey}
+              />
+            );
+          })}
+      </ScrollView>
+    </View>
+  );
+};

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -0,0 +1,172 @@
+import { AS } from "@/storageControl";
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  LayoutAnimation,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { SearchUnitBox } from "@/components/Menu/RailScope/SearchUnitBox";
+
+export const CarouselTypeChanger = ({
+  locationStatus,
+  position,
+  stationListMode,
+  setStationListMode,
+  setSelectedCurrentStation,
+  mapMode,
+  setMapMode,
+  isSearchMode,
+  setisSearchMode,
+  input,
+  setInput,
+}) => {
+  const returnToDefaultMode = () => {
+    LayoutAnimation.configureNext({
+      duration: 300,
+      create: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+      update: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+    });
+    setMapMode(false);
+  };
+  return (
+    <KeyboardAvoidingView
+      behavior="position"
+      contentContainerStyle={{ flex: 1, flexDirection: "row" }}
+      keyboardVerticalOffset={mapMode ? 0 : 45}
+      enabled={Platform.OS === "ios"}
+      style={{
+        width: "100%",
+        height: 40,
+        flexDirection: "row",
+        position: mapMode ? "absolute" : "relative",
+        bottom: mapMode ? 0 : undefined,
+        zIndex: 1000,
+        backgroundColor: "white",
+      }}
+      key={"carouselTypeChanger"}
+    >
+      <SearchUnitBox
+        isSearchMode={isSearchMode}
+        setisSearchMode={setisSearchMode}
+        input={input}
+        setInput={setInput}
+      />
+      <TouchableOpacity
+        style={{
+          flex: 1,
+          backgroundColor:
+            stationListMode == "position" ? "#0099CC" : "#0099CC80",
+          padding: 5,
+          alignItems: "center",
+          flexDirection: "row",
+          marginHorizontal: 5,
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          borderBottomLeftRadius: mapMode ? 0 : 20,
+          borderBottomRightRadius: mapMode ? 0 : 20,
+        }}
+        disabled={!locationStatus}
+        onPressIn={() => {
+          if (!position) return;
+          returnToDefaultMode();
+          setStationListMode("position");
+          AS.setItem("stationListMode", "position");
+          setSelectedCurrentStation(0);
+        }}
+        onPress={() => {
+          if (!position) return;
+          returnToDefaultMode();
+          setStationListMode("position");
+          AS.setItem("stationListMode", "position");
+          setSelectedCurrentStation(0);
+        }}
+      >
+        <Ionicons
+          name="locate-outline"
+          size={14}
+          color="white"
+          style={{ margin: 5 }}
+        />
+        <Text
+          style={{
+            color: "white",
+            fontSize: 14,
+            fontWeight: "bold",
+            flex: 1,
+            textAlign: "center",
+          }}
+        >
+          現在地基準
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={{
+          padding: 5,
+          alignItems: "center",
+          flexDirection: "row",
+          marginHorizontal: 5,
+          borderRadius: 50,
+        }}
+        onPressIn={() => returnToDefaultMode()}
+      >
+        <Ionicons
+          name={!mapMode ? "menu" : "chevron-up-outline"}
+          size={30}
+          color="#0099CC"
+          style={{ marginHorizontal: 5 }}
+        />
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={{
+          flex: 1,
+          backgroundColor:
+            stationListMode == "favorite" ? "#0099CC" : "#0099CC80",
+          padding: 5,
+          alignItems: "center",
+          flexDirection: "row",
+          marginHorizontal: 5,
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          borderBottomLeftRadius: mapMode ? 0 : 20,
+          borderBottomRightRadius: mapMode ? 0 : 20,
+        }}
+        onPressIn={() => {
+          returnToDefaultMode();
+          // お気に入りリスト更新
+          setStationListMode("favorite");
+          AS.setItem("stationListMode", "favorite");
+          setSelectedCurrentStation(0);
+        }}
+        onPress={() => {
+          returnToDefaultMode();
+          // お気に入りリスト更新
+          setStationListMode("favorite");
+          AS.setItem("stationListMode", "favorite");
+          setSelectedCurrentStation(0);
+        }}
+      >
+        <Ionicons name="star" size={14} color="white" style={{ margin: 5 }} />
+        <Text
+          style={{
+            color: "white",
+            fontSize: 14,
+            fontWeight: "bold",
+            flex: 1,
+            textAlign: "center",
+          }}
+        >
+          お気に入りリスト
+        </Text>
+      </TouchableOpacity>
+    </KeyboardAvoidingView>
+  );
+};

components/Menu/FixedContentBottom.js

@@ -6,10 +6,12 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import { ListItem } from "@rneui/themed";
-import TouchableScale from 'react-native-touchable-scale';
+import TouchableScale from "react-native-touchable-scale";
 import Icon from "react-native-vector-icons/Entypo";
 import { TextBox } from "../atom/TextBox";
 import { TicketBox } from "../atom/TicketBox";
+import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
+import { SheetManager } from "react-native-actions-sheet";
 
 export const FixedContentBottom = (props) => {
   return (
@@ -50,20 +52,6 @@ export const FixedContentBottom = (props) => {
           旅行ツアー
         </TicketBox>
       </View>
-      <TextBox
-        backgroundColor="red"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://xprocess.haruk.in/JR-shikoku-Apps-Common/2025-update-status")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          【ダイヤ改正に伴うデータ更新状況】
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          ダイヤ改正に伴うデータの更新状況を随時更新します。
-        </Text>
-      </TextBox>
       <TextBox
         backgroundColor="#ed86b5"
         flex={1}
@@ -82,7 +70,9 @@ export const FixedContentBottom = (props) => {
         backgroundColor="#0099CC"
         flex={1}
         onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
+          SheetManager.show("SpecialTrainInfo", {
+            payload: { navigate: props.navigate },
+          })
         }
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
@@ -179,105 +169,20 @@ export const FixedContentBottom = (props) => {
           <Text style={{ color: "white" }}>(通話料がかかります)</Text>
         </TouchableOpacity>
       </View>
-      <View
-        style={{
-          backgroundColor: "#0099CC",
-          borderRadius: 10,
-          margin: 10,
-          borderColor: "black",
-          borderWidth: 2,
-        }}
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          SheetManager.show("Social")
+        }
       >
-        <View
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
-        >
-          <MaterialCommunityIcons
-            name="twitter"
-            style={{ padding: 5 }}
-            color="white"
-            size={30}
-          />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            JR四国公式Twitter一族
-          </Text>
-        </View>
-        <View
-          style={{
-            padding: 10,
-            backgroundColor: "white",
-            borderBottomLeftRadius: 10,
-            borderBottomRightRadius: 10,
-          }}
-        >
-          {[
-            {
-              url: "https://twitter.com/jr_shikoku_info",
-              name: "ＪＲ四国列車運行情報",
-            },
-
-            {
-              url: "https://twitter.com/JRshikoku_eigyo",
-              name: "JR四国営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_tokyo",
-              name: "JR四国 東京営業情報【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_osaka",
-              name: "JR四国 大阪営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/jrs_matsuyama",
-              name: "JR四国 松山駅 【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_kochi",
-              name: "JR四国 高知駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jr_tokust",
-              name: "JR四国 徳島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_uwjm",
-              name: "JR四国 宇和島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_wkama",
-              name: "JR四国 ワープ高松支店【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_wkoch",
-              name: "JR四国 ワープ高知支店【公式】",
-            },
-            {
-              url: "https://twitter.com/Yoakemonogatari",
-              name: "志国土佐　時代の夜明けのものがたり【公式】",
-            },
-            {
-              url: "https://twitter.com/Smile_Eki_Chan",
-              name: "すまいるえきちゃん♡JR四国【公式】",
-            },
-            {
-              url: "https://twitter.com/sper_ponchan",
-              name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
-            },
-          ].map((d) => (
-            <ListItem bottomDivider onPress={() => Linking.openURL(d.url)}
-             key={d.url}friction={90} //
-             tension={100} // These props are passed to the parent component (here TouchableScale)
-             activeScale={0.95} //
-             Component={TouchableScale} 
-             >
-              <ListItem.Content>
-                <ListItem.Title>{d.name}</ListItem.Title>
-              </ListItem.Content>
-              <ListItem.Chevron />
-            </ListItem>
-          ))}
-        </View>
-      </View>
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          ソーシャルメディア
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          JR四国のSNS一覧です。
+        </Text>
+      </TextBox>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
       <TextBox
         backgroundColor="#8c00d6"
@@ -292,6 +197,19 @@ export const FixedContentBottom = (props) => {
         </Text>
       </TextBox>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>その他</Text>
+      <TextBox
+        backgroundColor="rgb(88, 101, 242)"
+        flex={1}
+        onPressButton={() => Linking.openURL("https://twitter.com/Xprocess_main/status/1955242437817012300")}
+      
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          公式Discordのご案内
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          皆さんの目撃情報をアプリに反映しませんか？Discordに登録して運用を報告しましょう！
+        </Text>
+      </TextBox>
       <TextBox
         backgroundColor="linear-gradient(120deg, rgba(247,135,54,0.208) 0%, rgba(54,125,247,0.208) 100%)"
         flex={1}

components/Menu/JRSTraInfoBox.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { SheetManager } from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+import { useTrainDelayData } from "@/stateBox/useTrainDelayData";
+import dayjs from "dayjs";
+export const JRSTraInfoBox = () => {
+  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
+    useTrainDelayData();
+  const styles: { [key: string]: StyleProp<ViewStyle> } = {
+    touch: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      margin: 10,
+      borderColor: "black",
+      borderWidth: 2,
+      overflow: "hidden",
+    },
+    scroll: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      maxHeight: 300,
+    },
+    bottom: {
+      position: "absolute",
+      top: 250,
+      alignItems: "center",
+      width: "100%",
+      height: 50,
+      backgroundColor: "#007FCC88",
+    },
+    box: {
+      padding: 10,
+      backgroundColor: "white",
+      borderBottomLeftRadius: 5,
+      borderBottomRightRadius: 5,
+    },
+  };
+  return (
+    <TouchableOpacity
+      onPress={() => SheetManager.show("JRSTraInfo")}
+      style={styles.touch}
+    >
+      <ScrollView scrollEnabled={false} style={styles.scroll}>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            列車遅延速報EX
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            {getTime ? dayjs(getTime).format("HH:mm") : NaN}
+          </Text>
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ margin: 5 }}
+            onPress={() => setLoadingDelayData(true)}
+          />
+        </View>
+        <View style={styles.box}>
+          {loadingDelayData ? (
+            <View style={{ alignItems: "center" }}>
+              <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("@/assets/51690-loading-diamonds.json")}
+              />
+            </View>
+          ) : delayData ? (
+            delayData.map((d, index, array) => {
+              let data = d.split(" ");
+              return (
+                <View
+                  style={{ flexDirection: "row" }}
+                  key={data[1] + "key" + index}
+                >
+                  <Text style={{ flex: 15, fontSize: 18 }}>
+                    {data[0].replace("\n", "")}
+                  </Text>
+                  <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
+                  <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
+                </View>
+              );
+            })
+          ) : (
+            <Text>現在、5分以上の遅れはありません。</Text>
+          )}
+        </View>
+      </ScrollView>
+      <View style={styles.bottom}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          詳細を見る
+        </Text>
+        <View style={{ flex: 1 }} />
+      </View>
+    </TouchableOpacity>
+  );
+};

components/Menu/RailScope/SearchUnitBox.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  View,
+  LayoutAnimation,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { useWindowDimensions } from "react-native";
+import lineColorList from "@/assets/originData/lineColorList";
+import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
+export const SearchUnitBox = ({
+  isSearchMode,
+  setisSearchMode,
+  input,
+  setInput,
+}) => {
+  const { height, width } = useWindowDimensions();
+  return (
+    <>
+      <TouchableOpacity
+        style={{
+          position: "absolute",
+          bottom: !!isSearchMode ? 0 : 60,
+          right: 0,
+          padding: !!isSearchMode ? 5 : 10,
+          margin: !!isSearchMode ? 0 : 10,
+          backgroundColor: "#0099CC",
+          borderRadius: !!isSearchMode ? 5 : 50,
+          width: !!isSearchMode ? width : 50,
+          zIndex: 1000,
+        }}
+        disabled={!!isSearchMode}
+        onPress={() => {
+          LayoutAnimation.configureNext({
+            duration: 100,
+            update: { type: "easeInEaseOut", springDamping: 0.6 },
+          });
+          setisSearchMode(true);
+        }}
+      >
+        {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
+        {!!isSearchMode && (
+          <View
+            style={{
+              backgroundColor: "#0099CC",
+              flexDirection: "column",
+              display: "flex",
+              flex: 1,
+              alignContent: "center",
+              justifyContent: "flex-end",
+            }}
+          >
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TouchableOpacity
+                onPress={() => {
+                  LayoutAnimation.configureNext({
+                    duration: 100,
+                    update: { type: "easeInEaseOut", springDamping: 0.6 },
+                  });
+                  setisSearchMode(false);
+                }}
+              >
+                <Ionicons
+                  name="arrow-back"
+                  size={20}
+                  color="white"
+                  style={{ marginRight: 10 }}
+                />
+              </TouchableOpacity>
+              <View
+                style={{
+                  backgroundColor: "white",
+                  borderRadius: 25,
+                  height: 30,
+                  paddingRight: 10,
+                  paddingLeft: 10,
+                  flex: 1,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <TextInput
+                  placeholder="駅名や駅ナンバリングを入力してフィルタリングします。"
+                  onEndEditing={() => {}}
+                  onChange={(ret) => setInput(ret.nativeEvent.text)}
+                  value={input}
+                  style={{ flex: 1 }}
+                />
+                {input && (
+                  <TouchableOpacity
+                    onPress={() => setInput("") }
+                    style={{
+                      padding: 3,
+                      borderRadius: 15,
+                      backgroundColor: "lightgray",
+                    }}
+                  >
+                    <Ionicons
+                      name="close"
+                      size={20}
+                      color="white"
+                    />
+                  </TouchableOpacity>
+                )}
+              </View>
+            </View>
+            {!input && (
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                {Object.keys(lineList_LineWebID).map((d) => (
+                  <TouchableOpacity
+                    style={{
+                      flex: 1,
+                      backgroundColor:
+                        lineColorList[stationIDPair[lineList_LineWebID[d]]],
+                      padding: 5,
+                      marginHorizontal: 2,
+                      borderRadius: 10,
+                      borderColor: "white",
+                      borderWidth: 1,
+                      borderStyle: "solid",
+                      alignItems: "center",
+                      opacity:
+                        isSearchMode == stationIDPair[lineList_LineWebID[d]]
+                          ? 1
+                          : !isSearchMode
+                          ? 1
+                          : 0.5,
+                      zIndex: 10,
+                    }}
+                    onPress={() => {
+                      const id = stationIDPair[lineList_LineWebID[d]];
+                      const s = isSearchMode == id ? undefined : id;
+                      if (!s) return;
+                      setisSearchMode(s);
+                    }}
+                    key={stationIDPair[lineList_LineWebID[d]]}
+                  >
+                    <Text
+                      style={{
+                        color: "white",
+                        fontWeight: "bold",
+                        fontSize: 20,
+                      }}
+                    >
+                      {stationIDPair[lineList_LineWebID[d]]}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
+          </View>
+        )}
+      </TouchableOpacity>
+    </>
+  );
+};

components/Menu/SpecialTrainInfoBox.tsx

@@ -0,0 +1,63 @@
+import { FC, useLayoutEffect, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { getPDFViewURL } from "@/lib/getPdfViewURL";
+import { ScrollView, SheetManager } from "react-native-actions-sheet";
+
+type props = {
+  navigate: (screen: string, params?: object) => void;
+};
+type specialDataType = { address: string; text: string; description: string };
+
+export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
+  const [specialData, setSpecialData] = useState<specialDataType[]>([]);
+  useLayoutEffect(() => {
+    fetch("https://n8n.haruk.in/webhook/sptrainfo")
+      .then((res) => res.json())
+      .then((data) => setSpecialData(data.data))
+      .catch((err) => console.log(err));
+  }, []);
+
+  const onPressItem: (d: specialDataType) => void = (d) => {
+    navigate("howto", {
+      info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
+      goTo: "menu",
+    });
+    SheetManager.hide("SpecialTrainInfo");
+  };
+  
+  return (
+    <View style={{ backgroundColor: "#0099CC" }}>
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <Text
+          style={{
+            fontSize: 30,
+            fontWeight: "bold",
+            color: "white",
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+          }}
+        >
+          臨時列車情報
+        </Text>
+      </View>
+      <ScrollView style={{ backgroundColor: "white" }}>
+        {specialData.map((d) => (
+          <TouchableOpacity
+            onPress={() => onPressItem(d)}
+            onLongPress={() => alert(d.description)}
+            key={d.address}
+            style={{
+              padding: 10,
+              borderBottomWidth: 1,
+              borderBottomColor: "#ccc",
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};

components/Menu/StationPagination.tsx

@@ -1,22 +1,9 @@
 import React, { FC, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
-import { useInterval } from "../../lib/useInterval";
+import { useInterval } from "@/lib/useInterval";
 
-import lineColorList from "../../assets/originData/lineColorList";
-
-type StationProps = {
-  DispNum: string;
-  JrHpUrl: string;
-  MyStation: string;
-  StationMap: string;
-  StationNumber: string | null;
-  StationTimeTable: string;
-  Station_EN: string;
-  Station_JP: string;
-  jslodApi: string;
-  lat: number;
-  lng: number;
-};
+import lineColorList from "@/assets/originData/lineColorList";
+import { StationProps } from "@/lib/CommonTypes";
 type StationNumberProps = {
   currentStation: StationProps[];
   active: boolean;

components/Menu/TitleBar.js

@@ -1,18 +1,25 @@
-import { View, TouchableOpacity, Linking } from "react-native";
-import AutoHeightImage from "react-native-auto-height-image";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import { View, TouchableOpacity, Linking,Platform, Image, useWindowDimensions } from "react-native";
+import Constants from "expo-constants";
+
 
 export const TitleBar = () => {
+  const { width } = useWindowDimensions();
   return (
-    <View style={{ alignItems: "center" }}>
+    <View
+      style={{
+        alignItems: "center",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 100,
+        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+      }}
+    >
       <TouchableOpacity
         onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
       >
-        <AutoHeightImage
-          source={require("../../assets/Header.png")}
-          resizeMode="contain"
-          width={wp("100%")}
-        />
+        <Image source={require("../../assets/Header.png")} style={{ width: width, resizeMode: "contain", backgroundColor: "white", height: 80 }} />
       </TouchableOpacity>
     </View>
   );

components/Menu/TopMenuButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Linking, View } from "react-native";
+import { UsefulBox } from "@/components/TrainMenu/UsefulBox";
+import MaterialCommunityIcons from "@expo/vector-icons/build/MaterialCommunityIcons";
+export const TopMenuButton = () => {
+  const buttonList:{
+    backgroundColor: string;
+    icon: keyof typeof MaterialCommunityIcons.glyphMap;
+    onPress: () => void;
+    title: string;
+  }[] = [
+    {
+      backgroundColor: "#F89038",
+      icon: "train-car",
+      onPress: () =>
+        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
+      title: "駅・鉄道情報",
+    },
+    {
+      backgroundColor: "#EA4752",
+      icon: "google-spreadsheet",
+      onPress: () =>
+        Linking.openURL(
+          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+        ),
+      title: "運賃表",
+    },
+    {
+      backgroundColor: "#91C31F",
+      icon: "clipboard-list-outline",
+      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
+      title: "予約",
+    },
+  ];
+
+
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {buttonList.map((d, index) => (
+        <UsefulBox
+          backgroundColor={d.backgroundColor}
+          icon={d.icon}
+          flex={1}
+          onPressButton={d.onPress}
+          key={index + d.icon}
+        >
+          {d.title}
+        </UsefulBox>
+      ))}
+    </View>
+  );
+};

components/Settings/FavoliteSettings/FavoiliteSettingsItem.js

@@ -2,44 +2,18 @@ import React, { useEffect, useState } from "react";
 import Icon from "react-native-vector-icons/Entypo";
 import { View, Text, TouchableOpacity, LayoutAnimation } from "react-native";
 import lineColorList from "../../../assets/originData/lineColorList";
+import Ionicons from "react-native-vector-icons/Ionicons";
 import { AS } from "../../../storageControl";
 
-export const FavoriteSettingsItem = ({
-  currentStation,
-  setFavoriteStation,
-  index,
-  array,
-}) => {
+export const FavoriteSettingsItem = ({ currentStation }) => {
   const lineIDs = [];
   const EachIDs = [];
-  console.log(currentStation);
   currentStation.forEach((d) => {
     if (!d.StationNumber) return;
     const textArray = d.StationNumber.split("");
     lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
     EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
   });
-  const [head, setHead] = useState(false);
-  const [tail, setTail] = useState(false);
-  useEffect(() => {
-    switch (true) {
-      case array.length == 1:
-        setHead(true);
-        setTail(true);
-        break;
-      case index == 0:
-        setHead(true);
-        setTail(false);
-        break;
-      case index == array.length - 1:
-        setHead(false);
-        setTail(true);
-        break;
-      default:
-        setHead(false);
-        setTail(false);
-    }
-  }, [array]);
 
   return (
     <View style={{ flexDirection: "row", backgroundColor: "white" }}>
@@ -47,7 +21,7 @@ export const FavoriteSettingsItem = ({
         style={{
           width: 35,
           position: "relative",
-          marginHorizontal: 15,
+          marginHorizontal: 10,
           flexDirection: "row",
           height: "101%",
         }}
@@ -91,43 +65,15 @@ export const FavoriteSettingsItem = ({
       >
         <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
         <View style={{ flex: 1 }} />
-        <TouchableOpacity
-          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
-          onPress={() => {
-            console.log("up");
-            LayoutAnimation.configureNext(
-              LayoutAnimation.Presets.easeInEaseOut
-            );
-            const removedStation = [...array].filter((d, i) => {
-              if (i == index) return false;
-              return true;
-            });
-            removedStation.splice(index - 1, 0, currentStation);
-            setFavoriteStation(removedStation);
-
-            AS.setItem("favoriteStation", JSON.stringify(removedStation));
-          }}
-        >
-          {head ? null : <Icon name="chevron-up" size={26} />}
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
-          onPress={() => {
-            console.log("down");
-            LayoutAnimation.configureNext(
-              LayoutAnimation.Presets.easeInEaseOut
-            );
-            const removedStation = [...array].filter((d, i) => {
-              if (i == index) return false;
-              return true;
-            });
-            removedStation.splice(index + 1, 0, currentStation);
-            setFavoriteStation(removedStation);
-            AS.setItem("favoriteStation", JSON.stringify(removedStation));
-          }}
-        >
-          {tail ? null : <Icon name="chevron-down" size={26} />}
-        </TouchableOpacity>
+      </View>
+      <View
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          alignSelf: "center",
+        }}
+      >
+        <Ionicons name={"reorder-two"} size={20} style={{ marginHorizontal: 10 }} />
       </View>
     </View>
   );

components/Settings/FavoriteSettings.js

@@ -1,31 +1,58 @@
-import React from "react";
-import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import React, { useCallback } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { useNavigation } from "@react-navigation/native";
+import Sortable from "react-native-sortables";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
-import { CheckBox } from "react-native-elements";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
+import { AS } from "@/storageControl";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const scrollableRef = useAnimatedRef();
   const { goBack } = useNavigation();
+  const renderItem = useCallback((props) => {
+    const { item, index } = props;
+    return (
+      <FavoriteSettingsItem currentStation={item} key={item[0].StationNumber} />
+    );
+  }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <SheetHeaderItem
         title="お気に入り設定"
         LeftItem={{ title: "＜ 設定", onPress: goBack }}
       />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
-        {favoriteStation.map((currentStation, index, array) => (
-          <FavoriteSettingsItem
-            currentStation={currentStation}
-            setFavoriteStation={setFavoriteStation}
-            index={index}
-            array={array}
-            key={currentStation[0].StationNumber}
-          />
-        ))}
-      </ScrollView>
+      <Animated.ScrollView
+        style={{ flex: 1, backgroundColor: "white" }}
+        contentContainerStyle={styles.contentContainer}
+        ref={scrollableRef}
+      >
+        <Sortable.Grid
+          columnGap={0}
+          columns={1}
+          data={favoriteStation}
+          renderItem={renderItem}
+          rowGap={0}
+          scrollableRef={scrollableRef} // required for auto scroll
+          snapOffsetY={0}
+          onDragEnd={(newOrder) => {
+            const newFavoriteStation = newOrder.indexToKey.map(
+              (item, index, array) => {
+                let returnData = [];
+                favoriteStation.forEach((station) => {
+                  if (station[0].StationNumber === item) returnData = station;
+                });
+                return returnData;
+              }
+            );
+            setFavoriteStation(newFavoriteStation);
+            AS.setItem("favoriteStation", JSON.stringify(newFavoriteStation));
+          }}
+          keyExtractor={(item) => item[0].StationNumber}
+        />
+      </Animated.ScrollView>
       <Text
         style={{
           backgroundColor: "white",
@@ -39,20 +66,19 @@ export const FavoriteSettings = () => {
   );
 };
 
-const SimpleSwitch = ({ bool, setBool, str }) => (
-  <View style={{ flexDirection: "row" }}>
-    <CheckBox
-      checked={bool == "true" ? true : false}
-      checkedColor="red"
-      onPress={() => setBool(bool == "true" ? "false" : "true")}
-      containerStyle={{
-        flex: 1,
-        backgroundColor: "#00000000",
-        borderColor: "white",
-        alignContent: "center",
-      }}
-      textStyle={{ fontSize: 20, fontWeight: "normal" }}
-      title={str}
-    />
-  </View>
-);
+const styles = StyleSheet.create({
+  card: {
+    alignItems: "center",
+    backgroundColor: "#36877F",
+    borderRadius: 10,
+    height: 100,
+    justifyContent: "center",
+  },
+  contentContainer: {
+    padding: 10,
+  },
+  text: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});

components/Settings/LayoutSettings.js

@@ -18,6 +18,8 @@ export const LayoutSettings = ({
   setUsePDFView,
   trainMenu,
   setTrainMenu,
+  uiSetting,
+  setUiSetting,
   trainPosition,
   setTrainPosition,
   headerSize,
@@ -38,6 +40,17 @@ export const LayoutSettings = ({
             falseText={"本家\n(文字アイコン)"}
             trueText={"オリジナル\n(車種アイコン)"}
           />
+          <SwitchArea
+            str="列車表示"
+            bool={uiSetting}
+            setBool={setUiSetting}
+            falseImage={require("../../assets/configuration/layout_default.jpg")}
+            trueImage={require("../../assets/configuration/layout_tokyo.jpg")}
+            falseText={"本家"}
+            trueText={"オリジナル"}
+            falseValue="default"
+            trueValue="tokyo"
+          />
           <SwitchArea
             str="トップメニュー表示"
             bool={mapSwitch}

components/Settings/SettingTopPage.js

@@ -17,7 +17,7 @@ import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
-const versionCode = "6.0.2";
+const versionCode = "6.1.8"; // Update this version code as needed
 
 export const SettingTopPage = ({
   testNFC,

components/Settings/settings.js

@@ -14,9 +14,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { TransitionPresets } from "@react-navigation/stack";
 //import * as ExpoFelicaReader from "../../modules/expo-felica-reader/src";
 import * as Updates from "expo-updates";
-import StatusbarDetect from "../../StatusbarDetect";
 import { AS } from "../../storageControl";
-var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 import AutoHeightImage from "react-native-auto-height-image";
 import { SettingTopPage } from "./SettingTopPage";
@@ -39,6 +37,7 @@ export default function Setting(props) {
   const [trainPosition, setTrainPosition] = useState(false);
   const [headerSize, setHeaderSize] = useState("default");
   const [startPage, setStartPage] = useState(false);
+  const [uiSetting, setUiSetting] = useState("tokyo");
   useLayoutEffect(() => {
     AS.getItem("iconSwitch").then(setIconSetting);
     AS.getItem("mapSwitch").then(setMapSwitch);
@@ -48,6 +47,7 @@ export default function Setting(props) {
     AS.getItem("trainPositionSwitch").then(setTrainPosition);
     AS.getItem("headerSize").then(setHeaderSize);
     AS.getItem("startPage").then(setStartPage);
+    AS.getItem("uiSetting").then(setUiSetting);
   }, []);
   const testNFC = async () => {
     //const result = await ExpoFelicaReader.scan();
@@ -63,6 +63,7 @@ export default function Setting(props) {
       AS.setItem("trainPositionSwitch", trainPosition.toString()),
       AS.setItem("headerSize", headerSize),
       AS.setItem("startPage", startPage.toString()),
+      AS.setItem("uiSetting", uiSetting),
     ]).then(() => Updates.reloadAsync());
   };
   return (
@@ -114,6 +115,8 @@ export default function Setting(props) {
             setTrainMenu={setTrainMenu}
             trainPosition={trainPosition}
             setTrainPosition={setTrainPosition}
+            uiSetting={uiSetting}
+            setUiSetting={setUiSetting}
             testNFC={testNFC}
             updateAndReload={updateAndReload}
             headerSize={headerSize}

components/StationDiagram/ExGridView.tsx

@@ -0,0 +1,355 @@
+import { FC, useRef, useState, useCallback, useEffect } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  useWindowDimensions,
+  Vibration,
+} from "react-native";
+import { ExGridViewItem } from "./ExGridViewItem";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  runOnJS,
+  useAnimatedScrollHandler,
+  withTiming,
+  Easing,
+  FadeIn,
+  FadeOut,
+  BounceInUp,
+  FadeInUp,
+  FadeOutUp,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { ExGridViewTimePositionItem } from "./ExGridViewTimePositionItem";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import dayjs from "dayjs";
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+}[];
+export const ExGridView: FC<{
+  data: hoge;
+}> = ({ data }) => {
+  const groupedData: {
+    [d: number]: {
+      trainNumber: string;
+      array: string;
+      name: string;
+      timeType: string;
+      time: string;
+      isOperating: boolean;
+    }[];
+  } = {
+    "4": [],
+    "5": [],
+    "6": [],
+    "7": [],
+    "8": [],
+    "9": [],
+    "10": [],
+    "11": [],
+    "12": [],
+    "13": [],
+    "14": [],
+    "15": [],
+    "16": [],
+    "17": [],
+    "18": [],
+    "19": [],
+    "20": [],
+    "21": [],
+    "22": [],
+    "23": [],
+    "0": [],
+    "1": [],
+    "2": [],
+    "3": [],
+  };
+  const groupKeys = [
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
+    "23",
+    "0",
+    "1",
+    "2",
+    "3",
+  ];
+
+  const { width } = useWindowDimensions();
+  const { currentTrain } = useCurrentTrain();
+  data.forEach((item) => {
+    let isOperating = false;
+    let [hour, minute] = dayjs()
+      .hour(parseInt(item.time.split(":")[0]))
+      .minute(parseInt(item.time.split(":")[1]))
+      .format("H:m")
+      .split(":");
+    if (currentTrain.findIndex((x) => x.num == item.trainNumber) != -1) {
+      const currentTrainTime = currentTrain.find(
+        (x) => x.num == item.trainNumber
+      )?.delay;
+      if (currentTrainTime != "入線") {
+        [hour, minute] = dayjs()
+          .hour(parseInt(hour))
+          .minute(parseInt(minute))
+          .add(parseInt(currentTrainTime), "minute")
+          .format("H:m")
+          .split(":");
+      }
+      isOperating = true;
+    }
+    groupedData[hour].push({ ...item, time: `${hour}:${minute}`, isOperating });
+  });
+  // ドラッグ位置を保持する共有値
+  const widthX = useSharedValue(width);
+  const savedWidthX = useSharedValue(width);
+  const isChanging = useSharedValue(false);
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const scrollRef = useRef<Animated.ScrollView>(null);
+  const scrollRef2 = useRef<Animated.ScrollView>(null);
+
+  // ScrollViewの有効/無効を切り替える関数
+  const toggleScrollEnabled = useCallback((enabled: boolean) => {
+    setScrollEnabled(enabled);
+  }, []);
+
+  // パンジェスチャー（ドラッグ）のハンドラー
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate((e) => {
+      const calc = savedWidthX.value * e.scale;
+      widthX.value = calc > width ? calc : width;
+      //runOnJS(scrollToRightEnd)();
+    })
+    .onEnd(() => {
+      savedWidthX.value = widthX.value;
+    });
+
+  const gesture = Gesture.Pan()
+    .minPointers(2) // 最低2本指
+    .maxPointers(2) // 最大2本指
+    .onStart(() => {
+      runOnJS(toggleScrollEnabled)(false);
+    })
+    .onEnd(() => {
+      runOnJS(toggleScrollEnabled)(true);
+      savedWidthX.value = widthX.value;
+    });
+  const longPressGesture = Gesture.Pan()
+    .minPointers(1)
+    .maxPointers(1)
+    .activateAfterLongPress(200)
+    .onStart(() => {
+      runOnJS(Vibration.vibrate)(30);
+      isChanging.value = true;
+    })
+    .onUpdate((e) => {
+      const calc = widthX.value + e.velocityY;
+      widthX.value = calc > width ? calc : width;
+    })
+    .onEnd(() => {
+      console.log("Long press ended");
+      isChanging.value = false;
+    });
+
+  // ジェスチャーを組み合わせる
+  const composed = Gesture.Simultaneous(
+    longPressGesture,
+    pinchGesture,
+    gesture
+  );
+
+  // アニメーションスタイル
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: widthX.value,
+    backgroundColor: isChanging.value ? "#8adeffff" : "white",
+  }));
+  // 時ヘッダーを横にスクロールしたときの処理
+  const scrollX = useSharedValue(0);
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    },
+  });
+  const stickyTextStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: scrollX.value }],
+  }));
+  const animatedLongPressStyle = useAnimatedStyle(() => ({
+    display: isChanging.value ? "flex" : "none",
+  }));
+  useEffect(() => {
+    const getCurrentTime = dayjs().hour();
+    setTimeout(() => {
+      const keyTime =
+        getCurrentTime - 4 <= 0 ? getCurrentTime + 24 : getCurrentTime;
+      const goTo = keyTime * 60;
+      if (goTo > 400) {
+        scrollRef2.current?.scrollTo({ y: goTo - 300, animated: true });
+      }
+    }, 400);
+  }, [scrollRef2]);
+  return (
+    <>
+      <Animated.View
+        style={[
+          {
+            position: "absolute",
+            width,
+            backgroundColor: "#26d1baff",
+            zIndex: 500,
+            top: 0,
+          },
+          animatedLongPressStyle,
+        ]}
+        entering={FadeInUp}
+        exiting={FadeOutUp}
+      >
+        <Text style={{ fontSize: 30, textAlign: "center", flex: 1 }}>
+          ↑縮小　・　拡大↓
+        </Text>
+      </Animated.View>
+      <GestureDetector gesture={composed}>
+        <Animated.ScrollView
+          horizontal
+          nestedScrollEnabled
+          pinchGestureEnabled={false}
+          scrollEnabled={scrollEnabled}
+          onScroll={scrollHandler}
+          onContentSizeChange={(contentWidth) => {
+            // 現在のスクロール位置を取得
+            const currentScrollX = scrollX.value;
+            const containerWidth = width - 50;
+
+            // コンテンツが画面からはみ出している場合のみ右端にスクロール
+            if (currentScrollX + containerWidth > contentWidth) {
+              const newScrollX = Math.max(0, contentWidth - containerWidth);
+              scrollRef.current?.scrollTo({ x: newScrollX, animated: true });
+            }
+          }}
+          ref={scrollRef}
+          contentContainerStyle={{
+            flexDirection: "column",
+            backgroundColor: "white",
+          }}
+        >
+          <Animated.View
+            style={[
+              {
+                width: width,
+                flexDirection: "row",
+              },
+              animatedStyle,
+            ]}
+          >
+            {Array.from({ length: 60 }, (_, i) => i + 1).map((num) => {
+              if (num % 5 === 0) {
+                return (
+                  <Text
+                    key={num + "ExGridViewTimeLabel"}
+                    style={{
+                      flex: 1,
+                      textAlign: "left",
+                      borderRightWidth: 0.5,
+                      borderColor: "#ccc",
+                      flexWrap: "nowrap",
+                      fontSize: 12,
+                    }}
+                  >
+                    {num - 5}
+                  </Text>
+                );
+              } else return <></>;
+            })}
+            <Text
+              style={{
+                textAlign: "right",
+                borderRightWidth: 0.5,
+                borderColor: "#ccc",
+                flexWrap: "nowrap",
+                fontSize: 12,
+                width: 50,
+              }}
+            >
+              (分)
+            </Text>
+          </Animated.View>
+          <Animated.ScrollView
+            style={[{ width: width }, animatedStyle]}
+            pinchGestureEnabled={false}
+            minimumZoomScale={0.5}
+            maximumZoomScale={3.0}
+            scrollEnabled={scrollEnabled}
+            stickyHeaderIndices={
+              groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
+            }
+            ref={scrollRef2}
+          >
+            {groupKeys.map((hour) => [
+              <View
+                style={{
+                  padding: 5,
+                  borderBottomWidth: 0.5,
+                  borderTopWidth: 0.5,
+                  borderBottomColor: "#ccc",
+                  backgroundColor: "#f0f0f0",
+                }}
+                key={hour}
+              >
+                <Animated.Text
+                  style={[
+                    {
+                      fontSize: 15,
+                      zIndex: 1,
+                      marginLeft: 0,
+                    },
+                    stickyTextStyle,
+                  ]}
+                >
+                  {hour}時台
+                </Animated.Text>
+              </View>,
+              <View
+                style={{
+                  flexDirection: "row",
+                  position: "relative",
+                  height: 50,
+                }}
+              >
+                {groupedData[hour].map((d, i, array) => (
+                  <ExGridViewItem
+                    key={d.trainNumber + i}
+                    d={d}
+                    index={i}
+                    width={widthX}
+                    array={array}
+                  />
+                ))}
+                <ExGridViewTimePositionItem width={widthX} hour={hour} />
+              </View>,
+            ])}
+          </Animated.ScrollView>
+        </Animated.ScrollView>
+      </GestureDetector>
+    </>
+  );
+};

components/StationDiagram/ExGridViewItem.tsx

@@ -0,0 +1,254 @@
+import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
+import { getStringConfig } from "@/lib/getStringConfig";
+import { getTrainType } from "@/lib/getTrainType";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { FC, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
+import { customTrainDataDetector } from "../custom-train-data";
+import dayjs from "dayjs";
+import { SheetManager } from "react-native-actions-sheet";
+import { useNavigation } from "@react-navigation/native";
+import { lineList } from "@/lib/getStationList";
+import { useStationList } from "@/stateBox/useStationList";
+import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
+import lineColorList from "@/assets/originData/lineColorList";
+import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+
+export const ExGridViewItem: FC<{
+  d: {
+    trainNumber: string;
+    array: string;
+    name: string;
+    timeType: string;
+    time: string;
+    isOperating: boolean;
+  };
+  index: number;
+  width: SharedValue<number>;
+  array: {
+    train: string;
+    lastStation: string;
+    time: string;
+    isThrough?: boolean;
+  }[];
+}> = ({ d, index, width, array }) => {
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const { originalStationList, stationList } = useStationList();
+  const { navigate, goBack } = useNavigation();
+  const [trainData, setTrainData] = useState<CustomTrainData>();
+  useEffect(() => {
+    if (allCustomTrainData) {
+      allCustomTrainData.forEach((x) => {
+        if (x.TrainNumber === d.trainNumber) {
+          setTrainData(x);
+        }
+      });
+    }
+  }, []);
+  const { color, name, data } = getTrainType({ type: trainData?.type, whiteMode: true });
+  // 列車名、種別、フォントの取得
+  const [
+    typeString,
+    trainName,
+    fontAvailable,
+    isOneMan,
+    infogram,
+    isEdit,
+    uwasa,
+    vehicleFormation,
+    trainInfoUrl,
+  ] = useMemo(() => {
+    const {
+      type,
+      trainName,
+      trainNumDistance,
+      infogram,
+      isEdit,
+      uwasa,
+      vehicleFormation,
+      trainInfoUrl,
+    } = customTrainDataDetector(d.trainNumber, allCustomTrainData);
+    const [typeString, fontAvailable, isOneMan] = getStringConfig(
+      type,
+      d.trainNumber
+    );
+    const trainData = d.array.split("#").filter((d) => d !== "");
+    switch (true) {
+      case trainData[trainData.length - 1] === undefined:
+        return [
+          typeString,
+          "",
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+      default:
+        // 行先がある場合は、行先を取得
+        const trainName = (d.timeType == "着" || d.timeType == "着編") ? trainData[0].split(",")[0] : trainData[trainData.length - 1].split(",")[0]
+        return [
+          typeString,
+          migrateTrainName(trainName),
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,
+        ];
+    }
+  }, [d.array]);
+  const timeArray = d.time.split(":").map((s) => parseInt(s));
+  const formattedTime = dayjs()
+    .set("hour", timeArray[0])
+    .set("minute", timeArray[1])
+    .format("m");
+  let isSameTimeBefore = false;
+  if (index > 0) {
+    const beforeItem = array[index - 1];
+    const beforeTimeArray = beforeItem.time.split(":").map((s) => parseInt(s));
+    const beforeFormattedTime = dayjs()
+      .set("hour", beforeTimeArray[0])
+      .set("minute", beforeTimeArray[1])
+      .format("m");
+    isSameTimeBefore = beforeFormattedTime === formattedTime;
+  }
+
+  const openStationACFromEachTrainInfo = async (stationName) => {
+    await SheetManager.hide("EachTrainInfo");
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+      return NearStation;
+    };
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      const payload = {
+        currentStation: returnDataBase,
+        navigate,
+        //@ts-ignore
+        useShow: () => SheetManager.show("StationDetailView", { payload }),
+        onExit: () => SheetManager.hide("StationDetailView"),
+      }; //@ts-ignore
+      setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
+    } else {
+      SheetManager.hide("StationDetailView");
+    }
+  };
+  const openTrainInfo = () => {
+    let TrainNumber = "";
+    if (trainData.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(trainData.TrainNumber.replace("M", "").replace("D", "")) -
+        trainData.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: trainData.TrainNumber,
+        limited: `${data}:${trainData.trainName}${TrainNumber}`,
+      },
+      navigate,
+      openStationACFromEachTrainInfo,
+      from: d.isOperating ? null :"AllTrainIDList",
+    };
+    SheetManager.show("EachTrainInfo", {
+      //@ts-ignore
+      payload,
+      onClose: (data) => {
+        //alert(data);
+      },
+    });
+  };
+  const [stationColor, setStationColor] = useState(["gray"]);
+  useEffect(() => {
+    const Stations = stationList
+      .map((a) => a.filter((d) => d.StationName == trainName))
+      .reduce((newArray, e) => newArray.concat(e), []);
+    const StationNumbers =
+      Stations &&
+      Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
+
+    if (StationNumbers) {
+      const stationLineColor = StationNumbers.map(
+        (d) => lineColorList[d.charAt(0)]
+      );
+      setStationColor(stationLineColor || ["gray"]);
+    }
+  }, [stationList]);
+  // if(typeString == "回送"){
+  //   return<></>;
+  // }
+  const animatedStyle = useAnimatedStyle(() => {
+    const leftPosition =
+      ((((width.value - 50) / 100) * parseInt(formattedTime)) / 60) * 100;
+    return {
+      left: leftPosition,
+    };
+  }, [formattedTime]);
+  return (
+    <View style={{ left: 0, height: 50 }}>
+      <Animated.View
+        style={[
+          {
+            flexDirection: "column",
+            //borderTopWidth: 1,
+            //borderBottomWidth: 0.5,
+            borderStyle: "solid",
+            borderColor: "darkgray",
+            opacity: d.timeType.includes("通") ? 0.5 : 1,
+            position: "absolute",
+            height: "100%",
+            width: 28,
+            top: isSameTimeBefore ? 10 : 0,
+          },
+          animatedStyle,
+        ]}
+      >
+        <TouchableOpacity style={{ flex: 1 }} onPress={() => openTrainInfo()}>
+          <View style={{ position: "relative" }}>
+            <Text style={{ fontSize: 20, color: color, opacity: isSameTimeBefore ? 0 : 1, fontWeight:d.isOperating ? "bold" : "thin", fontStyle:d.isOperating? "italic" :"normal" }}>{formattedTime}</Text>
+            <Text
+              style={{
+                fontSize: 10,
+                position: "absolute",
+                bottom: 0,
+                right: 0,
+                fontWeight: "bold",
+              }}
+            >
+              {d.timeType}
+            </Text>
+          </View>
+          <View style={{ flex: 1, flexDirection: "column" }}>
+            <Text
+              style={{
+                fontSize: 8,
+                flex: 1,
+                fontWeight: "bold",
+                color: stationColor[0],
+              }}
+            >
+              {trainName}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};

components/StationDiagram/ExGridViewTimePositionItem.tsx

@@ -0,0 +1,44 @@
+import { FC } from "react";
+import { View } from "react-native";
+import dayjs from "dayjs";
+import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
+
+export const ExGridViewTimePositionItem: FC<{
+  width: SharedValue<number>;
+  hour: string;
+}> = ({ width, hour }) => {
+  const date = dayjs();
+  const formattedTime = date.format("m");
+  const formattedHour = date.format("H");
+
+  // if(typeString == "回送"){
+  //   return<></>;
+  // }
+  const animatedStyle = useAnimatedStyle(() => {
+    const leftPosition =
+      ((((width.value - 50) / 100) * parseInt(formattedTime)) / 60) * 100;
+    return {
+      left: leftPosition,
+    };
+  }, [formattedTime]);
+  if (formattedHour != hour) return <></>;
+  return (
+    <View style={{ left: 0, height: 50, width: 1 }}>
+      <Animated.View
+        style={[
+          {
+            flexDirection: "column",
+            borderLeftWidth: 2,
+            //borderBottomWidth: 0.5,
+            borderStyle: "solid",
+            borderColor: "red",
+            position: "absolute",
+            height: "100%",
+          },
+          animatedStyle,
+        ]}
+      />
+    </View>
+  );
+};

components/StationDiagram/ListView.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
+import { View, Text, ScrollView } from "react-native";
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+};
+export const ListView: FC<{
+  data: hoge[];
+}> = ({ data }) => {
+  const groupedData: Record<string, hoge[]> = {};
+  const groupKeys = [];
+  data.forEach((item) => {
+    const hour = item.time.split(":")[0];
+    if (!groupedData[hour]) {
+      groupedData[hour] = [];
+      groupKeys.push(hour);
+    }
+    groupedData[hour].push(item);
+  });
+  return (
+    <ScrollView
+      style={{ backgroundColor: "white" }}
+      stickyHeaderIndices={
+        groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
+      }
+    >
+      {groupKeys.map((hour) => [
+        <View style={{ backgroundColor: "white", padding: 5, borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: "#ccc" }} key={hour}>
+          <Text style={{ fontSize: 15 }}>{hour}時台</Text>
+        </View>,
+        <View>
+          {groupedData[hour].map((d, i) => (
+            <ListViewItem key={d.trainNumber + i} d={d} />
+          ))}
+        </View>,
+      ])}
+    </ScrollView>
+  );
+};

components/StationDiagram/ListViewItem.tsx

@@ -0,0 +1,247 @@
+import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
+import { getStringConfig } from "@/lib/getStringConfig";
+import { getTrainType } from "@/lib/getTrainType";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { FC, useEffect, useMemo, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { customTrainDataDetector } from "../custom-train-data";
+import dayjs from "dayjs";
+import { SheetManager } from "react-native-actions-sheet";
+import { useNavigation } from "@react-navigation/native";
+import { lineList } from "@/lib/getStationList";
+import { useStationList } from "@/stateBox/useStationList";
+import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+import { StationNumberMaker } from "../駅名表/StationNumberMaker";
+import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
+import lineColorList from "@/assets/originData/lineColorList";
+
+export const ListViewItem: FC<{
+  d: {
+    trainNumber: string;
+    array: string;
+    name: string;
+    timeType: string;
+    time: string;
+  };
+}> = ({ d }) => {
+  const { allCustomTrainData } = useAllTrainDiagram();
+  const { navigate, goBack } = useNavigation();
+  const [trainData, setTrainData] = useState<CustomTrainData>();
+  useEffect(() => {
+    if (allCustomTrainData) {
+      allCustomTrainData.forEach((x) => {
+        if (x.TrainNumber === d.trainNumber) {
+          setTrainData(x);
+        }
+      });
+    }
+  }, []);
+  const { color, name, data } = getTrainType({
+    type: trainData?.type,
+    whiteMode: true,
+  });
+  // 列車名、種別、フォントの取得
+    const { getStationDataFromName, stationList, originalStationList } =
+    useStationList();
+  const [
+    typeString,
+    trainName,
+    fontAvailable,
+    isOneMan,
+    infogram,
+    isEdit,
+    uwasa,
+    vehicleFormation,
+    trainInfoUrl,lineColor
+  ] = useMemo(() => {
+    const {
+      type,
+      trainName,
+      trainNumDistance,
+      infogram,
+      isEdit,
+      uwasa,
+      vehicleFormation,
+      trainInfoUrl,
+    } = customTrainDataDetector(d.trainNumber, allCustomTrainData);
+    const [typeString, fontAvailable, isOneMan] = getStringConfig(
+      type,
+      d.trainNumber
+    );
+    const trainData = d.array.split("#").filter((d) => d !== "");
+    const station = getStationDataFromName(trainData[trainData.length - 1].split(",")[0]);
+    const lineColor =
+        station.length > 0
+          ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+          : "black";
+    switch (true) {
+      case trainData[trainData.length - 1] === undefined:
+        return [
+          typeString,
+          "",
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,lineColor
+        ];
+      default:
+        // 行先がある場合は、行先を取得
+        return [
+          typeString,
+          migrateTrainName(
+            trainData[trainData.length - 1].split(",")[0] + "行き"
+          ),
+          fontAvailable,
+          isOneMan,
+          infogram,
+          isEdit,
+          uwasa,
+          vehicleFormation,
+          trainInfoUrl,lineColor
+        ];
+    }
+  }, [d.array]);
+  const timeArray = d.time.split(":").map((s) => parseInt(s));
+  const formattedTime = dayjs()
+    .set("hour", timeArray[0])
+    .set("minute", timeArray[1])
+    .format("HH:mm");
+
+  const openStationACFromEachTrainInfo = async (stationName) => {
+    await SheetManager.hide("EachTrainInfo");
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+      return NearStation;
+    };
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      const payload = {
+        currentStation: returnDataBase,
+        navigate,
+        //@ts-ignore
+        useShow: () => SheetManager.show("StationDetailView", { payload }),
+        onExit: () => SheetManager.hide("StationDetailView"),
+      }; //@ts-ignore
+      setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
+    } else {
+      SheetManager.hide("StationDetailView");
+    }
+  };
+  const openTrainInfo = () => {
+    let TrainNumber = "";
+    if (trainData.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(trainData.TrainNumber.replace("M", "").replace("D", "")) -
+        trainData.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: trainData.TrainNumber,
+        limited: `${data}:${trainData.trainName}${TrainNumber}`,
+      },
+      navigate,
+      openStationACFromEachTrainInfo,
+      from: "AllTrainIDList",
+    };
+    SheetManager.show("EachTrainInfo", {
+      //@ts-ignore
+      payload,
+      onClose: (data) => {
+        //alert(data);
+      },
+    });
+  };
+  return (
+    <TouchableOpacity
+      style={{
+        flexDirection: "row",
+        marginHorizontal: 10,
+        borderTopWidth: 1,
+        borderBottomWidth: 0.5,
+        borderStyle: "solid",
+        borderColor: "darkgray",
+        padding: 10,
+        opacity: d.timeType?.includes("通") ? 0.5 : 1,
+      }}
+      onPress={() => openTrainInfo()}
+    >
+      <View style={{ position: "relative", flex: 3 }}>
+        <Text style={{ fontSize: 30, fontFamily: "DiaPro" }}>
+          {formattedTime}
+        </Text>
+        <Text
+          style={{
+            fontSize: 10,
+            position: "absolute",
+            bottom: -3,
+            right: 0,
+            fontWeight: "bold",
+          }}
+        >
+          {d.timeType}
+        </Text>
+      </View>
+      <View style={{ flex: 10, flexDirection: "column" }}>
+        <View style={{ flexDirection: "row" }}>
+          <Text
+            style={{
+              fontSize: 15,
+              fontFamily: fontAvailable ? "JR-Nishi" : undefined,
+              fontWeight: !fontAvailable ? "bold" : undefined,
+              paddingTop: fontAvailable ? 2 : 0,
+              paddingLeft: 10,
+              color: color,
+            }}
+          >
+            {typeString}
+          </Text>
+          <Text
+            style={{
+              fontSize: 15,
+              fontWeight: "bold",
+              flex: 1,
+              paddingLeft: 2,
+              color: color,
+            }}
+          >
+            {trainData?.trainName +
+              (trainData?.trainNumDistance !== null
+                ? ` ${parseInt(d.trainNumber) - trainData?.trainNumDistance}号`
+                : "")}
+          </Text>
+          <Text
+            style={{
+              fontSize: 15,
+              fontWeight: "bold",
+            }}
+          >
+            {trainData?.TrainNumber}
+          </Text>
+        </View>
+        <View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
+          <Text
+            style={{
+              fontSize: 15,
+              flex: 1,
+              paddingHorizontal: 10,
+              fontWeight: "bold",
+              color: lineColor
+            }}
+          >
+            {trainName}
+          </Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/StationDiagram/SearchBox/SearchInputSuggestBox.tsx

@@ -0,0 +1,164 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { useStationList } from "@/stateBox/useStationList";
+import { FC, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  LayoutAnimation,
+} from "react-native";
+
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+}[];
+
+export const SearchInputSuggestBox: FC<{
+  input: string;
+  setInput: (f: string) => void;
+  currentStationDiagram: hoge;
+}> = ({ input, setInput, currentStationDiagram }) => {
+  const { getStationDataFromName } = useStationList();
+  const [stationList, setStationList] = useState<
+    {
+      stationName: string;
+      number: string[];
+    }[]
+  >([]);
+  const [listFiltered, setListFiltered] = useState<string>("");
+  const [filteredStationLine, setFilteredStationLine] = useState<string[]>([]);
+  useEffect(() => {
+    const x: { stationName: string; number: string[] }[] = [];
+    currentStationDiagram.forEach((d) => {
+      d.array.split("#").forEach((s) => {
+        if (s == "") return;
+        const [stationName, type, time] = s.split(",");
+        if (!x.find((item) => item.stationName === stationName)) {
+          if (!type?.includes("通")) {
+            const stationData = getStationDataFromName(stationName);
+            if (listFiltered === "その他") {
+              if (stationData.length === 0) {
+                x.push({
+                  stationName,
+                  number: stationData.map((item) => item.StationNumber),
+                });
+                return;
+              }
+            }
+            const filter = stationData.filter((s) => {
+              if (listFiltered === "") return true;
+              if (listFiltered === "その他") {
+                return !(
+                  s.StationNumber ? s.StationNumber.slice(0, 1) : ""
+                ).match(/[A-Z]/);
+              }
+              return (
+                s.StationNumber ? s.StationNumber.slice(0, 1) : ""
+              ).includes(listFiltered);
+            });
+            if (filter.length === 0) return;
+            x.push({
+              stationName,
+              number: stationData.map((item) => item.StationNumber),
+            });
+          }
+        }
+      });
+    });
+    setStationList(x);
+  }, [currentStationDiagram, listFiltered]);
+  useEffect(() => {
+    const filtered = stationList
+      .map((s) => s.number?.map((r) => (r ? r.slice(0, 1) : "")))
+      .flat();
+    const arrayB = Array.from(new Set(filtered));
+    setFilteredStationLine(arrayB.map((r) => (r !== "" ? r : "その他")));
+  }, [stationList]);
+  return (
+    <View
+      style={{
+        maxHeight: 200,
+        width: "100%",
+        backgroundColor: "#0099CC",
+        zIndex: 100,
+      }}
+    >
+      <Text>{input}</Text>
+      <ScrollView keyboardShouldPersistTaps="handled">
+        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
+          {stationList.map(({ stationName, number }) => (
+            <TouchableOpacity
+              style={{
+                margin: 5,
+                padding: 5,
+                backgroundColor: "#eee",
+                borderRadius: 20,
+              }}
+              key={stationName + number.join(",")}
+              onPress={() => setInput(stationName)}
+            >
+              <Text>{stationName}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          borderTopColor: "#ccc",
+          borderTopWidth: 0.5,
+          paddingTop: 0,
+          marginTop: 10,
+        }}
+      >
+        <TouchableOpacity
+          style={{
+            margin: 5,
+            padding: 5,
+            backgroundColor: "#eee",
+            borderRadius: 5,
+          }}
+          key={"empty"}
+          onPress={() => {
+            LayoutAnimation.configureNext({
+              duration: 400,
+              update: { type: "easeInEaseOut", springDamping: 0.6 },
+            });
+            setListFiltered("");
+          }}
+        >
+          <Text>全て</Text>
+        </TouchableOpacity>
+        {filteredStationLine.map((line) => (
+          <TouchableOpacity
+            style={{
+              margin: 5,
+              padding: 5,
+              backgroundColor: lineColorList[line]
+                ? `${lineColorList[line]}`
+                : "#eee",
+              borderRadius: 5,
+            }}
+            key={line}
+            onPress={() => {
+              LayoutAnimation.configureNext({
+                duration: 400,
+                update: { type: "easeInEaseOut", springDamping: 0.6 },
+              });
+              setListFiltered(line);
+            }}
+          >
+            <Text style={{ color: lineColorList[line] ? `white` : "black" }}>
+              {line}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};

components/StationDiagram/StationDiagramView.tsx

@@ -0,0 +1,509 @@
+import { FC, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TextInput,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity,
+  LayoutAnimation,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "../atom/BigButton";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { ListView } from "@/components/StationDiagram/ListView";
+import dayjs from "dayjs";
+import { ExGridView } from "./ExGridView";
+import { Switch } from "react-native-elements";
+import { customTrainDataDetector } from "../custom-train-data";
+import { getTrainType } from "@/lib/getTrainType";
+import { trainTypeID } from "@/lib/CommonTypes";
+import { SearchInputSuggestBox } from "./SearchBox/SearchInputSuggestBox";
+
+type props = {
+  route: {
+    params: {
+      currentStation: {
+        Station_JP: string;
+        Station_EN: string;
+        StationName?: string;
+        MyStation?: string;
+        StationNumber: string;
+        DispNum?: string;
+        StationTimeTable: string;
+        StationMap?: string;
+        JrHpUrl?: string;
+        lat: number;
+        lng: number;
+        jslodApi: string;
+      }[];
+    };
+  };
+};
+export const StationDiagramView: FC<props> = ({ route }) => {
+  if (!route.params) {
+    return null;
+  }
+  const { currentStation } = route.params;
+  // 必要な情報：駅情報、全ダイヤ、カスタム列車情報
+  // 表示モード：縦並びリスト、横並びグリッド(時刻分割)、横並び単純左詰め
+  // フィルタリング：終点路線、種別、行先、関係停車駅
+
+  const { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
+
+  const { navigate, addListener, goBack, canGoBack } = useNavigation();
+  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
+  const [input, setInput] = useState("");
+  const [displayMode, setDisplayMode] = useState<"list" | "grid">("list");
+  const [selectedTypeList, setSelectedTypeList] = useState<trainTypeID[]>([
+    "Normal",
+    "OneMan",
+    "Rapid",
+    "OneManRapid",
+    "LTDEXP",
+    "NightLTDEXP",
+  ]);
+  type hoge = {
+    trainNumber: string;
+    array: string;
+    name: string;
+    timeType: string;
+    time: string;
+  }[];
+  const [showTypeFiltering, setShowTypeFiltering] = useState(false);
+  const [showLastStop, setShowLastStop] = useState(false);
+  const [threw, setIsThrew] = useState(false);
+  const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
+  useEffect(() => {
+    if (allTrainDiagram && currentStation.length > 0) {
+      const stationName = currentStation[0].Station_JP;
+      let returnDataArray: hoge = [];
+      keyList
+        .filter((s) => {
+          const boolData = allTrainDiagram[s];
+          let isStop = false;
+          let isStopPos = -1;
+          let isInput = false;
+          let isInputPos = -1;
+
+          boolData.split("#").forEach((d, index, array) => {
+            const [station, type, time] = d.split(",");
+            if (station === stationName) {
+              isStop = true;
+              isStopPos = index;
+            }
+            if (station === input && type && !type.includes("通")) {
+              isInput = true;
+              isInputPos = index;
+            }
+          });
+          if (input && input.length > 0) {
+            if (isInput && isStop) {
+              return isInputPos > isStopPos;
+            }
+            return false;
+          }
+          return isStop;
+        })
+        .forEach((d) => {
+          allTrainDiagram[d]
+            .split("#")
+            .filter((d) => {
+              const [station, type, time] = d.split(",");
+              return station === stationName;
+            })
+            .forEach((x) => {
+              const [name, timeType, time] = x.split(",");
+              if (!name || !timeType || !time) return;
+
+              const { img, trainName, type, trainNumDistance, infogram } =
+                customTrainDataDetector(d, allCustomTrainData);
+              const arrayData = {
+                trainNumber: d,
+                array: allTrainDiagram[d],
+                name,
+                timeType,
+                time,
+              };
+              // //条件によってフィルタリング
+              if (!threw && timeType && timeType.includes("通")) return;
+              if (!showLastStop && timeType && timeType.includes("着")) return;
+              if (
+                selectedTypeList.findIndex((item) => item === "SPCL") === -1
+              ) {
+                if (d.match(/9\d\d\d[D,M,S]/)) return;
+              }
+              if (
+                selectedTypeList.length > 0 &&
+                selectedTypeList.findIndex((item) => item === type) === -1
+              ) {
+                if (
+                  selectedTypeList.findIndex(
+                    (item) => item === "Forwarding"
+                  ) !== -1
+                ) {
+                  if (!d.match(/[A,B,R,H,E,T,L]/)) return;
+                } else if (
+                  selectedTypeList.findIndex((item) => item === "SPCL") !== -1
+                ) {
+                  if (!d.match(/9\d\d\d[D,M,S]/)) return;
+                } else {
+                  return;
+                }
+              }
+              returnDataArray.push(arrayData);
+            });
+        });
+      setCurrentStationDiagram(
+        returnDataArray.sort((a, b) => {
+          const adjustTime = (t: string) => {
+            const [h, m] = t.split(":").map(Number);
+            // 4時未満は翌日の時刻とみなして+24時間
+            return h < 4
+              ? dayjs().add(1, "day").hour(h).minute(m)
+              : dayjs().hour(h).minute(m);
+          };
+          const aa = adjustTime(a.time);
+          const bb = adjustTime(b.time);
+          const x = aa.isAfter(bb);
+          return x ? 1 : -1;
+          //return true;
+        })
+      );
+    }
+  }, [currentStation, showLastStop, threw, input, selectedTypeList]);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+      LayoutAnimation.configureNext({
+        duration: 600,
+        update: { type: "spring", springDamping: 0.6 },
+      });
+      setKeyBoardVisible(true);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      LayoutAnimation.configureNext({
+        duration: 600,
+        update: { type: "spring", springDamping: 0.6 },
+      });
+      setKeyBoardVisible(false);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <Text
+        style={{
+          textAlign: "center",
+          fontSize: 20,
+          color: "white",
+          fontWeight: "bold",
+          paddingVertical: 10,
+        }}
+      >
+        {currentStation[0].Station_JP}駅 時刻表
+      </Text>
+      {displayMode === "list" ? (
+        <ListView data={currentStationDiagram} />
+      ) : (
+        <ExGridView data={currentStationDiagram} />
+      )}
+      {/* <Text
+        style={{
+          backgroundColor: "white",
+          borderWidth: 1,
+          borderStyle: "solid",
+        }}
+      >
+        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
+      </Text> */}
+      <KeyboardAvoidingView
+        behavior="padding"
+        keyboardVerticalOffset={80}
+        enabled={Platform.OS === "ios"}
+      >
+        {!keyBoardVisible ? (
+          <ScrollView
+            horizontal
+            style={{
+              height: 35,
+              flexDirection: "row",
+              display: "flex",
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                alignItems: "center",
+                marginHorizontal: 5,
+                backgroundColor: threw ? "white" : "#ffffff00",
+                alignSelf: "center",
+                borderColor: "white",
+                borderWidth: 1,
+                borderRadius: 100,
+              }}
+              onPress={() => {
+                setIsThrew(!threw);
+              }}
+            >
+              <Text
+                style={{
+                  color: threw ? "#0099CC" : "white",
+                  fontSize: 14,
+                  margin: 5,
+                }}
+              >
+                通過
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                alignItems: "center",
+                marginHorizontal: 5,
+                backgroundColor: showLastStop ? "white" : "#ffffff00",
+                alignSelf: "center",
+                borderColor: "white",
+                borderWidth: 1,
+                borderRadius: 100,
+              }}
+              onPress={() => {
+                setShowLastStop(!showLastStop);
+              }}
+            >
+              <Text
+                style={{
+                  color: showLastStop ? "#0099CC" : "white",
+                  fontSize: 14,
+                  margin: 5,
+                }}
+              >
+                当駅止
+              </Text>
+            </TouchableOpacity>
+            <View
+              style={{
+                height: "auto",
+                borderLeftWidth: 1,
+                margin: 5,
+                borderColor: "white",
+              }}
+            />
+            {showTypeFiltering ? (
+              <>
+                <TypeSelectorBox
+                  selectedTypeList={selectedTypeList}
+                  setSelectedTypeList={setSelectedTypeList}
+                  typeID="Normal"
+                  relativeID={["OneMan"]}
+                />
+                <TypeSelectorBox
+                  selectedTypeList={selectedTypeList}
+                  setSelectedTypeList={setSelectedTypeList}
+                  typeID="Rapid"
+                  relativeID={["OneManRapid"]}
+                />
+                <TypeSelectorBox
+                  selectedTypeList={selectedTypeList}
+                  setSelectedTypeList={setSelectedTypeList}
+                  typeID="LTDEXP"
+                  relativeID={["NightLTDEXP"]}
+                />
+                <TypeSelectorBox
+                  selectedTypeList={selectedTypeList}
+                  setSelectedTypeList={setSelectedTypeList}
+                  typeID="SPCL"
+                  relativeID={[
+                    "SPCL_Normal",
+                    "SPCL_Rapid",
+                    "SPCL_EXP",
+                    "Party",
+                  ]}
+                />
+                <TypeSelectorBox
+                  selectedTypeList={selectedTypeList}
+                  setSelectedTypeList={setSelectedTypeList}
+                  typeID="Freight"
+                />
+                <TypeSelectorBox
+                  selectedTypeList={selectedTypeList}
+                  setSelectedTypeList={setSelectedTypeList}
+                  typeID="Forwarding"
+                  relativeID={["FreightForwarding"]}
+                />
+                <TouchableOpacity
+                  style={{
+                    alignItems: "center",
+                    marginHorizontal: 5,
+                    backgroundColor: "#ffffff00",
+                    alignSelf: "center",
+                    borderColor: "white",
+                    borderWidth: 1,
+                    borderRadius: 100,
+                  }}
+                  onPress={() => {
+                    LayoutAnimation.configureNext(
+                      LayoutAnimation.Presets.easeInEaseOut
+                    );
+                    setShowTypeFiltering(false);
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: "white",
+                      fontSize: 14,
+                      margin: 5,
+                    }}
+                  >
+                    ＜
+                  </Text>
+                </TouchableOpacity>
+              </>
+            ) : (
+              <TouchableOpacity
+                style={{
+                  alignItems: "center",
+                  marginHorizontal: 5,
+                  backgroundColor: "#ffffff00",
+                  alignSelf: "center",
+                  borderColor: "white",
+                  borderWidth: 1,
+                  borderRadius: 100,
+                }}
+                onPress={() => {
+                  LayoutAnimation.configureNext(
+                    LayoutAnimation.Presets.easeInEaseOut
+                  );
+                  setShowTypeFiltering(true);
+                }}
+              >
+                <Text
+                  style={{
+                    color: "white",
+                    fontSize: 14,
+                    margin: 5,
+                  }}
+                >
+                  ＞
+                </Text>
+              </TouchableOpacity>
+            )}
+
+            <TouchableOpacity
+              style={{
+                alignItems: "center",
+                marginHorizontal: 5,
+                backgroundColor: "#ffffff00",
+                alignSelf: "center",
+                borderColor: "white",
+                borderWidth: 1,
+                borderRadius: 100,
+              }}
+              onPress={() => {
+                setDisplayMode(displayMode === "list" ? "grid" : "list");
+              }}
+            >
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  margin: 5,
+                }}
+              >
+                {displayMode === "list" ? "横並びモード" : "リストモード"}
+              </Text>
+            </TouchableOpacity>
+          </ScrollView>
+        ) : (
+          <View style={{ position: "relative", display: "flex" }}>
+            <SearchInputSuggestBox
+              input={input}
+              setInput={setInput}
+              currentStationDiagram={currentStationDiagram}
+            />
+          </View>
+        )}
+        <View
+          style={{
+            height: 35,
+            margin: 5,
+            alignItems: "center",
+            backgroundColor: "#F4F4F4",
+            flexDirection: "row",
+            paddingLeft: 10,
+            paddingRight: 10,
+            borderRadius: 25,
+            borderColor: "#F4F4F4",
+          }}
+        >
+          <TextInput
+            placeholder="駅名を入力して停車駅でフィルタリングします。"
+            onFocus={() => setKeyBoardVisible(true)}
+            onEndEditing={() => {}}
+            onChange={(ret) => setInput(ret.nativeEvent.text)}
+            value={input}
+            style={{ flex: 1 }}
+          />
+        </View>
+      </KeyboardAvoidingView>
+      {keyBoardVisible || (
+        <BigButton onPress={() => goBack()} string="閉じる" />
+      )}
+    </View>
+  );
+};
+
+export const TypeSelectorBox: FC<{
+  selectedTypeList: trainTypeID[];
+  setSelectedTypeList: (list: trainTypeID[]) => void;
+  typeID: trainTypeID;
+  relativeID?: trainTypeID[];
+}> = (props) => {
+  const { selectedTypeList, setSelectedTypeList, typeID, relativeID } = props;
+  const isSelected =
+    selectedTypeList.findIndex((item) => item === typeID) !== -1;
+  const { color, shortName } = getTrainType({ type: typeID, whiteMode: true });
+  return (
+    <TouchableOpacity
+      style={{
+        alignItems: "center",
+        marginHorizontal: 5,
+        opacity: isSelected ? 1 : 0.8,
+        backgroundColor: isSelected ? "white" : color,
+        alignSelf: "center",
+        borderColor: color,
+        borderWidth: 1,
+        borderRadius: 100,
+      }}
+      onPress={() => {
+        if (selectedTypeList.findIndex((item) => item === typeID) === -1) {
+          setSelectedTypeList([
+            ...selectedTypeList,
+            typeID,
+            ...(relativeID ?? []),
+          ]);
+        } else {
+          setSelectedTypeList(
+            selectedTypeList.filter(
+              (item) => item !== typeID && !relativeID?.includes(item)
+            )
+          );
+        }
+      }}
+    >
+      <Text
+        style={{
+          color: isSelected ? color : "white",
+          fontSize: 14,
+          margin: 5,
+        }}
+      >
+        {shortName}
+      </Text>
+    </TouchableOpacity>
+  );
+};

components/TrainMenu/MapPin.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Marker } from "react-native-maps";
 import { useNavigation } from "@react-navigation/native";
+import { useStationList } from "@/stateBox/useStationList";
 type Props = {
   index: number;
   indexBase: number;
@@ -13,7 +14,8 @@ type Props = {
 
 export const MapPin: FC<Props> = (props) => {
   const { index, indexBase, latlng, D, d, navigate, webview } = props;
-  const {goBack} = useNavigation();
+  const { goBack } = useNavigation();
+  const { getInjectJavascriptAddress } = useStationList();
   return (
     <Marker
       key={index + indexBase}
@@ -22,10 +24,9 @@ export const MapPin: FC<Props> = (props) => {
         longitude: parseFloat(latlng[1]),
       }}
       onPress={() => {
-        webview.current?.injectJavaScript(
-          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
-          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
-        );
+        const address = getInjectJavascriptAddress(D.StationNumber);
+        if (!address) return;
+        webview.current?.injectJavaScript(address);
         if (navigate) goBack();
       }}
       image={require("../../assets/reccha-small.png")}

components/atom/SwitchArea.js

@@ -8,6 +8,8 @@ export const SwitchArea = ({
   trueImage,
   falseText,
   trueText,
+  falseValue = false,
+  trueValue = true,
   children,
 }) => {
   return (
@@ -37,7 +39,7 @@ export const SwitchArea = ({
           bool={bool}
           setBool={setBool}
           color="red"
-          value={false}
+          value={falseValue}
           image={falseImage}
           subText={falseText}
         />
@@ -45,7 +47,7 @@ export const SwitchArea = ({
           bool={bool}
           setBool={setBool}
           color="red"
-          value={true}
+          value={trueValue}
           image={trueImage}
           subText={trueText}
         />

components/atom/UsefulBox.js

@@ -1,22 +0,0 @@
-import { TouchableOpacity, Text } from "react-native";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-export const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
-        alignItems: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};

components/custom-train-data.ts

@@ -1,5 +1,24 @@
+import { CustomTrainData } from "@/lib/CommonTypes";
 import dayjs from "dayjs";
-export const customTrainDataDetector = (TrainNumber: string) => {
+type CustomTrainDataDetector = (
+  TrainNumber: string,
+  allCustomTrainData?: any[]
+) => CustomTrainData;
+export const customTrainDataDetector: CustomTrainDataDetector = (
+  TrainNumber,
+  allCustomTrainData
+) => {
+  if (allCustomTrainData && allCustomTrainData.length > 0) {
+    const customTrain = allCustomTrainData.find(
+      (train) => train.TrainNumber === TrainNumber
+    );
+    if (customTrain) {
+      return customTrain;
+    }
+  }
+  const trainGetText = `?trainNum=${TrainNumber}&month=${dayjs().format(
+    "M"
+  )}&day=${dayjs().format("D")}`;
   switch (TrainNumber) {
     //しおかぜメイン
     //8000 ノーマル
@@ -23,23 +42,23 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "しおかぜ",
-        trainIcon: "https://storage.haruk.in/s8000nr.png",
+        img: "https://storage.haruk.in/s8000nr.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/shiokaze.html",
         trainNumDistance: 0,
         info: "いしづちと併結 / 8000系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     case "2M":
       return {
         type: "LTDEXP",
         trainName: "しおかぜ",
-        trainIcon: "https://storage.haruk.in/s8000nr.png",
+        img: "https://storage.haruk.in/s8000nr.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/shiokaze.html",
         trainNumDistance: 0,
         info: "8000系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     //8000 アンパン
     case "10M":
@@ -49,11 +68,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "しおかぜ",
-        trainIcon: `https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=${TrainNumber}`,
+        img: `https://n8n.haruk.in/webhook/anpanman-pictures.png${trainGetText}`,
         infoUrl: "https://www.jr-eki.com/aptrain/naani/yosan/train.html",
         trainNumDistance: 0,
         info: "いしづちと併結 / アンパンマン列車で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     //8600
     case "8M":
@@ -67,12 +86,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "しおかぜ",
-        trainIcon: "https://storage.haruk.in/s8600.png",
+        img: "https://storage.haruk.in/s8600.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/shiokaze.html",
         trainNumDistance: 0,
         info: "いしづちと併結 / 8600系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //いしづちメイン
@@ -98,12 +117,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "いしづち",
-        trainIcon: "https://storage.haruk.in/s8000no.png",
+        img: "https://storage.haruk.in/s8000no.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/ishizuchi.html",
         trainNumDistance: 1000,
         info: "しおかぜと併結 / 8000系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //8000 アンパン
@@ -114,11 +133,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "いしづち",
-        trainIcon:  `https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=${TrainNumber}`,
+        img: `https://n8n.haruk.in/webhook/anpanman-pictures.png${trainGetText}`,
         infoUrl: "https://www.jr-eki.com/aptrain/naani/yosan/train.html",
         trainNumDistance: 1000,
         info: "しおかぜと併結 / アンパンマン列車で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //8600
@@ -133,12 +152,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "いしづち",
-        trainIcon: "https://storage.haruk.in/s8600_isz.png",
+        img: "https://storage.haruk.in/s8600_isz.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/ishizuchi.html",
         trainNumDistance: 1000,
         info: "しおかぜと併結 / 8600系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //MEXP
@@ -147,24 +166,24 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "モーニングEXP高松",
-        trainIcon: "https://storage.haruk.in/s8000nr.png",
+        img: "https://storage.haruk.in/s8000nr.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/morning.html",
         trainNumDistance: null,
         info: "8000系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     //8600
     case "1091M":
       return {
         type: "LTDEXP",
         trainName: "モーニングEXP松山",
-        trainIcon: "https://storage.haruk.in/s8600_isz.png",
+        img: "https://storage.haruk.in/s8600_isz.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/morning.html",
         trainNumDistance: null,
         info: "8600系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     //三桁いしづち
     //8000 アンパン
@@ -173,11 +192,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "いしづち",
-        trainIcon:  `https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=${TrainNumber}`,
+        img: `https://n8n.haruk.in/webhook/anpanman-pictures.png${trainGetText}`,
         infoUrl: "https://www.jr-eki.com/aptrain/naani/yosan/train.html",
         trainNumDistance: 940,
         info: "アンパンマン列車で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     //8600
     case "1043M":
@@ -185,23 +204,23 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "いしづち",
-        trainIcon: "https://storage.haruk.in/s8600_isz.png",
+        img: "https://storage.haruk.in/s8600_isz.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/ishizuchi.html",
         trainNumDistance: 940,
         info: "8600系で運転",
-        infogram: ""
+        infogram: "",
       };
     case "1046M":
       return {
         type: "LTDEXP",
         trainName: "いしづち",
-        trainIcon: "https://storage.haruk.in/s8600_isz.png",
+        img: "https://storage.haruk.in/s8600_isz.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/ishizuchi.html",
         trainNumDistance: 940,
         info: "8600系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //南風 2700ノーマル
@@ -226,11 +245,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "南風",
-        trainIcon: "https://storage.haruk.in/s2700.png",
-        infoUrl: "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/nanpu.html",
+        img: "https://storage.haruk.in/s2700.png",
+        infoUrl:
+          "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/nanpu.html",
         trainNumDistance: 30,
         info: "2700系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //2700アンパン
@@ -247,11 +267,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "南風",
-        trainIcon: `https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=${TrainNumber}`,
+        img: `https://n8n.haruk.in/webhook/anpanman-pictures.png${trainGetText}`,
         infoUrl: "https://www.jr-eki.com/aptrain/naani/dosan/train.html",
         trainNumDistance: 30,
         info: "アンパンマン列車で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //うずしお
@@ -272,12 +292,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "うずしお",
-        trainIcon: "https://storage.haruk.in/s2700_uzu.png",
+        img: "https://storage.haruk.in/s2700_uzu.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/uzushio.html",
         trainNumDistance: 3000,
         info: "2700系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //2700 二両編成
@@ -294,12 +314,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "うずしお",
-        trainIcon: "https://storage.haruk.in/s2700_uzu.png",
+        img: "https://storage.haruk.in/s2700_uzu.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/uzushio.html",
         trainNumDistance: 3000,
         info: "2700系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //2600
@@ -316,15 +336,14 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "うずしお",
-        trainIcon: "https://storage.haruk.in/s2600.png",
+        img: "https://storage.haruk.in/s2600.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/uzushio.html",
         trainNumDistance: 3000,
         info: "2600系で運転",
-        infogram: ""
+        infogram: "",
       };
 
-
     //マリンライナー
     case "3104M":
     case "3106M":
@@ -397,11 +416,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "Rapid",
         trainName: "マリンライナー",
-        trainIcon: "https://storage.haruk.in/s5001.png",
-        infoUrl: "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/marine.html",
+        img: "https://storage.haruk.in/s5001.png",
+        infoUrl:
+          "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/marine.html",
         trainNumDistance: 3100,
         info: "",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     case "3102M":
     case "3101M":
@@ -411,22 +431,23 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "Rapid",
         trainName: "マリンライナー",
-        trainIcon: "https://storage.haruk.in/s5001k.png",
-        infoUrl: "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/marine.html",
+        img: "https://storage.haruk.in/s5001k.png",
+        infoUrl:
+          "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/marine.html",
         trainNumDistance: 3100,
         info: "",
-        infogram: ""
+        infogram: "",
       };
     //下りサンポート
     case "1219M":
       return {
         type: "Normal",
         trainName: "南風リレー",
-        trainIcon: "",
+        img: "",
         infoUrl: "",
         trainNumDistance: null,
         info: "	土曜・休日は多度津－琴平間運休",
-        infogram: ""
+        infogram: "",
       };
 
     case "111M":
@@ -442,11 +463,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "Rapid",
         trainName: "サンポート南風リレー",
-        trainIcon: null,
+        img: null,
         infoUrl: null,
         trainNumDistance: null,
         info: null,
-        infogram: ""
+        infogram: "",
       };
     case "5109M":
     case "5135M":
@@ -454,32 +475,32 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "OneManRapid",
         trainName: "サンポート南風リレー",
-        trainIcon: null,
+        img: null,
         infoUrl: null,
         trainNumDistance: null,
         info: null,
-        infogram: ""
+        infogram: "",
       };
     case "137M":
       return {
         type: "Rapid",
         trainName: "サンポート",
-        trainIcon: null,
+        img: null,
         infoUrl: null,
         trainNumDistance: null,
         info: "土曜・休日運休",
-        infogram: ""
+        infogram: "",
       };
     //上りサンポート
     case "116M":
       return {
         type: "Normal",
         trainName: "南風リレー",
-        trainIcon: null,
+        img: null,
         infoUrl: null,
         trainNumDistance: null,
         info: null,
-        infogram: ""
+        infogram: "",
       };
 
     case "130M":
@@ -493,11 +514,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "Rapid",
         trainName: "サンポート南風リレー",
-        trainIcon: "",
+        img: "",
         infoUrl: "",
         trainNumDistance: null,
         info: "",
-        infogram: ""
+        infogram: "",
       };
     case "5118M":
     case "5120M":
@@ -507,11 +528,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "OneManRapid",
         trainName: "サンポート南風リレー",
-        trainIcon: null,
+        img: null,
         infoUrl: null,
         trainNumDistance: null,
         info: null,
-        infogram: ""
+        infogram: "",
       };
 
     //サンライズ瀬戸
@@ -520,24 +541,24 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "NightLTDEXP",
         trainName: "サンライズ瀬戸",
-        trainIcon: "https://storage.haruk.in/w285.png",
+        img: "https://storage.haruk.in/w285.png",
         infoUrl:
           "https://www.jr-odekake.net/train/sunriseseto_izumo/index.html",
         trainNumDistance: null,
         info: "",
-        infogram: "ブ"
+        infogram: "ブ",
       };
     case "8041M": //琴平延長高松迄
     case "8031M": //琴平延長高松以降
       return {
         type: "NightLTDEXP",
         trainName: "サンライズ瀬戸",
-        trainIcon: "https://storage.haruk.in/w285.png",
+        img: "https://storage.haruk.in/w285.png",
         infoUrl:
           "https://www.jr-odekake.net/train/sunriseseto_izumo/index.html",
         trainNumDistance: null,
         info: "琴平延長運転日",
-        infogram: "ブ"
+        infogram: "ブ",
       };
 
     //宇和海
@@ -571,11 +592,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "宇和海",
-        trainIcon: "https://storage.haruk.in/s2000_uwa.png",
-        infoUrl: "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/uwakai.html",
+        img: "https://storage.haruk.in/s2000_uwa.png",
+        infoUrl:
+          "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/uwakai.html",
         trainNumDistance: 1050,
         info: "2000系で運転",
-        infogram: ""
+        infogram: "",
       };
     //2000 アンパン込み
     case "1058D":
@@ -587,11 +609,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "宇和海",
-        trainIcon: `https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=${TrainNumber}`,
+        img: `https://n8n.haruk.in/webhook/anpanman-pictures.png${trainGetText}`,
         infoUrl: "https://www.jr-eki.com/aptrain/naani/yosan/train.html",
         trainNumDistance: 1050,
         info: "アンパン列車で運転",
-        infogram: ""
+        infogram: "",
       };
     //しまんと
     case "2002D":
@@ -601,12 +623,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "しまんと",
-        trainIcon: "https://storage.haruk.in/s2700_smn.png",
+        img: "https://storage.haruk.in/s2700_smn.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/shimanto.html",
         trainNumDistance: 2000,
         info: "2700系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //あしずり 2000
@@ -621,12 +643,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "あしずり",
-        trainIcon: `https://n8n.haruk.in/webhook/anpanman-pictures.png?trainNum=${TrainNumber}`,
+        img: `https://n8n.haruk.in/webhook/anpanman-pictures.png${trainGetText}`,
         infoUrl:
           "https://www.jr-eki.com/aptrain/naani/first-generation/jikoku.html",
         trainNumDistance: 2070,
         info: "2000系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //あしずり 2700
@@ -637,24 +659,24 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "あしずり",
-        trainIcon: "https://storage.haruk.in/s2700_asi.png",
+        img: "https://storage.haruk.in/s2700_asi.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/ashizuri.html",
         trainNumDistance: 2070,
         info: "2700系で運転",
-        infogram: ""
+        infogram: "",
       };
     case "2072D":
     case "2083D":
       return {
         type: "LTDEXP",
         trainName: "あしずり",
-        trainIcon: "https://storage.haruk.in/s2700_asi.png",
+        img: "https://storage.haruk.in/s2700_asi.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/ashizuri.html",
         trainNumDistance: 2070,
         info: "2700系で運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //剣山
@@ -668,12 +690,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "剣山",
-        trainIcon: "https://storage.haruk.in/s185tu.png",
+        img: "https://storage.haruk.in/s185tu.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/tsurugisan.html",
         trainNumDistance: 4000,
         info: "キハ185系で運転",
-        infogram: ""
+        infogram: "",
       };
 
     //よしのがわトロッコ
@@ -682,12 +704,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "よしのがわトロッコ",
-        trainIcon: "https://storage.haruk.in/s185to_ai.png",
+        img: "https://storage.haruk.in/s185to_ai.png",
         infoUrl:
           "https://www.jr-shikoku.co.jp/01_trainbus/event_train/yoshino_torokko.html",
         trainNumDistance: null,
         info: "",
-        infogram: ""
+        infogram: "",
       };
 
     //岡山高松アントロ
@@ -699,12 +721,12 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "アンパンマントロッコ",
-        trainIcon: "https://storage.haruk.in/s32to4.png",
+        img: "https://storage.haruk.in/s32to4.png",
         infoUrl:
           "https://www.jr-eki.com/aptrain/naani/torokko_seto/jikoku.html",
         trainNumDistance: null,
         info: "",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //伊予灘ものがたり
@@ -713,22 +735,22 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "伊予灘ものがたり",
-        trainIcon: "https://storage.haruk.in/s185iyor.png",
+        img: "https://storage.haruk.in/s185iyor.png",
         infoUrl: "https://iyonadamonogatari.com/",
         trainNumDistance: null,
         info: "",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     case "8092D":
     case "8094D":
       return {
         type: "LTDEXP",
         trainName: "伊予灘ものがたり",
-        trainIcon: "https://storage.haruk.in/s185iyoy.png",
+        img: "https://storage.haruk.in/s185iyoy.png",
         infoUrl: "https://iyonadamonogatari.com/",
         trainNumDistance: null,
         info: "",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //千年ものがたり
@@ -737,11 +759,11 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "四国まんなか千年ものがたり",
-        trainIcon: "https://storage.haruk.in/s185mm1.png",
+        img: "https://storage.haruk.in/s185mm1.png",
         infoUrl: "https://www.jr-shikoku.co.jp/sennenmonogatari/",
         trainNumDistance: null,
         info: "",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
 
     //夜明けものがたり
@@ -752,67 +774,67 @@ export const customTrainDataDetector = (TrainNumber: string) => {
       return {
         type: "LTDEXP",
         trainName: "時代の夜明けのものがたり",
-        trainIcon: "https://storage.haruk.in/s185ym1.png",
+        img: "https://storage.haruk.in/s185ym1.png",
         infoUrl: "https://www.jr-shikoku.co.jp/yoakenomonogatari/index.html",
         trainNumDistance: null,
         info: "",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     case "9174M":
       return {
         type: "SPCL_Rapid",
         trainName: "マリンライナー94号",
-        trainIcon: "https://storage.haruk.in/s5001.png",
-        infoUrl: "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/marine.html",
+        img: "https://storage.haruk.in/s5001.png",
+        infoUrl:
+          "https://www.jr-shikoku.co.jp/01_trainbus/vehicle-info/marine.html",
         trainNumDistance: null,
         info: "臨時列車 4/12,13,19のみ運転",
-        infogram: "Ｇ"
+        infogram: "Ｇ",
       };
     case "9395D":
       return {
         type: "SPCL_Normal",
         trainName: "",
-        trainIcon: "https://storage.haruk.in/s1500.png",
+        img: "https://storage.haruk.in/s1500.png",
         infoUrl: null,
         trainNumDistance: null,
         info: "臨時列車 4/12,13,19のみ運転",
-        infogram: ""
+        infogram: "",
+      };
+    case "9662D":
+    case "9665D":
+      return {
+        type: "SPCL_Normal",
+        trainName: "れんげ号",
+        img: "",
+        infoUrl: null,
+        trainNumDistance: null,
+        info: "臨時列車 4/29のみ運転",
+        infogram: "",
+      };
+    case "9664D":
+    case "9663D":
+      return {
+        type: "SPCL_Normal",
+        trainName: "わらぐろ号",
+        img: "",
+        infoUrl: null,
+        trainNumDistance: null,
+        info: "臨時列車 4/29のみ運転",
+        infogram: "",
       };
-      case "9662D":
-      case "9665D":
-        return {
-          type: "SPCL_Normal",
-          trainName: "れんげ号",
-          trainIcon: "",
-          infoUrl: null,
-          trainNumDistance: null,
-          info: "臨時列車 4/29のみ運転",
-          infogram: ""
-        };
-      case "9664D":
-      case "9663D":
-        return {
-          type: "SPCL_Normal",
-          trainName: "わらぐろ号",
-          trainIcon: "",
-          infoUrl: null,
-          trainNumDistance: null,
-          info: "臨時列車 4/29のみ運転",
-          infogram: ""
-        };
     default:
-      if(getJRF(TrainNumber) !== null){
+      if (getJRF(TrainNumber) !== null) {
         return {
           type: "Freight",
           trainName: getJRF(TrainNumber),
-          trainIcon: "https://storage.haruk.in/ef210a.png",
+          img: "https://storage.haruk.in/ef210a.png",
           infoUrl: null,
           trainNumDistance: null,
           info: "",
           infogram: "",
         };
-      }
-      else if (
+      } else if (
         new RegExp(/^4[1-9]\d\d[DM]$/).test(TrainNumber) ||
         new RegExp(/^5[1-7]\d\d[DM]$/).test(TrainNumber) ||
         new RegExp(/^3[2-9]\d\d[DM]$/).test(TrainNumber)
@@ -820,38 +842,38 @@ export const customTrainDataDetector = (TrainNumber: string) => {
         return {
           type: "OneMan",
           trainName: "",
-          trainIcon: null,
+          img: null,
           infoUrl: null,
           trainNumDistance: null,
           info: null,
-          infogram: ""
+          infogram: "",
         };
       else if (
         new RegExp(/^[1-9]\d\d[DM]$/).test(TrainNumber) ||
         new RegExp(/^1[26]\d\d[DM]$/).test(TrainNumber) ||
         new RegExp(/^58\d\d[DM]$/).test(TrainNumber) ||
         new RegExp(/^6\d\d\d[DM]$/).test(TrainNumber)
-      ){
-          return {
-            type: "Normal",
-            trainName: "",
-            trainIcon: null,
-            infoUrl: null,
-            trainNumDistance: null,
-            info: null,
-            infogram: ""  
-          };
-        } else {
-          return {
-            type: "Other",
-            trainName: "",
-            trainIcon: null,
-            infoUrl: null,
-            trainNumDistance: null,
-            info: null,
-            infogram: ""
-          };
-        }
+      ) {
+        return {
+          type: "Normal",
+          trainName: "",
+          img: null,
+          infoUrl: null,
+          trainNumDistance: null,
+          info: null,
+          infogram: "",
+        };
+      } else {
+        return {
+          type: "Other",
+          trainName: "",
+          img: null,
+          infoUrl: null,
+          trainNumDistance: null,
+          info: null,
+          infogram: "",
+        };
+      }
   }
 };
 export const getJRF = (num: string) => {

components/trainMenu.js

@@ -4,12 +4,13 @@ import MapView from "react-native-maps";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import lineColorList from "../assets/originData/lineColorList";
-import { lineListPair, stationIDPair } from "../lib/getStationList";
+import { lineList_LineWebID, lineListPair, stationIDPair } from "../lib/getStationList";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { MapPin } from "./TrainMenu/MapPin";
 import { UsefulBox } from "./TrainMenu/UsefulBox";
 import { MapsButton } from "./TrainMenu/MapsButton";
+import { useStationList } from "@/stateBox/useStationList";
 export default function TrainMenu({ style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
@@ -18,35 +19,30 @@ export default function TrainMenu({ style }) {
   const {
     selectedLine,
     setSelectedLine,
-    injectJavaScript,
-    setInjectJavaScript,
     mapsStationData: stationData,
   } = useTrainMenu();
+  const { originalStationList } = useStationList();
   useEffect(() => {
     const stationPinData = [];
-    Object.keys(stationData).forEach((d, indexBase) => {
-      stationData[d].forEach((D, index) => {
-        if (!D.StationMap) return null;
-        if (selectedLine && selectedLine != d) return;
-        const latlng = D.StationMap.replace(
-          "https://www.google.co.jp/maps/place/",
-          ""
-        ).split(",");
+    Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
+      originalStationList[d].forEach((D, index) => {
+        if (selectedLine && selectedLine != lineList_LineWebID[d]) return;
+        const latlng = [D.lat,D.lng];
         if (latlng.length == 0) return null;
         stationPinData.push({ D, d, latlng, indexBase: 0, index });
       });
     });
     setStationPin(stationPinData);
-  }, [stationData, selectedLine]);
+  }, [originalStationList, selectedLine]);
   useLayoutEffect(() => {
-    mapRef.current.fitToCoordinates(
+    mapRef?.current.fitToCoordinates(
       stationPin.map(({ latlng }) => ({
         latitude: parseFloat(latlng[0]),
         longitude: parseFloat(latlng[1]),
       })),
       { edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
     );
-  }, [stationPin]);
+  }, [stationPin,mapRef]);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
@@ -74,7 +70,7 @@ export default function TrainMenu({ style }) {
             d={d}
             navigate={navigate}
             webview={webview}
-            key={D.StationNumber + d}
+            key={D.Station_JP + D.StationNumber + d}
           />
         ))}
       </MapView>
@@ -165,6 +161,7 @@ export default function TrainMenu({ style }) {
                   });
                 });
               }}
+              key={stationIDPair[d]}
             >
               <Text
                 style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
@@ -183,11 +180,11 @@ export default function TrainMenu({ style }) {
             flex={1}
             onPressButton={() =>
               navigate("howto", {
-                info: "https://train.jr-shikoku.co.jp/usage.htm",
+                info: "https://xprocess.haruk.in/JR-shikoku-Apps-Common/info/train-position",
               })
             }
           >
-            使い方
+            走行位置の見方
           </UsefulBox>
           <UsefulBox
             backgroundColor={"#EA4752"}
@@ -214,7 +211,6 @@ export default function TrainMenu({ style }) {
       <MapsButton
         onPress={() => {
           goBack();
-          webview.current?.injectJavaScript(injectJavaScript);
         }}
         top={0}
         mapSwitch={"flex"}

components/trainMenu.web.js

@@ -19,8 +19,6 @@ export default function TrainMenu({ style }) {
   const {
     selectedLine,
     setSelectedLine,
-    injectJavaScript,
-    setInjectJavaScript,
     mapsStationData: stationData,
   } = useTrainMenu();
   useEffect(() => {
@@ -215,7 +213,6 @@ export default function TrainMenu({ style }) {
       <MapsButton
         onPress={() => {
           goBack();
-          webview.current?.injectJavaScript(injectJavaScript);
         }}
         top={0}
         mapSwitch={"flex"}

components/trainbaseview.js

@@ -29,7 +29,9 @@ export default function TrainBase({ route }) {
           "https://train.jr-shikoku.co.jp",
           "https://train.jr-shikoku.co.jp/sp.html",
         ]}
-        onMessage={(event) => {}}
+        onMessage={() => {
+          // 必要に応じてメッセージ処理を実装
+        }}
         mixedContentMode={"compatibility"}
         javaScriptEnabled
         injectedJavaScript={jss}

components/発車時刻表/EachData.tsx

@@ -1,34 +1,35 @@
 import React, { FC, useEffect, useState } from "react";
-import { Linking, TouchableOpacity, Text } from "react-native";
-import { Dialog, Button, Input } from "react-native-elements";
-import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
-import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus";
-import { getTrainType } from "../../lib/getTrainType";
-import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { TouchableOpacity } from "react-native";
+import { checkDuplicateTrainData } from "@/lib/checkDuplicateTrainData";
+import { getTrainDelayStatus } from "@/lib/getTrainDelayStatus";
+import { getTrainType } from "@/lib/getTrainType";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
-import { Description } from "./LED_inside_Component/Description";
-import { DependTime } from "./LED_inside_Component/DependTime";
-import { LastStation } from "./LED_inside_Component/LastStation";
-import { StatusAndDelay } from "./LED_inside_Component/StatusAndDelay";
-import { TrainName } from "./LED_inside_Component/TrainName";
-import { customTrainDataDetector } from "../custom-train-data";
-import { TrainPosition } from "./LED_inside_Component/TrainPosition";
-import { TrainPositionDataPush } from "./LED_inside_Component/TrainPositionDataPush";
-import { TrainPositionDataDelete } from "./LED_inside_Component/TrainPositionDataDelete";
-import { useStationList } from "../../stateBox/useStationList";
+import { Description } from "@/components/発車時刻表/LED_inside_Component/Description";
+import { DependTime } from "@/components/発車時刻表/LED_inside_Component/DependTime";
+import { LastStation } from "@/components/発車時刻表/LED_inside_Component/LastStation";
+import { StatusAndDelay } from "@/components/発車時刻表/LED_inside_Component/StatusAndDelay";
+import { TrainName } from "@/components/発車時刻表/LED_inside_Component/TrainName";
+import { TrainPosition } from "@/components/発車時刻表/LED_inside_Component/TrainPosition";
+import { StationPosPushDialog } from "@/components/発車時刻表/LED_inside_Component/TrainPositionDataPush";
+import { StationPosDeleteDialog } from "@/components/発車時刻表/LED_inside_Component/TrainPositionDataDelete";
+import { useStationList } from "@/stateBox/useStationList";
+import useInterval from "@/lib/useInterval";
+import dayjs from "dayjs";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { CustomTrainData, StationProps, trainTypeID } from "@/lib/CommonTypes";
+import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
 
 type Props = {
   d: {
     train: string;
     lastStation: string;
     time: string;
+    isThrough?: boolean;
   };
   trainIDSwitch: boolean;
   trainDescriptionSwitch: boolean;
-  station: {
-    Station_JP: string;
-    StationNumber: string;
-  };
+  station: StationProps;
   navigate: (screen: string, data?: any) => void;
   openStationACFromEachTrainInfo: (station: string) => void;
 };
@@ -43,6 +44,7 @@ export const EachData: FC<Props> = (props) => {
   } = props;
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
+  const { allCustomTrainData } = useAllTrainDiagram();
   const openTrainInfo = (d: {
     train: string;
     lastStation: string;
@@ -58,7 +60,7 @@ export const EachData: FC<Props> = (props) => {
     const payload = {
       data: {
         trainNum: d.train,
-        limited: `${getTrainType(train.type).data}:${
+        limited: `${getTrainType({type:train.type}).data}:${
           train.trainName
         }${TrainNumber}`,
       },
@@ -71,32 +73,9 @@ export const EachData: FC<Props> = (props) => {
     });
   };
 
-  const getTrainDataFromCurrentTrain = (trainNum: string) => {
-    const customTrainData = customTrainDataDetector(d.train);
-    switch (customTrainData.type) {
-      case "Normal":
-      case "OneMan":
-        const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
-        if (currentTrainData.length == 0) return customTrainData;
-        else if (currentTrainData[0].Type.includes("rapid:")) {
-          const typeText = currentTrainData[0].Type.split(":");
-          const returnData = {
-            type: "Rapid",
-            trainName: typeText[1].replace("\r", ""),
-            trainIcon: null,
-            trainNumDistance: null,
-            info: "",
-          };
-          return returnData;
-        }
-        return customTrainData;
-      default:
-        return customTrainData;
-    }
-  };
-  const [train, setTrain] = useState(getTrainDataFromCurrentTrain(d.train));
+  const [train, setTrain] = useState<CustomTrainData>(getCurrentTrainData(d.train,currentTrain,allCustomTrainData));
   useEffect(() => {
-    setTrain(getTrainDataFromCurrentTrain(d.train));
+    setTrain(getCurrentTrainData(d.train,currentTrain,allCustomTrainData));
   }, [currentTrain, d.train, trainDescriptionSwitch]);
   // 土讃線複数存在対策
   const currentTrainData = checkDuplicateTrainData(
@@ -108,35 +87,70 @@ export const EachData: FC<Props> = (props) => {
     station.Station_JP
   )}`;
 
-  const [platformNumber, setPlatformNumber] = useState<number>();
-  const [platformDescription, setPlatformDescription] = useState<string>();
-
+  // 投稿システム関係
+  // Dialog表示関係
   const [dialog, setDialog] = useState(false);
   const [deleteDialog, setDeleteDialog] = useState(false);
-  const [posInput, setPosInput] = useState("");
-  const [descInput, setDescInput] = useState("");
-  const [stationInput, setStationInput] = useState("");
-  const [stationNumberInput, setStationNumberInput] = useState("");
+  //固定値
+  const [PosNum, setPosNum] = useState<number | undefined>();
+  const [Pos, setPos] = useState<string>("");
+  const [Line, setLine] = useState<string>("");
+  const [StationNum, setStationNum] = useState<string>("");
+
+  //編集情報
+  const [lineInput, setLineInput] = useState<string>("");
+  const [posInput, setPosInput] = useState<string>("");
+  const [descInput, setDescInput] = useState<string>("");
+
+  const [isShow, setIsShow] = useState(true);
+  const [isDepartureNow, setIsDepartureNow] = useState(false);
+  useEffect(() => {
+    const [h, m] = d.time.split(":");
+    const IntH = parseInt(h);
+    const IntM = parseInt(m);
+    const currentTime = dayjs();
+    const trainTime = currentTime
+      .set("hour", IntH < 4 ? IntH + 24 : IntH)
+      .set("minute", IntM);
+    const diff = trainTime.diff(currentTime, "minute");
+    if (diff < 2) setIsDepartureNow(true);
+    else setIsDepartureNow(false);
+    return () => {
+      setIsDepartureNow(false);
+      setIsShow(true);
+    };
+  }, [d.time, currentTrainData]);
+  useInterval(() => {
+    if (isDepartureNow) {
+      setIsShow(!isShow);
+    }
+  }, 800);
   return (
     <>
-      <TrainPositionDataDelete
+      <StationPosDeleteDialog
         dialog={deleteDialog}
         setDialog={setDeleteDialog}
-        currentTrainData={currentTrainData}
-        stationInput={stationInput}
-        stationNumberInput={stationNumberInput}
+        Pos={Pos}
+        PosNum={PosNum}
+        Line={Line}
+        StationNum={StationNum}
       />
-      <TrainPositionDataPush
+      <StationPosPushDialog
+        // Dialog表示関係
         dialog={dialog}
         setDialog={setDialog}
-        currentTrainData={currentTrainData}
-        stationInput={stationInput}
-        stationNumberInput={stationNumberInput}
+        // 固定情報
+        PosNum={PosNum}
+        Pos={Pos}
+        Line={Line}
+        StationNum={StationNum}
+        // 入力欄
+        lineInput={lineInput}
+        setLineInput={setLineInput}
         posInput={posInput}
-        descInput={descInput}
         setPosInput={setPosInput}
+        descInput={descInput}
         setDescInput={setDescInput}
-        station={station}
       />
       <TouchableOpacity
         style={{
@@ -147,8 +161,10 @@ export const EachData: FC<Props> = (props) => {
           marginHorizontal: "3%",
           backgroundColor: "#000",
           flexDirection: "row",
+          opacity: isShow ? 1 : 0.5,
         }}
         onPress={() => openTrainInfo(d)}
+        key={d.train + "-eachData"}
       >
         <TrainName
           trainName={train.trainName}
@@ -156,30 +172,49 @@ export const EachData: FC<Props> = (props) => {
           trainIDSwitch={trainIDSwitch}
           trainID={d.train}
           type={train.type}
+          isThrew={d.isThrough}
         />
-        <LastStation lastStation={d.lastStation} />
+        <LastStation lastStation={d.lastStation} ToData={train.ToData} Station_JP={station.Station_JP} />
         <DependTime time={d.time} />
         <StatusAndDelay trainDelayStatus={trainDelayStatus} />
       </TouchableOpacity>
+      {!!isDepartureNow && (
+        <Description
+          info={
+            d.isThrough
+              ? "通過列車にご注意ください"
+              : d.lastStation == station.Station_JP
+              ? "この列車は当駅止です。間もなく到着します。"
+              : "列車の出発時刻です。"
+          }
+          key={d.train + "-isDepartureNow"}
+        />
+      )}
       {trainDescriptionSwitch && (
         <TrainPosition
+          // LED表示関係
           trainIDSwitch={trainIDSwitch}
           currentTrainData={currentTrainData}
-          setStationInput={setStationInput}
-          setStationNumberInput={setStationNumberInput}
-          setDescInput={setDescInput}
-          setPosInput={setPosInput}
+          // ポップアップ表示関係
           setDialog={setDialog}
           setDeleteDialog={setDeleteDialog}
-          setPlatformDescription={setPlatformDescription}
-          setPlatformNumber={setPlatformNumber}
-          platformDescription={platformDescription}
-          platformNumber={platformNumber}
+          // 固定情報
+          setPos={setPos}
+          setPosNum={setPosNum}
+          setLine={setLine}
+          setStationNum={setStationNum}
+          //編集機能関係
+          setLineInput={setLineInput}
+          setPosInput={setPosInput}
+          setDescInput={setDescInput}
           key={d.train + "-trainPosition"}
         />
       )}
       {trainDescriptionSwitch && !!train.info && (
-        <Description info={train.info} />
+        <Description info={train.info} key={d.train + "-description"} />
+      )}
+      {trainDescriptionSwitch && !!train.uwasa && (
+        <Description info={train.uwasa} key={d.train + "-uwasa"} />
       )}
     </>
   );

components/発車時刻表/LED_Vision_Component/Header.js

@@ -1,48 +0,0 @@
-import { View, Text } from "react-native";
-import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
-import LottieView from "lottie-react-native";
-import { Ionicons } from "@expo/vector-icons";
-
-export const Header = ({ getCurrentTrain }) => {
-    const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
-    return (
-      <View
-        style={{
-          alignContent: "center",
-          alignItems: "center",
-          width: "100%",
-          marginVertical: 10,
-          flexDirection: "row",
-        }}
-      >
-        <View style={{ flex: 1 }}></View>
-        <View style={{}}>
-          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
-            次の列車
-          </Text>
-          <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
-        </View>
-        <View style={{ flex: 1, flexDirection: "row-reverse" }}>
-          {currentTrainLoading == "loading" ? (
-            <LottieView
-              autoPlay
-              loop
-              style={{ width: 40, height: 40, marginRight: 30 }}
-              source={require("../../../assets/51690-loading-diamonds.json")}
-            />
-          ) : currentTrainLoading == "error" ? (
-            <Ionicons
-              name="reload"
-              color="white"
-              size={30}
-              style={{ marginRight: 30 }}
-              onPress={() => {
-                setCurrentTrainLoading("loading");
-                getCurrentTrain();
-              }}
-            />
-          ) : null}
-        </View>
-      </View>
-    );
-  };

components/発車時刻表/LED_Vision_Component/Header.tsx

@@ -0,0 +1,58 @@
+import { View, Text } from "react-native";
+import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+import LottieView from "lottie-react-native";
+import { Ionicons, AntDesign } from "@expo/vector-icons";
+import { useStationList } from "@/stateBox/useStationList";
+import { useNavigation } from "@react-navigation/native";
+
+export const Header = ({ station }) => {
+  const {
+    currentTrainLoading,
+    setCurrentTrainLoading,
+    getCurrentTrain,
+    inject,
+  } = useCurrentTrain();
+  const { getInjectJavascriptAddress } = useStationList();
+  const { navigate } = useNavigation();
+  return (
+    <View
+      style={{
+        alignContent: "center",
+        alignItems: "center",
+        width: "100%",
+        marginVertical: 10,
+        flexDirection: "row",
+      }}
+    >
+      <View style={{ flex: 1, flexDirection: "column", alignItems: "center" }}>
+      </View>
+      <View style={{}}>
+        <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+          次の列車
+        </Text>
+        <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
+      </View>
+      <View style={{ flex: 1, flexDirection: "row-reverse" }}>
+        {currentTrainLoading == "loading" ? (
+          <LottieView
+            autoPlay
+            loop
+            style={{ width: 40, height: 40, marginRight: 30 }}
+            source={require("../../../assets/51690-loading-diamonds.json")}
+          />
+        ) : currentTrainLoading == "error" ? (
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ marginRight: 30 }}
+            onPress={() => {
+              setCurrentTrainLoading("loading");
+              getCurrentTrain();
+            }}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};

components/発車時刻表/LED_inside_Component/AreaDescription.tsx

@@ -0,0 +1,79 @@
+import React, { FC, useState, useEffect } from "react";
+import { Text, TextStyle, View, TouchableOpacity } from "react-native";
+import { useInterval } from "../../../lib/useInterval";
+
+const descriptionStyle: TextStyle = {
+  fontSize: parseInt("16%"),
+  fontWeight: "bold",
+};
+
+type Props = {
+  areaInfo: string;
+  numberOfLines?: number;
+  onClick?: () => void;
+  onLongClick?: () => void;
+};
+export const AreaDescription:FC<Props> = ({ areaInfo, numberOfLines = 0, onClick, onLongClick }) => {
+  const [areaString, setAreaString] = useState("");
+    const [areaStringLength, setAreaStringLength] = useState(0);
+    const [move, setMove] = useState(0);
+    useInterval(
+      () => {
+        if (areaInfo != "") {
+          setMove(areaStringLength < move ? 0 : move + 1);
+        }
+      },
+      350,
+      true
+    );
+    useEffect(() => {
+      if (!areaInfo) {
+        setAreaString("");
+        return () => {};
+      }
+      setAreaString(
+        areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
+      );
+    }, [move]);
+  
+    useEffect(() => {
+      if (!areaInfo) {
+        setAreaStringLength(0);
+        return () => {};
+      }
+      setAreaStringLength(areaInfo.length);
+    }, [areaInfo]);
+  return(
+  <TouchableOpacity
+    style={{
+      alignContent: "center",
+      alignItems: "center",
+      width: "94%",
+      marginVertical: 5,
+      marginHorizontal: "3%",
+      backgroundColor: "#000",
+      flexDirection: "row",
+      overflow: "hidden",
+    }}
+    onPress={onClick}
+    onLongPress={onLongClick}
+  >
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      {numberOfLines == 1 ? (
+        <Text style={{ ...descriptionStyle, color: "red" }}>
+          運行情報 &gt;{" "}
+        </Text>
+      ) : (
+        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
+      )}
+
+      <Text
+        style={{ ...descriptionStyle, color: "green" }}
+        numberOfLines={numberOfLines}
+      >
+        {areaString.replaceAll("\n", "").replaceAll("\r", "")}
+      </Text>
+    </View>
+  </TouchableOpacity>
+  );
+};

components/発車時刻表/LED_inside_Component/LastStation.tsx

@@ -3,18 +3,22 @@ import { Text, View } from "react-native";
 
 type Props = {
   lastStation: string;
+  ToData: string;
+  Station_JP: string;
 };
-export const LastStation: FC<Props> = ({ lastStation }) => {
+export const LastStation: FC<Props> = ({ lastStation, ToData, Station_JP }) => {
+  const isEdit = !ToData ? false : ToData !== lastStation;
+  const string = isEdit ? ToData : lastStation;
   return (
     <View style={{ flex: 4, flexDirection: "row" }}>
       <Text
         style={{
-          fontSize: lastStation.length > 4 ? parseInt("12%") : parseInt("16%"),
-          color: "white",
+          fontSize: lastStation?.length > 4 ? parseInt("12%") : parseInt("16%"),
+          color: isEdit ? "#ffd16fff" : "white",
           fontWeight: "bold",
         }}
       >
-        {lastStation}
+        {string === Station_JP ? "当駅止" : string}
       </Text>
     </View>
   );

components/発車時刻表/LED_inside_Component/TrainName.tsx

@@ -1,16 +1,18 @@
 import React, { FC } from "react";
 import { Text, View } from "react-native";
 import { getTrainType } from "../../../lib/getTrainType";
+import { trainTypeID } from "@/lib/CommonTypes";
 type Props = {
   trainName: string;
   trainNumDistance?: number;
   trainIDSwitch: boolean;
   trainID: string;
-  type: string;
+  type: trainTypeID;
+  isThrew: boolean;
 };
 export const TrainName: FC<Props> = (props) => {
-  const { trainName, trainNumDistance, trainIDSwitch, trainID, type } = props;
-  const { name, color } = getTrainType(type);
+  const { trainName, trainNumDistance, trainIDSwitch, trainID, type, isThrew } = props;
+  const { name, color } = getTrainType({ type });
   const TrainNumber =
     trainNumDistance != undefined
       ? `${
@@ -26,7 +28,7 @@ export const TrainName: FC<Props> = (props) => {
           fontWeight: "bold",
         }}
       >
-        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
+        {trainIDSwitch ? trainID : `${isThrew ? `★通過列車★` : `${name} ${trainName}${TrainNumber}`} `}
       </Text>
     </View>
   );

components/発車時刻表/LED_inside_Component/TrainPosition.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { Text, TextStyle, View, TouchableOpacity } from "react-native";
 import { useStationList } from "../../../stateBox/useStationList";
 import {
@@ -14,56 +14,118 @@ const descriptionStyle: TextStyle = {
 };
 
 type Props = {
+  // LED表示関係
   numberOfLines?: number;
   trainIDSwitch: boolean;
   currentTrainData: trainDataType;
-  setStationInput: (station: string) => void;
-  setStationNumberInput: (station: string) => void;
-  setDescInput: (desc: string) => void;
-  setPosInput: (pos: string) => void;
+  //ポップアップ表示関係
   setDialog: (dialog: boolean) => void;
   setDeleteDialog: (dialog: boolean) => void;
-  platformDescription: string;
-  platformNumber: number;
-  setPlatformDescription: (desc: string) => void;
-  setPlatformNumber: (num: number) => void;
+
+  //固定値設定
+  setPos: React.Dispatch<React.SetStateAction<string>>
+  setPosNum: React.Dispatch<React.SetStateAction<number>>;
+  setLine: React.Dispatch<React.SetStateAction<string>>;
+  setStationNum: React.Dispatch<React.SetStateAction<string>>;
+
+  //編集機能関係
+  setLineInput: (line: string) => void;
+  setPosInput: (pos: string) => void;
+  setDescInput: (desc: string) => void;
 };
 
 export const TrainPosition: FC<Props> = ({
+  // LED表示関係
   numberOfLines = 0,
   trainIDSwitch,
   currentTrainData,
-  setStationInput,
-  setStationNumberInput,
-  setDescInput,
-  setPosInput,
+  //ポップアップ表示関係
   setDialog,
   setDeleteDialog,
-  setPlatformDescription,
-  setPlatformNumber,
-  platformDescription,
-  platformNumber,
-}) => {
-  const { currentTrain } = useCurrentTrain();
-  const { stationList } = useStationList();
 
+  //固定値設定
+  setPos,
+  setPosNum,
+  setLine,
+  setStationNum,
+
+  //編集機能関係
+  setLineInput,
+  setPosInput,
+  setDescInput,
+
+}) => {
+  const { stationList } = useStationList();
+  type data = {
+    type: string;
+    lineNumber: string;
+    platformNumber: string;
+    position: string;
+    stationName: string;
+    description: string;
+  };
+  const [database, setDatabase] = useState<data>(null);
+  const [text, setText] = useState("");
+  const [masterText, setMasterText] = useState("");
+  useEffect(() => {
+    const text = `${currentTrainData?.PosNum} ${currentTrainData?.Line} ${currentTrainData?.Pos}`;
+    setText(trainIDSwitch ? text : masterText);
+    return () => {
+      setText("");
+    };
+  }, [masterText, trainIDSwitch]);
   useEffect(() => {
     fetch(
-      `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}`
+      `https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3?PosId=${currentTrainData?.PosNum}&lineName=${currentTrainData?.Line}&StationName=${currentTrainData?.Pos}`
     )
       .then((res) => res.json())
-      .then((data: { type: string; platform: number; description: string }) => {
-        setPlatformNumber(data?.type == "Station" ? data?.platform : undefined);
-        setPlatformDescription(
-          data?.type == "Station" ? data?.description : undefined
-        );
+      .then((data: data) => {
+        const { type, platformNumber, description, lineNumber } = data;
+        setDatabase(data);
+        const { isBetween, Pos } = trainPosition(currentTrainData);
+        if (isBetween === true) {
+          // 移動中
+          setMasterText(`現在地：${Pos.from}→${Pos.to}間を走行中`);
+        } else {
+          if (Pos.Pos) {
+            let platform = platformNumber ? `${platformNumber}番乗り場` : "";
+            let line = lineNumber ? `${lineNumber}番線` : "";
+            setMasterText(
+              `現在地：${Pos.Pos}  ${platform || line} ${description || ""}`
+            );
+          } else {
+            setMasterText("");
+          }
+        }
       });
-  }, [currentTrainData, currentTrain]);
+    return () => {
+      setMasterText("");
+    };
+  }, [currentTrainData?.PosNum, currentTrainData?.Line, currentTrainData?.Pos]);
+  //editWindow向けにfixした情報を送信
+  const openEditWindow = () => {
+    const { isBetween, Pos } = trainPosition(currentTrainData);
 
-  const trainPositionText = (trainData: trainDataType) => {
-    const { isBetween, Pos } = trainPosition(trainData);
-    if (isBetween === true) return `現在地：${Pos.from}→${Pos.to}間を走行中`;
-    else return Pos.Pos == "" ? "" : `現在地：${Pos.Pos}`;
+    //固定値
+    setPosNum(currentTrainData?.PosNum);
+    setPos(currentTrainData?.Pos);
+    setLine(currentTrainData?.Line);
+    setStationNum(getStationID(currentTrainData?.Pos, stationList));
+
+    //入力欄
+    if (isBetween === true) {
+      if (
+        database?.platformNumber == undefined &&
+        database?.description == undefined
+      )
+        return;
+      setDeleteDialog(true);
+    } else {
+      setPosInput(database?.platformNumber?.toString() || "");
+      setDescInput(database?.description || "");
+      setLineInput(database?.lineNumber?.toString() || "");
+      setDialog(true);
+    }
   };
 
   return (
@@ -78,40 +140,14 @@ export const TrainPosition: FC<Props> = ({
         flexDirection: "row",
         overflow: "hidden",
       }}
-      onLongPress={() => {
-        const { isBetween, Pos } = trainPosition(currentTrainData);
-        if (isBetween === true) {
-          if (platformNumber == undefined && platformDescription == undefined)
-            return;
-          setStationInput(`${Pos.from}→${Pos.to}間`);
-          setStationNumberInput(
-            getStationID(currentTrainData?.Pos, stationList)
-          );
-          setPosInput(platformNumber?.toString() || "");
-          setDeleteDialog(true);
-        } else {
-          setStationInput(Pos.Pos);
-          setStationNumberInput(
-            getStationID(currentTrainData?.Pos, stationList)
-          );
-          setDescInput(platformDescription || "");
-          setPosInput(platformNumber?.toString() || "");
-          setDialog(true);
-        }
-      }}
+      onLongPress={openEditWindow}
     >
       <View style={{ flex: 4, flexDirection: "row" }}>
         <Text
           style={{ ...descriptionStyle, color: "green" }}
           numberOfLines={numberOfLines}
         >
-          {`${
-            trainIDSwitch
-              ? currentTrainData?.PosNum + currentTrainData?.Line
-              : trainPositionText(currentTrainData)
-          } ${platformNumber ? platformNumber + "番線" : ""} ${
-            platformDescription ? "(" + platformDescription + ")" : ""
-          }`}
+          {text}
         </Text>
       </View>
     </TouchableOpacity>

components/発車時刻表/LED_inside_Component/TrainPositionDataDelete.tsx

@@ -1,28 +1,32 @@
 import React, { FC } from "react";
 import { Text } from "react-native";
 import { Dialog, Button } from "react-native-elements";
-import { trainDataType } from "../../../lib/trainPositionTextArray";
+
 type Props = {
   dialog: boolean;
   setDialog: (dialog: boolean) => void;
-  currentTrainData: trainDataType;
-  stationInput: string;
-  stationNumberInput: string;
+  PosNum: number;
+  Line: string;
+  Pos: string;
+  StationNum: string;
 };
-export const TrainPositionDataDelete: FC<Props> = ({
+
+export const StationPosDeleteDialog: FC<Props> = ({
   dialog,
   setDialog,
-  currentTrainData,
-  stationInput,
-  stationNumberInput,
+  PosNum,
+  Line,
+  Pos,
+  StationNum
 }) => {
   const sendPlatformData = () => {
-    fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID`, {
+    fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3`, {
       method: "DELETE",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        PosId: currentTrainData?.PosNum,
-        lineName: currentTrainData?.Line,
+        PosId: PosNum,
+        lineName: Line,
+        StationName: Pos, //自動：駅名、漢字
       }),
     })
       .then(() => {
@@ -36,10 +40,10 @@ export const TrainPositionDataDelete: FC<Props> = ({
   return (
     <Dialog isVisible={dialog} onBackdropPress={() => setDialog(false)}>
       <Text>以下のデータを誤情報として削除要求を出しますか？</Text>
-      <Text>路線: {currentTrainData?.Line}</Text>
-      <Text>地点ID: {currentTrainData?.PosNum}</Text>
-      <Text>駅名: {stationInput}</Text>
-      <Text>駅ナンバー: {stationNumberInput}</Text>
+      <Text>路線: {Line}</Text>
+      <Text>地点ID: {PosNum}</Text>
+      <Text>駅名: {Pos}</Text>
+      <Text>駅ナンバー: {StationNum}</Text>
       <Button title="送信" onPress={sendPlatformData} />
     </Dialog>
   );

components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx

@@ -1,46 +1,56 @@
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
 import { Text } from "react-native";
 import { Dialog, Input, Button } from "react-native-elements";
 import { trainDataType } from "../../../lib/trainPositionTextArray";
-import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
+import { useStationList } from "@/stateBox/useStationList";
 type Props = {
   dialog: boolean;
   setDialog: (dialog: boolean) => void;
-  currentTrainData: trainDataType;
-  stationInput: string;
-  stationNumberInput: string;
+
+  PosNum:number;  
+  Pos:string;
+  Line:string;
+  StationNum: string;
+
+  lineInput: string;
+  setLineInput: (line: string) => void;
   posInput: string;
-  descInput: string;
   setPosInput: (pos: string) => void;
+  descInput: string;
   setDescInput: (desc: string) => void;
-  station: {
-    Station_JP: string;
-    StationNumber: string;
-  };
 };
-export const TrainPositionDataPush: FC<Props> = ({
+export const StationPosPushDialog: FC<Props> = ({
+  // Dialog表示関係
   dialog,
   setDialog,
-  currentTrainData,
-  stationInput,
-  stationNumberInput,
+  //固定情報
+  PosNum,//地点ID
+  Pos,//駅名
+  Line,//路線名
+  StationNum,//駅ナンバリング
+
+  //入力欄
+  lineInput,
+  setLineInput,
   posInput,
-  descInput,
   setPosInput,
+  descInput,
   setDescInput,
-  station,
 }) => {
+  const { stationList } = useStationList();
   const sendPlatformData = () => {
-    fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID`, {
+    fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        PosId: currentTrainData?.PosNum,
-        lineName: currentTrainData?.Line,
-        PlatformNum: parseInt(posInput),
-        Description: descInput,
-        StationName: station.Station_JP,
-        StationId: station.StationNumber,
+        PosId: PosNum, //自動：位置情報ID
+        StationId: getStationID(Pos, stationList), //自動：駅ID
+        StationName: Pos, //自動：駅名、漢字
+        lineName: Line, //自動：位置情報路線ID(koutoku/yosan)
+        Description: descInput, //手動入力、参考情報
+        platformNumber: parseInt(posInput), //手動入力、乗り場表記
+        lineNumber: parseInt(lineInput), //手動入力、番線表記
       }),
     })
       .then(() => {
@@ -55,22 +65,30 @@ export const TrainPositionDataPush: FC<Props> = ({
   };
   return (
     <Dialog isVisible={dialog} onBackdropPress={() => setDialog(false)}>
-      <Text>路線: {currentTrainData?.Line}</Text>
-      <Text>地点ID: {currentTrainData?.PosNum}</Text>
-      <Text>駅名: {stationInput}</Text>
-      <Text>駅ナンバー: {stationNumberInput}</Text>
+      <Text style={{ fontSize: 20, fontWeight: "bold" }}>駅番線情報投稿機能</Text>
+      <Text>路線: {Line}</Text>
+      <Text>地点ID: {PosNum}</Text>
+      <Text>駅名: {Pos}</Text>
+      <Text>駅ナンバー: {StationNum}</Text>
       <Input
-        label="番線"
+        label="乗り場"
         inputMode="numeric"
         value={posInput}
         onChangeText={setPosInput}
       />
+      <Input
+        label="番線"
+        inputMode="numeric"
+        value={lineInput}
+        onChangeText={setLineInput}
+      />
       <Input
         label="参考情報"
         inputMode="text"
         value={descInput}
         onChangeText={setDescInput}
       />
+      <Text style={{ fontSize: 12, fontWeight: "bold" }}>この機能は駅の停車位置に関する情報を投稿する機能です。列車の遅れ、運行情報を投稿するフォームではありませんのでご注意ください。</Text>
       <Button title="送信" onPress={sendPlatformData} />
     </Dialog>
   );

components/発車時刻表/LED_vidion.js

@@ -1,234 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View } from "react-native";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
-import { useInterval } from "../../lib/useInterval";
-import { objectIsEmpty } from "../../lib/objectIsEmpty";
-import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
-import { useAreaInfo } from "../../stateBox/useAreaInfo";
-import { AS } from "../../storageControl";
-import { Footer } from "./LED_Vision_Component/Footer";
-import { Header } from "./LED_Vision_Component/Header";
-import { Description } from "./LED_inside_Component/Description";
-import { EachData } from "./EachData";
-
-
-
-/**
- *
- * 1-30M しおかぜ
- * 31-58D 南風
- * 1001-1030M いしづち(併結)
- * 1041-1046M いしづち(単独)
- * 1051-1082D 宇和海
- * 1091M MX松山
- * 1092M MX高松
- * 2001-2010D しまんと
- * 2071-2086D あしずり
- * 3001-3033D うずしお
- * 3101-3177M マリンライナー
- * 4001-4011D 剣山
- * 5006,13,22,29 うずしお(岡山直通南風併結)
- * 5831-5843D 土佐くろしお鉄道ごめん・なはり線直通快速
- * 5853-5892D 土佐くろしお鉄道ごめん・なはり線直通普通
- * 8011,8012D 四国まんなか千年ものがたり
- * 8031,(8041) サンライズ瀬戸, 琴平(延長)
- * 8053,8054D トキの夜明けのものがたり
- * 8176,8179D アンパントロッコタカマツ
- * 8277,8278D アンパントロッココトヒラ
- * 8451,8452D よしの川トロッコ
- * 8814,8819D しまんトロッコ
- * 8911-8914D 伊予灘ものがたり
- * 9001-9030* いしづち(リレー)
- * 9031M サンライズ瀬戸琴平(延長)(臨時？)
- * 9062D 四国まんなか千年ものがたり(臨時？)
- */
-export default function LED_vision(props) {
-  const {
-    station,
-    trainDiagram,
-    getCurrentTrain,
-    navigate,
-    openStationACFromEachTrainInfo,
-  } = props;
-  const { currentTrain } = useCurrentTrain();
-  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
-  const [finalSwitch, setFinalSwitch] = useState(false);
-  const [trainIDSwitch, setTrainIDSwitch] = useState(false);
-  const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
-  const [isInfoArea, setIsInfoArea] = useState(false);
-  const { areaInfo, areaStationID } = useAreaInfo();
-
-  useEffect(() => {
-    AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
-      setTrainIDSwitch(data === "true");
-    });
-    AS.getItem("LEDSettings/trainDescriptionSwitch").then((data) => {
-      setTrainDescriptionSwitch(data == "true");
-    });
-    AS.getItem("LEDSettings/finalSwitch").then((data) => {
-      setFinalSwitch(data == "true");
-    });
-  }, []);
-
-  useEffect(() => {
-    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
-    if (!trainDiagram) {
-      setStationDiagram({});
-      return;
-    }
-    let returnData = {};
-    Object.keys(trainDiagram).forEach((key) => {
-      if (trainDiagram[key].match(station[0].Station_JP + ",")) {
-        returnData[key] = trainDiagram[key];
-      }
-    });
-    setStationDiagram(returnData);
-    setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
-  }, [trainDiagram, station]);
-
-  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
-
-  useEffect(() => {
-    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
-    if (objectIsEmpty(stationDiagram)) return () => {};
-    const getTimeData = getTime(stationDiagram, station[0]);
-    setTrainTimeAndNumber(getTimeData);
-  }, [stationDiagram]);
-
-  const [selectedTrain, setSelectedTrain] = useState([]);
-  useEffect(() => {
-    if (!trainTimeAndNumber) return () => {};
-    if (!currentTrain) return () => {};
-    const data = trainTimeAndNumber
-      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-      .filter(timeFiltering)
-      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
-    setSelectedTrain(data);
-  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
-
-  const getTime = (stationDiagram, station) => {
-    const returnData = Object.keys(stationDiagram).map((trainNum) => {
-      let trainData = {};
-      stationDiagram[trainNum].split("#").forEach((data) => {
-        if (data.match("着")) {
-          trainData.lastStation = data.split(",着,")[0];
-        }
-        if (data.split(",")[0] === station.Station_JP) {
-          if (data.match(",発,")) {
-            trainData.time = data.split(",発,")[1];
-          } else if(data.match(",着,")){ 
-            trainData.time = data.split(",着,")[1];
-            trainData.lastStation = "当駅止";
-          }
-        }
-      });
-      return {
-        train: trainNum,
-        time: trainData.time,
-        lastStation: trainData.lastStation,
-      };
-    }).filter((d) => d.time);
-    return returnData.sort((a, b) => {
-      switch (true) {
-        case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
-          return -1;
-        case parseInt(a.time.split(":")[0]) > parseInt(b.time.split(":")[0]):
-          return 1;
-        case parseInt(a.time.split(":")[1]) < parseInt(b.time.split(":")[1]):
-          return -1;
-        case parseInt(a.time.split(":")[1]) > parseInt(b.time.split(":")[1]):
-          return 1;
-        default:
-          return 0;
-      }
-    });
-  };
-
-  const timeFiltering = (d) => {
-    const date = new Date();
-    const newDate = new Date();
-    let data = d.time.split(":");
-    let delay = isNaN(currentTrain.filter((t) => t.num == d.train)[0].delay)
-      ? 0
-      : currentTrain.filter((t) => t.num == d.train)[0].delay;
-
-    date.setHours(parseInt(data[0]));
-    date.setMinutes(parseInt(data[1]) + parseInt(delay));
-    return !(newDate > date);
-  };
-
-  const [areaString, setAreaString] = useState("");
-  const [areaStringLength, setAreaStringLength] = useState(0);
-  const [move, setMove] = useState(0);
-  useInterval(
-    () => {
-      if (areaInfo != "") {
-        setMove(areaStringLength < move ? 0 : move + 1);
-      }
-    },
-    350,
-    true
-  );
-  useEffect(() => {
-    if (!areaInfo) {
-      setAreaString("");
-      return () => {};
-    }
-    setAreaString(
-      areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
-    );
-  }, [move]);
-
-  useEffect(() => {
-    if (!areaInfo) {
-      setAreaStringLength(0);
-      return () => {};
-    }
-    setAreaStringLength(areaInfo.length);
-  }, [areaInfo]);
-
-  return (
-    <View
-      style={{
-        width: wp("98%"),
-        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
-        borderWidth: 1,
-        margin: 10,
-        marginHorizontal: wp("1%"),
-      }}
-    >
-      <Header getCurrentTrain={getCurrentTrain} />
-      {selectedTrain.map((d) => (
-        <EachData
-          {...{
-            d,
-            trainIDSwitch,
-            trainDescriptionSwitch,
-            navigate,
-            openStationACFromEachTrainInfo,
-          }}
-          station={station[0]}
-          key={d.train}
-        />
-      ))}
-      {areaString != "" && isInfoArea && (
-        <Description
-          numberOfLines={1}
-          info={areaString.replaceAll("\n", "").replaceAll("\r", "")}
-          onClick={() => alert(areaInfo)}
-        />
-      )}
-
-      <Footer
-        {...{
-          trainIDSwitch,
-          setTrainIDSwitch,
-          trainDescriptionSwitch,
-          setTrainDescriptionSwitch,
-          finalSwitch,
-          setFinalSwitch,
-        }}
-      />
-    </View>
-  );
-}

components/発車時刻表/LED_vidion.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect, FC } from "react";
+import { View, useWindowDimensions } from "react-native";
+import { objectIsEmpty } from "@/lib/objectIsEmpty";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useAreaInfo } from "@/stateBox/useAreaInfo";
+import { AS } from "@/storageControl";
+import { Footer } from "@/components/発車時刻表/LED_Vision_Component/Footer";
+import { Header } from "@/components/発車時刻表/LED_Vision_Component/Header";
+import { EachData } from "@/components/発車時刻表/EachData";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { AreaDescription } from "@/components/発車時刻表/LED_inside_Component/AreaDescription";
+import { getTime, trainTimeFiltering } from "@/lib/trainTimeFiltering";
+import { eachTrainDiagramType, StationProps } from "@/lib/CommonTypes";
+import { useNavigation } from "@react-navigation/native";
+
+/**
+ *
+ * 1-30M しおかぜ
+ * 31-58D 南風
+ * 1001-1030M いしづち(併結)
+ * 1041-1046M いしづち(単独)
+ * 1051-1082D 宇和海
+ * 1091M MX松山
+ * 1092M MX高松
+ * 2001-2010D しまんと
+ * 2071-2086D あしずり
+ * 3001-3033D うずしお
+ * 3101-3177M マリンライナー
+ * 4001-4011D 剣山
+ * 5006,13,22,29 うずしお(岡山直通南風併結)
+ * 5831-5843D 土佐くろしお鉄道ごめん・なはり線直通快速
+ * 5853-5892D 土佐くろしお鉄道ごめん・なはり線直通普通
+ * 8011,8012D 四国まんなか千年ものがたり
+ * 8031,(8041) サンライズ瀬戸, 琴平(延長)
+ * 8053,8054D トキの夜明けのものがたり
+ * 8176,8179D アンパントロッコタカマツ
+ * 8277,8278D アンパントロッココトヒラ
+ * 8451,8452D よしの川トロッコ
+ * 8814,8819D しまんトロッコ
+ * 8911-8914D 伊予灘ものがたり
+ * 9001-9030* いしづち(リレー)
+ * 9031M サンライズ瀬戸琴平(延長)(臨時？)
+ * 9062D 四国まんなか千年ものがたり(臨時？)
+ */
+type props = {
+  station: StationProps[];
+};
+export const LED_vision: FC<props> = (props) => {
+  const { station } = props;
+
+  const { navigate, addListener, isFocused } = useNavigation();
+  const { currentTrain } = useCurrentTrain();
+  const [stationDiagram, setStationDiagram] = useState<{
+    [key: string]: string;
+  }>({}); //当該駅の全時刻表
+  const [finalSwitch, setFinalSwitch] = useState(false);
+  const [trainIDSwitch, setTrainIDSwitch] = useState(false);
+  const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
+  const [isInfoArea, setIsInfoArea] = useState(false);
+  const { areaInfo, areaStationID } = useAreaInfo();
+  const { allTrainDiagram } = useAllTrainDiagram();
+
+  useEffect(() => {
+    AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
+      setTrainIDSwitch(data === "true");
+    });
+    AS.getItem("LEDSettings/trainDescriptionSwitch").then((data) => {
+      setTrainDescriptionSwitch(data === "true");
+    });
+    AS.getItem("LEDSettings/finalSwitch").then((data) => {
+      setFinalSwitch(data === "true");
+    });
+  }, []);
+
+  useEffect(() => {
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
+    if (!allTrainDiagram) {
+      setStationDiagram({});
+      return;
+    }
+    let returnData = {};
+    Object.keys(allTrainDiagram).forEach((key) => {
+      if (allTrainDiagram[key].match(station[0].Station_JP + ",")) {
+        returnData[key] = allTrainDiagram[key];
+      }
+    });
+    setStationDiagram(returnData);
+    setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
+  }, [allTrainDiagram, station]);
+
+  /*
+{lastStation: "当駅止", time: "12:34", train: "1234M"}
+  */
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState<
+    eachTrainDiagramType[]
+  >([]);
+
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, station[0]);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
+
+  const [selectedTrain, setSelectedTrain] = useState<eachTrainDiagramType[]>(
+    []
+  );
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train)) //現在の列車に絞る[ToDo]
+      .filter((d) => trainTimeFiltering({ d, currentTrain, station })) //時間フィルター
+      .filter((d) => !!finalSwitch || d.lastStation != station[0].Station_JP); //最終列車表示設定
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
+
+  const { width } = useWindowDimensions();
+  const adjustedWidth = width * 0.98;
+  return (
+    <View
+      style={{
+        width: adjustedWidth,
+        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
+        borderWidth: 1,
+        margin: 10,
+        marginHorizontal: width * 0.01,
+      }}
+    >
+      <Header station={station[0]} />
+      {selectedTrain.map((d) => (
+        <EachData
+          {...{
+            d,
+            trainIDSwitch,
+            trainDescriptionSwitch,
+            navigate,
+            openStationACFromEachTrainInfo: () => {},
+          }}
+          station={station[0]}
+          key={d.train}
+        />
+      ))}
+      {areaInfo != "" && isInfoArea && (
+        <AreaDescription
+          numberOfLines={1}
+          areaInfo={areaInfo}
+          onClick={() => alert(areaInfo)}
+        />
+      )}
+
+      <Footer
+        {...{
+          trainIDSwitch,
+          setTrainIDSwitch,
+          trainDescriptionSwitch,
+          setTrainDescriptionSwitch,
+          finalSwitch,
+          setFinalSwitch,
+        }}
+      />
+    </View>
+  );
+};

components/駅名表/NextPreStationLine.tsx

@@ -1,9 +1,22 @@
 import React, { CSSProperties, FC } from "react";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
-import { Platform, Text, TextStyle, View, ViewStyle } from "react-native";
+import {
+  Platform,
+  Text,
+  TextStyle,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from "react-native";
 import { StationName } from "./StationName";
 import lineColorList from "../../assets/originData/lineColorList";
 export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
+  const 下枠フレーム: ViewStyle = {
+    flex: 1,
+    flexDirection: "row",
+    alignContent: "center",
+    alignItems: "center",
+  };
+
   return (
     <View style={下枠フレーム}>
       <View style={下枠フレーム}>
@@ -49,12 +62,40 @@ type FCimport = {
   children: string;
 };
 const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
+  const 下枠左右マーク: TextStyle = {
+    fontWeight: "bold",
+    fontSize: parseInt("20%"),
+    color: "white",
+    paddingHorizontal: 5,
+    textAlignVertical: "center",
+  };
   return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
 };
 
 const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
+  const { width } = useWindowDimensions();
   const lineID = children.slice(0, 1);
   const lineName = children.slice(1);
+  const 下枠駅ナンバー: ViewStyle = {
+    alignContent: "center",
+    alignItems: "center",
+    width: width * 0.08,
+    height: width * 0.08,
+    margin: width * 0.01,
+    backgroundColor: "white",
+    borderWidth: parseInt("3%"),
+    borderRadius: parseInt("100%"),
+  };
+  const 下枠駅ナンバーB: ViewStyle = {
+    alignContent: "center",
+    alignItems: "center",
+    width: width * 0.07,
+    height: width * 0.07,
+    margin: width * 0.02,
+    backgroundColor: "white",
+    borderWidth: parseInt("3%"),
+    borderRadius: parseInt("100%"),
+  };
   return (
     <View
       style={{
@@ -77,37 +118,3 @@ const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
     </View>
   );
 };
-
-const 下枠フレーム: ViewStyle = {
-  flex: 1,
-  flexDirection: "row",
-  alignContent: "center",
-  alignItems: "center",
-};
-const 下枠左右マーク: TextStyle = {
-  fontWeight: "bold",
-  fontSize: parseInt("20%"),
-  color: "white",
-  paddingHorizontal: 5,
-  textAlignVertical: "center",
-};
-const 下枠駅ナンバー: ViewStyle = {
-  alignContent: "center",
-  alignItems: "center",
-  width: wp("8%"),
-  height: wp("8%"),
-  margin: wp("1%"),
-  backgroundColor: "white",
-  borderWidth: parseInt("3%"),
-  borderRadius: parseInt("100%"),
-};
-const 下枠駅ナンバーB: ViewStyle = {
-  alignContent: "center",
-  alignItems: "center",
-  width: wp("7%"),
-  height: wp("7%"),
-  margin: wp("2%"),
-  backgroundColor: "white",
-  borderWidth: parseInt("3%"),
-  borderRadius: parseInt("100%"),
-};

components/駅名表/Sign.js

@@ -1,6 +1,10 @@
 import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
 import { useInterval } from "../../lib/useInterval";
@@ -15,7 +19,14 @@ import { AddressText } from "./AddressText";
 import { useStationList } from "../../stateBox/useStationList";
 
 export default function Sign(props) {
-  const { currentStation, oP, oLP, isCurrentStation = false } = props;
+  const { oP, oLP, isCurrentStation = false, stationID } = props;
+
+  const { width, height } = useWindowDimensions();
+  const { getStationDataFromId } = useStationList();
+  if (!stationID) {
+    return <></>;
+  }
+  const [currentStationData] = useState(getStationDataFromId(stationID));
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const [nexPrePosition, setNexPrePosition] = useState(0);
   const { originalStationList } = useStationList();
@@ -26,48 +37,40 @@ export default function Sign(props) {
   useLayoutEffect(() => {
     const isFavorite = favoriteStation.filter((d) => {
       const compare = JSON.stringify(d);
-      const current = JSON.stringify(currentStation);
-      if (compare === current) {
-        return true;
-      } else {
-        return false;
-      }
+      const current = JSON.stringify(currentStationData);
+      return compare === current;
     });
     setTestButtonStatus(isFavorite.length == 0 ? false : true);
-  }, [favoriteStation, currentStation]);
+  }, [favoriteStation, currentStationData]);
   useEffect(() => {
     const isFavorite = favoriteStation.filter((d) => {
       const compare = JSON.stringify(d);
-      const current = JSON.stringify(currentStation);
-      if (compare === current) {
-        return true;
-      } else {
-        return false;
-      }
+      const current = JSON.stringify(currentStationData);
+      return compare === current;
     });
     setTestButtonStatus(isFavorite.length == 0 ? false : true);
-  }, [favoriteStation, currentStation]);
+  }, [favoriteStation, currentStationData]);
 
   useInterval(() => {
-    if (currentStation.length == 1) {
+    if (currentStationData.length == 1) {
       setNexPrePosition(0);
       return () => {};
     }
     setNexPrePosition(
-      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
+      nexPrePosition + 1 == currentStationData.length ? 0 : nexPrePosition + 1
     );
   }, 2000);
 
   useEffect(() => {
     setNexPrePosition(0);
-    getPreNextStation(currentStation[0]);
-    if (currentStation.length == 1) return () => {};
-    getPreNextStation(currentStation[1]);
-  }, [currentStation]);
+    getPreNextStation(currentStationData[0]);
+    if (currentStationData.length == 1) return () => {};
+    getPreNextStation(currentStationData[1]);
+  }, [currentStationData]);
 
   useEffect(() => {
-    if (!currentStation[nexPrePosition]) return () => {};
-    getPreNextStation(currentStation[nexPrePosition]);
+    if (!currentStationData[nexPrePosition]) return () => {};
+    getPreNextStation(currentStationData[nexPrePosition]);
   }, [nexPrePosition]);
   const getPreNextStation = (now) => {
     const lineList = [
@@ -101,25 +104,81 @@ export default function Sign(props) {
       if (returnData[1]) setNexStation(returnData[1]);
     }
   };
-  const isMatsuyama = currentStation[0].StationNumber == "Y55";
+  const isMatsuyama = currentStationData[0].StationNumber == "Y55";
   //const isMatsuyama = true;
   const favoliteChanger = () => {
     if (testButtonStatus) {
       const otherData = favoriteStation.filter((d) => {
         const compare = JSON.stringify(d);
-        const current = JSON.stringify(currentStation);
+        const current = JSON.stringify(currentStationData);
         return compare !== current;
       });
       AS.setItem("favoriteStation", JSON.stringify(otherData));
       setFavoriteStation(otherData);
     } else {
       let ret = favoriteStation;
-      ret.push(currentStation);
+      ret.push(currentStationData);
       AS.setItem("favoriteStation", JSON.stringify(ret));
       setFavoriteStation(ret);
     }
     setTestButtonStatus(!testButtonStatus);
   };
+
+  const styleSheet = {
+    外枠: {
+      width: width * 0.8,
+      height: ((width * 0.8) / 20) * 9,
+      borderColor: "#0099CC",
+      borderWidth: 1,
+      backgroundColor: "white",
+    },
+    外枠B: {
+      width: width * 0.8,
+      height: ((width * 0.8) / 20) * 9,
+      borderWidth: 0,
+    },
+    下帯: {
+      position: "absolute",
+      bottom: "8%",
+      left: "0%",
+      width: "100%",
+      height: "27%",
+      backgroundColor: "#0099CC",
+    },
+    下帯B: {
+      position: "absolute",
+      bottom: "0%",
+      left: "0%",
+      width: "100%",
+      height: "26%",
+      backgroundColor: "#454545",
+    },
+    JRStyle: {
+      position: "absolute",
+      top: "2%",
+      left: "2%",
+      fontWeight: "bold",
+      fontSize: parseInt("25%"),
+      color: "#0099CC",
+    },
+    下帯内容: {
+      position: "absolute",
+      bottom: "8%",
+      height: "27%",
+      width: "100%",
+      alignItems: "center",
+      flexDirection: "column",
+    },
+    下帯内容B: {
+      position: "absolute",
+      bottom: "0%",
+      height: "26%",
+      width: "100%",
+      alignItems: "center",
+      flexDirection: "column",
+    },
+  };
+
   return (
     <TouchableOpacity
       style={styleSheet[isMatsuyama ? "外枠B" : "外枠"]}
@@ -131,15 +190,17 @@ export default function Sign(props) {
           autoPlay
           loop
           style={{
-            width: wp("80%"),
-            height: (wp("80%") / 20) * 9,
+            width: width * 0.8,
+            height: ((width * 0.8) / 20) * 9,
             backgroundColor: "#fff",
           }}
           source={require("../../assets/StationSign.json")}
         />
       )}
-      <StationNumberMaker {...{ currentStation, isMatsuyama }} />
-      <StationNameArea {...{ currentStation, isMatsuyama }} />
+      <StationNumberMaker {...{ currentStation: currentStationData }} />
+      <StationNameArea
+        {...{ currentStation: currentStationData, isMatsuyama }}
+      />
       {isCurrentStation ? (
         <View style={{ position: "absolute", right: 0, top: 0 }}>
           <MaterialCommunityIcons
@@ -163,62 +224,7 @@ export default function Sign(props) {
       <View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
         <NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
       </View>
-      <AddressText {...{ currentStation, isMatsuyama }} />
+      <AddressText {...{ currentStation: currentStationData, isMatsuyama }} />
     </TouchableOpacity>
   );
 }
-
-const styleSheet = {
-  外枠: {
-    width: wp("80%"),
-    height: (wp("80%") / 20) * 9,
-    borderColor: "#0099CC",
-    borderWidth: 1,
-    backgroundColor: "white",
-  },
-  外枠B: {
-    width: wp("80%"),
-    height: (wp("80%") / 20) * 9,
-    borderWidth: 0,
-  },
-  下帯: {
-    position: "absolute",
-    bottom: "8%",
-    left: "0%",
-    width: "100%",
-    height: "27%",
-    backgroundColor: "#0099CC",
-  },
-  下帯B: {
-    position: "absolute",
-    bottom: "0%",
-    left: "0%",
-    width: "100%",
-    height: "26%",
-    backgroundColor: "#454545",
-  },
-  JRStyle: {
-    position: "absolute",
-    top: "2%",
-    left: "2%",
-    fontWeight: "bold",
-    fontSize: parseInt("25%"),
-    color: "#0099CC",
-  },
-  下帯内容: {
-    position: "absolute",
-    bottom: "8%",
-    height: "27%",
-    width: "100%",
-    alignItems: "center",
-    flexDirection: "column",
-  },
-  下帯内容B: {
-    position: "absolute",
-    bottom: "0%",
-    height: "26%",
-    width: "100%",
-    alignItems: "center",
-    flexDirection: "column",
-  },
-};

components/駅名表/StationNumberMaker.tsx

@@ -1,17 +1,24 @@
-import React from "react";
+import React, { FC } from "react";
 import { Text, View } from "react-native";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
-import lineColorList from "../../assets/originData/lineColorList";
+import { useWindowDimensions } from "react-native";
+import lineColorList from "@/assets/originData/lineColorList";
+import { StationProps } from "@/lib/CommonTypes";
 
-export const StationNumberMaker = (props) => {
-  const { currentStation, isMatsuyama } = props;
+type props = {
+  currentStation: StationProps[];
+  useEach?: boolean;
+  singleSize?: number;
+};
+export const StationNumberMaker: FC<props> = (props) => {
+  const { currentStation, useEach = false, singleSize } = props;
+  const { width } = useWindowDimensions();
   const getTop = (array: number[], index: number) => {
     if (array.length == 1) return 20;
     else if (index == 0) return 5;
     else if (index == 1) return 35;
     else return 20;
   };
-  return currentStation
+  return <>{currentStation
     .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => {
       const lineID = d.StationNumber.slice(0, 1);
@@ -19,29 +26,41 @@ export const StationNumberMaker = (props) => {
       return (
         <View
           style={{
-            position: "absolute",
             alignContent: "center",
             alignItems: "center",
-            top: `${getTop(array, index)}%`,
-            right: "10%",
-            width: wp("10%"),
-            height: wp("10%"),
             borderColor: lineColorList[lineID],
             backgroundColor: "white",
+            ...(useEach ? {
+            width: singleSize,
+            height: singleSize,
+            borderWidth: parseInt("1%"),
+            borderRadius: parseInt("100%"),
+          } : {
+            width: (width / 100) * 10,
+            height: (width / 100) * 10,
             borderWidth: parseInt("3%"),
             borderRadius: parseInt("100%"),
+            position: "absolute",
+            top: `${getTop(array, index)}%`,
+            right: "10%"
+          })
           }}
           key={array[index].StationNumber}
         >
           <View style={{ flex: 1 }} />
           <Text
             style={{
-              fontSize: parseInt("13%"),
               margin: 0,
               padding: 0,
               textAlign: "center",
-              color:  "black",
+              color: "black",
               fontWeight: "bold",
+              ...(useEach ? {
+
+              fontSize: 6,//singleSize * 0.03,
+              }:{
+              fontSize: parseInt("13%"),
+              })
             }}
           >
             {lineID + "\n" + lineName}
@@ -49,5 +68,5 @@ export const StationNumberMaker = (props) => {
           <View style={{ flex: 1 }} />
         </View>
       );
-    });
+    })}</>
 };

config/newsUpdate.ts

@@ -1 +1 @@
-export const news = "2025-03-06";
+export const news = "2025-07-09";

index.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import { registerRootComponent } from "expo";
 import { registerWidgetTaskHandler } from "react-native-android-widget";
 import { Platform } from "react-native";

lib/CommonTypes.ts

@@ -0,0 +1,58 @@
+
+export type trainTypeID =
+  | "Normal"
+  | "OneMan"
+  | "Rapid"
+  | "OneManRapid"
+  | "LTDEXP"
+  | "NightLTDEXP"
+  | "SPCL"
+  | "SPCL_Normal"
+  | "SPCL_Rapid"
+  | "SPCL_EXP"
+  | "Party"
+  | "Freight"
+  | "Forwarding"
+  | "FreightForwarding"
+  | "Other";
+
+export type CustomTrainData = {
+    ToData?: string;
+    TrainNumber?: string;
+    TrainNumberOverride?: string;
+    id?: string;
+    img?: string;
+    isWanman?: boolean;
+    trainName?: string;
+    trainNumDistance?: number;
+    type?: trainTypeID;
+    viaData?: string;
+    info?: string;
+    infoUrl?: string;
+    infogram?: string;
+    uwasa?: string;
+    isEdit?: boolean;
+    isSeason?: boolean;
+    vehicleFormation?: string;
+    trainInfoUrl?: string;
+};
+  export type eachTrainDiagramType = {
+    train: string;
+    time: string;
+    lastStation: string;
+    isThrough: boolean;
+  };
+  
+  export type StationProps = {
+  DispNum: string;
+  JrHpUrl?: string;
+  MyStation: string;
+  StationMap: string;
+  StationNumber: string | null;
+  StationTimeTable: string;
+  Station_EN: string;
+  Station_JP: string;
+  jslodApi: string;
+  lat: number;
+  lng: number;
+};

lib/eachTrainInfoCoreLib/findReversalPoints.js

@@ -21,15 +21,27 @@ export const findReversalPoints = (array, stopStationIDList) => {
     }
     // 駅間の場合
     if (array.length == 2) {
-      const allThroughStation = stopStationIDList.map((d) => {
-        if (
-          (array[0] == "M12" && array[1] == "Y09") ||
-          (array[0] == "Y09" && array[1] == "M12")
-        )
+      const allThroughStation = stopStationIDList.map((d, index, arrays) => {
+        if (array[0] == "Y09" && array[1] == "M12") {
           return d[0] == "M12" ? true : false;
+        } else if (array[0] == "M12" && array[1] == "Y09") {
+          if (index) {
+            if (arrays[index - 1][0] == "M12") {
+              return true;
+            }
+          }
+          return false;
+        } else if (array[0] == "U15" && array[1] == "U14") {
+          
+          return d[0] == "U13" ? true : false;
+        } else if (array[0] == "S17" && array[1] == "U14") {
+          
+          return d[0] == "U14" ? true : false;
+        }
 
         let returndata = false;
         d.forEach((x) => {
+          console.log(array, x, d);
           if (array[0] < x && x < array[1]) {
             returndata = true;
           } else if (array[0] < x && x == array[1]) {
@@ -46,6 +58,6 @@ export const findReversalPoints = (array, stopStationIDList) => {
       return allThroughStation;
     }
   } catch (e) {
-    console.log(e);
+    // エラーが発生した場合は空の配列を返す
   }
 };

lib/eachTrainInfoCoreLib/searchSpecialTrain.ts

@@ -8,8 +8,9 @@ export const searchSpecialTrain = (trainNum: string, trainList: any[]) => {
     }
     return false;
   };
-  if (search("D")) return searchBase + "D";
-  if (search("M")) return searchBase + "M";
+  const returnBase = [];
+  if (search("D")) returnBase.push(searchBase + "D");
+  if (search("M")) returnBase.push(searchBase + "M");
 
   //増結いしづちの場合
   const baseStr = trainNum
@@ -21,6 +22,7 @@ export const searchSpecialTrain = (trainNum: string, trainList: any[]) => {
   if (9000 < baseNum && baseNum < 9047) {
     //いしづちの1001M-1046Mが9000番台になっている場合に発動
     const TD = trainList[`${baseNum - 8000}M`];
-    if (TD) return `${baseNum - 8000}M`;
+    if (TD) returnBase.push(`${baseNum - 8000}M`);
   }
+  return returnBase;
 };

lib/getCurrentTrainData.ts

@@ -0,0 +1,31 @@
+import { customTrainDataDetector } from "@/components/custom-train-data";
+import { CustomTrainData, trainTypeID } from "./CommonTypes";
+import { trainDataType } from "./trainPositionTextArray";
+
+export const getCurrentTrainData = (
+  trainNum: string,
+  currentTrain: trainDataType[],
+  allCustomTrainData: CustomTrainData[] | undefined
+) => {
+  const customTrainData = customTrainDataDetector(trainNum, allCustomTrainData);
+  switch (customTrainData.type) {
+    case "Normal":
+    case "OneMan":
+      const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
+      if (currentTrainData.length == 0) return customTrainData;
+      else if (currentTrainData[0].Type?.includes("rapid:")) {
+        const typeText = currentTrainData[0].Type?.split(":");
+        const returnData = {
+          type: "Rapid" as trainTypeID,
+          trainName: typeText[1].replace("\r", ""),
+          trainIcon: null,
+          trainNumDistance: null,
+          info: "",
+        };
+        return returnData;
+      }
+      return customTrainData;
+    default:
+      return customTrainData;
+  }
+};

lib/getStationList.ts

@@ -40,6 +40,17 @@ export const lineListPair = {
   N: "鳴門線(池谷-鳴門間)[N]",
   M: "瀬戸大橋線(児島-宇多津間)[M]",
 };
+export const lineList_LineWebID = {
+  "予讃線(高松-松山間)[Y]" : "yosan",
+  "予讃線(松山-宇和島間)[U]" : "uwajima",
+  "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]" : "uwajima2",
+  "土讃線(多度津-高知間)[D]" : "dosan",
+  "土讃線(高知-窪川間)[K]" : "dosan2",
+  "高徳線(高松-徳島間)[T]" : "koutoku",
+  "徳島線(徳島-阿波池田間)[B]" : "tokushima",
+  "鳴門線(池谷-鳴門間)[N]" : "naruto",
+  "瀬戸大橋線(児島-宇多津間)[M]" : "seto",
+};
 export const getStationList2 = async () => {
   return {
     yosan,
@@ -167,6 +178,11 @@ export const getStationList = async () => {
       予讃線,
       stationList["日英対応表"]
     );
+    stationList["予讃線(松山-宇和島間)[U]"] = addStationPosition(
+      concatBetweenStations(stationList["予讃線(松山-宇和島間)[U]"]),
+      内子線,
+      stationList["日英対応表"]
+    );
     stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"] =
       addStationPosition(
         concatBetweenStations(
@@ -195,15 +211,11 @@ export const getStationList = async () => {
       鳴門線,
       stationList["日英対応表"]
     );
-    const tokushimaCurrent = addStationPosition(
+    stationList["徳島線(徳島-阿波池田間)[B]"] = addStationPosition(
       concatBetweenStations(stationList["徳島線(徳島-阿波池田間)[B]"]),
       徳島線,
       stationList["日英対応表"]
     );
-    stationList["徳島線(徳島-阿波池田間)[B]"] = [
-      tokushimaCurrent[tokushimaCurrent.length - 1],
-      ...tokushimaCurrent,
-    ];
     stationList["徳島線(徳島-阿波池田間)[B]"].pop();
     stationList["瀬戸大橋線(児島-宇多津間)[M]"] = [
       {

lib/getStringConfig.ts

@@ -0,0 +1,49 @@
+import { trainTypeID } from "@/lib/CommonTypes";
+
+type types = (types: trainTypeID, id: string) => [string, boolean, boolean];
+export const getStringConfig: types = (type, id) => {
+  switch (type) {
+    case "Normal":
+      return ["普通", true, false];
+    case "OneMan":
+      return ["普通", true, true];
+    case "Rapid":
+      return ["快速", true, false];
+    case "OneManRapid":
+      return ["快速", true, true];
+    case "LTDEXP":
+      return ["特急", true, false];
+    case "NightLTDEXP":
+      return ["特急", true, false];
+    case "SPCL":
+      return ["臨時", true, false];
+    case "SPCL_Normal":
+      return ["臨時", true, false];
+    case "SPCL_Rapid":
+      return ["臨時快速", true, false];
+    case "SPCL_EXP":
+      return ["臨時特急", true, false];
+    case "Party":
+      return ["団体臨時", true, false];
+    case "Freight":
+      return ["貨物", false, false];
+    case "Forwarding":
+      return ["回送", false, false];
+    case "FreightForwarding":
+      return ["単機回送", false, false];
+    case "Other":
+      switch (true) {
+        case !!id.includes("T"):
+          return ["単機回送", false, false];
+        case !!id.includes("R"):
+        case !!id.includes("E"):
+        case !!id.includes("L"):
+        case !!id.includes("A"):
+        case !!id.includes("B"):
+          return ["回送", false, false];
+        case !!id.includes("H"):
+          return ["試運転", false, false];
+      }
+      return ["", false, false];
+  }
+};

lib/getTrainType.ts

@@ -1,11 +1,18 @@
-type nameString =
-  | "Rapid"
-  | "LTDEXP"
-  | "NightLTDEXP"
-  | "SPCL"
-  | "Normal"
-  | string;
-type colorString = "aqua" | "red" | "#297bff" | "white";
+import { trainTypeID } from "./CommonTypes";
+
+export type colorString =
+  | "aqua"
+  | "#00a0bdff"
+  | "#007488ff"
+  | "red"
+  | "#297bff"
+  | "#ff7300ff"
+  | "#5f5f5fff"
+  | "#e000b0ff"
+  | "white"
+  | "black"
+  | "pink";
+
 type trainTypeString =
   | "快速"
   | "特急"
@@ -13,32 +20,191 @@ type trainTypeString =
   | "臨時"
   | "普通列車"
   | "普通列車(ワンマン)"
+  | "臨時快速"
+  | "臨時特急"
+  | "団体臨時"
+  | "貨物"
+  | "回送"
+  | "単機回送"
+  | "試運転"
   | "その他";
-type trainTypeDataString = "rapid" | "express" | "normal";
-type getTrainType = (d: nameString) => {
+type trainTypeDataString = "rapid" | "express" | "normal" | "notService";
+type getTrainType = (e: {
+  type: trainTypeID;
+  id?: string;
+  whiteMode?: boolean;
+}) => {
   color: colorString;
   name: trainTypeString;
+  shortName: string;
+  fontAvailable: boolean;
+  isOneMan: boolean;
   data: trainTypeDataString;
 };
-export const getTrainType: getTrainType = (nameString) => {
-  switch (nameString) {
-    case "Rapid":
-    case "OneManRapid":
-      return { color: "aqua", name: "快速", data: "rapid" };
-    case "LTDEXP":
-      return { color: "red", name: "特急", data: "express" };
-    case "NightLTDEXP":
-      return { color: "red", name: "寝台特急", data: "express" };
-    case "SPCL":
-    case "SPCL_Rapid":
-    case "SPCL_EXP":
-    case "SPCL_Normal":
-      return { color: "#297bff", name: "臨時", data: "normal" };
-    case "OneMan":
-      return { color: "white", name: "普通列車(ワンマン)", data: "normal" };
+export const getTrainType: getTrainType = ({ type, id, whiteMode }) => {
+  switch (type) {
     case "Normal":
-      return { color: "white", name: "普通列車", data: "normal" };
+      return {
+        color: whiteMode ? "black" : "white",
+        name: "普通列車",
+        shortName: "普通",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "normal",
+      };
+    case "OneMan":
+      return {
+        color: whiteMode ? "black" : "white",
+        name: "普通列車(ワンマン)",
+        shortName: "普通",
+        fontAvailable: true,
+        isOneMan: true,
+        data: "normal",
+      };
+    case "Rapid":
+      return {
+        color: whiteMode ? "#00a0bdff" : "aqua",
+        name: "快速",
+        shortName: "快速",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "rapid",
+      };
+    case "OneManRapid":
+      return {
+        color: whiteMode ? "#00a0bdff" : "aqua",
+        name: "快速",
+        shortName: "快速",
+        fontAvailable: true,
+        isOneMan: true,
+        data: "rapid",
+      };
+    case "LTDEXP":
+      return {
+        color: "red",
+        name: "特急",
+        shortName: "特急",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "express",
+      };
+    case "NightLTDEXP":
+      return {
+        color: whiteMode ? "#e000b0ff" : "pink",
+        name: "寝台特急",
+        shortName: "特急",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "express",
+      };
+    case "SPCL":
+    case "SPCL_Normal":
+      return {
+        color: "#297bff",
+        name: "臨時",
+        shortName: "臨時",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "normal",
+      };
+    case "SPCL_Rapid":
+      return {
+        color: "#297bff",
+        name: "臨時快速",
+        shortName: "臨時快速",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "normal",
+      };
+    case "SPCL_EXP":
+      return {
+        color: "#297bff",
+        name: "臨時特急",
+        shortName: "臨時特急",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "normal",
+      };
+    case "Party":
+      return {
+        color: "#ff7300ff",
+        name: "団体臨時",
+        shortName: "団体臨時",
+        fontAvailable: true,
+        isOneMan: false,
+        data: "normal",
+      };
+    case "Freight":
+      return {
+        color: "#007488ff",
+        name: "貨物",
+        shortName: "貨物",
+        fontAvailable: false,
+        isOneMan: false,
+        data: "notService",
+      };
+    case "Forwarding":
+      return {
+        color: "#5f5f5fff",
+        name: "回送",
+        shortName: "回送",
+        fontAvailable: false,
+        isOneMan: false,
+        data: "notService",
+      };
+    case "FreightForwarding":
+      return {
+        color: "#5f5f5fff",
+        name: "単機回送",
+        shortName: "単機回送",
+        fontAvailable: false,
+        isOneMan: false,
+        data: "notService",
+      };
+    case "Other":
     default:
-      return { color: "white", name: "その他", data: "normal" };
+      if (id) {
+        switch (true) {
+          case !!id.includes("T"):
+            return {
+              color: "#5f5f5fff",
+              name: "単機回送",
+              shortName: "単機回送",
+              fontAvailable: false,
+              isOneMan: false,
+              data: "notService",
+            };
+          case !!id.includes("R"):
+          case !!id.includes("E"):
+          case !!id.includes("L"):
+          case !!id.includes("A"):
+          case !!id.includes("B"):
+            return {
+              color: "#5f5f5fff",
+              name: "回送",
+              shortName: "回送",
+              fontAvailable: false,
+              isOneMan: false,
+              data: "notService",
+            };
+          case !!id.includes("H"):
+            return {
+              color: "#5f5f5fff",
+              name: "試運転",
+              shortName: "試運転",
+              fontAvailable: false,
+              isOneMan: false,
+              data: "notService",
+            };
+        }
+      }
+      return {
+        color: whiteMode ? "black" : "white",
+        name: "その他",
+        shortName: "その他",
+        fontAvailable: false,
+        isOneMan: false,
+        data: "normal",
+      };
   }
 };

lib/initIcon.tsx

@@ -9,30 +9,13 @@ export const initIcon = (
   tabBarBadge: string,
   isInfo: boolean
 ) => {
-  switch (type) {
-    case "Ionicons":
-      return ({ focused, color, size }) => (
-        <>
-          {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
-          <Ionicons
-            name={name}
-            size={30}
-            color={focused ? "#0099CC" : "black"}
-          />
-        </>
-      );
-    case "AntDesign":
-      return ({ focused, color, size }) => (
-        <>
-          {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
-          <AntDesign
-            name={name}
-            size={30}
-            color={focused ? "#0099CC" : "black"}
-          />
-        </>
-      );
-  }
+  const IconComponent = type == "Ionicons" ? Ionicons : AntDesign;
+  return ({ focused, color, size }) => (
+    <>
+      {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
+      <IconComponent name={name} size={30} color={focused ? "#0099CC" : "black"} />
+    </>
+  );
 };
 type BadgeProps = { tabBarBadge: string; isInfo: boolean };
 
@@ -60,7 +43,7 @@ export const Badge: FC<BadgeProps> = ({ tabBarBadge, isInfo }) => {
           shadowOffset: { width: 0, height: 0 },
           shadowOpacity: 0.5,
           shadowRadius: 4,
-          elevation: 2
+          elevation: 2,
         }}
       >
         <Text style={{ color: "white", paddingHorizontal: 4 }}>

lib/trainPositionTextArray.ts

@@ -18,7 +18,7 @@ export type trainDataType = {
   Line?: string;
   PosNum?: number;
   Type?: string;
-  delay?: string | number;
+  delay?: "入線" | number;
   num?: string;
 };
 type trainData = (

lib/trainTimeFiltering.ts

@@ -0,0 +1,107 @@
+import dayjs from "dayjs";
+import { trainDataType, trainPosition } from "@/lib/trainPositionTextArray";
+import { eachTrainDiagramType, StationProps } from "@/lib/CommonTypes";
+type trainDataProps = {
+  d: eachTrainDiagramType;
+  currentTrain: trainDataType[];
+  station: StationProps[];
+};
+export const trainTimeFiltering: (x: trainDataProps) => boolean = (props) => {
+  const { d, currentTrain, station } = props;
+  const baseTime = 2; // 何時間以内の列車を表示するか
+  if (currentTrain.filter((t) => t.num == d.train).length == 0) {
+    const date = dayjs();
+    const trainTime = date
+      .hour(parseInt(d.time.split(":")[0]))
+      .minute(parseInt(d.time.split(":")[1]));
+
+    if (date.isAfter(trainTime)) {
+      return false;
+    } else if (trainTime.diff(date) < baseTime * 60 * 60 * 1000) {
+      return true;
+    }
+    return false;
+  } else {
+    const Pos = trainPosition(currentTrain.filter((t) => t.num == d.train)[0]);
+    let nextPos = "";
+    let PrePos = "";
+    //
+    if (Pos.isBetween == true) {
+      nextPos = Pos.Pos.to;
+      PrePos = Pos.Pos.from;
+    } else {
+      nextPos = Pos.Pos.Pos;
+    }
+    const stationData = station[0].Station_JP;
+    switch (stationData) {
+      case nextPos:
+        if (d.lastStation != stationData) return true;
+        break;
+      case PrePos:
+        return false;
+      default:
+        break;
+    }
+    const [h, m] = d.time.split(":");
+    const delayData = currentTrain.filter((t) => t.num == d.train)[0].delay;
+    let delay = delayData === "入線" ? 0 : delayData;
+    const date = dayjs();
+    const IntH = parseInt(h) < 4 ? parseInt(h) + 24 : parseInt(h);
+    const IntM = parseInt(m);
+    const targetDate = date.hour(IntH).minute(IntM + delay);
+    if (date.isAfter(targetDate)) return false;
+    if (targetDate.diff(date) < baseTime * 60 * 60 * 1000) return true;
+    return false;
+  }
+};
+type getTimeProps = (
+  stationDiagram: { [key: string]: string },
+  station: StationProps
+) => eachTrainDiagramType[];
+export const getTime: getTimeProps = (stationDiagram, station) => {
+  const returnData = Object.keys(stationDiagram)
+    .map((trainNum) => {
+      let trainData: eachTrainDiagramType = {
+        time: "",
+        lastStation: "",
+        isThrough: false,
+        train: trainNum,
+      };
+      stationDiagram[trainNum].split("#").forEach((data) => {
+        const [stationName, type, time] = data.split(",");
+        if (!type) return;
+        if (type.match("着")) {
+          trainData.lastStation = stationName;
+        }
+        if (stationName === station.Station_JP) {
+          if (type.match("発")) {
+            trainData.time = time;
+          } else if (type.match("通")) {
+            trainData.time = time;
+            trainData.isThrough = true;
+          } else if (type.match("着")) {
+            trainData.time = time;
+          }
+        }
+      });
+      return {
+        train: trainNum,
+        time: trainData.time,
+        lastStation: trainData.lastStation,
+        isThrough: trainData.isThrough,
+      };
+    })
+    .filter((d) => d.time);
+  return returnData.sort((a, b) => {
+    let [aH, aM] = a.time.split(":");
+    let [bH, bM] = b.time.split(":");
+    if (parseInt(aH) < 4) aH = (parseInt(aH) + 24).toString();
+    if (parseInt(bH) < 4) bH = (parseInt(bH) + 24).toString();
+    const baseTime = dayjs();
+    const aTime = baseTime.hour(parseInt(aH)).minute(parseInt(aM));
+    const bTime = baseTime.hour(parseInt(bH)).minute(parseInt(bM));
+    if (aTime.isBefore(bTime)) return -1;
+    if (aTime.isAfter(bTime)) return 1;
+    return 0;
+  });
+};

lib/useInterval.ts

@@ -24,6 +24,8 @@ export const useInterval = (fn: Fn, interval: number, autostart = true) => {
   useEffect(() => {
     if (autostart) {
       setState("RUNNING");
+    }else{
+      setState("STOPPED");
     }
   }, [autostart]);
   useEffect(() => {

menu.js

@@ -1,421 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import Carousel from "react-native-reanimated-carousel";
-import {
-  Platform,
-  View,
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-  LayoutAnimation,
-  Dimensions,
-} from "react-native";
-import Constants from "expo-constants";
-import * as Location from "expo-location";
-import StatusbarDetect from "./StatusbarDetect";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
-import { Ionicons } from "@expo/vector-icons";
-import LottieView from "lottie-react-native";
-import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
-
-import LED_vision from "./components/発車時刻表/LED_vidion";
-import Sign from "./components/駅名表/Sign";
-import { TitleBar } from "./components/Menu/TitleBar";
-import { FixedContentBottom } from "./components/Menu/FixedContentBottom";
-
-import { UsefulBox } from "./components/atom/UsefulBox";
-import { lineList } from "./lib/getStationList";
-import useInterval from "./lib/useInterval";
-import { HeaderConfig } from "./lib/HeaderConfig";
-import { useFavoriteStation } from "./stateBox/useFavoriteStation";
-import { SheetManager } from "react-native-actions-sheet";
-import { useTrainDelayData } from "./stateBox/useTrainDelayData";
-import { useNavigation } from "@react-navigation/native";
-import { useStationList } from "./stateBox/useStationList";
-import { StationNumber } from "./components/Menu/StationPagination";
-import lineColorList from "./assets/originData/lineColorList";
-import { AS } from "./storageControl";
-import { SimpleDot } from "./components/Menu/SimpleDot";
-import { useAllTrainDiagram } from "./stateBox/useAllTrainDiagram";
-
-export default function Menu({ getCurrentTrain }) {
-  const { navigate } = useNavigation();
-  const { favoriteStation } = useFavoriteStation();
-  const { originalStationList } = useStationList();
-
-  //位置情報
-  const [locationStatus, setLocationStatus] = useState(null);
-  useEffect(() => {
-    if (Platform.OS == "web") return;
-    Location.requestForegroundPermissionsAsync().then((data) => {
-      setLocationStatus(
-        Platform.OS == "ios"
-          ? data.status == "granted"
-          : data.android.accuracy == "fine"
-      );
-    });
-  }, []);
-
-  const getCurrentPosition = () => {
-    if (!locationStatus) return () => {};
-    Location.getCurrentPositionAsync({}).then((location) =>
-      makeCurrentStation(location)
-    );
-  };
-  const makeCurrentStation = (location) => {
-    if (!originalStationList) return () => {};
-    const findStationEachLine = (selectLine) => {
-      const searchArea = 0.002;
-      const _calcDistance = (from, to) => {
-        let lat = Math.abs(from.lat - to.lat);
-        let lng = Math.abs(from.lng - to.lng);
-        return Math.sqrt(lat * lat + lng * lng);
-      };
-      let NearStation = selectLine.filter(
-        (d) =>
-          _calcDistance(d, {
-            lat: location.coords.latitude,
-            lng: location.coords.longitude,
-          }) < searchArea
-      );
-      return NearStation;
-    };
-
-    let returnDataBase = lineList
-      .map((d) => findStationEachLine(originalStationList[d]))
-      .filter((d) => d.length > 0)
-      .reduce((pre, current) => {
-        pre.push(...current);
-        return pre;
-      }, []);
-    if (returnDataBase.length) {
-      let currentStation = currentStation == undefined ? [] : currentStation;
-      if (currentStation.toString() != returnDataBase.toString()) {
-        setCurrentStation(returnDataBase);
-      }
-    } else {
-      setCurrentStation(undefined);
-    }
-  };
-
-  useEffect(getCurrentPosition, [locationStatus]);
-  useInterval(getCurrentPosition, 5000);
-
-  const [currentStation, setCurrentStation] = useState(undefined); //第三要素
-
-  const carouselRef = useRef();
-  const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
-
-  const [allStationData, setAllStationData] = useState([]);
-  useEffect(() => {
-    setAllStationData(
-      [currentStation, ...favoriteStation].filter((d) => d != undefined)
-    );
-  }, [currentStation, favoriteStation]);
-  useEffect(() => {
-    if (allStationData.length == 0) {
-      setSelectedCurrentStation(0);
-      return;
-    }
-    if (allStationData[selectedCurrentStation] == undefined) {
-      const count = selectedCurrentStation - 1;
-      setSelectedCurrentStation(count);
-    }
-  }, [selectedCurrentStation, currentStation, allStationData]);
-  useEffect(() => {
-    if (!carouselRef.current) return;
-    carouselRef?.current.scrollTo({
-      count: selectedCurrentStation - carouselRef.current.getCurrentIndex(),
-      animated: true,
-    });
-  }, [selectedCurrentStation]);
-
-  //全列車ダイヤリストを作成するuseEffect
-  const { allTrainDiagram:trainDiagram} = useAllTrainDiagram();
-
-  const oPSign = () => {
-    const payload = {
-      currentStation:
-        originalStationList &&
-        allStationData.length != 0 &&
-        allStationData[selectedCurrentStation],
-      navigate: navigate,
-      goTo: "menu",
-      useShow: () => SheetManager.show("StationDetailView", { payload }),
-      onExit: () => SheetManager.hide("StationDetailView"),
-    };
-    SheetManager.show("StationDetailView", { payload });
-  };
-
-  const [dotButton, setDotButton] = useState(false);
-
-  useEffect(() => {
-    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
-      setDotButton(data === "true");
-    });
-  }, []);
-  const oLPSign = () => {
-    LayoutAnimation.configureNext({
-      duration: 600,
-      update: { type: "spring", springDamping: 0.5 },
-    });
-    AS.setItem(
-      "CarouselSettings/activeDotSettings",
-      !dotButton ? "true" : "false"
-    );
-    setDotButton(!dotButton);
-  };
-  const width = Dimensions.get("window").width;
-  return (
-    <View
-      style={{
-        height: "100%",
-        backgroundColor: "white",
-        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
-      }}
-    >
-      <StatusbarDetect />
-      <TitleBar />
-      <ScrollView>
-        <TopMenuButton />
-        {originalStationList.length != 0 && allStationData.length != 0 && (
-          <View style={{ flex: 1, paddingTop: 10 }}>
-            <Carousel
-              ref={carouselRef}
-              data={originalStationList && allStationData}
-              height={(wp("80%") / 20) * 9 + 10}
-              pagingEnabled={true}
-              snapEnabled={true}
-              loop={false}
-              width={width}
-              style={{ width: width, alignContent: "center" }}
-              mode="parallax"
-              modeConfig={{
-                parallaxScrollingScale: 1,
-                parallaxScrollingOffset: 100,
-                parallaxAdjacentItemScale: 0.8,
-              }}
-              onSnapToItem={setSelectedCurrentStation}
-              renderItem={({ item, index }) => {
-                return (
-                  <View
-                    style={{
-                      backgroundColor: "#0000",
-                      width: width,
-                      flexDirection: "row",
-                      marginLeft: 0,
-                      marginRight: 0,
-                    }}
-                    key={item[0].StationNumber}
-                  >
-                    <View style={{ flex: 1 }} />
-                    <Sign
-                      currentStation={item}
-                      isCurrentStation={item == currentStation}
-                      oP={oPSign}
-                      oLP={oLPSign}
-                    />
-                    <View style={{ flex: 1 }} />
-                  </View>
-                );
-              }}
-            />
-            <View
-              style={{
-                flexDirection: "row",
-                justifyContent: "center",
-                alignContent: "center",
-                alignItems: "center",
-              }}
-            >
-              {originalStationList &&
-                allStationData.map((d, index) => {
-                  const active = index == selectedCurrentStation;
-                  const numberIndex = d[0].StationNumber;
-                  if (dotButton) {
-                    return (
-                      <StationNumber
-                        onPress={() => setSelectedCurrentStation(index)}
-                        currentStation={d}
-                        active={active}
-                        index={numberIndex}
-                      />
-                    );
-                  } else {
-                    return (
-                      <SimpleDot
-                        onPress={() => setSelectedCurrentStation(index)}
-                        active={active}
-                        index={numberIndex}
-                      />
-                    );
-                  }
-                })}
-            </View>
-          </View>
-        )}
-        {allStationData.length != 0 &&
-          originalStationList.length != 0 &&
-          allStationData[selectedCurrentStation] && (
-            <LED_vision
-              station={
-                originalStationList && allStationData[selectedCurrentStation]
-              }
-              trainDiagram={trainDiagram}
-              getCurrentTrain={getCurrentTrain}
-              navigate={navigate}
-              openStationACFromEachTrainInfo={() => {}}
-            />
-          )}
-        <JRSTraInfoBox />
-        <FixedContentBottom navigate={navigate} />
-      </ScrollView>
-    </View>
-  );
-}
-
-const TopMenuButton = () => {
-  const buttonList = [
-    {
-      backgroundColor: "#F89038",
-      icon: "train-car",
-      onPress: () =>
-        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
-      title: "駅・鉄道情報",
-    },
-    {
-      backgroundColor: "#EA4752",
-      icon: "google-spreadsheet",
-      onPress: () =>
-        Linking.openURL(
-          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-        ),
-      title: "運賃表",
-    },
-    {
-      backgroundColor: "#91C31F",
-      icon: "clipboard-list-outline",
-      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
-      title: "予約",
-    },
-  ];
-  return (
-    <View style={{ flexDirection: "row" }}>
-      {buttonList.map((d, index) => (
-        <UsefulBox
-          backgroundColor={d.backgroundColor}
-          icon={d.icon}
-          flex={1}
-          onPressButton={d.onPress}
-          key={index + d.icon}
-        >
-          {d.title}
-        </UsefulBox>
-      ))}
-    </View>
-  );
-};
-
-const JRSTraInfoBox = () => {
-  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
-    useTrainDelayData();
-  const styles = {
-    touch: {
-      backgroundColor: "#0099CC",
-      borderRadius: 5,
-      margin: 10,
-      borderColor: "black",
-      borderWidth: 2,
-      overflow: "hidden",
-    },
-    scroll: {
-      backgroundColor: "#0099CC",
-      borderRadius: 5,
-      maxHeight: 300,
-    },
-    bottom: {
-      position: "absolute",
-      top: 250,
-      alignItems: "center",
-      width: "100%",
-      height: 50,
-      backgroundColor: "#007FCC88",
-    },
-    box: {
-      padding: 10,
-      backgroundColor: "white",
-      borderBottomLeftRadius: 5,
-      borderBottomRightRadius: 5,
-    },
-  };
-  return (
-    <TouchableOpacity
-      onPress={() => SheetManager.show("JRSTraInfo")}
-      style={styles.touch}
-    >
-      <ScrollView scrollEnabled={false} style={styles.scroll}>
-        <View
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
-        >
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            列車遅延速報EX
-          </Text>
-          <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            {getTime
-              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                ":" +
-                getTime.toLocaleTimeString("ja-JP").split(":")[1]
-              : NaN}
-          </Text>
-          <Ionicons
-            name="reload"
-            color="white"
-            size={30}
-            style={{ margin: 5 }}
-            onPress={() => {
-              setLoadingDelayData(true);
-            }}
-          />
-        </View>
-        <View style={styles.box}>
-          {loadingDelayData ? (
-            <View style={{ alignItems: "center" }}>
-              <LottieView
-                autoPlay
-                loop
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                source={require("./assets/51690-loading-diamonds.json")}
-              />
-            </View>
-          ) : delayData ? (
-            delayData.map((d, index, array) => {
-              let data = d.split(" ");
-              return (
-                <View
-                  style={{ flexDirection: "row" }}
-                  key={data[1] + "key" + index}
-                >
-                  <Text style={{ flex: 15, fontSize: 18 }}>
-                    {data[0].replace("\n", "")}
-                  </Text>
-                  <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
-                  <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
-                </View>
-              );
-            })
-          ) : (
-            <Text>現在、5分以上の遅れはありません。</Text>
-          )}
-        </View>
-      </ScrollView>
-      <View style={styles.bottom}>
-        <View style={{ flex: 1 }} />
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          詳細を見る
-        </Text>
-        <View style={{ flex: 1 }} />
-      </View>
-    </TouchableOpacity>
-  );
-};