Merge commit 'ff4eb2c95f72581771b09ea820e9413540684e7b'

App.js

@@ -32,7 +32,9 @@ if (Platform.OS === "android") {
 }
 
 export default function App() {
-  useEffect(() => UpdateAsync(), []);
+  useEffect(() => {
+    UpdateAsync();
+  }, []);
 
   const ProviderTree = buildProvidersTree([
     AllTrainDiagramProvider,

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -44,7 +44,7 @@ export const EachTrainInfoCore = ({
 }) => {
   const { currentTrain } = useCurrentTrain();
   const { originalStationList, stationList } = useStationList();
-  const { allTrainDiagram: trainList, allCustonTrainData } =
+  const { allTrainDiagram: trainList, allCustomTrainData } =
     useAllTrainDiagram();
   const { setTrainInfo } = useTrainMenu();
   const [currentTrainData, setCurrentTrainData] = useState();
@@ -323,7 +323,7 @@ export const EachTrainInfoCore = ({
   }, []);
 
   const openTrainInfo = (d) => {
-    const train = customTrainDataDetector(d, allCustonTrainData);
+    const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -10,6 +10,8 @@ import { InfogramText } from "@/components/ActionSheetComponents/EachTrainInfoCo
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { useNotification } from "@/stateBox/useNotifications";
+import { getStringConfig } from "@/lib/getStringConfig";
+import { FontAwesome } from "@expo/vector-icons";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -44,87 +46,46 @@ export const HeaderText: FC<Props> = ({
   const { limited, trainNum } = data;
 
   const { updatePermission } = useTrainMenu();
-  const { allCustonTrainData } = useAllTrainDiagram();
+  const { allCustomTrainData } = useAllTrainDiagram();
   const { expoPushToken } = useNotification();
 
   // 列車名、種別、フォントの取得
-  const [typeName, trainName, fontAvailable, isOneMan, infogram] =
+  const [typeName, trainName, fontAvailable, isOneMan, infogram, isEdit] =
     useMemo(() => {
-      const customTrainData = customTrainDataDetector(
+      const { type, trainName, trainNumDistance, infogram, isEdit } =
-        trainNum,
+        customTrainDataDetector(trainNum, allCustomTrainData);
-        allCustonTrainData
+      const [typeString, fontAvailable, isOneMan] = getStringConfig(
+        type,
+        trainNum
       );
-      const [type, fontAvailable, isOneMan] = (() => {
-        switch (customTrainData.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 "Freight":
-            return ["貨物", false, false];
-          case "Forwarding":
-            return ["回送", false, false];
-          case "FreightForwarding":
-            return ["単機回送", false, false];
-          case "Other":
       switch (true) {
-              case !!trainNum.includes("T"):
+        case trainName !== "":
-                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,
+            typeString,
-            trainName,
+            trainName +
+              (trainNumDistance !== null
+                ? ` ${parseInt(trainNum) - trainNumDistance}号`
+                : ""),
             fontAvailable,
             isOneMan,
-            customTrainData.infogram,
+            infogram,
+            isEdit,
           ];
         case trainData[trainData.length - 1] === undefined:
-          return [type, "", fontAvailable, isOneMan, customTrainData.infogram];
+          return [typeString, "", fontAvailable, isOneMan, infogram, isEdit];
         default:
           // 行先がある場合は、行先を取得
           return [
-            type,
+            typeString,
             migrateTrainName(
               trainData[trainData.length - 1].split(",")[0] + "行き"
             ),
             fontAvailable,
             isOneMan,
-            customTrainData.infogram,
+            infogram,
+            isEdit
           ];
       }
     }, [trainData]);
@@ -140,14 +101,8 @@ export const HeaderText: FC<Props> = ({
       <TouchableOpacity
         style={{ borderRadius: 5, flexDirection: "row", alignItems: "center" }}
         onLongPress={() => {
-          navigate("generalWebView", {
+          const uri = `https://jr-shikoku-data-post-system.pages.dev?trainNum=${trainNum}&token=${expoPushToken}`;
-            uri:
+          navigate("generalWebView", { uri, useExitButton: false });
-              "https://jr-shikoku-data-post-system.pages.dev?trainNum=" +
-              trainNum +
-              "&token=" +
-              expoPushToken,
-            useExitButton: false,
-          });
           SheetManager.hide("EachTrainInfo");
         }}
         disabled={!updatePermission}
@@ -166,6 +121,7 @@ export const HeaderText: FC<Props> = ({
         {isOneMan && <OneManText />}
         <Text style={textConfig}>{trainName}</Text>
         <InfogramText infogram={infogram} />
+        {isEdit &&<FontAwesome name="commenting-o" size={20} color="white" style={{ marginLeft: 5 }} onPress={()=>alert("このアイコン、列車データはコミュニティによってリアルタイム追加されています。")} />}
       </TouchableOpacity>
 
       <View style={{ flex: 1 }} />

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -23,12 +23,12 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
   const [trainIcon, setTrainIcon] = useState(null);
   const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
   const [address, setAddress] = useState("");
-  const { allCustonTrainData } = useAllTrainDiagram();
+  const { allCustomTrainData } = useAllTrainDiagram();
   useEffect(() => {
     if (!data.trainNum) return;
     const { img, infoUrl } = customTrainDataDetector(
       data.trainNum,
-      allCustonTrainData
+      allCustomTrainData
     );
     if (img) setTrainIcon(img);
     if (infoUrl) setAddress(infoUrl);

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, allCustonTrainData } = useAllTrainDiagram();
+  const { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [useStationName, setUseStationName] = useState(false);
@@ -53,7 +57,7 @@ export default function AllTrainDiagramView() {
   }, []);
 
   const openTrainInfo = (d) => {
-    const train = customTrainDataDetector(d, allCustonTrainData);
+    const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =
@@ -71,6 +75,75 @@ 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
@@ -101,7 +174,6 @@ export default function AllTrainDiagramView() {
             </Text>
           </View>
         }
-        
         keyExtractor={(item) => item}
         //initialNumToRender={100}
       />
@@ -225,25 +297,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/Menu/FixedContentBottom.js

@@ -52,22 +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}

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.1.2"; // Update this version code as needed
+const versionCode = "6.1.3"; // Update this version code as needed
 
 export const SettingTopPage = ({
   testNFC,

components/custom-train-data.ts

@@ -1,10 +1,10 @@
 import dayjs from "dayjs";
 export const customTrainDataDetector = (
   TrainNumber: string,
-  allCustonTrainData?: any[]
+  allCustomTrainData?: any[]
 ) => {
-  if (allCustonTrainData && allCustonTrainData.length > 0) {
+  if (allCustomTrainData && allCustomTrainData.length > 0) {
-    const customTrain = allCustonTrainData.find(
+    const customTrain = allCustomTrainData.find(
       (train) => train.TrainNumber === TrainNumber
     );
     if (customTrain) {

components/trainMenu.js

@@ -180,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"}

components/発車時刻表/EachData.tsx

@@ -46,7 +46,7 @@ export const EachData: FC<Props> = (props) => {
   } = props;
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
-  const { allCustonTrainData } = useAllTrainDiagram();
+  const { allCustomTrainData } = useAllTrainDiagram();
   const openTrainInfo = (d: {
     train: string;
     lastStation: string;
@@ -78,7 +78,7 @@ export const EachData: FC<Props> = (props) => {
   const getTrainDataFromCurrentTrain = (trainNum: string) => {
     const customTrainData = customTrainDataDetector(
       d.train,
-      allCustonTrainData
+      allCustomTrainData
     );
     switch (customTrainData.type) {
       case "Normal":

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_vidion.js

@@ -12,6 +12,7 @@ import { Description } from "./LED_inside_Component/Description";
 import { EachData } from "./EachData";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { trainPosition } from "@/lib/trainPositionTextArray";
+import { AreaDescription } from "./LED_inside_Component/AreaDescription";
 
 /**
  *
@@ -180,36 +181,6 @@ export default function LED_vision(props) {
       return !date.isAfter(db);
     }
   };
-
-  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]);
   const { width } = useWindowDimensions();
   const adjustedWidth = width * 0.98;
   return (
@@ -236,10 +207,10 @@ export default function LED_vision(props) {
           key={d.train}
         />
       ))}
-      {areaString != "" && isInfoArea && (
+      {areaInfo != "" && isInfoArea && (
-        <Description
+        <AreaDescription
           numberOfLines={1}
-          info={areaString.replaceAll("\n", "").replaceAll("\r", "")}
+          areaInfo={areaInfo}
           onClick={() => alert(areaInfo)}
         />
       )}

lib/getStringConfig.ts

@@ -0,0 +1,60 @@
+type typeID =
+  | "Normal"
+  | "OneMan"
+  | "Rapid"
+  | "OneManRapid"
+  | "LTDEXP"
+  | "NightLTDEXP"
+  | "SPCL"
+  | "SPCL_Normal"
+  | "SPCL_Rapid"
+  | "SPCL_EXP"
+  | "Freight"
+  | "Forwarding"
+  | "FreightForwarding"
+  | "Other";
+type types = (types: typeID, 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 "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/webViewInjectjavascript.ts

@@ -17,6 +17,7 @@ export const injectJavascriptData: InjectJavascriptData = (
     mapSwitch != "true"
       ? `
       document.querySelector('#header a').style.display = 'none';
+      document.querySelector('#main').style.left = '0px';
       document.querySelector('#header').style.height = '50px';
       document.querySelector('#main').style.paddingTop = '54px';
       document.querySelector('#headerStr').style.display = 'none';
@@ -24,21 +25,48 @@ export const injectJavascriptData: InjectJavascriptData = (
       : `
       document.querySelector('.accordionClass').style.display = 'none';
       document.querySelector('#header').style.display = 'none';
+      document.querySelector('#main').style.left = '0px';
       document.querySelector('#main').style.paddingTop = '0px';
       document.querySelector('#headerStr').style.display = 'none';
       `;
 
   // 上部ヘッダーの取り扱い、自動再読み込み、setStringsの実行
   const bootData = `
+    // 起動時にブラウザにlodashを読み込むscript追加処理
+    const script = document.createElement('script');
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js";
+    document.head.appendChild(script);
+
+    const script2 = document.createElement('link');
+    script2.rel = "stylesheet";
+    script2.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css";
+    document.head.appendChild(script2);
+    
     let stationList = {};
     fetch("https://n8n.haruk.in/webhook/jr-shikoku-station-list").then((response) => response.json()).then((data) => {
       stationList = data;
-    });
-    let trainDataList = [];
-    fetch("https://n8n.haruk.in/webhook/jr-shikoku-position-custom-datalist").then((response) => response.json()).then((data) => {
-      trainDataList = data[0].data;
     }).then(()=>setReload());
+
+    let trainDataList = [];
+     const DatalistUpdate = () =>{
+      try{
+        fetch("https://n8n.haruk.in/webhook/jr-shikoku-position-custom-datalist").then((response) => response.json())
+        .then((data) => data[0].data)
+        .then((data) => {
+          if(!_.isEqual(data, trainDataList)) {
+            trainDataList = data;
+            setReload();
+          }
+        });
+      }catch(error){}
+      setTimeout(DatalistUpdate, 60000);
+    }
+    DatalistUpdate();
+
+
     let trainDiagramData2 = {};
+    const TrainDiagramData2Update = () =>{
+      try{
         fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
           .then((response) => response.json())
           .then((res)=>res.data)
@@ -51,23 +79,44 @@ export const injectJavascriptData: InjectJavascriptData = (
               return data;
             })
           .then((data) => {
+            if(!_.isEqual(data, trainDiagramData2)) {
               trainDiagramData2 = data;
+              setReload();
+            }
           });
+      }catch(error){}
+      setTimeout(TrainDiagramData2Update, 60000);
+    }
+    TrainDiagramData2Update();
+    
     let probremsData = [];
+
+    const getProblemsData = () =>{
+      try{
        fetch("https://n8n.haruk.in/webhook/jrshikoku-position-problems").then((response) => response.json()).then((data) => {
+          if(!_.isEqual(data, probremsData)) {
             probremsData = data.data;
+            setReload();
+          }
         });
+      }catch(error){}
+      setTimeout(getProblemsData, 30000);
+    }
+    getProblemsData();
+
     const setReload = () =>{
       try{
         document.getElementById('refreshIcon').click();
-        fetch("https://n8n.haruk.in/webhook/jrshikoku-position-problems").then((response) => response.json()).then((data) => {
-          probremsData = data.data;
-        });
         setStrings();
       }catch(error){}
-      setTimeout(setReload, 10000);
+    };
-    }
+    const useAutoReload = () =>{
+      try{
         setReload();
+      }catch(error){}
+      setTimeout(useAutoReload, 10000);
+    }
+    useAutoReload();
   `;
   // 左か右かを判定してアイコンを設置する
   const trainIcon = `
@@ -458,432 +507,6 @@ export const injectJavascriptData: InjectJavascriptData = (
         case "8077":
           return "https://storage.haruk.in/ef210a.png";
 
-        // // 普通列車系統、6000系運用
-        // //61運用
-        // case "1213M":
-        // case "1214M":
-        // case "143M":
-        // case "147M":
-        // //62運用
-        // case "114M":
-        // //961運用
-        // case "143M":
-        // case "147M":
-        // //962運用
-        // case "114M":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s6000p.png',hasProblem);
-        //   break;
-
-        // // 土讃線普通列車系統(include ごな線)
-        // // ごな線
-        // case "5851D": //219D併結 [ToDo: 219Dとの分割対策]
-        // case "5854D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/tosa9640jgr.png',hasProblem);
-        //   break;
-
-        //   //JR車両乗り入れ運用
-        // case "5858D":
-        // case "5869D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s1000.png',hasProblem);
-        //   break;
-        // //併結運用の併結される側  [ToDo: 分割対策]
-        // case "5845D":
-        // case "5851D":
-        // case "5818D":
-        // case "5820D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/tosa9640.png',hasProblem);
-        //   break;
-        // // 土讃線単体列車のキハ32運用
-        // case "715D":
-        // case "718D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s32ns.png',hasProblem);
-        //   break;
-
-        // // サンライズに伴う気動車代走
-        // case "6219D":
-        // case "6222D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s1000.png',hasProblem);
-        //   break;
-        // // それ以外の土讃線ごな線直通列車
-        // case "5811D":
-        // case "5813D":
-        // case "5815D":
-        // case "5817D":
-        // case "5843D":
-        // case "5853D":
-        // case "5855D":
-        // case "5859D":
-        // case "5861D":
-        // case "5865D":
-        // case "5881D":
-        // case "5885D":
-        // case "5889D":
-
-        // case "5812D":
-        // case "5814D":
-        // case "5816D":
-        // case "5852D":
-        // case "5856D":
-        // case "5860D":
-        // case "5862D":
-        // case "5872D":
-        // case "5874D":
-        // case "5876D":
-        // case "5880D":
-        // case "5882D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/tosa9640.png',hasProblem);
-        //   break;
-        // // それ以外の土讃線普通列車(1000)
-        // case "4210D":
-        // case "4212D":
-        // case "4214D":
-        // case "4218D":
-        // case "4220D":
-        // case "4222D":
-        // case "4224D":
-        // case "4226D":
-        // case "4228D":
-        // case "4230D":
-        // case "4232D":
-        // case "4234D":
-        // case "4236D":
-        // case "4238D":
-        // case "4240D":
-        // case "4242D":
-        // case "4244D":
-        // case "4250D":
-        // case "4252D":
-        // case "4254D":
-        // case "4256D":
-
-        // case "4211D":
-        // case "4221D":
-        // case "4223D":
-        // case "4225D":
-        // case "4227D":
-        // case "4229D":
-        // case "4231D":
-        // case "4235D":
-        // case "4237D":
-        // case "4239D":
-        // case "4241D":
-        // case "4245D":
-        // case "4247D":
-        // case "4249D":
-        // case "4251D":
-        // case "4253D":
-        // case "4255D":
-        // case "4257D":
-        // case "4259D":
-        // case "4261D":
-
-        // case "4710D":
-        // case "4726D":
-        // case "4730D":
-        // case "4732D":
-        // case "4734D":
-        // case "4738D":
-        // case "4740D":
-        // case "4742D":
-        // case "4744D":
-        // case "4746D":
-        // case "4752D":
-        // case "4756D":
-        // case "4762D":
-        // case "4764D":
-        // case "4766D":
-
-        // case "4711D":
-        // case "4713D":
-        // case "4723D":
-        // case "4725D":
-        // case "4727D":
-        // case "4729D":
-        // case "4731D":
-        // case "4737D":
-        // case "4739D":
-        // case "4745D":
-        // case "4753D":
-        // case "4755D":
-        // case "4759D":
-        // case "4761D":
-        // case "4763D":
-
-        // case "216D":
-        // case "238D":
-        // case "246D":
-        // case "248D":
-
-        // case "213D":
-        // case "215D":
-        // case "217D":
-        // case "219D":
-        // case "233D":
-        // case "243D":
-
-        // case "710D":
-        // case "712D":
-        // case "714D":
-        // case "716D":
-        // case "720D":
-        // case "722D":
-        // case "724D":
-        // case "728D":
-        // case "736D":
-        // case "748D":
-        // case "750D":
-        // case "754D":
-        // case "758D":
-        // case "760D":
-        // case "768D":
-
-        // case "717D":
-        // case "719D":
-        // case "721D":
-        // case "733D":
-        // case "735D":
-        // case "737D":
-        // case "741D":
-        // case "743D":
-        // case "747D":
-        // case "749D":
-        // case "751D":
-        // case "755D":
-        // case "757D":
-        // case "761D":
-
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s1000.png',hasProblem);
-        //   break;
-        // // 予讃線/土讃線普通列車運用(7000,7200)
-        // // 下り列車(伊予西条-松山は全て7000系)
-
-        // case "5519M":
-        // case "5525M":
-        // case "5215M":
-        // case "5103M":
-        // case "107M":
-        // case "1219M":
-        // case "5109M":
-        // case "6109M":
-        // case "5531M":
-        // case "1221M":
-        // case "5225M":
-        // case "5111M":
-        // case "1227M":
-        // case "115M":
-        // case "5229M":
-        // case "5117M":
-        // case "5119M":
-        // case "119M":
-        // case "5231M":
-        // case "4537M":
-        // case "5233M":
-        // case "123M":
-        // case "125M":
-        // case "5235M":
-        // case "5239M":
-        // case "5547M":
-        // case "129M":
-        // case "5241M":
-        // case "5133M":
-        // case "135M":
-        // case "1243M":
-        // case "137M":
-        // case "5139M":
-        // case "4559M":
-        // case "1245M":
-        // case "141M":
-        // case "1247M":
-        // case "5249M":
-        // case "145M":
-        // case "5253M":
-        // case "5149M":
-        // case "5255M":
-        // case "151M":
-        // case "5257M":
-        // case "153M":
-        // case "5259M":
-        // case "155M":
-        // case "1263M":
-        // case "157M":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s7200.png',hasProblem);
-        //   break;
-        //   // 下り7000系
-        // case "101M":
-        // case "4601M":
-        // case "4113M":
-        // case "121M":
-        // case "127M":
-        // case "131M":
-        // case "555M":
-        // case "4565M":
-        // case "159M":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s7000.png',hasProblem);
-        //   break;
-        //   // 上り列車 7200系
-        // case "5102M":
-        // case "104M":
-        // case "5210M":
-        // case "5108M":
-        // case "4108M":
-        // case "110M":
-        // case "112M":
-        // case "118M":
-        // case "5218M":
-        // case "5120M":
-        // case "5220M":
-        // case "5512M":
-        // case "1602M":
-        // case "1224M":
-        // case "5124M":
-        // case "5226M":
-        // case "5126M":
-        // case "5128M":
-        // case "1230M":
-        // case "4128M":
-        // case "130M":
-        // case "4522M":
-        // case "5232M":
-        // case "132M":
-        // case "5234M":
-        // case "136M":
-        // case "5236M":
-        // case "5140M":
-        // case "5238M":
-        // case "5240M":
-        // case "142M":
-        // case "4530M":
-        // case "144M":
-        // case "5242M":
-        // case "146M":
-        // case "5244M":
-        // case "4148M":
-        // case "1246M":
-        // case "150M":
-        // case "5538M":
-        // case "5152M":
-        // case "154M":
-        // case "156M":
-        // case "1252M":
-        // case "158M":
-        // case "4604M":
-        // case "548M":
-        // case "5254M":
-        // case "1606M":
-        // case "5160M":
-        // case "5256M":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s7200.png',hasProblem);
-        //   break;
-        // // 上り7000系
-        // case "114M":
-        // case "122M":
-        // case "134M":
-        // case "4138M":
-        // case "138M":
-        // case "4542M":
-        // case "162M":
-        // case "4166M":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s7000.png',hasProblem);
-        //   break;
-        // // 松山界隈気動車運用
-        // // 上り下りの概念アリ
-        // // キハ32 通常運用
-        // case "4625D":
-        // case "4916D":
-        // case "925D":
-        // case "4618D":
-        // case "4913D":
-        // case "4918D":
-        // case "4643D":
-        // case "4654D":
-        // case "4657D":
-        // case "4928D":
-        // case "4667D":
-        // case "653D":
-        // case "3621D":
-        // case "4818D":
-        // case "4821D":
-        // case "4824D":
-        // case "4813D":
-        // case "4664D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s32s.png',hasProblem);
-        //   break;
-        // // 河童うようよ号偶数
-        // case "4816D":
-        // case "4830D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s32kpuy2.png',hasProblem);
-        //   break;
-        // // 河童うようよ号奇数
-        // case "4827D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s32kpuy1.png',hasProblem);
-        //   break;
-        // // 新幹線偶数
-        // case "4810D":
-        // case "4822D":
-        // case "4826D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s32tht.png',hasProblem);
-        //   break;
-        // // 新幹線奇数
-        // case "4817D":
-        // case "4823D":
-        // case "4829D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s32thtk.png',hasProblem);
-        //   break;
-        // // キハ54 通常運用
-        // case "4632D":
-        // case "4634D":
-        // case "4921D":
-        // case "4926D":
-        // case "4927D":
-        // case "912D":
-        // case "4917D":
-        // case "4641D":
-        // case "4652D":
-        // case "4651D":
-        // case "4666D":
-        // case "4820D":
-        // case "4825D":
-        // case "4828D":
-        // case "4811D":
-        // case "4640D":
-        // case "622D":
-        // case "4633D":
-        // case "4920D":
-        // case "4637D":
-        // case "4648D":
-        // case "620D":
-        // case "4627D":
-        // case "4624D":
-        // case "4915D":
-        // case "4924D":
-        // case "4649D":
-        // case "4812D":
-        // case "4815D":
-        // case "4659D":
-        // case "4658D":
-        // case "4665D":
-        // case "4914D":
-        // case "4626D":
-        // case "4631D":
-        // case "4636D":
-        // case "4919D":
-        // case "4922D":
-        // case "4923D":
-        // case "4663D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s54s.png',hasProblem);
-        //   break;
-        // // 54しまんとろっこ
-        // case "4623D":
-        // case "8814D":
-        // case "8819D":
-        // case "4662D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s54to0ys.png',hasProblem);
-        //   break;
-        // // キハ185 通常運用
-        // case "911D":
-        // case "628D":
-        //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s185cm.png',hasProblem);
-        //   break;
         // 伊予灘ものがたり 赤
         case "8091D":
         case "8093D":
@@ -1005,15 +628,6 @@ export const injectJavascriptData: InjectJavascriptData = (
           } else if (new RegExp(/^9(5|6|7|8)\\dD$/).test(列番データ)) {
             return "https://storage.haruk.in/s1500.png";
           }
-          // 牟岐線普通列車系統 一旦閉鎖
-          // else if(new RegExp(/^(4|5)5\\d\\dD$/).test(列番データ)){
-          //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s7200.png',hasProblem);
-          //   break;
-          // }
-          // else if(new RegExp(/^5\\d\\dD$/).test(列番データ)){
-          //   setStationIcon(e.querySelector("img"),'https://storage.haruk.in/s7000.png',hasProblem);
-          //   break;
-          // }
           break;
       }
     }
@@ -1061,6 +675,7 @@ export const injectJavascriptData: InjectJavascriptData = (
     let viaData = "";
     let ToData = "";
     let TrainNumber = 列番データ;
+    let isEdit = false;
 
     try{
       const diagram = trainDiagramData2[列番データ] || trainTimeInfo[列番データ];
@@ -1265,7 +880,7 @@ export const injectJavascriptData: InjectJavascriptData = (
     getThrew(列番データ);
     if(trainDataList.find(e => e.id === 列番データ) !== undefined){
       const data = trainDataList.find(e => e.id === 列番データ);
-      //{id,isWanman,trainName,viaData,ToData,TrainNumber,JRF,type,infoUrl,trainNumDistance,info,infogram}
+      //{id,isWanman,trainName,viaData,ToData,TrainNumber,JRF,type,infoUrl,trainNumDistance,info,infogram,isEdit}
       trainType = (()=>{
         switch(data.type){
           case "Normal":
@@ -1288,7 +903,7 @@ export const injectJavascriptData: InjectJavascriptData = (
             return "寝台特急";
           case "SPCL":
           case "SPCL_Normal":
-            trainTypeColor = "#000000ff";
+            trainTypeColor = "#008d07ff";
             return "臨時";
           case "SPCL_Rapid":
             trainTypeColor = "rgba(0, 81, 255, 1)";
@@ -1300,16 +915,17 @@ export const injectJavascriptData: InjectJavascriptData = (
             trainTypeColor = "#00869ecc";
             return "貨物";
           case "Forwarding":
-            trainTypeColor = "black";
+            trainTypeColor = "#727272cc";
             return "回送";
           case "FreightForwarding":
-            trainTypeColor = "black";
+            trainTypeColor = "#727272cc";
             return "単機回送";
           default:
             return "";
         }
       })();
       isWanman = data.isWanman;
+      isEdit = data.isEdit;
       if(data.trainName != ""){
         trainName = data.trainName;
         if(data.trainNumDistance != null){
@@ -1369,7 +985,7 @@ export const injectJavascriptData: InjectJavascriptData = (
 
       const gradient = getColors.length > 1 ? "linear-gradient(130deg, " + getColors[0] + " 0%, "+ getColors[0]+"50%, "+ getColors[1]+"50%, " + getColors[1] + " 100%)" : getColors[0];
 
-      行き先情報.insertAdjacentHTML('beforebegin', "<div style='width:100%;display:flex;flex:1;flex-direction:"+(isLeft ? "column-reverse" : "column") + ";'><p style='font-size:6px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p><div style='flex:1;'></div><p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + (isWanman ? "ワンマン " : "")  + "</p><p style='font-size:6px;font-weight:bold;padding:0;color: black;text-align:center;border-style:solid;border-width: "+(!!yosan2Color ? "2px" : "0px")+";border-color:" + yosan2Color + "'>" + viaData + "</p><p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + trainName + "</p><div style='width:100%;background:" + gradient + ";'><p style='font-size:10px;font-weight:bold;padding:0;margin:0;color:white;align-items:center;align-content:center;text-align:center;text-shadow:1px 1px 0px #00000030, -1px -1px 0px #00000030,-1px 1px 0px #00000030,  1px -1px 0px #00000030,1px 0px 0px #00000030, -1px  0px 0px #00000030,0px 1px 0px #00000030,  0px -1px 0px #00000030;'>" + (ToData ? ToData + "行" : ToData) + "</p></div><div style='width:100%;background:" + trainTypeColor + ";border-radius:"+(isLeft ? "4px 4px 0 0" : "0 0 4px 4px")+";'><p style='font-size:10px;font-weight:bold;font-style:italic;padding:0;color: white;text-align:center;'>" + trainType + "</p></div><p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p></div>");
+      行き先情報.insertAdjacentHTML('beforebegin', "<div style='width:100%;display:flex;flex:1;flex-direction:"+(isLeft ? "column-reverse" : "column") + ";'>"+( isEdit ? "<div style='position:absolute;"+ (isLeft ? "right" : "left") + ":0;"+ (isLeft ? "bottom" : "top") + ":0;background-color:#00b8bb;border-radius:15px;padding:0px;padding-left:4px;padding-right:4px;'><i class='fa-solid fa-user-group fa-sm' style='color:white;width:100%;height:100%;'></i></div>" : "")+"<p style='font-size:6px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p><div style='flex:1;'></div><p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + (isWanman ? "ワンマン " : "")  + "</p><p style='font-size:6px;font-weight:bold;padding:0;color: black;text-align:center;border-style:solid;border-width: "+(!!yosan2Color ? "2px" : "0px")+";border-color:" + yosan2Color + "'>" + viaData + "</p><p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + trainName + "</p><div style='width:100%;background:" + gradient + ";'><p style='font-size:10px;font-weight:bold;padding:0;margin:0;color:white;align-items:center;align-content:center;text-align:center;text-shadow:1px 1px 0px #00000030, -1px -1px 0px #00000030,-1px 1px 0px #00000030,  1px -1px 0px #00000030,1px 0px 0px #00000030, -1px  0px 0px #00000030,0px 1px 0px #00000030,  0px -1px 0px #00000030;'>" + (ToData ? ToData + "行" : ToData) + "</p></div><div style='width:100%;background:" + trainTypeColor + ";border-radius:"+(isLeft ? "4px 4px 0 0" : "0 0 4px 4px")+";'><p style='font-size:10px;font-weight:bold;font-style:italic;padding:0;color: white;text-align:center;'>" + trainType + "</p></div><p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p></div>");
 `: `
       行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: black;'>" + returnText1 + "</p>");
       行き先情報.insertAdjacentHTML('beforebegin', "<div style='display:inline-flex;flex-direction:row;'><p style='font-size:10px;font-weight: bold;padding:0;color:black;'>" + (ToData ? ToData + "行 " : ToData) + "</p><p style='font-size:10px;padding:0;color:black;'>" + TrainNumber + (JRF ? "":"レ") + "</p></div>");
@@ -1408,7 +1024,7 @@ const setNewTrainItem = (element,hasProblem,type)=>{
         break;
       case "SPCL":
       case "SPCL_Normal":
-        element.style.borderColor = "#000000ff";
+        element.style.borderColor = "#008d07ff";
         break;
       case "SPCL_Rapid":
         element.style.borderColor = "rgba(0, 81, 255, 1)";
@@ -1420,10 +1036,10 @@ const setNewTrainItem = (element,hasProblem,type)=>{
         element.style.borderColor = "#00869ecc";
         break;
       case "Forwarding":
-        element.style.borderColor = "black";
+        element.style.borderColor = "#727272cc";
         break;
       case "FreightForwarding":
-        element.style.borderColor = "black";
+        element.style.borderColor = "#727272cc";
         break;
       default:
         element.style.borderColor = 'black';
@@ -1518,10 +1134,13 @@ const setStrings = () =>{
           i.style.position = "unset";
           i.style.display = "flex";
           i.style.flexDirection = "column";
+          i.style.alignItems = "center";
+          i.style.justifyContent = "center";
           i.style.flex = "1";
           i.style.backgroundColor = "#00000000";
           i.querySelectorAll(":scope > *").forEach(j=>{
-            j.style.width = "100%";
+            j.style.display = "flex";
+            j.style.flex = "1";
             j.style.textAlign = "center";
             j.style.margin = "5px";
             j.style.padding = "5px";

stateBox/useAllTrainDiagram.js

@@ -1,10 +1,11 @@
 import trainList from "@/assets/originData/trainList";
+import useInterval from "@/lib/useInterval";
 import { AS } from "@/storageControl";
 import React, { createContext, useContext, useEffect, useState } from "react";
 const initialState = {
   allTrainDiagram: undefined,
   setAllTrainDiagram: () => {},
-  allCustonTrainData: [],
+  allCustomTrainData: [],
 };
 
 const AllTrainDiagramContext = createContext(initialState);
@@ -13,13 +14,14 @@ export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);
 
 export const AllTrainDiagramProvider = ({ children }) => {
   const [allTrainDiagram, setAllTrainDiagram] = useState(trainList);
-  const [allCustonTrainData, setAllCustonTrainData] = useState([]); // カスタム列車データ
+  const [allCustomTrainData, setAllCustomTrainData] = useState([]); // カスタム列車データ
   const [keyList, setKeyList] = useState(); // 第二要素
-  useEffect(
-    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
-    [allTrainDiagram]
-  );
   useEffect(() => {
+    if (allTrainDiagram && Object.keys(allTrainDiagram).length > 0)
+      setKeyList(Object.keys(allTrainDiagram));
+    else setKeyList([]);
+  }, [allTrainDiagram]);
+  const getTrainDiagram = () =>
     fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
       .then((res) => res.json())
       .then((res) => res.data)
@@ -42,25 +44,35 @@ export const AllTrainDiagramProvider = ({ children }) => {
             alert("初回の路線情報の取得に失敗しました。");
           });
       });
-  }, []);
+
   useEffect(() => {
-    // カスタム列車データの取得
+    getTrainDiagram();
+  }, []);
+  useInterval(getTrainDiagram, 30000); //30秒毎に全在線列車取得
+
+  const getCustomTrainData = () => {
     fetch("https://n8n.haruk.in/webhook/jr-shikoku-position-custom-datalist")
       .then((res) => res.json())
       .then((res) => {
-        setAllCustonTrainData(res[0].data);
+        setAllCustomTrainData(res[0].data);
       })
       .catch(() => {
         alert("カスタム列車データの取得に失敗しました。");
       });
+  };
+
+  useEffect(() => {
+    // カスタム列車データの取得
+    getCustomTrainData();
   }, []);
+  useInterval(getCustomTrainData, 30000); // 30秒毎にカスタム列車データ取得
 
   return (
     <AllTrainDiagramContext.Provider
       value={{
         allTrainDiagram,
         setAllTrainDiagram,
-        allCustonTrainData,
+        allCustomTrainData,
         keyList,
       }}
     >

stateBox/useAreaInfo.js

@@ -378,7 +378,9 @@ export const AreaInfoProvider = ({ children }) => {
         );
       });
   };
-  useEffect(getAreaData, []);
+  useEffect(() => {
+    getAreaData();
+  }, []);
   useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
   return (
     <AreaInfoContext.Provider

stateBox/useCurrentTrain.js

@@ -71,7 +71,9 @@ export const CurrentTrainProvider = ({ children }) => {
     webview.current?.injectJavaScript(i);
   };
 
-  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+  useEffect(() => {
+    getCurrentTrain();
+  }, []); //初回だけ現在の全在線列車取得
 
   useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
 

stateBox/useUserPosition.tsx

@@ -58,7 +58,9 @@ export const UserPositionProvider: FC<Props> = ({ children }) => {
     if (Platform.OS == "web") return;
     getLocationPermission();
   }, []);
-  useEffect(getCurrentPosition, [locationStatus]);
+  useEffect(() => {
+    getCurrentPosition();
+  }, [locationStatus]);
   useInterval(getCurrentPosition, 5000);
 
   return (