Merge commit '5d97ab2f875236845c8a9872f45fea30ac32f9ae' into patch/6.x

2025-08-08 10:53:54 +00:00 · 2025-08-08 10:53:54 +00:00 · ff4eb2c95f
commit ff4eb2c95f
parent 3dbaa6bfbf 5d97ab2f87
19 changed files with 377 additions and 638 deletions
--- a/App.js
+++ b/App.js
@ -32,7 +32,9 @@ if (Platform.OS === "android") {
 }

 export default function App() {
-  useEffect(() => UpdateAsync(), []);
+  useEffect(() => {
+    UpdateAsync();
+  }, []);

  const ProviderTree = buildProvidersTree([
    AllTrainDiagramProvider,
--- a/assets/configuration/layout_tokyo.jpg
+++ b/assets/configuration/layout_tokyo.jpg
--- a/components/ActionSheetComponents/EachTrainInfoCore.js
+++ b/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 =
--- a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx
+++ b/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(
-        trainNum,
-        allCustonTrainData
+      const { type, trainName, trainNumDistance, infogram, isEdit } =
+        customTrainDataDetector(trainNum, allCustomTrainData);
+      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"):
-                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 !== "":
+        case trainName !== "":
          // 特急の場合は、列車名を取得
          // 列番対称データがある場合はそれから列車番号を取得
-          const distance = customTrainData.trainNumDistance;
-          const number =
-            distance !== null ? ` ${parseInt(trainNum) - distance}号` : "";
-          const trainName = customTrainData.trainName + number;
          return [
-            type,
-            trainName,
+            typeString,
+            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", {
-            uri:
-              "https://jr-shikoku-data-post-system.pages.dev?trainNum=" +
-              trainNum +
-              "&token=" +
-              expoPushToken,
-            useExitButton: false,
-          });
+          const uri = `https://jr-shikoku-data-post-system.pages.dev?trainNum=${trainNum}&token=${expoPushToken}`;
+          navigate("generalWebView", { uri, 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 }} />
--- a/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx
+++ b/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);
--- a/components/AllTrainDiagramView.js
+++ b/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>
-  );
-};
--- a/components/Menu/FixedContentBottom.js
+++ b/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}
--- a/components/Settings/SettingTopPage.js
+++ b/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,
--- a/components/custom-train-data.ts
+++ b/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) {
-    const customTrain = allCustonTrainData.find(
+  if (allCustomTrainData && allCustomTrainData.length > 0) {
+    const customTrain = allCustomTrainData.find(
      (train) => train.TrainNumber === TrainNumber
    );
    if (customTrain) {
--- a/components/trainMenu.js
+++ b/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"}
--- a/components/発車時刻表/EachData.tsx
+++ b/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":
--- a/components/発車時刻表/LED_inside_Component/AreaDescription.tsx
+++ b/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>
+  );
+};
--- a/components/発車時刻表/LED_vidion.js
+++ b/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 && (
-        <Description
+      {areaInfo != "" && isInfoArea && (
+        <AreaDescription
          numberOfLines={1}
-          info={areaString.replaceAll("\n", "").replaceAll("\r", "")}
+          areaInfo={areaInfo}
          onClick={() => alert(areaInfo)}
        />
      )}
--- a/lib/getStringConfig.ts
+++ b/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];
+  }
+};
--- a/lib/webViewInjectjavascript.ts
+++ b/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,50 +25,98 @@ 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 trainDiagramData2 = {};
-    fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
-    .then((response) => response.json())
-    .then((res)=>res.data)
-    .then((res) => {
-        const data = {};
-        res.forEach((d) => {
-          const keys = Object.keys(d);
-          data[keys] = d[keys];
+
+    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();
+          }
        });
-        return data;
-      })
-    .then((data) => {
-      trainDiagramData2 = data;
-    });
+      }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)
+          .then((res) => {
+              const data = {};
+              res.forEach((d) => {
+                const keys = Object.keys(d);
+                data[keys] = d[keys];
+              });
+              return data;
+            })
+          .then((data) => {
+            if(!_.isEqual(data, trainDiagramData2)) {
+              trainDiagramData2 = data;
+              setReload();
+            }
+          });
+      }catch(error){}
+      setTimeout(TrainDiagramData2Update, 60000);
+    }
+    TrainDiagramData2Update();
+    
    let probremsData = [];
-    fetch("https://n8n.haruk.in/webhook/jrshikoku-position-problems").then((response) => response.json()).then((data) => {
-      probremsData = data.data;
-    });
+
+    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);
    }
-    setReload();
+    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";
--- a/stateBox/useAllTrainDiagram.js
+++ b/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,
      }}
    >
--- a/stateBox/useAreaInfo.js
+++ b/stateBox/useAreaInfo.js
@ -378,7 +378,9 @@ export const AreaInfoProvider = ({ children }) => {
        );
      });
  };
-  useEffect(getAreaData, []);
+  useEffect(() => {
+    getAreaData();
+  }, []);
  useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
  return (
    <AreaInfoContext.Provider
--- a/stateBox/useCurrentTrain.js
+++ b/stateBox/useCurrentTrain.js
@ -71,7 +71,9 @@ export const CurrentTrainProvider = ({ children }) => {
    webview.current?.injectJavaScript(i);
  };

-  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+  useEffect(() => {
+    getCurrentTrain();
+  }, []); //初回だけ現在の全在線列車取得

  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得

--- a/stateBox/useUserPosition.tsx
+++ b/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 (